@charset "utf-8";
@import url(../font/Pretendard/Pretendard.css);
@import url(../font/notosansKR/notosansKR.css);
@import url(../font/SUIT/SUIT.css);

:root {
	--shadow-box-shadow:0 1rem 3rem 0 rgba(0,41,80,.07);
	--shadow-ai-shadow:0 1rem 3rem 0 rgba(97,40,211,.08);
}
html {--pagePad : 6rem;}
html.fs4,
html.fs5 {--pagePad : 2rem;}

@media all and (max-width:1400px) {
	html {--pagePad :2rem;}
	html.fs4,
	html.fs5 {--pagePad : 2rem;}
}
@media all and (max-width:1024px) {
	html {--pagePad :4rem;}
	html.fs4,
	html.fs5 {--pagePad : 2rem;}
}
@media all and (max-width:780px) {
	html {--pagePad :3rem;}
	html.fs4,
	html.fs5 {--pagePad : 2rem;}
}
@media all and (max-width:640px) {
	html {--pagePad :1rem;}
	html.fs4,
	html.fs5 {--pagePad : 1rem;}
}
@media all and (max-width:320px) {
	html {--pagePad :.5rem;}
	html.fs4,
	html.fs5 {--pagePad : 1rem;}
}


/*-----------------------------------------------
	 all_layout.css (사용자 공용 레이아웃)
-----------------------------------------------*/

body {min-height:100vh;}
body.stop_scrolling {overflow:hidden;}

#wrap {overflow:hidden;}

.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#333; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}

