/* 전체 컨테이너 */
.container_wrap {
  width: 100vw;
  background-color: var(--bg300);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.container_1200 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.container_1000 {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

/* -----------------------------
고정 버튼 (Top, Floating)
----------------------------- */
#topButton {
  position: fixed;
  right: 20px;
  bottom: 40px;
  display: none;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 14px 14px;
  cursor: pointer;
  z-index: 3;
}

#floatingButton {
  position: fixed;
  right: 20px;
  bottom: 150px;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 16px 16px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
}

/* -----------------------------
top_bar
----------------------------- */
.top_bar_wrap {
  width: 100%;
  background-color: var(--primary);
}

.top_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
  max-width: 1440px;
  width: calc(100% - 40px);
  height: 60px;
  margin: 0 auto;
}

.top_bar .contact_info {
  display: flex;
  gap: 1.4rem;
  color: var(--white);
  font-weight: 300;
}

.top_bar .contact_info a {
  color: var(--white);
  text-decoration: none;
}

.top_bar .contact_right {
  display: flex;
  align-items: center;
}

.top_bar .social_links {
  display: flex;
  gap: 8px;
}

.top_bar .inquire_button a {
  background-color: var(--white);
  color: var(--primary);
  font-weight: 500;
  padding: 11px 16px;
  border-radius: 4px;
  transition: background-color 0.3s;
  margin-left: 2rem;
  text-decoration: none;
}


/* ////////////////////////// */
/* header */
/* ////////////////////////// */

/* 메인 헤더 & 내비게이션 */
header {
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--primary);
}

.header_fix {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--white);
}

.gnb {
  max-width: 1440px;
  padding: 0 20px;
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  position: relative;
}

.gnb .logo_main {
  width: 100px;
}

/* 상위 메뉴 스타일 */
.menu {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.menu>li a {
  display: flex;
  align-items: center;
  padding: 22px 20px;
  color: var(--gray5);
  font-size: var(--font-16);
}

.menu>li.selected>a {
  color: var(--primary);
}

.menu>li.selected>a .arrow {
  border-top-color: var(--primary);
}

.menu>li a .arrow {
  margin-left: 10px;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--primary);
  transition: transform 0.3s ease, border-top-color 0.3s ease;
}

.menu>li:hover>a .arrow {
  transform: rotate(180deg);
}

/* 서브메뉴 전체 래퍼 */
.submenu_wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  background-color: var(--bg400);
  display: none;
  /* padding: 20px; */
  max-width: 1440px;
  width: 100%;
}

/* 서브메뉴 내용 컨테이너 */
.submenu_container {
  position: relative;
  display: flex;
  max-width: 1440px;
  width: 100%;
  padding: 20px;
  /* margin: 0 auto; */
  background-color: var(--bg400);
  gap: 12px;
  z-index: 1;
}

/* 왼쪽 1차 카테고리 */
.submenu_left {
  margin: 0;
  padding: 0;
  width: 220px;
}

.submenu_left li {
  background-color: var(--bg300);
  margin-bottom: 10px;
  cursor: pointer;
}

.submenu_left li:last-child {
  margin-bottom: 0;
}

.submenu_left li a {
  display: block;
  padding: 14px;
  text-align: center;
  color: var(--gray3);
  font-weight: 400;
}

.submenu_left li.selected,
.submenu_left li:hover {
  background-color: var(--primary);
}

.submenu_left li.selected a,
.submenu_left li:hover a {
  color: var(--white);
}

.submenu_right {
  flex: 1;
  background-color: var(--white);
  padding: 20px 28px;
  display: none;
  flex-direction: column;
  gap: 16px;
}

.submenu_right.show {
  display: flex;
}

.submenu_content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* 하단 상세 목록 */
.submenu_bottom {
  display: flex;
  gap: 60px;
  flex: 1;
}

.submenu_col .submenu_col_title {
  padding: 0;
}

.submenu_col a span {
  margin-bottom: 16px;
  padding: 4px 0;
  font-size: var(--font-16);
  font-weight: 500;
  color: var(--gray3);
}

.submenu_col li {
  margin-bottom: 6px;
}

.submenu_col li a {
  color: var(--gray5);
  font-size: var(--font-14);
  padding: 8px 0;
}

.submenu_col a span:hover {
  color: var(--primary);
}

.submenu_col li a:hover {
  color: var(--primary);
}

.submenu_image {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submenu_image img {
  max-width: 100%;
  display: block;
}

.menu_solutions .submenu_image {
  width: 50%;
}

/* 모바일 네비게이션 */
.menu_mobile_menu {
  display: none;
  position: fixed;
  top: 48px;
  left: 0;
  width: 100%;
  max-height: calc(100vh - 60px);
  background-color: var(--bg500);
  overflow-y: auto;
  z-index: 2;
  padding: 20px;
}

.menu_mobile_list>li {
  font-style: var(--font-14);
}

.menu_mobile_list>li {
  border-bottom: 1px solid var(--stroke_e);
}

.menu_mobile_list>li>a {
  display: block;
  padding: 15px;
  font-size: var(--font-16);
  color: var(--black);
  position: relative;

}

.menu_mobile_list>li>a::after {
  content: '+';
  position: absolute;
  right: 15px;
}

.menu_mobile_list>li.active>a::after {
  content: '-';
}

.menu_mobile_list .submenu {
  display: none;
  padding: 8px;
  background-color: var(--bg400);
}

.menu_mobile_list .submenu_detail {
  padding-left: 16px;
  background-color: var(--bg200);
}

.menu_mobile_list .submenu li a {
  display: block;
  padding: 10px;
  font-weight: 300;
  font-size: var(--font-14);
  color: var(--gray7);
}

.menu_mobile_list .submenu>li>a {
  font-weight: 500;
  color: var(--gray5);
}

/* 헤더 서치박스 */
.menu_search,
.menu_mobile {
  padding: 10px;
  cursor: pointer;
  transition: fill 0.3s;
}

.menu_mobile {
  padding-right: 0;
  margin-left: 8px;
}

.menu_search:hover svg {
  fill: var(--primary);
}


/* 검색 박스 스타일 */
.search_box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 60px 20px 20px;
  z-index: 2;
  display: none;
}

.search_box.active {
  display: block;
}

.search_cont {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.search_input {
  flex: 1;
  padding: 0 16px;
  font-size: var(--font-16);
  border: 1px solid var(--stroke-c);
  border-radius: 4px 0 0 4px;
  outline: none;
  height: 48px;
}

.search_btn {
  width: 48px;
  height: 48px;
  background: var(--primary);
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search_btn svg {
  width: 18px;
  height: 18px;
  fill: var(--white);
}

.search_close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px 20px 12px;
  background: transparent;
  border: none;
  font-size: var(--font-20);
  cursor: pointer;
  color: var(--gray5);
}


/* ////////////////////////// */
/* main */
/* ////////////////////////// */

/* 메인이미지 슬라이더 */
.main_image_slider {
  width: 100%;
  /* height: calc(100vh - 60px); */
  overflow: hidden;
  position: relative;
}

.main_image_slider .slick-slide img,
.main_image_slider .slick-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  aspect-ratio: 16/9;
}

/* 도트 내비게이션 위치 */
.main_image_slider .slick-dots {
  position: absolute;
  bottom: 10%;
  /* top: 100px; */
  left: 20%;
  transform: translateX(-50%);
  z-index: 1;
}

/* Slick 커스텀 도트 */
.main_image_slider .slick-dots li button:before {
  font-size: 0;
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease;
}

.main_image_slider .slick-dots li.slick-active button:before {
  background: #fff;
}

.main_image_slider .slick-dots li {
  margin: 0 6px;
  /* 점 사이 간격 */
}

