/*RealClear Digital 2021*/

@font-face{
    font-family: 'ROG';
    src: url("../fonts/RogFont/RogFont.otf");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Trade';
    src: url('../fonts/Trade/TG20.ttf') format("truetype");
    font-weight: normal;
}
@font-face {
    font-family: 'Trade bold';
    src: url('../fonts/Trade/TGBold.ttf') format("truetype");
    font-weight: normal;
}
@font-face{font-family:Roboto;src:url(../fonts/Roboto.woff2) format("woff2"),url(../fonts/Roboto.woff) format("woff"),url(../fonts/Roboto.ttf) format("truetype")}

.rcd-rog-font{
    font-family: "ROG", sans-serif;
}
.trade{
    font-family: "Trade", sans-serif;
}
.trade-bold{
    font-family: "Trade bold", sans-serif;
}

/*------------overwrite-------------------*/
/*af-api.css*/
#af-header {
	min-width: 100% !important;
}
.page-content {
    margin: 0 auto !important;
}
/*-------------------------------*/
.rcd-kv{
}
.rcd-kv img{
	width: 100%;
	display: block;
}
.rcd-audio{
}
.rcd-audio img{
	width: 100%;
	display: block;
}



/*--design換小圖--*/
@media only screen and (max-width:1280px){
 .overviewContent .v-container .design-section .main-bg.pink{
    background-image:url(../img/design-pink_xs.jpg)
}
 .overviewContent .v-container .design-section .main-bg.pink .main-nb{
    background-image:url(../img/design-pink-nb_xs.png)
}
 .overviewContent .v-container .design-section .main-bg.gray{
    background-image:url(../img/design-gray_xs.jpg)
}
 .overviewContent .v-container .design-section .main-bg.gray .main-nb{
    background-image:url(../img/design-gray-nb_xs.png)
}
 .overviewContent .v-container .design-section .main-bg.black{
    background-image:url(../img/design-black_xs.jpg)
}
 .overviewContent .v-container .design-section .main-bg.black .main-nb{
    background-image:url(../img/design-black-nb_xs.png)
}
}



/*--cooling風流動畫--*/
.cooling-by-frame{
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}
.cooling-by-frame img{
    display: block;
    width: 100%;
}
.cooling-by-frame .base{
    position: relative;
    z-index: 0;
}
.cooling-by-frame .animation div{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.cooling-by-frame .animation {
 transition: opacity 1000ms ease-in-out;
 opacity: 1;
}

.cooling-by-frame .animation.js-start-hide {
    transition: opacity 1000ms ease-in-out;
    opacity: 0;
}

.cooling-by-frame .animation .f01{
    z-index: 1;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 0s;
}
.cooling-by-frame .animation .f02{
    z-index: 2;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 0.2s;
}
.cooling-by-frame .animation .f03{
    z-index: 3;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 0.4s;
}
.cooling-by-frame .animation .f04{
    z-index: 4;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 0.5s;
}
.cooling-by-frame .animation .f05{
    z-index: 5;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 0.7s;
}
.cooling-by-frame .animation .f06{
    z-index: 6;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 0.9s;
}
.cooling-by-frame .animation .f07{
    z-index: 7;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 1.1s;
}
.cooling-by-frame .animation .f08{
    z-index: 8;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 1.3s;
}
.cooling-by-frame .animation .f09{
    z-index: 9;
	opacity: 0;
	animation: windAll 5s linear infinite;
	animation-delay: 1.5s;
}
.cooling-by-frame .animation .f10{ /*red*/
    z-index: 10;
	opacity: 0;
	animation: windLast 5s linear infinite;
	animation-delay: 2.9s;
}
.cooling-by-frame .animation .f11{
    z-index: 10;
	opacity: 0;
	animation: windLast 5s linear infinite;
	animation-delay: 3.0s;
}
.cooling-by-frame .animation .f12{
    z-index: 10;
	opacity: 0;
	animation: windLast 5s linear infinite;
	animation-delay: 3.1s;
}
.cooling-by-frame .animation .f13{
    z-index: 10;
	opacity: 0;
	animation: windLast 5s linear infinite;
	animation-delay: 3.2s;
}

@keyframes windAll {
	0%{opacity: 0;}
	5%{opacity: 1;}
	30%{opacity: 1;}
	35%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes windLast {
	0%{opacity: 0;}
	5%{opacity: 1;}
	20%{opacity: 1;}
	25%{opacity: 0;}
	100%{opacity: 0;}
}

/*
@media screen and (max-width: 768px) {    
.cooling-by-frame{
    max-width: auto;
    width: 170%;
    margin-left: -35%;
    margin-top: -5%;
}
}
@media screen and (max-width: 500px) {    
.cooling-by-frame{
    width: 190%;
    margin-left: -45%;
}
}
*/

/*kv*/
.overviewContent .rcd-kv-title{
    font-size: 100px;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
    padding-top: 100px;
}
.overviewContent .v-container .product-section .screen-container{
    padding-bottom: 150px;
}
@media only screen and (max-width:1440px){
.overviewContent .rcd-kv-title{
    font-size: 60px;
}
}
@media only screen and (max-width:731px){
.overviewContent .rcd-kv-title{
    font-size: 40px;
}
}
@media only screen and (max-width:500px){
.overviewContent .rcd-kv-title{
    font-size: 28px;
}
}






/*video mobile*/
@media only screen and (max-width:1023px) and (min-width:732px){
.video-section .video-head {
	padding: 0 20px;
}
.video-section .video-container{
    width: 90%; /*RCD edit*/
}
 .video-section .video-container .video-thumb{
    height: auto;/*RCD edit*/
}
 .video-section .video-container .border-bottom{
    left: 30%; /*RCD edit*/
}
}


/*test origin lazyload*/
.main-section .main-bg{
    transition: opacity 1s;
}
/*mylazyload*/
.mylazy{
    opacity: 0;
    opacity: 1;/*mylazyload not working on mars*/
    transition: opacity 1s;
}
.mylazy.loaded{
    opacity: 1;
}


.design-thumb-bg{
    height: 100%;
    width: 100%;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
}

/*mylazyload not working on mars*/
.people-bg{
    background-image:url(../img/influencer-people.png);
}
.main-bg-rcd{
    background-image:url(../img/cover-bg-1920.jpg);
}
.performance-bg{
    background-image:url(../img/performance-bg.jpg);
}
.keyboard-nb{
    background-image:url(../img/keyboard-15.png);
}
.armoury-bg{
    background-image:url(../img/armoury.png);
}



.new-hz{
    position: absolute;
    right: 0;
    bottom: 150px;
    width: 45%;
    z-index: 5;
}
.new-hz img{
    display: block;
    width: 100%;
}
. new-hz img{
    display: block;
    width: 100%;
}
.hz-300{
    display: block;
}
.hz-165{
    display: none;
}
@media only screen and (max-width:731px){
.new-hz{
    bottom: 30px;
    width: 35%;
    right: 10%;
}
}
@media only screen and (max-width:600px){
.new-hz{
    width: 50%;
    right: 0;
}
}