@charset "utf-8";
            /*@import url(https://fonts.googleapis.com/css?family=Titillium+Web:500);*/
            @import url(https://fonts.googleapis.com/css?family=Titillium+Web);
            /* CSS Document */

			html, body{
				background: #010000;
				font-family: 'Titillium Web', sans-serif, '微軟正黑體', Microsoft JhengHei;
				font-size: 22px;
				width: 100%;
			}

			a {
				text-decoration: none;
				color: #0CF;
			}

			h2 {
				
				color:#ff3300;
				font-size: 30px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}
			h3{ 
			    position:relative;
				margin-top:-5%;
				padding-bottom:3%;
				text-align:center;
				font-size: 40px;
				color: #FFF;
				font-weight:70px;
				text-shadow: #F60 0px 0px 6px;
				
			}
			
			p {
				color: #ddd;
				font-size: 20px;
				line-height:32px;
				letter-spacing: 1px;
			}


        .ytcontainer {

                    padding: 25px;  
            }

            #ytplayer {
                max-width: 1100px;  
                margin: 0 auto;
            }



            .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 

            .embed-container iframe, .embed-container object, .embed-container .embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


			
		



				.cp_content{
					height:800px;
					overflow:hidden;
				}



				.colorwell{
   width: 90%;
  height: 800px;
  position: relative;
  top:-100px;
  float: left;
  margin: 5%;
  padding: 0;
  
}



.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 800px;
  position: relative;
  top:-100px;
  float: left;
  margin: 5%;
  padding: 0;
}


.shite{
  animation: colorchange 4.2s linear infinite;
}


.shite1{
  animation: colorchange 2.2s linear infinite;
}


.shite2{
  animation: colorchange_flash 2.5s linear infinite;
}

.shite3{
  animation: colorchange_flash_dual 2s linear infinite;
}





.tab_btn_title{

  font-size:20px;

}

.typewrite{
  color:#ff3300;
  font-size: 50px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 50px;
  padding-left:2%;
  
}

#output:empty:before {
  content: '|';
  color:#000;
}







@keyframes colorchange {
    0%   {opacity: 1.0;}
    50% {opacity: 0.4;}
    100% {opacity: 1.0;}
        }

@keyframes colorchange_flash {
    0%   {opacity: 0.0;}
    30%   {opacity: 0.0;}
    32% {opacity: 1.0;}
    68% {opacity: 1.0;}
    70%   {opacity: 0.0;}
    100% {opacity: 0.0;}
        }


@keyframes colorchange_flash_dual {
    0%   {opacity: 0.0;}
    35%   {opacity: 0.0;}
    37% {opacity: 1.0;}
    48% {opacity: 1.0;}
    53%   {opacity: 0.0;}
    58% {opacity: 1.0;}
    69% {opacity: 1.0;}
    71%   {opacity: 0.0;}
    100% {opacity: 0.0;}
        }





@keyframes colorchange2 {
    0% {background: rgba(255, 66, 0, 1);}
    7%{opacity: 0.8;}
    14%{background: rgba(255, 255, 0, 1);}
    21%{opacity: 0.8;}
    28% {background: rgba(0, 255, 0, 1);}
    35%{opacity: 0.8;}
    42% {background: rgba(0, 127, 255, 1);}
    49%{opacity: 0.8;}
    56% {background: rgba(0, 0, 255, 1);}
    63%{opacity: 0.8;}
    70% {background: rgba(139, 0, 255, 1);}
    77%{opacity: 0.8;}
    85% {background: rgba(255, 0, 0, 1);}
    92%{opacity: 0.8;}
    100% {background: rgba(255, 165, 0, 1);}
}






@media screen and (min-width: 1331px) {
   

.cp_content{
					height:680px;
					overflow:hidden;
				}


.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 600px;
  position: relative;
  top:-700px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 600px;
  position: relative;
  top:-700px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:20px;

}


.typewrite{
  color:#ff3300;
  font-size: 40px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 40px;
  padding-left:2%;
  
}





	

    
}


@media screen and (min-width: 1200px) and (max-width: 1330px) {
   

.cp_content{
					height:600px;
					overflow:hidden;
				}


.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 500px;
  position: relative;
  top:-600px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 500px;
  position: relative;
  top:-600px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:20px;

}

.typewrite{
  color:#ff3300;
  font-size: 40px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 40px;
  padding-left:2%;
  
}






	

    
}



