:root {
/* CSS变量的定义 */
--primary-color: #000;
--primary-red: #ff0000;
--primary-blue: #0078d4;
--primary-gray: #999999;
--primary-button-bgcolor:#000;
}







input[type=checkbox] {
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 1px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  position: relative;
}
 
/* 当checkbox被选中时 */
input[type=checkbox]::after {
  content: "\2714";
  display: block;
  font-size: 1.5em;
  color: #fff;
  position: absolute;
  top: -3px;
  left: 2px;
  transform: scale(0);
  transition: transform 0.2s;
}
 
input[type=checkbox]:checked + input[type=checkbox]::after {
  transform: scale(1);
}













html {
  touch-action: manipulation;
}

@font-face {
    font-family: 'Arquitecta-Bold';
    src: url('./font/Arquitecta/font.eot');
    src: url('./font/Arquitecta/font.eot?#iefix') format('embedded-opentype'),
        url('./font/Arquitecta/font.woff2') format('woff2'),
        url('./font/Arquitecta/font.woff') format('woff'),
        url('./font/Arquitecta/font.ttf') format('truetype'),
        url('./font/Arquitecta/font.svg#Arquitecta-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: "Poppins-Regular";
  src: url("./font/Poppins/font.woff2") format("woff2"),
       url("./font/Poppins/font.woff") format("woff"),
       url("./font/Poppins/font.eot") format("embedded-opentype"),
       url("./font/Poppins/font.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url("./font/Oswald_400.woff2") format('woff2');
  font-weight: 600;
}


@font-face {
    font-family: "GothamBlack-Regular";
    src: url("./font/GothamBlack-Regular/font.woff2") format("woff2"),
    url("./font/GothamBlack-Regular/font.woff") format("woff"),
    url("./font/GothamBlack-Regular/font.eot") format("embedded-opentype"),
    url("./font/GothamBlack-Regular/font.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: "Opensans-Regular";
	src: url("./font/Opensans-Regular/font.woff2") format("woff2"), url("./font/Opensans-Regular/font.woff") format("woff"), url("./font/Opensans-Regular/font.eot") format("embedded-opentype"), url("./font/Opensans-Regular/font.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "OpenSans-Bold";
	src: url("./font/Opensans-Bold/font.woff2") format("woff2"), url("./font/Opensans-Bold/font.woff") format("woff"), url("./font/Opensans-Bold/font.eot") format("embedded-opentype"), url("./font/Opensans-Bold/font.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Zurich Extended";
	src: url("./font/Zurich/zurichextended_n8.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Zurich n4";
	src: url("./font/Zurich/zurich_n4.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: "Zurich n7";
	src: url("./font/Zurich/zurich_n7.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}



.font-arquitecta {
    font-family: 'Arquitecta-Bold';
    text-transform: uppercase;
}

.font-poppins {
    font-family: 'Poppins-Regular';
}


#goTop {
    position: fixed;
    right: 15px;
    bottom: 20px;
    font-size: 40px;
    color: rgba(0,0,0,.4);
    z-index: 99999;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s;
}

.avatar {
    border-radius: 50%;
    background: var(--primary-gray);
    color: #fff;
    text-align: center;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
    transition: transform .2s;
}


.image-zoom .img {
    transition: transform 0.5s ease;
    transform: translateZ(0); 
}

.image-zoom:hover .img {
    transform: scale(1.03);
}


#cookies_agreement {
    position: fixed;
    bottom: 50px;
    left: 50px;
    z-index: 777;
    width: 300px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
}

#cookies_agreement .box {
    padding: 20px;
}

#cookies_agreement .content {
    margin-bottom: 15px;
}

#cookies_agreement .button-group {
}

#cookies_agreement button {
    padding: 7px 30px;
    border-radius: 0;
    border-radius: 4px;
}

button {
    color: #333;
    border-radius: 4px;    
	font-size: 14px;
    text-transform: Capitalize;
}

.select_box {
    position: relative;
    cursor: pointer;
}

.select_box:after {
    content:"\eb15";
    font-family: "iconfont";
    position: absolute;
    right: 10px;
    top:50%;
    height: 20px;
    width:20px;
    line-height: 20px;
    text-align: center;
    margin-top: -10px;
    transition: transform .2s;
}

.select_box.active:after {
    transform: rotate(180deg); 
}


.iconfont {
}

.logo {
    height: 22px;
    width: 130px;
    background: url(img/logo.png?311) no-repeat center;
    background-size: auto 100% ;
    display: block;
}

dl,dt,dd,h1,h2,h3,ul,input,button,select,p,li,textarea {
	box-sizing: border-box;
	margin:0;
	padding: 0;
	outline: none;
	list-style: none;
    font-family: inherit;
}
img {
	transition: opacity .6s;
}
button,a {
	cursor: pointer;
	border:none;
}


a:active {
	
}

.delete_style {
    text-decoration:line-through;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
}


input[type=radio] {
    width: 18px;
    height: 18px;
    position: relative;
    top: 3px;
    font-size: 14px;
}

input[type=radio]:after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #dadada;
    background-color: #fff;
    transition: all 0.1s ease-in-out;
    border-radius: 18px;
}

input[type=radio]:checked:after {
    width: 8px;
    height: 8px;
    border: 5px solid #000;
}


.button-loader.disabled {
    position: relative;
}

.button-loader.disabled span{
    display: none;
}

.button-loader.disabled:after {
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;
	width: 18px;
	height: 18px;
	border: 3px solid #fff;
	border-top-color: transparent;
	border-radius: 100%;
	animation: circle infinite 0.75s linear;
}

.button-loader.black.disabled:after {
	border: 3px solid #000;
	border-top-color: transparent;
}

.price {
}

.hide {display: none}


.font-upper {
	text-transform: uppercase;
}



.font-red {
	color: var(--primary-red);
}

.font-gray {
	color: var(--primary-gray);
}


.font-blue {
	color: var(--primary-blue);
}

.normal-input {
	border:1px solid #888;
    height: 48px;
    line-height: 48px;
    border-radius: 3px;
	padding: 7px 10px;
	width: 100%;
	border-radius: 4px;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}

.normal-input:focus {
	border-color: #333;
}

.textarea-normal {
	border:1px solid #888;
    height: 148px;
    border-radius: 3px;
	padding: 7px 10px;
	width: 100%;
	border-radius: 4px;
	font-weight: bold;
	font-size: 16px
}

.textarea-normal:focus {
	border-color: #333;
}

.index-section .more {
    padding-top: 15px;
}

.index-section .more a {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 0;
    font-size: 16px;
}

.a_button_trans {
    background: transparent;
    border: 1px solid #333;
    border-radius: 0;
}

.a_button_black {
    background: #000;
    color: #fff;
    border-radius: 0;
}

.a_button_red {
    background: red;
    color: #fff;
    border-radius: 0;
}



dd,dt,dl {
	margin:0;
	padding: 0
}

li {
	list-style: none
}

a {
	text-decoration: none;
	color: #333
}

.abs {
	position: absolute;
}

.rel {
	position: relative;
}

.none {
	display: none
}

.w100 {
	width: 100%
}

.f12 {
	font-size: 12px;
}
.f14 {
	font-size: 14px;
}
.f16 {
	font-size: 16px;
}
.f18 {
	font-size: 18px;
}
.f20 {
	font-size: 20px;
}
.f22 {
	font-size: 22px;
}
.f24 {
	font-size: 24px;
}

.f25 {
	font-size: 25px;
}

.f26 {
	font-size: 26px;
}

.bold {
	font-weight: bold
}

.abs-right {
	right: 0
}

.scale {
	/*transition: All 0.2s ease-in-out;*/
}

.scale:hover {
    /*transform: translate(0, 0) scale(1.05);*/
}



nav {
	padding: 20px 0;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
}

nav h1 {
	font-size: 22px;
	/*text-transform: uppercase;*/
}

nav .u2 a {
	display: inline-block;
	padding: 0 10px
}


.button-load-ajax:disabled {
	background: #ddd;
}

.button-load-ajax:disabled .text {
	display: none
}

.button-load-ajax:disabled .loader {
	display: inline-block
}















.search_area {
	position: relative;
	display: inline-block;
	height: 40px;
	border-radius: 40px;
	border:1px solid #666;
	width: 500px;
	overflow: hidden
}

.search_area input{
	background:transparent;
	outline: 0;
	padding:0 20px;
	color: #fff;
	width: 100%;
	height: 100%;
	border:none;
}



.search_area button {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 50px;
	background:transparent;
	outline: 0;
	color: #fff;
	border:none;
}


.subscribe-form {
	border:1px solid var(--primary-button-bgcolor);
	display: inline-block;
	border-radius: 7px;
	overflow: hidden;
}

.subscribe-form .d1 {
	width: 50px
}

.subscribe-form input {
	height: 70px;
	width: 100%;
	border:none;
	text-align: center;
}

.subscribe-form button {
	height: 70px;
	width: 100%;
	border:none;
	outline: none;
	padding: 0 30px
	color: var(--primary-button-bgcolor);
	background: transparent;

}

.button-custom-style-1 {
	background: #000;
	color: #fff;
	border-radius: 4px;
	
}

.button-custom-style-3 {
	background: #eee;
	border-radius: 0;
	color: #333;
}

.button-style-4 {
	background: #fff;
	border-radius: 0;
	color: #333;
	border:1px solid #333;
}


.button-custom-style-2 {
	background: transparent;
	display: inline-block;
	color: var(--primary-button-bgcolor);
	border:1px solid var(--primary-button-bgcolor);
	font-weight: bold;
	font-size: 18px;
	border-radius: 0;
}

.button-custom-style-2:hover {
	background: var(--primary-button-bgcolor);
	display: inline-block;
	color: #fff;
	border:1px solid var(--primary-button-bgcolor);
}


.price-area .number {
	font-weight: bold;
	font-family: "Oswald";
}

.price-area .symbol {
	/*font-size: 85%;*/
	vertical-align: bottom;
	margin-right: 0em;
	font-family: "Arial";
}

.price-area .delete_style {
    margin-left: 10px;
}

.input_box_txt {
    width: 100%;
    padding: 11px 16px;
    color: #333;
    background-color: #fff;
    border: 1px #999 solid;
    border-radius: 4px;
    position: relative;
    display: inline-block;
    transition: all 150ms;
    -webkit-transition: all 150ms;
	font-size: 14px
}

.input_box_txt:focus {
	border-color: red;
	box-shadow: 0 0 0 4px rgba(255, 0, 0, .3);
}



body {
	margin:0;
    text-transform: Capitalize;
	font: 14px/1.5  "Opensans-Regular",'Hiragino Sans GB',Arial,sans-serif;
	/*font: 14px/1.5  "Opensans-Regular",'Hiragino Sans GB','\5b8b\4f53',Arial,sans-serif;*/
}

.cart-is-empty {
    text-align: center;
    padding:20px ;
}
.cart-is-empty .icon{
    background: url("img/cart_empty.svg") no-repeat;
    background-size: 100% auto;
    width: 200px;
    height: 200px;
    margin: auto;
    margin-bottom: 40px;
}
.cart-is-empty .text {
    margin-bottom: 30px;
}

.page-title {
}

.page-title h1{
	font-size: 36px;
}


#home_page body {
	padding-top: 0;
}

header {
	z-index: 9999;
	color: #fff;
	height: 55px;
}

header a{
    color: #fff;
}

.header-wrap {
    height: 55px;
    line-height: 55px;
	background: rgba(40,40,40,1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 888;
    padding: 5px 0;
}


header .header-menu {
    padding-left:50px;
    flex: 1;
}

header .mobile-open-menu {
    display: none;
}

header .header-menu .item {
	display: inline-block;
	font-size: 16px;
	font-weight: 100;
}

header .header-menu  .item{
    margin-right:20px;
    text-transform: uppercase;
}

header .header-classify-list dl {
	padding: 0;
	margin-bottom: 10px
}

header .header-classify-list dl:last-child {
	margin:0;
}

header .header-classify-list dt {
	font-weight: bold;
	margin-bottom: 5px;
}

header .header-classify-list dd {
	font-size: 16px
}

header .header-classify-list dd a {
	display: inline-block;
	margin:0 10px;
}

header .button-login {
	height: 30px;
	padding: 0 7px;
	border-radius: 4px;
	background: #000;
	color: #fff;
}

header .header-right .item{
	display: inline-block;
    padding: 0 15px;
    cursor: pointer;
}

header .header-right .item .avatar {
    height: 35px;
    line-height: 35px;
    width: 35px;
    font-size: 14px;
}

header .header-right .item .avatar img {
    width: 100%;
    border-radius: 50%;
    display: inline-block;
}


header .header-right .item .iconfont {
    font-size: 24px;
    font-weight: bold;
}

header .header-right .item.mobile-open-menu {
    display: none;
}

header .mobile-member {
    line-height: 35px;
}

header .mobile-member .a_button_red {
    padding: 0 10px;
    display: inline-block;
    border-radius: 4px;
}





#choose_region_layer {
    visibility: hidden;
}

#choose_region_layer.active {
    visibility: visible;
}

