@charset 'utf-8';
@import url('https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto-condensed.css');
@font-face {
    font-family: 'Trade';
    src: url("../fonts/TradeGothicLTPro-Bold.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
	font-family: 'Xolonium_regular';
	src: url('../fonts/xolonium-regular.otf'),
		 url('../fonts/xolonium-regular.otf') format('embedded-opentype'),
		 url("../fonts/xolonium-regular.ttf") format("opentype"),
		 url("../fonts/xolonium-regular.eot");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Xolonium_bold';
	src: url('../fonts/xolonium-bold.otf'),
		 url('../fonts/xolonium-bold.otf') format('embedded-opentype'),
		 url("../fonts/xolonium-bold.ttf") format("opentype"),
		 url("../fonts/xolonium-bold.eot");
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'ROGFontsv';
    src: url('../fonts/rogfontsv1.5-regular.otf');
    src: url('../fonts/rogfontsv1.5-regular.otf') format('embedded-opentype');
    src: url("../fonts/rog fonts v1.6.1.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
*/
/* --------------------------Reset------------------------ */
	body{
		margin: 0;
	}
	#hd * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        word-wrap: break-word;
        word-break: break-word;
    }
    ::selection {
        background: #1d2124;
        color: #CE0000;
    }
    ::-moz-selection {
        background: #1d2124;
        color: #ffffff;
    }
    #hd{
        font-family: "Roboto Condensed", "Arial", sans-serif;
        background: black;
        color: #FFF;
        font-size: 16px;
        margin: 0;
        padding: 0;
        background-attachment: fixed;
        background-color: #000;
    }
    #hd ul,
        #hd li,
        #hd figure{margin: 0; padding: 0; }
        #hd h1,
        #hd h2,
        #hd h3,
        #hd h4,
        #hd p,
        #hd a,
        #hd li {
			font:inherit;

    }
    #hd img{
        display: block;
        height: auto;
        border:none;
        max-width: 100% !important;
        margin:0 auto;
    }
/* ---------- BLOCK ---------- */
    #hd .w90 {
        width: 90%;
        margin: 0 auto;
        position: relative;
    }
    #hd .w80 {
        width: 80%;
        margin: 0 auto;
        position: relative;
    }
    #hd .w900, #hd .w1200,#hd .w1400{
        width: 90%;
        margin: 0 auto;
        position: relative;
	}
	#hd .w1920 {max-width: 1920px; }
    #hd .w1400 {max-width: 1400px; }
    #hd .w1200 {max-width: 1200px; }
    #hd .w900 {max-width: 900px; }
    #hd .col25,
    #hd .col33,
    #hd .col30,
    #hd .col40,
    #hd .col45,
    #hd .col50,
    #hd .col55,
    #hd .col60,
    #hd .col70,
    #hd .col80  {
        display: inline-block;
        margin-left: -5px;
        vertical-align: middle;
	}
	#hd .col20,#hd .f20 {width: 20%; }
	#hd .col24,#hd .f24 {width: 24%; }
    #hd .col25,#hd .f25 {width: 25%; }
    #hd .col33,#hd .f33 {width: 33.33%; }
    #hd .col30,#hd .f30 {width: 30%; }
    #hd .col40,#hd .f40 {width: 40%; }
    #hd .col45,#hd .f45 {width: 45%; }
    #hd .col50,#hd .f50 {width: 50%; }
    #hd .col55,#hd .f55 {width: 55%; }
    #hd .col60,#hd .f60 {width: 60%; }
    #hd .col70,#hd .f70 {width: 70%; }
    #hd .col80,#hd .f80 {width: 80%; }

	#hd .ib-top{vertical-align: top;}
    #hd .ib-bottom{vertical-align: bottom;}

    #hd .fleft {float: left; }
    #hd .fright {float: right; }
    #hd .cf:after{
        content:'';
        display: block;
        clear:both;
	}
	#hd .d-flex{
		display: flex;
	}
    #hd .flex-wrap{
        display: flex;
        flex-wrap: wrap;
    }
    #hd .hidden{
        display: none;
	}
	#hd #sec_choose li:hover,
	#hd #sec_choose li.hd-active{
		opacity: 1;
	}

	#hd #sec_choose .choose_figure > div.hd-active{
		opacity: 1;
		animation-name: active_fadnIn;
		animation-duration: .9s;
		animation-timing-function:ease-out;
	}
	#hd #sec_choose > div.hd-active{
		opacity: 1;
		animation-name: active_fadnIn;
		animation-duration: .9s;
		animation-timing-function:ease-out;
	}
	@keyframes active_fadnIn{
        0% {
            opacity: 0;
        }
        10% {
            opacity: 0;
        }
        100%{
            opacity: 100;
        }
    }

	#hd .align-items-center{
		align-items: center;
	}
	#hd .align-items-end{
		align-items:flex-end;
	}
	#hd .justify-content-center{
		justify-content:center;
	}
	#hd .justify-content-between{
		justify-content:space-between;
	}

    #hd .hd_480on,
    #hd .hd_620on,
    #hd .hd_1024on{
        display: none;
	}

    #hd .container{
        margin:0 auto;
	}
	#hd .mr25{
		margin-right: 1.5625em;
	}
	#hd .mt50{
		margin-top: 3em;
	}
	#hd .mt70{
		margin-top: 4.375em;
	}
	#hd .mt80{
		margin-top: 5em;
	}
	#hd .mt100{
		margin-top: 6.25em;
	}
	#hd .mt120{
		margin-top: 7.5em;
	}
	#hd .mb25{
		margin-bottom:  1.5625em;
	}
	#hd .mb80{
		margin-bottom:  5em;
	}
