@charset "utf-8";

body {
	/* background: url("/layout/usr/images/ceo/main/body_bg.gif") repeat scroll 0 0 transparent; */
	width: 100%;
	overflow-x: hidden
}

#wrap {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.inner {
	max-width: 1460px;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 0 15px;
	/* border: 1px solid red; */
	box-sizing: border-box;
	position: relative;
}

#header {
	/* position: fixed; */
	width: 100%;
	padding: 0;
	margin: 0;
	height: 100px;
	z-index: 100;
	z-index: 9998;
	box-sizing: border-box;

	border-bottom: 1px solid #efefef;
}

#header h1 {
	position: absolute;
	 top:50%; transform: translateY(-50%);
	z-index: 10;
	padding: 0;
}

#header h1 img {
	border: 0px;
}
.top-bar{position: absolute; right:0; top:50%; transform: translateY(-50%); z-index: 998;}

.top-bar ul li{    
	display: inline-block;
    vertical-align: top;
}

.btn_login, .btn_name{margin-top:3px;}

.btn_login a, .btn_name a{
	padding: 8px 15px; 
	border-radius: 50px;
	color: #fff;
	font-size: 16px;
	vertical-align: middle;
	text-decoration: none;
	display: block;
	box-sizing:border-box;
	}
	
.btn_login a{
	background-color: #c8005f; 
	margin-right: 15px;
}

.btn_name a{
	background-color:#333;
}

.btn_login img{
	vertical-align: middle; 
	margin-right: 5px;     
	margin-bottom: 3px;}

.btn_name {display: inline-block; margin-right: 8px;}


/* 반응형 > top_bar 로그인/로그아웃/사용자이름 */

#mobile-nav .top-bar{
	display:none;
	width: 100%;
	bottom:0;
	left: 50%;
    transform: translateX(-50%);
	}
#mobile-nav .top-bar ul li{display:block; text-align:center; margin:0 auto 10px; width:100px;}
#mobile-nav .top-bar ul li a{font-size:16px; padding: 8px; }
#mobile-nav .top-bar .btn_login a{margin-right:0;}
#mobile-nav .top-bar ul{
   position: absolute;
    bottom: 20px;
    left: 50%;
     transform: translateX(-50%);
}
/* 반응형 > top_bar 로그인/로그아웃/사용자이름 끝 */

.group:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

#globalmenu {
	margin: 0;
	z-index: 10;
	padding: 0;
	position: absolute;
	top: 16px;
	right: -100px;
}

#globalmenu li {
	float: left;
	padding: 0 0 0 0;
	display: inline;
	margin: 0 0 0 10px;
}


#top_menu {
	
	text-align: right;
}
/* 
.gnb {
	
	margin: 0 0 0 0px;
	padding: 0;
	list-style-type: none;
	z-index: 9999;
	display: block;
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 30px;
	    padding-top: 25px;
}
.gnb .gnbA {
	text-align: center;
	padding: 0px;
	font-weight: bold;
	display: inline-block;
	margin: 0 0 0 0;
	position: relative;

}

.gnb .gnbA a:link,
.gnb .gnbA a:visited,
.gnb .gnbA a:active {
	color: #000;
	font-size: 20px;
	text-decoration: none;
}

.gnb .gnbA a:hover {
	color: #595959;
	font-size: 20px;
	text-decoration: none;
}

.gnb .gnbB {
	display: none;
}

.gnb .gnbB1,
.gnb .gnbB2,
.gnb .gnbB3 {
	width: 100%;
	padding: 0;
	margin: 0 0 0 10px;
}


.gnb>li>a {
	display: block;
	margin-right: 0;
	
}

.gnb li.on>a:link,
.gnb li.on>a:visited,
.gnb li.on>a:active {
	color: #1447a2;
	font-weight: bold;
}

.gnb li.on ul {
	display: block;
}

.gnb .gnbB a {
	font-weight: normal;
}

.gnb .gnbB {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none outside none;
	z-index: 30;
	top: 30px;
}

.gnb .gnbB li {
	padding: 0;
	margin: 0 0 0 1px;
	font-weight: normal;
	background: url("/layout/usr/images/sub/gnb_bl.gif") no-repeat scroll 0 8px transparent;
	display: block;
	text-align: center;
	

}

.gnb .gnbB li.gnb_link_1,
.gnb .gnbB li.gnb_link_2,
.gnb .gnbB li.gnb_link_3 {
	background: none !important;
	margin-top: 0;
	margin-left: 170px;
}

.gnb .gnbB li.gnb_link_2 span,
.gnb .gnbB li.gnb_link_3 span {
	margin-right: 5px;
} */