#choose_region_layer.active .close_button{
    position: absolute;
    left: -60px;
    top: 20px;
    background: #fff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
}


#choose_region_layer .layer-body{
    width: 80%;
    max-width: 450px;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10020;
    -webkit-transform: -webkit-translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .4s;
    transition: all .4s;
}

#choose_region_layer.active .layer-body{
    -webkit-transform: -webkit-translateX(0);
    transform: translateX(0);
}


#choose_region_layer .content {
	padding: 20px;
}

#choose_region_layer .content dl {
	margin-bottom: 20px
}

#choose_region_layer .content dt {
	margin-bottom: 20px
}

#choose_region_layer .content dt h2 {
    font-size: 16px;
}

#choose_region_layer .content dt p {

}

#choose_region_layer .content dd li {
	cursor: pointer;
	padding: 7px 0
}

#choose_region_layer .content dd li ul.u1 {
    margin-right: 10px;
}


#choose_region_layer .footer {
    padding: 20px;
}

#choose_region_layer .footer button{
    width: 100%;
    height: 50px;
}


#choose_region_layer .footer button.cancel {
    margin-top: 20px;
}






    #mobile_menu_layer {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 999;
        visibility: hidden;
    }
    
    #mobile_menu_layer .layer-body{
        background-color: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 10020;
        border-radius: 10px;
        overflow: hidden;
        /*-webkit-transform: -webkit-translateX(-100%);*/
        /*transform: translateX(-100%);*/
        /*-webkit-transition: all .4s;*/
        /*transition: all .4s;*/
    }
    
    #mobile_menu_layer.active .close_button{
        position: absolute;
        right:10px;
        top: 10px;
        border-radius: 50%;
        width:32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
    }
    
    
    #mobile_menu_layer.active {
        visibility: visible;
    }
    
    #mobile_menu_layer.active .layer-body {
        /*-webkit-transform: -webkit-translateX(0);*/
        /*transform: translateX(0);*/
    }
    

    
    #mobile_menu_layer li {
        height: 42px;
        line-height: 42px;
        padding: 0 15px 0 15px;
    }
    
     #mobile_menu_layer dl {
         margin-bottom: 10px;
         background: #fff;
     }
     
     #mobile_menu_layer dt {
         height: 40px;
         line-height: 40px;
         padding:0 15px;
     }







