.section .pc,
.product_spec .pc {
    display: block;
}

.section .mobile,
.product_spec .mobile {
    display: none;
}

.overview_chopin-max .section {
    position: relative;
}

.section {
    background-color: #000000;
    color: #fff;
    position: relative;
    text-align: center;
}

.section04 {
    background-color: #3d3d3d;
    color: #fff;
}

.product_spec .spec_table td {
    text-align: left;
}

.product_color_list .btn_race:after {
    background: linear-gradient(90deg, #202125 50%, #61a1de 50%);
}

.product_color_list .btn_tropical:after {
    background: linear-gradient(90deg, #2bc678 50%, #ffde49 50%);
}

.section .content {
    margin-bottom: 5rem;
}

.power_text_hight {
    line-height: 88px;
}

.product_spec .spec_table th {
    text-align: left;
    width: 20%;
}

.section02 {
    /* b    ã„…ackground-image: url('../../../uploads/Product/gaming-power-supply/pii/pii_edm_mobile_p2.jpg'); */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.section02 .color_y1 {
    /* color: #fff700; */
}

.overview_slick {
    background-color: #000;
}

.product_spec .spec_table .text_center {
    text-align: center;
}

@media (max-width: 992px) {
    .section .mobile,
    .product_spec .mobile {
        display: block;
    }
    .section .pc,
    .product_spec .pc {
        display: none;
    }
}

@media (min-width: 992px) {
    .product_overview .scroll_active .product_img {
        opacity: 1;
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .section.scroll_active .logo,
    .section.scroll_active .list_title {
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }
    .section.scroll_active .icon {
        -webkit-transition-delay: .4s;
        transition-delay: .4s;
    }
    .section .content,
    .section .pc .product_img {
        position: absolute;
    }
    .section .content,
    .section .pc .product_img,
    {
        margin-bottom: 0;
    }
    .section01 .logo {
        width: 35%;
        /* max-width: 443px; */
        left: 54%;
        top: 24%;
    }
    .section01 .logo_b {
        width: 37%;
        max-width: 848px;
        left: 5%;
        bottom: 22%;
    }
    .section01 .logo_c {
        width: 21%;
        max-width: 371px;
        left: 34%;
        top: 25%;
    }
    .section01 .case {
        width: 43%;
        /* max-width: 663px; */
        top: 18%;
        left: 6%;
    }
    .section01 .icon {
        width: 25%;
        left: 12%;
        bottom: 0;
    }
    section.scroll_active .bg {
        opacity: 0.4;
    }
    .section02 .content {
        width: 60%;
        left: 5%;
        bottom: 1%;
        text-align: left;
        text-shadow: 2px 3px 5px #000000;
    }
    .section02 .flash_300inon {
        width: 21%;
        top: 7%;
        left: 26%;
    }
    .section02 .flash_300title {
        /* width: 12%; */
        /* max-width: 183px; */
        top: 48%;
        left: 31%;
        text-align: left;
        text-shadow: 1px 3px 2px #000000;
    }
    .section02 .flash_300 {
        width: 9%;
        top: 6%;
        left: 39%;
    }
    .section02 .flash_200inon {
        width: 18%;
        top: 16%;
        left: 6%;
    }
    .section02 .flash_200title {
        /* width: 18%; */
        /* max-width: 183px; */
        top: 48%;
        left: 11%;
        text-align: left;
        text-shadow: 1px 3px 2px #000000;
        /* text-shadow: 2px 3px 5px #4d4d4d; */
    }
    .section02 .flash_200 {
        width: 9%;
        top: 16%;
        left: 15%;
    }
    .section02.scroll_active .flash_200inon {
        animation: flash_200inon 2s ease infinite;
    }
    @keyframes flash_200inon {
        0% {
            opacity: 0;
            transform: translate(0, 0)
        }
        50% {
            opacity: 1
        }
        100% {
            transform: translate(0%, 0%);
            opacity: 0
        }
    }
    .section02.scroll_active .flash_300inon {
        animation: flash_300inon 2.6s ease infinite;
    }
    @keyframes flash_300inon {
        0% {
            opacity: 0;
            transform: translate(0, 0)
        }
        50% {
            opacity: 1
        }
        100% {
            transform: translate(0%, 0%);
            opacity: 0
        }
    }
    .section03 .content {
        width: 67%;
        right: 3%;
        top: 0%;
        text-align: left;
        text-shadow: 2px 3px 5px #000000;
    }
    .section03 .modular {
        width: 40%;
        top: 20%;
        left: 0;
    }
    .section03 .modular_line {
        width: 27%;
        top: 63%;
        left: 17.9%;
    }
    .section03.scroll_active .modular_line {
        animation: modular_line 2.6s ease infinite;
    }
    @keyframes modular_line {
        0% {
            opacity: 0;
            transform: translate(0, 0)
        }
        50% {
            opacity: 1
        }
        100% {
            transform: translate(0%, 0%);
            opacity: 0
        }
    }
    .section03 .blue_text,
    .yellow_text,
    .magenta_text {
        text-align: left;
        font-weight: bold;
        font-size: 2rem;
    }
    .section03 .blue_text {
        color: #007ff7;
        bottom: 28%;
        left: 45%;
    }
    .section03 .yellow_text {
        color: #ffde49;
        bottom: 17%;
        left: 45%;
    }
    .section03 .yellow_text span {
        color: #fd0505;
    }
    .section03 .magenta_text {
        color: #f97fe8;
        bottom: 9%;
        left: 46%;
    }
    .section04 .open_act {
        width: 17%;
        top: 12%;
        left: 11.9%;
    }
    .section04 .section03a,
    .section04 .section03b {
        position: relative;
    }
    .section04 .section03a .content {
        width: 60%;
        left: 5%;
        bottom: 1%;
        text-align: left;
        text-shadow: 2px 3px 5px #000000;
    }
    .section04 .section03b .content {
        top: 5%;
        width: 85%;
        left: 0;
        right: 0;
        text-align: center;
    }
    .section04 .section03b span {
        font-weight: bold;
        font-size: 1.2em
    }
    .section04 .section03b .note {
        font-weight: bold;
        font-size: 1.2em;
        max-width: 300px;
        width: 38%;
        background-color: #555;
        margin: 4% auto;
        padding: .5rem 0;
    }
    .section04 .section03b .warranty_icon {
        width: 35%;
        margin: auto;
    }
    .section04 .section03b .running {
        animation: fan_rotate 1.8s linear infinite;
    }
    @keyframes fan_rotate {
        0% {
            transform: rotate(0)
        }
        100% {
            transform: rotate(-360deg)
        }
    }
    .section05 .content {
        top: 21%;
        width: 48%;
        left: 8%;
        text-align: left;
    }
    .section06 .content {
        top: 5%;
        width: 85%;
        left: 0;
        right: 0;
        text-align: center;
    }
    .section07 .icon {
        width: 15%;
        top: 25%;
        left: 11.9%;
    }
    .section07 .content {
        top: 17%;
        width: 53%;
        left: 33%;
        text-align: left;
    }
    .section08 .content {
        top: 29%;
        width: 60%;
        left: 8%;
        text-align: left;
    }
    .section09 .content {
        margin: 0 auto;
        top: 0%;
        right: 0;
        left: 0;
        color: #000;
        width: 65%;
    }
    .section09 .row {
        margin: 0 auto;
        padding: 0;
        width: 55%;
    }
    .section09 .text {
        margin: 0 0 1em;
    }
    .section10 .content {
        width: 50%;
        top: 25%;
        left: 39%;
        text-align: left;
    }
    .section10 .icon {
        width: 30%;
        top: 12%;
        left: 10%;
    }
    .section11 {
        background-color: #363636;
    }
    .section11 .content {
        position: relative;
        width: 85%;
        margin: 0 auto;
        text-align: center;
    }
}

@media (min-width: 1200px) {}

@media (min-width: 1300px) {
    .section01 .logo {
        /* width: 40%; */
        /* max-width: 867px; */
        /* left: 50%; */
        /* top: 15%; */
    }
    .section01 .logo_b {
        width: 34%;
        max-width: 848px;
        left: 9%;
        bottom: 32%;
    }
    .section01 .logo_c {
        width: 17%;
        max-width: 371px;
        left: 34%;
        top: 27%;
    }
    .section01 .case {
        /* width: 52%; */
        /* max-width: 663px; */
        /* top: 37%; */
        /* left: 8%; */
    }
    .section01 .icon {
        width: 25%;
        left: 13%;
        bottom: 8%;
    }
    .section03 .content {
        width: 43%;
        right: 8%;
        top: 14%;
    }
    .section04 .section03b .content {
        top: 15%;
    }
    .section09 .content {
        margin: 0 auto;
        top: 6%;
        /* right: 0; */
        /* left: 0; */
        /* color: #000; */
        width: 75%;
    }
}

@media (min-width: 1600px) {
    .section02 .content {
        width: 50%;
        left: 5%;
        bottom: 6%;
    }
    .section02 .flash_300inon {
        width: 21%;
        top: 13%;
        left: 26%;
    }
    .section02 .flash_300title {
        /* width: 100%; */
        /* max-width: 183px; */
        top: 55%;
        left: 31%;
        font-size: 2rem;
    }
    .section02 .flash_300 {
        width: 9%;
        top: 16%;
        left: 39%;
    }
    .section02 .flash_200inon {
        width: 17%;
        top: 26%;
        left: 6%;
    }
    .section02 .flash_200title {
        /* width: 12%; */
        /* max-width: 183px; */
        top: 56%;
        left: 10%;
        font-size: 2rem;
    }
    .section02 .flash_200 {
        width: 9%;
        top: 28%;
        left: 15%;
    }
    .section03 .blue_text {
        bottom: 29.5%;
        left: 44.5%;
    }
    .section03 .yellow_text {
        bottom: 19%;
        left: 44%;
    }
    .section03 .magenta_text {
        bottom: 11%;
        left: 45.5%;
    }
    .section04 .open_act {
        width: 17%;
        top: 19%;
        left: 16.9%;
    }
    .section04 .section03a .content {
        width: 42%;
        left: 13%;
        bottom: 11%;
    }
    .section04 .section03b .content {
        top: 24%;
        width: 85%;
        left: 0;
        right: 0;
    }
    .section04 .section03b .warranty_icon {
        width: 35%;
        margin: auto;
    }
    .section04 .section03b .description {
        width: 61%;
        margin: 4% auto;
    }
    .section04 .section03b .note {
        margin: 2% auto;
        padding: 0.5rem 0;
    }
    .section05 .content {
        top: 39%;
        width: 34%;
        left: 11%;
        text-align: left;
    }
    .section06 .content {
        top: 5%;
        width: 85%;
        left: 0;
        right: 0;
        text-align: center;
    }
    .section07 .icon {
        width: 10%;
        top: 26%;
        left: 18.9%;
    }
    .section07 .content {
        top: 27%;
        width: 53%;
        left: 33%;
        text-align: left;
    }
    .section08 .content {
        top: 35%;
        width: 33%;
        left: 15%;
        text-align: left;
    }
    .section09 .content {
        margin: 0 auto;
        top: 13%;
        right: 0;
        left: 0;
        color: #000;
        width: 65%;
    }
    .section09 .row {
        margin: 0 auto;
        padding: 0;
        width: 70%;
    }
    .section09 .text {
        margin: 0 0 1em;
    }
    .section10 .content {
        width: 50%;
        top: 41%;
        left: 39%;
        text-align: left;
    }
    .section10 .icon {
        width: 23%;
        top: 23%;
        left: 16%;
    }
}

@media (min-width: 1700px) {
    .section02 .content {
        width: 50%;
        left: 5%;
        bottom: 6%;
    }
    .section02 .flash_300inon {
        /* width: 12%; */
        /* top: 16%; */
        /* left: 26%; */
    }
    .section02 .flash_300title {
        /* width: 12%; */
        /* max-width: 183px; */
        /* top: 61%; */
        /* left: 31%; */
    }
    .section02 .flash_300 {
        width: 9%;
        top: 16%;
        left: 39%;
    }
    .section02 .flash_200inon {
        /* width: 10%; */
        /* top: 31%; */
        /* left: 6%; */
    }
    .section02 .flash_200title {
        /* width: 12%; */
        /* max-width: 183px; */
        /* top: 61%; */
        /* left: 11%; */
    }
    .section02 .flash_200 {
        width: 9%;
        top: 28%;
        left: 15%;
    }
    .section03 .blue_text {
        bottom: 29%;
        left: 44.5%;
    }
    .section03 .yellow_text {
        bottom: 19%;
        left: 44%;
    }
    .section03 .magenta_text {
        bottom: 10.5%;
        left: 45.5%;
    }
}