@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 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 30px;
				letter-spacing:2px;	
				width: 90%;
				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 {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 20px;
				line-height:28px;
				width: 90%;
				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:450px;
					overflow:hidden;
				}



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



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


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


.shite1{
  animation: colorchange 2.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;
}


.color_down_content{
  position: relative;
  top: 0px;
}





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

@keyframes colorchange2 {
    0% {background: rgba(255, 165, 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:460px;
					overflow:hidden;
				}


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


.colorwell{
   width: 90%;
  height: 375px;
  position: relative;
  top:-450px;
  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%;
  
}



.color_down_content{
  position: relative;
  top: 0px;
}


	

    
}


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

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


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


.colorwell{
   width: 90%;
  height: 340px;
  position: relative;
  top:-400px;
  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%;
  
}




.color_down_content{
  position: relative;
  top: 0px;
}


	

    
}



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


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


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


.colorwell{
   width: 90%;
  height: 275px;
  position: relative;
  top:-340px;
  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%;
  
}



.color_down_content{
  position: relative;
  top: 0px;
}

   

    
}


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


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


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


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


.tab_btn_title{

  font-size:20px;

}


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


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



.color_down_content{
  position: relative;
  top: 0px;
}

   

    
}


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


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


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


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


.tab_btn_title{

  font-size:20px;

}

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


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



.color_down_content{
  position: relative;
  top: 0px;
}

   


    
}


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


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


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


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


.tab_btn_title{

  font-size:20px;

}

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


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



.color_down_content{
  position: relative;
  top: 0px;
}

   


    
}



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


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

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


.colorwell{
   width: 90%;
  height: 175px;
  position: relative;
  top:-215px;
  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%;
  
}



.color_down_content{
  position: relative;
  top: -150px;
}




	h2 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 20px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}

   

   p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 16px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}



    
}



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


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

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


.colorwell{
   width: 90%;
  height: 155px;
  position: relative;
  top:-185px;
  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%;
  
}



.color_down_content{
  position: relative;
  top: -150px;
}


	h2 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 20px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}


   

   p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 16px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}



    
}


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


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

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


.colorwell{
   width: 90%;
  height: 130px;
  position: relative;
  top:-160px;
  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%;
  
}



.color_down_content{
  position: relative;
  top: -150px;
}


	h2 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 20px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}



   

   p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 16px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}



    
}


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


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


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


.colorwell{
   width: 90%;
  height: 120px;
  position: relative;
  top:-145px;
  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%;
  
}



.color_down_content{
  position: relative;
  top: -150px;
}



	h2 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 20px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}


   

   p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 14px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}



    
}


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


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


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



.colorwell{
   width: 90%;
  height: 100px;
  position: relative;
  top:-120px;
  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%;
  
}



.color_down_content{
  position: relative;
  top: -180px;
}



	h2 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 20px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}



   

   p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 14px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}



    
}




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


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

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


.colorwell{
   width: 80%;
  height: 90px;
  position: relative;
  top:-120px;
  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%;
  
}


.color_down_content{
  position: relative;
  top: -180px;
}



	h2 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 20px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}






	p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 14px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}

    
}



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


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

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


.colorwell{
   width: 80%;
  height: 72px;
  position: relative;
  top:-105px;
  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%;
  
}



.color_down_content{
  position: relative;
  top: -180px;
}




	h2 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 20px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}






	p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 12px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}

    
}




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


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

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


.colorwell{
   width: 80%;
  height: 65px;
  position: relative;
  top:-95px;
  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%;
  
}




.color_down_content{
  position: relative;
  top: -180px;
}



	h2 {
				padding-left: 6%;
				padding-top: 5%;
				color:#ff3300;
				font-size: 20px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}






	p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 10px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}

    
}