/* 
	.gnbB1 .gnbBc1 {margin-left:0 !important;}
	.gnbB2 .gnbBc1 {margin-left:0 !important;}
	.gnbB3 .gnbBc1 {margin-left:0 !important;}
	.gnbB4 .gnbBc1 {margin-left:0 !important;}
	.gnbB5 .gnbBc1 {margin-left:0 !important;}
	
	.gnb .gnbA1 ul {width:721px; margin:0; background: url("/layout/usr/images/ceo/menu/2dp_bg.gif") no-repeat scroll 0 0 transparent; padding:0;}
	.gnb .gnbA2 ul {width:721px; margin:0; background: url("/layout/usr/images/ceo/menu/2dp_bg.gif") no-repeat scroll 0 0 transparent; padding:0;}
	.gnb .gnbA3 ul {width:721px; margin:0; background: url("/layout/usr/images/ceo/menu/2dp_bg.gif") no-repeat scroll 0 0 transparent; padding:0;}
	.gnb .gnbA4 ul {width:721px; margin:0; background: url("/layout/usr/images/ceo/menu/2dp_bg.gif") no-repeat scroll 0 0 transparent; padding:0;}
	.gnb .gnbA5 ul {width:721px; margin:0; background: url("/layout/usr/images/ceo/menu/2dp_bg.gif") no-repeat scroll 0 0 transparent; padding:0;}

	.gnb .gnbB a {font-weight: normal;}
	.gnb .gnbA1 > a {width:100px; background-position:0 0; margin-right: 45px;}
	.gnb .gnbA2 > a {width:100px; background-position:-155px 0; margin-right: 45px;}
	.gnb .gnbA3 > a {width:100px; background-position:-297px 0; margin-right: 45px;}
	.gnb .gnbA4 > a {width:100px; background-position:-438px 0; margin-right: 45px;}
	.gnb .gnbA5 > a {width:100px; background-position:-580px 0;}

	.gnb .gnbA1 > a:active, .gnb .gnbA1 > a:focus, .gnb .gnbA1on > a  {width:100px; background-position: 0 -23px; }
	.gnb .gnbA2 > a:active, .gnb .gnbA2 > a:focus, .gnb .gnbA2on > a  {width:100px; background-position: -155px -23px; }
	.gnb .gnbA3 > a:active, .gnb .gnbA3 > a:focus, .gnb .gnbA3on > a  {width:100px; background-position: -297px -23px; }
	.gnb .gnbA4 > a:active, .gnb .gnbA4 > a:focus, .gnb .gnbA4on > a  {width:100px; background-position: -438px -23px; }
	.gnb .gnbA5 > a:active, .gnb .gnbA5 > a:focus, .gnb .gnbA5on > a  {width:100px; background-position: -580px -23px; }

	.gnb .gnbA1 > a:hover  {width:100px; background-position: 0 -23px;}
	.gnb .gnbA2 > a:hover  {width:100px; background-position: -155px -23px;}
	.gnb .gnbA3 > a:hover  {width:100px; background-position: -297px -23px;}
	.gnb .gnbA4 > a:hover  {width:100px; background-position: -438px -23px;}
	.gnb .gnbA5 > a:hover  {width:100px; background-position: -580px -23px;} */


.btn_mypage{
	display:block;
	background-color:#c8005f; 

	border-radius:300px; 
	width:130px; height:130px; 
	position:fixed; 
	right:50px; 
	bottom:100px;
	z-index:999;
	}

.btn_mypage p{color:#fff; font-size:22px; font-weight:bold; text-align:center; margin-top:28px}


#container {
	width: 100%;
	display: inline-block;
	margin: 0;
	z-index: 1;
}

