@charset "utf-8";

#m_conts .inner.pos-rel {position:relative;}
#m_conts .inner:after {content:""; display:block; clear:both;}


/****************************************************************
	Visual Area
****************************************************************/

.visualWrap {display:block; position:relative; padding:6rem 2rem; background:url('../img/main/bak_visual.png') no-repeat 50% 50% #bcddff; background-size:cover;}

.mainVisual {display:block; position:relative; width:82rem; height:40rem; border-radius:2rem; float:left; z-index:0; overflow:hidden;
	-webkit-box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
	-moz-box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
	box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
}
.mainVisual .control {position:absolute; right:0; bottom:0; z-index:2; border-radius:2rem 0 0 0; background:rgba(0,0,0,.6); }
.mainVisual .control button {display:block; position:relative; float:left; width:5rem; height:5rem; overflow:hidden; text-indent:-999px;}
.mainVisual .control button:before {content:""; display:block; position:absolute; width:2rem; height:2rem; top:50%; left:50%; margin:-1rem 0 0 -1rem; background:url('../img/main/spr_main.png') no-repeat .4rem 0; background-size:32rem auto;}
.mainVisual .control button + button {border-left:1px solid rgba(255,255,255,.1);}
.mainVisual .control button.prev:before {opacity:.4;}
.mainVisual .control button.next:before {background-position:-9.7rem 0; opacity:.4;}
.mainVisual .control button.prev:hover:before,
.mainVisual .control button.next:hover:before {opacity:1;}
.mainVisual .control button.play {display:none;}
.mainVisual .control button.play:before {background-position:-14.5rem 0;}
.mainVisual .control button.stop:before {background-position:-4.7rem 0;}

.mainVisual .slider,
.mainVisual .swiper-container,
.mainVisual .swiper-wrapper,
.mainVisual .swiper-slide {height:100%;}
.mainVisual .slider .swiper-slide {background:url(/common/img/board/sample_noimage.jpg) no-repeat 50% 50% #edf1fa;}
.mainVisual .slider .swiper-slide img[src*="no_image"] {opacity:0;}

.mainQuickmenu {position:absolute; top:0; left:86rem; bottom:0; right:0; background:#1f3f9c; border-radius:2rem; text-align:center;  font-size:1.6rem; padding-top:3.5rem;
	-webkit-box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
	-moz-box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
	box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
}
.mainQuickmenu .tit {position:relative; max-width:39rem; text-align:center; margin:0 auto 1.7rem; color:#fff;}
.mainQuickmenu .tit:before {content:""; display:block; position:absolute; top:1.6875em; left:0; right:0; height:2px; background:rgba(255,255,255,.2); z-index:0;}
.mainQuickmenu .tit p {display:inline-block; position:relative; z-index:1; background:#1f3f9c; padding:0 1.25em; font-family:'Godo';}
.mainQuickmenu .tit strong {display:block; font-size:1.75em;}
.mainQuickmenu .tit strong em {color:#c8f36c;}
.mainQuickmenu .tit span {display:block; opacity:.6; margin-top:1rem;}
.mainQuickmenu ul {display:block; position:relative; max-width:45.5rem; margin:0 auto;}
.mainQuickmenu ul:after {content:""; display:block; clear:both;}
.mainQuickmenu ul li {display:block; position:relative; float:left; width:33.33%;}
.mainQuickmenu ul li a {display:block; position:relative; color:#fff;}
.mainQuickmenu ul li a img {display:block; position:relative; margin:0 auto; transition:.3s all; -webkit-transition:.3s all; max-width:5em;}
.mainQuickmenu ul li a span {display:block; font-size:1.125em; line-height:1.4; word-break:keep-all; font-weight:300; height:5.5rem;}
.mainQuickmenu ul li a:hover span {text-decoration:underline;}
.mainQuickmenu ul li a:hover img {transform:translateY(-10%); -webkit-transform:translateY(-10%);}


@media all and (max-width:1024px) {
	.mainVisual {float:none; margin:0 auto; max-width:100%; height:auto;}
	.mainVisual:before {content:""; display:block; position:relative; padding-top:48.78%; z-index:-999;}
	.mainVisual .slider {position:absolute; top:0; left:0; right:0; bottom:0;}
	.mainQuickmenu {position:relative; left:auto; margin:3rem auto 0; padding:3.5rem 0 1rem;}
	.mainQuickmenu .tit,
	.mainQuickmenu ul {max-width:100%;}
	.mainQuickmenu .tit {margin-left:3rem; margin-right:3rem;}
	.mainQuickmenu ul li {display:inline-block; vertical-align:top; width:auto; float:none; padding:0 1.5rem;}
}
@media all and (max-width:820px) {
	.mainQuickmenu {font-size:1.5rem;}
}
@media all and (max-width:770px) {
	.mainQuickmenu {font-size:1.4rem;}
}
@media all and (max-width:700px) {
	.mainQuickmenu {padding:3.5rem 2rem 0rem;}
	.mainQuickmenu ul {max-width:35rem;}
	.mainQuickmenu ul li {width:33.33%; float:left;}
}
@media all and (max-width:640px) {
	.visualWrap {padding:4rem 1rem;}

	.mainVisual {border-radius:0; overflow:visible; margin-bottom:7rem;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
	}
	.mainVisual .slider {border-radius:2rem; overflow:hidden;
		-webkit-box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
		-moz-box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
		box-shadow: 3rem 3rem 3rem 0px rgba(27,120,216,0.15);
	}
	.mainVisual .control {width:15rem; bottom:-1rem; transform:translate(-50%, 100%) scale(.8); -webkit-transform:translate(-50%, 100%) scale(.8); left:50%; border-radius:2rem;}
}
@media all and (max-width:440px) {
	.mainQuickmenu {font-size:1.2rem;}
	.mainQuickmenu {padding:3.5rem 1rem 0rem;}
	.mainQuickmenu ul li {padding:0;}
	.mainVisual .control {transform:translate(-50%, 100%) scale(.6); -webkit-transform:translate(-50%, 100%) scale(.6);}
}

/****************************************************************
	Education Area
****************************************************************/

.eduWrap {padding:6.5rem 2rem 6rem;}
.eduWrap .fix-scroll .swiper-wrapper li a:focus:before {display:none !important;}
.eduWrap .tit {display:block; position:relative; margin-bottom:3rem; font-family:'Godo'; font-size:1.8rem; color:#999999; padding-top:1rem;}
.eduWrap .tit strong {font-size:1.77em; font-weight:800; color:#000;}
.eduWrap .tit span {margin-left:1em;}
.eduWrap .control {display:block; position:absolute; top:0; right:0; padding-right:7rem;}
.eduWrap .control button {display:block; position:relative; float:left; width:5.5rem; height:5.5rem; overflow:hidden; text-indent:-999px; border:1px solid #d5dbe1; border-radius:.5rem;}
.eduWrap .control button:before {content:""; display:block; position:absolute; width:1.4rem; height:2.4rem; top:50%; left:50%; margin:-1.2rem 0 0 -.7rem; background:url('../img/main/spr_main.png') no-repeat -20.4rem 0; background-size:32rem auto;}
.eduWrap .control button + button {margin-left:.5rem;}
.eduWrap .control button.prev:before {opacity:.4;}
.eduWrap .control button.next:before {background-position:-25.7rem 0; opacity:.4;}
.eduWrap .control button.prev:hover:before,
.eduWrap .control button.next:hover:before {opacity:1;}
.eduWrap .more {display:block; position:absolute; top:0; right:0; width:5.5rem; height:5.5rem; overflow:hidden; text-indent:-999px; border-radius:.5rem; background:#495d81;}
.eduWrap .more:before {content:""; display:block; position:absolute; width:2.2rem; height:2.2rem; top:50%; left:50%; margin:-1.1rem 0 0 -1.1rem; background:url('../img/main/spr_main.png') no-repeat -29.8rem 0; background-size:32rem auto;}

.edu-item {display:block; position:relative; height:19.0625em; border-radius:1rem; border:1px solid #d5dbe1; padding:1.875em; font-size:1.6rem;}
.edu-item .top {display:block; position:relative; font-size:1em; line-height:2.22em; height:2.22em;}
.edu-item .top > * {display:inline-block; position:relative; vertical-align:middle;}
.edu-item .top .state {border-radius:.5rem; min-width:4.5em; text-align:center; color:#fff; background:#40444f; margin-right:.88em; padding:0 .88em;}
.edu-item .top .cate {padding:0 .2em; color:#40444f;}
.edu-item .top .cate:after {content:""; display:block; position:absolute; left:0; bottom:0; right:0; height:1px; background:#40444f;}

.edu-item .top .state[data-type="모집중"],
.edu-item .top .state[data-type="모집중"] ~ .cate:after {background:#ff3262;}
.edu-item .top .state[data-type="모집중"] ~ .cate {color:#ff3262;}
.edu-item .top .state[data-type="추가모집"],
.edu-item .top .state[data-type="추가모집"] ~ .cate:after {background:#6e36bf;}
.edu-item .top .state[data-type="추가모집"] ~ .cate {color:#6e36bf;}
.edu-item .top .state[data-type="교육 중"],
.edu-item .top .state[data-type="교육 중"] ~ .cate:after {background:#3e45d0;}
.edu-item .top .state[data-type="교육 중"] ~ .cate {color:#3e45d0;}
.edu-item .top .state[data-type="교육마감"],
.edu-item .top .state[data-type="교육마감"] ~ .cate:after {background:#2662a0;}
.edu-item .top .state[data-type="교육마감"] ~ .cate {color:#2662a0;}
.edu-item .top .state[data-type="폐강"],
.edu-item .top .state[data-type="폐강"] ~ .cate:after {background:#777777;}
.edu-item .top .state[data-type="폐강"] ~ .cate {color:#777777;}

.edu-item .top .state[data-type="접수전"],
.edu-item .top .state[data-type="접수전"] ~ .cate:after {background:#3091e2;}
.edu-item .top .state[data-type="접수전"] ~ .cate {color:#3091e2;}
.edu-item .top .state[data-type="접수 대기"],
.edu-item .top .state[data-type="접수 대기"] ~ .cate:after {background:#0095b0;}
.edu-item .top .state[data-type="접수 대기"] ~ .cate {color:#0095b0;}
.edu-item .top .state[data-type="접수 중"],
.edu-item .top .state[data-type="접수 중"] ~ .cate:after {background:#ff5033;}
.edu-item .top .state[data-type="접수 중"] ~ .cate {color:#ff5033;}
.edu-item .top .state[data-type="대기자 접수 중"],
.edu-item .top .state[data-type="대기자 접수 중"] ~ .cate:after {background:#ff7800;}
.edu-item .top .state[data-type="대기자 접수 중"] ~ .cate {color:#ff7800;}
.edu-item .top .state[data-type="추가 접수"],
.edu-item .top .state[data-type="추가 접수"] ~ .cate:after {background:#3a65eb;}
.edu-item .top .state[data-type="추가 접수"] ~ .cate {color:#3a65eb;}
.edu-item .top .state[data-type="접수 마감"],
.edu-item .top .state[data-type="접수 마감"] ~ .cate:after {background:#2f318f;}
.edu-item .top .state[data-type="접수 마감"] ~ .cate {color:#2f318f;}

.edu-item .subj {display:block; position:relative; font-size:1.625em; padding:1em 0;}
.edu-item .subj a {display:block; position:relative; line-height:1.3; font-weight:400; color:#000000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.edu-item .subj a:hover {text-decoration:underline;}
.edu-item .info {display:table; width:100%; table-layout:fixed;}
.edu-item .info dl {display:table-row;}
.edu-item .info dl > * {display:table-cell; vertical-align:middle; padding:0.4em 0;}
.edu-item .info dl dt {width:5.4em; color:#000;}
.edu-item .info dl dt:before {content:""; display:inline-block; position:relative; width:.5rem; height:.5rem; background:#d5dbe1; border-radius:100%; vertical-align:middle; margin-right:1rem}
.edu-item .info dl dd {color:#666666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

@media all and (max-width:1024px) {
	.eduWrap {padding:4rem 2rem;}
	.eduWrap .tit {font-size:1.6rem;}
	.edu-item {font-size:1.4rem;}
	.eduWrap .more,
	.eduWrap .control {top:1rem;}
	.eduWrap .more,
	.eduWrap .control button {width:5rem; height:5rem;}
	.eduWrap .control {padding-right:6rem;}
}
@media all and (max-width:750px) {
	.eduWrap .tit span {display:block; margin:.8rem 0 0;}
}
@media all and (max-width:640px) {
	.eduWrap {padding:4rem 1rem;}
}
@media all and (max-width:470px) {
	.eduWrap .tit {font-size:1.5rem;}
	.eduWrap .more,
	.eduWrap .control {top:1rem;}
	.eduWrap .more,
	.eduWrap .control button {width:4rem; height:4rem;}
	.eduWrap .control {padding-right:5rem;}

	.eduWrap .control button:before,
	.eduWrap .more:before {transform:scale(.8); -webkit-transform:scale(.8);}
}
@media all and (max-width:410px) {
	.eduWrap .control {display:none;}
}
@media all and (max-width:380px) {
	.edu-item {padding:1.5em;}
}


/****************************************************************
	Board Area
****************************************************************/

.boardWrap {padding:0 2rem 7rem;}

.mainBoard {display:block; position:relative; margin-right:37rem;}
.mainBoard:after {content:""; display:block; clear:both;}

.board-item {display:block; position:relative; width:48.54%; float:left; min-height:20rem;}
.board-item + .board-item {float:right;}
.board-item + .board-item .tit {background:#0ba5b7;}

.board-item .tit {display:block; border-radius:.5rem; padding-left:2.5rem; height:6rem; line-height:6rem; color:#fff; font-size:2rem; font-weight:600; background:#1a7fd4; margin-bottom:1.8rem;}
.board-item .more {display:block; position:absolute; top:0; right:0; width:6rem; height:6rem; overflow:hidden; text-indent:-999px;}
.board-item .more:before {content:""; display:block; position:absolute; width:2rem; height:2rem; top:50%; left:50%; margin:-1rem 0 0 -1rem; background:url('../img/main/spr_main.png') no-repeat -4.1rem -4rem; background-size:32rem auto;}
.board-item .list {font-size:1.6rem;}
.board-item .list li {position:relative; padding:1.1rem 0 1.1rem 3rem;}
.board-item .list li:before {content:""; display:block; position:absolute; top:50%; margin-top:-.45rem; left:1rem; width:.9rem; height:.9rem; background:url('../img/main/spr_main.png') no-repeat 0rem -7.9rem; background-size:32rem auto;}
.board-item .list a {display:block; position:relative; padding-right:15rem;}
.board-item .list a .subj {display:inline-block; position:relative; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; line-height:1.4;}
.board-item .list a.new .subj {padding-right:2.5rem;}
.board-item .list a .subj .new {display:block; position:absolute; top:.7em; right:0; width:1.8rem; height:1.8rem; margin-top:-.9rem; background:url('../img/main/spr_main.png') no-repeat -10.2rem -4.3rem; background-size:32rem auto; overflow:hidden; text-indent:-999px;}
.board-item .list a .date {display:block; position:absolute; right:0; color:#999999; padding:0 2rem; top:0;}

.mainBanner {display:block; position:absolute; top:0; right:0; bottom:0; width:34rem; border-radius:1rem; border:.5rem solid #e5edf4; overflow:hidden;}
.mainBanner a {display:block; position:relative; height:100%; box-sizing:border-box; padding-top:4rem; font-size:3rem; font-family:'Godo'; text-align:center;}
.mainBanner a:after {content:""; display:block; position:absolute; left:50%; margin-left:-13.3rem; top:15.5rem; width:26.6rem; height:18.1rem; background:url('../img/main/img_banner.png') no-repeat 50% 0; background-size:contain; transition:.3s all; -webkit-transition:.3s all; z-index:-1;}
.mainBanner a:hover:after {top:13.5rem;}
.mainBanner a strong {display:block; position:relative; z-index:1; color:#000; font-weight:600; margin-bottom:1.5rem;}
.mainBanner a strong em {display:block; color:#1f3f9c; padding-bottom:.3rem;}
.mainBanner a span {display:block; position:relative; width:6.66em; margin:0 auto; height:1.94em; line-height:1.94em; border-radius:9em; background:#0ba5b7; text-align:center; color:#fff; font-size:.6em;}

@media all and (max-width:1024px) {
	.mainBoard {margin-right:22rem;}
	.board-item {width:49%;}
	.board-item .tit {font-size:1.8rem; height:5rem; line-height:5rem;}
	.board-item .list {font-size:1.5rem;}
	.board-item .list li:before {transform:scale(.8); -webkit-transform:scale(.8);}
	.board-item .more {width:5rem; height:5rem;}

	.mainBanner {width:20rem;}
	.mainBanner a {font-size:2.5rem;}
	.mainBanner a:after {background-size:95% auto; width:auto; left:0; right:0; margin-left:0;}
	.board-item .list a {padding-right:12rem;}
}
@media all and (max-width:850px) {
	.board-item {float:none; width:auto;}
	.board-item + .board-item {float:none; margin-top:2rem;}
}
@media all and (max-width:850px) and (min-width:641px) {
	.mainBanner a {padding-top:8rem;}
	.mainBanner a:after {top:auto; bottom:-8rem;}
	.mainBanner a:hover:after {bottom:-6rem; top:auto;}
}
@media all and (max-width:640px) {
	.mainBoard {margin-right:0;}
	.mainBanner {position:relative; width:auto; margin-top:2rem;}
	.mainBanner a {padding:3rem 2rem; text-align:left; font-size:2.2rem;}
	.mainBanner a strong em {display:inline; padding:0;}
	.mainBanner a:after {width:16rem; top:1rem !important; bottom:1rem; right:1rem; left:auto; max-width:36%; height:auto; background-size:contain; background-position:50% 50%;}
	.mainBanner a span {margin:0;}
}
@media all and (max-width:420px) {
	.mainBanner a:after {max-width:50%; transform:translateX(20%); -webkit-transform:translateX(20%)}
	.mainBanner a strong em {display:block; padding-bottom:.5rem;}
}