*, :after, :before {
    box-sizing: border-box;
    backface-visibility: hidden;
    margin: 0;
    padding: 0;

}

ol, ul, li {
    vertical-align: middle;
    list-style-type: none
}

div {
    color: #383c2a
}

img {
    vertical-align: top;
    border: 0
}

input, select, textarea, button {
    vertical-align: middle
}

textarea, input {
    text-indent: 10px
}

input[type=submit], input[type=button], button {
    text-indent: 0;
    text-align: center;
    cursor: pointer
}

label, button, a {
    cursor: pointer
}

ins, em, b, i {
    font-style: normal;
    text-decoration: none
}

select:focus, textarea:focus, input:focus, button {
    outline: none
}

.disable-hover {
    pointer-events: none
}

.scroll-animate.animated, .scroll-animate:not(.father) {
    visibility: hidden
}

.animated {
    animation-duration: 1.2s;
    animation-fill-mode: both
}

.font-fadeIn font {
    display: inline-block
}

::-webkit-scrollbar {
    width: 5px;
    background-color: transparent
}

::-webkit-scrollbar-thumb {
    width: 5px;
    background-color: #9fb935;
    border: 0 solid transparent;
    border-radius: 4px
}

::-webkit-scrollbar-corner {
    background-color: transparent
}

::-webkit-scrollbar:horizontal {
    height: 9px
}

::-webkit-selection {
    color: transparent;
    background: 0 0
}

::-moz-selection {
    color: transparent;
    background: 0 0
}

::selection {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background-color: #1c509c
}

input::-webkit-input-placeholder, input::-moz-input-placeholder, textarea::-webkit-textarea-placeholder, textarea::-moz-textarea-placeholder {
    color: #999;
    transition: color .5s
}

input:focus::-webkit-input-placeholder, input:focus::-moz-input-placeholder, input:hover::-webkit-input-placeholder, input:hover::-moz-input-placeholder, textarea:focus::-webkit-input-placeholder, textarea:focus::-moz-input-placeholder, textarea:hover::-webkit-input-placeholder, textarea:hover::-moz-input-placeholder {
    color: #c2c2c2
}

a {
    outline: none;
    text-decoration: none
}

a[href] {
    color: inherit;
    cursor: pointer
}

a:hover {
    cursor: pointer;
    text-decoration: none
}

a:focus {
    background-color: transparent
}

audio, canvas, progress, video {
    vertical-align: baseline;
    display: inline-block
}

body {
    -webkit-tap-highlight-color: transparent
}

html {
    width: 100%;
    scroll-behavior: initial;
    font-size: 100px;
    overflow-x: hidden
}

html.rul, html.aul {
    font-size: 4.17vw
}

a:focus, input:focus, p:focus, div:focus {
    -webkit-tap-highlight-color: transparent
}

img[src=""], img:not([src]) {
    opacity: 0
}

b {
    font-size: inherit;
    color: inherit;
    font-family: inherit
}

font {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    text-transform: inherit
}

.fl {
    float: left
}

.fr {
    float: right
}

.fw-100 {
    font-weight: 100
}

.fw-400 {
    font-weight: 400
}

.fw-600 {
    font-weight: 600
}

.cl:after {
    content: " ";
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    display: block
}

.hide {
    display: none
}

.show {
    display: block
}

.text_overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}

[data-ahref] {
    cursor: pointer
}

.f-left {
    text-align: left
}

.f-center {
    text-align: center
}

.f-right {
    text-align: right
}

.up-word {
    text-transform: uppercase
}

.v-show {
    visibility: visible
}

.v-hide {
    visibility: hidden
}

.pr {
    position: relative
}

.pa {
    position: absolute
}

.back-cover {
    background-size: cover
}

.back-contain {
    background-size: contain
}

.wid-10 {
    width: 10%
}

.wid-15 {
    width: 15%
}

.wid-20 {
    width: 20%
}

.wid-25 {
    width: 25%
}

.wid-30 {
    width: 30%
}

.wid-35 {
    width: 35%
}

.wid-40 {
    width: 40%
}

.wid-45 {
    width: 45%
}

.wid-50 {
    width: 50%
}

.wid-55 {
    width: 55%
}

.wid-60 {
    width: 60%
}

.wid-65 {
    width: 65%
}

.wid-70 {
    width: 70%
}

.wid-75 {
    width: 75%
}

.wid-80 {
    width: 80%
}

.wid-85 {
    width: 85%
}

.wid-90 {
    width: 90%
}

.wid-95 {
    width: 95%
}

.wid-100 {
    width: 100%
}

.op-0 {
    opacity: 0
}

.op-1 {
    opacity: .1
}

.op-2 {
    opacity: .2
}

.op-3 {
    opacity: .3
}

.op-4 {
    opacity: .4
}

.op-5 {
    opacity: .5
}

.op-6 {
    opacity: .6
}

.op-7 {
    opacity: .7
}

.op-8 {
    opacity: .8
}

.op-9 {
    opacity: .9
}

.op-10 {
    opacity: 1
}

.layout-v-middle, #home .r1 .inner .pager .line, .layout-middle, #process .r1 .inner .mid .cirBox .imgBox, #process .r1 .inner .mid .cirBox #cirLine, #custom .r3 .inner .mid .cirBox .imgBox, #custom .r3 .inner .mid .cirBox #cirLine, #custom .r2 .inner .swiper .swiper-slide .ok, #custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn .loadIcon, #home .r3 .inner .mid .cirBox .imgBox, #home .r3 .inner .mid .cirBox #cirLine, #mailPop .pMain .bm .sub .loadIcon {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0
}

.layout-h-middle, #custom .r2 .inner .tree li .msg .img, #about .tree li .msg .img, #about .tree a .msg .img, #solution .r1 .inner .group ul li .msg .img, #home .r1 .appInner .pager .line {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0
}

.layout-middle, #process .r1 .inner .mid .cirBox .imgBox, #process .r1 .inner .mid .cirBox #cirLine, #custom .r3 .inner .mid .cirBox .imgBox, #custom .r3 .inner .mid .cirBox #cirLine, #custom .r2 .inner .swiper .swiper-slide .ok, #custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn .loadIcon, #home .r3 .inner .mid .cirBox .imgBox, #home .r3 .inner .mid .cirBox #cirLine, #mailPop .pMain .bm .sub .loadIcon {
    left: 0;
    right: 0
}

.pa-v {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.pa-h {
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.pa-mid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.pic {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.fxc, #searchPage .r1 .inner .result .box .caseItems .cases, #searchPage .r1 .inner .isNull, #case .r1 .inner .btm .set ol, #case .r1 .inner .btm .set > a, #case .r1 .inner .group .box, #custom .r2 .inner .swiper .swiper-slide .ok, #custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check, #custom .r2 .inner .swiper .swiper-slide .part .box > li .imgBox, #custom .r1 .scr, #solution .r1 .inner .group ul li .imgBox, #solution .r1 .inner h1, #pro .r1 .inner .btm .set ol, #pro .r1 .inner .btm .set > a, #pro .r1 .inner .right .isNull, #detail .r2 .inner .mid .set > a, #detail .r2 .inner .mid .swiper .swiper-slide .box, #about .r3 .inner .mid .items, #about .r3 .inner, #about .r2 .inner .mid .set > a, #about .r2 .inner .mid .swiper .swiper-slide .box, #home .r5 .inner .mid .set > a, #home .r5 .inner .mid .swiper .swiper-slide .box, #home .r5 .inner, #home .r4 .inner .mid .items, #home .r4 .inner, #home .r1 .appInner > .other .photo, #home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg, #home .r1 .inner .imgBox .photo, #home .r1 .inner .items > li, #home .banner .inner .msg, #home .banner .inner .scr, #home .banner .inner .pager, #home .banner .inner .items > li, #home .banner .inner, .bloc .fx, .bloc footer .fBm .c2 .layer-bg, .bloc footer .fBm .c2 .items, .bloc footer .fBm .c1, .bloc footer .fMid .fxs .con, .bloc header nav.app-nav .inner_top .topic .app-search, .bloc header nav.app-nav .inner_top .topic .layer-down, .bloc header nav.app-nav .inner_top .topic .app-logo, .bloc header .pcNav .right, .bloc header, #toast, #mailPop .pMain .other .input--check, .layer-pop, .layer-downBox .childDown .input--check, .layer-scr, .layer-more, .layer-btn, .layer-type, .layer-button, .layer-down > a, .layer-icon {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

.fxb, #about .r4_1 .group, #about .r4 .group, #about .r3, #detail .r2 .inner .top, #about .r2 .inner .top, #about .r1 .inner .mid .imgBox .group, #about .r1 .inner .top, #about .banner .inner, #home .r5 .inner .top, #home .r2 .inner .top, .bloc footer .fBm .c2, .bloc footer .fBm, .bloc footer .fMid, .bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList, .bloc header .pcNav, .layer-downBox .topPart {
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

.fxs {
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

.layer-photo {
    position: relative
}

.maxSize {
    width: 84%;
    max-width: 83.33vw;
    margin: auto
}

.full, #searchPage .r1 .inner .result .box .caseItems .cases:after, #case .r1 .inner .group .box:after, #process .r1 .inner .mid .cirBox .imgBox .photo, #process .r1 .inner .mid .cirBox, #process .r1 .bg .photo, #custom .r3 .inner .mid .cirBox .imgBox .photo, #custom .r3 .inner .mid .cirBox, #custom .r3 .bg .photo, #custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .photo:after, #custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .photo:after, #custom .r1 .bg .photo, #custom .r1 .bg, #about .r4 .group .col .photo:after, #detail .r2 .inner .mid .swiper .swiper-slide .box:after, #detail .banner .bg:after, #detail .banner .bg .photo, #detail .banner .bg, #about .r3 .bg .mk > span, #about .r3 .bg .photo, #about .r2 .inner .mid .swiper .swiper-slide .box:after, #about .r1 .inner .mid .imgBox .group .c1 .dataItems, #about .r1 .inner .mid .imgBox .group, #about .banner .bg .photo, #about .banner .bg, #home .r4 .bg .mk > span, #home .r4 .bg .photo, #home .r3 .inner .mid .cirBox .imgBox .photo, #home .r3 .inner .mid .cirBox, #home .r3 .bg .photo, #home .r2 .inner .mid .imgBox .dataItems, #home .r2 .inner .mid .imgBox > img, #home .r1 .appInner > .other, #home .r1 .inner .imgBox .photo, #home .banner .inner .msg .skew:before, #home .banner .bg:after, #home .banner .bg canvas, #home #loading .photo .mk, #home #loading .photo, .bloc footer .fBg, .bloc main .bg, .layer-pop, .layer-bg .skew:after, .layer-bg .skew, .photo .pic, .layer-photo .pic {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.f-150 {
    font-size: 1.5rem
}

@media screen and (min-width: 900px) {
    .f-150 {
        letter-spacing: -3px
    }
}

.rul .f-150, .f-120 {
    font-size: 1.2rem
}

@media screen and (min-width: 900px) {
    .f-120 {
        letter-spacing: -3px
    }
}

.f-76 {
    font-size: .76rem
}

.f-72 {
    font-size: .72rem
}

.f-60 {
    font-size: .6rem
}

.f-56 {
    font-size: .56rem
}

.f-54 {
    font-size: .54rem
}

.f-50 {
    font-size: .5rem
}

.f-48 {
    font-size: .48rem
}

.f-46 {
    font-size: .46rem
}

.f-44 {
    font-size: .44rem
}

.f-42 {
    font-size: .42rem
}

.f-40 {
    font-size: .4rem
}

.f-38 {
    font-size: .38rem
}

.f-36 {
    font-size: .36rem
}

.f-34 {
    font-size: .34rem
}

.f-32 {
    font-size: .32rem
}

.f-30 {
    font-size: .3rem
}

.f-28 {
    font-size: .28rem
}

.f-26 {
    font-size: .26rem
}

.f-24, #policy .r1 .detail h2 {
    font-size: .24rem
}

.f-22 {
    font-size: .22rem
}

.f-20 {
    font-size: .2rem
}

.f-18, #policy .r1 .detail p {
    font-size: .94vw
}

.f-16 {
    font-size: .83vw
}

.f-14 {
    font-size: .73vw
}

.f-12 {
    font-size: 12px
}

@media screen and (max-width: 1700px) {
    html {
        font-size: 90px
    }

    html.rul {
        font-size: 80px
    }

    .f-18, #policy .r1 .detail p {
        font-size: 16px
    }

    .f-16 {
        font-size: 15px
    }

    .f-14 {
        font-size: 14px
    }

    .f-12 {
        font-size: 12px
    }
}

@media screen and (max-width: 1500px) {
    html {
        font-size: 80px
    }

    html.rul {
        font-size: 70px
    }

    .f-18, #policy .r1 .detail p {
        font-size: 16px
    }

    .f-16 {
        font-size: 15px
    }

    .f-14 {
        font-size: 14px
    }

    .f-12 {
        font-size: 12px
    }
}

@media screen and (max-width: 1400px) {
    html {
        font-size: 70px
    }

    html.rul {
        font-size: 60px
    }

    .f-24, #policy .r1 .detail h2 {
        font-size: 18px
    }

    .f-22, .f-20 {
        font-size: 16px
    }

    .f-18, #policy .r1 .detail p, .f-16 {
        font-size: 14px
    }

    .f-14 {
        font-size: 13px
    }

    .f-12 {
        font-size: 12px
    }

    .maxSize {
        width: 88%
    }
}

@media screen and (max-width: 1080px) {
    html, html.rul {
        font-size: 60px
    }

    .f-24, #policy .r1 .detail h2 {
        font-size: 16px
    }

    .f-22, .f-20 {
        font-size: 14px
    }

    .f-18, #policy .r1 .detail p, .f-16 {
        font-size: 13px
    }

    .f-14, .f-12 {
        font-size: 12px
    }
}

@media screen and (max-width: 900px) {
    html {
        font-size: 50px
    }

    .f-24, #policy .r1 .detail h2 {
        font-size: 16px
    }

    .f-22, .f-20, .f-18, #policy .r1 .detail p, .f-16 {
        font-size: 15px
    }

    .f-14 {
        font-size: 13px
    }

    .f-12 {
        font-size: 12px
    }
}

