@charset 'utf-8';
.transition{-webkit-transition: all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out -o-transition:all 0.3s ease-in-out; transition::all 0.3s ease-in-out;}
.only-m {display:none;}
.only-sm {display:none;}
.only-pc {display:block;}
.viewall {display:none;}

.inner {position: relative; width:100%; max-width: 1840px; margin:0 auto;}
.area_lft {}
.area_rgh {text-align: right;}

/* header */
#header {width:100%; transition: all .5s ease;  -webkit-transition: all .5s ease;  -moz-transition: all .5s ease; z-index: 10; background:#013e95;}
#header .area_top {height:80px; display: flex; justify-content: space-between; align-items: center; margin:0 40px;}
#header .logo_wrap {display: flex; align-items: center; }
#header .logo_wrap > div:first-child{position: relative; margin:0 38px 6px 0; padding-right: 40px;}
#header .logo_wrap > div:first-child::after {content: ''; width:1px; height:28px; background:rgba(255, 255, 255, 0.2); position: absolute; right:0; top:50%; transform: translate(0, -50%);}
#header .mem_wrap {display: flex;  color:#fff;}
#header .mem_wrap .name {margin-right:48px;}
#header .mem_wrap .time {position: relative; color:#7d98c0; padding-right:30px; margin-right:30px;}
#header .mem_wrap .time::after  {content: ''; width:1px; height:28px; background:rgba(255, 255, 255, 0.2); position: absolute; right:0; top:50%; transform: translate(0, -50%);}

#header .gnb_wrap  {}
#header .gnb  {background: #012861;}
#header .nav_wrap  {}
#header .nav_wrap ul {display: flex; align-items: center; justify-content: center;}
#header .nav_wrap ul a {color:#fff; font-weight: 500; width:140px; padding:20px 0; display: block; text-align: center; border-left:1px solid #345381;} 
#header .nav_wrap ul li:last-child > a {border-right:1px solid #345381;} 
#header .nav_wrap ul li.on a {background:#edf0f5; color:#012861;} 
#header .nav_wrap ul li a:hover {opacity: 1;} 
#header .loc_wrap  {position: absolute; right:0; top: 50%; transform: translate(0, -50%); color:#7d98c0;}
#header .loc_wrap ul {display: flex; }
#header .loc_wrap ul > li::after {content: '>'; display: inline-block;  padding-left:6px; margin-right:6px;}
#header .loc_wrap ul > li:last-child:after {display: none;}
#header .snav_wrap  {border-bottom:1px solid #d9dbe0; background:#edf0f5;}
#header .snav_wrap ul {display: flex; align-items: center; justify-content: center;}
#header .snav_wrap ul a {display: block; padding:25px 20px; color:#575757;}
#header .snav_wrap ul li{position: relative;}
#header .snav_wrap ul li.on a {color:#012861; font-weight: 700;}
#header .snav_wrap ul li a::after {content:''; width:1px; height:16px; background:#d3d5da; position: absolute; right:0;}
#header .snav_wrap ul li:last-child a::after {display: none;}
#header .snav_wrap ul li.on::after {content:''; width:100%; height:2px; background:#012861; position: absolute; bottom:-1px;}

/* footer */
#footer {width:100%; border-top:1px solid #d9dbe0; text-align: center; font-size:0.88em; color:#7e838c; margin:90px 0 30px 0;}
#footer .area_top {margin:36px 0 39px 0;}
#footer .area_top ul {display: flex; justify-content: center;}
#footer .area_top ul li {position: relative;}
#footer .area_top ul li::after {content: ''; width:1px; height:10px; background:#ccd0d6; position: absolute; right:0; top:50%; transform: translate(0, -50%);}
#footer .area_top ul li:last-child::after {display: none;}
#footer .area_top a {display: block; padding:0 15px; color:#7e838c; font-weight: 700;}
#footer .area_bt {line-height: 1.43em;}
#footer .area_bt span {margin:0 10px;}

/* 메인 로그인 */
.login_wrap {}
.login_wrap .inner {display: flex; gap:100px; justify-content: center; align-items: center; height: 80vh; max-width:1560px;}
.login_wrap .area_lft {width:520px;}
.login_wrap .area_lft .logo {margin-bottom:70px; text-align: center;}
.login_wrap .area_lft .login input {width:100%; margin-bottom:10px; height:60px; border:1px solid #e1e5eb; padding-left:20px;}
.login_wrap .area_lft .login input::placeholder {font-size:1.13em; color:#8b8b8c;}
.login_wrap .area_lft .login button {background:#014099; color:#fff; width:100%; height:64px; line-height: 64px; margin-top:20px; font-size:1.13em;}
.login_wrap .area_rgh {text-align: left;}
.login_wrap .notice_wrap {width:700px;  background:#fff; border:1px solid #e1e5eb; padding:20px 10px;}
.login_wrap .notice_wrap .notice {width:100%; height:620px; overflow-y:scroll; padding:20px; color:#4f5258; line-height:1.63em;}
.login_wrap .notice_wrap .notice::-webkit-scrollbar {width: 3px;}
.login_wrap .notice_wrap .notice::-webkit-scrollbar-thumb { background-color: #707070; }
.login_wrap .notice_wrap .notice::-webkit-scrollbar-track { background-color: #e1e5eb;}
.login_wrap .notice_wrap .notice h3 {display: block; width:100%; margin-bottom:32px;}
.login_wrap .notice_wrap .notice h3::before {content: url('../images/common/icon_notice.png'); margin-right:11px; vertical-align: middle;}

@media screen and (max-width:1024px) {		
	.only-m {display:block;}
	.only-pc {display:none;}	
	.inner {padding:0 20px;}			
    
    .login_wrap .inner {gap:50px; height:100%; flex-direction: column; margin-top:50px;}
    .login_wrap .notice_wrap .notice {padding:20px; height:250px;}
		
    /* header */
    
    
	/*	footer */
    
	
}

@media screen and (max-width:768px) {	
	.only-sm {display:block;}	

    #header .area_top {flex-direction: column; justify-content: center; gap:10px; height: auto; padding: 20px 0;}
    #header .loc_wrap {display: none;}
    
    .login_wrap .area_lft {width:100%;}
    .login_wrap .notice_wrap {width:100%;}
	
	/*	footer */	
		
}

@media screen and (max-width:425px) {
    
    #header .mem_wrap {flex-direction: column; align-items: center; gap: 5px;}
    #header .mem_wrap .name, #header .mem_wrap .time {margin:0; padding:0;}
    #header .mem_wrap .time::after {display: none;}
    
    #header .snav_wrap ul a {padding: 18px 13px;}
    
	
}

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