@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&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), Noto Sans 'NOTO SANS TC';font-size: 16px;color:  var(--info);}

ul , ol { list-style: none; }

fieldset { border: 0; }

input , button , select , textarea { padding: 10px 15px; width: calc(100% - 32px); border: 0; border-radius: 0; background: var(--gray); box-shadow: none; outline: none; font-size: 16px; color: var(--black); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { padding: 15px; width: 100%; }
input#Checknum { margin-right: 15px; width: 70px; max-width: calc(100% - 97px); }

/* 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; }
.nowrap_box { font-size: 0; }
.txt_num { font-family: 'Noto Sans TC', 'Noto Sans SC'; }

/* btn */
.btn , .btn_outline { padding: 2px 10px; }
.more_btn { min-width: 240px; border: 1px var(--secondary) solid; border-radius: 5px; }
.more_btn font { line-height: 60px; }
.more_btn span { width: 50px; height: 1px; top: calc((100% - 1px) / 2); right: -25px; }
.more_btn span:before { position: absolute; width: 8px; height: 1px; background: var(--secondary); display: block; right: 0; top: 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,bg_box */
a.photo , .bg_box { 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 { width: 100%; }
.webBox .pageh1 {top: 0;z-index: 1;opacity: 0;position: absolute;color: white;}
.webBox .wrapper { background: var(--white); z-index: 2; }
.webBox .slick-slider { margin-bottom: 0; }

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

/* header */
header{z-index:8;position: relative;width:100%;display: flex;transition:transform 1s cubic-bezier(0.23,1,0.32,1);background-color: #fff;padding: 10px;margin: auto;-webkit-transition: all .6s ease;-o-transition: all .6s ease;transition: all .6s ease;flex-direction: row;align-items: center;justify-content: space-around;}
header.scroll{
    position: fixed;
    z-index: 995;
}
header #cis a{display:block;background-repeat:no-repeat;background-position:0 50%;background-size:contain;}
header #cis a img{width:100%}
header #top-nav{border-top:5px solid #0583c9;border-bottom:1px solid #ededed;transition:all linear .2s}
header #menubar{margin-top: 0px;position: relative;z-index:5;/* width: 100%; */transition:all linear .3s;display: flex;align-items: center;flex-direction: row;justify-content: center;}
header.headerTop #menubar{margin-top:0}
header #cis{margin-top:0;z-index:6;max-width: 240px;display: flex;}
header .rightTab{float:right;padding:10px 0}
header .rightTab .topphone{margin-bottom:5px}
header .rightTab .topphone p{overflow:hidden}
header .rightTab .topphone p i{font-size:14px;margin-right:5px}
header .rightTab .topphone p a{color:#333;font-size:43px;font-family:'Bree Serif',serif;display:block;line-height:100%}
#translate >p{display:inline-block;vertical-align:initial;font-size:12px;margin-left:10px;color:#238dc7}
#translate >p a{color:#1b6c98}
#translate h3{display:block;position:fixed;bottom:120px;right:20px;z-index:8;width:40px;height:40px;text-align:center;line-height:40px;border-radius:50%;background-color: #e61111;color:#fff;border: 1px solid #cd0d0d;font-size:12px;cursor:pointer;}

#translate form{display:block;position:fixed;bottom:122px;right:70px;z-index:8;text-align:center;line-height:40px;border-radius:50%;background-color:#7b7fb2;color:#fff}
#translate form p{border: 1px solid #bfbfc0;border-radius:25px;overflow:hidden;background:#fff;}
#translate #goSearch{text-align:center;height: 35px;background: #292929;padding:5px 10px;color:#fff;line-height:20px;float:right;font-size:12px;letter-spacing:.1em;line-height: 30px;}
#translate #goSearch:hover{background: #e61111;}
#translate form input{height: 42px;width:110px;padding:0 5px;font-size:14px;display:inline-block;float:left;}
#Wlanguage a{display:block;position:fixed;bottom:70px;right:20px;z-index:8;width:40px;height:40px;text-align:center;line-height:40px;border-radius:50%;background-color: #393939;color:#fff;border: 1px solid #909090;font-size:12px;}
#menubar #main-menu ul{text-align: center;overflow:visible;position: relative;display: flex;}
#menubar #main-menu >ul >li{display: flex;position:relative;vertical-align:top;margin-left: 0px;align-items: center;}
#menubar #main-menu >ul >li >a{font-size:15px;padding: 10px 21px;position:relative;display: flex;color: #595959;transition:all linear .3s;font-size: 16px;letter-spacing: .07em;font-weight: 600;z-index: 1;}
#menubar #main-menu >ul >li:hover >a{color: #e61111;}
.phoneWrap,.mobile-main-nav,#mobile-menu,.nav-func,.sub2Option,.sub3Option{display:none;}
#menubar #main-menu >ul >li >a:hover:after {
    left: 0;
    width: 100%
}

#menubar #main-menu >ul >li >a:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0;
    height: 1px;
    background-color: #bb7474;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    width: 0;
}

#menubar #main-menu >ul >li >a::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -12.5px;
    z-index: -1;
    width: 15px;
    height: 25px;
    background-color: #e0e0e0;
    -webkit-transform: skewX(35deg);
    -ms-transform: skewX(35deg);
    transform: skewX(212deg);
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

#menubar #main-menu >ul >li >a:hover::before {
  left: 10px;
  opacity: 1;
}

#menubar #main-menu >ul >li:hover .subMenu {
  top: 100%;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

#menubar #main-menu >ul >li >a p{display: flex;vertical-align:middle;text-align:center;line-height:120%;color: #2f2f31;}
#menubar #main-menu >ul >li >a b{font-family:'Open Sans Condensed',sans-serif;display:block;text-align:center;line-height:100%;margin-bottom: 0px;display: none;}
#menubar #main-menu ul.subnav{display:none;position:absolute;width:200px;left:calc(50% - 100px);text-align:left;z-index:5;top:100%;box-shadow:0 0 20px #dedede}
#menubar #main-menu >ul >li:hover ul.subnav,#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:15px;display:block;color:#383838}
#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:#e8f1f7}
#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}
#g-map{position:relative;z-index:2;background:#fff;display: flex;width: 57%;margin: 0;}
#g-map iframe{width:100%;}
header #headerSet {
    margin-top: 0px;
    z-index: 5;
    transition: all linear .3s;
    display: flex;
}
#headerSet .community{
    display: flex;
}
#headerSet .community li{display: flex;margin-left:5px;}
#headerSet .community li a{display: flex;color: #ffffff;background-color: #b46564;width: 35px;height: 35px;text-align:center;font-size: 16px;border-radius: 50%;flex-direction: column;align-items: center;justify-content: center;}
#headerSet .community li a .fa{color:white;}
#headerSet .community li i{vertical-align: -webkit-baseline-middle;}
#headerSet .community li a:hover{color:#fff;background:#5f5f5f}


