@charset "UTF-8";
html,body {height: 100%;}
html,body {margin:0; padding:0; font-size: 10px; letter-spacing:-0.05rem; font:'Pretendard','Malgun Gothic','Apple Gothic', 'Dotum','Gulim','Verdana', 'Arial', sans-serif;}
html{height:-webkit-fill-available;}
body{-webkit-overflow-scrolling:touch; height:-webkit-fill-available;}
.hide{display:none;}
.w100p{width:100%}
.mt1rem{margin-top:1rem !important;}
.mt2rem{margin-top:2rem !important;}
.btn_gray{background-color:rgba(172,173,176,1); color:#fff !important;}
.btn_dkblue{background-color:#34368a; color:#fff !important;}
.btn_dkblue01{background-color:rgba(34, 48, 119); color:#fff !important;}
/*font color*/
.fnt-red{color:#e3384c !important;}
/*.loginBg{background-image: linear-gradient(to top, rgba(46, 111, 235, 1) 50%, rgba(247, 248, 252, 1) 50%); width:100vw; height:100vh;}*/
body{ padding:0; margin:0; background:rgba(247, 248, 252, 1) ;}
/* [2026-07-28] 문서 가로 넘침 차단(마지막 안전장치).
어떤 요소가 화면보다 넓어지더라도 문서가 가로로 늘어나지 않게 한다 — 늘어나면 모바일에서
레이아웃 뷰포트가 함께 넓어져 position:fixed 인 2차 인증 모달이 밀려 잘린다. */
html, body{ max-width:100%; overflow-x:hidden; }
.wrapper{background: linear-gradient(to bottom, rgba(46, 111, 235, 1) 60%, rgba(247, 248, 252, 1) 35%) no-repeat; width:100%; height:100vh; font-family: 'Pretendard';}
.login_wrap{background:url('./../images/sso_login/bg_img_text01.png') center 0 no-repeat; /*background-color:rgba(255, 255, 255, 1);*/ position:relative; display:flex; flex-direction:column;}
/* ★[2026-08-11] 세로 여백을 % → rem 으로 바꾼다 — 서정대 12:53 통화(민원 접수).
"증명 발급하고 Office365가 한 화면에서 너무 밑으로 내려가 스크롤해야 보인다. 상단으로 올리거나
사이즈를 줄일 수 있을까요?"
원인: CSS 에서 세로 margin 의 % 는 부모의 너비 기준이다. 그래서 넓은 모니터일수록
위아래 여백이 함께 커져 하단 배너가 화면 밖으로 밀렸다(2133px 폭에서 3%=64px, 4%=85px).
rem 으로 고정하면 화면 폭과 무관해진다. 실측: 배너 하단 1129px → 912px (1080p 전체화면에서 보임).
※모바일은 아래 미디어쿼리에서 따로 잡으므로 여기 값은 데스크톱에만 적용된다. */
.login_wrap > header{ text-align:center; margin:2.4rem auto 2.2rem auto;}
.login_wrap > header h1 span{display:inline-block; position:relative; background:url('./../images/sso_login/logo.png') no-repeat; float:left; margin-right:2rem; margin-top:-1rem; text-align:center; width:18.2rem; height:5.5rem;}
.login_wrap > header h1 span::after{content:"|"; display:block; position:absolute; right:-2.2rem; top:2rem;padding-right:1rem; font-size: 2.2rem; font-weight:300; color:rgba(255,255,255,.8);}
.login_wrap > header h1 a{ font-size:3.4rem; color:#fff; font-weight:600; display:flex; flex-direction:row; align-items:center; justify-content:center;}
#login_box{ width:70%; margin:2.6rem auto 2.4rem auto; padding:0; font-size:1.6rem;height:auto; box-shadow: 0 0 4rem rgba(34, 48, 119, .4); border-radius:2rem;}
#login_box_02{ width:70%; margin:2% auto; padding:0; font-size:1.6rem;height:auto; box-shadow: 0 0 4rem rgba(34, 48, 119, .8); border-radius:2rem;}
#login_box_03{ width:50%; margin:2% auto; padding:0; font-size:1.6rem;height:auto; box-shadow: 0 0 4rem rgba(34, 48, 119, .8); border-radius:2rem;}
.login_box_con06{display:none;}
.display_n {
display: none !important;
}
.box-mbusi:hover p img{
position:relative;
animation:moveArrow 0.3s 0s infinite linear alternate ;
}
.QuickMenu { position:relative; margin:.8rem auto; max-width:136rem; overflow: visible; }
/* [2026-08-11] 슬라이드 칸이 내용(120×75)보다 커서 30px 이 비어 있었다 — 내용에 맞춘다. */
.QuickMenu .swiper, .QuickMenu .swiper-slide{ height:auto; }
/*.QuickMenu ul{display:inline-block;margin:0 auto;}*/
/*.QuickMenu .swiper{width:calc(100% - 10rem); min-width:56rem;}*/
/* [2026-07-28] min-width:56rem(560px) 고정이라 좁은 화면에서 문서가 통째로 가로로 넘쳤다
(실측: 뷰포트 320px일 때 문서폭 610px). 모바일 브라우저는 넘친 만큼 레이아웃 뷰포트를 넓게 잡는데,
2차 인증 모달은 position:fixed 라 그 넓어진 기준으로 배치돼 화면 밖으로 밀려 잘려 보였다
(삼성 인터넷 캡처 현상). → 화면보다 넓어지지 못하게 상한을 건다. 슬라이더라 좁으면 넘겨보면 된다. */
.QuickMenu .swiper{width:auto; min-width:min(56rem, 100%); margin:0 5rem; max-width:100%;}
.QuickMenu .swiper-wrapper{ display:inline-flex; width:auto;}
.QuickMenu .swiper-slide{display:block; float:left; width:12rem !important; height:12rem; margin:.5rem 1rem;}
.QuickMenu .swiper-slide:hover a::before{transform: translateY(-.5rem); }
.QuickMenu .swiper-slide a{ display:block; height:100%; color:#fff; font-size:1.5rem; text-align:center; opacity:.4; line-height:100%;}
.QuickMenu .swiper-slide a::before{content: ""; height:5rem;display:block;overflow: hidden;background:url('./../images/sso_login/quick_icon.png') no-repeat; margin:1.5rem auto 1rem auto; transition: all .3s ease 0s; transform: translateY(0); }
.QuickMenu .swiper-slide .repre a::before{width:4.2rem; background-position:0 0;}
.QuickMenu .swiper-slide .integrate a::before{width:4.1rem; background-position:-4.6rem 0;}
.QuickMenu .swiper-slide .manage a::before{width:5.1rem; background-position:-9.1rem 0;}
.QuickMenu .swiper-slide .webmail a::before{width:4.1rem; background-position:-14.6rem 0;}
.QuickMenu .swiper-slide .groupware a::before{width:3.3rem; background-position:-19.1rem 0;}
.QuickMenu .swiper-slide .ncsedu a::before{width:2.8rem; background-position:-26.5rem 0;}
.QuickMenu .swiper-slide .eclass a::before{width:3.3rem; background-position:-22.8rem 0;}
.QuickMenu .swiper-slide .success a::before{width:3.5rem; background-position:-29.7rem 0;}
.QuickMenu .swiper-slide .cmssst a::before{width:3.7rem; background-position:-33.6rem 0;}
.QuickMenu .swiper-slide .fncsst a::before{width:4.8rem; background-position:-37.6rem 0;}
.QuickMenu .swiper-slide .lifeedu a::before{width:3.7rem; background-position:-42.7rem 0;}
.QuickMenu .swiper-slide .library a::before{width:4.6rem; background-position:-46.4rem 0;}
.QuickMenu .swiper-slide .heyoung a::before{width:4.4rem; background-position:-51rem 0;}
/*.QuickMenu ul li.webmai a::before{width:2.8rem; background-position:-26.5rem 0;}*/
.QuickMenu div div div div.active a{/*background-color:rgba(255,255,255,.05); backdrop-filter: blur(4px); border:1px solid rgba(255,255,255,.6); rgba(0,0,0,.5)rgba(50,80,235,.5)*/ opacity:1;}
/* 버튼 스타일 */
.swiper-button-next,
.swiper-button-prev {color: #fff !important; top: 40% !important; opacity:.8;}
.swiper-button-next::after,
.swiper-button-prev::after {font-size:20px !important; font-weight:300 !important;}
.swiper-icon{width:100vw; display:none; display:flex; align-items:center; justify-content:center;}
.swipe-icon { display:none; overflow:visible; width:18px; height:24px;}
.swipe-icon .swipe-arrow {animation: pulse-arrow 2s ease-out infinite;}
.swipe-icon {animation: hand-move 2s ease-out infinite;}
@keyframes pulse-arrow {
0% {transform: translateX(1.9em) translateY(0.3em) rotate(180deg); opacity:0;}
15% {transform: translateX(1.8em) translateY(0.3em) rotate(180deg); opacity:1;}
50% {transform: translateX(1.8em) translateY(0.3em) rotate(180deg);opacity:1;}
70% {transform: translateX(1.5em) translateY(0.3em) rotate(180deg);opacity:0;}
100% {transform: translateX(1.8em) translateY(0.3em) rotate(180deg);opacity:0;}
}
@keyframes hand-move {
0% {transform: translateX(0.6em);}
50% {transform: translateX(0);}
60% {transform: translateX(0);}
100% {transform: translateX(0.6em);}
}
.etc_container{background-color:rgba(255, 255, 255, 1); border-radius:2rem; position: relative; margin:auto; width:100%;}
.tab_container {background-color:rgba(255, 255, 255, 1); border-radius:2rem; position: relative; margin:auto; width:100%;}
.tab_container .tab_content { width:100%; padding: 6rem 4rem 2rem 4rem;}
.tab_container01 {background-color:rgba(255, 255, 255, 1); border-radius:2rem; position: relative; margin:auto; width:100%;}
.tab_container01 .tab_content01 { width:100%; padding: 6rem 4rem 2rem 4rem;}
.login_set{padding: 0 4rem 4rem 4rem;}
.login_set > ul {display: inline-flex;float: right;align-items: center;}
.login_set > ul > li{display:block; float:left; padding-left:2rem; position:relative;}
.login_set > ul > li:hover,.login_set > ul > li:focus{cursor:pointer;}
.login_set > ul > li a{ display:block;}
/*.login_set > ul > li:first-child:after{content:"|"; display:block; position:absolute; right:-22px; top:0;padding-right:1rem; font-size: 1.6rem; font-weight:300; color:rgba(0,0,0,.5);}*/
.login_set .logout_btn{border-radius:.5rem; padding:.5rem 1rem; background:rgba(87,93,127,.5); color:#fff; margin-left:2rem;}
.login_set .logout_btn:hover{background:rgba(87,93,127,.8); cursor:pointer;}
.login_set .check_wrap {display:inline-block;}
/* tab 1개 일때 시작*/
.tabs {position:relative;}
.tabs ul { padding: 0; margin: 0 auto; width:50rem; }
.tabs li {display:block; background: #f6f7f9; padding: 20px; text-align: center;margin:0 auto; border-radius:40rem; position:absolute; top:-5rem; width:50rem;}
.tabs li.active { background:rgba(34, 48, 119, 1); border-bottom: 0;}
.tabs li.active a { color: #fff; font-weight:600; }
.tabs li a { font-size:2.6rem; color:rgba(34, 48, 119, 1); display: block; width: 100%; height: 100%; vertical-align: middle; text-decoration: none;}
.tabs ul li:first-child::before{content:""; display:inline-block; position:absolute; height:100%; width:2.2rem;right:0; top:0;background:url('./../images/sso_login/tab_shadow.png') no-repeat; transform:rotate(90deg); -moz-transform: scaleX(-1);
-o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
/*.tabs ul li:last-child::before{content:""; display:inline-block; position:absolute; height:100%; width:2.2rem;left:0; top:0;background:url('./../images/sso_login/tab_shadow.png') no-repeat; }*/
/* tab 1개 일때 끝*/
/* tab 2개 이상일때 시작
.tabs ul { width: 100%; display:table; table-layout: fixed; padding:0;}
.tabs li {display: table-cell; background: #f6f7f9; padding: 20px; text-align: center; position:relative;}
.tabs li.active { background:rgba(34, 48, 119, 1); border-bottom: 0;}
.tabs li.active a { color: #fff; font-weight:600; }
.tabs li a { font-size:2.6rem; color:rgba(34, 48, 119, 1); display: block; width: 100%; height: 100%; vertical-align: middle; text-decoration: none;}
.tabs ul li:first-child{ border-radius:2rem 0 0 0;}
.tabs ul li:first-child::before{content:""; display:inline-block; position:absolute; height:100%; width:2.2rem;right:0; top:0;background:url('./../images/sso_login/tab_shadow.png') no-repeat; transform:rotate(90deg); -moz-transform: scaleX(-1);
-o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.tabs ul li:last-child::before{content:""; display:inline-block; position:absolute; height:100%; width:2.2rem;left:0; top:0;background:url('./../images/sso_login/tab_shadow.png') no-repeat; }
.tabs ul li:last-child{ border-radius:0 2rem 0 0;}
tab 2개 이상일때 끝 */
#tab1.tab_content,#tab1.tab_content01, #tab2.tab_content{display:flex; flex-direction:row; /*align-items:center;*/ justify-content:center; gap:3rem;}
#tab1.tab_content > div{ position:relative; flex:1; width: calc(100% / 3); text-align:center; background-color:rgba(247, 248, 252, 1); padding:5rem 4rem; font-size:1.6rem; border-radius:2rem; min-height:40rem; }
#tab1.tab_content > div h3{font-size:2.0rem; font-weight:600; text-align:left; display:flex; align-items:center; margin-bottom:2rem; cursor:pointer;}
#tab1.tab_content > div h3::before{content: ""; display:block; overflow: hidden; background:url('./../images/sso_login/login_icon.png') no-repeat; float:left; margin-right:1rem;}
.tab_container01 #tab1.tab_content01 > div{ position:relative; flex:1; width: calc(100% / 2); text-align:center; background-color:rgba(247, 248, 252, 1); padding:5rem 4rem; font-size:1.6rem; border-radius:2rem; min-height:40rem; }
#tab1.tab_content > div.login_box_con01 h3::before{ width:4.3rem; height:4.4rem; background-position:0 0;}
#tab1.tab_content > div.login_box_con02 h3::before{ width:3.7rem; height:4.4rem; background-position:-204px 0;}
#tab1.tab_content > div.login_box_con03 h3::before{ width:3.1rem; height:4.4rem; background-position:-168px 0;}
#tab1.tab_content > div.login_box_con04 h3::before{ width:2.9rem; height:4.4rem; background-position:-133px 0;}
#tab1.tab_content > div.login_box_con05 h3::before{ width:3.5rem; height:4.4rem; background-position:-247px 0;}
#tab1.tab_content > div.login_box_con06 h3::before{ width:3.8rem; height:4.4rem; background-position:-288px 0;}
#tab1.tab_content01 > div.login_box_con07 h3{font-size:2.0rem; font-weight:600; margin-bottom:2rem; cursor:pointer; text-align:center; display:inline-block;}
.login_ok #tab1.tab_content > div{ position:relative; display:inline-block; text-align:center; background-color:rgba(247, 248, 252, 1); padding:5rem 4rem; font-size:1.6rem; border-radius:2rem; min-height:40rem; }
.login_ok .login_box_con03 .inner .inner_form input, .login_ok .login_box_con03 .inner .inner_form .login_btn, .login_ok .login_box_con01, .login_ok .login_box_con04 .inner .inner_form, .login_ok .login_box_con05 .inner .inner_form {
display: none !important;}
/*
#tab1.tab_content > div h3::before{content: ""; display:block; overflow: hidden; background:url('./../images/sso_login/login_icon.png') no-repeat; background-size:15rem 2.6rem; float:left; margin-right:.5rem;}
#tab1.tab_content > div.login_box_con01 h3::before{ width:2.6rem; height:2.6rem; background-position:0 0;}
#tab1.tab_content > div.login_box_con02 h3::before{ width:2.3rem; height:2.6rem; background-position:-122px 0;}
#tab1.tab_content > div.login_box_con03 h3::before{ width:1.8rem; height:2.6rem; background-position:-101px 0;}
#tab1.tab_content > div.login_box_con04 h3::before{ width:1.7rem; height:2.6rem; background-position:-80px 0;}
*/
#tab1.tab_content > div p {text-align: left; font-size: 1.6rem; font-weight: 500; color: rgba(65, 74, 115, 1); margin: 1rem 0 1rem 0;}
#tab1.tab_content01 > div p {font-size: 1.6rem; font-weight: 500; color: rgba(65, 74, 115, 1); margin: 1rem 0 1rem 0;}
#tab1.tab_content > div input[type=text], #tab1.tab_content > div input[type=password]{width:100%; padding:1.5rem 1rem; margin:.4rem 0; border-radius:1rem; border: 1px solid rgba(0, 0, 0,.2); transition: border-color 0.3s ease-in-out}
#tab1.tab_content > div input[type=text]:focus, #tab1.tab_content > div input[type=password]:focus{border-width: 0.2rem; border-color: rgba(52, 54, 138,1); outline: none;}
.login_box_con01 input::placeholder{color:rgba(221,222,223);}
#tab1.tab_content > div .login_btn{position:absolute; bottom:0; display:block; width:100%; text-align:center; background:rgba(34, 48, 119); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem; margin:0 auto;}
#tab1.tab_content > div .check_wrap {
display: inline-block;
margin-top: 1rem;
}
.first_citation > .login_box_con07{display:block;}
.first_citation > .login_box_con08, .first_citation > .login_box_con09{display:none;}
.login_box_con08,.login_box_con09 {display:block;}
.login_box_con07{display:none;}
#tab1 .login_box_con03 .inner, #tab1 .login_box_con01 .inner, #tab1 .login_box_con04 .inner, #tab1 .login_box_con02 .inner, #tab1 .login_box_con05 .inner{/*position:relative; height:24.5rem; margin-bottom:1rem;*/}
.inner_list{}
.inner_list ul{padding:0; margin:0; width:100%; display:inline-block;}
.inner_list li{padding:0; margin:0; width:100%;text-align:left; display:list-item; position:relative;}
.inner_list li::before{content: ""; display:block;position: absolute; left: 0; top:37%; width: 0.5rem;height: 0.5rem;background: rgba(34, 48, 119, 1); border-radius:.2rem; }
.inner_list li {padding-bottom: 0.1rem; border-bottom: 0.1rem solid #E9ECEF; padding-left:1rem;}
.inner_list li > a{display:flex; align-items:center; gap:1rem; padding:.5rem 0; font-size:1.4rem !important; }
.inner_list li > a > p{font-weight:400 !important;}
.inner_list li > a .bord-cont{ flex:1;text-overflow: ellipsis; white-space: nowrap;overflow: hidden;color: #666;transition: all .3s ease 0s; margin:0 0 .5rem 0 !important; }
.inner_list li.active > a > p{font-weight:600 !important;}
.inner_list li > a .date {color: #999 !important;line-height: 130%;}
#tab1.tab_content > div > span.btn_more{ position: absolute; display:flex; align-items:center; top: 6.2rem;right: 4rem; cursor:pointer; color: #999; gap:.5rem;}
#tab1.tab_content > div > span.btn_more i{display:inline-block; transition: all .3s linear 0s;}
#tab1.tab_content > div > span.btn_more:hover i{ transform:rotate(90deg);}
.Info_box{background:rgba(0,0,0,.2); padding:2rem 3rem; width:70rem; margin:0 auto; border-radius:1rem; color:rgba(255,255,255,1); display:flex; align-items:center;}
.Info_box .security_icon{background:url('./../images/sso_login/security_icon.png') 0 0 no-repeat; width:6rem; height:6rem; display:inline-block;}
.Info_box div{display:inline-block; font-size:1.6rem; margin-left:1rem; width:calc(100% - 7rem);}
.Info_box div .ico_ex{display:block; background:url('./../images/sso_login/ico_ex.png') 0 0 no-repeat; width:1.8rem; height:1.8rem; float:left; margin-right:.5rem;}
.inner_form {position: relative; height: 20rem;}
/* [2026-07-29] 로그인 후에는 높이 고정을 푼다. 20rem 은 로그인 폼(아이디·비번·버튼) 기준 값인데,
로그인 뒤에는 '접속IP·마지막 로그인 정보 + 버튼 2개'가 들어가 그보다 커진다.
고정을 유지한 채 버튼을 absolute 로 띄워두다 보니 안내문과 겹쳤다(실측 23px). */
.login_ok .inner_form{ height:auto; min-height:20rem; }
.inner_form01{position: relative; height: auto;}
#tab1.tab_content01 > div .inner_first{position: relative; padding-bottom:8rem;}
#tab1.tab_content01 > div .inner_first > span{display:inline-block; margin:0 auto 2rem auto; width:10rem; height:10rem; background:#e9edfc; border-radius:50%;}
#tab1.tab_content01 > div .inner_first > span.hp_icon{background:#e9edfc url('./../images/sso_login/hp_icon.png')center center /4.2rem 5.1rem no-repeat;}
#tab1.tab_content01 > div .inner_first > span.ipin_icon{background:#e9edfc url('./../images/sso_login/ip_icon.png')center center /3.9rem 4.8rem no-repeat;}
#tab1.tab_content01 > div .inner_first > h3{font-size:2.0rem; font-weight:600; margin-bottom:0 !important; cursor:pointer; text-align:center !important; display:inline-block !important; width:100%;}
#tab1.tab_content01 > div .inner_first > p{text-align:center !important;}
#tab1.tab_content01 > div .inner_first >.login_btn{position:absolute; display:block; width:50%; text-align:center; background:rgba(34, 48, 119); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem; margin:0 auto; bottom:0; left:50%; transform:translateX(-50%);}
.login_box_con03 .form_login_ok{}
.login_box_con03 .form_login_ok dl{ background:#eff2fe; padding:2rem; text-align:left; border-radius:1rem; display:none;}
.login_ok .login_box_con03 .form_login_ok dl{ display:block;}
.login_ok .login_box_con03 .form_login_ok dl > dt{font-size:2rem; margin-bottom:1rem;}
.login_ok .login_box_con03 .form_login_ok dl > dt >span{color:#223077; font-weight:600;}
.login_ok .login_box_con03 .form_login_ok dl > dd{font-weight:300;}
/* ★[2026-07-29] absolute → static. 버튼이 문서 흐름 밖에 있어서 위의 '마지막 로그인 정보'를
밀어내지 못하고 23px 겹쳐 있었다(실측). 버튼이 하나뿐일 땐 안 보이던 문제가
항목이 늘면서 드러났다. 흐름 안에 두면 내용이 늘어나는 만큼 아래로 자연히 밀린다.
※float 도 함께 걷어낸다 — 흐름 복귀 후 float 가 남으면 부모 높이 계산에서 빠져 같은 문제가 재발한다. */
.btn_wrap{position:static; width:100%; display:none; margin-top:1.6rem;}
.login_ok .btn_wrap{display:block;}
.login_ok .btn_wrap li{float:none; width:100%;}
.login_ok .btn_wrap li:first-child{ margin:0 3% 0 0;}
/* ★[2026-07-29] 배경을 모든 항목에 준다.
종전에는 :first-child 에만 배경이 있었는데, 아래 규칙이 글자색을 #fff 로 주므로
두 번째부터는 흰 글씨 + 투명 배경이 되어 거의 흰 배경(#f7f8fc) 위에서 보이지 않았다.
(2026-07-24 '2차 인증수단 등록/재등록' 추가 이후 계속 안 보이던 상태 — 매니저님 지적으로 발견)
버튼이 하나뿐이던 시절의 규칙이 항목이 늘면서 깨진 경우다. */
.login_ok .btn_wrap li a{background:rgba(34, 48, 119);}
/* 두 번째부터는 보조 버튼으로 구분(같은 남색을 두 개 쌓으면 무엇이 주 행동인지 흐려진다). */
.login_ok .btn_wrap li + li{ margin-top:.8rem; }
.login_ok .btn_wrap li + li a{ background:#fff; color:#34368a; border:0.15rem solid rgba(52,54,138,.45); }
.login_ok .btn_wrap li + li a:hover{ background:rgba(52,54,138,.07); }
.login_ok .btn_wrap li a{display:block; width:100%; text-align:center; color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem;}
.login_box_con04 .form_login_ok, .login_box_con05 .form_login_ok{display:none;}
.login_ok .login_box_con04 .form_login_ok, .login_ok .login_box_con05 .form_login_ok{position:relative; height:20rem; display:block;}
.login_guide, .pw_guide, .easy_guide, .easy2_guide, .public_guide, .public2_guide {
text-align: left;
margin: 2rem 0 0 0;
}
.login_guide div{margin-bottom:.5rem; }
.login_guide div a{color:rgba(65, 74, 115, 1); font-weight:500; cursor:pointer; position:relative; padding-left:1.5rem;}
/*.login_guide a::before, .pw_guide a::before{content: ""; display:block; background:url('./../images/sso_login/note_icon.png') no-repeat; float:left; margin-right:.5rem; margin-top:.2rem; width:1.8rem; height:1.8rem;}*/
.login_guide a::before{content: ""; display:block;position: absolute; left: 0; top: 50%;transform: translateY(-50%); width: 0.8rem; height: 1.5rem; background:url('./../images/sso_login/ico-policy-intro.png')left center / 100% no-repeat; }
.login_guide > div > div{ line-height:130%; color:#606060; font-size:1.5rem; padding:.5rem; background:#eff2fe;}
#tab2.tab_content > div.login_box_con05 {width: calc((100%)); text-align: center; background-color: rgba(247, 248, 252, 1); font-size: 1.6rem; border-radius: 2rem; min-height: 35.4rem; display: flex; flex-direction: row; align-items: center; justify-content: center;}
#tab2.tab_content > div.login_box_con05 > div{min-height:35.4rem; padding:5rem 4rem;}
#tab2.tab_content > div.login_box_con05 > div:nth-of-type(1){width:25%;}
#tab2.tab_content > div.login_box_con05 > div:nth-of-type(2){width:50%;}
#tab2.tab_content > div.login_box_con05 > div h3 {font-size:2.0rem; font-weight:600; margin:25% auto; }
#tab2.tab_content > div.login_box_con05 > div h3 a{width:100%; display:block;}
#tab2.tab_content > div.login_box_con05 > div h3::before{content: ""; display:block; background:url('./../images/sso_login/login_icon_01.png') no-repeat;width:6.4rem; height:6.7rem; margin:0 auto 2rem auto;}
#tab2.tab_content > div.login_box_con05 > div.login_box_con01 h3::before{ width:4.3rem; height:4.4rem; background-position:0 0;}
#tab2.tab_content > div.login_box_con05 > .cm_inner ul.input_box {display:flex;}
#tab2.tab_content > div.login_box_con05 > .cm_inner ul.input_box > li{display:block;}
#tab2.tab_content > div.login_box_con05 > .cm_inner ul.input_box > li:first-child{width:70%; }
#tab2.tab_content > div.login_box_con05 > .cm_inner ul.input_box > li:last-child{width:30%; }
#tab2.tab_content > div.login_box_con05 > .cm_inner ul.input_box > li:last-child .login_btn{width:85%; height:11rem; margin-top:0; float:right; padding:4rem 0;}
#tab2.tab_content > div.login_box_con05 > .cm_inner ol{display:inline-block; width:100%; margin-top:5rem;}
#tab2.tab_content > div.login_box_con05 > .cm_inner ol > li{ text-align:left; padding:0.5rem 2rem; position:relative;}
#tab2.tab_content > div.login_box_con05 > .cm_inner ol > li::before{content: ""; position:absolute; left:0; top:1.2rem; display:block; width:0.5rem; height:0.5rem; background:rgba(34, 48, 119, 1);}
#tab2.tab_content > div.login_box_con05 > .cm_inner ol > li a{ color:#5969ff; font-weight:500; border-bottom:1px dotted #5969ff;}
#tab2.tab_content > div.login_box_con05 > .cm_inner ol > li a:hover{ font-weight:700;}
#tab2.tab_content > div > div p{text-align:left; font-size:1.6rem; font-weight:500; color: rgba(65, 74, 115, 1); margin:2rem 0 1rem 0; }
#tab2.tab_content > div > div input[type=text]{width:100%; padding:1.5rem 1rem; margin:.4rem 0; border-radius:1rem;}
.login_box_con01 input::placeholder, .login_box_con02 input::placeholder, .login_box_con03 input::placeholder, .login_box_con04 input::placeholder, .login_box_con05 input::placeholder {
color: rgba(221,222,223);
}
#tab2.tab_content > div > div .login_btn{display:block; width:100%; text-align:center; background:rgba(34, 48, 119); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem; margin-top:2rem;}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01{width:100%; position:relative; display:inline-block;}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 ul{display:inline-block; width:100%;}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 li:first-child{border-top:1px solid rgba(0,0,0,.1);}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 li {border-bottom:1px solid rgba(0,0,0,.1); padding:.5rem 1rem 1rem 1rem; display:flex;flex-direction: column;}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 li div{width:100%; display:flex; align-items:center; justify-content:space-between;}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 button.con_more{float:right; padding:.5rem 1.5rem; border-radius:.5rem; background-color:rgba(0,0,0,.1); font-size:1.4rem }
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 li.all_check{ background-color:rgba(0,0,0,.05); padding-top:1rem; color:rgba(34, 48, 119, 1); font-weight:700;}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 li p.check_con{ display:none; width:100%; display:inline-block; border:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,1); text-align:left; padding:1rem; color:rgba(99,99,99,1); font-weight:300; font-size:1.2rem; margin-top:.5rem; border-radius:.5rem; max-height:12rem; overflow-y:auto;}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 .a_box{padding:0 1rem;}
#tab1.tab_content01 > div.login_box_con07 .check_wrap01 a{ color: #5969ff;border-bottom: 1px dotted #5969ff; font-weight:600; font-size:1.4rem; margin:2rem auto 0 auto; display:inline-block;}
.etc_container > div{ position:relative; width: 100%; display:inline-block; text-align:center; padding:5rem 4rem; font-size:1.6rem; border-radius:2rem;}
.etc_container > div h3{font-size:2.0rem; font-weight:600; text-align:left; padding:0 2rem;}
.etc_container > div h3 > span{font-size:2.0rem; font-weight:400; }
.etc_container > div.etc_box_con01 > .etc_inner{ padding: 5rem 4rem; width: calc((100%));background-color:rgba(247, 248, 252, 1); font-size:1.6rem; border-radius:2rem; margin-top:2rem;}
.etc_container > div.etc_box_con01 > .etc_inner ol > li{ text-align:left; padding:0.5rem 2rem; position:relative;}
.etc_container > div.etc_box_con01 > .etc_inner ol > li::before{content: ""; position:absolute; left:0; top:1.2rem; display:block; width:0.5rem; height:0.5rem; background:rgba(34, 48, 119, 1);}
.etc_container > div.etc_box_con01 > .etc_inner p{ padding:2rem 0; margin-top:2rem; border-top:dashed 1px rgba(0,0,0,.2) ; font-weight:600;}
.etc_container > div.etc_box_con01 > .etc_inner p span {color: #5969ff;border-bottom: 1px dotted #5969ff;}
.etc_container > div.etc_box_con01 > .etc_inner ul{width:30rem; margin:0 auto;}
.etc_container > div.etc_box_con01 > .etc_inner ul.input_box {}
.etc_container > div.etc_box_con01 > .etc_inner ul.input_box > li{display:block; width:30rem;}
.etc_container > div.etc_box_con01 > .etc_inner ul.input_box > li input[type=text]{width:100%; padding:1.5rem 1rem; margin:.4rem 0; border-radius:1rem;}
.etc_container > div.etc_box_con01 > .etc_inner ul.input_box > li input::placeholder{color:rgba(221,222,223);}
.etc_container > div.etc_box_con01 > .etc_inner ul.input_box > li .login_btn{display:block; width:100%; text-align:center; background:rgba(34, 48, 119); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem; margin-top:2rem;}
/* ★[2026-08-11] 증명발급·O365 배너를 로그인 박스 위로 올린다.
서정대 12:53 통화: "하단에 증명 발급하고 O365가 한 화면에서 너무 밑으로 내려가
스크롤해야 보인다. 상단으로 올리거나 사이즈를 줄일 수 있을까요"(민원 접수).
여백만 줄여서는 PC 큰 화면에서만 해결된다. 실측:
· 390px 기기 : 헤더32 + 바로가기125 + 로그인박스854 → 여백을 다 걷어내도 배너 1059px (화면 937)
· 1024 태블릿: 로그인박스가 1063px 로 쌓임 → 배너 1543px (화면 853)
· 1440 노트북: 배너 1091px (화면 1000) → 147px 부족
로그인 박스 하나가 화면보다 커서, 그 아래에 두는 한 어떤 여백 조정으로도 못 넣는다.
※폭 구간별로 처리하지 않고 모든 화면에 같은 순서를 준다. 구간을 나누면 경계에 구멍이
생긴다 — 실제로 max-width:816px 로 잡았더니 853px 기기(태블릿)가 그대로 밑으로 떨어졌다.
※.login_wrap 이 flex-direction:column 이라 order 로 바꾼다(마크업은 건드리지 않는다).
※★기본값(order:4)을 모든 자식에게 먼저 준다. order 는 안 적으면 0 이라, 규칙에서 빠진
자식이 맨 앞(헤더 위)으로 튀어나온다. .login_wrap 은 login.css 를 쓰는 여러 화면이
공유한다 — index.jsp(헤더·바로가기·로그인박스·배너·버튼) 말고도
pwFind.jsp 에는 .Info_box, findId2/resetPwd/pwFindSuccess 에는 다른 조합이 있다.
기본값을 깔아두면 목록에 없는 자식도 로그인 박스와 같은 4 를 받아 원래 순서를 지킨다
(같은 order 안에서는 소스 순서대로 놓인다). 새 화면이 생겨도 안전하다. */
/* ★[2026-08-13] 배너를 원래 하단 자리로 되돌린다 — 서정대 13:54 통화.
과장님이 직접 만든 화면을 보내며 "Office365 는 밑에 하단에 있는 위치에 그대로 놔두면
될 것 같고, 중간중간 폭들을 조금 줄이면 한 화면에 보이지 않겠냐"고 정리하셨다.
위로 올렸을 때 생긴 부작용도 있었다 — 파란 배경 위에 파란 배너(증명발급)라 묻혀 보였다.
※order 규칙은 지운다. #banner_area 만 4 로 바꿔도 되지만, 그러면 '규칙은 있는데
효과는 없는' 코드가 남아 다음 사람이 헷갈린다. 소스 순서(header → QuickMenu →
login_box → banner_area → b_button_area)가 곧 화면 순서다.
── 기존(8/11 — 배너를 로그인 박스 위로 올렸던 규칙) ──────────
.login_wrap > * { order:4; }
.login_wrap > header { order:1; }
.login_wrap > .QuickMenu { order:2; }
.login_wrap > #banner_area { order:3; }
.login_wrap > .b_button_area { order:5; }
──────────────────────────────────────── */
/* ★[2026-08-13] 세로 여백을 줄여 배너·원격지원요청까지 첫 화면에 넣는다(같은 통화).
실측(PC 1920, 로그인 전) 로고~로그인상자 355px → 229px. 로고·바로가기·학습로그인
자체 크기는 그대로 두고 사이 여백만 줄였다.
※#login_box 위 여백(2.2rem)은 더 못 줄인다 — '학습 로그인' 탭이 absolute 로 상자보다
50px 위에 떠서, 이보다 줄이면 바로가기 아이콘·글자와 겹친다.
로그인 후에는 바로가기가 7~8개고 '온라인강의(LMS시스템)'처럼 두 줄짜리가 있어 더 내려온다. */
.login_wrap > header{ margin-top:1rem; margin-bottom:.8rem; }
.QuickMenu{ margin-top:.2rem; margin-bottom:.2rem; }
#login_box, #login_box.login_ok{ margin-top:2.2rem; margin-bottom:1.2rem; }
/* [2026-08-13] 아래 여백 4rem → 1.2rem. 그 4rem 은 배너가 로그인 박스 위에 있을 때
'학습 로그인' 탭(absolute, 박스보다 50px 위)에 깔리지 않으려던 자리 확보였다.
배너를 하단으로 되돌렸으니 그 이유가 사라졌다 — 이제는 원격지원요청과의 간격일 뿐이다.
── 기존 ──────────────────────────────────
#banner_area{width:70%; margin:0 auto 4rem auto; padding:0; font-size:1.6rem; height:auto;}
──────────────────────────────────────── */
#banner_area{width:70%; margin:0 auto 1.2rem auto; padding:0; font-size:1.6rem; height:auto;}
.banner_wrap{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:2rem;}
.banner_wrap li{position:relative; width: calc((100%)/4); text-align:center; display:block;width:24rem; height:5.6rem;}
/* 배너를 줄인 만큼 이미지도 비율을 지키며 맞춘다(늘어나 보이지 않게). */
.banner_wrap li img{ width:100%; height:100%; object-fit:contain; }
.modal-container {width: 100%; font-family: 'Pretendard';}
.modal-btn-box {width: 100%; text-align: center; font-size:1.6rem;}
.modal-btn-box button {display: inline-block;width: 150px; height: 50px; background-color: #ffffff; border: 1px solid #e1e1e1;cursor: pointer; padding-top: 8px;}
.popup-wrap {background-color: rgba(0,0,0,.6); justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; padding: 15px; z-index:9999;}
.popup { width: 100%; max-width:50rem; height:60rem; background-color: #ffffff; border-radius:2rem; overflow: hidden; box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3); position:relative;}
.popup-head {width: 100%; height:5.5rem; display: flex; align-items: center; justify-content: center; background:rgba(34, 48, 119, 1);}
#popup_list .popup-head {width: 100%; height:5.5rem; display: flex; align-items: center; justify-content: center; background:rgba(255, 255, 255, 1); }
#popup_list .popup-head .head-title {font-size:2.4rem; font-weight:600;letter-spacing: -0.5px;text-align: center; color:#000;}
#popup_list .popup{width: 100%; max-width:80rem; }
.btn_list{position:absolute; left:1rem; top:1.6rem; padding:0 1rem;}
.head-title {font-size:2.4rem; font-weight:600;letter-spacing: -0.5px;text-align: center; color:#fff;}
.popup-body { width: 100%; background:#ffffff;}
.body-content {width: 100%; padding:3rem 0; height:54rem; overflow-y:auto; position:relative;}
.body-contentbox {word-break: break-word;overflow-y: auto;min-height:200px;}
.service-initialization{position:relative;padding:10px;box-sizing:border-box;}
.service-initialization .t2{text-align:center;color:#333;font-size:1.6rem;}
.service-initialization .tit1{position:relative;font-size:1.6rem;margin:0 0 5px 0;padding:0 0 0 10px;}
.service-initialization .tit2{position:relative;font-size:1.8rem; margin:0 0 5px 0;padding:0 0 0 15px; text-align:left; font-weight:600;}
.service-initialization .tit1:before{content: ""; display:block;position: absolute; left: 0; top: 50%;transform: translateY(-50%); width: 0.8rem; height: 1.5rem; background:url('./../images/sso_login/ico-policy-intro.png')left center / 100% no-repeat;}
.service-initialization textarea{resize: none;width:100%;height:100px;padding:10px;font-size:1.6rem;box-sizing:border-box;background:#eee;border:1px solid #dfdede;}
.service-initialization .scrolly{overflow-y:scroll;width:100%;height:12rem;margin:0 0 5px 0;padding:10px;line-height:140%;box-sizing:border-box;background:#f5f5f5;border:1px solid #dfdede; font-size:1.5rem; line-height:140%; color:#666;}
.service-initialization .text{position:relative;font-size:1.5rem;margin:0 5px 20px 5px; color:rgba(0,0,0,.8);line-height:140%;}
.pop-cont{padding:10px;}
.pop-cont > input[type=text]{font-size:1.5rem;color:#666; width:100%; height:5rem; padding:0 1rem; margin:.5rem 0; box-sizing: border-box; border: 2px solid #f9f9f9; -webkit-transition: 0.5s; transition: 0.5s; outline: none;}
.pop-cont > input[type=text]:focus{border: 2px solid rgba(52, 54, 138,1);}
.pop-cont > input::placeholder{color:#999999; font-weight:300; font-size:1.5rem;}
.pop-cont > .btn_ok{text-align:center; vertical-align:middle; display:block;background-color:#34368a; color:#fff; padding:2rem 0; transition: all 0.3s ease-in-out; font-size:1.6rem; border-radius:1rem;}
.pop-cont >.auth-box-con01 input[type=text], .pop-cont >.auth-box-con02 input[type=text]{font-size:1.5rem;color:#666; width:100%; height:5rem; padding:0 1rem; margin:.5rem 0; box-sizing: border-box; border: 2px solid #f9f9f9; -webkit-transition: 0.5s; transition: 0.5s; outline: none;}
.pop-cont >.auth-box-con01 input[type=text]:focus, .pop-cont >.auth-box-con02 input[type=text]:focus{border: 2px solid rgba(52, 54, 138,1);}
/* [2026-07-24] 비번찾기 PIN 입력칸: #anypinFindBox 안에 있어 '.pop-cont > input'(직접자식) 규칙을 못 받아 좁게 보였음. 동일 스타일 부여. */
/* [2026-07-28] 비밀번호 찾기 가상키패드 — 2차 인증(auth_2fa.css)과 동일 처리.
벤더(xk_dialog_*)는 키패드를 position:absolute 로 띄워 아래 버튼·안내문을 덮는다.
relative 로 되돌리면 문서 흐름에 들어와 아래 요소를 자연스럽게 밀어낸다.
★폭은 반드시 max-content 로 둘 것 — 카드 폭으로 줄이면 키가 줄바꿈되어 배열이 깨진다
(2차 인증에서 실측: 5·0·[입력완료] 가 다음 줄로 흘러내림). 카드에 맞추는 건 apFindFitKeypad 의 scale 담당. */
#anypinFindBox [id^="xk_dialog_"]{
position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
margin:.8rem auto 0 !important; z-index:auto !important;
width:max-content !important; max-width:none !important;
transform-origin:top center; }
/* [2026-07-28 2차] ★overflow 를 걷어냈다. CSS 규격상 한쪽이 visible 이 아니면 나머지도 auto 로 강제되어
(overflow-y:visible 이 무시됨) 키패드 안쪽에 스크롤바가 이중으로 생겼다 — 2차 인증에서 실측한 것과 같은 결함.
★position:relative 는 apFindFitKeypad 가 kp.offsetTop 으로 필요한 높이를 계산하기 위해 필요하다
(이 박스가 offsetParent 여야 확대분만큼 아래 요소가 정확히 밀린다). auth_2fa.css #anypinInputBox 와 동일. */
#anypinFindBox{ max-width:100%; position:relative; }
/* [2026-08-05] 패턴 격자 위 안내문("등록한 패턴을 그려주세요") — 서정대 지적: 글씨가 작다.
그 문구는 우리가 SetPinElement 옵션으로 넘긴 값인데 요소는 벤더가 만들어 클래스가 없다.
→ index.jsp 의 apFindStylePatternText 가 우리 문구를 찾아 이 클래스를 붙인다. */
#anypinFindBox .apn-guide-tx{ font-size:1.5rem !important; font-weight:600; line-height:1.6;
color:#333 !important; margin-bottom:.6rem; word-break:keep-all; text-align:center; }
#anypinFindBox input[type=text]{font-size:1.5rem;color:#666; width:100%; height:5rem; padding:0 1rem; margin:.5rem 0; box-sizing:border-box; border:2px solid #f9f9f9; outline:none;}
#anypinFindBox input[type=text]:focus{border:2px solid rgba(52, 54, 138,1);}
.pop-cont >.auth-box-con01 input::placeholder, .pop-cont >.auth-box-con02 input::placeholder{color:#999999; font-weight:300; font-size:1.5rem;}
.pop-cont >.auth-box-con01 .btn_ok, .pop-cont >.auth-box-con02 .btn_ok{text-align:center; vertical-align:middle; display:block;background-color:#34368a; color:#fff; padding:2rem 0; transition: all 0.3s ease-in-out; font-size:1.6rem; border-radius:1rem;}
.pop-cont >.auth-box-con01 .text{position:relative;font-size:1.5rem;margin:0 5px 20px 5px; color:rgba(0,0,0,.8);line-height:140%; margin-top:1rem;}
.check_pw .pop-cont{padding:10px; display:flex; gap:1rem;position:absolute; bottom:1rem; width:100%;}
.check_pw .pop-cont a.btn_ok{text-align:center; vertical-align:middle; display:block;background-color:#34368a; color:#fff; padding:2rem 0; transition: all 0.3s ease-in-out; font-size:1.6rem; border-radius:1rem; width:100%;}
.pop-cont01{padding:10px; display:flex; gap:1rem;position:absolute; bottom:1rem; width:100%;}
.pop-cont01> a{text-align:center; vertical-align:middle; display:block;background-color:rgba(172,173,176,1);; color:#fff; padding:2rem 0; transition: all 0.3s ease-in-out; font-size:1.6rem; border-radius:1rem; width:calc(100% /2); }
.pop-cont01> a.btn_ok{text-align:center; vertical-align:middle; display:block;background-color:#34368a; color:#fff; padding:2rem 0; transition: all 0.3s ease-in-out; font-size:1.6rem; border-radius:1rem;}
.pop-cont09{padding:10px; display:flex; gap:1rem; bottom:1rem; width:100%;}
.pop-cont09> a{text-align:center; vertical-align:middle; display:block;background-color:rgba(172,173,176,1);; color:#fff; padding:2rem 0; transition: all 0.3s ease-in-out; font-size:1.6rem; border-radius:1rem; width:100%; }
.pop-cont09> a.btn_ok{text-align:center; vertical-align:middle; display:block;background-color:#34368a; color:#fff; padding:2rem 0; transition: all 0.3s ease-in-out; font-size:1.6rem; border-radius:1rem;}
.pop-perinfo-cont{padding:1rem;}
.check_wrap01{width:100%; position:relative; display:inline-block;}
.check_wrap01 ul{display:inline-block; width:100%;}
.check_wrap01 li {border-bottom:1px solid rgba(0,0,0,.1); padding:.5rem 1rem 1rem 1rem; display:flex;flex-direction: column;}
.check_wrap01 li div{width:100%; display:flex; align-items:center; justify-content:space-between;}
.check_wrap01 button.con_more{float:right; padding:.5rem 1.5rem; border-radius:.5rem; background-color:rgba(0,0,0,.1); font-size:1.4rem }
.check_wrap01 li.all_check{ background-color:rgba(0,0,0,.05); padding-top:1rem; color:rgba(34, 48, 119, 1); font-weight:700;}
.check_wrap01 li p.check_con{ display:none; width:100%; display:inline-block; border:1px solid rgba(0,0,0,.06); padding:1rem; color:rgba(0,0,0,.8); font-weight:300; font-size:1.2rem; margin-top:.5rem; border-radius:.5rem; max-height:12rem; overflow-y:auto;}
.check_wrap01 .a_box{padding:0 1rem;}
.check_wrap01 a{ color: #5969ff;border-bottom: 1px dotted #5969ff; font-weight:600; font-size:1.4rem; margin:2rem auto 0 auto; display:inline-block;}
/*체크박스 시작*/
.agreeCheck {text-align: right;font-size: 1.5rem;}
.check_wrap01 li label{font-size:1.6rem; font-weight:400;}
.check_wrap01 .checkbox {position: relative;display: flex;align-items: center;gap: 4px;cursor: pointer;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
.check_wrap01 .checkbox input {position: absolute;width: 0;left: 50px;height: 0;opacity: 0;cursor: pointer; }
.check_wrap01 .checkbox .checkmark {position: relative;display: block;top: 0;left: 0; width: 16px;height: 16px;background:rgba(0,0,0,.1);border-radius: 3px;outline: 1px solid rgba(0,0,0,.1);transition: all 0.2s ease;}
.check_wrap01 .checkbox:hover .checkmark {background:rgba(0,0,0,.2);transition: all 0.2s ease;}
.check_wrap01 .checkbox input:checked ~ .checkmark {background: #3f7fed;outline: 1px solid rgb(95, 126, 240);}
.check_wrap01 .checkbox input[type="radio"] ~ .checkmark { border-radius: 50%;}
.check_wrap01 .checkbox .checkmark::before {position: absolute;display: block; opacity:1;content: "";left: 50%;top: 40%;width: 4px;height: 8px;border: solid rgba(0,0,0,.1);border-width: 0 2px 2px 0;transform: translate(-50%, -50%) rotate(45deg);-webkit-transform: translate(-50%, -50%) rotate(45deg);-moz-transform: translate(-50%, -50%) rotate(45deg);-ms-transform: translate(-50%, -50%) rotate(45deg);transition: all 0.2s ease;}
.check_wrap01 .checkbox .checkmark::after {position: absolute;display: block;content: "";left: 50%;top: 40%;width: 4px;height: 8px;border: solid white;border-width: 0 2px 2px 0;transform: translate(-50%, -50%) rotate(45deg);-webkit-transform: translate(-50%, -50%) rotate(45deg);-moz-transform: translate(-50%, -50%) rotate(45deg);-ms-transform: translate(-50%, -50%) rotate(45deg);opacity: 0;transition: all 0.2s ease;}
.check_wrap01 .checkbox input:checked~ .checkmark::after {opacity: 1;transition: all 0.2s ease;}
/*체크박스 끝*/
.auth-box{margin:0 0 10px 0;padding:20px;text-align:center;box-sizing:border-box;background:#f6f6f6;border:1px solid #dfdede; font-size:1.6rem;}
.auth-box label{display:inline-block;vertical-align:middle;}
.auth-box label input[type='radio']{margin:0 5px 0 0;vertical-align:middle;}
/* [2026-07-23] 인증수단 타일형(3개씩 그리드) — 라디오 대신 카드 선택. 2차인증(auth_2fa.css)과 통일감. */
.auth-box.auth-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; padding:1.2rem; text-align:left; }
.auth-box.auth-tiles, .auth-box.auth-tiles *{ box-sizing:border-box; }
.auth-box.auth-tiles .auth-tile{ display:flex; align-items:center; justify-content:center;
min-height:5rem; padding:1.2rem .8rem; background:#fff; border:2px solid #e3e4ee; border-radius:.8rem;
cursor:pointer; text-align:center; transition:border-color .15s, background .15s, box-shadow .15s; }
.auth-box.auth-tiles .auth-tile input[type='radio']{ position:absolute; opacity:0; width:0; height:0; margin:0; }
/* [2026-07-28] 수단 타일에 아이콘 추가 — 2차 인증 모달과 달리 여기는 '흰 바탕에 글자만' 이었다.
격자는 유지한다(수단이 7개라 1열 리스트로 바꾸면 오히려 더 길어져 스크롤이 늘어난다).
아이콘은 라벨 왼쪽에 작게 두어 행 높이를 키우지 않는다.
★svg 에 width/height '속성'을 반드시 둔다 — WebKit(아이폰)은 속성 없는 svg 를 flex 아이템으로
배치할 때 CSS 값을 무시하고 내재크기(300×150)로 그려 타일이 겹쳐 보인다(2차 인증에서 실측). */
.auth-box.auth-tiles .auth-tile{ gap:.7rem; }
.auth-box.auth-tiles .auth-tile .at-ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
width:2.8rem; height:2.8rem; border-radius:.7rem; overflow:hidden;
background:rgba(52,54,138,.07); color:#34368a; }
.auth-box.auth-tiles .auth-tile .at-ic svg{ flex:0 0 auto; width:1.9rem; height:1.9rem; max-width:1.9rem; max-height:1.9rem; }
.auth-box.auth-tiles .auth-tile:has(input:checked) .at-ic,
.auth-box.auth-tiles .auth-tile.sel .at-ic{ background:#34368a; color:#fff; }
.auth-box.auth-tiles .auth-tile .at-tx{ font-size:1.55rem; color:#555; font-weight:500; line-height:1.3; min-width:0; word-break:keep-all; }
.auth-box.auth-tiles .auth-tile .at-tx small{ display:block; font-size:1.05rem; color:#9a9a9a; font-weight:400; }
.auth-box.auth-tiles .auth-tile:hover{ border-color:#9aa0e0; box-shadow:0 .4rem 1.2rem rgba(52,54,138,.10); }
.auth-box.auth-tiles .auth-tile:has(input:checked){ border-color:#34368a; background:#f5f7ff; box-shadow:0 .4rem 1.2rem rgba(52,54,138,.16); }
.auth-box.auth-tiles .auth-tile:has(input:checked) .at-tx{ color:#34368a; font-weight:700; }
/* :has() 미지원 브라우저 폴백 — JS가 .sel 부여 */
.auth-box.auth-tiles .auth-tile.sel{ border-color:#34368a; background:#f5f7ff; box-shadow:0 .4rem 1.2rem rgba(52,54,138,.16); }
.auth-box.auth-tiles .auth-tile.sel .at-tx{ color:#34368a; font-weight:700; }
@media (max-width:480px){ .auth-box.auth-tiles{ grid-template-columns:repeat(2,1fr); } }
/* ─────────────────────────────────────────────────────────────────────────────
[2026-07-27] 아이디찾기/비밀번호찾기 — 개인정보처리방침 접기(김경용 과장 요청)
본문이 길어 모달 안에서 스크롤이 길어지는 문제. 제목(.policy-fold)을 눌러야 펼쳐지도록 기본 접힘.
※ display:none 이 아니라 max-height:0 으로 접는 이유: 펼칠 때 높이 전환이 자연스럽고,
내부 텍스트가 DOM 에 그대로 남아 기존 스크립트/접근성(읽기)에 영향이 없다.
※ 동의 체크박스(.agreeCheck)는 접힘과 무관하게 항상 보인다(동의 자체는 필수이므로).
───────────────────────────────────────────────────────────────────────────── */
.service-initialization .tit1.policy-fold{ cursor:pointer; user-select:none; padding-right:2.4rem; }
/* 오른쪽 화살표(▾) — 펼쳐지면 180도 회전해 상태를 보여준다 */
.service-initialization .tit1.policy-fold::after{ content:""; position:absolute; right:.4rem; top:50%;
width:0; height:0; border-left:.5rem solid transparent; border-right:.5rem solid transparent; border-top:.6rem solid #34368a;
transform:translateY(-50%) rotate(0deg); transition:transform .2s ease; }
.service-initialization .tit1.policy-fold.open::after{ transform:translateY(-50%) rotate(180deg); }
.service-initialization .scrolly.policy-body{ max-height:0; height:auto; margin:0; padding:0 10px; border-width:0;
overflow:hidden; transition:max-height .25s ease, padding .25s ease; }
.service-initialization .tit1.policy-fold.open + .scrolly.policy-body{ max-height:14rem; overflow-y:scroll;
margin:0 0 5px 0; padding:10px; border-width:1px; }
/* [2026-07-27] 카메라/휴대폰이 필요한 수단 표시(여권 촬영·안면). 빨간 작은 글씨. */
.auth-box.auth-tiles .auth-tile .at-tx small.need-cam{ display:block; margin-top:.2rem; color:#e3384c; font-weight:600; font-size:1.05rem; line-height:1.25; word-break:keep-all; }
/* ─────────────────────────────────────────────────────────────────────────────
[2026-07-28] 아이디찾기/비밀번호찾기 — 스텝 전환(모바일 신분증 방식, 김경용 과장 요청)
"단계별로 스크롤해서 내려가는 방식보다는, 화면을 바꿔가면서 진행하는 것".
1단계(.fs-s1) = 개인정보처리방침 동의 + 인증수단 타일
2단계(.fs-s2) = 선택한 수단의 입력폼 (+ 상단 ‹ 뒤로 막대 .fs-stepbar)
방침 접기(위 .policy-fold)만으로는 수단이 7개인 비밀번호찾기에서 세로 스크롤이 여전히 길었다.
※ 2차 인증 화면(auth_2fa.css 의 .tfa_wrap.step2)과 같은 원리 — DOM 은 그대로 두고 표시만 전환한다.
※ 색·굵기는 이 파일의 기존 토큰(#34368a)을 그대로 쓴다.
───────────────────────────────────────────────────────────────────────────── */
.pop-box.fs-steps .fs-stepbar{ display:none; align-items:center; gap:.6rem; padding:1rem 1rem .2rem; }
.pop-box.fs-steps.fs-step2 .fs-stepbar{ display:flex; animation:fsStepBarIn .22s ease; }
/* 수단 이름 — 좁은 폭에서 어절 단위로 줄바꿈(keep-all)하고 min-width:0 으로 flex 트랙을 묶어
긴 이름('여권 인증(외국인)')이 모달을 가로로 밀지 못하게 한다. */
.pop-box.fs-steps .fs-step-title{ min-width:0; font-size:1.9rem; font-weight:700; color:#34368a;
line-height:1.3; word-break:keep-all; overflow-wrap:break-word; }
.pop-box.fs-steps .fs-back{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
width:3.4rem; height:3.4rem; border-radius:50%; font-size:2.8rem; line-height:1;
color:#34368a; text-decoration:none; cursor:pointer; }
.pop-box.fs-steps .fs-back:hover{ background:rgba(52,54,138,.08); }
@keyframes fsStepBarIn{ from{ opacity:0; } to{ opacity:1; } }
/* 단계별 표시 전환.
!important 를 쓰는 이유: 2단계 요소 중 일부(#anypinFindBox·#zmotpFindBox·.auth-box-con01)는
기존 JS 가 인라인 style 로 show/hide 한다. 인라인이 이겨버리면 1단계 화면에 입력칸이 튀어나온다.
반대 단계에서는 이 규칙 자체가 매칭되지 않으므로, 2단계 안에서의 수단별 표시 제어는 기존 JS 그대로다. */
.pop-box.fs-steps:not(.fs-step2) .fs-s2{ display:none !important; }
.pop-box.fs-steps.fs-step2 .fs-s1{ display:none !important; }
/* [2026-07-28 2차] 3단계(.fs-s3) 추가 — 이번에 새로 붙인 본인확인 수단(OTP·안면·PIN·패턴) 전용.
2단계에서 학번·이름·생년월일만 받아 서버 사전조회를 끝내고, 통과한 뒤에 3단계에서
실제 인증(6자리 입력·얼굴 촬영·PIN·패턴)을 받는다. 이렇게 나눈 이유:
① 사전조회가 이미 논리적 관문이다 — 신원이 확인돼야 수단 입력이 의미가 있는데,
한 화면에 다 두면 확인 전에 키패드를 눌러 '헛입력'을 하게 된다.
② 미등록 안내가 빨라진다 — 전에는 PIN 을 다 입력하고 [초기화]를 눌러야
"PIN 은 등록돼 있지 않습니다"가 떴다(입력이 통째로 버려짐).
③ 카메라 권한 — 안면은 fetch 콜백이 아니라 사용자가 직접 누른 버튼에서 열려야
브라우저(특히 iOS)가 촬영을 막지 않는다.
④ 세로 길이 — 입력 3칸 + 확대된 가상키패드 + 버튼이 한 화면에 들어가지 않는다.
※아이핀·휴대폰은 NICE 위젯이 자체 창을 띄우므로 기존 2단계 그대로 둔다. */
.pop-box.fs-steps:not(.fs-step3) .fs-s3{ display:none !important; }
.pop-box.fs-steps.fs-step3 .fs-s1{ display:none !important; }
.pop-box.fs-steps.fs-step3 .fs-stepbar{ display:flex; animation:fsStepBarIn .22s ease; }
/* 2·3단계에 모두 남아야 하는 것(주의사항 안내 등) */
.pop-box.fs-steps:not(.fs-step2):not(.fs-step3) .fs-s23{ display:none !important; }
/* [2026-07-28 3차] 사용할 수 없는 수단은 선택 자체가 안 되게 잠근다.
등록 여부는 사용자마다 다르므로 1단계(학번·이름·생년월일) 이후에 JS 가 칠한다.
※PIN·패턴은 '서버 등록'뿐 아니라 '이 기기 보유'까지 봐야 한다 — 자격이 기기에 저장되기 때문(No-PKI). */
.auth-box.auth-tiles .auth-tile.tile-off{ opacity:.45; cursor:not-allowed; background:#f4f4f4; }
.auth-box.auth-tiles .auth-tile.tile-off input{ pointer-events:none; }
.auth-box.auth-tiles .auth-tile .at-tx small.at-off{ display:none; }
.auth-box.auth-tiles .auth-tile.tile-off .at-tx small.at-off{
display:block; margin-top:.3rem; color:#777; font-weight:600; font-size:1.2rem;
line-height:1.3; word-break:keep-all; }
/* 잠긴 이유 안내 — 타일 위에 한 줄로. */
.tile-notice{ margin:1rem 0 0; padding:1.2rem 1.4rem; background:#fff6f6; border:1px solid #f3d3d3;
border-radius:.6rem; color:#c0392b; font-size:1.45rem; line-height:1.55; word-break:keep-all; }
/* [2026-07-29] 3단계 안내문이 브라우저 기본 크기로 나왔다(매니저님 지적 "글씨가 너무 작다").
원인은 어제 OTP 입력칸과 같다 — 기존 규칙이 '.service-initialization .text'(1단계 전용)와
'.pop-cont > .auth-box-con01 .text'(직접자식 선택자)로만 좁게 걸려 있어서,
나중에 추가한 #faceFindBox·#zmotpFindBox 안의 .text 에는 아무 규칙도 적용되지 않았다.
→ 모달 본문과 같은 크기(1.5rem)로 맞춘다. */
/* ※규칙이 없으면 html{font-size:10px} 을 그대로 상속해 10px 로 나온다.
모바일에서 "글씨가 너무 작다"고 보이던 것이 그 상태였고, 원인은 브라우저가 이전 login.css 를
캐시하고 있었던 것이다(새로고침하니 정상 확인 — 2026-07-29). 크기는 1.5rem 으로 확정. */
#faceFindBox .text, #zmotpFindBox .text, #anypinFindBox .text{
position:relative; font-size:1.5rem; line-height:1.55; color:rgba(0,0,0,.8);
margin:1rem .5rem 1.5rem; word-break:keep-all; }
/* 본인확인 통과를 알리는 줄 — 상태 변화이므로 색과 굵기로 분명히 구분한다. */
#faceFindBox .fs-done{ margin:.5rem .5rem 0; font-size:1.6rem; font-weight:700; color:#1d7a3a;
line-height:1.5; word-break:keep-all; }
/* [2026-07-28 2차] OTP 6자리 입력칸이 너무 작다는 지적 — 원인은 적용되는 규칙이 하나도 없어서다.
#anypinFindBox 에는 전용 규칙(위)이 있는데 #zmotpFindBox 는 빠져 있었고,
'.pop-cont > .auth-box-con01 input' 은 직접자식 선택자라 이 박스 안의 input 에는 걸리지 않는다.
→ 브라우저 기본 크기로 렌더됐다. 인증번호는 6자리 숫자만 넣는 칸이므로
크게·가운데·자간을 벌려 한 눈에 확인하며 입력하도록 한다. */
#zmotpFindBox input[type=text]{
width:100%; height:6rem; box-sizing:border-box; margin:.5rem 0;
font-size:2.8rem; font-weight:700; letter-spacing:.8rem; text-indent:.8rem; text-align:center;
color:#333; border:2px solid #f9f9f9; outline:none; font-variant-numeric:tabular-nums; }
#zmotpFindBox input[type=text]:focus{ border:2px solid rgba(52,54,138,1); }
#zmotpFindBox input[type=text]::placeholder{ font-size:1.5rem; font-weight:400; letter-spacing:normal;
text-indent:0; color:#999; }
/* 모바일 — 폭 고정값(min-width/px)을 쓰지 않아 좁은 화면에서도 가로 스크롤이 생기지 않는다. */
@media (max-width:480px){
.pop-box.fs-steps .fs-stepbar{ padding:.6rem .6rem .2rem; }
.pop-box.fs-steps .fs-step-title{ font-size:1.8rem; }
.pop-box.fs-steps .fs-back{ width:3.2rem; height:3.2rem; font-size:2.6rem; }
}
.pop-box{overflow:hidden;}
.ex-txt{margin:1rem; padding:20px;font-size:1.6rem;color:#666;box-sizing:border-box;background:#f6f6f6;border:1px solid #dfdede;}
.ex-txt p:nth-child(1){position:relative;font-size:1.6rem; margin:0 .5rem 1rem 0 !important;padding:0 0 0 2rem; color:#34368a !important;}
.ex-txt p:nth-child(1)::before{content: ""; display:block;position: absolute; left: 0; top: 50%;transform: translateY(-50%); width:1.8rem; height: 1.8rem; background:url('./../images/sso_login/note_icon.png')left center / 100% no-repeat;}
.ex-txt p{margin:0 10px 0 0 !important;font-size:1.5rem; line-height:140%;}
.ex-txt span{color:#34368a; font-weight:700;}
.pop-icon-box{ width:100%; display:inline-block;}
span.check_con01{margin:0 auto 5rem auto !important; width:8rem; height:8rem; border-radius:50%; display:block; }
span.check_con01{background:#e9edfc url('./../images/sso_login/check01_icon.png')center center /4.0rem 2.5rem no-repeat;}
span.check_pw_con{margin:0 auto 5rem auto !important; width:8rem; height:8rem; border-radius:50%; display:block; }
span.check_pw_con{background:#e9edfc url('./../images/sso_login/check_pw_icon.png')center center /3.5rem 4.4rem no-repeat;}
.office365 img{width:300px; height: 100px;}
.pop_Head {width:100%;height:5rem;font-size: 2.0rem;letter-spacing: -1px;text-align: center;padding: 1.2rem;background-color:#f8f8f8; font-weight:600; color:#333; position:relative;}
#close, #close01{height: 5rem;width: 6rem;position: absolute;top: 0;right: 0;font-size: 2.6rem;}
#close02 {height: 5rem;width: 6rem;position: absolute;top: 0;right: 0;font-size: 2.6rem; color:#000;}
.close, .close01{ height: 5rem; width:6rem; position:absolute; top:0; right:0;font-size:2.6rem;}
.close02 { height: 5rem; width:6rem; position:absolute; top:0; right:0;font-size:2.6rem; }
.pop-btn {display: inline-flex;/*width: 50%;*/ height: 100%; float: left; justify-content: center; align-items: center; color: #FFF; cursor: pointer;}
.b_button_area{display:inline-block;text-align:center;display: flex;flex-wrap: wrap;justify-content: center; gap:1rem; margin-bottom:2rem;}
.b_button_area button{font-size: 1.6rem; padding:1.5rem 2rem; background-color:rgba(188, 188, 188, .4) ; border-radius:1rem;}
.b_button_area button:hover{background-color:rgba(188, 188, 188, .6) ; }
/*.b_button_area button{font-size: 1.8rem; padding:1.5rem 2rem; background-color:rgba(87,93,127,.5); border-radius:1rem; color:#fff;}*/
.pop-write-cont {margin: 0 auto 2rem; padding: 0 2rem;max-width:100%;overflow: hidden; font-size:1.6rem; font-weight:300;}
.pop-write-cont .b-top-box{padding:2rem; background: #f1f4f7; border-bottom: 1px solid #d2d2d2;}
.pop-write-cont .b-info-box {display: flex;flex-direction: column; align-items: stretch;padding: 0;}
.pop-write-cont .b-write-box {float: none; padding:0; width: auto; border-top:1px solid #dedede;}
.pop-write-cont .b-write-box dl{border-bottom: 1px solid #dedede; display:flex; width:100%; }
.pop-write-cont .b-write-box dl dt{margin: 0 1rem 0 0; padding:1rem; font-size: 1.6rem; float:left; color:rgba(0,0,0,1); width:15rem; background-color:#f1f4f7;height:auto;}
.pop-write-cont .b-write-box dl dt::after{content: ' *'; color:red;}
.pop-write-cont .b-write-box dl dd{ width:calc(100% - 17rem); }
.pop-write-cont .b-write-box dl dd label{display:none;}
.pop-write-cont .b-write-box dl dd input[type=text]{padding: .5rem 1rem; margin:.5rem; border: 1px solid rgba(0, 0, 0,.2); font-weight:300; transition: border-color 0.3s ease-in-out}
.pop-write-cont .b-write-box dl dd input[type=text]:focus{padding:.5rem 1rem; border-width: 0.1rem; border-color: rgba(34, 48, 119); /*box-shadow: 0 0 5px rgba(52, 54, 138, 0.5);*/ outline: none;}
.pop-write-cont .b-write-box dl dd textarea {width:calc(100%); padding:.5rem 1rem; margin:.5rem; border: 1px solid rgba(0, 0, 0,.2);transition: border-color 0.3s ease-in-out; min-height:20rem; }
.pop-write-cont .b-write-box dl dd textarea:focus{padding:.5rem 1rem;border-width: 0.1rem;border-color: rgba(34, 48, 119); /*box-shadow: 0 0 5px rgba(52, 54, 138, 0.5);*/ outline: none;}
.pop-write-cont .b-write-box dl dd input[type=file]{padding: .5rem 1rem; font-weight:200; color:rgba(0,0,0,.8)}
.b-btn-box{display:flex; align-content:center; width: 41.2rem;margin-top:1rem;gap:1rem; margin: 1rem auto;}
.b-btn-box > button{display:block; text-align:center; color:#000; font-size:1.8rem; padding:1.5rem; border-radius:1rem;float:left; width:20rem;}
.pop-view-cont {margin: 0 auto 5rem; padding: 0 2rem;max-width:100%;overflow: hidden; font-size:1.6rem; font-weight:300;}
.pop-view-cont .b-top-box{padding:2rem; background: #f1f4f7; border-bottom: 1px solid #d2d2d2; border-top: 1px solid #d2d2d2;}
.pop-view-cont .b-info-box {display: flex;flex-direction: column; align-items: stretch;padding: 0;}
.pop-view-cont .b-etc-box{float: none; padding: 10px; width: auto;border-bottom: 1px solid #dedede;}
.pop-view-cont .b-etc-box ul li{margin: 0 7px 0 0; padding: 0 7px 0 0; font-size: 1.4rem; float:left; color:rgba(0,0,0,.8);}
.pop-view-cont .b-etc-box ul li span{margin:0 .5rem 0 0;}
.pop-view-cont .b-etc-box ul li span:first-child{font}
.b-file-box{justify-content: flex-start; position: relative; float: none; padding: 10px; width: auto; border-bottom: 1px solid #dedede;text-align: left; font-size: 1.4rem; color: rgba(0, 0, 0, .8);}
.b-content-box{padding: 50px 10px 30px; }
.fr-view {word-wrap: break-word;}
footer {
position: relative;
width: 100%;
border-top: 1px solid rgba(0,0,0,.1);
margin: 2rem auto 0 auto;
font-size: 1.6rem;
padding: 2rem 0;
}
.footer_t{width:70%;margin:0 auto 4rem auto; }
.footer_t a{ padding:1rem; font-size:1.8rem; position:relative; }
.footer_t a:first-child{color:rgba(34, 48, 119);}
.footer_t a:after{content:"|"; display:block; position:absolute; right:-1.2rem; top:1.5rem;padding-right:1rem; font-size: 1.2rem; font-weight:100; color:rgba(0,0,0,.4);}
.footer_t a:last-child:after{display:none;}
.footer_b{width:70%; margin:0 auto; color:rgba(0,0,0,.8); line-height:180%;}
@media all and (max-width:1920px) {
#tab1.tab_content > div .login_btn{ width:100%; text-align:center; background:rgba(34, 48, 119); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem;}
.banner_wrap{gap:1rem;}
}
@media all and (max-width:1704px) {
#tab1.tab_content > div{padding:5rem 2rem; }
.QuickMenu{}
}
@media all and (max-width:1600px) {
#tab1.tab_content > div{padding:5rem 2rem; }
#tab1.tab_content > div .login_btn{ width:100%;}
}
@media all and (max-width:1480px) {
/* box가 4개 일때
#tab1.tab_content{display:inline-block; align-items:center; justify-content:center; gap:3rem; }
#tab1.tab_content > div{display:inline-block; float:left; width: calc((100% - 4rem)/2); padding:3rem 2rem; margin:1rem;}
.tab_content div:nth-child(3){clear:both;}
#tab1.tab_content > div .login_btn{ width:100%;}
.login_ok #tab1.tab_content > div{ width: calc((100%));}
#banner_area{width:90%; margin:0 auto 2% auto;}
.banner_wrap{gap:1rem;}
*/
#tab1.tab_content{display:inline-block; align-items:center; justify-content:center; gap:3rem; }
#tab1.tab_content > div:last-child{width: calc((100% - 2rem));}
#tab1.tab_content > div{display:inline-block;float:left;width: calc((100% - 4rem)/2);padding:3rem 2rem;/*min-height:44rem;*/margin:1rem;}
.tab_content div:nth-child(3){}
#tab1.tab_content > div .login_btn{ width:100%;}
/*.login_ok #tab1.tab_content > div{ width: calc((100%));}*/
#banner_area{width:90%; margin:0 auto 2% auto;}
.banner_wrap{gap:1rem;}
}
@media all and (max-width:1200px) {
#tab2.tab_content > div.login_box_con05 > div:nth-of-type(1){width:30%;}
#tab2.tab_content > div.login_box_con05 > div:nth-of-type(2){width:70%;}
#tab1.tab_content > div .login_btn{ width:100%;}
#login_box, #login_box.login_ok{ width:92%; margin:8% auto; }
#login_box_02{ width:92%; margin:8% auto;}
.tab_container .tab_content { width:100%; padding: 2rem;}
.tab_container .tab_content.active h3{}
.tab_container .tab_content.active .inner{display:none;}
.tab_container01 .tab_content01 { width:100%; padding: 2rem;}
.tab_container01 .tab_content01.active h3{}
.tab_container01 .tab_content01.active .inner{display:none;}
.login_set{padding: 0 2rem 4rem 2rem;}
footer{margin:2rem auto 0 auto; font-size:1.5rem;}
.footer_t{width:92%; }
.footer_t a{ font-size:1.6rem; }
.footer_b{width:92%;}
.QuickMenu{max-width:100%;}
}
@media all and (max-width:816px) {
body{height:auto;}
.wrapper{background: linear-gradient(to bottom, rgba(46, 111, 235, 1) 60%, rgba(247, 248, 252, 1) 30%) no-repeat;}
.QuickMenu .swiper{/*min-width:36rem;*/}
.QuickMenu .swiper-slide{display:block; float:left; width:9.5rem !important; height:9.5rem; margin:.5rem .5rem;}
.QuickMenu .swiper-slide a{ display:block; height:100%; color:#fff; font-size:1.4rem;}
.QuickMenu .swiper-slide a::before{content: ""; height:4rem;display:block;overflow: hidden; background:url('./../images/sso_login/quick_icon.png') no-repeat; background-size:45.6rem 3.8rem; margin:1rem auto 1rem auto;}
.QuickMenu .swiper-slide .repre a::before{width:3.2rem; background-position:0 0;}
.QuickMenu .swiper-slide .integrate a::before{width:3.3rem; background-position:-3.5rem 0;}
.QuickMenu .swiper-slide .manage a::before{width:3.9rem; background-position:-6.9rem 0;}
.QuickMenu .swiper-slide .webmail a::before{width:3.2rem; background-position:-11rem 0;}
.QuickMenu .swiper-slide .groupware a::before{width:2.6rem; background-position:-14.6rem 0;}
.QuickMenu .swiper-slide .ncsedu a::before{width:2.2rem; background-position:-20.1rem 0;}
.QuickMenu .swiper-slide .eclass a::before{width:2.7rem; background-position:-17.3rem 0;}
.QuickMenu .swiper-slide .success a::before{width:2.8rem; background-position:-22.6rem 0;}
.QuickMenu .swiper-slide .cmssst a::before{width:2.8rem; background-position:-25.5rem 0;}
/*.QuickMenu ul li.webmai a::before{width:2.8rem; background-position:-26.5rem 0;}*/
.QuickMenu .swiper-slide .fncsst a::before{width:3.8rem; background-position:-28.6rem 0;}
.QuickMenu .swiper-slide .lifeedu a::before{width:2.9rem; background-position:-32.3rem 0;}
.QuickMenu .swiper-slide .library a::before{width:3.4rem; background-position:-35.3rem 0;}
.QuickMenu .swiper-slide .heyoung a::before{width:3.6rem; background-position:-38.7rem 0;}
.QuickMenu ul li.active a{background-color:rgba(255,255,255,.05); backdrop-filter: blur(4px); border:1px solid rgba(255,255,255,.6);/*rgba(0,0,0,.5)rgba(50,80,235,.5)*/ opacity:1;}
/* 세로 여백을 % → rem 으로. % 세로 여백은 부모 너비 기준이라 큰 화면(태블릿)일수록
벌어진다 — PC 에서 고친 것과 같은 이유다(10%·14% = 816px 폭에서 82px·114px). */
.login_wrap > header{ margin-top:1.6rem; }
#banner_area{ margin:0 auto 4.6rem auto; } /* 탭 겹침 방지 — 위 기본 규칙 주석 참고 */
#login_box, #login_box.login_ok{ width:92%; margin:1.6rem auto 2rem auto; }
#login_box_02{ width:92%; margin:1.6rem auto; }
.login_wrap > header h1 a{ font-size:2.4rem;}
.login_wrap > header h1 span{margin-right:2rem;text-align:center; width:14rem; height:4.2rem; background-size:14rem 4.2rem;}
.login_wrap > header h1 span::after{right:-2.2rem; top:1.2rem;font-size: 1.5rem;}
.tab_container .tab_content { width:100%; padding: 2rem;}
.tab_container .tab_content.active h3{}
.tab_container .tab_content.active .inner{display:none;}
.tab_container01 .tab_content01 { width:100%; padding: 2rem;}
.tab_container01 .tab_content01.active h3{}
.tab_container01 .tab_content01.active .inner{display:none;}
.tabs ul { padding: 0; margin: 0 auto; width:30rem; }
.tabs li {top:-4rem; width:30rem;}
#tab1.tab_content{flex-wrap: wrap; }
#tab1.tab_content > div{ flex: none; width:calc(100%); padding:0; min-height:auto;margin:1rem 0; }
#tab1.tab_content > div.open div.inner, #tab1.tab_content > div.open div.inner_list{max-height:40rem; padding:0 2rem 4.7rem; }
#tab1.tab_content > div > div.inner{max-height:0; overflow:hidden; padding:0 2rem; transition: all .6s ease 0s; }
#tab1.tab_content > div > div.inner_list{max-height:0; overflow:hidden; padding:0 2rem; transition: all .6s ease 0s; }
#tab1.tab_content > div.open h3::after {transform: translateY(-50%)rotate(0deg);}
#tab1.tab_content > div .inner, #tab1.tab_content > div .inner_list{padding:0 2rem 2rem 2rem;}
.login_ok #tab1.tab_content > div{width:100%; padding:0; min-height:auto;margin:1rem 0; }
.tabs li a { font-size:1.8rem;}
#tab1.tab_content > div h3{font-size:1.8rem; font-weight:600; margin-bottom:0; cursor:pointer; margin:2rem;}
#tab1.tab_content > div .login_btn{position:relative; width:100%; bottom:1rem; text-align:center; background:rgba(34, 48, 119); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem; margin-top:2rem;}
#tab1.tab_content > div.login_box_con03 h3::before, #tab1.tab_content > div.login_box_con04 h3::before{ margin-left:.5rem;}
.inner_form, .login_ok .login_box_con04 .form_login_ok{height:auto;}
#tab2.tab_content > div.login_box_con05{width: calc((100%)); text-align:center; min-height:auto; display:inline-block;}
#tab2.tab_content > div.login_box_con05 > div h3 { margin:5% auto; }
#tab2.tab_content > div.login_box_con05 > div{min-height:auto; padding:2rem;}
#tab2.tab_content > div.login_box_con05 > div:nth-of-type(1){width:100%;}
#tab2.tab_content > div.login_box_con05 > div:nth-of-type(2){width:100%;}
#tab2.tab_content > div.login_box_con05 > .cm_inner ol{margin-top:2rem;}
#tab1.tab_content01{flex-direction: column; gap:2rem;}
.tab_container01 #tab1.tab_content01 > div { position: relative; width: calc(100%); padding: 5rem 4rem; min-height:auto;}
#tab1.tab_content01 > div .inner_first > h3{font-size:1.8rem; font-weight:600; margin-bottom:0 !important; cursor:pointer; text-align:center !important; display:inline-block !important; width:100%;}
#tab1.tab_content01 > div .inner_first >.login_btn{position:absolute; display:block; width:100%; text-align:center; background:rgba(34, 48, 119); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem; margin:0 auto; bottom:0; left:50%; transform:translateX(-50%);}
#tab1.tab_content01 > div .inner_first > span{margin:0 auto 2rem auto; width:8rem; height:8rem; border-radius:50%;}
#tab1.tab_content01 > div .inner_first > span.hp_icon{background:#e9edfc url('./../images/sso_login/hp_icon.png')center center /3.5rem 4.3rem no-repeat;}
#tab1.tab_content01 > div .inner_first > span.ipin_icon{background:#e9edfc url('./../images/sso_login/ip_icon.png')center center /3.4rem 4.2rem no-repeat;}
.Info_box {width: 90%;}
#tab1.tab_content01 > div .b-btn-box {width:100%; margin: 1rem auto;}
#tab1.tab_content01 > div .b-btn-box > button {font-size: 1.6rem;padding: 1.5rem;border-radius: 1rem;float: left;width: 50%;}
.form_login_ok{margin:0 0 1rem 0;}
.btn_wrap{position:relative;width:100%; bottom:1rem; margin-top:2rem;}
.etc_container > div.etc_box_con01 > .etc_inner {min-height:auto; padding:2rem;}
#banner_area{}
/* ★[2026-08-11] float → flex. 배너를 로그인 박스 위로 올리면서 눈에 잘 띄게 됐는데,
float:left 격자라 배너가 1개일 때(로그인 후에는 '인터넷 증명 발급' 하나만 나온다)
왼쪽으로 치우쳐 보였다. flex + justify-content:center 면 1개는 가운데, 2개는 나란히 놓인다.
※실측(400px 폭): 1개 → 108~275(가운데), 2개 → 19~187 / 197~364 같은 줄. */
.banner_wrap{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1rem; width:100%;}
.banner_wrap li{width: calc(50% - .5rem); text-align:center; float:none; margin:0; padding:0;}
}
@media all and (max-width:700px) {
}
@media all and (max-width:600px) {
.QuickMenu{width:92%;}
}
@media all and (max-width:597px) {
.QuickMenu{width:auto;}
.QuickMenu ul {max-width: 420px; margin:0 auto; }
.login_set{padding: 0 2rem 8rem 2rem;}
}
@media all and (max-width:442px) {
.QuickMenu{width:auto;}
.QuickMenu ul {max-width: 330px; margin:0 auto;}
}
/* ─────────────────────────────────────────────────────────────────────────────
[2026-07-27] 모바일(아이폰 Safari) — 아이디찾기/비밀번호찾기 모달을 '스크롤 없이 한 화면'에.
과장 요청: 방침은 접고(위 .policy-fold), 입력칸 크기를 줄여 세로 길이를 압축.
· .popup 은 데스크톱에서 height:60rem 고정이라 작은 화면에선 화면 밖으로 나갔다 → 화면 높이에 맞춘다.
· 입력칸 글자는 오히려 1.6rem(=16px)으로 키운다. iOS Safari 는 16px 미만 입력칸에 포커스하면
페이지를 자동 확대(zoom)해 버려 레이아웃이 흔들리는데, 16px 이상이면 그 확대가 일어나지 않는다.
───────────────────────────────────────────────────────────────────────────── */
@media all and (max-width:520px) {
.popup-wrap{ padding:1rem; }
/* height 고정(60rem) 해제 — 내용만큼만 쓰고, 그래도 넘치면 팝업 하나만 스크롤(이중 스크롤 방지).
상한은 100vh 가 아니라 max-height:100%(=부모 .popup-wrap 의 높이) 로 잡는다.
.popup-wrap 은 position:fixed + inset:0 + display:flex 이므로 iOS Safari 에서 '실제로 보이는' 높이를 갖는다.
(100vh 는 사파리에서 주소창을 뺀 높이보다 커서, 팝업 아래쪽이 화면 밖으로 밀린다) */
.popup{ height:auto; max-height:100%; overflow-y:auto; overflow-x:hidden; }
.popup-head{ height:4.8rem; }
.head-title, #popup_list .popup-head .head-title{ font-size:2rem; }
.body-content{ height:auto; padding:1rem 0; }
/* 방침 블록 — 여백 압축 */
.service-initialization{ padding:.6rem; }
.service-initialization .tit1{ font-size:1.6rem; margin-bottom:.4rem; }
.service-initialization .text{ font-size:1.4rem; line-height:1.4; margin:0 .4rem .6rem .4rem; }
.agreeCheck{ font-size:1.5rem; text-align:left; padding:.4rem .4rem 0; }
/* 수단 타일 — 2열 유지하되 높이를 낮춰 여러 줄이어도 한 화면에 */
.auth-box.auth-tiles{ padding:.7rem; gap:.5rem; margin-bottom:.5rem; }
.auth-box.auth-tiles .auth-tile{ min-height:3.8rem; padding:.7rem .5rem; }
.auth-box.auth-tiles .auth-tile .at-tx{ font-size:1.5rem; }
/* 입력칸 — 높이는 줄이고 글자는 16px 이상으로(위 주석의 iOS 자동확대 방지) */
.pop-cont{ padding:.6rem; }
.pop-cont > input[type=text],
.pop-cont > .auth-box-con01 input[type=text],
.pop-cont > .auth-box-con02 input[type=text],
#anypinFindBox input[type=text],
#zmotpFindBox input[type=text]{ height:4.2rem; font-size:1.6rem; margin:.3rem 0; }
.pop-cont > input::placeholder,
.pop-cont > .auth-box-con01 input::placeholder,
.pop-cont > .auth-box-con02 input::placeholder{ font-size:1.5rem; }
.pop-cont > .btn_ok,
.pop-cont > .auth-box-con01 .btn_ok,
.pop-cont > .auth-box-con02 .btn_ok{ padding:1.4rem 0; font-size:1.7rem; }
/* 하단 주의사항 — 정보는 남기되 여백/글자/줄간격을 줄여 세로를 아낀다 */
.ex-txt{ margin:.5rem; padding:.9rem; font-size:1.35rem; }
.ex-txt p{ font-size:1.35rem; line-height:1.35; }
.ex-txt p:nth-child(1){ font-size:1.45rem; margin-bottom:.5rem !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
★[2026-08-07] 로그인 상태 표시줄 — 서정대 11:01 통화 지적.
"스크롤을 아래로 내리면 창이 축소돼버려서 로그인 된 상황인지 안 된 상황인지
확인이 불가능… 모바일에서는 상단에 표시가 안 되다 보니"
종전에는 로그인 상태(#loginInfo)가 '일반 로그인' 카드 안에만 있어, 화면을 조금만
내려도 보이지 않았다. 로그인했을 때만 화면 맨 위에 고정되는 줄을 둔다.
※fixed 를 쓰는 이유: 이 파일 위쪽의 'html, body { overflow-x:hidden }' 이
position:sticky 를 무력화한다. sticky 로 두면 그냥 같이 스크롤돼 올라가버린다.
※fixed 는 문서 흐름에서 빠지므로 body 에 그 높이만큼 padding 을 준다.
.wrapper 가 gradient 배경이라 wrapper 에 margin 을 주면 배경이 잘려 보인다.
═══════════════════════════════════════════════════════════════════════════ */
.login_status_bar{
position:fixed; top:0; left:0; right:0; z-index:9000;
display:flex; align-items:center; gap:.9rem;
height:4.4rem; padding:0 1.6rem; box-sizing:border-box;
background:#12235c; color:#fff;
font-size:1.45rem; line-height:1.3;
box-shadow:0 .2rem .8rem rgba(0,0,0,.18);
}
/* 로그인 중임을 색으로도 알린다 — 글자를 못 읽는 상황에서도 '켜져 있다'가 보인다. */
.login_status_bar .lsb_dot{ flex:0 0 auto; width:.9rem; height:.9rem; border-radius:50%; background:#3ddc84; }
.login_status_bar .lsb_tx{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.login_status_bar .lsb_tx b{ font-weight:700; }
/* 학번은 보조 정보 — 좁은 화면에서는 접는다(이름만으로도 로그인 여부는 판별된다). */
.login_status_bar .lsb_tx em{ font-style:normal; opacity:.72; margin-left:.8rem; font-size:1.3rem; }
.login_status_bar .lsb_out{
flex:0 0 auto; color:#fff; font-size:1.35rem; font-weight:600;
padding:.5rem 1.1rem; border:0.1rem solid rgba(255,255,255,.5); border-radius:.6rem;
}
.login_status_bar .lsb_out:hover{ background:rgba(255,255,255,.14); }
body.has-status-bar{ padding-top:4.4rem; }
@media (max-width:520px){
.login_status_bar{ height:4.8rem; padding:0 1.2rem; font-size:1.5rem; }
.login_status_bar .lsb_tx em{ display:none; } /* 좁은 화면에선 학번을 접는다 */
.login_status_bar .lsb_out{ font-size:1.4rem; padding:.55rem 1rem; }
body.has-status-bar{ padding-top:4.8rem; }
}
/* ★[2026-08-07] 비밀번호 찾기의 PIN 입력칸 세로 축소 — 문서 지적("PIN 번호 입력사이즈 세로 축소").
2차 인증 화면(twoFactor.jsp)은 auth_2fa.css 의 '#stage-pin .tfa_input' 이 처리하는데,
비밀번호 찾기는 index.jsp 이고 index.jsp 는 auth_2fa.css 를 로드하지 않는다(실측).
그래서 같은 취지의 규칙을 이 파일에도 적는다 — 같은 PIN 인데 화면마다 크기가 다르면 안 된다.
★[정정] 여기서는 padding 이 아니라 height 를 줄여야 한다.
위 371행 '#anypinFindBox input[type=text]' 가 height:5rem 으로 높이를 고정하고 있어서
padding 을 바꿔도 세로가 그대로다. 게다가 그 선택자는 1-1-1 이라 '#anypinFindInput'(1-0-0)보다
특정성이 높아 padding 선언 자체도 먹지 않았다(실측: 계산값 0px).
→ 같은 1-1-1 로 맞추고 height 를 낮춘다. 5rem → 4.2rem.
※가로는 건드리지 않는다. 지적도 세로에 한정돼 있다. */
#anypinFindBox input[type=text]#anypinFindInput{ height:4.2rem; }
@media (max-width:520px){
/* 모바일은 벤더 키패드가 커서 더 빠듯하다. */
#anypinFindBox input[type=text]#anypinFindInput{ height:4rem; }
}
/* ★[2026-08-07] 비밀번호 찾기의 패턴 <점·선> 확대 — 2차 인증(auth_2fa.css #patternBox)과 같은 취지.
벤더 patternLock.css 가 '.apn-pattern .patt-dots' 로 10x10px 를 박아두고, 그 파일이
index.jsp 에서 login.css 보다 나중에 로드된다(47행 vs 2918행).
같은 특정성이면 나중이 이기므로, ID(#anypinFindBox)를 붙여 1-1-0 으로 올려야 먹는다.
※격자(터치 영역) 크기는 JS 에서 AnyPin.mPatternUI 로 키운다(index.jsp apFindApplyPatternSize).
이 규칙은 그 위에 보이는 부분만 맞추는 것이다 — 둘은 서로 독립이라 한쪽만 키우면 어색해진다.
※transform-origin 은 height 의 절반으로 함께 바꿔야 선이 점 중심에서 뻗는다.
※터치 판정은 .patt-circ(투명 영역)가 하므로 여기 값은 판정에 영향을 주지 않는다. */
#anypinFindBox .patt-dots{ width:14px; height:14px; border-radius:7px; margin-top:-7px; margin-left:-7px; }
#anypinFindBox .patt-lines{ height:14px; border-radius:7px;
transform-origin:7px 7px; -ms-transform-origin:7px 7px; -webkit-transform-origin:7px 7px; }
/* ★[2026-08-11] 공용 안내창(sso_modal.js) - 브라우저 alert/confirm 대체.
모양은 sso_modal.js 가 맨 앞에 넣는