.btn_prev, .btn_next {z-index: 999;}

.btn_prev {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	left: 50px;
}

.btn_prev .prev {
	width: 23px;
	height: 30px;
	cursor: pointer;
	background: url("/layout/usr/images/ceo/main/btn_prev.png") no-repeat scroll 0 0 transparent;
}

.btn_prev .prev_visible {
	width: 23px;
	height: 30px;
	cursor: pointer;
	background: url("/layout/usr/images/ceo/main/btn_prev.png") no-repeat scroll -24px 0 transparent;
}

.btn_next {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right: 50px;
}

.btn_next .next {
	width: 23px;
	height: 30px;
	cursor: pointer;
	background: url("/layout/usr/images/ceo/main/btn_next.png") no-repeat scroll 0 0 transparent;
}

.btn_next .next_visible {
	width: 23px;
	height: 30px;
	cursor: pointer;
	background: url("/layout/usr/images/ceo/main/btn_next.png") no-repeat scroll -24px 0 transparent;
}

#visual {
	max-width: 100%;
	box-sizing: border-box;
	min-height: 980px;

	/* margin: 0; */
	margin-top: -100px;
	padding: 0;
	position: relative;
	/* border: 1px #cbcbcb solid; */
}
.main_visual div {
            display: inline-block;
            vertical-align: top;
        }
		
.main_visual img{width:100%;}
#visual img {
	width: 100%;
}

/* swiperslide 추가 및 수정 */
/* html, body {
		position: relative;
		height: 100%;
		}
 */
			  .swiper {
				width: 100%;
				height: 100%;
			  }

			  .swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #444;
				display: flex;
				justify-content: center;
				align-items: center;
			  }

			  .swiper-slide img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			  }

.main_bottom {
	display: inline-block;
	width: 100%;
	font-size: 0;
	padding: 80px 0;
}
.main_bottom h2{
	font-size:40px; 
	text-align: left; 
	color: #000;
	margin-bottom: 30px;
	width: calc(100% - 30px);
	display: inline-block;

}


#main_content1 {
	width: 50%;
	display: inline-block;
}



.main_box_item .read-more {
	float: right;
	width: 10px;
	opacity: 0.5;
}

.main_box_item .read-more:hover {
	opacity: 0.8;
}


.main_bottom .notice {
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
}

.main_bottom .notice .btn_more {
	float: right;
}


.main_bottom .notice ul {
	margin: 13px 0 0 0;
}

.main_bottom .notice ul li {
	line-height: 1.5;
	display: inline-block;
	padding-left: 9px;
	border-bottom: 1px solid #000;
	padding: 3% 10px;
	width: 100%;
	text-align: left;
	box-sizing: border-box;

	

}

.main_bottom .notice ul li a{
	white-space: nowrap;      /* 줄바꿈 방지 */
	overflow: hidden;       /* 박스 밖으로 나간 텍스트 숨김 */
	text-overflow: ellipsis;  /* 말줄임표(...) 표시 */
	width: calc(100% - 50px);             /* 너비 지정 */
}

.main_bottom .notice ul li::before{
	content: '';
	background: url("/layout/usr/images/ceo/main/icon_bullet.png") no-repeat;
	text-align: center;
	width: 5px;
	height: 5px;
	display: inline-block;
	color: #000;
	padding-right: 15px;
	    vertical-align: middle;

}

