@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('https://fonts.googleapis.com/css2?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&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('all.min.css');
*:focus { outline: none; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, svg, span, font, strong, b, a, i {text-align: left;vertical-align: middle;word-wrap: break-word;word-break: break-word;line-height: 170%;border-width: 0;font-family: 'Poppins', sans-serif;font-size: 16px;color: var(--info);transition: all 0.6s linear;-webkit-transition: all 0.6s linear;}

ul , ol { list-style: none; }

fieldset { border: 0; }

input[type=text] , input[type=number] , input[type=tel] , input[type=password] , button , select , textarea {padding: .5rem 1rem;width: 100%;background-color: #fff;background-clip: padding-box;border: 1px #e4e4e4 solid;border-radius: .2rem;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
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; }
select {padding: 0.8rem 1rem;border: 1px #e4e4e4 solid;display: block;padding: 15px 25px;border-radius: 4px;font-size: 17px;background: url(/images/00/arrow.png) no-repeat scroll 98% center;background-repeat: no-repeat;background-position: 97% 50%;-webkit-appearance: none;}

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

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

/* general class set */
.txt_clamp {overflow: hidden;height: 27px;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;z-index: 10;}
.nowrap_box { font-size: 0; }
.flex_direction {flex-direction: column;}
.flex_wrap {flex-wrap: wrap;display: flex;justify-content: flex-start;}
.text_uppercase { text-transform: uppercase; }
.text_en { font-family: 'Poppins', sans-serif; }
.text_serif { font-family: 'Noto Serif TC', 'Noto Serif SC', 'Noto Serif', serif; }
.writing { -ms-writing-mode: tb-rl -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.text_stroke {color: transparent;-webkit-text-fill-color: transparent;text-fill-color: transparent;-webkit-text-stroke: 1px var(--primary);text-stroke: 2px #000;}

/* btn */
.btn , .btn_outline { padding: 2px 10px; }

/* badge  */
.badge { padding: 2px 10px; box-shadow: none; }
.badge_lighten { padding: 0 4px; min-width: 22px; border-radius: 3px; font-weight: 400; text-align: center; font-size: 12px; vertical-align: text-bottom; }

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

/* 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; }
.fancybox-infobar__body span { font-size: inherit; color: currentcolor; vertical-align: initial; }

/* webBox */
.webBox {overflow: hidden;position: relative;width: 100vw;min-height: 100vh;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;min-height: 100vh;padding-top: 105px;overflow: hidden;}
.webBox .pageh1 {position: absolute;top: 0;z-index: 1;color: #fff;}
.webBox .slick-slider { margin-bottom: 0; }

/* workframe */
.workframe {margin: 0 auto;width: 88vw;}
body{background-color: var(--white);}

/* header */
header {padding: 0 2vw;width: 100vw;top: 0;left: 0;z-index: 1001;justify-items: center;position: relative;position: fixed;left: 0;top: 0;width: 100%;z-index: 50;}
header:before {position: absolute;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;content: "";-webkit-transition: all 0.5s;transition: all 0.5s;}
header #cis {position: relative;padding: 7px 20px;max-width: 360px;grid-area: logo;-webkit-transition-duration: .25s;transition-duration: .25s;}
header.scroll #cis img{filter: none;}
header #webmenu { position: relative; display: block; }
header #webmenu * {color: #000;}
header #webmenu nav >ul >li >a {overflow: hidden;position: relative;}
header #webmenu nav >ul >li >a font {position: relative;padding: 0 9px 0 10px;display: block;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;font-family: 'Poppins', sans-serif;}
header #webmenu nav >ul >li >a font:before {position: absolute;width: 100%;font-family: 'Poppins', sans-serif;text-align: center;font-size: 85%;top: 112%;left: 0;content: attr(data-hover);color: var(--primary);}
header #webmenu li .menu_body li a font , #webmenu_mb nav a font {display: block;line-height: 1;font-size: 17px;letter-spacing: 0.5px;font-family: 'Poppins', sans-serif;}
header #webmenu li .menu_body li a font.text_en , #webmenu_mb nav a font.text_en { line-height: 1.2; font-weight: 500; font-size: 13px; }
header .btns_box {position: relative;justify-content: flex-end;align-items: center;z-index: 1002;grid-area: btns;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 100%;margin-left: auto;border-radius: 0 0 0 20px;background-color: #173054;margin-right: -30px;padding: 0 20px;}
header .btns_box a#openform {width: 40px;height: 40px;line-height: 60px;border-radius: 50%;text-align: center;position: relative;display: flex;align-items: center;justify-content: center;margin-left: 10px;}
header .btns_box font {width: 0px;height: 15px;background: #787878;display: block;}
header .btns_box a#openform svg {width: 18px;height: 18px;fill: #ffffff;}
header .btns_box a.nycu_btn{color:#fff;font-size:14px;font-weight:600;line-height:120%;width: 60px;letter-spacing:0.5px;padding:5px 5px}
header .btns_box a.lang_btn {padding: 5px 5px;line-height: 1;font-weight: 300;font-size: 18px;color: #fff;width: 60px;display: flex;align-items: center;justify-content: space-between;}
header .btns_box a.lang_btn svg{width: 20px;height: 20px;fill: #ffffff;}
header.scroll {border-bottom-color: transparent;position: fixed;}
header.scroll:before {width: 100vw;height: 100%;background: linear-gradient(to top,rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 100%) 100%);}
header.scroll #cis {padding: 7px 15px;-webkit-transition-duration: .15s;transition-duration: .15s;}


/* webmenu_mb */
#webmenu_mb {position: fixed;width: 520px;height: 100vh;background: #fff;top: 0;right: -1000px;z-index: 1001;}
#webmenu_mb .menu_info {overflow-y: scroll;margin-top: 100px;padding: 0px 40px 0;height: calc(100% - 80px);}
#webmenu_mb .menu_info::-webkit-scrollbar { width: 0; }
#webmenu_mb .itemBox{max-width: 330px;padding: 25px 15px 10px;margin-bottom: 30px;border-bottom: 2px solid #6b6b6c;}
#webmenu_mb .itemBox p{
    font-family: 'Poppins', sans-serif;
}
#webmenu_mb .itemBox p a{vertical-align: top;font-family: 'Poppins', sans-serif;}
#webmenu_mb nav a {padding: 20px 35px 20px 10px;display: flex;align-items: baseline;border-bottom: 1px solid rgb(31 31 31 / 7%);justify-content: space-between;}
#webmenu_mb nav a font.text_en {margin: 0 0 0 .75rem;display: none;}
#webmenu_mb nav b { position: absolute; padding-left: calc(100% - 14px); width: 35px; height: 41px; display: inline-block; text-align: center; line-height: 41px; top: calc((100% - 41px) / 2); left: 0; cursor: pointer; }
#webmenu_mb nav li .menu_body , #webmenu_mb nav li .menu_body .subOption li ul { position: relative; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#webmenu_mb nav li .menu_body ul { margin-bottom: 10px; margin-left: 0.5em; }
#webmenu_mb nav li .menu_body .subOption .bo { position: relative; }
#webmenu_mb nav li .menu_body .subOption a {padding: 10px 35px 8px 10px;color: var(--dark);font-family: 'Poppins', sans-serif;}
#webmenu_mb nav li .menu_body .sub2Option a { padding: 5px 35px 5px 10px; font-weight: 300; }
#webmenu_mb nav li .menu_body .sub3Option a {  padding-right: 5px; color: var(--red); }
#webmenu_mb .contact_box { padding: 60px 0 20px; }
#webmenu_mb[data-type="ios"] .contact_box { padding-bottom: 15vh; }
#webmenu_mb .contact_box h4 { font-size: 22px; }
#webmenu_mb .contact_box p { display: flex; font-size: 15px; color: var(--dark); }
#webmenu_mb .contact_box p * { font-size: 15px; color: var(--dark); }
#webmenu_mb .contact_box .community {margin: 20px 0;}
#webmenu_mb .contact_box .community a {margin: 0 5px;display: inline-block;text-align: center;line-height: 35px;}
#webmenu_mb .contact_box .community a:first-child { margin-left: 0; }
#webmenu_mb .contact_box .community a:last-child { margin-right: 0; }
#webmenu_mb .contact_box .community a i {font-size: 15px;}

/* menu_btn */
#menu_btn{position:relative;margin-left: 10px;width:40px;height:40px;line-height:60px;text-align:center;position:relative;display:flex;align-items:center;justify-content:center}
#menu_btn span{position:absolute;width:75%;height:1px;background:#ffffff;display:block;top:calc(((100% - 1px) / 2) - 3px);left:20%}
#menu_btn[data-type="1"] span:nth-child(2){top:calc(((100% - 1px) / 2) + 5px)}
#menu_btn[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)}
#menu_btn[data-type="2"] span{transition:.4s cubic-bezier(.645,.045,.355,1)}
#menu_btn[data-type="2"] span:nth-child(1),#menu_btn[data-type="2"] span:nth-child(2){top:50%;background:#ffffff}
header.scroll #menu_btn{padding:0;color:rgb(255 255 255 / 0%)}

/* menubg */
#menubg { width: 100vw; height: 100vh; top: 0; left: 0; pointer-events: none; z-index: 1000; opacity: 0; }
#menubg[data-type="2"] { background: rgba(0, 0, 0, .5); opacity: 1; pointer-events: auto; }

/* hSearch */
#hSearch { margin-top: 1rem; padding-right: 1rem; width: 240px; background: #f9f9f9; box-shadow: 0 0 0.875rem 0 rgb(53 64 82 / 30%); right: -300px; opacity: 0; z-index: 1001; }
#hSearch[data-type="2"] { right: 2vw; opacity: 1; }
#hSearch input { background-color: #f9f9f9; border: 0; }
#hSearch a {line-height: 1;display: flex;justify-content: center;align-items: center;}
#hSearch svg { width: 18px; height: 18px; }

/* footer */
footer{padding-top:80px;background-color:#173054;z-index: 10;}
footer *{font-weight:300;font-size:15px;color:var(--gary)}
footer #footer_box{grid-template-columns: 410px 1fr;grid-template-areas:
"f_logo f_info"
"f_logo f_info";grid-row-gap:20px}
footer h5{margin-bottom:30px;font-weight:500;font-size:16px;letter-spacing:0.5px;color:#898989}
footer h5 b{margin-right:15px;font-size:18px;font-weight:500}
footer #f_logo{grid-area:f_logo;margin-right:40px;display:flex;flex-direction:column;align-items:flex-start}
#community{text-align:center;display:flex;align-items:center;width:300px;flex-direction: row-reverse;margin-top:30px;margin-bottom:50px;justify-content: flex-end;}
#community .social{}
#community .social li{display:inline-block}
#community .social li + li{margin-left:15px}
#community .social a{position:relative;display:block;text-align:center;border-radius:50%;line-height:25px;transition:ease .3s;width:30px}
#community .social b{font-size:12px;transition:all .3s ease-out;display:none}
#community .social i{display:block;text-align:center;color:#ffffff;font-size:22px}
footer #f_info{grid-area:f_info}
footer #f_info p{display:flex;flex-direction:row;align-items: flex-start;}
footer #f_info p,footer #f_info p *{font-size:14px;padding-bottom:5px;padding-right: 10px;}
footer #f_info p b{font-weight:500;margin-right:0px;width: 80px;}
footer #f_info p a.d_inblock{width: calc(100% - 60px);}
footer #f_nav p{padding-right: 0;}
footer #f_info .top{display:flex;justify-content:space-between;margin-bottom:30px}
footer #f_nav{grid-area:f_nav}
footer #f_nav  p a{padding: 0 20px 0px 0;font-size:16px}
footer #f_nav >div{display:flex;margin-bottom:1.25rem;justify-content:flex-start}
footer #f_other{grid-area:f_other}
footer #f_other .flex_wrap{justify-content:flex-end}
footer #f_other .copy_box *{font-weight: 300;font-size: 13px;color:#ffffff;opacity:1}
.community a{width:35px;height:35px;z-index:999;text-align:center;border-radius:50%;line-height:35px;font-size:12px;background-color:var(--primary);margin-right:1rem}
.community a i{color:#ffffff}
footer #footerflow{margin-bottom:30px;text-align:center;font-size:0;position:absolute;top:-30px;left:50%;width:60%;transform:translateX(-50%);background-color:var(--primary);display:flex;flex-wrap:nowrap}
footer #footerflow >div{display:inline-block;width:50%}
footer #footerflow >div:nth-child(2){border-left:1px rgb(144 100 0 / 66%) solid}
footer #footerflow >div a{padding:10px 90px;display:flex;align-items:center;justify-content:center}
footer #footerflow >div a font{display:inline-block;font-weight:500;font-size:19px;color:rgb(138 99 15)}
footer #footerflow >div a i{margin-right:10px;font-size:20px;display:inline-block;vertical-align:middle;-webkit-transition:none;transition:none;color:rgb(138 99 15)}
footer #footerflow >div a:hover,footer #footerflow >div a:hover i,footer #footerflow >div a:hover font{color:#ffffff}

/* webSeo */
#webSeo { margin-top: 2rem; padding: 5px 0; white-space: nowrap; box-sizing: border-box; }
#webSeo .seo {padding-left: 100%;font-weight: 100;line-height: 1;font-size: 13px;color: #adb3bb;}

/* gotop */
#gotop {padding: 6px 10px 14px 10px;background: var(--primary);display: flex;flex-direction: column;color: #fff;line-height: 220%;position: fixed;right: 20px;bottom: 20px;z-index: 999;border-radius: 50%;}
#gotop:before {border: #fff solid;border-width: 2px 0 0 2px;content: "";top: 10px;}

@media screen and (min-width: 1501px){
	.workframe {width: 1380px;}
	header #webmenu nav >ul >li >a font {padding: 3px 22px 3px 22px;}
	header #webmenu nav >ul >li >a font:before {font-size: 84%;}
}


@media screen and (min-width: 1141px){
	header{grid-template-columns: 14% 1fr 230px;grid-template-areas:
"logo menu btns";align-items:center;justify-items:center}
	header:before{height:calc(100% + 40px)}
	header #cis{top:0}
	header #webmenu{padding:25px 0px;grid-area:menu;display:flex;align-items:center;justify-content:center;flex-direction:row;width: 100%;}
	header #webmenu nav >ul{justify-content:flex-end;align-items:center}
	header #webmenu nav >ul >li:hover >a font{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);transform:translateY(-100%)}
	header.scroll #webmenu nav >ul >li >a font:before{color:var(--primary);font-size:14px;padding: 0px 0 0;}
	.webBox .slick-dots li:hover:before{border-color:var(--primary)}
	header #webmenu .top_btn{height:100vh;background:var(--secondary);top:0;left:0}
	header #webmenu .top_btn >div{margin:auto 0 5vh 0;width:5vw}
	header #webmenu nav ul li b{display:none}
	header #webmenu nav >ul >li{overflow:hidden;position:relative;margin:0}
	header #webmenu nav >ul >li:first-child:after{display:none}
	header #webmenu nav >ul >li:after{content:"";width:1px;height:20px;background:rgb(182 182 182 / 45%);display:block;position:absolute;left:0px;top:7px;-webkit-transform:skewX(360deg);transform:skewX(360deg)}
	header #webmenu nav >ul >li:hover{overflow:visible}
	header #webmenu nav >ul >li >p a{padding:25px 5px}
	header #webmenu nav >ul >li:hover >p a{color:var(--primary)}
	header #webmenu li .menu_body,header #webmenu li .menu_body .subOption li ul{width:170px;left:50%;z-index:1;opacity:0}
	header #webmenu li .menu_body ul{background:rgba(255,255,255,0.86)}
	header #webmenu li .menu_body .subOption li ul{position:absolute;top:0;left:-170px}
	header #webmenu li .menu_body .subOption li >div p{border-bottom:1px solid hsl(0deg 0% 51% / 6%)}
	header #webmenu li .menu_body .subOption li >div a{padding:8px 11px;height:auto;display:block;color: #000;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;font-size: 14px;}
	header #webmenu li .menu_body .subOption li >div a *{color:#3a3a3a;font-size:14px}
	header #webmenu li .menu_body li a font.text_en{font-size:12px;color:rgb(6 6 6 / 50%);font-weight:300;text-transform:capitalize;padding-top:2px}
	header #webmenu li .menu_body .subOption li >div a:hover{color: #fff;background-color: #173054;}
	header #webmenu li .menu_body .subOption li >div a:hover *{color:var(--white)}
	header #webmenu li:hover .menu_body,header #webmenu li .menu_body .subOption li:hover >ul{z-index:10;opacity:1;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;}
	header.scroll #webmenu nav >ul >li >p a{padding:15px 5px}
	header.scroll #webmenu .top_btn{height:100vh}
	footer #extra ul li:hover img{display:block}
}
@media screen and (max-width: 1140px){
	header{grid-template-areas:"logo btns";align-items:center;background-color:#ffffff;padding-right:0;padding:0 0vw}
	header:before{width:100%;display:none}
	header #webmenu{display:none}
	footer #footerflow{width:90%}
}
@media screen and (max-width: 1160px){
	header{justify-content:space-between}
	header #cis{padding:15px 15px}
	header #cis img{max-width:170px}
	.webBox{padding-top:45px}
	footer #footer_box{grid-template-columns:290px 1fr}
	#f_other .copy_box{display:flex;flex-direction:column;align-items:flex-start;opacity:0.6}
	footer #f_nav >div{display:flex;flex-direction:row;flex-wrap:wrap}
}
@media screen and (max-width: 980px) {
	footer{padding-top:60px}
	footer h5{margin-bottom:10px}
	footer #f_info p{margin-bottom:0}
	footer #f_info{padding:0 0 10px 0;margin-right:0}
	footer #footerflow{margin-bottom:0px;padding:10px 0px;border-bottom:0;width:80%}
	footer #footerflow >div{border-color:#4d4947}
	footer #footerflow >div:first-child{border-left:0}
	footer #footerflow >div:last-child{border-right:0}
	footer #footerflow >div a{padding:0;line-height:100%;text-align:center;color:#bba093}
	footer #footerflow >div a font{font-size:14px}
	footer #footerflow >div a i{font-size:24px}
	footer #f_info .infoText{margin-bottom:20px}
}

@media screen and (min-width: 769px){
	header.scroll #menu_btn[data-type="2"] { border-color: #fff; }
	header.scroll #menu_btn[data-type="2"] span {background: #ffffff;}
	header.scroll .btns_box a#openform[data-type="2"] svg { fill: #fff; }
	header.scroll .btns_box a[data-type="2"] { color: #fff; }
}
@media screen and (max-width: 768px){
	#webmenu_mb{width:100vw}
	#menu_btn[data-type="2"]{border-color:#555}
	header .btns_box a[data-type="2"]{color:#fff}
	footer #footer_box{display:flex;flex-direction:column-reverse;align-items:center}
	header .btns_box{padding:0 20px;margin-right:0px}
	#community{margin-top:20px;margin-bottom:10px;display:flex;flex-direction:column;align-content:center}
	footer #f_info .top{display:flex;flex-direction:column;margin-bottom:0px}
	footer #f_nav >div{display:flex;flex-direction:row;flex-wrap:wrap}
	#f_other .copy_box{display:flex;flex-direction:column;align-items:center;opacity:0.6}
	footer #f_logo{margin-bottom:0px;display:flex;flex-direction:column;align-items:center;margin-right:0}
}
@media screen and (max-width: 640px){
	footer{padding-top:50px}
	#menu_btn{margin-right:0px;margin-left:0px}
	header .btns_box a#openform{margin-left:0px}
	header .btns_box a.nycu_btn{width: 60px;}
	footer h5{margin:1.5rem 0 5px}
	footer #f_nav >div{width:100%;grid-gap:10px}
	footer #f_other{margin-top:1.35rem}
}
@media screen and (max-width: 480px){
	#webmenu_mb .contact_box { padding-bottom: 10vh; }
    footer #f_logo{margin:auto}
	footer #f_logo a{width:210px;text-align:center;margin:auto}
	footer #f_nav p a{padding:0 2px 0px 0}
	footer #footerflow >div {margin: 5px;border-width: 0;}
	footer #footerflow >div a font {display: none;}
	header #cis img{max-width:140px}
}
@media screen and (max-width: 380px){
	header #cis img{max-width:130px}
	header .btns_box a.lang_btn{font-size:15px;width:50px}
	header .btns_box a.lang_btn svg,header .btns_box a#openform svg{width:16px;height:16px}
	header .btns_box a#openform{width:30px;height:30px}
	header .btns_box{padding:0 10px;margin-right:0px}
	header #cis{padding:15px 8px}
}