@charset "utf-8";

* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
:after, :before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/* reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,figure,figcaption{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Noto Sans KR',sans-serif;font-size:14px;line-height:1.75em;letter-spacing:-.03em;color:#2c2c2c;word-break:keep-all;-webkit-text-size-adjust:none;}
img{border:0;max-width:100%;vertical-align:top;}
ul,ol{list-style:none}
fieldset{border:none}
fieldset legend {overflow:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-999em;}
button{cursor:pointer}
header,hgroup,article,nav,footer,figure,figcaption,canvas,section,time{display:block}
hr {clear:both;display:none;}
img[usemap] {border:none; height:auto; max-width:100%; width:auto;}

a,
a:hover,
a:active{color:inherit;text-decoration:none;}

::-webkit-input-placeholder {color:#a8a8a8;}
:-moz-placeholder {color:#a8a8a8;}
::-moz-placeholder {color:#a8a8a8;}
:-ms-input-placeholder {color:#a8a8a8;}
:placeholder-shown {color:#a8a8a8;}

table caption {overflow:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-999em;}
input[type="radio"], input[type="checkbox"] {vertical-align:middle !important; margin:-2px 3px 0 0 !important;}
input,select {vertical-align:middle; background:#fff;}
input,textarea,button{-webkit-appearance:none;-webkit-border-radius:0}
input[type='checkbox']{-webkit-appearance:checkbox} 
input[type='radio']{-webkit-appearance:radio}

/* user class */
h1,h2,h3,h4,h5,h6,strong,th,.bold{font-weight:700;}
.semibold {font-weight:500;}
.clear{clear:both;}
.clearfix {*zoom:1;}
.clearfix:after {content:" "; display:block; clear:both;}
.hide {position:absolute;visibility:hidden;overflow:hidden;width:0;height:0;margin:0 !important;padding:0;font:0/0 Arial;}
.blind {position:absolute;overflow:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;}
.pointer {cursor:pointer;}
.input {height:40px; padding:4px 12px; font-size:14px; line-height:1.5em; background:#fff; border:1px solid #ccc; border-radius:5px; outline:none;}
.input:focus {border-color:#121212}
.input.input-error:focus {border-color:#f42828}

.input.icon-calendar {background:#fff url('../images/icon_calender.png') right 12px center no-repeat; background-size:18px auto;}
textarea.input {height:auto; resize:none;}
select.input {padding-right:30px; background:#fff url('../images/select.png') right 12px center no-repeat; background-size:10px auto; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
select::-ms-expand {display:none;}
.input[readonly] {background:#f4f4f4; border-color:#eee;}
input:disabled {background:#f4f4f4; border-color:#eee;}
.input-error {border-color:#f42828;}
.input-error-text {font-size:11px; line-height:1.3em; color:#f42828; margin:6px 0 0 2px;}

.mgb2 {margin-bottom:2px !important;}
.mgb3 {margin-bottom:3px !important;}
.mgb4 {margin-bottom:4px !important;}
.mgb5 {margin-bottom:5px !important;}
.mgb6 {margin-bottom:6px !important;}
.mgb7 {margin-bottom:7px !important;}
.mgb8 {margin-bottom:8px !important;}
.mgb9 {margin-bottom:9px !important;}
.mgb10 {margin-bottom:10px !important;}
.mgb15 {margin-bottom:15px !important;}
.mgb20 {margin-bottom:20px !important;}
.mgb30 {margin-bottom:30px !important;}
.mgb40 {margin-bottom:40px !important;}
.mgb50 {margin-bottom:50px !important;}

.mgl20 {margin-left:20px !important;}


.fl {float:left;}
.fr {float:right;}

.space-center {text-align:center !important;}
.space-right {text-align:right !important;}
.space-left {text-align:left !important;}

.inline-block {display:inline-block;}

.text-blue {color:#0f7bd3;}
.text-red {color:#ff0000;}

.sound_only, .hide {display:none;}

.radiobox {position:relative; display:inline-block;}
.radiobox input {position:absolute;top:0;left:0;z-index:-1;width:0;height:0;}
.radiobox label {display:inline-block; cursor:pointer;}
.radiobox label:before {content:"";display:inline-block;position:relative;vertical-align:middle;margin:-.2em 6px 0 0;width:20px;height:20px;border:1px solid #878787;border-radius:100%;background-color:#fff;background-position:50% 50%;background-repeat:no-repeat;}
.radiobox input:checked + label:before {background-image:url("../images/radiobox.png"); background-size:10px; border-color:#0f7bd3;}

.checkbox {position:relative; display:inline-block;}
.checkbox input {position:absolute;top:0;left:0;z-index:-1;width:0;height:0;}
.checkbox label {display:inline-block; cursor:pointer;}
.checkbox label:before {content:"";display:inline-block;vertical-align:middle;margin:-.2em 6px 0 0;width:20px;height:20px;border:1px solid #878787;border-radius:5px;background-color:#fff;background-position:50% 50%;background-repeat:no-repeat;background-size:12px auto;}
.checkbox input:checked + label:before {background-image:url("../images/checkbox.png"); background-color:#0f7bd3; border-color:#0f7bd3;}

.btn-pack {display:inline-block; padding:0 15px; min-width:82px; height:40px; background:#fff; text-align:center; font-size:14px; line-height:38px; border:1px solid #ccc; border-radius:5px;}
.btn-pack.dark {background:#878787; border-color:#878787; color:#fff;}
.btn-pack.focus {background:#0f7bd3; border-color:#0f7bd3; color:#fff;}
.btn-pack.border {background:#fff; border-color:#0f7bd3; color:#0f7bd3;}

/* login */
.login-wrap {display:table; width:100%; height:100vh; padding:30px 20px; background:#f1f9ff;}
.login-inner {display:table-cell; vertical-align:middle;}
.login {width:264px; margin:0 auto;}
.login h1 {line-height:0; text-align:center; margin-bottom:28px;}
.login h1 img {width:132px;}
.login .input {display:block; width:100%; height:48px; margin-bottom:8px; padding:0 15px 0 48px; font-size:16px; background-position:13px 50%; background-repeat:no-repeat; background-size:24px;}
.login .input.id {background-image:url("/images/login_icon_id.png");}
.login .input.pw {background-image:url("/images/login_icon_pw.png");}
.login .btn-pack.focus {display:block; width:100%; height:48px; font-size:20px; letter-spacing:-.06em; margin-top:23px;}

/* footer */
.footer {padding:15px 20px 72px; background:#f4f4f4; color:#878787; font-size:11px; line-height:1.5em; letter-spacing:-.03em;}
.footer ul {display:flex; flex-wrap:wrap;}
.footer ul li {display:flex; align-items:center;}
.footer ul li:before {content:""; width:1px; height:12px; background:#dfdfdf; margin:0 16px;}
.footer ul li:first-child::before {display:none;}
.footer ul li a {display:block;}

/* float */
.float {position:fixed; bottom:0; left:0; width:100%; padding:9px 0; text-align:center; background:#fff; font-size:10px; line-height:1.3em; border-top:1px solid #dfdfdf; z-index:10;}
.float ul {display:flex; }
.float ul li {flex:1;}
.float ul li a {display:block;}
.float ul li i {display:block; margin:0 auto; width:24px; height:24px; background-position:50% 50%; background-size:contain; background-repeat:no-repeat;}
.float ul li .ico-1 {background-image:url("../images/float_icon1.png")}
.float ul li .ico-2 {background-image:url("../images/float_icon2.png")}
.float ul li .ico-3 {background-image:url("../images/float_icon3.png")}
.float ul li .ico-4 {background-image:url("../images/float_icon4.png")}
.float ul li .ico-5 {background-image:url("../images/float_icon5.png")}
.float ul li .ico-99 {background-image:url("../images/float_logout.png")}
.float ul li.active a {color:#0f7bd3;}
.float ul li.active .ico-1 {background-image:url("../images/float_icon1_on.png")}
.float ul li.active .ico-2 {background-image:url("../images/float_icon2_on.png")}
.float ul li.active .ico-3 {background-image:url("../images/float_icon3_on.png")}
.float ul li.active .ico-4 {background-image:url("../images/float_icon4_on.png")}
.float ul li.active .ico-5 {background-image:url("../images/float_icon5_on.png")}

.float-btn {position:fixed; bottom:110px; right:20px; display:flex; justify-content:center; align-items:center; color:#fff; font-size:11px; font-weight:500; line-height:1.2em; letter-spacing:-.03em; width:45px; height:45px; background:#3f95dc; border:3px solid #0f7bd3; border-radius:100%; z-index:20;}

/* content */
.page-head {position:fixed; top:0; left:0; width:100%; text-align:center; color:#fff; background:#0f7bd3; z-index:10;}
.page-head h2 {font-size:24px; line-height:55px; letter-spacing:-.06em;}

.page-content {padding-top:90px;}

.doc-tit {margin:0 13px 20px; font-size:20px; line-height:1.3em; letter-spacing:-.03em;}

.s-tit {margin:13px 0; color:#0f7bd3; font-size:16px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}

.price-overview-wrap {padding:15px 20px; background:#f4f4f4;}
.price-overview {display:flex; text-align:center; margin:0 -5px; color:#505050; font-size:12px; line-height:1.33em; letter-spacing:-.06em;}
.price-overview .box {flex:1; margin:0 5px; height:91px; display:flex; justify-content:center; flex-direction:column; background:#fff; border-radius:5px; box-shadow:0 0 8px rgba(0,0,0,.08);}
.price-overview .box .price {color:#0f7bd3; font-size:15px; font-weight:700; line-height:1.3em; margin-top:5px;}

.form-wrap {padding:23px 20px 36px; border-bottom:1px solid #dfdfdf;}
.form-wrap:last-child {padding-bottom:48px; border-bottom:0;}

.form-group {margin-bottom:14px;}
.form-group:last-child {margin-bottom:0;}
.form-group .tit {margin-bottom:6px; font-weight:300;}
.form-group .input {display:block; width:100%;}
.form-group .item {display:inline-block; margin:5px 15px 5px 0;}
.form-group .period-wrap {display:flex; align-items:center; margin:0 -9px;}
.form-group .period-wrap .col {flex:1; display:flex; align-items:center; padding:0 9px;}
.form-group .period-wrap .input {margin-right:7px;}
.form-group .price-input {position:relative;}
.form-group .price-input .input {padding-right:30px;}
.form-group .price-input .won {position:absolute; top:50%; right:12px; transform:translateY(-50%);}
.form-group .input-flex {display:flex; align-items:center; margin:0 -4px;}
.form-group .input-flex .input {margin:0 4px;}
.form-group .input-flex span {margin:0 4px;}

.file-group {margin-bottom:8px;}
.file-group .file {display:flex; align-items:center; padding:15px; margin-bottom:4px; background:#f4f4f4; border-radius:5px;}
.file-group .file .txt {flex:1 1 auto; min-width:0; width:1%; margin-right:10px; word-break:break-all; font-weight:300;}

.regular-billing {display:flex; flex-wrap:wrap; align-items:center;}
.regular-billing .input {width:72px; margin:0 7px;}

.help-txt {position:relative; margin-top:4px; padding-left:20px; color:#878787; font-size:11px; line-height:1.455em; letter-spacing:-.02em;}
.help-txt:before {content:""; position:absolute; top:3px; left:0; width:12px; height:12px; background:url("../images/icon_check.png") 50% 50% no-repeat; background-size:contain;}

.input-group {display:flex;}
.input-group .input {flex:1 1 auto; min-width:0; width:1%; margin-right:4px;}
.input-group .btn-pack {width:33%; min-width:auto;}

.form-btns {display:flex; text-align:center; margin:25px -4px 0;}
.form-btns .btn {flex:1; margin:0 4px; padding:11px 10px; display:flex; justify-content:center; align-items:center; color:#505050; font-size:14px; font-weight:500; line-height:1.33em; letter-spacing:-.06em; background:#f8f8f8; border-radius:5px; border:1px solid #dfdfdf;}
.form-btns .btn.focus {border-color:#0f7bd3; background:#0f7bd3; color:#fff;}

.search-area {padding:0 20px; margin-bottom:12px;}
.search-area form {position:relative; padding:2px; border-radius:5px; background-image: linear-gradient(to right, #0fb0d3 , #0f7bd3);}
.search-area .input {display:block; width:100%; height:45px; font-size:16px; letter-spacing:-.06em; padding:0 45px 0 15px; background:#fff; border-radius:3px; border:0;}
.search-area .submit {position:absolute; top:50%; right:12px; margin-top:-12px; width:24px; height:24px; background:url("../images/search.png") 50% 50% no-repeat; background-size:contain; border:0;}

.filter-finder-title {display:flex; align-items:center; justify-content:space-between; height:38px; padding:0 20px; margin-bottom:8px;}
.filter-finder-title .name {color:#505050;}
.filter-finder-btn {display:inline-flex; align-items:center; height:38px; padding:0 17px; color:#2c2c2c; background:#ecf6ff; border-radius:20px;}
.filter-finder-btn:before {content:""; width:16px; height:16px; margin-right:8px; background:url("../images/icon_filter.png") 50% 50% no-repeat; background-size:contain;}
.filter-finder-btn:after {content:""; width:10px; height:10px; margin-left:7px; background:url("../images/btn_arrow_down.png") 50% 50% no-repeat; background-size:contain;}
.filter-finder-btn.active {background:#0f7bd3; color:#fff;}
.filter-finder-btn.active:before {background-image:url("../images/icon_filter_on.png");}
.filter-finder-btn.active:after {background-image:url("../images/btn_arrow_up.png");}

.filter-finder-wrap {display:none; background:#ecf6ff; padding:23px 20px 36px; margin-bottom:8px;}

.company-info {padding:14px 15px; background:#fff; border:1px solid #0f7bd3; border-radius:5px; margin-bottom:16px;}
.company-info dt {color:#0f7bd3; font-weight:500; line-height:1.3em; margin-bottom:5px;}
.company-info dd {font-size:12px; font-weight:300; line-height:1.65em;}

.pay-list-wrap {padding:23px 20px 36px; min-height:calc(100vh - 310px); background:#f4f4f4;}
.pay-list-wrap .price-overview .box {height:76px;}

.pay-list {margin-top:16px;}
.pay-list .item {padding:15px; background:#fff; border:1px solid #dfdfdf; border-radius:5px; margin-bottom:8px;}
.pay-list .item:last-child {margin-bottom:0;}
.pay-list .item dl {display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#505050; font-size:12px; line-height:1.5em; font-weight:300; letter-spacing:-.02em;}
.pay-list .item dl:first-child {color:#2c2c2c; font-size:14px; font-weight:500; line-height:1.5em; margin-bottom:10px;}
.pay-list .item .ico {display:inline-block; vertical-align:middle; margin:-.2em 4px 0 0; width:16px; height:16px; text-align:center; color:#fff; font-family:'Montserrat',sans-serif; font-style:normal; font-size:10px; font-weight:700; line-height:16px; background:#0f7bd3; border-radius:5px;}
.pay-list .item .btn-pack {margin-top:7px; height:32px; background:#65aae3; border-color:#65aae3; color:#fff; font-size:12px; line-height:30px;}

.pay-detail {margin-bottom:14px;}
.pay-detail dl {display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#505050; font-size:12px; line-height:1.5em; font-weight:300; letter-spacing:-.02em;}
.pay-detail dl:first-child {color:#2c2c2c; font-size:14px; font-weight:500; line-height:1.5em; margin-bottom:10px;}
.pay-detail .ico {display:inline-block; vertical-align:middle; margin:-.2em 4px 0 0; width:16px; height:16px; text-align:center; color:#fff; font-family:'Montserrat',sans-serif; font-style:normal; font-size:10px; font-weight:700; line-height:16px; background:#0f7bd3; border-radius:5px;}

.paginate {position:relative; margin-top:24px; padding:0 40px; text-align:center; display:flex; justify-content:center; flex-wrap:wrap;}
.paginate a,
.paginate strong {display:inline-block; margin:0 4px; width:32px; height:32px; color:#505050; font-size:11px; font-weight:500; line-height:30px; background-color:#fff; border:1px solid #ccc; border-radius:100%;}
.paginate strong {background:#0f7bd3; border-color:#0f7bd3; color:#fff;}
.paginate .direction {position:absolute; top:0; margin:0; background-position:50% 50%; background-repeat:no-repeat; background-size:6px auto; overflow:hidden; font-size:0; line-height:0; text-indent:-999999em;}
.paginate .direction.prev {left:0; background-image:url("../images/page_prev.png");}
.paginate .direction.next {right:0; background-image:url("../images/page_next.png");}

/* modal */
.pop-view {width:300px; border-radius:5px; overflow:hidden; background:transparent;}
.pop-head {text-align:center; padding:11px 16px; background:#0f7bd3; color:#fff;}
.pop-head.type2 {background:#feaf17}
.pop-head h1 {font-size:18px; font-weight:500; line-height:1.3em;}

.pop-content {padding:24px 16px 16px; background:#fff;}

.pop-btns {display:flex; justify-content:center; margin:24px -2px 0;}
.pop-btns .btn-pack {line-height:34px; height:36px; min-width:auto; width:33.3%; margin:0 2px; padding:0 10px;}

.pop-alert {text-align:center;}
.pop-alert .ico {width:48px; margin:0 auto 12px; height:60px;}
.pop-alert .ico.success {background-image:url("/images/icon_success.png"); background-repeat:no-repeat; background-size:48px auto; overflow:hidden;}
.pop-alert .ico.error {background-image:url("/images/icon_error.png"); background-repeat:no-repeat; background-size:48px auto; overflow:hidden;}

.pop-alert h3 {font-size:16px; font-weight:500; line-height:1.3em; margin-bottom:4px;}
.pop-alert p {font-size:14px; color:#878787; line-height:1.5em;}
.pop-alert .btn-pack {margin-top:20px; line-height:34px; height:36px; padding:0 30px;}

#loading {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2000; display: none;}