@charset "utf-8";
/* CSS Document */
.box0{ padding:0 3vw; width:100%; box-sizing:border-box}
.box1{ width:1400px; margin:0 auto; max-width:94%}
.box2{ width:1200px; margin:0 auto; max-width:94%}

.gnb li.m_hide{ display:none}

#header{ position: fixed; left:0; top:0; width:100%; z-index:1000; background:#fff; transition:.3s}
#header .top_wrap{ position:relative}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1{ height:5em}
.scrollMg{scroll-margin-top: 5em}
.headerT{ padding-top:5em}
#header .top_wrap .wrapIn{ display:flex; align-items:center; gap:0 1.5vw}
#header .top_wrap .logo > a{ display:block}
#header .top_wrap .logo > a .in{ display:flex; align-items:center; gap:0 1em}
#header .top_wrap .logo > a img{ height:3em}
#header .top_wrap .gnb_wrap{ flex:1 1 0%; min-width:0}
#header .top_wrap .gnb_wrap .gnb > li{ position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1{ padding:0 1.5vw; box-sizing:border-box; position:relative; z-index:1}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:before,
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ content:""; position:absolute; right:0; top:50%; transform:translate(150%, -200%); width:0; height:0; border-radius:50%; background:var(--siteC); transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ transform:translate(200%, -100%) scale(.6); opacity:.5}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .tt{ font-weight:700; font-size:1.188em; white-space:nowrap}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:var(--siteC)}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:before,
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:before,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after{ width:.625em; height:.625em}
#header .top_wrap .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; transform:translateX(-50%); width:12em; box-sizing:border-box; border-radius:1em; padding:1em; background:#fff; display:block; top:150%; opacity:0; visibility:hidden; box-shadow:0 0 1em rgba(0,0,0,.1)}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp2{ top:calc(100% - .5em); opacity:1; visibility: visible; transition:.5s}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp2 > li > a{ padding:.375em; font-weight:500; border-radius:2em; color:var(--siteC); transition:.3s; line-height:1.1}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp2 > li > a:hover{ background:var(--siteC); color:#fff}
#header .top_wrap .etc_wrap{ display:flex; align-items:center; gap:0 1em; margin-left:auto}
#header .top_wrap .etc_wrap .link{ display:flex; align-items:center; gap:0 .25em}
#header .top_wrap .etc_wrap .link > li > a{ font-size:.875em; display:flex; align-items:center; gap:0 .25em; font-weight:500; border:1px solid #ddd; border-radius:.5em; height:2.25em; padding:0 .75em; white-space:nowrap}
#header .top_wrap .etc_wrap .link > li > a .ico{ font-size:1.125em}
#header .top_wrap .etc_wrap .link > li > a .nw{ font-size:1em; transform:translate(0, -25%)}
#header .top_wrap .etc_wrap .link > li > a .nw:before{content:"\e980"}
#header .top_wrap .etc_wrap .link > li.lsk > a{ border-color:#154194; background:#fff; color:#154194}
#header .top_wrap .etc_wrap .link > li.contact > a{ border-color:transparent; background:var(--siteC2); color:#fff}
#header .top_wrap .etc_wrap .link > li.mem > a{ border-color:transparent; background:var(--siteC); color:#fff}

.main #header{ opacity:0}
.main.load #header{ opacity:1; transition:.3s}
.scroll #header{ box-shadow:0 .5em 1em rgba(0,0,0,.1);}
.main:not(.scroll) #header{ margin:0 4vw; width:calc(100% - 8vw); top:2em}
.main:not(.scroll) #header .wrapIn{ padding:0 2vw; margin:0 auto}
.main:not(.scroll) #header .top_wrap .gnb_wrap .gnb > li .dp1{ padding:0 1vw}

#footer{ z-index:1; background:#fff; position:relative; padding:4em 0 5em 0}
#footer:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); opacity:.05}
#footer .goTop{ position:fixed; right:1em; bottom:1em; width:3.5em; line-height:3.5em; border-radius:50%; text-align:center; background:var(--siteC); color:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s}
#footer .goTop .xi{ font-size:1.5em; transition:.3s}
#footer .goTop:hover .xi{ transform:translateY(-.25em)}
.scroll #footer .goTop{ opacity:1; transform:translateY(0)}
#footer .logo{ display:flex; gap:0 2em}
#footer .logo img{ height:3em}
#footer .logo img.logo2{ transform:translateY(-.5em)}
#footer .info_wrap{ margin-top:2em}
#footer .info{ overflow:hidden}
#footer .info > li{ float:left; margin-right:2em; margin-bottom:.5em; font-weight:500; position:relative}
#footer .info > li:before{ content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2}
#footer .info > li.point{ font-weight:600}
#footer .info > li.br{ clear:left}
#footer .info > li.copyright{ font-size:.875em; opacity:.5; text-transform:uppercase; margin-top:1em}
#footer .menu_wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:1em 0}
#footer .menu{ display:flex; flex-direction:column; gap:1em 0}
#footer .menu > li{ width:100%;}
#footer .menu > li > a{ display:block; padding-right:2em;position:relative; font-weight:500; color:#666}
#footer .menu > li > a:after{ content:"\e915"; font-family:xeicon; position:absolute; right:0; top:0; transform:rotate(45deg)}
#footer .menu > li > a.point{ opacity:1; font-weight:700; color:var(--siteC)}

