@charset 'utf-8';
@media screen and (max-width: 1920px) {
    #hd #kv {
        background-position: left top;
    }
    #hd #kv .imgfront,
    #hd #kv .imgback {
        left: 16%;
    }
    #hd #kv .bg {
        background-position: top left;
    }
    #hd #kv .imglogo {
        top: 34.5%;
        left: calc(16% + 64px);
        width: 82px;
    }
    #hd #kv .text {
        left: calc(50% + 350px);
    }
}

@media screen and (max-width: 1600px) {    
    #hd .hd-sec-supremefx .img-position {
        top: -15%;
	}
	#hd .innovation.hd-sec-outlook .right ol li:nth-child(2) {
		margin: 35% 0;
	}

}
@media screen and (max-width: 1440px) {
    #hd h2 {
        font-size: 2.5rem;
    }
    #hd #intel h2 {
        font-size: 4rem;
    }
    /* ---------- #kv ----------------- */
    #hd #kv {
        height: 600px;
    }
    #hd #kv .text {
        left: calc(50% + 250px);
    }
    #hd #kv .imgfront,
    #hd #kv .imgback {
        left: 14%;
    }
    #hd #kv .imglogo {
        top: 34.4%;
        left: calc(14% + 46px);
        width: 66px;
    }
    /* ---------- sec_kv --------- */
    #hd .sec_kv p {
        font-size: 1.1rem;
    }
    #hd .sec_kv h3 {
        font-size: 1.125rem;
    }
    #hd #kv h4.pos-1 {
        left: 12%;
    }
    #build .sec_kv h2 {
        max-width: 750px
    }
    #hd #kv .pos-p {
        /*top: 60%;*/
    }
    #hd #kv .hd-kv-lighting {
        /*top: 15%;*/
    }
    /* ----------- power -------------- */
    #hd .hd-sec-power .fleft {
        width: 60%;
        margin-left: -10%;
        padding-right: 2%;
    }
    /* ----------- ddr 4 -------------- */
    #hd .hd-sec-ddr4 .m2-right {
        margin-left: -30%;
        margin-right: -12%;
        position: relative;
    }
    /* ----------- cooler ------------- */
    #hd #cooler-figure {
        left: -5%;
    }
    #hd #cooler-content h5 {
        font-size: 1.125rem;
        min-height: 44px;
    }
    /* ------------ lighting ---------- */
    #hd .hd-sec-lighting h2 {
        margin-bottom: 50px;
    }
    #hd .hd-sec-lighting h3 {
        margin: 30px 0 15px;
    }
    #hd .hd-sec-languard {
        padding: 0;
    }
    #hd .hd-sec-fan {
        padding-bottom: 50px;
    }
    #hd .hd-sec-fan h3+p {
        margin-bottom: 30px;
    }
    #hd .hd-sec-aura {
        padding-bottom: 160px;
    }
    #hd .hd-sec-aura .hd-w1000 {
        width: 65%;
        left: 23%;
    }
    /* ------------ radar ------------- */
    #hd .hd-sec-radar {
        padding-bottom: 40px;
        margin-bottom: 150px;
    }
    #hd .hd-sec-radar p.hd-col80 {
        margin-bottom: 40px;
    }
    #hd .hd-sec-radar li.audio-tag:nth-child(2):after {
        left: -97%;
        top: 20%;
    }
    /* ------------ gf_network -------- */
    #hd #gf_slider .slide-2 .icon_list li {
        background-size: 46px;
    }
    #hd #gf_monitor {
        left: 10%;
    }
    #hd #gf_app_list {
        left: 43%;
    }
    #hd #gf_slider .slide-3 .content {
        width: 30%;
        left: 61%;
    }
    #hd #gf_slider .slide-3 .content span {
        padding-bottom: 2.5%;
    }
    #hd .hd-sec-supremefx p.p-width {
        width: 50%;
    }
    #hd .hd-sec-overwolf .hd-button {
        margin: 0 0 20px;
    }
    #hd .hd-sec-overwolf ul li {
        margin: 5px 14px;
    }
    #hd .hd-sec-grid .hd-col70 {
        width: 60%;
        margin-left: 0;
    }
    #hd .hd-sec-ethernet ol li:nth-child(1):hover h3:before {
        width: 33%;
    }
    #hd .hd-sec-ethernet ol li:nth-child(1):hover h3:after {
        height: calc(875%);
        width: 40%;
        top: 50%;
        left: 138%;
    }
    #hd .hd-sec-ethernet ol li:nth-child(2):hover h3:before {
        width: 110.5%;
    }
    #hd .hd-sec-ethernet ol li:nth-child(2)h3:after {
        transform: rotate(0deg);
        top: -60%;
        left: 210%;
        border-left: 1px solid #00635c;
    }
    #hd .hd-sec-ethernet ol li:nth-child(2):hover h3:after {
        width: 30%;
        height: 48px;
    }
    #hd .hd-sec-ethernet ol li:nth-child(3):hover h3:before {
        width: 41%;
    }
    #hd .hd-sec-ethernet ol li:nth-child(3):hover h3:after {
        border-top: 1px solid #00635c;
        border-left: 1px solid #00635c;
        height: 213px;
        width: 12.5%;
        top: -445%;
        left: 145.5%;
        transform: rotate(0deg);
    }
    #hd .hd-sec-ethernet ol li:nth-child(3):hover h3:after {
        height: 203px;
        width: 12.5%;
    }
    /**/
    #hd .hd-sec-supremefx .img-position {
		top: -15%;
	}
	/**/
	
	#hd .innovation.hd-sec-outlook .right ol li:nth-child(2) {
		margin: 15% 0;
	}
}

@media screen and (max-width: 1400px) {
    #hd .hd-sec-ethernet ol li:nth-child(3):hover h3:after {
        width: 8%;
        height: 223px;
        top: -465%;
    }
    #hd .hd-sec-ethernet ol li:nth-child(1):hover h3:after {
        width: 35%;
    }
    /*------------hd-sec-oled-----------*/
    #hd .hd-sec-oled .skew-btn h4 {
        padding: 10px;
    }
}

@media screen and (max-width: 1375px) {
    #hd .hd-sec-ethernet ol li:nth-child(1):hover h3:after {
        width: 32%;
        top: 43%;
    }
    #hd .hd-sec-ethernet ol li:nth-child(3):hover h3:after {
        width: 5%;
    }
    #hd .hd-sec-ethernet ol li:nth-child(2):hover h3:after {
        width: 26%;
    }
}

@media screen and (max-width: 1366px) {
    #hd #kv .pos-p {
        /*top: 50%;*/
    }
    #hd #kv .hd-kv-lighting {
        /*top: 7.5%;*/
    }
    #hd .hd-sec-ethernet ol li:before {
        display: block;
        left: -30px;
        top: 2.5px;
    }
    #hd .display_on_1366 {
        display: block;
    }
    #hd .hd-sec-ethernet ol li h3:before,
    #hd .hd-sec-ethernet ol li h3:after,
    #hd .display_off_1366 {
        display: none;
    }
    #hd .hd-sec-ethernet h3 {
        margin-top: 0;
    }
    #hd .hd-sec-ethernet .left img {
        margin-bottom: 25px;
    }
    /* ---------- heatsink -------------- */
    #hd .hd-sec-cooler .heatsink .left,
    #hd .hd-sec-cooler .heatsink .right {
        width: 50%;
    }
    #hd #sonic_studio li {
        padding-bottom: 36%;
    }
    /* ------------ radar ------------ */
    #hd .hd-sec-radar {
        padding-bottom: 40px;
        margin-bottom: 100px;
    }
    #hd .hd-sec-radar p.hd-col80 {
        margin-bottom: 40px;
    }
    #hd .hd-sec-radar li.audio-tag:nth-child(2):after {
        left: -97%;
        top: 20%;
    }
    #hd #intel {
        padding: 70px 0;
    }
    /* -----------ethernet---------------- */
    #hd .hd-sec-ethernet:before {
        background-position: right 10%;
        background-repeat: no-repeat;
        background-size: 50%;
    }
    #hd .innovation.hd-sec-outlook ol li:nth-child(1) {
        top: 10.5%;
    }
    #hd .innovation.hd-sec-outlook ol li:nth-child(2) {
        top: 30%;
    }
    #hd .innovation.hd-sec-outlook ol li:nth-child(3) {
        top: 44%;
    }
    #hd .innovation.hd-sec-outlook ol li:nth-child(4) {
        top: 60%;
    }
    #hd .innovation.hd-sec-outlook ol li:nth-child(5) {
        top: 74%;
    }
    #hd .hd-sec-guardian .hd-txt {
        margin-left: 20%;
    }
    #hd .hd-sec-guardian li:first-child .hd-txt {
        margin-left: 10%;
    }
    #hd .hd-sec-guardian li:nth-child(4) .hd-txt {
        margin-left: 0%;
    }
    #hd .hd-sec-guardian li:first-child {
        width: 30%;
        margin-right: 0.85%;
    }
    #hd .hd-sec-guardian li:first-child figure {
        padding-bottom: 198%;
    }
    #hd .hd-sec-guardian li figure {
        padding-bottom: 95%;
        margin-left: 25%;
    }
    #hd .hd-sec-guardian li:nth-child(2) {
        margin-left: 6%;
    }
    #hd .hd-sec-guardian li:nth-child(4) figure {
        padding-bottom: 200%;
        margin-left: -4.5%;
    }
    #hd .hd-sec-guardian li:nth-child(5) {
        margin-left: 1.5%;
	}

	#hd .gen2 {
		margin-top: 100px;
    }
    
    #hd .hd-sec-supremefx .img-position {
        top: -10%;
    }
}

