@charset "utf-8";
/* CSS Document */

/* reset */
.total_login_wrap *,
.total_login *  {font-family:"Pretendard GOV"; }
* { margin:0; padding:0;} 
ol, ul {list-style:none;}
hr {display:none;}
a {color:inherit;}
a:link, a:visited, a:hover, a:active, a:focus { text-decoration:none; color:inherit; cursor:pointer; }
label{position: absolute;width: 1px;height: 1px;margin: -1px;overflow: hidden;clip-path: polygon(0 0, 0 0, 0 0);}

/*알림창*/
/* .alert{left:85% !important;top:85% !important;position:relative; width:270px; height:140px; background:rgba(255, 255, 255, 0.9); border-radius:5px;} */
.alert{left:85% !important;top:85% !important;position:relative; width:300px; height:500px; background:rgba(255, 255, 255, 0.9); border-radius:5px;}
.alert .top_bar{position:relative; background-color:#2b55a2;  border-radius:5px 5px 0 0;}
.alert .top_bar h3{padding-left:20px; line-height:36px; font-size:15px; color:#fff;  font-family:'NanumBold';}
.alert .top_bar p{position:absolute; top:7px; right:20px; }
.login {position:relative;}
.login .user_img{width:57px; height:57px; padding:20px 0 0 20px;}
.login .user_img img{width:100%; height:100%;}
.login .user_txt{position:absolute; top:29px; left:90px; font-size:14px; letter-spacing:-1px; font-family:'Nanum';}
.login .user_txt span{font-size:16px; }
.alert .btn_more{position:absolute; right: 20px; bottom:15px; width:40px; line-height:20px; text-align:center; color:#000; background-color:#ddd; font-size:13px; font-family:'Nanum';}

.alert2{background:rgba(255, 255, 255, 0.9); border-radius:5px;}
.alert2 .top_bar{position:relative; background-color:#2b55a2;  border-radius:5px 5px 0 0;}
.alert2 .top_bar h3{padding-left:20px; line-height:36px; font-size:15px; color:#fff;  font-family:'NanumBold';}
.alert2 .top_bar p{position:absolute; top:7px; right:20px; }
.alert2 .btn_more{position:absolute; right: 20px; bottom:15px; width:40px; line-height:20px; text-align:center; color:#000; background-color:#ddd; font-size:13px; font-family:'Nanum';}

/* 통합로그인 */
.total_login{position:relative;width:100%;height:auto; min-height:100vh;overflow:hidden;}
.total_login:before{position:fixed;top:50%;left:50%;width:100vw;height:100%;-webkit-transform:translate(-50%, -50%) scale(1.5);transform:translate(-50%, -50%) scale(1.5);background:url('/images/co/lo/total_login_bg.png') no-repeat center/cover;content:"";z-index:-1;-webkit-transition:transform 3s;transition:transform 3s;}
.shOn .total_login:before{-webkit-transform:translate(-50%, -50%) scale(1.05);transform:translate(-50%, -50%) scale(1.05);}
.total_login_wrap{opacity:0;-webkit-transform:translateY(2.5rem);transform:translateY(2.5rem);-webkit-transition:opacity .5s, transform .5s;transition:opacity .5s, transform .5s; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; gap:2rem;}
.shOn .total_login_wrap{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
.total_login_wrap h1{display:block;text-align:center;font-weight:700;font-size:1.75rem;color:#fff;text-align:center;}
.total_login_wrap .login_tab_wrap{position:relative; width:45rem;height:23rem; margin:0 auto;background:#fff;border-radius:2.5rem;overflow:hidden;}
.total_login_wrap .login_tab_wrap h2[class^="login_tab"]{height:4rem;background:#f3f4f4;color:#555;font-size:1rem;font-weight:500;word-break:keep-all;text-align:center;float:left;width:33.333%;}
.total_login_wrap .login_tab_wrap h2[class^="login_tab"]:not(.on) +  .login_con + h2[class^="login_tab"]:not(.on){border-left:1px dotted #bfc1c6;}
.total_login_wrap .login_tab_wrap h2.on{background:#fff; display:flex; flex-direction:column;}
.total_login_wrap .login_tab_wrap h2 > a{display:table;table-layout:fixed;width:100%;height:100%;padding:0 .5rem;}
.total_login_wrap .login_tab_wrap h2 > a > span{display:table-cell;width:100%;vertical-align:middle; font-weight:600;}
.total_login_wrap .login_tab_wrap h2 > div{display:table;table-layout:fixed;width:100%;height:100%;padding:0 .5rem;}
.total_login_wrap .login_tab_wrap h2 > div > span{display:table-cell;width:100%;vertical-align:middle;}
.total_login_wrap .login_con{display:none; height:calc(100% - 4rem); width:100%;}
.total_login_wrap .login_con.on{display:block;}

.total_login_wrap .login_box{position:relative;height:100%;width:100%;}
.total_login_wrap .login_box:before{position:absolute;left:0;top:0;width:20.95rem;height:100%;background:url('/images/co/lo/total_login_deco.png') no-repeat center/cover;content:"";}
.total_login_wrap .login_box .box h3{display:block;font-size:1.75rem;font-weight:700;color:#28304a;text-align:center;line-height:1;}
.total_login_wrap .login_box .login_frm{margin-top:1.25rem;}
.total_login_wrap .login_box .login_frm > li{position:relative;padding:.25rem 0;}
.total_login_wrap .login_box .login_frm > li input{position:relative;display:block;width:100%;height:2.5rem;padding:0 .5rem 0 2.5rem;background:#f5f7f8;color:#555;font-size:.7rem;border-radius:.5rem;overflow:hidden;-moz-appearance:none;-webkit-appearance:none;appearance:none;border:0;}
.total_login_wrap .login_box .login_frm > li input::-ms-expand{display:none;}
.total_login_wrap .login_box .login_frm > li:before{position:absolute;z-index:1;top:50%;left:.75rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:20px;height:20px;background-image:url(/images/co/lo/login_frm_ico.png);background-size:40px 20px;background-position:0 0;background-repeat:no-repeat;content:"";}
.total_login_wrap .login_box .login_frm > li.login_pw:before{background-position:-20px 0;}
.total_login_wrap .login_box .login_frm2{margin:0rem auto;text-align:center; display:flex; flex-direction:column; gap:0rem;}
.total_login_wrap .login_box .login_frm2 > li > a{display:inline-block; }
.total_login_wrap .login_box .login_frm2 > li > a > img{display:block; max-width:100%; }
.total_login_wrap .login_box .login_until{margin-top:1rem;text-align:center; display:flex; align-items:center; justify-content:center;}
.total_login_wrap .login_box .login_until > li{position:relative;display:inline-block;/* padding:0 1rem; */color:#333;font-size:.7rem; flex:1;}
.total_login_wrap .login_box .login_until > li + li:before{position:absolute;top:50%;left:0;width:1px;height:.85rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-left:1px dotted #c9c9c9;content:"";}
.total_login_wrap .login_box .login_until > li > a{display:block;}
.total_login_wrap .copy{display:block;margin-top:-1rem;color:#fff;font-size:.7rem;text-align:center;}
/* 로그인 영역 버튼 */
.total_login_wrap [class^="btn_"]{position:relative;display:inline-block;width:100%;height:2.5rem;margin-top:.25rem;color:#fff;font-size:0.8rem;line-height:2.5rem;text-align:center;border-radius:.5rem;overflow:hidden; font-weight:600; padding:0 2rem;}
.total_login_wrap [class^="btn_"]:before{position:absolute;top:0;left:110%;width:150%;height:100%;-webkit-transform:skewX(-0.06turn);transform:skewX(-0.06turn);-webkit-transition:left .3s;transition:left .3s;content:"";}
.total_login_wrap [class^="btn_"] > span{position:relative;z-index:1;}
.total_login_wrap [class^="btn_"] > span > i {margin-right: 0.5rem; vertical-align: middle; font-size: 1rem;}
.total_login_wrap .btn_login {background: #465cbd;}
.total_login_wrap .btn_login:before {background: #2d3654;}
.total_login_wrap .btn_back {background: #59658e;}
.total_login_wrap .btn_back:before {background: #4d5369;}
.total_login_wrap .btns {margin-top: 0rem;}
.total_login_wrap .btns [class^="btn_"] {max-width: 20rem;}

/* id pw 찾기 */
.total_login_wrap.find_login_wrap .login_box{padding:2rem 3rem 0 3rem; }
.total_login_wrap.find_login_wrap .login_box:before{display:none; }
.total_login_wrap.find_login_wrap .login_tab_wrap{max-width:90%; height:37.5rem; }
.total_login_wrap.find_login_wrap .login_tab_wrap h2[class^="find_tab"]{height:4rem;background:#f3f4f4;color:#555;font-size:1rem;font-weight:500;word-break:keep-all;text-align:center;float:left;width:50%;}
.total_login_wrap.find_login_wrap .login_tab_wrap h2[class^="find_tab"]:not(.on) +  .login_con + h2[class^="login_tab"]:not(.on){border-left:1px dotted #bfc1c6;}
.total_login_wrap.find_login_wrap .login_tab_wrap h2.on{background:#fff;}
.total_login_wrap.find_login_wrap .login_tab_wrap h2 > a{display:table;table-layout:fixed;width:100%;height:100%;padding:0 .5rem;}
.total_login_wrap.find_login_wrap .login_tab_wrap h2 > a > span{display:table-cell;width:100%;vertical-align:middle;}
.total_login_wrap.find_login_wrap .find_con{position:absolute;top:4rem;left:0;width:100%;height:calc(100% - 4rem);display:none;}
.total_login_wrap.find_login_wrap .find_con.on{display:block;}
.total_login_wrap.find_login_wrap .login_box .notice{margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px dashed #ddd; }
.total_login_wrap.find_login_wrap .login_box table{text-align:left; }
.total_login_wrap.find_login_wrap .login_box .box h3{margin-bottom:1rem; font-size:1rem; text-align:left; }
.total_login_wrap.find_login_wrap .login_box .blue{display:inline-block; padding:.5rem 1rem; background:#1f41b5; color:#fff; border-radius:.5rem; overflow:hidden; }
.total_login_wrap.find_login_wrap .login_box .grey{display:inline-block; padding:0 1rem; background:#4e4e4e; line-height:38px; color:#fff; border-radius:.25rem; overflow:hidden; vertical-align:middle; }

/* 회원가입 */
.total_join_wrap .login_tab_wrap{padding:2rem; height:auto !important; }
.total_join_wrap [class^="btn_style"]{color:#fff; }
.total_join_wrap .btn_style7{color:#000 !important; }
.total_join_wrap .sbscrbStep{padding:0; }
.total_join_wrap .TypeBox{float:none; }
.total_join_wrap .sbscrbStep .crtfcBtn a{padding:.5rem; }

/* .total_login_wrap .login_tab_wrap{height: 21.5rem;} */
.total_login_wrap .login_con{top: 4rem; position:absolute;}
.total_login_wrap .login_box{padding:1rem 3rem 1rem 26rem; display:flex; justify-content:center; flex-direction:column; align-items:center;}
.total_login_wrap .login_box > .box {width:100%; display:flex; flex-direction:column; gap:1rem;}


/* 교직원로그인 251209 */
.total_login_wrap .login_section {display:flex; width:100%; height:100%; flex-wrap:wrap;}
.total_login_wrap .login_section .login_list {position:relative; flex:1 1 50%; height:100%; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-start; padding:2rem 3rem;}
.total_login_wrap .login_section .login_list:before {content:''; position:absolute; right:0; top:50%; transform:translate(0, -50%); width:1px; height:calc(100% - 4rem); background:#ddd;}
.total_login_wrap .login_section .login_list:last-child:before {display:none;}


/* 교직원 로그인 260106 추가 */
.staff-wrap {padding:2.5rem 3rem; height:100%;}
.staff-wrap .staff-tab {display:flex; align-items:center; justify-content:center; width:100%;}
.staff-wrap .staff-tab li {flex:1;}
.staff-wrap .staff-tab li a {background:#d5d7dd; height:3rem; width:100%; display:flex; align-items:center; justify-content:center; border-radius:1.5rem 1.5rem 0 0;}
.staff-wrap .staff-tab li a span {position:relative; color:#505050; font-weight:400; font-size:0.85rem; transition:all 0.2s;}
.staff-wrap .staff-tab li a.on {background:#2e3655;}
.staff-wrap .staff-tab li a.on span {position:relative; color:#fff; font-weight:600; font-size:0.9rem; padding-left:1.5rem;}
.staff-wrap .staff-tab li a.on span:before {content:'\EB79'; font-family:'remixicon'; font-size:1rem; color:#fff; font-weight:400; position:absolute; left:0; top:50%; transform:translate(0, -50%);}
.staff-wrap .tabContBox {display:none; height:calc(100% - 3rem); background:#f2f5fe; padding:2.25rem 2rem; border-radius:0 0 1.5rem 1.5rem;}
.staff-wrap .login-list {width:100%; height:100%; display:flex; justify-content:space-between; gap:2rem;}
.staff-wrap .login-list .login_tit {display: flex; align-items: flex-start; flex-direction: column; gap:1rem; max-width:50%;}
.staff-wrap .login-list .login_tit .tit {font-size:1.2rem; font-weight:800; color:#2e3655;}
.staff-wrap .login-list .login_tit p {color:#555; font-size:0.85rem; font-weight:400; line-height:1.2rem;}
.staff-wrap .login-list .login_tit p.epki small {font-size:0.75rem; color:#555555; letter-spacing:-1px; line-height: initial; word-break: keep-all; line-height:1rem;}
.staff-wrap .login-list .login_tit p.epki small em {color:#ed3a3a; font-weight:600;}
.staff-wrap .login-list .login_tit p.epki strong {font-size:0.85rem; font-weight:700; margin-bottom:0.25rem; display:block;}
.staff-wrap .login-list .login_tit p.epki {line-height:0.8rem;}
.staff-wrap .login-list .btn-sect {display:flex; flex-direction:column; justify-content:space-between; flex:1; max-width:15rem;}
.staff-wrap .login-list .btn-sect [class^="btn_"] {position:relative; z-index:0; border-radius:0.4rem; background:#5e7083; color:#fff; display:flex; align-items:center; height:3rem; justify-content:center; font-size:0.8rem; font-weight:600; width:100%; gap:0.25rem; margin-top:0;}
.staff-wrap .login-list .btn-sect [class^="btn_"]:before{position:absolute; z-index:-1; top:0;left:110%;width:150%;height:100%;-webkit-transform:skewX(-0.06turn);transform:skewX(-0.06turn);-webkit-transition:left .3s;transition:left .3s;content:"";}
.staff-wrap .login-list .btn-sect [class^="btn_"]:hover:before,
.staff-wrap .login-list .btn-sect [class^="btn_"]:focus:before{left:-10%;}
.staff-wrap .login-list .btn-sect [class^="btn_"]:hover:before {background: #2d3654;}
.staff-wrap .login-list .btn-sect .btn_login01 {background:#dd2959;}
.staff-wrap .login-list .btn-sect .btn_login01 > i {transform:rotate(-90deg);}
.staff-wrap .login-list .btn-sect .btn_login01:hover:before {background:#a61038;}
.staff-wrap .login-list .btn-sect .btn_login02 {background:#354ba6;}
.staff-wrap .login-list .btn-sect .btn_login02:hover:before {background:#192e84;}

/* 기존 아이디/비밀번호 찾기 강조 */
.ori_idpw_search a {
    font-weight: bold;           /* 글씨 굵게 */
    text-decoration: none;       /* 밑줄 제거 */
    display: inline-block;
    
    /* 애니메이션 설정: 2초 동안 부드럽게 무한 반복 */
    animation: smooth-fade 2s ease-in-out infinite;
}

@keyframes smooth-fade {
    0% {
        color: #888;             /* 시작: 눈에 잘 보이는 진한 회색 */
    }
    50% {
        color: #000;             /* 중간: 선명한 검정색 */
    }
    100% {
        color: #888;             /* 끝: 다시 원래 회색으로 (끊김 방지) */
    }
}


@media(max-width:1200px){
	/* 통합로그인 */
	.total_login_wrap .login_tab_wrap{width:96%;}
	.total_login_wrap .login_box{padding-left:20rem;}
	
	/* id pw 찾기 */
	.total_login_wrap.find_login_wrap .login_tab_wrap{width:90%; }
	
}

@media(max-width:880px){
	.total_login_wrap .login_section .login_list {padding:2rem 1.5rem;}
	.total_login_wrap .login_section .login_list .btn-sect [class^="btn_"] span {line-height:1;}
	
	.staff-wrap .tabContBox {padding:1.5rem 2rem; overflow:auto;}
	.staff-wrap .login-list {flex-direction:column; gap:1rem;}	
	.staff-wrap .login-list .login_tit {text-align:center; max-width:100%;}
	.staff-wrap .login-list .login_tit .tit {font-size:1rem; display:block; text-align:center; width:100%;}
	.staff-wrap .login-list .login_tit p {display:block; width:100%; text-align:center; font-size:0.8rem;}
	.staff-wrap .login-list .btn-sect {flex-direction:row; margin-top:auto; gap:0.5rem; justify-content:center; max-width:100%;}
	.staff-wrap .login-list .btn-sect [class^="btn_"] {height:2.5rem;}
	
}

@media(max-width:800px){
	.staff-wrap .login-list {height:auto;}
	.staff-wrap .login-list .btn-sect {flex-direction:column;}
}

@media(min-width:769px){
	/* 통합로그인 */	
	.total_login_wrap [class^="btn_"]:hover:before,
	.total_login_wrap [class^="btn_"]:focus:before{left:-10%;}
	.total_login_wrap .login_box .login_until > li > a:hover,
	.total_login_wrap .login_box .login_until > li > a:focus{color:#465cbd;}
}
@media(max-width:768px){
	/* 통합로그인 */
	.total_login{padding:2rem 0; }
	.total_login_wrap h1{font-size:1.5rem;}
	.total_login_wrap .login_tab_wrap{height:24rem;border-radius:1.5rem;}
	.total_login_wrap .login_tab_wrap h2[class^="login_tab"]{font-size:.8rem;}
	.total_login_wrap .login_box{padding:0 2rem 0;}
	.total_login_wrap .login_box:before{display:none;}
	.total_login_wrap .login_box .box h3{font-size:1.4rem;}
	
	/* id pw 찾기 */
	.total_login_wrap.find_login_wrap .login_box{padding:1.5rem 1rem; }
	.total_login_wrap.find_login_wrap .tbl_st table th,
	.total_login_wrap.find_login_wrap .tbl_st table td{padding:.25rem; }
	.total_login_wrap.find_login_wrap .tbl_st table td select,
	.total_login_wrap.find_login_wrap .tbl_st table td input{height:30px; }
	.total_login_wrap.find_login_wrap .login_box .grey{line-height:30px;}
	
	/* 회원가입 */
	
	.total_join_wrap .sbscrbStep > ul.stepList{padding:.5rem; }
	.total_join_wrap .sbscrbStep > ul.stepList li{width:33.333%; background-size:10%; }
	.total_join_wrap .sbscrbStep > ul.stepList li img{width:50px; padding:10px; }
	.total_join_wrap .sbscrbStep > ul.stepList li p span{font-size:.75rem; }
	.total_join_wrap .TypeBox ul.customersType > li a{padding:.75rem .5rem; }
	.total_join_wrap .TypeBox ul.customersType > li span{font-size:.9rem; }
	.total_join_wrap .TypeBox ul.customersType > li img{display:none; }
	.total_join_wrap .TypeBox ul.customersType > li a div{height:30px; line-height:30px; font-size:.75rem; }
	.total_join_wrap .tbl_st_row colgroup{display:none; }
	.total_join_wrap .tbl_st_row table,
	.total_join_wrap .tbl_st_row table tbody,
	.total_join_wrap .tbl_st_row table tr,
	.total_join_wrap .tbl_st_row table th,
	.total_join_wrap .tbl_st_row table td{display:block; }
	.total_join_wrap .succesBox img{width:5rem; }
}


@media(max-width:520px){
	
	.staff-wrap {padding:1rem;}
	.staff-wrap .tabContBox {padding:1rem;}
	.staff-wrap .login-list .login_tit p {font-size:0.7rem;}
	.staff-wrap .login-list .btn-sect [class^="btn_"] {font-size:0.7rem; padding:0;}
	.staff-wrap .staff-tab li a span {font-size:0.65rem; word-break:keep-all; text-align:center;}
	.staff-wrap .staff-tab li a.on span {font-size:0.8rem;}
	.staff-wrap .staff-tab li a.on span:before {left:0.35rem;}
	
}


@media(max-width:480px){
	/* 통합로그인 */
	.total_login_wrap .login_tab_wrap{height:22.5rem;}
	.total_login_wrap .login_box{padding:2rem 1rem 0;}
	.total_login_wrap .login_box .login_frm{margin-top:1.5rem;}
	.total_login_wrap .login_box .login_until > li{font-size:.65rem;}
	
	/* 회원가입 */
	.total_join_wrap .sbscrbStep > ul.stepList li{width:50%; margin:.5rem 0; background-size:7%; }
	.total_join_wrap .tbl_st_row table select, table input{width:100%; }
	.total_join_wrap .tbl_st_row table input + select,
	.total_join_wrap .tbl_st_row table select + select{margin-top:.25rem; }
	.total_join_wrap .sbscrbStep .tbl_st_row table td .btn_line_style2{width:100%; text-align:center; }
	
	.total_login_wrap .login_section {flex-direction:column; flex-wrap: inherit;}
	.total_login_wrap .login_section .login_list {flex:1 1 100%;}
	#login_con2 {overflow:auto;}
}