@charset "UTF-8";
/***********************************************************************************
 header
************************************************************************************/
.h_container { position:relative; width:100%; max-width:600px; min-width:320px; height:90px; margin:0 auto; } 
.header { position:absolute; top:0; left:0; width:100%; height:100%; z-index:9999; } 
.header_wrap::after { content:''; display:block; clear:both; } 
.header .logo { position:absolute; left:0; top:50%; transform:translateY(-50%); } 
.header .logo > a { display:inline-block; width:160px; height:60px; background:url(/assets/mobile/img/logo.svg) no-repeat center; text-indent:-9999px; vertical-align:middle; } 
.header .util { float:right; height:90px; line-height:90px; } 
.header .util .my { display:inline-block; margin-right:1em; } 
.header .util .my .btn_login { width:29px; height:29px; background:url(/assets/mobile/img/common.png) no-repeat; background-position:-34px -27px; border:0; text-indent:-9999px; } 
.header .util .my .btn_logout { position:relative; background:0; padding:0 0 4px 0; border:0; color:#5d6d84; font-weight:600; font-size:1.05em; } 
.header .util .btn_open { display:inline-block; width:27px; height:19px; background:url(/assets/mobile/img/common.png) no-repeat; background-position:-34px -3px; text-indent:-9999px; } 

/* index header */
html.index .h_container { height:100%; } 
html.index .header .logo > a { background:url(/assets/mobile/img/logo_w.svg) no-repeat center; } 
html.index .header .util .my .btn_login { background-position:-3px -27px; } 
html.index .header .util .my .btn_logout { color:#fff; } 
html.index .header .util .my .btn_logout::after { background:#fff; } 
html.index .header .util .btn_open { background-position:-3px -3px; } 

/* mobile */
.gnb { position:absolute; visibility:hidden; top:0; right:-50%; width:100%; min-width:320px; height:100vh; padding-bottom:10em; background:#fff; z-index:99999; -webkit-overflow-scrolling:touch; 
    overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none; opacity:0; transition:.2s linear; 
}
.gnb::-webkit-scrollbar { display:none; }
.gnb.active { visibility:visible; right:0; opacity:1; transition:.2s linear; }
.gnb .inner { width:100%; height:100vh; }
.gnb .gnb_wrap { position:relative; width:100%; }
.gnb .gnb_wrap .gnb_top,
.gnb .gnb_wrap .gnb_bot { position:relative; }
.gnb .gnb_wrap .gnb_top { background:#edf2f7; }
.gnb .gnb_wrap .gnb_top .top_wrap { position:relative; width:100%; padding:8% 6% 5% 6%; background:#0b59b7; border-bottom-right-radius:50px; }
.gnb .gnb_wrap .gnb_top .top_wrap::after { content:''; position:absolute; right:6%; bottom:0; width:87px; height:75px; background:url(/assets/mobile/img/character.png) no-repeat center bottom; }
.gnb .gnb_wrap .gnb_top .gnb_util::after { content:''; display:block; clear:both; } 
.gnb .gnb_wrap .gnb_top .gnb_util button { text-indent:-99999em; }
.gnb .gnb_wrap .gnb_top .gnb_util .left,
.gnb .gnb_wrap .gnb_top .gnb_util .right { display:-webkit-flex; display:-ms-flexbox; display:flex; align-items:center; justify-content:space-between; }
.gnb .gnb_wrap .gnb_top .gnb_util .left { float:left; }
.gnb .gnb_wrap .gnb_top .gnb_util .right { float:right; }
.gnb .gnb_wrap .gnb_top button.btn_info { display:inline-block; width:27px; height:27px; margin-right:8px; background:url(/assets/mobile/img/icon_info_w.png) no-repeat; }
.gnb .gnb_wrap .gnb_top button.btn_logout { color:#fff; background:none; text-indent:0; }
.gnb .gnb_wrap .gnb_top button.btn_home { display:inline-block; width:28px; height:23px; margin-left:15px; background:url(/assets/mobile/img/icon_home_w.png) no-repeat; } 
.gnb .gnb_wrap .gnb_top button.btn_qr { display:inline-block; width:24px; height:24px; background:url(/assets/mobile/img/icon_qr_w.png) no-repeat; } 
.gnb .gnb_wrap .gnb_top button.btn_close { display:inline-block; width:19px; height:19px; margin-left:15px; background:url(/assets/mobile/img/icon_close_w.png) no-repeat; } 
/* 인사말, 로그인 */
.gnb .gnb_wrap .gnb_top .user_name { margin-top:32px; }
.gnb .gnb_wrap .gnb_top .user_name h2 { font-size:24px; color:#fff; }
.gnb .gnb_wrap .gnb_top .user_name strong { font-weight:400; color:#b0ff63; }
.gnb .gnb_wrap .gnb_top .user_name .user_login { display:-webkit-flex; display:-ms-flexbox; display:flex; align-items:center; justify-content:space-between; max-width:60%; margin-top:5px; text-align:center; }
.gnb .gnb_wrap .gnb_top .user_name .user_login li { -webkit-flex:1; flex:1; }
.gnb .gnb_wrap .gnb_top .user_name .user_login li a { display:block; padding:3px 10px; color:#fff; font-size:14px; }
.gnb .gnb_wrap .gnb_top .user_name .user_login li:first-child { margin-right:4px; }
.gnb .gnb_wrap .gnb_top .user_name .user_login li:first-child a { font-weight:400; color:#1e1e1e; background:#fff; border:1px solid rgba(255,255,255,1); }
.gnb .gnb_wrap .gnb_top .user_name .user_login li:last-child a { border:1px solid rgba(255,255,255,0.5); }
/* 마이 페이지 링크 */
.gnb .gnb_wrap .my_wrap { padding:25px 1em; text-align:center; }
.gnb .gnb_wrap .my_wrap ul { display:-webkit-flex; display:-ms-flexbox; display:flex; align-items:center; justify-content:center; }
.gnb .gnb_wrap .my_wrap ul li { -webkit-flex:1; flex:1; }
.gnb .gnb_wrap .my_wrap ul li a { display:block; }
.gnb .gnb_wrap .my_wrap ul li a span { display:block; margin:0 auto; }
.gnb .gnb_wrap .my_wrap ul li a span.txt { margin-top:10px; line-height:1; color:#3c3c3c; font-size:14px; }
.gnb .gnb_wrap .my_wrap ul li a span.img { display:-webkit-flex; display:-ms-flexbox; display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:#fff; border-radius:50%; }
.gnb .gnb_wrap .my_wrap ul li a span.img img { display:inline-block; width:25px; height:27px; }

.gnb .gnb_wrap .gnb_bot .dep1 { padding:1.5em 2em 1.4em 2em; border-bottom:5px solid #e9eff5; }
.gnb .gnb_wrap .gnb_bot .dep1:last-child { border-bottom:0; }
.gnb .gnb_wrap .gnb_bot .dep1 h3 { display:block; position:relative; padding:0 0 0 21px; margin-bottom:7px; font-size:19px; font-weight:500; color:#1e1e1e; }
.gnb .gnb_wrap .gnb_bot .dep1 h3::before { content:''; position:absolute; left:0; top:50%; width:18px; height:18px; background:url(/assets/mobile/img/gnb_bullet.svg) no-repeat center; transform:translate(0,-50%); }
.gnb .gnb_wrap .gnb_bot ul.dep2::after { content:''; display:block; clear:both; }
.gnb .gnb_wrap .gnb_bot ul.dep2 > li { float:left; position:relative; width:50%; padding-left:8px; }
.gnb .gnb_wrap .gnb_bot ul.dep2 > li::before { content:''; position:absolute; left:0; top:calc( 50% - 1px ); width:4px; height:4px; background:#bbb; transform:translate(0,-50%); }
.gnb .gnb_wrap .gnb_bot ul.dep2 > li > a,
.gnb .gnb_wrap .gnb_bot ul.dep2 > li > .tit { display:block; padding:.2em 0; font-size:15px; cursor:pointer; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li { width:100%; padding-left:0; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li::before { content:none; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li > .tit { position:relative; display:block; -webkit-transition:all 0.4s ease; transition:all 0.4s ease; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li > .tit::after { content:'\f107'; position:absolute; right:0; top:5px; color:#999; transform:rotate3d(1, 0, 0, 0deg); -webkit-transition:.2s linear; transition:.2s linear; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li ul.dep3 { display:none; padding:1em 1.5em; background:#f8f9fc; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li ul.dep3 li a { display:inline-block; width:calc(100% - 10px); padding:.2em 0; color:#777; font-size:14px; -webkit-transition:all 0.25s ease; transition:all 0.25s ease; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li ul.dep3 li a::before { content:'-'; display:inline-block; margin-right:2px; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li.active > .tit { border-bottom:1px solid #0b59b7; -webkit-transition:.2s linear; transition:.2s linear; }
.gnb .gnb_wrap .gnb_bot ul.dep2.has_dep3 > li.active > .tit::after { top:3px; color:#0b59b7; transform:rotate3d(1, 0, 0, 180deg); -webkit-transition:.2s linear; transition:.2s linear; }


/***********************************************************************************
 footer
************************************************************************************/
.footer { position:relative; width:100%; max-width:600px; height:100%; margin:4em auto 0; } 
.footer .to_top { position:absolute; right:0; top:0; width:54px; height:54px; background:url(/assets/mobile/img/to_top.png) no-repeat center #172846; border-radius:5px; } 
.footer .footer_top { position:relative; background:#6b778d; } 
.footer .footer_top ul { display:flex; justify-content:center; align-items:center; padding:3px 0; width:100%; margin:0 auto; text-align:center; } 
.footer .footer_top ul li { position:relative; width:25%; } 
.footer .footer_top ul li:nth-child(2) a:before,
.footer .footer_top ul li:nth-child(2) a:after { content:''; position:absolute; top:50%; transform:translateY(-50%); width:3px; height:3px; border-radius:50%; background:#eef3fd; } 
.footer .footer_top ul li:nth-child(2) a:before { left:-11px; } 
.footer .footer_top ul li:nth-child(2) a::after { right:-11px; } 
.footer .footer_top ul li:last-child:after { content:none; } 
.footer .footer_top ul li a { display:block; padding:10% 3%; color:#eef3fd; font-weight:600; } 
.footer .footer_bot { padding:5% 0; background:#5a667a; } 
.footer .footer_bot ul li { color:#eef3fd; } 
.footer .footer_bot .copyright { margin-top:3%; color:#9ca4b2; font-size:0.9em; } 


/***********************************************************************************
    로그인 
************************************************************************************/
.member { position:relative; padding-bottom:3em; }
.member .head { position:relative; height:80px; line-height:80px; text-align:center; }
.member .head .btn_prev { position:absolute; left:0; top:50%; transform:translateY(-50%); width:30px; height:30px; background:url(/assets/mobile/img/btn_prev.png) no-repeat; text-indent:-9999px; }
.member .head h3 { display:inline-block; font-size:1.7em; font-weight:600; }

.login .logo { position:relative; left:-4%; width:100%; max-width:230px; margin:0 auto; }
.login .logo img { display:block; width:100%; }
.login .tab_wrap { width:100%; margin-top:12%; }

.login.vertical_center { padding-bottom:0; }
.login.vertical_center .wrap_center { height:90vh; display:-webkit-flex; display:-ms-flexbox; display:flex; align-items:center; /*margin-top:9em;*/ justify-content:center; }
.login_wrap .login_info .login_input { margin-top:2em; }
.login_wrap .login_info .login_input input { margin-bottom:5px; }
.login_wrap .login_info .login_input input:last-child { margin-bottom:0; }
.login_wrap .login_info .checkgroup { margin-top:.8em; }
.login_wrap .login_info .btngroup { margin:30px auto 0; }
.login_wrap .login_info .btngroup.full .btn { height:50px; line-height:50px; padding:0; border-radius:0; background:#0b59b7; border:0; color:#fff; font-size:1.2em; }
.login_wrap .find_li { width:100%; margin:1em auto 0; }
.login_wrap .find_li ul { display:flex; justify-content:center; text-align:center; }
.login_wrap .find_li ul li { flex:1; position:relative; }
.login_wrap .find_li ul li a { display:block; }
.login_wrap .find_li ul li::after { content:''; position:absolute; top:30%; right:0; height:40%; width:2px; background:#ddd; }
.login_wrap .find_li ul li:last-child::after { content:none; }
.login_wrap .find_li ul li button { width:100%; padding:.5em 0; color:#272625; font-size:1.1em; }

.login_wrap.find { min-height:46vh; padding:2.5em 0 0 0; /*margin-top:2.5em;*/ }
.login_wrap > .btngroup { margin:60px auto 0; text-align:center; }
.login_wrap > .btngroup .btn { display:inline-block; border:0; padding:0; border-bottom:1px solid #bbb; color:#bbb; }

/***********************************************************************************
    회원가입
************************************************************************************/
.join_wrap { position:relative; margin-top:2.5em; padding-bottom:6em; }
.join_wrap .title { margin-bottom:2.5em; }
.join_wrap .title strong { display:block; line-height:1.4; color:#272625; font-size:2.2em; letter-spacing:-0.015em; }
.join_wrap .title p.sub_txt { font-size:1.067em; }
.join_wrap .join_info .btngroup { margin-bottom:2.5em; }
.join_wrap .join_info .btn_phone { border-color:#0b59b7; color:#0b59b7; font-weight:600; }
.join_wrap .join_info .li { position:relative; margin-bottom:25px; }
.join_wrap .join_info .li:last-child { margin-bottom:0; }
.join_wrap .join_info .li strong { display:block; color:#272625; font-size:1.133em; font-weight:600; }
.join_wrap .join_info .li .select_wrap { width:50%; }
.join_wrap.last { margin-top:7em; }
.join_wrap.last .title::before { content:''; display:block; width:46px; height:40px; margin-bottom:1.5em; background:url(/assets/mobile/img/join_img01.png) no-repeat; }
.join_wrap.last .title p.sub_txt { margin-top:.8em; }
.join_wrap.last .btngroup { margin:15em auto 0; }
.join_wrap.last .btn { position:relative; width:100%; padding:0; height:50px; line-height:50px; margin-bottom:10px; }
.join_wrap.last .btn:last-child { margin-bottom:0; }

/* 회원가입 이용약관 */
.agree_wrap .terms_li .li section { margin-bottom:1em; }
.agree_wrap .terms_li .li section h5,
.agree_wrap .terms_li .li section h4 { margin-bottom:4px; font-weight:500; }
.agree_wrap .terms_li .li section h5 { font-size:1.05em; }
.agree_wrap .terms_li .li section h4 { font-size:1.15em; }
.agree_wrap .terms_li .li section ul li,
.agree_wrap .terms_li .li section p,
.agree_wrap .terms_li .li section span { font-size:.95em; }
.agree_wrap .terms_li .li section span { display:block; margin-top:4px; }
.agree_wrap .terms_li .li section ul li { margin-bottom:4px; }
.agree_wrap .terms_li .li section ul li:last-child { margin-bottom:0; }

#agree_form { position:relative; } 
#agree_form .check_all_box { display:flex; margin-bottom:35px; } 
.agree_wrap .terms_li { margin-top:30px; }
.agree_wrap .terms_li .li { margin-bottom:20px; } 
.agree_wrap .terms_li .li:last-child { margin-bottom:0; } 
.agree_wrap .terms_li .li .cont { height:130px; overflow:auto; margin-top:-1px; padding:12px; border:1px solid #dadada; background:#fff; } 
.join .btn_s { position:fixed; left:0; bottom:0; width:100%; height:60px; background:#0b59b7; color:#fff; font-size:1.2em; transition-duration:0.2s; } 
.join .btn_next:hover:enabled { background:#e5e8ed; color:#5e5e5f; } 
.join .btn_next:disabled { background:#e5e8ed; color:#5e5e5f; cursor:not-allowed; } 

/***********************************************************************************
    미디어쿼리
************************************************************************************/
@media screen and ( max-width :480px ) {
    .footer .footer_top ul { max-width:330px; } 
    .footer .footer_top ul li { flex:1; }
}

@media screen and ( max-width :400px ) {
    .h_container { height:85px; }
    .header .util { height:85px; line-height:85px; }
    .login .logo { max-width:210px; }
}