@charset "utf-8"; 
@import url('base.css');
@import url('font.css'); 

/* Basic Set */
html, body {width:100%; height:100%; font:normal 10px/16px 'nanum', sans-serif; color:#647381;}
* {-webkit-text-size-adjust:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:subpixel-antialiased; -webkit-text-stroke:1px transparent;}
/*legend, caption {display:inline;}*/
legend, caption, .blind, .ico_dust span, .footer.paging button.type2, .footer.paging button.type1, .btn_tel {visibility:visible; overflow:hidden; text-indent:-3000em; position:absolute; opacity:0;}

html, body {overscroll-behavior:contain;}

h2, h3 {color:#213d55; font-weight:bold;}
strong, em {color:rgba(0,30,62,.87);}
 
.normal{font-weight:normal}

input, textarea, select, button {
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
	appearance:none;
	outline:none;
	-webkit-border-radius:0;
	font:normal 10px/16px 'nanum', sans-serif; color:#647381;
	background:transparent;
}

button {cursor:pointer;}
table {border-collapse:collapse; border-spacing:0;border: none;}

/*div[role=button]:focus, h2:focus, input:focus, textarea:focus, select:focus, button:focus, a:focus, .agree.swiper-slide:focus {
	outline:1px solid blue;
	background:rgba(0,0,0,.5);
} */

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill  {background-color:#fff; transition:background-color 5000s ease-in-out 0s;}
input:disabled {-webkit-text-fill-color:inherit; opacity:1;}
/* point color */
.txt-pot {color:#fa5e50 ! important;}
.txt-pot2 {color:#069587 ! important;}
.txt-pot3{color:#00a1a4 !important}

/* 공통 margin */
.mt20 {margin-top:2rem ! important;}

/* body.open-gnb {position:fixed; left:0; right:0; top:0; bottom:0;}
body.open-gnb:before {contnet:""; display:block; position:fixed; left:0; right:0; top:0; bottom:0; z-index:49; opacity:1;} */

/* Layout */
#sum-wrap {width:100%; min-height:100%; position:relative; font-size:1.2rem; line-height:1.8rem;}
#sum-wrap.pop-back:after {content:""; width:100%; height:100%; position:fixed; left:0; right:0; top:0; bottom:0; z-index:11; background:rgba(0,0,0,.5);}
#sum-wrap.nav-on:after {content:""; width:100%; height:100%; position:absolute; top:0; left:0; right:0; bottom:0; z-index:11; background:rgba(0,0,0,.7);}
#sum-wrap.sel-dim:after {content:""; width:100%; height:100%; position:fixed; left:0; right:0; top:0; bottom:0; z-index:10;}

#sum-top {padding:7.6rem 2.4rem 0; background:#fff; z-index:100;}
.nav-on #sum-top {background:#fff;}
#sum-top > h1 {line-height:100%; text-align:center; padding:2.6rem 0; font-size:2.8rem; font-weight:bold; color:#00203c;}

/* Contents Area */
#sum-body {position:relative;}
#sum-body > div.bot-fix {padding:0;}

/* GNB */
.gnb-ctr, .gnb-back {display:none;}
.sum-gnb {width:100%; position:fixed; left:0; right:0; top:0; background:#fff; z-index:1000;}
.sum-gnb:after {content:""; width:100%; height:1px; background:#eee; position:absolute; left:0; top:7.6rem;}

.gnb-box {position:relative; max-width:1279px; height:77px; margin:0 auto; padding:0; overflow:hidden;}
.gnb-logo {position:absolute; left:0; top:0; padding:2.3rem 2.7rem}
.gnb-logo img {width:auto; height:4rem;}
.gnb-box .gnb-close {width:2.4rem; height:2.4rem; position:absolute; right:2.4rem; top:1.95rem; border:0; display:none;}
.gnb-box .gnb-close:after  {content:""; width:100%; height:1px; background:#000; position:absolute; left:0; right:0; top:50%; transform:rotate(-45deg);}
.gnb-box .gnb-close:before {transform:rotate(45deg);}
.gnb-nav {margin:0 auto; width:100%; padding-left:330px;}
.gnb-nav > ul {position:relative;}
.gnb-nav > ul > li {display:inline-block;}
.gnb-nav > ul > li + li {margin-left:-4px;}
.gnb-nav > ul > li a {display:block;}
.gnb-nav > ul > li a:hover {color:#fa5e50;}
.gnb-nav > ul > li > a {padding:2.9rem 5rem 3rem; font-size:2rem; box-sizing:border-box;}
.gnb-nav > ul > li.on > a {padding:2.9rem calc(5rem - 1px) 3rem; color:#fa5e50; border-left:1px solid #e8ebed; border-right:1px solid #e8ebed; background:#fff; position:relative; z-index:1000;}
.gnb-nav > ul > li > ul {width:100%; position:absolute; left:0; top:7.6rem; overflow:hidden; padding:4rem 0 4rem 5rem; display:none;}
.gnb-nav > ul > li.on > ul {display:table;}
.gnb-nav > ul > li > ul > li {display:table-cell; padding-right:5rem;}
.gnb-nav > ul > li:nth-of-type(1) > ul > li {padding-right:2.5rem;}
.gnb-nav > ul > li > ul > li + li {padding-left:2.5rem;}
.gnb-nav > ul > li:nth-of-type(1) > ul > li + li {border-left:1px solid #e8ebed;}
.gnb-nav > ul > li > ul > li > a {font-size:1.9rem; padding:0 0 3rem; font-weight:bold;}
.gnb-nav > ul > li > ul > li > ul li + li {margin-top:1.4rem;}
.gnb-nav > ul > li > ul > li > ul li a {font-size:1.3rem;}
body.pc-open-gnb:before {z-index:49; -webkit-opacity:1; opacity:1;}
.gnb-top .gnb-logo {position:absolute; top:0; left:0; padding:0; z-index:1;}
.gnb-top a.gnb-logo, .gnb-top .gnb-logo a {display:block; padding:23px 40px;}
.gnb-bnn {width:320px; height:160px; position:absolute; left:0; top:152px;}
.gnb-bot {display:none;}

.head-tit {text-align:center; padding:2.6rem 0; font-size:2.8rem; line-height:2.55rem; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;color: rgba(0,0,0,.87)}

/* Input Checkbox, Radio Type */
#sum-wrap input[type="checkbox"], #sum-wrap input[type="radio"], .pop-wrap input[type="checkbox"], .pop-wrap input[type="radio"] {position:absolute; width:0; height:0; clip:rect(0, 0, 0, 0);}


.chk-cmm + label {font-size:1.4rem; padding-left:2.5rem; position:relative;}
.chk-cmm + label:after {content:""; width:1.5rem; height:1.3rem; position:absolute; left:0; top:0; background:url(/resource/img/onb/app_2018/frm/ico_check_off.png) no-repeat 0 50%; background-size:100%;}
.chk-cmm:checked + label:after {animation: shrink-bounce 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards; background-image: url(/resource/img/onb/app_2018/frm/ico_check_point_on.png);}
@keyframes shrink-bounce{
	0% {-webkit-transform:scale(1); transform:scale(1);}
	33% {-webkit-transform:scale(.55); transform:scale(.55);}
	100% {-webkit-transform:scale(1); transform:scale(1);}
}

input.type-box + label {border:0.1rem solid #a1a1a1; padding:0.8rem 1.0rem 0.8rem 3.8rem; color:rgba(0,0,0,.54); font-size:1.5rem; line-height:1.5em;   -webkit-transition:all 250ms cubic-bezier(.4, .0, .23, 1); transition:all 250ms cubic-bezier(.4, .0, .23, 1); word-break:keep-all;}
input.type-box:checked + label {background:#213d55; color:#fff; border:0.1rem solid #213d55;}

/* Input Text Type1 */
.inp-set {display:flex; flex-wrap:nowrap; justify-content:space-between; height:5.7rem; position:relative; padding-top:1.6rem; border-bottom:1px solid rgba(0,32,60,.2);}
.inp-set.focus {border-bottom:.2rem solid #00a1a4;}
.inp-set input {width:100%; height:4.1rem; border:0; font-size:1.7rem; line-height:3rem; color:#213d55;}
.inp-set label {width:100%; height:4rem; position:absolute; left:0; top:1.7rem; font-size:1.7rem; line-height:4rem; color:#9eaab5; transform-origin:0 0; transform:rotateY(0); transition:all 160ms, color 160ms;}
.inp-set.focus label, .inp-set.on label {top:0; height:auto; -webkit-transform:rotateY(0); transform:rotateY(0); font-size:1.2rem; height:1.8rem; padding:0; line-height:1.8rem;}
.inp-set.focus label {color:#00a1a4;}
.inp-set.focus .won {color:#00a1a4;}
.inp-set .inp-msg {color:#00a1a4; font-size:1.3rem; position:absolute; top:2.6rem; right:3rem;}


/* 금액 입력 inp-unit */
.inp-unit {position:relative;}
.inp-unit .inp-set {width:100%;}
.inp-unit input {width:calc(100% - 2rem);}
.inp-unit.type02 input {width:calc(100% - 3rem);}
.inp-unit.type03 input {width:calc(100% - 4.8rem);}
.inp-unit .won {width:2rem; font-size:1.4rem; text-align:right; color:#213d55; margin-top:1.2rem; display:inline-block;}
.inp-unit.type02 .won {width:3rem;}
.inp-unit.type03 .won {width:4.8rem;}
.inp-unit .txt-prc {display:block; padding:1rem 0 0; color:#9eaab5; display:none;}
.inp-unit .inp-set.focus + .txt-prc {color:#00a1a4;}
.inp-unit.err .inp-set.focus + .txt-prc {color:#fa5e50;}
.inp-unit .gid-txt + .txt-prc {position:absolute; right:0; bottom:0;}

.inp-unit + .gid-txt {margin-top:2rem;}

/* input date */
.inp-set.new-date .inp-txt {padding-right:1.8rem; background:url(/resource/img/onb/app_2018/ico/ico_calendar.png) no-repeat 100% 0.9rem; background-size:2.0rem auto; padding-bottom:0.8rem; padding-top:0.5rem;}

.err {position:relative;}
.err .inp-set {border-bottom:.2rem solid #fa5e50; padding-right:2rem;}
.err .inp-set.on label {color:#9eaab5;}
.err .inp-set.focus label {color:#fa5e50;}
.err .inp-set:after {content:""; display:block; position:absolute; top:2.8rem; right:0; width:1.7rem; height:1.7rem; background: url(/resource/img/onb/app_2018/frm/ico_input_error.png) no-repeat 50% 50%; background-size:contain;}
.err .inp-set .btn-reset {right:2.2rem;}
.err .new-date {padding-right:0;}
.err .new-date .inp-txt {padding-right:5rem; background:url(/resource/img/onb/app_2018/ico/ico_calendar_err.png) no-repeat 100% center; background-size:2.0rem auto;}
.err .new-date:after {content:""; display:block; position:absolute; top:2.8rem; right:2.8rem; width:1.7rem; height:1.7rem; background: url(/resource/img/onb/app_2018/frm/ico_input_error.png) no-repeat 50% 50%; background-size:contain;}

.inp-unit.err:after {content:""; display:block; position:absolute; top:2.8rem; right:0; width:1.7rem; height:1.7rem; background: url(/resource/img/onb/app_2018/frm/ico_input_error.png) no-repeat 50% 50%; background-size:contain;}
.err > .gid-txt, .inp-unit.err > .gid-txt, .err input, .inp-unit.err .won, .inp-unit.err .txt-prc {color:#fa5e50;}

.inp-set.overlay-popup .ico-sel {width:100%; height:4rem; position:absolute; right:0; top:1.6rem;}
.inp-set.overlay-popup .ico-sel:after {content:""; display:block; position:absolute; width:0.9rem; height:0.9rem; top:1.4rem; margin-left:-.6rem;box-sizing:border-box; border:0.2rem solid rgba(0,32,60,.25); border-left-width:0; border-top-width:0; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:transform 200ms cubic-bezier(.4, .0, .23, 1); transition:transform 200ms cubic-bezier(.4, .0, .23, 1); right:0.2rem;}
.inp-set.overlay-popup.focus .ico-sel:after {top:50%; -webkit-transform:rotate(225deg);transform:rotate(225deg);border-color:#00a1a4;} 
.inp-set .ico-bank {position:absolute; left:0; top:2.2rem;}
.inp-set .ico-bank + label, .inp-set .ico-bank ~ input {padding-left:3.6rem;}
.inp-set.focus .ico-bank + label, .inp-set.selected .ico-bank + label, .inp-set.on label {padding-left:0;}
.inp-set.overlay-popup .tit span {padding-left:3.6rem;}
.inp-set.reset-able .inp-txt {padding-right:3rem;}

.inp-set.overlay-popup2 .ico-sel {width:100%; height:4rem; position:absolute; right:0; top:1.6rem;}
.inp-set.overlay-popup2 .ico-sel:after {content:""; display:block; position:absolute; width:0.9rem; height:0.9rem; top:1.4rem; margin-left:-.6rem;box-sizing:border-box; border:0.2rem solid rgba(0,32,60,.25); border-left-width:0; border-top-width:0; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:transform 200ms cubic-bezier(.4, .0, .23, 1); transition:transform 200ms cubic-bezier(.4, .0, .23, 1); right:0.2rem;}
.inp-set.overlay-popup2.focus .ico-sel:after {top:50%; -webkit-transform:rotate(225deg);transform:rotate(225deg);border-color:#00a1a4;}
.inp-set.overlay-popup2 .tit span {padding-left:3.6rem;}

.inp-set input[type=password] {font-family: Arial, sans-serif; font-size:17px;}
.inp-set input[type=password]::-webkit-input-placeholder {transform:scale(0.77); transform-orgin:0 50%;}

/* inp-txt readonly 일경우 color type 추가 */
.inp-txt.disabled:disabled {color:#213d55; -webkit-text-fill-color:#213d55; opacity:1;}

.btn-reset, .btn-sch, .ord-box.close h2 i {font-size:0; text-indent:-9999px; overflow:hidden;}
.btn-reset {display:none; position:absolute; width:3rem; height:4rem; bottom:0; cursor:pointer; z-index:1; background:url('/resource/img/onb/app_2018/frm/ico_input_reset.png') no-repeat center center; background-size:1.5rem; -webkit-transform:scale(0, 0); transform:scale(0, 0); -webkit-transition:transform 250ms cubic-bezier(.4, .0, .23, 1); transition:transform 250ms cubic-bezier(.4, .0, .23, 1);}
.reset-able .btn-reset {-webkit-transform:scale(1, 1); transform:scale(1, 1); display:block; right:0;}
.btn-sch {display:inline-block; width:3.2rem; height:4rem; position:absolute; right:0; top:auto; bottom:0; z-index:1; background:url(/resource/img/onb/app_2018/ico/ico_search_b.png) no-repeat 100% 50%; background-size:3.0rem auto;}
.focus .btn-sch {background:url('/resource/img/onb/app_2018/ico/ico_search_focus.png') no-repeat 100% 50%; background-size:3.0rem auto;}

.inp-unit .btn-reset {right:2rem;}
.inp-unit.type02 .btn-reset {right:3rem;}
.inp-unit.type03 .btn-reset {right:4rem;}
.inp-unit.err .btn-reset {right:4rem;}
.inp-unit.type02.err .btn-reset {right:5rem;}
.inp-unit.type03.err .btn-reset {right:6rem;}

/* Input case2 */
.ssn-inp {width:100%; display:flex;}
.ssn-inp .tit {width:100%;}
.ssn-inp .ico-txt {width:36px; text-align:center; line-height:3.2rem; padding-top:1.5rem; vertical-align:middle;}
.ssn-inp .inp-set {width:calc((100% - 36px) / 2); vertical-align:middle;}
.ssn-inp .inp-set.focus label span, .ssn-inp .inp-set.on label span {display:none;}
.ssn-inp .inp-set:nth-of-type(3).focus label, .ssn-inp .inp-set:nth-of-type(3).on label {width:100%; height:4rem; opacity:0; top:1.7rem; font-size:1.7rem; line-height:4rem;}

/* Input case3 */
/*
.col-inp .inp-set{width:5.4rem; vertical-align:middle; display: inline-block; text-align: center;}
.col-inp .inp-set.first label{width:300px; text-align: left;top:0; height:auto; -webkit-transform:rotateY(0); transform:rotateY(0); font-size:1.2rem; height:1.8rem; padding:0; line-height:1.8rem;}
.col-inp .inp-set.wide{width: 6rem;}
.col-inp .inp-set input{text-align: center;}
*/
.col-inp:after{content:'';display:block; clear:both;}
.col-inp .inp-set{width:calc((100% - 40px) / 5); vertical-align:middle; display: block; text-align:center; float:left;}
.col-inp .ico-txt {width:10px; float:left; text-align:center; line-height:1.2rem; padding-top:2.5rem; vertical-align: middle; }
.col-inp .inp-set:nth-child(5){margin-right:10px;}
.col-inp .inp-set.first label{width:300px; text-align:left;top:0; height:auto; -webkit-transform:rotateY(0);transform:rotateY(0); font-size:1.2rem; height:1.8rem; padding:0; line-height:1.8rem;}
.col-inp .inp-set input{text-align: center;}


/* Selectbox */
.select-box {display:block; position:relative; height:auto; padding-top:0.2rem;}
.select-box .tit {position:absolute; top:.9rem; left:0; line-height:3rem; font-size: 1.7rem; color:#9eaab5; -webkit-transform-origin:0 0; transform-origin:0 0; -webkit-transition:all 160ms, color:160ms; transition:all 160ms, color 160ms; -webkit-transform:rotateY(0); transform:rotateY(0);}
.select-box .ico-sel, .select-box .ico-date {width:100%; height:4rem; display:block; position:absolute; font-size: 1.7rem; color:#213d55; bottom:0; right: 0;  line-height:4rem; overflow:hidden; text-align:right; padding-right:3.0rem;box-sizing:border-box; z-index:10;}
.select-box .ico-sel:after {content:""; display:block; position:absolute; width:0.9rem; height:0.9rem; top:50%; margin-top:-.6rem; margin-left:-.6rem; box-sizing:border-box;border:0.2rem solid rgba(0,32,60,.25);border-left-width:0;border-top-width:0; -webkit-transform:rotate(45deg); transform:rotate(45deg);-webkit-transition:transform 200ms cubic-bezier(.4, .0, .23, 1); transition:transform 200ms cubic-bezier(.4, .0, .23, 1); right:0.2rem;}
.select-box.focus .ico-sel:after, .select-box.do .ico-sel:after {-webkit-transform:rotate(225deg); transform:rotate(225deg);-webkit-transition:transform 200ms cubic-bezier(.4, .0, .23, 1); transition:transform 200ms cubic-bezier(.4, .0, .23, 1); border-color:#00a1a4;}

.select-box .ico-date:after {content:""; display:block; position:absolute; width:2rem; height:1.8rem; top:50%; margin-top:-1.1rem; box-sizing:border-box; background:url('/resource/img/onb/app_2018/ico/ico_calendar.png') no-repeat center center; background-size: 2.0rem auto; right:0.2rem;}
.select-box.do .ico-date:after {background:url('/resource/img/onb/app_2018/ico/ico_calendar_focus.png') no-repeat center center; background-size: 2.0rem auto;}

.select-box .inp-txt {width:100%; border:none; display:block; position:relative; height:4rem; line-height:4rem; font-size:1.7rem; text-align:left; padding-right:3.5rem; border-bottom:0.1rem solid #ccc; -webkit-transition:.2s; transition:.2s; box-sizing:border-box; color:#213d55;}
.select-box .inp-txt::placeholder {color:#213d55; opacity:1;}
.select-box .inp-txt::-webkit-input-placeholder {color:#213d55; opacity:1;}
.select-box .inp-txt:-ms-placeholder {color:#213d55; opacity:1;}
.select-box .inp-txt:-ms-input-placeholder {color:#213d55; opacity:1;}

.select-box .place-holder {position:absolute; top:1.8rem; right:3rem; color:#213d55;}
.select-box.on .place-holder {display:none;}
.select-box.do .place-holder {opacity:0; -webkit-transition:opacity 0 2s; transition:opacity 0 2s;}
.int-wrap.err .select-box .place-holder {right:2.5rem;}

/* Select Option bottom popup Style*/
html.do-select {overflow:hidden;}
.do-select .full-height-page {z-index:50;}
.select-box .drop-down, .layer-cal {display:none; position:fixed; bottom:0; left:0; right:0; max-height:auto; background:#fff; -webkit-box-shadow:0px 0px 16px rgba(0, 0, 0, 0.12); -moz-box-shadow:0px 0px 16px rgba(0, 0, 0, 0.12); box-shadow:0px 0px 16px rgba(0, 0, 0, 0.12); z-index:101; border-radius:15px 15px 0 0;}
.select-box .drop-down .drop-tit, .cal-tit {display:block; position:relative; top:auto; padding: 1.6rem 2.2rem 1.3rem; text-align:center; font-size:1.5rem; color:#647381; font-weight:normal; border-bottom:1px solid rgba(0,0,0,0.06);}
.select-box .drop-down .drop-tit .close {position:absolute; top:50%; right: 2.2rem; width:1.4rem; height:1.4rem; background: url(/resource/img/onb/app_2018/ico/ico_close.png) no-repeat 50% 50%; background-size:contain; margin-top:-0.7rem;}
.select-box .drop-down .sel-list {height:25rem; overflow:hidden; overflow-y:auto;}
.select-box .drop-down.calendar .sel-list {height:35.5rem;}
.select-box .drop-down li:first-child {border-top:none;}
.select-box .drop-down li button {display:block; width:100%; padding:1.35rem 2.2rem; background:none; text-align:left; font-size:1.5rem; color:#213d55;}
.select-box .drop-down li.on button, .select-box .drop-down li button:focus {background:#dff7f3;}

.select-box.on, .select-box.do, .select-box.focus {padding-top:1.5rem;}
.select-box.on .tit,
.select-box.do .tit,
.select-box.focus .tit {top:0; -webkit-transform:rotateY(0); transform:rotateY(0); font-size: 1.2rem; height:1.8rem; line-height: 1.8rem;}

/* Option Open State Style */
.select-box.do .label {width:100%; left:auto; text-indent:-999px; text-align:left;}
.select-box.do .label:after {-webkit-transform:rotate(225deg);transform:rotate(225deg); border-color:#00a1a4;}
.select-box.do .inp-txt {border-bottom-width:0.2rem; border-color:#00a1a4; height:3.9rem; line-height:3.7rem;}
.select-box.do .drop-down {border-color:#00a1a4; z-index:101;}
.select-box.do .tit {color:#00a1a4;}

/* Option Selected State Style */
.select-box.on .label {width:100%; text-indent:-999px; text-align:left; padding-right:3.0rem;}
.select-box.on .inp-txt {border-color:rgba(0,32,60,.2);}

/* Selectbox Focus Style */
.select-box.focus {color:#00a1a4;}
/*.select-box.focus .tit {color:#000;}*/
.select-box.focus .tit {color:#00a1a4;}
.select-box.focus .inp-txt {border-bottom-width:0.2rem; border-color:#00a1a4; caret-color:#00a1a4; padding-bottom:0.2rem;}

/* Value Readonly(Not Keyboard Write) Style */
.select-box .input-text[readonly] + .label {height:auto !important;width:auto !important;left:0!important;top:0;text-align:right;}
.select-box .input-text[readonly] + .label:after {top:2.0rem !important; margin-top:0 !important;}
.select-box.on .input-text[readonly] + .label,
.select-box.do .input-text[readonly] + .label {text-align:left;}

/* SelectBox Type Date Sel */
.select-box .drop-down.calendar .sel-list ul {display:flex; flex-wrap:wrap; justify-content:space-between; padding:2.9rem 1.8rem 1rem;}
.drop-down.calendar .sel-list ul li {width:3.8rem; height:3.8rem; text-align:center;}
.drop-down.calendar .sel-list ul li + li {margin-left:calc((100% - 19rem) / 4);}
.drop-down.calendar .sel-list ul li:nth-of-type(5n + 1) {margin-left:0;}
.drop-down.calendar .sel-list ul li:nth-of-type(5) ~ li {margin-top:.8rem;}
.drop-down.calendar .sel-list ul li button {width:3.8rem; height:3.8rem; font-size:1.4rem; color:#213d55; padding:0; line-height:3.8rem; text-align:center; margin:0 auto;}
.select-box .drop-down.calendar li.on button, .select-box .drop-down.calendar li button:focus {width:3.8rem; height:3.8rem; border-radius:100%; background:#fa5e50; color:#fff;}

.select-box .drop-down.calendar li button:focus {background:#f2f2f2; color:#213d55;}

/* 달력 */
.layer-cal .close {position:absolute; top:2.6rem; right: 2.2rem; width:1.4rem; height:1.4rem; background: url(/resource/img/onb/app_2018/ico/ico_close.png) no-repeat 50% 50%; background-size:contain; margin-top:-0.7rem;}
.cal-con {padding:0 2rem;}
.cal-head {width:100%; text-align:center; padding:2.5rem 0;}
.cal-head > button {position:relative; width:2.3rem; height:2.3rem; color:transparent; display:inline-block; vertical-align:middle;}
.cal-head > button + button {margin-left:1rem;}
.cal-head > button:before {content:""; position:absolute; top:4px; left:0;}
.cal-head > button:before {width:1rem; height:1rem; border:0.2rem solid rgba(0,32,60, .3);  border-left:0; border-top:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.cal-head > button.cal-first:after, .cal-head > button.cal-last:after {content:""; position:absolute; top:4px; width:1rem; height:1rem; border:0.2rem solid rgba(0,32,60, .3); border-left:0; border-top:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.cal-head > button.cal-first:before, .cal-head > button.cal-first:after, .cal-head > button.cal-prev:before {-webkit-transform:rotate(-225deg); transform:rotate(-225deg);}
.cal-head > button.cal-first:before {left:.6rem;}
.cal-head > button.cal-first:after {left:1.1rem;}
.cal-head > button.cal-prev:before {left:.9rem;}
.cal-head > button.cal-next:before {left:.3rem;}
.cal-head > button.cal-last:after {left:.6rem;}

.date_wrap {display:inline-block; vertical-align:middle; margin:0 2.6rem;}
.date_wrap span {display:inline-block; position:relative; margin:0 4px; color:#000; font-size:24px; font-family:"num"; letter-spacing:-1px;}
.tbl-cal {width:100%;}
.tbl-cal thead th {padding:; text-align:center; padding:0 0 1.7rem; font-size:1.4rem;}
.tbl-cal thead th.red-day {color:#fa5e50;}
.tbl-cal td {text-align:center; padding:.4rem 0;}
.tbl-cal td button {width:3.2rem; height:3.2rem; text-align:center; margin:0 auto; border-radius:100%; font-size:1.4rem; color:#213d55;}
.tbl-cal td button.selected {background:#fa5e50; color:#213d55;}
.tbl-cal td button:fodus {background:#f2f2f2; color:rgba(255,255,255,.87);}

/* 계좌선택 */
.acc-sel {display:block; position:relative; height:auto; padding-top:0.2rem;}
.acc-sel .tit {position:absolute; top:0; left:0; -webkit-transform:rotateY(0); transform:rotateY(0); font-size: 1.2rem; height:1.8rem; line-height: 1.8rem;}
.acc-sel .focus .tit {color:#00a1a4;}

/* button 하단고정 */
[class^="btn-f-"] {width:100%; display:inline-block; position:relative; min-width:8rem; height:5.6rem; text-align:center; font-weight:normal; font-size:1.5rem; line-height:4em; color:#fff; background:#80babf; overflow:hidden; cursor:pointer; font-family:'nanum';}
.btn-f-r {background:#fa5e50;}
.btn-f-nv {background:#253155;}
.btn-f-g {background:#989fad;}
.btn-f-r:disabled {background:#eef0f4; color:#718292;}
.btn-f-nv:disabled {background:#8c93a4; color:#fff;}

.btn-f-dsa, .btn-b-dsa {cursor:default; outline:none; pointer-events:none;}  /* 비활성 css */

/* button contents */
[class^="btn-c-"] {width:100%; height:4.2rem; display:inline-block; padding:0 1rem; border-radius:4px; text-align:center; font-weight:normal; font-size:1.4rem; line-height:2.5em; color:#fff; background:#80babf; overflow:hidden; cursor:pointer; font-family:'nanum'; vertical-align:middle;}
.btn-c-r {background:#fa5e50;}
.btn-c-wh {background:transparent; border:1px solid #ccd3d8; color:#213d55;}
[class^="btn-c-"]:disabled {background:#eff2f4; color:#718292;}

/* button input area */
.btn-inp, .btn-inp2 {display:inline-block; height:4rem; padding:0 1.4rem; border-radius:5px; text-align:center; font-weight:normal; font-size:1.4rem; color:#647381; background:#fff; border:1px solid #647381; overflow:hidden; cursor:pointer; font-family:'nanum'; position:relative;}
.btn-inp:disabled, .btn-inp2:disabled {background:#f7f7f9; color:#647381; border:0;}

/* button small */
[class^="btn-s-"]  {display:inline-block; padding:0 1.3rem; border-radius:14px; text-align:center; font-weight:normal; font-size:1.4rem; line-height:1.5em; color:#647381; background:#fff; border:1px solid rgba(0,32,60,.2); overflow:hidden; cursor:pointer; font-family:'nanum';}

/* button contents */
[class^="btn-p-"] {width:100%; height:4rem; display:inline-block; padding:0 1rem; text-align:center; font-weight:normal; font-size:1.4rem; line-height:2.5em; color:#fff; background:#80babf; overflow:hidden; cursor:pointer; font-family:'nanum'; vertical-align:middle;}
.btn-p-wh {border:1px solid #00a1a4; background:#fff; color:#00a1a4;}
.btn-p-g {border:1px solid #ccd2d8; background:#fff; color:#213d55;}
.btn-p-gg {border:1px solid #ccd2d8; background:#fff; color:#00a1a4;}

.bot-fix.mall {transform:translateY(60px); transition:all .3s ease-in;}
.bot-fix.mall.on {transform:translateY(0); transition:all .3s ease-in;}

.bot-fix button:first-child.btn-kakao {width:50%; background:#ffde00; color:#000; text-align:center; line-height:normal;}
.btn-kakao > span {width:11.5rem; font-size:1rem; color:#391f1f; display:block; margin:0 auto; padding-left:3.9rem;}
.btn-kakao > span:nth-of-type(1) {font-size:1.5rem; color:#391f1f; font-weight:bold; position:relative; padding-left:4.7rem; margin:0 auto .2rem;}
.btn-kakao > span:nth-of-type(1):after {content:""; width:3.1rem; height:2.8rem; position:absolute; left:0; top:0; background:url('/resource/img/onb/mweb_2018/cmm/ico_btn_kakao.png') no-repeat left center; background-size:100%;}

.bot-fix button:first-child.btn-kakao + button {width:50%;}

/* 화살표 버튼 */
.btn-arrow{position: relative;padding: .8rem 1.6rem .6rem 1rem;font-size: 1.2rem;color: #00203c;border: 1px solid #ccd2d8;border-radius: 2px;background: #fff;}
.btn-arrow:before {content: "";display: block;position: absolute;width: 0.7rem;height: 0.7rem;top: 50%;right: .9rem;margin-top: -0.4rem;box-sizing: border-box;border: 0.1rem solid #00203c;border-left-width: 0;border-top-width: 0;-webkit-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-webkit-transition: transform 200ms cubic-bezier(.4, .0, .23, 1);transition: transform 200ms cubic-bezier(.4, .0, .23, 1);}

/* button 진행하기 */
.btn-ing {height:4rem; border:1px solid #008baac; color:#008baac; font-size:1.4rem; line-height:3.8rem;}

.btn-txt, .btn-del {display:inline-block; height:2rem; font-size:1.3rem; white-space:nowrap; padding-right:2.1rem; position:relative;}
.btn-txt:after {content:""; display:block; position:absolute; width:0.7rem; height:0.7rem; top:.9rem; right:0.3rem; margin-top:-0.45rem; border:0.1rem solid #a3a3a3; border-left:0;
    border-top:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.btn-del {color:#00a1a4; padding-right:0;}
/* .btn-del:after, .btn-del:before {content:""; display:block; position:absolute; width:1rem; height:1rem; top:.4rem; right:0; margin-top:-0.45rem; border-left:0.1rem solid #00a1a4; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.btn-del:before {right:.7rem; -webkit-transform:rotate(-135deg); transform:rotate(-135deg);} */

	
/* 하단 버튼 */
.bot-fix {position:fixed; left:0; right:0; bottom:0; z-index:10; overflow:hidden; background:#fff; display:flex; flex-wrap:wrap; justify-content:space-between;}
.bot-fix button, .bot-fix a {width:100%;}
.bot-fix button:first-child:last-child, .bot-fix a:first-child:last-child {width:100%;}
.bot-fix button:first-child, .bot-fix a:first-child {width:40%;}
.bot-fix button:last-child, .bot-fix a:last-child {width:calc(60% - 1px);}

/* 버튼 효과 */
.ripple {position:absolute; width:0; height:0; border-radius:50%; background:rgba(255, 255, 255, 0.4); -webkit-transform:scale(0); transform:scale(0); opacity:1;}
.rippleEffect {animation:rippleDrop .5s linear;}
@keyframes rippleDrop {
  100% {-webkit-transform: scale(2);transform: scale(2);opacity: 0;}
}

/* 팝업 */
div.pop-wrap {width:100%; height:100%; font-size:1.2rem;}
.pop-wrap.open {display:block;}
.pop-frame {position:relative; width:100%; height:100%;}
.pop-tit {width:calc(100% - 3.7rem); text-align:center; font-size:2rem; line-height:100%; padding:1.5rem 0 1.5rem 4rem; color:#000;}
.pop-close {position:absolute; right:1rem; top:.8rem; width:3rem; height:3rem;}
.pop-close:after, .pop-close:before {content:""; position:absolute; left:0; top:50%; margin:-1px 0 0 -1px; width:1.8rem; height:1px; background:#000; transform:rotate(45deg);}
.pop-close:before {transform:rotate(135deg);}
.pop-con {padding:2rem 2.2rem 0;}
.pop-con h2 {font-size:1.8rem; line-height:100%; color:rgba(0,32,60);}
.pop-con .btn-area {padding:5rem 3.6rem 0;}

/*팝업 메시지*/
.pop_mss{margin-top: 3rem;  font-size: 1.3rem;  line-height: 2.5rem; margin: 0 0 3rem; text-align:center}
.pop_mss  > p{ font-size: 2rem;   line-height: 2.9rem;  margin: 0 0 2.5rem;  color: rgba(0, 32, 60, .87);  word-break: keep-all;}
.pop_mss   span { font-size:1.6rem }

.pop-alert {position:fixed; left:0; right:0; top:0; bottom:0; z-index:10000; -webkit-transition:.3s; transition:.3s; display:none;}
.pop-alert:after {content:""; width:100%; height:100%; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.5); z-index:-1;}
.pop-alert .alt-con {width:calc(100% - 7.2rem); position:absolute; left:3.6rem; top:50%; background:#fff;
 -webkit-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 45px 50px 0 rgba(0,0,0,.4); box-shadow:0 45px 50px 0 rgba(0,0,0,.4); 
 padding:2.4rem;  -webkit-transform:translateY(-50%);transform:translateY(-50%); } /* 스크립트에서 margin-top 삭제 후 css 수정*/
.pop-alert h2, .pop-alert h3 {font-size:2rem; font-family:'nanum'; font-weight:bold;}
.pop-alert h3 {font-size:1.5rem; margin-top:2.6rem;}
.pop-alert p {font-size:1.5rem; color:#213d55; margin-top:1.6rem; word-break:keep-all;}
.art-bot {text-align:right; margin-top:2.2rem; position:relative;}
.art-bot button {color:#213d55; font-weight:bold; font-size:1.5rem; padding:1rem 2rem;}
.art-bot button.alt-ok {color:#00a1a4; margin-left:.8rem;}
.art-bot button.alt-left {position:absolute; left:0; top:0;}

/* Icon - 정상 */
.ico-check circle {stroke-dasharray: 170;stroke-dashoffset: 170;stroke-width: 2; stroke-miterlimit: 10; stroke: #00a1a4; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}
.ico-check svg {width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 0; margin:0 auto; -webkit-box-shadow: inset 0px 0px 0px #00a1a4; box-shadow: inset 0px 0px 0px #00a1a4; }
.ico-check path {-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; stroke: #00a1a4; fill: none; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}

.ico-check circle, .ico-excl circle {stroke-dasharray:170; stroke-dashoffset:170; stroke-width:2; stroke-miterlimit:10; stroke:#00a1a4; fill:none; animation:stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}
.icon-contents .icon.ico-check path {-webkit-transform-origin:50% 50%; transform-origin: 50% 50%; stroke-dasharray:48; stroke-dashoffset:48; stroke:#00a1a4; fill:none; animation:stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* Icon - 에러 */
.ico-excl svg {width:56px; height:56px; border-radius:50%; display:block; stroke-width:2; stroke:#fff; stroke-miterlimit:0; margin:0 auto; -webkit-box-shadow:inset 0px 0px 0px #00a1a4; box-shadow:inset 0px 0px 0px #00a1a4;}
.ico-excl line {-webkit-transform-origin:50% 50%; transform-origin:50% 50%; stroke-dasharray:48; stroke-width:2; stroke-dashoffset:48; stroke:#00a1a4; fill:none; animation:stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}
.ico-excl line + circle {animation:stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 1.2s forwards;}

/* Agree Check Box */
.chk-agree {padding:2.2rem 2.2rem 3rem 2.2rem;}
.chk-agree .chk-all-check {display:block;}
.chk-agree .chk-all-check input[type="checkbox"] + label,
.chk-agree .chk-all-check input[type="radio"] + label {display:block; text-align:center; border:0.1rem solid #000000; color:rgba(0,0,0,0.87); font-size:1.5rem; padding:0.8rem 1.1rem;}
.chk-agree .chk-all-check label i {display:inline-block; position:relative; width:3.0rem; height:3.0rem; margin-left:-1.7rem; vertical-align:middle; margin-right:0.5rem;}
.chk-agree .chk-all-check input[type="checkbox"]:checked + label {background:#00a1a4; color:#fff; border-color:#00a1a4; -webkit-transition:.2s; transition:.2s;}
/** Icon */
.chk-agree .chk-all-check label svg {display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:3.0rem; height:3.0rem; border-radius:50%; display:block; stroke-width:2; stroke-miterlimit:0; stroke:#cecece; -webkit-box-shadow: inset 0px 0px 0px #cecece; box-shadow: inset 0px 0px 0px #cecece;}
.chk-agree .chk-all-check label svg circle {stroke-dasharray:170; stroke-dashoffset:170; stroke-width:2; stroke-miterlimit:10; fill:none; stroke:#cecece; stroke-dashoffset:0;}
.chk-agree .chk-all-check label svg path {-webkit-transform-origin:50% 50%; transform-origin:50% 50%; stroke-dasharray:48; fill:none; stroke:#cecece; stroke-dashoffset:0;}
.chk-agree .chk-all-check input[type="checkbox"]:checked + label svg {stroke:#fff; -webkit-box-shadow: inset 0px 0px 0px #fff; box-shadow: inset 0px 0px 0px #fff;}
.chk-agree .chk-all-check input[type="checkbox"]:checked + label svg circle {stroke:#00a1a4;}
.chk-agree .chk-all-check input[type="checkbox"]:checked + label svg path {stroke: #00a1a4;}
.chk-agree .chk-all-check input[type="checkbox"]:checked + label svg {animation:fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;}
.chk-agree .chk-all-check input[type="checkbox"]:checked + label svg circle {animation:stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}
.chk-agree .chk-all-check input[type="checkbox"]:checked + label svg path {stroke-dashoffset:48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}

.list-clause {padding:2.1rem 0 2rem;}
.list-clause li, .chs-chk {position:relative; padding:0 3.0rem 0 .7rem;}
.list-clause li + li {margin-top:1.5rem;}
.list-clause li input[type=checkbox] {width:0; height:0; font-size:0; line-height:0; margin:0; padding:0;}
.list-clause li label {display:block; color:#213d55;}

.list-clause li p {padding-left:2.5rem; margin-top:1rem; font-size:1.3rem;}

.ico-arr-link {display:block; position:absolute; top:0; bottom:0; right:0; width:3.0rem;}
.ico-arr-link:before {content:""; display:block; position:absolute; width:0.9rem; height:0.9rem; top:.7rem; right:0.3rem; margin-top:-0.45rem; border:0.2rem solid #a3a3a3; border-left:0; border-top:0; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.ico-arr-down {display:block; position:absolute; top:0; bottom:0; right:0; width:3.0rem;}
.ico-arr-down:before {content:""; display:block; position:absolute; width:0.9rem; height:0.9rem; top:.7rem; right:0.3rem; margin-top:-0.45rem; border:0.2rem solid #a3a3a3; border-left:0; border-top:0; -webkit-transform:rotate(45deg); transform:rotate(45deg);}

.chs-chk label {font-size:1.3rem;}

/** circle Style */
.chk-type1 input[type="checkbox"] + label, 
.chk-type1 input[type="radio"] + label {overflow:hidden; position:relative; min-height:2rem; line-height:2rem; padding:.3rem 0 .3rem 2.5rem; font-size:1.3rem;
color:rgba(0,32,60, 0.87); -webkit-transition:color 250ms cubic-bezier(.4, .0, .23, 1); transition:color 250ms cubic-bezier(.4, .0, .23, 1);}
.chk-type1 input[type="checkbox"] + label:after, 
.chk-type1 input[type="radio"] + label:after {content:""; position:absolute; top:0; left:0; width:2.0rem; height:2.0rem; border-radius:100%; background:url('/resource/img/onb/app_2018/frm/ico_check.png') 50% 50% #e6e6e6; background-size:contain;}
.chk-type1 input[type="checkbox"]:checked + label:after,
.chk-type1 input[type="radio"]:checked + label:after {background-color:#fa5e50; animation: shrink-bounce 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards;}

.chk-tgl {display:block; position:relative;}
.chk-tgl label {display:block; position:relative; font-size:1.7rem; padding-right:5rem;}
.chk-tgl label:after {content:""; position:absolute; top:50%; margin-top:-.6rem; right:2.2rem; border-radius:100%; width:1.4rem; height:1.4rem; background:#fff; -webkit-transition:all 200ms cubic-bezier(.4, .0, .23, 1); transition:all 200ms cubic-bezier(.4, .0, .23, 1);}
.chk-tgl input:checked + label:after {right:.3rem;}
.chk-tgl label:before {content:""; display:block; position:absolute; top:0; right:0; width:4rem; border-radius:9em; background:#ddd;    height: 2.0rem;}
.chk-tgl input:checked + label:before {background:#fa5e50;}

.chk-set {padding:2rem 0 0 1.2rem;}
.chk-set .chs-chk {margin-left:-1.2rem;}
.chk-set > p {margin:0 0 2rem; color:#213d55;}
.chk-set > .chk-type1 {display:inline-block; width:calc((100% - 10px) / 3);}
.chk-set > .chk-type1:nth-of-type(3) ~ .chk-type1 {margin-top:10px;} 

.chk-set2 {padding:2rem 0 2rem 1.2rem; display:flex; flex-wrap:wrap; justify-content:space-between;}
.chk-set2 > .chk-type1 {width:50%;}
.chk-set2 > .chk-type1:nth-of-type(2) ~ .chk-type1 {margin-top:1rem;}

.chk-set .list-clause, .chk-set2 .list-clause {width:100%; border:0; padding:0 0 1.6rem; margin-left:-1.2rem;}

.rd-set {width:100%; margin-top:.7rem; display:table; table-layout:fixed;}
.rd-set > span {display:table-cell; table-layout:fixed; margin:0; text-align:center;}
.rd-set label {display:block; width:100%; padding:1.2rem 0 1.1rem; border:1px solid #ccd2d8; color:#718292; font-size:1.5rem;}
.rd-set input[type=radio]:checked + label {background:#fff; color:#213d55; border:0; border:1px solid #213d55;}
.rd-set span ~ span label {border-left:0;}

@keyframes stroke {
  100% {stroke-dashoffset: 0;}
}
@keyframes scale {
  0%, 100% {-webkit-transform: none;transform: none;}
  50% {-webkit-transform: scale3d(1.1, 1.1, 1);transform: scale3d(1.1, 1.1, 1); }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #FFF;-webkit-box-shadow: inset 0px 0px 0px 30px #FFF;
  }
}
@keyframes dropdown{
	0% {opacity:0; height:0; display:none;}
	100% {opacity:1; height:auto; display:block;}
}

.transkey {-webkit-box-shadow:0 5px 5px 10px rgba(0,0,0,.1); box-shadow:0 5px 5px 10px rgba(0,0,0,.1); -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:15px; border-top-left-radius:15px; border-top-right-radius:15px; z-index:1001; bottom:-100%; transition:bottom .5s ease-out;}
.transkey:after {content:""; width:100%; height:100%; position:fixed; left:0; right:0; top:0; bottom:0; background:transparent; z-index:-1; }
.transkey.hide {transition:bottom .5s ease-out;}
.transkey a {display:block;}

.tbl-cal td {font-size:1.4rem;}
.tbl-cal td button {color:#647381; display:block; border-radius:100%; width:3.2rem; height:3.2rem;}
.tbl-cal td button.selected {background:#fa5e50; color:#fff;}
.tbl-cal td button[data-today=Y], .tbl-cal td button[data-today=Y].selected {background:#eef0f4; color:#213d55;}

/* 약관 text */
.all-cla {display:none;}

@media all and (max-width:1279px) {	
	.bg-on {background:#f7f7f9;}
	#sum-top {height:5rem; padding:0; position:fixed; left:0; right:0; top:0; z-index:100;}
	#sum-top.add-line {border-bottom:1px solid #eee;}
	.head-tit {width:calc(100% - 5rem); font-size:1.9rem; font-weight:normal; line-height:5.2rem; text-align:left; padding:0 0 0 5.6rem; color: rgba(0,0,0,.87);}
	.nav-on #sum-top {background:#fff;}
	#sum-top > h1 {width:calc(100% - 5.8rem); text-align:left; font-size:1.9rem; line-height:5.2rem; padding:0 0 0 5.6rem; color:#00203c; font-weight:normal;}
	#sum-top.nav-on:after {content:""; width:100%; height:calc(100% + 6rem); position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.7);}
	.gnb-ctr, .gnb-back {position:absolute; right:2.4rem; top:50%; margin-top:-.85rem; width:2.4rem; height:1.7rem; border-top:1px solid #000; border-bottom:1px solid #000; display:block;}
    .gnb-box .gnb-close {position:absolute; right:1.3rem; top:50%; margin-top:-.85rem; width:4.4rem; height:3.6rem; border-top:1px solid #000; border-bottom:1px solid #000; display:block;}
	.gnb-box .gnb-close:before {content:""; width:50%; height:1px; background:#000; position:absolute; left:22%; right:0; top:49%; transform:rotate(-45deg);}

	.gnb-box .gnb-close  {top:1.4rem; border:0;}
	.btn-s-cancel {position:absolute; right:2.4rem; top:50%; margin-top:-1.2rem;}
	.nav-on .gnb-ctr, .nav-on .gnb-back {z-index:1;}
	.gnb-ctr:after  {content:""; width:100%; height:1px; background:#000; position:absolute; left:0; top:50%; margin-top:-.5px;}
	.gnb-box .gnb-close:after {content:""; width:50%; height:1px; background:#000; position:absolute; left:22%; top:50%; margin-top:-.5px;    transform: rotate(45deg);}
	.gnb-back {width:4.8rem; height:4.8rem; right:auto; left:.8rem; top:0; border:0; margin:0;}
	.gnb-back:after {content:""; width:2.4rem; height:1px; background:#000; position:absolute; left:1.2rem; top:50%;}
	.gnb-back:before {content:""; width:1.5rem; height:1.5rem; position:absolute; left:1.4rem; top:1.7rem; border:.1rem solid #000; border-right:0; border-bottom:0; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
	.sum-gnb {display:none; width:100%; height:100%; right:0; bottom:0; z-index:1001; overflow:hidden; background:transparent;}
	.sum-gnb:after {position:static; border:0;}
	.nav-on .sum-gnb {display:block;}
	.gnb-box {width:90%; height:100%; padding:0; position:absolute; right:0; top:0; bottom:0; overflow:hidden; overflow-y:auto; background:#fff; z-index:1000;}
	/* .gnb-box {width:90%; height:100%; padding:0; position:absolute; right:0; top:0; bottom:0; overflow:hidden; overflow-y:auto; background:#fff; z-index:1000; transform-origin:right top; -webkit-transform:translate(100%, 0); transform:translate(100%, 0); -webkit-animation:hideGnb .3s ease-in; animation:hideGnb .3s ease-in;}
	.nav-on .sum-gnb .gnb-box {right:0; top:0; bottom:0; transform-origin:right top; -webkit-transform:translate(0, 0); transform:translate(0, 0); -webkit-animation:showGnb .3s ease-in; animation:showGnb .3s ease-in;}
	@keyframes showGnb {
		0% {transform-origin:right top; -webkit-transform:translate(100% , 0); transform:translate(100% , 0);}
		100% {transform-origin:right top; -webkit-transform:translate(0 , 0); transform:translate(0 , 0);}
	}
	
	@keyframes hideGnb {
		0% {transform-origin:100% 0; -webkit-transform:translate(0, 0); transform:translate(0, 0);}
		100% {transform-origin:100% 0; -webkit-transform:translate(100%, 0); transform:translate(100%, 0);}
	} */
	.gnb-logo {position:absolute; left:0; top:0; padding:1rem 2.4rem}
	.gnb-nav {margin:6rem 0 0; padding:0 2.4rem 3rem;}
	.gnb-nav > ul > li {display:block; padding-left:5.5rem; position:relative;}
	.gnb-nav > ul > li:after {content:""; width:3.4rem; height:4rem; position:absolute; left:0; top:0; background: url(/resource/img/onb/mweb_2018/cmm/ico_mnu_deth01_01.png) no-repeat 50% 50%; background-size: contain;}
	.gnb-nav > ul > li:nth-of-type(2):after {background-image: url(/resource/img/onb/mweb_2018/cmm/ico_mnu_deth01_02.png);}
	.gnb-nav > ul > li:nth-of-type(3):after {background-image: url(/resource/img/onb/mweb_2018/cmm/ico_mnu_deth01_05.png);}
	.gnb-nav > ul > li:nth-of-type(4):after {background-image: url(/resource/img/onb/mweb_2018/cmm/ico_mnu_deth01_03.png);}
	.gnb-nav > ul > li:nth-of-type(5):after {background-image: url(/resource/img/onb/mweb_2018/cmm/ico_mnu_deth01_04.png);}
	.gnb-nav > ul > li > a {padding:1.2rem 0; color:#213d55;}
	.gnb-nav > ul > li.on > a {padding:1.2rem 0; color:#213d55; border-left:0; border-right:0; background:#fff; position:relative; z-index:1000;}
	.gnb-nav > ul > li + li {margin:0; margin-top:4rem;}
	.gnb-nav > ul > li > ul {position:static; display:flex; flex-wrap:wrap; justify-content:space-between; padding:.6rem 0; border-top:1px solid #f1f2f9}
	.gnb-nav > ul > li.on > ul {display:flex;}
	.gnb-nav > ul > li > ul > li {display:block; width:calc(100% / 2); padding:0;}
	.gnb-nav > ul > li > ul > li + li, .gnb-nav > ul > li:nth-of-type(1) > ul > li {padding:0;}
	.gnb-nav > ul > li:nth-of-type(1) > ul > li + li {border-left:0;}
	.gnb-nav > ul > li > ul > li > a {padding:0; font-size:1.4rem; font-weight:normal; padding:.6rem 0; color:#213d55;}
	.gnb-nav > ul > li > ul > li > ul {display:none;}
	.gnb-bnn {display:none;}
	.gnb-bot {display:block; position:relative;}
	.gnb-bot > div {overflow:hidden;}
	.gnb-bot > div > div {width:300px; float:left;}
	.gnb-bot > div > div a {width:100%; overflow:hidden; display:block;}
	.gnb-bot > div > div img {width:100%;}
	.gnb-bot > button.btn-auto {width:3.4rem; height:3.4rem; position:absolute; left:28%; top:61%; z-index:101;}
	.gnb-bot > button.btn-auto.stop {background:url(/resource/img/onb/sumweb2020/ico_stop.png) no-repeat center center; background-size: contain;}
	.gnb-bot > button.btn-auto.play {background:url(/resource/img/onb/sumweb2020/ico_play.png) no-repeat center center; background-size: contain;}
	.gnb-bot .paging {width:100%; text-align:center; position:absolute; left:0; right:0; bottom:2rem; z-index:100; margin:0; padding-right:4rem;}
	.gnb-bot .paging > span {width:.8rem; height:.8rem; display:inline-block; border:1px solid #868aa2; border-radius:50%; padding:0;}
	.gnb-bot .paging > span.swiper-pagination-bullet-active {background:#868aa2;}
	.gnb-bot .paging > span + span {margin-left:.5rem;}
	#sum-body {padding:5rem 0 0;}
}

@media all and (max-width:320px) { 
	html, body {width:100%; height:100%; font:normal 8px/14px 'nanum', sans-serif; color:#647381;}
}