/* @font-face */
@font-face {
    font-family: 'iconfont';  /* project id 279958 */
    src: url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot') format('embedded-opentype'),
    url('../fonts/iconfont.woff') format('woff'),
    url('../fonts/iconfont.ttf') format('truetype'),
    url('../fonts/iconfont.svg#iconfont') format('svg');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:14px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

@font-face {
    font-family: 'ds-digital';
    src: url('../fonts/ds-digi-webfont.eot');
    src: url('../fonts/ds-digi-webfont.eot') format('embedded-opentype'),
    url('../fonts/ds-digi-webfont.woff2') format('woff2'),
    url('../fonts/ds-digi-webfont.woff') format('woff'),
    url('../fonts/ds-digi-webfont.ttf') format('truetype'),
    url('../fonts/ds-digi-webfont.svg#ds-digitalnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avantgarde book';
    src: url('../fonts/itc_avant_garde_ce_gothic_book-webfont.eot');
    src: url('../fonts/itc_avant_garde_ce_gothic_book-webfont.eot') format('embedded-opentype'),
    url('../fonts/itc_avant_garde_ce_gothic_book-webfont.woff2') format('woff2'),
    url('../fonts/itc_avant_garde_ce_gothic_book-webfont.woff') format('woff'),
    url('../fonts/itc_avant_garde_ce_gothic_book-webfont.ttf') format('truetype'),
    url('../fonts/itc_avant_garde_ce_gothic_book-webfont.svg#avantgarde_ceregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avantgarde demi';
    src: url('../fonts/itc_avant_garde_ce_gothic_demi-webfont.eot');
    src: url('../fonts/itc_avant_garde_ce_gothic_demi-webfont.eot') format('embedded-opentype'),
    url('../fonts/itc_avant_garde_ce_gothic_demi-webfont.woff2') format('woff2'),
    url('../fonts/itc_avant_garde_ce_gothic_demi-webfont.woff') format('woff'),
    url('../fonts/itc_avant_garde_ce_gothic_demi-webfont.ttf') format('truetype'),
    url('../fonts/itc_avant_garde_ce_gothic_demi-webfont.svg#avantgarde_cebold') format('svg');
    font-weight: normal;
    font-style: normal;
}


body .layui-layer{
    border-radius: 8px;
    overflow: hidden;
}

html{
    /*font: 14px/1.5 Gautami,Arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;*/
}

.imgloader{
    box-sizing: border-box;
    height: 0;
    padding-top: 0;
    font-size: 12px;
    text-align: center;
    background: url(../images/imgloader.gif) center 10px no-repeat;
    overflow: hidden;
    transition: all 0.3s;
}

.imgloader-active{
    height: 78px;
    padding-top: 60px;
}

.fixed2top{
    position: fixed !important;
    top: 0;
    left: 0;
}

.sharebar{
    height: 16px;
    margin-top: 50px;
    margin-bottom: 100px;
}

.sharebar .share-icon{
    float: left;
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}


.hovercolour {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.4s;
}


.hovercolour:hover{
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
}

.pay-method h3{
    font-weight: bold;
    color: #000;
}

.pay-method .pay-btn{
    display: inline-block;
    box-sizing: border-box;
    width: 200px;
    height: 50px;
    margin-right: 40px;
    border: 1px solid #dcdcdc;
    text-align: center;
    line-height: 50px;
    color: #333;
    font-size: 12px;
    background-color: #fff;
    vertical-align: middle;
    transition: border 0.5s;
}

.pay-method .pay-btn:last-child{
    margin-right: 0;
}

.pay-method .pay-btn-active,
.pay-method .pay-btn:hover{
    border-color: #000;
}

.pay-btn-icon{
    display: inline-block;
    width: 35px;
    height: 100%;
    margin-right: 4px;
    vertical-align: middle;
    background: center center no-repeat;
}

#payByWechat .pay-btn-icon{
    background-image: url("../images/paybywechat_icon.png");
}

#payByAlipay .pay-btn-icon{
    background-image: url("../images/paybyzfb_icon.png");
}

.date-pickerbox{
    text-align: right;
    white-space: nowrap;
}

.date-pickerbox input{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-left: 8px;
    padding-right: 25px;
    border: 1px solid #dcdcdc;
    text-align: left;
    background: url("../images/datepicker_icon.png") 77px center/auto 75% no-repeat;
}

.date-pickerbox .date-picker-start,
.date-pickerbox .date-picker-line,
.date-pickerbox .date-picker-end,
.date-pickerbox .date-picker-ok{
    display: inline-block;
    font-size: 12px;
    text-align: left;
}

.date-pickerbox .date-picker-start,
.date-pickerbox .date-picker-end{
    width: 100px;
    height: 25px;
}

.date-pickerbox .date-picker-ok a{
    display: inline-block;
    width: 50px;
    height: 25px;
    margin-left: 25px;
    border-radius: 4px;
    line-height: 25px;
    color: #fff;
    background-color: #000;
    text-align: center;
    font-size: 12px;
}

.date-pickerbox .date-picker-line{
    margin: 0 8px;
    color: #bfbfbf;
}

/* clearfix */
.topbar-icons ul:after,
.footer:after,
.footer-icons ul:after,
.footer-right-content:after,
.newall .grid .grid-style2 a:after,
.salespromotion .grid .grid-item > a:after,
.traveldetails .comment-list li:after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.footer .footer-logo{
    color: rgba(255,255,255,0.7);
}
.footer-left .aboutus-description p{
    color:rgba(255,255,255,0.7);
}
.footer .footer-logo a{
    display: inline;
    line-height: 50px;
    margin: 10px;
    color: #eee;
    font-weight: 500;
    font-size: 18px;
}

.grid-item{
    /*transition: all 0.4s;*/
}


/* min width 1200px */
.topbar,
.all-wrapper,
.footer{
    /* min-width: 1200px; */
}

.footer ul{
    padding:0 !important;
}

/* common */
.fixed2top{
    position: fixed;
    top: 0;
    left: 0;
}

.mgb50{
    margin-bottom: 50px;
}

.textcenter{
    text-align: center;
}



/* topbar */
.topbar{
    /*position: absolute;*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    padding: 0 40px;
    background-color: transparent;
    /*box-shadow: 0 0 20px rgba(0,0,0,.3);*/
}

.topbar.shadow{
    box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.topbar-logo{
    float: left;
    height: 37px;
    margin: 30px 0;
}

.topbar-logo a{
    display: block;
    width: 168px;
    height: 67px;
    background: url("../images/navbar_logo_black.png") left center no-repeat;
    background-size:74%;
    background-position-x: -14px;
    overflow: hidden;
}

.topbar.icon-white .topbar-logo a{
    background-image: url("../images/navbar_logo_white.png");
}

.topbar-logo a h1{
    width: 100%;
    height: 100%;
    margin-top: 40px;
    text-indent: 1000px;
    overflow: hidden;
}

.topbar-icons{
    float: right;
    margin: 40px 0;
}

.topbar-icons .topbar-icon{
    position: relative;
    float: left;
    margin-right: 20px;
}

.topbar-icons li:last-child,
.footer-icons li:last-child{
    margin-right: 0;
}

.topbar-icons .topbar-icon a{
    display: block;
    width: 20px;
    height: 20px;
    background-position: center center;
    background-repeat: no-repeat;
}

.topbar-icons .topbar-icon-search a{
    background-image: url("../images/icon_search_black.png");
}

.topbar-icons .topbar-icon-user a{
    background-image: url("../images/icon_user_black.png");
}

.topbar-icons .topbar-icon-search a{
    background-image: url("../images/icon_search_black.png");
}

.topbar-icons .topbar-icon-mune a{
    background-image: url("../images/icon_shop_black.png");
}


.topbar .topbar-icons .topbar-icon-userout a{
    background-image: url("../images/icon_out_black.png");
}

.topbar-icons .topbar-icon-shopcar a{
    background-image: url("../images/icon_shopcar_black.png");
}

.topbar.icon-white .topbar-icons .topbar-icon-search a{
    background-image: url("../images/icon_search_white.png");
}

.topbar.icon-white .topbar-icons .topbar-icon-user a{
    background-image: url("../images/icon_user_white.png");
}

.topbar.icon-white .topbar-icons .topbar-icon-userout a{
    background-image: url("../images/icon_out_white.png");
}

.topbar.icon-white .topbar-icons .topbar-icon-mune a{
    background-image: url("../images/icon_shop_white.png");
}




.topbar.icon-white .topbar-icons .topbar-icon-shopcar a{
    background-image: url("../images/icon_shopcar_white.png");
}


#searchBtn{
    position: relative;
    z-index: 100;
}

.topbar-icon-search.focus #searchInput{
    width: 280px;
    padding-right: 20px;
}

#searchInput{
    position: absolute;
    bottom: -5px;
    right: 0;
    box-sizing: border-box;
    width: 0px;
    height: 28px;
    border: 0;
    padding-right: 0;
    border-bottom: 1px solid #000;
    font-size: 12px;
    color: #666;
    background-color: transparent;
    transition: width 0.4s;
}

.topbar.icon-white #searchInput{
    color: #fff;
    border-bottom-color: #fff;
}

/* all-wrapper */
.all-wrapper{
    margin-top: 100px;
}

.all-wrapper:after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}


/* sideleft */
.sideleft{
    /*float: left;*/
    position: fixed;
    top: 115px;
    left: 0;
    bottom: 0;
    z-index: 999;
    box-sizing: border-box;
    width: 236px;
    height: 100%;
    padding-left: 40px;
    background-color: transparent;
}

.navmenu{
    font-size: 0;
}

.navmenu li{
    margin: 4px 0;
}
ul li a{
    text-transform: uppercase !important;
}