@media screen and (min-width: 1031px) and (max-width: 1199px) {


	.cp_content{
					height:550px;
					overflow:hidden;
				}


	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 450px;
  position: relative;
  top:-550px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 450px;
  position: relative;
  top:-550px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:20px;

}

.typewrite{
  color:#ff3300;
  font-size: 40px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 40px;
  padding-left:2%;
  
}



h2 {
        color:#ff3300;
        font-size: 25px;
        letter-spacing:2px; 
        font-weight:bold;
        /*text-shadow:#F00 0px 0px 6px;*/
      }
p {
        color: #ddd;
        font-size: 18px;
        line-height:26px;
        letter-spacing: 1px;
      }



   

    
}


@media screen and (min-width: 994px) and (max-width: 1030px) {


	.cp_content{
					height:500px;
					overflow:hidden;
				}


	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 400px;
  position: relative;
  top:-460px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 400px;
  position: relative;
  top:-460px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:18px;

}


.typewrite{
  color:#ff3300;
  font-size: 30px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 30px;
  padding-left:2%;
  
}



h2 {

        color:#ff3300;
        font-size: 25px;
        letter-spacing:2px; 
        font-weight:bold;
        /*text-shadow:#F00 0px 0px 6px;*/
      }
p {
        color: #ddd;
        font-size: 18px;
        line-height:26px;
        letter-spacing: 1px;

        
      }



   

    
}


@media screen and (min-width: 881px) and (max-width: 993px) {


	.cp_content{
					height:450px;
					overflow:hidden;
				}


	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 400px;
  position: relative;
  top:-450px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 400px;
  position: relative;
  top:-450px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:16px;

}

.typewrite{
  color:#ff3300;
  font-size: 30px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 30px;
  padding-left:2%;
  
}




h2 {
        color:#ff3300;
        font-size: 25px;
        letter-spacing:2px; 
        font-weight:bold;
        /*text-shadow:#F00 0px 0px 6px;*/
      }
p {
        color: #ddd;
        font-size: 18px;
        line-height:26px;
        letter-spacing: 1px;      
      }

   


    
}


@media screen and (min-width: 768px) and (max-width: 880px) {


	.cp_content{
					height:400px;
					overflow:hidden;
				}


	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 350px;
  position: relative;
  top:-400px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 350px;
  position: relative;
  top:-400px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:16px;

}

.typewrite{
  color:#ff3300;
  font-size: 20px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 20px;
  padding-left:2%;
  
}





h2 {

        color:#ff3300;
        font-size: 20px;
        letter-spacing:2px; 
        font-weight:bold;
        /*text-shadow:#F00 0px 0px 6px;*/
      }


p {
        color: #ddd;
        font-size: 16px;
        line-height:24px;
        letter-spacing: 1px;

        
      }

   


    
}



@media screen and (min-width: 670px) and (max-width: 768px) {


	.cp_content{
					height:350px;
					overflow:hidden;
				}

	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 300px;
  position: relative;
  top:-350px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 300px;
  position: relative;
  top:-350px;
  float: left;
  margin: 5%;
  padding: 0;
  
}



.tab_btn_title{

  font-size:15px;

}



.typewrite{
  color:#ff3300;
  font-size: 20px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 20px;
  padding-left:2%;
  
}







	h2 {
				color:#ff3300;
				font-size: 18px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}

   

   p {
				color: #ddd;
				font-size: 16px;
				line-height:24px;
				letter-spacing: 1px;

				
			}



    
}



@media screen and (min-width: 581px) and (max-width: 669px) {


	.cp_content{
					height:310px;
					overflow:hidden;
				}

	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 250px;
  position: relative;
  top:-285px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 250px;
  position: relative;
  top:-285px;
  float: left;
  margin: 5%;
  padding: 0;
  
}

.tab_btn_title{

  font-size:15px;

}


.typewrite{
  color:#ff3300;
  font-size: 15px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 15px;
  padding-left:2%;
  
}





	h2 {
				color:#ff3300;
				font-size: 18px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}


   

   p {
				color: #ddd;
				font-size: 16px;
				line-height:24px;
				letter-spacing: 1px;

				
			}



    
}


@media screen and (min-width: 520px) and (max-width: 580px) {


	.cp_content{
					height:270px;
					overflow:hidden;
				}

	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 200px;
  position: relative;
  top:-240px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 200px;
  position: relative;
  top:-240px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:15px;

}


