@import url('/css/fontawesome-all.css');@import url('/css/font-awesome.min.css');@import url('/css/fontawesome.min.css');@import url('/css/all.min.css');@import url('/css/SeoJump.css');@import url('/css/contentBuilder.css');@import url('root.css');@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');@import url('/css/a11y-fix.css');
* { margin: 0; padding: 0; }
.fa { font-size: 1em; }
html.menu-open,body.menu-open { overflow: hidden; }
html { scroll-behavior: smooth; }
body { margin: 0; }
body::selection { background: rgba(var(--black-rgb),.1); text-shadow: none; color: var(--info); }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: rgba(var(--info-rgb),.3); }
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: "Noto Serif SC",sans-serif; font-size: 1rem; color: var(--info); }
ul,ol { list-style: none; }
.webBox *,.webBox:before,.webBox:after { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
fieldset { border: 0; }
input,button,select,textarea { width: calc(100% - 30px); border: 0; border-bottom: 1px var(--primary) solid; background: none; box-shadow: none; outline: none; font-size: 1rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { padding: 10px 15px; width: 100%; color: var(--info); }

/* 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: normal; }

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

/* btn */
.btn,.btn_outline { padding: 2px 10px; background-color: #000000; border: 1px solid #000000; border-radius: 2px; text-align: center; color: var(--info); }

/* 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: 0.75rem; 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 { color: var(--white); }

/* webBox */
.webBox { overflow: hidden; position: relative; width: 100%; }
.webBox .pageh1 { position: absolute; top: 0; z-index: 1; }
.webBox .wrapper { position: relative; z-index: 2; padding-top: 80px; }
.webBox .slick-slider { margin-bottom: 0; }
.webBox .wrapper_lines { width: 100vw; height: 100%; top: 180px; left: 0; position: absolute; z-index: -1; }
.webBox .wrapper_lines .center_box_1,.webBox .wrapper_lines .center_box_3 { position: absolute; background: rgb(225 225 225/40%); z-index: 10; pointer-events: none; }
.webBox .wrapper_lines .center_box_1 { width: 1px; height: 100%; left: 130px; }
.webBox .wrapper_lines .center_box_3 { width: 1px; height: 100%; right: 130px; }

/* .slick-dots */
.webBox .slick-dots { position: relative; margin-top: 45px; bottom: 0; }
.webBox .slick-dots li { width: 10px; height: 10px; display: inline-flex; }
.webBox .slick-dots li:before { margin: auto; display: block; border: 1px rgba(var(--white-rgb),.2) solid; content: ""; }
.webBox .slick-dots li.slick-active:before { border-color: var(--primary); }

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


/* header */
.header-skip-link { color: var(--info); padding: 8px 16px; z-index: 9999; }
header { z-index: 999; position: fixed; left: 0; top: 0; }
header .barBox .wrap:before { position: absolute; width: 100%; height: 0; display: block; top: 0; left: 0; z-index: -1; content: ""; transition: 0.6s; padding-top: 0; }
header.scroll { padding: 0 }
header.scroll .barBox .wrap { -webkit-transform: translateY(0px); transform: translateY(0px); }
header .barBox { position: fixed; z-index: 999 }
header .barBox .wrap { justify-content: space-between; position: fixed; left: 0; top: 0; width: -webkit-fill-available; grid-template-columns: 100px 1fr 110px; gap: 120px; display: grid; z-index: 50; align-items: center; padding: 10px 40px; margin: auto; background-color: #fff; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1); box-shadow: 0 0 15px rgba(0,0,0,0.1); }
header #cis { width: 90px; z-index: 999 }
@keyframes fillColor {
  0% { filter: grayscale(1) }
  100% { filter: grayscale(0) }
}
header #cis a { animation: fillColor 2.5s ease-in forwards }
header #cis a { display: flex; align-items: center }
header.scroll #cis { -webkit-filter: initial; filter: initial }
header #webmenu ul { background-color: rgb(255 255 255); display: flex; align-items: center; justify-content: space-between; }
header #webmenu li { position: relative }
header #webmenu li,header .langBox,header #cis { opacity: 0; will-change: transform,opacity; animation: reveal-menu-item .2s ease-out 0s forwards; transform: translate3d(0,-55px,0) }
@keyframes reveal-menu-item {
  0% { opacity: 0; transform: translate3d(0,85px,0) }
  100% { opacity: 1; transform: none }
}
header #cis { animation-delay: .1s }
header #webmenu li:nth-child(2) { animation-delay: .2s; }
header #webmenu li:nth-child(3) { animation-delay: .3s }
header #webmenu li:nth-child(4) { animation-delay: .4s }
header #webmenu li:nth-child(5) { animation-delay: .5s }
header #webmenu li:nth-child(6) { animation-delay: .6s }
header #webmenu li:nth-child(7) { animation-delay: .7s }
header #webmenu li:nth-child(8) { animation-delay: .8s }
header .langBox { animation-delay: .8s; display: flex; justify-content: flex-end; }
header #webmenu li a { color: var(--black); padding: 8px 0.3vw; text-align: center; position: relative; font-size: 1.15rem; letter-spacing: 1px; }
header #webmenu li p.pos_rel { align-items: center; justify-content: space-between; gap: 0.25rem; display: flex; /* padding-left: 2.75rem; */ }
header #webmenu li .menu-toggle { position: absolute; right: -40px; min-width: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--black); padding: 0.25rem; flex-shrink: 0; width: 2rem; height: 2rem; opacity: 0; z-index: 2; }
header #webmenu li .menu-toggle i:before,header #webmenu li .menu-toggle i:after { width: 12px; height: 2px; background: currentColor; display: block; content: ""; }
header #webmenu li .menu-toggle i:after { transform: translateY(-2px) rotate(90deg); transition: transform .2s linear; }
header #webmenu li.is-open .menu-toggle i:after { transform: translateY(-2px) rotate(0deg); }
header.open .navbox ul { display: none }
header #webmenu li .wire-cube { display: flex; left: -30px; pointer-events: none; opacity: 0; }
header #webmenu li:hover .wire-cube,header #webmenu li:focus-within .wire-cube,header #webmenu li.is-open .wire-cube { display: flex; opacity: 1; transform: translateY(-50%) scale(1.02); animation: spinCube 2.6s ease-out 1 both; }
.wire-cube { position: absolute; left: -29px; top: 13px; width: 20px; height: 20px; transform-style: preserve-3d; animation: none }
.wire-cube .face { position: absolute; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid #000; background: transparent }
.wire-cube .front { transform: translateZ(10px) }
.wire-cube .back { transform: rotateY(180deg) translateZ(10px) }
.wire-cube .right { transform: rotateY(90deg)  translateZ(10px) }
.wire-cube .left { transform: rotateY(-90deg) translateZ(10px) }
.wire-cube .top { transform: rotateX(90deg)  translateZ(10px) }
.wire-cube .bottom { transform: rotateX(-90deg) translateZ(10px); }
@keyframes spinCube {
  0% { transform: rotateX(0deg) rotateY(0deg) }
  50% { transform: rotateX(180deg) rotateY(180deg) }
  100% { transform: rotateX(360deg) rotateY(360deg) }
}
header #toolbar a { display: inline-block; }
header #slideMenumenu button { transition: none; display: flex; justify-content: center; width: 50px; height: 60px; flex-direction: column; align-items: center; gap: 10px; border-bottom: none; padding: 0; }
header #slideMenumenu button p { color: #fff; }
header #slideMenumenu button .btn { position: relative; width: 10px; height: 8px; display: flex; border: 0; background-color: #ffffff00; }
header #slideMenumenu button .btn span { position: absolute; width: 100%; height: 2px; background: var(--black); display: block; top: 0; right: 0; }
header.scroll #slideMenumenu button .btn span { background: var(--info); }
header #slideMenumenu button[data-type="1"] .btn span:nth-child(2) { top: calc(50% - 1px); width: 100%; right: auto; left: 0; display: none; }
header #slideMenumenu button[data-type="1"] .btn span:nth-child(3) { top: calc(100% - 1px); width: 60%; right: auto; left: 0; }
header #slideMenumenu button[data-type="1"] .btn 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 #slideMenumenu button[data-type="2"] .btn span { transition: .4s cubic-bezier(.645,.045,.355,1); }
header #slideMenumenu button[data-type="2"] .btn span:nth-child(1) { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
header #slideMenumenu button[data-type="2"] .btn span:nth-child(2) { opacity: 0; }
header #slideMenumenu button[data-type="2"] .btn span:nth-child(3) { top: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
header.headerfixed #slideMenumenu button .btn span { background: #1f1f1f; }
header #menuBox { position: fixed; top: 0; left: 0; width: 70vw; height: 100vh; padding: 8vh 3vw 0; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-100%); transition: transform .4s ease,opacity .4s ease,visibility .4s ease; z-index: 1001; }
header #menuBox[data-type="2"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
header #menuBox .box >ul { padding: 0 0 2vh 0; }
header #menuBox .box >ul >li { position: relative; }
header #menuBox .box >ul >li:last-child { border-bottom: 0; }
header #menuBox .box >ul >li >p,header #menuBox .box ul li .menu_body ul li .bo { position: relative; padding-right: 44px; }
header #menuBox .box ul li .menu_body,header #menuBox .box ul li .menu_body >ul li .sub2Option,header #menuBox .box ul li .menu_body >ul li .sub3Option { display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
header #menuBox .box >ul >li >p { border-bottom: 1px solid #d1d1d1; }
header #menuBox .box >ul >li >p a { padding: 10px 5px; display: block; font-size: 1.125rem; }
header #menuBox .box ul li .menu-toggle { position: absolute; right: 0px; padding: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 40px; top: calc((100% - 41px)/2); cursor: pointer; z-index: 50; border: 1px solid transparent; background: transparent; border-radius: 0.375rem; }
header #menuBox .box ul li .menu-toggle i { color: var(--info); }
header #menuBox .box ul li .menu-toggle i:before,header #menuBox .box ul li .menu-toggle i:after { width: 15px; height: 1px; background: #000000; display: block; content: ""; }
header #menuBox .box ul li .menu-toggle i:after { -webkit-transform: translateY(-1px) rotate(90deg); transform: translateY(-1px) rotate(90deg); -webkit-transition: all .2s linear; transition: all .2s linear; }
header #menuBox .box ul li.action .menu-toggle i.fa-minus:after,header #menuBox .box ul li .menu-toggle[aria-expanded="true"] i:after { -webkit-transform: translateY(-1px) rotate(0deg); transform: translateY(-1px) rotate(0deg); }
#menuBox .box ul li .menu_body >ul li .sub2Option { margin: 5px 0 15px; padding: 5px 15px; background: #3a3a3a; }
header #menuBox .box ul li .menu_body >ul li a { padding: 7px 10px; display: block; font-size: 1.125rem; color: #000000; cursor: pointer; z-index: 50; position: relative; }
header #menuBox .box ul li .menu_body .sub2Option a { color: #fff; }
header #menuBox .box ul li .menu_body .sub3Option a { color: #8b8b8b; }
header #menuBox .box ul li .menu_body .sub3Option a:before { content: "- "; }
header.headerfixed:before { background: var(--info); }
header.open a { color: #fff; }
header #menuBox .box >ul >li:first-child { border-top: none; }
header .langBox a { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: space-between; gap: 10px; }
header .langBox a svg { fill: var(--black); width: 24px; height: 24px; }
header .langBox a font { font-size: 1.125rem; color: #122338 }
/* menubg */
#menubg { width: 100vw; height: 100vh; top: 0; left: 0; }
#menubg[data-type="1"] { background: rgba(var(--secondary-rgb),0); z-index: -998; visibility: hidden; pointer-events: none; }
#menubg[data-type="2"] { background: rgb(0 0 0/40%); z-index: 998; visibility: visible; pointer-events: auto; }
/* top_search */
#top_search { width: 100%; height: 100%; background: rgb(0 0 0/46%); z-index: 999; }
#top_search form { margin: auto; padding: 60px 50px; width: 500px; box-shadow: 0 0 10px rgba(var(--black-rgb),.2); background: rgb(0 0 0/70%); }
#top_search #close_search { padding: 10px 15px 15px; top: 0; right: 0; }
#top_search #close_search font { margin: 5px auto; width: 30px; height: 30px; }
#top_search #close_search font:before,#top_search #close_search font:after { position: absolute; width: 100%; height: 1px; background: var(--white); display: block; content: ""; top: calc((100% - 1px)/2); left: 0; }
#top_search #close_search font:after { width: 1px; height: 100%; top: 0; left: calc((100% - 1px)/2); }
#top_search #close_search span { color: #fff }
.webBox #top_search #close_search font { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg) }
#top_search h3 { margin-bottom: 40px; font-weight: 300; font-size: 1.75rem; color: #f9f9f9; }
#top_search p >input { padding: 5px 45px 5px 15px; width: calc(100% - 60px); background: none; border: 0; color: var(--black); background-color: var(--white); }
#top_search p >a { top: 4px; right: 10px; }
#top_search p >a svg { width: 25px; height: 25px; }


/* footer */
footer#footer-info {position: relative;isolation: isolate;overflow: hidden;padding: 4.25rem 0 2.8rem;background: url(/images/39/img-f-Bg.jpg);}
footer#footer-info::before {position: absolute;width: 100%;height: 30%;background: linear-gradient(to top, rgb(0 0 0 / 0%) 0%, #27537a 100%);top: 0;left: 0;z-index: 1;content: "";opacity: .8;}
footer#footer-info::after {position: absolute;width: 100%;height: 60%;background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, #003466 100%);bottom: 0;left: 0;z-index: 1;content: "";opacity: 1;}
footer#footer-info * { color: var(--white); box-sizing: border-box; }
footer#footer-info .footer_wrap { position: relative; z-index: 2; margin: 0 auto; width: min(1366px,100%); }
footer#footer-info .footer_top { display:grid;grid-template-columns:25rem minmax(22rem,1fr) 24rem;grid-template-areas:"brand nav map" "contact nav map";gap:1.8rem 5rem;align-items:start;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.22);}
footer#footer-info .footer_brand { grid-area: brand; grid-column: 1/4; }
footer#footer-info .footer_logo { display: inline-flex; align-items: center; max-width: 24rem; transition: opacity .3s ease,transform .3s ease; }
footer#footer-info .footer_logo:hover { opacity: .82; transform: translateY(-.18rem); }
footer#footer-info .footer_logo img { display: block; width: 100%; max-height: 5.8rem; object-fit: contain; }
footer#footer-info .footer_contact { grid-area: contact; padding-top: .2rem; }
footer#footer-info .footer_contact p,footer#footer-info .footer_tel_group {display: flex;align-items: baseline;gap: 1.05rem;margin: 0 0 .25rem;}
footer#footer-info .footer_tel_group { gap: 2rem; flex-wrap: wrap; }
footer#footer-info .footer_tel_group p { margin: 0; }
footer#footer-info .footer_contact .label {min-width: 3.2rem;color: var(--secondary);font-family: "Inter",Arial,sans-serif;font-size: 1rem;font-weight: 600;line-height: 1.6;letter-spacing: .12em;}
footer#footer-info .footer_contact a,footer#footer-info .footer_contact span:not(.label) {font-size: 1.08rem;font-weight: 500;line-height: 1.7;letter-spacing: .06em;}
footer#footer-info .footer_contact a:hover { color: var(--secondary); transform: translateX(.25rem); }
footer#footer-info .footer_nav {/* grid-area: nav; *//* padding-top: 1.05rem; */}
footer#footer-info .footer_nav h3 {margin: 0 0 1rem;font-size: 1.2rem;font-weight: 600;line-height: 1.5;letter-spacing: .12em;}
footer#footer-info .footer_nav ul {display: grid;grid-template-columns: repeat(4,minmax(5rem,1fr));gap: .55rem 1rem;margin: 0;padding: 0;list-style: none;}
footer#footer-info .footer_nav a {position: relative;display: inline-block;padding: .18rem 0;font-size: 1rem;font-weight: 400;line-height: 1.6;letter-spacing: .08em;opacity: .94;transition: color .3s ease,transform .3s ease,opacity .3s ease;}
footer#footer-info .footer_nav a::after { content: ""; position: absolute; left: 0; bottom: -.1rem; width: 0; height: 1px; background: var(--secondary); transition: width .3s ease; }
footer#footer-info .footer_nav a:hover { color: var(--secondary); opacity: 1; transform: translateX(.25rem); }
footer#footer-info .footer_nav a:hover::after { width: 100%; }
footer#footer-info .footer_map {/* grid-area: map; *//* padding-top: 1rem; */}
footer#footer-info .footer_map a { display: block; overflow: hidden; border-radius: 0; box-shadow: 0 1rem 2rem rgba(0,0,0,.18); transition: transform .3s ease,box-shadow .3s ease; }
footer#footer-info .footer_map a:hover { transform: translateY(-.35rem); box-shadow: 0 1.35rem 2.6rem rgba(0,0,0,.24); }
footer#footer-info .footer_map img { display: block; width: 100%; height: 8.4rem; object-fit: cover; filter: saturate(.95) contrast(.98); }
footer#footer-info .footer_bottom { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem; align-items: center; padding-top: 2.1rem; }
footer#footer-info .footer_bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 2rem; }
footer#footer-info .footer_link { flex: 1 1 auto; min-width: 0; }
footer#footer-info .footer_link ul { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem .5rem; margin: 0; padding: 0; list-style: none; }
footer#footer-info .footer_link li { position: relative; display: flex; align-items: center; }
footer#footer-info .footer_link li.text_link + li.text_link::before { content: ""; display: block; width: 1px; height: .9rem; margin-right: 1rem; background: rgba(255,255,255,.38); }
footer#footer-info .footer_link .social_fb { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; min-width: 1.6rem; height: 2.4rem; padding: 0; border: 0; color: rgba(255,255,255,.68); font-family: Arial,sans-serif; font-size: 1.7rem; font-weight: 700; line-height: 1; }
footer#footer-info .footer_link .social_fb span svg { fill: #fff; width: 20px; height: 20px; }
footer#footer-info .footer_link .social_fb:hover { color: var(--secondary); transform: translateY(-.15rem); }
footer#footer-info .footer_link li.text_link a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: 0; border: 0; color: rgba(255,255,255,.62); font-size: .95rem; font-weight: 500; line-height: 1.5; letter-spacing: .08em; }
footer#footer-info .footer_link li.text_link a:hover { color: var(--secondary); transform: translateY(-.15rem); }
footer#footer-info .footer_link li.pill_link a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: .35rem 1.15rem; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; color: rgba(255,255,255,.95); font-size: .95rem; font-weight: 500; line-height: 1.4; letter-spacing: .08em; white-space: nowrap; }
footer#footer-info .footer_link li.pill_link a:hover { background: var(--secondary); border-color: var(--secondary); color: var(--primary); transform: translateY(-.18rem); }

/* Copyright */
footer#footer-info .footer_copy { flex: 0 0 auto; text-align: right; }
footer#footer-info .footer_copy p { display: inline; margin: 0; color: rgba(255,255,255,.62); font-family: "Inter",Arial,sans-serif; font-size: .86rem; font-weight: 400; line-height: 1.8; letter-spacing: .08em; text-align: right; }
footer#footer-info .footer_copy p + p::before { content: " "; }
#footer-info .footer_link a:focus,#footer-info .footer_link a:focus-visible { outline: none !important; box-shadow: none !important; }
body.is-keyboard-user #footer-info .footer_link a:focus,body.is-keyboard-user #footer-info .footer_link a:focus-visible { outline: 3px solid #d60000 !important; outline-offset: 3px !important; }

/* RWD */
@media screen and (max-width: 1180px) {
	footer#footer-info .footer_bottom { display: block; }
	footer#footer-info .footer_copy { margin-top: 1.5rem; text-align: left; }
	footer#footer-info .footer_copy p { text-align: left; }
}
@media screen and (max-width:640px) {
	footer#footer-info .footer_link ul { gap: .65rem .75rem; }
	footer#footer-info .footer_link li.pill_link a { width: 100%; min-height: 2.35rem; padding: .35rem .9rem; font-size: .88rem; }
	footer#footer-info .footer_copy p { display: block; font-size: .8rem; }
}





footer#footer-info .footer_copy { text-align: right; display: flex; align-items: baseline; gap: 3px; }
footer#footer-info .footer_copy p,footer#footer-info .footer_copy p a { margin: 0; color: rgba(255,255,255,.72); font-size: .8rem; font-weight: 400; line-height: 1.8; letter-spacing: .12em; text-align: right; }
footer#footer-info a:focus,footer#footer-info button:focus,#gotop button:focus { outline: none !important; box-shadow: none !important; }
body.is-keyboard-user footer#footer-info a:focus,body.is-keyboard-user footer#footer-info button:focus,body.is-keyboard-user footer#footer-info a:focus-visible,body.is-keyboard-user footer#footer-info button:focus-visible,body.is-keyboard-user #gotop button:focus,body.is-keyboard-user #gotop button:focus-visible { outline: 3px solid #d60000 !important; outline-offset: 3px !important; box-shadow: none !important; }
#gotop { right: 1.25rem; bottom: 1.25rem; z-index: 2000; }
#gotop button { position: relative; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid rgba(var(--primary-rgb),.2); border-radius: 50%; background: var(--white); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12); cursor: pointer; transition: background .3s ease,transform .3s ease,box-shadow .3s ease; }
#gotop button::before { content: ""; position: absolute; left: 50%; top: 50%; width: .75rem; height: .75rem; border-top: 2px solid var(--primary); border-left: 2px solid var(--primary); transform: translate(-50%,-30%) rotate(45deg); }
#gotop button:hover { background: var(--secondary); transform: translateY(-.2rem); box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.16); }
footer .f_nav a:focus { outline: none !important; box-shadow: none !important; }
footer .f_nav a:focus-visible { outline: 3px solid #d60000 !important; outline-offset: 3px !important; }
@media screen and (max-width:1440px) {
	footer#footer-info .footer_wrap {width: min(82rem,88%);}
	footer#footer-info .footer_top { grid-template-columns: 23rem minmax(20rem,1fr) 22rem; gap: 1.5rem 3rem; }
}
@media screen and (max-width:1280px) {
	footer#footer-info .footer_top { grid-template-columns: 1fr 1fr; grid-template-areas: "brand map" "contact nav"; gap: 2rem 3rem; }
	footer#footer-info .footer_nav ul { grid-template-columns: repeat(3,minmax(5rem,1fr)); }
}
@media screen and (max-width:1180px) {
	footer#footer-info { padding: 3.5rem 0 2rem; }
	footer#footer-info .footer_top,footer#footer-info .footer_bottom { display: block; }
	footer#footer-info .footer_top { padding-bottom: 0.6rem; }
	footer#footer-info .footer_brand,footer#footer-info .footer_contact,footer#footer-info .footer_nav,footer#footer-info .footer_map { margin-bottom: 2rem; }
	footer#footer-info .footer_logo img { max-height: 4.6rem; }
	footer#footer-info .footer_nav ul { grid-template-columns: repeat(4,minmax(5rem,1fr)); }
	footer#footer-info .footer_bottom { padding-top: 1.6rem; }
	footer#footer-info .footer_copy { margin-top: 1.5rem; text-align: left; display: flex; flex-direction: column; align-items: center; }
	footer#footer-info .footer_copy p { text-align: left; }
}
@media screen and (max-width:520px) {
	footer#footer-info .footer_nav ul { grid-template-columns: 1fr 1fr; gap: .65rem 1rem; }
	footer#footer-info .footer_tel_group { display: block; }
	footer#footer-info .footer_contact p { display: block; }
	footer#footer-info .footer_contact .label { display: block; margin-bottom: .2rem; }
	footer#footer-info .footer_link li:first-child { grid-column: 1/-1; display: flex; justify-content: center; }
	footer#footer-info .footer_link ul { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
	footer#footer-info .footer_link li + li::before { display: none; }
	footer#footer-info .footer_link a { width: 100%; }
}

/* webSeo */
#webSeo { padding: 10px 0; white-space: nowrap; box-sizing: border-box; }
#webSeo .seo { padding-left: 100%; font-family: var(--font-family),sans-serif; font-weight: 100; font-size: 0.8125rem; color: var(--info); }
/* gotop */
#gotop { right: 7px; bottom: 20px; z-index: 2000; }
#gotop button { border: 1px var(--primary) solid; }
#gotop button:before { position: absolute; width: 30%; height: 30%; border: solid var(--primary); border-width: 1px 0 0 1px; display: block; top: calc((100% - 7px)/2); left: calc((100% - 15px)/2); content: ""; }
#gotop button { width: 40px; height: 40px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#gotop button:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
@-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); }
}
@-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); }
}
#community .social { text-align: right; }
#community .social li { display: inline-block; }
#community .social li + li { margin-left: 20px; }
#community .social a { position: relative; display: block; font-size: 1.25rem; text-align: center; border-radius: 50%; line-height: 25px; transition: ease .3s; width: 25px; }
#community .social b { font-size: 0.75rem; transition: all .3s ease-out; display: none; }
#community .social svg { display: block; text-align: center; color: var(--white); width: 18px; height: 18px; fill: #fff; }
#main-content,#webmenu,#top-navigation { scroll-margin-top: 120px; }

@media screen and (max-width:1640px) {
  header .barBox .wrap { gap: 80px; }
  .wire-cube { left: 0px; top: 13px; }
}
@media screen and (min-width:1441px) {
  .workframe { width: min(1440px,100%); }
}
@media screen and (max-width:1440px) {
  header #webmenu li a { padding: 8px 10px; }
  .wire-cube { left: -22px; }
}
@media screen and (min-width:1281px) {
	.webBox .slick-dots li:hover:before { border-color: var(--primary) }
	.webBox header #webmenu li .menu_body { transform: translate(0,30px); -webkit-transform: translate(0,30px); -moz-transform: translate(0,30px); -ms-transform: translate(0,30px); -o-transform: translate(0,30px) }
	.webBox header #webmenu li .menu_body { transform: translate(0px,30px); -webkit-transform: translate(0px,30px); -moz-transform: translate(20px,30px); -ms-transform: translate(20px,30px); -o-transform: translate(20px,30px); }
	.webBox header #webmenu li:hover .menu_body,.webBox header #webmenu li:focus-within .menu_body,.webBox header #webmenu li.is-open .menu_body { transform: translate(0px,0); -webkit-transform: translate(0px,0); -moz-transform: translate(20px,0); -ms-transform: translate(20px,0); -o-transform: translate(20px,0); }
	header #slideMenumenu,header #webmenu li .menu-toggle { display: none }
	header #webmenu li.has-submenu .menu-toggle { display: inline-flex; opacity: 1 }
	header #webmenu nav ul li:hover,header #webmenu nav ul li:focus-within { overflow: visible; }
	header #menuBox .box::-webkit-scrollbar { width: 0 }
	header.scroll #webmenu li a {   }
	header #webmenu nav ul li:hover a { color: var(--black); }
	header #webmenu li .menu_body,header #webmenu li .menu_body .subOption li ul { width: 160px; left: calc(50% - 80px); z-index: 1; opacity: 0 }
	header #webmenu li .menu_body ul { -webkit-box-shadow: 0 0 10px rgb(0 0 0/10%); box-shadow: 0 0 10px rgb(0 0 0/10%); text-align: left; display: block; }
	header #webmenu li .menu_body ul li:hover { /* background-color: var(--black); */ }
	header #webmenu li .menu_body ul li:hover a { color: var(--white); background-color: var(--black); }
	header #webmenu li .menu_body .subOption li ul { position: absolute; top: 0; left: -170px }
	header #webmenu li .menu_body .subOption li >div a:hover {   }
	header #webmenu li .menu_body .subOption li >div a { display: block; padding: 9px 10px; font-size: 1rem; border-bottom: 1px solid hsl(0deg 0% 0%/14%); }
	header #webmenu li:hover .menu_body,header #webmenu li:focus-within .menu_body,header #webmenu li.is-open .menu_body,header #webmenu li .menu_body .subOption li:hover >ul,header #webmenu li .menu_body .subOption li:focus-within >ul { z-index: 10; opacity: 1 }
	header #menuBox { top: 160px; bottom: 0; max-height: 625px; -webkit-transform: translateX(140px); transform: translateX(140px) }
	header.scroll #menuBox { opacity: 0; transform: translateX(-100%); pointer-events: none }
}
@media screen and (max-width:1280px) {
	.webBox .wrapper { padding-top: 60px }
	header { background-color: #fff; padding: 0 }
	header .barBox a svg { fill: var(--triadic1) }
	header .barBox a font { color: var(--triadic1) }
	header .navbox { display: none }
	header .barBox .wrap { width: calc(100% - 40px); padding: 0 20px; grid-template-columns: 1fr 116px 40px; gap: 20px; }
	header #cis { width: 70px }
	header #menuBox { width: 30vw; }
	header #menuBox[data-type="2"] { overflow-y: scroll }
	header #menuBox[data-type="2"]::-webkit-scrollbar { width: 0 }
	header.scroll:before { background: var(--white) }
}
@media screen and (max-width:1024px) {
	.webBox .wrapper_lines .center_box >div { border-width: 0 0 0 1px }
}
@media screen and (max-width:960px) {
	header #menuBox .box ul li .menu_body >ul li a { font-size: 0.9375rem; }
	header #menuBox .box >ul >li >p a { font-size: 1.0625rem; }
	header #menuBox { padding: 11vh 6vw 8vh; width: 70vw; }
	header #menuBox:before { width: 100vw; height: 40vh; }
	header #slideMenumenu button { width: 70px; height: 70px }
	header .buttons { display: flex; gap: 10px }
	header .barBox .buttons:before { left: 0 }
	header .barBox .buttons { grid-template-columns: 120px 70px }
.webBox .wrapper_lines .center_box_1 {left: 10px;}
.webBox .wrapper_lines .center_box_3 {right: 10px;}
}
@media screen and (max-width:550px) {
	#top_search form { padding: 10vw 5vw; width: 80vw }
	#top_search #close_search { padding: 10px 15px; border: 0 }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; transform: none !important; }
}

.skip-links { position: absolute; left: 0; top: 0; z-index: 99999; }
.skip-links a { position: absolute; left: 0; top: -4rem; display: block; padding: .75rem 1rem; background: #000; color: #fff; font-size: 1rem; line-height: 1.5; letter-spacing: .05em; white-space: nowrap; text-decoration: none; }
.skip-links a:focus { top: 0; }
/* Accesskey */
.accesskey { position: absolute; left: .5rem; top: .5rem; z-index: 1002; display: inline-block; padding: .25rem .45rem; background: rgba(255,255,255,.96); color: var(--primary); font-size: 1rem; line-height: 1.2; letter-spacing: .05em; text-decoration: none; transform: translateY(-150%); opacity: 0; }
.accesskey:focus { transform: translateY(0); opacity: 1; }
/* Header */
#top-navigation { position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; }
#top-navigation .barBox,#top-navigation .barBox .wrap { position: relative; }
#top-navigation .barBox { z-index: 1000; width: 100%; }
#top-navigation .barBox .wrap { position: relative; left: auto; top: auto; z-index: 50; display: grid; grid-template-columns: minmax(17rem,28rem) minmax(0,1fr) auto auto; align-items: center; gap: 1.5rem; width: min(96%,120rem); min-height: 6.875rem; margin: 0 auto 0 20px; padding: 0; background: transparent; box-shadow: none; }
.webBox .wrapper { padding-top: 6.875rem; }
.webBox .wrapper::before {content: '';position: absolute;left: 0;top: 0;z-index: 0;width: 28%;height: 730px;background: #f5f5f5;pointer-events: none;}
#top-navigation #cis { position: relative; z-index: 3; width: auto; opacity: 1; animation: none; transform: none; }
#top-navigation #cis a { display: inline-flex; align-items: center; max-width: 100%; animation: none; transition: opacity .3s ease,transform .3s ease; }
#top-navigation #cis a:hover { opacity: .82; transform: translateY(-.125rem); }
#top-navigation #cis img { display: block; width: min(100%,25rem); max-height: 5.2rem; object-fit: contain; }
#top-navigation .navbox { display: block; min-width: 0; }
#top-navigation #webmenu,#top-navigation #main-navigation { position: relative; z-index: 2; display: block; width: 100%; }
#top-navigation #webmenu ul,#top-navigation #main-navigation ul { display: flex; align-items: center; justify-content: flex-end; gap: 0; margin: 0; padding: 0; background: transparent; list-style: none; }
#top-navigation #webmenu li,#top-navigation #main-navigation li { position: relative; opacity: 1; animation: none; transform: none; }
#top-navigation #webmenu li + li::before,#top-navigation #main-navigation li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: .9rem; background: rgba(var(--info-rgb),.2); transform: translateY(-50%); }
#top-navigation #webmenu li a,#top-navigation #main-navigation li a { position: relative; display: block; padding: .75rem 1.1rem; color: var(--info); font-size: clamp(.9rem,.9vw,1.1rem); font-weight: 600; line-height: 1.5; letter-spacing: .12em; text-align: center; white-space: nowrap; text-decoration: none; transition: color .3s ease,transform .3s ease; }
#top-navigation #webmenu li a::after,#top-navigation #main-navigation li a::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .35rem; height: .125rem; background: var(--secondary); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; }
#top-navigation #webmenu li a:hover,#top-navigation #main-navigation li a:hover,#top-navigation #webmenu li:focus-within > a,#top-navigation #main-navigation li:focus-within > a { color: var(--primary); transform: translateY(-.125rem); }
#top-navigation #webmenu li a:hover::after,#top-navigation #main-navigation li a:hover::after,#top-navigation #webmenu li:focus-within > a::after,#top-navigation #main-navigation li:focus-within > a::after { transform: scaleX(1); }
#top-navigation .lang_box {position: relative;z-index: 3;display: flex;align-items: center;justify-content: center;padding: .35rem;border-radius: 999px;background: #fbeece;}
#top-navigation .lang_box a { display: flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.2rem; border-radius: 999px; color: var(--primary); font-family: "Inter",sans-serif; font-size: .95rem; font-weight: 600; line-height: 1; text-decoration: none; transition: background .3s ease,color .3s ease,transform .3s ease; }
#top-navigation .lang_box a:hover,#top-navigation .lang_box a.active { background: var(--secondary); color: #fff; }
#top-navigation #slideMenumenu { position: relative; z-index: 1003; display: none; align-items: center; justify-content: flex-end; }
#top-navigation #slideMenumenu button { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 0; border-radius: 50%; background: var(--primary); cursor: pointer; }
#top-navigation #slideMenumenu button:hover { background: var(--secondary); transform: translateY(-.125rem); }
#top-navigation #slideMenumenu button .btn { position: relative; display: block; width: 1.35rem; height: 1rem; padding: 0; border: 0; background: transparent; }
#top-navigation #slideMenumenu button .btn span { position: absolute; left: 0; display: block; width: 100%; height: .125rem; background: #fff; border-radius: 999px; }
#top-navigation #slideMenumenu button .btn span:nth-child(1) { top: 0; }
#top-navigation #slideMenumenu button .btn span:nth-child(2) { top: calc(50% - .0625rem); display: block; }
#top-navigation #slideMenumenu button .btn span:nth-child(3) { top: calc(100% - .125rem); width: 100%; }
#top-navigation #slideMenumenu button[data-type="2"] .btn span:nth-child(1) { top: 50%; transform: rotate(45deg); }
#top-navigation #slideMenumenu button[data-type="2"] .btn span:nth-child(2) { opacity: 0; }
#top-navigation #slideMenumenu button[data-type="2"] .btn span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
#top-navigation #menuBox { position: fixed; left: 0; top: 0; z-index: 1002; width: min(80vw,28rem); height: 100vh; padding: 6.5rem 2rem 2rem; background: #fff; box-shadow: 1rem 0 2.5rem rgba(0,0,0,.12); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-100%); transition: transform .4s ease,opacity .4s ease,visibility .4s ease; }
#top-navigation #menuBox[data-type="2"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
#top-navigation #menuBox .box > ul { margin: 0; padding: 0; list-style: none; }
#top-navigation #menuBox .box > ul > li > p { position: relative; margin: 0; padding: 0; border-bottom: 1px solid rgba(var(--info-rgb),.16); }
#top-navigation #menuBox .box > ul > li > p a { display: block; padding: 1rem .25rem; color: var(--info); font-size: 1.125rem; font-weight: 700; line-height: 1.6; letter-spacing: .08em; text-decoration: none; }
#top-navigation #menuBox .box > ul > li > p a:hover,#top-navigation #menuBox .box > ul > li > p a:focus { color: var(--primary); padding-left: .85rem; background: rgba(var(--primary-rgb),.05); }
#top-navigation #menuBox .menu_body a { display: block; padding: .75rem 1rem; color: rgba(var(--info-rgb),.86); font-size: 1rem; text-decoration: none; }
#top-navigation #menuBox .menu_body a:hover,#top-navigation #menuBox .menu_body a:focus { color: var(--primary); background: rgba(var(--secondary-rgb),.22); }
#menubg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; border: 0; }
#menubg[data-type="1"] { z-index: -1; visibility: hidden; pointer-events: none; background: rgba(0,0,0,0); }
#menubg[data-type="2"] { z-index: 999; visibility: visible; pointer-events: auto; background: rgba(0,0,0,.42); }
#top-navigation a:focus,#top-navigation button:focus,#menubg:focus,.skip-links a:focus,.accesskey:focus { outline: .1875rem solid #d60000; outline-offset: .1875rem; }
#top-navigation.scroll { scroll-margin-top: 7.5rem; background: #fff; box-shadow: 0 .5rem 1.875rem rgba(0,0,0,.06); }


@media screen and (max-width:1500px) {
	#top-navigation .barBox .wrap { grid-template-columns: minmax(15rem,24rem) minmax(0,1fr) auto auto; gap: 1rem; }
	#top-navigation #webmenu li a,#top-navigation #main-navigation li a { padding-left: .65rem; padding-right: .65rem; letter-spacing: .08em; }
	#top-navigation #webmenu li a::after,#top-navigation #main-navigation li a::after { left: .65rem; right: .65rem; }
}
@media screen and (max-width:1280px) {
	#top-navigation .barBox .wrap { grid-template-columns: minmax(12rem,1fr) auto auto; width: calc(100% - 2.5rem); min-height: 5rem; }
	.webBox .wrapper { padding-top: 5rem; }
	#top-navigation #cis img { max-height: 3.9rem; }
	#top-navigation .navbox,#top-navigation #webmenu { display: none; }
	#top-navigation #slideMenumenu { display: flex; }
	#main-content,#webmenu,#main-navigation,#top-navigation,#footer-info { scroll-margin-top: 6.5rem; }
	footer#footer-info::before { height: 80%; }
}
@media screen and (max-width:640px) {
	#top-navigation .barBox .wrap { grid-template-columns: minmax(0,1fr,1fr) auto; width: calc(100% - 1.5rem); gap: .75rem; }
	#top-navigation #cis img { max-width: 15rem; max-height: 3.3rem; }
	#top-navigation #slideMenumenu button { width: 2.85rem; height: 2.85rem; }
	#top-navigation #menuBox { width: 84vw; padding: 5.75rem 1.35rem 2rem; }

}
#footer-info .footer_nav a:focus,#footer-info .footer_nav a:focus-visible,#footer-info .footer_link a:focus,#footer-info .footer_link a:focus-visible { outline: none !important; box-shadow: none !important; }

body.is-keyboard-user #footer-info .footer_nav a:focus,body.is-keyboard-user #footer-info .footer_nav a:focus-visible,body.is-keyboard-user #footer-info .footer_link a:focus,body.is-keyboard-user #footer-info .footer_link a:focus-visible { outline: 3px solid #d60000 !important; outline-offset: 3px !important; box-shadow: none !important; }