@charset "utf-8";

/* webfont */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('https://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css');

* { 
	font-family: 'Fira Sans Condensed', 'nanumgothic', sans-serif; 
	/* -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; */
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
}
*:focus { outline: none; }
html { min-width: 1200px; }
body { 
	font-size: 15px;
	color: #424242;
	letter-spacing: -0.2px;
	cursor: default;
}
a { color: inherit; }


/* layout
------------------------------------------------------ */

/* -------- common -------- */
section { 
	position: relative;
	margin: 0 auto; 
	width: 1200px;
}

/* help class */
.fl { float: left; }
.fr { float: right; }
.clrfix { *zoom: 1; }
.clrfix:after { content: ""; display: block; clear: both; }
.ir { height: 0; line-height: 0; font-size: 0; overflow: hidden; text-indent: -10000px; }

/* content title */
h3 { 
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 0 10px;
	font-size: 19px;
	font-weight: bold;
	color: #424242;
	letter-spacing: -0.5px;
}

/* content box */
.box { 
	background-color: #fff;
	border-radius: 15px;
	box-sizing: border-box;
	overflow: hidden; 
}

/* 더보기 및 fa-angle-right */
.more { 
	display: flex;
	justify-content: center;
	width: 24px; height: 24px;
	font-size: 24px;
	font-weight: lighter;
}

/* bar */
.bar:before { 
	content: "|"; 
	display: inline-block;
	clear: both;
	margin: 0 10px;
	font-weight: lighter;
}


/* header
------------------------------------------------------ */
header { 
	height: 550px;
	color: #fff;
	background: #748aff url('/site/images/main/C/bg_header.png') no-repeat center top;
}
header section { 
	display: flex;
	justify-content: space-between;
}


/* -------- logo -------- */
h1 a { 
	display: flex;
	align-items: center;
	padding: 0 0 0 10px;
	height: 130px;
}
h1 a canvas { 
	width: auto;
	max-height: 40px;
}


/* -------- gnb -------- */
.gnb_c { 
	position: relative;
	margin: 20px 0 0 80px; 
	width: 200px;
}
.gnb_c li { 
	cursor: pointer;
}
.gnb_c li a { 
	display: flex;
	align-items: center;
	height: 90px;
	font-size: 20px;
	font-weight: bold;
	border-top: solid 1px #8cabff;
	letter-spacing: -1px;
	box-sizing: border-box;
	transition: .4s;
}
.gnb_c li:first-child a { 
	border-top: 0; 
}
.gnb_c li:before { 
	content: "";
	display: inline-block;
	clear: both;
	position: absolute; left: -80px;
	width: 80px; height: 90px;
	background-image: url('/site/images/main/C/icon_gnb.png');
	background-repeat: no-repeat;
	transition: .4s;
}
.gnb_c li:first-child:before { 
	background-position: 0 0;
}
.gnb_c li.off:first-child:before { 
	background-position: 0 -90px;
}
.gnb_c li:nth-child(2):before { 
	background-position: -80px 0;
}
.gnb_c li.off:nth-child(2):before { 
	background-position: -80px -90px;
}
.gnb_c li:nth-child(3):before { 
	background-position: -160px 0;
}
.gnb_c li.off:nth-child(3):before { 
	background-position: -160px -90px;
}
.gnb_c li:last-child:before { 
	background-position: -240px 0;
}
.gnb_c li.off:last-child:before { 
	background-position: -240px -90px;
}
.gnb_c li a { 
	color: #fff; 
}
.gnb_c li.off a { 
	color: #9bf; 
}


/* -------- login -------- */
.btn_login,
.btn_logout { 
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; right: 0;
	margin: 40px 0 30px;
	min-width: 120px; height: 50px;
	font-size: 14px;
	font-weight: bold;
	background: transparent;
	border: solid 2px rgba(255,255,255,0.61);
	border-radius: 30px;
	box-sizing: border-box;
	cursor: pointer;
	transition: .4s ease-in-out;
}
.btn_login:hover { 
	color: #424242;
	background: #fff;
	border-color: #fff;
}
/* logout */
.btn_logout { 
	padding: 0 30px;
	color: #c0cfff;
	background: #536dfe;
	border: 0;
	transition: none;
}
.btn_logout span { 
	font-weight: normal;
	letter-spacing: -0.5px;
}
.btn_logout span em { 
	font-weight: 500;
	color: #fff; 
}
.btn_logout span:after { 
	content: "·";
	display: inline-block;
	clear: both;
	margin: 0 10px;
}

