@media screen and (min-width: 320px) {html { font-size: 12px; }}
@media screen and (min-width: 360px) {html { font-size: 13px; }}
@media screen and (min-width: 414px) {html { font-size: 15px; }}
@media screen and (min-width: 480px) {html { font-size: 16px; }}

body{background:#fff;padding-bottom:60px}

.ba{width:100%;position:relative}
.ba img{width:100%;border:0px}
.ba .btn { background: #ff661a ;font-size:1.2rem;color:#fff;position:absolute;left:6rem;top:10rem;border-radius:2rem;padding:.6rem 2rem}


.fun { height: auto; overflow: hidden ;}
.fun .f { height: auto; overflow: hidden; position: relative; margin-bottom: 1rem; padding: 1rem 1rem 1.8rem 1rem; box-sizing: border-box }
.fun .f:nth-child(2n){background:#eff4fd}
.fun .txt { float: left; width: 90%; padding-top: 1rem; z-index: 2; position: relative }
.fun .img { width: 10rem; background: url(/images/pinche/icon_1.png) no-repeat; height: 10rem; background-size: 100% auto; opacity: .5; position: absolute; right: -1rem; top: -1rem; z-index: 1; /*filter:grayscale(100%)*/ }
.fun h1 { font-size: 1.25rem; font-weight: 600; color: #000; height: 2.4rem;position:relative;margin-bottom:1rem }
.fun h1::after{content:' ';position:absolute;width:2rem;border-bottom:3px solid #05cd8c;left:0;bottom:0}
.fun .f p { color: #666; line-height: 1.6em; font-size: 1.1rem }

.fun .img2 { background: url(/images/pinche/icon_2.png) no-repeat; background-size: 100% auto; }
.fun .img3 { background: url(/images/pinche/icon_3.png) no-repeat; background-size: 100% auto; }
.fun .img4 { background: url(/images/pinche/icon_4.png) no-repeat; background-size: 100% auto; }

.f.l .txt { float: right; text-align: right; }
.f.l .txt h1{left:initial;right:0}
.f.l .img { left: 0; right: initial }
.f.l h1:after { left: initial; right: 0 }

.cn { padding: 2rem 0rem 1rem 0rem; height: auto; box-sizing: border-box; margin-bottom: 2rem }
.cn-box { width: 100%; overflow-x: auto; padding: 1rem; box-sizing: border-box }
.cn-box::-webkit-scrollbar { display: none; }
.cn-box > div { width: 55rem }
.cn .h { text-align: center; font-size: 1.3rem; color: #000; height: 4rem; font-weight: 600 }
.cn .h em { color: red }
.cn .c { width: 16rem; background: #fff; box-shadow: 0px 0px .5rem .1rem #eff4fd; height: 19rem; border-radius: .5rem; text-align: center; padding-top: 2rem; position: relative; overflow: hidden; float: left; margin-right: 1rem }
.cn .c:last-child { margin: 0 }
.cn .c .icon { background: url(/images/pinche/icon_11.png) no-repeat; height: 6rem; background-size: 100% auto; width: 6rem; margin: 0px auto 1rem auto }
.cn .c h3 { font-size: 1.25rem; margin-bottom: .9rem; position: relative; color: #333;  }
.cn .c h3::after { content: ' '; border-bottom: 4px solid #77b6ff; width: 4rem; left: 50%; bottom: 0; margin-left: -2rem; position: absolute }
.cn .c p { color: #999; font-size: 1.05rem; padding: 0 1.2rem; box-sizing: border-box; line-height: 1.6em }
.cn .c-b { background: url(/images/pinche/bg_1.jpg) no-repeat; background-size: 100% auto; height: 4rem; line-height: 4rem; position: absolute; left: 0; bottom: 0; color: #fff; font-size: 1.25rem; width: 100% }
.cn .c .icon2 { background: url(/images/pinche/icon_12.png) no-repeat; background-size: 100% auto; }
.cn .c .icon3 { background: url(/images/pinche/icon_13.png) no-repeat; background-size: 100% auto; }

.de { box-sizing: border-box;padding:0 1rem }
.de .h { text-align: center; font-size: 1.3rem; color: #000; height: 4rem; font-weight: 600 }
.de .d { width: 70%;  margin:1rem auto 2rem auto; text-align: center }

.de .qr { width: 90%;margin: 0 auto 1rem auto; border: 2px dashed #05cd8c; padding: 1rem; box-sizing: border-box; border-radius: .5rem }
.de .qr img { width: 100% }
.de p { font-size: 1.2rem; }

.bar {  color: #fff; position: fixed; bottom: 4rem; right: 0px; width: 100%;z-index:3;width:3.8rem }
.bar .bar-b { display: block; width: 3.4rem; text-align: center; color: #fff; background: #05cd8c; width: 3.4rem; height: 3.4rem; line-height: 3.4rem; margin-bottom: 1rem; text-align: center; border-radius: .3rem; box-shadow: 0px 0px .2rem .1rem #dafff3 }
.bar i {  font-size: 2rem; text-align: center; clear: both; }
.bar a{color:#fff}
.wx_s img { width: 100%; }
/*.sub_s{display:block}*/
.sub_s .pop_box{width:80%;margin-left:-40%;height:19rem}
.sub_s .row { width: 100%; margin-bottom: .8rem }
.sub_s .t{height:4rem;font-size:1.2rem}
.sub_s .row input { border: 1px solid #ccc; font-size: 1.1rem; padding: .9rem 1.5rem; box-sizing: border-box; border-radius: .5rem; width: 100% }
.sub_s .btn { background: #ff661a; font-size: 1.2rem; color: #fff;  border-radius: 2rem; padding: .9rem 2rem ;width:100%;box-sizing:border-box;margin-top:2rem}
.sub_s .close{position:absolute;top:1rem;right:1rem}

.jt { text-align: center; height: 100%; overflow: hidden; display: flex; justify-content: space-between;  padding-bottom: 40px }
.jt-box { width: 100%; overflow-x: auto; padding: 1rem; box-sizing: border-box }
.jt-box::-webkit-scrollbar { display: none; }
.jt-box-b{width:135rem}
.jt-box-b div { width: 20rem; margin-right: 1rem; float: left; border: 8px solid #bfeeff; border-radius: 15px; overflow: hidden }
.jt-box-b div:last-child { margin: 0 }
.jt div img { width: 100% }