@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=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+TC:wght@100..900&display=swap');

*, ::after, ::before {margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-webkit-transition: all .2s linear;-moz-transition: all .2s linear;transition: all .2s linear;}
*:focus { outline:  none; }

body { overflow-x: hidden; overflow-y: overlay; margin: 0; min-height: 100vh;-webkit-text-size-adjust:100%}
body::-webkit-scrollbar { width: 13px; }
body::-webkit-scrollbar-track { background: none; }
body::-webkit-scrollbar-thumb { border-radius: 8px; border: 4px solid transparent; background-clip: content-box; background-color: var(--g_200); }
body::-webkit-scrollbar-thumb:hover { background-color: var(--g_300); }

header , footer , div , nav , article , hr , p , form , label , input , button , select , 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: 1.7;border-width: 0;font-family: var(--font-family), sans-serif;font-size: 16px;color: var(--info);letter-spacing: 0.09em;}

h1, h2, h3, h4, h5, h6 { word-wrap: break-word; word-break: break-word; line-height: 1.7; font-family: var(--font-family), sans-serif; color: var(--info); }
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {font-size: inherit;}
h1, .h1 { font-weight: bold; font-size: 2em; }
h2, .h2 { font-weight: bold; font-size: 1.5em; }
h3, .h3 { font-weight: bold; font-size: 1.17em; }
h4, .h4 { font-weight: bold; font-size: 1em; }
h5, .h5 { font-weight: bold; font-size: .83em; }
h6, .h6 { font-weight: bold; font-size: .67em; }

ul , ol { list-style: none; }

fieldset { border: 0; }
input , select , textarea { padding: .5em 1em; width: 100%; background-color: white; background-clip: padding-box; border: 1px solid var(--g_200); border-radius: .2em; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

select {
	appearance: none;
	-webkit-appearance: none; /* Safari */
	-moz-appearance: none;    /* Firefox */
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 8px 12px;
	font-size: 16px;
	border-radius: 4px;
	background: #fff url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 5l-6.5 7L1 5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	width: 100%;
	cursor: pointer;
  }
button { background: none; border: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
input::-webkit-outer-spin-button , input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }
input[type="password"] { font-family: auto; }
input[type="radio"] , input[type="checkbox"] { width: auto; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }

  
  

/* 讓選單的容器元素保持一致的寬度與排版 */
.form_item {
  position: relative;
}

/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }

a , a:link , a:visited , a:hover { display: inline-block; text-decoration: none; white-space: pre-wrap; }

/* general class set */
.txt_clamp { overflow: hidden; height: 1.5em; 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; }

