@charset "euc-kr";
/* ¸ÞÀκñÁÖ¾ó */
#main_visual {position:relative; overflow:hidden}
#main_visual ul.visualImg {position:relative; width:1000%}
#main_visual ul.visualImg li {float:left; position:relative; margin:0; padding:0; max-height:1080px; overflow:hidden}
#main_visual ul.visualImg li img {display:block; width:100%}
#main_visual ul.visualImg li .mask {position:absolute; width:100%; height:100%; background:#000; opacity:.3; filter:alpha(opacity='30'); z-index:10}
#main_visual ul.visualImg li video {position:absolute; width:auto; min-width:100%; height:100%; min-height:100%; object-fit:cover}
.vjs_video_3-dimensions {width:auto !important; height:auto !important}
.video-js {position:static !important}
#main_visual ul.visualImg li .caption-box {position:absolute; top:200px; left:15.5%; width:1080px; z-index:20}
#main_visual ul.visualImg li .caption-box h2 {font-size:95px; font-weight:700; line-height:1.2; color:#fff; margin-bottom:60px}


#main_visual ul.visualImg li .caption-box h2 span {color:#e54a1a;position:relative;}
#main_visual ul.visualImg li .caption-box h2 span:before {position:absolute;content:'';height:20px;width:100%;bottom:10px;left:0px;background:rgba(255,255,255,1);mix-blend-mode: multiply;opacity:0.5}


#main_visual ul.visualImg li .caption-box h3 {font-size:30px; font-weight:400; line-height:1.5; color:#fff}
#main_visual .control {position:absolute; display:block; width:220px; height:100%; text-align:center; z-index:30}
#main_visual .control img {position:relative; display:inline-block; top:50%; margin-top:-29px}
#main_visual .prev {top:0; left:0}
#main_visual .next {top:0; right:0}
#main_visual ul.paging {position:absolute; width:100%; height:25px; left:0; bottom:5%; text-align:center; z-index:30}
#main_visual ul.paging li {display:inline-block; width:16px; height:16px; margin:0 5px; border:6px solid rgba(0,0,0,0.12); cursor:pointer; transition:all 0.3s ease}
#main_visual ul.paging li:before {display:block; width:4px; height:4px; content:''; background:#fff; transition:all 0.3s ease}
#main_visual ul.paging li.active, #main_visual ul.paging li:hover {border-width:3px}
#main_visual ul.paging li.active:before, #main_visual ul.paging li:hover:before {width:10px; height:10px}


