  * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; }

        /* 🔹 상단 헤더 */
        .header {
            display: flex;
            align-items: center;
            background: #fff;
            padding: 24px 15px;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            border-bottom: 1px solid #ddd;
        }

        /* 로고 왼쪽 정렬 */
        .logo {
            margin-right: 0;
			width:15%;
			text-align:right;
        }

        /* 메뉴 컨테이너 중앙 정렬 */
        .menu-container {
            margin: 0 auto;
            text-align: center;
            position: relative;
			width:75%
        }

        /* 메뉴 스타일 */
        .menu {
            list-style: none;
            display: inline-flex;
            justify-content: center;
            padding: 0;
        }

        .menu li {
            margin: 0;
            padding: 15px 30px;
            color: #000;
            cursor: pointer;
            font-size: 18px;
            font-weight: 700;
            position: relative;
            text-align: center;
			width:200px;
			line-height:20px;
        }

        .menu li:hover {
            color: #01518C;
        }

        /* 🔹 하단 밑줄 효과 */
      .menu li::after {
			content: "";
			position: absolute;
			top: calc(100% + 18px); /* 기본 위치 */
			left: 50%;
			width: 0;
			height: 3px;
			background-color: red;
			transition: all 0.3s ease-in-out;
			transform: translateX(-50%);
		}

		/* 활성화된 메뉴 밑줄 (서브메뉴 hover 시 상단으로 조정) */
		.menu li.active::after {
			width: 80%;
			top: calc(100% + 30px)
				
		}
	
        /* 🔹 서브메뉴 */
        .submenu-wrapper {
		display: none;
		position: fixed; /* 기존 absolute에서 fixed로 변경 */
		top: 108px; /* 헤더 아래 고정 */
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		display: flex;
		justify-content: center;
		padding: 20px 0 20px 94px;
		transition: top 0.3s ease-in-out; /* 부드러운 이동 효과 */
	}

        /* 메뉴 오버 시 서브메뉴 표시 */
        .menu li:hover ~ .submenu-wrapper {
            visibility: visible;
            opacity: 1;
        }

        /* 서브메뉴 오버 시 유지 */
        .submenu-wrapper:hover {
            visibility: visible;
            opacity: 1;
        }

        .submenu {
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0;
            margin: 0;
			font-weight:500;
        }

        .submenu li {
            padding: 10px 30px;
            color: #888;
            text-align: center;
            font-size: 16px;
            width: 200px;
			cursor: pointer;
        }

        .submenu li:hover {
           color: #01518C;
        }
		
		.submenu li a {
			text-decoration: none;  /* 기본 밑줄 제거 */
			color: inherit;  /* 부모 요소의 색상 유지 */
			display: block;  /* 전체 영역을 클릭 가능하게 확장 */
			width: 100%;
		
		}

		.submenu li a:hover {
			color: #01518C;  /* 마우스 오버 시 색상 변경 */
			
		}

		/* 기본 링크 스타일 초기화 */
		.submenu li a:link, 
		.submenu li a:visited, 
		.submenu li a:active {
			color: inherit;  /* 방문 여부와 관계없이 부모 색상 유지 */
			text-decoration: none;  /* 모든 상태에서 밑줄 제거 */
		}



        /* 🔹 언어 선택 */
       /* 🔹 언어 선택 박스 스타일 조정 */
.lang-container {
    position: relative;
    width: 10%;
    text-align: right;
}

.lang-button {
    display: flex;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    padding: 10px;
	margin:0 auto;
}

.lang-button span {
    font-size: 24px;  /* 지구본 크기 조정 */
}

/* 🔹 언어 선택 드롭다운 */
.lang-dropdown {
    display: none;
    position: absolute;
    top: 45px;  /* 지구본 아이콘 아래로 위치 */
    left: 0;
    background-color: #333;
    color: white;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    list-style: none;
    padding: 10px 0;
    width: 120px;
    text-align: center;
}

/* 🔹 드롭다운 내부 스타일 */
.lang-dropdown li {
    padding: 10px;
    cursor: pointer;
}

