html{ font-family:sans-serif; -webkit-text-size-adjust:100%; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{ display:block; }
audio,canvas,progress,video{ display: inline-block; vertical-align:baseline; }
audio:not([controls]){ display:none; height:0; }
[hidden],template{ display:none; }
a{ background:transparent; }
a:active,a:hover { outline:0; }
abbr[title]{ border-bottom:1px dotted; }
b,strong{ font-weight:bold; }
dfn{ font-style:italic; }
h1{ font-size:2em; }
mark{ background:#ff0; }
small{ font-size:80%; }
sub,sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
sup{ top:-.5em; }
sub{ bottom:-.25em; }
img,i{vertical-align:middle;}
img{ border:0;}
svg:not(:root){ overflow:hidden; }
figure{ margin:1em 40px; }
hr{ box-sizing:content-box; height:0; }
pre{ overflow:auto; }
code,kbd,pre,samp{ font-family:monospace, monospace; font-size:1em; }
button,input,optgroup,select,textarea{ font:inherit; margin:0; color:inherit; }
button{ overflow:visible; }
button,select{ text-transform:none; }
button,html input[type='button'],input[type='reset'],input[type='submit']{ cursor:pointer; -webkit-appearance:button; }
button[disabled],html input[disabled]{ cursor:default; }
input{ line-height:normal; }
input[type='checkbox'],input[type='radio']{ box-sizing:border-box; padding:0; }
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button{height:auto;}
input[type='search']{ -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-appearance:textfield; }
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance:none; }
fieldset{ margin:0 2px; padding:.35em .625em .75em; border:1px solid #c0c0c0; }
legend{ padding:0; border:0;}
textarea{ overflow:auto; }
optgroup{ font-weight:bold; }
table{ border-spacing:0; border-collapse:collapse; }
td,th{ padding:0; }
ul{list-style:none;}
*{margin:0; padding:0;-webkit-tap-highlight-color:transparent; -webkit-backface-visibility:hidden; box-sizing:border-box; -webkit-overflow-scrolling:touch;}
body{-webkit-overflow-scrolling:touch;}
a{ text-decoration:none; color:inherit;} a:active{ color:inherit;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance:none;}
input[type="number"]{-moz-appearance:textfield;}

html,body,#app, .common-layout, .el-container, .bat-box{position:relative; width:100%; height:100%;}
body{display:flex; align-items:flex-start; justify-content:center;}
#bat{position:relative; width:100%; height:100%; max-width:751px;}

.mw, .mh{position:relative;}
.mw{width:100%;}
.mh{height:100%;}

.m-left{display:flex; align-items:center; justify-content:flex-start;}
.flex-center-ctn{display:flex; align-items:center; justify-content:center;}
.flex-center-spb{display:flex; align-items:center; justify-content:space-between;}
.flex-start-str{display:flex; align-items:flex-start; justify-content:flex-start;}
.flex-center-str{display:flex; align-items:center; justify-content:flex-start;}
.flex-center-end{display:flex; align-items:center; justify-content:flex-end;}
.flex-end-end{display:flex; align-items:flex-end; justify-content:flex-end;}

.m-scroll{overflow-y:auto;}
/*滚动条整体部分*/
.m-scroll::-webkit-scrollbar,
.is-light::-webkit-scrollbar{width:6px; height:10px; background-color:#9D9D9D; border-radius:15px;}
/*scroll轨道背景*/
.m-scroll::-webkit-scrollbar-track,
.is-light::-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,
.is-light::-webkit-scrollbar-thumb{border-radius:15px; -webkit-box-shadow:inset 0 0 6px rgba(213,213,213,.5); background-color:#dadbdc; }

.bat-not-p{padding:12px; font-size:14px; color:#868686;}

/*.bat-con{padding-bottom:240px;}*/
.bat-content h1{margin-bottom:12px; font-size:20px;}
.bat-title{font-size:20px; transition:all 1s;}
#bat-pc-text{font-size:14px; color:#868686; margin-top:10px;}
#bat-pc-text p{margin-bottom:10px;}
.bat-content p, .bat-footer p, .bat_hint{font-size:14px; color:#666;}
.bat-content p{padding-top:12px;}
.bat-content img{max-width:100%; max-height:90%;}
.bat-content video{width:100%; max-width:414px; aspect-ratio:1/1; max-height:414px; object-fit:cover; background-color:rgba(243, 244, 248, 1);}

.bat-content{height:414px; display:flex; align-items:flex-end; justify-content:center;}
.bat-con{display:flex; align-items:center; justify-content:space-between; flex-direction:column;}

.bat-empty{height:200px; background-color:#fff;}

.bat-footer{position:fixed; left:0; bottom:0; padding:16px 12px 24px 12px; height:200px; background-color:#fff; font-size:14px;}
.bat-footer-content{max-width:1024px; width:100%; display:flex; align-items:center; justify-content:space-between; flex-direction:column;}
.bat-footer-save>a{color:#006FFA; text-decoration:underline;}
.bat-footer-btn{text-align:center;}
.bat-footer-explain{padding-top:12px; font-size:12px; color:#666;}
.bat-footer-button{text-align:center; padding:0 12px; flex-shrink:0; width:50%;}
.bat-footer-button button, .bat-footer-btn button{outline:none; width:calc(100% - 12px); padding:14px 0; border-radius:50px; font-size:16px;
    background-color:rgba(0,0,0, .2); color:#333; border:1px solid rgba(0,0,0, .2);}
.bat-footer-btn{flex-direction:column; gap:20px;}
.bat-footer-btn button{background-color:#006FFA; color:#fff; font-size:16px; width:calc(100% - 50px); gap:10px; max-width:320px;}
.bat-footer-handle{width:calc(100% - 50px); max-width:320px;}
.bat-footer-btn a{font-size:14px; color:#006FFA; text-decoration:underline; font-weight:600;}
.bat-footer-button button.bat-button-primary{background-color:#006FFA; color:#fff;}
.bat-footer-con{max-width:1024px;}
#bat-save-tutorial{text-align:center; padding:24px 0;}
#bat-save-tutorial span:nth-child(1){color:#006FFA; text-decoration:underline;}

.bat-footer-save-pc{display:inline-block; text-align:center; flex-shrink:0; outline:none; width:400px; padding:14px 0; border-radius:50px; font-size:16px;
    background-color:#006FFA; color:#fff; }
.bat-footer-save-pc a{color:#fff; text-decoration:none;}

.bat-popup-mask{position:fixed; left:0; bottom:0; width:100%; height:100%; z-index:9; background-color:rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:all .3s;}
.bat-popup{position:fixed; left:0; bottom:-600px; padding:16px 16px 24px 16px; background-color:#fff; z-index:10; border-radius:24px 24px 0 0; transition:all .3s;}
.bat-popup-content{max-width:1024px; width:100%;}
.bat-popup-content h4{text-align:center; margin-bottom:20px;}
.bat-popup-content p{font-size:14px; margin-bottom:10px; color:#868686;}
.bat-popup-btn{outline:none; border:0; padding:8px 30px; border-radius:50px; background-color:#006FFA; color:#fff; margin-top:20px;}

/*video::-webkit-media-controls{display:none !important;}*/

@media screen and (max-width: 750px) {
    #bat-pc-text, .bat-pc{display:none;}
    .bat-model{display:block;}
    #bat{background-color:#fff;}
    .bat-title{text-align:center; color:rgba(0,0,0,0); background-color:rgba(243, 244, 248, 1); padding:14px 26px 0 26px;}
    .bat-content, .bat-con{background-color:rgba(243, 244, 248, 1);}
    .bat-footer-crn{justify-content:space-between;}
}

@media screen and (min-width: 751px) {
    .bat-model{display:none;}
    #bat-pc-text, .bat-pc{display:block;}
    #bat{padding:16px; background-color:#fff;}
    .bat-content{height:460px;}
    .bat-content video{border-radius:16px;}
    .bat-footer-crn{justify-content:center;}
}