@charset "utf-8";

body {overflow-x: hidden}

/******************************
	VISUAL	VISUAL	VISUAL
******************************/
.main-visual {width: 100%; height: 550px;  position: relative;padding-top:50px}
.main-visual::after {width: 100%; height: 100%; content: none; position: absolute; top: 0; left: 0; z-index: 1;}
.main-visual .inner {height: 100%; display: flex; flex-direction: column; padding: 84px 0 0; position: relative; z-index: 10;background:url(/img/lms/main/img_visual.jpg) center top no-repeat;border-radius:30px;}
.main-visual .inner::after {content: none}
.main-visual .text {color: #fff;padding:80px 0 0 130px}
.main-visual .text p.text1 {font-size: 48px; letter-spacing: -.075em;font-family: 'GamtanRoad'}
.main-visual .text p.text2 {font-size: 56px; font-weight: 500; letter-spacing: -.075em; margin: 10px 0 0;font-family: 'GamtanRoad'}
.main-visual .text p.text3 {line-height: 1.4; margin: 30px 0 0}
.main-visual .quick-area {display: flex; position: absolute; bottom: 0; left: 0}
.main-visual .quick-area a.quick-link {height: 100px; font-size: 28px; letter-spacing: -.125em; background-color: rgba(255,255,255,.7); border-radius: 20px 20px 0 0; display: flex; align-items: center; position: relative; transition: .4s; -webkit-transition: .4s}
.main-visual .quick-area a.quick-link.link1 {padding: 0 32px 0 120px}
.main-visual .quick-area a.quick-link.link2 {padding: 0 32px 0 108px; margin: 0 0 0 8px}
.main-visual .quick-area a.quick-link::before {height: 100%; content: ''; position: absolute; top: 50%; left: 32px; transform: translateY(-50%)}
.main-visual .quick-area a.quick-link.link1::before {width: 62px; background: url('/img/lms/main/icon-visual-menu2-1.svg') center no-repeat; background-size: contain; transition: .4s; -webkit-transition: .4s}
.main-visual .quick-area a.quick-link.link2::before {width: 52px; background: url('/img/lms/main/icon-visual-menu2-2.svg') center no-repeat; background-size: contain; transition: .4s; -webkit-transition: .4s}
.main-visual .quick-area a.quick-link:hover {color: #fff; background-color: var(--purple)}
.main-visual .quick-area a.quick-link.link1:hover::before {background: url('/img/lms/main/icon-visual-menu1-on.svg') center no-repeat; background-size: contain}
.main-visual .quick-area a.quick-link.link2:hover::before {background: url('/img/lms/main/icon-visual-menu2-on.svg') center no-repeat; background-size: contain}

/******************************
	CONT-TOP	CONT-TOP
******************************/
.title-box {width: 100%; text-align:center;margin: 0 0 64px}
.title-box .title{font-family: 'GamtanRoad';font-size:38px;font-weight:500;color:#000}
.title-box .mor-box{position:absolute;right:0;top:0}
.title-box .mor-box a{background:#000;text-align:center;border-radius:30px;color:#fff;padding:25px 10px 25px 0;width:138px;position:relative;display:block;font-family: 'S-CoreDream';font-weight:500;line-height:1px;}
.title-box .mor-box a:after{width:10px;height:10px;background:url(/img/lms/main/icon_arrow.png);content:'';position:absolute;top:19px}
strong.main-title {font-size: 38px; letter-spacing: -.1em; position: relative; padding: 0;color:#000;font-family: 'GamtanRoad'}
a.btn-more {height: 36px; color: var(--gray); display: flex; align-items: center; position: relative}
a.btn-more i {width: 36px; height: 36px; background-color: var(--purple); border-radius: 50%; position: relative; margin: 0 12px 0 0}
a.btn-more i::before {width: 2px; height: 16px; background-color: #fff; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
a.btn-more i::after {width: 16px; height: 2px; background-color: #fff; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}

.main-cont1 {margin: 64px 0 0;font-family: 'GamtanRoad'}
.main-cont2 {margin: 64px 0 0;font-family: 'GamtanRoad'}
.main-cont2 .inner {width: 100%; display: grid; justify-content: space-between;grid-template-columns:2fr 1fr;gap:20px 64px;grid-template-rows:auto}
.main-cont2 .inner::after {content: none}
.main-cont1 .lecture-items .info .top .category{display:none}
/******************************
	공지사항	공지사항	공지사항
******************************/
.notice-area { position: relative;display:flex}
.notice-area .title-box{flex-shrink: 0;width: 200px;text-align:left}
.notice-area .title-box .ment{font-size:16px;color:#333;padding:10px 0;display:block;}
.notice-area .title-box a.btn-more{background: #000;text-align: center;border-radius: 30px;color: #fff;padding-right: 10px;width: 138px;position: relative;display: block;line-height: 33px;margin-top:20px;font-family: 'S-CoreDream';}
.notice-area .title-box a.btn-more:after{width:10px;height:10px;background:url(/img/lms/main/icon_arrow.png);content:'';position:absolute;top:10px}
.notice-area .notice-list{flex-grow:1}
.notice-area ul.notice-list {width: 100%; border-top: 2px solid #000; position: relative; overflow: hidden}
.notice-area ul.notice-list li {width: 100%; height: 95px; border-bottom: 1px solid rgba(0,0,0,.1)}
.notice-area ul.notice-list li a {width: 100%; height: 100%; font-size: 18px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; transition: .4s; -webkit-transition: .4s}
.notice-area ul.notice-list li a p.info {width: calc(100% - 120px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;font-family: 'S-CoreDream';font-weight:600;color:#000}
.notice-area ul.notice-list li a p.date {color: rgba(0,0,0,.6);font-family: 'S-CoreDream';}
.notice-area ul.notice-list li a:hover {padding: 0}
.notice-area ul.notice-list li.null {height: 378px; display: flex; align-items: center; justify-content: center}

/******************************
	배너존	배너존	배너존
******************************/
.banner-area {min-height: 382px; background-color: var(--bg-gray4); border: 1px solid #e1e5e7; position: relative;  border-radius:30px}
.banner-area a{width:100%;height:100%}
.banner-area img {width: 100%; height: 100%;border-radius:30px}
#promotionSwiper.swiper { height: 100%; position: relative; margin: 0 auto !important}
.banner-area .controller {display: flex; position: absolute; right: 8px; bottom: 8px; z-index: 99999}
.banner-area .controller .control-arw {width: 40px; height: 40px; background-color: rgba(255,255,255,.8); background-position: center; background-repeat: no-repeat; background-size: 10px; border-radius: 5px; cursor: pointer; transition: .4s; -webkit-transition: .4s}
.banner-area .controller .control-arw.left {background-image: url('/img/lms/com/arw-black-left.svg')}
.banner-area .controller .control-arw.right {background-image: url('/img/lms/com/arw-black-right.svg'); margin: 0 0 0 4px}
.banner-area .controller .control-arw:hover {background-color: rgba(255,255,255,.95)}
.banner-area .controller .number {height: 40px; font-weight: 500; background-color: rgba(255,255,255,.8); border-radius: 5px; display: flex; align-items: center; padding: 0 16px; margin: 0 0 0 4px}
#promotionSwiper {padding: 0 !important}


.swiper-container {width: 100%; height: 100%}
.swiper-wrapper {width: 100%; height: 100%; display: block; position: relative}
.swiper-slide {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center}

@media screen and (max-width: 1440px) {
	/******************************
		VISUAL	VISUAL	VISUAL
	******************************/
	.main-visual{padding:0 32px;margin-top:20px}
	.main-visual .inner {padding: 84px 0 0 60px}
	.main-visual .text p.text1 {font-size: 38px}
	.main-visual .text p.text2 {font-size: 44px}
	.main-visual .quick-area {left: 32px}
	
	.main-cont1 {margin: 64px 0 0; padding: 0 32px}
	.main-cont2 {margin: 64px 0 0; padding: 0 32px}
}

@media screen and (max-width: 1280px) {
	/******************************
		VISUAL	VISUAL	VISUAL
	******************************/
	.main-visual {height: 380px}
	.main-visual .inner {padding: 136px 0 0  }
	.main-visual .text{text-align:center;padding:0}
	.main-visual .text p.text1 {font-size: 32px}
	.main-visual .text p.text2 {font-size: 40px}
	.main-visual .text p.text3 {margin: 20px 0 0}
	.main-visual .quick-area a.quick-link {height: 80px; font-size: 20px; letter-spacing: -.075em}
	.main-visual .quick-area a.quick-link.link1 {padding: 0 24px 0 96px}
	.main-visual .quick-area a.quick-link.link2 {padding: 0 24px 0 84px}
	.main-visual .quick-area a.quick-link::before {left: 24px}
	.main-visual .quick-area a.quick-link.link1::before {width: 52px}
	.main-visual .quick-area a.quick-link.link2::before {width: 42px}
	
	/******************************
		CONT-TOP	CONT-TOP
	******************************/
	strong.main-title {font-size: 24px; letter-spacing: -.075em}
	a.btn-more {}
	a.btn-more i {width: 28px; height: 28px; margin: 0 8px 0 0}
	a.btn-more i::before {height: 12px}
	a.btn-more i::after {width: 12px}
	
	.main-cont1 {margin: 40px 0 0}
	.main-cont2 {margin: 40px 0 0}
	
	/******************************
		공지사항	공지사항	공지사항
	******************************/
	.notice-area {}
	.notice-area ul.notice-list li {height: 64px}
	.notice-area ul.notice-list li a {font-size: 16px; padding: 0}
	.notice-area ul.notice-list li a p.info {width: calc(100% - 92px)}
	.notice-area ul.notice-list li.null {height: 100%}
}

@media screen and (max-width: 1080px) {
	.title-box {margin: 0 0 30px}
	.main-visual{margin-top:30px}
	.main-cont2 .inner {display:flex;flex-direction: column}
	/******************************
		공지사항	공지사항	공지사항
	******************************/
	.notice-area {width: 100%; margin-bottom: 28px;flex-direction: column;position:relative}
	.notice-area ul.notice-list li {}
	.notice-area ul.notice-list li a {padding: 0 16px}
	.notice-area ul.notice-list li a p.info {width: calc(100% - 120px)}
	.notice-area ul.notice-list li.null {height: 240px}
	.notice-area .title-box a.btn-more{position:absolute;top:0;right:0;margin-top:0}
	/******************************
		배너존	배너존	배너존
	******************************/
	.banner-area {width: 100%; min-height: 120px; background: none; border: 0}
	/* .banner-area .controller {right: auto; left: 50%; transform: translateX(-50%)} */
}

@media screen and (max-width: 768px) {
	/******************************
		VISUAL	VISUAL	VISUAL
	******************************/
	
	.main-visual {height: 280px;padding:0 20px}
	.main-visual .inner {padding: 60px 0 0 0 }
	.main-visual .text p.text1 {font-size: 20px}
	.main-visual .text p.text3 {font-size: 14px; margin: 16px 0 0}
	.main-visual .quick-area {left: 20px}
	.main-visual .quick-area a.quick-link {height: 60px; font-size: 16px; border-radius: 10px 10px 0 0}
	.main-visual .quick-area a.quick-link.link1 {padding: 0 24px 0 80px}
	.main-visual .quick-area a.quick-link.link2 {padding: 0 24px 0 70px}
	.main-visual .quick-area a.quick-link::before {left: 20px}
	.main-visual .quick-area a.quick-link.link1::before {width: 44px}
	.main-visual .quick-area a.quick-link.link2::before {width: 34px}
	
	strong.main-title {font-size: 24px; padding: 0 0 0 0px}
	strong.main-title::before {width: 12px; height: 12px; border: 3px solid var(--purple)}
	
	a.btn-more i {width: 24px; height: 24px; margin: 0 8px 0 0}
	a.btn-more i::before {height: 10px}
	a.btn-more i::after {width: 10px}
	
	.main-cont1 {margin: 28px 0 0; padding: 0 20px}
	.main-cont2 {margin: 28px 0 0; padding: 0 20px}
	
	.title-box .title{text-align:left;font-size:24px;}
	.banner-area .controller .control-arw {width: 28px; height: 28px; background-size: 6px}
	.banner-area .controller .number {font-size: 14px; height: 28px; padding: 0 12px}
}

@media screen and (max-width: 640px) {
	/******************************
		VISUAL	VISUAL	VISUAL
	******************************/
	.main-visual::after {content: ''}
	.main-visual .inner {padding: 36px 20px 0}
	.main-visual .text p.text1 {font-size: 16px}
	.main-visual .text p.text2 {font-size: 32px}
	
}

@media screen and (max-width: 480px) {
	.main-visual {height: 340px}
	.main-visual .text p.text1 {line-height: 1.4}
	.main-visual .text p.text2 {line-height: 1.2}
	.main-visual .text p.text3 {font-weight: 100; margin: 16px 0 0}
	.main-visual .text .m-block {display: block}
	.main-visual .quick-area {width: calc(100% - 40px); display: flex; justify-content: space-between; left: 50%; transform: translateX(-50%)}
	.main-visual .quick-area a.quick-link {width: calc(50% - 2px); height: 48px; font-size: 16px; color: #fff; background-color: var(--purple)}
	.main-visual .quick-area a.quick-link.link1 {padding: 0 24px 0 66px}
	.main-visual .quick-area a.quick-link.link2 {padding: 0 24px 0 60px}
	.main-visual .quick-area a.quick-link::before {left: 20px}
	.main-visual .quick-area a.quick-link.link1::before {width: 36px; background: url('/img/lms/main/icon-visual-menu1-on.svg') center no-repeat}
	.main-visual .quick-area a.quick-link.link2::before {width: 28px; background: url('/img/lms/main/icon-visual-menu2-on.svg') center no-repeat}
}