﻿#header{
	position: relative;
	z-index: 999;
}
.width{
	width: 1200px;
	max-width: 100%;
	margin: auto;
    position: relative;
    z-index: 0;
}
#header .clear{
	padding: 50px 0;
}

.header-logo{
	width: 250px;
	max-width: 100%;
	display: inline-block;
	position: relative;
}
.header-menu{
	width: calc(100% - 250px);
	display: inline-block;
	text-align: right;
}
.header-menu ul li{
	display: inline-block;
	
}
.header-menu ul li:last-child a{
	padding-right: 0;
}
.header-menu ul li:after{
	content: '';
	display: inline-block;
	vertical-align: middle;
	border-right: 1px solid #000;
    padding: 10px 0;
}
.header-menu ul li:last-child:after{
	border-right: 0;
}
.header-menu ul li a{
	display: inline-block;
	vertical-align: middle;
	padding: 0 17px;
	font-size: 20px;
	transition: all .3s linear;
}
.header-menu ul li a:hover,
.header-menu ul li a.active{
	color: #ff5400;
}
.block-title{
	border-bottom: 1px solid #aaa;
	padding-bottom: 25px;
	line-height: 1.6;
    margin-bottom: 30px;
}
.block-title h1{
	font-size: 35px;
}
.block-title p{
	color: #28637d;
	font-size: 24px;
}
.header-menu ul li:first-child{
	display: none;
}
.rwd-ntb{
	width: 40px;
	height: 40px;
	display: none;
	position: absolute;
	right: 5%;
	border: 1px solid #000;
	text-align: center;
}

.rwd-ntb span{
	width: 30px;
	height: 4px;
	background-color: #000;
	display: block;
	margin: 6.8px auto;
	position: relative;
	transition: all .5s ease;
}
.rwd-ntb.open span:nth-child(1){
	-webkit-transform: translateY(10px) rotate(45deg);
    -ms-transform: translateY(10px) rotate(45deg);
    -o-transform: translateY(10px) rotate(45deg);
    transform: translateY(10px) rotate(45deg);
}
.rwd-ntb.open span:nth-child(2){
    opacity: 0;
}
.rwd-ntb.open span:nth-child(3){
    -webkit-transform: translateY(-11px) rotate(-45deg);
    -ms-transform: translateY(-11px) rotate(-45deg);
    -o-transform: translateY(-11px) rotate(-45deg);
    transform: translateY(-11px) rotate(-45deg);
}



/* -----------鞈潛�頠�--------------- */
.header-box{
	font-size: 0;
}
.buycar-box{
	display: block;
	position: absolute;
	right: 0;
	top: 20px;
	font-size: 16px;
}
.buycar-link-p,
.buycar-link{
	display: inline-block;
}
.buycar-link{
	letter-spacing: 1px;
}
.buycar-box .buycar-link:nth-child(2){
	margin-left: 10px;
}


.header-member-name,
.header-member-title,
.header-shopcar-products{
	display: inline-block;
}
.header-member-name{
	cursor: pointer;
	transition: all .3s linear;
}
.header-member-name:hover{
	color: #ff5400;
}



.buycar-link span{
	font-size: 16px;
	display: inline-block;
	margin: 0 5px;
}
.header-member-show-out{
	display: inline-block;
}

/* ---------fixed-buycar--------------- */

.fixed-buycar-num{
	width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #c5162b;
    color: #FFF;
    position: absolute;
    bottom: 10%;
    text-align: center;
    padding-left: 6px;
    box-sizing: border-box;
    right: 1%;
}

