@CHARSET "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, fieldset, form, label, input, button, select, textarea, img, table, th, td, article, aside, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, p{padding:0;margin:0;border: 0 none;color:#908EA1;outline: none;font-family: 'OpenSans', '黑体-简', 'Arial', sans-serif;font-size: 14px;font-weight: 400;list-style:none;}
a, span{text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;}
.clr{clear: both;}
*{box-sizing: border-box;}
/*html,body{height: 100%;}
html {overflow: hidden;} */
/*body::-webkit-scrollbar{width:0px}*/
input::-webkit-input-placeholder {color: #EEEEF1;}
input::-moz-placeholder{color: #EEEEF1;}
input::-moz-placeholder{color: #EEEEF1;}
input::-ms-input-placeholder{color: #EEEEF1;}

/* register */
.container{width: 100%;background: #ffffff;}
.container .register{width: 100%;margin: 100px auto 0;}
.container .register .logo{width: 100%;text-align: center}
.container .register form{width: calc(100% - 30px);border: 0.5px solid #EEEEF1;margin: 16px 15px 0;border-radius: 5px;box-shadow: 0 10px 15px rgba(238,238,241,0.8);}
.container .register form .username, .container .register form .password{width: 100%;height: 48px;position: relative;}
.container .register form i{width: 48px;height: 48px;display: block;float: left;}
.container .register form .username i{background: #CBD0D9 url(../images/icon_username.svg) center center no-repeat;border-radius: 5px 0 0 0;}
.container .register form .password i{background: #CBD0D9 url(../images/icon_password.svg) center center no-repeat;border-radius: 0 0 0 5px;}
.container .register form input{width: calc(100% - 49px);border-bottom: 0.5px solid #EEEEF1;height: 48px;padding: 0 0 0 5px;display: block;float: left;background: #ffffff;border-radius: 0 5px 5px 0;}
.container .register form .password input{padding: 0 105px 0 5px;}
.container .register form .password .btn_code{width: 88px;height: 24px;position: absolute;top: 12px;right: 12px;z-index: 2;}
.container .register form .password .btn_code a{font-weight: 200;width: 88px;height: 24px;display: block;text-align: center;line-height: 24px;color: #ffffff;border-radius: 5px;background: -webkit-linear-gradient(45deg, #FEDB68, #F9AA28);background: -o-linear-gradient(45deg, #FEDB68, #F9AA28);background: -moz-linear-gradient(45deg, #FEDB68, #F9AA28);background: linear-gradient(45deg, #FEDB68, #F9AA28);}
/*.container .register form .password .btn_code a:hover, .container .register form .password .btn_code a.hover{opacity: 0.5;}*/
.container .register .error{font-size: 12px;width: calc(100% - 30px);margin: 5px auto 0;}
.container .register .btn_login{width: calc(100% - 30px);margin: 20px 15px 0;height: 48px;border-radius: 5px;box-shadow: 0 10px 15px rgba(253,216,220,0.8);}
.container .register .btn_login a{width: 100%;height: 48px;text-align: center;line-height: 48px;font-size: 16px;border-radius: 5px;display: block;color: #ffffff;background: -webkit-linear-gradient(45deg, #FF7D80, #F04255);background: -o-linear-gradient(45deg, #FF7D80, #F04255);background: -moz-linear-gradient(45deg, #FF7D80, #F04255);background: linear-gradient(45deg, #FF7D80, #F04255);}
.container .register .btn_login a:hover{opacity: 0.8;}

/* register_success */
.succes{width: 100%;}
.succes .top, .succes .bottom{margin: 0;padding: 0;position: relative;}
.succes .top img, .succes .bottom img{width: 100%;margin: auto;display: block;}
.succes .bottom .txt{width: 100%;font-size: 12px;color: #FFFFFF;text-align: center;position: absolute;top: 0;text-shadow: 0 1px 1px rgba(0,0,0,0.3);}
.succes .bottom .txt span{font-size: 12px;color: #FFFFFF;}
.succes .bottom .btn_tc{width: 100px;margin: auto;position: absolute;top: 32px;left: 0;right: 0;}
.succes .bottom .btn_tc a{width: 100px;height: 32px;text-align: center;border-radius: 5px;box-shadow: 0 1px 2px rgba(174,16,126,0.8);line-height: 32px;display: block;color: #FFFFFF;background: -webkit-linear-gradient(45deg, #E490D0, #C457A2);background: -o-linear-gradient(45deg, #E490D0, #C457A2);background: -moz-linear-gradient(45deg, #E490D0, #C457A2);background: linear-gradient(45deg, #E490D0, #C457A2);}
.succes .bottom .btn_tc a:hover{opacity: 0.8;}
.succes .bottom .my_c{width: 150px;margin: auto;position: absolute;top: 84px;left: 0;right: 0;}
ul.coupon{width: 100%;margin: 25px 15px 0;}
ul.coupon li{width: calc(100% - 30px);margin: 0 0 10px;position: relative;}
ul.coupon li img{width: 100%;}
ul.coupon li .l_txt{position: absolute;top: 10px;color: #FFFFFF;left: 27px;text-align: center;font-weight: 200;}
ul.coupon li .l_txt span{color: #FFFFFF;font-weight: 200;}
ul.coupon li .r_txt{position: absolute;top: 15px;left: 90px;width: calc(100% - 110px);color: #FFFFFF;text-align: center;}
ul.coupon li .r_txt .one{color: #FFFFFF;font-size: 12px;font-weight: 200;}
ul.coupon li .r_txt .one span{font-size: 18px;color: #FFFFFF;font-weight: 200;}
ul.coupon li .r_txt .two{color: #FFFFFF;margin: 0 0 5px;font-weight: 200;}
ul.coupon li .r_txt .three{font-size: 12px;margin: 0 0 2px;color: #FFFFFF;font-weight: 200;}
ul.coupon li .r_txt .four{font-size: 12px;margin: 0 0 2px;color: #FFFFFF;font-weight: 200;}
ul.coupon li .r_txt .four span{font-size: 12px;color: #FFFFFF;font-weight: 200;}
ul.coupon li .free{top: 30px;}

/* single */
.banner{width: 100%;margin: auto;}
.banner a{display: block;}
.banner a img{width: 100%;display: block;}
a.nearby_link{display: block;}
a.nearby_link .nearby{width: 100%;box-shadow: 0 10px 15px rgba(238,238,241,0.8);}
a.nearby_link .nearby table.address{width: calc(100% - 84px);margin: 0 0 0 24px;height: 60px;float: left;}
a.nearby_link .nearby table.address span{color: #414852;}
a.nearby_link .nearby .icon_nearby{margin: 14px 20px 0 20px;width: 20px;height: 31px;display: block;float: left;background: url(../images/icon_nearby.svg) no-repeat;}
.coffee_list .coffee_row .coffee_block .txt .price{position: absolute;top: 10px;right: 0;}
.menu{width: 100%;margin: auto;position: fixed;bottom: 0;z-index: 99;background: #35343A;height: 50px;}
.menu .single, .menu .package, .menu .personal{width: 33.3%;text-align: center;float: left;}
.menu a{width: 36px;height: 42px;display: block;margin: 4px auto;color: #FFFFFF;padding: 25px 0 0;font-size: 12px;text-align: center;}
.menu .single a{background: url(../images/btn_single_default.svg) center 0 no-repeat;}
.menu .package a{background: url(../images/btn_package_default.svg) center 0 no-repeat;}
.menu .personal a{background: url(../images/btn_personal_default.svg) center 0 no-repeat;}
.menu a:hover, .menu a.hover{color: #FEBE1E;}
.menu .single a:hover, .menu .single a.hover{background: url(../images/btn_single_hover.svg) center 0 no-repeat;}
.menu .package a:hover, .menu .package a.hover{background: url(../images/btn_package_hover.svg) center 0 no-repeat;}
.menu .personal a:hover, .menu .personal a.hover{background: url(../images/btn_personal_hover.svg) center 0 no-repeat;}
.shopping_cart{width: 100%;margin: auto;position: fixed;bottom: 50px;z-index: 99;height: 66px;}
.shopping_cart .blank{width: 100%;height: 18px;background: transparent;}
.shopping_cart .block{width: 100%;background: rgba(53,52,58,0.95);height: 50px;}
.shopping_cart .block .cart{width: 60px; height: 50px;float: left;position: relative;top: -16px;left: 16px;}
.shopping_cart .block .cart a{display: block;width: 54px;height: 54px;background: url(../images/icon_shopping_cart.svg) no-repeat;float: left;}
.shopping_cart .block .price{float: left;margin: 12px 0 0 16px;font-size: 16px;color: #FFFFFF;}
.shopping_cart .block .price span{font-size: 14px;color: #FFFFFF;}
.shopping_cart .block .price .txt{color: #CBD0D9;border-left: 0.5px solid #CBD0D9;font-size: 12px;padding: 0 5px;margin: 0 5px;display: inline-block;position: relative;top: -1px;font-weight: 100;}
.shopping_cart .block .cart a span{position: absolute;top: -2px;left: 38px;width: 22px;height: 22px;line-height: 22px;background: #FFFFFF;border: 1px solid #F55260;font-size: 12px;text-align: center;border-radius: 100%;box-shadow: 0 1px 1px rgb(232, 33, 55);}
.shopping_cart .block .btn_settlement{width: 100px;height: 50px;float: right;}
.shopping_cart .block .btn_settlement a{width: 100px;height: 50px;text-align: center;display: block;font-size: 16px;line-height: 50px;color: #FFFFFF;background: -webkit-linear-gradient(45deg, #FF7D80, #F04255);background: -o-linear-gradient(45deg, #FF7D80, #F04255);background: -moz-linear-gradient(45deg, #FF7D80, #F04255);background: linear-gradient(45deg, #FF7D80, #F04255);}
.shopping_cart .block .btn_settlement a:hover{opacity: 0.8;}
.cart_products{width: 100%;margin: auto;position: fixed;bottom: 98px;z-index: 98;box-shadow: 0 -1px 1px rgba(0,0,0,0.2);}
.cart_products .title{background: #EEEEF1;height: 30px;padding: 0 15px;}
.cart_products .title span{line-height: 30px;color: #414852;}
.cart_products .title a{display: block;width: 48px;padding: 0 0 0 16px;float: right;line-height: 30px;color: #908EA1;background: url(../images/btn_delete.svg) 0 center no-repeat;}
.cart_products ul.content{background: #FFFFFF;max-height: 162px;overflow-y: scroll;}
.cart_products ul.content li{width: calc( 100% - 30px);margin: 0 15px;height: 54px;border-bottom: 0.5px solid #EEEEF1;}
.cart_products ul.content li .c_n{margin: 7px 0 0;float: left;}
.cart_products ul.content li .c_n h4{font-size: 16px;color: #414852;}
.cart_products ul.content li .c_n span{font-size: 12px;}
.cart_products ul.content li .buy{margin: 12px 0 12px 12px;float: right;position: relative;background: #FFFFFF;width: 84px;text-align: center;height: 30px;line-height: 30px;font-size: 16px;color: #414852;box-shadow: 0 1px 2px rgba(238,238,241,0.8);border: 0.5px solid #EEEEF1;display: block;border-radius: 30px;}
.cart_products ul.content li .buy a{position: absolute;top: 0;width: 30px;height: 30px;display: block;}
.cart_products ul.content li .buy a.add{right: 0;z-index: 3;background: url(../images/btn_add.svg) no-repeat;}
.cart_products ul.content li .buy a.reduce{left: -1px;z-index: 2;background: url(../images/btn_reduce.svg) no-repeat;}
.cart_products ul.content li .buy span{font-size: 16px;color: #414852;}
.cart_products ul.content li .price{float: right;color: #414852;margin: 16px 0 0;}
.cart_products ul.content li .price span{font-size: 16px;color: #414852;}
.cart_products .blank_white{width: 100%;height: 18px;background: #FFFFFF;}

/* settlement */
ul.list_sett{width: 100%;margin: 12px auto;}
ul.list_sett li{position: relative;width: calc(100% - 30px);margin: 18px 15px 0;box-shadow: 0 10px 15px rgba(238,238,241,0.8);border-radius: 5px;border-radius: 5px;}
ul.list_sett li.cappuccino{border-top:5px solid rgba(120,77,32,0.8);}
ul.list_sett li.americano{border-top: 5px solid rgba(158,61,22,0.8);}
ul.list_sett li.espresso{border-top: 5px solid rgba(211,146,37,0.8);}
ul.list_sett li.latte{border-top: 5px solid rgba(208,93,55,0.8);}
ul.list_sett li.mochaccino{border-top: 5px solid rgba(79,30,4,0.8);}
ul.list_sett li.milktea{border-top: 5px solid rgba(170,83,17,0.8);}
ul.list_sett li.walnutcoixseed{border-top: 5px solid rgba(187,39,19,0.8);}
ul.list_sett li.bsesamerice{border-top: 5px solid rgba(61,57,54,0.8);}
ul.list_sett li.chocolates{border-top: 5px solid rgba(114,49,20,0.8);}
ul.list_sett li.chocolatemilk{border-top: 5px solid rgba(150,82,36,0.8);}
ul.list_sett li.milk{border-top: 5px solid rgba(104,104,104,0.8);}
ul.list_sett li .img{width: 90px;height: 62px;margin: 12px 0 15px;padding: 0 26px;background: url(../images/icon_dotted_line.svg) right center no-repeat;float: left;}
ul.list_sett li .img img{display: block;}
ul.list_sett li .name{float: left;margin: 12px 0 0 16px;}
ul.list_sett li .name .c_n h4{font-size: 16px;color: #414852;}
ul.list_sett li .name .c_n span{font-size: 12px;position: relative;top: -3px;}
ul.list_sett li .name .price{color: #414852;margin: 4px 0 0;}
ul.list_sett li .name .price span{font-size: 16px;color: #414852;}
ul.list_sett li .buy{margin: 12px 12px 12px 0;float: right;position: relative;background: #FFFFFF;width: 84px;text-align: center;height: 30px;line-height: 30px;font-size: 16px;color: #414852;box-shadow: 0 1px 2px rgba(238,238,241,0.8);border: 0.5px solid #EEEEF1;display: block;border-radius: 30px;}
ul.list_sett li .buy a{position: absolute;top: 0;width: 30px;height: 30px;display: block;}
ul.list_sett li .buy a.add{right: 0;z-index: 3;background: url(../images/btn_add.svg) no-repeat;}
ul.list_sett li .buy a.reduce{left: -1px;z-index: 2;background: url(../images/btn_reduce.svg) no-repeat;}
ul.list_sett li .buy span{font-size: 16px;color: #414852;}
ul.list_sett li .delete{position: absolute;bottom: 12px;right: 16px;}
ul.list_sett li .delete a{display: block;width: 24px;height: 24px;text-align: center;padding: 4px 0 0;}
.information{width: calc(100% - 30px);margin: 18px 15px 110px 15px;box-shadow: 0 10px 15px rgba(238,238,241,0.8);border: 0.5px solid #EEEEF1;border-radius: 5px;}
.information ul.list{width: 100%;}
.information ul.list li{width: 100%;}
.information ul.list li .padd{width: 100%;padding: 0 12px;}
.information ul.list li .padd .row{padding: 12px 0;height: 48px;border-bottom: 0.5px solid #EEEEF1;}
.information ul.list li .padd .row .left{float: left;font-size: 16px;color: #414852;}
.information ul.list li .padd .row .right{float: right;font-size: 16px;}
.information ul.list li .padd .row .right span.p{font-size: 14px;padding: 0 3px 0 0;}
.information ul.list li .padd .row .right span.p b{font-weight: 400;}
.information ul.list li .padd .row .right span.nc{font-size: 14px;}
.information ul.list li .padd .row .right i{display: block;margin: 3px 0 0 10px;width: 9px;height: 16px;float: right;background: url(../images/icon_right_arrow.svg) no-repeat;}
.information ul.list li  a.row_l{display: block;}
.information ul.list li .padd .row .right .switch{float: right;margin: 0 0 0 8px;}
.information ul.list li .padd .row .right .cmn-toggle{position: absolute;margin-left: -9999px;visibility: hidden;}
.information ul.list li .padd .row .right .cmn-toggle-round + label{margin: 0 3px 0 0;width: 48px;height: 24px;float: right;background-color: #dddddd;border-radius: 20px;}
.information ul.list li .padd .row .right .cmn-toggle + label{display: block;position: relative;cursor: pointer;outline: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.information ul.list li .padd .row .right .cmn-toggle-round + label:before{right: 1px;background-color: #f1f1f1;border-radius: 20px;-webkit-transition: background 0.4s;-moz-transition: background 0.4s;-o-transition: background 0.4s;transition: background 0.4s;}
.information ul.list li .padd .row .right .cmn-toggle-round + label:before, .information ul.list li .padd .row .right .cmn-toggle-round + label:after{display: block;position: absolute;top: 1px;left: 1px;bottom: 1px;content: "";}
.information ul.list li .padd .row .right .cmn-toggle-round + label:after{width: 23px;background-color: #fff;border-radius: 100%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);-webkit-transition: margin 0.4s;-moz-transition: margin 0.4s;-o-transition: margin 0.4s;transition: margin 0.4s;}
.information ul.list li .padd .row .right .cmn-toggle-round:checked + label:before{background-color: #FEBE1E;}
.information ul.list li .padd .row .right .cmn-toggle-round:checked + label:after{margin-left: 24px;}
.information ul.list li .padd .row span.prompt{font-size: 12px;color: #414852;}
.information ul.list li .padd .last{padding: 7px 0;height: 36px;}
.no_shopping{width: 100%;margin: 70px 0 0;text-align: center;}
.no_shopping img{display: block;margin: 0 auto 16px;}
.no_shopping span{color: #908EA1;}
.layer{position: fixed;width: 100%;background: rgba(0,0,0,0.6);top: 0;z-index: 100;left: 0;right: 0;bottom: 0;}
.layer .box{width: 250px;height: 200px;background: #FFFFFF;border-radius: 10px;box-shadow: 0 1px 1px rgba(0,0,0,0.2);position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
.layer .box .title{width: 100%;text-align: center;font-size: 16px;color: #414852;margin: 16px 0 0;}
.layer .box .title img{position: relative;top: 5px;}
.layer .box .title span{font-size: 16px;color: #414852;}
.layer .box ul.txt{margin: 14px 20px 0;}
.layer .box ul.txt li{margin: 3px 0;}
.layer .box .btn_c{width: 72px;height: 24px;margin: 10px auto 0;}
.layer .box .btn_c a{display: block;box-shadow: 0 1px 2px rgba(223,34,54,0.8);width: 72px;height: 24px;border-radius: 5px;text-align: center;line-height: 24px;color: #FFFFFF;background: -webkit-linear-gradient(45deg, #FF7D80, #F04255);background: -o-linear-gradient(45deg, #FF7D80, #F04255);background: -moz-linear-gradient(45deg, #FF7D80, #F04255);background: linear-gradient(45deg, #FF7D80, #F04255);}
.layer .box .btn_c a:hover{opacity: 0.8;}
.layer .close{position: absolute;top: 12px;right: 16px;}
.layer .close a{width: 32px;height: 32px;padding: 6px 0;text-align: center;display: block;}

/* choose_coupons */
.choose_coupons{width: 100%;}
.choose_coupons a.no_use{display: block;width: 100%;height: 48px;box-shadow: 0 10px 15px rgba(238,238,241,0.8);}
.choose_coupons a.no_use .content{width: calc(100% - 30px);margin: 0 15px}
.choose_coupons a.no_use .content span{font-size: 14px;color: #414852;line-height: 48px;}
.choose_coupons a.no_use .content i{width: 20px;height: 20px;display: block;float: right;margin: 14px 0;}
.choose_coupons a.no_use .content i.d{background: url(../images/icon_choose_default.svg) no-repeat;}
.choose_coupons a.no_use .content i.a{background: url(../images/icon_choose_active.svg) no-repeat;}
.choose_coupons .use{width: calc(100% - 30px);margin: 12px 15px 8px;}
.choose_coupons .use .txt{font-size: 12px;float: left;}
.choose_coupons .use .txt span{color: #F04255;font-size: 12px;}
.choose_coupons .use .rule{text-align: right;}
.choose_coupons .use .rule a{font-size: 12px;color: #908EA1;}
ul.coupon li a{display: block;}
ul.coupon li a:hover{opacity: 0.8;}

/* nearby */ 
.nearby{width: 100%;}
.nearby .frist{position: absolute;top: 164px;left: 181px;}
.nearby .second{position: absolute;top: 216px;left: 89px;}
.nearby a{display: block;}
.nearby a i{display: block;width: 24px;height: 39px;background: url(../images/icon_nearby.svg) no-repeat;}
.address_list{width: 100%;position: fixed;left: 0;bottom: 0;max-height: 233px;overflow-y: scroll;background: #FFFFFF;box-shadow: 0 -1px 1px rgba(0,0,0,0.2);}
.address_list .display{width: 100%;text-align: center;margin: 10px 0 8px;font-size: 12px;color: #414852;}
.address_list ul{margin: 8px auto 0;}
.address_list ul li{width: calc(100% - 30px);margin: 0 15px 18px;box-shadow: 0 10px 15px rgba(238,238,241,0.8);padding: 10px 12px 12px;border: 0.5px solid #EEEEF1;border-radius: 5px;}
.address_list ul li .left_con{width: calc(100% - 52px);float: left;position: relative;}
.address_list ul li .left_con .addr{color: #414852;}
.address_list ul li .left_con .walk{position: absolute;top: 40px;right: 12px;}
.address_list ul li .left_con .walk i{display: block;float: right;width: 9px;height: 11px;background: url(../images/icon_walk.svg) no-repeat;position: relative;top: 3px;margin: 0 2px 0 0;}
.address_list ul li .left_con .walk span{font-size: 12px;float: right;}
.address_list ul li .right_con{float: right;padding: 0 0 0 12px;height: 58px;background: url(../images/icon_dotted_line.svg) no-repeat;}
.address_list ul li .right_con a{display: block;margin: 14px 0;}
.address_list ul li .right_con a:hover{opacity: 0.8}
.no_signal{width: 100%;margin: 70px 0 0;text-align: center;}
.no_signal img{display: block;margin: 0 auto 16px;}
.no_signal span{color: #908EA1;}

/* package */ 
.coffee_list{width: calc(100% - 30px);margin: 0 15px;padding: 0 0 130px;}
.coffee_list .coffee_row{margin: 30px 0 0;}
.coffee_list .first{margin: 16px 0 0;}
.coffee_list .coffee_row .coffee_block{width: calc(50% - 6px);float: left;border-radius: 5px;margin: 0 auto;box-shadow: 0 10px 15px rgba(238,238,241,0.8);min-height: 164px;}
.coffee_list .coffee_row .b_lef{margin: 0 6px 0 0;}
.coffee_list .coffee_row .b_rig{margin: 0 0 0 6px;}
.coffee_list .coffee_row .coffee_block .bor{border-radius: 5px;margin: 0 auto;padding: 12px 0  0;text-align: center;}
.coffee_list .coffee_row .coffee_block .cappuccino{border-top: 3px solid rgba(120,77,32,0.8);}
.coffee_list .coffee_row .coffee_block .americano{border-top: 3px solid rgba(158,61,22,0.8);}
.coffee_list .coffee_row .coffee_block .espresso{border-top: 3px solid rgba(211,146,37,0.8);}
.coffee_list .coffee_row .coffee_block .latte{border-top: 3px solid rgba(208,93,55,0.8);}
.coffee_list .coffee_row .coffee_block .mochaccino{border-top: 3px solid rgba(79,30,4,0.8);}
.coffee_list .coffee_row .coffee_block .milktea{border-top: 3px solid rgba(170,83,17,0.8);}
.coffee_list .coffee_row .coffee_block .walnutcoixseed{border-top: 3px solid rgba(187,39,19,0.8);}
.coffee_list .coffee_row .coffee_block .bsesamerice{border-top: 3px solid rgba(61,57,54,0.8);}
.coffee_list .coffee_row .coffee_block .chocolates{border-top: 3px solid rgba(114,49,20,0.8);}
.coffee_list .coffee_row .coffee_block .chocolatemilk{border-top: 3px solid rgba(150,82,36,0.8);}
.coffee_list .coffee_row .coffee_block .milk{border-top: 3px solid rgba(104,104,104,0.8);}
.coffee_list .coffee_row .coffee_block .new{border-top: 3px solid rgba(247,107,28,0.8);}
.coffee_list .coffee_row .coffee_block .bor img{margin: 0 3px;}
.coffee_list .coffee_row .coffee_block .txt{width: calc(100% - 16px);margin: 15px 8px 0;position: relative;}
.coffee_list .coffee_row .coffee_block .txt .name{margin: auto;}
.coffee_list .coffee_row .coffee_block .txt .name h4{font-size: 16px;color: #414852;}
.coffee_list .coffee_row .coffee_block .txt .name h4.n{font-size: 14px;color: #414852;text-align: center;}
.coffee_list .coffee_row .coffee_block .txt .name .st{position: relative;z-index: 1;}
.coffee_list .coffee_row .coffee_block .txt .name .st ul{margin: 2px 0 0;}
.coffee_list .coffee_row .coffee_block .txt .name .st ul li{font-size: 12px;}
.coffee_list .coffee_row .coffee_block .txt .name .st .brief{font-size: 12px;display: inline-block;max-width: 98px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}
.coffee_list .coffee_row .coffee_block .txt .name .st a{display: inline-block;width: 12px;height: 17px;background: url(../images/btn_down_arrow.svg) center center no-repeat;}
.coffee_list .coffee_row .coffee_block .txt .name .st a:hover, .coffee_list .coffee_row .coffee_block .txt .name .st a.hover{background: url(../images/btn_up_arrow.svg) center center no-repeat;}
.coffee_list .coffee_row .coffee_block .txt .two_pri{top: 0;}
.coffee_list .coffee_row .coffee_block .txt .price .up{color: #414852;}
.coffee_list .coffee_row .coffee_block .txt .price .up span{color: #414852;font-size: 16px;}
.coffee_list .coffee_row .coffee_block .txt .price .down{font-size: 12px;color: #908EA1;text-decoration: line-through;text-align: right;}
.coffee_list .coffee_row .coffee_block .btn_buy{width: 100%;height:26px;position: relative;background: transparent;}
.coffee_list .coffee_row .coffee_block .btn_buy a{position: absolute;width: 30px;height: 30px;margin: auto;top: 13px;left: 0;right: 0;display: block;}
.coffee_list .coffee_row .coffee_block .btn_buy a.add{background: url(../images/btn_add.svg) no-repeat;z-index: 3;}
.coffee_list .coffee_row .coffee_block .btn_buy a.reduce{background: url(../images/btn_reduce.svg) no-repeat;z-index: 2;}
.coffee_list .coffee_row .coffee_block .btn_buy span{position: absolute;z-index: 1;top: 13px;left: 0;right: 0;margin: auto;background: #FFFFFF;color: #414852;width: 10px;text-align: center;height: 30px;line-height: 30px;font-size: 16px;color: #414852;box-shadow: 0 6px 8px rgba(238,238,241,0.8);border: 0.5px solid #EEEEF1;display: block;border-radius: 30px;}
.coffee_list .coffee_row .coffee_block .btn_buy a.add_act{left: 52px;transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}
.coffee_list .coffee_row .coffee_block .btn_buy span.active{-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;width: 84px;}
.coffee_list .coffee_row .coffee_block .btn_buy a.red_act{right: 52px;transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}
/*.coffee_list .coffee_row .coffee_block .btn_buy a{position: absolute;z-index: 1;top: 13px;left: 0;right: 0;margin: auto;background: #FFFFFF;color: #414852;width: 10px;text-align: center;height: 30px;line-height: 30px;font-size: 16px;color: #414852;box-shadow: 0 6px 8px rgba(238,238,241,0.8);border: 0.5px solid #EEEEF1;display: block;border-radius: 30px;}
.coffee_list .coffee_row .coffee_block .btn_buy a:before{content: "";-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;position: absolute;width: 30px;height: 30px;margin: auto;top: 0;left: -10px;right: 0;display: block;background: url(../images/btn_add.svg) no-repeat;z-index: 3;}
.coffee_list .coffee_row .coffee_block .btn_buy a:after{content: "";-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;position: absolute;width: 30px;height: 30px;margin: auto;top: 0;left: -10px;right: 0;display: block;background: url(../images/btn_reduce.svg) no-repeat;z-index: 2;}
.coffee_list .coffee_row .coffee_block .btn_buy a:hover{width: 84px;}
.coffee_list .coffee_row .coffee_block .btn_buy a:hover::before{left: 52px;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}
.coffee_list .coffee_row .coffee_block .btn_buy a:hover::after{right: 52px;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}*/

/* personal */
.personal{width: 100%;margin: auto;text-align: center;position: relative;}
.personal a.cb{display: block;width: 100%;background: url(../images/bg_coffee_bean.jpg) no-repeat;background-size: cover;padding: 42px 0 0;height: 160px;}
.personal a i{width: 68px;height: 68px;margin: 0 auto;display: block;background: url(../images/icon_coffee_beans.svg) no-repeat;}
.personal a p{text-align: center;color: #FEBE1E;margin: 5px 0 0;}
.personal a p span{color: #FEBE1E;}
.personal a .coffee_beans{margin: auto;}
.personal a img.r{display: block;width: 100%;}
.personal ul.menu_list{box-shadow: 0 10px 15px rgba(238,238,241,0.8);}
.personal ul.menu_list li{width: 100%;}
.personal ul.menu_list li a{display: block;}
.personal ul.menu_list li a .block{margin: auto;}
.personal ul.menu_list li a .block .icon{width: 24px;height: 24px;margin: 12px 15px 0 15px;float: left;}
.personal ul.menu_list li a .block .txt{width: calc(100% - 54px);text-align: left;margin: 14px 0 0;padding: 0 0 14px 0;float: left;border-bottom: 0.5px solid #EEEEF1;}
.personal ul.menu_list li a .block .txt span{color: #414852;}
.personal ul.menu_list li a .block .txt i{display: block;margin: 2px 12px 0 10px;width: 9px;height: 16px;float: right;background: url(../images/icon_right_arrow.svg) no-repeat;}
.personal ul.menu_list li a .block .last{border: none;}

/* coffee_beans */
.personal .cof_bea{display: block;width: 100%;background: url(../images/bg_coffee_bean.jpg) no-repeat;background-size: cover;height: 160px;}
.personal .cof_bea a.rule{position: absolute;top: 4px;right: 8px;display: block;width: 32px;height: 32px;padding: 8px;}
.personal .cof_bea .pos{position: absolute;top: 92px;left: 0;right: 0;margin: auto;z-index: 1;}
.personal .cof_bea .pos h4{font-size: 16px;color: #FEBE1E;margin: 0 0 12px;}
.personal .cof_bea .pos i{width: 80px;height: 80px;margin: 0 auto;display: block;background: url(../images/icon_coffee_beans.svg) no-repeat;background-size: 100%;}
.personal .cof_bea .pos span{font-size: 16px;color:  #414852;}
.personal .recharge{margin: 100px auto 0;}
.personal .recharge a{width: 88px;margin: 0 auto 14px;box-shadow: 0 1px 2px rgba(223,34,54,0.8);height: 36px;text-align: center;display: block;font-size: 16px;line-height: 36px;color: #FFFFFF;border-radius: 5px;background: -webkit-linear-gradient(45deg, #FF7D80, #F04255);background: -o-linear-gradient(45deg, #FF7D80, #F04255);background: -moz-linear-gradient(45deg, #FF7D80, #F04255);background: linear-gradient(45deg, #FF7D80, #F04255);}
.personal .recharge a:hover{opacity: 0.8;}
.personal a.detailed{color: #908EA1;width: 100%;text-align: center;text-decoration: underline;}

/* coffee_beans_explain */
.explain{width: calc(100% - 30px);margin: 16px 15px 0;}
.explain h4{font-size: 16px;color: #414852;}
.explain ul{margin: 10px 0 0;list-style: decimal;padding: 0 0 0 15px;}
.explain ul li{width: 100%;list-style: decimal;padding: 2px 0;margin: 3px 0;color: #414852;font-size: 12px;}

/* coffee_beans_details */
ul.cb_details{width: 100%;box-shadow: 0 10px 15px rgba(238,238,241,0.8);margin: 0 0 50px 0;}
ul.cb_details li{width: calc(100% - 30px);margin: 0 15px;height: 60px;border-bottom: 0.5px solid #EEEEF1;padding: 10px 0 0;}
ul.cb_details li .lef{float: left;}
ul.cb_details li .lef .u span.r{color: #414852;}
ul.cb_details li .lef .u span.m{font-size: 12px;}
ul.cb_details li .lef .u span.m b{font-weight: 400;color: #414852;font-size: 14px;}
ul.cb_details li .lef .d{margin: 3px 0 0;font-size: 12px;}
ul.cb_details li .rig{float: right;}
ul.cb_details li .rig .u{color: #414852;font-size: 12px;text-align: right;margin: 2px 0 0;}
ul.cb_details li .rig .d{font-size: 12px;text-align: right;margin: 3px 0 0;}
ul.cb_details li:last-child{border: none;}
.no_beans{width: 100%;margin: 70px 0 0;text-align: center;}
.no_beans img{display: block;margin: 0 auto 16px;}
.no_beans span{color: #908EA1;}
.no_beans span a{text-decoration: underline;color: #F04255;}

/* coffee_beans_recharge */
ul.cb_recharge{width: calc(100% - 20px);margin: 88px 5px 0 15px;}
ul.cb_recharge li{width: 33.33%;height: 108px;float: left;}
ul.cb_recharge li a{display: block;width: calc(100% - 10px);position: relative;top: 0;margin: 0 10px 0 0;height: 108px;background: #FFFFFF;border-radius: 5px;border: 0.5px solid #EEEEF1;}
ul.cb_recharge li a:hover, ul.cb_recharge li a.hover{box-shadow: 0 6px 8px rgba(238,238,241,0.8);position: relative;top: -6px;transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;}
ul.cb_recharge li a .price{border-radius: 5px 5px 0 0;height: 76px;position: relative;}
ul.cb_recharge li a .no_sel{background: -webkit-linear-gradient(-180deg, #DCDCE2, #908EA1);background: -o-linear-gradient(-180deg, #DCDCE2, #908EA1);background: -moz-linear-gradient(-180deg, #DCDCE2, #908EA1);background: linear-gradient(-180deg, #DCDCE2, #908EA1);}
ul.cb_recharge li a .twenty{background: -webkit-linear-gradient(-180deg, #3DDF5E, #2EB73F);background: -o-linear-gradient(-180deg, #3DDF5E, #2EB73F);background: -moz-linear-gradient(-180deg, #3DDF5E, #2EB73F);background: linear-gradient(-180deg, #3DDF5E, #2EB73F);}
ul.cb_recharge li a .fifty{background: -webkit-linear-gradient(-180deg, #C190E4, #8D57C4);background: -o-linear-gradient(-180deg, #C190E4, #8D57C4);background: -moz-linear-gradient(-180deg, #C190E4, #8D57C4);background: linear-gradient(-180deg, #C190E4, #8D57C4);}
ul.cb_recharge li a .hundred{background: -webkit-linear-gradient(-180deg, #E490D0, #C457A2);background: -o-linear-gradient(-180deg, #E490D0, #C457A2);background: -moz-linear-gradient(-180deg, #E490D0, #C457A2);background: linear-gradient(-180deg, #E490D0, #C457A2);}
ul.cb_recharge li a .price .txt{height: 76px;color: #FFFFFF;font-weight: 200;position: relative;text-align: left;}
ul.cb_recharge li a .price .txt span{width: 100%;display: block;color: #FFFFFF;position: absolute;bottom: 8px;left: 10px;}
ul.cb_recharge li a .price .txt span b{font-size: 18px;font-weight: 200;}
ul.cb_recharge li a .price img{position: absolute;bottom: 8px;right: 6px;}
ul.cb_recharge li a .number{width: 100%;height: 32px;font-size: 12px;line-height: 32px;color: #414852;text-align: right;padding: 0 10px 0 0;}
.pay{width: 100%;background: #F2F2F5;border-top: 1px solid #EEEEF1;position: fixed;bottom: 50px;left: 0;height: 80px;}
.pay a.btn{width: 88px;margin: 12px auto 6px;box-shadow: 0 1px 2px rgba(223,34,54,0.8);height: 36px;text-align: center;display: block;font-size: 16px;line-height: 36px;color: #FFFFFF;border-radius: 5px;background: -webkit-linear-gradient(45deg, #FF7D80, #F04255);background: -o-linear-gradient(45deg, #FF7D80, #F04255);background: -moz-linear-gradient(45deg, #FF7D80, #F04255);background: linear-gradient(45deg, #FF7D80, #F04255);}
.pay a.btn:hover{opacity: 0.8;}
.pay .agm{width: 100%;text-align: center;font-size: 12px;}
.pay .agm input{position: relative;top: 2px;margin: 0 2px 0 0;;}
.pay .agm a{font-size: 12px;text-decoration: underline;color: #908EA1;}

/* coffee_beans_agreement */
.agreement{margin: 12px 0 0;}
.agreement h4{margin: 0 0 12px 0;font-size: 16px;font-weight: 600;color: #414852;text-align: center;}
.agreement ul{margin: 10px 15px 0;width: calc(100% - 30px);padding: 0 0 50px;}
.agreement ul li{margin: 0 0 15px 0;}
.agreement ul li h5{color: #414852;}
.agreement ul li p{font-size: 12px;color: #414852;margin: 2px 0 0 20px;}

/* my_coffee */
ul.list_sett li .mar{margin: 18px 0 0 16px;}
ul.list_sett li .name .code{margin: 8px 0 0;}
ul.list_sett li .name .code span{color: #414852;}
ul.list_sett li .cup{float: right;color: #414852;margin: 32px 12px 0 0;}
ul.list_sett li .cup span{font-size: 16px;color: #414852;}
.scan_code{width: 100%;background: #F2F2F5;border-top: 1px solid #EEEEF1;position: fixed;bottom: 50px;left: 0;height: 60px;}
.scan_code a.btn{width: 120px;margin: 12px auto 0;box-shadow: 0 1px 2px rgba(223,34,54,0.8);height: 36px;text-align: center;display: block;font-size: 16px;line-height: 36px;color: #FFFFFF;border-radius: 5px;background: -webkit-linear-gradient(45deg, #FF7D80, #F04255);background: -o-linear-gradient(45deg, #FF7D80, #F04255);background: -moz-linear-gradient(45deg, #FF7D80, #F04255);background: linear-gradient(45deg, #FF7D80, #F04255);}
.scan_code a.btn:hover{opacity: 0.8;}
.no_coffee{width: 100%;margin: 70px 0 0;text-align: center;}
.no_coffee img{display: block;margin: 0 auto 16px;}
.no_coffee span{color: #908EA1;}

/* my_order */
.order{margin: 12px 0 0;}
.order ul.ord{width: calc(100% - 30px);margin: 0 15px;}
.order ul.ord li a{display: block;}
.order ul.ord li.blo{border: 0.5px solid #EEEEF1;box-shadow: 0 10px 15px rgba(238,238,241,0.8);border-radius: 5px;padding: 10px 12px;margin: 0 0 18px 0;}
.order ul.ord li.blo .content{position: relative;border-bottom: 0.5px solid #EEEEF1;padding: 0 0 8px;}
.order ul.ord li.blo .content .txt{margin: 0 0 3px;}
.order ul.ord li.blo .content .txt label{font-size: 12px;float: left;display: block;width: 60px;text-align: right;}
.order ul.ord li.blo .content .txt span{width: calc(100% - 64px);font-size: 12px;color: #414852;float: left;display: block;}
.order ul.ord li.blo .content .label{width: 72px;height: 20px;line-height: 20px;text-align: center;font-size: 12px;position: absolute;z-index: 1;top: -1px;right: 0;border-radius: 20px;}
.order ul.ord li.blo .content .public{border: 0.5px solid #FEBE1E;color: #FEBE1E;}
.order ul.ord li.blo .content .equipment{border: 0.5px solid #25CA3A;color: #25CA3A;}
.order ul.ord li.blo .infor{margin: 10px 0 0;position: relative;}
.order ul.ord li.blo .infor ul li{color: #414852;margin: 0 0 2px;}
.order ul.ord li.blo .infor .paid{font-size: 12px;position: absolute;right: 0;bottom: 1px;}
.order ul.ord li.blo .infor .paid span{color: #414852;}
.order .no_ord{font-size: 12px;text-align: center;padding: 0 0 60px 0;}

/* order_detail */
.order ul.ord li.blo .product{padding: 12px 0 12px 12px;}
.order ul.ord li.blo .product .name .c_n h4{font-size: 14px;}
.order ul.ord li.blo .product .img{padding: 0 12px 0 0;width: 38px;height: 40px;float: left;background: url(../images/icon_dotted_line.svg) right center no-repeat;}
.order ul.ord li.blo .product .img img{width: 25px;}
.order ul.ord li.blo .name{float: left;margin: 1px 0 0 16px;}
.order ul.ord li.blo .name .c_n h4{font-size: 16px;color: #414852;}
.order ul.ord li.blo .name .c_n span{font-size: 12px;position: relative;top: -3px;}
.order ul.ord li.blo .cup{float: right;color: #414852;margin: 8px 12px 0 0;}
.order ul.ord li.blo .cup span{font-size: 16px;color: #414852;}
.order ul.ord li.blo .content .padd{border-top: 0.5px solid #F7F7FA;border-bottom: 0.5px solid #F7F7FA;padding: 8px 0;}
.order ul.ord li.blo .content .paid{font-size: 12px;text-align: right;padding: 5px 0 0;}
.order ul.ord li.blo .content .paid span{color: #414852;}
.order ul.ord li.blo .mar_p{padding: 12px 0 0;border: none;}

/* coupon */
.coupon_page{margin: 8px 0 0;}
.coupon_page .usage_rules{width: 100%;text-align: right;padding: 0 15px;}
.coupon_page .usage_rules a{font-size: 12px;color: #908EA1;}
ul.cou_mar{margin: 5px 15px 0;padding: 0 0 50px;}
ul.coupon li .state{width: 67px;height: 59px;position: absolute;top: 0;right: 0;z-index: 1;}
ul.coupon li .expire{background: url(../images/icon_expire.svg) no-repeat;}
ul.coupon li .used{background: url(../images/icon_used.svg) no-repeat;}

/* setting */
.setting{margin: auto;}
.setting ul.menu_list{box-shadow: 0 10px 15px rgba(238,238,241,0.8);}
.setting ul.menu_list li{width: 100%;}
.setting ul.menu_list li a{display: block;}
.setting ul.menu_list li a .block{margin: auto;}
.setting ul.menu_list li a .block .icon{width: 24px;height: 24px;margin: 12px 15px 0 15px;float: left;}
.setting ul.menu_list li a .block .txt{width: calc(100% - 54px);margin: 14px 0 0;padding: 0 0 14px 0;float: left;border-bottom: 0.5px solid #EEEEF1;}
.setting ul.menu_list li a .block .txt span{color: #414852;}
.setting ul.menu_list li a .block .txt i{display: block;margin: 2px 12px 0 10px;width: 9px;height: 16px;float: right;background: url(../images/icon_right_arrow.svg) no-repeat;}
.setting ul.menu_list li a .block .last{border: none;}
.layer .tips{width: 161px;height: 80px;text-align: center;}
.layer .tips p.txt{width: 100%;padding: 16px 0;}
.layer .tips .btn_cho{width: 100%;border-top: 0.5px solid #EEEEF1;position: absolute;bottom: 0;}
.layer .tips .btn_cho a{color: #414852;display: block;float: left;height: 32px;line-height: 32px;}
.layer .tips .btn_cho a.cancel{width: 81px;border-right: 0.5px solid #EEEEF1;border-radius: 0 0 0 10px;}
.layer .tips .btn_cho a.confirm{width: 80px;border-radius: 0 0 10px 0;}

/* about_us */
.qr{margin: auto;position: absolute;top: -25px;bottom: 0;left: 0;right: 0;height: 150px;}
.qr .box{width: 108px;height: 108px;margin: auto;text-align: center;padding: 10px 0;box-shadow: 0 5px 6px rgba(238,238,241,0.8);border: 0.5px solid #EEEEF1;border-radius: 5px;}
.qr p{width: 100%;margin: 16px 0 0;text-align: center;}

/* making_coffee */
.btn_mak{float: right;margin: 32px 12px 0;}
.btn_mak a{width: 72px;height: 24px;font-size: 12px;display: block;text-align: center;line-height: 24px;color: #ffffff;border-radius: 5px;box-shadow: 0 1px 2px rgba(223,34,54,0.8);border-radius: 5px;background: -webkit-linear-gradient(45deg, #FF7D80, #F04255);background: -o-linear-gradient(45deg, #FF7D80, #F04255);background: -moz-linear-gradient(45deg, #FF7D80, #F04255);background: linear-gradient(45deg, #FF7D80, #F04255);}
ul.li_p{padding: 0 0 60px;}
.layer .box .cof{width: 100%;text-align: center;padding: 24px 0 0;}
.layer .box .cof span{display: block;color: #414852;padding: 5px 0 0;}
.layer .box ul.btn_sugar{width: calc(100% - 50px);margin: 16px 25px 0;}
.layer .box ul.btn_sugar li{float: left;}
.layer .box ul.btn_sugar li a{display: block;width: 54px;height: 48px;margin: 0 19px 0 0;}
.layer .box ul.btn_sugar li a.no{background: url(../images/btn_no_sugar.svg) no-repeat;}
.layer .box ul.btn_sugar li a.le{background: url(../images/btn_less_sugar.svg) no-repeat;}
.layer .box ul.btn_sugar li a.to{background: url(../images/btn_total_sugar.svg) no-repeat;margin: 0;}
.bg_mak{width: 100%;height: 100%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;}
.bg_mak img{width: 100%;height: 100%;display: block;}

/* tips_box */
.lay_tips{position: fixed;width: 100%;background: rgba(0,0,0,0.6);top: 0;z-index: 100;left: 0;right: 0;bottom: 0;}
.lay_tips .box{width: 180px;background: #FFFFFF;border-radius: 10px;box-shadow: 0 1px 1px rgba(0,0,0,0.2);position: absolute;top: 220px;left: 0;right: 0;margin: auto;}
.lay_tips .box h4{text-align: center;color: #414852;margin: 15px 0 0;font-size: 16px;}
.lay_tips .box p{margin: 10px 10px 15px;text-align: center;}

/* loading */
.loa_lay{position: fixed;width: 100%;background: rgba(0,0,0,0.4);top: -30px;z-index: 98;left: 0;right: 0;bottom: 0;}
.loa_lay .loader{position: absolute;top: 0;bottom: 0;left: 0;right: 0;border-radius: 50%;margin: auto;display: inline-block;vertical-align: middle;}
.loa_lay .loader-star{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
.loa_lay .loader-2 .loader-star{position: absolute; width: 60px; height: 60px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation: loader-2-star 1s ease alternate infinite; animation: loader-2-star 1s ease alternate infinite; }
.loa_lay .loader-2 .loader-circles{width: 8px; height: 8px; border-radius: 50%; position: absolute; left: calc(50% - 4px); top: calc(50% - 4px); -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-animation: loader-2-circles 1s ease-in-out alternate infinite; animation: loader-2-circles 1s ease-in-out alternate infinite; }
/*.loa_lay{position: fixed;width: 100%;background: rgba(0,0,0,0.4);top: 0;z-index: 100;left: 0;right: 0;bottom: 0;}
.loa_lay .loading::after {content: '';z-index: 1000;}
.loa_lay .loading::after {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 32px;height: 32px;margin:auto;border: 6px solid rgba(0,0,0,0.65);border-bottom-color: rgba(255,255,255,1);border-radius: 50%;animation: animLoader 0.8s linear forwards infinite;}
@keyframes animLoader { to { transform: rotate(360deg); }. }
*/
@-webkit-keyframes loader-2-circles {
0% { box-shadow: 0 0 0 #414852;opacity: 1;-webkit-transform: rotate(0deg);transform: rotate(0deg);}
50% {box-shadow: 24px -22px #414852, 30px -15px 0 -3px #414852, 31px 0px #414852, 29px 9px 0 -3px #414852, 24px 23px #414852, 17px 30px 0 -3px #414852, 0px 33px #414852, -10px 28px 0 -3px #414852, -24px 22px #414852, -29px 14px 0 -3px #414852, -31px -3px #414852, -30px -11px 0 -3px #414852, -20px -25px #414852, -12px -30px 0 -3px #414852, 5px -29px #414852, 13px -25px 0 -3px #414852;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
100% {opacity: 0;-webkit-transform: rotate(360deg);transform: rotate(360deg);box-shadow: 25px -22px #414852, 15px -22px 0 -3px black, 31px 2px #414852, 21px 2px 0 -3px black, 23px 25px #414852, 13px 25px 0 -3px black, 0px 33px #414852, -10px 33px 0 -3px black, -26px 24px #414852, -19px 17px 0 -3px black, -32px 0px #414852, -23px 0px 0 -3px black, -25px -23px #414852, -16px -23px 0 -3px black, 0px -31px #414852, -2px -23px 0 -3px black;}  }
 
@keyframes loader-2-circles {
0% {box-shadow: 0 0 0 #414852;opacity: 1;-webkit-transform: rotate(0deg);transform: rotate(0deg);}
50% {box-shadow: 24px -22px #414852, 30px -15px 0 -3px #414852, 31px 0px #414852, 29px 9px 0 -3px #414852, 24px 23px #414852, 17px 30px 0 -3px #414852, 0px 33px #414852, -10px 28px 0 -3px #414852, -24px 22px #414852, -29px 14px 0 -3px #414852, -31px -3px #414852, -30px -11px 0 -3px #414852, -20px -25px #414852, -12px -30px 0 -3px #414852, 5px -29px #414852, 13px -25px 0 -3px #414852;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
100% {opacity: 0;-webkit-transform: rotate(360deg);transform: rotate(360deg);box-shadow: 25px -22px #414852, 15px -22px 0 -3px black, 31px 2px #414852, 21px 2px 0 -3px black, 23px 25px #414852, 13px 25px 0 -3px black, 0px 33px #414852, -10px 33px 0 -3px black, -26px 24px #414852, -19px 17px 0 -3px black, -32px 0px #414852, -23px 0px 0 -3px black, -25px -23px #414852, -16px -23px 0 -3px black, 0px -31px #414852, -2px -23px 0 -3px black;}  }
 
@-webkit-keyframes loader-2-star {
0% {-webkit-transform: scale(0) rotate(0deg);transform: scale(0) rotate(0deg);}
100% {-webkit-transform: scale(0.7) rotate(360deg);transform: scale(0.7) rotate(360deg);}  }
 
@keyframes loader-2-star {
0% {-webkit-transform: scale(0) rotate(0deg);transform: scale(0) rotate(0deg);}
100% {-webkit-transform: scale(0.7) rotate(360deg);transform: scale(0.7) rotate(360deg);} }

@media (max-width: 414px) {
/* register_success */
ul.coupon{margin: 0 15px 0;}
ul.cou_mar{margin: 5px 15px 0;}
ul.coupon li .l_txt{top: 16px;font-size: 18px;left: 35px;}
ul.coupon li .l_txt span{font-size: 18px;}
ul.coupon li .r_txt{top: 25px;left: 120px;width: calc(100% - 140px);}
ul.coupon li .r_txt .one span{font-size: 24px;} 
ul.coupon li .r_txt .two{font-size: 16px;}
ul.coupon li .r_txt .three{font-size: 14px;}
ul.coupon li .r_txt .four{font-size: 14px;}
ul.coupon li .free{top: 45px;}  }

@media (max-width: 394px) {
/* register_success */
ul.coupon{margin: 5px 15px 0;} 
ul.cou_mar{margin: 5px 15px 0;}
ul.coupon li .l_txt{top: 17px;font-size: 16px;}
ul.coupon li .r_txt{top: 25px;}
ul.coupon li .r_txt .two{font-size: 14px;}
ul.coupon li .r_txt .three{font-size: 12px;}
ul.coupon li .r_txt .four{font-size: 12px;}
ul.coupon li .free{top: 45px;}  }

@media (max-width: 375px) {
/* register_success */
ul.coupon{margin: 10px 15px 0;} 
ul.cou_mar{margin: 5px 15px 0;}
ul.coupon li .l_txt{top: 14px;font-size: 16px;left: 32px;}
ul.coupon li .l_txt span{font-size: 16px;}
ul.coupon li .r_txt{top: 25px;left: 110px;width: calc(100% - 130px);}
ul.coupon li .r_txt .one span{font-size: 21px;} 
ul.coupon li .free{top: 45px;}  }

@media (max-width: 360px) {
/* register_success */
ul.cou_mar{margin: 5px 15px 0;}
ul.coupon li .l_txt{top: 12px;}
ul.coupon li .r_txt{top: 20px;left: 105px;width: calc(100% - 125px);}
ul.coupon li .free{top: 35px;}
/* single */
ul.coffee_list li .name .price span{font-size: 15px;}  }

@media (max-width: 340px) {
/* register_success */
ul.coupon{margin: 15px 15px 0;} 
ul.cou_mar{margin: 5px 15px 0;}
ul.coupon li .l_txt{left: 30px;font-size: 14px;}
ul.coupon li .r_txt{top: 15px;left: 100px;width: calc(100% - 120px);}
ul.coupon li .free{top: 30px;}
/* single */
.coffee_list{width: calc(100% - 16px);margin: 0 8px;}
.coffee_list .coffee_row .coffee_block{width: calc(50% - 3px);}
.coffee_list .coffee_row .b_lef{margin: 0 3px 0 0;}
.coffee_list .coffee_row .b_rig{margin: 0 0 0 3px;}
.coffee_list .coffee_row .coffee_block .txt{width: calc(100% - 10px);margin: 15px 5px 0;}
a.nearby_link .nearby table.address{width: calc(100% - 64px);margin: 0 0 0 16px;}
a.nearby_link .nearby .icon_nearby{margin: 14px 12px 0 16px}
/* coffee_beans_recharge */ 
ul.cb_recharge{width: calc(100% - 15px);margin: 80px 5px 0 10px}
ul.cb_recharge li a{width: calc(100% - 5px);margin: 0 5px 0 0;}  }


@media (max-width: 320px) {
ul.coupon{width: 100%;margin: 25px 15px 0;}
ul.cou_mar{margin: 5px 15px 0;}
ul.coupon li .l_txt{top: 10px;left: 27px;font-size: 14px;}
ul.coupon li .l_txt span{font-size: 14px;}
ul.coupon li .r_txt{top: 15px;left: 90px;width: calc(100% - 110px);}
ul.coupon li .r_txt .one{font-size: 12px;}
ul.coupon li .r_txt .one span{font-size: 18px;}
ul.coupon li .free{top: 30px;}
/* single */
.coffee_list{width: calc(100% - 12px);margin: 0 6px;}   }