@keyframes fadeInLeftSmall {
    0% {
        opacity: 0;
        transform: translate(-10%)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeftSmall {
    animation-name: fadeInLeftSmall
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate(-20%)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeft {
    animation-name: fadeInLeftSmall
}

@keyframes fadeInRightSmall {
    0% {
        opacity: 0;
        transform: translate(10%)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRightSmall {
    animation-name: fadeInRightSmall
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate(20%)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInDownSmall {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInDownSmall {
    animation-name: fadeInDownSmall
}

@keyframes fadeOutDownSmall {
    0% {
        opacity: 1;
        transform: none
    }
    to {
        opacity: 0;
        transform: translateY(10px)
    }
}

.fadeOutDownSmall {
    animation-name: fadeOutDownSmall
}

@keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUpSmall {
    animation-name: fadeInUpSmall;
    animation-timing-function: ease
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30%)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

@keyframes rotateInUpSmall {
    0% {
        opacity: 0;
        transform: translateY(30px) rotate(5deg)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.rotateInUpSmall {
    transform-origin: 0 0;
    animation-name: rotateInUpSmall
}

a, span, p, small, li, div {
    font-family: en-regular
}

.en_bold, #policy .r1 .detail h2, #about .r3 .left .layer-topic:before, #detail .r2 .inner .top .layer-topic:before, #about .r3 .inner .layer-topic:before, #about .r2 .inner .top .layer-topic:before, #about .r1 .inner .top .layer-topic:before {
    font-family: en-bold;
    font-weight: 400
}

.en_mid, #policy .r1 .detail p, .bloc footer .fMid .fxs .con p b, #toast span, .layer-inputBox .childDown > li > a, .en_re {
    font-family: en-regular;
    font-weight: 400
}

.wc {
    color: #fff
}

.mc {
    color: #9fb935
}

.oc {
    color: #ffc973
}

.gray {
    color: #707070
}

.hidden {
    display: none !important
}

p, small {
    line-height: 1.65
}

.mb-90 {
    margin-bottom: .9rem
}

.mb-80 {
    margin-bottom: .8rem
}

.mb-70 {
    margin-bottom: .7rem
}

.mb-60 {
    margin-bottom: .6rem
}

.mb-50 {
    margin-bottom: .5rem
}

.mb-40 {
    margin-bottom: .4rem
}

.mb-30 {
    margin-bottom: .3rem
}

.mb-20 {
    margin-bottom: .2rem
}

.mb-10 {
    margin-bottom: .1rem
}

.letter {
    color: inherit;
    min-width: .2em;
    font-size: inherit;
    font-family: inherit;
    display: inline-block
}

.alanFn {
    transform-origin: -50%;
    perspective: 28.04vw;
    backface-visibility: hidden
}

.Xy {
    transition: transform .5s cubic-bezier(.435, .25, .15, .965)
}

.fadeXy {
    transition: transform .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

.trans, .bloc header .pcNav .right .items > li > i:before, .bloc header .pcNav .right .items > li > i:after, .layer-arrow:before, .layer-arrow:after {
    transition: all .5s cubic-bezier(.435, .25, .15, .965)
}

.arrow, .layer-down > a em {
    width: 0;
    height: 0;
    border-style: solid
}

.photo {
    overflow: hidden
}

.photo .pic.scroll {
    height: calc(100% + 9.38vw);
    top: -4.69vw
}

.layer-icon .icon {
    display: block
}

.layer-icon .mr {
    margin-right: .83vw
}

.layer-down {
    position: relative
}

.layer-down > a {
    text-transform: uppercase;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 2px
}

.layer-down > a em {
    border-width: 4px;
    border-color: #fff transparent transparent;
    margin-top: 2px;
    display: block
}

.layer-down .child {
    width: calc(100% + 1rem);
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    border-radius: .2rem;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: .2rem;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965);
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 99%;
    left: -.5rem;
    box-shadow: 0 .1rem .2rem rgba(136, 147, 89, .28)
}

.layer-down .child > a {
    text-align: center;
    width: 100%;
    line-height: .4rem;
    transition: color .5s cubic-bezier(.435, .25, .15, .965)
}

.layer-down .child > a:hover {
    color: #9fb935;
    text-decoration: underline
}

.layer-down.on .child {
    opacity: 1;
    pointer-events: auto
}

.layer-arrow {
    width: 1.35vw;
    height: 1.35vw;
    --active: #fff;
    opacity: 0;
    margin: -.68vw 0 0 -.68vw;
    transition: opacity .3s cubic-bezier(.435, .25, .15, .965), transform .3s cubic-bezier(.435, .25, .15, .965);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: matrix(1, 0, 0, .6, 3, 0)
}

.layer-arrow:after {
    content: "";
    width: .15rem;
    height: 2px;
    background: var(--active);
    transform-origin: .09rem;
    border-radius: 1px;
    margin: -.04rem 0 0 -.05rem;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(58deg)
}

.layer-arrow:before {
    content: "";
    width: .15rem;
    height: 2px;
    background: var(--active);
    transform-origin: .09rem;
    border-radius: 1px;
    margin: .03rem 0 0 -.05rem;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-58deg)
}

.layer-button {
    cursor: pointer;
    isolation: isolate;
    z-index: 3;
    border: 1px solid #9fb935;
    border-radius: 5.21vw;
    padding: 1.25vw 3.65vw;
    position: relative;
    overflow: hidden
}

.layer-button .mr {
    margin-right: 10px
}

.layer-button .txt {
    perspective: 26.04vw;
    z-index: 10;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965);
    position: relative;
    overflow: hidden
}

.layer-button .txt > span {
    transition: color .7s cubic-bezier(.435, .25, .15, .965);
    display: block
}

.layer-button > .iconfont {
    z-index: 10;
    transition: transform .8s cubic-bezier(.435, .25, .15, .965), color .7s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

.layer-button:after {
    content: "";
    width: calc(100% + 1.56vw);
    height: calc(100% + 1.56vw);
    z-index: 2;
    background-color: #b1cb47;
    border-radius: 5.21vw;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: -.78vw;
    left: -.78vw;
    transform: translate(-101%)
}

@media screen and (orientation: landscape) {
    .layer-button:hover .txt {
        transform: translate(4px)
    }

    .layer-button:hover .txt span {
        color: #fff
    }

    .layer-button:hover > .iconfont {
        transform: translate(7px)
    }

    .layer-button:hover:after {
        transform: translate(0%)
    }
}

.layer-type {
    cursor: pointer;
    height: 2.6vw;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    background-color: #f6f8f1;
    border: 3px solid #f6f8f1;
    transition: border-color 1s cubic-bezier(.435, .25, .15, .965), opacity .7s cubic-bezier(.435, .25, .15, .965), transform .7s cubic-bezier(.435, .25, .15, .965);
    position: relative;
    overflow: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0)
}

.layer-type .layer-icon {
    width: 1.04vw;
    height: 1.04vw;
    z-index: 10;
    opacity: 0;
    background: #9fb935;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    right: 0
}

.layer-type .layer-icon i {
    font-size: 12px;
    transform: scale(.6)
}

.layer-type .txt {
    perspective: 26.04vw;
    z-index: 10;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965);
    position: relative;
    overflow: hidden
}

.layer-type .txt > span {
    transition: color .7s cubic-bezier(.435, .25, .15, .965);
    display: block
}

.layer-type:after {
    content: "";
    width: calc(100% + 1.56vw);
    height: calc(100% + 1.56vw);
    z-index: 2;
    background-color: #eff7db;
    border-radius: 5.21vw;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: -.78vw;
    left: -.78vw;
    transform: translate(-101%)
}

.layer-type:hover .txt {
    transform: translate(4px)
}

.layer-type:hover .txt span {
    color: #9fb935
}

.layer-type:hover:after {
    transform: translate(0%)
}

.layer-type.on {
    border-color: #9fb935
}

.layer-type.on .txt {
    transform: translate(4px)
}

.layer-type.on .txt span {
    color: #9fb935
}

.layer-type.on:after {
    transform: translate(0%)
}

.layer-type.on .layer-icon {
    opacity: 1
}

.layer-btn {
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    isolation: isolate;
    z-index: 3;
    background-color: #9fb935;
    border-radius: 5.21vw;
    padding: 1.25vw 2.08vw;
    position: relative;
    overflow: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0)
}

.layer-btn .mr {
    margin-right: 10px
}

.layer-btn .mr-16 {
    margin-right: .83vw
}

.layer-btn .txt {
    perspective: 26.04vw;
    z-index: 10;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965), opacity .3s cubic-bezier(.435, .25, .15, .965);
    position: relative;
    overflow: hidden
}

.layer-btn .txt > span {
    transition: color .7s cubic-bezier(.435, .25, .15, .965);
    display: block
}

.layer-btn .iconfont {
    z-index: 10;
    transition: transform .8s cubic-bezier(.435, .25, .15, .965), color .7s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

.layer-btn:after {
    content: "";
    width: calc(100% + 1.56vw);
    height: calc(100% + 1.56vw);
    z-index: 2;
    background-color: #b1cb47;
    border-radius: 5.21vw;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: -.78vw;
    left: -.78vw;
    transform: translate(-101%)
}

@media screen and (orientation: landscape) {
    .layer-btn:hover .txt {
        transform: translate(4px)
    }

    .layer-btn:hover .iconfont {
        transform: translate(7px)
    }

    .layer-btn:hover:after {
        transform: translate(0%)
    }
}

.layer-more {
    cursor: pointer;
    padding: 10px 0;
    position: relative;
    overflow: hidden
}

.layer-more .mr {
    margin-right: .3rem
}

.layer-more .txt {
    perspective: 26.04vw;
    z-index: 10;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965);
    position: relative;
    overflow: hidden
}

.layer-more .txt > span {
    transition: color .7s cubic-bezier(.435, .25, .15, .965);
    display: block
}

.layer-more .iconfont {
    z-index: 10;
    transition: transform .8s cubic-bezier(.435, .25, .15, .965), color .7s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

.layer-more:after {
    content: "";
    width: calc(100% - 8px);
    height: 2px;
    transform-origin: 0%;
    z-index: 2;
    background-color: #9fb935;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(0)
}

@media screen and (orientation: landscape) {
    .layer-more:hover .iconfont {
        transform: translate(-8px)
    }

    .layer-more:hover:after {
        transform: scaleX(1)
    }
}

.layer-topic h2 {
    letter-spacing: -2px;
    font-size: 1.3rem;
    line-height: .85
}

.layer-topic h2 b {
    color: #9fb935;
    font-size: inherit;
    font-family: inherit
}

.layer-topic h2.f-76 {
    font-size: .76rem
}

.layer-topic h2.f-48 {
    font-size: .48rem
}

.layer-topic h2.f-120 {
    font-size: 1.2rem
}

.layer-topic h1 {
    letter-spacing: -1px;
    line-height: .8
}

.layer-topic h1 b {
    color: #9fb935;
    font-size: inherit;
    font-family: inherit
}

.layer-search {
    height: 2.92vw;
    border-bottom: 1px solid rgba(112, 112, 112, .3);
    position: relative
}

.layer-search input[type=text] {
    height: 100%;
    width: 100%;
    text-align: center;
    border: none;
    display: block
}

.layer-search input[type=text]::-ms-input-placeholder {
    color: rgba(112, 112, 112, .5)
}

.layer-search input[type=text]::placeholder {
    color: rgba(112, 112, 112, .5)
}

.layer-search input[type=submit] {
    height: 100%;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 0;
    right: 0
}

.layer-bg {
    position: relative
}

.layer-bg .skew {
    background-color: #9fb935;
    transform: skew(-28deg)
}

.layer-bg .skew:after {
    content: "";
    transform-origin: 0%;
    background-color: #fff;
    transition: transform .7s cubic-bezier(.435, .25, .15, .965);
    transform: scaleX(0)
}

.layer-bg .pr {
    z-index: 10;
    position: relative
}

@media screen and (orientation: landscape) {
    .layer-bg.skewHover:hover .skew:after {
        transform: scaleX(1)
    }
}

.layer-li {
    padding-left: 1.3vw;
    position: relative
}

.layer-li .dot {
    width: 5px;
    height: 5px;
    background-color: #707070;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 10px;
    left: 0;
    transform: skew(-20deg)
}

.layer-li .dot.wc {
    background-color: #fff
}

.layer-li.right {
    text-align: right;
    padding-left: 0;
    padding-right: 1.56vw
}

.layer-li.right .dot {
    left: auto;
    right: 0
}

.layer-scr {
    pointer-events: none;
    width: 100%;
    z-index: 12;
    animation: .8s cubic-bezier(.435, .25, .15, .965) infinite alternate scrFn;
    position: absolute;
    bottom: 4.27vw;
    left: 0
}

.layer-scr > img {
    width: 2.71vw;
    display: block
}

.layer-pro {
    position: relative;
    overflow: hidden
}

.layer-pro .photo {
    width: 100%;
    padding-bottom: 100%;
    transition: transform 1s cubic-bezier(.435, .25, .15, .965)
}

.layer-pro h2, .layer-pro h3 {
    text-align: center;
    width: 100%;
    padding: .2rem .1rem;
    line-height: 1.2;
    position: absolute;
    bottom: 0;
    left: 0
}

@media screen and (orientation: landscape) {
    .layer-pro:hover .photo {
        transform: scale(1.1)
    }
}

.layer-downBox {
    cursor: pointer;
    border: 1px solid #9fb935;
    transition: border-color .5s cubic-bezier(.435, .25, .15, .965), background-color .5s cubic-bezier(.435, .25, .15, .965)
}

.layer-downBox .topPart {
    height: 3.65vw;
    width: 100%;
    padding: 0 1.56vw
}

.layer-downBox .topPart .arrow, .layer-downBox .topPart .layer-down > a em, .layer-down > a .layer-downBox .topPart em {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #9fb935;
    margin-top: 5px;
    transition: transform .5s cubic-bezier(.435, .25, .15, .965)
}

.layer-downBox .childDown {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 1.56vw;
    display: none
}

.layer-downBox .childDown .input--check {
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 10px 0
}

.layer-downBox .childDown .input--check label {
    cursor: pointer;
    text-align: left;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

.layer-downBox .childDown .input--check .input__box {
    text-align: center;
    width: 1.35vw;
    height: 1.35vw;
    color: transparent;
    border: 2px solid #9fb935;
    margin-right: .83vw;
    font-size: 12px;
    line-height: 1.25vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), background-color .5s cubic-bezier(.435, .25, .15, .965);
    display: inline-block;
    position: relative
}

.layer-downBox .childDown .input--check .tint {
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    display: inline-block
}

.layer-downBox .childDown .input--check input {
    display: none
}

.layer-downBox .childDown .input--check input:checked + .input__box {
    color: #fff;
    background-color: #9fb935
}

.layer-downBox .childDown .input--check input:checked + .input__box + .tint {
    color: #9fb935;
    font-weight: 700
}

.layer-downBox.on {
    background-color: #f6f8f1;
    border-color: #f6f8f1
}

.layer-downBox.on .topPart .arrow, .layer-downBox.on .topPart .layer-down > a em, .layer-down > a .layer-downBox.on .topPart em {
    transform: scaleY(-1)
}

.layer-pop {
    z-index: 300;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    padding: 0 6%;
    transition: opacity 1.017s cubic-bezier(.33, 0, 0, 1), transform 1.017s cubic-bezier(.33, 0, 0, 1), visibility 0s 1.017s, -webkit-transform 1.017s cubic-bezier(.33, 0, 0, 1);
    position: fixed;
    transform: translate(-20%)
}

.layer-pop .mk {
    height: 100%;
    width: 300%;
    opacity: 0;
    background-color: rgba(0, 0, 0, .4);
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    left: -100%
}

.layer-pop .ani {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.435, .25, .15, .965) .8s, transform .7s cubic-bezier(.435, .25, .15, .965) .8s;
    transform: translateY(10px)
}

.layer-pop .ani.dey1 {
    transition-delay: .9s
}

.layer-pop .ani.dey2 {
    transition-delay: 1s
}

.layer-pop .ani.dey3 {
    transition-delay: 1.1s
}

.layer-pop .ani.dey4 {
    transition-delay: 1.2s
}

.layer-pop .ani.dey5 {
    transition-delay: 1.3s
}

.layer-pop .ani.dey6 {
    transition-delay: 1.4s
}

.layer-pop .group {
    width: 10rem;
    pointer-events: auto;
    z-index: 5;
    background-color: #fdfff8;
    position: relative
}

.layer-pop .group .pMain {
    width: 100%;
    padding: 5% 10%
}

.layer-pop.on {
    opacity: 1;
    visibility: inherit;
    transition: none;
    transform: none
}

.layer-pop.on .mk {
    opacity: 1
}

.layer-pop.on .ani {
    opacity: 1;
    transform: none
}

.layer-pop.on .group {
    animation: 1.2s cubic-bezier(.33, 0, 0, 1) backwards pop-in
}

.layer-inputBox {
    display: inline-block;
    position: relative
}

.layer-inputBox .dot {
    color: red;
    font-size: 12px
}

.layer-inputBox h4 {
    line-height: .32rem;
    position: relative
}

.layer-inputBox h4 em.dot {
    color: red;
    font-size: 12px;
    position: absolute;
    top: -.03rem;
    right: calc(100% + .05rem)
}

.layer-inputBox .input-text {
    height: .5rem;
    width: 100%;
    position: relative
}

.layer-inputBox .input-text > input {
    width: 100%;
    height: 100%;
    -o-transition: all .3s ease-out;
    z-index: 10;
    background-color: #f6f8f1;
    border: none;
    padding: 0 2.08vw 0 1.04vw;
    font-weight: 400;
    transition: all .3s ease-out;
    display: block;
    position: relative
}

.layer-inputBox .input-text > input::-ms-input-placeholder {
    color: rgba(112, 112, 112, .5)
}

.layer-inputBox .input-text > input::placeholder {
    color: rgba(112, 112, 112, .5)
}

.layer-inputBox .input-text > input:focus, .layer-inputBox .input-text > input.on {
    background-color: rgba(159, 185, 53, .2);
    border-color: transparent
}

.layer-inputBox .input-text > input:focus ~ .input-border, .layer-inputBox .input-text > input.on ~ .input-border {
    background-color: #fff
}

.layer-inputBox .input-text > input:focus ~ .input-border:first-of-type:before, .layer-inputBox .input-text > input.on ~ .input-border:first-of-type:before {
    width: 100%;
    transition: all .15s ease-in-out
}

.layer-inputBox .input-text > input:focus ~ .input-border:first-of-type:after, .layer-inputBox .input-text > input.on ~ .input-border:first-of-type:after {
    height: 100%;
    transition: all .15s ease-in-out .15s
}

.layer-inputBox .input-text > input:focus ~ .input-border:last-of-type, .layer-inputBox .input-text > input.on ~ .input-border:last-of-type {
    background: 0 0
}

.layer-inputBox .input-text > input:focus ~ .input-border:last-of-type:before, .layer-inputBox .input-text > input.on ~ .input-border:last-of-type:before {
    width: 100%;
    transition: all .15s ease-in-out .3s
}

.layer-inputBox .input-text > input:focus ~ .input-border:last-of-type:after, .layer-inputBox .input-text > input.on ~ .input-border:last-of-type:after {
    height: 100%;
    transition: all .15s ease-in-out .45s;
    top: 0
}

.layer-inputBox .input-text > input.erro {
    background-color: rgba(252, 1, 26, .1);
    border-color: transparent
}

.layer-inputBox .input-text > input.erro ~ .input-border {
    background-color: #fff
}

.layer-inputBox .input-text > input.erro ~ .input-border:before, .layer-inputBox .input-text > input.erro ~ .input-border:after {
    background-color: #fc011a
}

.layer-inputBox .input-text > input.erro ~ .input-border:first-of-type:before {
    width: 100%;
    transition: all .15s ease-in-out
}

.layer-inputBox .input-text > input.erro ~ .input-border:first-of-type:after {
    height: 100%;
    transition: all .15s ease-in-out .15s
}

.layer-inputBox .input-text > input.erro ~ .input-border:last-of-type {
    background: 0 0
}

.layer-inputBox .input-text > input.erro ~ .input-border:last-of-type:before {
    width: 100%;
    transition: all .15s ease-in-out .3s
}

.layer-inputBox .input-text > input.erro ~ .input-border:last-of-type:after {
    height: 100%;
    transition: all .15s ease-in-out .45s;
    top: 0
}

.layer-inputBox .input-text .input-border {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.layer-inputBox .input-text .input-border:before, .layer-inputBox .input-text .input-border:after {
    content: "";
    width: 0;
    background-color: #9fb935;
    transition: all .3s ease-in-out;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0
}

.layer-inputBox .input-text .input-border:first-of-type:before {
    height: 2px;
    width: 0;
    top: 0;
    left: 0
}

.layer-inputBox .input-text .input-border:first-of-type:after {
    height: 0;
    width: 2px;
    top: 0;
    right: 0
}

.layer-inputBox .input-text .input-border:last-of-type:before {
    height: 2px;
    width: 0;
    background-color: #9fb935;
    top: calc(100% - 2px);
    right: 0
}

.layer-inputBox .input-text .input-border:last-of-type:after {
    height: 0;
    width: 2px;
    background-color: #9fb935;
    top: calc(100% - 2px);
    left: 0
}

.layer-inputBox .arrow, .layer-inputBox .layer-down > a em, .layer-down > a .layer-inputBox em {
    width: 0;
    height: 0;
    transform-origin: 0 20%;
    z-index: 10;
    border: 5px solid transparent;
    border-top-color: #9fb935;
    margin: auto 0;
    transition: transform .5s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 5px;
    bottom: 0;
    right: .2rem
}

.layer-inputBox .childDown {
    width: 100%;
    max-height: calc(1.04vw + 2rem);
    background-color: #eff7db;
    padding: 1.04vw 1.56vw;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow: auto
}

.layer-inputBox .childDown > li {
    width: 100%
}

.layer-inputBox .childDown > li > a {
    width: 100%;
    line-height: .4rem;
    display: block
}

.layer-inputBox.on .arrow, .layer-inputBox.on .layer-down > a em, .layer-down > a .layer-inputBox.on em {
    transform: scaleY(-1)
}

.alanFn {
    opacity: 0
}

[data-choose] {
    cursor: pointer
}

#mailPop .pMain {
    z-index: 2;
    max-height: 94vh;
    position: relative;
    overflow: auto
}

#mailPop .pMain .layer-topic h2, #mailPop .pMain .layer-topic p {
    text-align: center
}

#mailPop .pMain h3 {
    margin-bottom: 10px;
    position: relative
}

#mailPop .pMain h3 em.dot {
    color: red;
    font-size: 12px;
    position: absolute;
    top: -.03rem;
    right: calc(100% + .05rem)
}

#mailPop .pMain .box {
    z-index: 22;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative
}

#mailPop .pMain .box .wid-45 {
    width: 48%
}

#mailPop .pMain .box .layer-inputBox {
    margin-bottom: 5px
}

#mailPop .pMain .box textarea {
    width: 100%;
    height: 6.25vw;
    background-color: #f6f8f1;
    border: 2px solid #f6f8f1;
    margin-bottom: .3rem;
    padding: 1.04vw;
    transition: border-color .5s cubic-bezier(.435, .25, .15, .965)
}

#mailPop .pMain .box textarea::-ms-input-placeholder {
    color: rgba(112, 112, 112, .5)
}

#mailPop .pMain .box textarea::placeholder {
    color: rgba(112, 112, 112, .5)
}

#mailPop .pMain .box textarea.erro {
    border-color: #fc011a
}

#mailPop .pMain .other .input--check {
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 10px 0
}

#mailPop .pMain .other .input--check label {
    cursor: pointer;
    text-align: left;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

#mailPop .pMain .other .input--check label .f-16 {
    width: calc(100% - .42rem)
}

#mailPop .pMain .other .input--check .input__box {
    text-align: center;
    width: .26rem;
    height: .26rem;
    color: transparent;
    border: 2px solid #9fb935;
    margin-right: .16rem;
    font-size: 12px;
    line-height: .24rem;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), background-color .5s cubic-bezier(.435, .25, .15, .965);
    display: inline-block;
    position: relative
}

#mailPop .pMain .other .input--check .tint {
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    display: inline-block
}

#mailPop .pMain .other .input--check input {
    display: none
}

#mailPop .pMain .other .input--check input:checked + .input__box {
    color: #fff;
    background-color: #9fb935
}

#mailPop .pMain .other .input--check input.erro + .input__box {
    border-color: red
}

#mailPop .pMain .other .input--check input.erro + .input__box + .gray {
    color: red
}

#mailPop .pMain .bm {
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#mailPop .pMain .bm .layer-btn {
    width: 15.63vw;
    margin: .1rem auto 0
}

#mailPop .pMain .bm .sub {
    position: relative
}

#mailPop .pMain .bm .sub .loadIcon {
    width: .34rem;
    height: .34rem;
    opacity: 0;
    transition: opacity .3s
}

#mailPop .pMain .bm .sub.loadGo {
    pointer-events: none
}

#mailPop .pMain .bm .sub.loadGo .txt {
    opacity: 0
}

#mailPop .pMain .bm .sub.loadGo .loadIcon {
    opacity: 1;
    animation: 3s linear infinite loopl
}

#mailPop .success {
    height: 100%;
    width: 100%;
    z-index: 20;
    background-color: #fdfff8;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    left: 0
}

#mailPop .success img {
    height: 6.35vw;
    margin: 0 auto 1.88vw;
    display: block
}

#mailPop .success p {
    text-align: center;
    line-height: 1
}

#mailPop .success p b {
    color: #9fb935;
    font-weight: 400;
    font-size: inherit;
    font-family: inherit;
    display: block
}

#mailPop .closePop {
    width: 5.21vw;
    text-align: center;
    position: absolute;
    top: 0;
    left: 100%
}

#toast {
    pointer-events: none;
    opacity: 0;
    z-index: 2000;
    width: 100%;
    height: 40vw;
    position: fixed;
    bottom: 0;
    left: 0
}

#toast span {
    max-width: 70vw;
    color: #fff;
    text-align: center;
    background-color: #9fb935;
    border-radius: .05rem;
    padding: 8px .2rem;
    font-size: .16rem;
    display: inline-block;
    box-shadow: 0 10px 1.56vw -3px rgba(0, 0, 0, .2)
}

.swiper-wrapper {
    grid-auto-flow: column;
    display: grid
}

.bloc header {
    width: 100%;
    height: 6.51vw;
    z-index: 200;
    padding: 0 8.33vw;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965), height .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965), background-color .5s cubic-bezier(.435, .25, .15, .965);
    position: fixed;
    top: 0;
    left: 0;
     background: #00000069;
}

.bloc header .pcNav {
    width: 100%
}

.bloc header .pcNav > .layer-icon {
    position: relative
}

.bloc header .pcNav > .layer-icon .logo {
    transition: opacity .3s cubic-bezier(.435, .25, .15, .965);
    display: block
}

.bloc header .pcNav > .layer-icon .logo_w, .bloc header .pcNav > .layer-icon .logo_g {
    height: 100%;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    left: 0
}

.bloc header .pcNav .right .items > li {
    display: block;
    position: relative
}

.bloc header .pcNav .right .items > li > i {
    width: 1.04vw;
    height: 1.04vw;
    --active: #fff;
    opacity: 0;
    margin: -10px 0 0 -10px;
    transition: opacity .3s cubic-bezier(.435, .25, .15, .965), transform .3s cubic-bezier(.435, .25, .15, .965);
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: matrix(.6, 0, 0, -1, 0, -3)
}

.bloc header .pcNav .right .items > li > i:after {
    content: "";
    width: 10px;
    height: 2px;
    background: var(--active);
    transform-origin: 50% 9px;
    border-radius: 1px;
    margin: -1px 0 0 -8px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(58deg)
}

.bloc header .pcNav .right .items > li > i:before {
    content: "";
    width: 10px;
    height: 2px;
    background: var(--active);
    transform-origin: 50% 9px;
    border-radius: 1px;
    margin: -1px 0 0 -2px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-58deg)
}

.bloc header .pcNav .right .items > li > a {
    z-index: 4;
    padding: 0 1.67vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    display: block;
    position: relative;
    color: #fff;
}

.bloc header .pcNav .right .items > li.on i {
    opacity: 1;
    --active: #9fb935;
    transform: matrix(1, 0, 0, -1, 0, 0)
}

.bloc header .pcNav .right .items > li.on i:before {
    transform: rotate(-45deg)
}

.bloc header .pcNav .right .items > li.on i:after {
    transform: rotate(45deg)
}

.bloc header .pcNav .right .items > li.on > a {
    color: #9fb935
}

.bloc header .pcNav .right .items > li:hover i {
    opacity: 1;
    --active: #9fb935;
    transform: matrix(1, 0, 0, -1, 0, 0)
}

.bloc header .pcNav .right .items > li:hover i:before {
    transform: rotate(-45deg)
}

.bloc header .pcNav .right .items > li:hover i:after {
    transform: rotate(45deg)
}

.bloc header .pcNav .right .items > li:hover > a {
    color: #9fb935 !important
}

.bloc header .pcNav .right .other .line {
    width: 2px;
    height: 1.04vw;
    background-color: #9fb935;
    transform: rotate(28deg)
}

.bloc header .pcNav .right .other .searchIcon {
    padding: 0 1.56vw
}

.bloc header .pcNav .right .other .searchIcon i {
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    display: block
}

.bloc header .pcNav .right .other .searchIcon:hover i {
    color: #9fb935
}

.bloc header nav.app-nav {
    z-index: 2000;
    width: 100vw;
    height: 1rem;
    pointer-events: auto;
    transition: all .5s;
    position: fixed;
    top: 0;
    left: 0
}

.bloc header nav.app-nav .inner_top {
    height: 1.36rem;
    width: 100%;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    transition: all .5s;
    display: -ms-flexbox;
    display: flex
}

.bloc header nav.app-nav .inner_top .topic {
    z-index: 10;
    height: 1rem;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 5%;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.bloc header nav.app-nav .inner_top .topic #app-menu {
    z-index: 10;
    display: inline-block;
    position: relative
}

.bloc header nav.app-nav .inner_top .topic #app-menu .line {
    padding-top: 3px;
    padding-bottom: 3px;
    transition: all .4s;
    display: block
}

.bloc header nav.app-nav .inner_top .topic #app-menu .line:before {
    content: "";
    height: 2px;
    width: .44rem;
    background-color: #fff;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 2px;
    transition: transform .4s .2s, background-color .5s;
    display: block
}

.bloc header nav.app-nav .inner_top .topic #app-menu .line:nth-of-type(2):before {
    width: .3rem;
    margin-left: 7px
}

.bloc header nav.app-nav .inner_top .topic .app-logo {
    z-index: 10;
    height: 100%;
    position: relative
}