.col_white {color:#fff!important;}
.col_orange {color:#eb5825!important;}
.col_yellow {color:#d8d08a!important;}
.col_lightyellow {color:#e6dfa7!important;}
.col_gray {color:#333!important;}
.col_lightgray {color:#666!important;}


/* ¸ÞÀÎÆäÀÌÁö ¼½¼Ç */
.mSection {padding:120px 0; overflow:hidden}
.mSection.main1 {/*background:#e9e3b1 background: url("../../img/main_sec2_bg.jpg");*/}
.mSection:after {clear:both; display:block; content:''}
.mSection .inner {width:100%; max-width:1400px; margin:0 auto; padding:0 50px}
.mSection .section_title {max-width:55%; margin:0 auto; padding-bottom:75px; text-align:center}
.mSection .section_title h2 {position:relative; font-size:35px; color:#e54a1a; margin-bottom:20px; padding-top:20px}
.mSection .section_title h2:before {/*position:absolute; display:inline-block; width:80px; height:6px; top:0; left:50%; margin-left:-40px; content:''; background:#e54a1a*/}
.mSection .section_title p {font-size:16px; color:#999}
.mSection.main1 .slice_grid:after {clear:both; display:block; content:''}
.mSection.main1 .slice_grid .left {float:left; width:49.3%}
.mSection.main1 .slice_grid .right {float:right; width:49.3%}
.mSection.main1 .slice_grid > div > .tile {position:relative; float:left; width:48.3%; margin-right:3.4%; margin-bottom:3%}
.mSection.main1 .slice_grid > div > .tile img {display:block; width:100%}
.mSection.main1 .slice_grid > div > .tile .caption {position:absolute; top:0; left:0; width:100%; height:100%; padding:40px; z-index:10; opacity:0; background:rgba(0,0,0,.6); transition:all 0.5s ease}
.mSection.main1 .slice_grid > div > .tile .caption h3 {position:relative; color:#fff; line-height:1.1; font-weight:400; margin-bottom:25px; padding-bottom:25px}
.mSection.main1 .slice_grid > div > .tile .caption p {font-size:16px; color:#fff; margin-bottom:20px}
.mSection.main1 .slice_grid > div > .tile:hover .caption {opacity:1}
.mSection.main1 .slice_grid > div > .no-margin {margin-right:0 !important}
.mSection.main1 .slice_grid > div > .tile .caption h3 {font-size:18px}
.mSection.main1 .slice_grid > div > .tile .caption h3:after {position:absolute; display:block; bottom:0; left:0; width:24px; height:1px; content:''; background:rgba(255,255,255,.5)}
.mSection.main1 .slice_grid > div > .tile-2x {clear:both; float:none; width:100%; margin-right:0 !important}
.mSection.main1 .slice_grid > div > .tile-2x .caption h3 {font-size:42px}
.mSection.main1 .slice_grid > div > .tile-2x .caption h3:after {position:absolute; display:block; bottom:0; left:0; width:48px; height:1px; content:''; background:rgba(255,255,255,.5)}


.mSection.main2 {/*background:#f4f1d5;*/ background: url("../../img/sec_bg_orangeyellow.jpg"); margin-bottom:0px!important; padding-bottom:0px!important;position:relative;}

.mSection.main2 #asideSwipe_new .swiper-wrapper .swiper-slide a{border:6px solid #f5f5f5;}
.mSection.main2 #asideSwipe_new .swiper-wrapper .swiper-slide a:before {position:absolute; top:0; left:0; width:100%; height:100%; content:''; border:6px solid #e54a1a; opacity:0; z-index:1; box-sizing:border-box; transition:all 0.3s ease}

.mSection.main2 ul.team_list {text-align:justify}
.mSection.main2 ul.team_list:after {display:inline-block; width:100%; height:0; content:''}
.mSection.main2 ul.team_list li {display:inline-block; width:24%; padding:0 20px; text-align:center; vertical-align:top}
.mSection.main2 ul.team_list li .imgArea {width:160px; height:160px; margin:0 auto 20px auto; border-radius:50%; overflow:hidden}
.mSection.main2 ul.team_list li .imgArea img {display:block; width:160px}
.mSection.main2 ul.team_list li .detail h3 {font-size:28px; font-weight:500; line-height:1; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mSection.main2 ul.team_list li .detail p.sub {color:#999; margin-bottom:30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mSection.main2 ul.team_list li .detail p.desc {font-size:14px; color:#999}
.mSection.main2 ul.team_list li .detail span.btn {display:inline-block; margin-top:25px;height:auto;line-height:38px !important;border:0px; padding:10px 40px; font-size:13px; font-weight:600; color:#e54a1a; background:#333; transition:all 0.3s ease}
.mSection.main2 ul.team_list li a:hover span.btn {color:#333; background:#e54a1a}



.mSection.main5 { background: url("../../img/sec_bg_yellow.jpg"); }
.mSection.main5 .slice_grid:after {clear:both; display:block; content:''}
.mSection.main5 .slice_grid > div > .tile {position:relative; float:left; width:19%; margin-right:1%; margin-bottom:1%}
.mSection.main5 .slice_grid > div > .tile img {display:block; width:100%}
.mSection.main5 .slice_grid > div > .tile .caption {position:absolute; top:0; left:0; width:100%; height:100%; padding:40px; z-index:10; opacity:0; background:rgba(0,0,0,.6); transition:all 0.5s ease}
.mSection.main5 .slice_grid > div > .tile .caption h3 {position:relative; color:#fff; line-height:1.1; font-weight:400; margin-bottom:25px; padding-bottom:25px; text-algin:center;}
.mSection.main5 .slice_grid > div > .tile .caption p {font-size:36px; color:#fff; margin-bottom:20px;  text-align:center!important; margin-top:35%;}
.mSection.main5 .slice_grid > div > .tile:hover .caption {opacity:1}
.mSection.main5 .slice_grid > div > .no-margin {margin-right:0 !important}
.mSection.main5 .slice_grid > div > .tile .caption h3 {font-size:18px}
.mSection.main5 .slice_grid > div > .tile .caption h3:after {position:absolute; display:block; bottom:0; left:0; width:24px; height:1px; content:''; background:rgba(255,255,255,.5)}
.mSection.main5 .slice_grid > div > .tile-2x {clear:both; float:none; width:100%; margin-right:0 !important}
.mSection.main5 .slice_grid > div > .tile-2x .caption h3 {font-size:42px}
.mSection.main5 .slice_grid > div > .tile-2x .caption h3:after {position:absolute; display:block; bottom:0; left:0; width:48px; height:1px; content:''; background:rgba(255,255,255,.5)}


.main6 {/*background:#f5f5f5*/ background: url("../../img/sec_bg_orange.jpg");}



#teamSwipe {position:relative}
#teamSwipe .control {position:absolute; display:none; width:70px; height:100%; text-align:center}
#teamSwipe .prev {top:0; left:-50px}
#teamSwipe .next {top:0; right:-50px}
#teamSwipe .control span {position:relative; display:inline-block; width:48px; height:48px; top:50%; margin-top:-24px !important; color:#ccc; border:1px solid #ccc; border-radius:50%}
#teamSwipe .control span i {line-height:42px}

.mSection.main3 {padding:0}
.mSection.main3 .inner {max-width:100%; padding:0 0px 0 0}
.mSection.main3 .inner .left_img {float:left; width:50%}
.mSection.main3 .inner .left_img img {display:block; width:100%}
.mSection.main3 .inner .right_txt {margin-left:55%; padding-top:10%;padding-right:50px;}
.mSection.main3 .inner .right_txt h2 {position:relative; font-size:48px; font-weight:500; line-height:1.1; margin-bottom:30px; padding-top:30px}
.mSection.main3 .inner .right_txt h2:before {position:absolute; display:block; top:0; left:0; width:80px; height:3px; content:''; background:#e54a1a}
.mSection.main3 .inner .right_txt p {font-size:16px; color:#555}
.mSection.main3 .inner .right_txt a {display:inline-block; margin-top:50px; padding:15px 100px; font-size:16px; font-weight:600; color:#e54a1a; background:#333; transition:all 0.3s ease}
.mSection.main3 .inner .right_txt a:hover {color:#333; background:#e54a1a}


/* ¸ÞÀÎ À̹ÌÁö ½º¿ÍÀÌÇÁ ¿µ¿ª */
/* 2021-06-01 Ãß°¡ */
#asideSwipe_new {position:relative; background:#000;}
#asideSwipe_new.swiper-container {width:100%;height:100%;overflow:;}
#asideSwipe_new .swiper-wrapper {}
#asideSwipe_new .swiper-wrapper .swiper-slide img {display:block; width:100%}
#asideSwipe_new .swiper-wrapper .swiper-slide a {position:relative; display:block}
#asideSwipe_new .swiper-wrapper .swiper-slide a:before {position:absolute; top:0; left:0; width:100%; height:100%; content:''; border:6px solid #e54a1a; opacity:0; z-index:1; box-sizing:border-box; transition:all 0.3s ease}
#asideSwipe_new .swiper-wrapper .swiper-slide a:hover:before {opacity:1}
#asideSwipe_new .swiper-wrapper .swiper-slide:hover img {transform:scale(1.1)}
#asideSwipe_new .swiper-wrapper .swiper-slide:hover .mask {opacity:0; filter:alpha(opacity='0')}
#asideSwipe_new .swiper-wrapper .swiper-slide .imgArea {overflow:hidden}
#asideSwipe_new .swiper-wrapper .swiper-slide .imgArea img {display:block; transition:all 2.5s ease}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption {position:absolute; bottom:0; left:0; width:100%; padding:0 90px 60px 60px; text-shadow:0 1px 1px rgba(0,0,0,0.5); z-index:20}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption h2 {font-size:48px; font-weight:400; color:#fff; line-height:1; margin-bottom:30px}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption p {color:#fff}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption p.desc {font-size:16px; margin-bottom:20px}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption p.date {font-size:13px}
#asideSwipe_new .swiper-wrapper .swiper-slide .mask {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.4; filter:alpha(opacity='40'); transition:all 0.5s ease; z-index:10}
#asideSwipe_new .control {position:absolute; display:block; width:220px; height:100%; text-align:center; z-index:30;background:none;}
#asideSwipe_new .control span {position:relative; display:inline-block; width:72px; height:72px;margin-top:-36px; border:0px solid #dedede; border-radius:50%; text-align:center; opacity:.35; filter:alpha(opacity='35')}
#asideSwipe_new .control span i {color:#000; line-height:66px}
.mSection.main2 .swiper-button-next {position:absolute;left:50%;margin-left:680px;background:none;margin-top:130px;}
.mSection.main2 .swiper-button-prev {position:absolute;left:50%;margin-left:-690px;background:none;margin-top:130px;}

/* 2021-11-15 Ãß°¡ */
#section6 {padding:100px 0px !important;}
#section6 .title {text-align:center;}
#section6 .title h1 {font-size:50px;color:#e8e3b1;margin-bottom:30px;}
#section6 .title h1 span {color:#fff;}
#section6 .title p{font-size:19px;color:#333;margin-bottom:50px;}
.mb02{position:relative;width:1200px;margin:0 auto;}
/*µå·¡±×*/
.beforeandafter{width:1200px;height:600px;margin:0 auto;}
div.beforeandafter{overflow: hidden;position: relative;}
div.beforeandafter img{max-width: none !important;}
div.before, div.after{height: 100%; left: 0;overflow: hidden;position: absolute;top: 0;transition: width 0.4s ease-in-out;width: 100%;z-index: 100;}
div.after{z-index: 1;}
div.drag{background: #1c1c1c;cursor: col-resize;display: block;height: 100%;left: 100%;position: absolute;top: 0;transition: left 0.4s ease-in-out;width: 2px;z-index: 1001;}
div.drag div.draghandle{background: url("../../img/drag_btn.png");height: 40px;position: absolute;text-align: center;width: 80px;}
div.drag div.draghandlea{background: url("../../img/drag_btn.png");height: 40px;position: absolute;text-align: center;width: 80px;}
div.before span.caption, div.after span.caption{bottom:50px;color:#000;display:block;padding:5px;position: absolute;width:180px;font-size:30px;text-align:center;transform:translateX(150%);left:50%;font-style:italic;}
div.before span.caption{transform:translateX(-50%);}
#section6 .slick-dots {text-align:center;margin-top:20px;}
#section6 .slick-dots li {display:inline-block;width:15px;height:15px;background:#fff;border-radius:20px;margin:0px 5px;cursor:pointer;}
#section6 .slick-dots li.slick-active {background:#e8e3b1;} 
#section6 .slick-dots li button {text-indent:-9999px;border:0px;background:none;}





/* ¹Ìµð¾î Äõ¸® */
@media screen and (max-width:1500px) and (min-width: 100px) {
 .mSection.main3 .inner .right_txt {padding-top:5%}
}
@media screen and (max-width:1440px) and (min-width: 100px) {
 .mSection.main3 .inner .right_txt h2 {font-size:36px; margin-bottom:15px}
 .mSection.main3 .inner .left_img {width:40%}
 .mSection.main3 .inner .right_txt {margin-left:45%}
 .mSection.main3 .inner .right_txt p {font-size:13px; display:-webkit-box; max-height:80px; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word}
 .mSection.main3 .inner .right_txt a {font-size:13px; margin-top:25px; padding:10px 40px}
}
@media screen and (max-width:1280px) and (min-width: 100px) {
 #main_visual .control {width:110px}
 .mSection.main1 .slice_grid > div > .tile .caption {opacity:1; padding:20px; background:rgba(0,0,0,0.25)}
 .mSection.main1 .slice_grid > div > .tile .caption h3:after {display:none !important}
 .mSection.main1 .slice_grid > div > .tile .caption h3 {font-size:14px}
 .mSection.main1 .slice_grid > div > .tile-2x .caption h3 {font-size:24px}
 .mSection.main1 .slice_grid > div > .tile p {position:absolute; bottom:20px; left:20px; font-size:12px !important; margin-bottom:0 !important}
 .mSection.main1 .slice_grid > div > .tile p.desc {display:block}
 
 #asideSwipe_new .swiper-wrapper .swiper-slide .caption {padding:0 70px 30px 40px}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption h2 {font-size:36px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption p.desc {font-size:14px}
#asideSwipe_new .control {width:110px}
 .mSection.main3 .inner .left_img {width:33.33333333333333333%}
 .mSection.main3 .inner .right_txt {margin-left:38%}

}
@media screen and (max-width:1200px) and (min-width: 100px) {
 .mSection.main3 .inner {padding:0 !important}
 .mSection.main3 .inner .left_img {display:none}
 .mSection.main3 .inner .right_txt {float:none; margin-left:0; padding:50px !important; width:100%}
 .mSection.main3 .inner .right_txt h2 {font-size:24px; margin-bottom:15px; padding-top:15px}
 .mSection.main3 .inner .right_txt h2:before {width:40px; height:3px}
 .mSection.main3 .inner .right_txt h2 br {display:none}
 .mSection.main3 .inner .right_txt p {font-size:12px}
 .mSection.main3 .inner .right_txt a {font-size:12px; text-align:center; padding:10px 0; width:100%}

.mSection.main2 .swiper-button-next {position:absolute;left:auto;right:0px;margin-left:0px;}
.mSection.main2 .swiper-button-prev {position:absolute;left:20px;margin-left:0px;}


#section6 {}
#section6 {padding:40px 0px 80px !important;min-height:auto !important;}
#section6 .title  h1 {font-size:40px;}
#section6 .title  h1 span {}
#section6 .title  p{font-size:15px;margin-bottom:30px;}
.mb02{width:100%;}
.beforeandafter{width:400px;height:200px;}
div.before span.caption, div.after span.caption{bottom:20px;width:50px;font-size:20px;}
div.before span.caption{transform:translateX(-50%);}
#section6 .slick-dots li {width:10px;height:10px;margin:0px 2px;}

.mSection.main5 .slice_grid > div > .no-margin {margin-right:1% !important}




}
@media screen and (max-width:1024px) and (min-width: 100px) {
 #main_visual ul.visualImg li .caption-box {width:100%; top:20%; left:0; margin:0; padding:0 100px}
 #main_visual ul.visualImg li .caption-box h2 {font-size:90px}
 .mSection .section_title {max-width:100%}
 .mSection .section_title h2 {font-size:36px; line-height:1.2}
 .mSection.main2 ul.team_list li {width:48%; margin-bottom:60px}
 .mSection.main2 ul.team_list li .detail h3 {font-size:18px; margin-bottom:5px}

 .mSection.main5 ul.team_list li {width:48%; margin-bottom:60px}
 .mSection.main5 ul.team_list li .detail h3 {font-size:18px; margin-bottom:5px}


}
@media screen and (max-width:768px) and (min-width:100px) {

div.before span.caption, div.after span.caption {font-size:13px; width:50px;  line-height:15px;}

.intro_logo {width:50%;}
.beforeandafter{width:300px;height:150px;}

 #main_visual ul.visualImg li .caption-box {padding:0 50px}
 #main_visual ul.visualImg li .caption-box h2 {font-size:60px; margin-bottom:40px}
 #main_visual ul.visualImg li .caption-box h3 {font-size:16px}
 #main_visual .control {display:none}
 .mSection {padding:60px 0}
 .mSection .section_title h2 {font-size:24px; margin-bottom:15px}
 .mSection .section_title h2:before {width:40px; height:3px; margin-left:-20px}
 .mSection .section_title p {font-size:12px}
 #teamSwipe .control {display:block !important}
 .mSection.main1 .slice_grid .left, .mSection.main1 .slice_grid .right {float:none !important; width:100% !important}
 .mSection.main1 .slice_grid > div > .tile {width:49.5%; margin-right:1%; margin-bottom:1%}
 .mSection.main1 .slice_grid > div > .tile .caption h3 {font-size:12px !important; display:none;}
 .mSection.main1 .slice_grid > div > .tile .caption p {font-size:11px !important}
 .mSection.main1 .slice_grid > div > .tile-2x {width:100% !important}

 .mSection.main2 ul.team_list {position:relative}
 .mSection.main2 ul.team_list li {display:block; float:left; width:100%; margin:0; padding:0}
 .mSection.main2 ul.team_list li .imgArea {width:40%; height:40%}
 .mSection.main2 ul.team_list li .imgArea img {width:100%}
 .mSection.main2 ul.team_list li .detail p.sub {font-size:12px; margin-bottom:15px}
 .mSection.main2 ul.team_list li .detail p.desc {width:50%; margin:0 auto; font-size:13px}
 .mSection.main2 ul.team_list li .detail p.desc br {display:none}
 .mSection.main2 ul.team_list li .detail span.btn {display:none}

 .mSection.main3 .inner {padding-bottom:50px !important}
 .mSection.main3 .inner .right_txt {padding:30px !important}

 .mSection.main5 ul.team_list {position:relative}
 .mSection.main5 ul.team_list li {display:block; float:left; width:50%; margin:0; padding:0}
 .mSection.main5 ul.team_list li .imgArea {width:100%; height:100%}
 .mSection.main5 ul.team_list li .imgArea img {width:100%}
 .mSection.main5 ul.team_list li .detail p.sub {font-size:12px; margin-bottom:15px}
 .mSection.main5 ul.team_list li .detail p.desc {width:50%; margin:0 auto; font-size:13px}
 .mSection.main5 ul.team_list li .detail p.desc br {display:none}
 .mSection.main5 ul.team_list li .detail span.btn {display:none}

  #section6{padding-bottom:40px!important;}
  #section6 .title h1 {font-size:27px;color:#e8e3b1;margin-bottom:30px;}

  
 #asideSwipe_new .swiper-wrapper .swiper-slide .caption {padding:0 50px 30px 30px}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption h2 {font-size:28px; margin-bottom:20px}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption p.desc {font-size:12px}
#asideSwipe_new .swiper-wrapper .swiper-slide .caption p.date {font-size:11px}
#asideSwipe_new .control {width:70px}
#asideSwipe_new .control span {width:48px; height:48px; margin-top:-24px !important}
#asideSwipe_new .control span i {font-size:24px; line-height:45px}
}
@media screen and (max-width:640px) and (min-width: 100px) {
 #main_visual ul.visualImg li .caption-box {top:25%; padding:0 30px}
 #main_visual ul.visualImg li .caption-box h2 {font-size:40px; margin-bottom:30px}
 #main_visual ul.visualImg li .caption-box h3 {font-size:14px}
 .mSection .inner {padding:0 30px}
 .mSection.main2 ul.team_list li .detail h3 {font-size:15px}
 .mSection.main5 ul.team_list li .detail h3 {font-size:15px}
 #teamSwipe .prev {top:0; left:-30px}
 #teamSwipe .next {top:0; right:-30px}
}
@media screen and (max-width:480px) and (min-width: 100px) {
 #main_visual ul.visualImg li .caption-box {top:35%}
 #main_visual ul.visualImg li .caption-box h2 {font-size:24px !important; margin-bottom:25px}
 #main_visual ul.visualImg li .caption-box h3 {font-size:13px !important}
 #main_visual ul.visualImg li .caption-box h3 br {display:none}
/* #main_visual ul.visualImg li video {display:none !important}*/
 .mSection.main1 .slice_grid > ul > li {width:100% !important; margin-bottom:10px}
 .mSection.main1 .slice_grid > ul > li.full .caption h3 {font-size:14px}
 .mSection.main2 ul.team_list li .detail p.desc {width:80%}
 .mSection.main5 ul.team_list li .detail p.desc {width:80%}
}