@charset "utf-8";
/* CSS Document */


@import url(index.css);
@import url(about.css);
@import url(quality.css);
@import url(news.css);
@import url(product.css);
@import url(service.css);
@import url(expert.css);
@import url(add.css);

/* clear */
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}  

/* common ========================
================================== */
body{ font-family:"微軟正黑體",Arial, Helvetica, sans-serif; color:#595959; background:url(../images/all/all-bg.jpg) center top repeat;}

.l-body{ position: relative; width: 100%; min-width: 1200px; height: 100%;}
.wrapper{ position: relative; display: block; margin: 0 auto; width: 1200px; height:auto;}

.header{ position: relative; display: block; width: 100%; height: 92px;}
.header .header-inner{ position: relative; display: block; width: 100%; height: 100%; background: #fff;}
.header .header-inner h1{ position: relative; width:156px; height: 39px; float: left; margin: 20px 0 0 25px; z-index: 5;}
.header .header-inner h1 a{ display: block; width: 100%; height: 100%; background: url(../images/all/logo.jpg) center center no-repeat; text-indent: -9999px; background-size:100% auto; }
.header .header-inner .btn-menuopen{ position: relative; display: none;}/* forphone */




.kv{ position: relative; display: block; width: 1150px; height: 352px; margin: 0 auto; overflow: hidden;}
.kv img{ width: 100%; height: auto;}

.container{ position: relative; display: block; width: 100%; height: auto; /*min-height: 400px;*/ padding: 25px; overflow: hidden;} 
.layout{ position: relative; display: block; width: 100%; height: auto; overflow: hidden; }
.layout .block-trail{ position: absolute; font-size: 14px; font-weight: bold; letter-spacing:1px; right: 0; top:6px; z-index: 5;}
.layout .block-trail a{ color:#595959; text-decoration: none;}
.layout .block-trail a:hover{color:#00b5aa; text-decoration: underline;}
.layout .block-pagetitle{ position: relative; display: block; width: 100%; height: 28px; font-size: 22px; font-weight: bold; border-bottom:#d3d7d6 1px solid; margin-bottom: 20px;}
.layout .block-left{ position: relative; display: block; background: #cde6c8; padding: 25px 0; }
.layout .block-main{ position: relative; display: block; background: #cde6c8; padding: 25px; overflow: hidden; background: url(../images/all/bg2.jpg) top center repeat;}

/* 頁碼 */
.container .block-pagenumber{ position: relative; display: block; width: 100%; height:auto; text-align: center; margin-bottom:20px;  }
.container .block-pagenumber ul{ display: inline-block;}
.container .block-pagenumber ul li{ float: left; font-size: 14px; color:#595959;}
.container .block-pagenumber ul li.totalpage{ margin-right:8px; letter-spacing: 1px;}
.container .block-pagenumber ul li a{ font-size: 14px; color:#595959; letter-spacing:0px; text-decoration:none; padding: 1px 5px 2px 5px;}
.container .block-pagenumber ul li a:hover,.container .block-pagenumber ul li.on a{ color: #fff; background: #90b75c;}
.container .block-pagenumber ul li.btn-arrow a{ display: block; width:19px; height: 19px; background: url(../images/icon/icon-np.jpg) 0 0 no-repeat; text-indent:-9999px; margin: -2px 0px 0 3px;}
.container .block-pagenumber ul li.btn-arrowleft a{ background-position: left top; margin-left: 8px;}
.container .block-pagenumber ul li.btn-arrowright a{ background-position: left bottom;}

.container .btn-alltop{ position: absolute; display: block; width: 45px; height:46px; right:25px; bottom: 50px;}
.container .btn-alltop a{ position: relative; display: block; width: 100%; height: 100%; background: url(../images/all/top.png) 0 0 no-repeat; text-indent: -9999px;}

/* 一欄型頁面 */
.layout-1column .block-main{ width: 100%; }

/* 二欄型頁面 左側窄 */
.layout-2column .block-left{ width: 245px; float: left; z-index: 2;}
.layout-2column .block-left-phone{ position: relative; display: none;}
.layout-2column .block-main{ width: 880px; float: right;}


.footer{ position: relative; display: block; width: 100%; height: 114px; padding:12px 25px 25px 25px;}
.footer-logo{ position: relative; display: block; width:auto; height:auto; margin-bottom: 10px;}
.footer-logo>div{ display: inline-block; width: 219px; height: auto;}
.footer-logo>div img{ width: 100%; height: auto;}
.footer-content{ position: relative; display: inline-block; }
.footer-content p{ font-size: 12px; letter-spacing:0px; color:#595959; margin-top:5px; }
.footer-add{ position:relative; display:block; margin-right:25px;  float:left;}
.footer-tel{ position: relative; display: block; float:left;}
.footer-copyright{ position: absolute; font-size: 12px; letter-spacing: 0px; right: 22px; bottom: 58px;}
.footer-warning{ position: absolute; font-size: 12px; letter-spacing: 0px; right: 22px; bottom: 40px;}
ul.footer-nav{ position:absolute; display: block; width: 560px; height: 25px; right: 24px; top: 3px; margin-top:8px; }
ul.footer-nav > li { float: left;}
ul.footer-nav > li>a { width: auto; height:18px; color: #595959; text-decoration: none; font-size: 14px; line-height: 18px; border-right: 1px solid #bcbcbc; margin: 0; padding: 0 20px; }
ul.footer-nav > li>a:hover {color:#00b5aa;}
ul.footer-nav > li.sharetxt{ width: auto; height:18px; color: #595959; text-decoration: none; font-size: 14px; line-height: 18px; padding: 0 10px 0 20px; }
ul.footer-nav > li.shareicon-fb a{ display:block; width:18px; height:18px; text-indent:-9999px; background:url(../images/icon/icon-social.gif) left top no-repeat; padding: 0; margin-right:7px; }
ul.footer-nav > li.shareicon-line a{ display:block; width:18px; height:18px; text-indent:-9999px; background:url(../images/icon/icon-social.gif) left bottom no-repeat; padding: 0;}


/* navbar ========================
================================== */
.navbar{ position: absolute; width: 1200px; height:auto;  right: 50%; margin-right: -600px; top:0; }
.navbar-inner{ position: relative; width: 1200px; height:auto; margin: 0 auto; right: 0;}
/* menu */
.navbar-inner ul.nav{ position: relative; width:920px; height: 92px; float: right; z-index: 2; margin-right:25px; }
.navbar-inner ul.nav > li{ float: left; list-style:none; }
.navbar-inner ul.nav > li > a{ display: block; width:148px; font-size: 16px; letter-spacing:2px; color:#595959; text-decoration:none; text-align:center; height: 92px; padding-top: 25px;}
.navbar-inner ul.nav > li > a span{ display: block; width: 100%; height: 15px; font-size: 12px; letter-spacing:0px; text-align: center; margin-top:4px; }
.navbar-inner ul.nav > li > a:hover,.navbar-inner ul.nav > li > a.hover{ background-color:#90b75c; color:#FFF;}
.navbar-inner ul.nav > li.btn-menu06 > a{ width: 180px;}

/* submenu */
ul.nav-submenu{ position: relative; display:none; width: 100%; height: auto; background: #90b75c;}
ul.nav-submenu > li > a{ display: block; width: 100%; height: 42px; font-size: 14px; text-align: center; line-height: 42px; color: #fff; text-decoration: none; border-top: #fff 1px dashed; }
ul.nav-submenu > li:first-child > a{ border-top: none;}
ul.nav-submenu > li > a:hover{ background: #b9d887;}
.btn-menuclose{ display: none;}


/* popup */
.popup{ position: fixed; display: none; width: 100%; height: 100%; z-index: 9999;}
.popup .popupbg{ position: absolute; display: block; width: 100%; height: 100%; background: #000; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.popup .popupcontent{ position: absolute; display: block; left: 50%; top:50%; background: #fff;}
.popup .popupcontent p{ font-size: 16px; color: #595959; letter-spacing: 1px; line-height: 24px;}
.popup .popupcontent a.btn-close{ position: absolute; display: block; width: 41px; height: 42px; background: url(../images/icon/icon-x.png) 0 0 no-repeat; text-indent: -9999px; right: 7px; top:-52px;}

/* popup weblink */
.popup-web-link{ display: none;}
.popup-web-link .popupcontent{ width: 774px; height: 600px; margin-left: -387px; margin-top: -300px; padding: 20px 0;}
.popup-web-link .popupcontent .scrollarea{ position: relative; display: block; width: 765px; height: 100%; overflow-y:auto; overflow-x: hidden;}
.popup-web-link .popupcontent .weblink-all{ position: absolute; display: block;  width: 774px; height: auto; top: 0; left: 0; }
.popup-web-link .popupcontent .weblink-all .weblink-area{ position: relative; display: block; width: 100%; height: auto; overflow: hidden; margin-bottom: 20px; }
.popup-web-link .popupcontent .weblink-all .weblink-area h3{ font-size: 16px; font-weight: bold; border-bottom:#b0b0b0 1px solid; padding:5px 0 8px 0; margin: 0 46px 0 30px;}
.popup-web-link .popupcontent .weblink-all .weblink-area ul li{ float: left; margin: 18px 30px;}
.popup-web-link .popupcontent .weblink-all .weblink-area ul li a{ display: block; width: 130px; height: 53px;}

/* 編輯器設定 */
.area-edit { overflow: hidden;}
.area-edit img{ position: relative; display: block; margin-bottom:20px; }
.area-edit big{ font-size: 20px; font-weight: bold; line-height: 30px;  margin-bottom: 20px;}
.area-edit p{ color: #595959; font-size: 14px; line-height: 24px; margin-bottom: 20px; text-align: justify;}
.area-edit p:last-child{ margin-bottom:0; }
.area-edit strong{ font-weight: bold; color:#333;}
.area-edit a{ color:#272727;}
.area-edit a:hover{ color:#00b5aa;}
.area-edit span{ color:#00b5aa; text-decoration: underline;}

#ui-datepicker-div{ z-index: 10!important;}

a.btn-shop { background:url(../images/icon/icon-shop.png) center center no-repeat;  display: block; text-indent: -9999px; width: 45px; height: 141px; position: fixed; z-index: 1; right: 0; bottom: 65%; }
a.btn-overseas { background:url(../images/icon/購物車修護霜.png) center center no-repeat;  background-size: contain; display: block; text-indent: -9999px; width: 150px; height: 150px; position: fixed; z-index: 1; right: 0; bottom: 50%; }

.img-fluid { max-width: 100%; height: auto; }