@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;}

/*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;}*/
.floatL{float:left;}
.floatR{float:right !important;}

body {
    padding: 0;
    margin: 0;
    background: rgba(247, 248, 252, 1);
}
.wrapper{background: linear-gradient(to bottom, rgba(46, 111, 235, 1) 45%, rgba(247, 248, 252, 1) 45%) 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;}
.login_wrap > header{ text-align:center; margin:3% auto 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:4% 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; border:1px solid red;}
#login_box.login_ok{ width:60%; margin:4% auto; padding:0; font-size:1.6rem;height:auto; box-shadow: 0 0 4rem rgba(34, 48, 119, .8); border-radius:2rem;}

.s_wrapper{background:#000 url('./../Images/sso_login/bg_img_ccn02_1.png')  50% 50% /cover; width:100%;height:100vh;font-family: 'Pretendard'; overflow-y:auto;}
/*.s_wrapper {background: linear-gradient(to bottom, rgba(46, 111, 235, 1) 50%, rgba(247, 248, 252, 1) 45%) no-repeat; width: 100%; height: 100vh; font-family: 'Pretendard';}*/
.s_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; font-size:1.6rem;}
.s_login_wrap > header{ text-align:center;margin: 3% auto 1rem auto;}
/*
.s_login_wrap > header h1 span{display:inline-block; position:relative;  background:url('./../Images/sso_login/logo02.png') no-repeat; float:left; margin-right:2rem; margin-top:-1rem; text-align:center; width:18.2rem; height:5.5rem;}
.s_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);}
.s_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;  text-decoration:none;}
*/
.s_login_wrap > header h1 span{display:inline-block; position:relative;  background:url('./../Images/sso_login/logo03.png') no-repeat; background-size:15rem 10.5rem; margin-top:-1rem; text-align:center; width:15rem; height:10.5rem;}
.s_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;  text-decoration:none;}
.s_login_wrap .s_title{color:#fff;display:inline-block; margin:1rem 0 8rem 0; font-size:3.8rem; font-weight:700; line-height:130%;}
.s_login_wrap .s_title > span{display:block; font-size:1.5rem; font-weight:300; letter-spacing:6; }
#login_box{ width:70%; margin:4% 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; border:1px solid red;}
#login_box.login_ok{ width:60%; margin:4% auto; padding:0; font-size:1.6rem;height:auto; box-shadow: 0 0 4rem rgba(34, 48, 119, .8); border-radius:2rem;}


.display_n{display:none !important;}

.box-mbusi:hover p img{
	position:relative;
	animation:moveArrow 0.3s 0s infinite linear alternate ;	
}
.QuickMenu { position:relative;margin:2% auto; margin:0 auto;}
.QuickMenu ul{display:inline-block;margin:0 auto;}
.QuickMenu ul li{display:block; float:left; width:13.5rem; height:13.5rem;  margin:0 .5rem;}
.QuickMenu ul li:hover, .QuickMenu ul li:focus{cursor:pointer;}
.QuickMenu ul li:hover a::before{transform: translateY(-.5rem); }
.QuickMenu ul li a{ display:block; height:100%; color:#fff; font-size:1.6rem; text-align:center;  opacity:.4;}
.QuickMenu ul li a::before{content: ""; height:5rem;display:block;overflow: hidden;background:url('./../Images/sso_login/quick_icon.png') no-repeat; margin:2rem auto 1rem auto; transition: all .3s ease 0s; transform: translateY(0); }
.QuickMenu ul li.repre a::before{width:4.2rem; background-position:0 0;}
.QuickMenu ul li.integrate a::before{width:4.1rem; background-position:-4.6rem 0;}
.QuickMenu ul li.manage a::before{width:5.1rem; background-position:-9.1rem 0;}
.QuickMenu ul li.webmai a::before{width:4.1rem; background-position:-14.6rem 0;}
.QuickMenu ul li.groupware a::before{width:3.3rem; background-position:-19.1rem 0;}
.QuickMenu ul li.ncsedu a::before{width:2.8rem; background-position:-26.5rem 0;}
.QuickMenu ul li.eclass a::before{width:3.3rem; background-position:-22.8rem 0;}
.QuickMenu ul li.success a::before{width:3.5rem; background-position:-29.7rem 0;}
.QuickMenu ul li.cmssst a::before{width:3.7rem; background-position:-33.6rem 0;}

/*.QuickMenu ul li.webmai a::before{width:2.8rem; background-position:-26.5rem 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;}



.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;}
.s_tab_container {background-color:rgba(255, 255, 255, 1); border-radius:2rem;  position: relative; margin:auto; width:60rem; margin-bottom:5rem;}
.s_tab_container .tab_content { /*width:52rem;*/ padding: 4rem 4rem 2rem 4rem;}

.s_tab_container .login_set{padding: 0 4rem 4rem 4rem;}
.s_tab_container .login_set > ul{display:inline-block; width:100%; padding:0;}
.s_tab_container .login_set > ul > li{display:block; float:left; padding-left:0; position:relative;}
.s_tab_container .login_set > ul > li a{text-decoration:none;}
.s_tab_container .login_set > ul > li:hover,.login_set > ul > li:focus{cursor:pointer;}
.s_tab_container .login_set > ul > li:nth-child(1) a{ color:rgba(163,145,97,1);}
.s_tab_container .login_set > ul > li:nth-child(1) a:hover{text-decoration:underline;}
.s_tab_container .login_set > ul > li:nth-child(2) a, .s_tab_container .login_set > ul > li:nth-child(3) a{ border-radius:1rem;}
.s_tab_container .login_set > ul > li:nth-child(2) a:hover, .s_tab_container .login_set > ul > li:nth-child(3) a:hover{background-color:rgba(87, 93, 127, .2);}

.s_tab_container .login_set > ul > li a{ display:block; padding:1rem; color:rgba(0,0,0,.8) }
/*.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);}*/
.s_tab_container .login_set .logout_btn{border-radius:.5rem; padding:.5rem 1rem; background:rgba(87,93,127,.5); color:#fff;}
.s_tab_container .login_set .logout_btn:hover{background:rgba(87,93,127,.8); cursor:pointer;}
.s_tab_container .login_set .check_wrap {display:inline-block;}


.login_set{padding: 0 4rem 4rem 4rem;}
.login_set > ul{display:inline-block; float:right;}
.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; padding-top:.5rem; }
/*.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;}
.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:46rem; }
.tabs li {position:absolute; display:block; background: #f6f7f9;  padding: 20px; text-align: center;margin:0 auto; border-radius:40rem; top:-5rem;  width:46rem; left: 50%; transform: translate(-50%, 0%);}
.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;}
/*
.s_tab_container #tab1.tab_content > div{  padding:3rem 4rem;}
.s_tab_container .tabs {position:relative;}
.s_tab_container .tabs ul { padding: 0; margin: 0 auto;}
.s_tab_container .tabs li {display:block; background: #f6f7f9;  padding: 20px; text-align: center;margin:0 auto; border-radius:40rem;  position:absolute; top:-5rem;  width:46rem;}
.s_tab_container .tabs li.active { background:rgba(34, 48, 119, 1); border-bottom: 0;}
.s_tab_container .tabs li.active a { color: #fff; font-weight:600; }
.s_tab_container .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;}
*/
.s_tab_container #tab1.tab_content > .login_box_con03 p {text-align: left; font-size: 1.6rem; font-weight: 500; color: rgba(0, 0, 0, .8); margin: 0 0 1rem 0;}
.s_tab_container #tab1.tab_content > .login_box_con03 input[type=text], .s_tab_container #tab1.tab_content > .login_box_con03 input[type=password]{width:100%; padding:1.5rem; margin:.4rem 0; border-radius:1rem; border:1px solid rgba(0, 0, 0,.2); transition: border-color 0.3s ease-in-out}
.s_tab_container #tab1.tab_content > .login_box_con03 input[type=text]:focus, .s_tab_container #tab1.tab_content > .login_box_con03 input[type=password]:focus{  border-width: 0.2rem; border-color:rgba(34, 48, 119, 1); /*box-shadow: 0 0 5px rgba(52, 54, 138, 0.5);*/ outline:none;}
.s_tab_container .login_box_con01 input::placeholder{color:rgba(221,222,223);}

.login_btn_box{position:relative; display:flex;gap:1rem; margin-top:2rem;}
.s_tab_container #tab1.tab_content > .login_box_con03 .form_login_ok .login_btn{position:relative; display:block; width:100%; text-align:center; background:rgba(34, 48, 119, .9); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem;cursor:pointer; border:0;}
.s_tab_container #tab1.tab_content > .login_box_con03 .form_login_ok .login_btn:hover, .s_tab_container #tab1.tab_content > .login_box_con03 .form_login_ok .login_btn:focus{background:rgba(34, 48, 119, 1); }

.s_tab_container #tab1.tab_content > .login_box_con03 .form_login_ok .login01_btn{position:relative; display:block; width:100%; text-align:center; background:rgba(87,93,127,.4); color:#fff; font-size:1.8rem; padding:1.5rem; border-radius:1rem; cursor:pointer; border:0;}
.s_tab_container #tab1.tab_content > .login_box_con03 .form_login_ok .login01_btn:hover, .s_tab_container #tab1.tab_content > .login_box_con03 .form_login_ok .login01_btn:focus{background:rgba(87,93,127,.5); }

.s_tab_container #tab1.tab_content > .login_box_con03 .inner_form{position:relative; height:auto; }
.s_tab_container #tab1.tab_content > .login_box_con03 .form_login_ok{ position:relative;}

.s_loginEx01{ line-height:130%; font-size:1.5rem; padding:1rem; margin-top:2rem !important; background:rgba(177, 179, 182, .2); font-weight:400 !important;}
/*.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, #tab2.tab_content{display:flex; flex-direction:row; /*align-items:center;*/  justify-content:center; gap:3rem;}
#tab1.tab_content > div{ position:relative;  flex:1;  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:0 0 1rem 0; 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;}
#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;}