/* login-form */
.login_form { 
	position: absolute; top: -300px; right: 0;
	padding: 30px 30px 24px;
	width: 240px; height: auto;
	background: #fff;
	border-radius: 15px;
	box-sizing: border-box;
	box-shadow: 3px 3px 18px rgba(0,0,0,0.3);
	transition: .3s;
	z-index: 61;
}
.login_form input { 
	margin: 0 0 5px;
	padding: 0 12px;
	width: 100%; height: 40px;
	background: #f9f9f9;
	border: solid 1px #e5e5e5; 
	border-radius: 4px;
	box-sizing: border-box;
}
.login_form button { 
	margin: 5px 0 0;
	width: 100%;
	line-height: 44px;
	font-weight: bold;
	color: #fff;
	background: #424224;
	border: 0;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
}
.login_form div { 
	margin: 12px 0 0;
	text-align: center;
}
.login_form div>a { 
	font-size: 15px;
}
.login_form div>a i { 
	margin-right: 6px; 
}
.login_form div .btn_join { 
	font-weight: bold;
	color: #424242;
}
.login_form div .btn_find { 
	margin-left: 15px;
	color: #9e9e9e; 
}

/* login-form act */
.login_form.act { 
	top: 100px; 
}


/* -------- main banner -------- */
.main_b { 
	position: absolute; top: 90px; right: 0;
	padding: 30px 0 0;
	width: 920px; height: 460px;
	overflow: hidden;
}
.main_b ul:after { 
	content: "";
	display: block;
	clear: both;
}

/* bxslider */
.main_b .bx-viewport { 
	border-radius: 15px !important;
	overflow: hidden;
}

/* bxslider: pager */
.main_b .bx-wrapper .bx-pager { 
	left: 80px; bottom: 480px;
	padding-top: 0;
	text-align: left;
}
.main_b .bx-wrapper .bx-pager.bx-default-pager a { 
	margin: 0 8px 0 0;
	width: 8px; height: 8px; 
	background: #5a6fe6;
	border: 0;
}
.main_b .bx-wrapper .bx-pager.bx-default-pager a:hover, 
.main_b .bx-wrapper .bx-pager.bx-default-pager a.active, 
.main_b .bx-wrapper .bx-pager.bx-default-pager a:focus { 
	background: #fff; 
}


/* main
------------------------------------------------------ */
main { 
	display: block;
	padding: 90px 0;
	background: #f2f3f5; 
}
main section:nth-of-type(2) { 
	margin-top: 70px; 
}

/* -------- 교육과정 -------- */
.lecture { 
	float: left; 
}
.lecture h3 { 
	margin: 0 0 24px;
	background: url('/site/images/main/C/lec_title_bar.png') no-repeat right center; 
}
.lecture h4 { 
	width: 96%;
	font-size: 21px; 
	font-weight: bold;
	letter-spacing: -0.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	overflow: hidden;
}

/* lecture list */
.lecture .lec-list { 
	width: 895px;
}
.lecture ul:after { 
	content: "";
	display: block;
	clear: both;
}
.lecture li { 
	position: relative;
	width: 285px; height: 360px;
	border-radius: 15px; 
	overflow: hidden;
}
.lecture li .cover { 
	position: absolute; left: 0; top: 0; right: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.4);
}
.lecture .lec-title { 
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 360px;
	color: #fff;
	text-align: center;
	transition: .4s;
}
.lecture li:hover:not(.no-img) .lec-title { 
	bottom: -30px;
	opacity: 0;
}
.lecture .lec-title h4 { 
	width: 75%; 
	text-align: center;
}
.lecture .lec-title span { 
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; left: 50%; bottom: 30px;
	margin-left: -25px;
	width: 50px; height: 50px;
	font-size: 20px;
	color: #424242;
	background: #fff;
	border-radius: 30px;
}
.lecture .lec-title span i { 
	position: relative; top: 1px; 
}

/* detail */
.lecture .lec-detail { 
	position: absolute; left: 0; right: 0; bottom: -160px;
	padding: 22px 25px;
	height: auto;
	background: #fff;
	box-sizing: border-box;
	transition: .5s;
	z-index: 6;
}
.lecture li:hover .lec-detail { 
	bottom: 0;
}
.lecture .lec-detail h4 { 
	margin: 0 auto; 
}
.lecture .lec-detail p { 
	margin: 5px auto 0;
	width: 95.6%; height: 35px;
	line-height: 1.6;
	font-size: 13.4px;
	color: #9e9e9e; 
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	overflow: hidden;
}
.lecture .lec-detail a { 
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	background: #c5c6ce;
	border-radius: 6px;
	opacity: 0.5;
	transition: .2s;
}
.lecture .lec-detail a:hover { 
	opacity: 0.8;
}