.sns_st{ display:flex; gap:.5em}
.sns_st > li > a{ display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; opacity:.5; border-radius:50%; transition:.3s}
.sns_st > li > a:hover{ background:var(--siteC); color:#fff; opacity:1}

#contents{ flex:1; min-height:0; box-sizing:border-box}
#contents .sub_top_wrap{ box-sizing:border-box; display:flex; flex-direction:column}
#contents .sub_top_wrap .wrap_con{ height:12em; display:flex; flex-direction:column}
#contents .sub_top_wrap .wrap_con .nav_wrap{ flex:1 1 0%; min-height:0}
#contents .sub_top_wrap .wrap_con .nav_wrap .wrap_in{ height:100%; box-sizing:border-box; display:flex; align-items:flex-end; padding:1em 0}
#contents .sub_top_wrap .wrap_con .nav_wrap .wrap_in .in{ display:flex; justify-content:space-between; align-items:flex-end}
#contents .sub_top_wrap .wrap_con .nav_wrap .tit{ display:flex; flex-direction:column; gap:.75em 0}
#contents .sub_top_wrap .wrap_con .nav_wrap .tit .t1{ font-weight:700; font-size:1.25em; text-transform:uppercase; letter-spacing:1em; opacity:0; padding-left:.25em; color:var(--siteC)}
#contents .sub_top_wrap .wrap_con .nav_wrap .tit .t2{ font-weight:500; font-size:3.75em; transform:translateY(100%)}
#contents .sub_top_wrap .wrap_con .nav_wrap .tit .t2_wrap{ overflow:hidden; line-height:1.1}
#contents .sub_top_wrap .wrap_con .nav_wrap .nav{ display:flex; align-items:center; opacity:0; margin-left:auto}
#contents .sub_top_wrap .wrap_con .nav_wrap .nav > li{ text-transform:uppercase; color:#777}
#contents .sub_top_wrap .wrap_con .nav_wrap .nav > li:not(.home):before{ content:"\e940"; font-family:xeicon; margin:0 .5em}
#contents .sub_top_wrap .wrap_con .nav_wrap .nav > li.home{ color:var(--siteC)}
#contents .sub_top_wrap .wrap_con .menuBar .bar{ position:absolute; top:0; width:2em; height:4px; background:var(--siteC); transform:translateY(-50%); transition:.5s}
#contents .sub_top_wrap .visual_wrap{ height:40vh; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:#000}
#contents .sub_top_wrap .visual_wrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-attachment:fixed; transition:.3s;}
#contents .sub_top_wrap .visual_wrap .bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2}
#contents .sub_top_wrap .visual_wrap .slogan{ position:relative}
#contents .sub_top_wrap .visual_wrap .slogan .t1{ font-weight:700; font-size:2.5em; color:#fff; word-break: break-all; letter-spacing:-.063em; word-spacing:1.125em}
.load #contents .sub_top_wrap .wrap_con .nav_wrap .tit .t1{ letter-spacing:0; opacity:1; transition:1s}
.load #contents .sub_top_wrap .wrap_con .nav_wrap .tit .t2{ transform:translateY(0); transition:1s}
.load #contents .sub_top_wrap .wrap_con .nav_wrap .nav{ opacity:1; transition:2s}

#contents .doc{ padding:3em 0 10em 0}

#contents .sub_layout_wrap{ display:flex; height:100%; align-items:flex-start; padding-bottom:4em}
#contents .sub_layout_wrap .sub_lnb_wrap{ width:17em; box-sizing:border-box; height:100%; box-shadow:0 0 1em rgba(0,0,0,.1); border-radius:0 1em 1em 0; transform:translateX(-3vw); position:sticky; top:0; overflow:hidden}
.scroll #contents .sub_layout_wrap .sub_lnb_wrap{ top:6em}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap{ background:var(--siteC); padding:2em 1em; display:flex; flex-direction:column; gap:.75em 0; align-items:center}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .userSt{ font-size:1.25em}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .wrap_tt{ font-weight:500; font-size:1.063em; color:#fff}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .tpWrap{ background:#fff; border-radius:1em; overflow:hidden}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .tpWrap .tit{ color:#fff; background:var(--siteC3); font-weight:700; font-size:1.125em; text-align:center; padding:1em; border-bottom:1px}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .tpWrap .info{ padding:1em}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .tpWrap .info > li{ display:flex; align-items:flex-start; gap:0 .5em}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .tpWrap .info > li:not(:first-child){ margin-top:.5em}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .tpWrap .info > li .ico{ font-size:1em; width:1.5em; line-height:1.5em; box-shadow:0 0 1em rgba(0,0,0,.1); border-radius:.5em; border:1px solid var(--siteC3); color:var(--siteC3); text-align:center}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .tpWrap .info > li .tt{ flex:1 1 0%; min-width:0; padding-top:.125em}
#contents .sub_layout_wrap .sub_lnb_wrap .info_wrap .tpWrap .info > li .tt .t1{ font-size:.938em}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb,
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2{ display:block}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li > a{ padding:1em 1.5em; text-align:left; position:relative; color:#777}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li > a:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-bottom:1px dashed rgba(0,0,0,.05)}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li > a .va{ display:flex; align-items:center; gap:0 1em; min-width:0; font-weight:700; font-size:1.125em; position:relative; position:relative; z-index:1}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li > a .va .tt{ flex:1 1 0%; min-width:0}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li > a .arrow{ font-size:1em; width:1.5em; line-height:1.5em; border-radius:50%; background:var(--siteC2); color:#fff; text-align:center; opacity:0; transition:.3s}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li > a .arrow:before{content:"\e93f"}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li:hover > a .arrow,
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li.on > a .arrow{ opacity:1; transform:translateX(0)}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li.on > a .arrow{ background:#fff; color:var(--siteC2)}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li.on > a{ color:#fff}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li.on > a:before{ background:var(--siteC2)}
#contents .sub_layout_wrap .sub_lnb_wrap .gnb > li .dp2 > li:not(:first-child) > a{ border-top:1px dashed #ccc}
#contents .sub_layout_wrap .sub_con_wrap{ flex:1 1 0%; min-width:0}

.d1 body{ position:relative; background:
radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px;
background-color: var(--siteC);
background-size:75px 100px;}
.d1 body:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; opacity:.9}
.d1 #contents{ position:relative}
.d1 #contents .doc{ padding:0 0 6em 0}
.d1 #contents .sub_top_wrap .wrap_con{ height:10em}
.d1 #contents .sub_top_wrap .wrap_con .nav_wrap .wrap_in{ padding-bottom:2em}
.d1 #contents .sub_top_wrap .wrap_con .nav_wrap .wrap_in .in{ justify-content:center; text-align:center}
.d1 #contents .sub_top_wrap .wrap_con .nav_wrap .nav{ display:none}
.d1 #contents .sub_top_wrap .wrap_con .nav_wrap .tit .t1{ display:none}
.d1 #contents .sub_top_wrap .wrap_con .nav_wrap .tit .t2{ font-size:2.5em}

.d2 #contents{ height:100vh; height:calc(var(--vh, 1vh) * 100)}
.d2 #contents .sub_top_wrap .wrap_con{ height:auto}
.d2 #contents .sub_top_wrap .wrap_con .nav_wrap{ border-bottom:1px dashed #ccc}
.d2 #contents .sub_top_wrap .wrap_con .nav_wrap .wrap_in{ padding:2em 0 1em 0}
.d2 #contents .sub_top_wrap .wrap_con .nav_wrap .wrap_in .in{ width:100%}
.d2 #contents .sub_top_wrap .wrap_con .nav_wrap .nav{ opacity:1}
.d2 #contents .sub_top_wrap .wrap_con .nav_wrap .tit .t2{ font-size:2.25em; transition: none; transform:translateY(0)}
.d2 #contents .doc{ padding:2em 0 6em 0}

.userSt{ width:3em; height:3em; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--siteC2); color:#fff; position:relative}
.userSt .userT1{ font-weight:700}
.userSt .ico{ font-family:xeicon; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:1.75em}
.userSt .ico:before{content:"\eb60"}

.gsSplit > i{ min-width:.375em; animation-name: splitAni; animation-duration: 1s}
@keyframes splitAni{
50% { transform:translateX(1em); opacity:0}
100% {transform:translateX(0); opacity:1}
}

.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}

/**/
div.visualSlider{position: fixed; left:0; top:0; width:100%; margin:0; overflow:hidden}
.scroll div.visualSlider{ z-index:-1}
.visualSlider .el{ position: relative; overflow:hidden; height:100vh; background:#fff}
.visualSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.2)}
.visualSlider .el .mask{ -webkit-mask-image: url(../images/main/visual_mask.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; -webkit-mask-position: right bottom;}
.visualSlider .el .vod{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover}
.visualSlider .el .vod_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:1}
.visualSlider .el .vod_bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.visualSlider .el.swiper-slide-active .vod_wrap:after,
.visualSlider .el.swiper-slide-duplicate-active .vod_wrap:after{ transition:2s; opacity:.1}
.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg{ transition:7s; transform:scale(1) rotate(.001deg)}
.visualSlider .el:nth-child(3n - 1) .bg{ height:120%; transform:scale(1)}
.visualSlider .el.swiper-slide-active:nth-child(3n - 1) .bg,
.visualSlider .el.swiper-slide-duplicate-active:nth-child(3n - 1) .bg{ transform:translateY(-16.6666%) rotate(.001deg)}
.visualSlider .el:nth-child(3n + 2) .bg{ width:120%; left:auto; right:0; transform:scale(1)}
.visualSlider .el.swiper-slide-active:nth-child(3n + 2) .bg,
.visualSlider .el.swiper-slide-duplicate-active:nth-child(3n + 2) .bg{ transform:translateX(16.6666%) rotate(.001deg)}