/* Custom Prev/Next Buttons Styling */
.main_image_slider .slick-prev,
.main_image_slider .slick-next {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: var(--white);
  font-size: 0;
  position: absolute;
  top: auto;
  bottom: 4%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s, transform 0.3s;
  border: 1px solid var(--white);
  cursor: pointer;
}

.main_image_slider .slick-prev:hover {
  border-radius: 50% 10% 10% 50%;
  background-color: var(--primary);
}

.main_image_slider .slick-next:hover {
  border-radius: 10% 50% 50% 10%;
  background-color: var(--primary);
}

.main_image_slider .slick-prev {
  right: 140px;
  left: auto;
}

.main_image_slider .slick-next {
  right: 80px;
}

.main_image_slider .slick-prev::before,
.main_image_slider .slick-next::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

/* prev 화살표 */
.main_image_slider .slick-prev::before {
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
  margin-left: 6px;
}

/* next 화살표 */
.main_image_slider .slick-next::before {
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
  margin-right: 6px;
}

/* ------------------------------
product_slider
------------------------------ */
/* 제품 슬라이더 섹션 */
.product_slider_wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 10rem;
  margin: 0 4rem 10rem 4rem;
}

.product_slider {
  width: 100%;
  margin: 0 auto;
}

.product_slider .slick-slide {
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0.8;
}

.product_slider div a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product_slider .slick-list {
  overflow: visible;
}

.product_slider .slick-center {
  transform: scale(1.3);
  opacity: 1;
}

.product_slider img {
  width: 73%;
}

.product_slider h3 {
  padding-top: .8rem;
}

.product_slider p {
  font-size: var(--font-16);
  color: var(--gray7);
  font-weight: 300;
  margin: 1.2rem;
}

.product_slider span {
  font-size: var(--font-16);
  padding: 8px 20px;
  background-color: var(--primary);
  color: var(--white);
  font-weight: 300;
  border-radius: 20px;
}

/* 제품 슬라이더 Prev/Next 버튼 */
.product_slider .slick-prev,
.product_slider .slick-next {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #888;
  border-radius: 50%;
  background: transparent;
  color: #888;
  font-size: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.product_slider .slick-prev::before,
.product_slider .slick-next::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

/* prev 화살표: 왼쪽 방향(↙︎ 모양을 회전) */
.product_slider .slick-prev::before {
  border-left: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: rotate(45deg);
  margin-left: 6px;
}

/* next 화살표: 오른쪽 방향(↘︎ 모양을 회전) */
.product_slider .slick-next::before {
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: rotate(-45deg);
  margin-right: 6px;
}


/* ------------------------------
three_box_section
------------------------------ */

/* 세 개 박스 섹션 */
.three_box_section {
  width: 100%;
  margin: 0 auto;
  padding: 10rem 2rem;
}

/* 그리드*/
.three_box_container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.three_box_container .box {
  position: relative;
  overflow: hidden;
}

.three_box_container .box img {
  width: 100%;
  height: 400px;
  display: block;
  object-fit: cover;
}

.three_box_container .box>a {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  color: var(--white);
  font-size: var(--font-28);
  z-index: 1;
}


/* 오버레이 */
.box_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.box:hover .box_overlay {
  opacity: 1;
}

.box_overlay ul {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10%;
  width: 100%;
}

.box_overlay ul li {
  width: 100%;
  border-bottom: 1px solid var(--stroke-a);
}

.box_overlay ul li a {
  color: var(--white);
  font-size: var(--font-18);
  padding: 8px 0;
  text-align: left;
}

.box_overlay ul li a:hover {
  color: var(--primary);
}

/* ------------------------------
news_event_section
------------------------------ */
.news_event_section {
  width: 100%;
  background-color: var(--bg400);
  padding: 8rem 2rem;
  margin-bottom: 10rem;
  position: relative;
  z-index: 1;
}

.news_event_section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/images/main-bg.webp") no-repeat center center;
  background-size: cover;
  opacity: 0.3;
  z-index: -1;
}

.news_event_container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 2rem;
  margin-bottom: 4rem;
}

.news_event_box {
  display: flex;
  overflow: hidden;
  padding: 1.4rem;
  background-color: var(--white);
}

.news_event_image {
  flex: 1 1 40%;
}

.news_event_image img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/11;
}

.news_event_content {
  flex: 1 1 60%;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news_event_content h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.news_event_content p {
  flex-grow: 1;
  font-size: var(--font-16);
  color: var(--gray5);
  margin-bottom: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

.news_event_content a {
  align-self: flex-start;
  padding: 1rem 0;
  color: var(--primary);
  border: none;
  cursor: pointer;
  font-size: var(--font-14);
}


/* ////////////////////////// */
/* section_title */
/* ////////////////////////// */
.section_titile {
  margin-bottom: 6rem;
}

.section_titile h2 {
  text-align: center;
  margin-bottom: 20px;
  color: var(--gray5);
  font-weight: 500;
}

.section_titile p {
  text-align: center;
  color: var(--gray7);
  font-size: var(--font-16);
  margin-bottom: 20px;
  font-weight: 200;
}

/* ////////////////////////// */
/* sub product_list */
/* ////////////////////////// */

/* 서브페이지 공통 시작 */
.sub_bg {
  background-color: var(--bg300);
}

/* 브레드크럼 영역 */
.breadcrumb {
  font-size: var(--font-16);
  margin-bottom: 4rem;
}

.breadcrumb .active {
  color: var(--primary);
}

.breadcrumb li {
  display: inline-block;
  line-height: 1.4;
}

.breadcrumb a {
  text-decoration: none;
  color: var(--gray5);
  margin-right: 5px;
}

/* 서브페이지 공통 끝*/


/* 페이지 전체 레이아웃 */
.page_content {
  display: flex;
  gap: 20px;
}

/* 왼쪽 사이드 (타이틀 + 아코디언 메뉴) */
.left_column {
  flex: 0 0 250px;
}

.left_column h1 {
  margin-bottom: 1.5rem;
  font-size: 3.6rem;
}

/* 아코디언 스타일 */
.accordion {
  overflow: hidden;
}

.accordion_header {
  position: relative;
  padding: 1.6rem;
  color: var(--gray5);
  background-color: var(--white);
  /* font-weight: 400; */
  cursor: pointer;
  padding-right: 4rem;
}

.accordion_body {
  display: none;
  background-color: var(--bg300);
}

.accordion_body ul li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke-e);
  cursor: pointer;
  color: var(--gray7);
  font-size: var(--font-14);
  font-weight: 300;
}

.accordion_body ul li:hover {
  background-color: var(--bg400);
  transition: background-color 0.3s ease;
}

.accordion_body ul li.selected {
  background-color: var(--primary);
  color: var(--white);
}

.accordion_item.active .accordion_body {
  display: block;
}

.accordion_item.active .accordion_header {
  color: var(--white);
  background-color: var(--primary);
  font-weight: 300;
}

.accordion_header::after {
  content: "∨";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
  font-size: 12px;
}

.accordion_item.active .accordion_header::after {
  transform: translateY(-50%) rotate(180deg);
}

/* 오른쪽 영역 (상단 텍스트 + 상품 리스트 + 페이지네이션) */
.right_column {
  flex: 1;
}

.top_text {
  color: var(--gray5);
  font-size: var(--font-16);
  margin-bottom: 4rem;
  line-height: 1.4;
  font-weight: 200;
}

.result_info {
  font-size: var(--font-12);
  color: var(--gray7);
  margin-bottom: 20px;
}

.result_info .current_range,
.result_info .total_results {
  font-weight: normal;
}

/* 상품 리스트 */
.product_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 2rem;
}

.product_card {
  padding: 1.6rem;
  text-align: center;
  background-color: var(--white);
}