/* --------------------------TXT-------------------------- */
  #hd h1,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6{
		font-family: 'Trade', sans-serif;
		font-weight: 100;
		letter-spacing: .08em;
	}
	#hd .txt-title{
		font-family: 'Trade', sans-serif;
	}
	#hd h1{
		font-size: 5em;
		padding-bottom: 25px;
		text-shadow: 3px 3px 5px rgba(0, 0, 0, .4);
		line-height: .8em;
	}
	#hd h2{
		font-family: "Trade", sans-serif;
		position: relative;
		font-size: 7em;
		display: block;
		text-transform:uppercase;
		line-height: 1.3em;
		color: #fff;
		letter-spacing: .01em;
		/* margin-top: 40px;
		margin: 0; */
	}
	#hd h2 span.lowercase{
		text-transform:lowercase;

	}
	#hd h3{
		font-size: 3em;
		letter-spacing: 0;
		display: inline-block;
		color: #fff;
		line-height: 1.2em;
		text-shadow: black .1em .1em 0.3em;
	}
	#hd h4{
		font-size: 2.3em;
		margin-bottom: 0;
		margin-bottom: 4%
	}
	#hd h5{
		font-size: 1.5em;
		margin-bottom: 0;
		line-height: 1.1em;
		color:#E70505;
		letter-spacing: 0;
	}
	#hd h6{
		font-size: 1.1m;
	}
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		font-weight: 400;
	}

	#hd th{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		font-weight: 300;
		padding: 1.8em 2em;
		font-size: 1em;

	}
	#hd thead th a{
		font-family: 'Trade', sans-serif;
		font-weight: 300;
		color:#ffffff;
	}
	#hd b.controlsTXT{
		font-weight: 400;
	}
	#hd p,
	#hd li{
		font-size: 1.2em;
		letter-spacing: .05em;
		font-weight: 300;
		line-height: 1.5em;
		margin: 0;
		margin-bottom: 20px;
	}
	#hd li{
		margin-bottom: 0;
	}
	#hd small {
		font-size: .9em;
		color: #999;
		line-height: .9em;
		font-weight: 300;

	}
	#hd .txt-bold{
		font-weight: 500;
	}
	#hd .txt-gradient-w{
		color: #fff !important;
	    background: #f81a1a;
	    background: -webkit-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: -o-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: -moz-linear-gradient(left, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    background: linear-gradient(to right, #fff 0%, #fff 25%, #ccc 30%, #fff 35%, #fff 60%,  #777 100%);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
	}
	#hd .txt-gradient-r{
		color: #f81a1a !important;
	    background: #f81a1a;
	    background: -webkit-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: -o-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: -moz-linear-gradient(left, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    background: linear-gradient(to right, #bd0300 0%, #ff0400 30%,  #ff0400 70%, #bd0300 100%);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	    text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
	}
	/*ie11 above fixed*/
	_:-ms-fullscreen,
	:root #hd .txt-gradient{
	    background: transparent !important;
	}
	#hd .txt-center {
		text-align: center;
	}
	#hd .txt-left {
		text-align: left;
	}
	#hd .txt-right {
		text-align: right;
    }

    /*----------- COLOR -----------*/
	#hd .color-primary{
		color: #c00d3b;
	}
	#hd .color-red{
		color: #aa0a04;
	}
	#hd .color-blue{
		color: #3e87d1;
	}
	#hd .color-grey {
		color: #000;
	}
	#hd .color-white {
		color: #fff;
	}
	#hd .txt-grey {
		color: #adadad;
		font-weight: 400;
	}
	#hd .txt-white {
		color: #ffffff;
	}
	#hd .txt-link {
		color: #01b1e3;
		text-decoration: underline;
		font-weight: 400;
	}
	#hd .gradient45d{
		background: linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
		background: -moz-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
		background: -webkit-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
		background: -o-linear-gradient(135deg, #a90400 20%, #d21a1a 50%, #a90400 80%);
	}

	#hd .btn {
		position: relative;
		font-family: 'Trade', sans-serif;
		border: 1px solid #ef0000;/*20210709*/
		padding: 8px 15px 5px 15px;
		font-size: .9em;
		letter-spacing: .06em;
		line-height: 1;
		background-size: 100% 100%;
		cursor: pointer;
		display: inline-block;
		color: #ef0000;/*20210709*/
		transition: .5s;
	}
	#hd .btn:hover{
		transform: scale(1.05);
	}
    /* ---------- fp-nav --------- */
	#fp-nav ul li {
		text-align: center;
	}
	#fp-nav ul li a span,
	#fp-nav ul li:hover a span {
		width: 6px;
		height: 6px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color: rgba(255,255,255,.6);
	}
	#fp-nav ul li.active a span,
	#fp-nav ul li.active:hover a span {
		top: 0;
		left: 0;
		right: 0;
		height: 13px;
		width: 13px;
		margin: auto;
		background-color: #c00d3b;
	}
	#fp-nav ul li:hover a span {
		background-color: #c00d3b;
	}
	#fp-nav ul li .fp-tooltip {
		color: #c00d3b;
		top: -8px;
	}
	#fp-nav ul li.active .fp-tooltip {
		top: -8px;
	}