.navmenu a{
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.navmenu a span{
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-transform: uppercase;
}

.navmenu.color-white li a,
.navmenu.color-white .level1 > li a,
.navmenu.color-white .level2 li a{
    color: #fff;
}

.navmenu .level1 > li{
    margin-top: 0;
    margin-bottom: 15px;
}

.navmenu .level1 > li .category_color{
    color: #fff;
    background-color: #000;
}

.navmenu.color-white .level1 > li:last-child > a{
    color: #000;
    background-color: #fff;
}

.navmenu .level1 > li a{
    height: 22px;
    font-size: 14px;
    color: #000;
}
/* //中英文切换 */

.navmenu .level1 a:hover .en,
.navmenu .level1 a:hover .cn{
    color:#ccc;
    /* -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%); */
}

.navmenu .level2{
    padding-bottom: 5px;
}

.navmenu .level2 li a{
    font-size: 12px;
    color: #aaa;
}

.navmenu .level2 li.open > a{
    color: #000;
}

.navmenu .level2 li a:hover{
    color: #444;
}

.navmenu.color-white li a:hover{
    color: #fff;
}


/* sideright */
.sideright{
    /*float: right;*/
    position: fixed;
    top: 100px;
    right: 0;
    bottom: 0;
    z-index: -1;
    box-sizing: border-box;
    width: 236px;
    height: 100%;
    /*background-color: #fff;*/
    /*padding-right: 40px;*/
}

.rightbar{

}

.servicebar{
    position: fixed;
    bottom: 80px;
    right: 0;
    z-index: 10010;
    width: 55px;
}

.counsel-wrapper{
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 100%;
    /*height: 224px;*/
}

.counsel-btns{
    position: absolute;
    bottom: 60px;
    width: 100%;
}

.counsel-btn{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    display: block;
    width: 100%;
    height: 52px;
    background-color: #aaa;
    background-position: center center;
    background-repeat: no-repeat;
    transition: bottom 0.4s, background 0.4s;
    -ms-transition: bottom 0.4s, background 0.4s;
}

.counsel-btn a{
    display: block;
    width: 100%;
    height: 100%;
}

.counsel-tel{
    display: block;
    bottom:60px;
    background-image: url("../images/fb.jpg");
    background-size:100%;
}

.counsel-qq{
    background-image: url("../images/ins-icon.jpg");
    background-size:100%;
}

.counsel-wechat{
    background-image: url("../images/rightbar_icon_wechat.png");
}

.counsel-shopcar{
    background-image: url("../images/rightbar_icon_shopcar.png");
}

.counsel-service{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    height: 52px;
    background: url("../images/whatapp.jpg") #ddd center center no-repeat;
    transition: background 0.4s;
    background-size:100%;
    -ms-transition: background 0.4s;
}

.counsel-btn:hover{
    background-color: #d9d9d9;
}
/*
.counsel-wrapper.out{
    height: 224px;
}

.counsel-wrapper.out .counsel-service{
    background-color: #7f7f7f;
}

.counsel-wrapper.out .counsel-tel{
    bottom: 182px;
}

.counsel-wrapper.out .counsel-qq{
    bottom: 98px;
}

.counsel-wrapper.out .counsel-wechat{
    bottom: 96px;
}

.counsel-wrapper.out .counsel-shopcar{
    bottom: 53px;
}
*/
#backtotop{
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 52px;
    background: url("../images/rightbar_icon_arrowup.png") #ddd center center no-repeat;
    transition: background 0.4s;
    -ms-transition: background 0.4s;
}

#backtotop:hover{
    background-color: #7f7f7f;
}


.servicebar-qrcode{
    position: absolute;
    top: 50%;
    left: -105px;
    margin-top: -61px;
    padding: 10px;
    border: 1px solid #dddddd;
    background-color: #fff;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
}

.servicebar-qrcode:before,
.servicebar-qrcode:after{
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    display: block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;

}

.servicebar-qrcode:before{
    border-left: 6px solid #ddd;
    margin-top: -6px;
}

.servicebar-qrcode:after{
    right: -4px;
    z-index: 10;
    margin-top: -6px;
    border-left: 6px solid #fff;
}

.counsel-wechat:hover .servicebar-qrcode{
    -ms-transform: scale(1);
    transform: scale(1);
}

.servicebar-qrcode .qrcodetxt{
    text-align: center;
}

.footer .servicebar-qrcode{
    top: -85px;
    left: -34px;
    -ms-transform: scale(0);
    transform: scale(0);
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}

.footer .servicebar-qrcode:before,
.footer .servicebar-qrcode:after{
    top: auto;
    bottom: -6px;
    right: 50%;
    margin-right: -6px;
    border-bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ddd;
}

.footer .servicebar-qrcode:after{
    bottom: -4px;
    z-index: 10;
    margin-right: -6px;
    border-top-color: #fff;
}

.footer .servicebar-qrcode img{
    display: block;
}

.footer-icons li:nth-child(2):hover .servicebar-qrcode{
    -ms-transform: scale(1);
    transform: scale(1);
}

/* footer */
.footer{
    position: relative;
    z-index: 1000;
    box-sizing: border-box;
    width: 100%;
    padding: 0 5.5%;
    background-color: #000;
    min-width:768px;
}

.footer-left,
.footer-right{
    float: left;
    box-sizing: border-box;
}

.footer-left{
    width: 45%;
}

.footer-right{
    width: 55%;
}

.footer-icons{
    margin: 50px 0 100px;
}

.footer-icons li{
    position: relative;
    float: left;
    margin-right: 30px;
}

.footer-icons li a,
.footer-icons li a img{
    display: block;
}

.footer-copyright{
    margin-bottom: 20px;
    position:absolute;
    bottom:0;
}

.footer-copyright p{
   /* font-family: "Gautami";*/
    font-size: 12px;
    color: #a3a3a3;
    margin:0;
}

.footer-right-content{
    margin-top: 55px;
    text-align: right;
    vertical-align: top;
}

.footer-contact,
.footer-help,
.footer-questions,
.footer-privacy{
    /*float: left;*/
    display: inline-block;
    margin-left: -4px;
    margin-right: 11%;
    text-align: left;
    vertical-align: top;
}

.footer-questions li:nth-child(2){
    /* display: none; */
}

.footer-privacy{
    margin-right: 0;
}

.footer-tel,
.footer-letters a{
    padding-left: 24px;
    color: #b8b8b8;
    background-position: left center;
    background-repeat: no-repeat;
}

.footer-tel{
    margin-bottom: 15px;
    background-image: url("../images/footer_icon_tel.png");
}

.footer-letters a{
    display: block;
    margin-bottom: 10px;
    background-image: url("../images/footer_icon_email.png");
}

.footer-input{
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #666;
}

.footer-input .placeholder,
.footer-input input{
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-left: 8px;
    padding-right: 22px;
    color: #adadad;
}

.footer-input input{
    border: 0;
    background-color: transparent;
}

#footerBtn{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 22px;
    height: 100%;
    border: 0;
    cursor: pointer;
    background: url("../images/footer_icon_inputarrow.png") 8px center no-repeat;
}

.footer-right-content h3{
    height: 21px;
    line-height: 23px;
    color: #b8b8b8;
    overflow: hidden;
    font-size:18px;
}

.footer-right-content h3 div{
    height: 42px;
    transition: transform 0.4s;
}

.footer-right-content h3:hover div{
    /* -ms-transform: translateY(-21px);
    transform: translateY(-21px); */
    color:#fff;
}

.footer-right-content span{
    display: block;
    height: 20px;
}

.footer-right-content ul li{
    height: 20px;
    overflow: hidden;
}

.footer-right-content ul li a{
    display: inline-block;
    height: 40px;
    line-height: 20px;
    font-size: 12px;
    color: #8d8d8d;
    -ms-transition: transform 0.4s;
    transition: transform 0.4s;
}

.footer-right-content ul li a:hover{
    /* -ms-transform: translateY(-20px);
    transform: translateY(-20px); */
    color:#fff;
}



/* footer nar */
.footernav{
    margin-bottom: 100px;
    font-size: 12px;
    color: #747474;
    text-align: left;
    line-height: 25px;
}

.footernav .footernav-title{
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    color: #000;
}

.footernav .footernav-subtitle{
    color: #555;
}

.footernav .footernav-text-item{
    margin-bottom: 25px;
}

.footer-logo img{
    width:60px;
}

/* middle-content */
.middle-content{
    /*float: left;*/
    position: relative;
    top: 0;
    left: 236px;
    /*right: 236px;*/
    width: calc(100% - 472px);
}


@media (max-width:500px){
  .footer{min-width:95%;}
  .footer-left,.footer-questions{display:none;}
  .footer-right-content{margin:55px 0 90px 0;}
  .footer-contact{float:left;}
  .footer-copyright{padding-right:20px;}
}








/* index */

.index-wrapper{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("../images/index_bg.png") #fff 0 0/cover no-repeat;
}

