/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #666666;
    font-size: 12px;
    line-height: 1.4;
    /*font-family: PingFangSC-Regular,Helvetica,"Droid Sans",Arial,sans-serif;*/
    font-family: "微软雅黑",Helvetica,"Droid Sans",Arial,sans-serif;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* ==========================================================================
   Helper classes
   ========================================================================== */
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ul, ol, dl{list-style: none;}
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
input,select,button{ -webkit-appearance:none; border:none;outline:none;}
div, li, span, i, a{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webview-tap-highlight-color:rgba(0,0,0,0);
    -moz-tap-highlight-color:rgba(0,0,0,0);
    -trident-tap-highlight-color:rgba(0,0,0,0);
    -chromium-tap-highlight-color:rgba(0,0,0,0);
        tap-highlight-color:rgba(0,0,0,0);
}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
a, a:hover{
    color: #666666;
    text-decoration: none;
}

i.icon{
    display: inline-block;
}
.one-line-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.two-line-ellipsis{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.three-line-ellipsis{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.fl{float: left; }
.fr{float: right; }
.mgt0{margin-top: 0 !important;}
.mgb0{margin-bottom: 0 !important;}
.mgb6{margin-bottom: 6px !important;}
.mgb10{margin-bottom: 10px !important;}
.mgb16{margin-bottom: 16px !important;}
.mgb115{margin-bottom: 115px !important;}
.bt0{border-top: 0 !important;}
.bb0{border-bottom: 0 !important;}
.bt1{border-top: 1px solid #e6e6e6!important;}
.bb1{border-bottom: 1px solid #e6e6e6!important;}
.pt0{padding-top: 0 !important; }
.pt2{padding-top: 2px !important;}
.pt6{padding-top: 6px !important;}
.pt8{padding-top: 8px !important;}
.pt13{padding-top: 13px !important;}
.pt40{padding-top: 40px !important;}
.pb0{padding-bottom: 0 !important;}
.pb6{padding-bottom: 6px !important;}
.pb10{padding-bottom: 10px !important;}
.pb12{padding-bottom: 12px !important;}
.pb14{padding-bottom: 14px !important;}
.pb25{padding-bottom: 25px !important;}

.pt-pb14{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.clear-both{clear: both;}

.bg-white{background-color: #fff !important;}
.bg-transparent{background-color: transparent !important;}

.text-gray{color: #666 !important;}
.text-red{color: #fc2500 !important;}
/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


header{
    position: relative;
    width: 100%;
    height: 55px;
    background-color: #0a429b;
    color: #fff;
    text-align: center;
    line-height: 55px;
    
    padding-left: 50px;
    padding-right: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   /* background: url(../images/headerbg.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;*/
}
header .icon{
    width: 40px;
    height: 40px;
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
}
header .icon.go-back{
        background: url(../images/go-back.png) no-repeat center center;
    left: 4px;
    top: 8px;
        background-size: 22px 20px;
}
header .icon.main-menu{
        background: url(../images/main-menu.png) no-repeat center center;
    right: 4px;
    top: 8px;
    background-size: 26px 6px;
}
header h2{
    font-size: 16px;
}
.header-menus {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #092f6c;
    z-index: 10001;
    font-size: 13px;
        height: 54px;
    overflow: hidden;
    display: none;
}
.header-menus.show{
  display: block;
}
.header-menus a{
      color: #fff;
    float: left;
    width: 25%;
    text-align: center;
        padding-top: 4px;
    line-height: normal;
}
.header-menus a:nth-of-type(1),.header-menus a:nth-of-type(2){
  width: 23%;
}
.header-menus a:nth-of-type(3),.header-menus a:nth-of-type(4){
  width: 27%;
}
.header-menus a span{
  display: block;
}
.header-menus .icon{
  width: 25px;
  height: 24px;
      position: static;
}
.header-menus .icon.home{
  background: url(../images/home.png) no-repeat center center;
  -webkit-background-size: 23px 16px;
  background-size: 23px 16px;
}
.header-menus .icon.search02{
  background: url(../images/search02.png) no-repeat center center;
  -webkit-background-size: 20px;
  background-size: 20px;
}
.header-menus .icon.cart02{
  background: url(../images/cart02.png) no-repeat center center;
  -webkit-background-size: 23px 18px;
  background-size: 23px 18px;
}
.header-menus .icon.user02{
  background: url(../images/user02.png) no-repeat center center;
  -webkit-background-size: 18px 20px;
  background-size: 18px 20px;
}
/*header .icon{
    position: absolute;
    width: 24px;
    height: 24px;
    background: url(../images/icons01.png) no-repeat;
}

header .icon.go-back{
    background-position: 0 0;

}*/

/*
footer{
    background-color: #47586c;
    font-size: 14px;
    color: #fff;
}
footer img{
    display: block;
    width: 100%;
}
footer a.btn{
        display: block;
    float: left;
    width: 28%;
    margin-top: 14px;
    margin-left: 3%;
    color: #fff;
    text-align: center;
    border: 1px solid #3b4e65;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 6px;
    box-sizing: border-box;
}
footer a.btn:last-child{
    width: 32%;
}
footer a.btn .icon{
    width: 21px;
    height: 19px;
        vertical-align: top;
    padding-right: 16px;
        margin-left: -16px;
}
footer a.after-login {
    color: #fff;
    float: left;
    margin-top: 14px;
    padding-top: 8px;
    font-size: 12px;
    padding-left: 3%;
    box-sizing: border-box;
    width: 31%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
footer a.btn .icon.login{
    background: url(../images/footer-1.png) no-repeat center center;
    -webkit-background-size: contain;
    background-size: contain;
}
footer a.btn .icon.logout{
    background: url(../images/logout.png) no-repeat center center;
    -webkit-background-size: contain;
    background-size: contain;
}
footer a.btn .icon.register{
    background: url(../images/footer-2.png) no-repeat center center;
    -webkit-background-size: contain;
    background-size: contain;
}
footer a.btn .icon.feedback{
    background: url(../images/footer-3.png) no-repeat center center;
    -webkit-background-size: contain;
    background-size: contain;
}
footer .tel{
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
}
footer .service-line{
       width: 22px;
    height: 21px;
    background: url(../images/footer-4.png) no-repeat center center;
    background-size: contain;
    padding-right: 24px;
    vertical-align: top;

}
footer .copyright{
    padding-bottom: 20px;
    text-align: center;
}
footer .copyright a{
    color: #fff;
    padding: 0 6px;
}
footer .copyright a:nth-of-type(2){
    color: #8ea4bc;
}
*/
footer { padding-bottom:12px; background-image:url(../images/hdbg.jpg);  background-size:100% auto;   }
.foot_nav { padding-top:24px; height:29px; text-align:center;}
.foot_nav a { display:inline-block; height:28px; line-height:28px; margin-left:12px; margin-right:12px; padding-left:15px; padding-right:15px; border:solid 1px #fff; color:#fff; font-size:12px; background-color:rgba(255,255,255,0.1);border-radius: 2px;}
.part { text-align:center; margin-top:28px;}
.copyright { text-align:center; font-size:11px; color:#fff; margin-top:18px;}
.copyright p { display:block;text-align:center; }

footer.fix-bottom{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}
footer.fixed-bottom{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
}


.main-content{
    background-color: #f4f4f4;
}

.black-text{color: #333 !important; }
.grey-text{color: #b0b0b0 !important; }
.red-text{color: #e0422b !important; }
.red-text2{color: #fe5157 !important; }
.box-relative{position: relative;}
.fix-bottom{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}




.section{
  margin-top: 10px;
  padding-left: 14px;
  padding-right: 14px;
  background-color: #fff;
}

.section h2.title{
  position: relative;
  font-size: 14px;
  line-height: 40px;
  border-bottom: 1px solid #ececec;
      margin-bottom: 6px;
}
.section h2 span.blue-line{
  display: inline-block;
  width: 3px;
  height: 16px;
  background-color: #0b429c;
  position: absolute;
      left: -14px;
    top: 12px;
}





/***************** 弹窗 **************/
.popup-box{
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.6);
}

.popup-box .close{
  width: 30px;
  height: 30px;
  position: absolute;
      right: 2px;
    top: 2px;
    background: url(../images/close01.png) no-repeat center center;
    background-size: 60%;
}

.popup-content{
  position: absolute;
  width: 84%;
  left: 8%;
  top: 20%;
  background-color: #fff;
  padding: 0 30px 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 6px;
}

.popup-content h3{
  font-size: 14px;
  padding-top: 22px;
  padding-bottom: 10px;
  text-align: center;
}

.popup-content .text-area{
  max-height: 240px;
    overflow-y: scroll;
}

.popup-content .text-area p.title{
  font-size: 14px;
}
.popup-content .text-area p{
  line-height: 22px;
  padding-bottom: 16px;
}

.popup-content > a{
  display: block;
  width: 250;
  height: 44px;
  background-color: #fe5157;
  font-size: 13px;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 44px;
  margin-top: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.popup-content > a.cancel{
  background-color: #fff;
  color: #666;
  border: 1px solid #d9d9d9;
}

/***************** 底部按钮 **************/
.btn-big{
  padding: 15px;
}
.btn-big a{
  height: 45px;
  line-height: 45px;
  background-color: #fe5157;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  display: block;
}

/************** 商品画廊 *************/
.goods-gallery{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
}
.goods-gallery > div{
    overflow: hidden;
    margin-bottom: 10px;
    display: -webkit-box; 
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-box-pack: justify;
-webkit-justify-content: space-between;

    justify-content: space-between;
    /*    align-items: stretch;*/
    -ms-align-items: stretch;
    align-items: stretch;
}

.goods-gallery > div > div{
        width: 48.6%;
    border: 1px solid #ececec;
    padding-bottom: 32px;
    position: relative;
}

.goods-gallery .goods-item-pic img{
    display: block;
    width: 100%;
}

.goods-gallery > div > div h3{
    font-size: 15px;
    padding: 4px 8px 4px 8px;
}

.goods-gallery > div > div p{
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
}

.goods-gallery > div .goods-item-price{
    position: absolute;
    left: 8px;
    bottom: 4px;
}

.goods-gallery > div .goods-item-price strong{
    font-size: 16px;
    color: #DD2607;
    padding-left: 2px;
    font-weight: 300;
}

/*********** 搜索框 ***********/
.search-box{
    padding: 14px 14px 16px 14px;
    position: relative;
}

.search-box input{
    display: block;
    width: 100%;
    line-height: 40px;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    background-color: #fff;
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.icon.search{
  width: 40px;
  height: 40px;
  position: absolute;
  right: 12px;
    top: 14px;
  background: url(../images/search.png) center center no-repeat;
  -webkit-background-size: 22px;
  background-size: 22px;
}

/*********** tip box ***********/
.tip-box{
    background-color: transparent !important;
    text-align: center;
    position: absolute !important;
    top: 38%;
    width: 100%;
    padding: 0 !important;
    left: 0;
}
.tip-box.tip-box02{
   text-align: left;
}
.tip-box.tip-box02 .icon.tip{
      position: absolute;
    left: 21%;
    top: -4px;
}
.tip-box.tip-box02 p,.tip-box.tip-box02 h3{ 
    padding-left: 31%;
    line-height: 18px;
}
.tip-box.tip-box02 h3{
  position: relative;
      line-height: 26px;
}
.tip-box.tip-box-fix{
    top: 0;
    background-color: #f4f4f4 !important;
    margin-top: 0;
    padding-top: 36% !important;
}
.tip-box .icon.tip{
  width: 30px;
  height: 27px;
  background: url(../images/tip.png) no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}
.tip-box h3{
  font-size: 15px;
  color: #ff7500;
  line-height: 28px;
    font-weight: bold;
}
.tip-box p{
  font-size: 12px;
  color: #4a638c;
}

/*********** 404页面 ***********/
/*.error-page{position: relative;}*/
.error-page .error-tip{
  text-align: center;
  padding-top: 24%;
}
.error-page .error-tip img{
  width: 80px;
}
.error-page .error-tip p{
  font-size: 15px;
  color: #ff7500;
  padding-top: 22px;
}
.error-page .go-where{
      padding-top: 18%;
    /*position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;*/
}
.error-page .go-where p{
  padding-left: 15px;
    line-height: 18px;
    color: #464646;
}

.error-page .go-where .btn-big a{font-size: 15px;}
.error-page .go-where > div{
  padding-bottom: 0;
}
.error-page .go-where > div:last-child{
  padding-bottom: 26px;
}
.error-page.jsz .error-tip {
      padding-top: 20%;
}
.error-page.jsz .error-tip img{
      width: 58%;
}
.error-page.jsz .error-tip h3{
  color: #002368;
    font-size: 22px;
    font-family: Helvetica,"Droid Sans",Arial,sans-serif,fantasy;
    font-weight: bold;
}

.error-page.jsz .error-tip p{
  padding-top: 0px;
}
.error-page.jsz .go-where {
    padding-top: 24%;
}