/* ---------- scrollUp ------- */
	#hd #scrollUp {
		float: left;
		position: fixed;
		right: 25px;
		bottom: 40px;
		z-index: 17;
		width: 45px;
		height: 45px;
		border-radius: 26px;
		cursor: pointer;
		z-index: 999;
		opacity: 0;
		border: 2px solid #c00d3b;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hd #scrollUp.hd-show {
		opacity: 1;
	}
	#scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #c00d3b;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}
	#scrollUp:hover svg {
	    fill: white;
	}
	#hd #scrollUp:hover,
	#hd #scrollUp:active {
		background-color: #c00d3b;
	}


	#hd section{
		margin-top: 5%;
	}
	#hd .mobile-on{
		display: none;
	}
	/* -----------#sec_kv------------- */
	#hd .kvBox{
		position: relative;
	}
	#hd .kvBox .toplogo,
	#hd .kvBox .bottomlogo{
		position: absolute;
	}
	#hd .kvBox .toplogo{
		top: 0%;
		left: 0;
		width: 12%;
	}
	#hd .kvBox .bottomlogo{
		bottom: 0;
		left: 0;
		width: 15%;
	}
	#hd .kvBox h2{
		z-index: 10;
	}
	#hd .kvBox h3{
		position: relative;
		font-size: 3em;
		z-index: 10;
	}
	#hd .kvBox .txt_title{
		position: absolute;
		top: -2%;
    	left: 27%;
	}
	#hd .kvBox img{
		width: 100%;
	}


	#hd .kv-txt,#hd .choose-txt {
		padding: 0 3%; /*20210712*/
		margin: 3% auto;
	}

	#hd .kvBox .owl-dots {
		position: absolute;
		width: 100%;
		bottom: 0;
	}

	/* -----------#sec_key------------- */
	#hd ul{
		list-style: none;
	}
	#hd #sec_key ul li{
		padding: 1%;
		line-height: 1em !important;
	}
	#hd #sec_key ul .key_title{
		/*height: 10%;*/
		margin-bottom: 3%;
	}
	#hd #sec_key p{
		line-height: 1.4em;
		padding: 0 2%;
		font-size: 1em;
	}
	#hd #sec_key small{
		font-size: .7em;
		padding: 0 2%;
		line-height: 1.3em;
		display: block;
	}
	#hd #sec_key p a{ /* 20210730 */
		color: #01b1e3;
	}


	/* -----------------#sec_choose------------ */
	#hd #sec_choose ul .choose_bg {
		position: relative;
		opacity: .5;
		opacity: .7; /*20210713 for ADA*/
		padding-top: 4%;
	}
	#hd #sec_choose ul .choose_bg:nth-child(1):hover,
	#hd #sec_choose ul .choose_bg:nth-child(1).hd-active{
		background-color: rgb(20, 20, 20);
		cursor: pointer;
		border-bottom: 3px solid #8c0001;
		opacity: 1;
	}
	#hd #sec_choose ul .choose_bg:nth-child(2):hover,
	#hd #sec_choose ul .choose_bg:nth-child(2).hd-active{
		background-color: rgb(20, 20, 20);
		cursor: pointer;
		border-bottom: 3px solid #43107c;
		opacity: 1;
	}
	#hd #sec_choose ul .choose_bg:nth-child(3):hover,
	#hd #sec_choose ul .choose_bg:nth-child(3).hd-active{
		background-color: rgb(20, 20, 20);
		cursor: pointer;
		border-bottom: 3px solid #f3b21b;
		opacity: 1;
	}
	#hd #sec_choose ul .choose_bg:nth-child(4):hover,
	#hd #sec_choose ul .choose_bg:nth-child(4).hd-active{
		background-color: rgb(20, 20, 20);
		cursor: pointer;
		border-bottom: 3px solid #02c5e4;
		opacity: 1;
	}
	/*20210709*/
	#hd #sec_choose ul .choose_bg:nth-child(5):hover,
	#hd #sec_choose ul .choose_bg:nth-child(5).hd-active{
		background-color: rgb(20, 20, 20);
		cursor: pointer;
		border-bottom: 3px solid #adadad;
		opacity: 1;
	}
	#hd #sec_choose ul .choose_bg:nth-child(6):hover,
	#hd #sec_choose ul .choose_bg:nth-child(6).hd-active{
		background-color: rgb(20, 20, 20);
		cursor: pointer;
		border-bottom: 3px solid #6f6e6f;
		opacity: 1;
	}
	#hd #sec_choose .choose_bg img{
		position: relative;
	}
	#hd #sec_choose .choose_bg h5{
		color: #FFF;
		margin-top: -12%;
		position: relative;
	}
	#hd #sec_choose .choose_bg p{
		position: relative;
		font-size: 1em;
	}
	#hd #sec_choose ul a{
		cursor:auto;
	}
	/*20210804*/
	#hd #sec_choose ul .choose_bg .tag{
		position: absolute;
		left: 5px;
		top: -10px;
		background: red;
		color: #fff;
		padding: 0px 7px;
		border-radius: 5px;
		display: inline-block;
		font-size: 0.8em;
	}
	@keyframes show{
		0%{
			opacity:0;
		}
		100%{
			opacity:1;
		}
	}
	@-webkit-keyframes show{
		0%{
			opacity:0;
		}
		100%{
			opacity:1;
		}
	}
	#hd #sec_choose .tab-more{
		text-align: left;
		cursor: pointer;
	}
	#hd #sec_choose .tab-more li {
		display: inline-block;
		position: relative;
		text-align: center;
		width: 65%;
		margin: .5%;
		min-height: 3.4rem;
		padding: 5px;
		vertical-align: top;
		border-left: #ffffff 2px solid;
		border-right: #ffffff 2px solid;
		-webkit-transform: skewX(-25deg);
		   -moz-transform: skewX(-25deg);
		    -ms-transform: skewX(-25deg);
		     -o-transform: skewX(-25deg);
				transform: skewX(-25deg);
		cursor: pointer;
	}
	#hd #sec_choose .tab-more li a{
		cursor: pointer;
	}
	#hd #sec_choose .tab-more li span{
		font-family: 'Trade', sans-serif;
		font-size: .8em;
		font-weight: 300;
		line-height: 1.2rem;
		min-height: calc(4rem - 23px);
		color: #ffffff;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
         		align-items: center;
		-webkit-justify-content: center;
				justify-content: center;
		position: relative;
		-webkit-transform: skewX(25deg);
		   -moz-transform: skewX(25deg);
		    -ms-transform: skewX(25deg);
		     -o-transform: skewX(25deg);
		        transform: skewX(25deg);
	}
	#hd #sec_choose .tab-more li::before,
	#hd #sec_choose .tab-more li::after{
		content: '';
		width: 100%;
		height: 2px;
		background: -webkit-linear-gradient(right,#ffffff 0%,#ffffff 50%, #ffffff 100%);
		background:	   -moz-linear-gradient(right,#ffffff 0%,#ffffff 50%, #ffffff 100%);
		background: 	 -o-linear-gradient(right,#ffffff 0%,#ffffff 50%, #ffffff 100%);
		background:			linear-gradient(to left,#ffffff 0%,#ffffff 50%, #ffffff 100%);
		position: absolute;
		left: 0;
	}
	#hd #sec_choose .tab-more li::before{
		top: 0;
	}
	#hd #sec_choose .tab-more li::after{
		bottom: 0;
	}


	/* ---------choose_figure------------ */
	#hd .choose_figure > div{
		transition: all 0.5s;
	}
	#hd .choose_figure figure{
		background-repeat: no-repeat;
		background-position: right ;
	}
	#hd .choose_figure figure p{
		font-weight: 400;
	}
	#hd .choose_figure .f_pic{
		position: relative;
	}
	#hd .choose_figure .po_re{
		position: relative;
	}
	#hd .choose_figure .po_ab{
		position: absolute;
	}
	#hd .choose_figure figure div:nth-child(1){
		text-align: left;
		padding: 5% 13%;
	}
	#hd .choose_figure img.move{
		left: -37%;
    	top: 0;
	}
	/*20210709 反向*/
	#hd .choose_figure .rev img.move{
		left: 30%;
	}
	#hd .choose_figure .rev img.bg{
		left: 0%;
	}
	#hd .choose_figure img.bg{
    	margin: 0;
	}
	/* ------------figure 1------------ */
	#hd .choose_figure > div:nth-child(1) figure{
		background-image: url(../img/banner/banner-c-1.jpg) ;
	}

	#hd .choose_figure .txt_1{
		background: linear-gradient(to right , #8c0001, #810000);

	}
	/* ------------figure 2------------ */
	#hd .choose_figure > div:nth-child(2) figure{
		background-image: url(../img/banner/banner-strix-1_new.jpg) ;

	}
	#hd .choose_figure .txt_2{
		background: linear-gradient(to right , #af0656, #43107c);

	}
	/* ------------figure 3------------ */
	#hd .choose_figure > div:nth-child(3) figure{
		background-image: url(../img/banner/banner-tuf-1.jpg) ;

	}
	#hd .choose_figure .txt_3{
		background: linear-gradient(to right , #f4c138, #f3b21b);

	}
	/* ---------------figure 4------------ */
	#hd .choose_figure > div:nth-child(4) figure{
		background-image: url(../img/banner/banner-prime-1.jpg) ;

	}
	#hd .choose_figure > div:nth-child(4) figure .f_pic{
		margin-left: -2%; ;

	}
	#hd .choose_figure .txt_4{
		background: linear-gradient(to right , #03ece7, #02c5e4 35%);

	}
	/* ---------------figure 5------------ */
	#hd .choose_figure > div:nth-child(5) figure{
		background-image: url(../img/banner/banner-pro-1.jpg) ;

	}
	#hd .choose_figure .txt_5{
		background: linear-gradient(to right , #8c8c8c, #747474);
	}
	#hd .choose_figure .txt_5 h4{
		color: #cdab82;
	}
	/* ---------------figure 6------------ */
	#hd .choose_figure > div:nth-child(6) figure{
		background-image: url(../img/banner/banner-pro-1.jpg) ;

	}
	#hd .choose_figure .txt_6{
		background: linear-gradient(to right , #6f6e6f, #222222);
	}



	/* ---------- #sec_table ---------- */
	#hd #sec_table {
		padding: 0 0 100px 0;
		position: relative;
	}
	#hd #sec_table .learn{
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		padding-top: 55%;
		font-size: 16px;
		color: white;
		opacity: 0;
		transition: all .3s ease;
	}
	#hd #sec_table a:hover .learn{
		opacity: 1
	}
	#hd #sec_table h1{
		text-align: center;
		margin-bottom: 100px;
		text-shadow: 0 0 15px #0000bf;
	}
	#hd #sec_table table{
		width: 200%;
		border:0;
		border-collapse: collapse;
	}
	#hd #sec_table td,
	#hd #sec_table th{
		border:1px solid #888889 ;
		background-color: transparent;
		padding:6px 8px;
		text-align: center;
		font-weight: 300;
		line-height: 1.1;
	}
	#hd #sec_table .hd_pic th{
		border:0;
		background-color: transparent!important;
		padding-right: 0;
	}
	#hd #sec_table thead th{
		padding:20px 5px;

	}
	#hd #sec_table .mobile-off thead th{
		width: auto;
	}
	#hd #sec_table .mobile-off thead th:first-child{
		width: 10%;
	}
	#hd #sec_table th{
		background-color: #16334e;
		font-weight: 400;
	}
	#hd #sec_table .mCustomScrollbar{
		height: 1200px;
		overflow-x:scroll;
		overflow-y:scroll;
	}
	#hd #sec_table .table_small{
		margin: 0 auto;
		padding: 0 2%;
	}


	/* -------------table-scroll--------------- */
	#hd #sco_style::-webkit-scrollbar-track
	{
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		border-radius: 10px;
		background-color: #555;
	}

	#hd #sco_style::-webkit-scrollbar
	{
		width: 12px;
		background-color: #555;
	}

	#hd #sco_style::-webkit-scrollbar-thumb
	{
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color:  #F5F5F5;
	}


	/* ---------table 第一列 固定---------- */

	#hd .mobile-off table{
		table-layout: fixed;
		position: relative;
	}

	#hd .th_fixed {
		position:sticky;
 		left:9.9% !important; /* 首行永遠固定於左 */
 		z-index:1;
		border:1px solid #888889 !important;
		background-color: #1f4468 !important;
	}
	#hd .th_fixed::after {
		content: "";
		position: absolute;
		width: 1%;
		height: 106%;
		background-color: #888889;
		left: -1%;
		top: 0;
		z-index: -1;
	}
	#hd .mobile-off table thead tr:nth-child(1) th:nth-child(1),
	#hd .mobile-off table thead tr:nth-child(2) th:nth-child(1),
	#hd .mobile-off table thead tr:nth-child(3) th:nth-child(1),
	#hd .mobile-off table thead tr:nth-child(4) th:nth-child(1),
	#hd .mobile-off table tbody tr th:nth-child(1){
		position:sticky;
 		left:-1px; /* 首行永遠固定於左 */
 		z-index:1;
		border:1px solid #888889 !important;
		background-color: #1f4468 !important;
	}

	#hd .mobile-off table thead tr:nth-child(1) th:nth-child(1){
		border:none !important;
	}
	#hd .mobile-off table thead tr:nth-child(1) th:nth-child(1)::before{
		content:"";
		position: absolute;
		background-color: #000;
		width: 97%;
		height: 95%;
		top: 0;
		left: 0;
	}


	/* ---------hd_footer---------- */
	#hd #hd_footer{
		padding:0 0 30px 0;
	}
	#hd #hd_footer .w1200{
		max-width: 1380px;
		text-align: center;
	}
	#hd #hd_footer .hd_logo{
		width: 200px;
		display: inline-block;
		vertical-align: middle;
	}
	#hd #hd_footer h3{
		font-family: "Roboto Condensed", "Arial", sans-serif;
		font-size: 1.7em;
		line-height: 1.25;
		text-transform: none;
		white-space: nowrap;
		display: inline-block;
		vertical-align: middle;
		width:calc(100% - 230px);
		margin-right: -5px;
		padding-left: 20px;
	}