.product_card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 10px;
  border: 1px solid var(--stroke-e);
}

.product_card h2 {
  font-size: 16px;
  margin-bottom: 8px;
  line-height: 1.2;
}

.product_card p {
  font-size: var(--font-12);
  color: #666;
  margin-bottom: 1.2rem;
  font-weight: 200;
}


/* 페이지네이션 */
.pagination {
  display: flex;
  gap: 8px;
  padding-top: 2rem;
}

.pagination .page_link {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.pagination .page_link:hover {
  background-color: var(--primary);
  color: var(--white);
  transition: background-color 0.3s ease;
}

.pagination .page_link.active {
  background-color: var(--primary);
  color: var(--white);
}


/* ////////////////////////// */
/* sub product_detail */
/* ////////////////////////// */

.product_container {
  display: flex;
  gap: 20px;
  margin-bottom: 80px;
  /* position: relative; */
}

.gallery {
  /* position: relative; */
  /* flex: 1 1 45%; */
  min-width: 320px;
}


/* 메인 슬라이더 */
.slider_for_wrapper {
  position: relative;
  margin: 0 auto 20px;
}

.btn_zoom {
  position: absolute;
  top: 2%;
  right: 2%;
  background-color: var(--white);
  padding: .6rem;
  border-radius: 50%;
  z-index: 1;
  border: 1px solid var(--stroke-e);
}

.slider_for {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 20px;

}

.slider_for .slick-slide {
  /* 정사각형으로 유지 */
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  border: 1px solid var(--stroke-c);
}

.slider_for .slick-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 썸네일 슬라이더 */
.slider_nav {
  width: 100%;
  max-width: 510px;
  margin: 0 auto 20px;
}

.slider_nav .slick-slide {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin-right: 10px;
}

.slider_nav .slick-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--stroke-c);
}

/* 상품 정보 */
.product_info {
  flex: 1 1 55%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.product_title {
  font-size: var(--font-36);
  color: var(--gray3);
  margin-bottom: 1.5rem;
}

.product_description {
  font-size: var(--font-16);
  color: var(--gray5);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.product_buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 2rem;
}

.product_button {
  background-color: var(--black);
  color: var(--white);
  border: none;
  padding: 10px 20px;
  font-size: var(--font-16);
  /* border-radius: 4px; */
  cursor: pointer;
  transition: background-color 0.3s ease;
}



/* Feature 섹션 */
.product_features {
  margin-top: 20px;
}

.features_title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Feature Section Styles */
.feature_section {
  margin-bottom: 4rem;
}

.feature_title {
  font-size: var(--font-20);
  font-weight: bold;
  margin-bottom: 2rem;
  color: var(--gray3);
}

.feature_grid {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--white);
}

.feature_item {
  flex: 0 0 50%;
  display: flex;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.feature_item h3 {
  font-size: var(--font-20);
  color: var(--gray5);
}

.feature_item_title {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--stroke-c);
}

.feature_item_title img {
  width: 40px;
  height: 40px;
  margin-right: 15px;
}

.feature_item_content {
  flex: 1;
  font-size: var(--font-14);
  color: var(--gray7);
}

.feature_item_content ol {
  padding-left: 20px;
}

.feature_item_content ol li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.explosive_proof_note {
  background-color: #f9f9f9;
  padding: 15px;
  border: 1px solid #e0e0e0;
  margin-top: 15px;
  line-height: 1.5;
}

/* Specification 섹션 */
.product_spec {
  margin-top: 4rem;
}

.product_spec_inner {
  background-color: var(--white);
  padding: 2rem;
}

.spec_title {
  font-size: var(--font-20);
  font-weight: bold;
  margin-bottom: 2rem;
}

.spec_subtitle {
  font-size: var(--font-16);
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--gray3);
}

.spec_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1rem;
  font-size: var(--font-14);
  color: var(--gray7);
}

.spec_table th,
.spec_table td {
  background-color: var(--bg300);
  padding: 12px;
  vertical-align: middle;
}

.spec_table th {
  background-color: var(--bg300);
  text-align: left;
  white-space: nowrap;
}

/* Application Scenarios 섹션 */
.application_scenarios {
  margin-top: 4rem;
  padding: 2rem 0;
}

.scenarios_title {
  font-size: var(--font-20);
  font-weight: bold;
  margin-bottom: 2rem;
  color: var(--gray3);
}

.scenarios_wrapper {
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  background-color: var(--white);
}

.scenarios_table {
  width: 1200px;
  border-collapse: collapse;
  table-layout: fixed;
}

.scenarios_table td {
  width: 300px;
  text-align: center;
  vertical-align: top;
  padding: 2rem 0 2rem 2rem;
}

.scenarios_table td:last-child {
  padding-right: 2rem;
}

/* 이미지 스타일 */
.scenarios_table img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

.scenarios_table p {
  margin-top: 1.4rem;
  font-size: var(--font-14);
  color: var(--gray5);
}


/* Related Products */
.related_products {
  margin-top: 4rem;
  padding: 2rem 0;
}

.related_products_title {
  font-size: var(--font-20);
  font-weight: bold;
  margin-bottom: 2rem;
  color: var(--gray3);
}

.related_products_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.related_products_card {
  background-color: var(--white);
  padding: 1.5rem;
  text-align: center;
}

.related_products img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.related_products h3 {
  font-size: var(--font-16);
  margin-bottom: .8rem;
  color: var(--gray3);
}

.related_products p {
  font-size: var(--font-12);
  color: var(--gray7);
  margin-bottom: 1rem;
}


/* ////////////////////////// */
/* sub software */
/* ////////////////////////// */

.section_100vw {
  width: 100vw;
  background-color: var(--bg300);
}

/* Software 섹션 전체 */
.software_section {
  margin-top: 4rem;
  padding: 2rem 0;
}

.software_title {
  font-size: var(--font-40);
  font-weight: bold;
  margin-bottom: 2rem;
  color: var(--gray3);
}

/* 그리드 레이아웃 */
.software_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* 개별 카드 스타일 */
.software_card {
  display: flex;
  align-items: flex-start;
  padding: 2rem;
  text-align: left;
}

.software_icon_wrap {
  margin-right: 2rem;
}

/* 아이콘(이미지) */
.software_icon {
  max-width: 200px;
  height: auto;
  margin-bottom: 1rem;
}

.software_card h2 {
  font-size: var(--font-28);
  margin-bottom: 1.2rem;
  color: var(--gray3);
}