.main_bottom .notice ul li:first-child{border-top: 2px solid #000;}
.main_bottom .notice ul li:last-child{border-bottom: 2px solid #000;}
.main_bottom .notice ul li a {
	font-size: 18px;
	display: inline-block;
	text-align: left;
	    vertical-align: middle;
}

.main_bottom .notice li .date {
	color: #aaa;
	float: right;
	font-size: 16px;
}

.main_bottom .notice .more {
	position: absolute;
	top: 20px;
	right: 20px;
}

.edu {
	height: 128px;
	width: 283px;
	margin: 20px;
	padding: 0;
	overflow: hidden;
}

.edu h2 {
	height: 14px;
}

.edu ul {
	margin: 0;
}

.edu ul li {
	height: 23px;
	background: url("/layout/usr/images/ceo/main/bl.gif") no-repeat scroll 0 10px transparent;
	padding-left: 9px;
}

.edu .more {
	position: absolute;
	top: 173px;
	right: 20px;
}

.edu_zone {
	width: 285px;
	height: 100px;
	margin-top: 13px;
	overflow: hidden;
}

#recom {
	background: url("/layout/usr/images/ceo/main/recom_bg.gif") no-repeat scroll 0 0 transparent;
	width: 325px;
	height: 302px;
	padding: 0;
	margin: 0 0 0 15px;
	position: relative;
	float: left;
}

#recom h2 {
	margin: 20px 0 17px 20px;
	;
	padding: 0;
}

.imgrecom {
	margin: 0;
	padding: 0 0 0 1px;
	height: 159px;
	width: 325px;
}

#recom ul {
	margin: 13px 20px 0 20px;
}

#recom ul li {
	height: 20px;
	background: url("/layout/usr/images/ceo/main/bl.gif") no-repeat scroll 0 10px transparent;
	padding-left: 9px;
}

#recom ul li a {
	float: left;
}

#recom li .date {
	color: #aaa;
	float: right;
}

#recom .more {
	position: absolute;
	top: 20px;
	right: 20px;
}

#quick {
	background: url("/layout/usr/images/ceo/main/quick_bg.gif") no-repeat scroll 0 0 transparent;
	width: 320px;
	height: 302px;
	padding: 0;
	margin: 0 0 0 15px;
	position: relative;
	float: left;
}

#quick ul {
	width: 278px;
	height: 59px;
	margin: 20px;
	padding: 0;
}

#quick ul li {
	margin-bottom: 41px;
}

#main_content2 {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

#public {
	background: url("/layout/usr/images/ceo/main/public_bg.gif") no-repeat scroll 0 0 transparent;
	width: 325px;
	height: 326px;
	padding: 0;
	margin: 0;
	position: relative;
	float: left;
}

#public h2 {
	margin: 20px 0 17px 20px;
	;
	padding: 0;
}

.imgpublic {
	margin: 0;
	padding: 0;
	height: 165px;
	width: 325px;
	background-color: #ccc;
}

.public_play {
	position: absolute;
	top: 110px;
	left: 139px;
}

#public ul {
	margin: 13px 20px 0 20px;
}

#public ul li {
	height: 20px;
	background: url("/layout/usr/images/ceo/main/bl.gif") no-repeat scroll 0 10px transparent;
	padding-left: 9px;
}

#public ul li a {
	float: left;
}

#public li .date {
	color: #aaa;
	float: right;
}

#public .more {
	position: absolute;
	top: 20px;
	right: 20px;
}


#open_talk {
	margin: 0 0 0 15px;
	padding: 0;
	border: 1px #cbcbcb solid;
	width: 658px;
	height: 324px;
	float: left;
	background-color: #fff;
	position: relative;
}

#open_talk h2 {
	margin: 20px 0 3px 20px;
	;
	padding: 0;
}

.open_t {
	width: 618px;
	height: 282px;
	margin: 0 0 0 20px;
}

.open_t li {
	height: 120px;
	border-bottom: 1px dotted #e5e5e5;
	padding: 14px 0 0;
}

.thumb {
	float: left;
	width: 50;
	padding: 0;
	margin: 0 10px 0 0;
	vertical-align: top;
}

.open_t p {
	float: left;
	width: 550px;
	font-size: 11px;
}

.open_t p a {
	text-decoration: none;
	line-height: 1.4;
}

.open_t p strong {
	font-weight: bold;
	color: #444;
}

.open_t .second {
	padding: 15px 0 0 0;
}

.open_t .third {
	padding: 15px 0 0 0;
	border-bottom: none;
}

#open_talk .more {
	position: absolute;
	top: 20px;
	right: 20px;
}

#main_content3 {
	width: 100%;
	box-sizing: border-box;
	display: inline-block;
	background-color: #fff;
	position: relative;
	padding: 20px;
}

#main_content3 h2 {
	padding: 0;
}