.index-content{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.index-logo{
    height: 23px;
    overflow: hidden;
}

.index-logo a{
    display: block;
}

.index-logo img{
    display: inline-block;
    height: 100%;
}

.index-title{
    position: relative;
    font-size: 32px;
}

.index-title .en{
    margin-right: 15px;
    font-family: "Century Gothic";
}

/*.index-title:before,*/
/*.index-title:after{*/
    /*position: absolute;*/
    /*top: 0;*/
    /*font-size: 32px;*/
    /*-webkit-animation-duration: 1.5s;*/
    /*-moz-animation-duration: 1.5s;*/
    /*-ms-animation-duration: 1.5s;*/
    /*-o-animation-duration: 1.5s;*/
    /*animation-duration: 1.5s;*/
/*}*/

/*.index-title:before{*/
    /*content: '【';*/
    /*left: -35px;*/
    /*animation-name: fl;*/
/*}*/

/*.index-title:after{*/
    /*content: '】';*/
    /*right: -35px;*/
    /*animation-name: fr;*/
/*}*/

.index-stars span{
    display: inline-block;
    width: 12px;
    height: 10px;
    margin: 0 4px;
    background: url("../images/index_star_black.png") center center no-repeat;
}

.index-time{
    font-family: 'ds-digital';
    font-size: 50px;
}

.index-time span{
    display: inline-block;
    width: 49px;
}

@keyframes fl {
    0%{
        opacity: 0;
        left: 0;
    }
    100%{
        opacity: 1;
        left: -35px;
    }
}

@keyframes fr {
    0%{
        opacity: 0;
        right: 0;
    }
    100%{
        opacity: 1;
        right: -35px;
    }
}

/* main */
.main .topbar,
.main .sideleft{
    z-index: 999;
    background-color: transparent;
}

.main .navmenu .level2 li.open > a{
    color: #fff;
}

.main-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main-wrapper .sideleft{
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 800;
    clear: left;
}


.main .vdo-link{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: block;
    width: 100%;
    height: 100%;
}

.main .vdo-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#vdo{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-wrapper .swiper-container,
.main-wrapper .swiper-wrapper,
.main-wrapper .swiper-slide{
    width: 100%;
    height: 100%;
}

.main-wrapper .swiper-slide{
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
}



.main-wrapper .swiper-container-horizontal > .swiper-pagination-bullets{
    position: static;
}

.main-wrapper .swiper-container-horizontal > .swiper-pagination-bullets{
    position: absolute;
    bottom: 50%;
    left: calc(100% - 45px);
    width: 10px;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}

.main-wrapper .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    margin: 15px 0;
    border: 2px solid #999;
    background-color: transparent;
}

.main-wrapper .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active{
    background-color: #999;
}

.mianbt.footer{
            position: fixed;
            bottom: 20px;
            left: 50px;
            right: 50px;
            z-index: 10000;
            box-sizing: border-box;
            width: auto;
            padding: 0;
            background-color: transparent;
        }

        .mianbt .footer-icons{
            margin: 0;
        }
        
        .mianbt .footer-icons a{
            width: 30px;
            height: 30px;
            overflow: hidden;
        }

        .mianbt .footer-icons img{
           
        }

        .mianbt .footer-copyright{
            margin: 0;
            height: 30px;
            line-height: 37px;
        }

        .mianbt .footer-copyright p{
            color: #999;
            opacity: .5;
        }

        .mianbt.footer .servicebar-qrcode{
            top: -55px;
            left: -32px;
        }
        .yfd-link{
            color: #999;
        }

        .yfd-link:hover{
            color: #0cc;
            opacity: 1;
        }

/* collection */
.collection .grid{
    margin: 0 -25px;
}

.collection .grid-sizer{
    width: 50%;
}

.collection .grid-item{
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding: 0 25px;
    margin-bottom: 50px;
}

.summer2017 .grid-item .pic-text{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    color: #fff;
    opacity: 0;
    -ms-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    transition: all 0.4s;
}

