@charset "utf-8";

/* 레이아웃 크기 지정 */
#container:after, #footer:after, #header:after, #wrap:after, .inner:after, .input_type1 p:after, .section:after, .sec_cont:after , .tab_content:after, dl:after, ol:after, ul:after, #captcha:after, .index .sec_cont >ul >li:after{display:block;clear:both;content:""}
#wrap{min-width:1000px;width:100%;overflow: hidden;}
.mb_body #wrap{min-width:auto}
.inner{width:1000px;min-width:1000px;margin:auto;position:relative;}
.inner.wid1000{width:1000px;min-width:1000px;margin: auto}
.inner.wid1600{width:1600px;min-width:1180px;margin: auto}


/* ——————————————————————————
 * header
/* —————————————————————————— */
#header{width:100%;position:fixed;top:0;left:0;right:0;z-index:9999;}
#header:before{content:'';display:block;width:100%;height:1px;position:absolute;bottom:0;left:0;right:0;background:#fff;opacity:0.08;filter: alpha(opacity=8);-moz-opacity:0.08;z-index: 1;}
/* #header .header_bg{position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0;filter: alpha(opacity=0);-moz-opacity:0} */
#header .header_bg{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;}
#header > .inner{height:90px}
/* #header > .inner:before{content:'';display:block;width:100%;height:1px;position:absolute;bottom:0;left:0;right:0;background:#fff;opacity:0.08;filter: alpha(opacity=8);-moz-opacity:0.08;z-index: 1;} */

/* logo */
#header .logo{position:absolute;top:50%;left:0;transform: translateY(-50%);line-height:0}
#header .logo a{transition:none;display:inline-block}
#header .logo a img{width:auto;height:50px}
#header .logo a img.ori{display:none}

/* gnb */
#header .gnb{text-align:center}
#header .gnb ul{display:inline-block;vertical-align:middle}
#header .gnb li{float:left;padding:0 20px}
#header .gnb li a{height:90px;line-height:90px;position:relative;display:inline-block;font-size:16px;font-weight:500;color:#000;letter-spacing:-0.025em}
#header .gnb li a:after{content:'';display:block;position:absolute;width:auto;height:2px;left:50%;right:50%;bottom:0;background:#333;-webkit-transition:all 200ms;transition:all 200ms}
#header .gnb li a.active:after,
#header .gnb li a:focus:after,
#header .gnb li a:hover:after{left:0;right:0;-webkit-transition:all 0.3s;transition:all 0.3s}

/* util */
#header .util{position:absolute;top:15px;right:0}
#header .util li{float:left;padding:11px 0;margin-left:16px}
#header .util li:first-child{margin-left:0}
#header .util li a{display:inline-block;font-size:14px;line-height:38px;color:#000}
#header .util li a span{position:relative;display:inline-block;padding:0 20px;z-index:1}
#header .util li a span:before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;background:#fff;opacity:0.2;border-radius:2em;z-index:-1; border:1px solid #000;}


/* ——————————————————————————
 * header - scrolled
/* —————————————————————————— */
#header,
#header .gnb li a,
#header .header_bg{-webkit-transition:all 0.15s linear;-moz-transition:all 0.15s linear;-o-transition:all 0.15s linear;transition:all 0.15s linear}
.scrolled #header{-webkit-box-shadow:0 2px 8px rgba(0,0,0,0.1);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.scrolled #header:before{background:#000;opacity:0.08;filter: alpha(opacity=8);-moz-opacity:0.08}
.scrolled #header .header_bg{background:#fff;opacity:1;filter: alpha(opacity=100);-moz-opacity:1}
.scrolled #header .logo a img.ori{display:block}
.scrolled #header .logo a img.wht{display:none}
.scrolled #header .gnb li a,
.scrolled #header .util li a{color:#222}
.scrolled #header .util li a span:before{border:1px solid #000;opacity:0.2;filter: alpha(opacity=20);-moz-opacity:0.2}


