html , body {width:100%; height:100%;}
html{font-size:20px;}
body{font-size:1rem}
button, input {font-size:0.9rem;  border: 0 none;  padding: 0;  margin: 0;  background: transparent;  outline: none;  cursor: pointer;}
#wrap{width:100%; height:100%; color:#093660; line-height:1.5; background:#fff; min-width:1024px;}
#wrap img{max-width:100%;}

.new_login_wrap{position:relative;  width:100%; height:100%; }
.new_login_BX{display: flex; height: 100%;}
.new_login_wrap .login_slide{width:68%; position:relative;}
.new_login_wrap .login_slide .logox{position:absolute; right:1rem; top:-5rem;}
.new_login_wrap .login_slide .slide_text{width:100%;;color:#fff; }
.new_login_wrap .login_slide .slide_text .text{position:absolute; left:2rem; bottom:8rem;  z-index:10;}
.new_login_wrap .login_slide .slide_text .text h2{font-size:3.3rem; font-weight:900; margin-bottom:1rem; line-height:1.1;}
.new_login_wrap .login_slide .slide_text .text p{font-size:1.8rem; font-weight:800; opacity:0.6;}
.new_login_wrap .login_slide .slide_text .box{position: absolute; right: 1rem; top: 1rem; width:16.5rem; height:calc(100vh - 2rem); border-radius:0.5rem; background:rgba(255,255,255,0.7); backdrop-filter: blur(40px); padding:3rem 1.5rem; z-index: 10;}
.new_login_wrap .login_slide .slide_text .box ul{display:flex; justify-content: space-around; gap:1rem; flex-direction: column; height: 100%; color:rgba(8,65,87,0.8); font-size:0.75rem; font-weight:600; }
.new_login_wrap .login_slide .slide_text .box ul li{ padding:0 1.25rem; text-align:center; text-wrap: balance;}
.new_login_wrap .login_slide .slide_text .box ul li h3{font-size:1.8rem; font-weight:900; margin-bottom:1rem;}
.new_login_wrap .login_slide .slide_text .box ul li h3 span{background: url('/images/default/login/login_textBg.jpg') no-repeat 50% 0; background-size: cover;  -webkit-background-clip: text;   -webkit-text-fill-color: transparent;}
.new_login_wrap .login_slide .slide_text .box ul li strong{display:block; color:rgba(8,65,87,1); font-size:0.9rem; }
.new_login_wrap .login_slide .slide_text .box ul li dl{width:70%; margin:0 auto;}
.new_login_wrap .login_slide .slide_text .box ul li dd{display:flex; justify-content: space-between; gap:1.5rem;}
.new_login_wrap .login_slide .slide_text .box ul li dd b{color:rgba(8,65,87,1); font-size:0.9rem;}
.new_login_wrap .login_slide .slide_text .box ul li dd span{white-space: nowrap;}
.new_login_wrap .login_slide .swiper{ height: 100%;}
.new_login_wrap .login_slide .swiper-pagination{bottom:4rem; top:auto; text-align:left; padding-left:2.5rem; z-index:15; }
.new_login_wrap .login_slide .swiper-pagination-bullet{background:#fff; opacity:0.3; width:0.75rem; height:0.75rem; margin:0 1rem 0 0;}
.new_login_wrap .login_slide .swiper-pagination-bullet-active{background:#F4721B; opacity:1;}
.new_login_wrap .login_slide .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.new_login_wrap .login_slide .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 1rem 0 0;}

.new_login_wrap .login_place{position:relative; width:32%; height:100%; display: flex; justify-content: center; flex-direction: column;  padding:0 3rem; background:url('/images/default/login/login_formbg.jpg')no-repeat 50% 50%; background-size:cover;}
.new_login_wrap .login_place h2,
.new_login_wrap .login_place h3{text-align:center;}
.new_login_wrap .login_place h2 img{height:4rem;}
.new_login_wrap .login_place h3{font-size:1.3rem; color:#fff; line-height:1.1; font-weight:700; letter-spacing:-0.03em; margin:1rem 0 1.5rem;}
.new_login_wrap .login_place ul li{display:flex; align-items: center; margin-top:0.6rem; height:3.5rem; line-height:3.5rem; font-size:1rem; border:1px solid #ADB8B7; border-radius:0.5rem; background:#fff; overflow:hidden;}
.new_login_wrap .login_place ul li label{width:3.5rem; padding-left:1.25rem; font-size:0.8rem; font-weight:600; color:#888;}
.new_login_wrap .login_place ul li input{ height:1.75rem; border:none; border-left:1px solid #ADB8B7; padding-left:1.25rem; }
.new_login_wrap .login_place ul li:has( input:focus){border:2px solid #111;}
.new_login_wrap .login_place ul li:has( input:focus) label{color:#111;}
.new_login_wrap .login_place ul li input:focus{border-left-color:#111;}
.new_login_wrap .login_place ul li input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset;  -webkit-text-fill-color: #454545 }
.new_login_wrap .login_place ul li.error{display:block; background:none; border:none; height:auto; line-height:1.2rem; margin-top:0; text-align:center;}
.new_login_wrap .login_place ul li.error p{margin-top:0.6rem; color:#FBAA15 !important;}
.new_login_wrap .login_place .sdre{margin-top:1.5rem; font-size:0.8rem;}
.new_login_wrap .login_place .login_btn{margin:2.75rem 0 1rem;}
.new_login_wrap .login_place .login_btn input{display: flex; align-items: center; justify-content: center; background: linear-gradient(167deg, #FFC79E, #E96B10, #FF974B); color:#fff; font-size:1.4rem !important; font-weight:800; border-radius: 0.5rem; width:100%; height:4.5rem;  }
.new_login_wrap .login_place .btn_bx{display:flex; justify-content: space-between; align-items: center; text-align:center; }
.new_login_wrap .login_place .btn_bx input{letter-spacing:-0.06em; color:#fff; font-size:0.7rem;}
.new_login_wrap .login_place .btn_bx .bar{display:inline-block; width:1px; height:0.6em; background:#fff; opacity:0.5;}
.new_login_wrap .login_place .copy{position:absolute; left:0; bottom:1rem; width:100%; color:rgba(255,255,255,0.5); font-size:0.7rem; font-weight:300; letter-spacing:0; z-index:1; text-align:center;}

.new_login_wrap .login_place .btnGo{margin-top:3.5rem;  padding:1.5rem 0 0; width:100%; border-top:1px solid rgba(255,255,255,0.2); color: #fff; font-size:0.75rem !important;}
@media (max-width:1440px){
	
	.new_login_wrap .login_slide .slide_text .box ul li{padding:0;}
	.new_login_wrap .login_slide .slide_text .text h2{font-size:2.7rem;}
	
	.new_login_wrap .login_place{padding:0 2rem;}
	.new_login_wrap .login_place h2 img{height:3.5rem;}
	.new_login_wrap .login_place .btn_bx{flex-wrap:wrap; justify-content: center; gap:0.25rem 1rem;}
	.new_login_wrap .login_place .btn_bx .bar{display:none;}
}
@media (max-width:1024px){
	.new_login_wrap .login_slide .slide_text .text{bottom:5rem;}
	.new_login_wrap .login_slide .slide_text .text h2{font-size:2rem;}
	.new_login_wrap .login_slide .slide_text .text p{font-size:1.3rem; margin-bottom:2rem;}
	.new_login_wrap .login_slide .slide_text .box{padding:1rem; width:10rem;}
	.new_login_wrap .login_slide .slide_text .box ul li h3{font-size:1.3rem; margin-bottom:0.5rem;}
	.new_login_wrap .login_slide .slide_text .box ul li p{font-size:0.6rem;}
	.new_login_wrap .login_slide .slide_text .box ul li strong,
	.new_login_wrap .login_slide .slide_text .box ul li dd b{font-size:0.7rem; }

	.new_login_wrap .login_place{padding:0 1.5rem;}
	.new_login_wrap .login_place h2 img{height:2.8rem;}
	.new_login_wrap .login_place h3{font-size:0.8rem; }
	.new_login_wrap .login_place ul li{ height: 2.7rem; line-height: 2.7rem;}
	.new_login_wrap .login_place ul li input{padding-left:0.5rem;}
	.new_login_wrap .login_place ul li label{padding-left:0.75rem;}

	.new_login_wrap .login_place .sdre{margin-top:0.75rem;}
	.new_login_wrap .login_place .login_btn{margin-top:1.5rem;}
	.new_login_wrap .login_place .login_btn input{height:3.5rem;}

	.new_login_wrap .login_slide .swiper-pagination{bottom:2rem;}

	.new_login_wrap .login_place .copy{font-size:0.5rem;}
}



.checks {position: relative; line-height: 1rem;} 
.checks input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 }
.checks label{color:#fff;} 
.checks input[type="checkbox"] + label { display: inline-block; position: relative; cursor: pointer; } 
.checks input[type="checkbox"] + label:before { /* 가짜 체크박스 */ content: '\2714'; color: #888; display: inline-block; width: 1rem; /* 체크박스의 너비를 지정 */ height: 1rem; /* 체크박스의 높이를 지정 */ line-height: 1rem; /* 세로정렬을 위해 높이값과 일치 */ margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: #fff; border: 1px solid #eee; border-radius : 0.15rem;} 
.checks input[type="checkbox"] + label:active:before, 
.checks input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
.checks input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */ /* 체크표시 유니코드 사용 */  background: #F27500; border-color: #F27500; color:#fff;}

/* 텍스트 */
.msg_zone{width:25rem; height:25rem; margin-bottom:6rem; display: flex; align-items: center; justify-content: center; background: url("/images/default/main/login_txt_bg.jpg") no-repeat center center; background-size:cover;}
.msg_zone h3{text-align:center; margin-bottom: 1.5rem;}
.msg_zone h3 img{width:13.9rem;}

/*로그인 팝업*/
.listPop{ position: fixed; left: 0; top:0; width:100%; height:100%;  background: rgb(0,0,0,0.6);  z-index:10;}
.listPop .popup{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; width:24rem; border-radius:0.25rem; box-shadow:0 0 10px rgba(0,0,0,0.3);}
.listPop .popup .content_title{position:relative; padding:0.75rem 1rem; background:var(--main); border-radius:0.25rem 0.25rem 0 0;}
.listPop .popup .content_title h3{font-size:1rem; color:#fff;padding:0; margin:0;}
.listPop .popup .content_title a{position:absolute; right :1rem; top:0.75rem; color:#fff; font-size:1.2rem; cursor:pointer;}
.listPop .popup .body-inn{padding:1rem;}
.listPop .popup .tblForm{width:100%; font-size:0.8rem;}
.listPop .popup .tblForm th{padding:0.2rem; font-weight:500; color:var(--green4);}
.listPop .popup .tblForm td{padding:0.2rem;}
.listPop .popup .tblForm input,
.listPop .popup .tblForm textarea{border-radius:0.2rem;}
.listPop .popup .btn_wrap{display:flex; gap:0.5rem; margin-top:1rem;}
.listPop .popup .btn_wrap *{line-height:1.3; padding:0 1rem; height:2rem; border-radius:0.25rem;}
.listPop .popup .btn_wrap .btn_confirm{flex:1}
.listPop .popup .btn_wrap .btn_cancel{width:35%;margin: 0 auto; background:var(--main); color:#fff;}
.listPop .popup .chk_wrap{padding: 0.4rem 0;}

@media (max-width:767px){
	.listPop .popup{width:90vw;}
	.listPop .popup .btn_wrap .btn_cancel{width:auto;}
}


/********************************************************
■ 협력사 로그인 화면
********************************************************/
.new_login_wrap.gwout .login_place{background:url('/images/default/login/login_formbg2.jpg')no-repeat 50% 50%; background-size:cover;}
.new_login_wrap.gwout .login_slide .slide_text .box ul li h3 span{background: url('/images/default/login/login_textBg2.jpg') no-repeat 50% 0; background-size: cover;  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.new_login_wrap.gwout .login_slide .slide_text .box ul{color:rgba(87,34,11,0.8)}
.new_login_wrap.gwout .login_slide .slide_text .box ul li strong,
.new_login_wrap.gwout .login_slide .slide_text .box ul li dd b{color:rgba(87,34,11,1)}

.new_login_wrap.gwout .login_slide .swiper-pagination-bullet-active{background:#7DE5E0}
.new_login_wrap.gwout .login_place p.txt{color:rgba(255,255,255,0.8); padding:0 1rem; margin-bottom:1.5rem; font-size:0.8rem;}

@media (max-width:1620px){
	.new_login_wrap.gwout .login_place p.txt{padding:0;}
}
@media (max-width:1440px){
	.new_login_wrap.gwout .login_place p.txt br{display:none;}
}
/********************************************************
■ 높은 해상도 대비
********************************************************/


@media (min-width:2100px){
	html{font-size:22.2px;}
}
@media (min-width:2400px){
	html{font-size:25px;}
}
@media (min-width:2550px){
	html{font-size:26.5px;}
}
@media (min-width:2880px){
	html{font-size:30px;}
}
@media (min-width:3840px){
	html{font-size:40px;}
}
@media (min-width:5640px){
	html{font-size:60px;}
}
@media (min-width:7640px){
	html{font-size:80px;}
}