/*main-visual-swiper*/
main section:last-child { padding-bottom: 15rem; } 
#main-visual { padding-bottom: 0; } 
#main-visual .swiper { width: 100%; height: 968px; background-color: black; position: relative; overflow: hidden; } 
#main-visual .swiper-slide { opacity: 0; transition: opacity 0.5s ease; position: relative; } 
#main-visual .swiper-slide.swiper-slide-active { opacity: 1; } 
/*main-visual img*/
#main-visual .swiper-slide .main-visual-img { z-index: 1; width: 100%; height: 100%; background-size: cover !important; background-position: center; transform: scale(1.2, 1.2); transition: all 0.4s ease; } 
#main-visual .swiper-slide .main-visual-img-mobile{ z-index: 1; width: 100%; height: 100%; background-size: cover !important; background-position: center; transform: scale(1.2, 1.2); transition: all 0.4s ease; } 

#main-visual .swiper-slide.swiper-slide-active .main-visual-img { animation: image-zoom-out 8s 0s forwards; } 

@keyframes image-zoom-out { 
 0% { transform: scale(1.2, 1.2); } 
 100% { transform: scale(1.01, 1.01); } 
 }

#main-visual .swiper-slide.slide-01 .main-visual-img { background-image: url("../img/main-banner-01.jpg"); } 
#main-visual .swiper-slide.slide-02 .main-visual-img { background-image: url("../img/main-banner-02.jpg"); } 
#main-visual .swiper-slide.slide-03 .main-visual-img { background-image: url("../img/main-banner-03.jpg"); } 
#main-visual .swiper-slide.slide-04 .main-visual-img { background-image: url("../img/main-banner-04.jpg"); } 
#main-visual .swiper-slide.slide-05 .main-visual-img { background-image: url("../img/test.jpg"); } 

#main-visual .swiper-slide.slide-01 .main-visual-img-mobile { background-image: url("../img/main-banner-01-m.jpg"); } 
#main-visual .swiper-slide.slide-02 .main-visual-img-mobile { background-image: url("../img/main-banner-02-m.jpg"); } 
#main-visual .swiper-slide.slide-03 .main-visual-img-mobile { background-image: url("../img/main-banner-03-m.jpg"); } 
#main-visual .swiper-slide.slide-04 .main-visual-img-mobile { background-image: url("../img/main-banner-04-m.jpg"); } 
#main-visual .swiper-slide.slide-05 .main-visual-img-mobile { background-image: url("../img/main-banner-05-m.jpg"); } 

.main-visual-img-mobile {display: none;}

/*main-visual img//*/

/*main-visual txt*/
#main-visual .swiper-slide .main-visual-txt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } 

#main-visual .swiper-slide .main-visual-txt .content { display: flex; align-items: center; height: 100%; } 
#main-visual .swiper-slide .main-visual-txt .content .text-wrap { width:100%; max-width: 50rem; } 
#main-visual .swiper-slide .main-visual-txt .content .text-wrap p { line-height: 1.4; max-width: 30rem; color:#666; font-weight: 300; margin-bottom: 3rem; } 

#main-visual .swiper-slide.swiper-slide-active .main-visual-txt .content .text-wrap p { animation: txt-blur 0.8s 0s cubic-bezier(1, 0, 1, 1) forwards; opacity: 0; } 

#main-visual .swiper-slide .main-visual-txt .content .tit { color: #000000; font-size: 5rem; font-weight: 400; margin-bottom: 2.4rem; transition: all 0.4s ease; letter-spacing: -1.5px; line-height: 1.2; } 

#main-visual .swiper-slide .main-visual-txt .content .tit span { font-weight: 700; } 

#main-visual .swiper-slide.swiper-slide-active .main-visual-txt .content .tit { animation: txt-blur 0.8s 0s cubic-bezier(1, 0, 1, 1) forwards; opacity: 0; } 

@keyframes txt-blur { 
 0% { filter: blur(6px); opacity: 0; } 
 100% { filter: blur(0px); opacity: 1; } 
 }

#main-visual .swiper .option { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 

#main-visual .swiper .option > div { position: relative; height: 100%; display: flex; align-items: center; } 

#main-visual .swiper .option > div .f-box { display: flex; } 

#main-visual .swiper .option > div .swiper-parts { display: flex; flex-direction: row; margin-top: 34rem; gap: 2rem; align-items: center; transition: all 0.4s ease; padding-left:1.6rem; } 

#main-visual .swiper .option > div .swiper-parts .swiper-btn { width: 6rem; position: relative; height: 1.6rem; } 

#main-visual .swiper .option > div .swiper-parts .swiper-pagination { position: relative; margin-left: 1rem; } 

