@charset "utf-8"; /* CSS Document */
.box0 { width: var(--container-ultra-xxxxl); margin: 0 auto; max-width: 94%; } 
.box1 { width: var(--container-ultra-xxxxl); margin: 0 auto; max-width: 92%; } 
.box2 { width: var(--container-xxxl); margin: 0 auto; max-width: 92%; } 
.box3 { width: var(--container-lg); margin: 0 auto; max-width: 92%; } 
.box4 { width: var(--container-xl); margin: 0 auto; max-width: 92%; } 
.box5 { width: var(--container-xxl); margin: 0 auto; max-width: 92%; } 
.box_m { max-width: var(--container-md); width: 100%; margin: 0 auto; } 
.box_full { width:100vw; } 

.PC { display:block } 
.PHONE { display:none; } 

.gnb li.m_hide { display:none !important; } 
.gnb .layer { display:none !important; } 
body:not(.pop) { display:flex; flex-direction:column; min-height:100dvh; min-height:calc(var(--vh, 1dvh) * 100); max-width: 700px; margin:0 auto; } 
#header .top_wrap { position: relative; color: #fff; /* border-bottom: 1px solid rgba(255,255,255, .1); */ transition: transform .5s; height: 100%; } 
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1 { height: var(--headH); transition: .3s; } 
#header .top_wrap .etc_wrap { display: flex; gap: 3rem; height: 3.5rem;} 
#header .top_wrap { } 
#header .top_wrap .wrapIn { padding: 0 2.5em; box-sizing: border-box; } 
#header .top_wrap .wrapIn { display:flex; align-items:center; justify-content:space-between; gap:0 1vw } 
#header .top_wrap .logo { width: 8em ;} 
#header .top_wrap .logo > a { display: flex; align-items: center; } 
#header .top_wrap .logo > a img {/*  filter: brightness(0) invert(1);  */height: 50px; object-fit: contain; } 
#header .top_wrap > div.box0.flex.hr {height: 100%;}

#header .gnb_wrap,
#header .top_wrap .logo,
#header .top_wrap .etc_wrap .headLink {display:none;}
#header .top_wrap .logo .wrapH > .in {display: flex; flex-direction: row; align-items: center; gap: 1rem;}

.scroll #header .top_wrap .logo { display: block; }
.scroll #header .top_wrap > .box0.flex.hr{justify-content: space-between;}
.scroll #header .all_wrap .btn_all .ham,.scroll #header .all_wrap .btn_all .ham:before,.scroll #header .all_wrap .btn_all .ham:after {background: #000!important;}

html:not(.main) #header {border-bottom: 1px solid #ddd;}
html:not(.main) #header .top_wrap .all_btn .ham, 
html:not(.main) #header .top_wrap .all_btn .ham:before, 
html:not(.main) #header .top_wrap .all_btn .ham:after {background: #000!important}
html:not(.main) .top_wrap .logo {display: block!important;}
html:not(.main) .top_wrap .flex.hr {justify-content: space-between!important;}

.color5 {color: var(--color-point5) !important;}
.handgraph {font-family: 'THEFACESHOP+INKLIPQUID'!important;}

#header { position:fixed; top:0; left:50%; transform:translateX(-50%); width:700px; transition: transform .5s, background-color .5s, padding .5s; z-index:9997; height: 3.5em; } 
@media (max-width: 700px) {
    #header { width:100%; }
}
#header .gnb_wrap .gnb > li,
#header .gnb_wrap .gnb > li .dp1 { transition:height .2s, background .2s, padding .5s ease; box-sizing:border-box; } 
#header .gnb_wrap .gnb > li { position:relative; padding: 0 2.25rem; transition: width 0.5s, background-color 0.5s; } 
#header .gnb_wrap .gnb > li:before { position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: var(--radius-pill); background: rgba(255,255,255, .315); content: ''; } 
#header .gnb_wrap .gnb > li:last-of-type:before,
#header .gnb_wrap .gnb > li:nth-last-of-type(2)::before { display: none; } 
#header .gnb_wrap .gnb > li .dp1 { position:relative; justify-content: center; display: flex; align-items: center; } 
#header .gnb_wrap .gnb > li .dp1 .tt { font-size: var(--font-size-base); letter-spacing: 0; font-weight:600; text-transform:uppercase; transition: .3s; } 

#header .top_wrap .gnb_wrap .gnb > li .dp2 {position: absolute; top: calc(100px - 20px); padding: 1rem 0; display: flex; flex-direction: column; left: 50%; transform: translateX(-50%); z-index: 99; width: 11rem; text-align: left; opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 1, 1); } 
#header .top_wrap .gnb_wrap .gnb > li .dp2:before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 0; background: #fff; box-shadow: 0.5em 0.5em 2em rgba(0, 0, 0, 0.1); transition: all 0.2s cubic-bezier(0.4, 0, 1, 1); border-radius: 1em; } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li { position: relative; padding: .5rem 1.65rem; text-align: left !important; opacity: 0; transition: all 0s 0s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li { opacity: 1; transition: all 0.8s ease-in-out; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(1) { transition-delay: 0.1s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(2) { transition-delay: 0.2s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(3) { transition-delay: 0.3s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(4) { transition-delay: 0.4s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(5) { transition-delay: 0.5s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(6) { transition-delay: 0.6s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(7) { transition-delay: 0.7s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(8) { transition-delay: 0.8s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(9) { transition-delay: 0.9s; } 
#header .top_wrap .gnb_wrap .gnb > li.act .dp2 > li:nth-child(10) { transition-delay: 1s; } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a { position:relative; display: inline-block; text-align: left !important; } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a > .va > .tt { position:relative; font-weight: 600; font-size: var(--font-size-sm); color: rgba(0,0,0, .3); transition: .3s; } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a > .va > .tt:before { position: absolute; content: attr(data-label); top: 0; left: 0; width: 0; height: 100%; color: var(--color-point2); white-space: nowrap; transition: all 0.2s ease-in-out; overflow: hidden; z-index: 9; } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a > .va > .tt:hover:before { width: 100%; } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a > .va > .tt { } 

#header .top_wrap .gnb_wrap .gnb > li.more:hover .dp1 { } 
#header .top_wrap .gnb_wrap .gnb > li.more:hover .dp1:after { } 

#header .top_wrap .gnb_wrap .gnb > li:hover .dp2 { opacity:1; visibility: visible; } 
#header .top_wrap .gnb_wrap .gnb > li:hover .dp2:before { height: 100%; } 
#header .top_wrap .gnb_wrap .gnb > li .dp1.layer { display: none; } 
#header .top_wrap .gnb_wrap .gnb > li .dp3 { display: none; } 

#header .top_wrap .all { } 
#header .top_wrap .all_btn { } 
#header .top_wrap .all_btn .in { position: relative; display: block; width: 1.6rem; height: 1.125rem; margin-left: auto; } 
#header .top_wrap .all_btn .ham,
#header .top_wrap .all_btn .ham:before,
#header .top_wrap .all_btn .ham:after { display: block; width: 100%; height: 2px; background: #fff; transition: .2s, background 0s; } 
#header .top_wrap .all_btn .ham:before,
#header .top_wrap .all_btn .ham:after { content: ""; position: absolute; right: 0; } 
#header .top_wrap .all_btn .ham { width: 100%; } 
#header .top_wrap .all_btn .ham:before { left: -6px; top: calc(50% - 1px); width: 100%; } 
#header .top_wrap .all_btn .ham:after { top: calc(100% - 1px); width: 100%; } 
#header .top_wrap .all_btn:hover .ham,
#header .top_wrap .all_btn:hover .ham:before { width: 100%; } 
#header .top_wrap .all_btn:hover .ham:after { width: 100%; } 

#header .top_wrap .all.on .all_btn .in { position:fixed; top:2em; right:3em; width:2.5em; height:2.5em; z-index:9999; } 
#header .top_wrap .all.on .all_btn .ham { background:transparent; transition:0s; } 
#header .top_wrap .all.on .all_btn .ham:before,
#header .top_wrap .all.on .all_btn .ham:after { width:100% !important; top:50% !important; margin-top:auto; background:#fff; } 
#header .top_wrap .all.on .all_btn .ham:before { transform:rotate(45deg); } 
#header .top_wrap .all.on .all_btn .ham:after { transform:rotate(-45deg); } 

