@import url('/css/SeoJump.css');
@import url('/css/all.min.css');
@import url('root.css');
@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*, ::after, ::before {margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
*:focus { outline:  none; }

fieldset { border: 0; }
input , select , textarea { padding: .5em 1em; width: 100%; background-color: white; background-clip: padding-box; border: 1px solid var(--g_200); border-radius: .2em; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 5l-6.5 7L1 5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") white no-repeat calc(100% - .5em) 50% / auto .5em; }
button { background: none; border: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
input::-webkit-outer-spin-button , input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }
input[type="password"] { font-family: auto; }
input[type="radio"] , input[type="checkbox"] { width: auto; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }

/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }

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

/* general class set */
.txt_clamp { overflow: hidden; height: 1.5em; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.d_inblock.txt_clamp { display: -webkit-inline-box; }
.atag_item { width: 100%; height: 100%; top: 0; left: 0; }


body{margin:0;border:0;width:100%;color:#000;font-size:16px;line-height:150%}
div,h1,h2,h3,h4,hr,p,form,label,input,textarea,img,span,strong{text-align:left;vertical-align:middle;margin:0;padding:0;word-wrap:normal;word-break:normal;border-width:0;font-family: 'Noto Sans TC',"Roboto", serif;outline:none;}
hr{noshade:noshade}
th{font-weight:400}
ul,ol{list-style:none;margin:0;padding:0;overflow:hidden}
li{list-style:none}
a,a:hover{text-decoration:none;cursor:pointer;outline:none;}
img{max-width:100%}
br{font-family:Arial!important}
.pageh1{position:fixed;z-index:-8989898;opacity:0;color:#fff}
.wrapper .slick-slider{margin:0}
.wrapper{overflow:hidden;position:relative}
.mobile-main-nav, .nav-func, .sub2nav, .sub3nav, .phoneWrap, .sub2Option, .sub3Option, #mobile-menu{display: none;}
.subnav{opacity: 0;}
.webframe{width: 1280px;margin: 0 auto 90px;}
header{position: fixed;top:0;left:0;width: 100%;z-index: 999;padding: 20px 0;display: grid;grid-template-columns: 330px 1fr;align-items: center;justify-content: center;-webkit-transition: all .5s;transition: all .5s;background: #ffffff;}
header.headerTop{color:#2e2e2e;background-color:#fff;box-shadow:0 1px 18px rgba(0,0,0,0.1)}
header #cis{margin-left:60px}
header.headerTop #cis{filter:inherit}
header.headerTop #menubar #main-menu >ul >li >a p{color:var(--triadic2)}
header #cis a{display:block;background-repeat:no-repeat;background-position:0 50%;background-size:contain}
header #cis a img{width:100%}
header #rightTool{transition:all linear .2s;float:left}
header #rightTool .toolboxer p a{display:block;padding:0 30px}
header #rightTool .toolboxer p a i{margin-bottom:10px}
header #linelink{position:relative;display: none;align-items:center;justify-content:flex-end}
header #linelink a{font-size:19px;outline:none;height:100px;background-color:#ebebeb;justify-content:center;display:flex;align-items:center;padding:0px 15px;overflow:hidden;position:relative}
header #linelink p:nth-child(2) a{background-color:var(--complement)}
header #linelink a img{width:34px;height:20px;z-index:10;object-fit:contain}
header #linelink p:nth-child(2)  a img{filter:brightness(100)}
header #linelink p:nth-child(2) a span{color:#fff}
header #linelink a span{z-index:10;color:#000}
header #linelink p:nth-child(2) a{color:#ffffff;width:180px}
header #linelink p:nth-child(2) a::after{content:'';position:absolute;right:-20%;top:0;z-index:0;width:0;height:100%;-webkit-transform:skew(-30deg);transform:skew(-30deg);background-color:var(--primary););-webkit-transition:all .5s;transition:all .5s}
header #linelink p:nth-child(2) a:hover:after{width:140%;left:-20%;right:auto;-webkit-transition:all .5s;transition:all .5s}
header #menubar{transition:all linear .3s;margin-right: 60px;}
#menubar #main-menu ul{overflow:visible;text-align:right}
#menubar #main-menu >ul >li{display:inline-block;position:relative;vertical-align:top;margin-left:-4px}

#menubar #main-menu >ul >li >a{height:47px;padding:20px 16px;position:relative;display:table;color:#000;transition:all linear .3s;font-weight:700}
#menubar #main-menu >ul >li:hover >a,header #rightTool .toolboxer p a:hover{-webkit-background-clip:text;background-clip:text;color:var(--primary);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms,-webkit-transform 200ms;-webkit-transition:all .5s;transition:all .5s}
#menubar #main-menu >ul >li >a p{display:table-cell;vertical-align:middle;text-align:center;font-size: 18px;font-weight: 500;letter-spacing:0.5px;line-height:20px;color:#212121}
#menubar #main-menu >ul >li >a b{font-family:'Arvo',serif;display:block;text-align:center;line-height:100%;margin-bottom:5px}
#menubar #main-menu ul.subnav{position:absolute;width:160px;left:calc(50% - 80px);text-align:left;z-index:5;top:100%;}
#menubar #main-menu >ul >li:active ul.subnav, #menubar #main-menu ul.subnav li:hover ul.subOption, #menubar #main-menu ul.subnav li:active ul.subOption{display:block}
#menubar #main-menu ul.subnav li{background:#fff;position:relative}
#menubar #main-menu ul.sub2nav,#menubar #main-menu ul.sub3nav{text-align:left;display:none;position:absolute;left:100%;width:100%;z-index:54;top:0;box-shadow:0 0 20px #dedede}
#menubar #main-menu ul.subnav >li:hover ul.sub2nav,#menubar #main-menu ul.sub2nav li:hover ul.sub3nav{display:block}
#menubar #main-menu >ul >li:last-child ul.sub2nav,#menubar #main-menu >ul >li:last-child ul.sub3nav,#menubar #main-menu >ul >li:nth-last-child(2) ul.sub2nav,#menubar #main-menu >ul >li:nth-last-child(2) ul.sub3nav,#menubar #main-menu >ul >li:nth-last-child(3) ul.sub2nav,#menubar #main-menu >ul >li:nth-last-child(3) ul.sub3nav{right:100%;left:inherit}
#menubar #main-menu ul.subnav >li ul.sub2nav li >a{background:#fff}
#menubar #main-menu ul.subnav >li >a,#menubar #main-menu ul.subnav >li >p,#menubar #main-menu ul.subnav >li ul li >a{padding:10px 20px;font-size: 16px;display:block;color:#383838;text-align: center;font-weight: 500;}
#menubar #main-menu ul.subnav >li >a:hover,#menubar #main-menu ul.subnav >li >p:hover,#menubar #main-menu ul.subnav >li ul li >a:hover{background: var(--complement);color: var(--white);}
#menubar #main-menu ul.subOption{text-align:left;position:absolute;left:100%;top:-3px;display:none;width:200px}
#menubar #main-menu ul.subOption >li:first-child{border-top:3px solid #f6a266}
#translate{position:absolute;top:calc(100vh - 80px);z-index:9;width:1100px;left:calc(50% - 550px)}
#translate h3{display:inline-block;background:#37414f;color:#fff;padding:10px 25px 0;font-size:17px;border-top-right-radius:7px;border-top-left-radius:7px}
#translate form{background:#37414f;padding:20px 25px;overflow:hidden;border-bottom-right-radius:7px;border-bottom-left-radius:7px;border-top-right-radius:7px}
#translate form h4{float:right}
#translate form h4 a{display:block;background:#263040;color:#fff;font-size:14px;padding:15px 30px;transition:all linear .3s}
#translate form h4 a i{margin-right:5px;font-size:18px}
#translate form p{float:left;width:calc(100% - 150px)}
#translate form p input{height:22px;line-height:52px;padding:15px;width:calc(100% - 30px);font-size:18px;-webkit-appearance:none}
#translate form h4 a:hover{background:#f17328}
#g-map{position:relative;z-index:2;background:#fff}
#g-map iframe{-webkit-filter:grayscale(1)}

/*loading*/
.loadingArea{width:100%;height:100vh;align-items:center;background-color:#fff;display:flex;justify-content:center;pointer-events:none;position:fixed;left:0;top:0;z-index:9999;transition:all 0.5s}
.loadingArea .loadLogo{width:260px}
.loadingArea .loadLogo img{opacity:0;transform:translateY(20px);transition:all 1s ease;width:100%;display:block;backface-visibility:hidden}
.loadingArea.show{opacity:1;pointer-events:auto}
.loadingArea.show .loadLogo img{opacity:1;transform:translateY(0)}
.loadingArea.hide{opacity:0}
  

/* footer */
footer {padding: 4vw 0;background-color: var(--complement);}
footer * {font-weight: 400;font-size: 15px;color: var(--white);}
footer .insede {display: grid;grid-template-columns: 1fr 290px;width: min(90%, 1400px);gap: 60px;margin: auto;}
footer #flogo >a{display:none;}
footer #flogo img {width: 100%;}
footer #f_info font{margin: 0;padding: 0 !important;}
footer #f_info font:last-child a { font-family: 'Lato', sans-serif; font-weight: 400; }
footer #f_info .comlist{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:20px}
footer .other_txt, footer .other_txt a {font-size: 12px;color: #fff;font-weight: 200;}
footer .other_txt{display: flex;align-items: center;}
footer .other_txt a {margin-left:5px;}
footer #f_info .infoo{display: grid;grid-template-columns: repeat(2, 1fr);}
footer #f_info p {display: flex;align-items: center;margin: 5px 0;}
footer #f_other #footermeu {display: flex;flex-wrap: wrap;gap: 6px;}
footer #f_other #footermeu a{margin-right:15px;font-size: 16px;font-weight: 400;letter-spacing: 1px;}
footer #webCopy {display: flex;justify-content: flex-start;align-items: center;margin: 15px 0;}


/* webSeo */
#webSeo { padding: 5px 0; white-space: nowrap; box-sizing: border-box; }
#webSeo .seo { padding-left: 100%; font-weight: 100; font-size: 13px; opacity: .3; -webkit-animation: marquee 200s linear infinite; animation: marquee 200s linear infinite; }
@-webkit-keyframes marquee { 0% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(-100%, 0); } }
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

/* footer_btn */
#footer_btn {right: 15px;bottom: 15px;z-index: 2000;display: flex;flex-direction: column-reverse;}
#footer_btn a {margin-top: 10px;width: 45px;height: 45px;border-radius: 50%;line-height: 40px;background: #2a3f5b;}
#footer_btn a img {filter: brightness(100);width: 25px;height: 25px;}
#footer_btn a.line { background: #12b508; }
#footer_btn a.fb { background: #2354a0; }
#footer_btn a.ig { background: #ff147a; }
#footer_btn a.gotop {background: var(--primary);}
#footer_btn a.gotop:before { margin: 18px auto 0; width: 30%; height: 30%; border: var(--white) solid; border-width: 3px 0 0 3px; display: block; content: ""; transform: rotate(45deg) translate(-1px, -1px); -webkit-transform: rotate(45deg) translate(-1px, -1px); -webkit-animation: gotop 1s linear infinite; animation: gotop 1s linear infinite; }
@-webkit-keyframes gotop { 0% , 100% { -webkit-transform: rotate(45deg) translate(-1px, -1px); } 50% { -webkit-transform: rotate(45deg) translate(1px, 1px); } }
@keyframes gotop { 0% , 100% { transform: rotate(45deg) translate(-1px, -1px); } 50% { transform: rotate(45deg) translate(1px, 1px); } }

/* contactArea */
.contactArea{background-color: var(--complement);display: none;}
.contactArea .workframe{padding:0;max-width:100%;display:flex;flex-wrap:wrap;-webkit-box-align:stretch;align-items:stretch}
.contactArea .left{width:50%;}
.contactArea .left .Img{height:100%;background-position:center;background-size:cover}
.contactArea .right{width:50%;max-width: 700px;background: #2e7fb6;text-align:right;padding: 90px 50px 30px 50px;color:#fff;position: relative;overflow: hidden;}
.contactArea .right::after  {content: '';position: absolute;bottom: -30px;left: 0;background-image: url(/images/18/img-logo2.png);background-size: contain;background-repeat: no-repeat;width: 240px;height: 240px;opacity: .15;-webkit-transition: all 0.5s;transition: all 0.5s;}
.contactArea .right .title{font-size: 28px;letter-spacing:1px;padding-bottom:36px;text-align: end;}
.contactArea .right .side_contactInfo{padding:0 3px 50px}
.contactArea .right .side_contactInfo li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-bottom:6px;font-size:16px;letter-spacing:1px}
.contactArea .right .side_contactInfo li.tel{font-size:25px;letter-spacing: 0.4px;}
.contactArea .right .side_contactInfo li.tel img{filter:brightness(100);width:20px;margin-right:10px;margin-top:4px}
.contactArea .right .side_contactInfo li.tel a{display:block;font-size:25px;color: var(--white);}
.contactArea .right .side_contactInfo li.address{padding-left:61px;letter-spacing:0.3px}



@media screen and (max-width: 1560px) {
	header #linelink a{height:90px}
	header #linelink p:nth-child(2) a{width:160px}
}

@media screen and (max-width: 1440px) {
	header:after{width:calc(100% - 190px)}
	.contactArea .right .title{font-size: 27px;padding-bottom: 30px;}
}
@media screen and (min-width: 1281px) {
    #menubar #main-menu >ul >li .subnav{transform:translate(0,30px);-webkit-transform:translate(0,30px)}
    #menubar #main-menu >ul >li:hover .subnav{transform:translate(0,0);-webkit-transform:translate(0,0);top:100%;opacity:1}
}
@media screen and (max-width:1280px){
	#menubar #main-menu >ul >li >a b{font-size:12px}
	#menubar #main-menu >ul >li >a,header #rightTool .toolboxer p a{height:33px;line-height:33px}
	header #cis{width: 300px;}
	#translate{width:80%;left:10%}
	.webframe{width:90%}
	header #rightTool{display: none;}
	header #menubar{display:none}
	header{padding: 15px 0;width:100%;display: block;}
	.mobile-main-nav{display:block}
	.nav-funcB{position: fixed;left: 10px;top: 22px;font-size:30px;color:#4a4a4c;z-index:999;width: 45px;height: 45px;transition:all linear .3s;}
	.nav-funcB.close{background: var(--complement);position:fixed;z-index: 9999;}
	.nav-funcB span{position:absolute;display:block;width:35px;height:2px;background: #4e4e4e;top: 5px;left: 6px;transform-origin:0 0;transition:all linear .3s;}
	.nav-funcB span:nth-child(2){transform:translateY(13px)}
	.nav-funcB span:nth-child(3){transform:translateY(25px)}
	header.headerTop .nav-funcB span{background:#000000}
	.nav-funcB.close span{transform:rotate(45deg) translateX(7px);top:4px;background:#fff}
	header.headerTop .nav-funcB.close  span{background:#fff}
    .nav-funcB.close span:nth-child(2){opacity:0;}
	.nav-funcB.close span:nth-child(3){transform:translateY(33px) rotate(-45deg) translateX(4px)}
	.nav-funcB:hover{color: #272727;z-index: 9999;}
	.nav-func{position:fixed;left:280px;top:0;font-size:30px;color:#fff;z-index:9999999;display:block;width:50px;text-align:center;height:52px;background:#e26136;line-height:52px;border-top-right-radius:25px;border-bottom-right-radius:25px;padding-right:5px}
	#mobile-menu{width: calc(100% - 0px);background: #ffffff;height:100vh;overflow:auto;position:fixed;top:0;z-index:999;padding: 70px 20px 0;transition: unset;-webkit-transition: unset;}
	#mobile-menu >ul >li .menu_head,.subOption >li .sub2Title,.subOption >li .sub3Title{overflow:hidden;border-bottom: 1px solid #dedede;position:relative}
	#mobile-menu >ul >li .menu_head.c0 b,.subOption >li .sub2Title.c0 b,{display:none}
	#mobile-menu >ul >li .menu_head p,.subOption >li .sub2Title p,.subOption >li .sub3Title p{float:left;font-size: 15px;width: calc(100% - 0px);}
	#mobile-menu >ul >li .menu_head a,.subOption >li .sub2Title a,.subOption >li .sub3Title a{display: block;padding: 20px 10px;font-size: 18px;color: #313131;text-align: center;}
    #mobile-menu >ul >li .menu_head b,.subOption >li .sub2Title b,.subOption >li .sub3Title b {position: absolute;right: 0;padding-left: calc(100% - 30px);padding-right: 35px;width: 35px;height: 40px;display: inline-block;text-align: center;line-height: 40px;top: calc((100% - 40px) / 2);cursor: pointer}
    #mobile-menu >ul >li .menu_body li p,.subOption >li .sub2Option li p{background: #f6f6f6;padding:5px 15px;font-size:14px;border-bottom: 1px solid #dedede;}
	#mobile-menu >ul >li .menu_body li a,.subOption >li .sub2Option li p a{display:block;padding:10px 35px;font-size: 12pt;color: #313131;text-align: center;}
	#mobile-menu .subOption >li .sub2Title{background:#ffb9a1;padding:15px 15px 15px 30px;font-size:14px}
	#mobile-menu .subOption >li .sub2Title p{background:none;padding:0;border:0}
	#mobile-menu .subOption >li .sub2Title p a{padding:0;border:none}
	#mobile-menu .subOption >li .sub2Title.bo p a{display:inline-block}
	#mobile-menu .subOption >li .sub3Title{background:#fdd4c7;padding:15px 15px 15px 45px}
	#mobile-menu .subOption >li .sub3Title p{background:none;width:calc(100% - 20px - 30px);padding:0;border:0}
	#mobile-menu .subOption >li .sub3Title p a{padding:0;color:#733d2a}
	#mobile-menu .subOption >li .sub3Option p{padding:15px 10px 15px 55px}
	#mobile-menu .subOption >li .sub3Option p a{padding:0;color:#fff}
	header .rightTab{float:none;margin:0 auto;text-align:center;overflow:hidden;background:#efefef;padding:10px 5%}
	header #cis{padding: 0;margin-left: 80px;}
	header #cis h2{text-align:center}
	#translate{top:620px}
	header #linelink a span{display:none}
	header #linelink p a,header #linelink p:nth-child(2) a{width:60px;height:60px}
    footer #f_info .comlist{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width:1180px){
    .contactArea .left .Img{background-position:right bottom}
    .contactArea .right{max-width: initial;padding: 70px 5% 40px;}
}

@media screen and (min-width: 1025px) {
	footer * { vertical-align: top; }
}
@media screen and (max-width: 1024px) {
	footer #f_info .infoo{grid-template-columns:1fr}
	footer #f_other { margin-top: 10px; }
}
@media screen and (max-width: 980px) {
	footer .insede{justify-items:center;gap:20px;display:flex;flex-direction:column;align-items:center}
	footer #f_info {width: 100%;margin-bottom: 30px;}
	footer #flogo,footer #f_box{width: 100%;}
    footer #flogo img{width: 260px;}
	footer{padding:8vw 0}
	footer #f_info p{justify-content:center;width:100%}
}
@media screen and (max-width: 768px) {
	.contactArea .workframe{display:flex;flex-direction:column}
	.contactArea .left{width:100%}
	.contactArea .right{width:auto;padding: 60px 5% 30px;}
    footer #f_info .comlist{grid-template-columns: 1fr;}
}
@media screen and (min-width: 641px) {
	.phoneWrap{display:none!important}
	#footer_btn a span,.webBox #footer_btn a span { display: none; }
}
@media screen and (max-width: 640px) {
    .nav-funcB{top: 32px;}
	.phoneWrap{display:block;position:fixed;bottom:10px;left:10px;width: calc(100% - 62px);z-index:99;}
	.phoneWrap li{display:inline-block;width:calc(50% - 4px)}
	.phoneWrap li a{display:block;color:#fff;background: #f93;padding:5px 15px;text-align:center;line-height:30px;font-size:9pt;border:1px solid #fff;border-radius: 50px;}
	.phoneWrap li:nth-child(2) a{background: #41ce02;}
	#translate{top:470px}
	#gocart{right: 10px;bottom: 175px;}
	header #cis{}
	footer{padding: 10vw 0 14vw;}
	#footer_btn a.gotop:before{margin: 6px auto 0;}
	#footer_btn {width: calc(100% - 0px);bottom: 0;right: 0;display: grid;grid-template-columns: repeat(2, 1fr);}
	#footer_btn a svg {width: 30px;padding: 0;margin: unset;margin-right: 5px;}
	#footer_btn a span {width: auto;display: flex;align-items: center;color: white;font-size: 15px;display: none;}
	#footer_btn a.line {margin-right: 0;border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0;width: auto;}
	#footer_btn a.phone {margin-right: 0;width: auto;border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0;background: var(--primary);}
	#footer_btn a.gotop {right: 10px;bottom: 60px;}
	#footer_btn a.fb {right: 10px;bottom: 110px;}
	#footer_btn a.ig {right: 10px;bottom: 160px;}
    .contactArea .right .title{font-size:22px;padding-bottom:20px}
	.contactArea .right .side_contactInfo li.tel a{font-size:20px}
	.contactArea .right .side_contactInfo{padding:0px 3px 30px}
}
@media screen and (max-width: 550px) {
	#footer_btn a {width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
}
@media screen and (max-width: 480px) {
	#translate{top:490px;width:90%;left:5%}
	#translate form{padding:10px 13px}
	#translate h3{padding:7px 15px 0;font-size:15px}
	#translate form h4 a{padding:10px 30px}
	#translate form p input{line-height:32px;padding:10px 15px}
	header{padding: 25px 0;}
	header:after{display: none;}
}

@media screen and (max-width: 380px) {
    header #cis{width: 180px;}
}