@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
@import url('/css/SeoJump.css');
@import url('/css/contentBuilder.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans:wght@400;700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Noto+Serif+TC:wght@200;300;400;500;600&family=Noto+Serif:wght@400;700&display=swap');
@font-face { font-family: "Trajan Pro 3"; src: url("/fonts/Trajan/trajan.eot"); src: url("/fonts/Trajan/trajan.eot?#iefix") format("embedded-opentype"), url("/fonts/Trajan/trajan.woff2") format("woff2"), url("/fonts/Trajan/trajan.woff") format("woff"), url("/fonts/Trajan/trajan.ttf") format("truetype"), url("/fonts/Trajan/trajan.svg#Trajan Pro 3") format("svg"); }

* { margin: 0; padding: 0; }
*:focus { outline: none; }

body { margin: 0; }
body{-webkit-text-size-adjust:100%;}
body ::selection { background: #339fc9; text-shadow: none; color: #fff; }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: rgba(255, 255, 255, .75); }
body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .4); border-radius: 50px; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, span, font, strong, b, a, i{ text-align: left; vertical-align: middle; margin: 0; padding: 0; line-height: 170%; border-width: 0; font-family: 'Montserrat', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-size: 16px; word-wrap: break-word; word-break: break-word; text-align: justify; text-justify: inter-ideograph; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

:before , :after { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

ul , ol { list-style: none; }

fieldset { border: 0; }

input , button , select , textarea { border-radius: 0; box-shadow: none; outline: none; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { background: url(/images/38/icon-triangle.png) no-repeat calc(100% - 10px) 50%; }

/* img */
img { max-width: 100%; }
.img_box_cover img {width: 100%;object-fit: cover;}
.img_box_contain img { width: 100%; object-fit: contain; }
.scale_box .img_box_cover { overflow: hidden; }
.scale_box .img_box_cover img { -webkit-transform: scale(1); transform: scale(1); }

a , a:link , a:visited , a:hover { display: inline-block; line-height: 100%; text-decoration: none; white-space: pre-wrap;  }

.text-clamp , a.text-clamp { overflow: hidden; height: 27px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }

.nowrap_box { font-size: 0; }

/* a.photo */
a.photo , .bgBox { overflow: hidden; background: no-repeat 50% / cover; display: block; }

/* fancybox */
[class^="fancybox-"] , [class^="fancybox-"] * , .slick-track , .fa , .fas , .fa:before , .fas:before , .fa:after , .fas:after , .trans_none_box { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

/* slick-slider */
.wrapper .slick-slider { margin-bottom: 0; }

/* webBox */
.webBox { position: relative; overflow: hidden; width: 100%; }
.webBox .pageh1 { position: absolute; top: 0; z-index: 1; }
.webBox .wrapper { position: relative; background: #fff; z-index: 2; }

/* workframe */
.workframe {position: relative;margin: 0 auto;width: min(1440px,90%);font-size: 0;z-index: 1;}

/* relat_box */
.relat_box , .relat_box >* { position: relative; }
.fixed_box { position: fixed; }
.abso_box { position: absolute; width: 100%; height: 100%; z-index: 4; }
.relat_box .abso_tag { position: absolute; width: 100%; height: 100%; z-index: 5; }

/* Sitemap */
#Sitemap #jsonUL a { display: block; font-size: 20px; font-weight: 400; color: #2d2d2e; }
#Sitemap #jsonUL a * { display: inline-block; line-height: 170%; font-size: 16px; vertical-align: top; }

header{position:fixed;width:100%;top:0;left:0;z-index:999;background:white;background-size:cover;padding:10px 0;border-bottom:1px #ccc solid}
header:before{content:"";background:#4fa1c9;height:100%;width:230px;position:absolute;right:0;top:0}
header .topconant{padding:13px 0;display:flex;justify-content:center;background:#2baacf}
header.headerfixed .topconant{padding:8px 0}
header.headerfixed .topconant a{font-size:25px;font-weight:600}
header .topconant .nowrap_box{width:1590px;display:flex;justify-content:flex-end}
header .topconant a{color:white;font-size:30px;font-weight:700}
header >.nowrap_box{margin:0 40px 0 auto;width:min(1740px,90%);max-width:100%}
header #cis img{width:200px;object-fit:contain}
header #menubtn{position:fixed;width:25px;height:20px;display:inline-block;top:35px;right:30px}
header #menubtn span{position:absolute;width:100%;height:2px;background:#ffffff;display:block;top:0;right:0}
header #menubtn[data-type="1"] span:nth-child(2){top:calc(50% - 1px)}
header #menubtn[data-type="1"] span:nth-child(3){top:calc(100% - 1px)}
header #menubtn[data-type="1"] span{transition:transform .4s cubic-bezier(.215,.61,.355,1),opacity .4s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1)}
header #menubtn[data-type="2"] span{background:#454545;transition:.4s cubic-bezier(.645,.045,.355,1)}
header #menubtn[data-type="2"] span:nth-child(1){top:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
header #menubtn[data-type="2"] span:nth-child(2){opacity:0}
header #menubtn[data-type="2"] span:nth-child(3){top:50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
header #webmenu .menu_box >ul >li >p a{padding:0 15px;display:block;font-size:18px;color:#2f3436}
header #webmenu .menu_box >ul >li:hover >p a{color:#4fa1c9}
header #webmenu .menu_box >ul >li .menu_body .subOption li{position:relative;overflow:hidden}
header #webmenu .menu_box >ul >li .menu_body .subOption li >div a{padding:15px;display:block;color:#252525}
header #webmenu .contact_box{padding:50px 20px}
header #webmenu .contact_box font a{color:#4fa1c9;vertical-align:baseline}
header #webmenu .contact_box .community{margin:30px 0;padding-top:30px;border-top:1px #e0e0e0 solid;text-align:center}
header #webmenu .contact_box .community a{margin:0 15px;width:40px;height:40px;background:#f3f3f3;border-radius:50%;display:inline-block;text-align:center;line-height:38px;color:#999}
header #menubg{position:fixed;width:100vw;height:100vh;background:rgb(0 0 0 / .4);display:none;top:0;left:0;opacity:998}
header #rightBox{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0}
header #rightBox .contentboxJ{display:flex}
header #rightBox .contentboxJ .lineJtop{display:flex;flex-direction:column;align-items:center;position:absolute;top:-20px;left:-160px}
header #rightBox .contentboxJ .lineJtop a{display:flex;flex-direction:column;align-items:center;padding:20px 20px}
header #rightBox .contentboxJ .lineJtop a:hover img{opacity:.8}
header #rightBox .contentboxJ .lineJtop a:hover span,header #rightBox .contentboxJ .lineJtop a:hover b{color:rgb(255 255 255 / 80%)}
header #rightBox .contentboxJ .lineJtop a:before{content:'';position:absolute;background-image:url(/images/38/headerline.png);background-repeat:no-repeat;top:0;width:110px;height:190px;z-index:-1}
header #rightBox .contentboxJ .lineJtop span{color:white}
header #rightBox .contentboxJ .lineJtop b{color:white;letter-spacing:0;font-size:14px;font-weight:400}
header #rightBox .contentboxJ .lineJtop a svg{width:30px;height:30px;fill:white;margin-bottom:3px}
header #rightBox .contentboxJ .callJtop{display:flex;align-items:center}
header #rightBox .contentboxJ .callJtop a p{line-height:100%;font-size:16px;letter-spacing:0;margin-bottom:5px;color:#ffffff}
header #rightBox .contentboxJ .callJtop a span{font-size:22px;line-height:100%;font-weight:400;color:#ffffff}
header #rightBox .contentboxJ .callJtop a{display:flex;flex-direction:column;justify-content:center}
header #rightBox .contentboxJ .callJtop a:hover p,header #rightBox .contentboxJ .callJtop a:hover span{color:#fef614}
header #rightBox .contentboxJ .callJtop svg{width:38px;height:38px;fill:#464646;margin-right:6px}
header #rightBox .socialBox a{padding:10px}
header #rightBox .socialBox a img{width:20px;height:20px;transition:0.6s}

/* header_bar */
#header_bar { position: fixed; padding: 10px 20px; background: #fff; border-radius: 50px; box-shadow: 0 0 5px rgb(0 0 0 / .3); bottom: 20px; left: calc((100% - 260px) / 2); z-index: 999; }
#header_bar a { padding: 0 0 0 15px; }
#header_bar a >svg { width: 20px; height: 20px; fill: #2b2b2b; }
#header_bar a#openform { position: relative; margin-right: 5px; padding: 0 20px 0 0; }
#header_bar a#openform:after { position: absolute; width: 1px; height: 12px; background: #ccc; top: 50%; right: 0; transform: translateY(-50%); content: ""; }

/* top_search */
#top_search { overflow: hidden; position: fixed; width: 100%; height: 0; background: #f3f3f3; text-align: center; opacity: 0; top: 0; left: 0; z-index: 999; }
#top_search svg { width: 25px; height: 25px; }
#top_search #close_search { position: absolute; top: 30px; right: 30px; }
#top_search #close_search svg { width: 18px; height: 18px; }
#top_search form { padding: 0 20px 6px; border-bottom: 2px #494949 solid; display: inline-block; }
#top_search form input { padding: 5px 0; width: 480px; background: none; font-size: 20px; }
#top_search #goSearch { padding: 0 10px; }

/* footer */
footer{background:#4fa1c9}
footer #footerinfo{padding-top:4vw}
footer .workframe{display:grid;grid-template-columns:25% 1fr 10%;gap: 20px 50px;}
footer .contact{display:grid;grid-template-columns: repeat(1,1fr);height:fit-content}
footer #extra{display:flex;justify-content:flex-end}
footer #extra a img{width:130px;aspect-ratio:1/1;object-fit:contain}
footer .row{margin:0}
footer .row *{font-weight:300;font-size:18px;color:#fff;vertical-align:baseline}
footer .row p,footer #extra ul li{position:relative;margin-bottom:5px}
footer .row font:first-child{font-size:18px;color:#fff}
footer #flogo{margin-left:0}
footer #flogo img{width:200px}
footer #extra ul li.plus-information img{position:absolute;max-width:150px;bottom:100%;left:0;z-index:8;max-height:150px;display:none}
footer .copyright{display:flex;gap:6px;align-items:center;grid-column:1 / 4}
footer .copyright >div{font-size:13px;color:rgb(255 255 255 / 30%)}
footer .copyright a{color:rgb(255 255 255 / 30%);font-size:13px}

/* gotop */
#gotop a{width:50px;height:50px;border: 1px #c2c2c2 solid;background-color:white;border-radius:50%;display:flex;text-align:center;flex-direction:column;align-items:center;justify-content:center}
#gotop a p{color:#929292;font-weight:600}
#gotop a svg{margin:15px 0;width:20px;height:20px;fill:#c2c2c2}
.flyJ{position:fixed;right: 8px;bottom: 30%;z-index:1001;display:flex;flex-direction:column;align-items:center}
.flyJ div{margin-bottom:10px}
.flyJ a svg{display:flex;flex-direction:column;align-items:center;width: 27px;height: 27px;border-radius:50%;padding:10px;fill:white}
.flyJ #gotop svg{width:22px;margin:0 auto}
.flyJ #linee a svg{background: #00b900;}
.flyJ  #calll svg{background: #4fa1c9;}
.flyJ #fb a svg{background: #0866ff;}
.flyJ #linee a{border: 1px rgb(255 255 255 / 61%) solid;border-radius:50%}
.flyJ #calll a{border: 1px rgb(255 255 255 / 61%) solid;border-radius:50%}

/* webSeo */
#webSeo { position: relative; overflow: hidden; margin-top: 40px; padding: 10px 0; }
#webSeo .js-marquee-wrapper * , #webSeo .js-marquee * , #webSeo .seo * {font-size: 13px;color: rgb(255 255 255 / 50%);-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}

/* SeoStarRating */
#SeoStarRating font { margin-right: 5px; display: inline-block; vertical-align: bottom; }
#SeoStarRating font:first-child { line-height: 130%; font-weight: bold; font-size: 18px; color: #FF9800; }
#SeoStarRating font:nth-child(2) { font-size: 16px; color: #FF9800; }
#SeoStarRating font:last-child { color: #383838; }

@media screen and (max-width: 1500px){
	header >.nowrap_box,header .topconant .nowrap_box{width: 85%;}
	header #webmenu .menu_box >ul >li p a{padding:0 10px}
}
@media screen and (min-width: 1281px){
	.scale_box:hover .img_box_cover img { -webkit-transform: scale(1.05); transform: scale(1.05); }
	header .row{width:300px;display:flex;flex-direction:column;justify-content:center}
	header #webmenu{margin:0 0 0 0px;width: calc(100% - 510px);display:flex;align-items:flex-end;margin-right: 60px;}
	header .leg{display:flex;justify-content: flex-start;}
	header #cis{width:330px}
	header #cis a{text-align:left;color:#4b4551;margin-left:0}
	header #menubtn,header #webmenu .menu_box ul b,header #webmenu .contact_box{display:none}
	header #webmenu .menu_box >ul >li{position:relative;overflow:hidden;display:inline-block}
	header #webmenu .menu_box >ul >li >p a{font-size:16px;letter-spacing:1px}
	header #webmenu .menu_box >ul >li .menu_body,header #webmenu .menu_box >ul >li .subOption li ul{position:absolute;width:170px;left:calc(50% - 85px);z-index:1;opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}
	header #webmenu .menu_box >ul >li .subOption{background:#fff;box-shadow:0 0 5px rgb(0 0 0 / .2)}
	header #webmenu .menu_box >ul >li .subOption li ul{background:#f3f3f3;box-shadow:none;top:0;left:170px;-webkit-transform:translateY(0);-webkit-transform:translateX(30px);transform:translateY(0);transform:translateX(30px)}
	header #webmenu .menu_box >ul >li .subOption li ul.sub3Option{background:#dbdbdb}
	header #webmenu .menu_box >ul >li:last-child .menu_body{left:auto;right:0}
	header #webmenu .menu_box >ul >li:last-child .subOption li ul{left:auto;right:170px}
	header #webmenu .menu_box >ul >li:hover,header #webmenu .menu_box >ul >li .subOption >li:hover,header #webmenu .menu_box >ul >li .sub2Option >li:hover{overflow:visible}
	header #webmenu .menu_box >ul >li:hover .menu_body{padding-top:1px;z-index:10;opacity:1;transform:translateY(0)}
	header #webmenu .menu_box >ul >li .subOption li:hover ul.sub2Option,header #webmenu .menu_box >ul >li .subOption li ul.sub2Option li:hover ul.sub3Option{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
	header #rightBox .socialBox a:hover img{transform:translateY(-15%)}
	footer #extra ul li.plus-information:hover img { display: block; }
}
@media screen and (max-width:1460px){
	header #cis{width:330px}
	header #cis img{width: 160px;}
	header .topconant a{font-size:26px}
}
@media screen and (max-width: 1280px){
	header:before{
    width: 90px;
}
	header >.nowrap_box,header .topconant .nowrap_box{margin: 0 auto;}
	header #rightBox{margin:0;display:none}
	header #cis{text-align:center;width: 100%;}
	header #webmenu{overflow:hidden;position:fixed;width:350px;background:#fff;top:0;right:-400px;box-shadow:0 0 10px rgb(0 0 0 / .3);z-index:999}
	header #webmenu .menu_box{overflow-y:scroll;margin:71px 15px 0;padding-top:20px;height:calc(100vh - 91px)}
	header #webmenu .menu_box::-webkit-scrollbar{width:0}
	header #webmenu .menu_box >ul >li >p,header #webmenu .menu_box ul li .menu_body ul li .bo{position:relative}
	header #webmenu .menu_box >ul >li b{position:absolute;width:23px;display:inline-block;text-align:center;color:#252525;top:calc((100% - 27px) / 2);right:0}
	header #webmenu .menu_box >ul >li >p a{padding:12px 25px 12px 15px;display:block;font-weight:300;font-size:20px}
	header #webmenu .menu_box ul li .menu_body,header #webmenu .menu_box ul li .menu_body >ul li .sub2Option,header #webmenu .menu_box ul li .menu_body >ul li .sub3Option{margin-bottom:15px;display:none;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
	header #webmenu .menu_box >ul >li .menu_body .subOption li >div a{padding:10px 25px 10px 30px;color:#00a0ca}
	header #webmenu .menu_box >ul >li .menu_body .subOption li .sub3Title a{padding:5px 25px 5px 40px;color:#777}
	header #webmenu .menu_box >ul >li .menu_body .sub3Option{margin:0 40px;padding:5px;background:#f3f3f3}
	header #webmenu .menu_box >ul >li .menu_body .sub3Option li >div a{padding:5px;font-size:14px;color:#666}
	header #webmenu .contact_box p font{margin-right:15px}
	}
@media screen and (max-width:1024px){
	header #menubg[data-type="2"]{display:block}
	footer .workframe{grid-template-columns:repeat(2,1fr)}
	footer #flogo{grid-column:1 / 4}
	footer .contact{grid-template-columns:repeat(1,1fr)}
}
@media screen and (max-width: 980px){
	footer #fnav a{padding:0 10px;line-height:45px}
	footer #flogo .btns_box{display:none}
	footer .row.contact p,footer #extra ul li{margin:2px 20px 2px 0;min-width:calc((100% - 20px) / 2);display:inline-block}
	footer .row.contact p:nth-child(2n+1),footer #extra ul li:nth-child(2n){margin-right:0}
	footer .row.contact p.address{width:100%}
	footer #extra ul{font-size:0}
}
@media screen and (max-width: 640px){
	footer #flogo img{
    width: 130px;
}
	footer #fnav{display:none}
	footer #footerinfo{padding-top:30px}
	footer .workframe{display:flex;flex-direction:column;align-items:center}
}
@media screen and (max-width: 480px){
	#gotop { bottom: 70px; }
	#gotop a { width: 40px; height: 40px; }
	#gotop a svg { margin: 13px 0; width: 15px; height: 15px; }
}
@media screen and (max-width: 400px){
	header #webmenu { width: 100%; }
}