.typewrite{
  color:#ff3300;
  font-size: 15px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 15px;
  padding-left:2%;
  
}





	h2 {
				color:#ff3300;
				font-size: 18px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}



   

   p {
				color: #ddd;
				font-size: 16px;
				line-height:24px;
				letter-spacing: 1px;

				
			}



    
}


@media screen and (min-width: 469px) and (max-width: 519px) {


	.cp_content{
					height:230px;
					overflow:hidden;
				}


	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 180px;
  position: relative;
  top:-215px;
  float: left;
  margin: 5%;
  padding: 0;
}


.colorwell{
   width: 90%;
  height: 180px;
  position: relative;
  top:-215px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:15px;

}


.typewrite{
  color:#ff3300;
  font-size: 15px;
  padding-left:2%;
}



#output {
   color:#ff3300;
  font-size: 15px;
  padding-left:2%;
  
}






	h2 {
				color:#ff3300;
				font-size: 18px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}


   

   p {
				color: #ddd;
				font-size: 14px;
				line-height:24px;
				letter-spacing: 1px;

				
			}



    
}


@media screen and (min-width: 420px) and (max-width: 468px) {


	.cp_content{
					height:220px;
					overflow:hidden;
				}


	.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 90%;
  height: 170px;
  position: relative;
  top:-200px;
  float: left;
  margin: 5%;
  padding: 0;
}



.colorwell{
   width: 90%;
  height: 170px;
  position: relative;
  top:-200px;
  float: left;
  margin: 5%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:15px;

}


.typewrite{
  color:#ff3300;
  font-size: 15px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 15px;
  padding-left:2%;
  
}






	h2 {
				color:#ff3300;
				font-size: 14px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}



   

   p {
				color: #ddd;
				font-size: 14px;
				line-height:24px;
				letter-spacing: 1px;

				
			}



    
}




@media screen and (min-width: 381px) and (max-width: 419px) {


	.cp_content{
					height:190px;
					overflow:hidden;
				}

		.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 80%;
  height: 130px;
  position: relative;
  top:-190px;
  float: left;
  margin: 8%;
  padding: 0;
}


.colorwell{
   width: 80%;
  height: 130px;
  position: relative;
  top:-190px;
  float: left;
  margin: 8%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:15px;

}

.typewrite{
  color:#ff3300;
  font-size: 15px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 15px;
  padding-left:2%;
  
}





	h2 {
				color:#ff3300;
				font-size: 12px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}






	p {
				color: #ddd;
				font-size: 14px;
				line-height:24px;
				letter-spacing: 1px;

				
			}

    
}



@media screen and (min-width: 341px) and (max-width: 380px) {


	.cp_content{
					height:170px;
					overflow:hidden;
				}

		.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 80%;
  height: 120px;
  position: relative;
  top:-150px;
  float: left;
  margin: 8%;
  padding: 0;
}


.colorwell{
   width: 80%;
  height: 120px;
  position: relative;
  top:-150px;
  float: left;
  margin: 8%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:15px;

}



.typewrite{
  color:#ff3300;
  font-size: 10px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 10px;
  padding-left:2%;
  
}







	h2 {
				color:#ff3300;
				font-size: 12px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}






	p {
				color: #ddd;
				font-size: 12px;
				line-height:24px;
				letter-spacing: 1px;

				
			}

    
}




@media screen and (max-width: 340px) {


	.cp_content{
					height:140px;
					overflow:hidden;
				}

		.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 80%;
  height: 120px;
  position: relative;
  top:-140px;
  float: left;
  margin: 8%;
  padding: 0;
}


.colorwell{
   width: 80%;
  height: 120px;
  position: relative;
  top:-140px;
  float: left;
  margin: 8%;
  padding: 0;
  
}


.tab_btn_title{

  font-size:15px;

}



.typewrite{
  color:#ff3300;
  font-size: 10px;
  padding-left:2%;
}


#output {
   color:#ff3300;
  font-size: 10px;
  padding-left:2%;
  
}







	h2 {
				color:#ff3300;
				font-size: 12px;
				letter-spacing:2px;	
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}






	p {
				color: #ddd;
				font-size: 12px;
				line-height:24px;
				letter-spacing: 1px;

				
			}

    
}