.software_card p {
  font-size: var(--font-14);
  color: var(--gray7);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.software_read_more {
  font-size: var(--font-14);
  color: var(--primary);
}

.software_read_more:hover {
  text-decoration: underline;
}


/* ////////////////////////// */
/* sub software_detail */
/* ////////////////////////// */

/* TI Studio Mobile Client 섹션 */
.ti_studio_section {
  margin-top: 40px;
  padding: 20px 0;
  background-image: url(../assets/images/Software-banner.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 500px;
}

/* 상단: 좌우 레이아웃 */
.ti_studio_top {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 2rem;
}

.ti_studio_left {
  flex: 1 1 50%;
}

.ti_studio_right {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 제목, 설명, 버튼 */
.ti_studio_title {
  font-size: var(--font-44);
  font-weight: bold;
  margin-bottom: 2rem;
  color: var(--gray3);
}

.ti_studio_desc {
  font-size: var(--font-16);
  line-height: 1.5;
  color: var(--gray5);
  margin-bottom: 20px;
}

.ti_studio_btn {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 12px 20px;
  font-size: var(--font-16);
  border-radius: 4px;
  cursor: pointer;
}

.ti_studio_bottom {
  margin-top: 2rem;
  background-color: var(--bg600);
}

.ti_core_container {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  /* padding-top: 2rem; */
}

.ti_core_left {
  position: relative;
  flex: 1 1 50%;
  margin: 0 auto;
  /* margin-bottom: 120px; */
}

.ti_core_bg {
  /* 배경 역할의 DIV */
  background-color: var(--bg600);
  height: 400px;
}

.ti_core_img {
  width: 100%;
  /* height: auto; */
  border-radius: 8px;
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem;
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.ti_core_img2 {
  width: 40%;
  margin: 0 auto;
  padding: 30% 0 20% 0;
}

.ti_core_right {
  flex: 1 1 50%;
  padding: 2rem;
}

.ti_core_title {
  font-size: var(--font-36);
  color: var(--gray3);
  margin-bottom: 2rem;
}

.ti_core_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ti_core_list li {
  display: flex;
  gap: 10px;
  margin-bottom: 4rem;
  align-items: flex-start;
}

.ti_core_icon {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid var(--primary);
}

.ti_core_text h3 {
  font-size: var(--font-18);
  color: var(--gray3);
  margin-bottom: .6rem;
  font-weight: bold;
}

.ti_core_text p {
  font-size: var(--font-16);
  color: var(--gray5);
  line-height: 1.4;
}


/* Application Value 섹션 */
.ti_application_section {
  padding: 4rem 0;
}

/* 상단: 이미지 배치 */
.ti_application_top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* 개별 이미지 스타일 */
.ti_app_img {
  flex: 0 0 auto;
  max-width: 250px;
  width: 100%;
  height: auto;
}

/* 하단 텍스트 컨테이너 */
.ti_application_bottom {
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ti_app_title {
  font-size: var(--font-36);
  color: var(--gray3);
  margin-bottom: 2rem;
}

.ti_app_block {
  margin-bottom: 4rem;
}

.ti_app_block h3 {
  font-size: var(--font-18);
  color: var(--primary);
  margin-bottom: 1rem;
  font-weight: bold;
}

.ti_app_block ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.ti_app_block li {
  font-size: var(--font-16);
  margin-bottom: .8rem;
  line-height: 1.4;
  color: var(--gray5);
}



/* sub_software_detail 모달 */
/* 모달 오버레이 (전체 화면 어둡게) */
.modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  /* 초기에는 숨김 */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 모달 컨텐츠 래퍼 */
.modal_content {
  position: relative;
  background-color: #fff;
  width: 800px;
  max-width: 90%;
  min-height: 300px;
  padding: 20px;
  display: flex;
  gap: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

/* 닫기 버튼 (X) */
.modal_close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* 왼쪽 폼 영역 */
.modal_left {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4rem;
}

.modal_left p {
  font-size: var(--font-14);
  margin-bottom: 2rem;
}

.modal_form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form_group {
  display: flex;
  flex-direction: column;
  width: calc(50% - 10px);
}

.form_group label {
  font-size: var(--font-14);
  margin-bottom: .6rem;
  color: var(--gray3)
}

.form_group input,
.form_group textarea {
  border: 1px solid var(--stroke-c);
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.form_group textarea {
  min-height: 80px;
  resize: vertical;
}

.form_group_full {
  width: 100%;
}

.send_btn {
  margin-top: 10px;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}


/* 오른쪽 QR 영역 */
.modal_right {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qr_img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.qr_text {
  font-size: var(--font-14);
  color: var(--gray3);
}



/* ////////////////////////// */
/* sub_solution_list */
/* ////////////////////////// */

/* 섹션 상단 제목 및 설명 */
.section_header {
  padding: 4rem 0;
}

.section_header .section_title {
  font-size: var(--font-44);
  color: var(--gray3);
  font-weight: bold;
  margin-bottom: 2rem;
}

.section_header .section_desc {
  font-size: var(--font-16);
  color: var(--gray7);
  line-height: 1.6;
}

/* 탭 메뉴 */
.tab_menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2rem;
  width: 100%;
}

.tab_menu .tab_item {
  flex: 1 1 auto;
  min-width: 160px;
  padding: 14px 16px;
  background-color: var(--bg300);
  cursor: pointer;
  font-size: var(--font-16);
  text-align: center;
  border-radius: 4px 4px 0 0;
  color: var(--gray3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab_menu .tab_item.active {
  background-color: var(--primary);
  color: var(--white);
}


/* 탭 콘텐츠 영역 */
.tab_content {
  display: none;
  width: 100%;
}

.tab_content.active {
  display: block;
}

.card_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}


/* 카드 스타일 */
.card {
  border: 1px solid var(--stroke-e);
  border-radius: 4px;
  padding: 1.6rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
}

/* 이미지 래퍼: 16:9 비율 유지 */
.card_img_wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 비율 */
  overflow: hidden;
  border-radius: 4px;
  background-color: #ddd;
  margin-bottom: 10px;
}

.card_img_wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card h2 {
  font-size: var(--font-16);
  color: var(--gray5);
  padding-top: 1.2rem;
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.card p {
  font-size: var(--font-14);
  color: var(--gray7);
  line-height: 1.6;
}

.card_date {
  font-size: var(--font-12);
  color: var(--gray9);
  border-top: 1px solid var(--stroke-e);
  padding-top: 1rem;
}

.read_more {
  font-size: var(--font-14);
  color: var(--primary);
  padding: 1.4rem 0;
}

.read_more:hover {
  text-decoration: underline;
}


/* ////////////////////////// */
/* sub_solution_detail */
/* ////////////////////////// */

.blog_container {
  display: flex;
  gap: 20px;
}

.blog_left {
  flex: 1 1 auto;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 4rem;
  box-shadow: 2px -2px 8px 0 rgba(0, 0, 0, .5);
  padding: 2rem;
}

.blog_left_text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog_left h1 {
  font-size: var(--font-36);
  color: var(--black);
  font-weight: 500;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.blog_left h2 {
  font-size: var(--font-30);
  color: var(--gray3);
  font-weight: 500;
  margin-bottom: 10px;
}

.blog_left .post_date {
  font-size: var(--font-16);
  color: var(--primary);
  margin-bottom: 20px;
}

.btn_link {
  display: inline-block;
  color: var(--primary);
  white-space: normal;
}

.btn_link:hover {
  color: var(--black);
}

.blog_left p {
  font-size: var(--font-18);
  color: var(--black);
  line-height: 1.6;
  font-weight: 200;
  margin-bottom: 2rem;
}

.blog_left img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 4px;
}

.blog_right {
  width: 30%;
  flex-shrink: 0;
}

.sidebar_section {
  margin-bottom: 40px;
}

.sidebar_section h2 {
  font-size: var(--font-24);
  color: var(--gray3);
  margin-bottom: 2rem;
  font-weight: 500;
  /* border-bottom: 1px solid #ccc; */
}

.social_icons {
  display: flex;
  gap: 10px;
}

.social_icons a {
  display: inline-block;
  width: 44px;
  height: 44px;
  text-align: center;
  border-radius: 4px;
  line-height: 44px;
  color: var(--white);
}


.btn_social_facebook {
  background-color: #3b5997;
}

.btn_social_twitter {
  background-color: #1ab7ea;
}

.btn_social_youtube {
  background-color: #ed4141;
}

.btn_social_instagram {
  background-color: #125d8f;
}

.social_icons a svg {
  width: 14px;
  height: 14px;
}


/* Most Popular  */
.most_popular_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2열 기본 */
  gap: 20px;
}

.most_popular_list li {
  padding: 1rem 0;
  border-radius: 4px;
  /* overflow: hidden; */
  display: flex;
  gap: 10px;
}

.most_popular_list li a {
  display: flex;
}

/* 이미지: 고정 크기, 3:2 비율 */
.popular_img_wrapper {
  flex-shrink: 0;
  width: 200px;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 1rem;
}

.popular_img_wrapper img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 텍스트 영역 */
.popular_text {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* overflow: hidden; */
}

.popular_text h3 {
  font-size: var(--font-16);
  color: var(--gray5);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.popular_text .date {
  font-size: var(--font-16);
  color: var(--gray9);
}


/* 블로그 하단 섹션 */
.blog_bottom {
  margin-top: 4rem;
}

.blog_bottom h2 {
  font-size: var(--font-24);
  color: var(--gray3);
  margin-bottom: 2rem;
}

.prev_next_section {
  border: 1px solid var(--stroke-d);
  background-color: var(--bg500);
  padding: 1.4rem;
  display: flex;
  justify-content: space-between;
  /* flex-direction: column; */
  gap: 5px;
}

.pn_line1,
.pn_line2 {
  display: flex;
  flex-direction: column;
  width: 48%;
  cursor: pointer;
}

.pn_left_label,
.pn_right_label {
  font-size: var(--font-14);
  color: var(--gray5);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.pn_right_label {
  justify-content: end;
}

.pn_left_label .pn_arrow,
.pn_right_label .pn_arrow {
  font-size: 18px;
}

.pn_prev_text,
.pn_next_text {
  font-size: var(--font-16);
  color: var(--gray3);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.pn_prev_text {
  text-align: left;
}

.pn_next_text {
  text-align: right;
}

/* Recommended */
.recommend_section {
  margin-top: 4rem;
}

.recommend_section h2 {
  font-size: var(--font-24);
  color: var(--gray3);
  margin-bottom: 2rem;
}

/* Recommended 2열 */
.recommended_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 2rem;
}

.recommended_product_item {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 2rem;
}

.recommended_product_item img {
  max-width: 100%;
  width: 400px;
  height: 400px;
  object-fit: cover;
  margin-bottom: 10px;
}

.recommended_product_item p {
  font-size: var(--font-16);
  color: var(--primary);
}

.recommended_product_item p:hover {
  color: var(--black);
}

/* Share 버튼 */
.share_section {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.share_section h2 {
  font-size: var(--font-24);
  color: var(--gray3);
  margin: 0;
  font-weight: 500;
}

.share_section_inner {
  display: flex;
  gap: 10px;
}

.btn_share {
  display: inline-block;
  font-size: var(--font-14);
  color: var(--white);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: filter 0.3s ease;
}

.btn_share span {
  display: inline-block;
  font-weight: 200;
}

.btn_share:hover {
  filter: saturate(150%);
}

.btn_share_facebook {
  background-color: #0056b3;

}

.btn_share_twitter {
  background-color: #1da1f2;

}

.btn_share_pinterest {
  background-color: #bd081c;

}

.btn_share_linkedin {
  background-color: #0077b5;

}

.btn_share svg {
  width: 14px;
  height: 14px;
  line-height: 23px;
  margin-right: 6px;
}

/* Related Posts 섹션 */
.related_posts {
  margin-top: 40px;
}

.related_posts h2 {
  font-size: var(--font-24);
  color: var(--gray3);
  margin-bottom: 2rem;
  font-weight: 500;
}

.related_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.related_item_img_wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: #eee;
  margin-bottom: 2rem;
}

.related_item_img_wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related_item h3 {
  font-size: var(--font-18);
  color: var(--gray3);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2rem;
}



/* ////////////////////////// */
/* sub document-library */
/* ////////////////////////// */

.document_wrap {
  padding-bottom: 4rem;
}

/* 상단 컨트롤 영역 */
.top_controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4rem;
  margin-bottom: 1.6rem;
}

/* --- 커스텀 드롭다운(카테고리) --- */
.category_dropdown {
  position: relative;
  width: 300px;
}

.dropdown_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  font-size: var(--font-14);
  border: 1px solid var(--stroke-c);
  border-radius: 4px;
  background-color: var(--white);
  cursor: pointer;
  user-select: none;
}

.dropdown_toggle:hover {
  border-color: var(--stroke-a);
}

.arrow_icon {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

.dropdown_menu {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  background-color: var(--white);
  border: 1px solid var(--stroke-c);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: none;
  max-height: 250px;
  overflow-y: auto;
  z-index: 999;
}

.dropdown_search {
  padding: 6px 8px;
  border-bottom: 1px solid var(--stroke-e);
}

.dropdown_search input {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--font-14);
  border: 1px solid var(--stroke-c);
  border-radius: 4px;
  outline: none;
}

.dropdown_search input:focus {
  border-color: var(--primary);
}


.category_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category_list li {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid var(--stroke-e);
}

.category_list li:hover {
  color: var(--white);
  background-color: var(--primary2);
}

.sub_item {
  color: var(--gray5);
}

.hidden_item {
  display: none;
}

/* 오른쪽 Search 영역 */
.docu_search_box {
  display: flex;
  align-items: center;
  gap: 5px;
}

.docu_search_box label {
  font-size: var(--font-14);
  color: var(--gray7);
}

.docu_search_box input[type="text"] {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--stroke-c);
  border-radius: 4px;
  outline: none;
  width: 200px;
}

/* 문서 테이블 */
.doc_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  border: 1px solid var(--stroke-d);

}

.doc_table thead th {
  border: 1px solid var(--stroke-d);
  font-weight: 500;
  text-align: left;
  padding: 10px;
  font-size: var(--font-14);
}

.doc_table tbody td {
  border: 1px solid var(--stroke-d);
  padding: 10px;
  vertical-align: top;
  font-size: var(--font-14);
  color: var(--primary);
  line-height: 1.4;
}

.title_col a:hover {
  color: var(--gray5);
}

.doc_img_wrap {
  display: flex;
}

/* 이미지 */
.doc_table img {
  width: 120px;
  height: 120px;
  /* border-radius: 4px; */
  vertical-align: middle;
  object-fit: cover;
}

/* 토글 아이콘 (모바일 전용) */
.toggle_icon {
  font-size: 20px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  cursor: pointer;
  vertical-align: middle;
}

/* Download 버튼 */
.download_btn {
  display: inline-block;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 6px 12px;
  /* border-radius: 4px; */
  cursor: pointer;
  font-size: var(--font_14);
}

.download_btn:hover {
  background-color: var(--gray5);
}

/* 하단 컨트롤 */
.bottom_controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-14);
  font-weight: 200;
  gap: 20px;
}

.left_bottom {
  display: flex;
  align-items: center;
  gap: 5px;
}

.left_bottom select {
  padding: 4px 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.bottom_pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bottom_pagination .page_item {
  font-size: var(--font-14);
  padding: 6px 10px;
  border-radius: 2px;
  border: 1px solid var(--stroke-c);
  cursor: pointer;
  user-select: none;
}

.bottom_pagination .page_item:hover {
  background-color: #eee;
}

.bottom_pagination .page_item.active {
  background-color: var(--bg400);
  color: var(--gray5);
  border-color: var(--stroke-c);
}


/* ////////////////////////// */
/* sub document-detail */
/* ////////////////////////// */

.ducument_info {
  padding: 6rem 4rem;
  background-color: var(--white);
}

.ducument_info_bottom {
  padding: 5rem 2rem 6rem;
}

/* 문서 제목 */
.doc_title {
  font-size: var(--font-30);
  color: var(--gray3);
  margin-bottom: 2rem;
}

/* 저자, 날짜 등 작은 정보 */
.doc_meta {
  font-size: var(--font-16);
  color: var(--primary);
  margin-bottom: 2rem;
}

.doc_meta a {
  display: inline-block;
}

/* 좌우 레이아웃 컨테이너 */
.layout {
  display: flex;
  gap: 2rem;
}

/* 왼쪽 텍스트 */
.col_left {
  flex: 1;
}

/* 오른쪽 파일 정보 박스 */
.col_right {
  width: 200px;
  flex-shrink: 0;
  border-left: 1px solid var(--stroke-e);
  padding-left: 4rem;
}

.download_btn {
  display: inline-block;
  font-size: var(--font-16);
  background-color: var(--primary);
  color: var(--white);
  padding: .8rem 1.2rem;
  margin-bottom: 1rem;
}

.download_btn:hover {
  background-color: var(--primary);
}

.file_info {
  font-size: var(--font-16);
  color: var(--gray3);
  line-height: 1.5;
}

.file_info p {
  margin: 0.3rem 0;
}

/* 예시 이미지 */
.file_preview {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  display: block;
}

/* 본문 텍스트 */
.doc_content {
  font-size: var(--font-16);
  color: var(--gray3);
  line-height: 1.6;
  margin-top: 1rem;
  padding-right: 3rem;
  font-weight: 200;
}

.doc_content p {
  margin-bottom: 1rem;
}

/* 하단 이전/다음 링크 */
.doc_navigation {
  display: flex;
  justify-content: space-between;
}

.doc_navigation a {
  color: var(--primary);
  font-size: var(--font-16);
}

.doc_navigation a:hover {
  text-decoration: underline;
}



/* ////////////////////////// */
/* sub faq */
/* ////////////////////////// */

/* 상단 배너 */
.container_top {
  background-color: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 4rem 2rem;
  margin-bottom: 3rem;
}

.container_top h1 {
  font-size: var(--font-48);
  font-weight: 500;
  margin-bottom: 2rem;
}

.search_container {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .3) 40%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .2) 100%);
  padding: 3px;
}

.search_container input {
  width: 100%;
  height: 40px;
  border: none;
  outline: none;
  font-size: var(--font-14);
  border-radius: 30px;
  background-color: var(--white);
  padding: 0.75rem 1rem;
  color: var(--gray3);

  ::placeholder {
    color: var(--gray9);
  }
}

.search_icon {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary3);
  width: 40px;
  height: 40px;
  border-radius: 0 30px 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* 카드 그리드 */
.card_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* 카드 스타일 */
.card_box {
  background-color: var(--white);
  border-radius: 4px;
  text-align: center;
  padding: 1.5rem;
  cursor: pointer;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, border 0.2s ease;
}

.card_box:hover {
  transform: translateY(-2px);
}

.card_box.active_card {
  border: 2px solid var(--primary);
}

.card_box img {
  width: 120px;
  margin-bottom: 2rem;
}

.card_title {
  font-size: var(--font-18);
  color: var(--gray3);
}

/* FAQ 섹션 (그리드 아이템으로 삽입되어 전체 폭 차지) */
.faq_section {
  grid-column: 1 / -1;
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  /* margin-top: 1rem; */
  display: none;
  color: var(--gray3);
}

.faq_section h2 {
  font-size: var(--font-14);
  margin-bottom: 1rem;
  font-weight: bold;
  color: var(--gray3);
}

/* FAQ 질문 목록 (3열 그리드) */
.faq_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.faq_list li {
  font-size: var(--font-14);
  padding: .6rem .4rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  line-height: 1.2;
  position: relative;
  margin-left: 1.6rem;
}

.faq_list li::before {
  content: " ";
  position: absolute;
  left: -14px;
  width: 16px;
  height: 16px;
  background: url("/assets/icon/file-text_20x20_primary.svg") no-repeat center center;
  background-size: contain;
}

.faq_list li:hover {
  background-color: var(--bg300);
}

/* 파일 목록 (가로 배치) */
.file_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
}