.fixed-buycar-list-block{
	width: 960px;
	max-width: 100%;
	display: block;
	position: fixed;
	z-index: 9999;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.9);
	top: 0;
	left: -960px;
	transition: all .3s linear;
	padding: 20px 0;
	box-sizing: border-box;
}
.fixed-buycar-list-block.active{
	left: 0;
}
.fixed-buycar-title{
	font-size: 28px;
	color: #FFF;
	letter-spacing: 2px;
	padding-left: 20px;
	box-sizing: border-box;
}
.fixed-buycar-list-box{
	width: 100%;
	display: block;
	max-height: calc(100vh - 105px);
	overflow: auto;
	margin-top: 20px;
	font-size: 0;
}
.fixed-buycar-list{
	width: calc(25% - 40px);
	margin: 20px;
	display: inline-block;
	position: relative;
	vertical-align: top;

}
.fixed-buycar-title-box{
	margin-top: 10px;
}
.fixed-buycar-many{
	font-size: 14px;
	color: #FFF;
	display: inline-block;
	width: 75px;
	vertical-align: top;
}
.fixed-buycar-money{
	width: calc(100% - 75px);
	color: #FFF;
	font-size: 14px;
	text-align: right;
	display: inline-block;
	vertical-align: top;
}
.fixed-buycar-img-box{
	width: 100%;
	display: block;
	height: 200px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.fixed-buycar-del{
	width: 25px;
	height: 25px;
	line-height: 22px;
	font-size: 20px;
	border-radius: 50%;
    background-color: #ff5400;
    color: #FFF;
    position: absolute;
    right: -10px;
    top: -15px;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    transition: all .3s linear;
}
.fixed-buycar-del:hover{
	background-color: red;
}
.fixed-buycar-del img{
	margin-bottom: 11px;
}

.fixed-buycar-button{
	height: 200px;
	border: 1px solid #FFF;
	font-size: 20px;
	color: #FFF;
	text-align: center;
	box-sizing: border-box;
	padding: 66px;
	letter-spacing: 7px;
	transition: all .3s linear;
}
.fixed-buycar-button:hover{
	background-color:#ff5400;
	color: #FFF; 
	font-weight: bold;
}


/* ---------products-page-------------- */
.products-page-box{
	width: 830px;
	max-width: 100%;
	margin: 0 auto;
	margin-top: 67px;
    padding-top: 90px;
    padding-bottom: 120px;
}
.products-page-box .main-title-box{
	position: relative;
	z-index: 9;
}
.products-page-list-box{
	width: 100%;
	font-size: 0;
	display: block;
	margin-top: 90px;
}
.products-page-img-box{
	width: 500px;
	max-width: 100%;
	display: inline-block;
	vertical-align: top;	
}
.products-page-img{
	width: 100%;
	height: 330px;
	display: block;

}
.products-page-info-box{
	width: calc(100% - 500px);
	padding-left: 15px;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}
.products-page-info-title{
	font-size: 28px;
	letter-spacing: 2px;
	font-weight: bold;
}
.products-page-info-size{
	font-size: 14px;
	letter-spacing: 2px;
	color: #555;
	padding-bottom: 5px;
}
.products-page-info-size span{
	font-weight: bold;
	color: #000;
}
.products-page-info-money-box{
	width: 100%;
	display: block;
}
.products-page-info-original-money{
	font-size: 16px;
	color: #000;
	letter-spacing: 2px;
	float: left;
	text-decoration:  line-through;
}
.products-page-info-original-price{
	text-decoration: none;
}
.products-page-info-money{
	width: 150px;
	max-width: 100%;
	font-size: 16px;
	color: #c5162b;
	float: right;
	letter-spacing: 2px;
	position: relative;
	text-align: right;
}
.products-page-info-money:after{
	content: '/';
	font-size: 16px;
	display: block;
	position: absolute;
	left: -10px;
	color: #c5162b;
	top: 0;
}
.products-page-article{
	font-size: 14px;
	color: #555;
	letter-spacing: 2px;
	line-height: 1.6;
	margin-top: 10px;
	height: 129px;
	margin-bottom: 10px;
	overflow: hidden;
}
.products-page-many-box .products-list-many-box{
	float: left;
	margin-top: 0;
}
.products-page-many-box .products-button{
	float: right;
	margin-top: 0;
}

.products-page-box .edit-box{
	border-top: 1px solid #ddd;
	padding-top: 10px;
}
.products-page-more .products-list{
	margin: 0 20px;
}

#products-page .news-page-more-box{
	width: 1200px;
}


