html,body{width: 100%;height: 100%; overflow:hidden; background-color:#000; margin:0rem; padding:0rem;  font-size:0.1rem; }
ul,li,ol,dl,dd,dt,a,img,h1,h2,h3,h4,h5,h6,h7,h8,p,div,option{margin: 0rem;padding: 0rem;list-style: none; font-size:0.1rem; line-height:150%; webkit-backface-visibility: hidden; }
.clearAppr{appearance:none; -moz-appearance:none; -webkit-appearance:none;}
/* 穿透该层 */
.pointEvent{  pointer-events:none; }
.nowarp{word-wrap:normal;word-break:keep-all;white-space:nowrap;} 
*{  -webkit-tap-highlight-color:transparent;  }
.imgbg{display: block; width: 100%; }
 

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} 
.swiper-container {  width: 100%; height: 100%; }

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: #dfd4c6;
}
::-moz-placeholder { /* Firefox 19+ */  
    color: #dfd4c6;
}
:-ms-input-placeholder { /* IE 10+ */ 
 color: #dfd4c6;
}
:-moz-placeholder { /* Firefox 18- */ 
 color: #dfd4c6;
}
@font-face{
    font-family: 'Roboto';  
    src:url('../fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
}
@font-face{
    font-family: 'Roboto';  
    src:url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
}
@font-face{
    font-family: 'Roboto';  
    src:url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
} 
@font-face{
    font-family: 'Roboto';  
    src:url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
} 
@font-face{
    font-family: 'Roboto';  
    src:url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
} 
@font-face{
    font-family: 'Roboto';  
    src:url('../fonts/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
}

*{font-family: "Roboto"; font-weight: 400;}

 
#mainbody{position:absolute;top:0rem;left:0;width:100%;right:0;bottom:0; overflow:hidden; z-index:2;    } 

.frame{width: 100%; height: 100%; overflow: hidden; border: none; background-color: #000;}
.mainui{width: 100%; height: 100%; pointer-events: none; position: absolute; left:0; top:0; z-index: 100000; display: block;}


.loading{width: 100%; height: 100%; background:#d8e0ea url(../images/loading_bg.jpg) no-repeat; background-size: 100% 100%; position: absolute; left:0; top:0; z-index: 200; display: block;  }
.loading .content{width: 3.92rem; height: 2.16rem; position: absolute; top:50%; left:50%; transform: translateY(-50%) translateX(-50%);   text-align: center;}
.loading .content .text{width: 100%; height: 0.53rem; line-height: 0.53rem; font-size: 0.36rem; font-weight: 400; color: #171616; }
.loading .content .text2{width: 100%; height: 0.50rem; line-height: 0.50rem; font-size:0.33rem;  font-weight:900; color: #171616; word-break: keep-all; white-space:nowrap;    }
.loading .content .progress-box{width: 1.5rem; height: 0.06rem; background-color: #c4c9cd; margin: 0px auto; border-radius: 0.06rem; margin-top: 0.16rem; overflow: hidden; }
.loading .content .progress-box .progress{width: 0%; height: 100%; background-color: #aeb0b2;} 
.loading .content .progress_text{width: 100%; height: 0.24rem; text-align: center; font-size:0.18rem; color: #989898;  font-weight:300; margin-top: 0.18rem; }
    

.cai{width: 0.73rem; height: 0.73rem;  position: absolute; left:50%; top:50%; background: url(../images/setting.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ; transform:translateX(-3.20rem) translateY(-50%);display: none; }
.cai:hover,
.cai.active{background: url(../images/setting_on.png) no-repeat center top; background-size: 100% auto;  }

.color{width: 0.73rem; height: 0.73rem;  position: absolute; left:50%; top:50%; background: url(../images/color.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ; transform:translateX(2.42rem) translateY(-50%);display: none; }
.color:hover,
.color.active{background: url(../images/color_on.png) no-repeat center top; background-size: 100% auto;  }

.open_box{padding: 0 0.24rem; height: 0.55rem;  position: absolute; left:50%; bottom:1.44rem;  pointer-events: all ; cursor: pointer; background-size: 100% auto ; transform: translateX(-50%);  display: none; color:#3e3f41; font-size: 0.27rem; background-color: #cbd1d9; border-radius: 0.55rem; text-align: center; line-height: 0.55rem;  }
.open_box:hover,
.open_box.active{ background-color: #8e9397; color:#000;  }
  

.go_back{width: 0.57rem; height: 0.57rem;  position: absolute; right:3.15rem; top:0.46rem; background: url(../images/back.png) no-repeat center center;  pointer-events: all ; cursor: pointer; background-size: 100% auto ;    display: none; z-index: 300; display: none;  }
.go_back:hover,
.go_back.active{background: url(../images/back_on.png) no-repeat center top; background-size: 100% auto;  }
 
.colorbox{width: 100%; height:0.96rem; position: absolute; left:0; bottom:0.5rem;  display: none;  }
.colorbox .item{width:1.16rem; height:0.96rem; pointer-events: all ; cursor: pointer;  position: absolute; left:9.0rem; text-align: center; line-height: 0.38rem;color:#262626; font-size: 0.16rem;  box-sizing: border-box; padding-top: 0.58rem; word-break: keep-all; white-space:nowrap;    }
.colorbox .item0{background: url(../images/color_blue.png) no-repeat center top; background-size: 100% auto;  left:7.78rem; }
.colorbox .item0:hover,
.colorbox .item0.active{background: url(../images/color_blue_on.png) no-repeat center top; background-size: 100% auto;  }

.colorbox .item1{background: url(../images/color_black.png) no-repeat center top; background-size: 100% auto;    }
.colorbox .item1:hover,
.colorbox .item1.active{background: url(../images/color_black_on.png) no-repeat center top; background-size: 100% auto; }

.colorbox .item2{background: url(../images/color_gray.png) no-repeat center top; background-size: 100% auto;   left:10.15rem;  }
.colorbox .item2:hover,
.colorbox .item2.active{background: url(../images/color_gray_on.png) no-repeat center top; background-size: 100% auto; }
  

.light_box{width: 100%; height: 2.3rem; position: absolute; left:0; bottom:0; z-index: 200; pointer-events: all; display: none; background:#fff ; background-size: 100% 100%; }
.light_box .close{width: 0.56rem; height: 0.56rem; position: absolute; right:3.35rem; top:0.1rem; z-index: 3; cursor: pointer; z-index: 3; background: url(../images/light_close.png) no-repeat center center; background-size: 50% 50%;}
.light_box .content{width: 13.06rem; height:auto; display: none; margin: 0px auto; }
.light_box .content .h1{width:12.44rem; font-size: 0.48rem; line-height: 0.62rem; font-weight: 700; color:#262626; text-align: left; margin: 0px auto; padding-top: 0.42rem;  }
.light_box .content .info{width:12.44rem; font-size: 0.21rem; line-height: 0.33rem; color:#262626; margin: 0px auto;    }