/* @file  main.css
* @description  seeed.cc public style
* @author seeed-int 2015-12-04
*/

/*
 * font face
 */

/*ArialRoundedBold*/
@font-face {
    font-family: "ArialRoundedBold";
    src: url("../css/Arial_Rounded_Bold.ttf");
}

/*OpenSans*/
@font-face {
    font-family: "OpenSans";
    src: url("../css/OpenSans-Regular.ttf");
}

/*OpenSans-Light*/
@font-face {
    font-family: "OpenSans-Light";
    src: url("../css/OpenSans-Light.ttf");
}
@font-face {
    font-family: "OpenSans-LightItalic";
    src: url("../css/OpenSans-LightItalic.ttf");
}

/*OpenSans-Bold*/
@font-face {
    font-family: "OpenSans-Bold";
    src: url("../css/OpenSans-Bold.ttf");
}
@font-face {
    font-family: "OpenSans-BoldItalic";
    src: url("../css/OpenSans-BoldItalic.ttf");
}

/*OpenSans-ExtraBold*/
@font-face {
    font-family: "OpenSans-ExtraBold";
    src: url("../css/OpenSans-ExtraBold.ttf");
}
@font-face {
    font-family: "OpenSans-ExtraBoldItalic";
    src: url("../css/OpenSans-ExtraBoldItalic.ttf");
}