.summer2017 .grid-item .pic-text1{
    left: auto;
    right: 9%;
    opacity: 1;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.summer2017 .grid-item .pic-text1 .lg{
    font-size: 60px;
}

.summer2017 .grid-item:hover .pic-text{
    opacity: 1;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.summer2017 .grid-item:hover .pic-text1{
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.collection .grid-item.lager{
    width: 100%;
}

.collection .grid-item.drop{
    margin-top: 50px;
}

.collection .grid-item .picture{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.collection .grid-item .picture .pic img{
    display: block;
    width: 100%;
}

.collection .swiper-slide a{
    position: relative;
    display: block;
    overflow: hidden;
}

.collection .swiper-slide .pic{
    max-height: 600px;
}

.collection .swiper-slide .pic img{
    display: block;
    width: 100%;
    height: auto;
}

.pic-mask{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(250,250,250,0);
    pointer-events: none;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -ms-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

.pic-share{
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 500;
    display: block;
    width: 16px;
    height: 16px;
    opacity: 0;
    cursor: pointer;
    -ms-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.pic-share{
    display: none;
}

.pic-share-white{
    background: url("../images/icon_picshare_white.png") center center no-repeat;
}

.pic-share-black{
    background: url("../images/icon_picshare_black.png") center center no-repeat;
}

.grid-item a:hover .pic-share{
    opacity: 1;
}

.collection .grid-item a:hover .pic-mask{
    background-color: rgba(0,0,0,0.45);
}




/* must buy items */
.mustbuyitems .grid-item{
    width: 100%;
    margin-bottom: 50px;
}

.mustbuyitems .grid-item a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.mustbuyitems .grid-item .pic-box{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mustbuyitems .grid-item .pic-box img{
    display: block;
    width: 100%;
}

.mustbuyitems .grid-item3 .pic-share{
    right: 50px;
    bottom: 50px;
}


/* collectionstreetlook */
.collections-treetlook .banner-carousel li img{
    display: block;
    width: 100%;
}

.collections-treetlook .grid{
    width: 100%;
    margin: 50px 0;
}

.collections-treetlook .grid .grid-item{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 25%;
    text-align: center;
}

.collections-treetlook .grid .grid-item a{
    position: relative;
    display: block;
    font-size: 12px;
    color: #333334;
}

.collections-treetlook .grid .grid-item .star-picture{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.collections-treetlook .grid .grid-item img{
    display: block;
    width: 100%;
}

.collections-treetlook .grid-pic-group{
    display: none;
}

.collections-treetlook .grid .grid-item .star-text{
    position: relative;
    padding: 20px 0;
}

.collections-treetlook .grid .grid-item .star-text:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    -ms-transform: scale(0);
    transform: scale(0);
    transition: 0.4s;
}

.collections-treetlook .grid .grid-item .star-text:after{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 100;
    display: block;
    width: 0;
    height: 0;
    margin-left: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #000;
    transition: border 0.4s;

}

.collections-treetlook .grid .grid-item .star-text.triangle-down:after{
    top: auto;
    bottom:0;
    border-top: 8px solid #000;
    border-bottom: 0;
}

.collections-treetlook .grid .grid-item:hover .star-text:after{
    border-bottom-color: #000;
    border-top-color: #000;
}

/*.collections-treetlook .grid .grid-item:hover .star-text{*/
    /*color: #fff;*/
/*}*/

.collections-treetlook .grid .grid-item:hover .star-text:before{
    -ms-transform: scale(1);
    transform: scale(1);
}


/* enjoyvideo */
.enjoyvideo .banner li{
    width: 100%;
}

.enjoyvideo .banner-video{
    width: 100%;
}

.enjoyvideo .videobox{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.enjoyvideo .video-poster{
    display: block;
    width: 100%;
}

.enjoyvideo .video-paley-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 300;
    display: block;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    opacity: 0;
    background: url("../images/video_playbtn.png") center center no-repeat;
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    transition: opacity 0.4s, transform 0.4s;
}

.enjoyvideo .grid-item:hover .video-paley-btn{
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.enjoyvideo .videotxt{
    position: relative;
    padding: 40px 20px;
    text-align: center;
}

.enjoyvideo .grid{
    margin: 50px -10px;
}

.enjoyvideo .grid .grid-sizer{
    float: left;
    width: 25%;
    height: 0;
}

.enjoyvideo .grid .grid-item{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 25%;
    margin-bottom: 20px;
    padding: 0 10px;
}

.enjoyvideo .grid .grid-item.lager{
    width: 50%;
}

.enjoyvideo .grid-item a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #000;
    text-align: center;
    overflow: hidden;
}

.enjoyvideo .grid-item .videotxt{
    background-color: #f5f5f5;
    transition: background 1.2s;
}

.enjoyvideo .grid-item:hover .videotxt{
    color: #fff;
    background-color: #000;
}

.enjoyvideo .grid-item .pic-share{
    left: 50%;
    top: 18px;
    margin-left: -8px;
}

iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    scrolling: no;
    allowtransparency: true;
    background-color: transparent;
}

.popup-mask{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    -ms-transform: scale(0);
    transform: scale(0);
    transition: transform 0.3s;
}

.popup-mask.open{
    -ms-transform: scale(1);
    transform: scale(1);
}

.popup-mask .popup-content{
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    overflow: hidden;
}

.popup-mask .btn-close{
    position: absolute;
    top: 50px;
    right: 50px;
}

.popup-mask .btn-close:before,
.popup-mask .btn-close:after{
    height: 2px;
    background-color: #fff;
}

/* new product all */
.newall .banner-carousel{
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 70px;
}

.newall .swiper{
    overflow: hidden;
}

.newall .swiper-slide a,
.newall .swiper-slide img{
    display: block;
    width: 100%;
}

.newall .swiper-pagination{
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.newall .swiper-pagination-bullet{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    border-radius: 50%;
    background-color: #949494;
}

.newall .swiper-pagination-bullet.active{
    background-color: #3e3e3e;
}

.newall .grid{
    margin: 70px -10px;
}

.newall .grid .grid-sizer{
    width: 33.33%;
}

.newall .grid .grid-item{
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    margin-bottom: 25px;
    padding: 0 10px;
}

.newall .grid .grid-item-bug{
    padding: 0;
}

.newall .grid .grid-with05{
    width: 50%;
}

.newall .grid .grid-with066{
    width: 66.66%;
}

.newall .grid .grid-with1{
    width: 100%;
}

.newall .grid .grid-item a{
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    text-align: center;
    overflow: hidden;
}

.grid .grid-item .picmask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    transition: background 0.4s;
}

.grid .grid-item:hover .picmask{
    background-color: rgba(0,0,0,.5);
}

.newall .grid .grid-item .picbox{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.newall .grid .picbox img {
    display: block;
    width: 100%;
}

.newall .grid .grid-style3{
    float: left;
    box-sizing: border-box;
    /*width: calc(50% - 40px);*/
    width: 50%;
    padding: 0 10px;
}

.newall .grid .grid-style1 .picbox img,
.newall .grid .grid-style3 .picbox img{
    display: block;
    width: 100%;

}

.newall .grid .grid-item .pictxt{
    margin: 15px 0;
}

.hoverbtline{
    position: relative;
}

.hoverbtline:after{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #333;
    transition: width 0.4s;
}

.hoverbtline:hover:after{
    width: 100%;
}

.newall .grid .grid-item:hover .hoverbtline:after{
    width: 100%;
}

.newall .grid .grid-style2 a{
    position: relative;
    box-sizing: border-box;
    display: table;
    table-layout: fixed;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.newall .grid .grid-style2 .grid-col{
    display: table-cell;
    vertical-align: middle;
}

.newall .grid .grid-style2.grid-picleft a{
    padding-left: 100px;
}

.newall .grid .grid-style2.grid-picright a{
    padding-right: 100px;
}

.newall .grid .grid-style2 .picbox{
    width: 31%;
}

.newall .grid .grid-style2 .pictxt{
    width: 69%;
}

.newall .grid .grid-style2 .picbox img{
    display: block;
    width: 100%;
}

.newall .grid .grid-style2 .pictxt h3{
    font-size: 60px;
    font-family: 'avantgarde demi';
    color: #000;
    text-align: center;
    line-height: 60px;
}

.newall .grid .grid-style2 .pictxt h3 span{
    display: block;
}

.avantgarde-demi{
    font-family: 'avantgarde demi';
}

.avantgarde-book{
    font-family: 'avantgarde book';
}
.textleft{
    text-align: left !important;
}

.newall .grid .grid-style3 a{
    position: relative;
}

.newall .grid .grid-style3 a img{
    display: block;
    width: 100%;
}

.newall .grid .grid-style3 .picbox{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.newall .grid .grid-style3 .picmask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    transition: background 0.4s;
}

.newall .grid .grid-style3 .pictxt{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: #fff;
    line-height: 50px;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: transform 0.4s;
}

.newall .grid .grid-style3 span{
    display: block;
    opacity: 0;
    transition: opacity 0.4s, transform 0.4s;
}

.newall .grid .grid-style3 .txt-top{
    transform: translateY(-100%);
}

.newall .grid .grid-style3 .txt-bottom{
    transform: translateY(100%);
}

.newall .grid .grid-style3:hover .picmask{
    background-color: rgba(0,0,0,0.5);
}

.newall .grid .grid-style3:hover .txt-top{
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.newall .grid .grid-style3:hover .txt-bottom{
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0);
}


/* goods type */
.goodstype .banner .grid{
    margin-top: 0;
}

.goods .selectbox{
    margin-bottom: 15px;
    font-size: 12px;
    text-align: right;
}

.goods .selectbox select{
    border: 0;
    outline: none;
    font-size: 12px;
    text-align: left;
}

.goods .grid{
    margin: 0 -10px 100px;
}

.goods .grid .grid-sizer{
    float: left;
    width: 33.33%;
    height: 0;
}

.goods .grid .grid-item{
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    margin-bottom: 25px;
    padding: 0 10px;
}

.goods .grid .grid-item a{
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    text-align: center;
    overflow: hidden;
}

.goods .grid .grid-item .picbox{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.goods .grid .grid-item .picbox img{
    display: block;
    width: calc(100% + 30px);
    height: auto;
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
    transition: transform 0.4s;
}

.goods .grid .grid-item:hover .picbox img{
    -ms-transform: translateX(0) scale(1.12);
    transform: translateX(0) scale(1.12);
}

.grid-item .goods-pricebox{
    display: inline-block;
}

.grid-item .goods-number{
    font-size: 12px;
}

.grid-item .goods-name,
.grid-item .goods-pricebox{
    font-size: 13px;
}

.grid-item .goods-pricebox{
    height: 16px;
    font-weight: bolder;
}

.goods .grid .grid-item:hover .goods-pricebox:after{
    width: 100%;
}

.grid-item .icon.addtocar{
    display: inline-block;
    width: 20px;
    height: 20px;
    opacity: 0;
    background: url("../images/icon_shopcar_black.png") center center no-repeat;
    transition: opacity 0.4s;
}

.goods .grid .grid-item:hover .icon.addtocar{
    opacity: 1;
}

.goods .grid .grid-item .pictxt{
    margin-top: 30px;
    margin-bottom: 0;
}

/* goods details */
.goodsdetails .sharebar{
    margin: 15px 0 0;
}
.goodsdetails-show{
    /*margin-bottom: 50px;*/
}

.goodsdetails-preview{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 64%;
}

.goodsdetails-info{
    position: relative;
    float: right;
    box-sizing: border-box;
    width: 36%;
    padding-left: 40px;
}

.goodsdetails-preview-small{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 95px;
    margin-right: 25px;
}

.goodsdetails-preview-middle{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: calc(100% - 120px);
    /*background: #eee;*/
    overflow: hidden;
}

.goodsdetails-preview-middle img{
    display: block;
    width: 100%;
}

.goodsdetails-preview-small ul li{
    width: 100%;
    height: 110px;
    margin-bottom: 20px;
    overflow: hidden;
    cursor: pointer;
}

.goodsdetails-preview-small ul li img{
    display: block;
    width: 100%;
}

.margimbt20{
    margin-bottom: 20px;
}

.goodsdetails-info-name{
    margin-bottom: 20px;
    font-size: 16px;
    color: #000;
}

.goodsdetails-info-numberbox{
    margin-bottom: 15px;
    font-size: 13px;
    color: #d7d7d7;
}

.goodsdetails-info-pricebox{
    margin-bottom: 20px;
    font-size: 20px;
    color: #000;
}

.goodsdetails-info-color{
    margin-bottom: 20px;
}

.goodsdetails-info-color ul li{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    margin-right: 20px;
    padding: 1px;
    border: 1px solid #ebecf0;
    transition: border 0.5s;
}

.goodsdetails-info-color ul li:last-child{
    margin-right: 0;
}

.goodsdetails-info-color ul li.active,
.goodsdetails-info-color ul li:hover{
    border-color: #000;
}
.goodsdetails-info-color ul li a img{
    display: block;
    width: 100%;
    height: 100%;
}
.goodsdetails-info-color ul li a{
    display: block;
    width: 100%;
    height: 100%;
}

.goodsdetails-info-color ul li.navy a{
    background-color: #3d476a;
}

.goodsdetails-info-color ul li.white a{
    background-color: #fff;
}

.select-sizepicker{
    position: relative;
    z-index: 10;
    margin-bottom: 10px;
}

.select-sizepicker .cc-select,
.select-sizepicker .cc-select .cc-select-panel{
    font-size: 12px;
    border-color: #e5e5e5;
}

.goodsdetails-size-guider,
.goodsdetails-info-collocation h3{
    font-size: 12px;
    color: #666;
}

.goodsdetails-size-guider:after,
.goodsdetails-info-collocation h3:after{
    background-color: #666;
}

.goodsdetails-info-pickerbox{
    margin: 20px 0;
    vertical-align: middle;
}

.goodsdetails-picker-tips{
    margin-left: 20px;
    vertical-align: top;
    line-height: 48px;
    color: #666;
}

.counter{
    position: relative;
    display: inline-block;
    width: 150px;
    height: 40px;
    border: 1px solid #c7c7c7;
    line-height: 40px;
}

.counter-reduce,
.counter-value,
.counter-add{
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    color: #000;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.counter-reduce{
    left: 0;
    width: 40px;
    font-size: 20px;
    cursor: pointer;
}

.counter-value{
    left: 40px;
    width: 70px;
    border: 0;
    background-color: #c6c6c6;
}

.counter-add{
    left: 110px;
    font-size: 20px;
    cursor: pointer;
}

.counter-reduce.counter-disabled,
.counter-add.counter-disabled{
    color: #c6c6c6;
}

.goodsdetails-info-collocation h3{
    height: 16px;
    margin-bottom: 15px;
}

.goodsdetails-collocations{
    margin: 0 -10px;
}

.goodsdetails-collocations-item{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding: 0 10px;
}

.goodsdetails-collocations-item a{
    display: inline-block;
    width: 100%;
    height: 100%;
    fonts-size: 12px;
    color: #000;
}

.goodsdetails-collocations-item .picbox{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.goodsdetails .contact{
    position: absolute;
    top: 5px;
    right: 14px;
    z-index: 1;
    width: 18px;
}

.goodsdetails .contact .checkboxs-item label:before{
    border-color: #c7c7c7;
}



.goodsdetails .contact input[type=checkbox]{
    visibility: hidden;
}

.goodsdetails-collocations-item img{
    display: block;
    width: 100%;
}

.goodsdetails-collocations-item .cc-select{
    float: left;
    width: calc(50% - 10px);
    min-width: 80px;
    height: 35px;
    margin: 5px 5px 5px 0;
    line-height: 35px;
    font-size: 12px;
    text-align: center;
}

.goodsdetails-collocations-item .cc-select:last-child{
    z-index: 90;
    margin-right: 0;
    margin-left: 5px;
}

.goodsdetails-collocations-item .cc-select.cc-select-block{
    float: none;
    display: block;
    width: 100%;
    margin: 10px 0;
}

.goodsdetails-collocations-item .cc-select .cc-select-panel{
    top: 38px;
}

.goodsdetails-collocations-item .cc-select li{
    line-height: 35px;
    height: 35px;
    font-size: 12px;
    text-indent: -24px;
}

.goodsdetails-collocations-item .cc-select li:hover{
    text-indent: 0;
}

.goodsdetails-collocations-item .pictxt{
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.goodsdetails-collocations-item .pictxt .goods-number{
    color: #333;
}

.goodsdetails-collocations-item .pictxt current-price .price{
    font-size: 16px;
}

.goodsdetails-collocations-item .pictxt .old-price{
    font-size: 13px;
    color: #a3a3a3;
    text-decoration: line-through;
}

.goodsdetails-info-btns{
    margin-bottom: 35px;
}

.goodsdetails-info-btns{
    position: fixed;
    right: 236px;
    bottom: 0;
    z-index: 1000;
   width: 325px;
    margin: 0;
    background-color: #fff;
    padding: 20px;
}

.goodsdetails-info-btns a{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.goodsdetails-info-btns .btn-favorites{
    float: left;
    width: calc(55% - 10px);
    margin-right: 10px;
    color: #000;
    background-color: #f5f5f5;
}
.goodsdetails-info-btns .goodsdetails-btn{
    float: left;
    display: block;
    width: 130px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #000;
    background-color: #f5f5f5;
    overflow: hidden;
    transition: background-color .2s;
}
.goodsdetails-info-btns .goodsdetails-btn:hover,
.goodsdetails-info-btns .goodsdetails-btn.active{
    color: #fff;
    background-color: #000;
}

.goodsdetails-info-btns .btn-buynow{
    margin-right: 20px;
}

.goodsdetails-info-btns .goodsdetails-btn .lang{
    display: block;
    width: 100%;
    height: 100%;
    transition: all .2s;
}

.goodsdetails-info-btns .goodsdetails-btn:hover .lang{
    transform: translateY(-100%);
}

.goodsdetails-info-btns .btn-shoucang{
    float: left;
    margin-right: 20px;
    font-size: 12px;
    color: #000;
    line-height: 1.5;
}

.goodsdetails-info-btns .btn-shoucang span.tubiao{
    display: block;
    margin: 3px auto 0;
    width: 20px;
    height: 20px;
    background: url(../images/shoucang.png) 0 0 no-repeat;
}

.goodsdetails-info-btns .btn-shoucang.on span.tubiao{
    background-position: 0 -20px;
}
.goodsdetails-info-btns .btn-addtocar{
    float: right;
  
    color: #fff;
    background-color: #000;
}

.goodsintro-params{
    margin: 75px 0;
	padding-left: 120px;
}

.goodsintro-params ul{
    float: left;
    list-style: disc outside;
    box-sizing: border-box;
    width: 50%;
    padding-left: 20px;
    padding-right: 50px;
    text-align: left;
}

.goodsintro-params ul:last-child{
    padding-right: 0;
}

#sizeguider{
    margin-bottom: 100px;
    text-align: center;
}

#sizeguider img{
    display: inline-block;
    width: auto;
}

.division-line{
    position: relative;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #e5e5e5;
    margin: 100px auto;
}

.division-txt{
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 80px;
    line-height: 50px;
    color: #666;
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.goodsdetails .grid .grid-item{
    width: 25%;
}

/* salespromotion */
.salespromotion .grid {
    margin: 0 -10px 100px -10px;
}

.salespromotion .grid .grid-sizer{
    width: 50%;
}

.salespromotion .grid .grid-item{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding: 0 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.salespromotion .grid .grid-item a{
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #999;
    text-align: center;
    overflow: hidden;
}

.salespromotion .grid .grid-item .picbox{
    position: relative;
    display: table-cell;
    width: 50%;
    height: 100%;
    vertical-align: middle;
    overflow: hidden;
}

.salespromotion .grid .grid-item .picbox img{
    display: block;
    width: 100%;
    transition: transform 0.4s;
}

.salespromotion .grid .grid-item:hover .picbox img{
    transform: rotate(6deg) scale(1.12);
}

.salespromotion .grid .grid-item .pictxt{
    display: table-cell;
    width: 50%;
    height: 100%;
    vertical-align: middle;
    background-color: #f5f5f5;
}

.salespromotion .grid .grid-item .pictxt .title{
    margin: 25px 0;
    font-size: 16px;
    color: #000;
}

.salespromotion .grid .grid-item .pictxt .readmore{
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #ccc;
}

.salespromotion .grid .grid-item.grid-lager a{
    display: block;
}

.salespromotion .grid .grid-item.grid-lager .picbox{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.salespromotion .grid .grid-item.grid-lager .picmask-txt{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: #fff;
    line-height: 50px;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: top 0.4s;
}

.salespromotion .grid .grid-item.grid-lager .avantgarde-demi{
    font-size: 60px;
}

.salespromotion .grid .grid-item.grid-lager .pictxt{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(50% - 10px);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    transition: transform 0.4s;
}

.salespromotion .grid .grid-item.grid-lager .pictxt-content{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.salespromotion .grid .grid-item.grid-lager:hover img{
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}

.salespromotion .grid .grid-item.grid-lager:hover .picmask-txt{
    top: 25%;
}

.salespromotion .grid .grid-item.grid-lager:hover .pictxt{
    -ms-transform: translateY(0);
    transform: translateY(0);
}

/* promotion details */
.promotiondetails .graphic{
    position: relative;
    font-size: 12px;
}

.promotiondetails .graphic .btn-close{
    position: absolute;
    top: 0;
    right: 0;
}

.promotiondetails .graphic .title{
    font-size: 18px;
}

.promotiondetails .graphic .time{
    margin: 25px 0;
    color: #a3a3a3;
}

.promotiondetails .graphic .text{
    color: #747474;
    line-height: 24px;
}

.promotiondetails .graphic .text img{
    display: block;
   
}

.promotiondetails .sharebar{
    margin-bottom: 30px;
}

.promotiondetails .news-details-link{
    margin-bottom: 100px;
}

.promotiondetails .news-details-link a{
    display: block;
    margin-bottom: 10px;
    color: #000;
}

/* gift exchange */
.tab{
    position: relative;
    margin-bottom: 100px;
}

.tab .tab-btns{
    margin-bottom: 25px;
    border-bottom: 2px solid #e5e5e5;
}

.tab .tab-btns li{
    float: left;
}

.tab .tab-btns li a{
    position: relative;
    display: block;
    padding: 15px 25px;
    color: #bebebe;
    transition: color 0.3s;
}

.tab .tab-btns li a:before,
.tab .tab-btns li a:after{
    content: "";
    position: absolute;
    left: 0;
    display: block;
}

.tab .tab-btns li a:before{
    top: 21px;
    width: 1px;
    height: 10px;
    background-color: #e5e5e5;
}

.tab .tab-btns li:first-child a:before{
    width: 0;
}

.tab .tab-btns li a:after{
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: width 0.3s;
}

.tab .tab-btns li.active a,
.tab .tab-btns li:hover a{
    color: #000;
}

.tab .tab-btns li.active a:after,
.tab .tab-btns li:hover a:after{
    width: 100%;
}

.travel .tab .tab-content .grid,
.giftexchange .tab .tab-content .grid{
    position: relative;
    margin: 0 -10px;
}

.giftexchange .tab .tab-content .grid .grid__sizer{
    width: 25%;
}

.giftexchange .tab .tab-content .grid .grid__item{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 25%;
    padding: 0 10px;
}

.giftexchange .tab .tab-content .grid .grid__item a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    transition: color 0.3s;
}

.giftexchange .tab .tab-content .grid .grid__img{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.giftexchange .tab .tab-content .grid .grid__item img{
    display: block;
    width: 100%;
    transition: transform 0.4s;
}

.giftexchange .tab .tab-content .grid .grid__text{
    position: relative;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 96px;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
}

.giftexchange .tab .tab-content .grid .grid__text__content{
    position: relative;
    top: 0;
    width: 100%;
    padding-top: 30px;
    background-color: #fff;
    transition: top 0.3s, background 0.3s;
}

.giftexchange .tab .tab-content .grid__item:hover img{
    -ms-transform: scale(1.1) rotate(4deg);
    transform: scale(1.1) rotate(4deg);
}

.giftexchange .tab .tab-content .grid__item:hover .grid__text__content{
    top: -64px;
    background-color: #fafafa;
}

.giftexchange .tab .tab-content .grid .grid__text__exchangebtn{
    display: inline-block;
    height: 30px;
    margin: 25px 0 30px;
    padding: 0 20px;
    border: 1px solid #dbdbdb;
    font-size: 12px;
    line-height: 30px;
    color: #737373;
}

.tab .tab-content .grid__loading:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/loader.gif") #fff center center no-repeat;
}

/* giftexchange details */
.giftexchangedetails .blackblock{
    background-color: #e94754;
}

.giftexchangedetails .contact .checkboxs-item label.checked:after{
    background-color: #e94754;
}

.giftexchangedetails .goodsdetails-info-pricebox{
     font-size: 16px;
    font-weight: bold;
 }

.giftexchangedetails .color-ff0103 a{
    background-color: #ff0103;
}

.giftexchangedetails .color-e94754 a{
    background-color: #e94754;
}

.giftexchangedetails .color-ef3179 a{
    background-color: #ef3179;
}

/* travel */
#postBtn{
    position: absolute;
    top: 18px;
    right: 0;
    display: block;
    color: #000;
}

.travel .grid .grid__sizer{
    width: 25%;
}

.travel .grid .grid__item{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 25%;
    margin-bottom: 40px;
    padding: 0 20px;
    transition: all 0.4s;
}
@media (max-width:1400px){
    .travel .grid .grid__item{  
        width:33%;
    }
    .topbar{
        z-index:99;
        background-color:#fff;
    }
    
}
@media (max-width:1350px){

    .footer .footer-help,.footer-privacy{
        display: none;
    }
}
@media (max-width:1200px){
    .travel .grid .grid__item{  
        width: 50%;
    }

    
}


@media (max-width:800px){
    .travel .grid .grid__item{  
        width: 50%;
    }
  
    .middle-content {
        position: relative;
        top: 0;
        left:0;
        right:0;
        width: 100%;
    }
    .topbar-logo a {
        display: block;
        width: 167px;
        height: 26px;
        background: url(../images/navbar_logo_black.png) center center no-repeat;
        background-size: 70%;
        overflow: hidden;
    }
    .sideleft,.topbar{
        display:none;
    }
    .site-header{
        display: block !important;
    }
    .all-wrapper{
        margin-top:30px;
    }

}
@media (max-width:600px){
    .travel .grid .grid__item{  
        width: 100%;
    }
   
    .middle-content {
        position: relative;
        top: 0;
        left:0;
        right:0;
        width: 100%;
    }
}


.travel .grid .grid__item a{
    display: block;
    width: 100%;
    height: 100%;
    font-size: 13px;
    color: #bbb;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.travel .grid .grid__item .imgbox{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}

@media (min-width:1561px){
    .travel .grid .grid__item .imgbox{
        height:318px;
    }
}
@media (max-width:1560px){
    .travel .grid .grid__item .imgbox{
        height:268px;
    }
}
@media (max-width:1400px){
    .travel .grid .grid__item .imgbox{
        height:255px;
    }
}
@media (max-width:1200px){
    .travel .grid .grid__item .imgbox{
        height:325px;
    }
}
@media (max-width:996px){
    .travel .grid .grid__item .imgbox{
        height:268px;
    }
}
@media (max-width:800px){
    .travel .grid .grid__item .imgbox{
        height:348px;
        
    }
}
@media (max-width:600px){
    .travel .grid .grid__item .imgbox{
        height: 100%;
        
    }
}

.travel .grid .grid__item .imgbox img{
    display: block;
    width: 100%;
    margin:0 auto;
    transition: transform 0.4s;
}

.travel .grid .grid__item:hover .imgbox img{
    transform: scale(1.1);
}

.travel .grid .grid__item .grid__text{
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    background-color: #f5f5f5;
    transition: background 0.4s;
}

.travel .grid .grid__item .grid__text__title{
    font-size: 14px;
    font-weight: bold;
    color: #000;
    transition: color 0.4s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.travel .grid .grid__item:hover .grid__text{
    background-color: #000;
}

.travel .grid .grid__item:hover .grid__text__title{
    color: #fff;
}

.interactionbar{
    padding: 10px 0;
    border-bottom: 1px solid #e9e9e9;
    transition: border 0.4s;
}

.interactionbar ul{
    position: relative;
}

.interactionbar .icon{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    height: 20px;
    /*padding-left: 20px;*/
    line-height: 20px;
    color: #bbbbbb;
    /*background-position: left 1px;*/
    /*background-repeat: no-repeat;*/
    /*cursor: pointer;*/
    /*-webkit-touch-callout: none;*/
    /*-webkit-user-select: none;*/
    /*-khtml-user-select: none;*/
    /*-moz-user-select: none;*/
    /*-ms-user-select: none;*/
    /*user-select: none;*/
}

.interactionbar .icon span{
    display: inline-block;
    height: 20px;
    padding-left: 20px;
    background-position: left 1px;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.interactionbar .follow{
    text-align: left;
}

.interactionbar .favorite{
    text-align: center;
}

.interactionbar .praise{
    text-align: right;
}

.travel .grid .grid__item:hover .interactionbar{
    border-color: #333;
}

.interactionbar .follow span{
    background-position: left 4px;
    background-image: url("../images/guanzhu_bggray.png");
}

.interactionbar .favorite span{
    background-image: url("../images/shoucang_bggray.png");
}

.interactionbar .praise span{
    background-image: url("../images/dianzan_bggray.png");
}

.travel .grid .grid__item:hover .follow span{
    background-image: url("../images/guanzhu_bgblack.png");
}

.travel .grid .grid__item:hover .favorite span{
    background-image: url("../images/shoucang_bgblack.png");
}

.travel .grid .grid__item:hover .praise span{
    background-image: url("../images/dianzan_bgblack.png");
}

.user-info{
    padding: 10px 0;
}

.user-info .user-head{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 15px;
    overflow: hidden;
}

.user-info .user-head img{
    display: block;
    width: 100%;
}

.user-info .user-name{
    /* width: calc(100% - 43px); */
    line-height: 28px;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    color:#333;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

/* travel details */
hr{
    width: 100%;
    height: 1px;
    border: 0;
    background-color: #e5e5e5;
}

.traveldetails .linkbar{
    position: relative;
}

.traveldetails .news-details-link{
    width: 50%;
    margin-top: 30px;
    margin-bottom: 40px;
}

.traveldetails .news-details-link a{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.traveldetails .linkbar .interactionbar{
    position: absolute;
    top: -10px;
    right: 0;
    width: 45%;
    border: 0;
    text-align: right;
    vertical-align: middle;
}

.traveldetails .interactionbar ul {
    position: absolute;
    right: 110px;
    top: 7px;
}

.traveldetails .interactionbar .sharebar {
    position: absolute;
    top: 10px;
    right: 0;
    margin: 0;
}

.traveldetails .interactionbar .icon{
    float: none;
    display: inline-block;
    width: auto;
    margin-right: 15px;
    vertical-align: middle;
}

.traveldetails .interactionbar .icon.on{
    color: #000;
}

.traveldetails .interactionbar .icon:last-child{
    margin-right: 0;
}

.traveldetails .interactionbar .share span{
    background-position: left 3px;
    background-image: url("../images/interactionbar_share.png");
}

.traveldetails .interactionbar .follow.on span{
    background-image: url("../images/guanzhu_black.png");
}

.traveldetails .interactionbar .favorite.on span{
    background-image: url("../images/shoucang_black.png");
}

.traveldetails .interactionbar .praise.on span{
    background-image: url("../images/dianzan_black.png");
}

.traveldetails .interactionbar .share.on span{
    background-image: url("../images/interactionbar_share_on.png");
}

.traveldetails .comment{
    margin-bottom: 150px;
    font-size: 14px;
}

.traveldetails .comment-publish{
    margin-bottom: 50px;
}

.traveldetails .comment .title{
    margin-bottom: 5px;
    font-size: 16px;
}

.traveldetails .commentbox{
    box-sizing: border-box;
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid #e7e7e7;
    outline: none;
    transition: border 0.4s;
}

.traveldetails .commentbox:focus{
    border-color: #333;
}

.traveldetails .comment-btn{
    height: 40px;
    padding: 0 50px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background-color: #000;
}

.traveldetails .comment-list{

}

.traveldetails .comment-list li{
    position: relative;
    padding: 30px 0;
    border-bottom: 1px solid #e5e5e5;
}

.traveldetails .comment-list .user-head{
    float: left;
    display: table-cell;
    width: 80px;
    margin-right: 30px;
    vertical-align: middle;
}

.traveldetails .comment-list .user-head img{
    vertical-align: middle;
}

.traveldetails .comment-list .comment-info{
    float: left;
    width: calc(100% - 110px);
}

.traveldetails .comment-list .name-time{
    position: relative;
    margin: 10px 0;
}

.traveldetails .comment-list .publishtime{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    color: #666;
}

.traveldetails .comment-list .comment-text{
    margin: 10px 0;
}

.traveldetails .comment-list .comment-reply{
    margin: 15px 0;
}

.traveldetails .comment-list .reply-btn{
    float: right;
    display: block;
    height: 38px;
    padding: 0 50px;
    border: 1px solid #000;
    font-size: 12px;
    line-height: 42px;
    text-align: center;
    color: #000;
    transition: background 0.4s;
}

.traveldetails .comment-list .reply-btn:hover{
    color: #fff;
    background-color: #000;
}

.traveldetails .reply-textarea{
    display: none;
}

.traveldetails .edit-box{
    box-sizing: border-box;
    width: 100%;
    height: 120px;
    border: 1px solid #dcdcdc;
    outline: none;
    padding: 8px;
    transition: border 0.4s;
}

.traveldetails .edit-box:focus{
    border-color: #000;
}

.traveldetails .comment-list .reply-submit-btn .reply-btn{
    width: 80px;
    height: 30px;
    padding: 0;
    line-height: 30px;
}


/* brand info */
.brandinfo .banner{
    /*display: table;*/
    /*table-layout: fixed;*/
    margin-bottom: 20px;
}

.brandinfo .banner a{
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    color: #000;
}

.brandinfo .bannerpic,
.brandinfo .bannertxt{
    display: table-cell;
    width: 50%;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.brandinfo .bannerpic .picbox{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.brandinfo .bannerpic .picbox img{
    display: block;
    width: 100%;
    transition: transform 0.4s;
}

.brandinfo .bannertxt{
    background-color: #f5f5f5;
}

.brandinfo .bannertxt .textbox{
    box-sizing: border-box;
    width: 100%;
    padding: 0 10%;
}

.brandinfo .bannertxt .time{
    font-size: 12px;
    color: #b6b6b6;
}

.brandinfo .bannertxt .title{
    margin: 5% 0;
    font-size: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.brandinfo .bannertxt p{
    font-size: 12px;
    line-height: 25px;
    color: #999;
}

.brandinfo .bannertxt .readmore{
    margin-top: 5%;
}

.brandinfo .readmore{
    position: relative;
    z-index: 1;
    display: inline-block;
    height: 30px;
    margin-top: 30px;
    padding: 0 20px;
    border: 1px solid #ccc;
    line-height: 30px;
    color: #6f6f6f;
    font-size: 12px;
    transition: border 0.4s;
}

.brandinfo .readmore:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #000;
    -ms-transform: scale(0);
    transform: scale(0);
    transition: transform 0.4s;
}

.brandinfo .readmore:hover{
    border-color: #000;
    color: #fff;
}

.brandinfo .readmore:hover:before{
    -ms-transform: scale(1);
    transform: scale(1);
}

.brandinfo .grid{
    margin: 20px -10px 100px;
}

.brandinfo .grid-item{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 33.33%;
    margin-bottom: 20px;
    padding: 0 10px;
}

.brandinfo .grid-item a{
    display: block;
    color: #000;
}

.brandinfo .grid-item .picbox{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.brandinfo .grid-item .picbox img{
    display: block;
    width: 100%;
    transition: transform 0.4s;
}

.brandinfo .grid-item .pictxt{
    box-sizing: border-box;
    width: 100%;
    padding: 30px 30px 40px;
    text-align: center;
    background-color: #f5f5f5;
}

.brandinfo .grid-item .pictxt .time{
    font-size: 12px;
    color: #999;
}

.brandinfo .grid-item .pictxt .title{
    height: 50px;
    margin-top: 20px;
    font-size: 16px;
    color: #000;
}

.brandinfo .banner:hover img,
.brandinfo .grid-item:hover img{
    transform: scale(1.12);
}

.brandinfo .banner:hover .readmore,
.brandinfo .grid-item:hover .readmore{
    border-color: #000;
    color: #fff;
}

.brandinfo .banner:hover .readmore:before,
.brandinfo .grid-item:hover .readmore:before{
    -ms-transform: scale(1);
    transform: scale(1);
}

/* company culture */
.companyculture .time-list{
    margin-bottom: 50px;
}

.time-list .list-item-content{
    display: table;
    table-layout: fixed;
    box-sizing: border-box;
    min-height: 85px;
    border: 1px solid #eee;
    margin-bottom: 20px;
    width: 100%;
    overflow: hidden;
}

.time-list .list-item-content .time,
.time-list .list-item-content .event{
    display: table-cell;
    box-sizing: border-box;
    padding: 20px 30px;
    font-size: 12px;
    vertical-align: middle;
    overflow: hidden;
    transition: all 0.4s;
}

.time-list .list-item-content .time{
    width: 10%;
    text-align: center;
    font-size: 14px;
    color: #000;
    background-color: #eee;
}

.time-list .list-item-content .time .month{
    border-bottom: 1px solid #000;
}

.time-list .list-item-content .event{
    width: 90%;
    text-align: left;
    color: #444;
    background-color: #fff;
}

.time-list .list-item-content:hover .time{
     width: 12%;
 }

.time-list .list-item-content:hover .event{
    width: 88%;
}

/* store */
.store .banner-carousel{
    position: relative;
}

.store .banner-carousel .swiper-slide img{
    display: block;
    width: 100%;
    height: auto;
}

.store .swiper-pagination-bullet{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    border-radius: 50%;
    background-color: #949494;
}

.store .swiper-pagination{
    /*top: 0;*/
    left: 0;
    right: 0;
    margin: 8px;
    text-align: center;
}

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

.store .seachstore{
    margin: 60px 0 40px;
    vertical-align: top;
}

.store .cc-select-wrap{
    position: relative;
    z-index: 100;
    display: inline-block;
    vertical-align: top;
}

.store .cc-select{
    display: inline-block;
    width: 200px;
    margin-right: 30px;
}

#searchStoreBtn{
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 80px;
    height: 40px;
    border: 1px solid #999;
    line-height: 40px;
    text-align: center;
    color: #000;
    vertical-align: top;
}

#searchStoreBtn:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #000;
    -ms-transform: scale(0);
    transform: scale(0);
    transition: transform 0.3s;
}

#searchStoreBtn:hover{
    color: #fff;
}

#searchStoreBtn:hover:before{
    -ms-transform: scale(1);
    transform: scale(1);
}

.store .storemapwrap{
    width: 100%;
    height: 400px;
    margin-bottom: 100px;
}

.store .store-address-wrap{
    float: left;
    box-sizing: border-box;
    width: 37%;
    height: 100%;
}

.store .store-address-list li{
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 0px 15px 0px 0;
    cursor: pointer;
    transition: padding 0.4s, color 0.4s, background 0.4s;
}

.store .store-address-list li:hover{
    padding-left: 15px;
    color: #fff;
    background-color: #000;
}

.store .store-tel{
    margin-top: 10px;
}

.store .store-map{
    float: left;
    width: calc(63% - 50px);
    height: 100%;
    padding-left: 50px;
}

#bmap{
    width: 100%;
    height: 100%;
}

/* career */
.career .grid{
    margin: 30px -15px 100px;
}

.career .grid .grid-item{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 50%;
    margin-bottom: 30px;
    padding: 0 15px;
}

.career .grid .grid-item a{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 8% 12%;
    border: 1px solid #eee;
    font-size: 12px;
    color: #666;
    text-align: center;
    overflow: hidden;
    transition: all 0.4s;
}

.career .grid .grid-item .grid-item-title{
    margin-bottom: 15px;
    padding-bottom: 5px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px dashed #e5e5e5;
}

.career .grid .grid-item .readmore{
    position: relative;
    z-index: 1;
    display: inline-block;
    box-sizing: border-box;
    height: 35px;
    margin-top: 35px;
    padding: 0 15px;
    border: 1px solid #e5e5e5;
    line-height: 35px;
    transition: all 0.4s;
}

.career .grid .grid-item .readmore:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 0;
    height: 100%;
    background-color: #000;
    transition: all 0.4s;
}

.career .grid .grid-item a:hover{
    border-color: #f5f5f5;
    background-color: #f5f5f5;
}

.career .grid .grid-item a:hover .readmore{
    color: #fff;
}

.career .grid .grid-item a:hover .readmore:before{
    width: 100%;
}

.career .popup{
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0,0,0,.5);
}

.career .popup.open{
    display: block;
}

.career .popcontent{
    position: absolute;
    top: 25%;
    left: 20%;
    box-sizing: border-box;
    width: 60%;
    height: 60%;
    padding: 30px;
    box-shadow: 0 0 10px rgba(6,6,6,0.3);
    border-radius: 4px;
    background-color: #fff;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s;
}

.career .popup .popcontent.open{
    top: 20%;
    opacity: 1;
}

.career .popup .btn-close{
    position: absolute;
    top: 15px;
    right: 15px;
}

.career .popup .poptext-title{
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
 }

.career .popup .poptext-details .poptext-details-item{
    margin-bottom: 10px;
}

/* contact */

.contact .info{
    font-size: 12px;
    color: #333;
    text-align: center;
    line-height: 30px;
}

.contact .info .title{
    margin: 60px 0 35px;
    font-size: 16px;
    color: #000;
}

.contact .info .line{
    display: inline-block;
    width: 30px;
    height: 1px;
    margin: 40px auto;
    background-color: #222;
}

.contact{
    text-align: center;
}

.contact .checkboxs{
    display: inline-block;
    margin: 50px auto;
    white-space: nowrap;
}

.contact .checkboxs-item{
    display: inline-block;
    margin-right: 35px;
}

.contact .checkboxs-item label{
    position: relative;
    display: block;
    height: 18px;
    padding-left: 5px;
    font-size: 12px;
    line-height: 18px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.contact .checkboxs-item label:before{
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    z-index: 1;
    display: block;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1px solid #454545;
    background-color: #fff;
}

.contact .checkboxs-item label:after{
    content: "";
    position: absolute;
    top: 4px;
    left: 3px;
    z-index: 2;
    display: block;
    width: 8px;
    height: 8px;
    background-color: #fff;
}

.contact .checkboxs-item label.checked:after{
    background-color: #454545;
}

.contact input.checkbox{
    position: relative;
    visibility: hidden;
}

.contact #f1{
    width: 600px;
    margin: 0 auto 150px;
    border: 1px solid #ddd;
}

.contact #f1 .inptdf{
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 50%;
    height: 70px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.contact #f1 .inptdf:last-child{
    border-right: 0;
}

.contact #f1 .inptdf input,
.contact #f1 .inptdf .placeholder{
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 15px;
    color: #999;
}

.contact #f1 .inptdf .placeholder{
    text-align: left;
}

.contact #f1 .inptdf:first-child .placeholder{
    line-height: 40px;
}

.contact #f1 .inptdf input{
    color: #333;
    border: 0;
    background-color: transparent;
}

.contact #f1 .textearewrap{
    position: relative;
    width: 100%;
    height: 140px;
}

.contact #f1 .textearewrap .placeholder,
.contact #f1 .texteare{
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 140px;
    padding: 15px;
    outline: none;
    text-align: left;
    color: #333;
}

.contact #f1 .textearewrap .placeholder{
    color: #999;
}

.contact #f1 button{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 68px;
    border: 0;
    outline: 0;
    font-size: 12px;
    color: #fff;
    background-color: #222;
    cursor: pointer;
    transition: all 0.4s;
}

.contact #f1 button:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #000;
    transition: all 0.4s;
}

.contact #f1 button:hover:before{
    width: 100%;
}

/* login */
.login{
    width: 510px;
    margin: 0 auto;
}

.login a{
    color: #999;
}

.hoverline{
    position: relative;
    display: inline-block;
}

.hoverline:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 0;
    height: 1px;
    background-color: #999;
    transition: width 0.4s;
}

.hoverline:hover:after{
    width: 100%;
}

.login input[type=text],
.login input[type=password]{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
    padding-left: 15px;
    padding-right: 50px;
    border: 1px solid #999;
    transition: border 0.4s;
}

.login input.short{
    display: block;
    width: 290px;
    margin-right: 20px;
}

.login input:focus{
    border-color: #000;
}

.login-methodbox{
    height: 55px;
    text-align: center;
    vertical-align: top;
}

.login-method,
.login-method a{
    display: inline-block;
}

.login-method a{
    padding: 0 15px;
    color: #999;
    transition: color 0.4s;
}

.login-method a.active,
.login-method a:hover{
    color: #000;
}

.login-validatecode{
    width: 100%;
}

.login #validateImg{
    display: block;
    width: 130px;
    height: 50px;
    background-color: #eee;
    vertical-align: top;
    overflow: hidden;
}

