@charset "utf-8";
#inc03{overflow:hidden;position:relative;width:100%}
#inc03 .tit{margin:200px auto 0;width:var(--mainsize)}s
#inc03 .tit h2, #inc03 .tit p{overflow:hidden;margin-left:12.5%}
#inc03 .tit h2{margin-left:12.5%;font-size:26px;font-weight:600}
#inc03 .tit p{display:flex;flex-direction:column;margin-top:30px;line-height:1.8;font-size:22px;font-weight:400}
#inc03 .text_gsap_wrap{overflow:hidden;margin-top:100px}
#inc03 .text_gsap_wrap div{line-height:1.3;font-size:42px;font-weight:300;white-space:nowrap;color:#55ec0b;}

#inc03 .img_gsap_wrap{/*overflow:hidden;*/position:relative;top:0px;margin:200px auto 0;width:var(--mainsize);height:120vh}
#inc03 .img_gsap_wrap > div{display:flex;justify-content:center;align-items:center}
#inc03 .img_gsap_wrap > div > a{overflow:hidden;position:relative;cursor:none}
#inc03 .img_gsap_wrap img{width:100%;height:100%;transform:translateY(20%) scale(120%);object-fit:cover}
#inc03 .img_gsap_wrap .top_img a:first-child{width:770px;height:996px}
#inc03 .img_gsap_wrap .top_img a:last-child{width:402px;height:517px;margin-left:12.5%}
#inc03 .img_gsap_wrap .mid_img{justify-content: flex-start;}
#inc03 .img_gsap_wrap .mid_img a:first-child{width:402px;height:517px;margin-right:12.5%}
#inc03 .img_gsap_wrap .mid_img a:last-child{width:770px;height:996px}
#inc03 .img_gsap_wrap .bottom_img a:first-child{width:770px;height:996px}
#inc03 .img_gsap_wrap .bottom_img a:last-child{width:402px;height:517px;margin-left:7.5%}
#inc03 .img_gsap_wrap .bottom_img{justify-content: flex-end;margin-top: 100px;align-items: flex-start}
#inc03 .img_gsap_wrap .bottom_img a{width:770px;height:996px}
#inc03 .img_gsap_wrap a .text-overlay { position: absolute; bottom: 20px; left: 20px; color: white; font-size: 32px; font-weight: bold; opacity: 1; transition: opacity 0.3s ease-in-out; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); z-index: 10; pointer-events: none; }
#inc03 .cursor{position:fixed;z-index:9999;width:130px;height:130px;transform:translate(-50%, -50%);transition-property:background, transform;pointer-events:none}
#inc03 .cursor .bg{display:flex;justify-content:center;align-items:center;text-align:center;opacity:0;transform:scale(0);width:100%;height:100%;border-radius:50%;font-size:14px;font-weight:700;transition:all .3s var(--timing);color:#000 !important;background:#55ec0b}
#inc03 .cursor.on .bg{opacity:1;transform:scale(1)}

.text_gsap_wrap {
  overflow: hidden;
  width: 100%;
}

/* 흐르는 텍스트 요소 */
.top_text, .bottom_text {
  /* 줄바꿈 방지 */
  white-space: nowrap; 
  /* 텍스트 내용만큼 너비 확보 */
  width: fit-content;
}

.program-section { color: #fff; padding: 100px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; max-width: 1600px;
    margin: 0 auto;}
