.over-2 {
    line-height: .28rem;
    height: .56rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media screen and (orientation:landscape) {
    .over-3 {
        line-height: .32rem;
        height: .96rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3
    }
}

@media screen and (orientation:portrait) {
    .over-3 {
        line-height: 25px;
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
}

@media screen and (orientation:landscape) {
    .over-4 {
        line-height: .32rem;
        height: 1.28rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4
    }
}

@media screen and (orientation:portrait) {
    .over-4 {
        line-height: 25px;
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
}

@keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        transform: translate3d(-10px, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeftSmall {
    animation-name: fadeInLeftSmall
}

@keyframes fadeInRightSmall {
    from {
        opacity: 0;
        transform: translate3d(10px, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRightSmall {
    animation-name: fadeInRightSmall
}

@keyframes fadeOutLeftSmall {
    from {
        opacity: 1;
        transform: none
    }
    to {
        opacity: 0;
        transform: translate3d(-10%, 0, 0)
    }
}

.fadeOutLeftSmall {
    animation-name: fadeOutLeftSmall
}

@keyframes fadeOutRightSmall {
    from {
        opacity: 1;
        transform: none
    }
    to {
        opacity: 0;
        transform: translate3d(10%, 0, 0)
    }
}

.fadeOutRightSmall {
    animation-name: fadeOutRightSmall
}

@keyframes fadeInDownSmall {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInDownSmall {
    animation-name: fadeInDownSmall
}

@keyframes fadeOutDownSmall {
    from {
        opacity: 1;
        transform: none
    }
    to {
        opacity: 0;
        transform: translate3d(0, 10px, 0)
    }
}

.fadeOutDownSmall {
    animation-name: fadeOutDownSmall;
    -webkit-backface-visibility: hidden;
    animation-timing-function: cubic-bezier(.3, 0, .24, 1)
}

@keyframes fadeInUpSmall {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUpSmall {
    animation-name: fadeInUpSmall;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation-timing-function: ease-in-out
}

@keyframes fadeOutUpSmall {
    from {
        opacity: 1;
        transform: none
    }
    to {
        opacity: 0;
        transform: translate3d(0, -10%, 0)
    }
}

.fadeOutUpSmall {
    animation-name: fadeOutUpSmall;
    animation-timing-function: cubic-bezier(.3, 0, .24, 1)
}

@keyframes fn1 {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translate3d(0, 20px, 0)
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: none
    }
}

.fn1 {
    animation-name: fn1;
    -webkit-backface-visibility: hidden
}

@keyframes fn3 {
    0% {
        opacity: 0;
        transform: matrix(1, .1, 0, 1, 0, 10)
    }
    100% {
        opacity: 1;
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}

.fn3 {
    transform-origin: 0 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: fn3 .8s ease-in-out;
    animation-fill-mode: both
}

.radioBox input[type=radio]+label {
    position: relative;
    white-space: nowrap;
    padding-left: 30px;
    color: #879696
}

.radioBox input[type=radio]+label::before {
    content: "\a0";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 0;
    display: inline-block;
    vertical-align: 2px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 50%;
    border: 2px solid #879696;
    white-space: nowrap;
    text-indent: 2px;
    line-height: .65;
    padding: 3px
}

.radioBox input[type=radio]+label::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    line-height: 8px;
    text-align: center;
    background-color: #00449b;
    left: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    opacity: 0
}

.radioBox input[type=radio]:checked+label {
    color: #00449b
}

.radioBox input[type=radio]:checked+label::before {
    border-color: #00449b;
    padding: 3px;
    background-clip: content-box
}

.radioBox input[type=radio]:checked+label::after {
    opacity: 1
}

.radioBox input[type=radio] {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.checkBox input[type=checkbox]+label {
    display: inline-block;
    cursor: pointer;
    padding: .1rem .3rem;
    width: 100%;
    height: 100%;
    border-bottom-right-radius: .28rem;
    background: #f2f7f7;
    border-top-left-radius: .28rem;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    box-sizing: border-box;
    transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    -ms-transition: background-color .3s ease-in-out
}

.checkBox input[type=checkbox]+label>span {
    line-height: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00449b;
    height: 100%;
    transition: color .5s ease-in-out;
    -webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    -ms-transition: color .5s ease-in-out
}

.checkBox input[type=checkbox]:checked+label {
    background-color: #00449b
}

.checkBox input[type=checkbox]:checked+label>span {
    color: #fff
}

.checkBox input[type=checkbox] {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.checkBox input[type=radio]+label {
    display: inline-block;
    cursor: pointer;
    padding: .1rem .3rem;
    width: 100%;
    height: 100%;
    border-bottom-right-radius: .28rem;
    background: #f2f7f7;
    border-top-left-radius: .28rem;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    box-sizing: border-box;
    transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    -ms-transition: background-color .3s ease-in-out
}

.checkBox input[type=radio]+label>span {
    line-height: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00449b;
    height: 100%;
    transition: color .5s ease-in-out;
    -webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    -ms-transition: color .5s ease-in-out
}

.checkBox input[type=radio]:checked+label {
    background-color: #00449b
}

.checkBox input[type=radio]:checked+label>span {
    color: #fff
}

.checkBox input[type=radio] {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.mc {
    color: #00449b
}

.fc {
    color: #879696
}

.wc {
    color: #fff
}

.d-gc {
    color: #999
}

:after,
:before {
    box-sizing: border-box
}

a {
    cursor: pointer
}

@font-face {
    font-family: en_l;
    src: url(../font/TitilliumWeb-ExtraLight.ttf)
}

@font-face {
    font-family: en_m;
    src: url(../font/TitilliumWeb-Regular.ttf)
}

.en_l {
    font-family: en_l
}

.en_m {
    font-family: en_m
}

.transi {
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

.shadow_txt {
    text-shadow: 0 11px 39px rgba(0, 0, 0, .3)
}

.max-wid {
    width: 73%;
    max-width: 1400px;
    margin: 0 auto
}

.full {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.up-word {
    text-transform: uppercase
}

.v-show {
    visibility: visible
}

.v-hide {
    visibility: hidden
}

.f-light {
    font-weight: lighter
}

.f-bold {
    font-weight: 700
}

.f-500 {
    font-weight: 500
}

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

.half {
    width: 50%
}

.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-middle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.layout-v-middle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0
}

.layout-h-middle {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto
}

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

.pa-h {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%)
}

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

.photo {
    position: relative;
    overflow: hidden
}

.photo .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

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

.f-80 {
    font-size: .8rem
}

.f-70 {
    font-size: .7rem
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width:1366px) {
    .f-20 {
        font-size: 16px
    }
    .f-18 {
        font-size: 14px
    }
    .f-16 {
        font-size: 13px
    }
    .f-14 {
        font-size: 13px
    }
}

.layer-btn {
    display: inline-block;
    cursor: pointer;
    padding: .2rem .4rem;
    border-bottom-right-radius: .28rem;
    border-top-left-radius: .28rem;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0)
}

.layer-btn>span {
    line-height: .3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
    position: relative;
    z-index: 10
}

.layer-btn>span>small {
    display: inline-block;
    font-weight: 600;
    z-index: 3;
    position: relative;
    height: 100%;
    line-height: .3rem
}

.layer-btn>span>i {
    position: relative;
    z-index: 3;
    transition: transform .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    display: inline-block;
    margin-left: .3rem;
    line-height: .3rem
}

.layer-btn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* border-bottom-right-radius: .28rem;
    border-top-left-radius: .28rem; */
    border: 2px solid transparent;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transform: translate3d(-8px, -8px, 0);
    -webkit-transform: translate3d(-8px, -8px, 0);
    -moz-transform: translate3d(-8px, -8px, 0);
    -o-transform: translate3d(-8px, -8px, 0);
    -ms-transform: translate3d(-8px, -8px, 0)
}

.layer-btn:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    /* border-bottom-right-radius: .28rem;
    border-top-left-radius: .28rem; */
    transition: transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out
}

.layer-btn:hover>span {
    transform: translate3d(4px, 4px, 0);
    -webkit-transform: translate3d(4px, 4px, 0);
    -moz-transform: translate3d(4px, 4px, 0);
    -o-transform: translate3d(4px, 4px, 0);
    -ms-transform: translate3d(4px, 4px, 0)
}

.layer-btn:hover>span>i {
    transform: translate3d(4px, 0, 0);
    -webkit-transform: translate3d(4px, 0, 0);
    -moz-transform: translate3d(4px, 0, 0);
    -o-transform: translate3d(4px, 0, 0);
    -ms-transform: translate3d(4px, 0, 0)
}

.layer-btn:hover:before {
    border-color: #00449b;
    transform: translate3d(-2px, -2px, 0);
    -webkit-transform: translate3d(-2px, -2px, 0);
    -moz-transform: translate3d(-2px, -2px, 0);
    -o-transform: translate3d(-2px, -2px, 0);
    -ms-transform: translate3d(-2px, -2px, 0)
}

.layer-btn:hover:after {
    transform: translate3d(4px, 4px, 0);
    -webkit-transform: translate3d(4px, 4px, 0);
    -moz-transform: translate3d(4px, 4px, 0);
    -o-transform: translate3d(4px, 4px, 0);
    -ms-transform: translate3d(4px, 4px, 0)
}

.layer-btn1 {
    display: inline-block;
    cursor: pointer;
    min-width: 2.5rem;
    min-height: .7rem;
    padding: .2rem .4rem;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0)
}

.layer-btn1>span {
    line-height: .3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
    position: relative;
    z-index: 10
}

.layer-btn1>span>small {
    display: inline-block;
    font-weight: 600;
    z-index: 3;
    position: relative;
    height: 100%;
    line-height: .3rem
}

.layer-btn1>span>i {
    position: relative;
    z-index: 3;
    transition: transform .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    display: inline-block;
    margin-left: .3rem;
    line-height: .3rem
}

.layer-btn1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 2px solid #00449b;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

.layer-btn1:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

.layer-btn1:hover>span {
    transform: translate3d(4px, 4px, 0);
    -webkit-transform: translate3d(4px, 4px, 0);
    -moz-transform: translate3d(4px, 4px, 0);
    -o-transform: translate3d(4px, 4px, 0);
    -ms-transform: translate3d(4px, 4px, 0)
}

.layer-btn1:hover>span>i {
    transform: translate3d(8px, 0, 0);
    -webkit-transform: translate3d(8px, 0, 0);
    -moz-transform: translate3d(8px, 0, 0);
    -o-transform: translate3d(8px, 0, 0);
    -ms-transform: translate3d(8px, 0, 0)
}

.layer-btn1:hover:before {
    border-color: #00449b;
    transform: translate3d(-2px, -2px, 0);
    -webkit-transform: translate3d(-2px, -2px, 0);
    -moz-transform: translate3d(-2px, -2px, 0);
    -o-transform: translate3d(-2px, -2px, 0);
    -ms-transform: translate3d(-2px, -2px, 0)
}

.layer-btn1:hover:after {
    background-color: #fff;
    box-shadow: 0 10px 45px -5px rgba(0, 0, 0, .2);
    transform: translate3d(4px, 4px, 0);
    -webkit-transform: translate3d(4px, 4px, 0);
    -moz-transform: translate3d(4px, 4px, 0);
    -o-transform: translate3d(4px, 4px, 0);
    -ms-transform: translate3d(4px, 4px, 0)
}

.layer-btn2 {
    display: inline-block;
    cursor: pointer;
    padding: .2rem .4rem;
    border-bottom-right-radius: .28rem;
    border-top-left-radius: .28rem;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0)
}

.layer-btn2>span {
    line-height: .3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
    position: relative;
    z-index: 10
}

.layer-btn2>span>small {
    display: inline-block;
    font-weight: 600;
    z-index: 3;
    position: relative;
    height: 100%;
    line-height: .3rem
}

.layer-btn2>span>i {
    position: relative;
    z-index: 3;
    transition: transform .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    display: inline-block;
    margin-left: .3rem;
    line-height: .3rem
}

.layer-btn2:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* border-bottom-right-radius: .28rem;
    border-top-left-radius: .28rem; */
    border: 2px solid transparent;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transform: translate3d(-8px, -8px, 0);
    -webkit-transform: translate3d(-8px, -8px, 0);
    -moz-transform: translate3d(-8px, -8px, 0);
    -o-transform: translate3d(-8px, -8px, 0);
    -ms-transform: translate3d(-8px, -8px, 0)
}

.layer-btn2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    transition: transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out
}

.layer-btn2:hover>span {
    transform: translate3d(4px, 4px, 0);
    -webkit-transform: translate3d(4px, 4px, 0);
    -moz-transform: translate3d(4px, 4px, 0);
    -o-transform: translate3d(4px, 4px, 0);
    -ms-transform: translate3d(4px, 4px, 0)
}

.layer-btn2:hover>span>i {
    transform: translate3d(4px, 0, 0);
    -webkit-transform: translate3d(4px, 0, 0);
    -moz-transform: translate3d(4px, 0, 0);
    -o-transform: translate3d(4px, 0, 0);
    -ms-transform: translate3d(4px, 0, 0)
}

.layer-btn2:hover:before {
    border-color: #fff;
    transform: translate3d(-2px, -2px, 0);
    -webkit-transform: translate3d(-2px, -2px, 0);
    -moz-transform: translate3d(-2px, -2px, 0);
    -o-transform: translate3d(-2px, -2px, 0);
    -ms-transform: translate3d(-2px, -2px, 0)
}

.layer-btn2:hover:after {
    transform: translate3d(4px, 4px, 0);
    -webkit-transform: translate3d(4px, 4px, 0);
    -moz-transform: translate3d(4px, 4px, 0);
    -o-transform: translate3d(4px, 4px, 0);
    -ms-transform: translate3d(4px, 4px, 0)
}

.layer-btn3 {
    display: inline-block;
    cursor: pointer;
    padding: .2rem .4rem;
    position: relative;
    border-radius: 100px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0)
}

.layer-btn3>span {
    line-height: .3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
    -moz-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
    position: relative;
    z-index: 10
}

.layer-btn3>span>small {
    display: inline-block;
    font-weight: 600;
    z-index: 3;
    color: #00449b;
    font-size: 14px;
    position: relative;
    height: 100%;
    line-height: .3rem;
    transition: color .5s ease-in-out;
    -webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    -ms-transition: color .5s ease-in-out
}

.layer-btn3>span>small>em {
    font-style: normal
}

.layer-btn3>span>i {
    position: relative;
    z-index: 3;
    transition: color .5s ease-in-out;
    -webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    -ms-transition: color .5s ease-in-out;
    display: inline-block;
    line-height: .3rem;
    color: #00449b
}

.layer-btn3:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100px;
    border: 2px solid transparent;
    background-color: transparent;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transform: scale(.8);
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    -ms-transform: scale(.8)
}

.layer-btn3:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    border-radius: 100px;
    border: 2px solid transparent;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

.layer-btn3.on>span>small,
.layer-btn3:hover>span>small {
    color: #fff
}

.layer-btn3.on>span>i,
.layer-btn3:hover>span>i {
    color: #fff
}

.layer-btn3.on:before,
.layer-btn3:hover:before {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    background-color: #00449b
}

.layer-btn3.on:after,
.layer-btn3:hover:after {
    background-color: transparent;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    opacity: 0
}

.layer-btn4 {
    display: inline-block;
    cursor: pointer;
    padding: .2rem .4rem;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    background: #f2f7f7;
    transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    -ms-transition: background-color .3s ease-in-out
}

.layer-btn4>span {
    line-height: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #454d4d;
    transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out
}

.layer-btn4.on,
.layer-btn4:hover {
    background-color: #00449b
}

.layer-btn4.on>span,
.layer-btn4:hover>span {
    color: #fff
}

.layer-box {
    position: relative;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out
}

.layer-box .photo {
    padding-bottom: 56.23%;
    position: relative
}

.layer-box .photo .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

.layer-box .msg {
    padding: .37rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background: #f5fafa;
    transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -o-transition: background .3s ease-in-out;
    -ms-transition: background .3s ease-in-out
}

.layer-box .msg h5 {
    height: .8rem;
    width: calc(100% - 60px);
    transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out
}

.layer-box .msg .other {
    position: absolute;
    right: .37rem;
    top: .37rem;
    text-align: right;
    width: 60px
}

.layer-box .msg:after {
    content: "";
    position: absolute;
    height: 5px;
    width: 0;
    background-color: #00449b;
    bottom: 0;
    left: 0;
    transition: width .6s ease-in-out;
    -webkit-transition: width .6s ease-in-out;
    -moz-transition: width .6s ease-in-out;
    -o-transition: width .6s ease-in-out;
    -ms-transition: width .6s ease-in-out
}

.layer-box:hover {
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25)
}

.layer-box:hover .msg {
    background-color: #fff
}

.layer-box:hover .msg h5 {
    color: #00449b
}

.layer-box:hover .msg:after {
    width: 100%
}

.search-box {
    display: flex;
    width: 100%;
    position: relative;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    background: #f0f5f5;
    overflow: hidden;
    height: .5rem
}

.search-box .in {
    width: calc(100% - .54rem);
    height: 100%;
    padding: 0 15px;
    background-color: transparent;
    border: none;
    box-sizing: border-box
}

.search-box .in::placeholder {
    color: #738080
}

.search-box .sub {
    background-color: #00449b;
    color: #fff;
    cursor: pointer;
    width: .54rem;
    right: 0;
    top: 0;
    height: 100%
}

.downItems {
    padding: .2rem 0
}

.downItems .list {
    width: 100%
}

.downItems .list>a {
    width: 100%;
    height: .7rem;
    padding: 0 .3rem;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.downItems .list>a>i {
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    width: .5rem;
    font-size: .3rem
}

.downItems .list>a>span {
    flex-grow: 1;
    font-weight: 600
}

.downItems .list>a>small {
    height: .5rem;
    line-height: .5rem;
    text-align: center;
    width: .5rem;
    transition: transform .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    opacity: 0
}

.downItems .list>a.goDown>small {
    opacity: 1
}

.downItems .list .list-down {
    background-color: #f5fafa;
    display: none;
    width: 100%;
    padding: .2rem 0
}

.downItems .list .list-down>ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.downItems .list .list-down>ul>li {
    width: 100%;
    padding: 0 .3rem 0 .8rem
}

.downItems .list .list-down>ul>li>a {
    display: block;
    height: .52rem;
    line-height: .52rem;
    font-weight: 600;
    transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out
}

.downItems .list .list-down>ul>li>a:hover {
    color: #00449b
}

.downItems .list .list-down>ul>li.active>a {
    color: #00449b
}

.downItems .list.go>a {
    background-color: #00449b
}

.downItems .list.go>a>i {
    color: #fff
}

.downItems .list.go>a>span {
    color: #fff
}

.downItems .list.go>a>small {
    color: #fff;
    transform: scale(-1);
    -webkit-transform: scale(-1);
    -moz-transform: scale(-1);
    -o-transform: scale(-1);
    -ms-transform: scale(-1)
}

button,
input[type=submit] {
    -webkit-appearance: none
}

.bxshadow {
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25)
}

.mb-115 {
    margin-bottom: 1.15rem
}

.col-2 {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.col-3 {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.lh-2-5 {
    line-height: 1.25
}

p {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 2;
    margin-bottom: .47rem
}

h2 {
    line-height: .9rem;
    margin-bottom: .68rem
}

h5 {
    line-height: .4rem;
    margin-bottom: .32rem
}

h6 {
    margin-bottom: .14rem;
    line-height: 1
}

.bor {
    border-radius: 8px 1rem 8px 1rem
}

.pager {
    margin-top: .5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.pager>a {
    font-weight: 600;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    width: .6rem;
    display: inline-block;
    transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out
}

.pager>a:hover {
    color: #00449b
}

.pager>ol {
    display: flex;
    align-items: center;
    justify-content: center
}

.pager>ol>a {
    color: #879696;
    font-weight: 600;
    line-height: 20px;
    height: 20px;
    width: .5rem;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    transition: color .3s ease-in-out;
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out
}

.pager>ol>a:hover {
    color: #00449b
}

.pager>ol>a.on,
.pager>ol>a.swiper-pagination-bullet-active {
    color: #00449b
}

.nav.nobx {
    box-shadow: none
}

.scroll-animate.animated {
    opacity: 0
}

.textf {
    opacity: 0;
    perspective: 200px
}

.textf span {
    transform: translate3d(0, 10px, 0);
    opacity: 0
}

#other {
    position: fixed;
    display: none;
    width: 100%;
    z-index: 101;
    height: 200vh;
    top: 0;
    left: 0;
    pointer-events: none
}

#other .inner {
    width: 100%;
    height: 100vh;
    background-color: #00802a;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

#other .inner>img {
    max-width: 40%
}

#other .shape-wrap {
    position: relative;
    height: 100vh;
    z-index: 10
}

#other .shape-wrap .shape2 {
    fill: #00802a
}

