@charset "utf-8";

/* ===== root ===== */ 
:root {
	--primary01:#007d82;
	--primary:#01a5ac;
	--down:#4659ff;
	--up:#d70d60;
	--ready:#1d6dc8;
	/*--error:#dc131c;*/
	--error:#d70d60;
	--cancel:#5e6976;
	
	--sky:#36b8e0;
	--peacock:#3e9eca;
	--blue:#6e7aff;
	--red:#e34f5d;
	
	--gray100:#212529;
	--gray90:#495057;
	--gray80:#6a737b;
	--gray70:#838d95;
	--gray60:#adb5bd;
	--gray50:#ced4da;
	--gray40:#dee2e6;
	--gray30:#e9ecef;
	--gray20:#f0f2f4;
	--gray10:#f8f9fa; 
	
	--black:#000;
	--white:#fff;
	
	--bg-secondary:#e9f8f9;
	--bg-gray200:#f0f2f4;
	--bg-gray100:#f8f9fa;
}
 
/* ===== Reset ===== */
* {margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box;vertical-align:middle;-webkit-appearance:none;appearance:none;-moz-appearance:none;resize:none;outline:0;border:0;}
* {-webkit-text-size-adjust:none;word-break:break-word;font-family:'NotoSans', sans-serif;} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
*::before, *::after {-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box;}

html, body {position:relative;width:100%;height:100%;-webkit-tap-highlight-color:rgba(255,255,255,0);overscroll-behavior:none;} 
html {font-size:62.5%;} /* rem 기준 폰트 사이즈 */
body {min-height:100%;font-size:1.6rem;color:var(--gray90);line-height:1.5;letter-spacing:-0.03rem;}

::-webkit-scrollbar {display:none;}
/* ::-webkit-scrollbar-thumb {background:transparent;} */
/* ::-webkit-scrollbar-track {background:transparent;} */

a:link {text-decoration:none;}
a:focus {outline:none;}
a:active,a:hover {outline:0;text-decoration:none;}
a:visited {text-decoration:none;}

h1, h2, h3, h4, h5, h6 {font-weight:normal;font-size:inherit;}
strong {font-weight:normal;vertical-align:middle;}
sub, sup, em {position:relative;vertical-align:baseline;font-style:normal;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
span, em {vertical-align:top;}

ul, ol, li {list-style:none;}

button {cursor:pointer;}
button, input, select, textarea {border:0 none;outline:0 none;background-color:transparent;border-radius:0;}
textarea {vertical-align:top;}

table {border-collapse:collapse;empty-cells:show;border-spacing:0;table-layout:fixed;}
table caption, fieldset legend {position:absolute;left:-9999px;}

/*input reset*/
::-webkit-input-placholder {}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {-webkit-text-fill-color:var(--gray100);transition:background-color 5000s ease-in-out 0s;}

/*search, number reset*/
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-deciration {-webit-appearance:none;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance:none;}

/* ===== Layout ===== */
/* page template(sub) */
.wrap, 
#wrap {height:100%;display:flex;flex-direction:column;flex-grow:1;min-height:0;/*chrome scroll bug fix*/}
.wrap header {display:flex;align-items:center;position:relative;min-height:5.6rem;background:var(--white);}
.wrap header button {position:absolute;top:1.2rem;width:3.2rem;height:3.2rem;font-size:0;}
.wrap header .btn-prev {left:2.0rem;background:url(../images/btn-32-prev.png) no-repeat 0 0/contain;}
.wrap header .btn-close {right:2.0rem;background:url(../images/btn-32-close.png) no-repeat 0 0/contain;}

.wrap header h1 {flex:1;padding:0 5.6rem;font-size:1.8rem;color:var(--gray100);text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;line-height:150%;}

/*.wrap.st-04 {background:#27b2a5;} /* AS-IS full bg 녹색 - 간편비밀번호 설정 등 */
  
.content {flex:1;display:flex;flex-direction:column;flex-grow:1;min-height:0;} 
.content > .content-top {padding:3.0rem 2.0rem 0;} 
.scroll, .scroll-not {flex:1;padding:3.0rem 2.0rem calc(4.0rem + 1.6rem);overflow-y:auto;overscroll-behavior:none;}
.scroll .content-top, .scroll-not .content-top {margin-bottom:3.0rem;}
.scroll .content-top .htit-st01 + *, .scroll-not .content-top .htit-st01 + * {margin-top:1.0rem !important;}
.scroll .content-top .htit-st03 + *, .scroll-not .content-top .htit-st03 + * {margin-top:1.6rem;}
.scroll .content-top .htit-st01 + .sub-txt, .scroll .content-top .htit-st03 + .sub-txt {margin-top:1rem;}

.scroll.vbox {padding:3.0rem 2.0rem calc(4.0rem + 1.6rem);}
/*.wrap .scroll > * {margin-bottom:1rem;} *//*임의*/
/*
.scroll > *:first-child:not(.box-wrap, .input-code-num) {margin-top:.5rem;}
.scroll > .combo-toggle {padding-bottom:0 !important;} /*ios 대응관련 재정의*
*/

/* .wrap.bg-gray .scroll > *:last-child {padding-bottom:4.5rem;} */

/* .scroll .box-wrap {padding-bottom:0;} */
/* .scroll .box-wrap + * {margin-top:2rem;} */
/* .scroll > .button-section:first-child {margin-top:3rem;} */

footer {position:relative;padding:0 2.0rem 2.0rem;}
footer::before {content:'';position:absolute;left:0;right:0;top:-1.6rem;height:1.6rem;background:linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);z-index:1;}

/* scroll, fixed 관련*/f
.fixed {position:absolute;left:0;right:0;/*animation-name:movetop;animation-duration:120ms;*//* top:5.6rem;*/ top:5.6rem;z-index:2;min-height:5rem;}

/* .wrap.bg-gray 에 white 컨텐츠  */
.box-wrap {display:flex;flex-direction:column;min-height:100%;}
.box-wrap .box {display:block;}
.wrap:not([class*=bg-]) .box-wrap:not(.security) .box + .box {margin-top:3.0rem;}
.wrap[class*=bg-] footer {background:var(--white);}
.wrap[class*=bg-] .box.bg-03 {padding:3.0rem 2.0rem 4.0rem;}
.wrap[class*=bg-] .box.bg-gray {padding:3.0rem 2.0rem 4.0rem;}
.wrap[class*=bg-] .box.bg-03 + .box, .wrap.bg-gray .box.bg-gray + .box {background-color:var(--white);padding:3.0rem 2.0rem calc(4.0rem + 1.6rem);border-radius:2.0rem 2.0rem 0 0;flex:100%;}
.wrap[class*=bg-] .scroll {padding:0;}
.wrap[class*=bg-] .box {padding:0 2.0rem;}
/* .wrap:not([class*=bg-]) .box-wrap > .box.bg-03 + .box {margin-top:2.0rem;} */
.box.bg-gray .content-top {margin-bottom:0;}

.wrap.bg-gray {background:var(--gray20);}
/* .wrap.bg-gray header {background:var(--gray20);} */
/* .wrap:not(.bg-gray) .box.bg-03 {padding-bottom:4.0rem;} */
/* .wrap.finish, .wrap.finish header, .wrap.finish footer {background:var(--gray20);}
.wrap.finish footer::before {background:linear-gradient(0deg, var(--gray20) 0%, transparent 100%);} */

/* as-is layout */
.scroll.bg-04, .scroll.bg-gray {background:var(--gray20);position:relative;z-index:0;}
.scroll[class*=bg-] {padding:0;}
.scroll[class*=bg-] .box.bg-03, .scroll[class*=bg-] .box.bg-gray {;padding:3.0rem 2.0rem 7.0rem;}
.scroll[class*=bg-] .box.bg-03 ~ .box, .scroll[class*=bg-] .box.bg-gray ~ .box {background-color:var(--white) !important;padding:3.0rem 2.0rem calc(4.0rem + 1.6rem);border-radius:2.0rem 2.0rem 0 0;flex:100%;margin-top:-3.0rem !important;}


/* 아직 사용 X */
.will-fix.inline-button {}
/* .fixed.inline-button {line-height:4rem;} */
.wrap.bg-gray.scrolled > .content {padding-top:5.8rem;/*background:#fff;*/} 
.wrap.bg-gray .inline-button.will-fix.fixed {top:5.6rem;z-index:11;} /*iOS bug 대응 test*/
.wrap.bg-gray .inline-button.will-fix.fixed ~ * {z-index:0;}/*iOS bug 대응 test*/
 

 /*hr wave, no-header hr wave*/
.no-header.wrap {}
.no-header.wrap .scroll > *:last-child {margin-bottom:0rem;}
.no-header hr {margin:7vh 0 0 0;}