/* no-img */
.lecture li.no-img a { 
	display: block; 
}
.lecture li.no-img .lec-tit { 
	position: absolute; left: 0; top: 0;
}

/* bxslider: controls */
/* .lecture .bx-wrapper { 
	margin: 0 !important; 
}
.lecture .bx-wrapper .bx-controls-direction { 
	position: relative; bottom: 360px;
	width: 895px; 
}
.lecture .bx-wrapper .bx-controls-direction a { 
	top: -44px;
	margin-top: 0;
	width: 24px; height: 24px;
	line-height: 24px;
	font-size: 12px;
	font-weight: lighter;
	color: #c5c6ce;
	background: #fff;
	border-radius: 20px;
	text-indent: 0;
	text-align: center;
	transition: .5s;
}
.lecture .bx-wrapper .bx-prev { 
	right: 30px;
	background: none; 
}
.lecture .bx-wrapper .bx-next { 
	right: 0;
	background: none; 
}
.lecture .bx-wrapper .bx-prev:hover, 
.lecture .bx-wrapper .bx-prev:focus,
.lecture .bx-wrapper .bx-next:hover, 
.lecture .bx-wrapper .bx-next:focus { 
	color: #fff;
	background: #748aff;
} */
.lecture .bx-wrapper { 
	margin: 0 !important; 
}
.lecture .bx-wrapper .bx-controls-direction { 
	position: static;
	width: 895px; 
	text-align: right;
}
.lecture .bx-wrapper .bx-controls-direction a { 
	top: -48px;
	margin-top: 0;
	width: 24px; height: 24px;
	line-height: 24px;
	font-size: 12px;
	font-weight: lighter;
	color: #c5c6ce;
	background: #fff;
	border-radius: 20px;
	text-indent: 0;
	text-align: center;
	transition: .5s;
}
.lecture .bx-wrapper .bx-prev { 
	right: 30px;
	background: none; 
}
.lecture .bx-wrapper .bx-next { 
	right: 0;
	background: none; 
}
.lecture .bx-wrapper .bx-prev:hover, 
.lecture .bx-wrapper .bx-prev:focus,
.lecture .bx-wrapper .bx-next:hover, 
.lecture .bx-wrapper .bx-next:focus { 
	color: #fff;
	background: #748aff;
}


/* -------- 사이드메뉴 -------- */
aside { 
	float: right; 
	margin-top: -15px;
	width: 285px;
}

/* 수강신청 */
aside div { 
	position: relative;
	height: 262px;
	background: url('/site/images/main/C/btn_apply.png') no-repeat center center; 
}
aside div a {  
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; left: 50%; bottom: 30px;
	margin-left: -100px;
	width: 200px; height: 50px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	border: solid 2px #fff;
	letter-spacing: -1px;
	border-radius: 30px;
	box-sizing: border-box;
	transition: .4s;
}
aside div a:hover { 
	color: #424242;
	background: #fff;
}

/* 메뉴버튼 */
aside li { 
	margin: 10px 0 0;
}
aside li a { 
	display: flex;
	align-items: center;
	padding: 0 25px 0 60px;
	height: 70px;
	font-size: 16px;
	color: #9e9e9e;
	background-repeat: no-repeat;
	background-position: 25px center;
	letter-spacing: -0.5px;
}
aside li:first-child a { 
	background-image: url('/site/images/main/C/icon_study.png'); 
}
aside li:last-child a { 
	background-image: url('/site/images/main/C/icon_faq.png'); 
}
aside li a span { 
	margin: 0 12px 0 9px;
	font-size: 24px;
	font-weight: lighter;
	color: #b5b5b5;
}
aside li a em { 
	font-weight: bold;
	color: #424242;
}


/* -------- 마이페이지 -------- */
.mycam { 
	float: right; 
	width: 285px; height: 250px;
	color: #d9eeff;
	background: #91c5ff url('/site/images/main/C/bg_mycam.png') no-repeat center top;
}
.mycam .calli { 
	position: absolute; left: -55px; bottom: -90px;
	width: 360px; height: 380px;
	background: url('/site/images/main/C/img_cheer.png') no-repeat left top; 
}
.mycam a { 
	display: block; 
	padding: 27px 30px;
	width: 100%; height: 100%;
	box-sizing: border-box;
}
.mycam h3 { 
	position: relative;
	margin: 0 0 20px 25px;
	color: #fff; 
}
.mycam h3+p { 
	line-height: 1.8;
	font-size: 14px;
}


