@charset "utf-8";

/* Global ---------------------------------------------------------------- */
html {overflow:hidden; width:100%; height:100%;}
body {overflow:hidden; width:100%; margin:0; height:calc(var(--vh, 1vh) * 100);}
html.if_web body {height:100%;}
html.if_android body {height:100%;}
* {-webkit-tap-highlight-color:transparent;}

body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button,select {font-family:'SUITE',Sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-0.3px; font-size:13px;}
body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button,select {-webkit-text-size-adjust:none; text-decoration-skip-ink:none; font-weight:400; color:var(--color-black);}
* {font-family:inherit; font-size:inherit; color:inherit; font-weight:inherit; font-style:inherit}
p,form,span,h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-weight:inherit;}
div,table {margin:0; padding:0; border-spacing:0; border-collapse:collapse; border:none; -webkit-overflow-scrolling:touch;}
table caption {width:0; height:0; font-size:0; visibility:hidden;}
ul,ol,li,td,dl,dt,dd {margin:0; padding:0; font-weight:inherit; font-size:inherit; color:inherit; letter-spacing:inherit;}
li {font-weight:inherit; font-size:inherit; color:inherit;}
a,span {display:inline-block;}
span,div,a,b,strong,label {font-weight:inherit; font-size:inherit; color:inherit; letter-spacing:inherit; line-height:inherit;}
a:visited {text-decoration:none;}
a:link, a:hover, a:active {text-decoration:none;}
u {text-decoration:none;}
img {border:0; max-width:100%}

label {cursor:pointer; overflow:hidden;}
input,select,textarea,a {outline:none; margin:0px; padding:0px;} /* 인풋포커스 라인삭제 */
select {appearance:none; -webkit-appearance:none; -moz-appearance:none;} /* 셀렉트박스 기본 화살표 제거 */
input[type=checkbox],input[type=radio] {-webkit-appearance:none; -webkit-gradient:none; -webkit-border-radius:0; border:none;}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=tel],input[type=date],input[type=file],input[type=search], input[type=submit],input[type=url], input[type=button], button
{-webkit-appearance:none; -webkit-gradient:none; -webkit-border-radius:0; border:none; background:none; box-sizing:border-box; padding:0;} /* ios 기본 스타일 제거 */
input:disabled, textarea:disabled, select:disabled {opacity:1; -webkit-text-fill-color:inherit;} /* ios 에서 disabled 스타일 제거 */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;} /* 오른쪽에 나타나는 화살표 버튼없애기 */
input[type=date]::-webkit-outer-spin-button, input[type=date]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0; border:0;} /* 오른쪽에 나타나는 화살표 버튼없애기 */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {display:none;} /* 검색 기본 x버튼 없애기 */


/* Web Font (타이틀 등 주요텍스트) ========================================= */
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil1Thin.woff2') format('woff2');
    font-weight:100;
    font-style:normal;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil2Light.woff2') format('woff2');
    font-weight:300;
    font-style:normal;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil3Regular.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil4Medium.woff2') format('woff2');
    font-weight:500;
    font-style:normal;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight:700;
    font-style:normal;
}
@font-face {
    font-family:'TheJamsil';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil6ExtraBold.woff2') format('woff2');
    font-weight:800;
    font-style:normal;
}


:root {
	--color-point:#0047bb; /* 포인트 HEX */
	--color-point-rgb:0,71,187; /* 포인트 RGB */

	--color-black:#030d1a; /* 블랙 HEX */
	--color-black-rgba:0,12,26; /* 블랙 RGB */
	--layout-gap:26px; /* 좌우공간 */
}





/* Essential ========================================= */
.wrap {overflow:hidden; height:100%; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; box-sizing:border-box;}
.upper_link {position:absolute; left:0; top:0; width:100%; height:100%; z-index:9;}


/* System (공통디자인/폼요소) -------------------------------------------------------------------------------------------------------------------------------- */

