@charset "utf-8";
/**********/
/* layout */
/**********/

.container {min-width:320px;}
.row_box {display:table;width:100%;border-top:1px solid #a8a8a8;}
.row {display:table;width:98%;}

/* form */
input[type="text"],input[type="data"],input[type="password"],input[type="email"] {width:200px;height:35px;text-indent:10px;line-height:35px;border:1px solid #bbbbbb;border-radius:5px;box-sizing:border-box;background:#fff;}
input[type="data"] {position:relative;background:#fff url(../images/common/icon_calendar.png) 95% center no-repeat;background-size:18px 20px;}
input::-webkit-input-placeholder {color:#444;}
input:-moz-placeholder {color:#444;}
input::-moz-placeholder {color:#444;}
input:-ms-input-placeholder {color:#444;}
input:read-only {color:#444;}
::-webkit-input-placeholder, 
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder {
 color:#444
}

/* txt_gray */
input.txt_gray::-webkit-input-placeholder {color:#999;}
input.txt_gray:-moz-placeholder {color:#999;}
input.txt_gray::-moz-placeholder {color:#999;}
input.txt_gray:-ms-input-placeholder {color:#999;}
input.txt_gray:read-only {color:#999;}

/* btn */
button.one {width:100% !important;}
.btn_table {display:table;width:98%;padding-top:10px;margin:0 auto;}
.btn_table button + button {margin-left:1%;}

/* 하단 btn */
.btn_box {display:table;width:100%;}
.btn_box button {display:table-cell;width:49.5%;text-align:center;font-size:1.500em;line-height:60px;}
.btn_box button + button {margin-left:1%;}
button.btn_black {width:49.5%;height:35px;text-align:center;color:#ffd71d;line-height:35px;border-radius:5px;background:#333131;}
button.btn_black span {display:inline-block;height:35px;color:#fff;line-height:25px;vertical-align:middle;}

.btn_bottom_fixed {position:fixed; left:0; bottom:0; width:100%; height:60px; font-size:1.66em; font-weight:bold; color:#fff; line-height:60px; text-align:center; background:#347dec}

/**********/
/* module */
/**********/
.form_cont {padding:20px 13px;border:1px solid #d8d8d8;border-width:1px 0;box-sizing:border-box;background-color:#eeeff1;}
.form_cont.radio_box {padding:20px 0 0 20px;}
.form_cont .btn_table {width:100%;}

.input_box {display:table;width:100%;margin-bottom:10px;}
.input_box input[type="text"],
.input_box input[type="data"],
.input_box input[type="date"],
.input_box input[type="number"],
.input_box input[type="password"],
.input_box input[type="email"] {display:table-cell;width:49.5%;font-size:15px;}
.input_box button.btn_black {display:table-cell;width:29%;margin-left:1%;color:#fff;}
.input_box.last_line {padding-bottom:10px;border-bottom:1px solid #d8d8d8;}
.input_box .comment {width:69.5%;font-size:1.167em;}

html{background:#eeeff1}

/* step */
.join .box_step{padding:15px 0;background:#fff}
.join .step_navbox {display:table;margin:0 auto;width:180px;}
.join .step_navbox li {display:table-cell;position:relative;width:90px;font-weight:bold;text-align:center;font-size:1.167em;}
.join .step_navbox li:after{display:block;content:"";position:absolute;left:70%;top:35%;width:100%;border-top:1px solid #d8d8d8;}
.join .step_navbox li:last-child:after{display:none;}
.join .step_navbox li span {display:block;width:31px;height:31px;margin:0 auto;text-align:center;color:#999;font-weight:bold;font-size:0.750em;line-height:31px;border:2px solid #d8d8d8;border-radius:50%;background-color:#eeeff1;}
.join .step_navbox li.on {color:#333131;}
.join .step_navbox li.on span {color:#333131;border-color:#333131;background-color:#ffd71d;}

/* tab */
.join .tab {display:table; width:100%; height:53px; background:#fff; }
.join .tab .item {display:table-cell; height:53px; text-align:center; color:#999; font-weight:bold; font-size:1.33em; vertical-align:middle; border-bottom:1px solid #d4d4d4}
.join .tab .item span {display:block; line-height:53px; border-bottom:3px solid #fff}
.join .tab .item.active {color:#347dec; border-bottom:1px solid #347dec}
.join .tab .item.active span {border-bottom:3px solid #347dec}

.join .box_result {margin-top:20px;padding-top:20px;border-top:1px solid #d4d4d4}
.join .box_result .box_desc{padding:16px 5px 20px;border:1px solid #d4d4d4;background:#fff;border-radius:5px;text-align:center}
.join .box_result .box_desc .txt_id{display:block;padding-bottom:8px; font-size:2.0em;color:#347dec;line-height:1.2;font-weight:bold}
.join .box_result .box_desc .txt_date{display:block;font-size:1.167em;color:#444}

/* 2017-06-05 */
.join .box_rule {margin:20px 0 70px; padding:10px;}
.join .box_rule .box_desc{padding:15px 10px 15px;border:1px solid #d4d4d4;background:#fff;border-radius:5px;}
.join .box_rule .box_desc .txt_title{display:block;padding-bottom:15px; font-size:1.5em;color:#313131; line-height:2em; font-weight:bold; }
.join .box_rule .box_desc .txt_cont{font-size:1em; line-height:150%; color:#444; padding-bottom:20px;}
.pdb30 { padding-bottom: 30px; !important; }
/* 2017-06-05 */

.join .box_chk {padding:6px 0}
.join .box_chk:after {display:block; content:""; clear:both}
.join .box_chk input[type='checkbox'] {position:absolute; left:0; width:2px; height:2px; opacity:0;}
.join .box_chk input[type='checkbox'] + label {display:inline-block; position:relative; min-height:24px; line-height:24px; padding-left:32px; font-size:1.16em;  line-height:24px; color:#000; font-weight:bold}
.join .box_chk input[type='checkbox'] + label:before {display:block; content:""; position:absolute; left:0; top:50%; width:24px; height:24px; margin-top:-11px; background:url(../images/common/icon_checkbox.png) 0 0 no-repeat; background-size:24px 54px;}
.join .box_chk input[type='checkbox']:checked + label:before {background-position:-0px -30px;}

.join .box_terms .box_scroll{height:110px;overflow:auto;background:#fff;padding:20px;box-sizing:border-box;border:1px solid #d4d4d4}
.join .box_terms .box_scroll .inner_box{font-size:1.167em;color:#333;line-height:1.429em}
.join .box_terms .box_chk{padding:10px 0 20px 0}
.join .box_terms .box_chk:after{display:block;content:'';clear:borh}
.join .box_terms .txt_chk{float:left;width:80%;}
.join .box_terms .btn_link{float:right;width:20%;padding-top:3px;font-size:1.167em;min-height:22px;box-sizing:border-box;text-decoration:underline;color:#444;font-weight:bold;text-align:right}

.join .list_menu{padding:24px 0;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}
.join .list_menu:after{display:block;content:'';clear:both}
.join .list_menu li{float:left;width:33.3%;text-align:center}
.join .list_menu span{font-size:1.167em;font-weight:bold;color:#666}

.join .icon_munu01 span:before{display:block;content:'';margin:0 auto 6px;width:34px;height:37px;background-image:url(../images/join/icon_zip_01.png);background-size:50px 200px;background-position:1px 5px}
.join .icon_munu01.icon_pw span:before{background-position:4px -66px}
.join .icon_munu01.icon_join span:before{background-position:0 -131px}

.join .list_menu + .list_bullet{margin-top:20px}
.join .list_bullet li{position:relative;padding-left:10px;font-size:1em;color:#666;line-height:1.5em}
.join .list_bullet li:before{content:'';position:absolute;left:0px;top:8px;width:3px;height:3px;border-radius:3px;background:#666}

.join .txt_desc{padding-bottom:20px;font-size:1.167em;color:#444;line-height:1.429em;text-align:center}
.join .form_cont{border:none;background:none}

.join .txt_notice{position:relative;padding-left:20px;font-size:1em;color:#d53133;font-weight:bold}
.join .txt_notice:before{content:'';position:absolute;left:10px;top:7px;width:3px;height:3px;border-radius:3px;background:#d53133}

.join .sel {display:table-cell;  overflow:hidden; position:relative; width:33%; height:35px; vertical-align:middle; background:#fff; border:1px solid #bbb; border-radius:3px; box-sizing:border-box}
.join .sel select {width:100%; height:100%; padding:0 25px 0 10px;font-size:1em; color:#666; font-weight:normal; background:url(../images/common/sel_arrow.png) 100% 50% no-repeat; background-size:24px 6px; border:none; appearance:none; -moz-appearance:none; -webkit-appearance:none}
.join .wrap_input {display:table-cell; width:33%; padding-left:3px; box-sizing:border-box;}
.join .wrap_input input {width:100%}

.join .wrap_txt {display:table-cell; width:20%; padding-left:3px; box-sizing:border-box; font-size:15px; color:#000; vertical-align:middle;}
.join .wrap_txt.input {display:table-cell; width:80%; padding-left:3px; box-sizing:border-box;}
.join .wrap_txt.input input{width:100%;}

/* 회원가입 - 입력폼 */
.joinForm .inputTxt {width:100%}
.joinForm .row_cell {display:table; width:100%; vertical-align:middle}
.joinForm .row_tit {font-size:1.167em;display:table-cell; width:25%; vertical-align:middle}
.joinForm .row_tit span.pad{padding-left:8px;}
.joinForm .row_cont {display:table-cell; width:75%; vertical-align:middle; font-size:14px;}
.joinForm .row_cell {margin-top:10px}
.joinForm .row_cell:nth-of-type(1) {margin-top:0px}
.joinForm .radio_box label.radio {width:100%; margin-bottom:5px; box-sizing:border-box}
.joinForm .radio_box label {width:100%; margin-bottom:5px; box-sizing:border-box}
.joinForm .joinForm_top {padding:10px 20px 15px; background:#fff; border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8}
.joinForm .joinForm_top .btn_black {width:100%}
.joinForm .input_box button.btn_black {width:60%}

#header {position:relative; height:60px}
#header .nav {display:block; position:absolute; left:16px; top:50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);padding-top:22px; background:url(../images/common/nav_bg.png) 0 0 no-repeat; background-size:18px 12px; color:#fff; font-size:11px; font-weight:bold}
#header .btn_page_close {display:block; position:absolute; right:16px; top:50%;  -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); padding-top:22px; background:url(../images/common/btn_page_close.png) 50% 0 no-repeat; background-size:14px 14px; color:#fff; font-size:11px; font-weight:bold}

/* heading tag */
.tit_h1 {padding:13px 0;text-align:center;color:#ffd71d;font-size:1.667em;line-height:34px;background:#333131;}
.tit_h2 {padding:8px 0 8px 2%;color:#000;font-size:1.250em;}
