div a:hover {
  text-decoration: none;
}
		
		/* 기본 슬라이더 컨테이너 */
        .slider {
            position: relative;
            width: 100%;
            height: 1250px;
            overflow: hidden;
            cursor: grab;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            touch-action: pan-y;
        }

        .slider.dragging {
            cursor: grabbing;
        }
        
        /* 모든 슬라이드를 감싸는 단일 트랙 */
        .slides-track {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* 개별 슬라이드 요소 */
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            z-index: 1;
        }
        
        /* 활성화된 슬라이드만 보이게 함 */
        .slide.active {
            opacity: 1;
            z-index: 2;
        }

        /* 오버레이 추가 */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            z-index: 3;
            pointer-events: none;
        }

        /* 텍스트 영역 */
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            max-width: 1200px;
            color: white;
            padding: 0 20px;
            z-index: 4;
            text-align: left;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
            pointer-events: none;
        }

        .title {
            font-size: 50px;
            color: #fff;
            font-weight: bold;
            margin-bottom: 20px;
            font-family: 'NanumSquareNeoExtraBold', sans-serif;
        }

        .subtitle {
            font-size: 25px;
            color: #fff;
            line-height: 1.5;
            margin-bottom: 30px;
            font-family: 'NanumSquareNeo', sans-serif;
        }

        .btn1 {
            display: inline-block;
            padding: 18px 30px 15px 30px;
            background-color: #4a5aa5;
            color: #fff;
            font-size: 30px;
            font-weight: 500;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.3s ease;
            text-shadow: none;
            font-family: 'NanumSquareNeoBold', sans-serif;
            pointer-events: auto;
        }

        .btn1:hover {
            background-color: #fff;
            color: #111;
            text-decoration: none;
        }

        .arrow {
            position: absolute;
            top: 50%;
            color: #fff;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0);
            border: none;
            font-size: 40px;
            padding: 8px 12px;
            cursor: pointer;
            z-index: 5;
            transition: background-color 0.3s;
            pointer-events: auto;
        }

        .arrow:hover {
            background-color: rgba(255, 255, 255, 0);
            color: #f3f3f3;
        }

        .arrow.left { left: 10px; }
        .arrow.right { right: 10px; }

        /* Navigation Dots */
        .navigation-dots {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            display: flex;
            gap: 10px;
            pointer-events: auto;
        }

        .dot2 {
            height: 15px;
            width: 15px;
            background-color: #ffffff;
            border-radius: 50%;
            opacity: 0.4;
            transition: opacity 0.3s ease;
            cursor: pointer;
        }

        .dot2.active {
            opacity: 1;
            background-color: #4a5aa5;
        }

        @media (max-width: 1200px) {
            .slider { height: 700px; }
            .title { font-size: 40px; }
            .subtitle { font-size: 25px; }
            .btn1 { font-size: 25px; padding: 10px 24px; }
            .content {
                left: 80px;
                transform: translateY(-50%);
                padding-right: 80px;
            }
        }

        @media (max-width: 768px) {
            .slider { height: 550px; }
            .title { font-size: 35px; }
            .subtitle { font-size: 16px; }
            .btn1 { font-size: 20px; padding: 10px 24px; }
            .content {
                left: 30px;
                padding-right: 50px;
            }
            .arrow { font-size: 24px; }
        }



/* 메인중간 슬라이드 3개이미지 */

