@charset "utf-8";

/*----------------------------------------
Common
----------------------------------------*/
 
.member-box {  display:flex; justify-content: space-between; align-items:start; }
.member-box  h2 {width:40%;}
.member-box > div {width:60%; max-width:580px;  border:1px solid #dbdbdb; padding:11% 5%;  border-radius: 5px; margin-top:35px;
-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.09);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.09);
-o-box-shadow:0 1px 3px rgba(0,0,0,0.09);
-ms-box-shadow:0 1px 3px rgba(0,0,0,0.09);
box-shadow:0 0 12px rgba(0,0,0,0.09);}


h2.member-title { font-size:48px; font-weight:700; color:#1e1e1e; text-align:center; margin-bottom:50px; line-height:1; }
h2.member-title.long { font-size:50px;}
.h-small { font-size:24px;  color:#767676;  text-align:center; margin-bottom:55px; line-height:1.3;}
h3.member-title { font-size:30px; color:#1e1e1e; text-align:center; padding-bottom:25px; border-bottom:1px solid #777; margin-bottom:40px;}
h4.member-title { font-size:24px; font-weight:500; color:#1e1e1e; text-align:center; margin-bottom:10px;}

.signup_fwrap { max-width:590px; } 
 
@media (max-width:991px) {
 	.member-con { padding:10% 0; }	
}

@media (max-width:801px) { 
	.member-box > div {  margin-top:30px;}
}

@media (max-width:767px) {  
    .member-box {  display:block;}
	.member-box  h2 {width:100%; margin:0 0 40px;} 
    .member-box > div {width:100%; max-width:580px;margin:0 auto } 
     h2.member-title { font-size:50px; margin-bottom:40px; }
    .h-small { font-size:20px;margin-bottom:40px; }
}

@media (max-width:500px) {
 	.member-con { padding:50px 0; }	 
	h2.member-title { font-size:46px;}
    h2.member-title span {padding:0; display:block;}
	.h-small {margin-bottom:30px; }
	.h-small span {display:block;}
}

@media (max-width:400px) {
   .member-box > div { padding:35px 20px 40px 20px;} 
    h2.member-title { font-size:40px;}
}

@media (max-width:319px) {
   .member-box > div { padding:35px 15px 40px 15px;}  
}


/*----------------------------------------
SIGN UP
----------------------------------------*/
/* Terms */
.signup-step { width:100%; max-width:420px; margin:0 auto 45px auto;  }
.signup-step ul {width:100%; display:flex; justify-content:center; align-items:center;  }
.signup-step ul li {width:33.33%; position:relative; text-align:center;}
.signup-step ul li::before { content:""; position:absolute; left:-5px; top:50%; width:11px; height:20px; transform:translateY(-50%); background:url(/assets/img/member/icon_signup_arrow.svg) 0 0 no-repeat;background-size:100%; }
.signup-step ul li:first-child::before {display:none; }
.signup-step ul li span{display:inline-block; width:90px; height:90px;  border:1px solid #dbdbdb;border-radius:50%;   } 
.signup-step ul li span em {font-size:0;}
.signup-step ul li.step_01 span{ background:#fafafa url(/assets/img/member/icon_signup_01_inactive.svg) center 50% no-repeat; background-size:42%;   }
.signup-step ul li.step_01.on span {  background:#2936d6  url(/assets/img/member/icon_signup_01_active.svg) center 50% no-repeat; background-size:42%; border:1px solid #2936d6 ;}
.signup-step ul li.step_02 span{ background:#fafafa url(/assets/img/member/icon_signup_02_inactive.svg) center 50% no-repeat; background-size:42%;   }
.signup-step ul li.step_02.on span {  background:#2936d6  url(/assets/img/member/icon_signup_02_active.svg)  center 50% no-repeat; background-size:42%; border:1px solid #2936d6 ;}
.signup-step ul li.step_03 span{ background:#fafafa url(/assets/img/member/icon_signup_03_inactive.svg) center 50% no-repeat; background-size:42%;   }
.signup-step ul li.step_03.on span {  background:#2936d6  url(/assets/img/member/icon_signup_03_active.svg)  center 50% no-repeat; background-size:42%; border:1px solid #2936d6 ;}

@media (max-width:575px) { 
	.signup-step { margin-bottom:40px;}
	.signup-step ul li span { width:80px; height:80px;}
}

@media (max-width:400px) {
	.signup-step { margin-bottom:35px;}
	.signup-step ul li span { width:65px; height:65px;}
}

@media (max-width:350px) {
	.signup-step ul li span { width:55px; height:55px;}
	.signup-step ul li::before { left:-4px; width:9px; height:18px;}
}


.checkradio-box { position:relative; display:inline-block; cursor:pointer;}

/**sign up add+**/
.xstep_ar {width:200px; height:40px; line-height:40px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap:40px; background:url(/assets/img/member/xstep_line.svg) 50% 50% no-repeat;}
.xstep_ar p {width:40px; height:40px; line-height: 40px; text-align: center; background:#ccc; color:#787878; font-weight:600; font-size: 15px; border-radius: 20px;}
.xstep_ar p.on {color:#fff; background: #2936d6;}
.rtbdim {border-radius: 8px 0 0 8px !important;}
.rtbdim_btn {border-radius: 0 8px 8px 0 !important;}

/* Checkbox */
.checkradio-box .check-text { display:inline-block; font-size:15px; font-weight:500; color:#1e1e1e; padding-left:32px; line-height:1.2;}
.checkradio-box input[type="checkbox"] { overflow:hidden; position:absolute; width:0; height:0; border:0 none; font-size:0; line-height:0; left:-9999px;}
.checkradio-box input[type="checkbox"]+.check-icon { position:absolute; top:50%; left:0; width:24px; height:24px; transform:translateY(-50%); border:0 solid #b7b7b7; border-radius:0; background:url(/assets/img/member/icon_check_gray.svg) no-repeat; background-position: 0 0;}
.checkradio-box input[type="checkbox"]+.check-icon::before { content:''; display:block; position:absolute; top:50%; left:50%; width:14px; height:10px; transform:translate(-50%, -50%);}
.checkradio-box input[type="checkbox"]+.check-icon::after { content:''; display:none; position:absolute; top:50%; left:50%; width:14px; height:10px; transform:translate(-50%, -50%);}
.checkradio-box input[type="checkbox"]:checked+.check-icon {background:url(/assets/img/member/icon_check_blue.svg) no-repeat; background-position: 0 0;}
.checkradio-box input[type="checkbox"]:checked+.check-icon::before { display:none}
.checkradio-box input[type="checkbox"]:checked+.check-icon::after { display:block}
.checkradio-box input[type="checkbox"]:disabled+.check-icon { }


.signup-terms .all-agree {border-top: 1px solid #555; border-bottom: 1px solid #333; padding:15px 0; margin-bottom:30px;}
.signup-terms .all-agree .checkradio-box .check-text { font-size:16px;  font-weight:500; color:#ccc;  }
.signup-terms .all-agree .checkradio-box input[type="checkbox"]+.check-icon {background:url(/assets/img/member/icon_check_gray.svg) no-repeat; background-position: 0 0;}
.signup-terms .all-agree .checkradio-box input[type="checkbox"]+.check-icon::before {}
.signup-terms .all-agree .checkradio-box input[type="checkbox"]+.check-icon::after {}
.signup-terms .all-agree .checkradio-box input[type="checkbox"]:checked+.check-icon {background:url(/assets/img/member/icon_check_blue.svg) no-repeat; background-position: 0 0;}


ul.terms-box { margin-bottom:40px; padding:0 20px;}
ul.terms-box li { display:flex; align-items:center; height:60px; border-radius:8px; background:#272829; padding:0 5px 0 15px; margin-bottom:10px; border:solid 1px #555; }
ul.terms-box li .check-text { font-weight:400; color:#ffff }
ul.terms-box li .check-text strong { color:#fff }
ul.terms-box li a { width:30px; height:100%; display:inline-block; font-size:0; margin-left:auto;  background:url(/assets/img/member/icon_btn_arrow.svg) center 50% no-repeat;background-size:8px; }

.terms-modal-box { width:100%;  height:400px; overflow-y:scroll;  }

@media all and (max-width:1200px){
    .terms-modal-box { height:320px;  }
}


/* Forms */
.iconinfo { width:18px; height:18px; border-radius:50%;border:1px solid #0a0a0a;  background:#fff url(/assets/img/member/icon_btn_question.svg) center 50% / 6px 9px no-repeat;}
.iconinfo em {font-size:0;}
.iconinfo:hover { border:1px solid #2936d6; background:#fff url(/assets/img/member/icon_btn_question_on02.svg) center 50% / 6px 9px no-repeat;}

.member-item { position:relative; margin-bottom:20px; font-size:15px;}
.member-item label { position:relative; display:block; font-size:16px; color:#ccc; font-weight:500; margin-bottom:6px;}
.signin-form .member-item,
.signup-form .member-item {padding:0 0; } 

.member-item .key-info { position:absolute; left:90px; top:2px;}
.member-item .new-info { position:absolute; left:115px; top:2px;}
.member-item .pw-info { position:absolute; left:80px; top:2px;}

.member-btn-line { display:flex; align-items:center;justify-content:center; }
.member-btn-line a {flex:1;  }
.member-btn-line a.bb1 { margin:0 10px 0 0;}
.member-btn-line a.bb2 {margin:0 0 0 10px; }

.signup-terms .member-btn-line {width:100%; padding:0 0; } 
.signup-terms .member-btn-line a {width:100%; margin:0;}
.signup-form .member-btn-line {margin-top:36px;padding:0 0;}
.signup-finish .member-btn-line {margin-top:70px;  }
.signup-finish .member-btn-line a {width:100%; margin:0;}
.signin-form .member-btn-line {width:100%; display:block; padding:0 0; } 
.signin-form .member-btn-line .btn {width:100%; margin:0; display:block; border-radius: 8px; transition:all 0.3s}
ul.terms-box { padding:0 0;}
.member-item .emailbox   {display:flex; justify-content:space-between; align-items:center; }
.member-item .emailbox  .txt{ width:82%;}
.member-item .emailbox  .btn { width:18%; min-width:75px; padding:0;}
.member-item .emailbox  .cert_num {padding:15px 0 0 0;} 

@media (max-width:801px) {  
	.member-item .emailbox  .btn {font-size:14px;}
}

@media (max-width:767px) {  
	.member-item.mb60, .member-item.mb50 { margin-bottom:40px !important;} 
}

@media (max-width:600px) { 
	.signup-finish .member-btn-line {margin-top:50px;}
}

@media (max-width:400px) { 
    .signin-form .member-item,
    .signup-form .member-item {padding:0 2%; } 
	.member-btn-line a {width:50%; margin:0 7px; }
	.member-btn-line a.bb1{ margin:0 7px 0 0;}
	.member-btn-line a.bb2 {margin:0 0 0 7px; }
	.signup-finish .member-btn-line {margin-top:40px;}
	ul.terms-box { padding:0 2%;}
	ul.terms-box li .check-text strong {display:block;}
	.signup-terms .member-btn-line,
	.signup-form .member-btn-line,
	.signin-form .member-btn-line { padding:0 2%; } 	
}

@media (max-width:360px) {  
    .signin-form .member-item,
    .signup-form .member-item {padding:0 ; } 
	.signup-terms .member-btn-line,
	.signup-form .member-btn-line,
	.signin-form .member-btn-line{ padding:0; } 
	ul.terms-box {  padding:0;}
}


/* Finish */
.signup-finish .member-title strong.flex { display:flex; align-items:center; justify-content:center;}
.signup-finish .member-title a { display:block; font-size:0; margin-left:10px;}
.signup-finish p { width:100%; font-size:16px; color:#ccc; }

.signup-finish .key { width:100%; padding:32px 0 0 0;}
.signup-finish .key strong { display:block; font-size:18px; color:#1e1e1e; font-weight:500; letter-spacing:0; text-align:center; background:#fff; padding:23px 15px; border-radius: 8px 8px 0 0; word-break:break-all;  line-height:1.4;}
.signup-finish .key a.copy { width:100%; vtext-align:center; border:1px solid #0a0a0a; font-size:15px; color:#fff; font-weight:500}

@media (max-width:575px) {
	.signup-finish .key strong { font-size:16px; padding:20px 15px; }
}


/*----------------------------------------
SIGN IN
----------------------------------------*/
.signin-form .member-btn-line a.pwfind { width:100%; display:block; font-size:14px; text-align:right; letter-spacing:0; text-decoration:underline; margin:15px 0 60px 0; color:#999; transition:all 0.3s}
.signin-form .member-btn-line a.pwfind:hover {color:#ccc;}
.signin-form .btn_stit {width:100%;font-size: 24px; font-weight:600; color:#FFF; padding:0; line-height:1.4; }
.signin-form .member-item label {display:none; }  

@media (max-width:801px) {
    .signin-form .member-btn-line a.pwfind { margin:15px 0 50px 0;  }
	.signin-form .btn_stit { font-size: 22px;   }
}

@media (max-width:700px) {
	.signin-form .btn_stit { font-size: 20px;   }
}

@media (max-width:400px) { 
	.signin-form .member-btn-line a.pwfind { margin:15px 0 30px 0;  }
	.signin-form .bar { padding:30px 0 0 0;} 
	.signin-form .btn_stit { font-size: 18px; padding:0 2% 7px 2%;   } 
}

@media (max-width:360px) { 
	.signin-form .btn_stit {  padding:0 0 7px 0;   }
}

@media (max-width:320px) {
	.signin-form .btn_stit { font-size: 16px;   }
}



/*----------------------------------------
Forgot Password?
----------------------------------------*/
.member-box.find-pw-wrap .member-item {max-width:420px; margin:0 auto 20px auto;}
.member-box.find-pw-wrap .member-btn-line{max-width:420px; margin:0 auto; }


/* termwrap */
.termwrap { width:100%; padding:50px 20px 30px 20px; margin:0 ;}
.termwrap:after {content:''; display:block; clear:both;}
.termwrap h3 { width:100%;  font-size:30px; line-height:1.2; padding:0 0 30px;  color:#0a0a0a; font-weight:600;  text-align:center;  }
.termwrap h4 { width:100%;  font-size:18px; line-height:1.2; padding:0 0 10px;  color:#0a0a0a; font-weight:600;  }
.termwrap .tstit {width:100%; font-weight:500; } 
.termwrap .tbox {width:100%; padding:16px 0 ; margin:0;  display:block;}
.termwrap .tbox:after {content:''; display:block; clear:both;}
.termwrap .tbox p {width:100%; padding:8px 0;   }
.termwrap .tbox p:after {content:''; display:block; clear:both;}

.termwrap .tbox ul {width:100%; padding:2px 0;  list-style:none; list-style-type :none;}
.termwrap .tbox ul li {width:100% ; padding:6px 0; list-style:none; list-style-type :none;}
.termwrap .tbox ul.dotlist {width:100%; padding:2px 0;  list-style:none; list-style-type :none;}
.termwrap .tbox ul.dotlist li {position:relative; width:100% ; margin:6px 0; padding:0 0 0 18px; list-style:none; list-style-type :none; line-height:1.5;}
.termwrap .tbox ul.dotlist li:before {position:absolute; top:10px; left:5px; content:''; display:inline-block; width:3px; height:3px; border-radius:50%; background:#1e1e1e; }

.termwrap .tbox a {font-weight:500; color:#0a0a0a;}
.modal-body .termwrap { width:100%; padding:20px 0;}

@media all and (max-width:600px){
	.termwrap{ padding:50px 20px 30px 20px;}
	.modal-body .termwrap { padding:40px 0;}
}