/* ---------------------------------------- css base 基础部分---------------------------------------- */
* {margin:0;padding:0; border:0; word-break:break-word; font-family:'arial'; background-position: 50% 50%; background-repeat: no-repeat; background-size:100% 100%; background-origin: padding-box; background-clip: padding-box; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-tap-highlight-color: rgba(0,0,0,0); font-size: 0.22rem; line-height: 1; box-sizing: border-box; position: relative; }
html{font-size:50px;}
html,body{ width:100%; height:100%;}
body{text-size-adjust: 100% !important; -webkit-text-size-adjust: 100% !important; transform-origin: 0 0;}
::before,::after{ background-size: 100% 100%; background-repeat: no-repeat; background-position: 50% 50%; box-sizing: border-box;}
table{border-collapse:collapse;border-spacing:0;}
th,tr,td,h1,h2,h3,h4,h5,h6,i,b,em{font-style:normal;font-weight:normal;}
ol,ul,li {list-style-type:none; display:block;}
select,input,img{vertical-align:middle;border:none;outline:none;}
textarea {resize: none;} /*webkit核心中textare取消拖动调整大小*/
textarea:focus {outline: none;} /*textarea聚焦时默认边框颜色不变*/
select,input[type=text],input[type=tel],input[type=password],input[type=number],textarea{ -webkit-appearance:none; border:none; border-radius:0; background-color:transparent; font-family: arial; }
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#888;}/* placeholder文字的颜色*/
video{ background-color:#000;}
a{ text-decoration:none; display:inline-block;}
.noPointer{pointer-events:none;}/* 禁止触摸互动事件 */
.noCallout{-webkit-touch-callout: none;}/*禁用长触弹出的下载图片菜单*/
.noSelect{-webkit-user-select:none;}/*禁用长触选择文字等功能*/
.gpuOpen,.moving{will-change:transform,opacity;}
.txtOutline{ text-shadow: 1px 0 0 #000,-1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
.txtOverflow{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* ---------------------------------------- css common 公共部分 ---------------------------------------- */

/* 竖屏翻转提示浮层 */
aside.turnBoxPortrait{ position:fixed; left:0; top:0; width:100%; height:100%; background:#000; z-index:999; display: none;}
aside.turnBoxPortrait>div.phone{ width: 0.6rem; height: 1.2rem; margin:0.8rem auto 0; animation: turnPhone 3.2s linear infinite both; position: relative;}
aside.turnBoxPortrait>div.phone img{ width: 100%; height: 100%;}
aside.turnBoxPortrait>div.phone i{ position: absolute; left: 50%; top: 0.48rem; width: 0.3rem; margin-left: -0.15rem; height: 0.225rem;}
aside.turnBoxPortrait>div.phone i.yes{ background-image: url(../images/common/turn_yes.png); opacity: 0; animation: turnYes 3.2s linear infinite both;}
aside.turnBoxPortrait>div.phone i.no{ background-image: url(../images/common/turn_no.png); opacity: 0; animation: turnNo 3.2s linear infinite both;}
aside.turnBoxPortrait>p{ text-align:center; font-size:0.22rem; color:#fff; margin-top: 0.2rem;}

@-webkit-keyframes turnPhone{
	0%{ transform: rotate(-90deg); }
	35%{ transform: rotate(-90deg);}
	50%{transform: rotate(0deg);}
	85%{transform: rotate(0deg);}
	100%{ transform: rotate(-90deg);}
}

@-webkit-keyframes turnYes{
	0%{ transform: scale(0); opacity: 0;}
	50%{ transform: scale(0); opacity: 0;}
	54%{ transform: scale(1.15); opacity: 1;}
	58%{ transform: scale(0.85); opacity: 1;}
	62%{ transform: scale(1); opacity: 1;}
	80%{ transform: scale(1); opacity: 1;}
	85%{ transform: scale(0); opacity: 0;}
	100%{ transform: scale(0); opacity: 0;}
}

@-webkit-keyframes turnNo{
	0%{ transform: scale(0); opacity: 0;}
	4%{ transform: scale(1.15); opacity: 1;}
	8%{ transform: scale(0.85); opacity: 1;}
	12%{ transform: scale(1); opacity: 1;}
	30%{ transform: scale(1); opacity: 1;}
	35%{ transform: scale(0); opacity: 0;}
	100%{ transform: scale(0); opacity: 0;}
}


/* 竖屏锁定提示浮层 */
aside.turnBoxLandscape{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,1); z-index:10999; display: none;}
aside.turnBoxLandscape>div.lock{ margin: 1.0rem auto 0; width: 1rem; height: 1rem; background-color: #fff; border-radius: 0.3rem; position: relative; animation: turnLock 3.2s linear infinite both;}
aside.turnBoxLandscape>div.lock span{position: absolute; left: 0.2rem; top: 0.2rem; width: 0.6rem; height: 0.6rem;}
aside.turnBoxLandscape>div.lock span:nth-child(1){ background-image: url(../images/common/turn_unlock.png); animation: turnLock1 3.2s linear infinite both;}
aside.turnBoxLandscape>div.lock span:nth-child(2){ background-image: url(../images/common/turn_lock.png); animation: turnLock2 3.2s linear infinite both;}
aside.turnBoxLandscape>div.sign{ margin-top: 0.2rem; width: 100%; height: 0.32rem; position: relative;}
aside.turnBoxLandscape>div.sign span{ position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-size:0.32rem; color: #fff;}
aside.turnBoxLandscape>div.sign span:nth-child(1){ animation: turnSign1 3.2s linear infinite both;}
aside.turnBoxLandscape>div.sign span:nth-child(2){ animation: turnSign2 3.2s linear infinite both;}
aside.turnBoxLandscape>div.phone{ width: 1.2rem; height: 2.4rem; margin:-0.2rem auto 0; position: relative; transform: rotate(-90deg);}
aside.turnBoxLandscape>div.phone img{ width: 100%; height: 100%;}
aside.turnBoxLandscape>div.phone i{ position: absolute; left: 50%; top: 0.96rem; width: 0.6rem; margin-left: -0.3rem; height: 0.45rem;}
aside.turnBoxLandscape>div.phone i.yes{ background-image: url(../images/common/turn_yes.png); opacity: 0; animation: turnYes 3.2s linear infinite both;}
aside.turnBoxLandscape>div.phone i.no{ background-image: url(../images/common/turn_no.png); opacity: 0; animation: turnNo 3.2s linear infinite both;}
aside.turnBoxLandscape>p{ text-align:center; font-size:0.48rem; color:rgba(255,255,255,0.65); margin-top: 0.2rem;}

@-webkit-keyframes turnLock{
	0%{ transform: scale(1);}
	40%{ transform: scale(1);}
	45%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	90%{ transform: scale(1);}
	95%{ transform: scale(1.2);}
	100%{ transform: scale(1);}
}


@-webkit-keyframes turnLock1{
	0%{ transform: rotate(0); opacity: 1;}
	40%{ transform: rotate(0);  opacity: 1;}
	45%{ transform: rotate(0); opacity: 0.5;}
	50%{ transform: rotate(0); opacity: 0;}
	90%{ transform: rotate(0); opacity: 0;}
	100%{ transform: rotate(360deg); opacity: 1;}
}

@-webkit-keyframes turnLock2{
	0%{ transform: rotate(0); opacity: 0;}
	40%{ transform: rotate(0); opacity: 0;}
	45%{ transform: rotate(0); opacity: 0.5;}
	50%{ transform: rotate(0)); opacity: 1;}
	53%{ transform: rotate(-8deg); opacity: 1;}
	56%{ transform: rotate(6deg); opacity: 1;}
	59%{ transform: rotate(-4deg); opacity: 1;}
	62%{ transform: rotate(4deg); opacity: 1;}
	65%{ transform: rotate(0); opacity: 1;}
	90%{ transform: rotate(0); opacity: 1;}
	100%{ transform: rotate(360deg); opacity: 0;}
}

@-webkit-keyframes turnSign1{
	0%{ opacity: 1;}
	45%{ opacity: 1;}
	50%{ opacity: 0;}
	90%{ opacity: 0;}
	95%{ opacity: 1;}
	100%{ opacity: 1;}
}

@-webkit-keyframes turnSign2{
	0%{  opacity: 0;}
	45%{ opacity: 0;}
	50%{ opacity: 1;}
	90%{ opacity: 1;}
	95%{ opacity: 0;}
	100%{ opacity: 0;}
}

@-webkit-keyframes turnYes{
	0%{ transform: scale(0) rotate(90deg); opacity: 0;}
	50%{ transform: scale(0) rotate(90deg); opacity: 0;}
	54%{ transform: scale(1.15) rotate(90deg); opacity: 1;}
	58%{ transform: scale(0.85) rotate(90deg); opacity: 1;}
	62%{ transform: scale(1) rotate(90deg); opacity: 1;}
	80%{ transform: scale(1) rotate(90deg); opacity: 1;}
	85%{ transform: scale(0) rotate(90deg); opacity: 0;}
	100%{ transform: scale(0) rotate(90deg); opacity: 0;}
}

@-webkit-keyframes turnNo{
	0%{ transform: scale(0); opacity: 0;}
	4%{ transform: scale(1.15); opacity: 1;}
	8%{ transform: scale(0.85); opacity: 1;}
	12%{ transform: scale(1); opacity: 1;}
	30%{ transform: scale(1); opacity: 1;}
	35%{ transform: scale(0); opacity: 0;}
	100%{ transform: scale(0); opacity: 0;}
}


/* load浮层 */
aside.loadBox{ position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:996; display: none;}
aside.loadBox>span{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(0.46); margin-left: -0.15rem;}
aside.loadBox>span i{ position:absolute; left:0; top:0; width:0.4rem; height:0.1rem; border-radius:0.08rem; background-color:rgba(255,255,255,0.5); box-shadow:0 0 0.1rem rgba(255,255,255,1);}
aside.loadBox>span i:nth-child(1){ transform:translate(0.6rem, 0) rotate(0deg); animation:loadCircle 2.4s 0s linear infinite;}
aside.loadBox>span i:nth-child(2){ transform:translate(0.5196rem, 0.3rem) rotate(30deg); animation:loadCircle 2.4s 0.2s linear infinite;}
aside.loadBox>span i:nth-child(3){ transform:translate(0.3rem, 0.5196rem) rotate(60deg); animation:loadCircle 2.4s 0.4s linear infinite;}
aside.loadBox>span i:nth-child(4){ transform:translate(0, 0.6rem) rotate(90deg); animation:loadCircle 2.4s 0.6s linear infinite;}
aside.loadBox>span i:nth-child(5){ transform:translate(-0.3rem, 0.5196rem) rotate(120deg); animation:loadCircle 2.4s 0.8s linear infinite;}
aside.loadBox>span i:nth-child(6){ transform:translate(-0.5196rem, 0.3rem) rotate(150deg); animation:loadCircle 2.4s 1.0s linear infinite;}
aside.loadBox>span i:nth-child(7){ transform:translate(-0.6rem, 0) rotate(180deg); animation:loadCircle 2.4s 1.2s linear infinite;}
aside.loadBox>span i:nth-child(8){ transform:translate(-0.5196rem, -0.3rem) rotate(210deg); animation:loadCircle 2.4s 1.4s linear infinite;}
aside.loadBox>span i:nth-child(9){ transform:translate(-0.3rem, -0.5196rem) rotate(240deg); animation:loadCircle 2.4s 1.6s linear infinite;}
aside.loadBox>span i:nth-child(10){ transform:translate(0, -0.6rem) rotate(270deg); animation:loadCircle 2.4s 1.8s linear infinite;}
aside.loadBox>span i:nth-child(11){ transform:translate(0.3rem, -0.5196rem) rotate(300deg); animation:loadCircle 2.4s 2.0s linear infinite;}
aside.loadBox>span i:nth-child(12){ transform:translate(0.5196rem, -0.3rem) rotate(330deg); animation:loadCircle 2.4s 2.2s linear infinite;}
@-webkit-keyframes loadCircle{0%{opacity:1}8.3%{opacity:0}50%{opacity:1}100%{opacity:1}}

/* 取代系统alert的弹窗 */
aside.alertBox{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:998; display: block;}
aside.alertBox>div{ position: absolute; left: 50%; top: 50%; width:85%; transform: translate(-50%,-50%); background-color:#FAFAFC; border-radius:0.07rem; padding-top: 0.46rem;}
aside.alertBox>div>p.text{font-size:0.3rem; line-height: 1.4; color:#888; padding: 0 0.46rem 0; margin-bottom: 0.46rem; text-align:center; }
aside.alertBox>div>p.btn{ text-align: center; border-top: 1px solid #D5D5D6; }
aside.alertBox>div>p.btn a{ color:#0BB20C; font-size:0.4rem; line-height: 1rem; display: block;}
aside.alertBox>div>p.btn a:active{ background-color: #eeeeee;}
body.landscape aside.alertBox>div{width:60%;}

/* 系统confirm弹窗 */
aside.confirmBox{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:998; display: block;}
aside.confirmBox>div{ position: absolute; left: 50%; top: 50%; width:85%; transform: translate(-50%,-50%); background-color:#FAFAFC; border-radius:0.07rem; padding-top: 0.46rem;}
aside.confirmBox>div>p.text{font-size:0.3rem; line-height: 1.4; color:#888; padding: 0 0.46rem 0; margin-bottom: 0.46rem; text-align:center; }
aside.confirmBox>div>p.btn{ border-top: 1px solid #D5D5D6; display: flex; align-items: center; justify-content: center; }
aside.confirmBox>div>p.btn a{ color:#0BB20C; font-size:0.4rem; line-height: 1rem; text-align: center; flex: 1;}
aside.confirmBox>div>p.btn a:active{ background-color: #eeeeee;}
aside.confirmBox>div>p.btn a:first-child{ border-right: 1px solid #D5D5D6;}
body.landscape aside.confirmBox>div{width:60%;}

/* 视频 */
aside.videoBox{position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; z-index:996; display:none;}
aside.videoBox>iframe,aside.videoBox>video{position:absolute; left:0; top: 0; object-fit: fill;}
aside.videoBox>a.close{ position:absolute; right:0.46rem; top:0.46rem; width:0.7rem; height:0.7rem; background-image: url(../images/common/close_video.png);}

/* 分享浮层 */
aside.shareBox{position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); z-index:10; display:none;}
aside.shareBox>img{ position: absolute; right: 0.4rem; top: 0.4rem; width: 6.4rem; height: 1.76rem; animation: shareAr 1s ease infinite alternate;}

@-webkit-keyframes shareAr{
	from{ transform: translate(0,0);}
	to{transform: translate(0.1rem,-0.2rem);}
}

/* 打开图片按钮 */
input[name=imageInput]{ position:absolute; left:0; top:0; width:1; height:1; opacity: 0; overflow: hidden; display: none;}

/* 背景音乐按钮 */
a.bgmBtn{ position: absolute; left: 0; top: 0; width: 1rem; height: 1rem; z-index: 9;}
a.bgmBtn i{ display: block; width: 100%; height: 100%; background-size: 0.5rem 0.5rem; background-position: 0.1rem 0.3rem; background-image: url(../images/common/bgm_off.png);}
a.bgmBtn i.play{ background-image: url(../images/common/bgm_on.png);}


/* 容器 */
article{width:100%;height:100%;overflow-x:hidden;transform-origin:0 0;}
section{position:absolute;left:0;top:0;width:100%;height:100%;}
aside{position:absolute;left:0;top:0;width:100%;height:100%;}