.visual{height:100vh; position: relative;}
.visual-box{ position:relative; height:100%; overflow:hidden; }
.visual-box > ul{ height:100%; list-style:none; margin:0; padding:0; }
.visual-box > ul > li{ position:absolute; inset:0; opacity:0; z-index:0; transition:opacity .9s ease; }
.visual-box li.leaving {opacity: 0;  transition: opacity .8s ease;  }
.visual-box > ul > li.active{ opacity:1; z-index:1; }
.visual-box img,.visual-box video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* 텍스트 위치 */
.visual-box .txt{ position:absolute; left:10%; top:40%; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35); z-index:2; }
.visual-box .txt p{ font-size:clamp(18px,2.6vw,28px); margin:0 0 8px; }
.visual-box .txt span{display:block;  font-size:clamp(28px,5vw,64px); font-weight:700; }

/* 텍스트 효과(등장/퇴장) */
.fx-line{ display:inline-block; opacity:0; transform:translateY(16px);
          transition: transform .85s cubic-bezier(.22,1,.36,1), opacity .85s; will-change:transform,opacity; }
.visual-box li.active .fx-line.show{ opacity:1; transform:translateY(0); }
.visual-box li.leaving .fx-line.show{ opacity:0; transform:translateY(-8px); transition-duration:.45s; }


.visual-box .v-dots{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); display:flex; gap:10px; z-index:3; }
.visual-box .v-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; }
.visual-box .v-dots button[aria-current="true"]{ background:#fff; }

.visual-box {
  position: relative;
}

.v-prev, .v-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 10px 14px;
  cursor: pointer;
  border: none;
  font-size: 20px;
  border-radius: 4px;
}

.v-prev { left: 20px; }
.v-next { right: 20px; }



/*소개*/
.intro {
  position: relative;
  background: #fff;
  overflow: hidden;
  padding: 50px 0 120px 0;
}

/* 흐르는 배경 글자 */
.bg-text {
  width: 200%;
  font-size: 12rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  margin-top:40px;

  animation: scrollText 30s linear infinite;
}

@keyframes scrollText {
  from {
    transform: translateX(0) translateY(-50%);
  }
  to {
    transform: translateX(-50%) translateY(-50%);
  }
}


/* 소개 */
.intro-list {
  position: relative;
  display: flex;
  justify-content: space-around;
  gap: 40px;
  z-index: 2; /* 배경 글자 위에 나오게 */

}

.intro-list li a h3{
	font-size:2.4rem;
	margin-top:30px;
	font-weight: 600;
}
.intro-list p{
	color:#444; 
	font-size:1.6rem; 
	font-weight: 400;
	margin-top:20px;
}

.intro-list li a span{
	display: block;
	margin-top:50px;
	font-size:1.5rem; 
	transition: transform 0.3s ease, color 0.3s ease;
}

.intro-list li a:hover span{
	color:#0e58a4;
	transform: translateX(3px);
}


.intro-list li a img{
	transition: transform 0.6s ease;
}

.intro-list li a:hover img, .intro-list li a:focus img{
	 transform: rotate(360deg);
}




/* 제품소개 */
.products {
  display: flex;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.products .product{
  position:relative;
  flex:1 1 0;
  min-width:0;
  transition:flex .55s ease;
  overflow:hidden;
}

.products:hover .product{ flex:1; } 
.products .product:hover{ flex:1.2; } 

.products .product > a{
  position:relative;
  display:block;
  width:100%; height:100%;
  background:#000; overflow:hidden;
}

/* 이미지 풀커버 + 확대 효과 */
.products .product img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1); 
  transition: transform .45s ease, opacity .35s ease;
}
.products .product:hover img{
  transform:scale(1.01);           /* 살짝 확대 */
  opacity:.85;                      /* 필요시 톤다운 */
}



.products .product .txt {
	font-size: 1rem;
	opacity: 0.9;
	position: absolute;
	bottom: 50px;
	left:50px;
	color: #fff;
	transition: all 0.4s ease;
	z-index:2;
	font-size:3rem;
	font-weight:700
}

.products .product:hover .txt{
	transform: translateY(100%);
	bottom: 150px;
}

