@charset "utf-8";
.section-header { position: relative; left: 0; top: 0; z-index: 999; display: block; width: 100%; padding: 0; }
.section-head { position: relative; width: 1560px; margin: 0 auto; padding: 80px 0 20px; font-size: 28px; transition: .2s ease-in-out; }
.section-head h2 { font-size: 28px; }
.m-fullpage a.more { display: inline-block; font-size: 24px; color: #444; width: 250px; height: 50px; padding: 0px; line-height: 140%; overflow: hidden; transition: all 0.2s ease-out; }
.m-fullpage a.more > span { position: relative; display: inline-block; width: 100%; height: 50px; }
.m-fullpage a.more > span em { position: absolute; top: 0px; left: 132px; display: inline-block; transition: all 0.2s ease-out; }
.m-fullpage a.more:hover > span em { position: absolute; top: 0px; left: 0; color: #121212; }
.m-fullpage a.more > span::before { content: ''; position: absolute; top: 8px; left: 0; width: 108px; height: 15px; background: url("../images/common/btn_line_2px.svg") 0px bottom no-repeat; background-size: 108px 15px; transition: all 0.2s ease-out; }
.m-fullpage a.more:hover > span::before { content: ''; position: absolute; top: 8px; left: 130px; width: 108px; height: 15px; background: url("../images/common/btn_arrow_right_2px_.svg") 0px bottom no-repeat; background-size: 108px 15px; }
/***** section *****/
.navDisplay { position: fixed !important; top: 0; z-index: 600; background: rgba(0, 0, 0, .7); }
.navDisplay .header_toggle span { background: #121212; }
/***** section *****/
.section { position: relative; width: 100%; min-height: 400px; overflow: hidden; transition: .1s ease-in-out; }
.section#section5 { min-height: auto }
#fullpage { position: relative; width: 100%; height: 100%; }
/******************************** main ***************************************/
#section0 { height: 100%; }
#section0 .item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-position: center; background-size: cover; background-repeat: no-repeat; border-top: 0; position: relative; text-align: center; overflow: hidden; }
#section0 .item:before { content: ''; display: block; background-color: rgba(0, 0, 0, 0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
/* 비디오컨텐츠 */
#section0 .item .inner { text-align: center; -moz-transform: scale(1.0); -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); -moz-transition: opacity 1s ease, -moz-transform 1s ease; -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; -ms-transition: opacity 1s ease, -ms-transform 1s ease; transition: opacity 1s ease, transform 1s ease; opacity: 1; position: relative; z-index: 2; overflow: hidden; margin: 0 auto; text-shadow: 0 0 10px rgb(0, 0, 0, .2); }
#section0 .item h1 { font-size: 80px; margin-bottom: 10px; color: #FFF; text-align: left; margin-top: 1.6rem; font-weight: bold; line-height: 120%; word-break: keep-all; }
#section0 .item p { color: #FFF; font-size: 34px; font-style: normal; font-weight: 500; line-height: 1.5; letter-spacing: normal; word-break: keep-all; }
/* 비디오 */
#section0 .item video { -moz-transform: translateX(50%) translateY(50%); -webkit-transform: translateX(50%) translateY(50%); -ms-transform: translateX(50%) translateY(50%); transform: translateX(50%) translateY(50%); position: absolute; bottom: 50%; right: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; overflow: hidden; }
#section0 .item img { -moz-transform: translateX(50%) translateY(50%); -webkit-transform: translateX(50%) translateY(50%); -ms-transform: translateX(50%) translateY(50%); transform: translateX(50%) translateY(50%); position: absolute; bottom: 50%; right: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; overflow: hidden; }
#section0 .scroll > span { position: relative; display: inline-block; width: 46px; height: 60px; margin: 0 auto }
#section0 .scroll > span::after { position: absolute; bottom: 0; left: 50%; content: ""; width: 1px; height: 40px; background: rgba(255, 255, 255, .4); }
#section0 .swiper { height: 100% !important }
#section0 .swiper-slide { height: 100% !important }
#section0 .swiper-container02 .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
#section0 .swiper-pagination-bullet-active { opacity: 1; background: #fff }
#section0 .swiper-container-horizontal > .swiper-pagination-bullets, #section0 .swiper-pagination-custom, #section0 .swiper-pagination-fraction { bottom: 76px; left: 0; width: 100%; }
#section0 .txt-conts { position: absolute; z-index: 998; width: 76%; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .2s ease-in-out; }
#section0 .txt-conts dl dt h1 { font-size: clamp(70px, 6vw, 100px); margin-bottom: 30px; color: #FFF; line-height: 100%; word-break: keep-all; text-align: center; text-shadow: 10px 10px 20px rgba(0, 0, 0, .1) }
#section0 .txt-conts dl dd p { color: #FFF; font-size: clamp(20px, 2vw, 30px); font-style: normal; font-weight: 500; line-height: 130%; letter-spacing: normal; word-break: keep-all; text-align: center }
#section0 .txt-conts dl dd p > a { display: block; width: 200px; padding: 28px 0 0; cursor: pointer; font-size: 24px; color: #fff; transition: .2s ease-in-out; margin: 0 auto; }
#section0 .txt-conts dl dd p > a > i { position: relative; top: 2px; left: 0; transition: .2s ease-in-out; }
#section0 .txt-conts dl dd p > a:hover > i { position: relative; top: 2px; left: 10px }
#section0 .txt-conts dl dd p > span { display: inline-block; }
#section0 .txt-conts dl dd > a { display: block; color: #FFF; font-size: 24px; font-style: normal; font-weight: 500; line-height: 1.5; letter-spacing: normal; word-break: keep-all; text-align: center }
#section0 .txt-conts a.btn_contact { display: inline-block; color: #FFF; font-size: 24px; font-style: normal; font-weight: 500; line-height: 1.5; margin-top: 30px; letter-spacing: normal; word-break: keep-all; text-align: center; position: relative }
#section0 .txt-conts a.btn_contact::after { display: inline-block; position: absolute; content: ""; width: 0%; height: 1px; background: #ddd; bottom: 0; left: 0; opacity: 0; transition: .2s ease-in-out; }
#section0 .txt-conts a.btn_contact:hover::after { display: inline-block; position: absolute; content: ""; width: 100%; height: 1px; background: #ddd; bottom: 0; left: 0; opacity: 1; }
.title_area { display: inline-block; text-align: center; position: relative; width: 100%; height: 100% }
.title_area .front { display: flex; flex-direction: column; align-items: flex-start; }
.title_area .front dt { }
.title_area .front h1.txt { }
#section0 .title_area .front { flex-direction: column; display: flex; align-items: center; justify-content: center; }
#section0 .about { transition: .5s ease-in-out; opacity: 1 }
#section0.active .about { transition: .5s ease-in-out; opacity: 1 }
/* 재생컨트롤러 */
#section0 .controller { position: absolute; bottom: 100px; left: 0px; color: #fff; width: 100%; text-align: center; z-index: 999 }
#section0 .scroll { position: absolute; bottom: 0; left: 0px; color: #fff; width: 100%; font-size: 11px; text-align: center; transform: translate3d(0, 0, 0); opacity: 1; z-index: 998; }
/********************************** what **********************************/
/**/
#section1 { background: #12093b url(../images/main/main_visual_02.png) center center repeat; background-size: cover; }
#section1 { position: relative; transition: .2s ease-in-out; }
#section1 .txt-conts { width: 100%; display: block; padding: 20vw 0 20vw 40vw; transition: .2s ease-in-out; position: relative; z-index: 1 }
#section1 .txt-conts dl dt h1 { font-size: clamp(34px, 4vw, 66px); /* 최소, 최대, 기본*/ color: #FFF; line-height: 100%; word-break: keep-all; text-align: left; margin-bottom: 60px; text-shadow: 10px 10px 20px rgba(0, 0, 0, .1) }
#section1 .txt-conts dl dd p { color: #FFF; font-size: clamp(20px, 2vw, 30px); font-style: normal; font-weight: 500; line-height: 130%; letter-spacing: normal; word-break: keep-all; text-align: left }
#section1 .txt-conts dl dd p span { display: block }
#section1 .txt-conts dl dd > a { display: inline-flex; color: #fff; font-size: clamp(18px, 2vw, 30px); padding: 10px 30px 14px; background: #09277e; border-radius: 30px; align-items: center; justify-content: center; line-height: 100%; margin-top: 40px; }
#section1 .item { transform: translateX(-40%) translateY(-50%); position: absolute; left: 40%; top: 40%; width: auto; height: auto; min-width: 100%; min-height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#section1 .item img { object-fit: cover; width: 100%; }
/************************* 포트폴리오 *******************************/
#section2 { background: url("../images/main/main_visual_02.png") left top no-repeat; }
#section2 .txt-conts { position: relative; width: 100%; padding: 0; }
#section2 .txt-conts dl { position: relative; width: 1560px; margin: 0 auto; text-align: center }
#section2 .txt-conts dl dt { font-size: 36px; line-height: 110%; margin-bottom: 10px; text-shadow: 0 0 10px rgba(255, 255, 255, .5) }
#section2 .txt-conts dl dt span { display: block }
#section2 .txt-conts dl dd { position: relative; font-size: 24px; line-height: 150% }
#section2 .portfolio_list { margin-top: 60px }
#section2 .swiper-slide { height: 54vh; overflow: hidden; position: relative; top: 0px; transition: .2s ease-in-out; }
#section2 .swiper-slide:hover { box-shadow: 0 0 20px rgba(0, 0, 0, .1); position: relative; }
#section2 .swiper-slide > a { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-shadow: 6px 6px 10px rgba(0, 0, 0, 1) }
#section2 .swiper-slide > a > img { height: 100%; max-height: 100%; object-fit: cover; transition: .3s ease-in-out; }
#section2 .swiper-slide > a .port_tit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 20px; background: rgba(0, 0, 0, 0); display: flex; justify-content: center; align-items: center; transition: .3s ease-in-out; }
#section2 .swiper-slide > a:hover { }
#section2 .swiper-slide > a:hover .port_tit { background: rgba(0, 0, 0, .6); }
#section2 .swiper-slide > a .port_tit > p { text-align: center; color: rgba(255, 255, 255, .0); transition: .3s ease-in-out; margin-top: 30px; }
#section2 .swiper-slide > a .port_tit > p > span { font-size: 20px; display: block; line-height: 120%; transition: .3s ease-in-out; }
#section2 .swiper-slide > a .port_tit > p > em { color: rgba(255, 255, 255, 0); font-size: 16px; display: block; margin-top: 16px; transition: .3s ease-in-out; }
#section2 .swiper-slide > a:hover .port_tit > p { margin-top: 0px; }
#section2 .swiper-slide > a:hover .port_tit > p > span { color: rgba(255, 255, 255, 1); }
#section2 .swiper-slide > a:hover .port_tit > p > em { color: rgba(255, 255, 255, .7); margin-top: 10px }
#section2 .swiper-button-next, #section2 .swiper-button-prev { width: 112px; height: 50px }
#section2 .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 130px }
#section2 .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 130px }
#section2 .swiper-button-prev:after, #section2 .swiper-container-rtl .swiper-button-next:after { content: "" }
#section2 .swiper-button-next:after, #section2 .swiper-container-rtl .swiper-button-prev:after { content: "" }
#section2 .swiper-button-prev:after { line-height: 120%; width: 122px; height: 30px; background: url("../images/common/btn_arrow_left_2px.svg") 10px bottom no-repeat; background-size: 112px 15px; transition: .2s ease-in-out; }
#section2 .swiper-button-prev:hover:after { background: url("../images/common/btn_arrow_left_2px_.svg") 0px bottom no-repeat; background-size: 112px 15px; transition: .2s ease-in-out; }
#section2 .swiper-button-next:after { line-height: 120%; width: 122px; height: 30px; background: url("../images/common/btn_arrow_right_2px.svg") -10px bottom no-repeat; background-size: 112px 15px; transition: .2s ease-in-out; }
#section2 .swiper-button-next:hover:after { background: url("../images/common/btn_arrow_right_2px_.svg") 0 bottom no-repeat; background-size: 112px 15px; transition: .2s ease-in-out; }
#section2 .swiper-button-next, #section2 .swiper-button-prev { position: absolute; bottom: 7%; top: auto; color: #333 }
#section2 .swiper-button-next > em, #section2 .swiper-button-prev > em { position: absolute; color: #121212; font-size: 18px; top: 0px; }
#section2 .swiper-button-prev > em { right: 0 }
#section2 .swiper-button-next > em { left: 0; }
#section2 .swiper-button-prev:hover { color: #000 }
#section2 .swiper-button-next:hover { color: #000 }
#section2 .txt-conts dl dt { transition: .5s ease-in-out .3s; position: relative; }
#section2 .txt-conts dl dd { transition: .5s ease-in-out .3s; position: relative; }
#section2 .txt-conts dl dd em.num { min-width: 90px; display: inline-block; text-align: right; }
#section2 .portfolio_list { transition: .5s ease-in-out .3s; }
#section2.active .portfolio_list { transition: .5s ease-in-out .3s; opacity: 1 }
/****************************** what *********************************/
#section3 { background: #010616 }
#section3 .txt-conts { position: relative; width: 100%; padding: 0; }
#section3 .txt-conts dl { position: relative; width: 1560px; margin: 0 auto; text-align: center }
#section3 .txt-conts dl dt { line-height: 120%; color: #fff; margin: 6vw 0 6vh; font-size: clamp(40px, 4vw, 66px); /* 최소, 최대, 기본*/ }
#section3 .txt-conts dl dt span { display: block }
#section3 .txt-conts dl dt { transition: .5s ease-in-out .3s; position: relative; }
#section3 .tech { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 5vw; }
#section3 .tech ul { position: relative; z-index: 1; display: flex; width: 100%; justify-content: center; align-items: flex-start; gap: 3%; padding: 0 60px; }
#section3 .tech ul li { }
#section3 .tech ul li dl { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; text-align: center; }
#section3 .tech ul li dl dt { color: #5f5fa5; font-size: 50px; transition: .5s ease-in-out .3s; }
#section3 .tech ul li:nth-child(2) dl dt { color: #36a7b1; }
#section3 .tech ul li:nth-child(3) dl dt { color: #b3c421; }
#section3 .tech ul li:nth-child(4) dl dt { color: #f49929; }
#section3 .tech ul li dl dd { color: #fff; font-size: 22px; line-height: 140%; ; transition: .5s ease-in-out .3s; }
#section3 .tech ul li dl dd > img { width: 100%; height: 100%; object-fit: contain }
#section3 .tech .bar { height: 6vw; background: url("../images/main/pic_tech_bg.png") center center repeat-x; position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s ease-in-out .3s; }
/****************************** member *********************************/
#section4 { background: url("../images/main/pic_member_bg.png") center center repeat-x; background-size: cover; }
#section4 .txt-conts { position: relative; width: 100%; padding: 0; }
#section4 .txt-conts dl { position: relative; width: 1560px; margin: 0 auto; text-align: center }
#section4 .txt-conts dl dt { line-height: 120%; color: #fff; margin: 6vw 0 6vh; font-size: clamp(40px, 4vw, 66px); /* 최소, 최대, 기본*/ }
#section4 .txt-conts dl dt span { display: block }
#section4 .txt-conts dl dt { transition: .5s ease-in-out .3s; position: relative; }
#section4 .member { position: relative; width: 100%; padding: 10px 0 12vh; }
#section4 .member ul { position: relative; z-index: 1; display: flex; width: 100%; justify-content: center; align-items: flex-start; gap: 3%; padding: 0 50px; }
#section4 .member ul li { }
#section4 .member ul li dl { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; text-align: center; }
#section4 .member ul li dl dt { color: #5f5fa5; font-size: 50px; transition: .5s ease-in-out .3s; }
#section4 .member ul li:nth-child(2) dl dt { color: #36a7b1; }
#section4 .member ul li:nth-child(3) dl dt { color: #b3c421; }
#section4 .member ul li:nth-child(4) dl dt { color: #f49929; }
#section4 .member ul li dl dd { color: #fff; font-size: 22px; line-height: 140%; transition: .5s ease-in-out .3s; }
#section4 .member ul li dl dd > img { width: 100%; height: 100%; object-fit: contain }
/****************************** footer *********************************/
#section5 { background: #41475d; height: auto !important }
#section5 .footer { position: relative; width: 100%; }
#section5 .footer .ft_area { position: relative; width: 1560px; margin: 0 auto; padding: 60px 0; display: flex; justify-content: center; align-items: flex-start; transition: all 0.2s ease-out; flex-direction: column; gap: 30px }