/* CSS Document */

/*max-width 要从大到小*/
@media (max-width: 1640px){
	body{ font-size:16px;}
	nav ul li a{ padding:0 1.68rem;}
	.login{ padding:8% 4%;}
	.login section ul{ width:80%;}
	.eye-param .eye .prescription{ background-size:100px auto;}
	nav ul li a{ font-size:1.68rem;}
	
	.login section ul li.code img{ height:44px; max-width:120px;}
}

@media (max-width: 1421px){
	
	.login{ padding:5rem 8%;}
	.login section ul li h1{ font-size:4rem;}
}
@media (max-width: 1391px){
	
}
@media (max-width: 1199px){

	.how-to-order section h2{ font-size:4rem;}

	nav ul li a{ padding:0 1.3rem;}
	
	.login section ul{ width:84%;}
	
	/*帮助中心*/
	.article-detail{ width:90%; font-size:1.6rem; margin:2rem auto; line-height:2rem}
	.article-detail h3{ font-size:2.4rem;}
	
	.eye-param .fill-pd{ float:none;}
	.eye-param .eye{ margin-left:0; border:0;}

	footer .menu-list{ padding:5%; margin-top:10px;}
}

@media (max-width: 990px){
	body{ font-size:14px;}
	nav{ padding-top:0;}
	
	.how-to-order div,.how-to-order section{ width:100%;}
	.how-to-order section{ padding:2rem;}
	.how-to-order section h2{ font-size:3rem;}
	
	nav ul li a{ font-size:18px; padding:0 1.2rem;}
	nav ul li a i{ font-size:12px;}
	
	
}
@media (max-width: 768px){
	
	header{ position:relative; z-index:999}
	select{ -webkit-appearance: none;}
	.xs-mgl-1{ margin-left:1rem;}
	.logo{ float:none; height:60px; width:180px;}
	.navbar-collapse{ border:0; padding:0 12px}
	nav{ background:#000; float:none; margin:0;}
	nav ul{ margin:12px 0;}
	nav ul li{ display:block; width:100%; float:none; padding:1rem 0;}
	nav ul li.menu-member{ border-bottom:1px solid #272727; padding-bottom:1.68rem;}
	nav ul li a{ font-size:15px;}
	nav ul li a i{ color:#707070;}
	nav ul li a:hover,nav ul li a:hover i{ color:#fff;}
	nav ul li .lan{ float:right;}
	nav ul li .lan a:last-child{ color:#f00;}
	nav ul li.menu-lan{ border-bottom:1px dotted #272727; text-align:right;}
	nav ul li.menu-lan a{ display:block; margin-right:0rem; display:inline-block; line-height:2.68rem;}
	nav ul li.menu-lan a:last-child{ color:#f00;}
	nav ul li.menu-lan a i{ display:inline-block;}
	nav ul li.menu-lan a img{}
	
	header .top{ text-align:left;}
	header .top ul{ float:left;}
	header .top ul li{ margin:0; padding:0 1.1rem; height:52px;}
	header .top ul li.cart{ position:relative; margin-right:0rem; background:#424242}
	header .top ul li.cart span{ position:absolute; background:#fff; height:1.4rem; width:1.4rem; line-height:1.4rem; font-size:1.2rem; color:#ab3025; text-align:center; border-radius:50%; right:6px; top:6px;}
	header .top ul li.cart i{ vertical-align:-2px;}
	header .top ul li.xs-search.active{ background:#d2d2d2;}
	header .top ul li.email{ padding-left:0.2rem;}
	header .top ul li.logo{ position:absolute; left:50%; margin-left:-80px; padding:0;}
	header .top ul li.logo img{ height:46px;}
	
	.menu{ padding:0;}
	.menu .icon{ display:none; float:none; width:100%; position:inherit; height:55px; margin-top:0px; background:#d2d2d2;}
	.menu .icon .search{ display:block; position:inherit; width:100%; left:auto; top:auto; overflow:hidden;}
	.menu .icon .search input{ display:block; width:80%; height:35px;}
	.menu .icon .search button{ width:20%;}
	
	.ad-block .left,.ad-block .right{ margin-left:0; width:100%;}
	.ad-block .left{ margin-bottom:0;}
	
	.navbar-toggle{ position:absolute; top:6px; right:4px;}	
	.navbar-toggle .icon-bar {
		background: #fff;
		border-radius:0;
		width:26px;
		border: none;
		height: 1px;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
		cursor: pointer;
	}
	.navbar-toggle .icon-bar:nth-of-type(2) { top: 6px;}
	.navbar-toggle .icon-bar:nth-of-type(3) { top: 16px;}


	/* Animate the top hamburger bar */
	nav .active .top {
		-webkit-transform: translateY(12px) translateX(0) rotate(45deg);
		-ms-transform: translateY(12px) translateX(0) rotate(45deg);
		transform: translateY(12px) translateX(0) rotate(45deg);
		background: #FFF;
	}
	nav .active .middle { opacity: 0;background: #FFF;}
	nav .active .bottom {
		-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
		-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
		transform: translateY(-8px) translateX(0) rotate(-45deg);
		background: #FFF;
	}
	
	
	.how-to-order,.ad-block{ padding:0 12px;}
	
	.ad-show .container{ background:none; padding:0px; margin:100px 8px; width:auto;}
	.ad-show .container img{ }
	.ad-show .container .btn-close{ bottom:-1.68rem;}
	
	/*帮助中心*/
	.article h2{ font-size:2rem;}
	.article h3{ margin:1rem;}
	.article ul li{ width:100%; margin-bottom:2rem;}
	.article>ul li a{ font-size:3rem;}
	.article ul li div{ margin-left:20%; margin-right:15%; padding:6rem 2rem 4rem 2rem; min-height:26rem; }
	.article>ul li a div span{ width:8rem; height:8rem; font-size:8rem; line-height:8rem;}
	.article>ul li div img{ width:52%;}
	.article-detail a{ font-size:1.8rem;}
	
	/*登录*/
	.login{ padding:2rem; border:0;}
	.login section{ width:100%; margin-top:2rem;}
	.login section ul{ width:86%;}
	.login section:first-child{ border:0; margin-bottom:3rem;}
	.login section ul li h1{ font-size:3rem;}
	.login section ul li.code img{ height:46px;}
	
	.cart-login{ margin-top:100px;}
	/*忘记密码*/
	.forget section{ width:86%;}
	
	.breadcrumb{ margin-bottom:0; padding:12px; font-size:16px;}
	
	/*產品*/
	.goods-banner{ height:180px; margin-bottom:1rem; background-size:auto 180px; background-position:right -6rem center;}
	.goods-banner span{ font-size:2.8rem; right:3.8%; }
	.text-left span{ left:4%; right:auto; text-align:left; max-width:50%;}
	.filter .condition{ width:100%; left:0; border-radius:0; min-height:inherit; -webkit-overflow-scrolling:touch}
	.filter .condition ul li h4{ position:relative;}
	.filter .condition ul li h4:after{ content:""; position:absolute; right:5px; top:5px; width:8px; height:8px; background-color:transparent; border-top: 2px solid #ab3025; border-right: 2px solid #ab3025; transform: rotate(-225deg); transition:0.6s;}
	.filter .condition ul li.active h4:after{ transform: rotate(-135deg);transition:0.6s;}
	.filter .condition ul li.active div{ display:block; transition:ease-in;}
	
	.filter .condition ul li div{ display:none;}
	.filter .condition ul li div .checkbox{ width:50%;}
	.filter .condition a.confirm,.filter .condition a.clear{ border-radius:0;}
	.filter .result{ left:1rem; position:inherit;}
	
	.product{ margin-top:0rem;}
	.product ul.list{ border-left:0;}
	.product ul li:nth-child(even){ border-right:1;}
	.product ul.list li a h4{ font-size:1rem;}

	.product ul.list li section{ margin:0.68rem;}
	.product ul.list li .color-swatch{ position:inherit; right:0; white-space:nowrap; overflow:hidden; overflow-x:auto}
	.product ul.list li .bifocal,.product ul.list li h3{ font-size:1.4rem; margin:0.5rem;}
	.product ul.list li.goods-empty{ font-size:2.68rem; text-shadow:0px 0px 0px #ccc;}
	.next-page a{ width:80%;}
	
	.product ul.list li .goods_no{ top:0.38rem; left:0.38rem;}
	.product ul.list li .add-favor a{ width:28px; height:26px; top:0.38rem; right:0.38rem;}
	
	.goods-info{ margin-top:0;}
	.goods-info .goods-image .color-list{ margin-top:0rem;}
	.goods-info .goods-image{ width:100%; padding:0rem;}
	.goods-info .goods-image img{ max-width:92%;}
	.goods-info .goods-price{ width:100%; padding:1rem;}
	.goods-info .goods-common .vision-price .price-desc{ margin:0; line-height:1.8rem;}
	.goods-info .goods-common .vision-price .font-price{ margin-right:1rem;}
	.goods-info .goods-common{ width:94%; margin:0 3%;}
	.goods-info .goods-common .add-favor{ margin-right:1rem;}
	.goods-info .goods-common h3{ font-size:1.68rem;}
	
	/*试戴模态窗*/
	.modal-backdrop.in{ opacity:0.8}
	.modal-try-on{ width:98%; margin:1%;}
	.modal-try-on .modal-body{ padding-bottom:26px;}
	.model{ width:100%; height:324px;}
	.model .choose-model{ background-position:center top; background-repeat:no-repeat;}
	.modal .tips .modal-body img{ max-width:100%;}
	
	.modal .modal-dialog{ width:96%; margin:2%;}
	.modal .tips .modal-title{ text-indent:0rem;}
	.modal-body{ padding:0 1rem 1rem 1rem; line-height:1.8rem;}
	.modal-body img{ max-width:100%;}
	.modal-buy-frame img{ width:100%;}
	
	.goods-info-select .goods-common .param label{ margin-right:1rem;}
	.goods-info .goods-image .color-list a img{ height:50px; margin-top:0.68rem;}
	
	.goods-info .goods-common .action button{ height:3.6rem; width:100%;}
	.goods-info .goods-common .action .buy-frame-only{ margin-left:-14%; width:114%;}
	.goods-info .goods-common .action .frame-only-div .show-tips{ height:3rem; width:3rem; line-height:3rem;}
	.goods-info .goods-common .action .buy-now{ margin-left:0; width:100%;}
	.goods-info .goods-common .action .try-on{ position:fixed; top:28rem; right:-1.68rem; padding:0.38rem 1.68rem 0.38rem 0.68rem; width:8.88rem; height:4rem; opacity:0.9;}
	
	.goods-detail{ width:94%; margin:0 3%; padding:0;}
	.goods-detail .images{ width:100%; float:none;}
	.goods-detail .recomm{ margin-left:0; margin-top:1rem;}
	
	.goods-detail .recomm ul{ margin:0; width:auto;}
	.goods-detail .recomm ul li{ width:50%; float:left;}
	.goods-detail .recomm.horizontal ul li{ width:50%;}
	
	.goods-detail .param ul li{ width:100%;}
	.goods-detail .param,.goods-detail .desc{ width:100%; margin:0;}
	
	/*选镜片*/
	.goods-info-select{ margin-bottom:0rem;}
	.goods-info-select .goods-image{ width:100%; text-align:center;}
	.goods-info-select .goods-image img{ width:60%; margin:0 auto;}
	.goods-info-select .goods-common{ margin:12px;}
	
	.glasses{ padding:0 12px;}
	.glasses .step{ font-size:1.8rem; padding-left:3.68rem; line-height:2.4rem; margin-top:1rem; padding-bottom:0.68rem;}
	.glasses .step em{ top:-2px; height:30px; width:30px; line-height:30px; font-size:24px; left:0rem; }
	.glasses .tips{ position:inherit; font-size:1.4rem; line-height:2.6rem;}
	.glasses .tips span{ display:block; margin-left:0;}
	.show-tips{ margin-left:0.3rem; font-weight:200;}
	.glasses .tips .show-tips{ margin-left:0rem;}
	
	.modal-try-on .model-trumb-list{ width:100%; height:70px; padding:0 20px;}
	.swiper-button-next, .swiper-button-prev{ width:20px; height:30px; margin-top:-16px; background-size:20px auto;}
	.swiper-button-prev{ margin-left:10px;}
	.swiper-button-next{ margin-right:10px;}
	
	.eye-param{ padding:0rem 0;}
	.eye-param .fill-pd{ width:100%; float:none; margin:0px;}
	.eye-param .fill-pd img{ width:78px; height:auto;}
	.eye-param .eye{ margin:0; border:0;}
	.eye-param .eye ul{ text-align:left;}
	.eye-param .eye ul li label{ width:5.6rem;}
	.eye-param .eye ul li select{ padding:0.28rem 2rem 0.28rem 1rem; width: 6.68rem;}
	.eye-param .eye .prescription{ background:none; height:auto; padding:1rem 0;}
	.eye-param .eye .purpose{ margin:0px;}
	.eye-param .eye .purpose h3{ font-size:1.6rem;}
	
	.lenses .lenses-item{ padding:1rem 0;}
	.lenses .lenses-item ul{ margin:0px;}
	.lenses .lenses-item ul li{ margin-bottom:1rem; padding:0.68rem 0;}
	.lenses .lenses-item ul li select{ width:91%;}
	.lenses .lenses-item ul li label{ width:16rem;}
	.div-blue-light{ float:right;}
	.add-cart button{ margin:0;}
	
	.block-wap{ height:4rem;}
	.lenses .lenses-item ul li .upgrade-item{ display:block;}
	
	/*购物车*/
	.shopping-cart .cart-list table .thumb-image{ width:40%; float:none;}
	.shopping-cart .cart-list table .param{ margin:0;}
	.shopping-cart .cart-list .empty-cart{ font-size:2.6rem; padding:5rem 0;}
	.shopping-cart .cart-list{ width:100%; float:none;}
	.shopping-cart .cart-list table .action a{ width:auto; padding:2px 8px;}
	.shopping-cart .cart-list table .view-vision{ font-size:1.5rem;}
	.cart-list .my-vision table{ width:100%; font-size:1.4rem;}
	.shipping .cart-list{ padding:1% 12px;}
	.shipping .cart-list ul.address li select{ width:100%;}
	.shopping-cart .summary{ margin:0.1rem 1rem; padding-top:0}
	.shipping .cart-list textarea.mid-long{ width:100%;}
	.shipping .cart-list ul.address li input.long{ width:100%;}
	
	.city-lists{ width:80%;}
	.shipping ul.address li.city input.mid-long{ width:80%;}
	.shipping .cart-list ul.address li textarea{ width:100%;}
	
	.cart-login{ width:86%;}
	.checkout .address,.checkout .pay,.checkout .goods{ width:100%;}
	.checkout .pay{ margin:0 0 1rem 0;}
	.checkout .order-detail .order-goods .thumb-image{ float:left;}
	
	/*会员中心*/
	.member .left-menu{ width:100%; margin-bottom:1.6rem; float:none; background:#F8F8F8;}
	.member .left-menu ul{ margin:0 1rem; overflow:hidden;}
	.member .left-menu ul li{ margin:0; float:left; width:50%;}
	.member .left-menu ul li a:hover, .member .left-menu ul li a.active{ text-indent:0;}
	.member .right-main{ margin:0;}
	.order-info{ border-left:0; border-right:0;}
	.order-info .glasses-info{ flex:6;}
	.order-info .order-view{ flex:2;}
	.order-info .order-view{ padding:0 6px;}
	.order-info table .image{ width:168px; float:none;}
	.order-info table .info,.order-info table .param{ margin-left:0;}
	.order-info th span{ text-indent:0rem;}
	.order-detail .order-goods img{ width:12rem;}
	.order-detail li section,.order-detail li p{ padding-left:1rem;}
	.order-detail .order-goods .thumb-image{ width:100%; float:none;}
	.order-detail .order-goods .param{ margin:0;}
	.order-detail .order-goods .param h3{ font-size:16px;}
	.view-vision{ font-size:15px;}
	
	.order-detail li h4{ font-size:14px; padding:2px 0;}
	
	.member .right-main .profile{ margin:1rem;}
	.member .right-main .profile ul li select{ width:100%;}
	.member .right-main .profile ul li input,
	.member .right-main .profile ul li input.long{ width:100%;}
	
	.member .right-main .profile ul li.operation{ width:100%; margin-top:1rem}
	
	.member .right-main .profile ul li.city label{ float:none;}
	.member .right-main .profile ul li.city>section{ margin-left:0;}
	.member .right-main .profile ul li.city .city-lists{ width:100%; z-index:999}
	
	.favor-list li:nth-child(-n+3){border-top:0px solid #d8d1ca;}
	.favor-list li:nth-child(-n+2){border-top:1px solid #d8d1ca;}
	
	footer{ text-align:center;}
	footer .menu-list{ padding:2%;}
	footer .menu-list ul li{ width:100%!important; display:block; padding:1rem; border-bottom:1px solid #d2d2d2;}
	footer .menu-list ul li:last-child{ border:0;}
	footer .menu-list ul li h3{ margin-bottom:0; position:relative; font-weight:400; font-size:1.5rem;}
	footer .menu-list ul li h3:after{ content:""; position:absolute; right:1px; top:5px; width:8px; height:8px; background-color:transparent; border-top: 2px solid #ab3025; border-right: 2px solid #ab3025; transform: rotate(-225deg); transition:0.6s;}
	footer .menu-list ul li.active h3:after{ transform: rotate(-135deg);transition:0.6s;}
	footer .menu-list ul li div{ margin-top:0.68rem; margin-left:1rem; display:none;}
	footer .menu-list ul li.active div{ display:block; transition:ease-in;}
	footer .menu-list ul li a{ padding:4px 0;}
	footer .menu-list ul li:last-child{ border-left:0; min-height:auto; text-align:left;}
	
	footer .menu-list ul li .contact{ margin-top:1rem;}
}

/*min-width 要从小到大*/

@media (min-width: 768px){
	.goods-banner{ height:188px; background-size:auto 208px;}
	.goods-banner span{ font-size:3.8rem;}
	
	.shopping-cart .cart-list{ width:100%; float:none;}
	.shopping-cart .cart-list table .thumb-image{ width:180px;}
	.shopping-cart .cart-list table .param{ margin-left:186px;}
	.shopping-cart .summary{ margin-left:0; padding-top:2rem;}
	
	.member .left-menu{ width:268px;}
	.member .right-main{ margin-left:268px;}

}

@media (min-width: 992px){
	.logo{ margin-right:0;}
	.goods-banner{ height:238px; background-size:auto 238px;}
	.goods-banner span{ font-size:3.68rem;}
	
	.shopping-cart .cart-list{ width:100%; float:none;}
	.shopping-cart .summary{ margin-left:60%;}
	
	.shipping .cart-list{ width:61%; float:left;}
	.shipping .summary{ margin-left:62%;}
	
	
}
@media (min-width: 1200px){
	.logo img{ height:4rem; margin-top:1.38rem;}
	
	.article>ul li a{ font-size:3.2rem;}
	
	.goods-banner{ height:318px; background-size:auto 332px;}
	.goods-banner span{ font-size:3.8rem;}
	
	.shopping-cart .cart-list{ width:70%; float:left;}
	.shopping-cart .summary{ margin-left:75%;}
	.shipping .cart-list{ width:64%; float:left;}
	.shipping .summary{ margin-left:66%;}
	
	footer .menu-list{ padding-left:88px;}
	footer .menu-list ul li a{ font-size:1.6rem;}
}

@media (min-width:1421px){
	.member .left-menu{ width:340px;}
	.member .right-main{ margin-left:340px;}
}

@media (min-width:1640px){
	.logo img{ height:auto; margin-top:0;}
	.goods-banner{ height:400px; background-size:auto 400px;}
	.goods-banner span{ font-size:4rem;}
	.shopping-cart .cart-list{ width:70%;}
	.shopping-cart .summary{ margin-left:72%;}
}