header{position: fixed;left: 0;top: 0;width: 100%;z-index: 12345;transition: background-color .3s;}
header:before{content: "";display: inline-block;width: 100%;padding-top: 8.23%;background-image: url(/static/home/images/header-mask.png);background-size: 100% 100%;position: absolute;left: 0;top: 0;z-index: 1;pointer-events: none;}
.h-inner{width: 100%;max-width: 18rem;margin: 0 auto;border-bottom: 1px solid rgba(255,255,255,0.15);position: relative;z-index: 12;}
.h-menu{display: none;width: 46px;height: 46px;background-repeat: no-repeat;background-position: center center;background-image: url(/static/home/images/menu.svg);background-size: 28px 28px;}
.h-mask{background-color: rgba(0,0,0,.6);position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 998;transition:all .5s;opacity: 0;visibility: hidden;}
.h-nav{display: inline-block;vertical-align: top;font-size: 0;white-space: nowrap;}
.h-li{display: inline-block;vertical-align: top;position: relative;margin: 0 .25rem;white-space: normal;}
.h-li:first-child{margin-left: 0;}
.h-link{color: #fff;display: block;line-height: 1.1rem;transition: color .3s;}
.h-li.active .h-link{color: #fff;font-weight: bold;}
.h-li.active .h-link:after{content: "";display: inline-block;width: 100%;height: .04rem;border-radius: .02rem;position: absolute;left: 0;bottom: 0;background-color: #fff;}
.h-sub{display: none;width: 10em;background-color: rgba(255,255,255,.8);position: absolute;left: 50%;margin-left: -5em;top: 100%;z-index: 1000;padding: 0.05rem 0;border-radius: .3125em;}
.h-sub>li>a{display: block;width: 100%;line-height: 1.71;padding: .06rem 0.15rem;color: #333;transition: background-color .3s;transition: color .3s;}
.h-right{display: inline-block;height: .5rem;margin-top: -0.25rem;position: absolute;right: 50%;margin-right: -9rem;top: 50%;font-size: 0;}
.h-lang{display: inline-block;vertical-align: middle;margin-right: 0.3rem;}
.h-lang-link{display: inline-block;vertical-align: top;color: #fff;}
.h-lang-line{display: inline-block;vertical-align: top;color: #fff;padding: 0 0.03rem;}
.h-index{display: inline-block;vertical-align: middle;height: 100%;position: relative;}
.h-logo{height: 100%;vertical-align: top;}
.h-logo2{position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;}
header.white{background-color: #fff;color: #000;}
header.white .h-link{color: #000;}
header.white:before{display: none;}
header.white .h-lang-link{color: #333;}
header.white .h-lang-line{color: #333;}
@media(min-width: 1201px){
    .h-li:hover .h-link,
    .h-sub>li>a:hover{color: #000;}
    .h-li.has-nav .h-link:after{transform: rotate(0);transition: all ease .5s; content: '';display: inline-block;vertical-align: middle;margin-left: .1rem;width: 1em;height: 2em;background-image: url('/static/home/images/wa13.png');background-size: 100% auto;background-position: center center;background-repeat: no-repeat;}
    .h-li:hover .h-link:after{transform: rotate(-180deg);background-image: url('/static/home/images/wa13-b.png');}

    header.white .h-nav{opacity: 0;z-index: -1;visibility: hidden;transition: all ease .5s;position: relative;}
    header.white .h-menu{display: block;position: absolute;top: 50%;left: 0;transform: translate(0,-50%);}
    header.white.show-menu .h-menu{opacity: 0;z-index: -1;visibility: hidden;}
    header.white.show-menu .h-nav{opacity: 1;z-index: 1;visibility: visible;}
    header.white .h-link{line-height: .6rem;}
    header.white .h-li.has-nav .h-link:after{background-image: url('/static/home/images/wa13-b.png');}
}
@media(max-width: 1200px){
    body{padding-top: 46px;}
    header{background-color: #fff;}
    header:before{display: none;}
    .h-inner{border-bottom: none;line-height: 0;}
    .h-right{right: 10px;margin-right: 0;height: 32px;margin-top: -16px;}
    .h-nav{width: 280px;height: 100%;position: fixed;left: -280px;top: 0;transform: translate(0,0);background-color: #fff;z-index: 12345;overflow: auto;transition: all .3s;}
    .h-li{display: block;margin: 0;}
    .h-li.active .h-link:after{display: none;}
    .h-sub{width: 100%;margin-left: 0;top: 0;position: relative;left: 0;padding: 0;}
    .h-sub>li>a{text-align: left;padding: 10px 0 10px 40px;font-size: 14px;}
    .h-li.has-nav:after{content: "+";display: inline-block;width: 40px;height: 46px;line-height: 46px;text-align: center;position: absolute;right: 0;top: 0;font-size: 20px;color: #000;}
    .h-li.has-nav.show:after{content: "-";}
    .h-link{line-height: 46px;padding: 0 46px 0 20px;color: #000;font-size: 16px;}
    .h-menu{display: inline-block;}
    header.show-menu .h-nav{left: 0;}
    header.show-menu .h-mask{opacity:1;visibility:visible;}
    header .h-lang-link{color: #333;}
    header .h-lang-line{color: #333;}
}

footer{width: 100%;padding: .97rem .3rem 0;background-image: url(/static/home/images/footer-bg.jpg);background-size: cover;background-position: center top;position: relative;z-index: 2;}
.f-inner{width: 100%;max-width: 18rem;margin: 0 auto;}
.f-top{width: 100%;padding-bottom: 1.14rem;border-bottom: 1px solid rgba(255,255,255,0.5);}
.f-nav{float: left;font-size: 0;display: flex;justify-content: space-between;width: 14rem;}
.f-li{display: inline-block;vertical-align: top; padding-right: .1rem;}
/* .f-li:last-child{width: auto;max-width: 2.6rem} */
.f-link{color: #fff;line-height: 1.3;display: inline-block;vertical-align: top;margin-bottom: .29rem;transition: color .3s;}
.f-sub{width: 100%;}
.f-sub>li{width: 100%;margin-bottom: .14rem;}
.f-sub>li:last-child{margin-bottom: 0;}
.f-sub a{display: inline-block;vertical-align: top;color: #fff;line-height: 1.5;transition: color .3s;}
.f-link:hover{color: #ee99b8;}
.f-sub a:hover{color: #ee99b8;}
.f-top-right{float: right;text-align: right;}
.f-index{display: inline-block;height: .51rem;margin-bottom: .5rem;}
.f-logo{vertical-align: top;height: 100%;}
.f-share-icons{font-size: 0;}
.f-share-one{display: inline-block;vertical-align: top;width: .19rem;height: .19rem;margin-right: .19rem;position: relative;text-align: center;cursor: pointer;}
.f-share-one:last-child{margin-right: 0;}
.f-share-icon{height: 100%;vertical-align: top;}
.f-code-box{width: 1.2rem;position:absolute;left:50%;bottom:100%;margin-bottom: .1rem;margin-left:-0.6rem;border:1px solid #eee;transform:scale(0);transform-origin:center bottom;transition:all .3s;background-color: #fff;}
.f-code-img{width: 100%;}
.f-share-one.active .f-code-box{transform:scale(1)}
.f-bot{width: 100%;padding: .46rem 0 .73rem;}
.f-bot-left{float: left;color: #fff;line-height: 1.428;}
.f-bot-right{float: right;color: #fff;line-height: 1.428;}
.f-bot a{display: inline-block;vertical-align: top;}
@media(max-width: 1920px){
    .f-share-one{width: 19px;height: 19px;}
    .f-code-box{width: 120px;margin-left: -60px;}
}
@media(max-width: 1200px){
    .f-index{height: 32px;}
}
@media(max-width: 750px){
    footer{padding: .5rem .3rem 0;}
    .f-nav{float: none;display: none;}
    .f-top{padding-bottom: .4rem;}
    .f-top-right{float: none;text-align: center;}
    .f-li{width: 100%;padding-right: 0;margin-bottom: 0.3rem;}
    .f-li:last-child{margin-bottom: 0;}
    .f-link{line-height: 2;margin-bottom: 0;}
    .f-sub{width: calc(100% + 0.2rem);}
    .f-sub>li{display: inline-block;vertical-align: top;width: auto;margin-right: 0.2rem;margin-bottom: 0;}
    .f-sub a{line-height: 2;}
    .f-index{margin-bottom: .3rem;}
    .f-bot{text-align: center;padding: .3rem 0;}
    .f-bot-left{float: none;margin-bottom: .1rem;}
    .f-bot-right{float: none;}
}

/*! #page-opt start */
.page-opt {
    position: fixed;
    top: 50%;
    right: .1rem;
    z-index: 50
}

.page-opt .opt-item:nth-child(n+2) {
    margin-top: .05rem
}

.page-opt .opt-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    min-height: 2em;
    background-color: #fcfcfe;
    border: none;
    outline: none;
    border-radius: .1rem;
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0) inset, 2px 2px 3px hsla(0, 0%, 100%, 0) inset, 2px 2px 5px rgba(0, 0, 0, .1333333333);
    transition: .3s
}

.page-opt .opt-entry:hover {
    box-shadow: -2px -2px 5px rgba(0, 0, 0, .2) inset, 2px 2px 3px hsla(0, 0%, 100%, .2) inset, 2px 2px 3px rgba(0, 0, 0, .3333333333)
}

.page-opt .opt-entry:hover .icon-box {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3333333333))
}

/*! #page-opt end */
/*! #design-dialog start */
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5333333333);
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    z-index: 60;
    transition: .3s
}

.dialog.dialog-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

.dialog.dialog-show .dialog-inner {
    transform: none
}

.dialog-inner {
    position: relative;
    transform: translateY(100%);
    transition: .5s
}

.dialog {
    padding: 0;
    align-items: flex-end;
    z-index: 123456
}

.dialog .dialog-inner {
    width: 100%
}

.dialog .dialog-main {
    position: relative;
    padding-top: .95rem;
    padding-bottom: 1rem;
    border-radius: .3rem .3rem 0 0;
    background-position: top left;
    background-size: cover;
    background-repeat: no-repeat;
    max-height: calc(100vh - 1rem)
}

.dialog .dialog-main::-webkit-scrollbar {
    background-color: #eee;
    border-radius: .025rem
}

.dialog .dialog-main::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #a1b3dc, #ed99b8, #7094cc, #5fabdf, #7fc7b3);
    border-radius: .025rem
}

.dialog .dialog-main {
    overflow-y: auto
}

.dialog .dialog-main::-webkit-scrollbar {
    width: .05rem
}

.dialog .dd-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.dialog .dd-left {
    position: relative;
    width: 9.85rem;
    max-width: 100%
}

.dialog .dd-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dialog .dialog-cancel {
    width: 2em;
    height: 2em;
    margin-left: .2rem;
    cursor: pointer;
    transition: .3s
}

.dialog .dialog-cancel:hover {
    transform: rotateZ(90deg)
}

.dialog .dd-title {
    line-height: 1.25;
    font-weight: bold
}

.dialog .dd-info {
    line-height: 2;
    margin-top: .21rem;
    color: #666
}

.follow-card {
    position: relative;
    display: flex;
    width: 4.87rem;
    max-width: calc(100% - .6rem);
    min-height: 6.5rem;
    border-radius: .25rem;
    padding: .3rem;
    background-color: hsla(0, 0%, 100%, .5)
}

.follow-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(to right, #a1b3dc, #ed99b8, #7094cc, #5fabdf, #7fc7b3);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.follow-card .fc-inner {
    position: relative;
    width: 100%;
    border-radius: inherit;
    overflow: hidden
}

.follow-card .fc-cover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .6rem .4rem;
    color: #fff
}

.follow-card .fc-title {
    line-height: 1.2941176471
}

.follow-card .qrcode-box {
    position: relative;
    border-radius: .1rem;
    padding: 3px;
    overflow: hidden
}

.follow-card .qrcode {
    position: relative;
    padding: .12rem;
    background-color: #fff;
    border-radius: inherit;
    z-index: 5
}

.follow-card .fc-share {
    display: flex;
    justify-content: center;
    margin-top: .4rem
}

.follow-card .share-entry {
    display: block;
    margin: 0 .1rem;
    transition: .3s
}

.follow-card .share-entry:hover {
    transform: translateY(-0.02rem);
    filter: drop-shadow(0 0 0.05rem rgba(255, 255, 255, 0.3333333333))
}

.contact-form {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.2rem;
    margin-top: .36rem
}

.contact-form .form-item {
    display: flex;
    flex-direction: column;
    margin-left: .2rem;
    width: calc((100% - .6rem)/3);
    min-height: 2em
}

.contact-form .form-item:nth-child(n+4) {
    margin-top: .2rem
}

.contact-form .form-item.w2 {
    width: calc((100% - .6rem)/3*2 + .2rem)
}

.contact-form .ipt-box {
    position: relative;
    border-radius: .1rem;
    height: 2em;
    flex-shrink: 0
}

.contact-form .ipt-box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: .1rem;
    padding: 1px;
    background: linear-gradient(to right, #a1b3dc, #ed99b8, #7094cc, #5fabdf, #7fc7b3);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.contact-form .ipt-box.h-full {
    height: 100%
}

.contact-form .ipt-box.h-full .form-ipt {
    padding: .2rem 0
}

.contact-form .form-ipt {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-indent: .15rem;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0)
}

.contact-form .form-ipt::placeholder {
    color: #999
}

.contact-form .code-img {
    display: block;
    height: 1em;
    margin-top: .12rem
}

.contact-form .submit-btn {
    position: relative;
    border: none;
    height: 100%;
    min-width: 2.2rem;
    padding: .15rem .3rem;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: .3s
}

.contact-form .submit-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: .1rem;
    padding: 2px;
    background: linear-gradient(to right, #a1b3dc, #ed99b8, #7094cc, #5fabdf, #7fc7b3);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.contact-form .submit-btn:hover {
    color: #ef99b8
}

@media(max-width: 750px) {
    .dialog .dd-inner {
        flex-direction: column
    }

    .follow-card {
        margin-top: .6rem;
        width: 100%
    }
}
.page-opt{opacity: 0;z-index: -1 !important;visibility: visible;}
.page-opt.show{opacity: 1;z-index: 50 !important;visibility: visible;}

/*! #design-dialog end */
.bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.cr-main{position: absolute;left: 50%;margin-left: -9rem;top: 1.1rem;z-index: 1;}
.cr-inner{width: 100%;max-width: 18rem;margin: 0 auto;}
.cr-links{float: left;font-size: 0;}
.cr-dt{color: rgba(255,255,255,0.6);line-height: 0.66rem;display: inline-block;vertical-align: top;}
.cr-dt:before{content: "";display: inline-block;vertical-align: middle;width: 1em;height: 1em;background-image: url(/static/home/images/crumb-1.png);background-size: 100% 100%;margin-right: 0.1rem;position: relative;top: -1px;}
.cr-link{color: rgba(255,255,255,0.6);line-height: 0.66rem;display: inline-block;vertical-align: top;}
.cr-link:after{content: "";display: inline-block;margin: 0 0.2rem;pointer-events: none;width: 0.3125em;height: 0.625em;background-image: url(/static/home/images/crumb-arrow.png);background-size: 100% 100%;}
.cr-link:last-child:after{display: none;}
.cr-link:last-child{color: #fff;}
.cr-home-icon{height: 1em;position: relative;top: -1px;}
@media(max-width: 1200px){
    .cr-main{top: 46px;}
}
@media(max-width: 900px){
    .cr-main{left: 0.3rem;margin-left: 0;}
}
@media(max-width: 750px){
    .cr-links{display: none;}
}

.bn-main{width: 100%;position: relative;}
.bn-box{width: 100%;padding-top: 50%;position: relative;}
.bn-img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.bn-rong{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);height: .8rem;z-index: 2;}
@media(max-width: 750px){
    .bn-rong{height: .4rem;}
}