@charset "utf-8";

/* 피시 숨기고 모바일에 보이기 */
.pcn_mob{ display: none !important;} 
.pcb_mon{} 
@media all and (max-width :767px) {
.pcn_mob{ display:inline-block!important;} 
.pcb_mon{ display: none !important;} 
}


/* 공통 스크롤 디자인 */
.coss_scrollbar{ }
.coss_scrollbar::-webkit-scrollbar { width:10px!important; }
.coss_scrollbar::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 5%, 0.1) !important; border-radius: 100px!important;}




 /* 로그인 */
#wrap_login *{box-sizing: border-box;}
#wrap_login{background: url(../../images/com/login_bg01.png) center repeat; height: 100%; overflow-x: hidden; overflow-y: auto; min-width: 360px;}
#wrap_login .login_guide01{padding: 60px 10%;}

#wrap_login .login_top{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#wrap_login .login_top ul{ display: flex; justify-content: space-between; align-items: center; gap:10px;}
#wrap_login .login_top ul li a{ background-color: #fff;background-position:calc(100% - 12px) center;background-repeat:  no-repeat; border-radius: 80px; line-height: 44px; height: 44px; padding: 0 60px 0 30px; color: #002877; font-weight: 700; box-shadow: 1px 10px 10px rgba(0,39,208,0.08); border: 2px solid #fff; white-space: nowrap;}

#wrap_login .login_top ul li.log_icon01 a{ background-image: url(../../images/com/login_icon01.png);}
#wrap_login .login_top ul li.log_icon02 a{ background-image: url(../../images/com/login_icon02.png);}
#wrap_login .login_top ul li.log_icon03 a{ background-image: url(../../images/com/login_icon07.png);}
#wrap_login .login_top ul li a:hover,
#wrap_login .login_top ul li a:focus{ border: 2px solid #3161f1;box-shadow: 1px 10px 10px rgba(0,39,208,0.3);}

@media all and (max-width :1720px) {
#wrap_login .login_guide01{padding: 50px 5%;}
}
@media all and (max-width :1520px) {
#wrap_login .login_guide01{padding: 30px 5%;}
}
@media all and (max-width :1280px) {
#wrap_login{ background-position:-600px center;}
#wrap_login .login_top ul li a{ line-height: 34px; height: 34px; padding: 0 45px 0 20px; background-size: 25px; font-size: 13px;}
#wrap_login .login_top h1 img{width:150px;}
}

@media all and (max-width :1024px) {
#wrap_login{ background-position:-700px center;}
}

@media all and (max-width :767px) {
#wrap_login{ background-position:-1000px center;}
#wrap_login .login_guide01{padding: 12px 5%; margin-bottom: 30px;}
#wrap_login .login_top ul{ gap:5px; width: 100%; justify-content:center; margin-top: 5px;}
#wrap_login .login_top ul li a{  line-height: 24px; height: 24px; padding: 0 25px 0 10px; background-size: 15px; font-size: 11px; background-position: calc(100% - 5px) center;border: 1px solid #fff;}
#wrap_login .login_top h1 img{width:120px;}
#wrap_login .login_top ul li a:hover,
#wrap_login .login_top ul li a:focus{ border: 1px solid #3161f1;box-shadow: 1px 10px 10px rgba(0,39,208,0.1);}
}
@media all and (max-width :420px) {
#wrap_login{ background-position:-1200px center;}
}




 
 
 #wrap_login .login_text{text-align: center; color: #221055; font-size: 30px; font-weight: 600; margin: 100px 0 0 0; height: 350px;}
 #wrap_login .login_text strong{font-size: 44px; font-weight: 800; display: block; margin: 10px 0 55px 0;}
 #wrap_login .login_text a{background: url(../../images/com/login_icon06.png) left center repeat; display: inline-block; border: 1px solid #c8def6; border-radius: 100px;box-shadow: 1px 15px 15px rgba(0,39,208,0.08);}  
  #wrap_login .login_text a span{background: url(../../images/com/login_icon05.png) 20px center no-repeat; display: inline-block; height: 85px; line-height: 85px; font-size: 26px; color: #002877; font-weight: 800; padding: 0 65px 0 100px;}  
 #wrap_login .login_text a:hover,
 #wrap_login .login_text a:focus{ margin-top: -10px;box-shadow: 1px 15px 15px rgba(0,39,208,0.2);}
 
 @media all and (max-width :1520px) {
 #wrap_login .login_text{ font-size: 28px; height: 300px;margin: 80px 0 0 0;}
 #wrap_login .login_text strong{font-size: 40px;}
}

 @media all and (max-width :1280px) {
 #wrap_login .login_text{ font-size: 24px; height: 300px;margin: 60px 0 0 0;}
 #wrap_login .login_text strong{font-size: 35px;}
 #wrap_login .login_text a span{ height: 70px; line-height: 70px; font-size: 20px; padding: 0 55px 0 90px; background-size: 45px;}  
 }
 
 @media all and (max-width :1024px) {
#wrap_login .login_text{ font-size: 20px; height: 250px;}
#wrap_login .login_text strong{font-size: 26px;}
#wrap_login .login_text a span{ height: 60px; line-height: 60px; font-size: 18px; padding: 0 40px 0 70px; background-size: 40px;}  
}
 @media all and (max-width :767px) {
 #wrap_login .login_text{  height: 150px;margin:30px 0 0 0; font-size: 14px;}
 #wrap_login .login_text strong{font-size: 16px;margin: 5px 0 20px 0;}
#wrap_login .login_text a span{ height: 45px; line-height: 45px; font-size: 15px; padding: 0 30px 0 60px; background-size: 30px; background-position: 10px center;}  

}
  
  
  
 #wrap_login .login_box_guide{margin-bottom: 60px; display: flex; justify-content: space-between; align-items: flex-start; gap:20px;}
 
   
 
