*{margin:0; padding:0; box-sizing:border-box;}
ul {list-style:none;}
html, body, #bat{position:relative; width:100%; height:100%; font-size:14px; background-color:#fff;}
.bat-mw, .bat-mh {position:relative;}
.bat-mw{width:100%;}
.bat-mh{height:100%;}
.flex-center-ctn{display:flex; align-items:center; justify-content:center;}
.bat-center-between{display:flex; align-items:center; justify-content:space-between;}
.bat-center-end{display:flex; align-items:center; justify-content:flex-end;}
.bat-end-center{display:flex; align-items:flex-end; justify-content:center;}
.bat-font-16{font-size:16px;}
.bat-mt-12{margin-top:12px;}
.bat-mt-24{margin-top:24px;}

.bat-container, .bat-download-con{max-width:1000px; padding:10px 16px;}
.bat-download-con{background-color:#fff; text-align:center; padding:10px 16px 20px 16px;}
.bat-container{padding-bottom:92px; overflow-y:auto; overflow-x:hidden;}
.bat-model{border-radius:6px; padding:0 10px; background-color:rgba(0, 111, 250, 0.1); font-weight:600;}
.bat-model span{padding:13px 0;}
.bat-phone-model{color:#006FFA; flex-shrink:0; width:calc(100% - 65px); text-align:right;}
#bat-phone-model{display:inline-block; width:calc(100% - 20px);}
.bat-stepper li{width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:4px solid #ACB2BB;
    margin-right:40px; background-color:#ACB2BB; color:#fff; font-weight:600; font-size:16px; position:relative; transition:all .3s;}
.bat-stepper li:after{content:""; position:absolute; right:-44px; width:44px; height:4px; background-color:rgba(172, 178, 187, 0.6);}
.bat-stepper li:nth-last-child(1){margin:0;}
.bat-stepper li:nth-last-child(1):after{width:0; height:0; right:0;}
.bat-stepper li.bat-step-curr,
.bat-stepper li.bat-stepper-past{border:4px solid #006FFA; background-color:#fff; color:#006FFA;}
.bat-stepper li.bat-stepper-past{background-color:#006FFA; border:4px solid #006FFA; color:#fff; }
.bat-stepper li.bat-step-curr:after, .bat-stepper li.bat-stepper-past:after{background-color:#006FFA;}
.bat-step-explain{height:42px;}
.bat-step-txt{display:inline-block; font-weight:600; width:312px; padding:0 6px; text-align:left;}
.bat-swiper{display:flex; transition:all .3s;}
.bat-swiper-item{flex-shrink:0; margin-right:16px;}
.bat-swiper-item:nth-last-child(1){margin-right:0;}
.bat-swiper-item img{height:94%;}
.bat-tutorial{background-color:#E3EEFE; height:420px; border-radius:25px;}


.bat-download{position:fixed; width:100%; bottom:0; left:0;}
.bat-download-btn{outline:none; border:0; font-size:16px; color:#fff; background-color:#006FFA; padding:20px 0; border-radius:30px; max-width:366px;}


.bat-moving-loading{position:absolute; top:0; left:0; z-index:1}
.bat-check{position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); z-index:1006; display:flex; align-items:center; justify-content:center;}
.bat-graphic{ padding:16px 12px; border-radius:4px; background-color:#fff; }
.bat-graphic-header{ padding-bottom:10px; display:flex; align-items:center; justify-content:flex-start; }
.bat-graphic-body{ position:relative; border-radius:4px; overflow:hidden; width:300px; height:220px; cursor:pointer;}
.bat-graphic-footer{ padding-top:10px; display:flex; align-items:center; justify-content:space-between; }
.bat-graphic-handle{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; }
.bat-graphic-handle span{ user-select:none; cursor:pointer; }
.bat-graphic-btn{ font-size:12px; color:#fff; outline:none; border:0; background-color:#006FFA; transition:all .2s;
    padding:10px 26px; border-radius:4px; cursor:pointer; }
.bat-graphic-btn:active{ background-color:#015FF6; }
#bat-graphic-body span{ position:absolute; z-index:2; display:flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:20px; font-size:12px; background-color:rgba(255,255,255,.8);}
#bat-graphic-header__img{width:150px; height:40px;}
#bat-gb{width:300px; height:220px; user-select:none; pointer-events: none;}
#bat-save-tutorial{text-align:center;}
#bat-save-tutorial a{color:#015FF6; text-decoration:underline;}

.m-scroll{
    overflow-y: auto;
}

.m-scroll::-webkit-scrollbar{
    width: 6px;
    height: 10px;
    background-color: #9d9d9d;
    border-radius: 15px;
}
.m-scroll::-webkit-scrollbar{
    width: 0;
    height: 0;
}

.m-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(232, 233, 239, 1);
    border-radius: 15px;
    background-color: #f9f9f9;
}

.m-scroll::-webkit-scrollbar-thumb{
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(213, 213, 213, 0.5);
    background-color: #dadbdc;
}

#bat-pc-tutorial-pic{text-align:center;}
#bat-pc-tutorial-pic img{max-width:100%; max-height:560px;}

@media screen and (max-width: 1000px) {
    #bat-pc-tutorial-pic, #bat-pc-tutorial{display:none;}
}

@media screen and (min-width: 1001px) {
    #bat-phone-model-con{padding-top:16px;}
    #bat-stepper{display:none;}
    #bat-swiper{display:none; transform:translate3d(0px, 0px, 0px) !important;}
    .bat-step-explain{align-items:center; justify-content:flex-start;}
    .bat-tutorial{height:600px;}
    .bat-mt-12{margin:0;}
    .bat-step-txt{width:100%; line-height:24px; padding:0;}
    /*.bat-download{display:none;}*/
}