.login #validateImg img{
    display: block;
    width: 100%;
    height: 100%;
}

.login .changeValidateImg{
    position: relative;
    display: block;
    width: 60px;
    height: 50px;
    color: #999;
    text-align: right;
    vertical-align: middle;
}

.login .changeValidateImg a{
    position: relative;
    top: 15px;
    display: inline-block;
    vertical-align: middle;
    color: #999;
}

.login-btns{
    margin: 0 -15px;
}

.login-btns .login-btn,
.login-btns .register-btn{
    float: left;
    box-sizing: border-box;
    width: calc(50% - 30px);
    height: 50px;
    line-height: 50px;
    margin: 0 15px;
    color: #fff;
    text-align: center;
    background-color: #000;
}

.login .division-line{
    margin: 50px auto 30px;
}

.login .division-txt{
    padding: 0 15px;
}

.login .others-method{
    text-align: center;
}

.login .others-method li{
    display: inline-block;
    margin: 0 15px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    transition: color 0.4s;
}

.login .others-method li:hover{
    color: #000;
}

.login-tips{
    font-size: 12px;
    color: #444;
    line-height: 25px;
    text-align: center;
}


/* register */
.register .login-validatecode{
    position: relative;
}

.register #validate{
    width: 390px;
}

.register #getValidateCode{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 120px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background-color: #666;
    transition: all 0.4s;
}

