/* CSS Document */
@media only screen and (min-width: 640px) {
    html { font-size: 100px; }
}

@media only screen and (min-width: 620px) and (max-width: 640px) {
    html { font-size: 100px; }
}

@media only screen and (min-width: 600px) and (max-width: 620px) {
    html { font-size: 99.2px; }
}

@media only screen and (min-width: 580px) and (max-width: 600px) {
    html { font-size: 96px; }
}

@media only screen and (min-width: 560px) and (max-width: 580px) {
    html { font-size: 92.8px; }
}

@media only screen and (min-width: 540px) and (max-width: 560px) {
    html { font-size: 89.6px; }
}

@media only screen and (min-width: 520px) and (max-width: 540px) {
    html { font-size: 86.4px; }
}

@media only screen and (min-width: 500px) and (max-width: 520px) {
    html { font-size: 83.2px; }
}

@media only screen and (min-width: 480px) and (max-width: 500px) {
    html { font-size: 80px; }
}

@media only screen and (min-width: 460px) and (max-width: 480px) {
    html { font-size: 76.8px; }
}

@media only screen and (min-width: 440px) and (max-width: 460px) {
    html { font-size: 73.6px; }
}

@media only screen and (min-width: 430px) and (max-width: 440px) {
    html { font-size: 70.4px; }
}

@media only screen and (min-width: 420px) and (max-width: 430px) {
    html { font-size: 68.8px; }
}

@media only screen and (min-width: 410px) and (max-width: 420px) {
    html { font-size: 67.2px; }
}

@media only screen and (min-width: 400px) and (max-width: 410px) {
    html { font-size: 65.6px; }
}

@media only screen and (min-width: 380px) and (max-width: 400px) {
    html { font-size: 64px; }
}

@media only screen and (min-width: 360px) and (max-width: 380px) {
    html { font-size: 60.8px; }
}

@media only screen and (min-width: 340px) and (max-width: 360px) {
    html { font-size: 57.6px; }
}

@media only screen and (min-width: 320px) and (max-width: 340px) {
    html { font-size: 54.4px; }
}

@media only screen and (min-width: 300px) and (max-width: 320px) {
    html { font-size: 51.2px; }
}

@media only screen and (max-width: 300px) {
    html { font-size: 48px; }
}