.drop {
	position: relative;
	padding-right: 22px;
	cursor: pointer;
}

.drop-list {
	z-index: 99999;
	position: absolute;
	background: #fff;
    border-radius: 6px;
	display: none;
	white-space: nowrap;
	overflow: hidden;
	line-height: normal;
	padding: 1rem;
	box-shadow:  0 10px 15px -3px rgb(0 0 0 / .1);
	color: #000;
	
    left: 50%;
    transform: translateX(-50%);
}

.drop-list a {
	color: #000
}

.drop-list.layer-right{
	left:unset;
	right: 0;
}

@keyframes layer_animation
{
    from {
    	opacity: 0;
    	margin-top: 5px
    }
    to {
    	opacity: 1;
    	margin-top: 0px
    }
}

.drop .drop-text {
    
}

.drop .drop-text::after {
	content:"\eb15";
	font-family: "iconfont";
	position: absolute;
	right: 0;
	transition: transform .2s;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	top: 50%;
	margin-top: -9px;
}

.drop:hover .drop-text::after {
	transform: rotate(180deg); 
}

.drop:hover .drop-list {
	display: block;
	animation: layer_animation .2s linear;
}


.drop-list li{
	cursor: pointer;
}





.cart-icon {
	position: relative;
}

.cart-icon i {
    position: absolute;
    height: 18px;
    background: red;
    color: #fff;
    text-align: center;
    min-width: 18px;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    border-radius: 18px;
    top: -8px;
    right: -10px;
}