.file_item {
  border-radius: 4px;
  padding: 1.6rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 1px solid var(--stroke-e);
}

.file_item:hover {
  background-color: var(--bg500);
}

.file_item img {
  width: 32px;
  height: 32px;
  margin-right: .8rem;
}

/* 파일 상세 섹션 */
.file_detail {
  display: none;
  background-color: var(--white);
  border-radius: 8px;
}

.file_header {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid #ca428f;
}

.file_header div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  width: 100%;
}

.btn_file_back {
  width: 100px;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 1rem 1.4rem;
  cursor: pointer;
}

.file_header img {
  width: 40px;
  height: 40px;
  margin-right: 1rem;
}

.file_title {
  font-size: var(--font-16);
  color: var(--gray3);
  font-weight: 500;
}

.file_faq_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.file_faq_list li {
  font-size: var(--font-14);
  padding: .6rem .4rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  position: relative;
  margin-left: 1.4rem;
}

.file_faq_list li::before {
  content: " ";
  position: absolute;
  left: -14px;
  width: 16px;
  height: 16px;
  background: url("/assets/icon/file-text_20x20_primary.svg") no-repeat center center;
  background-size: contain;
}

.file_faq_list li:hover {
  background-color: var(--bg300);
}


/* ////////////////////////// */
/* sub faq_detail */
/* ////////////////////////// */

