.section {
    color: #fff;
    position: relative
}

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

.product_overview .text-active {
    opacity: 0;
    -ms-transform: translate3d(0, 80px, 0);
    -webkit-transform: translate3d(0, 80px, 0);
    transform: translate3d(0, 80px, 0);
    -webkit-transition: 1.2s;
    transition: 1.2s
}

.product_overview .scroll_active .text-active {
    opacity: 1;
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s
}

.section .transition,
.section img {
    opacity: 0
}

.section.scroll_active .transition,
.section.scroll_active img {
    opacity: 1;
    -webkit-transition: .8s ease-in-out;
    transition: .8s ease-in-out
}

.section .fadin {
    opacity: 0;
    -ms-transform: translate3d(0, 80px, 0);
    -webkit-transform: translate3d(0, 80px, 0);
    transform: translate3d(0, 80px, 0);
    transition: 1.2s 0.3s!important;
    -webkit-transition-delay: 0.3s!important
}

.section.scroll_active .fadin {
    opacity: 1;
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.section .red-text {
    color: #fe0000
}

.section .mobile {
    display: block
}

.section .pc {
    display: none
}


/***********section01**********/

.section01 {
    background-color: #e2e2e2;
}


/***********section02**********/

.section02,
.section03,
.section04,
.section05,
.section06,
.section07,
.section08 {
    background-color: #000;
}


/***********section05**********/

.section05 {
    background-color: #000;
}

.section05 .tab {}

.section05 .tab-demo {
    /* padding: 20px; */
}

.section05 .title {
    text-align: center
}

.section05 .row .text {
    margin: 1rem auto 3rem;
}

.section05 .tab-title {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    flex-direction: row;
}

.section05 .tab-title li {
    padding: 10px;
    font-size: 2rem;
    list-style-type: none;
    width: 80%;
    text-align: center;
    margin: 0 auto
}

.section05 .tab-title li a {
    display: block;
    color: #fff;
    text-decoration: none
}

.section05 .tab-title li a {
    background-color: transparent;
    border: 1px solid #8d785a;
    border-radius: 5px;
    padding: .4em 1.2em;
    width: 100%
}

.section05 .tab-title li a:hover {
    color: #fff;
    background-color: transparent;
    border: 1px solid #ac9b84;
    border-radius: 5px;
    transform: translateY(-.3em);
    box-shadow: 0 0 10px 0 #ac9b84;
}

.section05 .tab-title li.active a {
    color: #000;
    background-color: #8f7859;
    border: 1px solid #8f7859;
    border-radius: 5px;
    /* filter: drop-shadow(0px 0px 3px #8f7859); */
}

@media (max-width: 956px) {
    .section05 .tab-title {
        flex-direction: column;
        align-items: center
    }
}

@media (max-width: 991.9px) {}

@media (min-width: 992px) {
    .section .pc {
        display: block
    }
    .section .mobile {
        display: none
    }
    .section .absolute {
        position: absolute;
    }
    /***********section01**********/
    .section01 .case {
        width: 46%;
        top: 15%;
        left: 5%;
    }
    .section01 .logo {
        width: 27%;
        right: 10%;
        top: 35%;
        max-width: 522px;
    }
    .section01 .icon {
        width: 23%;
        right: 13.5%;
        top: 53%;
        max-width: 335px;
    }
    /***********section02**********/
    .section02 .modular {
        width: 40%;
        top: 10%;
        left: 0;
    }
    .section02 .modular_line {
        width: 27%;
        top: 49%;
        left: 17.9%;
    }
    .section02.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
        }
    }
    .section02 .blue_text,
    .section02 .yellow_text,
    .section02 .magenta_text {
        text-align: left;
        font-weight: bold;
        font-size: 2rem;
    }
    .section02 .blue_text {
        color: #007ff7;
        top: 51%;
        left: 45%;
    }
    .section02 .yellow_text {
        color: #ffde49;
        top: 58%;
        left: 45%;
    }
    .section02 .yellow_text span {
        color: #fd0505;
    }
    .section02 .magenta_text {
        color: #f97fe8;
        top: 68.5%;
        left: 46%;
    }
    .section02 .icon_a {
        width: 30%;
        bottom: 9%;
        left: 17%;
    }
    .section02 .icon_b {
        width: 29%;
        bottom: 9%;
        left: 52%;
    }
    .section02 .content {
        width: 54%;
        right: 3%;
        top: 0%;
        text-align: left;
        text-shadow: 2px 3px 5px #000000;
    }
    /***********section03**********/
    .section03 .psu {
        width: 39%;
        right: 0;
        top: 0;
    }
    .section03 .zero_fan {
        width: 19%;
        left: 23%;
        bottom: 9%;
        -webkit-filter: drop-shadow(0px 0px 18px #fff));
        filter: drop-shadow(0px 0px 18px #fff);
    }
    /* .section03.scroll_active .zero_fan_act {
        animation: zero_fan_act 8s ease infinite;
    }
    @keyframes zero_fan_act {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    } */
    .section03 .content {
        width: 56%;
        left: 5%;
        top: 0%;
        text-align: left;
        text-shadow: 2px 3px 5px #000000;
    }
    /***********section04**********/
    .section04 .psu {
        width: 42%;
        left: 0;
        top: 5%;
    }
    .section04 .icon {
        width: 19%;
        right: 23%;
        bottom: 9%;
    }
    .section04 .content {
        width: 46%;
        right: 7%;
        top: 0%;
        text-align: left;
        text-shadow: 2px 3px 5px #000000;
    }
    /***********section05**********/
    .section05 .tab-inner {
        pointer-events: none
    }
    .section05 .title {
        margin-top: 5%
    }
    .section05 .tab {
        width: 60%;
        position: absolute;
        top: 9%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .section05 .content_one,
    .section05 .content_two {
        position: absolute;
    }
    .section05 .content_one {
        width: 50%;
        left: 7%;
        top: 32%;
    }
    .section05 .content_two {
        width: 50%;
        right: 7%;
        top: 32%;
    }
    .section05 .content_three {
        margin: 21rem auto 5rem;
        width: 60%;
    }
    .section05 .content_three .row {
        margin: 6rem auto 0;
        padding: 0;
        width: 60%;
    }
    /***********section06**********/
    .section06 .psu {
        width: 38%;
        left: 0;
        top: 0;
    }
    .section06 .icon {
        width: 34%;
        right: 12%;
        bottom: 9%;
    }
    .section06 .content {
        width: 44%;
        right: 12%;
        top: 2%;
        text-align: left;
        text-shadow: 2px 3px 5px #000000;
    }
    /***********section07**********/
    .section07 .psu_85 {
        width: 35%;
        left: 13%;
        top: 9%;
    }
    .section07 .psu_75 {
        width: 28%;
        right: 15%;
        top: 18%;
    }
    .section07 .content {
        width: 53%;
        right: 0;
        left: 0;
        bottom: 8%;
        text-shadow: 2px 3px 5px #000000;
    }
    /***********section08**********/
    .section08 .content {
        margin: 5rem auto;
    }
}

@media (min-width: 1200px) {
    .section02 .content {
        width: 46%;
        right: 11%;
        top: 6%;
    }
    .section03 .content {
        width: 45%;
        left: 8%;
        top: 0%;
    }
    .section04 .content {
        width: 42%;
        right: 10%;
        top: 6%;
    }
    .section05 .tab {
        width: 45%;
    }
    .section06 .content {
        width: 42%;
        right: 10%;
        top: 8%;
    }
    .section07 .content {
        bottom: 11%;
    }
}

@media (min-width: 1400px) {
    .section02 .content {
        top: 16%;
    }
    .section03 .content {
        width: 40%;
        left: 13%;
        top: 17%;
    }
    .section04 .content {
        top: 17%;
    }
    .section05 .tab {
        width: 45%;
    }
    .section06 .content {
        top: 19%;
    }
    .section07 .content {
        bottom: 17%;
    }
}