@charset "utf-8";
html{overflow-y: scroll;}
body{font-family: 'Noto Sans TC',"微軟正黑體";-webkit-text-size-adjust: none;line-height: 1.2;letter-spacing:0.5px;font-size: 16px;overflow: hidden;}
figure{margin: 0;}
figure img{width: 100%;height: 100%;object-fit:cover;}
body,a{color: #333;}
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: 0;}
ol,ul,li{padding:0;margin:0;}
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下拉箭頭*/
input,a:active,a:focus{ outline:none;}/*讓清除藍框框*/
.clear{display: block;clear: both;visibility: hidden;line-height: 0;height: 0;zoom: 1;}/*清除float效果*/
h1, h2, h3, h4, h5, h6 {display: block; margin: 0 auto 0.5rem auto; line-height: 1.25; }
p{line-height: 1.6;}
a{text-decoration: none;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
.animate{-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
.content-Box{padding: 18px;margin: auto;}

/*header*/
header *{list-style: none;}
.header_bg {box-shadow: 4px 4px 12px 4px rgba(0, 0, 0, 0.1);}
.top > *{margin: 0px 0 10px 0;}
/*產品下面123標籤頁按鈕樣式開始*/
.page {text-align: center;}
.page a {margin-left: 5px;margin-right:5px;
    -moz-box-shadow:inset 0px 0px 0px 0px #a4e271;
    -webkit-box-shadow:inset 0px 0px 0px 0px #a4e271;
    box-shadow:inset 0px 0px 0px 0px #a4e271;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3bac6c), color-stop(1, #77a809));
    background:-moz-linear-gradient(top, #3bac6c 5%, #9bd4b4 100%);
    background:-webkit-linear-gradient(top, #3bac6c 5%, #9bd4b4 100%);
    background:-o-linear-gradient(top, #3bac6c 5%, #9bd4b4 100%);
    background:-ms-linear-gradient(top, #3bac6c 5%, #9bd4b4 100%);
    background:linear-gradient(to bottom, #3bac6c 5%, #9bd4b4 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3bac6c', endColorstr='#9bd4b4',GradientType=0);
    background-color:#3bac6c;
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
    border-radius:11px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:9px 10px;
    text-decoration:none;
    text-shadow:0px 1px 0px #528009;}
.page a:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9bd4b4), color-stop(1, #3bac6c));
    background:-moz-linear-gradient(top,#9bd4b4 5%,#3bac6c 100%);
    background:-webkit-linear-gradient(top, #9bd4b4 5%, #3bac6c 100%);
    background:-o-linear-gradient(top,#9bd4b4 5%, #3bac6c 100%);
    background:-ms-linear-gradient(top, #9bd4b4 5%, #3bac6c 100%);
    background:linear-gradient(to bottom,#9bd4b4 5%,#3bac6c 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9bd4b4', endColorstr='#3bac6c',GradientType=0);
    background-color:#9bd4b4;
}
.page a:active {
    position:relative;
    top:1px;
}
/*產品下面123標籤頁按鈕樣式結束*/

/*nav */
.navTitle a{display:block;}
.navTitle a:hover{text-decoration: none;}
.navTitle > ul li.mainShow{position: relative;}
.navTitle > ul > li.mainShow:hover > a{color: #41b600;}
.navTitle > ul > li.mainShow > a:before{content: "";-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
.navTitle > ul > li > a, .subNav li a,.topNav > li > a{color: #005491;line-height: 36px;padding: .8rem .9rem;font-weight: bold;}
.mobileshow {display: none;}
/* subNav */
.topNav .subNav{top: 35px;}
.subNav li{position: relative;font-size: 15px;}
.subNav > li:hover > a{color: #41b600;}
.subNav > li > .subNav > li {width: 265px;}
.subNav > li > a{margin-top:-6px;margin-bottom: -6px;}
.subNav > li > .subNav > li > a{margin-top:-6px;margin-bottom: -6px;}
.subNav li a{line-height: normal;vertical-align: middle;text-align: left;min-width: 176px;}
.topNav li{display: inline-block;}

.topNav2{position:absolute;z-index: 999;}
.topNav2 > div{display: inline-block; vertical-align: top;text-align: right;position:  relative;margin-right: -1px;}
.searchNav i.active{color: #5fb330;}
.langNav.active i{color: #005491;}

.langNav{color:#7C7C71;cursor: pointer;}
.langNav.active{max-height: 300px;}
.langNav .langA div, .langNav .langA ~ ul li{border-left: 1px solid #d8d8d8;border-right: 1px solid #d8d8d8;background-color: #005491;line-height: 1;}
.langNav .langA div{border-top: 1px solid #7C7C71;padding: 3px 32px 3px 10px;position: relative;font-size: 14px;}
.langNav .langA div: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.active .langA div:after{-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform: rotate(180deg);}
.langNav .langA ~ ul{position: absolute;right: -1px;overflow:  hidden;width: 111px;max-height: 0px;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
.langNav.active  .langA ~ ul{max-height: 500px;}
.langNav .langA ~ ul li:first-child{border-top: 1px solid #d8d8d8;}
.langNav .langA ~ ul li:last-child{border-bottom: 1px solid #d8d8d8;}
.langNav li a{display: block;color: #ffffff;line-height: 1.5;padding: 2px 12px;text-align: left;}
.langNav li a:hover{text-decoration: none;background: #0c72bb;}


.searchNav i ~ div{position:absolute;right: -1px;width: 218px;overflow: hidden;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;background: #005491;border: 1px solid #d8d8d8;}
.searchNav i.active ~ div{opacity: 1;height: 22px;padding: 10px;}
.searchNav input[name=kw]{display: inline-block;vertical-align: middle;color: #333;width: calc(100% - 45px);height: 21px;padding: 2px 10px;border: 0;background: rgba(255,255,255,0.8);margin:0 8px 0 0;}
.searchNav .search-input{color: #fff;}
.searchNav .search-input:hover{text-decoration: none;color: #9ed6ff;}

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


/*content*/
.content_bg{width: 100%;position:relative;overflow: hidden;}
.content{margin: auto;position:relative;background: #FFF;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);padding: 28px;}

.mobile_search{position: absolute;top: -3px;right: 0;display: none!important;}

@media print, screen and (max-width:1280px){

}
@media print, screen and (max-width: 999px){
.container {padding-top: constant(safe-area-inset-top);padding-right: constant(safe-area-inset-right);padding-bottom: constant(safe-area-inset-bottom);padding-left: constant(safe-area-inset-left);}/*iphoneX*/
.pc, .searchNav{display:none!important;}
.phone, .mobile_search{display: block!important;}

.topNav2{position:absolute;z-index: 9999;}

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

.logo > span:last-child{display:none;}

/*collapse-button*/
.collapse-button{position: absolute;right: 18px;top: 13px;background-repeat: repeat-x;color: #FFFFFF;cursor: pointer;-webkit-box-sizing: border-box;}
.collapse-button:hover, .collapse-button:focus{background-image: none;color: #FFF;}
.collapse-button .icon-bar{background-color: #005491;display: block;height: 4px;width: 28px;margin: 5px 0;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;border-radius: 15px;}
.collapse-button.active .icon-bar:first-child{transform: translateY(7px) rotate(45deg);-o-transform: translateY(7px) rotate(45deg);-ms-transform: translateY(7px) rotate(45deg);-moz-transform: translateY(7px) rotate(45deg);-webkit-transform: translateY(7px) rotate(45deg);}
.collapse-button.active .icon-bar:nth-child(2){display: none;}
.collapse-button.active .icon-bar:last-child{transform: translateY(-2px) rotate(-45deg);-o-transform: translateY(-2px) rotate(-45deg);-ms-transform: translateY(-2px) rotate(-45deg);-moz-transform: translateY(-2px) rotate(-45deg);-webkit-transform: translateY(-2px) rotate(-45deg);}

.topNav2,.collapse-button{top: 10px;}
.top,.top:after{box-sizing: border-box;height: 50px;padding: 10px 18px;}
header,.top,.top:after{width: 100%;}
.top{position: relative;margin-right: 0;}
.top .logo img{max-width:100px;height: 100%;}
.top > a + span{display: none;}

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

.navTitle{max-height: 0;overflow: hidden;width: 250px;visibility: visible;transform: translate3d(-100%, 0, 0);}
.navTitle.active{max-height: 3000px;visibility: visible;background: white;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
nav > ul{height: calc(100vh - 50px);overflow-y: scroll;-webkit-overflow-scrolling:touch;}
.navTitle > ul > li > a,.topNav > li > a{padding: 10px !important;}
.navTitle > ul li a.menu:before,.navTitle > ul li a.menu:after{content:'';background-color: #005491;border-radius: 1px 1px 1px 1px;display: block;height: 3px;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;border-radius: 15px;}
.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;}
.topNav > li:first-child{border-top:0;}
.topNav > li{width: auto !important;border:0;}
.topNav > li.mainShow .subNav li{width: 100%;}
.topNav > li.mainShow .subNav{margin-bottom: -3px;}
li a.active + .subNav{max-height: 5000px;}
.subNav{max-height: 0;overflow: hidden;}
.subNav li{background: rgb(246, 246, 246);}
.subNav li li{background-color: rgb(237, 237, 237);}
.subNav li li li{background-color: rgb(216, 216, 216);}



.topNav2{right: 61px;}
.topNav2 > div i{color: #005491;font-size: 23px;margin: 3px 3px 0 0;}

.langNav .langA ~ ul{top: 40px;}
.langNav .langA div:first-child{display: none;}/*當pc語系是Language時使用；上div下i*/

.searchNav input[name=kw]{height: 23px;line-height: 23px;}
.searchNav input[type=submit]{height: 25px;line-height: 25px;}
.searchNav i ~ div{margin-top: 13px;}

.navTitle > ul > li > a, .subNav li a{margin-left: 0;}
.navTitle ul li.mainShow a.menu{width: 28px;height: 38px;z-index: 2;position: absolute;top: 0;right: 5px;}
.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;}

.topNav2 .sitemap {display:none;}
.topNav2 .langNav.animate{display: none;}
.mobileshow {display: block;}
.mobileshow a{display: block;color: #fff!important; background:#005491;line-height: 2;padding: 0;text-align: left; padding-left: 10px;}
.mobileshow:last-child a {color: #005491!important; background:#fff;}
.topNav2 > div:last-child {background: #015591;padding: 6px 10px; border-radius: 4px;}
.mobile_search form input {background: #CCDDE9;max-width: 140px;height: 25px;color: #000; font-size: 16px; border: 1px solid #dedede; margin: 0!important; padding: 0!important;}
.mobile_search form a {padding: 8px;}
.mobile_search form a img {width: 17px;height: 17px; margin-bottom: 4px;}

/*content*/
.header_bg.active ~ .content_bg{padding-top: 50px;}
.content{margin:0 auto;padding: 28px 18px;width: calc(100% - 36px);}

}

@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;}
}

@media print, screen and (min-width:320px){

}
@media print, screen and (min-width:360px){

}
@media print, screen and (min-width:414px){

}
@media print, screen and (min-width:570px){

}
@media print, screen and (min-width:768px){

}
@media print, screen and (min-width:999px){
header,footer,.content-Box{max-width: 960px;}
.phone {display:none!important;}
.pc {display:block!important;}
.right {float:right;}
.left {float:left;}

/*header*/
.header_bg {position: relative;z-index: 999;background: rgba(255, 255, 255, .9);}
header{position: relative;margin:0 auto;display: flex;justify-content: space-between;flex-direction: row;}

.logo{display:flex;color:#005491;align-items: center;}
.logo > span:last-child{max-width: 170px;display:block;font-weight: 800;margin-left: 10px;}
.logo span span:first-child{font-size: 25px;}
.logo span span:last-child{font-size:14px;}

.topNav > li > a{background:#5fb330;color:#FFF;padding: 10px 16px;font-size: 13px;line-height: inherit;font-weight: 100;}
.topNav > li > a:hover{background: #7cc254;}
.topNav .subNav li{background: rgb(95, 179, 48);}
.topNav .subNav li > a{min-width: 67px;font-size: 13px;padding: .7em .9em;font-weight: 100;}
.topNav .subNav li > a:hover{color:#FFF;}
.top{padding-top: 18px;}
.top > span{margin-left: 17px;}
.top:after,.topShow{position: absolute;padding: 0.6% 0;top: -40px;}
.topShow{width: 328px;right: 0;}
.topNav2{right:0;top: 0;}
.topNav2 > div > a{background: #005491;padding: 10px 16px;margin-right: -2px;display: block;}
.topNav2 > div > a:hover, .searchNav:hover,.langNav:hover{background: #2775af;}
.topNav2 > div,.topNav2 > div a,.topNav2 > div i{font-size: 13px;color: #ffffff;cursor:  pointer;}
.collapse-button{display: none;}
.sitemap a i,.langNav .langA i{display:none;}
.sitemap a:before{content:"網站地圖";}
.langNav{background: #005491;}
.langNav .langA{position:relative;margin-right: 13px;padding: 10px 35px 10px 35px;}    
.langNav .langA:before{content:"語言";}
.langNav .langA:after{content:"";width: 0;height: 0;border-style: solid;border-width: 10px 5px 0 5px;border-color: #ffffff transparent transparent transparent;position:absolute;right: 0;top: 13px;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;transition: all 0.5s;-moz-transition: all 0.5s;}
.langNav.active .langA:after{-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
.langNav .langA div:first-child{border-bottom:1px solid #7C7C71;margin-bottom: -1px;}/*當pc語系是Language時使用；上div下i*/
.langNav .langA div ~ i{display: none;}/*當pc語系是Language時使用；上div下i*/

.searchNav{background: #005491;margin: 0 -2px;}
.topNav2 > div.searchNav{width:42px;}
.topNav2 > div.searchNav i{font-size: 17px;padding: 9px 12px;}
.langNav .langA ~ ul{top: 35px;}

nav > ul{display: flex;justify-content: space-between;flex-direction: row;}
.navTitle{width: calc(100% - 262px);margin: 35px auto 0px auto;position: relative;}
.navTitle > ul li.mainShow a.menu{display:none;}
.navTitle > ul > li.mainShow > a img:hover{margin-top:-3px;}
nav.navTitle > ul > li.mainShow:hover > a:before{content: "";background: #5fb330;width: 100%;height: 5px;position: absolute;bottom: 0;left: 0;}/*主選單第一層變換效果*/

/*.subNav*/
.subNav{display: none;position: absolute;top: 62px;left: 0;}
.subNav li{background: rgb(255, 255, 255);margin-bottom: -1px;border: 1px solid rgba(188, 188, 188, .5);}
.subNav li a.menu{display:none;}
.subNav li a:before{content:'';width: 0;height: 100%;display: inline-block;vertical-align: middle;}
.subNav li ul.subNav{top:-1px;left: 1px;margin-left: 100%;}

.content{min-height: 413px;}
}
@media print, screen and (min-width:1280px){
header,footer,.content-Box{max-width: 1200px;}
.navTitle{width: calc(100% - 320px);}
.top{margin-right: 58px;}
}