.products .product .tag {
   display:none;
  transition: transform 0.4s ease, opacity 0.4s ease;

}
.products .product:hover .tag {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top:20px;
}

.products .product .tag li {
	border:1px solid #fff;
	color: #fff;
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 1.6rem;
}
.products .product .tag li:before{
	content:'#'
}


/* ===== Info Section ===== */
.info {
  padding: 120px 0;
  background: #fff;
  font-family: 'Pretendard', sans-serif;
}

.info .container{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap:50px;
}


/* 왼쪽 뉴스 */
.info .news{
	position: relative;
}
.info .news h2 {
  font-size: 4rem;
  font-weight: 800;
  border-bottom: 4px solid #000;
  padding-bottom: 12px;
}
.info .news h2::first-letter {
  color: #1075d8;
}


.news-list li{ 
	border-bottom:1px solid #dbdbdb 
}

.news-list li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:30px 12px; 
  width:100%;
  box-sizing:border-box;
  min-width:0;
}

.news-list li a:hover{ 
	background:#f6f9fb
}


/* 2) 제목: 한 줄 말줄임 + 수축 허용 */
.news-list li a p{
  flex:1 1 auto; 
  min-width:0; 
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
	font-size:1.8rem;
}

/* 3) 날짜: 고정폭/아이콘 크기 명시, 절대배치 금지 */
.news-list li a span{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:1.6rem;
  color:#666;
  display:inline-flex;
  align-items:center;
  background:url('/assets/img/main/ico_news_date.png') no-repeat 0 50%;
  background-size:16px 16px; 
  padding-left:22px;  
}

/* 4) 안전망(섹션 단위). 원인 해결 후에도 남을 때만 유지 */
.info .news{ overflow-x:hidden; }

.news .more{
	position: absolute;
	right:0;
	top:5px;
}

.news .more:hover { transform: rotate(90deg); }

/* 오른쪽 퀵버튼 (문의하기 / 오시는길) */
.pr {
  background:url('/assets/img/main/bg_pr.png') no-repeat;
  position:relative;
   background-size:cover;  
}
.pr:before{display:block; content:''; width:50px; height:50px; background:url('/assets/img/main/ico_movie.png') no-repeat; background-size:cover;  position:absolute; bottom:30px; left:30px;}
.pr a {
  display: block;
  padding: 50px 32px;
  color: #fff;
  height:100%;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  min-height:350px;
}
.pr a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.pr a p {
  margin: 0 0 10px;
  font-size: 3rem;
  font-weight: 600;
}
.pr a span {
  font-size: 1.6rem;
  line-height: 1.5;
  opacity: 0.9;
}





/* =============== VALUE =============== */
.value{
  position: relative;
  padding: 120px 0 60px;
  color:#fff;
  background:url('/assets/img/main/bg_value.png') center/cover no-repeat; 
}


.core-value{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* 왼쪽 타이틀 / 오른쪽 카드 */
  gap: 40px;
  align-items: start;
  position:relative;
}

