@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=Frank+Ruhl+Libre:wght@300;400;500;700;900&family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

*{margin:0;padding:0}
*:focus{outline:none}
body{margin:0}
body::selection{background:var(--gray);text-shadow:none;color:var(--white)}
body::-webkit-scrollbar{width:5px}
body::-webkit-scrollbar-track{background:rgba(var(--gray-rgb),.4)}
body::-webkit-scrollbar-thumb{background:var(--primary)}
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:'Rajdhani',var(--font-family),sans-serif;font-size:max(1.1 * (1vw + 1vh) / 2,16px);color:var(--info)}
ul,ol{list-style:none}
fieldset{border:0}
input,button,select,textarea{padding:5px 15px;width:calc(100% - 32px);border:1px rgba(var(--black-rgb),.15) solid;border-radius:0;background:none;box-shadow:none;outline:none;font-size:16px;color:var(--gray);-webkit-appearance:none;-moz-appearance:none;appearance:none}
select{padding:10px 15px;width:100%}
input#Checknum{margin-right:15px;width:70px;max-width:calc(100% - 97px)}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{font-weight:400;color:rgba(var(--black-rgb),.6)}
input::-moz-placeholder,textarea::-moz-placeholder{font-weight:400;color:rgba(var(--black-rgb),.6)}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{font-weight:400;color:rgba(var(--black-rgb),.6)}
input:-moz-placeholder,textarea:-moz-placeholder{font-weight:400;color:rgba(var(--black-rgb),.6)}

/* img */
img{max-width:100%}
.img_cover{width:100%;object-fit:cover}
.img_contain{width:100%;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}
#news_area .nowrap_box{font-size:0;display:flex;flex-wrap:wrap}
.txt_num{font-family:'Lato',sans-serif}

