@charset "utf-8";

/* =========================================
   1. 기본 설정 및 변수
   ========================================= */
:root {
  --bg: #fff;
  --ink: #1b1b1b;
  --gold: #C9BCA0;       /* 강조 텍스트 색상 */
  --olive-bg: #7D825B;   /* Generations 섹션 배경색 */
  --olive-text: #ffffff;
  
  --font-serif: "Noto Serif Display", serif;
  --font-sans: "Noto Sans KR", sans-serif;

  --wrap: 800px;
  --wrap-narrow: 540px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* 이미지 반응형 기본 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   2. 레이아웃 & 타이포그래피 유틸리티
   ========================================= */
.bth-wrap {
  width: min(var(--wrap), 100% - 40px);
  margin: 0 auto;
  position: relative;
}

.bth-wrap--narrow {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
}

/* 섹션 공통 여백 */
.bth-sec {
  padding: 100px 0;
}

/* 타이틀 스타일 */
.bth-h2 {
  font-family: var(--font-serif);
  color: var(--gold);
  font-size: clamp(28px, 4vw, 32px);
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 400;
}

/* 본문 스타일 */
.bth-p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: #212121;
  margin: 0 0 16px;
  font-weight: 300;
  word-break: keep-all;
}

/* 소제목 스타일 */
.bth-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #212121;
  margin-bottom: 15px;
  font-weight: 700;
}
#bthRoot .bth-sec:nth-of-type(3) {
    padding-top: 20px !important;
}

#bthRoot .bth-sec:nth-of-type(6) {
    padding-top: 20px !important;
}
/* =========================================
   3. 섹션별 스타일
   ========================================= */

/* --- Hero Section (지도 배경) --- */
/* --- 히어로 섹션 스타일 수정 --- */
.bth-hero--heritage {
  position: relative;
  width: 100%;
  height: 0vh;       /* 높이 설정 */
  min-height: 800px;
  background-color: #000;
  overflow: hidden;
  display: flex;
  align-items: center;    /* 세로 중앙 */
  justify-content: center; /* 가로 중앙 */
}

/* 비디오가 배경으로 꽉 차게 설정 */
.bth-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1; /* 가장 아래 */
}

/* 어두운 오버레이 */
.bth-hero__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2; /* 비디오 위 */
}

/* 텍스트: 비디오 위 정중앙 배치 */
.bth-hero__title {
  position: relative;
  z-index: 3; /* 오버레이 위 */
  font-family: var(--font-serif);
  font-size: clamp(50px, 8vw, 60px);
  color: #C9BCA0;
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.bth-sec--history .bth-h2,
.bth-sec--history .bth-sub,
.bth-sec--history .bth-p,
.bth-sec--history .bth-history-brand {
  color: #7E8257 !important;
}


.bth-split {
  display: flex;
  gap: 60px;
  align-items: center; /* 텍스트와 이미지 세로 정렬 맞춤 */
}
/* 텍스트와 이미지의 비율이 일정하게 유지되도록 보완 */
.bth-split__text, 
.bth-split__media {
  flex: 1;
}

/* --- The Company (WATCH FULL VIDEO) 섹션 스타일 --- */
.bth-sec--company {
    background-color: #F5F2EE; /* 공식 사이트 배경색 */
    padding: 100px 0;
   
}

.bth-company-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bth-company__brand {
    font-family: var(--font-serif);
    font-size: 52px;
    color: #7E8257; /* 요청하신 폰트 색상 */
    margin: 0;
    line-height: 1;
}

.bth-company__title-box .bth-sub {
    color: #7E8257;
    margin-bottom: 10px;
}

/* WATCH FULL VIDEO 버튼 디자인 */
.bth-btn-video {
    display: inline-block;
    padding: 18px 45px;
    border: 1px solid #7E8257;
    color: #1b1b1b;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.15em;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
}

.bth-btn-video:hover {
    background: #7E8257;
    color: #fff;
}

.bth-company__action a{font-size: 12px;}

/* --- 기존 History 섹션 텍스트 색상 수정 --- */
.bth-sec--history .bth-h2,
.bth-sec--history .bth-sub,
.bth-sec--history .bth-p {
    color: #7E8257 !important;
}



/* --- History Section (베이지 배경) --- */
.bth-sec--history {
  background-color: #F5F2EE; /* 요청하신 색상 */
}
.bth-history-img { margin-bottom: 30px; }
.bth-history-brand {
  font-family: var(--font-serif);
  font-size: 24px;
  margin-bottom: 20px;
  display: block;
}

/* --- Split Layout (좌우 배치) --- */
/* 1. 기본 레이아웃: 이미지와 텍스트 세로 중앙 정렬 */
.bth-split {
  display: flex;
  gap: 60px;
  align-items: center; /* ✅ 세로 중앙 정렬 핵심 */
  width: 100%;
}

.bth-split__text, 
.bth-split__media {
  flex: 1;
  min-width: 0; /* flex 박스 내부 요소 삐져나옴 방지 */
}

/* 2. 반전 레이아웃 (텍스트 좌 / 이미지 우) */
.bth-split--reverse {
  flex-direction: row-reverse;
}
.bth-split__text, .bth-split__media { flex: 1; }
.bth-split--reverse { flex-direction: row-reverse; }



/* --- Footer CTA (전체 너비 이미지) --- */
.bth-fullimg {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.bth-fullimg > img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bth-fullimg__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}
.bth-fullimg__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 20px;
}
.bth-btn-outline {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.1em;
  margin: 0 10px;
  transition: 0.3s;
}
.bth-btn-outline:hover {
  background: #fff;
  color: #000;
}


