@charset "utf-8";
/* 메인 롤링 이미지 */
#mainSlider {position:relative; overflow:hidden}
#mainSlider ul.imgList {position:relative; width:1400%}
#mainSlider ul.imgList li {position:relative; float:left; width:1903px; height:830px; background-size:cover !important; overflow:hidden; background-position:100% 100% !important}
#mainSlider ul.imgList li.item1 {background:url(../img/main_visual3.jpg) center top no-repeat}
#mainSlider ul.imgList li.item2 {background:url(../img/main_visual1.jpg) center top no-repeat}
#mainSlider ul.imgList li.item3 {background:url(../img/main_visual2.jpg) center top no-repeat}
#mainSlider ul.imgList li.item4 {background:url(../img/main_visual4.jpg) center top no-repeat}
#mainSlider ul.imgList li.item5 {background:url(../img/main_visual5.jpg) center top no-repeat}
#mainSlider ul.imgList li.item6 {background:url(../img/main_visual6.jpg) center top no-repeat}
#mainSlider ul.imgList li.item7 {background:url(../img/main_visual7.jpg) center top no-repeat}
#mainSlider ul.imgList li.item8 {background:url(../img/main_visual8.jpg) center top no-repeat}
#mainSlider ul.imgList li.item9 {background:url(../img/main_visual9.jpg) center top no-repeat}
#mainSlider ul.imgList li.item10 {background:url(../img/main_visual10.jpg) center top no-repeat}
#mainSlider ul.imgList li.item11 {background:url(../img/main_visual11.jpg) center top no-repeat}
#mainSlider ul.imgList li.item12 {background:url(../img/main_visual12.jpg) center top no-repeat}
#mainSlider ul.imgList li.item13 {background:url(../img/main_visual13.jpg) center top no-repeat}
#mainSlider ul.imgList li.item14 {background:url(../img/main_visual14.jpg) center top no-repeat}



