﻿#GTX1060 {
    background: url("../images/gtx1060a_1920.jpg") center 0 no-repeat;
    min-height: 776px;
}

#GTX1060 .frame {
    padding-top: 590px;
    margin: 0 auto;
    width: 1105px;
}

#GTX1060_Chart {
    background: url("../images/gtx1060b_1920.jpg") center 0 no-repeat;
    height: 343px;
}

@media screen and (max-width: 1366px) {
    #GTX1060 {
        background: url("../images/gtx1060a_1366.jpg") center 0 no-repeat;
        min-height: 556px;
    }
    #GTX1060 .frame {
        padding-top: 450px;
        width: 720px;
    }
    #GTX1060_Chart {
        background: url("../images/gtx1060b_1366.jpg") center 0 no-repeat;
        height: 286px;
    }
}

@media screen and (max-width: 960px) {
    #GTX1060 {
        background: url("../images/gtx1060a_960.jpg") center 0 no-repeat;
        min-height: 557px;
    }
    #GTX1060 .frame {
        padding-top: 443px;
        width: 580px;
    }
    #GTX1060_Chart {
        background: url("../images/gtx1060b_960.jpg") center 0 no-repeat;
        height: 255px;
    }
    #GTX1060 h2 {
        width: 470px;
    }
}

@media screen and (max-width: 640px) {
    #GTX1060 {
        background: url("../images/gtx1060a_640.jpg") center 0 no-repeat;
        min-height: 353px;
    }
    #GTX1060 .frame {
        padding-top: 344px;
        width: auto;
    }
    #GTX1060 h2 {
        width: auto;
    }
    #GTX1060_Chart {
        background: url("../images/gtx1060b_640.jpg") center 0 no-repeat;
        height: 501px;
    }
}

#NVrule {
    background: #0d0d0d;
    padding: 50px 0;
    color: #818181;
}

#NVrule .frame {
    padding: 0 130px 0;
    font-size: 18px;
    line-height: 24px;
    margin: 0 auto;
}

#NVrule .frame .title {
    color: #fff;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

#NVrule .frame .content {
    padding: 5px 10px 0;
    margin-bottom: 30px;
}

.nrule {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nrule li {
    margin-bottom: 25px;
}

.nrule li:after {
    content: '';
    display: table;
    clear: both;
}

.nbox {
    width: 830px;
    float: right;
}

.ntitle {
    color: #fff;
    font-weight: bold;
}

@media screen and (max-width: 1366px) {
    #NVrule .frame {
        padding: 0 40px;
        font-size: 16px;
    }
    .nbox {
        width: 610px;
    }
}

@media screen and (max-width: 960px) {
    #NVrule {
        padding: 30px 0 10px;
    }
    #NVrule .frame {
        padding: 0 30px;
    }
    .nbox {
        width: 312px;
    }
}

@media screen and (max-width: 640px) {
    #NVrule .frame {
        padding: 0 10px;
        font-size: 14px;
        line-height: 18px;
    }
    #NVrule .frame .title {
        font-size: 18px;
    }
    #NVrule .frame .content {
        padding: 5px 0 0;
    }
    .nbox {
        width: auto;
        margin-bottom: 10px;
    }
    .nrule li {
        margin-bottom: 10px;
        padding: 0 10px;
    }
    .nrule li img {
        width: 100%;
    }
}

#oc {
    background: url("../images/oc_1920.jpg") center 0 no-repeat;
    height: 1081px;
}

#oc .frame {
    padding-top: 100px;
    margin: 0 auto;
    width: 1105px;
}

@media screen and (max-width: 1366px) {
    #oc {
        background: url("../images/oc_1366.jpg") center bottom no-repeat;
        height: 806px;
    }
    #oc .frame {
        padding-top: 50px;
        width: 770px;
    }
}

@media screen and (max-width: 960px) {
    #oc {
        background-image: url("../images/oc_960.jpg");
        height: 706px;
    }
    #oc .frame {
        width: 580px;
        padding-top: 80px;
    }
}

@media screen and (max-width: 640px) {
    #oc {
        background-image: url("../images/oc_640.jpg");
        height: 651px;
    }
    #oc .frame {
        width: auto;
    }
}

#QHD {
    background: url(../images/QHD-bg.jpg) center -332px no-repeat;
    height: 650px;
}

#QHD .frame {
    margin: 0 auto;
    width: 1075px;
    padding-top: 70px;
}

#QHD .qhd_img {
    position: absolute;
    left: 790px;
    top: 256px;
}

