@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+Serif+TC:wght@200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/* main.less */
.webBox:before,.webBox:after { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box }
.aos-init { transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out }
.webBox header #menubtn[data-type="2"] a span:nth-child(1) { transform: rotate(45deg); -webkit-transform: rotate(45deg) }
.webBox header #menubtn[data-type="2"] a span:nth-child(3) { transform: rotate(-45deg); -webkit-transform: rotate(-45deg) }
@media (min-width:1281px) {
  .webBox header #webmenu li .menu_body { transform: translate(0,30px); -webkit-transform: translate(0,30px) }
  .webBox header #webmenu li .menu_body .subOption li .sub2Option { transform: translate(-30px,0); -webkit-transform: translate(-30px,0) }
  .webBox header #webmenu li .menu_body .subOption li .sub2Option li .sub3Option { transform: translate(-30px,0); -webkit-transform: translate(-30px,0) }
  .webBox header #webmenu li .menu_body .subOption li .sub2Option li:hover .sub3Option { transform: translate(0,0); -webkit-transform: translate(0,0) }
  .webBox header #webmenu li .menu_body .subOption li:hover .sub2Option { transform: translate(0,0); -webkit-transform: translate(0,0) }
  .webBox header #webmenu li:hover .menu_body { transform: translate(0,0); -webkit-transform: translate(0px,0px); padding-top: 10px; }
  .webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option { transform: translate(30px,0); -webkit-transform: translate(30px,0) }
  .webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option li .sub3Option { transform: translate(30px,0); -webkit-transform: translate(30px,0) }
  .webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option li:hover .sub3Option { transform: translate(0,0); -webkit-transform: translate(0,0) }
  .webBox header #webmenu li:last-child .menu_body .subOption li:hover .sub2Option { transform: translate(0,0); -webkit-transform: translate(0,0) }
}
.webBox header #search_box #openform { width: 24px; height: auto; aspect-ratio: 1/1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--primary); padding: 10px; }
.webBox header #search_box { display: flex; justify-content: flex-end; width: auto; align-items: center; gap: 10px; position: absolute; right: -4vw; display: none; }
.webBox header #search_box form { transform: translate(30px,0); -webkit-transform: translate(30px,0); display: flex; align-items: center; }
.webBox header #search_box[data-type="2"] form { transform: translate(0,0); -webkit-transform: translate(0,0) }
.webBox .img_scale img { transform: scale(1); -webkit-transform: scale(1); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
@media (min-width:1281px) {
  .webBox .img_scale:hover img { transform: scale(1.1); -webkit-transform: scale(1.1) }
}
.webBox #SeoStarRating font { margin-right: 5px; display: inline-block; line-height: 110%; vertical-align: text-bottom; color: #ffc107 }
.webBox #SeoStarRating font * { color: #ffc107 }
.webBox #SeoStarRating font:first-child { font-weight: bold; font-size: 18px }
.webBox #SeoStarRating font:last-child { color: #cb0244 }
.webBox #webSeo .seo { -webkit-animation: marquee 200s linear infinite; animation: marquee 200s linear infinite }
.webBox #footer_btn a { width: 40px; height: 40px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background-size: cover; padding: 5px; }
@media (max-width:550px) {
  .webBox #footer_btn a { width: 35px; height: 35px; border-radius: 50%; margin-bottom: 10px }
}
.webBox header #search_box form svg { display: flex; width: 17px; }
.webBox #footer_btn a:hover { background: var(--secondary); }
* { margin: 0; padding: 0 }
*:focus { outline: none }
body { margin: 0; -webkit-text-size-adjust: 100%; }
body,body * { -webkit-text-size-adjust: 100%; }
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: 190%; border-width: 0; font-family: var(--font-family),sans-serif; font-size: max(1.1*(1vw + 1vh)/2,15px); color: var(--info); letter-spacing: 0.05em }
ul,ol { list-style: none }
fieldset { border: 0 }
input,button,select,textarea { padding: 5px 15px; width: calc(100% - 0px); 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: 110px; 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; cursor: pointer; }
a.maskilink { position: absolute; width: 100%; height: 100%; z-index: 5; }
/* 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}bug*/
.txt_num { font-family: 'Quicksand',sans-serif }
.coouJJ * { font-size: max(1.2*(1vw + 1vh)/2,16px) }
.coouJJ font { display: flex; color: aliceblue }
.coouJJ a { display: flex }
.coouJJ svg { width: 21px; aspect-ratio: 1/1; margin-right: 10px; fill: #ffffff }
/* btn */
.btn,.btn_outline { padding: 2px 10px }
.more_btn { padding: 10px 35px; text-transform: capitalize }
.more_btn:before { position: absolute; width: 100%; height: 100%; background: var(--white); top: 0; left: 0; opacity: .3; z-index: 9; content: ""; -webkit-transition: -webkit-transform .6s; transition: -webkit-transform .6s; transition: transform .6s; transition: transform .6s,-webkit-transform .6s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,100%,0) }
/* 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 }
[class^="fancybox-"],[class^="fancybox-"] * { font-family: inherit; color: currentColor }
header,header a,a,.img_box:before,.coolineJ_box,#custom_area .custom_box ul li * { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
/* webBox */
.webBox { overflow: hidden; position: relative; width: 100% }
.webBox .pageh1 { position: absolute; top: 0; z-index: 1; animation: fadeAnimation 20s infinite; }
.webBox .wrapper { position: relative; background: #f4f4f4; overflow: hidden; }
.webBox .slick-slider { margin-bottom: 0 }
.workframe { margin: 0 auto; width: 90% }
.dambox { width: min(90%,1600px) }
@keyframes fadeAnimation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
.JJtitle .titlebameoo { font-weight: 600; font-size: max(1.7 * (1vw + 1vh)/2,20px); margin-bottom: 5px; color: #72514a; font-weight: 300; }
.JJtitle .cnlittle { font-weight: 400; font-size: max(4.2 * (1vw + 1vh)/2,28px); line-height: 100%; color: var(--primary); text-transform: uppercase; }
.JJtitle .Jterightbox .cnlittle:before { width: 120px; }
.JJtitle { margin-bottom: 65px; display: flex; align-items: center; flex-direction: column; }
.JJtitle.martop { margin-top: 120px; }
.JJtitle .midtexrb { width: min(60px,100%); margin-bottom: 12px; }
.ctntertitlewow.JJtitle .Jterightbox { display: flex; flex-direction: column; align-items: center; }
.JJtitle .twobox { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.JJtitle .twobox .arrow_btns_box svg { background: var(--primary); border-radius: 5px; padding: 16px; width: 19px; fill: #f3f3f3; }
@keyframes myfirst {
  0% { transform: translate(0,0) }
  50% { transform: translate(0,-10px) }
  100% { transform: translate(0,0) }
}
.JJtitle .centerbox { display: flex; flex-direction: column; align-items: center; }
/*JJtitle2*/
.JJtitle2 h2:before,.JJtitle2 h2:after { top: 0px; }
.JJtitle2 h2:before { content: ""; position: absolute; width: 10px; aspect-ratio: 1/1; border-radius: 55px; background: #302521; left: 10px; }
.JJtitle2 h2:after { content: ""; position: absolute; width: 10px; aspect-ratio: 1/1; border-radius: 55px; background: var(--primary); left: 25px; }
.jumpJJ:before,jumpJJ:after { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
.JJtitle2 h2 { font-weight: 700; font-size: max(4*(1vw + 1vh)/2,40px); text-transform: uppercase; color: #363636; display: flex; align-items: center; }
.JJtitle2 p { font-weight: 700; font-size: max(2.8*(1vw + 1vh)/2,26px); color: var(--primary); line-height: 100%; }
@keyframes myfirst {
  0% { transform: translate(0px,0px); }
  50% { transform: translate(0px,-10px); }
  100% { transform: translate(0px,0px); }
}
/* header */
header #webmenu nav>ul>li>p a { color: #ffffff; }
header.scroll { top: 0; }
header.scroll #openform { background: var(--secondary) }
header { z-index: 9999; top: 0; padding: 0; display: flex; justify-content: center; align-items: center; }
header *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
header:before {content: "";position: absolute;width: 20vw;left: 0;top: 0;background: #f0f3f7;height: 100px;padding: 0;border-radius: 0;display: none;}
header:after {content: "";position: absolute;width: 8vw;left: 6vw;top: 0;background: #f0f3f7;height: 100px;padding: 0;border-radius: 0;display: none;}
header .menu { display: flex; align-items: center; margin: 0 auto }
header .item {padding: 0px 3% 0px 0%;width: 100%;gap: 25px;}
header #header_bar { width: 233px }
header #header_bar a.con { background: #b01a26; padding: 9px 30px; border-radius: 50px; margin-left: 20px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; display: flex; align-items: center }
header #header_bar a.con:hover { background: #555 }
header #header_bar a.con font { color: var(--white); font-size: max(1.2*(1vw + 1vh)/2,16px); display: flex; align-items: center }
header #header_bar a.con font svg { fill: #ffffff; width: 20px; aspect-ratio: 1/1; margin-right: 10px }
header .top_btn { width: 96%; top: 0; left: 0 }
header .top_btn svg { margin: 10px; width: 19px; height: 19px; fill: #ffffff }
header #cis {z-index: 2222;display: flex;align-items: center;position: relative;padding: 9px 28px;background: #fdfdfd;top: 0;left: 0;justify-content: center;}
header #cis * { transition: all 0s ease-in-out; -webkit-transition: all 0s ease-in-out; }
header #cis img { width: 100%; height: 100px; }
header.scroll #cis img { width: min(320px,95%); height: 78px; padding: 2px 0; }
header.scroll:after {height: 80px;}
header #webmenu {display: flex;justify-content: flex-end;flex-direction: column;align-items: flex-end;width: 77%;}
header #webmenu .tex_box a { display: flex; color: white; align-items: center; font-size: 13px; }
header #menubtn { height: 70px; top: 0; right: 0px; z-index: 1000; width: 98%; }
header #menubtn a { margin: auto 0 auto auto; width: 30px; height: 25px; }
header #menubtn a span { position: absolute; width: 100%; height: 2px; background: var(--white); display: block; top: 0; right: 0 }
header #JPchose { color: white; }
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); background: #525252; }
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: max(1.2*(1vw + 1vh)/2,15px); }
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: 12px; }
header #webmenu nav ul li b .fa { color: #121212; }
header #webmenu nav>ul>li .subOption li>div a { padding: 7px 10px; display: block }
header.scroll { box-shadow: 0 0 20px rgba(var(--black-rgb),.3); padding: 0; background: #1b1b1b; }
header.scroll:before {height: 80px;}
header.scroll #cis { padding: 0; width: min(300px,100%); }
header #cis a { display: flex; flex-direction: column; align-items: center; }
header.scroll #cis a { padding: 0; }
header.scroll .item.menu { border-bottom: 0 }
#wwbewm { display: flex; align-items: center; justify-content: flex-end; /* display: none; */ }
#wwbewm a { padding: 11px; border-radius: 50%; margin-left: 8px; border: #ffffff 1px solid; }
#wwbewm svg { width: 18px; height: 18px; display: flex; fill: white; }
/* search_box */
#openform { background: var(--secondary); line-height: 45px }
#search_box svg { width: 75%; height: auto; display: flex; aspect-ratio: 1/1; }
#search_box form { width: 240px; box-shadow: 0 0 10px rgba(var(--black-rgb),.3); right: 0; bottom: -55px; opacity: 0 }
#search_box[data-type="2"] form { opacity: 1 }
#search_box form input { width: calc(100% - 65px); border: 0 }
/* menubg */
#menubg { width: 100vw; height: 100vh; top: 0; left: 0 }
#menubg[data-type="1"] { background: rgba(var(--black-rgb),0); }
#menubg[data-type="2"] { background: rgba(var(--black-rgb),.5); z-index: 998; }
/*cisfooterbox*/
.cisfooterbox:before { content: ""; position: absolute; height: 100%; bottom: 0; width: 1px; background: #d8d8d8; right: 3vw; }
.cisfooterbox:after { content: ""; position: absolute; height: 24vw; bottom: 0; width: 1px; background: #d8d8d8; right: 5vw; bottom: -4vw; transform: rotate(45deg); }
.cisfooterbox { position: relative; display: grid; grid-template-columns: 50% 50%; background: white; padding: 150px 0; width: 100vw; }
.cisfooterbox .cioleft { display: flex; align-items: center; gap: 6vw; }
.cisfooterbox .cioleft #flogo img { width: 17vw; }
.cisfooterbox .cioleft:before { content: ""; position: relative; width: 16vw; height: 1px; background: #747474; display: flex; }
.cisfooterbox .cioright { display: flex; flex-direction: column; justify-content: center; border-left: #d1d1d1 1px solid; padding-left: 5vw; }
.cisfooterbox .cisinfo { word-spacing: 100vw; max-width: 100%; width: min(400px,100%); }
.cisfooterbox .cioright .cistitle { font-size: max(2 * (1vw + 1vh)/2,20px); }
.cisfooterbox .cioright .cisimglink { position: absolute; right: 16vw; }
.cisfooterbox .cioright .cisimglink:hover { transform: scale(0.91); }
/* footer */
footer { padding: 0px 0 0; }
footer .workframe { width: min(95%,1420px); }
footer .foom_box { display: grid; grid-template-columns: 19% 27% 27% 27%; margin: 10px 0 40px; }
footer * { font-size: 15px; color: #161611; line-height: 190%; border-width: 0; font-family: "Noto Serif TC",sans-serif; }
footer .mananabotom { display: flex; align-items: center; justify-content: flex-start; padding: 25px 0; flex-wrap: wrap; letter-spacing: 0.1em; }
footer .mananabotom:after { content: ""; position: absolute; width: 10%; display: flex; height: 1px; background: #797979; left: 39%; }
footer .under_box { display: grid; grid-template-columns: 37% 57%; justify-content: space-between; align-items: center; }
footer .under_box * { color: #797979; }
footer .mananabotom * { line-height: 1; }
footer a:hover { color: var(--primary); }
footer .ionfoo a { font-size: 14px; }
footer .mananatop { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; justify-content: flex-end; }
footer .mananatop a.priv { padding: 5px 36px; background: #7a7a7a; color: #ffffff; border-radius: 7px; }
footer .mananatop a.priv:hover { background: var(--primary) }
footer .cootitle { font-size: max(1.4 * (1vw + 1vh)/2,18px); text-transform: uppercase; display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 10px; }
footer .ionfoo div { display: flex; }
footer .ionfoo.cisJ { display: flex; align-items: center; }
footer .cootitle span { width: 85px; height: 2px; background: #ffffff; display: flex; }
footer .work_bomx { display: flex; align-items: center; gap: 30px; justify-content: flex-end; }
footer .footitle { font-size: max(2.5 * (1vw + 1vh)/2,28px); font-family: 'Playfair Display'; font-weight: 800; }
footer .footitle:first-letter { color: var(--primary); }
footer .footicon { display: flex; gap: 10px; }
footer .footicon a { display: flex; width: 60px; aspect-ratio: 1/1; }
/* webSeo */
#webSeo { padding: 10px 0; white-space: nowrap; box-sizing: border-box }
#webSeo .seo { padding-left: 100%; font-weight: 100; font-size: 13px; color: var(--info) }
/* footer_btn */
#footer_btn { right: 1.5vw; bottom: 46px; display: flex; flex-direction: column; z-index: 9888; }
#footer_btn a { margin-top: 10px; background: #747474; line-height: 40px }
#footer_btn a svg { width: 50%; height: 50%; fill: #ffffff }
#footer_btn a.phone { background: #2e2e2e; }
#footer_btn a.gotop { background: var(--primary); }
@-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) }
}
/*cormcall*/
.cormcall { background: #182c54; padding: 20px 0; }
.cormcall .workframe { display: grid; grid-template-columns: 25% 41% 30%; gap: 2%; align-items: center; }
.cormcall .bienentext { font-size: max(3.4 * (1vw + 1vh)/2,22px); color: #ffffff; text-transform: uppercase; }
.cormcall .boim02 { color: #ffffff; font-size: max(1.88 * (1vw + 1vh)/2,23px); display: flex; align-items: center; gap: 10px; }
.cormcall .boim02 svg { width: 30px; fill: #ffffff; aspect-ratio: 1/1; }
.cormcall .boim03 { display: flex; gap: 10px; justify-content: flex-end; }
.cormcall .boim03 svg { width: 26px; padding: 20px; background: #ffffff; aspect-ratio: 1/1; border-radius: 5555px; fill: #182c54; }
@media screen and (min-width:1471px) {
  .workframe { width: var(--width-xxl); width: min(95%,1640px); }
  header .top_btn { width: 90% }
}
@media screen and (min-width:1281px) {
  .more_btn:hover:before { -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,-100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,-100%,0) }
  header .menu_box { display: flex; justify-content: flex-end }
  header .menu_box ul { display: flex; gap: 24px; }
  header #webmenu nav ul li b { display: none }
  header #webmenu nav ul li { position: relative; overflow: hidden; }
  header #webmenu nav ul li .bo { position: relative; background: var(--white); z-index: 1 }
  header #webmenu nav>ul>li>p a { padding: 0; margin-left: 0; display: flex; align-items: center; width: 100%; }
  header.scroll #webmenu nav>ul>li>p a:after { background: #7fb053; }
  header #webmenu nav>ul>li:last-child>p a:after { display: none; }
  header #webmenu nav>ul>li>p a:hover {   }
  header #webmenu nav>ul>li>p a:before { content: ""; position: absolute; width: 100%; height: 3px; bottom: 0px; left: 0; background: #ffffff; -moz-transform-origin: center; -moz-transform: scaleX(0); -webkit-transform-origin: center; -webkit-transform: scaleX(0); -o-transform-origin: center; -o-transform: scaleX01); -ms-transform-origin: center; -ms-transform: scaleX(0); transform-origin: center; transform: scaleX(0); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out }
  header.scroll #webmenu nav>ul>li>p a:before { background: #ffffff; }
  header #webmenu nav>ul>li>p a:hover:before { -moz-transform: scaleX(1); -webkit-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1) }
  header .coouJJ a { padding: 6px 30px; background: #b01a26; border-radius: 500px }
  header .coouJJ a:hover { background: #333333 }
  header .coouJJ * { color: #ffffff }
  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); display: flex; flex-direction: column; gap: 0; }
  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; background: unset; border-radius: unset; color: #222222; }
  header #webmenu li .subOption li:last-child>div a { border-color: none }
  header #webmenu li .subOption li>div a:hover { background: var(--primary); color: white; }
  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 }
  header.scroll .top_btn { top: -55px; opacity: 0 }
  footer #extra ul li:hover img { display: block }
}
@media screen and (max-width:1470px) {
  header { padding: 0 0; top: 0; }
  header.scroll { padding: 0; }
  header .item {padding: 0px 3% 0px 0%;width: 100%;}
  header #cis img { height: 80px; }
  header.scroll #cis img { height: 58px; }
  header.scroll:after { height: 72px; }
  header.scroll #cis a {   }
  header.scroll #cis { padding: 5px 0px; width: min(170px,100%); }
  footer #f_nav a { margin: 6px 6px }
  .workframe,footer #f_info .workframe { width: min(1280px,90%); }
  footer #f_info { padding-top: 40px; }
  footer .workframe { width: min(1280px,90%); }
  footer .footicon a { width: 45px; }
  header #webmenu nav>ul>li>p a { padding: 22px 0; }
  header:before { border-radius: 0; height: 80px; }
  header:after { height: 80px; }
  header.scroll #webmenu nav>ul>li>p a:after { display: none; }
  header #webmenu nav>ul>li>p a:after { right: 0px; }
  .JJtitle.martop { margin-top: 60px; }
  footer .mananabotom:after { width: 7%; }
}
@media screen and (max-width:1280px) {
  .coouJJ svg { display: none }
  header .item { padding: 0 0%; }
  header #cis { width: 50%; top: auto; }
  header #menubtn { width: auto; }
  header #webmenu nav ul li b { width: 100%; display: flex; justify-content: flex-end; align-items: center; z-index: 5 }
  header #menubtn a span { background: #ffffff; }
  header .menu {align-items: center;display: flex;justify-content: space-between;width: 100%;padding: 0px 3% 0px 0%;}
  header.scroll #menubtn[data-type="2"] a span { background: #545454; }
  header #webmenu {
    padding:15px 0;width:350px;height:calc(100vh - 90px);background:#ffffff;box-shadow:0 10px 10px rgba(var(--black-rgb),.5);right:calc(-1 * var(--width-xs));z-index:999;display:flex;justify-content:unset;flex-direction:column;align-items:center;top:70px;position:fixed;transition:all 1200ms cubic-bezier(1.000,0.095,0.170,0.975);/* custom */
    transition-timing-function:cubic-bezier(1.000,0.095,0.170,0.975);/* custom */
    
  }
  header #webmenu .top_btn a { margin: 0 5px }
  header #webmenu nav { overflow-y: scroll; margin-top: 60px; padding: 0 10px; height: calc(100% - 65px); display: flex; width: 100%; flex-direction: column }
  header #webmenu nav::-webkit-scrollbar { width: 0 }
  header #webmenu nav>ul { padding-bottom: 200px; width: 100% }
  header #webmenu nav>ul>li>p a,.coouJJ a { color: #121212; padding: 14px 25px; border-bottom: rgb(147 147 147/26%) 1px solid; }
  header #webmenu nav>ul * { transition: all 0.3s ease-in-out; -webkit-transition: all 0s ease-in-out }
  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: #616161; }
  header #webmenu li .menu_body .sub2Option a { font-weight: 300; color: rgba(var(--white-rgb),.5) }
  .JJtitle.martop { margin-top: 30px; }
  footer .foom_box { grid-template-columns: repeat(3,1fr); }
}
/* +footercall
*----------------------------------------------------------------------------*/@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) {
  header.scroll { padding: 0px 0; }
  .phoneWrap { display: flex; position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 94500; flex-direction: column }
  .phoneWrap ul { display: flex; }
  .phoneWrap ul li { width: 50%; box-sizing: border-box; background-color: #348523; }
  .phoneWrap ul li + li { border-left: 1px solid #fff; background: #271b1b; }
  .phoneWrap ul li a { display: inline-block; width: 100%; color: #fff; text-align: center; padding: 10px 0px; }
  #banner_newbox .slick-list { width: 90%; margin: 0 auto; }
  .cisfooterbox:before,.cisfooterbox:after { display: none; }
  .cisfooterbox { display: flex; flex-direction: column; align-items: center; padding: 40px 0; }
  .cisfooterbox .cioleft:before { display: none; }
  .cisfooterbox .cioright { border-left: unset; padding-left: 0; gap: 25px; align-items: center; }
  .cisfooterbox .cioright .cisimglink { position: relative; right: auto; width: 40px; }
  .cisfooterbox .cisinfo { text-align: center; }
  footer .foom_box { grid-template-columns: repeat(2,1fr); gap: 20px; }
  footer .work_bomx { display: flex; justify-content: flex-start; }
  #f_contact { width: 100%; margin-top: 20px; }
  footer .mananabotom:after { display: none; }
}
@media screen and (max-width:768px) {
  header:after { display: none; }
  header { top: 0; padding: 0; }
  header #cis img { width: min(253px,95%); }
  .webBox .wrapper_lines .center_box>div { border-width: 0 0 0 1px }
  header:before { display: none; }
  .cormcall .boim02 svg { display: none; }
  .cormcall .workframe { display: flex; flex-direction: column; align-items: center; }
  .cormcall .boim03 { margin-top: 30px; }
  .cormcall .boim03 svg { width: 25px; padding: 13px; }
  .cormcall { padding: 40px 0; }
  footer .under_box { display: flex; flex-direction: column; }
}
@media screen and (min-width:641px) {
  .mbshow { display: none!important; }
}
@media screen and (max-width:640px) {
  .mbnone { display: none!important; }
  header #menubtn a { width: 24px; height: 21px; }
  header #header_bar { display: none }
  header #wwbewm a { background: var(--primary); }
  header #menubtn a span { background: #323232; }
  .workframe { width: 87%; }
  #doctorpicbox .boomJJ { width: 100%; order: 3; }
  footer .foom_box { display: flex; flex-direction: column; gap: 38px; margin: 0 0; }
  header { background: #f0f3f7; }
  header #cis img { height: 70px; }
  header.scroll { background: #f0f3f7; }
}
@media screen and (max-width:550px) {
  header .item {padding: 8px 6%;background: #fdfdfd;}
  header .top_btn { width: 90% }
  header #webmenu { width: 320px; top: 101px; height: calc(100vh - 150px); }
  header.scroll #webmenu { top: 85px; height: calc(100vh - 100px); }
  #search_box form { right: -15vw; bottom: -18vw; width: 50vw; }
  #footer_btn { right: 0; bottom: 30px; }
  #footer_btn a { margin: 0 10px; line-height: 35px }
  #footer_btn a.gotop { right: 0; bottom: 0px }
  .cisfooterbox .cioleft #flogo img { width: 38vw; }
  .cisfooterbox { gap: 50px; }
  header.scroll #cis  img { height: 72px; }
}
@media screen and (max-width:480px) {
  header.scroll #cis a { padding: 0; }
  header.scroll #cis { padding: 0; }
  #wwbewm a { padding: 10px }
  .webBox header #search_box #openform { width: 19px; height: 19px; }
  .webBox header #search_box { order: 0; position: relative; right: auto; }
  header #menubtn { order: 0; width: auto; height: 40px; }
  header .item {display: flex;justify-content: space-between;padding: 0 5%;}
  header.scroll .item.menu { padding: 0; }
  header,header.scroll {padding: 7px 0;background: #fdfdfd;}
  #wwbewm { display: none; }
  header #menubtn a span { background: #161611; }
  header #cis { left: 0; position: relative; width: auto; padding: 11px 0; }
  footer .workframe { width: 85%; }
  footer #flogo { margin: 0 auto; width: 190px; }
  footer .to_bar { display: flex; width: 100%; margin-top: 40px; }
  footer .mananatop { display: flex; justify-content: flex-start; gap: 10px 10px; margin: 40px 0 0; }
  footer .cootitle span { width: 40px; }
  footer .mananabotom { display: flex; justify-content: flex-start; margin-top: 20px; order: 3; }
}