/* Button ========================================= */
.sy_btn {display:flex; flex-direction:row; justify-content:center; align-items:center; padding:0 20px; border-radius:3px; font-size:16px; font-weight:600; box-sizing:border-box;}
.sy_btn {overflow:hidden; max-width:100%; height:60px; background:var(--color-point); border:1px solid var(--color-point); color:#fff;}
.sy_btn.type_line {background:#fff; color:var(--color-point);}
.sy_btn.type_light {background:rgba(var(--color-point-rgb),0.07); border-color:rgba(var(--color-point-rgb),0.3); color:var(--color-point);}
.sy_btn.type_not {background:rgba(var(--color-point-rgb),0.15); border:0; color:#fff; pointer-events:none !important;}
.sy_btn.type_kakao {border-color:#f9e000; background:#f9e000; color:#3c1d1e;}
.sy_btn.type_kakao strong {padding:3px 0 3px 35px; background:url('../images/system/btn_kakao.svg') no-repeat -7px center; background-size:43px;}
.sy_btn.type_tel strong {padding-left:20px; background:url('../images/btn_tel_blue.svg') no-repeat left center; background-size:14px;}
.sy_btn.type_blank strong {padding-right:17px; background:url('../images/btn_blank.svg') no-repeat right center; background-size:12px;}



/* Input / Textarea ========================================= */
.sy_form {width:100%; font-size:14px; font-weight:500; box-sizing:border-box; border-radius:3px !important; background:#fff !important; color:var(--color-black);}
.sy_form {transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; transition-property:border,box-shadow}
.sy_form::placeholder {color:rgba(var(--color-point-rgb),0.25);}
.sy_form::-webkit-input-placeholder {color:rgba(var(--color-point-rgb),0.25);}
.sy_form::-moz-placeholder {color:rgba(var(--color-point-rgb),0.25);}
input.sy_form {border:1px solid rgba(var(--color-point-rgb),0.25); padding:0 15px; height:50px;}
textarea.sy_form {border:1px solid rgba(var(--color-point-rgb),0.25); overflow-y:auto; padding:15px; resize:none; line-height:1.5;}
.sy_form:focus {border-color:var(--color-point) !important; box-shadow:0 0 0 3px rgba(var(--color-point-rgb),0.15);}
.sy_form:disabled {background-color:rgba(var(--color-point-rgb),0.04) !important; border-color:#dce8fe; color:rgba(var(--color-point-rgb),0.45);}
.sy_form:read-only {background-color:rgba(var(--color-point-rgb),0.04) !important; border-color:rgba(var(--color-point-rgb),0.25);}

/* 일부 변경 요청 */
.placeholder_lala::-webkit-input-placeholder {color:black;}

/* 날짜선택 */
input.sy_form.type_date {width:145px; background:#fff url('../images/system/ic_calendar.svg?v=1') no-repeat right 15px center !important; background-size:16px !important;}
input.sy_form.type_date:focus {background-image:url('../images/system/ic_calendar_blue.svg?v=1') !important;}



/* Input Calendar ========================================= */
.sy_days {display:flex; flex-direction:row; justify-content:flex-start; align-items:center;}
.sy_days .unit {width:20px; text-align:center; font-weight:600; font-size:14px;}



/* Form tip ========================================= */
.sy_tip {margin-top:5px; font-size:11px; font-weight:500; color:#b6c1d4; word-break:keep-all; width:100%;}
.sy_tip.type_error {color:#ff2a2a;} /* 에러 */
.sy_tip.type_pass {color:#45e900;} /* 통과 */



/* Select ========================================= */
select.sy_drop {width:100%; height:50px; padding:0 15px; padding-right:30px; font-size:14px; font-weight:500; border-radius:3px; box-sizing:border-box; border:1px solid rgba(var(--color-point-rgb),0.25); color:var(--color-black); overflow:hidden}
select.sy_drop {position:relative; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; background:#fff url('../images/system/ic_arrow_down.svg') no-repeat right 15px center; background-size:10px 7px;}
select.sy_drop:focus {border-color:var(--color-point) !important; box-shadow:0 0 0 3px rgba(var(--color-point-rgb),0.15);}
select.sy_drop:disabled {background-color:#f5f9ff !important; border-color:#dce8fe; color:rgba(var(--color-point-rgb),0.45);}



/* Label ========================================= */
label.sy_label {position:relative; display:inline-flex; justify-content:center; align-items:center; flex-direction:row;}
label.sy_label * {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;}
label.sy_label .tie {position:relative; display:flex; justify-content:flex-start; align-items:center; flex-direction:row;} /* 라벨크기변경될때 */
label.sy_label input {width:26px; height:26px; background:#fff; border:1px solid rgba(var(--color-point-rgb),0.25); border-radius:100px; box-sizing:border-box; cursor:pointer}
label.sy_label .tx {font-size:14px; font-weight:500; color:var(--color-black); margin-left:7px;}
label.sy_label input[type=radio]+ .tx:before {content:""; position:absolute; left:6px; top:6px; width:14px; height:14px; background:rgba(var(--color-point-rgb),0.1); border-radius:100px;}
label.sy_label input[type=checkbox]+ .tx:before {content:""; position:absolute; left:5px; bottom:6px; height:7px; width:2px; background:rgba(var(--color-point-rgb),0.1); border-radius:100px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
label.sy_label input[type=checkbox]+ .tx:before {transform-origin:right top}
label.sy_label input[type=checkbox]+ .tx:after {content:""; position:absolute; left:10px; bottom:8.5px; height:14px; width:2px; background:rgba(var(--color-point-rgb),0.1); border-radius:100px; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
label.sy_label input[type=checkbox]+ .tx:after {transform-origin:left bottom;}

label.sy_label input:checked {border-color:var(--color-point);}
label.sy_label input:checked+ .tx {color:var(--color-point);}
label.sy_label input[type=radio]:checked+ .tx:before {animation:mv_label_radio 0.3s ease; -webkit-animation:mv_label_radio 0.3s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}
label.sy_label input[type=radio]:checked+ .tx:before {background:var(--color-point); transform:scale(0); -webkit-transform:scale(0);}
label.sy_label input[type=checkbox]:checked {background:var(--color-point);}
label.sy_label input[type=checkbox]:checked+ .tx:before {background:#fff;}
label.sy_label input[type=checkbox]:checked+ .tx:before {animation:mv_label_check_short 0.35s ease; -webkit-animation:mv_label_check_short 0.35s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}
label.sy_label input[type=checkbox]:checked+ .tx:after {background:#fff;}
label.sy_label input[type=checkbox]:checked+ .tx:after {animation:mv_label_check_long 0.35s ease; -webkit-animation:mv_label_check_long 0.35s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}



/* Label : onoff Checkbox ========================================= */
label.sy_label_onoff {position:relative;}
label.sy_label_onoff * {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;}
label.sy_label_onoff *:before {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;}
label.sy_label_onoff input {position:absolute; left:0; top:0; width:1px; height:1px;}
label.sy_label_onoff .tx {position:relative; width:54px; height:26px; background:rgba(var(--color-point-rgb),0.25); border-radius:100px; box-sizing:border-box;}
label.sy_label_onoff .tx:before {content:"";position:absolute; left:5px; top:50%; transform:translateY(-50%); width:16px; height:16px; background:#fff; border-radius:100%;}
label.sy_label_onoff .tx strong {position:absolute; top:50%; font-size:10px; font-weight:800; color:#fff; transform:translateY(-50%); margin:0 8px;}
label.sy_label_onoff .tx strong.on {left:8px; opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0);}
label.sy_label_onoff .tx strong.off {right:0;}
label.sy_label_onoff input:checked+ .tx {background:var(--color-point);}
label.sy_label_onoff input:checked+ .tx:before {left:calc(100% - 20px);}
label.sy_label_onoff input:checked+ .tx strong.on {opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); left:0}
label.sy_label_onoff input:checked+ .tx strong.off {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); right:8px}



/* Label : Major Checkbox ========================================= */
label.sy_label_major {position:relative; display:block; width:100%; box-sizing:border-box;}
label.sy_label_major * {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;}
label.sy_label_major input {width:0; height:0; position:absolute; left:0; top:0;}
label.sy_label_major .tx {font-size:14px; font-weight:500; color:var(--color-black); border:1px solid rgba(var(--color-point-rgb),0.2); border-radius:3px; height:50px; padding:0 15px; background:rgba(var(--color-point-rgb),0.08);}
label.sy_label_major .tx {display:flex; justify-content:center; align-items:flex-start; flex-direction:column; position:relative; box-sizing:border-box;}
label.sy_label_major input+ .tx:before {content:""; position:absolute; right:25px; bottom:17px; height:7px; width:2px; background:rgba(var(--color-point-rgb),0.25); border-radius:100px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
label.sy_label_major input+ .tx:before {transform-origin:right top}
label.sy_label_major input+ .tx:after {content:""; position:absolute; right:20px; bottom:19.5px; height:14px; width:2px; background:rgba(var(--color-point-rgb),0.25); border-radius:100px; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
label.sy_label_major input+ .tx:after {transform-origin:left bottom;}
label.sy_label_major input:checked+ .tx {border-color:var(--color-point); color:var(--color-point); background:rgba(var(--color-point-rgb),0.25);}
label.sy_label_major input:checked+ .tx:before {background:var(--color-point);}
label.sy_label_major input:checked+ .tx:before {animation:mv_label_check_short 0.35s ease; -webkit-animation:mv_label_check_short 0.35s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}
label.sy_label_major input:checked+ .tx:after {background:var(--color-point);}
label.sy_label_major input:checked+ .tx:after {animation:mv_label_check_long 0.35s ease; -webkit-animation:mv_label_check_long 0.35s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}



/* 라벨 애니메이션 */
@-webkit-keyframes mv_label_radio { /* 라디오 */
    0% {transform:scale(0); -webkit-transform:scale(0);}
    100% {transform:scale(1.0); -webkit-transform:scale(1.0);}
}
@keyframes mv_sy_label_radio {
    0% {transform:scale(0); -webkit-transform:scale(0);}
    100% {transform:scale(1.0); -webkit-transform:scale(1.0);}
}
@-webkit-keyframes mv_label_check_short { /* 체크박스 선1 */
    0% {transform:rotate(-45deg) scale(1,0); -webkit-transform:rotate(-45deg) scale(1,0);}
	50% {transform:rotate(-45deg) scale(1,1); -webkit-transform:rotate(-45deg) scale(1,1);}
    100% {transform:rotate(-45deg) scale(1,1); -webkit-transform:rotate(-45deg) scale(1,1);}
}
@keyframes mv_label_check_short {
    0% {transform:rotate(-45deg) scale(1,0); -webkit-transform:rotate(-45deg) scale(1,0);}
	50% {transform:rotate(-45deg) scale(1,1); -webkit-transform:rotate(-45deg) scale(1,1);}
    100% {transform:rotate(-45deg) scale(1,1); -webkit-transform:rotate(-45deg) scale(1,1);}
}

@-webkit-keyframes mv_label_check_long { /* 체크박스 선2 */
    0% {transform:rotate(45deg) scale(1,0); -webkit-transform:rotate(45deg) scale(1,0);}
	50% {transform:rotate(45deg) scale(1,0); -webkit-transform:rotate(45deg) scale(1,0);}
    100% {transform:rotate(45deg) scale(1,1); -webkit-transform:rotate(45deg) scale(1,1);}
}
@keyframes mv_label_check_long {
    0% {transform:rotate(45deg) scale(1,0); -webkit-transform:rotate(45deg) scale(1,0);}
	50% {transform:rotate(45deg) scale(1,0); -webkit-transform:rotate(45deg) scale(1,0);}
    100% {transform:rotate(45deg) scale(1,1); -webkit-transform:rotate(45deg) scale(1,1);}
}



/* 이미지업로드 ========================================= */
.sy_file {overflow:hidden; width:100%; box-sizing:border-box; text-align:center; position:relative;}
.sy_file .file_name {margin-top:5px; font-weight:500;}
.sy_file .upload_stage {position:relative; width:100%; background:rgba(var(--color-point-rgb),0.05); aspect-ratio: auto 1 / 1;}
.sy_file .btn_file {position:absolute; left:0; top:0; z-index:3; width:100%; height:100%; display:flex; flex-direction:row; justify-content:center; align-items:center; border-radius:3px; border:1px dashed rgba(var(--color-point-rgb),0.25);}
.sy_file .btn_file {box-sizing:border-box;}
.sy_file .btn_file strong {padding-top:30px; font-size:12px; font-weight:600; color:rgba(0,0,0,0.2);; background:url('../images/system/ic_upload_img.svg?v=1') no-repeat center top; background-size:28px 23px;}

.sy_file .uploaded {overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; border-radius:3px; border:1px dashed var(--color-point); box-sizing:border-box;}
.sy_file .uploaded img {width:100%; height:100%; object-fit:cover; border-radius:3px; }
.sy_file .uploaded .btn_delete {position:absolute; right:5px; top:5px; z-index:6; width:25px; height:25px; border-radius:3px;}
.sy_file .uploaded .btn_delete {background:var(--color-black) url('../images/system/ic_close_white.svg') no-repeat center center; background-size:8px;}
.sy_file .uploaded .btn_file {border:0;}



/* 내용없음 ========================================= */
.sy_none {display:flex; flex-direction:row; justify-content:center; align-items:center; padding:30px 0;}
.sy_none strong {font-size:14px; font-weight:500; color:rgba(0,0,0,0.2);}
.sy_none strong:before {content:""; display:block; height:42px; margin-bottom:20px; background:url('../images/system/ic_no_data.svg?v=1') no-repeat center top; background-size:38px 42px;}



/* 툴팁 ========================================= */
.sy_tooltip {display:flex; flex-direction:row; justify-content:center; align-items:center; z-index:10}
.sy_tooltip .btn_tip {width:15px; height:15px; background:transparent url('../images/system/ic_tooltip.svg?v=2') center center no-repeat; background-size:15px;}
.sy_tooltip .btn_tip {opacity:0.3; filter:alpha(opacity=30); -ms-filter:alpha(opacity=30);}
.sy_tooltip .open_tip {position:absolute; left:0; top:45px; z-index:50; min-width:250px; box-sizing:border-box; padding:10px; border-radius:3px; border:1px solid var(--color-black); background:#fff; padding-right:25px;}
.sy_tooltip .open_tip {font-weight:500; line-height:1.4; box-shadow:5px 5px 5px rgba(0,0,0,0.1); display:none; word-wrap:break-word; word-break:keep-all; white-space:normal; font-size:12px;}
.sy_tooltip .open_tip:before {content:""; width:8px; height:8px; display:block; background:transparent url('../images/system/ic_close_black.svg') center center no-repeat; background-size:8px;}
.sy_tooltip .open_tip:before {position:absolute; right:10px; top:13px; opacity:0.3; filter:alpha(opacity=30); -ms-filter:alpha(opacity=30);}
.sy_tooltip .open_tip .title {color:var(--color-black); margin-bottom:5px; font-weight:700; line-height:1}
.sy_tooltip.right .open_tip {left:auto; right:0}
.sy_tooltip.if_open .open_tip {display:block;}



/* 카카오톡 채팅 ========================================= */
.sy_chat {position:absolute; right:var(--layout-gap); bottom:15px; display:flex; flex-direction:row; justify-content:flex-start; align-items:center;}
.sy_chat .help_guide {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; position:relative; height:35px; box-sizing:border-box; border:0.8px solid rgba(var(--color-point-rgb),0.25); border-radius:100px; padding:0 5px 0 15px;}
.sy_chat .help_guide {margin-right:10px; animation:mv_chat_guide 0.5s infinite forwards; -webkit-animation:mv_chat_guide 0.5s infinite forwards; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;}
.sy_chat .help_guide:before {content:""; position:absolute; right:-7.2px; top:50%; transform:translateY(-50%); width:8px; height:10px; background:url('../images/system/ic_channel_edge.svg') no-repeat center center; }
.sy_chat .help_guide:before {background-size:100%;}
.sy_chat .help_guide strong {font-size:14px; font-weight:500; color:rgba(var(--color-point-rgb),0.45); white-space:nowrap;}
.sy_chat .help_guide .btn_close {height:100%; width:29px; background:url('../images/system/ic_close_black.svg') no-repeat center center; background-size:9px;}
.sy_chat .link_kakao {width:45px; height:45px; background:url('../images/system/btn_kakao.svg') no-repeat center center; border-radius:100%;}
.sy_chat.if_close .help_guide {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); visibility:hidden}

@-webkit-keyframes mv_chat_guide {
	0% {transform:translateX(0);}
	50% {transform:translateX(-5px);}
	100% {transform:translateX(0);}
}
@keyframes mv_chat_guide {
	0% {transform:translateX(0);}
	50% {transform:translateX(-5px);}
	100% {transform:translateX(0);}
}




/* 말풍선 ========================================= */
.sy_bubble {position:absolute; right:10px; top:-28px; white-space:nowrap; background:var(--color-black); color:#fff; font-size:12px; display:flex; justify-content:center; align-items:center; flex-direction:row; height:30px;}
.sy_bubble {padding-left:10px; border-radius:5px; animation:mv_bubble_show 0.5s ease; -webkit-animation:mv_bubble_show 0.5s ease; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards}
.sy_bubble {transform:translateY(10px); opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); animation-delay:0.3s; -webkit-animation-delay:0.3s}
.sy_bubble:before {content:""; position:absolute; right:15px; bottom:-6px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid var(--color-black)}
.sy_bubble .btn_close {background:transparent url('../images/system/ic_close_white.svg') center center no-repeat; width:28px; height:28px; background-size:8px;}
.sy_bubble.if_close {display:none;}

@-webkit-keyframes mv_bubble_show {
    0% {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:scale(0.7); -webkit-transform:scale(0.7);}
    30% {opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); transform:scale(1.1); -webkit-transform:scale(1.1);}
    100% {opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); transform:scale(1.0); -webkit-transform:scale(1.0);}
}
@keyframes mv_bubble_show {
    0% {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:scale(0.7); -webkit-transform:scale(0.7);}
    30% {opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); transform:scale(1.1); -webkit-transform:scale(1.1);}
    100% {opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); transform:scale(1.0); -webkit-transform:scale(1.0);}
}




/* 페이지네이트 ======================================== */
.sy_pagi {position:relative; margin:20px 0 30px;}
.sy_pagi .inner {display:flex; flex-direction:row; justify-content:center; align-items:center;}

.sy_pagi .nextprev {font-size:0px;}
.sy_pagi .nextprev .btn {font-size:0px; box-sizing:border-box;}
.sy_pagi .nextprev .btn .icon {width:30px; height:30px; background-position: center center !important; background-repeat:no-repeat !important; background-size:6px !important;}
.sy_pagi .nextprev .btn .ok {display:none;}
.sy_pagi .nextprev .btn .no {opacity: 0.2; filter: alpha(opacity=20); -ms-filter: alpha(opacity=20); pointer-events: none !important;}
.sy_pagi .nextprev .click .ok {display:block;}
.sy_pagi .nextprev .click .no {display:none;}
.sy_pagi .nextprev .ic_prev .icon {background-image:url('../images/system/ic_arrow_left_black.svg');}
.sy_pagi .nextprev .ic_next .icon {background-image:url('../images/system/ic_arrow_right_black.svg');}
.sy_pagi .nextprev .btn_num {display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
.sy_pagi .nextprev .btn_num .more {width: 30px; height: 30px; background: transparent url('../images/c_img/sy_pagi_more.svg') center center no-repeat; background-size: 9px auto !important;}

.sy_pagi .number {display:flex; flex-direction:row; justify-content:center; align-items:center; gap:5px; margin:0 5px;}
.sy_pagi .num {font-size:13px; color:var(--color-black); background:transparent; border:1px solid #dce8fe; font-weight:500; border-radius:100px; font-weight:600; background:#fff;}
.sy_pagi .num {display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 30px; height: 30px; box-sizing: border-box; padding:0 2px;}
.sy_pagi .number .hit {border-color:rgba(var(--color-point-rgb),0.6); background:rgba(var(--color-point-rgb),0.1); color:var(--color-point);}




/* 로딩 ======================================== */
.sy_loading {position:fixed; top:50%; left:50%; z-index:100000; transform:translate(-50%, -50%); width:200px; height:200px; border-radius:100%; box-shadow:0 0 30px rgba(0,0,0,0.1); text-align:center;}
.sy_loading {display:flex; flex-direction:column; justify-content:center; align-items:center; background:#fff;}
.sy_loading .picto {font-size:0px; mix-blend-mode:darken}
.sy_loading .picto img {width:65px;}
.sy_loading .comment {margin-top:10px; font-weight:600; line-height:1.5; color:rgba(var(--color-point-rgb),0.45); font-size:12px;}
.sy_loading .comment strong {display:block; color:var(--color-black); font-size:15px; font-weight:600;}




/* Layout Design -------------------------------------------------------------------------------------------------------------------------------- */

/* 개발팀 묶음용 */
.program_wrap {flex:1; display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; overflow-y:auto;}


/* 페이지 탑(타이틀) ========================================= */
.sc_Pagetop {flex:none; position:relative; border-bottom:0.8px solid rgba(var(--color-point-rgb),0.1); box-sizing:border-box; margin-top:env(safe-area-inset-top); z-index:10}
.sc_Pagetop .title {font-family:'TheJamsil'; font-size:18px; text-align:center; padding:0 var(--layout-gap); display:flex; flex-direction:row; justify-content:center; align-items:center; height:70px; font-weight:500;}
.sc_Pagetop .title img {height:50px;}
.sc_Pagetop .side_area {position:absolute; top:0; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; height:100%; box-sizing:border-box; margin:0 16px;}
.sc_Pagetop .side_area.left {left:0; margin-right:0px;}
.sc_Pagetop .side_area.right {right:0; margin-left:0px;}
.sc_Pagetop .btn_icon {height:50px; background-repeat:no-repeat !important; background-position:center center !important;}
.sc_Pagetop .btn_icon.type_back {width:28px; background-image:url('../images/system/ic_arrow_left_black.svg'); background-size:8px;}
.sc_Pagetop .btn_icon.type_home {width:36px; background-image:url('../images/system/ic_top_home.svg'); background-size:16px;}
.sc_Pagetop .btn_icon.type_close {width:32px; background-image:url('../images/system/ic_close_black.svg'); background-size:12px;}
.sc_Pagetop .btn_icon.type_pdf {width:32px; background-image:url('../images/system/ic_pdf_down.svg'); background-size:20px;}

.sc_Pagetop.type_noline {border-bottom:none;}
.sc_Pagetop.type_single .title {text-align:left; justify-content:flex-start;}
.sc_Pagetop.type_bg {background:#F5F7FB;}

.sc_Pagetop .process {margin-right:5px;}
.sc_Pagetop .process ul {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:5px; overflow:hidden;}
.sc_Pagetop .process li {list-style:none; position:relative;}
.sc_Pagetop .process .step {display:flex; flex-direction:row; justify-content:center; align-items:center; width:19px; height:19px; border-radius:100px; color:rgba(var(--color-point-rgb),0.45);}
.sc_Pagetop .process .step {box-sizing:border-box; font-size:10px; font-weight:800; background:rgba(var(--color-point-rgb),0.1); }
/* .sc_Pagetop .process li:after {content:""; position:absolute; right:-5px; width:100%; top:50%; z-index:-1; transform:translateY(-50%); height:1px; background:#dce8fe;} */
.sc_Pagetop .process li.if_complete .step {border:1px solid var(--color-point); position:relative; font-size:0px; background-color:#fff;}
.sc_Pagetop .process li.if_complete .step:before {content:""; width:1.2px; height:5px; position:absolute; left:5px; top:8px; background:var(--color-point); transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.sc_Pagetop .process li.if_complete .step:after {content:""; width:1.2px; height:8px; position:absolute; left:9px; top:5px; background:var(--color-point); transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.sc_Pagetop .process li.if_complete:after {background:var(--color-point);}
.sc_Pagetop .process li.if_active .step {background:var(--color-point); color:#fff;}





/* 페이지탑 (WEB접속) ========================================= */
.sc_Webtop {padding:0 var(--layout-gap); border-radius:0 0 50px 0; background:rgba(var(--color-point-rgb),0.3) url('../images/bg_circle.svg') no-repeat right -140px bottom -100px; background-size:286px; height:100px;}
.sc_Webtop {display:flex; justify-content:center; align-items:stretch; flex-direction:column;}
.sc_Webtop .logo {display:flex; flex-direction:row; justify-content:space-between; align-items:center; font-size:0;}
.sc_Webtop .logo img {height:16px;}
.sc_Webtop .timer {font-family:'TheJamsil'; font-size:20px; font-weight:100; color:#ff2a2a; letter-spacing:0; line-height:1;}
.sc_Webtop .page_title {margin-top:10px; font-family:'TheJamsil'; font-size:20px; color:var(--color-point);}
.sc_Webtop .addition {margin-top:5px; font-weight:500; color:rgba(var(--color-point-rgb),0.6); font-size:14px;}






/* 페이지검색 ========================================= */
.sc_Search {background:rgba(var(--color-point-rgb),0.15);}
.sc_Search li {list-style:none;}
.sc_Search .term_find {padding:0 var(--layout-gap); height:45px; display:flex; justify-content:flex-end; align-items:center; flex-direction:row; color:rgba(var(--color-point-rgb),0.6); }
.sc_Search .term_find .btn_search {content:""; width:14px; height:100%; background:transparent url('../images/btn_search.svg') center center no-repeat; background-size:14px; margin-right:auto;}
.sc_Search .term_find .month {font-weight:500; padding-right:10px; margin-right:8px; position:relative; font-size:13px;}
.sc_Search .term_find .month:after {content:""; width:0.85px; height:10px; position:absolute; right:0; top:50%; transform:translateY(-50%); background:rgba(var(--color-point-rgb),0.25);}
.sc_Search .term_find .date {font-size:14px; font-weight:700; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:3px; }
.sc_Search .term_find .date:after {content:""; width:10px; height:10px; background:transparent url('../images/system/ic_arrow_down.svg') right center no-repeat; background-size:10px 6px; }
.sc_Search .term_find .date:after {transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out;}

.sc_Search .term_form {padding:0 var(--layout-gap); overflow:hidden; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; height:0px;}
.sc_Search .term_form .month_type {background:rgba(var(--color-point-rgb),0.08); overflow:hidden; border-radius:3px; border:0.8px solid rgba(var(--color-point-rgb),0.25); margin-bottom:10px; margin-top:5px;}
.sc_Search .term_form .month_type ul {display:flex; justify-content:center; align-items:center; flex-direction:row}
.sc_Search .term_form .month_type li {flex:1; box-sizing:border-box;}
.sc_Search .term_form .month_type li+ li {border-left:0.8px solid rgba(var(--color-point-rgb),0.25);}
.sc_Search .term_form .month_type .term {display:flex; justify-content:center; align-items:center; flex-direction:column; height:40px; color:rgba(var(--color-point-rgb),0.45); font-weight:500;}
.sc_Search .term_form .month_type li.hit .term {background:#fff; color:rgba(var(--color-point-rgb),0.6); font-weight:600;}
.sc_Search .term_form .sy_days input.sy_form.type_date {flex:1; box-sizing:border-box;}

.sc_Search .form_btn {background:transparent; padding:0px; margin-top:10px;}
.sc_Search .form_btn .sy_btn {height:50px;}

.sc_Search.if_open_form .term_form {height:195px;}
.sc_Search.if_open_form .term_find .date:after {transform:rotate(180deg); -webkit-transform:rotate(180deg);}







/* 페이지 메뉴 ========================================= */
.sc_Tab {flex:none; }
.sc_Tab ul {display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch;}
.sc_Tab li {flex:1; list-style:none;}
.sc_Tab .tab_menu {position:relative; height:50px; font-size:15px; font-weight:600; color:rgba(var(--color-point-rgb),0.45); display:flex; flex-direction:row; justify-content:center; align-items:center;}
.sc_Tab .tab_menu:before {content:""; position:absolute; left:0; bottom:0; width:100%; height:0.8px; background:rgba(var(--color-point-rgb),0.25);}
.sc_Tab li.hit .tab_menu {color:var(--color-black);}
.sc_Tab li.hit .tab_menu:before {height:2px; background:var(--color-black);}






/* 페이지 하단(버튼) ========================================= */
.sc_Bottom {flex:none; padding:0 var(--layout-gap) 0; background:#fff; padding-bottom:env(safe-area-inset-bottom); position:relative; z-index:10}
.sc_Bottom li {list-style:none;}
html.if_android .sc_Bottom {margin-bottom:20px;}
html.if_web .sc_Bottom {padding-bottom:20px;}
.sc_Bottom.bg {background:#f5f7fb;}

.sc_Bottom .page_btn {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; flex-wrap:nowrap; gap:10px;}
.sc_Bottom .page_btn li {flex:1;}
.sc_Bottom .page_btn li.this_minor {flex:none;}
.sc_Bottom .page_btn li.this_file {}
.sc_Bottom .page_btn li.this_home {}
.sc_Bottom .page_btn .sy_btn {height:55px;}
.sc_Bottom .more_agree {margin-bottom:10px;}

.sc_Bottom .page_agree {margin-bottom:10px; display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch;}
.sc_Bottom .page_agree label.sy_label {flex:1; justify-content:flex-start;}
.sc_Bottom .page_agree label.sy_label .tx {color:rgba(var(--color-point-rgb),0.45);}
.sc_Bottom .page_agree .btn_view {width:35px; background:url('../images/system/ic_arrow_right_sky.svg') no-repeat right center; background-size:7px 10px;}

.sc_Bottom .p_Form {margin-bottom:10px;}

.sc_Bottom .btn_kakao_ch {margin-top:20px; background:#f9e000; border-radius:100px; position:relative; display:block; padding:0 20px; box-sizing:border-box;}
.sc_Bottom .btn_kakao_ch:after {content:""; width:20px; height:20px; background:transparent url('../images/ic_contact_send.svg') center center no-repeat; background-size:20px;}
.sc_Bottom .btn_kakao_ch:after {position:absolute; right:20px; top:50%; transform:translateY(-50%);}
.sc_Bottom .btn_kakao_ch strong {background:transparent url('../images/ic_contact_kakao.svg') left center no-repeat; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; height:55px; }
.sc_Bottom .btn_kakao_ch strong {background-size:22px; padding-left:30px; font-weight:600; font-size:15px;}


/* 페이지 내용 ========================================= */
.sc_Section {flex:1; overflow:auto; padding:25px var(--layout-gap) 50px;}



/* 다음주소찾기 ======================================== */
.post_popup_section {position:fixed; left:0; top:0; background:rgba(0,0,0,0.6);  width:100% !important; height:100% !important; box-sizing:border-box; padding:50px 15px;}
.post_popup_section {display:flex; justify-content: center; align-items: center; flex-direction:column; z-index:1000}
.post_popup_section> div {order:1;}
.post_popup_section .post_close_btn {position:static !important; order:2;}