@charset "utf-8";

/* --------------------------------------------------------------------------------
	# COMMONET : WEB FONT
--------------------------------------------------------------------------------- */
@font-face {
	font-family:'SpoqaHanSansNeo'; font-weight:100; font-style:normal;
	src:url('/resources/mini/css/font/SpoqaHanSansNeo-Thin.woff2') format('woff2');
}

@font-face {
	font-family:'SpoqaHanSansNeo'; font-weight:300; font-style:normal;
	src:url('/resources/mini/css/font/SpoqaHanSansNeo-Light.woff2') format('woff2');
}

@font-face {
	font-family:'SpoqaHanSansNeo'; font-weight:400; font-style:normal;
	src:url('/resources/mini/css/font/SpoqaHanSansNeo-Regular.woff2') format('woff2');
}

@font-face {
	font-family:'SpoqaHanSansNeo'; font-weight:500; font-style:normal;
	src:url('/resources/mini/css/font/SpoqaHanSansNeo-Medium.woff2') format('woff2');
}

@font-face {
	font-family:'SpoqaHanSansNeo'; font-weight:700; font-style:normal;
	src:url('/resources/mini/css/font/SpoqaHanSansNeo-Bold.woff2') format('woff2');
}
/* --------------------------------------------------------------------------------
	# COMMONET : VAR SETTING
--------------------------------------------------------------------------------- */
body {
	/* 백그라운드 이미지 */
	--irImg1:url('/resources/mini/img/com/ir.svg');
	--irImg1Size:72rem auto;
	--irImg2:url('/resources/mini/img/com/i-sel.svg');
	--irImg2Size:2.4rem;

	/* 레이아웃 공통 간격 */
	--spc0:0rem;
	--spc1:4.0rem;
	--spc2:3.2rem;
	--spc3:2.4rem;
	--spc4:2.0rem;
	--spc5:1.6rem;
	--spc6:1.2rem;
	--spc7:1.0rem;
	--spc8:0.8rem;
	--spc9:0.4rem;

	--spc3-t1:calc(var(--spc3) * -1);
	--spc3-t2:calc(var(--spc4) * -1);

	/* 객체 공통 높이 */
	--headHgt:5.2rem;
	--hgt1:5.6rem;
	--hgt2:5.2rem;
	--hgt3:4.6rem;
	--hgt4:4.0rem;
	--hgt5:3.2rem;

	/* 객체 공통 넓이 */
	--wht1:100%;
	--wht2:auto;

	/* 박스라운드 사이즈 */
	--bdrRds1:2.4rem;
	--bdrRds2:1.4rem;
	--bdrRds3:1.6rem;

	/* 배경 공통 색상 */
	--bgCr1:#ccc;
	--bgCr2:#a3a3a3;
	--bgCr3:#f4f4f4;
	--bgCr4:rgba(241, 246, 247, 0.7);
	--bgCr5:#fdf5f7;
	--bgCr6:#f9f9f9;
	--bgCr7:#eee;
	--bgCr8:#ffecf1;
	--bgCr9:#fff;
	--bgCr10:#222;

	/* 라인 공통 색상 */
	--lineC1:#d0d4d7;
	--lineC2:#f4f4f4;
	--lineC3:#fff;
	--lineC4:#4f5d64;
	--lineC5:#3d3d3d;
	--lineC6:#888;

	/* 텍스트 공통 색상 */
	--fontCr1:#666;
	--fontCr2:#000;
	--fontCr3:#6e7d85;
	--fontCr4:#aebabb;
	--fontCr5:#252e33;
	--fontCr6:#a3a3a3;
	--fontCr7:#fff;
	--fontCr8:#888;
	--fontCr9:#d0d4d7;
	--fontCr10:#ccc;

	/* 포인트 색상 */
	--point1:#DA4C76; /* 주컬러 */
	--point2:#EC4361; /* 에러 */
	--point3:#0055d6; /* timer */
	--point4:#8C0A28; /* 주컬러 2 */

	/* font-size */
	--fontSz1:1.2rem;
	--fontSz2:1.3rem;
	--fontSz3:1.4rem;
	--fontSz4:1.5rem;
	--fontSz5:1.6rem;
	--fontSz6:1.8rem;
	--fontSz7:2.0rem;
	--fontSz8:2.6rem;
	--fontSz9:2.8rem;

	/* font-weight */
	--fontWg1:700;
	--fontWg2:500;
	--fontWg3:400;
	--fontWg4:300;
	--fontWg5:100;
}

/* --------------------------------------------------------------------------------
	RESET
--------------------------------------------------------------------------------- */
html, body, div, span, object, iframe,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main, summary,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
form, fieldset, legend, input, label, button, textarea, select, textarea, input,
table, caption, tbody, tfoot, thead, tr, th, td,
b, i, dl, dt, dd, ol, ul, li,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, data,
time, mark, audio, video, a { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:0; border:none; }

html { font-size:2.777777vw; }/* 360화면기준 : 10px */
html, body { width:100%; }
body { background:var(--bgCr9); line-height:1.357; word-break:keep-all; word-wrap:break-word; -ms-text-size-adjust:100%; -webkit-test-size-adjust:100%; min-height:100vh; }
body, select, input, button, textarea, pre { font-family:'SpoqaHanSansNeo'; font-size:var(--fontSz4); color:var(--fontCr1); }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary { display:block; }
blockquote, q { quotes:none; }

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:inherit; }
cite, em, dfn, address { font-style:normal; }
fieldset, iframe { border:0 none; min-width:0; }
ins { text-decoration:none; }
del { text-decoration:line-through; }

