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

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

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

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

.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;
}

.section01 {
    background: #dbdbdb;
    background: -moz-linear-gradient(top, #fff 0, #5e5f5f 100%);
    background: -webkit-linear-gradient(top, #fff 0, #5e5f5f 100%);
    background: linear-gradient(to bottom, #fff 0, #5e5f5f 100%);
}

.section01 .banner_logo {
    width: 22%;
    max-width: 180px;
    left: 5%;
    top: 5%;
    position: absolute;
}

.section01 .logo {
    width: 24%;
    max-width: 277px;
    right: 29%;
    top: 85%;
    position: absolute;
}

.section01 .case {
    width: 88%;
    left: 5%;
    top: 9%;
    position: absolute;
}

.section01 .icon {
    width: 19%;
    right: 6%;
    top: 90%;
    max-width: 400px;
    position: absolute;
}

.section02 {
    background-color: #fccb02;
    color: #000;
}

.section03 {
    background-color: #67dbe4;
    color: #000;
}

.section03 .content {
    background-color: #4488f5;
    color: #fff;
    margin: 2rem 0 0;
    width: 100%;
    padding: 0.1rem 2rem 1rem;
}

.section03 .mobile,
.section04 .mobile {
    width: 80%;
    margin: 2rem auto 0;
}

.section03 .line {
    width: 60%;
    margin: 0 auto;
}

.section04 {
    background-color: #67dbe4;
    color: #000;
}

.section04 .btn {
    display: inline-block;
    color: #fff;
    background-color: #f89a1a;
    padding: .8rem 1.6rem;
    font-weight: 500;
    letter-spacing: .5px;
    font-size: 2rem;
}

.section04 .btn:hover {
    color: #fff;
    background-color: #333;
}

.section04 .fan_img {
    width: 50%;
    margin: 0 auto;
}

.section05 {
    background-color: #adcb4f;
    color: #000;
}

.section06 {
    background-color: #67dbe4;
    color: #000;
}

.section06 .package {
    width: 70%;
    margin: 0 auto;
}

.section06 .note {
    color: #007fff;
    font-weight: bold;
    width: 80%;
    margin: 2rem auto;
}

.section07 {
    background-color: #fdd100;
    color: #000;
}

.section07 .btn {
    display: inline-block;
    margin: 0.4rem;
    color: #fff;
    border-radius: 5rem;
    padding: 1rem 5rem;
    font-weight: 500;
    letter-spacing: .5px;
    font-size: 2rem;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007fff+0,87edff+50,0076ed+100 */
    background: #007fff;
    /* Old browsers */
    background: -moz-linear-gradient(left, #007fff 0%, #87edff 50%, #0076ed 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #007fff 0%, #87edff 50%, #0076ed 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #007fff 0%, #87edff 50%, #0076ed 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#007fff', endColorstr='#0076ed', GradientType=1);
    /* IE6-9 */
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    text-shadow: 2px 3px 5px #000000;
    width: 250px;
}

.section07 .app_box {
    width: 85%;
    margin: 0 auto;
}

.section07 .app_icon {
    width: 50%;
    max-width: 345px;
    margin: 0 auto;
}

.section09 {
    background-color: #e4c15c;
    color: #000;
}

.section10 .mobile {
    width: 90%;
    margin: 2rem auto 0;
}

.section10 .content {
    background-color: #fff46a;
    color: #000;
    width: 100%;
    padding: 0.1rem 2rem 1rem;
    margin: 0;
}

@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 .banner_logo {
        width: 13%;
        max-width: 180px;
        left: 5%;
        top: 5%;
    }
    .section01 .logo {
        width: 19%;
        max-width: 277px;
        right: 15%;
        top: 35%;
    }
    .section01 .case {
        width: 50%;
        left: 16%;
        top: 25%;
    }
    .section01 .icon {
        width: 12%;
        right: 19%;
        top: 64%;
        /* max-width: 400px; */
    }
    section.scroll_active .bg {
        opacity: 0.4;
    }
    .section02 {
        padding: 0;
    }
    .section02 .content {
        width: 50%;
        left: 23%;
        bottom: 5%;
        background-color: #fe9b00;
        color: #fff;
        padding: 0rem 2rem 2rem;
        margin: 0;
    }
    .section03 .case {
        width: 65%;
        top: unset;
        left: 38%;
        bottom: 0px;
    }
    .section03 .line {
        width: 28%;
        margin: 0 auto;
        position: absolute;
        top: 57%;
        left: 7%;
    }
    .section03 .content {
        width: 39%;
        top: 5%;
        right: unset;
        left: 2%;
        background-color: unset;
        color: #000;
    }
    .section04 .case {
        width: 36%;
        top: 3%;
        right: 12%;
    }
    .section04 .content {
        width: 45%;
        left: 6%;
        top: 9%;
        padding: 0 0 2rem 2rem;
        margin: 0;
    }
    .section04 .fan_img {
        width: 30%;
        margin: 0 auto;
    }
    @keyframes action_right {
        0% {
            opacity: 0;
            right: 14%;
        }
        80% {
            opacity: 1
        }
        100% {
            opacity: 0;
            right: 12%;
        }
    }
    @keyframes action_down {
        0% {
            opacity: 0;
            top: 3%;
        }
        80% {
            opacity: 1
        }
        100% {
            opacity: 0;
            top: 6%;
        }
    }
    .section04.scroll_active .action_right {
        -webkit-animation: action_right 2s linear infinite;
        animation: action_right 1.8s linear infinite;
    }
    .section04.scroll_active .action_down {
        -webkit-animation: action_down 2s linear infinite;
        animation: action_down 1.8s linear infinite;
    }
    .section05 .case {
        width: 60%;
        max-width: 1135px;
        top: 0;
        left: 0;
    }
    .section05 .content {
        width: 41%;
        top: 4%;
        right: 8%;
    }
    .section06 .case {
        width: 61%;
        max-width: 1827px;
        top: 0;
        left: 0;
    }
    .section06 .package_a,
    .section06 .package_b {
        position: absolute;
        width: 24%;
        top: 49%;
        right: 12%;
    }
    .section06.scroll_active .package_a {
        -webkit-transition-delay: 0.8s;
        transition-delay: 0.8s;
    }
    .section06.scroll_active .package_b {
        -webkit-transition-delay: 3.5s;
        transition-delay: 3.5s;
    }
    .section06 .note {
        position: absolute;
        width: 28%;
        right: 11%;
        top: 81%;
        -webkit-transition-delay: 2.3s;
        transition-delay: 2.3s;
    }
    .section06 .content {
        width: 46%;
        top: 2%;
        right: 2%;
        margin-bottom: 0;
    }
    .section07 .case {
        width: 60%;
        max-width: 1158px;
        top: 15%;
        left: 5%;
    }
    .section07 .content {
        width: 35%;
        bottom: 8%;
        right: 1%;
        margin-bottom: 0;
    }
    .section07 .btn {
        font-size: 3rem;
    }
    .section07 .pc_btn {
        position: absolute;
        top: 22%;
        right: 11%;
    }
    .section07 .pc_btn:hover {
        top: 24%;
    }
    .section09 .action_a,
    .section09 .action_b {
        width: 35%;
        left: 10.9%;
        bottom: 5%;
    }
    .section09 .action_b {
        position: absolute;
        opacity: 0;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .section09 .action_box {
        cursor: pointer;
    }
    .section09 .action_box:hover .action_b {
        opacity: 1;
    }
    .section09 .action_c {
        position: absolute;
        width: 4%;
        max-width: 75px;
        left: 42%;
        top: 38%;
        transform: rotate(337deg);
        -moz-transform: rotate(337deg);
        -webkit-transform: rotate(337deg);
        -o-transform: rotate(337deg);
        -ms-transform: rotate(337deg);
    }
    @keyframes action_c {
        0% {
            opacity: 0;
        }
        80% {
            opacity: 1
        }
        100% {
            opacity: 0;
        }
    }
    .section09.scroll_active .action_c {
        -webkit-animation: action_c 2s linear infinite;
        animation: action_c 1.8s linear infinite;
    }
    .section09 .content {
        background-color: unset;
        color: #fff;
        width: 41%;
        padding: 0;
        margin: 0;
        top: 11%;
        right: 7%;
    }
    .section10 .case {
        width: 44%;
        left: 5%;
        bottom: 0;
    }
    .section10 .content {
        background-color: unset;
        color: #000;
        width: 41%;
        padding: 0;
        top: 35%;
        right: 5%;
    }
}

@media (min-width: 1200px) {
    .section01 .icon {
        /* width: 12%; */
        right: 18%;
        top: 63%;
        /* max-width: 400px; */
    }
    .section03 .content {
        width: 35%;
        top: 21%;
        right: unset;
        left: 4%;
    }
    .section03 .line {
        top: 60%;
        left: 7%;
    }
    .section04 .content {
        top: 13%;
    }
    .section05 .content {
        width: 34%;
        top: 12%;
        right: 14%;
    }
    .section06 .content {
        width: 44%;
        top: 12%;
        right: 7%;
    }
    .section07 .content {
        width: 30%;
        bottom: 13%;
        right: 3%;
    }
    .section07 .pc_btn {
        top: 25%;
        right: 14%;
    }
    .section07 .pc_btn:hover {
        top: 24%;
    }
    .section09 .content {
        width: 31%;
        top: 26%;
        right: 16%;
    }
    .section10 .content {
        width: 35%;
        top: 50%;
        right: 10%;
    }
}

@media (min-width: 1400px) {
    .section07 .content {
        width: 30%;
        bottom: 21%;
        right: 3%;
    }
    .section07 .pc_btn {
        top: 29%;
        right: 18%;
    }
    .section07 .pc_btn:hover {
        top: 28%;
    }
}

@media (min-width: 1600px) {
    .section01 .icon {
        width: 12%;
        right: 17%;
        top: 58%;
        max-width: 400px;
    }
    .section04 .content {
        width: 43%;
        left: 6%;
        top: 17%;
        padding: 0 0 2rem 2rem;
        margin: 0;
    }
    .section05 .content {
        width: 32%;
        top: 15%;
        right: 14%;
    }
    .section06 .content {
        width: 31%;
        top: 18%;
        right: 9%;
    }
    .section06 .note {
        width: 28%;
        right: 11%;
        top: 79%;
    }
    .section07 .content {
        width: 27%;
        bottom: 31%;
        right: 3%;
    }
    .section07 .pc_btn {
        top: 30%;
        right: 20%;
    }
    .section07 .pc_btn:hover {
        top: 29%;
    }
}

@media (min-width: 1800px) {
    .section07 .content {
        width: 29%;
        bottom: 34%;
        right: 3%;
    }
    .section07 .pc_btn {
        top: 31%;
        right: 22%;
    }
    .section07 .pc_btn:hover {
        top: 30%;
    }
}