@charset "utf-8";
/* 편집하기 전에 <사용자화된 CSS 활성화> 옵션이 켜져 있는지 확인하십시오. 이 줄 아래에 사용자화 스타일 시트 코드를 입력하면 됩니다. */


/* 슬라이드 아래 고정 텍스트 구간 - 스킨 폭과 동일하게 맞춤 */
.custom-intro-text{
  padding: 80px 0 80px 0;   /* 위 120, 아래 80 */
  background: #fff;
}

.custom-intro-inner{
  text-align: center;
}

.custom-intro-title{
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 18px 0;
  color: #1b4885 !important;
}

.custom-intro-desc{
  font-size: 22px;
  line-height: 1.8;
  color: #666;
  margin: 0;
}

/* 반응형 추가 (기존 건 그대로 두고 아래만 추가) */

@media (max-width: 1024px){
  .custom-intro-title{
    font-size: 26px;
    line-height: 1.4;
  }

  .custom-intro-desc{
    font-size: 16px;
  }
}

@media (max-width: 768px){
  .custom-intro-title{
    font-size: 22px;
    line-height: 1.45;
  }

  .custom-intro-desc{
    font-size: 15px;
    line-height: 1.7;
  }
}
/* 고정 텍스트 섹션 모바일 최적화 */
@media (max-width: 768px){
  .custom-intro-text{
    padding: 36px 0;
  }

  .custom-intro-title{
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 12px;
  }

  .custom-intro-desc{
    font-size: 14px;
    line-height: 1.65;
  }
}

/* ✅ 홈(메인)에서만 소개 섹션 보이게 */
.custom-intro-text{ display:none; }            /* 기본은 숨김 */
#tt-body-index .custom-intro-text{ display:block; }  /* 메인에서만 표시 */

/* ✅ 슬라이드 아래 소개문구 다음에 생기는 구분선(가로줄)만 제거 */
#tt-body-index .custom-intro-text + .page-stroke,
#tt-body-index .custom-intro-text + .page-stroke.article-stroke {
  display: none !important;
}

/* 혹시 소개문구 영역 자체에 라인이 잡히면 같이 제거 */
#tt-body-index .custom-intro-text {
  border: 0 !important;
  box-shadow: none !important;
}

/* ✅ 홈(메인)에서만 스킨 구분선(가로줄) 전부 제거 */
#tt-body-index .page-stroke{
  display:none !important;
}

#tt-body-index .cover-title{
  color: #1b4885 !important;
}


/* ✅ 홈(메인) 간격 조절 */

/* 1) 소개문구(토탈솔루션) 섹션 아래 여백 줄이기 */
#tt-body-index .custom-intro-text{
  padding-bottom: 40px !important;   /* 기존 80px → 40px */
}

/* 2) "철강 규격 및 단위중량 정보" 제목 위/아래 여백 줄이기 */
#tt-body-index h2.cover-title{
  margin-top: 40px !important;       /* 위 간격 */
  margin-bottom: 0px !important;    /* 아래 간격 */
}

/* 3) 제목 아래 카드(박스) 섹션이 너무 내려가면 위쪽 여백 줄이기 */
#tt-body-index .cover-item{
  padding-top: 0 !important;
}

/* 4) 카드 그리드 자체가 위에서 또 떨어져 있으면 한번 더 당기기 */
#tt-body-index .for-cover-item{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ✅ 유튜브 아래 얇은 구분선(신형 스타일) */
.section-divider{
  max-width: 1000px;       /* 유튜브 폭이랑 맞추고 싶으면 동일 값 */
  margin: 28px auto 50px;  /* 위(영상)와 아래(다음 섹션) 간격 */
  padding: 0 16px;         /* 모바일 좌우 여백 */
}

.section-divider > span{
  display: block;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,0,0,.18),
    rgba(0,0,0,0)
  );
}

.custom-intro-text{
  padding-bottom: 10px !important;
}


.consult-image-wrap{
  text-align:center;
  margin: 12px 0 10px;
}

.consult-image-wrap img{
  max-width:400px;
  width:100%;
  border-radius:10px;
  transition: all 0.2s ease;
  cursor:pointer;
}

.consult-image-wrap img:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.cover-title{
  font-size: 24px !important;
  font-weight: 700 !important;
}