#main-visual .swiper-button-next,
#main-visual.swiper-container-rtl .swiper-button-next { background-image: url("../img/swiper-next-btn.svg"); right: 0; left: auto; filter: invert(1); } 

#main-visual .swiper-button-prev,
#main-visual.swiper-container-rtl .swiper-button-prev { background-image: url("../img/swiper-prev-btn.svg"); left: 0; right: auto; filter: invert(1); } 

#main-visual .swiper-button-next,
.swiper-button-prev { position: absolute; top: 0; width: 16px; height: 16px; margin-top: 0; z-index: 10; cursor: pointer; background-size: 16px 16px; background-position: center; background-repeat: no-repeat; } 

#main-visual .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 100%; background: rgba(0,0,0,0.4); opacity: 1; } 

#main-visual .swiper-pagination.swiper-pagination-bullets { display: flex; gap: 2rem; } 

#main-visual .swiper-pagination-bullet-active { opacity: 1; background: #000000; position: relative; } 

#main-visual .swiper-pagination-bullet-active::before { display: block; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 100%; border: 1px solid #000000; } 
/*main-visual txt//*/
/*main-visual-swiper//*/

/*************************/
/*****이 밑으로 지우면 됩니다******/
/*************************/

/*main-about*/
#main-about { } 

#main-about .content { padding: 20rem 0; position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; } 

#main-about .content .blue { position: absolute; top: 50%; transform: translateY(-50%); right: 10%; border-radius: 50%; width: 520px; height: 520px; background: radial-gradient(#40af6e30, transparent, transparent); animation: green 10s infinite; } 

#main-about .content .green { position: absolute; top: 50%; transform: translateY(-50%); left: 15%; border-radius: 50%; width: 480px; height: 480px; background: radial-gradient(#00A4C930, transparent, transparent); animation: blue 15s infinite; } 

@keyframes green { 
 0% { transform: translate(0,-50%); scale: 1; } 
 25% { transform: translate(-50px,-60%); } 
 50% { transform: translate(20px,-70px); scale: 1.3; } 
 70% { transform: translate(100px,-40%); } 
 90% { transform: translate(-20px,-70%); } 
 100% { transform: translate(0,-50%); scale: 1; } 
 }

@keyframes blue { 
 0% { transform: translate(0,-50%); scale: 1; } 
 25% { transform: translate(-100px,20%); } 
 50% { transform: translate(20px,-10%); scale: 1.3; } 
 70% { transform: translate(100px,20%); } 
 90% { transform: translate(120px,-40%); } 
 100% { transform: translate(0,-50%); scale: 1; } 
 }

#main-about .content .f-box { justify-content: center; align-items: center; gap: 10rem; z-index: 2; } 

#main-about .content .line-logo { width: 25%; position: relative; } 

#main-about .content .line-logo img { opacity: 0.8; transition: all 0.4s ease; } 

#main-about .content .line-logo img:hover { opacity: 1; transform: scale(1.06); } 


#main-about .content .txt-box { width: 60%; } 

#main-about .content .txt-box .txt { color: var(--color-g-text); font-size: 3.2rem; font-weight: 600; line-height: 2; margin-bottom: 2rem; } 

#main-about .logo-line { opacity: 0; transition: all 4s ease; } 

#main-about .e-on .logo-line { opacity: 1; } 

#main-about .e-on .drow { stroke-dasharray: 6000; /* 선의 총 길이 */
 stroke-dashoffset: 0; /* 선을 숨김 */
 /* animation: draw 10s ease-in-out forwards; */ } 

/* @keyframes draw { to { stroke-dashoffset: 0; } 
 }*/
/*main-about//*/

/*main-solution*/
#main-solution .content { padding: 16rem 0 18rem; position: relative; } 
#main-solution .content .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #E9F8FF; z-index: -1; } 
#main-solution .content .bg::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 10rem; background: linear-gradient(#ffffff, #ffffff00); } 
#main-solution .content .tit { font-size: 3.4rem; color: var(--sub-color02); margin-bottom: 2.4rem; } 
#main-solution .content .f-box { justify-content: space-between; gap: 6rem; align-items: flex-start; } 
#main-solution .content .f-box .sol-con { position: relative; width: 65%; height: 100%; } 
#main-solution .content .f-box .sol-con .sol-info { display: none; color: var(--sub-color02); } 
#main-solution .content .f-box .sol-con .sol-info img { border-radius: 5px; } 
#main-solution .content .f-box .sol-con .sol-info.active { display: block; } 
/* #main-solution .content .f-box .sol-con .sol-info.active img { animation: reveal 1s cubic-bezier(0.6, 0, 0.24, 0.99) forwards; } */