@media screen and (max-width: 1280px) {
    #hd #kv .text {
        left: calc(50% + 280px);
    }
    #hd .twentytwenty-handle {
        margin-left: 35px;
    }
    #hd .hd-sec-guardian li:nth-child(4) figure {
        padding-bottom: 201%;
    }
    #hd h3 {
        font-size: 2rem;
    }
    #hd .hd-frame {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }
    #hd .hd-frame li {
        width: 120%;
        margin-left: -10%;
        margin-bottom: -50px;
    }
    /* ---------- sec_kv --------- */
    #hd .sec_kv p {
        font-size: 1rem;
    }
    #hd .sec_kv h3 {
        font-size: 1rem;
    }
    /* ---------- #specs -------------- */
    #hd #specs .hd-w1300 {
        width: 100%;
    }
    /* ---------cooler---------- */
    #hd #cooler-filter li h3 {
        font-size: 1rem;
        padding: 8px 5px;
    }
    #hd #cooler-content {
        min-height: 350px;
    }
    /* ------------ SEC_LIGHTING ------------ */
    #hd .hd-sec-lighting h2 {
        margin-bottom: 30px;
    }
    #hd .hd-controls li img {
        width: 50px;
        height: 50px;
    }
    /*RCD*/
    /*
    #colorpicker {
        right: -120px;
        top: 123%; 
    }
    */
    /*#hd .hd-sec-ecosystem .hd-w1200{padding-right: 220px;}*/
    #hd .hd-sec-guardian {
        padding: 60px 0;
    }
    /* ------------ mode -------------------- */
    #hd .hd-sec-mode li .hd-title {
        padding: 0 18%;
        margin-bottom: 70px;
    }
    #hd .hd-sec-mode li .hd-title:before,
    #hd .hd-sec-mode li .hd-title:after {
        width: 40%;
    }
    #hd #mode_switch_right {
        left: 100%;
    }
    #hd #mode_switch_left {
        right: 100%;
    }
    #hd .hd-sec-mode li h3:before,
    #hd .hd-sec-mode li h3:after {
        width: 40%;
    }
    #hd .hd-sec-cooler .right {
        padding: 0;
    }
    /* ------------ sonic ------------ */
    #hd .hd-sec-sonic figure li {
        width: 35%;
    }
    #hd .hd-sec-sonic figure li:nth-child(3) {
        width: 45%;
        right: -37%;
    }
    #hd .hd-sec-sonic figure li:nth-child(1),
    #hd .hd-sec-sonic figure li:nth-child(2) {
        left: -38%;
    }
    #hd .hd-sec-sonic figure li h4,
    #hd .hd-sec-sonic figure li p {
        padding-left: 40px;
    }
    #hd #sonic_studio p {
        font-size: 14px;
        line-height: 1.25;
    }
    #hd .hd-sec-ddr4 .fleft {
        width: 55%;
    }
    #hd .hd-sec-ddr4 .fright {
        margin-top: 8%;
    }
    #hd .hd-sec-ddr4 .ddr4-left {
        margin-left: -8%;
    }
    #hd .hd-sec-ddr4 .ddr4-right {
        top: 0px;
        left: 0px;
    }
    /* ------------ radar ------------ */
    #hd .ghost-bg {
        right: -12%;
    }
    #hd .hd-sec-supremefx .audio-button .hd-col20 {
        padding: 5px;
    }
    #hd .hd-sec-supremefx .audio-button .hd-col20 div {
        padding: 15px;
    }
    /* -----------ethernet---------------- */
    #hd .hd-sec-ethernet:before {
        background-position: right 10%;
        background-repeat: no-repeat;
        background-size: 48%;
    }
    /* ------------ optimization ------ */
    #hd .hd-sec-optimization .hd-content li h3 {
        font-size: 2rem;
    }
    #hd .hd-sec-optimization li h3:before,
    #hd .hd-sec-optimization li h3:after {
        width: 40%;
    }
    #hd .hd-sec-fan .hd-filter li {
        margin-bottom: 10px;
    }
    /* ------------ bios ------ */
    #hd .hd-sec-bios .hd-content li h3 {
        font-size: 2rem;
    }
    #hd .hd-sec-bios li h3:before,
    #hd .hd-sec-bios li h3:after {
        width: 40%;
    }
    /* ------------ bios ------ */
    #hd .hd-sec-bios .hd-content li h3 {
        font-size: 2rem;
    }
    #hd .hd-sec-bios li h3:before,
    #hd .hd-sec-bios li h3:after {
        width: 40%;
    }
    #hd .hd-sec-fan .hd-filter li {
        margin-bottom: 10px;
    }
    #hd #cooler-figure img {
        left: 20%;
        /*top: 90px; */
        /* width: 70%; */
    }

    #hd .hd-sec-supremefx .img-position {
        top: -5%;
    }
}

@media screen and (max-width: 1250px) {
    #hd #specs ol li p,
    #hd #specs ol li b {
        font-size: 12.5px;
    }
    #performance .sec_kv .hd-w1300 {
        top: 40%;
    }
    #build .sec_kv .hd-w1300 {
        top: 39%;
    }
    #more .sec_kv .hd-w1300 {
        top: 39%;
    }
    /* ------------ SEC_LIGHTING ------------ */
    #hd .hd-sec-lighting {
        padding: 50px 0 30px;
    }
    #hd .hd-sec-lighting .fleft,
    #hd .hd-sec-lighting .fright {
        float: none;
    }
    #hd .hd-sec-lighting .hd-w1200:after {
        left: auto;
        right: 0;
    }
    #hd .hd-sec-lighting h3 {
        margin-top: 0;
    }
    #hd .hd-sec-lighting .hd-col55 {
        display: block;
        position: relative;
        width: 80%;
        margin: 0 auto;
    }
    #hd .hd-controls {
        margin-left: 0;
    }
    #hd .hd-controls li img {
        margin: 20px auto 0;
    }
    #hd .hd-lightingbox {
        width: 90%;
        max-width: 660px;
        right: 0;
        padding-bottom: 5%;
        height: 705px;
        margin: 0 auto;
        float: none;
        position: relative;
    }
    #hd .hd-lightingbox h5:nth-of-type(1) {
        top: 82%;
        left: 14%;
    }
    #hd .hd-lightingbox h5:nth-of-type(2) {
        top: 89%;
        left: 14%;
    }
    #hd .hd-w1250on {
        display: block;
    }
    #hd .hd-w1250off {
        display: none;
    }
    #hd .hd-sec-lighting .align_left h3,
    #hd .hd-sec-lighting .align_left p {
        text-align: center;
    }
    #color,
    #greybg {
        width: 100%;
        height: 0;
        padding-bottom: 102%;
        position: absolute;
        z-index: -1;
    }
    #colorpicker {
        left: 80%;
    }
    .hd-cycle:before,
    .hd-cycle:after,
    .hd-comet:before,
    .hd-comet:after,
    .hd-flash:before,
    .hd-flash:after,
    .hd-wave:before,
    .hd-wave:after,
    .hd-yoyo:after,
    .hd-starryNight:before,
    .hd-starryNight:after,
    .starry_night_back,
    .starry_night_color {
        top: 91.5%;
    }
    .starry_night li {
        width: 10%;
    }
    .starry_night li:nth-child(1) {
        left: 24%;
        top: 13%;
    }
    .starry_night li:nth-child(2) {
        left: 26%;
        top: 20%;
    }
    .starry_night li:nth-child(3) {
        left: 32%;
        top: 32%;
    }
    #hd .hd-sec-aura {
        padding-bottom: 200px;
    }
    /* ------------ guardian ---------- */
    #hd .hd-sec-guardian li p {
        font-size: 14px;
        line-height: 1.25;
    }
    #hd .hd-sec-guardian .hd-txt span.left,
    #hd .hd-sec-guardian .hd-txt span.right {
        width: 55px;
    }
    #hd .hd-sec-ecosystem .hd-w1200 {
        margin-top: 0;
    }
    /* ------------ radar ------------- */
    #hd .hd-sec-radar {
        background-size: cover;
    }
    #hd .hd-sec-radar p.hd-col80 {
        margin-bottom: 80px;
    }
    #hd #audiogif {
        width: 62%;
        top: auto;
        bottom: 20px;
        left: 10px;
    }
    #hd .ghost-bg {
        width: 45%;
        bottom: 5%;
        z-index: 0;
    }
    #hd .gif-focus {
        position: absolute;
        display: block;
    }
    #hd .hd-sec-radar ul {
        width: 35%;
        max-width: 450px;
        margin-left: auto;
        margin-right: 0;
        margin-top: -38.5%;
    }
    #hd .hd-sec-radar li.audio-tag {
        margin-bottom: 20px;
    }
    #hd .hd-sec-radar li.audio-tag:nth-child(1),
    #hd .hd-sec-radar li.audio-tag:nth-child(2),
    #hd .hd-sec-radar li.audio-tag:nth-child(3),
    #hd .hd-sec-radar li.audio-tag:nth-child(4) {
        width: 100%;
        position: relative;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #hd .hd-sec-radar li.audio-tag:nth-child(2) h4,
    #hd .hd-sec-radar li.audio-tag:nth-child(2) small,
    #hd .hd-sec-radar li.audio-tag:nth-child(3) h4,
    #hd .hd-sec-radar li.audio-tag:nth-child(3) small,
    #hd .hd-sec-radar li.audio-tag:nth-child(4) h4,
    #hd .hd-sec-radar li.audio-tag:nth-child(4) small {
        padding-left: 0;
    }
    #hd .hd-sec-radar li.audio-tag:nth-child(2):before,
    #hd .hd-sec-radar li.audio-tag:nth-child(2):after,
    #hd .hd-sec-radar li.audio-tag:nth-child(3):before,
    #hd .hd-sec-radar li.audio-tag:nth-child(4):before,
    #hd .hd-sec-radar li.audio-tag:nth-child(4):after,
    #hd .hd-sec-radar li.audio-tag:nth-child(4) small:before {
        display: none;
    }
    /* ---------- color effect ---------- */
    .hd-rainbow:before,
    .hd-rainbow:after,
    .hd-wave .starry_night,
    .hd-yoyo:before,
    .hd-yoyo .starry_night {
        top: 89%;
    }
    .starry_night li:nth-child(3),
    .starry_night li:nth-child(4),
    .starry_night li:nth-child(5),
    .starry_night li:nth-child(6) {
        top: 32%; /*RCD*/
    }
    .hd-cycle:before,
    .hd-cycle:after,
    .hd-comet:before,
    .hd-comet:after,
    .hd-flash:before,
    .hd-flash:after,
    .hd-wave:before,
    .hd-wave:after,
    .hd-yoyo:after,
    .hd-starryNight:before,
    .hd-starryNight:after,
    .starry_night_back,
    .starry_night_color {
        top: 89%;
    }
    /*AI Overclocking新增區塊*/
    #hd .ai_overclocking .cpu_cooling .black_area {
        width: 250px;
    }
    #hd .ai_overclocking .cpu_cooling .black_area .cpu_txt {
        padding-left: 0px !important;
        text-align: center;
    }
    #hd .ai_overclocking .cpu_cooling .black_area .cpu_img {
        margin-bottom: 10px;
    }
    #hd .ai_overclocking .cpu_cooling #black_area_first {
        padding-left: 0 !important;
    }
    #hd .ai_overclocking .gradation_area .gradation_bg .fleft,
    #hd .ai_overclocking .gradation_area .gradation_bg .fright {
        width: 45%;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area .cpu_img {
        width: 35%;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area {
        bottom: 0;
        top: 60%;
    }
    #hd .ai_overclocking .gradation_area .ai_cycle {
        bottom: -55px;
    }
    #hd .ai_overclocking .gradation_area .ai_cycle .fleft,
    #hd .ai_overclocking .gradation_area .ai_cycle .fright {
        width: 28.5%;
    }
    /*AI Overclocking新增區塊結束*/
    #hd .innovation.hd-sec-outlook ol li p {
        font-size: .8rem;
    }
}