/* btn */
.btn,.btn_outline{padding:2px 10px}
.more_btn{padding:15px 10px;width:340px;z-index:8}
.more_btn span{letter-spacing:.2em;font-weight:400;font-family:'Lato',sans-serif;color:var(--white)}
.more_btn svg{width:30px;height:23px;fill:var(--white);top:calc((100% - 23px) / 2);right:20px}
.more_btn:before{position:absolute;width:0;height:calc(100% - 3px);background:#143a89;top:0;left:0;content:""}

/* 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,bgBox */
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,.more_btn svg{-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{width:100%}
.webBox .pageh1{top:0;z-index:1}
.webBox .wrapper{background:var(--white);z-index:2}
.webBox .slick-slider{margin-bottom:0}

/* workframe */
.workframe{margin:0 auto;width:90%}
#webSeo2{display:flex;flex-direction:column;align-items:center;height:25px;background:var(--primary)}
.webBox #webSeo2 .seo{color:white;font-size:max(1 * (1vw + 1vh) / 2,14px);display:flex;align-items:center;font-weight:200;letter-spacing:0.05em}

/* header */
header{padding:0 5%;width:90%;z-index:999;top:0;left:0}
header #cis{z-index:5;width:420px}
header #menubtn{top:calc((100% - 16px) / 2);left:3%;z-index:1000}
header #menubtn a{margin:auto 0 auto auto;width:25px;height:17px}
header #menubtn a span{position:absolute;width:100%;height:2px;background:var(--gray);display:block;top:0px;right:0}
header #menubtn[data-type="1"] a 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="1"] a span:nth-child(2){top:calc(50% - .5px)}
header #menubtn[data-type="1"] a span:nth-child(3){width:70%;top:calc(100% - 1px);right:30%}
header #menubtn[data-type="2"] a span{transition:.4s cubic-bezier(.645,.045,.355,1);background:var(--white)}
header #menubtn[data-type="2"] a span:nth-child(1),header #menubtn[data-type="2"] a span:nth-child(3){top:50%}
header #menubtn[data-type="2"] a span:nth-child(2){opacity:0}
header #webmenu nav>ul>li>p a{padding:13px 5px;font-size:18px}
header #webmenu nav ul li b{padding:0 5px 0 15px;right:0;position:absolute;padding-left:calc(100% - 34px);width:35px;height:41px;display:inline-block;text-align:center;line-height:41px;top:calc((100% - 41px) / 2);left:0;cursor:pointer}
header #webmenu nav ul li b i{color:#fff}
header #webmenu nav>ul>li .subOption li>div a{padding:8px 10px;display:block}
header #header_bar{display:flex;align-items:center;padding-left:10px;position:relative;justify-content:space-evenly;width:70px}
header #header_bar a.btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:39px;height:39px;border-radius:50%;color:#fff;font-size:17px;transition:all 0.3s;background-color:var(--primary);padding:0}
header #header_bar svg{width:15px;height:15px;fill:white}
#hSearch[data-type="2"] svg{fill:#000}
header.scroll{opacity:0}
header.scroll.show{background:rgba(var(--white-rgb),.8);opacity:1;top:0}

/* hSearch */
#hSearch{width:240px;right:-300px;opacity:0;z-index:-1;bottom:-66px}
#hSearch[data-type="2"]{right:0;opacity:1;z-index:10;bottom:-66px}
#hSearch input{width:calc(100% - 65px);border:0;color:var(--gray);font-family:var(--font-family),sans-serif}
#hSearch svg{width:18px;height:18px}

/* menubg */
#menubg{width:100vw;height:100vh;top:0;left:0}
#menubg[data-type="1"]{background:rgba(var(--black-rgb),0);z-index:-998}
#menubg[data-type="2"]{background:rgba(var(--black-rgb),.5);z-index:998}

/* footer */
footer{padding-top:30px;z-index:5;background-color:#FFDC35;background-image:url(/images/43/footer-bg.png)}
footer *{font-weight:300;font-size:15px;font-family:var(--font-family),sans-serif;color:#252525}
footer .workframe{overflow:hidden}
footer .leftbox{float:left;display:flex;width:100%;margin-bottom:20px;justify-content:center}
#flogo{width:470px}
footer .rightbox{float:right;width:calc(100% - 0px)}
footer .rightbox #f_info{float:left;width:calc(100% - 430px)}
footer .rightbox #f_other{float:right;width:360px}
#extra{display:none}
footer #f_info font:first-child{min-width:85px}
footer #f_info font{min-width:50px;font-family:'Lato',sans-serif;font-weight:400}
footer .footertiJ{font-size:20px;margin-bottom:10px;padding-bottom:10px;border-bottom:rgb(255 255 255 / 17%) 1px solid;font-weight:500;letter-spacing:0.15em;width:100%}
footer *{font-weight:400}
footer .footleft{display:flex;align-items:flex-start}
footer .footwecen{display:flex;flex-wrap:wrap;width:85%}
footer .footwecen p{margin-bottom:8px;width:50%;display:flex;align-items:center}
footer .footwecen p i{width:20px;aspect-ratio:1/1;object-fit:contain;display:flex;justify-content:center;align-items:center;margin-right:5px}
footer #footer-qrcode{width:20%;aspect-ratio:1/1;object-fit:contain}
footer .footwecen .nav{display:flex;flex-wrap:wrap}
footer .footwecen .nav a{width:50%;margin:0 0 9px}
footer #f_info font:last-child a{font-weight:400;color:#252525}
footer #more_extra{padding:5px;width:190px;z-index:2}
footer #extra ul{width:200px;bottom:0;left:0;z-index:1}
footer #extra ul li{padding:5px 15px}
footer #extra ul li font{line-height:140%}
footer #extra ul li font:first-child{font-size:15px;font-style:italic}
footer #extra ul li img{position:absolute;max-width:150px;top:100%;left:15px;z-index:8;max-height:150px;display:none}
footer .other_txt{font-size:13px}
footer #footerSet{padding:20px 0}
#footerSet .info{float:left;overflow:hidden}
#footerSet .info div,#footerSet .info p,#footerSet .info .SeoWebFooter a{display:inline-block;vertical-align:top;font-size:13px}
#footerSet .info .SeoWebFooter{margin-left:10px}
#footerSet .info a{letter-spacing:0.5px}
#footerSet .community{float:right;text-align:right}
#footerSet .community li{display:inline-block;margin-left:5px}
#footerSet .community li a{display:block;color:#999;border:2px solid #252525;width:25px;height:25px;line-height:140%;text-align:center;left:25px;border-radius:50%}
#footerSet .community li a:hover{color:#252525;background:var(--primary);border:2px solid var(--primary)}
#footerSet .community li a i{line-height:170%;color:#252525}
#footerSet .community li a:hover i{color:#ffffff}

/* webSeo */
#webSeo{padding:11px 0 2px;white-space:nowrap;box-sizing:border-box}
#webSeo .seo{padding-left:100%;font-weight:500;font-size:13px;color:#ff4141}

/* #gotop */
#gotop{right:30px;bottom:30px;z-index:100;width:44px;height:44px;background:var(--complement);border-radius:50%;border:#e0c336 3px solid}
#gotop span{font-family:'Lato',sans-serif;font-size:15px;font-weight:700}
#gotop span::before{content:"";width:25px;height:1px;background-color:#344818;display:block;position:absolute;top:calc(50% - 1.5px);z-index:1;right:0px}
#gotop span::after{content:"";width:0;height:0;border-style:solid;border-width:8px 8px 0 8px;border-color:#344818 transparent transparent transparent;position:absolute;top:calc(50% - 4.5px);right:auto;left:8px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}

/* footer_btn */
#footer_btn{right:15px;bottom:15px;z-index:2000;display:none}
#footer_btn a.circ{margin-top:10px;background:var(--white);box-shadow:0 0 10px rgba(var(--black-rgb),.2);line-height:40px}
#footer_btn a.circ svg{width:40px;height:22px}
#footer_btn a.circ.line{background-color:var(--triadic1)}
#footer_btn a.circ.phone{background-color:var(--primary)}
#footer_btn a.circ.line svg,#footer_btn a.circ.phone svg{fill:#fff}

@media screen and (min-width: 1441px) {

    .workframe, #custom_box {width: var(--width-xxl);}
}

@media screen and (min-width: 1281px) {
    .btn_hover:hover .more_btn span{color:var(--black)}
    .btn_hover:hover .more_btn svg{fill:var(--black)}
    .btn_hover:hover .more_btn:before{width:100%}
    .btn_hover:hover .bg_primary_5.more_btn span{color:var(--white)}
    .btn_hover:hover .bg_primary_5.more_btn svg{fill:var(--white)}
    header{padding:0 4.5%;width:92.5%}
    header #webmenu nav ul li b{display:none}
    header #webmenu nav ul li{position:relative}
    header #webmenu nav ul li .bo{position:relative;background:var(--white);z-index:1}
    header #webmenu nav>ul>li>p a{padding:27px 12px;letter-spacing:0.5px;font-size:17px;color:#000000}
    header #webmenu li .menu_body,header #webmenu li .subOption ul{position:absolute;width:200px;right:calc(50% - 100px);z-index:-1;opacity:0}
    header #webmenu li .menu_body ul{background:var(--white);box-shadow:0 0 10px rgba(var(--black-rgb),.3)}
    header #webmenu li .subOption li{overflow:hidden}
    header #webmenu li .subOption li>div a{padding:6px 15px;border-bottom:1px rgba(var(--black-rgb),.1) solid;line-height:190%;font-weight:300}
    header #webmenu li .subOption li:last-child>div a{border-color:none}
    header #webmenu li .subOption li>div a:hover{color:var(--primary);background-color:var(--complement)}
    header #webmenu li .subOption .sub2Option,header #webmenu li .subOption .sub3Option{top:0;right:-170px}
    header #webmenu nav>ul>li:hover,header #webmenu li .subOption li:hover{overflow:visible}
    header #webmenu nav .nowrap_box .menu a::before{content:"";width:calc(100% - 40px);height:2px;background-color:var(--complement);position:absolute;bottom:0;left:-100%}
    header #webmenu nav .nowrap_box .menu a::after{content:"";width:5px;height:5px;background-color:var(--complement);border-radius:50%;position:absolute;bottom:-10px;left:calc(50% - 2.5px)}
    header #webmenu nav .nowrap_box .menu:hover a{color:var(--complement)}
    header #webmenu nav .nowrap_box .menu:hover a::before{left:20px}
    header #webmenu nav .nowrap_box .menu:hover a::after{bottom:15px}
    header #webmenu nav .nowrap_box .menu:hover .menu_body .subOption li a::before,header #webmenu nav .nowrap_box .menu:hover .menu_body .subOption li a::after{display:none}
    header #webmenu nav .nowrap_box .menu:hover .menu_body .subOption li a{color:var(--info)}
    header #webmenu nav .nowrap_box .menu .menu_body .subOption li a:hover{background-color:var(--primary);color:var(--secondary)}
    header #webmenu nav>ul>li:hover .menu_body,header #webmenu li .subOption li:hover>ul{z-index:2;opacity:1}
    header #webmenu li:last-child .subOption .sub2Option,header #webmenu li:last-child .subOption .sub3Option{right:auto;left:-170px}
    footer #extra ul li:hover img{display:block}
    header.nowrap_box{display:flex;align-items:center;justify-content:space-between;top:25px}
    header #webmenu{width:calc(100% - 240px);display:flex;justify-content:flex-end}
    header #webmenu nav{display:flex;justify-content:flex-end;width:100%}
}

@media screen and (max-width: 1380px) {
    header #webmenu {width: calc(100% - 40px);}
}

@media screen and (max-width: 1280px) {
    header #cis{padding:10px 10px 8px 40px;width:380px}
    header #webmenu{padding:50px 0;width:375px;height:100vh;background:var(--primary);right:calc(-1 * var(--width-xs));z-index:999}
    header #webmenu nav{overflow-y:scroll;margin-top:15px;padding:0 10px;height:calc(100% - 65px)}
    header #webmenu nav::-webkit-scrollbar{width:0}
    header #webmenu nav>ul{padding-bottom:200px}
    header #webmenu li .menu_body,header #webmenu li .menu_body .subOption li ul{position:relative;display:none;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
    header #webmenu li .menu_body ul{margin-left:20px}
    header #webmenu li .menu_body .subOption .bo{position:relative}
    header #webmenu li .menu_body .subOption a{padding:7px 45px 7px 10px;color:var(--white)}
    header #webmenu li .menu_body .sub2Option a{font-weight:300;color:var(--triadic1)}
    header #webmenu li .menu_body .sub3Option a{color:var(--triadic2)}
    header{display:flex;padding:0 5%;background:white}
    header #header_bar{top:12px;right:3.5%;position:absolute;padding-left:0}
    header:after{display:none}
    header #header_bar a.btn{margin-left:5px}
    header #webmenu nav>ul>li>p a{color:#fff;border-bottom:1px solid rgb(255 255 255 / 30%)}
}

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

    footer .leftbox,footer .rightbox,footer .rightbox #f_info,.rightbox #f_info p,footer .rightbox #f_other,#fb-wrap{float:none;width:100%;text-align:center}
    footer .leftbox,footer .rightbox,footer .rightbox #f_info{margin-bottom:30px}
    #flogo{width:370px;margin:auto}
}

@media screen and (min-width: 1025px) {
    footer * {vertical-align: top;}
}

@media screen and (max-width: 1024px) {
    footer #f_other {margin-top: 10px;}
}

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

    footer #extra,footer #f_info{margin-top:10px}
    header #header_bar{display:none}
    footer #footer-qrcode{width:25%}
}

@media screen and (max-width: 550px) {
    #webSeo{padding-bottom:10px}
    footer{padding-bottom:10px}
    footer .workframe{text-align:center}
    #footerSet .info,#footerSet .community{float:none;overflow:hidden;text-align:center}
    footer #footerSet{padding:0px 0 0}
    footer .footleft{display:flex;flex-direction:column}
    footer .footwecen{width:100%}
    #gotop{bottom:50px;right:10px}
    #footer_btn{width:100%;right:0;bottom:0px;display:block}
    #footer_btn a{margin:0 0px;line-height:35px}
    .webBox #footer_btn a.circ{width:100%;height:45px;border-radius:0;box-shadow:none;margin-top:0px;display:flex;align-items:center;justify-content:center;color:var(--white)}
    .webBox #footer_btn a.line{background-color:#11b407}
    #footer_btn a.circ.line svg{fill:#ffffff}
    .webBox #footer_btn a.phone{background-color:var(--primary)}
    #footer_btn a.circ.phone svg{fill:#ffffff}
    header #webmenu{width:calc(100% - 0px)}
}

@media screen and (max-width: 450px) {
    .more_btn{padding:15px 0;width:200px}
    .more_btn span{font-size:14px;letter-spacing:1.2px}
    .more_btn svg{top:20px}
}