.lang-dropdown li:hover {
    background-color: #555;
}

/* 🔹 마우스 오버 시 드롭다운 표시 */
.lang-container:hover .lang-dropdown {
    display: block;
}


/* 슬라이더영역*/
.slides { position: relative; width: 100%; height: 700px; overflow: hidden;top:116px; }
    .slide { position: absolute; width: 100%; height: 700px; display: flex; align-items: center; transition: opacity 1s ease; opacity: 0; }
    .slide.is-active { opacity: 1; z-index: 10; }
    .slide__content { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
    .slide__text { 
      position: absolute;
      color: white;
      font-size: 2.8em;
      text-align: left;
      z-index: 2;
      white-space: nowrap;
      opacity: 0;
      transform: translateX(100%);
      transition: transform 1.5s ease, opacity 1.5s ease;
      left: 10%;
      top: 40%;
      transform: translateY(-50%) translateX(100%);
	  font-weight:800;
	  line-height:1.8em;
	  
    }
    .slide.is-active .slide__text { opacity: 1; transform: translateY(-50%) translateX(0); }
    .slide__figure { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; }
    .slides-nav { 
      position: absolute; 
      bottom: 20%; 
      left: 10%; 
      z-index: 99; 
      display: flex; 
      gap: 10px; 
      align-items: center; 
      
    
    }
    .slides-nav button { 
      background: none;
      border: none;
      font-size: 1em;
      color: #9b9b9b;
      cursor: pointer;
      position: relative;
      transition: color 0.3s ease;
	  text-align:left;
    }
    .slides-nav button::after {
      content: '';
      display: block;
      width: 60px;
      height: 2px;
      background: #9b9b9b;
      margin-top: 5px;
      transition: background 0.3s ease;
    }
    .slides-nav button:hover, .slides-nav button.active {
      color: #fff;
    }
    .slides-nav button:hover::after, .slides-nav button.active::after {
      background: #fff;
    }

	
/* 슬라이더영역*/	



   /* 1️⃣ 스크롤 시 나타나는 글자 */
      .container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
					
			
        }
	 .container2 {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
	
    }

        .animated-text {
            font-size: 2.2rem;
            font-weight: bold;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
			text-align:center;
			padding:6rem 0 3rem 0 ;
			width:100%
        }

        .animated-text.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* 2️⃣ 이미지 롤링 */
        .rolling-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }

        .rolling-wrapper {
            display: flex;
            gap: 30px;
            width: max-content;
            animation: rolling 40s linear infinite;
        }

        .rolling-wrapper:hover {
            animation-play-state: paused;
        }

        .rolling-item {
            position: relative;
            width: 360px;
            height:460px;
            overflow: hidden;
            cursor: pointer;
            display: inline-block;
            margin-right: 30px;
			
        }
		.rolling-item:hover img {
			filter: brightness(50%);
		}

        .rolling-item img {
             display: block;
				width: 100%;
				height: auto;
        }

     .rolling-item:hover img {
			filter: brightness(50%);
		}
        .rolling-item .overlay {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 22px;
            font-weight: 400;
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .rolling-item:hover .overlay {
            opacity: 1;
        }
		
		
		/* 기본적으로 항상 보이도록 */
		.overlay {
			position: absolute;
			bottom: 10px;
			left: 10px;
			color: #fff;
			padding: 10px 15px;
			font-size: 16px;
			opacity: 1;              /* 항상 보이도록 */
			visibility: visible;     /* 항상 보이도록 */
			transition: opacity 0.3s ease, visibility 0.3s ease; /* 부드럽게 나타나게 */
			
			
		}


	 /* 호버 시 효과 */
    .rolling-item:hover .overlay {
        opacity: 1;
        visibility: visible;
    }

    /* IntersectionObserver로 활성화된 애니메이션 효과 */
    .animated-text {
        opacity: 0;
        transition: opacity 0.5s ease;
		
    }
	
	.
    .animated-text.show {
        opacity: 1;
    }

		.overlay-title {
			font-size: 1.2em;
			font-weight: bold;
			display: block;
		}

		.overlay-desc {
			font-size: 0.9em;
			opacity: 0.9;
		}





        /* 무한 롤링 애니메이션 */
        @keyframes rolling {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
		
		
		
			
	.section-02{
	margin:0;
	padding:0;
	position:relative;
	margin-top:100px;
	}
	
	
		

		
		
		
		
		
    .left-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .main_brand1,
    .main_brand2,
    .main_brand3,
    .main_brand4 {
      overflow: hidden;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease;
    }

    .main_brand1.visible {
      transition-delay: 0.2s;
    }
    .main_brand2.visible {
      transition-delay: 0.4s;
    }
    .main_brand3.visible {
      transition-delay: 0.6s;
    }
    .main_brand4.visible {
      transition-delay: 0.8s;
    }

    .visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    .main_brand1 {
      width: 800px;
      height: 200px;
	  margin-top:-20px;
    }

    .bottom-row {
      display: flex;
      gap: 20px;
    }

    .main_brand2,
    .main_brand3 {
      width: 390px;
      height: 200px;
    }

    .main_brand4 {
      width: 400px;
      height: 420px;
	  margin-top:-20px;
    }

    .main_brand1 img,
    .main_brand2 img,
    .main_brand3 img,
    .main_brand4 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
      display: block;
    }

    .main_brand1:hover img,
    .main_brand2:hover img,
    .main_brand3:hover img,
    .main_brand4:hover img {
      transform: scale(1.1);
    }

    .section-02 a {
      display: block;
      width: 100%;
      height: 100%;
	  
    }
	
    .counter-section {
      background-image: url('https://www.unicor.co.kr/thema/Basic/img/main01.jpg'); /* 배경 이미지 변경 가능 */
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      padding: 80px 20px;
      color: #fff;
      text-align: center;

    }

    .counter-container {
      display: flex;
      justify-content: center;
      gap: 60px;
      flex-wrap: wrap;
    }

    .counter-box {
      flex: 1 1 200px;
      max-width: 220px;
    }

    .counter-box i {
      font-size: 36px;
      margin-bottom: 10px;
      color: #fff;
    }

    .counter-number {
      font-size: 36px;
      font-weight: bold;
    }

    .counter-label {
      font-size: 16px;
      margin-top: 5px;
    }
	

	.counter-number static-text{
      font-size: 36px;
	}



/*상품섹션*/
  .unicor-section {
      padding: 60px 20px;
      max-width: 1280px;
      margin: auto; 
	 
    }

    .unicor-slider .unicor-card {
      background: white;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      margin: 0 10px;
      text-decoration: none;
      display: block;
      height: 520px;
      width: 220px;
    }

    .unicor-image {
      width: 100%;
      height: 360px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      transition: background-image 0.4s ease-in-out;
    }

    .unicor-image[data-hover] {
      background-image: var(--img-default);
    }

    .unicor-card:hover .unicor-image[data-hover] {
      background-image: var(--img-hover);
    }

    .unicor-content {
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 10px;
    }

    .unicor-title {
      font-size: 1.25em;
      font-weight: bold;
      color: #333;
    }

    .unicor-desc,
    .unicor-extra {
      font-size: 1em;
      color: #555;
      line-height: 1.4;
    }

    .unicor-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: crimson;
      color: white;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 12px;
    }

    .slick-prev:before, .slick-next:before {
      content: '';
    }

    .slick-prev, .slick-next {
      background: transparent;
      border: 2px solid #333;
      width: 60px;
      height: 60px;
      z-index: 10;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .slick-prev:hover, .slick-next:hover {
      background: #333;
      color: white;
    }

    .slick-prev:after, .slick-next:after {
      font-size: 30px;
      color: #333;
      display: inline-block;
      line-height: 1;
    }

    .slick-prev:hover:after, .slick-next:hover:after {
      color: #fff;
    }

    .slick-prev:after {
      content: '\2039';
    }

    .slick-next:after {
      content: '\203A';
    }

    .slick-prev {
      left: -120px;
    }

    .slick-next {
      right: -120px;
    }

    a.unicor-card:link,
    a.unicor-card:visited,
    a.unicor-card:hover,
    a.unicor-card:active {
      text-decoration: none;
      color: inherit;
    }
	




.slider-wrapper3 {
  width: 100%; 
  overflow: hidden;
  margin: 0 auto;
}
.slider3 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.slide3 {
  width: 25%;
  flex-shrink: 0;
  height: 550px;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.5s ease;
  overflow: hidden;  /* 이 줄 추가 */
}
.slide3:hover {
  transform: scale(1.03);
}
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  color: #fff;
  width:70%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}