.bloc header nav.app-nav .inner_top .topic .app-logo > a {
    height: .5rem;
    display: inline-block;
    position: relative
}

.bloc header nav.app-nav .inner_top .topic .app-logo > a .logo_w {
    height: 100%;
    opacity: 1;
    transition: opacity .3s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    left: 0
}

.bloc header nav.app-nav .inner_top .topic .app-logo > a .logo_g {
    height: 100%;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    left: 0
}

.bloc header nav.app-nav .inner_top .topic .layer-down {
    height: 100%;
    position: absolute;
    top: 0;
    right: calc(5% + 2rem)
}

.bloc header nav.app-nav .inner_top .topic .layer-down > a {
    padding-top: 5px
}

.bloc header nav.app-nav .inner_top .topic .app-search {
    height: 1rem;
    z-index: 10;
    position: absolute;
    top: 0;
    right: calc(1rem + 5%)
}

.bloc header nav.app-nav .inner_top .topic .app-search > i {
    color: #fff;
    font-size: .38rem
}

.bloc header nav.app-nav .inner_top.on {
    height: 1rem;
    background-color: #fdfff8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.bloc header nav.app-nav .inner_top.on .topic {
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.bloc header nav.app-nav .inner_top.on .topic #app-menu .line:before {
    background-color: #333
}

.bloc header nav.app-nav .inner_top.on .topic .app-logo > a .logo_w {
    opacity: 0
}

.bloc header nav.app-nav .inner_top.on .topic .app-logo > a .logo_g {
    opacity: 1
}

.bloc header nav.app-nav .inner_top.on .topic .layer-down .wc {
    color: #333
}

.bloc header nav.app-nav .inner_top.on .topic .layer-down .wc em {
    border-color: #333 transparent transparent
}

.bloc header nav.app-nav .inner_top.on .topic .app-search > i {
    color: #333
}

.bloc header nav.app-nav .inner_mid {
    width: 100%;
    height: calc(100% - 1rem);
    background-color: #fdfff8;
    position: absolute;
    top: 1rem;
    left: 0;
    overflow: hidden
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList {
    padding: 0 5%;
    transition: background-color .5s;
    position: relative
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList > a {
    height: 1.5rem;
    white-space: nowrap;
    width: 90%;
    border-bottom: 1px solid rgba(0, 0, 0, .09);
    line-height: 1.5rem;
    display: block
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList > i {
    height: .48rem;
    text-align: right;
    font-size: .24rem;
    line-height: .48rem;
    transition: transform .5s ease-in-out;
    display: inline-block
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList.active {
    background-color: rgba(0, 135, 85, .05)
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList.active > i {
    transform: rotate(90deg) scaleY(1.2)
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first .child_second {
    max-height: 0;
    background-color: rgba(0, 135, 85, .05);
    transition: all .5s;
    overflow: hidden
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first .child_second > li {
    padding: 0 9%;
    position: relative
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first .child_second > li:first-of-type {
    padding-top: .2rem
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first .child_second > li:last-of-type {
    padding-bottom: .2rem
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first .child_second > li > a {
    padding: .3rem 0;
    display: block
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first .child_second > li.active {
    background-color: #f0f1f2
}

.bloc header nav.app-nav .inner_mid .nav-items > .child_first .child_second.active {
    max-height: 100vh
}

.bloc header nav.app-nav.on {
    height: 100vh
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(1) {
    transform: translateY(8px)
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(1):before {
    transform: rotate(45deg)
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(2) {
    opacity: 0
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(3) {
    transform: translateY(-8px)
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(3):before {
    transform: rotate(-45deg)
}

.bloc header.navBlack {
    height: 1rem;
    background-color: #fff
}

.bloc header.navBlack .pcNav > .layer-icon .logo {
    opacity: 0
}

.bloc header.navBlack .pcNav > .layer-icon .logo_g {
    opacity: 1
}

.bloc header.navBlack .pcNav .right .items > li:not(.on) .wc, .bloc header.navBlack .pcNav .right .other .wc {
    color: #707070
}

.bloc header.navBlack .pcNav .right .other em {
    border-color: #707070 transparent transparent
}

.bloc header.navBlack nav.app-nav .inner_top {
    height: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.bloc header.navBlack nav.app-nav .inner_top .topic {
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.bloc header.navBlack nav.app-nav .inner_top .topic #app-menu .line:before {
    background-color: #333
}

.bloc header.navBlack nav.app-nav .inner_top .topic .app-logo > a .logo_w {
    opacity: 0
}

.bloc header.navBlack nav.app-nav .inner_top .topic .app-logo > a .logo_g {
    opacity: 1
}

.bloc header.navBlack nav.app-nav .inner_top .topic .layer-down .wc {
    color: #333
}

.bloc header.navBlack nav.app-nav .inner_top .topic .layer-down .wc em {
    border-color: #333 transparent transparent
}

.bloc header.navBlack nav.app-nav .inner_top .topic .app-search > i {
    color: #333
}

.bloc header.blackType {
    height: 1rem
}

.bloc header.blackType .pcNav > .layer-icon .logo {
    opacity: 0
}

.bloc header.blackType .pcNav > .layer-icon .logo_g {
    opacity: 1
}

.bloc header.blackType .pcNav .right .items > li:not(.on) .wc, .bloc header.blackType .pcNav .right .other .wc {
    color: #707070
}

.bloc header.blackType .pcNav .right .other em {
    border-color: #707070 transparent transparent
}

.bloc header.blackType nav.app-nav .inner_top {
    height: 1rem
}

.bloc header.blackType nav.app-nav .inner_top .topic #app-menu .line:before {
    background-color: #333
}

.bloc header.blackType nav.app-nav .inner_top .topic .app-logo > a .logo_w {
    opacity: 0
}

.bloc header.blackType nav.app-nav .inner_top .topic .app-logo > a .logo_g {
    opacity: 1
}

.bloc header.blackType nav.app-nav .inner_top .topic .layer-down .wc {
    color: #333
}

.bloc header.blackType nav.app-nav .inner_top .topic .layer-down .wc em {
    border-color: #333 transparent transparent
}

.bloc header.blackType nav.app-nav .inner_top .topic .app-search > i {
    color: #333
}

.bloc header.navWc {
    height: 1rem;
    background-color: #fff
}

.bloc header.navWc .pcNav > .layer-icon .logo {
    opacity: 0
}

.bloc header.navWc .pcNav > .layer-icon .logo_g {
    opacity: 1
}

.bloc header.navWc .pcNav .right .items > li:not(.on) .wc, .bloc header.navWc .pcNav .right .other .wc {
    color: #707070
}

.bloc header.navWc .pcNav .right .other em {
    border-color: #707070 transparent transparent
}

.bloc header.navWc nav.app-nav .inner_top {
    height: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.bloc header.navWc nav.app-nav .inner_top .topic {
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.bloc header.navWc nav.app-nav .inner_top .topic #app-menu .line:before {
    background-color: #333
}

.bloc header.navWc nav.app-nav .inner_top .topic .app-logo > a .logo_w {
    opacity: 0
}

.bloc header.navWc nav.app-nav .inner_top .topic .app-logo > a .logo_g {
    opacity: 1
}

.bloc header.navWc nav.app-nav .inner_top .topic .app-search > i {
    color: #333
}

.bloc header.down {
    opacity: 0
}

.bloc header.down:hover {
    opacity: 1
}

.bloc header.down + main > .tree {
    transform: translateY(-6.25vw)
}

.bloc header.down + main > .tree a.on .msg .img {
    opacity: 0 !important
}

.bloc footer {
    background-color: #545454;
    position: relative;
    overflow: hidden
}

.bloc footer .fBg .line {
    width: 100%;
    display: block;
    position: relative
}

.bloc footer .fBg .line .st {
    stroke-dasharray: 200%;
    stroke-dashoffset: 200%;
    transition: stroke-dashoffset 2s cubic-bezier(.435, .25, .15, .965)
}

.bloc footer .fBg .line .st1, .bloc footer .fBg .line .st2 {
    stroke: rgba(255, 255, 255, .07);
    stroke-width: 1px
}

.bloc footer .fBg .line .st3 {
    fill: #9fb935
}

.bloc footer .fBg .line.go .st {
    stroke-dashoffset: 120%
}

.bloc footer .fMid {
    z-index: 10;
    padding: 6.77vw 6.67vw 6.77vw 13.54vw;
    position: relative
}

.bloc footer .fMid .items {
    width: 50%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex
}

.bloc footer .fMid .items > li {
    padding-left: 2.6vw;
    position: relative
}

.bloc footer .fMid .items > li .layer-arrow {
    left: 0
}

.bloc footer .fMid .items > li > a {
    z-index: 10;
    line-height: 1.35;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    display: block;
    position: relative;
    color: #fff;
}

.bloc footer .fMid .items > li.on .layer-arrow, .bloc footer .fMid .items > li:hover .layer-arrow {
    opacity: 1;
    --active: #9fb935;
    transform: matrix(1, 0, 0, 1, 0, 0)
}

.bloc footer .fMid .items > li.on .layer-arrow:after, .bloc footer .fMid .items > li:hover .layer-arrow:after {
    transform: rotate(40deg)
}

.bloc footer .fMid .items > li.on .layer-arrow:before, .bloc footer .fMid .items > li:hover .layer-arrow:before {
    transform: rotate(-40deg)
}

.bloc footer .fMid .items > li.on > a, .bloc footer .fMid .items > li:hover > a {
    color: #9fb935
}

.bloc footer .fMid .fxs {
    width: 43%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.bloc footer .fMid .fxs img {
    height: 5.73vw;
    display: block
}

.bloc footer .fMid .fxs .con {
    width: 100%;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-top: 2.08vw;
      flex-wrap: wrap;
}

.bloc footer .fMid .fxs .con p {
    line-height: 1.45;
  margin-top: 20px;
}

.bloc footer .fMid .fxs .con p b {
    color: #9fb935;
    margin-right: 5px;
    font-weight: 400;
    display: block
}

.bloc footer .fMid .fxs .con .line {
    width: 1px;
    height: 2.08vw;
    background-color: rgba(255, 255, 255, .2);
    margin: 0 2.6vw;
    transform: rotate(22deg)
}

.bloc footer .fBm {
    height: 4.38vw;
    z-index: 10;
    padding: 0 6.67vw 0 13.54vw;
    position: relative
}

.bloc footer .fBm .col {
    width: 50%
}

.bloc footer .fBm .c1 {
    -ms-flex-pack: start;
    justify-content: flex-start
}

.bloc footer .fBm .c1 .f-16 {
    color: rgba(255, 255, 255, .5)
}

.bloc footer .fBm .c2 {
    width: 43%
}

.bloc footer .fBm .c2 .items {
    -ms-flex-pack: start;
    justify-content: flex-start
}

.bloc footer .fBm .c2 .items li a {
    padding: 0 1.56vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    display: block
}

.bloc footer .fBm .c2 .items li a:hover {
    color: #fff
}

.bloc footer .fBm .c2 .items li .f-14 {
    color: rgba(255, 255, 255, .5)
}

.bloc footer .fBm .c2 .items li:first-of-type a {
    padding-left: 0
}

.bloc footer .fBm .c2 .items .line {
    width: 1px;
    height: 12px;
    background-color: rgba(255, 255, 255, .2);
    transform: rotate(22deg)
}

.bloc footer .fBm .c2 .layer-bg {
    height: .84rem;
    cursor: pointer;
    padding: 0 .35rem
}

.bloc footer .fBm .c2 .layer-bg:after {
    content: "";
    width: 1px;
    height: 50vw;
    transform-origin: 50% 96%;
    background-color: rgba(255, 255, 255, .07);
    position: absolute;
    bottom: 0;
    right: 0;
    transform: skew(-28deg)
}

.bloc footer .fBm .c2 .layer-bg .pr {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

.bloc footer .fBm .c2 .layer-bg .pr > img {
    width: 1.88vw
}

.bloc footer .fBm .c2 .layer-bg .pr span {
    letter-spacing: 1px;
    margin-top: 10px;
    display: block
}

.bloc .fx {
    cursor: pointer;
    z-index: 100;
    width: 1rem;
    height: 100%;
    pointer-events: none;
    position: fixed;
    top: 10vw;
    right: -.42rem
}

.bloc .fx .skew {
    background-color: #fff;
    box-shadow: 0 .15rem .4rem rgba(136, 147, 89, .28)
}

.bloc .fx .pr {
    color: #9fb935;
    height: .7rem;
    width: 1.2rem;
    pointer-events: auto;
    padding: 0 .25rem;
    line-height: .7rem;
    display: block
}

#home {
    width: 100%;
    display: block
}

#home #loading {
    width: 100%;
    height: 100%;
    z-index: 500;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden
}

#home #loading .mask {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(0)
}

#home #loading .mask #maskPath {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    transform-origin: 58%;
    transition: transform 1s ease-in-out
}

#home #loading .mask .st3 {
    transform: scale(.00052, .00093)
}

#home #loading .mask.on #maskPath {
    transform: scale3d(14, 14, 14)
}

#home #loading .line {
    width: 177vh;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0
}

#home #loading .line .st {
    stroke-dasharray: 200%;
    stroke-dashoffset: 200%
}

#home #loading .line .st1 {
    stroke: #9fb935;
    stroke-width: 1px
}

#home #loading .line .st2 {
    stroke: rgba(159, 185, 53, .5);
    stroke-width: 1px
}

#home #loading .line .st3 {
    fill: #9fb935
}

#home #loading .progress {
    position: absolute;
    bottom: 6.77vw;
    left: 13.54vw
}

#home #loading .progress #sum {
    margin-right: 10px;
    font-size: .72rem;
    line-height: 1
}

#home #loading .photo {
    z-index: 10;
    transition: all 1s ease-in-out;
    overflow: hidden;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    -webkit-mask-size: 177vh;
    mask-size: 177vh;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

#home #loading .photo .pic {
    z-index: 20;
    height: 100vh;
    top: auto;
    bottom: 0
}

#home #loading .photo .mk {
    z-index: 30;
    transform-origin: 50% 100%;
    background-color: #9fb935
}

#home #loading .photo.on {
    -webkit-mask-position: -800vw;
    mask-position: -800vw;
    -webkit-mask-size: 1500vw;
    mask-size: 1500vw
}

#home .banner {
    height: 100vh;
    width: 100%;
    position: relative
}

#home .banner .bg {
    z-index: 1;
    height: 100%;
    width: 100%;
    top: auto;
    bottom: 0;
    overflow: hidden
}

#home .banner .bg .photo {
    z-index: 1;
    opacity: 0;
    height: 100%;
    width: calc(100% + 60vw);
    will-change: width;
    background-color: #000;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: -30vw;
    transform: skew(-28deg)
}

#home .banner .bg .photo .pic {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 30vw;
    transform: skew(28deg)
}

#home .banner .bg .photo.in {
    opacity: 1
}

#home .banner .bg .photo.out, #home .banner .bg .photo.on {
    opacity: 1;
    z-index: 10
}

#home .banner .bg canvas {
    z-index: 2
}

#home .banner .bg:after {
    content: "";
    z-index: 100;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .3)
}

#home .banner .inner {
    height: 100%;
    width: 100%;
    z-index: 10;
    padding: 0 8.33vw;
    position: relative;
    top: 0;
    left: 0
}

#home .banner .inner .items {
    width: 100%;
    height: 23.44vw;
    padding: 0 5.21vw;
    position: relative
}

#home .banner .inner .items > li {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    position: absolute;
    top: 0;
    left: 5.21vw
}

#home .banner .inner .items > li h1 {
    color: #fff;
    letter-spacing: -3px;
    margin-bottom: 3.13vw;
    font-size: 5.94vw;
    line-height: .85
}

#home .banner .inner .pager {
    z-index: 10;
    -ms-flex-pack: start;
    justify-content: flex-start;
    position: absolute;
    bottom: 4.69vw;
    left: 8.33vw
}

#home .banner .inner .pager > li {
    cursor: pointer;
    width: 8px;
    height: 9px;
    transform-origin: 50% 0;
    background-color: rgba(255, 255, 255, .5);
    margin: 0 .78vw;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965), width .5s cubic-bezier(.435, .25, .15, .965);
    transform: skew(-20deg)
}

#home .banner .inner .pager > li:first-of-type {
    margin-left: 0
}

#home .banner .inner .pager > li.on {
    width: .83vw;
    background-color: #fff;
    transform: scaleY(1.8) skew(-35deg)
}

#home .banner .inner .pager > li:hover {
    background-color: #fff
}

#home .banner .inner .scr {
    pointer-events: none;
    width: 100%;
    z-index: 12;
    animation: .8s cubic-bezier(.435, .25, .15, .965) infinite alternate scrFn;
    position: absolute;
    bottom: 4.27vw;
    left: 0
}

#home .banner .inner .scr > img {
    width: 2.71vw;
    display: block
}

#home .banner .inner .msg {
    padding: 5.21vw 5.21vw 5.21vw 6.77vw;
    display: inline-block;
    position: absolute;
    bottom: -9.38vw;
    right: 9.38vw
}

#home .banner .inner .msg .skew:before {
    content: "";
    background-color: #707070;
    top: -68%;
    left: calc(100% + .4rem)
}

#home .banner .inner .msg p {
    width: 22.92vw
}

#home .r1 {
    height: calc(100vh + 416.67vw);
    background-color: #f7f7f7
}

#home .r1 .clear {
    height: 16.67vw;
    width: 100%;
    position: relative
}

#home .r1 .inner {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0
}

#home .r1 .inner .topic {
    z-index: 50;
    margin-bottom: 4.69vw;
    position: relative
}

#home .r1 .inner .topic h2 {
    transform-origin: 0 100%;
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.1;
    transition: color .5s ease-in-out
}

#home .r1 .inner .topic h2.wc {
    color: #fff
}

#home .r1 .inner .items {
    width: 24.22vw;
    z-index: 10;
    position: relative
}

#home .r1 .inner .items > li {
    pointer-events: none;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    line-height: 1.25vw;
    position: absolute;
    top: 0;
    left: 0
}

#home .r1 .inner .items > li .layer-btn {
    margin-top: 1.82vw;
    position: absolute;
    top: 1.2rem;
    left: 0
}

#home .r1 .inner .items > li .layer-btn.wc {
    background-color: #fff
}

#home .r1 .inner .items > li .layer-btn.wc:after {
    background-color: #ecf8d4
}

#home .r1 .inner .items > li .layer-btn.wc .wc {
    color: #9fb935
}

#home .r1 .inner .items > li .alan {
    opacity: 0;
    animation-duration: .7s;
    animation-fill-mode: both;
    transform: translate(10%)
}

#home .r1 .inner .items > li .alan:nth-of-type(2) {
    animation-delay: 50ms
}

#home .r1 .inner .items > li.on .layer-btn {
    pointer-events: auto
}

#home .r1 .inner .items > li.on .alan {
    opacity: 1;
    transform: none
}

#home .r1 .inner .items > li.nextOut .alan {
    animation-name: opNextOut
}

#home .r1 .inner .items > li.nextIn .alan {
    animation-name: opNextIn
}

#home .r1 .inner .items > li.prevOut .alan {
    animation-name: opPrevOut
}

#home .r1 .inner .items > li.prevIn .alan {
    animation-name: opPrevIn
}

#home .r1 .inner .pager {
    height: 50%;
    z-index: 20;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: end;
    align-items: flex-end;
    margin: auto 0;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 8.33vw
}

#home .r1 .inner .pager > li {
    z-index: 8;
    cursor: pointer;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

#home .r1 .inner .pager > li .dot {
    margin: auto 0;
    transition: color .5s ease-in-out;
    top: 0;
    bottom: 0
}

#home .r1 .inner .pager > li.on {
    color: #9fb935
}

#home .r1 .inner .pager > li.on .dot {
    background-color: #9fb935;
    transform: scale(2.5) skew(-24deg)
}

#home .r1 .inner .pager .line {
    width: 1px;
    height: 92%;
    background-color: rgba(56, 60, 42, .2);
    right: 2px
}

#home .r1 .inner .pager .line #lineGo {
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    background-color: #9fb935;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    transform: scaleY(0)
}

#home .r1 .inner .pager.active > li {
    color: #383c2a
}

#home .r1 .inner .pager.active > li .dot {
    background-color: #383c2a
}

#home .r1 .inner .pager.active > li.on {
    color: #9fb935
}

#home .r1 .inner .pager.active > li.on .dot {
    background-color: #9fb935
}

#home .r1 .inner .pager.active .line {
    background-color: #383c2a
}

#home .r1 .inner .pager.active .line #lineGo {
    background-color: #9fb935
}

#home .r1 .inner .pager.on > li {
    color: rgba(255, 255, 255, .6)
}

#home .r1 .inner .pager.on > li .dot {
    background-color: rgba(255, 255, 255, .6)
}

#home .r1 .inner .pager.on > li.on {
    color: #fff
}

#home .r1 .inner .pager.on > li.on .dot {
    background-color: #fff
}

#home .r1 .inner .pager.on .line {
    background-color: rgba(255, 255, 255, .5)
}

#home .r1 .inner .pager.on .line #lineGo {
    background-color: #fff
}

#home .r1 .inner .imgBox {
    z-index: 2;
    width: 100%;
    height: 100%;
    perspective: 26.04vw;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    position: absolute;
    bottom: 0;
    left: 0
}

#home .r1 .inner .imgBox .photo {
    pointer-events: none;
    opacity: 0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden
}

#home .r1 .inner .imgBox .photo .pic {
    z-index: 2;
    transform-origin: 100%;
    width: 0;
    will-change: width;
    animation-duration: .7s;
    animation-fill-mode: both;
    left: auto;
    right: 0;
    overflow: hidden
}

#home .r1 .inner .imgBox .photo .pic .picImg {
    width: 100vw;
    height: 100%;
    mix-blend-mode: multiply;
    opacity: .2;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 58.85vw;
    position: absolute;
    top: 2vw;
    right: 0
}

#home .r1 .inner .imgBox .photo .img {
    height: 100%;
    z-index: 5;
    opacity: 0;
    margin-top: 2%;
    animation-duration: .7s;
    animation-fill-mode: both;
    position: relative
}

#home .r1 .inner .imgBox .photo:nth-of-type(1) .pic {
    background-color: #f7f7f7
}

#home .r1 .inner .imgBox .photo:nth-of-type(2) .pic {
    background-color: #fdfff8
}

#home .r1 .inner .imgBox .photo:nth-of-type(3) .pic {
    background-color: #ddd
}

#home .r1 .inner .imgBox .photo:nth-of-type(4) .pic {
    background-color: #9fb935
}