/* --- Generations Section (올리브 배경) --- */
.bth-sec--olive {
  background-color: var(--olive-bg); /* #7D825B */
  color: var(--olive-text);
  padding: 120px 0;
  text-align: center;
}
.bth-sec--olive .bth-h2 {
  font-size: 42px;
  color: #F5F2EE;
  margin-bottom: 60px;
}

.bth-sec--olive .bth-subw {
  color: #F5F2EE;
  margin-bottom: 60px;
}
.bth-sec--olive .bth-wrap {
  padding: 0 60px; /* 화살표 공간 확보 */
}

/* --- Materials Grid (3단 그리드) --- */
.bth-materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
}
.bth-mat-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* --- Generations (올리브 섹션) 전용: 이미지 간격 제로 및 4장 노출 --- */

/* 1. 슬라이더 트랙의 간격(Gap)과 패딩을 강제로 0으로 설정 */
[data-bth-slider="generations"] .bth-slider__track {
    gap: 0 !important;      /* ✅ 이미지 사이 20px 여백 제거 */
    padding: 0 !important;  /* ✅ 트랙 양쪽의 내부 여백 제거 */
    display: flex !important;
}

/* 2. 각 슬라이드의 너비를 정확히 25%로 고정하고 여백(Margin) 제거 */
[data-bth-slider="generations"] .bth-slide {
    flex: 0 0 25% !important; /* ✅ 화면의 1/4씩 차지 */
    max-width: 25% !important;
    margin: 0 !important;     /* ✅ 혹시 모를 마진 제거 */
    padding: 0 !important;    /* ✅ 혹시 모를 패딩 제거 */
}

/* 3. 이미지 자체의 간격 발생 요인 차단 */
[data-bth-slider="generations"] .bth-slide img {
    width: 100% !important;
    display: block !important;
    aspect-ratio: 3/4; /* 기존 비율 유지 */
    object-fit: cover;
}

/* 4. 텍스트 영역(캡션) 설정 - 이미지 아래 노출 유지 */
[data-bth-slider="generations"] .bth-slide-caption {
    padding: 20px !important; /* 글자는 가독성을 위해 패딩 유지 */
    box-sizing: border-box;
}
/* =========================================
   4. 슬라이더 스타일 (bth.js 연동 필수)
   ========================================= */