#main-solution .content .f-box .sol-con .sol-info.active img { /* clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); */
 clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); transition: all 0.4s ease; opacity: 0; } 

#main-solution .content .f-box .sol-con .e-on .sol-info.active img { animation: reveal 1s cubic-bezier(0.6, 0, 0.24, 0.99) forwards; opacity: 1; } 

@keyframes reveal { 
 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); } 
 100% { clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); } 
 }

#main-solution .content .f-box .sol-con .sol-info .tit02 { font-size: 2.2rem; font-weight: bold; margin: 2rem 0 1.6rem; } 

#main-solution .content .f-box .sol-con .sol-info .txt { font-size: 2rem; font-weight: 500; line-height: 1.4; } 

#main-solution .content .f-box .sol-list { position: sticky; top: 1rem; left: 0; width: 45%; } 

#main-solution .content .f-box .sol-list .sol-li-box { padding: 2rem 3rem; background-color: #ffffffaa; margin-bottom: 1.4rem; border-radius: 5px; color: var(--color-g-text); cursor: pointer; transition: all 0.1s ease; } 

#main-solution .content .f-box .sol-list .sol-li-box.on { box-shadow: #a0e6f8b1 0 0 24px; color: var(--sub-color02); background-color: #ffffff; } 

#main-solution .content .f-box .sol-list .sol-li-box img { width: auto; height: 3rem; margin-bottom: 1rem; } 

#main-solution .content .f-box .sol-list .sol-li-box .txt { font-size: 2rem; } 

#main-solution .content .f-box .sol-list .sol-li-box.on .txt { font-weight: 500; } 
/*main-solution//*/

/*main-pride*/
#main-pride .content { padding: 21rem 0 26rem; position: relative; } 

#main-pride .content .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url("../img/main-sec04-bg.jpg"); background-size: cover; z-index: -1; } 
#main-pride .content .f-box { justify-content: space-between; align-items: flex-start; } 

#main-pride .content .f-box .l-box { width: 45%; color: #fff; position: sticky; top: 25%; left: 0; } 

#main-pride .content .f-box .l-box img { max-width: 6.8rem; margin-bottom: 1rem; } 

#main-pride .content .f-box .l-box .tit { font-size: 4rem; line-height: 1.4; margin-bottom: 4rem; font-weight: 600; } 

#main-pride .content .f-box .l-box .txt { margin-bottom: 1.4rem; color: #ffffff; font-size: 1.8rem; } 

#main-pride .content .f-box .r-box { width: 55%; display: flex; flex-wrap: wrap; justify-content: space-between; } 

#main-pride .content .f-box .r-box .pride-list { padding: 7rem 4rem 8.8rem; border-radius: 5px; width: 45%; backdrop-filter: blur(20px); margin-bottom: 7rem; background: linear-gradient(45deg, #ffffff20, #ffffff20); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: space-between; color: #ffffff; position: relative; height: 54rem; transition: all 0.4s ease; } 

#main-pride .content .f-box .r-box .pride-list:nth-child(odd) { transform: translateY(14rem); } 

#main-pride .content .f-box .r-box .pride-list::after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--grd-color-re); opacity: 0; transition: all 0.6s ease; z-index: -1; border-radius: 5px; } 

#main-pride .content .f-box .r-box .pride-list:hover::after { background: var(--grd-color-re); opacity: 0.7; } 

#main-pride .content .f-box .r-box .pride-list .side-txt { position: absolute; top: 0; right: 0; transform: translateX(calc(100% + 1px)); font-size: 1.6rem; letter-spacing: 0.08em; line-height: 1.5; color: rgba(255, 255, 255, 0.5); font-weight: 300; writing-mode: tb-rl; white-space: nowrap; } 

#main-pride .content .f-box .r-box .pride-list .icon { max-width: 5rem; height: auto; margin-bottom: 1rem; } 

#main-pride .content .f-box .r-box .pride-list .con-box .tit { font-size: 2rem; margin-bottom: 2rem; } 

#main-pride .content .f-box .r-box .pride-list .con-box .num-box { display: flex; justify-content: flex-start; margin-bottom: 2.5rem; align-items: flex-end; } 

#main-pride .content .f-box .r-box .pride-list .con-box .num-box .num { font-size: 6rem; letter-spacing: -2px; } 

#main-pride .content .f-box .r-box .pride-list .con-box .num-box .txt { font-size: 2rem; color: #ffffff; margin-left: 0.8rem; } 

#main-pride .content .f-box .r-box .pride-list .con-box .txt { font-size: 1.8rem; color: #ffffff70; font-weight: 300; } 

/*main-pride//*/