@media screen and (max-width: 1366px) {
    #QHD {
        background: url(../images/QHD-bg-1600.jpg) center -290px no-repeat;
        height: 510px;
    }
    #QHD .frame {
        padding-top: 50px;
        width: 770px;
    }
    #QHD .qhd_img {
        left: 490px;
        top: 196px;
    }
}

@media screen and (max-width: 960px) {
    #QHD {
        background: url("../images/qhd_960.jpg") center bottom no-repeat;
        height: 420px;
    }
    #QHD .frame {
        width: 580px;
    }
    #QHD img {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    #QHD {
        background-image: url("../images/qhd_640.jpg");
        height: 500px;
    }
    #QHD .frame {
        width: auto;
    }
}

#IGZO {
    background: url("../images/IGZO-bg.jpg") center 40% no-repeat;
    height: 650px;
}

#IGZO .frame {
    padding-top: 100px;
    margin: 0 auto;
    width: 1105px;
}

@media screen and (max-width: 1366px) {
    #IGZO {
        background: url("../images/IGZO-bg-1700.jpg") center -377px no-repeat;
        height: 506px;
    }
    #IGZO .frame {
        padding-top: 50px;
        width: 770px;
    }
}

@media screen and (max-width: 960px) {
    #IGZO {
        background-image: url(../images/igzo_960.jpg);
        height: 410px;
        background-position: center bottom;
    }
    #IGZO .frame {
        width: 580px;
    }
}

@media screen and (max-width: 640px) {
    #IGZO {
        background: url("../images/igzo_640.jpg") center bottom no-repeat;
        height: 648px;
    }
    #IGZO .frame {
        width: auto;
    }
}

#WideView {
    background: url(../images/wideview-bg.jpg) center 48% no-repeat;
    height: 700px;
}

#WideView .frame {
    margin: 0 auto;
    width: 1105px;
    padding-top: 70px;
}

@media screen and (max-width: 1366px) {
    #WideView {
        background-image: url(../images/wideview-bg-1700.jpg);
        height: 570px;
    }
    #WideView .frame {
        padding-top: 50px;
        width: 770px;
    }
}

@media screen and (max-width: 960px) {
    #WideView {
        background: url("../images/wideview_960.jpg") center bottom no-repeat;
        height: 510px;
    }
    #WideView .frame {
        width: 580px;
    }
}

@media screen and (max-width: 640px) {
    #WideView {
        background: url("../images/wideview_640.jpg") center bottom no-repeat;
        height: 500px;
    }
    #WideView .frame {
        width: auto;
    }
}

#m2_ssd {
    background: url(../images/ssd_1920.jpg) center bottom no-repeat;
    height: 834px;
}

#m2_ssd .frame {
    width: 1100px;
    margin: 0 auto;
    padding-top: 100px;
}

@media screen and (max-width: 1366px) {
    #m2_ssd {
        background-image: url(../images/ssd_1366.jpg);
        height: 700px;
    }
    #m2_ssd .frame {
        width: 870px;
        padding-top: 72px;
    }
}

@media screen and (max-width: 960px) {
    #m2_ssd {
        background-image: url(../images/ssd_960.jpg);
        height: 606px;
    }
    #m2_ssd .frame {
        width: 580px;
        padding-top: 122px;
    }
}

@media screen and (max-width: 640px) {
    #m2_ssd {
        background-image: url(../images/ssd_640.jpg);
        height: 750px;
    }
    #m2_ssd .frame {
        width: auto;
        padding-top: 60px;
    }
}

#ddr4 {
    background: url(../images/ddr4_1920.jpg) center bottom no-repeat;
    height: 723px;
}

#ddr4 .frame {
    width: 1100px;
    margin: 0 auto;
    padding-top: 60px;
}

@media screen and (max-width: 1366px) {
    #ddr4 {
        background-image: url(../images/ddr4_1366.jpg);
        height: 544px;
    }
    #ddr4 .frame {
        width: 890px;
        padding-top: 40px;
    }
}

@media screen and (max-width: 960px) {
    #ddr4 {
        background-image: url(../images/ddr4_960.jpg);
        height: 636px;
    }
    #ddr4 .frame {
        width: 560px;
        padding-top: 40px;
    }
}

@media screen and (max-width: 640px) {
    #ddr4 {
        background-image: url(../images/ddr4_640.jpg);
        height: 606px;
    }
    #ddr4 .frame {
        width: auto;
        padding-top: 0;
    }
}