@media screen and (max-width: 1150px) {
    #hd .twentytwenty-handle {
        margin-left: 30px;
    }
    #specs ol li:nth-child(-n+8) {
        left: 3.5%;
    }
    #hd .hd-sec-guardian li:nth-child(4) figure {
        padding-bottom: 203%;
    }
    #hd .hd-sec-ethernet .left {
        width: 40%;
    }
    #hd .hd-sec-ethernet .right {
        width: 60%;
    }

    #hd .hd-sec-supremefx .img-position {
        top: -5%;
    }
}

@media screen and (max-width: 1024px) {
    #hd .twentytwenty-handle {
        margin-left: 25px;
    }
    #hd #kv .imglogo {
		top:36.4%;
        left: calc(15% + 39px);
        width: 56px;
    }
    #hd h2 {
        font-size: 2rem;
    }
    #hd #intel h2 {
        font-size: 3rem;
    }
    #hd .switch {
		margin:10px auto;
    }
    #hd .switch li {
        width: 10px;
        height: 20px;
        margin: 0 5px;
    }
    #hd .switch li.hd-active {
        width: 80px;
    }
    /*AI Overclocking新增區塊*/
    #hd .ai_overclocking {
        margin: 100px 0 250px 0;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area {
        top: 105%;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area,
    #hd .ai_overclocking .gradation_area .overclocking_area .red_img {
        width: 35%;
    }
    #hd .gradation_area .overclocking_area .red_area .ai_txt {
        padding-left: 0px !important;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area .cpu_img,
    #hd .gradation_area .overclocking_area .red_area .ai_txt {
        text-align: center;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area .cpu_img,
    #hd .gradation_area .overclocking_area .red_area .ai_txt h4 {
        margin-bottom: 15px;
    }
    #hd .ai_overclocking .gradation_area .ai_cycle {
        bottom: -40px;
    }
    /* ---------- #kv ----------------- */
    #hd #kv .pos-p {
        top: 40%;
    }
    /* ---------- sec_kv --------- */
    #hd .sec_kv h3 {
        min-height: 46px;
        padding: 7px 10px;
    }
    #hd .sec_kv ul.hd-red li h3,
    #hd .sec_kv ul.hd-cyan li h3,
    #hd .sec_kv ul.hd-purple li h3 {
        margin: 0 5px;
    }
    #performance .sec_kv h2 {
        max-width: 550px;
    }
    /* ---------- #specs -------------- */
    #hd #specs ol li {
        max-width: 300px;
    }
    #hd #specs ol li p {
        line-height: 1.1;
    }
    /* ----------- power -------------- */
    #hd .hd-sec-power nav li h5 {
        font-size: 12px;
    }
    #hd .hd-sec-power nav li:nth-child(-1n+5)::after {
        top: 30px;
    }
    /* ----------- cooler ------------- */
    #hd #cooler-figure {
        left: -10%;
    }
    #hd .hd-sec-cooler .right {
        width: 60%;
    }
    #hd #cooler-content h5 {
        font-size: 1rem;
        min-height: 38px;
    }
    /* ------------ SEC_LIGHTING ------------ */
    #hd .hd-sec-lighting {
        background-position: right top;
        background-size: 500px;
    }
    #hd .hd-sec-lighting h3,
    #hd .hd-sec-lighting h3+p {
        margin-bottom: 10px;
    }
    /* ------------ guardian ---------- */
    #hd .hd-sec-guardian .hd-txt span.left,
    #hd .hd-sec-guardian .hd-txt span.right {
        width: 45px;
        height: 200px;
    }
    _:-ms-input-placeholder,
    :root #hd .hd-sec-guardian .hd-txt span.left {
        width: 30px;
    }
    _:-ms-input-placeholder,
    :root #hd .hd-sec-guardian .hd-txt span.right {
        width: 20px;
    }
    /* ------------ mode -------------- */
    #hd .hd-sec-mode {
        padding: 0 30px 50px;
    }
    #hd .hd-sec-mode li .hd-title:before,
    #hd .hd-sec-mode li .hd-title:after {
        height: 150%;
    }
    #hd #mode_switch_right,
    #hd #mode_switch_left {
        height: 70px;
    }
    #hd .hd-sec-ddr4 {
        padding: 40px 0;
    }
    #hd .hd-sec-ddr4 .fright {
        margin-top: 5%;
    }
    #hd .hd-sec-mode .hd-skewtag {
        padding: 10px 10px 8px;
    }
    /* ------------ sonic ------------- */
    #hd #sonic_studio .hd-content {
        padding: 10% 0;
    }
    #hd #sonic_studio p {
        width: 100%;
    }
    #hd #sonic_studio h4 {
        font-size: 16px;
    }
    #hd .hd-sec-sonic .switch li {
        width: 30%;
        height: auto;
        background-size: 100%;
        padding: 10px 5px;
        text-align: center;
    }
    /* ------------ languard ---------- */
    #hd .hd-sec-languard .fright {
        width: 100%;
        margin-top: 0;
    }
    #hd .hd-sec-languard .fright li {
        left: 78%;
        min-width: 130px;
        font-size: 16px;
    }
    #hd .hd-sec-languard .fright img {
        margin-left: 0;
    }
    #hd .hd-sec-languard .fleft {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 80%;
        position: relative;
        z-index: -1;
    }
    /* ---------- #intel -------------- */
    #hd #intel {
        padding: 50px 0;
    }
    #hd #intel h2 {
        margin-bottom: 50px;
    }
    #hd #intel img+div {
        margin-bottom: 30px;
        padding-left: 30px;
    }
    /* ------------ optimization ------ */
    #hd .hd-sec-optimization {
        padding: 30px;
    }
    #hd .hd-sec-optimization .switch li h4 {
        font-size: 1rem;
        min-height: 40px;
    }
    /* ------------ bios ------ */
    #hd .hd-sec-bios {
        padding: 30px;
    }
    #hd .hd-sec-bios .switch li h4 {
        font-size: 1rem;
        min-height: 40px;
    }
    /* ------------ gf_network -------- */
    #hd #gf_slider .item {
        padding-bottom: 50%;
    }
    #hd #gf_slider h5.txt-red {
        font-size: 1.25em;
        margin-bottom: 5px;
    }
    #hd #gf_slider h4 {
        font-size: 1em;
        margin-bottom: 5px;
    }
    #hd #gf_slider .slide-2 .icon_list li {
        background-size: 40px;
    }
    #hd #gf_monitor {
        left: 5%;
    }
    #hd #gf_app_list {
        left: 38%;
    }
    #hd #gf_slider .slide-3 .content {
        width: 35%;
        left: 56%;
        top: 50%;
    }
    #hd #gf_slider .slide-3 .content span {
        display: none;
    }
    /* ------------ armoury ----------- */
    #hd .hd-sec-armoury {
        padding: 50px 0 70px;
    }
    #hd .hd-sec-armoury h3+p {
        margin-bottom: 30px;
    }
    #hd .hd_armoury_filter {
        width: 200px;
    }
    #hd .hd_armoury_filter li {
        padding: 10px 5px;
    }
    #hd .hd_armoury_filter li h4 {
        font-size: 1em;
    }
    #hd .hd-sec-armoury .fright {
        width: calc(100% - 200px);
	}
	#hd .hd-sec-pnetworking .hd-w1300.txt-center {
		padding: 0;
		padding-bottom: 20px;
	}
	#hd .hd-sec-supremefx h3{
		margin-top: 0;
	}
}