.headLink { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; } 
.headLink > li { } 
.headLink > li > .inner { display: flex; align-items: center; gap: .35rem; justify-content: center; padding: 0 1rem; height: 2.25rem; background: rgba(255, 255, 255, .075); backdrop-filter: blur(5px); border: 1px solid #fff; border-radius: var(--radius-pill); transition: .3s ease; } 
.headLink > li > .inner > .tit { font-size: var(--font-size-xs); font-weight: 600; } 
.scroll .headLink > li > .inner { background: var(--color-point); color: #fff; border: 1px solid var(--color-point); } 

#header .searchInc .wrapIn { position: fixed; left:0; top:0; width:100%; padding: 5rem 4rem; z-index:1; background: #fff; visibility:hidden; opacity:0; transform:translateY(-100%); box-sizing:border-box; transition:transform .5s; } 
#header .searchInc > a > .xi{ font-size: var(--font-size-lg-1);}
#header .searchInc .wrapIn .closeBtn { width:5em; height:5em; display:flex; align-items:center; justify-content:center; position:absolute; right:2rem; top:.5rem } 
#header .searchInc .wrapIn .closeBtn .xi { font-size:2em } 
#header .searchInc .wrapF { display:flex; flex-direction:column; gap:.5em } 
#header .searchInc .tit { font-family:var(--ff1); font-weight:500; font-size:1.75em; text-align:center } 
#header .searchInc .formW { --searchIncInpH : 7vmin; position:relative; display:flex; align-items:flex-end; justify-content: center; border: 2px solid #111; padding: 0.3rem; padding-left: 2.3rem; border-radius: 100px; width: fit-content; margin: 2rem auto 0;} 
#header .searchInc .formW .inp { border:none; background:none; width:50vmin;  font-size: var(--font-size-base);  box-sizing:border-box; height:var(--searchIncInpH) } 
#header .searchInc .formW .btn { width:var(--searchIncInpH); height:var(--searchIncInpH); margin-right: 0.5rem; box-sizing:border-box; background:#fff; border:none;  border-radius:50%; font-size: 1.4rem; /*  margin-left:calc(var(--searchIncInpH) / 2 * -1)  */} 
.searchOn#header .searchInc .wrapIn { visibility:visible; opacity:1; transform:translateY(0); box-shadow:0 1em 10vmin rgba(0,0,0,.2); color:#111;} 
.searchOn#header .top_wrap::before{position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7);}
.searchOn#header ~ #contents .visualSlide_wrap { z-index:-1 } 

#quick_inquiry{ position: fixed; z-index: 999; bottom: 2rem; left: 1.5vw; width: 28rem; border-radius: var(--radius-md); overflow: hidden;}
#quick_inquiry.on{ display: none;}
#quick_inquiry .inquiryHead{ display: flex; align-items: center; background: var(--color-point); padding: .85rem 1.5rem;  box-sizing: border-box; justify-content: space-between; gap: 1rem;}
#quick_inquiry .inquiryHead .tit{ font-size: var(--font-size-base); font-weight:700; color: #fff;}
#quick_inquiry .inquiryHead .close{ color: #fff;}
#quick_inquiry .formInner{ background: #fff; padding: 1rem 1.5rem 1.5rem 1.5rem; box-sizing: border-box;}
#quick_inquiry .formInner .tx{ font-size: var(--font-size-sm); font-weight: 600; color: var(--color-point);}
#quick_inquiry .formInner .formItem{ padding-bottom: var(--space-2); }
#quick_inquiry .formInner .formItem .input_st{ font-size: var(--font-size-sm-1);}

.scroll #header { background: #fff; color: var(--color-black-3); } 
.scroll #header .top_wrap { color: var(--color-black-3); } 
.scroll #header .top_wrap .logo > a img { filter: none; } 
.scroll #header .top_wrap .all_btn .ham,
.scroll #header .top_wrap .all_btn .ham:before,
.scroll #header .top_wrap .all_btn .ham:after { background: var(--color-black-3); } 
/* .scroll #header .top_wrap .wrapH,
.scroll #header .top_wrap .gnb_wrap .dp1 { height: 6.5rem; } */
.scroll #header .gnb_wrap .gnb > li:before { background: var(--color-black); opacity: .15; } 


#header .menu {display: flex; justify-content: center; align-items: center;}
#header .all_wrap { } 
#header .all_wrap .btn_all { position:relative; } 
#header .all_wrap .btn_all .btn_in { position:relative; display:block; width:1.625em; height:1.25em; } 
.main #header .all_wrap .btn_all .ham,
.main #header .all_wrap .btn_all .ham:before,
.main #header .all_wrap .btn_all .ham:after { display:block; width:100%; height:2px; background:#fff; transition:.2s; } 
#header .all_wrap .btn_all .ham,
#header .all_wrap .btn_all .ham:before,
#header .all_wrap .btn_all .ham:after { display:block; width:100%; height:2px; background:#000; transition:.2s; } 
#header .all_wrap .btn_all .ham:before,
#header .all_wrap .btn_all .ham:after { content:""; position:absolute; right:0; } 
#header .all_wrap .btn_all .ham:before { top:calc(50% - 1px); } 
#header .all_wrap .btn_all .ham:after { top:calc(100% - 2px); } 
#header .all_wrap .btn_all:hover .ham:before { width:80%; } 
#header .all_wrap .btn_all:hover .ham:after { width:90%; } 

#header.allOpen .all_wrap .btn_all { position:fixed; top:2em; right:3em; z-index:999; background:transparent; border-color:transparent; } 
#header.allOpen .all_wrap .btn_all .btn_in { width:3em; height:3em; } 
#header.allOpen .all_wrap .btn_all .ham { background:transparent; transition:0s; } 
#header.allOpen .all_wrap .btn_all .ham:before,
#header.allOpen .all_wrap .btn_all .ham:after { width:100% !important; top:50% !important; background:#fff; } 
#header.allOpen .all_wrap .btn_all .ham:before { transform:rotate(45deg); } 
#header.allOpen .all_wrap .btn_all .ham:after { transform:rotate(-45deg); } 

#header .all_wrap .all { position:fixed; z-index:-1; top:0; left:0; width:100%; height:100vh; visibility:hidden; opacity:0; transition:all .3s; } 
#header .all_wrap .all .wrap_bg { position:absolute; top:0; left:0; width:inherit; height:inherit; background:rgb(75, 0, 130, 0.95); transform:translateX(100%); transition:all .3s; } 
#header .all_wrap .all .wrap_in { position:absolute; top:0; left:0; width:inherit; height:inherit; opacity:0; transition:opacity .3s ease 0s; } 
#header .all_wrap .all .wrap_in .all_scroll { height:inherit; } 
#header .all_wrap .all .allconWrap { padding:6em 0; color:#fff; opacity:0; transform:translateY(8em); transition:all .8s; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb { flex-wrap:wrap; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb .flex { display:block; text-align:left !important; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li { flex:1 1 100%; max-width:50%; border-width:0 0 1px 0; display:block; padding:1em 2em; /* border:solid rgba(255,255,255,.15); */ border-width:0 1px 0 0; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li:nth-child(4n) { border-right: none; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li a { position:relative; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li ul { padding:0 .5em} 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li ul li a { padding:0; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp1 { margin-bottom:.5em; font-weight:600; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp1:before { content:""; display:block; position:absolute; top:0; left:0; width:1.375em; height:.375em; background:var(--color-point2); border-radius:6em; transform:rotate(-45deg) translate(-.5em, -1.125em); } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp1 .tt { font-size:1em; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp2 > li > a { font-weight:500; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp2 > li > a .tt { font-size:0.9em; color: #eee; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp3 > li > a { padding-left:.875em; opacity:.6; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp3 > li > a:before { content:""; display:block; position:absolute; left:0; top:.875em; width:5px; height:2px; background:#fff; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp3 > li > a .tt { font-size:.938em; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp2 > li:hover > a { color: var(--color-point2); font-weight:700; } 
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp3 > li:hover > a .tt { text-decoration:underline; } 

#header .all_wrap .all .allconWrap .all_gnb .gnb > li.m_search,
#header .all_wrap .all .allconWrap .all_gnb .gnb > li.m_policy { display:none; } 
#header.allOpen { z-index:999; } 
#header.allOpen .all_wrap .all { visibility:visible; z-index:99; opacity:1; } 
#header.allOpen .all_wrap .all .wrap_bg { transform:translateX(0); } 
#header.allOpen .all_wrap .all .wrap_in { opacity:1; transition-delay:.5s; } 
#header.allOpen .all_wrap .all .allconWrap { opacity:1; transform:translateY(0); transition-delay:.5s; } 

#header.gnbOpen .menu_wrap { background:#fff } 
.main #header.gnbOpen .menu_wrap { background:var(--siteC)!important; } 
#header.gnbOpen .menu_wrap .logo .in { transform:translateY(0) } 
#header.gnbOpen .gnb_wrap > .gnb > li .dp1:hover .tt { color:var(--color-point)!important; } 
.main #header.gnbOpen .gnb_wrap > .gnb > li .dp1:hover .tt { color:var(--color-point)!important; } 
#header .all_wrap .all .all_scroll { height: 100%; overflow-y: auto; box-sizing: border-box; } 
#header .all_wrap .all .wrap_in { height: 100vh; overflow: hidden; } 

#header .top_wrap .all.on .all_btn .in { width:2.5rem; height:2.5rem; z-index:999999999; } 
#header .top_wrap .all.on .all_btn .ham { background:transparent; transition:0s; } 
#header .top_wrap .all.on .all_btn .ham:before,
#header .top_wrap .all.on .all_btn .ham:after { width:100% !important; top:50% !important; margin-top:auto; background: #fff; } 
#header .top_wrap .all.on .all_btn .ham:before { transform:rotate(45deg); } 
#header .top_wrap .all.on .all_btn .ham:after { transform:rotate(-45deg); } 
#header .top_wrap .all.on .siteBg { transform: translate(-50%,-50%) scale(100) } 

/* .allGnbOn { overflow-y:hidden } 
.allGnbOn body { overflow-y:scroll } 
.allGnbOn #header .all_wrap .all_layer .all_inner .innerGuide { opacity: 1; } 
.allGnbOn #header .all_wrap .all_layer .all_inner .innerLink .linkContainer,
.allGnbOn #header .all_wrap .all_layer .all_inner .innerBg { opacity: 1; transform: translateY(0); } 
.allGnbOn #header .all_wrap .all_layer .all_inner .innerBg .Bginner > .title { opacity: 1; transform: translateX(0); } 
 */

.dp1on .gnb .dp2 { display:none!important } 
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3 { display:none!important } 
.dp2on .gnb > li.on { display:block!important } 
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a { display:none!important } 
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on { display:block!important } 


/*quick*/
#quick_new { display: none; position:fixed; z-index:999; bottom:2rem; right:1.5vw; text-align:right; overflow: hidden; transform: translateY(0); transition: .5s var(--ani-1); filter: drop-shadow(0 3.2px 19.2px rgba(0, 0, 0, 0.16)); -webkit-filter: drop-shadow(0 3.2px 19.2px rgba(0, 0, 0, 0.16)); } 
html.main:not(.scroll) #quick_new { opacity: 0; visibility: hidden; } 
html:not(.scroll) #quick_new > li { transform: translateY(4rem); } 
#quick_new .quick_wrap { position:relative; display: inline-flex; width:4.85rem; min-height: 4rem; box-sizing:border-box; transition:width .3s; padding: .85rem 0 .75rem 0; border-radius: var(--radius-sm); box-sizing: border-box; } 
#quick_new .quick_wrap > .in { position:relative; display: flex; flex-direction: column; } 
#quick_new .quick_wrap > .in .tt { font-weight: 800; font-size: var(--font-size-xs); line-height: 1; letter-spacing: -1px; } 
#quick_new > li { margin-bottom: .5rem; transition: .5s var(--ani-1); } 
#quick_new > li:last-of-type { margin-bottom: 0; } 
#quick_new > li .quick_wrap .quick_icon { text-align:center; font-size: var(--font-size-xxxs); margin-bottom: .0876rem; } 
#quick_new > li .quick_wrap .quick_icon > .xi { line-height: 1; } 
#quick_new > li .quick_wrap .icon { } 
#quick_new > li .quick_wrap .icon > img { width: 30px; height: 35px; object-fit: contain; } 
#quick_new > li .quick_wrap.inquiry .icon { filter: var(--crWhitefil); } 
#quick_new.top { bottom: 320px; padding-bottom: .5em; } 

#quick_new > li .goTop { color:#fff; background: var(--color-black-2); transition: .5s var(--ani-1); } 
#quick_new > li .inquiry { color: #fff; background: var(--color-point2); } 
#quick_new > li .faq { background: #fff; color: var(--color-black); } 

/*all*/
.vod_wrap { position:relative; width: 100%; height: 100%; } 
.vod_wrap .vod { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover } 

.smRound { width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-point); display: flex; align-items: center; justify-content: center; } 
.smRound > .xi { transform: rotate(-45deg); font-size: var(--font-size-sm); color: #fff; transition: .3s ease; } 

.smRound.s1 { width: 2.5rem; height: 2.5rem; } 

.vod_wrap { position:relative; width: 100%; height: 100%; } 
.vod_wrap .vod { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover } 

.visualSlide_wrap { position: relative; height:calc(var(--vh, 1vh) * 100); padding: 1rem; box-sizing: border-box; } 
.visualSlide { position: relative; height: 100%; border-radius: 1.6rem 1.6rem 0 1.6rem; overflow: hidden; } 

.visualSlide .swiper-wrapper > .el { background: #000; } 
.visualSlide .swiper-wrapper > .el .bg { position:absolute; left:0; top:0; width:100%; height:100%; transform: scale(1); transition: 4s ease; } 
.visualSlide .swiper-wrapper > .el .bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .415) 100%); content: ''; } 
.visualSlide .swiper-wrapper > .el .bg > img { height: 100%; object-fit: cover; width: 100%; } 
.visualSlide .swiper-wrapper > .el .vod_wrap { position: relative; } 
.visualSlide .swiper-wrapper > .el .vod_wrap:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .415) 100%); content: ''; z-index: 1; } 
.visualSlide .slogan_wrap { position: absolute; top: 48.5%; transform: translateY(-50%); text-align: center; width: 100%; z-index: 2; } 
.visualSlide .slogan_wrap .slogan .title { overflow: hidden; } 
.visualSlide .slogan_wrap .slogan .title > .t1 { font-size: var(--font-size-xxxxl); line-height: 1.3; font-weight: 700; color: #fff; transform: translateY(100%); transition: 1.4s ease; text-shadow: 0 0 20px rgb(17 17 17 / 16%);} 
.visualSlide .slogan_wrap .slogan .title > .t1 > .c1 { color: var(--color-point4); } 
.visualSlide .slogan_wrap .slogan .title > .t1 > .c2 { color: var(--color-point2); } 
.visualSlide .slogan_wrap .slogan .txt_wrap { } 
.visualSlide .slogan_wrap .slogan .txt_wrap .desc { font-size: var(--font-size-md); line-height: var(--line-height-normal); margin-top: var(--space-2); color: rgba(255,255,255, .915); font-weight: 300; transform: translateX(6rem); opacity: 0; transition: 1.4s ease .6s; text-shadow: 0 0 20px rgb(17 17 17 / 16%);} 
.visualSlide .slogan_wrap .slogan .btn_Wrap { transform: translateX(4rem); opacity: 0; filter: blur(5px); transition: 1s all 1s; } 
.visualSlide .el.swiper-slide-active .bg { transform: scale(1.1); } 

.load .visualSlide .slogan_wrap .slogan .txt_wrap .desc { opacity: 1; transform: translateX(0); } 
.load .visualSlide .slogan_wrap .slogan .title > .t1 { transform: translateY(0); } 


.visualSlide_wrap .visualControl { } 
.visualSlide_wrap .visualControl.posiB { padding: 1rem 2rem 1rem 3.5rem; z-index: 100; } 
.visualSlide_wrap .visualControl .control { display: flex; align-items: center; gap: .5rem; } 
.visualSlide_wrap .visualControl .control .progress-container { display: flex; align-items: center; gap: .85rem; } 
.visualSlide_wrap .swiperControl .paging.dot { display: flex; align-items: center; gap: var(--gap-xs); } 
.visualSlide_wrap .swiperControl .paging.dot span { width: 20px; background: transparent; opacity: 1; } 
.visualSlide_wrap .visualControl .control .progress-container .progress-bar { position: relative; display: block !important; bottom: 0; width: 100px; height: 3px; background: rgba(0,0,0, .15); } 
.visualSlide_wrap .visualControl .control .progress-container .progress-bar .swiper-pagination-progressbar-fill { background: var(--color-point); } 
.visualSlide_wrap .visualControl .control .progress-container .current-slide,
.visualSlide_wrap .visualControl .control .progress-container .total-slide { font-size: var(--font-size-sm-1); min-width: 1.25rem; line-height: 1; font-weight: 800; } 
.visualSlide_wrap .visualControl .control .swiperBtn { width: 4rem; height: 4rem; border-radius: var(--radius-pill); } 
.visualSlide_wrap .visualControl .control .swiperPauseWrap .swiperBtn { background: transparent; } 
.visualSlide_wrap .visualControl .control .swiperPauseWrap .swiperBtn:hover { color: var(--color-point); } 
.visualSlide_wrap .visualControl .control .swiperPauseWrap .swiperBtn:before { font-size: var(--font-size-md); } 

.swiper-button-lock { display: flex !important; } 

.circle-chart-container { position: relative; display: inline-block; } 
.circle-chart { transform: rotate(-90deg); } 
.circle-chart circle { transition: stroke-dashoffset 1s ease; } 
.circle-chart circle:first-child { stroke: #e6e6e6; } 

.circle-progress { stroke: #fff; stroke-dasharray: 75.398; stroke-dashoffset: 75.398; } 
.swiper-pagination-bullet-active .circle-progress { animation: fillCircle 8s linear forwards; } 

@keyframes fillCircle { 
 0% { stroke-dashoffset: 75.398; } 
100% { stroke-dashoffset: 0; } 
 }

.mainScroll { position:absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 99; } 
.mainScroll .inner { align-items: center; justify-content: center; } 
.mainScroll .tt { display:block; text-align: center; color: #fff; font-size: var(--font-size-sm); margin-bottom: var(--space-2); font-weight: 400; } 
.mainScroll .mouseImg { position:relative; } 
.mainScroll .mouseImg > .point { width: 1px; height: 35px; background: rgba(255, 255, 255, 0.2); margin: 0 auto; position: relative; overflow: hidden; } 
.mainScroll .mouseImg > .point > span { display: block; width: 1px; height: 200%; background: #fff; position: absolute; top: 0; left: 0; bottom: auto; -webkit-animation: scroll 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: scroll 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } 

@-webkit-keyframes scroll { 
 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 
to { -webkit-transform: translateY(50%); transform: translateY(50%); } 
 }

@keyframes scroll { 
 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 
to { -webkit-transform: translateY(50%); transform: translateY(50%); } 
 }
.mainScroll .mouseImg > img { width: 100%; height: 30px; object-fit: contain; filter: var(--crWhitefil); } 

/* greeting */
.greet_wrap { } 
.greet_wrap .greet-top { margin-bottom: 1rem; } 
.greet_wrap .greet-top .t1 {font-size: var(--font-size-xl); line-height: var(--line-height-normal); font-weight: 700;} 
.greet_wrap .greet-top .t1 > i{ color: var(--color-point2);}
.greet_wrap .greet-top .cp-2{font-weight: 700;}
.greet_wrap .greet-con { gap:4.5rem; /* padding: 0 3em; */ } 
.greet_wrap .greet-con .img_wrap { width: 40%; } 
.greet_wrap .greet-con .img_wrap .img {width: 100%; margin-top: -10em; padding-bottom: 120%; position: relative; border-radius: 15rem 0 15rem 0;}
.greet_wrap .greet-con .img_wrap .img::before{content: ''; position: absolute; right: -6em; bottom: -7em; width: 40vw; height: 40vw; border-radius: 50%; background: linear-gradient(0deg, #fff 0%, var(--color-point2) 50%, #fff 100%); animation-name: mainServiceAni3; animation-duration: 13s; animation-iteration-count: infinite; animation-direction: alternate; filter: blur(10px); opacity: .05; z-index: -2;}
/* .greet_wrap .greet-con .img_wrap .img { width: 100%; margin-top: -4em; padding-bottom: 120%; border:1px solid #ddd; border-radius: 1em; box-shadow: -3px 3px 15px rgba(0,0,0,.1); }  */
.greet_wrap .greet-con .txt_wrap { order: -1; flex:1; padding-top: 1.6rem; }
.greet_wrap .greet-con .txt_wrap .t1{color: #333; font-size: var(--font-size-md); line-height: var(--line-height-loose);} 
.greet_wrap .greet-con .txt_wrap .t1 + .t1 { margin-top: 1.7rem; } 
.greet_wrap .greet-con .txt_wrap p.ceo { margin-top: 1rem; padding-right: 3em; font-size: var(--font-size-lg); text-align: right; } 
.greet_wrap .greet-con .txt_wrap p.ceo strong { padding-left: 1rem; font-weight: 600;} 
.greet_wrap .greet-con .txt_wrap p.ceo .sign{ position:relative; top: 1rem;}
.greet_wrap .greet-con .txt_wrap p.ceo .sign > img{ width: 100%; height: 50px; object-fit: contain;}

@keyframes mainServiceAni { 
 0% { transform: rotate(0) translate(0, 0) scale(1)}
 100% { transform: rotate(360deg) translate(20%, 5%) scale(1.2, 1); } 
 }
@keyframes mainServiceAni2 { 
 0% { transform: rotate(0) translate(0, 0) scale(1)}
 100% { transform: rotate(360deg) translate(10%, 5%) scale(1.2, 1); } 
 }
@keyframes mainServiceAni3 { 
 0% { transform: rotate(0) translate(0, 0) scale(1)}
 100% { transform: rotate(-360deg) translate(10%, 5%) scale(1.2, 1); } 
 }

/*  */
#sec_notice .box1{ position:relative;}
#sec_notice .notice,
.mainNoticeSlide{ height:4em}
 #sec_notice .notice{ position: relative; overflow: hidden;  width: 100%; box-sizing: border-box; background: var(--color-point2); color:#fff; padding:0 2.5rem; border-radius: var(--radius-sm); margin-bottom:4em; gap:0 2em; z-index: 99;}
#sec_notice .notice .tit_wrap{ display:flex; align-items:center; gap:0 .25em}
#sec_notice .notice .tit_wrap .ico{ font-size:1.5em}
#sec_notice .notice .tit_wrap .ico:before{content:"\ea59"; animation-name: noticeIcoAni; animation-duration:2s; transform-origin:center; animation-timing-function:linear; animation-iteration-count: infinite}
#sec_notice .notice .tit_wrap .tt{ font-weight:600; font-size:1.125em}
@keyframes noticeIcoAni{
33% {content:"\ea5a"}
66% {content:"\ea5b"}
}
.mainNoticeSlide .el{ height:100%}
.mainNoticeSlide .el .in{ height:100%; display:flex; align-items:center;}
.mainNoticeSlide .el .in .tt{ flex:1 1 0%; min-width:0; font-size:1.063em}
.mainNoticeSlide .el .in:hover .tt{ text-decoration:underline}
.mainNoticeSlide .el .in .date{ opacity:.6; margin-left:2em}
.mainNoticeSlide_control{ height:100%; display:flex; flex-direction:column}
.mainNoticeSlide_control > a{ display: flex; align-items: center; justify-content: center; height:50%; width:3em; text-align:center; box-sizing:border-box; border:1px solid rgba(255,255,255,.2); border-bottom:none}
.mainNoticeSlide_control > a .xi{ font-size:1em}
.mainNoticeSlide_control > a.prev .xi:before{content:"\e944"}
.mainNoticeSlide_control > a.next .xi:before{content:"\e941"}
.mainNoticeSlide_control > a:hover{ background:rgba(0,0,0,.2)}

/*  */
#sec_best{ overflow: hidden;}
#sec_best .best-container{ display: flex;}
#sec_best .best-container .main_tit{ width: 20%;}
#sec_best .best-container .productSlide{ padding-right: 1px; margin-right: -1px;}
#sec_best .best-container .productSlide .swiper-slide{ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-font-smoothing: subpixel-antialiased;}
#sec_best .best-container .productSlide_control{ position:relative; margin-top: var(--space-6);}
#sec_best .best-container .productSlide_control .swiperBtn{ background: transparent; border-radius: 0; color: var(--color-point);}
#sec_best .best-container .productSlide_control .swiperBtn:hover{ background: var(--color-point); color: #fff;}
#sec_best .best-container .productSlide_control .control{ overflow: hidden; background: #fff; border-radius: var(--radius-pill); width: fit-content;}
#sec_best .best-container .productSlide_control .progress-container{ width: 5rem; justify-content: center; gap: 1rem;}
#sec_best .best-container .productSlide_control .progress-container > span{ position:relative; min-width: 1.5rem; font-size: var(--font-size-xs); font-weight: 600; line-height: 1; color: var(--color-black-8); }
#sec_best .best-container .productSlide_control .progress-container > .current-slide{ color: var(--color-point); font-weight: 700;}
#sec_best .best-container .productSlide_control .progress-container > .current-slide:before{ position: absolute; right: -.5rem; top: 50%; transform: translateY(-50%); width: 1px; height: 8px; background: var(--color-black-8); content: '';}
#sec_best .best-container .productSlide_wrap{ position:relative; left: 12rem; width: 80%; }
#sec_best .best-container .productSlide{}
.products .proIn{ position:relative; display: block; border-radius: var(--radius-posi) var(--radius-posi) 0 var(--radius-posi); overflow: hidden; padding: 1.5rem; box-sizing: border-box; background: #fff; transition: .3s ease;}
.products .proIn > .proImg{ border-radius: var(--radius-md); background: #fff; overflow: hidden; border: 1px solid var(--gray-line-2); width: 100%; height: 24.5rem;}
.products .proIn > .proImg > img{ width: 100%; height: 100%; object-fit: contain; transition: .3s ease;}

.products .proIn .proinfo{ position:relative; padding-top: var(--space-4); padding-left: var(--space-1); padding-bottom: var(--space-3); box-sizing: border-box; width: calc(100% - 4rem);}
.products .proIn .proinfo > .tt{ font-size: var(--font-size-sm-1); color: var(--color-point2); line-height: 1; /* opacity: .615; */}
.products .proIn .proinfo > .tit{ font-size: var(--font-size-lg); font-weight: 700; line-height: 1; margin-top: var(--space-3); transition: .3s ease;}
.products .proIn .proinfo > .typeList{ display: flex; gap: .15rem;}
.products .proIn .proinfo > .typeList > li{}
.products .proIn .proinfo > .typeList > li > .type{ display: inline-block; margin-bottom: var(--space-2); padding: .15rem .35rem; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--color-point); color: #fff; transition: .3s ease;}
.products .proIn .proinfo > .typeList > li > .type.type1{ background: var(--color-point);}
.products .proIn .proinfo > .typeList > li > .type.type2{ background: var(--color-point2);}
.products .proIn .proinfo > .typeList > li > .type.type3{ background: var(--color-point4);}
.products .proIn .proinfo > .typeList > li > .type > .tt{ font-size: var(--font-size-xxs); line-height: 1; font-weight: 600;}

.products .proIn:hover{ background: var(--color-point);}
.products .proIn:hover .proinfo > .tit{ color: #fff;}
.products .proIn:hover .roundArrow{ background: var(--color-point);}
.products .proIn:hover .roundArrow > .xi{ transform: rotate(0);}
.products .proIn:hover > .proImg > img{ transform: scale(1.05);}
.products .proIn:hover .proinfo > .typeList > li > .type.type1{ background: #fff; color: var(--color-point);}


/*  */
#sec_textSlide { overflow: hidden;} 
#sec_textSlide .textAni { padding: 0; font-size: var(--font-size-xxxxl); font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; font-weight: 600;} 
#sec_textSlide .textAni:before {  padding: 0 2rem; line-height: 1; content: '+'; color: var(--color-point2)} 


/*  */
#sec_key{}
#sec_key .about-con{ position:relative; padding: 4rem; box-sizing: border-box; background: var(--color-point); border-radius: var(--radius-lg); overflow: hidden;}
#sec_key .about-con .bg{ position: absolute; top: 0; right: 0; width: 80%; height: 60%; z-index: 1;}
#sec_key .about-con .bg > img{ width: 100%; height: 100%; object-fit: cover; opacity: .1; pointer-events: none;}
#sec_key .whyList{ position: relative; display: flex; gap: 1rem; flex-wrap: wrap; z-index: 2;}
#sec_key .whyList > li{ width: calc((100% - 3rem) / 4);}
#sec_key .whyList > li > .inner{ padding: 3rem 2.5rem; box-sizing: border-box; border: 1px solid rgba(255,255,255, .415); border-radius: var(--radius-md); background: rgba(255, 255, 255, .065); backdrop-filter: blur(10px);}
#sec_key .whyList > li > .inner > .tit{ font-size: var(--font-size-lg-1); font-weight: 600; color: #fff;}
#sec_key .whyList > li > .inner > .desc{ font-size: var(--font-size-base); line-height: var(--line-height-normal); color: rgba(255,255,255, .815); margin-top: var(--space-2);}
#sec_key .whyList > li > .inner > .icon{ display: flex; justify-content: end; margin-top: var(--space-6);}
#sec_key .whyList > li > .inner > .icon > img{ height: 4.5rem; object-fit: contain; opacity: .915;}

#sec_key .highlight-con{ display: flex; border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-4);}
#sec_key .highlight-con > li{ flex: 1;}
#sec_key .highlight-con > li > .hiBox{ background: var(--color-black); padding: 2.5rem 3.5rem; box-sizing: border-box; border-right: 1px solid rgba(255,255,255, .15); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }
#sec_key .highlight-con > li:last-of-type > .hiBox{ border-right: none;}
#sec_key .highlight-con > li > .hiBox > .tit{ font-size: var(--font-size-lg-1); font-weight: 600; color: #fff; line-height: 1;}
#sec_key .highlight-con > li > .hiBox > .desc{ font-size: var(--font-size-sm); font-weight: 500; color: rgba(255,255,255, .515); margin-top: var(--space-1);}
#sec_key .highlight-con > li > .hiBox > .numBox{ display: flex; align-items: end; justify-content: end; gap: .35rem; color: var(--color-point2); margin-top: var(--space-8);}
#sec_key .highlight-con > li > .hiBox > .numBox > .tit{ position:relative; top: 8px; font-size: var(--font-size-xxxl); font-weight: 600; line-height: 1;}
#sec_key .highlight-con > li > .hiBox > .numBox > .tx{ font-size: var(--font-size-md); font-weight: 600; line-height: 1;}


/*  */
#sec_products{ padding-top: 0; overflow: hidden;}
#sec_products .products .proIn{ padding: 0; background: transparent; border-radius: var(--radius-posi) 0 var(--radius-posi) var(--radius-posi);}
#sec_products .products .proIn:hover{ background: transparent;}
#sec_products .products .proIn > .proImg{ height: 28.5rem; border: none;}
#sec_products .products .proIn .proinfo{ width: 100%;}
#sec_products .products .proIn:hover .proinfo > .tit{ color: var(--color-point); text-decoration: underline;}
#sec_products .products .proIn:hover .proinfo > .typeList > li > .type.type1{ background: var(--color-point); color: #fff;}
#sec_products .products .proIn .roundArrow.b1{ transition: .3s ease;}
#sec_products .products .proIn:hover .roundArrow.b1{ background: var(--color-point2);}
#sec_products .diffenceSlide_wrap .product_paging_control { margin: 0 auto; width: 25rem; margin-top: var(--space-7); }
#sec_products .diffenceSlide_wrap .product_paging_control .swiper-pagination-progressbar{ position:relative; height: 2px;}

#sec_products .notiBtn {
    position: relative;
    display: flex;
    gap: .5rem;
}

#sec_products .notiBtn > li { flex-shrink: 0;
}

#sec_products .notiBtn > li > .con {
    display: flex;
    align-items: center;
    background: #fff;
    height: 2.85rem;
    padding: 0 1.75rem;
    border: 1px solid var(--gray-line-1);
    border-radius: 100px;
    cursor: pointer;
    transition: .3s ease;
}

#sec_products .notiBtn > li > .con > .tt {
    font-weight: 600;
}

#sec_products .notiBtn > li.on > .con {
    background: var(--color-point);
    color: #fff;
    border: 1px solid var(--color-point);
}

/*  */
#sec_partner{ position:relative; padding-top: 0;}
#sec_partner .partner_container{ display: flex; gap: 1rem;}
#sec_partner .partner_container .partnerItem{ position:relative; display: flex; gap: 2rem; width: calc((100% - 1rem) / 2); padding: .5rem; box-sizing: border-box; border-radius: var(--radius-md); overflow: hidden;}
#sec_partner .partner_container .partnerItem.b1{ background: #fff;}
#sec_partner .partner_container .partnerItem.b2{ background: var(--color-point);}
#sec_partner .partner_container .partnerItem .infoWrap{ display: flex; padding: 1.5rem 0 1.5rem 1.5rem; box-sizing: border-box; width: 50%; flex-direction: column; justify-content: space-between;}
#sec_partner .partner_container .partnerItem .infoWrap > .infoT{ display: flex; align-items: center; gap: 1.5rem;}
#sec_partner .partner_container .partnerItem .infoWrap > .infoT > .logo{}
#sec_partner .partner_container .partnerItem .infoWrap > .infoT > .logo > img{ height: 50px; object-fit: contain;}
#sec_partner .partner_container .partnerItem .infoWrap > .infoT > .roundTit{ display: flex; gap: .25rem; align-items: center; justify-content: center; padding: 0 1rem; height: 2.2rem; border-radius: var(--radius-pill);}
#sec_partner .partner_container .partnerItem .infoWrap > .infoT > .roundTit > .tt{ font-size: var(--font-size-xs); font-weight: 600; line-height: 1;}
#sec_partner .partner_container .partnerItem .infoWrap > .infoT > .roundTit > .xi{ font-size: var(--font-size-sm);}
#sec_partner .partner_container .partnerItem .infoWrap > .infoB{ margin-top: var(--space-7)}
#sec_partner .partner_container .partnerItem .infoWrap > .infoB > .tit{ font-size: var(--font-size-lg-1); font-weight: 600;}
#sec_partner .partner_container .partnerItem .infoWrap > .infoB > .txt{ font-size: var(--font-size-sm); line-height: var(--line-height-normal); margin-top: var(--space-2);}
#sec_partner .partner_container .partnerItem .infoWrap .tagList{ display: flex; flex-wrap: wrap; gap: .5rem .3rem; margin-top: var(--space-6);}
#sec_partner .partner_container .partnerItem .infoWrap .tagList > li{}
#sec_partner .partner_container .partnerItem .infoWrap .tagList > li > .con{ display: flex; align-items: center; justify-content: center; height: 2rem; padding: 0 .75rem; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--color-point2); color: #fff;}
#sec_partner .partner_container .partnerItem .infoWrap .tagList > li > .con > .tt{ font-size: var(--font-size-xxs); font-weight: 600; line-height: 1;}
#sec_partner .partner_container .partnerItem.b2 .infoWrap > .infoB > .tit{ color: #fff;}
#sec_partner .partner_container .partnerItem.b2 .infoWrap > .infoB > .txt{ color: rgba(255,255,255, .815);}
#sec_partner .partner_container .partnerItem .imgWrap{ position:relative; width: 50%; height: 35rem; box-sizing: border-box; border-radius: var(--radius-posi) 0 var(--radius-posi) var(--radius-posi); overflow: hidden;}
#sec_partner .partner_container .partnerItem .imgWrap > img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: 2s ease;}
#sec_partner .partner_container.on .partnerItem .imgWrap > img{ transform: scale(1);}
#sec_partner .partner_container .partnerItem .imgWrap .roundArrow{ width: 3rem; height: 3rem; transition: .15s ease;}
#sec_partner .partner_container .partnerItem.b1 .imgWrap .roundArrow:hover{ background: var(--color-point2);}
#sec_partner .partner_container .partnerItem.b2 .imgWrap .roundArrow:hover{ background: var(--color-point4); color: #fff;}
#sec_partner .partner_container .partnerItem .imgWrap .roundArrow > .xi{ transform: rotate(0); font-size: var(--font-size-md-1);}

#sec_partner .partner_container .partnerItem.b1 .infoWrap > .infoT > .roundTit{ background: var(--color-point); color: #fff;}
#sec_partner .partner_container .partnerItem.b2 .infoWrap > .infoT > .roundTit{ background: var(--color-point4); color: #fff;}
#sec_partner .partner_container .partnerItem.b2 .infoWrap > .infoT > .logo > img{ filter: var(--crWhitefil);}


#sec_youtube{ padding-top: 0;}
#sec_youtube .mediaList{ display: flex; gap: 2.5rem 1.5rem; flex-wrap: wrap;}
#sec_youtube .mediaList > li{ width: calc((100% - 4.5rem) / 4);}
#sec_youtube .mediaList li .inner{ display: block;}
#sec_youtube .mediaList li .inner .someImg{ position:relative; width: 100%; height: 225px; border-radius: var(--radius-md); overflow: hidden; transition: .3s ease;}
#sec_youtube .mediaList li .inner .someImg:before{     content: '';
    width: 44px;
    height: 31px;
    background: url(../images/inc/ico-youtube.png) no-repeat center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.5s ease;
}
#sec_youtube .mediaList li .inner .someImg:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .315); content: ''; z-index: 1; opacity: 0; transition: .3s ease;}
#sec_youtube .mediaList li .inner .someImg .watch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); 
    transform-origin: center center;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 131px;
    height: 46px;
    padding: 15px 25px;
    border-radius: var(--radius-pill);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1), inset 0px 0px 9.5px rgba(255, 255, 255, 0.15);
    background: rgba(255,255,255, .15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-sizing: border-box;
    z-index: 50;
    color: #fff;
    opacity: 0; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#sec_youtube .mediaList li .inner .someImg .watch > .tt{ font-size: var(--font-size-sm); line-height: 1; font-weight: 600;}
#sec_youtube .mediaList li .inner .someImg .watch > .xi{ transform: rotate(90deg);}
#sec_youtube .mediaList li .inner:hover .someImg .watch{ opacity: 1; transform: translate(-50%, -50%) scale(1);}
#sec_youtube .mediaList li .inner:hover .someImg:before {
    opacity: 0;
    transform: scale(0.5);
}
#sec_youtube .mediaList li .inner:hover .someImg:after{ opacity: 1;}
#sec_youtube .mediaList li .inner .someImg > img{ width: 100%; height: 100%; object-fit: cover;}
#sec_youtube .mediaList li .inner .info{ padding: 0 .5rem; box-sizing: border-box;}
#sec_youtube .mediaList li .inner .info > .tit{ font-size: var(--font-size-base); font-weight: 700; line-height: 1.3;  margin: 1.25rem 0; transition: .3s ease;}
#sec_youtube .mediaList li .inner .info > .date{ font-size: var(--font-size-sm); color: var(--color-black-8); font-weight: 500;}
#sec_youtube .mediaList li .inner:hover .someImg{ transform: translateY(-3%);}
#sec_youtube .mediaList li .inner:hover .info > .tit{ text-decoration: underline;}


/*  */
#sec_news{ padding-top: 0;}
#sec_news .newsList{ display: flex; gap: 1.5rem; flex-wrap: wrap;}
#sec_news .newsList > li{ width: calc((100% - 4.5rem) / 4);}
#sec_news .newsList > li > .inner{ position:relative; display: block; padding: 1rem; box-sizing: border-box; background: #fff; border-radius: var(--radius-md); z-index: 9;}
#sec_news .newsList > li > .inner > .imgCon{ position: relative; width: 100%; height: 18.5rem; border-radius: var(--radius-md); overflow: hidden;}
#sec_news .newsList > li > .inner > .imgCon > img{ width: 100%; height: 100%; object-fit: cover;}
#sec_news .newsList > li > .inner > .info{ width: 80%; padding-left: .5rem; box-sizing: border-box; margin-top: var(--space-3);}
#sec_news .newsList > li > .inner > .info > .tit{ font-size: var(--font-size-md-1); font-weight: 600; margin: .5rem 0;}
#sec_news .newsList > li > .inner > .info > .txt{ font-size: var(--font-size-sm-1); font-weight: 400; color: var(--color-black-10);}
#sec_news .newsList > li > .inner > .info > .date{ margin-top: var(--space-4); font-size: var(--font-size-xs); color: var(--color-black-11);}


/*main tit*/
.main_tit { position:relative; margin-bottom: var(--space-6); } 
.main_tit.white > * { color: #fff !important; } 
.main_tit.white .line { background: #fff !important; } 
.main_tit.mb0 { margin-bottom: 0; } 
.main_tit .cate { font-size: var(--font-size-md); font-weight: 500; margin-bottom: var(--space-4); color: var(--color-point2); } 
.main_tit.white .cate { color: #fff; } 
.main_tit .t1 { font-size: var(--font-size-xxl); font-weight: 600; line-height: 1.215;} 
.main_tit .t1.en { font-weight: 800; } 
.main_tit .t2 { font-size: var(--font-size-xl-1); font-weight: 400; } 
.main_tit .t3 { position:relative; display: inline-flex; align-items: center; height: 2rem; padding: 0 1.5rem; border-radius: var(--radius-pill); border: 1px solid var(--color-point); margin-bottom: var(--space-2); font-size: var(--font-size-sm-1); text-transform: uppercase; font-weight: 600; color: var(--color-point); } 
.main_tit.white .t3{ border: 1px solid rgba(255,255,255, .315); color: rgba(255,255,255, .915) !important;}
.main_tit .t3.en { font-weight: 600; } 
.main_tit .t3 .line { width: 4rem; height: 2px; background: var(--color-point); } 
.main_tit .t4 { font-size: var(--font-size-md-1); line-height: var(--line-height-loose); margin-top: var(--space-4); color: var(--color-black-4); } 

.main_tit .t5 { font-size: var(--font-size-md-1); line-height: var(--line-height-loose); color: var(--color-black-6); margin-top: var(--space-3) } 

/*main box*/
.main_topCon { margin-bottom: var(--space-6); align-items: end; } 
.main_box { padding: 6rem 0; } 
.main_box.pt { padding-top: 0; } 
.main_box.pb { padding-bottom: 0; } 
.main_box.pN { padding: 0; } 

/*roundmore*/
.roundMore { display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; border-radius: var(--radius-pill); background: var(--color-point); color: #fff; } 
.roundMore > .xi { transform: rotate(-45deg); } 

/*linemore*/
.lineMore { position:relative; } 
.lineMore:before { position: absolute; bottom: 0; width: 100%; height: 2px; content: ''; transition: .3s var(--ani-1); } 
.lineMore > .tt { font-size: var(--font-size-base); font-weight: 700; padding-bottom: .75rem; transition: .3s var(--ani-1); } 
.lineMore.btn_white { color: #fff; } 
.lineMore.btn_white:before { background: #fff; } 
.lineMore.btn_white:hover { color: var(--color-point2); } 
.lineMore.btn_white:hover:before { background: var(--color-point2); } 

/*blur more*/
.blurBoxArrow { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); background: #fff; transition: .3s var(--ani-1); } 
.blurBoxArrow > .xi { transform: rotate(-45deg); } 
.blurBoxArrow:hover { background: var(--color-point); color: #fff; } 

.mainTop { display: flex; align-items: end; justify-content: space-between; gap: 10rem; margin-bottom: var(--space-6); } 

/*sec_about*/
/* footer */
#footer { position: relative;  padding: 2rem 1.5rem 1rem; overflow: hidden; background: #111; }
#footer .footerContainer { position: relative; z-index: 2; max-width: 75rem; margin: 0 auto; }
#footer .footerTop { flex-direction: column; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#footer .footerTop .leftCon > .logo > img { height: 1.875rem; object-fit: contain; }
#footer .footerTop .leftCon .sns_st { display: none; }
#footer .footerTop .rightCon .rightTop { display: none; }
#footer .footerTop .rightCon .rightMid .infoSec { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
#footer .footerTop .rightCon .rightMid .infoSec > li { width: 100%; }
#footer .footerTop .rightCon .rightMid .infoSec > li > .conBox > .subT { display: none; }
#footer .footerTop .rightCon .rightMid .infoSec > li > .conBox > .infoList { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center;}
#footer .footerTop .rightCon .rightMid .infoSec > li > .conBox > .infoList > li { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; line-height: 1.4; margin-bottom: 0; }
#footer .footerTop .rightCon .rightMid .infoSec > li > .conBox > .infoList .con { display: flex; align-items: center; gap: 0.375rem; }
#footer .footerTop .rightCon .rightMid .infoSec > li > .conBox > .infoList .con > .icon { display: none; }
#footer .footerBtm { display: flex; align-items: center; justify-content: space-between; background: transparent; margin-top: 1rem; padding: 0; border-radius: 0;flex-direction: column; gap: 1rem;}
#footer .footerBtm .copyright { font-size: 0.75rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
#footer .menu { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } 
#footer .menu > li > .in { display: flex; align-items: center; font-size: 0.7rem;} 
#footer .menu > li:not(:last-child) > .in:after { content: ""; margin-left: 1rem; width: 0.1875rem; height: 0.1875rem; border-radius: 50%; background: rgba(255, 255, 255, 0.3); } 
#footer .menu > li > .in .tt { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); } 
#footer .menu > li > .in.point { font-weight: 600; color: #fff; } 
#footer .menu > li > .in:hover { text-decoration: underline; }


/*contents*/
.main #contents { background: var(--color-back-1);}
#contents .doc { padding: 4rem 0 0 ; min-height: 70vh} 
#contents .doc.pb0 { padding-bottom: 0rem; } 
#contents .doc.pt0 { padding-top: 0rem; } 
#contents .doc.pN { padding: 0rem; } 
#contents .sub_top_wrap { height:30rem; position:relative; margin: 0 auto; transition: 1s ease; display: none; } 
#contents .sub_top_wrap .wrapBg { position:relative; width:100%; height:100%; background-color:#f1f1f1; overflow:hidden } 
#contents .sub_top_wrap .wrapBg .bg { height:100%; background-size:100% auto; transform: scale(1.2); transition: transform 3.4s ease; } 
.load #contents .sub_top_wrap .wrapBg .bg { transform: scale(1); } 
#contents .sub_top_wrap .wrapBg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.315; } 
#contents .sub_top_wrap .subTit { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; } 
#contents .sub_top_wrap .subTit .t1 { font-size: var(--font-size-xxl); text-align: center; line-height: 1; font-weight:500; color: #fff; opacity: 0; letter-spacing: .515rem; } 
#contents .sub_top_wrap .subTit .t2 { font-size: var(--font-size-md); font-weight: 400; margin-top: 1.5rem; color: rgba(255,255,255, .915); opacity: 0; letter-spacing: .165rem; } 
.load #contents .sub_top_wrap .subTit .t2 { letter-spacing: 0; opacity: 1; transition: 1.4s .4s ease; } 
.load #contents .sub_top_wrap .subTit .t1 { letter-spacing: -2px; opacity: 1; transition: 1.8s .4s ease; } 
#contents .sub_top_wrap .subTab { width: 100%; flex: 1; } 
#contents .sub_top_wrap .subTab .gnb { } 
#contents .sub_top_wrap .subTab .gnb > li { } 
#contents .sub_top_wrap .subTab .gnb > li.on { display: flex; } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 { display:inline-flex; flex-wrap:wrap; width: 100%; } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li { position:relative; flex:1; min-width:0; max-width: 10vw; } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li:before { position: absolute; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); background: #fff; opacity: 0; visibility: hidden; transition: .5s ease; content: ''; } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a { height:5.25rem; display:flex; align-items:center; justify-content:center; color:#fff; box-sizing:border-box; position:relative } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a:before { content:""; position:absolute; right:0; top:50%; height:30%; transform:translateY(-50%); background:#fff; width:1px; opacity:.2; display: none; } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a .va { display:flex; align-items:center; line-height:1.1; position:relative; transition:.3s ease; word-break:keep-all; text-align:center } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a .va .tt { font-weight:700; font-size: var(--font-size-base); color: rgba(255,255,255, .715); transition: .3s ease; } 

#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li:hover:before,
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li.on:before { opacity: 1; visibility: visible; transform: scaleX(1); } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li:hover a .va .tt,
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li.on a .va .tt { color: #fff; } 

#contents .sub_page_menu { position: relative; top: var(--headH); background: #fff; border-bottom: 0.0625rem solid #eaeaea; padding: 0.75rem 0; margin-bottom: 1.5rem; text-align: center; }
#contents .sub_page_menu .gnb { display: inline-flex; background: transparent; padding: 0; box-shadow: none; }
#contents .sub_page_menu .gnb .dp2 { display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; padding: 0; gap: 1.5rem; }
#contents .sub_page_menu .gnb .dp2 > li > a { display: block; position: relative; padding: 0; height: auto; line-height: 1.2; color: #888; font-size: 0.875rem; font-weight: 500; border-radius: 0; background: transparent !important; box-shadow: none !important; transition: color 0.2s ease; }
#contents .sub_page_menu .gnb .dp2 > li > a .in:after { display: none; }
#contents .sub_page_menu .gnb .dp2 > li > a:hover { color: var(--color-point); }
#contents .sub_page_menu .gnb .dp2 > li.on > a { color: var(--color-point); font-weight: 700; }
#contents .sub_page_menu .gnb .dp2 > li.on > a::after { content: ""; position: absolute; left: 0; bottom: -0.5rem; width: 100%; height: 0.125rem; background-color: var(--color-point); border-radius: 0.0625rem; }



#contents .nav { align-items: center; justify-content: center; margin-bottom: 1.5rem; display: flex; opacity: 0; transition: 1s ease; transform: translateX(2rem); } 
.load #contents .nav { opacity: 1; transform: translateX(0); } 
#contents .nav > li { position:relative; padding:0 1em; color:#fff; } 
#contents .nav > li:before { position:absolute; left:0; top:50%; transform:translateY(-50%); width: 4px; height: 4px; background: #fff; border-radius: 50%; content: ''; } 
#contents .nav > li:first-child:before { display:none; } 
#contents .nav > li { color:#fff; font-weight:600; } 
#contents .nav > li > * { display:block; } 
#contents .nav > li.home { padding-left: 0; } 
#contents .nav > li.home .xi { font-size:1.125rem; } 
#contents .nav > li .tt { font-size: var(--font-size-base); } 

#contents .subTitle{ padding-top: var(--space-6);}
#contents .subTitle > .tt{ text-align: center; font-size: var(--font-size-xl); font-weight: 700;}

.scroll #contents .sub_top_wrap { width: 100%; } 

/* sub 공통 */
.pageCon.p1 { padding: 3.5rem 0; } 
.pageCon.p2 { padding: 4rem 0 6rem; } 
.pageCon.p3 { padding: 5rem 0 5rem; } 
.pageCon.bg1 { background: var(--color-bg-4); } 

.pageConBox + .pageConBox { margin-top: var(--space-6); } 

.page_tit { margin-bottom: var(--space-6); } 
.page_tit.white{ color: #fff;}
.page_tit .tt { font-size: var(--font-size-base); line-height: var(--line-height-normal); } 
.page_tit .t1 { font-size: var(--font-size-xl); line-height: 1.4; font-weight: 700; } 
.page_tit .t2 { font-size: var(--font-size-lg); } 
.page_tit .t3 { font-size: var(--font-size-base); font-weight: 600; color: var(--color-point2); } 
.page_tit .t4 { font-size: var(--font-size-md-1); } 
.page_tit .t5 { font-size: var(--font-size-lg-2); } 
.page_tit .t6{ font-size: var(--font-size-xxl-2);}
.page_tit .dot { padding-left: 1rem; position: relative; line-height: var(--line-height-normal); } 
.page_tit .dot::before { content: ''; position: absolute; width: 5px; height: 70%; left: 0; top: 50%; transform: translateY(-48%); background: var(--color-point3); } 
.page_tit .dot.st2 { padding-left: 1.7rem; } 
.page_tit .dot.st2::before { position: absolute; font-size: 1.45rem; left: 0px; top: -2px; color: var(--color-point); content: '\e92d'; font-family: 'xeicon'; background: none; height: auto; transform: translateY(0); } 
.page_tit .dot.st3 { padding-left: 1.9rem; } 
.page_tit .dot.st3::before { position: absolute; font-size: 1.45rem; left: 0px; top: -2px; color: var(--color-point); content: '\e933'; font-family: 'xeicon'; background: none; height: auto; transform: translate(0.7rem, -.6rem) rotate(90deg); } 
.page_tit .small { font-size: var(--font-size-md-1); color: var(--color-black-7); font-weight: 600; } 

.dotList { } 
.dotList > li { position: relative; padding-left: 1rem; font-size: var(--font-size-sm); margin-bottom: .5rem; line-height: var(--line-height-normal); } 
.dotList.s1 > li { font-size: var(--font-size-base); } 
.dotList > li:before { position: absolute; top: 12px; left: 0; width: 6px; height: 1px; background: var(--color-black-4); content: ''; } 
.dotList.dot2 > li:before { position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 100px; background: var(--color-black-6); content: ''; } 
.dotList.dot2.s2 > li:before { top: 8px; } 
.dotList > li:last-of-type { margin-bottom: 0; } 
.dotList.s1 > li { font-size: var(--font-size-base); } 
.dotList.c1 > li { color: var(--color-black-6); } 

.page_btn_wrap { gap: 0.5rem; } 
.page_btn_wrap .btn { width: 5.2rem; height:5.2rem; border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid; } 
.page_btn_wrap .btn .icon { font-size: var(--font-size-md); } 
.page_btn_wrap .btn .tt { font-size: var(--font-size-xs); } 
.page_btn_wrap .c1 { background: #fff; color: var(--color-point3); border-color: #ddd; } 
.page_btn_wrap .c2 { background: var(--color-point3); color: #fff; border-color: var(--color-point3); } 


/*inquiry*/
#inquiryForm { } 
#inquiryForm .ess:before { font-size: var(--font-size-md); } 
#inquiryForm .inquiryTop { display: flex; align-items: end; justify-content: space-between; margin-bottom: var(--space-6); } 
#inquiryForm .inquiryTop .inTit { font-size: var(--font-size-lg-2); font-weight: 600; line-height: var(--line-height-normal); } 
#inquiryForm .inquiryTop .inTit > i { color: var(--color-point2); } 
#inquiryForm .inquiryTop .rq { font-size: var(--font-size-sm); color: var(--color-black-8); line-height: 1; } 
#inquiryForm .inquiryTop .rq > i { color: var(--color-point) } 

.formWrap { } 
.formWrap .form { display: flex; flex-wrap: wrap; gap: var(--gap-sm); } 
.formWrap .form > li { position: relative; width: 100%; } 
.formWrap .form > li .select-wrapper { width: 100%; } 
.formWrap .form > li .inp_wrap { position:relative; } 
.formWrap .form > li .inp_wrap .input_st:not(textarea) { height:4rem; } 
.formWrap .form > li .inp_wrap .input_st[type=file] { padding-top: 1rem; } 
.formWrap .form > li .inp_wrap .input_st::placeholder { color: var(--color-black-10); font-weight: 300; font-size: var(--font-size-base); } 
.formWrap .form > li .inp_wrap .tit { display: flex; align-items: center; margin-bottom: var(--space-2); margin-top: var(--space-2); } 
.formWrap .form > li .inp_wrap .tit .tt { font-size: var(--font-size-md); font-weight:600; } 
.formWrap .form > li .inp_wrap textarea.input_st { width: 100%; padding-top: var(--space-3); height:15rem; } 
.formWrap .form > li .inp_wrap .input_st { position: relative; font-size: var(--font-size-base); font-weight: 400; display: flex; align-items: center; border:none; border: 1px solid var(--gray-line-1); border-radius: var(--radius-sm); padding: .5rem 1.5rem; outline: 1px solid transparent; transition: all .4s ease-in-out; background: #fff; } 
.formWrap .form > li .inp_wrap .input_st:focus { outline: 1px solid var(--color-point2); } 
.formWrap .form > li .inp_wrap input:-webkit-autofill { box-shadow: 0 0 0 1000px rgba(255,255,255, .5) inset !important; background-color: transparent !important; } 
.formWrap .form > li .inp_wrap .div_field { display: flex; gap: var(--gap-sm); flex-wrap: wrap; align-items: center; width: 100%; } 
.formWrap .form > li .inp_wrap .div_field .divC { display: flex; gap: var(--gap-sm); } 
.formWrap .form > li .inp_wrap .div_field .input_st { flex: 1; } 
.formWrap .form > li .inp_wrap .div_field .find { background: var(--color-point); color: #fff; width: fit-content; } 
.formWrap .form > li .inp_wrap .div_field .hypen { text-align:center; font-weight: 600; font-size: var(--font-size-base); } 
.formWrap .form > li .inp_wrap .address_field { flex:unset } 
.formWrap .form > li .inp_wrap .address_field .input_st { margin-bottom:var(--gap-sm) } 
.formWrap .form > li .inp_wrap .c4 { background-color:var(--color-point); } 
.formWrap .form > li .inp_wrap .email_field .select-wrapper { width: 12rem; } 
.select-wrapper { position:relative; } 
.select-wrapper:before { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); font-size: 1.5rem; transition: all .4s ease-in-out; font-family: 'xeicon'; z-index: 2; color: var(--color-point); content: '\e936' } 
.select-wrapper:focus-within::before { content: '\e930'; } 

/*** sub_member ***/
/**/
.step_tit { text-align:center; } 
.step_tit .t1 { font-size: var(--font-size-lg-2); font-weight:800; } 
.step_tit .t2 { font-size: var(--font-size-base); margin-top:1.25em; } 

.step_st { display:flex; justify-content:center; gap:0 5rem; margin:2.5rem 0 3rem 0; word-break:keep-all; counter-reset:stepIdx; } 
.step_st:first-child { margin-top:0; } 
.step_st > li { width:6.5em; counter-increment:stepIdx; } 
.step_st > li .ico { position:relative } 
.step_st > li:not(:last-child) .ico:before { content:""; position:absolute; left:100%; top:50%; width:5em; height:1px; background:#ddd } 
.step_st > li .ico .xi { position:relative; font-size:1em; width:1.875em; height:1.875em; margin:0 auto; display:flex; align-items:center; justify-content:center; color:#fff; background:#ccc; border-radius:50% } 
.step_st > li .ico .xi:before { content:counter(stepIdx); } 
.step_st > li .tt { margin-top:.75em; text-align:center; font-size:1.063em; color:#666; font-weight:500; line-height:1.3; } 
.step_st > li.on .tt { font-weight:600; color:var(--color-point2) } 
.step_st > li.on .ico .xi,
.step_st > li.on .ico:before { background:var(--color-point2); } 
.step_st > li.on .ico .xi:before { content:"\e928" } 
.step_st > li.on .ico .xi:after { content:""; position:absolute; top:-.25em; bottom:-.25em; left:-.25em; right:-.25em; border:2px dotted var(--color-point2); border-radius:50%; opacity:.4; } 
.step_st > li:not(.on) .ico .xi:before { font-family:var(--fontBase); font-size:.875em; font-weight:700; } 

/*member style*/
.login_wrap { position: relative; width:540px; max-width: 92%; margin:0 auto; box-sizing:border-box; z-index: 2; } 
.login_wrap.w1 { width:600px; max-width: 85%; margin: 0 auto; } 
.login_wrap.w2 { width:780px; max-width: 94%; margin: 0 auto; } 
.login_wrap.w3 { width:1000px; max-width: 94%; margin: 0 auto; } 
.login_wrap.st1 { padding:3rem 2.5rem; background: #fff; border-radius: var(--radius-md); } 
.login_wrap.st1.gray { background: var(--color-gray-1); } 
.login_wrap .join_sec { display:flex; justify-content:space-between; flex-wrap:wrap } 
.login_wrap .join_sec > li { width: 100%; } 
.login_wrap .join_sec > li.w100 { width:100% } 
.login_wrap .join_sec .table_form > li { padding-top:0; } 

.login_tab { display:flex; padding:0 1px 0 0; margin-bottom:2em; } 
.login_tab > li { flex:1 1 1%; } 
.login_tab > li > a { display:flex; align-items:center; justify-content:center; box-sizing:border-box; position:relative; height:3.5em; border:1px solid rgba(0,0,0,.1); color:rgba(0,0,0,.7); background:#fff; margin:0 -1px -1px 0 } 
.login_tab > li:first-child > a { border-radius:.35rem 0 0 .35rem; } 
.login_tab > li:last-child > a { border-radius:0 .35rem .35rem 0; } 
.login_tab > li > a .t1 { font-weight:500; font-size: var(--font-size-md-1); } 
.login_tab > li > a.on { background:var(--color-point3); border-color:transparent; color:#fff } 
.login_tab > li > a.on:after { content:""; position:absolute; left:50%; transform:translate(-50%, 50%) rotate(45deg); bottom:-1px; width:.75em; height:.75em; background:#fff } 

.layer_inp { display:block; position:relative } 
.layer_inp .inp:focus { z-index:1 } 
.layer_inp .inp { border:1px solid #ddd; margin-bottom:-1px; padding:1rem; padding-left:4rem; height:3.5em; box-sizing:border-box; width:100%; position:relative; font-weight:500; font-size:1.188em } 
.layer_inp select.inp { padding-left:3.75rem } 
.layer_inp select.inp optgroup,
.layer_inp select.inp option { font-weight:400; } 
.layer_inp:first-of-type .inp { border-top-left-radius:.35rem; border-top-right-radius:.35rem } 
.layer_inp:last-of-type .inp { border-bottom-left-radius:.35rem; border-bottom-right-radius:.35rem } 
.layer_inp .tt { position:absolute; left:4.25em; right:0; top:0; height:100%; display:flex; align-items:center; box-sizing:border-box; padding:0 .5em; z-index:2; color:#666; font-weight:500 } 
.layer_inp .tt > i { font-size: var(--font-size-sm); } 
.layer_inp .ico { font-size:1em; position:absolute; left:0; top:0; width:4.5em; height:100%; display:flex; align-items:center; justify-content:center; z-index:2 } 
.layer_inp .ico:before { font-size:1.5em } 
.layer_inp .inp:focus { border-color:var(--color-point2); outline:none } 
.layer_inp .inp:valid ~ .tt,
.layer_inp .inp:focus ~ .tt { right:auto; width:auto; height:1em; transform:translateY(-50%); backdrop-filter:blur(1em); color:var(--color-point2) } 
.layer_inp .inp:valid ~ .tt > i,
.layer_inp .inp:focus ~ .tt > i { font-size:.875em } 

.login_wrap .logoMark { display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); } 
.login_wrap .logoMark > img { height: 2.6rem; object-fit: contain; } 
.login_wrap .login { display:flex; flex-direction:column } 
.login_wrap .login > * { width:100%; box-sizing:border-box } 
.login_wrap .btn { height: 3.5rem; border-radius: var(--radius-sm); border:1px solid transparent; font-weight:600; font-size: var(--font-size-base); } 
.login_wrap .btn .xi { font-size:1em; margin-right:.25em } 
.login_wrap .btn.c1 { background:var(--color-point2); color:#fff } 
.login_wrap .btn.c2 { background:#000; color:#fff } 
.login_wrap .btn.c3 { background:var(--color-point); border:none; color:#fff } 
.login_wrap .btn.s1 { font-size:1.063em } 
.login_wrap .check_wrap { padding:1.5em .25em; } 
.login_wrap .check_wrap .label_st { font-size:1.063em; } 
.login_wrap .check_wrap + .page_btn { margin-top:0; } 
.login_wrap .page_btn { margin-top:2em; gap:.5em; } 
.login_wrap .inp_flex { display:flex; gap:1em; } 
.login_wrap .inp_flex .inp_wrap { flex:1 1 0%; min-width:0; } 
.login_wrap .inp_flex .page_btn { width:9em; margin-top:0 } 
.login_wrap .inp_flex .page_btn .btn { height:100% } 
.login_wrap .link_wrap { padding:2em 0; } 
.login_wrap .link_wrap:last-child { padding-bottom:0; } 
.login_wrap .link_wrap a { position:relative; padding:0 1.5em; font-size:1.063em; color:#666; font-weight:500; } 
.login_wrap .link_wrap a + a:before { content:""; position:absolute; left:0; top:50%; width:1px; height:1em; background:#000; opacity:.15; transform:translateY(-50%); } 
.login_wrap .link_wrap a.point { font-size:1.063em; color:#111; font-weight:600; } 
.login_wrap .link_wrap a:hover { text-decoration:underline; } 
.login_wrap .sns_tit { overflow:hidden; margin:2em 0; text-align:center; } 
.login_wrap .sns_tit .in { position:relative; display:inline-block; padding:0 1em; font-size:1.1em; font-weight:600; color:#777 } 
.login_wrap .sns_tit .in:before,
.login_wrap .sns_tit .in:after { content:""; position:absolute; top:50%; width:1000px; height:1px; background:#ddd; } 
.login_wrap .sns_tit .in:before { right:100%; } 
.login_wrap .sns_tit .in:after { left:100%; } 
.login_wrap .sns_login { display:flex; flex-wrap:wrap; align-items:center; gap:.5em; padding: 0 5em; } 
.login_wrap .sns_login > li { flex:1; } 
.login_wrap .sns_login > li .in { height:3.5em; gap:.75em; } 
.login_wrap .sns_login > li .in .ico { font-size:1.500em; } 
.login_wrap .sns_login > li .in .tt { font-size:1.063em; font-weight:500; } 
.login_wrap .sns_login > li.nv .in { background:var(--snsNv); color:#fff; } 
.login_wrap .sns_login > li.ka .in { background:var(--snsKa); } 

.fin_box { background:var(--color-gray-1); border-radius: var(--radius-sm); padding:3rem; text-align:center; word-break:keep-all; } 
.fin_box .fin { display:inline-flex; align-items:center; gap:1rem; margin:.5rem 0; } 
.fin_box .fin * { line-height:normal !important; } 
.fin_box .xIco { margin-bottom:1em; color: var(--color-point2); } 
.fin_box .xIco .xi { font-size:1.750rem; } 
.fin_box .tit { font-size:1.75rem; font-weight:600; margin-bottom: var(--space-1); } 
.fin_box .tit.s1 { font-size:1.375rem } 
.fin_box .tt1 { line-height:1.5; font-size: var(--font-size-base); color: var(--color-black-6); } 
.fin_box .tt2 { font-size:1.250em; font-weight:500; } 
.fin_box .tt_point { font-size:1.750rem; color:var(--color-point3); font-weight:700; } 
.fin_box .tt_no { display:inline-flex; align-items:center; gap:1rem; margin-top:1rem; height:3rem; padding:0 2em; background:var(--color-point3); border-radius:6em; color:#fff; } 
.fin_box .tt_no .no { font-size:1.250rem; font-weight:600; } 
.fin_box .fs:not(:last-child):after { content:"," } 
.fin_box .finTop { margin-bottom: var(--space-4); } 

.agree_box:not(.page_box) { border-radius:.5em; border:1px solid #ddd; padding:1.5em 1.75em; } 
.agree_box p { padding:.375em 0; } 
.agree_box strong,
.agree_box b { font-weight:600; color:#000; } 
.agree_box.tt1 { color:#555; line-height:1.5 } 
.agree_box.tt2 { color:#555; font-size:1.063em; line-height:1.5 } 
.agree_box.tt2 strong,
.agree_box.tt2 b { font-size:1.125em; } 
.agree_box.h1 { height:18em; } 

.agree_box ol { padding:.375em 0; } 
.agree_box ol > li { padding-left:.875em; text-indent:-.875em; } 

.btn_vf { padding:2em; border:1px solid #ddd; border-radius:.5em; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:8em; transition:.3s } 
.btn_vf .ico { width:8em; height:8em; border:3px dotted var(--crGray); border-radius:50%; display:flex; flex-direction:column; justify-content:center; margin-bottom:1.5em } 
.btn_vf .ico img { height:45% } 
.btn_vf .t1 { font-weight:700; font-size:1.25em } 
.btn_vf .t2 { color:#666; margin-top:.5em } 
.btn_vf .st { padding:.75em .5em; background:var(--crGrad1); width:100%; max-width:12em; border-radius:.5em; box-sizing:border-box; font-size:1.125em; font-weight:500; color:#fff; margin-top:1.5em } 
.btn_vf:hover,
.btn_vf:focus { border-color:var(--color-point2); box-shadow:0 0 1em rgba(0,0,0,.1) } 

.newTag { position: relative; } 
.newTag::before { content: 'N'; display: flex; justify-content: center; align-items: center; width: 1rem; height: 1rem; padding: .3em; border-radius: 50%; background: tomato; font-weight: 600; font-size: .875em; color:#fff; position: absolute; right: -.6rem; top: -.6rem; zoom: .8; } 

/*member table*/
.table_form_wrap { } 
.table_form_wrap .form_tit { } 
.table_form_wrap .form_tit .t1 { font-weight:700; font-size:1.375em } 
.table_form_wrap .form_tit .t2 { font-weight:700; font-size:1.625em } 
.table_form_wrap .form_tit .t3 { font-weight:500; font-size:1.125em } 
.table_form > li { border-bottom:1px solid #ddd; padding:.75em 0 } 
.table_form > li:first-child { border-top:1px solid #111 } 
.table_form > li.bd0 { border-bottom:none !important } 
.table_form > li.bd1 { border-top:none !important } 
.table_form > li.p1 { padding:1.5em 0; } 
.table_form .wrap_in { display:flex; align-items:center } 
.table_form .wrap_in .tit_wrap,
.table_form .wrap_in .con_wrap { min-height:3em; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; } 
.table_form .wrap_in .tit_wrap { width:10rem; gap:.5em 0; padding:0 1.25em; } 
.table_form .wrap_in .tit1 { font-size:1.125em; font-weight:600; } 
.table_form .wrap_in .tit2 { font-size:1.063em; font-weight:600; } 
.table_form .wrap_in .tit3 { font-size:1.000em; font-weight:500; line-height:1.2; } 
.table_form .wrap_in .con_wrap { flex:1 1 0%; min-width:0; gap:.25em; font-size:1.063em; } 
.table_form .wrap_in .con_wrap > * { flex:1 1 0%; min-width:0 } 
.table_form .wrap_in .con_wrap .inp_tt { flex:0 0 auto; font-size:.938em; color:#666; } 
.table_form .wrap_in .con_wrap .input_st { width:100% } 
.table_form .wrap_in .con_wrap .input_st[type=radio] { width: auto; height: auto; } 
.table_form .wrap_in .con_wrap .line { padding-top:.75em; margin-top:.75em; border-top:1px solid #ddd } 
.table_form .wrap_in .con_wrap .w1 { flex:0 0 auto; width:3em } 
.table_form .wrap_in .con_wrap .w2 { flex:0 0 auto; width:9em } 
.table_form .wrap_in .con_wrap .w50 { flex:0 0 auto; width:50% } 
.table_form .wrap_in .con_wrap .w100 { flex:0 0 auto; width:100% } 
.table_form .wrap_in .con_wrap .w_auto { flex:0 0 auto } 
.table_form .wrap_in .con_wrap .max1 { max-width:27em } 
.table_form .wrap_in .con_wrap .max2 { max-width:8.375em } 
.table_form .wrap_in .con_wrap .max3 { max-width:23.5em } 
.table_form .wrap_in .con_wrap .min1 { min-width:23.5em } 

.table_form .wrap_in.col { flex-direction:column } 
.table_form .wrap_in.col > * { flex:0 0 auto; width:100% } 
.table_form .wrap_in.col .tit_wrap { padding:0 0; } 

/* -------- 회사연혁 -------- */
/* 컨텐츠01 :: 타이틀박스 */
/* 컨텐츠02 :: 연혁 */

.history-con-wrap { scroll-behavior: smooth; } 
.history-con .sub-tab-list-style.top-fixed { top: 0 } 
.history-con .sub-tab-wrapper-style { margin-bottom: 70px } 
.history-con .sub-tab-list-style ul li { position: relativ; } 
.history-con .sub-tab-list-style ul li:after { content:""; position: absolute; top: 50%; margin-top: -7px; right: 0; width: 1px; height: 15px; background-color: #ccc } 
.history-con .sub-tab-list-style ul li:last-child:after { content:none } 
.history-con .sub-tab-list-style ul li.selected:after { content:none } 
/* History :: Layout */
.company-history { position:relative; } 
.company-history-wrapper { position:relative; /* padding-bottom:50px; */ padding :25px 0; *zoom:1; } 
.company-history-wrapper:after { clear:both; display:block; content:""; } 
.company-history-wrapper:before { position:absolute; top:30px; height:100%; width:1px; left:50%; background-color:#ddd; content:""; } 
.none-line-stl:before { content: none } 
.company-history-info-box { position:relative; width:50%; } 
.company-history-info-box::before { position:absolute; top:0; width:23px; height:23px; background-color:#eee; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content:""; } 
.company-history-info-box::after { position:absolute; top:6px; width:6px; height:6px; background-color:#fff; border: 2px solid var(--color-point2); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content:""; } 
/* History :: 정보 */
.company-history-info .history-item.tit { font-size:18px; font-weight: 600; color:var(--color-point2) } 
.company-history-info .history-item.tit .history-txt::before { display:none; } 
.company-history-info .history-item { position:relative; font-size:16px; line-height: 1.6; letter-spacing: -0.65px; font-weight:400; color:#555; margin-bottom:10px; word-break:keep-all } 
.company-history-info .history-txt { position:relative; display:inline-block; } 
.company-history-info .history-txt:before { content:""; position:absolute; top:10px; width: 3px; height: 3px; background-color: #5c5c5c } 
.company-history-year { position:absolute; top:-5px; text-align:center; font-size:32px; letter-spacing: -0.25px; color:#333; font-weight: 600; } 
/* History :: 이미지 */
.company-history-img-box { width:50%; margin-top:50px; } 
.company-history-img-box span { display:inline-block; border:1px solid #ddd; } 
.company-history-img-box span img { max-width:100%; } 

/* -------- 회사연혁 -------- */
@media all and (min-width:801px) { /* History :: 왼쪽 */
.history-left .company-history-info-box { float:left; } 
.history-left .company-history-info-box::before,
.history-left .company-history-info-box::after { left:100%; transform:translatex(-50%) } 
.history-left .company-history-info { text-align:right; padding-right: 40px; } 
.history-left .company-history-info .history-item { padding-right: 30px; } 
.history-left .company-history-info .history-month { right:0; } 
.history-left .company-history-info .history-txt { padding-right:15px; } 
.history-left .company-history-info .history-txt::before { right:0; } 
 .history-left .company-history-info .history-item.tit .history-txt { padding-right:0 } 
.history-left .company-history-year { left:100%; padding-left:60px; } 
.history-left .company-history-year:before { left:0 } 
.history-left .company-history-img-box { float:right; } 
.history-left .company-history-img-box span { margin-left:60px } 
/* History :: 오른쪽 */
.history-right .company-history-info-box { float:right; } 
.history-right .company-history-info-box::before,
.history-right .company-history-info-box::after { right:100%; transform:translatex(50%) } 
.history-right .company-history-info { padding-left: 40px; } 
.history-right .company-history-info .history-item { padding-left: 22px; } 
.history-right .company-history-info .history-month { left:0; } 
.history-right .company-history-info .history-item.tit .history-txt { padding-left:0 } 
.history-right .company-history-info .history-txt { padding-left:15px; } 
.history-right .company-history-info .history-txt::before { left:0; } 
.history-right .company-history-list-wrap .company-history-year { right:100%; padding-right:60px; } 
.history-right .company-history-img-box { float:left; text-align:right; } 
.history-right .company-history-img-box span { margin-right:60px } 
 }


/* ========== 260306 css - new ============== */

/* 공통 */
.pageDiv_tit { padding-bottom: var(--space-2); border-bottom: 1px solid #ddd; } 
.pageDiv_tit .tit { font-size: var(--font-size-lg-1); line-height: var(--line-height-normal); font-weight: 500; } 
.pageDiv_tit .tit.dot { padding-left: 1.1rem; position: relative; line-height: var(--line-height-normal); } 
.pageDiv_tit .tit.dot::before { content: ''; position: absolute; width: 5px; height: 100%; left: 0; top: 50%; transform: translateY(-48%); background: var(--color-point3); } 

.pageDiv_flex .pageDiv_con { flex: 1; } 

.pageDiv_con { padding: 2rem; border: 1px solid #ddd; border-radius: var(--radius-md); border-top-width: 4px; border-top-color: var(--color-point3); background: #fff; } 
.pageDiv_con .inner { padding: 0 1rem; } 
.pageDiv_con .InBox { padding-bottom: 1.5rem; } 
.pageDiv_con .InBox:last-child { padding-bottom: 0; } 
.pageDiv_con .InBox + .InBox { border-top: 1px dotted #ddd; padding-top: 1.5rem; } 
.pageDiv_con .img_box { padding: 1.5rem; box-sizing: border-box; border: 1px solid #ddd; border-radius: 1rem; margin-bottom: 1rem; } 
.pageDiv_con .img_box.s1 { max-height: 100%; height: 32rem; } 

.pageDiv_flex { gap: 3.5rem; } 
.pageDiv_flex .pageConBox { width: 70%; display: flex; flex-direction: column; gap: 1rem 0; } 
.pageDiv_flex .pageConBox .pageDiv_in { } 
.pageDiv_flex .pageConBox .pageDiv_in + .pageDiv_in { padding-top: 1rem; border-top: 1px dotted #ccc; } 

.pageDiv_wrap .ImgWrap { width: 45%; } 
.pageDiv_wrap .ImgWrap.stickyT { height: 36rem; } 
.pageDiv_wrap .wrap_img { padding: 1.5rem; border: 1px solid #ddd; border-radius: var(--radius-md); max-height: 36rem; } 
.pageCon.bg1 .pageDiv_wrap .wrap_img { background: #fff; } 

.pageDiv_wrap .ImgWrap.w50 .wrap_img { flex: 1; } 


/* 공통 탭 메뉴 스타일 */
.con_idx { position: relative } 
.con_idx > .idx { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; filter: alpha(opacity=0); opacity: 0; } 
.con_idx > .idx.on { position: relative; visibility: visible; filter: alpha(opacity=100); opacity: 1; } 

.sub_tab { } 
.sub_tab .tab_btn { background: var(--color-bg-2); border-radius: 100rem; padding: 0.5rem; box-sizing: border-box; gap: 0.5em; width: fit-content; margin: 0 auto; } 
.sub_tab .tab_btn li { cursor: pointer; } 
.sub_tab .tab_btn li.on .tt { background: var(--color-point2); color: #fff; } 
.sub_tab .tab_btn li .tt { padding: .7rem 2rem; background: #fff; color: var(--color-point2); font-weight: 700; font-size: var(--font-size-md-1); border-radius: 100rem; } 

.page_tab .tab_idx { display:flex; align-items: center; width: 100%; box-sizing: border-box; } 
.page_tab .tab_idx > li { position: relative; text-align: center; padding: 1rem 2rem; box-sizing: border-box; font-size: var(--font-size-base); font-weight: 600; color: #666; cursor: pointer; flex: 1; transition: .3s; background: #f1f1f1; } 
.page_tab .tab_idx > li:hover { background:#f9f9fb; } 
.page_tab .tab_idx > li::before { position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); height: 50%; width: 1px; background: #ccc; } 
.page_tab .tab_idx > li.on { color: #fff; font-weight: 700; background: #fff; background: var(--color-point3); } 
.page_tab .tab_idx > li.on::before,
.page_tab .tab_idx > li:first-child::before { display: none; } 


/* 아이콘 박스 */
.boxIconList { } 
.boxIconList > li { display: flex; } 
.boxIconList > li > .in { flex: 1; border: 2px solid #ddd; background: #fbfbfb; border-radius: .5rem; padding: 1.5rem; box-sizing: border-box; } 
.boxIconList > li > .in > .icon { display: flex; align-items: center; justify-content: center; margin: 0 auto; width:5rem; height: 5rem; border-radius: 50%; background: var(--color-point3); } 
.boxIconList > li > .in > .icon > img { height: 45px; object-fit: contain; } 
.boxIconList > li > .in > .tit { font-size: var(--font-size-md-1); font-weight: 700; text-align: center; margin-top: 1rem; } 
.boxIconList > li > .in > .t1 { text-align: center; font-size: var(--font-size-sm); } 
.boxIconList > li > .in > .tt { font-size: var(--font-size-sm); text-align: center; margin-top: 1rem; color: var(--color-black-7); } 

 /* 온라인 문의 */
.dp1_inquiry #contents {overflow: hidden;}
.inquiry-con .inquiry-lay{align-items: stretch; margin-top: 2.5rem; gap: 2rem 4rem;}
.inquiry-con .inquiry-lay .inTxt{margin-top: 3.3rem; }
.inquiry-con .inquiry-bg-wrap { position: relative; height: 86%; border-radius: 1rem; overflow: hidden;} 
.inquiry-con .inquiry-bg-wrap .gsimgFix{height: 100%;}
.inquiry-con .inquiry-bg-wrap .gsimgFix .posImg{min-height: 0;}
.inquiry-con .inquiry-bg-wrap .gsimgFix .posImg img{position: static; object-fit: cover;}
/* .inquiry-con .inquiry-bg-wrap .img-area { position: absolute; width: 50vw; height: inherit; overflow: hidden; border-radius: 1em 0 0 1em; }  */
/* .inquiry-con .inTxt{ padding-top: 9em;} */

.addinfo_tw{ margin-bottom: .5em; display: flex; flex-direction: column; align-items: end;}
.addinfo_tw > .tt{ font-size: var(--font-size-base); color: #999; font-weight: 500;}

.select-wrapper { position:relative; } 
.select-wrapper:before { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); font-size: var(--font-size-md); color: #fff; transition: all .4s ease-in-out; font-family: 'xeicon'; z-index: 2; } 
.select-wrapper:not(.selected):before { content: '\e936' } 
.select-wrapper.selected:before { content: '\e930'; } 
/* 
#opSelect { position:relative; color: #fff; } 
#opSelect option { color: #111; } 
*/ 
#opSelect:focus option { color: black; } 

.form_wrap { } 
.form_wrap .form { gap:1em; font-size:var(--font-size-sm); } 
.form_wrap .form > li { position: relative; } 
.form_wrap .form > li:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; content: ''; background: #fafafa; border-radius: 0.25rem; } 
.form_wrap .form > li:not(.w100) { width:calc(50% - .5rem); } 
.form_wrap .form > li .inp_wrap { position:relative; } 
.form_wrap .form > li .inp_wrap .tit,
.form_wrap .form > li .inp_wrap .input_st:not(textarea) { height:4.5rem; line-height: 3.7rem;} 
.form_wrap .form > li .inp_wrap .input_st::placeholder { font-size: var(--font-size-base); } 
/* .form_wrap .form > li .inp_wrap select.input_st{font-size: var(--font-size-base);} */
.form_wrap .form > li .inp_wrap .tit { position:absolute; top:0; left:0; padding-left:2rem; } 
.form_wrap .form > li .inp_wrap .tit .tt { font-size: var(--font-size-base); font-weight:600; } 
.form_wrap .form > li .inp_wrap .input_st:not(textarea) { width:100%; padding-left: 190px; } 
.form_wrap .form > li .inp_wrap .input_st[type=file]{ line-height: 4.5em;}
.form_wrap .form > li .inp_wrap textarea.input_st { padding-top:4rem; padding-left:1.5rem; height:12rem; } 
.form_wrap .form > li .inp_wrap .input_st { border:none; background: transparent; border-radius: .15rem; outline: 1px solid transparent; transition: all .4s ease-in-out; } 
.form_wrap .form > li .inp_wrap input:focus { outline: 1px solid #fff; } 
.form_wrap .form_chk { margin-top:2em; } 
.form_wrap .form_chk .chk { gap:1em; } 
.form_wrap .form_chk .btn .input_st { background: transparent; color: #fff; width:12rem; border: 4px solid rgba(255, 255, 255, .4); transition: all .4s ease-in-out; } 

.form_wrap .form_chk .btn .input_st{background: var(--color-point); border-color: var(--color-point); color: #fff; border: none;}

.form_label_wrap { height: 100%; align-items: center; } 
.form_label_wrap > li { box-sizing:border-box; margin-right: 3rem; font-size: var(--font-size-base); } 
.form_label_wrap > li:last-of-type { margin-right: 0em; } 
.form_label_wrap.st1 > li { flex:1 0 33.33%; max-width: 33.33%; } 
.form_label_wrap.st2 > li { flex:1 0 25%; max-width: 25%; } 
.form_label_wrap.st3 > li { flex:1 0 16.66%; max-width: 16.66%; } 

.form_label_st:not(.cssbrowser) input ~ .xi.st1 { padding-right:0; padding-left:.125rem; font-size: var(--font-size-sm); } 
.form_label_st:not(.cssbrowser) input ~ .xi.st1:before { content:"\e929"; opacity:0 } 
.form_label_st:not(.cssbrowser) input:checked ~ .xi.st1:before { content:"\e929"; opacity:1 } 

.form_label_st { display:inline-block; *display:inline; zoom:1; cursor:pointer } 
.form_label_st > * { display:inline-block; *display:inline; zoom:1; vertical-align:middle; cursor:pointer; } 
.form_label_st > .xi { font-size: var(--font-size-base); margin: 0; } 
.form_label_st:not(.cssbrowser) .xi:before { font-family:xeicon!important; font-style:normal; font-size: var(--font-size-md-1); padding-right:.25rem } 
.form_label_st:not(.cssbrowser) input ~ span { color:#666; font-weight: 600; } 
.form_label_st:not(.cssbrowser) input ~ .xi:before { color:#aaa } 
.form_label_st:not(.cssbrowser) input:checked ~ span { color:#333 } 
.form_label_st:not(.cssbrowser) input:checked ~ .xi:before { color:var(--color-point); } 
.form_label_st:not(.cssbrowser) input[type=checkbox] ~ .xi:before { content:"\e92e" } 
.form_label_st:not(.cssbrowser) input[type=checkbox]:checked ~ .xi:before { content:"\e92d" } 
.form_label_st:not(.cssbrowser) input:radio ~ span { color:#333 } 
.form_label_st:not(.cssbrowser) input:radio ~ .xi:before { color:var(--color-point); } 
.form_label_st:not(.cssbrowser) input[type=radio] ~ .xi:before { content:"\e92e" } 
.form_label_st:not(.cssbrowser) input[type=radio]:checked ~ .xi:before { content:"\e92d" } 
.form_label_st:not(.cssbrowser) input[type=checkbox],
.form_label_st:not(.cssbrowser) input[type=radio] { width:0; height:0; overflow:hidden; } 

.filebox .upload-name { height: 3.5rem; padding: 0 10px; vertical-align: middle; border: none; background: transparent; width: 80%; } 
.filebox .upload-name::placeholder { font-size: var(--font-size-md-1); font-weight: 500; color: #aaa; } 
.filebox label { padding: 10px 20px; color: #fff; background-color: var(--color-point); cursor: pointer; margin-left: 10px; border-radius: 5px; display: flex; align-items: center; justify-content: center; width: 30%; min-width: 6.25em; } 
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } 

.form_chk .label_st input[type=checkbox],
.form_chk .label_st input[type=radio] { width: auto; height: auto; overflow: visible; margin-bottom: auto; position: static;} 
.label_st input:checked ~ span{ color:var(--color-point)}
.label_st input[type=radio] ~ .xi{ border-radius:50%}
/* .label_st input:checked ~ .xi{ background:var(--color-point); color:#fff; border-color:transparent;} */
/* .label_st input:checked ~ .xi:before{ font-size:.813em} */

.form_wrap .form_tit { border-bottom:1px solid #111; padding:.75em 0 } 
.form_wrap .form_tit .t1 { font-weight:700; font-size: var(--font-size-lg-2); } 
.form_wrap .form_tit .t2 { font-weight:700; font-size:var(--font-size-lg-1) } 
.form_wrap .form_tit .t3 { font-weight:500; font-size:var(--font-size-base) } 
.form_wrap .form_con { padding:1.5rem 0 } 
.form_st { border-top:1px solid #111 } 
.form_st > li { border-bottom:1px solid #ddd; padding:.75em 0; flex: 1 50%;} 
.form_st > li.w100{ flex: 1 1 100%;}
.form_wrap .form_tit + .form_st > li:first-child { border-top:none } 
.form_st > li.bd0 { border-bottom:none } 
.form_lab { display:flex; align-items:center } 
.form_lab .lab_tit,
.form_lab .lab_con { min-height:3em; box-sizing:border-box; display:flex; align-items:center; } 
.form_st.h1 .lab_tit,
.form_st.h1 .lab_con { min-height:2em } 
.form_lab .lab_tit { position: relative; width:9em; min-width: 9em; margin-right:2em; gap:.5em 0; padding-left:.25em } 
.form_lab .lab_tit:before{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: #ddd; content: '';}
.form_lab .tit1 { font-weight:600; color: var(--color-point); font-size:var(--font-size-base) } 
.form_lab .tit2 { font-weight:500; font-size:var(--font-size-sm); line-height:1.2 } 
.form_lab .lab_con { flex:1 1 0%; min-width:0; gap:.25em; font-weight:400; color: #444;} 
.form_lab .lab_con .input_st{ max-width: 80%;}
.form_lab .lab_con.not(.flex) > * { flex:1 1 0%; min-width:0 } 
.form_lab .lab_con .inp_tt { flex:0 0 auto; font-size:var(--font-size-sm); color:#666; font-weight:400 } 
.form_lab .lab_con .line { padding-top:.75em; margin-top:.75em; border-top:1px solid #ddd } 
.form_lab .lab_con .w1 { flex:0 0 auto; width:3em } 
.form_lab .lab_con .w2 { flex:0 0 auto; width:9em } 
.form_lab .lab_con .w50 { flex:0 0 auto; width:50% } 
.form_lab .lab_con .w100 { flex:0 0 auto; width:100% } 
.form_lab .lab_con .w_auto { flex:0 0 auto } 
.form_lab .lab_con .max1 { max-width:27em } 
.form_lab .lab_con .max2 { max-width:8.375em } 
.form_lab .lab_con .max3 { max-width:23.5em } 
.form_lab .lab_con .min1 { min-width:23.5em } 

/*product cate*/
.proCateBox{ display: flex; align-items: start; gap: 4rem; padding: 2rem 2.5rem; border: 1px solid var(--gray-line-2); box-sizing: border-box; background: #fff; border-radius: var(--radius-md); margin-top: var(--space-3); margin-bottom: var(--space-5);}
.proCateBox .cateTit{ position:relative; min-width: fit-content; display: flex; height: 3rem; align-items: center;}
.proCateBox .cateTit:before{ position: absolute; right: -2rem; width: 1px; height: 20px; background: var(--gray-line); content: ''; top: 50%; transform: translateY(-50%);}
.proCateBox .cateTit > .tt{ font-size: var(--font-size-md); font-weight: 700; line-height: 1;}
.proCateBox .proCateList{ position:relative; top: 3px; display: flex; flex: 1; flex-wrap: wrap; gap: var(--gap-xs);}
.proCateBox .proCateList > li{}
.proCateBox .proCateList > li > .inner{ display: flex; align-items: center; justify-content: center; height: 2.35rem; border: 1px solid var(--gray-line-2); border-radius: var(--radius-pill); background: var(--color-gray-1); padding: 0 1rem; transition: .3s ease;}
.proCateBox .proCateList > li > .inner > .tt{ font-size: var(--font-size-sm-1); font-weight: 600; color: var(--color-black-6); transition: .3s ease;}

.proCateBox .proCateList > li.on > .inner{ background: var(--color-point2); border: 1px solid var(--color-point2);}
.proCateBox .proCateList > li.on > .inner > .tt{ color: #fff;} 

.productList_container{}
.productList_container .productList{}
.productList_container .productList > li{ margin-bottom: var(--space-3);}
.productList_container .productList > li:last-of-type{ margin-bottom: 0;}
.productList_container .productList > li > .inner{ position:relative; display: flex; align-items: center; gap: 3rem; padding: 1.5rem 3rem 1.5rem 1.5rem; box-sizing: border-box; background: var(--color-gray-1); border-radius: var(--radius-md); overflow: hidden;}
.productList_container .productList > li > .inner > .imgCon{ width: 22rem; height: 16.5rem; overflow: hidden; background: #fff; border: 1px solid var(--gray-line-2); border-radius: var(--radius-md);}
.productList_container .productList > li > .inner > .imgCon .in{display: flex; align-items: center; height: 100%; }
.productList_container .productList > li > .inner > .imgCon .in img{ width: 100%; height: 100%; object-fit: contain; transition: 0.2s ease-in-out;}
.productList_container .productList > li > .inner > .imgCon .in:hover img{transform: scale(1.15);}
.productList_container .productList > li > .inner > .imgCon.s1{width: 19rem; height: 23rem; padding: 1em; box-sizing: border-box;}
.productList_container .productList > li > .inner > .imgCon.s1 .in img{object-fit: contain; width: 100%; height: 100%;}
.productList_container .productList > li > .inner > .info{ flex: 1;}
.productList_container .productList > li > .inner > .info .proName{ font-size: var(--font-size-lg); font-weight: 700; line-height: 1;}
.productList_container .productList > li > .inner > .info .proName:hover{text-decoration: underline;}
.productList_container .productList > li > .inner > .info .txt{ font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-black-6); margin-top: var(--space-2);}
.productList_container .productList > li > .inner .prodBtn{ position: absolute; top: 0; right: 0;}
.productList_container .productList > li > .inner .prodBtn .Btn{ display: flex; align-items: center; justify-content: center; height: 3rem; background: var(--color-point); padding: 0 1.75rem; border-radius: 0 0 0 var(--radius-md); box-sizing: border-box;}
/* .productList_container .productList > li > .inner .prodBtn .Btn.c1{background: var(--color-point2);}
.productList_container .productList > li > .inner .prodBtn .Btn.c2{background: var(--color-point3);} */
.productList_container .productList > li > .inner .prodBtn .Btn > .tt{ font-size: var(--font-size-sm); font-weight: 600; color: #fff;}

.prodBtn_list{display: flex; gap: .5rem; margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid #ddd;}
.prodBtn_list li{width: 12rem; }
.prodBtn_list li .Btn{text-align: center;display: flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.5rem 0; box-sizing: border-box; border-radius: 0.5em; color: #fff; font-weight: 500; transition: 0.2s ease-in-out; position: relative;}
.prodBtn_list li .Btn .tt{font-size: var(--font-size-sm-1);}
.prodBtn_list li .Btn.c1{background: var(--color-point2);}
.prodBtn_list li .Btn.c1.re{background: #fff; color: var(--color-point2); }
.prodBtn_list li .Btn.c1.re::before{ position: absolute; content: ''; border: 2px solid var(--color-point2); box-sizing: border-box; left: 0; top: 0; width: 100%; height: 100%; border-radius: .5em;}
.prodBtn_list li .Btn.c2{background: var(--color-point3);}



.ProtagList{ /* position: absolute; top: 1.5rem; right: 3rem; */ display: flex; gap: .5rem; margin-bottom: var(--space-2);}
.ProtagList > li{}
.ProtagList > li > .con{ display: flex; align-items: center; justify-content: center; height: 1.65rem; padding: 0 1rem; background: var(--color-point2); color: #fff; border-radius: var(--radius-sm);}
.ProtagList > li > .con > .tt{ font-weight: 600; font-size: var(--font-size-xs);}


/* 제품소개 */
/* view */
.mall_view_top { padding:1rem 1rem 4.4rem; gap: 4rem; } 
.mall_view_top .prod_img { width: 50%; } 
.mall_view_top .page_info { width: 50%; margin-top: 2rem;} 
.mall_view_top .prod_img .imgBig { background: #f1f1f1; padding: 3rem; box-sizing: border-box; border-radius: 1rem; } 
.mall_view_top .prod_img .imgBig img { display:block; width:100%; height: 40svh; object-fit: contain; } 
.mall_view_top .prod_img .prodImgList { display: flex; gap: 2rem; flex-wrap: wrap; } 
.mall_view_top .prod_img .prodImgList > li { width: calc((100% - 2rem) / 2); } 
.mall_view_top .prod_img .prodImgList > li > .imgCon { background: #f1f1f1; height: 54vh; } 
.mall_view_top .prod_img .prodImgList > li > .imgCon > img { width: 100%; height: 100%; object-fit: cover; } 

.mall_view_top .page_info .txt_wrap{  }
.mall_view_top .page_info .txt_wrap .t1{ color: #fff;/*  font-size: 1.125em; */ font-weight: 600; padding: 0.3rem 1rem; background: var(--color-point2); box-sizing:border-box; border-radius: 100px; display: inline-block; margin-bottom: .6rem;}
.mall_view_top .page_info .txt_wrap .tit{ font-size: var(--font-size-xl); font-weight: 700;}
.mall_view_top .page_info .txt_wrap .txt{ color: #333; padding: 1.5rem 1.5rem 3rem; box-sizing: border-box; border-radius: 1rem; background: #f1f1f1; margin-top: 1.5rem; line-height: 1.5; font-size: var(--font-size-sm);}

.mall_view_top .page_info .txt_wrap > .dl_wrap{ margin:1.6rem 0 2.2rem; }
.mall_view_top .page_info .txt_wrap > .dl_wrap dl{  margin-bottom:1rem; display: flex;}
.mall_view_top .page_info .txt_wrap > .dl_wrap dl:last-of-type{ margin-bottom:0; }
.mall_view_top .page_info .txt_wrap > .dl_wrap dl dt{ display:inline-block; width:5em; font-size:var(--font-size-base); line-height:28px; color:#999; letter-spacing:-0.05rem; }
.mall_view_top .page_info .txt_wrap > .dl_wrap dl dd{ display:inline-block;  width:calc(100% - 5em); font-size:var(--font-size-base); line-height:28px; color:#111; letter-spacing:-0.05em; }

.mall_view_top .page_info .application_info{margin-top: 2.4em;}
.mall_view_top .page_info .application_info .tit{color: var(--color-point); font-weight: 700; font-size: var(--font-size-md); margin-bottom: var(--space-2); position: relative; padding-left: .9rem;}
.mall_view_top .page_info .application_info .tit::before{content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; background: var(--color-point); border-radius: 100px;}
.mall_view_top .page_info .application_info .tagList{display: flex; gap: .6rem; flex-wrap: wrap;}
.mall_view_top .page_info .application_info .tagList li{font-size: var(--font-size-sm); font-weight: 500; background: var(--color-bg-2); border-radius: 100px; padding: 0.5rem 1.5rem;}
.mall_view_top .page_info .application_info .dotList li{display: flex; align-items: center; margin-bottom: 0.3rem;}
.mall_view_top .page_info .application_info .dotList li:hover a{text-decoration: underline;}

.mall_view_bottom{}
.mall_view_bottom .viewTit{}
.mall_view_bottom .viewTit .t1{font-size: var(--font-size-md); font-weight: 600; padding: 0.8rem 0; box-sizing: border-box; border-top: 1px solid #333; border-bottom: 1px solid #ddd; text-align: center; color: #333; background: #f7f7f7;}

.mall_view_bottom .img_wrap{padding: 4rem 5vw 4rem;}
.mall_view_bottom .img_wrap img{margin: 0 auto; max-width: 100%; display: block; }

.mall_view_bottom .view_tab{}
.mall_view_bottom .view_tab .tab{display: flex;}
.mall_view_bottom .view_tab .tab li{ flex: 1 1 12%; max-width: 12%; position: relative; }
.mall_view_bottom .view_tab .tab li a{color: #666; font-size: var(--font-size-base); font-weight: 500; display: block;text-align: center; padding: 0.8em 0; border: 1px solid #ccc; border-right: none; border-bottom: none !important; border-radius: .5em .5em 0 0 ; background: #f5f5f5;}
.mall_view_bottom .view_tab .tab li:last-child a{border-right: 1px solid #ccc;}
.mall_view_bottom .view_tab .tab li.on a{ color: #fff; background: var(--color-point); border: 1px solid var(--color-point); border-color: var(--color-point) !important;}

.mall_view_bottom .viewCon {padding: 2rem; box-sizing: border-box; border: 1px solid #ccc;}

.zoomWrap { position: relative; } 
.zoomWrap .magnifierWrap { position:absolute; left:100%; margin-left:5rem; top:0; width:100%; height:100%; overflow:hidden; z-index: 5; box-shadow:0 0 1rem rgba(0,0,0,.1); display: none; background-color:#fff } 
.zoomWrap .magnifierWrap .magnifier { position:absolute; background-repeat:no-repeat; background-size:100% 100%; } 
.zoomWrap .pointer { position:absolute; width:30%; height:30%; background:rgba(0,0,0,.1); transform:translate(-50%,-50%); display:none } 
.zoomThumbWrap { margin-top: .5rem; display: flex; gap: .5rem; } 
.zoomThumbWrap > li { width: calc((100% - 1.5rem) / 4); } 
.zoomThumbWrap > li .in { border:2px solid transparent; background: #f1f1f1; border-radius: 1rem; height: 6.5rem; overflow: hidden; cursor: pointer; padding: .5rem; box-sizing: border-box; } 
.zoomThumbWrap > li .in.on { border-color:var(--color-point); } 
.zoomThumbWrap > li .in img{width: 100%; height: 100%; object-fit: contain;}

.pageDiv_tit { margin-bottom: 2rem; padding-bottom: .5rem; border-bottom: 1px solid #111; }
.pageDiv_tit .tit { font-size: var(--font-size-lg-2); font-weight: 600; }
.pageDiv_tit .tit.dot { padding-left: 1.1rem; position: relative; line-height: var(--line-height-normal); }
.pageDiv_tit .tit.dot::before { content: ''; position: absolute; width: 7px; height: 7px; left: 0; top: 22px; background: var(--color-point); border-radius: 100px; }


.viewProductWrap {padding-bottom: var(--space-5); border-bottom: 1px solid #ccc;}
.viewProductWrap .product_list{display: flex; flex-wrap: wrap; gap: 2em;}
.viewProductWrap .product_list li{width: calc((100% - 6em) / 4);}
.viewProductWrap .product_list li .in{width: 100%; display: block;  }
.viewProductWrap .product_list li .in .img_wrap{width: 100%; height: 16rem; overflow: hidden; border-radius: 1em; background: #f1f1f1; padding: 1.5em; box-sizing: border-box; position: relative;}
.viewProductWrap .product_list li .in .img_wrap::before{position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; border: 2px solid var(--color-point2); z-index: 1; opacity: 0; transition: 0.2s ease-in-out; box-sizing: border-box; border-radius: 1em;}
.viewProductWrap .product_list li .in .img_wrap:hover::before{opacity: 1;}
.viewProductWrap .product_list li .in .img_wrap img{width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.2s ease-in-out;}
.viewProductWrap .product_list li .in .img_wrap:hover img{transform: scale(1.1);}
.viewProductWrap .product_list li .in .txt_wrap{margin-top: .5em; padding: 0 .5em;}
.viewProductWrap .product_list li .in .txt_wrap .t1{font-size: 1.06em; color: var(--color-point2); font-weight: 600;}
.viewProductWrap .product_list li .in .txt_wrap .tit{font-size: 1.38em; font-weight: 700; padding: 0.4em 0;}


/* 오시는 길 */
.location_wrap{ display: flex; gap: 1rem; justify-content: space-between;}
.location_wrap .map_wrap{width: 65%; border-radius: 1rem; overflow: hidden;}
.location_wrap .map_wrap iframe{width: 100%;}
.location_wrap .location_info{width: 35%; background: var(--color-bg-2); border-radius: 1rem; padding: 2.5rem; box-sizing: border-box; display: flex;flex-direction: column;}
.location_wrap .location_info .top{margin-top: 2rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #ccc; }
.location_wrap .location_info .top .s_tit{ font-weight: 800; color: #333; margin-bottom: 0.7rem;}
.location_wrap .location_info .top .map_tit{font-size: var(--font-size-lg-2); font-weight: 800;}
.location_wrap .location_info .top .dot{width: 8px; height: 8px; background: #00c63b; border-radius: 100px; margin-right: 1.5rem;}
.location_wrap .location_info .location_list{display: flex; flex-direction: column; gap: .5rem; box-sizing: border-box; }
.location_wrap .location_info .location_list li{display: flex; align-items: center; gap: 1rem;}
.location_wrap .location_info .bottom{margin-top: auto;}
.location_wrap .location_info .bottom .location_btn{display: flex; gap: 1rem;}
.location_wrap .location_info .bottom .location_btn li {flex: 1; }
.location_wrap .location_info .bottom .location_btn li .in{display: flex; flex-direction: column; gap: 2.5rem; padding: 1rem; border-radius: .7em; transition: 0.2s ease-in-out;}
.location_wrap .location_info .bottom .location_btn li:first-child .in{background: #fff; border: 2px solid var(--color-point); } 
.location_wrap .location_info .bottom .location_btn li:first-child .in:hover{background: #ffdb3d;}
.location_wrap .location_info .bottom .location_btn li:last-child .in{background: var(--color-point); border: 2px solid var(--color-point); color: #fff;} 
.location_wrap .location_info .bottom .location_btn li:last-child .in:hover{background: #24b137;}
.location_wrap .location_info .bottom .location_btn li .in .plus{margin-left: auto; rotate: -45deg;}
.location_wrap .location_info .bottom .location_btn li .in .tt{font-size: var(--font-size-base); line-height: 1.4; font-weight: 500;}

/* 연혁 */
.historyWrapper .inner{padding: 0 2em;}
.historyWrapper .history{ position:relative; padding:100px 0 200px; }
.historyWrapper .history .linewrap{ position: absolute; top: 0px; left:calc(240px + 330px - 80px); width:2px; height: 0%; background: var(--color-point2); }
.historyWrapper .history:after{ display:block;content:""; width:1px;height: 98%; z-index:-1; border-left:2px dotted #ccc; position:absolute;left:calc(240px + 330px - 80px);top:0; }
.historyWrapper .history > div{ display:flex;justify-content:space-between; margin-bottom:85px; }
.historyWrapper .history > div:last-child{margin-bottom:0;}
.historyWrapper .history > div .decade{ position:relative; width:240px; font-size:4em;color:#000;font-weight:700; }
.historyWrapper .history > div .decade:before{ display:block;content:""; width:15px;height:15px; box-sizing:border-box; border:2px solid #dcdcdc;border-radius:50%; background:#fff; position:absolute;left:100%;top:33px;z-index:10; }
.historyWrapper .history > div .decade:after{ display:block;content:""; width:240px;height:1px; box-sizing:border-box; background:#ddd; position:absolute;left:calc(100% + 10px);top:40px; }
.historyWrapper .history > div ul{ position:relative; box-sizing:border-box; width:calc(100% - 240px); padding-top:28px;padding-left:330px; }
.historyWrapper .history > div ul:before{ display:block;content:""; width:15px;height:15px; box-sizing:border-box; border:2px solid #dcdcdc;border-radius:50%; background:#fff; position:absolute;left:243px;top:33px;z-index:10; }
.historyWrapper .history > div ul:after{ display:block;content:""; width:45px;height:45px; box-sizing:border-box; border-radius:50%; background:rgba(39, 159, 229, 0.15); position:absolute;left:228px;top:18px;z-index:9; transform:scale(0);transition:all 0.4 ease; }
.historyWrapper .history > div ul.on:after{transform:scale(1);transform-origin:center center;transition:all 0.3s ease-in-out; }
.historyWrapper .history > div ul.on:before{border:2px solid var(--color-point2);transition:all 0.3s ease-in-out;}
.historyWrapper .history > div ul li{ margin-bottom:10px; font-size:1.125em;color:#666; position: relative; display: flex; gap: 2.5em; line-height: 1.6;}
.historyWrapper .history > div ul li::before{position: absolute; content: ''; left: -.8em; top: 12px; width: 4px; height: 4px; border-radius: 100px; background: #666; }
.historyWrapper .history > div ul li + li{margin-top: 20px;}
.historyWrapper .history > div ul li:last-child{margin-bottom:0;}
.historyWrapper .history > div ul li .year{font-weight: 700; color: #111;}

.historyWrapper .top_img{width: 100%; border-radius: 1em; overflow: hidden; height: 22em; position: relative;}
.historyWrapper .top_img::before{ position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);}
.historyWrapper .top_img .img_wrap img{width: 100%; display: block; }
.historyWrapper .top_img .bg_tit{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
.historyWrapper .top_img .bg_tit p{font-size: 2.5em; color: #fff; font-weight: 700; text-align: center;}


/*product search*/
.prosearchCon { position: relative; overflow: hidden; padding: 2rem; box-sizing: border-box; background: var(--color-point); border-radius: var(--radius-md); } 
.prosearchCon .searchBg { position: absolute; right: 0; top: -15svh; width: 30svw; } 
.prosearchCon .searchBg > img { filter: var(--crWhitefil); opacity: 0.035; } 
.prosearchCon .find_WrapCon { position: relative; width: 45svw; margin: 0 auto; } 
#findPro { position:relative; width: 100%; } 
#findPro .input_st { position: relative; width: 100%; height: 4.35rem; border-radius: var(--radius-pill); border: 1px solid transparent; padding: 0 6rem 0 2rem; box-sizing: border-box; } 
#findPro .input_st::placeholder { font-size: var(--font-size-base); font-weight: 500; color: var(--color-black-9); } 
#findPro .sech { position: absolute; width: 3.8rem; height: 3.8rem; display: flex; align-items: center; justify-content: center; background: var(--color-point2); right: .4rem; top: 50%; border-radius: var(--radius-pill); transform: translateY(-50%); border: none; } 
#findPro .sech > .xi { color: #fff; } 

.prosearchCon .tag_wrap { display: flex; align-items: start; gap: var(--gap-lg); padding-top: var(--space-4); } 
.prosearchCon .tag_wrap .best_sch { display: flex; gap: var(--gap-sm); align-items: center; } 
.prosearchCon .tag_wrap .best_sch > .c_plus { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-point2); color: #fff; } 
.prosearchCon .tag_wrap .best_sch > .c_tit { font-size: var(--font-size-md-1); font-weight: 600; color: var(--color-point2); } 
.prosearchCon .tag_wrap .tag_list { display: flex; align-items: center; gap: var(--gap-md); } 
.prosearchCon .tag_wrap .tag_list > li { } 
.prosearchCon .tag_wrap .tag_list > li > .tt { font-size: var(--font-size-base); color: rgba(255,255,255, .715); } 



/*  */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { color: #fff; line-height: 1.4; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.main_wrap { width: 100%; background: linear-gradient(to bottom, var(--color-point), var(--color-point2), #fff); padding: 1.25rem; min-height: 100vh; position: relative; }
.main-header { text-align: center; padding-bottom: 1.5rem; position: relative; }
.slogan { font-size: 0.8125rem; color: #ff9242; margin-bottom: 0.3125rem; }
.slogan .handgraph {font-family: 'THEFACESHOP+INKLIPQUID', cursive; font-size: 1.3rem; color: #fff; margin-left: 0.3rem; }
.sub-slogan { font-size: 0.625rem; color: #ff9242; margin-bottom: 0.8rem; opacity: 0.8; }
.title-area .flex {flex-direction: row; gap: 1em; align-items: center;}
.title-area h1 { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.title-area .right h1 {border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;  }
.title-area h2 { font-size: 1.05rem; font-weight: 400; margin-top: 0.5rem;  }
.info-area { display: flex; flex-direction: row; gap: 1em; align-items: center; margin-top: 1.5rem; }
.info-area .line { content:""; background-color: #fff; width: 1px; height: 1.5rem; opacity: 0.5; }
.info-date { font-size: 1rem; font-weight: 600; }
.info-date-text { font-size: 0.7rem; font-weight: 400; vertical-align: top; }
.info-venue { font-size: 0.875rem; background-image: url('../images/inc/high1_logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; text-indent: -9999px; height: 1.875rem; width: 4rem; display: inline-block; vertical-align: middle; filter: brightness(0) invert(1); }
.menu-btn { position: absolute; top: 0; right: 0; background: transparent; border: none; cursor: pointer; width: 1.875rem; height: 1.875rem; display: flex; flex-direction: column; justify-content: space-around; padding: 0.3125rem; }
.menu-btn span { display: block; height: 0.1875rem; background-color: #fff; border-radius: 0.125rem; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9375rem; /* margin-bottom: 2.5rem; */ }
.menu-item { position: relative; overflow: hidden; background-color: rgba(255, 255, 255, 0.92); border: 0.125rem solid #fff; border-radius: 1.25rem; padding: 1.25rem 1rem; display: flex; justify-content: space-between; align-items: center; height: 5.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.menu-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(75, 0, 130, 0.2) 0%, rgba(0, 206, 209, 0.25) 50%, rgba(255, 215, 0, 0.22) 100%); opacity: 0; transition: opacity 0.4s ease; z-index: 0; pointer-events: none; }
.menu-item > * { position: relative; z-index: 1; }
.menu-item:hover { transform: translateY(-0.25rem); box-shadow: 0 0.875rem 1.5rem rgba(75, 0, 130, 0.2); border-color: rgba(0, 206, 209, 0.7); }
.menu-item:hover::before { opacity: 1; }
.menu-item.full-width { /* grid-column: span 2; */ }
.menu-item.bg1 { background-color:transparent; /* backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); */ border: 0.3rem solid rgba(255, 255, 255, 1); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); }
.menu-item.bg1:hover::before { background: linear-gradient(135deg, rgba(75, 0, 130, 0.45) 0%, rgba(0, 206, 209, 0.45) 50%, rgba(255, 215, 0, 0.4) 100%); opacity: 1; }
.menu-item.bg1 .main-txt { color: #fff; text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); }
/* .menu-item .icon-box img { filter: brightness(0) saturate(100%) invert(11%) sepia(87%) saturate(4649%) hue-rotate(269deg) brightness(84%) contrast(115%); }
.menu-item.bg1 .icon-box img { filter: none; } */
.text-box { flex: 1; }
.main-txt { font-size: 1.2rem; font-weight: 700; color: var(--color-point); line-height: 1.3; }
.icon-box { font-size: 2.5rem; display: flex; align-items: center; justify-content: center; width: 3rem; }
.main-footer { font-size: 0.9rem; color:var(--color-point); text-align: left; padding-top: 1.25rem; margin-top: -6em; }
.main-footer .host-section { margin-bottom: 0.9375rem; }
.main-footer .co-host-section { margin-bottom: 0.9375rem; }
.main-footer .footer-label { display: block; margin-bottom: 0.3125rem; font-weight: 600; }
.main-footer .co-host-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem 0.9375rem; }
.main-footer .co-host-logos span { font-size: 0.6875rem; opacity: 0.9; }
.main-footer .host-logo { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 0.3125rem; width:fit-content; }
.main-footer .host-logo img { /* filter: brightness(0) invert(1);  */width: auto; height: 2em; }
.main-footer .partner_wrap { display: flex; flex-direction: row; align-items: center; justify-content: start; gap: 0.5rem; flex-wrap: wrap; }
.main-footer .partner_wrap .item { width: calc((100% - 0.5rem * 3) / 4); max-height: 2em; display: flex; align-items: center; justify-content: center; }

.main_tit_wrap {max-width: 94%; width: 100%; margin: 1rem auto 1.5rem;}

/* sub-공통 */

.sub-container { width: 100%; max-width: 43.75rem; margin: 0 auto; padding: 1.25rem; box-sizing: border-box; }
.sub-section { margin-bottom: 2rem; }
.sub-tit-group { margin-bottom: 1.25rem; }
.sub-tit { font-size: 1.375rem; font-weight: 700; color: var(--color-point); line-height: 1.3; }
.sub-sub-tit { font-size: 1rem; font-weight: 600; color: #555; margin-top: 0.375rem; }
.sub-txt { font-size: 0.875rem; font-weight: 400; color: #666; line-height: 1.6; }
.sub-txt-box { background-color: #f8f9fa; border: 0.0625rem solid #e9ecef; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.sub-txt-box .sub-tit { font-size: 1rem; margin-bottom: 0.5rem; }
.sub-txt-box .sub-txt { font-size: 0.8125rem; }
.sub-dot-list { list-style: none; padding: 0; margin: 0; }
.sub-dot-list > li { position: relative; padding-left: 1rem; font-size: 0.875rem; color: #555; line-height: 1.5; margin-bottom: 0.375rem; }
.sub-dot-list > li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.25rem; height: 0.25rem; border-radius: 50%; background-color: var(--color-point2); }
.sub-table-wrap { width: 100%; overflow-x: auto; margin-bottom: 1.25rem; border-top: 0.125rem solid var(--color-point); border-bottom: 0.0625rem solid #ddd; }
.event-table-wrap {margin-bottom:0; }
.sub-table { width: 100%; border-collapse: collapse; text-align: left; }
.sub-table th { background-color: #f4f6f9; color: #333; font-size: 0.8125rem; font-weight: 600; padding: 0.75rem 0.625rem; border-bottom: 0.0625rem solid #ddd; }
.sub-table td { font-size: 0.8125rem; color: #555; padding: 0.75rem 0.625rem; border-bottom: 0.0625rem solid #eee; }
.sub-table tr:last-child td { border-bottom: none; }
.sub-table td .xi {display: inline-block; margin-right: 0.25rem; color: var(--color-point); }
.sub-table td a:hover {color: var(--color-point2); text-decoration: underline; }
.sub-txt-box.red {background-color: #fff5f5; border-color: #ffcccc; }
.sub-txt-box.red .sub-dot-list li {color: #ff241e; }
.sub-txt-box.red .sub-dot-list > li::before {color: #ff241e; }

.sub-tab-wrap { width: 100%; overflow-x: auto;  /* margin-bottom: 2rem; */ -webkit-overflow-scrolling: touch; margin-top:.5em; }
.sub-tab-wrap::-webkit-scrollbar { display: none; }
.sub-tab-menu {justify-content: center; flex-wrap: wrap; display: inline-flex; gap: 0.5rem; list-style: none; padding: 0.25rem; margin: 0; background: rgba(0, 0, 0, 0.03); border-radius: 1rem; }
.sub-tab-menu > li { display: inline-block; }
.sub-tab-menu > li > a { display: block; padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 600; color: #666; background-color: #fff; border: 0.0625rem solid #e2e8f0; border-radius: 0.75rem; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.03); }
.sub-tab-menu > li > a:hover { color: var(--color-point); border-color: var(--color-point); }
.sub-tab-menu > li.on > a { background: linear-gradient(135deg, var(--color-point), var(--color-point2)); color: #fff;  box-shadow: 0 0.25rem 0.5rem rgba(75, 0, 130, 0.2); }

.btn-group-wrap { display: flex; gap: 0.625rem; width: 100%; }
.custom-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem 0.75rem; border-radius: 0.5rem; font-size: 0.9375rem; font-weight: 600; text-align: center; text-decoration: none; word-break: keep-all; transition: all 0.2s ease; }
.point-btn { background-color: var(--color-point); color: #fff; }
.point-btn:hover { background-color: var(--color-point2); }
.gray-btn { background-color: #333333; color: #fff; }
.gray-btn:hover { background-color: #555555; }
.sub-txt-box.red { border-color: #f5c6cb; background-color: #fff8f8; }
.sub-txt-box.red .sub-dot-list > li::before { background-color: #e53935; }

/* 3열 버튼 그룹 (바로가기 영역용) */
.btn-group-wrap.col-3 { display: flex; gap: 0.625rem; width: 100%; margin-bottom: 0.625rem; }

/* 인사말 */
.greeting-wrap { width: 100%;}
.greeting-header { margin-bottom: 2rem; border-bottom: 0.125rem solid var(--color-point); padding-bottom: 1.25rem; }
.greet-title { font-size: 1.7rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; color: #000}
.greet-title.handgraph {font-size: 3.5rem; font-weight: 400; }
.greet-subtitle { font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
.greeting-body { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
.greeting-body p { font-size: 0.9rem; color: #444; line-height: 1.7; }
.greeting-body .lead-txt { font-size: 1rem; font-weight: 600; color: var(--color-point); line-height: 1.6; background-color: #faf8fc; padding: 1rem 1.25rem; border-radius: 0.75rem; box-shadow: inset 0 0 0 0.0625rem rgba(75, 0, 130, 0.08); }
.greeting-footer { text-align: right; padding-top: 1rem; }
.sign-txt { font-size: 1rem; font-weight: 700; color: #222; }

.tab-content {display: none;}
.tab-content.on {display: block;}

/*  */
.event-card { margin-bottom: 1.25rem; border-radius: 0.75rem; overflow: hidden; background: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.02); }
.event-tit { background: linear-gradient(135deg, var(--color-point), var(--color-point2)); color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.75rem 1rem; }
.table_wrap {overflow-x:scroll;}
.table_wrap table { min-width: 30rem; }
.event-card .sub-table { border: 0.0625rem solid #e9ecef;}
.event-card .sub-table th { color: #333; width:20%; }
.event-card .price-table th, .price-table td { text-align: center; font-size: 0.75rem; padding: 0.5rem 0.25rem; }
.event-card .price-table th { background-color: rgba(75, 0, 130, 0.04); color: var(--color-point); }
.event-card .price-table .memo { font-size: 0.75rem; color: #888;}

/*  */
.card-desc-box { padding: 1rem ; background-color: #fff; background-color:#f4f6f9}
.card-desc-box .sub-txt { margin-bottom: 0; }
.credit-table { margin-bottom: 0; }
.credit-table th { }
.credit-table td {  line-height: 1.6; }
.sub-desc-sub { display: block; font-size: 0.75rem; color: #777; margin-top: 0.125rem; }
.sub-point-txt { color: var(--color-point); }

.event-card .event-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-weight: 700; }
.event-card .sub-sub-tit { display: block; width: 100%; font-size: 0.875rem; font-weight: 500; color: #ccc; }
.event-card .special-badge { display: inline-block; background-color:var(--color-point2);  color: var(--color-point); font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; margin-right: 0.25rem; }
.event-desc-cell { padding: 0.75rem 1rem; background-color: #f8f9fa; color: #495057; font-size: 0.875rem; line-height: 1.5; }

.intro-txt-wrap .sub-txt { margin-bottom: 1rem; line-height: 1.6; color: #495057; }
.intro-txt-wrap .sub-txt:last-child { margin-bottom: 0; }

.intro-card { padding: 1.5rem; border:1px solid var(--color-point) }
.intro-main-tit { font-size: 1.25rem; font-weight: 700; color: var(--color-point); margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; }
.page-num { font-size: 0.875rem; font-weight: 400; color: #777; }

.card-con { margin-top: 1.25rem; }
.card-con .sub-tit { font-size: 0.9375rem; font-weight: 700; color: #333; margin-bottom: 0.375rem; }
.card-con .sub-tit:not(:first-child) { margin-top: 1rem; }

.program-top-bar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.75rem; }
.program-host { font-size: 0.875rem; font-weight: 600; color: #555; }
.program-table th { text-align: center; }
.program-item-bold { font-weight: 600; color: #333; margin-bottom: 0.125rem; }
.program-item-subtit { font-weight: 700; color: var(--color-point); margin: 0.25rem 0; }
.program-item-desc { font-size: 0.8125rem; color: #555; padding-left: 0.75rem; margin-top: 0.125rem; line-height: 1.4; }

.reg-guide-box { background-color: #f0f7fb; border: 1px solid #bce8f1; padding: 1.25rem; border-radius: 0.25rem; margin-bottom: 2rem; }
.reg-guide-title { font-size: 1.125rem; font-weight: 700; color: var(--color-point); margin-bottom: 0.75rem; }
.reg-guide-list {  }
.reg-guide-list li { margin-bottom: 0.5rem; line-height: 1.5; color: #333; font-size: 0.875rem; }
.reg-guide-list li a:hover { color: var(--color-point2); }
.reg-guide-list li a {vertical-align: top;  }
.reg-guide-list li:last-child { margin-bottom: 0; }
.reg-sub-txt { display: inline-block; margin-top: 0.25rem; color: #666; font-size: 0.875rem; }
.reg-table th, .reg-table td { text-align: center; vertical-align: middle; }
.reg-table th {width: auto!important;}
.reg-table .sub-th { background-color: #f8f9fa; font-size: 0.75rem; }
.empty-cell { background-color: #fafafa; }
.webapp-banner {border:1px solid #bce8f1; display: flex; background: linear-gradient(135deg, #004d80 0%, #002b4d 100%); color: #ffffff; border-radius: 0.5rem; overflow: hidden; margin-top: 2rem; flex-direction: column;}
.webapp-qr-area { background-color: #ffffff; padding: 1.5rem; display: flex; align-items: center; justify-content: center; min-width: 10rem;}
.webapp-qr-area img { width: 7.5rem; height: 7.5rem; object-fit: contain; }
.webapp-info-area { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.webapp-header { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 0.75rem; margin-bottom: 0.75rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.webapp-main-title { font-size: 1.25rem; font-weight: 700; }
.webapp-sub-title { font-size: 1.25rem; font-weight: 700; color: #4fc3f7; }
.webapp-brand { font-size: 0.75rem; opacity: 0.8; margin-left: auto; }
.webapp-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.4; }
.webapp-row:last-child { margin-bottom: 0; }
.badge-blue { background-color: var(--color-point); color: #ffffff; font-size: 0.75rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.25rem; white-space: nowrap; margin-top: 0.125rem; }
.url-link { color: #81d4fa; text-decoration: underline; word-break: break-all; }

/* 프로그램 */
.program-wrap { font-family: inherit; color: #333; max-width: 75rem; margin: 0 auto; }
.tab-date-group { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.tab-date-btn { flex: 1; padding: 0.875rem; background-color: #f1f3f5; border: none; border-radius: 0.375rem; font-size: 1rem; font-weight: 700; color: #495057; cursor: pointer; transition: all 0.2s; }
.tab-date-btn.active { background-color: var(--color-point); color: #ffffff; }
.tab-session-group { display: flex; gap: 0.25rem; background-color: #e9ecef; padding: 0.25rem; border-radius: 0.375rem; margin-bottom: 1rem; }
.tab-session-btn { flex: 1; padding: 0.5rem; background: transparent; border: none; font-size: 0.75rem; font-weight: 600; color: #6c757d; border-radius: 0.25rem; cursor: pointer; }
.tab-session-btn.active { background-color: #ffffff; color: var(--color-point); box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.1); }
.filter-control-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.select-group { display: flex; gap: 0.5rem; flex: 1; flex-wrap: wrap; }
.custom-select { padding: 0.5rem; border: 1px solid #ced4da; border-radius: 0.375rem; font-size: 0.75rem; background-color: #ffffff; flex: 1; }
.action-group { display: flex; gap: 0.5rem; }
.ctrl-btn { padding: 0.5rem; border: 1px solid #ced4da; background-color: #ffffff; border-radius: 0.375rem; font-size: 0.75rem; cursor: pointer; color: #495057; }
.ctrl-btn.search-open-btn {  padding: 0.5rem ;  border: 1px solid var(--color-point);  background-color: var(--color-point); border-radius: 0.375rem; font-size: 0.75rem; cursor: pointer; color: #ffffff;  }
.ctrl-btn.bookmark-on { color: #f59f00; border-color: #fcc419; }
.timeline-section { margin-bottom: 1.5rem; }
/* .timeline-section.off {display: none;} */
.time-badge { display: inline-block; background-color: #343a40; color: #ffffff; padding: 0.375rem 0.875rem; border-radius: 1rem; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.75rem; }
.program-card { display: flex; align-items: center; background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.55rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.02); transition: transform 0.2s, box-shadow 0.2s; }
.program-card:hover { transform: translateY(-0.125rem); box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05); }
.time-col { min-width: 5rem; text-align: center; border-right: 1px solid #e9ecef; padding-right: 1rem; }
.start-time { display: block; font-size: 0.875rem; font-weight: 700; color: #212529; }
.end-time { display: block; font-size: 0.75rem; color: #868e96; }
.content-col { flex: 1; padding: 0 1.25rem; }
.prog-title { display: block; font-size: 1rem; font-weight: 700; color: #212529; text-decoration: none; margin-bottom: 0.25rem; }
.prog-title:hover { color: var(--color-point); }
.prog-category { font-size: 0.8125rem; color: #868e96; }
.location-col { text-align: right; min-width: 9rem; }
.loc-badge { display: inline-block; background-color: #f8f9fa; color: #495057; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; border: 1px solid #dee2e6; margin-top: 0.25rem; }
.badge-point { background-color: var(--color-point); color: #ffffff; font-size: 0.7rem; padding: 0.125rem 0.375rem; border-radius: 0.2rem; margin-right: 0.375rem; vertical-align: middle; }
.program-wrap .paper-list-container {margin-bottom: 0;}
.program-wrap .paper-list-container.on {margin-bottom: 1.5rem;}

.search-modal-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9997; justify-content: center; align-items: center; box-sizing: border-box; }
.search-modal-wrapper.on { display: flex; }
.search-modal-content { background-color: #ffffff; width: 90%; max-width: 31.25rem; border-radius: 0.5rem; padding: 1.25rem; box-sizing: border-box; max-height: 90vh; overflow-y: auto; }
.search-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 0.0625rem solid #ced4da; padding-bottom: 0.75rem; margin-bottom: 1rem; }
.search-modal-header h3 { margin: 0; font-size: 1rem; color: #1a365d; font-weight: 700; }
.search-close-btn { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: #495057; }
.search-field-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.search-field-row label { width: 3.75rem; font-size: 0.75rem; font-weight: 600; color: #495057; text-align: right; flex-shrink: 0; }
.search-field-row .custom-select, .search-field-row .search-input { flex: 1; padding: 0.5rem; border: 0.0625rem solid #ced4da; border-radius: 0.375rem; font-size: 0.75rem; background-color: #ffffff; box-sizing: border-box; }
.search-modal-actions { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; margin-bottom: 0.75rem; }
.search-modal-actions .btn-submit { padding: 0.5rem 1rem; background-color: #495057; color: #ffffff; border: none; border-radius: 0.25rem; font-size: 0.75rem; cursor: pointer; }
.search-modal-actions .btn-close { padding: 0.5rem 1rem; background-color: #495057; color: #ffffff; border: none; border-radius: 0.25rem; font-size: 0.75rem; cursor: pointer; }
.search-guide { font-size: 0.6875rem; color: #868e96; text-align: center; margin: 0; line-height: 1.4; }

.highlight {color: var(--color-point); font-weight: 700; }

.filter-btn-group {
  margin-bottom: 20px;
}
.filter-btn {
  padding: 8px 16px;
  margin: 4px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
}
.filter-btn.active {
  background-color: #0056b3;
  color: #fff;
  border-color: #0056b3;
}
/* veiw */
.program-view-wrap { font-family: inherit; color: #333; max-width: 75rem; margin: 0 auto; padding-bottom: 3rem;  }
.session-header-box { background: linear-gradient(135deg, var(--color-point) 0%, var(--color-point2) 100%); color: #ffffff; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1.5rem; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05); }
.session-main-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.session-sub-title { font-size: 0.875rem; opacity: 0.8; margin-bottom: 1rem; }
.session-meta-info { display: flex; gap: 1.25rem; font-size: 0.875rem; opacity: 0.9; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 0.75rem; flex-wrap: wrap; }
.paper-list-container { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.paper-card { background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 0.5rem; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.02); transition: box-shadow 0.2s; }
.paper-card:hover { box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05); }
.paper-info { flex: 1; }
.paper-title { font-size: 1rem; font-weight: 700; color: #212529; margin-bottom: 0.375rem; line-height: 1.4; }
.paper-author { font-size: 0.875rem; color: #495057; margin-bottom: 0.25rem; }
.paper-code { font-size: 0.75rem; color: #868e96; font-weight: 600; }
.paper-actions { display: flex; gap: 0.5rem; }
.btn-action { padding: 0.5rem 0.875rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s; }
.btn-pdf { background-color: #f1f3f5; color: #495057; border: 1px solid #ced4da; }
.btn-pdf:hover { background-color: #e9ecef; }
.btn-export { background-color: var(--color-point); color: #ffffff; }
.btn-export:hover { opacity: 0.9; }
.btn-area { text-align: center; }
.btn-back { padding: 0.75rem 2rem; background-color: #6c757d; color: #ffffff; border: none; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.btn-back:hover { background-color: #5a6268; }

.bookmark-btn { background-color: #f1f3f5;  color: #495057;  border: 1px solid #ced4da; padding: 0.3rem 0.5rem; border-radius: 0.25rem; font-size: 0.8rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.bookmark-btn.on {background-color:#fff7e7; border-color: #f59f00;color: #f59f00;  }

.paper-list-container.bookmark-list { }
.paper-list-container.bookmark-list.on { max-height: 62.5rem; opacity: 1; }

/* 프로그램 일정표 - 개요 */
.schedule-wrap { width: 100%; font-family: inherit; box-sizing: border-box; }
.schedule-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); border: 0.125rem solid #fff; border-radius: 1.25rem; box-shadow: 0 0.5rem 1rem rgba(75, 0, 130, 0.08); overflow: hidden; margin-bottom: 1.25rem; transition: all 0.3s ease; position: relative; }
.schedule-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0.375rem; height: 100%; background: linear-gradient(180deg, #4b0082 0%, #00ced1 100%); }
.schedule-header { background: linear-gradient(135deg, rgba(75, 0, 130, 0.06) 0%, rgba(0, 206, 209, 0.08) 100%); padding: 1rem 1.25rem; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 0.0625rem solid rgba(75, 0, 130, 0.1); }
.schedule-header .date-area { display: flex; align-items: baseline; gap: 0.375rem; }
.schedule-header .day-num { font-size: 1.25rem; font-weight: 800; color: #4b0082; font-style: italic; }
.schedule-header .day-week { font-size: 1rem; font-weight: bold; color: #4b0082; }
.schedule-header .event-time { font-size: 0.8125rem; color: #00ced1; font-weight: 700; background: rgba(0, 206, 209, 0.12); padding: 0.1875rem 0.5rem; border-radius: 1rem; }
.schedule-body { padding: 0.5rem 1.25rem; }
.schedule-item { padding: 0.875rem 0; border-bottom: 0.0625rem dashed #eaeaea; display: flex; flex-direction: column; gap: 0.25rem; }
.schedule-item:last-child { border-bottom: none; }
.schedule-item.special-highlight { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(0, 206, 209, 0.1) 100%); margin: 0 -1.25rem; padding: 0.875rem 1.25rem; border-bottom: none; border-top: 0.0625rem solid rgba(255, 215, 0, 0.3); }
.schedule-item .item-tit { font-size: 0.9375rem; font-weight: bold; color: #4b0082; display: flex; align-items: center; justify-content: space-between; }
.schedule-item .item-sub { font-size: 0.8125rem; color: #555; line-height: 1.4; word-break: keep-all; }
.schedule-item.special-highlight .item-tit { color: #4b0082; font-weight: 800; }

.matrix-schedule-wrap { width: 100%; font-family: inherit; box-sizing: border-box; }
.matrix-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); border: 0.125rem solid #fff; border-radius: 1.25rem; box-shadow: 0 0.5rem 1rem rgba(75, 0, 130, 0.08); overflow: hidden; margin-bottom: 1.25rem; position: relative; }
.matrix-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0.375rem; height: 100%; background: linear-gradient(180deg, #4b0082 0%, #00ced1 100%); }
.matrix-header { background: linear-gradient(135deg, rgba(75, 0, 130, 0.06) 0%, rgba(0, 206, 209, 0.08) 100%); padding: 1rem 1.25rem; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 0.0625rem solid rgba(75, 0, 130, 0.1); }
.matrix-header .date-area { display: flex; align-items: baseline; gap: 0.375rem; }
.matrix-header .day-num { font-size: 1.25rem; font-weight: 800; color: #4b0082; font-style: italic; }
.matrix-header .day-week { font-size: 1rem; font-weight: bold; color: #4b0082; }
.matrix-body { padding: 0.5rem 1.25rem; }
.time-group { padding: 1rem 0; border-bottom: 0.0625rem dashed #eaeaea; }
.time-group:last-child { border-bottom: none; }
.time-badge { display: inline-block; font-size: 0.75rem; color: #4b0082; font-weight: 500; background: rgba(75, 0, 130, 0.08); padding: 0.25rem 0.5rem; border-radius: 1rem; margin-bottom: 0.5rem;  width: 100%;}
.session-box { background: #fafbfc; border: 0.0625rem solid #e1e4ec; border-radius: 0.75rem; padding: 0.875rem; margin-bottom: 0.625rem; }
.session-box:last-child { margin-bottom: 0; }
.session-box.highlight-main { background: linear-gradient(135deg, rgba(75, 0, 130, 0.04) 0%, rgba(0, 206, 209, 0.06) 100%); border-color: rgba(75, 0, 130, 0.2); }
.session-box.highlight-event { background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(0, 206, 209, 0.08) 100%); border-color: rgba(255, 215, 0, 0.4); }
.session-meta { display: flex; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; color: #00ced1; margin-bottom: 0.25rem; }
.session-meta .floor { color: #666; }
.session-title { font-size: 0.9375rem; font-weight: bold; color: #4b0082; line-height: 1.4; word-break: keep-all; }
.session-desc { font-size: 0.8125rem; color: #555; margin-top: 0.375rem; line-height: 1.4; word-break: keep-all; }

.program-action-wrap { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1.25rem; }
.program-btn { flex: 1; max-width: 12rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 700; border-radius: 0.75rem; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 0.25rem 0.5rem rgba(75, 0, 130, 0.05); }
.program-btn.view-btn { background: #fff; color: #4b0082; border: 0.0625rem solid rgba(75, 0, 130, 0.2); }
.program-btn.view-btn:hover { background: rgba(75, 0, 130, 0.04); }
.program-btn.download-btn { background: #4b0082; color: #fff; border: 0.0625rem solid transparent; box-shadow: 0 4px 15px rgba(75, 0, 130, 0.15); }
.program-btn.download-btn:hover { background: #3b0066; }
.program-btn svg { width: 1rem; height: 1rem; fill: currentColor; }

.program-list-wrap {min-height: 15rem;}

.layer-popup-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; display: none; align-items: center; justify-content: center; }
.layer-popup-wrap.open { display: flex; }
.layer-popup-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }
.layer-popup-box { position: relative; width: 90%; max-width: 37.5rem; background-color: #fff; border-radius: 0.5rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); overflow: hidden; z-index: 10; }
.layer-popup-header { padding: 1.25rem 1.5rem; border-bottom: 0.0625rem solid #e5e5e5; }
.layer-popup-tit { font-size: 1.125rem; font-weight: 700; color: var(--color-point); margin: 0; }
.layer-popup-body { padding: 1.5rem; }
.export-btn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.export-item-btn { display: flex; align-items: center; padding: 0.75rem 1rem; background-color: #777; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 0.375rem; text-decoration: none; transition: background-color 0.2s ease; }
.export-item-btn:hover { background-color: #555; color: #fff; }
.icon-area { display: inline-block; width: 2rem; height: 2rem; margin-right: 0.5rem; background-color: rgba(255, 255, 255, 0.3); border-radius: 0.25rem; overflow: hidden;}
.layer-popup-footer { padding: 1rem 1.5rem; background-color: #f8f9fa; border-top: 0.0625rem solid #e5e5e5; text-align: center; }
.layer-close-btn { display: inline-block; padding: 0.5rem 2rem; background-color: var(--color-point); color: #fff; font-size: 0.875rem; font-weight: 600; border: none; border-radius: 0.25rem; cursor: pointer; }
.layer-close-btn:hover { opacity: 0.9; }

.mail-input-group { display: flex; flex-direction: column; gap: 0.5rem; }
.mail-label { font-size: 0.875rem; font-weight: 600; color: #333; }
.mail-input-field { width: 100%; padding: 0.75rem; border: 0.0625rem solid #ddd; border-radius: 0.375rem; font-size: 0.9375rem; box-sizing: border-box; }
.mail-input-field:focus { outline: none; border-color: var(--color-point); }

.paper-list-container .time-badge {background-color:#fff7e7; border-color: #f59f00;color: #f59f00;}
/* 엑스포 */
.expo-info-box p { font-size: 1rem; color: #333; line-height: 1.6; margin-bottom: 10px; }
.expo-info-box .label { display: inline-block; font-weight: 600; color: var(--color-point); margin-right: 8px; }
.expo-info-box .sub-text { display: block; padding-left: 32px; font-size: 0.9rem; color: #666; }
.greeting-wrap.expo-overview-wrap .greeting-body { flex-grow: 1; }
.greeting-wrap.expo-overview-wrap .greeting-body .lead-txt { font-weight: 600; font-size: 1.125rem; color: #111; margin-bottom: 20px; }
.greeting-wrap.expo-overview-wrap .greeting-body p { font-size: 1rem; color: #444; line-height: 1.8; margin-bottom: 16px; }

.participant-table { width: 100%; border-collapse: collapse; text-align: left; }
.participant-table th, .participant-table td { padding: 12px 16px; font-size: 0.95rem; border-bottom: 1px solid #eee; }
.participant-table thead th { font-weight: 700; color: var(--color-point); border-bottom: 2px solid var(--color-point); background-color: #fafafa; width: auto!important;}
.participant-table .num { font-weight: 700; color: var(--color-point); text-align: center; }
.participant-table .name { color: #333; }

.no_img {border-radius:1rem; width:100%; height: 15em; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 1rem; font-weight: bold; }

/* 지역소개 */
.field-trip-container { margin: 0 auto; padding: 2rem 1.25rem; color: #333333; }
.field-trip-container .section-header { text-align: center; margin-bottom: 3.125rem; }
.field-trip-container .section-header h2 { font-size: 1.125rem; font-weight: 600; color: #666666; margin-bottom: 0.5rem; letter-spacing: -0.031rem; }
.field-trip-container .main-title { font-size: 2rem; font-weight: 800; color: #1a1a1a; letter-spacing: -0.062rem; }
.field-trip-container .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(23.75rem, 1fr)); gap: 1.875rem; }
.field-trip-container .trip-card { background: #ffffff; border: 0.062rem solid #eaeaea; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.field-trip-container .trip-card:hover { transform: translateY(-0.312rem); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); }
.field-trip-container .card-img-wrap { width: 100%; height: 13.75rem; overflow: hidden; background-color: #f0f0f0; }
.field-trip-container .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.field-trip-container .trip-card:hover .card-img-wrap img { transform: scale(1.05); }
.field-trip-container .card-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.field-trip-container .card-header-area { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.field-trip-container .card-header-area > div {display: flex; flex-direction: row; gap: 0.5em; align-items: center; }
.field-trip-container .toggle-icon { font-size: 0.875rem; color: var(--color-point); transition: transform 0.3s ease; }
.field-trip-container .trip-card.active .toggle-icon { transform: rotate(180deg); }
.field-trip-container .card-desc-wrap { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, margin-top 0.3s ease-out; }
.field-trip-container .trip-card.active .card-desc-wrap { max-height: 50rem; margin-top: 0.875rem; transition: max-height 0.5s ease-in; }
.field-trip-container .card-num { font-size: 1.25rem; font-weight: 700; color: var(--color-point);display: block; }
.field-trip-container .card-tit { font-size: 1.25rem; font-weight: 700; color: #111; margin: 0; letter-spacing: -0.031rem; }
.field-trip-container .card-desc { font-size: 0.9rem; line-height: 1.7; color: #555; margin: 0; /* text-align: justify; */ }

.sub-noti-box {padding:1rem; border-radius: 1rem; background-color: #fff8e8; border: 1px solid #f0e0b8; color: #000; }

/* 중식 안내 페이지 전용 추가 스타일 */
.lunch-info-box { border: 0.0625rem solid #e5e5e5; background-color: #fcfcfc; border-radius: 0.5rem; padding: 1.25rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lunch-info-item { display: flex; align-items: flex-start; font-size: 0.9375rem; color: #333; line-height: 1.5; }
.lunch-info-item .label { font-weight: 700; color: var(--color-point); margin-right: 0.75rem; white-space: nowrap; }
.lunch-info-item .val-group { display: flex; flex-direction: column; }


/* 교통안내 */
.root_daum_roughmap .wrap_controllers { display: none;}

@media (max-width: 500px) {
.title-area h1 { font-size: 1.7rem; }
.title-area h2 { font-size: 0.75rem; }
.sub-slogan {font-size: 0.5rem}
.menu-item { height: 5rem; padding: 0.5rem 0.8rem; }
.main-txt { font-size: 1rem; }
.icon-box { font-size: 2rem; width: 2.2rem; }
.main-footer .host-logo img {height: 1.5em;}
#footer .footerTop {gap: 0.8rem; padding-bottom: 0.8rem;}
#footer .footerTop .leftCon > .logo > img {height: 1.2rem;}
#footer .footerTop .rightCon .rightMid .infoSec > li > .conBox > .infoList > li {font-size: 0.6rem;}
.greet-title { font-size: 1.2rem;}
.greet-title.handgraph {font-size: 2.5rem;}
.greet-subtitle { font-size: 0.7rem;}
.paper-actions {flex-direction: column; }
.btn-action {font-size: 0.7rem;}
.custom-select {max-width: 48%;}
.select-group {justify-content: flex-end}
.tab-date-btn {padding: 0.5rem;}
.ctrl-btn {width: 3rem;}
.tab-session-group {flex-wrap: wrap;}
.field-trip-container .card-grid { grid-template-columns: 1fr; }
.field-trip-container .main-title { font-size: 1.625rem; }
.btn-group-wrap { flex-direction: column; }
.custom-btn { padding: 0.875rem 0.5rem; }
.btn-group-wrap.col-3 { flex-direction: column; }
.export-btn-grid { grid-template-columns: 1fr; }
.convention-view-wrap { gap: 1rem!important; }
.convention-action-tit {font-size: 0.9rem!important}
.convention-poster-box { width: 11rem!important; }
.convention-action-box {padding-top: 0!important;}
}

/* export.php  */
.export-view-wrap { width: 100%; max-width: 43.75rem; margin: 2rem auto; padding: 0 1rem; box-sizing: border-box; }
.export-view-wrap .export-top-banner { text-align: center; margin-bottom: 2rem; }
.export-view-wrap .convention-title { font-size: 1.5rem; font-weight: 700; color: var(--color-point); margin-bottom: 0.5rem; }
.export-view-wrap .convention-desc { font-size: 0.9375rem; color: #666; margin: 0; }
.export-view-wrap .export-content-box { background-color: #fff; border: 0.0625rem solid #e5e5e5; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.04); margin-bottom: 1.5rem; }
.export-view-wrap .export-table-wrap { width: 100%; overflow-x: auto; margin-bottom: 1.5rem; }
.export-view-wrap .export-table { width: 100%; border-collapse: collapse; border: 0.0625rem solid #e5e5e5; font-size: 0.9375rem; text-align: left; }
.export-view-wrap .export-table th { background-color: #f8f9fa; color: #333; font-weight: 700; padding: 1rem; text-align: center; border-bottom: 0.0625rem solid #e5e5e5; border-right: 0.0625rem solid #e5e5e5; vertical-align: middle; }
.export-view-wrap .export-table td { padding: 1rem; border-bottom: 0.0625rem solid #e5e5e5; color: #333; vertical-align: middle; line-height: 1.5; }
.export-view-wrap .export-table tr:last-child th, .export-table tr:last-child td { border-bottom: none; }
.export-view-wrap .export-action-area { width: 100%; }
.export-view-wrap .btn-download-pdf { display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem; background-color: var(--color-point); color: #fff; font-size: 1rem; font-weight: 700; border-radius: 0.5rem; text-decoration: none; box-sizing: border-box; transition: opacity 0.2s ease; }
.export-view-wrap .btn-download-pdf:hover { opacity: 0.9; color: #fff; }
.export-view-wrap .btn-area { text-align: center; }
.export-view-wrap .btn-home { display: inline-block; padding: 0.75rem 2rem; background-color: #666; color: #fff; font-size: 0.9375rem; font-weight: 600; border-radius: 0.375rem; text-decoration: none; }
.export-view-wrap .btn-home:hover { background-color: #444; color: #fff; }


/* 프로그램북 */
.convention-view-wrap { width: 100%; display: flex; align-items: flex-start; gap: 2.5rem; justify-content: center; }
.convention-poster-box { flex: 0 0 auto; width: 18rem; }
.convention-poster-img { width: 100%; height: auto; box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08); border-radius: 0.5rem; border: 0.0625rem solid #e9ecef; }
.convention-action-box { flex: 1; display: flex; flex-direction: column; gap: 2rem; padding-top: 1.5rem; }
.convention-action-tit { font-size: 1.125rem; font-weight: 700; color: #333; margin-bottom: 0.5rem; letter-spacing: 0.05em; }
.convention-view-btn { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9rem; font-weight: 600; color: #555; text-decoration: none; padding: 0.5rem 0.75rem; background-color: #f8f9fa; border: 0.0625rem solid #e9ecef; border-radius: 0.375rem; transition: all 0.2s ease; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.02); }
.convention-view-btn:hover { color: var(--color-point); border-color: var(--color-point); background-color: #fff; }
.convention-view-btn .icon { font-size: 1rem; color: var(--color-point); }

/* 1. 모달 전체 배경 (화면 전체 고정 및 반투명 검은색) */
.ebook-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 투명도 있는 어두운 배경 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998; /* 다른 요소들보다 맨 위에 오도록 설정 */
}

.ebook-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 1.25rem; box-sizing: border-box; }

.ebook-modal .modal-content { position: relative; width: 100%; max-width: 68.75rem; height: 85vh; background-color: #fff; border-radius: 0.625rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; overflow: hidden; }

.ebook-modal #closeModal { align-self: flex-end; background-color: #222; color: #fff; border: none; padding: 0.625rem 1.125rem; font-size: 0.875rem; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }

.ebook-modal #closeModal:hover { background-color: #e74c3c; }

.ebook-modal iframe { width: 100%; flex-grow: 1; border: none; }

@media screen and (max-width: 768px) {
.ebook-modal { padding: 0.625rem; }
.ebook-modal .modal-content { width: 100%; height: 92vh; border-radius: 0.375rem; }
.ebook-modal #closeModal { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
}

.prize-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
  }
  .prize-table th,
  .prize-table td {
    padding: 11px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e9e9e9;
    word-break: keep-all;          /* 한글 단어 중간에서 줄바꿈 방지 */
  }
  .prize-table tr:last-child th,
  .prize-table tr:last-child td { border-bottom: 0; }
 
  /* 등수 칸 */
  .prize-table th {
    font-weight: 700;
    color: #e8830c;                /* 사이트 포인트 컬러에 맞게 변경 */
    white-space: nowrap;
    width: 100%!important; 
  }
  .prize-table .rank-sub {         /* (1명) 같은 인원 표기 */
    font-weight: 400;
    color: #888;
    font-size: 0.9em;
    margin-left: 2px;
  }
     .prize-table tbody { display: block; }
    .prize-table tbody {
      display: grid;
      grid-template-columns: max-content 1fr;   /* 등수 | 상품 */
    }
  /* 왼쪽 그룹과 오른쪽 그룹 사이 간격 */
  .prize-table .r:nth-child(3) { padding-left: 32px; }
 
  /* 빈 칸은 선 없이 */
  .prize-table .empty { border-bottom: 0; }
 
    .prize-table { font-size: 15px; }
    .prize-table colgroup { display: none; }
    .prize-table,

    .prize-table tr { display: contents; }
    .prize-table .l { order: 1; }                /* 왼쪽 그룹 먼저 */
    .prize-table .r { order: 2; }                /* 오른쪽 그룹 그 다음 */
    .prize-table .r:nth-child(3) { padding-left: 12px; }
    .prize-table .empty { display: none; }
    .prize-table tr:last-child th,
    .prize-table tr:last-child td { border-bottom: 1px solid #e9e9e9; }