/*! #page-nav start */.page-nav-wrap{position:relative;background-color:#000;height:1.55rem;flex-shrink:0;z-index:50}.page-nav-wrap .page-nav{position:relative;display:flex;flex-direction:column;height:100%}.page-nav-wrap .hat{padding:.3rem 0 .4rem}.page-nav-wrap .logo{display:block;height:.42rem}.page-nav-wrap .nav-box{display:flex;justify-content:center;flex:1}.page-nav-wrap .nav-list{display:flex;align-items:flex-start;overflow-x:auto}.page-nav-wrap .drop-sub-list{padding-top:.2rem;padding-bottom:.2rem;padding-right:10%;line-height:2}.page-nav-wrap .sub-nav{display:block;transition:.3s}.page-nav-wrap .sub-nav:hover{color:#ef39a7}.page-nav-wrap .item-box{display:flex;align-items:flex-start;height:100%}.page-nav-wrap .item-box:hover .nav-item{color:#fff}.page-nav-wrap .item-box:hover .drop-down,.page-nav-wrap .item-box:hover .drop-nav{transform:scaleY(1);pointer-events:auto}.page-nav-wrap .item-box.active .nav-item{color:#fff;box-shadow:0 -0.02rem 0 0 inset #fff}.page-nav-wrap .nav-item{display:block;line-height:1.625;margin:0 .25rem;color:#888;white-space:nowrap;cursor:pointer;transition:.3s}.page-nav-wrap .drop{position:absolute;top:100%;left:0;width:100%;display:flex;justify-content:center;background-color:#f7f7f7;transform:scaleY(0);transform-origin:top center;pointer-events:none;transition:.3s}.page-nav-wrap .drop-inner{display:flex;overflow-x:auto}.drop-down{align-items:center;min-height:3.3rem;padding:.3rem .6rem}.drop-down .drop-pic{position:relative;width:2rem;max-height:3rem;border-radius:.2rem;overflow:hidden}.drop-down .drop-pic img{max-height:100%}.drop-down .drop-title{margin-top:.17rem;line-height:1.5;color:#333;text-align:center}.drop-down .drop-item{display:block}.drop-down .drop-item:nth-child(n+2){margin-left:.4rem}.drop-down .drop-item:hover .drop-title{color:#ef39a7}.drop-nav{min-height:.8rem}.drop-nav .drop-inner{align-items:center}.drop-nav .drop-item{padding:0 .375rem;transition:.3s}.drop-nav .drop-item:hover{color:#ef39a7}.nav-mask{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.2);pointer-events:none;transform:translateY(-100%);opacity:0;transition:.3s;z-index:20}.nav-mask.show{transform:translateY(0);opacity:1}@media(max-width: 750px){.page-nav-wrap{height:2.5rem}.page-nav-wrap .hat{display:flex;align-items:center;justify-content:center;height:100%}.page-nav-wrap .logo{height:.5rem}.page-nav-wrap .nav-item{padding:.1rem 0}}/*! #page-nav end */

.page-nav-wrap .hover-drop:hover .drop-list{transform:translateX(-50%) scaleY(1)}
.page-nav-wrap .drop-list{position:absolute;top:100%;left:50%;min-width:100%;background-color:#fff;transform-origin:center top;transform:translateX(-50%) scaleY(0);box-shadow:.02rem .02rem .05rem 0 rgba(0,0,0,.1333333333);z-index:10;transition:.3s}
.page-nav-wrap .drop-list .drop-item{position:relative;color:#222;transition:.3s}
.page-nav-wrap .drop-list .drop-item:hover{color:#fff;background-color:#ef39a7}
.page-nav-wrap .drop-entry{display:flex;align-items:center;min-height:.54rem;padding:.1rem 0;line-height:1.5;white-space:nowrap;}

.page-end-wrap{padding-top:.8rem;background-color:#000}.page-end-wrap .pe-main{display:flex;flex-direction:column;align-items:center}.page-end-wrap .logo{display:flex;align-items:center;justify-content:center;height:.42rem}.page-end-wrap .pe-nav{display:flex;flex-wrap:wrap;justify-content:center;margin-left:-0.235rem;margin-top:.5rem}.page-end-wrap .pen-link{display:flex;align-items:center;justify-content:center;padding:.15rem .235rem;color:hsla(0,0%,100%,.5);line-height:1.625;transition:.3s}.page-end-wrap .pen-link:hover{color:#ef39a7;color:#fff}.page-end-wrap .go-top{display:flex;align-items:center;width:8.8rem;max-width:100%;margin-top:.75rem;color:hsla(0,0%,100%,.3)}.page-end-wrap .go-top::before,.page-end-wrap .go-top::after{content:"";height:1px;flex:1 0 0;background-color:hsla(0,0%,100%,.3)}.page-end-wrap .go-top-inner{position:relative;display:flex;flex-direction:column;flex-shrink:0;padding:0 .2rem;font-size:inherit;color:inherit}.page-end-wrap .icon-top{position:absolute;bottom:calc(100% + .2rem);left:50%;transform:translateX(-50%)}.page-end-wrap .share-list{display:flex;justify-content:center;margin-left:-0.4rem;margin-top:.6rem}.page-end-wrap .share-item{margin-left:.4rem}.page-end-wrap .share-entry{display:flex;align-items:center;justify-content:center;padding:.08rem;background-color:#f3f3f3;border-radius:6px;opacity:.3;transition:.3s}.page-end-wrap .share-entry:hover{opacity:1}.page-end-wrap .copyright{color:hsla(0,0%,100%,.3);line-height:1.875;text-align:center;padding:.18rem .6rem;border-top:1px solid rgba(243,243,243,.3);margin-top:.8rem}

.mod-banner-wrap .mod-banner{display:flex;min-height:3.2rem}

/*! #page-opt start */
.page-opt {
    position: fixed;
    bottom: .75rem;
    right: .2rem;
    z-index: 70
}

.page-opt .contact-dialog.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
}

.page-opt .contact-dialog.dialog .dialog-main {
    width: 4.2rem;
    max-width: 100vw;
    padding: .25rem .4rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

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

.page-opt .contact-dialog.dialog.dialog-show .dialog-inner {
    animation: dialog-show .5s forwards
}

@keyframes dialog-show {
    0% {
        transform: scale(0) translateY(100%)
    }

    30% {
        transform: scale(0.001, 0.001) translateY(0)
    }

    60% {
        transform: scale(0.001, 1) translateY(0)
    }

    100% {
        transform: scale(1, 1) translateY(0)
    }
}

.page-opt .contact-dialog .dialog-inner {
    position: relative;
    transition: .5s
}

.page-opt .contact-dialog .dialog-main {
    margin: 0 auto;
    border-radius: .08rem;
    background-color: #fff
}

.page-opt .contact-dialog .dialog-close {
    position: absolute;
    top: .1rem;
    right: .1rem;
    width: 1em;
    height: 1em;
    color: #666;
    background-size: 100%;
    transition: .3s;
    cursor: pointer;
    z-index: 10
}

.page-opt .contact-dialog .dialog-close .cross {
    position: relative;
    display: block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    aspect-ratio: 1;
    cursor: pointer
}

.page-opt .contact-dialog .dialog-close .cross::before,
.page-opt .contact-dialog .dialog-close .cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: .02rem;
    transform: translate(-50%, -50%);
    background-color: #fff;
    transition: .5s
}

.page-opt .contact-dialog .dialog-close .cross::before {
    transform: translate(-50%, -50%) rotate(90deg)
}

.page-opt .contact-dialog .dialog-close .cross::after {
    transform: translate(-50%, -50%) rotate(180deg)
}

.page-opt .contact-dialog .dialog-close .cross {
    transform: rotate(45deg);
    transition: .3s
}

.page-opt .contact-dialog .dialog-close .cross::before,
.page-opt .contact-dialog .dialog-close .cross::after {
    background-color: #333
}

.page-opt .contact-dialog .dialog-close:hover {
    transform: scale(1.1)
}

.page-opt .contact-dialog .dialog-close:hover .cross {
    transform: rotate(135deg)
}

.page-opt .opt-item {
    position: relative
}

.page-opt .page-btn {
    display: block;
    height: 2em;
    width: 2em;
    z-index: 20;
    margin-top: .2rem;
    transition: .3s
}

.page-opt .page-btn:hover {
    transform: translateY(-5px);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .3333333333)
}

.page-opt .corner-popup {
    position: absolute;
    bottom: 0;
    right: 120%;
    width: 4.2rem;
    max-width: 100vw;
    max-height: 100vh;
    color: #333;
    transform: scale(0);
    transform-origin: right bottom;
    transition: transform .8s;
    opacity: 0;
    z-index: 60
}

.page-opt .corner-popup .cross {
    position: relative;
    display: block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    aspect-ratio: 1;
    cursor: pointer
}

.page-opt .corner-popup .cross::before,
.page-opt .corner-popup .cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    transform: translate(-50%, -50%);
    background-color: #333;
    transition: .5s
}

.page-opt .corner-popup .cross::before {
    transform: translate(-50%, -50%) rotate(90deg)
}

.page-opt .corner-popup .cross::after {
    transform: translate(-50%, -50%) rotate(180deg)
}

.page-opt .corner-popup.popup-show {
    transform: scale(1);
    opacity: 1
}

.page-opt .cross {
    transform: rotateZ(-45deg);
    transition: .3s
}

.page-opt .cross:hover {
    transform: rotateZ(45deg)
}

.page-opt .color-theme {
    color: #ef39a7
}

.page-opt .corner-popup-inner {
    padding: .25rem .4rem;
    background-color: #fff;
    box-shadow: 0rem 0rem .4rem 0rem rgba(0, 0, 0, .0901960784);
    border: solid 1px #fff
}

.page-opt .popup-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.0909090909
}

.page-opt .popup-info {
    line-height: 1.7142857143;
    margin-top: .24rem;
    margin-bottom: .24rem
}

.page-opt .form-row {
    display: flex;
    flex-direction: column;
    margin-left: -0.4rem;
    margin-top: .15rem
}

.page-opt .form-item {
    display: flex;
    padding-left: .4rem;
    line-height: 1.875
}

.page-opt .form-item.select {
    flex: 0 0 auto;
    min-width: 1.4rem
}

.page-opt .form-item.radio {
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: 1.95rem
}

.page-opt .form-item .hover-drop {
    width: 100%
}

.page-opt .hover-drop {
    height: 100%
}

.page-opt .hover-drop:hover .icon-box {
    transform: rotateZ(-180deg)
}

.page-opt .selector-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    border-bottom: 1px solid #000
}

.page-opt .drop-item {
    cursor: pointer
}

.page-opt .form-ipt {
    width: 100%;
    padding: .12rem .5em;
    border-bottom: 1px solid #eee;
    background-color: #fff
}

.page-opt .form-ipt::placeholder {
    color: #bbb;
}

.page-opt .form-txt {
    width: 100%;
    min-height: 1rem;
    padding: .12rem .5em;
    border: none;
    border-bottom: 1px solid #eee
}

.page-opt .form-txt::placeholder {
    color: #bbb
}

.page-opt .submit-btn {
    display: inline-flex;
    align-items: center;
    min-width: 1.4rem;
    height: 2em;
    padding: .15rem .4rem;
    background-color: #333;
    color: #fff;
    margin-top: .3rem;
    transition: .3s;
    cursor: pointer
}

.page-opt .submit-btn .icon-box {
    margin-left: .2rem
}

.page-opt .submit-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 8px rgba(0, 0, 0, .3333333333)
}

/*! #page-opt end */


@media (max-width: 750px) {
    .page-opt {
        .dialog-inner {
            width: 80% !important;
        }

        .dialog-main {
            width: 100% !important;
        }
    }
}