.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.text-del {
	text-decoration: line-through;
}

.bg-white {
	background: #fff
}

.main {
	margin:auto ;
	width: 1300px;
	padding: 0 10px;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

.flex-1 {
	flex:1;
}

.flex-center {
	align-items: center;
}
.flex-end {
	align-items: flex-end;
}

#home_page .header-wrap {
    background: transparent;
}

#home_page .slide {
	padding: 0 0 0 0;
	border-bottom: 1px solid #ddd
}

#home_page .slide .box {
	background: #fff;
	text-align: center;
}

#home_page .slide-img {
	z-index: 0;
}

#home_page .slide-img img{
	width: 25rem
}


#home_page .slide-text {
	z-index: 1
}

#home_page .slide-text p {
	margin-bottom: 2rem
}

#home_page .slide-text button {
	padding: 1rem 2rem;
}





.index-section {
	padding: 60px  0 ;
}

.index-section h2{
	font-size: 36px;
}

.index-section dl dt {
	margin-bottom: 40px;
}

.index-section dl dt h2{
	font-family: "Zurich Extended", sans-serif;
	text-transform: uppercase;
}

.block-img {
    background: #fff;
}

.block-img img{
    display: inline;
    width: 100%;
}

.block-popular {
}

.block-popular .product-type-list {
    display: grid;
    align-items: center;
    grid-gap: 24px;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 320px;
    grid-auto-flow: dense;
}

.block-popular .product-type-list a{
    position: relative;
    display: block;
    text-align: center;
    background: #000;
    color: #fff;
    overflow: hidden;
    z-index: 0;
    height: 100%;
}

.block-popular .product-type-list a:first-child{
    grid-row: auto / span 2;
}

.block-popular .product-type-list a .text{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 1;
    font-family: "Zurich Extended", sans-serif;
    text-transform: uppercase;
    font-size: 30px;
}

