/* CSS1 */
:root {
  --main-color: #5f0580;
  --txt-color: #0e0e0e;
  --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);
}

#main_banner{
  width: 205px;
  height: 205px;
  display: inline-block;
  border: 1px solid #eee;
  border-radius: 50%;
  overflow: hidden;
}

#main_banner.on .bd{
  display: block;
}
#main_banner .bd{
  display: none;
  border: 3px solid red;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/*#main_banner .banner img{max-width:100%;}*/
#main_banner .swiper-pagination,
#main_banner .swiper-button-next,
#main_banner .swiper-button-prev{
  display: none;
}
#main_banner:hover .swiper-pagination,
#main_banner:hover .swiper-button-next,
#main_banner:hover .swiper-button-prev{
  display: block;
}
#main_banner:hover .swiper-button-disabled{
  display: none;
}
#main_banner .swiper-button-disabled{
  display: none;
}
#main_banner .swiper-pagination-bullet{
  width: 12px;
  height: 12px;
  background: #fff;
  opacity: .7;
}
#main_banner .swiper-pagination-bullet-active{
  background: #007aff;
}
#main_banner .swiper-button-prev{
  background-image: url(/common/front/img/login/icon_arrow_l.png);
  opacity: 1;
}
#main_banner .swiper-button-next{
  background-image: url(/common/front/img/login/icon_arrow_r.png);
  opacity: 1;
}

/* 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;
}


/* CSS2 */
#login_wrapper * {
  box-sizing: border-box;
}
#login_wrapper {
  width: 100%;
  height: 100%;
  background: url(/common/front/img/login/bg.png) no-repeat center/100% 100%;
  position: relative;
}
.login_content {
  height: auto;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -673px;
  margin-top: -382px;
}
.login_both {
  display: flex;
  width: 100%;
  box-shadow: 0px 0px 60px 10px gainsboro;
  height: 100%;
  justify-content: center;
}
.login_both * {
  font-family: var(--main-fonts);
  outline: 0;
  border-radius: 0%;
}
.login_txt {
  width: 614px;
  height: 764px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.login_txt * {
  box-sizing: border-box;
}

.login_ad {
  width: 732px;
  height: 764px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_ad_cont {
  width: 456px;
}
.login_ad .cont .logo_div {
  text-align: center;
  margin-bottom: 20px;
}
.login_ad .cont .logo_div img {
  /* width: 150px; */
  max-height: 42px;
  margin-bottom: 14px;
}
.login_ad .cont .logo_div h2 {
  font-size: 18px;
  font-weight: 600; 
}
.txt::placeholder {
  font-family: var(--main-fonts);
}

.btn_wrap .btn-login {
  font-weight: 600;
  margin-top: 26px;
  cursor: pointer;
  border: 0;
  outline: 0;
  width: 456px;
  height: 56px;
  background: linear-gradient(to right, #5f0080, #9308c4);
  color: #fff;
  border-radius: 10px;
}
.btn_wrap {
  margin-bottom: 25px;
}
.btn_wrap_join .item{
  width: 49%;
  float: left;
}
.btn_wrap_join {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.btn_wrap_join .item .btn{
  cursor: pointer;
  border: 0;
  outline: 0;
  width: 100%;
  margin: 20px auto;
  height: 56px;
  text-align: center;
  line-height: 56px;
  background: linear-gradient(to right, #5f0080, #9308c4);
  color: #fff;
  display: inline-block; 
}
.btn_wrap_join .item .btn-join {
  background: #5f0580;
}

#login_img * {
  box-sizing: border-box;
}
#login_img .swiper-slide {
  overflow: hidden;
}
#login_img .swiper-slide img {
  overflow: hidden;
}


/*ad*/
#main_banner {
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0%;
}
.banner_wrap {
  position: relative;
  margin-top: 26px;
}
.login_ad .swiper-pagination,
#main_banner .swiper-button-next,
#main_banner .swiper-button-prev{
  display: block;
}
.login_ad:hover .swiper-pagination,
#main_banner:hover .swiper-button-next,
#main_banner:hover .swiper-button-prev{
  display: block;
}
#main_banner:hover .swiper-button-disabled{
  display: block;
}
#main_banner .swiper-button-disabled{
  display: block;
}
.login_ad .swiper-pagination-bullet{
  width: 12px;
  height: 12px;
  background: #dedede;
  opacity: 1;
  margin: 0 2px;
  width: 8px;
  height: 8px;
  border: none;
}
.login_ad .swiper-pagination-bullet-active{
  background: #666666;
  opacity: 1 !important;
}
#main_banner .swiper-button-prev{
  background-image: url(/common/front/img/login/new/arrow_l.svg);
  opacity: 1;
  left: 15px;
}
#main_banner .swiper-button-next{
  background-image: url(/common/front/img/login/new/arrow_r.svg);
  opacity: 1;
  right: 15px;
}
#main_banner .swiper-button-next, #main_banner .swiper-button-prev {
  filter: drop-shadow(0px 0px 1px gray);
  width: 10px;
  height: 17px;
  background-size: auto;
  margin-top: -8px;
}
.login_ad .swiper-pagination {
  width: 456px;
  position: absolute;
  bottom: -20px;
}