.portfolio {
	width: 100%;
	margin: 0 auto 0 20px;
	font-size: 0;
	padding: 0 20px;
}

.portfolio li {
	display: inline-block;
	/* background: url("/layout/usr/images/ceo/main/portfolio_bg.gif") no-repeat scroll 0 0 transparent; */
	text-align: center;
	

}

.portfolio li > ul > li{
	width: calc((100% / 2) - 20px);
	border-radius: 30px;
	margin: 0 10px;
	box-sizing: border-box;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	vertical-align: top;
	margin-bottom: 10px;
}

.portfolio li img {
	height: 146px;
}

.portfolio li span.title {
	display: block;
	text-align: center;
	padding: 9% 0;
	font-size: 18px;
	line-height: 1.5;
	color: #000;
	font-weight: bold;

	white-space: nowrap;      /* 줄바꿈 방지 */
	overflow: hidden;         /* 박스 밖으로 나간 텍스트 숨김 */
	text-overflow: ellipsis;  /* 말줄임표(...) 표시 */
	width: calc(100% - 50px);             /* 너비 지정 */
	margin: 0 auto 5px;

}

.portfolio li span.date {
	display: block;
	color: #aaa;
	text-align: center;
	font-size: 16px;
	padding-bottom: 10%;

	white-space: nowrap;      /* 줄바꿈 방지 */
	overflow: hidden;         /* 박스 밖으로 나간 텍스트 숨김 */
	text-overflow: ellipsis;  /* 말줄임표(...) 표시 */
	width: calc(100% - 50px);             /* 너비 지정 */
	margin: 0 auto;
}

#main_content3 .more {
	position: absolute;
	top: 35px;
	right: 20px;
}

/* .portfolio>li>ul>li:first-child { margin-left: 14px;} */

.flex-direction-nav a.flex-next,
.flex-direction-nav a.flex-prev {
	display: block;
}


#footer {
	width: 100%;
	padding: 50px 0;
	border-top: 1px solid #CCC;
	box-sizing: border-box;
	background-color: #242424;
	height: auto;
	
}

.footer_top .links{float:right; margin-top: 15px;}

.footer_left {
	text-align: left;
}
.footer_left .logo{display:inline-block}

.footer_top .links li {
	display: inline-block;
	margin: 0;
	padding: 0;
	margin-left: 20px;;
}
.footer_top .links li a{
	color: #fff;
	font-size: 18px;}

.footer_left .f_copy {
	clear: both;
	margin-top: 50px;
}
.footer_left .f_copy ul li{ 
	font-size: 16px; 
	color: #fff;
	line-height: 1.5;
	word-break: keep-all;
	margin-bottom: 10px;
}
.footer_left .f_copy ul li b{display: inline-block; font-weight: normal;}

.footer_left .f_copy ul li b::after{
	content: '｜';
	display: inline-block;
} 
.footer_left .f_copy ul li span{margin-right: 15px; color:#fff;}
.footer_bottom {
	margin: 20px 20px 0 0;
	text-align: right;
}
.footer_bottom ul{border-bottom: 1px solid #fff; padding-bottom: 30px;}
#footer .links li{display: inline-block;}
.footer_bottom p{color: #fff; font-size: 16px; margin-top: 30px;;}
.footer_sns ul li{
	display:inline-block;
	padding: 0 10px;
}


/* 슬라이드배너 */
.clearfix {
	float: none;
	clear: both;
}

#banner_container {
	width: 900px;
	height: 88px;
	padding: 1px 40px;
	position: relative;
}

.btn_prev_next {
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	top: 30px;
}

#btn_prev {
	left: 10px;
}

#btn_next {
	right: 10px;
}

#banner_viewport {
	width: 903px;
	height: 88px;
	position: relative;
	overflow: hidden;
}

#banner_programs {
	position: relative;
}

#banner_programs ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#banner_programs li {
	display: block;
	width: 301px;
	height: 88px;
	float: left;
}

#banner_programs li a {
	display: block;
	width: 300px;
	height: 88px;
	border-right: 1px solid #dedede;
}