/* 왼쪽 큰 타이틀 */
.core-value h3{
  font-size: clamp(2.4rem, 2vw + 2.2rem, 6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}
.core-value h3::before{
  content:"동방유통";
  display:block;
  font-size: clamp(1.2rem, .7vw + 1rem, 2.2rem);
  font-weight: 600;
  opacity:.9;
  margin-bottom: .4em;
}

/* 더보기 (+) 버튼 */
.core-value a.more{
	width: 90px; 
	height: 90px;
	font-size:0;
	text-indent:-999rem;
	background:url('/assets/img/main/ico_value_more.png') no-repeat; 
	transition: transform .2s ease, background .2s ease;
	position:absolute;
	left:0;
	bottom:0
}

.core-value > a:hover{ transform: rotate(90deg); }


.core-value ul{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.core-value ul li{
  position: relative;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
  padding: 28px 30px;
  min-height: 160px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.core-value ul li:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* 카드 내부 텍스트 (영문/국문) – 원하는 텍스트 넣기 */
.core-value ul li::before{
  content: attr(data-en);                 /* data-en으로 영문 레이블 설정 가능 */
  display:block;
  font-size: 1.6rem;
  font-weight:200;
  opacity:.85;
  margin-bottom: 8px;
}
.core-value ul li{
  font-size: 3rem;
  font-weight: 700;
}

.core-value ul li::after{
  content:"";
  position:absolute; right:25px; bottom:25px;
  width:40px; height:40px; opacity:.9;
  background-size: contain; background-repeat:no-repeat;
}
.core-value ul li:nth-child(1)::after{ background-image:url('/assets/img/main/ico_value_01.png'); }
.core-value ul li:nth-child(2)::after{ background-image:url('/assets/img/main/ico_value_02.png'); }
.core-value ul li:nth-child(3)::after{ background-image:url('/assets/img/main/ico_value_03.png'); }
.core-value ul li:nth-child(4)::after{ background-image:url('/assets/img/main/ico_value_04.png'); }

/* ---------------- Partners strip ---------------- */
.partners{
  margin-top: 40px;
}
.partners ul{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
.partners ul li{
  height: 58px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% 50%;
  font-size:0;
  text-indent:-9999px; 
  overflow:hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

/* 각 로고 이미지 경로 (프로젝트 경로에 맞게 교체) */
.partners .part_01{ background-image:url('/assets/img/main/img_partners_01.png'); }
.partners .part_02{ background-image:url('/assets/img/main/img_partners_02.png'); }
.partners .part_03{ background-image:url('/assets/img/main/img_partners_03.png'); }
.partners .part_04{ background-image:url('/assets/img/main/img_partners_04.png'); }
.partners .part_05{ background-image:url('/assets/img/main/img_partners_05.png'); }
.partners .part_06{ background-image:url('/assets/img/main/img_partners_06.png'); }
.partners .part_07{ background-image:url('/assets/img/main/img_partners_07.png'); }
.partners .part_08{ background-image:url('/assets/img/main/img_partners_08.png'); }

/* ---------------- Responsive ---------------- */




/* 반응형 */


@media (max-width: 1200px){
	.core-value{ grid-template-columns: 1fr; }

	.value > a{ grid-column: 1 / 2; place-self: start end; }
}

@media (max-width: 1024px) {
	.visual{height:60vh}
	.info .container {grid-template-columns: 1fr;}
	.pr{background-image:url('/assets/img/main/bg_pr2.png')}
	.pr a span {display: block;}
	.pr:before{left:85%}
}


@media (max-width: 960px){ 
	.bg-text{font-size:8rem;}
	
	.products{
    display: grid;                         /* flex → grid 전환 */
    grid-template-columns: repeat(2, 1fr); /* 2열 */
    gap: 0;                                /* 필요하면 간격 조절 */
    height: auto;                          /* 70vh 해제 */
    overflow: visible;
  }
  .products .product{
    flex: none;            /* flex 영향 제거 */
    min-width: auto;
    aspect-ratio: 4 / 5;   /* 카드 비율 통일 (원하면 삭제 가능) */
    height: auto;          /* aspect-ratio 쓰면 height 자동 */
  }
  .products .product > a{ height: 100%; }
  .products .product img{ height: 100%; object-fit: cover; }

  /* 모바일/태블릿에선 카드 확장 효과 비활성(터치 환경) */
  .products:hover .product,
  .products .product:hover{ flex: none; }
  .products .product:hover img{ transform: scale(1.02); opacity: .9; } /* 살짝만 */
  
  .products .product .txt{left:10px}

	.value{padding: 69px 0 60px}
	.core-value ul{gap:12px;}
	.core-value a.more{right:15px;; top:-25px; left:unset; bottom:unset;}
	
	.partners ul{ grid-template-columns: repeat(4, 1fr); }

}



@media (max-width: 600px) {
	.visual{height:50vh}
	
	.products .product:hover .tag{display:none;}
	.products .product:hover .txt{bottom: 100px;}
	
	.intro{padding:8px 0 30px 0}
	.intro-list{gap:20px;}
	.intro-list a{display:block; text-align:center;}
	.intro-list p, .intro-list li a span{display:none;}
	.intro-list li a h3{font-size:1.8rem;}
	

	.pr a{padding:20px }
	.partners ul{ grid-template-columns: repeat(2, 1fr); }
 } 




@media (max-width: 375px) {
	
}