.slide3:hover .overlay {
  top: 45%;
}
.overlay h2 {
  font-size: 2em;
  margin-bottom: 10px;
}
.overlay p {
  font-size: 1em;
  line-height: 1.4;
}
.more {
  display: none;
  margin-top: 20px;
  padding: 10px 25px;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
}
.slide3:hover .more {
  display: inline-block;
}

/* 반응형 */
@media screen and (max-width: 768px) {
  .slide {
    width: 50%;
    height: 50%;
  }
  .overlay h2 {
    font-size: 1.8em;
  }
  .overlay p {
    font-size: 1em;
  }
}




.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 600px;  /* 너비 조절 가능 */
  font-family: 'Noto Sans KR', 'Arial', sans-serif;
}

.notice-list li {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  transition: background-color 0.3s ease;
}

.notice-list li:last-child {
  border-bottom: none;
}

.notice-list li a {
  text-decoration: none;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}

.notice-list li a:hover {
  color: #007bff;  /* 마우스 오버 시 색 변경 */
}

.notice-list li a .date {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  margin-left: 10px;
}

/* 모바일 대응 (선택 사항) */
@media (max-width: 480px) {
  .notice-list {
    max-width: 100%;
  }
  .notice-list li a {
    font-size: 13px;
  }
  .notice-list li a .date {
    font-size: 11px;
  }
}