/* hSearch */
#hSearch { width: 100%; height: 0; top: 50px; z-index: 1000; }
#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 */
#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 */
#GGout-footer{display:flex;}
footer {z-index: 5;display: flex;flex-direction: column;width: 43%;}
footer * { font-family: 'Noto Sans TC', 'Noto Sans SC'; font-weight: lighter; font-size: 14px; color: var(--white); }
footer .f_inner {padding: 4% 0% 2%;text-align: left;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;flex-direction: row;align-items: center;}
footer #f_nav { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
footer #f_copy {margin-top: 25px;padding-top: 25px;display: flex;width: 100%;align-items: center;justify-content: center;border-top: #ffffff47 1px solid;}
footer #f_copy >div , footer #f_copy >div * { font-size: 12px; }
footer .BB-flex-S{
    align-items: flex-start;
    flex-direction: column;
    display: flex;
    width: 90%;
}
footer .mx01{
    display:flex;
    flex-direction: column;
    align-items: center;
}
footer .mx01 img{
	width:260px;
}
footer .mx02{
    display:flex;
    flex-direction: row;
    margin: 20px 0;
    flex-wrap: wrap;
}
footer .mx02 p{
	width:50%;
}
footer .mx03{
	display:flex;
	flex-direction: row;
	align-items: center;
}
/* webSeo */
#webSeo { padding: 5px 0; white-space: nowrap; box-sizing: border-box; }
#webSeo .seo { padding-left: 100%; font-size: 13px; opacity: .3; }

/* gotop */
#gotop {right: 10px;bottom: 20px;z-index: 99999;mix-blend-mode: difference;}
#gotop a {padding: 10px;width: 5px;display: flex;flex-direction: column;align-items: center;}
#gotop span {margin: 0 auto 15px;width: 2px;height: 30px;font-size: 15px;font-weight: 700;color: var(--black);--text-opacity: 1;background: rgba(255,255,255,var(--text-opacity));}
#gotop span:before {position: absolute;width: 2px;height: 8px;background: var(--secondary);display: block;top: 0;left: -3px;content: "";color: var(--black);--text-opacity: 1;background: rgba(255,255,255,var(--text-opacity));}
#gotop font {font-family: 'Noto Sans TC', 'Noto Sans SC';letter-spacing: -0.05em;font-weight: 500;-ms-writing-mode: tb-rl -webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;text-orientation: upright;font-size: 15px;font-weight: 700;color: var(--black);--text-opacity: 1;color: rgba(255,255,255,var(--text-opacity));}

/* footer_btn */
#footer_btn { right: 0; bottom: 140px; z-index: 999; }
#footer_btn a { margin: 15px 20px; }
#footer_btn a svg { width: 25px; height: 25px; }
#headerSet .workframe {width: auto;}

