@charset "utf-8";

.container_login {position:fixed; top:0; left:0; width:100%; height:100%; min-width:320px; overflow-x:hidden; overflow:hidden;}
.container_login:after {content:''; display:block; clear:both;}
.container_login > div {position:relative; height:100%;}

.bg {float:left; width:450px;}
.bg img {position:absolute; top:0; left:0; width:100%; height:100%;}
.content {float:right; width:calc(100% - 450px); background:#f6f6f6;}
.login_wrap {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:500px;}
.login_wrap * {display:block; width:100%;}
.login_wrap h1 {line-height:200%; color:#262c41; font-family:'gmarket'; font-size:37px; text-align:center; letter-spacing:-3px;}
.login_wrap h1 em {font-size:1.892em; font-weight:900;}
.login_wrap h1 span {display:inline; color:#6e3dff;}

.con input {position:relative; width:100%; height:54px; line-height:54px; margin:27px 0 0; padding:0 0 0 3px; border:none; border-bottom:1px solid #e0e0e0; font-size:19px; font-weight:800; letter-spacing:-1px; background:url(../../images/login/ico_id.png) no-repeat center right 7px;}
.con input + input {margin:20px 0 0; background-image:url(../../images/login/ico_pw.png);}
.check {position:relative; padding:25px 0 35px;}
.check * {display:inline-block; width:auto; font-weight:400; color:#666;}
.check input[type="checkbox"] {opacity:0; width:24px; height:24px; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
.check input[type="checkbox"] + label {position:relative; vertical-align:top; padding:0 0 0 8px; line-height:24px;}
.check input[type="checkbox"] + label:before,
.check input[type="checkbox"] + label:after {content:''; position:absolute; top:50%; left:-24px; width:24px; height:24px; line-height:100%; margin:-12px 0 0; background:url(../../images/login/ico_checkbox.jpg) no-repeat;}
.check input[type="checkbox"] + label:after {display:none; background:url(../../images/login/ico_checkbox_on.jpg) no-repeat;}
.check input[type="checkbox"]:checked + label:after {display:block;}

.info {box-sizing:border-box; padding:15px 0 15px 29px; background:#ebebeb; color:#666; word-break:keep-all;}
.login_wrap button {margin:41px auto 0; width:60%; height:84px; line-height:80px; box-sizing:border-box; border:2px solid #313f47; border-radius:50px; font-size:20px; font-weight:900; text-align:center; color:#313f47;}
.login_wrap button:hover {background:#313f47; color:#fff;}

@media all and (max-width:1280px){
	.bg{width:35%;}
	.content {width:65%;}
	.login_wrap{width:60%; max-width:500px;}
	.login_wrap h1{font-size:31px;}
	
}
@media all and (max-width:1000px){
    .bg {display:none;}
    .content {width:100%; background:url(../../images/login/bg_login.jpg) no-repeat; background-size:cover;}
	.login_wrap{width:65%; max-width:390px; padding:50px 60px 60px; background:#f6f6f6;}
	.login_wrap h1{font-size:28px;}
}

@media all and (max-width:568px){
    .login_wrap {width:260px; padding:40px 9% 50px;}
    .login_wrap h1 {font-size:20px; letter-spacing:-1px;}
	.login_wrap h1 em{letter-spacing:-3px;}
    
    .con input {height:49px; line-height:49px; margin:20px 0 0; font-size:1em;}
    .con input + input {margin:10px 0 0;}
    .check {padding:20px 0 30px;}
    .login_wrap button {height:64px; line-height:60px; margin-top:35px; font-size:1.133em;}
	.info {padding:15px;}
}

@media all and (max-width:380px){
    .login_wrap {width:240px; padding:35px 9% 45px;}
    .login_wrap h1 {font-size:19px;}
    
    .con input {font-size:1em;}
    .login_wrap button {height:54px; line-height:50px; margin-top:30px;}
}


<!-- 학교 검색 팝업창 -->
/* 모달 배경 */
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

/* 모달 내용 */
.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
}

/* 닫기 버튼 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #000;
}

/* 검색창 */
#schoolSearch {
    width: 70%;
    padding: 10px;
    margin: 0;
}

#schoolModal .detail_list .flex_col{
    margin-block: 20px 18px;
}

#searchBtn {
    padding: 10px 20px;
}

/* 학교 목록 */
#schoolList {
    list-style: none;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

#schoolList::-webkit-scrollbar {
    width: 4px;
}

#schoolList::-webkit-scrollbar-thumb {
    background: #888888;
    border-radius: 10px;
}

#schoolList::-webkit-scrollbar-track {
    background: #eeeeee;
}

#schoolList li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

#schoolList li:hover {
    background-color: #f0f0f0;
}

#schoolModal .detail_list .flex_col{
    flex-direction: row;
    align-items: center;
}

#schoolModal .detail_wrap li button{
    width: 100px;
    height: 45px;
    background-color: #2e3b43;
    font-weight: 200;
    color: #fff;
    border-radius: 5px;
}

@media screen and (max-width: 568px) {

    #schoolModal .detail_wrap li button{
        width: 80px;
        height: 32px;
    }
}