@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=Quicksand:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Barlow: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&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Jost:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap');
*{margin:0;padding:0}
*:focus{outline:none}
body{margin:0}
body::selection{background:var(--primary);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:var(--font-family),sans-serif;font-size:16px;color:var(--info)}
ul,ol{list-style:none}
fieldset{border:0}
input,button,select,textarea{padding:5px 15px;width:calc(100% - 32px);border:0;border-radius:0;background:rgba(var(--gray-rgb),.2);box-shadow:none;outline:none;font-size:16px;color:var(--black);-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)}
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:100vw;height:100vh;top:0;left:0}
.bg_box:before{content:"";position:absolute;width:100%;height:100%;background:#ffffff;background:linear-gradient(to bottom,#ffffff,#ffffff00,#ffffff);background:linear-gradient(to bottom,#ffffff,#ffffff00,#ffffff)}
.nowrap_box{font-size:0}
.txt_num{font-family:'Quicksand',sans-serif}
.svg_clip{width:0;height:0}

/* btn */
.btn,.btn_outline{padding:2px 10px}
.more_btn{padding:5px 30px;border-radius:20px}

/* 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{-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:100%}
.webBox .pageh1{position:absolute;top:0;z-index:1}
.webBox .wrapper{position:relative;z-index:2;background-image:url(/images/44/Bg.jpg);background-repeat:repeat;background-position:50% 50%;background-size:contain}
.webBox .slick-slider{margin-bottom:0}

/* workframe */
.workframe{margin:0 auto;width:90%}

/* header */
header{padding:15px 5% 0;width:90%;z-index:1000;top:0;display:grid;grid-template-columns:20% 68% 12%;align-items:center}
header.scroll{background:rgb(0 0 0 / 90%);padding:5px 5%}
header #cis{z-index:1000}
header #menubtn{width:30px;z-index:1000}
header #menubtn a{margin:auto 0 auto auto;width:25px;height:20px}
header #menubtn a span{position:absolute;width:100%;height:2px;display:block;top:0;right:0;background:#fff}
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){top:calc(100% - 1px)}
header #menubtn[data-type="2"] a span{transition:.4s cubic-bezier(.645,.045,.355,1)}
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:10px 5px;font-size:17px;color:var(--white);letter-spacing:2px;font-weight:500}
header #webmenu nav ul li b{position:absolute;padding:0 5px 0 15px;width:23px;height:41px;display:inline-block;text-align:center;line-height:41px;top:calc((100% - 41px) / 2);right:0}
header #webmenu nav>ul>li .subOption li>div a{padding:7px 10px;display:block}
header #header_bar>a{line-height:100%;height:58px;width:58px;border:1px solid rgb(255 255 255 / 40%);border-radius:50px;display:inline-flex;align-items:center;justify-content:center;margin:0 7px}
header #header_bar svg{width:25px;height:25px;fill:#fff}

/* hSearch */
#hSearch{width:100%;height:0;top:64px;z-index:998}
#hSearch[data-type="2"]{height:142px}
#hSearch>div{margin:50px auto;width:700px}
#hSearch>div input{margin-right:15px;width:calc(100% - 89px);background:none;border-bottom:1px rgba(var(--black-rgb),.3) solid}
#hSearch>div a{border-radius:50%}
#hSearch>div a svg{margin:10px;width:22px;height:22px}
#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}

