@charset "utf-8";


/* login */
.login_wrap { background:#f8f9fd; text-align:center; position: relative; min-height:calc(100vh - 62px); z-index:999;}
.login_wrap .lgn {margin:0 auto; box-shadow:0px 0px 75px 0px #cbceda;  background:#fff; height:380px; overflow: hidden; border-radius: var(--radius-1);  width:100%; max-width:700px; position: absolute; top:50%; transform: translate3D(-50%, -50%, 0); left:50%; border:1px solid #eee;}
.login_wrap .lgn.warnning {height:350px; background:url("/resources/img/board/comment/wrn_ico.png") -80px 60% no-repeat; }
.login_wrap .lgn.warnning .lgn_wrap { display: table; height:100%; text-align: center; width:100%;  border-bottom: 5px solid #5d6473;}
.login_wrap .lgn.warnning p {padding:20px; display: table-cell; vertical-align: middle; letter-spacing: -1px; font-size: 28px; word-break: keep-all; font-weight: 600;}
.login_wrap .main_logo { display: block; position: absolute; left: 0; top: -70px; width: 170px; height: 80px; background: url('/resources/img/common/logo_g.png') center/contain no-repeat; }
.login_wrap .lgn .lgn_left { position:relative; width:45%; float: left; background: #88b927; color:#fff; height:100%; display: table;   -webkit-animation: Gradient 5s ease infinite; -moz-animation: Gradient 5s ease infinite; animation: Gradient 5s ease infinite; z-index:1; transition: all .5s ease-out; }
.login_wrap .lgn .lgn_left::after { content: ''; display: inline-block; width: 60px; height: 100%; position: absolute; background: #fff; transform: skew(-9deg); right: -30px;    top: 0;}
.login_wrap .lgn .lgn_left p { padding-right:25px; display:table-cell; padding-bottom: 30px; vertical-align: middle; }
.login_wrap .lgn .lgn_left .ico { background:url("/resources/img/board/comment/lock_ico2.png") center 0 no-repeat; display: inline-block; width:70px; height:70px; padding-bottom:20px;  border-bottom:4px dashed #eee; }
.login_wrap .lgn .lgn_left .txt {line-height:140%;  font-weight: 500; display:block; margin-top:20px; font-size:20px; letter-spacing: -.8px; }
.login_wrap .lgn .lgn_left .txt.fw2 { font-weight: 200;}
.login_wrap .lgn .lgn_left .txt .c_bg {border-bottom: 5px solid #88b927; height: 15px; display: inline-block; font-weight: 600;}
.login_wrap .lgn .lgn_right { float: left; width:55%; padding:80px 0 0; box-sizing: border-box;}
.login_wrap .lgn .lgn_right .lgn_wrap .txt { margin-bottom:30px;  font-size: 40px; font-weight: bold;color:#88b927;}
.login_wrap .lgnDiv {border-radius: var(--radius-1);   width:78%; border:1px solid #ddd; box-sizing: border-box; font-size: 0;margin: 0 auto;text-align: left; margin-top: -1px;}
.login_wrap .lgnDiv label { position:absolute; left:0; top:0; width:1px; height:1px; font-size: 0;}
.login_wrap .lgnDiv .inp, .login_wrap .lgnDiv input[type="text"], .login_wrap .lgnDiv input[type="password"] { border-radius: var(--radius-1); padding: 7px 0 7px 14px; width:100%; font-size: 16px; vertical-align: middle;display: inline-block; background: none;}
.login_wrap .lgnDiv .inp:focus, .login_wrap .lgnDiv input[type="text"]:focus, .login_wrap .lgnDiv input[type="password"]:focus { border-radius: var(--radius-1); }
.login_wrap .lgn_btn {border-radius: var(--radius-1); transition: .3s ease; width:78%; margin: 0 auto; display: block; background:#88b927; color:#fff; text-align:center; padding:12px 0; margin-top:20px; cursor: pointer; border:none;}
.login_wrap .lgn_btn:hover { background:#393f4c}
.login_wrap .login_util { padding: 0 10px; }





/* login2 */
.login2_wrap { background:#f8f9fd; text-align:center; position: relative; min-height:100vh; font-family: 'Montserrat', 'Noto Sans KR'; overflow-x: hidden; overflow-y: hidden;}

.login2_wrap .logo{width: 200px; padding-top: 50px;}
.login2_wrap .logo img.logo_b{width: 100%;}

.login2_wrap .lgn {border-radius: var(--radius-1); overflow: hidden; margin:0 auto; box-shadow:0px 0px 75px 0px #cbceda;  background:#fff; height:600px; max-width:1300px; position: absolute; top:50%; transform: translate3D(-50%, -50%, 0); left:50%; }
.login2_wrap .lgn.warnning {height:350px; background:url("/resources/img/board/comment/wrn_ico.png") -80px 60% no-repeat; }
.login2_wrap .lgn.warnning .lgn_wrap { display: table; height:100%; text-align: center; width:100%;  border-bottom: 5px solid #5d6473;}
.login2_wrap .lgn.warnning p {padding:20px; display: table-cell; vertical-align: middle; letter-spacing: -1px; font-size: 28px; word-break: keep-all; font-weight: 600;}

.login2_wrap .lgn .lgn_left { position:relative; width:45%; float: left; background: #88b927; color:#fff; height:600px; display: table; background:linear-gradient(-45deg, #e5e9ec, #c4cfd8, #e4e7ea) !important; background-size: 200% 200% !important; -webkit-animation: Gradient 5s ease infinite; -moz-animation: Gradient 5s ease infinite; animation: Gradient 5s ease infinite; z-index:1; transition: all .5s ease-out; }
.login2_wrap .lgn .lgn_left .left_img{position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); width: 70%;}
.login2_wrap .lgn .lgn_left .left_img img{width: 100%;}
.login2_wrap .lgn .lgn_left .ico { background:url("/resources/img/board/comment/lock_ico2.png") center 0 no-repeat; display: inline-block; width:70px; height:70px; padding-bottom:20px;  border-bottom:4px dashed #eee; }
.login2_wrap .lgn .lgn_left .txt {line-height:140%;  font-weight: 500; display:block; margin-top:20px; font-size:20px; letter-spacing: -.8px; }
.login2_wrap .lgn .lgn_left .txt.fw2 { font-weight: 200;}
.login2_wrap .lgn .lgn_left .txt .c_bg {border-bottom: 5px solid #1a55d4; height: 15px; display: inline-block; font-weight: 600;}
.login2_wrap .lgn .lgn_right { float: left; width:55%; padding:100px 0 0; box-sizing: border-box;}
.login2_wrap .lgn .lgn_right .lgn_wrap .txt { margin-bottom:20px;  font-size: 40px; font-weight: bold; color:#1a55d4}
.login2_wrap .lgn .lgn_right .lgn_wrap .tit{display: block; line-height: 1.4; margin-bottom: 30px; font-size: 18px;}

.login2_wrap .lgnDiv {border-radius: var(--radius-1); overflow: hidden; height: 60px; line-height: 60px; width:80%; box-shadow: 0px 0px 20px 0px #cbceda; box-sizing: border-box; font-size: 0; margin: 0 auto;text-align: left; margin-top: -1px;position: relative;}
.login2_wrap .lgnDiv::before{content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 100%; background:#1a55d4; }
.login2_wrap .lgnDiv.pw{margin-top: 20px;}
.login2_wrap .lgnDiv p{padding-left: 30px; display: block;}
.login2_wrap .lgnDiv p:first-child{font-size: 15px; font-weight: 500; color: #333; padding: 10px 0 5px 30px; }
.login2_wrap .lgnDiv .inp, .login2_wrap .lgnDiv input[type="text"], .login2_wrap .lgnDiv input[type="password"] { border:none; width:100%; font-size: 15px; color: #717171; font-weight: 300; vertical-align: middle;display: inline-block; background: none; font-family: 'Montserrat', 'Noto Sans KR'; padding:0;}
.login2_wrap .lgnDiv .inp:focus, .login2_wrap .lgnDiv input[type="text"]:focus, .login2_wrap .lgnDiv input[type="password"]:focus {border-radius: var(--radius-1);}
.login2_wrap .lgn_btn {border-radius: var(--radius-1); transition: .3s ease; width:80%; margin: 0 auto; display: block; background:#1a55d4; color:#fff; text-align:center; height: 50px; margin-top:30px; cursor: pointer; border:none; font-family: 'Montserrat', 'Noto Sans KR';}
.login2_wrap .lgn_btn:hover { background:#393f4c}

.login2_wrap .find_btn{width: 80%; margin: 0 auto; display: block; text-align: left; font-size: 14px; color:#717171; margin-top:30px;}
.login2_wrap .find_btn:hover{text-decoration: underline;}


/*sch_pw*/
.sch_pw .lgn .lgn_right{padding: 133px 0;}
/* id/pw찾기 */
.idpwDiv { border: 1px solid #eee; background:#f9f9f9; box-sizing: border-box; padding: 30px; margin-bottom: 35px;}
.idpwDiv .idpw_inp { width: 100%; box-sizing: border-box; background:#fff; border:1px solid #ddd; padding:13px 25px;  font-size: 16px; display:inline-block; vertical-align: middle;}

input{padding:4px;}
input:focus { outline: none !important;}
input.parsley-error, select.parsley-error, textarea.parsley-error { color: initial; border-color: #ff5b57;background: url(/resources/img/sub/ico_warning.png) no-repeat !important; background-size:16px !important; background-position: right 8px center !important;}
input.parsley-error:focus, select.parsley-error:focus, textarea.parsley-error:focus {box-shadow: 0 0 2px 3px rgba(255, 36, 36, 0.4);}

input.parsley-success, select.parsley-success, textarea.parsley-success { color: initial; border-color: #00acac;background: url(/resources/img/sub/ico_success.png) no-repeat !important; background-size:16px !important; background-position: right 8px center !important;}
input.parsley-success:focus, select.parsley-success:focus, textarea.parsley-success:focus {box-shadow: 0 0 2px 3px rgba(0, 172, 172, 0.4);}


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

    .login_wrap .lgn { height:auto; width:90%;}
    .login_wrap .lgn.warnning { height:200px;  background-size: contain;}
    .login_wrap .lgn.warnning p { font-size:20px;}
    .login_wrap .lgn .lgn_left {display:none;}
    .login_wrap .lgn .lgn_left::after {}
    .login_wrap .lgn .lgn_right { width:100%;padding:40px 20px;}
    .login_wrap .lgn .lgn_left p {padding:10px;}
    .login_wrap .lgn .lgn_left .ico { display: none;}
    .login_wrap .lgn .lgn_left .txt { display: none;}
}


@media screen and (max-width:650px){
    .mypage .lgn .lgnDiv label {width: 120px;}
    .mypage .lgnDiv input[type="text"], .mypage .lgnDiv input[type="password"], .mypage .lgnDiv_id, .mypage .lgnDiv .adrs {width: calc(100% - 124px)}
    
    .mypage .lgn .lgnDiv_id input[type="text"], .mypage .lgn .lgnDiv .adrs input[type="text"] {width: 100%;}
    .mypage .lgnDiv .adrs #zip_code {width: calc(100% - 64px);}
    
    /*login2*/
    .login2_wrap .logo{display: none;}
    .login2_wrap .lgn .lgn_left{display: none;}
    .login2_wrap .lgn .lgn_right{float: none; width: 100%; border-radius: 50px; padding: 101px 0;}
    .login2_wrap .lgn .lgn_wrap{width: 92%; margin: 0 auto;}
    
    .login2_wrap .lgnDiv, .login2_wrap .lgn_btn, .login2_wrap .find_btn{width: 95%;}
    .login2_wrap .lgnDiv .inp, .login2_wrap .lgnDiv input[type="text"], .login2_wrap .lgnDiv input[type="password"]{letter-spacing: -1px;}
    .login2_wrap .lgnDiv p{padding-left: 15px;}
    .login2_wrap .lgnDiv p:first-child{padding: 10px 0 5px 15px;}
    .login2_wrap .lgn .lgn_right .lgn_wrap .tit{font-size: 16px;}
    
}