@charset "utf-8";
/* CSS Document */
pre{ position: fixed; left: 0px; top: 0px; width: 400px; height: 800px; overflow: scroll; z-index: 99999; font-size: 12px }
/** { outline:none; }*/
html { overflow-x: auto; overflow-y: auto; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, body, form, input, button, img, cite, strong, em, table, td, th, hr { padding:0; margin:0; }
ul { list-style:none; }
h1{ font-size:20px; }
h2{ font-size:16px; }
h3{ font-size:12px; font-weight: normal; }
h4{ font-size:12px; font-weight: normal; }
h5{ font-size:12px; font-weight: normal; }
.fs-12{ font-size: 12px; }
img{ border: 0px; }
body{ font-family:"微軟正黑體", "新細明體", "Arial"; }
.body { width: 100%; height: auto; margin-right: auto; margin-left: auto; font-size: 12px; position: relative; color: #333; font-family:"微軟正黑體", "新細明體", "Arial"; color:#333; line-height:1.5; }
hr { border: 0px #BFBFBF solid; border-bottom: 1px #BFBFBF solid; }
table { border-collapse: collapse;}
button ,input{ font-family:"微軟正黑體", "新細明體", "Arial"; color: #555; padding: 0 5px; }
/*button{ width: 60px; height: 30px; font-size: 12px; line-height: 30px; color: #555; }*/
a:link { color: #fff; text-decoration: none; }
a:visited { color: #fff; text-decoration: none; }
a:hover { color: #fff; text-decoration: none; }
a:active { color: #fff; text-decoration: none; }
.page{ font-size: 12px; text-decoration: none; font-weight: bold; color:#FE9113; }
.pagelink{ font-size: 12px; text-decoration: none; font-weight: bold; }
.pagelink a{ text-decoration: none; color:#fff; }
.pagelink a:hover { text-decoration: none; color:#FE9113; }
.pagelink a:visited{ text-decoration: none; color:#fff; }

.placeholder{ color:#bbb; }
.msgBox{ position: absolute; top : 40%; right: 50%; width: 200px; height: auto; line-height: 30px; text-align: center; vertical-align: middle; padding: 5px; margin-left: 100px; margin-top: 25px; border: 2px #ccc solid; border-radius: 5px; background: #fff; z-index: 99999; display: none; }
.tip{
    float: left;
    color: #B20000;
    padding-left: 10px;
}
.fb-like{ width: 72px; height: 20px; }
.hidden-head { display: none; }
.shadow{
    -moz-box-shadow: 0px 0px 3px #aaa;
    -webkit-box-shadow: 0px 0px 3px #aaa;
    box-shadow: 0px 0px 3px #aaa;
    border: 1px #cccccc solid;
}
/*cart*/
#AddCart{ width: 92px; height: 20px; color: #fff; line-height: 20px; text-align: center; cursor: pointer; background: transparent url('../images/btn_brown.jpg') top right no-repeat; margin: 0px 0 0 0px; display: inline-block; }
#AddCart:hover{ color: #fff; }

/*float*/
.floatL{ float: left; }
.floatR{ float: right; }
/*text align*/
.alignL{ text-align: left; }
.alignC{ text-align: center; }
.alignR{ text-align: right; }
/*float*/
.floatL{ float: left; }
.floatR{ float: right; }
/*font size*/
.font_16{ font-size: 16px; }
/*font color*/
.fontCL_01{ color:#BE1D2C; }
/*button*/
.seachBtn{
    float: left;
    width: 80px;
    height: 30px;
    line-height: 30px;
    color: white;
    font-size: 12px;
    letter-spacing: 4px;
    background: url('../images/btn/01.jpg') left center;
    border: 0px;
    border-radius: 0px 2px 2px 0px;
    cursor: pointer;
}
.seachBtn:hover{ background: url('../images/btn/01.jpg') right center; }
.seachBarBtn{ float: left; width:60px; height: 22px; line-height: 20px; color: #fff; text-align: center; background: #B52727; background-image: -webkit-linear-gradient(top,#CA0002,#CA0002,#950B00); border: 1px solid #950B00; border-radius: 2px; cursor: pointer; }
.tabBtn{
    float: left;
    /*width: 74px;*/
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 2px;
    background-color: #f5f5f5;
    color: #444;
    padding: 0 10px;
    margin: 0 10px 10px 10px;
    border: 1px solid #eee;
    cursor: pointer;
}
.tabBtn.on{
    background-color: #eee;
    background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
    border: 1px solid #c6c6c6;
}
.tabBtn:hover{
    background-color: #eee;
    background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
    border: 1px solid #c6c6c6;
}
.fb-login{ width: 48px; height: 18px; background: url(../images/icon/fblogin.gif) no-repeat; cursor: pointer; }
#overlay{ position: absolute; width: 100%; height: 100%; left: -5000px; background: url('../images/bg/fancybox_overlay.png') ; z-index: 999; cursor: pointer; }
#overlay-close{ position: absolute;top: -18px;right: -18px;width: 36px;height: 36px; background: url(../images/icon/fancybox_sprite.png); cursor: pointer;z-index: 8040; }
#overlay-box{ position: absolute; top: 50%; left: 50%; width: 900px; height: 700px; line-height: 34px; text-align: center; background: #fff; border-radius: 5px; margin: -580px 0 0 -470px; padding: 20px; }
#overlay-box.ezship{ top: 170px; margin: 0px 0 0 -470px; }
#overlay-box iframe{ border: 0px; overflow: hidden; }
/*loading*/
#loadingBg{ position: absolute; width: 100%; height: 100%; background: url('../images/bg/fancybox_overlay.png') ; z-index: 999; display: none; }
#loadingBox{ position: fixed; top: 50%; left: 50%; width: 300px; height: auto; line-height: 34px; text-align: center; background: #fff; border-radius: 5px; margin: -100px 0 0 -100px; padding: 20px; }
#loadingIcon{ float: left; width: 34px; height: 34px; background: url('../images/icon/Intersection.gif') center center no-repeat; margin-left: 20px; }
/* reg */
#regBg{ position: absolute; width: 100%; height: 100%; font-size: 12px; background: url('../images/bg/fancybox_overlay.png') ; z-index: 999; }
#regBox{ position: fixed; top: 50%; left: 50%; width: 800px; height: auto; line-height: 34px; text-align: center; background: #fff; border-radius: 5px; margin: -200px 0 0 -400px; padding: 20px; }

/*
.btn_sc{ width: 40px; height: 24px; line-height: 24px; cursor: pointer; }
.btn_buy{ width: 179px; height: 55px; background: url('../images/button/buy.jpg') no-repeat; margin-left: auto; margin-right: auto; }
.btn_buy:hover{  background: url('../images/button/buy.jpg') no-repeat 0px -55px; }
.btn_submit{ width: 80px; height: 40px; background: #fff; border: 1px #ccc solid; border-radius: 10px; cursor: pointer; }
.btn_submit:hover{ color: #fff; background: #0071BC; }
.btn_login{ width: 67px; height: 58px; background: url('../images/button/btn_login.jpg') no-repeat; border: 0px; }
.btn_login:hover{ width: 67px; height: 58px; background: url('../images/button/btn_login.jpg') no-repeat 0px -58px; }
.btn_first{ width: 314px; height: 76px; background: url('../images/button/btn_first.jpg') no-repeat; border: 0px; }
.btn_first:hover{ width: 314px; height: 76px; background: url('../images/button/btn_first.jpg') no-repeat 0px -76px; }
.btn_next{ width: 154px; height: 45px; background: url('../images/button/next.jpg'); border: 0px; cursor: pointer; }
*/

/*grid*/
.tbody{ width: 996px; height: auto; margin-right: auto; margin-left: auto; padding-top: 10px; position: relative; }
.tfoot{ width: 996px; height: auto; margin-right: auto; margin-left: auto; }
.fb_like{ width: 206px; height: 88px; background: url('../images/fb_like.jpg') no-repeat; position: absolute; left: 1000px; top: 40px; padding: 45px 0 0 40px; }
/*input*/
.iptTxt{ float: left; height: 28px; line-height: 28px; vertical-align: middle; padding: 0px 10px; border: 1px #ccc solid; margin-right: 5px; }
.iptRadio{ float: left; height: 28px; vertical-align: middle; margin-right: 5px; }
.iptCheck{ float: left; height: 28px; vertical-align: middle; margin-right: 5px; }
.store-ipt-01{ width: 112px; height: 20px; border: 1px #ccc solid; }
.store-ipt-02{ width: 40px; height: 20px; border: 1px #ccc solid; }
.ipt-text-w20{ width:20px; height:24px; border:1px #d2d2d2 solid; line-height:24px; padding:0 5px; }
.ipt-text-w40{ width:40px; height:24px; text-align: center; border:1px #d2d2d2 solid; line-height:24px; padding:0 5px; }
.ipt-text-w60{ width:60px; height:24px; text-align: center; border:1px #d2d2d2 solid; line-height:24px; padding:0 5px; }
.ipt-text-w80{ width:80px; height:20px; text-align: center; border:1px #d2d2d2 solid; line-height:20px; padding:0 5px; }
.ipt-text-w140{ width:140px; height:20px; border:1px #d2d2d2 solid; line-height:20px; padding:0 5px; }
.ipt-text-w200{ width:200px; height:20px; border:1px #d2d2d2 solid; line-height:20px; padding:0 5px; }
.ipt-text-w240{ width:240px; height:20px; border:1px #d2d2d2 solid; line-height:20px; padding:0 5px; }
.ipt-text-w400{ width:400px; height:20px; border:1px #d2d2d2 solid; line-height:20px; padding:0 5px; }
.ipt-slt-w160{ width:160px; height:34px; line-height: 34px; border:1px #d2d2d2 solid; line-height:34px; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; }
.ipt_floatL{ float: left; }
.ipt_floatR{ float: right; }
.txt-tip{ color: #ff9900; font-size: 20px; font-weight: bold; }
.textarea{ width: 400px; height: 100px; border:1px #d2d2d2 solid; }

.en{ font-family: 'Nunito', 'sans-serif'; }
/*共用*/
.wrapper{
    width: auto;
    height: auto;
    min-width: 320px;
}
.navbar{ height: 48px; background: #4B2B03; margin: 0px; }
.navbar-default .navbar-brand{ width:140px; height:50px; background: url(../img/logo-head.png) center center no-repeat; display: block; }
/*.navbar-default .navbar-nav{ height: 50px; }*/
.navbar-default .navbar-nav>li>a{ font-size:20px; color: #fff; }
.navbar-default .navbar-nav>li>a:hover{ color: #D5061B }
.navbar-default .navbar-nav>li>a>h3{ font-size: 20px; }
.navbar-default .navbar-header .navbar-toggle{ width: 50px; height: 50px; background: url(../img/btn/menu.png) no-repeat; border: 0px; margin: 0px; }

.banner{ position: relative; max-width: 1920px; font-weight: bold; background: url(../img/bg/banner.jpg) center center no-repeat; background-size: cover; margin: 0px auto; }
.banner:before{ content: ""; display: block; padding-top: 800px; }
.banner .main-box{ position: absolute; top: 40px; left: 0px; width: 46.8%; }
.banner .main-box .logo{ width: 240px; height: 240px; background: url(../img/logo.png); background-size: cover; margin: 0px auto 20px auto; }
.banner .main-box .title{ color: #222222; font-size: 30px; text-align: center; margin-bottom: 20px; }
.banner .main-box .subtitle{ height:auto; color: #222222; font-size: 16px; text-align: center; margin-bottom: 20px; }
.banner .main-box .subtitle div{ height: 30px; line-height: 30px; color: #D5061B; margin-top: 10px; }
.banner .main-box .text{ color:#A96B38; border: 1px #A96B38 solid; padding: 5px; margin: 0px auto 20px auto; }
.banner .main-box .tel-btn{ width: 100%; height: 50px; max-width: 300px; font-size: 20px; line-height: 50px; letter-spacing: 5px; text-align: center; color: #fff; background: url(../img/ico/tel_01.png) 20px center no-repeat #4d4d4d; border-radius: 30px; margin: 0px auto 10px auto; display:block; }
.banner .main-box .line-btn{ width: 100%; height: 50px; max-width: 300px; font-size: 20px; line-height: 50px; letter-spacing: 5px; text-align: center; color: #fff; background: url(../img/btn/line.png) no-repeat; border-radius: 30px; margin: 0px auto 10px auto; display:block; }
.banner .main-box .line-btn:hover{ background-position-y: bottom; }
.banner .main-box .buy-btn{ width: 100%; height: 50px; max-width: 300px; font-size: 20px; line-height: 50px; letter-spacing: 5px; text-align: center; color: #fff; background: url(../img/btn/buy-btn.png) no-repeat; border-radius: 30px; margin: 0px auto 10px auto; display:block; }
.banner .main-box .buy-btn:hover{ background-position-y: bottom; }
.banner .main-box .mall-btn{ width: 100%; height: 50px; max-width: 300px; font-size: 20px; line-height: 50px; letter-spacing: 5px; text-align: center; color: #fff; background: url(../img/btn/mall.png) no-repeat; border-radius: 30px; margin: 0px auto 10px auto; display:block; }
.banner .main-box .mall-btn:hover{ background-position-y: bottom; }
.banner .main-box .youtube{ width: 100%; height: 200px; max-width: 300px; margin: 0px auto; }
.banner .info-box{ position: absolute; bottom: 0px; right: 20px; width: 46.8%; height: 270px; }
.banner .info-box .adv-01{ position: relative; width: 100%; height: 270px; }
.banner .info-box .adv-01 li{ position: absolute; width: 130px; height: 130px; background: url(../img/adv_01.png) no-repeat; cursor: pointer; }
.banner .info-box .adv-01 li.a01{ right: 215px; background-position-x: 0px; background-position-y: 0px; }
.banner .info-box .adv-01 li.a02{ right: 65px; background-position-x: -130px; background-position-y: 0px; }
.banner .info-box .adv-01 li.a03{ top: 130px; right: 300px; background-position-x: -260px; background-position-y: 0px; }
.banner .info-box .adv-01 li.a04{ top: 130px; right: 150px; background-position-x: -390px; background-position-y: 0px; }
.banner .info-box .adv-01 li:hover{ background-position-y: bottom; }

.banner .info-box .adv-01-mob{ position: relative; width: 100%; height: 260px; margin: 0px 0px 20px 0px; display:none; }
.banner .info-box .adv-01-mob li{ padding: 5px 0px; }
.banner .info-box .adv-01-mob li i{ position: absolute; width: 130px; height: 130px; background: url(../img/adv_01.png) no-repeat; margin: 0 auto; display: block; cursor: pointer; }
.banner .info-box .adv-01-mob li i.a01{ left: 0px; background-position-x: 0px; background-position-y: 0px; }
.banner .info-box .adv-01-mob li i.a02{ left: 0px; background-position-x: -130px; background-position-y: 0px; }
.banner .info-box .adv-01-mob li i.a03{ left: 0px; background-position-x: -260px; background-position-y: 0px; }
.banner .info-box .adv-01-mob li i.a04{ top: 130px; left: 0px; background-position-x: -390px; background-position-y: 0px; }
.banner .info-box .adv-01-mob li i:hover{ background-position-y: bottom; }

.banner .info-box .adv-02{ position: relative; width: 100%; max-width: 494px; margin: 0px auto; }
.banner .info-box .adv-02 img{ width: 100%; }

.head-bar .navbar-collapse{ background: #333333; }

.section-title{ line-height: 38px; font-size: 30px; text-align: center; margin: 0px auto 40px auto; }
.section-service{ width: 100%; height: 101px; max-width: 314px; margin: 0px auto 20px auto; }
.section-service img{ width:100%; }
.section-border{ height: 50px; line-height: 50px; border-bottom: 3px #D5061B solid; padding: 0px 15px; }
.section-lead{ text-align: center; font-size: 20px; margin-bottom: 48px; }
#scene{ position: relative; max-width: 1440px; padding-top: 72px; margin: 0px auto 72px; }
#scene .section-border{ border-bottom: 3px #D5061B solid; }
#scene #scene-slide { position: relative; }
#scene #scene-slide .scene-slide-inner { position: relative; width: 100%; overflow: hidden; }
#scene #scene-slide ul { height: auto; margin: 0; }
#scene #scene-slide li { width: 1000px; float: left; margin-right: 32px; list-style: none; position: relative; }
#scene #scene-slide li .days {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -48px;
    margin-left: -48px;
    width: 96px;
    height: 96px;
    line-height: 102px;
    background: url(../img/logo.png) center center #ffffff no-repeat;
    background-size: 75%;
    border-radius: 48px;
    text-align: center;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
}
#scene #scene-slide li .days.on {
    /* -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.3, 0.06, 0.28, 1.49); */
    transition: -webkit-transform 0.2s cubic-bezier(0.3, 0.06, 0.28, 1.49);
    transition: transform 0.2s cubic-bezier(0.3, 0.06, 0.28, 1.49);
    transition: transform 0.2s cubic-bezier(0.3, 0.06, 0.28, 1.49), -webkit-transform 0.2s cubic-bezier(0.3, 0.06, 0.28, 1.49);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}
#scene #scene-slide li .days-progress {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -52px;
    margin-left: -52px;
    width: 104px;
    height: 104px; }
#scene #scene-slide li .days-progress svg {
    overflow: visible;
    width: 100%;
    height: 100%; }
#scene #scene-slide li .days-progress svg path {
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    stroke-width: 2; }
#scene #scene-slide li .days-progress.on svg path {
    stroke-dashoffset: 628;
    -webkit-transition: stroke-dashoffset 9.5s linear;
    transition: stroke-dashoffset 9.5s linear; }
#scene #scene-slide li img {
    width: 100%;
    height: auto; }
#scene .scene-nav {
    position: absolute;
    top: 50%;
    margin-top: -23px;
    box-shadow: #999 0px 0px 5px;
    border-radius: 30px;
    cursor: pointer; }
#scene .scene-nav img {
    width: 46px;
    height: auto; }
#scene .scene-nav img:hover { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; }
#scene .scene-nav.prev { display: none; }
@media screen and (max-width: 768px) {
    #scene {
        padding: 36px 12px 0;
        margin-bottom: 15px;
    }
    #scene #scene-slide ul {
        width: 100%;
        height: auto; }
    #scene #scene-slide li {
        width: 100%;
        margin-right: 14px; }
    #scene #scene-slide li .days {
        font-size: 8px;
        margin-top: -30px;
        margin-left: -30px;
        width: 60px;
        height: 60px;
        line-height: 63px;
        border-radius: 30px; }
    #scene #scene-slide li .days-progress {
        margin-top: -32px;
        margin-left: -32px;
        width: 64px;
        height: 64px; }
    #scene #scene-slide li .days-progress svg path {
        stroke-width: 2; }
    #scene #scene-slide li img {
        width: 100%;
        height: auto;
    }
    #scene .scene-nav { margin-top: -12px; }
    #scene .scene-nav img { width: 28px; }
}
#experience{  }
#experience img{ width: 100%; }
#experience .proof{ width: 100%; max-width: 1440px; padding: 10px; margin: 0px auto; }
#experience .proof img{ width: 100%; }

#intro img{ width: 100%; }
#intro .photo{ width: 100%; max-width: 1440px; padding: 10px; margin: 0px auto; }
#intro .photo img{ width: 100%; }

#item .items{ margin-bottom: 20px; overflow: hidden; }
#item .items a{ color: #222222; }
#item .items img{ width: 100%; }
#item .items li{ margin-bottom: 20px; }
#item .items table tr td{ height: 40px; line-height: 20px; padding: 5px; }

#advantage{ position: relative; background: #FFFBF6; padding: 50px 0px 20px 0px; margin-bottom: 40px; }
#advantage .adv-item{ position: relative; width: 100%; max-width: 1200px; height: auto; margin: 0px auto 20px auto; }
#advantage .adv-item table{ width: 100%; }
#advantage .adv-item table td{ align-content: center; text-align: center; }
#advantage .adv-item table .title{ font-size: 24px; font-weight: bold; line-height: 30px; padding: 10px 0px; }
#advantage .adv-item table .desc{ font-size: 16px; padding-bottom: 20px; }
#advantage .adv-item li{  }
#advantage .adv-item .photo{ width: 220px; }
#advantage .adv-item .title{  }
#advantage .adv-item .desc{ height: 104px; vertical-align: top; }
#advantage .compare{ width: 100%; max-width: 1200px; margin: 0px auto 20px auto; }
#advantage .compare .head{ height:40px; line-height: 40px; font-size: 20px; color: #fff; text-align: center; background: #4B2B03;border: 1px #4B2B03 solid;  }
#advantage .compare td{ font-size: 20px; font-weight: bold; color: #4d4d4d; text-align: center; background: #fff; border: 1px #4B2B03 solid; padding: 8px; }
#advantage .compare .bg01{ background: #DFDFDF; }
#advantage .compare .txt-l{ text-align: right; padding: 0px; }
#advantage .compare .txt-c{ text-align: center; padding: 0px; }
#advantage .compare .txt-r{ text-align: left; padding: 0px; }
#advantage .photo{ float: left; width: 50%; padding: 10px; }
#advantage .photo img{ width: 100%; }

#examine{ position: relative; padding-top: 0px; margin-bottom: 20px; }
#examine .photo{ width: 100%; max-width: 900px; padding: 10px; margin: 0px auto; }
#examine .photo.m{ width: 100%; max-width: 600px; padding: 10px; margin: 0px auto; }
#examine .photo img{ width: 100%; }

#issue{ position: relative; padding-top: 0px; margin-bottom: 20px; }
#issue .section-border{ border-bottom: 3px #D5061B solid; }
#issue .issue-dl{ max-width: 1200px; margin: 0px auto 20px auto; }
#issue .issue-dl dt{ font-size: 24px; color: #D5061B; margin-bottom: 5px; }
#issue .issue-dl dt h2{ font-size: 24px; }
#issue .issue-dl dt span{ font-weight: bold; line-height: 36px; border-bottom: 2px #D5061B solid; }
#issue .issue-dl dd{ font-size: 24px; }
#issue .buy-btn{ width: 100%; height: 50px; font-size: 24px; font-weight: bold; line-height: 50px; letter-spacing: 5px; text-align: center; color: #fff; background: #D5061B; border-radius: 5px; margin: 0px auto 20px auto; display:block; }

#comments{ position: relative; padding-top: 0px; margin-bottom: 0px; }

#recommend{ position: relative; background: #f0f5ed; padding: 50px 0px 20px 0px; margin-bottom: 20px; }
#recommend .section-border{ border-bottom: 3px #ff9900 solid; }
#recommend .rec-item{  }
#recommend .rec-item li{ float: left; padding: 10px; }
#recommend .rec-item li table{ width: 100%; }
#recommend .rec-item .photo{ align-content: center; vertical-align: middle; }
#recommend .rec-item .photo img{ width: 100%; }
#recommend .rec-item .title{ font-size: 16px; height: 46px; line-height: 20px; text-align: center; vertical-align: top; padding: 5px 0px; overflow: hidden; }

#contact{ position: relative; padding-top: 40px; margin-bottom: 20px; }
#contact .section-border{ border-bottom: 3px #A96B38 solid; }
#contact .form{ width: 100%; max-width: 500px; height: auto; margin: 0px auto; }
#contact .form th{ padding: 5px; font-size: 16px; text-align: right; }
#contact .form td{ padding: 5px; }
#contact .form .table{ width: 100%; max-width: 500px; height: auto; margin: 0px auto; }
#contact .form .table li{ width: 100%; display: inline-block; padding: 5px 0px; }
#contact .form .table .form-th{ height: 34px; line-height: 34px; font-size: 16px; text-align: right; font-weight: bold; }
#contact .form .table .form-td{ height: auto; line-height: 34px; }
#contact .form .table .form-btn{ width: 100%; height: 34px; font-size: 16px; line-height: 34px; letter-spacing: 5px; text-align: center; color: #fff; border-radius: 5px; padding: 0px 15px; margin: 10px; border: 0px; }
#contact .form .table .form-btn.reset{ background: #4d4d4d; }
#contact .form .table .form-btn.submit{ background: #ff9900; }
#contact .form .table .form-btn:hover{ background: #c9302c; }

#newsletter{ position: relative; min-height: 400px; padding-top: 40px; margin-bottom: 20px; }
#newsletter .section-border{ border-bottom: 3px #A96B38 solid; }
#newsletter .form{ width: 100%; max-width: 500px; height: auto; margin: 0px auto; }
#newsletter .form th{ padding: 5px; font-size: 16px; text-align: right; }
#newsletter .form td{ padding: 5px; }
#newsletter .form .table{ width: 100%; max-width: 500px; height: auto; margin: 0px auto; }
#newsletter .form .table li{ width: 100%; display: inline-block; padding: 5px 0px; }
#newsletter .form .table .form-th{ height: 34px; line-height: 34px; font-size: 16px; text-align: right; font-weight: bold; }
#newsletter .form .table .form-td{ height: auto; line-height: 34px; }
#newsletter .form .table .form-btn{ width: 100%; height: 34px; font-size: 16px; line-height: 34px; letter-spacing: 5px; text-align: center; color: #fff; border-radius: 5px; padding: 0px 15px; margin: 10px; border: 0px; }
#newsletter .form .table .form-btn.reset{ background: #4d4d4d; }
#newsletter .form .table .form-btn.submit{ background: #ff9900; }
#newsletter .form .table .form-btn:hover{ background: #c9302c; }
/*#newsletter .form .table .radio-center{ width: 160px; margin: 0px auto; }*/
#newsletter .form .table .radio-center{ width: auto; padding-left: 50%; margin-left: -76px; }

#order{ position: relative; min-height: 400px; padding-top: 40px; margin-bottom: 20px; }
#order .section-border{ border-bottom: 3px #A96B38 solid; }
#order .form{ width: 100%; max-width: 500px; height: auto; margin: 0px auto; }
#order .form th{ padding: 5px; font-size: 16px; border: 1px #cccccc solid; background: #ebebeb; }
#order .form td{ padding: 5px; font-size: 16px; border: 1px #cccccc solid; }
#order .form .table{ width: 100%; max-width: 500px; height: auto; margin: 0px auto; }
#order .form .table li{ width: 100%; display: inline-block; padding: 5px 0px; }
#order .form .table .form-th{ height: 34px; line-height: 34px; font-size: 16px; text-align: right; font-weight: bold; }
#order .form .table .form-td{ height: auto; line-height: 34px; }
#order .form .table .form-tip{ text-align: center; font-size: 20px; }
#order .form .table .form-btn{ width: 100%; height: 34px; font-size: 16px; font-weight: bold; line-height: 34px; letter-spacing: 5px; text-align: center; color: #fff; border-radius: 5px; padding: 0px 15px; margin: 10px; border: 0px; }
#order .form .table .form-btn.reset{ background: #4d4d4d; }
#order .form .table .form-btn.submit{ background: #ff9900; }
#order .form .table .form-btn:hover{ background: #c9302c; }
#order .item{ border: 0px #ccc solid; padding: 3px; border-radius: 5px; background: #aaa; margin-bottom: 20px; }
#order .item li{ font-weight: bold; box-shadow: 1px 0 0 0 #ccc, 0 1px 0 0 #ccc, 1px 1px 0 0 #ccc, 1px 0 0 0 #ccc inset, 0 1px 0 0 #ccc inset; }
#order .item .item-th{ height: 40px; line-height: 30px; border: 0px #ccc solid; padding: 5px; overflow: hidden; background: #ebebeb; text-align: center; }
#order .item .item-td{ height: 40px; line-height: 30px; border: 0px #ccc solid; padding: 5px; overflow: hidden; background: #ffffff; }
#order .item .item-label{ width: 100%; height: 30px; max-width: 100px; color: #fff; line-height: 30px; text-align: center; border-radius: 10px; }
#order .item .after{ clear: both; }

#oform{ position: relative; min-height: 400px; padding-top: 40px; margin-bottom: 20px; }
#oform .section-border{ border-bottom: 3px #A96B38 solid; }
#oform .step{ position: relative; width: 300px; height: 74px; margin: 0px auto 20px auto; }
#oform .step .step-line{ position: absolute; top: 52px; width: 50px; height: 2px; border-bottom: 2px #4D4D4D solid; }
#oform .step .step-line.l01{ left: 76px; }
#oform .step .step-line.l02{ left: 176px; }
#oform .form{ width: 100%; max-width: 1000px; height: auto; margin: 0px auto; }
#oform .form .section{ position: relative; }
#oform .form .section dt{ height: 28px; padding-left: 24px; font-size: 20px; background: url(../img/ico/01.png) 2px center no-repeat; margin-bottom: 10px; }
#oform .form .section dt span{ display: inline-block; }
#oform .form .section .ditto{ padding-left: 10px; }
#oform .form .section .ditto input[type="checkbox"]{ width: 20px; height: 20px; display: inline-block; margin: 0px 0px 0px 0px; vertical-align: middle; }
#oform .form .section dd{ margin-bottom: 10px; }
#oform .form .section .btn-payway{ height: 40px; line-height: 30px; font-size:16px; font-weight: bold; }
#oform .form .section .btn-payway.active{ color: #fff; background: #449d44; }
#oform .form .section .btn-gender{ font-weight: bold; }
#oform .form .section .btn-gender.active{ color: #fff; background: #449d44; }
#oform .form .section .btn-radio{ font-weight: bold; }
#oform .form .section .btn-radio.active{ color: #fff; background: #449d44; }
#oform .form .section .bootstrap-select .text{ font-size: 16px; font-weight: bold; }

#oform .form .compare{ width: 100%; max-width: 1200px; margin: 0px auto 20px auto; }
#oform .form .compare .head{ height:30px; line-height: 30px; font-size: 16px; color: #fff; text-align: center; background: #A96B38;border: 1px #A96B38 solid;  }
#oform .form .compare td{ font-size: 16px; font-weight: bold; color: #4d4d4d; background: #fff; border: 1px #A96B38 solid; padding: 8px; }
#oform .form .compare .bg01{ background: #EADCD1; }
#oform .form .compare .txt-l{ text-align: right; padding: 0px; }
#oform .form .compare .txt-c{ text-align: center; padding: 0px; }
#oform .form .compare .txt-r{ text-align: left; padding: 0px; }

#oform .form .program{ display:block; clear: both; overflow: hidden; }
#oform .form .program .radio{ width: 260px; height: 260px; background: #4d4d4d; color: #fff; padding: 20px; margin: 10px auto 30px auto; border-radius: 4px; text-align: center; cursor: pointer; }
#oform .form .program .radio.on{ background: #A96B38; }
#oform .form .program .radio .title{ height: 40px; font-size: 24px; }
#oform .form .program .radio .intro{ min-height: 70px; max-height:100px; line-height: 30px; font-size: 16px; border: 1px #fff solid; padding: 4px; overflow: hidden; }
#oform .form .program .radio .qty{ height: 30px; line-height: 30px; font-size: 24px; }
#oform .form .program .radio .item{ height: 50px; line-height: 50px; font-size: 16px; }
#oform .form .program .radio .item .item-txt{ height: 50px; padding: 0px 5px; }
#oform .form .program .radio .item .item-txt.big{ height: 50px; font-size: 20px; }
#oform .form .program .radio .button{ height: 30px; line-height: 30px; font-size: 20px; border-bottom: 1px #fff solid; margin: 0px; }

#oform .form .program .goods{ font-size:20px; font-weight: bold; background: #4d4d4d; color: #fff; line-height: 20px; display: -webkit-box; padding: 10px; margin: 10px auto 10px auto; border-radius: 4px; }
#oform .form .program .goods.on{ background: #A96B38; }
#oform .form .program .goods .img{ width:80px; height:80px; }
#oform .form .program .goods .box{ width: 100%;     display: -webkit-box; }
#oform .form .program .goods .name{ width:50%; min-height: 30px; height: auto; line-height: 24px; -webkit-box-flex: 1; border: 0px #ccc solid; padding: 3px 0px; overflow: hidden; }
#oform .form .program .goods .dom-program{ width: auto; height: auto; padding-left: 10px; display: block; overflow: hidden; }
#oform .form .program .goods .dom-program select{ width: 100%; height:30px; color: #000; border: 0px #ccc solid; }
#oform .form .program .goods .dom-amt{ float: left; width: 100%; height: 30px; }
#oform .form .program .goods .dom-qty{ float: right; width: auto; height: 30px; }
/*#oform .form .program .goods .sel .qty{ width:100%; height: 100%; }*/
#oform .form .program .goods .dom-qty .btn{ float: left; width: 30px; height: 30px; border: 1px #ccc solid; border-radius: 0px; font-weight: bold; font-size: 20px; }
#oform .form .program .goods .dom-qty .btn.up{ background: url(../../common/img/ico/plus-24-01.png) center center no-repeat #ddd; }
#oform .form .program .goods .dom-qty .btn.dn{ background: url(../../common/img/ico/minus-24-01.png) center center no-repeat #ddd; }
#oform .form .program .goods .dom-qty .ipt.qty{ float: left; width: 40px; height: 30px; text-align:center; font-size:20px; font-weight: bold; border: 1px #ccc solid; border-radius: 0px; }
#oform .form .program .goods .dom-price{ float: right; width: 90px; height: 30px; line-height: 30px; font-weight: bold; text-align: center; }
#oform .form .program .goods .dom-total{ float: right; width: 90px; height: 30px; line-height: 30px; font-weight: bold; text-align: center; }

#oform .form th{ padding: 5px; font-size: 16px; text-align: right; }
#oform .form td{ padding: 5px; }
#oform .form .table{ width: 100%; max-width: 1000px; height: auto; margin: 0px auto; }
#oform .form .table li{ width: 100%; display: inline-block; padding: 5px 0px; }
#oform .form .table th{ border: 0px; }
#oform .form .table td{ border: 0px; }
#oform .form .table .form-th{ height: 34px; line-height: 34px; font-size: 16px; text-align: right; font-weight: bold; }
#oform .form .table .form-td{ height: auto; line-height: 34px; }
#oform .form .table .form-btn{ width: 100%; height: 34px; font-size: 16px; font-weight: bold; line-height: 34px; letter-spacing: 5px; text-align: center; color: #fff; border-radius: 5px; padding: 0px 15px; margin: 5px 0px; border: 0px; display: block; }
#oform .form .table .form-btn.reset{ background: #4d4d4d; }
#oform .form .table .form-btn.submit{ background: #ff9900; }
#oform .form .table .form-btn:hover{ background: #c9302c; }
#oform .form .table.success{ border: 1px #bbb solid; }
#oform .form .table.success .form-th{ border: 1px #bbb solid; background: #ebebeb; }
#oform .form .table.success .form-td{ border: 1px #bbb solid; }
#oform .form .ul-num{ padding: 0px; margin: 40px; }
#oform .form .ul-num a{ color: #A96B38; font-weight: bold; }
#oform .form .ul-num li{ list-style-type: decimal-leading-zero; margin: 10px 0px; }
#oform .form .buy-btn{ width: 100%; height: 50px; line-height: 50px; font-size: 20px; font-weight: bold; letter-spacing: 10px; text-align: center; border-radius: 5px; background: #B52727; display: block; }

#footer{ border-top: 2px #D5061B solid; padding-bottom: 10px; }
#footer .logo{ float: left; width:140px; height:50px; line-height: 50px; background: url(../img/logo.png) center center no-repeat; background-size: contain; display: block; }
#footer .info{ float: right; width: auto; height: 50px; font-size: 12px; line-height: 50px; text-align: right; }
#footer .info a{ color: #666; }
#footer .info .txt{ float: left; width: auto; height: 50px; line-height: 50px; font-size: 12px; padding: 0px 15px; }
/*#footer .copyright{ float: right; width: auto; height: 50px; font-size: 12px; line-height: 50px; text-align: right; }*/

.body{
    max-width: 1440px;
    height: auto;
    overflow: hidden;
}
@media only screen and (max-width: 1024px) {
    .banner:before{ padding-top: 0px; }
    /*.banner{ padding-bottom: 400px; }*/
    .banner .main-box{ position: static; width: 100%; height: auto; top: 20px; margin-top: 0px; margin-bottom: 20px; }
    .banner .info-box{ position: static; width: 100%; height: auto; top: 20px; margin-top: 0px; }
    .banner .info-box .adv-01{ height: auto; margin: 20px 0px; overflow: hidden; display: none; }
    .banner .info-box .adv-01 li{ position: static; float: left; }
    .banner .info-box .adv-01-mob{ height: auto; display: block; }
    .banner .info-box .adv-01-mob li i{ position: static; }
    #advantage .compare .txt-l{ text-align: center; padding: 0px; }
    #advantage .compare .txt-c{ text-align: center; padding: 0px; }
    #advantage .compare .txt-r{ text-align: center; padding: 0px; }

}
@media only screen and (max-width: 767px) {
    .banner{ background: url(../img/bg/banner.m.30.jpg) center center no-repeat; background-size: cover; }
    .head-bar-body .menu{ display: none; }
    .head-bar-body .menu-btn{ display: block; }
    .navbar-default .navbar-collapse{ background: #333333; }
    #advantage .photo{ float: left; width: 100%; padding: 10px; }
    #contact .form .table .form-th{ text-align: left; }
    #newsletter .form .table .form-th{ text-align: left; }

    #oform .form .program .goods .box{ display: block; }
    #oform .form .program .goods .name{ width:100%; padding-bottom: 10px; }
    #oform .form .program .goods .program{ width: 100%; }
    #order .form .table .form-th{ text-align: left; }
    #oform .form .table .form-td textarea{ height: 60px; }
    #oform .form .table .form-td .push-up-10{ margin-top: 10px; }
    .form-indent{ display: none; }
    #footer .logo{ float: none; width:140px; margin: 0 auto; }
    #footer .info{ float: none; width:100%; height:auto; line-height: 16px; color:#666; text-align: center; }
    #footer .info .txt{ width: 100%; height: 30px; line-height: 30px; text-align: center; }
    #footer .info .txt.tel{ font-size: 16px; font-weight: bold; }
    /*#footer .copyright{ float: none; width:100%; height:auto; line-height: 16px; color:#666; text-align: center; }*/
}
@media only screen and (max-width: 420px) {
    #advantage .compare .ftd{ width: 10px; }
    #advantage .compare .head{ font-size: 16px; }
    #advantage .compare td{ font-size: 16px; }
    #recommend .rec-item .title{ font-size: 14px; }
    #oform .form .section .btn-payway{ font-size: 14px; }
    #oform .form .table .form-th{ display: none; }
    #oform .form .table .form-td textarea{ height: 60px; margin-top: 10px; }
    /*#oform .form .program .goods{ font-size: 16px; }*/
    #oform .form .program .goods .dom-program{ padding-left: 0px; }
    #oform .form .program .goods .dom-price{ width: 80px; }
    #oform .form .program .goods .dom-total{ width: 90px; }
    #footer .info .txt.copyright{ width:100%; height:auto; line-height: 16px; color:#666; text-align: center;  padding-top: 10px; }
}