#home .r1 .inner .imgBox .photo.on {
    opacity: 1
}

#home .r1 .inner .imgBox .photo.on .pic {
    width: 100%
}

#home .r1 .inner .imgBox .photo.on .img {
    opacity: 1;
    transform: none
}

#home .r1 .inner .imgBox .photo.nextOut {
    opacity: 1
}

#home .r1 .inner .imgBox .photo.nextOut .pic {
    width: 100%
}

#home .r1 .inner .imgBox .photo.nextOut .img {
    animation-name: opNextOut
}

#home .r1 .inner .imgBox .photo.nextIn {
    opacity: 1;
    z-index: 100
}

#home .r1 .inner .imgBox .photo.nextIn .pic {
    animation-name: widNextIn
}

#home .r1 .inner .imgBox .photo.nextIn .img {
    animation-name: opNextIn
}

#home .r1 .inner .imgBox .photo.prevOut {
    opacity: 1
}

#home .r1 .inner .imgBox .photo.prevOut .pic {
    animation-name: widNextOut
}

#home .r1 .inner .imgBox .photo.prevOut .img {
    animation-name: opPrevOut
}

#home .r1 .inner .imgBox .photo.prevIn {
    opacity: 1
}

#home .r1 .inner .imgBox .photo.prevIn .pic {
    width: 100%
}

#home .r1 .inner .imgBox .photo.prevIn .img {
    animation-name: opPrevIn
}

#home .r1 .appInner {
    padding-top: 2.8rem;
    position: relative
}

#home .r1 .appInner .maxSize {
    z-index: 10;
    padding-bottom: 1rem;
    position: relative
}

#home .r1 .appInner .topic {
    z-index: 50;
    margin-bottom: 4.69vw;
    position: relative
}

#home .r1 .appInner .topic h2 {
    transform-origin: 0 100%;
    font-size: 1rem;
    line-height: 1.1;
    transition: color .5s ease-in-out
}

#home .r1 .appInner .topic h2.wc {
    color: #fff
}

#home .r1 .appInner .swiper_r1 {
    position: relative
}

#home .r1 .appInner .swiper_r1 .swiper-slide {
    width: 100%
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox {
    position: relative
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    line-height: .42rem;
    position: absolute;
    top: 0;
    left: 0
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-li {
    margin-bottom: .1rem;
    font-size: .3rem
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-btn {
    pointer-events: auto;
    margin-top: 1.82vw;
    position: absolute;
    top: 2.4rem;
    left: 0
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-btn.wc {
    background-color: #fff
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-btn.wc:after {
    background-color: #ecf8d4
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-btn.wc .wc {
    color: #9fb935
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .imgBox {
    width: 100%;
    padding-top: 3rem;
    position: relative
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .imgBox .img {
    width: 200%;
    z-index: 5;
    margin-top: 2%;
    margin-left: -50%;
    position: relative
}

#home .r1 .appInner .swiper_r1 .swiper-button-next {
    color: #9fb935;
    pointer-events: none;
    outline: none;
    font-size: .38rem;
    animation: .8s ease-in-out infinite alternate scrFn_l;
    position: absolute;
    bottom: 47vw;
    right: 0
}

#home .r1 .appInner .swiper_r1 .swiper-button-next.my-button-disabled {
    opacity: 0
}

#home .r1 .appInner .pager {
    height: 1.4rem;
    z-index: 20;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0
}

#home .r1 .appInner .pager > li {
    z-index: 8;
    cursor: pointer;
    width: 88vw;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 12vw;
    padding-left: 0;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#home .r1 .appInner .pager > li .dot {
    margin-bottom: .2rem;
    position: relative;
    top: 0
}

#home .r1 .appInner .pager > li.on {
    color: #9fb935
}

#home .r1 .appInner .pager > li.on .dot {
    background-color: #9fb935;
    transform: scale(2.5) skew(-24deg)
}

#home .r1 .appInner .pager > li:last-of-type {
    margin-right: 0
}

#home .r1 .appInner .pager .line {
    width: calc(100% - 88vw);
    height: 1px;
    background-color: rgba(56, 60, 42, .2);
    top: 2px
}

#home .r1 .appInner .pager .line #lineGo {
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    background-color: #9fb935;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    transform: scaleY(0)
}

#home .r1 .appInner .pager.active > li {
    color: #383c2a
}

#home .r1 .appInner .pager.active > li .dot {
    background-color: #383c2a
}

#home .r1 .appInner .pager.active > li.on {
    color: #9fb935
}

#home .r1 .appInner .pager.active > li.on .dot {
    background-color: #9fb935
}

#home .r1 .appInner .pager.active .line {
    background-color: #383c2a
}

#home .r1 .appInner .pager.active .line #lineGo {
    background-color: #9fb935
}

#home .r1 .appInner .pager.on > li {
    color: #fff
}

#home .r1 .appInner .pager.on > li .dot {
    background-color: #fff
}

#home .r1 .appInner .pager.on .line {
    background-color: rgba(255, 255, 255, .5)
}

#home .r1 .appInner > .other .swiper-wrapper, #home .r1 .appInner > .other .swiper-slide {
    height: 100%
}

#home .r1 .appInner > .other .swiper-slide:nth-of-type(1) .pic {
    background-color: #f7f7f7
}

#home .r1 .appInner > .other .swiper-slide:nth-of-type(2) .pic {
    background-color: #fdfff8
}

#home .r1 .appInner > .other .swiper-slide:nth-of-type(3) .pic {
    background-color: #ecf8d4
}

#home .r1 .appInner > .other .swiper-slide:nth-of-type(4) .pic {
    background-color: #9fb935
}

#home .r1 .appInner > .other .photo {
    pointer-events: none;
    height: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden
}

#home .r1 .appInner > .other .photo .pic {
    z-index: 2;
    transform-origin: 100%;
    width: 100vw;
    height: 100%;
    will-change: width;
    animation-duration: .7s;
    animation-fill-mode: both;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    overflow: hidden
}

#home .r1 .appInner > .other .photo .pic .picImg {
    width: 100vw;
    height: 112.5vw;
    mix-blend-mode: multiply;
    opacity: .2;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0
}

#home .r1 .appInner > .other .photo.on {
    opacity: 1
}

#home .r1 .appInner > .other .photo.on .pic {
    width: 100%
}

#home .r1 .appInner > .other .photo.nextOut {
    opacity: 1
}

#home .r1 .appInner > .other .photo.nextOut .pic {
    width: 100%
}

#home .r1 .appInner > .other .photo.nextIn {
    opacity: 1;
    z-index: 100
}

#home .r1 .appInner > .other .photo.nextIn .pic {
    animation-name: widNextIn
}

#home .r1 .appInner > .other .photo.prevOut {
    opacity: 1
}

#home .r1 .appInner > .other .photo.prevOut .pic {
    animation-name: widNextOut
}

#home .r1 .appInner > .other .photo.prevIn {
    opacity: 1
}

#home .r1 .appInner > .other .photo.prevIn .pic {
    width: 100%
}

#home .r2 {
    width: 100%;
    padding-top: 6.25vw;
    padding-bottom: 0;
    overflow: hidden
}

#home .r2 .inner .top {
    -ms-flex-align: start;
    align-items: flex-start
}

#home .r2 .inner .top .layer-topic {
    transform-origin: 0 0
}

#home .r2 .inner .top .col {
    width: 36.46vw
}

#home .r2 .inner .top .col > p {
    margin-bottom: 2.6vw
}

#home .r2 .inner .top .col .items {
    grid-auto-flow: column;
    -ms-flex-pack: start;
    justify-content: start;
    gap: .5rem;
    display: grid
}

#home .r2 .inner .top .col .items > li span {
    line-height: 1;
    display: block
}

#home .r2 .inner .mid {
    padding-top: 6.25vw;
    position: relative
}

#home .r2 .inner .mid .imgBox {
    height: 34.79vw;
    width: 100%;
    padding-bottom: 30.8%;
    position: relative
}

#home .r2 .inner .mid .imgBox > img {
    object-fit: cover;
    margin: 0 auto;
    display: block
}

#home .r2 .inner .mid .imgBox .dataItems {
    z-index: 10
}

#home .r2 .inner .mid .imgBox .dataItems > li {
    position: absolute
}

#home .r2 .inner .mid .imgBox .dataItems > li div {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-bottom: 4.17vw;
    padding-left: 1.56vw;
    display: -ms-flexbox;
    display: flex
}

#home .r2 .inner .mid .imgBox .dataItems > li div .num {
    margin-bottom: 10px;
    line-height: 1
}

#home .r2 .inner .mid .imgBox .dataItems > li div > small {
    line-height: 1.8;
    display: block
}

#home .r2 .inner .mid .imgBox .dataItems > li div:before {
    content: "";
    height: calc(100% - 1.82vw);
    width: 1px;
    background: linear-gradient(#9fb935 0%, rgba(159, 185, 53, 0) 100%);
    position: absolute;
    top: 1.82vw;
    left: 4px
}

#home .r2 .inner .mid .imgBox .dataItems > li div:after {
    content: "";
    width: 9px;
    height: 11px;
    background-color: #9fb935;
    position: absolute;
    top: 1.82vw;
    left: 0;
    transform: skew(-20deg)
}

#home .r3 {
    padding-top: 7.29vw;
    padding-bottom: 10.42vw;
    position: relative;
    overflow: hidden
}

#home .r3 .inner {
    z-index: 10;
    position: relative
}

#home .r3 .inner .layer-topic {
    width: 100%;
    text-align: center;
    margin-bottom: 4.17vw
}

#home .r3 .inner .layer-topic h2 {
    text-align: center
}

#home .r3 .inner .mid {
    width: 37.03vw;
    height: 37.03vw;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    position: relative
}

#home .r3 .inner .mid .cirBox {
    overflow: hidden
}

#home .r3 .inner .mid .cirBox #cirLine {
    width: 96%;
    height: 96%
}

#home .r3 .inner .mid .cirBox #cirLine .st {
    fill: #fff;
    transition: fill .5s cubic-bezier(.435, .25, .15, .965)
}

#home .r3 .inner .mid .cirBox #cirLine.mc .st {
    fill: #9fb935
}

#home .r3 .inner .mid .cirBox #cirLine.oc .st {
    fill: #ffc973
}

#home .r3 .inner .mid .cirBox .dotItems {
    width: 0;
    transform-origin: 50%;
    height: 48%;
    position: absolute;
    bottom: 50%;
    left: 50%
}

#home .r3 .inner .mid .cirBox .dotItems .dot {
    height: calc(100% + 4px);
    transform-origin: 50% 100%;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: -4px;
    left: 0
}

#home .r3 .inner .mid .cirBox .dotItems .dot span {
    width: 10px;
    height: 10px;
    background: #3d423c;
    border: 2px solid #fff;
    border-radius: 50%;
    transition: border-color .5s cubic-bezier(.435, .25, .15, .965);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

#home .r3 .inner .mid .cirBox .dotItems .dot.on {
    opacity: 0
}

#home .r3 .inner .mid .cirBox .dotItems .dot.mc span {
    border-color: #9fb935
}

#home .r3 .inner .mid .cirBox .dotItems .dot.oc span {
    border-color: #ffc973
}

#home .r3 .inner .mid .cirBox .dotItems .dot.wc span {
    border-color: #fff
}

@media screen and (min-width: 900px) {
    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) {
        transform: rotate(45deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) span {
        transform: translate(-50%) rotate(-45deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) {
        transform: rotate(90deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) span {
        transform: translate(-50%) rotate(-90deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) {
        transform: rotate(135deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) span {
        transform: translate(-50%) rotate(-135deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) {
        transform: rotate(225deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) span {
        transform: translate(-50%) rotate(-225deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) {
        transform: rotate(270deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) span {
        transform: translate(-50%) rotate(-270deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) {
        transform: rotate(315deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) span {
        transform: translate(-50%) rotate(-315deg)
    }
}

@media screen and (max-width: 900px) {
    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) {
        transform: rotate(0)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) span {
        transform: translate(-50%) rotate(0)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) {
        transform: rotate(60deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) span {
        transform: translate(-50%) rotate(-60deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) {
        transform: rotate(120deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) span {
        transform: translate(-50%) rotate(-120deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) {
        transform: rotate(180deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) span {
        transform: translate(-50%) rotate(-180deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) {
        transform: rotate(240deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) span {
        transform: translate(-50%) rotate(-240deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) {
        transform: rotate(300deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) span {
        transform: translate(-50%) rotate(-300deg)
    }
}

#home .r3 .inner .mid .cirBox .imgBox {
    width: 88%;
    height: 88%;
    border-radius: 50%;
    overflow: hidden;
    transform: translateZ(1px)
}

#home .r3 .inner .mid .cirBox .imgBox .photo {
    opacity: 0;
    border-radius: 50%;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965), transform 1.5s cubic-bezier(.435, .25, .15, .965);
    overflow: hidden;
    transform: scale(1.1)
}

#home .r3 .inner .mid .cirBox .imgBox .photo .pic {
    border-radius: 50%
}

#home .r3 .inner .mid .cirBox .imgBox .photo.on {
    opacity: 1;
    transform: none
}

#home .r3 .inner .mid #cirItems .list {
    height: 100%;
    cursor: pointer;
    grid-template-rows:1fr 1fr 1fr;
    grid-template-columns:14.58vw;
    display: grid;
    position: absolute
}

#home .r3 .inner .mid #cirItems .list.right {
    top: 0;
    left: calc(100% + 1.04vw)
}

#home .r3 .inner .mid #cirItems .list.left {
    text-align: right;
    top: 0;
    right: calc(100% + 1.04vw)
}

#home .r3 .inner .mid #cirItems .list > li {
    width: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex
}

#home .r3 .inner .mid #cirItems .list > li .num {
    width: 100%;
    opacity: .2;
    margin-bottom: 1.04vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965);
    display: block
}

#home .r3 .inner .mid #cirItems .list > li h3 {
    width: 100%;
    opacity: .2;
    margin-bottom: 10px;
    line-height: 1.2;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#home .r3 .inner .mid #cirItems .list > li p {
    opacity: .2;
    line-height: 1.3;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#home .r3 .inner .mid #cirItems .list > li.on, #home .r3 .inner .mid #cirItems .list > li.on .num, #home .r3 .inner .mid #cirItems .list > li.on h3, #home .r3 .inner .mid #cirItems .list > li.on p {
    opacity: 1
}

#home .r3 .inner .mid #cirItemsApp {
    padding: .8rem 0
}

#home .r3 .inner .mid #cirItemsApp > li {
    width: 100%;
    opacity: 0;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965);
    display: -ms-flexbox;
    display: flex
}

#home .r3 .inner .mid #cirItemsApp > li .num {
    text-align: center;
    width: 100%;
    margin-bottom: 1.04vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965);
    display: block
}

#home .r3 .inner .mid #cirItemsApp > li h3 {
    text-align: center;
    white-space: nowrap;
    width: 100%;
    margin-bottom: .3rem;
    line-height: 1.2;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#home .r3 .inner .mid #cirItemsApp > li p {
    width: 88%;
    text-align: center;
    margin: 0 auto;
    font-size: .3rem;
    line-height: 1.3;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#home .r3 .inner .mid .swiper-button-prev {
    color: #fff;
    outline: none;
    position: absolute;
    top: 84vw;
    left: 0;
    background: none;
}

#home .r3 .inner .mid .swiper-button-next {
    color: #fff;
    outline: none;
    position: absolute;
    top: 84vw;
    right: 0;
    background: none;
}

#home .r4 {
    padding: 11.46vw 0;
    position: relative
}

#home .r4 .bg .photo {
    z-index: 2
}

#home .r4 .bg .photo .pic {
    background-position: 43vw;
    background-size: 87.5vw;
    background-attachment: fixed
}

#home .r4 .bg .photo:after {
    content: "";
    height: 100%;
    width: 18%;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(-90deg, rgba(0, 0, 0, .6) 0%, transparent 100%);
    position: absolute;
    top: 0;
    right: 0
}

#home .r4 .bg .mk {
    z-index: 6;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 28%
}

#home .r4 .bg .mk > span {
    background-color: #fff;
    transform: skew(-26deg)
}

#home .r4 .inner {
    z-index: 10;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative;
}

#home .r4 .inner .topic {
    margin-bottom: 5.21vw
}

#home .r4 .inner .topic h2 {
    margin-bottom: 1.04vw;
    line-height: 1.1
}

#home .r4 .inner .topic p {
    width: 29.58vw;
    line-height: 1.25
}

#home .r4 .inner .mid .items {
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

#home .r4 .inner .mid .items > li {
    max-width: 3rem;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-right: 6.77vw;
    display: -ms-flexbox;
    display: flex
}

#home .r4 .inner .mid .items > li .num {
    margin-bottom: 1.04vw;
    line-height: 1;
    font-size: 32px;
}

#home .r4 .inner .mid .items > li > p {
    margin-bottom: 2.08vw
}

#home .r4 .inner .mid .items > li > small {
    display: block
}

#home .r5 {
    background-color: #9fb935;
    padding: 6.25vw 0 4.17vw;
    position: relative
}

#home .r5 .inner {
    height: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

#home .r5 .inner .top {
    width: 100%;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 10px
}

#home .r5 .inner .top .til {
    width: calc(100% - 37.5vw)
}

#home .r5 .inner .top h2 {
    max-width: 100%;
    line-height: .8;
    display: inline-block
}

#home .r5 .inner .top .col {
    width: 35.42vw;
    padding-top: 10px
}

#home .r5 .inner .top .col h3 {
    margin-bottom: 1.56vw;
    padding-left: 1.3vw
}

#home .r5 .inner .top .col .items {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex
}

#home .r5 .inner .top .col .items > li {
    width: 100%;
    margin-bottom: 1.04vw;
    line-height: 1.375
}

#home .r5 .inner .mid, #home .r5 .inner .mid .swiper, #home .r5 .inner .mid .swiper .swiper-slide .box {
    width: 100%
}

#home .r5 .inner .mid .swiper .swiper-slide .box .img {
    height: 17.6vw;
    width: 14.01vw;
    position: relative
}

#home .r5 .inner .mid .swiper .swiper-slide .box .img > img {
    height: 100%;
    position: absolute;
    bottom: 0
}

#home .r5 .inner .mid .set {
    width: 10.94vw;
    height: 5.73vw;
    margin: 1.56vw auto 0;
    display: block;
    position: relative
}

#home .r5 .inner .mid .set > a {
    width: 5.21vw;
    height: 4.17vw;
    position: absolute
}

#home .r5 .inner .mid .set > a .skew {
    background-color: transparent;
    border: 3px solid #fff;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965)
}

#home .r5 .inner .mid .set > a i {
    color: #fff;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965)
}

#home .r5 .inner .mid .set .prev_ {
    top: 0;
    left: 0
}

#home .r5 .inner .mid .set .prev_ .skew:after {
    transform-origin: 100%;
    left: auto;
    right: 0
}

@media screen and (min-width: 900px) {
    #home .r5 .inner .mid .set .prev_:hover i {
        color: #9fb935;
        transform: translate(-5px)
    }
}

#home .r5 .inner .mid .set .next_ {
    bottom: 0;
    right: 0
}

@media screen and (min-width: 900px) {
    #home .r5 .inner .mid .set .next_:hover i {
        color: #9fb935;
        transform: translate(5px)
    }
}

#home .tree {
    height: 100%;
    z-index: 500;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965);
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 0;
    right: 2vw
}

#home .tree > li {
    cursor: pointer;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    margin: .1rem 0;
    padding: 7px 1.04vw;
    display: -ms-flexbox;
    display: flex
}

#home .tree > li .dot {
    opacity: .4;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965), background-color .5s cubic-bezier(.435, .25, .15, .965);
    transform: skew(0)
}

#home .tree > li span {
    opacity: 0;
    line-height: 1;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965);
    display: block
}

#home .tree > li.on .dot {
    opacity: 1;
    transform: skew(-22deg) scale(1.8)
}

#home .tree > li.on span {
    opacity: 1
}

#home .tree.null {
    opacity: 0;
    pointer-events: none
}

#home .tree.active .dot.wc {
    background-color: rgba(112, 112, 112, .4)
}

#home .tree.active .wc {
    color: #9fb935
}

#home .tree.active .on .dot.wc {
    background-color: #9fb935
}

#about .banner {
    height: 100vh;
    overflow: hidden
}

#about .banner .bg {
    overflow: hidden
}

#about .banner .bg .photo {
    overflow: visible
}

#about .banner .bg .photo .pic {
    height: calc(100% + 5.21vw);
    top: -2.6vw
}

#about .banner .inner {
    height: 100%;
    z-index: 5;
    position: relative
}

#about .banner .inner h1 {
    transform-origin: 0;
    max-width: 8.8rem;
    margin-bottom: 3.13vw;
    line-height: 1;
    color: #9fb935;
}

#about .banner .inner p {
    width: 7.8rem
}

#about .r1 {
    padding-top: 10.42vw;
    padding-bottom: 2.6vw
}

#about .r1 .inner .top {
    -ms-flex-align: start;
    align-items: flex-start
}

#about .r1 .inner .top .layer-topic {
    width: calc(100% - 37.5vw);
    position: relative
}

#about .r1 .inner .top .layer-topic:before {
    content: attr(data-note);
    opacity: 0;
    color: #9fb935;
    font-size: .24rem;
    position: absolute;
    bottom: calc(100% + .2rem);
    left: 0
}

#about .r1 .inner .top .col {
    width: 33.33vw;
    font-size: 18px;
    line-height: 3;
    text-indent: 2em;
}

#about .r1 .inner .mid {
    padding-top: .9rem
}

#about .r1 .inner .mid .imgBox {
    position: relative
}

#about .r1 .inner .mid .imgBox .img {
    height: 35.42vw;
    margin: 0 auto;
    display: block
}