.wrapper4{width:100%;background:#fff;padding:60px 0;overflow:hidden;}

.container4{width:100%;margin:0 auto;position:relative;background:#fff;}

.carousel{position:relative;width:100%;overflow:hidden;}

.carousel-inner{position:relative;width:100%;height:620px;margin:0 auto;overflow:visible;}

.track{display:flex;align-items:center;transition:transform 0.6s cubic-bezier(.25,.9,.25,1);will-change:transform;}

.slide1{
flex:0 0 auto;
position:relative;
height:100%;
border-radius:12px;
overflow:hidden;
background:#eee;
transition:transform 0.4s ease,opacity 0.4s ease;
margin:0 25px;
}

.slide1 img{width:100%;height:100%;object-fit:cover;border-radius:12px;user-select:none;-webkit-user-drag:none;}

/* info 박스 - 선명도 개선 */
.info{
position:absolute;left:60px;bottom:40px;width:420px;
background:#4a5aa5;color:#fff;padding:28px 36px;border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.12);
opacity:0;transform:translateY(40px);
transition:opacity 0.6s ease, transform 0.8s cubic-bezier(.22,1,.36,1);
pointer-events:auto;
/* 선명도 개선을 위한 속성 추가 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform-style: preserve-3d;
}

.slide1.active .info{opacity:1;transform:translateY(0);}

.info .eyebrow,.info .title,.info .desc,.info .btn{
opacity:0;transform:translateY(20px);
transition:all 0.6s ease;
/* 텍스트 렌더링 개선 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

.slide1.active .info .eyebrow{opacity:1;transform:translateY(0);transition-delay:0.18s;}
.slide1.active .info .title{opacity:1;transform:translateY(0);transition-delay:0.33s;}
.slide1.active .info .desc{opacity:1;transform:translateY(0);transition-delay:0.48s;}
.slide1.active .info .btn{opacity:1;transform:translateY(0);transition-delay:0.63s;}

.info .eyebrow{
font-size:15px;
letter-spacing:1.2px;
text-transform:uppercase;
margin-bottom:12px;
font-weight:700;
/* 선명한 텍스트를 위한 속성 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.info .title{
font-size:30px;
font-weight:800;
margin-bottom:16px;
line-height:1.2;
/* 선명한 텍스트를 위한 속성 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

.info .desc{
font-size:15px;
line-height:1.7;
margin-bottom:20px;
/* 선명한 텍스트를 위한 속성 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.info .btn{
display:inline-block;
padding:12px 22px;
border-radius:10px;
border:2px solid rgba(255,255,255,0.4); /* 투명도 증가 */
color:#fff;
text-decoration:none;
transition:all .25s ease;
/* 선명한 텍스트를 위한 속성 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: rgba(255,255,255,0.1); /* 기본 배경색 추가 */
}

.info .btn:hover{
transform:translateY(-3px);
background:rgba(255,255,255,0.15); /* 호버시 배경색 강화 */
border-color:rgba(255,255,255,0.6); /* 호버시 테두리 강화 */
}

.nav1{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:80px;width:100%;position:relative;z-index:10;}

.arrow1{
width:48px;
height:48px;
border-radius:50%;
border:1px solid rgba(0,0,0,0.3);
background:#fff;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
transition:all .2s ease;
font-size:25px;
color:#666;
/* 선명한 아이콘을 위한 속성 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.arrow1:hover{background:#f5f5f5;border-color:rgba(0,0,0,0.5);}

.dots{display:flex;gap:12px;}

.dot{width:12px;height:12px;border-radius:50%;background:rgba(0,0,0,0.2);cursor:pointer;transition:all .3s ease;}

.dot.active{background:#4a5aa5;transform:scale(1.2);}

/* 반응형 */
@media (max-width:1024px){
.carousel-inner{height:500px;}
.info{left:30px;bottom:24px;width:360px;padding:20px 26px;}
.info .title{font-size:24px;}
.nav1{margin-top:30px;}
}

@media (max-width:768px){
.wrapper4{padding:30px 0;}
.carousel-inner{height:auto;}
.slide1{margin:0 10px;height:auto;}
.info{
position:relative;
margin-top:-90px;
width:calc(100% - 40px);
left:20px;
bottom:auto;
/* 모바일에서 선명도 보장 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nav1{margin-top:10px;}
}

/* 고해상도 디스플레이를 위한 추가 개선 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.info .eyebrow,
.info .title,
.info .desc,
.info .btn {
-webkit-font-smoothing: subpixel-antialiased;
}
}










/* 메인중간 제작문의 */

.wrapper3 {
  width: 100%;
  background-image: url('../images/mbg.jpg'); /* 배경 이미지 경로 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 고정 배경 */
  position: relative;
  color: #fff;
  padding: 110px 20px;
}

.wrapper3::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.2); /* 어두운 오버레이 */
  z-index: 1;
}

.container3 {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.small-text {
  font-size: 24px;
  color: #fff;
  margin-bottom: 10px;
  font-family: 'NanumSquareNeoBold', sans-serif;
}

.big-phone {
  font-size: 80px;
  font-weight: bold;
  color: #697fe7;
  margin-bottom: 15px;
  font-family: 'NanumSquareNeoBold', sans-serif;
}

.mid-text {
  font-size: 25px;
  color: #fff;
  font-family: 'NanumSquareNeoBold', sans-serif;
}

.quote-btn2 {
  display: inline-block;
  background-color: #4a5aa5;
  color: #fff;
  border: 2px solid #4a5aa5;
  padding: 12px 30px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  width: auto;
  font-family: 'NanumSquareNeo', sans-serif;
  margin-top: 20px; /* height:20px; 대신 마진 사용 */
}

.quote-btn2:hover {
  background-color: #fff;
  color: #111;
  text-decoration: none;
}

@media (max-width: 768px) {
  .big-phone {
    font-size: 40px;
  }

  .mid-text {
    font-size: 16px;
  }

  .small-text {
    font-size: 20px;
  }
}

/* 1. 모든 대상 요소의 초기 상태 (숨김 + 아래로 이동) 정의 */
.small-text,
.big-phone,
.mid-text,
.quote-btn2 {
  /* 애니메이션 효과를 담당하는 transition 속성 */
  transition-property: opacity, transform;
  transition-duration: 0.8s; /* 애니메이션 재생 시간 */
  transition-timing-function: ease; /* 속도 곡선 */
  
  /* 초기 상태: 투명하고 20px 아래에 위치 */
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

/* 2. 순차적인 등장을 위한 지연 시간(Delay) 설정 */
.container3 .small-text {
  transition-delay: 0s;
}

.container3 .big-phone {
  transition-delay: 0.4s; /* 0.2초 뒤에 시작 */
}

.container3 .mid-text {
  transition-delay: 0.8s; /* 0.4초 뒤에 시작 */
}

.container3 .quote-btn2 {
  transition-delay: 1.2s; /* 0.6초 뒤에 시작 */
}

/* 3. JavaScript로 .wrapper3에 .is-visible이 추가되었을 때 적용되는 최종 상태 */
/* .is-visible이 부모에 적용되면 자식 요소들이 최종 상태로 전환됩니다. */
.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0); /* 원래 위치 */
}






/*동영상 부분 */
        .wrapper8 {
            width: 100%;
            margin-top: 50px;
            background-color: #fff;
        }

        /* 3. Container (PC 1600px 제한, 중앙 정렬) */
        .container8 {
            max-width: 1600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* 4. 유튜브 비율 및 스타일 */
        .aspect-16-9 {
            padding-bottom: 56.25%; /* 16:9 비율 유지 */
            height: 0;
            position: relative;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* 그림자 강화 */
            border-radius: 12px;
            overflow: hidden;
        }
        .aspect-16-9 iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Video Wrapper (1200px 제한, 중앙 정렬, Z-index) */
        .video-wrapper {
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 16px; /* 모바일 좌우 여백 */
            position: relative;
            z-index: 20;
        }
        @media (min-width: 640px) { /* 태블릿/PC 좌우 여백 */
            .video-wrapper {
                padding: 0 24px;
            }
        }

        /* 5. 배경 섹션 (#bda3a4) 및 오버랩 로직 */
        .mauve-section {
            background-color: #4a5aa5;
            position: relative;
            z-index: 10;
            width: 100%; /* 좌우 꽉 참 */
            
            /* 모바일 기본 오버랩: 110px 겹침 */
            margin-top: -110px; 
        }

        .mauve-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: #fff;
            
            /* 모바일 콘텐츠 시작 위치: 110px(오버랩) + 30px(여백) = 140px */
            padding-top: 80px; 
            padding-bottom: 50px; /* 하단 패딩 */
            
            /* [수정 사항 2]: 모바일 좌우 패딩을 20px로 약간 늘려서 안정성 확보 */
            padding-left: 0px; 
            padding-right: 0px;
        }


        
        /* 6. 텍스트 스타일 */
        .brand-title {
            font-family: 'NanumSquareNeo', sans-serif;
            font-size: 33px; 
            margin-top: 70px;
            letter-spacing: 0.8px; 
            margin-bottom: 16px; 
            text-transform: uppercase;
        }
        @media (min-width: 640px) { .brand-title { font-size: 28px; } }
        @media (min-width: 1024px) { .brand-title { font-size: 48px; } }

        .brand-desc {
            max-width: 672px; 
            font-size: 16px; 
            font-weight: 300; 
            opacity: 0.9;
            margin-bottom: 40px; 
        }
        @media (min-width: 640px) { .brand-desc { font-size: 18px; } }
        @media (min-width: 1024px) { .brand-desc { font-size: 20px; } }

        /* 7. 버튼 스타일 및 호버 효과 */
        .cta-button1 {
            display: inline-block;
            padding: 12px 32px; 
            font-size: 14px; 
            background-color: #fff;
			color:#333;
            border-radius: 10px; 
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
            transition: all 0.3s ease;
            text-decoration: none;
        } 
		.cta-button1 a {
            font-family: 'NanumSquareNeoBold', sans-serif;
        }
        .cta-button1:hover {
            background-color: #f3f4f6; 
            transform: translateY(-3px) scale(1.02); 
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        @media (min-width: 640px) { .cta-button1 { font-size: 16px; } } 







     /* 하단 포트폴리오 */	
        .wrapper6 {
            width: 100%;
            background-color: #f9f9f9;
            padding: 10px 10px;
            text-align: center;
        }

        .titles {
            color: #111;
            font-size: 32px;
            margin-bottom: 0px;
            font-weight: bold;
            /* font-family:'NanumSquareNeoBold', sans-serif; */
        }
        .subtitle1 {
            color: #555;
            font-size: 17px;
            margin-bottom: 30px;
            /* font-family:'NanumSquareNeoBold', sans-serif; */
        }

        .container6 {
            max-width: 1600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 20px;
            padding: 40px 40px;
            text-align: left;
            border: 1px solid #dbdbdb;
            min-height: 250px; /* 포트폴리오 내용 영역 확보 */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #555;
            font-size: 1rem;
        }

        /* PHP 내용에 대한 플레이스홀더 스타일 */
        .portfolio-placeholder {
            width: 100%;
            text-align: center;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 10px;
            border: 1px dashed #ccc;
        }

        .quote-btn1 {
            display: inline-block;
            background-color: #4a5aa5;
            color: #fff;
            border: 2px solid #4a5aa5;
            padding: 12px 30px;
            border-radius: 10px;
            font-size: 19px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            width: auto;
            /* font-family:'NanumSquareNeoBold', sans-serif; */
            align-self: flex-start;
        }

        .quote-btn1:hover {
            background-color: #fff;
            color: #111;
            text-decoration:none;
        }

        /* 애니메이션 대상 요소의 초기 상태 (투명하고 아래로 30px 이동) */
        .fade-up-item {
            opacity: 0;
            transform: translateY(30px);
            /* 기본적으로 애니메이션 속성을 설정합니다. */
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: opacity, transform; /* 성능 최적화 */
        }

        /* 'is-visible' 클래스가 부모에 추가되면 최종 상태 (불투명하고 원래 위치) */
        .wrapper6.is-visible .fade-up-item {
            opacity: 1;
            transform: translateY(0);
        }

        /* 순차적인 딜레이 적용 (JavaScript 대신 CSS를 활용) */
        /* 1. 포트폴리오 제목 */
        .wrapper6 .titles { transition-delay: 0s; }
        /* 2. 서브 제목 */
        .wrapper6 .subtitle1 { transition-delay: 0.5s; }
        /* 3. 내용 컨테이너 */
        .wrapper6 .container6 { transition-delay: 1.0s; }
        /* 4. 더보기 버튼 */
        .wrapper6 .quote-btn1 { transition-delay: 1.5s; }


        /* ==================================
           반응형
           ================================== */
        @media (max-width: 768px) {
            .titles {
                font-size: 25px;
            }

            .subtitle1 {
                font-size: 15px;
            }

            .container6 {
                padding: 20px 15px;
                border-radius: 12px;
            }
        }