@charset "utf-8";


/* 상단 대메뉴 */
header{ height:85px; background-image: linear-gradient(0deg, rgb(255,255,255)10%,rgb(224,239,253)); display: flex; justify-content: space-between; align-items:flex-start; padding: 20px 6% 0 30px; position: absolute; z-index: 5; width: calc(100% - 20px); top:0; left:20px;}

header h1{padding-top: 5px;}

@media all and (max-width :1720px) {
header{ padding: 20px 5% 0 30px; }
}
@media all and (max-width :1280px) {
header{ height:65px;padding: 20px 30px 0 30px; }
header h1 img{ width: 170px;}

}
@media all and (max-width :1024px) {
header{ padding: 15px 30px 0 20px; }
header h1 img{ width: 130px;}
}
@media all and (max-width :767px) {
header{ width: 100%;left:0; padding: 10px 5% 0 5%; justify-content: flex-end; gap:5px;background-image: linear-gradient(0deg, rgb(255,255,255)30%,rgb(224,239,253)); height:60px; position:inherit; z-index:5;}
header h1{padding-top:0; position: absolute; left:5%; top:12px;}
header h1 img{ width: 120px;}

/* 서브 : 모바일 경우 로고 숨기기 ★★★★★★★★★★ */
 header h1{display: none !important;}
}





/* 댓글 & 알람 & 내정보 */
.top_right{ display: flex; align-items: center; gap:20px;}