#about .r1 .inner .mid .imgBox .group .c1 {
    width: 60%;
    height: 100%;
    position: relative
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems {
    z-index: 10
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li {
    position: absolute
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-left: .3rem;
    display: -ms-flexbox;
    display: flex;
    position: absolute
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div .num {
    white-space: nowrap;
    margin-bottom: .05rem;
    line-height: 1
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div > small {
    line-height: 1.2;
    display: block
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div > img {
    max-width: 1.5rem;
    max-height: 1.47rem;
    object-fit: contain;
    object-position: left;
    position: absolute;
    left: 0;
    background:none;
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div.lb {
    padding-left: 1.7rem
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div.lb > img {
    top: 10px
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div .hongkong {
    padding-top: .28rem
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div.lt > img {
    bottom: 1.56vw
}

#about .r1 .inner .mid .imgBox .group .c2 {
    width: 40%;
    height: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 3% 5% 7%;
    display: -ms-flexbox;
    display: flex
}

#about .r2 {
    background-color: #f8fbf2;
    padding-top: 8.33vw;
    padding-bottom: 6.25vw
}

#about .r2 .inner .top {
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: .68rem
}

#about .r2 .inner .top .layer-topic {
    position: relative
}

#about .r2 .inner .top .layer-topic:before {
    content: attr(data-note);
    opacity: 0;
    color: #9fb935;
    font-size: .24rem;
    position: absolute;
    bottom: calc(100% + .2rem);
    left: 0
}

#about .r2 .inner .mid .swiper {
    width: 100%;
    overflow: hidden
}

#about .r2 .inner .mid .swiper .swiper-slide .box {
    width: 100%;
    position: relative;
    overflow: hidden
}

#about .r2 .inner .mid .swiper .swiper-slide .box .img {
    height: 27.08vw;
    width: 100%;
    z-index: 10;
    position: relative
}

#about .r2 .inner .mid .swiper .swiper-slide .box .img > img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    position: absolute;
    bottom: 0
}

#about .r2 .inner .mid .swiper .swiper-slide .box .msg {
    width: 100%;
    z-index: 12;
    padding: .3rem .4rem;
    position: absolute;
    bottom: 0;
    left: 0
}

#about .r2 .inner .mid .swiper .swiper-slide .box .msg h3 {
    -webkit-line-clamp: 2;
    height: .52rem;
    -webkit-box-orient: vertical;
    margin-bottom: .15rem;
    line-height: .26rem;
    display: -webkit-box;
    overflow: hidden
}

#about .r2 .inner .mid .swiper .swiper-slide .box .msg p {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden
}

#about .r2 .inner .mid .swiper .swiper-slide .box:after {
    content: "";
    z-index: 11;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .8) 100%)
}

#about .r2 .inner .mid .set {
    width: 2.1rem;
    height: 1.1rem;
    margin: .5rem auto 0;
    display: block;
    position: relative
}

#about .r2 .inner .mid .set > a {
    width: 1rem;
    height: .8rem;
    position: absolute
}

#about .r2 .inner .mid .set > a .skew {
    background-color: transparent;
    border: 3px solid #9fb935;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965)
}

#about .r2 .inner .mid .set > a .skew:after {
    background-color: #9fb935
}

#about .r2 .inner .mid .set > a i {
    color: #9fb935;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965)
}

#about .r2 .inner .mid .set .prev_ {
    top: 0;
    left: 0
}

#about .r2 .inner .mid .set .prev_ .skew:after {
    transform-origin: 100%;
    left: auto;
    right: 0
}

@media screen and (min-width: 900px) {
    #about .r2 .inner .mid .set .prev_:hover i {
        color: #fff;
        transform: translate(-5px)
    }
}

#about .r2 .inner .mid .set .next_ {
    bottom: 0;
    right: 0
}

@media screen and (min-width: 900px) {
    #about .r2 .inner .mid .set .next_:hover i {
        color: #fff;
        transform: translate(5px)
    }
}

#about .r3 {
    padding: 11.46vw 0;
    position: relative
}

#about .r3 .bg .photo {
    z-index: 2
}

#about .r3 .bg .photo .pic {
    background-position: 33vw;
    background-size: 74vw;
    background-attachment: fixed
}

#about .r3 .bg .mk {
    z-index: 6;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 38%
}

#about .r3 .bg .mk > span {
    background-color: #fff;
    transform: skew(-26deg)
}

#about .r3 .inner {
    z-index: 10;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative
}

#about .r3 .inner .layer-topic {
    position: relative
}

#about .r3 .inner .layer-topic:before {
    content: attr(data-note);
    opacity: 0;
    color: #9fb935;
    font-size: .24rem;
    position: absolute;
    bottom: calc(100% + .2rem);
    left: 0
}

#about .r3 .inner .mid {
    width: 50%;
    padding-top: 6.25vw
}

#about .r3 .inner .mid .items {
    width: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

#about .r3 .inner .mid .items .list {
    width: 100%;
    border-bottom: 1px solid #9fb935;
    padding: .45rem 0;
    position: relative
}

#about .r3 .inner .mid .items .list h3 {
    line-height: 1
}

#about .r3 .inner .mid .items .list .layer-icon {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0
}

#about .r3 .inner .mid .items .list:last-of-type {
    border-bottom: none
}

#detail .banner {
    height: 28.65vw;
    position: relative
}

#detail .banner .bg {
    overflow: hidden
}

#detail .banner .bg .photo {
    overflow: visible
}

#detail .banner .bg .photo .pic {
    height: calc(100% + 5.21vw);
    top: -2.6vw
}

#detail .banner .bg:after {
    content: "";
    z-index: 9;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .2)
}

#detail .banner .inner {
    height: 100%;
    z-index: 10;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#detail .banner .inner .maxSize {
    max-width: 960px;
    margin: .6rem auto
}

#detail .banner .inner h1 {
    line-height: 1;
    font-size: 5vw;
    text-align: center;
}

#detail .r1 {
    padding: 3.13vw 0 4.17vw
}

#detail .r1 .inner {
    max-width: 960px
}

#detail .r1 .inner .detail {
    width: 100%;
    font-size: .78vw;
    line-height: 1.4
}

#detail .r1 .inner .detail img {
    max-width: 90%;
    margin: .4rem auto;
    display: block;
    height: auto !important
}

#detail .r1 .inner .detail span {
    display: inline-block
}

#detail .r1 .inner .detail em {
    font-style: italic
}

#detail .r1 .inner .detail a {
    color: #9fb935
}

#detail .r1 .inner .detail ol, #detail .r1 .inner .detail ul, #detail .r1 .inner .detail li {
    list-style-type: revert
}

#detail .r1 .inner .bm {
    margin-top: .8rem
}

#detail .r2 {
    background-color: #f8fbf2;
    padding-top: 8.33vw;
    padding-bottom: 6.25vw
}

#detail .r2 .inner .top {
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: .6rem
}

#detail .r2 .inner .top .layer-topic {
    position: relative
}

#detail .r2 .inner .top .layer-topic:before {
    content: attr(data-note);
    opacity: 0;
    color: #9fb935;
    font-size: .24rem;
    position: absolute;
    bottom: calc(100% + .2rem);
    left: 0
}

#detail .r2 .inner .mid .swiper {
    width: 100%;
    overflow: hidden
}

#detail .r2 .inner .mid .swiper .swiper-slide .box {
    width: 100%;
    position: relative;
    overflow: hidden
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .img {
    height: 27.08vw;
    width: 100%;
    z-index: 10;
    position: relative
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .img > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    bottom: 0
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .msg {
    width: 100%;
    z-index: 12;
    padding: .3rem .4rem;
    position: absolute;
    bottom: 0;
    left: 0
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .msg h3 {
    -webkit-line-clamp: 2;
    height: .52rem;
    -webkit-box-orient: vertical;
    margin-bottom: .15rem;
    line-height: .26rem;
    display: -webkit-box;
    overflow: hidden
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .msg p {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden
}

#detail .r2 .inner .mid .swiper .swiper-slide .box:after {
    content: "";
    z-index: 11;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .8) 100%)
}

#detail .r2 .inner .mid .set {
    width: 10.94vw;
    height: 5.73vw;
    margin: 3.13vw auto 0;
    display: block;
    position: relative
}

#detail .r2 .inner .mid .set > a {
    width: 5.21vw;
    height: 4.17vw;
    position: absolute
}

#detail .r2 .inner .mid .set > a .skew {
    background-color: transparent;
    border: 3px solid #9fb935;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965)
}

#detail .r2 .inner .mid .set > a .skew:after {
    background-color: #9fb935
}

#detail .r2 .inner .mid .set > a i {
    color: #9fb935;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965)
}

#detail .r2 .inner .mid .set .prev_ {
    top: 0;
    left: 0
}

#detail .r2 .inner .mid .set .prev_ .skew:after {
    transform-origin: 100%;
    left: auto;
    right: 0
}

@media screen and (min-width: 900px) {
    #detail .r2 .inner .mid .set .prev_:hover i {
        color: #fff;
        transform: translate(-5px)
    }
}

#detail .r2 .inner .mid .set .next_ {
    bottom: 0;
    right: 0
}

@media screen and (min-width: 900px) {
    #detail .r2 .inner .mid .set .next_:hover i {
        color: #fff;
        transform: translate(5px)
    }
}

#pro {
    overflow: hidden
}

#pro .r1 {
    padding-top: 14.58vw;
    padding-bottom: 7.29vw
}

#pro .r1 .inner {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex
}

#pro .r1 .inner .left {
    width: 21.25%;
    padding-right: 2.6vw
}

#pro .r1 .inner .left .layer-topic {
    margin-bottom: 2.6vw
}

#pro .r1 .inner .left .choose {
    margin-top: 3.13vw
}

#pro .r1 .inner .left .choose .layer-downBox {
    margin-bottom: 1.04vw
}

#pro .r1 .inner .left .choose .layer-downBox .childDown {
    padding: 1.04vw 1.56vw
}

#pro .r1 .inner .left .choose .clear {
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    margin: 1.56vw 0;
    transition: opacity .3s cubic-bezier(.435, .25, .15, .965)
}

#pro .r1 .inner .left .choose .clear span {
    color: #707070
}

#pro .r1 .inner .left .choose .clear.on {
    opacity: 1;
    pointer-events: auto
}

#pro .r1 .inner .right {
    width: 78.75%
}

#pro .r1 .inner .right .items {
    grid-template-rows:repeat(4, auto);
    grid-template-columns:repeat(4, 1fr);
    gap: 1.15vw;
    display: grid
}

#pro .r1 .inner .right .items .layer-pro h2 {
    text-align: center
}

#pro .r1 .inner .right .isNull {
    height: 20vw;
    background-color: #f6f8f1;
    display: none
}

#pro .r1 .inner .right .isNull h2 {
    text-align: center;
    color: #b8b8b8
}

#pro .r1 .inner .right .isNull.active {
    display: -ms-flexbox;
    display: flex
}

#pro .r1 .inner .right .bm {
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

#pro .r1 .inner .right .bm > div {
    padding: .32rem 1rem .32rem 0;
    display: block;
    position: relative
}

#pro .r1 .inner .right .bm > div .layer-icon {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0
}

#pro .r1 .inner .btm {
    width: 100%;
    padding-top: 3.65vw
}

#pro .r1 .inner .btm .set {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#pro .r1 .inner .btm .set > a {
    width: 5.21vw;
    height: 4.17vw;
    outline: none
}

#pro .r1 .inner .btm .set > a .skew {
    background-color: transparent;
    border: 3px solid #9fb935;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965)
}

#pro .r1 .inner .btm .set > a .skew:after {
    background-color: #9fb935
}

#pro .r1 .inner .btm .set > a i {
    color: #9fb935;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965)
}

#pro .r1 .inner .btm .set .prev_ {
    top: 0;
    left: 0
}

#pro .r1 .inner .btm .set .prev_ .skew:after {
    transform-origin: 100%;
    left: auto;
    right: 0
}

@media screen and (min-width: 900px) {
    #pro .r1 .inner .btm .set .prev_:hover i {
        color: #fff;
        transform: translate(-5px)
    }
}

#pro .r1 .inner .btm .set .next_ {
    bottom: 0;
    right: 0
}

@media screen and (min-width: 900px) {
    #pro .r1 .inner .btm .set .next_:hover i {
        color: #fff;
        transform: translate(5px)
    }
}

#pro .r1 .inner .btm .set ol {
    padding: 0 .48rem
}

#pro .r1 .inner .btm .set ol > li > a {
    color: #707070;
    padding: 0 .2rem;
    display: block
}

#pro .r1 .inner .btm .set ol > li.on > a {
    color: #9fb935
}

#solution {
    overflow: hidden
}

#solution header.navBlack {
    background-color: #fdfff8
}

#solution .r1 {
    height: 100vh;
    background-color: #fdfff8;
    overflow: hidden
}

#solution .r1 .inner {
    height: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 5.73vw;
    padding-bottom: 1rem;
    display: -ms-flexbox;
    display: flex
}

#solution .r1 .inner h1 {
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 2.08vw;
    line-height: 1
}

#solution .r1 .inner .group {
    width: 100%;
    padding: 0 8.33vw
}

#solution .r1 .inner .group ul {
    width: 100%;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#solution .r1 .inner .group ul li {
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    position: relative
}

#solution .r1 .inner .group ul li .imgBox {
    width: 10.42vw;
    -ms-flex-align: end;
    align-items: flex-end;
    margin: 0 auto .6rem;
    position: relative
}

#solution .r1 .inner .group ul li .imgBox .img {
    z-index: 10;
    max-width: 99%;
    display: block;
    position: relative
}

#solution .r1 .inner .group ul li .imgBox .shadow {
    z-index: 1;
    mix-blend-mode: multiply;
    max-width: 220%;
    max-height: 50%;
    position: absolute;
    bottom: -2%;
    left: 20%
}

#solution .r1 .inner .group ul li .imgBox .mk {
    width: 37.5vw;
    -webkit-mask-position-y: 40vw;
    opacity: 0;
    transition: all 1s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    bottom: calc(-2.2rem - 7px);
    left: -74%;
    -webkit-mask-image: linear-gradient(transparent 0%, #000 50%);
    mask-image: linear-gradient(transparent 0%, #000 50%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

#solution .r1 .inner .group ul li .msg {
    width: 10.42vw;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#solution .r1 .inner .group ul li .msg .dot {
    width: 7px;
    z-index: 10;
    height: 7px;
    background: #9fb935;
    margin-bottom: .2rem;
    transition: background .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965);
    position: relative;
    transform: skew(-26deg)
}

#solution .r1 .inner .group ul li .msg h2 {
    z-index: 10;
    white-space: nowrap;
    line-height: .4rem;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

#solution .r1 .inner .group ul li .msg .img {
    width: 2.71vw;
    opacity: 0;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965), transform 1s cubic-bezier(.435, .25, .15, .965);
    top: calc(100% + .4rem);
    transform: translateY(-1.04vw)
}

#solution .r1 .inner .group ul li:nth-of-type(1) .imgBox .shadow {
    transform: translateY(32%)
}

#solution .r1 .inner .group ul li.on .imgBox .mk {
    opacity: 1;
    -webkit-mask-position-y: 0vw
}

#solution .r1 .inner .group ul li.on .msg .dot {
    background-color: #fff;
    transform: scale(1.8) skew(-26deg)
}

#solution .r1 .inner .group ul li.on .msg h2 {
    color: #fff
}

#solution .r1 .inner .group ul li.on .msg .img {
    opacity: 1;
    transform: none
}

#solution .r1 .inner .group ul:after {
    content: "";
    width: calc(100% - 10.42vw);
    z-index: 0;
    height: 1px;
    background-color: rgba(159, 185, 53, .15);
    position: absolute;
    bottom: calc(.6rem + 3px);
    left: 5.21vw
}

#solution .r1 .inner .group ul .line {
    transform-origin: 0;
    width: calc(100% - 10.42vw);
    z-index: 0;
    height: 1px;
    background-color: #9fb935;
    position: absolute;
    bottom: calc(.6rem + 3px);
    left: 5.21vw;
    transform: scaleX(0)
}

#solution #frame {
    width: 100%;
    height: 0;
    position: relative;
    overflow: hidden
}

#solution #frame iframe {
    width: 100%;
    height: 100vh;
    display: block;
    position: relative
}

#about, #about header.navBlack {
    background-color: #fdfff8
}

#about header.down {
    pointer-events: none
}

#about .tree {
    z-index: 199;
    width: 100%;
    background-color: #fdfff8;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: end;
    align-items: flex-end;
    margin: 0 auto;
    transition: transform .5s cubic-bezier(.435, .25, .15, .965);
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 7.55vw;
    left: 0;
    right: 0
}

#about .tree li, #about .tree a {
    z-index: 10;
    position: relative
}

#about .tree li .msg, #about .tree a .msg {
    width: 10.42vw;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#about .tree li .msg .dot, #about .tree a .msg .dot {
    width: 7px;
    z-index: 10;
    height: 7px;
    background: #9fb935;
    margin-bottom: .2rem;
    transition: background .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965);
    position: relative;
    transform: skew(-26deg)
}

#about .tree li .msg h2, #about .tree a .msg h2 {
    white-space: nowrap;
    color: rgba(56, 60, 42, .2);
    z-index: 10;
    line-height: .4rem;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

#about .tree li .msg .img, #about .tree a .msg .img {
    width: 2.19vw;
    opacity: 0;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965);
    top: calc(100% + .2rem);
    transform: translateY(-10px)
}

#about .tree li:hover h2, #about .tree a:hover h2 {
    color: #383c2a
}

#about .tree li.on .msg .dot, #about .tree a.on .msg .dot {
    transform: scale(1.8) skew(-26deg)
}

#about .tree li.on .msg h2, #about .tree a.on .msg h2 {
    color: #383c2a
}

#about .tree li.on .msg .img, #about .tree a.on .msg .img {
    opacity: 1;
    transform: none
}

#about .tree:after {
    content: "";
    width: calc(100% - 10.42vw);
    z-index: 2;
    height: 1px;
    background-color: rgba(159, 185, 53, .5);
    position: absolute;
    bottom: calc(.6rem + 3px);
    left: 5.21vw
}

#about .tree:before {
    content: "";
    width: calc(100% + 50vw);
    z-index: 1;
    height: calc(100% + 10.42vw);
    background-color: #fdfff8;
    position: absolute;
    bottom: -5px;
    left: -25vw
}

#about .tree.active li .msg .img, #about .tree.active a .msg .img {
    opacity: 0 !important
}

#about .r2 {
    padding-top: 14.32vw;
    position: relative
}

#about .r2 .inner .left .imgBox {
    width: 39.95vw;
    height: 26.04vw;
    pointer-events: none;
    background-color: #fdfff8;
    position: relative
}

#about .r2 .inner .left .imgBox .img {
    opacity: .2;
    mix-blend-mode: multiply;
    object-fit: cover;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

#about .r2 .inner .left .imgBox .pro {
    height: 30.21vw;
    position: absolute;
    top: 10px;
    left: 30%
}

#about .r2 .inner .right {
    padding: 0 4.17vw 1.56vw 6.77vw
}

#about .r2 .inner .right h1 {
    margin-bottom: 2.08vw;
    line-height: 1
}

#about .r2 .inner .right p {
    line-height: 1.25
}

#about .r2 .inner .right p b {
    color: #9fb935;
    font-family: inherit;
    font-weight: 400;
    font-size: inherit
}

#about .r2 .inner .layer-scr {
    top: calc(100vh - .5rem);
    bottom: auto
}

#about .r3 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-top: 7.81vw;
    padding-bottom: 4.17vw
}

#about .r3 .left {
    width: 20.83vw
}

#about .r3 .left .layer-topic {
    position: relative
}

#about .r3 .left .layer-topic:before {
    content: attr(data-note);
    color: #9fb935;
    opacity: 0;
    pointer-events: none;
    font-size: .24rem;
    position: absolute;
    bottom: calc(100% + .2rem);
    left: 0
}

#about .r3 .right {
    width: calc(100% - 26.77vw)
}

#about .r3 .right > p {
    margin-bottom: .5rem
}

#about .r3 .right > h4 {
    margin-top: .6rem
}

#about .r3 .right .box {
    -ms-flex-align: start;
    align-items: flex-start
}

#about .r3 .right .box .part {
    -ms-flex: 1;
    flex: 1
}

#about .r3 .right .box .part h3 {
    margin-bottom: 1.04vw;
    padding-left: 1.3vw
}

#about .r3 .right .box .part > ol {
    padding-right: 8%
}

#about .r3 .right .box .part > ol > li {
    margin: 10px 0
}

#about .r3 .right .box .part > ol > li .dot {
    top: 8px
}

#about .r3 .right > img {
    width: 100%;
    margin: .6rem 0
}

#about .r3 .bm {
    padding-left: 26.77vw
}

#about .r3.line {
    border-bottom: 1px solid rgba(112, 112, 112, .5)
}

#about .r4 .group {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#about .r4 .group .col {
    width: calc(50% - .15rem);
    margin-top: .3rem;
    position: relative
}

#about .r4 .group .col .photo {
    width: 100%;
    padding-bottom: 112%;
    position: relative;
    overflow: hidden
}

#about .r4 .group .col .photo:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, .5) 100%)
}

#about .r4 .group .col .msg {
    width: 100%;
    height: 100%;
    z-index: 10;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: .6rem;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    left: 0
}

#about .r4 .group .col .msg .top span {
    display: none
}

#about .r4 .group .col .msg .top h2 {
    line-height: 1.25
}

#about .r4 .group .col .msg .box {
    -ms-flex-align: start;
    align-items: flex-start
}

#about .r4 .group .col .msg .box .part h3 {
    margin-bottom: 1.56vw
}

#about .r4 .group .col .msg .box .part > ol > li {
    white-space: nowrap;
    margin: 10px 0
}

#about .r4 .bm {
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 10px;
    display: -ms-flexbox;
    display: flex
}

#about .r4_1 .group .col {
    width: 100%;
    position: relative
}

#about .r4_1 .group .col .photo {
    width: 100%;
    padding-bottom: 55%;
    position: relative;
    overflow: hidden
}

#about .r4_1 .group .col .photo:after {
    content: "";
    width: 72%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .6) 100%);
    position: absolute;
    top: 0;
    right: 0
}

#about .r4_1 .group .col .photo.empty_text:after {
    opacity: 0
}

#about .r4_1 .group .col .msg {
    width: 72%;
    height: 100%;
    z-index: 10;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 0 4% 0 22%;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    right: 0
}

#about .r4_1 .group .col .msg .top {
    margin-bottom: 4.17vw
}

#about .r4_1 .group .col .msg .top span {
    display: none
}

#about .r4_1 .group .col .msg .top h2 {
    line-height: 1.25
}

#about .r4_1 .group .col .msg .box {
    -ms-flex-align: start;
    align-items: flex-start
}

#about .r4_1 .group .col .msg .box .part h3 {
    margin-bottom: 1.56vw
}

#about .r4_1 .group .col .msg .box .part > ol > li {
    margin: 10px 0
}

#about .r4_1 .bm {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 1.04vw;
    display: -ms-flexbox;
    display: flex
}

#about .r5 {
    height: 15.63vw;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

#about .r5 .col h2, #about .r5 .col h3 {
    line-height: 1
}

#custom, #custom header.navBlack {
    background-color: #fdfff8
}