.block-popular .product-type-list a .img {
    position: relative;
    height: 100%;
}
.block-popular .product-type-list a .img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0003;
    background: rgba(0, 0, 0, .2);
    z-index: 1;
}

.block-popular .product-type-list a .img img {
    min-height: 120px;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.block-popular .product-type-list a:hover .img img {
    transition: transform .5sease;
    transform: translateZ(0);
}

.block-categroy .box {
	background: #fff;
	padding: 50px
}

.block-categroy .box .d1 {
	width: 120px
}

.block-categroy .box .d1 li {
	display: block;
	margin-bottom: 20px
}

.block-categroy .box .d1 li img {
	border:1px solid #eee;
	background: #ccc;
	display: inline-block;
	width: 120px
}

.block-categroy .box .d1 li.active img {
	border-color: red
}

.block-categroy .box .d2 {
	text-align: center
}

.block-categroy .box .d3 {
	width: 420px
}
.block-categroy .box .d3 li {
	margin-bottom: 20px
}
.block-categroy .box .d3 button {
	padding: 15px 30px;
	border-radius: 30px
}

.block-contact-us dd {
}

.block-contact-us .box {
    width: 850px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.block-contact-us dd div.block {
    margin-bottom:10px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.block-contact-us dd div.col_2 {
    width: 50%;
}

.block-contact-us dd p.label {
    margin-bottom: 10px;
}



.block-contact-us  button {
    padding: 0 20px;
    border-radius: 0;
    height: 48px;
    width: 100%;
}










#home_page .block-about-us {
	text-align: center;
	padding: 60px 0 80px 0;
	color: #fff;
	background:url("img/about.jpeg") no-repeat center fixed;
	background-size: auto 100% ;
	position: relative;
}

#home_page .block-about-us .main {
    position: relative;
    z-index: 1;
}
#home_page .block-about-us:after {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.6);
    z-index: 0;
}



#cart_page .slide {
	height: 200px;
	background: linear-gradient(to right, #eee, #fff 99%);
}


#account_page .slide {
	height: 200px;
	background: linear-gradient(to right, #eee, #fff 99%);
}



#article_page .slide {
	height: 200px;
	background: linear-gradient(to right, #eee, #fff 99%);
}






#product_index .slide {
	height: 22rem;
	background: linear-gradient(to right, #eee, #fff 99%);
}














#product_index .product-tab {
	text-align: center;
	bottom: 0;
	left: 0;
	right: 0
}

#product_index .product-tab li {
	padding: 1rem 0;
	flex:1 
}


#product_index .product-tab li .icon {
	margin-bottom: .5rem
}
#product_index .product-tab li .icon span {
	font-size: 2.5rem
}


#product_index .product-hot dl {
	padding: 2rem 0
}

#product_index .product-hot dl dt {
	margin-bottom: 15px
}

#product_index .product-hot dl dt h2 {
	font-size: 18px
}

#product_index .product-hot dd li {
	width: 25%
}







#product_page .slide {
	height: 12rem;
	background: linear-gradient(to right, #eee, #fff 99%);
}





.product-found {
	text-align: center;
	padding: 5rem 0
}

.product-list .img {
	position: relative;
	margin-bottom: .5rem;
	overflow: hidden
}

.product-list .img .quick-view {
	position: absolute;
	bottom: -35px;
	left: 0;
	right: 0;
	background: #000;
	color:#fff;
	height: 35px;
	line-height: 35px;
	text-align: center;
	transition: bottom .2s;
}

.product-list .img:hover .quick-view {
	bottom: 0
}

.product-list li {
	width: 25%;
	padding: 10px;
}

.product-list li .box {
	background: #fff;
	overflow: hidden;
	height: 100%;
}

.product-list li .goods-img {
    position: relative;
	border-radius: 0;
	overflow: hidden;
}

.product-list .goods-img .discount-label {
    position: absolute;
    background: red;
    color: #fff;
    padding:0px 10px;
    top: 10px;
    left: 10px;
    z-index: 1;
    font-family: 'Arquitecta-Bold';
    text-transform: uppercase;
}


.goods-img a {
    display: block;
    padding-top: 100%;
    position: relative;
}

.goods-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    overflow: hidden;
    transition: all .2s ease-in-out;
}

a.href_active img:nth-child(1) {
    opacity: 1
}

a.href_active img:nth-child(2) {
    opacity: 0
}

a.href_active:hover img:nth-child(1) {
    opacity: 0!important
}

a.href_active:hover img:nth-child(2) {
    opacity: 1!important
}


.product-list .goods-content {
	padding: 7px;
}


.product-list .name {
	margin-bottom: .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	font-size: 14px;
}

.product-list .title {

}

.product-list .sn {
	margin-bottom: .5rem
}














.swiper-feedback .goods-img {
	position: relative;
	border-radius: 0;
	overflow: hidden
}


