@charset "utf-8";

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, p, span, em, small, strong, i, b, q, table, img {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
img{border:none; vertical-align:middle;}
ul, ol, li {list-style:none;}
q:before,q:after{content:'';}
i {vertical-align:top;}
a:focus,input,textarea{outline-style:none;}
input,select{vertical-align:middle;}
select,input,button,textarea{ border:none; outline:none; vertical-align:middle;}
textarea{ resize:none; }
h1 {font-size:14px;}
h2, h3, h4, h5, h6 { font-size:12px; }
/*************本页清除浮动代码***************/
.clear:before, .clear:after { content: ""; display: table; }
.clear:after { clear: both; }
.clear { *zoom: 1; }
.clear { clear:both; }
/*************本页清除浮动代码***************/

/******************头部、中间、底部*******************/
/****.header, .content, .footer { width:960px; margin:0 auto; overflow:hidden;}
/******************头部、中间、底部结束*******************/

/*******有高度清除*******/
.clear0{clear:both; height:0; line-height:0; font-size:0; overflow:hidden;}
.clear1{clear:both; height:1px; line-height:0; font-size:0; overflow:hidden;}
.clear5{clear:both; height:5px; line-height:0; font-size:0; overflow:hidden;}
.clear10{clear:both; height:10px; line-height:0; font-size:0; overflow:hidden;}
.clear20{clear:both; height:20px; line-height:0; font-size:0; overflow:hidden;}
/*******有高度清除*******/

/*******字体大小*******/
.font12 { font-size:12px;}
.font14 { font-size:14px;}
.font16 { font-size:16px;}
.font18 { font-size:18px;}
.font20 { font-size:20px;}
.font22 { font-size:22px;}
.font24 { font-size:24px;}
.font26 { font-size:26px;}
.font28 { font-size:28px;}
.font30 { font-size:30px;}
/*******字体大小*******/

/*******行高*******/
.lh16 { line-height:16px;}
.lh18 { line-height:18px;}
.lh20 { line-height:20px;}
.lh22 { line-height:22px;}
.lh24 { line-height:24px;}
.lh26 { line-height:26px;}
.lh28 { line-height:28px;}
.lh30 { line-height:30px;}
/*******行高*******/

/*******标签属性display*******/
.disB { display:block;}
.disN { display:none;}
.disIB { display:inline-block;}
/*******标签属性display*******/

/*******浮动float*******/
.floatL { float:left; }
.floatR { float:right; }
/*******浮动float结束*******/

/*******字体粗细font-weight*******/
.fontwB { font-weight:bold; }
.fontwN { font-weight:normal; }
/*******字体粗细font-weight*******/

/*******内容水平排布*******/
.textL { text-align:left; }
.textC { text-align:center; }
.textR { text-align:right; }
/*******内容水平排布*******/

/*******内容垂直排布*******/
.vertiT { vertical-align:top; }
.vertiM { vertical-align:middle; }
.vertiB { vertical-align:bottom; }
/*******内容垂直排布*******/

/****特殊样式*****/
.noBorder { border:none; border:none!important; }
.noBorderL { border-left:none; border-left:none!important; }
.noBorderR { border-right:none; border-right:none!important; }
.noBorderT { border-top:none; border-top:none!important; }
.noBorderB { border-bottom:none; border-bottom:none!important; }
.noMargin { margin:0; margin:0!important; }
.noMarginL { margin-left:0; margin-left:0!important; }
.noMarginR { margin-right:0; margin-right:0!important; }
.noMarginT { margin-top:0; margin-top:0!important; }
.noMarginB { margin-bottom:0; margin-bottom:0!important; }
.noPadding { padding:0; padding:0!important; }
.noPaddingL { padding-left:0; padding-left:0!important; }
.noPaddingR { padding-right:0; padding-right:0!important; }
.noPaddingT { padding-top:0; padding-top:0!important; }
.noPaddingB { padding-bottom:0; padding-bottom:0!important; }
.noBack { background:none; background:none!important; }

.marginT10 { margin-top:10px; }
.marginT20 { margin-top:20px; }
.marginT30 { margin-top:30px; }
.marginT40 { margin-top:40px; }
.marginT50 { margin-top:50px; }

.marginB10 { margin-bottom:10px; }
.marginB20 { margin-bottom:20px; }
.marginB30 { margin-bottom:30px; }
.marginB40 { margin-bottom:40px; }
.marginB50 { margin-bottom:50px; }

.marginL10 { margin-left:10px; }
.marginL20 { margin-left:20px; }
.marginL30 { margin-left:30px; }
.marginL40 { margin-left:40px; }
.marginL50 { margin-left:50px; }

.marginR10 { margin-right:10px; }
.marginR20 { margin-right:20px; }
.marginR30 { margin-right:30px; }
.marginR40 { margin-right:40px; }
.marginR50 { margin-right:50px; }

.paddingT10 { padding-top:10px; }
.paddingT20 { padding-top:20px; }
.paddingT30 { padding-top:30px; }
.paddingT40 { padding-top:40px; }
.paddingT50 { padding-top:50px; }

.paddingB10 { padding-bottom:10px; }
.paddingB20 { padding-bottom:20px; }
.paddingB30 { padding-bottom:30px; }
.paddingB40 { padding-bottom:40px; }
.paddingB50 { padding-bottom:50px; }

.paddingL10 { padding-left:10px; }
.paddingL20 { padding-left:20px; }
.paddingL30 { padding-left:30px; }
.paddingL40 { padding-left:40px; }
.paddingL50 { padding-left:50px; }

.paddingR10 { padding-right:10px; }
.paddingR20 { padding-right:20px; }
.paddingR30 { padding-right:30px; }
.paddingR40 { padding-right:40px; }
.paddingR50 { padding-right:50px; }
/****特殊样式*****/

/* -- 购物车外部框架 -- */
.cart_header , .cart_content , .cart_footer { width:760px; margin:0 auto;}
/* -- 购物车外部框架 -- */

/* -- 页面整体布局 -- */
.left { width:201px; float:left; overflow:hidden;}
.left2 { width:670px; float:left; overflow:hidden;}
.left3 { width:754px; float:left; overflow:hidden; color:#666;}
.lefttop { background:url(Img/left_top_img.gif) no-repeat; height:3px; font-size:0; overflow:hidden;}
.left2top { background:url(Img/left2_top_img.gif) no-repeat; height:3px; font-size:0; overflow:hidden;}
.leftbot { background:url(Img/left_bot_img.gif) no-repeat; height:3px; font-size:0; overflow:hidden;  margin-bottom:10px;}
.left2bot { background:url(Img/right_bot2_img.gif) no-repeat; height:3px; font-size:0; overflow:hidden; margin-bottom:10px; }

.right { width:754px; float:left; display:inline; margin-left:5px; overflow:hidden;}
.right2 { width:275px;  float:right; overflow:hidden;}
.right3 { width:201px; float:right; overflow:hidden; color:#666;}
.righttop { background:url(Img/right_top_img.gif) no-repeat; height:3px; font-size:0; overflow:hidden;}
.right2top { background:url(Img/right2_top_img.gif) no-repeat; height:3px; font-size:0; overflow:hidden;}
.rightbot { background:url(Img/right_bot_img.gif) no-repeat; height:3px; font-size:0; overflow:hidden; margin-bottom:10px;}
.right2bot { background:url(Img/left_bot2_img.gif) no-repeat; height:3px; font-size:0; overflow:hidden; margin-bottom:10px;}

.right_main { width:752px; min-height:458px; border:solid 1px #d5d5d5; border-top:0; border-bottom:0; padding-bottom:15px; overflow:hidden;}
.right2_main { width:273px; border:solid 1px #d5d5d5; border-top:0; border-bottom:0; padding-bottom:15px; overflow:hidden;}
.left2_main { width:668px;  border:solid 1px #d5d5d5; border-top:0; border-bottom:0; padding-bottom:15px; overflow:hidden;}
/* -- 页面整体布局 -- */

/*footer*/
.footnav{ height:25px; text-align:center; color:#fff; background: url(Img/Common/footnav.gif) repeat-x; line-height:25px; border:1px solid #ccc;}
.footnav a{ padding:0 10px; color:#666;}
.footer p{ text-align:center; line-height:24px;}
.footer{ position:relative;}
.foot1{ position:absolute; top:75px; left:205px;}
.foot2{ position:absolute; top:85px; left:735px;}
/*footer*/





.btn-container {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
}
.btn-container input[type='button'] {
  width: 20%;
  padding: 0.357rem;
  color: #fff;
  border-radius: 3px;
  -webkit-radius: 3px;
  -moz-radius: 3px;
  background-color: #3B9DFF;
}
.btn-container input[type='button']:active {
  background-color: #1966b3;
}
/*重置盒模型 */
.boxContent * {
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
}
/*animation start*/
#animationTipBox {
  width: 180px;
  height: auto;
  background-color: #fff;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -90px;
  margin-top: -75px;
  z-index: 1112;
  -webkit-animation: alertAnimation 0.3s ease-in-out 0s 1;
  -moz-animation: alertAnimation 0.3s ease-in-out 0s 1;
  animation: alertAnimation 0.3s ease-in-out 0s 1;
}
#animationTipBox * {
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
}
#animationTipBox .icon {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border: 4px solid #66cc33;
  margin: 10px auto 5px auto;
}
#animationTipBox .icon_box {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
#animationTipBox .lose .icon {
  border-color: #FF9090;
}
#animationTipBox .lose .icon_box {
  -webkit-animation: lose_Animation 0.5s ease 0s 1;
  -moz-animation: lose_Animation 0.5s ease 0s 1;
  animation: lose_Animation 0.5s ease 0s 1;
}
#animationTipBox .dec_txt {
  font-size: 14px;
  text-align: center;
  color: #666;
  line-height: 22px;  
  margin-bottom:10px;
}
.tip .icon {
  width: 80px;
  height: 80px;
  background-color: #66cc33;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  color: #fff;
  font-size: 80px;
  text-align: center;
  line-height: 80px;
}
.success .line_short {
  width: 25px;
  height: 5px;
  position: absolute;
  left: 14px;
  top: 46px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background-color: #66cc33;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-animation: success_short_Animation 0.65s ease 0s 1;
  -moz-animation: success_short_Animation 0.65s ease 0s 1;
  animation: success_short_Animation 0.65s ease 0s 1;
}
.success .line_long {
  width: 47px;
  height: 5px;
  position: absolute;
  right: 8px;
  top: 38px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background-color: #66cc33;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-animation: success_long_Animation 0.65s ease 0s 1;
  -moz-animation: success_long_Animation 0.65s ease 0s 1;
  animation: success_long_Animation 0.65s ease 0s 1;
}
.lose .line_left,
.lose .line_right {
  width: 47px;
  height: 5px;
  position: absolute;
  left: 17px;
  top: 37px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background-color: #FF9090;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}
.lose .line_right {
  right: 11px;
  top: 37px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}
/* 总体动画  函数 */
/*all animate*/
@-webkit-keyframes alertAnimation {
  0% {
    -webkit-transform: scale(0.5);
  }
  45% {
    -webkit-transform: scale(1.25);
  }
  80% {
    -webkit-transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes alertAnimation {
  0% {
    -webkit-transform: scale(0.5);
  }
  45% {
    -webkit-transform: scale(1.25);
  }
  80% {
    -webkit-transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes alertAnimation {
  0% {
    -webkit-transform: scale(0.5);
  }
  45% {
    -webkit-transform: scale(1.25);
  }
  80% {
    -webkit-transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
/*all animate*/
/*success short animate*/
@-webkit-keyframes success_short_Animation {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -4px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@-moz-keyframes success_short_Animation {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -4px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@-webkit-keyframes success_short_Animation {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -4px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
/*success short animate*/
/*success long animate*/
@-webkit-keyframes success_long_Animation {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@-moz-keyframes success_long_Animation {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@-webkit-keyframes success_long_Animation {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
/*success long animate*/
/*load_Animation*/
@-webkit-keyframes load_Animation {
  0% {
    -webkit-transform: scale(0.6);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: scale(0.6);
    opacity: 0.5;
  }
  80% {
    -webkit-transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1.0;
  }
}
@-moz-keyframes load_Animation {
  0% {
    -webkit-transform: scale(0.6);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: scale(0.6);
    opacity: 0.5;
  }
  80% {
    -webkit-transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1.0;
  }
}
@-webkit-keyframes load_Animation {
  0% {
    -webkit-transform: scale(0.6);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: scale(0.6);
    opacity: 0.5;
  }
  80% {
    -webkit-transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1.0;
  }
}
/*load_Animation*/
/*lose_Animation*/
@-webkit-keyframes lose_Animation {
  0% {
    -webkit-transform: scale(0.6);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: scale(0.6);
    opacity: 0.5;
  }
  80% {
    -webkit-transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1.0;
  }
}
@-moz-keyframes lose_Animation {
  0% {
    -webkit-transform: scale(0.6);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: scale(0.6);
    opacity: 0.5;
  }
  80% {
    -webkit-transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1.0;
  }
}
@-webkit-keyframes lose_Animation {
  0% {
    -webkit-transform: scale(0.6);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: scale(0.6);
    opacity: 0.5;
  }
  80% {
    -webkit-transform: scale(1.15);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1.0;
  }
}
/*lose_Animation*/
.load {
  position: relative;
  width: 60px;
  height: 80px;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border: 4px solid #fff;
  margin: 15px auto 5px auto;
  top: 10px;
}
.load .icon_box {
  margin: 10px auto;
  width: 60px;
  height: 60px;
}
.load .cirBox1,
.load .cirBox2,
.load .cirBox3 {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
}
.load .cirBox1 > div,
.load .cirBox2 > div,
.load .cirBox3 > div {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  background-color: #ccc;
  position: absolute;
}
.load .cirBox1 {
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
}
.load .cirBox2 {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
}
.load .cirBox3 {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}
.load .cir1 {
  left: 0;
  top: 0;
}
.load .cir2 {
  right: 0;
  top: 0;
}
.load .cir3 {
  right: 0;
  bottom: 0;
}
.load .cir4 {
  left: 0;
  bottom: 0;
}
.load .cir1,
.load .cir2,
.load .cir3,
.load .cir4 {
  -webkit-animation: cir_Animation 1.2s ease 0s infinite;
  -moz-animation: cir_Animation 1.2s ease 0s infinite;
  animation: cir_Animation 1.2s ease 0s infinite;
}
.cirBox1 .cir2 {
  -webkit-animation-delay: -1.1s;
  -moz-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.cirBox1 .cir3 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.cirBox1 .cir4 {
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.cirBox2 .cir2 {
  -webkit-animation-delay: -1s;
  -moz-animation-delay: -1s;
  animation-delay: -1s;
}
.cirBox2 .cir3 {
  -webkit-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.cirBox2 .cir4 {
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.cirBox3 .cir2 {
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.cirBox3 .cir3 {
  -webkit-animation-delay: -0.6s;
  -moz-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.cirBox3 .cir4 {
  -webkit-animation-delay: -0.3s;
  -moz-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
@-webkit-keyframes cir_Animation {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0.4);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cir_Animation {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0.4);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes cir_Animation {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0.4);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
.mask {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .8;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1111;
}