/* @import url("/static/fonts/nanum_myeongjo/NanumMyeongjo.css");@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");html {
    font-size: 12px
} */

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}


@media screen and (min-width: 360px) {
    html {
        font-size:14px
    }
}

@media screen and (min-width: 400px) {
    html {
        font-size:16px
    }
}

@media screen and (min-width: 430px) {
    html {
        font-size:16px
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size:16px
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size:16px
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size:16px
    }
}

::-webkit-scrollbar {
    width: rem(6px);
    height: rem(6px)
}

@media screen and (min-width: 1200px) {
    ::-webkit-scrollbar {
        width:10px;
        height: 10px
    }
}

::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 0
}

::-webkit-scrollbar-thumb:hover {
    background: #888888
}

::-webkit-scrollbar-track {
    background: #eeeeee;
    border-radius: 0
}

.radial-progress {
    background-color: transparent;
    border-radius: 9999px;
    box-sizing: content-box;
    display: inline-grid;
    height: var(--size);
    place-content: center;
    position: relative;
    vertical-align: middle;
    width: var(--size);
    --value: 0;
    --size: 5rem;
    --thickness: calc(var(--size) / 10)
}

.radial-progress::-moz-progress-bar {
    -moz-appearance: none;
    appearance: none;
    background-color: transparent
}

.radial-progress::-webkit-progress-bar,.radial-progress::-webkit-progress-value {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent
}

.radial-progress:after,.radial-progress:before {
    border-radius: 9999px;
    content: "";
    position: absolute
}

.radial-progress:before {
    background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat,conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
    inset: 0;
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)));
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)))
}

.radial-progress:after {
    background-color: currentColor;
    inset: calc(50% - var(--thickness) / 2);
    transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%))
}

.container {
    min-height: auto
}

.container>section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.container>section .inner {
    width: 87.5%;
    height: 100%;
    min-height: 50rem;
    margin: auto;
    padding: 0 0 5rem 0
}

.container>section .inner .inner-box {
    position: relative;
    width: 100%;
    height: 100%
}

.container>section .inner .inner-box .txt-box h3 {
    word-break: keep-all;
    font-family: "Nanum Myeongjo", serif;
    font-style: normal;
    letter-spacing: -0.82px;
    color: #000;
    font-size: 1.7083333333rem;
    line-height: 1.5;
    font-weight: 700
}

@media screen and (min-width: 1200px) {
    .container>section .inner .inner-box .txt-box h3 {
        color:#000;
        font-size: 40px;
        line-height: 60px;
        font-weight: 700
    }
}

.container>section .inner .inner-box .txt-box p {
    word-break: keep-all;
    margin-top: 1rem;
    color: #444;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500
}

@media screen and (min-width: 1200px) {
    .container>section .inner .inner-box .txt-box p {
        color:#444;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 500;
        margin-top: 24px
    }
}

.container>section .inner .inner-box .txt-box .btn-row {
    margin-top: 2.5rem
}

@media screen and (min-width: 1200px) {
    .container>section .inner .inner-box .txt-box .btn-row {
        margin-top:64px
    }
}

.container>section .inner .inner-box .vdo-box {
    position: relative;
    width: 100%
}

.container>section .inner .inner-box .img-box picture {
    display: inline-block
}

.container>section .inner.full {
    width: 100%;
    height: 100%
}

.container>section .inner.full .full-inner {
    width: 87.5%;
    height: 100%;
    margin: auto
}

.container>section .inner.full .full-inner .inner-box {
    position: relative;
    width: 100%;
    height: 100%
}

.container>section .inner br.pc {
    display: none !important
}

.container>section .inner br.mo {
    display: none !important
}

@media screen and (min-width: 1200px) {
    .container>section .inner {
        max-width:1440px;
        min-width: 1100px;
        padding: 0;
        height: 100%;
        min-height: 800px
    }

    .container>section .inner.full {
        width: 100%;
        max-width: 100%
    }

    .container>section .inner.full .full-inner {
        width: 87.5%;
        max-width: 1580px;
        min-width: 1100px
    }

    .container>section .inner br.pc {
        display: block !important
    }

    .container>section .inner br.mo {
        display: none !important
    }
}

@media screen and (min-width: 1440px) {
    .container>section .inner {
        width:100%
    }
}

.container .slide1 {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%
}

.container .slide1 .bg-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding-top: 4.1666666667rem
}

@media screen and (min-width: 1200px) {
    .container .slide1 .bg-video {
        padding-top:0;
        height: 80vh
    }
}

.container .slide1 .main_movie_slide {
    width: 100%;
    height: 100%
}

.container .slide1 .main_movie_slide .swiper-slide {
    opacity: 1
}

.container .slide1 .main_movie_slide .swiper-slide .vbg_common {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.container .slide1 .main_movie_slide .swiper-slide .vbg_img {
    width: 100%
}

@media screen and (min-width: 1200px) {
    .container .slide1 .main_movie_slide .swiper-slide .vbg_img {
        display:none
    }
}

.container .slide1 .main_movie_slide .seek-bars {
    opacity: 0
}

.container .slide2 .inner {
    padding: 5rem 0 5rem 0
}

@media screen and (min-width: 1200px) {
    .container .slide2 .inner {
        padding:176px 0 178px 0
    }
}

@media screen and (min-width: 1200px) {
    .container .slide2 .inner .inner-box {
        display:flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        flex-flow: nowrap;
        min-height: auto
    }
}

.container .slide2 .inner .inner-box .txt-box {
    width: 100%
}

.container .slide2 .inner .inner-box .txt-box h3 {
    opacity: 0;
    transition: 1.5s 0s;
    transform: translateX(100px)
}

.container .slide2 .inner .inner-box .txt-box p {
    opacity: 0;
    transition: 1.5s .3s;
    transform: translateX(100px)
}

.container .slide2 .inner .inner-box .txt-box .btn-row {
    opacity: 0;
    transition: 1.5s .5s;
    transform: translateX(100px)
}

@media screen and (min-width: 1200px) {
    .container .slide2 .inner .inner-box .txt-box {
        width:33.81944444444%
    }

    .container .slide2 .inner .inner-box .txt-box p {
        width: 380px
    }
}

.container .slide2 .inner .inner-box .img-box.handwriting {
    position: absolute;
    z-index: 2;
    bottom: -40%;
    left: 50%;
    margin-left: -50%
}

.container .slide2 .inner .inner-box .img-box.handwriting img {
    width: 98%
}

@media screen and (min-width: 1200px) {
    .container .slide2 .inner .inner-box .img-box.handwriting {
        bottom:-98px;
        left: -310px;
        margin-left: 0
    }

    .container .slide2 .inner .inner-box .img-box.handwriting img {
        width: 100%
    }
}

.container .slide2 .inner .inner-box .vdo-box {
    width: 100%;
    margin-top: 2.6666666667rem;
    margin-bottom: 3.0208333333rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

@media screen and (min-width: 1200px) {
    .container .slide2 .inner .inner-box .vdo-box {
        width:56.66666666667%;
        margin-top: 0;
        margin: 0
    }
}

.container .slide2 .inner .inner-box .vdo-box .video {
    width: 47%;
    height: auto
}

.container .slide2 .inner .inner-box .vdo-box .video video {
    width: 100%
}

@media screen and (min-width: 1440px) {
    .container .slide2 .inner .inner-box .vdo-box .video {
        width:384px;
        height: 680px
    }
}

.container .slide2 .inner .inner-box .vdo-box .video:nth-child(1) {
    margin-top: 2.0833333333rem
}

@media screen and (min-width: 1200px) {
    .container .slide2 .inner .inner-box .vdo-box .video:nth-child(1) {
        margin-top:46px
    }
}

.container .slide2 .inner .inner-box #videoid_21 {
    opacity: 0;
    transition: 1s 1s;
    transform: translateY(100px)
}

.container .slide2 .inner .inner-box #videoid_22 {
    opacity: 0;
    transition: 1s .7s;
    transform: translateY(100px)
}

