@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap') !important;

*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif !important;}
ul,li{list-style: none;}
a{text-decoration: none; color: #333;}

body,html {width:100%; height: 100%;}

body { background-color: rgb(245,245,245);}
.wrap {width: 600px; margin: 0 auto; background-color: #fff;}
.top {position: relative;}
.close {position: absolute; top: 20px; right: 20px; z-index: 99;width: 40px; height: 40px; border-style: none; background: transparent;}
.xi-close {font-size: 30px; cursor: pointer;}
.top h2 {position: absolute; font-size: 2rem; color: #333; top: 10vh; left: 2vh; font-weight: bold;}
.top h3 {text-align: center; font-size: 24px; border-bottom: 1px solid #eee;padding: 25px 0; font-weight: bold;}
.top p {position: absolute; font-size: 1rem; color: #777; top: 15vh; left: 2vh;}

.mustWrap {width: 80%; margin: 20px auto 10px;}
.must {display: inline-block; background-color: rgb(241, 241, 241); padding: 4px 15px; border-radius: 10px; font-size: 13px; color: #777;}

.consent {
    width: 100%;
    position: relative;
    top: 20vh;
}
#cboxAll, #checkbox1, #checkbox2 ,#checkbox3{margin-right: 8px;}
.selectAll > a{width: 96%; margin: 0px auto 20px; box-shadow: 1px 1px 10px rgb(204, 204, 204); border-radius: 10px; display: flex; align-items: center;  background-color: #fff;padding: 0 20px; font-size: 20px; font-weight: bold; }

.select {width: 90%; margin: 0 auto;}
.select li {display: flex; justify-content: space-between; align-items: center; margin: 10px 0; color:#777; font-size: 16px;}


.next {
    position: absolute;
    bottom: 0;
    width: 600px;
    border-style: none;
    background-color: rgb(214, 214, 214);
}
.next a {display: block; padding: 20px 0; font-size: 2rem; color:rgb(185, 185, 185); font-weight: bold;}


input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #aaa;
    appearance: none;
    cursor: pointer;
    transition: background 0.2s;
  }

  input[type="checkbox"]:checked {
    background: #766BFB;
    box-shadow: inset 0px 0px 0px 1px #fff;
  }


/* 전체 동의시 addClass("on") 동작 */
.selectAll > a.on {border: 3px solid #766BFB;}
.next.on{background-color: #766BFB; transition: 0.5s;}
.next a.on{color: #fff;}


.content{width:100%;height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;overflow:hidden;}
/* .container_wrap{margin:50px 0;max-width:768px;min-width:380px; background:#fff;} */

.logo{display:block;margin: 0 auto 40px;max-width:230px;width:100%;}
#title2{display:none;width:100%;text-align: center;}

#saveForm{width:100%;display:flex;flex-wrap:wrap;justify-content:center;}
.tbl-form{width:80%;display:flex;flex-wrap:wrap;justify-content:center;}
.tbl-form li{width:100%;margin:10px 0; padding: 0px 0 10px;}

.reg_tit label{font-family: 'Noto Sans KR', sans-serif!important;font-size:15px;font-weight:700;margin-bottom:10px; color: #777;}

.essential{color:#ff84ac;font-size:12px;margin-left:4px;}
label{display:flex;align-items:center;}
input::placeholder {color: #aaa;}
input[type=radio], #gubun label{font-family: 'Noto Sans KR', sans-serif!important;font-size:14px;line-height:35px;}
.input_box{display:block;position:relative;width:100%;height:46px;background-color: rgb(247, 247, 247);border-radius: 8px;  padding:10px 10px 10px 14px; vertical-align:top;}
#corpAddr{min-height:46px;overflow-y: hidden;resize: none;width:100%; border-style: none; padding:10px 24px 10px 14px;background-color: rgb(247,247,247); border-radius: 8px; vertical-align:top;font-family: 'Noto Sans KR', sans-serif!important;font-size:14px;height:46px;}
.input_box input, select{width:100%;display:block;outline:0;background:transparent;border:none;height:24px;line-height:24px;font-size:14px;font-family: 'Noto Sans KR', sans-serif!important;padding:0!important;}
select{padding-left:10px!important;}

.tui-datetime-input{width:100%!important;}
.tui-datepicker-input{height:46px!important;border:none!important;}

.corpNo .input_box{float:left;width:calc(100% - 110px);}
.corpNo #corpNoButton{font-size:14px;float:right;height:46px;border: 2px solid #766BFB;background: #fff;color:#766BFB;padding:0 10px;border-radius:8px;cursor:pointer;}

.userId .input_box{float:left;width:calc(100% - 110px);}
.userId #userIdButton{font-size:14px;float:right;height:46px;border: 2px solid #766BFB;background: #fff;color:#766BFB;padding:0 10px;border-radius:8px;cursor:pointer;}

.corpAddr{position:relative;}
.corpAddr input{outline:none;width:100%; background-color: rgb(247,247,247); padding: 10px 28px 10px 14px;font-size:14px;font-family: 'Noto Sans KR', sans-serif!important;word-wrap: break-word;}
.corpAddr i.fas{position:absolute;right:7px;top:50%;transform:translateY(-50%);}

#pwInfo01, #pwInfo02{font-size:12px;line-height:14px;margin-top:7px;color:#555;display:block;}

#pwValidation,#corpNo_check, #id_check{font-size:12px;clear:both;display:block;}

.btn_wrap {display: block;}
.btn_right{width: 100%; display:flex;justify-content:center;}
.btn_wrap .btn{width: 50%; display: inline-block;text-align: center;color: #fff!important;padding: 15px 0;font-size: 16px; font-weight: bold; font-family: 'Noto Sans KR', sans-serif!important;}

.privacy_tit{font-family: 'Noto Sans KR', sans-serif!important;font-weight:700;line-height:2;}
.privacy_box{width:100%;height:100px;border:1px solid #ddd;display:block;overflow:scroll;padding:1rem;font-size:12px;font-family: 'Noto Sans KR', sans-serif!important;}


select {color: #777;}


/* button color */
.btn_c1 {background: #766BFB; }
.btn_c2 {background: #204F9D; }
.btn_c3 {background: #777; }
.btn_c4 {background: #e9502a;} 



@media (max-width:1024px) {
	.tbl-form{width:60%;}
	
}


@media (max-width:768px) {
	.tbl-form{width:88%;}    
}

@media (max-width:400px) {
	.tbl-form{width:88%;}
}




@media (max-width: 767px) {
    .wrap {width: 100%; overflow: hidden;}
    .next {width: 100%; overflow: hidden;}
    .next a {font-size: 5vw; padding: 2vw 0;}
}