@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) ;}
.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;}
.login_wrap > header{ text-align:center; margin:3% auto 5rem 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 5rem 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:2rem auto; max-width:136rem; overflow: visible; }
/*.QuickMenu ul{display:inline-block;margin:0 auto;}*/
/*.QuickMenu .swiper{width:calc(100% - 10rem); min-width:56rem;}*/
.QuickMenu .swiper{width:auto; min-width:56rem; margin:0 5rem;}
.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;}
.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;}
.btn_wrap{position:absolute; bottom:0; width:100%; display:none;}
.login_ok .btn_wrap{display:block;}
.login_ok .btn_wrap li{float:left; width:100%;}
.login_ok .btn_wrap li:first-child{ margin:0 3% 0 0;}
.login_ok .btn_wrap li:first-child a{background:rgba(34, 48, 119);}

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


#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:2rem;}
.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; 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);}
.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;}
.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;}

.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:10% 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;}
.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{}
.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: 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;}
}