.login_ok #tab1.tab_content > div{ position:relative; width: calc((100%)/2); 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{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: 0 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;}
#tab1.tab_content > div input[type=text]:focus, #tab1.tab_content > div input[type=password]:focus{border: 2px solid rgba(52, 54, 138,1);}
.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;
}
#tab1 .login_box_con03 .inner, #tab1 .login_box_con01 .inner, #tab1 .login_box_con04 .inner, #tab1 .login_box_con02 .inner{/*position:relative; height:24.5rem; margin-bottom:1rem;*/}
.inner_form{position:relative; height:20rem; }
.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;}
.btn_wrap{position:absolute; bottom:0; width:100%; display:none;}
.login_ok .btn_wrap{display:block;}
.login_ok .btn_wrap li{float:left; width:47%;}
.login_ok .btn_wrap li:first-child{ margin:0 3% 0 0;}
.login_ok .btn_wrap li:last-child{ margin:0 0 0 3%;}
.login_ok .btn_wrap li:first-child a{background:rgba(34, 48, 119);}
.login_ok .btn_wrap li:last-child a{background-color:#009bfa;}
.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{display:none;}
.login_ok .login_box_con04 .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;} 


.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;}


#banner_area{width:70%; margin:0 auto 1% auto; padding:0; font-size:1.6rem; height:auto;}
.banner_wrap{display:flex; flex-direction:row; align-items:center;  justify-content:center; gap:3.5rem;}
.banner_wrap li{position:relative; width: calc((100%)/4);  text-align:center; display:block;width:29rem; height:7.5rem;}