.faq_detail_wrap {
  display: flex;
}

/* 사이드바 (아코디언) */
.faq_sidebar {
  width: 100%;
  max-width: 300px;
  height: 100%;
  border-right: 1px solid var(--stroke-d);
  box-shadow: 3px 7px 7px 0 rgba(0, 0, 0, .34);
  background-color: var(--bg100);
}

/* 이전 페이지 버튼 */
.btn_faq_back {
  width: 100px;
  background-color: var(--white);
  color: var(--gray3);
  border: 1px solid var(--stroke-a);
  border-radius: 4px;
  padding: 1rem 1.4rem;
  cursor: pointer;
  margin-bottom: 2rem;
}

/* 아코디언 토글 영역 (제목) */
.faq_accordion_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: 1rem;
  font-size: var(--font-16);
  color: var(--gray9);
}

.faq_accordion_toggle:hover {
  background-color: var(--bg500);
}

.faq_accordion_title {
  font-size: var(--font-18);
  color: var(--gray5);
}

/* + / - 아이콘 */
.faq_accordion_icon {
  font-weight: bold;
  font-size: var(--font-16);
  margin-left: 1rem;
  color: var(--gray9);
}

/* 펼쳐질 콘텐츠 */
.faq_accordion_content {
  display: none;
  background-color: var(--white);
}

/* 아코디언 아이템이 open 상태일 때, 콘텐츠 표시 */
.faq_accordion_item.open>.faq_accordion_content {
  display: block;
}

.faq_accordion_sublist {
  padding: 0;
}

.faq_accordion_sublist li {
  font-size: var(--font-16);
  padding: .6rem;
  position: relative;
}

.faq_accordion_sublist a {
  color: var(--black);
  transition: color 0.2s;
  line-height: 1.2;
  margin-left: 1.4rem;
}

.faq_accordion_sublist a::before {
  content: " ";
  position: absolute;
  left: 0;
  /* transform: translate(-50%, -50%); */
  width: 16px;
  height: 16px;
  background: url("/assets/icon/file-text_20x20_primary.svg") no-repeat center center;
  background-size: contain;
}

.faq_accordion_sublist a:hover {
  color: var(--primary);
}

/* 메인 컨텐츠 */
.main_content {
  background-color: var(--white);
  padding: 2rem;
  margin-left: 2rem;
}

/* 제목 */
.article_title {
  font-size: var(--font-24);
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 2rem;
}

/* 본문 */
.article_body {
  font-size: var(--font-14);
  line-height: 1.2;
}

.article_body p {
  font-size: var(--font-16);
  color: var(--gray7);
  margin-bottom: 2rem;
}

.article_body img {
  max-width: 440px;
  height: auto;
  border-radius: 4px;
  margin: 0 auto 2rem;
}

/* 하단 Prev/Next */
.bottom_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--stroke-e);
}