#custom .r1 {
    padding: 15.63vw 0 3.65vw;
    position: relative
}

#custom .r1 .bg .photo {
    opacity: .2;
    -webkit-mask-image: linear-gradient(#000 0%, transparent 60%);
    mask-image: linear-gradient(#000 0%, transparent 60%)
}

#custom .r1 .bg .photo .pic {
    background-position: bottom;
    background-size: 100%
}

#custom .r1 .inner {
    z-index: 10;
    position: relative
}

#custom .r1 .inner .layer-topic h2 {
    text-align: center
}

#custom .r1 .inner .layer-topic h2 .letter {
    padding: 0 .15rem
}

#custom .r1 .inner .layer-topic h2 .letter:nth-of-type(3), #custom .r1 .inner .layer-topic h2 .letter:nth-of-type(4) {
    color: #9fb935
}

#custom .r1 .inner .layer-topic p {
    text-align: center
}

#custom .r1 .scr {
    width: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0
}

#custom .r1 .scr .m1 {
    opacity: .6;
    width: .21rem;
    animation: 2s ease-in-out infinite both scr
}

#custom .r1 .scr .m2 {
    opacity: .2;
    width: .21rem;
    animation: 2s ease-in-out 1.5s infinite both scr
}

#custom .r2 {
    padding-top: 4.17vw;
    overflow: hidden
}

#custom .r2 .inner {
    height: 100%;
    position: relative
}

#custom .r2 .inner .tree {
    width: 100%;
    z-index: 40;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    left: 0
}

#custom .r2 .inner .tree li .msg {
    width: 1.15vw;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#custom .r2 .inner .tree li .msg h2 {
    z-index: 10;
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

#custom .r2 .inner .tree li .msg .dot {
    width: 7px;
    z-index: 10;
    height: 7px;
    background: #bec0bb;
    margin-top: .78vw;
    transition: background .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965);
    position: relative;
    transform: skew(-26deg)
}

#custom .r2 .inner .tree li .msg .img {
    width: 1.09vw;
    opacity: 0;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965);
    top: calc(100% + .2rem);
    transform: translateY(-10px)
}

#custom .r2 .inner .tree li.on .msg .dot {
    background-color: #9fb935;
    transform: scale(1.8) skew(-26deg)
}

#custom .r2 .inner .tree li.on .msg h2 {
    color: #9fb935
}

#custom .r2 .inner .tree li.on .msg .img {
    opacity: 1;
    transform: none
}

#custom .r2 .inner .tree .line {
    transform-origin: 0;
    width: calc(100% - 1.15vw);
    z-index: 0;
    height: 1px;
    background-color: #9fb935;
    position: absolute;
    bottom: 3px;
    left: 11px;
    transform: scaleX(0)
}

#custom .r2 .inner .tree:after {
    content: "";
    width: calc(100% - 1.15vw);
    z-index: 0;
    height: 1px;
    background-color: rgba(196, 199, 191, .2);
    position: absolute;
    bottom: 3px;
    left: 11px
}

#custom .r2 .inner .swiper {
    height: 100%;
    width: 100%;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 6.77vw;
    padding-bottom: 3.13vw;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide {
    height: 100%;
    pointer-events: none;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .ani {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.435, .25, .15, .965), transform .7s cubic-bezier(.435, .25, .15, .965);
    transform: translateY(1.56vw)
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(1) {
    transition-delay: .2s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(2) {
    transition-delay: .4s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(3) {
    transition-delay: .6s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(4) {
    transition-delay: .8s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(5) {
    transition-delay: 1s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(6) {
    transition-delay: 1.2s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(7) {
    transition-delay: 1.4s
}

#custom .r2 .inner .swiper .swiper-slide.swiper-slide-active {
    pointer-events: auto
}

#custom .r2 .inner .swiper .swiper-slide.swiper-slide-active .ani {
    opacity: 1;
    transform: none
}

#custom .r2 .inner .swiper .swiper-slide .part {
    height: 100%;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r2 .inner .swiper .swiper-slide .part.p1, #custom .r2 .inner .swiper .swiper-slide .part.p3 {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    display: -ms-flexbox;
    display: flex
}

#custom .r2 .inner .swiper .swiper-slide .part > h2 {
    text-align: center;
    margin-bottom: 2.6vw
}

#custom .r2 .inner .swiper .swiper-slide .part .box {
    grid-template-rows:19.79vw;
    grid-template-columns:repeat(4, 1fr);
    gap: 1.35vw;
    display: grid
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li {
    cursor: pointer;
    background-color: #f6f8f1;
    border: 3px solid #f6f8f1;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0 2.08vw;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965), border-color .5s cubic-bezier(.435, .25, .15, .965);
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li .imgBox {
    width: 10.42vw;
    -ms-flex-align: end;
    align-items: flex-end;
    margin: 0 auto .32rem;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li .imgBox .img {
    z-index: 10;
    max-width: 4.58vw;
    max-height: 12.5vw;
    display: block;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li .imgBox .shadow {
    z-index: 1;
    mix-blend-mode: multiply;
    max-height: 60%;
    max-width: 120%;
    position: absolute;
    bottom: -2%;
    left: 28%
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li h3 {
    text-align: center;
    line-height: .4rem;
    transition: color .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li .layer-icon {
    width: 1.88vw;
    height: 1.88vw;
    opacity: 0;
    background: #9fb935;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    right: 0
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li:nth-of-type(1) .imgBox .shadow {
    transform: translateY(32%)
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li.on {
    background-color: #eff7db;
    border-color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li.on h3 {
    color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .box > li.on .layer-icon {
    opacity: 1
}

#custom .r2 .inner .swiper .swiper-slide .part .items {
    grid-template-rows:repeat(2, auto);
    grid-template-columns:repeat(5, 1fr);
    gap: .36rem .5rem;
    display: grid
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro {
    cursor: pointer;
    border: 5px solid transparent;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965), border-color .5s cubic-bezier(.435, .25, .15, .965), opacity .7s cubic-bezier(.435, .25, .15, .965), transform .7s cubic-bezier(.435, .25, .15, .965)
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .photo {
    padding-bottom: 53.5%
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .photo:after {
    content: "";
    background-color: rgba(0, 0, 0, .2);
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965), border-color .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .layer-icon {
    width: 1.88vw;
    height: 1.88vw;
    opacity: 0;
    background: #9fb935;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    right: 0
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro.on {
    border-color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro.on .photo:after {
    background-color: rgba(0, 0, 0, .5)
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro.on .layer-icon {
    opacity: 1
}

#custom .r2 .inner .swiper .swiper-slide .part .group {
    grid-template-rows:repeat(2, auto);
    grid-template-columns:repeat(3, 1fr);
    gap: .36rem .5rem;
    display: grid
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro {
    cursor: pointer;
    border: 5px solid transparent;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965), border-color .5s cubic-bezier(.435, .25, .15, .965), opacity .7s cubic-bezier(.435, .25, .15, .965), transform .7s cubic-bezier(.435, .25, .15, .965)
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .photo {
    padding-bottom: 30%
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .photo:after {
    content: "";
    background-color: rgba(0, 0, 0, .3);
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965), border-color .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .layer-icon {
    width: 1.88vw;
    height: 1.88vw;
    opacity: 0;
    background: #9fb935;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: 0;
    right: 0
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro.on {
    border-color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro.on .photo:after {
    background-color: rgba(0, 0, 0, .6)
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro.on .layer-icon {
    opacity: 1
}

#custom .r2 .inner .swiper .swiper-slide .part .other {
    padding-top: .36rem
}

#custom .r2 .inner .swiper .swiper-slide .part .other .layer-button {
    height: 2.08vw;
    background-color: rgba(56, 60, 42, .05);
    border: 5px solid transparent;
    border-radius: 0;
    transition: border-color .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r2 .inner .swiper .swiper-slide .part .other .layer-button .layer-icon {
    width: 1.56vw;
    height: 1.56vw;
    opacity: 0;
    z-index: 20;
    background: #9fb935;
    margin-right: .78vw;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .other .layer-button.on {
    border: 5px solid #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .other .layer-button.on .layer-icon {
    opacity: 1
}

#custom .r2 .inner .swiper .swiper-slide .part .form {
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -ms-flexbox;
    display: flex
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col h3 {
    margin-bottom: .1rem;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col h3 em {
    color: red;
    font-size: 12px;
    position: absolute;
    top: -.03rem;
    right: calc(100% + .05rem)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox {
    z-index: 22;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: end;
    align-items: flex-end;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox {
    margin-bottom: .78vw
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox h4 {
    line-height: .3rem;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox h4 em {
    color: red;
    font-size: 12px;
    position: absolute;
    top: -.03rem;
    right: calc(100% + .05rem)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea {
    width: 100%;
    height: 93%;
    background-color: #f6f8f1;
    border: 2px solid #f6f8f1;
    margin-top: .3rem;
    margin-bottom: 1.56vw;
    padding: 1.04vw;
    transition: border-color .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea::-ms-input-placeholder {
    color: rgba(112, 112, 112, .5)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea::placeholder {
    color: rgba(112, 112, 112, .5)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea.erro {
    border-color: #fc011a
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col > h4 {
    margin: .1rem 0
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .way {
    grid-template-rows:repeat(2, auto);
    grid-template-columns:repeat(3, 1fr);
    gap: 1.04vw 1.35vw;
    display: grid
}

#custom .r2 .inner .swiper .swiper-slide .part .form .left {
    width: 48%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex
}

#custom .r2 .inner .swiper .swiper-slide .part .form .left .inBox {
    -ms-flex: 1;
    flex: 1;
    overflow: hidden
}

#custom .r2 .inner .swiper .swiper-slide .part .form .right {
    width: 48%
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure {
    padding-top: .12rem
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check {
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 10px 0
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check label {
    cursor: pointer;
    text-align: left;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check .input__box {
    text-align: center;
    width: 1.35vw;
    height: 1.35vw;
    color: transparent;
    border: 2px solid #9fb935;
    margin-right: .83vw;
    font-size: 12px;
    line-height: 1.25vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), background-color .5s cubic-bezier(.435, .25, .15, .965);
    display: inline-block;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check .tint {
    transition: color .5s cubic-bezier(.435, .25, .15, .965);
    display: inline-block
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check input {
    display: none
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check input:checked + .input__box {
    color: #fff;
    background-color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check input.erro + .input__box {
    border-color: red
}

#custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check input.erro + .input__box + .gray {
    color: red
}

#custom .r2 .inner .swiper .swiper-slide .part .bm {
    padding-top: 2.6vw
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn {
    width: 15.63vw;
    margin: 0 1.3vw;
    position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn .loadIcon {
    width: .34rem;
    height: .34rem;
    opacity: 0;
    transition: opacity .3s
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn.loadGo {
    pointer-events: none
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn.loadGo .txt {
    opacity: 0
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn.loadGo .loadIcon {
    opacity: 1;
    animation: 3s linear infinite loopl
}

#custom .r2 .inner .swiper .swiper-slide .part.yes {
    opacity: 0;
    pointer-events: none
}

#custom .r2 .inner .swiper .swiper-slide .part.yes + .ok {
    opacity: 1;
    transform: none
}

#custom .r2 .inner .swiper .swiper-slide .ok {
    width: 41.67vw;
    z-index: 40;
    height: 26.04vw;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    background: #f6f8f1;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 2.6vw;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965);
    transform: translateY(10%)
}

#custom .r2 .inner .swiper .swiper-slide .ok > img {
    height: 6.35vw
}

#custom .r2 .inner .swiper .swiper-slide .ok p {
    line-height: 1.2
}

#custom .r3 {
    padding-top: 4.17vw;
    padding-bottom: 7.29vw;
    position: relative;
    overflow: hidden
}

#custom .r3 .inner {
    z-index: 10;
    position: relative
}

#custom .r3 .inner .layer-topic {
    width: 100%;
    text-align: center;
    margin-bottom: 4.17vw
}

#custom .r3 .inner .layer-topic h1 {
    text-align: center;
    font-size: .6rem;
    line-height: 1
}

#custom .r3 .inner .mid {
    width: 37.03vw;
    height: 37.03vw;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    position: relative
}

#custom .r3 .inner .mid .cirBox {
    overflow: hidden
}

#custom .r3 .inner .mid .cirBox #cirLine {
    width: 96%;
    height: 96%
}

#custom .r3 .inner .mid .cirBox #cirLine .st {
    fill: #fff;
    transition: fill .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r3 .inner .mid .cirBox #cirLine.mc .st {
    fill: #9fb935
}

#custom .r3 .inner .mid .cirBox #cirLine.oc .st {
    fill: #ffc973
}

#custom .r3 .inner .mid .cirBox .dotItems {
    width: 0;
    transform-origin: 50%;
    height: 48%;
    position: absolute;
    bottom: 50%;
    left: 50%
}

#custom .r3 .inner .mid .cirBox .dotItems .dot {
    height: calc(100% + 4px);
    transform-origin: 50% 100%;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: -4px;
    left: 0
}

#custom .r3 .inner .mid .cirBox .dotItems .dot span {
    width: 10px;
    height: 10px;
    background: #3d423c;
    border: 2px solid #fff;
    border-radius: 50%;
    transition: border-color .5s cubic-bezier(.435, .25, .15, .965);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

#custom .r3 .inner .mid .cirBox .dotItems .dot.on {
    opacity: 0
}

#custom .r3 .inner .mid .cirBox .dotItems .dot.mc span {
    border-color: #9fb935
}

#custom .r3 .inner .mid .cirBox .dotItems .dot.oc span {
    border-color: #ffc973
}

#custom .r3 .inner .mid .cirBox .dotItems .dot.wc span {
    border-color: #fff
}

@media screen and (min-width: 900px) {
    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) {
        transform: rotate(45deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) span {
        transform: translate(-50%) rotate(-45deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) {
        transform: rotate(90deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) span {
        transform: translate(-50%) rotate(-90deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) {
        transform: rotate(135deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) span {
        transform: translate(-50%) rotate(-135deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) {
        transform: rotate(225deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) span {
        transform: translate(-50%) rotate(-225deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) {
        transform: rotate(270deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) span {
        transform: translate(-50%) rotate(-270deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) {
        transform: rotate(315deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) span {
        transform: translate(-50%) rotate(-315deg)
    }
}

@media screen and (max-width: 900px) {
    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) {
        transform: rotate(0)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) span {
        transform: translate(-50%) rotate(0)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) {
        transform: rotate(60deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) span {
        transform: translate(-50%) rotate(-60deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) {
        transform: rotate(120deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) span {
        transform: translate(-50%) rotate(-120deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) {
        transform: rotate(180deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) span {
        transform: translate(-50%) rotate(-180deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) {
        transform: rotate(240deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) span {
        transform: translate(-50%) rotate(-240deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) {
        transform: rotate(300deg)
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) span {
        transform: translate(-50%) rotate(-300deg)
    }
}

#custom .r3 .inner .mid .cirBox .imgBox {
    width: 88%;
    height: 88%;
    border-radius: 50%;
    overflow: hidden;
    transform: translateZ(1px)
}

#custom .r3 .inner .mid .cirBox .imgBox .photo {
    opacity: 0;
    border-radius: 50%;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965), transform 1.5s cubic-bezier(.435, .25, .15, .965);
    overflow: hidden;
    transform: scale(1.1)
}

#custom .r3 .inner .mid .cirBox .imgBox .photo .pic {
    border-radius: 50%
}

#custom .r3 .inner .mid .cirBox .imgBox .photo.on {
    opacity: 1;
    transform: none
}

#custom .r3 .inner .mid #cirItems .list {
    height: 100%;
    cursor: pointer;
    grid-template-rows:1fr 1fr 1fr;
    grid-template-columns:14.58vw;
    display: grid;
    position: absolute
}

#custom .r3 .inner .mid #cirItems .list.right {
    top: 0;
    left: calc(100% + 1.04vw)
}

#custom .r3 .inner .mid #cirItems .list.left {
    text-align: right;
    top: 0;
    right: calc(100% + 1.04vw)
}

#custom .r3 .inner .mid #cirItems .list > li {
    width: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex
}

#custom .r3 .inner .mid #cirItems .list > li .num {
    width: 100%;
    opacity: .2;
    margin-bottom: 1.04vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965);
    display: block
}

#custom .r3 .inner .mid #cirItems .list > li h3 {
    width: 100%;
    opacity: .2;
    margin-bottom: 10px;
    line-height: 1.2;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r3 .inner .mid #cirItems .list > li p {
    opacity: .2;
    line-height: 1.3;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r3 .inner .mid #cirItems .list > li.on, #custom .r3 .inner .mid #cirItems .list > li.on .num, #custom .r3 .inner .mid #cirItems .list > li.on h3, #custom .r3 .inner .mid #cirItems .list > li.on p {
    opacity: 1
}

#custom .r3 .inner .mid #cirItemsApp {
    padding: .8rem 0
}

#custom .r3 .inner .mid #cirItemsApp > li {
    width: 100%;
    opacity: 0;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965);
    display: -ms-flexbox;
    display: flex
}

#custom .r3 .inner .mid #cirItemsApp > li .num {
    text-align: center;
    width: 100%;
    margin-bottom: 1.04vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965);
    display: block
}

#custom .r3 .inner .mid #cirItemsApp > li h3 {
    text-align: center;
    white-space: nowrap;
    width: 100%;
    margin-bottom: .3rem;
    line-height: 1.2;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r3 .inner .mid #cirItemsApp > li p {
    width: 88%;
    text-align: center;
    margin: 0 auto;
    font-size: .3rem;
    line-height: 1.3;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#custom .r3 .inner .mid .swiper-button-prev {
    color: #fff;
    outline: none;
    position: absolute;
    top: 84vw;
    left: 0
}

#custom .r3 .inner .mid .swiper-button-next {
    color: #fff;
    outline: none;
    position: absolute;
    top: 84vw;
    right: 0
}

#process .r1 {
    padding-top: 11.46vw;
    padding-bottom: 7.29vw;
    position: relative;
    overflow: hidden
}

#process .r1 .inner {
    z-index: 10;
    position: relative
}

#process .r1 .inner .layer-topic {
    width: 100%;
    text-align: center;
    margin-bottom: 4.17vw
}

#process .r1 .inner .layer-topic h1 {
    font-size: .6rem;
    line-height: 1
}

#process .r1 .inner .mid {
    width: 37.03vw;
    height: 37.03vw;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    position: relative
}

#process .r1 .inner .mid .cirBox {
    overflow: hidden
}

#process .r1 .inner .mid .cirBox #cirLine {
    width: 96%;
    height: 96%
}

#process .r1 .inner .mid .cirBox #cirLine .st {
    fill: #fff;
    transition: fill .5s cubic-bezier(.435, .25, .15, .965)
}

#process .r1 .inner .mid .cirBox #cirLine.mc .st {
    fill: #9fb935
}

#process .r1 .inner .mid .cirBox #cirLine.oc .st {
    fill: #ffc973
}

#process .r1 .inner .mid .cirBox .dotItems {
    width: 0;
    transform-origin: 50%;
    height: 48%;
    position: absolute;
    bottom: 50%;
    left: 50%
}

#process .r1 .inner .mid .cirBox .dotItems .dot {
    height: calc(100% + 4px);
    transform-origin: 50% 100%;
    transition: opacity .5s cubic-bezier(.435, .25, .15, .965);
    position: absolute;
    top: -4px;
    left: 0
}

#process .r1 .inner .mid .cirBox .dotItems .dot span {
    width: 10px;
    height: 10px;
    background: #3d423c;
    border: 2px solid #fff;
    border-radius: 50%;
    transition: border-color .5s cubic-bezier(.435, .25, .15, .965);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

#process .r1 .inner .mid .cirBox .dotItems .dot.on {
    opacity: 0
}

#process .r1 .inner .mid .cirBox .dotItems .dot.mc span {
    border-color: #9fb935
}

#process .r1 .inner .mid .cirBox .dotItems .dot.oc span {
    border-color: #ffc973
}

#process .r1 .inner .mid .cirBox .dotItems .dot.wc span {
    border-color: #fff
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) {
    transform: rotate(45deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) span {
    transform: translate(-50%) rotate(-45deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) {
    transform: rotate(90deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) span {
    transform: translate(-50%) rotate(-90deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) {
    transform: rotate(135deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) span {
    transform: translate(-50%) rotate(-135deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) {
    transform: rotate(225deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) span {
    transform: translate(-50%) rotate(-225deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) {
    transform: rotate(270deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) span {
    transform: translate(-50%) rotate(-270deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) {
    transform: rotate(315deg)
}

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) span {
    transform: translate(-50%) rotate(-315deg)
}

#process .r1 .inner .mid .cirBox .imgBox {
    width: 88%;
    height: 88%;
    border-radius: 50%;
    overflow: hidden
}

#process .r1 .inner .mid .cirBox .imgBox .photo {
    opacity: 0;
    border-radius: 50%;
    transition: opacity 1s cubic-bezier(.435, .25, .15, .965), transform 1.5s cubic-bezier(.435, .25, .15, .965);
    overflow: hidden;
    transform: scale(1.1)
}

#process .r1 .inner .mid .cirBox .imgBox .photo.on {
    opacity: 1;
    transform: none
}

#process .r1 .inner .mid .items .list {
    height: 100%;
    cursor: pointer;
    grid-template-rows:1fr 1fr 1fr;
    grid-template-columns:14.58vw;
    display: grid;
    position: absolute
}

#process .r1 .inner .mid .items .list.right {
    top: 0;
    left: calc(100% + 1.04vw)
}

#process .r1 .inner .mid .items .list.left {
    text-align: right;
    top: 0;
    right: calc(100% + 1.04vw)
}

#process .r1 .inner .mid .items .list > li {
    width: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex
}

#process .r1 .inner .mid .items .list > li .num {
    width: 100%;
    opacity: .2;
    margin-bottom: 1.04vw;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965);
    display: block
}

#process .r1 .inner .mid .items .list > li h3 {
    white-space: nowrap;
    width: 100%;
    opacity: .2;
    margin-bottom: 10px;
    line-height: 1.2;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#process .r1 .inner .mid .items .list > li p {
    opacity: .2;
    line-height: 1.3;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), opacity .5s cubic-bezier(.435, .25, .15, .965)
}

#process .r1 .inner .mid .items .list > li.on, #process .r1 .inner .mid .items .list > li.on .num, #process .r1 .inner .mid .items .list > li.on h3, #process .r1 .inner .mid .items .list > li.on p {
    opacity: 1
}

#case .r1 {
    padding-top: 9.38vw;
    padding-bottom: 5.21vw
}