.component {
    margin: 0 auto;
    position: relative;
    margin-bottom: .4rem;
    max-width: 100%
}

.component>ul {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0 auto
}

.component>ul>li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 9;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.645, .045, .355, 1);
    animation-duration: 1.8s
}

.component>ul>li>img {
    display: block;
    max-width: 100%;
    opacity: 0;
    max-height: 100%
}

.component>ul .current {
    opacity: 1;
    pointer-events: auto;
    z-index: 105
}

.component nav>a {
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #5b4c5c;
    outline: 0;
    overflow: visible;
    text-align: center;
    top: 50%;
    z-index: 1100;
    color: #fff;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.component nav .moveNext {
    right: 0
}

.component .Tcon {
    position: absolute;
    width: 72%;
    height: calc(100% - 120px);
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center
}

.component .Tcon>small {
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    width: max-content
}

.component .Tcon>small>.Tpage {
    color: #fff;
    font-size: .2rem
}

.component .Tcon .txtChange {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 350px
}

.component .Tcon .txtChange>[data-txt] {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 50%;
    color: #fff;
    text-align: center;
    font-size: .24rem;
    pointer-events: none;
    -webkit-perspective: 1600px;
    perspective: 1600px
}

.component .Tcon .txtChange>[data-txt].txtHide {
    animation: fadeOut .6s ease-in-out;
    animation-fill-mode: both
}

.component .Tcon .txtChange>[data-txt].txtShow {
    animation: fadeIn .6s ease-in-out;
    animation-fill-mode: both
}

.component .Tcon .txtChange>[data-txt].on {
    display: flex;
    pointer-events: auto
}

.component .Tcon .txtChange>small {
    color: #fff;
    position: absolute;
    left: 0;
    margin: auto;
    bottom: calc(100% + 32px);
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden
}

.component .Tcon .txtChange>small>.Tpage {
    color: #fff;
    line-height: 1;
    text-align: left;
    overflow: hidden;
    transform: translate3d(-26%, 0, 0);
    -webkit-transform: translate3d(-26%, 0, 0);
    -moz-transform: translate3d(-26%, 0, 0);
    -o-transform: translate3d(-26%, 0, 0);
    -ms-transform: translate3d(-26%, 0, 0)
}

.component .Tcon .txtChange>small>em {
    display: inline-block;
    margin: 0 10px 0 0;
    padding-top: 4px
}

.component .Tcon .txtChange>small>span {
    padding-top: 4px
}

.component .Tcon .pageChange {
    position: absolute;
    left: 6px;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center
}

.component .Tcon .pageChange>li {
    border: 1px solid #fff;
    display: inline-block;
    float: left;
    cursor: pointer;
    width: .1rem;
    height: .1rem;
    border-radius: 50%;
    line-height: .1rem;
    text-align: center;
    margin-right: .2rem;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

.component .Tcon .pageChange>li.on {
    background-color: #fff
}

.component-small {
    width: 650px;
    height: 290px
}

.component-small>ul {
    width: 450px
}

.component-fullwidth {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    background: 0 0
}

.component-fullwidth>ul {
    overflow: hidden
}

.component-fullwidth>ul>li {
    overflow: hidden
}

.component-fullwidth>ul>li>img {
    min-width: 100%;
    max-width: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.component-transparent {
    width: 900px;
    height: 500px
}

.component-transparent>ul {
    width: 112px
}

.fxfn1.component ul>.navOutNext {
    z-index: 100;
    opacity: 1;
    animation-delay: 80ms;
    animation-name: bannerOut1
}

.fxfn1.component ul>.navInPrev {
    z-index: 99;
    opacity: 1;
    animation-name: bannerIn2
}

.fxfn1.component ul>.navInNext {
    z-index: 99;
    opacity: 1;
    animation-name: bannerIn1
}

.fxfn1.component ul>.navOutPrev {
    z-index: 100;
    opacity: 1;
    animation-delay: 80ms;
    animation-name: bannerOut2
}

.dropdown {
    text-align: left;
    width: 105px;
    display: inline-block;
    position: relative
}

.dropdown select {
    display: none
}

.dropdown>ul {
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    max-height: calc(336px);
    top: 42px;
    left: 0;
    z-index: 1;
    right: 0;
    background: #fff;
    border-radius: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: opacity .2s ease, visibility .2s ease, -webkit-transform .3s cubic-bezier(.4, .6, .5, 1.32);
    transition: opacity .2s ease, visibility .2s ease, transform .3s cubic-bezier(.4, .6, .5, 1.32);
    transition: opacity .2s ease, visibility .2s ease, transform .3s cubic-bezier(.4, .6, .5, 1.32), -webkit-transform .3s cubic-bezier(.4, .6, .5, 1.32);
    -webkit-transform: scale(.8) translate(0, 4px);
    transform: scale(.8) translate(0, 4px);
    border: 1px solid #cdd9ed
}

.dropdown>ul>li {
    opacity: 0;
    -webkit-transform: translate(6px, 0);
    transform: translate(6px, 0);
    transition: all .3s ease
}

.dropdown>ul>li>a {
    cursor: pointer;
    display: block;
    padding: 10px 16px;
    color: rgba(0, 0, 0, .7);
    text-decoration: none;
    outline: 0;
    position: relative;
    transition: all .3s ease
}

.dropdown>ul>li>a:hover {
    color: #000
}

.dropdown>ul>li.active>a {
    color: #fff;
    background-color: #00449b
}

.dropdown>span {
    cursor: pointer;
    padding: 5px 16px;
    border-radius: 100px;
    display: block;
    position: relative;
    color: #00449b;
    border: 1px solid #00449b;
    background-color: #fff
}

.dropdown>span:before {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 2px;
    border-radius: 1px;
    top: 50%;
    right: 15px;
    background: #00449b;
    transition: all .3s ease;
    margin-right: 4px;
    -webkit-transform: scale(.96, .8) rotate(50deg);
    transform: scale(.96, .8) rotate(50deg)
}

.dropdown>span:after {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 2px;
    border-radius: 1px;
    top: 50%;
    right: 15px;
    background: #00449b;
    transition: all .3s ease;
    -webkit-transform: scale(.96, .8) rotate(-50deg);
    transform: scale(.96, .8) rotate(-50deg)
}

.dropdown.open>ul {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    transition: opacity .3s ease, visibility .3s ease, -webkit-transform .3s cubic-bezier(.4, .6, .5, 1.32);
    transition: opacity .3s ease, visibility .3s ease, transform .3s cubic-bezier(.4, .6, .5, 1.32);
    transition: opacity .3s ease, visibility .3s ease, transform .3s cubic-bezier(.4, .6, .5, 1.32), -webkit-transform .3s cubic-bezier(.4, .6, .5, 1.32)
}

.dropdown.open>ul>li {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.dropdown.open>span:before {
    -webkit-transform: scale(.96, .8) rotate(-50deg);
    transform: scale(.96, .8) rotate(-50deg)
}

.dropdown.open>span:after {
    -webkit-transform: scale(.96, .8) rotate(50deg);
    transform: scale(.96, .8) rotate(50deg)
}

.dropdown.open ul li:nth-child(1) {
    transition-delay: 80ms
}

.dropdown.open ul li:nth-child(2) {
    transition-delay: 160ms
}

.dropdown.open ul li:nth-child(3) {
    transition-delay: 240ms
}

.dropdown.open ul li:nth-child(4) {
    transition-delay: 320ms
}

.dropdown.open ul li:nth-child(5) {
    transition-delay: .4s
}

.dropdown.open ul li:nth-child(6) {
    transition-delay: 480ms
}

.dropdown.open ul li:nth-child(7) {
    transition-delay: 560ms
}

.dropdown.open ul li:nth-child(8) {
    transition-delay: 640ms
}

.dropdown.open ul li:nth-child(9) {
    transition-delay: 720ms
}

.dropdown.open ul li:nth-child(10) {
    transition-delay: .8s
}

@keyframes bannerIn1 {
    0% {
        transform: translateX(100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes bannerOut1 {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-100%)
    }
}

@keyframes bannerIn2 {
    0% {
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes bannerOut2 {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(100%)
    }
}

.video-parent {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 216.53vw;
    transition: filter .3s ease-in-out;
    -webkit-transition: filter .3s ease-in-out;
    -moz-transition: filter .3s ease-in-out;
    -o-transition: filter .3s ease-in-out;
    -ms-transition: filter .3s ease-in-out
}

.video-parent .pic_ {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

.video-parent .pic_.on {
    opacity: 1
}

.video-parent .cv {
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0
}

.video-parent .cv.on {
    opacity: 1
}

.webGL-slider {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 5
}

.webGL-slider>img {
    width: 100%;
    max-width: 100%;
    position: relative;
    min-height: 48vw;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0
}

.webGL-slider canvas {
    left: 0;
    position: absolute;
    z-index: 2;
    background-color: #fff
}

@media screen and (orientation:landscape) {
    .webGL-slider canvas {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%)
    }
}

.webGL-slider .pagination {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5vw;
    z-index: 6
}

.webGL-slider .pagination>[data-slide] {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    width: .14rem;
    height: .14rem;
    background-color: #fff;
    border-radius: 100%;
    padding: 0;
    margin: 30px 0;
    cursor: pointer;
    position: relative;
    opacity: .4;
    transition: opacity .2s ease-in-out;
    outline: 0
}

.webGL-slider .pagination>[data-slide].on {
    opacity: 1
}

.webGL-slider a.move-prev {
    position: absolute;
    bottom: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: 36px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    margin: 0;
    color: #fff;
    background-color: transparent;
    font-size: 24px;
    opacity: .6;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

.webGL-slider a.move-prev:hover {
    opacity: 1
}

.webGL-slider a.move-next {
    position: absolute;
    top: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: 36px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    margin: 0;
    color: #fff;
    background-color: transparent;
    font-size: 24px;
    opacity: .6;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

.webGL-slider a.move-next:hover {
    opacity: 1
}

.webGL-slider .txt-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5
}

.webGL-slider .txt-item>li {
    position: absolute;
    top: 50%;
    left: 10vw;
    width: 80%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

.webGL-slider .txt-item>li>img {
    max-width: 100%
}

.font-fadeIn font {
    min-width: .5em
}

.layout-page {
    text-align: center;
    padding: 16px 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.layout-page>a {
    display: inline-block;
    margin: 0 10px;
    outline: 0;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    line-height: .3rem;
    text-align: center;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    font-size: 14px;
    color: #666
}

.layout-page>a:hover {
    color: #00449b
}

.layout-page>ol {
    display: flex;
    align-items: center;
    justify-content: center
}

.layout-page>ol li {
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    line-height: .3rem;
    text-align: center;
    color: #666;
    font-weight: 700;
    margin: 0 5px;
    cursor: pointer
}

.layout-page>ol li.ep,
.layout-page>ol li.sp {
    display: inline-block
}

.layout-page>ol li.on {
    display: inline-block
}

.layout-page>ol li.cur {
    color: #00449b
}

.layout-page>ol .gather {
    pointer-events: none;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    line-height: .3rem;
    text-align: center;
    color: #666;
    margin: 0 12px;
    font-weight: 700
}

#home #main {
    position: relative;
    z-index: 5;
    animation-duration: .2s;
    opacity: 0
}

#home #main .row {
    position: relative
}

#home #main .row .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1
}

#home #main .row .rowMain {
    padding-top: 1.15rem;
    position: relative;
    z-index: 5
}

#home #main .row .rowMain .title {
    text-align: center;
    width: 100%
}

#home #main .row .rowMain .title h2 {
    line-height: .8rem
}

#home #main #banner {
    position: relative;
    padding: 0
}

@media screen and (orientation:landscape) {
    #home #main #banner {
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh
    }
}

#home #main #banner .bg {
    height: calc(100% + 1.4rem);
    background-position: center bottom
}

#home #main #banner .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom-left-radius: 2rem
}

#home #main #banner .msg {
    z-index: 12;
    padding-top: .9rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

#home #main #banner .msg>img {
    margin-bottom: .3rem
}

#home #main #banner .msg .layer-btn {
    min-width: 2.5rem;
    min-height: .7rem
}

#home #main #banner .webGL-slider {
    /* border-bottom-left-radius: 2rem; */
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 13
}

#home #main #banner .webGL-slider .txt-item li>img {
    margin-bottom: .4rem
}

#home #main #banner .webGL-slider .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4
}

#home #main #banner .webGL-slider .layer-btn {
    min-width: 2.5rem;
    min-height: .7rem
}

#home #main #banner #component {
    border-bottom-left-radius: 2rem;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 13
}

#home #main #banner #component .Tcon .txtChange li>img {
    margin-bottom: .4rem
}

#home #main #banner #component .Tcon .txtChange li h2 {
    min-height: .8rem
}

#home #main #r1 {
    padding-bottom: .7rem
}

@media screen and (orientation:landscape) {
    #home #main #r1 {
        height: auto!important
    }
}

#home #main #r1 .bg .pic {
    position: absolute;
    width: 60%;
    height: 100%;
    right: 0;
    top: .7rem
}

#home #main #r1 .bg .downbtn {
    line-height: 1;
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 4;
    bottom: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out
}

#home #main #r1 .bg .downbtn .btn {
    width: 11px;
    height: 13px;
    margin: 8px auto 0;
    -webkit-animation: trackBallSlide 5s linear infinite;
    animation: trackBallSlide 5s linear infinite
}

#home #main #r1 .bg .downbtn .btn svg {
    width: 100%
}

#home #main #r1 .bg .downbtn .fon1 {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 0;
    margin-top: 16px;
    text-align: center
}

#home #main #r1 .bg .downbtn.active {
    opacity: 1
}

#home #main #r1 .rowMain .col-2 {
    height: 38.72vw
}