/* -------- 공지사항 -------- */
.notice { 
	float: right; 
	padding: 30px 25px;
	margin-left: 20px;
	width: 590px; height: 250px;
}
.notice h3 { 
	margin: 0 0 16px;
	padding-left: 30px;
}
.notice h3 span { 
	position: relative; 
}
.notice h3 span::before { 
	content: "";
	display: inline-block;
	clear: both;position: absolute; left: -27px; top: -1px;
	margin: 0 10px 0 0;
	width: 17px; height: 24px;
	background: url('/site/images/main/C/icon_notice.png') no-repeat 0 center;
}
.notice h3 .more { 
	color: #b5b5b5; 
}

/* 최근게시물 */
.notice li { 
	padding: 8px 0;
	line-height: 24px;
	border-top: solid 1px #ddd; 
}
.notice li:first-child { 
	border-top: 0; 
}
.notice li a { 
	float: left;
	display: inline-block;
	width: 84%;
	font-size: 14.5px;
	color: #757575;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	overflow: hidden;
}
.notice li a:before { 
	content: "";
	display: inline-block;
	clear: both;
	position: relative; top: -4px;
	margin: 0 10px 0 5px;
	width: 3px; height: 3px;
	background: #424242;
	border-radius: 5px;
}
.notice li:after { 
	content: "";
	display: block;
	clear: both;
}
.notice li span { 
	float: right; 
	padding-right: 4px;
	font-size: 0.8em;
	color: #b5b5b5;
	letter-spacing: 0;
}

/* 게시글 없음 */
.no-item { 
	color: #9e9e9e; 
	text-indent: 31px;
}


/* footer
------------------------------------------------------ */
footer { 
}

/* -------- 교육상담문의 -------- */
.contact { 
	color: #fff;
	background: #748aff;
	background: linear-gradient(90deg, #748aff, #b1a0ff);
	overflow: hidden;
}
.contact section { 
	display: flex; 
	justify-content: space-between;
	align-items: center;
	height: 130px;
}
.contact section div { 
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.contact h3 { 
	color: #fff; 
}
.contact .bar:before { 
	margin: 0 15px;
	color: #fff; 
}

/* 상담전화 */
.contact .tel { 
	margin: 0 50px 0 35px;
	font-size: 40px;
	font-weight: bold;
	/* letter-spacing: -1px; */
}
.contact .tel+p { 
	font-size: 17.5px; 
}

/* 2021-04-21 추가 : 문의번호 2개일 경우 */
.contact .tel.tel_twice { 
	margin: 0 20px 0 30px;
	font-size: 32.5px;
}
.contact .tel.tel_twice span { 
	margin: 0 5px; 
	font-size: 0.7em;
	font-weight: 200;
}
.contact .tel.tel_twice+p { 
	font-size: 17px;
	letter-spacing: -0.7px;
}
.contact .tel.tel_twice+p .bar:before { 
	margin: 0 7px; 
}

/* 상담문의 */
.contact a { 
	display: flex; 
	justify-content: center;
	align-items: center;
	position: relative; top: 0;
	margin: 0 0 0 20px;
	padding: 35px 0 0;
	width: 90px; height: 90px;
	font-size: 14.5px;
	font-weight: bold;
	color: #424242;
	background-color: #fff;
	background-repeat: no-repeat;
	border-radius: 50px;
	box-sizing: border-box;
	transition: .3s;
}
.contact a:hover { 
	position: relative; top: -5px;
}
.contact .btn_qna { 
	background-image: url('/site/images/main/C/icon_qna.png'); 
	background-position: center 20px;
}
.contact .btn_faq { 
	background-image: url('/site/images/main/C/icon_faq.png'); 
	background-position: center 22px;
}

/* 하단메뉴 */
.fnb { 
	line-height: 70px;
	border-bottom: solid 1px #e5e5e5;
	text-align: center;
}
.fnb a { 
	margin: 0 0 0 30px;
	font-size: 14.5px;
	color: #757575; 
}
.fnb a:first-child { 
	margin-left: 0;
	font-weight: 500; 
	color: #424242;
}

/* -------- 카피라이트 -------- */
footer address { 
	padding: 35px 0 70px;
	line-height: 1.6;
	font-size: 13px;
	color: #9e9e9e;
	text-align: center;
}
footer address em { 
	padding: 2px 7px 2px;
	font-weight: 600;
	color: #fff;
	background: #b5b5b5;
	border-radius: 4px;
}
footer address .bar:before { 
	color: #b5b5b5;
}