.swiper-feedback .box {
	background: #fff;
	overflow: hidden;
}

.swiper-feedback .goods-img .discount-label {
    position: absolute;
    background: red;
    color: #fff;
    padding:10px 20px;
    top: 20px;
    left: 0;
    z-index: 999;
    
    font-family: 'Arquitecta-Bold';
    text-transform: uppercase;
}

.swiper-feedback img{
	width: 100%;
	display: block;
}

.swiper-feedback .goods-content {
	padding: 5px;
	text-align: center
}

.swiper-feedback .name {
	margin-bottom: .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	font-size: 16px;
}

.swiper-pagination-2  {
    text-align: center;
}

.swiper-pagination-2 .swiper-pagination-bullet {
    margin: 0 3px;
    width: 30px;
    height: 2px;
    border-radius: 0;
}

.swiper-pagination-2 .swiper-pagination-bullet-active {
    background: #000;
}



.swiper-pagination .swiper-pagination-bullet {
    margin:0 3px;
    width: 22px;
    height: 2px;
    border-radius: 0;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
}






#product_page .slide {
	height: 10rem;
	background: linear-gradient(to right, #eee, #fff 99%);
	padding-top: 8rem
}








#product_page .product-hot dl {
	margin-bottom: 30px
}

#product_page .product-hot dl dt {
	margin-bottom: 15px
}

#product_page .product-hot dl dt h2 {
	font-size: 18px;
}

#product_page .product-hot dd li {
	width: 33.3%
}









.page-nav {
	padding: 50px 0
}

.page-nav ul {
	display: inline-block;
}

.page-nav ul.u1 {
	margin-right: 15px
}

.page-nav div span,.page-nav ul a {
	display: inline-block;
	margin:0 10px;
}

.page-nav div a ,.page-nav ul .active {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 40px
}

.page-nav ul .active {
	background: #000;
	color: #fff;
	display: inline-block;
}

.page-nav ul a:hover {
	background: #eee
}


.block-new .more {
	margin-top: 15px
}

.block-new button {
	padding: 15px 30px;
	border-radius: 30px
}






footer {
	background: rgba(40,40,40,1);
	color: #fff;
}

footer a {
    color: #fff;
}

.set-country dt {
	font-size: 14px;
	margin-bottom: 10px
}

.set-country dd button {
	height: 42px;
	padding: 0 20px;
	background: transparent;
	border:1px solid #777;
	color: #fff
}

.set-num {
    display: flex;
    align-items: center;
}

.set-num button {
    background:transparent;
}

.set-num button span {
    color: #000;
    font-size: 38px;
    font-family: 'Arquitecta-Bold';
    display: inline-block;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: 100;
}

.set-num button:active span{
    color: #999;
}

.set-num input {
	width: 40px;
	height: 40px;
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	border:none;
	background: transparent;
}

.set-num-box {
	display: inline-block;
}


.foot-menu {
	padding: 15px 0;
	display: flex;
}

.foot-menu dl{
    padding: 0 10px;
}

.foot-menu .d1 {
    flex:1;
}

.foot-menu .d2 {
	flex:1.3;
}

.foot-menu .d3 {
    flex:1;
}
.foot-menu .d4 {
    flex:1;
}

.foot-menu dt {
	height: 50px;
	line-height: 50px;
}


.foot-menu dt .u2{
        visibility: hidden;
}

.foot-menu dd {
}

.foot-copyright {
	padding: 15px 0
}

.product-categroy-title {
    height: 60px;
    line-height: 60px;
}

.product-categroy-title h1 {
    font-size: 20px;
}

#cart_page .slide {
	height: 12rem;
	background: linear-gradient(to right, #eee, #fff 99%);
}




#cart_page .cart-list table th {
	padding: 15px 0;
	font-size: 1rem;
	opacity: .85
}

#cart_page .cart-list table .t1 {
	width: 7rem;
	padding-right: 3rem
}
#cart_page .cart-list table .t1 img {
	width: 7rem
}

#cart_page .cart-list table .t2 {}
#cart_page .cart-list table .t3 {
	width: 10rem
}
#cart_page .cart-list table .t4 {
	width: 10rem
}



#cart_page .cart-list table td {
	vertical-align: top;
	padding-top: 30px
}
#cart_page .cart-list table thead th{
	border-bottom: 1px solid #eee
}




#cart_page .cart-none {
	padding: 60px 0
}


#cart_page .cart-none .tips{
	margin-bottom: 60px
}

#cart_page .cart-none .tips h1{
	margin-bottom: 30px
}

#cart_page .cart-none .tips .button{
	height: 60px;
	line-height: 60px;
	padding: 0 20px;
}









#account_page .slide {
	height: 12rem;
	background: linear-gradient(to right, #eee, #fff 99%);
}