#hdmi20 {
    background: url(../images/hdmi_1920.jpg) center bottom no-repeat;
    height: 903px;
}

#hdmi20 .frame {
    position: absolute;
    left: 20px;
    top: 140px;
    width: 555px;
}

@media screen and (max-width: 1366px) {
    #hdmi20 {
        background-image: url(../images/hdmi_1366.jpg);
        height: 710px;
        background-position: center 70px;
    }
    #hdmi20 .frame {
        left: 0px;
        top: 90px;
        width: 365px;
    }
}

@media screen and (max-width: 960px) {
    #hdmi20 {
        background-image: url(../images/hdmi_960.jpg);
        height: 775px;
    }
    #hdmi20 .frame {
        left: auto;
        top: auto;
        width: 555px;
        margin: 0 auto;
        position: relative;
        padding-top: 61px;
    }
}

@media screen and (max-width: 640px) {
    #hdmi20 {
        background-image: url(../images/hdmi_640.jpg);
        height: 828px;
    }
    #hdmi20 .frame {
        width: auto;
        padding-top: 40px;
    }
}

#usb31 {
    background: url(../images/usb_1920.jpg) center bottom no-repeat;
    height: 724px;
}

#usb31 .frame {
    width: 1100px;
    margin: 0 auto;
    padding-top: 90px;
}

@media screen and (max-width: 1366px) {
    #usb31 {
        background-image: url(../images/usb_1366.jpg);
        height: 556px;
    }
    #usb31 .frame {
        width: 810px;
        padding-top: 60px;
    }
}

@media screen and (max-width: 960px) {
    #usb31 {
        background-image: url(../images/usb_960.jpg);
        height: 544px;
    }
    #usb31 .frame {
        width: 570px;
        padding-top: 80px;
    }
}

@media screen and (max-width: 640px) {
    #usb31 {
        background-image: url(../images/usb_640.jpg);
        height: 621px;
    }
    #usb31 .frame {
        width: auto;
        padding-top: 20px;
    }
}

#thin {
    background: url(../images/thin_1920.jpg) 70% 40% no-repeat;
    height: 600px;
}

#thin .frame {
    position: absolute;
    left: 70px;
    top: 140px;
    width: 600px;
}

@media screen and (max-width: 1366px) {
    #thin .frame {
        left: 30px;
        top: 140px;
        width: 370px;
    }
}

@media screen and (max-width: 960px) {
    #thin {
        background: url(../images/thin_960.jpg) 70% 25% no-repeat;
        height: 520px;
    }
    #thin .frame {
        left: auto;
        top: auto;
        width: 560px;
        margin: 0 auto;
        position: relative;
        padding-top: 40px;
    }
}

@media screen and (max-width: 640px) {
    #thin {
        background: url(../images/thin_640.jpg) center bottom no-repeat;
        height: 646px;
    }
    #thin .frame {
        left: auto;
        top: auto;
        width: auto;
        margin: 0 auto;
        position: relative;
        padding-top: 40px;
    }
}

#design {
    background: url("../images/design_1920.jpg") center 0 no-repeat;
    height: 829px;
}

#design .frame {
    margin: 0 auto;
    width: 1105px;
    padding-top: 80px;
}

@media screen and (max-width: 1366px) {
    #design {
        background: url("../images/design_1366.jpg") center bottom no-repeat;
        height: 602px;
    }
    #design .frame {
        padding-top: 50px;
        width: 770px;
    }
}

@media screen and (max-width: 960px) {
    #design {
        background-image: url("../images/design_960.jpg");
        height: 504px;
    }
    #design .frame {
        width: 580px;
        padding-top: 50px;
    }
}

@media screen and (max-width: 640px) {
    #design {
        background-image: url("../images/design_640.jpg");
        height: 480px;
    }
    #design .frame {
        width: auto;
        padding-top: 0px;
    }
}

#batterylife {
    background: url("../images/Battrey_1920.jpg") center 0 no-repeat;
    height: 900px;
}

#batterylife .frame {
    margin-left: 750px;
    width: 505px;
    padding-top: 150px;
}

#batterylife .frame h3 {
    color: #000;
}

@media screen and (max-width: 1366px) {
    #batterylife {
        background: url("../images/Battrey_1366.jpg") center bottom no-repeat;
        height: 652px;
    }
    #batterylife .frame {
        margin-left: 520px;
        padding-top: 110px;
        width: 425px;
    }
}