#mainSlider ul.imgList li a {display:block; position:relative; height:100%}
#mainSlider ul.imgList li img {display:block; position:absolute; top:0; left:0; width:100%; height:100%}
#mainSlider ul.imgList li .caption {position:relative; top:50%; max-width:1400px; margin:0 auto; padding:0 50px; z-index:20; margin-top:-90px}
#mainSlider ul.imgList li .caption.center {text-align:center}
#mainSlider ul.imgList li .caption h2 {font-size:50px; font-weight:400; color:#fff; line-height:1.2}
#mainSlider ul.imgList li .caption h2:after {content:''; display:block; width:28%; border-bottom:2px solid #fff; margin:0 auto}
#mainSlider ul.imgList li .caption h3 {font-size:20px; font-weight:500; color:#fff; line-height:1.8; margin:10px 0}
#mainSlider ol.indicator {position:absolute; bottom:100px; left:0; width:100%; text-align:center; z-index:30}
#mainSlider ol.indicator li {position:relative; display:inline-block; line-height:1; margin:0 5px; padding:10px 0; cursor:pointer}
#mainSlider ol.indicator li .dash {position:relative; width:50px; height:2px; background:rgba(255,255,255,.4)}
#mainSlider ol.indicator li .dash .bar {position:absolute; top:0; left:0; width:0; height:100%; background:#fff}
/*메인 섹션1*/
.section1 {padding-top:80px; background:#fbfbfb url(../img/section1_bg.png)center top no-repeat; background-size:cover}
.section1 .inner {position:relative}
.section1 .inner:after {clear:both; content:''; display:block}
.section1 .inner .section1_content {margin:0 -10px}
.section1 .inner .section1_content > div {padding:100px 10px; overflow:hidden}
.section1 .inner .section1_content > div ul {position:relative; overflow:hidden; width:1000%; height:549px}
.section1 .inner .section1_content > div ul:after {clear:both; content:''; display:block}
.section1 .inner .section1_content > div ul li {float:left; transition:all 0.3s ease}
.section1 .inner .slide_img {position:relative; float:left; width:40%}
.section1 .inner .slide_img img {width:100%; transition:all 0.3s ease; -webket-animation-duration:1.5s}
.page_button {position:absolute; top:0; left:0}
.section1 .inner .box {width:20%; float:left}
.section1 .inner .box a {display:block;  box-shadow:3px 4px 10px rgba(0,0,0,0.2)}
.section1 .inner .box a .img_area {display:block; overflow:hidden}
.section1 .inner .box a .img_area img {width:100%; display:block; transition:all 0.6s ease}
.section1 .inner .box a:hover .img_area img {transform:scale(1.1)}
.section1 .inner .box a .desc {background:#fff; text-align:center; padding:20px 0; transition:all 0.3s ease}
.section1 .inner .box a .desc h4 {font-size:17px; font-weight:700; color:#cccccc; padding:30px 0 10px}
.section1 .inner .box a .desc h5 {font-size:22px; font-weight:700; letter-spacing:-1px; color:#000000; padding:0 0 30px}
.section1 .inner .box a .desc .btn_area {}
.section1 .inner .box a .desc .btn_area > span {background:url(../img/border-img.png) center top; position:relative; display:inline-block; padding:10px 60px; transition:all 0.3s ease}
.section1 .inner .box a:hover .desc .btn_area > span {background:url(../img/border-img2.png) center top}
.section1 .inner .box a .desc .btn_area > span:before {position:absolute; content:''; display:block; top:4px; left:4px; bottom:4px; right:4px; background:#fff; z-index:5; transition:all 0.3s ease}
.section1 .inner .box a:hover .desc .btn_area > span:before {background:#21bbb1}
.section1 .inner .box a .desc .btn_area span span {font-weight:700; position:relative; z-index:20; transition:all 0.3 ease}
.section1 .inner .box a:hover .desc .btn_area span span {color:#fff}
.section1 .inner .box a:hover .desc {background:#21bbb1}
.section1 .inner .box a:hover .desc h4 {color:#fff}
.section1 .inner .box a:hover .desc h5 {color:#fff}
/*메인 섹션2*/
.section2 {}
.section2 .postSlider {}
.section2 .postSlider .innerWrap {position:relative; background:#fff}
.section2 .postSlider .innerWrap:after {clear:both; content:''; display:block}
.section2 .postSlider .innerWrap .imgWrap {float:right; width:50%; overflow:hidden}
.section2 .postSlider .innerWrap .imgWrap ul {position:relative}
.section2 .postSlider .innerWrap .imgWrap ul:after {clear:both; content:''; display:block}
.section2 .postSlider .innerWrap .imgWrap ul li {float:left}
.section2 .postSlider .innerWrap .imgWrap ul li a {}
.section2 .postSlider .innerWrap .imgWrap ul li a img {display:block; width:100%}
.section2 .postSlider .innerWrap .imgWrap a.control {position:absolute; top:50%; display:block; width:80px; height:80px; line-height:80px; text-align:center; margin-top:-40px; background:#333; transition:all 0.3s ease; color:#fff; z-index:20}
.section2 .postSlider .innerWrap .imgWrap a.control:hover {background:#fff; color:#333; box-shadow:1px 1px 3px rgba(0,0,0,0.25);}
.section2 .postSlider .innerWrap .imgWrap a.control i {font-size:48px; line-height:80px}
.section2 .postSlider .innerWrap .imgWrap a.control.prev {left:0; padding-right:10px}
.section2 .postSlider .innerWrap .imgWrap a.control.next {right:0; padding-left:10px}
.section2 .postSlider .innerWrap .txtWrap {float:left; width:50%; padding:200px 0; text-align:center; overflow: hidden}
.section2 .postSlider .innerWrap .txtWrap ul {position:relative}
.section2 .postSlider .innerWrap .txtWrap ul:after {clear:both; content:''; display:block}
.section2 .postSlider .innerWrap .txtWrap > ul > li {float:left}
.section2 .postSlider .innerWrap .txtWrap ul li h2.tit.left {font-weight:700; letter-spacing:2px}
.section2 .postSlider .innerWrap .txtWrap ul li h2.tit.left a {font-size:50px; border-bottom:2px solid #000;}
.section2 .postSlider .innerWrap .txtWrap ul li h3 {font-size:20px; font-weight:500; color:#555555; padding:10px 0 50px}
.section2 .postSlider .innerWrap .txtWrap ul li p {font-size:17px; font-weight:600; line-height:1.55; color:#555555; padding:0 0 60px}
.section2 .postSlider .innerWrap .txtWrap .box_info {}
.section2 .postSlider .innerWrap .txtWrap .box_info ul {position:relative; z-index:10}
.section2 .postSlider .innerWrap .txtWrap .box_info ul li {position:relative; display:inline-block; width:115px; height:115px; line-height:115px; border:5px solid #e2e2e2; margin:0 5px}
.section2 .postSlider .innerWrap .txtWrap .box_info ul li span:before {content:''; display:block; background:url(../img/bullet.png) center top no-repeat; position:absolute; top:50%; margin-top:-20px; left:45%; width:10px; height:10px}
/* section3 최근 공지사항 추출 */
.section3 {background:#f5f5f5; padding-bottom:100px}
.section3 .inner {text-align:center}
.section3 .inner h2 {padding-top:150px}
.section3 .inner h2 a {font-size:50px; border-bottom:2px solid #000; letter-spacing:10px}
.section3 .inner h3 {font-size:17px; font-weight:500; color:#555555; padding:20px 0 50px}
.section3 {background:#f0f0f0}
.section3 .postList {width:101.53%; margin:50px 0 50px -0.7575%}
.section3 .postList > li {position:relative; float:left; width:48.48%; margin:0 0.7575% 20px 0.7575%; background:#fff; box-shadow:0 2px 2px rgba(0, 0, 0, .04); transition:all .5s ease; text-align:left}
.section3 .postList > li:before {position:absolute; top:0; left:0; bottom:0; right:0; content:''; border:2px solid transparent; z-index:10; transition:all .5s ease}
.section3 .postList > li:hover {box-shadow:0 18px 20px rgba(0, 0, 0, .1)}
.section3 .postList > li:hover:before {border-color:#92bd92}
.section3 .postList > li a {position:relative; display:table; table-layout:fixed; width:100%; height:180px; z-index:20}
.section3 .postList > li a > div {display:table-cell; vertical-align:top}
.section3 .postList > li a .imgArea {width:30%; background-size:cover !important}
.section3 .postList > li a .imgArea img {display:block; width:100%}
.section3 .postList > li a .textArea {padding:30px}
.section3 .postList > li a .textArea h3 {font-size:24px; font-weight:normal; color:#333; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.section3 .postList > li a .textArea span {display:block; font-size:14px; color:#bbb; margin-bottom:15px}
.section3 .postList > li a .textArea p {display:-webkit-box; font-size:14px; line-height:1.75; max-height:50px; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80%; display:block; font-weight:500}
/*section4*/
.section4 {background:#fff url(../img/section4_bg.png) center top no-repeat; min-height:845px; background-size:cover}
.section4 .inner {}
#video_wrap {padding:230px 0 80px}
#video_wrap:after {clear:both; content:''; display:block}
#video_wrap .left {float:left; width:50%}
#video_wrap .left a {display:block; overflow:hidden}
#video_wrap .left a img {display:block; width:100%; transition:all 0.3s ease}
#video_wrap .left a img:hover {transform:scale(1.05)}
#video_wrap .right {float:right; width:50%; text-align:center}
#video_wrap .right h4 {font-size:40px; line-height:1; letter-spacing:5px; color:#000}
#video_wrap .right h4:after {content:''; display:block; margin:10px auto; width:30%; border:1px solid #000}
#video_wrap .right span.middle {font-size:20px; font-weight:700; letter-spacing:-1px; color:#555555}
#video_wrap .right p {font-size:17px; font-weight:700; letter-spacing:-1px; line-height:1.45; padding:15px 0 20px; color:#555555}
#video_wrap .right .tel_box {border:4px solid #e0e1e2; padding:10px 0; width:65%; margin:0 auto}
#video_wrap .right .tel_box span {font-size:25px; font-weight:700; letter-spacing:-1px; color:#484848; margin:0 20px; vertical-align:middle}
#video_wrap .right .tel_box span.ns {font-size:17px; font-weight:700; letter-spacing:-1px; color:#555555; vertical-align:-3px}
/* 비디오 */
#mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.8; z-index:1000; transition:all 0.3s ease}
#videolayer {display:none; position:fixed; top:50%; left:50%; width:60%; margin-left:-30%; margin-top:-200px; z-index:1010}
#videolayer.modal {}
/*섹션 공통*/
.inner {width:100%; max-width:1400px; margin:0 auto}
.section .btn-more {text-align:center;clear:both;}
.section .btn-more a {display:inline-block; font-size:16px; color:#000; padding:10px 20px; background:#fff; transition:all 0.3s ease; box-shadow:1px 1px 10px rgba(0,0,0,0.1); margin-top:20px}
.section .btn-more a i {vertical-align:-1px}
.section .btn-more a:hover {color:#fff; background:#000}
.section .btn-more.light a {color:#fff !important; border:2px solid #fff !important}
.section .btn-more.light a:hover {color:#000 !important; background:#fff}
/*bxslider css*/
.bx-wrapper {border:0; background:none}
.bx-wrapper .bx-controls-direction a {margin-top:-25px; text-indent:0; font:inherit; font-size:0; width:45px; height:45px; background:rgba(0,0,0,0.25); line-height:45px; z-index:10; transition:all 0.3s ease; opacity:0}
.bx-wrapper:hover .bx-controls-direction a {opacity:1}
.bx-wrapper .bx-controls-direction a:hover {background:rgba(0,0,0,0.55)}
.bx-wrapper .bx-prev {left:0}
.bx-wrapper .bx-prev:before {content:'\f104'; font-family:'fontAwesome'; color:#fff; font-size:20px; text-align:center; display:block}
.bx-wrapper .bx-next {right:0}
.bx-wrapper .bx-next:before {content:'\f105'; font-family:'fontAwesome'; color:#fff; font-size:20px; text-align:center; display:block}
.bx-wrapper .bx-pager {bottom:50px}
.bx-wrapper .bx-pager.bx-default-pager a {width:20px; height:2px; background:#fff; transition:all 0.3s ease}
.bx-wrapper .bx-pager.bx-default-pager a.active {width:30px; background:#21bbb1}
/*미디어 쿼리*/
@media screen and (max-width:1366px) and (min-width:650px) {
 .bx-viewport {height:100% !important}
}
@media screen and (max-width:1366px) {
 #video_wrap .right .tel_box {width:100%}
 /*header*/
 #header .inner {padding:0 50px}
 /*main slide*/
 .bx-wrapper {box-shadow:none}
 /*section1*/
 .section1 {padding:80px 0}
 .section1 .inner .box {display:inline-block; margin:0 auto; float:none}
 .section1 .inner .slide_img {float:none; margin:0 auto; padding:80px 0 0 !important; width:49%}
 .section1 .inner .section1_content {margin:0; text-align:center}
 .section1 .inner .section1_content > div {overflow:inherit; padding:0 10px}
 .section1 .inner .box a .desc {padding:10px 0}
 .section1 .inner .box a .desc h4 {font-size:12px; padding:30px 0 0}
 .section1 .inner .box a .desc h5 {font-size:14px; padding:10px 0}
 .section1 .inner .box a .desc .btn_area > span {padding:5px 30px}
 .section1 .inner .box a .desc .btn_area > span span {font-size:12px}
 /*section2*/
 .section2 .postSlider .innerWrap .txtWrap {float:none; width:80%; margin:0 auto; padding:20px 0 40px}
 .section2 .postSlider .innerWrap .txtWrap ul li h2.tit.left a {font-size:20px}
 .section2 .postSlider .innerWrap .txtWrap ul li h3 {font-size:16px; padding:10px 0 20px}
 .section2 .postSlider .innerWrap .txtWrap ul li p {font-size:12px; padding:0 0 10px}
 .section2 .postSlider .innerWrap .txtWrap .box_info ul li {width:80px; height:80px; line-height:80px; margin: 5px}
 .section2 .postSlider .innerWrap .imgWrap {float:none; margin:0 auto; padding:20px 0 0}
 .section2 .postSlider .innerWrap .imgWrap ul li {padding:60px}
 .section2 .postSlider .innerWrap .imgWrap ul li a {display:inline-block; width:100%; margin:0 auto}
 /*section3*/
 .section3 .inner h2 {padding-top:100px}
 .section3 .inner h2 a {font-size:20px}
 .section3 .postList {width:100%; margin:25px auto}
 .section3 .postList > li {display:inline-block; float:none; width:48%; margin:10px 5px 0}
 .section3 .postList > li a .textArea h3 {font-size:20px; padding:10px 0 30px}
 .section3 .postList > li a .textArea span {font-size:12px; margin-bottom:10px}
 .section3 .postList > li a .textArea p {font-size:12px}
 /*video wrap*/
 #video_wrap {padding:80px 0 40px}
 #video_wrap .left {float:none; margin:0 auto}
 #video_wrap .right {float:none; margin:40px auto 0}
 #video_wrap .right h4 {font-size:20px}
 #video_wrap .right span.middle {font-size:17px}
 #video_wrap .right p {font-size:17px; padding:10px 0 15px}
 #video_wrap .right .tel_box span {font-size:20px}
 #video_wrap .right .tel_box span.ns {font-size:15px}
 /*footer*/
 #footer .inner ul {padding:30px 50px}
}
@media screen and (max-width:1280px) {
 /*header*/
 #header {}
}
@media screen and (max-width:1024px) {
 /*header*/

}
@media screen and (max-width:980px) {
 /*section1*/
 .section1 {padding-top:0}
 .section1 .inner .slide_img {width:70% !important}
 .section1 .inner .box {width:24%}
 .bx-wrapper {height:auto !important}
 /*section3*/
 .section3 .postList > li {float:none; width:90%; margin:10px auto 0}
}
@media screen and (max-width:768px) {
 .section2 .postSlider .innerWrap .imgWrap ul li {padding:0}
 /*section1*/
}
@media screen and (max-width:640px) {
 .section1 .inner .box {width:76%; margin-bottom:30px}
 .section1 .inner .box a .img_area {max-height:300px}
 .section1 .inner .box a .desc h4 {padding:10px 0 0}
 .section1 .inner .box a .desc h5 {padding:20px 0}
 .section2 .postSlider .innerWrap .imgWrap {width:80%; position:relative}
 .section2 .postSlider .innerWrap .txtWrap {width:80%}
 .section2 .postSlider .innerWrap .imgWrap a.control {width:50px; height:50px; line-height:50px}
 .section2 .postSlider .innerWrap .txtWrap .box_info ul li {width:100px; height:100px; line-height:100px; margin:3px 1px}
 .section2 .postSlider .innerWrap .imgWrap a.control i {font-size:25px; line-height:50px}
 /*하단 동영상*/
 #video_wrap .right {width:100%}
 #video_wrap .right span.middle {font-size:11px}
 #video_wrap .right p {font-size:11px}
 #video_wrap .right .tel_box {width:85%}
}