: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);}
#wrapper{width:100%;height:100%}
#wrapper .info_box, 
#wrapper .login_box{width:50%;height:100%;float:left;}
#wrapper .info_box{display:table;background:#020b17;color:#fff;text-align:center;}
#wrapper .info_box .cont{display:table-cell;vertical-align:middle;}
#wrapper .info_box .logo{max-width:100%;max-height:100%;}
#wrapper .info_box .title{font-size:30px;font-weight:400;}
#wrapper .login_box{padding:50px;overflow:auto;}
#wrapper .login_box input.txt{width:100%;height:60px;padding:0 20px;border:0;border-bottom:1px solid #000;font-family:'Roboto', sans-serif;font-size:26px;}
#wrapper .banner_wrap{width:100%;height:205px;text-align:right;}
#main_banner{width:205px;height:205px;display:inline-block;border:1px solid #eee;border-radius:50%;overflow:hidden;}
#wrapper .form{height:100%;}
#wrapper .form_wrap{width:100%;height:calc(100% - 205px);padding:0 90px;display:table;}
#wrapper .form_wrap .cont{width:100%;display:table-cell;vertical-align:middle;}
#wrapper .form_wrap li{width:100%;height:65px;margin-top:55px;padding-left:90px;}
#wrapper .form_wrap .icon_mall{background:url(/common/front/img/login/icon_mall.png) no-repeat left center;}
#wrapper .form_wrap .icon_id{background:url(/common/front/img/login/icon_id.png) no-repeat left center;}
#wrapper .form_wrap .icon_pw{background:url(/common/front/img/login/icon_pw.png) no-repeat left center;}
#wrapper .form-check{text-align:right;font-size:22px;font-weight:300;padding-top:35px;}
#wrapper .form-check input[id="saveid"] + label{display:inline-block;width:25px;height:25px;border:1px solid #000;cursor:pointer;vertical-align:middle;}
#wrapper .form-check input[id="saveid"]:checked + label{background-color:#666;}
#wrapper .form-check input{display:none;}
#wrapper .btn_wrap{text-align:center;height:100px;padding-top:50px;font-family:'Roboto', sans-serif;font-size:22px;}
#wrapper .btn_wrap .btn{padding:10px 50px;text-align:center;border:0;box-shadow:6px 6px 2px #9c9c9c;cursor:pointer;}
#wrapper .btn_wrap .btn:hover{box-shadow:none;margin-right:-6px;margin-bottom:-6px;}
#wrapper .btn_wrap .btn.btn-login{color:#fff;background:#303030;}
#wrapper .btn_wrap_join{margin:0 -10px;padding:0;padding-top:50px;}
#wrapper .btn_wrap_join:after{content:'';display:block;clear:both;}
#wrapper .btn_wrap_join li{width:50%;height:auto;padding:0 10px;float:left;}
#wrapper .btn_wrap_join .btn{display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border:0;color:#fff;cursor:pointer;font-family:'Roboto', sans-serif;font-size:22px;}
#wrapper .btn_wrap_join .btn.btn-login{background:#000;}
#wrapper .btn_wrap_join .btn.btn-join{background:#494949;}

#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;
}