@charset "utf-8";

body{font-family: Arial,sans-serif,"微軟正黑體";-webkit-text-size-adjust: none;line-height: 1.2;letter-spacing:0.5px;font-size: 16px;}
img {max-width:100%;height:auto;vertical-align: bottom;border: none;}
.editor a {word-wrap: break-word;word-break: break-all;}/*圖文編輯器連結不破版*/
:-ms-input-placeholder { opacity: 0.6;}/*ie input預設文字顏色與其它瀏覽器同步*/
.table_scroll { overflow-x: auto; }
table {border-collapse: collapse;border-spacing: 0px;}
ol,ul,li {padding:0;margin:0;}
nav ul,nav ul li{list-style: none;}
button,input[type="text"],input[type="search"],input[type="tel"],input[type="number"],input[type="phone"],input[type="number"],input[type="date"],input [type="email"],  input [type="button"],select,textarea {outline:none;-moz-outline: none;-webkit-appearance: none;appearance:none;-moz-appearance:none;-webkit-appearance:none;border-radius:0;}
select::-ms-expand { display: none; }/*清除IE下拉箭頭*/
html { overflow-y: scroll; }/*網站固定左邊有直向捲轉*/
input,a:active, a:focus{ outline:none;}/*讓清除藍框框*/
.clear {display: block;clear: both;visibility: hidden;line-height: 0;height: 0;zoom: 1;}/*清除float效果*/
p{margin-top: 0;}
a{text-decoration: none;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
a:hover {text-decoration: underline;}
[class*=dib-]{display: inline-block;vertical-align: top;}
.dib-mr{margin-right: 30px;}
.dib-ml{margin-left: 30px;}
.phone {display:none !important;}
.pc {display:block !important;}
.right {float:right;}
.left {float:left;}
.animate{-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
header,footer,.content-Box{max-width: 1200px;}
.content-Box{padding: 15px;margin: auto;}


/*.nav*/
#header_bg  {}
header *{list-style: none;}
header{z-index: 999;position: relative;z-index: 100;margin:0 auto;}
#top{margin-right: 12px;padding-top: 18px;vertical-align: 0;}
#top > *{margin: 2px 0 10px 0;}
#top > span{margin-left: 17px;}
#top:after,.topShow{position: absolute;padding: 0.6% 0;top: -18px;}
.topShow{right: 0;border-right: 1px solid #d8d8d8;border-left: 1px solid #d8d8d8;padding: 0 7px;}
.topShow #topNav > li > a {color: #525252;font-size: 14px;}
#topNav * #langNav:before{color: #333333;font-family: 'Microsoft JhengHei';font-size: 12px;}

/*nav */
#nav_bg {margin-top:-8px;}
.navTitle{width: calc(100% - 222px - 18px);margin: 30px auto 0px auto;display: block;position: relative;}
.navTitle a:hover   {text-decoration: none;}
#top, .navTitle{display:inline-block;vertical-align:top;}
nav > ul{display: flex;justify-content: flex-end;flex-direction: row;}
.navTitle > ul > li.mainShow    {/*width: calc(100% / 8);*/box-sizing: border-box;float: left;position: relative;margin-top: 25px;margin-bottom: 20px;min-width: 16%;}
.navTitle > ul > li.mainShow:hover,.navTitle > ul > li.mainShow.current{border-bottom: 7px solid #C5E0B4; margin-bottom: 0px;}/*主選單第一層變換效果*/
.navTitle > ul > li.mainShow > a img:hover  {margin-top:-3px;}
.navTitle > ul > li.mainShow > a.menu   {display:none;}
.navTitle > ul > li > a, .subNav li a{display: block;color: #555555;text-align: center;border-right: 1px solid #d0d0d0;line-height: 36px; padding: 0 10px; font-size: 15px;}


/* subNav */
.mainShow:hover > .subNav{display: block;}
.subNav > li:hover > .subNav{display: block;}
.subNav{display: none;position: absolute;top: 55px;z-index: 200;}
.subNav li{position: relative;box-sizing: border-box;background: RGBA(34, 94, 79, 0.8); margin-top: 1px;border-radius: 5px;cursor:pointer;}
.subNav li:hover{background: RGBA(197, 224, 180, 0.8);}
.subNav li a{line-height: normal;vertical-align: middle;text-align: left;margin-left: 1em;min-width: 260px;padding: 15px 7px;color: #fff;border-right: 0;}
.subNav li a:before{content: ' ';width: 0;height: 100%;display: inline-block;vertical-align: middle;}
.subNav li a i{display: none;color: #333 !important;}
.subNav li ul.subNav{top: -1px; left: 1px;margin-left: 100%;}
.subNav li a.menu{display:none;}



#topNav li{display: inline-block;margin: 0 9px;}
#topNav li.phone{display:none;}
#topNav li a:hover{text-decoration: underline;color: #b4abff;
    text-decoration: none;}


#topNav2{position: absolute;right: 96px;top: 12px;z-index: 100;}
#topNav2 > div{display: inline-block;vertical-align: top;text-align: right;margin-left: 3px;}
#topNav2 > div:first-child{
    margin-left:0;
    border-right: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
    padding: 0 7px;
    background: #FFF;
    }

#langNav{color:#7C7C71;z-index: 100;box-sizing: border-box;max-height: 22px;overflow: hidden;position: relative;}
#langNav.active{max-height: 300px;border-top: 1px solid #d8d8d8;border-bottom: 1px solid #d8d8d8;}
#langNav .langA,#langNav li{background-color: #FFF;line-height: 1;}
#langNav .langA{padding: 3px 32px 3px 10px;position: relative;font-size: 14px;cursor: pointer;color: #525252;}
#langNav .langA:after{content:"";width: 0;height: 0;border-style: solid;border-width: 8px 5px 0 5px;border-color: #636363 transparent transparent transparent;position: absolute;right: 7px;top: 6px;text-decoration: none;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
#langNav .langA:hover {color: #b4abff;}
#langNav.active .langA:after{-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform: rotate(180deg);}
#langNav ul{position: absolute;}
#langNav.active ul{position: relative;}
#langNav li a{display: block;color: #565656;line-height: 1.5;padding: 2px 10px;text-align: left;}
#langNav li a:hover{text-decoration: none; background: #DFDFDF;}
#langNav li:last-child{}



#searchNav input[name=kw]{display: inline-block;vertical-align: middle;color: #333;width: 170px;height: 21px;padding: 2px 10px;border:1px solid #085186;background: rgba(255,255,255,0.7);}
#searchNav .search-input{color: #085186;}
#searchNav .search-input:hover{text-decoration: none;opacity: .7;}
#searchNav .phone{display:block!important;margin-right: 44px;}
#searchNav .phone ~ .pc{display:block!important;background: #b1b1b1;border-radius: 5px;overflow:hidden;margin-top: 18px;padding: 0 10px;height:0;opacity:0;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;position: absolute;right: 0;width: 220px;}
#searchNav .phone:hover {color: #b4abff;}
#searchNav .phone.active ~ .pc{opacity:1;height: 30px;padding: 10px;}
#searchNav input[name=kw]{height:25px;line-height: 25px;}
#searchNav input[type=submit]{height: 25px;line-height: 25px;}

#cart {position:relative;}
#cart a{font-size: 28px;color: #085186;}
#cart a:hover{opacity:.7;}
#cart a .number{position:absolute;font-size: 12px;font-weight: bold;background: #e60000;color: #FFF;border-radius: 50%;padding: 2px 2px;right: -8px;top: -3px;min-width: 15px;text-align: center;}


/*content*/
#content_bg{width: 100%;position:relative;}
#content{min-height: 413px;margin:15px auto ;position:relative;}



@media print, screen and (max-width:1280px){
input, textarea,select,select:focus,textarea:focus,input:focus{font-size: initial;}/*手機瀏覽文字欄位不放大*/
header,footer,.content-Box{max-width: 960px;}
#top {position: absolute; top: -5px; left: 0; width: 200px;}
.navTitle {width: 100%; margin: 50px auto 0px auto;}
.topShow {top: -38px;}
}
@media print, screen and (max-width: 999px){
.inline-block.marginRight{margin-right: 0px;}
.right,.left{float:none;}
.phone{display:block !important;}
.pc{display:none !important;}

/*header*/
#header_bg{background-image: none;height:50px;z-index: 999;position: relative;background: #FFF;width: 100%;}
#header_bg.active{position:fixed;}
header{max-height: 50px;}
header.active{position: fixed;}

#top,#top:after{box-sizing: border-box;height: 50px;padding: 10px;}
header,#top,#top:after{width: 100%;}
#top{position: relative;margin-right: 0;background: rgba(255, 255, 255, .9); top: 0;}
#top #logo img{height: 100%;}
#top > a + span{display: none;}

#nav_bg{padding-left:0;background: #164A75;}

.navTitle{max-height: 0;overflow: hidden;width: 250px;height: auto;margin-top: 0;background:none;visibility: visible;transform: translate3d(-100%, 0, 0);z-index: 10;}
.navTitle.active{max-height: 3000px;visibility: visible;background: white;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.navTitle a{width: 100%;display: block;z-index: 1;}
nav > ul{height: calc(100vh - 50px);overflow-y: scroll;display: inherit;width: 100%;}
.navTitle > ul > li, #topNav > li{width: 100% !important;float: none !important;border-right: none !important;border-left: none !important;height: auto !important;}
.navTitle ul li, #topNav li{border-bottom: 1px solid rgba(160, 160, 160, 0.7);}
.navTitle ul li{width: 100% !important;display: block;}
.navTitle ul li:first-child{border-top: 1px solid rgba(255,255,255,0.7);}
.navTitle > ul > li > a,#topNav > li > a{display: inline-block;text-align: left;padding: 10px !important;height: 50px !important;/* line-height: 0 !important; */box-sizing: border-box !important;vertical-align: baseline !important;border-radius:0px;width: calc(100%);}
.navTitle > ul > li > a:before,#topNav > li > a:before{/* content: ' '; */display: inline-block;width: 0;height: 80%;vertical-align: baseline;}
.navTitle > ul li a.menu:before,.navTitle > ul li a.menu:after{content: ' ';background-color: #62A696;border-radius: 1px 1px 1px 1px;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);display: block;height: 2px;width: 18px;margin: 2px 0;right: 9px;position: absolute;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
.navTitle > ul li a.menu:before {top: 20px;
    transform: translateY(2px) rotate(90deg);
    -o-transform: translateY(2px) rotate(90deg);
    -ms-transform: translateY(2px) rotate(90deg);
    -moz-transform: translateY(2px) rotate(90deg);
    -webkit-transform: translateY(2px) rotate(90deg);}
.navTitle > ul li a.menu.active:before {
    transform: translateY(2px) rotate(0deg);
    -o-transform: translateY(2px) rotate(0deg);
    -ms-transform: translateY(2px) rotate(0deg);
    -moz-transform: translateY(2px) rotate(0deg);
    -webkit-transform: translateY(2px) rotate(0deg);}
.navTitle > ul li a.menu:after{top:22px;}
.navTitle > ul li a.menu.active:after{opacity:0}
.navTitle > ul > li.mainShow.current{ border-bottom: none; background: #24B9EC; }
.navTitle > ul li.current a.menu:before, .navTitle > ul li.current a.menu:after{ background: #fff; box-shadow: none; }
.navTitle > ul > li.mainShow.current a{ color: #fff; }
.navTitle > ul > li.mainShow.current .subNav a{ color: #6b6565; }
#topNav > li{width: auto !important;border:0;}
#topNav li.phone{display:inline-block;}
li a.active + .subNav{max-height: 5000px;margin-left: inherit;}
.subNav{position: relative;top: auto !important;left: auto !important;display: block;max-height: 0;overflow: hidden;width:100%;}

.subNav li{margin-top: 0px;border-radius: 0px;    background: rgb(243, 240, 240);padding-right: 0px;padding-left: 0px;white-space: inherit;}
.subNav li a{text-align: left;max-width: calc(100% - 61px);}
.subNav li a i{display: inline-block;margin: 0 10px;}
.subNav li li{background-color: rgb(255, 255, 255);}
.subNav li li a{margin-left:8px;}
.subNav li ul.subNav{margin-left: inherit;margin-bottom: -6px;}





.topShow{position: relative;top: auto;left: auto;width: 100%;height: auto;padding: 0;margin: 0;}
#topNav{position: relative;top: auto;left: auto;right: auto;text-align: center;}
#topNav li{margin: 15px 17px 0 0; font-size: 15px;color: #FFF;}
#topNav li:first-child{margin-left: 8px;}
#topNav li a{color: #FFF;font-size: 13px;letter-spacing: 0.01em;width: inherit;}

#topNav2{right: 67px;}
#topNav2 > div{margin-left:5px;}
#topNav2 > div:first-child {border: 0;background: none;}
#langNav .langA, #searchNav .phone,#cart a{color: #7d7d7d;font-size: 28px;    margin-right: 2px;}
#langNav{max-height: 32px;}
#langNav .langA{background: none;border: 0;text-align: right;padding: inherit;margin-bottom: 5px;}
#langNav .langA:after{border: 0;}
#langNav li{border-right: 1px solid #7d7d7d;border-left: 1px solid #7d7d7d;}
#langNav li:first-child{border-top: 1px solid #7d7d7d;}
#langNav li:last-child{border-bottom: 1px solid #7d7d7d;}



.navTitle > ul > li.mainShow{border-top: 0; border-radius: 0px; padding: 0; margin: 0;background: #d4d4d4;}
.navTitle > ul > li > a, .subNav li a{margin-left: 0;color: #6b6565;}
.navTitle > ul > li.mainShow:first-child{border-top: 1px solid #B5B5AC;}
.navTitle > ul > li.mainShow > a.menu{display: inline-block; width: 52px; height: 55px; float: right;}
.navTitle > ul > li.mainShow:first-child{border-top: 1px solid #B5B5AC;}
.navTitle ul li.mainShow a.menu{display: inline-block;width: 25px;height: 17px;float: right;z-index: 2;position: absolute;top:0;right: 5px;min-width: inherit;}
.navTitle ul li.mainShow li a.menu{top: -4px;}
.navTitle > ul > li > a, .subNav li a {border-right: 0px;}
#menuBg{position: fixed;top: 0;right: 0;width: 0;height: 0;background: rgba(0, 0, 0, 0.6);content: '';opacity: 0;z-index: -1;-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;}
#menuBg.active{width: 100%;height: 100%;opacity: 1;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}


/*content*/
#header_bg.active ~ #content_bg{padding-top: 50px;}
#content{margin:0 auto;padding: 30px;}


}

@media only screen and (max-width: 768px) {

}
@media only screen and (max-width: 640px) {

}
@media only screen and (max-width: 570px) {

}

@media only screen and (max-width: 414px) {

}

@media only screen and (max-width: 320px) {

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {/*only ie10 up*/

header .animate,aside .animate{transition: all 0s;}
header a,aside a{transition: all 0s;}

}