@font-face {
    font-family: bg_b;
    src: url(https://www.kaihoukukan-overfield.jp/pc/gw/20240429155846/font/bg_b_645d96f9.otf)
}

.main {
    opacity: 0;
    overflow: hidden;
    position: relative;
    transition: opacity .5s .2s
}

.loading {
    background: url(../images/loading_bg_d9e8d868.jpg) 50% no-repeat;
    background-size: cover;
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity .4s,z-index .4s;
    width: 100%;
    z-index: -1
}

.loading.show {
    opacity: 1;
    z-index: 99
}

.loading .loading-img {
    background: url(../images/loading_z_4da99292.png) no-repeat;
    background-size: 100% 100%;
    height: 2.02rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 1.42rem
}

.loading .loading-img:after {
    animation: spin 2s linear infinite;
    background: url(../images/loading_f_ce22afe2.png) no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 1.42rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 1.42rem
}

.loading .loading-text {
    bottom: .95rem;
    display: flex;
    justify-content: center;
    left: 50%;
    position: absolute;
    transform: translateX(-50%)
}

.loading .loading-text span {
    color: #807359;
    font-family: tcmc;
    font-size: .2rem;
    margin: 0 .02rem;
    opacity: 0
}

.loading .loading-text span:first-child {
    animation: bottomGo .3s ease .3s forwards
}

.loading .loading-text span:nth-child(2) {
    animation: bottomGo .3s ease .5s forwards
}

.loading .loading-text span:nth-child(3) {
    animation: bottomGo .3s ease .7s forwards
}

.loading .loading-text span:nth-child(4) {
    animation: bottomGo .3s ease .9s forwards
}

.loading .loading-text span:nth-child(5) {
    animation: bottomGo .3s ease 1.1s forwards
}

.loading .loading-text span:nth-child(6) {
    animation: bottomGo .3s ease 1.3s forwards
}

.loading .loading-text span:nth-child(7) {
    animation: bottomGo .3s ease 1.5s forwards
}

.kv {
    background: url(../images/kv_7bcb351a.jpg) 50% no-repeat;
    background-size: cover;
    height: 11rem;
    position: relative;
    width: 100%
}

.kv video {
    height: 100%;
    object-fit: cover;
    position: absolute;
    width: 100%
}

.kv .bgm-btn {
    background: url(../images/bgm_on1_d385a939.png) no-repeat;
    background-size: 100% 100%;
    height: 1.47rem;
    position: absolute;
    right: .56rem;
    top: 1.25rem;
    width: 1.48rem
}

.kv .bgm-btn.off {
    background: url(../images/bgm_off1_6f26c347.png) no-repeat;
    background-size: 100% 100%
}

.kv .slogan {
    background: url(../images/slogan_b0f375d7.png) no-repeat;
    background-size: 100% 100%;
    height: 3.22rem;
    left: 50%;
    margin: -2.5rem 0 0 -5.47rem;
    position: absolute;
    top: 50%;
    transform: translate(6.87rem,1.87rem);
    width: 7.88rem
}

.kv .slogan .play {
    animation: breathingEffect 2s ease-in-out infinite;
    background: url(../images/play_e84001a0.png) no-repeat;
    background-size: 100% 100%;
    height: 1.51rem;
    position: absolute;
    right: 0;
    top: -.3rem;
    width: 1.5rem
}

.kv .download_btn_group {
    align-items: center;
    display: flex;
    left: 50%;
    margin: 3.08rem 0 0 5.7rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 4
}

.kv .download_btn_group a {
    margin: 0 .16rem;
    transition: opacity .4s
}

.kv .download_btn_group a:hover {
    opacity: .8
}

.kv .download_btn_group .app_store_btn {
    background: url(../images/app_store_btn_13829232.png) no-repeat;
    background-size: 100% 100%;
    height: .64rem;
    width: 1.72rem
}

.kv .download_btn_group .google_play_btn {
    background: url(../images/google_play_btn_76f2c180.png) no-repeat;
    background-size: 100% 100%;
    height: .63rem;
    width: 2.15rem
}

.kv .download_btn_group .windows_btn {
    background: url(../images/windows_btn_e0886260.png) no-repeat;
    background-size: 100% 100%;
    height: .62rem;
    width: 2.1rem
}

.kv .logo {
    background: url(../images/logo_290fed52.png) no-repeat;
    background-size: 100% 100%;
    cursor: auto;
    height: 2.51rem;
    left: .6rem;
    position: absolute;
    width: 4.77rem
}
.indexBtns{
    left: 50%;
    transform: translate(-50%);
    bottom: 4.88rem;
    /* width: 1.84rem; */
    border-radius: .08rem;
    font-size: 0.3rem;
    text-align: center;
    color: #fff;
    line-height: .66rem;
    height: .66rem;
    /* background-color: #303030e7; */
    transition: 0.3s;
}
.indexBtns:hover{
    color: #d3d3d3;
}
.language{
	position: absolute;
    right: 3.11rem;
    top: 0.34rem;
    width: 1.84rem;
    border-radius: .18rem;
    height: .66rem;
    background-color: #303030ad;
}

.abs {
    position: absolute;
}
.languageActive {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: .66rem;
    text-indent: .1rem;
    cursor: pointer;
    z-index: 1;
    /* border: .02rem solid #858585; */
    border-radius: .18rem;
    font-size: .2rem;
    color: #fff;
}
.languageActive::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .19rem;
    transform: translate(0, -50%);
    width: .17rem;
    height: .16rem;
    background: url(../images/languageArrow.png) no-repeat 0 0;
    background-size: 100% auto;
}
.chooseLanguage {
    top: 0;
    left: 0;
    width: 100%;
    border-radius: .18rem;
    padding-top: .66rem;
    background: #303030aa;
    display: none;
}
.chooseLanguage button {
    display: block;
    float: none;
    margin: 0 auto;
    width: 1.71rem;
    min-height: .4rem;
    border-bottom: .01rem solid #606060;
    background: transparent;
    font-size: .2rem;
    color: #fff;
}


.kv .menu {
    background: url(../images/menu_bg_02c42a38.png) no-repeat;
    z-index: 9;
    background-size: 100% 100%;
    height: 1.96rem;
    position: absolute;
    right: 0;
    top: 0;
    width: 3.11rem
}