.register #getValidateCode:hover{
    color: #fff;
    background-color: #000;
}

.register .login-btns{
    margin: 0;
}

.register .login-btns .register-btn{
    float: none;
    display: block;
    width: 100%;
    margin: 0;
}

.register .login-tips p{
    text-align: left;
    color: #999;
}

.register .login-tips a{
    color: #000;
}

    /* shop car */
.blank{

}

.blank-head{
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #dcdcdc;
}

.blank-name{
    font-size: 16px;
}

.blank a{
    color: #000;
}

.blank table{
    table-layout: fixed;
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
}

.blank table tr:first-child{
    background-color: #fafafa;
}

.blank table th{
    padding-top: 15px;
    text-align: center;
}

.blank table td{
    padding: 30px 0;
    text-align: center;
    vertical-align: middle;
}

.blank table .col-checkbox{
    width: 42px;
}

.blank table .col-goods{
    width: 25%;
    text-align: left;
}

.blank table .col-counter{
    width: 18%;
    min-width: 130px;
}

.blank table .col-remove{
    width: 8%;
}

.blank .goods-img,
.blank .goods-text{
    display: inline-block;
    vertical-align: middle;
}

.blank .goods-img{
    width: 90px;
    margin-right: 20px;
}

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

.blank .remove-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../images/goods_remove.png") center center no-repeat;
}