/* 알람 */
.top_icon_guide { position: relative; display: flex; align-items: center; gap:15px; margin-top: 3px;}
.top_icon_guide > button{background-color: #fff; box-shadow: -1px -5px 5px rgba(0,61,180,0.1); border-radius: 100px; width: 60px; height: 60px; text-align: center; line-height: 60px; overflow: hidden; background-position: center; background-repeat: no-repeat;  border: 0;}
.top_icon_guide button i{ text-indent: -9999px; display: inline-block;}
.top_icon_guide .inquiry_btn{ background-image: url("../../images/com/icon_inquiry.png");}
.top_icon_guide .alarm_btn{ background-image: url("../../images/com/icon_alarm.png"); position: relative; }
.top_icon_guide .alarm_btn .alarm_btn_tip{ position: absolute; top:12px;right:14px; padding: 3px; border-radius: 100px; text-align: center; color: #fff; font-weight: 500; font-size: 8px; background: #ff0000; min-width: 16px; line-height: 10px;display: inline-block;}
.top_icon_guide span button{display: block; height: 100%;}

@media all and (max-width :1520px) {
.top_right{ gap:10px;}
.top_icon_guide {  gap:10px;}
}

@media all and (max-width :1280px) {
.top_icon_guide > button{ width: 46px; height: 46px; background-size: 26px;}
.top_icon_guide .alarm_btn .alarm_btn_tip{ top:7px;right:8px;}

}
@media all and (max-width :1024px) {
.top_icon_guide button{ width: 40px; height: 40px; background-size: 22px;}
.top_icon_guide .alarm_btn .alarm_btn_tip{ top:6px;right:6px;}

}
@media all and (max-width :767px) {
.top_icon_guide {  gap:0; margin-top: 5px;}
.top_icon_guide > button{background-color:inherit;box-shadow: none;width: 33px; height: 30px;line-height: 30px;background-size:  24px;}
.top_icon_guide .alarm_btn .alarm_btn_tip{ top:2px;right:2px;}
}








/*알람 메세지 창*/
.alarm_list{ display: none; position: absolute; top:60px; z-index: 2;background: #f5f6f8; border: 1px solid #ddd; width: 400px; right:0;box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);border-radius: 10px;}

.alarm_list .alarm_tit{display: flex; justify-content: space-between; padding:12px 15px; align-items: center; border-bottom: 1px solid #dddddd;box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1); background: #fff; position: relative;border-radius: 10px 10px 0 0;}
.alarm_list .alarm_tit:before{content: ''; width:10px; background: url(../../images/com/box_pit01.png) center top no-repeat; display: block;height: 8px;position: absolute;top: -7px; right:25px}

.alarm_list .alarm_tit strong{background: url("../../images/com/icon_alarm01.png") left center no-repeat;padding-left: 20px;font-weight: 600; font-size: 14px}
.alarm_list .alarm_close{background: url("../../images/com/icon_close02.png") center no-repeat; width: 20px;height: 20px; text-indent: -9999px;}

.alarm_list .alarm_guide{padding: 30px;  overflow-y:overlay;  max-height: 490px;}
.alarm_list .alarm_guide::-webkit-scrollbar { width:10px; }
.alarm_list .alarm_guide::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 50%, 0.25); border-radius: 100px;}

.alarm_list .alarm_guide li a{background: #fff;padding: 15px; border-radius: 10px;box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1); margin-bottom: 20px;border: 1px solid #fff;}
.alarm_list .alarm_guide li strong{display: block; color: #2658de; font-size: 14px; }
.alarm_list .alarm_guide li span{display: block; font-size: 13px; margin: 8px 0;}
.alarm_list .alarm_guide li em{display: block; font-size: 12px;background: url("../../images/com/bbs_date.png") left center no-repeat; padding-left: 15px; background-size: 10px;}
.alarm_list .alarm_guide li a:hover,
.alarm_list .alarm_guide li a:focus{background: #f2f9ff; border: 1px solid #b9d0ff;}

.alarm_list .alarm_guide_btn a{border: 1px solid #e3e3e3; border-radius: 4px; line-height: 36px; text-align: center;font-size: 12px; background: #fff;}
.alarm_list .alarm_guide_btn a:hover,
.alarm_list .alarm_guide_btn a:focus{ color: #fff; background: #3669ff;}

@media all and (max-width :1024px) {
.alarm_list{top:40px;}
.alarm_list .alarm_tit:before{right:11px}
}

@media all and (max-width :767px) {
.alarm_list .alarm_guide{padding: 20px 15px;  max-height: 400px;}
.alarm_list .alarm_guide li a{ margin-bottom: 15px;}
}

@media all and (max-width :480px) {
.alarm_list{width: 320px; right:-30px;}
.alarm_list .alarm_tit:before{right:40px;}
}










/* 내정보 */
.people_info{ position: relative; z-index: 6;}
.people_info .pi_btn{ border: 2px solid #3669ff !important;border-radius: 100px;box-shadow: -1px -5px 5px rgba(0,61,180,0.1); padding: 0 8px;  position: relative;background: #fff;height: 60px; min-width: 180px; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap:10px; text-align: left;}

.people_info .pi_btn em{ display: inline-block; width: 44px; height: 44px; line-height: 44px; border-radius: 50%; overflow: hidden;}
.people_info .pi_btn em img{ width: 100%;}
.people_info .pi_btn span{font-size: 13px;}
.people_info .pi_btn strong{ font-size: 16px; font-weight: 700;display: block;  margin-bottom: 2px;}
.people_info .pi_btn i{ width: 24px; height: 24px; display: inline-block; background: #3669ff url("../../images/com/arrow_down01.png") center no-repeat; border-radius: 50%; text-indent: -99999px;}

.people_info .pi_list {  position: absolute; top:52px; left:0;z-index: 7;width:80%; margin: 0 10%;  display: none;}
.people_info .pi_list:before{ content: ''; width: 100%;  background: url("../../images/com/box_pit01.png") center top no-repeat;   display: block; height: 8px; position: absolute; top:0; }

.people_info .pi_list .sitemap_close{ border: none; background: url("../../images/com/icon_close01.png") center no-repeat; width: 20px; height: 20px;  position: absolute;  top:14px; right:10px; text-indent: -9999px; background-size: 20px; border-radius: 50%; display: none;}

.people_info .pi_list ul {background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 1px 10px 10px rgba(0,0,0,0.1); overflow: hidden; margin-top: 6px;}
.people_info .pi_list ul li{ border-bottom: 1px solid #f1f1f1;}
.people_info .pi_list ul li:last-child{ border-bottom: none;background: #f9f9f9;}
.people_info .pi_list ul li > a{ padding: 10px 20px; font-size: 13px; display: block; font-weight: 500;  text-align: center;}
.people_info .pi_list ul li > a:hover,
.people_info .pi_list ul li > a:focus{ color:#3543e4;font-weight: 700;}

@media all and (max-width :1280px) {
.people_info .pi_btn{ height: 50px; min-width: 160px;}
.people_info .pi_btn em{  width: 36px; height: 36px; line-height: 36px;}
.people_info .pi_btn span{font-size: 12px;}
.people_info .pi_btn strong{ font-size: 14px;}
.people_info .pi_btn i{ width: 20px; height: 20px; background-size: 8px;}
.people_info .pi_list {  top:41px;}
}

@media all and (max-width :1024px) {
.people_info{  display: none; }
}





/* 대메뉴 */
.nav .gnb { display: flex; justify-content: center; gap:25px; align-items: center; padding-top: 5px;}
.nav .gnb li a{ display: block; font-size: 18px; font-weight: 600; padding: 0 20px;line-height: 44px; height: 44px;border-radius: 100px; text-align: center;}
.nav .gnb li a:hover,
.nav .gnb li a:focus,
.nav .gnb li a.active{ background-image: linear-gradient(0deg, rgb(52,61,224),rgb(54,105,255));  color: #fff;box-shadow: -1px -5px 5px rgba(0,61,180,0.1);}

.nav .gnb li .sitemap_btn{ text-indent: -9999px; background: url("../../images/com/menu_sitmap01.png") center no-repeat;  width: 40px; height: 40px; background-size: 22px !important; border: none;}
.nav .gnb li .sitemap_btn:hover,
.nav .gnb li .sitemap_btn:focus,
.nav .gnb li .sitemap_btn.active{ background-image: url("../../images/com/menu_sitmap03.png"); background-color:inherit!important; }

@media all and (max-width :1520px) {
.nav .gnb li a{ padding: 0 15px;}
}


@media all and (max-width :1280px) {
.nav .gnb {gap:15px; }
.nav .gnb li a{ font-size: 16px; padding: 0 10px;line-height: 36px; height: 36px;}
.nav .gnb li .sitemap_btn{  width: 36px; height: 36px;}
}
@media all and (max-width :1024px) {
.nav .gnb {gap:5px;}
.nav .gnb li a:hover,
.nav .gnb li a:focus,
.nav .gnb li a.active{font-size: 13px;}
.nav .gnb li .sitemap_btn{  width: 40px; height: 30px; margin-left:5px;}
}
@media all and (max-width :767px) {

.nav .gnb li:nth-of-type(1),
.nav .gnb li:nth-of-type(2),
.nav .gnb li:nth-of-type(3),
.nav .gnb li:nth-of-type(4),
.nav .gnb li:nth-of-type(5),
.nav .gnb li:nth-of-type(6){ display: none;}
.nav{ order: 2;}
.nav .gnb li .sitemap_btn{  width: 33px; height: 30px; margin-left:0;}
}






/* 아이콘 사용 안하기로함 */
.sitemap_box ul li a strong{background-image:none !important; }



/* 사이트맵 */
.sitemap_list{ display: none; border-radius: 30px;box-shadow: 0 0 20px rgba(0,61,180,0.1); background: #fff; padding: 10px 0; border: 2px solid #d5e5fd; margin-top: 10px; position: absolute; left:50%; transform: translateX(-50%);overflow: hidden; z-index: 10; min-width: 1200px;}
.sitemap_list_guide{ position: relative;z-index: 10; height: 700px; overflow: auto; marign: 10px 10px 0 0;}
.sitemap_list .sitemap_close{ border: none; background: url("../../images/com/icon_close03.png") center no-repeat; width: 28px; height: 28px; display: inline-block; position: absolute;  top:0; right:15px; text-indent: -9999px; border-radius: 50%;}
.sitemap_box{display: flex; gap:20px;padding-top: 30px; padding-bottom: 20px; align-items: flex-start;border-bottom: 1px dashed #d5e5fd;}
.sitemap_box:last-of-type{ border-bottom: none;}

.sitemap_box h5 {padding-left: 30px;}
.sitemap_box h5 a{ font-size: 15px; font-weight: 700; line-height: 38px; height: 38px;border-radius: 100px; width: 80px; text-align: center;box-shadow: 1px 10px 10px rgba(0,61,180,0.08); background: #3669ff; color: #fff;}

.sitemap_box .sitemap_box_menu { display: flex; gap:10px;align-items: flex-start; width: 100%; flex-wrap: wrap; padding-right:30px;}
.sitemap_box .sitemap_box_menu > li{width: calc(16.66% - 10px);}
.sitemap_box .sitemap_box_menu > li > a {  border-radius: 4px; background: #f0f7ff; padding: 4px 15px;}
.sitemap_box .sitemap_box_menu > li > a > strong{ font-size:15px;line-height:20px; min-height: 30px; background-position: left 3px; background-repeat: no-repeat; padding-top: 5px; display:inline-block;font-weight:600; }


.sitemap_box .sitemap_box_menu > li > a > i{ display: none;}

.sitemap_box .sitemap_box_menu > li > a:hover strong,
.sitemap_box .sitemap_box_menu > li > a:focus strong,
.sitemap_box .sitemap_box_menu > li > a.active strong{ color: #0033ca;}
.sitemap_box .sitemap_box_menu > li > a.active > i{background-image: url("../../images/com/arrow_top02.png");}
.sitemap_box .sitemap_box_menu > li > a > i.on{background-image: url("../../images/com/arrow_top02.png");}

.sitemap_box_menu ul { margin: 10px 15px;}
.sitemap_box_menu ul li a{padding: 5px 0;}
.sitemap_box_menu ul li a span{ padding-left: 10px; background: url("../../images/com/point01.png") left 5px no-repeat;  display: block; font-size: 14px;}
.sitemap_box_menu ul li a:hover span,
.sitemap_box_menu ul li a:focus span,
.sitemap_box_menu ul li a.active span{color: #0033ca; font-weight: 600;}


.sitemap_list .sitemap_pi{display: none;}



/* lms 특이사항 */
.sitemap_box select{height:38px; line-height: 37px; padding: 0 25px 0 15px!important; border: 2px solid #c4d6ea; font-weight: 500;}
.sitemap_box .sitemap_box_menu .sitmap_sub_w{ width:83%;}
.sitemap_box .sitemap_box_menu .sitmap_sub{ width: 100%; display: flex; gap:10px; flex-wrap: wrap;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li{width: calc(20% - 10px);}

.sitemap_box .sitemap_box_menu .sitmap_sub > li > a > i{ display: none;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a {  border-radius: 4px; background: #f0f7ff; padding: 4px 15px;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a > strong{ font-size:15px;line-height:20px; min-height: 30px; background-position: left 3px; background-repeat: no-repeat;  display:inline-block;font-weight:600; word-break:break-all; padding-top: 5px;}
.sitemap_box .sitemap_box_menu .sitmap_sub { margin: 10px 15px;}
.sitemap_box .sitemap_box_menu > li > a > i{ display: none;}

.sitemap_box .sitemap_box_menu .sitmap_sub > li > a:hover strong,
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a:focus strong,
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a.active strong{ color: #0033ca;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a.active > i{background-image: url("../../images/com/arrow_top02.png");}



@media all and (max-width :1320px) {
.sitemap_list{ min-width:inherit; width: 95%;}

}




@media all and (max-width :1280px) {
.sitemap_list{ border-radius: 15px;}
.sitemap_list .sitemap_list_guide{ height: 650px; overflow-y: auto;  margin: 10px 0;}
.sitemap_list .sitemap_close{ top:0; }

.sitemap_box{ display: block; padding-top: 15px;}
.sitemap_box h5 {padding-left: 25px; margin-bottom: 8px;}
.sitemap_box h5 a{ font-size: 14px;width: 56px; line-height: 24px; height: 24px; background: #3669ff; color: #fff;}
.sitemap_box .sitemap_box_menu { padding: 0 20px;}
.sitemap_box .sitemap_box_menu > li > a > strong{ font-size:14px;line-height:18px; }
.sitemap_box_menu ul li a span{ font-size: 13px;}


/* lms 특이사항 */
.sitemap_box select{height:33px; line-height: 33px;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a > strong{ font-size:14px;line-height:18px;}
}




@media all and (max-width :1024px) {
.sitemap_list{ border-radius: 0;transform: translateX(0); width: 50%; background: rgba(0,0,0,0.5); position: fixed; z-index: 10; left:50%; top:0; margin-top: 0; border: none; height: 100%; padding: 0;}

.sitemap_list .sitemap_close{ width: 32px; height: 32px;top:20px; right:15px; background-image: url("../../images/com/icon_close01.png")}

.sitemap_list .sitemap_list_guide{  background: #f1f1f1; width: 100%; height: 100%; margin:0; padding-top:5px}

.sitemap_box{ overflow: hidden; border-radius: 10px; margin:15px 5% 5% 5%; padding-top: 0; border: 1px solid #dce9f7; background: #fff; padding-bottom: 0;}
.sitemap_box h5 {padding-left:0; margin-bottom: 0;}
.sitemap_box h5 a{ width: 100%; border-radius: 0; font-weight: 600; text-align: left; padding-left:28px;  line-height: 36px; height: 36px; font-size: 15px;}
.sitemap_box .sitemap_box_menu{ display: block!important; background: #fff; padding: 0;gap:0;}

.sitemap_box .sitemap_box_menu > li{ width: 100% !important; border-top: 1px solid #e2edf8;}
.sitemap_box .sitemap_box_menu > li > a { padding: 10px 0; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 0;}
.sitemap_box .sitemap_box_menu > li > a > strong{ background-size: 20px; padding: 5px 5px 5px 28px; font-size: 15px;width: calc(100% - 28px);}
.sitemap_box .sitemap_box_menu > li > a > i{ background: url("../../images/com/arrow_down02.png") center no-repeat; text-indent: -9999px; width: 28px; height: 20px;display: inline-block;}

 /*.sitemap_box .sitemap_box_menu ul{ display: none;} ■■■■■■ 2뎁스 메뉴 숨겨서셔 보기 ■■■■■■■■
.sitemap_box .sitemap_box_menu:nth-of-type(1) > li:nth-of-type(2) > ul{ display: block;} /* ■■■■■■ 2뎁스 메뉴 보기 ■■■■■■■■*/

.sitemap_box .sitemap_box_menu ul{  display: none;padding:10px 10px 10px 36px; border-top: 1px dashed #e2edf8; margin: 0;}
.sitemap_box .sitemap_box_menu ul li a span{ font-size: 15px;background-position: left 7px}

.sitemap_box .sitemap_box_menu > li > a:hover,
.sitemap_box .sitemap_box_menu > li > a:focus,
.sitemap_box .sitemap_box_menu > li > a.active{ background:#f0f7ff;}




/* lms 특이사항 */
.sitemap_box select{margin: 10px 20px 0 20px; width: calc(100% - 40px);height:45px; line-height: 45px;}
.sitemap_box .sitemap_box_menu .sitmap_sub_w{ width: 100%; }

.sitemap_box .sitemap_box_menu .sitmap_sub_w .sitmap_sub ul{padding: 10px 15px 10px 15px; }
.sitemap_box .sitemap_box_menu .sitmap_sub{width:100%;display: block;padding:5px 20px 10px 20px; margin: 0; border:0; }
.sitemap_box .sitemap_box_menu .sitmap_sub > li {border: 1px solid #e2edf8; border-radius: 8px; margin:10px 0;overflow: hidden;width:100%;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a { padding: 5px 0; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 8px;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a > strong{  background-size: 20px;padding: 5px 5px 5px 15px; font-size: 15px;width: calc(100% - 28px);}
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a > i{ background: url("../../images/com/arrow_down02.png") center no-repeat; text-indent: -9999px; width: 28px; height: 20px;display: inline-block;}


.sitemap_box .sitemap_box_menu .sitmap_sub > li > a:hover,
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a:focus,
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a.active{ background:#f0f7ff;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li > a.on {border-radius:8px 8px 0 0;}







/* 사이트맵 안의 내정보*/
.sitemap_list .sitemap_pi{ display: flex; justify-content: space-between; align-items: flex-end; padding:20px 5% 0 5%;}
.sitemap_list .pi_btn{ border:none; display: flex; align-items: center; flex-wrap: wrap;  gap:10px; text-align: left;}

.sitemap_list .pi_btn em{ display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; overflow: hidden; background: #f2f7ff;}
.sitemap_list .pi_btn em img{ width: 100%;}
.sitemap_list .pi_btn span{font-size: 13px;}
.sitemap_list .pi_btn strong{ font-size: 16px; font-weight: 700;display: block;  margin-bottom: 2px;}

.sitemap_list .sitemap_pi .logout_btn{ border: 1px solid #f1f1f1!important; background: #fff; border-radius:100px; display: inline-block; font-size: 11px; padding: 0 10px; line-height: 24px; height: 24px;}

}

@media all and (max-width :767px) {
.sitemap_list{ width: 100%; left: 0; padding: 0 0 75px 0;}
.sitemap_list .sitemap_close{ top:10px; right:3%;}
.sitemap_list .sitemap_list_guide{ width: 70%; margin-left: 30%;}

.sitemap_box h5 a{ padding-left:25px;}
.sitemap_box .sitemap_box_menu ul{  padding:10px 10px 10px 25px}
.sitemap_box .sitemap_box_menu > li > a > strong{  padding: 5px 5px 5px 25px;}

}


@media all and (max-width :620px) {

/* lms 특이사항 */
.sitemap_box select{margin: 10px 10px 0 10px; width: calc(100% - 20px);height:40px; line-height: 38px;}
.sitemap_box .sitemap_box_menu .sitmap_sub{padding:5px 10px 10px 10px;}
.sitemap_box .sitemap_box_menu .sitmap_sub > li { border-radius: 6px;}
}


@media all and (max-width :420px) {
.sitemap_list .sitemap_list_guide{  width: 100%; margin-left: 0;}
}













/* 타이틀*/
.title_guide{ position: absolute;left:315px; top:140px;z-index: 4; display: inline-block;}
.title_guide h3 span{font-size:25px; word-break:keep-all; font-weight: 700;position: relative; display: inline-block; padding-top: 8px;}
.title_guide h3 span:before{position: absolute; content: ''; width: 35%; background: #3669ff; height: 4px; display: inline-block; top:0;left:3px; min-width: 15px;}
.title_guide .alltop_btn{ display: none;}

@media all and (max-width :1720px) {
.title_guide{ left:295px}
}
@media all and (max-width :1520px) {
.title_guide{ left:280px; top:130px;}
.title_guide h3 span{font-size:22px}
.title_guide h3 span:before{height: 3px;}

}
@media all and (max-width :1280px) {
.title_guide{ left:245px;top:110px;}
.title_guide h3 span{font-size:19px;padding-top: 7px;}
}
@media all and (max-width :1024px) {
.title_guide{ left:50px;top:95px;}
.title_guide h3 span{font-size:18px; font-weight: 600;}
}

@media all and (max-width :767px) {
.title_guide{ left:2%;top:10px;z-index: 4;}
.title_guide h3{ display: flex; align-items: center;}
.title_guide h3 span{ font-size:18px; font-weight: 700;height: 40px;line-height: 40px;padding-top: 0;}
.title_guide h3 span:before{ display: none;}
.title_guide .alltop_btn{ text-indent: -9999px; background: url("../../images/com/arrow_back01.png") center no-repeat; width: 40px; height: 40px;line-height: 40px; display: inline-block;}
}