/*20201105*/
/*20210709 color*/
	#hd #sec_table .download{
		color: #fff;
		display: inline-block;
		padding: 10px 30px;
		border: 1px solid #fff;
		margin: 20px 0;
	}



/*20210709 RCD*/
	#hd .choose_figure .intro{
		max-width: 1000px;
		margin: 30px auto;
		padding: 0 30px;
		box-sizing: border-box;
	}
	#hd .choose_figure .rev{
		flex-direction: row-reverse;
	}


/*20210709 from Intel-Rocket-Lake-Z590-H570-B560-series*/
#hd .hd-w1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }
#hd .sec-component .hd-w1000 { width: 90%; }
#hd .sec-component h3 { text-align: center; display: block; margin-bottom: 0.5em; }
#hd .sec-component .hd-filter { margin: 0 -.5em 1em; }
#hd .sec-component .hd-filter li { padding: 0 .5em 1em; position: relative; cursor: pointer; }
#hd .sec-component .hd-filter li figure { width: 80%; margin: 0 auto; opacity: .5; margin-bottom: -.75em; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; position: relative; overflow: hidden; }
#hd .sec-component .hd-filter li img { width: 200%; max-width: none !important; }
#hd .sec-component .hd-filter li:hover figure { opacity: .75; -moz-transform: translate(0, -5px); -o-transform: translate(0, -5px); -ms-transform: translate(0, -5px); -webkit-transform: translate(0, -5px); transform: translate(0, -5px); }
#hd .sec-component .hd-filter li.hd-active { background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent); background-image: -webkit-linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent); background-image: linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent); position: relative; overflow: hidden; pointer-events: none; }
#hd .sec-component .hd-filter li.hd-active figure { opacity: 1; }
#hd .sec-component .hd-filter li.hd-active figure img { margin-left: -100%; }
#hd .sec-component .hd-filter li.hd-active p { font-weight: bold; color: #ef0000; }
#hd .sec-component .hd-filter p { line-height: 1.25; font-size: 1em; text-align: center;}
#hd .sec-component .hd-table > li { display: none; }
#hd .sec-component .hd-table > li.hd-active { display: block; }
#hd .sec-component .hd-table table { width: 100%; border: none; border-collapse: collapse; }
#hd .sec-component .hd-table table.table-motherboards td:nth-last-child(2) { text-transform: uppercase; }
#hd .sec-component .hd-table table tr:hover th:nth-child(-n+3), #hd .sec-component .hd-table table tr:hover td:nth-child(-n+3) { background: #2b2b2b; }
#hd .sec-component .hd-table table th, #hd .sec-component .hd-table table td { font-weight: 300; line-height: 1.5; padding: .5em 1em; border-bottom: 1px solid #aaaaaa; }
#hd .sec-component .hd-table table th:last-child, #hd .sec-component .hd-table table td:last-child { text-align: center; }
#hd .sec-component .hd-table table th { font-weight: bold; }
#hd .sec-component .hd-table table thead th:nth-child(1) { width: 10em; }
#hd .sec-component .hd-table table thead th:nth-child(3) { width: 11em; }
#hd .sec-component .hd-table table tbody th { vertical-align: top; }
#hd .sec-component .hd-table table tbody td { vertical-align: middle; }
#hd .sec-component .hd-table .hd-btn { line-height: 1.25; padding: .25em 1em; margin: 0; }
#hd .sec-component .hd-table img { margin: 0 auto; }
#hd .sec-component .btn-container { margin: 2em auto; }
#hd .sec-component .btn-container .hd-btn { font-size: 1.25em; /*padding-right: 3em;*/ }
#hd .sec-component .btn-container .hd-btn:before { background-image: url(../img/icon/arrow.png); background-position: calc(100% - 15px) center; background-repeat: no-repeat; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease;}
#hd .sec-component .btn-container .hd-btn:hover:before { background-position: calc(100% - 13px) center; }