/* 레이어팝업 */
.layerPopup {
	position: absolute;
	left: 10px;
	top: 100px;
	background-color: #FFF;
	z-index: 9999;
	display: none;
}

/*실명인증 리턴URL
실명인증 등록계정*/

/* 레이어팝업 */
.close_wrap {
	height: 33px;
	background: url("/layout/usr/images/main/close_bg.gif") scroll 0 0 transparent;
}

.block_popup {
	float: left;
}

.close_popup {
	float: right;
}


/* 메뉴 */

.gnb_wrap {
  position: relative;
  /* max-width: 800px;
  margin: 0 auto;
  width: 800px; */
  /* margin: 0 100px 0 300px; */
  /* max-width: 800px; */
  /* width: calc(100% - 480px); */
  width: calc(100% - 530px);
  margin: 0 0 0 270px;
  height: 100%;
  padding:0 20px;
  z-index: 999;
}


/* gnb menu */
.gnb {
    position: relative;
	height: 100px;
}
.depth1 {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
}
.depth1 > li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    /* width: 11.111111111111%; */
    text-align: center;
    flex: 1 1 1%;
}
.depth1 > li > a {
    position: relative;
    display: block;
    font-size: 22px;
    font-weight: 700;
    padding: 30px 0;
	color:#000;
	text-decoration: none;
}

/* .depth1 > li > a::before {
    content: '';
    position: absolute;
    height: 30px;
    width: 1px;
    background-color: #F4F4F4;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
} 
.depth1 > li:last-child > a::after {
    content: '';
    position: absolute;
    height: 30px;
    width: 1px;
    background-color: #F4F4F4;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
*/

.depth1 > li > a > span {
    background-repeat: no-repeat;
    background-position: left;
    display: inline-block;
}

/* .depth1 > li:last-child .depth2 {
    border-right: 1px solid #fff;
} */
.depth1 > li:hover .depth2::before{
    content: '';
    position: absolute;
	top: -4px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #c8005f;
	transition: all 0.3s;
}
/* .depth1 > li:hover .depth2{
    background-color: rgba(255, 255, 255, 0.5);
} */

.depth2 {
    display: none;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    padding: 10px 0;
    /* min-height: 270px; */
	box-sizing: border-box;
    /* border-left: 1px solid #fff;
	border-bottom: 1px solid #fff; */
	width: 100%;
}

.depth2 >li > a {
    font-size: 18px;
    font-weight: normal;
    color: #000;
    
    display: block;
    padding: 15px 0;
	text-decoration: none;
}
.depth2 >li > a:hover{
    color: #222;
    font-weight: bold;
}
.gnbMenu_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    /*
			배경이미지있을때 넣기	
			background-image: url(/images/user/cmn/img_gnb_bg.png);*/
    background-repeat: no-repeat;
    background-position: left bottom;
    z-index: 9;
	display: none;
	height: 460px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.gnbMenu_bg span {
    height: 360px;
}