.nav_link {
  max-width: 240px;
  font-size: var(--font-14);
  color: var(--primary);
  border: 1px solid var(--stroke-d);
  padding: 1.4rem 1.2rem;
  border-radius: 4px;
  transition: background-color 0.2s;
  flex: 1;

}

.nav_link:hover {
  background-color: var(--bg500);
}

.nav_link span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav_link span:first-child {
  padding-bottom: .8rem;
}

.nav_link_next {
  text-align: right;
}



/* ////////////////////////// */
/* sub after-sales-services */
/* sub service-announcements */
/* ////////////////////////// */

/* 상단 배너 */
.banner_section {
  position: relative;
  width: 100%;
  height: 400px;
  background: url("/assets/images/support/about-us.webp") no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  opacity: .5;
}

.banner_title {
  max-width: 1440px;
  position: relative;
  font-size: var(--font-64);
  color: var(--white);
  z-index: 1;
  font-weight: bold;
  text-align: left;
  width: 100%;
  padding: 0 20px;
  overflow-wrap: break-word;
}

/* 메인 컨텐츠 */
.supprt_section_wrap {
  background-color: var(--bg300);
  margin: 5em 0;
}

.supprt_section {
  display: flex;
  justify-content: center;
  padding: 6rem 2rem;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
}

.text_area {
  flex: 1;
  font-size: var(--font-16);
  color: var(--gray5);
  line-height: 1.6;
}

.text_area h2 {
  font-size: var(--font-28);
  font-weight: 500;
  margin-bottom: 2rem;
}

.vertical_line {
  position: relative;
  padding-left: 2rem;
  font-weight: bold;
}

.vertical_line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--primary);
}

.text_area p {
  margin-bottom: 1.6rem;
}

.image_area {
  flex: 1;
  display: flex;
  justify-content: center;
}

.image_area img {
  width: 100%;
  max-width: 680px;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


/* ////////////////////////// */
/* sub company-profile */
/* ////////////////////////// */

/* 상단 배너 */
.banner_aboutus_section {
  position: relative;
  width: 100%;
  height: 400px;
  background: url("/assets/images/about_us/Company-Profile.webp");
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutus_breadcrumb {
  margin: 0;
}

.aboutus_section {
  display: flex;
  justify-content: center;
  padding: 6rem 2rem;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
}

.aboutus_section .text_area h2 {
  font-size: var(--font-44);
  color: var(--gray3);
  font-weight: bold;
  line-height: 1.2;
}


/* Services 섹션 */
.services_section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

.services_section h3 {
  font-size: var(--font-34);
  color: var(--gray5);
  font-weight: 100;
  margin-bottom: 4rem;
  line-height: 1.2;
}

.services_container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.services_container a {
  flex: 1;
}

.service_item {
  border: 1px solid var(--stroke-e);
  border-radius: 4px;
  padding: 4rem 2rem;
  transition: background-color 0.3s ease;
  min-height: 240px;
  cursor: pointer;
}

.service_item .item_icon {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
  margin-bottom: 1.6rem;
}

.item_icon_user {
  background-image: url("/assets/icon/user_20x20_pr.svg");
}

.item_icon_star {
  background-image: url("/assets/icon/star_20x20_pr.svg");
}

.service_item:hover {
  background-color: var(--primary);
  color: var(--white);
}

.service_item:hover .service_title,
.service_item:hover .service_desc {
  color: var(--white);
}

.service_item:hover .item_icon_user {
  background-image: url("/assets/icon/user_20x20_wh.svg");
}

.service_item:hover .item_icon_star {
  background-image: url("/assets/icon/star_20x20_wh.svg");
}

.service_title {
  font-size: var(--font-24);
  color: var(--gray3);
  font-weight: 500;
  margin-bottom: 1rem;
}

.service_desc {
  font-size: var(--font-16);
  color: var(--gray7);
  line-height: 1.4;
}




/* ////////////////////////// */
/* sub news-events */
/* ////////////////////////// */
.news_event_content span {
  color: var(--gray9);
  margin-bottom: 1.6rem;
}



/* ////////////////////////// */
/* sub blogs */
/* ////////////////////////// */
.blogs_section {
  width: 100%;
  background-color: var(--bg400);
  padding: 8rem 2rem;
  margin-bottom: 10rem;
  position: relative;
  z-index: 1;
}

.blogs_section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/images/main-bg.webp") no-repeat center center;
  background-size: cover;
  opacity: 0.3;
  z-index: -1;
}

.blogs_container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 2rem;
  margin-bottom: 4rem;
}

.blogs_box {
  display: flex;
  overflow: hidden;
  padding: 1.4rem;
  background-color: var(--white);
}

.blogs_image {
  flex: 1 1 40%;
}

.blogs_image img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/11;
}