.blank .counter{
    width: 125px;
    height: 30px;
    line-height: 28px;
}

.blank .counter-reduce{
    width: 30px;
}

.blank .counter-value{
    left: 30px;
    box-sizing: border-box;
    width: 65px;
    border-left: 1px solid #c7c7c7;
    border-right: 1px solid #c7c7c7;
    background-color: #fff;
}

.blank .counter-add{
    left: 95px;
    width: 30px;
}


.orders-sumbar{
    color: #8a8a8a;
}

.orders-sumbar .rmb,
.orders-sumbar .orders-sum{
    font-size: 20px;
    color: #000;
}

.checkedallbar{
    margin-left: 15px;
}

.shopcar-btns{
    text-align: right;
}

.shopcar-btn{
    display: inline-block;
    box-sizing: border-box;
    width: 145px;
    height: 40px;
    margin-left: 15px;
    border: 1px solid #000;
    line-height: 38px;
    text-align: center;
    color: #000;
    background-color: #fff;
    transition: all 0.4s;
}

.shopcar-btn.active,
.shopcar-btn:hover{
    color: #fff;
    background-color: #000;
}

.submitorders .blank-head{
    border-bottom: 0;
}

.submitorders .blank-name{
    font-size: 14px;
    font-weight: bold;
}

#payPop{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(0,0,0,0);
    transition: background 0.5s, opacity 0.5s;
}