input[type=checkbox] {
  display: none;
  cursor: pointer;
}
input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width: 12px;
	height: 10px;
  box-sizing: border-box;
  padding-bottom: 0px;
  padding-right: 3px;
  margin-right: 6px;
	margin-bottom: 3px;
  vertical-align: bottom;
  color: transparent;
  transition: .2s; 
  outline: 0;
  font-weight: bold;
  background: url(/common/image/arrow/ocheck.svg) no-repeat center center;
}
#login_wrapper input[type=checkbox]:checked + label {
	background:#5f0581;
} 


.btn__wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#myBtn {
  border: 0;
  outline: 0;
  background: #fff;
  color: #969696;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px; 
}
#returnInteg {
  outline: 0;
  border: 0;
  background: #fff;
  font-size: 16px;
  color: #969696;
  display: flex;
  align-items: center;
  font-weight: 600;
  text-underline-offset: 3px;
  text-decoration: underline;
  cursor: pointer;
}
#returnInteg img {
  width: 20px;
  height: 20px;
  filter: grayscale(1);
  margin-right: 4px;
  transform: rotate(180deg);
}
.hank {
  width: 100%;
  background: #fff;
  color: #b1b1b1;
  height: 48px;
  display: block;
  text-align: center;
  line-height: 48px;
} 

#login_wrapper b {
	font-weight: 600;
}
#login_wrapper .txt {
	padding-left: 20px;
	margin-bottom: 15px; 
	outline: 0;
	width: 456px;
	height: 56px;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
}
#login_wrapper .txt:focus, .txt:not(:placeholder-shown) {
	border: 2px solid #630381;
}
#login_wrapper .btn_wrap_join .item .btn {
	border-radius: 7px; 
	margin:0 auto;
}
#login_wrapper .logo_txt {
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	bottom: 63px;
	z-index: 2;
	text-align: center;
}
#login_wrapper .logo_txt p {
	color: #fff;
	font-size: 20px;
	margin-top: 5px;
}
#login_wrapper .form-check {
  text-align: right;
  color: #868686;
  font-size: 15px;
  margin-bottom: 25px;
  justify-content: start;
}
#login_wrapper .form-check > div > label {
	background: #b8b8b8;
	border-radius: 20px;
	padding: 10px 20px;
	color: #fff;
	display: flex;
	align-items: center;
}
#login_wrapper .form-check label{
	color:#fff;
}

















































/* 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;
    margin: 6% auto; 
    border: 1px solid #888;
    width: 500px; 
    height:640px;   
    border:2px solid #5f0080;          
    overflow:hidden;    
    position:relative;  
}
.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;}
.form-check {display:flex;justify-content:flex-end;align-items:center;}
.auto_login_div {margin-left:10px;position:relative;}
.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);}