.container .slide2.aniActive .inner .inner-box h3,.container .slide2.aniActive .inner .inner-box p,.container .slide2.aniActive .inner .inner-box .btn-row {
    transform: translateX(0);
    opacity: 1
}

.container .slide2.aniActive .inner .inner-box #videoid_21 {
    opacity: 1;
    transform: translateY(0)
}

.container .slide2.aniActive .inner .inner-box #videoid_22 {
    opacity: 1;
    transform: translateY(0)
}

.container .slide3 .inner.full {
    padding: 0
}

.container .slide3 .inner.full>span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transform: scale(1.1);
    background: url("/static/images/main/mo_bg_section_2.jpg") 50% 50% no-repeat;
    background-size: cover;
    transition: all 1.5s ease-in
}

@media screen and (min-width: 1200px) {
    .container .slide3 .inner.full>span {
        background:url("/static/images/main/pc_bg_section_2.jpg") 50% 50% no-repeat;
        background-size: cover
    }
}

.container .slide3 .inner.full>img {
    width: 100%;
    opacity: 0
}

.container .slide3 .inner.full .full-inner {
    width: 87.5%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.container .slide3 .inner.full .full-inner .inner-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: wrap
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box {
    position: absolute;
    left: 0;
    top: 4.5833333333rem
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box h3 {
    color: #000;
    transform: translateX(50px);
    opacity: 0;
    transition: 1s .5s
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box p {
    color: #222;
    width: 100%;
    transform: translateX(50px);
    opacity: 0;
    transition: 1s 1s
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box p br.mo {
    display: block
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box p br.pc {
    display: none
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box .btn-row {
    transform: translateX(50px);
    opacity: 0;
    transition: 1s 1.7s
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box .btn-row .btn {
    background: #fff;
    color: #798CD1
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box .btn-row .btn i svg .arrow1_path {
    stroke: #798CD1
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box .btn-row .btn:hover {
    background: #6293FF;
    color: #fff
}

.container .slide3 .inner.full .full-inner .inner-box .txt-box .btn-row .btn:hover i svg .arrow1_path {
    stroke: #fff
}

@media screen and (min-width: 1200px) {
    .container .slide3 .inner.full>img {
        display:none
    }

    .container .slide3 .inner.full .full-inner {
        position: relative;
        top: unset;
        left: unset;
        -moz-transform: unset;
        -ms-transform: unset;
        -webkit-transform: unset;
        transform: unset;
        width: 100%;
        max-width: 1440px;
        height: 1080px
    }

    .container .slide3 .inner.full .full-inner .inner-box {
        flex-flow: nowrap;
        min-height: auto;
        justify-content: flex-start
    }

    .container .slide3 .inner.full .full-inner .inner-box .txt-box {
        left: 0;
        top: 250px;
        margin-left: 0;
        width: 100%
    }

    .container .slide3 .inner.full .full-inner .inner-box .txt-box p br.mo {
        display: none
    }

    .container .slide3 .inner.full .full-inner .inner-box .txt-box p br.pc {
        display: block
    }
}

.container .slide3.aniActive .inner.full>span {
    opacity: 1;
    transform: scale(1)
}

.container .slide3.aniActive .inner.full .full-inner .inner-box .txt-box h3,.container .slide3.aniActive .inner.full .full-inner .inner-box .txt-box p,.container .slide3.aniActive .inner.full .full-inner .inner-box .txt-box .btn-row {
    opacity: 1;
    transform: translateX(0)
}

.container .slide3.aniActive .inner.full .full-inner .inner-box .img-box {
    transform: translateX(0);
    opacity: 1
}

.container .slide4 .inner.full>span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transform: scale(1.1);
    background: url("/static/images/main/mo_bg_section_4.jpg") 50% 50% no-repeat;
    background-size: cover;
    transition: all 1.5s ease-in
}

@media screen and (min-width: 1200px) {
    .container .slide4 .inner.full>span {
        background:url("/static/images/main/pc_bg_section_4.jpg") 50% 50% no-repeat;
        background-size: cover
    }
}

@media screen and (min-width: 1440px) {
    .container .slide4 .inner.full .full-inner {
        width:100%
    }
}

.container .slide4 .inner .inner-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: wrap
}

@media screen and (min-width: 768px) {
    .container .slide4 .inner .inner-box {
        justify-content:flex-end
    }
}

@media screen and (min-width: 1200px) {
    .container .slide4 .inner .inner-box {
        flex-flow:nowrap;
        min-height: auto;
        justify-content: flex-end;
        align-items: center
    }
}

.container .slide4 .inner .inner-box .img-box {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: wrap;
    width: 100%;
    margin: 1.7708333333rem auto 0 auto
}

.container .slide4 .inner .inner-box .img-box>img {
    width: 100%
}

.container .slide4 .inner .inner-box .img-box .img1 {
    opacity: 0;
    transition: 1s 0s;
    transform: translateY(-100px);
    position: absolute;
    width: 37.14285714286%;
    top: 0;
    left: 22.85714285714%;
    margin-bottom: 1.3541666667rem;
    z-index: 1
}

.container .slide4 .inner .inner-box .img-box .img2 {
    opacity: 0;
    transition: 1s .3s;
    transform: translateX(-100px);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60.08928571429%
}

.container .slide4 .inner .inner-box .img-box .img3 {
    opacity: 0;
    transition: 1s .7s;
    transform: translateX(100px);
    position: absolute;
    right: 0;
    bottom: 0;
    width: 35.26785714286%
}

.container .slide4 .inner .inner-box .img-box .img1 img,.container .slide4 .inner .inner-box .img-box .img2 img,.container .slide4 .inner .inner-box .img-box .img3 img {
    width: 100%;
    max-width: 100%
}

@media screen and (min-width: 768px) {
    .container .slide4 .inner .inner-box .img-box {
        max-width:600px
    }
}

@media screen and (min-width: 1200px) {
    .container .slide4 .inner .inner-box .img-box {
        position:absolute;
        right: 0;
        top: 168px;
        width: 750px;
        height: 629px;
        margin-top: 0;
        max-width: 100%
    }

    .container .slide4 .inner .inner-box .img-box>img {
        display: none
    }

    .container .slide4 .inner .inner-box .img-box .img1,.container .slide4 .inner .inner-box .img-box .img2,.container .slide4 .inner .inner-box .img-box .img3 {
        position: absolute;
        margin: 0
    }

    .container .slide4 .inner .inner-box .img-box .img1 img,.container .slide4 .inner .inner-box .img-box .img2 img,.container .slide4 .inner .inner-box .img-box .img3 img {
        max-width: 100%
    }

    .container .slide4 .inner .inner-box .img-box .img1 {
        width: 37.18199608611%;
        top: 12%;
        left: 22.89628180039%
    }

    .container .slide4 .inner .inner-box .img-box .img2 {
        width: 60.0782778865%;
        left: 0;
        bottom: 0
    }

    .container .slide4 .inner .inner-box .img-box .img3 {
        width: 35.22504892368%;
        bottom: 0;
        right: 0;
        display: block
    }
}

@media screen and (min-width: 1440px) {
    .container .slide4 .inner .inner-box .img-box {
        width:1022px;
        height: 756px
    }

    .container .slide4 .inner .inner-box .img-box .img1 {
        width: 380px;
        left: 234px;
        top: 0
    }

    .container .slide4 .inner .inner-box .img-box .img2 {
        width: 614px
    }

    .container .slide4 .inner .inner-box .img-box .img3 {
        width: 360px
    }
}

.container .slide4 .inner .inner-box .txt-box {
    position: relative;
    width: 100%;
    opacity: 1
}

.container .slide4 .inner .inner-box .txt-box h3 {
    opacity: 0;
    color: #000;
    transition: 1s .8s;
    transform: translateX(50px)
}

.container .slide4 .inner .inner-box .txt-box p {
    opacity: 0;
    color: #444;
    transition: 1s 1.1s;
    transform: translateX(50px)
}

.container .slide4 .inner .inner-box .txt-box p {
    width: 100%
}

.container .slide4 .inner .inner-box .txt-box .btn-row {
    opacity: 0;
    transition: 1s 1.3s;
    transform: translateX(50px)
}

@media screen and (min-width: 1200px) {
    .container .slide4 .inner .inner-box .txt-box {
        width:520px;
        top: 258px;
        left: 0;
        position: absolute
    }
}

@media screen and (min-width: 1440px) {
    .container .slide4 .inner .inner-box .txt-box {
        width:520px
    }
}

.container .slide4.aniActive .inner.full>span {
    opacity: 1;
    transform: scale(1)
}

.container .slide4.aniActive .inner .inner-box .txt-box h3,.container .slide4.aniActive .inner .inner-box .txt-box p,.container .slide4.aniActive .inner .inner-box .txt-box .btn-row {
    transform: translateX(0);
    opacity: 1
}

.container .slide4.aniActive .inner .inner-box .img-box .img1 {
    transform: translateY(0);
    opacity: 1
}

.container .slide4.aniActive .inner .inner-box .img-box .img2 {
    transform: translateX(0);
    opacity: 1
}

.container .slide4.aniActive .inner .inner-box .img-box .img3 {
    transform: translateX(0);
    opacity: 1
}

.container .slide5 .inner .inner-box .honorstable_service {
    opacity: 0;
    transition: 1s 0s
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-flow: wrap
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box {
    width: 100%;
    margin-bottom: 4.625rem
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box h3 {
    opacity: 0;
    transition: 1s .3s;
    transform: translateX(50px)
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box p {
    opacity: 0;
    transition: 1s .5s;
    transform: translateX(50px)
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box p br.pc {
    display: none
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box .btn-row {
    opacity: 0;
    transition: 1s .7s;
    transform: translateX(50px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: nowrap
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box .btn-row .btn {
    height: 3.3333333333rem
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box .btn-row .btn.line {
    width: 9.5833333333rem;
    margin-right: .8333333333rem
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box .btn-row .btn.plane {
    width: 8.75rem
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box {
    margin: auto
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .sine {
    display: none;
    position: absolute;
    z-index: 3;
    width: 0
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .sine img {
    max-width: 100%
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img1 {
    opacity: 0;
    transition: 1.5s .5s;
    transform: translateX(-50px);
    overflow: hidden;
    max-width: 100%;
    margin: auto;
    z-index: 2
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img1 img {
    max-width: 100%;
    width: 100%
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img2 {
    overflow: hidden;
    width: 8.3333333333rem;
    z-index: 1;
    display: none
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img2 img {
    max-width: 100%;
    width: 100%
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .txt-box h3,.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .txt-box p,.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .txt-box .btn-row {
    opacity: 1;
    transform: translateX(0)
}

.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .img-box .sine,.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .img-box .img1 {
    opacity: 1;
    transform: translateX(0)
}

.container .slide5 .inner .inner-box .honorstable_service_name {
    opacity: 0;
    transition: 1s .3s;
    margin-top: 2.0833333333rem
}

.container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide {
    border-bottom: .0416666667rem solid #EDE7E1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 3.1666666667rem
}

.container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide a {
    opacity: .5;
    padding-left: .8333333333rem;
    color: #6293FF;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 600
}

.container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: .0833333333rem;
    background: #6293FF;
    width: 0;
    transition: all .15s ease-in
}

.container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide.swiper-slide-thumb-active a {
    opacity: 1;
    color: #6293FF;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 800
}

.container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide.swiper-slide-thumb-active:before {
    width: 100%
}

.container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide:hover a {
    opacity: 1
}

.container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide:hover:before {
    width: 100%
}

@media screen and (min-width: 768px) {
    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box p br.pc {
        display:block
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box p br.mo {
        display: none
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box {
        margin-left: 0
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img1 img {
        max-width: 768px
    }
}

@media screen and (min-width: 1200px) {
    .container .slide5 .inner .inner-box {
        padding-top:117px
    }

    .container .slide5 .inner .inner-box .honorstable_service {
        height: 600px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: unset;
        flex-flow: nowrap;
        flex-direction: row-reverse
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box {
        width: 36.5%;
        margin-top: 0;
        margin-bottom: 0
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box p {
        margin-bottom: 64px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box p br.mo {
        display: block
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box p br.pc {
        display: none
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box .btn-row .btn.line {
        width: 170px;
        margin-right: 16px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box .btn-row .btn.plane {
        width: 154px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box {
        height: 100%;
        width: calc(100% - 36.5%)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img1 {
        max-width: 100%;
        margin: 0;
        transition: unset;
        transform: unset;
        opacity: 1
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img1 img {
        display: block;
        opacity: 0;
        transition: .5s .3s ease
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img2 {
        max-width: 100%;
        margin: 0;
        transition: unset;
        transform: unset;
        opacity: 1
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img2 img {
        display: block;
        opacity: 0;
        transition: .8s .5s ease
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .sine {
        transition: unset;
        transform: unset;
        opacity: 0;
        transition: 1.5s .5s;
        width: 267px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box img {
        max-width: 100%
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(1) .img-box .img1 {
        width: 477px;
        left: 125px;
        top: 25px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(1) .img-box .img1 img {
        transform: translateX(-477px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(2) .img-box .img2 {
        position: absolute;
        display: block;
        top: 25px;
        left: 0;
        width: 333px;
        z-index: -1
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(2) .img-box .img2 img {
        transform: translateX(333px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(2) .img-box .img1 {
        width: 516px;
        left: 138px;
        top: 217px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(2) .img-box .img1 img {
        transform: translateX(-516px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(3) .img-box .img1 {
        width: 633px;
        left: 35px;
        top: 105px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(3) .img-box .img1 img {
        transform: translateX(-633px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(4) .img-box .img2 {
        position: absolute;
        display: block;
        top: 25px;
        left: 365px;
        width: 288px;
        z-index: -1
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(4) .img-box .img2 img {
        transform: translateX(-288px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(4) .img-box .img1 {
        width: 570px;
        left: 0;
        top: 250px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(4) .img-box .img1 img {
        transform: translateX(570px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(5) .img-box .img1 {
        width: 567px;
        left: 66px;
        top: 75px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(5) .img-box .img1 img {
        transform: translateX(-567px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(6) .img-box .img2 {
        position: absolute;
        display: block;
        top: 258px;
        left: 372px;
        width: 237px;
        z-index: 3
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(6) .img-box .img2 img {
        transform: translateX(-237px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(6) .img-box .img1 {
        width: 500px;
        left: 0;
        top: 0
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(6) .img-box .img1 img {
        transform: translateX(500px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(7) .img-box .img1 {
        width: 632px;
        left: 17px;
        top: 104px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(7) .img-box .img1 img {
        transform: translateX(-632px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .img-box .sine,.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .img-box .img1 img,.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .img-box .img2 img {
        opacity: 1;
        transform: translateX(0)
    }

    .container .slide5 .inner .inner-box .honorstable_service_name {
        margin-top: 82px
    }

    .container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide {
        border-bottom: 1px solid #EDE7E1;
        height: 58px
    }

    .container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide a {
        padding-left: 20px;
        color: #6293FF;
        font-size: 18px;
        line-height: 18px;
        font-weight: 600
    }

    .container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide:before {
        height: 2px
    }

    .container .slide5 .inner .inner-box .honorstable_service_name .swiper-slide.swiper-slide-thumb-active a {
        color: #6293FF;
        font-size: 18px;
        line-height: 18px;
        font-weight: 800
    }
}

@media screen and (min-width: 1440px) {
    .container .slide5 .inner .inner-box {
        padding-top:140px
    }

    .container .slide5 .inner .inner-box .honorstable_service {
        height: 720px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .txt-box {
        width: 525px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box {
        width: calc(100% - 525px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img1 img {
        transition: .5s .3s ease
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide .img-box .img2 img {
        transition: .8s .5s ease
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(1) .img-box .img1 {
        width: 572px;
        left: 150px;
        top: 70px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(1) .img-box .img1 img {
        transform: translateX(-572px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(2) .img-box .img2 {
        top: 70px;
        left: 0;
        width: 400px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(2) .img-box .img2 img {
        transform: translateX(400px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(2) .img-box .img1 {
        width: 620px;
        left: 165px;
        top: 300px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(2) .img-box .img1 img {
        transform: translateX(-620px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(3) .img-box .img1 {
        width: 760px;
        left: 43px;
        top: 166px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(3) .img-box .img1 img {
        transform: translateX(-760px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(4) .img-box .img2 {
        position: absolute;
        top: 70px;
        left: 438px;
        width: 346px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(4) .img-box .img2 img {
        transform: translateX(-346px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(4) .img-box .img1 {
        width: 685px;
        left: 0;
        top: 340px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(4) .img-box .img1 img {
        transform: translateX(685px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(5) .img-box .img1 {
        width: 680px;
        left: 80px;
        top: 132px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(5) .img-box .img1 img {
        transform: translateX(-680px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(6) .img-box .img2 {
        top: 310px;
        left: 447px;
        width: 285px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(6) .img-box .img2 img {
        transform: translateX(-285px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(6) .img-box .img1 {
        width: 600px;
        left: 0;
        top: 0
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(6) .img-box .img1 img {
        transform: translateX(-600px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(7) .img-box .img1 {
        width: 758px;
        left: 20ppx;
        top: 165px
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide:nth-child(7) .img-box .img1 img {
        transform: translateX(-758px)
    }

    .container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .img-box .sine,.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .img-box .img1 img,.container .slide5 .inner .inner-box .honorstable_service .swiper-slide.swiper-slide-active .img-box .img2 img {
        opacity: 1;
        transform: translateX(0)
    }
}

.container .slide5.aniActive .inner-box .honorstable_service,.container .slide5.aniActive .inner-box .honorstable_service_name {
    opacity: 1
}

@media screen and (min-width: 1200px) {
    .container .slide6 .inner {
        padding:0
    }
}

.container .slide6 .inner.full>span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transform: scale(1.1);
    background: url("/static/images/main/bg_section6@m.jpg") 50% 50% no-repeat;
    background-size: cover;
    transition: all 1.5s ease-in
}

@media screen and (min-width: 1200px) {
    .container .slide6 .inner.full>span {
        background:url("/static/images/main/bg_section6.jpg") 50% 50% no-repeat;
        background-size: cover
    }
}

.container .slide6 .inner.full .full-inner {
    width: 100%
}

@media screen and (min-width: 1200px) {
    .container .slide6 .inner.full {
        height:1080px
    }

    .container .slide6 .inner.full .full-inner {
        max-width: 1240px;
        min-height: unset
    }
}

@media screen and (min-width: 1440px) {
    .container .slide6 .inner.full .full-inner {
        max-width:1440px
    }
}

@media screen and (min-width: 1680px) {
    .container .slide6 .inner.full .full-inner {
        max-width:1680px
    }
}

@media screen and (min-width: 1920px) {
    .container .slide6 .inner.full .full-inner {
        max-width:1920px
    }
}

.container .slide6 .inner .inner-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: wrap
}

@media screen and (min-width: 1200px) {
    .container .slide6 .inner .inner-box {
        align-items:center;
        justify-content: flex-end
    }
}

.container .slide6 .inner .inner-box .txt-box {
    padding: 0 1.6666666667rem 0 1.6666666667rem
}

.container .slide6 .inner .inner-box .txt-box h3 {
    color: #000;
    opacity: 0;
    transition: 1s 0s;
    transform: translateX(50px)
}

.container .slide6 .inner .inner-box .txt-box p {
    color: #444;
    opacity: 0;
    transition: 1s .2s;
    transform: translateX(50px)
}

.container .slide6 .inner .inner-box .txt-box p br.pc {
    display: none
}

.container .slide6 .inner .inner-box .txt-box .btn-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: nowrap;
    opacity: 0;
    transition: 1s .4s;
    transform: translateX(50px)
}

.container .slide6 .inner .inner-box .txt-box .btn-row .btn {
    margin-right: .6666666667rem
}

@media screen and (min-width: 1200px) {
    .container .slide6 .inner .inner-box .txt-box {
        padding:0;
        margin-right: 50px
    }

    .container .slide6 .inner .inner-box .txt-box p br.pc {
        display: block
    }

    .container .slide6 .inner .inner-box .txt-box p br.mo {
        display: none
    }

    .container .slide6 .inner .inner-box .txt-box .btn {
        margin-right: 16px
    }
}

@media screen and (min-width: 1440px) {
    .container .slide6 .inner .inner-box .txt-box {
        margin-right:65px
    }
}

@media screen and (min-width: 1680px) {
    .container .slide6 .inner .inner-box .txt-box {
        margin-right:85px
    }
}

@media screen and (min-width: 1920px) {
    .container .slide6 .inner .inner-box .txt-box {
        margin-right:100px
    }
}

.container .slide6 .inner .inner-box .img-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: wrap;
    margin-top: 2.3333333333rem
}

.container .slide6 .inner .inner-box .img-box picture {
    width: 100%;
    height: 100%;
    display: block
}

.container .slide6 .inner .inner-box .img-box .img1 {
    overflow: hidden
}

.container .slide6 .inner .inner-box .img-box .img1 img {
    opacity: 0;
    transition: 1s .2s;
    transform: translateY(100%)
}

.container .slide6 .inner .inner-box .img-box .img2 {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 50%
}

.container .slide6 .inner .inner-box .img-box .img2 img {
    transform: translateX(101%);
    animation: s6_img2 5s linear infinite alternate
}

.container .slide6 .inner .inner-box .img-box .img3 {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    width: 50%
}

.container .slide6 .inner .inner-box .img-box .img3 img {
    transform: translateX(-101%);
    animation: s6_img3 5s linear infinite alternate
}

.container .slide6 .inner .inner-box .img-box .img4 {
    overflow: hidden;
    width: 50%
}

.container .slide6 .inner .inner-box .img-box .img4 img {
    opacity: 0;
    transition: 1s .8s;
    transform: translateY(-100%)
}

.container .slide6 .inner .inner-box .img-box .img5 {
    overflow: hidden;
    width: 50%
}

.container .slide6 .inner .inner-box .img-box .img5 img {
    opacity: 0;
    transition: 1s .6s;
    transform: translateX(-100%)
}

.container .slide6 .inner .inner-box .img-box .img6 {
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden
}

.container .slide6 .inner .inner-box .img-box .img6 img {
    transform: translateY(-101%);
    animation: s6_img6 5s linear infinite alternate
}

.container .slide6 .inner .inner-box .img-box img {
    width: 100%;
    max-width: 100%
}

@media screen and (min-width: 768px) {
    .container .slide6 .inner .inner-box .img-box {
        justify-content:flex-start
    }

    .container .slide6 .inner .inner-box .img-box .img1 {
        width: 66.6%
    }

    .container .slide6 .inner .inner-box .img-box .img1 img {
        opacity: 0;
        transition: 1s .4s;
        transform: translateY(100%)
    }

    .container .slide6 .inner .inner-box .img-box .img2 {
        display: block;
        width: 33.4%;
        top: auto;
        bottom: 0;
        z-index: 2
    }

    .container .slide6 .inner .inner-box .img-box .img3 {
        display: block;
        width: 33.4%;
        z-index: 2
    }

    .container .slide6 .inner .inner-box .img-box .img4 {
        display: block;
        width: 33.4%
    }

    .container .slide6 .inner .inner-box .img-box .img4 img {
        opacity: 0;
        transition: 1s .6s;
        transform: translateX(-100%)
    }

    .container .slide6 .inner .inner-box .img-box .img5 {
        width: 33.4%
    }

    .container .slide6 .inner .inner-box .img-box .img5 img {
        opacity: 0;
        transition: 1s .8s;
        transform: translateX(100%)
    }

    .container .slide6 .inner .inner-box .img-box .img6 {
        overflow: hidden;
        display: block;
        width: 66.6%
    }

    .container .slide6 .inner .inner-box .img-box .img6 img {
        opacity: 0;
        transition: 1s .5s;
        transform: translateY(-100%);
        animation: unset
    }
}

@media screen and (min-width: 1200px) {
    .container .slide6 .inner .inner-box .img-box {
        width:713px;
        align-items: center;
        margin-top: 0
    }

    .container .slide6 .inner .inner-box .img-box .img1 {
        width: 50%;
        display: block
    }

    .container .slide6 .inner .inner-box .img-box .img1 img {
        opacity: 0;
        transition: 1s .7s;
        transform: translateY(100%)
    }

    .container .slide6 .inner .inner-box .img-box .img2 {
        position: relative;
        top: unset;
        left: unset;
        width: 25%;
        display: block
    }

    .container .slide6 .inner .inner-box .img-box .img2 img {
        opacity: 0;
        transition: 1s 1.2s;
        transform: translateY(100%);
        transform: translateY(0);
        animation: unset
    }

    .container .slide6 .inner .inner-box .img-box .img3 {
        width: 25%;
        display: block;
        position: relative;
        top: unset;
        right: unset
    }

    .container .slide6 .inner .inner-box .img-box .img3 img {
        opacity: 0;
        transition: 1s 1.5s;
        transform: translateX(-100%);
        transform: translateY(0);
        animation: unset
    }

    .container .slide6 .inner .inner-box .img-box .img4 {
        width: 25%;
        display: block
    }

    .container .slide6 .inner .inner-box .img-box .img4 img {
        opacity: 0;
        transition: 1s 1.7s;
        transform: translateX(100%)
    }

    .container .slide6 .inner .inner-box .img-box .img5 {
        width: 25%;
        display: block
    }

    .container .slide6 .inner .inner-box .img-box .img5 img {
        opacity: 0;
        transition: 1s 1.2s;
        transform: translateY(-100%)
    }

    .container .slide6 .inner .inner-box .img-box .img6 {
        position: relative;
        bottom: unset;
        right: unset;
        width: 50%;
        display: block
    }

    .container .slide6 .inner .inner-box .img-box .img6 img {
        opacity: 0;
        transition: 1s .7s;
        transform: translateY(-100%)
    }
}

@media screen and (min-width: 1440px) {
    .container .slide6 .inner .inner-box .img-box {
        width:855px
    }
}

@media screen and (min-width: 1680px) {
    .container .slide6 .inner .inner-box .img-box {
        width:998px
    }
}

@media screen and (min-width: 1920px) {
    .container .slide6 .inner .inner-box .img-box {
        width:1140px
    }
}

.container .slide6.aniActive .inner.full>span {
    opacity: 1;
    transform: scale(1)
}

.container .slide6.aniActive .inner .inner-box .txt-box h3,.container .slide6.aniActive .inner .inner-box .txt-box p,.container .slide6.aniActive .inner .inner-box .txt-box .btn-row {
    transform: translateX(0);
    opacity: 1
}

.container .slide6.aniActive .inner .inner-box .img-box .img1 img,.container .slide6.aniActive .inner .inner-box .img-box .img4 img {
    opacity: 1;
    transform: translateY(0)
}

.container .slide6.aniActive .inner .inner-box .img-box .img5 img {
    opacity: 1;
    transform: translateX(0)
}

@media screen and (min-width: 768px) {
    .container .slide6.aniActive .inner .inner-box .img-box .img1 img,.container .slide6.aniActive .inner .inner-box .img-box .img4 img {
        opacity:1;
        transform: translateY(0)
    }

    .container .slide6.aniActive .inner .inner-box .img-box .img5 img,.container .slide6.aniActive .inner .inner-box .img-box .img6 img {
        opacity: 1;
        transform: translateX(0)
    }
}

@media screen and (min-width: 1200px) {
    .container .slide6.aniActive .inner .inner-box .img-box .img1 img,.container .slide6.aniActive .inner .inner-box .img-box .img6 img,.container .slide6.aniActive .inner .inner-box .img-box .img2 img,.container .slide6.aniActive .inner .inner-box .img-box .img5 img {
        opacity:1;
        transform: translateY(0)
    }

    .container .slide6.aniActive .inner .inner-box .img-box .img3 img,.container .slide6.aniActive .inner .inner-box .img-box .img4 img {
        opacity: 1;
        transform: translateX(0)
    }
}

.container .slide7 {
    background: #f9f9f9
}

@media screen and (min-width: 1200px) {
    .container .slide7 .inner {
        padding-top:196px
    }
}

.container .slide7 .inner .inner-box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: wrap
}

.container .slide7 .inner .inner-box .txt-box {
    width: 100%;
    text-align: center
}

.container .slide7 .inner .inner-box .txt-box h3 {
    opacity: 0;
    transition: 1s 0s;
    transform: translateY(100px);
    color: #798CD1
}

.container .slide7 .inner .inner-box .txt-box p {
    opacity: 0;
    transition: 1s 0s;
    transform: translateY(100px);
    letter-spacing: -0.48px
}

.container .slide7 .inner .inner-box .txt-box p strong {
    color: #6293FF;
    letter-spacing: -0.48px
}

.container .slide7 .inner .inner-box .txt-box p br.pc {
    display: none
}

.container .slide7 .inner .inner-box .img-box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8333333333rem;
    margin-top: 3.3333333333rem
}

.container .slide7 .inner .inner-box .img-box .img_common {
    width: 100%;
    overflow: hidden
}

.container .slide7 .inner .inner-box .img-box .img_common .img_inner {
    position: relative;
    z-index: 1
}

.container .slide7 .inner .inner-box .img-box .img_common .img_inner picture {
    width: 100%
}

.container .slide7 .inner .inner-box .img-box .img_common .img_inner picture img {
    width: 100%
}

.container .slide7 .inner .inner-box .img-box .img_common .over {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background: #6293FF;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    align-content: center;
    transition: all .15s ease-in
}

.container .slide7 .inner .inner-box .img-box .img_common .over h3 {
    text-align: center;
    width: 100%;
    margin-bottom: 1.25rem;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 700
}

.container .slide7 .inner .inner-box .img-box .img_common .over a {
    color: #fff;
    font-size: .9583333333rem;
    line-height: .9583333333rem;
    font-weight: 700
}

@media screen and (min-width: 1200px) {
    .container .slide7 .inner .inner-box .img-box .img_common .over h3 {
        margin-bottom:40px;
        color: #fff;
        font-size: 32px;
        line-height: 1.5;
        font-weight: 700
    }

    .container .slide7 .inner .inner-box .img-box .img_common .over a {
        color: #fff;
        font-size: 18px;
        line-height: 18px;
        font-weight: 600
    }
}

.container .slide7 .inner .inner-box .img-box .img_common:hover .over {
    opacity: 1
}

.container .slide7 .inner .inner-box .img-box .img1 {
    opacity: 0;
    transition: 1s .8s;
    transform: translateX(50px)
}

.container .slide7 .inner .inner-box .img-box .img2 {
    opacity: 0;
    transition: 1s .8s;
    transform: translateX(-50px)
}

.container .slide7 .inner .inner-box .img-box .img3 {
    opacity: 0;
    transition: 1s 1s;
    transform: translateX(50px)
}

.container .slide7 .inner .inner-box .img-box .img4 {
    opacity: 0;
    transition: 1s 1s;
    transform: translateX(-50px)
}

.container .slide7 .inner .inner-box .img-box .img5 {
    opacity: 0;
    transition: 1s 1.2s;
    transform: translateX(50px)
}

.container .slide7 .inner .inner-box .img-box .img6 {
    opacity: 0;
    transition: 1s 1.2s;
    transform: translateX(-50px)
}

@media screen and (min-width: 768px) {
    .container .slide7 .inner .inner-box .img-box {
        grid-template-columns:repeat(3, 1fr)
    }

    .container .slide7 .inner .inner-box .img-box .img1 {
        opacity: 0;
        transition: 1s .8s;
        transform: translateX(50px)
    }

    .container .slide7 .inner .inner-box .img-box .img2 {
        opacity: 0;
        transition: 1s 1s;
        transform: translateY(-50px)
    }

    .container .slide7 .inner .inner-box .img-box .img3 {
        opacity: 0;
        transition: 1s .8s;
        transform: translateX(-50px)
    }

    .container .slide7 .inner .inner-box .img-box .img4 {
        opacity: 0;
        transition: 1s 1.3s;
        transform: translateX(50px)
    }

    .container .slide7 .inner .inner-box .img-box .img5 {
        opacity: 0;
        transition: 1s 1s;
        transform: translateY(50px)
    }

    .container .slide7 .inner .inner-box .img-box .img6 {
        opacity: 0;
        transition: 1s 1.3s;
        transform: translateX(-50px)
    }
}

@media screen and (min-width: 1200px) {
    .container .slide7 .inner .inner-box {
        display:flex;
        justify-content: center;
        align-items: center
    }

    .container .slide7 .inner .inner-box .txt-box {
        transform: unset;
        padding-top: 0;
        margin-top: 15px;
        width: 500px
    }

    .container .slide7 .inner .inner-box .img-box {
        position: absolute;
        margin-top: 0;
        width: 1100px;
        height: 490px;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-flow: wrap;
        gap: unset
    }

    .container .slide7 .inner .inner-box .img-box .img_common {
        width: 23.97727272727%
    }

    .container .slide7 .inner .inner-box .img-box .img1,.container .slide7 .inner .inner-box .img-box .img2 {
        position: absolute;
        top: 0;
        left: 0
    }

    .container .slide7 .inner .inner-box .img-box .img2 {
        left: auto;
        right: 0
    }
}

@media screen and (min-width: 1440px) {
    .container .slide7 .inner .inner-box .txt-box {
        margin-top:35px
    }

    .container .slide7 .inner .inner-box .img-box {
        width: 1320px;
        height: 588px
    }
}

@media screen and (min-width: 1760px) {
    .container .slide7 .inner .inner-box .txt-box {
        margin-top:105px;
        width: 620px
    }

    .container .slide7 .inner .inner-box .txt-box p br.mo {
        display: none
    }

    .container .slide7 .inner .inner-box .txt-box p br.pc {
        display: block
    }

    .container .slide7 .inner .inner-box .img-box {
        width: 1613px;
        height: 719px
    }
}

@media screen and (min-width: 1920px) {
    .container .slide7 .inner .inner-box .txt-box {
        margin-top:115px
    }

    .container .slide7 .inner .inner-box .img-box {
        width: 1760px;
        height: 784px
    }
}

.container .slide7.aniActive .inner .inner-box .txt-box h3,.container .slide7.aniActive .inner .inner-box .txt-box p {
    transform: translateY(0);
    opacity: 1
}

.container .slide7.aniActive .inner .inner-box .img-box .img1,.container .slide7.aniActive .inner .inner-box .img-box .img2,.container .slide7.aniActive .inner .inner-box .img-box .img3,.container .slide7.aniActive .inner .inner-box .img-box .img4,.container .slide7.aniActive .inner .inner-box .img-box .img5,.container .slide7.aniActive .inner .inner-box .img-box .img6 {
    transform: translateX(0);
    opacity: 1
}

@media screen and (min-width: 1200px) {
    .container .slide8 .inner {
        padding-top:292px
    }
}

.container .slide8 .inner.full>span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transform: scale(1.1);
    background: url("/static/images/main/mo_bg_section_8.jpg") 50% 50% no-repeat;
    background-size: cover;
    transition: all 1.5s ease-in
}

@media screen and (min-width: 1200px) {
    .container .slide8 .inner.full>span {
        background:url("/static/images/main/pc_bg_section_8.jpg") 50% 50% no-repeat;
        background-size: cover
    }
}

@media screen and (min-width: 1200px) {
    .container .slide8 .inner.full .full-inner {
        width:100%;
        max-width: 1240px
    }
}

@media screen and (min-width: 1440px) {
    .container .slide8 .inner.full .full-inner {
        max-width:1440px
    }
}

.container .slide8 .inner .inner-box {
    width: 87.5%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: wrap
}

.container .slide8 .inner .inner-box .left .txt-box {
    opacity: 0;
    transition: 1s 0s;
    transform: translateX(80px);
    padding: 0 0 2.5rem 0
}

.container .slide8 .inner .inner-box .left .txt-box h3 {
    margin-bottom: 0;
    color: #fff
}

.container .slide8 .inner .inner-box .left .btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: wrap
}

.container .slide8 .inner .inner-box .left .btn-box .btn {
    position: relative;
    width: 47%;
    height: 5.25rem;
    margin-bottom: .8333333333rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: hidden
}

.container .slide8 .inner .inner-box .left .btn-box .btn span {
    display: inline-block;
    text-align: center;
    color: #aaa;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600
}

.container .slide8 .inner .inner-box .left .btn-box .btn:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #fff;
    opacity: 0;
    z-index: -1;
    transition: all .15s ease-in
}

.container .slide8 .inner .inner-box .left .btn-box .btn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    opacity: .32;
    z-index: -2
}

.container .slide8 .inner .inner-box .left .btn-box .btn i {
    width: 4rem;
    height: 4rem
}

.container .slide8 .inner .inner-box .left .btn-box .btn i svg .counsel_path1,.container .slide8 .inner .inner-box .left .btn-box .btn i svg .counsel_path2,.container .slide8 .inner .inner-box .left .btn-box .btn i svg .note_path1,.container .slide8 .inner .inner-box .left .btn-box .btn i svg .note_path2,.container .slide8 .inner .inner-box .left .btn-box .btn i svg .cost_path,.container .slide8 .inner .inner-box .left .btn-box .btn i svg .map_path {
    stroke: #6293FF
}

.container .slide8 .inner .inner-box .left .btn-box .btn i.note svg {
    width: 1.9037708333rem;
    height: 1.875rem
}

.container .slide8 .inner .inner-box .left .btn-box .btn:nth-child(1) {
    opacity: 0;
    transition: 1s .2s;
    transform: translateX(50px)
}

.container .slide8 .inner .inner-box .left .btn-box .btn:nth-child(2) {
    opacity: 0;
    transition: 1s .4s;
    transform: translateX(-50px)
}

.container .slide8 .inner .inner-box .left .btn-box .btn:nth-child(3) {
    opacity: 0;
    transition: 1s .6s;
    transform: translateX(50px)
}

.container .slide8 .inner .inner-box .left .btn-box .btn:nth-child(4) {
    opacity: 0;
    transition: 1s .8s;
    transform: translateX(-50px)
}

.container .slide8 .inner .inner-box .left .btn-box .btn:hover:after {
    opacity: 1
}

.container .slide8 .inner .inner-box .left .btn-box .btn:hover span {
    color: #444
}

.container .slide8 .inner .inner-box .left .btn-box .btn:hover i svg .counsel_path1,.container .slide8 .inner .inner-box .left .btn-box .btn:hover i svg .counsel_path2,.container .slide8 .inner .inner-box .left .btn-box .btn:hover i svg .note_path1,.container .slide8 .inner .inner-box .left .btn-box .btn:hover i svg .note_path2,.container .slide8 .inner .inner-box .left .btn-box .btn:hover i svg .cost_path,.container .slide8 .inner .inner-box .left .btn-box .btn:hover i svg .map_path {
    stroke: #798CD1
}

.container .slide8 .inner .inner-box .img-box {
    opacity: 0;
    transition: 1s 0s;
    transform: translateY(100px);
    margin-top: 2.5rem
}

.container .slide8 .inner .inner-box .img-box img {
    width: 100%;
    max-width: 672px
}

@media screen and (min-width: 1200px) {
    .container .slide8 .inner .inner-box {
        justify-content:space-between;
        align-items: center;
        width: 100%
    }

    .container .slide8 .inner .inner-box .left {
        width: 467px;
        height: 450px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        flex-flow: wrap
    }

    .container .slide8 .inner .inner-box .left .txt-box {
        width: 380px;
        padding-top: 0;
        padding-bottom: 80px
    }

    .container .slide8 .inner .inner-box .left .btn-box {
        width: 467px
    }

    .container .slide8 .inner .inner-box .left .btn-box .btn {
        width: 107px;
        height: 112px;
        flex-wrap: wrap;
        align-content: center;
        margin-bottom: 0
    }

    .container .slide8 .inner .inner-box .left .btn-box .btn span {
        width: 100%;
        margin-top: 2px
    }

    .container .slide8 .inner .inner-box .img-box {
        width: calc( 100% - 467px );
        height: 450px;
        max-width: 690px;
        margin-top: 0
    }

    .container .slide8 .inner .inner-box .img-box img {
        max-width: 100%
    }
}

@media screen and (min-width: 1440px) {
    .container .slide8 .inner .inner-box {
        width:100%
    }

    .container .slide8 .inner .inner-box .left {
        width: 560px;
        height: 496px
    }

    .container .slide8 .inner .inner-box .left .txt-box {
        width: 380px;
        padding-top: 0;
        padding-bottom: 110px
    }

    .container .slide8 .inner .inner-box .left .btn-box {
        width: 560px
    }

    .container .slide8 .inner .inner-box .left .btn-box .btn {
        width: 128px;
        height: 134px
    }

    .container .slide8 .inner .inner-box .img-box {
        width: 760px;
        height: 496px;
        max-width: 100%
    }
}

.container .slide8.aniActive .inner.full>span {
    opacity: 1;
    transform: scale(1)
}

.container .slide8.aniActive .inner .inner-box .txt-box {
    transform: translateX(0);
    opacity: 1
}

.container .slide8.aniActive .inner .inner-box .img-box {
    transform: translateY(0);
    opacity: 1
}

.container .slide8.aniActive .inner .inner-box .btn-box .btn:nth-child(1),.container .slide8.aniActive .inner .inner-box .btn-box .btn:nth-child(2),.container .slide8.aniActive .inner .inner-box .btn-box .btn:nth-child(3),.container .slide8.aniActive .inner .inner-box .btn-box .btn:nth-child(4) {
    transform: translateX(0);
    transform: translateY(0);
    opacity: 1
}

@media screen and (min-width: 1200px) {
    .container .slide9 .inner {
        padding-top:0px
    }
}

.container .slide9 .inner.full .full-inner {
    width: 100%
}

@media screen and (min-width: 1200px) {
    .container .slide9 .inner.full .full-inner {
        width:1200px
    }
}

@media screen and (min-width: 1440px) {
    .container .slide9 .inner.full .full-inner {
        width:1580px
    }
}

.container .slide9 .inner .inner-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: wrap
}

.container .slide9 .inner .inner-box .txt-box {
    width: 87.5%;
    opacity: 0;
    transition: 1s 0s;
    transform: translateX(80px);
    text-align: center;
    margin: auto
}

.container .slide9 .inner .inner-box .txt-box p span {
    color: #6293FF;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600
}

.container .slide9 .inner .inner-box .board-box {
    position: relative;
    width: 87.5%;
    padding: 2.0833333333rem 1.6666666667rem 1.4583333333rem 1.6666666667rem;
    margin: 0 auto 1.3333333333rem auto
}

/* .container .slide9 .inner .inner-box .board-box {
    position: relative;
    width: 87.5%;
    padding: 2.0833333333rem 1.6666666667rem 1.4583333333rem 1.6666666667rem;
    margin: 0 2rem 1rem;
} */

.container .slide9 .inner .inner-box .board-box h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.2083333333rem;
    height: 1.875rem;
    border-radius: .9375rem;
    border: 1px solid #798CD1;
    margin-bottom: 1.0416666667rem;
    color: #798CD1;
    font-size: .9583333333rem;
    line-height: 1.5;
    font-weight: 700
}

.container .slide9 .inner .inner-box .board-box ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: wrap
}

.container .slide9 .inner .inner-box .board-box ul li {
    width: 100%;
    padding: .625rem 0
}

.container .slide9 .inner .inner-box .board-box ul li a {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    color: #000;
    font-size: 1.0833333333rem;
    line-height: 1.5;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.container .slide9 .inner .inner-box .board-box ul li span {
    display: none
}

.container .slide9 .inner .inner-box .board-box:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1
}

.container .slide9 .inner .inner-box .board-box:nth-child(2) {
    margin-top: 2.6666666667rem;
    opacity: 0;
    transition: 1s .2s;
    transform: translateY(80px)
}

.container .slide9 .inner .inner-box .board-box:nth-child(2):before {
    background: #798CD1;
    opacity: .05
}

.container .slide9 .inner .inner-box .board-box:nth-child(2) ul li:hover a,.container .slide9 .inner .inner-box .board-box:nth-child(2) ul li:hover span {
    color: #798CD1
}

.container .slide9 .inner .inner-box .board-box:nth-child(3) {
    opacity: 0;
    transition: 1s .4s;
    transform: translateY(80px)
}

.container .slide9 .inner .inner-box .board-box:nth-child(3) h4 {
    color: #6293FF;
    border: 1px solid #6293FF
}

.container .slide9 .inner .inner-box .board-box:nth-child(3):before {
    background: #6293FF;
    opacity: .05
}

.container .slide9 .inner .inner-box .board-box:nth-child(3) ul li:hover a,.container .slide9 .inner .inner-box .board-box:nth-child(3) ul li:hover span {
    color: #6293FF
}

.container .slide9 .inner .inner-box .slide-box {
    opacity: 0;
    transition: 1s .6s;
    transform: translateX(80px);
    position: relative;
    margin-left: 6.25%;
    padding-bottom: 1.3333333333rem
}

.container .slide9 .inner .inner-box .slide-box .swiper-slide {
    max-width: 307px
}

.container .slide9 .inner .inner-box .slide-box .swiper-slide a {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.container .slide9 .inner .inner-box .slide-box .swiper-slide a img {
    max-width: 100%
}

.container .slide9 .inner .inner-box .slide-box .swiper-slide a .over {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background: rgba(0,0,0,0.5);
    transition: all .25s ease-in;
    display: flex;
    justify-content: center;
    align-items: center
}

.container .slide9 .inner .inner-box .slide-box .swiper-slide a .over i {
    width: 48px;
    height: 48px
}

.container .slide9 .inner .inner-box .slide-box .swiper-slide a .over i svg .insta_path {
    fill: #fff
}

.container .slide9 .inner .inner-box .slide-box .swiper-slide a:hover .over {
    opacity: 1
}

.container .slide9 .inner .inner-box .slide-box .swiper-pagination2 {
    top: auto;
    bottom: 0
}

.container .slide9 .inner .inner-box .slide-box .swiper-pagination2.swiper-pagination-progressbar {
    background: #eee
}

.container .slide9 .inner .inner-box .slide-box .swiper-pagination2.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #ccc
}

@media screen and (min-width: 1200px) {
    .container .slide9 .inner .inner-box {
        display:flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        flex-flow: wrap
    }

    .container .slide9 .inner .inner-box .txt-box {
        width: 100%
    }

    .container .slide9 .inner .inner-box .board-box {
        width: 49%;
        padding: 56px 48px;
        margin-bottom: 24px
    }

    .container .slide9 .inner .inner-box .board-box h4 {
        width: 92px;
        height: 36px;
        border-radius: 18px;
        margin-bottom: 26px;
        color: #798CD1;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700
    }

    .container .slide9 .inner .inner-box .board-box ul li {
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .container .slide9 .inner .inner-box .board-box ul li a {
        width: 70%;
        color: #000;
        font-size: 20px;
        line-height: 1.5;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .container .slide9 .inner .inner-box .board-box ul li span {
        display: block;
        color: #222;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 500
    }

    .container .slide9 .inner .inner-box .board-box:nth-child(2) {
        margin-top: 0px;
        margin-left: 0
    }

    .container .slide9 .inner .inner-box .board-box:nth-child(3) {
        margin-top: 0px;
        margin-right: 0
    }

    .container .slide9 .inner .inner-box .slide-box {
        margin-left: 0
    }

    .container .slide9 .inner .inner-box .slide-box .swiper-slide {
        max-width: 100%
    }
}

.container .slide9.aniActive .inner .inner-box .txt-box,.container .slide9.aniActive .inner .inner-box .slide-box {
    transform: translateX(0);
    opacity: 1
}

.container .slide9.aniActive .inner .inner-box .board-box:nth-child(2),.container .slide9.aniActive .inner .inner-box .board-box:nth-child(3) {
    transform: translateY(0);
    opacity: 1
}

.scroll {
    z-index: 9;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    font-size: 14px;
    animation: scroll infinite 0.8s linear;
    bottom: 50px
}

.scroll::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../../images/main/icon_scroll.png");
    width: 14px;
    height: 8px
}

.progress_box {
    left: 1.6666666667rem;
    bottom: 5rem;
    width: calc( 100% - 1.6666666667rem );
    height: 3.3333333333rem;
    z-index: 2
}

.progress_box .group-unmute,.progress_box .group-mute {
    position: absolute;
    top: 1.0416666667rem;
    left: 4.5833333333rem;
    width: 1.25rem;
    height: 1.25rem;
    z-index: 2
}

.progress_box .group-unmute i,.progress_box .group-mute i {
    width: 1.25rem;
    height: 1.25rem
}

.progress_box .group-mute {
    display: none
}

.progress_box .group-mute i svg .sound_path2 {
    stroke: transparent
}

.progress_box .swiper-pagination2 {
    position: absolute;
    left: 6.25rem;
    top: 1.25rem;
    height: .75rem;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.progress_box .swiper-pagination2 span {
    display: block;
    height: .75rem;
    color: #fff;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 600;
    opacity: .4;
    margin: 0 .5rem !important;
    background: none !important
}

.progress_box .swiper-pagination2 span.swiper-pagination-bullet-active {
    opacity: 1
}

.progress_box .btn-control {
    position: absolute;
    z-index: 30;
    width: 3.3333333333rem;
    height: 3.3333333333rem;
    left: .0416666667rem;
    top: .0416666667rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.progress_box .btn-control .group-play,.progress_box .btn-control .group-pause {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-indent: -999px;
    font-size: 0;
    z-index: 1
}

.progress_box .btn-control .group-play {
    display: none;
    background: url("/static/images/components/icon_play_gray.svg") 50% 50% no-repeat;
    background-size: .8333333333rem .7291666667rem
}

.progress_box .btn-control .group-pause {
    background: url("/static/images/components/icon_pause_gray.svg") 50% 50% no-repeat;
    background-size: .6875rem .7291666667rem
}

.progress_box .progress-circle {
    position: relative;
    width: 3.4166666667rem;
    height: 3.4166666667rem;
    z-index: 1
}

.progress_box .progress-circle svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%
}

.progress_box .progress-circle circle {
    fill: none;
    stroke-width: 4px
}

.progress_box .progress-circle .background {
    stroke: rgba(255,255,255,0.5)
}

.progress_box .progress-circle .progress {
    stroke: #6293FF;
    stroke-dasharray: 282.74;
    stroke-dashoffset: calc(282.74 * (1 - var(--progress) / 100));
    transition: stroke-dashoffset 0.35s
}

.progress_box .progress-circle text {
    font-size: 18px;
    text-anchor: middle;
    dominant-baseline: middle
}

@media screen and (min-width: 1200px) {
    .progress_box {
        left:64px;
        bottom: 160px;
        width: 700px;
        height: 80px
    }

    .progress_box .group-unmute,.progress_box .group-mute {
        top: 32px;
        /* left: 100px; */
        left: 0px;
        width: 24px;
        height: 24px
    }

    .progress_box .group-unmute i,.progress_box .group-mute i {
        width: 24px;
        height: 24px
    }

    .progress_box .swiper-pagination2 {
        /* left: 130px; */
        left: 90px;
        top: 35px;
        height: 18px
    }

    .progress_box .swiper-pagination2 span {
        height: 19px;
        color: #fff;
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
        margin: 0 12px !important
    }

    .progress_box .btn-control {
        width: 80px;
        height: 80px
    }

    .progress_box .btn-control .group-play {
        display: none;
        background: url("/assets/img/icon_play_gray.svg") 50% 50% no-repeat;
        background-size: 16px 14px
    }

    .progress_box .btn-control .group-pause {
        background: url("/assets/img/icon_pause_gray.svg") 50% 50% no-repeat;
        background-size: 13px 14px
    }

    .progress_box .progress-circle {
        width: 80px;
        height: 80px
    }

    .progress_box .progress-circle circle {
        stroke-width: 2px
    }
}

.main_slide .swiper-slide-active .txt-box>h3,.main_slide .swiper-slide-active .txt-box>h4,.main_slide .swiper-slide-active .txt-box>a,.main_slide .swiper-slide-active .txt-box>p {
    transform: translateY(0);
    opacity: 1
}

.main_slide .btn_sound {
    width: 105px;
    height: 100%
}

.main_slide .btn_sound button {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    transform: translateY(-50%)
}

.main_slide .btn_sound button img {
    display: block;
    width: 100%
}

.main_slide .arrow-box {
    position: relative;
    width: 80px;
    height: 50px
}

@keyframes opacity_ani {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes s6_img2 {
    0% {
        transform: translateX(101%)
    }

    20% {
        transform: translateX(101%)
    }

    40% {
        transform: translateX(101%)
    }

    60% {
        transform: translateX(0)
    }

    70% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes s6_img3 {
    0% {
        transform: translateX(-101%)
    }

    20% {
        transform: translateX(-101%)
    }

    45% {
        transform: translateX(-101%)
    }

    65% {
        transform: translateX(0)
    }

    70% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes s6_img6 {
    0% {
        transform: translateY(-101%)
    }

    20% {
        transform: translateY(-101%)
    }

    48% {
        transform: translateY(-101%)
    }

    68% {
        transform: translateY(0)
    }

    70% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(0)
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}