/* 메인페이지 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700,900&display=swap&subset=korean');

body {font-family: 'Noto Sans KR', sans-serif;}
.bg h1 {text-align:center; font-family: 'Noto Sans KR', sans-serif;}
.bg h1 {font-size:28px; color:#444; margin-bottom:10px;}
.bg h2 {font-size:24px;}
.bg h3 {font-size:20px;}
.bg h4 {font-size:16px; color:#444; font-weight:400;}
.bg h5 {font-size:14px; color:#444; font-weight:400;}
.bg h6 {font-size:12px;}

@media all and (min-width: 768px) and (max-width: 1024px) {
	.section {width:98%;}
	.bg h1 {font-size:24px;}
}
@media only screen and (min-width: 480px) and (max-width:834px){
	.bg h1 {font-size:22px;}
}
@media only screen and (max-width : 480px){
	.section {width:95%;}
	.top_search {display:none;}
	.bg h1 {font-size:22px;}
}


/* 메인 */
.bg {padding:80px 0;}
.gray {background:#fafafa;}
.clear:after {content:''; display:block; clear:both;}
#main > .slide > .bx-wrapper {margin:0;}


#myCarousel .bx-wrapper .bx-pager {bottom:35px;}
#myCarousel .bx-wrapper .bx-pager.bx-default-pager a {width:12px; height:12px; border-radius:50%; background:#f6f6f6; margin:0 8px;}
#myCarousel .bx-wrapper .bx-pager.bx-default-pager a:hover,#myCarousel .bx-wrapper .bx-pager.bx-default-pager a.active,#myCarousel .bx-wrapper .bx-pager.bx-default-pager a:focus {background:#f6902c;}

#myCarousel2 {display:none;}
.bx-wrapper .bx-prev, .bx-wrapper .bx-prev:hover {background:url('/files/images/visual_left.png') no-repeat; left:2%;}
.bx-wrapper .bx-next, .bx-wrapper .bx-next:hover {background:url('/files/images/visual_right.png') no-repeat; right:2%;}
.bx-wrapper .bx-controls-direction a {height:60px; width:20px;}

/* 메인 - 최근강좌, 인기강좌 */
.course_1:after, .course_2:after {display:block; content:''; clear:both;}
.course_1 > li, .course_2 > li {float:left; width:49%; height:200px; display:block; position:relative; }
.course_1 > li:nth-child(even), .course_2 > li:nth-child(even) {margin-left:2%;}
.course_1 > li:nth-child(1), .course_1 > li:nth-child(2), .course_2 > li:nth-child(1), .course_2 > li:nth-child(2) {margin-bottom:20px;}

.course_3:after {display:block; content:''; clear:both;}
.course_3 > li {float:left; width:49%; height:200px; display:block; position:relative; }
.course_3 > li:nth-child(even) {margin-left:2%;}
.course_3 > li:nth-child(1), .course_3 > li:nth-child(2) {margin-bottom:20px;}

.contents_title {margin-bottom:40px;}
.contents_title h1 {font-size:36px; color:#000; letter-spacing:-0.25px; font-weight:600;}
.contents_title h1 span {color:#4246c2;}
.contents_title h2 {font-size:15px; color:#5f5f5f; font-weight:400; text-align:center;}
.subject-class > li {float:left; width:100%;}
.subject-class > li:last-child {margin-right:0;}
.subject-class .ns, .subject-class .bs{width:100%; height:200px;}
.subject-class li ul li {float:left; width:63%; position:relative; height:100%; background:#fff; transition:all 0.1s;}
.subject-class .left_image {width:37%; height:100%; overflow:hidden; position:relative;}
.subject-class .left_image .left_image_1 {height:0; padding-bottom:100%; overflow:hidden; position:relative;}
.subject-class .left_image .left_image_1 img {width:100%;}
.subject-class .tt {border:1px solid #f6f6f6; position:relative;}
.subject-class .left_text h4 {padding:30px 20px 0px; text-align:left; font-weight:600; color:#000000; font-size:20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap:break-word; line-height: 24px; height:90px;}
.subject-class .left_text h5 {padding:12px 20px 0;}
.subject-class .left_text h5 .time_icon {display:inline-block; width:12px; height:14px; background:url('/files/images/time_icon.png') no-repeat center; margin-right:5px; }

.subject-class .left_button {width:100%; padding:0 20px; height:35px; text-align:center; line-height:35px; margin-top:18px;}
.subject-class .left_button a {border:1px solid #f3f3f3; width:100%; display:block; color:#aaaaaa; font-size:14px;}



.course_1 > li:hover {background:#ffc200;}
.course_2 > li:hover {background:#61e7c2;}

.course_1 > li:hover .subject-class li ul li.left_text, .course_2 > li:hover .subject-class li ul li.left_text {background:#4d4bb6; transition:all 0.1s;}
.course_1 > li:hover .subject-class .left_button a, .course_2 > li:hover .subject-class .left_button a {background:#ffffff; color:#010101;}
.course_1 > li:hover .subject-class .left_text h4, .course_2 > li:hover .subject-class .left_text h4 {color:#fff;}
.course_1 > li:hover .subject-class .left_text h5, .course_2 > li:hover .subject-class .left_text h5 {color:#fff;}
.course_1 > li:hover .subject-class .left_text h5 .time_icon, .course_2 > li:hover .subject-class .left_text h5 .time_icon {background-image:url('/files/images/time_icon_w.png')}

.course_3 > li:hover {background:#ffc200;}
.course_3 > li:hover .subject-class li ul li.left_text {background:#4d4bb6; transition:all 0.1s;}
.course_3 > li:hover .subject-class .left_button a {background:#ffffff; color:#010101;}
.course_3 > li:hover .subject-class .left_text h4 {color:#fff;}
.course_3 > li:hover .subject-class .left_text h5 {color:#fff;}
.course_3 > li:hover .subject-class .left_text h5 .time_icon {background-image:url('/files/images/time_icon_w.png')}


/* 메인 - 그외 기타등등 */
.etc_three_box > li {float:left; position:relative; width:36%; margin-right:4%;} 
.etc_three_box > li:nth-child(2) {width:28%;}
.etc_three_box > li:nth-child(3) {width:28%; margin-right:0;}
.etc_three_box h3 {text-align:left; padding:20px 0; font-size:24px;}
.etc_notice li .btn_more {position:absolute; top:24px; right:0; background:none; color:#000; padding-right:0; font-size:14px; font-weight:400; }
.etc_notice li .btn_more:hover {color:#343793;}
.boxnotice .btext {position:relative; padding:10px 0;}
.boxnotice ul li:first-child {font-size:14px; color:#777777; font-weight:400;}
.boxnotice ul li:first-child a {display:inline-block; width:75%; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.boxnotice .date {position:absolute; right:0; color:#777777; font-size:12px; font-weight:500;}
.boxnotice ul li:first-child:hover a {color:#343793;}
.boxnotice ul li:first-child:hover .date {color:#343793;}
.boxnotice {border:1px solid #eee; padding:20px 30px;}

.etc_service ul li { height:128px; position:relative; background:#fe8b35;}
.etc_service ul li + li {margin-top:15px;}
.etc_service .etc_up li a {display:block; width:100%; height:100%; color:#000000; font-size:20px; font-weight:600; letter-spacing:-0.25px; padding-left:80px;  border:1px solid #f3f3f3;
padding-top:35px; position:absolute; top:0px; left:0px; transition:all 0.1s;}
.etc_service .etc_up li a .sub {color:#777777; font-size:14px; font-weight:400; letter-spacing:0;}

.etc_service .etc_up li.etc_color1 a {background:#fff url('/files/images/etc_service_icon_01.png') no-repeat 8% 50%;}
.etc_service .etc_up li.etc_color2 a {background:#fff url('/files/images/etc_service_icon_02.png') no-repeat 8% 50%;}


.etc_service .etc_up li:hover a {top:-8px; left:-8px; border:0; color:#fff; transition:all 0.1s;}
.etc_service .etc_up li:hover a .sub {color:#fff;}
.etc_service .etc_up li:hover a:after {content:""; width:11px; height:20px; display:inline-block; background:url('/files/images/etc_service_icon_arrow.png') no-repeat; position:absolute; right:15px; top:50%; margin-top:-10px;}
.etc_service .etc_up li.etc_color1:hover a {background:#4d4bb6 url('/files/images/etc_service_icon_01_p.png') no-repeat 8% 50%;;}
.etc_service .etc_up li.etc_color2:hover a {background:#4d4bb6 url('/files/images/etc_service_icon_02_p.png') no-repeat 8% 50%;;}

.etc_guide h4 {text-align:left; color:#777777; font-size:15px;}
.etc_guide span {font-size:20px; font-weight:600; color:#000000;}
.etc_guide p {font-size:15px; color:#777; line-height:32px; margin-top:5px;}
.etc_guide .guide_number {border:1px solid #f3f3f3; padding:43px 20px; margin-bottom:15px;}
.etc_guide .guide_e-mail {border:1px solid #f3f3f3; padding:20px}
.etc_guide .guide_e-mail h4 {color:#777777; font-size:17px; font-weight:400; }


.email_reject h1 {font-size:18px; color:#808080; font-weight:500; padding:15px 10px 20px; text-align:center; border-bottom:1px solid #eee;}
.email_reject h2 {font-size:16px; color:#666; font-weight:400; padding-top:20px;}
.sub-content.email {min-height:460px;}

.c-List-Type .appDate span {display:inline-block; margin-left:5px;}


/* 교육원소개 */
.sub-body {background: #fff; height: 100%;}


/* 통합검색 */
.search {width: 100%;max-width: 800px;margin: 50px auto;}
.tword-box {text-align: center; margin-bottom: 50px; position: relative;}
.serch-title {display: none;}
input.tword {display: inline-block; width: 100%; max-width: 474px;height: 45px;border: 2px solid #af0d23;background-color: #fff;}
input.btn-tword {position: relative; top: -2px; left: -5px;}
li.search-img {float:left;width:20%;}
li.search-content {float:left;width:80%;}


.joinForm_new button.btn_fileUpload {padding: 0; height: 35px; font-size: 12px;}
.btn_center {padding-top: 50px;}


/* 나의 학습강좌 */
.my-class .block-thumb {width: 150px;}


/* 설문리스트 */
.pollBody {width: 100%; display: inline-block;}
ul.pollCont {width: 32%; padding: 20px; border: 1px solid #ddd; float: left; margin-right: 2%; margin-bottom: 30px;}
ul.pollCont:nth-child(3n) {margin-right: 0;}
ul.pollCont h2 {height: 54px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap:break-word; margin-bottom: 20px;}
ul.pollCont li:last-child {padding-top: 20px; margin-top: 20px; border-top: 1px solid #ddd; text-align: center;}
ul.pollCont li button {width: 49%;}
button.pollpct {background: #ca2500;}
button.pollview {background: #ff9900;}
.pollOut {background: #f9f9f9;}
ul.pollOut li button {width: 100%;}

#lec-list .number {width: 65px;}
#lec-list .title {width: auto;}
#lec-list .time {width: 120px;}
#lec-list .page {width: 100px;}
#lec-list .data {width: 80px;}
#lec-list .view {width: 120px;}


@media all and (min-width:1100px) {
	.course_1 > li ul, .course_2 > li ul {position:absolute; top:0; left:0; width:100%; transition:all 0.1s;}
	.course_1 > li:hover ul, .course_2 > li:hover ul {position:absolute; top:-5px; left:-5px; width:100%; transition:all 0.1s;}

	.course_3 > li ul {position:absolute; top:0; left:0; width:100%; transition:all 0.1s;}
	.course_3 > li:hover ul {position:absolute; top:-5px; left:-5px; width:100%; transition:all 0.1s;}
}


@media all and (max-width:1024px) {
	.subject-class .left_button {margin:12px 0;}
	.subject-class .ns, .subject-class .bs {height:auto;}
	.subject-class .left_text h4 {padding:20px 20px 0px; height:71px;}
	.subject-class .left_text h5 {padding:0 20px 0;}
	.course_1 > li, .course_2 > li {height:auto;}
	.course_3 > li {height:auto;}

	
	.etc_three_box h3 {font-size:18px;}
	.etc_guide span {font-size:18px;}
	.etc_guide p {font-size:13px;}
	.etc_three_box > li {margin-right:2%; width:37%;}
	.etc_three_box > li:nth-child(2) {width:29%;}
	.etc_three_box > li:nth-child(3) {width:29%; margin-right:0;}	
	
}

@media all and (max-width:834px){
	.bg {padding:50px 0;}
	#myCarousel {display:none;}
	#myCarousel2 {display:block;}
	.bx-controls-direction {display:none;}

	.course_1 > li, .course_2 > li {width:23.5%; margin-left:2%; height:auto;}
	.course_1 > li:first-child, .course_2 > li:first-child {margin-left:0;}

	.course_3 > li {width:23.5%; margin-left:2%; height:auto;}
	.course_3 > li:first-child {margin-left:0;}

	.subject-class .left_image {width:100%;}
	.subject-class li ul li {width:100%;}
	.subject-class .ns, .subject-class .bs {height:auto;} 
	.subject-class .left_text h4 {padding:15px 10px 0; font-size:17px; line-height:22px; height:60px;}
	.subject-class .left_text h5 {padding:5px 10px 0;}
	.subject-class .left_button {padding:0 10px; margin:15px 0;}
	.course_1 > li:hover {background:#fff;}
	.course_2 > li:hover {background:#fafafa;}
	.course_3 > li:hover {background:#fff;}


	.etc_three_box > li {width:100%;} 
	.etc_three_box > li:nth-child(1) {margin-right:0; margin-bottom:2%;}
	.etc_three_box > li:nth-child(2) {width:48%;}
	.etc_three_box > li:nth-child(3) {width:48%;}

	.contents_title h1 {font-size:30px;}
	
	
	
}

@media all and (max-width:640px){
	.course_1 > li, .course_2 > li {width:48%;}
	.course_3 > li {width:48%;}

}



@media all and (max-width:480px){
	.etc_three_box > li {clear:both; width:100%; margin-right:0;} 
	.etc_three_box > li:nth-child(2) {width:100%;}
	.etc_three_box > li:nth-child(3) {width:100%;}
	.etc_service ul li {height:115px;}
	.etc_guide {margin-top:20px;}
	.etc_service .etc_up li a {padding-left:100px; padding-top:28px;}
	.etc_guide .guide_number {padding: 20px;}

	.contents_title h1 {font-size:20px; line-height:1.2}
	.contents_title h1 br {display:none;}
	.contents_title br {display:none;}

	.subject-class .left_text h4 {font-size:15px;}
	.boxnotice {padding:20px;}

	#lec-list table .number, #lec-list table .time {display:none;}
	#lec-list .movie_list table .page {display:none;}
	#lec-list .data {width:50px;}
	#lec-list .view {width:80px;}

	.sub-content.email {min-height:440px;}
	.email_reject h1 {font-size:16px;}
	.email_reject h2 {font-size:14px;}


}

/* 수료증출력 view*/
.customer_view:after {display:block; content:''; clear:both;}
.customer_view > li {float:left; width:49%; height:165px; display:block; position:relative; }
.customer_view > li:nth-child(even) {margin-left:2%;}
.customer_view > li:nth-child(1), .customer_view > li:nth-child(2) {margin-bottom:20px;}
.customer_view .box {width:100%; height:165px;}
.customer_view .leftText {width:100%; position:relative; height:100%; background:#fff; transition:all 0.1s; border:1px solid #f6f6f6; position:relative;}
.customer_view .leftText h4 {padding:21px 20px 0px; text-align:left; font-weight:600; color:#000000; font-size:20px;}
.customer_view .leftText h5 {padding:12px 20px 0; font-size:16px;}
.customer_view .left_button {width:100%; padding:0 20px; height:35px; text-align:center; line-height:35px; margin-top:18px;}
.customer_view .left_button a {border:1px solid #f3f3f3; width:100%; display:block; color:#aaaaaa; font-size:14px;}

.customer_view > li:hover {background:#ffc200;}
.customer_view > li:hover .left_button a {background:#ffffff; color:#010101;}
.customer_view > li:hover .leftText {background:#4d4bb6; transition:all 0.1s;}
.customer_view > li:hover .leftText h4 {color:#fff;}
.customer_view > li:hover .leftText h5 {color:#fff;}

@media all and (min-width:1100px) {
	.customer_view .subjectClass {position:absolute; top:0; left:0; width:100%; transition:all 0.1s;}
	.customer_view li:hover .subjectClass {position:absolute; top:-10px; left:-10px; width:100%; transition:all 0.1s;}
}
@media all and (max-width:480px) {
	.customer_view > li {width:100%; margin-right:0; margin-bottom:20px;}
	.customer_view > li:nth-child(even) {margin-left:0;}
	.customer_view > li:last-child {margin-bottom:0;}
}