@charset "utf-8";
*{ list-style: none;  }
a{ text-decoration: none; }
html,body{
    width:100%;height:100%; line-height: 1.8;
}
body{
    /* padding-bottom: 120px; */
    height: auto;
}


.shop .search .bar-header-secondary{ top: 0; }
.shop .search .searchbar{
    height: auto;
    padding: 20px;
    display: flex;
}
.shop .search .searchbar_active .search-input{ margin-right: 80px; }
.shop .search .searchbar_active .searchbar-cancel{margin-right:0; opacity: 1;}
.shop .search .searchbar .search-input input{
    background: #fff;
    border: none;
    height: 70px;
    border-radius: 40px;
    width: 461px;
}
.shop .search .searchbar .search-input input:focus{}
.shop .search .searchbar .searchbar-cancel{height: 80px;line-height: 80px;}


css-icon {
  display: inline-block;
  height: 1em; width: 1em;
  font-size: 20px;
  box-sizing: border-box;
  text-indent: -9999px;
  vertical-align: middle;
  position: relative;
}
css-icon::before,
css-icon::after {
  content: '';
  box-sizing: inherit;
  position: absolute;
  left: 50%; top: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.icon-arrow-left::before {
  height: .65em; width: .65em;
  border-style: solid;
  border-width: 2px 0 0 2px;
  -ms-transform: translate(-25%, -50%) rotate(-45deg);
  transform: translate(-25%, -50%) rotate(-45deg);
}

/*search*/
input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}
.searchbar {
    overflow: hidden;
    height: 2.2rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.searchbar .searchbar-cancel {
    margin-right: -80px;
    float: right;
    width: 76px;
    text-align: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    opacity: 0;
    color: #808080;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.search-input {
    position: relative;
}
.searchbar .search-input {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    margin-right: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.searchbar .search-input form{ margin: 0; }
.search-input .icon {
    position: absolute;
    font-size: 34px;
    color: #b4b4b4;
    top: 50%;
    left: 20px;
    -webkit-transform: translate3D(0,-50%,0);
    transform: translate3D(0,-50%,0);
}
.searchbar .search-input input {
    margin: 0;
    height: 1.4rem;
}
.search-input input {
    box-sizing: border-box;
    width: 100%;
    height: 1.4rem;
    display: block;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 10px;
    font-family: inherit;
    color: #3d4145;
    font-size: 26px;
    font-weight: 400;
    padding: 0 .5rem;
    background-color: #fff;
    border: 1px solid #b4b4b4;
}
.search .bar-header-secondary{ top: 0; }
.search .searchbar{
    height: auto;
    box-sizing: border-box;
    padding: 0 20px;
}
.search .searchbar .search-input input{ background:#f7f7f7; border: none;    height: 2.2rem; }
.search .searchbar .searchbar-cancel{ height: 2.2rem; line-height: 2.2rem; }
.search-input label+form>input {
    padding-left: 71px;
}
.searchbar a {
    font-size: 30;
    color: #fff;
}

.searchbar img {
    margin-right: 37px;
}

.guanggao{    
    width: 694px; 
    height: 220px;
    margin: auto;
}

a {
    text-decoration: none;
}

.guanggao img {
    width: 100%;
    height: 220px;
    border-radius: 20px;
}

.swiper-slide img {
    display: block;
}

.shop{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background: linear-gradient(180deg, #20B4BC 0%, #E0F5F6 75%, #FFFFFF 100%), #FFFFFF;
    background-size: 750px 489px;
    background-repeat: no-repeat;
    background-position: left top;
    padding-bottom: 55px;
}

.left_nav{
    position: fixed;
    left: 0;
    top: 355px;
    bottom:0;
    width: 206px;
    border-top-left-radius: 40px;
    background: #fff;
    overflow: scroll;
    padding-right: 6px;
}

.nav_main{
  padding-bottom: 120px;
  background: #F5F5F5;
  min-height: calc(100% - 120px);
}

.nav_main li{
    box-sizing: border-box;
    padding: 20px 0;
    position: relative;
}

.nav_main >li >div{
    width: 100%;
    padding-left: 26px;
    box-sizing: border-box;
}

.nav_main >li span,
.nav_sub >li {
    font-size: 28px;
    color: #4D4D4D;

}
.nav_sub{
    display: none;
}

.nav_main >li.active .nav_sub{
    display: block;
}

/*.nav_main >li.active:not(.has_sub),
.nav_sub >li.active{
    color: #20B4BC;
    background: #e5fcfe;
}*/

/*.nav_main >li.active:not(.has_sub):after,*/
.nav_sub >li.active:after{
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 25px;
    border-radius: 20px;
    background: #20b4bc;
}

.nav_main >li.active:not(.has_sub){
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 40px 10px 10px 0px;
  margin-right: -4px;
}

.nav_main >li.active.has_sub {
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 40px 10px 10px 0px;
  margin-right: -4px;
  padding-bottom: 0;
}

.nav_sub >li.active {
    color: #20B4BC;
    background: #e5fcfe;
}

.icon_arrow_bottom{
  width: 16px;
  height: 16px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAALFJREFUOE9j/P//PzMDBYBxGBlgbm5uxcDAIHHy5Ml1+ILE3Nw8iIGB4cXJkyePgdTBw8DExOQKAwODBiMjY9Hp06cnYTPE1NQ07////30MDAw3zpw5o4NiAMjkv3//LmNgYGDBZgiS5j/MzMxRMJeixAIuQ3BpRnEBzMnohoDEoc5GsRmmHms6QDYEqhCrZqwuwOISBmQ/owcu3pRoYWHhDtJw4sSJnbiidjglZXJzNAD/QYoRhfi/vQAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-right: 17px;
  display: none;
}

.nav_main >li.active.has_sub.back .icon_arrow_bottom{
  display: block;
  width: 16px;
  height: 16px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAALBJREFUOE9j/P//PzMDBYBxmBtgaWnpBgqe48eP78IVTDjDwNzcPOjv37/LQBqZmZmjTp48uQ6bIVgNQNLMAtX0B5chGAYga2ZkZCwCGfD///8+BgYGrIagGICu+fTp05NABpiamubhMgRuAC7NMH/jMgRugImJyRUGBgYNkLNhNqMHGpIhN86cOaMDkocbYGZmZs3IyCiOK7RhhoFc+v///5enTp06imIAudlhGOQFANMkjREqjXnLAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-right: 17px;
}

.nav_main >li.active.has_sub .icon_arrow_bottom,
.nav_main >li.active:not(.has_sub) .icon_arrow_bottom{
  display: block;
}

.nav_main >li.active.has_sub{
    background: #fff;
    padding-bottom: 0;
}

.nav_main >li.active.has_sub.back .nav_sub{
  display: none;
}

.nav_main >li.active.has_sub.back{
  padding-bottom: 20px;
}

.nav_sub{
    width: 100%;
    margin-top: 20px;
}

.nav_sub >li{
    position: relative;
    box-sizing: border-box;
    padding-left: 26px;
}

.right_tab{
    border-top-right-radius: 40px;
    position: fixed;
    top: 355px;
    left: 212px;
    right: 0;
    background: #fff;
    box-sizing: border-box;
    padding: 32px;
    padding-bottom: 12px;

}
.right_tab span {
    font-size: 24px;
    text-align: center;
    color: #9FA0A0;
    margin-right: 7px;
   
}

.right_tab div{
     margin-right: 31px;
}

.right_tab div.active span {
    color: #4d4d4d;
}

.icon_order{
    display: block;
    width: 16px;
    height: 23px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAXCAYAAADUUxW8AAAABHNCSVQICAgIfAhkiAAAATpJREFUOE/VVMuRgkAQdTjCYQlhOfKp0gyESFYjWDPYNQQjWIxEQsAqPkc2BDjAEXxNgQ4wY02VJ+dCMdOvP69fN1tJTlEUZtM037qunyzLKkVmTAZO0zTC27brusjzvEAZnCRJyBj74gCh67r7uYNFZETcwehPEGkPByF/PwHnee63bXuRlaJpWmDbNpXTnzsYETeo74J0TRkY7yXeA2QQ38EDsxRxIwNy9zE6EFAH+sgjswrA3mTsABui/uPuQxUMuwqpm9I+qzh6Z3CWZQcwqEwYel06jnN6ne0nepaR3uucl+cvLH8UWnQEkGwf2qYfwShOfIGXM2Z7N15O+kxqq+s6AiHreQYAXg3D8PmtshCJRK4VhuFzvo6ECqPxRORo0HuFrz+OIZ/Rsx1GtdFGWWwQYc0KTE9Mbiw8iRjGbVnBAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.icon_order.active{
    display: block;
    width: 16px;
    height: 23px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAXCAYAAADUUxW8AAAABHNCSVQICAgIfAhkiAAAAVdJREFUOE/VlDFugzAYhWvExBKOUEYEUrlBYQUicYM2J2hv0PQIOUHpDSKBWMMRUimIkRyBLEwI+uwCcgCrRJ3qBcn25/f7vd+QO8EoikKtqupFUZSdpmnl3DYigrMsS7H22LZtapqmsxg+nU4hIeSJA0LDMDbjAybKUHzGpo8ZpQ0OCPn5KzjPc7tpmoPoKpIkObqu0+uwMcBQtHC/A8pVRTDWS6w7qOA4wJ2zVNESgdz8EQk4NAGm3Du7AGRb+gRIp3rG3GopjH0XlK4Kc15y0H+GPc97RX63GFbGcbwjQRCodV2fb4ER1QXwj9vr9VrUzyLTN1EUhYPbvu9vof72W0RQfYfq9qq3uwpCfPmnOD7rE4q0Sjaucu7un6KChzEFxS9Zlu39fj/8VSZNMmcgNQjgPQ9OlHs113UtvF1awYqCeON2kiTsGfJD2J5cAszZOSP/1NvfXfWSGPwvQi8AAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.icon_order.active2{
    display: block;
    width: 16px;
    height: 23px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAXCAYAAADUUxW8AAAABHNCSVQICAgIfAhkiAAAAV9JREFUOE/VlEFOg1AQhn2BFSzkCHYLJPYGwpZAwg0sJ9AbqEfoCcQbkEDYliPUpLClR4AFrGjq/56AUHiKceVsSPvmm+H/Zx7kihOu6ypN0zyIorgNgqCYSyM82HGcBGd35/M5iaLIXAwD9JF8PwD8MAy9ywKTzgA3SHqd6eShAC3axwi2bdsghOx4UiDBhAQqh0UPW5a1FgSBggoPxv/F6XQy4zje93Dr7A5d19+A7Ajd95iASSfAOnfO/gR2590ESNv1iK7Xv4BLaFe4c15S6D/DWZY9wsHFhsHcQlXVLcnzXKnr+giDFsPILTVN+3Q7TdMNHnP7zDPdA+z3bqPAMzKfFozoBSDN/dpt+uNwOPjQM7yKo1rw5U3XdfqWLEZzpvqrqkpQ4PbyDQC+y7JsrFar/qsyWRKOgaUkSTdDcNK56wb99HYl7QRKPA3oZNdwGNz1HEyAOTtn5J92+wPNCowYq1NwSAAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.goods_list li {
    margin-bottom: 30px;
}

.goods_list li img {
    width: 160px;
    height: 160px;
    margin-right: 20px;
    border-radius: 20px;
}

.goods_list li strong {
    font-size: 26px;
    font-weight: normal;
    line-height: 1.5;
    color: #4D4D4D;
}

.shop_arc_1_1 {
    color: #FF9D3B;
    font-weight: bold;
    font-size: 24px;
}

.price_component b{
  line-height: 1;
  font-weight: normal;
  display: block;
  box-sizing: border-box;
  font-size: 24px;
  color: #fff;
  padding: 4px 15px;
  border-radius: 40px;
  background: #FF9D3B;
  margin-left: 10px;
}
.goods_list{
    box-sizing: border-box;
    padding-left: 206px;
    padding-right: 0;
    padding-top: 445px;
}


.goods_list ul{
    box-sizing: border-box;
    padding-left: 32px;
    padding-right: 28px;
    padding-top: 20px;
    background: #fff;
    padding-bottom: 20px;
}

.goods_list li p {
    font-size: 24px;
    color: #9FA0A0;
}

.infinite-scroll-preloader {
    position: relative;
    text-align: center;
    font-size: 26px;
    line-height: 1;
    padding-bottom: 28px;
    color: #9FA0A0;
    display: none;
}

.empty{
    margin-top: 108px;
}

.empty span{
    font-size: 26px;
    margin-top: 32px;
    color: #9FA0A0;
}
.goods_list li p >span:last-child{
    padding-left: 10px;
}

.nav_main >li.active div span{
    font-weight: bold;
    font-size: 30px;
}