@media screen and (orientation:landscape) {
    #home #main #r1 .rowMain .col-2 {
        min-height: 600px
    }
}

#home #main #r1 .rowMain .col-2 .left {
    padding-right: 10%
}

#home #main #r1 .rowMain .col-2 .left p {
    text-align: justify
}

#home #main #r2 .bg .photo {
    height: calc(100% + 2.3rem);
    position: absolute;
    width: 100%;
    top: -.5rem;
    background-size: 100% 100%
}

#home #main #r2 .rowMain {
    padding-top: 0;
    width: calc(100% - 180px);
    max-width: 1740px;
    margin: 0 auto
}

#home #main #r2 .rowMain .inner {
    /* border-radius: 8px 1rem 8px 1rem; */
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 52.08%
}

#home #main #r2 .rowMain .inner>.box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#home #main #r2 .rowMain .inner>.box .mBg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m1 {
    z-index: 5;
    background-color: #fff
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 {
    z-index: 4
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .mainPhoto {
    position: relative;
    width: 100%;
    height: 100%
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic_child {
    background-color: rgba(0, 0, 0, .4);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic {
    opacity: 0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic .ad1 {
    position: absolute;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
    top: 17%;
    left: 75%
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic .ad1:after {
    content: "";
    position: absolute;
    height: 120px;
    width: 3px;
    background-color: #fff;
    top: 100%;
    left: 4px
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic .ad2 {
    position: absolute;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
    top: 32%;
    left: 25%
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic .ad2:after {
    content: "";
    position: absolute;
    height: 120px;
    width: 3px;
    background-color: #fff;
    top: 100%;
    left: 4px
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic.on {
    opacity: 1
}

#home #main #r2 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask.on {
    opacity: 1
}

#home #main #r2 .rowMain .inner>.box .wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none
}

#home #main #r2 .rowMain .inner>.box .wrap .mid {
    z-index: 5;
    pointer-events: none;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .txt_ {
    position: absolute;
    width: 100%;
    left: 0;
    top: 25%;
    text-align: center;
    transition: all .5s cubic-bezier(.51, .09, .41, .79);
    transform-origin: 50% 0
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .txt_ h1 {
    color: #fff;
    margin-bottom: 0;
    overflow: hidden
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .txt_ h1>span {
    font-size: inherit;
    overflow: hidden
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .txt_ h1>span>em {
    display: inline-block;
    font-style: normal
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .txt_ small {
    color: #fff;
    overflow: hidden;
    display: block
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .txt_ small>span {
    margin: 0 10px;
    font-size: inherit;
    overflow: hidden
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .txt_ small>span>em {
    display: inline-block;
    font-style: normal
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .txt_.on {
    transform: scale(.6) translateY(-16vw)
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box {
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: 11vw;
    pointer-events: auto;
    width: 100%;
    left: 0;
    display: none
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_ {
    width: 14.3vw;
    height: 10.4vw;
    border-bottom-right-radius: 56px;
    border-top-left-radius: 56px;
    border: 5px solid #fff;
    display: flex;
    align-items: center;
    align-content: space-between;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 1.2vw 1.7vw 1vw 1.7vw;
    margin: 0 1.2vw;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    position: relative
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_>div>h4 {
    margin-bottom: 0;
    width: 100%
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_>div>small {
    line-height: .5rem
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_>span {
    text-align: right;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 1vw;
    right: 1.7vw;
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
    -webkit-transform: translate3d(-10px, 0, 0);
    -moz-transform: translate3d(-10px, 0, 0);
    -o-transform: translate3d(-10px, 0, 0);
    -ms-transform: translate3d(-10px, 0, 0);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    pointer-events: none
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_>span>i {
    color: #fff;
    display: inline-block;
    font-size: .24rem;
    line-height: .5rem
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_:nth-of-type(2) {
    margin-top: 3vw
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_:nth-of-type(3) {
    margin-top: -2vw
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_:hover {
    border-color: #00449b;
    background-color: #00449b
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box .list_:hover>span {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none
}

#home #main #r2 .rowMain .inner>.box .wrap .mid .type-box.on {
    display: flex
}

#home #main #r2 .rowMain .inner>.box .wrap .btm {
    position: absolute;
    pointer-events: auto;
    width: 100%;
    height: 4.8vw;
    bottom: 0;
    left: 0;
    z-index: 6
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .8);
    opacity: 0;
    pointer-events: none;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ {
    cursor: pointer;
    width: 25%;
    text-align: center;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-right: 1px solid rgba(255, 255, 255, .3)
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_:last-of-type {
    border-right: none
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .msg {
    position: relative;
    z-index: 4;
    padding-top: 12px
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .msg>h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #fff;
    display: block;
    width: 100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .msg>small {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    width: 100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    display: block;
    text-align: center;
    font-weight: 700
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .msg>i.icon {
    color: #000;
    font-size: 40px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    width: 48px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 100%;
    display: inline-block;
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    opacity: 0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note {
    transform: translateY(6px);
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -o-transform: translateY(6px);
    -ms-transform: translateY(6px);
    position: absolute;
    z-index: 2;
    padding-bottom: 8vw;
    padding-top: 2vw;
    width: 100%;
    background-color: #fff;
    bottom: 0;
    left: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    line-height: 48px;
    text-align: center;
    background-color: #00449b;
    color: #fff;
    font-size: 30px;
    text-indent: 3px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ {
    position: relative;
    padding: 0 10%;
    margin-top: -4%;
    width: 100%;
    flex-wrap: wrap;
    display: none;
    align-items: center;
    justify-content: space-between
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_ {
    text-align: center;
    opacity: 0;
    width: 45%;
    margin-top: 4%;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    overflow: hidden;
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_>img {
    display: inline-block;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 6px
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_ .pf {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 52%;
    margin-bottom: 10px;
    transform: translateX(-10.5%) scale(1.3);
    -webkit-transform: translateX(-10.5%) scale(1.3);
    -moz-transform: translateX(-10.5%) scale(1.3);
    -o-transform: translateX(-10.5%) scale(1.3);
    -ms-transform: translateX(-10.5%) scale(1.3)
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_ h3 {
    padding: 12px 0;
    font-weight: 700;
    font-size: 16px;
    color: #556463;
    position: relative;
    width: 100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    margin-bottom: 0
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_ h3:after {
    content: attr(data-node);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #00449b;
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_:hover {
    border-color: #00449b
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_:hover h3 {
    color: transparent
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_:hover h3:after {
    opacity: 1
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_:hover .msg>h3 {
    color: #000
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_:hover .msg>small {
    color: #000
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_:hover .msg>i {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_:hover .note {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1;
    pointer-events: auto;
    padding-top: 3vw
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_:hover .note .icon {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg)
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_:hover .note .box_ {
    display: flex
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_.on .msg>h3 {
    color: #000
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_.on .msg>small {
    color: #000
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_.on .msg>i {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_.on .note {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1;
    pointer-events: auto;
    padding-top: 3vw
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_.on .note .icon {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg)
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_.on .note .box_ {
    display: flex
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items .list_:first-of-type .note .box_ {
    justify-content: center
}

#home #main #r2 .rowMain .inner>.box .wrap .btm .items.on {
    opacity: 1;
    pointer-events: auto
}

#home #main #r2 .rowMain .inner>.box .other {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 12;
    padding: 6% 8%;
    pointer-events: none
}

#home #main #r2 .rowMain .inner>.box .other .o-main {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .6rem 5% .6rem 5%;
    opacity: 0;
    transition: all 1.2s ease-in-out;
    -webkit-transition: all 1.2s ease-in-out;
    -moz-transition: all 1.2s ease-in-out;
    -o-transition: all 1.2s ease-in-out;
    -ms-transition: all 1.2s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    z-index: 4;
    background-position: center;
    background-size: cover;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0)
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    pointer-events: none
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 video.a {
    display: block
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 video.b {
    display: none
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    opacity: 0;
    z-index: 10;
    animation: fadeInRightSmall 1s ease-in-out;
    animation-delay: 2s;
    animation-fill-mode: both
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 .pic .dot {
    position: absolute;
    width: 20.8%;
    height: 10%;
    pointer-events: auto
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.after_ video.a {
    display: none
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.after_ video.b {
    display: block
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.on {
    z-index: 10;
    opacity: 1
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.on .pic {
    display: block
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.in {
    z-index: 12;
    opacity: 1
}

#home #main #r2 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.out {
    opacity: 0;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .topic {
    margin-bottom: 3vw;
    cursor: pointer
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .topic>small {
    color: #0d3033;
    font-size: 16px
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .topic>small>i {
    font-size: 22px;
    vertical-align: middle
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .topic h2 {
    color: #0d3033;
    font-size: .42rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .topic h2>b {
    color: #0d3033;
    font-weight: bolder;
    font-size: .42rem
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .topic h2>small {
    font-size: .26rem;
    color: #0d3033;
    font-weight: 400
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .topic>span {
    font-size: 42px
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
    flex-direction: column;
    width: 120px;
    min-height: 585px
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box>img {
    display: inline-block
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box {
    width: 120px;
    padding: 15px 0;
    position: relative;
    cursor: pointer;
    pointer-events: auto
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box>span.txt_ {
    text-align: center;
    font-weight: bolder;
    font-size: .3rem;
    color: #0d3033;
    position: relative;
    z-index: 10;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    display: block;
    width: 100%
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box>span.txt_>small {
    display: block;
    font-size: 12px;
    text-align: center
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_ {
    position: absolute;
    height: 100px;
    z-index: 12;
    left: -15px;
    top: -12px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 25px 50px -4px rgba(0, 43, 43, .16);
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition-delay: .1s
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_>em {
    display: inline-block;
    font-style: normal;
    font-size: .36rem;
    text-indent: 15px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_>em>small {
    display: block;
    font-size: 12px;
    text-align: center;
    text-indent: 15px
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_ svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_ svg path {
    fill: none;
    stroke: #75979c;
    stroke-linecap: round;
    stroke-width: 1px;
    stroke-dasharray: 800px;
    stroke-dashoffset: 800px
}

@keyframes svg_fn {
    0% {
        stroke-dashoffset: 800px
    }
    100% {
        stroke-dashoffset: 0
    }
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box.on>span.txt_ {
    opacity: 0;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2)
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box.on .box_ {
    opacity: 1;
    pointer-events: auto
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box.on .box_ svg path {
    animation: svg_fn 5s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: both
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box:hover>span.txt_ {
    opacity: 1;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .box .txt-box:hover .box_ svg path {
    animation-play-state: paused
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_ {
    position: absolute;
    pointer-events: auto;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 100px;
    line-height: 1.2;
    font-weight: bolder;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_>i {
    font-size: 24px;
    color: #0d3033;
    margin-right: 10px;
    position: relative;
    z-index: 10;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_>small {
    position: relative;
    z-index: 10;
    color: #0d3033
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_:before {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100px;
    background-color: #0d3033;
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    -ms-transform: scale(.5);
    opacity: 0;
    transition: all .3s cubic-bezier(.61, .26, .25, .91)
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_:after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid rgba(13, 48, 51, .3);
    border-radius: 100px;
    transition: all .3s cubic-bezier(.25, .76, .52, .49)
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_:hover>i {
    color: #fff
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_:hover>small {
    color: #fff
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_:hover:before {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#home #main #r2 .rowMain .inner>.box .other .o-main .con .return_:hover:after {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    opacity: 0
}

#home #main #r2 .rowMain .inner>.box .other .o-main.on {
    opacity: 1;
    pointer-events: auto
}

#home #main #r2 .rowMain .inner>.box .other #o-pic {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none
}

#home #main #r2 .rowMain .inner>.box .other #o-pic .pic {
    opacity: 1;
    position: absolute
}

#home #main #app_r1 .rowMain {
    padding-top: .25rem;
    padding-bottom: .25rem
}

#home #main #app_r1 .rowMain>ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap
}

#home #main #app_r1 .rowMain>ul>a {
    width: 25%;
    margin: .2rem 0;
    display: block
}

#home #main #app_r1 .rowMain>ul>a>i {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    line-height: .9rem;
    text-align: center;
    background-color: #f1f6f0;
    color: #00449b;
    display: block;
    margin: 0 auto;
    font-size: 20px
}

#home #main #app_r1 .rowMain>ul>a>span {
    display: block;
    text-align: center;
    margin-top: .1rem;
    font-size: 13px;
    font-weight: 700
}

#home #main #r3 .bg .pic {
    position: absolute;
    width: 100%;
    bottom: -20vw;
    right: 0;
    padding-bottom: 42.18%
}

#home #main #r3 .rowMain .inner {
    position: relative;
    width: 100%
}

#home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide {
    width: 63.5vw;
    overflow: hidden
}

#home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide .box {
    padding-bottom: 54%;
    width: 100%;
    /* border-radius: 8px 1rem 8px 1rem; */
    overflow: hidden
}

#home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide .box .other {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #00449b;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    /* border-bottom-right-radius: .9rem;
    border-top-left-radius: 8px; */
    width: 28%;
    min-height: 62.8%;
    padding: 3% 5% 3% 3.7%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: flex-start;
    justify-content: center
}

#home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide .box .other>small {
    display: block;
    margin-bottom: .4rem
}

#home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide .box .other p {
    display: none
}

#home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide .box .other h5 {
    width: 100%;
    word-break: break-all;
    min-height: .8rem
}

@media screen and (orientation:landscape) {
    #home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide .box .other h5 {
        line-height: .4rem;
        max-height: 1.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3
    }
}

@media screen and (orientation:portrait) {
    #home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide .box .other h5 {
        line-height: 25px;
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
}

#home #main #r3 .rowMain .inner #sw1 .swiper-wrapper .swiper-slide .box .other .layer-btn2 {
    min-width: 2rem;
    min-height: .6rem
}

#home #main #r3 .rowMain .inner #sw1 .swiper-pagination {
    bottom: 8px
}

#home #main #r3 .rowMain .inner #sw1 .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    opacity: .5;
    border: 1px solid #999;
    border-radius: 7px;
    cursor: pointer;
    background: 0 0
}

#home #main #r3 .rowMain .inner #sw1 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background: #00449b;
    border-color: #00449b
}

#home #main #r3 .rowMain .inner .swiper-other {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10
}

#home #main #r3 .rowMain .inner .swiper-other #sw_next {
    left: 88%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    min-height: .72rem
}

#home #main #r3 .rowMain .inner .swiper-other #sw_prev {
    right: 88%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    min-height: .72rem
}

#home #main #r4 {
    padding-bottom: 1.15rem
}

#home #main #r4 .rowMain .inner .col-3 .col {
    width: 31.5%;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#home #main #r4 .rowMain .inner .col-3 .col .photo {
    width: 100%;
    padding-bottom: 74.8%;
    overflow: hidden
}

#home #main #r4 .rowMain .inner .col-3 .col .msg {
    background-color: #f8f8f8;
    padding: 9% 7%;
    position: relative
}

#home #main #r4 .rowMain .inner .col-3 .col .msg h5 {
    height: 1.2rem
}

#home #main #r4 .rowMain .inner .col-3 .col .msg p {
    margin-bottom: 0
}

#home #main #r4 .rowMain .inner .col-3 .col .msg:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00449b
}

#home #main #r4 .rowMain .inner .col-3 .col .msg.up:after {
    top: 0;
    bottom: auto
}

#home #main #r4 .rowMain .inner .col-3 .col.left .photo {
    /* border-top-left-radius: 1rem */
}

#home #main #r4 .rowMain .inner .col-3 .col.left:hover {
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25);
    transform: translate3d(-5px, -5px, 0);
    -webkit-transform: translate3d(-5px, -5px, 0);
    -moz-transform: translate3d(-5px, -5px, 0);
    -o-transform: translate3d(-5px, -5px, 0);
    -ms-transform: translate3d(-5px, -5px, 0)
}

#home #main #r4 .rowMain .inner .col-3 .col.mid:hover {
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25);
    transform: translate3d(0, -5px, 0);
    -webkit-transform: translate3d(0, -5px, 0);
    -moz-transform: translate3d(0, -5px, 0);
    -o-transform: translate3d(0, -5px, 0);
    -ms-transform: translate3d(0, -5px, 0)
}

#home #main #r4 .rowMain .inner .col-3 .col.right .photo {
    /* border-top-right-radius: 1rem */
}

#home #main #r4 .rowMain .inner .col-3 .col.right:hover {
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25);
    transform: translate3d(5px, -5px, 0);
    -webkit-transform: translate3d(5px, -5px, 0);
    -moz-transform: translate3d(5px, -5px, 0);
    -o-transform: translate3d(5px, -5px, 0);
    -ms-transform: translate3d(5px, -5px, 0)
}

#home #main #r4 .rowMain .other {
    text-align: center;
    padding: .7rem 0 .1rem 0
}

#home #main #r5 .bg .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-top-right-radius: 1.8rem;
    z-index: 10
}

#home #main #r5 .bg .mask {
    position: absolute;
    width: 100%;
    padding-bottom: 32%;
    z-index: 5;
    left: 0;
    top: -11.8vw
}

#home #main #r5 .rowMain {
    padding-top: 0
}

#home #main #r5 .rowMain .inner {
    height: 20.3vw;
    max-height: 3.9rem
}

#home #main #r5 .rowMain .inner>div {
    color: #00449b;
    width: calc(100% - 2rem)
}

#home #main #r5 .rowMain .iconfont {
    font-size: 0.4rem;
    color: #00449b;
    font-weight: 900;
}

#about #main {
    position: relative;
    animation-duration: .2s;
    opacity: 0
}

#about #main .row {
    position: relative;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem
}

#about #main .row .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1
}

#about #main .row .rowMain {
    position: relative;
    z-index: 4
}

#about #main .row .title {
    margin-bottom: .8rem;
    text-align: center;
    width: 100%
}

#about #main .row .title h2 {
    margin-bottom: 0;
    text-align: center
}

#about #main .row .title h3 {
    margin-bottom: .2rem;
    line-height: 1
}

#about #main .row .title small {
    color: #666;
    display: block;
    text-align: center
}

#about #main #banner {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 38%
}

#about #main #banner .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#about #main #banner .msg {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
    top: 0;
    padding-top: .9rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

#about #main #banner .msg h1 {
    line-height: 1;
    margin-bottom: .38rem;
    color: #fff
}

#about #main #banner .msg h1 font {
    text-shadow: 0 3px 30px rgba(0, 0, 0, .24)
}

#about #main #banner .msg small {
    display: inline-block;
    font-weight: 100;
    color: #fff;
    line-height: 1
}

#about #main #banner .msg>a {
    margin-top: .8rem;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

#about #main #banner .msg>a>i {
    color: rgba(255, 255, 255, .5)
}

#about #main #banner .msg>a>span {
    color: rgba(255, 255, 255, .5);
    margin-left: 14px
}

#about #main #r1 {
    padding-top: 1.7rem;
    padding-bottom: 1rem
}

#about #main #r1 .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

#about #main #r1 .rowMain .photo {
    /* border-radius: 0 .8rem 0 .8rem; */
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 44.3%
}

#about #main #r1 .rowMain .msg {
    margin-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative
}

#about #main #r1 .rowMain .msg .col {
    width: 45%
}

#about #main #r1 .rowMain .msg .col>h2 {
    margin-bottom: .28rem;
    line-height: 1
}

#about #main #r1 .rowMain .msg .col>small {
    display: block;
    line-height: 1
}

#about #main #r1 .rowMain .msg .col p {
    color: #666;
    margin-top: .5rem;
    font-weight: 400;
    margin-bottom: 0;
    text-align: justify
}

#about #main #r1 .rowMain .msg .line {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: .88rem;
    opacity: .1;
    width: 1px;
    background: #24578f;
    height: calc(100% - .88rem)
}

#about #main #r2 {
    background-color: #fbfbfb
}

#about #main #r2 .rowMain .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

#about #main #r2 .rowMain .inner .left {
    width: 40%;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap
}

#about #main #r2 .rowMain .inner .left .list {
    flex-basis: 50%;
    margin: .4rem 0
}

#about #main #r2 .rowMain .inner .left .list h6>span {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit
}

#about #main #r2 .rowMain .inner .left .list h6 sup {
    margin-left: .2rem
}

#about #main #r2 .rowMain .inner .left .list small {
    display: block;
    color: #607469
}

#about #main #r2 .rowMain .inner .right {
    position: absolute;
    z-index: 4;
    width: 39vw;
    right: 1.7rem;
    top: 0
}