/* parallax_box */
.parallax_bg{margin-bottom:3vw;min-height:600px;background:no-repeat 50% / cover;background-attachment:fixed}
.parallax_svg{height:64px;background-repeat:no-repeat;background-size:2000px 64px;left:0;z-index:2}
.parallax_svg.top{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='%23fff'/%3E%3C/svg%3E");top:0}
.parallax_svg.bottom{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='%23fff'/%3E%3C/svg%3E");background-position:100% 0;bottom:0}

/* footer */
footer{background-image:url(/images/44/footerBg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative}
footer *{font-weight:300;font-size:15px;color:var(--white)}
footer .parallax_svg.top{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='%23172852'/%3E%3C/svg%3E")}
footer .footer_box{padding:50px 0}
footer .insede{display:grid;grid-template-columns:25% 75%}
footer #flogo{display:flex;flex-direction:column}
footer #f_info font:first-child{min-width:50px}
footer #f_info font:last-child a{font-family:'Lato',sans-serif;font-weight:400}
footer #more_extra{padding:5px;width:190px;font-weight:400;z-index:11}
footer #extra ul{width:200px;bottom:0;left:0;z-index:10}
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{margin-top:10px}
footer .other_txt,footer .other_txt a{font-size:12px;color:#737373;display:block}
footer .extra-aJ img{width:24px}
footer #f_info{display:grid;grid-template-columns:80% 20%;align-items:end}
footer .leeft h5{font-size:17px;font-weight:500;letter-spacing:4px;margin-bottom:10px}
footer #f_info p{display:flex;align-items:center;font-size:16px;letter-spacing:2px;margin:10px 0}
footer #f_other{display:flex;border-bottom:1px solid #696969;padding-bottom:30px;margin-bottom:30px}
footer #f_other a{width:auto;margin-right:40px;font-weight:500;font-size:17px;letter-spacing:3px}
footer #f_other #footermeu{display:flex;flex-wrap:wrap}
footer #webCopy{display:flex;justify-content:center}
footer .rightt{display:flex;flex-direction:column}
footer .rightt a{background:#267e20;display:flex;justify-content:center;padding:10px 0;align-items:center;margin-bottom:4px;font-family:"Barlow",sans-serif}
footer .rightt a.facebook{background:#224078}
footer .rightt a svg{width:19px;height:19px;fill:#fff;margin-right:6px}

/* 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}

/* follow */
.follow{position:fixed;right:36px;bottom:15%;display:flex;flex-direction:column;align-items:center;z-index:98}
.follow.scroll{right:19px;bottom:95px}
.follow p{writing-mode:vertical-lr;color:#fff;font-family:"Nunito Sans",sans-serif;font-size:13px;display:flex;flex-direction:row;align-items:center}
.follow p span{width:1px;height:60px;display:block;margin:20px auto;background:#fff}
.follow a{margin:5px 0;transition:all linear 0.3s}
.follow a svg{width:17px;height:17px;fill:#fff}
.follow.scroll p{color:#323232}
.follow.scroll p span{background:#323232}
.follow.scroll a{background:#f39820;width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:50px}
#footer_btn{right:20px;bottom:45px;z-index:2000}
#footer_btn a{margin-top:10px;line-height:40px}
#footer_btn a svg{margin:auto;width:60%;height:60%}
#footer_btn a.line{background:#12b508}
#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:""}
@media screen and (min-width:1441px){
    .workframe{width:var(--width-xxl)}
}
@media screen and (min-width:1281px){
    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:30px 25px;display:inline-flex;align-items:center}
header #webmenu nav>ul>li:last-child>p a:after{content:'';width:70%;position:absolute;bottom:20px;left:15%;height:1px;background:var(--primary)}
header #webmenu nav>ul>li>p a:before{content:'';width:8px;height:8px;background:var(--primary);border-radius:50px;position:absolute;left:-20px;opacity:0}
header #webmenu nav>ul>li:hover>p a:before{left:0px;opacity:1}
header #webmenu li .menu_body,header #webmenu li .subOption ul{position:absolute;width:170px;right:calc(50% - 85px);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:150%;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)}
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>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}
#hSearch{top:90px}
footer #extra ul li:hover img{display:block}
}
@media screen and (max-width:1460px){
    header{grid-template-columns:20% 60% 20%}
header #webmenu nav>ul>li>p a{padding:30px 15px}
}
@media screen and (max-width:1280px){
    header #webmenu nav>ul>li>p a{padding:10px 30px}
header{padding-top:10px;padding-bottom:10px;display:block}
header #cis{width:81%}
header #webmenu{padding:15px 0;width:350px;height:100vh;background:var(--primary);box-shadow:0 10px 10px rgba(var(--black-rgb),.5);top:0;right:calc(-1 * var(--width-xs));z-index:999}
header #webmenu nav{overflow-y:scroll;margin-top:65px;padding:0 10px;height:calc(100% - 65px)}
header #webmenu nav::-webkit-scrollbar{width:0}
header #webmenu nav>ul{padding-bottom:10vh}
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-bottom:10px;margin-left:1.3em}
header #webmenu li .menu_body .subOption .bo{position:relative}
header #webmenu li .menu_body .subOption a{padding:5px 45px 5px 0;color:var(--primary)}
header #webmenu li .menu_body .sub2Option a{padding:0 45px 0 0;font-weight:300;color:var(--triadic1)}
header #webmenu li .menu_body .sub3Option a{padding-right:5px;color:var(--triadic2)}
footer #flogo{width:100%;display:flex;justify-content:center;margin-bottom:30px}
}
@media screen and (min-width:1025px){
    footer *{vertical-align:top}
}
@media screen and (min-width:641px){
    .webBox #footer_btn a span{display:none}
}
@media screen and (max-width:1024px){
    .follow p{color:#323232}
    .follow p span{background:#323232}
    .follow a{background:#f39820;width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:50px}
    header #cis{width:77%}
    footer #f_other{margin-top:10px}
}
@media screen and (max-width:980px){
    header #cis{width:70%}
    .parallax_bg{min-height:400px}
    footer #f_info{width:100%}
    footer #f_other{width:100%;margin-top:24px}
    footer #f_other #footermeu a{width:33.3%}
}
@media screen and (max-width:768px){
    footer .insede{display:block}
    footer #extra,footer #f_info{margin-top:10px}
    #hSearch>div{width:90%}
    footer #f_info p{width:100%}
}
@media screen and (max-width:640px){
    .follow{left:unset;right:15px}
    .follow.scroll{bottom:111px;right:17px}
    .follow p{display:none}
    .follow a,.follow.scroll a{width:40px;height:40px}
    footer #f_info{display:block}
    footer #f_info .leeft{margin-bottom:20px}
    footer #f_other{flex-wrap:wrap}
    header,header.scroll{padding:15px 5%;background:#141414}
    header #cis{width:90%}
    header #cis img{width:250px}
    header #header_bar>a{display:none}
    .parallax_bg{min-height:80vw;background-attachment:initial}
    #webSeo{margin-top:30px}
    #footer_btn{width:auto;bottom:0;right:15px;display:flex}
    #footer_btn a svg{width:30px;padding:0}
    #footer_btn a span{width:60%;display:flex;align-items:center;color:white}
    #footer_btn a.line{margin-right:0;width:calc(50% - 0px);border-radius:0;-webkit-border-radius:0;-moz-border-radius:0}
    #footer_btn a.phone{margin-right:0;width:calc(50% - 0px);border-radius:0;-webkit-border-radius:0;-moz-border-radius:0}
    #footer_btn a.gotop{right:0;bottom:60px}
}
@media screen and (max-width:550px){
    header #webmenu{width:100%;top:66px}
}
@media screen and (max-width:480px){
    .follow{bottom:105px}
}
@media screen and (max-width:350px){
    header #header_bar svg{width:20px;height:20px}
    header #menubtn{width:25px}
    header #menubtn a{width:20px;height:15px}
}