#account_page .account-box {
}

#account_page .account-box {
	max-width: 500px;
	margin:30px auto;
}

.err_display {
	display: none
}


#account_page .account-box .form {    
    display: flex;
    flex-wrap: wrap;
    margin:0 -8px;
}

#account_page .account-box .label {
    margin-bottom: 7px;
}

#account_page .account-box .form ul {
	display: block;
	margin-bottom: 20px;
	width: 100%;
	padding: 0 8px;
}


#account_page .account-box button {
	height: 50px;
	padding: 7px 10px;
	width: 100%;
	color: #fff;
	border-radius:4px;
}

#account_page .account-box .tips dt {
	margin-bottom: 10px
}

#account_page .account-box .tips li {
	list-style: decimal;
	margin-left: 1em
}

#account_page .account-box .d2 .tips-login .button{
	height: 40px;
	line-height: 40px;
	width: 80%
}

#account_page .tips dl {
    padding: 10px;
}

#account_page .auth-area {
    text-align: center;
    padding: 50px 0;
}

#account_page .auth-area dt {
    margin-bottom: 15px;
}

#account_page .auth-area dd span {

}


.web-path {
	padding: 15px 0;
	background: #fff;
	font-size: 14px;
	margin-bottom: 20px;
}



#product_details section {
	margin-bottom: 30px
}

#product_details section .title{
	margin-bottom: 20px
}

#product_details section .title h2 {
    font-size: 16px;
}

#product_details .details-body {
}

#product_details .details-body p {
    padding: 10px 0;
    display: block;
}

#product_details .details-body p img {
    display: block;
    width: 100%;
}


#product_details .details-info-wrap{
	display: flex;
}

#product_details .thumb-box {
	margin-right: 40px;
	width: 50%;
}


#product_details .thumb-view{
	width: 100%
}

#product_details .thumb-view img {
	width: 100%;
	display: block;
}



#product_details .product-info .price-area {
	font-size: 24px
}

#product_details .product-info-title {
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
}


.brand-label {    
	border-radius: 5px;
    background-color: #ffe7e7;
    color: #f16056;
    padding: 3px  7px;
    font-size: 14px;
}

#product_details .product-info-title .product-brand {
	margin-bottom: 7px;
}

#product_details .product-info-title .product-label {
	margin-bottom: 15px;
}


#product_details .product-info-title .product-name {
    line-height: 35px;
	margin:0 0 15px 0;
	
}

#product_details .product-info-title .product-name h2 {
    font-size: 30px;
	font-family: "Zurich n4";
	font-family: "Zurich Extended", sans-serif;
}


#product_details .product-info-title .product-price {
	margin-bottom: 15px;
}
#product_details .product-info-num {
	margin-bottom: 40px
}

#product_details .product-info-num .label {
    margin-bottom: 15px;
}

#product_details .product-info-sku {
	margin-bottom: 40px
}

#product_details .product-info-sku dl {
	display: block;
	margin-bottom: 20px
}

#product_details .product-info-sku dt {
	margin-bottom: 15px;
}


#product_details .product-info-button {
	margin-bottom: 40px
}



#product_details .product-info-delivery {
	margin-bottom: 40px
}



#product_details .product-info-specifications {
	margin-bottom: 40px
}

#product_details .product-info-specifications table{
}

#product_details .product-info-specifications table td{
    padding: 5px;
}


#product_details .product-info-specifications dt {
	margin-bottom: 15px;
	font-family: "OpenSans-Bold";
    font-size: 18px;
}

#product_details .product-info-specifications dd {
	line-height: 120%
}


.sku-item-box li {
}


.sku-item div{
	cursor: pointer;
	margin: 5px;
	text-align: center;
}

.sku-item.active div{
	border-color: var(--primary-button-bgcolor);
	color: var(--primary-button-bgcolor);
}

.sku-style-text {
}

.sku-style-text div{
	border:2px solid #ddd;
	padding: 5px 20px;
	border-radius: 0;
}



#product_details .info-box {
	flex:1;
}

.product-comment .title {
	margin-bottom: 15px
}




.product-info-button .u1,.product-info-button .u3 {
	flex:1;
}

.product-info-button .u2 {
	width: 10px
}

.product-info-button button {
	height: 50px;
	width: 100%;
	padding: 0 10px;
	
}


.product-comment {
	margin-bottom: 40px
}

.product-comment .title {
	margin-bottom: 20px
}


.maybe-like {
	margin-bottom: 20px
}

.maybe-like .product-list li{
    width: 20%!important;
}








.loader {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	border-top-color: transparent;
	border-radius: 100%;
	animation: circle infinite 0.75s linear;
	display: none
}

@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}























.layer {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
}

.layer .layer-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    z-index: 0;
    cursor: pointer;
}

