.section {
    position: relative;
    overflow: hidden
}

.section .pc {
    display: none
}

.section {
    background-color: #fbfbfb;
}

.section .content {
    margin-bottom: 3.2rem
}

.section01 .content {
    padding: 3.2rem 0;
    margin-bottom: 0
}

.section04 .content span {
    color: red;
    font-weight: 600;
}

.section01 .title {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0
}

.section01 .description {
    margin-bottom: 0
}

.overview_f5 .section05 .btn {
    display: inline-block;
    color: #fff;
    background-color: #294163;
    padding: 0.8rem 1.6rem;
    font-weight: 500;
    letter-spacing: .5px;
    font-size: 2rem;
    margin: 2rem 0 3rem;
}

@media (min-width: 992px) {
    .section .pc {
        display: block;
        position: relative
    }
    .section .mobile {
        display: none
    }
    .section .content {
        margin-bottom: 0
    }
    .overview_f5 .section .span {
        font-size: 1.5rem;
    }
    .section_banner {
        background: linear-gradient(to bottom, #4f4f4f 10%, #efefef 100%);
    }
    .section_banner .logo {
        position: absolute;
        right: 11%;
        width: 20%;
        top: 33%;
    }
    .section_banner .case {
        position: absolute;
        left: 3%;
        width: 55%;
        top: 13%;
    }
    .section01 {
        min-height: 100vh
    }
    .section01 .pc {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        background-color: #fbfbfb
    }
    .f5_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100%;
        -webkit-transition: top .5s;
        transition: top .5s
    }
    .f5_bg1 {
        background-color: #c4c1ff
    }
    .f5_bg2 {
        background-color: #ffa6a8
    }
    .f5_bg3 {
        background-color: #f0e5bb
    }
    .f5_bg4 {
        background-color: #cdf0ea
    }
    .f5_bg5 {
        background-color: #cdf0ea
    }
    .f5_bg.active {
        top: 0
    }
    .f5,
    .f5_outsides {
        width: 20%;
        position: absolute;
        top: 50%;
        left: 60%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
    .f5 {
        -webkit-transition: opacity .5s;
        transition: opacity .5s
    }
    .f5.active {
        opacity: 0
    }
    .f5_outsides {
        overflow: hidden
    }
    .f5_outside:nth-child(n+2) {
        position: absolute;
        top: 0;
        left: 0
    }
    .f5_outside {
        opacity: 0;
        -webkit-transition: .5s;
        transition: .5s
    }
    .f5_outside.active {
        opacity: 1
    }
    .section01 .content {
        width: 35%;
        position: absolute;
        top: 30%;
        left: 10%;
    }
    .section02 .content {
        width: 50%;
        position: absolute;
        top: -2%;
        left: 0;
        right: 0;
        color: #fff;
    }
    .section03 .content {
        width: 41%;
        position: absolute;
        top: 21%;
        right: 6%;
    }
    .section03 .tab-demo {
        position: absolute;
        width: 53%;
        left: 0;
        top: 0;
    }
    .section03 .tab {
        position: absolute;
        width: 76%;
        top: 75%;
        left: 105%;
    }
    .section03 .tab-title li {
        padding: 8px;
        list-style-type: none;
        font-size: 1.8rem;
    }
    .section03 .tab-title {
        display: flex;
    }
    .section03 .tab-title li a {
        padding: .4em 1.5em;
        background-color: #dfe4ea;
        border: 1px solid #041537;
        border-radius: 5px;
    }
    .section03 .tab-title li a:hover {
        color: #041537;
        background-color: transparent;
        border: 1px solid #051739;
        border-radius: 5px;
        transform: translateY(-.3em);
        box-shadow: 0 0 7px 3px #50546f;
    }
    .section03 .tab-title li.active a {
        color: #fff;
        background-color: #35435e;
        border: 1px solid #6e7596;
        border-radius: 5px;
        /* filter: drop-shadow(0px 0px 1px #ff0000) drop-shadow(0px 0px 3px #ff0000); */
    }
    .section03 .tab-inner,
    .section05 .tab-inner,
    .section06 .tab-inner {
        pointer-events: none
    }
    .section03 .tab-inner img:first-child {
        padding: 3%
    }
    .section03 .tab-inner img:nth-child(2) {
        padding: 18% 5% 0
    }
    .section04 .content {
        width: 35%;
        position: absolute;
        top: 13%;
        left: 10%;
        color: #fff;
    }
    .section04 .case {
        width: 50%;
        position: absolute;
        top: 7%;
        right: 0%;
    }
    .section05 .content {
        width: 35%;
        position: absolute;
        top: 21%;
        right: 6%;
    }
    .section05 .case {
        width: 48%;
        position: absolute;
        top: 7%;
        left: 4%;
    }
    .section05 .fan_text {
        position: absolute;
        font-size: 1.4rem;
    }
    .section05 .text_top {
        top: 1%;
        left: 18%;
        width: 40%;
    }
    .section05 .text_right {
        bottom: 20%;
        left: 3%;
        width: 8%;
    }
    .section05 .text_left {
        bottom: 18%;
        left: 46%;
        width: 16%;
    }
    .section05 .text_bottom {
        bottom: 0%;
        left: 18%;
        width: 25%;
    }
    .section05 .gpu {
        bottom: 13%;
        left: 37%;
        width: 250px;
        text-align: center;
        padding: 2px;
        color: #020202;
        background-color: #ddce16;
    }
    .overview_f5 .section05 .btn {
        /* display: inline-block; */
        /* color: #fff; */
        /* background-color: #294163; */
        /* padding: .8rem 1.6rem; */
        /* font-weight: 500; */
        /* letter-spacing: .5px; */
        /* font-size: 2rem; */
        margin: 2rem 0 1rem;
    }
    .overview_f5 .section05 .btn:hover {
        color: #fff;
        background-color: #333;
    }
    .section06 .content_title {
        width: 35%;
        position: absolute;
        top: 2%;
        left: 0%;
    }
    .section06 .content_a {
        width: 22%;
        position: absolute;
        top: 16%;
        left: 4%;
    }
    .section06 .content_b {
        width: 13%;
        position: absolute;
        top: 16%;
        left: 49.5%;
    }
    .section06 .content_c {
        width: 23%;
        position: absolute;
        top: 16%;
        right: 0%;
    }
    .section06 .span {
        width: 28%;
        position: absolute;
        bottom: 1%;
        right: 7%;
    }
}

@media (min-width: 1300px) {
    .section02 .content {
        width: 50%;
        top: 5%;
    }
    .section03 .tab {
        width: 82%;
        top: 57%;
        left: 110%;
    }
    .section04 .content {
        width: 40%;
        top: 24%;
        left: 11%;
    }
    .section05 .content {
        width: 42%;
        top: 32%;
        right: 4%;
    }
    .section05 .text_top {
        top: 2%;
        left: 20%;
        width: 40%;
    }
    .section05 .text_right {
        bottom: 20%;
        left: 3%;
    }
    .section05 .text_left {
        bottom: 18%;
        left: 46%;
    }
    .section05 .text_bottom {
        bottom: 0%;
        left: 18%;
        width: 25%;
    }
    .section05 .gpu {
        bottom: 13%;
        left: 37%;
    }
}

@media (min-width: 1450px) {
    .section01 .content {
        width: 33%;
        top: 35%;
        left: 14%;
    }
    .section02 .content {
        width: 50%;
        top: 5%;
    }
    .section03 .content {
        width: 35%;
        top: 34%;
        right: 10%;
    }
    .section03 .tab {
        left: 115%;
        top: 59%;
        width: 82%;
    }
    .section04 .content {
        width: 33%;
        top: 34%;
        left: 15%;
    }
    .section05 .content {
        width: 36%;
        top: 35%;
        right: 9%;
    }
    .section05 .text_top {
        top: 5%;
        left: 22%;
        width: 15%;
    }
    .section05 .text_right {
        bottom: 30%;
        left: 4%;
    }
    .section05 .text_left {
        bottom: 25%;
        left: 46%;
    }
    .section05 .text_bottom {
        bottom: 3%;
        left: 22%;
    }
    .section05 .gpu {
        bottom: 16%;
        left: 37%;
    }
    .section06 .content_title {
        width: 35%;
        left: 0%;
    }
    .section06 .content_a {
        width: 22%;
        top: 18.5%;
        left: 8%;
    }
    .section06 .content_b {
        width: 13%;
        top: 18.5%;
        left: 48%;
    }
    .section06 .content_c {
        width: 23%;
        top: 18.5%;
        right: 4%;
    }
    .section06 .span {
        width: 28%;
        bottom: 1%;
        right: 7%;
    }
}

@media (min-width: 1600px) {
    .section03 .content {
        width: 35%;
        top: 31%;
        right: 10%;
    }
    .section03 .tab {
        left: 115%;
        top: 59%;
        width: 82%;
    }
    .section06 .span {
        bottom: 2%;
        right: 18%;
        width: 15%;
    }
    .section05 .gpu {
        bottom: 20%;
        left: 46%;
    }
}