@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=Roboto+Slab);
@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";
                    
                    
                    @font-face {
                        font-family:"AORUS";
                        src: url('../fonts/AORUS.woff') format("woff");
                    }
                    
                    
                    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;
                        
                    }
                    /* 			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;
                    }
                    
                    .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";
                    }
                    
                    .offical_aorus_font {
                        font-family:"Oswald","Ubuntu Condensed","AORUS","Oswald","Roboto Slab","Aldrich","微軟正黑體","Microsoft JhengHei","微軟雅黑體","Microsoft YaHei","SimHei","新細明體","Arial","Verdana","Helvetica","sans-serif";
                    }
                    
                    .ytcontainer {
                        padding: 5% 5% 5% 5%;
                    }
                    
                    #ytplayer {
                        max-width: 1500px;
                        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: 15000%;
                        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: 15000%;
                        height: 0;
                        top: -70vmax;
                    }
                    
                    .rainbow_es {
                        
                        width: 100%;
                        position: relative;
                        float: left;
                        padding-top: 0;
                        padding-left: 0;
                        padding-right: 0;
                        padding-bottom: 15000%;
                        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;
                    }
                    
                    #rainbow_es {
                        background-image: -webkit-linear-gradient(left, red, deeppink, mediumslateblue, deepskyblue, chartreuse, gold, orange, red);
                        background-image: -o-linear-gradient(left, red, deeppink, mediumslateblue, deepskyblue, chartreuse, gold, orange, red);
                        background-image: linear-gradient(to right, red, deeppink, mediumslateblue, deepskyblue, chartreuse, gold, orange, red);
                        -moz-animation: dayrainbow 6.5s forwards linear infinite;
                        -webkit-animation: dayrainbow 6.5s forwards linear infinite;
                        -o-animation: dayrainbow 6.5s forwards linear infinite;
                        -khtml-animation: dayrainbow 6.5s forwards linear infinite;
                        -ms-animation: dayrainbow 6.5s forwards linear infinite;
                        -lynx-animation: dayrainbow 6.5s forwards linear infinite;
                        animation: dayrainbow 6.5s forwards linear infinite;
                        background-size: 150% auto;
                    }
                    /*         #rainbow_es_2{
        background-image:-webkit-linear-gradient(left, red, violet, rgb(255, 4, 209), rgb(76, 98, 253),rgb(0, 221, 255), green, yellow, orange, red);
        background-image:-o-linear-gradient(left, red, violet, rgb(255, 4, 209), rgb(76, 98, 253),rgb(0, 221, 255), green, yellow, orange, red);
        background-image:linear-gradient(to right, red, violet, rgb(255, 4, 209), rgb(76, 98, 253),rgb(0, 221, 255), green, yellow, orange, red);
        -moz-animation:dayrainbow2 6s forwards linear infinite;
        -webkit-animation:dayrainbow2 6s forwards linear infinite;
        -o-animation:dayrainbow2 6s forwards linear infinite;
        -khtml-animation:dayrainbow2 6s forwards linear infinite;
        -ms-animation:dayrainbow2 6s forwards linear infinite;
        -lynx-animation:dayrainbow2 6s forwards linear infinite;
        animation:dayrainbow2 6s forwards linear infinite;
        background-size:150% auto;} */
                    
                    @-moz-keyframes dayrainbow {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @-webkit-keyframes dayrainbow {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @-o-keyframes dayrainbow {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @-ms-keyframes dayrainbow {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @-khtml-keyframes dayrainbow {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @keyframes dayrainbow {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    /* @-moz-keyframes dayrainbow2{
  from{background-position:300%;}to{background-position:-300%;}}
@-webkit-keyframes dayrainbow2{
  from{background-position:300%;}to{background-position:-300%;}}
@-o-keyframes dayrainbow2{
  from{background-position:300%;}to{background-position:-300%;}}
@-ms-keyframes dayrainbow2{
  from{background-position:300%;}to{background-position:-300%;}}
@-khtml-keyframes dayrainbow2{
  from{background-position:300%;}to{background-position:-300%;}}
@keyframes dayrainbow2{
  from{background-position:300%;}to{background-position:-300%;}} */
                    
                    #rainbow_es_2 {
                        background-image: -webkit-linear-gradient(left, red, deeppink, mediumslateblue, deepskyblue, chartreuse, gold, orange, red);
                        background-image: -o-linear-gradient(left, red, deeppink, mediumslateblue, deepskyblue, chartreuse, gold, orange, red);
                        background-image: linear-gradient(to right, red, deeppink, mediumslateblue, deepskyblue, chartreuse, gold, orange, red);
                        -moz-animation: dayrainbow_2 4.5s forwards linear infinite;
                        -webkit-animation: dayrainbow_2 4.5s forwards linear infinite;
                        -o-animation: dayrainbow_2 4.5s forwards linear infinite;
                        -khtml-animation: dayrainbow_2 4.5s forwards linear infinite;
                        -ms-animation: dayrainbow_2 4.5s forwards linear infinite;
                        -lynx-animation: dayrainbow_2 4.5s forwards linear infinite;
                        animation: dayrainbow_2 4.5s forwards linear infinite;
                        background-size: 150% auto;
                    }
                    
                    @-moz-keyframes dayrainbow_2 {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @-webkit-keyframes dayrainbow_2 {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @-o-keyframes dayrainbow_2 {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @-ms-keyframes dayrainbow_2 {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @-khtml-keyframes dayrainbow_2 {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @keyframes dayrainbow_2 {
                        from {
                            background-position: 300%;
                        }
                        to {
                            background-position: -300%;
                        }
                    }
                    
                    @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:"Arsenal","Alegreya Sans","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;
                    }