.program-container { width: calc(100% - 60px); margin: 0 auto;}
.program-swiper { width: 100%; height: 500px; position:relative;}
.program-swiper .swiper-slide { width: 500px;  display: flex; flex-direction: column; border-radius: 18px; background-color: #333; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
.slide-top-section { background-color: oklch(0.36 0.1 159.42); padding: 30px; height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: white; }
.slide-title { font-size: 2.2rem; font-weight: bold; margin-bottom: 20px; text-align: left; }
.detail-button { display: inline-flex; align-items: center; padding: 10px 25px; border: 2px solid white; color: white; text-decoration: none; font-size: 1rem; font-weight: bold; transition: border-color 0.3s ease, color 0.3s ease; }
.detail-button:hover {border-color:#55ec0b; color: #55ec0b; }
.detail-button svg { margin-left: 8px; width: 18px; height: 18px; }
.slide-image-wrapper { width: 100%; flex-grow: 1; background-color: #ccc; }
.slide-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.program-tagline-wrapper { margin-top: 40px; text-align: center; height: 60px; }
.program-tagline-container { position: relative; display: inline-block; }
.program-tagline {color:#55ec0b; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(15px); font-size: 2rem; font-weight: 500; opacity: 0; transition: opacity 0.4s ease-out, transform 0.4s ease-out; white-space: nowrap; }
.program-tagline.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.program-swiper .swiper-wrapper { touch-action: pan-y; }
.swiper-button-prev, .swiper-button-next{background-image:none;}
.swiper-button-prev, .swiper-button-next{
    /* 버튼 기본 위치 및 크기 조정 */
    width: 48px;  /* 버튼 너비 */
    height: 48px; /* 버튼 높이 */
    border-radius: 50%; /* 원형 버튼 */
    border: 1px solid #55ec0b;
    background-color: rgba(255, 255, 255, 0.3); /* 배경 투명 */
    position: absolute;
    top: 50%;
    cursor: pointer;
    z-index: 10; /* 다른 요소 위에 오도록 */
    display: flex; /* 내부 아이콘 정렬을 위해 */
    align-items: center;
    justify-content: center;
	transition:	0.2s background-color ease;
}

/* 이전 버튼 위치 */
.swiper-button-prev {
    left: 0; /* 원하는 위치로 조정 */
}

/* 다음 버튼 위치 */
.swiper-button-next {
    right: 0; /* 원하는 위치로 조정 */
}

.swiper-button-next::before {
    content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18L15 12L9 6" stroke="%2355ec0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    display: block;
    width: 24px;
    height: 24px;
}

.swiper-button-prev::before {
    content: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 18L9 12L15 6" stroke="%2355ec0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    display: block;
    width: 24px;
    height: 24px;
}


/* 호버 효과 (선택 사항) */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: #55ec0b99; /* 약간의 배경색 */
}


.sns-section { padding: 80px 0; }
.sns-container { width: var(--mainsize); margin: 0 auto; text-align: center; }
.sns-container h2 { font-size: 2.5rem; margin-bottom: 40px; }
.sns-container h2 .point{color: #55ec0b;}
.sns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sns-item { position: relative; width: 100%; padding-top: 100%; overflow: hidden; cursor: pointer; }
.sns-item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sns-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* 이미지가 잘리지 않고 꽉 차도록 설정 */ transition: transform 0.4s ease-out; }
.sns-item a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.4s ease-out; z-index: 1;}
.sns-item a::after {z-index: 1; content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>'); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); opacity: 0; transition: all 0.4s ease-out; }
.sns-item:hover a::before, .sns-item:hover a::after { opacity: 1; }
.sns-item:hover a::after { transform: translate(-50%, -50%) scale(1); }

/* 반응형 [s] */
@media (max-width:1980px){
#inc03 .tit h2{font-size:72px}
#inc03 .tit p{font-size:18px}
#inc03 .text_gsap_wrap div{font-size:42px}
#inc03 .img_gsap_wrap .top_img a:first-child{width:600px;height:760px}
#inc03 .img_gsap_wrap .top_img a:last-child{width:350px;height:450px}
#inc03 .img_gsap_wrap .mid_img a:first-child{width:350px;height:400px}
#inc03 .img_gsap_wrap .mid_img a:last-child{width:670px;height:400px}
#inc03 .img_gsap_wrap .bottom_img a:first-child{width:380px;height:380px}
#inc03 .img_gsap_wrap .bottom_img a:last-child{width:670px;height:380px}
}
@media (max-width:1380px){
#inc03 .tit{width:90%; margin: 100px auto 0;}
#inc03 .text_gsap_wrap div{font-size:32px; line-height:1.4}
#inc03 .img_gsap_wrap{width:95%}
#inc03 .img_gsap_wrap .top_img a:first-child{width:500px;height:680px}
#inc03 .img_gsap_wrap .top_img a:last-child{width:300px;height:400px}
#inc03 .img_gsap_wrap .mid_img a:first-child{width:300px;height:400px}
#inc03 .img_gsap_wrap .mid_img a:last-child{width:560px;height:380px}
#inc03 .img_gsap_wrap .bottom_img a:first-child{width:340px;height:390px}
#inc03 .img_gsap_wrap .bottom_img a:last-child{width:620px;height:430px}
#inc03 .img_gsap_wrap .bottom_img a{width:570px;height:740px}
#inc03 .tit h2{font-size:52px;}
#inc03 .text_gsap_wrap { margin-top: 60px; }
.program-swiper { height: 360px; }
.slide-title{font-size: 24px;}
.program-tagline{font-size: 24px;}
.program-tagline-wrapper { margin-top: 10px;}
.sns-section { padding: 30px 0;}
.sns-grid {grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));}
.program-swiper .swiper-slide{width:400px;}
}
@media (max-width:1024px){
#inc03 .tit{margin-top:150px}
#inc03 .tit h2{margin-left:0px;font-size:38px}
#inc03 .tit p{margin-left:0px;font-size:17px}
#inc03 .text_gsap_wrap{margin-top:30px}
#inc03 .img_gsap_wrap{margin-top:120px}
#inc03 .text_gsap_wrap div{font-size:24px;}
#inc03 .img_gsap_wrap .top_img a:first-child{width:470px;height:640px}
#inc03 .img_gsap_wrap .top_img a:last-child{width:250px;height:350px}
#inc03 .img_gsap_wrap .mid_img a:first-child{width:260px;height:360px}
#inc03 .img_gsap_wrap .mid_img a:last-child{width:510px;height:370px}
#inc03 .img_gsap_wrap .bottom_img a:first-child{width:270px;height:320px}
#inc03 .img_gsap_wrap .bottom_img a:last-child{width:480px;height:360px}
#inc03 .img_gsap_wrap .bottom_img a{width:470px;height:640px}
#inc03 .img_gsap_wrap .bottom_img{margin-top:70px}
#inc03 .cursor{width:120px;height:120px}
#inc03 .img_gsap_wrap a .text-overlay{font-size:22px;}
.program-section{padding:50px 0;}
.program-swiper { height: 310px; }
.program-tagline { font-size: 18px; }
.slide-top-section{padding:20px;}
.sns-container h2{font-size:30px;}
.sns-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.program-swiper .swiper-slide{width:340px;}
}
@media (max-width:768px){
#inc03 .tit{margin-top:110px;text-align:center;width:100%}
#inc03 .img_gsap_wrap{margin-top:80px}
#inc03 .img_gsap_wrap .top_img a:first-child{width:370px;height:500px}
#inc03 .img_gsap_wrap .top_img a:last-child{width:200px;height:300px}
#inc03 .img_gsap_wrap .mid_img a:first-child{width:210px;height:290px}
#inc03 .img_gsap_wrap .mid_img a:last-child{width:460px;height:320px}
#inc03 .img_gsap_wrap .bottom_img a:first-child{width:190px;height:240px}
#inc03 .img_gsap_wrap .bottom_img a:last-child{width:360px;height:270px}
#inc03 .img_gsap_wrap .bottom_img a{width:370px;height:500px}
#inc03 .img_gsap_wrap a .text-overlay{font-size:20px; left:10px;}
.sns-container{width:100%; padding: 0 20px;}
}
@media (max-width:480px){
#inc03 .tit{margin-top:60px}
#inc03 .tit h2{font-size:28px}
#inc03 .tit p{margin-top:25px;font-size:15px}
#inc03 .img_gsap_wrap{margin-top:70px;height:auto}
#inc03 .img_gsap_wrap img{transform:none}
#inc03 .img_gsap_wrap .top_img a:first-child{width:250px;height:350px}
#inc03 .img_gsap_wrap .top_img a:last-child{margin-left:5%;width:145px;height:220px}
#inc03 .img_gsap_wrap .mid_img a:first-child{margin-right:5%;}
#inc03 .img_gsap_wrap .mid_img a:last-child{width:310px;height:190px}
#inc03 .img_gsap_wrap .bottom_img a:first-child{width:170px;height:140px}
#inc03 .img_gsap_wrap .bottom_img a:last-child{margin-left:5%;width:200px;height:190px}
#inc03 .img_gsap_wrap .mid_img { margin-top: 40px; }
#inc03 .img_gsap_wrap .bottom_img{margin-top:40px}
#inc03 .img_gsap_wrap .bottom_img a{width:270px;height:370px}
#inc03 .img_gsap_wrap a .text-overlay{font-size:18px; left:10px;}
#inc03 .cursor{width:110px;height:110px}
#inc03 .cursor .bg{font-size:13px}
.program-section { padding: 20px 0; }
.sns-container h2 { font-size: 21px;}
.sns-section{padding-top:0;}
.slide-top-section {height: 120px;}
.slide-title{ font-size: 18px; margin-bottom:10px;}
.detail-button{font-size:14px; padding: 7px 13px; border: 2px solid white;}
}
@media (max-width:390px){
#inc03 .tit h2{font-size:20px}
#inc03 .text_gsap_wrap div{font-size:16px}
.sns-container h2{margin-bottom:15px;}
.program-swiper .swiper-slide{width:100%;}
}
/* 반응형 [e] */