@charset "utf-8";


header * {box-sizing: border-box;}
/* 상단 가이드 & 로고 & 상단고정 */
.main_sticky .sticky{ box-shadow: 1px 10px 30px rgba(0,0,0,0.3); background: rgba(255,255,255,1);}
.sticky{ box-shadow: 1px 10px 30px rgba(0,0,0,0.3); background: rgba(255,255,255,1);}


/* 상단메뉴 */
header{ position: relative; top:0; left: 0; height: 105px; width: 100%;}
#header_guide{position: fixed; display: flex;width: 100%;z-index: 99;  justify-content: space-between; padding: 0 10%; align-items: center;}

#header_guide h1 > a{ display: inline-block;}
#header_guide h1 > a > img{vertical-align:top;}

@media all and (max-width: 1720px) {
#header_guide{ padding: 0 5%;}
}

@media all and (max-width: 1280px) {
header{ height:95px;}
}

@media all and (max-width: 1023px) {
header{ height:70px;}
#header_guide{position: relative !important; top:15px !important;}
#header_guide h1 { margin-top: 5px;}
}

@media all and (max-width: 767px) {
#header_guide{position: relative !important; top:10px !important;}
#header_guide h1 { margin-top: 15px;}
#header_guide h1 > a > img{width: 150px;}
}


.header_top ul{display:flex; gap:20px; align-items: center;}
.header_top ul li a{font-size: 13px;font-weight: 700;position: relative; padding-left: 42px;background-position: left center; background-repeat: no-repeat; height: 38px; line-height: 38px; display: block;background-size: 35px;}
.header_top ul a.icon_lms{ background-image:url(../images/inc/login_icon04.png);}
.header_top ul a.icon_google{ background-image:url(../images/inc/icon_google.png);}
.header_top ul a.icon_coss{background-image:url(../images/inc/login_icon05.png);}




/* 모바일 전체메뉴 */
#gnavi_btn{ display:none;}

@media all and (max-width: 1520px) {
.header_top ul{ gap:15px;}
.header_top ul li a{ background-size: 35px; padding-left: 40px;}
}

@media all and (max-width: 1280px) {
.header_top ul{ gap:0;}
.header_top ul li a{text-indent: -9999px;background-size: 28px; padding-left: 34px;}

}
@media all and (max-width: 1023px) {
.header_top { margin-right: 40px;}

#gnavi_btn{ display:block; z-index:999; position:absolute; top:2px;right:5%;}
#gnavi_btn a{display: inline-block; width: 37px; height: 36px;text-align: center; line-height: 38px;background: #3161f1 url("../images/inc/icon_sitemap.png") center no-repeat; border-radius: 6px; text-indent: -9999px; box-shadow: 1px 10px 10px rgba(0,0,0,0.08);background-size: 20px}
}

@media all and (max-width: 767px) {
.header_top { margin-right: 37px;}
#gnavi_btn{ top:9px;}
#gnavi_btn a{border:none; width: 35px; height: 34px;}

}




/*
 * 메뉴레이아웃
 *     nav 메뉴가이드
 *     #gnavibg                서브메뉴배경
 *     #gnavibox               메뉴
 *     .gnavi > a              일차메뉴
 *     .gnavi > div            각서브메뉴박스배경
 *     .gnavi > div > p        일차메뉴타이틀
 *     .gnavi > div > ul       각서브메뉴리스트
 *     .mnavi                  각이차서브메뉴리스트
 *     .mnavi > a              각이차서브메뉴명
 *     .mnavi > ul             각삼차서브메뉴리스트
 *     .snavi                  각삼차서브메뉴리스트
 *     .snavi > a              각삼차서브메뉴명
 */
 
 /* 메뉴 가운데 정렬 가이드 */
.head_center{ width:1400px; margin:0 auto; position:relative; } 
@media all and (max-width :1420px) {
/*
.head_center{ width:100%;}
*/
}

 
navi{ position:relative; z-index:888;}

/* 대메뉴 배경이미지*/
#gnavibg{ position:absolute; left:0; top:85px; width:100%; display:none;height:348px;/*풀다운메뉴높이*/  box-shadow: 1px 10px 10px rgba(0,0,0,0.08);background:#fff url("../images/inc/topmenu_02.png") calc(100% + 60px) bottom no-repeat; border-top: 2px solid #3161f1;border-bottom: 2px solid #8bbaef;}
#gnavibg span{background: url("../images/inc/topmenu_bg01.png") left bottom no-repeat; display: inline-block;width: 430px; height: 344px;}