@media screen and (max-width: 1023px) {
    #hd .hd-col20_1023 {
        width: 20%;
    }
    #hd .hd-col25_1023 {
        width: 25%;
    }
    #hd .hd-col33_1023 {
        width: 33.3333%;
    }
    #hd .hd-col40_1023 {
        width: 40%;
    }
    #hd .hd-col45_1023 {
        width: 45%;
    }
    #hd .hd-col50_1023 {
        width: 50%;
    }
    #hd .hd-col55_1023 {
        width: 55%;
    }
    #hd .hd-col60_1023 {
        width: 60%;
    }
    #hd .hd-col65_1023 {
        width: 65%;
    }
    #hd .hd-col70_1023 {
        width: 70%;
    }
    #hd .hd-col80_1023 {
        width: 80%;
    }
    #hd .hd-col90_1023 {
        width: 90%;
    }
    #hd .hd-col100_1023 {
        width: 100%;
	}
	/*img*/
	#img_gigabit {
		width: 100%;
	}
	#img_storage {
		width: 80%;
		margin: 0;
	}
    /* ---------- #kv ----------------- */
    #hd #kv {
        height: 500px;
        background-position: top;
    }
    #hd #kv .text {
        left: calc(50% + 220px);
    }
    #hd #kv .bg {
        background-position: top;
    }
    #hd #kv .imgfront,
    #hd #kv .imgback {
        left: 10%;
    }
    #hd #kv .imglogo {
        top: 34.4%;
        left: calc(10% + 40px);
        width: 55px;
    }

    #hd #specs .switch_btn.mobile{
        display: flex;
    }
    #hd #specs .spec-main.aura,
    #hd #specs .spec-main.noaura {
        display: none;
    }
    #hd #specs .spec-main.aura.active,
    #hd #specs .spec-main.noaura.active{
        display: block;
    }
    #hd #specs .spec-main.noaura.change {
        background-image: url('../img/spec/spec-noaura.png');
    }
    
    /* ---------- #hd-sec-guardian ----------------- */
    #hd .hd-sec-guardian li:first-child img {
        top: -14%;
    }
    #hd .hd-sec-guardian li:nth-child(5),
    #hd .hd-sec-guardian li:nth-child(4) figure,
    #hd .hd-sec-guardian .hd-txt,
    #hd .hd-sec-guardian li figure {
        margin-left: 0;
    }
    #hd .hd-sec-guardian li:nth-child(4) {
        float: left;
    }
    #hd .hd_1023_off {
        display: none;
    }
    #hd .hd_1023_on {
        display: block;
    }
    /* ---------- sec_kv --------- */
    #hd .hd_1023_on {
        display: block;
    }
    #hd .sec_kv {
        background: #000000;
    }
    #hd .sec_kv .hd-w1300 {
        padding-top: 30px;
        position: relative;
        top: 0;
    }
    #hd .sec_kv h2,
    #hd .sec_kv p {
        width: 100%;
        max-width: none !important;
        text-align: center;
    }
    /* ------------ SEC_SPEC ------------ */
    #hd #specs .spec-main {
        background-position: center top;
        max-width: 400px;
        padding-bottom: 100%;
        margin: 0 auto;
    }

    #hd #specs .spec-main.aura {
        background-image: url('../img/spec/spec-m.png');
    }
    #hd #specs .spec-main.noaura {
        background-image: url('../img/spec/spec-m-noaura.png');
    }

    #hd #specs .hd-w1300 {
        width: 90%;
        max-width: 600px;
        margin-left: auto;
    }
    #hd #specs .hd-w1300 ol,
    #hd #specs .hd-w1300 ol li:nth-child(n) {
        position: relative;
        top: 0;
        left: 0;
    }
    #hd #specs .hd-w1300 ol {
        -webkit-column-count: 2;
        /* Chrome, Safari, Opera */
        -moz-column-count: 2;
        /* Firefox */
        column-count: 2;
        padding: 30px 0 0;
    }
    #hd #specs .hd-w1300 ol li:nth-child(n) {
        margin: 0 0 22px;
        padding-left: 40px;
    }
    #hd #specs .hd-w1300 ol li:before {
        display: block;
        left: 0;
    }
    /* ----------- cooler ------------- */
    #hd .hd-sec-cooler {
        padding: 50px 0 10px;
    }
    #hd .hd-sec-cooler h3+p {
        margin-bottom: 0;
    }
    #hd #cooler-filter {
        margin: 0 0 30px;
    }
    #hd .hd-sec-cooler .hd-w1300>div,
    #hd #cooler-figure {
        width: 100%;
    }
    #hd .hd-sec-cooler .right {
        float: none;
    }
    #hd #cooler-figure {
        position: relative;
        max-width: 400px;
        height: 0;
        padding-bottom: 400px;
        margin: 0 auto;
        top: 0;
        left: 0;
    }
    #hd #cooler-content {
        min-height: 0;
    }
    /* ---------- heatsink -------------- */
   
    #hd .hd-sec-cooler .heatsink .left,
    #hd .hd-sec-cooler .heatsink .right {
        width: 100%;
	}
	

	#hd #heatsink_mobile {
		display: block;
	}
	#hd #heatsink_pc {
		display: none;
	}


	#hd .hd-sec-heatsink .heatsink .itembox .text .number{
		display: block;
	}

    /* ------------ SEC_LIGHTING ------------ */
    #hd .hd-sec-lighting .hd-col55 {
        width: 100%;
        float: none;
    }
    #hd .hd-sec-lighting h3 {
        margin-top: 0;
    }
    #hd .hd-sec-lighting h3,
    #hd .hd-sec-lighting h3+p {
        margin-bottom: 30px;
    }
    /* #colorpicker{right: 10px; } */
    #hd .hd-sec-aura {
        padding: 30px 0;
    }
    #hd .hd-sec-aura .hd-w1000 {
        position: relative;
        width: 90%;
        left: 0;
        margin: 0 auto;
    }
    /* gen2 */
    #hd .gen2 figure {
        width: 100%;
    }
    /* ------------ guardian ---------- */
    #hd .hd-sec-guardian li:nth-child(n) {
        width: 29%;
    }
    #hd .hd-sec-guardian li:nth-child(n) figure {
        padding-bottom: 173%;
    }
    #hd .hd-sec-guardian li:nth-child(n) .hd-txt {
        width: 80%;
        top: 35%;
        left: 5%;
    }
    #hd .hd-sec-guardian li:nth-child(3n+1) {
        margin-left: 5%;
    }
    #hd .hd-sec-guardian li:first-child {
        margin-right: -5.5%;
    }
    #hd .hd-sec-guardian li:nth-child(5) {
        margin-right: 0;
    }
    /* ------------ sonic ------------ */
    #hd #sonic_studio li {
        width: 33.333%;
        padding-bottom: 70%;
    }
    #hd .hd-sec-sonic:before {
        height: 50%;
        bottom: auto;
        top: 50%;
    }
    #hd .hd-sec-sonic figure li:nth-child(n) {
        position: static;
        width: 100%;
        top: 0;
        left: 0;
        margin: 10px auto;
    }
    #hd .hd-sec-sonic figure li h4,
    #hd .hd-sec-sonic figure li p {
        padding-left: 0;
    }
    #hd .hd-sec-sonic .txt_decoline,
    #hd .hd-sec-sonic .txt_decolineflip {
        background: url(../img/deco-line.png) right bottom no-repeat;
        background-size: contain;
    }
    #hd .hd-sec-sonic figure li:nth-child(1) h4:after,
    #hd .hd-sec-sonic figure li:nth-child(2) h4:after,
    #hd .hd-sec-sonic figure li:nth-child(3) h4:after {
        display: none;
    }
    #hd .hd-sec-sonic figure li h4:before {
        content: '1. ';
        display: inline-block;
        width: 40px;
    }
    #hd .hd-sec-sonic figure li:nth-child(2) h4:before {
        content: '2. ';
    }
    #hd .hd-sec-sonic figure li:nth-child(3) h4:before {
        content: '3. ';
    }
    #hd .hd-sec-sonic figure li h4 img {
        display: inline-block;
        vertical-align: middle;
    }
    #hd .hd-sec-sonic .hd-num {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-bottom: 102.24%;
    }
    #hd .hd-sec-sonic .hd-num li:nth-child(n) {
        position: absolute;
        display: block;
        width: 28px;
        height: 28px;
        line-height: 24px;
        padding-right: 1px;
        text-align: center;
        border-radius: 15px;
        margin: 0;
        border: 2px solid #cc0000;
        background-color: rgba(0, 0, 0, .6);
    }
    #hd .hd-sec-sonic .hd-num li:nth-child(1) {
        top: 28%;
        left: .5%;
    }
    #hd .hd-sec-sonic .hd-num li:nth-child(2) {
        top: 80%;
        left: .5%;
    }
    #hd .hd-sec-sonic .hd-num li:nth-child(3) {
        top: 11%;
        left: 55%;
    }
    /* ------------ supremefx --------- */
    #hd .hd-sec-supremefx {
        padding: 50px 0;
    }
    #hd .hd-sec-supremefx .img-position {
        position: relative;
        top: 0;
        right: 0;
        z-index: 1;
    }
    #hd .hd-sec-supremefx .hd-supremefx {
        display: none;
    }
    #hd .hd-sec-supremefx p.p-width,
    #hd .hd-sec-supremefx .audio-button {
        width: 100%;
    }
    #hd .hd-sec-supremefx .hd-col25 {
        width: 25%;
    }
    /* ------------ overwolf ------------ */
    #hd .hd-sec-overwolf .hd-w1200 {
        text-align: center;
    }
    #hd .hd-sec-overwolf p.p-width {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    #hd .hd-sec-overwolf .img-position {
        position: relative;
        top: 0;
    }
    #hd .hd-sec-overwolf .hd-button {
        font-size: 1rem;
    }
    #hd .innovation.hd-sec-outlook ol li:before {
        display: block;
        left: -40px;
        top: 2.5px;
    }
    #hd .innovation.hd-sec-outlook .hd-col60,
    #hd .innovation.hd-sec-outlook .hd-col40 {
        width: 100%;
    }
    #hd .innovation.hd-sec-outlook .pc {
        display: none;
    }
    #hd .innovation.hd-sec-outlook .mobile {
        display: block;
    }
   
    #hd .innovation.hd-sec-outlook ol li {
        position: relative;
        left: 10%;
        width: 90%;
    }
    #hd .display_on_1023 {
        display: block;
    }
    #hd .display_off_1023 {
        display: none;
    }
    #hd #cooler-figure img {
        left: 50%;
        top: 42%;
        width: 90%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    #hd .hd-sec-outlook .fright {
        top: 20%;
    }
    /*------------hd-sec-oled-----------*/
    #hd .hd-sec-oled .skew-btn h4 {
        font-size: 1rem;
    }
    #hd .hd-sec-oled figure {
        margin-top: 6%;
    }
    /*------- switch --------*/
    #hd #custom_switch {
        width: 100%;
    }
    #hd #custom_switch li {
        width: 30%;
    }
    #hd #compatibility_switch {
        width: 100%;
    }
    #hd #compatibility_switch li {
        width: 30%;
	}
	
	#hd .gen2 {
		margin-top: 80px;
	}
}