.layer .layer-body {
    position: absolute;
}


#layer_cart {
    visibility: hidden;
}

#layer_cart .layer-body {
    top: 0;
    right:0;
    bottom: 0;
    width:450px;
    background:#fff;
    z-index: 9;
    
    -webkit-transform: -webkit-translateX(100%);
    transform: translateX(100%);
    
    -webkit-transition: all .4s;
    transition: all .4s;
}

#layer_cart.active {
    visibility: visible;
}

#layer_cart.active .layer-body {
    -webkit-transform: -webkit-translateX(0);
    transform: translateX(0);
}



#layer_cart.active .close_button{
    position: absolute;
    left: -60px;
    top: 20px;
    background: #fff;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
}



#layer_cart .title {
	padding: 0 20px 15px 20px;
	height: 60px;
	line-height: 60px;
}

#layer_cart .title h2 {
    font-family: "OpenSans-Bold";
    font-size: 14px;
}

#layer_cart .content {
	padding: 0 20px;
	overflow-y: auto
}
#layer_cart .footer {
	padding: 12px
}

#layer_cart .close-layer-button {
    z-index: 99;
    cursor: pointer;
    font-size: 16px;
}

#layer_cart .close-layer-button:active {
    color: #666;
}



#layer_cart .content li {
	margin-bottom: 30px;
	overflow: hidden;
}

#layer_cart .content li .u1 {
	margin-right: 15px
}

#layer_cart .content li img{
	width: 80px;
	border-radius: 4px;
}

#layer_cart .content .name-block{
	margin-bottom: 5px
}

#layer_cart .content .name-block .d1 {
	margin-right: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}


.sku-block{
	margin-bottom: 15px
}

.sku-block span{
    border-radius: 5px;
    background-color: #ffe7e7;
    color: #f16056;
    padding: 3px 7px;
    margin:0 5px 3px 0;
    font-size: 12px;
}

#layer_cart .set-num button{
    background: transparent;
    width: 30px;
    height: 30px;
}

#layer_cart .set-num button span {
    font-size: 30px;
    color: #000;
    font-family: 'Arquitecta-Bold';
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: 100;
}

#layer_cart .set-num input{
	width: 30px;
	height: 30px;
	font-size: 16px;
}






#layer_cart .button-checkout {
	height: 50px
}

#layer_cart .del-item {
	border: none;
	outline: none;
	background: transparent;
	height: 30px;
	width: 30px;
}

#layer_cart .footer .total-area {
	margin-bottom: 15px
}

#layer_cart .footer .tips-area {
	margin-bottom: 15px
}














/* 隐藏原生的select样式 */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 11px;
    border: 1px solid #999;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    width: 100%;
    position: relative;
}





.index-section .swiper-button-next, .index-section .swiper-button-prev {
    top: 40%!important;
}








#layer_feedback_msg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}

#layer_feedback_msg .layer-body{
    text-align: center;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;
}

#layer_feedback_msg .layer-body .main{
    background: #fff;
    padding: 30px 20px!important;
}

#layer_feedback_msg .close-layer-button {
    height: 35px;
    padding: 0 15px;
    margin-top: 20px;
}










            .menu_layer_footer {
                text-align: center;
                padding: 15px;
            }
            
            .menu_layer_footer .change_lang_button {
                margin-top: 20px;
                line-height: 40px;
                height:40px;
                cursor: pointer
            }
            
            .menu_layer_footer .a_button_trans {
                display: block;
                height: 40px;
                line-height: 40px;
                border-radius: 4px;
            }
            
            .menu_layer_footer .tips {
                margin-top: 15px;
            }
            



    #member_page body {
        background: #f3f3f3;
    }

    #member_page main {
    }
    
    #member_page .body .body-left {
        margin-right: 30px;
        background: #fff;
        border-radius: 7px;
        width: 220px;
        padding: 0 15px;
    }
    
    #member_page .body .body-left dt {
        border-bottom: 1px solid #eee;
        height: 60px;
        line-height: 60px;
    }
    
    #member_page .body .body-left dd {
        padding: 15px 0;
    }
    
     #member_page .body .body-left dd li {
        height: 42px;
        line-height: 42px;
        font-weight: bold;
     }
    
    #member_page .body .body-right {
    }

    
    #member_page .body .body-right section{
        background: #fff;
        border-radius: 4px;
        margin-bottom: 30px;
        padding:  30px;
    }
    
    #member_page .body .body-right dt {
        margin-bottom: 30px;
    }
    
    #member_page .body .body-right dd {
    }
    
    























.google-btn {
    background-color: #fff;
    color: #757575;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.google-btn:hover {
    background-color: #f1f1f1;
}
.google-icon {
    margin-right: 10px;
    width: 18px;
}