#case .r1 .inner {
    width: 74%
}

#case .r1 .inner .layer-topic {
    margin-bottom: 2.6vw
}

#case .r1 .inner .layer-topic h1 {
    text-align: center
}

#case .r1 .inner .group {
    width: 100%;
    grid-template-rows:repeat(3, auto);
    grid-template-columns:repeat(3, 1fr);
    gap: 1.56vw;
    display: grid;
    position: relative
}

#case .r1 .inner .group .box {
    position: relative;
    overflow: hidden
}

#case .r1 .inner .group .box .img {
    height: 27.08vw;
    width: 27.08vw;
    z-index: 10;
    transition: transform .6s cubic-bezier(.435, .25, .15, .965);
    position: relative
}

#case .r1 .inner .group .box .img > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    bottom: 0
}

#case .r1 .inner .group .box .msg {
    width: 100%;
    z-index: 12;
    padding: .3rem .4rem;
    position: absolute;
    bottom: 0;
    left: 0
}

#case .r1 .inner .group .box .msg h3 {
    -webkit-line-clamp: 2;
    height: .52rem;
    -webkit-box-orient: vertical;
    margin-bottom: .15rem;
    line-height: .26rem;
    display: -webkit-box;
    overflow: hidden
}

#case .r1 .inner .group .box .msg p {
    line-height: 1.3
}

#case .r1 .inner .group .box:after {
    content: "";
    z-index: 11;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .8) 100%)
}

#case .r1 .inner .group .box:hover .img {
    transform: scale(1.05)
}

#case .r1 .inner .btm {
    width: 100%;
    padding-top: 3.65vw
}

#case .r1 .inner .btm .set {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

#case .r1 .inner .btm .set > a {
    width: 5.21vw;
    height: 4.17vw
}

#case .r1 .inner .btm .set > a .skew {
    background-color: transparent;
    border: 3px solid #9fb935;
    transition: background-color .5s cubic-bezier(.435, .25, .15, .965)
}

#case .r1 .inner .btm .set > a .skew:after {
    background-color: #9fb935
}

#case .r1 .inner .btm .set > a i {
    color: #9fb935;
    transition: color .5s cubic-bezier(.435, .25, .15, .965), transform .5s cubic-bezier(.435, .25, .15, .965)
}

#case .r1 .inner .btm .set .prev_ {
    top: 0;
    left: 0
}

#case .r1 .inner .btm .set .prev_ .skew:after {
    transform-origin: 100%;
    left: auto;
    right: 0
}

#case .r1 .inner .btm .set .prev_:hover i {
    color: #fff;
    transform: translate(-5px)
}

#case .r1 .inner .btm .set .next_ {
    bottom: 0;
    right: 0
}

#case .r1 .inner .btm .set .next_:hover i {
    color: #fff;
    transform: translate(5px)
}

#case .r1 .inner .btm .set ol {
    padding: 0 .48rem
}

#case .r1 .inner .btm .set ol > li > a {
    padding: 0 .2rem;
    display: block
}

#policy {
    background-color: #fdfff8
}

#policy .r1 {
    padding-top: 10.42vw;
    padding-bottom: 7.29vw
}

#policy .r1 .maxSize {
    max-width: 9.8rem
}

#policy .r1 h1 {
    text-align: center;
    margin-bottom: .6rem
}

#policy .r1 .detail p {
    color: #707070;
    margin-bottom: .4rem
}

#policy .r1 .detail h2 {
    margin-bottom: .2rem
}

#searchPage {
    background-color: #fdfff8
}

#searchPage .r1 {
    padding-top: 9.38vw;
    padding-bottom: 6.25vw
}

#searchPage .r1 .inner {
    max-width: 14rem
}

#searchPage .r1 .inner .group {
    -ms-flex-direction: column;
    flex-direction: column
}

#searchPage .r1 .inner h1 {
    margin-bottom: .8rem
}

#searchPage .r1 .inner .layer-search {
    width: 8rem;
    border-bottom: 2px solid #9fb935;
    margin: 0 auto
}

#searchPage .r1 .inner .layer-search input {
    background-color: transparent
}

#searchPage .r1 .inner .isNull {
    height: 14vw
}

#searchPage .r1 .inner .isNull h2 {
    text-align: center;
    color: #b8b8b8
}

#searchPage .r1 .inner .isNull.active {
    display: -ms-flexbox;
    display: flex
}

#searchPage .r1 .inner .result .box {
    margin-bottom: .8rem
}

#searchPage .r1 .inner .result .box em {
    color: #9fb935
}

#searchPage .r1 .inner .result .box .Solutions {
    grid-template-columns:repeat(2, 1fr);
    gap: 1.88vw;
    display: grid
}

#searchPage .r1 .inner .result .box .Solutions > a {
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

#searchPage .r1 .inner .result .box .Solutions > a .left {
    width: 36%
}

#searchPage .r1 .inner .result .box .Solutions > a .left .imgBox {
    width: 100%;
    pointer-events: none;
    height: 15.63vw;
    background-color: #fdfff8;
    position: relative
}

#searchPage .r1 .inner .result .box .Solutions > a .left .imgBox .pro {
    height: 100%;
    width: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0
}

#searchPage .r1 .inner .result .box .Solutions > a .right {
    width: 64%;
    padding: 0 5%
}

#searchPage .r1 .inner .result .box .Solutions > a .right h3 {
    margin-bottom: 1.04vw;
    line-height: 1
}

#searchPage .r1 .inner .result .box .Solutions > a .right p {
    line-height: 1.35
}

#searchPage .r1 .inner .result .box .Solutions > a .right p b {
    color: #9fb935;
    font-family: inherit;
    font-weight: 400;
    font-size: inherit
}

#searchPage .r1 .inner .result .box .caseItems {
    grid-template-columns:repeat(4, 1fr);
    gap: 1.15vw;
    display: grid
}

#searchPage .r1 .inner .result .box .caseItems .cases {
    position: relative;
    overflow: hidden
}

#searchPage .r1 .inner .result .box .caseItems .cases .img {
    width: 100%;
    height: 0;
    z-index: 10;
    padding-bottom: 100%;
    position: relative
}

#searchPage .r1 .inner .result .box .caseItems .cases .img > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    bottom: 0
}

#searchPage .r1 .inner .result .box .caseItems .cases .msg {
    width: 100%;
    z-index: 12;
    padding: .2rem;
    position: absolute;
    bottom: 0;
    left: 0
}

#searchPage .r1 .inner .result .box .caseItems .cases .msg h3 {
    -webkit-line-clamp: 2;
    height: .52rem;
    -webkit-box-orient: vertical;
    margin-bottom: .15rem;
    line-height: .26rem;
    display: -webkit-box;
    overflow: hidden
}

#searchPage .r1 .inner .result .box .caseItems .cases .msg p {
    line-height: 1.3
}

#searchPage .r1 .inner .result .box .caseItems .cases:after {
    content: "";
    z-index: 11;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .8) 100%)
}

#searchPage .r1 .inner .result .box .proItems {
    grid-template-columns:repeat(5, 1fr);
    gap: 1.15vw;
    display: grid
}

#searchPage .r1 .inner .result .box .proItems .layer-pro h2 {
    text-align: center
}

.aul h1, .aul h2, .aul h3, .aul h4, .aul h5 {
    text-align: right
}

.aul input, .aul textarea {
    text-align: right;
    direction: rtl
}

.aul p {
    text-align: right
}

.aul .layer-li {
    text-align: right;
    padding-left: 0;
    padding-right: .3rem
}

.aul .layer-li .dot {
    left: auto;
    right: 0
}

.aul .layer-pro h3, .aul .layer-pro h2 {
    text-align: center
}

.aul .layer-downBox .topPart {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.aul .layer-downBox .childDown .input--check .input__box {
    margin-left: .16rem;
    margin-right: 0
}

.aul .layer-downBox .childDown .input--check {
    -ms-flex-pack: end;
    justify-content: flex-end
}

.aul .layer-downBox .childDown .input--check label {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.aul .layer-downBox .childDown .input--check .tint, .aul .layer-inputBox .childDown > li > a {
    text-align: right
}

.aul .layer-inputBox .arrow, .aul .layer-inputBox .layer-down > a em, .layer-down > a .aul .layer-inputBox em {
    left: .2rem;
    right: auto
}

.aul .layer-inputBox h4 em.dot, .aul #mailPop .pMain h3 em.dot, .aul #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox h4 em, .aul #custom .r2 .inner .swiper .swiper-slide .part .form .col h3 em {
    left: calc(100% + .05rem);
    right: auto
}

.aul .bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.aul .bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList > a, .aul .bloc header nav.app-nav .inner_mid .nav-items > .child_first .child_second > li > a {
    text-align: right
}

.aul .bloc header nav.app-nav .inner_mid .nav-items > .child_first > .firstList.active > i {
    transform: rotate(-90deg)
}

.aul .bloc footer .fMid .items {
    width: auto;
    -ms-flex-align: end;
    align-items: flex-end
}

.aul .bloc footer .fMid .items > li {
    padding-left: 0;
    padding-right: 2.6vw
}

.aul .bloc footer .fMid .items > li.on .layer-arrow, .aul .bloc footer .fMid .items > li:hover .layer-arrow {
    transform: rotate(180deg)
}

.aul .bloc footer .fMid .items > li .layer-arrow {
    left: auto;
    right: 0;
    transform: matrix(-1, 0, 0, -.6, 3, 0)
}

.aul #mailPop .pMain .other .input--check {
    -ms-flex-pack: end;
    justify-content: flex-end
}

.aul #mailPop .pMain .other .input--check label {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.aul #mailPop .pMain .other .input--check .input__box {
    margin-left: .16rem;
    margin-right: 0
}

.aul #home .r2 .inner .top .col .items > li span {
    text-align: right
}

.aul #home .r2 .inner .top .col .items {
    -ms-flex-pack: end;
    justify-content: end
}

.aul #home .r3 .inner .mid #cirItems .list > li {
    -ms-flex-align: end;
    align-items: flex-end
}

.aul #home .r3 .inner .mid #cirItems .list > li .num {
    text-align: right
}

.aul #home .r4 .inner .topic p {
    margin-left: auto;
    margin-right: 0
}

.aul #home .r2 .inner .mid .imgBox .dataItems > li div, .aul #home .r4 .inner .mid .items > li {
    -ms-flex-align: end;
    align-items: flex-end
}

.aul #home .r4 .inner .mid .items > li > small {
    text-align: right
}

.aul #about .r1 .inner .mid .imgBox .group .c2, .aul #about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div {
    -ms-flex-align: end;
    align-items: flex-end
}

.aul #about .r3 .inner .mid .items .list .layer-icon {
    left: 0;
    right: auto;
    transform: scaleX(-1)
}

.aul #about .r3 .inner .mid .items .list {
    padding-left: .4rem;
    padding-right: 0
}

.aul #custom .r3 .inner .mid #cirItems .list > li .num {
    text-align: right
}

.aul #custom .r3 .inner .mid #cirItems .list > li {
    -ms-flex-align: end;
    align-items: flex-end
}

.aul #about .r3 .right .box .part > ol > li {
    text-align: right
}

.aul #about .r4 .group .col .msg {
    -ms-flex-align: end;
    align-items: flex-end
}

.aul #about .r4 .group .col .msg .box .part > ol > li, .aul #mailPop .pMain .other .input--check .f-16 {
    text-align: right
}

.aul #about .r3 .right .box .part > ol {
    padding-left: 8%;
    padding-right: 0
}

.aul #about .r4_1 .group .col .msg {
    -ms-flex-align: end;
    align-items: flex-end
}

.aul #about .r2 .inner .top .layer-topic h2 {
    width: min-content
}

.aul #custom .r2 .inner .swiper .swiper-slide .part .form .left {
    -ms-flex-align: end;
    align-items: flex-end
}

.aul #custom .r2 .inner .swiper .swiper-slide .part .form .col h3 {
    text-align: right
}

.aul #custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check {
    -ms-flex-pack: end;
    justify-content: flex-end
}

.aul #custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check label {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.aul #custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check .input__box {
    margin-left: .16rem;
    margin-right: 0
}

.aul #custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check .input__box + .gray {
    text-align: right
}

.aul #detail .r2 .inner .top {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.aul .layer-more .txt > span {
    text-align: right
}

.aul #pro .r1 .inner .left .choose .clear {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.aul #pro .r1 .inner .left .choose .clear i {
    margin-left: .2rem;
    margin-right: 0
}

@media screen and (min-width: 900px) {
    .aul #home .r2 .inner .top .layer-topic {
        max-width: 60%
    }
}

.rul #custom .r1 .inner .layer-topic h2 .letter:nth-of-type(3) {
    color: #707070
}

.rul #custom .r1 .inner .layer-topic h2 .letter:nth-of-type(5) {
    color: #9fb935
}

@media screen and (max-width: 1500px) {
    #home .r4 .inner .mid .items > li {
        margin-right: 4vw
    }

    #solution .r1 .inner .group ul li .imgBox {
        width: 7.4vw
    }

    #solution .r1 .inner .group ul li .imgBox .mk {
        width: 27.5vw
    }
}

@media screen and (orientation: landscape) {
    .app {
        display: none
    }
}

