@charset "utf-8";
/*
    Join.css : 회원가입 Template
*/

/***** layout *****/
body.join_ty {min-width:320px;background:#f5f5f5;}
#join_wrap {position:relative;width:540px;margin:40px auto;padding:0 39px;background:#fff;border:1px solid #e5e5e5;box-sizing:border-box;overflow:hidden;}

/*** Header ***/
.join_header {position:relative;height:120px;border-bottom:1px solid #e5e5e5;}
.join_header h1.logo {position:absolute;left:50%;top:34px;margin-left:-72px;}
.join_header h1.logo a {display:block;width:144px;height:59px;background:url(../images/layout/logo.svg) center /100% no-repeat;text-indent:-9999px;overflow:hidden;}



/*** Container ***/
.join_container {position:relative;min-height:300px;margin-top:50px;}

/** Title & Text **/
.tit_m {margin-bottom:50px;color:#1c1c1c;font-size:30px;font-weight:800;line-height:30px;text-align:center;}
.txt_m {margin-top:-4px;color:#1c1c1c;font-size:18px;letter-spacing:-0.5px;}
.txt_m.mt {margin-top:-35px;}
.txt_m.center {text-align:center;}
.txt_m dd {margin-top:7px;color:#999;font-size:14px;line-height:20px;}
.txt_m.ico_step_ed {padding-top:82px;background:url(../images/join/ico_step_ed.png) center 4px/117px 55px no-repeat;}
.tit_m.ty02 {font-weight:900;line-height:40px;}

/** Contents **/
/* join_step */
.join_step {width:100%;height:40px;margin-bottom:60px;text-align:justify;}
.join_step li {display:inline-block;position:relative;height:40px;padding-left:49px;font-size:15px;line-height:40px;transition:all 0.4s;}
.join_step li i {display:block;position:absolute;left:0;top:0;width:40px;height:40px;border:2px solid #0d643a;border-radius:100%;box-sizing:border-box;color:#0d643a;font-style:normal;font-weight:800;line-height:36px;text-align:center;}
.join_step li.on {color:#0d643a;font-weight:800;}
.join_step li.on i {background:#0d643a;color:#fff;}
.join_step:after {display:inline-block;width:99%;content:"";}

/* tab_join */
.tab_join {display:table;table-layout:fixed;width:100%;margin:-10px 0 50px 0;}
.tab_join li {display:table-cell;text-align:center;}
.tab_join li a {display:block;position:relative;padding:19px 0;font-size:16px;font-weight:800;transition:all 0.4s;}
.tab_join li a:before {position:absolute;left:0;bottom:0;width:100%;height:4px;background:#666;content:"";}
.tab_join li a:after {position:absolute;left:50%;bottom:0;width:0;height:4px;background:#0d643a;content:"";transition:all 0.4s;}
.tab_join li a.on {color:#0d643a;}
.tab_join li a.on:after {left:0;width:100%;}

/* btn_certi */
.btn_certi {margin:48px -8px 0 -8px;}
.btn_certi li {float:left;width:calc(50% - 16px);margin:0 8px;text-align:center;}
.btn_certi li a {display:block;height:70px;border:2px solid #ccc;box-sizing:border-box;color:#1c1c1c;line-height:66px;transition:all 0.4s;}
.btn_certi li span {display:inline-block;position:relative;padding-left:38px;}
.btn_certi li span:before {position:absolute;left:0;top:50%;width:24px;height:35px;margin-top:-17px;background:url(../images/join/ico_btn_certi01.png) center /100% no-repeat;content:"";transition:all 0.4s;}
.btn_certi li.s2 span {padding-left:46px;}
.btn_certi li.s2 span:before {width:33px;background:url(../images/join/ico_btn_certi02.png) center /100% no-repeat;}
.btn_certi li a:hover {border-color:#0d643a;color:#0d643a;}
.btn_certi li a:hover span:before {background:url(../images/join/ico_btn_certi01_on.png) center /100% no-repeat;}
.btn_certi li.s2 a:hover span:before {width:33px;background:url(../images/join/ico_btn_certi02_on.png) center /100% no-repeat;}
.btn_certi:after {display:block;clear:both;height:0;content:"";overflow:hidden;}

/* info_notice */
.info_notice {position:relative;margin:18px 0 20px 0;padding-left:22px;color:#999;font-size:13px;line-height:18px;}
.info_notice:before {position:absolute;left:0;top:1px;width:16px;height:16px;background:#bbb;border-radius:100%;color:#fff;font-size:12px;line-height:16px;text-align:center;content:"!";}

/* sns_list_area */
.sns_list_area {margin-top:36px;}
.sns_list_area .tit {margin-bottom:16px;color:#1c1c1c;}
.sns_list_area .txt {margin:-6px 0 18px 0;font-size:14px;line-height:20px;}
.sns_list_area .list {border:1px solid #ddd;box-sizing:border-box;}
.sns_list_area .list li {border-top:1px solid #ddd;box-sizing:border-box;}
.sns_list_area .list li a {display:table;position:relative;width:100%;height:68px;font-size:16px;line-height:24px;transition:all 0.4s;}
.sns_list_area .list li a i {display:block;position:absolute;left:25px;top:50%;width:38px;height:38px;margin-top:-19px;}
.sns_list_area .list li a i img {width:100%;}
.sns_list_area .list li a span {display:table-cell;padding:0 25px 0 80px;vertical-align:middle;}
.sns_list_area .list li a:hover {background:#f5f5f5;color:#1c1c1c;}
.sns_list_area .list li:first-child {border-top:0;}
.sns_list_area .list.half li {float:left;width:50%;}
.sns_list_area .list.half li:nth-child(2) {border-top:0;}
.sns_list_area .list.half li:nth-child(odd) {border-right:1px solid #ddd;}
.sns_list_area .list.half li a {font-size:14px;line-height:18px;}
.sns_list_area .list:after {display:block;clear:both;height:0;content:"";overflow:hidden;}

/* pw_searchbox */
.pw_searchbox {position:relative;margin-top:40px;padding:25px 25px 25px 80px;background:#f5f5f5;border:1px solid #ccc;box-sizing:border-box;}
.pw_searchbox .t {position:absolute;left:25px;top:32px;color:#1c1c1c;font-size:15px;}
.pw_searchbox:after {position:absolute;left:0;bottom:-25px;width:100%;height:1px;background:#e5e5e5;content:"";}



/** Login **/
.login_area {position:relative;margin-top:33px;}
.input_list .input_ty {height:50px;padding:0 15px;font-size:15px;}
.input_list li {margin-top:10px;}
.input_list li:first-child {margin-top:0;}
.input_list li.info {position:relative;padding-left:18px;color:#ff7800;font-size:13px;line-height:16px;}
.input_list li.info:before {position:absolute;left:0;top:1px;width:13px;height:13px;background:#ff7800;border-radius:100%;color:#fff;font-size:11px;line-height:13px;text-align:center;content:"!";}

.login_btn {margin-bottom:5px;font-size:0;text-align:center;}
.login_btn li {display:inline-block;position:relative;padding:0 1px;}
.login_btn li:before {position:absolute;left:0;top:17px;width:1px;height:14px;background:#ddd;content:"";}
.login_btn li:first-child:before {display:none;}
.login_btn li a {display:block;padding:10px;font-size:15px;transition:all 0.4s;}
.login_btn li a:hover {color:#0d643a;}
.login_area .btn {display:block;height:60px;font-size:20px;font-weight:800;line-height:60px;text-align:center;}


/** form_list_m **/
.form_list_m {margin-top:24px;padding-top:30px;border-top:1px solid #1c1c1c;}
.form_list_m .li {margin-top:25px;font-size:15px;line-height:20px;}
.form_list_m .li:first-child {margin-top:0;}
.form_list_m .input_ty {height:50px;padding:0 15px;font-size:15px;}
.form_list_m ::-webkit-input-placeholder {font-size:15px;}
.form_list_m ::-moz-placeholder {font-size:15px;}
.form_list_m :-ms-input-placeholder {font-size:15px;}
.form_list_m ::placeholder {font-size:15px;}
.form_list_m .select_ty {height:50px;padding:0 15px;background:#fff url(../images/template/ico_select_ty_m.png) right center /39px 5px no-repeat;font-size:15px;}
.form_list_m .li dt {margin:-4px 0 8px 0;color:#1c1c1c; position:relative;}
.form_list_m .li dt i {display:inline-block;position:relative;height:0;font-size:0;line-height:0;vertical-align:top;}
.form_list_m .li dt i:before {position:absolute;left:7px;top:9px;width:4px;height:4px;background:#ff7800;border-radius:100%;content:"";}
.form_list_m .li dt em {display:block;margin-top:10px;color:#666;}
.form_list_m .li dd {position:relative;overflow:hidden;margin-top:5px;}
.form_list_m .li dd:nth-child(1) {margin-top:0;}
.form_list_m .li .mt {position:relative;margin-top:10px;}
.form_list_m .li .txt {display:none;position:relative;margin-top:5px;color:#999;font-size:13px;line-height:20px;}
.form_list_m .li .i1 {padding:0 15px;color:#0d643a;font-size:20px;font-weight:800;}
.form_list_m .li dt .open-btn {width:18px; height:18px; position:absolute; right:10px; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); cursor:pointer; font-size:0;}
.form_list_m .li dt .open-btn:before {content:""; width:10px; height:10px; border:solid #1c1c1c; border-width:0 1px 1px 0; position:absolute; left:0; top:calc(50% - 4px); -webkit-transform:rotate(45deg) translateY(-50%); -moz-transform:rotate(45deg) translateY(-50%); transform:rotate(45deg) translateY(-50%); transition:transform 0.25s;}
.form_list_m .li dt .open-btn.on:before {border:solid #0d468a; border-width:1px 0 0 1px; top:50%;}
.form_list_m .li dd.hide-area {height:0;}
.form_list_m .li dd.hide-area.on {animation:areaOpen 0.7s ease both;}
.form_list_m .li dd.hide-area.close {animation:areaClose 0.7s ease both;}
.form_list_m .li dd.hide-area.active {height:80px;}
@keyframes areaOpen { 0% {height:0;} 100% {height:165px;} }
@keyframes areaClose { 0% {height:165px;} 100% {height:0;} }

/* Btn Type */
.form_list_m .li .btn {position:relative;padding-right:110px;}
.form_list_m .li .btn a {display:block;position:absolute;right:0;top:0;width:100px;height:50px;background:#e5e5e5;border:1px solid #ccc;box-sizing:border-box;color:#1c1c1c;line-height:48px;text-align:center;transition:all 0.4s;}
.form_list_m .li .btn a:hover {background:#ddd;}

/* Triple Type */
.form_list_m .li .triple {margin:0 -10px;}
.form_list_m .li .triple .select_ty,
.form_list_m .li .triple .input_ty {float:left;width:calc(33.3% - 20px);margin:0 10px;}
.form_list_m .li .triple .select_ty:first-child,
.form_list_m .li .triple .input_ty:first-child {width:calc(33.4% - 20px);}
.form_list_m .li .triple:before {position:absolute;left:calc(33.4% - 2px);top:50%;width:5px;height:1px;background:#777;content:"";}
.form_list_m .li .triple:after {position:absolute;left:calc(66.7% - 2px);top:50%;width:5px;height:1px;background:#777;content:"";}

/* Mail Type */
.form_list_m .li .mail {position:relative;margin:0 -17px;overflow:hidden;}
.form_list_m .li .mail .select_ty,
.form_list_m .li .mail .input_ty {float:left;width:calc(45% - 34px);margin:0 17px;}
.form_list_m .li .mail .select_ty:first-child,
.form_list_m .li .mail .input_ty:first-child {width:calc(55% - 34px);}
.form_list_m .li .mail:before {position:absolute;left:calc(55% - 8px);top:0;line-height:50px;content:"@";}

/* terms_box_list */
.terms_box_list {position:relative;padding:0 20px;border:1px solid #ccc;box-sizing:border-box;}
.terms_box_list li {position:relative;padding:12px 2px;border-top:1px solid #e5e5e5;font-size:15px;line-height:19px;}
.terms_box_list li:first-child {border-top:0;}
.terms_box_list li .ez-checkbox {position:absolute;left:0;top:12px;}
.terms_box_list li label {display:inline-block;padding-left:24px;vertical-align:top;}
.terms_box_list li label span {color:#0d643a;}
.terms_box_list li .btn_s {display:block;position:absolute;right:0;top:50%;width:77px;min-width:auto;height:24px;margin-top:-12px;padding:0;background:#fff;border:1px solid #ddd;box-sizing:border-box;font-size:13px;font-weight:100;line-height:22px;text-align:center;transition:all 0.4s;}
.terms_box_list li .btn_s:hover {border-color:#1c1c1c;color:#1c1c1c;}
.terms_box_list.ty02 li {padding-right:85px;}
.terms_box_list.ty02 li.no-line {border:none; padding-top:0; padding-right:0;}
.terms_box_list.ty02 li .sub-chk-list {font-size:0; padding:0 25px; box-sizing:border-box; text-align:center;}
.terms_box_list.ty02 li .sub-chk-list p {display:inline-block; vertical-align:middle; margin:0 10px; font-size:15px; line-height:19px; position:relative;}
.terms_box_list.ty02 li .sub-chk-list p .ez-checkbox {position:absolute;left:0;top:0;}
.terms_box_list.ty02 li .sub-chk-list p label {display:inline-block;padding-left:24px;vertical-align:top;}

/* terms_box_list02 */
.terms_box_list02 {margin-bottom:20px;}
.terms_box_list02:last-child {margin-bottom:0;}
.terms_box_list02 .table_ty {border:solid #ccc;border-width:1px 1px 0 1px;}
.terms_box_list02 .table_ty th {border-right:1px solid #ddd;}
.terms_box_list02 .radio_box {margin-top:-1px;}

/* open_info */
.open_info {margin-bottom:50px;}
.open_info .txt_m {font-size:20px;}
.open_info .txt_m strong {font-weight:900;}
.open_info .txt_m.mt {margin-top:10px;}
.open_info .table_ty {margin:35px 0 60px 0;}
.open_info .table_ty.tbox02 th, .open_info .table_ty.tbox02 td {padding:10px 15px;}

/** Btn **/
/* btn_join */
.btn_join {display:block;position:relative;height:70px;margin-top:55px;padding-left:83px;box-sizing:border-box;color:#fff;font-size:16px;font-weight:100;line-height:69px;}
.btn_join:before {position:absolute;left:24px;top:50%;width:38px;height:24px;margin-top:-11px;background:url(../images/join/ico_btn_join.png) center /100% no-repeat;content:"";}




/*** Footer ***/
.join_footer {padding:35px 0;color:#999;font-size:13px;font-weight:100;line-height:13px;text-align:center;}



@media all and (max-width:580px) {	
/**** wrap ****/
#join_wrap {width:auto;margin:40px 20px;}
	
/*** Header ***/
.join_header {height:70px;}
.join_header h1.logo {top:20px;margin-left:-38px;}
.join_header h1.logo a {width:77px;height:32px;}

	
/*** Container ***/
.join_container {margin-top:40px;}
	
/** Title & Text **/
.tit_m {font-size:28px;line-height:28px;}
.txt_m dd {font-size:15px;line-height:22px;}
	
/* tab_join */
.tab_join {margin:-35px 0 40px 0;}
	
/* btn_certi */
.btn_certi {margin-top:38px;}
.btn_certi li a {height:120px;}
.btn_certi li span {display:inline-block;position:relative;padding:50px 0 0 0;font-size:15px;}
.btn_certi li span:before {position:absolute;left:50%;top:25px;margin:0 0 0 -12px;}
.btn_certi li.s2 span {padding-left:0;}
.btn_certi li.s2 span:before {margin-left:-16px;}
	
	
/* join_step */
.join_step li {min-width:83px;padding:40px 0 0 0;text-align:center;}
.join_step li i {display:block;left:50%;margin-left:-20px;}
.join_step li.on {color:#0d643a;font-weight:800;}
.join_step li.on i {background:#0d643a;color:#fff;}
.join_step:after {display:inline-block;width:99%;content:"";}
	
/** form_list_m **/
.form_list_m .input_ty {padding:0 10px;font-size:14px;}
.form_list_m ::-webkit-input-placeholder {font-size:0;}
.form_list_m ::-moz-placeholder {font-size:0;}
.form_list_m :-ms-input-placeholder {font-size:0;}
.form_list_m ::placeholder {font-size:0;}
.form_list_m .select_ty {padding:0 10px;background:#fff url(../images/template/ico_select_ty_m.png) 110% center /39px 5px no-repeat;font-size:14px;}
.form_list_m .li .txt {display:block;font-size:13px;}
	
/* Triple Type */
.form_list_m .li .triple {margin:0 -5px;}
.form_list_m .li .triple .select_ty,
.form_list_m .li .triple .input_ty {width:calc(33.3% - 10px);margin:0 5px;}
.form_list_m .li .triple .select_ty:first-child,
.form_list_m .li .triple .input_ty:first-child {width:calc(33.4% - 10px);}
.form_list_m .li .triple:before {display:none;}
.form_list_m .li .triple:after {display:none;}
	
/* terms_box_list */
.terms_box_list {padding:0 10px;}
.terms_box_list li label {margin-top:-1px;color:#1c1c1c;font-size:13px;}
.terms_box_list li .btn_s {width:65px;font-size:12px;}
.terms_box_list.ty02 li {padding-right:70px}
	
/* radio_box : Box Type */
.radio_box.ty02 li {padding:0 10px;}
.radio_box.ty02 li label {padding-right:0;background-position:130% center;}
.radio_box.ty02 li.t1 {width:auto;}
	
/* sns_list_area */
.sns_list_area .list.half li {float:left;width:100%;}
.sns_list_area .list.half li:nth-child(2) {border-top:1px solid #ddd;;}
.sns_list_area .list.half li:nth-child(odd) {border-right:0;}
.sns_list_area .list.half li a {font-size:14px;line-height:18px;}
.sns_list_area .list.half li a br {display:none;}
	
/* pw_searchbox */
.pw_searchbox {margin-top:30px;}

/* terms_box_list02 */
.terms_box_list02 .table_ty th, .terms_box_list02 .table_ty td {font-size:13px;line-height:18px;}


/*** Btn ***/
/* btn_join */
.btn_join {margin-top:35px;}
}



@media all and (max-width:450px) {
body.join_ty {background:#fff;}
#join_wrap {min-width:320px;width:auto;margin:0;padding:0 20px;border:0;}
}