@charset "utf-8";
/* CSS Document */

#contents_wrap{}
.contents{width:700px; padding:0 50px 100px; margin:0 auto}
.container>h2{padding-right: 90px; padding-bottom: 9px; font-size: 33px; color:#0069b1 !important; font-weight:700}
.enrole_area{width:100%; margin:0 auto}
.enrole_area{position:relative; margin-top:25px}
.enrole_area h3{margin-bottom: 13px; font-size: 22px; font-weight:700}

/*이용약관 및 개인정보취급방침*/
.enrole_area .agree{padding-top:15px;text-align: right;/*font-size:17px;*/font-weight:700;color:#546671}
.enrole_area .agree input{margin-left:3px;margin-top:2px}
.enrole_area .agree label{color:#546671; font-weight:400}
.enrole_area .section + .section{margin-top:50px}
.enrole_area .enrole_cnt{position:relative;overflow-x:hidden;overflow-y:auto;height:220px;padding:30px 28px;/*font-size:16px;*/color:#546671; background:#fff}
.enrole_area .enrole_cnt ul li{line-height:20px}
.enrole_area .enrole_cnt ul.depth01>li{padding-top:23px}
.enrole_area .enrole_cnt ul.depth01>li h4{margin-bottom:25px}
.enrole_area .enrole_cnt ul.depth01>li p{/*font-size:16px;*/ color:#546671}
.enrole_area .enrole_cnt ul.depth01 .bullet01{background:url(../../../../img/co/common/main/bullet01.gif) 0 5px no-repeat; padding-left:20px;line-height:20px}
.enrole_area .enrole_cnt ul.depth01 .title{magin:10px 0}
.enrole_area .enrole_cnt ul.depth01>li:first-child{padding-top:0}
.enrole_area .enrole_cnt ul.depth01>li ul{margin-top:8px}
.enrole_area .enrole_cnt ul.depth02>li{margin-left:16px;/*padding:2px 0;text-indent:-16px;*/}
.enrole_area .enrole_cnt ul.depth03{margin-top:4px !important;margin-left:0px}
.enrole_area .enrole_cnt ul.depth03>li{margin-left:13px;text-indent:-13px}
.enrole_area .enrole_cnt h4{margin-bottom:8px;font-weight:700;font-size:16px}
.enrole_area .enrole_cnt h5{margin-bottom:8px;padding-top:10px;font-weight:700;font-size:16px}
.enrole_area .privacy_cnt h4{/*font-size:17px;*/}
.enrole_area .privacy_cnt h4+div{margin:10px 0 30px;font-weight:300}
.enrole_area .agree_area{padding:18px 34px 27px 31px;text-align:right;/*font-size:17px;*/font-weight:700;border:1px solid #e2e2e2;border-top:none}
.enrole_area .agree_area .agree_form{}
.enrole_area .agree_area input[type=radio]{margin-left:56px}
.enrole_area .agree_area input[type=radio]:first-child{margin-left:0}
.enrole_area .agree_area label{padding-left:7px;/*font-size:17px;*/color:#434343}

/*회원정보 입력*/
.enrole_area .txt_welcome{margin-bottom:38px;text-align:center;/*font-size:19px;*/font-weight:700}
.enrole_area table{text-align:left;border-top:1px solid #e2e2e2;border-right:1px solid #e2e2e2;border-left:1px solid #e2e2e2}
.enrole_area table .th_wdth{width:170px}
.enrole_area table th,
.enrole_area table td{border-bottom:1px solid #e2e2e2}
.enrole_area table th{padding:19px 0 19px 42px;/*font-size:17px;*/font-weight:700}
.enrole_area table td{padding:19px 0 19px 28px;/*font-size:15px;*/}
.enrole_area table input[type=text],
.enrole_area table input[type=email],
.enrole_area table input[type=password]{height:35px;line-height:35px;border:1px solid #535353}
.enrole_area table input[type=text]{}
.enrole_area table input[type=password],
.enrole_area table input[type=email]{width:302px}
.enrole_area table input[type=radio]{margin-right:4px}
.enrole_area table label{margin-right:56px}
.enrole_area table .txt{margin-left:11px;/*font-size:13px;*/color:#888}
.enrole_area .input_id{display:inline-block;position:relative;width:305px;height:37px;line-height:37px}
.enrole_area .input_id div{height:100%;margin-right:95px}
.enrole_area .input_id div input{width:100% !important;vertical-align:top}
.enrole_area .input_id .btn{position:absolute;top:0;right:1px}

.contents {max-width:800px; width:100%; padding:0; padding-bottom:50px}
.container {}
.top_visual {width:100% !important; line-height:0}
.top_visual img {max-width:100%}
.privacy_cnt{margin-top:50px}

.top_color{color:#0069b1; padding-bottom:8px; margin-bottom:20px; font-size:28px}
.guide_tx_area{margin-bottom:20px}
.guide_tx_area ul li{color:#546671;font-size:15px}
.top_color{border-bottom: 3px solid #0069b1}
	

.ctrl_grp {display:inline-block; text-align: left; position: relative}
.ctrl {position:relative; padding-left:23px; cursor:pointer; color:#546671; font-weight:500; vertical-align:top; display:inline-block; /*font-size:16px*/}
.ctrl input {position:absolute; z-index:-1; opacity:0}
.ctrl_indicator {position:absolute; top:3px; left:0; width:16px; height:16px; background:#fff; border: 1px solid #cad1e4}
.ctrl_radio .ctrl_indicator {border-radius:50%}
.ctrl:hover input ~ .ctrl_indicator,
.ctrl input:focus ~ .ctrl_indicator {background:#fff}
.ctrl input:checked ~ .ctrl_indicator {background:#fff}
.ctrl:hover input:not([disabled]):checked ~ .ctrl_indicator,
.ctrl input:checked:focus ~ .ctrl_indicator {background:#fff}
.ctrl input:disabled ~ .ctrl_indicator {pointer-events: none; opacity:.6; background:#e6e6e6}
.ctrl_indicator:after {position:absolute; display:none; content:''}
.ctrl input:checked ~ .ctrl_indicator:after {display:block}
.ctrl_chkbox .ctrl_indicator:after {top:1px;left:5px;width:4px;height:8px;border-color:#7387a7; transform:rotate(45deg); border:solid #7387a7; border-width:0 2px 2px 0}
.ctrl_chkbox input:disabled ~ .ctrl_indicator:after {border-color:#7b7b7b}
.ctrl_radio .ctrl_indicator:after {top:7px; left:7px; width:6px; height:6px; border-radius:50%; background:#fff}
.ctrl_radio input:disabled ~ .ctrl_indicator:after {background:#7b7b7b}

.enrole_wrap{background:#fff;padding:40px 70px 70px 100px;border-radius:0 0 10px 10px}
.enrole_cnt {height:auto; margin-top:25px;border:1px solid #0069b1}
.privacy_cnt {height:auto; margin-top:25px;border:1px solid #0069b1}
.enrole_cnt.privacy_cnt h5 {margin-bottom:15px}
.enrole_cnt .table {border:0; border-top:1px solid #b9c5cc}
.enrole_cnt .table th, .enrole_cnt .table td {text-align:center; border-left:1px solid #b9c5cc; border-bottom:1px solid #b9c5cc; /*font-size:16px;*/ padding:12px 0; line-height:1}
.enrole_cnt .table th {font-weight:700; background:#e8f0f7; padding:7px 0}

.enrole_cnt .table th:first-child, .enrole_cnt .table td:first-child {border-left:0}

.input_list {border-top:1px solid #ddd}
.input_list > li {border-bottom:1px solid #eee; width:100%; display:table; padding:5px 0}
.input_list > li > * {display:table-cell; vertical-align:middle}
.input_list > li > label {padding:0 20px; color:#222; font-weight:700; width:180px; box-sizing:border-box}
.input_list .form_wrap {height:40px}
.input_list input[type='text'], .input_list select {border:1px solid #cad1e4; width:250px; padding:0 10px; box-sizing:border-box; font-family:'MalgunGothic'; height:100%}
.input_list .form_wrap .input_group > input[type='text'] {width:80px}
.input_list .form_wrap .input_group {height:100%}
.input_list .form_wrap .input_group {height:100%}
.input_list .form_wrap .input_group > span{margin-left:15px;color:#555}
.input_list .form_wrap .email {width:140px}
.input_list .form_wrap #email3 {padding:0}
.ctrl_grp .radioselect {color:#546671; border:1px solid #cad1e4; width:120px; background:#fff; height:40px; display:inline-block; text-align:center; padding:3px 0; margin-right:5px; transition:0.3s}
.ctrl_grp .radioselect.on {background:#0069b1; color:#fff} 
.ctrl_grp .radioselect input {position:absolute; z-index:-1; opacity:0}
.enrole_area .bottom_area {margin-top:45px; text-align:center}
.enrole_area .bottom_area .btn_pay {background:#0069b1; font-size:16px !important; display:inline-block; color:#fff;  border:1px solid #0069b1;  font-weight:700; text-align:center; height:58px; width:310px; padding:14px 0; position:relative; border-radius:7px; line-height:1.7em}
.enrole_area .bottom_area .btn_pay > span {border-radius:50%; color:#f71559; right:15px; width:30px; height:30px; background:#fff; text-align:center;  display:inline-block; position:absolute;display:none}
.enrole_area .bottom_area .btn_back {background:#fff;; font-size:16px !important; display:inline-block; border:1px solid #0069b1; color:#0069b1; font-weight:700; text-align:center; height:58px; width:310px; padding:14px 0; position:relative; border-radius:7px; line-height:1.7em}
.enrole_area .bottom_area .btn_back > span {border-radius:50%; color:#0069b1; right:15px; width:30px; height:30px; background:#0069b1; text-align:center;  display:inline-block; position:absolute;display:none}

.email_link {color:#0069b1}
.email_link:hover{text-decoration:underline}

@media all and (max-width:680px){
	.enrole_area h3 {font-size:16px}
	.top_color {font-size:18px}
	.enrole_area .enrole_cnt h4,
	.enrole_area .enrole_cnt h5{font-size:14px}
	.ctrl_grp .radioselect {padding:6px 0}
	.input_list input[type='text'], .input_list select {font-size:14px}
}

@media all and (max-width:640px){
	.input_list > li > label {padding:0 10px; width:80px}
	.input_list .form_wrap .input_group > input[type='text'] {width:100px}
	.input_list .form_wrap .email {width:110px}
}

@media all and (max-width:480px){
	.enrole_area h3 {font-size:13px}
	.top_color {font-size:16px}
	.enrole_area .enrole_cnt {padding:18px 10px}
	.enrole_area .enrole_cnt h4,
	.enrole_area .enrole_cnt h5{font-size:11px}
	.input_list input[type='text'], .input_list select {font-size:11px}
	.ctrl_grp .radioselect {padding:9px 0}
}

@media all and (max-width:479px){
	.input_list input[type='text'], .input_list select {width:100%}
	.input_list > li.phone .form_wrap input {width:calc(100% - 100px)}
	.input_list > li.phone .form_wrap .ex {display:inline-block; width:90px}
	.input_list .form_wrap .email {width:calc(100% - 222px)}
}
@media all and (max-width:420px){
	.input_list .form_wrap .input_group > input {width:calc(100% - 22px)}
	.input_list .form_wrap .email {width:103px}
}
@media all and (max-width:419px){
	.input_list > li > label {width:70px}
	.input_list .form_wrap .input_group > input[type='text'] {width:70px}
}
@media all and (max-width:359px){
	.input_list > li > label {font-size:10px}
	.input_list .form_wrap .input_group > input[type='text'] {width:70px}
	.ctrl_grp .radioselect {width:100px}
	.input_list .form_wrap .input_group > input[type='text'] {width:60px}
	.input_list input[type='text'], .input_list select {padding:0}
	.input_list .form_wrap .email {width:70px}

	.enrole_area .bottom_area .btn_pay {width:280px}
}


/* ====================================================
	///////////////// Modal Style /////////////////
 ==================================================== */
.modal-popup {position:absolute; left: 0; top: 0; width: 100%; height:100%; background:rgba(0,0,0,.4); z-index:1000; display: none; opacity:0; transition:opacity .15s linear; -webkit-transition:opacity .15s linear; -o-transition:opacity .15s linear}
.modal-popup-group {max-width:800px; margin:0 auto; margin-top:100px; background:#fff; padding:30px 4.8%}
.popup-heading {position:relative; border-bottom:2px solid #0069b1; position:relative; margin-bottom:20px}
.popup-heading h4 {font-size:28px; color:#0069b1; font-weight:700; line-height:1; margin-bottom:8px}
.popup-heading .btn-closePopup {position:absolute; right:0; top:-10px}
.popup-body .input_list {border-top:1px solid #ddd}
.popup-body .input_list > li {border-bottom:1px solid #ddd}
.popup-footer {margin-top:40px; text-align:center}
.popup-footer .btn_confirm {background:#0069b1; color:#fff; width:220px; border-radius:7px; font-size:20px; position:relative; display:inline-block; padding:19px 0 21px; line-height:1;border:0}
.popup-footer .btn_confirm > span {color:#fff; right:15px; position:absolute}
.modal-open .modal{padding:0 !important}
.btn_print {border:1px solid #888; line-height:1; background:#eee; color:#555; display:inline-block; padding:4px 14px; border-radius:20px; font-size:14px; text-align:center; margin-top:3px; margin-left:20px}
.btn_print > img {vertical-align:middle; margin-right:5px}
@media all and (max-width:480px){
	.popup-body .input_list {max-height:280px; overflow-y:auto}
}

@media all and (max-width:480px){
	.popup-heading h4 {font-size:18px}
	.popup-heading .btn-closePopup {right:-5px; top:-5px}
	.popup-heading .btn-closePopup > img {transform:scale(0.6)}
	.popup-body .input_list > li > label {padding:0; width:55px}
	.popup-footer {margin-top:20px}

	.btn_print {padding:1px 8px 0; font-size:10px; margin-left:10px}
	.btn_print > img {margin-right:0; transform:scale(0.65)}
}