.blogs_content {
  flex: 1 1 60%;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blogs_content h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.blogs_content p {
  flex-grow: 1;
  font-size: var(--font-16);
  color: var(--gray5);
  margin-bottom: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

.blogs_content span {
  font-weight: 200;
  color: var(--gray9);
  margin-bottom: 1.6rem;

}

.blogs_content a {
  align-self: flex-start;
  padding: 1rem 0;
  color: var(--primary);
  border: none;
  cursor: pointer;
  font-size: var(--font-14);
}


/* ////////////////////////// */
/* sub contact-us */
/* ////////////////////////// */
.banner_title_wrap {
  max-width: 1440px;
  width: 100%;
  padding: 0 2rem;
}

.banner_title_wrap h1 {
  padding: 0;
}

.banner_aboutus_section p {
  position: relative;
  z-index: 1;
  font-size: var(--font-24);
  color: var(--white);
  padding-top: 1rem;
}

.contactus_section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 6rem 2rem;
  text-align: center;
}

.contactus_section h3 {
  font-size: var(--font-34);
  color: var(--gray5);
  font-weight: 100;
  margin-bottom: 4rem;
  line-height: 1.2;
}

.contactus_container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.contactus_container a {
  flex: 1;
}

.contactus_item {
  border: 1px solid var(--stroke-e);
  border-radius: 4px;
  padding: 7rem 2rem;
  transition: background-color 0.3s ease;
  min-height: 340px;
  cursor: pointer;
}

.contactus_container a:nth-child(2) .contactus_item,
.contactus_container a:nth-child(4) .contactus_item {
  background-color: var(--bg500);
  /* 원하는 배경색으로 변경 */
}

.contactus_item .item_icon {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
  margin-bottom: 1.6rem;
}

.item_icon_mail {
  background-image: url("/assets/icon/mail_20x20_pr.svg");
}

.item_icon_whatsapp {
  background-image: url("/assets/icon/whatsapp_20x20_pr.svg");
}

.item_icon_map {
  background-image: url("/assets/icon/map_20x20_pr.svg");
}

.contactus_title {
  font-size: var(--font-24);
  color: var(--gray3);
  font-weight: 500;
  margin-bottom: 1rem;
}

.contactus_desc {
  font-size: var(--font-16);
  color: var(--gray7);
  line-height: 1.4;
}

/*  Contact + Google Map 섹션 */
.contact_section {
  padding: 60px 20px;
  text-align: center;
  background-color: #f5f5f5;
}

.contact_section h2 {
  font-size: var(--font-44);
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 2rem;
}

.contact_section p {
  font-size: var(--font-16);
  color: var(--gray5);
  line-height: 1.2;
  margin-bottom: 4rem;
}

.contact_container {
  display: flex;
  gap: 20px;
  align-items: stretch;
  justify-content: center;
}

/* 폼 영역 */
.form_area {
  flex: 1;
  background-color: var(--white);
  padding: 4rem 2rem 2rem;
}

.contact_form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form_row {
  display: flex;
  gap: 20px;
}

.form_row .form_row_group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form_row_group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form_row_group label {
  font-size: var(--font-16);
  color: var(--gray5);
  text-align: left;
}

.form_row_group input,
.form_row_group textarea {
  padding: 10px;
  font-size: var(--font-14);
  border: 1px dotted var(--stroke-a);
  border-radius: 4px;
  outline: none;
}

/* focus 점선 */
.form_row .form_row_group input:focus,
.form_row .form_row_group textarea:focus {
  border: 2px dotted var(--stroke-a);
}

.form_row_group textarea {
  min-height: 100px;
  resize: vertical;
}

.send_btn {
  width: 100%;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 12px 20px;
  font-size: var(--font-16);
  border-radius: 4px;
  cursor: pointer;
}

.send_btn:hover {
  background-color: #1c2c53;
}

/* 지도 영역 */
.map_area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.map_area iframe {
  flex: 1;
  /* iframe을 영역 전체에 확장 */
  border: 0;
}

/* 반응형: 767px 이하 -> 세로 배치 */
@media (max-width: 767px) {}




/* ////////////////////////// */
/* footer */
/* ////////////////////////// */
footer {
  width: 100%;
  background-color: var(--black);
  color: var(--white);
  padding: 40px 0;
}

.footer_container {
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem;
  flex-wrap: wrap;
}

.footer_col {
  flex: 1;
  min-width: 200px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer_col h4 {
  margin-bottom: 1.4rem;
}

.footer_col span {
  font-size: var(--font-16);
  color: var(--gray7);
  line-height: 2;
  font-weight: 300;
}

.footer_copy {
  text-align: center;
  margin-top: 2rem;
  font-size: var(--font-14);
  border-top: 1px solid var(--primary);
}

.footer_copy p {
  padding-top: 2rem;
  font-weight: 100;
}





/* 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {

  /* sub .software */
  .software_icon {
    max-width: 120px;
  }

  /* sub sub_solution_list */
  .card_container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* sub sub_solution_detail */
  .blog_container {
    flex-direction: column;
  }

  .blog_right {
    width: 100%;
  }

  .related_grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* 모바일 (767px 이하) */
@media screen and (max-width: 767px) {
  #topButton {
    display: none;
  }

  #floatingButton {
    display: none;
  }

  .menu>li a {
    display: none;
  }

  .top_bar_wrap {
    display: none;
  }

  .gnb {
    height: 48px;
  }

  .gnb .logo_main {
    width: 80px;
  }

  .product_slider_wrapper {
    padding-top: 6rem;
    margin: 0 4rem 0 4rem;
  }

  .three_box_container {
    grid-template-columns: 1fr;
  }

  .news_event_container {
    grid-template-columns: 1fr;
  }


  /* sub .product_list */
  .page_content {
    flex-direction: column;
  }

  .left_column,
  .right_column {
    width: 100%;
    flex: none;
  }

  .product_list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* sub .product_detail */
  .product_container {
    flex-direction: column;
  }

  .slider_for,
  .slider_nav {
    max-width: 800px;
  }

  .spec_table th {
    width: 40%;
  }

  .feature_grid {
    flex-direction: column;
  }

  .related_products_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* sub .software */
  .software_grid {
    grid-template-columns: 1fr;
  }

  .software_card {
    display: block;
  }

  .software_icon {
    padding-bottom: 2rem;
    margin: 0 auto;
  }


  /* sub software_detail */
  .ti_core_container {
    flex-direction: column;
  }

  .ti_core_right {
    margin-top: 20px;
  }

  .ti_application_top {
    justify-content: center;
  }

  .ti_studio_right {
    display: none;
  }

  .ti_core_img {
    max-width: 380px;
  }

  .ti_core_img2 {
    padding: 20% 0 10%;
  }


  /* sub software_detail modal */
  .modal_content {
    flex-direction: column;
    width: 90%;
    max-width: 400px;
  }

  .modal_left,
  .modal_right {
    flex: 1 1 100%;
  }

  .modal_form {
    flex-direction: column;
  }

  .form_group {
    width: 100%;
  }

  .qr_img {
    width: 150px;
    height: 150px;
  }

  /* sub sub_solution_list */
  .tab_menu {
    flex-direction: column;
    gap: 5px;
  }

  .card_container {
    grid-template-columns: 1fr;
  }

  /* sub sub_solution_detail */
  .recommended_container {
    grid-template-columns: 1fr;
  }

  .most_popular_list {
    grid-template-columns: 1fr;
  }

  .related_grid {
    grid-template-columns: 1fr;
  }

  /* sub document-library */
  .categories_col,
  .filesize_col,
  .link_col {
    display: none;
  }

  .details_row {
    display: none;
  }

  .details_row.open {
    display: table-row;
  }

  .details_row td div {
    padding: 8px 0;
  }

  .details_row td div a {
    display: inline-block;
  }

  .details_row td div .details_row_cate {
    color: var(--primary);
  }

  .details_row td div .details_row_cate:hover {
    color: var(--gray3);
  }

  .doc_image {
    cursor: pointer;
  }

  .top_controls {
    flex-direction: column;
    align-items: baseline;
  }

  .dropdown_toggle {
    margin-bottom: .8rem;
  }

  .bottom_controls {
    margin-bottom: 2rem;
  }

  /* sub document-detail */
  .layout {
    flex-direction: column;
  }

  .col_right {
    order: -1;
    width: auto;
    margin-bottom: 1.5rem;
    border: none;
    padding: 0;
  }

  .col_left {
    order: 2;
  }

  .file_preview {
    max-width: 300px;
    margin: 0 auto;
  }


  /* sub faq */
  .card_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .faq_list,
  .file_faq_list {
    grid-template-columns: 1fr;
  }

  .file_list {
    flex-direction: column;
  }


  /* sub faq_detail*/
  .faq_detail_wrap {
    flex-direction: column;
  }

  .faq_sidebar {
    order: 2;
    max-width: 100%;
    width: 100%;
    margin-top: 2rem;
  }

  .main_content {
    margin-left: 0;
  }

  .bottom_nav {
    flex-direction: column;
  }

  .nav_link {
    max-width: 100%;
    width: 100%;
  }

  .nav_link_prev {
    margin-bottom: 1.2rem;
  }


  /* sub after-sales-services */
  .supprt_section {
    flex-direction: column;
    /* padding: 4rem 2rem; */
  }

  .text_area,
  .image_area {
    width: 100%;
  }

  /* sub company-profile */
  .aboutus_section {
    flex-direction: column;
  }

  .services_container {
    flex-direction: column;
  }

  .service_item {
    margin-bottom: 20px;
  }


  /* sub contact-us */
  .contactus_container {
    flex-direction: column;
  }

  .contactus_item {
    min-height: 160px;
    padding: 2rem 2rem;
  }

  .text_area,
  .image_area {
    width: 100%;
  }

  .contact_container {
    flex-direction: column;
  }

  .form_area,
  .map_area {
    width: 100%;
    min-width: auto;
    margin-bottom: 20px;
  }

  .map_area {
    min-height: 400px;
  }

  .form_row {
    flex-direction: column;
  }





}


/* 모바일 (480px 이하) */
@media screen and (max-width: 480px) {

  /* sub .software_detail */
  .ti_app_img {
    max-width: 90%;
    padding: 2rem;
  }

  /* sub .software_detail modal */
  .modal_content {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }

}


/* 데스크탑 (768px 이상) */
@media screen and (min-width: 768px) {
  .menu_mobile {
    display: none;
  }

  /* sub_document-library */
  .controls_wrap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  /* sub document-library */
  .toggle_icon {
    display: none;
  }

  .details_row {
    display: none !important;
  }

}

/* (1025px 이상) */
@media screen and (min-width: 1025px) {

  /* sub sub_solution_detail */
  .most_popular_list {
    grid-template-columns: 1fr;
  }
}