/* 공통::s */
:root {
    --main-color: #5f0580;
    --txt-color: #191919;
    --main-fonts: Pretendard,'Noto Sans KR', sans-serif;
    --sub-fonts: 'Roboto', 'Noto Sans KR', sans-serif; 
    --main-letter-spacing: -.3px; 
} 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    font-family: var(--main-fonts);
}
.login_box{
    border-radius: 20px;
    background-color: #fff;
    padding: 40px 20px;
    flex: 1;
}
/* 공통::e */

/* 로그인컨텐츠 영역 */
#login_wrapper {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
}
#login_wrapper .login_inner{
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
}
.login_content{
    display: flex;
    gap: 20px;
    width: 1280px;
    height: 680px;
    margin: 0 auto;
}

/* 메인배너 */
.login_banner{
    width: 550px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}
.login_banner .swiper-slide img {
    width: 100%;
}

/* 로그인 */
.login_ad{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
}
.login_ad .cont .logo_div {
    margin-bottom: 30px;
}
.login_ad .cont .logo_div img {
    max-width: 150px;
    max-height: 42px;
    margin-bottom: 14px;
}
.login_ad .cont .logo_div h2 {
    color: var(--txt-color);
    font-size: 20px;
    font-weight: 600; 
    line-height: 1.25;
}
.txt::placeholder {
    font-family: var(--main-fonts);
}
.id_pw_list li{
    margin-top: 10px;
}
.id_pw_list li:first-child{
    margin-top: 0;
}
.login_ad .form-check{
    color: #949494;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}
.login_ad .form-check-label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
}
.login_ad .txt {
    outline: 0;
    width: 100%;
    padding: 20px 0;
    border: 1px solid #d5d5d5;
    border-radius: 16px;
    text-indent: 20px;
}
.login_ad .txt:focus{
    border: 1px solid #191919;
}
.login_ad select.txt{
    position: relative;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding: 20px;
    text-indent: 0;
    background: url('/common/image/login/arrow-b.png') no-repeat 93% 50%/11px auto;
}
.login_ad select.txt:focus{
    background-position-y: 180deg;
}
.login_ad input[type=checkbox] {
    display: none;
    cursor: pointer;
}
.login_ad input[type=checkbox] + label:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    transition: .2s; 
    background: url('/common/image/login/check-off.svg') no-repeat center center;
}
.login_ad input[type=checkbox]:checked + label:before {
	background: url('/common/image/login/check-on.svg') no-repeat center center;
} 
.btn_wrap {
    margin-top: 20px;
    margin-bottom: 14px;
}
.btn_wrap .item{
    margin-top: 10px;
}
.btn_wrap .item:first-child{
    margin-top: 0;
}
.btn_wrap .btn{
    display: block;
    cursor: pointer;
    border: 0;
    outline: 0;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border-radius: 35px;
    color: #fff;
    padding: 20px;
    transition: 0.3s;
}
.btn_wrap .btn.btn-login{
    background: linear-gradient(to right, #5f0080, #9308c4);    
}
.btn_wrap .btn.btn-join{
    background-color: #949494;
}
.btn_wrap .btn.btn-join:hover{
    background-color: #191919;
}
.btn_wrap_join .item:first-child{
    margin-top: 0;
}
.btn_wrap_join .item .btn-join {
    background: #5f0580;
}
.btn__wrap {
    display: flex;
    justify-content: center;
}
.btn__wrap.type01{
    justify-content: end;
}
#myBtn {
    color: #717171;
    font-weight: 400;
    font-size: 16px; 
}
.find-link{
    color: #717171;
    font-size: 16px;
    font-weight: 300;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 캡차 */
.icon_captcha{
    display: flex;
    gap: 10px;
}
.captcha_box{
    position: relative; 
}
.captcha_box button{
    border: none;
    background-color: #fff;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
}
#captcha_img{
    width: 150px;
    height: 60px;
}
.captcha_re{
    width: 22px;
    height: 22px;
}
.icon_captcha .txt{
    text-indent: 0;
    text-align: center;
}