/* ——————————————————————————
 * contents_top
/* —————————————————————————— */
.contents_top{width:100%;height:280px;position: relative;}
.contents_top .bg{position:absolute;top:0;left:0;right:0;bottom:0;background-position:center center;-webkit-background-size:cover !important;background-size:cover !important; margin-top:90px;}
.contents_top .bg > .inner{line-height:190px;text-align:center}
.contents_top .txtBox{display:inline-block;line-height:1.5;color:rgb(255,255,255);vertical-align:middle}
.contents_top .txtBox h2{font-size:24px;font-weight:700}
.contents_top .txtBox p{position:relative;font-size:14px;color:#ffffff;opacity:1;margin-top:4px; padding-top:25px;}
.contents_top .txtBox p:before {content:'';display:block; position:absolute; width:40px; height:2px; background:#ffffff; left:0;right:0;margin:0 auto;top:10px;}



/* ——————————————————————————
 * footer
/* —————————————————————————— */
#footer{padding:50px 0 40px;background:#131313;color:rgba(255,255,255,0.7);font-size:14px}
#footer .f_menu{text-align:right;position:absolute;top:0;right:0}
#footer .f_menu a{display:inline-block;font-size:18px;line-height:32px;color:rgba(255,255,255,0.6)}
#footer .f_logo img{width:auto;height:36px}
#footer .f_call{margin-top:40px}
#footer .f_call p a{font-size:28px;line-height:1.2;letter-spacing:0.025em;color:#0a4cd4;font-weight:700}
#footer .f_call .desc{margin-top:4px;color:#fff}
#footer .f_info{margin-top:40px}
#footer .f_info ul{margin:0;overflow:hidden}
#footer .f_info li{display:inline-block;float:left;margin-left:10px;padding-left:10px;position:relative}
#footer .f_info li:first-child{margin-left:0;padding-left:0}
#footer .f_info li:before{content:'';display:inline-block;width:1px;height:12px;background:rgba(255,255,255,0.15);position:absolute;left:0;top:50%;margin-top:-6px}
#footer .f_info li:first-child:before{display:none}
#footer .f_info li span{display:inline-block;margin-right:6px;color:rgba(255,255,255,0.4)}
#footer .f_copy{font-size:13px;text-transform:uppercase;letter-spacing:0;font-weight:700;color:rgba(255,255,255,0.4);position:absolute;right:0;bottom:0}


/* ——————————————————————————
 * mb layout
/* —————————————————————————— */
html.mb{height:100%}
.mb_body{display:table;width:100%;min-width:320px;height:100%;height:100vh;border-collapse:separate}
.mb_body #wrap{display:table-cell;position:relative;height:100%;padding:50px 0;vertical-align:middle}
#mb_header{width:520px;margin:0 auto;text-align:center}
#mb_header .logo a{display:inline-block;}
#mb_header .logo a img {width:auto;height:54px;}
.mb_body #container{width:520px;position:relative;margin:40px auto;padding:60px 70px;border:1px solid #e4e4e4;border-radius:2px; border-radius:10px;}
#mb_footer{width:520px;margin:0 auto;text-align:center}
#mb_footer .f_copy{font-size:13px;text-transform:uppercase;letter-spacing:0;font-weight:700;color:#bbb}
.mb_cont{}
.mb_cont_tit{padding-bottom:20px;margin-bottom:20px;border-bottom:2px solid #222}
.mb_cont_tit i.success{width:80px;height:80px;display:inline-block;background:url("../img/ico_success.png") no-repeat;-webkit-background-size:100% 100%;background-size:100% 100%;margin-bottom:20px}
.mb_cont_tit h2{font-size:26px;color:#222;line-height:1.4}
.mb_cont_tit p{margin-top:10px;font-size:16px;color:#7c7c7c}
.mb_section{margin-top:25px}
.mb_section .agree_box{height:100px;overflow:hidden;overflow-y:auto;background:#f7f7f7;padding:15px;margin-top:6px;font-size:12px;color:#777}
.mb_section .agree_box p{white-space:pre-line}
.mb_section .agree_box .policy_tit1,
.mb_section .agree_box .policy_tit2{font-size:12px;margin:10px 0 6px}
.policy_dep2>li{margin-top:5px;padding-left:18px}
.policy_dep3>li{padding-left:18px}
.btn_confirm{text-align:center;margin-top:20px;}
.btn_confirm.line{padding-top:20px;border-top:1px solid #f0f0f0}
.btn_confirm .btn{margin:0 3px}

/* fregister_chkall */
#fregister_chkall{border-bottom:1px solid #e4e4e4;padding-bottom:16px}
#fregister_chkall label{font-size:18px}

/* form_group */
.form_group{}
.form_group_tit{font-size:20px}
.form_group .ulLine{margin-top:20px;padding-top:20px;border-top:1px solid #f0f0f0}
.form_group>ul>li{margin-top:20px}
.form_group>ul>li:first-child{margin-top:0}
.form_group>ul>li .list_txt_type2{margin-top:8px}
.form_group>ul>li .certify_box{}
.form_group>ul>li .certify_box .btn{width:100%}

/* 로그인 */
#mb_login.form_group fieldset>ul>li{margin-top:-1px}
#mb_login.form_group fieldset>ul>li .input_type1 input{border-radius:0 0 2px 2px}
#mb_login.form_group fieldset>ul>li:first-child .input_type1 input{border-radius:2px 2px 0 0}
#mb_login.form_group .checksWrap_type1{margin-top:10px}
#mb_login.form_group .btn_confirm .btn{width:100%;height:60px;margin:0;line-height:58px;font-size:18px}
#mb_login.form_group #login_info{margin:20px 0 0;text-align:center}
#mb_login.form_group #login_info a{position:relative;display:inline-block;font-size:15px;margin:0 15px}
#mb_login.form_group #login_info a:hover:before{background:#222}

/* 회원가입 완료 */
.email_certify_box{padding:20px;background:#f6f6f6;border-radius:2px;margin-bottom:20px}
.email_certify_box h3 p{font-size:18px}
.email_certify_box h3 span{display:block;font-size:14px;color:#7c7c7c;padding-top:5px}
.email_certify_box #result_email{margin-top:20px;border:1px solid #e5e5e5;border-radius:2px;padding:10px}
.email_certify_box #result_email dd, .email_certify_box #result_email dt{width:50%;float:left;font-size:14px;line-height:26px}
.email_certify_box #result_email dt{color:#7c7c7c}
.email_certify_box #result_email dd{text-align:right}

/* ——————————————————————————
 * floating
/* —————————————————————————— */
.floating{position:fixed;right:30px;bottom:104px;z-index:9997}
.floating ul li{margin-top:10px}
.floating ul li:first-child{margin-top:0}
.floating ul li a{display:block}
.floating ul li a i{width:64px;height:64px;display:block;-webkit-background-size:100% 100% !important;background-size:100% 100% !important;background-repeat:no-repeat !important;box-shadow:0 4px 6px 0 rgba(0,0,0,0.2);border-radius:50%;-webkit-animation:0.2s cubic-bezier(0.1,0,0.6,1) 0.35s 1 normal backwards running btnAni;animation:0.2s cubic-bezier(0.1,0,0.6,1) 0.35s 1 normal backwards running btnAni;
    position: relative;
    z-index: 2;
}
.floating ul li.btn_call a i{background-image:url("../img/ico_call2.png")}
.floating ul li.btn_kakao a i{background-image:url("../img/ico_kakao.png")}
.floating ul li.btn_app a i{background-image:url("../img/app-ico.png")}
.floating ul li.btn_kakao a .txt{
    height: 56px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    padding: 18px 40px 18px 22px;
    border-radius: 30px 10px 10px 30px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 3px 12px 0 rgba(0,0,0,0.12);
    background: #fff;
    position: absolute;
    top: 4px;
    right: 34px;
    z-index: 1;
    transition: box-shadow 0.2s ease-out 0s !important;
    animation: 0.5s cubic-bezier(0.24,0.06,0,0.97) 0.55s 1 normal backwards running txtAni !important;
}

.floating ul li.btn_app a .txt{
    height: 56px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    padding: 18px 40px 18px 22px;
    border-radius: 30px 10px 10px 30px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 3px 12px 0 rgba(0,0,0,0.12);
    background: #fff;
    position: absolute;
    top: 4px;
    right: 34px;
    z-index: 1;
    transition: box-shadow 0.2s ease-out 0s !important;
    animation: 0.5s cubic-bezier(0.24,0.06,0,0.97) 0.55s 1 normal backwards running txtAni !important;
}

/* ——————————————————————————
 * calculator
/* —————————————————————————— */
/* 팝업 버튼 (우측하단 고정) */
.btn_calculator{position:fixed;right:30px;bottom:30px;z-index:9997}
.btn_calculator a{display:block;position:relative}
.btn_calculator a img{width:64px;height:auto;position:relative;box-shadow:0 4px 6px 0 rgba(0,0,0,0.2);border-radius:50%;z-index:10;-webkit-animation:0.2s cubic-bezier(0.1,0,0.6,1) 0.35s 1 normal backwards running btnAni;animation:0.2s cubic-bezier(0.1,0,0.6,1) 0.35s 1 normal backwards running btnAni}
.btn_calculator a .txt{height:56px;font-size:14px;line-height:18px;font-weight:500;color:#000;text-overflow:ellipsis;white-space:nowrap;text-align:right;padding:18px 40px 18px 22px;border-radius:30px 10px 10px 30px;border:1px solid rgba(0,0,0,0.08);box-shadow:0 3px 12px 0 rgba(0,0,0,0.12);background:#fff;position:absolute;top:4px;right:34px;z-index:1;transition:box-shadow 0.2s ease-out 0s !important;animation:0.5s cubic-bezier(0.24,0.06,0,0.97) 0.55s 1 normal backwards running txtAni !important}

/* 계산기 팝업 */
#calculator.modal{max-width:340px;border-radius:10px;-webkit-animation:layerAni 0.2s ease-out !important;animation:layerAni 0.2s ease-out !important}
#calculator .calculator_head{position:relative;padding:34px 0 32px 30px;border-radius:10px 10px 0 0;
    background-color: #4784e2;
    background-image: -webkit-linear-gradient(-45deg,#1360ff 20%, #79a5ff 60%) !important;
    background-image: linear-gradient(-45deg, #1360ff 20%, #79a5ff 60%) !important;
}
#calculator .calculator_head h2{display:inline-block;color:#fff;font-size:22px;font-weight:500;line-height:1.5;letter-spacing:-0.05em}
#calculator .calculator_head h2:before,
#calculator .calculator_head:after,
#calculator .calculator_head:before{content:'';width:1px;background:rgba(0,0,0,0.04);position:absolute;top:0;bottom:0}
#calculator .calculator_head:before{left:25%}
#calculator .calculator_head:after{left:50%}
#calculator .calculator_head h2:before{left:75%}
#calculator .calculator_cont{padding:30px}
#calculator .calculator_cont .radio_type1 {
    margin-top: 15px;
}
#calculator .calculator_cont .result_area{background:#f7f7f7;border:1px solid #f7f7f7;padding:8px 15px;border-radius:2px;margin-top:12px}
#calculator .calculator_cont .result_area dl{width:100%;display:table;line-height:38px}
#calculator .calculator_cont .result_area dl dd,
#calculator .calculator_cont .result_area dl dt{width:50%;display:table-cell;font-size:13px;vertical-align:baseline}
#calculator .calculator_cont .result_area dl dt{color:#888;letter-spacing:-0.05em}
#calculator .calculator_cont .result_area dl dd{text-align:right;font-size:16px}
#calculator .calculator_cont .result_area dl dd em{display:inline-block;font-size:13px;vertical-align:baseline;margin-left:2px}

/* result - total */
#calculator .calculator_cont .result_area.total{border:1px solid #222;background:#fff;padding:5px 15px}
#calculator .calculator_cont .result_area.total dl dd,
#calculator .calculator_cont .result_area.total dl dt{color:#222}
#calculator .calculator_cont .result_area.total dl dd{font-size:18px}

/* keyframes */
@-webkit-keyframes btnAni{
    from{opacity:0;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}
    to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
@keyframes btnAni{
    from{opacity:0;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}
    to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes txtAni{
    from{opacity:0;-webkit-transform:translateX(40px);-ms-transform:translateX(40px);transform:translateX(40px)}
    to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
@keyframes txtAni{
    from{opacity:0;-webkit-transform:translateX(40px);-ms-transform:translateX(40px);transform:translateX(40px)}
    to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
@-webkit-keyframes layerAni{
    from{opacity:0;-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}
    to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
@keyframes layerAni{
    from{opacity:0;-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}
    to{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}


/* ——————————————————————————
 * popup
/* —————————————————————————— */
#hd_pop{}
#hd_pop .hd_pops{position:absolute;z-index:99999;background:#fff;-webkit-box-shadow:0 3px 12px 0 rgba(0,0,0,0.2);box-shadow:0 3px 12px 0 rgba(0,0,0,0.2)}

/* hd_pops_con */
#hd_pop .hd_pops_con{overflow:hidden}
#hd_pop .hd_pops_con img{max-width:100%;height:auto}

/* hd_pops_footer */
#hd_pop .hd_pops_footer{}
#hd_pop .hd_pops_footer ul{width:100%;display:table;background:#777}
#hd_pop .hd_pops_footer ul li{width:50%;display:table-cell;text-align:center;position:relative}
#hd_pop .hd_pops_footer ul li:last-child:before{content:'';width:1px;background:#fff;opacity:0.25;filter: alpha(opacity=25);-moz-opacity:0.25;position:absolute;left:0;top:0;bottom:0}
#hd_pop .hd_pops_footer ul li button{width:100%;display:block;font-size:14px;line-height:50px;color:#fff}