/* popupzone */
.login_popupzone{width: 30%;}
.login_popupzone .popupzone{position: relative;display: inline-block; vertical-align: top; border-radius: 0 30px 30px 30px; overflow: hidden;box-shadow: 1px 15px 15px rgba(0,39,208,0.1); width: 100%;}
.login_popupzone .popupzone ul{  position: absolute; top:10px; right:15px; z-index: 2;} 
.login_popupzone .popupzone ul li{font-size:12px; text-align: center; vertical-align:bottom; display: inline-block; height: 28px; line-height: 28px;}
.login_popupzone .popupzone ul li > span{ padding: 0 10px; display: block;}
.login_popupzone .popupzone ul li > span > em{ color: #3161f1; display: inline-block; margin-right: 2px; font-weight: 500;}

.login_popupzone .popupzone ul li button{ display: block; background-repeat: no-repeat; background-position: center; width: 28px; height: 28px;text-align: center;  border: 0; text-indent: -9999px; background: none;}
.login_popupzone .popupzone ul li .pz_prev{background-image: url("../../images/com/popup_btn_prev.png");}
.login_popupzone .popupzone ul li .pz_stop{background-image: url("../../images/com/popup_btn_stop.png");}
.login_popupzone .popupzone ul li .pz_play{background-image: url("../../images/com/popup_btn_play.png");}
.login_popupzone .popupzone ul li .pz_next{background-image: url("../../images/com/popup_btn_next.png");}

.login_popupzone .popupzone > div{ position: relative; overflow: hidden; height: 290px; width: 100%;} 
.login_popupzone .popupzone > div  img{width: 100%;height: 290px;}

 @media all and (max-width :1520px) {
 .login_popupzone .popupzone > div{  height: 213px} 
 .login_popupzone .popupzone > div img{height: 213px;}
}
  
 @media all and (max-width :1280px) {
 #wrap_login .login_box_guide {gap:10px;margin-bottom: 20px;}
 .login_popupzone .popupzone{border-radius: 0 20px 20px 20px;}
}
 @media all and (max-width :1024px) {
  #wrap_login .login_box_guide{flex-wrap: wrap;}
  .login_popupzone{width: calc(50% - 10px); }
  .login_popupzone .popupzone > div{ width: 100%;} 
}
 @media all and (max-width :767px) {
  #wrap_login .login_box_guide {gap:20px;}
.login_popupzone{width: 100%; }
.login_popupzone .popupzone{border-radius: 10px; }
.login_popupzone .popupzone > div{ height: auto;}  
 .login_popupzone .popupzone > div img{height: auto;}
}




 /* notice */
.login_notice {width:40%;}
.login_notice .notice{padding: 30px 50px 0 50px; background: #fff; border-radius: 0 30px 30px 30px; overflow: hidden; height: 290px;box-shadow: 1px 15px 15px rgba(0,39,208,0.1); width: 100%;}

.login_notice .notice h3{display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;}
.login_notice .notice h3 strong{ color: #221055; font-size: 25px; font-weight: 800;background: url(../../images/com/login_icon03.png) left center no-repeat; padding-left: 30px; }
.login_notice .notice h3 a{display: inline-block; padding: 0 10px; font-size: 10px; font-weight: 500; color: #fff; line-height: 20px; height: 20px; background: #3161f1; border-radius: 30px;
}
.login_notice .notice ul{ width: 100%;}
.login_notice .notice ul li a{ display: flex; align-items: center; margin: 15px 0;}
.login_notice .notice ul li a:hover strong,
.login_notice .notice ul li a:focus strong{ color: #0032c8;}

.login_notice .notice ul li span{background: url(../../images/com/point02.png) left center no-repeat;padding-left: 10px; font-size: 14px; font-weight: 500; min-width: 100px;}
.login_notice .notice ul li span > em{ font-size: 14px; font-weight: 500;font-variant-numeric: tabular-nums;}
.login_notice .notice ul li strong{font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; width: 100%; display: block;}

  @media all and (max-width :1520px) {
.login_notice .notice{padding: 20px 30px 0 30px; height: 213px}
.login_notice .notice h3{ margin-bottom: 15px;}
.login_notice .notice h3 strong{ font-size: 16px; background-size: 18px;padding-left: 25px;}

.login_notice .notice ul li a{ margin: 10px 0;}
.login_notice .notice ul li strong{font-size: 14px;}
}
 @media all and (max-width :1280px) {
 .login_notice {width:35%;}
 .login_notice .notice{padding: 20px 25px 0 25px;border-radius: 0 20px 20px 20px;}
}
 @media all and (max-width :1024px) {
 .login_notice {width:50%;}
}
 @media all and (max-width :767px) {
 .login_notice {width:100%;}
 .login_notice .notice{border-radius: 10px; height: auto;padding: 20px 25px;}
 .login_notice .notice ul li span{ min-width: 88px;font-size: 13px;}
 .login_notice .notice ul li span > em{font-size: 13px;}
 .login_notice .notice ul li strong{font-size: 13px;}
}

  
  
  
 
 
 /* phone*/
.login_phone {width: 30%;}
.login_phone .phone{padding: 30px 40px 0 40px; background: #fff; border-radius: 0 30px 30px 30px; overflow: hidden; height: 290px;box-shadow: 1px 15px 15px rgba(0,39,208,0.1); width: 100%;}
.login_phone .phone h3{ margin-bottom: 15px;}
.login_phone .phone h3 strong{ color: #221055; font-size: 20px; font-weight: 800;background: url(../../images/com/login_icon04.png) left center no-repeat; padding-left: 30px;}
.login_phone .phone ul li{margin: 5px 0; white-space: nowrap;}
.login_phone .phone ul li span{ border: 1px solid #a8e3ff; border-radius: 30px; padding: 0 10px; line-height: 22px; height: 22px;  font-size: 12px; display: inline-block; margin-right: 10px; font-weight: 600;} 
.login_phone .phone ul li strong{ color: #221055; font-weight: 800;}
.login_phone .phone ul li:first-child strong{ color: #3161f1; }
 
  @media all and (max-width :1520px) {
 .login_phone .phone{padding: 15px 25px 0 25px; height: 213px;}
 .login_phone .phone h3{ margin-bottom: 5px;}
 .login_phone .phone h3 strong{ font-size: 16px; background-size: 18px; padding-left: 25px;}
 .login_phone .phone ul li{margin: 2px 0}
 .login_phone .phone ul li span{  line-height: 18px; height: 18px;  font-size: 11px;  padding: 0 7px;} 
 .login_phone .phone ul li strong{  font-size: 13px; }
}
@media all and (max-width :1280px) {
 .login_phone {width: 35%;}
 .login_phone .phone{padding: 15px 20px 0 20px;border-radius: 0 20px 20px 20px;}
}


 @media all and (max-width :1024px) {
  .login_phone {width: 100%;}
  .login_phone .phone{padding: 15px 25px;height: auto;}
}  
 
@media all and (max-width :767px) {
.login_phone .phone{border-radius:10px;padding: 15px 20px;}
.login_phone .phone ul li{margin: 7px 0; }
.login_phone .phone ul li span{margin-right: 5px;}
}  

 
 
 
.com_copyright{font-size: 12px; color: #221055; text-align: center; font-weight: 600; position: relative; bottom:0; width: 100%; left:0;  margin-top: 20px;}
 @media all and (max-width :767px) {
.com_copyright{font-size: 11px;position: relative; bottom: 0;}
}
 
 
 
 
 
 
 /* 로그인창 */
#wrap_login .login_box_guide01{margin:120px auto 0 auto;width: 500px; background: #fff; border-radius: 20px; box-shadow: 1px 15px 15px rgba(0,39,208,0.1); padding: 50px;}
#wrap_login .login_box_guide01 h1{ margin-bottom: 30px;text-align: center; }
#wrap_login .blind{display: none;}

#wrap_login .login_box_guide01 input[type=text]{padding: 0 130px 0 15px;height: 55px; line-height: 51px; width: 400px;border: 2px solid #8ebde8; border-radius: 6px; background: #f6fbff; font-size: 15px;font-weight: 500;margin-bottom: 10px; }
#wrap_login .login_box_guide01 input[type=password]{  padding: 0 80px 0 15px;  height: 55px; line-height: 51px; width: 400px;border: 2px solid #8ebde8; border-radius: 6px; background: #f6fbff;font-size: 15px;font-weight: 500;margin-bottom: 25px;}

#wrap_login .login_box_guide01 input::placeholder{ font-weight: 600;color: #4d6983; font-size: 14px;}

#wrap_login .login_box_guide01 .input_id{ position: relative;}
#wrap_login .login_box_guide01 .input_id span{position: absolute; top:0; right:20px; line-height: 55px; color: #678ba7;}
 
#wrap_login .login_box_guide01 .input_pw{position: relative;}
#wrap_login .login_box_guide01 .input_pw .btn_delete{position: absolute; top:18px; right:45px; background: url(../../images/com/icon_close01.png) center no-repeat; width: 20px; height: 20px; background-size: 20px; text-indent: -9999px; display: inline-block; }
 
 #wrap_login .login_box_guide01 .input_pw .btn_pw_view{position: absolute; top:21px; right:15px; background-position: center; background-repeat: no-repeat; width: 20px; height: 14px; background-size: 20px; text-indent: -9999px; display: inline-block;}
 
 #wrap_login .login_box_guide01 .input_pw .btn_pw_view.log_none{background-image: url(../../images/com/login_icon08.png);background-color: #fff;  }
 #wrap_login .login_box_guide01 .input_pw .btn_pw_view.log_show{background-image: url(../../images/com/login_icon08_01.png);background-color: #fff;  }
 
 #wrap_login .login_box_guide01 .btn_login_submit button{background: #3161f1; color: #fff; font-weight: 600; font-size: 13px; line-height: 55px; height: 55px; border-radius: 6px; width: 100%;  box-shadow: 1px 10px 10px rgba(0,39,208,0.2); margin-bottom: 30px;}
  #wrap_login .login_box_guide01 .btn_login_submit button:hover,
  #wrap_login .login_box_guide01 .btn_login_submit button:focus{background: #221055;}
 
 
 .login_input_txt .li_txt01{display: flex; justify-content: space-between; align-items: center;}
 .login_input_txt > div{ display: flex; align-items: center; font-size: 13px;font-weight: 500;}
 .login_input_txt .li_txt01 .li_btn01{display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;}
 .login_input_txt .li_txt01 .li_btn01 span .form_guide {line-height:26px;}
 
 .login_input_txt .li_btn02 a{border: 1px solid #8ebde8; border-radius: 30px; padding: 5px 15px;}
 
 
 #wrap_login .login_box_guide02{margin:60px auto;width: 500px; text-align: center;}
 #wrap_login .login_box_guide02 a{ display: inline-block; background: #22105f; border-radius: 100px; padding: 15px ; width: 300px; font-weight: 700;color: #fff; box-shadow: 1px 10px 10px rgba(0,39,208,0.2); }
 #wrap_login .login_box_guide02 a > span{ display: inline-block; background: url("../../images/com/title_icon03.png") left center no-repeat; padding-left: 20px; background-size: 16px;}
 #wrap_login .login_box_guide02 a:hover,
 #wrap_login .login_box_guide02 a:focus{margin-top: -10px; margin-bottom: 10px;}
 
 
 @media all and (max-width :650px) {
 #wrap_login .login_box_guide01{margin:80px auto 0 auto;width: 100%; padding: 30px;}
 #wrap_login .login_box_guide01 input[type=text]{height: 40px; line-height: 36px; width: 100%; font-size: 14px;padding: 0 100px 0 10px;}
#wrap_login .login_box_guide01 input[type=password]{ padding: 0 65px 0 10px;  height: 40px; line-height: 36px; width: 100%;font-size: 14px;margin-bottom: 15px;}
#wrap_login .login_box_guide01 .input_id span{top:0; right:10px; line-height: 40px; font-size: 13px;}

#wrap_login .login_box_guide01 .input_pw .btn_delete{ top:12px; right:35px; width: 16px; height: 16px; background-size: 16px;}
 
 #wrap_login .login_box_guide01 .input_pw .btn_pw_view{ top:14px; right:10px; width: 18px; height: 12px; background-size: 18px;}
#wrap_login .login_box_guide01 .btn_login_submit button{line-height: 45px; height: 45px;}

.login_input_txt > div{  font-size: 12px;}
 
 #wrap_login .login_box_guide02{margin:30px auto;width: 100%;}
  #wrap_login .login_box_guide02 a{ padding: 12px; width: 240px; font-size: 12px; font-weight: 600;}

 }
 
 
 
 
 
 
 
/* 팁 말풍선*/
.all_tip01{background:#f9f9f9 url("../../images/com/tip_icon02.png") center no-repeat; display: inline-block; width: 16px; height: 16px; text-indent: -9999px;  margin-left: 5px;}

.all_tip01_list{ display: none; position: absolute; border: 1px solid #000; background: #ffffea; border-radius: 10px; box-shadow: -1px -0px 10px rgba(0,0,0,0.3); padding: 20px 15px 15px 15px; font-size: 12px; z-index: 6; white-space: normal!important; width: 300px; font-weight: normal; text-align: left;} 
.all_tip01_list .all_tip01_close{background: url("../../images/com/icon_close02.png") center no-repeat; display: inline-block; width: 16px; height: 16px; background-size: 10px;top:5px; right:5px; position: absolute; text-indent: -9999px;}
@media all and (max-width :767px) {
.all_tip01_list{width: 90%;left:5%;}
}

 
 
 
 
 
 
 
 
 
 
 








/* 로그인에 뜨는 팝업창 & 레이어 */
.popup_wrap *{ box-sizing: border-box;}
.popup_wrap{ background: #fff;overflow: hidden;border: 1px solid #555; position: relative;}

.popup_wrap.mpopup_win{position: relative; z-index: 9999999;width: 400px;}
.popup_wrap.mpopup_layer {border: 1px solid #555; position: absolute;  z-index: 9999999; box-shadow: 1px 5px 10px rgba(0,0,0,0.1); left:0; top:0; width: 300px;}


.popup_wrap img{ width: 100%; height: 100%;}
.popup_wrap .mpopup_all_text{ padding: 5%;}

.popup_wrap .popup_footer{display: flex;align-items: center; padding: 0 10px; justify-content: space-between; font-size: 12px; height: 40px;}
.popup_wrap .popup_footer input{ width: 20px !important; height: 20px!important; margin-right: 5px;}
.popup_wrap .popup_footer button{ padding: 5px 10px; background: #f1f1f1;}

@media all and (max-width:767px){
.popup_wrap{width: 100% !important;}
.popup_wrap .mpopup_layer {width: calc(100% - 2px)!important; left:0 !important; top:0!important;}

.popup_wrap .popup_footer{font-size: 14px;}
.popup_wrap .popup_footer input{ width: 30px !important; height: 30px!important;}
.popup_wrap .popup_footer button{ padding: 0 10px;  height: 32px; line-height: 32px;}
}