#about #main #r2 .rowMain .inner .right .map {
    position: relative;
    z-index: 6;
    max-width: 100%
}

#about #main #r2 .rowMain .inner .right .nan {
    position: absolute;
    width: 12.1%;
    left: 80%;
    bottom: 0;
    z-index: 3;
    display: none
}

#about #main #r2 .rowMain .inner .right .cityBox {
    position: absolute;
    width: 1.7rem;
    top: 0;
    left: 100%;
    height: 100%;
    padding: 1% 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column
}

#about #main #r2 .rowMain .inner .right .cityBox .list {
    background-color: #00449b;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10%;
    width: 1.36rem
}

#about #main #r2 .rowMain .inner .right .cityBox .list:first-of-type {
    margin-top: 0
}

#about #main #r2 .rowMain .inner .right .cityBox .list>span {
    margin-left: .1rem
}

#about #main #r3 .bg .mapBg {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 2.4rem
}

#about #main #r3 .bg .bm1 {
    position: absolute;
    top: -4rem;
    left: 0;
    width: 100%
}

#about #main #r3 .rowMain .inner {
    position: relative
}

#about #main #r3 .rowMain .inner #sw3 {
    height: 100%;
    overflow: visible
}

#about #main #r3 .rowMain .inner #sw3 .swiper-wrapper .swiper-slide {
    width: 73vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

#about #main #r3 .rowMain .inner #sw3 .swiper-wrapper .swiper-slide .items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%
}

#about #main #r3 .rowMain .inner #sw3 .swiper-wrapper .swiper-slide .items li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.16rem;
    height: .94rem;
    background-color: #fff;
    margin: .3rem;
    border-radius: 100px;
    box-shadow: 0 0 92px 3px rgba(30, 41, 59, .1)
}

#about #main #r3 .rowMain .inner #sw3 .swiper-wrapper .swiper-slide .items li>img {
    max-width: 68%;
    max-height: 64%
}

#about #main #r3 .rowMain .inner #sw3 .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1
}

#about #main #r3 .rowMain .inner #sw3 .swiper-pagination {
    bottom: -.8rem
}

#about #main #r3 .rowMain .inner #sw3 .swiper-pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    opacity: .5;
    border-radius: 7px;
    cursor: pointer
}

#about #main #r3 .rowMain .inner #sw3 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background: #00449b;
    border-color: #00449b
}

#about #main #r3 .rowMain .inner:after {
    content: attr(data-node);
    font-size: 12px;
    position: absolute;
    right: 12vw;
    bottom: -3vw;
    color: rgba(0, 0, 0, .4)
}

#about #main #r4 .bg>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

#about #main #r4 .title {
    margin-bottom: .6rem
}

#about #main #r4 .inner .items {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .6rem
}

#about #main #r4 .inner .items li {
    text-align: center;
    width: 1.8rem
}

#about #main #r4 .inner .items li>i {
    line-height: 1;
    display: inline-block;
    margin-bottom: .2rem
}

#about #main #r4 .inner .items li>span {
    display: block
}

#about #main #r4 .box {
    position: relative
}

#about #main #r4 .box #sw1 {
    height: 100%
}

#about #main #r4 .box #sw1 .swiper-wrapper .swiper-slide {
    width: 73vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    opacity: .5;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out
}

#about #main #r4 .box #sw1 .swiper-wrapper .swiper-slide .box {
    padding-bottom: 52.64%;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* border-radius: .8rem 0 .8rem 0 */
}

#about #main #r4 .box #sw1 .swiper-wrapper .swiper-slide .box .msg {
    height: .7rem;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00449b
}

#about #main #r4 .box #sw1 .swiper-wrapper .swiper-slide .box .msg .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    border: 1px solid #fff;
    position: relative
}

#about #main #r4 .box #sw1 .swiper-wrapper .swiper-slide .box .msg .dot:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    line-height: 4px;
    text-align: center;
    background-color: #fff
}

#about #main #r4 .box #sw1 .swiper-wrapper .swiper-slide .box .msg .txt {
    color: #fff;
    margin-left: .2rem
}

#about #main #r4 .box #sw1 .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1
}

#about #main #r4 .box #sw1 .swiper-pagination {
    bottom: -.8rem
}

#about #main #r4 .box #sw1 .swiper-pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    opacity: .5;
    border-radius: 7px;
    cursor: pointer
}

#about #main #r4 .box #sw1 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background: #00449b;
    border-color: #00449b
}

#about #main #r4 .box .swiper-other {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
    padding-top: .9rem
}

#about #main #r4 .box .swiper-other #sw_next {
    left: 83%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    min-height: .72rem;
    box-shadow: 0 0 92px 3px rgba(30, 41, 59, .1)
}

#about #main #r4 .box .swiper-other #sw_prev {
    right: 83%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    min-height: .72rem;
    box-shadow: 0 0 92px 3px rgba(30, 41, 59, .1)
}

#about #main #r5 {
    padding-top: 0;
    padding-bottom: 0
}

#about #main #r5 .bg {
    position: relative;
    z-index: 4
}

#about #main #r5 .bg .mask {
    position: relative;
    z-index: 4;
    width: 100%
}

#about #main #r5 .bg .items {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 6
}

#about #main #r5 .bg .items>img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#about #main #r5 .rowMain {
    position: absolute;
    top: 1rem;
    width: 100%
}

#about #main #r6 {
    overflow: hidden
}

#about #main #r6 .bg .mapBg {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 3rem
}

#about #main #r6 .bg .bm1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

#about #main #r6 .rowMain .inner {
    margin-top: -.2rem;
    position: relative
}

#about #main #r6 .rowMain .inner #sw2 {
    height: 100%;
    overflow: visible
}

#about #main #r6 .rowMain .inner #sw2 .swiper-wrapper .swiper-slide {
    width: 73vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

#about #main #r6 .rowMain .inner #sw2 .swiper-wrapper .swiper-slide .items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    padding: .1rem 0
}

#about #main #r6 .rowMain .inner #sw2 .swiper-wrapper .swiper-slide .items li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.16rem;
    height: .94rem;
    background-color: #fff;
    margin: .26rem .3rem;
    border-radius: 100px;
    box-shadow: 0 0 .6rem 3px rgba(30, 41, 59, .1)
}

#about #main #r6 .rowMain .inner #sw2 .swiper-wrapper .swiper-slide .items li>img {
    max-width: 68%;
    max-height: 64%
}

#about #main #r6 .rowMain .inner #sw2 .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1
}

#about #main #r6 .rowMain .inner #sw2 .swiper-pagination {
    bottom: -.8rem
}

#about #main #r6 .rowMain .inner #sw2 .swiper-pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    opacity: .5;
    border-radius: 7px;
    cursor: pointer
}

#about #main #r6 .rowMain .inner #sw2 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background: #00449b;
    border-color: #00449b
}

#about #main #r6 .rowMain .inner .swiper-other {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10
}

#about #main #r6 .rowMain .inner .swiper-other #sw_next1 {
    left: 90%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    min-height: .72rem;
    box-shadow: 0 0 92px 3px rgba(30, 41, 59, .1)
}

#about #main #r6 .rowMain .inner .swiper-other #sw_prev1 {
    right: 90%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    min-height: .72rem;
    box-shadow: 0 0 92px 3px rgba(30, 41, 59, .1)
}

#about #main #r6 .rowMain .inner:after {
    content: attr(data-node);
    font-size: 12px;
    position: absolute;
    right: 12vw;
    bottom: -1.5vw;
    color: rgba(0, 0, 0, .4)
}

#about #main #r7 .bg>img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

#about #main #r7 .rowMain .title {
    margin-bottom: 0
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide {
    width: 73vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: .8rem 0 .1rem 0
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide .items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* align-items: flex-start;
    justify-content: space-around */
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide .items>li {
    width: 25%;
    text-align: center;
    margin-bottom: .4rem;
    max-width: 25%;
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide .items>li .box {
    display: flex;
    max-width: 95%;
    border: 4px solid #e9e9e9;
    position: relative;
    /* box-shadow: 0 0 .9rem 0 rgba(56, 49, 49, .15); */
    background-color: #fff;
    align-items: center;
    justify-content: center;
    padding: 5px
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide .items>li .box .pic {
    max-width: calc(100% - .3rem);
    max-height: 100%
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide .items>li .box .look {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .3);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide .items>li .box .look>i {
    color: #fff;
    font-size: .36rem
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide .items>li .box:hover .look {
    opacity: 1;
    pointer-events: auto
}

#about #main #r7 .rowMain .inner #sw4 .swiper-wrapper .swiper-slide .items>li>span {
    display: block;
    text-align: center;
    margin-top: .2rem;
    color: #999
}

#about #main #r7 .rowMain .inner #sw4 .swiper-pagination {
    bottom: 0
}

#about #main #r7 .rowMain .inner #sw4 .swiper-pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    opacity: .5;
    border-radius: 7px;
    cursor: pointer
}

#about #main #r7 .rowMain .inner #sw4 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background: #00449b;
    border-color: #00449b
}

#about #main #r7 .rowMain .inner .other {
    text-align: center;
    margin-top: .6rem
}

#about #main #r7 .rowMain .inner .other .layer-btn>span {
    min-width: 1.5rem
}

#about #main #r7 .rowMain .inner .other .layer-btn:after {
    background-color: #00449b
}

.about_test :not(.en_m) {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif
}

#plan {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#plan #main {
    position: absolute;
    z-index: 5;
    opacity: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
    animation-duration: .3s;
    transform-style: preserve-3d
}

#plan #main #r1 {
    position: relative;
    width: 100%;
    height: 100%
}

#plan #main #r1 .rowMain {
    height: 100%
}

#plan #main #r1 .rowMain .inner {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden
}

