@charset "utf-8";


/********************************************************

    공통

********************************************************/

body.no-scroll {overflow: hidden;}
.max_moblie {height:100vh; max-width:1280px; width:100%; margin:0 auto; text-align:center;}


@media screen and (max-width: 1280px) { 
    .padding_mb {padding:0 30px; max-width:100%; }
}

@media screen and (max-width: 768px) { 
    .padding_mb {padding:0 15px;}
}






/********************************************************

    intro

********************************************************/

.intro {}
.intro .int_logo {width:100%; position:absolute; left:0; top:200px; text-align:center;}
.intro .int_logo img {position:relative; margin:0 auto; text-align:center;}
.intro .int_font {position:absolute; width:100%; color:#fff; font-weight:400; font-size:16px; left:0; bottom:50px; text-align:center;}

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

@media screen and (max-width: 1080px) { 
    .intro .int_logo {top:30%;}
    .intro .int_logo img {width:228px;}
    .intro .int_font {font-size:14px; bottom:60px;}
}

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

@media screen and (max-width: 480px) { 
    .intro .int_logo img {width:168px;}
    .intro .int_font {font-size:12px; bottom:40px;}
}








/********************************************************

    login

********************************************************/

.login {padding:50px;}
.login .lg_close {width:100%;}
.login .lg_close a {width:100%; display:flex; justify-content:flex-end;}
.login .lg_close a img {}

.login .lg_logo {width:100%; margin-top:90px;}
.login .lg_logo img {margin:0 auto; text-align:center;}

.login .lg_id {margin:60px 0 40px;}
.login .lg_id li {margin-bottom:15px;}
.login .lg_id li:last-child {margin-bottom:0;}
.login .lg_id li input {border-radius: 10px; border: 1px solid #CCC; background: #FFF; padding:25px; width:100%;}
.login .lg_id li input::placeholder {font-size:20px; font-weight:400; color:#333;}

.login .lg_id li label {display:flex; justify-content:flex-start; align-items:center; font-size:20px; font-weight:400; color:#333; margin-top:21px; width:150px;}
.login .lg_id li label input[type="checkbox"] {display:none;}
.login .lg_id li label input[type="checkbox"] + span {width:150px; height:35px; background:url(/resources/user/mobile/img/icon/login_checkbox.png) no-repeat; display:flex; align-items:center;}
.login .lg_id li label span {padding-left:50px;}
.login .lg_id li label input[type="checkbox"]:checked + span {background:url(/resources/user/mobile/img/icon/login_checkbox_hover.png) no-repeat;}

.login .lg_but {width:100%; background:#004386; font-weight:700; font-size:25px; color:#fff; padding:25px; border-radius:10px;}
.login .lg_but:hover {background:#004386;}

.login .lg_subcon {display:flex; align-items:center; justify-content:center; margin-top:50px;}
.login .lg_subcon li {margin-right:30px;}
.login .lg_subcon li:last-child {margin-right:0; margin-top:-9px;}
.login .lg_subcon li::before {display:block; position:relative; content: ""; width:9px; height:9px; border-radius:50%; background:#aaa; top:15px; left:-20px; z-index:1;}
.login .lg_subcon li:first-child:before {display:none;}

.login .lg_subcon li a {font-size:20px; font-weight:400; color:#333;}
.login .lg_subcon li a:hover {color:#a6165f; font-weight:600;}

@media screen and (max-width: 1400px) { 
    .login .lg_logo {margin-top:70px;}
}

@media screen and (max-width: 1080px) { 
    .login {padding:40px;}
    .login .lg_close a img {width:26px;}

    .login .lg_logo {margin-top:60px;}
    .login .lg_logo img {width:200px;}

    .login .lg_id {margin:40px 0 40px;}
    .login .lg_id li input {padding:20px;}
    .login .lg_id li input::placeholder {font-size:18px;}

    .login .lg_id li label {font-size:18px; margin-top:20px; width:130px;}
    .login .lg_id li label input[type="checkbox"] + span {width:130px; height:30px; background-size:30px;}
    .login .lg_id li label input[type="checkbox"]:checked + span {background-size:30px;}
    .login .lg_id li label span {padding-left:45px;}

    .login .lg_but {font-size:20px; padding:20px;}

    .login .lg_subcon li a {font-size:18px;}
    .login .lg_subcon li:last-child {margin-top:-5px;}
    .login .lg_subcon li::before {width:5px; height:5px; top:13px; left:-16px;}
}

@media screen and (max-width: 768px) {
    .login {padding:30px;}
    .login .lg_close a img {width:24px;}

    .login .lg_logo {margin-top:40px;}
    .login .lg_logo img {width:180px;}

    .login .lg_id li input {padding:17px;}
    .login .lg_id li input::placeholder {font-size:16px;}

    .login .lg_id li label {font-size:16px; width:120px;}
    .login .lg_id li label input[type="checkbox"] + span {width:120px; height:25px; background-size:25px;}
    .login .lg_id li label input[type="checkbox"]:checked + span {background-size:25px;}
    .login .lg_id li label span {padding-left:40px;}

    .login .lg_but {font-size:18px; padding:17px;}

    .login .lg_subcon li {margin-right:25px;}
    .login .lg_subcon li a {font-size:16px;}
    .login .lg_subcon li:last-child {margin-top:-3px;}
    .login .lg_subcon li::before {width:3px; height:3px; top:11px; left:-12px;}
}

@media screen and (max-width: 480px) { 
    .login .lg_logo img {width:150px;}
}

@media screen and (max-width: 320px) { 
    .login .lg_subcon {flex-direction:column; margin-top:30px;}
    .login .lg_subcon li {margin-right:0; margin-bottom:10px;}
    .login .lg_subcon li:last-child {margin-bottom:0; margin-top:0;}

    .login .lg_subcon li::before {display:none;}
}












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

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

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

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