@media screen and (max-width: 768px) { #hd .sec-component .hd-filter { margin: 0 -.5em .5em; }
  #hd .sec-component { padding-bottom: 50px; } /*20210804*/
  #hd .sec-component .hd-filter li { padding: 0 .25em; }
  #hd .sec-component .hd-filter li figure { margin-bottom: -.25em; }
  #hd .sec-component .hd-table table { font-size: 14px; } }
@media screen and (max-width: 480px) { #hd .sec-component .hd-filter li { padding-top: .5em; padding-bottom: 1em; margin-bottom: 1px; }
  #hd .sec-component .hd-filter li figure { width: 90%; margin-bottom: 0; }
  #hd .sec-component .hd-filter li p { font-size: 12px; }
  #hd .sec-component .hd-table table thead th { font-size: 14px; }
  #hd .sec-component .hd-table table thead th:nth-child(1) { width: 5em; }
  #hd .sec-component .hd-table table thead th:nth-child(3) { width: 8em; }
  #hd .sec-component .hd-table table th, #hd .sec-component .hd-table table td { font-size: 14px; padding: .5em; } }

#hd .flex-wrap { display: flex; flex-wrap: wrap; }
#hd .flex-nowrap { display: flex; flex-wrap: nowrap; }

#hd .hd-btn { display: inline-block; font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-weight: bold; font-size: 1rem; border-radius: 3px; background: #bb0000; padding: .5em 1.5em; margin: 1em auto; color: white; position: relative; z-index: 2; cursor: pointer; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
#hd .hd-btn:hover { -moz-transform: translate(0, -2px); -o-transform: translate(0, -2px); -ms-transform: translate(0, -2px); -webkit-transform: translate(0, -2px); transform: translate(0, -2px); }
#hd .hd-btn:active { -moz-transform: translate(0, -1px); -o-transform: translate(0, -1px); -ms-transform: translate(0, -1px); -webkit-transform: translate(0, -1px); transform: translate(0, -1px); }



/*20210730 from Intel-Rocket-Lake-Z590-H570-B560-series*/
#hd .tab-filter { display: inline-flex; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; margin: 0 auto 2em; border-bottom: 1px solid #4d4e4f; }
#hd .tab-filter li { font-size: 1.125em; font-weight: bold; padding: 1em 1.25em; line-height: 1; color: #4d4e4f; position: relative; cursor: pointer; }
#hd .tab-filter li:first-child { margin-left: auto; }
#hd .tab-filter li:last-child { margin-right: auto; }
#hd .tab-filter li:hover { color: #aaaaaa; }
#hd .tab-filter li.hd-active { color: white; }
#hd .tab-filter li.hd-active:after { content: ''; display: block; width: 100%; height: 2px; background: white; position: absolute; bottom: 0; left: 0; }
#hd .tab-filter-block { display: inline-flex; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; margin: -1em auto 2em; }
#hd .tab-filter-block li { min-width: 6em; font-size: 1.125em; font-weight: bold; letter-spacing: .04em; line-height: 1; text-align: center; padding: .45em .5em; margin: 0 1em; color: #4d4e4f; border: 1px solid #4d4e4f; cursor: pointer; }
#hd .tab-filter-block li:first-child { margin-left: auto; }
#hd .tab-filter-block li:last-child { margin-right: auto; }
#hd .tab-filter-block li:hover { color: white; border-color: white; }
#hd .tab-filter-block li.hd-active { color: white; background: #02aee5; border-color: #02aee5; }
#hd .content-el { display: none; }
#hd .content-el.hd-active { display: block; }
#hd .hd-filter-list { margin: 0 auto; padding-left: 5%; position: relative; z-index: 2; }
#hd .hd-filter-list li { display: flex; flex-wrap: wrap; align-items: center; cursor: pointer; padding: 1em 0; font-size: 15px; }
#hd .hd-filter-list li:hover p { color: #aaaaaa; }
#hd .hd-filter-list li.hd-active b, #hd .hd-filter-list li.hd-active p { color: white; }
#hd .hd-filter-list li.hd-active .hd-icon { background-position: 100% 0; }
#hd .hd-filter-list .hd-icon { width: 70px; height: 70px; margin: 0 1.5em 0 0; background-repeat: no-repeat; background-size: 200%; background-position: 0 0; }
#hd .hd-filter-list .hd-content { width: calc(100% - 120px); }
#hd .hd-filter-list b, #hd .hd-filter-list p { line-height: 1.25; color: #4d4e4f; }
#hd .hd-filter-list b { display: block; margin-bottom: .5em; }
#hd .hd-filter-list p { font-weight: normal; }
#hd .hd-filter-icon { margin: 0 auto 2em; }
#hd .hd-filter-icon li { cursor: pointer; }
#hd .hd-filter-icon li:hover p { color: #aaaaaa; }
#hd .hd-filter-icon li.hd-active p { color: white; }
#hd .hd-filter-icon p { line-height: 1.25; margin: 1em 0; color: #4d4e4f; }

@media screen and (max-width: 1440px) { #hd .tab-filter li { font-size: 1em; padding: 1em 1em; }
  #hd .hd-filter-list li { padding: .5em 0; }
  #hd .hd-filter-list .hd-icon { width: 50px; height: 50px; } }
@media screen and (max-width: 1024px) { #hd .tab-filter li { padding: .75em; } }
@media screen and (max-width: 1023px) { #hd .tab-filter { overflow-x: auto; overflow-y: visible; }
  #hd .tab-filter li { flex-shrink: 0; }
  #hd .tab-filter-block li { margin: 0 .25em; }
  #hd .hd-filter-list { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; padding-bottom: 6em; padding-left: 0; }
  #hd .hd-filter-list .hd-content { display: none; text-align: center; }
  #hd .hd-filter-list li { width: 25%; max-width: 100px; }
  #hd .hd-filter-list li.hd-active .hd-content { width: 100%; display: block; position: absolute; top: 60%; left: 0; right: 0; margin: 0 auto; }
  #hd .hd-filter-list .hd-icon { width: 70px; height: 70px; margin: 0 auto; } }
@media screen and (max-width: 480px) { #hd .hd-filter-list { padding-bottom: 7em; }
  #hd .hd-filter-list li.hd-active .hd-content { top: 75px; }
  #hd .hd-filter-list .hd-icon { width: 50px; height: 50px; } }