ol, ul, li { list-style:none; }
img { border:0 none; width:100%; height:auto; vertical-align:top; } /* 2021-09 img */
video, audio, object, embed, iframe { max-width:100%; height:auto; vertical-align:top; }

legend, caption { width:0; height:1px; margin:-1px; font-size:1px; opacity:0; white-space:nowrap; }
i, em, address { font-style:normal; }

input, select, textarea { border-radius:0; box-shadow:none; background:transparent; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
label, button { cursor:pointer; }
button { cursor:pointer; padding:0; background:none; border:0 none; }
button:disabled { cursor:default; }
select::-ms-expand { display:none; }
textarea { resize:vertical; }
input:disabled { opacity:1; -webkit-text-fill-color:inherit; }
input[type="text"]::-ms-clear { display:none; }
input[type="radio"], input[type="checkbox"], input[type="tel"], input[type="number"] { vertical-align:middle; }
input[type="number"] { -moz-appearace:textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; -moz-appearance:none; appearance:none; box-shadow:none; } /* 2021-09 default 수정 */
input:checked[type='checkbox'], input:checked[type='radio'] { -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color:transparent; } /* 2021-09 default 추가 */

table { width:100%; empty-cells:show; border-spacing:0; table-layout:fixed; border-collapse:collapse; }
table th { font-weight:normal; }

/*a, a:visited { color:inherit; }*/
a { color:inherit; }
a:link, a:hover { text-decoration:none; }

/* Highlight delete 2021-11-04 추가 */
a, button { outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent }

/* ETC */
.none { display:none !important; }
.hide { overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; font-size:1px; opacity:0; white-space:nowrap; }
.tc { text-align:center; }

/* --------------------------------------------------------------------------------
	LAYOUT : COMMON
--------------------------------------------------------------------------------- */
body.scrolllock { overflow:hidden; }

/* HEADER */
.header { position:-webkit-sticky; position:sticky; top:0; z-index:10; display:-webkit-box; display:-ms-flexbox; display:flex; align-items:center; background:var(--bgCr9); }
.header > h1 { display:-webkit-box; display:-ms-flexbox; display:flex; align-items:center; height:var(--hgt2); padding:0.2rem var(--hgt2) 0 var(--spc3); font-size:var(--fontSz6); font-weight:var(--fontWg2); color:var(--fontCr5); }
.header > h1 > a { margin-right:auto; font-size:var(--fontSz5); font-weight:700; }
.header > button[class*="btn-"],.header > a[class*="btn-"] { overflow:hidden; position:relative; z-index:1; width:var(--hgt2); height:var(--hgt2); color:transparent; }
.header > button[class*="btn-"]:before, .header > a[class*="btn-"]:before, .header > h1 > a:before { content:''; display:block; background:var(--irImg1) var(--bg-position) no-repeat; background-size:var(--irImg1Size); position:absolute; top:50%; }
.header > button[class*="btn-"]:before, .header > a[class*="btn-"]:before { left:50%; transform:translate(-50%, -50%); }
.header > .btn-prev + h1 { padding-left:0; }
.header > .btn-navi { margin-left:auto; }
.header > .btn-navi::before { --bg-position:-23rem -2.6rem; width:1.6rem; height:1.4rem; }
.header > .btn-oneq { margin-left:auto; }
.header > .btn-oneq::before { --bg-position:-19.8rem 0; width:2.3rem; height:1.8rem; }
.header > .btn-close { margin-left:auto; }
.header > .btn-close::before { --bg-position:0 0; width:1.6rem; height:1.6rem; }
.header > .btn-prev { left:0; margin:0 -0.6rem 0 0; }
.header > .btn-prev::before { --bg-position:-2.4rem 0; width:0.9rem; height:1.6rem; }
.header > .btn-share { width:3.6rem !important; height:3.6rem !important; margin-left:2.4rem; }
.header > .btn-share::before { --bg-position:-24rem -11rem; width:3.6rem; height:3.6rem; }
.header > .icon-com1.ic17 { width:3.6rem !important; height:3.6rem !important; line-height:0; text-indent:0; margin-left:0.4rem; }
.header > .icon-com1.ic17 > input { opacity:0; z-index:0; left:0; top:0; width:3.6rem; height:3.6rem; }
.header > .icon-com1.ic17 > input + span { display:inline-block; margin-top:0; font-size:1.8rem; font-weight:500; color:var(--fontCr5); }
.header > .icon-com1.ic17 > input + span::before { content:''; display:inline-block; background:var(--irImg1) var(--bg-position) no-repeat; background-size:var(--irImg1Size); --bg-position:-27.6rem -11rem; width:3.6rem; height:3.6rem; margin-right:0.4rem; vertical-align:-1.1rem; }
.header > .icon-com1.ic17 > input:checked + span::before { --bg-position:-31.2rem -11rem; }
.header > .icon-com1.ic17 > input:checked + span { color:var(--point1); }

/* CONTENT */
.contents:first-child, .header.hide ~ .contents { --headHgt:0rem; }
.contents { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; padding:0 var(--spc3) var(--spc4); min-height:calc(100vh - var(--headHgt)); }
.contents .section-line { margin:var(--spc2) var(--spc3-t1) 0; border-top:solid 8px var(--lineC2); padding:var(--spc3) var(--spc3) 0; }
.contents .section-line-2 { margin:var(--spc2) var(--spc3-t1) 0; border-top:solid 1px var(--lineC2); padding:var(--spc2) var(--spc3) 0; }

/* NAVI */
#navi { overflow:hidden; position:fixed; top:0; bottom:0; right:-100%; z-index:100; width:100%; transition:right 0.5s; }
#navi:before { content:''; display:block; position:fixed; top:0; right:-100%; bottom:0; z-index:-1; background:rgba(0,0,0,0.6); opacity:0; }
#navi.open { right:0; }
#navi.open:before { opacity:1; left:0; right:0; }
#navi > .icon-com1.ic81 { position:absolute; top:5.8rem; right:var(--spc5); z-index:2; }
#navi > nav { overflow-y:auto; margin-left:4rem; height:100%; background:#fff; box-shadow:0 0.4rem 5.4rem 0.1rem rgba(0,0,0,0.12); }
#navi > nav > .area1 { position:sticky; top:0; z-index:1; padding:5.8rem var(--spc3) var(--spc2); background:#fff; border-bottom:8px solid var(--lineC2); }
#navi > nav > .area1 { display:flex; flex-wrap:wrap; justify-content:space-between; }
#navi > nav > .area1 .util { display:flex; padding-right:var(--spc5); }
#navi > nav > .area1 .util a { margin-right:var(--spc5); }
#navi > nav > .area1 .user { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:3rem; }
#navi > nav > .area1 .user .user-name { font-size:var(--fontSz7); color:var(--fontCr5); font-weight:var(--fontWg2); line-height:2.9rem; letter-spacing:-0.05rem; }
#navi > nav > .area1 .user .link-t3::after { margin-bottom:var(--spc9); }
#navi > nav > .area1 .user .user-btn .icon-com1 { font-size:var(--fontSz1); color:var(--fontCr5); font-weight:var(--fontWg2); line-height:2rem; text-decoration:underline solid var(--fontCr5) 1px; text-underline-offset:1px; }
#navi > nav > .area1 .last-date { width:100%; margin-top:var(--spc8); font-size:var(--fontSz2); color:#a3a3a3; font-weight:var(--fontWg3); line-height:1.8rem; letter-spacing:-0.02rem; }
#navi > nav > .area2 { padding:var(--spc2) var(--spc3) 3.7rem; }
#navi > nav > .area2 + .area2, #navi > nav > .area2 + .area3 { border-top:solid 1px var(--lineC2); }
#navi > nav > .area2 h2, #navi > nav > .area3 h2 { margin-bottom:-0.5rem; font-size:var(--fontSz5); color:var(--fontCr5); font-weight:var(--fontWg2); line-height:2.5rem; letter-spacing:-0.02rem; }
#navi > nav > .area2 .icon-com1,
#navi > nav > .area3 .link-t3 { font-size:var(--fontSz4); color:var(--fontCr5); font-weight:var(--fontWg3); line-height:2.2rem; letter-spacing:-0.05rem; }
#navi > nav > .area2 .icon-com1::before { display:block; margin:0 auto; }
#navi > nav > .area2 ul { display:flex; flex-wrap:wrap; margin-left:-0.8rem; margin-right:-0.8rem; }
#navi > nav > .area2 ul > li { width:33.3%; margin-top:2.6rem; text-align:center; }
#navi > nav > .area3 { padding:var(--spc3) var(--spc3) 3.7rem; }
#navi > nav > .area3 ul { margin-top:2.3rem; padding-right:0.7rem; }
#navi > nav > .area3 ul > li + li { margin-top:1.9rem; }

/* --------------------------------------------------------------------------------
	LAYOUT : POPUP
--------------------------------------------------------------------------------- */
/* 전체팝업 --------------------------------------------------------------------- */
.wrap-popup { width:100vw; height:100vh; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.wrap-popup .header { top:0; }
.wrap-popup[data-popmodal="true"] { position:fixed; bottom:0; left:0; right:0; z-index:10; visibility:hidden; transform:translateY(100%); transition:transform 0.3s ease; pointer-events:none; } /* 2021-10-29 수정 */
.wrap-popup[data-popmodal="true"].open { visibility:visible; transform:translateY(0); pointer-events:all; }
.wrap-popup.capture { overflow:visible; }
.wrap-popup.capture .area-action { display:none; }
.wrap-popup.bg1, .wrap-popup.bg1 .header { background-color:var(--bgCr4); }
.wrap-popup.bg1 .box-t1 { background-color:var(--bgCr9); }
.wrap-popup.bg1 .area-action::before { display:none; }
.wrap-popup > .container { display:flex; flex-direction:column; min-height:100%; }
.wrap-popup > .container > .header > h1 { height:auto; min-height:var(--hgt2); padding-top:1.35rem; padding-bottom:1.35rem; }
.wrap-popup > .container > .header > button[class*="btn-"], .header > a[class*="btn-"] { flex:none; }
.wrap-popup > .container > .contents { min-height:0; flex:1; }

/* 레이어팝업 ------------------------------------------------------------------- */
[class*="pop-modal"] > article { overflow:hidden; position:fixed; padding:var(--spc4) 0; background:var(--bgCr9); border-radius:var(--bdrRds1); transition:all 0.3s; }
[class*="pop-modal"] > article > header { padding:0 var(--spc3); }
[class*="pop-modal"] > article > header > h1 { flex:1; font-size:var(--fontSz6); line-height:2.4rem; color:var(--fontCr5); font-weight:var(--fontWg2); padding:1.4rem 0 1.4rem; }
[class*="pop-modal"] > article > header > [data-btn="pop-close"] { overflow:hidden; position:absolute; top:var(--spc4); right:0.6rem; width:var(--hgt2); height:var(--hgt2); color:transparent; }
[class*="pop-modal"] > article > header > [data-btn="pop-close"]:before { content:''; display:block; position:absolute; top:50%; left:50%; margin:-0.8rem; width:1.6rem; height:1.6rem; --bg-position:0 0; background:var(--irImg1) var(--bg-position) no-repeat; background-size:var(--irImg1Size); }
[class*="pop-modal"] > article > .content { overflow-x:hidden; overflow-y:auto; padding:0 var(--spc3) var(--spc4); max-height:calc(100vh - 17.5rem); overscroll-behavior:contain; -ms-overflow-style:none; scrollbar-width:none; scrollbar-color:transparent }
[class*="pop-modal"] > article > .content::-webkit-scrollbar { display:none!important }
[class*="pop-modal"] > article > .content:last-child { padding-bottom:0; }
[class*="pop-modal"] > article > footer { padding:0 var(--spc3); }
[class*="pop-modal"] { visibility:hidden; position:fixed; top:0; left:0; right:0; bottom:0; z-index:12; background:rgba(0,0,0,0); transition:all 0.5s; pointer-events:none; }
[class*="pop-modal"][aria-hidden="false"].open { visibility:visible; background:rgba(0,0,0,0.7); pointer-events:all; }

/* 하단팝업 */
.pop-modal1 > article { left:0; right:0; bottom:0; transform:translateY(100%); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.pop-modal1[aria-hidden="false"].open > article { transform:translateY(0); }
.pop-modal1 .txt-bul3.line-t { margin-top:var(--spc5); padding-top:var(--spc5); }

/* 메세지팝업 ------------------------------------------------------------------- */
/* 시스템창(alert/confirm) */
.pop-mes1 > dl { opacity:0; overflow:hidden; position:fixed; left:var(--spc4); right:var(--spc4); top:50%; color:var(--fontCr2); transform:translate(0, -50%); border-radius:var(--bdrRds2); transition:all 0.3s; }
.pop-mes1 > dl > dt { position:absolute; width:1px; height:1px; margin:-1px; font-size:1px; opacity:0; white-space:nowrap; }
.pop-mes1 > dl > dd:not(.btn) { display:-webkit-box; display:-ms-flexbox; display:flex; align-items:center; padding:var(--spc3); min-height:7.6rem; font-size:var(--fontSz5); font-weight:var(--fontWg4); line-height:2.2rem; background:var(--bgCr9); }
.pop-mes1 > dl > dd.btn { display:-webkit-box; display:-ms-flexbox; display:flex; }

.pop-mes1 { visibility:hidden; position:fixed; top:0; left:0; right:0; bottom:0; z-index:10; background:rgba(0,0,0,0); transition:all 0.5s; }
.pop-mes1[aria-hidden="false"].open { visibility:visible; background:rgba(0,0,0,0.7); }
.pop-mes1[aria-hidden="false"].open > dl { opacity:1; }

.pop-mes1 > dl > dd.btn button[class*="btn-"] { height:5.4rem; font-size:1.7rem; line-height:5.4rem; color:var(--fontCr7); font-weight:var(--fontWg1); border-width:0; border-radius:0; }
.pop-mes1 > dl > dd.btn button.btn-com1 { background-color:var(--point1); }
.pop-mes1 > dl > dd.btn button.btn-com1.c1 { background-color:var(--bgCr1); }

/* 툴팁 */
.pop-mes3-base { position:relative; }
.pop-mes3-btn { margin:-0.2rem 0 0 0.4rem; line-height:0; }
.pop-mes3 { display:none; position:absolute; left:2.6rem; right:2.6rem; top:auto; background:#fff; border:1px solid #6e7d85; text-align:left; box-shadow:2px 6px 8px rgba(0,0,0,0.2); margin-top:var(--spc8); border-radius:6px; padding:16px 14px; z-index:9; }
.pop-mes3 .pop-mes3-title { font-size:var(--fontSz6); line-height:2.4rem; font-weight:var(--fontWg1); color:var(--fontCr5); margin-bottom:var(--spc7); padding-right:var(--spc4); }
.pop-mes3 .pop-mes3-cont { font-size:var(--fontSz5); line-height:2.4rem; font-weight:var(--fontWg4); color:var(--fontCr1); word-break:break-all; }
.pop-mes3 .pop-mes3-cont strong { color:var(--fontCr5); }
.pop-mes3 .pop-mes3-cont .txt-bul3 li { font-size:var(--fontSz5); line-height:2.4rem; }
.pop-mes3 .pop-mes3-cont .txt-bul3 .sub-txt { font-size:var(--fontSz2); line-height:1.8rem; margin-top:var(--spc7); }
.pop-mes3 .pop-mes3-cont .txt-bul3 .txt-int { text-indent:-1.4em; margin-left:1.4em; }
.pop-mes3 .pop-mes3-close { position:absolute; right:var(--spc6); top:var(--spc4); }
.pop-mes3.open { display:block; }
.tab.pop-mes3-base .pop-mes3 { top:4rem; }
.contents.main .pop-mes3 { left:3.4rem; right:3.4rem; }

/* 토스트팝업*/
.pop-toast { opacity:0; pointer-events:none; transition:opacity 0.3s; display:flex; justify-content:center; }
.pop-toast > dl { position:fixed; bottom:var(--spc3); z-index:10; display:-webkit-box; display:-ms-flexbox; display:flex; justify-content:center; align-items:center; padding:0.5rem var(--spc5); height:4.0rem; border-radius:var(--bdrRds3); background:rgba(0,0,0,0.7); color:#fff; text-align:center; line-height:1.8rem; }
.pop-toast > dl > dt { position:absolute; width:1px; height:1px; margin:-1px; font-size:1px; opacity:0; white-space:nowrap; }
.pop-toast.open { opacity:1; pointer-events:all; position:relative; z-index:100; }

/* 로딩페이지 */
.pop-loading { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); }
.pop-loading .loading-in:before { content:''; position:absolute; left:50%; top:50%; width:5.8rem; height:7.2rem; margin:-3.6rem 0 0 -2.9rem; background:url(/resources/mini/img/com/icon_loading.png) no-repeat 0 0; background-size:100% 100%; animation:bounce 850ms infinite; }
.pop-loading .loading-in { position:absolute; }


@-webkit-keyframes bounce {
	50% { top:1.8rem; height:7.2rem; -webkit-animation-timing-function:ease-out; }
	55% { top:2.4rem; height:6.8rem; -webkit-animation-timing-function:ease-in; }
	65% { top:1.4rem; height:7.2rem; -webkit-animation-timing-function:ease-out; }
	0%, 95%, 100% { top:0.6rem; -webkit-animation-timing-function:ease-in; }
}

@keyframes bounce {
	50% { top:1.8rem; height:7.2rem; -webkit-animation-timing-function:ease-out; }
	55% { top:2.4rem; height:6.8rem; -webkit-animation-timing-function:ease-in; }
	65% { top:1.4rem; height:7.2rem; -webkit-animation-timing-function:ease-out; }
	0%, 95%, 100% { top:0.6rem; -webkit-animation-timing-function:ease-in; }
}
/* --------------------------------------------------------------------------------
	UI COMMON : TAB / TOGGLE
--------------------------------------------------------------------------------- */
.ui-tabcont { display:none; }
.ui-tabcont.active { display:block; }

/* --------------------------------------------------------------------------------
	UI COMMON : FIXED
--------------------------------------------------------------------------------- */
[data-ui-fixed] { position:fixed !important; left:0; right:0; z-index:10; }
[data-ui-fixed="top"] { top:0; }
[data-ui-fixed="bottom"] { bottom:0; }

[data-ui-sticky] { position:-webkit-sticky !important; position:sticky !important; z-index:9; }
[data-ui-sticky="top"] { top:0; }
[data-ui-sticky="bottom"] { bottom:var(--spc4); margin:auto 0 0; }
.area-btm { margin:auto 0 0; padding-top:var(--spc1); }
.area-btm + [data-ui-sticky="bottom"] { margin-top:0; }

body.form-focus .area-action[data-ui-fixed="bottom"] { position:relative !important; margin-top:0; bottom:0; }

/* --------------------------------------------------------------------------------
	UI COMMON : LOADING
--------------------------------------------------------------------------------- */
.wrap-loading { display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction:column; min-height:100vh; padding-top:2rem; background-color:#f8f3f0; }
.wrap-loading .loading-head { flex:1; padding-top:calc((100vh - 84.16vw - 23rem) / 2); text-align:center; background:url("/resources/mini/img/com/bg-intro.jpg") center bottom no-repeat; background-size:100% auto; font-size:var(--fontSz5); font-weight:var(--fontWg2); color:var(--fontCr1); line-height:2.5rem; letter-spacing:-0.05rem; }
.wrap-loading h1 { height:3.8rem; margin-bottom:var(--spc5); }
.wrap-loading h1 .logo { width:auto; height:100%; }
.wrap-loading h1 .btn-txt3 { padding-top:0.225rem; font-size:2.5rem; font-weight:var(--fontWg2); color:var(--point4); line-height:2.5rem; letter-spacing:-0.05rem; }
.wrap-loading h1 [class*="icon-com"].ic64::before { margin:0.4rem 1.2rem 0 0.9rem; vertical-align:top; }
.wrap-loading .loading-foot { padding:var(--spc5) var(--spc3); background:var(--bgCr9); }

/* --------------------------------------------------------------------------------
	UI COMMON : ERROR
--------------------------------------------------------------------------------- */
.wrap-error { position:fixed; left:0; right:0; top:50%; text-align:center; padding:var(--spc2) var(--spc3); transform:translateY(-50%); }
.wrap-error > p { font-size:var(--fontSz7); font-weight:var(--fontWg2); color:var(--fontCr5); line-height:2.9rem; letter-spacing:-0.05rem; }
.wrap-error > p::before { content:''; display:block; margin:0 auto 5rem; width:7.2rem; height:7.2rem; background:var(--irImg1) 0 -11rem no-repeat; background-size:var(--irImg1Size); }

/* --------------------------------------------------------------------------------
	UI COMMON : SWIPER
--------------------------------------------------------------------------------- */
/* 유형1 ------------------------------------------------------------------------ */
.wrap-slider-list { overflow:hidden; position:relative; z-index:2; display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; margin:0 var(--spc3-t1); align-items:center; justify-content:center; }
.wrap-slider-list [data-slider] { display:-webkit-box; display:-ms-flexbox; display:flex; width:100%; }/* 2021-09 flex 수정 */
.wrap-slider-list [data-slider].main-event-slide { display:-webkit-box; display:-ms-flexbox; width:100%; }/* 2021-09 flex 수정 */
.wrap-slider-list [data-slider] > .slide { flex-shrink:0; min-width:100%; }

/* 유형2 ------------------------------------------------------------------------ */
.wrap-slider-list2 { overflow:hidden; position:relative; margin:0 -1.6rem; padding:0 0.8rem; }
.wrap-slider-list2 [data-slider] { display:-webkit-box; display:-ms-flexbox; display:flex; }
.wrap-slider-list2 [data-slider] > .slide { flex-shrink:0; width:calc(100% - 7rem); padding:0 0.8rem; }

/* swiper indicator */
.wrap-slider-list .pagination-bul { display:inline-block; order:2; z-index:10; line-height:0; margin-top:-3.5rem; }
.wrap-slider-list .pagination-bul > .bullet { overflow:hidden; display:inline-block; position:relative; width:1rem; height:0.8rem; color:transparent; transition:width 0.3s; }
.wrap-slider-list .pagination-bul > .bullet:before { content:''; display:block; position:absolute; left:0.2rem; right:0.2rem; top:0.1rem; bottom:0.1rem; border-radius:0.3rem; background:rgba(79,93,100,0.4); }
.wrap-slider-list .pagination-bul > .bullet.active { width:2.6rem; }
.wrap-slider-list .pagination-bul > .bullet.active:before { background:rgba(79,93,100,1); }

/* swiper progressbar */
.wrap-slider-list .pagination-bar { order:2; width:100%; height:0.4rem; background:rgba(0,0,0,0.25); transform:translate3d(0,0,0); }
.wrap-slider-list .pagination-bar > .fill { position:absolute; left:0; top:0; width:100%; height:100%; background:var(--point1); transform:scale(0); transform-origin:left top; }

/* swiper prev,next navication */
.wrap-slider-list .pagination-nav > button { overflow:hidden; position:absolute; top:36vh; left:1.5rem; width:3.2rem; height:3.2rem; color:transparent; transform:translate(0, -50%); }
.wrap-slider-list .pagination-nav > button:before { content:''; display:block; position:absolute; top:50%; left:50%; margin:-0.5rem; width:1.0rem; height:1.0rem; border-left:2px solid var(--lineC4); border-top:2px solid var(--lineC4); transform:rotate(-45deg); }
.wrap-slider-list .pagination-nav > button:disabled { opacity:0.3; }
.wrap-slider-list .pagination-nav > button.ui-next { left:auto; right:1.5rem; }
.wrap-slider-list .pagination-nav > button.ui-next:before { transform:rotate(135deg); }

/* swiper page number */
.wrap-slider-list .pagination-fra { position:absolute; top:calc(40vh + 22.4rem); right:var(--spc3); z-index:2; font-size:var(--fontSz1); color:var(--fontCr3); line-height:1.5rem; }
.wrap-slider-list .pagination-fra > strong { font-weight:var(--fontWg3); }

/* swiper auto control */
.wrap-slider-list .pagination-ctr { display:inline-block; order:2; margin:-3.5rem 0 0 0.8rem; z-index:10; }
.wrap-slider-list .pagination-ctr > button { display:none; overflow:hidden; position:relative; width:2rem; height:1.5rem; color:transparent; border-radius:1.5rem; background:rgba(255,255,255,0.6); }
.wrap-slider-list .pagination-ctr > button:before { content:''; display:block; position:absolute; top:50%; left:50%; margin:-0.5rem 0 0 -0.3rem; background:var(--irImg1) var(--bg-position) no-repeat; background-size:var(--irImg1Size); width:0.6rem; height:1rem; }
.wrap-slider-list .pagination-ctr > button.ui-play:before { --bg-position:-39.6rem -2.6rem; margin:-0.5rem 0 0 -0.25rem; }
.wrap-slider-list .pagination-ctr > button.ui-stop:before { --bg-position:-40.4rem -2.6rem; margin:-0.5rem 0 0 -0.3rem; }
.wrap-slider-list[data-auto-state="false"] .pagination-ctr > button.ui-play { display:block; }
.wrap-slider-list[data-auto-state="true"] .pagination-ctr > button.ui-stop { display:block; }

/* --------------------------------------------------------------------------------
	UI COMMON : DATEPICKER
--------------------------------------------------------------------------------- */
.ui-datepicker:not(:empty) { position:fixed !important; top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:1000 !important; overflow:hidden; min-height:45.2rem; padding:var(--spc4) var(--spc3) 1.2rem; background:var(--bgCr9); border-radius:var(--bdrRds1) var(--bdrRds1) 0 0; transition:all 0.3s; }
.ui-datepicker:not(:empty):before { content:'날짜선택'; display:block; font-size:1.8rem; line-height:2.4rem; color:var(--fontCr5); font-weight:var(--fontWg2); padding:1.4rem 0 1.4rem; }
.ui-datepicker:not(:empty) .ui-datepicker-header { position:relative; margin:1.6rem 0 1rem; padding:0 0 0 2.3rem; text-align:center; }
.ui-datepicker:not(:empty) .ui-datepicker-header .ui-datepicker-title { width:10.3rem; font-size:var(--fontSz5); font-weight:var(--fontWg2); color:var(--fontCr5); line-height:2.5rem; }
.ui-datepicker:not(:empty) .ui-datepicker-header .ui-corner-all { overflow:hidden; position:absolute; width:2.3rem; height:2.5rem; color:transparent; }
.ui-datepicker:not(:empty) .ui-datepicker-header .ui-corner-all:before { content:''; display:block; position:absolute; top:50%; left:50%; width:0.9rem; height:1.6rem; background:var(--irImg1) -25rem -2.6rem no-repeat; background-size:var(--irImg1Size); }
.ui-datepicker:not(:empty) .ui-datepicker-header .ui-datepicker-prev { left:0; }
.ui-datepicker:not(:empty) .ui-datepicker-header .ui-datepicker-prev:before { transform:translate(-50%,-50%) rotate(180deg); }
.ui-datepicker:not(:empty) .ui-datepicker-header .ui-datepicker-next { left:12.6rem; }
.ui-datepicker:not(:empty) .ui-datepicker-header .ui-datepicker-next:before { transform:translate(-50%,-50%) rotate(0deg); }
.ui-datepicker:not(:empty) .ui-datepicker-buttonpane .ui-corner-all { position:absolute; }
.ui-datepicker:not(:empty) .ui-datepicker-buttonpane .ui-datepicker-close { overflow:hidden; position:absolute; top:var(--spc4); right:0.6rem; width:var(--hgt2); height:var(--hgt2); color:transparent; }
.ui-datepicker:not(:empty) .ui-datepicker-buttonpane .ui-datepicker-close:before { content:''; display:block; position:absolute; top:50%; left:50%; margin:-0.8rem; width:1.6rem; height:1.6rem; background:var(--irImg1) 0 0 no-repeat; background-size:var(--irImg1Size); }
.ui-datepicker:not(:empty) .ui-datepicker-buttonpane .ui-datepicker-current { top:8.4rem; right:var(--spc3); width:5.6rem; border:1px solid var(--lineC1); border-radius:var(--bdrRds3); font-size:var(--fontSz1); line-height:3rem; color:var(--fontCr1); }
.ui-datepicker:not(:empty) .ui-datepicker-calendar { margin:0 -1rem; width:calc(100% + 2rem); }
.ui-datepicker:not(:empty) .ui-datepicker-calendar th { height:4.1rem; font-size:var(--fontSz1); line-height:4.1rem; color:var(--fontCr1); font-weight:var(--fontWg2); }
.ui-datepicker:not(:empty) .ui-datepicker-calendar th.ui-datepicker-week-end { color:#0055d6; }
.ui-datepicker:not(:empty) .ui-datepicker-calendar th.ui-datepicker-week-end:first-child { color:#ec4361; }
.ui-datepicker:not(:empty) .ui-datepicker-calendar td { height:4.6rem; text-align:center; font-size:var(--fontSz4); color:var(--fontCr1); font-weight:var(--fontWg3); line-height:3.2rem; }
.ui-datepicker:not(:empty) .ui-datepicker-calendar td > a,
.ui-datepicker:not(:empty) .ui-datepicker-calendar td > .ui-state-default { overflow:hidden; display:block; margin:0 auto; width:3.2rem; height:3.2rem; line-height:3.2rem; border-radius:3.2rem; }
.ui-datepicker:not(:empty) .ui-datepicker-calendar td.ui-state-disabled, .ui-datepicker:not(:empty) .ui-datepicker-calendar td .ui-state-disabled { opacity:.3; }
.ui-datepicker:not(:empty) .ui-datepicker-calendar td > a.ui-state-active { border-radius:50%; background-color:#ffecf1; color:#da4c76; }

/* --------------------------------------------------------------------------------
	CONTENT : ICON
--------------------------------------------------------------------------------- */
/* 일반 아이콘 ------------------------------------------------------------------ */
/* 공통 */
[class*="icon-com"], [class*="icon-com"].btn-txt2::after { background:var(--irImg1) var(--bg-position) no-repeat; background-size:var(--irImg1Size); display:inline-block; width:var(--el-width); height:var(--el-height); vertical-align:middle; overflow:hidden; white-space:nowrap; text-indent:-9999px; }
[class*="icon-com"][class*="btn-txt"]::before { width:var(--el-width); height:var(--el-height); }
[class*="icon-com"] > input { position:absolute; top:0; bottom:0; right:0; left:0; }
[class*="icon-com"][class*="btn-txt"] { overflow:visible; width:auto; height:auto; font-size:var(--fontSz1); color:var(--fontCr8); }
[class*="icon-com"][class*="btn-txt"]::before,
[class*="icon-com"][class*="btn-txt"] > input + span::before { left:auto; margin-left:0; margin-right:0; }
[class*="icon-com"].btn-txt2 { text-indent:0; overflow:visible; }
[class*="icon-com"].btn-txt2::after, [class*="icon-com"].btn-txt3::before { content:''; display:inline-block; vertical-align:middle; background:var(--irImg1) var(--bg-position) no-repeat; background-size:var(--irImg1Size); }
[class*="icon-com"].btn-txt3 { text-indent:0; background:none; overflow:visible; }
[class*="icon-com"].ic3.btn-txt3 { text-decoration:underline; font-size:var(--fontSz1); color:var(--fontCr5); line-height:2.0rem; }
[class*="icon-com"].ic3.btn-txt3::before { margin:0 var(--spc8) 0.2rem 0; }
[class*="icon-bf"]::before { content:''; background:var(--irImg1) var(--bg-position) no-repeat; background-size:var(--irImg1Size); display:inline-block; width:var(--el-width); height:var(--el-height); }

/* 아이콘 정의 */
[class*="icon-com"].ic1 { --bg-position:0 -2.6rem; --el-size:1.8rem; --el-width:1.8rem; --el-height:1.8rem; }
[class*="icon-com"].ic2::after { --bg-position:-12rem -2.6rem; --el-size:1.6rem; --el-width:1.6rem; --el-height:1.6rem; margin:0 0 0.1rem 1.2rem; }
[class*="icon-com"].ic3, [class*="icon-com"].ic3.btn-txt3::before { --bg-position:-4.8rem 0; --el-size:2rem; --el-width:2rem; --el-height:2rem; }
[class*="icon-com"].ic4 { --bg-position:0 0; --el-width:1.6rem; --el-height:1.6rem; }
[class*="icon-com"].ic8::after { --bg-position:-15.4rem -2.6rem; --el-width:0.7rem; --el-height:1.2rem; margin:-0.65rem 0 0 0.8rem; }
[class*="icon-com"].ic19 { --bg-position:-7.2rem 0; --el-size:2.2rem; --el-width:2.2rem; --el-height:2.2rem; }
[class*="icon-com"].ic20 { --bg-position:-2rem -2.6rem; --el-width:1.2rem; --el-height:1.2rem; vertical-align:top; }
[class*="icon-com"].ic21::before { --bg-position:-3.6rem -2.6rem; --el-size:1.2rem; --el-width:1.2rem; --el-height:1.2rem; }
[class*="icon-com"].ic22 { --bg-position:-6rem -2.6rem; --el-width:0.6rem; --el-height:0.7rem; }
[class*="icon-com"].ic23 { --bg-position:-20.4rem -2.6rem; --el-size:2.1rem; --el-width:2.1rem; --el-height:2.1rem; margin-bottom:0.4rem; }
[class*="icon-com"].ic24::before { --bg-position:-14rem -2.6rem; --el-size:1.2rem; --el-width:1.2rem; --el-height:1.2rem; }
[class*="icon-bf"].ic25::before { width:12.8rem; height:12.8rem; background:url('/resources/mini/img/com/i-complate-2.svg') center center no-repeat; background-size:contain; }
[class*="icon-com"].ic64::before { --bg-position:-24rem -16.4rem; width:1.6rem; height:1.6rem; } /* intro : X */
[class*="icon-com"].ic65::before { --bg-position:-28.8rem -22.4rem; width:3.2rem; height:3.2rem; } /* 은행 */
[class*="icon-com"].ic66::before { --bg-position:-32rem -22.4rem; width:3.2rem; height:3.2rem; } /* Pay */
[class*="icon-com"].ic67::before { --bg-position:-35.2rem -22.4rem; width:3.2rem; height:3.2rem; } /* 증권 */
[class*="icon-com"].ic68::before { --bg-position:-38.4rem -22.4rem; width:3.2rem; height:3.2rem; } /* 생명 */
[class*="icon-com"].ic69::before { --bg-position:-28.8rem -19.2rem; width:3.2rem; height:3.2rem; } /* 송금 */
[class*="icon-com"].ic70::before { --bg-position:-32rem -19.2rem; width:3.2rem; height:3.2rem; } /* 충전 */
[class*="icon-com"].ic71::before { --bg-position:-35.2rem -19.2rem; width:3.2rem; height:3.2rem; } /* 호빵 */
[class*="icon-com"].ic72::before { --bg-position:-19.8rem 0; width:2.3rem; height:1.8rem; } /* 결제 */
[class*="icon-com"].ic73::before { --bg-position:-28.8rem -25.6rem; width:3.2rem; height:3.2rem; } /* 호전홈 */
[class*="icon-com"].ic74::before { --bg-position:-32rem -25.6rem; width:3.2rem; height:3.2rem; } /* 결제 */
[class*="icon-com"].ic75::before { --bg-position:-35.2rem -25.6rem; width:3.2rem; height:3.2rem; } /* 송금 */
[class*="icon-com"].ic76::before { --bg-position:-38.4rem -25.6rem; width:3.2rem; height:3.2rem; } /* 쿠폰 */
[class*="icon-com"].ic77::before { --bg-position:-38.4rem -19.2rem; width:3.2rem; height:3.2rem; } /* 전체메뉴 */
[class*="icon-com"].ic78::after { --bg-position:-29.4rem -2.6rem; width:2rem; height:2rem; } /* 내쿠폰 */
[class*="icon-com"].ic79::after { --bg-position:-31.6rem -2.6rem; width:2rem; height:2rem; } /* 알림 */
[class*="icon-com"].ic80::before { --bg-position:center 0; width:1.6rem; height:2.1rem; --irImg1:url('/resources/mini/img/com/logo.svg'); --irImg1Size:contains; } /* 알림 */
[class*="icon-com"].ic81 { --bg-position:0.4rem 0.4rem; width:2.4rem; height:2.4rem; }
[class*="icon-com"].ic82 { --bg-position:-27rem 0; width:2.4rem; height:2.4rem; } /* home */
[class*="icon-com"].ic83 { --bg-position:-34.2rem 0; width:2.4rem; height:2.4rem; } /* user */
[class*="icon-com"].ic84 { --bg-position:-31.8rem 0; width:2.4rem; height:2.4rem; } /* setting */
[class*="icon-com"].ic85::after { --bg-position:-29.4rem 0; width:2.4rem; height:2.4rem; } /* logout */
[class*="icon-com"].ic86::before { --bg-position:0 -19.2rem; width:4.8rem; height:4.8rem; } /* menu1 */
[class*="icon-com"].ic87::before { --bg-position:-4.8rem -19.2rem; width:4.8rem; height:4.8rem; } /* menu2 */
[class*="icon-com"].ic88::before { --bg-position:-9.6rem -19.2rem; width:4.8rem; height:4.8rem; } /* menu3 */
[class*="icon-com"].ic89::before { --bg-position:-14.4rem -19.2rem; width:4.8rem; height:4.8rem; } /* menu4 */
[class*="icon-com"].ic90::before { --bg-position:-19.2rem -19.2rem; width:4.8rem; height:4.8rem; } /* menu5 */
[class*="icon-com"].ic91::before { --bg-position:-24rem -19.2rem; width:4.8rem; height:4.8rem; } /* menu6 */
[class*="icon-com"].ic92::before { --bg-position:0 -24rem; width:4.8rem; height:4.8rem; } /* menu7 */
[class*="icon-com"].ic93::before { --bg-position:-4.8rem -24rem; width:4.8rem; height:4.8rem; } /* menu8 */
[class*="icon-com"].ic94::before { --bg-position:-9.6rem -24rem; width:4.8rem; height:4.8rem; } /* menu9 */
[class*="icon-com"].ic95::before { --bg-position:-14.4rem -24rem; width:4.8rem; height:4.8rem; } /* menu10 */
[class*="icon-com"].ic96::before { --bg-position:-19.2rem -24rem; width:4.8rem; height:4.8rem; } /* menu11 */
[class*="icon-com"].ic97::before { --bg-position:-24rem -24rem; width:4.8rem; height:4.8rem; } /* menu12 */
[class*="icon-com"].ic98::before { width:4.8rem; height:4.8rem; background:url('/resources/mini/img/com/gnb_ico_coupon.svg') center center no-repeat; background-size:contain; } /* menu13 */