@charset "utf-8";
@import "program.css";
@import "program2.css";

/* (주)한신정보기술  김지원 - 19.09.10 */

/*공통*/
.em_red{color:#ff0000;}
.em_green{color: #398308;}
.em_orange{color:#e63505;}
.em_blue{color:blue;}
.margin_l_20{margin-left:20px;}

/* 본문바로가기  */
.accessibility{overflow:hidden;position:relative;z-index:1000;width:100%;}
.accessibility a{display:block;overflow:hidden;height:1px;width:1px;margin:0 -1px -1px 0;font-size:0;line-height:0;text-align:center;}
.accessibility a:focus,#accessibility a:hover,#accessibility a:active{width:auto;height:20px;margin:0;padding:8px 0 0 15px;background:#20262c;font-size:12px;font-weight:700;line-height:1;color:#fff;}

/* 상단 */
#header{padding:0 0 169px; border-bottom:48px solid #1e377a; background:url('../images/bg_login.gif') no-repeat 50% 0 / cover; text-align:center;}
#header.header_edit{background-image:url('../images/bg_edit.gif');}
#header .logo a{display:block; padding-top:80px;}
#header .logo img{margin-right:3px; vertical-align:middle;}
#header .logo span{display:inline-block; font-size:38px; color:#fff; vertical-align:middle;}
#header .contents_box{color:#fff;}
#header .contents_box .title{margin:45px 0 24px; font-size:30px;}

/* 컨텐츠 */
#container{margin-top:-135px;}
#container .wrap{padding:12px 12px 60px; background:#fff; box-sizing:border-box;}
#container .wrap .inner{border:1px solid #1e377a; overflow:hidden;}

/* 메뉴 */
.menu_box{text-align:center;}
.menu_box ul{display:table; width:100.2%; font-size:0; line-height:0;}
.menu_box ul li{display:table-cell; width:25%; height:76px; background:#1e377a; border-left:1px solid #394f8a; vertical-align:middle; box-sizing:border-box;}
.menu_box ul li:first-child{border-left:none;}
.menu_box ul li a{display:inline-block; color:#fff; font-size:20px; line-height:22px; word-break:keep-all;}
.menu_box ul li a:hover{text-decoration:none;}
.menu_box ul li.on{position:relative; border-left:none; background:#fff;}
.menu_box ul li.on a{font-size:23px; font-weight:600; color:#1e377a;}
.menu_box ul li.on + li{border-left:none; background:url('../images/bg_menubox_on.png') no-repeat #1e377a;}

/* 3개일때 */
.menu_box.divide3 ul li{width:33.33%;}
@media all and (max-width:640px){
    .menu_box ul li{padding-left:10px; padding-right:10px; height:60px;}
    .menu_box ul li a,
    .menu_box ul li.on a{font-size:15px;}
}

/* 로그인 */
.login_area/*{padding:82px 0 69px;}point_txt 없을때*/{padding:62px 0 69px;}
.login_area .top_login{text-align:center;}
/* 2025-04-23 로그인 방식 4개일때 */
/*.login_area .top_login li{float:left; width:25%; padding-top:13px; border-right:1px solid #adb1c0; box-sizing:border-box;}
.login_area .top_login li:nth-child(4){border-right:none;} */
/* 2025-04-23 로그인 방식 4개일때 끝*/

/* 2025-04-23 로그인 방식 3개일때 */
.login_area .top_login li{float:left; width:33.33%; padding-top:13px; border-right:1px solid #adb1c0; box-sizing:border-box;}
.login_area .top_login li:nth-child(3){border-right:none;}
/* 2025-04-23 로그인 방식 3개일때 끝*/

.login_area .top_login li .contents_box{}
.login_area .top_login li .contents_box h2{margin-bottom:22px; font-size:20px; color:#000;}
.login_area .top_login li .contents_box h2:before{display:block; width:100%; height:105px; margin-bottom:31px; background-position:center center; background-repeat:no-repeat;}
.login_area .top_login li:nth-child(1) .contents_box h2:before{background-image:url('../images/login_icon01.png');}
.login_area .top_login li:nth-child(2) .contents_box h2:before{background-image:url('../images/login_icon04.png');}
.login_area .top_login li:nth-child(3) .contents_box h2:before{background-image:url('../images/login_icon02.png');}
.login_area .top_login li:nth-child(4) .contents_box h2:before{background-image:url('../images/login_icon03.png');}
.login_area .top_login li .contents_box p{font-weight:600; color:#464646; line-height:23px; height:92px;}
.login_area .top_login li .contents_box p em{color:#23459c;}
.login_area .top_login li .contents_box .put_box{margin-top:26px;}
.login_area .top_login li .contents_box .put_box a{display:inline-block; }
.login_area .top_login li .contents_box .put_box a, .login_area .top_login li .contents_box .put_box button, .login_area .nProtect_box .put_box button{width:200px; background:#2b4380; font-size:16px; color:#fff; letter-spacing:-0.03em; line-height:50px;}
.login_area .sns_login{margin-top:71px; padding:0 77px;}
.login_area .sns_login:before{display:block; width:100%; height:5px; margin-bottom:46px; background:url('../images/login_zig_bg.png');}
.login_area .sns_login .title{margin-bottom:33px;}
.login_area .sns_login .title h2{display:inline-block; margin-right:17px; font-size:20px; color:#000;}
.login_area .sns_login .title p{display:inline-block; color:#464646;}
.login_area .sns_login ul{}
.login_area .sns_login ul li{float:left; position:relative; width:calc(25% - 15px); margin-right:20px; box-sizing:border-box;}
.login_area .sns_login ul li:before{display:block; position:absolute; top:0; left:0; width:50px; height:100%; border-right-style:solid; border-right-width:1px; background-position:center center; background-repeat:no-repeat;}
.login_area .sns_login ul li.facebook:before{border-right-color:#273f72; background-image:url('../images/login_sns01.png');}
.login_area .sns_login ul li.google:before{border-right-color:#bd2a25 ; background-image:url('../images/login_sns02.png');}
.login_area .sns_login ul li.naver:before{border-right-color:#1bb201; background-image:url('../images/login_sns03.png');}
.login_area .sns_login ul li.kakao:before{border-right-color:#e4d203; background-image:url('../images/login_sns04.png');}
.login_area .sns_login ul li.facebook{background:#3b5998;}
.login_area .sns_login ul li.google{background:#cc3732;}
.login_area .sns_login ul li.naver{background:#25a010;}
.login_area .sns_login ul li.kakao{margin-right:0; background:#ffeb00;}
.login_area .sns_login ul li a{display:block; padding-left:72px; font-size:16px; color:#fff; line-height:51px;}
.login_area .sns_login ul li.facebook a{color:#fff;}
.login_area .sns_login ul li.kakao a{color:#3c1e1e;}
.login_bot_box{margin-top:21px; padding:42px 20px; background:#e9ecf2; font-size:16px; line-height:22px; text-align:center;}

.login_area .nProtect_box{margin-top:51px; padding:0 77px;}
.login_area .nProtect_box:before{display:block; width:100%; height:5px; margin-bottom:46px; background:url('../images/login_zig_bg.png');}
.login_area .nProtect_box h2{display:block; margin-right:17px; margin-bottom:10px; font-size:20px; color:#000;}
.login_area .nProtect_box .download p{display:inline-block; color:#464646; width:60%; vertical-align:middle;}
.login_area .nProtect_box .put_box{float:right;}
.login_area .nProtect_box .info{margin-top:20px; padding-top:10px; border-top:1px #555 solid;}
.login_area .nProtect_box .info p{font-weight:bold; color:#000;}
@media all and (max-width:1000px){
    #container .wrap{margin:0 5px;}
    #container .wrap .inner{background:#fff;}
    .login_area .top_login li{padding:12px 20px 0;}
    .login_area .top_login li .contents_box p{height:140px; }
    .login_area .top_login li .contents_box p br{display:none;}
    .login_area .sns_login ul li{width:calc(50% - 10px);}
    .login_area .sns_login ul li:nth-child(2n){margin-right:0;}
    .login_area .sns_login ul li:nth-child(n+3){margin-top:20px;}
    .login_bot_box p br{display:none;}
}
@media all and (max-width:800px){
    #header .contents_box p br{display:none;}
    .login_area .top_login li .contents_box .put_box a, .login_area .top_login li .contents_box .put_box button{width:100%;}
    .login_area .nProtect_box .put_box button{width:100px;}
}
@media all and (max-width:640px){
    #header{padding-top:0px; padding-bottom:149px;}
    #header .logo span{font-size:34px;}
    #header .contents_box .title{margin-top:35px; font-size:27px;}
    .login_area{padding:50px 0 20px;}
    .login_area .top_login li{float:none; width:calc(100% - 40px); margin-right:auto; margin-bottom:25px; margin-left:auto; padding:0 0 25px; border-right:none; border-bottom:1px solid #adb1c0;}
    .login_area .top_login li:last-child{margin-bottom:0; padding-bottom:0;}
    .login_area .top_login li .contents_box p{height:auto;}
    .login_area .sns_login{padding:0 20px;}
    .login_area .nProtect_box{padding:0 20px;}
    .login_area .nProtect_box .download p{width:100%; }
    .login_area .nProtect_box .put_box{display:block; width:100%; margin: 10px 0;}
    .login_area .nProtect_box .put_box button{width:100%;}
    .login_area .nProtect_box .info{margin-bottom:20px;}
}
@media all and (max-width:480px){
    .login_area .sns_login ul li{width:100%; margin-right:0;}
    .login_area .sns_login ul li:nth-child(n+2){margin-top:10px;}
}

/* 2019-09-24 이경선 회원가입, 통합아이디찾기, 비밀번호재발급 추가*/

/* 박스 */
.dotted_box{position:relative; border:none; background-repeat:repeat-x, repeat-y, repeat-y, repeat-x; background-position:left bottom, right top, left top, left top; background-image:url('../images/dotbox_x.png'), url('../images/dotbox_y.png'), url('../images/dotbox_y.png'), url('../images/dotbox_x.png'); background-color:#fff;}
.member{padding-right:47px; padding-bottom:120px; padding-left:47px;}
.member_step{margin-bottom:45px; padding-top:60px; padding-bottom:40px; border-bottom:1px solid #bfbfbf; font-size:0; line-height:0; text-align:center;}
.member_step li{display:inline-block; position:relative; width:137px; height:137px; margin-right:52px; padding-top:35px; border-radius:50%; box-sizing:border-box; background-color:#d7d7d7; color:#000; font-size:16px; line-height:18px; }
.member_step li:last-child{margin-right:0;}
.member_step li.active{background-color:#1e377a; color:#fff;}
.member_step li:before{display:block; position:absolute; top:calc(50% - 13px); right:-35px; width:17px; height:26px; background:url('../images/member_step.png') no-repeat;}
.member_step li:last-child:before{display:none;}
.member_step li span.member_step_num{display:inline-block; margin-bottom:20px; padding-bottom:10px; padding-right:3px; padding-left:3px; border-bottom:1px solid #000;}
.member_step li.active span.member_step_num{border-bottom-color:#fff;}
.member_step li span.member_step_text{display:block; font-size:15px; line-height:17px; }
@media all and (max-width:1200px){
    .member{padding-right:10px; padding-left:10px;}
}
@media all and (max-width:1000px){
    .member{padding-bottom:50px;}
    .member_step li{height:auto; margin-bottom:2px; margin-right:2px; padding-top:20px; padding-bottom:20px; border-radius:0;}
    .member_step li:before{display:none;}
    .member_step li span.member_step_num{margin-bottom:0; padding-bottom:0; border:0;}
    .member_step li span.member_step_text{display:inline-block;}
}

/*약관동의*/
.member_step1 .member_title{padding-left:230px; background:url('../images/member_step1_img.png') no-repeat left center;}
.member_step1 .member_title .site_list{margin-top:10px;}
.member_step1 .member_title .site_list li{display:inline-block; margin-bottom:10px; padding:8px 20px; background-color:#e63505; color:#fff; font-size:16px; line-height:18px;}
.member_step1 .member_con .member_form_area > .clearfix{margin-left:-17px;}
.member_step1 .member_con .member_form_area .member_agree{float:left; width:calc(50% - 17px); margin-top:55px; margin-left:17px;}
.member_step1 .member_con .member_form_area .member_agree h2{margin-bottom:20px; color:#000; font-size:20px; line-height:22px;}
.member_step1 .member_con .member_form_area .member_agree .p-agree .p-agree__condents{position:relative; overflow-y:scroll; height:260px; padding:15px; border:1px solid #b3b1b4; box-sizing:border-box;}
.member_step1 .member_con .member_form_area .member_agree .p-agree .p-agree__condents table{word-break:keep-all; border:1px #7c7c7c solid;}
.member_step1 .member_con .member_form_area .member_agree .p-agree .p-agree__condents table th, .member_step1 .member_con .member_form_area .member_agree .p-agree .p-agree__condents table td{border-right:1px #7c7c7c solid;}
.member_step1 .member_con .member_form_area .member_agree .p-agree .p-agree__condents table th{border-bottom:1px #7c7c7c solid;}
.member_step1 .member_con .member_form_area .member_agree .agreebutton{margin-top:10px;}
@media all and (max-width:800px){
    .member_step1 .member_con .member_form_area > .clearfix{margin-left:0;}
    .member_step1 .member_title{padding-top:140px; padding-left:0; background:url('../images/member_step1_img.png') no-repeat top center;}
    .member_step1 .member_con .member_form_area .member_agree{float:none; width:100%; margin-top:25px; margin-left:0;}
}

/*회원유형*/
.member_step2 .member_type .clearfix{margin-left:-20px;}
.member_step2 .member_type .clearfix > li{float:left; width:calc(100% / 3 - 20px); margin-left:20px; padding:1px; box-sizing:border-box; text-align:center;}
.member_step2 .member_type .clearfix > li:before{display:block; width:100%; height:138px; background:url('../images/member_step2_icon.png') no-repeat center #f7f7f7;}
.member_step2 .member_type .clearfix > li:nth-child(2):before{background-image:url('../images/member_step2_icon2.png')}
.member_step2 .member_type .clearfix > li:nth-child(3):before{background-image:url('../images/member_step2_icon3.png')}
.member_step2 .member_type .clearfix > li > span{display:block;}
.member_step2 .member_type .clearfix > li > a{display:inline-block; width:140px; margin-top:27px; margin-bottom:24px; padding-top:17px; padding-bottom:17px; background-color:#575b64; color:#fff; font-size:16px; line-height:18px;}
.member_step2 .member_type .clearfix > li .member_type_title{position:relative; margin-top:20px; margin-bottom:13px; color:#000; font-size:18px; line-height:20px;}
.member_step2 .member_type .clearfix > li .member_type_title:after{display:block; width:1px; height:15px; margin-top:11px; margin-right:auto; margin-left:auto; background-color:#000;}
.member_step2 .member_type .clearfix > li .member_type_comment{color:#555; font-size:15px; line-height:17px;}
@media all and (max-width:640px){
    .member_step2 .member_type .clearfix{margin-left:0;}
    .member_step2 .member_type .clearfix > li{float:left; width:100%; margin-left:0; margin-bottom:15px;}
}

/* 타이틀 */
.title_area{margin-top:83px; margin-bottom:30px; padding-bottom:43px; border-bottom:1px solid #bfbfbf; text-align:center;}
.title_area h2{color:#000; font-size:20px; line-height:22px; letter-spacing:-0.02em;}
.title_area p{margin-top:19px; color:#555; font-size:16px; line-height:25px;}
.title_area .popup_error{margin-top:15px; color:#555; font-size:16px;}
.title_area .popup_error span,.title_area .popup_error a{display:block;}
.title_area .popup_error .title{color:#000; line-height:18px; font-weight:600;}
.title_area .popup_error a{display:inline-block; margin-top:15px; padding:8px 20px 9px 20px; color:#fff; font-size:16px; background:#e63505;}
.title_area .popup_error .text{margin-top:8px; color:#555; line-height:25px;}

/* 버튼 */
.btn_area{margin-top:30px; text-align:center; font-size:0;}
.btn_area .btn_type1,
.btn_area .btn_type2{display:inline-block; padding:16px 48px; text-align:center; vertical-align:middle; color:#fff; font-size:16px; line-height:18px; letter-spacing:-0.02em; background-color:#2b4380; border-radius:0; -webkit-appearance:none;}
.btn_area .btn_type2{background-color:#4a63a3;}
/* 2020-10-30 추가 */
.btn_area .btn {display:inline-block;margin-top:5px; padding:10px 20px; text-align:center; vertical-align:middle; color:#fff; font-size:16px; line-height:18px; letter-spacing:-0.02em; background-color:#2b4380; border-radius:0; -webkit-appearance:none;}
.member_step1 .member_title .site_list .ujc1,
.btn_area .ujc1{background-color:#5858FA;}
.member_step1 .member_title .site_list .ujc2,
.btn_area .ujc2{background-color:#088A08;}
.member_step1 .member_title .site_list .ujc3,
.btn_area .ujc3{background-color:#868A08;}
.member_step1 .member_title .site_list .ujc4,
.btn_area .ujc4{background-color:#4a63a3;}
.member_step1 .member_title .site_list .ujc5,
.btn_area .ujc5{background-color:#DF7401;}
.member_step1 .member_title .site_list .ujc6,
.btn_area .ujc6{background-color:#0174DF;}
.member_step1 .member_title .site_list .ujc7,
.btn_area .ujc7{background-color:#04B4AE;}
.member_step1 .member_title .site_list .ujc8,
.btn_area .ujc8{background-color:#B18904;}
/* .btn_area .btn_type1 + .btn_type2{margin-left:10px;} */
.site_list a {color:#FFFFFF;}
.site_list a:first-child {margin-left:0;}
.btn_area a {margin-left:10px;}
.btn_area a:first-child {margin-left:0;}
@media all and (max-width:640px){
    .btn_area .btn {margin-top:5px; padding-left:20px; padding-right:20px;}
    .btn_area .btn_type1,
    .btn_area .btn_type2{padding-left:35px; padding-right:35px;}
    .btn_area a {display:block; width:100%; margin-left:0; margin-bottom:5px; box-sizing:border-box;}
    .btn_area.agree1 .btn_type1,
    .btn_area.agree1 .btn_type2{padding-left:20px; padding-right:20px; font-size:14px;}
}

/* 완료페이지 */
.complete_box{margin-top:87px; padding:67px 20px 0 20px; background:#eaeffb; border-bottom:15px solid #2b4380; text-align:center;}
.complete_box h2{text-align:center; color:#2b4380; font-size:30px; line-height:32px; font-weight:400; letter-spacing:-0.02em; word-break:keep-all;}
.complete_box p{margin-top:16px; color:#2b4380; font-size:16px; line-height:28px; letter-spacing:-0.02em; word-break:keep-all;}
.complete_box:after{display:block; margin:34px auto 0 auto; width:49.91%; height:0; padding:9.81% 0; background:url('../images/bg_complete.png') no-repeat 0 0 / 100% auto;}
.complete_box + .btn_area{margin-top:67px;}
.complete_box .complete_name{color:#c403bb;}
.complete_box .complete_id{color:#e33f00;}
@media all and (max-width:480px){
    .complete_box:after{width:80%; padding:15.8% 0;}
    .complete_box h2{font-size:26px;}
    .complete_box p{font-size:14px; line-height:26px; letter-spacing:-0.03em;}
}

/* 인증 리스트 */
.certify_area{margin-top:60px;}
.certify_area ul{width:580px; margin:0 auto; font-size:0;}
.certify_area ul li{display:inline-block; width:50%; color:#464646; font-size:15px; text-align:center; box-sizing:border-box;}
.certify_area ul li:before{display:block; width:118px; height:105px; margin:0 auto; background:url('../images/bg_certify_icon.png') no-repeat;}
.certify_area ul li.nth2{border-left:1px solid #adb1c0;}
.certify_area ul li.nth2:before{background-position:0 -111px;}
.certify_area ul li .title{display:inline-block; margin-top:20px; color:#000; font-size:20px; font-weight:600;}
.certify_area ul li .cscenter{color:#23459c;}
@media all and (max-width:640px){
    .certify_area ul{width:100%;}
    .certify_area ul li{width:100%;}
    .certify_area ul li.nth2{margin-top:50px; border-left:none;}
}

.certify_area + .title_area{margin-bottom:0; padding-bottom:0; border-bottom:none; margin-top:50px; padding-top:40px; border-top:1px solid #bfbfbf;}

/* 2022-11-23 추가 */
.login_area .top_login .onepass{width:450px;margin:0 auto;padding:20px 25px;text-align:left;border:1px solid #ddd;}
.login_area .top_login .onepass h2{margin-bottom:22px; font-size:24px; color:#000;}
.login_area .top_login .onepass p{position:relative;margin-bottom:20px; color:#464646; line-height:23px; padding-top:100px;}
.login_area .top_login .onepass p:before{position:absolute; display:block; top:15px; left:calc(50% - 150px); width:300px; height:45px; background:url('../images/onepass_img.png') no-repeat;}
.login_area .top_login .onepass p em{color:#23459c;}
.login_area .top_login .onepass .put_box{margin-top:26px;text-align:center;}
.login_area .top_login .onepass .put_box a{display:inline-block; }
.login_area .top_login .onepass .put_box a,
.login_area .top_login .onepass .put_box button{width:260px; background:#2b4380; font-size:16px; color:#fff; letter-spacing:-0.03em; line-height:50px;}
.login_area .top_login .onepass .link1{margin-top:20px;}
.login_area .top_login .onepass .link2{margin-top:10px;}
.login_area .top_login .onepass .split{margin:0 20px;}

.l-input{display:inline-block;width:100%;height:40px;margin:2px 0;padding:0 12px 2px;background-color:#fff;border:1px solid #cdcdcd;border-radius:0;vertical-align:middle;appearance:none;-webkit-appearance:none;-moz-appearance:textfield;box-sizing:border-box;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;line-height:inherit}
.l-input::placeholder{color:#757575;font-size:.9em}
.l-input:not([readonly]):focus{outline:0;border-color:#888;box-shadow:0 0 6px rgba(0,0,0,.2)}

@media all and (max-width:640px){
    .login_area .top_login .onepass{width:80%;}
    .login_area .top_login .onepass p{padding-top:85px;}
    .login_area .top_login .onepass p:before{left:calc(50% - 120px); width:240px; height:36px; background-size:contain;}
    .login_area .top_login .onepass .put_box button{width:100%;}
}

/*20221228 디지털원패스 이용안내*/
.info_wrap h2{color:#000; font-size:20px; line-height:22px; letter-spacing:-0.02em; margin-top:50px; margin-bottom:20px;}
.info_wrap h3{color:#525252; font-size:18px; line-height:20px; letter-spacing:-0.02em; margin-bottom:10px; padding-left:10px;}
.info_box{text-align:center; padding:20px 40px 20px 40px; border:1px solid #f4f4f4; background-color:#fdfdfd;}
.info_box .title{color:#525252; font-size:18px; margin:0 0 10px; line-height:25px; font-weight:600;}
.info_wrap ol > li{position:relative; padding-left:29px; line-height:20px; margin-top:7px; counter-increment:number; font-size:16px;}
.info_wrap ol > li:first-child{margin-top:1px;}
.info_wrap ol > li:before{display:block; position:absolute; top:-1px; left:0; width:20px; height:20px; border:1px solid #000; color:#000; font-size:14px; line-height:21px; text-align:center; box-sizing:border-box; content:counter(number, decimal); z-index:1;}
.info_wrap ol > li:after{display:block; position:absolute; top:2px; left:2px; width:20px; height:20px; background-color:#d5e1ff; z-index:0;}
.info_wrap .bu.type2{margin-top:7px; margin-bottom:9px;}
.info_wrap .img_box{width:800px; margin:20px auto;}
.info_wrap .img_box .inner{text-align:center; padding:40px 0;}
.info_wrap .step.s1{margin-bottom:50px;}
.info_wrap .li_step{float:left; width:50%; border-right:1px solid #adb1c0; box-sizing:border-box; text-align:center; margin-bottom:40px; padding:20px 0;}
.info_wrap .li_step:nth-child(2n){border-right:none;}
.info_wrap .li_step .txt_box{width:380px; height:50px; line-height:50px; margin:0 auto 10px; padding:10px 20px; background:#284d9e; color:#fff; border-radius:10px;}
.info_wrap .li_step.n1 .txt_box .text{line-height:25px;}
.info_wrap .step.s2 .li_step .txt_box{background:#0078d4;}

@media all and (max-width:1000px){
    .info_wrap .img_box{width:100%;}
    .info_wrap .li_step .txt_box{width:85%;}
}

@media all and (max-width:900px){
    .info_wrap .li_step .txt_box{width:70%;}
    .info_wrap .li_step{width:100%; border-right:none; border-bottom:1px solid #adb1c0;}
    .info_wrap .li_step:last-child{border-bottom:none;}
}

@media all and (max-width:640px){
    .info_wrap .li_step{margin-bottom:10px;}
    .info_wrap .li_step .txt_box{width:100%; padding:10px 5px; margin:0 0 10px -5px;}
    .info_wrap .li_step .txt_box .text{font-size:12px;}
}

/* sub_step */
.sub_step{margin-top:30px;}
.sub_step .step_item{position:relative;display:inline-block;width:220px;height: 100px;border-radius:10px;background:#f7f8f8;/* line-height: 80px; */}
.sub_step .step_item:first-child{margin-right:50px;}
.sub_step .step_item:first-child:before{display:block;position:absolute;top:calc(50% - 13px);right:-35px;width:17px;height:26px;background:url('../images/member_step.png') no-repeat;opacity: 0.7;}
.sub_step .step_item .inner{border: none !important;padding-top: 20px;background: none !important;}
.sub_step .step_item .inner p{margin-top: 0;}
.sub_step .step_item .inner .step_list.num{display:inline-block;padding: 3px 10px 0;border-radius: 7px;background: #1e377a;color: #fff;margin-bottom: 10px;}
.sub_step .step_item .inner .step_list.text{font-size:15px; color:#000;}

.point_box{width:80%; margin:30px auto 0; padding:20px 0; border-radius:10px; background:#ececec; text-align:center;}
.point_box .box_title{font-size:17px; font-weight:600; color:#ca0000; margin-bottom:10px; margin-top:0;}
.point_box .box_text{display:inline-block; text-align:left;}
.point_box .box_text p{font-size:15px; color:#000; margin-top:0;}

@media all and (max-width:1000px){
    .point_box{width:calc(100% - 20px); padding:20px 10px;}
}
@media all and (max-width:640px){
    .sub_step .step_item{display:block; margin:0 auto 0;}
    .sub_step .step_item:first-child{margin:0 auto 50px;}
    .sub_step .step_item:first-child:before{top:auto; bottom:-37px; right:calc(50% - 8px);transform:rotate( 90deg );}
}

/*20230302 개명신청 사전동의 추가*/
.getUserBox{box-sizing:border-box;padding:40px 50px;background: #f7f7f7;width: 920px;margin: 0 auto;border-radius: 10px;}
#container .wrap .getUserBox .inner{border:none;}
.getUserBox h1{text-align:center; font-size:1.5em; font-weight:600; margin-bottom:20px;}
.getUserBox .sub_tit{font-size:17px; font-weight:600;}
.getUserBox .bu_wrap{padding-left:10px; margin:7px 0;}
.getUserBox .bu_wrap .bu_list{position:relative;padding-left: 12px;}
.getUserBox .bu_wrap .bu_list:after{position:absolute;display:block;content:'-';left: 0;top: 0;}
.getUserBox .bu2_wrap{padding-left:10px; margin:5px 0;}
.getUserBox .bu2_wrap .bu2_list{position:relative;padding-left: 16px;}
.getUserBox .bu_wrap .bu2_list:after{position:absolute;display:block;content:'·';left: 0;top: 0;}
.getUserBox .agree_txt{color:#0c30c4; font-weight:600;}

@media all and (max-width:1000px){
    .getUserBox{width:100%;}
    #container .wrap .getUserBox .inner{background:transparent;}
}

@media all and (max-width:640px){
    .getUserBox{padding:40px 20px;}
    .getUserBox h1{font-size:18px;}
}

.point_txt{background-color:#e9ecf2; padding:15px 20px; text-align:center; font-size:16px; margin:40px 30px 0; color:#2e2ed1;}
@media all and (max-width:640px){
    .point_txt{font-size:14px;}
}

/* gnb */
.gnb {position:absolute; top:0; left:0;}
.gnb li {float:left; margin-left:-1px;}
.gnb li:first-child {margin-left:0; position:relative;}
.gnb li:first-child:after{content:""; width:20px; height:20px; background: url("/search/images/common/gnb_logo_small.png") 0 0 no-repeat; left:15px; top:11px; position:absolute; display:block;}
.gnb a {display:block; position:relative; padding:7px 44px 10px 43px; border-right:1px dotted #7cacd0; border-bottom:1px dotted #7cacd0; border-left:1px dotted #7cacd0; color:#fff; font-size:16px; line-height:28px; font-weight:600; letter-spacing:-0.03em;}
.gnb a:before {display:block; position:absolute; top:11px; right:13px; width:20px; height:20px; border-radius:50%; background-color:#09205d;}
.gnb a:after {display:block; position:absolute; top:16px; right:20px; width:6px; height:10px; background:url('/search/images/common/gnb_sprite.png') no-repeat left top;}
@media all and (max-width:1000px) {
    .gnb {padding-left:2%;}
}
@media all and (max-width:640px) {
    .gnb {width:100%; font-size:0; line-height:0; text-align:center;}
    .gnb li {display:inline-block; float:none; vertical-align:middle;}
}