/* 모바일 */
/* mobile-nav */
    .mobile_menu .img {
        background: url("/layout/usr/images/ceo/main/header_btn.png") no-repeat center;
    }

	 .mobile_menu.icon {
        background-color: #3c4a61;
        width: 50px;
        height: 50px;
        cursor: pointer;

		display:none
    }

    .mobile_menu.icon .img {
        width: 100%;
        height: 100%;
    }

    #header #mobile-nav {
        width: 100%;
        height: calc(100% - 100px);
        display: inline-block;
        position: fixed;
        top: 100px;
        left: -100%;
        z-index: 9999;
        transition: 1s;
        background-color: #fff;
    }

    #header #mobile-nav.on {
        left: 0;
		z-index: 9999;
    }

    body.on {
        overflow: hidden;
    }

    #header #mobile-nav .mainnav {
        width: 35%;
        height: 100%;
        background-color: #3c4a61;
        float: left;
        position: relative;
    }

    #header #mobile-nav .mainnav>ul {
        width: 100%;
        float: left;
    }

    #header #mobile-nav .mainnav>ul li {
        width: 100%;
        border-bottom: 1px solid #fff;
        text-align: center;
        line-height: 60px;
        color: #fff;
        cursor: pointer;
        box-sizing: border-box;
		font-size: 18px;
    }

    #header #mobile-nav .mainnav .user_sns {
        display: block;
        width: 100%;
        position: absolute;
        bottom: 20px;
    }

    #header #mobile-nav .mainnav .user_sns ul {
        width: 80%;
        margin: 0 auto;
    }

    #header #mobile-nav .mainnav .user_sns ul li {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    #header #mobile-nav .mainnav .user_sns ul li:nth-child(2) {
        margin-bottom: 20px;
    }

    #header #mobile-nav .mainnav .user_sns a {
        display: block;
        color: #fff;
    }

    #header #mobile-nav .subnav {
        width: 65%;
        height: 100%;
        float: left;
        background-color: #fff;
    }

    #header #mobile-nav .subnav .subnavli {
        width: 100%;
        height: 100%;
		/* display: none; */
        display: block;
    }

    #header #mobile-nav .subnav .subnavli li {
        width: 100%;
        border-bottom: 1px solid #3c4a61;
        text-align: left;
        line-height: 60px;
        box-sizing: border-box;
    }

    #header #mobile-nav .subnav .subnavli li a {
        display: block;
        padding-left: 20px;
		font-size: 16px;
    }

    #header #mobile-nav .subnav .subsubnav {
        display: none;
    }

    #header #mobile-nav .subnav .subsubnav li {
        padding-left: 0;
        border-bottom: 1px solid #eee;
    }

    #header #mobile-nav .subnav .subsubnav li:first-child {
        border-top: 1px solid #eee;
    }

    #header #mobile-nav .subnav .subsubnav li:last-child {
        border: none;
    }

    #header #mobile-nav .subnav .subsubnav li a {
        display: block;
    }

    /* mobile-nav end */

@media screen and (max-width:1200px){
	
	 .mobile_menu.icon {
		display: block;
    }
	.gnb_wrap{display:none;}
}


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

	#main_content1, #main_content2{width:100%;}
	.main_bottom{padding: 40px 0;}
	.main_bottom .notice, #main_content3{padding: 0;}
	#main_content2{margin-top: 50px;}

	.main_bottom h2{font-size: 30px;}
	#main_content3 h2{margin: 0 0 20px;}
	#main_content3 .more{top: 12px;}

	.footer_left .logo{display: block;}
	.footer_top .links{float: none; margin-top: 30px; font-size: 16px;}
	.footer_top .links li{margin-left: 0; margin-right: 15px;}
	.footer_left .f_copy{margin:40px 0;}
	.footer_left .f_copy ul li, .footer_bottom p{font-size: 14px;}
	.footer_left .f_copy ul li span{display: block;}
}

@media screen and (max-width:640px){
	#header h1 img{width:180px;}
	
	.btn_name, .btn_login{margin-top:5px; }
	.btn_login a{margin-right: 5px;}
	.btn_name a, .btn_login a{padding: 6px 10px; font-size:14px}
	.btn_login img{margin-bottom:0}
	
	.top-bar ul li.btn_login, .top-bar ul li.btn_name{display:none;}
	#mobile-nav .top-bar{
	display:block;}
	
	.btn_mypage {
		width: 100px;
		height: 100px;
		right: 20px;
		bottom: 30px;
	}
	
	.btn_mypage p {font-size: 20px;  margin-top: 18px;
}

	
	
	.main_bottom .notice ul li::before {padding-right: 5px;}
	.main_bottom .notice ul li a {
		font-size:14px;
		width: calc(100% - 24px);}
		
	
	
	.portfolio li > ul > li{
		width: 90%;
		margin-bottom: 20px;
}
	



	
	.portfolio li span.title {
    padding: 10px 0 5px;
    font-size: 14px;
    color: #000;
    width: 90%;
    margin: 0 auto;
}

	.portfolio li span.date {
    font-size: 14px;
    padding-bottom: 10%;
    width: 90%;
}



	
	.footer_sns ul li img{width:auto; height: 24px;}
	.footer_top .links li a{font-size:16px}
	.footer_bottom ul {padding-bottom: 20px;}
	.footer_bottom p {margin-top: 20px;
}

}