@charset "utf-8";
*{tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-ms-tap-highlight-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,button{margin:0;padding:0;list-style:none;}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal; color:#333}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline: none;*font-size:100%}
input[type="button"], input[type="submit"], input[type="reset"] ,select{-webkit-appearance: none;}
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, th, td {margin: 0px;padding: 0px;}
body{font:0.875rem/1.428 "microsoft yahei", Tahoma, Arial, Helvetica, Sans-serif; font-family:"microsoft yahei", Tahoma, Arial, Helvetica, Sans-serif !important; background:#fff; color:#000000}
em,i{ font-style:normal;}
b{ font-weight:400}
a{outline: none;text-decoration:none; color:#000000}
img{border:0 none;width:100%;}

#containt{max-width: 640px;margin:auto;}
.headerbox{padding:8px 16px 0;overflow: hidden;font-size: 0.9125rem}
.headerbox .member-login{float: right}
.footer-box{border-top:solid 1px #E5E5E5;display: flex;background:#FFF;position: fixed;bottom:0;left:0;right:0;}
.footer-box .item{flex:1;text-align: center;padding:10px 0 8px;line-height:1}
.footer-box .item i{display: block;margin:0 auto 4px;width: 32px;height: 24px;background:no-repeat center;background-size:auto 100%;}
.footer-box .item i.ico1{background-image: url(../MobileSiteImages/ico-footer0_0.png)}
.footer-box .item i.ico2{background-image: url(../MobileSiteImages/ico-footer1_0.png)}
.footer-box .item i.ico3{background-image: url(../MobileSiteImages/ico-footer2_0.png)}
.footer-box .item.on{color:#ff4c71;}
.footer-box .item.on i.ico1{background-image: url(../MobileSiteImages/ico-footer0_1.png)}
.footer-box .item.on i.ico2{background-image: url(../MobileSiteImages/ico-footer1_1.png)}
.footer-box .item.on i.ico3{background-image: url(../MobileSiteImages/ico-footer2_1.png)}

.about-img{width:62%;margin:24px auto 12vh;display: block}
.about-nav{padding:0 15%;}
.about-nav .item{padding: 18px 0;display: block;border-bottom:solid 1px #E4E4E4;position: relative;}
.about-nav .item:before{content: "";width: 20px;height: 20px;background:url(../MobileSiteImages/ico-nav.png) no-repeat center;display:inline-block;background-size:cover;vertical-align: middle;margin-right: 5px}
.about-nav .item .time{position: absolute;right:0;color:#8f8f8f;font-size: 0.75rem}
.about-nav .item .tit{vertical-align: middle;font-size: 0.9125rem}

.tab-style{display: flex;padding:12px 0 18px;}
.tab-style .item{flex:1;text-align: center;font-size: 1.45rem;}
.tab-style .item.on{font-weight: 600;position: relative;color:#FF336E;font-size:1.65rem;}
.tab-style .item.on:before{content: "";background:#FF336E;height: 4px;border-radius: 4px;position: absolute;left:50%;margin-left: -10px;width:20px;bottom:-6px;}

.search-box{margin:0 16px;display: flex}
.search-box .t{border:solid 1px #E9E9E9;border-right:none;border-radius: 6px 0 0 6px;height: 42px;flex:1;padding-left: 12px}
.search-box .b{width: 92px;border:none;color:#FFF;border-radius: 0 6px 6px 0;background:url(../MobileSiteImages/ico-search.png) no-repeat 16px center #FF336E;background-size: 14px;padding-left:10px;}
/*.search-box .b:before{content: "";width: 14px;height: 14px;background:url(../MobileSiteImages/ico-search.png) no-repeat center;background-size: cover;display: inline-block;vertical-align: middle;margin-right:4px}
.search-box .b span{vertical-align: middle;}*/

.list-cont{margin:0 16px 86px;}
.list-cont .item{margin-top: 22px;}
.list-cont .item .t{margin-bottom: 6px;background:#FF336E;color:#FFF;height: 42px;line-height: 42px;text-align: center;border-radius: 6px;display: block}
.list-cont .item .t:hover{background: #FF8DA9}

.recommend-list{margin:0 16px 24px;}
.recommend-list .item{margin-top: 18px;display: flex;}
.recommend-list .item .img{width: 172px;position: relative;/* filter: blur(8px); */overflow: hidden;border-radius: 6px;}
.recommend-list .item .txt{flex:1;padding:4px 0 4px 12px;}
.recommend-list .item.onMask .img img{filter: blur(10px)}
.recommend-list .item .mask-box{position: absolute;right:0;top:0;bottom:0;left:0;text-align: center;color: #FFF;padding-top: 45%;/* background: #FFF; *//* filter: blur(5px); */}
.recommend-list .item .mask-box .ico{width: 24px;height: 24px;background:url(../MobileSiteImages/ico-lock.png) no-repeat center;background-size: contain;display: block;margin: auto;margin-bottom: 4px;}

.modal{position: fixed;top:0;bottom:0;left:0;right:0;background:#00000060;text-align: center;padding:0 16px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.modal img{max-height: 80%;}
.modal .close{background:url(../MobileSiteImages/ico-close.png) no-repeat center;background-size: 68%;border: solid 2px #FFF;border-radius: 50%;display: inline-block;width: 40px;height: 40px;margin-top: 15px;}

.pages-box{margin:0 16px 12px;display: flex}
.pages-box .btn{height: 38px;width: 100px;background:#FF336E;color:#FFF;border:none;border-radius: 6px;vertical-align:middle;}
.pages-box .txt{margin:0 8px;flex:1;background:#F9F9F9;border:solid 1px #E6E6E6;height: 38px;vertical-align: middle;border-radius: 6px;text-align: center}
.pages-info{margin-bottom: 78px;text-align: center}
.pages-info > span{margin:0 5px;}

.pop-box{position: fixed;left:0;bottom:0;right:0;top:0;display: none}
.pop-box:before{content:"";position: absolute;top:0;left: 0;bottom:0;right:0;background:rgba(0,0,0,0.5);z-index: 998;}
.pop-box .box{width:280px;background:#FFF;border-radius: 10px;position: absolute;top:50%;z-index: 999;left: 50%;margin-top: -160px;margin-left:-140px;}
.pop-box .box .b-head{height: 42px;text-align:center;position: relative;line-height: 42px;border-bottom: solid 1px #e3e3e3;}
.pop-box .box .b-head b{font-weight: 600;font-size: 1rem}
.pop-box .box .b-head .ico-close{width: 40px;height: 40px;background:url(../MobileSiteImages/ico-close_b.png) no-repeat center;position: absolute;right: 0;top:0;background-size: 30%}
.pop-box .box .b-cont{padding: 16px 0 32px;text-align: center;}
.pop-box .box .b-cont .code{padding:14px;border:solid 1px #e3e3e3;width: 200px;margin:8px auto 0;border-radius: 2px}


@media (min-width: 768px){
	.footer-box{left:50%;margin:0 -320px;right:50%;}
	.modal img{max-width: 50%;width: auto}
}