/* 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; transition: none; }
.fancybox-infobar__body span { font-size: inherit; color: currentcolor; vertical-align: initial; }

/* webBox */
.webBox {position: relative;width: 100vw;min-height: 100vh;overflow: hidden;}
.webBox .pageh1 { position: absolute; top: 0; z-index: 1; }
.webBox .wrapper {position: relative;background: white;z-index: 2;background: linear-gradient(to top, #ffffff, #ececec, #eeeeee);top: 0;}

/* slick */
.webBox .slick-dotted.slick-slider { margin-bottom: 0; min-width: 100%; }
.webBox .slick-dotted .slick-track { min-width: 100%; }
.webBox .slick-dotted .slick-dots { bottom: 20px; }
.webBox .slick-dotted .slick-dots li { width: auto; height: auto; display: inline-flex; justify-content: center; align-items: center; }
.webBox .slick-dotted .slick-dots li button { width: 1em; height: 1em; background: var(--g_200); outline: 2px transparent solid; border-radius: 50%; }
.webBox .slick-dotted .slick-dots li.slick-active button { background: transparent; outline-color: var(--primary); }
.webBox .slick-dotted .slick-dots li button:before { content: ""; }

/* workframe */
.workframe {margin: 0 auto;width: min(95vw, var(--width-xxl));}
.workframe_s { margin: 0 auto; width: min(95vw, var(--width-xl)); }
.talign_center {text-align: center;}

/*mmJlink*/
.mmJlink{display: flex;align-items: center;}
.mmJlink a{
	padding: 17px 34px;
	background: #019893;
	border-radius: 54px;
	color: #ffffff;
	text-transform: uppercase;
	font-size: max(1.2*(1vw + 1vh) / 2,16px);
	box-shadow: 5px 4px 15px rgb(123 123 123 / 27%);
	font-weight: 500;
	margin: 1px 0 25px;
}
.mmJlink svg{
    width: 45px;
    margin-left: -13px;
    fill: #006865;
    margin-bottom: 25px;
}
.mmJlink:hover a{
    background: #eb4550;
}
.mmJlink:hover svg{
    margin-left: 13px;
}
/* header */
header, header #cis { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
header {padding: 0 calc(4% + 20px) 0 5%;width: 100%;display: flex;justify-content: space-between;align-items: center;z-index: 999;top: 20px;left: 0;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
header #cis {position: relative;z-index: 5;width: 240px;mix-blend-mode: multiply;}
header #memberbtn {padding: .6em 1.2em;background: rgb(255 255 255 / 90%);gap: .5em;border-radius: 55px;box-shadow: 5px 4px 15px rgb(123 123 123 / 10%);margin-right: 100px;}
header #memberbtn a { display: flex; justify-content: center; align-items: center; }
header #memberbtn svg {aspect-ratio: 1/1;}
header #memberbtn font { color: currentColor; }
header #memberbtn #go_search{background: #019893;padding: 7px 12px;}
header #memberbtn #go_search svg{fill: #ffffff;}
.wrapper header.scroll.show #cis { width: 226px; }
.wrapper header.scroll #menubtn {right: calc(0% + 0px);}
.wrapper header.scroll.show #menubtn { top: 12px;}
.wrapper header.scroll.show #cis a {background: white;border-radius: 0 0 15px 15px;padding: 25px 15px 15px;display: flex;}

header #menubtn {padding: 22px 32px;background: #019893;border-radius: 54px;border: #abababa6 2px solid;right: 5%;z-index: 1000;display: flex;}
header #menubtn[data-type="2"] a {width: 40px;display: flex;border-radius: 7px;}
header #menubtn[data-type="2"] a span {width: 40%;right: 30%;}
header #menubtn a {margin: auto 0 auto auto;width: 25px;height: 11px;display: flex;}
header #menubtn a span {position: absolute;width: 19px;height: 1px;background: white;display: block;top: 0;right: 0;}
header #menubtn[data-type="1"] a span { transition: transform .4s cubic-bezier(.215, .61, .355, 1), opacity .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1); }
header #menubtn[data-type="1"] a span:nth-child(2) {top: calc(50% - 0.5px);}
header #menubtn[data-type="1"] a span:nth-child(3) { top: calc(100% - 1px); }
header #menubtn[data-type="2"] a span { transition: .4s cubic-bezier(.645, .045, .355, 1); }
header #menubtn[data-type="2"] a span:nth-child(1), header #menubtn[data-type="2"] a span:nth-child(3) { top: 50%; }
header #menubtn[data-type="2"] a span:nth-child(2) { opacity: 0; }
header #webmenu nav>ul>li>p a { padding: 10px 5px; font-size: 18px; color: #0e0e0e; }
header #webmenu nav>ul>li>p a:hover { color: #f2622e; }
header #webmenu nav ul li b { position: absolute; padding: 0 5px 0 15px; width: 23px; height: 41px; display: inline-block; text-align: center; line-height: 41px; top: calc((100% - 41px) / 2); right: 0; }
header #webmenu nav>ul>li .subOption li>div a { padding: 7px 10px; display: block; }
.webBox header #menubtn[data-type="2"] a span:nth-child(1) {transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);}
.webBox header #menubtn[data-type="2"] a span:nth-child(3) {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);}
header #menubtn b{display:flex;line-height:100%;color:#ffffff;margin-left:20px}
header #header_bar a.btn { background: #f2622e; padding: 20px; }
header #header_bar a.btn.heeline { background: #2dc71d; }
header #header_bar svg { width: 40px; height: 40px; fill: white; }

header.scroll {padding: 0 calc(0% + 90px) 0 0%;opacity: 0;background: white;}
header.scroll #memberbtn{box-shadow:none}
header.scroll.show {opacity: 1;top: 0;}

header #webmenu { display: none; }
header #mbMenu2 nav>ul>li .menu_body, header #mbMenu2 nav>ul>li .menu_body .sub2Option, header #mbMenu2 nav>ul>li .menu_body .sub3Option { display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#webmenu { width: calc(100% - 180px); }
#webmenu nav { width: calc(100% - 168px); }
#header_bar { width: 168px; right: -2.5%; }
#webmenu ul { display: flex; justify-content: flex-end; }
#webmenu2 {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: rgba(255, 255, 255, 0.941);visibility: visible;overflow: hidden;transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);transform: translateY(100%) matrix(1, 0, 0, 1, 0, 0);transition-delay: 300ms;opacity: 0;}
#webmenu2.trans { opacity: 1; transition: all 600ms cubic-bezier(0.785, 0.135, 0.150, 0.860); transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); background-color: white; opacity: 1; }

.opennav { position: relative; display: flex; width: 100%; align-items: center; }
.opennav .lebox {display: flex;filter: grayscale(50%);width: 30%;height: 100vh;background-color: #019893;}
.opennav .lebox img { object-fit: cover; opacity: 0.11; width: 100%; filter: blur(3px); }
.opennav .ribox { position: relative; display: flex; flex-direction: column; width: 70%; justify-content: center; }
.opennav .ribox .flowme { display: flex; padding: 0 60px; }
.opennav .ribox .flowme .textJ { display: flex; align-items: center; }
.opennav .ribox .flowme .textJ svg {width: 21px;aspect-ratio: 1/1;fill: #303030;margin: 0 7px;}
.opennav .ribox .itemfm{display:flex;align-items:center;gap:10px;margin-left:12px}
.opennav .ribox .itemfm a{display:flex;border:#bcbcbc 1px solid;border-radius:50px;aspect-ratio:1/1}
#webmenu2 .menu_box ul { display: flex; align-items: center; width: 100%; flex-wrap: wrap; padding: 2px 60px; }
#webmenu2 .menu_box ul li { display: flex; width: 40%; margin-bottom: 25px; flex-direction: column; }
#webmenu2 .menu_box ul li p {width: 90%;display: flex;align-items: center;justify-content: space-between;}
#webmenu2 .menu_box ul li p {font-size: 23px;line-height: 200%;transition: all 700ms cubic-bezier(1.000, 0.670, 0.435, 2.09); /* custom */transition-timing-function: cubic-bezier(1.000, 0.670, 0.435, 1.090);}
#webmenu2 .menu_box ul li a {font-size: max(1.8 * (1vw + 1vh) / 2, 16px);font-weight: 400;}
#webmenu2 .menu_box ul li p.translist { transition: all 1100ms cubic-bezier(1.000, 0.670, 0.435, 2.09); transition-timing-function: cubic-bezier(1.000, 0.670, 0.435, 1.090); }
#webmenu2 .menu_body .subOption { display: flex; flex-direction: column; margin: 0; padding: 0; }
#webmenu2 .menu_body .subOption a { font-size: 23px; color: #969696; font-weight: 500; padding-left: 1px; }
#webmenu2 .menu_body .subOption li { width: 100%; }


header #topbtns { display: flex; justify-content: flex-end; align-items: center; gap: .3em 1em; }
header #topbtns .btn { padding: .5em .2em; cursor: pointer; }
header #topbtns .btn svg { width: 22px; height: 25px; fill: var(--g_800); }
header #topbtns .dropdown { position: relative; }
header #topbtns .dropdown .dropdown_menu { position: absolute; width: 7em; display: flex; flex-direction: column; background: #fff; box-shadow: 0 0 10px #ccc; left: 50%; -webkit-transform: translate(-50%, -.5em); transform: translate(-50%, -.5em); opacity: 0; z-index: -1; pointer-events: none; }
header #topbtns .dropdown .dropdown_menu[data-type="1"] { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; z-index: 999; pointer-events: auto; }
header #topbtns .dropdown .member_list a { padding: .5em; border-bottom: 1px var(--g_200) solid; display: block; text-align: center; }
header #topbtns .dropdown .order_list { padding: 1em; width: 300px; right: 0; left: auto; -webkit-transform: translate(0, -.5em); transform: translate(0, -.5em); }
header #topbtns .dropdown .order_list[data-type="1"] { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
header #topbtns .dropdown .order_list tr >* { padding: .3em 0; border-bottom: 1px var(--g_200) dashed; text-align: center; font-size: 13px; }
header #topbtns .dropdown .order_list tr a { font-size: 1em; }
header #topbtns .dropdown .order_list tr .name { width: 6em; }
header #topbtns .dropdown .order_list tr .name a { margin-bottom: .1em; padding: 0 .5em; height: 1em; display: -webkit-box; line-height: 1; }
header #topbtns .dropdown .order_list tr .image { width: 30px; }
header #topbtns .dropdown .order_list tr .image img { width: 100%; aspect-ratio: 1/1; }
header #topbtns .dropdown .order_list tr .shape , header #topbtns .dropdown .order_list tr .total { width: 5em; }
header #topbtns .dropdown .order_list .btn { margin-top: 1em; padding: .3em .2em; background: var(--primary); display: block; text-align: center; color: white; }
header #topbtns .dropdown .order_list .order_empty { height: 4em; display: flex; justify-content: center; align-items: center; font-size: 13px; color: var(--g_500); }
header #topbtns #openshop { position: relative; }
header #topbtns #openshop b { position: absolute; width: 1.5em; height: 1.5em; background: var(--primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 400; font-size: .7em; line-height: 1.3; color: white; top: .1em; left: 1.3em; }
header #topbtns #openshop font { display: inline-flex; color: var(--g_800); }
header #topbtns #openshop font:before { margin: 0 10px 0 13px; display: inline-block; color: var(--g_800); content: "/"; }
header .hmenu_box{margin-right:40px;}
header .hmenu_box a{padding: 0 10px;font-size: 17px;font-weight: 500;}
header .hmenu_box a:hover{color:var(--primary)}

/* hSearch */
#hSearch {position: absolute;width: 240px;box-shadow: 0 0 10px rgba(var(--black-rgb), .3);right: -300px;opacity: 0;z-index: -1;margin-top: 10px;display: flex;align-items: center;}
#hSearch[data-type="2"] { right: 0; opacity: 1; z-index: 10; }
#hSearch input { width: calc(100% - 65px); border: 0; }
#hSearch svg { width: 18px; height: 18px; }

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


/* footer */
footer{position:relative;padding-top:1vmax;z-index:2}
footer *{color:white}
footer .workframe{padding:0 4%}
footer .top_box{padding:0 1em 2em;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
footer .foorightJ{display:flex;gap:13px;flex-direction:column}
footer .foorightJ .foJnav{display:flex;gap:13px;flex-wrap:wrap}
footer .foorightJ .foconJbox{display:flex;justify-content:flex-end}
footer .foorightJ .foconJbox a{background:#ffffff;display:flex;align-items:center;padding:15px 15px;border-radius:15px}
footer .foorightJ .foconJbox a svg{width:29px;fill:#019893}
footer .foorightJ .foconJbox span{color:#019893;margin-left:10px}
footer #f_logo{width:min(100%,240px)}
footer .copJJy{display:flex;margin-top:20px}
footer .copJJy *{font-size: 13px;font-weight: 200;}
footer #community_box { margin-left: 5%; width: 1%; display: flex; justify-content: flex-end; flex: auto 1; }
footer #community_box a { position: relative; margin: 0 0 .5em .8em; width: 2.3em; aspect-ratio: 1/1; background: var(--primary); display: flex; justify-content: center; align-items: center; border-radius: 50%; }
footer #community_box a:before { position: absolute; width: 100%; height: 100%; border: 1px var(--primary) solid; border-radius: 50%; top: 4px; left: 4px; content: ""; }
footer #community_box a svg { position: relative; width: 65%; height: 100%; fill: var(--g_100); }
footer #community_box a.fb svg { height: 50%; }
footer #community_box a.ig svg { width: 50%; }
footer .business_info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
footer #f_info { width: 1%; flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em; }
footer #f_info p { display: flex; flex-wrap: wrap; }
footer #f_info p >* { display: inline-block; }
footer #f_info p font:first-child { width: 100%; font-size: .9em; }
footer #f_nav { margin-left: 5%; width: 30%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .5em; }
footer #f_other { margin-top: 1em; padding: .3em 1em; background: var(--g_300); display: flex; justify-content: center; align-items: center; }
footer #f_other * { font-weight: 300; font-size: .9em; color: var(--g_900); }
footer #f_other >div { margin: 0 .5em; }

/* webSeo */
#webSeo { overflow: hidden; width: 100vw; margin-top: 2em; white-space: nowrap; box-sizing: border-box; }
#webSeo .seo { padding-left: 100%; font-weight: 100; line-height: 1; font-size: 13px; color: var(--g_400); -webkit-animation: marquee 100s linear infinite; animation: marquee 100s linear infinite; }

/* gotop */

.coflyicon svg { width: 50%; aspect-ratio: 1/1; fill: white; }
.coflyicon{position:fixed;right:1vw;bottom:5vh;z-index:9999}
.coflyicon a{opacity:0;width:45px;aspect-ratio:1 / 1;background:var(--g_800);box-shadow:0 0 .5em rgb(0 0 0 / 30%);display:flex;justify-content:center;align-items:center;border-radius:50%;margin-bottom:10px}
.coflyicon a[data-type="1"]{opacity:1}
.coflyicon a#faceJbook{background:#0e7dc7}
.coflyicon a#youtubeJ{background:#ff313f}

/* animation */
@-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); } }
@media screen and (min-width: 1281px) {
    header #memberbtn{margin:0}
    header #menubtn{display:none;}
	header.show #menubtn a { display: flex; }
	.btn_hover:hover .more_btn span { color: var(--black); }
	.btn_hover:hover .more_btn svg { fill: var(--black); }
	.btn_hover:hover .more_btn:before { width: 100%; }
	.btn_hover:hover .bg_primary_5.more_btn span { color: var(--primary); }
	.btn_hover:hover .bg_primary_5.more_btn svg { fill: var(--primary); }
	header { top: 30px; }
	header #webmenu nav ul li b { display: none; }
	header #webmenu nav ul li { position: relative; }
	header #webmenu nav ul li .bo { position: relative; background: var(--white); z-index: 1; }
	header #webmenu nav>ul>li>p a { padding: 25px 11px; }
	header #webmenu li .menu_body, header #webmenu li .subOption ul { position: absolute; width: 170px; right: calc(50% - 85px); z-index: -1; opacity: 0; }
	header #webmenu li .menu_body ul { background: var(--white); box-shadow: 0 0 10px rgba(var(--black-rgb), .3); }
	header #webmenu li .subOption li { overflow: hidden; }
	header #webmenu li .subOption li>div a { padding: 6px 15px; border-bottom: 1px rgba(var(--black-rgb), .1) solid; line-height: 150%; font-weight: 300; }
	header #webmenu li .subOption li:last-child>div a { border-color: none; }
	header #webmenu li .subOption li>div a:hover { color: var(--primary); }
	header #webmenu li .subOption .sub2Option, header #webmenu li .subOption .sub3Option { top: 0; right: -170px; }
	header #webmenu nav>ul>li:hover, header #webmenu li .subOption li:hover { overflow: visible; }
	header #webmenu nav>ul>li:hover .menu_body, header #webmenu li .subOption li:hover>ul { z-index: 2; opacity: 1; }
	header #webmenu li:last-child .subOption .sub2Option, header #webmenu li:last-child .subOption .sub3Option { right: auto; left: -170px; }
	
}
@media screen and (min-width: 1161px) {
	.wrapper header.scroll #cis:before { opacity: 0; }
	.wrapper header.scroll #cis:after { opacity: 0; }
	#gotop:hover { background: var(--primary); }
	header #topbtns { min-width: 200px; }
	header #topbtns .dropdown .member_list a:hover { background: var(--primary); border-color: var(--primary); color: white; }
	header #topbtns .dropdown:hover .dropdown_menu[data-type="0"] { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1; z-index: 999; pointer-events: auto; }
	header #topbtns .dropdown:hover .order_list[data-type="0"] { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@media screen and (max-width: 1470px){
	.workframe{    width: min(95vw, 1160px);}
    header .hmenu_box a{padding:0 5px;}
}
@media screen and (max-width: 1280px) {
    header .hmenu_box{display:none;}
	header{padding: 0 calc(5% + 90px) 0 5%;}
	header #cis { padding: 0 0; display: flex; }
	header #webmenu { padding: 15px 0; width: 350px; height: 100vh; background: var(--white); box-shadow: 0 10px 10px rgba(var(--black-rgb), .5); right: calc(-1 * var(--width-xs)); z-index: 999; }
	header #webmenu nav { overflow-y: scroll; margin-top: 15px; padding: 0 10px; height: calc(100% - 65px); }
	header #webmenu nav::-webkit-scrollbar { width: 0; }
	header #webmenu nav>ul { padding-bottom: 200px; }
	header #webmenu li .menu_body, header #webmenu li .menu_body .subOption li ul { position: relative; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
	header #webmenu li .menu_body ul { margin-left: 20px; }
	header #webmenu li .menu_body .subOption .bo { position: relative; }
	header #webmenu li .menu_body .subOption a { padding: 7px 45px 7px 10px; color: var(--primary); }
	header #webmenu li .menu_body .sub2Option a { font-weight: 300; color: var(--triadic1); }
	header #webmenu li .menu_body .sub3Option a { color: var(--triadic2); }
	header #header_bar { top: 0; right: 2.5%; }
	footer .workframe { width: 95vw; }
}

@media screen and (max-width: 1160px) {
	.wrapper header.scroll.show #cis a { box-shadow: unset; }
}
@media screen and (max-width: 1024px){
	.wrapper header #cis{padding:0 2vw}
	.mmJlink{margin:0 auto;display:flex;justify-content:center}
	.mmJlink svg{display:none}
}
@media screen and (max-width: 980px){
	#webmenu2 .menu_box ul{display: flex;flex-direction: column;}
	#webmenu2 .menu_box ul li{width: 100%;}
}
@media screen and (max-width: 768px) {
	footer #f_nav { margin: 1rem 0; width: 100%; }
	footer #f_nav a { margin-left: 0; }
	.wrapper header .topLink nav h3 i { padding: 23px; top: -33px; }
	.wrapper header .topLink nav ul, .wrapper header .topLink nav ul.menuOpen { top: 55px; }
	.showmeok { right: 79px; bottom: 27px; }
}
@media screen and (max-width: 640px){
	header {padding: 0 calc(2% + 55px) 0 2%;}
	header #menubtn { padding: 10px; right: 2%; }
	header #menubtn a {width: 16px;}
	header #menubtn a span {width: 16px;}
	header.scroll.show {padding: 15px calc(0% + 90px) 15px 0%;padding-right: calc(1% + 55px);}
	.wrapper header.scroll.show #menubtn {top: 17px;right: 11px;}
	.wrapper header.scroll.show #cis a { padding: 0 0; }
	.wrapper header #cis { width: 190px; }
	.wrapper header section, .wrapper header.headerfixed section { margin: 8px auto; }
	.wrapper header .topLink nav h3 i { padding: 20px; top: -30px; }
	.wrapper footer #footerInfo .row .sitemapList li { width: calc((100% / 2) - 5px); margin-bottom: 3px; }
	#webmenu2.trans {top: 75px;height: calc(100vh - 75px);}
	footer .foorightJ .foconJbox{display: flex;justify-content: center;}
}
@media screen and (max-width: 550px) {
	header #memberbtn {padding: 0;flex-direction: column;background: none;margin-right: 1px;box-shadow: none;}
	header #memberbtn a {}
	header #memberbtn a:last-child {}
	header #memberbtn svg { display: block; }
	footer #f_info { grid-template-columns: repeat(2, 1fr); }
	header #topbtns #openshop font { display: none; }
	header #topbtns .dropdown .order_list { position: fixed; }
	footer{background: url(/images/01/footerJ_bg.jpg);padding: 40px 0;}
	header #menubtn b{display:none;}
	header #menubtn{aspect-ratio: 1/1;}
	header{background:#ffffff;top:0;padding:20px calc(2% + 55px) 20px 2%}
	.opennav .lebox{display:none}
	.opennav .ribox{width:100%;gap: 30px;}
}
@media screen and (max-width: 480px){
	#hSearch{margin-top: 30px;}
	header #memberbtn #go_search{padding: 12px 12px;}
	header #menubtn[data-type="2"] {right: 11px;top: 17px;padding: 2px;}
	header #menubtn[data-type="2"] a {width: 33px;height: 33px;}
	header #topbtns .btn svg{width:18px;height:21px;aspect-ratio:1/1}
	#webmenu2.trans{top: 69px;height:calc(100vh - 58px);padding-top: 30px;}
}