/* html{font-size:100px;} */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5,dl,dt,dd{margin:0;padding:0}
a,img,input {border:none; outline: none;-webkit-tap-highlight-color: transparent;}
em {font-style: normal;}
body{font: 0.24rem/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; box-sizing: border-box;
 /* padding:
    constant(safe-area-inset-top)
    constant(safe-area-inset-right)
    constant(safe-area-inset-bottom)
    constant(safe-area-inset-left); /* 兼容 iOS < 11.2 */
 /* padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left); /* 兼容 iOS >= 11.2 */
}
a {text-decoration:none;}
ul,li{list-style: none}
@font-face {
font-family: "font_en";
src: url(fonts/RefrigeratorDeluxe.ttf);
}
body {background:#0f171b;font-family: "font_en",-apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif; color: #2e2e2e;}
@media all and (orientation : landscape ) and (min-width:480px) and (min-aspect-ratio: 750/600){  
    html,body { position: relative !important;; overflow:hidden;width:100%; height:100%;padding:0;margin:0;}
    html::before {content: ""; position:fixed; top:0; left:0; height:100%; width:100%; background:#333; z-index:99999; }
    body::after {content: "For a better experience, hold your phone vertically."; text-align:center; font-size:16px; color:#fff; position:absolute; top:50%; left:0; height:30px; width:100%; margin-top:50px; z-index:99999; }
    body::before { content: "";position:absolute; z-index:99999; height:200px; width:100px; left:50%; top:50%; margin:-140px 0 0 -50px; color:#fff;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB2CAYAAAAZUrcsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDAwMjcwNkVEQzczMTFFNjlFMDFGQTEzNkM3N0JBMTMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDAwMjcwNkREQzczMTFFNjlFMDFGQTEzNkM3N0JBMTMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0NzhCMTlBREM1ODExRTZCNTdFRjQ0Q0I1QzRCODZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQ0NzhCMTlCREM1ODExRTZCNTdFRjQ0Q0I1QzRCODZBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+J30rNQAACRRJREFUeNrsXQlsFVUU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"); background-repeat:no-repeat; background-position:center center; background-size:100px auto; transform:rotateZ(-90deg);}
    .EN::after{content: 'For a better experience, hold your phone vertically.';}
    .ES::after{content: 'Para mejorar la experiencia, sujeta el teléfono en posición vertical.';}
    .JA::after{content: '見やすくするためには、スマートフォンを縦に持ってください。';}
    .PT::after{content: 'Para obter uma experiência melhor, segure seu telefone na vertical.';}
    .IT::after{content: "Per un'esperienza di gioco migliore, tieni il dispositivo in posizione verticale.";}
    .FR::after{content: "Pour une meilleure expérience, veuillez tenir votre téléphone à la verticale.";}
    .DE::after{content: "Halte dein Smartphone senkrecht, um das Spielerlebnis zu verbessern.";}
    .ID::after{content: 'Untuk pengalaman yang lebih baik, pegang ponselmu secara vertikal.';}
    .KO::after{content: '더 나은 게임 경험을 위해 휴대전화를 세로화면으로 변경해주세요.';}
    .TR::after{content: 'Daha iyi bir deneyim için telefonunu dikey olarak tut';}
    .RU::after{content: 'Держите телефон вертикально, чтобы вам было удобнее.';}
    .AR::after{content: 'للحصول على تجربة أفضل، أمسك هاتفك بشكل عمودي.'; direction: rtl;}
    .TH::after{content: 'โปรดถือมือถือของคุณในแนวตั้งเพื่อประสบการณ์ที่ดียิ่งขึ้น';}
    .VI::after{content: 'Để có trải nghiệm tốt hơn, hãy cầm dọc điện thoại.';}
    .ZH-HK::after{content: '為了更好的體驗，請將手機豎起來';}
    .ZH-HANT::after{content: '為了良好的遊戲體驗，請以直式螢幕遊玩';}
}

body{width: 100%;}    
    .wrap {background: url(../img/m/bg.jpg) no-repeat 50% 0/10.8rem auto;width: 100%; min-height: 19.2rem; padding-bottom: 1rem; box-sizing: border-box; overflow: hidden;}

    .btn1,.btn3,.btn4,.btn-none {display: flex; width: 4.49rem; height: 1.06rem; background:url(../img/btn1.png) no-repeat 0 0/100%; justify-content: center; align-items: center; font-size: 0.42rem; color: #000; font-weight: bold; margin: 0 auto; box-sizing: border-box; padding: 0 0 0.1rem; line-height: 1;}
    .btn1::before {display: inline-block; content: ''; width: 0.4rem; height: 0.47rem; background: url(../img/icon2.png) no-repeat 0 0/100%; margin-right: 0.1rem;}
    .btn-none {opacity: 0; pointer-events: none; margin: 0;}
    .btn2 {display: flex; width: 1.44rem; height: 0.43rem; background: url(../img/btn2.png) no-repeat 0 0/1.44rem auto,url(../img/btn2_hover.png) no-repeat 0 0/1.44rem auto; align-items: center; justify-content: center; font-size: 0.24rem; color: #000000;}
    /* .btn2:hover {background: url(../img/btn2_hover.png) no-repeat 0 0/1.44rem auto; color: #ffffff;} */

    .btn3,.btn4 {width: 2.75rem; height: 0.67rem; background:url(../img/btn3.png) no-repeat 0 0/100%;font-size: 0.28rem; color: #000; padding-bottom: 0.03rem;}
    .btn3 {color: #fff;}
    .btn4 {filter: grayscale(1);}

    header {display: flex;justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 0.23rem; position: fixed; top: 0; left: 0; width: 100%; height: 1.16rem; z-index: 100; background: rgba(0, 0, 0, 0.7);}
    /* header>h1 {padding-top: 0.05rem;} */
    header>h1 a {display: block; width: 1.9rem; height: 0.64rem; overflow: hidden; text-indent: -9999rem; background: url(../img/logo.png) no-repeat 0 0/100%;}
    .top-nav {display: flex; align-items: center;}
    .top-nav .btn2 {margin: 0 0 0 0.25rem; text-align: center; line-height: 1;}
    .login {color: #e9edef; font-size: 0.24rem;}
    .login p { height: 0.43rem; display: flex; align-items: center; text-align: center; box-sizing: border-box; padding: 0 0.2rem;}
    .login p span {display: inline-block; white-space: nowrap; max-width: 8em; text-overflow: ellipsis; overflow: hidden; margin-right: 0.2em; text-align: left;}
    .login a{color: #ff7037; padding: 0 0 0 0.1rem; display: inline-block;}
    ._langNav_ {min-width: initial;}
    ._langNav_>a,._langNav_:hover>a {text-indent: -9999rem; background: url(https://www.arenabreakoutinfinite.com/img/index/global.png) no-repeat 50% 50%/0.45rem auto;}

    .index {width: 10.8rem; height: 19.21rem; background:#000102 url(../img/m/index_bg.jpg) no-repeat 50% 0/10.8rem 19.21rem; position: absolute; z-index: 20; overflow: hidden;}
    .cover {position: absolute; top: 0; left: 50%; width: 25.6rem; height: 14.4rem; transform: translateX(-50%); pointer-events: none; z-index: -1;}
    .cover video {width: 25.6rem; height: 14.4rem;}
    .bdc {width: 2.84rem; height: 1.22rem; margin: 3.35rem auto 0; position: relative;}
    .bdc a {text-indent: -9999rem; width: 100%; height: 100%; overflow: hidden; display: block;}
    .bdc>div {display: none;}
    .bdc:hover>div {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 8.23rem; height: 2.87rem; background: url(../img/intro_bg.png) no-repeat 0 0/100% 100%; font-size: 0.24rem; color: #757575; line-height: 1.5; padding: 0 0.3rem; box-sizing: border-box; display: block;}
    .bdc h3 {height: 0.68rem; line-height: 0.68rem; padding: 0.02rem 0 0.1rem; text-indent: 0.3rem; font-size: 0.3rem; color: #fbfbfb;}
    .index-tips {width: 7.5rem; background: rgba(0, 0, 0, 0.35) url(../img/trim.png) no-repeat 50% 0.04rem/98% auto; font-size: 0.3rem; color: #ffffff; line-height: 1.5; position: relative; padding: 0.1rem 0.27rem; text-align: center; margin: 3.8rem auto 0;}
    .index-tips::before,.index-tips::after {position: absolute; top: 0; right: 0; border: 0.02rem solid #bcbfc0; width: 0.06rem; height: 100%; box-sizing: border-box; content: '';}
    .index-tips::before{border-right: none; left: 0;}
    .index-tips::after {border-left: none;}
    .patroller-btn,.upon-tips {display: none;}
    .upon-login .patroller-btn {margin: 1.7rem auto 0; display: flex;}
    .upon-login .upon-tips {display: block;}
    .upon-login .pre-tips,.upon-login .index-btns {display: none;}
    .index-btns {display: flex; width: 100%; height: 4.45rem; margin: 2.2rem auto 0; justify-content: space-between; flex-direction: column;}

    .grade-giftbox {width: 100%; overflow-x: auto; padding: 1rem 0 0.3rem; position: absolute; top: -1000%; top: -1000%; opacity: 0;}
    .progress {height: 0.5rem; width: 17.4rem; position: relative; margin: 1.1rem auto 0.05rem; display: none;}
    .progress::before {height: 0.4rem; width: 17.4rem; background:url(../img/progress.png) repeat-x 0 0/2.9rem 0.4rem; content: ''; display: block; filter: grayscale(1);}
    .progress div {height: 0.4rem; width: 0; background:url(../img/progress.png) repeat-x 0 0/2.9rem 0.4rem; position: absolute; top: 0; max-width: 100%;}
    .progress div p {color: #9b9b9b; font-size: 0.24rem; position: absolute; top: 0; right: 0; transform: translate(50%,-130%); background:url(../img/gift_bg.png) no-repeat 0 0/4rem auto; height: 0.65rem; line-height: 0.65rem; border-bottom: 0.03rem solid #ca4d31; padding: 0 0.1rem; min-width: 3rem; text-align: center;}
    .progress p span:nth-of-type(1) {margin-left: 0.18rem; color: #9b9b9b;}
    .progress p span:nth-of-type(2) {color: #ca4d31;}
    .progress p::after {content: ''; display: block;border-left: 0.1rem solid transparent; border-right: 0.1rem solid transparent; border-top: 0.16rem solid #ca4d31;width: 0; height: 0; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,98%)}

    .grade-gift {width: 17.4rem; display: none; justify-content: center;}
    .grade-gift li {width: 2.9rem; margin-right: 0.05rem; filter: grayscale(1);}
    .grade-gift li:nth-last-of-type(1) {margin-right: 0;}
    .grade-gift h4 {min-height: 0.5rem; width: 2.74rem; border: 0.01rem solid #383a3b;display: flex; align-items: center; position: relative; background:rgba(0, 0, 0, 0.7) url(../img/gift_bg.png) no-repeat 0 0/100% auto; color: #535657;}
    .grade-gift h4>strong {height: 0.5rem; width: 2.74rem;display: flex; align-items: center; position: relative; font-weight: normal; }
    .grade-gift h4>strong::before {width: 0; height: 0; border-top: 0.05rem solid transparent; border-bottom: 0.05rem solid transparent; border-left: 0.08rem solid #535657; content: ''; display: block; margin: 0 0.05rem;}
    .grade-gift h4>span {padding:0.1rem 0.1rem 0 0; font-size: 0.2rem; white-space: nowrap;}
    .grade-gift li>div {width:2.74rem;background:url(../img/gift_bg.png) no-repeat 0 0/100% auto; border: 0.01rem solid #4f5152; position: relative; margin-top: 0.05rem;}
    .grade-gift li>div img {width:2.74rem;height: 1.78rem; display: block; object-fit: contain; box-sizing: border-box; padding: 0.3rem;}
    .grade-gift li>div span {display: flex; min-height: 0.41rem; width: 100%; line-height: 1.1; align-items: center; justify-content: center; text-align: center; background: #363636; color: #ccc; font-size: 0.24rem; box-sizing: border-box; padding: 0.05rem;}
    .grade-gift li>div::before,.grade-gift li>div::after {content: ''; border: 0.01rem solid #21272a; position: absolute; transform: translate(-50%,-50%);top: 50%; left: 50%; }
    .grade-gift li>div::before {width: 90%; height: 100%; border-width: 0.01rem 0;}
    .grade-gift li>div::after {width: 100%; height: 90%; border-width: 0 0.01rem;}

    .grade-gift li.open {filter: initial;}
    .grade-gift li.open h4 {color: #ca4d31; border-color: #7c3323;}
    .grade-gift li.open h4>strong {color: #ca4d31;}
    .grade-gift li.open h4>strong::before {border-left: 0.08rem solid #ca4d31;}
    .grade-gift li.open>div {border-color: #ca4d31;}
    .grade-gift li.open>div span {color: #ca4d31; background: #444444;}

    .grade-gift li.open>div::before,.grade-gift li.open>div::after {transform: initial; width: 100%; height: 0.04rem; overflow: hidden; border-color: #ca4d31; border-width: 0 0.04rem; box-sizing: border-box; left: 0; }
    .grade-gift li.open>div::before {top: 0;}
    .grade-gift li.open>div::after {bottom: 0; top: initial;}

    .grade-gift,.progress{display: flex;}
    .upon-login .grade-giftbox {display: block; position: initial; opacity: 1;}

    .main {width: 9.6rem; min-height: 11.92rem; background: url(../img/m/main_bg.png) no-repeat 0 0/9.6rem 13.52rem; margin: 3.98rem auto 0; position: relative; transform: initial!important;}
    .main::after {content: ''; display: block; position: absolute; transform: translateX(-50%); left: 50%; bottom: 0; background: url(../img/m/main_bg.png) no-repeat 0 100%/9.6rem 13.52rem; width: 100%; height: 0.07rem; overflow: hidden;}
    .nav {height:1.47rem;position: relative;display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding:0 0.1rem;}
    

    .nav li {width: 1.82rem; height: 0.98rem; font-size: 0.28rem; display: flex; justify-content: center; align-items: center; color: #bebebe; font-weight: bold; cursor: pointer; box-sizing: border-box; border: 1px solid #9b9b9b; position: relative; user-select: none; line-height: 1; text-align: center;}
    .nav li::before {content: ''; position: absolute; width: 1.7rem; height: 0.98rem; bottom: -1px; left: 50%;border-top: 1px solid #404245;border-bottom: 1px solid #404245; box-sizing: border-box; transform: translateX(-50%); pointer-events: none;}
    .nav li.current {border-color: #ca4d31; color: #ca4d31;}
    .red-dot {position: relative;}
    .red-dot::after {content: ''; width: 0.12rem; height: 0.12rem; border-radius: 100%; background-color: #f00; position: absolute; top: 0.1rem; right: 0.3rem; display: block; line-height: 0; overflow: hidden;}
    .content {width:9.6rem; box-sizing: border-box; transform: initial!important;}
    .box {display:none; position: relative;}
    /* .main {width:18.4rem;height: 9.25rem!important;border: 0.02rem solid rgba(255,255,255,0.2); box-sizing: border-box; background:url(//game.gtimg.cn/images/aqtw/act/a20230427patroller/test.jpg) no-repeat 0 0/18.4rem 9.25rem;} */
    .forbidden * {display: none!important;}
    .forbidden-tips {display: none;}
    .forbidden .forbidden-tips {width: 9.39rem; height: 10.26rem; background: url(../img/m/disable_bg.png) no-repeat 0/100%; position:  absolute; top: 0.1rem; left: 50%; transform: translate(-50%,0); z-index: 10; display: flex!important; justify-content: center; align-items: center; color: #fff; font-size: 0.24rem;}
    /* 我的 */
    .mine {display: block; transform: initial!important;}
    .user {display: flex; justify-content: space-between;}
    .user-info {width: 4.15rem; box-sizing: border-box; padding:0.74rem 0 0; color: #676767;}
    .avatar {width: 1.57rem; height: 1.57rem;border: 0.02rem solid rgba(255,255,255,0.2); margin: 0 auto;}
    .avatar img {display: block; width: 1.57rem; height: 1.57rem;}
    .username {text-align: center; font-size: 0.46rem; font-weight: bold; padding: 0.2rem 0 0; line-height: 1.2; color: #d2dbd3;}
    .userid {text-align: center; font-size: 0.3rem; line-height: 0.46rem; color: #8b8b8b;}
    .honor {display: flex; justify-content: center; align-items: center; margin:0.2rem 0 0.1rem;}
    .honor>span {display: flex; min-width: 2rem; height: 0.5rem; padding: 0 0.05rem; justify-content: center; align-items: center; background: rgba(0,0,0,0.4); font-size: 0.3rem; color: #d2dbd3; border: 0.01rem solid #272727; box-sizing: border-box;}
    .help-btn {position: relative; width: 0.5rem; height: 0.5rem; background:rgba(0,0,0,0.4) url(../img/icon1.png) no-repeat 50% 50%/0.07rem 0.31rem; border: 0.01rem solid #272727; margin-left: 0.1rem; cursor: pointer; box-sizing: border-box;}
    * {
        -webkit-tap-highlight-color: transparent; /* 对于非聚焦元素 */
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* 对于聚焦元素 */
    }
    .grade-popup {width: 100%; height: calc(100vh - 1.16rem); background:rgba(0,0,0,0.9); position: fixed; left: 0; top: 1.16rem; z-index: 888; display: none; cursor: initial; border: 0.03rem solid #222323; border-width: 0.03rem 0; box-sizing: border-box; padding: 0 0.6rem;}
    .help-btn:hover .grade-popup {display: block;}
    .help-btn:hover::after {position: absolute; content: ''; height: 3rem; width: 150%; left: 0; top: 50%;transform: translateY(-50%); }
    .help-close-btn {display: none; width: 0.68rem; height: 0.48rem; background:url(../img/icon7.png) no-repeat 0 0/100% 100%; position: fixed; top: 1.55rem; right: 0.58rem;}
    .help-btn:hover + .help-close-btn{display: block; z-index: 999;}
    .grade-popup h3{font-size: 0.42rem; color: #fbfbfb; height: 1.28rem; display: flex; align-items: center;}
    .grade-popup h3::before{display: inline-block; width: 0.09rem; height: 0.4rem; background: #ca4d31; content: ''; margin: 0 0.25rem 0 0.3rem;}
    .grade-popup table {border-collapse:collapse; font-size: 0.3rem; width: 98%; margin: 0 auto; color: #a8a8a8;}
    .grade-popup thead {background: rgba(76,76,76,0.3);border:0.02rem solid rgba(100,100,100,0.24); border-width: 0.02rem 0;}
    .grade-popup thead th {position: relative; padding: 0 0.08rem 0 0.06rem; text-align: center; color: #9b9b9b; font-size: 0.28rem; height: 0.79rem; line-height: 1.2;}
    .grade-popup thead th::after {content: ''; display:block; width: 0.01rem; height: 0.18rem; overflow: hidden; background: #646464; position: absolute; right: 0; top: 50%; transform: translate(0,-50%);}
    .grade-popup thead th:last-child::after{display: none;}
    .grade-popup tbody tr {border-bottom:0.02rem solid rgba(100,100,100,0.24); position: relative;}
    .grade-popup tbody tr::after {width: 100%; box-sizing: border-box; content: ''; height: 0.03rem; overflow: hidden; border:1px solid rgba(123, 123, 123, 0.3); border-width: 0 0.5rem; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0.02rem);}
    .grade-popup tbody tr:last-child {border: none;}
    .grade-popup tbody tr:last-child::after {content: initial;}
    .grade-popup table img {display: block; height: 0.8rem; margin: 0 auto 0.1rem; }
    .grade-popup table span {display: block; font-size: 0.14rem; padding: 0 0.2rem; text-align: center;}
    .grade-popup table td {text-align: center; align-items: center;vertical-align: middle; padding: 0.1rem 0; line-height: 1.2;}
    .grade-popup tbody tr td:first-child {white-space: nowrap;}
    .grade-popup tbody tr td:last-child,.grade-popup thead tr th:last-child {max-width: 2.5rem;}

    .grade {display: flex; flex-wrap: wrap; justify-content: center; font-size: 0.28rem; margin: 0 auto 1.7rem;}    
    .grade strong {font-weight: initial;}
    .user-info .btn1 {width: 3.42rem; height: 0.82rem; font-size: 0.32rem;}
    .user-info .btn1::before {width: 0.3rem; height: 0.35rem;}
    


    .user-data {width: 5.45rem; height: 10.45rem;border-left: 1px solid #262626;}
    .statistics { display: flex; flex-direction: column; position: relative; align-items: flex-start;  box-sizing: border-box; height: 100%; padding-right: 1px;}
    .statistics>li {width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; line-height: 1.5; height: 1rem;border-bottom: 1px solid #262626;}
    .statistics>li>strong{font-size: 0.46rem; color: #ca4d31; width: 30%;text-align: center;}
    .statistics>li>span{font-size: 0.3rem; color: #d2dbd3; font-weight: normal; display: block; width: 70%; box-sizing: border-box; line-height: 1.1; padding-left: 0.5rem;}
    .statistics>li:nth-child(5) {border-bottom: none;}
    .statistics>li.record { height: 3.7rem; position: relative; display: block; border-bottom: none;}
    .record h4 {height: 0.56rem; line-height: 0.56rem;font-size: 0.3rem; font-weight: normal; text-align: center; color: #000000; background: rgba(235,235,235,0.4); width: 100%;}
    .record ul {max-height: 4.2rem; overflow-y: auto; margin: 0.58rem 0.05rem 0 0;}
    .record ul li {font-size: 0.24rem; color: #7d7d7d;display: flex; height: 0.56rem; justify-content: space-between; align-items: center;}
    .record ul li:first-child{position: absolute; width: 100%; height: 0.58rem; top: 0.56rem; left: 50%; transform: translate(-50%,0);background: rgba(117,117,117,0.2); font-size: 0.2rem; padding-right: 0.05rem; box-sizing: border-box; font-weight: bold;}
    .record ul li:first-child::after {display: block;width:50%; height: 0.21rem; border-right: 0.02rem solid #757575; content: ''; position: absolute;}
    .record ul li span {display: inline-block; text-align: center; width: 50%;}
    /* .record ul::-webkit-scrollbar { 
        width: 0.05rem;
        height: 0.05rem;
    } 
    .record ul::-webkit-scrollbar-thumb { 
        border-radius: 0.1rem; 
        box-shadow: inset 0 0 0.05rem rgba(0, 0, 0, 0.2); 
        background: #5d6064; 
    } 
    .record ul::-webkit-scrollbar-track { 
        border-radius: 0; 
        box-shadow: inset 0 0 0.05rem rgba(0, 0, 0, 0.2); 
        background: #373a3e; 
    } */
    /* .record ul li span:nth-child(1) {display: inline-block; flex:0 0 50%;} */


    .demo h4 {height: 1.27rem; display: flex; align-items: center; font-size: 0.4rem; color: #c5c5c5;}
    .demo-btn {position: absolute; right: 0.4rem; top: 0.4rem;}
    .demo h4::before {content: ''; display: block; width: 0.1rem; height: 0.6rem; background: #ef8752;margin: 0 0.13rem -0.04rem 0.4rem;}
    .demo-content {width: 100%; margin: 0.1rem auto 0;height: 7.8rem; overflow: auto; padding: 0 0.8rem; box-sizing: border-box; font-size: 0.26rem; color: #c2c2c2;}
    .demo-content::before {display: block;content: ''; position: absolute; width: 17.6rem; height: 0.02rem; overflow: hidden; background:rgba(255,255,255,0.13); border:0.1rem solid rgba(255,255,255,0.5); border-width: 0 0.1rem; top: 1.27rem; left: 50%; box-sizing: border-box; transform: translate(-50%,0);}
    .demo-content p {line-height: 0.48rem; text-indent: 2em;}
    .demo-content p:first-child {text-indent: 0; padding-top: 0.3rem;}

    .video-list {position: relative;}
    .video-list ul{display: flex; flex-wrap: wrap; padding: 0.3rem 0.8rem; min-height: 9.12rem; justify-content: space-between;}
    .video-list ul li{width: 5.38rem; height: 4.3rem; position: relative; margin-bottom: 0.26rem;}
    .video-list li img{width: 5.38rem; height: 4.29rem; display: block;border-bottom: 0.02rem solid rgba(255,255,255,0.3);}
    .video-list li::before {position: absolute; display: block; bottom: 0; left: 0; content: ''; width: 5.38rem; height: 0.93rem; background: rgba(0,0,0,0.5); z-index: 3; pointer-events: none;}
    .video-list li::after {position: absolute; display: block; top: 50%; left: 50%; content: ''; width: 1.53rem; height: 1.53rem; background-position: 0 -4.67rem; z-index: 3; transform: scale(0.8) translate(-50%,-70%); transform-origin: 0 0; pointer-events: none;}
    .video-list li a {position: relative; display: block;width: 5.38rem; height: 4.3rem;}
    .video-list li a::after,.video-list li a::before {content: ''; position: absolute; width: 0.2rem; height: 0.02rem; overflow: hidden; background: rgba(255,255,255,0.2); top: 4.29rem; left: 0;}
    .video-list li a::after {left: initial; right: 0;}
    .video-list a strong {position: absolute; bottom: 0;z-index: 4; font-size: 0.3rem; color: #c2c2c2;white-space: nowrap; max-width: 10em; text-overflow: ellipsis; overflow: hidden; display: inline-block; line-height: 0.93rem; padding: 0 0.15rem;}
    .video-list a strong:last-child{position: absolute; bottom: 0; right:0;z-index: 4; font-size: 0.22rem; color: #767677;}
    .prev-btn,.next-btn {display: block; width: 0.94rem; height: 1.13rem; margin: -0.56rem 0; background-position: -5.9rem -0.02rem; position: absolute; right: -0.2rem; top: 50%; overflow: hidden; text-indent: -9999rem;}
    .prev-btn {transform: rotate(-180deg); right: initial; left: -0.25rem;}
    .disabled {/*pointer-events: none;*/ opacity: 0.24;}

    .video {transform: initial!important;}
    .info-team {width: 100%;padding: 0.2rem 0.35rem 0.3rem; box-sizing: border-box; color: #c2c2c2; display: flex; justify-content: space-between; align-items: center; height: 4.25rem;}
    .info-team .user-info { width: 4.6rem; height: 1.85rem; display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; padding: 0;}
    .info-team .avatar {width: 1.85rem; height: 1.85rem; margin: 0 0.1rem 0 0; border: 0.02rem solid #1a1a1a; }
    .info-team .avatar img {width: 100%; height: 100%; margin: 0;border: none;}
    .info-team .username {font-size:0.3rem;line-height:1.5; text-align: left; padding: 0;white-space: nowrap; width: 2.5rem; text-overflow: ellipsis; overflow: hidden; color: #d2dbd3;}
    .info-team .userid {line-height: 1.5; text-align: left; font-size: 0.3rem;white-space: nowrap; width: 2.5rem; text-overflow: ellipsis; overflow: hidden;}
    .user-status {display: flex; width: 2.5rem; height: 0.53rem; align-items: center; margin-top: 0.28rem;}
    .user-status span {display: inline-flex; height: 0.51rem; align-items: center; padding: 0 0.1rem; border: 1px solid #7a7b7b; background:rgba(0, 0, 0, 1); font-size: 0.24rem; line-height: 1; text-align: center;}
    .user-status strong {font-size: 0.4rem; color: #ca4d31; margin-left: 0.15rem;}

    .data-box {background:rgba(125,125,125,0.16);border: 0.02rem solid rgba(255,255,255,0.1); margin: 0.2rem auto 0; padding-top: 0.06rem; box-sizing: border-box;}
    .data-box h4 {width:2.9rem; background:rgba(0,0,0,0.24); margin: 0 auto; font-size: 0.3rem; height: 0.6rem; line-height: 0.6rem; text-align: center;}
    .data-box p {font-size: 0.46rem; color: #e36c33; text-align: center; font-weight: bold; line-height: 0.8rem;}

    .tips-box {width: 4.2rem; border-left: 1px solid #282a2d; box-sizing: border-box; padding-left: 0.2rem;}
    .tips-title {height: 0.7rem; font-size: 0.28rem; display: flex; color: #b7bfb9; line-height: 1.2;}
    .tips-title::before {content: ''; width: 0.03rem; height: 0.23rem; display: inline-block; background: #ca4d31; margin: 0.08rem 0.15rem 0 0;}

    .tips-content {width:100%;height: 2.5rem; overflow-y: scroll; font-size: 0.24rem; color: #d2dbd3;padding-right: 15%; box-sizing: border-box;}
    .scrollbar::-webkit-scrollbar,.taks-list ul::-webkit-scrollbar {
        width: 0.1rem;
        height: 0.1rem;
        padding: 0.1rem; box-sizing: border-box;
    } 
    .scrollbar::-webkit-scrollbar-thumb,.taks-list ul::-webkit-scrollbar-thumb { 
        margin: 0 0.05rem;
        background: #5d6064; 
    }
    .scrollbar::-webkit-scrollbar-track,.taks-list ul::-webkit-scrollbar-track { 
        border-radius: 0; 
        box-shadow: inset 0 0 0.05rem rgba(0, 0, 0, 0.2); 
        background: #35383c; 
    }
    .tips-content p{padding: 0.05rem 0;}

    .play-box {width: 9.32rem; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 auto;}
    .nobar .txp_progress_bar_container {pointer-events: none!important;}/*禁止拖动视频进度*/
    .txp_btn_playrate,.txp_ctrl_client_launcher,.txp_barrage_client_launcher,.txp_player_client_launcher {display: none!important; pointer-events: none!important;}
    .mplayer-header {display: none!important;}
    .player {width: 9.32rem!important; height: 5.25rem!important;  border:1px solid rgba(255,255,255,0.2);}
    .watermark {width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; z-index: 10;transform: translate(-50%,-50%); user-select: none; opacity: 0.2; pointer-events: none; display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between;}
    .watermark>span {padding: 0.9rem; white-space: nowrap; transform: rotate(-30deg); display: block; font-size: 0.24rem; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.7), 1px -1px 0 rgba(0, 0, 0, 0.7), -1px  1px 0 rgba(0, 0, 0, 0.7),  1px  1px 0 rgba(0, 0, 0, 0.7); color: white;}

    .player img,.player a{width: 100%; height: 100%; display: block;}
    ._mod_thumbplayer_container_ .video-img {opacity: 0;}
    .player a {position: relative;}
    .player a::before,.player a::after {position: absolute; display: block; top: 50%; left: 50%; content: ''; width: 1.53rem; height: 1.53rem; transform: scale(1) translate(-50%,-50%); transform-origin: 0 0;}
    .player a::before {width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #ca4d31; background-clip: content-box; border: 0.1rem solid rgba(202, 77, 49, 0.5);}
    .player a::after {width: 0; height: 0; border-top: 0.22rem solid transparent; border-bottom: 0.22rem solid transparent; border-left: 0.33rem solid #FFF; content: ''; margin-left: 0.05rem;}
    .demo .player {margin: 0.2rem auto;position: relative;/*width: 16.2rem; height: 8.9rem;*/}

    .operation {display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0.12rem auto 0; position: relative; padding-bottom: 1rem;}
    .operation .btn1 {width: 3.03rem; height: 0.72rem; font-size: 0.28rem;}
    .operation .btn1::before {width: 0.24rem; height: 0.32rem;}

    .exit_btn2 {min-width: 1.9rem; height: 0.63rem; padding: 0 0.1rem; font-size: 0.26rem; display: none; justify-content: center; align-items: center; color: #bebebe; font-weight: bold; cursor: pointer; box-sizing: border-box; border: 1px solid #464a4d; position: absolute; top: 0.8rem; right: 0.28rem;}
    .exit_btn2::before {content: ''; display: block; width: 0.28rem; height: 0.24rem; background: url(../img/icon3.png) no-repeat 0/100%;}
    .exit_btn2::after {content: ''; position: absolute; width: 90%; height: 0.63rem; bottom: -1px; left: 50%;border-top: 1px solid #282c2f;border-bottom: 1px solid #282c2f; box-sizing: border-box; transform: translateX(-50%); pointer-events: none;}

    .drill .data-box p,.patrol .data-box p{line-height: 1.9rem;}
    .drill-data {line-height: 1.2; font-size: 0.3rem;}
    .drill-data strong {color: #ca4d31;}
    .patrol {max-height: 11.8rem;}
    .task {padding: 0 0 0 0.25rem;}
    .taks-list {width: 9.15rem; box-sizing: border-box; color: #c2c2c2;}
    .taks-list h4 {height: 1rem;display: flex; align-items: center; font-size: 0.42rem; color: #d2dbd3;}
    .taks-list h4::before {content: ''; display: block; width: 0.03rem; height: 0.38rem; background: #ef8752;margin: 0 0.18rem 0 0.22rem;}
    .taks-list ul {max-height: 4.35rem; overflow: hidden; overflow-y: auto; box-sizing: border-box; margin-bottom: 0.5rem;}

    .taks-list li {width: 8.88rem; min-height: 1.13rem;background:rgba(117,117,117,0.2); margin: 0.2rem auto 0; display: flex; position: relative; padding: 0.07rem; box-sizing: border-box; align-items: center; user-select: none;}
    /* .taks-list li::before {position: absolute; content: ''; left: 0; top: 0; margin: 0.07rem; border: 0.02rem solid rgba(255,255,255,0.1);  width: 8rem; height: 1.36rem; box-sizing: border-box; z-index: 0; pointer-events: none;} */
    .taks-list li:nth-child(1){margin-top: 0;}
    .taks-info {width: 3.4rem; display: flex; flex-direction: column; box-sizing: border-box; padding: 0 0.2rem; position: relative;}
    .taks-info p {font-size: 0.24rem; line-height: 1.2; min-height: 0.7rem;}
    .taks-info span {font-size: 0.18rem; line-height: 1.1;}
    .task-progress {width: 1.8rem; height: 0.05rem; background: #1a1919; border: 1px solid #1a1919; margin-top: 0.02rem;}
    .task-progress div {width: 0; height: 0.05rem; background: #e36c33;}
    /* .finish div {background: #585858;} */
    .taks-gift {display: flex; justify-content: center; align-items: center; width: 2.7rem; flex-direction: column; box-sizing: border-box; padding: 0.05rem 0.2rem;}
    .taks-gift>span {display: block; text-align: center; line-height: 1.2; padding-top: 0.05rem;}
    .taks-list li img {display: block; height: 0.89rem; margin: 0 auto;}
    .taks-list li img:nth-of-type(2) {margin-left: 0.04rem;}
    .taks-btn1,.taks-btn2,.taks-finish {display: flex; min-width: 1.3rem; height: 0.53rem; line-height: 1.2; justify-content: center; align-items: center; text-align: center; color: #adadad; font-size: 0.2rem; margin: 0 auto; position: relative; z-index: 2; border:1px solid; box-sizing: border-box; padding: 0 0.1rem;}
    .taks-btn1 {background:#ca4d31; color: #e0ddd0; border-color: #a26456;}
    .taks-btn2 {background: rgba(0, 0, 0, 0.5); color: #e0ddd0;border-color: #48494a;}
    .taks-finish {background: #7a7b7b;border-color: #7a7b7b; color: #353535; pointer-events: none;}


    .notice .content {display: flex; padding: 0 0.12rem;}
    .notice-nav {width: 2.58rem; height: 7.42rem; padding: 0.28rem 0 0;}
    .notice-nav li {width: 1.98rem; height: 2.48rem; box-sizing: border-box; color: #ca4d31; font-size: 0.28rem; display: flex; justify-content: center; flex-direction: column; align-items: center;background-color: rgba(0,0,0,0.5); border: 1px solid rgba(155, 155, 155, 0.2); cursor: pointer; margin-top:-1px; filter: grayscale(1);}
    .notice-nav li img {display: block; width: 0.72rem; height: 0.89rem; object-fit: contain;}
    .notice-nav li span {display: block; line-height: 1.2; text-align: center; padding: 0.1rem 0.1rem;}
    .notice-nav li.current {filter: initial; background-color: rgba(163,66,50,0.3); position: relative; z-index: 10;}
    .notice-nav li.current::before,.notice-nav li.current::after {content: ''; position: absolute; top: -1px; right: -1px; border: 1px solid #a34232; display: block; width:0.06rem; height: 2.48rem; box-sizing: border-box;}
    .notice-nav li.current::before {border-width: 1px 0 1px 1px; left: -1px;}
    .notice-nav li.current::after {border-width: 1px 1px 1px 0;}

    .notice-main {display: none; width: 7.27rem; padding-top: 0.27rem;}
    .notice-main h4 {height: 0.77rem; width: 7.27rem; display: flex; align-items: center; font-size: 0.4rem; color: #9b9b9b;  position: relative;background: rgba(117,117,117,0.2);}
    .notice-main h4::before {content: ''; display: block; width: 0.04rem; height: 0.36rem; background: #ef8752;margin: 0 0.13rem -0.04rem 0.05rem;}
    
    .notice-main h4::after{display: block;content: ''; position: absolute; width: 100%; height: 0.02rem; overflow: hidden; background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.5); border-width: 0 0.55rem; bottom:0; left: 50%; box-sizing: border-box; transform: translate(-50%,0);}
    /* .notice-main::after {display: block;content: '';width: 100%; height: 0.02rem; overflow: hidden; background:rgba(255,255,255,0.13); border:0.1rem solid rgba(255,255,255,0.5); border-width: 0 0.1rem; box-sizing: border-box;} */
    .notice-content {height: 9.2rem; margin: 0.1rem auto; overflow: hidden; overflow-y: auto; position: relative; font-size: 0.28rem; color: #c2c2c2; padding-right: 0.2rem;}

    /* .punish {padding: 0;} */
    .notice-content h5 {padding: 0.2rem 0 0; font-size: 0.28rem;}
    .notice-content p {padding: 0.2rem 0 0 0.2rem; position: relative; box-sizing: border-box;}
    .faq {padding-left: 0}
    .faq p:nth-child(2n-1) {font-weight: bold;}
    .faq p:nth-child(2n) {padding: 0 0 0.2rem 0.2rem;}
    .faq p:nth-child(2n):after{display: block;content: ''; position: absolute; width: 100%; height: 0.02rem; overflow: hidden; background:rgba(255,255,255,0.13); border:0.1rem solid rgba(255,255,255,0.5); border-width: 0 0.5rem; bottom:0; left: 50%; box-sizing: border-box; transform: translate(-50%,0);}

    .punish-content {padding: 0.98rem 0 0; position: relative;}

    .punish-content ul {height: 8.27rem; overflow: hidden; overflow-y: auto; padding-right: 0.2rem;border: 1px solid rgba(101,103,105,0.2);}

    .punish-content ul li {font-size: 0.28rem; color: #7d7d7d;display: flex; width: 100%; height: 0.8rem; justify-content: space-between; align-items: center; box-sizing: border-box; background: rgba(0,0,0,0.5); margin: 0.04rem 0 0;border: 1px solid rgba(101,103,105,0.2); border-width: 1px 0;}
    .punish-content ul li:first-child{position: absolute; height: 0.9rem; top: 0; left: 0; background: rgba(117,117,117,0.2); font-size: 0.4rem; color: #c2c2c2; margin: 0;}
    .punish-content ul li:first-child span{color: #c2c2c2!important;}

    .punish-content ul li span {display: flex; height: 100%; align-items: center; justify-content: center; text-align: center; flex:0 0 50%; border-right: 1px solid rgba(101,103,105,0.2); line-height: 1.1;}
    .punish-content ul li span:nth-child(2) {flex:1; border: none; color: #ca4d31;}
    .punish-tips {line-height: 0.8rem; text-align: center; font-size: 0.2rem; color:#7a7b7b; text-align: right; padding-right: 0.1rem;}
    .punish::after {display: none;}

    .publicity-tab {padding: 1.25rem 0 0 0.3rem; display: flex; justify-content: space-between; height: 10.3rem;}
    .publicity {width: 8.9rem; color: #c2c2c2; font-size: 0.3rem; background: rgba(0,0,0,0.2) url(//game.gtimg.cn/images/aqtw/act/a20230427patroller/texture1.png) no-repeat 50% 8.35rem/8.34rem 0.29rem; border: 0.02rem solid rgba(255,255,255,0.2); position: relative;}
    .publicity h4 {height: 1.27rem; display: flex; align-items: center; font-size: 0.4rem;}
    .publicity h4::before {content: ''; display: block; width: 0.04rem; height: 0.36rem; background: #ef8752;margin: 0 0.13rem -0.04rem 0.4rem;}
    .publicity-content {width: 8.36rem; margin: 0 auto;height: 6.8rem; overflow: auto; position: relative;}
    .publicity-content * {font-size: inherit!important;}
    .publicity-content img {max-width: 95%; height: auto!important;}
    .publicity::after,.publicity::before {display: block;content: ''; position: absolute; width: 8.36rem; height: 0.02rem; overflow: hidden; background:rgba(255,255,255,0.13); border:0.1rem solid rgba(255,255,255,0.5); border-width: 0 0.1rem; top: 1.24rem; left: 50%; box-sizing: border-box; transform: translate(-50%,0);}
    .publicity::after {top: initial; position: initial; transform: translate(0,0); margin: 0 auto;}




/* 弹窗 */
.pop_mask_mf { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.7; z-index: 998; display: none;}
.popup {width: 9.31rem; min-height: 2.6rem; background:url(../img/pixel.png) repeat 0 0/3px 3px,url(../img/popup_bg.png) no-repeat 50% -0.62rem/9.31rem 0.75rem; background-color: #191919; margin: 0 auto 0.55rem; padding: .1rem 0.1rem 0.3rem; box-sizing: border-box;  position: fixed; display: none; top: 50%; left: 50%;z-index: 9999; transform: scale(1) translate(-50%, -50%); color: #878787;}
.close-btn {display: block;width: 0.5rem; height: 0.53rem; overflow: hidden; text-indent: -9999rem; position: absolute; top: 0; right: -0.6rem; background:url(../img/popup_bg.png) no-repeat -8.77rem 0/9.31rem 0.75rem;}
.popup::after {content: ''; position: absolute;width: 9.22rem; bottom: 0.04rem; left: 50%; transform: translateX(-50%); box-sizing: border-box; height: 0.04rem; overflow: hidden; border-left: 0.04rem solid #3d3d3d; border-right: 0.04rem solid #3d3d3d;} 

/* .popup {display: block; transform: translate(0,0); margin: 0.5rem auto; left: 20%;position: initial;}
body {overflow: initial;height: initial;} */
.popup h3 {font-size: 0.24rem; color: #878787; text-indent: 0;height: 0.8rem; display: flex; align-items: center; position: relative;}
.popup h3::before {content: ''; display: block; width: 0.22rem; height: 0.22rem; background:url(../img/popup_bg.png) no-repeat -0.15rem -0.08rem/9.31rem 0.75rem; margin: 0 0.1rem; transform: scale(1.2);}
.popup h3::after {content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width:100%; height: 0.02rem; background:url(../img/popup_bg.png) no-repeat 50% -0.59rem/9.31rem 0.75rem;}

.hide-title h3{text-indent: -9999rem; height: 0;}
.popup-content {min-height: 3.5rem; display: flex; align-items: center;flex-direction: column; justify-content: center; font-size: 0.24rem; text-align: center;}
.common .popup-content {padding: 0 0.8rem;}
.popup-content strong {color: #ef8752;}
.bs {font-size: 0.52rem; font-weight: bold; color: #ef8752;}
.common-text {font-size: 0.32rem; font-weight: bold; color: #ef8752;}
.popup .agreement {padding: 0; border: none; justify-content: center; margin: 0.2rem auto; display: flex;}
.popup .agreement label { margin-right: 0.1rem;}
.popup .agreement input:checked+label::after {top: -0.08rem;}
.popup .agreement a {display: inline; width: initial;}
.popup .agreement p {line-height: 1;}

.patrol-popup {color: #c2c2c2; font-size: 0.24rem;}

.patrol-popup h4 {padding: 0.3rem 0.4rem 0; font-weight: normal;}
.tag-box {display: flex; flex-wrap: wrap; padding: 0.1rem 0.4rem;}
.tag-box li{margin: 0.1rem 0 0 0.1rem; padding: 0 0.2rem; height: 0.6rem; position: relative; color: #ef8752; line-height: 0.6rem; text-align: center; filter: grayscale(100%); background: url(../img/tag_bg.png) no-repeat 0 0/100% 100%; border-left: 1px solid #301f1b; border-right: 1px solid #301f1b; cursor: pointer;}
.tag-box li.current {filter: grayscale(0%);}
.tag-box li::after {position: absolute; content: ''; width: 100%; height: 1px; left: 50%; transform: translate(-50%,0); top: 0; border-left: 0.02rem solid #ef8752; border-right: 0.02rem solid #ef8752; pointer-events: none;}
.tag {width: 2.62rem; height: 0.6rem; position: relative; color: #ef8752; line-height: 0.6rem; text-align: center; margin: 0.15rem 0;}
.tag::after {position: absolute; content: ''; width: 1.6rem; height: 0.06rem; left: 50%; transform: translate(-50%,0); bottom: 0.04rem; background: #ef8752;}
.popup-checkbox {width: 8.46rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content:left;}
.popup-checkbox li {min-width: 50%; box-sizing: border-box; padding: 0.1rem 0 0.1rem 0.1rem;  display: flex; align-items: center; user-select: none;}
.popup-checkbox li:nth-child(3n) {flex: 1;}
.popup-checkbox li:nth-last-child(-n+2){border:none;}

.popup-checkbox input[type="checkbox"] {display: block; width: 0.28rem; height: 0.28rem; background: url(../img/slt.png) no-repeat 0 0/0.28rem 0.56rem; appearance: none; border: none; outline: none; margin-right: 0.1rem;flex: 0 0 0.3rem;}
.popup-checkbox input[type="checkbox"]:checked {background-position: 0 bottom;}
.illegal-description {width: 8.46rem; margin: 0 auto;  border: 0.02rem solid #414343; border-radius: 0; background: none;box-sizing: border-box; font-size: 0.24rem; height: 1.28rem; outline: none; color: #c2c2c2; display: block;font-family: 'font_en';}
.popup-btn-box {display: flex; justify-content: space-between; padding: 0.2rem 0.30rem 0.1rem;}

.popup-checkbox2 {flex-direction: column;}
.popup-checkbox2 li {width: initial; height: initial; border: none;}
.popup-checkbox2 li:last-child {padding-bottom: 0.2rem;}
/* .popup-checkbox2 input[type="checkbox"]{transform: translate(0, 0.1rem);} */

.patrol-result {padding: 0.3rem 0.6rem 0;}
.patrol-result:nth-child(2n) {padding-bottom: 0.6rem;}
.patrol-result p span {color: #eeeeee;}
.patrol-result p strong {color: #ef8752; font-weight: normal;}

.fail .popup-content { align-items: flex-start; box-sizing: border-box; padding: 0 1rem;}
.fail .popup-content h4 {text-align: left;}
.fail .popup-content p {text-align: left;}


/* .popup h3.intro-title{text-indent: 0; height: 0.7rem; font-size: 0.3rem; color: #c2c2c2; text-align: center;border-bottom: 0.02rem solid #414343;} */
.intro .popup-content{text-align: left; padding: 0.3rem 0.6rem;align-items:flex-start; font-size: 0.24rem;}
.intro .popup-content p:nth-child(3) {margin-top: 0.3rem;}
.intro2 .popup-content {height: 4.5rem; overflow: auto; margin-bottom: 0.2rem; display: block; text-align: initial;}
.intro2 p {padding:0.1rem 0.6rem;font-size: 0.24rem;}
.intro2 p strong {color: #ef8752; font-weight: normal;}
.intro2 p:nth-of-type(1) {padding-top: 0.2rem;}

.demo-popup {color: #c2c2c2; font-size: 0.24rem;}
.demo-popup h3 {font-size: 0.3rem; color: #c2c2c2; text-indent: 0;height: 0.8rem; display: flex; align-items: center; border-bottom: 0.02rem solid #414343;}
.demo-popup h3::before {content: ''; display: block; width: 0.3rem; height: 0.3rem; background-position: -5.95rem -1.16rem; margin:0 0.1rem;}

.txp-watermark {display: none;}
/* .txp_progress_bar_container{} */
.txp_info_icon {pointer-events: none; display: none;}
.toast-for-result,.video-tips {position: absolute; top: 50%; left: 50%; min-width: 6.42rem; padding: 0 0.1rem; min-height: 0.93rem; line-height: 1.2; font-size: 0.28rem; display: flex; justify-content: center; align-items: center; transform: translate(-50%,-50%); color: #d2dbd3; z-index: 99999; background: url(../img/m/main_bg.png) no-repeat 50% 50%/9.6rem 13.52rem; border: 1px solid #7b7c7c; text-align: center;}
.toast-for-result {position: fixed;}

.popup-window {position: fixed; width: 100%; height: 100%; left:0; top:0; z-index: 999; display: none;}
.exit_popup-window {top: initial; bottom: 0.3rem; right: initial; position: fixed;}

.login-popup ul,.share-btn {display: flex; justify-content: space-between;padding: 0.8rem 2rem;}
.icon-wx,.icon-qq,.icon-qz,.icon-pyq {display: block;  width: 1.9rem; line-height: 0.8rem; text-align: center; color: #878787; white-space: nowrap; font-size: 0.28rem;}
.icon-wx::before,.icon-qq::before,.icon-qz::before,.icon-pyq::before{content: ''; display: block; width: 1.77rem; height: 1.67rem; box-sizing: border-box; margin: 0 auto; filter: grayscale(1) brightness(2);}
.icon-wx::before {background:url(../img/wx.png) no-repeat 50% 50%/contain;}
.icon-qq::before {background:url(../img/qq.png) no-repeat 50% 50%/contain;}
.icon-pyq::before {background:url(../img/pyq.png) no-repeat 50% 50%/contain;}
.icon-qz::before {background:url(../img/qz.png) no-repeat 50% 50%/contain;}
.copy-url {width: 7rem; height: 0.7rem; margin: 0.2rem auto 0; display: flex; align-items: center; text-align: center; font-size: 0.24rem; color: #989693; border: 0.01rem solid #878787; background: rgba(0, 0, 0, 0.2); outline: none;}

.bind-item {display: flex; justify-content: center; align-items: center; width: 6.2rem; margin: 0 auto; padding: 0.3rem 0 0;color: #b1aea8;}
.bind-item strong{display: block; width: 1.57rem; height: 0.6rem; font-size: 0.24rem; line-height: 0.6rem;  text-align: center; white-space: nowrap; background: rgba(0, 0, 0, 0.5); border: 1px solid #414343; border-right: 0;}
.bind-item span {display: flex;align-items:center;position: relative;width: 4.52rem; height: 0.6rem;line-height: 0.6rem;font-size: 0.24rem;border: 1px solid #414343; border-left: 0;padding:0 0 0 0.2rem; color: #fff;}
.bind-item span label {display: inline-flex; width: 1.5rem; height: 100%; align-items: center; color: #fff;}
.bind-item span label input {margin-right: 0.1rem;}

/* .footer {background: none; position: absolute; bottom: -1.2rem; z-index: 9999; width: 100%;justify-content: center; padding: 0;}
.footer_logo,.join_community,.link_list a {display: none!important;}
.link_list a:nth-child(1) {display: inline-block!important;}
.link_list a:nth-child(4) {display: inline-block!important;}
.link_list a.ot-sdk-show-settings {display: inline-block!important;}
.footer_copyright {border: none; text-align: center;} */

.EN .popup-checkbox li {min-width: 33.3%;}
.ZH-HANT .popup-checkbox li {min-width: 33.3%;}
.JA .index-tips {font-size: 0.28rem;}
.JA .btn1.str34 {font-size: 0.26rem;}
.JA .str34.btn1 {font-size: 0.26rem;}
.JA .str111.btn3 {font-size: 0.26rem;}
.JA .nav li {font-size: 0.26rem;}
.JA .patroller-btn,.EN .patroller-btn,.PT-BR .patroller-btn {margin-top: 1.2rem;}
.RU .patroller-btn,.DE .patroller-btn,.ES .patroller-btn,.TH .patroller-btn,.FR .patroller-btn {margin-top: 0.8rem;}

.DE .notice-nav span.str77 {font-size: 0.26rem;}