.news-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  gap: 40px;
  box-sizing: border-box;
}

.news-section {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.news-left {
  flex: 0 0 700px; /* 왼쪽 영역 너비 */
}

.news-right {
  flex: 0 0 450px; /* 오른쪽 영역 너비 */
}

/* 뉴스 리스트 스타일 */
.news-list,
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-title,
.notice-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 15px;
  border-bottom: 2px solid #007bff;
  padding-bottom: 5px;
}

.news-content ul,
.notice-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-content ul li,
.notice-content ul li {
  margin-bottom: 12px;
}

.news-content ul li:last-child,
.notice-content ul li:last-child {
  margin-bottom: 0;
}

.news-content a,
.notice-content a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.news-content a:hover,
.notice-content a:hover {
  color: #007bff;
  text-decoration: underline;
}

.news-more,
.notice-more {
  margin-top: 15px;
}

.news-more a,
.notice-more a {
  font-weight: 600;
  color: #007bff;
  text-decoration: none;
}

.news-more a span,
.notice-more a span {
  margin-left: 6px;
  font-weight: 700;
}

.news-more a:hover,
.notice-more a:hover {
  text-decoration: underline;
}





/*풋터*/
footer {
  background-color: #f7f7f7;
  color: #333;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  padding: 40px 20px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
}

.footer-container img {
  height: 40px;
  margin-bottom: 15px;
}

.footer-container p {
  margin: 4px 0;
  line-height: 1.5;
}

.footer-container > div:first-child {
  flex: 1 1 300px;
  min-width: 280px;
}

.footer-container > div:nth-child(2) {
  flex: 2 1 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.footer-container strong {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 15px;
}

.footer-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-container ul li {
  margin-bottom: 6px;
  color: #555;
  cursor: pointer;
}

.footer-container ul li:hover {
  text-decoration: underline;
  color: #000;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    gap: 40px;
  }

  .footer-container > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
}