.bth-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 트랙: 스크롤 숨김 처리 */
.bth-slider__track {
    display: flex !important;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
/* --- 하단 슬라이더 (Materials) 잘림 현상 수정 --- */

/* 1. 슬라이더 본체 설정 */
[data-bth-slider="materials"] {
    width: 100%;
    overflow: visible; /* 부모 요소에서 잘림 방지 */
}

/* 2. 트랙 설정: 여백과 간격을 포함한 전체 너비 확보 */
[data-bth-slider="materials"] .bth-slider__track {
    display: flex !important;
    gap: 20px !important;       /* 이미지 사이 간격 */
    padding: 0 10px !important; /* 좌우 끝 살짝 여백 (잘림 방지) */
    width: 100% !important;
    box-sizing: border-box;
    align-items: center;
}

/* 3. 슬라이드 너비 수정: 갭(20px * 2개)을 제외한 정확한 3등분 */
[data-bth-slider="materials"] .bth-slide {
    /* 100%에서 사이 간격 총 40px을 뺀 나머지를 3으로 나눔 */
    flex: 0 0 calc((100% - 40px) / 3) !important; 
    max-width: calc((100% - 40px) / 3) !important;
    margin: 0 !important;
    overflow: hidden; /* 개별 슬라이드 내부는 깔끔하게 유지 */
}

/* 4. 이미지 설정: 원본 비율 유지 및 흑백 제거 */
[data-bth-slider="materials"] .bth-slide img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    filter: none !important;
    object-fit: contain;
}
/* 슬라이드 아이템 */
/* --- 슬라이드 아이템 구조 수정 (이미지 아래에 텍스트) --- */
.bth-slide {
    display: flex;
    flex-direction: column; /* 세로로 배치 */
    aspect-ratio: auto !important; /* 전체 박스 고정비율 해제 */
    overflow: visible !important; /* 텍스트가 잘리지 않도록 */
}

/* 이미지만 고정 비율 유지 (3:4 비율) */
.bth-slide img {
    width: 100%;
    aspect-ratio: 3/4; 
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.bth-slide:hover img {
    filter: grayscale(0%);
}

/* --- 캡션 스타일: 이미지 아래 배치 --- */
.bth-slide-caption {
    position: static !important; /* 절대 위치 해제 */
    padding-top:  20px !important;   /* 이미지 아래 여백 */
    background: none !important;   /* 그라데이션 삭제 */
    color: #F5F2EE !important;        /* 올리브 배경 위이므로 흰색 유지 */
    text-align: left;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 강조 텍스트 (48px 반영) */
.bth-slide-caption strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 16px !important; /* 요청하신 48px 적용 */
    line-height: 1.1;
    margin-bottom: 8px;
    font-weight: 500;
}

/* 세대 정보 텍스트 */
.bth-slide-caption span {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
}


.bth-slide:hover .bth-slide-caption {
  opacity: 1;
}

/* 네비게이션 화살표 공통 스타일 */
.bth-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  z-index: 20; /* 이미지보다 위에 오도록 설정 */
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
}


/* 기존 -50px(바깥쪽)로 되어 있던 값을 안쪽으로 수정 */
.bth-nav--prev { 
  left: 20px !important; 
  transform: translateY(-50%) rotate(-45deg); 
}

.bth-nav--next { 
  right: 20px !important; 
  transform: translateY(-50%) rotate(135deg); 
}

/* 화살표 모양 보정 */
.bth-nav::before {
  content: '';
  display: block;
  width: 15px; 
  height: 15px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
}

/* --- 하단 배너: 영상을 영역에 꽉 채우고 텍스트 가독성 확보 --- */
.bth-fullimg {
  position: relative;
  width: 100%;
  padding: 50px !important; /* 상하좌우 150px 흰색 여백 */
  margin: 50px;
  background-color: #fff;
  box-sizing: border-box;
}

/* 영상이 담기는 실제 박스 */
.bth-fullimg__inner {
  position: relative;
  width: 100%;
  /* 영상 비율에 맞춰 높이 자동 조절 (16:9 비율 예시) */
  aspect-ratio: 16 / 9; 
  min-height: 450px;
  background-color: #000;
  overflow: hidden;
  z-index: 1;
}

/* 영상이 박스 안에 꽉 차도록 설정 */
.bth-fullimg .bth-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%);
  object-fit: cover; /* 잘림 없이 꽉 채움 */
  z-index: 1;
}