#plan #main #r1 .rowMain .inner>.box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#plan #main #r1 .rowMain .inner>.box .mBg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m1 {
    z-index: 5
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 {
    z-index: 4
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .mainPhoto {
    position: relative;
    width: 100%;
    height: 100%
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic_child {
    background-color: rgba(0, 0, 0, .4);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic {
    opacity: 0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic .ad1 {
    position: absolute;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
    top: 17%;
    left: 75%
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic .ad1:after {
    content: "";
    position: absolute;
    height: 120px;
    width: 3px;
    background-color: #fff;
    top: 100%;
    left: 4px
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic .ad2 {
    position: absolute;
    white-space: nowrap;
    color: #fff;
    font-weight: 700;
    top: 32%;
    left: 25%
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic .ad2:after {
    content: "";
    position: absolute;
    height: 120px;
    width: 3px;
    background-color: #fff;
    top: 100%;
    left: 4px
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask .pic.on {
    opacity: 1
}

#plan #main #r1 .rowMain .inner>.box .mBg .v-box .mediaCon#m2 .maskBox .mask.on {
    opacity: 1
}

#plan #main #r1 .rowMain .inner>.box .wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid {
    z-index: 5;
    pointer-events: none;
    height: calc(100% - .5rem);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .txt_ {
    position: absolute;
    width: 100%;
    left: 0;
    top: 25%;
    text-align: center;
    transition: all .5s cubic-bezier(.51, .09, .41, .79);
    transform-origin: 50% 0
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .txt_ h1 {
    color: #fff;
    margin-bottom: 0;
    overflow: hidden
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .txt_ h1>span {
    font-size: inherit;
    overflow: hidden
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .txt_ h1>span>em {
    display: inline-block;
    font-style: normal
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .txt_ small {
    color: #fff;
    overflow: hidden;
    display: block
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .txt_ small>span {
    margin: 0 10px;
    font-size: inherit;
    overflow: hidden
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .txt_ small>span>em {
    display: inline-block;
    font-style: normal
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .txt_.on {
    transform: scale(.6) translateY(-13vw)
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box {
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: 11vw;
    pointer-events: auto;
    width: 100%;
    left: 0;
    display: none
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_ {
    width: 14.3vw;
    height: 10.4vw;
    /* border-bottom-right-radius: 56px;
    border-top-left-radius: 56px; */
    border: 5px solid #fff;
    display: flex;
    align-items: center;
    align-content: space-between;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 1.2vw 1.7vw 1vw 1.7vw;
    margin: 0 1.4vw;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    position: relative
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_>div>h4 {
    margin-bottom: 0;
    width: 100%
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_>div>small {
    line-height: .5rem
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_>span {
    text-align: right;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 1vw;
    right: 1.7vw;
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
    -webkit-transform: translate3d(-10px, 0, 0);
    -moz-transform: translate3d(-10px, 0, 0);
    -o-transform: translate3d(-10px, 0, 0);
    -ms-transform: translate3d(-10px, 0, 0);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    pointer-events: none
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_>span>i {
    color: #fff;
    display: inline-block;
    font-size: .24rem;
    line-height: .5rem
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_:nth-of-type(2) {
    margin-top: 4vw
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_:nth-of-type(3) {
    margin-top: -2vw
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_:hover {
    border-color: #00449b;
    background-color: #00449b
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box .list_:hover>span {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none
}

#plan #main #r1 .rowMain .inner>.box .wrap .mid .type-box.on {
    display: flex
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm {
    position: absolute;
    pointer-events: auto;
    width: 100%;
    height: 4.8vw;
    bottom: 0;
    left: 0;
    z-index: 6
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .8);
    opacity: 0;
    pointer-events: none;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ {
    cursor: pointer;
    width: 25%;
    text-align: center;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-right: 1px solid rgba(255, 255, 255, .3)
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_:last-of-type {
    border-right: none
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .msg {
    position: relative;
    z-index: 4;
    padding-top: 12px
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .msg>h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #fff;
    display: block;
    width: 100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .msg>small {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    width: 100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    display: block;
    text-align: center;
    font-weight: 700
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .msg>i.icon {
    color: #000;
    font-size: 40px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    width: 48px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 100%;
    display: inline-block;
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    opacity: 0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note {
    transform: translateY(6px);
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -o-transform: translateY(6px);
    -ms-transform: translateY(6px);
    position: absolute;
    z-index: 2;
    padding-bottom: 8vw;
    padding-top: 2vw;
    width: 100%;
    background-color: #fff;
    bottom: 0;
    left: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .icon {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    line-height: 48px;
    text-align: center;
    background-color: #00449b;
    color: #fff;
    font-size: 30px;
    text-indent: 3px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ {
    position: relative;
    padding: 0 10%;
    margin-top: -4%;
    width: 100%;
    flex-wrap: wrap;
    display: none;
    align-items: center;
    justify-content: space-between
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_ {
    text-align: center;
    opacity: 0;
    width: 45%;
    margin-top: 4%;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    overflow: hidden;
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_>img {
    display: inline-block;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 6px
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_ .pf {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 52%;
    margin-bottom: 10px;
    transform: translateX(-10.5%) scale(1.3);
    -webkit-transform: translateX(-10.5%) scale(1.3);
    -moz-transform: translateX(-10.5%) scale(1.3);
    -o-transform: translateX(-10.5%) scale(1.3);
    -ms-transform: translateX(-10.5%) scale(1.3)
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_ h3 {
    padding: 12px 0;
    font-weight: 700;
    font-size: 16px;
    color: #556463;
    position: relative;
    width: 100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    margin-bottom: 0
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_ h3:after {
    content: attr(data-node);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #00449b;
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_:hover {
    border-color: #00449b
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_:hover h3 {
    color: transparent
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_ .note .box_ .list_:hover h3:after {
    opacity: 1
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_:hover .msg>h3 {
    color: #000
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_:hover .msg>small {
    color: #000
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_:hover .msg>i {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_:hover .note {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1;
    pointer-events: auto
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_:hover .note .icon {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg)
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_:hover .note .box_ {
    display: flex
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_.on .msg>h3 {
    color: #000
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_.on .msg>small {
    color: #000
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_.on .msg>i {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_.on .note {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1;
    pointer-events: auto;
    padding-top: 3vw
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_.on .note .icon {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg)
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_.on .note .box_ {
    display: flex
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items .list_:first-of-type .note .box_ {
    justify-content: center
}

#plan #main #r1 .rowMain .inner>.box .wrap .btm .items.on {
    opacity: 1;
    pointer-events: auto
}

#plan #main #r1 .rowMain .inner>.box .other {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 12;
    padding: 6% 8%;
    pointer-events: none
}

#plan #main #r1 .rowMain .inner>.box .other .o-main {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .6rem 5% .6rem 5%;
    opacity: 0;
    transition: all 1.2s ease-in-out;
    -webkit-transition: all 1.2s ease-in-out;
    -moz-transition: all 1.2s ease-in-out;
    -o-transition: all 1.2s ease-in-out;
    -ms-transition: all 1.2s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    z-index: 4;
    background-position: center;
    background-size: cover;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0)
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    pointer-events: none
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 video.a {
    display: block
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 video.b {
    display: none
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    opacity: 0;
    z-index: 10;
    animation: fadeInRightSmall 1s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: both
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1 .pic .dot {
    position: absolute;
    width: 18%;
    height: 10%;
    pointer-events: auto
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.after_ video.a {
    display: none
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.after_ video.b {
    display: block
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.on {
    z-index: 10;
    opacity: 1
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.on .pic {
    display: block
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.in {
    z-index: 12;
    opacity: 1
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .o-bg .mediaCon1.out {
    opacity: 0;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .topic {
    margin-bottom: 3vw;
    cursor: pointer
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .topic>small {
    color: #0d3033;
    font-size: 16px
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .topic>small>i {
    font-size: 22px;
    vertical-align: middle
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .topic h2 {
    color: #0d3033;
    font-size: .42rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .topic h2>b {
    color: #0d3033;
    font-weight: bolder;
    font-size: .42rem
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .topic h2>small {
    font-size: .26rem;
    color: #0d3033;
    font-weight: 400
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .topic>span {
    font-size: 42px
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
    flex-direction: column;
    width: 120px;
    min-height: 585px
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box>img {
    display: inline-block
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box {
    width: 120px;
    padding: 15px 0;
    position: relative;
    cursor: pointer;
    pointer-events: auto
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box>span.txt_ {
    text-align: center;
    font-weight: bolder;
    font-size: .3rem;
    color: #0d3033;
    position: relative;
    z-index: 10;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    display: block;
    width: 100%
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box>span.txt_>small {
    display: block;
    font-size: 12px;
    text-align: center
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_ {
    position: absolute;
    height: 100px;
    z-index: 12;
    left: -15px;
    top: -12px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 25px 50px -4px rgba(0, 43, 43, .16);
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition-delay: .1s
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_>em {
    display: inline-block;
    font-style: normal;
    font-size: .36rem;
    text-indent: 15px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_>em>small {
    display: block;
    font-size: 12px;
    text-align: center;
    text-indent: 15px
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_ svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box .box_ svg path {
    fill: none;
    stroke: #75979c;
    stroke-linecap: round;
    stroke-width: 1px;
    stroke-dasharray: 800px;
    stroke-dashoffset: 800px
}

@keyframes svg_fn {
    0% {
        stroke-dashoffset: 800px
    }
    100% {
        stroke-dashoffset: 0
    }
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box.on>span.txt_ {
    opacity: 0;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2)
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box.on .box_ {
    opacity: 1;
    pointer-events: auto
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box.on .box_ svg path {
    animation: svg_fn 5s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: both
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box:hover>span.txt_ {
    opacity: 1;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .box .txt-box:hover .box_ svg path {
    animation-play-state: paused
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_ {
    position: absolute;
    pointer-events: auto;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 100px;
    line-height: 1.2;
    font-weight: bolder;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_>i {
    font-size: 24px;
    color: #0d3033;
    margin-right: 10px;
    position: relative;
    z-index: 10;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_>small {
    position: relative;
    z-index: 10;
    color: #0d3033
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_:before {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100px;
    background-color: #0d3033;
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    -ms-transform: scale(.5);
    opacity: 0;
    transition: all .3s cubic-bezier(.61, .26, .25, .91)
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_:after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid rgba(13, 48, 51, .3);
    border-radius: 100px;
    transition: all .3s cubic-bezier(.25, .76, .52, .49)
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_:hover>i {
    color: #fff
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_:hover>small {
    color: #fff
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_:hover:before {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#plan #main #r1 .rowMain .inner>.box .other .o-main .con .return_:hover:after {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    opacity: 0
}

#plan #main #r1 .rowMain .inner>.box .other .o-main.on {
    opacity: 1;
    pointer-events: auto
}

#plan #main #r1 .rowMain .inner>.box .other #o-pic {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none
}

#plan #main #r1 .rowMain .inner>.box .other #o-pic .pic {
    opacity: 1;
    position: absolute
}

#plan #other {
    z-index: 9
}

#plan_detail {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#plan_detail #main {
    position: absolute;
    z-index: 5;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    animation-duration: .3s;
    transform-style: preserve-3d
}

#plan_detail #main #r1 {
    position: relative;
    width: 100%;
    height: 100%
}

#plan_detail #main #r1 .rowMain {
    height: 100%
}

#plan_detail #main #r1 .rowMain .inner {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden
}

#plan_detail #main #r1 .rowMain .inner>.box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6% 8%;
    padding-top: 1.3rem
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    z-index: 4;
    background-position: center;
    background-size: cover;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0)
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1 video.a {
    display: block
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1 video.b {
    display: none
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1 canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1 .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    opacity: 0;
    z-index: 10;
    animation: fadeInRightSmall 1s ease-in-out;
    animation-delay: 2s;
    animation-fill-mode: both
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1 .pic .dot {
    position: absolute;
    width: 20.8%;
    height: 10%;
    pointer-events: auto
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1.after_ video.a {
    display: none
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1.after_ video.b {
    display: block
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1.on {
    z-index: 10;
    opacity: 1
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1.on .pic {
    display: block
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1.in {
    z-index: 12;
    opacity: 1
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .o-bg .mediaCon1.out {
    opacity: 0;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .topic {
    margin-bottom: 3vw;
    cursor: pointer
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .topic>small {
    color: #0d3033;
    font-size: 16px
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .topic>small>i {
    font-size: 22px;
    vertical-align: middle
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .topic h2 {
    color: #0d3033;
    font-size: .42rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .topic h2>b {
    color: #0d3033;
    font-weight: bolder;
    font-size: .42rem
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .topic h2>small {
    font-size: .26rem;
    color: #0d3033;
    font-weight: 400
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .topic>span {
    font-size: 42px
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
    flex-direction: column;
    width: 120px;
    min-height: 585px
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box>img {
    display: inline-block
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box {
    width: 120px;
    padding: 15px 0;
    position: relative;
    cursor: pointer;
    pointer-events: auto
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box>span.txt_ {
    text-align: center;
    font-weight: bolder;
    font-size: .3rem;
    color: #0d3033;
    position: relative;
    z-index: 10;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box .box_ {
    position: absolute;
    height: 100px;
    z-index: 12;
    left: -15px;
    top: -12px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 25px 50px -4px rgba(0, 43, 43, .16);
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition-delay: .1s
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box .box_>em {
    display: inline-block;
    font-style: normal;
    width: 120px;
    font-size: .36rem;
    text-indent: 15px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box .box_ svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box .box_ svg path {
    fill: none;
    stroke: #75979c;
    stroke-linecap: round;
    stroke-width: 1px;
    stroke-dasharray: 800px;
    stroke-dashoffset: 800px
}

@keyframes svg_fn {
    0% {
        stroke-dashoffset: 800px
    }
    100% {
        stroke-dashoffset: 0
    }
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box.on>span.txt_ {
    opacity: 0;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2)
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box.on .box_ {
    opacity: 1;
    pointer-events: auto
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box.on .box_ svg path {
    animation: svg_fn 5s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: both
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box:hover>span.txt_ {
    opacity: 1;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .box .txt-box:hover .box_ svg path {
    animation-play-state: paused
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_ {
    position: absolute;
    pointer-events: auto;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 100px;
    line-height: 1.2;
    font-weight: bolder;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_>i {
    font-size: 24px;
    color: #0d3033;
    margin-right: 10px;
    position: relative;
    z-index: 10;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_>small {
    position: relative;
    z-index: 10;
    color: #0d3033
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_:before {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100px;
    background-color: #0d3033;
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    -ms-transform: scale(.5);
    opacity: 0;
    transition: all .3s cubic-bezier(.61, .26, .25, .91)
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_:after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid rgba(13, 48, 51, .3);
    border-radius: 100px;
    transition: all .3s cubic-bezier(.25, .76, .52, .49)
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_:hover>i {
    color: #fff
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_:hover>small {
    color: #fff
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_:hover:before {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#plan_detail #main #r1 .rowMain .inner>.box .o-main .con .return_:hover:after {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    opacity: 0
}

#plan_detail #other {
    z-index: 9
}

#customer {
    background-color: #f5fafa
}

#customer #main .row {
    position: relative
}

#customer #main .row .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1
}

#customer #main .row .rowMain {
    padding-top: 1.15rem;
    position: relative;
    z-index: 5
}

#customer #main .row .rowMain .title {
    text-align: center;
    width: 100%
}

#customer #main .row .rowMain .title h2 {
    line-height: .8rem
}

#customer #main #banner .inner {
    width: 100%;
    padding-top: .9rem;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

@media screen and (orientation:landscape) {
    #customer #main #banner .inner {
        height: 100vh
    }
}

#customer #main #banner .inner h1 {
    font-weight: 400
}

#customer #main #banner .inner .msg {
    position: relative
}

#customer #main #banner .inner .msg>small {
    margin-bottom: .9rem;
    display: block;
    text-align: center
}

#customer #main #banner .inner .msg .box {
    width: 100%;
    height: 12vw;
    max-height: 2.3rem;
    border: 1px solid rgba(248, 250, 250, .3)
}

#customer #main #banner .inner .msg .box .col-2 {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center
}

#customer #main #banner .inner .msg .box .col-2 .half {
    display: flex;
    align-items: center;
    justify-content: center
}

#customer #main #banner .inner .msg .box .col-2 .half>.icon {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    line-height: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin-right: .46rem
}

#customer #main #banner .inner .msg .box .col-2 .half>.icon>i {
    color: #00449b
}

#customer #main #banner .inner .msg .box .col-2:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    pointer-events: none;
    width: 1px;
    height: 62%;
    background-color: rgba(248, 250, 250, .3);
    top: .35rem
}

#customer #main #banner .inner .msg .box .col-2 .layer-btn4 {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -.35rem;
    width: 2rem;
    height: .7rem
}

#customer #main #r1 {
    padding: .7rem 0 1.5rem 0
}

#customer #main #r1 .inner>h2 {
    line-height: .56rem;
    text-align: center;
    font-weight: 400
}

#customer #main #r1 .inner .box {
    padding: .6rem 0;
    text-align: center;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 31px 120px 0 rgba(8, 51, 51, .07)
}

#customer #main #r1 .inner .box .form_ {
    display: inline-block;
    width: 76%;
    max-width: 815rem
}

#customer #main #r1 .inner .box .form_ .in-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: .2rem 0
}

#customer #main #r1 .inner .box .form_ .in-row .left {
    width: 1.3rem;
    text-align: right;
    margin-right: .5rem
}

#customer #main #r1 .inner .box .form_ .in-row .left>span {
    line-height: .6rem;
    display: block
}

#customer #main #r1 .inner .box .form_ .in-row .right {
    width: calc(100% - 1.8rem);
    min-height: .6rem;
    display: flex;
    justify-content: space-between;
    align-items: center
}

#customer #main #r1 .inner .box .form_ .in-row .right .checkBox {
    height: .6rem
}

#customer #main #r1 .inner .box .form_ .in-row .right .checkBox.wid-30 {
    width: 22%
}

#customer #main #r1 .inner .box .form_ .in-row .right .radioBox {
    margin-right: .38rem
}

#customer #main #r1 .inner .box .form_ .in-row .right textarea {
    background: #f2f7f7;
    box-sizing: border-box;
    color: #333;
    width: 100%;
    padding: 3%;
    border-radius: 6px;
    font-family: inherit
}

#customer #main #r1 .inner .box .form_ .in-row .right textarea::-webkit-input-placeholder {
    color: #879696
}

#customer #main #r1 .inner .box .form_ .in-row .right input[type=text] {
    background: #f2f7f7;
    color: #333;
    width: 100%;
    height: .6rem;
    padding: 5px 15px;
    border: none;
    border-radius: 6px;
    box-sizing: border-box
}

#customer #main #r1 .inner .box .form_ .in-row .right input[type=text]::-webkit-input-placeholder {
    color: #879696
}

#customer #main #r1 .inner .box .form_ .in-row .right .yama {
    display: inline-block;
    width: 30%;
    height: .6rem;
    background: #f2f7f7;
    position: relative;
    margin-left: 15px
}

#customer #main #r1 .inner .box .form_ .in-row .right .yama>img {
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%)
}

#customer #main #r1 .inner .box .form_ .in-row .right .ad {
    text-align: left;
    padding-top: .16rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid rgba(135, 150, 150, .2)
}

#customer #main #r1 .inner .box .form_ .in-row .right .sub {
    width: 2.2rem;
    margin-top: .16rem;
    cursor: pointer;
    height: .6rem;
    text-align: center;
    background: #009438;
    color: #fff;
    font-family: inherit;
    border-radius: 100px;
    margin-right: .22rem
}

#customer #main #r1 .inner .box .form_ .in-row .right .reset {
    width: 2.2rem;
    margin-top: .16rem;
    cursor: pointer;
    height: .6rem;
    text-align: center;
    border-radius: 100px;
    background-color: transparent;
    font-family: inherit;
    border: 1px solid #00449b;
    color: #00449b
}

#customer #main #r1 .inner .box .form_ .in-row .right.f_r {
    justify-content: flex-start
}

#new .row .title {
    text-align: center;
    width: 100%
}

#new .row .title h2 {
    line-height: .8rem
}

#new #main #banner {
    background-color: #e9eff7;
    position: relative
}

#new #main #banner .inner {
    position: relative;
    width: 100%;
    padding-top: .9rem
}

@media screen and (orientation:landscape) {
    #new #main #banner .inner {
        height: 100vh
    }
}

#new #main #banner .inner #sw1 {
    height: 100%
}

#new #main #banner .inner #sw1 .swiper-wrapper .swiper-slide {
    width: 46vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    opacity: .5;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out
}

#new #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box {
    padding-bottom: 52.64%;
    width: 100%;
    position: relative;
    overflow: hidden
}

#new #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box .date {
    color: #fff;
    left: .8rem;
    top: 0;
    width: 52.64%;
    text-align: center;
    position: absolute;
    height: .8rem;
    line-height: .8rem
}

#new #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box .date>em {
    font-style: normal;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg)
}

#new #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .msg {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .6rem
}

#new #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .msg h6 {
    margin-top: .14rem;
    line-height: .4rem;
    max-width: calc(100% - 2.5rem);
    padding-right: 6%
}

#new #main #banner .inner #sw1 .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1
}

#new #main #banner .inner #sw1 .swiper-pagination {
    bottom: 15px
}

#new #main #banner .inner #sw1 .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border: 1px solid #999;
    opacity: .5;
    border-radius: 7px;
    cursor: pointer
}

#new #main #banner .inner #sw1 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background: #00449b;
    border-color: #00449b
}

#new #main #banner .inner .swiper-other {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
    padding-top: .9rem
}

#new #main #banner .inner .swiper-other #sw_next {
    left: 88%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    min-height: .72rem
}

#new #main #banner .inner .swiper-other #sw_prev {
    right: 88%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    min-height: .72rem
}

#new #main #banner .other {
    position: absolute;
    width: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    padding-bottom: 10px;
    text-align: center
}

#new #main #banner .other>i {
    color: #333;
    display: inline-block;
    animation: scroll-icon 1.2s infinite alternate cubic-bezier(.65, .05, .36, 1)
}

#new #main #banner .other>span {
    display: block;
    text-align: center
}

#new #main #r1 {
    padding-top: .7rem;
    padding-bottom: 1.6rem
}

#new #main #r1 .inner .box {
    width: 100%
}

#new #main #r1 .inner .box .col-3 {
    margin: .7rem 0
}

#new #main #r1 .inner .box .col-3 .col {
    width: 31.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: box-shadow .5s ease-in-out;
    -webkit-transition: box-shadow .5s ease-in-out;
    -moz-transition: box-shadow .5s ease-in-out;
    -o-transition: box-shadow .5s ease-in-out;
    -ms-transition: box-shadow .5s ease-in-out
}

#new #main #r1 .inner .box .col-3 .col .photo {
    width: 100%;
    padding-bottom: 74.8%;
    overflow: hidden;
    position: relative
}

#new #main #r1 .inner .box .col-3 .col .photo .pic {
    transition: transform .6s ease-in-out;
    -webkit-transition: transform .6s ease-in-out;
    -moz-transition: transform .6s ease-in-out;
    -o-transition: transform .6s ease-in-out;
    -ms-transition: transform .6s ease-in-out
}

#new #main #r1 .inner .box .col-3 .col .msg {
    background-color: #f8f8f8;
    padding: 9% 7%;
    position: relative;
    width: 100%;
    box-sizing: border-box
}

#new #main #r1 .inner .box .col-3 .col .msg h5 {
    height: 1.2rem;
    opacity: 0;
    transition: color .6s ease-in-out;
    -webkit-transition: color .6s ease-in-out;
    -moz-transition: color .6s ease-in-out;
    -o-transition: color .6s ease-in-out;
    -ms-transition: color .6s ease-in-out
}

#new #main #r1 .inner .box .col-3 .col .msg p {
    margin-bottom: 0;
    color: #999;
    font-family: DIN-BOLD_0
}

#new #main #r1 .inner .box .col-3 .col .msg:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: .05rem;
    background-color: #9c9c9c
}

#new #main #r1 .inner .box .col-3 .col .msg:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 6;
    right: 0;
    margin: 0 auto;
    transform-origin: 50% 50%;
    transition: width .8s ease-in-out;
    -webkit-transition: width .8s ease-in-out;
    -moz-transition: width .8s ease-in-out;
    -o-transition: width .8s ease-in-out;
    -ms-transition: width .8s ease-in-out;
    width: 0;
    height: .05rem;
    background-color: #00449b
}

#new #main #r1 .inner .box .col-3 .col .msg.up:after {
    top: 0;
    bottom: auto
}

#new #main #r1 .inner .box .col-3 .col .msg.up:before {
    top: 0;
    bottom: auto
}

#new #main #r1 .inner .box .col-3 .col:hover {
    box-shadow: 0 10px 45px -5px rgba(0, 0, 0, .2)
}

#new #main #r1 .inner .box .col-3 .col:hover .photo .pic {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05)
}

#new #main #r1 .inner .box .col-3 .col:hover .msg h5 {
    color: #00449b
}

#new #main #r1 .inner .box .col-3 .col:hover .msg:before {
    width: 100%
}

#newDetail #main #banner {
    width: 100%;
    padding-bottom: 37.34%;
    position: relative
}

#newDetail #main #banner .bg {
    width: 100%;
    padding-bottom: 33.17%;
    position: absolute;
    left: 0;
    top: .8rem;
    overflow: hidden
}

#newDetail #main #banner .bg:after {
    pointer-events: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4)
}

#newDetail #main #banner .bg svg {
    position: absolute;
    width: 100%;
    z-index: 2;
    height: 1.6rem;
    left: 0;
    bottom: 0
}

#newDetail #main #banner .inner {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    height: calc(100% - 100px);
    padding-top: .9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#newDetail #main #banner .inner .topic {
    margin-top: .2rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .5)
}

#newDetail #main #banner .inner .topic .layer-btn3 {
    padding: .1rem .4rem
}

#newDetail #main #banner .inner .topic .layer-btn3>span>small {
    margin-left: .14rem
}

#newDetail #main #banner .inner .con {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

#newDetail #main #banner .inner .con h1 {
    width: 64%;
    text-align: center;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.5
}

#newDetail #main #r1 {
    min-height: 30vh;
    padding-top: .3rem;
    padding-bottom: .5rem;
    margin-top: -1px
}

#newDetail #main #r1 .inner {
    max-width: 900px
}

#newDetail #main #r1 .inner .topic {
    width: 100%;
    position: relative;
    margin-bottom: .4rem
}

#newDetail #main #r1 .inner .topic>span {
    padding-right: 20px;
    background-color: #fff;
    position: relative;
    z-index: 5;
    font-weight: 600
}

#newDetail #main #r1 .inner .topic .line {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1px;
    width: 100%;
    z-index: 2;
    background-color: #00449b
}

#newDetail #main #r1 .inner .con {
    padding-bottom: .4rem
}

#newDetail #main #r1 .inner .con p {
    margin-bottom: 0
}

#newDetail #main #r1 .inner .con hr {
    margin: 0;
    margin-bottom: .3rem
}

#newDetail #main #r1 .inner .con * {
    line-height: 2;
    font-size: .16rem;
    color: #333
}

@media screen and (orientation:portrait) {
    #newDetail #main #r1 .inner .con * {
        font-size: 14px
    }
}

@media screen and (orientation:portrait) {
    #newDetail #main #r1 .inner .con span,
    #newDetail #main #r1 .inner .con strong {
        font-size: 14px!important
    }
}

#newDetail #main #r1 .inner .con img {
    max-width: 99%;
    margin: .2rem auto;
    height: auto!important
}

#newDetail #main #r1 .inner .btm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem 0;
    border-top: 1px solid #00449b
}

#newDetail #main #r1 .inner .btm>a {
    position: relative;
    cursor: pointer;
    display: block
}