.readyBox {display:block; position:relative; border-radius:16px; background:#F8F8FC; padding:102px 20px 130px;}
.readyBox > div {display:block; max-width:640px; margin:0 auto; background:url(../img/etc/img_ready.png) no-repeat 50% 50%; background-size:contain;}
.readyBox > div:before {content:""; display:block; position:relative; padding-top:48.59375%;}
.readyBox > div > * {position:absolute; top:0; left:0; text-indent:-999px; overflow:hidden; opacity:0;}

/* content */
#conts {position:relative; max-width:190rem; margin-left:auto; margin-right:auto;}
#conts img {max-width:100%; margin:0 auto;}

/* 위로 이동 버튼 */
.btn_scroll_top {position:fixed; right:6%; bottom:6%; display:none;}


/**********************************************************
	Default Style
**********************************************************/

body {font-size:1.8rem; color:#222; font-family:'Pretendard'; line-height:1.4; background:url(../img/common/bak_body.png) no-repeat top 0 left 50% / 100% auto;}
body.popup_wrap {background:#fff !important;}
body.popup_wrap #conts {padding:3rem;}
body.popup_wrap.has-close-btn #conts {padding-bottom:11rem;}
body.popup_wrap .popupControl {display:block; position:fixed; left:0; right:0; bottom:0; z-index:999; border-top:1px solid #eaeaea; background:#fff; padding:2rem 3rem; text-align:right;}


#wrap {padding:10rem 0 0;}

#clickRippleArea {position:fixed; left:0; top:0; z-index:9999; width:100%; height:100%; pointer-events:none; overflow:hidden;}
#clickRippleArea .clickRipple {position:absolute; left:0; top:0; width:20px; height:20px; margin:-10px 0 0 -10px; pointer-events:none;}
#clickRippleArea .clickRipple:before,
#clickRippleArea .clickRipple:after {content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:rgba(0,119,179,0.3); opacity:0.45; -webkit-transform:scale(0); transform:scale(0);}
#clickRippleArea .clickRipple:before {-webkit-animation:clickRippleEffect 0.7s ease-out forwards; animation:clickRippleEffect 0.7s ease-out forwards;}
#clickRippleArea .clickRipple:after {-webkit-animation:clickRippleEffect 0.7s ease-out 0.18s forwards; animation:clickRippleEffect 0.7s ease-out 0.18s forwards;}

@-webkit-keyframes clickRippleEffect {
	0% {opacity:0.45; -webkit-transform:scale(0);}
	100% {opacity:0; -webkit-transform:scale(8);}
}
@keyframes clickRippleEffect {
	0% {opacity:0.45; transform:scale(0);}
	100% {opacity:0; transform:scale(8);}
}

.pageGotoTopScroll {position:relative; padding:5rem 0; z-index:5;}
.pageGotoTopScroll button {display:block; position:relative; width:8rem; height:8rem; margin:0 auto; font-size:1.4rem; font-weight:700; background:#0077B3; color:#fff; border-radius:100%; box-shadow:0 0 0 1rem rgba(0,119,179,0.1);}
.pageGotoTopScroll button:before {content:""; display:block; position:relative; width:1.8rem; height:1.8rem; background:url(../img/common/ico_btn.svg) no-repeat 50% 50% / contain; margin:0 auto .6rem;}

@media all and (max-width:1024px) {
	.pageGotoTopScroll {position:fixed; right:1rem; bottom:11rem; padding:0;}
	.pageGotoTopScroll button {width:6rem; height:6rem; text-indent:-999px; overflow:hidden; opacity:.7; transition:.3s opacity; -webkit-transition:.3s opacity;}
	.pageGotoTopScroll button:before {position:absolute; top:50%; left:50%; margin:-.9rem 0 0 -.9rem;}
	.pageGotoTopScroll button:focus,
	.pageGotoTopScroll button:active {opacity:1;}
}

/**********************************************************
	Header
**********************************************************/

#headerWrap {display:block; position:fixed; top:0; left:0; right:0; background:#fff; box-shadow:var(--shadow-box-shadow); z-index:99999; transition:.3s transform; -webkit-transition:.3s -webkit-transform;}
body.scrolling #headerWrap {transform:translateY(-100%); -webkit-transform:translateY(-100%);}

#headerWrap .inner {display:flex; height:10rem; align-items:center; justify-content:center;}
#headerWrap .logo,
#headerWrap .side {position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:1;}
#headerWrap .logo {left:var(--pagePad);}
#headerWrap .side {right:var(--pagePad); z-index:12;}
#headerWrap .side {display:flex; align-items:center; width:46rem;}
#headerWrap .logo a {display:block; width:28rem; height:5.2rem; text-indent:-999px; overflow:hidden; background:url(../img/common/logo.svg) no-repeat 50% 50% / contain;}

@media all and (min-width:1025px) {
	#headerWrap.no-member .side {width:29.7rem;}
}

#lnbWrap,
#lnbWrap > ul {display:flex; align-items:center;}
#lnbWrap .home {display:block; width:4.2rem; height:4.2rem; overflow:hidden; text-indent:-999px; border-radius:9em; margin-right:1rem; background:url(../img/common/ico_lnb_home.svg) no-repeat 50% 50% / contain;}
#lnbWrap > ul > li {flex-grow:1; position:relative; width:14rem;}
#lnbWrap > ul > li > a {display:flex; align-items:center; justify-content:center; position:relative; height:10rem; font-size:2.2rem; color:#313131; font-weight:700;}
#lnbWrap > ul > li > a.active {color:#002950; font-weight:900;}
#lnbWrap > ul > li > a span {position:relative; padding:3.5rem 0;}
#lnbWrap > ul > li > a span:after {content: ""; width:100%; height:3px; position:absolute; right:0; bottom:0; background-color:#004BAE; transform:scale(0, 1); transform-origin:right center; transition:transform 500ms ease; cursor:default;}
#lnbWrap > ul > li:hover > a span:after,
#lnbWrap > ul > li a:hover span:after{transform:scale(1, 1); transform-origin:left center;}
#lnbWrap > ul > li > a.active span:after {content: ""; width:100%; height:3px; position:absolute; right:0; bottom:0; background-color:#004BAE; transform:scale(1, 1); transition: none;}
#lnbWrap > ul > li:hover > a > span,
#lnbWrap > ul > li > a:hover > span {color:#002950; font-weight:900;}

#lnbWrap .lnb_sub .tit {display:none;}
#lnbWrap .lnb_sub li + li {margin-top:1rem;}
#lnbWrap .lnb_sub a {display:block; text-align:center; padding:.7rem 0; font-size:1.8rem; white-space:nowrap; color:#555; font-weight:600;}
#lnbWrap .lnb_sub a.active {color:var(--point_color); font-weight:800;}
#lnbWrap .lnb_sub li:hover a {color:var(--point_color); font-weight:800;}

#lnbWrap {position:relative; z-index:11;}

#headerWrap::after {content: ""; position: absolute; top:100%; left:0; width:100%; height:35rem; background: #FCFDFE url(../img/common/bak_depth2.png) no-repeat top 50% right 0 / auto 100%; border-top: 1px solid #ddd; box-shadow:0 8px 15px rgba(0, 0, 0, 0.08); z-index:10; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;}
#headerWrap.active::after {opacity:1; visibility:visible; transform:translateY(0); transition:opacity 0.3s ease, transform 0.3s ease, visibility 0s;}
#lnb > li {position:relative; z-index:11;}
#lnb > li .depth02 {display:none; padding:2.5rem 0 0; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:180px; background:transparent; text-align:center; transition:opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;}
#lnb > li.on .depth02 {display:block;}

#lnbWrap li .depth03 {display:none !important;}

#headerWrap .txtSizeControl {position:relative; margin-right:1rem; flex-shrink:0;}
#headerWrap .txtSizeControl button {text-indent:-9999px; overflow:hidden;}
#headerWrap .txtSizeControl .detail {display:flex; align-items:center; width:6.4rem; height:6.4rem; background:#eef5fa; border-radius:9em; justify-content:end; position:absolute; right:0; top:0; visibility:hidden; overflow:hidden; opacity:0; transition:.3s all; -webkit-transition:.3s all;}
#headerWrap .txtSizeControl.open .detail {visibility:visible; opacity:1; width:27.8rem; padding:1.1rem; padding-right:7.3rem;}
#headerWrap .txtSizeControl .detail {position:absolute; right:0; top:-2rem; visibility:hidden; opacity:0; transition:.3s all; -webkit-transition:.3s all;}
#headerWrap .txtSizeControl .detail .close-control {position:absolute; top:1.1rem; right:1.1rem; width:4.2rem; height:4.2rem; background:#002950 url(../img/common/ico_close_w.svg) no-repeat 50% 50% / 2rem auto; border-radius:100%; margin-left:2rem;}
#headerWrap .txtSizeControl .detail .small {font-size:15px; color:#222;}
#headerWrap .txtSizeControl .detail .big {font-size:24px; color:#222; font-weight:800;}
#headerWrap .txtSizeControl .detail ul {display:flex; position:relative; align-items:center; margin:0 1rem; width:11.6rem; justify-content:space-between;}
#headerWrap .txtSizeControl .detail ul:before {content:""; display:block; position:absolute; left:2px; right:2px; height:.4rem; background:#C9D8E3;}
#headerWrap .txtSizeControl .detail ul li {display:block; position:relative; width:1rem; height:1.2rem;}
#headerWrap .txtSizeControl .detail ul button {position:absolute; left:50%; top:50%; width:1rem; height:1rem; background:#fff; border-radius:100%; border:1px solid #9AABB7; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transition:.3s transform; -webkit-transition:.3s -webkit-transform;}
#headerWrap .txtSizeControl .detail ul button.on {background:var(--point_color); border-color:var(--point_color); transform:translate(-50%,-50%) scale(1.2); -webkit-transform:translate(-50%,-50%) scale(1.2);}

#headerWrap .loginControl {position:relative; flex-shrink:0; margin-right:1rem;}

#headerWrap .loginControl button,
#headerWrap .txtSizeControl .open-control {display:flex; align-items:center; text-indent:0; padding:0 1.4rem; font-size:1.6rem; color:#002950; font-weight:700; white-space:nowrap;}
#headerWrap .loginControl button:before,
#headerWrap .txtSizeControl .open-control:before {content:""; display:block; position:relative; width:2.6rem; height:2.6rem; margin-right:.4rem; background:no-repeat 50% 50% / 2.6rem auto; flex-shrink:0;}
#headerWrap .loginControl button:before {background-image:url(../img/common/ico_login.svg);}
#headerWrap .loginControl button.loginout:before {background-image:url(../img/common/ico_logout.svg);}
#headerWrap .txtSizeControl .open-control:before {background-image:url(../img/common/ico_txt_control.svg);}

#headerWrap .alarmControl {position:relative; width:6.4rem; flex-shrink:0;}
#headerWrap .alarmControl button {text-indent:-9999px; overflow:hidden;}
#headerWrap .alarmControl .open-control {display:block; position:relative; width:6.4rem; height:6.4rem; background:url(../img/common/ico_alarm.svg) no-repeat 50% 50% / 2.6rem auto; border-radius:100%;}
#headerWrap .alarmControl.is-new .open-control:after {content:""; display:block; position:absolute; top:50%; left:50%; width:.8rem; height:.8rem; background:#E84149; margin:-1.8rem 0 0 .9rem; border-radius:100%;}
#headerWrap .alarmControl .detail {visibility:hidden; opacity:0; transition:.3s all; -webkit-transition:.3s all;}
#headerWrap.active .alarmControl .open-control {background-color:#EEF5FA;}

#headerWrap .profArea {display:flex; align-items:center; margin-left:1em; font-size:2rem;}
#headerWrap .profArea > * {display:block; position:relative;}
#headerWrap .profArea .pic {width:2.1em; height:2.1em; border-radius:100%; overflow:hidden; flex-shrink:0; margin-right:.65em;}
#headerWrap .profArea .pic > a {display:block; position:relative; width:100%; height:100%;}
#headerWrap .profArea .pic img {display:block; position:relative; width:100%; height:100%; object-fit:cover;}
#headerWrap .profArea .detail {width:5em;}
#headerWrap .profArea .detail > * {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#headerWrap .profArea .detail strong {font-size:.9em; line-height:1.5em; color:#002950; font-weight:800; letter-spacing:-.02em;}
#headerWrap .profArea .detail span {font-size:.8em; line-height:1.5em; color:#555;}



/**********************************************************
	Header : Font size Layout
**********************************************************/

/* fs1 ~ fs3 */
@media all and (min-width:1801px) {
	html.fs1 #headerWrap .inner,
	html.fs2 #headerWrap .inner,
	html.fs3 #headerWrap .inner {max-width:calc(190rem + (var(--pagePad) * 2)); margin-left:auto; margin-right:auto; position:relative;}
	html.fs1 #headerWrap #lnbWrap,
	html.fs2 #headerWrap #lnbWrap,
	html.fs3 #headerWrap #lnbWrap {margin-left:-8rem;}
}
@media all and (max-width:1800px) and (min-width:1025px) {
	html.fs1 #headerWrap,
	html.fs2 #headerWrap,
	html.fs3 #headerWrap {padding-left:calc(var(--pagePad) + 30rem); padding-right:calc(var(--pagePad) + 47rem);}
	html.fs1 #headerWrap.no-member,
	html.fs2 #headerWrap.no-member,
	html.fs3 #headerWrap.no-member {padding-right:calc(var(--pagePad) + 30.7rem);}
}
@media all and (max-width:1600px) and (min-width:1025px) {
	html.fs1 #lnbWrap > ul > li,
	html.fs2 #lnbWrap > ul > li,
	html.fs3 #lnbWrap > ul > li {width:12rem;}
	html.fs1 #lnbWrap > ul > li > a,
	html.fs2 #lnbWrap > ul > li > a,
	html.fs3 #lnbWrap > ul > li > a {font-size:2rem;}
}
@media all and (max-width:1600px) and (min-width:1401px) {
	html.fs1 #headerWrap,
	html.fs2 #headerWrap,
	html.fs3 #headerWrap {padding-left:calc(var(--pagePad) + 26rem);}
	html.fs1 #headerWrap .logo a,
	html.fs2 #headerWrap .logo a,
	html.fs3 #headerWrap .logo a {width:24rem;}
}
@media all and (max-width:1400px) and (min-width:1025px) {
	html.fs1 #headerWrap,
	html.fs2 #headerWrap,
	html.fs3 #headerWrap {padding-left:calc(var(--pagePad) + 14rem); padding-right:calc(var(--pagePad) + 47rem);}
	html.fs1 #headerWrap.no-member,
	html.fs2 #headerWrap.no-member,
	html.fs3 #headerWrap.no-member {padding-right:calc(var(--pagePad) + 30.7rem);}
	
	html.fs1 #headerWrap .logo a,
	html.fs2 #headerWrap .logo a,
	html.fs3 #headerWrap .logo a {width:12rem; background-image:url(../../common/img/common/logo_f.svg); background-position:0 50%;}
	html.fs1 #headerWrap .loginControl button,
	html.fs2 #headerWrap .loginControl button,
	html.fs3 #headerWrap .loginControl button,
	html.fs1 #headerWrap .txtSizeControl .open-control,
	html.fs2 #headerWrap .txtSizeControl .open-control,
	html.fs3 #headerWrap .txtSizeControl .open-control {padding:0 .5rem;}
}
@media all and (max-width:1270px) and (min-width:1025px) {
	html.fs1 #headerWrap,
	html.fs2 #headerWrap,
	html.fs3 #headerWrap {padding-right:calc(var(--pagePad) + 33rem);}
	html.fs1 #headerWrap.no-member,
	html.fs2 #headerWrap.no-member,
	html.fs3 #headerWrap.no-member {padding-right:calc(var(--pagePad) + 15.6rem);}
	html.fs1 #headerWrap .side,
	html.fs2 #headerWrap .side,
	html.fs3 #headerWrap .side {width:32rem;}
	html.fs1 #headerWrap.no-member .side,
	html.fs2 #headerWrap.no-member .side,
	html.fs3 #headerWrap.no-member .side {width:14.6rem;}
	
	html.fs1 #headerWrap .loginControl button,
	html.fs2 #headerWrap .loginControl button,
	html.fs3 #headerWrap .loginControl button,
	html.fs1 #headerWrap .txtSizeControl .open-control,
	html.fs2 #headerWrap .txtSizeControl .open-control,
	html.fs3 #headerWrap .txtSizeControl .open-control {text-indent:-999px; overflow:hidden; width:2.6rem; padding:0;}
	html.fs1 #headerWrap .txtSizeControl,
	html.fs2 #headerWrap .txtSizeControl,
	html.fs3 #headerWrap .txtSizeControl {margin-right:2rem;}
	html.fs1 #headerWrap .profArea,
	html.fs2 #headerWrap .profArea,
	html.fs3 #headerWrap .profArea {font-size:1.9rem;}
}


/* fs4 */
html.fs4 #lnbWrap > ul > li {width:12rem;}
@media all and (min-width:1801px) {
	html.fs4 #lnbWrap {margin-left:-22rem;}
}
@media all and (max-width:1800px) and (min-width:1025px) {
	html.fs4 #headerWrap {padding-left:calc(var(--pagePad) + 30rem); padding-right:calc(var(--pagePad) + 47rem);}
}
@media all and (max-width:1640px) and (min-width:1025px) {
	html.fs4 #headerWrap {padding-left:calc(var(--pagePad) + 26rem);}
	html.fs4 #headerWrap .logo a {width:24rem;}
	
	html.fs4 #lnbWrap > ul > li > a {font-size:2rem;}
}
@media all and (max-width:1580px) and (min-width:1025px) {
	html.fs4 #headerWrap {padding-left:calc(var(--pagePad) + 14rem); padding-right:calc(var(--pagePad) + 44rem);}
	html.fs4 #headerWrap .side {width:43rem;}
	html.fs4 #headerWrap .logo a {width:12rem; background-image:url(../../common/img/common/logo_f.svg); background-position:0 50%;}
	html.fs4 #headerWrap .loginControl button,
	html.fs4 #headerWrap .txtSizeControl .open-control {padding:0 .5rem;}
	html.fs4 #headerWrap .profArea {font-size:1.8rem;}
	html.fs4 #lnbWrap > ul > li > a {font-size:1.8rem;}
}
@media all and (max-width:1380px) and (min-width:1025px) {
	html.fs4 #headerWrap {padding-right:calc(var(--pagePad) + 30rem);}
	html.fs4 #headerWrap .side {width:29rem;}
	html.fs4 #headerWrap .alarmControl .open-control,
	html.fs4 #headerWrap .alarmControl {width:5rem; height:5rem;}
	html.fs4 #headerWrap .loginControl button,
	html.fs4 #headerWrap .txtSizeControl .open-control {text-indent:-999px; overflow:hidden; width:2.6rem; padding:0;}
	html.fs4 #headerWrap .txtSizeControl {margin-right:2rem;}
}


/* fs5 */

@media all and (min-width:2100px) {
	html.fs5 #lnbWrap {margin-left:-22rem;}
}
@media all and (max-width:2100px) and (min-width:1025px) {
	html.fs5 #lnbWrap > ul > li {width:11rem;}
	html.fs5 #headerWrap {padding-left:calc(var(--pagePad) + 30rem); padding-right:calc(var(--pagePad) + 47rem);}
}
@media all and (max-width:1840px) and (min-width:1025px) {
	html.fs5 #headerWrap {padding-left:calc(var(--pagePad) + 26rem);}
	html.fs5 #headerWrap .logo a {width:24rem;}
	html.fs5 #lnbWrap > ul > li > a {font-size:2rem;}
}
@media all and (max-width:1720px) and (min-width:1025px) {
	html.fs5 #headerWrap {padding-left:calc(var(--pagePad) + 14rem); padding-right:calc(var(--pagePad) + 44rem);}
	html.fs5 #headerWrap .side {width:43rem;}
	html.fs5 #headerWrap .logo a {width:12rem; background-image:url(../../common/img/common/logo_f.svg); background-position:0 50%;}
	html.fs5 #headerWrap .loginControl button,
	html.fs5 #headerWrap .txtSizeControl .open-control {padding:0 .5rem;}
	html.fs5 #headerWrap .profArea {font-size:1.8rem;}
	html.fs5 #lnbWrap > ul > li > a {font-size:1.8rem;}
}
@media all and (max-width:1430px) and (min-width:1025px) {
	html.fs5 #headerWrap {padding-right:calc(var(--pagePad) + 30rem);}
	html.fs5 #headerWrap .side {width:29rem;}
	html.fs5 #headerWrap .alarmControl .open-control,
	html.fs5 #headerWrap .alarmControl {width:5rem; height:5rem;}
	html.fs5 #headerWrap .loginControl button,
	html.fs5 #headerWrap .txtSizeControl .open-control {text-indent:-999px; overflow:hidden; width:2.6rem; padding:0;}
	html.fs5 #headerWrap .txtSizeControl {margin-right:2rem;}
}
@media all and (max-width:1250px) and (min-width:1025px) {
	html.fs5 #headerWrap {padding-right:calc(var(--pagePad) + 23rem);}
	html.fs5 #headerWrap .side {width:22rem;}
	html.fs5 #headerWrap .profArea .pic {display:none;}
	html.fs5 #headerWrap .txtSizeControl {margin-right:1rem;}
	html.fs5 #headerWrap .loginControl {margin-right:0;}
	html.fs5 #lnbWrap > ul > li > a {font-size:1.7rem;}
	
}



/**********************************************************
	Header : Mobile
**********************************************************/

@media all and (max-width:1024px) {
	.copyFileUrl {display:none !important;}
	#headerWrap {padding:0 var(--pagePad); height:calc((56 / 18) * 1.8rem); transition:.3s margin; -webkit-transition:.3s margin;}
	#wrap {padding:calc((56 / 18) * 1.8rem) 0 calc((80 / 18) * 1.8rem);}
	
	#headerWrap .inner {height:100%; justify-content:space-between;}
	#headerWrap .logo,
	#headerWrap .side {position:relative; top:auto; right:auto; left:auto; transform:none; -webkit-transform:none; width:auto;}
	#headerWrap .logo a {/*width:calc((26 / 15) * 1.8rem);*/ height:calc((28 / 15) * 1.8rem); /*background-image:url(../img/common/logo_mo.png);*/ background-position-x:0;}
	#headerWrap .profArea {display:none;}
	#headerWrap .side .txtSizeControl {display:none;}
	#headerWrap .alarmControl .open-control {background-color:transparent; background-image:url(../img/common/ico_alarm_mo.svg);}
	#headerWrap .loginControl {margin-right:0;}
	#headerWrap .loginControl button {display:block; background-color:transparent; text-indent:-999px; padding:0; overflow:hidden; height:5rem;}
	#headerWrap .loginControl button:before {position:absolute; top:50%; left:50%; margin:-1.3rem 0 0 -1.3rem;}
	
	#headerWrap .alarmControl {width:auto !important;}
	#headerWrap .alarmControl button,
	#headerWrap .loginControl button {width:5rem !important;} 
	
	#lnbWrap {position:fixed; left:0; right:0; bottom:0; height:calc((80 / 18) * 1.8rem); padding:calc((18 / 18) * 1.8rem) calc((10 / 18) * 1.8rem) calc((14 / 18) * 1.8rem); border-radius:0; background:#fff; border-top:1px solid rgba(0,41,80,.1); transition:.3s transform; -webkit-transition:.3s -webkit-transform;}
	#lnbWrap .home {display:none}
	#lnbWrap > ul {width:100%;}
	#lnbWrap > ul,
	#lnbWrap > ul > li,
	#lnbWrap > ul > li > a {display:flex; align-items:unset;}
	#lnbWrap > ul {height:100%;}
	#lnbWrap > ul > li {width:20%; flex-grow:1;}
	#lnbWrap > ul > li > a {width:100%; flex-direction:column; align-items:center; padding:0 2px; justify-content:space-between;height:auto; font-size:calc((14 / 15) * 1.8rem); text-align:center;}
	#lnbWrap > ul > li > a:before {content:""; display:block; width:calc((22 / 15) * 1.8rem); height:calc((22 / 15) * 1.8rem); margin-bottom:calc((5 / 15) * 1.8rem); background:url(../img/common/spr_lnb_mo.svg) no-repeat 0 0 / auto calc((44 / 15) * 1.8rem);}
	#lnbWrap > ul > li > a[data-menu-name*="권리"]:before {background-position-x:0;}
	#lnbWrap > ul > li > a[data-menu-name*="지도"]:before {background-position-x:calc((22 / 15) * -1.8rem);}
	#lnbWrap > ul > li > a[data-menu-name*="일정"]:before {background-position-x:calc((66 / 15) * -1.8rem);}
	#lnbWrap > ul > li > a[data-menu-name*="커뮤니티"]:before {background-position-x:calc((88 / 15) * -1.8rem);}
	#lnbWrap > ul > li > a[data-menu-name*="마이"]:before {background-position-x:calc((110 / 15) * -1.8rem);}
	#lnbWrap > ul > li > a span {display:block; white-space:nowrap; font-weight:500; overflow:hidden; text-overflow:ellipsis; width:100%; font-size:.9em;}
	#lnbWrap > ul > li.on > a:before,
	#lnbWrap > ul > li > a.active:before {background-position-y:calc((22 / 15) * -1.8rem);}
	#lnbWrap > ul > li.on > a {font-weight:800; color:#002950;}
	#lnbWrap > ul > li > a span {padding:0;}
	#lnbWrap > ul > li > a span:after {display:none;}
	
	
	#lnbWrap > ul > li {position:static;}
	#lnbWrap li .lnb_sub {position:fixed; transform:translateX(0); -webkit-transform:translateX(0); left:2rem; right:2rem;}
	#lnbWrap li.on .lnb_sub {display:block; position:absolute; margin-top:auto; top:auto; bottom:100%; margin-bottom:1rem; background:#fff; border-radius:2rem; box-shadow:var(--shadow-box-shadow); padding:2rem; transition:.3s all; -webkit-transition:.3s all;}
	#lnbWrap #lnb > li.on .depth02 {position:static; transform:none; width:auto; padding:0;}
	#lnbWrap li .lnb_sub li {padding:1rem 0;}
	#lnbWrap li .lnb_sub li + li {border-top:1px solid #e8efff; margin-top:0;}
	#lnbWrap li .lnb_sub a {font-size:2rem; font-weight:600;}
	
	body.scrolling #headerWrap {transform:none; -webkit-transform:none; margin-top:calc((56 / 15) * -1.8rem);}
	body.scrolling #lnbWrap {transform:translateY(100%); -webkit-transform:translateY(100%);}
}
@media all and (max-width:460px) {
	#lnbWrap > ul > li > a span {font-size:.8em;}
}
@media all and (max-width:360px) {
	#wrap {padding-bottom:calc((60 / 15) * 1.8rem);}
	#lnbWrap {padding-top:0; padding-bottom:0; height:calc((60 / 15) * 1.8rem);}
	
	#lnbWrap > ul > li > a {justify-content:center;}
}




/**********************************************************
	Footer
**********************************************************/

#footerWrap {border-top:1px solid rgba(0, 41, 80, 0.1); padding:4rem var(--pagePad);}
#footerWrap > .inner {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4rem;}
#footerWrap .logo {display:block; position:relative; flex-shrink:0; width:9.6rem; height:8rem; background:url(../img/common/logo_f.svg) no-repeat 50% 50% / contain; text-indent:-999px; overflow:hidden;}
#footerWrap .f-link {display:flex; align-items:center; gap:1rem;}
#footerWrap .f-link button {display:block; position:relative; width:17.8rem; height:5rem; text-align:left; border:1px solid var(--default_line); border-radius:1rem; padding:0 4rem 0 2rem; font-size:1.6rem; color:#555; white-space:nowrap;}
#footerWrap .f-link button:after {content:""; display:block; position:absolute; top:50%; margin-top:-.7rem; right:1.5rem; width:1.4rem; height:1.4rem; background:url(../img/common/btn_link.svg) no-repeat 50% 50% / 1.4rem auto;}
#footerWrap .f-link .relation-site {position:relative; z-index:99999;}
#footerWrap .f-link .relation-site button:after {transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}
#footerWrap .f-link .relation-site .panel {position:absolute; left:0; right:0; bottom:100%; margin-bottom:1rem; background:#fff; border-radius:1rem; border:1px solid #002950; padding:2rem 1.6rem; transition:.3s all;-webkit-transition:.3s all;}
#footerWrap .f-link .relation-site .panel li {position:relative; padding-left:1rem;}
#footerWrap .f-link .relation-site .panel li + li {margin-top:1rem;}
#footerWrap .f-link .relation-site .panel li::before {content:''; position:absolute; left:0; top:50%; margin-top:-5px; width:10px; height:10px; background:url(../img/common/bul_dot.svg) no-repeat 50% 50% / auto 100%;}
#footerWrap .f-link .relation-site .panel li a {display:block; font-size:1.7rem; font-weight:600;}
#footerWrap .f-link .relation-site:not(.active) .panel {visibility:hidden; opacity:0; margin-bottom:-2rem;}
#footerWrap .f-link .relation-site.active button {background:#002950; color:#fff;}
#footerWrap .f-link .relation-site.active button:after {transform:rotate(90deg); -webkit-transform:rotate(90deg); background-image:url(../img/common/btn_link_w.svg);}
#footerWrap .info {flex-grow:1; overflow:hidden;}
#footerWrap .info ul {display:flex; align-items:center; flex-wrap:wrap; margin-left:-2rem;}
#footerWrap .info ul li {display:block; position:relative; padding:0 2rem; font-size:1.6rem; color:#777;}
#footerWrap .info ul li:before {content:""; display:block; position:absolute; top:50%; left:0; width:.2rem; height:1.6rem; background:#002950; opacity:.2; margin-top:-.8rem;}
#footerWrap .info ul li:first-child:before {display:none;}
#footerWrap .info ul li strong {font-weight:800; margin-right:1rem;}
#footerWrap .info .copy {margin:1rem 0 0 0; color:#777; font-size:1.5rem;}

@media all and (max-width:360px) {
	#footerWrap .f-link {width:100%; flex-direction:column;}
	#footerWrap .f-link button {width:100%;}
	#footerWrap .f-link .relation-site {width:100%;}
}


/**********************************************************
	Chatbot
**********************************************************/

@-webkit-keyframes swingRotate {0%{-webkit-transform:rotate(0deg);}25%{-webkit-transform:rotate(-2deg);}50%{-webkit-transform:rotate(0deg);}75%{-webkit-transform:rotate(2deg);}100%{-webkit-transform:rotate(0deg);}}
@keyframes swingRotate {0%{transform:rotate(0deg);}25%{transform:rotate(-2deg);}50%{transform:rotate(0deg);}75%{transform:rotate(2deg);}100%{transform:rotate(0deg);}}

#chatWrap {position:fixed; top:9rem; right:0; bottom:0; z-index:99; transition:.3s all; -webkit-transition:.3s all;}
body.scrolling #chatWrap {top:0;}

#chatWrap .pannel {position:absolute; visibility:hidden; top:4rem; right:0; bottom:4rem; border-radius:3rem; width:46rem; padding:0 1rem 1rem; background:linear-gradient(165.39deg,rgba(0, 55, 118, 1) 0%,rgba(0, 124, 169, 1) 100%); box-shadow:var(--shadow-box-shadow); transform:translateX(100%); -webkit-transform:translateX(100%); transition:.3s all; -webkit-transition:.3s all;}
#chatWrap.open .pannel {visibility:visible; transform:translateX(0); -webkit-transform:translateX(0); right:var(--pagePad);}
#chatWrap.open #chatbot_open_pannel {transform:scale(0); -webkit-transform:scale(0); transition:.3s all; -webkit-transition:.3s all;}
#chatWrap.open.expand .pannel {width:110rem; max-width:90vw;}
#chatWrap.open.expand .btnWide {display:none;}

#chatbot_open_pannel {position:absolute; top:9rem; right:2rem;}
#chatbot_open {display:block; position:relative; width:8rem; height:26.2rem; background:url(../img/chatbot/btn_open_chatbot.svg) no-repeat 50% 50% / contain; border-radius:9em; overflow:hidden; box-shadow:var(--shadow-ai-shadow);}
#chatbot_open:after {content:""; display:block; position:absolute; bottom:-2.4rem; left:50%; margin-left:-3rem; width:6rem; height:8.2rem; background:url(../img/chatbot/img_chatbot.png) no-repeat 50% 50% / contain; transition:.3s all; -webkit-transition:.3s all;}
#chatbot_open:hover:after,
#chatbot_open:focus:after {bottom:-1.4rem; -webkit-animation:swingRotate 1s linear infinite; animation:swingRotate 1s linear infinite; -webkit-transform-origin:50% 100%; transform-origin:50% 100%;} 

#chatbot_guide {position:absolute; right:100%; margin-right:2.5rem; bottom:3rem; width:14rem; height:9.9rem; border-radius:1rem 1rem 0 1rem; background:#222; color:#fff; word-break:keep-all; padding:1.5rem;}
#chatbot_guide:after {content:""; display:block; position:absolute; left:100%; bottom:0; width:1.2rem; height:1.5rem; background:url(../img/chatbot/ico_guide_tail.svg) no-repeat 0 100% / contain;}
#chatbot_guide p {font-size:1.5rem; letter-spacing:-0.01em; line-height:1.5;}
#chatbot_guide_close {display:block; position:absolute; top:0; right:0; width:3rem; height:3rem; background:url(../img/chatbot/btn_guide_close.svg) no-repeat 50% 50% / contain;}

#chat-header {display:flex; align-items:center; justify-content:end; height:6rem; padding:1rem 0;}
#chat-header button {display:block; position:relative; width:3.8rem; height:3.8rem; border-radius:100%; background:Rgba(255,255,255,.25) no-repeat 50% 50% / 1.8rem auto; margin-left:.5rem; overflow:hidden;}
#chat-header button:hover,
#chat-header button:focus {overflow:visible;}
#chat-header button.btnWide {background-image:url(../img/chatbot/ico_wide.svg);}
#chat-header button.btnCompact {background-image:url(../img/chatbot/ico_compact.svg);}
#chat-header button .name {display:block; padding:.6rem 1rem; font-size:1.6rem; white-space:nowrap; background:#fff; border:1px solid var(--default_line); border-radius:.5rem; position:absolute; margin-bottom:.8rem; bottom:100%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
#chat-header button .name:after {content:''; width:1rem; height:.6rem; background:url(../img/chatbot/tooltip_tail.svg) no-repeat 50% 0 / contain; position:absolute; top:100%; left:50%; margin:-1px 0 0 -.5rem;}

#chat-body {display:block; position:relative; height:calc(100% - 6rem); background:#fff; border-radius:2rem; padding:2rem;}
#chat-cont {position:relative; height:calc(100% - 8.5rem); overflow:auto; margin-bottom:2.5rem; -ms-overflow-style:none; scrollbar-width:none; transition:.3s all; -webkit-transition:.3s all;}
#chat-body .fake-scrollbar {display:none; position:absolute; top:2rem; right:.5rem; width:.6rem; height:calc(100% - 8.5rem - 2.5rem); z-index:5;}
#chat-body .fake-thumb {position:absolute; left:0; top:0; width:100%; border-radius:.6rem; background:#d7dceb;}

#chat-cont > div[class*="area"] + div[class*="area"] {margin-top:2.5rem;}
#chat-cont > div[class*="area"] {display:flex; flex-direction:column;}
#chat-cont .bot-area {/* padding-right:5.3rem; */ align-items:start;}
#chat-cont .user-area {padding-left:5.3rem; align-items:end; text-align:right;}
#chat-cont .bot-name {display:flex; align-items:center; margin-bottom:.8em;}
#chat-cont .bot-name .bot-img {display:block; width:4.6rem; height:4.6rem; border-radius:100%; overflow:hidden; margin-right:.8rem;}
#chat-cont .bot-name .bot-img img {display:block; position:relative; width:100%; height:100%; object-fit:cover;}
#chat-cont .bot-name p {font-size:1.8rem; line-height:1.5; color:#222; font-weight:800;}
#chat-cont .bot-message {display:block; border:.3rem solid #E7F1F6; background:#fff; padding:1.2rem 1.7rem; border-radius:0 2rem 2rem 2rem; margin-bottom:.8rem; word-break:break-all; font-size:1.7rem;}
#chat-cont .user-cont .talk-box {display:block; border:.3rem solid var(--point_color); background:var(--point_color); color:#fff; padding:1.2rem 1.7rem; border-radius:2rem 0 2rem 2rem; margin-bottom:.8rem; word-break:keep-all; font-size:1.7rem;}
#chat-cont .time {color:#555; font-size:1.5rem; line-height:1.5; padding:0 1rem;}
#chat-cont .loading-wrap {display:flex; align-items:center; flex-wrap:wrap;}
#chat-cont .loading-wrap .loading-txt {font-size:1.6rem; opacity:.6;}
@-webkit-keyframes chatbotSpin {0%{-webkit-transform:rotate(0deg); transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg); transform:rotate(360deg);}}
@keyframes chatbotSpin {0%{-webkit-transform:rotate(0deg); transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg); transform:rotate(360deg);}}
#chat-cont .loader {display:block; flex:0 0 1.8rem; width:1.8rem; height:1.8rem; margin-right:1rem; border:.2rem solid #cfd8ea; border-top-color:#005DC5; border-radius:50%; -webkit-animation:chatbotSpin .8s linear infinite; animation:chatbotSpin .8s linear infinite;}

#chat-footer {display:block; height:6rem; border-radius:9em; overflow:hidden; background:#EEF5FA; padding:.8rem;}
#chat-footer .footer-wrap {display:flex; align-items:center; height:100%;}
#chat-footer .footer-center {display:block; flex-grow:1; height:100%;}
#chat-footer .footer-center input[type="text"] {display:block; width:100%; height:100%; border:none; background:transparent; font-size:1.6rem; padding:0 2rem 0 3rem; outline:0 !important;}
#chat-footer .footer-right {width:4.4rem; flex-shrink:0; margin-left:1rem;}
#chat-footer button {position:relative; width:4.4rem; height:4.4rem; border-radius:100%; background:#002950;}
#chat-footer button img {display:block; position:absolute; top:50%; left:50%; width:2.6rem; margin:-1.3rem 0 0 -1.3rem;}


@media all and (max-width:1024px) {
	#chatWrap {top:calc((56 / 15) * 1.8rem); bottom:calc((80 / 15) * 1.8rem);}
	#chatbot_open_pannel {top:auto; bottom:10rem; right:1rem;}
	#chatbot_open:after {width:5rem; bottom:-2rem; margin-left:-2.5rem;}
	#chatbot_open {background:#6128d3; width:6rem; height:6rem;}
	#chatWrap.open .pannel { border-radius:3rem 0 0 3rem; top:0; bottom:0; right:0;}
}
@media all and (max-width:640px) {
	#chat-header button.btnWide {display:none !important;}
}
@media all and (max-width:480px) {
	#chatWrap {top:0; bottom:0; z-index:999999;}
	#chatWrap.open .pannel {width:100vw; max-width:unset; border-radius:0;}
	#chatbot_open_pannel {top:auto; bottom:20rem;}
	
	#chat-cont .bot-area {padding-right:0;}
}


/**********************************************************
	Sub Layout
**********************************************************/

#m_conts {padding:4rem var(--pagePad) 0; transition:.3s padding; -webkit-transition:.3s padding;}
#container {padding:4rem var(--pagePad) 0; transition:.3s padding; -webkit-transition:.3s padding;}

@media all and (max-width:2120px) and (min-width:1025px) {
	html.fs4.has-quick-chatbot.chatbot-open.chatbot-expand #container,
	html.fs5.has-quick-chatbot.chatbot-open #container {padding-right:calc(var(--pagePad) + 4rem) !important;}
}

@media all and (max-width:1024px) {
	#container {padding-bottom:4rem;}
}
@media all and (min-width:1871px) {
	html.has-quick-chatbot.chatbot-open.chatbot-expand #container {padding-right:calc(var(--pagePad) + 4rem + 110rem);}	
}
@media all and (min-width:1341px) {
	html.has-quick-chatbot.chatbot-open #container {padding-right:calc(var(--pagePad) + 4rem + 46rem);}	
}
@media all and (min-width:641px) {
	html.has-quick-chatbot #container {padding-right:12rem;}
}
@media all and (max-width:1024px) and (min-width:641px) {
	html.has-quick-chatbot #container {padding-right:var(--pagePad);}
}

/**********************************************************
	Login
**********************************************************/
.loginWrap {position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; padding:2rem; background:#fff url(../img/login/bak_body.jpg) no-repeat 50% 50% / cover;}
.loginWrap .loginMid {display:flex; width:100%; min-height:100%; align-items:center; justify-content:center;}
.loginWrap .loginPannel {display:flex; position:relative; max-width:100%; min-height:70rem; width:120rem; padding:1rem; background:rgba(255,255,255,.7); border-radius:3rem; box-shadow:var(--shadow-box-shadow); backdrop-filter:blur(10px);}
.loginWrap .loginPannel .vis {display:block; position:relative; border-radius:2rem; width:44%; background:#DEF1FB url(../img/login/bak_vis2.png) no-repeat 50% 100% / 100% auto;}
.loginWrap .loginPannel .vis:before {content:""; display:block; position:absolute; width:43rem; height:7.5rem; top:10rem; left:50%; margin-left:-22rem; background:url(../img/login/logo.svg) no-repeat 50% 50% / contain;}
.loginWrap .loginPannel .con {display:flex; position:relative; align-items:center; justify-content:center; margin-left:1rem; padding:10rem 2rem; flex-grow:1; transition:.4s all; -webkit-transition:.4s all;}
.loginWrap .loginPannel .con:after {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1;  border-radius:2rem;}

@media all and (min-width:1025px) {
	.loginWrap .loginPannel.load-content .con {opacity:0; transform:translateY(-1rem); -webkit-transform:translateY(-1rem);}
}
@media all and (max-width:1024px) {
	.loginWrap .loginPannel.load-content .con {opacity:0;}
}
.loginWrap .loginPannel .gotoBack {display:block; position:absolute; width:5rem; height:5rem; top:2.5rem; right:3rem; border-radius:100%; text-indent:-999px; overflow:hidden; border:1px solid #DFE4EF; background:url(../img/login/btn_bak.svg) no-repeat 0 50% / auto 100%; transition:.3s all; -webkit-transition:.3s all;}
.loginWrap .loginPannel .gotoBack:hover {background-color:#ABBEC8; background-position:100% 50%; border-color:#ABBEC8;}

@media all and (max-width:1024px) {
	.loginWrap .loginPannel {flex-direction:column; padding:0; background:none; min-height:0; border-radius:0; box-shadow:none; width:calc((560 / 15) * 1.8rem); backdrop-filter:unset; align-items:center;}
	.loginWrap .loginPannel .vis {width:100%; background:transparent;}
	.loginWrap .loginPannel .vis:before {position:relative; top:auto; left:auto; margin:0 auto calc((60 / 15) * 1.8rem); width:100%; height:calc((90 / 15) * 1.8rem);}
	.loginWrap .loginPannel .con {padding:calc((70 / 15) * 1.8rem) calc((40 / 15) * 1.8rem); margin:0;}
	.loginWrap .loginPannel .con:after {background:rgba(255,255,255,.7); border-radius:calc((30 / 15) * 1.8rem); box-shadow:var(--shadow-box-shadow); backdrop-filter:blur(10px);}
}
@media all and (max-width:640px) {
	.loginWrap .loginPannel .con {padding:0; background:none; border-radius:0; box-shadow:none; width:90%;}
	.loginWrap .loginPannel .con:after {display:none;}
	.loginWrap .loginPannel .vis:before {margin-bottom:calc((70 / 15) * 1.8rem);}
}
@media all and (max-width:380px) {
	.loginWrap .loginPannel .vis:before {height:calc((70 / 15) * 1.8rem); margin-bottom:calc((30 / 15) * 1.8rem)}
}

/* Login */
.loginWrap .in {display:block; width:40rem; max-width:100%;}
.loginWrap .in h2 {font-size:3rem; color:#002950; text-align:center; font-weight:700; margin-bottom:1rem;}
.loginWrap .in p {text-align:center; font-size:1.8rem; color:#555; margin-bottom:4rem;}
.loginWrap .in fieldset {display:block; position:relative; margin-bottom:2rem; border-radius:9rem; box-shadow:0 1rem 3rem 0 rgba(0,41,80,.07); background:#fff;}
.loginWrap .in fieldset + fieldset {margin-top:-1rem;}
.loginWrap .in fieldset label {display:block; position:absolute; z-index:1; width:2.8rem; height:2.8rem; top:50%; margin-top:-1.4rem; left:2rem; background:no-repeat 50% 50% / 2.8rem auto; text-indent:-999px; overflow:hidden;}
.loginWrap .in input[type="text"],
.loginWrap .in input[type="password"] {display:block; position:relative; width:100%; border-radius:16.2rem; padding-left:7rem; border:none; font-size:1.8rem; height:6.4rem; z-index:0;}
.loginWrap .in fieldset.f-id label {background-image:url(../img/login/ico_id.svg) !important;}
.loginWrap .in fieldset.f-pw label {background-image:url(../img/login/ico_pw.svg) !important;}
.loginWrap .in fieldset.f-pw input[type="text"],
.loginWrap .in fieldset.f-pw input[type="password"] {padding-right:5rem;}
.loginWrap .in fieldset.f-pw .btnPwView {display:block; position:absolute; top:50%; margin-top:-1.4rem; right:2rem; width:2.8rem; height:2.8rem; text-indent:-999px; overflow:hidden; background:url(../img/login/ico_passwrd_view.svg) no-repeat 50% 50% / contain;}
.loginWrap .in fieldset.f-pw .btnPwView[aria-pressed="true"] {background-image:url(../img/login/ico_passwrd_view_off.svg);}

.loginWrap .in .btn {width:100%; border-radius:18rem; text-align:center; font-size:2rem; height:6.4rem; box-shadow:0 2rem 6rem 0 rgba(0,41,80,.07); font-weight:600; margin-bottom:2rem;}
.loginWrap .in ul {display:flex; align-items:center; justify-content:center; flex-wrap:wrap;}
.loginWrap .in ul > li {display:block; position:relative; padding:0 2rem;}
.loginWrap .in ul a {display:block; position:relative; font-size:1.6rem; color:#555;}
.loginWrap .in ul li + li:before {content:""; display:block; position:absolute; left:0; top:50%; width:1px; height:1.6rem; margin-top:-.8rem; background:#002950; opacity:.2;}
.loginWrap .in input:-webkit-autofill,
.loginWrap .in input:-webkit-autofill:hover,
.loginWrap .in input:-webkit-autofill:focus,
.loginWrap .in textarea:-webkit-autofill,
.loginWrap .in select:-webkit-autofill {-webkit-box-shadow:0 0 0 1000px #fff inset !important; box-shadow:0 0 0 1000px #fff inset !important; -webkit-text-fill-color:#000 !important; transition:background-color 9999s ease-in-out 0s;}

@media all and (max-width:1024px) {
	.loginWrap .in {width:calc((400 / 15) * 1.8rem); max-width:100%;}
	.loginWrap .in p {word-break:keep-all;}
	.loginWrap .in p br {display:none;}
}
@media all and (max-width:640px) {
	.loginWrap .in > h2,
	.loginWrap .in > p {display:none;}
}

/* Register Default */
.registerWrap {display:block; width:45rem; max-width:100%;}
.registerWrap:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:2rem; background:#fff; z-index:-1;}
.registerWrap > * {flex-grow:1;}
.registerWrap h3 {margin-bottom:4.5rem;}
.registerWrap h3 > * {display:block;}
.registerWrap h3 span {font-size:1.6rem; color:var(--point_color); font-weight:700;}
.registerWrap h3 strong {font-size:3rem; color:#002950; word-break:keep-all;}
.registerWrap h3 em {font-size:1.6rem; color:#555; margin-top:.5rem;}

@media all and (max-width:1024px) {
	.registerWrap {display:flex; flex-direction:column; position:fixed; top:0; left:0; right:0; bottom:0; background:#fff; width:auto; z-index:1000000; padding:calc((30 / 15) * 1.8rem) calc((20 / 15) * 1.8rem); overflow:auto;}
	.registerWrap > * {flex-shrink:0; flex-grow:0;}
	.registerWrap .gotoBack + * {margin-top:auto;}
	.registerWrap > *:last-child {margin-bottom:auto;}
}

/* Register User Type */
.registerWrap .userType {display:flex; justify-content:space-between; margin-bottom:2.5rem;}
.registerWrap .userType li {min-width:48%; width:21.5rem;}
.registerWrap .userType button {display:flex; flex-direction:column; width:100%; justify-content:center; align-items:center; border-radius:2rem; padding:3.3rem 1rem; text-align:center; color:#fff; box-shadow:var(--shadow-box-shadow);}
.registerWrap .userType button strong {display:block; font-weight:700; font-size:2.2rem;}
.registerWrap .userType button i {display:block; position:relative; width:100%; height:15rem; overflow:hidden; margin-bottom:2rem; transform:translateY(0); -webkit-transform:translateY(0);}
.registerWrap .userType button i:before {content:""; display:block; position:absolute; z-index:1; height:4.6rem; left:0; right:0; bottom:0;}
.registerWrap .userType button i:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; top:0; background:no-repeat 50% 50% / contain; transition:.3s all; -webkit-transition:.3s all;}
.registerWrap .userType button:hover i:after,
.registerWrap .userType button:focus i:after {transform:translateY(1rem); -webkit-transform:translateY(1rem);}
.registerWrap .userType button.basic {background:#00b5c9;}
.registerWrap .userType button.basic i:before {background:linear-gradient(180deg,rgba(0, 181, 201, 0) 0%,rgba(0, 181, 201, 1) 100%);}
.registerWrap .userType button.basic i:after {background-image:url(../img/login/img_user_basic.png);}
.registerWrap .userType button.lrea {background:#0077b3;}
.registerWrap .userType button.lrea i:before {background:linear-gradient(180deg,rgba(0, 119, 179, 0) 0%,rgba(0, 119, 179, 1) 100%);}
.registerWrap .userType button.lrea i:after {background-image:url(../img/login/img_user_lrea.png);}

@media all and (max-width:1024px) {
	.registerWrap .userType {gap:1rem;}	
}



/* Register Agree */
.registerWrap .agree fieldset + fieldset {margin-top:1.5rem;}
.registerWrap .agree .box-switch {display:flex; position:relative; align-items:center; min-height:6.3rem; padding:0 9rem 0 2.7rem; border-radius:.99rem; font-size:1.8rem; line-height:1.4; color:#222; background:#F6F6F6; font-weight:600;}
.registerWrap .agree input[type="checkbox"] + .box-switch:before {content:""; display:block; position:absolute; left:auto; top:50%; right:2.16rem; width:5rem; height:2.6rem; margin:0; border-radius:16.2rem; background:#D9D9D9; transform:translateY(-50%); -webkit-transform:translateY(-50%); background-image:none !important;}
.registerWrap .agree input[type="checkbox"] + .box-switch:after {content:""; display:block; position:absolute; top:50%; right:4.968rem; width:2rem; height:2rem; margin:0; border-radius:50%; background:#fff; transform:translateY(-50%); -webkit-transform:translateY(-50%); transition:.3s all; -webkit-transition:.3s all;}
.registerWrap .agree input[type="checkbox"]:checked + .box-switch {background:#E3F5FF;}
.registerWrap .agree input[type="checkbox"]:checked + .box-switch:before {background:#0077B3;}
.registerWrap .agree input[type="checkbox"]:checked + .box-switch:after {right:2.448rem;}
.registerWrap .sub-agree {margin-top:2rem; margin-bottom:4.5rem;}
.registerWrap .sub-agree li {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.registerWrap .sub-agree li + li {margin-top:1.5rem;}
.registerWrap .sub-agree li button {margin-left:2.8rem; font-size:1.4rem; color:#888;}
.registerWrap .sub-agree label {font-size:1.6rem;}

/* Register Form */

.registerForm {display:flex; justify-content:space-between; margin:3.3rem -1.2rem; flex-wrap:wrap;}
.registerForm > li {flex-grow:1; margin:1.2rem; width:calc(50% - 2.4rem); min-width:20rem; max-width:100%;}
.registerForm > li.full {width:100%;}
.registerForm input[type="text"],
.registerForm input[type="number"],
.registerForm input[type="password"],
.registerForm textarea,
.registerForm select {width:100%;}
.registerForm label {display:block; margin-bottom:1rem; color:#000; font-weight:800;}
.registerForm label .req {display:inline-block; position:relative; width:.5em; height:1em; vertical-align:middle; text-indent:-999px; overflow:hidden;}
.registerForm label .req:before {content:"*"; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); color:var(--point_color); text-indent:0;}
.registerForm input[type="checkbox"] + label,
.registerForm input[type="radio"] + label {font-weight:500;}

.registerForm .f-pw-area {position:relative;}
.registerForm .f-pw-area .btnPwView {display:block; position:absolute; top:50%; margin-top:-1.4rem; right:2rem; width:2.8rem; height:2.8rem; text-indent:-999px; overflow:hidden; background:url(../img/login/ico_passwrd_view.svg) no-repeat 50% 50% / contain;}
.registerForm .f-pw-area .btnPwView[aria-pressed="true"] {background-image:url(../img/login/ico_passwrd_view_off.svg);}


/* Register Lrea */

.registerLrea {display:block; position:relative; border-radius:1.5rem; background:#EEF5FA; padding:2.5rem; margin-bottom:2rem;}
.registerLrea .control {display:flex; align-items:end; justify-content:space-between;}
.registerLrea .control div {flex-grow:1; margin-right:1.5rem;}
.registerLrea .control .btns {flex-shrink:0; flex-grow:0; margin-left:auto;}

@media all and (max-width:380px) {
	.registerLrea .control {flex-direction:column; align-items:inherit;}
	.registerLrea .control .btns {margin-top:2rem; margin-right:0; margin-left:0; flex-shrink:1; flex-grow:1;}
	.registerLrea .control .btns .btn {width:100%; text-align:center;}	
}


.certify-type {-ms-flex-negative:0; -ms-flex-positive:0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-flex:1; -ms-flex:1; flex:1; gap:1.6rem; flex-grow:0 !important; width:100%; max-width:100%; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -ms-flex-wrap:wrap; flex-wrap:wrap; margin-top:1.6rem!important;}
.certify-type li {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; flex-direction:column; position:relative; padding:0; background-color:#fff; border:1px solid #DFE4EF; border-radius:1rem; max-width:unset; width:45%; min-width:20rem; flex-grow:1;}
.certify-type li:after,
.certify-type li:before {position:absolute; top:3.2rem; left:3.2rem; content:""; width:3.2rem; height:3.2rem; background-size:contain; display:none;}
.certify-type li:after,
.certify-type li:before {position:absolute; top:3.2rem; left:3.2rem; content:""; width:3.2rem; height:3.2rem; background-size:contain;}
.certify-type .login_type:focus,
.certify-type .login_type:hover,
.certify-type .login_type:visited {text-decoration:none; -webkit-box-shadow:0 0 0 2px #246beb; box-shadow:0 0 0 2px #246beb; outline:none;}
.certify-type .login-link:before {position:absolute; top:3rem; left:2.4rem; content:""; width:2.4rem; height:2.4rem; background-size:2.4rem 2.4rem; background-repeat:no-repeat; background-position:50%;}
.certify-type .etc.login-link:before {background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDIzLjY0NHYyLjQ2N0MxMiAyOC4yNiAxMy41MTQgMzAgMTUuMzgyIDMwaDExLjIzNkMyOC40ODYgMzAgMzAgMjguMjU5IDMwIDI2LjExMVY1Ljg5QzMwIDMuNzQgMjguNDg2IDIgMjYuNjE4IDJIMTUuMzgyQzEzLjUxNCAyIDEyIDMuNzQxIDEyIDUuODg5djIuNjc4IiBzdHJva2U9IiMyRDJEMkQiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjAuMzA5IDE2SDJtMTYuMTU0LTMuNjlsMy42OTMgMy42OTMtMy42OTMgMy42OTIiIHN0cm9rZT0iIzJEMkQyRCIgc3Ryb2tlLXdpZHRoPSIxLjcxNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");}
.certify-type .login-link {display:block; height:100%; width:100%; position:relative; padding:2.8rem 1.8rem; -webkit-box-flex:1; -ms-flex:1; flex:1;}
.certify-type .login-link + .btn-wrap {margin-top:1.6rem;}
.certify-type .login-link:focus-visible {outline-offset:0.4rem; outline:0.2rem solid rgba(36,107,235,.8); border-radius:0;}

.certify-type .login-link:before {position:absolute; top:3rem; left:2.4rem; content:""; width:2.4rem; height:2.4rem; background-size:2.4rem 2.4rem; background-repeat:no-repeat; background-position:50%;}
.certify-type > li.id .login-link:before {background-image: url(../img/login/ico_login_certify_type_05.svg);}

.certify-type .type-tit {color:#1d1d1d; font-weight:700; position:relative; padding-left:4.6rem; padding-right:2.4rem; font-size:2rem;}
.certify-type .type-desc {margin-top:1.2rem; padding-right:0; color:#555; font-size:1.3rem;}
.certify-type .icon-arr {margin-top:1.6rem;}

@media (max-width: 1023px) {
	.certify-type .pc-only {display:none !important;}
}
@media (max-width: 767px) {
	.certify-type {gap:1rem;}
	.certify-type .login-link {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; padding:2rem 2.4rem;}
	.certify-type .login-link:before {width:3.2rem; height:3.2rem; background-size:contain; position:relative; top:0; left:0; margin:0 auto;}
	.certify-type .type-tit {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-flex:1; -ms-flex:1; flex:1; padding:0; text-align:center; font-size:1.5rem; white-space:nowrap;}
	
}

/* datepicker */
.ui-widget-content {border-color:#B6C7CF !important; border-radius:1rem;}
.ui-timepicker-table {padding:.1em;}
.ui-widget-header {background:#E1EBF2; border:0; border-radius:calc(1rem - .2em);}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {color:#456787; text-align:center; background:#fff; border-color:var(--default_line); border-radius:.3rem;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background:var(--default_bak);}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {color:#fff; background:var(--point_color); border-color:var(--point_color);}
.ui-state-hover {border-color:var(--point_color) !important;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {width:2.6rem; height:2.6rem; background:#fff no-repeat 50% 50% / contain; border-radius:50%; top:50%; margin-top:-1.3rem;}
.ui-datepicker .ui-datepicker-prev {background-image:url(../../_guide/img/board/btn_prev.svg); left:.5rem;}
.ui-datepicker .ui-datepicker-next {background-image:url(../../_guide/img/board/btn_next.svg); right:.5rem;}
.ui-datepicker-prev span, .ui-datepicker-next span {background:none !important;}
.ui-datepicker-prev-hover, .ui-datepicker-next-hover {border-width:0 !important;}
.ui-timepicker-hours, .ui-timepicker-minutes {padding:.2em !important;}
.ui-timepicker-table td a {padding:.2em .3em !important;}

@media all and (max-width:768px) {
	.ui-timepicker-table,
	.ui-timepicker-table > tbody,
	.ui-timepicker-table > tbody > tr,
	.ui-timepicker-table > tbody > tr > td {display:block !important;}
	.ui-timepicker-table,
	.ui-timepicker-table td {width:auto !important;}
}


.modal-open #ch-plugin {display:none !important;}

/************************************************
	정부 통합 로그인
*************************************************/

.loginWrap .loginPannel[data-state="anyid"] .vis,
.loginWrap .loginPannel[data-state="anyid"] .con#pageAjaxContent,
.loginWrap .loginPannel[data-state=""] .con#anyidContent {display:none !important;}

.loginWrap .loginPannel #anyidContent {display:block; padding:4rem; border-radius:3rem; background:#fff; margin:0;}

#certContainer .logo {display:block; width:28rem; height:5.2rem; margin-bottom:3rem; text-indent:-999px; overflow:hidden; background:url(../img/common/logo.svg) no-repeat 50% 50% / contain;}
#certContainer .anyid-guide {padding-bottom:2.5rem; margin-bottom:3rem; border-bottom:1px solid rgba(0,0,0,.2);}
#certContainer .anyid-guide strong {display:block; font-size:2rem; margin-bottom:1rem;}
#certContainer .anyid-guide span {display:block; font-size:1.7rem; opacity:.8;}

#certContainer #orgc {margin-top:3rem;}
#certContainer .certify-opt-tit {font-size:2rem; font-weight:800;}
#certContainer .certify-type {width:calc(33.33% - .8rem); min-width:20rem;}

@media all and (max-width:1024px) {
	#certContainer .certify-type {width:100%;}
}

@media all and (max-width:640px) {
	#certContainer .logo {width:16rem; height:4.2rem; margin-bottom:2rem;}
	.loginWrap .loginPannel #anyidContent {padding:3rem;}
}