/*OpenSans-ExtraBold*/
/*@font-face {
    font-family: "OpenSans-Semibold";
    src: url("../css/OpenSans-Semibold.ttf");
}*/
@font-face {
    font-family: "OpenSans-SemiboldItalic";
    src: url("../css/OpenSans-SemiboldItalic.ttf");
}
@font-face {font-family: 'iconfont';
    src: url('/css/iconfoot/fonts/iconfont.eot'); /* IE9*/
    src: url('/css/iconfoot/fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/iconfoot/fonts/iconfont.woff') format('woff'), /* chrome、firefox */
    url('/css/iconfoot/fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('/css/iconfoot/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

body {
    font-family: "OpenSans", Helvetica, Arial,sans-serif,Arial;
    font-weight: normal;
    color: #404040;
    min-height: 100%;
    height: 100%;
    /*overflow: hidden;*/
    background: #edf0f2
}


.iconfont {
  font-family:"iconfont" !important;
  font-size: 20px;
  margin-right:8px;
  transform: translateY(3px);
  display: inline-block;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-step4:before { content: "\e61b"; }
.icon-step3:before { content: "\e61a"; }
.icon-step2:before { content: "\e619"; }
.icon-step1:before { content: "\e618"; }
.icon-15days:before { content: "\e617"; }
.icon-contactus:before { content: "\e612"; }
.icon-helpcenter:before { content: "\e611"; }
.icon-deliveryinfomation:before { content: "\e610"; }
.icon-shape:before { content: "\e61f"; }
.icon-shape1:before { content: "\e61e"; }
.icon-shape2:before { content: "\e61d"; }
.icon-certified:before { content: "\e61c"; }

/* a */
a { color: #4a4a4a; text-decoration: none;}
a:hover { }
a:active { }
a:visited { }

.center { margin-left: auto; margin-right: auto;}
.com-width { width: 1200px;}
.c-9e { color: #9e9e9e;}
.f12 { font-size: 12px;}
.f14 { font-size: 14px;}
.fl { float: left;}
.fr { float: right;}
.rel { position: relative;}
.p0 { padding: 0px!important;}
img {display: block;vertical-align: middle;}
.hide {display: none}

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}




#footer { padding-top: 40px;    background: #fff; clear: both; }
/* footer outer*/
.footer--outer { width: 100%;}

/* footer body*/
.footer--body {}

/* footer-tips*/
.be-footer{height: 4px;width: 100%;background-color: #f7f7f7;}
.footer__tips--outer { width: 100%; /*background-color: #d6d7d7;*/    border-bottom: 1px solid #f7f7f7;}
.footer__tips {
    display: table;
    flex-flow: row wrap;
    height: 60px;
    line-height: 60px;
}
.footer__tips .rightBorder:after{
    content: '';
    width: 1px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 15px;
    background: #f7f7f7;
}

.footer__tips .item {
    width: 33%;
    text-align: center;
    /*border-left: 1px solid #fff;
    border-right: 1px solid #fff;*/
    display: table-cell;
    position: relative;
}
.footer__tips .item:hover { color: #09694f;}
.footer__tips .item-center {
    border-left: none;
    border-right: none;
}
.footer__tips .ico {
    position: relative;
    top: 12px;
    display: inline-block;
    margin-right: 10px;
    width: 28px;
    height: 30px;
    background-image: url(../img/ico.png);
    background-repeat: no-repeat;
}
.footer__tips .ico-1 { width: 35px; background-position: 0 0;}
.footer__tips .ico-2 { background-position: -40px 0;}
.footer__tips .ico-3 { background-position: -78px 0;}

/* footer info*/
.footer--info {
    display: table;
    padding: 40px 0;
}
.footer--info .block {
    display: table-cell;
    line-height: 28px;
    padding-left: 60px;
}
.footer--info .block .last-block {
    border-right: 1px solid #f7f7f7;
}
.footer--info .block a { color: #9e9e9e; display: inline-block;}
.footer--info .block a:hover { color: #4a4a4a;}
.footer--info .title { color: #00936D; font-size: 16px;}
.footer--info .search { flex: 1.3;}
.footer--info .sign-text { width: 300px;line-height: 20px;}
.footer--info .sign { margin: 10px 0 20px 0; display: flex;}
.footer--info .sign-input {
    width: 240px;
    padding: 0 8px;
    color: #333;
    height: 30px;
    border: 1px solid #B5B7B6;
    height: 40px;
    line-height: 40px;
}
.footer--info .btn-sign {
    color: #fff;
    line-height: 42px;
    display: inline-block;
    width: 42px;
    height: 42px;
    cursor: pointer;
    background: #00936D;
    text-align: center;
    font-size: 12px;
}
.footer--info .sns__ico {
    margin-right: 10px;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}
.footer--info .foot-sns-li {
    display: table-cell;
}
.footer--info .social a{
    color: #fff;
}
.footer--info .social a:hover{
    color: #fff;
}
.footer--info .social a .fa{
  margin-top: 8px;
}
.footer--info .sns--google-plus {
    background: #FF3523;
}
.footer--info .sns--google-plus:hover {
    background: #CC2A1C ;
}
.footer--info .sns--instagram {
    background: #205A83;
}
.footer--info .sns--instagram:hover {
    background: #194868;
}
.footer--info .sns--facebook {
    background: #3B599C;
}
.footer--info .sns--facebook:hover {
    background: #253863;
}
.footer--info .sns--twitter {
    background: #00B1EA;
}
.footer--info .sns--twitter:hover {
    background: #008DBB;
}
/* footer copyright*/
.footer--copyright {
    line-height: 50px;
    color: #9C9C9C;
    height: 50px;
    background: #f7f7f7;
    width: 100%;
    clear: both;
}

.footer--payment-list {
    color: #9e9e9e;
    line-height: 50px;
    border-top: 1px solid #f7f7f7;
}
/*.footer--payment-list .com-width {
    padding: 0 118px;
}*/
.footer--payment-list .title {
    padding-left: 60px;
}
.footer--payment-list .item {
    float: left;
    /*margin-right: 10px;*/
    /*margin-top: 15px;*/
    /*width: 80px;*/
    height: 20px;
}
.footer--payment-list .paypal{
    /*width: 70px;*/
    margin: 14px 6px 0 15px;
    /*background: url('//statics3.seeedstudio.com/assets/img/bazaar/svg_payment_paypal.svg') 0 0 no-repeat;*/
}
.footer--payment-list .paypal img { width: 70px;}
.footer--payment-list .visa{
    margin-top: 14px;
    margin-right: 12px;
    /*background: url('//statics3.seeedstudio.com/assets/img/bazaar/svg_payment_visa.svg') 0 0 no-repeat;*/
}
.footer--payment-list .visa img { width: 48px;}
.footer--payment-list .mastercard{
    /*width: 40px;*/
    margin-top: 15px;
    /*background: url('//statics3.seeedstudio.com/assets/img/bazaar/svg_payment_mastercard.svg') 0 0 no-repeat;*/
}
.footer--payment-list .mastercard img { width: 30px;}
.footer--payment-list .macfee { margin-right: 120px;}
.footer--payment-list .macfee img {
    width: 70px;
    margin-top: 12px;
    margin-left: 20px;
}
/*显示所有组合*/
.show-all-comb { margin-top: 40px; border-top: 1px dotted #f5f5f5;}
.show-all-comb .btn {
    width: 290px;
    margin-top: -20px;
}



.header{
    position: absolute;
    top: 0px;
    height: 60px;
    width: 100%;
    background: #fff;
    max-width: 1200px;
}

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
#mce-EMAIL{
    float: left;
    width: 240px;
    padding: 0 8px;
    color: #333;
    height: 30px;
    border: 1px solid #B5B7B6;
    height: 42px;
    line-height: 42px;
    font-size:14px;
}
#mc-embedded-subscribe {
    color: #fff;
    float: left;
    width: 42px;
    height: 42px;
    cursor: pointer;
    border: none;
    background: #00936D;
    text-align: center;
    font-size: 12px;
}




/**
 * 头部
 */

.nav-shadow { box-shadow: 0 1px 1px #efefef;}
.main-nav { height: 60px; background-color: #fff;}
.main-nav .item {
    padding: 0 32px;
    font-size: 14px;
    color: #3C3C3C;
    /*text-transform: uppercase;*/
    font-weight: bold;
    border-top: 3px solid transparent;
/*    border-left: 1px solid #f6f6f6;*/
    transition: color 0.2s;
}

.header .logo { margin-top: 8px;}
.header .logo img { width: 202px; }


.main-nav .item:hover { color: #979898;}
.main-nav .active { color: #979898;}

.user-act { line-height: 57px;font-family: OpenSans-Semibold, Helvetica, Arial, sans-serif;}

.nav-layer:hover .child-nav {
    display: block;
}
.nav-layer:hover .op-layer {
    display: block;
}
.nav-layer:hover .item {
    box-shadow: 0 0 5px #9f9f9f;
}
.child-nav {
    display: none;
    position: absolute;
/*    left: 0;*/
    top: 60px;
    z-index: 10;
    font-size: 14px;
    background-color: #fff;
    box-shadow: 0 0 5px #9f9f9f;
    padding: 10px 0;
}
.nav-layer .list-1 {
    width: 400px;
    left: 311px;
}
.list-2 { width: 141px; left: 554px;}

.nav-layer .op-layer {
    display: none;
    position: absolute;
    width: 100%;
    height: 6px;
    left: 0;
    bottom: -2px;
    z-index: 15;
    background-color: #fff;
}

.header-sales-ico {
    position: absolute;
    top: 12px;
    right: 14px;
}

.child-nav li {
    float: left;
}
.child-nav li a {
    display: block;
    width: 184px;
    padding: 0 24px;
    line-height: 30px;
    font-size: 14px;
}
.child-nav li a:hover {
    color: #979898;
}