.kv .menu .menu-icon {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: .46rem;
    justify-content: space-between;
    position: absolute;
    right: .58rem;
    top: .43rem;
    width: .58rem
}

.kv .menu .menu-icon i {
    background-color: #83776a;
    height: .06rem;
    transition: transform .3s,filter .3s;
    width: .58rem
}

.kv .menu .menu-icon i:nth-child(2) {
    transform: translateX(.1rem)
}

.kv .menu .menu-icon:hover i {
    filter: brightness(1.2)
}

.wrap {
    background: url(../images/bg_dd3e582f.jpg) 50% no-repeat;
    background-size: cover;
    box-sizing: border-box;
    height: 83.07rem;
    padding-top: 1px;
    position: relative;
    width: 100%
}

.wrap .banner_link {
    background: url(../images/dsfcz_7b75fa22.png) no-repeat;
    background-size: 100% 100%;
    height: 1.49rem;
    position: absolute;
    right: .45rem;
    top: -3.4rem;
    transition: filter .3s;
    width: 3.6rem;
    z-index: 4
}

.wrap .banner_link:hover {
    filter: brightness(1.05)
}

.wrap .zs-line {
    height: 76.01rem;
    position: absolute;
    right: .85rem;
    top: 5.59rem;
    width: 15.68rem
}

.wrap .zs-line .start {
    background: url(../images/line_start_dad86eb0.png) no-repeat;
    background-size: 100% 100%;
    height: 1.67rem;
    position: absolute;
    right: -.23rem;
    top: -1.54rem;
    width: 3.47rem
}

.wrap .zs-line .end {
    background: url(../images/line_end_b1911e62.png) no-repeat;
    background-size: 100% 100%;
    bottom: -1.67rem;
    height: 2.11rem;
    position: absolute;
    right: 3.1rem;
    width: 3.31rem;
    z-index: 1
}

.wrap .zs-line .hidden-box {
    height: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%
}

