@charset "utf-8";
/* 메인비주얼 */
#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}
#main_visual ul.visualImg li .caption-box {position:absolute; top:390px; left:22%; width:1080px; z-index:20}
#main_visual ul.visualImg li .caption-box1 {position:absolute; top:190px; left:22%; width:1080px; z-index:20}
#main_visual ul.visualImg li .caption-box h2 {font-size:65px; font-weight:600; line-height:1.2; color:#fff; margin-bottom:5px}
#main_visual ul.visualImg li .caption-box h2 span {color:#21bbb1}
#main_visual ul.visualImg li .caption-box h3 {font-size:30px; font-weight:300; line-height:1.5; color:#fff}
#main_visual ul.visualImg li .caption-box1 h2 {font-size:45px; font-weight:600; line-height:1.2; color:#fff; margin-bottom:5px}
#main_visual ul.visualImg li .caption-box1 h2 span {color:#21bbb1}
#main_visual ul.visualImg li .caption-box1 h3 {font-size:30px; font-weight:300; 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}
/* 메인페이지 섹션 */
.mSection {padding:120px 0; overflow:hidden}
.mSection.main1 {background:#f3f4ee;}
.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:42px; color:#21bbb1; 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:#21bbb1}
.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 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:16px; color:#999}
.mSection.main2 ul.team_list li .detail span.btn {display:inline-block; margin-top:25px; padding:10px 40px; font-size:13px; font-weight:600; color:#21bbb1; background:#333; transition:all 0.3s ease}
.mSection.main2 ul.team_list li a:hover span.btn {color:#333; background:#21bbb1}
#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 50px 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:12%}
.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:6px; content:''; background:#21bbb1}
.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:#21bbb1; background:#333; transition:all 0.3s ease}
.mSection.main3 .inner .right_txt a:hover {color:#333; background:#21bbb1}

/* 메인 이미지 스와이프 영역 */
#asideSwipe {position:relative; background:#000; overflow:hidden}
#asideSwipe .imgWrap {position:relative; overflow:hidden}
#asideSwipe .imgWrap ul {position:relative; width:1000%}
#asideSwipe .imgWrap ul li {position:relative; float:left}
#asideSwipe .imgWrap ul li img {display:block; width:100%}
#asideSwipe .imgWrap ul li a {position:relative; display:block}
#asideSwipe .imgWrap ul li a:before {position:absolute; top:0; left:0; width:100%; height:100%; content:''; border:6px solid #21bbb1; opacity:0; z-index:1; box-sizing:border-box; transition:all 0.3s ease}
#asideSwipe .imgWrap ul li a:hover:before {opacity:1}
#asideSwipe .imgWrap ul li:hover img {transform:scale(1.1)}
#asideSwipe .imgWrap ul li:hover .mask {opacity:0; filter:alpha(opacity='0')}
#asideSwipe .imgWrap ul li .imgArea {overflow:hidden}
#asideSwipe .imgWrap ul li .imgArea img {display:block; transition:all 2.5s ease}
#asideSwipe .imgWrap ul li .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 .imgWrap ul li .caption h2 {font-size:48px; font-weight:400; color:#fff; line-height:1; margin-bottom:30px}
#asideSwipe .imgWrap ul li .caption p {color:#fff}
#asideSwipe .imgWrap ul li .caption p.desc {font-size:16px; margin-bottom:20px}
#asideSwipe .imgWrap ul li .caption p.date {font-size:13px}
#asideSwipe .imgWrap ul li .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 .imgWrap .control {position:absolute; display:block; width:220px; height:100%; text-align:center; z-index:30}
#asideSwipe .imgWrap .control span {position:relative; display:inline-block; width:72px; height:72px; top:50%; margin-top:-36px; border:1px solid #dedede; border-radius:50%; text-align:center; opacity:.35; filter:alpha(opacity='35')}
#asideSwipe .imgWrap .control span i {color:#fff; line-height:66px}
#asideSwipe .imgWrap .prev {top:0; left:0}
#asideSwipe .imgWrap .next {top:0; right:0}

/* 미디어 쿼리 */
@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:none}
 #asideSwipe .imgWrap ul li .caption {padding:0 70px 30px 40px}
 #asideSwipe .imgWrap ul li .caption h2 {font-size:36px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
 #asideSwipe .imgWrap ul li .caption p.desc {font-size:14px}
 #asideSwipe .imgWrap .control {width:110px}
 .mSection.main3 .inner .left_img {width:35%}
 .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%}
}
@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:80%}
 .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}
}

@media screen and (max-width:768px) and (min-width:100px) {
 #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}
 .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}
 #asideSwipe .imgWrap ul li .caption {padding:0 50px 30px 30px}
 #asideSwipe .imgWrap ul li .caption h2 {font-size:28px; margin-bottom:20px}
 #asideSwipe .imgWrap ul li .caption p.desc {font-size:12px}
 #asideSwipe .imgWrap ul li .caption p.date {font-size:11px}
 #asideSwipe .imgWrap .control {width:70px}
 #asideSwipe .imgWrap .control span {width:48px; height:48px; margin-top:-24px !important}
 #asideSwipe .imgWrap .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}
 #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%}
}