#newDetail #main #r1 .inner .btm>a>span {
    font-weight: 700;
    font-size: 14px;
    line-height: 40px
}

#newDetail #main #r1 .inner .btm>a>span>em {
    font-family: auto;
    font-style: normal
}

#newDetail #main #r1 .inner .btm>a>h6 {
    position: absolute;
    font-size: 14px;
    color: #879696;
    white-space: nowrap;
    top: 0;
    line-height: 40px;
    opacity: 0;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#newDetail #main #r1 .inner .btm>a>h6.lm {
    left: 125%;
    transform: translate3d(6px, 0, 0);
    -webkit-transform: translate3d(6px, 0, 0);
    -moz-transform: translate3d(6px, 0, 0);
    -o-transform: translate3d(6px, 0, 0);
    -ms-transform: translate3d(6px, 0, 0)
}

#newDetail #main #r1 .inner .btm>a>h6.rm {
    right: 125%;
    transform: translate3d(-6px, 0, 0);
    -webkit-transform: translate3d(-6px, 0, 0);
    -moz-transform: translate3d(-6px, 0, 0);
    -o-transform: translate3d(-6px, 0, 0);
    -ms-transform: translate3d(-6px, 0, 0)
}

#newDetail #main #r1 .inner .btm>a:hover>h6 {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#newDetail #main #r1 .inner .other {
    width: 100%;
    text-align: center;
    padding: .3rem 0
}

#newDetail #main #r1 .inner .other .layer-btn3 {
    min-width: 2rem;
    text-align: center;
    display: inline-block;
    padding: .1rem .4rem;
    /* box-shadow: 0 21px 60px 0 rgba(0, 140, 42, .3) */
}

#newDetail #main #r1 .inner .other .layer-btn3>span {
    justify-content: center;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#newDetail #main #r1 .inner .other .layer-btn3:hover>span {
    letter-spacing: 2px;
    text-decoration: underline;
    color: #fff
}

#video .row .title {
    text-align: center;
    width: 100%
}

#video .row .title h2 {
    line-height: .8rem
}

#video #main #banner {
    background-color: #000;
    position: relative
}

#video #main #banner .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden
}

#video #main #banner .bg .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    filter: blur(5px);
    transform-origin: 50% 50%;
    transition: opacity .5s ease-in-out, transform 3s ease-in-out
}

#video #main #banner .bg .pic.on {
    opacity: .6;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1)
}

#video #main #banner .inner {
    position: relative;
    width: 100%;
    padding-top: .9rem
}

@media screen and (orientation:landscape) {
    #video #main #banner .inner {
        height: 100vh
    }
}

#video #main #banner .inner #sw1 {
    height: 100%
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide {
    width: 46vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box {
    padding-bottom: 52.64%;
    width: 100%;
    position: relative;
    overflow: hidden
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    z-index: 2;
    background-color: rgba(0, 0, 0, .4)
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box .play {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 4;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    line-height: .7rem;
    text-align: center;
    background-color: #fff;
    border: 1px solid #00449b;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 10px 46px 0 rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box .play i {
    color: #00449b;
    margin-left: 2px
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box .play:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    background-color: transparent;
    border-color: #fff
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box .play:hover i {
    color: #fff
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .box .play:hover+.mask {
    opacity: .6
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .msg {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: .4rem
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .msg h6 {
    margin-top: .14rem;
    line-height: .4rem;
    max-width: calc(100% - 2.5rem);
    color: #fff;
    margin-right: .3rem
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .msg h6>small {
    display: block;
    color: rgba(255, 255, 255, .2)
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .msg .line {
    flex-grow: 1;
    height: .4rem;
    position: relative;
    margin-top: .14rem
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .msg .line:after {
    content: "";
    height: 1px;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-color: rgba(255, 255, 255, .3)
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide .msg .time {
    margin-top: .14rem;
    margin-left: .3rem;
    color: #fff;
    font-weight: 600;
    line-height: .4rem;
    display: block
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide.swiper-slide-active .box .mask {
    opacity: 0
}

#video #main #banner .inner #sw1 .swiper-wrapper .swiper-slide.swiper-slide-active .box .play {
    opacity: 1;
    pointer-events: auto
}

#video #main #banner .inner #sw1 .swiper-pagination {
    bottom: 15px
}

#video #main #banner .inner #sw1 .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border: 1px solid #999;
    opacity: .5;
    border-radius: 7px;
    cursor: pointer
}

#video #main #banner .inner #sw1 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background: #00449b;
    border-color: #00449b
}

#video #main #banner .inner .swiper-other {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
    padding-top: .9rem
}

#video #main #banner .inner .swiper-other #sw_next {
    left: 88%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    padding: .2rem .4rem
}

#video #main #banner .inner .swiper-other #sw_prev {
    right: 88%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    pointer-events: auto;
    min-width: 1.47rem;
    padding: .2rem .4rem
}

#video #main #banner .other {
    position: absolute;
    width: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    padding-bottom: 10px;
    text-align: center
}

#video #main #banner .other>i {
    color: #fff;
    display: inline-block;
    animation: scroll-icon 1.2s infinite alternate cubic-bezier(.65, .05, .36, 1)
}

#video #main #banner .other>span {
    display: block;
    text-align: center;
    color: #fff
}

#video #main #r1 {
    padding-top: .7rem;
    padding-bottom: 1.6rem;
    position: relative
}

#video #main #r1 .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat
}

#video #main #r1 .inner .title {
    margin-bottom: .8rem
}

#video #main #r1 .inner .box {
    width: 100%
}

#video #main #r1 .inner .box .tree {
    width: 100%;
    margin-bottom: .7rem;
    display: flex;
    align-items: center;
    justify-content: center
}

#video #main #r1 .inner .box .tree .tab {
    margin: 0 9px;
    width: 2rem
}

#video #main #r1 .inner .box .tree .tab .layer-btn4 {
    width: 100%
}

#video #main #r1 .inner .box .tree .tab .layer-btn4>span {
    font-weight: 600
}

#video #main #r1 .inner .box .tab-list {
    position: relative;
    display: none
}

#video #main #r1 .inner .box .tab-list .con {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap
}

#video #main #r1 .inner .box .tab-list .con .layer-box {
    width: calc(50% - 10px);
    margin-bottom: 30px
}

#video #main #r1 .inner .box .tab-list .con .layer-box .photo {
    cursor: pointer;
    background-color: #000
}

#video #main #r1 .inner .box .tab-list .con .layer-box .photo .play {
    z-index: 4;
    position: absolute;
    bottom: .35rem;
    left: .35rem;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    line-height: .7rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out
}

#video #main #r1 .inner .box .tab-list .con .layer-box .photo .play>i {
    position: relative;
    z-index: 4;
    color: #fff;
    margin-left: 2px
}

#video #main #r1 .inner .box .tab-list .con .layer-box .photo .play:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 3px solid #fff;
    pointer-events: none;
    border-radius: 50%;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out
}

#video #main #r1 .inner .box .tab-list .con .layer-box .photo:hover .pic {
    opacity: .8
}

#video #main #r1 .inner .box .tab-list .con .layer-box .photo:hover .play {
    background-color: #00449b
}

#video #main #r1 .inner .box .tab-list .con .layer-box .photo:hover .play:after {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    opacity: 0
}

#video #main #r1 .inner .box .tab-list .pager {
    width: 100%
}

#video #main #r1 .inner .box .tab-list .pager>a {
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out
}

#video #main #r1 .inner .box .tab-list .pager .out {
    pointer-events: none;
    opacity: .4
}

#video #main #r1 .inner .box .tab-list.on {
    display: block
}

#dataCenter .row .title {
    text-align: center;
    width: 100%;
    margin-bottom: 1.15rem
}

#dataCenter .row .title h2 {
    line-height: .8rem
}

#dataCenter .row .topic {
    border-bottom: 1px solid rgba(135, 150, 150, .3)
}

#dataCenter .row .topic h5 {
    margin-bottom: 0;
    padding-bottom: .32rem
}

#dataCenter #main {
    padding-top: .9rem
}

#dataCenter #main #r1 {
    padding-top: 1rem;
    padding-bottom: 1.6rem;
    position: relative
}

#dataCenter #main #r1 .inner .box {
    padding-left: 19%;
    position: relative;
    min-height: 680px
}

#dataCenter #main #r1 .inner .box .right {
    width: 100%;
    padding: .4rem .72rem;
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25);
    background-color: #fff
}

#dataCenter #main #r1 .inner .box .right .topic {
    position: relative
}

#dataCenter #main #r1 .inner .box .right .topic #data-menu {
    position: absolute;
    width: 100px;
    right: 0;
    height: 100%;
    top: 0;
    padding-bottom: .32rem;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

#dataCenter #main #r1 .inner .box .right .topic #data-menu>span {
    white-space: nowrap;
    font-size: 16px;
    margin-right: 8px
}

#dataCenter #main #r1 .inner .box .right .topic #data-menu>a {
    font-size: 22px
}

#dataCenter #main #r1 .inner .box .right .items {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap
}

#dataCenter #main #r1 .inner .box .right .items .list {
    width: 25%;
    margin-top: .38rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#dataCenter #main #r1 .inner .box .right .items .list .photo {
    width: 80%;
    padding-bottom: 100%;
    border-radius: .12rem;
    margin-bottom: .24rem;
    box-shadow: 0 20px 70px 0 rgba(0, 68, 155, .1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

#dataCenter #main #r1 .inner .box .right .items .list .photo .pic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out
}

#dataCenter #main #r1 .inner .box .right .items .list .photo .pic:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 4
}

#dataCenter #main #r1 .inner .box .right .items .list .photo .pic>span {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    line-height: 0.8rem;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .18rem
}

#dataCenter #main #r1 .inner .box .right .items .list .photo .pic>span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 4px solid #fff;
    pointer-events: none;
    border-radius: 50%;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transition: transform .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out
}

#dataCenter #main #r1 .inner .box .right .items .list .photo .pic>small {
    position: relative;
    z-index: 10;
    font-weight: 600;
    color: #fff;
    text-align: center;
    display: block;
    transform: translate3d(0, 6px, 0);
    -webkit-transform: translate3d(0, 6px, 0);
    -moz-transform: translate3d(0, 6px, 0);
    -o-transform: translate3d(0, 6px, 0);
    -ms-transform: translate3d(0, 6px, 0);
    transition: transform .6s ease-in-out;
    -webkit-transition: transform .6s ease-in-out;
    -moz-transition: transform .6s ease-in-out;
    -o-transition: transform .6s ease-in-out;
    -ms-transition: transform .6s ease-in-out
}

#dataCenter #main #r1 .inner .box .right .items .list .msg p {
    color: #2f3333;
    margin-top: .14rem;
    margin-bottom: .1rem
}

#dataCenter #main #r1 .inner .box .right .items .list.is_honor .photo {
    background-size: contain;
    padding-bottom: 80%
}