.visualSlogan_wrap{ position:absolute; left:0; width:100%; bottom:0; height:100%; box-sizing:border-box; z-index:10; display:flex; flex-direction:column}
.visualSlogan_wrap .slogan{ position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%); color:#fff}
.visualSlogan_wrap .slogan .t1{ font-size:3em; font-weight:900}
.visualSlogan_wrap .slogan .locator{ width:24em; background:rgba(255,255,255,.9); box-shadow:0 0 3em rgba(0,0,0,.2); border-radius:1em; padding:2em; padding-bottom:2.5em; margin-top:1.5em}
.visualSlogan_wrap .slogan .locator .tt1{ font-weight:700; color:var(--siteC); font-size:1.25em; margin-bottom:.25em}
.visualSlogan_wrap .slogan .locator .search{ position:relative}
.visualSlogan_wrap .slogan .locator .search .inp{ box-sizing:border-box; width:100%; background:var(--siteC); border:.5em solid var(--siteC); height:3.5em; border-radius:2em; padding:0 4em 0 1.5em; color:#fff}
.visualSlogan_wrap .slogan .locator .search .inp::placeholder{ color:#fff}
.visualSlogan_wrap .slogan .locator .search .btn{ position:absolute; right:.25em; top:50%; transform:translateY(-50%); border:none; background:none; width:3em; height:3em; text-align:center; background:#fff; border-radius:50%; color:var(--siteC)}
.visualSlider_control{ position:absolute; left:0; bottom:0; width:100%; display:flex; align-items:flex-end; color:#fff}
.visualSlider_control .control{ margin-left:auto; padding-bottom:.5em}
.visualSlider_control .paging{ width:5em; text-align:center;}
.visualSlider_control .paging .swiper-pagination-current{ font-weight:700}

.mainScroll{ color:#fff}
.mainScroll .line{ position:relative; display:block; height:4em; overflow:hidden}
.mainScroll .line:before{ content:""; position:absolute; left:50%; top:0; height:100%; width:1px; background:#fff;}
.mainScroll .dot{ position:absolute; left:50%; transform:translateX(-50%); top:0; width:.5em; height:.5em; background:#fff; border-radius:50%}
.mainScroll .tt{ display:block; transform:rotate(90deg); font-size:.75em; margin:0 0 2.5em 0}
.mainScroll .tt .xi{ font-size:1.5em; margin-right:.25em}

.wave { height: 0; width:100%; position:absolute; bottom:0; left:0; background:rgba(1,83,155,1)}
.wave .el { background: url(../images/inc/wave.svg) repeat-x; position: absolute; top: -198px; width: 6400px; height: 198px; animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0);}
.wave .el:nth-of-type(2) { top: -175px; animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -2s infinite; opacity: .7;}
@keyframes wave {
  0% {margin-left: 0;}
  100% {margin-left: -1600px;}
}
@keyframes swell {
  0%, 100% {transform: translate3d(0,-25px,0);}
  50% {transform: translate3d(0,5px,0);}
}

.main_fix{ padding:100vh 0 0 0; overflow:hidden}
.main_fix .wrap_tit{ background: linear-gradient(0deg, rgba(1,83,155,.9) 50%, rgba(1,83,155,1) 100%); padding:5vh 0 0 0; color:#fff; overflow:hidden}
/*
.main_fix .wrap_tit .t1{ font-size:8em; font-weight:900; text-transform:uppercase; letter-spacing:-.05em}
.main_fix .wrap_tit .t2{ font-size:2.5em; margin-top:.5em}
*/
.main_fix .wrap_con{ background:rgba(1,83,155,.9); position:relative; padding:1em 0 10em 0}
.main_fix .wrap_con .fixImg{ position:sticky; left:0; top:0; height:100vh; box-sizing:border-box; padding:5em 0; width:100%; transform-origin:right top}
.main_fix .wrap_con .fixImg .wrap_in{ position:relative; height:100%}
.main_fix .wrap_con .fixImg .wrap_in .list{ position:relative; height:100%; overflow:hidden}
.main_fix .wrap_con .fixImg .fixT{ position:absolute; right:100%; bottom:0; padding-right:1em}
.main_fix .wrap_con .fixImg .fixT .t1{ font-size:4em; writing-mode: vertical-rl; font-weight:900; -webkit-text-stroke: 1px rgba(255,255,255,.5); color:transparent}
.main_fix .wrap_con .fixImg .in{ position:absolute; left:0; top:100%; width:100%; height:100%; transition:1s; border-radius:10em 0}
.main_fix .wrap_con .fixImg .in.in0{ top:0}
.main_fix.on1 .wrap_con .fixImg .in1,
.main_fix.on2 .wrap_con .fixImg .in2{ top:0}
.main_fix .wrap_con .con_wrap{ position:relative}

.main_contents{ overflow:hidden}
.main_box{ padding:5em 0 6em 0}

.main_tit{ margin-bottom:1em; display:flex; flex-direction:column; gap:.75em 0}
.main_tit .t0{ font-size:7em; font-weight:900; letter-spacing:-.05em}
.main_tit .t1{ font-weight:700; font-size:3em; letter-spacing:-.025em}
.main_tit .t2{ font-weight:700; font-size:1.75em}
.main_tit .tt{ font-size:1.125em; opacity:.7; line-height:1.5}
.main_tit.white{ color:#fff}

.main_program{ display:flex; gap:0 2em}
.main_program > li{ flex:1 1 calc(0% - 1.5em)}
.main_program > li .wrap_in{ display:flex; flex-direction:column; gap:1em 0}
.main_program > li .wrap_in .img_wrap{ border-radius:1em; overflow:hidden}
.main_program > li .wrap_in .img_wrap .bg{ transition:.3s}
.main_program > li .wrap_in .con_wrap{ color:#fff; display:flex; flex-direction:column; align-items:center; gap:1em 0}
.main_program > li .wrap_in .con_wrap .t1{ font-weight:700; font-size:1.25em; width:100%; text-align:center}
.main_program > li .wrap_in .con_wrap .more{ border:1px solid rgba(255,255,255,.2); border-radius:2em; padding:.5em 1.5em; font-weight:500; font-size:.938em; transition:.3s}
.main_program > li .wrap_in .con_wrap .more:hover{ background:var(--siteC2)}
.main_program > li .wrap_in:hover .img_wrap .bg{ transform:scale(1.2)}

.main_about{ display:flex; gap:0 4em; align-items:center}
.main_about .tit_wrap{ width:45%}
.main_about .tit_wrap .more_wrap{ margin-top:2em}
.main_about .con_wrap{ flex:1 1 0%; min-width:0}
.main_about .count{ display:flex; gap:0 2em; color:#fff}
.main_about .count > li{ flex:1 1 calc(0% - 1.5em)}
.main_about .count > li .in{ display:flex; flex-direction:column; align-items:center; gap:1em 0}
.main_about .count > li .in .ico{ height:4.5em}
.main_about .count > li .in .con{ width:100%; text-align:center}
.main_about .count > li .in .con .t1{ font-weight:500; font-size:1.063em}
.main_about .count > li .in .con .t2{ font-weight:900; font-size:2em}

.main_bt_wrap{ background:#fff}
.mainNewsSlide_wrap{ overflow:hidden}
.mainNewsSlide_wrap .control{ margin-top:.5em; gap:.25em}
.mainNewsSlide_wrap .control .paging{ margin-right:2em}
.mainNewsSlide{ overflow:visible !important}
.mainNewsSlide .wrap_in .img_wrap{ border-radius:1em; overflow:hidden; position:relative}
.mainNewsSlide .wrap_in .con_wrap{ box-sizing:border-box; padding:1.5em 0; display:flex; flex-direction:column; gap:.75em 0}
.mainNewsSlide .wrap_in .con_wrap .cate{ font-weight:700; text-transform:uppercase; font-size:.938em}
.mainNewsSlide .wrap_in .con_wrap .tit{ font-size:1.313em; font-weight:700}
.mainNewsSlide .wrap_in .con_wrap .tt{ line-height:1.4; color:#777}

.main_more{ position: relative; display: inline-flex; padding: 0 2em; height:3.5em; color: #fff; align-items:center; font-weight:700; background: transparent; cursor: pointer; transition: ease-out 0.5s; border: 1px solid #fff; border-radius: .5em; box-shadow: inset 0 0 0 0 #fff; font-size:1.063em}
.main_more .arrow{ margin-left:.5em; transition:.3s}
.main_more .arrow:before{ content:"\e93f"}
.main_more:hover{ color: white; box-shadow: inset 0 -7em 0 0 var(--siteC); border-color:transparent}
.main_more:hover .arrow{ transform:translateX(.5em)}
.main_more:active { transform: scale(0.9);}
.main_more.c1{ background:var(--siteC2)}
.main_more.c1:hover{ box-shadow: inset 0 -7em 0 0 var(--siteC2)}
.main_more.s1{ font-size:1.25em}

.main_value .list{ display:flex; gap:0 4em}
.main_value .list > li{ flex: 1 1 calc(0% - 3em)}
.main_value .list > li .in{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5em 0; color:#fff}
.main_value .list > li .in .ico{ font-size:3em}
.main_value .list > li .in .twrap{ display:flex; flex-direction:column; gap:.25em 0; text-align:center}
.main_value .list > li .in .t1{ opacity:.7; font-weight:500; font-size:.875em}
.main_value .list > li .in .t2{ font-weight:500; font-size:1.125em}

.circle{ padding-bottom:100%; position: relative; overflow: hidden; border-radius : 50%;   background: var(--siteC); box-shadow: 0 .5em 1em rgba(0,0,0,0.1); transform: translate3d(0, 0, 0); animation: circleAniWrap 1.5s infinite linear; animation-direction:alternate}
.circle:before,
.circle:after{ content:""; width: 200%; height: 200%; position: absolute; top: 70%; left: -30%; border-radius: 43%;  animation-name: circleAniIn; animation-duration: 4s; animation-timing-function:linear; animation-iteration-count: infinite; background: rgba(255, 255, 255, .2)}
.circle:after{ animation-duration: 8s; background: rgba(255, 255, 255, 0.2); left: auto; right:-50%}
@keyframes circleAniWrap{ 
	100% { transform:translateY(-20%)}
}
@keyframes circleAniIn{ 
	100% { transform: rotate(-360deg);}
}
.circle2{ padding-bottom:100%; position: relative; overflow: hidden; border-radius : 50%;   background: var(--siteC); box-shadow: 0 .5em 1em rgba(0,0,0,0.1); transform: translate3d(0, 0, 0);}
.circle2:before,
.circle2:after{ content:""; width: 200%; height: 200%; position: absolute; top: 70%; left: -30%; border-radius: 43%;  animation-name: circleAniIn; animation-duration: 4s; animation-timing-function:linear; animation-iteration-count: infinite; background: rgba(255, 255, 255, .2)}
.circle2:after{ animation-duration: 8s; background: rgba(255, 255, 255, 0.2); left: auto; right:-50%}
@keyframes circleAniWrap{ 
	100% { transform:translateY(-20%)}
}
@keyframes circleAniIn{ 
	100% { transform: rotate(-360deg);}
}
.main_value .list > li:nth-child(2) .circle{ animation-delay:.6s; filter:brightness(1.2)}
.main_value .list > li:nth-child(3) .circle{ animation-delay:.4s}
.main_value .list > li:nth-child(4) .circle{ animation-delay:.2s; filter:brightness(1.2)}
.main_value .list > li:nth-child(5) .circle{ animation-delay:.8s}

.main_contact{ position:relative; text-align:center}
.main_contact .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden}
.main_contact .wrap_bg .bg{position:absolute; left:0; top:0; width:100%; height:100%; background-attachment:fixed}
.main_contact .wrap_bg:after{ content:""; position:absolute; width:100%; left:0; top:0; height:100%; background:var(--siteC); opacity:.4}
.main_contact .wrap_in{ position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:0 4vw}
.main_contact .list{ display:flex; gap:0 1em}
.main_contact .list > li > a{ width:12em; padding:1.5em; border-radius:1em; color:#fff; display:flex; gap:0 .5em; justify-content:center; align-items:center}
.main_contact .list > li.m1 > a{ background:var(--siteC2)}
.main_contact .list > li.m2 > a{ background:var(--siteC)}
.main_contact .list > li.m3 > a{ background:midnightblue}
.main_contact .list > li > a .ico{ font-size:1.5em}
.main_contact .list > li > a .arrow{ font-size:0; transition:.3s}
.main_contact .list > li > a .arrow:before{ content:"\e907"}
.main_contact .list > li > a:hover .arrow{ font-size:1.125em; margin-left:.5em}
.main_contact .list > li > a .t1{ font-weight:500; font-size:1.375em}

.gsClass.tShow{ overflow:hidden}
.gsClass.tShow > .el{ transform:translateY(-150%); transition:1s}
.gsClass.tShow.on .el{transform:translateY(0)}

.gsClass.imgShow{overflow:hidden; background:rgba(0,0,0,.05);}
.gsClass.imgShow .el{ transition:1s;}
.gsClass.imgShow.left .el{ transform:translateX(-100%)}
.gsClass.imgShow.right .el{ transform:translateX(100%)}
.gsClass.imgShow.top .el{ transform:translateY(-100%)}
.gsClass.imgShow.bottom .el{ transform:translateY(100%)}
.gsClass.imgShow.on .el{transform:translate(0)}

.gsClass.listShow .el{ transform:translateY(20%) scale(.8); opacity:0; transition:.5s}
.gsClass.listShow.up .el{ transform:translateY(50%)}
.gsClass.listShow.on .el{ transform:translateY(0) scale(1); opacity:1}
.gsClass.listShow.on .el:nth-child(1){ transition-delay:.2s}
.gsClass.listShow.on .el:nth-child(2){ transition-delay:.4s}
.gsClass.listShow.on .el:nth-child(3){ transition-delay:.6s}
.gsClass.listShow.on .el:nth-child(4){ transition-delay:.8s}
.gsClass.listShow.on .el:nth-child(5){ transition-delay:1s}
.gsClass.listShow.on .el:nth-child(6){ transition-delay:1.2s}
.gsClass.listShow.on .el:nth-child(7){ transition-delay:1.4s}
.gsClass.listShow.on .el:nth-child(8){ transition-delay:1.6s}
.gsClass.listShow.on .el:nth-child(9){ transition-delay:1.8s}
.gsClass.listShow.on .el:nth-child(10){ transition-delay:2s}

/**/
.mem_tit:not(:first-child){ margin-top:2em}
.mem_tit .t1{ font-weight:600; font-size:1.25em}
.mem_tit.line{ display:flex; align-items:center; gap:0 1em}
.mem_tit.line:before,
.mem_tit.line:after{ content:""; flex:1 1 1%; height:1px; background:#ddd}
.mem_tit.line:not(.ac):before{ display:none}

/**/
.login_wrap{ width:28em; margin:0 auto; max-width:100%; border-radius:1em; padding:2em 2.5em 3em 2.5em; background:#fff; box-shadow:0 0 1em rgba(0,0,0,.1)}
.login_wrap.w1{ width:32em}
.login_wrap.w2{ width:62em}

.mem_form{ display:flex; flex-direction:column; gap:1em 0}
.mem_form:not(:first-child){ margin-top:1.5em}
.mem_form > li{ width:100%; display:flex; flex-direction:column; gap:.5em 0}
.mem_form > li > *{ width:100%}
.mem_form > li .tit .t1{ font-weight:600; font-size:1.063em}
.mem_form > li .con{ display:flex; gap:.5em; flex-wrap:wrap}
.mem_form > li .con > *{ flex:1}
.mem_form > li.row{ flex-direction:row; gap:.25em}
.mem_form > li.row > *{ flex:1 1 1%; width:auto}
.mem_link{ display:flex; algin-items:center; gap:0 1.5em}
.mem_link > li > a{ color:#666; display:flex; align-items:center; gap:0 .125em; border-bottom:1px solid transparent; line-height:1.1}
.mem_link > li > a:hover{ border-color:#111; color:#111}
.mem_link > li.point > a{ font-weight:700; color:#111}

.form_tab{ display:flex}
.form_tab > li{ flex:1}
.form_tab > li > a{ display:flex; align-items:center; justify-content:center; flex-direction:column; height:3em; border-bottom:3px solid #ddd; color:#999}
.form_tab > li > a .t1{ font-weight:700; font-size:1.25em}
.form_tab > li.on > a{ border-bottom-color:var(--siteC); color:var(--siteC)}

.agree_wrap{ border-radius:.5em; padding:3em; color:#666; line-height:1.5; box-sizing:border-box}
.agree_wrap *{ vertical-align:baseline}
.agree_wrap.h1{ overflow-y:auto; height:10em}
.agree_wrap.st1{ padding:1em; font-size:.875em; background:#f5f5f5; border:1px solid #ddd;}

.join_agree{ display:flex; flex-direction:column; gap:1em 0; padding:1em; border:1px solid #ddd; box-sizing:border-box; border-radius:.5em}
.join_agree > li .agreeBtn{ font-size:.875em; color:#666}
.join_agree > li .agree_wrap{ display:none}
.join_agree > li.on .agreeBtn .xi{ transform:rotate(180deg)}
.join_agree > li.on .agree_wrap{ display:block}

.fin_wrap{ padding:2.5em; border:1px solid #ddd; border-radius:.5em; box-sizing:border-box; display:flex; flex-direction:column; gap:2em 0}
.fin_wrap .tit1{ font-size:1.5em; font-weight:500}
.fin_wrap .tit2{ font-size:1.375em; font-weight:700}
.fin_wrap .tt1{ font-size:1.063em; color:#666; line-height:1.6}
.fin_wrap .tt2{ font-size:1.125em; font-weight:500}
.fin_wrap .bg{ padding:1.5em; background:#f5f5f5}

/**/
.myPageWrap.grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap:1em}
.myPageWrap .section{ display:flex; flex-direction:column}
.myPageWrap .section .wrapIn{ border-radius:1em; box-shadow:0 0 1em rgba(0,0,0,.1); padding:2em; display:flex; flex-direction:column; box-sizing:border-box; height:100%}
.myPageWrap .section .wrapIn.p1{ padding:1em}
.myPageWrap .section .wrapTit{ display:flex; align-items:center; padding-bottom:1em; line-height:1}
.myPageWrap .section .wrapTit .t1{ font-weight:800; font-size:1.375em}
.myPageWrap .section .wrapTit .line{ position:relative}
.myPageWrap .section .wrapTit .line:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:30%; background:var(--siteC); opacity:.2}
.myPageWrap .section .wrapTit .line > i{ position:relative}
.myPageWrap .section .wrapTit .more{ border:1px solid var(--siteC); padding:.375em 1em; border-radius:2em; color:var(--siteC); font-size:.875em; font-weight:500; margin-left:auto; transition:.3s}
.myPageWrap .section .wrapTit .more:before{ content:"더보기"}
.myPageWrap .section .wrapTit .more:after{ content:"+"; margin-left:.5em}
.myPageWrap .section .wrapTit .more:hover{ background:var(--siteC); color:#fff}
.myPageWrap .section .wrapTit .mgL{ margin-left:auto}
.myPageWrap .section .wrapCon{ flex:1 1 0%; min-height:0}
.myPageWrap .section.span2{ grid-column: span 2}
.myPageWrap .section.span3{ grid-column: span 3}
.myPageWrap .section.span4{ grid-column: span 4}
.myPageWrap .h100{ height:100%; box-sizing:border-box}

.myPageWrap.flex{ display:flex; flex-wrap:wrap; gap:2em}
.myPageWrap.flex .section{ width:100%}

.feedback_summary{ display:flex; flex-wrap:wrap; gap:1em}
.feedback_summary > li{ width:calc(33.33% - .6666em); position:relative}
.feedback_summary.d1 > li{ width:calc(25% - .75em)}
.feedback_summary > li .resize{ padding-bottom:56.25%}
.feedback_summary > li .in{ background-color:#f5f5f5; box-sizing:border-box; overflow:hidden; border-radius:.5em}
.feedback_summary > li .link{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1}
.feedback_summary > li .control{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; display:flex; align-items:center; justify-content:center; gap:0 .5em; background:rgba(0,0,0,.5); border-radius:.5em; opacity:0; transition:.3s}
.feedback_summary > li .control .st{ width:3em; height:3em; text-align:center; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center}
.feedback_summary > li .control .st:before{ font-family:xeicon}
.feedback_summary > li .control .st.modify:before{ content:"\ea39"}
.feedback_summary > li .control .st.delete:before{ content:"\e96f"}
.feedback_summary > li:hover .control{ opacity:1}
.feedback_summary > li:after{ font-family:xeicon; position:absolute; left:-.5em; top:.5em; width:2em; height:2em; border-radius:50%; display:flex; justify-content:center; align-items:center; background:#000; color:#fff}
.feedback_summary > li.ment .in{ padding:1.25em 0 1.25em 2em}
.feedback_summary > li.ment .in .tt{ color:#666; height:100%; line-height:1.5; padding-right:1.5em}
.feedback_summary > li.ment .in.tt > div{ padding-right:.5em}
.feedback_summary > li.vod .in,
.feedback_summary > li.photo .in{ padding-bottom:56.25%}
.feedback_summary > li.vod .in iframe{ position:absolute; left:0; top:0; width:100%; height:100%}
.feedback_summary > li.ment:after{ content:"\e9d7"; background: var(--fMent)}
.feedback_summary > li.vod:after{ content:"\ec23"; background: var(--fVod)}
.feedback_summary > li.photo:after{ content:"\ea50"; background: var(--fPhoto)}
.feedback_summary > li .in .nodata{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5em 0; color:#999}
.feedback_summary > li .in .nodata:before{ content:"\ea15"; font-family:xeicon; font-size:3em; opacity:.5}
.feedback_summary > li .in .nodata:after{ content:attr(data-tt)}
.feedback_summary > li.vod .in .nodata:before{content:"\ea18"}
.feedback_summary > li.photo .in .nodata:before{content:"\ea4a"}
.feedback_summary.noIco > li:after{ display:none}

.feedback_summary.st1{ gap:2em}
.feedback_summary.st1 > li{ width:calc(33.33% - 1.3333em)}
.feedback_summary.st1 > li:after{ left:0; top:.75em; transform:translateX(-50%) scale(1.1)}
.feedback_summary.st1 > li.ment .in{ padding:1em 0 1em 2em}
.feedback_summary.st1 > li.ment .in .tt{ font-size:1em}
.feedback_summary.st1 > li.size1{ width:100%}
.feedback_summary.st1 > li.size1 .resize{ padding-bottom:0; height:auto}
.feedback_summary.st1 > li.size1 .resize .in{ position:relative}
.feedback_summary.st1 > li.size1 .resize .in .tt{ max-height:12em}

.calendarW{ display:flex; flex-direction:column; gap:1em 0}
.calendarTit{ display:flex; align-items:center; justify-content:space-between}
.calendarTit .nav{ font-family:xeicon; width:2em; height:2em; display:flex; align-items:center; justify-content:center}
.calendarTit .prev:before{content:"\e93b"}
.calendarTit .next:before{content:"\e93e"}
.calendarTit .t1{ font-weight:700; font-size:1.125em}
.calendarSt{ display:flex; flex-wrap:wrap; height:100%; min-height:11em}
.calendarSt > li{ width:14.28%}
.calendarSt > li .in{ text-align:center}
.calendarSt > li:nth-child(7n){ color:#06C}
.calendarSt > li:nth-child(7n - 6){ color: #f31e3a}
.calendarSt > li.head{ height:1em}
.calendarSt > li.head .tit{ font-size:.875em; font-weight:500}
.calendarSt > li.body .tit{ font-size:.875em; font-weight:800}
.calendarSt > li.on .tit > a{ vertical-align:top; position:relative; color:#fff}
.calendarSt > li.on .tit > a:before{ content:""; position:absolute; left:50%; top:50%; width:1.75em; height:1.75em; border-radius:50%; background: var(--siteC3); transform:translate(-50%, -50%)}
.calendarSt > li.on .tit > a > i{ position:relative}
.calendarSt > li.on.today .tit > a:after{content:""; position:absolute; left:50%; top:50%; width:2em; height:2em; border-radius:50%; border:2px solid var(--siteC3); transform:translate(-50%, -50%)}

.quest_summary{ display:flex; gap:0 3em; align-items:center}
.quest_summary .lv{ width:10em}
.quest_summary .lv img{ width:100%}
.quest_summary .questEl{ flex:1 1 0%; min-width:0; padding:1em 0 0 0}
.questEl{ display:flex; flex-wrap:wrap; gap:1em}
.questEl > li{ width:calc(50% - .5em)}
.questEl.d0 > li{ width:100%}
.questEl.d1 > li{ width:calc(25% - .75em)}
.questEl > li .in{ display:flex; border-radius:.5em; box-shadow:0 0 1em rgba(0,0,0,.1); padding:1em; align-items:center; gap:1em; position:relative; border:1px solid transparent}
.questEl > li .bar{ flex:1 1 0%; min-width:0; height:1em; background:#eee; display:flex; flex-direction:row-reverse; border-radius:1em; transform:scaleX(0); transform-origin:0% 50%; transition:.5s}
.load .questEl > li .bar{ transform:scale(1)}
.questEl > li .bar .step{ width:20%; height:100%; background:none; position:relative}
.questEl > li .bar .step:last-child{ border-top-left-radius:1em; border-bottom-left-radius:1em}
.questEl > li .bar .step.on,
.questEl > li .bar .step:first-child{ border-top-right-radius:1em; border-bottom-right-radius:1em}
.questEl > li .bar .step.on,
.questEl > li .bar .step.on ~ .step{ background:var(--siteC)}
.questEl > li .bar .step.on:first-child:before{ content:"\e961"; font-family:xeicon; position:absolute; right:0; bottom:50%; font-size:1.5em; transform:translate(75%, 0); color:var(--siteC2); line-height:1}
.questEl > li .bar .step1.on,
.questEl > li .bar .step1.on ~ .step{ background:var(--q1)}
.questEl > li .bar .step2.on,
.questEl > li .bar .step2.on ~ .step{ background:var(--q2)}
.questEl > li .bar .step3.on,
.questEl > li .bar .step3.on ~ .step{ background:var(--q3)}
.questEl > li .bar .step4.on,
.questEl > li .bar .step4.on ~ .step{ background:var(--q4)}
.questEl > li .bar .step5.on,
.questEl > li .bar .step5.on ~ .step{ background:var(--q5)}
.questEl > li .bar .step:after{ content:""; position:absolute; right:0; top:50%; transform:translate(50%, -50%); background:#bbb; width:.25em; height:.25em; border-radius:50%}
.questEl > li:not(.fin) .bar .step:first-child:after{ display:none}
.questEl > li .bar .step.on ~ .step:after{ background:#fff}
.questEl > li .bar .step.on:after{ background:var(--siteC2); font-size:2em}
.questEl > li .tit{ width:6em; position:relative; display:flex; flex-direction:column; gap:.25em 0; line-height:1.1}
.questEl > li .tit .state{ font-size:.813em; color:var(--siteC3); display:flex; gap:0 .25em}
.questEl > li .tit .state .no{ color: #F36; font-weight:800}
.questEl > li .tit .t1{ font-weight:700; font-size:.938em}
.questEl > li.fin .in{ opaicty:.8; background:#f5f5f5; box-shadow:none}
.questEl > li.fin .in:after{ content:"complete"; text-transform:uppercase; position:absolute; right:0; bottom:0; transform:translate(25%, -25%) rotate(-25deg); padding:.25em .5em; border-radius:1em; font-weight:900; color:var(--siteC); border:1px solid var(--siteC); opacity:0; font-size:1em; transition:.3s}
.load .questEl > li.fin .in:after{ opacity:1; font-size:.625em; transition-delay:.5s}
.questEl > li.fin .tit .t1{ text-decoration:line-through; color:#999}
.questEl > li.fin .tit .state{ color:var(--siteC)}
.questEl > li.before .tit .t1{ color:#999}

.questEl > li.add{ display:flex; flex-wrap:wrap}
.questEl > li.add .in{ flex:1 1 0%; min-width:0; border-radius:.5em 0 0 .5em}
.questEl > li.add .control button{ height:100%}
.questEl > li.add .control button:last-child{ border-radius:0 .5em .5em 0;}
.questEl > li.add.before .tit .t1{ color:#333}
.questEl > li.add.col{ }
.questEl > li.add.col .in{ border-radius:.5em .5em 0 0 }
.questEl > li.add.col .control{ display:flex; width:100%}
.questEl > li.add.col .control button{ border-radius:0; height:2.5em; flex:1}
.questEl > li.add.col .control button:first-child{ border-radius:0 0 0 .5em}
.questEl > li.add.col .control button:last-child{ border-radius:0 0 .5em 0}

.questEl.st1{ flex-direction:column; gap:.5em}
.questEl.st1 > li{ width:100%}
.questEl.st1 > li .in{ background:#fff; flex-direction:column; padding:.75em .5em; gap:.25em}
.questEl.st1 > li .in .tit{ order:-1; width:100%}
.questEl.st1 > li .in .bar{ flex:0 0 auto; width:100%}
.questEl.st1 > li.fin{ order:1}
.questEl > li.fin.st1 .in{ border-color:#ddd; cursor:pointer}
.questEl > li.fin.st1 .in:after{ right:50%; bottom:50%; transform:translate(50%, 50%) rotate(-25deg); z-index:2; background:var(--siteC); color:#fff}
.questEl > li.fin.st1 .in:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; opacity:.5; z-index:1; border-radius:.5em}
.questEl > li.fin.st1 .in .bar{ filter:grayscale(1)}
.questEl > li.fin.st1 .in .bar .step:first-child:before{ opacity:0}
.questEl > li.fin.st1 .in .tit .t1{ text-decoration:none}
.questEl > li.fin.st1 .in .tit .state .no{ display:none}
.questEl > li.fin.st1:hover .in{ border-color:var(--siteC); background:#fff; box-shadow:0 0 1em rgba(0,0,0,.1)}
.questEl > li.fin.st1:hover .in:after,
.questEl > li.fin.st1:hover .in:before{ display:none}
.questEl > li.fin.st1:hover .in .bar{ filter:none}
.questEl > li.fin.st1:hover .in .bar .step:first-child:before{ opacity:1}
.questEl > li.fin.st1:hover .in .tit .t1{ color:#111}
.questEl > li.fin.st1:hover .in .tit .state .no{ display:inline-block}

.questElTit{ content:attr(data-tit); display:flex; align-items:center; gap:0 .5em; margin-bottom:.5em}
.questElTit.c1{ color:var(--siteC2)}
.questElTit.c2{ color:var(--siteC)}
.questElTit.c3{ color:var(--siteC3)}
.questElTit .t1{ font-weight:500; font-size:1.125em}
.questElTit .t2{ font-weight:900; font-size:1.125em}

.questElW{ display:flex; flex-direction:column; flex-wrap:wrap; gap:3em 2em; align-items:flex-start}
.questElW > li{ width:100%}

.questMap{ display:flex; flex-direction:row-reverse; align-items:center; gap:0 4em; padding:1em 2em; position:relative}
.questMap:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); border-radius:1em; opacity:.05}
.questMap > li{flex:1 1 1%; position:relative}
.questMap .el{ filter:grayscale(1); opacity:.5; position:relative}
.questMap .el:before{ content:"\e90b"; position:absolute; right:100%; top:0; height:100%; width:2em; font-size:2em; display:flex; align-items:center; justify-content:center; font-family:xeicon; color:var(--siteC2)}
.questMap > li.el:last-child:before{ display:none}
.questMap .fin .el.e1:before{ transform:rotate(-30deg) translate(-25%, 25%)}
.questMap .fin .el.e2:before{ transform:rotate(30deg) translate(-25%, -25%)}
.questMap .el .img{ display:flex; justify-content:center}
.questMap .el .img img{ width:100%; max-width:5em}
.questMap li.fin{display:flex; flex-direction:column; gap:2em 0}
.questMap .el.on .img{animation-name: fadeAni; animation-duration: 2s; animation-iteration-count: infinite}
.questMap .el.on,
.questMap .el.on ~ li,
.questMap .fin.on ~ li{ filter:none; opacity:1}

.pointCard{ border-radius:.5em; padding-bottom:50%; position:relative; background: linear-gradient(180deg,var(--siteC) 0%, navy 100%); z-index:1; box-shadow:0 0 1em rgba(0,0,0,.1)}
.pointCard .wrap_in{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; box-sizing:border-box; padding:2em; color:#fff}
.pointCard .wrap_in .in{ display:flex; flex-direction:column; gap:.5em 0}
.pointCard .wrap_in .t1{ font-size:.938em}
.pointCard .wrap_in .tt_price{ font-size:1.375em}
.pointCardW .menu{ display:flex; margin:0 .75em; border-radius:0 0 .5em .5em; box-shadow:0 .25em 1em rgba(0,0,0,.1)}
.pointCardW .menu > li{ flex:1 1 1%}
.pointCardW .menu > li > a{ display:flex; align-items:center; justify-content:center; gap:0 .25em; height:2.5em; position:relative; color:#666; line-height:1}
.pointCardW .menu > li > a .ico{ font-size:1em}
.pointCardW .menu > li > a .tt{ font-size:.875em; font-weight:500}
.pointCardW .menu > li:not(:last-child) > a:after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:40%; background:#ccc;}
.pointCardW .menu > li.point > a{ color:var(--siteC)}
.pointCardW .menu > li.point > a .tt{ font-weight:700}
.pointCardW .menu > li.point > a .ico:before{content:"\ea05"}
.pointCardW .menu > li.list > a .ico:before{content:"\eb1f"}

.pointTopW{ display:flex; gap:1em}
.pointTopW .pointCardW{ width:25%}
.pointTopW .pointCardW .pointCard{ padding-bottom:0; height:100%}
.pointTopW .pointCardW .pointCard .wrap_in .in{ font-size:1.375em}
.pointTopW .bannerW{ flex:1 1 0%; min-width:0; border-radius:.5em; overflow:hidden; position:relative}
.pointTopW .bannerW .resize{ padding-bottom:25%}
.pointTopW .bannerW .twrap{ position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; padding:2em 6%; display:flex; align-items:center; color:#fff}
.pointTopW .bannerW .twrap .in{ display:flex; align-items:flex-start; flex-direction:column; gap:1em 0;}
.pointTopW .bannerW .twrap .t1{ font-weight:700; font-size:2em}
.pointTopW .bannerW .twrap .point{ font-weight:900; color:#ffa3d0}
.pointTopW .bannerW .twrap .more{ border:1px solid #fff; border-radius:.5em; padding:.5em 1.5em; display:flex; align-items:center; gap:.5em}

.instructorInfo{ display:flex; align-items:center; gap:.5em; background:#555; padding:.5em 1em; border-radius:.5em}
.instructorInfo .userSt{ font-size:.625em}
.instructorInfo .info{ flex:1 1 0%; min-width:0; color:#666}
.instructorInfo .info .t1{ font-weight:500; color:rgba(255,255,255,.5)}
.instructorInfo .info .t1 .point{ font-size:1.063em; font-weight:700; vertical-align:baseline; color:#fff}

.starW{ display:flex; flex-direction:row-reverse; position:relative; justify-content:space-between; line-height:1}
.starW.w1{ width:10em}
.starW label{ cursor:pointer; position:relative}
.starW label input{ width:0; height:0; position:absolute; z-index:-1; opacity:0}
.starW label:after,
.starW label.half:before{ content:"\ea0f"; font-family:xeicon; font-size:1.5em; color:#ccc}
.starW label.half:before{ position:absolute; left:0; width:50%; overflow:hidden; height:100%; top:0; color:var(--siteC2)}
.starW label.starOn:after,
.starW label.starOn ~ label:after{ color:var(--siteC2)}
.starW label.starOn.half:after{ color:#ccc}

.starWno{ display:flex; gap:0 1em; align-items:center; padding:1em 0; font-size:.875em}
.starWno .no{ font-weight:700; font-size:1.125em; color:var(--siteC)}

.instructorReview{ display:flex; flex-direction:column; gap:.25em 0}
.instructorReview textarea.input_st{ height:5em}
.instructorReview textarea.input_st.h1{ height:8em}
.instructorReview .starW{ padding:.5em 1em; background:#fff; border-radius:.5em; border:1px solid #ddd}
.instructorReview .btnW{ font-size:.938em}
.instructorReview .textW{ display:flex; gap:.5em}
.instructorReview .textW textarea{ flex:1 1 0%; min-width:0}
.instructorReview .textW .btnW{ width:6em; font-size:1em}
.instructorReview .textW button{ height:100%}

.quest_table{ display:flex; border:1px solid #ddd; border-radius:.5em}
.quest_table .cell{ flex:1 1 1%; position:relative}
.quest_table .cell:before{ content:""; position:absolute; left:50%; top:calc(50% + 1px); width:100%; height:100%; transform:translate(-50%, -50%); z-index:-1}
.quest_table .cell.on{ z-index:1}
.quest_table .cell.on:before{ border:3px solid var(--siteC3); box-shadow:0 0 1em rgba(0,0,0,.1); border-radius:.5em}
.quest_table .cell:not(.lv_SQ){ border-right:1px dashed #ccc}
.quest_table .cell .tabW{ height:3em; border-bottom:1px dashed #ccc; display:flex; align-items:center; justify-content:center; position:relative; color:var(--siteC3)}
.quest_table .cell .tabW .t1{ font-weight:900; font-size:1.125em}
.quest_table .cell.on .tabW{ background:var(--siteC3); color:#fff}
.quest_table .cell .conW{ padding:.75em; position:relative}
.quest_table .cell.on ~ .cell:before{ background:#f5f5f5}
.quest_table .cell.lv_SQ{ order:10; border-radius:0 .5em .5em 0}
.quest_table .cell.lv_SQ:before{ background:var(--siteC2); opacity:.1}
.quest_table .cell.lv_SQ .tabW{ background:var(--siteC2); color:#fff}
.quest_table .cell.on ~ .cell .tabW{ color:#999}
.quest_table .cell.on ~ .cell .questEl{ display:none}
.quest_table .cell.on ~ .cell .conW:before{ content:"\eb3f"; font-family:xeicon; font-size:2em; color:var(--siteC3); display:block; text-align:center; margin:.5em 0}
.quest_table .cell.on ~ .cell .conW:after{ content:"퀘스트를 완료하고 \A 다음 레벨에 \A 도전하세요!"; white-space: pre-wrap; color:#666; font-size:.938em; display:block; text-align:center}

.questTabW .questTab{ display:flex}
.questTab > li{ flex:1 1 1%; position:relative}
.questTab > li > a{ height:3em; display:flex; align-items:center; justify-content:center; position:relative; color:var(--siteC4); border:1px solid #ddd; border-bottom:none; margin:0 -1px -1px 0}
.questTab > li > a .link{ position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer}
.questTab > li > a .t1{font-weight:900; font-size:1.125em}
.questTab > li.off > a{ color:#999; background:#f5f5f5}
.questTab > li.off > a .link{ display:none}
.questTab > li.on > a{ background:var(--siteC4); border-color:var(--siteC4); color:#fff}
.questTab > li.lv_SQ > a{ color:var(--siteC2)}
.questTab > li.lv_SQ.on > a{ color:#fff; background:var(--siteC2); border-color:var(--siteC2)}

.questCon{ position:relative }
.questCon > li{ display:none; box-sizing:border-box; border-radius:0 0 .5em .5em; border:1px solid var(--siteC4)}
.questCon > li.on{ display:block}
.questCon > li .wrap_in{ padding:2em; min-height:5em}
.questCon > li.lv_SQ{ border-color:var(--siteC2)}

.feedbackSliderW,
.feedbackSlider,
.feedbackSlider .el,
.feedbackSlider .wrap_in{ width:100%; height:100%}
.feedbackSlider .wrap_in{ display:flex}
.feedbackSlider .el.img .wrap_in img{ object-fit:contain; margin:auto; max-height:100%}
.feedbackSlider .el.vod .vodW{ width:100%}
.feedbackSlider .el.vod .vodW iframe{ position:absolute; left:0; top:0; width:100%; height:100%}
.feedbackSlider .el.vod .vodW video{ position:absolute; left:0; top:0; width:100%; height:100%}
.feedbackSliderW{ position:relative}

.timeLine{position:relative; border:1px solid var(--siteC)}
.timeLine:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); border-radius:1em; opacity:.05}
.timeLine > li{ display:flex; position:relative}
.timeLine > li:not(:first-child){ border-top:1px solid var(--siteC)}
.timeLine > li:not(:first-child) .head{ display:none}
.timeLine .wTime,
.timeLine .head{ background:#fff}
.timeLine .head{ border-bottom:1px solid var(--siteC)}
.timeLine .wTime{ width:5em; box-sizing:border-box; border-right:1px dotted var(--siteC)}
.timeLine .wTime .body{ text-align:center; padding:.75em; box-sizing:border-box; position:relative}
.timeLine .wTime .body:after{ content:""; position:absolute; left:100%; top:50%; width:.5em; height:.5em; background:var(--siteC); transform:translate(-50%, -50%); border-radius:50%}
.timeLine .wLane{ flex:1 1 0%; min-width:0; box-sizing:border-box}
.timeLine .wLane .lane{ display:flex}
.timeLine .wLane .lane > li{ max-width:20%; flex:1; box-sizing:border-box; position:relative}
.timeLine .wLane .lane > li:before{ content:""; position: absolute; height:100%; width:100%; border:1px dotted var(--siteC); border-top:none; border-left:none; bottom:-1px; right:-1px}
.timeLine .head{ height:2em; display:flex; align-items:center; justify-content:center}
.timeLine .wT1{ font-size:.813em; font-weight:700}
.timeLine .wT2{ font-size:.938em; font-weight:900}
.timeLine .wLane .wT1{ color:var(--siteC)}
.timeLine .wTime .time{ display:flex; align-items:center; gap:0 .25em}
.timeLine .wTime .time:before{content:"\ea1f"; font-family:xeicon; font-size:1.375em; font-weight:normal}
.timeLine .wLane .body{ padding:.5em; position:relative}

.timeLine.st1 > li .head{ display:none}
.timeLine.st1 .wTime{ width:4em}
.timeLine.st1 .wLane .lane{ flex-wrap:wrap}
.timeLine.st1 .wLane .lane > li{ flex:0 0 auto; width:12.5%}

.stuCog{ background:#fff; border-radius:.5em .5em 0 0; box-shadow:0 0 1em rgba(0,0,0,.1); padding:.5em}
.stuCog .wIn{ display:flex; flex-wrap:wrap; align-items:center; gap:.25em}
.stuCog .user{ display:flex; align-items:center}
.stuCog .user .img{ height:1.75em}
.stuCog .user .t1{ font-weight:700; font-size:.938em; line-height:1}
.stuCog .btn{ box-sizing:border-box; width:100%; border-radius:.25em; background:#f5f5f5; border:1px solid #ddd; padding:0.5em; height:2em; display:flex; align-items:center; color:#777}
.stuCog .btn:after{ content:"\e916"; margin-left:auto}
.stuCog .btn:not([data-rs]):after{ font-family:xeicon;}
.stuCog .btn .t1{ font-weight:700; font-size:.875em}
.stuCog .btn .rs:before{ content:"+ "; font-weight:normal}
.stuCog .btn.on{ color:#fff}
.stuCog .btn.on:after{ content:"\e92b"}
.stuCog .btn.on[data-rs]:after{ content:"+ " attr(data-rs); font-size:.875em; font-weight:700}
.stuCog .btn.on.vod{background: var(--fVod)}
.stuCog .btn.on.ment{background: var(--fMent)}
.stuCog .btn.on.photo{background: var(--fPhoto)}
.stuCog .btn.quest{ border-color:var(--siteC2); background:#fff; color:#111}
.stuCog .btn.quest:after{ content:"\e986"}
.stuCog .btn:hover,
.stuCog .btn.on:hover{ background:#fff}
.stuCog .btn:hover.vod{ color:var(--fVod); border-color: var(--fVod)}
.stuCog .btn:hover.ment{ color:var(--fMent); border-color: var(--fMent)}
.stuCog .btn:hover.photo{ color:var(--fPhoto); border-color: var(--fPhoto)}
.stuCog .btn:hover.quest{ background:var(--siteC2); color:#fff}
.stuCog .absent{ text-align:right; width:100%; padding-right:.25em}
.stuCog .absent label{ font-size:.875em}
.stuCog .absent label span{ font-weight:700}
.stuCog .absent .lane{ float:left; margin-top:5px; margin-right:5px; font-size:.813em; vertical-align:bottom;}
.stuCog.st1{ box-shadow:none; border:1px solid #ddd; border-radius:0}
.stuCog.st1 .user{ order:-2}
.stuCog.st1 .absent{ order:-1; width:auto; margin-left:auto}
.stuCog.st1 .btn{ width:calc(50% - .125em)}

.stuCog.fin{ position:relative}
.stuCog.fin .wIn{ opacity:.6}
.stuCog.fin:hover .wIn{ opacity:1}
.stuCog.fin:after{ font-family:xeicon; content:"\e92b"; position:absolute; right:0; top:0; color:var(--siteC2); transform:scale(2)}

.stuCogTit{ padding:.25em .5em; background:var(--siteC4); color:#fff; text-align:center; border-radius:.5em .5em 0 0}
.stuCogTit .t1{ font-weight:700; font-size:.875em}
.stuCogBtn{ display:flex; gap:.25em; border-radius:0 0 .5em .5em; overflow:hidden}
.stuCogBtn .btn{ flex:1; padding:.375em; font-weight:500; font-size:.875em; border:1px solid rgba(255,255,255,.1); background:var(--siteC); color:#fff}
.stuCogBtn .btn.c1{ background:var(--siteC4)}

.feedbackWriteSlide .el{ width:15em; margin-right:.75em}