@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
            @import url(https://fonts.googleapis.com/css?family=Aldrich);
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
@import url(https://fonts.googleapis.com/css?family=Arsenal);
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
    @charset "utf-8";
            
            

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

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

			h2 {
				font-family:"Oswald","Ubuntu Condensed","Aldrich","微軟正黑體","Microsoft JhengHei","微軟雅黑體","Microsoft YaHei","SimHei","新細明體","Arial","Verdana","Helvetica","sans-serif";
				color:#ff6400;
				font-size: 48px;
				letter-spacing:2px;	
				font-weight:bold;
				
			}

			
			p {
				color: #ddd;
				font-size: 20px;
				line-height:32px;
				letter-spacing: 1px;
			}


      .aorus_font{
        font-family:"Oswald","Ubuntu Condensed","Aldrich","微軟正黑體","Microsoft JhengHei","微軟雅黑體","Microsoft YaHei","SimHei","新細明體","Arial","Verdana","Helvetica","sans-serif";
      }


      .aorus_font_01{
        font-family:"Arsenal","Alegreya Sans","Titillium Web","sans-serif","微軟正黑體","Microsoft JhengHei";
      }


        .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:400px;
					overflow:hidden;
				}



	     .colorwell{
   width: 100%;
  position: relative;
  float: left;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
padding-bottom: 400%; 
height: 0;
  top: -70vmax;
}



.fuck{
  background: rgba(255, 55, 0, 1);
  animation: colorchange2 15s linear infinite;
   width: 100%;
  position: relative;

  float: left;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
padding-bottom: 400%; 
height: 0;
top: -70vmax;
}


.rainbow_es{
  
   width: 100%;
  position: relative;

  float: left;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
padding-bottom: 400%; 
height: 0;
top: -70vmax;
}

.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:#ff6400;
  font-size: 50px;
  padding-left:2%;
}


#output {
   color:#ff6400;
  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, 66, 0, 1);}
}




.side_area div .btn_cooling_01 span{
  font-family:"Oswald","Ubuntu Condensed","Aldrich","微軟正黑體","Microsoft JhengHei","微軟雅黑體","Microsoft YaHei","SimHei","新細明體","Arial","Verdana","Helvetica","sans-serif";
  letter-spacing: 5px;
  line-height: 15px;
  color: #fff;
  background: rgba(255,100,0,1);
  padding: 1% 1% 1% 2%;
  cursor: pointer;
}

.side_area:hover div .btn_cooling_01 span{
  font-family:"Oswald","Ubuntu Condensed","Aldrich","微軟正黑體","Microsoft JhengHei","微軟雅黑體","Microsoft YaHei","SimHei","新細明體","Arial","Verdana","Helvetica","sans-serif";
  letter-spacing: 5px;
  line-height: 15px;
  color: #777;
  font-weight: bold;
  background: rgba(255,180,0,1);
  padding: 1% 1% 1% 2%;
  cursor: pointer;
}


.cooling_font{
  font-family:"Oswald","Ubuntu Condensed","Aldrich","微軟正黑體","Microsoft JhengHei","微軟雅黑體","Microsoft YaHei","SimHei","新細明體","Arial","Verdana","Helvetica","sans-serif";
  letter-spacing: 3px;
}


.cooling_content_font{
font-family: 'Titillium Web', sans-serif, '微軟正黑體', Microsoft JhengHei;

}
   

.feature_button_eason {
  
  width: 30px;
  height: 30px;
  background: #ff6400;

  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}

.feature_button_eason_01{
  position: absolute;
  top: 30%;
  left: 25%;
}

.feature_button_eason_02{
  position: absolute;
  top: 50%;
  left: 60%;
}



.feature_button_eason_03{
  position: absolute;
  top: 80%;
  left: 90%;
}


.feature_button_eason:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 50%;
  background: white;
}

.feature_button_eason:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  width: 2px;
  background: white;
}

.feature_button_eason.clicked {
  transform: translate(-50%, -50%) rotate(360deg);
  background: #ffbb00;
}

.feature_button_eason.clicked:before {
  width: 0;
}


.color_style_hover{
  border-bottom:none;

}

.color_style_hover:hover{
  border-bottom: 2px;
  border-color: #ff6400;
  border-style: solid;

}