/* 고객센터 */
.login_service{
    width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.login_service_txt{
    margin-bottom: 40px;
}
.login_service_txt .service_tit{
    font-size: 20px;
    margin-bottom: 20px;
}
.login_service_txt .call_num{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}
.login_service_info{
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 40px;
}
.login_service_info span{
    display: block;
    color: #717171;
    margin-bottom: 20px;
}
.login_service_info p{
    color: #191919;
}
.login_service .copy{
    color: #949494;
    font-size: 12px;
    font-weight: 400;
    text-align: right;
}
.login_app_qr{
    display: flex;
    gap: 30px;
}
.login_app_qr .tit{
    color: #191919;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}
.app-img{
    display: flex;
    gap: 10px;
    position: relative;
}
.no-app{
    position: relative;
	display: flex;
    justify-content: center;
	align-items: center;
	background-color: #f5f5f5;
	color: #717171;
	font-size: 13px;
	font-weight: 400;
	height: 80px;
	text-align: center;    
}
.app-img:before,
.no-app:before{
    content: '';
    position: absolute;
    top: 0;
    right: -15px;
    width: 1px;
    height: 100%;
    background-color: #e6e6e6;
}
.app-list li{
    margin-top: 10px;
}
.app-list li:first-child{
    margin-top: 0;
}
.app-list img{
    border: 1px solid #191919;
    border-radius: 8px;
    height: 35px;
}
.qr-img img{
    border: 1px solid #d7d7d7;
    padding: 2px;
    height: 80px;
}
.login_ad_banner #main_banner {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 20px;
}
.login_ad_banner .swiper-wrapper a{
    display: block;
}
.login_ad_banner .swiper-wrapper a img{
    width: 100%;
}
.login_ad_banner .swiper-pagination-bullet-active{
    background: #666666;
    opacity: 1 !important;
}
.login_ad_banner .ad-swiper-pagination {
    width: 100%;
    margin-top: 6px;
    text-align: center;
}
.login_ad_banner .swiper-pagination-bullet{
    margin: 0 2px;
}

/* 한화몰 전용 */
.login_hh_tit{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.login_hh_tit img{
    max-width: 140px;
}
.hh-login-info{
    margin-top: 10px;
}
.hh-login-info p{
    color: #ef8330;
    font-size: 15px;
    font-weight: 300;
}
.hh-login-info p strong{
    font-weight: 500;
}
.hh_service_info{
    line-height: 1.5;
    margin-bottom: 20px;
}
.hh_service_info p{
    color: #ef8330;
    font-size: 13px;
    font-weight: 500;
}

/* 행크에듀 전용 */
.hank {
    width: 100%;
    background: #fff;
    color: #717171;
    font-weight: 500;
    display: block;
    text-align: center;
    margin-top: 30px;
} 
.hank span{
    color: #00d360;
}
.hank img{
    width: 20px;
    height: 20px;
    vertical-align: bottom;
}

/* 특판전용 */
.special-service-icon{
    margin-bottom: 20px;
}
.special-service-icon a{
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
}
.special-service-icon a img{
    width: 26px;
    height: 26px;
}
.special-service-icon a span{
    margin-left: 6px;
}
.special-login-info{
    margin-top: 10px;
}
.special-login-info p{
    color: #5f0580;
    font-size: 15px;
    font-weight: 300;
}
.special-login-info p strong{
    font-weight: 500;
}


/* The Modal (background) */
.ebcf_modal { /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4);
} 



/* 개인정보 동의 */
.ebcf_modal-content {
  background-color: #fefefe;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%,-50%);
  width: 680px;
  padding: 20px;
}
.ebcf_modal-content ul {
  padding: 20px;
}
.ebcf_modal-content li {
  font-family: 'Roboto' , 'AppleSDGothicNeoM';
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 25px;
}
/* The Close Button */
.ebcf_close {
  color: #aaaaaa;
  float: right;
  display: block;
}
.ebcf_close img {
width: 20px;
height: 20px;
}
.ebcf_close:hover,
.ebcf_close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.form__agree {
  display: flex;
  border-top: 1px solid #191919;
  padding: 14px;
  border-top: 1px solid #191919;
  border-bottom: 1px solid #191919;
}
.form__agree > div {
width: 50%;
}
.confirm {
  width: 100%;
  padding: 14px 0;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.05);
  background: #701e8e;
  font-size: 18px;
  line-height: 22px;
  color: #fff;
  margin-top: 30px;
}
.confirm:disabled {
  background: #8990a0;
  cursor: default;
}
.agree_form label.agree {
margin-left: 22px;
}
.agree_form input[type=checkbox] {
display:none;
}  
.agree_form input[type="checkbox"] + .spanover {
padding-left: 10px;
color:#858484;
position:relative;
font-family: 'AppleSDGothicNeoM';
font-size: 15px;
}
.agree_form input[type="checkbox"] + .spanover:before {
content: '';
position: absolute;
top: 0px;
left: -16px;
width: 20px;
height: 20px;
background: url(/common/image/arrow/unselect.svg) no-repeat center;
cursor: pointer;
border-radius: 0px; 
float: right;
}
.agree_form input[type="checkbox"]:checked + .spanover:before {
background:url('/common/image/arrow/select.svg') no-repeat center center; 
float: right
} 
.agree_form .checkbox {
margin-top: 15px;
}
.content_txt {
  overflow: auto;
  box-sizing: border-box; 
  max-height: 100px;
  margin: 9px 0 0 32px;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #d6d6d6;
  font-family: var(--main-txt);
  font-size: 14px;
  line-height: 22px;
}
.content_txt::-webkit-scrollbar {
  width: 20px;
}
.content_txt::-webkit-scrollbar-thumb {
  height: 42px;
  background: #999;
  border-radius: 10px;
  border: 6px solid #fff; 
}
.content_txt::-webkit-scrollbar-track {
  border-radius: 0 6px 6px 0;
  background-color: transparent;
}
.content_txt p {
  font-family: var(--main-txt);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}















