@media screen and (orientation:landscape) {
    #dataCenter #main #r1 .inner .box .right .items .list:nth-of-type(3n) {
        margin-right: 0
    }
    #dataCenter #main #r1 .inner .box .right .items .list:hover .photo .pic {
        opacity: 1
    }
    #dataCenter #main #r1 .inner .box .right .items .list:hover .photo .pic>a:after {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none
    }
    #dataCenter #main #r1 .inner .box .right .items .list:hover .photo .pic>small {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none
    }
}

@media screen and (orientation:portrait) {
    #dataCenter #main #r1 .inner .box .right .items .list:nth-of-type(2n) {
        margin-right: 0
    }
}

#dataCenter #main #r1 .inner .box .right .pager {
    width: 100%
}

#dataCenter #main #r1 .inner .box .right .pager>a {
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out
}

#dataCenter #main #r1 .inner .box .right .pager .out {
    pointer-events: none;
    opacity: .4
}

#dataCenter #main #r1 .inner .box .left {
    position: absolute;
    background-color: #fff;
    width: 24%;
    box-shadow: 0 31px 120px 0 rgba(8, 51, 51, .07);
    right: 84%;
    top: 0;
    padding: .4rem 0;
    border-radius: 12px
}

#dataCenter #main #r1 .inner .box .left .mask {
    position: absolute;
    width: 100vw;
    height: 100%;
    z-index: 2;
    right: 100%;
    top: 0;
    background-color: rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

#dataCenter #main #r1 .inner .box .left .search-box {
    margin: 0 .3rem;
    width: calc(100% - .6rem)
}

#dataCenter #main #r1 .inner .box .left .downItems {
    width: 100%
}

#dataCenter #main #r1 .local {
    position: relative;
    z-index: 10;
    pointer-events: none;
    width: 100%;
    height: 1px;
    opacity: 0
}

#afterInner #main #r1 {
    min-height: 30vh;
    padding-top: 1.2rem;
    padding-bottom: .5rem
}

#afterInner #main #r1 .inner {
    max-width: 900px
}

#afterInner #main #r1 .inner .title {
    width: 100%;
    position: relative;
    margin-bottom: .4rem
}

#afterInner #main #r1 .inner .title>span {
    padding-right: 20px;
    background-color: #fff;
    position: relative;
    z-index: 5;
    font-weight: 600
}

#afterInner #main #r1 .inner .title .line {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1px;
    width: 100%;
    z-index: 2;
    background-color: #00449b
}

#afterInner #main #r1 .inner .con {
    padding-bottom: .4rem
}

#afterInner #main #r1 .inner .con p {
    margin-bottom: 1em
}

#afterInner #main #r1 .inner .con h3,
#afterInner #main #r1 .inner .con h4,
#afterInner #main #r1 .inner .con h5 {
    margin-bottom: 1em
}

#afterInner #main #r1 .inner .con hr {
    margin: 0;
    margin-bottom: .3rem
}

#afterInner #main #r1 .inner .con * {
    line-height: 2;
    font-size: .16rem;
    color: #333
}

#afterInner #main #r1 .inner .con img {
    max-width: 99%;
    margin: .4rem auto;
    height: auto!important
}

#afterInner #main #r1 .inner .btm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem 0;
    border-top: 1px solid #00449b
}

#afterInner #main #r1 .inner .btm>a {
    position: relative;
    cursor: pointer;
    display: block
}

#afterInner #main #r1 .inner .btm>a>span {
    font-weight: 700;
    font-size: 14px;
    line-height: 40px
}

#afterInner #main #r1 .inner .btm>a>span>em {
    font-family: auto;
    font-style: normal
}

#afterInner #main #r1 .inner .btm>a>h6 {
    position: absolute;
    font-size: 14px;
    color: #879696;
    white-space: nowrap;
    top: 0;
    line-height: 40px;
    opacity: 0;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#afterInner #main #r1 .inner .btm>a>h6.lm {
    left: 125%;
    transform: translate3d(6px, 0, 0);
    -webkit-transform: translate3d(6px, 0, 0);
    -moz-transform: translate3d(6px, 0, 0);
    -o-transform: translate3d(6px, 0, 0);
    -ms-transform: translate3d(6px, 0, 0)
}

#afterInner #main #r1 .inner .btm>a>h6.rm {
    right: 125%;
    transform: translate3d(-6px, 0, 0);
    -webkit-transform: translate3d(-6px, 0, 0);
    -moz-transform: translate3d(-6px, 0, 0);
    -o-transform: translate3d(-6px, 0, 0);
    -ms-transform: translate3d(-6px, 0, 0)
}

#afterInner #main #r1 .inner .btm>a:hover>h6 {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    opacity: 1
}

#afterInner #main #r1 .inner .other {
    width: 100%;
    text-align: center;
    padding: .3rem 0
}

#afterInner #main #r1 .inner .other .layer-btn3 {
    min-width: 2rem;
    text-align: center;
    display: inline-block;
    padding: .1rem .4rem;
    box-shadow: 0 21px 60px 0 rgba(0, 140, 42, .3)
}

#afterInner #main #r1 .inner .other .layer-btn3>span {
    justify-content: center;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#afterInner #main #r1 .inner .other .layer-btn3:hover>span {
    letter-spacing: 2px;
    text-decoration: underline;
    color: #fff
}

#pro .row {
    position: relative
}

#pro .row .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1
}

#pro .row .rowMain {
    position: relative;
    z-index: 5
}

#pro .row .rowMain .title {
    text-align: center;
    width: 100%
}

#pro .row .rowMain .title h2 {
    line-height: .8rem
}

#pro #main {
    position: relative;
    z-index: 5;
    animation-duration: .2s;
    opacity: 0
}

#pro #main .bg {
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat
}

#pro #main #r1 .rowMain {
    /* padding-top: 1rem */
}

@media screen and (orientation:landscape) {
    #pro #main #r1 .rowMain {
        height: 60vh
    }
}

#pro #main #r1 .rowMain .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#pro #main #r1 .rowMain .inner .search-box {
    width: 56%;
    margin: 0 auto;
    height: .64rem;
    border-radius: 8px;
    padding-left: 45px;
    position: relative
}

#pro #main #r1 .rowMain .inner .search-box .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 55px;
    text-align: center;
    height: .64rem;
    line-height: .64rem;
    color: rgba(43, 47, 53, .3)
}

#pro #main #r1 .rowMain .inner .search-box .sub {
    width: 16%;
    cursor: pointer
}

#pro #main #r1 .rowMain .inner .items {
    margin-top: .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap
}

#pro #main #r1 .rowMain .inner .items .list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    border-radius: 8px;
    background: #f0faf3;
    overflow: hidden;
    margin: .5% 0;
    position: relative;
    cursor: pointer
}

#pro #main #r1 .rowMain .inner .items .list>i {
    position: relative;
    z-index: 5
}

#pro #main #r1 .rowMain .inner .items .list>span {
    position: relative;
    z-index: 6;
    color: #33403e;
    margin-left: .25rem
}

#pro #main #r1 .rowMain .inner .items .list .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 0;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#pro #main #r1 .rowMain .inner .items .list:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 148, 56, .5);
    opacity: 0;
    border-radius: 8px;
    transform: scale(.96);
    -webkit-transform: scale(.96);
    -moz-transform: scale(.96);
    -o-transform: scale(.96);
    -ms-transform: scale(.96);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#pro #main #r1 .rowMain .inner .items .list.wid-3 {
    width: 32.5%
}

#pro #main #r1 .rowMain .inner .items .list.wid-2 {
    width: 49.5%
}

@media screen and (orientation:landscape) {
    #pro #main #r1 .rowMain .inner .items .list:hover .mask {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        opacity: .5
    }
    #pro #main #r1 .rowMain .inner .items .list:hover:after {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        opacity: 1
    }
}

@media screen and (orientation:portrait) {
    #pro #main #r1 .rowMain .inner .items .list {
        margin: 2.5% 0;
        justify-content: space-between
    }
    #pro #main #r1 .rowMain .inner .items .list .mask {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        opacity: .3
    }
    #pro #main #r1 .rowMain .inner .items .list:after {
        transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        opacity: 1
    }
}

#pro #main .rowAll .ad {
    pointer-events: none;
    height: 1px;
    opacity: 0;
    position: absolute;
    top: -1.8rem;
    left: 0;
    width: 100%
}

#pro #main .rowAll .bg {
    width: 100%;
    padding-bottom: 30%;
    height: 0
}

#pro #main .rowAll .bg .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4
}

#pro #main .rowAll .bg .mask {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 5;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00449b;
}

#pro #main .rowAll .bg .mask.lm {
    left: 0
}

#pro #main .rowAll .bg .mask.rm {
    right: 0
}

#pro #main .rowAll .bg .mask>span {
    width: 100%;
    text-align: center;
    margin-bottom: 4.2vw
}

#pro #main .rowAll .bg .mask>span>i {
    font-size: 1.1rem;
    display: inline-block
}

#pro #main .rowAll .bg .mask>span>small {
    display: block;
    width: 100%;
    font-weight: 600;
    text-align: center
}

#pro #main .rowAll .rowMain {
    padding-top: 25.8vw;
    padding-bottom: .7rem
}

#pro #main .rowAll .rowMain .inner {
    background: #fff;
    width: 100%;
    box-shadow: 0 0 81px 0 rgba(50, 57, 52, .15);
    border-radius: 12px;
    padding: 1% 4% 2% 4%
}

#pro #main .rowAll .rowMain .inner .swiper-container .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: center;
    flex-wrap: wrap
}

#pro #main .rowAll .rowMain .inner .swiper-container .swiper-wrapper .swiper-slide .list {
    display: block;
    width: calc(100%/3);
    margin-bottom: .2rem
}

#pro #main .rowAll .rowMain .inner .swiper-container .swiper-wrapper .swiper-slide .list .photo {
    width: 100%;
    padding-bottom: 64%
}

#pro #main .rowAll .rowMain .inner .swiper-container .swiper-wrapper .swiper-slide .list .photo .pic {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    height: 90%;
    background-size: contain
}

#pro #main .rowAll .rowMain .inner .swiper-container .swiper-wrapper .swiper-slide .list .msg {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
    margin-top: -.1rem
}

#pro #main .rowAll .rowMain .inner .swiper-container .swiper-wrapper .swiper-slide .list .msg small {
    display: block;
    text-align: center
}

#pro #main .rowAll .rowMain .inner .swiper-container .swiper-wrapper .swiper-slide .list .msg span {
    text-align: center;
    display: block;
    font-weight: 600
}

#pro #main .rowAll .rowMain .inner .swiper-container .pager {
    padding-bottom: 2%
}

#pro #btm {
    position: fixed;
    top: .9rem;
    border-top: 1px solid #eee;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0 0 75px 0 rgba(0, 0, 0, .07);
    transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    opacity: 0;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#pro #btm>ul {
    display: flex;
    justify-content: center;
    align-items: center
}

#pro #btm>ul li>a {
    padding: .2rem .5rem;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center
}

#pro #btm>ul li>a>i {
    margin-right: .2rem;
    font-weight: 400
}

#pro #btm>ul li>a:hover {
    color: #00449b
}

#pro #btm>ul li>a:hover>i {
    color: #00449b
}

#pro #btm>ul li.on>a {
    color: #00449b
}

#pro #btm>ul li.on>a>i {
    color: #00449b
}

#pro #btm.on {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none
}

#search .row {
    position: relative
}

#search .row .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1
}

#search .row .rowMain {
    position: relative;
    z-index: 5
}

#search .row .rowMain .title {
    text-align: center;
    width: 100%
}

#search .row .rowMain .title h2 {
    line-height: .8rem
}

#search #main {
    position: relative;
    z-index: 5;
    animation-duration: .2s;
    opacity: 0
}

#search #main .bg {
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat
}

#search #main #r1 .rowMain {
    padding-top: 1rem
}

@media screen and (orientation:landscape) {
    #search #main #r1 .rowMain {
        min-height: 100vh
    }
}

#search #main #r1 .rowMain .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 7vw
}

#search #main #r1 .rowMain .inner .search-box {
    width: 56%;
    margin: 0 auto;
    margin-bottom: 4vw;
    height: .64rem;
    border-radius: 8px;
    padding-left: 45px;
    position: relative
}

#search #main #r1 .rowMain .inner .search-box .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 55px;
    text-align: center;
    height: .64rem;
    line-height: .64rem;
    color: rgba(43, 47, 53, .3)
}

#search #main #r1 .rowMain .inner .search-box .sub {
    width: 16%;
    cursor: pointer
}

#search #main #r1 .rowMain .inner .con {
    width: 100%;
    padding-bottom: .5rem
}

#search #main #r1 .rowMain .inner .con .box {
    padding-top: .7rem
}

#search #main #r1 .rowMain .inner .con .box h2 {
    line-height: 1;
    margin-bottom: .6rem
}

#search #main #r1 .rowMain .inner .con .box .items {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-bottom: .1rem
}

#search #main #r1 .rowMain .inner .con .box .items .list {
    display: block;
    margin-bottom: .4rem
}

#search #main #r1 .rowMain .inner .con .box .items .list .photo {
    width: 100%;
    padding-bottom: 52%
}

#search #main #r1 .rowMain .inner .con .box .items .list h3 {
    line-height: 1;
    margin-top: .4rem;
    text-align: center;
    margin-bottom: .2rem;
    font-weight: 400
}

#search #main #r1 .rowMain .inner .con .box .items .list h4 {
    line-height: 1.5;
    margin-top: .4rem;
    text-align: center;
    margin-bottom: .2rem;
    font-weight: 400
}

#search #main #r1 .rowMain .inner .con .box .items .col {
    width: 31.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: box-shadow .5s ease-in-out;
    -webkit-transition: box-shadow .5s ease-in-out;
    -moz-transition: box-shadow .5s ease-in-out;
    -o-transition: box-shadow .5s ease-in-out;
    -ms-transition: box-shadow .5s ease-in-out
}

#search #main #r1 .rowMain .inner .con .box .items .col .photo {
    width: 100%;
    padding-bottom: 74.8%;
    overflow: hidden;
    position: relative
}

#search #main #r1 .rowMain .inner .con .box .items .col .photo .pic {
    transition: transform .6s ease-in-out;
    -webkit-transition: transform .6s ease-in-out;
    -moz-transition: transform .6s ease-in-out;
    -o-transition: transform .6s ease-in-out;
    -ms-transition: transform .6s ease-in-out
}

#search #main #r1 .rowMain .inner .con .box .items .col .msg {
    background-color: #f8f8f8;
    padding: 9% 7%;
    position: relative
}

#search #main #r1 .rowMain .inner .con .box .items .col .msg h5 {
    height: 1.2rem;
    opacity: 0;
    transition: color .6s ease-in-out;
    -webkit-transition: color .6s ease-in-out;
    -moz-transition: color .6s ease-in-out;
    -o-transition: color .6s ease-in-out;
    -ms-transition: color .6s ease-in-out
}

#search #main #r1 .rowMain .inner .con .box .items .col .msg p {
    margin-bottom: 0;
    color: #999;
    font-family: DIN-BOLD_0
}

#search #main #r1 .rowMain .inner .con .box .items .col .msg:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: .05rem;
    background-color: #9c9c9c
}

#search #main #r1 .rowMain .inner .con .box .items .col .msg:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 6;
    right: 0;
    margin: 0 auto;
    transform-origin: 50% 50%;
    transition: width .8s ease-in-out;
    -webkit-transition: width .8s ease-in-out;
    -moz-transition: width .8s ease-in-out;
    -o-transition: width .8s ease-in-out;
    -ms-transition: width .8s ease-in-out;
    width: 0;
    height: .05rem;
    background-color: #00449b
}

#search #main #r1 .rowMain .inner .con .box .items .col .msg.up:after {
    top: 0;
    bottom: auto
}

#search #main #r1 .rowMain .inner .con .box .items .col .msg.up:before {
    top: 0;
    bottom: auto
}

#search #main #r1 .rowMain .inner .con .box .items .col:hover {
    box-shadow: 0 10px 45px -5px rgba(0, 0, 0, .2)
}

#search #main #r1 .rowMain .inner .con .box .items .col:hover .photo .pic {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05)
}

#search #main #r1 .rowMain .inner .con .box .items .col:hover .msg h5 {
    color: #00449b
}

#search #main #r1 .rowMain .inner .con .box .items .col:hover .msg:before {
    width: 100%
}

#search #main #r1 .rowMain .inner .con .box.jue .items .list {
    width: 47%
}

#search #main #r1 .rowMain .inner .con .box.jue .items .list .photo {
    background-color: #f3f3f3
}

#search #main #r1 .rowMain .inner .con .box.case .items {
    justify-content: flex-start
}

#search #main #r1 .rowMain .inner .con .box.case .items .list {
    width: 31%;
    margin-right: 3.5%
}

#search #main #r1 .rowMain .inner .con .box.case .items .list:nth-child(3n) {
    margin-right: 0
}

#search #main #r1 .rowMain .inner .con .box.pro .items {
    justify-content: flex-start
}

#search #main #r1 .rowMain .inner .con .box.pro .items .list {
    width: 21%;
    margin-right: 5.33%
}

#search #main #r1 .rowMain .inner .con .box.pro .items .list .photo {
    padding-bottom: 88%;
    background-size: contain;
    background-color: #fff;
    box-shadow: 0 0 49px 2px rgba(30, 41, 59, .09)
}

#search #main #r1 .rowMain .inner .con .box.pro .items .list:nth-child(4n) {
    margin-right: 0
}

