/* BASIC css start */
/* 메인상품진열 타이틀 */
.pro_title_area {text-align:center; padding:100px 0px 50px;}
.pro_title01 {font-size:16px; color:#313131; line-height:1; letter-spacing:-0.3px; font-weight:400; padding-bottom:8px;}
.pro_title02 {font-size:21px; color:#010101; font-family: 'Roboto', sans-serif; font-weight:600; line-height:1; letter-spacing:0.7px;} 

/* 메인이미지 : 시작  */
#header .header_sec03 {margin-bottom:0px !important;}
/* ===== 메인 쇼케이스 ===== */
.main-showcase { width: 100%; margin: 0 auto; margin-bottom:50px; }

.hero-section { position: relative; width: 100%; height: 410px; overflow: hidden;}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; transition: transform 0.6s ease; }
.hero-section:hover .hero-bg { transform: scale(1.05); }
.hero-content { position: absolute; bottom: 95px; left: 40px; z-index: 2; color:#fff;}

.badge-new { display: inline-block; font-size: clamp(9px, 1.3vw, 10px); font-weight: 700; letter-spacing: 2px; border: 1px solid #000; border-radius: 20px; padding: 5px 11px 3px 12px; margin-bottom: 14px; }
.badge-new-top { display: inline-block; font-size: clamp(9px, 1.3vw, 10px); font-weight: 700; letter-spacing: 2px; border: 1px solid #fff; border-radius: 20px; padding: 5px 11px 3px 12px; margin-bottom: 14px; }
.hero-sub { font-size: clamp(11px, 1.7vw, 14px); margin-bottom: 1px; letter-spacing: -0.1px; }
.hero-title { font-size: clamp(24px, 4vw, 46px); font-weight: 500; line-height: 1.3; letter-spacing: -1px; margin-bottom: 8px; color:#fff;}
.hero-tags { font-size: clamp(11px, 1.7vw, 14px); margin-bottom: 24px; font-weight: 500;}
.hero-btn { display: inline-block; font-size: clamp(10px, 1.5vw, 11px); font-weight: 600; letter-spacing: 2px; color: #fff; border-bottom: 1px solid #fff; padding: 7px 10px 6px 10px; text-decoration: none; transition: opacity 0.2s; }
.hero-btn::after { content: '>'; margin-left: 6px; letter-spacing: 0; }
.hero-btn:hover { opacity: 0.7; border: 1px solid #fff; border-radius: 2px; }

.sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2px; gap: 2px; }
.sub-item { position: relative; height: 200px; overflow: hidden; background: #f0f0ec; }
.sub-bg { position: absolute; inset: 0; background-size: cover; background-position: center 5%; transition: transform 0.6s ease; }
.sub-item:hover .sub-bg { transform: scale(1.05); }
.sub-content { position: absolute; bottom: 30px; left: 36px; z-index: 2; }
.sub-label { font-size: clamp(9px, 1.3vw, 10px); margin-bottom: 4px; letter-spacing: -0.2px; }
.sub-title { font-size: clamp(16px, 2.5vw, 20px); font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
.sub-tags { font-size: clamp(9px, 1.3vw, 11px); margin-bottom: 16px; font-weight: 500; }
.sub-btn { display: inline-block; font-size: clamp(8px, 1.3vw, 9px); font-weight: 600; letter-spacing: 2px; color: #222; border-bottom: 1px solid #000; padding: 7px 7px 6px 7px; text-decoration: none; transition: opacity 0.2s; }
.sub-btn::after { content: '>'; margin-left: 6px; letter-spacing: 0; }
.sub-btn:hover { border: 1px solid #a0a0a0; border-radius: 2px; }

/* 모바일 대응 - 선택사항 */
@media (max-width: 768px) {
    .sub-grid { grid-template-columns: 1fr; }
    .hero-content { bottom: 40px; left: 20px; }
    .sub-content { bottom: 20px; left: 20px; }
}
/* 메인이미지 슬라이드 : 끝 */


/* 메인 아이콘정렬 */
.item-wrap .item-cont .info_icon span a {display:inline-block; width:30px; height:30px;}

/*new 버튼*/
.newButton {background-color:rgba(255,255,255,0.8); border-radius:33px; display:inline-block; cursor:pointer; color:#000000;font-family:Arial;font-size:11px; font-weight:bold; padding:6px 11px; text-decoration:none;}
.newButton2 {background-color:#ffffff; border-radius:33px; display:inline-block; cursor:pointer; color:#000;font-family:Arial;font-size:11px; font-weight:bold; padding:6px 11px; text-decoration:none;}
.newButton3 {background-color:#f6cd42; border-radius:33px; display:inline-block; cursor:pointer; color:#000;font-family:Arial;font-size:11px; font-weight:bold; padding:6px 11px; text-decoration:none;}


/* ===== 메인 이벤트 배너 (2026 리뉴얼) ===== */
.main_event {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px max(16px, 2vw) 50px;
}

.main_event__grid {
  display: grid;
  grid-template-columns: minmax(0, clamp(160px, 31.5vw, 400px)) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  align-items: start;
}

/* 왼쪽 배너 스택 */
.banner-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 12px);
  width: 100%;
}

.promo-card {
  position: relative;
  display: block;
  width: 85%;
  min-height: clamp(20px, 18vw, 50px);
  padding: clamp(28px, 5vw, 44px) clamp(12px, 2.2vw, 22px) clamp(28px, 5vw, 42px);
  border: 1px solid #c5c5c5;
  border-radius: 14px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-decoration: none;
  color: #0a0a0a;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.promo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.7) 55%, rgba(255,255,255,0.2) 100%);
  z-index: 0;
}
.promo-card:hover {
  border-color: #828282;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.promo-card__badge {
  position: absolute;
  top: clamp(8px, 1.2vw, 12px);
  left: clamp(10px, 1.4vw, 14px);
  z-index: 1;
  padding: 3px clamp(8px, 1vw, 10px);
  font-size: clamp(9px, 1vw, 10px);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  color: #1a1a1a;
  border: 1px solid #909090;
  border-radius: 99px;
  text-transform: uppercase;
}
.promo-card__title {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0;
  font-size: clamp(0.98rem, 2.2vw, 1.35rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.promo-card__cta {
  position: absolute;
  z-index: 1;
  right: clamp(10px, 1.6vw, 16px);
  bottom: clamp(8px, 1.2vw, 12px);
  font-size: clamp(11px, 1.2vw, 12px);
  font-weight: 400;
  color: #000000;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.promo-card__cta span { color: #444; }

.promo-card--1 { background-image: url(http://ebiospectrum.kr/design/bspectrum/thumnails_2026/2026_file/sub_main-1.png); }
.promo-card--2 { background-image: url(http://ebiospectrum.kr/design/bspectrum/thumnails_2026/2026_file/sub_main-2.png); }
.promo-card--3 { background-image: url(http://ebiospectrum.kr/design/bspectrum/thumnails_2026/2026_file/sub_main-3.png); }
.promo-card--4 { background-image: url(http://ebiospectrum.kr/design/bspectrum/thumnails_2026/2026_file/sub_main-4.png); }

/* 오른쪽 영상 칼럼 */
.video-col { min-width: 0; }

.swiper3 {
  --video-h: clamp(140px, 30vw, 440px);
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-color: transparent;
}
.video-embed {
  position: relative;
  width: 99%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #b9b9b9;
  background: #000;
}
.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.swiper3_txt {
  text-align: left;
  position: relative;
  margin-top: 12px;
  padding: 24px 22px 26px;
  background: #fff;
  border: 1px solid #b9b9b9;
  border-radius: 14px;
}
.swiper3_txt .t01 {
  color: #000;
  font-size: 12px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.swiper3_txt .t03 {
  color: #0a0a0a;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 6px;
  font-family: 'Noto Sans KR', sans-serif;
}
.swiper3_txt .t03--sm { font-size: 17px; }
.swiper3_txt .t04 {
  color: #4a4a4a;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  padding-top: 8px;
}

/* swiper3 화살표 (기존 이미지 화살표 덮어쓰기) */
.swiper3 .swiper-button-prev,
.swiper3 .swiper-button-next {
  width: 30px;
  height: 30px;
  top: calc(var(--video-h) / 2);
  margin-top: 0;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.9);
  background-image: none;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper3 .swiper-button-prev { left: 10px; }
.swiper3 .swiper-button-next { right: 16px; }{
  font-size: 14px;
  font-weight: 700;
}
/* 화살표 본체: border 두 변으로 만든 ‹ › 모양 */
.swiper3 .swiper-button-prev::after,
.swiper3 .swiper-button-next::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border: 0;
  border-top: 1.5px solid #333;
  border-right: 1.5px solid #333;
  background: none;
  font-size: 0;          /* 기본 폰트 크기 무력화 */
  line-height: 0;
}

/* 왼쪽: 위/오른쪽 변을 -135도 돌리면 ‹ 모양 */
.swiper3 .swiper-button-prev::after {
  transform: rotate(-135deg);
  margin-left: 3px;      /* 시각 중심 보정 */
}

/* 오른쪽: 위/오른쪽 변을 45도 돌리면 › 모양 */
.swiper3 .swiper-button-next::after {
  transform: rotate(45deg);
  margin-right: 3px;     /* 시각 중심 보정 */
}

@media screen and (max-width: 700px) {
  .main_event__grid { grid-template-columns: 1fr; }
  .banner-stack { max-width: min(400px, 100%); margin: 0 auto; }
  .video-col { width: 100%; max-width: min(760px, 100%); margin: 0 auto; }
}


/* 메인탭상품 관련 */
.swiper4 {background-color:#fff;}
.swiper4_text {height:40px; font-size:0; width:1220px; margin:0 auto 40px; text-align:center;}
.swiper4_text li {width:100px; margin:0px 5px; display:inline-block; color:#9c9c9c; height:36px; line-height:36px; border:2px solid #ddd; border-radius: 50px; font-size:14px; letter-spacing:-0.5px; padding:0px 14px; text-align:center; cursor:pointer; position:relative;}
.swiper4_text li {-webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden; }
.swiper4_text li.swiper_over {height:36px; line-height:36px; border:2px solid #222; color:#fff; background:#1a1a1a; padding:0px 18px; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden; }
.swiper4_text li.swiper_over .tab_on {width:13px; height:9px; position:absolute; top:36px; left:46%;  z-index:500; background:url(/design/bspectrum/0755flattable/tab_on.gif) no-repeat center center; }
.swiper4 .swiper-pagination4 {display:none;}
.swiper4 .swiper-slide {display:block;height:455px; background-color:#fff;}
/* 메인탭상품 관련 : 시작  */

/* 메인탭상품 관련 : 상품 순위  */
.ranking_number { width: 1220px; text-align: center;}
.ranking_number ul .number { font-size: 15px; color:#313131; width: 230px; height: 30px; float: left; list-style: none; margin-right: 15px; background-color:#fff; padding-top:12px; border-top:1px solid #929292;}
.ranking_number li:last-child {margin-right: 0;}

/*  메인탭상품 미디어쿼리 */
@media screen and (max-width: 1260px) { 
.swiper4_text {width:1020px; } 
.swiper4 .swiper-slide {height:530px;}
}
/* 메인탭상품 관련 : 끝 */



/* 이벤트 슬라이더 02 관련 */
.swiper2 {width:1220px; margin:0 auto; padding-top:0px !important;}
.swiper2 .swiper-slide a {display:block; height:330px; background-repeat:no-repeat; background-position:right top;}
.swiper2 .swiper-pagination-bullet-active {background: #000; }
.swiper2 .swiper-pagination-bullets { padding-top:30px; padding-bottom:50px; text-align:center;}
.swiper2 .swiper-slide-active .swiper2_txt .inner  { opacity: 1; -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2; -webkit-animation-duration:1.5s !important; animation-duration:1.5s !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.swiper2_txt {text-align:left; position:relative; width:1220px; }
.swiper2_txt .inner {float:left; padding-top:65px; width:50%; padding-left:100px;  opacity: 0; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-backface-visibility: hidden;}
.swiper2_txt .inner .t01 {color:#313131; font-size:16px; font-family: 'Noto Sans KR', sans-serif; font-weight:400; letter-spacing:1px; line-height:1;}
.swiper2_txt .inner .t02 {width:8px; height:0px; background-color:#000; font-family: 'Noto Sans KR', sans-serif; float:left; margin:10px 0px; font-size:0px; }
.swiper2_txt .inner .t03 {color:#000; font-size:35px; font-weight:500; font-family: 'Roboto', sans-serif; font-weight: 700; line-height:1;}
.swiper2_txt .inner .t04 {color:#424242; font-size:16px; font-family: 'Noto Sans KR', sans-serif; font-weight:300; line-height:22px; padding-top:25px; letter-spacing: -0.7px;}
.swiper2_txt .inner .t05 a {width:150px; height:40px; border:0px solid #000; line-height:40px; font-family:'Noto Sans KR',sans-serif; font-weight:500; font-size:16px; letter-spacing:1.0px; text-indent:0px; margin-top:20px; background:url(/design/bspectrum/0755flattable/slide_arrow.png) no-repeat; background-position:80% 15px; color:#000;}
.swiper0_txt .inner .t05 a:hover {text-indent:30px; background-position:80% 15px;}


/* 이벤트 슬라이더 02 미디어쿼리 */
@media screen and (max-width: 1260px) {
.swiper2 {width:1020px; }
.swiper2_txt .inner .t03 { font-size:26px; }
}





/* 이벤트 배너 04 관련 */
.event_ban04_area {position:relative; padding:70px 0px 50px;}

/* 이벤트 배너 04 배경이미지 경로 */
.event_ban04 {height:330px; background:url(/design/bspectrum/0755flattable/event_ban04.jpg) no-repeat center center; }
.event_ban04_txt {text-align:left; position:relative; width:1220px; margin:0 auto;}
.event_ban04_txt .inner {float:right; padding-top:90px; width:50%;}
.event_ban04_txt .inner .t01 {color:#000; font-size:14px; font-family: 'Roboto', sans-serif; font-weight:600; letter-spacing:1px; line-height:1;}
.event_ban04_txt .inner .t02 {width:8px; height:2px; background-color:#000; float:left; margin:10px 0px; font-size:0px;}
.event_ban04_txt .inner .t03 {color:#000; font-size:29px; font-weight:300; line-height:1; letter-spacing:-0.2px;}
.event_ban04_txt .inner .t04 {color:#888; font-size:14px; font-weight:300; line-height:22px; padding-top:25px; letter-spacing:-0.2px;}

/* 이벤트 배너 04 미디어쿼리 */
@media screen and (max-width: 1260px) {
.event_ban04 {width:1020px; margin: 0 auto;}
.event_ban04_txt {width:1020px; }
.event_ban04_txt .inner .t03 {font-size:26px;}
}

/* 인스타그램 게시물 */
.instagram {
   width: 90%; height: 80%; margin: 0px auto;
}



#main { position: relative; }
.area_video {width:100%;height:440px;margin:0 auto; background:#f3f3f3; position:relative;}
.inner_video {width:100%;position:relative;margin:0 auto; height:100%;}
.text_video {position:absolute; top:50%; transform:translate(0,-50%); left:70px; text-align:left; letter-spacing:-0.7px; }
.text_video h2 {font-size:25px; color:#000; font-family: 'Roboto', sans-serif; font-weight:normal; margin-bottom:10px; font-weight: 700;} 
.text_video .tit_video1 {font-size:20px; color:#535353; line-height:40px; margin-bottom:30px;}
.text_video .tit_video1 span {font-family: "Noto Sans KR",sans-serif; font-size:34px; color:#000; font-weight:500;}
.text_video .txt_info_video {font-size:17px; line-height:30px; font-weight:300; color:#4e4e4e; font-family: "Noto Sans KR", sans-serif;}
.R_video {position:absolute; top:50%; transform:translate(0,-50%); right:40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.R_video .play_video {width:544px; height:306px;}
#main .visual-bner .bner ul li { float: left; margin-left: 5px; }/-->
.mprd-cm { margin-top: 40px; }
.mprd-cm .tit-prd { margin-top: 60px; text-align: center; }
.mprd-cm .tit-prd span { display: inline-block; text-align: center; min-width: 200px; font-size: 18px; color: #1e1e1e; padding: 12px 15px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; }

/* 상품명 */
.prd-name a {
    font-size: 14px;
    color: #222222;
    font-weight: 500;
    letter-spacing: -0.3px;
    text-decoration: none;
    font-family: 'Noto Sans KR', sans-serif;
}

/* ---------------------------- */

.scroll-downs {
        top: 10px;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 0 0 84%;
        width: 34px;
        height: 55px;
    }
    
    .mousey {
        width: 3px;
        padding: 7px 10px;
        height: 25px;
        border-radius: 25px;
        border: 2px solid #fff;
        box-sizing: content-box;
    }
    
    .scroller {
        width: 3px;
        height: 8px;
        border-radius: 25%;
        background-color: #fff;
        animation-name: scroll;
        animation-duration: 2.2s;
        animation-timing-function: cubic-bezier(.15, .41, .69, .94);
        animation-iteration-count: infinite;
    }
    
    @keyframes scroll {
        
        0% {
            opacity: 0;
        }
        
        10% {
            transform: translateY(0);
            opacity: 1;
        }
        
        100% {
            transform: translateY(15px);
            opacity:0;
        }
        
        @keyframes downup {
            
            0% {
                opacity: 0;
                transform: translateY(0, 100px);
            }
            
            100% {
                opacity: 1;
                transform: translate(0, 0);
            }
        }
        
        @keyframes bounce {
            
            from,
            to {
                margin-bottom: 0;
                animation-timing-function: ease-out;
            }
            
            50% {
                margin-bottom: 8px;
                animation-timing-function: ease-in;
            }
        }
    }

/* BASIC css end */