.no-header h1 {display:block;font-size:2.6rem;margin-top:3rem;color:#021715;text-align:center;}
.no-header h1 + hr {margin-top:2.5rem;}

/* ===== Common ===== */
/* color */
.color-primary {color:var(--primary) !important;}
.color-primary01 {color:var(--primary01) !important;}
.color-down {color:var(--down) !important;}
.color-up {color:var(--up) !important;}
.color-ready {color:var(--ready) !important;}
.color-error {color:var(--error) !important;}
.color-cancel {color:var(--cancel) !important;}
.bg-primary {background-color:var(--primary) !important;}
.bg-primary01 {background-color:var(--primary01) !important;}
.bg-down {background-color:var(--down) !important;}
.bg-up {background-color:var(--up) !important;}
.bg-ready {background-color:var(--ready) !important;}
.bg-error {background-color:var(--error) !important;}
.bg-cancel {background-color:var(--cancel) !important;}
.bg-white {background-color:var(--white) !important;}

/* Margin, Padding */
.mt0 {margin-top:0 !important;}
.mt5 {margin-top:.5rem !important;}
.mt8 {margin-top:.8rem !important;}
.mt10 {margin-top:1rem !important;}
.mt12 {margin-top:1.2rem !important;}
.mt15 {margin-top:1.5rem !important;}
.mt16 {margin-top:1.6rem !important;}
.mt20 {margin-top:2rem !important;}
.mt24 {margin-top:2.4rem !important;}
.mt25 {margin-top:2.5rem !important;}
.mt30 {margin-top:3rem !important;}
.mt40 {margin-top:4rem !important;}
.mb16 {margin-bottom:1.6rem !important;}
.mb40 {margin-bottom:4rem !important;}
.pb10 {padding-bottom:1.0rem;}

/* View Size */
.w100p, .wP100, .full {width:100% !important;}
.h100, .hP100 {height:100% !important;}
.w70 {width:7rem !important;}
.w80 {width:8rem !important;}
.w100 {width:10rem !important;}

/* Align */
.ta-r, .right {text-align:right !important;}
.ta-l, .left {text-align:left !important;}
.ta-c, .center {text-align:center !important;}
.va-t {vertical-align:top !important;}
.va-m {vertical-align:middle !important;}
.va-b {vertical-align:bottom !important;}
.fl-l {display:inline-block;float:left !important;vertical-align:middle;}
.fl-r {display:inline-block;float:right !important;vertical-align:middle;}
.over-h {overflow:hidden;width:100%;}
.clear {clear:both !important;}
.clear-l {clear:left !important;}
.clear-r {clear:right !important;}
.posi-a {position:absolute !important;}
.posi-r {position:relative !important;}

/* display style */
.block {display:block !important;}
.inline {display:inline !important;}

/* Font */
.normal {font-weight:400 !important;}
.bold {font-weight:700 !important;}

/* hidden */
.blind {visibility:hidden;font-size:0;text-indent:-20000px;}
.none {display:none !important;}
.text-blind {width:1px;height:1px;clip:rect(0, 0, 0, 0);margin:-1px;color:transparent !important;overflow:hidden;position:absolute;padding:0;border:0;font-size:0;}

/* Text overflow with ellipsis (줄임말) */
.ellipsis {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.ellipsis2 {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word !important;}
.ellipsis3 {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-wrap:break-word !important;}

/* 영역을 벗어나는 텍스트 줄 바꿈 처리(예:긴 URL) */
.break {word-break:break-all;word-break:break-word !important;-webkit-hyphens:auto;hyphens:auto;}

/* flex box */
.hbox {display:flex !important;flex-direction:row !important;} 
.vbox {display:flex !important;flex-direction:column !important;} 

 /* 가로 :justify-content:flex-start |flex-end|center|space-between|space-around;*/
 /* 세로 :align-items:flex-start|flex-end|center|baseline|stretch;*/
.ss {justify-content:start !important;align-items:start !important;}
.sc {justify-content:start !important;align-items:center !important;}
.se {justify-content:flex-start !important;align-items:flex-end !important;} 

.cs {justify-content:center !important;align-items:flex-start !important;}
.cc {justify-content:center !important;align-items:center !important;}
.ce {justify-content:center !important;align-items:flex-end !important;}

.es {justify-content:flex-end !important;align-items:flex-start !important;}
.ec {justify-content:flex-end !important;align-items:center !important;}
.ee {justify-content:flex-end !important;align-items:flex-end !important;} 

.js {justify-content:space-between !important;align-items:flex-start !important;}
.jc {justify-content:space-between !important;align-items:center !important;}
.je {justify-content:space-between !important;align-items:flex-end !important;}

.stretch {align-items:stretch !important;} 

/* flex */
.flex {flex:1;-webkit-box-flex:1 !important} 

.flex2 {/*-webkit-box-flex:2;*/flex:2 !important;}
.flex3 {flex:3 !important;}
.flex4 {flex:4 !important;}
.flex5 {flex:5 !important;}
.flex6 {flex:6 !important;}

/* ===== Button ===== */
/* 버튼정렬 */
.button-section {display:flex;flex-direction:row;width:100%;} /* 기본 :가로정렬 */
.button-section.vertical {flex-direction:column} /* 세로정렬 */ 
.button-section > a, .button-section > button {flex:1;text-align:center;}
.button-section button + button, .button-section a + a {margin-left:1.3rem;}
.box > .button-section {margin-top:4.0rem;}

.button-section.vertical button, .button-section.vertical a {margin-right:0;margin-bottom:1.6rem;margin-left:0;}
.button-section.vertical button:last-child, .button-section.vertical a:last-child {margin-bottom:0}

.button-section + .button-section {margin-top:0.5rem}

footer .button-section.vertical button {margin:0;}

/* 버튼스타일 */
button, a {display:inline-block;color:inherit;}


.Lbtn {min-height:5.6rem;font-size:1.6rem;padding:0 1.6rem;border-radius:1.2rem;font-weight:700;}
.mbtn {min-height:4.9rem;font-size:1.4rem;padding:1.4rem 1.6rem;border-radius:1.2rem;font-weight:700;}
.sbtn {min-height:3.7rem;font-size:1.4rem;padding:0.8rem 1.2rem;border-radius:0.8rem;font-weight:700;width:100%;} 
.Lbtn:disabled, .Lbtn.disabled,
.mbtn:disabled, .mbtn.disabled,
.sbtn:disabled, .sbtn.disabled {background-color:var(--gray30) !important;color:var(--gray60) !important;cursor:default;}

/* box button */
.btn-st01 {background:var(--primary);color:var(--white);}	/* Primary, Positive */
.btn-st01:active {background:var(--primary01);}
.btn-st02 {background:var(--bg-secondary);color:var(--primary01);}	/* Secondary */
.btn-st02:active {background:#bae2e5;}
.Lbtn.btn-st03 {background:var(--gray10);color:var(--gray80);}	/* Tertiary, Negative */ 
.Lbtn.btn-st03:active {background:var(--gray30);}

/* outline button */
.btn-st03:not(.Lbtn) {border:1px solid var(--primary);background:#fff;color:var(--primary);}
.btn-st03:not(.Lbtn):active {background:var(--bg-secondary);color:var(--primary01);}
.btn-st03.st-gray:not(.Lbtn) {border:1px solid var(--gray50);background:#fff;color:var(--gray80);}
.btn-st03.st-gray:not(.Lbtn):active {background:var(--gray20);color:var(--gray80);}
 
/* text button */
.btn-st07, .btn-text {position:relative;color:var(--gray100);font-size:1.6rem;/*text-decoration:underline;text-underline-position:under;*/}
.btn-st07::after, .btn-text::after {content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gray100);}
.btn-st04, .btn-st10, .btn-text-arrow {position:relative;color:var(--gray100);padding-right:2.2rem;font-size:1.6rem;}
.btn-st04::after, .btn-st10::after, .btn-text-arrow::after {content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:2.0rem;height:2.0rem;background:url(../images/icon-24-arrow-right.png) no-repeat 50% 50%/2.0rem;margin-top:0.1rem;}
.btn-text-down {position:relative;color:var(--gray80);padding-right:2.7rem;font-size:1.6rem;}
.btn-text-down::after {content:'';position:absolute;right:0;top:0;width:2.4rem;height:2.4rem;background:url(../images/icon-24-down-gray.png) no-repeat 50% 50%/contain;}
.btn-text-down.on::after {transform:rotate(-180deg);}
.btn-link-primary {position:relative;font-size:1.4rem;color:var(--primary01);padding-right:2.0rem;}
.btn-link-primary::after {content:'';position:absolute;right:0;top:0;width:2.0rem;height:2.0rem;background:url(../images/icon-20-arrow-primary01.png) no-repeat 50% 50%/2.0rem;}
.btn-text.color-primary01::after {background:var(--primary01) !important;}
.btn-text-arrow.color-primary01::after {background-image:url(../images/icon-20-arrow-primary01.png);}

/* switch button */
.btn-switch-toggle {position:relative;width:4.0rem;height:2.4rem;border-radius:1.2rem;background:var(--gray70);font-size:1px !important;color:transparent !important;}
.btn-switch-toggle::after {content:'';position:absolute;left:0.2rem;top:0.2rem;width:2.0rem;height:2.0rem;border-radius:50%;background:#fff;}
.btn-switch-toggle.on {background:var(--primary);}
.btn-switch-toggle.on::after {left:auto;right:0.2rem;}
.btn-switch-toggle:disabled {background:var(--gray50) !important;cursor:default;}
.btn-switch-toggle:disabled::after {background:var(--gray30) !important;}

.inline-button {display:block;text-align:right;font-size:0;}
.inline-button button, .button-section.inline-button a {flex:0;}

/* 아직 사용 X 
.btn-st04 {background:transparent;color:#021715;font-size:1.4rem;}
.Lbtn.btn-st04 {font-size:2rem;}

.btn-st04::after {content:"";background:url(../../resource/images/sprite-button.png) no-repeat right -20rem;background-size:5rem;display:inline-block;width:1.4rem;height:1.4rem;position:relative;top:.3rem;}
.Lbtn.btn-st04::after {background-position:0 -76rem;margin-left:1rem;top:0;}

.inline-button .sbtn.btn-st04 {padding-right:0;}
.inline-button.center .sbtn.btn-st04 {padding-right:1.5rem;}
.inline-button.center .sbtn.btn-st04:last-child {padding-right:0;}
.inline-button .sbtn {min-height:2.8rem;font-size:1.3rem;padding:0 1.5rem;border-radius:1.4rem;height:auto;}/* 2차고도화 * 

.Lbtn.btn-st03 {min-width:10rem;}

.mbtn.btn-st04 {height:auto;padding:0;font-size:1.5rem;}

.Lbtn.btn-st04.l-name {display:flex;justify-content:space-between;align-items:center;position:relative;width:100%;background:transparent;}
.Lbtn.btn-st04.l-name span {flex:1;padding:0 1.2rem;font-family:'RoboR';font-size:1.5rem;text-align:left;color:#fff;}
.Lbtn.btn-st04.l-name::before {content:'';width:3.2rem;height:3.2rem;background:url(../../resource/images/sprite-ico.png) no-repeat -21.8rem -11rem;background-size:25rem;}
.Lbtn.btn-st04.l-name::after {right:0;background-position:-2.3rem -75.9rem;}
.Lbtn.btn-st04.l-name.new span::before {content:'';position:absolute;left:4.4rem;top:50%;margin-top:-1.4rem;width:.6rem;height:.6rem;border-radius:50%;background:#f58039;}

.btn-st06 {background:transparent;color:#637079;font-size:1.3rem;padding:0;}
.inline-button .btn-st06::after {content:"·";font-size:2rem;padding:0 0.5rem;}
.inline-button .btn-st06:only-of-type {content:none;}
.inline-button .btn-st06:last-child::after, .inline-button.vertical .btn-st06::after {content:none;}
.inline-button.will-fix .sbtn:first-child {padding-right:0;}

.mbtn.btn-st06 {font-size:1.5rem;color:#000;}
.Lbtn.btn-st06 {font-size:2rem;color:#021715;}

.btn-st07 {position:relative;color:#637079;padding:0;background:transparent;}
.btn-st07::after {content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#637079;}

/*.btn-st08 .old-acc {}

.btn-st09 {background:#4a90e2;color:#fff;}
.btn-st09 .stxt {display:block;font-family:'RoboR';font-size:1.3rem;} 
.btn-st10 {color:#cbd1d5;}
.btn-st10::after {content:"";display:inline-block;position:relative;top:.3rem;width:1.5rem;height:1rem;background:url(../../resource/images/sprite-button.png) no-repeat -2rem -82rem;background-size:5rem;}

.btn-st11 {position:relative;background:#27b2a5;color:#fff;}/* 2차고도화 *
.btn-st21 {position:relative;background:#27b2a5;color:#fff;}/* 2차고도화 *

footer .ico-btn {min-width:8rem;}

.ok, .cancel,.out, .option {background-image:url(../../resource/images/sprite-button.png);background-repeat:no-repeat;background-size:5rem;font-size:0}
.ok {background-position:50% 0}
.cancel {background-position:50% -5rem}
.out {background-position:50% -10rem;}
.option {background-position:.7rem -80.9rem/*-80.8rem*}
/* 아직 사용 X */

/* icon button */
.ico-btn {position:relative;display:inline-block;font-size:0;color:transparent !important;flex:0 !important;} /*아이콘 버튼*/
.ico-btn.note {width:2rem;height:2rem;background:url(../images/icon-20-tooltip.png) no-repeat 50% 50%/contain;}
.ico-btn.refresh {flex:unset !important;width:2.4rem;height:2.4rem;background:url(../images/icon-24-refresh.png) no-repeat 0 0/contain;}
.ico-btn.option {width:2.4rem;height:2.4rem !important;min-height:2.4rem !important;background:url(../images/btn-setting.png) no-repeat 50% 50%/contain;font-size:0 !important;}

/*.ico {display:inline-block;background:url(../../resource/images/sprite-button.png);background-position:no-repeat;background-size:5rem}
.ico.ok {width:5rem;height:5rem;}
*/
/*
.inline-button {display:block;flex-direction:none;text-align:right;}
.inline-button button, .button-section.inline-button a {flex:0;}
.inline-button.vertical button, .inline-button.vertical a {display:block;margin:0 auto 0.7rem;min-width:24rem;}
.inline-button.vertical button:last-child, .inline-button.vertical a:last-child {margin-bottom:0;} 

footer .inline-button {padding-bottom:5rem;}
.board-wrap + .button-section, .board-wrap + .inline-button, .txt-dash + .inline-button.center {margin-top:2.5rem;}
*/
/* button > icon */
.ico {display:inline-block;background:url(../../resource/images/sprite-ico.png) no-repeat;background-size:25rem}
button .ico {margin-right:.8rem;}
.ico-f-print {width:1.8rem;height:2.1rem;background-position:-10rem 0}
.ico-face {width:2.4rem;height:2.4rem;background-position:-12rem 0}

/**/
.info-button button {position:relative;height:23rem !important;padding:2rem 0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.info-button button > span {display:block;color:#fff;}
.info-button button > span:first-child {font-size:1.5rem;}
.info-button button > span:last-child {font-size:1.8rem;}

.info-button button::before {content:"";position:absolute;left:50%;top:50%;margin:-1.4rem 0 0 -1.4rem;display:inline-block;width:2.9rem;height:2.9rem;background:url(../../resource/images/sprite-ico.png) no-repeat;background-size:25rem;} 

.info-button button:first-child::before {background-position:0 -4.5rem;}
.info-button button:last-child::before {background-position:-4rem -4.5rem;}

strong.tit {display:block;text-align:center;color:#8e9796;}

/* custom button */
.custom-button {background:transparent;text-align:left;height:13rem;display:flex;flex-direction:column}
.custom-button > span {display:block;color:#fff;}
.custom-button > span:first-child {opacity:.7;margin-bottom:1rem;}
.custom-button > span:last-child {font-size:2.2rem;font-weight:700;}
.custom-button > span * {font-size:inherit;color:inherit;vertical-align:baseline;}

.hbox .custom-button {flex:1;}
.hbox .custom-button + .btn-st07 {margin-top:-.5rem;}
.bg-02 .btn-st07 {color:#fff;}
.bg-02 .btn-st07::after {background-color:#fff;}

.hbox.js .custom-button + p {width:12rem;text-align:right} 
.hbox.js .custom-button + p .sbtn.btn-st04 {padding-right:2rem;padding-left:0;max-width:11rem;min-height:2.8rem;height:auto;position:relative;text-align:left;border-radius:0;}/* 2차고도화 */
.hbox.js .custom-button + p .sbtn.btn-st04::after {position:absolute;top:8px;right:0;}/* 2차고도화 */
.btn-wu {font-size:1rem;color:#c3cbd5;}
.ico-wu {width:4.2rem;height:2.8rem;background-position:-15rem -33rem}
.ico-wu + span {text-align:left}
.hbox.js .custom-button + p .btn-wu .ico-wu {margin-right:.5rem;}

/* ===== Typography ===== */
/* H group :AS-IS */
.tit-st03 { font-weight:700;}
.tit-st03 {color:#8e9796 !important;font-size:1.5rem !important;text-align:center} 
h3.tit-st04 {color:#021715 !important;font-size:1.4rem !important;}

.tit-wrap {display:flex;justify-content:space-between;align-items:flex-start;}
.tit-wrap > img {width:2.4rem;height:1.6rem;margin-top:0.4rem;}	/* 국기 */
.tit-wrap .htit-st01{margin:3rem 0 2.0rem;}
.tit-wrap .htit-st03, .tit-wrap .tit-st01, .tit-wrap .htit-st02, .tit-wrap .tit-st02 {margin:3rem 0 1.6rem;}
.tit-wrap .htit-st04{margin:3rem 0 1.2rem;}
.tit-wrap:first-child [class*="htit"], .tit-wrap:first-child h2, .box > .htit-st03:first-child {margin-top:0;}
.tit-wrap:not(:first-child) [class*="htit"] + * {margin-top:3.0rem;}
.tit-wrap + .list, .tit-wrap + p {margin-top:0.4rem;}
h2 + .list, h2 + p:not([class*=certi]):not(.no-data), h3 + .list, h3 + p {margin-top:2.0rem !important;}
/* .tit-st01 {margin-top:3rem;} */
/* .tit-st02 {margin-top:2rem;} */
/* .scroll > .tit-st01:first-child, .box > .tit-st01:first-child {margin:0;} */
/* .scroll > .tit-st03:first-child {margin:4rem 0 3rem 0;} */
  
/* H group */
.htit-st01 {font-size:2.4rem;font-weight:700;color:var(--gray100);}	/* h1 */
.htit-st02 {font-size:2.0rem;font-weight:700;color:var(--gray100);}	/* h2 */
.htit-st03 {font-size:1.8rem;font-weight:700;color:var(--gray100);}	/* h3 */
.htit-st04 {font-size:1.6rem;font-weight:700;color:var(--gray90);}	/* h4 */

.tit-st01 {font-size:1.8rem;font-weight:700;color:var(--gray100) !important;} /* h2 */ 
.tit-st02 {font-size:1.4rem;color:var(--gray100);}	/* input label */ 
.tit-st05 {font-size:1.6rem;font-weight:700;color:var(--gray90);}	/* banked_tg_con */
.tit-st06 {font-size:1.6rem;font-weight:400;color:var(--gray90);}	/* banked_tg_con */
 
/* Typo :AS-IS */
.txt-point {color:var(--up) !important;}
.txt-point-1 {color:var(--gray90) !important;font-size:1.4rem !important}
.txt-point-2 {color:#021715 !important;font-size:inherit !important}
.txt-point-3 {color:var(--primary01) !important;font-size:inherit !important}
.txt-point-4 {color:var(--up) !important;}
.txt-point-5 {color:#fedf12 !important;font-size:inherit !important}
.txt-point-6 {color:#4a90e2 !important;font-size:inherit !important;}

.txt-up, .txt-down {font-size:1.6rem;}
.txt-up {color:var(--up);}
.txt-up::before {content:'';width:1.0rem;height:1.0rem;display:inline-block;background:url(../images/icon-drop-up.png) no-repeat 50% 50%/1.0rem;margin-right:0.4rem;}
.txt-down {color:var(--down);}
.txt-down::before {content:'';width:1.0rem;height:1.0rem;display:inline-block;background:url(../images/icon-drop-down.png) no-repeat 50% 50%/1.0rem;margin-right:0.4rem;}
.txt-uline {text-decoration:underline;font-size:inherit;color:inherit;}
table td .txt-up, table td .txt-down {display:block;text-align:right;}

.txt-default {font-size:1.6rem !important;color:var(--gray90) !important;}
.txt-large {font-size:1.8rem !important;}
.txt-small {font-size:1.4rem !important;}
.txt-sub {font-size:1.4rem !important;color:var(--gray80);}

.txt-dash, .txt-dash-2 {position:relative;color:var(--gray80);font-size:1.6rem;padding-left:1.1rem;}
.txt-dash::before, .txt-dash-2::before {content:'';position:absolute;left:0;top:1.0rem;width:4px;height:1px;background:var(--gray80);}
.txt-dot {position:relative;color:var(--gray80);padding-left:1.1rem;}
.txt-dot::before {content:'';position:absolute;left:0;top:1.1rem;width:3px;height:3px;border-radius:50%;background:var(--gray80);}
.txt-spe {display:inline-block;position:relative;color:var(--gray80);font-size:1.4rem;padding-left:1.2rem;}
.txt-spe::before {content:"*";position:absolute;top:0.2rem;left:0;}
[class*=txt].no-st::before {display:none;}
.wrap.st-04 .txt-dot {color:#e2e9eb;}
.txt-desc {font-size:1.2rem;color:#8e9796;}
.txt-desc .s-info em {font-size:1.2rem !important;color:#8e9796 !important;}

/* Typo */
.btxt-st01 {font-size:1.8rem;}
.btxt-st02 {font-size:1.6rem;}
.btxt-st02-bold {font-size:1.6rem;font-weight:700;}
.btxt-st03 {font-size:1.4rem;}
.btxt-st03-bold {font-size:1.4rem;font-weight:700;}

/* ===== Form ===== */
/* Check box :약관 */
/* 2depth */
.agree-wrap label {color:var(--gray100);font-size:1.4rem;padding:0.15rem 0;display:inline-flex;align-items:flex-start;justify-content:flex-start;}
.agree-wrap input[type="checkbox"] {width:1.6rem;height:1.6rem;background:url(../images/icon-form-check-off.png) no-repeat 50% 50%/1.6rem;margin-top:0.4rem;}
.agree-wrap input[type="checkbox"]:checked {background-image:url(../images/icon-form-check-on.png);font-weight:700;}
.agree-wrap label.checked {font-weight:700;}
/* 1depth */
.chk-st02 label, label.chk-st02 {font-size:1.6rem;padding:0;}
.chk-st02 + label {font-size:1.6rem;flex:0 0 calc(100% - 3.2rem);padding:0;}
.chk-st02 input[type="checkbox"], input[type="checkbox"].chk-st02 {flex:0 0 2.4rem;width:2.4rem;height:2.4rem;margin-top:0 !important;border-radius:0.6rem;border:1px solid var(--gray40);background-color:#fff;}
.chk-st02 input[type="checkbox"]:checked, input[type="checkbox"].chk-st02:checked {background:var(--primary) url(../images/icon-form-check-white.png) no-repeat 50% 50%/2.4rem;border:0;}
.chk-st02.checked input[type="checkbox"]:checked {color:#021715}
.chk-st02.checked, input[type="checkbox"]:checked + label {font-weight:700;}

.agree-wrap label > input {margin-top:0.25rem !important;margin-right:0.8rem;flex:0 0 1.6rem;}
.agree-wrap input + label {margin-left:0.8rem;flex:0 0 calc(100% - 2.4rem);}
.agree-wrap input.chk-st02 + label {flex:0 0 calc(100% - 3.2rem);}

.agree-wrap input[type="checkbox"] + .btn-st08 {padding-right:3.2rem;margin-left:0.8rem;background:url(../images/icon-24-arrow-right.png) no-repeat 100% 50%/2.4rem;text-align:left;flex:0 0 calc(100% - 2.4rem);font-size:1.4rem;color:var(--gray100);}
.chk-st02 input[type="checkbox"] + .btn-st08, input[type="checkbox"].chk-st02 + .btn-st08 {font-size:1.6rem;flex:0 0 calc(100% - 3.2rem);}
input[type="checkbox"]:checked + .btn-st08 {font-weight:700;}

.check-wrap {display:flex;}	/* 한줄에 체크박스 여러개 있는 경우 인 듯 */
.check-wrap input + label {margin-left:0.8rem;}

/* Radio */
.choice {position:relative;display:flex;}
.choice input[type=radio] {display:inline-flex;width:2.4rem;height:2.4rem;background:url(../images/icon-form-radio-off.png) no-repeat 0 0/contain;}
.choice input[type=radio] + label {margin-left:0.8rem;color:var(--gray90);}
.choice input[type=radio]:checked {background-image:url(../images/icon-form-radio-on.png);}
.choice input[type=radio]:disabled {background:var(--gray50);border:1px solid var(--gray30);border-radius:50%;}

/* Radio - button type */
.radio-wrap.button-radio {display:flex;flex-direction:row;}
.radio-wrap.button-radio > * + * {margin-left:0.8rem;}
.radio-wrap.button-radio label {flex:1;min-height:5.6rem;color:var(--gray80);position:relative;display:flex;align-items:center;justify-content:center;padding:1.6rem 0.4rem;text-align:center;border-radius:1.2rem;border:1px solid var(--gray40);}
/* .radio-wrap.button-radio label::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:1.2rem;border:1px solid var(--gray40);} */
.radio-wrap.button-radio label.on {background:var(--bg-secondary);color:var(--primary01);font-weight:700;padding:1.5rem 0.3rem;border:2px solid var(--primary);}
/* .radio-wrap.button-radio label.on::before {border:2px solid var(--primary);} */
.radio-wrap.button-radio label:only-child {height:5.6rem;line-height:5.6rem;}
.radio-wrap.button-radio label input[type=radio] {width:100%;height:100%;position:absolute;} /* app 개발 대응 */

*:not(.ver-wrap) > .choice > input {width:0;height:0;overflow:hidden;position:absolute;}
*:not(.ver-wrap) > .choice > label {position:relative;flex:1;display:flex;height:auto;min-height:5.6rem;background:url(../images/icon-form-radio-off.png) no-repeat 1.6rem 50%/2.4rem;border-radius:1.2rem;padding:1.6rem 1.6rem 1.6rem 4.8rem;margin-left:0 !important;}
*:not(.ver-wrap) > .choice > input[type=radio]:checked + label {background-color:var(--bg-secondary);background-image:url(../images/icon-form-radio-on.png);font-weight:700;color:var(--primary01);}
*:not(.ver-wrap) > .choice > input[type=radio]:checked:disabled + label:before{display:none;}
*:not(.ver-wrap) > .choice > input[type=radio]:disabled + label{background:transparent url(../images/icon-form-radio-on.png) no-repeat left 1.6rem center / 2.4rem;filter:grayscale(1);opacity:0.6;}
*:not(.ver-wrap) > .choice > input[type=radio]:disabled + label:before{content:"";width:2.4rem;height:2.4rem;position:absolute;left:1.6rem;top:50%;transform:translateY(-50%);border-radius:50%;border:1px solid var(--gray50);background:var(--gray30);}
*:not(.ver-wrap) > .choice > input[type=checkbox] + label{position:relative;padding-left:4rem;background:url(../images/icon-form-check-off.png) no-repeat center left 1.6rem / 1.6rem;font-size:1.6rem;color:var(--gray80);}
*:not(.ver-wrap) > .choice > input[type=checkbox] + label:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1.2rem;border:1px solid var(--gray40);}
*:not(.ver-wrap) > .choice > input[type=checkbox]:checked + label{background-image: url(../images/icon-form-check-on.png); color:var(--primary);}
*:not(.ver-wrap) > .choice > input[type=checkbox]:checked + label:before{border:2px solid var(--primary);}
*:not(.ver-wrap) > .choice > input[type=checkbox]:disabled + label{background-color:var(--gray30);color:var(--gray80);background-image: url(../images/icon-form-check-off.png);}
*:not(.ver-wrap) > .choice > input[type=checkbox]:disabled + label:before{border-color:var(--gray60);}
.choice-check-wrap .choice + .choice{margin-top:1.6rem;}
 /* AS-IS .stu_box02 radio 수직정렬일 때 사용 */
.ver-wrap .choice {float:left;width:50%;} /* TO-BE */

/* Input */
.inp input[type=text]::-webkit-input-placeholder,.inp input[type=password]::-webkit-input-placeholder, .inp input[type=tel]::-webkit-input-placeholder, .search-wrap input::-webkit-input-placeholder,
.inp input[type=text]::placeholder,.inp input[type=password]::placeholder, .inp input[type=tel]::placeholder, .search-wrap input::placeholder {color:var(--gray70);font-size:1.8rem;}

/* 기본입력 input + del button */
.inp, .cal {position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:var(--gray10);border-radius:1.2rem;}
.inp input{flex:1;width:100%;height:6.3rem;padding:1.8rem 1.6rem;color:var(--gray100);font-size:1.8rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;z-index:1;border-radius:1.2rem;line-height:6.3rem;background:transparent;}
.inp-wrap, .write {position:relative;}
.inp-wrap + .inp-wrap, .write + .write, .write + .inp-wrap, .inp-wrap + .write {margin-top:2.0rem;}
/* .inp-wrap > * {width:100%} */
.inp-wrap label, .write dt label, .write dt .label {display:block;font-size:1.4rem;color:var(--gray100);margin-bottom:0.8rem;}
.btn-del, .btn-accnt-del {display:none;background:transparent url(../images/icon-24-delete.png) no-repeat 0 50%/2.4rem;width:4.0rem;height:2.4rem;font-size:0;z-index:1;position:absolute;right:0;top:50%;transform:translateY(-50%);}

.write dd {position:relative;display:flex;flex-direction:column;align-items:center} 
.write dd > * {width:100%;}
.write dd > * + * {margin-top:1.0rem;}
.write dd + dd {margin-top:1rem;}

/* 통화 + input */
.inp .unit {flex:0;min-width:8rem;padding-left:1.6rem;font-size:1.6rem;color:var(--gray80);}
.inp .unit + input {padding-left:0;width:calc(100% - 8rem);}

/* teatarea */ 
.txtarea-wrap textarea {width:100%;min-height:17rem;color:#212529;font-size:1.8rem;font-weight:500;border-radius:1.2rem;border:1px solid var(--bg-gray100);background:var(--bg-gray100);padding:1.8rem 1.6rem;}
.txtarea-wrap textarea:not(:read-only):focus{border:1px solid #01a5ac;background:#fff;}
.txtarea-wrap .txtareawrap-box label {display:block;font-size:1.4rem;color:var(--gray100);margin-bottom:0.8rem;}
.txtareawrap-byte {margin-top:0.6rem;display:flex;align-items:center;justify-content:flex-end;font-size:1.4rem;color:var(--gray70);}
.txtareawrap-byte .txtareawrap-byte-total{padding-left:1.4rem;position:relative;}
.txtareawrap-byte .txtareawrap-byte-total:before{content:"/";position:absolute;left:0.4rem;top:0;width:0.5rem;}
.txtareawrap-byte .txtareawrap-byte-current{color:var(--primary01);}

/* drop down */
.inp .btn-st05 {position:relative;flex:1;height:6.3rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;z-index:1;text-align:left;min-height:6.3rem;font-weight:400;font-size:1.8rem;color:var(--gray70);padding-right:4.8rem;}
.inp .btn-st05::after {content:"";background:url(../images/icon-24-down.png) no-repeat 50% 50%/contain;display:inline-block;width:2.4rem;height:2.4rem;position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);}
.inp .btn-st05 > span:only-child {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word !important;}
.inp .btn-st05.set-value {color:var(--gray100);}
.inp .btn-st05.search {display:flex;align-items:center;}
.inp .btn-st05.search::before {content:"";width:2.1rem;height:2.1rem;margin-right:1.3rem;background:url(../../resource/images/sprite-ico.png) no-repeat 0 -2rem;background-size:25rem;}
.inp .btn-st05.search::after {display:none;}
.inp .btn-st05 img {width:3.2rem;height:2.1rem;margin-right:.5rem;} /*flag image*/
.inp .btn-st05 img + span {font-size:2.2rem;}
.readonly .btn-st05 {cursor:default;}
.Lbtn.btn-st05 {position:relative;flex:1;height:6.3rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;z-index:1;text-align:left;min-height:6.3rem;font-weight:400;font-size:1.8rem;color:var(--gray70);padding-right:4.8rem;background:var(--gray10);border-radius:1.2rem;}
.Lbtn.btn-st05::after {content:"";background:url(../images/icon-24-down.png) no-repeat 50% 50%/contain;display:inline-block;width:2.4rem;height:2.4rem;position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);}
.Lbtn.btn-st05 > span:only-child {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word !important;}
.Lbtn.btn-st05.set-value {color:var(--gray100);}
.error .btn-st05::before, .error.btn-st05::before, .error .btn-st08::before, .error.btn-st08::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:1.2rem;border:1px solid var(--error) !important;z-index:0;}
/* form link(right arrow) button */
.Lbtn.btn-st08 {position:relative;flex:1;height:6.3rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;z-index:1;text-align:left;min-height:6.3rem;font-weight:400;font-size:1.8rem;color:var(--gray70);padding-right:4.8rem;background:var(--gray10);border-radius:1.2rem;width:100%;}
.Lbtn.btn-st08::after {content:"";background:url(../images/icon-24-down.png) no-repeat 50% 50%/contain;display:inline-block;width:2.4rem;height:2.4rem;position:absolute;right:1.6rem;top:50%;transform:translateY(-50%) rotate(-90deg);}
.Lbtn.btn-st08 > span:only-child:not(.text-blind) {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word !important;}
.Lbtn.btn-st08.set-value {color:var(--gray100);}
.Lbtn.btn-st08 img {width:2.4rem;height:1.6rem;margin-right:0.8rem;} /*flag image*/
.Lbtn.btn-st08 img ~ span {font-size:1.8rem;vertical-align:middle;}
.Lbtn.btn-st08 span + span {line-height:1.5;}

/* input focus */
.focus .inp, .focus.inp, .search-wrap.focus {background:#fff;}
.focus input:not(:read-only) {padding-right:4.8rem;}
.search-wrap.focus > input:not(:read-only) {padding-right:calc(4.8rem + 4.0rem);}
.focus:not(.readonly):not(.disabled) .inp::before, .focus.inp::before, .search-wrap.focus::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:1.2rem;border:1px solid var(--primary);z-index:1;}
.focus.button-section::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:1.2rem;border:1px solid var(--primary);z-index:2;height:6.3rem;} 
.focus-out .btn-del {opacity:0;min-width:1px;width:1px;display:none;transition:width 0.2s;}
.focus-out .inp, .focus-out.inp, .search-wrap.focus-out {background:var(--gray10);}
.write:not(.error) .focus-out .inp::before, .write:not(.error) .focus-out.inp::before, .search-wrap.focus-out::before {display:none;}
.error .inp::before, .error.inp::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:1.2rem;border:1px solid var(--up) !important;z-index:0;}
.inp-wrap.readonly .inp, .write.readonly .inp, .inp.readonly,
.inp-wrap.disabled .inp, .write.disabled .inp, .inp.disabled {background:var(--gray30);}
.inp-wrap.disabled .inp input, .write.disabled .inp .btn-st05, .write.disabled .inp .btn-st32, .inp.disabled input, .inp.disabled .btn-st05, .inp.disabled .btn-st32 {color:var(--gray60);}
.focus .Lbtn.btn-st05, .focus .Lbtn.btn-st32 {z-index:0;}

.error-txt{display:none;}
.error .error-txt{display:block;color:var(--up);font-size:1.4rem;}

.button-section + .inp-wrap {margin-top:3rem;}
.button-section + .write {margin-top:2rem;}

.inp-guide {font-size:1.4rem;color:var(--gray80);margin-top:1.0rem;display:flex;align-items:center;}
 
/* form-wrap :search */
.form-wrap, .search-wrap {display:flex;flex-direction:row;width:100%;}
.form-wrap > * {flex:1;min-width:0}
span.dash {display:inline-block;padding:0 0.8rem;line-height:6.3rem;text-align:center;flex:0;margin:0;}
.form-wrap .dash {position:relative;font-size:0.1rem;margin:-1px;color:transparent;width:2.2rem;}
.form-wrap .dash::before {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:0.4rem;height:1px;background:var(--gray90);}
.form-wrap .inp + .inp {margin-left:0.8rem;}
.form-wrap .inp.w80 {flex:0;min-width:8rem;} /*국가 전화번호*/
.form-wrap .inp.w80 span {margin-left:1.6rem;}
.form-wrap .inp.w80 span + input {padding:1.8rem 1rem;}
.form-wrap .inp.w80 .btn-del {width:calc(2.4rem + 0.6rem);}
.form-wrap .inp.w100 {flex:0;min-width:10rem;} /*국가 전화번호*/
.form-wrap .inp.w100 span {margin-left:1.6rem;}
.form-wrap .inp.w100 span + input {padding:1.8rem 1rem;}
.form-wrap .inp.w100 .btn-del {width:calc(2.4rem + 0.6rem);}
.btn-cert {padding:0.8rem 1.2rem;background:var(--white);border-radius:0.8rem;font-size:1.4rem;font-weight:700;color:var(--gray80);border:1px solid var(--gray50);max-width:150px;}
.btn-sch {display:inline-block;width:2.4rem;height:2.4rem;margin-right:1.6rem;background:url(../images/icon-24-search.png) no-repeat 50% 50%/contain;font-size:1px;color:transparent;z-index:5;}
.inp input + .btn-cert{margin-right:1.6rem;}

/* Calendar wrap */
.cal-pick-wrap {display:flex;}
.cal-pick-wrap .inp, .cal-pick-wrap .cal {flex:1;min-width:0;}
.cal-pick-wrap .cal input{flex:1;width:calc(100% - 4rem);height:6.3rem;padding:1.8rem 0.8rem 1.8rem 1.6rem;color:var(--gray100);font-size:1.8rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:6.3rem;}
.cal-pick-wrap button {width:2.4rem;height:2.4rem;margin-right:1.6rem;background:url(../images/icon-24-cal.png) no-repeat 50% 50%/contain;font-size:1px;color:transparent;}
.cal-pick-wrap .dash {position:relative;font-size:0.1rem;margin:-1px;color:transparent;width:2.2rem;}
.cal-pick-wrap .dash::before {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:0.4rem;height:1px;background:var(--gray90);}
.inp.cal button {width:2.4rem;height:2.4rem;margin-right:1.6rem;margin-top:0.1rem;background:url(../images/icon-24-cal.png) no-repeat 50% 50%/contain;font-size:1px;color:transparent;}
@media only screen and (max-width:374px) {
	.cal-pick-wrap .cal input {font-size:1.6rem;}	
}

.lpop-wrapper.cal {background:transparent;}
.lpop-wrapper.cal .layer-container {padding-top:6rem;}
.cal-wrap{margin-top:0 !important;display:flex;flex-direction:column;}
.cal-wrap .cal-header {display:flex;align-items:center;justify-content:flex-start;padding-bottom:1.2rem;border-bottom:1px solid var(--gray30);}
.cal-wrap .cal-header .year {margin-right:1.2rem;}
.cal-wrap .cal-header .year, .cal-wrap .cal-header .month {display:flex;align-items:center;}
.cal-wrap .cal-header span {font-size:1.8rem;color:var(--gray100);padding:0 1.5rem;font-weight:700;}
.cal-wrap .cal-header button {background-repeat:no-repeat;background-size:2.4rem;background-position:center;width:2.4rem;height:2.4rem;font-size:0;}
.cal-wrap .cal-header .btn-pre {background-image:url(../images/icon-24-arrow-right.png);transform:rotate(180deg);}
.cal-wrap .cal-header .btn-next {background-image:url(../images/icon-24-arrow-right.png);}
.cal-wrap .cal-header .btn-st03{margin-left:auto;font-size:1.4rem;width:fit-content;}

.cal-body table {width:100%;}
/* .cal-body table thead {border-top:1px solid var(--gray30);}   */
.cal-body table th, .cal-body table td {text-align:center;position:relative;}
.cal-body table th {font-size:1.2rem;color:var(--gray90);padding:2rem 0 1.2rem;}
.cal-body table td {line-height:0;}
.cal-body table td button {margin:1.5rem auto 1.2rem;width:3.6rem;height:3.6rem;line-height:3.6rem;border-radius:2rem;font-size:1.4rem;color:var(--gray100);}
.cal-body table td button[id=old], .cal-body table td button[id=new] {height:0;margin:0;}
.cal-body table td[disabled] {opacity:0.5;}

.sun, .sun button {color:var(--error) !important;}
.sat, .sat button {color:var(--ready) !important;}

.cal-body table td button.selected {background:var(--primary);color:#fff !important;font-weight:700;}

/* 달력 */
.rolldate-container {position: relative;display: none;font-size: 2.2rem;color: #000;text-align: center;z-index: 1000;}
.rolldate-container ul {margin: 0;padding: 0}
.rolldate-container li {list-style-type: none}
.rolldate-container header {position: relative;font-size: 2.0rem;font-weight: 700;padding:6.0rem 2.0rem 0;box-sizing:border-box;text-align:left;}
.rolldate-container .rolldate-mask {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 999;background-color: rgba(0, 0, 0, 0.5);}
.rolldate-container .rolldate-panel {overflow: hidden;position: fixed;bottom: 0;left: 0;width: 100%;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);z-index: 1000;background: #fff;-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;-webkit-transform: translate3d(0, 37.3rem, 0);transform: translate3d(0, 37.3rem, 0);border-radius: 3rem 3rem 0 0;}
.rolldate-container .rolldate-btn {position: absolute;left: 0;top: 0;height: 100%;padding: 0 2.1rem;color: var(--gray80);font-size: 1.4rem;cursor: pointer;-webkit-tap-highlight-color: transparent}
.rolldate-container .rolldate-btn-area {margin: 4rem 2.0rem 2.0rem;}
.rolldate-container .rolldate-confirm {width: 100%;height: 5.6rem;border-radius: 1.2rem;background:var(--primary);color: #fff;font-size: 1.6rem;font-weight: 700;}
.rolldate-container .rolldate-content {position: relative;margin: 4.8rem 2.0rem 0;}
.rolldate-container .rolldate-wrapper {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;justify-content: space-between;}
.rolldate-container .rolldate-wrapper>div {position: relative;height: 17.1rem;line-height: 5.7rem;overflow: hidden;flex:1;}
.rolldate-container .rolldate-wrapper>div:nth-child(1)+div:nth-child(2), .rolldate-container .rolldate-wrapper>div:nth-child(2)+div:nth-child(3) {margin-left:1.3rem;}
.rolldate-container .rolldate-wrapper>div:before {content:'';position:absolute;left:0;top:5.7rem;width:100%;height:5.7rem;background:var(--gray10);border-radius:1.2rem;}
/* .rolldate-container .rolldate-wrapper>div:before {content: '';position: absolute;left: 0;top: 7.1rem;width: 100%;height: 0.1rem;background: #57afa4;} */
/* .rolldate-container .rolldate-wrapper>div:after {content: '';position: absolute;left: 0;bottom: 7.1rem;width: 100%;height: 0.1rem;background: #57afa4;} */
.rolldate-container .rolldate-wrapper ul {margin-top: 5.7rem;position:relative;}
.rolldate-container .rolldate-wrapper li {height: 5.7rem;font-size: 1.8rem;color:var(--gray100);}
/* .rolldate-container .rolldate-wrapper li.on {font-weight:700;} */
/* .rolldate-container .rolldate-wrapper li.active {font-weight:700;} */
.rolldate-container .rolldate-dim {position: absolute;left: 0;top: 0;width: 100%;height: 5.7rem;pointer-events: none;-webkit-transform: translateZ(0);transform: translateZ(0);z-index: 10;background: rgba(255,255,255,0.5);}
.rolldate-container .mask-bottom {top: auto;bottom: 0;height: 5.7rem;}
.rolldate-container .fadeIn {-webkit-transform: translateZ(0);transform: translateZ(0)}
.rolldate-container .fadeOut {-webkit-transform: translate3d(0, 37.3rem, 0);transform: translate3d(0, 37.3rem, 0)}
.rolldate-cancel {position: absolute; right: 2.0rem; top: 1.6rem; width: 3.2rem; height: 3.2rem; font-size: 0; background:url(../images/btn-32-close.png) no-repeat 0 0/contain; margin-top:0;z-index:5;}
 
/* ===== Icon ===== */
/* tool-tip */
.tool-tip-wrap {position:relative;display:inline-grid;vertical-align:sub;}
.layer-pop h1 .tool-tip-wrap {vertical-align:super;}
.btn-tool-tip {position:relative;z-index:1;margin-left:0.2rem;}
.note-2.btn-tool-tip {top:0;}
.tool-tip {display:none;position:fixed;left:2.0rem;right:2.0rem;margin-top:3.5rem;background:var(--gray90);border-radius:2.0rem;padding:4.8rem 2.0rem 3.0rem;z-index:2;line-height:1.5;}
.tool-tip.on {display:block;}
.tool-tip *, .tool-tip *::before {color:#fff !important;font-size:1.4rem !important;font-weight:400;}
.tool-tip .list.dot li {padding-left:1.0rem;}
.tool-tip .list.dot li::before {top:0.9rem;}
.tool-tip *:not(ul):not(ol).list.dot::before, .tool-tip .list.dash li::before{background:var(--white);}
.tool-tip .btn-close {position:absolute;right:2.0rem;top:1.6rem;width:2.0rem;height:2.0rem;background:url(../images/btn-20-close.png) no-repeat 0 0/contain;}
.tool-tip > span {display:inline-block;}
.t-header {display:block;font-size:1.5rem;margin-bottom:1.5rem;font-weight:700 !important;}

/* ===== Tab ===== */
.tab {display:flex;flex-direction:row;flex-wrap:wrap;margin-top:2.0rem;padding:0 2.0rem;}
.tab > li > a {position:relative;display:flex;justify-content:center;align-items:center;height:100%;min-height:3.6rem;text-align:center;color:var(--gray80);padding:0 0.2rem 1.2rem;}
.tab > li > a::after {content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gray40);}
.tab > li.on > a {color:var(--gray90);font-weight:700;}
.tab > li.on > a::after {height:4px;background:var(--gray90);}

.tab li {width:50%;} /* 2개 기준 */
.tab-3 li {width:33.3%;}
.tab-3 li:nth-child(3n) {width:33.4%;}
.tab-4 li {width:25%;}

.tab.rows:nth-child(2n) {border-right:1px solid #e2e9eb;}
.tab-3.rows:nth-child(3n) {border-right:1px solid #e2e9eb;}

.tab-st02 {display:flex;padding:0 2rem;margin:0 -2rem;overflow-x:auto;}
.tab-st02:-webkit-scrollbar{display:none;}
.tab-st02 > li {justify-content:start ;align-items:center;margin-bottom:0;margin-right:.8rem;}
.tab-st02 > li:last-child {margin-right:0;}
.tab-st02 > li > a {padding:0 1.4rem;display:flex;align-items:center;width:max-content;height:auto;min-height:4rem;border:1px solid var(--gray10);background:var(--gray10);border-radius:2.4rem;box-sizing:border-box;color:var(--gray80);font-size:1.4rem;}
.tab-st02 > li.on > a {background-color:var(--white);border-color:var(--primary);color:var(--primary);font-weight:700;}
.tab-st02 > li.disabled > a{pointer-events:none;cursor:default;background:var(--gray30);color:var(--gray60);}

/* ===== List ===== */
.list li {position:relative;text-align:left; color:var(--gray80);}
.list li::before {content:'';position:absolute;left:0;}
.list.dot > li {padding-left:1.1rem;font-size:1.6rem;color:var(--gray80);}
.list.dot > li + li {margin-top:1.2rem;}
.list.dot > li::before {top:1.0rem;width:3px;height:3px;border-radius:50%;background:var(--gray80);}
.list.dash > li {padding-left:1.1rem;font-size:1.6rem;color:var(--gray80);}
.list.dash > li + li {margin-top:1.2rem;}
.list.dash > li::before {top:1.0rem;width:4px;height:1px;background:var(--gray80);}
.list.dot > li .list.dash {margin-top:1.0rem;}
.list.dot > li .list.dash > li {padding-left:1rem;font-size:1.4rem;color:var(--gray80);}
.list.dot > li .list.dash > li + li {margin-top:0.6rem;}
.list.dot li > p.list.dash {font-size:1.4rem;padding-left:1rem;}
.list.num-circle > li {counter-increment:num2;position:relative;padding-left:2.8rem;}
.list[class*=num] li + li {margin-top:1.2rem;}
.list.num-circle > li::before {content:counter(num2) " ";top:0.2rem;left:0;width:2.0rem;height:2.0rem;font-size:1.4rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray90);border-radius:50%}
.list.num > li {counter-increment:num;padding-left:1.8rem;}
.list.num > li::before {content:counter(num) ".";top:0;width:1.8rem;}
.list.num-circle .num li {font-size:1.4rem;}
.list.num-circle .num li + li {margin-top:0.6rem;}
.list li > .list {margin-top:1.0rem;}
.list.small li{font-size:1.4rem;}
.list.small.dot > li::before{top:0.9rem;}

.list.sep { display:flex;flex-direction:row;flex-wrap:wrap;}
.list.sep li {color:#fff;opacity:.7;font-size:1.3rem;/* flex:1;*/padding-bottom:.5rem;}
.list.sep li::after {content:"";display:inline-block;width:1px;height:1rem;margin:0 .5rem;background:#fff;opacity:.7;}
.list.sep li::last-child::after {content:none;}

/* .tit-st01 + .list, .tit-st02 + .list, .tit-st03 + .list {margin-top:1.6rem;} */
.tit-st01 + .list, .tit-st02 + .list, .tit-st03 + .list,
.board-wrap + .list, .inp-wrap + .list, .write + .list {margin-top:2.0rem;}

/* ordered-list-circle */
.ordered-list-circle .ordered-list-item{counter-increment:num;margin-top:1.2rem;padding-left:3.2rem;position:relative;font-size:1.6rem;line-height:1.5;color:var(--gray80);}
.ordered-list-circle .ordered-list-item:first-child{margin-top:0;}
/* .ordered-list-circle .ordered-list-item:before{content:counter(num);width:2.4rem;height:2.4rem;position:absolute; left:0; top:0;font-size:1.4rem;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--gray40);border-radius:50%;} */
.ordered-list-circle .ordered-list-item .num {position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;font-size:1.4rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;background:var(--gray40);border-radius:50%;}
.ordered-list-line .ordered-list-item{margin-top:2rem;padding-left:3.2rem;font-weight:700;color:var(--gray90);}
.ordered-list-line .ordered-list-item:before{color:var(--gray80);}
.ordered-list-line .ordered-list-item:after{content:"";width:1px; height:calc(100% - 2rem);background:var(--gray50);position:absolute;top:3.4rem;left:1.2rem;}
.ordered-list-line .ordered-list-item:last-child:after{display:none;}
[class*="ordered-list"] .ordered-list-item .txt-small{display:block;margin-top:0.8rem;line-height:1.5;color:var(--gray80);font-weight:400;}
  
/* ===== Data List ===== */
/* .st-02, .st-03 스타일 동일. li 내용만 다를 뿐.. */
.con-list:not(.search) {border-top:1px solid var(--gray30);}
.con-list:not(.search) > li {padding:1.6rem 0;border-bottom:1px solid var(--gray30);}

.con-list:not(.search) > li > div {display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:.5rem;font-size:1.6rem;}
.con-list:not(.search) > li > div:last-child {padding-bottom:0}
.con-list:not(.search) > li > div span:first-child {font-size:1.4rem;color:var(--gray90);margin-right:0.8rem;padding:0.15rem 0;}
.con-list:not(.search) > li > div span:last-child {color:var(--gray100);flex:0 0 60%;text-align:right;margin:0;}
.con-list:not(.search) > li > div span em {margin-left:0.3rem;}

/*
.con-list.st-02 {border-top:1px solid #637079;}
.con-list.st-02 > li {padding:2.5rem 0;}
.con-list.st-02 > li:last-child {border-bottom:none;}
.con-list.st-02 > li p {text-align:left;}
*/
/* no data */
.no-data {position:relative;color:var(--gray100);font-size:1.8rem;font-weight:700;padding-top:9.6rem;text-align:center;margin:6.0rem 0;}
.no-data::before {content:"";position:absolute;left:0;right:0;top:0;display:block;width:6.6rem;height:6.6rem;margin:0 auto;background:url(../images/icon-66-nodata.png) no-repeat 50% 50%/contain;}
.no-data p:last-child {font-size:1.6rem;font-weight:400;color:var(--gray90);margin-top:1.0rem;word-break:keep-all;}
.no-data + .button-section{margin-top:-2.0rem;}
.wrap.bg-gray .box.bg-03 + .box .no-data, .wrap.bg-gray .box.bg-gray + .box .no-data {margin:3.0rem 0 0;}
.box.mt16 > .no-data {margin-top:calc(6.0rem - 1.6rem);}
.layer-container .no-data {margin:4.0rem 0;}
.layer-container .no-data + .button-section{margin-top:0;}
/* 계좌 */
.account {display:flex;flex-direction:column !important;justify-content:flex-start !important;align-items:flex-start !important;}
.account > strong {font-size:1.5rem;color:#021715;line-height:1.4;}
.account > p {font-family:'RoboR';font-size:1.5rem;color:#021715;line-height:1.4;}
.account > p > * {vertical-align:middle;font:inherit;color:inherit;}
.account > p > .old-acc {margin-left:.5rem;}
 
/* 계좌 상단 버튼 */
.bg-gray .new_form_btn{background:var(--white);}
.new_form_btn{padding:2rem 1.6rem;background:var(--gray10);border-radius:1.6rem;}
.new_form_btn .Lbtn.btn-st05{background:transparent;width:100%;padding-left:0;height:auto;min-height:auto;}
.new_form_btn .Lbtn.btn-st05.set_on{padding-left:3.2rem;}
.new_form_btn .Lbtn.btn-st05 .account-ci{position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;}
.new_form_btn .Lbtn.btn-st05 span{display:block;font-size:1.6rem;color:var(--gray100);line-height:1.5;}
.new_form_btn .Lbtn.btn-st05 span + span{margin-top:0.1rem;font-size:1.4rem;color:var(--gray80);}

.acc_list li{position:relative;padding-left:3.2rem;display:flex;flex-direction:column;}
.acc_list li + li{margin-top:1.6rem;}
.acc_list li .account-ci{width:2.4rem; height:2.4rem;position:absolute;left:0;top:0;}
.acc_list li .acc{font-size:1.6rem;color:var(--gray100);}
.acc_list li .num{margin-top:0.3rem;font-size:1.4rem;color:var(--gray80);}

/* 계좌선택 리스트 */ 
.account-box {position:relative;width:100%;border-radius:1.6rem;padding:2.0rem 1.6rem;display:flex;flex-wrap:wrap;}
.account-list li button.account-box{background:var(--white);}
div.account-box {background:var(--gray10);}
.account-box + .account-box {margin-top:1.6rem;}
.account-box .account-ci{width:2.4rem;height:2.4rem;margin-right:0.8rem;font-size:0;}
.account-box .account-con {flex:1;position:relative;}
.account-box .account-con > p {word-break:break-word !important;}
.account-box:not(.swiper-slide) .account-con > p:not(.tit-unit) {padding-right:3.2rem;}
.account-box p{font-size:1.6rem;color:var(--gray100);text-align:left;}
.account-box p + p{font-size:1.4rem;}
.account-box p span{display:inline-block;font-size:1.4rem;color:var(--gray80);}
.account-box p span.nick{margin-left:0.2rem;font-size:1.6rem;}
.account-box p span.amount{font-size:1.6rem;position:relative;display:inline-block;padding-left:2.0rem;}
.account-box p span.amount::before {content:'';position:absolute;left:1.0rem;top:50%;transform:translateY(-50%);display:inline-block;width:1px;height:55%;background:var(--gray80);margin-top:1px;}
.account-box p:last-child {line-height:2.1rem;}
.account-box .btn-switch-toggle {position:absolute;right:0;top:1.1rem;}
.account-box .amount-unit, .account-box .btn-link + .amount-unit {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:0.8rem;width:100%;}
.account-box .amount-unit .label, .account-box button + .amount-unit .label {margin-left:auto;font-size:1.4rem;color:var(--gray80);margin-left:auto;width:100%;text-align:right;}
.account-box .amount-unit span + span, .account-box .btn-link + .amount-unit span + span {margin-left:0.3rem;}
.account-box .amount-unit .unit, .account-box .btn-link + .amount-unit .unit {font-size:1.8rem;color:var(--gray100);}
.account-box .amount-unit .amount, .account-box .btn-link + .amount-unit .amount {font-size:2.4rem;font-weight:700;color:var(--gray100);}
.account-box .amount-unit .amount + span, .account-box .btn-link + .amount-unit .amount + span {font-size:2.0rem;font-weight:700;margin-top:0.1rem;}
.account-box .amount-unit-hide {text-align:right;;margin-top:0.8rem;width:100%;}
.account-box .amount-unit-hide .amount {font-size:2.4rem;font-weight:700;color:var(--gray100);}
.account-box .btn-switch-toggle ~ .amount-unit {display:none;}
.account-box .btn-switch-toggle ~ .amount-unit-hide {display:block;}
.account-box .btn-switch-toggle.on ~ .amount-unit {display:flex;}
.account-box .btn-switch-toggle.on ~ .amount-unit-hide {display:none;}
.account-box .acc_type span{display:inline-block;margin-left:0.8rem;margin-top:0;font-size:2.4rem;font-weight:700;color:var(--gray100);vertical-align:-0.1rem;}
.account-box .btn-down {z-index:1;position:absolute;top:2.0rem;right:1.6rem;width:2.4rem;height:2.4rem;background:url(../images/icon-24-down.png) no-repeat 50% 50%/contain;}
.account-box .account-nick {display:block;width:100%;text-align:left;margin-right:auto;margin-bottom:1.2rem;font-size:1.4rem;font-weight:700;}
.account-box .btn-link {position:relative;width:100%;display:flex;flex-wrap:wrap;background:url(../images/icon-24-arrow-right.png) no-repeat right top 50%/2.4rem;}
/* .account-box .amount-unit {width:calc(100% + 2.4rem);} */
.account-box .check-set {display:-webkit-flex;-webkit-justify-content:flex-end;display:flex;justify-content:flex-end;width:100%;margin-top:2.0rem;background:#fff;border-radius:1.2rem;padding:1.0rem 1.6rem;}
.account-box .check-set input {width:1.6rem;height:1.6rem;background:url(../images/icon-form-check-off.png) no-repeat 50% 50%/contain;margin-top:0.4rem;}
.account-box .check-set label {font-size:1.6rem;font-weight:400;color:var(--gray100);margin-left:0.8rem;flex:1;}
.account-box .check-set input:checked {background-image:url(../images/icon-form-check-on.png);}
.account-box .check-set .check-set input:disabled, .account-box .check-set input:disabled + label {opacity:0.6;}
.account-box.linked .account-con > p:not(.tit-unit) {padding-right:3.2rem;}

.account-list li{position:relative;}
.account-list > li + li{margin-top:1.6rem;}
.account-list li.on:before{border:2px solid var(--primary);}
.account-list li input[type=checkbox] {position:absolute;width:100%;height:100%;}
.account-list button.account-box:before {content:"";width:100%;height:100%;position:absolute;left:0;top:0;border:1px solid var(--gray40);border-radius:1.6rem;}
.account-list label.account-box {background:var(--white) url(../images/icon-form-check-off.png) no-repeat right 1.6rem top 50%/ 1.6rem;}
.account-list:not(.koas-account) input[type=checkbox]:checked + label {font-weight:400;background-image:url(../images/icon-form-check-on.png);background-position:right 1.4rem top 50%;border:2px solid var(--primary);padding:1.8rem 1.4rem;}
.account-list .account-box.on:before {border:2px solid var(--primary);}
/* 바텀시트 셀렉트리스트 */ 
.layer-container .con-list.st-03 {border:0;margin-top:0.6rem !important;}
.layer-container .con-list.st-03 li {padding:2.4rem 0;text-align:left;font-size:1.8rem;color:var(--gray100);cursor:pointer;position:relative;border-bottom:1px solid var(--gray30) !important;}
.layer-container .con-list.st-03 li + li {margin-top:0 !important;}
.layer-container .con-list.st-03 li > *:first-child * {font-size:1.8rem;color:var(--gray100);}
.layer-container .con-list.st-03 li > button {font-size:1.8rem;color:var(--gray100);}
.layer-container .con-list.st-03:not(.type03) li > span.tit-st04 {width:100%;display:block;}
/* .layer-container .con-list.st-03 li.is-active {color:var(--primary);font-weight:700;} */
/* .layer-container .con-list.st-03 li.is-active::after {content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:2.4rem;height:2.4rem;background:url(../images/icon-form-check-on.png) no-repeat 0 0/contain;} */

/* table data-list */
.board.view {position:relative;width:100%;height:100%;border-radius:1.6rem;background:var(--gray10);padding:0.4rem 1.6rem;border-collapse:unset;}
.board.view th, .board.view td {padding:1.6rem 0;border-bottom:1px solid var(--gray30);}
.board.view tr:last-child th, .board.view tr:last-child td {border-bottom:0;}
.board.view th {text-align:left;color:var(--gray90);font-size:1.4rem;font-weight:400;padding-top:1.7rem;padding-right:0.8rem;}
.board.view td {text-align:right;color:var(--gray100);font-size:1.6rem;}
.board.view .s-info * {color:#021715;}
.board.view td .txt-desc {font-size:1.2rem;color:#8e9796;}

.bg-box .board.view {border-radius:0;background:none;padding:0;}
.bg-box .board.view tr:first-child th, .bg-box .board.view tr:first-child td {padding-top:0;}
.bg-box .board.view tr:last-child th, .bg-box .board.view tr:last-child td {padding-bottom:0;}

/*
.view-2 tbody th, .view-2 tbody td {text-align:left;padding:1.5rem .5rem 1.5rem 2rem;vertical-align:middle}
.view-2 tbody th {background-color:#f0f4f5;color:#44484b;}
.view-2 tbody td {color:#021715;} 
*/ 
.con-list > li > .toggle-con + div.inline-button {display:block;} 
.con-list > li > .toggle-con + div.toggle-con {display:none;}

/* 라디오 셀렉트 목록 */
.select-lang, .select-list {}
.select-lang li, .select-list li {width:100%;position:relative;}
.select-lang li + li, .select-list li + li, .con-list.search li + li {margin-top:0.8rem;}
.select-lang label, .select-list label, .con-list.search .country {position:relative;display:flex;align-items:center;width:100%;height:5.6rem;border-radius:1.2rem;padding:1.4rem 3.8rem 1.4rem 1.4rem;background:url(../images/icon-form-check-off.png) no-repeat right 1.6rem center/1.6rem;color:var(--gray100);border:2px solid transparent;}
.select-lang label img, .select-list label img, .con-list.search .country img {width:2.4rem;height:1.6rem;margin-right:0.8rem;}
.select-lang li.selected label, .select-list li.selected label, .con-list.search li.selected .country {color:var(--primary);font-weight:700;background-image:url(../images/icon-form-check-on.png);border:2px solid var(--primary);}
/* .select-lang li.selected label::before, .select-list li.selected label::before, .con-list.search li.selected .country::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;border:2px solid var(--primary);border-radius:1.2rem;} */
.select-list li > input[type=checkbox] {position:absolute;width:100%;height:100%;}

.con-list.search .country {display:block;min-height:5.6rem;height:auto;padding-left:4.8rem;}
.con-list.search .country img {position:absolute;left:1.6rem;top:50%;transform:translateY(-50%);}
.con-list.search .country span {display:inline-block;}
.country > span:first-of-type {margin-right:.4rem;word-break:break-word !important;}
.country > span:last-of-type {min-width:3rem;}

.combo-toggle > dt {position:relative;display:flex;justify-content:flex-start;align-items:flex-start;padding:2.0rem 3.2rem 2.0rem 0;border-top:1px solid var(--gray30);border-bottom:1px solid var(--gray30);}
.combo-toggle > dt::after {content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:2.4rem;height:2.4rem;background:url(../images/icon-24-down.png) no-repeat 0 0/contain;}
.combo-toggle > dt.on {font-weight:700;color:var(--gray100);border-bottom:0;}
.combo-toggle > dt.on::after {transform:translateY(-50%) rotate(180deg);}
.combo-toggle > dd {display:none;padding:0 0 2.0rem;font-size:1.4rem;color:var(--gray80);}
.combo-toggle > dt.on + dd {display:block;border-bottom:1px solid var(--gray30);}
.combo-toggle dd + dt,
.combo-toggle + .combo-toggle > dt {border-top:0;}


/* ===== Box ===== */
/* gray box */
.bg-box {border-radius:1.6rem;background:var(--gray10);padding:2.0rem 1.6rem;word-break:break-word;}
.bg-box + .bg-box {margin-top:1.6rem;}
.bg-box .con-list {border:0;}
.bg-box .con-list li:first-child {padding-top:0;}
.bg-box .con-list li:last-child {padding-bottom:0;border-bottom:0;}

.bg-box-white {border-radius:1.2rem;background:var(--white);padding:2.0rem 1.6rem;}

/* no line */
.bg-box .con-list.st-03, .toggle-con .con-list.st-03 {border:0;}
.bg-box .con-list.st-03 li, .toggle-con .con-list.st-03 li {border:0;padding:0;}
.bg-box .con-list.st-03 li + li, .toggle-con .con-list.st-03 li + li {margin-top:2.0rem;}

.bg-box .htit-st03 + *:not(.toggle-con) {margin-top:1.6rem;}

.bg-box.bg-03 {background:var(--white);padding:2.0rem 1.6rem;} /* inner white box */

/* as-is */
.have-toggle > li, .have-toggle > dt {position:relative;padding-right:5rem;cursor:pointer} 
.have-toggle > li::after, .have-toggle > dt::after {content:'';position:absolute;right:1rem;top:1.5rem;background:url(../images/icon-24-down.png) no-repeat 50% 50%/contain;width:2.4rem;height:2.4rem;}
.have-toggle > li.on::after, .have-toggle > dt.on::after {transform:rotate(-180deg);}
.have-toggle .toggle-con, .have-toggle > dd {display:none !important;}
.have-toggle li.on .toggle-con {display:block !important;}

.have-toggle > dt {padding:1.2rem 4rem 1.2rem 0;}
.have-toggle > dt::after {top:0;background-position:0 -58.1rem}
.have-toggle > dt.on::after {background-position:-2.5rem -58.1rem}
.have-toggle > dt.on + dd {display:block;} 
dl.have-toggle > dd {padding:0 3.8rem;}
.have-toggle > dt::after {top:1.2rem;}

/* to-be */
.have-toggle .toggle-anchor {position:relative;padding-right:3.2rem;cursor:pointer;font-weight:400;} 
.have-toggle .toggle-anchor::after {content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);background:url(../images/icon-24-down.png) no-repeat 50% 50%/contain;width:2.4rem;height:2.4rem;}
.have-toggle .toggle-anchor.on::after {transform:translateY(-50%) rotate(-180deg);}
.have-toggle .toggle-anchor.htit-st03.on {font-weight:700;}
.have-toggle .toggle-anchor.on + .toggle-con {display:block !important;position:relative;}
.have-toggle .toggle-con {margin-top:2.0rem;}

/* ===== Table ===== */
.board {width:100%;position:relative;} 
.board th, .board td {vertical-align:middle;word-break:break-word !important;}
.board th * , .board td * {word-break:break-word !important;}
.board th {text-align:center;}
h2 + .board-wrap, .htit-st03 + .board-wrap {margin-top:1.6rem;}
.board-top {display:flex;justify-content:space-between;align-items:center;}
.board-top p {text-align:left;color:#8e9796;font-size:1.3rem;margin-bottom:1.2rem;}

.board-list-wrap {width:100%;height:100%;border-top:1px solid var(--gray70);border-bottom:1px solid var(--gray70);}
.board-list-wrap .board.list::before {display:none;}
.board:not(.view)::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-top:1px solid var(--gray70);border-bottom:1px solid var(--gray70);} 
.board:not(.view) thead > tr {border-bottom:1px solid var(--gray30);}
.board:not(.view) thead th, .board:not(.view) tbody td {color:var(--gray90);font-size:1.6rem;}
.board:not(.view) thead th {font-weight:bold;padding:1.2rem;background:var(--gray20);}
.board:not(.view) tbody tr {border-bottom:1px solid var(--gray30);}
.board:not(.view) tbody tr:last-child {border-bottom:0;}
.board:not(.view) tbody td, .board:not(.view) tfoot td {padding:1.6rem 1.2rem;text-align:left;background:var(--white);}
.board:not(.view) tbody th, .board:not(.view) tbody td[role="rowheader"], .board:not(.view) tfoot th {padding:1.6rem 1.2rem;text-align:center;background:var(--gray20);font-weight:700;}
.board:not(.view) tbody th + td, .board:not(.view) tbody td[role="rowheader"] + td {padding:1.6rem;}
.board:not(.view) th, .board:not(.view) td[role="rowheader"], .board:not(.view) td {border-right:1px solid var(--gray30);border-left:1px solid var(--gray30);}
.board:not(.view) th:first-child, .board:not(.view) td:first-child {border-left:1px solid transparent;}
.board:not(.view) th:last-child, .board:not(.view) td:last-child {border-right:1px solid transparent;}
.board:not(.view) thead + tbody th, .board:not(.view) tbody + tfoot th {font-weight:400;background:var(--gray10);}
.board:not(.view) thead + tbody th ~ td, .board:not(.view) tbody + tfoot th ~ td {text-align:center;}
.board:not(.view) tfoot tr{border-top:1px solid var(--gray30);}
.board:not(.view) tfoot th, .board:not(.view) tfoot td{font-size:1.6rem;color:var(--gray90);}
.board tfoot .s-info * {color:#4a90e2 !important;font-size:1.5rem !important}
/* as-is는 스타일이 좀 다르지만 to-be에선 같은 스타일임. 필요 시 추가
.board.list2 thead th {background:#f0f4f5;font-weight:bold;color:#021715;}
.board.list2 thead th, .board.list2 tbody td {border-right:1px solid #e2e9eb;}
.board.list2 thead th:last-child, .board.list2 tbody td:last-child {border-right:0;}
.board.list2 tbody td {border-bottom:1px solid #e2e9eb;color:#021715;}

.board.list3 th, .board.list3 tbody td {text-align:center !important;vertical-align:middle}
.board.list3 tbody th {background-color:#f0f4f5;color:#44484b;}
*/


/* ===== Layer Pop ===== */
.lpop-wrapper {z-index:10;position:fixed;top:0;left:0;right:0;bottom:0;display:table;width:100%;height:100%;}
.layer-bg {z-index:1;position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:.4;}
.layer-pop-wrap {display:table-cell;width:100%;padding:0;vertical-align:bottom;}

.layer-pop {z-index:5;position:relative;background:#fff;border-radius:3.0rem 3.0rem 0 0;}
.layer-pop > header {position:relative;background:#fff !important;padding:6.0rem 2.0rem 0;flex-direction:column;align-items:flex-start;border-radius:3.0rem 3.0rem 0 0;}
.layer-pop > header h1 {font-size:2.0rem;font-weight:700;color:var(--gray100) !important;text-align:left;padding:0;}
.layer-pop > header h1.h1-status {position:relative;}
.layer-pop > header h1.h1-status::after {content:'';position:absolute;bottom:0;left:50%;margin-left:-1.8rem;width:3.5rem;height:.2rem;background:#999}
.layer-pop > header .sub-txt{margin-top:1rem;}

.lpop-wrapper footer {padding:0 2.0rem 2.0rem;}
.layer-pop .btn-section {border-top:1px solid #ccc;}
.layer-pop .btn-section button {height:4rem;line-height:4rem;margin-right:0;font-size:1.5rem;font-weight:bold;border-right:1px solid #ccc;background:#fafafa !important;}
.layer-pop .btn-section button:last-child {border-right:0;}
.layer-pop .btn-section .btn-st-01 {color:#0d5779;}
.layer-pop .btn-section .btn-st-02 {color:#666;}
.layer-pop {animation-name:open-lpop, fadeIn;animation-duration:250ms;}

@keyframes open-lpop {
	from {margin-bottom:-700px;}
	to {margin-bottom:0;}
}

@keyframes fadeIn {
	from {opacity:0;}
	to {opacity:1;}
}

/* Content*/
.layer-container {min-height:12rem;max-height:calc(90vh - 9.0rem - 5.6rem);text-align:center;display:flex;flex-direction:column;justify-content:space-between;flex:1;}
.layer-container .content, .layer-container > .scroll {padding:0 2.0rem 4.0rem !important;}
.layer-container .content .scroll {padding:0;}
.layer-container .scroll {flex:1;overflow-y:auto;display:block;}
.layer-container .content.scroll > *:first-child {margin-top:3.0rem;}
.layer-container.main-layer {max-height:32.0rem;}
/* .layer-container .tab-cont.scroll {margin-left:-2.0rem;width:calc(100% + 4.0rem);max-height:calc(400px - 3.5rem);overflow-y:auto;padding:0 2.0rem !important;} */
.layer-container .tab-cont {display:none;max-height:calc(90vh - 9.0rem - 5.6rem - 7.6rem);overflow-y:auto;padding:0 0 4.0rem !important;}
.layer-container .fixed-tab {padding-bottom:0 !important;}
.layer-pop.is-footer .content {padding-bottom:calc(2.0rem + 1.6rem);}
.layer-container .tab {padding:0;margin:2.0rem 0 !important;}
 /* Alert, Confirm */
.layer-pop.alert {position:absolute;top:50%;transform:translateY(-50%);left:2.0rem;right:2.0rem;animation-name:fadeIn;border-radius:2.0rem;}
.layer-pop.alert .layer-container {padding:3.0rem 2.0rem 2.0rem;}
.layer-pop.alert .content .htit-st03{margin-bottom:1.6rem;}
.layer-pop.alert .content {display:flex;flex-direction:column;text-align:left;padding:0 !important;}
.layer-pop.alert .content > p {font-size:1.6rem;color:var(--gray90);margin-top:0 !important;}
.layer-pop.alert .content > em {margin-top:0.8rem;font-size:1.4rem;}

.layer-pop.alert .inline-button {display:flex;width:100%;margin-top:2.4rem;}
.layer-pop.alert .inline-button button {flex:1;height:4.9rem;min-height:4.9rem;font-size:1.4rem;}
.layer-pop.alert .inline-button button + button {margin-left:1.3rem;}

.layer-pop:not(.alert) .btn-pop-close {position:absolute;top:1.6rem;right:2.0rem;width:3.2rem;height:3.2rem;background:url(../images/btn-32-close.png) no-repeat 0 0/contain;font-size:0;color:transparent;}
.layer-pop.alert .btn-pop-close {width:3.2rem;height:3.2rem;background:url(../images/btn-32-close.png) no-repeat 0 0/contain;font-size:0;color:transparent;display:block;margin:1.6rem 2.0rem 0.4rem auto;}
.layer-pop.alert .btn-pop-close + .layer-container {padding-top:0.8rem;}

.layer_type02{z-index:20;}
.layer_type02 .layer_con{border-radius:2rem;background:#fff;position:absolute;padding:3.0rem 2.0rem 2.0rem;z-index:5;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%, -50%);width:calc(100% - 4rem);}
.layer_type02 .layer_con .tit{border-bottom:1px solid #637079;font-size:1.6rem;color:#021715;display:block;font-weight:bold;text-align:center;padding:1.7rem .5rem;}
/* .layer_type02 .layer_inner{min-height:13rem;max-height:30rem;overflow-y:auto;} */
.layer_type02 .layer_inner .con_imp{margin-top:0 !important;font-size:1.8rem;font-weight:700;color:var(--gray100);}
.layer_type02 .layer_inner input{height:3.6rem;border-bottom:1px solid #27b2a5;width:100%;}
.layer_type02 .layer_inner .txt{color:var(--gray90);font-size:1.4rem;}
.layer_type02 .layer_btn_wr{display:flex;width:100%;margin-top:2.4rem;}
.layer_type02 .layer_btn_wr .layer_btn{flex:1;heihgt:auto;min-height:4.9rem;color:#fff;font-size:1.4rem;font-weight:700;text-align:center;padding:0 1.6rem;border-radius:1.2rem;}
.layer_type02 .layer_btn_wr .bt_st01{background:var(--gray10);color:var(--gray80);}
.layer_type02 .layer_btn_wr .bt_st02{background:var(--primary);}
.layer_type02 .layer_con.as_expanded { position: absolute; z-index: 5; top:50%; left:50%; transform: translate(0, -50%); width: 90%; margin-left: -45%; padding-bottom: 0; border-radius: 0; background-color: transparent; }
.layer_type02 .layer_con.as_expanded .layer_con { position: relative; top: auto; left: auto; width: auto; margin-left: 0; transform: none; }
.layer_type02 .no-more-today { margin-top: 1.5rem; }
.layer_type02 .no-more-today button { position: relative; overflow: hidden; width: 50%; border-width: 0; border-radius: 0; background-color: transparent; padding: 0 0 11.1111%; }
.layer_type02 .no-more-today button::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url("../../resource/images/common_popup_no-more-today.png") no-repeat; background-size: auto 36px; content: ''; }
.layer_type02 .no-more-today button > .val { position: absolute; margin: -1px; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Toast */
.toast-pop {z-index:30;position:fixed;left:2.0rem;right:2.0rem;bottom:-5rem;width:calc(100% - 4.0rem);display:flex;justify-content:center;align-items:center;min-height:5rem;border-radius:1.2rem;background:var(--gray80);transition:bottom 0.2s ease-in-out;}
.toast-pop p {font-size:1.4rem;text-align:center;line-height:1.3;color:#fff;}
.toast-pop.open {animation-name:open-toast;animation-duration:5s;}
.toast-pop.is-bottom.open {animation-name:open-toast-bottom;}
@keyframes open-toast {
	0% {bottom:-5rem;}
	6% {bottom:9.2rem;}
	50% {bottom:9.2rem;}
	94% {bottom:9.2rem;}
	100% {bottom:-5rem;}
}
@keyframes open-toast-bottom {
	0% {bottom:-5rem;}
	20% {bottom:2.0rem;}
	80% {bottom:2.0rem;}
	100% {bottom:-5rem;}
}
 
/*** badge ***/
.badge{display:inline-block; width:fit-content; min-width:3.4rem; padding: 0 0.6rem; text-align:center; height:2.2rem; line-height:2.2rem; border-radius:2rem; font-size:1.2rem; font-weight:400;}
.badge.green{background:var(--primary); color:var(--white);}
.badge.blue{background:#1d6dc8; color:var(--white);}
.badge.light-blue{background:#dfeeff; color:var(--ready);}

/*** badge-line ***/
.badge-line{display:inline-block; width:fit-content; min-width:3.4rem; padding:0 0.6rem; text-align:center; height:2.2rem; line-height:2.2rem; border-radius:0.6rem; border:1px solid var(--cancel); color:var(--cancel); font-size:1.2rem; font-weight:500;}
.badge-line.blue{border-color:#1d6dc8; color:#1d6dc8;}
.badge-line.green{border-color:#007b80; color:#007b80;}
.badge-line.red {border-color:#d70d60;color:#d70d60;}

/*** badge-rect ***/
.badge-rect{display:inline-block; width:fit-content; min-width:3.4rem; padding:0.4rem 0.8rem; text-align:center; border-radius:0.8rem; background:var(--gray30); color:var(--cancel); font-size:1.2rem !important; font-weight:700;}
.badge-rect.blue{background:rgba(29,109,200,0.08);color:#1d6dc8 !important;} /* 안심 */
.badge-rect.green{background:rgba(0,123,128,0.08);color:#007b80 !important;} /* 다소안심 */
.badge-rect.yellow{background:rgba(176,83,18,0.08);color:#b05312 !important;} /* 보통 */
.badge-rect.pink{background:rgba(186,58,136,0.08);color:#8a3a88 !important;} /* 신중 */
.badge-rect.red{background:rgba(212,23,40,0.08);color:#d41728 !important;} /* 주의 */

/* 완료 */
.scroll.finish {padding:0 2rem calc(4.0rem + 1.6rem);}
.scroll.finish-regis {padding:3.0rem 2rem calc(4.0rem + 1.6rem); justify-content:flex-start !important;} /* ID 등록완료 */
.scroll.finish-regis .box-top-desc strong{display:block;text-align:center;font-size:2rem;font-weight:700;color:var(--gray100);}
.scroll.finish .box-top-desc {padding:3.0rem 0 4.0rem;}
.scroll.finish .box-top-desc + .box {flex:100%;}
.scroll.finish .box-top-desc .complete {display:block;text-align:center;font-size:2.4rem;font-weight:700;color:var(--gray100);}
.scroll.finish .box-top-desc .complete::before {content:'';width:7.2rem;height:7.2rem;background:url(../images/icon-72-done.png) no-repeat 50% 50%/contain;display:block;margin:0 auto 2.0rem;}
.scroll.finish .box-top-desc ~ div:not([class*=button]), .scroll.finish .box-top-desc + p[class*=tit] {margin-top:3.0rem;}
.scroll.finish .box-foot-desc [class*=txt-dot] {margin-top:-1.0rem;}
/* 실패 */ 
/* .scroll.error {display:flex;flex-direction:column;justify-content:center;align-items:center;} */
body > .scroll.error {height:calc(100vh - 7.6rem);}
.scroll.error .box-top-desc * {text-align:center;display:block;padding:0 1.6rem;}
.scroll.error .stxt {margin-top:1.0rem;word-break:break-word !important;}
.scroll.error .xstxt {margin-top:1.0rem;}
.box-top-desc .fail, .box-top-desc .fail-2 {display:block;text-align:center;font-size:2.4rem;font-weight:700;color:var(--gray100);padding:0 1.6rem;}
.box-top-desc .fail::before, .box-top-desc .fail-2::before  {content:'';width:7.2rem;height:7.2rem;background:url(../images/icon-72-fail.png) no-repeat 50% 50%/contain;display:block;margin:0 auto 2.0rem;}
.box-top-desc .list.dash > li + li {margin-top:1.2rem;}
.box-top-desc .list.dash > li::before {top:1.1rem;width:3px;height:3px;border-radius:50%;background:var(--gray80);}
.box-top-desc .stxt-bold {font-weight:700;text-align:center;}
/* .box-top-desc [class*=stxt] + .stxt {margin-top:0.3rem;} */
.box-top-desc .xstxt {font-size:1.4rem;color:var(--gray80);word-break:break-word !important;}
/* .box-top-desc.error {padding:0; margin: 0 0 2rem 0;}  */
.box-top-desc.error ~ .txt-large {margin-bottom:2rem !important;text-align:center;}
.box-top-desc.error ~ div {width:100%;text-align:center;}
.box-top-desc.error ~ div + div {margin-top:1.0rem;}
.box-top-desc .list.dash > li {padding-left:1.1rem;font-size:1.6rem;color:var(--gray80);}
.box-top-desc.error + .list {margin-top:7.0rem;}

.finish .box-top-desc strong + .stxt, .box-top-desc.error strong + .stxt {margin-top:1.0rem;}

/* 실패 */
.box-top-desc strong.fail-1, .box-top-desc strong.fail-2 {display:block;text-align:center;font-size:2.4rem;font-weight:700;color:var(--gray100);}
.box-top-desc strong.fail-1:before,
.box-top-desc strong.fail-2:before  {content:'';width:7.2rem;height:7.2rem;background:url(../images/icon-72-fail.png) no-repeat 50% 50%/contain;display:block;margin:0 auto 2.0rem;}

/*ETC 오류안내, Not Found page*/
.box-not-found, .box-error {padding:0 3rem; text-align:center;}
.box-not-found *,.box-error * { color:#021715;}
.box-not-found:before, .box-error:before {content:""; display:block; width:7.2rem; height:7.2rem; margin:3.0rem auto 2.0rem; background:url("../images/icon-72-fail.png") no-repeat 50% 50%/7.2rem;}

.box-not-found .ltxt, .box-error .ltxt {font-size:2.4rem;font-weight:700; margin-bottom:2.0rem;}
.box-not-found .stxt, .box-error .stxt {font-size:1.4rem;margin-top:1.0rem;}
.box-not-found strong, .box-error strong {display:block;font-weight: bold; margin-top:.5rem;}

.box-not-found + .bg-box {margin-top:3vh; border-radius:1rem;}
.box-not-found + .bg-box strong {font-size:1.3rem;}
.box-not-found + .bg-box strong + p {font-size:1.2rem;}
.box-not-found ~ .inline-button, .box-error ~.inline-button {padding-left:3rem; margin-top:5vh;}