@charset "utf-8";
html{overflow-y: scroll;}
body{font-family: Arial,sans-serif,"微軟正黑體";-webkit-text-size-adjust: none;line-height: 1.2;letter-spacing:0.5px;font-size: 16px;}
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.7;}
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 18px 0 18px;margin: auto;}

/*header*/
header *{list-style: none;}
.top > *{margin: 1px 0 10px 0;}
.logo img:last-child{display: inline-block;margin: 0 0px 11px 11px;}

/*nav */
.navTitle a{display:block;}
.navTitle a:hover{text-decoration: none;}
.navTitle > ul > li.mainShow{position: relative;}
.navTitle > ul > li > a, .subNav li a{color: #111111;line-height: 36px;padding: .8rem 1rem;font-weight:  bold;}
/* subNav */
.subNav li{position: relative;background: rgba(0, 51, 102, .8);}
.subNav li:hover{background: #003366;}
.subNav li a{line-height: normal;vertical-align: middle;text-align: left;min-width: 87px;color:  #FFF;font-weight: 100;}
.topNav li{display: inline-block;margin-left: 9px;}
.topNav li a:hover{text-decoration: underline;}

.topNav2{position:absolute;z-index: 999;}
.topNav2 > div{display: inline-block;vertical-align: top;text-align: right;position:  relative;}
.searchNav i.active,.langNav.active i{color: #333;}
.topNav2 > div.instagram i{font-weight:bold;}

.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: #FFF;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: 0;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: #565656;line-height: 1.5;padding: 2px 10px;text-align: left;}
.langNav li a:hover{text-decoration: none; background: #DFDFDF;}



.searchNav i ~ div{position:absolute;right:0;width:200px;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: #ffffff;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: 155px;height: 21px;padding: 2px 10px;border: 1px solid #333;background: rgba(255,255,255,0.7);}
.searchNav .search-input{color: #333;}
.searchNav .search-input:hover{text-decoration: none;color: #d70d18;}

.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;}
.content{min-height: 413px;margin: auto;position:relative;}


.free{border-radius: 5px 0 0 5px;background: #ba0000;position:fixed;right:0;top:30%;z-index: 9999999;padding: 1%;color: #FFE;font-weight: bold;font-size: 19px;letter-spacing: 2px;max-width: 1em;border-right: 5px solid #800000;}
.free:hover{background: #d30000;}

@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{display:none!important;}
.phone{display: block!important; }

/*header*/
.header_bg{height:50px;z-index: 999;position: relative;background: #FFF;width: 100%;}
.header_bg.active{position:fixed;}
header{max-height: 50px;}
.top  .logo img:last-child{margin: 0 0 4px 3px;height:  inherit;}

/*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: #164c8a;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(6px) rotate(45deg);-o-transform: translateY(6px) rotate(45deg);-ms-transform: translateY(6px) rotate(45deg);-moz-transform: translateY(6px) rotate(45deg);-webkit-transform: translateY(6px) rotate(45deg);}
.collapse-button.active .icon-bar:nth-child(2){display: none;}
.collapse-button.active .icon-bar:last-child{transform: translateY(-3px) rotate(-45deg);-o-transform: translateY(-3px) rotate(-45deg);-ms-transform: translateY(-3px) rotate(-45deg);-moz-transform: translateY(-3px) rotate(-45deg);-webkit-transform: translateY(-3px) 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, .topNav li{border-bottom: 1px solid rgba(160, 160, 160, 0.7);}
.navTitle ul li:first-child{border-top: 1px solid rgba(255,255,255,0.7);}
.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: #00A6FF;border-radius: 1px 1px 1px 1px;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);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{width: auto !important;border:0;}
li a.active + .subNav{max-height: 5000px;}
.subNav{max-height: 0;overflow: hidden;}
.subNav li li{background-color: rgb(84, 84, 84);}

.topNav li{margin: 0 -10px 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: 61px;}
.topNav2 > div i{color: #164c8a;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;}

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

}

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

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

}
@media only screen and (max-width: 570px) {
.logo img:last-child{display:none;}
}

@media only screen and (max-width: 414px) {
.topNav2 > div.facebook,.topNav2 > div.twitter,.topNav2 > div.WeChat,.topNav2 > div.instagram{display:none;}
}

@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;}
header{position: relative;margin:0 auto;}

.top{margin-right: 35px;padding-top: 8px;vertical-align: 0;text-align:  center;}
.top > span{margin-left: 17px;}
.top:after,.topShow{position: absolute;padding: 0.6% 0;top: -18px;}
.topShow{width: 732px;right: 0;}
.topNav2{right:0;top: 12px;}
.topNav2 > div{margin-left: 8px;}
.topNav2 > div i{font-size: 22px;color: #085186;cursor:  pointer;}
.topNav2 > div i:hover{color: #00A6FF;}
.collapse-button{display: none;}

.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 i ~ div{margin-top: 8px;}
.langNav .langA ~ ul{top: 30px;}

nav > ul{display: flex;flex-direction: row;justify-content: center;}
.navTitle{position: relative;}
header .navTitle > ul > li.mainShow:first-child:before,header .navTitle > ul > li.mainShow:after{content:"";background:#00A6FF;width:4px;height:14px;display:block;position:absolute;top:50%;-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.navTitle > ul > li.mainShow:first-child:before{left:0;}
.navTitle > ul > li.mainShow:after{right:0;}
.navTitle > ul > li.mainShow > a.menu{display:none;}
.navTitle > ul > li.mainShow > a img:hover{margin-top:-3px;}
header .navTitle > ul > li.mainShow:hover > a:before{content:"";width: 0;height: 0;border-style: solid;border-width: 6px 3.5px 0 3.5px;border-color: #00a6ff transparent transparent transparent;position:  absolute;bottom: 6px;left:  50%;-moz-transform: translate(-50%);-webkit-transform: translate(-50%);-o-transform: translate(-50%);-ms-transform: translate(-50%);transform: translate(-50%);}/*主選單第一層變換效果*/
.navTitle > ul > li > a{position:relative;}
header .navTitle > ul > li.mainShow > a.current:after{content:"";position: absolute;left: 0;bottom: 12px;background: rgba(8, 81, 134, 1);width: 100%;height: 4px;border-radius: 30%;}



/*.subNav*/
.subNav{display: none;position: absolute;top: 62px;left: 0;}
.subNav li{margin-top: 1px;}
.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%;}
.navTitle > ul > li.mainShow.product > .subNav{background: rgba(0, 51, 102, .8);width: 595px;padding: 28px 0 0 28px !important;}
.navTitle > ul > li.mainShow.product > .subNav li{background: transparent;}
.navTitle > ul > li.mainShow.product > .subNav > li{display: inline-block;vertical-align: top;margin: 0 24px 28px 0;}
.navTitle > ul > li.mainShow.product .subNav li a{padding: .5rem 0 0 0;font-size: 14px;width: 121px;}
.navTitle > ul > li.mainShow.product .subNav li a:hover{text-decoration:underline;}
.navTitle > ul > li.mainShow.product > .subNav > li > a{border-bottom: 1px solid;padding: .5rem 0;font-size: 16px;font-weight:  bold;}
.navTitle > ul > li.mainShow.product .subNav li ul.subNav{display:block!important;top: 0;left: 0;height: initial !important;position:  relative;margin-left: 0;}

}
@media print, screen and (min-width:1280px){
header,footer,.content-Box{max-width: 1200px;}
.navTitle{width: calc(100% - 402px);margin: 38px auto 0px auto;}
.navTitle > ul > li.mainShow.product > .subNav{width: 1200px;left: -599px;}
.top, .navTitle{display:inline-block;vertical-align:top;}
nav > ul{justify-content: flex-end;}
}