.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;}
.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);}
.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:0;  height:54rem; overflow-y:auto;}
.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 15px;}
.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}
.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;}
.agreeCheck {
    text-align: right;
    font-size: 1.5rem;
}
.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;}
.pop-box{overflow:hidden; border:1px solid red;}
.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%;}
.office365 img{width:300px; height: 100px;}

#close, #close01 { height: 5rem; width:6rem; position:absolute; top:0; right:0;font-size:2.6rem; color: #ffffff !important;}

.pop-btn {display: inline-flex;width: 50%; height: 100%; float: left; justify-content: center; align-items: center; color: #ffffff !important; cursor: pointer;}

@media all and (max-width:1920px) {
.s_login_wrap > header{ margin:1% auto 0 auto;}
#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;}
.s_login_wrap .s_title{font-size:3.6rem;}
.s_login_wrap .s_title > span{font-size:1.2rem;}
}
@media all and (max-width:1704px) {
#tab1.tab_content > div{padding:5rem 2rem; }
}
@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) {
#tab1.tab_content{display:inline-block;  align-items:center;  justify-content:center; gap:3rem; }
.s_tab_container #tab1.tab_content{display:flex; align-items:center;  justify-content:center; gap:3rem; }
#tab1.tab_content > div:first-child{width: calc((100%));}
#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_ok #login_box{ 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;}
}
@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 ul li{display:block; float:left; width:10rem; height:10rem;  margin:.5rem .5rem;}
.QuickMenu ul li a{ display:block; height:100%; color:#fff; font-size:1.5rem;}
.QuickMenu ul li a::before{content: ""; height:4.5rem;display:block;overflow: hidden; background:url('./../Images/sso_login/quick_icon.png') no-repeat; background-size:30rem 3.8rem; margin:1rem auto 1rem auto;}
.QuickMenu ul li.repre a::before{width:3.2rem; background-position:0 0;}
.QuickMenu ul li.integrate a::before{width:3.3rem; background-position:-3.5rem 0;}
.QuickMenu ul li.manage a::before{width:3.9rem; background-position:-6.9rem 0;}
.QuickMenu ul li.webmai a::before{width:4.1rem; background-position:-14.6rem 0;}
.QuickMenu ul li.groupware a::before{width:2.4rem; background-position:-14.4rem 0;}
.QuickMenu ul li.ncsedu a::before{width:2.2rem; background-position:-19.9rem 0;}
.QuickMenu ul li.eclass a::before{width:2.5rem; background-position:-17.1rem 0;}
.QuickMenu ul li.success a::before{width:2.7rem; background-position:-22.3rem 0;}
.QuickMenu ul li.cmssst a::before{width:2.8rem; background-position:-25.2rem 0;}
/*.QuickMenu ul li.webmai a::before{width:2.8rem; background-position:-26.5rem 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;}

.login_wrap > header{margin-top:5%;}
.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;}
#login_box, #login_box.login_ok{ width:92%; margin:17% auto 14% 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;}

.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{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.open h3::after {transform: translateY(-50%)rotate(0deg);}
#tab1.tab_content > div .inner{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_btn, #tab1.tab_content > div .login01_btn{width:100%;}
.login_btn_box{display:inline-block; width:100%;}
#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;}

.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{}
.banner_wrap{display:inline-block; width:100%;}
.banner_wrap li{width: calc((100%)/2);  text-align:center; float:left; margin:.5rem 0; padding:0 .5rem;}

}
@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: 442px; margin:0 auto; }
.s_login_wrap > header h1 span { background-size: 10rem 7rem; width: 10rem; height: 7rem;}
.s_login_wrap .s_title {margin:0 0 7rem 0; font-size: 3.2rem;}

.s_login_wrap .s_title > span { font-size: 1.0rem; letter-spacing:5;}
.s_tab_container {width:100%;}
.s_tab_container .tab_content {width:99%;margin:0 auto; padding:2rem 0;}
    /*.s_tab_container .tabs li {display: block; background: #f6f7f9; padding: 20px; text-align: center; margin: 0 auto; position: absolute; top: -5rem; left:10%; width:80%;}
.s_tab_container .tabs li a {font-size: 2.4rem;}
*/.s_tab_container #tab1.tab_content > div {flex: none; width: calc(95%); padding: 0; min-height: auto; margin: 1rem 0; }
.s_tab_container #tab1.tab_content > div.open div.inner{padding:0 2rem 1rem; }
.s_tab_container .login_set {width: 99%; display:inline-block; padding: 0;}
    /*.s_tab_container .login_set ul{padding:0 1rem;}*/
}
@media all and (max-width:442px) {
    .QuickMenu{width:auto;}
    .QuickMenu ul {max-width: 330px; margin:0 auto;}
    .login_set{padding: 0 2rem 4rem 2rem;}
}