@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}
.section {color: #fff;}
.sec-header {position: relative; padding: 12rem 0;}
.sec-tag {font-size: 30px;}
.sec-tit {font-size: 5rem; line-height: 1.2; margin-top: 1rem;}
.sec-tit span {color: var(--color-sub02);}
.sec-desc {font-family: var(--font-pretendard); font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, 0.5); margin-top: 2rem;}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1620px) {
  section:not(.visual) .fp-tableCell {padding-right: 50px;}
  .visual .fp-tableCell .inner {padding-right: 50px;}
}
@media (max-width: 1280px){
  section:not(.visual) .fp-tableCell {padding-right: 0;}
  .sec-tag {font-size: 28px;}
  .sec-tit {font-size: 4rem;}
}
@media (max-width: 1024px){
  .sec-desc {margin-top: 1rem;}
}
@media (max-width: 768px){
  .sec-desc {font-size: 16px;}
}
@media (max-width: 576px){
}
@media (max-width: 480px){
}
/* MAIN-COMMON */
/* ===================================================== */
 

/* ===================================================== */
/* MAIN-NAV */ 
.main-nav {display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; height: 100vh; padding: 0 4rem; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 500;}
.main-nav::before {display: block; content: ''; width: 100%; height: 100%; background: rgba(26, 94, 142, 0.85); position: absolute; top: 0; left: 0;}