.wrap .zs-line .line {
    background: url(../images/line_f9ae32cc.png) 50% no-repeat;
    background-size: cover;
    height: 76.01rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.wrap .scroll-tips {
    position: absolute;
    top: -2rem;
    width: 100%;
    z-index: 3
}

.wrap .scroll-tips span {
    animation: breathingEffect 2s ease-in-out infinite;
    color: #695f53;
    display: block;
    font-family: tcmc;
    font-size: .15rem;
    letter-spacing: .05rem;
    text-align: center
}

.wrap .scroll-tips:before {
    background: #4e4840;
    content: "";
    height: 1.5rem;
    left: 50%;
    position: absolute;
    top: .3rem;
    transform: translateX(-50%);
    width: 2px
}

.wrap:before {
    background: url(../images/divide_bg_69ef682a.png) no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 3.37rem;
    left: 0;
    position: absolute;
    top: -1.47rem;
    width: 100%;
    z-index: 1
}

.wrap .parallax img {
    width: 100%
}

.wrap .zs-1 {
    height: 6.9rem;
    right: 0;
    top: -7.6rem;
    width: 3.03rem
}

.wrap .zs-1,.wrap .zs-2 {
    position: absolute;
    z-index: 2
}

.wrap .zs-2 {
    height: 14.31rem;
    left: 0;
    top: -1.35rem;
    width: 16.56rem
}

.wrap .zs-2 .zs-2-1 {
    background: url(../images/zs_2_15f9f6d2.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    left: 0;
    position: absolute;
    top: -2rem;
    width: 100%;
    z-index: 1
}

.wrap .zs-2 .zs-2-2 {
    background: url(../images/zs_2_1_88f6c727.png) no-repeat;
    background-size: 100% 100%;
    height: 5.06rem;
    left: 0;
    position: absolute;
    top: 1.5rem;
    width: 2.99rem
}

.wrap .zs-2 .zs-2-3 {
    background: url(../images/zs_2_2_bea53984.png) no-repeat;
    background-size: 100% 100%;
    height: 1.39rem;
    left: 2.2rem;
    position: absolute;
    top: 7.2rem;
    width: 2.27rem
}

.wrap .zs-2 .inter-active {
    bottom: 1.76rem;
    cursor: pointer;
    height: 2.21rem;
    position: absolute;
    right: .28rem;
    width: 2.21rem;
    z-index: 2
}

.wrap .zs-2 .inter-active:before {
    background: url(../images/inter_bg_f19e2641.png) no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 1.79rem;
    left: 50%;
    margin-left: -.89rem;
    position: absolute;
    top: .21rem;
    width: 1.79rem
}

.wrap .zs-2 .quan {
    animation: spin 5s linear infinite reverse;
    background: url(../images/quan_58f9c914.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    position: absolute;
    width: 100%
}

.wrap .zs-2 .check {
    background: url(../images/check_25878750.png) no-repeat;
    background-size: 100% 100%;
    height: .68rem;
    position: absolute;
    right: -.1rem;
    top: -.33rem;
    width: 1.03rem
}

.wrap .zs-2 .icon {
    background: url(../images/inter1_1_a9daa0b5.png) bottom no-repeat;
    background-size: 1.27rem 2.18rem;
    height: 2.21rem;
    left: .21rem;
    position: absolute;
    top: .23rem;
    width: 1.79rem
}

.wrap .zs-2 .icon .fc {
    background: url(../images/inter1_7ba7ed78.png) no-repeat;
    background-size: 100% 100%;
    height: 1.27rem;
    left: .24rem;
    position: absolute;
    top: .13rem;
    width: 1.27rem
}

.wrap .zs-3 {
    background: url(../images/zs_3_9bf99e48.png) no-repeat;
    background-size: 100% 100%;
    height: 9.28rem;
    position: absolute;
    right: 0;
    top: 13rem;
    width: 11.95rem;
    z-index: 3
}

.wrap .zs-3 .inter-active {
    bottom: 1.65rem;
    cursor: pointer;
    height: 2.21rem;
    left: 1.85rem;
    position: absolute;
    width: 2.21rem
}

.wrap .zs-3 .inter-active:before {
    background: url(../images/inter_bg_f19e2641.png) no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 1.79rem;
    left: 50%;
    margin-left: -.89rem;
    position: absolute;
    top: .21rem;
    width: 1.79rem
}

.wrap .zs-3 .quan {
    animation: spin 5s linear infinite;
    background: url(../images/quan_58f9c914.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    position: absolute;
    width: 100%
}

.wrap .zs-3 .check {
    background: url(../images/check_25878750.png) no-repeat;
    background-size: 100% 100%;
    height: .68rem;
    position: absolute;
    right: -.6rem;
    top: .1rem;
    transform: rotate(31deg);
    width: 1.03rem
}

.wrap .zs-3 .icon {
    height: 1.8rem;
    left: .21rem;
    perspective: 500px;
    position: absolute;
    top: .21rem;
    width: 1.8rem
}

.wrap .zs-3 .icon .fc {
    background: url(../images/inter2_2a11cd36.png) no-repeat;
    background-size: 100% 100%;
    height: 1.51rem;
    left: 50%;
    margin: -.75rem 0 0 -.22rem;
    position: absolute;
    top: 50%;
    transform-style: preserve-3d;
    width: .45rem
}

.wrap .zs-4 {
    height: 14.42rem;
    left: 0;
    position: absolute;
    top: 19.1rem;
    width: 17rem;
    z-index: 2
}

.wrap .zs-4 .zs-4-1 {
    background: url(../images/zs_4_cdcb08c5.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    left: 0;
    position: absolute;
    top: -1.3rem;
    width: 100%;
    z-index: 1
}

.wrap .zs-4 .zs-4-2 {
    background: url(../images/zs_4_1_c053acf3.png) no-repeat;
    background-size: 100% 100%;
    height: 10.11rem;
    left: .37rem;
    position: absolute;
    top: .97rem;
    width: 4.65rem
}

.wrap .zs-4 .inter-active {
    bottom: 5.25rem;
    cursor: pointer;
    height: 2.21rem;
    position: absolute;
    right: 3rem;
    width: 2.21rem
}

.wrap .zs-4 .inter-active:before {
    background: url(../images/inter_bg_f19e2641.png) no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 1.79rem;
    left: 50%;
    margin-left: -.89rem;
    position: absolute;
    top: .21rem;
    width: 1.79rem
}

.wrap .zs-4 .quan {
    animation: spin 5s linear infinite;
    background: url(../images/quan_58f9c914.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    position: absolute;
    width: 100%
}

.wrap .zs-4 .check {
    background: url(../images/check_25878750.png) no-repeat;
    background-size: 100% 100%;
    height: .68rem;
    position: absolute;
    right: .3rem;
    top: -.5rem;
    transform: rotate(343deg);
    width: 1.03rem
}

.wrap .zs-4 .icon {
    height: 2.49rem;
    left: .21rem;
    position: absolute;
    top: .21rem;
    width: 2.15rem
}

.wrap .zs-4 .icon .fc {
    background: url(../images/inter3_ff272e48.png) no-repeat;
    background-size: 100% 100%;
    height: 2.1rem;
    left: 50%;
    margin: -.85rem 0 0 -.72rem;
    position: absolute;
    top: 50%;
    transform-origin: top top;
    width: 1.78rem
}

.wrap .zs-5 {
    background: url(../images/zs_5_c20bee48.png) no-repeat;
    background-size: 100% 100%;
    height: 6.96rem;
    right: 0;
    top: 21rem;
    width: 2.94rem
}

.wrap .zs-5,.wrap .zs-6 {
    position: absolute;
    z-index: 2
}

.wrap .zs-6 {
    height: 2.9rem;
    left: 1.2rem;
    top: 33rem;
    width: 2.67rem
}

.wrap .zs-6 img {
    width: 100%
}

.wrap .zs-6-1 {
    background: url(../images/zs_6_1_96bee975.png) no-repeat;
    background-size: 100% 100%;
    height: 9.15rem;
    position: absolute;
    right: 0;
    top: 29rem;
    width: 4.26rem
}

.wrap .zs-7 {
    background: url(../images/zs_7_b0ebaa05.png) no-repeat;
    background-size: 100% 100%;
    height: 6.57rem;
    left: 0;
    top: 44rem;
    width: 3.01rem
}

.wrap .zs-7,.wrap .zs-8 {
    position: absolute;
    z-index: 2
}

.wrap .zs-8 {
    background: url(../images/zs_8_21de7b1c.png) no-repeat;
    background-size: 100% 100%;
    height: 4.9rem;
    right: 0;
    top: 43.26rem;
    width: 6.57rem
}

.wrap .zs-9 {
    background: url(../images/zs_9_d2af0d2d.png) no-repeat;
    background-size: 100% 100%;
    height: 6.22rem;
    position: absolute;
    right: 0;
    top: 54.26rem;
    width: 3.53rem;
    z-index: 2
}

.wrap .zs-9-1 {
    background: url(../images/zs_9_1_8d9e89ec.png) no-repeat;
    background-size: 100% 100%;
    height: 7.47rem;
    left: 0;
    position: absolute;
    top: 52.1rem;
    width: 2.35rem
}

.wrap .zs-10 {
    background: url(../images/zs_10_76cadc2c.png) no-repeat;
    background-size: 100% 100%;
    height: 7.27rem;
    left: 0;
    position: absolute;
    top: 65.6rem;
    width: 2.75rem;
    z-index: 2
}

.wrap .zs-10-1 {
    background: url(../images/zs_10_1_9da22578.png) no-repeat;
    background-size: 100% 100%;
    height: 10.87rem;
    position: absolute;
    right: 0;
    top: 64.5rem;
    width: 2.35rem
}

.wrap .zs-11 {
    background: url(../images/zs_11_97b56dac.png) no-repeat;
    background-size: 100% 100%;
    height: 4.9rem;
    left: 0;
    top: 78.2rem;
    width: 4.57rem
}

.wrap .zs-11,.wrap .zs-12 {
    position: absolute;
    z-index: 2
}

.wrap .zs-12 {
    background: url(../images/zs_12_5d4c5286.png) no-repeat;
    background-size: 100% 100%;
    height: 4.78rem;
    right: 0;
    top: 77.3rem;
    width: 2.81rem
}

.wrap .news-cont {
    background: url(../images/news_bg_2acb814d.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    height: 3.62rem;
    margin: .5rem auto 0;
    padding-top: 1px;
    position: relative;
    width: 12.53rem;
    z-index: 2
}

.wrap .news-cont:after {
    background: url(../images/tag_bg_7173ef5d.png) no-repeat;
    background-size: 100% 100%;
    content: "";
    height: .61rem;
    left: 0;
    position: absolute;
    top: .61rem;
    width: 1.04rem
}

.wrap .news-cont .scroll-box {
    height: 2.35rem;
    margin-left: .43rem;
    margin-top: .35rem;
    overflow-x: initial;
    overflow-y: auto;
    width: 11.7rem
}

.wrap .news-cont .scroll-box::-webkit-scrollbar {
    border-radius: .05rem;
    width: .1rem
}

.wrap .news-cont .scroll-box::-webkit-scrollbar-thumb {
    background-color: #c8c9ca;
    border-radius: .05rem
}

.wrap .news-cont .more-btn {
    background: url(../images/more_btn_444cb096.png) no-repeat;
    background-size: 100% 100%;
    display: block;
    height: .3rem;
    margin: .1rem auto 0;
    transition: filter .3s;
    width: 1.4rem
}

.wrap .news-cont .more-btn:hover {
    filter: brightness(1.2)
}

.wrap .news-cont .news-list {
    margin: auto;
    width: 10rem
}

.wrap .news-cont .news-item {
    align-items: center;
    background: url(../images/hr_3c3cd860.png) bottom no-repeat;
    background-size: 100% 1px;
    box-sizing: border-box;
    display: flex;
    padding: .4rem .38rem;
    position: relative;
    width: 100%
}

.wrap .news-cont .news-item:last-child {
    background: none
}

.wrap .news-cont .news-item:hover:before {
    opacity: 1
}

.wrap .news-cont .news-item:before {
    background: linear-gradient(90deg,hsla(0,0%,100%,0) 0,rgba(0,0,0,.05) 50%,hsla(0,0%,100%,0));
    content: "";
    height: 100%;
    left: 50%;
    margin-left: -6.26rem;
    opacity: 0;
    position: absolute;
    transition: opacity .3s;
    width: 11.7rem
}

.wrap .news-cont .timer {
    color: #83776a;
    font-family: tcmc;
    font-size: .28rem
}

.wrap .news-cont .tag {
    border: 1px solid #b19f76;
    border-radius: .11rem;
    box-sizing: border-box;
    color: #b19f76;
    font-family: bg_b;
    font-size: .1rem;
    height: .22rem;
    letter-spacing: .04rem;
    line-height: .22rem;
    margin: 0 .5rem;
    text-align: center;
    width: 1.25rem
}

.wrap .news-cont .desc {
    color: #83776a;
    display: -webkit-box;
    flex: 1;
    font-family: zas_r;
    font-size: .18rem;
    line-height: .28rem;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.wrap .world-box1 {
    height: 4.11rem;
    left: 3.08rem;
    margin: 1.9rem auto 0;
    position: relative;
    width: 9.2rem
}

.wrap .world-box1 img {
    width: 100%
}

.wrap .world-box2 {
    height: 4.71rem;
    left: -2.92rem;
    margin: 3.7rem auto 0;
    position: relative;
    width: 7.69rem
}

.wrap .world-box2 img {
    width: 100%
}

.wrap .world-box3 {
    height: 3.93rem;
    left: .58rem;
    margin: 3.7rem auto 0;
    position: relative;
    width: 7.98rem
}

.wrap .world-box3 img {
    width: 100%
}

.wrap .tansuo-cont {
    box-sizing: border-box;
    margin-top: 7rem;
    overflow: hidden;
    padding-top: 1px;
    position: relative;
    width: 100%
}

.wrap .tansuo-cont .title {
    background: url(../images/title1_cf0fb9e4.png) no-repeat;
    background-size: 100% 100%;
    height: 1.36rem;
    margin: auto;
    width: 7.07rem
}

.wrap .tansuo-cont .tansuo-swiper {
    height: 8.26rem;
    margin-top: .6rem;
    width: 100%
}

.wrap .tansuo-cont .swiper-slide {
    height: 7.69rem;
    transform: perspective(1000px) rotate(3deg);
    transition: transform .3s ease-out;
    width: 11.72rem
}

.wrap .tansuo-cont .swiper-slide.swiper-slide-active {
    transform: perspective(1000px) rotate(0)
}

.wrap .tansuo-cont .swiper-slide:after {
    background: url(../images/over_firld_bg_5b77639d.png) no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.wrap .tansuo-cont .banner {
    height: 6.06rem;
    object-fit: cover;
    transform: translate(.44rem,.52rem) rotate(-3deg);
    width: 10.83rem
}

.wrap .tansuo-cont .tag {
    bottom: .41rem;
    height: 1.53rem;
    position: absolute;
    right: 1rem;
    width: 4.23rem;
    z-index: 2
}

.wrap .tansuo-cont .swiper-pagination {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%
}

.wrap .tansuo-cont .swiper-pagination-bullet {
    background-color: transparent;
    border: 2px solid #695f53;
    box-sizing: border-box;
    height: .12rem;
    margin: 0 .18rem;
    opacity: 1;
    width: .12rem
}

.wrap .tansuo-cont .swiper-pagination-bullet-active {
    background-color: #695f53;
    height: .16rem;
    width: .16rem
}

.wrap .tansuo-cont .more {
    background: url(../images/more_btn1_109b80a8.png) no-repeat;
    background-size: 100% 100%;
    display: block;
    height: .64rem;
    margin: .18rem auto 0;
    transition: filter .3s;
    width: 2.96rem
}

.wrap .tansuo-cont .more:hover {
    filter: brightness(1.2)
}

.wrap .tansuo-cont .switch-cont {
    left: 50%;
    margin-top: -.5rem;
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    width: 14.64rem;
    z-index: 1
}

.wrap .tansuo-cont .switch-cont a {
    background: url(../images/switch1_48fb2c9f.png) no-repeat;
    background-size: 100% 100%;
    height: .6rem;
    position: absolute;
    transition: left .3s,right .3s;
    width: .39rem
}

.wrap .tansuo-cont .switch-cont .prev {
    left: 0
}

.wrap .tansuo-cont .switch-cont .prev:hover {
    left: -.1rem
}

.wrap .tansuo-cont .switch-cont .next {
    right: 0;
    transform: rotateY(180deg)
}

.wrap .tansuo-cont .switch-cont .next:hover {
    right: -.1rem
}

.wrap .zhongjian-cont {
    box-sizing: border-box;
    margin: 1.3rem auto 0;
    padding-top: 1px;
    position: relative;
    width: 13.51rem
}

.wrap .zhongjian-cont .title {
    background: url(../images/title2_17b8e715.png) no-repeat;
    background-size: 100% 100%;
    height: 1.36rem;
    margin: auto;
    width: 7.06rem
}

.wrap .zhongjian-cont .zhongjian-swiper {
    background: url(../images/zhongjian_bg_f955f97e.png) bottom no-repeat;
    background-size: 100% 8.5rem;
    box-sizing: border-box;
    height: 8.8rem;
    margin-top: .83rem;
    padding-top: .3rem;
    width: 100%
}

.wrap .zhongjian-cont .swiper-slide {
    height: 8.5rem;
    position: relative;
    width: 100%
}

.wrap .zhongjian-cont .swiper-slide.swiper-slide-active img {
    animation: scaleGo 1s cubic-bezier(.85,0,.15,1)
}

.wrap .zhongjian-cont .swiper-slide.swiper-slide-active .name1 {
    animation: bottomGo .3s ease .3s forwards
}

.wrap .zhongjian-cont .swiper-slide.swiper-slide-active .name2 {
    animation: expandGo 2s ease-in-out forwards
}

.wrap .zhongjian-cont .name-con {
    left: 1.34rem;
    position: absolute;
    top: 1.05rem;
    z-index: 1
}

.wrap .zhongjian-cont .name1 {
    color: #807359;
    font-family: hge_r;
    font-size: .17rem;
    letter-spacing: .1rem;
    margin-left: .1rem;
    opacity: 0
}

.wrap .zhongjian-cont .name2 {
    color: #807359;
    font-family: zas_r;
    font-size: .6rem;
    overflow: hidden;
    position: relative;
    white-space: nowrap
}

.wrap .zhongjian-cont img {
    bottom: .08rem;
    left: 0;
    position: absolute;
    width: 100%
}

.wrap .zhongjian-cont .switch-cont {
    left: 50%;
    margin-top: 1rem;
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    width: 12.4rem;
    z-index: 1
}

.wrap .zhongjian-cont .switch-cont a {
    background: url(../images/switch2_771cd106.png) no-repeat;
    background-size: 100% 100%;
    height: .39rem;
    position: absolute;
    transition: left .3s,right .3s;
    width: 1.05rem
}

.wrap .zhongjian-cont .switch-cont .prev {
    left: 0
}

.wrap .zhongjian-cont .switch-cont .prev:hover {
    left: -.1rem
}

.wrap .zhongjian-cont .switch-cont .next {
    right: 0;
    transform: rotateY(180deg)
}

.wrap .zhongjian-cont .switch-cont .next:hover {
    right: -.1rem
}

.wrap .zhongjian-cont .more {
    background: url(../images/more_btn1_109b80a8.png) no-repeat;
    background-size: 100% 100%;
    display: block;
    height: .64rem;
    margin: .9rem auto 0;
    transition: filter .3s;
    width: 2.96rem
}

.wrap .zhongjian-cont .more:hover {
    filter: brightness(1.2)
}

.wrap .tsyy-cont {
    box-sizing: border-box;
    margin: 1.69rem auto 0;
    padding-top: 1px;
    position: relative
}

.wrap .tsyy-cont .title {
    background: url(../images/title3_354661d9.png) no-repeat;
    background-size: 100% 100%;
    height: 1.36rem;
    margin: auto;
    width: 4.39rem
}

.wrap .tsyy-cont .tsyy-list {
    background: url(../images/tsyy_bg_62c3c898.png) 50% no-repeat;
    background-size: 12.78rem 100%;
    box-sizing: border-box;
    height: 16.98rem;
    margin: .56rem auto 0;
    padding-top: .7rem;
    position: relative;
    width: 14.23rem
}

.wrap .tsyy-cont .tsyy-item {
    background: url(../images/tsyy_item_bg_2591d1db.png) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    display: flex;
    height: 3.75rem;
    justify-content: space-between;
    margin: auto auto .18rem;
    padding: .33rem .38rem 0 .3rem;
    width: 14.23rem
}

.wrap .tsyy-cont .tsyy-item .banner {
    border-radius: .15rem;
    display: flex;
    height: 3rem;
    overflow: hidden;
    width: 6.58rem
}

.wrap .tsyy-cont .tsyy-item .banner img {
    border-radius: .15rem;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
    width: 100%
}

.wrap .tsyy-cont .tsyy-item .desc-box {
    height: 3rem;
    width: 6.69rem
}

.wrap .tsyy-cont .tsyy-item .tit {
    color: #695f53;
    font-family: zas_r;
    font-size: .4rem;
    margin: .27rem 0 .57rem;
    text-align: center
}

.wrap .tsyy-cont .tsyy-item .desc {
    color: #695f53;
    font-family: ls_jp_b;
    font-size: .18rem;
    line-height: .34rem;
    margin: auto;
    width: 5.4rem
}

blockquote,body,button,caption,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,html,input,legend,li,menu,ol,p,pre,table,td,textarea,th,ul {
    margin: 0;
    padding: 0
}

body {
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none
}

body::-webkit-scrollbar {
    width: 0
}

body::-webkit-scrollbar-thumb {
    background: transparent
}

.overflow {
    overflow: hidden
}

abbr,body,fieldset,html,iframe,img {
    border: 0
}

li {
    list-style: none
}

textarea {
    overflow: auto;
    resize: none
}

input {
    outline: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a,button {
    cursor: pointer
}

b,em,h1,h2,h3,h4,h5,h6,strong {
    font-style: normal
}

body,button,input,textarea {
    color: #62a1c9
}

body,html {
    min-width: 1400px;
    width: 100%
}

::placeholder {
    color: #454545
}

.wbox {
    clear: both;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    width: 1200px
}

.wbox:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden
}

* html .wbox {
    zoom:1}

a,button,div,input,select,textarea {
    border: 0;
    margin: 0;
    outline: none;
    padding: 0
}

a,a:hover {
    text-decoration: none
}

select {
    appearance: none
}

.hide {
    display: none
}

@font-face {
    font-family: ls_jp_b;
    src: url(https://www.kaihoukukan-overfield.jp/pc/gw/20240429155846/font/ls_jp_b_a15c9614.otf)
}

@font-face {
    font-family: zas_r;
    src: url(https://www.kaihoukukan-overfield.jp/pc/gw/20240429155846/font/zas_r_8c5bb066.ttf)
}

@font-face {
    font-family: tcmc;
    src: url(../fonts/tcmc_19704550.ttf)
}

@font-face {
    font-family: hge_r;
    src: url(../fonts/hge_r_bd6ae4f9.ttf)
}

body {
    opacity: 0;
    transition: opacity .5s
}

.footer {
    background-color: #fff;
    box-sizing: border-box;
    height: 6.48rem;
    padding-top: 1px;
    position: relative;
    width: 100%
}

.footer .contact {
    margin: auto;
    width: 11rem
}

.footer .t-cont {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 1.46rem;
    width: 100%
}

.footer .logo {
    background: url(../images/logo1_2afbfe1b.png) no-repeat;
    background-size: 100% 100%;
    height: 1.46rem;
    width: 4.49rem
}

.footer .contact-list {
    width: 4.49rem
}

.footer .contact-list p {
    color: #040000;
    font-family: ls_jp_b;
    font-size: .14rem;
    line-height: .32rem
}

.footer .b-cont {
    margin-top: .64rem
}

.footer .b-cont .share {
    align-items: center;
    display: flex;
    justify-content: center
}

.footer .b-cont a {
    margin: 0 .2rem;
    transition: opacity .3s
}

.footer .b-cont a:hover {
    opacity: .8
}

.footer .b-cont .youtube {
    background: url(../images/icon1_d8ab4b41.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .43rem
}

.footer .b-cont .discord {
    background: url(../images/icon2_9a8c2fde.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .4rem
}

.footer .b-cont .twitter {
    background: url(../images/icon3_6edd9ef5.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .3rem
}

.footer .b-cont .ins {
    background: url(../images/icon5_193613ab.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .3rem
}

.footer .b-cont .tiktok {
    background: url(../images/icon4_30a075a6.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .26rem
}

.footer .b-cont p {
    color: #040000;
    font-family: ls_jp_b;
    font-size: .12rem;
    margin-top: .6rem;
    text-align: center
}

.footer .copyright {
    align-items: center;
    background-color: #000;
    bottom: 0;
    display: flex;
    height: .8rem;
    justify-content: center;
    left: 0;
    position: absolute;
    width: 100%
}

.footer .copyright a {
    color: #fff;
    font-family: ls_jp_b;
    font-size: .14rem;
    margin: 0 .5rem
}

.ny-zs-1 {
    background: url(../images/zs_1_1f20cf97.png) no-repeat;
    background-size: 100% 100%;
    height: 6.2rem;
    top: 0;
    width: 100%
}

.ny-zs-1,.ny-zs-2 {
    left: 0;
    position: absolute
}

.ny-zs-2 {
    background: url(../images/zs_2_c94e41ff.png) no-repeat;
    background-size: 100% 100%;
    height: 9.39rem;
    top: 1.5rem;
    width: 3.92rem;
    z-index: 1
}

.ny-zs-3 {
    background: url(../images/zs_3_7352e5b0.png) no-repeat;
    background-size: 100% 100%;
    height: 7.56rem;
    right: 0;
    width: 4.47rem
}

.ny-zs-3,.ny-zs-4 {
    position: absolute;
    z-index: 1
}

.ny-zs-4 {
    background: url(../images/mask_40ffa069.png) no-repeat;
    background-size: 100% 100%;
    height: 10.4rem;
    left: 50%;
    top: -5.85rem;
    transform: translateX(-50%);
    width: 19.2rem
}

.go-home {
    background: url(../images/home_btn_b6d340de.png) no-repeat;
    background-size: 100% 100%;
    bottom: -1.5rem;
    height: .92rem;
    position: absolute;
    right: .1rem;
    transition: filter .3s;
    width: .92rem;
    z-index: 4
}

.go-home:hover {
    filter: brightness(1.2)
}

.pop {
    bottom: 0;
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity .5s,z-index .5s;
    width: 100vw;
    z-index: -1
}

.pop.show {
    opacity: 1;
    z-index: 999
}

.pop.show .content-scale {
    transform: translate(-50%,-50%) scale(1)
}

.pop .content-scale {
    box-sizing: border-box;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%) scale(.6);
    transition: transform .4s
}

.nav-pop {
    background: url(../images/loading_bg_d9e8d868.jpg) 50% no-repeat;
    background-size: cover
}

.nav-pop.show .nav-item1 {
    animation: topGo .3s cubic-bezier(.25,.46,.45,.94) .2s both
}

.nav-pop.show .nav-item2 {
    animation: topGo .3s cubic-bezier(.25,.46,.45,.94) .3s both
}

.nav-pop.show .nav-item3 {
    animation: topGo .3s cubic-bezier(.25,.46,.45,.94) .4s both
}

.nav-pop.show .nav-item4 {
    animation: topGo .3s cubic-bezier(.25,.46,.45,.94) .5s both
}

.nav-pop.show .nav-item5 {
    animation: topGo .3s cubic-bezier(.25,.46,.45,.94) .6s both
}

.nav-pop .container {
    align-items: center;
    display: flex;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.nav-pop .logo {
    background: url(../images/logo1_2afbfe1b.png) 50% no-repeat;
    background-size: contain;
    cursor: auto;
    height: .69rem;
    left: .55rem;
    position: absolute;
    top: .5rem;
    width: 2.1rem
}

.nav-pop .show-pic {
    animation: float 5s ease-in-out infinite;
    height: 100%;
    position: relative;
    width: 12rem
}

.nav-pop .show-pic img {
    left: 50%;
    max-height: 6.74rem;
    max-width: 8.25rem;
    object-fit: contain;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: opacity .5s,z-index .5s;
    z-index: -1
}

.nav-pop .show-pic img.show {
    opacity: 1;
    z-index: 1
}

.nav-pop .nav-list {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.nav-pop .nav-item {
    display: flex;
    margin-bottom: .66rem;
    opacity: 0
}

.nav-pop .nav-item:hover .nav-tit {
    background: url(../images/nav_bg_569f3066.png) no-repeat;
    background-size: 100% 100%
}

.nav-pop .nav-item:last-child {
    margin-bottom: 0
}

.nav-pop .nav-index {
    background: url(../images/nav_zs_bcac01b1.png) no-repeat;
    background-size: 100% 100%;
    color: #6194ac;
    font-family: tcmc;
    font-size: .22rem;
    height: .61rem;
    line-height: .46rem;
    position: relative;
    text-align: center;
    width: .56rem
}

.nav-pop .nav-index:after {
    background-color: #807359;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    top: -.1rem;
    transform: translateX(-50%);
    width: .49rem
}

.nav-pop .nav-tit {
    align-items: center;
    box-sizing: border-box;
    color: #807359;
    display: flex;
    font-family: zas_r;
    font-size: .25rem;
    height: .43rem;
    line-height: .43rem;
    padding-left: .2rem;
    position: relative;
    transition: background .3s;
    width: 4.92rem
}

.nav-pop .nav-tit span {
    color: #807359;
    font-size: .25rem;
    height: 100%;
    line-height: .28rem
}

.nav-pop .nav-tit:after {
    color: #807359;
    font-family: tcmc;
    font-size: .1rem;
    left: .1rem;
    letter-spacing: .04rem;
    position: absolute;
    top: -.32rem
}

.nav-pop .nav-item1 .nav-tit:after {
    content: "BACK TO TOP"
}

.nav-pop .nav-item2 .nav-tit {
    padding-left: .15rem
}

.nav-pop .nav-item2 .nav-tit:after {
    content: "SYSTEM"
}

.nav-pop .nav-item3 .nav-tit {
    padding-left: .15rem
}

.nav-pop .nav-item3 .nav-tit:after {
    content: "CHARACTER"
}

.nav-pop .nav-item4 .nav-tit {
    padding-left: .27rem
}

.nav-pop .nav-item4 .nav-tit:after {
    content: "OTHERS"
}

.nav-pop .nav-item5 .nav-tit {
    padding-left: .27rem
}

.nav-pop .nav-item5 .nav-tit:after {
    content: "NEWS"
}

.nav-pop .share {
    align-items: center;
    bottom: .33rem;
    display: flex;
    justify-content: center;
    position: absolute;
    right: .15rem
}

.nav-pop a {
    margin: 0 .2rem
}

.nav-pop .youtube {
    background: url(../images/icon1_d8ab4b41.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .43rem
}

.nav-pop .discord {
    background: url(../images/icon2_9a8c2fde.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .4rem
}

.nav-pop .twitter {
    background: url(../images/icon3_6edd9ef5.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .3rem
}

.nav-pop .ins {
    background: url(../images/icon5_193613ab.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .3rem
}

.nav-pop .tiktok {
    background: url(../images/icon4_30a075a6.png) no-repeat;
    background-size: 100% 100%;
    height: .3rem;
    width: .26rem
}

.nav-pop .bgm-btn {
    background: url(../images/bgm_on2_b6d15deb.png) no-repeat;
    background-size: 100% 100%;
    height: .92rem;
    margin-top: -.15rem;
    width: .92rem
}

.nav-pop .bgm-btn.off {
    background: url(../images/bgm_off2_d5b23341.png) no-repeat;
    background-size: 100% 100%
}

.world-pop:before {
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,.7);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

.world-pop .content {
    background: url(../images/ruler_f8bec994.png) 50% no-repeat;
    background-size: 12.02rem 1.31rem;
    height: 100%;
    position: relative;
    width: 100%
}

.world-pop .world-item {
    display: none;
    opacity: 0;
    position: absolute;
    transform: scale(.5)
}

.world-pop .world-item.show {
    display: block
}

.world-pop .world-item .close {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute
}

.world-pop .world-item .close:hover .icon {
    transform: rotate(90deg)
}

.world-pop .world-item .close span {
    bottom: -.15rem;
    color: #695f53;
    font-family: tcmc;
    font-size: .12rem;
    left: 50%;
    letter-spacing: .02rem;
    margin-left: .04rem;
    position: absolute;
    text-align: center;
    transform: translate3d(-50%,0,0) rotate(-6deg);
    white-space: nowrap
}

.world-pop .world-item .close .icon {
    background: url(../images/close_c0fb187d.png) no-repeat;
    background-size: 100% 100%;
    height: .33rem;
    transition: transform .3s;
    width: .33rem
}

.world-pop .world-item.world-item1 {
    height: 4.99rem;
    width: 9.84rem
}

.world-pop .world-item.world-item1 img {
    width: 100%
}

.world-pop .world-item.world-item1 .close {
    right: 1.59rem;
    top: 1.11rem
}

.world-pop .world-item.world-item2 {
    height: 4.97rem;
    width: 9.2rem
}

.world-pop .world-item.world-item2 img {
    width: 100%
}

.world-pop .world-item.world-item2 .close {
    right: 1.19rem;
    top: 1.45rem;
    transform: rotate(8deg)
}

.world-pop .world-item.world-item3 {
    height: 5.04rem;
    width: 10.23rem
}

.world-pop .world-item.world-item3 img {
    width: 100%
}

.world-pop .world-item.world-item3 .close {
    right: 1.19rem;
    top: 1rem
}

.qrcode-pop:before {
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0,.7);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

.qrcode-pop .content {
    background: url(../images/ruler_f8bec994.png) 50% no-repeat;
    background-size: 12.02rem 1.31rem;
    height: 100%;
    position: relative;
    width: 100%
}

.qrcode-pop .qrcode-box {
    background: url(../images/qrcode_box_79b8d1fb.png) no-repeat;
    background-size: 100% 100%;
    height: 5.33rem;
    left: 50%;
    margin: -2.67rem 0 0 -4.5rem;
    position: absolute;
    top: 50%;
    width: 9.4rem
}

.qrcode-pop .qrcode-box .close {
    background: url(../images/close2_babadcc4.png) no-repeat;
    background-size: 100% 100%;
    height: .33rem;
    position: absolute;
    right: 1.29rem;
    top: .88rem;
    transition: transform .3s;
    width: .33rem
}

.qrcode-pop .qrcode-box .close:hover {
    transform: rotate(90deg)
}

.qrcode-pop .qrcode-box img {
    height: 2.1rem;
    left: 2.05rem;
    position: absolute;
    top: 1.88rem;
    width: 2.1rem
}

.video-pop {
    background-color: rgba(0,0,0,.7)
}

.video-pop video {
    object-fit: contain;
    width: 8.88rem
}

.video-pop .close {
    background: url(../images/close1_3ea17226.png) no-repeat;
    background-size: 100% 100%;
    height: .62rem;
    position: absolute;
    right: -.77rem;
    top: 0;
    transition: transform .3s;
    width: .62rem
}

.video-pop .close:hover {
    transform: rotate(90deg)
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn)
    }
}

@keyframes breathingEffect {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

@keyframes float {
    0%,to {
        transform: translateZ(0) rotate(0deg)
    }

    50% {
        transform: translate3d(0,10px,0) rotate(1deg)
    }
}

@keyframes topGo {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes topUp {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-30px)
    }
}

@keyframes bottomGo {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes scaleGo {
    0% {
        opacity: 0;
        transform: scale(1.05)
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes expandGo {
    0% {
        width: 0
    }

    50% {
        width: 200%
    }

    to {
        width: 100%
    }
}

@keyframes opacityGo {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}
/* 新增样式 */

.popCont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 6.6rem;
}

.popCont1 {
    height: 8.23rem;
    background: url(https://nte.perfectworld.com/public/images/main250513/pop/popCont1.png) no-repeat 0 0;
    background-size: 100% auto
}

.popCont2 {
    height: 7.59rem;
    background: url(https://nte.perfectworld.com/public/images/main250624/pop/popCont2.png) no-repeat 0 0;
    background-size: 100% auto
}

.popClose {
    top: .22rem;
    right: .26rem;
    width: .55rem;
    height: .55rem;
    background: url(https://nte.perfectworld.com/public/images/main250513/pop/popClose.png) no-repeat 0 0;
    background-size: 100% auto;
    z-index: 1
}

.formRow {
    width: 5.86rem;
    height: .55rem;
    margin-bottom: .2rem;
    border-radius: .275rem;
    background: #1d1d1d;
    box-sizing: border-box;
    padding: 0 .2rem;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.formRow input,.formRow select {
    height: inherit;
    font-size: .24rem;
    color: #828282;
    border: none;
    background: 0 0
}

.clause_list {
    width: 5.7rem;
    line-height: .2rem;
    font-size: .14rem;
    color: #1d1d1d
}

.clause_list dd {
    position: relative;
    box-sizing: border-box;
    padding-left: .34rem;
    margin-bottom: .05rem
}

.clause_list dd a {
    text-decoration: underline;
    color: #00f
}

.clause_list dd::before {
    content: "";
    position: absolute;
    top: .01rem;
    left: 0;
    width: .18rem;
    height: .18rem;
    background: url(../images/checkbox.png) no-repeat 0 bottom;
    background-size: 100% auto
}

.clause_list dd.active::before {
    background-position: 0 0
}

.pop_yy_tit {
    top: 1.55rem
}
.zh-Hans .pop_yy_tit {
    width: 3.57rem;
    height: .83rem;
    background: url(../images/pop_yy_tit.png) no-repeat 0 0;
    background-size: 100% auto
}

.yyForm {
    top: 2.78rem
}

.yyEmailInput {
    width: 100%
}

.yy_clause {
    top: 3.5rem
}

.yy_clause dd {
    margin-left: .3rem
}

.yy_clause dd:first-child {
    margin-left: 0
}

.yy_platform_head {
    top: 5.3rem;
    width: 6rem;
    text-align: center;
    font-size: .18rem;
    color: #000
}

.yy_platform {
    top: 5.66rem;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center
}

.yy_platform button {
    width: 1.86rem;
    height: .56rem;
    margin: 0 .17rem
}

.zh-Hans .yy_platform button {
    background: url(../images/yy_platform.png) no-repeat;
    background-size: 6.28rem 1.12rem
}
.pop_yy_form .yy_platform .platform_pc {
    background-position: 0 0
}

.pop_yy_form .yy_platform .platform_pc.on {
    background-position: 0 -.56rem
}

.pop_yy_form .yy_platform .platform_m {
    background-position: -2.2rem 0
}

.pop_yy_form .yy_platform .platform_m.on {
    background-position: -2.2rem -.56rem
}

.pop_yy_form .yy_platform .platform_host {
    background-position: -4.42rem 0
}

.pop_yy_form .yy_platform .platform_host.on {
    background-position: -4.42rem -.56rem
}

.yySubmit {
    top: 6.63rem;
    width: 5.04rem;
    height: .77rem
}

.zh-Hans .yySubmit {
    background: url(../images/yySubmit.png) no-repeat 0 0;
    background-size: 100% auto
}
.yySubmit:hover {
    background-position: 0 -.77rem
}

.pop_yySuccess_tit {
    top: 1.55rem
}

.zh-Hans .pop_yySuccess_tit {
    width: 5.87rem;
    height: 1.2rem;
    background: url(../images/pop_yySuccess_tit.png) no-repeat 0 0;
    background-size: 100% auto
}
.testRecruitBtn {
    top: 3.3rem;
    width: 5.11rem;
    height: .94rem
}

.zh-Hans .testRecruitBtn {
    background: url(../images/testRecruitBtn.png) no-repeat 0 0;
    background-size: 100% auto
}

.yy_otherPlatformTip {
    bottom: 1.5rem
}

.yy_otherPlatform {
    bottom: .5rem
}

.loginForm,.loginSuccess {
    width: 100%
}

.pop_login_tit {
    top: 1.74rem
}
.loginFromCont {
    top: 2.8rem
}

.loginEmailInput {
    width: 100%
}

.loginEmailCode {
    width: 2.8rem
}

.getEmailCodeBtn {
    padding: 0 .2rem;
    height: .42rem;
    border-radius: .21rem;
    background: #7cecfc;
    font-size: .24rem;
    color: #1d1d1d
}

.popNextBtn {
    bottom: .8rem;
    width: 5.04rem;
    height: .77rem
}

.pop1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 10;
    display: none;
}
.ja .pop_yy_tit {
    width: 3.58rem;
    height: .86rem;
    background: url(https://nte.perfectworld.com/jp/images/cover240718/pop_yy_tit.png) no-repeat 0 0;
    background-size: 100% auto;
}
.auto {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%, 0);
}

.yysd{
    top: 4.7rem;
    width: 95%;
    display: flex;
    justify-content: space-between;
}
.yysd a{
    display: flex;
    width: 24%;
}
.yysd img{
    width: 100%;
}