@media screen and (max-width: 1000px) {
    /* ------------ ethernet ---------- */
    #hd .hd-sec-ethernet .left,
    #hd .hd-sec-ethernet .right {
        width: 100%;
    }
    #hd .hd-sec-ethernet .right {
        max-width: 70%;
        position: relative;
        margin: 0 auto;
    }
    #hd .hd-sec-ethernet {
        padding: 0 0 10%;
    }
}

@media screen and (max-width: 900px) {
    #hd .twentytwenty-handle {
        margin-left: 20px;
    }
}

@media screen and (max-width: 800px) {
    #hd .twentytwenty-handle {
        margin-left: 15px;
    }
}

@media screen and (max-width: 768px) {
    #hd .hd-sec-auraSync .switch li,
    #hd .hd-sec-compatibility .switch li {
        padding: 5px;
    }
    /*------- switch --------*/
    #hd #custom_switch li h4 {
        font-size: 16px;
    }
    #hd #compatibility_switch li h4 {
        font-size: 16px;
	}
	#hd #custom_switch li {
        width: 40%;
    }
    #hd #compatibility_switch li {
        width: 40%;
    }
  
    #hd #intel h2 {
        font-size: 2rem;
    }
    #hd .hd_mobile_off {
        display: none;
    }
    #hd .hd_mobile_on {
        display: block;
    }
    /* ---------- #kv ----------------- */
    #hd #kv {
        height: auto;
    }
    #hd #kv .bg {
        position: relative;
        height: 400px;
    }
    #hd #kv .imglogo {
        left: calc(50% - 108px);
        width: 37px;
    }
    #hd #kv .imgfront,
    #hd #kv .imgback {
        left: 50%;
        transform: translateX(-50%);
    }
    #hd #kv .text {
        position: static;
        transform: translate(0, 0);
        width: 90%;
        margin: 30px auto;
    }
    #hd #specs {
        padding: 40px;
    }
    #hd .hd-sec-ethernet .left {
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    #hd #kv .pos-p {
        top: 30%;
    }
    /*AI Overclocking新增區塊*/
    #hd .ai_overclocking .cpu_cooling .black_area {
        padding: 0 !important;
    }
    #hd .ai_overclocking .cpu_cooling {
        flex-direction: column;
        padding: 25px 0;
    }
    #hd .ai_overclocking .cpu_cooling .black_area .cpu_img {
        display: block;
    }
    #hd .ai_overclocking .cpu_cooling .hd-aiimg {
        margin: 25px !important;
    }
    #hd .ai_overclocking {
        margin: 50px 0 300px 0;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area {
        bottom: -175px;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area .cpu_img,
    #hd .gradation_area .overclocking_area .red_area .ai_txt h4 {
        margin-bottom: 10px;
    }
    #hd .gradation_area .overclocking_area .red_area .ai_txt h4 {
        font-size: 1.15rem;
    }
    #hd .gradation_area .overclocking_area .red_area .ai_txt p {
        line-height: 1.25;
    }
    /* ------------ SEC_LIGHTING ------------ */
    #hd .hd-sec-lighting {
        padding-bottom: 0;
    }
    #colorpicker {
        display: none !important;
    }
    /* gen2 */
    #hd .gen2 {
        margin-top: 30px;
        flex-wrap: wrap;
    }
    #hd .gen2 .addressable figure .bg {
        width: 100%;
    }
    /* ------------ power -------------- */
    #hd .hd-sec-power .fleft {
        /* position: relative;  */
        width: 100%;
        vertical-align: bottom;
        margin-top: 0px;
        margin-left: 0;
    }
    #hd .hd-sec-power .fright {
        /* position: relative;  */
        width: 100%;
		vertical-align: bottom;
		margin-top: 0px;
	}
	#hd .hd-sec-power {
		padding: 40px 0;
	}
	#hd .hd-sec-cooler, #hd .hd-sec-innovation {
		padding:40px 0;
	}
	#hd .hd-sec-heatsink .heatsink {
		padding: 40px;
	}
	#hd .hd-sec-outlook{
		padding:40px 0;
	}
	#hd #build .hd-sec-iddesign {
		padding-top: 40px;
	}
    /* ------------ guardian ---------- */
    #hd .hd-sec-guardian li:nth-child(n) .hd-txt {
        width: 90%;
        top: 5%;
    }
    #hd .hd-sec-guardian .hd-txt span.left,
    #hd .hd-sec-guardian .hd-txt span.right {
        width: 30px;
        height: 150px;
    }
    /* ------------ compatibility ------------ */
    #hd .hd-sec-compatibility {
        padding: 30px 0 50px;
    }
    #hd .hd-sec-compatibility .fleft,
    #hd .hd-sec-compatibility .fright {
        width: 100%;
        float: none;
        margin-top: 0;
    }
    /* ------------ mode ------------- */
    #hd .hd-frame li {
        width: 150%;
        margin-left: -25%;
    }
    #hd .hd-sec-mode li .hd-title {
        line-height: 1.25;
        padding: 0 5%;
        margin-bottom: 30px;
    }
    #hd .hd-sec-mode li .hd-title:before,
    #hd .hd-sec-mode li .hd-title:after {
        width: 55%;
    }
    #hd .hd-sec-mode li .hd-col50 {
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }
    /* ------------ ddr4 -------------- */
    #hd .hd-sec-ddr4 {
        padding-bottom: 30px;
    }
    #hd .hd-sec-ddr4 .fleft,
    #hd .hd-sec-ddr4 .fright {
        width: 100%;
        padding-left: 0;
        margin: 0 auto 40px;
        float: none;
    }
    /*----------------- x299 ----------------*/
    #hd .hd-sec-x299 .img {
        width: 100%;
    }
    #hd .hd-sec-x299 .testing {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* ------------ optimization ------ */
    #hd .hd-sec-optimization {
        padding: 40px 10px;
    }
    #hd .hd-sec-optimization .switch {
        display: flex;
        justify-content: center;
    }
    #hd .hd-sec-optimization .switch li {
        width: auto !important;
        margin: 0 2px;
        padding: 5px 20px;
    }
    #hd .hd-sec-optimization .hd-content li {
        text-align: center;
    }
    #hd .hd-sec-optimization .hd-content li h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        padding: 0;
    }
    #hd .hd-sec-optimization .hd-col50 p {
        padding: 0;
    }
    #hd .hd-sec-optimization .hd-content li .hd-col50 {
        width: 100%;
        margin-left: 0;
    }
    #hd .hd-sec-optimization .hd-content li img {
        width: 90%;
        max-width: 400px;
        margin: 10px auto 30px;
    }
    /* ------------ bios ------ */
    #hd .hd-sec-bios {
        padding: 50px 10px;
    }
    #hd .hd-sec-bios .switch {
        display: flex;
        justify-content: center;
    }
    #hd .hd-sec-bios .switch li {
        width: auto !important;
        margin: 0 2px;
        padding: 5px 20px;
    }
    #hd .hd-sec-bios .hd-content li {
        text-align: center;
    }
    #hd .hd-sec-bios .hd-content li h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        padding: 0;
    }
    #hd .hd-sec-bios .hd-col50 p {
        padding: 0;
    }
    #hd .hd-sec-bios .hd-content li .hd-col50 {
        width: 100%;
        margin-left: 0;
    }
    #hd .hd-sec-bios .hd-content li img {
        width: 90%;
        max-width: 400px;
        margin: 10px auto 30px;
    }
    /* ------------ radar ------------ */
    #hd .hd-sec-radar {
        background: none;
    }
    #hd .hd-sec-radar .hd-col80 {
        width: 100%;
    }
    #hd .hd-sec-radar p.hd-col80 {
        margin-bottom: 30px;
    }
    #hd #audiogif {
        width: 90%;
        display: block;
        margin: 0 auto 30px;
        top: 0;
        left: 0;
        transform: none;
        border: 10px solid #333333;
    }
    #hd .hd-sec-radar ul {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }
    #hd .hd-sec-supremefx .audio-button .hd-col20 {
        width: 50%;
    }
    #hd .hd-sec-supremefx .audio-button .hd-col20 div {
        min-height: 150px;
    }
    /* ------------ languard -------------- */
    #hd .hd-sec-languard .hd-col50 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 30px;
        float: none;
    }
    #hd .hd-sec-languard .fright {
        display: block;
        float: none;
        width: 100%;
        margin: 0 auto;
    }
    #hd .hd-sec-languard .fright li {
        left: 82%;
        min-width: 120px;
    }
    #hd .hd-sec-overwolf {
        padding-bottom: 50px;
    }
    /* ------------outlook---------------- */
    #hd .hd-sec-outlook .sub-bg {
        display: none;
    }
    #hd .hd-sec-outlook .hd-col50 {
        width: 100%;
        margin: 0;
    }
    #hd .hd-sec-outlook .fright {
        position: relative;
        top: 0;
        right: 0;
    }
    /* --------------lighting-------------- */
    #hd .hd-lightingbox {
        height: 0;
        padding-bottom: 100%;
    }
    #hd .hd-lightingbox h5:nth-of-type(1) {
        top: 79%;
        left: 14%;
    }
    #hd .hd-lightingbox h5:nth-of-type(2) {
        top: 85%;
        left: 14%;
    }
    /* ------------ ramcache ---------- */
    #hd .hd-sec-ramcache {
        width: 90%;
    }
    #hd #ramcache-img>img:first-child {
        display: none;
    }
    #hd #ramcache-img figure {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%;
        margin: 0 auto;
        z-index: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #hd #ramcache_switch_right {
        left: 95%;
    }
    #hd #transfer_time {
        position: relative;
        width: 300px;
        margin: 20px auto 0;
        right: 0;
    }
    /* ------------ gf_network -------- */
    #hd .hd-sec-gf_network {
        padding-bottom: 0;
    }
    #hd #gf_slider .item {
        height: auto;
        padding-bottom: 40%;
    }
    #hd #gf_slider .owl-prev,
    #hd #gf_slider .owl-next {
        width: 40px;
        height: 70px;
        position: absolute;
        top: auto;
        margin: 0;
        background-position: center center;
        background-size: 100%;
    }
    #hd #gf_slider .owl-dots {
        width: 100%;
        position: absolute;
        bottom: 0;
        text-align: center;
        margin-bottom: 30px;
    }
    #hd #gf_slider .owl-dot {
        display: inline-block;
        vertical-align: top;
        width: 10px;
        height: 10px;
        border-radius: 6px;
        border: 1px solid #cc0000;
        margin: 5px;
    }
    #hd #gf_slider .owl-dot.active {
        background-color: #cc0000;
    }
    #hd #gf_slider .slide-1,
    #hd #gf_slider .slide-2 {
        background-size: 140%;
    }
    #hd #gf_slider .slide-3 {
        padding-bottom: 0;
    }
    #hd #gf_slider .slide-1 .content,
    #hd #gf_slider .slide-2 .content,
    #hd #gf_slider .slide-3 .content {
        width: 90%;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
    }
    #hd #gf_slider .slide-3 .content {
        top: 0;
        left: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #hd #gf_slider .slide-1 .icon_list,
    #hd #gf_slider .slide-2 .icon_list {
        width: 140%;
        height: 0;
        padding-bottom: 56%;
        top: auto;
        bottom: 0;
    }
    #hd #gf_slider .slide-1 .icon_list li {
        top: 26%;
        left: 17%;
    }
    #hd #gf_slider .slide-2 .icon_list li {
        background-position: center center;
        background-size: 60%;
    }
    #hd #gf_monitor {
        position: relative;
        width: 90%;
        padding-bottom: 69%;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto 10px;
    }
    #hd #gf_app_list {
        position: relative;
        width: 30%;
        padding-bottom: 30%;
        top: 0;
        left: 0;
        bottom: 0;
        margin-top: -20%;
        margin-left: 5%;
    }
    #hd .hd-sec-sonic .sound-row .hd-col33 {
        width: 100%;
        padding: 0 15px;
        vertical-align: top;
        text-align: center;
    }
    #hd .hd-sec-sonic .switch {
        width: 100%;
    }
    #hd .hd-sec-sonic .switch li {
        width: 40%;
        padding: 5px;
    }
    /*------------hd-sec-oled-----------*/
    #hd .hd-sec-oled .hd-col50 {
        width: 100%;
    }
    #hd .hd-sec-oled figure {
        margin-top: 0;
	}
	
	#hd .hd-sec-compatibility .left.hd-active{
		flex-wrap: wrap;
	}
	#hd .hd-sec-guardian li:first-child .hd-txt{
		margin-left: 0;
	}
	#hd #Active_VRM {
		white-space:normal;
	}
}