@media screen and (max-width: 900px) {
    .pc, .bloc header .pcNav {
        display: none
    }

    html.rul, html.aul {
        font-size: 50px
    }

    p, small {
        line-height: 1.35
    }

    .maxSize {
        width: 88%;
        max-width: 100vw
    }

    .f-150 {
        letter-spacing: 0;
        font-size: 13vw
    }

    .rul .f-150 {
        letter-spacing: 0;
        font-size: 10vw
    }

    .f-36 {
        font-size: .46rem
    }

    .f-30 {
        font-size: .4rem
    }

    .rul .f-14, .aul .f-14 {
        font-size: 13px
    }

    .rul .layer-bg .skew {
        transform: skew(-18deg)
    }

    .layer-down .child {
        width: calc(100% + 2rem);
        left: -1rem
    }

    .layer-button {
        min-width: 2rem
    }

    .layer-btn, .layer-button {
        padding: .2rem .3rem
    }

    .layer-btn .mr-16 {
        margin-right: .2rem
    }

    .layer-type .txt > span {
        text-align: center
    }

    .layer-type {
        height: .7rem;
        border-width: 2px !important
    }

    .layer-type .layer-icon {
        width: .4rem;
        height: .4rem
    }

    .layer-topic h2 {
        letter-spacing: 0;
        font-size: .8rem
    }

    .layer-topic h2.f-76 {
        font-size: .6rem
    }

    .layer-topic h2.f-120 {
        font-size: 1rem
    }

    .layer-scr {
        bottom: .6rem
    }

    .layer-scr > img {
        width: 7vw
    }

    .layer-btn:after {
        display: none
    }

    .layer-pop .group .pMain {
        padding: 6% 6% 8%
    }

    .layer-pop .mk {
        background-color: rgba(0, 0, 0, .6)
    }

    .layer-inputBox .input-text {
        height: .64rem
    }

    .layer-inputBox .childDown {
        max-height: calc(1.04vw + 2.42rem)
    }

    .layer-inputBox .childDown > li > a {
        line-height: .6rem
    }

    .layer-bg .skew {
        transform: skew(-24deg)
    }

    .layer-li {
        padding-left: .3rem
    }

    .layer-li .dot {
        top: 6px
    }

    .layer-downBox.on .topPart .arrow, .layer-downBox.on .topPart .layer-down > a em, .layer-down > a .layer-downBox.on .topPart em {
        transform-origin: 0 30%
    }

    #toast {
        height: 160vw
    }

    #toast span {
        font-size: 14px
    }

    .photo .pic.scroll {
        height: calc(100% + 100px);
        top: -50px
    }

    #mailPop .closePop {
        top: auto;
        bottom: calc(100% + .2rem);
        left: auto;
        right: 0
    }

    #mailPop .pMain {
        max-height: 148vw
    }

    #mailPop .pMain .box .wid-45 {
        width: 100%
    }

    #mailPop .pMain .box .wid-45:nth-of-type(1), #mailPop .pMain .box .wid-45:nth-of-type(2), #mailPop .pMain .box .wid-45:nth-of-type(3), #mailPop .pMain .box .wid-45:nth-of-type(4) {
        width: 48%
    }

    #mailPop .pMain .box .layer-inputBox {
        margin-bottom: .1rem
    }

    #mailPop .pMain .box textarea {
        height: 2rem;
        text-indent: 0;
        padding: .2rem
    }

    #mailPop .pMain .bm .layer-btn {
        width: 100%;
        padding: .2rem .3rem
    }

    #mailPop .pMain .box .layer-inputBox h4 {
        line-height: .4rem
    }

    #mailPop .pMain .other .input--check label {
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: start;
        align-items: flex-start
    }

    #mailPop .pMain .other .input--check .input__box {
        width: .36rem;
        height: .36rem
    }

    #mailPop .pMain .other .input--check .input__box + .gray {
        width: calc(100% - .6rem)
    }

    .bloc .fx {
        top: 48vw
    }

    .bloc .fx .pr {
        width: 1.5rem;
        font-size: .36rem
    }

    .bloc header {
        height: 1rem
    }

    .bloc header.down + main > .tree {
        transform: translateY(-1.2rem)
    }

    .bloc footer .fMid {
        padding: 8% 6%
    }

    .bloc footer .fMid .items {
        display: none
    }

    .bloc footer .fMid .fxs img {
        height: 1rem
    }

    .bloc footer .fMid .fxs .con {
        padding-top: .3rem
    }

    .bloc footer .fBm {
        height: auto;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0 6% 6%
    }

    .bloc footer .fBm .col {
        width: 100%
    }

    .bloc footer .fBm .c2 {
        width: 100%;
        padding-top: .1rem
    }

    .bloc footer .fBm .c2 .layer-bg {
        position: absolute;
        bottom: 0;
        right: .8rem
    }

    .bloc footer .fBm .c2 .layer-bg .pr > img {
        width: .28rem
    }

    .bloc footer .fBm .c2 .layer-bg .pr span {
        margin-top: 5px
    }

    .bloc footer .fBm .c2 .layer-bg:after {
        transform-origin: 50% 90%
    }

    .rul .bloc footer .fBm .c2 .items {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .rul .bloc footer .fBm .c2 .items .line {
        display: none
    }

    .rul .bloc footer .fBm .c2 .items li:last-of-type a {
        padding-left: 0
    }

    .rul .bloc footer .fMid .fxs .con p b {
        white-space: nowrap
    }

    #home {
        overflow: hidden
    }

    #home #loading .line {
        width: auto;
        height: 104vw
    }

    #home #loading .progress {
        bottom: 25vw;
        left: 18vw
    }

    #home #loading .photo {
        width: calc(100% + 100vw);
        transition: -webkit-mask-size 1s ease-in-out, -webkit-mask-size 1s ease-in-out, mask-size 1s ease-in-out, -webkit-mask-position .5s linear, -webkit-mask-position .5s linear, mask-position .5s linear;
        left: -100vw;
        -webkit-mask-position: 80%;
        mask-position: 80%;
        -webkit-mask-size: 175vw;
        mask-size: 175vw
    }

    #home #loading .photo.on {
        -webkit-mask-position: 80%;
        mask-position: 80%;
        -webkit-mask-size: 3500vw;
        mask-size: 3500vw
    }

    #home .row {
        width: 100%;
        overflow: hidden
    }

    #home .tree {
        display: none
    }

    #home .banner {
        height: 140vw
    }

    #home .banner .inner {
        padding: 0 6%
    }

    #home .banner .inner .items {
        height: 45vw;
        padding-left: 0
    }

    #home .banner .inner .scr {
        display: none !important
    }

    #home .banner .inner .items > li {
        left: 0
    }

    #home .banner .inner .items > li h1 {
        letter-spacing: 0;
        font-size: .7rem;
        line-height: 1
    }

    #home .banner .inner .pager {
        left: 8vw
    }

    #home .banner .bg .photo {
        width: calc(100% + 80vw);
        left: -40vw
    }

    #home .banner .bg .photo .pic {
        height: 140vw;
        left: 40vw
    }

    #home .banner .inner .pager > li {
        margin: 0 .1rem
    }

    #home .banner .inner .pager > li.on {
        width: 10px;
        transform: scaleY(1.2) skew(-28deg)
    }

    #home .banner .inner .msg {
        padding: .3rem 1rem .3rem .8rem;
        bottom: -1.6rem;
        right: -10vw
    }

    .rul #home .banner .inner .msg {
        padding: .3rem 1.2rem .3rem 1rem;
        right: -13vw
    }

    #home .banner .inner .msg p {
        width: 64vw
    }

    #home .r1 {
        height: auto;
        overflow: hidden
    }

    #home .r1 .clear {
        height: 2.8rem
    }

    #home .r2 .inner .top {
        -ms-flex-direction: column;
        flex-direction: column
    }

    #home .r2 {
        padding-top: 1rem
    }

    #home .r2 .inner .top .layer-topic {
        width: 100%;
        margin-bottom: .5rem
    }

    #home .r2 .inner .top .col {
        width: 100%
    }

    #home .r2 .inner .top .col > p {
        margin-bottom: .4rem
    }

    #home .r2 .inner .top .col .items {
        grid-template-columns:repeat(2, 1fr);
        grid-auto-flow: unset;
        display: grid
    }

    #home .r2 .inner .mid {
        padding-top: 1.8rem
    }

    #home .r2 .inner .mid .imgBox {
        height: 80vw
    }

    #home .r2 .inner .mid .imgBox > img {
        height: 75%
    }

    #home .r2 .inner .mid .imgBox .dataItems {
        width: 200%;
        transform-origin: 50% 38%;
        height: 83%;
        margin-left: -55%;
        transform: scale(.7)
    }

    #home .r2 .inner .mid .imgBox .dataItems > li div .num {
        font-size: .5rem
    }

    #home .r2 .inner .mid .imgBox .dataItems > li div {
        padding-bottom: .4rem;
        padding-left: .32rem
    }

    #home .r2 .inner .mid .imgBox .dataItems > li div > small {
        font-size: 12px
    }

    #home .r3 {
        padding-top: .8rem
    }

    #home .r3 .inner .layer-topic {
        margin-bottom: .8rem
    }

    #home .r3 .inner .layer-topic h1 {
        font-size: .5rem
    }

    #home .r3 .inner .mid {
        width: 84vw;
        height: auto;
        box-sizing: border-box;
        padding-top: 84vw
    }

    #home .r3 .inner .mid .cirBox {
        height: 84vw
    }

    #home .r3 .inner .mid .items .list {
        position: relative
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot span:after {
        content: "";
        width: 400%;
        height: 400%;
        opacity: 0;
        position: absolute;
        top: -150%;
        left: -150%
    }

    #home .r3 .inner .mid .cirBox #cirLine, #home .r3 .inner .mid .cirBox .imgBox {
        pointer-events: none
    }

    #home .r4 .bg .mk {
        width: 150%;
        right: 5%
    }

    #home .r4 .bg .photo {
        width: 50%;
        left: auto;
        right: 0
    }

    #home .r4 .bg .photo .pic {
        background-position: bottom;
        background-size: auto 68%;
        background-attachment: unset
    }

    #home .r4 .inner .topic p {
        width: 100%
    }

    #home .r4 .inner .topic {
        margin-bottom: .8rem
    }

    #home .r4 .inner .mid .items {
        grid-template-columns:repeat(2, auto);
        gap: .8rem .3rem;
        display: grid
    }

    #home .r4 .inner .mid .items > li {
        margin-right: 0
    }

    #home .r5 {
        padding: .8rem 0
    }

    #home .r5 .inner .top .til {
        width: 100%
    }

    #home .r5 .inner .top {
        width: 88%;
        -ms-flex-direction: column;
        flex-direction: column
    }

    #home .r5 .inner .top h2 {
        font-size: .8rem
    }

    #home .r5 .inner .top .col {
        width: 100%;
        padding-top: .3rem
    }

    #home .r5 .inner .top .col h3 {
        margin-bottom: .4rem
    }

    #home .r5 .inner .top .col .items > li {
        margin-bottom: .3rem
    }

    #home .r5 .inner .top .col .items > li * {
        color: #fff
    }

    #home .r5 .inner .mid .swiper .swiper-slide {
        width: 70vw
    }

    #home .r5 .inner .mid .swiper .swiper-slide .box .img {
        width: 32vw;
        height: 40vw
    }

    #home .r5 .inner .mid .set {
        width: 30vw;
        height: 15vw;
        margin-top: .6rem
    }

    #home .r5 .inner .mid .set > a {
        width: 13vw;
        height: 10vw
    }

    #home .r5 .inner .mid .set > a .skew {
        border-width: 2px
    }

    #home .r4 .inner .topic h2 {
        margin-bottom: .2rem
    }

    .aul #home .r5 .inner .top h2 {
        display: block
    }

    .rul #home .r2 .inner .mid .imgBox .dataItems > li div > small {
        line-height: 1.5
    }

    .rul #home .r2 .inner .mid .imgBox .dataItems > li:nth-of-type(3), .rul #home .r2 .inner .mid .imgBox .dataItems > li:nth-of-type(4), .rul #home .r2 .inner .mid .imgBox .dataItems > li:nth-of-type(5) {
        max-width: 26vw
    }

    .aul #home .r2 .inner .top .layer-topic {
        transform-origin: 100%
    }

    .afterInner, #about .row {
        overflow: hidden
    }

    #about .banner, #about .banner .bg {
        max-height: 120vw
    }

    #about .banner .inner p {
        width: 100%
    }

    #about .r1 {
        padding-top: 20vw
    }

    #about .r1 .inner .top {
        -ms-flex-direction: column;
        flex-direction: column
    }

    #about .r1 .inner .top .layer-topic {
        width: 100%;
        margin-bottom: .3rem
    }

    #about .r1 .inner .top .col {
        width: 100%
    }

    #about .r1 .inner .mid .imgBox {
        height: 160vw
    }

    #about .r1 .inner .mid .imgBox .group {
        box-sizing: content-box;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 90vw
    }

    #about .r1 .inner .mid .imgBox .group .c1 {
        width: 100%;
        height: 90vw;
        position: absolute;
        top: 0;
        left: -6vw
    }

    #about .r1 .inner .mid .imgBox .group .c2 {
        width: 100%;
        height: 50%;
        padding: 3% 5% 12%
    }

    #about .r1 .inner .mid .imgBox .img {
        height: 90vw;
        margin-left: -14vw
    }

    #about .r1 .inner .mid .imgBox .group .c1 .dataItems {
        width: 150%;
        left: -25%
    }

    #about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div .num {
        font-size: 12px
    }

    #about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div.lb {
        padding-left: 1.3rem
    }

    #about .r1 .inner .mid .imgBox .group .c1 .dataItems > li div > img {
        width: 1.2rem
    }

    #about .r2 {
        padding-top: 12vw;
        padding-bottom: 10vw
    }

    #about .r2 .maxSize {
        width: 100%
    }

    #about .r2 .inner .top {
        width: 88%;
        margin: 0 auto .8rem
    }

    #about .r2 .inner .mid .swiper .swiper-slide {
        width: 70vw;
        transition: transform .5s cubic-bezier(.435, .25, .15, .965);
        transform: scale(.9)
    }

    #about .r2 .inner .mid .swiper .swiper-slide.swiper-slide-active {
        transform: scale(1)
    }

    #about .r2 .inner .mid .swiper .swiper-slide .box .img {
        height: 0;
        padding-bottom: 100%
    }

    #about .r2 .inner .mid .swiper .swiper-slide .box .msg h3 {
        margin-bottom: .24rem
    }

    #about .r2 .inner .mid .set > a {
        width: 1rem;
        height: .8rem
    }

    #about .r2 .inner .mid .set > a .skew {
        border-width: 2px
    }

    #about .r2 .inner .mid .set > a i {
        font-size: 13px
    }

    #about .r2 .inner .mid .set {
        margin-top: .6rem
    }

    #about .r3 {
        padding-top: 20vw
    }

    #about .r3 .bg .photo .pic {
        background-size: auto 100%;
        background-attachment: unset;
        width: 74%;
        background-position: 50%;
        left: auto;
        right: 0
    }

    #about .r3 .inner .mid .items .list {
        padding-right: .4rem
    }

    #about .r3 .inner .mid .items .list h3 {
        margin-bottom: 10px
    }

    #about .r3 .bg .mk {
        right: 30%
    }

    #about .r3 .inner .mid {
        padding-top: 4vw
    }

    #about .r2 .inner .mid .swiper .swiper-slide .box .msg {
        padding: .3rem
    }

    #about .r2 .inner .mid .swiper .swiper-slide .box .msg p br {
        display: none
    }

    #about {
        width: 100%;
        overflow: hidden
    }

    #about .tree {
        top: 1.6rem
    }

    #about .tree a .msg {
        width: 24vw
    }

    #about .tree a .msg h2 {
        font-size: .3rem
    }

    #about .tree:after {
        width: calc(100% - 24vw);
        left: 12vw
    }

    #about .r2 {
        padding-top: 38vw;
        padding-bottom: 12vw
    }

    #about .r2 .inner {
        -ms-flex-direction: column;
        flex-direction: column
    }

    #about .r2 .inner .left .imgBox {
        width: 35vw;
        height: 75vw
    }

    #about .r2 .inner .left .imgBox .img {
        width: 90vw;
        left: -27vw
    }

    #about .r2 .inner .left .imgBox .pro {
        height: 68vw;
        top: 0;
        left: 0%
    }

    #about .r2 .inner .right {
        padding: 0
    }

    #about .r2 .inner .right h1 {
        margin-bottom: .32rem
    }

    #about .r2 .inner .right p {
        font-family: en-regular;
        line-height: 1.35
    }

    #about .r3 {
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 1rem
    }

    #about .r3 .left {
        width: 100%;
        margin-bottom: .32rem;
        display:none;
    }
    #detail.newsshow .r1{padding: 0}
    #about .r3 .right {
        width: 100%
    }

    #about .r3 .right .box {
        -ms-flex-direction: column;
        flex-direction: column
    }

    #about .r3 .right > p {
        margin-bottom: .6rem
    }

    #about .r3 .right .box .part {
        width: 100%;
        -ms-flex: none;
        flex: none;
        margin-bottom: .5rem
    }

    #about .r3 .right .box .part h3 {
        margin-bottom: .1rem;
        padding-left: 0;
        font-size: 15px
    }

    #about .r3 .right .box .part > ol > li .dot {
        top: 6px
    }

    #about .r3 .right .box .part > ol {
        grid-template-columns:repeat(2, auto);
        gap: 0 .15rem;
        padding-right: 0;
        display: grid
    }

    #about .r3 .right > img {
        margin: .3rem 0
    }

    #about .r4 {
        padding-top: 1rem
    }

    #about .r4 .group {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    #about .r4 .group .col {
        width: 100%;
        margin-top: .4rem
    }

    #about .r4 .group .col .msg {
        padding: .4rem
    }

    #about .r4 .group .col .msg .box .part > ol > li {
        white-space: normal
    }

    #about .r4 .group .col .msg .box .part h3 {
        margin-bottom: .3rem
    }

    #about .r4_1 .group .col .msg .top h2 {
        line-height: 1
    }

    #about .r4_1 .group .col .photo {
        padding-bottom: 120%
    }

    #about .r4_1 .group .col .msg {
        width: 100%;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding: 4% 5%
    }

    #about .r5 {
        height: auto;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: .6rem 0
    }

    #about .r5 .col h2 {
        margin-bottom: .1rem
    }

    #about .r5 .col h3 {
        margin-bottom: .6rem
    }

    #about .r4_1 .group .col .msg {
        padding: 4% 5%
    }

    #about .r4_1 .group .col .photo:after {
        width: 100%;
        background: linear-gradient(transparent 0%, rgba(0, 0, 0, .6) 100%)
    }

    .rul #about .tree a .msg {
        width: 23vw
    }

    .rul #about .tree:after {
        top: 3px;
        bottom: auto
    }

    .rul #about .tree {
        -ms-flex-align: start;
        align-items: flex-start
    }

    .rul #about .tree a .msg h2 {
        white-space: normal;
        text-align: center;
        font-size: .28rem;
        line-height: .3rem
    }

    .aul #about .r3 .right .box .part > ol {
        -ms-flex-pack: end;
        justify-content: end
    }

    #custom .r1 {
        padding-top: 2rem;
        padding-bottom: 1.2rem
    }

    #custom .r1 .inner .layer-topic h2 {
        font-size: .8rem
    }

    #custom .r1 .inner .layer-topic p {
        width: 80%;
        margin: 0 auto
    }

    #custom .r1 .inner .layer-topic h2 .letter {
        padding: 0 .06rem
    }

    #custom .r1 .bg .photo .pic {
        background-size: cover
    }

    #custom .r1 .scr .m1, #custom .r1 .scr .m2 {
        width: .3rem
    }

    #custom .r2 {
        padding-top: 1rem
    }

    #custom .r2 .inner .tree:after, #custom .r2 .inner .tree .line {
        width: calc(100% - 10px);
        left: 5px
    }

    #custom .r2 .inner .tree {
        width: 90%;
        left: 5%
    }

    #custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn {
        width: 2.5rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .box {
        width: 100%;
        grid-template-rows:none;
        grid-template-columns:repeat(2, 1fr);
        gap: .4rem .2rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .box > li {
        height: 40vw
    }

    #custom .r2 .inner .swiper .swiper-slide .part .box > li .imgBox {
        width: 30vw
    }

    #custom .r2 .inner .swiper .swiper-slide .part .box > li .imgBox .img {
        max-height: 20vw;
        max-width: 16vw
    }

    #custom .r2 .inner .swiper .swiper-slide .part .box > li .imgBox .shadow {
        left: 36%
    }

    #custom .r2 .inner .swiper .swiper-wrapper {
        height: 100%
    }

    #custom .r2 .inner .swiper .swiper-slide .part {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex
    }

    #custom .r2 .inner .swiper .swiper-slide .part > h2 {
        width: 88%;
        margin: 0 auto
    }

    #custom .r2 .inner .swiper .swiper-slide .part .box > li {
        border-width: 1px
    }

    #custom .r2 .inner .swiper .swiper-slide .part .box > li .layer-icon, #custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .layer-icon {
        width: .6rem;
        height: .6rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .items {
        width: 100%;
        grid-template-columns:repeat(2, 1fr);
        gap: .06rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .photo {
        padding-bottom: 46%
    }

    #custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro {
        border-width: 2px
    }

    #custom .r2 .inner .swiper .swiper-slide .part.p2 {
        -ms-flex-pack: center;
        justify-content: center
    }

    #custom .r2 .inner .swiper .swiper-slide .part.p2 .items, #custom .r2 .inner .swiper .swiper-slide .part.p2 .bm {
        margin-top: .3rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .other {
        width: 100%;
        padding-top: .1rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .other .layer-button {
        width: 100%;
        height: .6rem;
        border-width: 2px !important
    }

    #custom .r2 .inner .swiper .swiper-slide .part .other .layer-button .layer-icon {
        width: .4rem;
        height: .4rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .other .layer-button .layer-icon i {
        transform: scale(.8)
    }

    #custom .r2 .inner .swiper .swiper-slide .part .group {
        width: 100%;
        grid-template-columns:repeat(2, 1fr);
        gap: .3rem .1rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro {
        border-width: 2px !important
    }

    #custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .photo {
        padding-bottom: 48%
    }

    #custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .layer-icon {
        width: .6rem;
        height: .6rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form {
        -ms-flex-direction: column;
        flex-direction: column
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form .left {
        width: 100%;
        margin-bottom: .2rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form .right {
        width: 100%
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea {
        height: 1.6rem;
        text-indent: 0;
        margin-top: 0
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox h4 {
        line-height: .32rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox[data-choose] {
        width: 100%
    }

    .wid-45 {
        width: 48%
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox[data-choose] h4 {
        line-height: .5rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form .col .way {
        grid-template-columns:repeat(2, 1fr)
    }

    #custom .r2 .inner .swiper .swiper-slide .part.p4 {
        -ms-flex-pack: center;
        justify-content: center
    }

    #custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check .input__box {
        width: .4rem;
        height: .4rem;
        line-height: .38rem
    }

    #custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check .input__box + .gray {
        width: calc(100% - .6rem)
    }

    #custom .r2 .inner .swiper .swiper-slide .part > .mySure .input--check label {
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    #custom .r2 .inner .swiper .swiper-slide .part .form .col > h4 {
        margin-top: .25rem
    }

    #custom .r3 {
        padding-top: .8rem
    }

    #custom .r3 .inner .layer-topic {
        margin-bottom: .5rem
    }

    #custom .r3 .inner .layer-topic h1 {
        font-size: .5rem
    }

    #custom .r3 .inner .mid {
        width: 84vw;
        height: auto;
        box-sizing: border-box;
        padding-top: 84vw
    }

    #custom .r3 .inner .mid .cirBox {
        height: 84vw
    }

    #custom .r3 .inner .mid .items .list {
        position: relative
    }

    #custom .r3 .inner .mid .cirBox .dotItems .dot span:after {
        content: "";
        width: 400%;
        height: 400%;
        opacity: 0;
        position: absolute;
        top: -150%;
        left: -150%
    }

    #custom .r3 .inner .mid .cirBox #cirLine, #custom .r3 .inner .mid .cirBox .imgBox {
        pointer-events: none
    }

    #custom .r2 .inner .swiper .swiper-slide .ok {
        height: 74%;
        width: 100%
    }

    #custom .r2 .inner .swiper .swiper-slide .ok > img {
        height: 1.5rem;
        margin-bottom: .7rem
    }

    #custom .r2 .inner .swiper .swiper-slide .ok p {
        max-width: 84%
    }

    #custom .r2 .inner .swiper .swiper-slide .ok h5 {
        margin-bottom: .4rem
    }

    #custom .r2 {
        height: 210vw !important
    }

    .layer-search, .layer-downBox .topPart {
        height: .8rem
    }

    .layer-downBox .childDown .input--check {
        padding: 6px 0
    }

    .layer-downBox .childDown .input--check .input__box {
        width: .35rem;
        height: .35rem;
        border-width: 1px;
        margin-right: .2rem;
        line-height: .3rem
    }

    #pro .r1 {
        padding-top: 2rem
    }

    #pro .r1 .inner {
        -ms-flex-direction: column;
        flex-direction: column
    }

    #pro .r1 .inner .left {
        width: 100%;
        padding-bottom: .5rem;
        padding-right: 0
    }

    #pro .r1 .inner .left .choose {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: start;
        align-items: flex-start;
        display: -ms-flexbox;
        display: flex
    }

    #pro .r1 .inner .left .choose .layer-downBox {
        width: 48%;
        margin-bottom: .2rem
    }

    #pro .r1 .inner .left .choose .clear, #pro .r1 .inner .right {
        width: 100%
    }

    #pro .r1 .inner .right .items {
        grid-template-rows:repeat(8, auto);
        grid-template-columns:repeat(2, 1fr);
        gap: .2rem
    }

    #pro .r1 .inner .right .bm > div .layer-icon > i {
        font-size: .4rem
    }

    #pro .r1 .inner .btm .set > a {
        width: .6rem;
        height: .6rem;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
    }

    #pro .r1 .inner .btm .set > a .skew {
        border-width: 2px
    }

    #pro .r1 .inner .btm .set > a i {
        transform: scale(.8)
    }

    #pro .r1 .inner .btm .set > a .skew:after {
        display: none
    }

    #case .r1 .inner .layer-topic {
        margin-bottom: .6rem
    }

    #case .r1 {
        padding-top: 2rem
    }

    #case .r1 .inner {
        width: 88%
    }

    #case .r1 .inner .group {
        grid-template-rows:repeat(5, auto);
        grid-template-columns:repeat(2, 1fr);
        gap: .2rem
    }

    #case .r1 .inner .group .box .img {
        width: 100%;
        height: 45vw
    }

    #case .r1 .inner .group .box .msg {
        padding: .2rem
    }

    #case .r1 .inner .group .box .msg p {
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    #case .r1 .inner .btm .set > a {
        width: 10vw;
        height: 9vw
    }

    #case .r1 .inner .btm .set > a .skew {
        border-width: 1px
    }

    #case .r1 .inner .btm .set > a i {
        font-size: 12px
    }

    #policy .r1 {
        padding-top: 2rem
    }

    #searchPage main {
        min-height: 180vw
    }

    #searchPage .r1 .inner h1 {
        letter-spacing: 0
    }

    #searchPage .r1 .inner .layer-search {
        width: 80%;
        border-width: 1px
    }

    #searchPage .r1 .inner .layer-search input {
        font-size: 15px
    }

    #searchPage .r1 .inner .result .box .Solutions {
        grid-template-columns:repeat(1, 1fr);
        gap: .2rem 0
    }

    #searchPage .r1 .inner .result .box .Solutions > a .left .imgBox {
        height: 20vw
    }

    #searchPage .r1 .inner .result .box .Solutions > a .left .imgBox .pro {
        width: 100%;
        object-fit: contain
    }

    #searchPage .r1 .inner .result .box .Solutions > a .right h3 {
        margin-bottom: .3rem
    }

    #searchPage .r1 .inner .result .box .Solutions > a .right p {
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    #searchPage .r1 .inner .result .box .caseItems .cases .msg h3 {
        height: .72rem;
        line-height: .36rem
    }

    #searchPage .r1 .inner .result .box .caseItems, #searchPage .r1 .inner .result .box .proItems {
        grid-template-columns:repeat(2, 1fr);
        gap: .15rem
    }

    #searchPage .r1 .inner .isNull {
        height: 70vw
    }

    #detail .banner {
        height: 85vw
    }

    #detail .banner .inner h1 {
        font-size: .6rem
    }

    #detail .r1 .inner .detail img {
        width: 100%
    }

    #detail .r2 {
        padding-top: 12vw
    }

    #detail .r2 .maxSize {
        width: 100%
    }

    #detail .r2 .inner .top {
        width: 88%;
        margin: 0 auto .68rem
    }

    #detail .r2 .inner .mid .swiper .swiper-slide {
        width: 70vw;
        transition: transform .5s cubic-bezier(.435, .25, .15, .965);
        transform: scale(.9)
    }

    #detail .r2 .inner .mid .swiper .swiper-slide.swiper-slide-active {
        transform: scale(1)
    }

    #detail .r2 .inner .mid .swiper .swiper-slide .box .img {
        height: 0;
        padding-bottom: 100%
    }

    #detail .r2 .inner .mid .swiper .swiper-slide .box .msg h3 {
        margin-bottom: .24rem
    }

    #detail .r2 .inner .mid .set {
        width: 25vw;
        height: 13vw;
        margin-top: .5rem
    }

    #detail .r2 .inner .mid .set > a {
        width: 1rem;
        height: .8rem
    }

    #detail .r2 .inner .mid .set > a .skew {
        border-width: 2px
    }

    #detail .r2 .inner .mid .set > a i {
        font-size: 13px
    }

    #detail .r1 .inner .detail {
        font-size: 15px
    }
}

@media screen and (max-width: 360px) {
    .f-24, #policy .r1 .detail h2 {
        font-size: 16px
    }

    .f-22, .f-20, .f-18, #policy .r1 .detail p, .f-16 {
        font-size: 14px
    }

    .f-14 {
        font-size: 13px
    }

    .f-12 {
        font-size: 12px
    }

    .layer-bg .skew {
        transform: skew(-18deg)
    }

    #home .banner .inner {
        padding: 0% 6% 30%
    }

    #home .banner .inner .msg {
        right: -15vw
    }

    #home .r2 .inner .mid .imgBox .dataItems {
        width: 190%;
        transform-origin: 50% 0;
        margin-left: -56%;
        transform: scale(.7)
    }
}

@keyframes scrFn {
    0% {
        transform: translateY(-7px)
    }
    to {
        transform: translateY(7px)
    }
}

@keyframes scrFn_l {
    0% {
        transform: translate(-5px)
    }
    to {
        transform: translate(5px)
    }
}

@keyframes scr {
    0% {
        opacity: 0;
        transform: translateY(-12px)
    }
    50% {
        opacity: .8;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(12px)
    }
}

@keyframes loopl {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes widNextIn {
    0% {
        width: 0%
    }
    to {
        width: 100%
    }
}

@keyframes widNextOut {
    0% {
        width: 100%
    }
    to {
        width: 0%
    }
}

@keyframes opNextIn {
    0% {
        opacity: 0;
        transform: translate(10%)
    }
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes opNextOut {
    0% {
        opacity: 1;
        transform: none
    }
    to {
        opacity: 0;
        transform: translate(-10%)
    }
}

@keyframes opPrevIn {
    0% {
        opacity: 0;
        transform: translate(-10%)
    }
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes opPrevOut {
    0% {
        opacity: 1;
        transform: none
    }
    to {
        opacity: 0;
        transform: translate(10%)
    }
}

@keyframes pop-in {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }
}