/* 텍스트가 잘 보이도록 배경을 어둡게 처리 */
.bth-fullimg__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.45) !important; /* 45% 어둡게 */
  z-index: 2;
}

/* 텍스트 콘텐츠 레이어 */
.bth-fullimg__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  z-index: 3; /* 영상과 오버레이보다 위 */
}

.bth-fullimg__content .bth-h2 {
  color: #fff !important;
  font-size: 48px !important;
  line-height: 1.2;
  margin-bottom: 30px;
  text-shadow: 0 2px 15px rgba(0,0,0,0.5); /* 글자 그림자로 가독성 추가 */
}




/* 테두리 버튼 스타일 */
.bth-btn-outline {
  display: inline-block;
  padding: 14px 30px;
  border: 1px solid #fff; /* 흰색 테두리 */
  color: #fff;            /* 흰색 글자 */
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.1em;
  margin: 0 10px;
  transition: all 0.3s ease;
}

.bth-btn-outline:hover {
  background: #fff; /* 호버 시 흰색 배경 */
  color: #000;      /* 호버 시 검은 글자 */
}

/* --- 스크롤 애니메이션 필수 설정 --- */
.bth-reveal {
  opacity: 0 !important;
  transform: translateY(50px) !important;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  visibility: visible !important;
}

/* active 클래스가 붙었을 때의 상태 */
.bth-reveal.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 시간차 효과 클래스 */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }

/* =========================================
   5. 반응형 (Media Queries)
   ========================================= */
@media (max-width: 1024px) {
  
    .bth-split {
        flex-direction: column !important;
        gap: 40px;
        align-items: center;
        text-align: center;
    }
    .bth-split--reverse {
        flex-direction: column !important;
    }
    .bth-split__text, .bth-split__media {
        width: 100%;
    }
    [data-bth-slider="materials"] .bth-slide {
        flex: 0 0 calc((100% - 20px) / 2) !important; /* 태블릿 2개 */
    }
    .bth-fullimg { padding: 80px 40px !important; }
}