#search #main #r1 .rowMain .inner .con .box.new .items {
    justify-content: flex-start;
    padding-bottom: .7rem
}

#search #main #r1 .rowMain .inner .con .box.new .items .col {
    margin-right: 2.75%;
    margin-bottom: .4rem
}

#search #main #r1 .rowMain .inner .con .box.new .items .col:nth-child(3n) {
    margin-right: 0
}

#search #main #r1 .rowMain .inner .con .box:last-of-type .items {
    border-bottom: none
}

.pop {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center
}

.pop .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    animation-fill-mode: both;
    animation-name: fadeIn;
    animation-duration: .5s;
    animation-timing-function: ease-in-out
}

.pop .con {
    background-color: #fff;
    box-shadow: 0 7px 40px -10px rgba(29, 48, 48, .25);
    animation-fill-mode: both;
    animation-name: fadeIn;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    position: relative;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out
}

.pop .con .box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden
}

.pop .con .box #vimg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.pop .con .box #vimg.on {
    display: none
}

.pop .con .box #vimg.on+.video-js {
    display: block
}

.pop .con .box .video-js {
    display: none
}

.pop .con .closePop {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -.7rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    line-height: .5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.pop .con .closePop>i {
    color: #fff
}

.pop.on {
    display: flex
}

.pop.on .con {
    opacity: 1
}

#pPop .con {
    background-color: transparent;
    box-shadow: none
}

#pPop .con .box #vimg {
    background-size: contain
}

#dataPop {
    padding-top: .5rem
}

#dataPop .con .box iframe {
    display: block;
    width: 88vw;
    height: 80vh
}

#app_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden
}

#app_wrap .con {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#app_wrap .con .type-b {
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: calc(50px + 26vw);
    pointer-events: auto;
    z-index: 10;
    flex-wrap: wrap;
    width: 90%;
    left: 5vw;
    display: none
}

#app_wrap .con .type-b>h1 {
    position: absolute;
    top: -74px;
    text-align: center;
    width: 90%;
    left: 5vw;
    line-height: 50px
}

#app_wrap .con .type-b .list_ {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: space-between;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 2vw;
    cursor: pointer;
    max-width: 100%;
    position: relative;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#app_wrap .con .type-b .list_>.appTop {
    position: relative;
    z-index: 10;
    background-color: #00449b;
    border: 5px solid #00449b;
    overflow: hidden;
    width: 38.4vw;
    border-radius: .4rem 5px .4rem 5px;
    height: 27.2vw;
    padding: 1.2vw 2.2vw 1.2vw 2.2vw
}

#app_wrap .con .type-b .list_>.appTop>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#app_wrap .con .type-b .list_>.appTop>div>h4 {
    margin-bottom: 0;
    width: 100%
}

#app_wrap .con .type-b .list_>.appTop>div>small {
    line-height: .5rem;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#app_wrap .con .type-b .list_>.appTop>span {
    text-align: right;
    width: 100%;
    height: .5rem;
    position: absolute;
    bottom: 1vw;
    right: 1.7vw;
    pointer-events: none;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#app_wrap .con .type-b .list_>.appTop>span>i {
    color: #fff;
    display: inline-block;
    font-size: .24rem;
    line-height: .5rem
}

#app_wrap .con .type-b .list_ .appMid {
    display: none;
    position: relative;
    z-index: 4;
    width: 100%;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: .5rem;
    transform: translate3d(0, -.4rem, 0);
    -webkit-transform: translate3d(0, -.4rem, 0);
    -moz-transform: translate3d(0, -.4rem, 0);
    -o-transform: translate3d(0, -.4rem, 0);
    -ms-transform: translate3d(0, -.4rem, 0)
}

#app_wrap .con .type-b .list_ .appMid .swiper-container {
    z-index: 7;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .swiper-wrapper .swiper-slide {
    width: 40vw;
    padding: 2vw 0 0 0;
    pointer-events: none
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .swiper-wrapper .swiper-slide>.pic {
    display: block;
    width: 100%;
    padding-bottom: 62%;
    background-size: contain;
    margin-bottom: .2rem;
    opacity: .3;
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .swiper-wrapper .swiper-slide>span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #556463;
    line-height: 1.4
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {
    pointer-events: auto
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active>.pic {
    opacity: 1
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .pager {
    position: relative;
    z-index: 10
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .pager .sw_prev {
    position: absolute;
    left: 10vw;
    cursor: pointer;
    bottom: calc(100% + 17vw);
    font-size: 20px
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .pager .sw_next {
    position: absolute;
    right: 10vw;
    cursor: pointer;
    bottom: calc(100% + 17vw);
    font-size: 20px
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .pager .sw_page {
    width: 100%;
    height: 45px;
    padding-bottom: 10px
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .pager .sw_page>a {
    width: 10px;
    height: 10px;
    background: #cfd2d3;
    border-radius: 50%;
    margin: 0 8px
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .pager .sw_page>a.swiper-pagination-bullet-active {
    background: #008d3b
}

#app_wrap .con .type-b .list_ .appMid .swiper-container .pager.on {
    opacity: 0;
    pointer-events: none;
    margin-top: 0
}

#app_wrap .con .type-b .list_ .appMid .swiper-container.on {
    opacity: 1
}

#app_wrap .con .type-b .list_ .appMid.on {
    display: block
}

#app_wrap .con .type-b .list_:nth-of-type(1) {
    margin-top: 4vw
}

#app_wrap .con .type-b .list_:nth-of-type(3) {
    margin-top: 4vw
}

#app_wrap .con .type-b .list_.active {
    margin-top: 4vw
}

#app_wrap .con .type-b .list_.active>.appTop {
    height: .8rem;
    width: 90vw
}

#app_wrap .con .type-b .list_.active>.appTop>div {
    justify-content: center;
    padding-left: 48px
}

#app_wrap .con .type-b .list_.active>.appTop>div>small {
    position: absolute;
    height: .8rem;
    top: -1vw;
    left: 4vw;
    line-height: .8rem
}

#app_wrap .con .type-b .list_.active>.appTop>span {
    right: 5vw
}

#app_wrap .con .type-b.on {
    display: flex
}

#app_wrap1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden
}

#app_wrap1 .con {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#app_wrap1 .con>h1 {
    position: absolute;
    top: 80px;
    text-align: center;
    width: 90%;
    left: 5vw;
    line-height: 50px;
    font-size: 28px;
    z-index: 10
}

#app_wrap1 .con .type-b {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 16;
    padding-top: 80px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    height: 177.9vw
}

#app_wrap1 .con .type-b .list_ {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: space-between;
    justify-content: flex-start;
    flex-wrap: wrap;
    cursor: pointer;
    max-width: 100%;
    position: absolute;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#app_wrap1 .con .type-b .list_>.appTop {
    width: 22.5vw;
    height: 22.5vw;
    border-radius: 50%;
    line-height: 22.5vw;
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #00449b
}

#app_wrap1 .con .type-b .list_>.appTop>h4 {
    margin-bottom: 0;
    width: 100%;
    line-height: 24px;
    color: #00449b;
    font-size: 14px;
    font-weight: 700
}

#app_wrap1 .con .type-b .list_>.appTop>small {
    line-height: 30px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    color: #00449b;
    font-size: 26px
}

#app_wrap1 .con .type-b .list_:nth-of-type(1) {
    left: 52.9%;
    top: 32.7%
}

#app_wrap1 .con .type-b .list_:nth-of-type(2) {
    left: 4.75%;
    top: 32.65%
}

#app_wrap1 .con .type-b .list_:nth-of-type(3) {
    left: 31.38%;
    top: 49%
}

#app_wrap1 .con .type-b .list_:nth-of-type(4) {
    left: 73.3%;
    top: 49%
}

#app_wrap1 .con .type-b .list_.active {
    margin-top: 4vw
}

#app_wrap1 .con .type-b .list_.active>.appTop {
    height: .8rem;
    width: 90vw
}

#app_wrap1 .con .type-b .list_.active>.appTop>div {
    justify-content: center;
    padding-left: 48px
}

#app_wrap1 .con .type-b .list_.active>.appTop>div>small {
    position: absolute;
    height: .8rem;
    top: -1vw;
    left: 4vw;
    line-height: .8rem
}

#app_wrap1 .con .type-b .list_.active>.appTop>span {
    right: 5vw
}

#app_wrap1 .con .type-b.on {
    display: block
}

#app_wrap1 .con .type-b.out {
    opacity: 0;
    pointer-events: none
}

#app_wrap1 .con .appCon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    -webkit-transform: translate3d(0, -10px, 0);
    -moz-transform: translate3d(0, -10px, 0);
    -o-transform: translate3d(0, -10px, 0);
    -ms-transform: translate3d(0, -10px, 0);
    pointer-events: none;
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out
}

#app_wrap1 .con .appCon .appTree {
    position: absolute;
    top: 160px;
    width: 90%;
    left: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00449b;
    border-radius: 6px
}

#app_wrap1 .con .appCon .appTree>li {
    width: 25%;
    height: 90px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#app_wrap1 .con .appCon .appTree>li>i {
    line-height: 30px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    font-size: 26px;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 2px
}

#app_wrap1 .con .appCon .appTree>li>span {
    margin-bottom: 0;
    width: 100%;
    line-height: 24px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: rgba(255, 255, 255, .8)
}

#app_wrap1 .con .appCon .appTree>li:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    bottom: -12px;
    border-width: 6px;
    border-color: #fff transparent transparent transparent;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out
}

#app_wrap1 .con .appCon .appTree>li:first-of-type {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

#app_wrap1 .con .appCon .appTree>li:last-of-type {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px
}

#app_wrap1 .con .appCon .appTree>li.on {
    background-color: #fff
}

#app_wrap1 .con .appCon .appTree>li.on>i {
    color: #00449b
}

#app_wrap1 .con .appCon .appTree>li.on>span {
    color: #00449b
}

#app_wrap1 .con .appCon .appTree>li.on:after {
    opacity: 1
}

#app_wrap1 .con .appCon .appBox {
    position: absolute;
    z-index: 20;
    top: 272px;
    width: 90%;
    left: 5%
}

#app_wrap1 .con .appCon .appBox .appMid {
    display: none;
    position: relative;
    z-index: 4;
    width: 100%;
    background-color: #fff;
    padding-top: .3rem;
    border-radius: 6px
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container {
    z-index: 7;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .swiper-wrapper .swiper-slide {
    width: 76vw;
    padding: 2vw 0 0 0;
    pointer-events: none
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .swiper-wrapper .swiper-slide>.pic {
    display: block;
    width: 100%;
    padding-bottom: 48%;
    background-size: contain;
    margin-bottom: 0;
    opacity: .3;
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .swiper-wrapper .swiper-slide>span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #556463;
    line-height: 1.4;
    margin-bottom: .3rem
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {
    pointer-events: auto
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active>.pic {
    opacity: 1
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .pager {
    position: relative;
    z-index: 10
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .pager .sw_prev {
    position: absolute;
    left: 0;
    cursor: pointer;
    bottom: calc(100% + 17vw);
    font-size: 16px;
    font-weight: 100
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .pager .sw_next {
    position: absolute;
    right: 0;
    cursor: pointer;
    bottom: calc(100% + 17vw);
    font-size: 16px;
    font-weight: 100
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .pager .sw_page {
    width: 100%;
    height: 45px;
    padding-bottom: 10px
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .pager .sw_page>a {
    width: 10px;
    height: 10px;
    background: #cfd2d3;
    border-radius: 50%;
    margin: 0 8px
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .pager .sw_page>a.swiper-pagination-bullet-active {
    background: #008d3b
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container .pager.on {
    opacity: 0;
    pointer-events: none;
    margin-top: 0
}

#app_wrap1 .con .appCon .appBox .appMid .swiper-container.on {
    opacity: 1
}

#app_wrap1 .con .appCon .appBox .appMid.on {
    display: block
}

#app_wrap1 .con .appCon.on {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

#app_con {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#app_con #inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4
}

#app_con #inner .mediaCon2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0
}

#app_con #inner .mediaCon2 .vPic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

#app_con #inner .mediaCon2 .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 6;
    display: none;
    animation: fadeInDownSmall .3s ease-in-out
}

#app_con #inner .mediaCon2 .pic .dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 28vw;
    height: 11vw
}

#app_con #inner .mediaCon2.on {
    z-index: 10;
    opacity: 1
}

#app_con #inner .mediaCon2.on .pic {
    display: block
}

#app_con #inner .mediaCon2.in {
    z-index: 12;
    opacity: 1
}

#app_con #inner .mediaCon2.out {
    opacity: 0;
    transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out
}

#app_con #con {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 6;
    padding: 110px 0 50px 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

#app_con #con .tree {
    position: absolute;
    top: 50px;
    pointer-events: auto;
    width: 100%;
    left: 0;
    background-color: #fff;
    height: 45px;
    padding: 0 5%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10
}

#app_con #con .tree .treeDown {
    width: 68%;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

#app_con #con .tree .treeDown>span {
    color: #0d3033;
    width: 78px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    font-size: 16px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#app_con #con .tree .treeDown>i {
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out
}

#app_con #con .tree .downItems {
    position: absolute;
    width: 100%;
    padding: 0;
    left: 0;
    top: 100%;
    background-color: #fff;
    display: none
}

#app_con #con .tree .downItems.on {
    display: block
}

#app_con #con .tree .app_return {
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    border-radius: 100px;
    background-color: #f1f6f0;
    color: #00449b;
    font-size: 14px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#app_con #con .tree .closeDown {
    position: absolute;
    width: 50px;
    text-align: right;
    right: 5%;
    top: 0;
    font-size: 22px;
    line-height: 45px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out
}

#app_con #con .tree.isgo .treeDown>span {
    color: #00449b
}

#app_con #con .tree.isgo .treeDown>i {
    color: #00449b;
    transform: scale(-1);
    -webkit-transform: scale(-1);
    -moz-transform: scale(-1);
    -o-transform: scale(-1);
    -ms-transform: scale(-1)
}

#app_con #con .tree.isgo .app_return {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
    -webkit-transform: translate3d(50%, 0, 0);
    -moz-transform: translate3d(50%, 0, 0);
    -o-transform: translate3d(50%, 0, 0);
    -ms-transform: translate3d(50%, 0, 0);
    pointer-events: none
}

#app_con #con .tree.isgo .closeDown {
    pointer-events: auto;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

#app_con #con h1 {
    line-height: 1.2;
    color: #0d3033;
    font-size: 22px;
    width: 90%;
    margin: 0 auto;
    text-align: center
}

#app_con #con #fn4 {
    width: 90%;
    pointer-events: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 16px -5px rgba(0, 0, 0, .05)
}

#app_con #con #fn4 .txt-box {
    color: #0d3033;
    font-weight: 700;
    flex-grow: 1;
    width: 20%;
    text-align: center;
    line-height: .8rem;
    height: .8rem;
    font-size: .32rem;
    position: relative
}

#app_con #con #fn4 .txt-box:first-of-type {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

#app_con #con #fn4 .txt-box:last-of-type {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px
}

#app_con #con #fn4 .txt-box:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    top: -12px;
    border-width: 6px;
    border-color: transparent transparent #00449b transparent;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out
}

#app_con #con #fn4 .txt-box.on {
    color: #fff;
    background-color: #00449b;
    pointer-events: none
}

#app_con #con #fn4 .txt-box.on:after {
    opacity: 1
}

@keyframes scroll-icon {
    0% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }
    100% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px)
    }
}

@keyframes trackBallSlide {
    0% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(8px);
        transform: scale(1) translateY(8px)
    }
    6% {
        opacity: 1;
        -webkit-transform: scale(.9) translateY(-3px);
        transform: scale(.9) translateY(-3px)
    }
    14% {
        opacity: 0;
        -webkit-transform: scale(.4) translateY(-10px);
        transform: scale(.4) translateY(-10px)
    }
    15%,
    19% {
        opacity: 0;
        -webkit-transform: scale(.4) translateY(8px);
        transform: scale(.4) translateY(8px)
    }
    28%,
    29.99% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(8px);
        transform: scale(1) translateY(8px)
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(8px);
        transform: scale(1) translateY(8px)
    }
    36% {
        opacity: 1;
        -webkit-transform: scale(.9) translateY(-3px);
        transform: scale(.9) translateY(-3px)
    }
    44% {
        opacity: 0;
        -webkit-transform: scale(.4) translateY(-10px);
        transform: scale(.4) translateY(-10px)
    }
    45%,
    49% {
        opacity: 0;
        -webkit-transform: scale(.4) translateY(8px);
        transform: scale(.4) translateY(8px)
    }
    58%,
    59.99% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(8px);
        transform: scale(1) translateY(8px)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(8px);
        transform: scale(1) translateY(8px)
    }
    66% {
        opacity: 1;
        -webkit-transform: scale(.9) translateY(-3px);
        transform: scale(.9) translateY(-3px)
    }
    74% {
        opacity: 0;
        -webkit-transform: scale(.4) translateY(-10px);
        transform: scale(.4) translateY(-10px)
    }
    75%,
    79% {
        opacity: 0;
        -webkit-transform: scale(.4) translateY(8px);
        transform: scale(.4) translateY(8px)
    }
    100%,
    88% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(8px);
        transform: scale(1) translateY(8px)
    }
}