/* 초기화 */
html {width:100%; height:100%; overflow-y:scroll;  overflow-x:hidden; scroll-behavior: smooth; scroll-snap-type: none;}
body {width:100%; height:100%; margin:0;padding:0;font-size:0.75em; font-family: 'Montserrat','Pretendard', sans-serif; background:#fff; color:#333;    }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family: sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.container { width: 80%; max-width: 1400px; margin: 0 auto; padding: 0px;}
@media (max-width: 1440px) {
	.container { width: 100%; max-width: 100%;  padding: 0px 5vw;}
}

/* 영상 컨테이너 */
.video-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.video-container video {width: 100%;  height: 100%; object-fit: cover; }
.video-overlay { position: absolute;top: 0; left: 0; width: 100%; height: 100%;background: rgba(0, 0, 0, 0.5); z-index: 2;}

.more{display:inline-block; font-size:15px; color:#fff; padding:10px 50px 10px 20px; border:solid 1px #fff; border-radius:25px; position:relative; margin-top:20px; }
.more svg{width:20px; height:20px; position:absolute; right:20px; top:50%; transform:translate(0,-50%); fill: #ffffff;  }

.sectionBox{width: 100%;  min-height: 100vh; min-height: 100dvh; scroll-snap-align: none; overflow:hidden;}

@media (min-width: 1025px) {
    html {
        /* y축 방향으로 근접했을 때 착 붙는 설정 */
        scroll-snap-type: y proximity; 
    }

    .sectionBox {
        height: 100dvh;      /* 섹션을 화면 높이에 고정 */
        scroll-snap-align: start; /* 섹션의 시작 부분을 상단에 맞춤 */
        scroll-snap-stop: always; /* 스크롤 시 섹션을 건너뛰지 않도록 설정 */
    }
}


.header { position: relative;   display: flex; align-items: center;   justify-content: center;  color: #fff;}
.header img{width:80%; max-width:600px; height:auto; }
.header .content-inner { position: relative; z-index: 3; /* 영상과 오버레이보다 위에 위치 */text-align: center;}
.header .content-inner p.headerP {font-size: 14px; font-weight: 300; letter-spacing: 1px; margin-top:45px; width:80%; max-width:500px; margin:0px auto; word-break:keep-all}
.header .about-grid {margin-top:70px;display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;}
.header .about-grid .card {font-size:16px;padding: 30px;	background: rgba(0,0,0,0.5);border-radius: 10px;transition: transform 0.3s;}
.header .about-grid .card:hover {transform: translateY(-10px);}
.header .about-grid .card h3{font-size:17px;}
.header .about-grid .card p{font-size:14px; color:#aaa; line-height:1.5em; margin-top:20px; word-break:keep-all;}

@media (max-width: 1280px) {
	.header .content-inner p.headerP {font-size: 15px; letter-spacing: 0px; margin-top:25px;}
	.header .about-grid {grid-template-columns: 1fr; gap: 20px; margin-top: 40px; align-items:center; justify-items: center;}
	.header .about-grid .card {font-size:15px;padding:15px 25px; max-width:500px;}
	.header .about-grid .card p{font-size:13px;}
}
@media (max-width: 768px) {
	.section { font-size:14px; }
	.header{background-color:#111;}
	.header_content{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;}
	.header .video-container{height:100vh;}

	.header .about-grid{ padding:20px 0px; margin-top:0px; gap:20px; background-color:#111;}
	.header .about-grid .card{ background:none; padding:30px 0px;  border-bottom:solid 1px #333; }
	.header .about-grid .card:last-child{border:none}
	.header .about-grid .card p{margin-top:10px;}
}





.section_patent{  display: flex; align-items: center;  justify-content: center;   background-color: #f9f9f9;  padding: 40px 0;  box-sizing: border-box; 
	background-color: #eeeeee;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.section_patent h2{font-size:2rem; padding-bottom:15px; color:#111;}
.section_patent .boxdiv {display: grid;grid-template-columns: repeat(5, 1fr);gap: 20px;}
.section_patent img {width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px;  box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: transform 0.3s ease;}
.section_patent img:hover {transform: translateY(-5px);  box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
@media (max-width: 1024px) {
	.section_patent .boxdiv {grid-template-columns: repeat(4, 1fr);gap: 20px;}
}
@media (max-width: 860px) {
	.section_patent .boxdiv {grid-template-columns: repeat(3, 1fr);gap: 20px;}
	.section_patent h2{font-size:20px; }
}
@media (max-width: 640px) {
	.section_patent .boxdiv {grid-template-columns: repeat(2, 1fr);gap: 20px;}
}







.section {display:flex; width:100%; min-height:100vh; min-height:100dvh;  align-items: center;  font-size:16px; }
.section .left{width:500px; text-align:center; padding:0px 40px;  }
.section .left h2{font-size:70px; color:#fff; display:block;}
.section .right{ flex: 1; text-align:center; }
.section .right h3{font-size:2rem; color:#fff;}
.section .right p{ white-space:normal; word-break:keep-all; color:#fff; margin-top:20px; padding:0px 100px; line-height:1.5em;}
.section .right p.preline{white-space: pre-line;}

/* 이미지 3개 박스 */
.image-stack { display: flex;   align-items: center;justify-content: center; padding: 50px 5% 20px 5%; }
.img-box {  position: relative;  width: 20vw;  max-width: 250px;  aspect-ratio: 5 / 7;  border-radius: 20px;  overflow: hidden;     box-shadow: 0 10px 30px rgba(0,0,0,0.2);  transition: all 0.3s ease;  background: #eee; }
.img-box.center {z-index: 2;  width: 23vw;  max-width: 280px;aspect-ratio: 5 / 7.2;margin-left: -5%;  margin-right: -5%; }
.img-box.side { z-index: 1; opacity: 0.9;}

/* 이미지 및 호버 효과는 그대로 유지 */
.img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.img-box:hover img { transform: scale(1.1); }
.img-box:after { content:''; display:inline-block; width:100%; height:100%; background-color:rgba(0,0,0,0.1); position:absolute; left:0px; top:0px; z-index:99; pointer-events: none; }

/*모니터 박스*/
.monitor-wrapper { position: relative; width: 100%;  max-width: 1000px;  margin: 0 auto; background: url('/img/monitor.png') no-repeat center center; background-size: contain; aspect-ratio: 16 / 10; margin-top:30px; }
.monitor-screen {position: absolute;top: 1.5%;   left: 1.1%;   width: 97.1%;  height: 87.3%;   overflow: hidden; background-color:#fff;}
.monitor-screen iframe,
.monitor-screen img { width: 100%;height: 100%; border: none;object-fit: cover; }


@media (max-width: 1440px) {
	.section .left{display:; width:350px; padding:0px 30px 0px 0px;}	
	.section .left img{width:100%; max-width:350px}
	.section .left h2{font-size:50px;}
	.section .right p{padding:0px;}
	.image-stack{display:;}
}
@media (max-width: 1024px) {
	.sectionBox{display:flex; align-items:center; }
	.section {flex-direction:column; padding:50px 0px; min-height:auto; }
	.section .left{padding-bottom:30px; padding-right:0px; width:100%;}
	.section .left img{width:50%; max-width:200px}
	.section .left h2{font-size:50px;}
	.section .right{width:100%;}
	.section .right h3{font-size:25px; padding-top:10px;}
	.section .right p.preline{ max-width:600px; white-space:normal; text-align:center; margin:20px auto 0px auto; }
	.image-stack{max-width:600px;  margin:30px auto; padding:0px;}
	.monitor-wrapper{max-width:600px; margin:30px auto;}
}
@media (max-width: 768px) {
    .img-box {
        width: 30vw; /* 모바일에서는 이미지가 너무 작아지지 않게 폭을 키움 */
        border-radius: 12px; /* 작은 화면에 맞게 굴곡 조절 */
    }
    .img-box.center {
        width: 35vw;
        margin-left: -8%; /* 모바일에서 더 쫀득하게 겹치도록 설정 */
        margin-right: -8%;
    }
}

.section_soundpress{background-color:rgb(235, 95, 48);}
.section_soundpouch{background-color:rgb(11, 109, 146);}
.section_paceacdemy{background-color:#203864;}
.section_spini{background-color:#0074fc;}
.section_artatm{background-color:#27bed1;}
.section_142music{background-color:#111;}
.section_contact{position:relative; background-color:#333;}

.section_contact .container{ position:relative; z-index:99; }
.section_contact .right{text-align:left; font-size:18px; color:#fff; line-height:1.7}
.section_contact .right .headoffice{padding-top:50px; margin-top:50px; border-top:solid 1px #fff;}
.section_contact .right .headoffice h4{font-weight:700; font-size:26px;}
.section_contact .right .headoffice p{padding:0px; margin-top:10px;}
footer {
	background: #222;
	color: white;
	text-align: center;
	padding: 40px 0;
}















/* WOW 애니메이션 시작 전 요소를 숨겨두어 깜빡임 방지 */
.wow {
    /*visibility: hidden;*/
}

/* 모니터 래퍼와 이미지 스택에 살짝 여유를 주어 애니메이션이 돋보이게 함 */
.monitor-wrapper, .image-stack {
    will-change: transform, opacity;
}

/* pre-line 적용 시 엔터값이 너무 크면 조절 */
.preline {
    white-space: pre-line;
    line-height: 1.6;
}