*{box-sizing: border-box;position: relative;margin: 0;padding: 0;font-family: 'Open Sans', Arial, sans-serif;}
body{/*background-color: #d3f1f7;*/}
img{max-width: 100%;}
a{cursor: pointer; color: #000000;}
header{width: 100%;display: block;}
i{display: inline-block; width: 14px; height: 14px;}
.icon_notlog{background: url(../image/notlog.png) center no-repeat; background-size: contain; }
.icon_login{background: url(../image/login.png) center no-repeat; background-size: contain;}

#header .headerTop{position: absolute;top: 0;right: 7%;z-index: 9;}
#header .headerTop .nav{display: block;}
#header .headerTop .pull-right{margin-left: auto;}
#title{font-size: 20px; color: #ffffff;}
#header ul.nav li{margin-left:6px ;}
#header #cart .content {display: none;position: absolute;min-height: 140px;width: 320px;margin-top: -1px;padding: 16px;border: 1px solid #CCC;background: #FFF;webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 5px rgba(0,0,0,.2);box-shadow: 0 1px 5px rgb(0 0 0 / 20%); z-index: 999999999999999; }
#header .logoContent{display: inline-table; width: 375px; height: 141px; color: #46c4e1; text-align: center; margin: auto;}
#header a:hover {color: black;}
#header .logoContent dt{display: table-cell; width:217px ;/*height:193px ;*/}
#header .logoContent dd{display: table-cell; font-weight: 500; text-align: left;}

.container{margin: auto;}
.nav_con{margin: 0;}
.nav_con .nav11  { width: 100%; display: flex; justify-content: center; align-items: center; list-style: none; background-color: #fff; padding-left:20px; margin: 0; margin-bottom: 15px;}
.nav_con a { text-decoration: none; color: #000; display: block; transition: .3s background-color; float:left; margin-left: 5px; font-size: 18px; padding: 3px; width: calc(100% - 40px); background: url(../image/navlink_bg.jpg) no-repeat left content-box; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
/*#header .nav_con a:hover {color: #fff; }*/
.nav a.active { background-color: #fff; color: #444; cursor: pointer; }
.nav_con li { width: calc((100% / 6) - 20px); border-bottom: none; font-size: 1.4em; float: left;/*background-color: #00c3e3;*/opacity: 0.8;margin: 0 10px;/*padding: 0 18px;*/}  
.nav_con li:last-child{background-color: #fff;}
.nav_con li:last-child a{background-image: none;}
.nav_con li:hover{opacity: 1;}
.nav_con li img{float:left; width: 21%; /*border-radius: 50%;*/}
.nav_con li:last-child img{border-radius: 0%;}
#header .nav_con li:last-child a{color: #000;}
.nav_con li.icons a img{height: 27px; width: 27px; margin-right: 5px;}
.nav_con li.icons a, .nav_con li.icons a span{font-size: 14px;float: none;align-items: center; height: 30px;}
/*searchbox*/
/*.search-container{padding: 0 40px;}*/
.searchbox{width: 100%;}
.searchbox .form-control{display: inline-block; width: calc(100% - 60px);}
.searchbox .btn{border: 1px solid #52c7df; width: 58px; background-color: #52c7df;color: #fff;}

/*slider*/
.swiper-container{display: block;width: 100%;}
.swiper-container .swiper-slide {display: block; width: 100%;}
.swiper-container .swiper-slide .swiper-box { padding-top: 56.25%; height: 0;}
.swiper-container .swiper-slide .swiper-box img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.swiper-prev, .swiper-next {width:36px;height:36px;font-size: 20px;line-height: 0; /*border: 1px solid #cecece; border-radius: 50%;*/}
.swiper-prev:after, .swiper-next:after {content: "\f054"; font-family: 'FontAwesome'; font-size: 40px; display: flex; justify-content: center; align-items: center; width: 24px;height: 24px; color: #49B3C8; cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99; opacity: .5;-webkit-transition: opacity .35s linear 0s;transition: opacity .35s linear 0s;}
.swiper-prev:hover:after, .swiper-next:hover:after {opacity: 1;}
.swiper-prev {left:10px; transform: rotate(180deg);}
.swiper-next{right:10px;}
.swiper-prev:hover, .swiper-prev:focus, .swiper-next:hover, .swiper-next:focus {opacity: 1;}
.swiper-pagination {margin: 10px 0; position: relative ; bottom: 0;}
.swiper-pagination .swiper-pagination-bullet{margin: 0 5px;}
.module-title{width: 150px; margin: 40px auto 15px;text-align: center;position: relative;font-size: 27px;font-weight: bold}

/*nav-title*/
#nav_title{}
#nav_title .nav_title{padding: 10px 0; background-color: #f3f3f3;margin-bottom: 20px;}
#nav_title .nav_title ul.nav{padding: 0 20px;}
#nav_title .nav_title ul.nav li{margin: 0 6px;}

/*porduct title*/
.New,.Hot{width:150px;margin: 40px auto 20px; text-align: center; position:relative;font-size: 27px; font-weight: bold;}
.New{color: #585e5c;}
.New:after,.New:before,.Hot:after,.Hot:before{width:60px;content: ""; position: absolute; top: 50%;border: 2px solid #585e5c; transform: translate(0%, -50%);}
.New:before,.Hot:before{left:-50px;}
.New:after,.Hot:after{right:-50px;}
.Hot:after,.Hot:before{border: 2px solid #000000;}

/*card*/
.card{margin: 0.75rem; margin-bottom: 30px;}
.thumbnail.card:hover{transform: scale(1.05);} 
.card a.img{display: inline-block;height: 200px; margin-bottom: 10px;}
.caption h3{font-size: 1rem;margin-top: 0px; text-align: center;font-weight: 550;}
.caption p{font-size:18px;color:orange;font-weight: 900;text-align: center;}
.card .card-cart{display: block; height: 40px;width: 40px; position: absolute; top: 50%; right: 10px;transform: translate(0%,-50%);}

/*footer*/
#footer .container{display: block; margin-top: 50px; margin-bottom: 10px;border-top: 4px solid;}
.footerContent{margin-bottom: 0.75rem;}
.footerNav{display: block; width: 100%; /*margin-top: 50px; border-top: 4px solid; padding: 0 30px;*/}
.footerNav ul.inlineBlock {display: block; width: 100%;font-size: 0px;padding: 30px 0px;}
.footerNav ul.inlineBlock li{ display: inline-block; width: calc(100% / 7); vertical-align: top; margin-bottom: 15px;}
.footerNav ul.inlineBlock li h5{ font-size: 18px; font-weight: bold; margin-bottom: 4px;}
.footerNav ul.inlineBlock li a{display: block;}
.footerNav ul.inlineBlock li a:before{content: "-"; display: inline; width: 10px; position: absolute; top :0 ; left: 0; text-align: center;}
/*.footerNav ul.inlineBlock li h3 {color: #000;font-weight: bold;font-size: 0.85rem;line-height: 1.4em; padding: 0;}*/
.footerNav ul.inlineBlock li a,#footer span{ color: #000;font-weight: bold;font-size: 0.85rem;line-height: 1.4em; padding: 0;}
.footerNav ul.inlineBlock li a{padding-left: 10px;}
#footer p{margin-bottom: .25rem;}
.footerIcon{text-align: center;}
.footerIcon a{display: block; width: 40px; height: 40px; margin-bottom: 5px;}
#footer .img{ width: 100%; height: 100%; padding-right: 12%;}
#footer .footerCR div{ justify-content: center; align-items: center; background-color: #52c7df; color: #fff;}
#footer .footerCR div #year{margin:0 5px; color: #fff; font-size: 15px;}
#footer .fans{display: block; max-height: 195.8px; height: 100%}

/*about*/
.aboutWrapper{display: block;}
.aboutWrapper img{width: 100%;}
.aboutWrapper .aboutHeader{max-width: 1250px; max-height: 523.13px; width: 100%; height: 0%; padding-top: 56.25%; margin: auto; border: 3px solid #85d8eb;}
.aboutWrapper .aboutHeader img{width: 100%; height: 100%; position: absolute;top: 0; left: 0; }
.aboutWrapper .aboutBody p{color: #333; font-weight: 550;}

/*product*/
#product .productHeader h2{font-size: 27px; margin: 30px auto 20px;}
#product .navbar-nav li{list-style: none;}
#product .navbar-nav .nav-second-level a{padding-left: 20px;}
#product .nav .nav-link{width: 100%; margin: auto; padding: 0;}
#product .nav .nav-link h5{color: #585858; margin-bottom: 0px; font-size: 13px;}
#product .nav .nav-link span{ font-size: 14px; font-weight: 700; width: 100%;}
#product .nav .nav-link .discount,.discount{color: red; position: relative; margin-left: 5px;}
#product .nav .nav-link .discount:before,.discount:before{content: ""; width: 65px; position: absolute; left: -69px; top: 50%; transform: translate(0,-50%); border-bottom: 2px solid red;}
#product .nav .nav-link .disabled{background-color: #ddd; color: #000; width: 100%;}
#product .productImage{position: relative; border: 3px solid #49B3C8;width: 100%; height: 100%;}
#product .productImage:after{content: "";display: block; padding-bottom: 100%;}
#product .productImage img{position: absolute; width: 100%; height: 100%; object-fit: contain; background-color: #fff;}
#product .productText{position: relative; border: 3px solid #49B3C8;width: 100%; height: 272.33px; margin-bottom: 1rem; padding: 10px; overflow: auto;}
#product .operate{/*padding: 6px;*/ margin-top: 40px;}
#product .operate .title{margin-bottom: 0px; padding: 0 10px; width: 100px; text-align: center;}
#product .operate select {padding: 6px 10px; border: 1px solid #ddd;}
#product .operate .price{padding: 0 10px;}
#product .operate .discount:before {width: 100px;left: -100px;}   
#product .price{font-size: 16px; font-weight: 700; width: 100px; text-align: center;}
#product .confirmBtn{color: #ffffff; background-color: #49B3C8; margin-top: 7px; margin-left: 20px; width: 180px; }
#product a.illustrate{color:#49B3C8; opacity: .85; display: inline-block; width: 100px; text-align: center; margin-top: 5px;}
#product .confirmBtn:hover{opacity: .85;}
#product a.illustrate:hover{opacity: 1;}
#product .productBox h5.title{font-size: 18px; color: #49B3C8; font-weight: 700; width: 130px;}
#product .productBanner{position: relative; border: 3px solid #49B3C8;width: 100%; height: 0px; padding-top: 47.25%; margin-bottom: 1rem;}
#product .productBanner img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}

/*news*/
#news .nav-tabs{justify-content: center;}
#news .nav-tabs li{width: 120px;}
#news .nav-tabs li a{ display: inherit; width: 100%; padding: .35rem; text-align: center;}
#news .nav-tabs li a.active,#news .nav-tabs li a:hover{background-color: #52c7df; color: #ffffff; text-decoration: none;} 
.activityWrapper{ width: 800px; margin: auto; }
.activityContent{ padding-top: 56.25%; height: 0%; width: 100%;}
.activityContent img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

/*commodity*/
#commodity .nav-tabs{justify-content: center; border: 0;}
#commodity .nav-tabs li{display: inline-block; width: 120px; height: 100px; margin: 0 3px; margin-bottom: 6px;}
#commodity .nav-tabs li a{display: inline-block; width: 100%; height: 100%; text-align: center; padding: 5px;  border: 1px solid #dee2e6; background-color: #f3f3f3;}
#commodity .nav-tabs li a img{width: 35px; margin: 5px auto; filter: invert(1);}
#commodity .nav-tabs li a span{ display: block; font-size: 12px;}
#commodity .nav-tabs li a .arr{ display: block; color: #ffffff; transition: all .4s; position: absolute;top: 50%;left: 50%; opacity: 0; transform: translate(-50%,-50%);}
#commodity .nav-tabs li a:hover,#commodity .nav-tabs li a.active {text-decoration: none; color: #ffffff; background-color: #49B3C8;}
#commodity .nav-tabs li a:hover img,#commodity .nav-tabs li a.active img{ filter: invert(0);}
#commodity .nav-tabs li a:hover .arr,#commodity .nav-tabs li a.active .arr{opacity: 1; top: 80%;}
.qaWrapper{padding: 20px 0;}
.qaTitle{color: #49B3C8; padding-left: 30px; font-size: 19px; font-weight: 550;}
.qaTitle:before{ content: "?"; width: 25px; border-radius: 50%;  background-color: #49B3C8; color: #ffffff; text-align: center; position: absolute; top: 0; left: 0;}
.qaWrapper .qaContent{padding: 0px 30px;}
.qaWrapper .qaContent p{font-size: 14px; font-weight: 450; margin-bottom: 0px; letter-spacing: 1.1px;}
.qaWrapper .qaContent .red{color: red; padding-left: 14px; position: relative;}
.qaWrapper .qaContent .red:before{content: "※"; width: 14px; text-align: center; position: absolute; top: 0; left: 0;}

/*healthy*/
#healthy .module-title{width: 150px; margin: 40px auto 20px;text-align: center;position: relative;font-size: 27px;font-weight: bold}
#healthy .card{margin: 1rem 30px 1rem; font-size: 1rem; border: 1px solid #49B3C8;}
#healthy .card .caption{}
#healthy .card .img{min-height: 188.95px;}
#healthy .card .caption .date{color: #72685c;}
#healthy .card .caption h3{font-size: 18pz; text-align: left;}
#healthy .card .caption p{color: #c5c5c5; font-size: 14px; text-align: left;letter-spacing: 1.05px;}
#healthy .card .caption a{display: inline-block; color: #72685c; font-weight: 700; width: 55px; position: absolute; right: 20px; bottom: 1rem;}
#healthy .card .caption a:hover{text-decoration: none;}
#healthy .card .caption a:before{content: "";width: 0;  position: absolute; bottom: 0; left: 0; transition: all .5s;}
#healthy .card .caption a:hover:before{width: 100%; border-bottom: 1px solid #000000;}

/*shop*/
#shop .shopWrapper{margin: 15px 0; }
#shop .shopWrapper .shopBox{margin-bottom: 20px; border: 1px solid #49B3C8;}
#shop .shopWrapper .shopImage{padding-top:56.25%; height: 0%; }
#shop .shopWrapper .shopImage img{position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;}
#shop .shopWrapper .shopContent{padding-top: 56.25%; height: 0;}
#shop .shopWrapper .shopData{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 15px 10px;}
#shop .shopWrapper .tab{display: block; padding: 6px 10px; margin-bottom: 16px; width: 80px; font-size: 15px; text-align: center; border-radius: 3px;}
#shop .shopWrapper .title{margin-bottom: 10px; font-weight: 550; font-size: 17px;}
#shop .shopWrapper .tel{font-size: 15px; margin-bottom: 10px; display: inline-block;}
#shop .shopWrapper .addr{display: inline-block; font-size: 15px; width: 100%; margin-bottom: 10px;}
#shop .shopWrapper .addr:after{content: "\f041"; font-family: 'FontAwesome'; color: #f00; font-size: 20px; padding-left: 8px;}
#shop .shopWrapper .time{font-size: 15px; color: #000; font-weight: 400;}
#shop .directly {background-color: #4c7ca0; color: #fff;}
#shop .distribution{background-color: #ffbd00; color: #fff;}

/*contact*/
#contact .contactWrapper{}
#contact .contactWrapper label{font-weight: 600; max-width: 110px; min-width: 90px;}
#contact .contactWrapper .btn{background-color:#ecad5d ; color: #fff;}
#contact  .contactWrapper .contactBox{margin-bottom: 23px;}
#contact  .contactWrapper .contactBox p {color: #000; font-size: 15px; font-weight: 550; margin-bottom: 5px;}
#contact .mapBox{padding-top: 100%; width: 100%; height: 0;}
#contact .mapBox .mapContent{position: absolute; top: 0 ; left: 0; object-fit: contain; width: 100%; height: 100%;}
#map {height: 100%;}
#mycanvas{cursor: pointer;text-align:center; position: absolute; left: 10px;}

/*member*/
#member h2.title{font-size: 27px; margin: 30px auto 20px;}
#member .nav-tabs{ border-bottom: none; width: 100%; display: block; font-size: 0px;     margin-top: 13px;}
#member .nav-tabs li{display: inline-block; width: 100%; font-size: 16px; margin-bottom: 6px;}
#member .nav-tabs li a{ display: inline-block; width: 100%; font-size: 16px;  padding: 3px 5px; cursor: pointer; font-weight: 700;}
#member .identity{max-width:500px ; width: 100%;  margin: 0 auto;}
#member .identity p,#member .identity label,#member .identity span{color: #000; font-weight: 550; }
#member .identity label{margin: 0; /*width: 130px;*/ font-size: 15px;}
#member .identity .btn{background-color:#ecad5d ; color: #fff;}
#member ul.table{ display: table; width: 100%; margin: 1em auto;border-collapse: collapse;}
#member ul.table .thead {display: table-header-group;}
#member ul.table .tr {display: table-row;}
#member ul.table .tbody { display: table-row-group; text-align: center;}
#member ul.table .tbody a{padding: 0;}
#member ul.table .tbody a:hover,#member ul.table .tbody a:active{color: #0056b3;}
#member ul.table .thead li, ul.table .tr li {display: table-cell;padding: 5px; border: 1px solid #aaa; padding: 6px 3px;}
#member ul.table .thead li {text-align: center;font-weight: bold;color: #fff;background-color: #52c7df}
#member .modal label{ width: 150px; padding: 0 10px;}
#member .productImage {position: relative; width: 100px;height: 100px;}
#member .productImage:after {content: "";display: block;padding-bottom: 100%;}
#member .productImage img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: contain;}
#member .form-group .form-control{font-size: 14px;}
.cartsWrapper ul.table .tr {border-bottom: 1px solid #aaa; font-size: 0px;}
.cartsWrapper ul.table .tr li {display: table-cell; padding: 10px 5px; border: none; vertical-align: middle; font-size: 14px;}
.cartsWrapper ul.table .tr li label{color: #000; font-weight: 550; text-align: left;}
.cartsWrapper ul.table .tr li p{display: inline; margin-bottom: 0px; padding: 10px 0;}
.cartsWrapper ul.table .tr li .btn{ padding: 0.125rem 0.425rem; color: #585858; background-color:#ececec; border:1px solid #ececec; border-radius: 2px;}
.cartsWrapper ul.table .content{width: calc( 100% - 116px);}
.cartsWrapper ul.table .tr li:nth-child(3) select{width: auto; margin: auto;}
.cartsWrapper .coupon {display: flex;align-items: center;}
.cartsWrapper .coupon input,.cartsWrapper .coupon button {letter-spacing: 1px; text-transform: uppercase;padding: 0.375em;border: 1px solid #52c7df;}
.cartsWrapper .coupon input {text-align: left;border-right: 0;font-size: 14px;}
.cartsWrapper .coupon button {background: #52c7df; color: #fff;cursor: pointer;box-shadow: none;border-radius: 0;font-size: 14px;}
.cartsWrapper .coupon .tooltip {position: relative;display: inline-block;opacity: 1;line-height: inherit;font-size: inherit;z-index: inherit;}
.cartsWrapper .coupon .tooltip .tooltiptext {visibility: hidden;position: absolute;bottom: 130%;left: 50%; background-color: #555;color: #fff;width: 170px;font-size: smaller;/* font-weight: bold; */text-align: center;border-radius: 6px;padding: 5px; margin-left: -75px; opacity: 0;transition: opacity 0.3s;z-index: 1;}
.cartsWrapper .coupon .tooltip:hover .tooltiptext {visibility: visible;opacity: 1;bottom: -100%;}
.cartsWrapper .coupon .tooltip .tooltiptext::after {content: '';position: absolute; top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;top: -35%; transform: rotate(180deg);}
.cartsWrapper .Payment{display: flex; align-items: center;}
.cartsWrapper .confirmBtn{ display: inline-block; border: 1px solid #52c7df; padding: 5px 8px; width: 150px; border-radius: 1px; text-align: center; margin: 0 5px; transition: all .5s;}
.cartsWrapper .confirmBtn:hover,.cartsWrapper .confirmBtn:active{background-color: #52c7df; color: #fff !important; }
.cartsWrapper .radio-custom {position: relative; width: 20px;height: 20px; margin-left: 5px; border: 1px solid #52c7df; transition: all .5s;}
.cartsWrapper .radio-custom:before {content: ""; width: 90%; height: 90%; display: flex; align-items: center; border-radius: 50%; background: #52c7df; background-color: #fff; border: inset 3px #52c7df; vertical-align: middle; text-align: center; color:#52c7df; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.cartsWrapper .radio-custom:checked:before {content: "\f058";font-family: 'FontAwesome'; font-size: 20px; border: none; background-color: #fff; width: 100%; height: 100%;}
.cartsWrapper h6{font-weight: 700; color: #000!important;}
.cartsWrapper .customer{width: 550px; margin: auto;}
.cartsWrapper .customer label{font-size: 14px; font-weight: 550; color: #000;}
.cartsWrapper .form-check{}
.cartsWrapper .addr{display: inline-block; margin-left: 3px;  padding: 0.25em; width: 80px; font-size: 13px; text-align: center;}
.cartsWrapper .information{padding: 35px 50px; background-color: #ececec; margin-bottom: 30px;}
.cartsWrapper .resultBox{}
.cartsWrapper .result{display: flex; justify-content: space-between; flex-wrap: wrap;}
.cartsWrapper .resulCheck{padding: 15px 8%;}
.cartsWrapper .resulCheck{font-size: 13px; color:#0056b3; }
.cartsWrapper .result .data{display: inline-block; min-width: 33.33%; max-width: 50%; margin-bottom: 40px;}
.cartsWrapper .result .data label,.cartsWrapper .result .data p,.cartsWrapper .result .data span{font-size: 13px; }
.cartsWrapper .result .data label{font-weight: 550;}
.cartsWrapper .checkState{width: 65px; height: 65px; border: 2px solid green; border-radius: 50%; position: relative; transition: all .3s; margin: auto;}
.cartsWrapper .checkState:before{content: "\f00c"; font-family: 'FontAwesome'; font-size: 35px; color:green; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%;}
.cartsWrapper .w-700{width: 700px;}
.cartsWrapper .w-700 .d-flex{margin: 0 5em;}
#member .red,.red{color: red !important; }
.w-80-sm{min-width: 80px;}
.c654617{color: #52c7df;}

.none{display: none;}
.center{text-align: center;}

@media (max-width: 768px) {
  #member .cartsWrapper .coupon .tooltip:hover .tooltiptext {bottom: 150%;}

  #member .cartsWrapper .coupon .tooltip .tooltiptext::after {top: 100%;transform: rotate(0deg);}
}
#member p{color: #000; font-weight: 700;}
.cart-2{width: 16.67%;}
.cart-4{width: 33.33%;}
.cart-6{width: 50%;}
.cart-8{width: 66.67%;}

/*login / register*/
#login .loginContent,#register .loginContent{max-width: 64%; width: 100%;}
#login .fbBtn,#login .lineBtn,#register .fbBtn,#register .lineBtn{display: inline-block; width: 100%;margin-bottom: 15px;} 
#login .fbBtn:hover,#login .lineBtn:hover,#register .fbBtn:hover,#register .lineBtn:hover{opacity: .85;}
#login .fbBtn,#register .fbBtn{background-color: #3e5c9a;}
#login .lineBtn,#register .lineBtn{background-color:#19d219;}
#login a span,#register a span{width: calc(100% - 45px); color: #fff; font-size: 16px; font-weight: 400;display: inline-block; text-align: center;}
.fbBtn img, .lineBtn img{width: 40px; height: 40px;}
#login .loginBox,#register .loginBox{max-width:500px; width: 100%; margin: 40px auto; padding: 30px;border: 1px solid #ccc; font-size: 14px;}
#login .loginContent .btn,#register .loginContent .btn{ background-color: #ecad5d; color: #fff;}
#login .form-control,#register .form-control{font-size: 14px;}

.pay #zipcode {width: 80px; margin-bottom: 1em;}
.pay .form-control{margin-right: 4px;}

.redproduct{}
.redproduct:after{ content: ""; width: 110px; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; border-bottom: 1px solid #ff0000; }
.cleer{clear: both;}
.disabled {color: #acacac}
.webHide{display: none;}
.rwdisplay{display: none;}
.nav-menu{overflow-y: inherit;}
.nav-menu::-webkit-scrollbar { height: 2em;  width: 1em;}
.nav-menu::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
.nav-menu::-webkit-scrollbar-thumb {background-color: #46c4e1;outline: 1px solid #46c4e1;}

@media (max-width:822px) {.nav_con{display:none;}}

@media (max-width:768px) {
  #header .logoContent{width: 100%;}
  #header .logoContent img{width: 200px;}
  #header .nav-time a{color: #ffffff;}
  #header .nav-time a:hover{color: #17a2b8;}
  .navbar{background-color: #46c4e1; color: #ffffff;}
  .nav_con{display:none;}
  .swiper-next {transform: scale(0.7);}
  .swiper-prev{transform: rotate(180deg) scale(0.7);}
  .footerNav ul.inlineBlock li{ width: calc(100% / 4);}
  .footerIcon a {display: inline-block;}
  #footer .img{ padding-right: 0%;}

  .card{width: 300px; margin: 0px auto 30px;}
  .activityWrapper{width: 100%;}

  /*product*/
  #product .productBox{width: 100%; max-width: 100%; flex: 0 0 100%;}
  #product .productContent ul.nav li.nav-time{width: 50%;}

  /*commodity*/
  #commodity .nav-tabs {display: flex; margin-bottom: 20px;}
  #commodity .nav-tabs li{width: 25%; height: 75px; margin: 0;}
  #commodity .nav-tabs li a span{display: none;}

  /*news*/
  #news .nav-tabs li{width: calc(100% / 3);}

  /*healthy*/
  #healthy .card{margin: 0px auto 30px;}

  /*shop*/
  #shop .shopWrapper .tab{margin-top: 0px;}

  /*member*/
  #member .nav-tabs li{width: calc(100% / 5);}
  #member .nav-tabs li a{text-align: center;);}
  #member .identity{max-width:100%; margin: 0 ;}
  #member ul.table .thead {display: none;}
  #member .inquiryWrapper ul.table .tr {display: block;border: #ddd 1px solid;margin-bottom: 5px; }
  #member .inquiryWrapper ul.table .tr li {display: inline-block;width: 100%;border: none; border-bottom: 1px solid #ccc; text-align: left; padding: 10px; }
  #member .inquiryWrapper ul.table .tr li:before {content: attr(data-title);display: inline-block;width: auto;min-width: 20%;min-width: 20%; max-width: 30%; width: 100%;font-weight: 900;padding-right: 1rem;}
  #member .cartsWrapper ul.table .tr{margin-bottom: 15px;}
  #member .cartsWrapper ul.table .tr li{width: 100%; display: inline-block; padding: 0px; border-bottom: 1px solid #aaa;  min-height: 38px; line-height: 2.2;}
  #member .cartsWrapper ul.table .tr li:last-child{border-bottom: 0px;}
  #member .cartsWrapper ul.table .tr li:nth-child(1){padding: 10px 5px;}
  #member .cartsWrapper ul.table .tr li:nth-child(3) select{width: 100%; text-align: center;}
  #member .cartsWrapper ul.table .tr li .btn{width: 100%; height: 38px;}
  #member .cartsWrapper .Payment{display: block;}
  #member .cartsWrapper .customer{width: calc(100%);}
  #member .cartsWrapper .customer #name,.cartsWrapper .information{width: 100% !important;}
  #member .cartsWrapper .address{display: block!important;}
  #member .cartsWrapper .w-700{width: 100%;}
  #member .cartsWrapper .w-700 .d-flex{margin: 0em;}
  #member .cartsWrapper .result .data{max-width: 100%; width: 100%;}

  /*login*/
  #login .loginContent,#register .loginContent{max-width: 100%;}
  #login .loginBox,#register .loginBox{padding: 0px; border: none;}
  .loginBox .form-control{width: 100% !important;}

  /*.coupon {margin: 1rem auto;}*/

  .vanish{display: none !important;}
  .rwdisplay{display: block;}
  .show{display: flex;}
}

.none{display: none;}
.center{text-align: center;}