body { font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif; font-size: 14px; width: 100%; color: #666; }
* { margin: 0px; padding: 0px; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow-x: hidden; }
ul, ol { list-style: none; }
a { text-decoration: none; outline: none; }
em, cite, i { font-style: normal; }
img { border: 0; width: 100%; vertical-align: middle; }
.left { float: left; }
.right { float: right; }
.none { display: none; }
.wrapper { width: 100%; max-width: 960px; min-width: 320px; overflow: hidden; margin: 0 auto; background: #f6f6f6; position: relative; }
.green .search { background: #0ec8a9; }
.green .banner_bg { background-image: linear-gradient(#0ec8a9,#78e397); }
.green .banner_icno span.swiper-active-switch { background: #48edd1; }
.green .serve span:before { background: url(../images21/green/icon.png) no-repeat; background-size: 100%; }
.green .serve { color: #00a48b; }
.green .time_num { background-image: -webkit-linear-gradient(#08d7c7,#01a78d); background-image: linear-gradient(#08d7c7,#01a78d); background-color: #01a78d; }
.green .time_spe { color: #00a493; }
.green .coupon a { float: left; width: 50%; position: relative; box-sizing: border-box; }
.green .coupon a:nth-child(odd) { padding-right: .05rem; }
.green .coupon a:nth-child(2n) { padding-left: .05rem; }
.green .ad_icno .swiper-active-switch { background: #0ec8a9; }

.red .search { background: #f33d24; }
.red .banner_bg { background-image: linear-gradient(#f33d24,#fc6f11); }
.red .banner_icno span.swiper-active-switch { background: #f54b1e; }
.red .serve span:before { background: url(../images21/red/icon.png) no-repeat; background-size: 100%; }
.red .serve { color: #f23a25; }
.red .time_num { background-image: -webkit-linear-gradient(#ff5f2e,#f23a25); background-image: linear-gradient(#ff5f2e,#f23a25); background-color: #f23a25; }
.red .time_spe { color: #f23a25; }
.red .coupon div { margin: .2rem 0.1rem .2rem .2rem; }
.red .coupon a { width: 32%; position: relative; box-sizing: border-box; float: left; margin-right: 1.333%; }
.red .ad_icno .swiper-active-switch { background: #f33d24; }

.blue .search { background: #4cc7fb; }
.blue .banner_bg { background-image: linear-gradient(#4cc7fb,#70ecfe); }
.blue .banner_icno span.swiper-active-switch { background: #0fd6fe; }
.blue .serve span:before { background: url(../images21/blue/icon.png) no-repeat; background-size: 100%; }
.blue .serve { color: #1abaf8; }
.blue .time_num { background-image: -webkit-linear-gradient(#0fd7fe,#0084fa); background-image: linear-gradient(#0fd7fe,#0084fa); background-color: #0084fa; }
.blue .time_spe { color: #0084fa; }
.blue .coupon a { width: 25%; float: left; position: relative; box-sizing: border-box; padding: 0 1%; }
.blue .ad_icno .swiper-active-switch { background: #4cc7fb; }
.search { width: 100%; max-width: 960px; min-width: 320px; position: fixed; top: 0; z-index: 1000; box-sizing: border-box; }
.search h1 { width: 1rem; height: .94rem; padding: .2rem; position: relative; box-sizing: border-box; }
.search h1:before { content: ''; position: absolute; width: 1rem; height: .54rem; background: url(../images21/logo.png) no-repeat; background-size: 100%; }
.search_bar { display: block; left: 1.4rem; right: .85rem; top: .2rem; position: absolute; }
.search_bar div { width: 100%; height: .54rem; border-radius: .32rem; background: #fff; display: inline-block; align-items: center; overflow: hidden; left: 0; }
.search_btn { position: absolute; right: .2rem; top: .2rem; }
.search_btn a { color: #fff; font-size: .26rem; line-height: .54rem; font-weight: bold; }
.search_bar div i { position: absolute; cursor: pointer; padding: .12rem; display: inline-block; width: .3rem; height: .3rem; }
.search_bar div i:before { width: .3rem; height: .3rem; content: ''; position: absolute; background: url(../images21/search_icon.png) no-repeat 0 -.04rem; background-size: 100%; }
.search_bar input { height: .54rem; line-height: .54rem; border: none; resize: none; color: #666; font-size: .24rem; outline: 0; text-align: start; padding-left: .6rem; }
.banner_wrapper { position: relative; }
.banner_bg { position: absolute; top: 0; width: 100%; height: 1.8rem; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; }
.banner { min-height: 2.5rem; margin: 0 auto; position: relative; width: 94%; overflow: hidden; }
.banner_img { position: relative; }
.banner_img li { width: 100%; float: left; position: relative; top: 0; overflow: hidden; }
.banner_img li > a { display: block; overflow: hidden; border-radius: .2rem; }
.banner_icno { text-align: center; position: absolute; bottom: .05rem; left: 0; right: 0; z-index: 999; }
.banner_icno span { width: .1rem; height: .1rem; background: #fff; border-radius: 50%; margin-left: .05rem; display: inline-block; }
.special { position: relative; width: 100%; overflow: hidden; }
.special ul { margin: .2rem 0.1rem 0.2rem 0.2rem;; }
.special li { float: left; width: 33.333333333%; box-sizing: border-box; }
.special li:nth-child(odd) { padding-right: .1rem; }
.special li:nth-child(2n) { padding-right: .1rem; }
.special li > a { display: block; }
.serve { color: #00a48b; padding: .2rem; }
.serve ul { width: 100%; overflow: hidden; }
.serve li { float: left; width: 25%; font-size: .22rem; line-height: .3rem; }
.serve span:before { width: .3rem; height: .3rem; content: ''; position: absolute; }
.serve span font { margin-left: .32rem; }
.serve span.serve_sp1:before { background-position: 0 -.52rem; }
.serve span.serve_sp2:before { background-position: 0 -.95rem; }
.serve span.serve_sp3:before { background-position: 0 -1.37rem; }
.serve span.serve_sp4:before { background-position: 0 -1.81rem; }
.icons { width: 100%; overflow: hidden; position: relative; }
.icons a { width: 25%; text-align: center; display: block; float: left; margin-bottom: .2rem; }
.icons img { width: 1rem; }
.icons span { display: block; margin-top: .1rem; font-size: .24rem; color: #666; }
.coupon { width: 100%; }
.coupon div { margin: .2rem; position: relative; }
.discount { width: 100%; }
.discount_cont { margin: .2rem; position: relative; }
.seckill, .group { width: 50%; float: left; position: relative; box-sizing: border-box; }
.seckill:nth-child(odd) { padding-right: .05rem; }
.group:nth-child(2n) { padding-left: .05rem; }
.seckill_bg, .group_bg { background: #fff; border-radius: .2rem; padding: .2rem; }
.seckill_tit, .group_tit { font-size: .24rem; line-height: .3rem; color: #333; float: left; }
.seckill_time { float: right; }
.time_num { width: .32rem; height: .32rem; color: #fff; border-radius: .08rem; text-align: center; float: left; display: inline-block; line-height: .32rem; font-size: .2rem; }
.time_spe { width: .13rem; float: left; display: inline-block; line-height: .32rem; font-size: .24rem; text-align: center; }
.seckill_cont { position: relative; }
.seckill_icon { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; }
.scp_img { padding: .1rem .2rem; }
.scp_txt span { display: block; text-align: center; }
.scp_name { font-size: .22rem; line-height: .3rem; height: 0.65rem; }
.scp_price { color: #ff4b4b; float: left; }
.scp_price font { font-size: .3rem; font-weight: bold; }
.scp_price em { font-size: .18rem; font-weight: bold; }
.scp_price del { color: #999; font-size: .2rem; margin-left: .05rem; }
.scp_bt { width: .55rem; height: .32rem; position: absolute; right: 0; }
.ad { margin: 0 .2rem .2rem .2rem; position: relative; overflow: hidden; }
.ad .ad_img { position: relative; }
.ad_img li { float: left; position: relative; overflow: hidden; }
.ad_img img { width: 100%; }
.ad_icno { position: absolute; left: 0%; width: 100%; bottom: 0.1rem; height: 0.3rem; overflow: hidden; text-align: center; }
.ad_icno .swiper-pagination-switch { border-radius: 0.1rem; width: 0.1rem; height: 0.1rem; background: #fff; margin: 0px 0.05rem; display: inline-block; }

.ad a { display: block; }
.feature { margin: .2rem; }
.feature_tit { width: 100%; margin-bottom: .1rem; }
.feature_bg { background: #fff; border-radius: .2rem; box-sizing: border-box; overflow: hidden; }
.feature_bg li { float: left; position: relative; box-sizing: border-box; border-bottom: 1px #f6f6f6 solid; width: 50%; }
.feature_bg li:nth-child(odd) { border-right: 1px #f6f6f6 solid; }
.product_list { margin: .2rem; }
.p_item { background: #fff; border-radius: .2rem; position: relative; box-sizing: border-box; padding: .2rem; height: 2.4rem; margin-bottom: .2rem; }
.p_item a { display: block; }
.p_item img { position: absolute; width: 2rem; height: 2rem; left: .2rem; }
.list_txt { position: relative; padding-left: 2.2rem; }
.list_name { width: 100%; font-size: .24rem; line-height: .32rem; display: block; height: .64rem; overflow: hidden; color: #333; }
.list_label { width: 100%; display: block; font-size: .18rem; font-weight: bold; margin-top: .5rem; margin-bottom: .1rem; }
.list_label i { float: left; text-align: center; margin-right: .05rem; border: .01rem solid #ff4b4b; color: #ff4b4b; border-radius: .05rem; padding: 0 .05rem; }
.list_price { width: 100%; display: block; }
.sale_price { color: #ff4b4b; float: left; margin-right: .2rem; }
.sale_price em, .vip_price em { font-size: .18rem; font-weight: bold; }
.sale_price font { font-size: .3rem; font-weight: bold; }
.vip_price { position: relative; color: #ff4b4b; float: left; }
.vip_price b { font-weight: normal; display: block; float: left; border: 1px #ff4b4b solid; background: #ff4b4b; border-radius: .05rem 0 0 .05rem; color: #fff; font-size: .18rem; box-sizing: border-box; height: .31rem; line-height: .3rem; padding: 0 .05rem; overflow: hidden; }
.vip_price span { padding: 0 .05rem; border: 1px #ff4b4b solid; border-radius: 0 .05rem .05rem 0; height: .28rem; line-height: .28rem; display: block; float: left; }
.vip_price font { font-size: .22rem; font-weight: bold; display: inline-block; line-height: .28rem; }
.mnav { width: 100%; max-width: 960px; min-width: 320px; height: 1rem; background: #fff; position: fixed; font-size: .24rem; bottom: 0; z-index: 100; box-sizing: border-box; width: 100%; list-style: none; box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6); -webkit-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6); -moz-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6); }
.mnav > a { position: relative; float: left; width: 20%; text-align: center; box-sizing: border-box; padding: .1rem; }
.mnav img { width: .85rem; height: .85rem; }

.loading { width: 100%; text-align: center; padding-bottom: 10%; }
.loading img { width: 10%; margin: auto; }

.headertop { width: 100%; margin: 0 auto; z-index: 100; }

.layermanim { width: 80%; box-shadow: none; }
.showdiv { position: relative; }
.showdiv .close { position: absolute; right: 0px; top: 0px; width: 8vw; height: 8vw; }
.showdiv .btn1 { position: absolute; left: 11%; bottom: 3vw; width: 35%; height: 8vw; }
.showdiv .btn2 { position: absolute; right: 11%; bottom: 3vw; width: 35%; height: 8vw; }
.showdiv .btn3 { position: absolute; left: 30%; bottom: 4vw; width: 40%; height: 8vw; }
.layermchild { background-color: transparent !important; }


.d_page { width: 100%; max-width: 640px; min-width: 320px; overflow: hidden; margin: 0 auto; background: url(../images21/d-body.jpg) no-repeat #F2F5FA; background-size: contain; position: relative; padding-top: 56vw; padding-bottom: 10vw; }
.d_main { width: calc(100% - 21vw); margin: 0px 3.5vw; background: #fff; border-radius: 6vw; padding: 2vw 7vw 5vw; }
.d_main ul { padding: 5vw 0px; }
.d_main hr { border: 0; background-color: #ddd; height: 1px; }
.d_main li { width: calc(100% - 1px); padding: 1.2vw 0px; overflow: hidden; padding-right:1px }
.d_main li b { width: 28%; display: inline-block; text-align-last: justify; font-size: 0.22rem; color: #000; vertical-align: -webkit-baseline-middle; font-weight: 400; line-height: 10vw; }
.d_main li samp { line-height: 10vw; float: right; width: calc(70% - 3vw); color: #0b4ee4; }
.d_main li input { width: calc(68% - 5vw); text-align: left; float: right; height: 5vw; line-height: 5vw; background-color: #F3F9F9; padding: 2.5vw; border: 0px; border-radius: 1vw; outline: none; }
.d_main li textarea { width: calc(68% - 5vw); text-align: left; float: right; line-height: 5vw; background-color: #F3F9F9; padding: 2.5vw; border: 0px; border-radius: 1vw; outline: none; }
.d_main li input:focus { border-style: solid; border-color: red; box-shadow: 0 0 1px red; }
.d_main .btn { width: 100%; text-align: center; }
.d_main .btn .submit { width: 50%; height: 8vw; line-height: 8vw; margin: auto; display: block; border: 0px; background-color: #2a71e1; color: #fff; font-size: 0.27rem; border-radius: 4vw; }
.d_main .btn label { margin: auto; padding: 2vw 0; display: inline-block; text-align: center; }
.d_main .btn label input { vertical-align: middle; }
.d_main .btn label a { color: #ea3333; }
.d_main .btn label .Validform_error::after { position: absolute; top: 0; width: 13px; height: 13px; display: inline-block; visibility: visible; padding-left: 0px; text-align: center; content: ' '; box-sizing: border-box; border: 1px solid red; background-color: #ffded5; }

.d_main .btn label input[type='checkbox'] { position: relative; border: 1px solid #333; }

.d_msgbox { display: none; width: 84%; padding: 8%; position: relative; z-index: 111; background-color: #fff; text-align: center; border-radius: 6vw; }

.d_msgbox img { width: 11vw; display: block; margin: auto; }
.d_msgbox .close { width: 17px; height: 17px; position: absolute; right: 0px; top: 0px; z-index: 1; padding: 10px; }
.d_msgbox p { color: #2a71e1; font-weight: bold; line-height: 6vw; }
.d_msgbox span { color: #000; font-weight: normal; letter-spacing: 2px; }
.d_msgbox b { color: red; }
.d_msgbox hr { border: 0; background-color: #ddd; height: 1px; }
.d_msgbox .btn { color: #666; line-height: 10vw; font-size: 12px; padding: 1vw 0px; }
.d_msgbox .btn input { outline: none; width: 50%; height: 8vw; line-height: 8vw; margin: auto; display: block; border: 0px; background-color: #2a71e1; color: #fff; font-size: 0.27rem; border-radius: 4vw; margin-bottom: 2vw; }




.gearArea { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 10px; background-color: rgba(0, 0, 0, 0.2); display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9900; overflow: hidden; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.area_ctrl { vertical-align: middle; background-color: #f5f8ff; color: #000; margin: 0; height: auto; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 9901; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slideInUp { -webkit-animation: slideInUp .3s; animation: slideInUp .3s; }

@-webkit-keyframes slideInUp {
    from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@keyframes slideInUp {
    from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

.area_roll { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: auto; overflow: hidden; background-color: transparent; -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0)); }

.area_roll > div { font-size: 1.6em; height: 10em; float: left; background-color: transparent; position: relative; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }

.area_roll > div .gear { width: 100%; float: left; position: absolute; z-index: 9902; margin-top: 4em; }

.area_roll_mask { -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0)); padding: 0; }

.area_grid { position: relative; top: 4em; width: 100%; height: 2em; margin: 0; box-sizing: border-box; z-index: 0; border-top: 1px solid #abaeb5; border-bottom: 1px solid #abaeb5; }

.area_roll > div:nth-child(3) .area_grid > div { left: 42%; }

.area_btn { color: #0575f2; font-size: 1.6em; line-height: 1em; text-align: center; padding: .8em 1em; }

.area_btn_box:before,
.area_btn_box:after { content: ''; position: absolute; height: 1px; width: 100%; display: block; background-color: #96979b; z-index: 15; -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }

.area_btn_box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: #fff; position: relative; }

.area_btn_box:before { left: 0; top: 0; -webkit-transform-origin: 50% 20%; transform-origin: 50% 20%; }

.area_btn_box:after { left: 0; bottom: 0; -webkit-transform-origin: 50% 70%; transform-origin: 50% 70%; }

.tooth { height: 2em; line-height: 2em; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; line-clamp: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; }