/* ---------------------------------------- css base 基础部分---------------------------------------- */
* {margin:0;padding:0; border:0;font-family:'Microsoft YaHei',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;-webkit-text-size-adjust:100%!important; user-select: none; /* 禁止长按选择文字 */
    -webkit-touch-callout: none; }
    input,textarea { user-select: auto; line-height: normal;}
html{font-size:50px;}
html,body{ width:100%; height:100%;-webkit-text-size-adjust:100%!important;}
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:#856736;}/* placeholder文字的颜色*/
a{ text-decoration:none; display:inline-block;}
a>img{ width:100%;}
sup,sub{ font-size: 60%;}
blockquote, q { quotes: none; }
.clearFix {display: block;}
.clearFix:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;}
.fl,.flt{float:left;display:inline;}
.fr,.frt{float:right;display:inline;}
.noPointer{pointer-events:none;}/* 禁止触摸互动事件 */
.noCallout{-webkit-touch-callout: none;}/*禁用长触弹出的下载图片菜单*/
.noSelect{-webkit-user-select:none;}/*禁用长触选择文字等功能*/
.gpuOpen{will-change:transform,opacity;}
.gpuClose{will-change:auto;}
.moving{ will-change:transform;}
.smoothSlide {-webkit-overflow-scrolling: touch;}/* ios设备平滑滚动 */
.txtShadow{ text-shadow: 0 0 0.01rem #000, 0 0 0.01rem #000; }
.aniStop{animation-play-state: paused;}
.aniPlay{ animation-play-state: running;}
.overScroll{ overflow-y:scroll; -webkit-overflow-scrolling: touch;}
.layer{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.contv{position: absolute;left: 0;width: 100%;top:50%;-webkit-transform:translate(0,-50%);}
.opacity0 {opacity: 0;pointer-events: none;height: 0;transition: opacity .5s,height 0s .5s;overflow: hidden;}/*样式控制透明度 避免用display：none 导致的过度动画第一次不执行*/
.opacity1 {pointer-events: all;height: 100%;transition: opacity .5s,height 0s 0s;opacity: 1}
.posa{position: absolute;width: 100%;height: 100%;left: 0;top:0;}
.fill{width: 100%;height: 100%;}

@font-face {
    font-family: 'SourceHanSansCN';
    src: url('https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/font/SourceHanSansCN-VF.otf');
}
div,ul,li,span,p{font-family: 'SourceHanSansCN';}

/* ---------------------------------------- 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:1.1rem 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(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/common/turn_yes.png); opacity: 0; animation: turnYes 3.2s linear infinite both;}
aside.turnBoxPortrait>div.phone i.no{ background-image: url(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/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(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/common/turn_unlock.png); animation: turnLock1 3.2s linear infinite both;}
aside.turnBoxLandscape>div.lock span:nth-child(2){ background-image: url(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/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(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/common/turn_yes.png); opacity: 0; animation: turnYes 3.2s linear infinite both;}
aside.turnBoxLandscape>div.phone i.no{ background-image: url(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/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);}
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;}
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;}

/* 系统confirm弹窗 */
aside.confirmBox{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:998;}
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;}

/* 视频 */
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(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/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:997; display:none;}
aside.shareBox>img{ position: absolute; right: 0.4rem; top: 0.6rem; width: 0.9rem; height: 1rem; animation: shareAr 1s ease infinite alternate;}

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

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

/* 背景音乐按钮 */
a.bgmBtn{ position: fixed; right: 0.24rem; top: 0.24rem; width: 0.58rem; height: 0.58rem; z-index: 9;animation: rotate 5s infinite linear;}
a.bgmPlay{ background-image: url(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/common/bgm_on.png);animation-play-state: running;}
a.bgmStop{ background-image: url(https://moyinghui.oss-cn-shanghai.aliyuncs.com/trico/common/bgm_off.png);animation-play-state: paused;}

@keyframes rotate{
	from{}
	to{transform:rotate(360deg)}
}

/* fps */
#fpsShow{position: fixed; left: 0.1rem; top: 0.1rem; width: 0.9rem; height: 0.36rem; font-size: 0.24rem; background-color: black; display: flex; justify-content: center; align-items: center; pointer-events: none;}
.fpsFast{ color: greenyellow;}
.fpsNormal{ color: yellow;}
.fpsSlow{ color: red;}

/* iphoneX 竖屏底下的安全高度 */
.iphoneXFullPortrait{ height: calc( 100% - 0.7rem );}



/*弹性布局*/

.flex {
    display: -webkit-flex;
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-item {
    -webkit-flex: 1;
    flex: 1;
}

.flex-item-1 {
    -webkit-flex: 1;
    flex: 1;
}

.flex-item-2 {
    -webkit-flex: 2;
    flex: 2;
}

.flex-row {
    -webkit-flex-flow: row;
    flex-flow: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.flex-column {
    -webkit-flex-flow: column;
    flex-flow: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.flex-left {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.flex-right {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.flex-center {
    -webkit-justify-content: center;
    justify-content: center;
}

.flex-between {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flex-around {
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.flex-top {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.flex-middle {
    -webkit-align-items: center;
    align-items: center;
}

.flex-bottom {
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.flex-baseline {
    -webkit-align-items: baseline;
    align-items: baseline;
}

.flex-stretch {
    -webkit-align-items: stretch;
    align-items: stretch;
}

.flex-content-center {
    -webkit-align-content: center;
    align-content: center;
}

/* 1行超出截断 */

.line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
}

/* 2行超出截断 */

.line2, .line3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 3行超出截断 */

.line3 {
    -webkit-line-clamp: 3;
}

.hide{display: none;}

/* 初始化标签*/
body{ background-color:#fff;}
/* article{ background-color:#fff; width:100%; height: 100%; overflow-x: hidden; transform-origin: 0 0;} */
/* article::-webkit-scrollbar{} */