/*@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);*/
@import url('https://cdn.jsdelivr.net/gh/innks/NanumSquareRound@master/nanumsquareround.css');
@import url(//fonts.cdnfonts.com/css/inter);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	/*font: inherit;
	vertical-align: baseline;*/
}
/*html, body, .wrap{height:100%;}*/
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
button, select, input {font-family: 'NanumSquareRound', 'Inter', sans-serif;}
body {
	line-height: 1;
	font-family: 'NanumSquareRound', sans-serif;
	font-weight: 400;
	color:#333;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button {border:none;}
a { text-decoration: none}
input, textarea, button { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
input:focus { outline: none; }

input::placeholder {color:#CACACA; font-size: 16px; font-weight: 300}
textarea::placeholder {color:#CACACA; font-size: 16px; font-weight: 300}
textarea:focus {border: none; outline: none}
input[type="checkbox"].css_checkbox,
input[type="radio"].css_radio{
  width:0px; height: 0px; display: none;
}

input[type="checkbox"].css_checkbox + label,
input[type="radio"].css_radio + label {
  position: relative;
  padding-left: 40px;
  font-weight: normal;
}

input[type="checkbox"].css_checkbox:checked + label:before {
  -moz-animation: borderscale 200ms ease-in;
  -webkit-animation: borderscale 200ms ease-in;
  animation: borderscale 200ms ease-in;
}
input[type="radio"].css_radio:checked + label:after, input[type="checkbox"].css_checkbox:checked + label:after {
  content: '';
  -moz-transform: rotate(-45deg) scale(1);
  -ms-transform: rotate(-45deg) scale(1);
  -webkit-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
  -moz-transition: -moz-transform 200ms ease-out;
  -o-transition: -o-transform 200ms ease-out;
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
}

input[type="radio"].css_radio + label, input[type="checkbox"].css_checkbox + label{display: inline-flex; align-items: center; padding: 0; margin: 0; font-size: 16px;}
input[type="radio"].css_radio:not(:first-child) + label, input[type="checkbox"].css_checkbox:not(:first-child) + label{margin: 0 0 0 20px;}
input[type="radio"].css_radio + label:before,
input[type="checkbox"].css_checkbox + label:before{content: ''; display:inline-block; width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 100%; box-sizing: border-box; background: #fff; cursor: pointer; position: static; vertical-align: top; margin: 0 8px 0 0;}
input[type="radio"].css_radio + label:hover:before, input[type="checkbox"].css_checkbox + label:hover:before{border: 1px solid #47B7F6;}
input[type="checkbox"].css_checkbox + label:before{border-radius: 4px}
input[type="radio"].css_radio:checked + label:before, input[type="checkbox"].css_checkbox:checked + label:before{background: #47B7F6; border: none;}
input[type="radio"].css_radio + label:after, input[type="checkbox"].css_checkbox + label:after{background: none;}
input[type="radio"].css_radio:checked + label:after{content: ''; display:block; position:absolute; top: 7px; left: 7px; box-sizing: border-box; width: 12px; height: 12px; background: #fff; margin: 0; border-radius:100%}
input[type="checkbox"].css_checkbox:checked + label:after{content: ''; display:block; position:absolute; top: 3px; left: 9px; box-sizing: border-box; width: 9px; height: 15px; transform: rotate(45deg); border: 3px solid #fff; border-top: 0; border-left: 0;border-radius: 0;background: none; margin: 0;}

.pt-0 {padding-top:0px !important}
.pt-10 {padding-top:10px !important}
.pt-20 {padding-top:20px !important}
.pt-30 {padding-top:30px !important}
.pt-40 {padding-top:40px !important}
.pt-60 {padding-top:60px !important}
.pb-10 {padding-bottom:10px !important}
.pb-20 {padding-bottom:20px !important}
.pb-30 {padding-bottom:30px !important}
.pb-40 {padding-bottom:40px !important}
.pb-50 {padding-bottom:50px !important}
.pb-60 {padding-bottom:100px !important}

.mt-0 {margin-top: 0px !important}
.mt-10 {margin-top: 10px !important}
.mt-20 {margin-top: 20px !important}
.mt-30 {margin-top: 30px !important}
.mt-40 {margin-top: 40px !important}
.mt-50 {margin-top: 50px !important}
.mt-60 {margin-top: 60px !important}
.mt-80 {margin-top: 80px !important}

.mb-0 {margin-bottom: 0px !important}
.mb-10 {margin-bottom: 10px !important}
.mb-20 {margin-bottom: 20px !important}
.mb-30 {margin-bottom: 30px !important}
.mb-40 {margin-bottom: 40px !important}
.mb-50 {margin-bottom: 50px !important}
.mb-60 {margin-bottom: 60px !important}

.pl-0 {padding-left:0px !important;}
.pl-10 {padding-left:10px !important;}
.pl-20 {padding-left:20px !important;}
.pl-30 {padding-left:30px !important;}
.pr-0 {padding-right:0px !important;}
.pr-10 {padding-right:10px !important;}
.pr-20 {padding-right:20px !important;}
.pr-30 {padding-right:30px !important;}

.fc_black {color:#333 !important}
.fc_main {color:#54B6D1 !important}
main {padding:20px; box-sizing: border-box}

/** 상단 head 영역 **/
header {width: 100%; height: 44px; line-height: 44px; display: flex; /*position: fixed; top:0; left: 0; z-index: 10*/}
header .fix {width: 100%; height: 44px; line-height: 44px; display: flex; /*position: fixed; top:0; left: 0; z-index: 10*/}
header .fix.index {padding:14px 20px 0; box-sizing: border-box;  justify-content: space-between;}
header .fix.index #notice {width:30px; height: 30px; background: url('../img/bell_icon.svg') no-repeat center; position: relative}
header .fix.index #notice span {font-size: 12px; font-weight: bold;padding:0 5px; box-sizing: border-box; min-width: 16px; height: 16px; display: inline-block;position: absolute; background: #ED6666; color:#fff; border-radius:16px; line-height: 16px; left: 20px; bottom:14px;}
header .fix.index #tel {width:30px; height: 30px; background: url('../img/call_icon.svg') no-repeat center;}

header .fix.fixed{position: fixed; left: 0; top: 0; width: 100%; z-index: 100; background: #fff}
header .fix.index.fixed{position: fixed; left: 0; top: 0; width: 100%; z-index: 100; background: linear-gradient(124.77deg, #56C9E9 -1.48%, #009CF4 68.8%);height: 58px}
header .back_btn {width: 44px; height: 44px; display: inline-block; float: left; outline: 0; border: 0;}
/* header .close_btn {width: 44px; height: 44px; display: inline-block; float: right; outline: 0; border: 0; background: url('../img/close_btn.svg') no-repeat center;} */
header .close_btn {width: 44px; height: 44px; display: inline-block; float: right; outline: 0; border: 0; background: url('../img/close_btn.svg') no-repeat center; position: fixed; right: 0; z-index: 999;}
header h2.left {width:calc(100% - 44px); float: right; text-align: center; text-indent: -44px; font-weight: 400; font-size: 16px; letter-spacing: -1px; color: #fff}
header h2.right {width:calc(100% - 44px); float: right; text-align: center; text-indent: 44px; font-weight: 400; font-size: 16px; letter-spacing: -1px; color: #fff}

header .back_btn.white {background: url('../img/icon_w_back.svg') no-repeat center;}
header .back_btn.black {background: url('../img/icon_b_back.svg') no-repeat center;}
/** 상단 head 영역 **/

nav {width: 100%; height: 68px; position: fixed; bottom:0; left: 0; display: flex; align-items: center; justify-content: space-between; padding:0 28px 0 14px; box-sizing: border-box; z-index: 100; background: #fff;}
nav a{min-width: 44px; text-align: center; font-size: 10px; color:#333; font-weight: 400}
nav a.on {color:#47B7F6; font-weight: 800;}
nav a.menu_icon:before {content:''; display: block; width:18px; height: 14px; background: url('../img/menu_icon_01.svg') no-repeat; margin: 0 auto 11px}
nav a.menu_icon.on:before {width:18px; height: 15px; background: url('../img/menu_icon_01_over.svg') no-repeat; margin: 0 auto 10px}
nav a.home_icon:before {content:''; display: block; width:21px; height: 19px; background: url('../img/menu_icon_02.svg') no-repeat; margin: 0 auto 11px}
nav a.home_icon.on:before {width:21px; height: 19px; background: url('../img/menu_icon_02_over.svg') no-repeat; margin: 0 auto 11px}
nav a.mypage_icon:before {content:''; display: block; width:22px; height: 18px; background: url('../img/menu_icon_03.svg') no-repeat; margin: 0 auto 11px}
nav a.mypage_icon.on:before {width:22px; height: 19px; background: url('../img/menu_icon_03_over.svg') no-repeat; margin: 0 auto 10px}

/* layer */
.layer { background: #fff;}
.layer.on {position: fixed; width: 100%; height: 100%; top:0; left: 0; overflow-y: auto; z-index: 200}

/* layer menu */
.layer_menu { background: #fff;}
.layer_menu.on {position: fixed; width: 100%; height: 100%; top:0; left: 0; overflow-y: auto; z-index: 2000}

/* layer menu */
.layer_detail { background: #fff;}
.layer_detail.on {position: fixed; width: 100%; height: 100%; top:0; left: 0; overflow-y: auto; z-index: 3000}

.wrap {max-width: 800px; margin: 0 auto;}

/* process bar **/
.wrap .process_bar {margin: 154px 0 0 0}
.wrap .process_bar .bar_wrap {height: 20px; background: #EBF9FD; border-radius:10px;}
.wrap .process_bar .bar_wrap .p_num {height: 20px; background: #47B7F6; border-radius:10px; font-size: 10px; color:#fff;display: flex;align-content: center;align-items: center;justify-content: flex-end;padding: 0 10px 0 0;    box-sizing: border-box;}

/* layer alert pop */
#layerAlertPop {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; background: rgba(0,0,0,0.7); justify-content: center; align-items: center;z-index: 2000}
#layerAlertPop .layer_alert_pop {background: #fff;width:300px; padding:40px 20px 20px 20px; box-sizing: border-box; border-radius:20px;}
#layerAlertPop .layer_alert_pop dl {display: flex; flex-direction: column; text-align: center}
#layerAlertPop .layer_alert_pop dl dt {font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 10px 0}
#layerAlertPop .layer_alert_pop dl dd {font-size: 16px; line-height: 24px; font-weight: 400; margin: 0 0 30px 0}
#layerAlertPop .layer_alert_pop dl dd span{font-size: 16px; line-height: 24px; font-weight: 800; color:#47B7F6}
#layerAlertPop .layer_alert_pop button {width:100%; height: 50px; display: flex; justify-content: center; align-items: center; color:#fff; background: #47B7F6; border-radius: 10px; font-weight: 700}
#layerAlertPop .layer_alert_pop button.other {width:100%; height: 50px; display: flex; justify-content: center; align-items: center; color:#47B7F6; background: #EEF8FB; border-radius: 10px; margin: 10px 0 0 0; font-weight: 700}
#layerAlertPop .layer_alert_pop button.eval_btn {color:#fff; background: #DDDDDD;}
#layerAlertPop .layer_alert_pop button.eval_btn.on {color:#fff; background: #47B7F6;}

/* 솔루션 레이어팝업 평가 */
#layerAlertPop_star {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; background: rgba(0,0,0,0.7); justify-content: center; align-items: center;z-index: 2000}
#layerAlertPop_star .layer_alert_pop {background: #fff;width:300px; padding:40px 20px 20px 20px; box-sizing: border-box; border-radius:20px;}
#layerAlertPop_star .layer_alert_pop dl {display: flex; flex-direction: column; text-align: center}
#layerAlertPop_star .layer_alert_pop dl dt {font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 10px 0}
#layerAlertPop_star .layer_alert_pop dl dd {font-size: 16px; line-height: 24px; font-weight: 400; margin: 0 0 30px 0}
#layerAlertPop_star .layer_alert_pop dl dd span{font-size: 16px; line-height: 24px; font-weight: 700; color:#47B7F6}
#layerAlertPop_star .layer_alert_pop button {width:100%; height: 50px; display: flex; justify-content: center; align-items: center; color:#fff; background: #47B7F6; border-radius: 10px;}
#layerAlertPop_star .layer_alert_pop button.other {width:100%; height: 50px; display: flex; justify-content: center; align-items: center; color:#47B7F6; background: #EEF8FB; border-radius: 10px; margin: 10px 0 0 0}
#layerAlertPop_star .layer_alert_pop button.eval_btn {color:#fff; background: #DDDDDD;}
#layerAlertPop_star .layer_alert_pop button.eval_btn.on {color:#fff; background: #47B7F6;}
#layerAlertPop_star .layer_alert_pop dl dd ol {display: flex; justify-content: center; margin: 40px 0 20px 0}
#layerAlertPop_star .layer_alert_pop dl dd ol li {width: 38px; height: 36px; background: url('../img/star_icon.svg') no-repeat; margin: 0 4px;}
#layerAlertPop_star .layer_alert_pop dl dd ol li.on {width: 38px; height: 36px; background: url('../img/star_icon_on.svg') no-repeat; margin: 0 4px;}


/* layer alert pop */
#layerConfirmPop {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; background: rgba(0,0,0,0.7); justify-content: center; align-items: center;z-index: 2000}
#layerConfirmPop .layer_alert_pop {background: #fff;width:300px; padding:40px 20px 20px 20px; box-sizing: border-box; border-radius:20px;}
#layerConfirmPop .layer_alert_pop dl {display: flex; flex-direction: column; text-align: center}
#layerConfirmPop .layer_alert_pop dl dt {font-size: 16px; line-height: 24px; font-weight: 700; margin: 0 0 10px 0}
#layerConfirmPop .layer_alert_pop dl dd {font-size: 16px; line-height: 24px; font-weight: 400; margin: 0 0 30px 0}
#layerConfirmPop .layer_alert_pop dl dd span{font-size: 16px; line-height: 24px; font-weight: 700; color:#47B7F6}
#layerConfirmPop .layer_alert_pop button {width:50%; height: 50px; display: flex; justify-content: center; align-items: center; color:#fff; background: #47B7F6;; border-radius: 10px; float: left;}
#layerConfirmPop .layer_alert_pop button.other {width:50%; height: 50px; display: flex; justify-content: center; align-items: center; color:#47B7F6; background: #EEF8FB; border-radius: 10px; float: right;}
#layerConfirmPop .layer_alert_pop button.eval_btn {color:#fff; background: #DDDDDD;}
#layerConfirmPop .layer_alert_pop button.eval_btn.on {color:#fff; background: #47B7F6;}


#layerSolConfirmPop {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; background: rgba(0,0,0,0.7); justify-content: center; align-items: center;z-index: 2000}
#layerSolConfirmPop .layer_alert_pop {background: #fff;width:300px; padding:40px 20px 20px 20px; box-sizing: border-box; border-radius:20px;}
#layerSolConfirmPop .layer_alert_pop dl {display: flex; flex-direction: column; text-align: center}
#layerSolConfirmPop .layer_alert_pop dl dt {font-size: 16px; line-height: 24px; font-weight: 400; margin: 0 0 10px 0}
#layerSolConfirmPop .layer_alert_pop dl dd {font-size: 16px; line-height: 24px; font-weight: 400; margin: 0 0 30px 0}
#layerSolConfirmPop .layer_alert_pop dl dd span{font-size: 16px; line-height: 24px; font-weight: 700; color:#47B7F6}
#layerSolConfirmPop .layer_alert_pop button {width:100%; height: 50px; display: flex; justify-content: center; align-items: center; color:#fff; background: #47B7F6; border-radius: 10px;}
#layerSolConfirmPop .layer_alert_pop button.other {width:100%; height: 50px; display: flex; justify-content: center; align-items: center; color:#47B7F6; background: #EEF8FB; border-radius: 10px; margin: 10px 0 0 0}
#layerSolConfirmPop .layer_alert_pop button.eval_btn {color:#fff; background: #DDDDDD;}
#layerSolConfirmPop .layer_alert_pop button.eval_btn.on {color:#fff; background: #47B7F6;}

/* 공통 UI */
.home_bg {background: linear-gradient(124.77deg, #56C9E9 -1.48%, #009CF4 68.8%);}

/* paging */
.page_wrap { width:100%; font-size:0; text-align:center; margin:30px 0 50px; }
.page_wrap .page_num { position:relative; }
.page_wrap .page_num a { display:inline-block; font-size:14px; line-height:30px; height:28px; min-width:28px; text-align:center; margin:0 1px; border:1px solid #e1e1e1; color:#474747; vertical-align:top; }
.page_wrap .page_num a.active { border-color:#47B7F6; color:#47B7F6; }
.page_wrap .page_num a.first { width:30px; height:30px; margin:0; border:0; background:url('/web/images/paging/icon_paging_first.gif') no-repeat 0 0; text-indent:-999999px; }
.page_wrap .page_num a.prev { width:30px; height:30px; margin:0 20px 0 3px; border:0; background:url('/web/images/paging/icon_paging_prev.gif') no-repeat 0 0; text-indent:-999999px; }
.page_wrap .page_num a.next { width:30px; height:30px; margin:0 3px 0 17px; border:0;background:url('/web/images/paging/icon_paging_next.gif') no-repeat 0 0; text-indent:-999999px; }
.page_wrap .page_num a.last { width:30px; height:30px; margin:0; border:0;background:url('/web/images/paging/icon_paging_last.gif') no-repeat 0 0; text-indent:-999999px; }


.loading {width:100%; height: 100%; margin:0; padding: 0; position: fixed; top: 0; background: none; z-index: 999; display: none;}
.loading .loadingDim {position: absolute; width: 100%; height: 100%; opacity: 0.7; background: rgb(0, 0, 0); z-index: 0;}
.loading .loadingBox {position: relative; width: 200px; padding: 0 0 14px 0; margin: 50% auto; z-index: 1; color: #000; text-align: center; background: #fff;}
.loading .loadingBox .loadingImg{width: 70px;}
.loading .loadingBox span{font-size: 12px;}

.popView {width:100%; height: 100%; margin:0; padding: 0; position: fixed; top: 0; background: none; z-index: 1000; display: none;}
.popView .popViewDim {position: absolute; width: 100%; height: 100%; opacity: 0.8; background: rgb(0, 0, 0); z-index: 0;}
.popView .close_btn {width: 44px; height: 44px; background: url('../images/icon/close_btn2.png') no-repeat center; background-size: 20px; position: absolute; right: 0; top:0;  z-index: 1}
.popView .popViewBox {position: relative; width: 100%; max-width: 500px; height: 300px; padding: 0; margin: 0 auto; z-index: 1; color: #fff; text-align: center;}
.popView .popViewBox iframe {width: 90% !important; height: 100% !important;}


.guideView {width:100%; height: 100%; margin:0; padding: 0; position: fixed; top: 0; background: none; z-index: 3000; display: none;}
.guideView .guideViewDim {position: absolute; width: 100%; height: 100%; opacity: 0.8; background: rgb(0, 0, 0); z-index: 0;}
/* .guideView .close_btn {width: 44px; height: 44px; background: url('../images/icon/close_btn2.png') no-repeat center; background-size: 20px; position: absolute; right: 0; top:0;  z-index: 1} */
.guideView .guideViewBox {position: relative; width: 100%; max-width: 500px; height: 100%; padding: 0; margin: 0 auto; z-index: 1; color: #fff; text-align: center; }
.guideView .guideViewBox .guideViewArea{width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; position: relative;}
.guideView .guideViewBox .guideViewArea img{width: 100%; height: auto;}
.guideView .guideViewBox .guideViewArea .chkBtnArea{width: 100%; margin: 0 auto; padding: 0; text-align: center; background: #1e4a4f; position: fixed; left: 0; bottom: 0; height: 50px;}
.guideView .guideViewBox .guideViewArea .chkBtnArea .wrap1{position: absolute; width: 100%; text-align: center; margin-top: 5px;}
.guideView .guideViewBox .guideViewArea .chkBtnArea .wrap1 .wrap2{position: relative; font-size: 14px; color: #fff; border: 1px solid #fff; border-radius: 10px; width: 80%; margin: 0 auto; padding: 10px; text-align: center;}
.guideView .guideViewBox .guideViewArea .chkBtnArea .wrap1 .wrap2 .chkImg{width: 16px; vertical-align: middle; }

.btnWrap{padding: 20px 0; margin: 20px 0; background: #47B7F6;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.btn01 {width: 100%; height: 60px; border-radius: 30px; text-align: center; background:#54B6D1; border: none; outline: none; font-size: 18px; color:#fff;}