.fixed-buycar-mask{
	width: 100%;
	height: 100vh;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
.fixed-buycar-mask.active{
	display: block;
}


/* -----------���摱�蒈��----------- */
.member-table{
    width: 100%;
    display: none;
    background-color: rgba(0, 0, 0, .9);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 99999;
}
.member-table.active{
    display: table;
}
.table-mid{
    display: table-cell;
    vertical-align: middle;
}
.member-in-box{
    width: 460px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.member-in-box .main-title-box{
    color: #FFF;
}
.member-s-title{
    font-size: 14px;
    color: #FFF;
    letter-spacing: 4px;
    padding: 5px 0;
    text-align: center;
}

.member-in{
    width: 100%;
    border: 1px solid #FFF;
}
.member-in-enter{
    background-color: #000;
    padding: 30px 0;
}
.member-in-info{
    width: 280px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.member-in-info-input{
    width: 100%;
    height: 46px;
    border: 1px solid #FFF;
    background-color: transparent;
    letter-spacing: 2px;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 16px;
    color: #FFF;
}
.member-in-info-input-forget-code{
  width: calc( 100% - 114px );
 }
.member-in-info-input::-webkit-input-placeholder { color: #fff;font-family: "敺株��迤暺煾��",  "Microsoft JhengHei"; }
.member-in-info-input:-moz-placeholder { color: #fff; font-family: "敺株��迤暺煾��",  "Microsoft JhengHei";}
.member-in-info-input::-moz-placeholder { color: #fff;font-family: "敺株��迤暺煾��",  "Microsoft JhengHei"; }
.member-in-info-input:-ms-input-placeholder { color: #fff;font-family: "敺株��迤暺煾��",  "Microsoft JhengHei"; }

.member-in-info li{
    padding-bottom: 25px;
}
.member-in-info li:nth-child(2){
    padding-bottom: 0;
}

.member-in-forget{
    font-size: 14px;
    color: #FFF;
    display: block;
    float: right;
    margin: 10px 0;
}
.member-button{
    width: 100%;
    height: 46px;
    border: 1px solid #FFF;
    background-color: transparent;
    letter-spacing: 2px;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    color: #FFF;
    font-family: "敺株��迤暺煾��",  "Microsoft JhengHei";
    transition: all .3s linear;
}

.member-in-facebook{
    display: block;
    margin-top: 25px;
}

.main-title-box{
  text-align: center;
  font-size: 0;
}
.main-title-icon{
	width: 50px;
  display: inline-block;
  vertical-align: bottom;
}
.main-title{
  font-size: 18px;
  letter-spacing: 5px;
  line-height: 1.6;
  display: inline-block;
  vertical-align: bottom;
  width: 70px;
  padding-left: 20px;
}
.main-title-icon2{
  display: inline-block;
  vertical-align: bottom;
  font-size: 16px;
}
.main-title-en{
  font-size: 16px;
  letter-spacing: 2px;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 10px;
}
.member-out {
    width: 50px;
    height: 50px;
    max-width: 100%;
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../img/front/bth-icon2.png);
    cursor: pointer;
}
.member-in-info-input-forget-code {
    width: calc( 100% - 114px );
}
.member-change-verification {
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
}
#member-rwd-forget .member-change-verification{
	color:  #ff5400;
}
#member-rwd-forget .member-button{
	background-color:  #ff5400;
}
#member-rwd-forget .member-in, #member-forget .member-button {
    margin-top: 20px;
}

.products-button{
	text-align: center;
}
.header-logo-title{
	font-size: 20px;
    position: absolute;
    right: -100px;
    letter-spacing: 2px;
    margin-top: 10px;
}

.rwd-fixex-buycar-out {
    display: none;
    position: absolute;
    right: 20px;
    top: 22px;
    font-size: 20px;
    color: #FFF;
}
.fixed-buycar-many input {
    width: 27px;
    display: inline-block;
    background-color: transparent;
    color: #FFF;
    border: 0;
    outline: none;
}

#buy .member-in-forget{
	color: #ff5400;
	margin-top: 0;
}
#buy .member-in .member-in-forget{
	margin-top: 10px;
}
#buy .buycar-button{
	clear: both;
	width: 100%;
}
.rwd-member-in{
	display: none;
}

.member-in-info #myCanvas{
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}
.member-in-info #inputCode{
	display: inline-block;
	vertical-align: middle;
}
/*---------------hover---------------*/
.header-member-title{
	cursor: pointer;
	transition: all .3s linear;
}
.buycar-link a{
	transition: all .3s linear;

}
.buycar-link a:hover,
.buycar-link .header-member-title:hover{
	color: #ff5400;
}
#member-rwd-forget .member-button:hover{
	background-color: #555;
}

.member-in-forget:hover{
	color: #ff5400;
}
.member-button:hover{
	background-color: #ff5400;
}