/* 로그인 */
main{ height: 100vh; padding: 25rem; background: #111 url('/images/main/mainBg.jpg?v=1') no-repeat 0 100% / cover; }
.main__img{ justify-self: center; align-self: center; transform: translate(-3.85%, 4.55%); width: 752rem; }
.main__txt{ --inr: 1920; color: #fff; text-shadow: 0 0 10rem rgba(0, 0, 0, 0.2); }
.main__p1{ font-size: clamp(25rem, calc( 70 / var(--inr) * 100vw ), 70rem); font-weight: 700; line-height: 1.33333333; }
.main__p2{ position: relative; top: -2rem; font-size: clamp(20rem, calc( 30 / var(--inr) * 100vw ), 30rem); font-weight: 300; }
.login{display: flex; align-items: center; justify-content: center; padding: clamp(45rem, calc( 90 / var(--inr) * 100vw ), 90rem) clamp(25rem, calc( 40 / var(--inr) * 100vw ), 40rem); background: #fff; border-radius: 10rem; box-sizing: border-box;}
.login__inr{ display: grid; width: 100%; }
.login__logo{ justify-self: center; height: clamp(25rem, calc( 37 / var(--inr) * 100vw ), 37rem); }
.login__id, .login__pass{ border: 1px solid var(--border); border-radius: 4rem; width: 100%; height: clamp(58rem, calc( 65 / var(--inr) * 100vw ), 65rem); padding: 0 43rem; background: no-repeat 19rem 50% / 13rem 15rem; }
:is(.login__id, .login__pass)::placeholder{ font-size: 15rem; font-weight: 300; color: #888; }
.login__id{ margin-top: clamp(30rem, calc( 50 / var(--inr) * 100vw ), 50rem); background-image: url('/images/main/loginId.png') }
.login__pass{ margin-top: clamp(10rem, calc( 16 / var(--inr) * 100vw ), 16rem); background-image: url('/images/main/loginPass.png') }
.login__menu{ margin-top: 24rem; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; font-size: 14rem; font-weight: 300; }
.login__chkbx{ width: 18rem; height: 18rem; cursor: pointer; }
.login__chkbx:not(:checked){ appearance: none; border: 1px solid var(--border); border-radius: 2rem; }
.login__label{ justify-self: start; margin-left: 8rem; color: #444; cursor: pointer; }
.login__findId{ color: #888; }
.login__join{ justify-self: end; color: #888; }
.login__join a{display: inline-block; margin-left: 7rem; text-decoration: underline; color: #444;}
.login__findPass{ position: relative; margin: 0 -2rem 0 30rem; color: #888; }
.login__findPass::before{ content: ''; position: absolute; top: 5rem; left: -15rem; width: 1px; height: 10rem; background: var(--border); }
.login__submit{ margin-top: clamp(20rem, calc( 23 / var(--inr) * 100vw ), 23rem); display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(55rem, calc( 60 / var(--inr) * 100vw ), 60rem); background: #000; border-radius: 3rem; font-size: 16rem; color: #fff; }
main > *:not(.log_img){z-index:2;}
@media(min-width:768px){
	.main__txt{ display: flex; align-items: baseline; gap: 18rem; }
	.login__inr{ max-width: 450rem; }
}
@media(min-width:1280px){
	main{ display: grid;  grid-template: 1fr auto / 1fr 49.45%; }
	.main__txt{ align-self: end; margin: 0 0 106rem clamp(20rem, calc( 60 / var(--inr) * 100vw ), 60rem); }
	.login{ grid-area: 1 / 2 / 3 / 3; }
}
@media(min-width:1536px){
	main{ padding-left: clamp(25rem, calc( 116 / var(--inr) * 100vw ), 116rem); }
}
@media(max-width:1279px){
	main{ display: flex; flex-direction: column; justify-content: center; gap: 10rem; }
	.main__txt, .login{ margin: 0 auto; max-width: 600rem; width: 100%; }
	.main__img{ display: none; }
}