@charset "UTF-8";@import url("/fnc_css/font/font.css");section { width: 100%; }
.main-wrap { width: 100%; }
#main01 { width: 100%; height: 100vh; background: url("/fnc_images/main/main_bg.jpg") no-repeat center/cover; position: relative; }
.main-swiper { width: 100%; height: 100%; color: #fff; }
/* 1번섹션 */
.main-slide {
  width: 100%;
  height: 100%;
  overflow:hidden;
  opacity: 0;
}
.main-slide-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 100px;
  max-width: 1300px;
  margin: 0 auto;
}
.main-slide-left { color: #fff; width: 600px; flex-shrink: 0; }
.main-slide-right { width: 100%; padding-top: 100px; display: flex; align-items: center; justify-content: center; height: 800px; }
.main-slide-right > img { opacity: 0; }
.swiper-slide-active .main-slide-right > img { animation: mainimg 1s forwards; animation-delay: 0.1s; }
@keyframes mainimg {
 0% { scale: 1.1; opacity: 0; }
 100% { scale: 1; opacity: 1; }
 }

.main-slide-left > h3 { font-size: 45px; line-height: 65px; font-weight: 700; margin-bottom: 30px; position: relative;opacity: 0; }
.main-slide-left > h3::before { content: ""; position: absolute; width: 300px; height: 1px; background-color: #fff; top: 50%; transform: translateY(-50%); left: -320px; }
.main-slide-left > h4 { position: relative; font-size: 18px; line-height: 26px; font-weight: 500; margin-bottom: 20px;opacity: 0; }
.main-slide-left > p { position: relative; font-size: 18px; line-height: 26px; font-weight: 500; margin-bottom: 80px; color: #ccc; opacity: 0;}
.main-slide-left > a { position: relative;opacity: 0; width: 230px; height: 50px; border-bottom: 1px solid #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-weight: 600; transition: all 0.3s; }
.swiper-slide-active .main-slide-left > h4 { animation: maintext 0.8s forwards linear; animation-delay: 0.1s; }
.swiper-slide-active .main-slide-left > h3 { animation: maintext 0.8s forwards linear; animation-delay: 0.3s; }
.swiper-slide-active .main-slide-left > p { animation: maintext 0.8s forwards linear; animation-delay: 0.5s; }
.swiper-slide-active .main-slide-left > a { animation: maintext 0.8s forwards linear; animation-delay: 0.6s; }
@keyframes maintext {
 0% { left: -40px; opacity: 0; }
 100% { left: 0; opacity: 1; }
 }

.main-slide-left > a > img { transition: all 0.3s; }
.main-slide-left > a:hover { background-color: #fff; color: #000; }
.main-slide-left > a:hover > img { filter: invert(1); }
.main-swiper-con { position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px; display: flex; align-items: center; gap: 30px; z-index: 9; }
.main-swiper-con > div { flex-shrink: 0; cursor: pointer; }
.main-swiper-prev { width: 10px; }
.main-swiper-next { width: 10px; }
/* .main-swiper-page { color: #fff; width: fit-content; font-size: 25px; line-height: 36px; vertical-align: super; display: flex; gap: 5px; font-weight: 500; }
 .swiper-pagination-current { display: block; font-size: 18px; transform: translateY(-5px); }
.swiper-pagination-total { display: block; transform: translateY(5px); } */
.autoplay-progress { z-index: 10; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; color: #fff; }
.autoplay-progress span { font-size: 14px; font-weight: 500; }
.autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 3px; stroke: #fff; fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); }

/* 반응형 */
@media (max-width: 1650px){
 .main-slide-left > h3::before { display: none; }
 }
@media (max-width: 1439px){
 .main-slide-wrap { padding: 0 30px; }
 .main-slide-left { width: 500px; }
 .main-slide-left > h3 { font-size: 32px; line-height: 40px; }
 }
@media (max-width: 1279px) { }
@media (max-width: 1023px){
 #main01 { height: auto; padding-bottom: 100px; }
 .main-slide-wrap { padding: 0 20px; flex-direction: column-reverse; justify-content: start; gap: 40px; }
 .main-slide-left { width: 100%; gap: 20px; }
 .main-slide-right { height: 350px; padding-top: 80px; }
 .main-slide-left > h3 { font-size: 28px; line-height: 36px; }
 .main-slide-left > p { margin-bottom: 40px; }
 .main-slide-left > a { height: 45px; width: 200px; padding: 0 10px; }
 .main-swiper-con { bottom:30px;}
 }
@media (max-width: 767px) {
.main-slide-right{height:300px;}
.main-slide-wrap{gap:20px;}
.main-slide-left > h3{margin-bottom:20px;}
.main-slide-left > p{margin-bottom:30px;}
}
@media (max-width: 479px) { }