@media (max-width: 768px) {
  /* 1. 제목 (h2) 설정 */
  h2, .bth-h2 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  /* 2. 본문 (p) 설정 */
  p, .bth-p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    word-break: keep-all; /* 한글 줄바꿈 예쁘게 처리 */
  }

  /* 3. 소제목 또는 기타 텍스트 (span) 설정 */
  span, .bth-sub {
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    display: inline-block;
    margin-bottom: 10px;
  }

  /* 타겟 섹션의 모든 내부 정렬을 왼쪽으로 강제 */
  .bth-sec:nth-of-type(2),
  .bth-sec:nth-of-type(3),
  .bth-sec:nth-of-type(5),
  .bth-sec:nth-of-type(6) {
    text-align: left !important;
    display: block !important; /* flex가 정렬을 방해할 경우를 대비해 해제 */
  }

  /* 섹션 내부의 텍스트 박스(wrap) 정렬 수정 */
  .bth-sec:nth-of-type(2) .bth-wrap,
  .bth-sec:nth-of-type(3) .bth-wrap,
  .bth-sec:nth-of-type(5) .bth-wrap,
  .bth-sec:nth-of-type(6) .bth-wrap {
    margin-left: 0 !important;   /* 중앙 정렬 margin 제거 */
    margin-right: auto !important;
    padding-left: 20px !important; /* 좌측 여백 확보 */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* ✅ 핵심: span을 포함한 모든 자식을 왼쪽 정렬 */
  }

  /* span, h2, p 모든 요소를 왼쪽으로 밀기 */
  .bth-sec:nth-of-type(2) span, .bth-sec:nth-of-type(2) .bth-sub,
  .bth-sec:nth-of-type(3) span, .bth-sec:nth-of-type(3) .bth-sub,
  .bth-sec:nth-of-type(5) span, .bth-sec:nth-of-type(5) .bth-sub,
  .bth-sec:nth-of-type(6) span, .bth-sec:nth-of-type(6) .bth-sub,
  .bth-sec:nth-of-type(2) h2,
  .bth-sec:nth-of-type(3) h2,
  .bth-sec:nth-of-type(5) h2,
  .bth-sec:nth-of-type(6) h2,
  .bth-sec:nth-of-type(2) p,
  .bth-sec:nth-of-type(3) p,
  .bth-sec:nth-of-type(5) p,
  .bth-sec:nth-of-type(6) p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important; /* inline-block이면 text-align 영향을 받음 */
    width: 100% !important;     /* 너비를 꽉 채워 텍스트 시작점을 왼쪽으로 고정 */
  }

 .bth-wrap--narrow { max-width: 100%; }
    .bth-sec--olive .bth-wrap { padding: 0 20px; }
    .bth-materials-grid { grid-template-columns: 1fr; }
    
    /* 모바일에서는 모든 슬라이더 1개 노출 */
    .bth-slide { 
        flex: 0 0 100% !important; 
        max-width: 100% !important;
    }
    .bth-hero, 
  .bth-hero--heritage {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    overflow: hidden !important;
    background-color: transparent !important; /* 배경색에 의한 라인 방지 */
  }

  /* ✅ 비디오가 500px 높이를 빈틈없이 채우도록 수정 */
  .bth-hero__video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 중앙 배치 */
    width: 100% !important;
    height: 100% !important; /* 컨테이너 높이에 맞춤 */
    object-fit: cover !important; /* 비율 유지하며 빈틈없이 채움 (핵심) */
  }
    
  /* 1. 회사 소개 섹션 전체 요소 중앙 정렬 */
  .bth-sec--company .bth-company-grid {
    display: flex !important;
    flex-direction: column !important; /* 요소들을 위아래로 배치 */
    align-items: center !important;    /* 가로축 중앙 정렬 */
    text-align: center !important;     /* 텍스트 중앙 정렬 */
    gap: 30px !important;              /* 요소 간 간격 */
  }

  .bth-sec--company .bth-btn-video {
    display: flex !important;           /* 내부 아이콘과 텍스트 정렬 */
    align-items: center;
    justify-content: center;
    
    /* ✅ 버튼 가로 길이 조정 */
    width: 85% !important;              /* 화면 너비의 85% 차지 */
    max-width: 450px !important;        /* 너무 길어지는 것 방지 */
    min-width: 280px !important;        /* 최소 길이 보장 */
    
    /* ✅ 버튼 높이 및 간격 */
    padding: 20px 0 !important;         /* 상하 여백을 늘려 두툼하게 만듦 */
    margin: 0 auto !important;          /* 부모 요소 안에서 중앙 정렬 */

  }

    .bth-nav { display: none; }
    .bth-hero__title { font-size: 48px; }
    .bth-company-grid {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
        gap: 40px;
    }
    .bth-company__brand { font-size: 48px; }
    .bth-slide-caption strong {
        font-size: 32px !important;
    }
    .bth-nav { 
    display: flex !important; /* 숨김 해제 */
    width: 40px;
    height: 40px;
    }
    [data-bth-slider="materials"] .bth-slide {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
     .bth-fullimg { padding: 40px 20px !important; margin: 0 auto; height: auto }
  .bth-fullimg__content .bth-h2 { font-size: 32px !important; }
  .bth-fullimg__inner {
    position: relative;
    width: 100% !important;
    height: 600px !important;      /* ✅ 세로 길이를 600px로 수정 */
    min-height: 600px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden;
  }

  /* 1. 올리브 섹션 슬라이더 타겟팅 */
    .bth-sec--olive .bth-slide {
        flex: 0 0 100% !important;   /* 너비를 100%로 설정하여 한 장만 노출 */
        max-width: 100% !important;
        padding: 0 !important;       /* 슬라이드 자체 여백 제거 */
    }

    /* 2. 슬라이더 트랙 설정 (간격 및 중앙 정렬) */
    .bth-sec--olive .bth-slider__track {
        gap: 0 !important;           /* 이미지 사이 간격을 없애거나 미세하게 조절 */
        display: flex !important;
        align-items: center;
    }

    /* 3. 이미지 비율 유지 */
    .bth-sec--olive .bth-slide img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
    .bth-sec--olive strong {
    font-size: 16px !important; font-weight: 300 !important;}
}