@media screen and (max-width: 680px) {
    #hd .twentytwenty-handle {
        margin-left: 13px;
    }
}

@media screen and (max-width: 620px) {
    #hd .twentytwenty-handle {
        margin-left: 10px;
    }
    #hd .hd_620_off {
        display: none;
    }
    #hd .hd_620_on {
        display: block;
    }
    #hd .rig_way li.hd-active:after,
    #hd .design_sustom li.hd-active:after,
    #hd .soltd_hardware li.hd-active:after,
    #fp-nav {
        display: none;
    }
    #hd .sec_nav li.hd-col20,
    #hd .sec_kv li.hd-col20 {
        width: 33.3333%;
    }
    #hd .sec_nav h3,
    #hd .sec_kv h3 {
        font-size: 1rem;
    }
    #hd .sec_nav li figure:before,
    #hd .sec_kv li figure:before {
        background-color: rgba(0, 0, 0, .5);
    }
    /*AI Overclocking新增區塊*/
    #hd .ai_overclocking {
        margin: 50px 0 250px 0;
    }
    #hd .ai_overclocking .gradation_area .gradation_bg .fleft,
    #hd .ai_overclocking .gradation_area .gradation_bg .fright {
        display: none;
    }
    #hd .ai_overclocking .gradation_area .ai_cycle .fleft,
    #hd .ai_overclocking .gradation_area .ai_cycle .fright {
        width: 57.5%;
    }
    #hd .ai_overclocking .gradation_area .ai_cycle {
        padding: 0 2.15% !important;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area {
        display: block;
        top: 15%;
        position: relative;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area {
        margin-bottom: 125px !important;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area,
    #hd .ai_overclocking .gradation_area .overclocking_area .red_img {
        width: 55%;
        position: relative;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area::before {
        content: '';
        background-image: url(../img/AI_OVERCLOCKING/left_bg_m.png);
        position: absolute;
        top: -25%;
        left: -50%;
        background-size: cover;
        width: 200%;
        padding-bottom: 175%;
        z-index: -1;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_img::before {
        content: '';
        background-image: url(../img/AI_OVERCLOCKING/right_bg_m.png);
        position: absolute;
        top: -25%;
        right: -50%;
        background-size: cover;
        width: 200%;
        padding-bottom: 175%;
        z-index: -1;
    }
    #hd .ai_overclocking .gradation_area .ai_cycle {
        /*bottom: 0;*/
        display: none;
    }
    /*AI Overclocking新增區塊結束*/
    /* ------------ KV --------------- */
    #hd #kv .pos-p {
        width: 90%;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
    }
    #hd #kv .pos-p p {
        width: 100%;
        max-width: none;
    }
    #hd #kv .hd-kv-lighting {
        width: 55%;
        left: -35%;
        top: 6.5%;
        right: 0;
        margin: 0 auto;
    }
    #hd #kv .hd-kv-lighting figure {
        width: 60%;
        margin: 0 auto;
    }
    /* ------------ SPECS ------------ */
    #hd #specs ol {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    /* ------------ cooler ----------- */
    #hd #cooler-filter li h3 {
        margin: 0 3px;
    }
    #hd #cooler-content>li li {
        padding: 0 3px;
    }
    /* ------------ lighting ---------- */
    #hd .hd-sec-lighting {
        padding-top: 0px;
        background-position: right 30%;
    }
    #hd .hd-controls b {
        font-size: 12px;
    }
    #hd .hd-lightingbox {
        height: 0;
        padding-bottom: 100%;
    }
    #hd .hd-lightingbox h5:nth-of-type(1) {
        top: 78%;
        font-size: 12px;
    }
    #hd .hd-lightingbox h5:nth-of-type(2) {
        top: 85%;
        font-size: 12px;
    }
    #colorpicker {
        display: none !important;
    }
    /* ------------ guardian ---------- */
    #hd .hd-sec-guardian li:nth-child(n) {
        float: none;
        width: 90%;
        margin: 0 auto 10px;
    }
    #hd .hd-sec-guardian li:nth-child(n) figure {
        width: 100%;
        height: 100%;
        padding-bottom: 0;
        position: absolute;
        top: 0;
        left: 0;
        background: right bottom no-repeat;
        background-size: contain;
    }
    #hd .hd-sec-guardian li:nth-child(n) .hd-txt {
        width: 65%;
        position: relative;
    }
    #hd .hd-sec-guardian li:first-child .hd-txt {
        text-align: left;
    }
    #hd .hd-sec-guardian li figure,
    #hd .hd-sec-guardian li img {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #hd .hd-sec-guardian li p,
    #hd .hd-sec-guardian figure:hover+div h5 {
        display: block;
    }
    #hd .hd-sec-guardian figure:hover+div p {
        -webkit-animation: none;
        -o-animation: none;
        animation: none;
    }
    #hd .hd-sec-guardian .hd-txt span.left,
    #hd .hd-sec-guardian .hd-txt span.right {
        display: none;
    }
    #hd .hd-sec-guardian li img {
        display: none;
    }
    #hd .hd-sec-guardian li:nth-child(1) figure {
        background-image: url(../img/diy/i-oshield.png);
    }
    #hd .hd-sec-guardian li:nth-child(2) figure {
        background-image: url(../img/diy/safeslot.jpg);
    }
    #hd .hd-sec-guardian li:nth-child(3) figure {
        background-image: url(../img/diy/esdguards.jpg);
    }
    #hd .hd-sec-guardian li:nth-child(4) figure {
        background-image: url(../img/diy/q-slot.jpg);
    }
    #hd .hd-sec-guardian li:nth-child(5) figure {
        background-image: url(../img/diy/q-dimm.jpg);
    }
    #hd .hd-sec-guardian li:nth-child(6) figure {
        background-image: url(../img/diy/q-led.jpg);
    }
    #hd .hd-sec-guardian li:nth-child(7) figure {
        background-image: url(../img/diy/3d.jpg);
    }
    #hd .hd-sec-guardian li:nth-child(8) figure {
        background-image: url(../img/diy/dram.jpg);
    }
    #hd .hd-sec-guardian li:nth-child(9) figure {
        background-image: url(../img/diy/highly.jpg);
    }
    #hd .hd-sec-ecosystem .hd-w1200 {
        padding-right: 0;
    }
    #hd .hd-sec-ecosystem:after {
        width: 150%;
        padding-bottom: 70%;
        position: relative;
        margin: -10% 0 -10% -50%;
    }
    /* ------------ optimization ------ */
    #hd .hd-sec-optimization .switch {
        flex-wrap: wrap;
    }
    #hd .hd-sec-optimization .switch:before {
        display: none;
    }
    #hd .hd-sec-optimization .switch li {
        width: 28% !important;
        margin: 0 2px 5px;
        padding: 5px 20px;
    }
    #hd .hd-sec-optimization .switch li:nth-child(n+4) {
        width: 40% !important;
    }
    #hd .hd-sec-optimization .hd-content li {
        margin-top: 0;
        margin-bottom: 0;
    }
    /* ------------ bios ------ */
    #hd .hd-sec-bios .switch {
        flex-wrap: wrap;
    }
    #hd .hd-sec-bios .switch:before {
        display: none;
    }
    #hd .hd-sec-bios .switch li {
        width: 28% !important;
        margin: 0 2px 5px;
        padding: 5px 20px;
    }
    #hd .hd-sec-bios .switch li:nth-child(n+4) {
        width: 40% !important;
    }
    #hd .hd-sec-bios .hd-content li {
        margin-top: 0;
        margin-bottom: 0;
    }
    /* ------------ mode -------------- */
    #hd .hd-sec-mode {
        padding: 50px 20px 20px;
    }
    #hd .hd-sec-mode li .hd-title {
        padding: 10px;
        background: #270201;
    }
    #hd .hd-sec-mode li .hd-title:before,
    #hd .hd-sec-mode li .hd-title:after {
        display: none;
    }
    #hd .hd-sec-mode .scrollbox {
        padding-bottom: 50%;
    }
    #hd .hd-sec-mode .hd-scroll {
        padding-left: 0;
    }
    #hd .hd-sec-sonic {
        padding-top: 50px;
        padding-bottom: 0;
    }
    #hd .hd-sec-sonic .hd-col80 {
        width: 100%;
    }
    #hd .hd-sec-sonic figure {
        width: 90%;
    }
    #hd .hd-sec-supremefx .audio-button .hd-col20 {
        width: 100%;
    }
    #hd .hd-sec-supremefx .audio-button .hd-col20 div {
        min-height: 0;
    }
    /*--------------- x299 --------------*/
    #hd .chart-compare {
        display: block;
    }
    #hd .chart-wrapper .cube {
        width: 110px;
        height: 110px;
        margin: 20px auto 0;
        display: block;
    }
    #hd .chart-wrapper .cube .number {
        font-size: 2em;
    }
    /* ------------ overwolf ------------ */
    #hd .hd-sec-overwolf ul li {
        background-size: cover;
        margin: 5px;
    }
    #hd .hd-sec-overwolf ul.tag_red {
        width: 100%;
    }
    #hd .hd-sec-overwolf ul.tag_black {
        display: none;
    }
    #hd .hd-sec-overwolf .hd-skewtag span {
        display: inline;
    }
    #hd .hd-sec-overwolf h6 {
        font-size: 1rem;
        text-align: center;
    }
    /* ------------ clone ------------ */
    #hd .hd-sec-clone {
        padding-bottom: 30px;
    }
    #hd .hd-sec-clone .hd-col50,
    #hd .hd-sec-clone .hd-col60 {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    #hd .hd-sec-clone .hd-col60 img {
        width: 90%;
        margin: 30px auto;
    }
    /* ------------ armoury ----------- */
    #hd .hd-sec-armoury {
        padding: 50px 0;
    }
    #hd .hd_armoury_filter {
        width: 100%;
    }
    #hd .hd-sec-armoury .fright {
        width: 100%;
    }
    #hd .hd_armoury_filter li {
        display: inline-block;
        vertical-align: top;
        width: 200px;
        padding: 10px 5px;
        margin: 3px;
    }
    #hd .hd_armoury_filter li h4 {
        font-size: .875em;
    }
    #hd .hd_armoury_content {
        width: 100%;
        padding-left: 0;
        margin-top: 10px;
    }
    #hd .hd-sec-grid {
        padding: 50px 0;
    }
    #hd .hd-sec-grid .hd-col40,
    #hd .hd-sec-grid .hd-col70 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    #hd .hd-sec-grid .hd-col70 img {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #hd #intel img {
        display: block;
        margin: 0 auto 20px;
    }
    #hd #intel img+div {
        display: block;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        text-align: center;
    }
}