/* id pw  */


.clearfix * {zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
.clearfix:after {clear: both;}
.modal * {font-family: var(--main-fonts);}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    font-family:"Noto Sans KR";
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    border: 1px solid #888;
    width: 500px; 
    height:640px;   
    border:2px solid #5f0080;          
    overflow:hidden;    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}
.modal_x {cursor:pointer;position:absolute;top:108px;left:456px;width:16px;height:16px;}
/* The Close Button */
.close {
    color: #636363;
    float: right;
    font-size: 14px;
    margin-top:20px;
    margin-right:50px; 
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    margin-right:50px;
}

.find_id p {margin:0;color:black;font-size:20px;font-weight:bold;margin-bottom:10px;margin-top:25px;}
.find_id span {color:#898989;font-size:14px;margin-bottom:16px;display:block;}
.emailf_id, .numberf_id {text-align:center;}
.emailf_id {padding-bottom:20px;border-bottom:1px solid #e8e8e8;}
.step_cate {border-bottom:1px solid #e0e0e0;display:flex;justify-content: space-between;align-items: center;}
.step_cate a {color:#c2c2c2;background:#f6f6f6;display:block;width:50%;text-align:center;height:80px;line-height:80px;font-size:20px;font-weight: bold;color:#c8c8c8;}
.step_cate a.on {color:black;background:#fff;}
.step_cate > a:first-child {border-right:1px solid #e0e0e0;}

.find_id {padding: 0px 50px 0px 50px; }
.ul_form li {position:relative;text-align:center;}
.ul_form li img {width:25px; position:absolute;top:37%;left:25px;transform:translate(-50%,-50%);}
.input_css {outline:0;background-color:#f7f7f7;width:100%;height:40px;border:1px solid #eeeeee;margin-bottom:12px;padding-left:50px;}
.input_css::placeholder {color:#d6d6d6;}

.form_submit {cursor:pointer;outline:0;float:right;width:165px;height:44px;border:0;background:linear-gradient(to right, #5f0080, #9308c4);font-weight:500;color:#fff;font-size:16px;}
.auto_login_caution {display:none;position:absolute;right:1px;top:-66px;width:180px;line-height:15px;padding:11.5px 20px;background:#fff;font-family:'Dotum';letter-spacing:-1px;font-size:12px;text-align:left;border:1px solid #ededed;border-bottom:none;}
.auto_login_caution span {font-family:'Dotum';font-size:12px}
/*페이지 로더*/
*, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; }
#loader_body {width:100%;height:100%;background:rgba(0,0,0,.6);position:fixed;left:0;top:0;display:none;}
/* Loader 2 */
.loader-2 {display: block;height: 32px;width: 32px;
	-webkit-animation: loader-2-1 3s linear infinite;
	        animation: loader-2-1 3s linear infinite;}
@-webkit-keyframes loader-2-1 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-2-1 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.loader-2 span {display: block;position: absolute;top: 0; left: 0;bottom: 0; right: 0;margin: auto;height: 32px;width: 32px;
	clip: rect(16px, 32px, 32px, 0);
	-webkit-animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	        animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;}
@-webkit-keyframes loader-2-2 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-2-2 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.loader-2 span::before {content: "";display: block;position: absolute;top: 0; left: 0;bottom: 0; right: 0;margin: auto;height: 32px;
	width: 32px;border: 3px solid transparent;border-top: 3px solid #FFF;border-radius: 50%;
	-webkit-animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	        animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;}
@-webkit-keyframes loader-2-3 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-2-3 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.loader-2 span::after {content: "";display: block;position: absolute;top: 0; left: 0;bottom: 0; right: 0;margin: auto;height: 32px;width: 32px;
	border: 3px solid rgba(255, 255, 255, .5);border-radius: 50%;}


/* Layout */
.center {display: block;position: absolute;top: 0; left: 0;bottom: 0; right: 0;margin: auto;}
.wrapper {position: relative;width: 100%;max-width: 1000px;height: 100%;margin: 0 auto;}
.loader-list {display: -webkit-flex;display:flex;
	-webkit-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	-webkit-align-content: center;
	        align-content: center;
	position: relative;width: 100%;height: 100%;clear: both;}
.loader-list li {-webkit-flex: 1 1 auto; flex: 1 1 auto;position: relative;display: block;width: calc(100% / 3);height: calc(100vh / 4);}