/* +footer電話
*----------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
.phoneWrap{display: none !important;}
footer #footerCompany .plus-information a:hover img{display:block}

}
@media screen and (max-width: 1024px) {
.phoneWrap{
    display: block;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 959595959;
}
.phoneWrap ul{display: flex;}
.phoneWrap ul li{width: 50%;box-sizing: border-box;background-color: #794646;}
.phoneWrap ul li + li{border-left: 1px solid #fff;}
.phoneWrap ul li a{display: inline-block;width: 100%;color: #fff;text-align: center;padding: 6px 0px;}
}

@media screen and (min-width: 1441px){
	.workframe {width: var(--width-xxl);}
}
@media screen and (min-width: 1281px){
	.writing { -ms-writing-mode: tb-rl -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
	.more_btn:hover span { right: -35px; }
	header #webmenu nav ul li { position: relative; vertical-align: top; }
	header #webmenu nav ul li.writing_straight { -ms-writing-mode: tb-rl -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
	header #webmenu nav ul li b { display: none; }
	header #webmenu nav ul li .bo { position: relative; background: var(--white); z-index: 1; }
	header #webmenu nav >ul >li >p a { padding: 0 6px 30px; }
	header #webmenu nav >ul >li:hover >p a { color: var(--primary); }
	header #header_bar { margin: 15px 0; justify-content: flex-end; }
	footer #extra ul li:hover img { display: block; }
}

@media screen and (max-width: 1024px) {
header #menubar{display:none;}
header{display: flex;position:fixed;left:0;top:0;width:100%;z-index:8;background:#fff;padding: 0px;}
.mobile-main-nav{display: flex;}
.nav-funcB{position:fixed;left:20px;top: 11px;font-size:30px;color:#b1b0b1;display: flex;}
.nav-funcB:hover{color:#b1b0b1}
#mobile-menu{width: 100%;background: #414141;height: calc(100vh - 80px);overflow:auto;padding-bottom:30px;position:fixed;top: 65px;left: 0;}
#mobile-menu >ul >li .menu_head,.subOption >li .sub2Title,.subOption >li .sub3Title{overflow:hidden;padding:15px;border-bottom: 1px solid rgba(152, 152, 152, 0.25);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:11pt;width:calc(100% - 20px)}
#mobile-menu >ul >li .menu_head a,.subOption >li .sub2Title a,.subOption >li .sub3Title a{color:#fff;padding: 6px;width: 100%;display: flex;}
#mobile-menu >ul >li .menu_head b,.subOption >li .sub2Title b,.subOption >li .sub3Title b{color: #aaaaaa;cursor:pointer;position:absolute;right:0;top:0;width:50px;height:56px;text-align:center;line-height:56px;}
#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 #a9a9a9;}
#mobile-menu >ul >li .menu_body li a,.subOption >li .sub2Option li p a{display:block;padding:10px 35px;font-size:11pt;color: #383838;}
#mobile-menu .subOption >li .sub2Title{background:#102c6c;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;color:#fff}
#mobile-menu .subOption >li .sub2Title.bo p a{display:inline-block;color:#fff}
#mobile-menu .subOption >li .sub3Title{background:#051d53;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:#fff}
#mobile-menu .subOption >li .sub3Option p{padding:15px 10px 15px 55px;background:#102c6c}
#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{}
header.nowrap_box{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    z-index: 999;
}
header #cis h2{text-align:center}
header #cis a img{max-height: 60px;width:auto;}
header .rightTab .topphone p a{font-size:30px}
header .rightTab .topphone{float:right;margin:0}
header .rightTab .translate{float:left}
header .workframe{width:100%;}
#comprehensive p{line-height:120%}
#comprehensive{width:90%}

}
@media screen and (max-width: 1280px){
	header #webmenu { position: fixed; padding: 15px 0; width: 350px; height: 100vh; background: var(--white); box-shadow: 0 10px 10px rgba(var(--black-rgb), .5); top: 0; right: calc(-1 * var(--width-xs)); }
	header #webmenu nav { overflow-y: scroll; margin-top: 45px; 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 .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(--triadic2); }
	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(--primary); }
}
@media screen and (max-width: 1024px){
	#GGout-footer{
    display: flex;
    flex-direction: column;
    }
    #g-map{
    	width:100%;
    	height:300px;
    }
    footer{
    	width:100%;
    }
    footer .f_inner{
    padding: 4% 5% 2%;
    padding-bottom: 40px;
    }
    #gotop{
    bottom: 46px;
    right: 0;
}
}
@media screen and (max-width: 760px){
	footer #f_nav {margin-top: 20px;}
	header #headerSet{display:none;}
	header.nowrap_box{
    justify-content: center;
}
}
@media screen and (max-width: 550px){
	footer #f_nav a {margin-right: 15px;width: 25%;margin: 2px 10px;}
	footer #f_info { margin-top: 30px; }
	footer .mx02 p{
    width: 100%;
    margin: 5px 0;
}
}