@media screen and (max-width: 580px) {
    #hd .twentytwenty-handle {
        margin-left: 8px;
    }
}

@media screen and (max-width: 520px) {
    #hd .twentytwenty-handle {
        margin-left: 5px;
    }
    #hd #specs {
        padding: 30px;
    }
    #hd #specs .spec-main {
        padding-bottom: 150%;
    }
    #hd #specs .hd-w1300 ol {
        -webkit-column-count: 1;
        /* Chrome, Safari, Opera */
        -moz-column-count: 1;
        /* Firefox */
        column-count: 1;
        padding: 30px 0 0;
    }
    #hd #specs .switch li,
    #hd #specs .switch p {
        padding: 0 5px;
    }
}

@media screen and (max-width: 480px) {
    #hd .twentytwenty-handle {
        margin-left: 3px;
    }
    /*------- switch --------*/
    #hd #custom_switch li h4 {
        font-size: 14px;
    }
    #hd #compatibility_switch li h4 {
        font-size: 14px;
    }
    #hd #compatibility_switch li h4.small {
        font-size: 12px;
    }
    /* ---------- #kv ----------------- */
    #hd #kv .bg {
        height: 350px;
    }
    #hd #kv .imglogo {
        left: calc(50% - 100px);
        width: 37px;
    }
    #hd #kv .imgfront,
    #hd #kv .imgback {
        left: 50%;
        transform: translateX(-50%);
    }
    #hd h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    #hd h4 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    #hd h5 {
        font-size: 14px;
    }
    #hd .sec_kv h3 {
        padding: 7px 5px;
        font-size: 12px;
        min-height: 20px;
    }
    #hd .hd-frame {
        width: 100%;
        padding: 0;
        margin: 30px 0;
        border: none;
        outline-offset: 10px;
        outline: 1px solid #cc0000;
    }
    #hd .hd-frame.hd-frame-pink {
        margin: 30px 0;
        border: none;
        outline: 1px solid #d40c6b;
    }
    #hd .hd-frame.hd-frame-cyan {
        margin: 30px 0;
        border: none;
        outline: 1px solid #10b7af;
    }
    #hd .hd-frame li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
    }
    /*AI Overclocking新增區塊*/
    #hd .ai_overclocking .cpu_cooling .black_area {
        width: 200px;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area {
        margin-bottom: 75px !important;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area::before {
        left: -25%;
        width: 100%;
        padding-bottom: 100%;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_img::before {
        right: -17.5%;
        width: 100%;
        padding-bottom: 100%;
    }
    #hd .ai_overclocking .gradation_area .overclocking_area .red_area,
    #hd .ai_overclocking .gradation_area .overclocking_area .red_img {
        width: 100%;
    }
    #hd .ai_overclocking .gradation_area .gradation_bg .fleft {
        margin-bottom: 150px;
    }
    #hd .ai_overclocking .gradation_area .ai_cycle .fleft,
    #hd .ai_overclocking .gradation_area .ai_cycle .fright {
        margin-bottom: 75px;
    }
    /*AI Overclocking新增區塊結束*/
    /* ----------- power -------------- */
    #hd .hd-sec-power nav {
        max-width: 320px;
        margin: 0 auto;
    }
    #hd .hd-sec-power nav li {
        width: 33.3333%;
    }
    #hd .hd-sec-power nav li:nth-child(3)::after {
        display: none;
    }
    /* ----------- cooler ------------- */
    #hd #cooler-content>li li.hd-col100 img,
    #hd #cooler-content>li li.hd-col100 .hd-txt {
        display: block;
        width: auto;
    }
    #hd #cooler-content>li li.hd-col100 .hd-txt {
        max-width: none;
        margin-left: 0;
        text-align: center;
    }
    #hd #cooler-filter li h3 {
        font-size: 12px;
    }
    #hd .hd-sec-ethernet .right {
        max-width: none;
    }
    #hd .hd-sec-outlook ul {
        bottom: 0;
    }
    #hd .hd-sec-outlook ul li {
        width: 142px;
        padding: 6px 5px;
    }
    /* ---------- heatsink -------------- */
    /* #hd .hd-sec-cooler .heatsink {
			margin-bottom: 50px;
		}
		#hd .hd-sec-cooler .heatsink .txt-center{
			margin-bottom: 30px;
		}
		#hd .hd-sec-cooler .heatsink .item{
			margin-bottom: 30px;
		} */
    #hd .hd-sec-cooler .heatsink .item .text {
        width: 100%;
        display: inline-block;
        vertical-align: top;
    }
    /* ------------ SEC_LIGHTING ------------ */
    #hd .hd-lightingbox {
        margin-left: auto;
        margin-top: 20px;
        padding-bottom: 100%;
    }
    #hd .hd-lightingbox p {
        font-size: 14px;
    }
    #hd .hd-controls li {
        width: 33.3333%;
    }
    #hd .hd-sec-mode li .hd-title {
        margin-top: 0;
    }
    #hd .hd-sec-mode .scrollbox {
        padding-bottom: 100%;
    }
    /* ------------ optimization ------ */
    #hd .hd-sec-optimization .switch li {
        width: 40% !important;
    }
    #hd .hd-sec-optimization .switch li:nth-child(n+3) {
        width: 75% !important;
    }
    #hd .hd-sec-optimization .hd-frame {
        margin-top: 20px;
    }
    #hd .hd-sec-optimization .hd-content li h3 {
        margin: 0 auto 10px;
    }
    /* ------------ bios ------ */
    #hd .hd-sec-bios .switch li {
        width: 40% !important;
    }
    #hd .hd-sec-bios .switch li:nth-child(n+3) {
        width: 75% !important;
    }
    #hd .hd-sec-bios .hd-frame {
        margin-top: 20px;
    }
    #hd .hd-sec-bios .hd-content li h3 {
        margin: 0 auto 10px;
    }
    /* ------------ mode ------------- */
    #hd .hd-sec-mode .hd-frame {
        margin-top: 30px;
    }
    #hd .hd-sec-mode li .hd-title {
        margin-top: 0;
    }
    #hd .hd-sec-mode .scrollbox {
        padding-bottom: 100%;
    }
    #hd .hd-infoBar h4.txt-red {
        width: 100%;
        margin-top: 5px;
        padding-left: 10px;
    }
    #hd .hd-infoBar .bar {
        min-width: 150px;
    }
    #hd .hd-infoBar .bar.red {
        min-width: 100px;
    }
    #hd .hd-infoBar img {
        vertical-align: top;
    }
    #hd #sonic_studio li {
        width: 50%;
        padding-bottom: 100%;
    }
    #hd .hd-sec-supremefx p.p-width {
        max-width: 100%;
    }
    #hd .hd-sec-languard .fright li {
        left: 71%;
        font-size: 12px;
        font-weight: 400;
    }
    /* ------------ ramcache ---------- */
    #hd #ramcache-img figure {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%;
        margin: 0 auto;
        z-index: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #hd #ramcache-img .hd-txt {
        line-height: 1.1;
    }
    #hd #ramcache_switch_right {
        height: 50px;
        bottom: 30%;
    }
    #hd #transfer_time {
        width: 250px;
    }
    /* ------------ gf_network -------- */
    #hd #gf_slider .owl-prev,
    #hd #gf_slider .owl-next {
        width: 40px;
        height: 40px;
    }
    #hd #gf_slider .owl-dots {
        margin-bottom: 10px;
    }
    #hd .hd-sec-sonic .switch li {
        width: 40%;
        padding: 2px;
    }
    #hd .hd-sec-sonic .switch li h4 {
        font-size: 1em;
        line-height: 3;
    }
    #hd .hd-sec-sonic .switch li .small {
        font-size: 14px;
        line-height: 0;
	}
	
	 #hd #cooler-figure {
	 	position: relative;
	 	max-width: 300px;
	 	height: 0;
	 	padding-bottom: 300px;
	 	margin: 0 auto;
	 	top: 0;
	 	left: 0;
	 }
}

@media screen and (max-width: 375px) {
    #hd #kv .bg {
        height: 250px;
    }
    #hd #kv .imglogo {
        left: calc(50% - 73px);
        width: 28px;
    }
    /* ----------- cooler ------------- */
    #hd .hd-sec-cooler .hd-w1300>div {
        margin-left: 0;
    }
    #hd #cooler-content>li ul {
	   display: flex;
	   flex-wrap: wrap;
    }
    #hd #cooler-content>li ul li {
	  width: 50%;
    }
    #hd .hd-lightingbox h5:nth-of-type(1) {
        top: 76%;
        font-size: 12px;
    }
    #hd .hd-lightingbox h5:nth-of-type(2) {
        top: 84%;
        font-size: 12px;
    }
    #hd #build ul.switch_outlook {
        position: absolute;
        bottom: 0%;
    }
}

@media screen and (max-width: 400px) {
    #hd .twentytwenty-handle {
        margin-left: -2px;
    }
}

@media screen and (max-width: 320px) {
    #hd #build ul.switch_outlook {
        bottom: -6%;
    }
}