@media screen and (max-width: 960px) {
    #batterylife {
        background-image: url("../images/Battrey_960.jpg");
        height: 1000px;
    }
    #batterylife .frame {
        margin: 0 auto;
        width: 580px;
        padding-top: 590px;
    }
    #batterylife .frame h3 {
        color: #ddd;
    }
}

@media screen and (max-width: 640px) {
    #batterylife {
        background: url(../images/Battrey_640.jpg) center center;
        height: 790px;
    }
    #batterylife .frame {
        width: auto;
        padding-top: 330px;
    }
}

#adapter {
    background: url(../images/adapter_1920.jpg) 50% 40% no-repeat;
    height: 550px;
}

#adapter .frame {
    position: absolute;
    left: 890px;
    top: 80px;
    width: 445px;
}

@media screen and (max-width: 1366px) {
    #adapter {
        background-image: url(../images/adapter_1366.jpg);
        height: 450px;
    }
    #adapter .frame {
        left: 585px;
        top: 60px;
        width: 370px;
    }
}

@media screen and (max-width: 960px) {
    #adapter {
        background: url(../images/adapter_960.jpg) center 0 no-repeat;
        height: 410px;
    }
    #adapter .frame {
        width: 240px;
        left: 395px;
        top: 40px;
    }
}

@media screen and (max-width: 640px) {
    #adapter {
        background: url(../images/adapter_640.jpg) center bottom no-repeat;
        height: 520px;
    }
    #adapter .frame {
        width: auto;
        padding-top: 40px;
        position: relative;
        left: auto;
        top: auto;
    }
}

#macrokey {
    background: url("../images/macrokey_1920.jpg") center center no-repeat;
    height: 629px;
}

#macrokey .frame {
    padding-top: 100px;
    margin-left: 60px;
    width: 600px;
}

.marcrokey_img {
    margin-top: 50px;
    width: 300px;
}

@media screen and (max-width: 1366px) {
    #macrokey {
        background: url("../images/macrokey_1366.jpg") center bottom no-repeat;
        height: 463px;
    }
    #macrokey .frame {
        padding-top: 60px;
        margin-left: 30px;
        width: 430px;
    }
}

@media screen and (max-width: 960px) {
    #macrokey {
        background-image: url("../images/macrokey_960.jpg");
        height: 433px;
    }
    #macrokey .frame {
        width: 370px;
        margin-left: 20px;
    }
    .marcrokey_img {
        margin-top: 40px;
        width: 260px;
    }
}

@media screen and (max-width: 640px) {
    #macrokey {
        background-image: url("../images/macrokey_640.jpg");
        height: 680px;
    }
    #macrokey .frame {
        width: auto;
    }
    .marcrokey_img {
        margin-top: 330px;
        width: 230px;
    }
}

#macrohub {
    background: url("../images/macrohub_1920.jpg") center 40% no-repeat;
    height: 900px;
}

#macrohub .frame {
    padding-top: 100px;
    margin: 0 auto;
    width: 1105px;
}

.marcrohub_img {
    text-align: center;
    padding-top: 40px;
}

.marcrohub_img img {
    max-width: 100%;
}

@media screen and (max-width: 1366px) {
    #macrohub {
        height: 720px;
    }
    #macrohub .frame {
        padding-top: 50px;
        width: 770px;
    }
    .marcrohub_img {
        padding-top: 20px;
    }
}

@media screen and (max-width: 960px) {
    #macrohub {
        height: 600px;
    }
    #macrohub .frame {
        width: 580px;
    }
}

@media screen and (max-width: 640px) {
    #macrohub {
        background-position: 20% 60%;
        height: 480px;
    }
    #macrohub .frame {
        width: auto;
    }
    #marcohub {
        background-position: 20% 60%;
    }
    .marcrohub_img {
        padding-top: 10px;
    }
}

#xsplit {
    background: url(../images/xsplit_1920.jpg) center bottom no-repeat;
    height: 750px;
}

#xsplit .frame {
    width: 1200px;
    margin: 0 auto;
    padding-top: 80px;
}

#xsplit .XSplit_MV {
    position: absolute;
    left: 808px;
    top: 280px;
}

@media screen and (max-width: 1366px) {
    #xsplit {
        background: url(../images/xsplit_1366.jpg) center bottom no-repeat;
        height: 640px;
    }
    #xsplit .frame {
        width: 850px;
        padding-top: 60px;
    }
    #xsplit .XSplit_MV {
        left: 578px;
        top: 270px;
    }
    #xsplit .MV2 {
        width: 370px;
        height: 208px;
    }
}

