/*-----------------------------------------------------------------------------
 [TABLE OF CONTENTS]
    +common
        =anchor
        =clear,clearfix
        =banner
    +header
        =cis
        =site-func
        =share-func
        =nav
    +content
        +content-main
        +content-sidebar
    +footer
        =footer-link
/*-----------------------------------------------------------------------------
 [TABLE OF CONTENTS]
    +common
        =anchor
        =clear,clearfix
        =banner
    +header
        =cis
        =site-func
        =share-func
        =nav
    +content
        +content-main
        +content-sidebar
    +footer
        =footer-link
        =company-info
-----------------------------------------------------------------------------*/

/* +common
*----------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
body{margin:0;border:0;width:100%;color:#333;font-size:14px;line-height:170%}
div,h1,h2,h3,h4,hr,p,form,label,input,textarea,img,span,a,article{text-align:left;vertical-align:middle;margin:0px;padding:0px;word-wrap:normal;word-break:normal;border-width:0;font-family:"Noto Sans TC","Nunito", sans-serif;transition:all linear 0.5s;-moz-transition:all linear 0.5s;-ms-transition:all linear 0.5s;-o-transition:all linear 0.5s;-webkit-transition:all linear 0.5s;box-sizing: border-box;
-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}


hr{noshade:noshade}
th{font-weight:normal}
ul{list-style:none;margin:0;padding:0;overflow:hidden;}
a,a:hover{text-decoration:none;cursor:pointer}
img{max-width:100%}
section{width: min(1280px , 100%);margin:0 auto;overflow:hidden;}
.erow{background-color: #00aecc;}
section .dowwn{position:relative;width:100%;text-align:center;display: flex;flex-wrap: wrap;justify-content: center;}
section .dowwn p{display: flex;font-size: 19px;line-height:180%;margin: 13px 9px;font-weight:600;color:white;letter-spacing: 0.15em;}
header{position:fixed;width: 100%;z-index: 8;background-color: white;top: 0;}
header #top-right a,header #top-right #head-qrcode{display:inline-block}
header #top-right {display: none;}
header #cis img{width: min(222px , 100%);margin: 3px 0;}
header #top-right .boxborder{margin:10px 0;text-align:right;}
header #top-right .boxborder a{border:3px solid #434343;color:#434343;font-size:10px;padding:0 8px;margin:0 0 0 3px}
header #topnav .menu ul{display:flex;justify-content:flex-end;overflow: visible;}
header #topnav .menu li{display:flex;flex-direction:column;position: relative;}
header #topnav .menu li a{display:flex;font-size:16px;color:#000;padding:10px 20px;text-align:center;background-image:url(/images/21/bg-nav.png);background-repeat:no-repeat;background-position:0 50%;flex-direction:column}
header section{overflow:visible;display: flex;justify-content: space-between;align-items: center;}
header #topnav .menu li:first-child a{background-image:none}
header #topnav .menu li a span{display:block;color:#4c4c4c;font-size:13px;text-align:center}
header #topnav .menu li:hover a{background-image:none;color:#009b58}
header #topnav .menu li:hover a span{color:#009b58}
header #topnav .menu li ul.subnav{position:absolute;z-index:10;display:none;width: 100%;}
header #topnav .menu li ul.subnav li{background: #009b58;}
header #topnav .menu li:hover ul.subnav{display: flex;flex-direction: column;top: 57px;padding-top: 15px;z-index: 666;align-items: center;}
header #topnav .menu li ul.subnav:before{content:'';width:0;height:0;border-style:solid;border-width: 0 10px 10px 10px;border-color: transparent transparent #009b58;position:absolute;top: 7px;}
header #topnav .menu li ul.subnav:empty {display: none;}


header #topnav .menu li ul.subnav li a,header #topnav .menu li ul.subnav li p{padding:5px 20px;text-align:center;color:#fff;font-size:16px;background-image:none}
header #topnav .menu li ul.subnav li a{font-size:14px}
header #topnav .menu li ul.subnav li a:hover{background:#000}
header #topnav .menu li ul.subnav li ul.subOption li:last-child{border-bottom:1px #fff solid}
header #topnav .menu li ul.subnav li:last-child ul.subOption li:last-child{border-bottom:none}
#banner{overflow:hidden}
#banner video{width:100%;aspect-ratio: 21 / 10;object-fit: cover;display: flex;}
#banner .slick-slide a{overflow:hidden;background-position:50% 0;background-repeat:no-repeat;background-size:100% auto;display:block;background-size: cover;}
#banner .bannerw{width: 100%;}
#banner .slick-slide a img{width: 100%;aspect-ratio: 21/10;}
footer{width: 100%;margin:0 auto;overflow:hidden;background-color:#0a8aa0}
footer a{color:#6bc6d6}
footer .footerlogo{margin:50px 0}
footer .footerlogo #footer-cis{text-align:center}
footer .footerbox{float:left;width:25%;color:#ffffff}
footer .callJ{display:flex;flex-wrap:wrap;gap:8px}
footer .footerbox h2{font-size:18px;font-weight:normal}
footer .footerbox span{display:block;width:50px;height:2px;background:#63cee0;margin:20px 0}
footer .footerbox:hover span{width:100px}
footer .footerbox p a{color:#ffffff}
footer .footerNav p{width:40%;display:inline-block}
footer .footerbox a.community{color:#252525;display:inline-block;background:#fff;margin-right:10px;font-size:18px;width:38px;height:38px;line-height:38px;text-align:center}
#webSeo,#webSeo div{-moz-transition:none;-ms-transition:none;-o-transition:none;-webkit-transition:none}
#webSeo{width:100%;clear:both;display:block;padding:30px 0;transition:none}
#webSeo .seo{color:#6bc6d6}
.phoneWrap,.nav-func{display:none}
#gotop{display:block;position:fixed;right:10px;bottom: 60px;background:#363333;z-index:9999;width:40px;height:40px;line-height:40px;text-align:center;color:#fff;box-shadow:0 0 8px #d4d4d4;border-radius: 6666px;}

/* fix_btns */
#fix_btns {right: 10px;bottom: 116px;z-index: 999;}
#fix_btns a {overflow: hidden;margin-top: 12px;width: 40px;height: 40px;background: #64a0d7;display: flex;justify-content: center;align-items: center;border-radius: 66666px;}
#fix_btns a svg { width: 60%; height: 60%; fill: #fff9ec; }
#fix_btns a.line { background: #00cb42;}
.pos_fix { position: fixed;}
@media screen and (max-width: 1770px) {
	footer{width: 100%;}
}
@media screen and (max-width: 1470px){
	section{width: min(1160px, 100%);}
	section .dowwn p{font-size: 16px;}
}
@media screen and (max-width: 1180px) {
	section{width:920px}
	footer .footerbox{width:40%;text-align:center;margin:0 5% 40px}
	footer .footerbox p,footer .footerbox h2,footer .footerbox div{text-align:center}
	footer .footerbox span{margin:20px auto}
	header #cis{width:30%}
	header #topnav{width:100%;text-align:center}
	header #top-right .qrimg a{width:54px;height:54px}
}
@media screen and (max-width: 1024px){
	#banner .slick-slide a img ,#banner video{aspect-ratio: 7 / 4;}
	#banner{margin-top: 85px;}
	section .dowwn p{margin: 3px 2px;}
}
@media screen and (max-width: 980px) {
	section{width:95%;padding: 8px 0;}
	header #topnav .menu ul{display:flex;flex-direction: column;background: #009b58;width: 50%;}
	.nav-func{display:block;text-align:center;line-height:30px;background:#009b58;color:#fff;margin:10px 0;float:right;padding:2px 15px}
	header #topnav{position:absolute;right:2%;z-index:10;top: 30px;}
	header #topnav .menu{width: 100%;/* margin-top:118px; */position: relative;right: 0;display: flex;flex-direction: column;align-items: flex-end;margin-top: 69px;}
	header #topnav #main-menu li{display:block}
	header #topnav #main-menu li a,header #topnav #main-menu li a span{text-align:left;display:inline-block;color:#fff}
	header #topnav #main-menu li a{padding:10px 5%;width:90%}
	header #topnav .menu li:hover a{background-color:#000}
	header #topnav .menu li:hover ul.subnav{display:none}
	header.headerTop{background:#fff;position:fixed;top:0;width:100%;z-index:99;box-shadow:1px 1px 3px #b1b1b1}
	header.headerTop #top-right{display:none}
	header.headerTop #cis{margin: 0 0;}
}
@media screen and (max-width: 640px) {
	header #topnav .menu{margin-top: 0;}
	section .dowwn p{margin:5px auto;font-size:14px}
	header #cis{width:50%}
	footer .footerbox{width:90%;margin:0 5% 40px}
	.phoneWrap{display:block;position:fixed;bottom:6px;width:100%;height:40px;line-height:40px;z-index:999}
	.phoneWrap a{display:inline-block;color:#fff}
	.phoneWrap a:hover{color:#fff}
	.phoneWrap li{text-align:center;list-style:none;float:left;width:30%;border-radius:50px;margin:0 1.5%;background:rgba(97,97,97,0.95)}
	.phoneWrap li a i{background:rgba(0,0,0,0.29);border-radius:50%;padding:6px;margin-right:5px}
	footer{padding-bottom:50px}
	#banner .slick-slide a img, #banner video{aspect-ratio: 7 / 6;}
	#banner .slick-slide a{background-position: 26% 50%;}
	#banner{margin-top: 140px;}
	header #cis img{width: min(150px , 100%);}
	header #topnav{top: 10px;}
}
@media screen and (max-width: 480px) {
	header{padding-bottom: 0;}
	header #cis{width:60%}
	header #top-right #head-qrcode{display:none}
	header #top-right .boxborder a{border:1px solid #434343;font-size:10px;padding:0 5px;margin:0 0 1px 0;text-align:center}
	.nav-func{}
	header.headerTop{padding-bottom:0}
	header.headerTop #cis img{width:150px}
	header.headerTop .nav-func{top:8px}
}
@media screen and (max-width: 360px) {
	header #cis img{width:200px}
	header.headerTop .nav-func{top:7px}
}