@charset "utf-8";

#homeDiv {min-width: 320px}

/******************************
	HEADER	HEADER	HEADER
******************************/
#header {width: 100%; min-width: 1440px; background: #fff; position: fixed; top: 0; z-index: 1000; transition: all 0.24s; border-bottom: 1px solid rgba(0,0,0,.1)}
.top-util {height: 50px; background-color: var(--navy); position: relative; z-index: 100}
.top-util .top-link {height: 50px; display: flex; float: left}
.top-util .top-link .ko{background:rgba(255,255,255,.1);padding:0 20px} 
.top-util .top-link .ko:hover{background:var(--black)}
.top-util .top-link .logo-white{color:#fff;line-height:43px}
.top-util .top-link .intro {width: 240px; height: 100%; background-color: #65259c; display: flex; align-items: center; justify-content: center}
.top-util .top-link .intro a.logo-white {width: 100%; display: block; text-align: center;color:#fff}
.top-util .top-link .intro a.logo-white img {width: 82%}
.top-util .top-link ul.site-list {display: flex}
.top-util .top-link ul.site-list li a.site-item {height: 50px; color: rgba(255,255,255,.7); display: flex; align-items: center; padding: 0 1.5rem; transition: .4s; -webkit-transition: .4s}
.top-util .top-link ul.site-list li a.site-item:hover {background-color: rgba(0,0,0,.05)}
.top-util .top-link ul.site-list li a.site-item.on {font-weight: 500; color: var(--navy); background-color: #fff}
.top-util .top-user {height: 50px; display: flex; float: right}
.top-util .top-user .user-btn {height: 100%; color: #fff; display: flex; align-items: center; padding: 0 1.5rem}
.top-util .top-user .comment {height: 100%; font-size: 14px; color: #fff; background: url('/img/lms/com/icon-user.svg') 24px 50% no-repeat; background-size: 20px; display: flex; align-items: center; padding: 0 3rem 0 3rem; position: relative; cursor: pointer}
.top-util .top-user .comment::after {width: 12px; height: 100%; background: url('/img/lms/com/arw-white-btm.svg') center no-repeat; content: ''; position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%)}
.top-util .top-user .comment ul.my-menu {height: 0; background-color: #8b5bbb; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0; transition: .4s; -webkit-transition: .4s; overflow: hidden; padding: 12px 0; border-radius: 0 0 20px 20px; box-shadow: 0 2px 32px 1px rgb(0 0 0 / 16%)}
.top-util .top-user .comment ul.my-menu:before {content:'';position:absolute;top:-10px;left: 50%;transform: translateX(-50%);border-top: 0px solid transparent;border-left: 9px solid transparent;border-right: 9px solid transparent;border-bottom: 10px solid #8b5bbb}
.top-util .top-user .comment:hover ul.my-menu {height: auto; opacity: 1; overflow: visible}
.top-util .top-user .comment ul.my-menu li {width: 100%; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 40px}
.top-util .top-user .comment ul.my-menu li a span {color: rgba(255,255,255,.7); transition: .4s; -webkit-transition: .4s}
.top-util .top-user .comment ul.my-menu li a:hover span {color: #fff}
.top-util .top-user .login {height: 100%; color: #fff; background: rgba(255,255,255,.1) url('/img/lms/com/icon-login.svg') 24px 50% no-repeat; background-size: 20px; display: flex; align-items: center; padding: 0 1.5rem 0 3.25rem; transition: .4s; -webkit-transition: .4s}
.top-util .top-user .login:hover {background-color: rgba(0,0,0,.05)}
.top-util .top-user .join {height: 100%; color: #fff; background: rgba(255,255,255,.1) url('/img/lms/com/icon-user.svg') 24px 50% no-repeat; background-size: 20px; display: flex; align-items: center; padding: 0 1.5rem 0 3.25rem; transition: .4s; -webkit-transition: .4s; margin: 0 0 0 2px}
.top-util .top-user .join:hover {background-color: rgba(0,0,0,.05)}
.top-util .top-user .my-edu {height: 100%; color: #fff; background: rgba(255,255,255,.1) url('/img/lms/com/icon-book.svg') 24px 50% no-repeat; background-size: 18px; display: flex; align-items: center; padding: 0 1.5rem 0 3.25rem; transition: .4s; -webkit-transition: .4s; margin: 0 0 0 2px}
.top-util .top-user .my-edu:hover {background-color: rgba(0,0,0,.05)}

.header-bottom {height: 100px; position: relative}
.header-bottom > .inner {height: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center}
.header-bottom > .inner::after {content: none}
.header-bottom h1.logo {position: relative; z-index: 10}
.header-bottom h1.logo a {width: 360px; height: 100%; display: flex; align-items: center;margin-top:10px}
.header-bottom h1.logo img {/*width: 100%*/}

.gnb {width: calc(100% - 404px); height: 100%; position: relative}
.gnb::after {content: ''; display: block; clear: both}
.main-menu {height: 100%; display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center}
.gnb-item {width: 200px; height: 100%; position: relative}
.gnb-link {width: 100%; height: 100%; color: var(--black); position: relative; z-index: 1; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: .4s; cursor: pointer}
.gnb-link:not(:last-child):after {width: 16px; height: 100%; background: url(/img/lms/com/arw-black-btm.svg) center no-repeat; content: ''; display: inline-block; margin-left: 8px}
.gnb-link:hover {}
.gnb-item>.sub-menu-list {position: absolute;z-index: 2;top: calc(100% - 16px);left: 50%;transform: translate(-50%);opacity: 0;transition: all 0.24s;box-shadow: 0 2px 32px 1px rgb(0 0 0 / 16%);height: 0;padding: 0;overflow: hidden;}
.gnb-item>.sub-menu-list:before{content:'';position:absolute;top:-10px;left: 50%;transform: translateX(-50%);border-top: 0px solid transparent;border-left: 9px solid transparent;border-right: 9px solid transparent;border-bottom: 10px solid #ffffff;}
.sub-menu-list {min-width: 160px;display: block;background-color: #fff;padding: 20px 32px;border-radius: 4px;}
.sub-menu-list:first-child {border-left: 1px solid var(--light-gray-line)}
.sub-menu-list li {text-align: left;}
.sub-menu-list li a {display: block;}
.sub-menu-list li a span{height: 40px;line-height: 40px;font-size: 15px;font-weight: 500;display: inline-block;position: relative;white-space: nowrap;color: #242b38;}
.sub-menu-list li a span::before {width: 0; height: 1px; background-color: #242b38; content: ''; position: absolute; left: 0; bottom: 5px;  transition: .4s }
.sub-menu-list li a:hover span {font-weight: 500;}
.sub-menu-list li a:hover span::before {width: 100%}
.gnb-item:hover .sub-menu-list {top: calc(100% - 4px);opacity: 1;padding: 20px 32px;height: auto;overflow: visible;}



/******************************
	MOBILE HEADER
******************************/
.m_menu {width: 72px; height: 72px; font-size: 0; background: transparent; display: none; flex-flow: column wrap; place-content: center; align-items: center; justify-content: center; position: absolute; z-index: 4; top: 0; right: 0}
.m_menu i {width: 32px; height: 3px; background: var(--navy); display: block; margin: 3px 0}
.m_menu_bg {width: 100%; height: 100vh; display: none; background: rgba(0,0,0,0.48); position: absolute; top: 0; right: 0}
.m_nav {width: 320px; height: 100vh; background: #fff; display: none; position: absolute; z-index: 16; top: 0; right: -100vw}
.btn_closed {width: 24px; height: 24px; position: absolute; top: 20px; right: 20px}
.btn_closed i {width: 24px; height: 2px; background: var(--black); position: absolute; top: 50%; transform: rotate(45deg)}
.btn_closed i:nth-child(2) {transform: rotate(-45deg)}
.m_nav .top {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-content: center;align-items: center;padding: 0 72px 0 20px;height: 120px;background: #f7f7f7}
.m_nav .top .gnb-link {display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: flex-start;align-items: center;width: 100%;height: auto;padding: 0 0 12px 0;color: black}
.m_nav .top a {display: inline-flex;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: flex-start;align-items: center;position: relative;font-size: 16px;font-weight: 700;border-bottom: 1px solid #242b38}
.m_nav .top a+a {margin-left: 32px}
.m_nav .top .comment {display: block;width: 100%;padding-bottom: 16px;letter-spacing: normal}
.m_nav .top .comment span {padding-right: 2px;font-weight: 700;color: #242b38}
.m_nav .top .comment span:before {content: url(/img/lms/com/icon-user-circle.svg);display: inline-block;vertical-align: text-bottom;width: 22px;height: 22px;margin-right: 8px;filter: brightness(0)}
.m_nav_list {list-style: none;border-top: 1px solid #eeeeee;height: calc(100% - 120px);overflow-y: auto}
.m_nav_list .m_nav_item {border-bottom: 1px solid #eeeeee}
.m_nav_list .m_nav_item .m_nav_link {position: relative;display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: space-between;align-items: center;height: 72px;font-weight: 600;padding: 0 24px;transition: 0.24s;cursor: pointer}
.m_nav_list .m_nav_item .m_nav_link::after {content: url(/img/lms/com/arw-black-right.svg);position: relative;transition: 0.24s;width: 10px;opacity: 0.48}
.m_nav_list .m_nav_item .m_nav_link::focus {color: #000}
.m_nav_list .m_nav_item.on .m_nav_link::after {transform: rotate(90deg);opacity: 1}
.m_nav_list .m_nav_item .m_sub_list {position: relative;display: none;width: 100%;padding: 16px;background: var(--bg-gray2)}
.m_nav_list .m_nav_item .m_sub_list .m_sub_item .m_sub_link {display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: flex-start;align-items: center;height: 48px;padding-left: 16px;font-size: 16px;color: #242b38;cursor: pointer}

.nav {position: absolute; bottom: 8px; left: 50%; z-index: 2; transform: translateX(-50%); width: 100%; max-width: 1440px; display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; margin-bottom: 20px}
.nav li:not(:first-child) { padding-left: 16px}
.nav li span { display: flex;flex-flow: row wrap; justify-content: center; align-items: center;line-height: 1; font-size: 14px;  color: #ffffff; letter-spacing: normal}
.nav li span img { display: inline-block; width: 14px; height: 14px; vertical-align: top}
.nav li:not(:first-child) span img { margin-right: 16px; padding: 1px}

.bodyWrap {position: relative; z-index: 10; padding: 150px 0 0}
.bodyWrap:after {content: ''; display: block; clear: both}



/******************************
	PARTNERS	PARTNERS
******************************/
.partners-wrap {position: relative;background: #ffffff;border-top: 1px solid #eeeeee;border-bottom: 1px solid #eeeeee; margin: 64px 0 0}
.partners-wrap .swiper {margin: 0;padding: 0 48px;height: 128px;}
.partners-wrap .swiper-slide {}
.partners-wrap .swiper-slide img {width: fit-content;}
#partnersSwiperButtonPrev,
#partnersSwiperButtonNext {top: 50%;transform: translateY(-50%);width: 32px;height: 64px;border-radius: 8px;background: #eee;border: 1px solid #dcdcdc;}
#partnersSwiperButtonPrev {left: 0;}
#partnersSwiperButtonNext {right: 0;}
#partnersSwiperButtonPrev::after,
#partnersSwiperButtonNext::after {content: url(/img/lms/com/icon_angle_left.svg); width: 20px;height: 20px;}



/******************************
	FOOTER	FOOTER	FOOTER
******************************/
#footer {background: #3f454d; display: block; position: relative; z-index: 2}
#footer > .inner {width: 100%; display: flex; align-items: center; padding: 20px 0}
#footer > .inner::after {content:''; display: block; clear: both}
.footer-logo {width: 240px}
.footer-logo img {width:100%; opacity: 0.64}
.footer-center {margin: 0 0 0 64px}
.footer-link {display: inline-flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center;}
.footer-link li {position: relative; }
.footer-link li:not(:first-child):before {content:'';display: block;position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 1px;height: 12px;background-color: #ffffff;opacity: 0.8;}
.footer-link li a {display: block;height: 20px;line-height: 20px;padding: 0 20px;color: #ffffff;font-size: 14px}
.footer-info {padding-top: 8px}
.footer-info ul {display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center;margin: 4px 0;}
.footer-info ul:last-child {margin: 4px 0 0}
.footer-info ul li {font-weight: 200; position: relative; display: block;height: 20px;line-height: 20px;padding: 0 20px;letter-spacing: 0;color: #ffffff;font-size: 14px;opacity: 0.5}
.footer-info ul li:not(:first-child):before {content:'';display: block;position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 1px;height: 12px;background-color: #ffffff;opacity: 0.8;}
#footer-scroll-top { display: inline-flex; position: absolute; border-radius: 8px; padding: 8px 16px; letter-spacing: 1px; font-size: 14px; color: #ffffff;background-color: #2e3236; top: 50%; right: 0; transform: translateY(-50%)}
#footer-scroll-top:before {content: url(/img/lms/com/icon-scroll-top.svg); display: inline-block; margin-right: 8px; width: 16px; height: 16px; }




@media screen and (max-width: 1440px) {
	#header {min-width: 100%}
	.top-util .top-link .intro {width: 200px}
	.top-util .top-link .intro a.logo-white img {width: 88%}
	.top-util .top-link ul.site-list li a.site-item {font-size: 14px; padding: 0 16px}
	.top-util .top-user .user-btn {font-size: 14px; background-position: 12px 50%; padding: 0 16px 0 40px}
	.top-util .top-user .comment {font-size: 14px; background: url('/img/lms/com/icon-user.svg') 0 50% no-repeat; background-size: 20px; padding: 0 32px 0 24px}
	.top-util .top-user .comment::after {right: 12px}
	.top-util .top-user .comment ul.my-menu li {padding: 0 28px}
	.top-util .top-user .my-edu {font-size: 14px; background: rgba(255,255,255,.1) url('/img/lms/com/icon-book.svg') 16px 50% no-repeat; background-size: 16px; padding: 0 16px 0 40px}
	.header-bottom {height: 80px}
	.header-bottom h1.logo {padding: 0 0 0 28px}
	.header-bottom h1.logo a {width: 300px}
	.gnb {width: auto; padding-right: 40px}
	.gnb-item {width: 160px}
	.gnb-link {font-size: 18px}
	.gnb-link:not(:last-child):after {width: 12px}
	.sub-menu-list {min-width: 140px; padding: 12px 20px}
	.sub-menu-list li a span {height: 32px; line-height: 32px; font-size: 14px}
	.gnb-item:hover .sub-menu-list {padding: 12px 20px}
	
	.bodyWrap {padding: 130px 0 0}
	
	.partners-wrap {padding: 0 32px}
	
	#footer > .inner {padding: 20px}
	.footer-logo {width: 200px}
	.footer-center {margin: 0 0 0 20px}
	#footer-scroll-top {right: 20px}
}

@media screen and (max-width: 1280px) {
	.partners-wrap {margin: 40px 0 0}
}

@media screen and (max-width: 1080px) {
	.top-util {display: none}
	.header-bottom {height: 72px}
	.gnb {display: none}
	.m_menu {display: flex}
	
	.intro-gnb {width: 100%; height: 0}
	.intro-menu {display: none}
	
	.bodyWrap {padding: 72px 0 0}
	
	.partners-wrap .swiper {height: 80px}
	#partnersSwiperButtonPrev,
	#partnersSwiperButtonNext {height: 48px}
	
	#footer > .inner {flex-direction: column; padding: 20px 20px 72px}
	.footer-center {margin: 20px 0 0 0}
	.footer-link {width: 100%; justify-content: center}
	.footer-link li:not(:first-child):before {height: 8px}
	.footer-link li a {height: 16px;line-height: 16px;padding: 0 8px}
	.footer-info ul {width: 100%; font-size: 0; display: inline-block; text-align: center}
	.footer-info ul li {height: 16px;line-height: 16px;padding: 0 8px;font-size: 12px;display: inline-block}
	.footer-info ul li:not(:first-child):before {height: 8px}
	#footer-scroll-top {top: auto; right: auto; bottom: 20px; left: 50%; transform: translate(-50%, 0)}
	#footer-scroll-top:before {content: url(/img/lms/com/icon-scroll-top.svg); display: inline-block; margin-right: 8px; width: 16px; height: 16px
}

@media screen and (max-width: 768px) {
	.header-bottom h1.logo {padding: 0 0 0 20px}
	.header-bottom h1.logo a {width: 220px}
	
	.partners-wrap {margin: 28px 0 0}
	
	.footer-link li a {font-size: 12px}
}