#gnavibox{display: flex;}
#gnavibox > ul{display: flex;white-space: nowrap;justify-content: space-around; }
#gnavibox > a{height: 90px; padding: 32px 0 0 20px; }


@media all and (max-width: 1720px) {
#gnavibg{ background-size:  400px;background-position:  calc(100% + 70px) bottom;}
#gnavibg span{ background-position:  -70px bottom;}
}


@media all and (max-width: 1520px) {
#gnavibg{height:300px;background-position:calc(100% + 70px) bottom;background-size: 320px;}
#gnavibg span{background-position:-60px bottom;background-size: 300px;height:296px;}

}
@media all and (max-width: 1280px) {
#gnavibg{background-image: none;}
#gnavibg span{background-image: none;}
}





nav {height: 95px; }
nav .gnavi.gnavi_hide{display: none;}
nav .gnavi{ position:relative;}
/*nav .gnavi > a{position:relative; display:block; text-align:center; padding:37px 10px 29px;font-weight: 500; text-decoration: none; font-size: 20px;}*/
nav .gnavi > a{position:relative; display:block; text-align:center; height: 95px; font-weight: 700; text-decoration: none; font-size: 20px; padding: 40px 40px 0 40px; color: #000;background-position: center 30px; background-size: 10px;}
nav .gnavi > a:hover,
nav .gnavi > a:focus,
nav .gnavi.on > a{ color:#3161f1;background: url("../images/inc/check02.png") center 21px no-repeat;font-weight: 700; background-size: 18px; font-size: 22px;}

nav .gnavi.on > a:hover,
nav .gnavi.on > a:focus{ color:#3161f1;}

nav .gnavi > div{ width:100%; position:absolute; display:none;}
nav .gnavi > div > ul{ padding:20px 0 20px 30px;}
nav .gnavi:nth-of-type(1) > div > ul{padding:20px 0 20px 10px;}

nav .gnavi > div > ul > li > a > em{ display:none;}

nav .mnavi{display:block; margin-bottom: 7px;}
nav .mnavi > a{ position: relative; display:block;font-size:16px; line-height:20px; padding:7px 0;white-space: nowrap; text-align: left; color: #2d2d2d;font-weight: 600;background: url("../images/inc/point05.png") left center no-repeat; padding-left: 10px;}
nav .mnavi > a:focus, 
nav .mnavi > a:hover{ color:#3161f1; font-size: 16px;text-decoration: underline !important;font-weight: 700;}
nav .mnavi > a span{position: relative; display:inline-block; z-index:999; }


nav .mnavi.on > a{ color:#3161f1; font-size: 16px; text-decoration: underline !important;font-weight: 700;}
nav .mnavi.on > a:hover,
nav .mnavi.on > a:focus{ color:#3161f1; text-decoration: underline !important;font-weight: 700;}
nav .mnavi > ul{  padding: 0; margin:-5px 0 0 0;}
nav .mnavi > ul li{margin: 0;}
nav .mnavi > ul li a{ display:block;font-size:14px; line-height:16px; padding:5px 0;white-space: nowrap; text-align: left; color: #2d2d2d;font-weight: 500; background: none;}
nav .mnavi > ul li a:focus, 
nav .mnavi > ul li a:hover{ font-size: 14px;}

@media all and (max-width: 1720px) {
nav .gnavi > a{ padding: 40px 30px 0 30px}
}

@media all and (max-width: 1520px) {
nav { padding-left: 0;}
nav .gnavi > a{padding: 40px 25px 0 25px; font-size: 19px;}
nav .gnavi > a:hover,
nav .gnavi > a:focus,
nav .gnavi.on > a{  font-size: 20px;}

nav .gnavi > div > ul{ padding:0 0 0 15px;}
nav .gnavi:nth-of-type(1) > div > ul{padding:0 0 0 15px; margin-left: -40px; }
nav .gnavi:nth-of-type(2) > div > ul{ margin-left: -15px; }
nav .gnavi:nth-of-type(5) > div > ul{ margin-left: 15px; }
}


@media all and (max-width: 1280px) {
#gnavibox > ul{width: 68%;}
nav .gnavi > a{padding: 40px 10px 0 10px; font-size: 17px;}
nav .gnavi > a:hover,
nav .gnavi > a:focus,
nav .gnavi.on > a{  font-size: 18px;}

nav .mnavi > a{font-size:15px; line-height:18px;}
nav .mnavi > a:focus, 
nav .mnavi > a:hover{font-size: 16px;}

nav .gnavi > div > ul{ padding:0 0 0 20px; width: 200px;}
nav .gnavi:nth-of-type(1) > div > ul{padding:0 0 0 20px; margin-left: -250px;}
nav .gnavi:nth-of-type(2) > div > ul{margin-left: -160px;}
nav .gnavi:nth-of-type(3) > div > ul{margin-left: -100px;}
nav .gnavi:nth-of-type(4) > div > ul{margin-left:-50px;}
nav .gnavi:nth-of-type(5) > div > ul{margin-left:10px;}
nav .gnavi:nth-of-type(6) > div > ul{margin-left: 30px;}
}


@media all and (max-width: 1023px) {
#gnavibox{ margin:0 3%; } 
#gnavibg{ height: 100%; background: rgba(0,0,0,0.5); top:0; left:0; position: fixed; display: block;}
#gnavibg span{display: none;}
#gnavibox{ display: block; width:100%; margin:80px 0 0 0; border-top: 2px solid #1c8df2; background: #fff; height: auto; box-shadow: 0px 10px 10px rgba(0,0,0,0.3);}
#gnavibox > ul{ width:100%; background: #fff; margin-top: 0; flex-direction: column;}
#gnavibox > a{ display: none;}

nav{ display:none; position:absolute; width:100%;}
nav .gnavi.gnavi_hide{display: block;}
nav .gnavi{width:100%;background:#fff;  margin-top:0px; border-bottom: 1px solid #eee;}
nav .gnavi:last-child{border-bottom: 1px solid #1c8df2;}
nav .gnavi > a{ width:100%; height:auto; padding:16px 5%; color:#000; text-align:left; background:#fff url('../images/inc/menu_icon_basic.png') no-repeat calc(100% - 20px) center; font-size: 17px; background-size: 10px;}

nav .gnavi > a:hover,
nav .gnavi > a:focus{ color:#fff; background:#1c8df2 url('../images/inc/menu_icon_on.png') no-repeat calc(100% - 20px) center;background-size: 10px;}
nav .gnavi > a::before{display: none;}
	
nav .gnavi > a.on{ color:#fff; background:#1c8df2 url('../images/inc/menu_icon_active.png') no-repeat calc(100% - 20px) center; font-size: 18px;background-size: 10px;}
nav .gnavi > a.on:hover,
nav .gnavi > a.on:focus{ color:#fff;background:#1c8df2 url('../images/inc/menu_icon_active.png') no-repeat calc(100% - 20px) center;background-size: 10px;}
nav .gnavi > a.on:before{display: none;}

nav .gnavi > div{ position:relative;padding:0; height:auto; border:none; background: #eff9ff; border-bottom: 1px solid #78c4fc;}
nav .gnavi.on > div{ display:block;}
nav .gnavi > div > ul{ padding:0!important; margin-left: 0!important; width: 100%;}




nav .mnavi > ul{margin-top: 0;}
nav .mnavi{border-top:1px solid #d6e8f3; padding: 0 5%; }
nav .mnavi:first-child{ border-top:none;}
nav .mnavi > a{text-align: left; padding: 15px 10px; display: block; font-size: 17px;}

nav .mnavi > a:hover,
nav .mnavi > a:focus,	
nav .mnavi.on > a,
nav .mnavi.on > a:hover,
nav .mnavi.on > a:focus{ color:#3161f1;}

nav .gnavi > div > ul > li > ul { background: #fff; border-radius: 10px; margin-left: -2%; width: 104%; margin-bottom: 10px;}
nav .gnavi > div > ul > li > ul li{ border-top:1px dashed #d4e4ee; padding:5px 10px; }
nav .gnavi > div > ul > li > ul li > a{font-size: 15px; font-weight: 500;}
nav .gnavi > div > ul > li > ul li:first-child{ border-top:0; }

nav .gnavi > div > ul > li > a{display: flex; align-items: center; justify-content: space-between;}
nav .gnavi > div > ul > li > a > em{ display:inline-block;background: url('../images/inc/arrow_plus.png') no-repeat center;background-size: 10px; width: 15px; height: 15px; text-indent: -9999px; margin-right: -10px;}
nav .gnavi > div > ul > li > a.on > em{ background-image: url('../images/inc/arrow_plus.png') }

}


@media all and (max-width: 767px) {
#gnavibox{ margin:75px 0 0 0;}
nav .mnavi{border-top:1px dashed #d6e8f3; padding: 5px 5% 0 5%; }
nav .mnavi > a{ padding: 10px;}
nav .mnavi > ul li{  padding: 0; border-top:0;}
nav .gnavi:first-child > div > ul{padding:0 15px;} 
nav .gnavi > div > ul > li > ul { margin-left:0; width: 100%;}

}






/*상단 검색하기 레이어창 */
.top_search {z-index: 999;	display: none;padding: 100px 0;position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow:auto;background-color: rgba(0,0,0,0.7);}
.top_btn_close {font-size: 50px;border: none;display: inline-block;vertical-align: middle;overflow: hidden;text-decoration: none;	color: inherit;	text-align: center;cursor: pointer;white-space: nowrap; position: absolute; top:0; right: 20px;}

.top_search_guide {margin: auto;background-color:#fff;position: relative;width:1100px;padding: 80px 70px 90px 70px; border-radius: 40px 0 40px 40px; text-align: center; box-shadow: 1px 20px 20px rgba(0,0,0,0.6);}

.top_search_guide .top_serch_txt{display: inline-block; position: relative; border-bottom: 4px solid #3161f1;}
.top_search_guide .top_serch_txt span{ padding-bottom: 12px; display:inline-block}
.top_search_guide .top_serch_txt span img{ height: 38px;}

.top_search_guide .top_serch_txt .top_serch_input{ font-size: 20px; font-weight: 600; line-height: 50px; height: 50px; margin: 0 10px 0 30px; vertical-align: bottom; width: 400px; border: 0;}
.top_search_guide .top_serch_txt .top_serch_input:focus{outline : none;}
.top_search_guide .top_serch_txt .top_serch_btn{background: url("../images/inc/top_search_icon01.png") center no-repeat; width: 42px; height: 42px;text-indent: -9999px;}



.top_search_guide .search_best{overflow: hidden; width: 100%; text-align: center; margin-top: 30px;}
.top_search_guide .search_best h6{ display: inline-block; border-radius: 0 30px 30px 20px; font-size: 15px; font-weight: 600; color: #fff;background:#3161f1; padding: 8px 15px;position: absolute;left:0; z-index: 55;}

.top_search_guide .search_best ul{margin-left: 120px;}
.top_search_guide .search_best ul li{background: url("../images/inc/point05.png") left center no-repeat; padding-left: 20px;  display: inline-block; width: auto;}
.top_search_guide .search_best ul li a{display: inline-block; padding: 7px 0;font-size: 18px; font-weight: 500; color: #221055;}
.top_search_guide .search_best ul li a:hover,
.top_search_guide .search_best ul li a:focus,
.top_search_guide .search_best ul li a.active{ color: #3161f1; }


@media all and (max-width: 1280px) {
.top_search_guide {width:940px;padding: 50px 40px 60px 40px; border-radius: 30px 0 30px 30px;}
.top_search_guide .top_serch_txt span img{ height: 30px;}
.top_search_guide .top_serch_txt .top_serch_input{ font-size: 18px;}
.top_search_guide .top_serch_txt .top_serch_btn{width: 32px; height: 32px; background-size: 100%;}

 }



@media all and (max-width: 1024px) {
.top_search {padding: 50px 0;}
.top_search_guide {width:90%;}
.top_search_guide .top_serch_txt span img{ height: 20px;}
.top_search_guide .top_serch_txt .top_serch_input{ font-size: 18px; width: 380px;}
.top_search_guide .top_serch_txt .top_serch_btn{width: 32px; height: 32px; background-size: 100%;}


 }


@media all and (max-width: 767px) {
.top_btn_close {font-size:30px; top:0; right: 10px;}
.top_search_guide {padding: 25px; border-radius: 0 15px 15px 15px;}
.top_search_guide .top_serch_txt{ border-bottom: 2px solid #3161f1; display: block;}
.top_search_guide .top_serch_txt span { padding-bottom: 0; display: block;text-align: left; padding-left: 5px;}
.top_search_guide .top_serch_txt span img{ height: 16px;}
.top_search_guide .top_serch_txt .top_serch_input{ font-size: 14px; width: calc(100% - 35px);margin: 0 5px;line-height: 32px; height: 32px; font-weight: 500;}
.top_search_guide .top_serch_txt .top_serch_btn{width: 20px; height: 20px; margin-bottom: 5px;}

.top_search_guide .search_best{ display: none;}
 }