@media screen and (max-width: 960px) {
    #xsplit {
        background-image: url(../images/xsplit_960.jpg);
        height: 500px;
    }
    #xsplit .frame {
        width: 590px;
        padding-top: 41px;
    }
    #xsplit .XSplit_MV {
        left: 362px;
        top: 228px;
    }
    #xsplit .MV2 {
        width: 277px;
        height: 170px;
    }
}

@media screen and (max-width: 640px) {
    #xsplit {
        background: url(../images/xsplit_640.jpg) center 90px no-repeat;
        height: 830px;
    }
    #xsplit .frame {
        width: auto;
        padding-top: 40px;
    }
    #xsplit .XSplit_MV {
        left: 10px;
        top: 588px;
    }
    #xsplit .MV2 {
        width: 300px;
        height: 225px;
    }
}

#smartcam {
    background: url("../images/smartcam_1920.jpg") center bottom no-repeat;
    height: 961px;
}

#smartcam .frame {
    width: 1110px;
    margin: 0 auto;
    padding-top: 70px;
}

@media screen and (max-width: 1366px) {
    #smartcam {
        background-image: url("../images/smartcam_1366.jpg");
        height: 823px;
    }
    #smartcam .frame {
        width: 830px;
        padding-top: 90px;
    }
}

@media screen and (max-width: 960px) {
    #smartcam {
        background-image: url(../images/smartcam_960.jpg);
        height: 717px;
        background-position: center -40px;
    }
    #smartcam .frame {
        width: 518px;
        height: 221px;
    }
}

@media screen and (max-width: 640px) {
    #smartcam {
        background: url(../images/smartcam_640.jpg) center -210px no-repeat;
        height: 750px;
    }
    #smartcam .frame {
        width: auto;
        height: 220px;
        padding-top: 20px;
    }
}

#gauge {
    background: url(../images/gauge_1920.jpg) center 150px no-repeat;
    height: 803px;
}

#gauge .frame {
    width: 1160px;
    margin: 0 auto;
    padding-top: 90px;
}

@media screen and (max-width: 1366px) {
    #gauge {
        background-image: url(../images/gauge_1366.jpg);
        height: 700px;
    }
    #gauge .frame {
        width: 770px;
        padding-top: 70px;
    }
}

@media screen and (max-width: 960px) {
    #gauge {
        background-image: url(../images/gauge_960.jpg);
        height: 582px;
        background-position: center;
    }
    #gauge .frame {
        width: 580px;
        padding-top: 50px;
    }
}

@media screen and (max-width: 640px) {
    #gauge {
        background-image: url(../images/gauge_640.jpg);
        height: 550px;
        background-position: center 100px;
    }
    #gauge .frame {
        width: auto;
        padding-top: 30px;
    }
}

#Fan {
    background: url("../images/fan_1920.jpg") center center no-repeat;
    height: 750px;
}

#Fan .frame {
    padding-top: 30px;
    margin: 0 auto;
    width: 1105px;
}

@media screen and (max-width: 1366px) {
    #Fan {
        background: url("../images/fan_1366.jpg") 47.5% center no-repeat;
        height: 650px;
    }
    #Fan .frame {
        padding-top: 50px;
        width: 770px;
    }
}

@media screen and (max-width: 960px) {
    #Fan {
        background-position: 48.4% 55%;
        height: 570px;
    }
    #Fan .frame {
        width: 580px;
        padding-top: 30px;
    }
}

@media screen and (max-width: 640px) {
    #Fan {
        background: url(../images/fan_640.jpg) 48% 60px no-repeat;
        height: 557px;
    }
    #Fan .frame {
        width: auto;
    }
}

#audio {
    background: url(../images/audio_1920.jpg) center 0px no-repeat;
    height: 650px;
}

#audio .frame {
    width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
}

@media screen and (max-width: 1366px) {
    #audio {
        background: url(../images/audio_1366.jpg) center bottom no-repeat;
        height: 580px;
    }
    #audio .frame {
        width: 820px;
        padding-top: 40px;
    }
}

@media screen and (max-width: 960px) {
    #audio {
        background-image: url(../images/audio_960.jpg);
        height: 500px;
    }
    #audio .frame {
        width: 580px;
        padding-top: 30px;
    }
}

@media screen and (max-width: 640px) {
    #audio {
        background-image: url(../images/audio_640.jpg);
        height: 630px;
    }
    #audio .frame {
        width: auto;
        padding-top: 30px;
    }
}