#payPop.open{
    display: table;
    opacity: 1;
    background-color: rgba(0,0,0,.5);
}

#payPop .pay-popbox{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#payPop .pay-popmain{
    position: relative;
    text-align: left;
    width: 310px;
    margin: 0 auto;
    padding: 160px;
    border-radius: 10px;
    line-height: 30px;
    background-color: #fff;
}

#payPop .pay-pop-close{
    position: absolute;
    top: 30px;
    right: 30px;
}

#payPop .pay-poptitle{
    font-size: 20px;
}

#payPop .pay-popbtn{
    float: left;
    box-sizing: border-box;
    width: 140px;
    height: 45px;
    border: 1px solid #000;
    font-size: 12px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    background-color: #000;
    transition: color 0.5s, background 0.5s;
}

#payPop .pay-popbtn-orderdetails{
    margin-left: 20px;
    color: #333;
    background-color: #fff;
}

#payPop .pay-popbtn:hover{
    color: #fff;
    background-color: #000;
}

a.btn-address{
    font-size: 12px;
    color: #999;
}

.address-item {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    margin-bottom: 30px;
    padding: 0 20px;
    line-height: 60px;
    border: 1px solid #d2d2d2;
    background: url(../images/checkbox_icon.png) -20px center no-repeat;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.address-item-active{
    border-color: #000;
    text-indent: 36px;
    background-position: 20px center;
}

.edit-icons {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100px;
    height: 58px;
    font-size: 0;
    text-indent: 0;
}

.edit-icon{
    display: inline-block;
    width: 40px;
    height: 100%;
    margin-right: 10px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    overflow: hidden;
    cursor: pointer;
}

.edit-icon.edit-pen {
    background: url(../images/editpen_icon.png) -20px center no-repeat;
}

.edit-icon.edit-remove {
    background: url(../images/goods_remove.png) -20px center no-repeat;
}

.address-item.on,
.address-item:hover {
    border-color: #000;
    text-indent: 36px;
    background-position: 20px center;
}

.address-item:hover .edit-icon{
    background-position: center center;
}

/* 修改 鼠标默认手势 */
.login-method a,
.collections-treetlook .banner-carousel a,
.mustbuyitems .grid-item1 a,
.collection .grid-item:nth-child(2) a,
.store .banner a,
.newall .banner a{
    cursor: default;
}

/* 修改 商品筛选条 */
.colTop_filter{
    padding-right: 10px;
    text-align: right;
}
.ct_filter{display: inline-block; width:595px; height:50px; margin:0 auto; font-weight:bold;  }
.ct_filter .ct_f1{ width:70px; font-size:14px; color:#999; line-height:50px;  float:left; }
.ct_filter .ct_f2{ width:50px; margin-left:80px;  line-height:50px; color:#555; font-size:14px; float:left; position:relative; cursor:pointer;z-index:99; }
.ct_filter .ct_f2 span{ position:absolute; top:23px; left:55px; display:block; width:7px; height:4px; background:url("../images/arrow2.png") no-repeat 0 0; transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s; -webkit-transition:0.3s; }
.ct_filter .ct_f2 span.active{background-position: 0 -4px;}
.ct_filter .ct_f3{ width:60px; margin-left:80px;  line-height:50px; color:#555; font-size:14px; float:left; cursor:pointer; }
.ct_filter .ct_f2:hover{ color:#999; }

.ct_filter .ct_f2:hover .filter_list{ display:block;}
.filter_list{ width: 130px; background-color:#fff;   position:absolute; top:5px; left:-40px; display:none; border:solid 1px #ccc;background:#fff;-webkit-box-shadow:0 5px 5px rgba(0,0,0,.1);-moz-box-shadow:0 5px 5px rgba(0,0,0,.1);box-shadow:0 5px 5px rgba(0,0,0,.1);padding: 10px 0; }
.filter_list a{ display:block; line-height:30px; text-align:center; color:#555;  }
.filter_list a:hover{ color:#999;}
.filter_list li{
    height: 40px;
    margin: 0 45px;
    text-align: center;
	font-size: 12px;
}


        .theme-popover-mask{z-index:999;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.8;filter:alpha(opacity=80);display:none}
.theme-popover{z-index:9999;position:fixed;top:40%;left:50%;width:680px;height:486px;margin:-243px 0 0 -340px; display:none; padding:35px 20px; background:#fff;   }

.videoM{width:680px; height:486px; background-color:#fff; padding:1px; margin:0 auto; position:relative;  }


.modal_close{ width:30px; height:30px; background-image:url(../images/close2.png); background-position:0 0; overflow:hidden; position:absolute; right:-30px; top:0; cursor:pointer;  transition:.3s; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s;	}
.modal_close:hover{ background-position:0 -30px; }


.img-loading {
    display: none;
    width: 100%;
    padding-top: 67px;
    line-height: 40px;
    text-align: center;
    background: url(../images/imgloader.gif) center 15px no-repeat;
}



#prevpage {
               position: fixed;
              z-index: 10001;
                bottom:20px;
                right: 0;
                width: 55px;
                height: 52px;
                background: url(../images/rightbar_icon_arrowleft.png) #ddd center center no-repeat;
                transition: background 0.4s;
            }

            #prevpage:hover{
                background-color: #7f7f7f;
            }