#main-nav {position: relative; z-index: 1;}
.main-nav li + li { margin-top: 20px; }
.main-nav a {display: block; width: 30px; height: 4px; background: #000; transform: rotate(-45deg);}
.main-nav .active a {background: #fff;}
#main-nav-name {writing-mode: vertical-rl; margin-top: 3rem; position: relative; z-index: 1;}
#main-nav-name li {display: none;}
#main-nav-name li span {font-size: 14px; color: #fff; letter-spacing: 0.5em; white-space: nowrap;}
.main-nav.sec1 #main-nav-name li:nth-of-type(1) {display: block;}
.main-nav.sec2 #main-nav-name li:nth-of-type(2) {display: block;}
.main-nav.sec3 #main-nav-name li:nth-of-type(3) {display: block;}
.main-nav.sec4 #main-nav-name li:nth-of-type(4) {display: block;}

.main-nav #main-nav::after {display: block; content: ''; width: 1px; height: 100vh; background: #3d89be; position: absolute; bottom: calc(100% + 3rem); left: 50%; opacity: 1; transition: opacity 0.3s ease-in-out;}
.main-nav.sec1 #main-nav::after {opacity: 0;}
.main-nav #main-nav-name::before {display: block; content: ''; width: 1px; height: 100vh; background: #3d89be; position: absolute; top: calc(100% + 3rem); left: 50%; opacity: 1; transition: opacity 0.3s ease-in-out;}
.main-nav.footer #main-nav-name::before {top: -30rem;}

.main-nav .top-btn {display: none; position: relative; z-index: 1;}
.main-nav.footer #main-nav li {max-height: 0; overflow: hidden;}
.main-nav.footer .top-btn {display: block; width: 25px; height: 64px; background: url(../images/common/footer-top.png) no-repeat center;}

@media (max-width: 1620px) {
  .main-nav {padding: 0 2rem; width: 60px;}
  .main-nav.sec1::before {top: 100px;}
  #main-nav-name li span {font-size: 12px;}
}
@media (max-width: 1280px) {
  .main-nav { display: none; }
}
/* MAIN-NAV */
/* ===================================================== */


/* ===================================================== */
/* MAIN-VISUAL */
.visual {position: relative; overflow: hidden;}
.visual-slide {height: 100vh; height: 100svh; min-height: 60rem;}
.visual-slide-img { display: block; height: 100%; background: #222 no-repeat center/cover; transform: scale(1.1); transition: 4s linear;} 
.visual-slide-img::before {content: ''; inset: 0; position: absolute; background-color: var(--color-black-a6);}
.visual-03 .visual-slide-img::before,
.visual-04 .visual-slide-img::before {background-color: #000; opacity: 0.55;}
.visual-01 {background-image: url(../images/main/main_visual01.jpg);}
.visual-02 {background-image: url(../images/main/main_visual02.jpg);}
.visual-slide-img video {min-width: 100%; min-height: 100%; object-fit: cover; object-position: center;}

.visual-on .visual-slide-img { transform: scale(1.01); } 

.visual-txt {position: absolute; inset: 50% 0 auto; z-index: 10; font-size: 7rem; transform: translateY(-50%);} 
.visual-txt-slick .slick-list {overflow: visible !important;}
.visual-desc {display: inline-block; position: relative;}
.visual-desc::after {display: block; content: ''; width: 294px; height: 248px; background: url(../images/main/main_txt.png) no-repeat center / contain; animation: fade-in 1.2s ease-out .6s both; position: absolute; top: -19rem; right: -26rem;}
.visual-on .visual-desc .char {--vdd: 2.5s; animation: fade-in .5s ease-out calc(.8s + (var(--vdd) / var(--char-total) * var(--char-index))) both;} 

.visual-dot {display: flex; align-items: center; margin-top: 4rem; animation: fade-in .4s linear 1.6s both; } 
.visual-dot .slick-dots { display: flex; column-gap: 2.5rem; } 
.visual-dot li button { display: flex; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); font-size: 0; transition: .3s;} 
.visual-dot li.slick-active button,
.visual-dot li button:hover {background: #fff;}

.progress-container {width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); margin-right: 3rem; position: relative;}

.pause-play-btn {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: url(../images/common/ico_pause.png) no-repeat center;}
.pause-play-btn.pause {background-image: url(../images/common/ico_play.png); background-position: 60% center;}

.progress-ring-circle {fill: none; stroke: #fff; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 0.2s; transform: rotate(-90deg); transform-origin: 50% 50%;}


/* 스크롤 다운 */
.visual-scroll {position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%);}
.visual-scroll-btn {display: block; width: 24px; height: 36px; font-size: 0; background: url(../images/common/ico_scroll-btn.png) no-repeat center; animation: scroll-line 2.5s linear infinite;}

@keyframes scroll-line { 
  0% { transform: translateY(-80%); } 
  60% { transform: translateY(0); } 
  100% { transform: translateY(-80%); } 
}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1440px) {
  .visual-desc::after {width: 15rem; height: 17rem; top: -11rem; right: -9rem;}
}
@media (max-width: 1280px) {
  .visual-slide {max-height: 80rem;}
  .visual-txt {font-size: 5rem;}

}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
  .visual-txt {font-size: 30px;}
}
@media (max-width: 576px) {
  .visual-desc::after {display: none;}
}
@media (max-width: 480px) {
  .visual-txt {font-size: 24px;}
  .visual-txt br {display: none;}
}
/* MAIN-VISUAL */
/* ===================================================== */


/* ===================================================== */
/* */
.main__about {background-image: url(../images/main/section_bg02.jpg);}
.main__about .inner {padding-bottom: 11rem; box-sizing: border-box;}
.main__about .sec-header {padding: 0 0 8rem;}

.about-list-wrap {text-align: right;}
.about-list {display: inline-flex; text-align: left; position: relative;}
.about-list::before {display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; background: #fff; filter: blur(10rem); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.about-list .about-item {min-width: 36rem; padding: 4rem 7rem; border-radius: 30px; background: #1466f3; transform: skew(0, 12deg) translateX(6rem); position: relative; z-index: 3;}
.about-list .about-item::after {display: block; content: ''; width: calc(100% + 40px); height: calc(100% + 40px); border-radius: 45px; border: 2px solid #1466f3; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.about-list .about-item.nth-2 {background: #0e2854; transform: skew(0, 12deg) translateX(3rem); z-index: 2;}
.about-list .about-item.nth-2::after {border-color: #0e2854;}
.about-list .about-item.nth-3 {background: #23a9f5; transform: skew(0, 12deg) translateX(0); z-index: 1;}
.about-list .about-item.nth-3::after {border-color: #23a9f5;}
.about-list .tit {display: inline-block; padding-bottom: 15px; margin-bottom: 15px; font-size: 4rem; border-bottom: 2px solid rgba(255, 255, 255, 0.2); position: relative; z-index: 1;}
.about-list .desc {font-family: var(--font-pretendard); font-size: 18px; font-weight: 700; position: relative; z-index: 1;}

.slogan {overflow: hidden; width: 100%; position: absolute; bottom: 0; left: 0;}
.slogan .item {display: inline-flex; align-items: center; font-size:11rem; color: #fff; line-height:1; animation: slogan 25s linear infinite; white-space: pre;}
.slogan .item span {display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: #fff;}

@keyframes slogan {
	0% {transform: translateX(0%);}
	100% {transform: translateX(-50%);}
}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1440px) {
  .about-list .about-item {padding: 4rem; min-width: 30rem; transform: skew(0, 12deg) translateX(3rem);}
  .about-list .about-item.nth-2 {transform: skew(0, 12deg) translateX(1.5rem);}
}
@media (max-width: 1280px) {
  .main__about {padding: 10rem 0;}
  .about-list {width: 100%;}
  .about-list .about-item {width: 34%;}
}
@media (max-width: 1024px) {
  .about-list {transform: translateX(-2rem);}
  .about-list .about-item {padding: 4rem 2.5rem; min-width: 15rem;}
  .about-list .about-item::after {width: calc(100% + 20px); height: calc(100% + 20px);}
  .about-list .tit {font-size: 30px;}
  .about-list .desc {font-size: 16px;}
}
@media (max-width: 768px) {
  .about-list {flex-direction: column; transform: translateX(0);}
  .about-list .about-item {width: 100%; transform: skew(0, 6deg) translate(0, 2rem);}
  .about-list .about-item.nth-2 {transform: skew(0, 6deg) translate(0, 1rem);}
  .about-list .about-item.nth-3 {transform: skew(0, 6deg) translate(0, 0);}
  .about-list .desc br {display: none;}
  .slogan .item {font-size: 8rem;}
  .slogan .item span {width: 18px; height: 18px;}
}
@media (max-width: 576px) {
}
@media (max-width: 480px) {
}
/* */
/* ===================================================== */


/* ===================================================== */
/* */
.main__business {background: url(../images/main/section_bg03.jpg) no-repeat center / cover;}
.main__business .inner {height: 100%;}
.main__business .sec-header {padding-bottom: 0;}
.main__business .sec-tit {color: #222; text-align: center;}

/*Tab*/
.business-tab-wrap dl{position:relative; text-align:center; font-size:0;}
.business-tab {display:inline-block; margin-top: 3rem; padding-bottom: 15px; border-bottom: 2px solid var(--color-main);}
.business-tab a {display:block; margin: 0 3rem; padding: 15px 30px; border-radius: 55px; font-size: 23px; color: #222; position: relative; transition: all 0.3s ease-in-out;}
.business-tab a::after {display: block; content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-main); position: absolute; top: 50%; left: -3rem; transform: translate(-50%, -50%);}
.business-tab.nth-1 a {margin-left: 0;}
.business-tab.nth-1 a::after {display: none;}
.business-tab.nth-3 a {margin-right: 0;}

.business-tab.is-active a,
.business-tab a:hover {background: var(--color-main); color: #fff;}


.business-tab-contents {position:absolute; display:none; width:100%; left: 0; top: 180px;}
.business-tab-contents.is-active {display:block;}
.business-tab-contents .tit {font-size: 4rem; color: var(--color-main);}
.business-tab-contents .desc {font-family: var(--font-pretendard); font-size: 23px; font-weight: 600; color: #697281; margin-top: 2rem;}

.main__business-list {display: flex; margin-top: 6rem;}
.main__business-item {flex: 1;}
.main__business-item+.main__business-item {margin-left: 4rem;}
.main__business-item a {display: block; width: 100%; height: 100%; padding: 7rem 7.5rem; border-radius: 20px; background: var(--color-main) no-repeat right bottom; position: relative;}
.main__business-item a::after {display: block; content: ''; width: 74px; height: 14px; background: url(../images/common/ico_arrow02.png) no-repeat center; position: absolute; left: 7rem; bottom: 7.5rem;}
.business-tab-contents.nth-1 .main__business-item:nth-of-type(1) a {background-image: url(../images/main/business_bg01.png);}
.business-tab-contents.nth-1 .main__business-item:nth-of-type(2) a {background-image: url(../images/main/business_bg02.png);}
.business-tab-contents.nth-1 .main__business-item:nth-of-type(3) a {background-image: url(../images/main/business_bg03.png);}
.business-tab-contents.nth-2 .main__business-item:nth-of-type(1) a {background-image: url(../images/main/business_bg04.png);}
.business-tab-contents.nth-2 .main__business-item:nth-of-type(2) a {background-image: url(../images/main/business_bg05.png);}
.business-tab-contents.nth-3 .main__business-item:nth-of-type(1) a {background-image: url(../images/main/business_bg06.png);}
.business-tab-contents.nth-3 .main__business-item:nth-of-type(2) a {background-image: url(../images/main/business_bg07.png);}
.main__business-item p {font-size: 4rem; color: #fff; text-align: left; line-height: 1.2;}
.main__business-item .name {display: inline-block; padding-bottom: 5rem;}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1620px) {
  .business-tab-contents {top: 130px;}
}
@media (max-width: 1440px) {
  .main__business-item+.main__business-item {margin-left: 2rem;}
  .main__business-item a {padding: 5rem;}
  .main__business-item a::after {left: 5rem;}
}
@media (max-width: 1280px) {
  .business-tab-wrap dl {padding-bottom: 60rem;}
  .business-tab a {font-size: 18px; padding: 10px 3rem;}

  .business-tab-contents .tit {font-size: 30px;}
  .business-tab-contents .desc {font-size: 20px;}
  .main__business-item p {font-size: 30px; position: relative; z-index: 1;}
  .main__business-item a {overflow: hidden;}
  .main__business-item a::before {display: block; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0;}
}
@media (max-width: 1024px) {
  .main__business-item a {padding: 3rem;}
  .main__business-item a::after {left: 3rem; bottom: 4.5rem;}
}
@media (max-width: 768px) {
  .business-tab-wrap dl {padding-bottom: 86rem;}
  .business-tab-contents .desc {font-size: 18px;}
  .business-tab-contents .desc br {display: none;}
  .main__business-list {flex-direction: column;}
  .main__business-item .name br {display: none;}
  .main__business-item+.main__business-item {margin-left: 0; margin-top: 2rem;}
  .main__business-item p {font-size: 24px;}
}
@media (max-width: 576px) {
  .business-tab-wrap dl {padding-bottom: 15rem;}
  .business-tab {width: 100%; margin-top: 2rem; padding-bottom: 10px;}
  .business-tab a {margin: 0 1rem; font-size: 16px;}
  .business-tab a::after {display: none;}
  .business-tab a::after {left: -1rem;}
  .business-tab-contents {position: static; padding: 2rem 0;}
  .business-tab-contents .tit {font-size: 24px;}
}
@media (max-width: 480px) {
  .business-tab-contents {top: 230px;}
  .business-tab-contents .desc {font-size: 16px;}
}
/* */
/* ===================================================== */


/* ===================================================== */
/* main__recruit */
.main__recruit {overflow: hidden;}
.main__recruit-bg {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main__recruit-bg .video {min-width: 100%; min-height: 100%; position: relative;}
.main__recruit-bg .video::after {display: block; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0;}
.main__recruit-bg video {position: absolute; width: 160%; height: 160%; top: -50%; left: 0; object-fit: cover;}

.main__recruit .inner {z-index: 1;}
.main__recruit .sec-header {position: relative;}
.main__recruit .sec-header .more-btn {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.main__recruit .sec-header .more-btn a {display: block; padding: 1rem 3rem 1rem 7rem; border-radius: 60px; border: 3px solid #fff; transition: all 0.3s ease-in-out;}
.main__recruit .sec-header .more-btn span {display: inline-block; font-size: 25px; padding-right: 11rem; position: relative;}
.main__recruit .sec-header .more-btn span::after {display: block; content: ''; width: 74px; height: 14px; background: url(../images/common/ico_arrow02.png) no-repeat center / contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.main__recruit .sec-header .more-btn a:hover {border-color: var(--color-sub01); background: var(--color-sub01);}

.recruit-list {display: flex;}
.recruit-list .recruit-item {width: 100%; border-radius: 20px; margin-left: 5.5rem; background: #fff; border: 1px solid #fff; text-align: center; transition: all 0.3s ease-in-out;}
.recruit-list .recruit-item:first-child {margin-left: 0; border-top-left-radius: 0;}
.recruit-list .recruit-item:last-child {border-bottom-right-radius: 0;}
.recruit-list .ico {margin: 3rem 0;}
.recruit-list .ico span {display: inline-block; transition: all 0.3s ease-in-out;}
.recruit-list .recruit-item.nth-1 .ico span {width: 61px; height: 61px; background: url(../images/main/recruit_ico01.png) no-repeat center;}
.recruit-list .recruit-item.nth-2 .ico span {width: 63px; height: 63px; background: url(../images/main/recruit_ico02.png) no-repeat center;}
.recruit-list .recruit-item.nth-3 .ico span {width: 60px; height: 60px; background: url(../images/main/recruit_ico03.png) no-repeat center;}
.recruit-list .recruit-item.nth-4 .ico span {width: 61px; height: 61px; background: url(../images/main/recruit_ico04.png) no-repeat center;}
.recruit-list .tag {width: calc(100% + 2px); transform: translateX(-1px); padding: 1rem; font-size: 20px; background: var(--color-sub01); border-top: 1px solid var(--color-sub01); border-bottom: 1px solid var(--color-sub01); letter-spacing: 0.1em; transition: all 0.3s ease-in-out;}
.recruit-list .tit {margin-top: 2.5rem; font-size: 25px; color: #222; letter-spacing: -0.025em; transition: all 0.3s ease-in-out;}
.recruit-list .desc {margin-top: 2rem; padding: 0 0 4rem; font-family: var(--font-pretendard); font-size: 18px; font-weight: 700; color: #7f7f7f; transition: all 0.3s ease-in-out;}

.recruit-list .recruit-item:hover {background: none; transform: translateY(-6rem);}
.recruit-list .recruit-item.nth-1:hover .ico span {background-image: url(../images/main/recruit_ico01_white.png);}
.recruit-list .recruit-item.nth-2:hover .ico span {background-image: url(../images/main/recruit_ico02_white.png);}
.recruit-list .recruit-item.nth-3:hover .ico span {background-image: url(../images/main/recruit_ico03_white.png);}
.recruit-list .recruit-item.nth-4:hover .ico span {background-image: url(../images/main/recruit_ico04_white.png);}
.recruit-list .recruit-item:hover .tag {background: none; border-color: #fff;}
.recruit-list .recruit-item:hover .tit,
.recruit-list .recruit-item:hover .desc {color: #fff;}

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1440px) {
  .recruit-list .recruit-item {margin-left: 3.5rem;}
}
@media (max-width: 1280px) {
  .main__recruit {padding: 3rem 0 15rem;}
  .recruit-list .tag {font-size: 18px;}
  .recruit-list .tit {font-size: 20px;}
  .recruit-list .desc {font-size: 16px;}
}
@media (max-width: 1024px) {
  .main__recruit .sec-header {padding-bottom: 5rem;}
  .main__recruit .sec-header .more-btn a {padding: 1rem 3rem;}
  .main__recruit .sec-header .more-btn a span {font-size: 20px;}

  .recruit-list {flex-wrap: wrap;}
  .recruit-list .recruit-item {width: calc(50% - 1.5rem); margin-left: 3rem; margin-bottom: 3rem;}
  .recruit-list .recruit-item.nth-3 {margin-left: 0;}
  .recruit-list .recruit-item:hover {transform: translateY(0);}
}
@media (max-width: 768px) {
  .main__recruit .sec-header .more-btn {top: 30%;}
}
@media (max-width: 576px) {
  .main__recruit .sec-header .more-btn a span {font-size: 18px;}
}
@media (max-width: 480px) {
  .main__recruit .sec-header {padding-bottom: 10rem;}
  .main__recruit .sec-header .more-btn {top: 90%;}
  .recruit-list .recruit-item {width: 100%; margin-left: 0;}
}
/* main__recruit */
/* ===================================================== */