@charset "utf-8";

/* 컨테이너 영역 */
#container {background: #F4F0F7; }
#container .inner {margin:0 auto;}

/* 기본 레이아웃 스타일 */
.main-sect {margin-top: var(--krds-gap-11);}
.main-sect .inner {display: flex; align-items: normal; justify-content: flex-start; flex-direction: column; gap: var(--krds-pc-gap-layout-title-body-large);}

/* 3단 레이아웃 */
.three-column-layout { display: flex; max-width: 192rem; width: 100%;  margin: 0 auto;  }

/* left 레이아웃 */
.left-column { /*width:calc(64rem -9.6rem);*/ max-width: 64rem; min-height: 98rem; padding:0 4.8rem;background-image: url(../../../img/frt/main/aside.png);background-repeat: no-repeat;margin-right: 4rem;background-size: cover; margin-right: 4rem;position: sticky; top: 0; align-self: flex-start;}

/* 왼쪽 컬럼 스타일 */
.visual-area { margin: 4.8rem 0 0 0; text-align: left;}
.visual-area .visual-title { font-size: 5.3rem;width: 54.4rem;color: #fff;line-height: 1.2; font-family: 'Anton', sans-serif; font-weight: normal; margin-bottom: 3.6rem;}

.search-container { position: relative; max-width: 100%; margin: 0 auto;}
.search-container .search-input:focus {color: white;}
.search-container .search-input { width: 100%; height: 6.4rem; padding: 15px 50px 15px 20px; border:1px solid rgba(255,255,255,0.25); border-radius: 10px;
  background: rgba(255, 255, 255, 0.25); font-size: 2.4rem; color: #fff; font-weight: 600; backdrop-filter: blur(10px);}
.search-container .search-input:focus {color: white;}
.svg-icon.ico-sch {-webkit-mask-image: none !important; mask-image: none !important;background:url(../../../img/frt/main/icon_size.png); width:4rem; height: 3.5rem;} 
.search-input::placeholder {color: rgba(255, 255, 255, 0.25); font-size: 2.4rem; }
.search-input:focus {outline: none;color: rgba(255, 255, 255, 0.25);  }
.search-btn {position: absolute; right: 1.6rem; top: 51%; transform: translateY(-50%); background: none; border: none;  cursor: pointer;}


/* About Marketplace 섹션 */
.about-marketplace { color: #fff; border:1px solid #FFFFFF40; border-radius: 12px; opacity: 1; width: 100%; height: 63.3rem; margin-top: 3.6rem; padding: 3rem 3.2rem 0 3.2rem;}
.about-marketplace h3.section-title {font-size: 3.2rem; font-weight: 700; text-align: left; }

/* 서비스 카드들 */
.service-cards { display: flex; flex-direction: row; gap: 12px; margin:1.3rem 0 0 0; height: 20.5rem;}
.service-cards .service-card { flex: 1; background: rgba(255, 255, 255, 0.25); border-radius: 12px; padding: 2rem 1.2rem 0 1.2rem;  backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;}
.card-icon01 { display: block;height: 4rem; background:url(../../../img/frt/main/icon01.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; }
.card-icon02 { display: block;height: 3.7rem; background:url(../../../img/frt/main/icon02.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; }
.card-icon03 { display: block;height: 3.7rem; background:url(../../../img/frt/main/icon03.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; }
.service-card:hover { background: rgba(255, 255, 255, 0.25);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);}
.service-card h3 { text-align: center; font-size: 1.9rem; font-weight:700; margin:0.8rem 0;  color: #fff;}
.service-card p { font-size: 1.3rem; font-weight: 400;  line-height: 1.4;  opacity: 0.9;  color: #fff; text-align: left;margin-top:0.2rem;}

/* 통계 섹션 */
.stats-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 1.2rem;}
.stat-item {height: 10rem; background: rgba(255, 255, 255, 0.1);  border-radius: 12px;  padding: 1.5rem 1.0rem;  backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;}
.stat-item:hover { background: rgba(255, 255, 255, 0.25);  transform: translateY(-2px);}
.stat-label { font-size: 1.3rem; font-weight: 700; color: #fff;}
.stat-number { display: block;  font-size: 2.4rem; font-weight: 700; color: #fff; text-align: right; margin-top:1.5rem;}

/* 캐러셀 섹션 */
.carousel-section { position: relative; margin-top: 1.2rem; }
/* 메인 캐러셀 Swiper 스타일 */
.main-carousel-swiper { width: 100%; height: 18rem;  max-width: 48rem; border-radius: 0.8rem; overflow: hidden;  position: relative; background: rgba(255, 255, 255, 0.8);}
.main-carousel-swiper .swiper-slide { width: 100%; height: 100%;}
.main-carousel-swiper .carousel-image { width: 100%; height: 100%; position: relative;}
.main-carousel-swiper .carousel-image img { width: 100%;  height: 100%; object-fit: cover;}
.swiper-slide .overlay-text { position: absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;}

/* 메인 캐러셀 버튼 스타일 */
.carousel-controls { position: absolute; bottom: 0; left: 0; right: 0;  display: flex;  justify-content: space-between;  align-items: center; height: 3.2rem; padding: 0 2rem;
  background-color: rgba(0, 0, 0, 0.9);  backdrop-filter: blur(5px);  border-radius: 0 0 0.8rem 0.8rem;  z-index: 10; pointer-events: auto;}
.carousel-progress { display: flex; align-items: center; gap: 10px;  flex: 1; }
.carousel-progress .progress-bar { flex: 1; height: 0.4rem;  background: #E6E8EA; border-radius: 2px;  overflow: hidden;}
.carousel-progress .progress-bar .progress-fill { width: 20%; height: 100%; background: #3D9FB8; border-radius: 2px; transition: none;  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);}
.carousel-progress .carousel-pagination { font-size: 1.3rem; font-weight: 400;  color: #ffffff; min-width: 3rem; margin-left: 3.5rem;  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}

.carousel-arrows { display: flex; gap:1.0rem; margin-left: 2.5rem; }
.carousel-arrows .arrow-btn { width: 1.6rem; height:1.6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 11; pointer-events: auto; position: relative;}
.carousel-arrows .svg-icon.ico-angle {background:url(../../../img/frt/main/icon-next.svg); background-repeat: no-repeat; }
.carousel-arrows .svg-icon.ico-swiper-stop { -webkit-mask-image: none !important; mask-image: none !important;background:url(../../../img/frt/main/icon-pause.svg); background-repeat: no-repeat; background-size:contain;  background-position: center center;
 width: 1.6rem; height:1.6rem; }
.carousel-arrows .svg-icon.ico-swiper-play {-webkit-mask-image: none !important; mask-image: none !important;background:url(../../../img/frt/main/icon-play.svg); background-repeat: no-repeat;width: 1.6rem; height:1.6rem; }
.carousel-arrows .svg-icon.ico-angle.left {transform:rotate(180deg);width: 1.6rem; height:1.6rem; }
.carousel-arrows .svg-icon.ico-angle.right {transform:rotate(360deg);width: 1.6rem; height:1.6rem; }
.carousel-arrows .arrow-btn:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);}
.carousel-arrows .arrow-btn.play-pause:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);}
.carousel-arrows .svg-icon.ico-angle {mask-image:none;-webkit-mask-image:none;}


/* Swiper 네비게이션 버튼 숨기기 (커스텀 버튼 사용) */
.main-carousel-swiper .swiper-button-next,
.main-carousel-swiper .swiper-button-prev { display: none;}
.svg-icon.ico-angle {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: contain;
  -webkit-mask-image: none !important; 
  mask-image: none !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background: url(../../../libs/krds/img/component/icon/ico_angle.svg);
}


/* 오른족 컬럼 스타일 */
.right-column { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: 128rem; width: 100%; min-height: 90rem; gap: 40px; margin:40px 0; margin-right: 4rem;}

/* Company */
.company-section {padding:3.2rem; max-width: 58rem; width: 50%; height: 59rem; background: #fff; border-radius: 15px;border:#B1B8BE solid 1px; overflow:hidden;}
.company-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom:1.2rem;}
.company-section .section-header h3 { font-size: 2.4rem; font-weight: bold; color: #1E2124; margin: 0;}
.company-section .section-header .plus-btn { background: none; border: none; cursor: pointer; height: 2.4rem; }

/* Company 그리드 */
.company-section .company-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.company-section .company-grid > a { display: block; width: 100%; max-width: 100%; text-decoration: none; color: inherit; box-sizing: border-box; min-width: 0;}
.company-section .company-item { width: 100%; height: 15.2rem; background: #f8f9fa; border-radius: 1.2rem; padding:0; transition: all 0.3s ease; border: 1px solid #B1B8BE; overflow:hidden; box-sizing: border-box;}
.company-section .company-grid > a:hover .company-item { background: #e9ecef; transform: translateY(-2px);}
.company-section .company-item .company-img { display: flex;width: 100%; background: #fff; text-align: center; justify-content: center;align-items: center;  height: 7.6rem; overflow:hidden; background:#fff url(../../../img/frt/main/noImg.svg) no-repeat; background-position:center; background-size: 50%;}
.company-section .company-item .company-img p.imgBox {display: flex; display: -webkit-flex;height: 100%; width: 100%; align-items: center; object-fit: cover; justify-content: center;background:#fff; padding:1rem;}
.company-section .company-item .company-img p.imgBox img {object-fit: contain; max-width: 100%; height:auto; width:100%; max-height: 100%; }
.company-section .company-item .company-logo { display: block; font-size: 1.5rem; color: #1E2124; font-weight: 700; padding: 1.0rem 0.8rem 0 0.8rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0;}
.company-section .company-item .company-info { display: flex; flex-direction: column; gap:3px; min-width: 0; width: 100%; overflow: hidden;}
.company-section .company-item .main-products, .genre { font-size: 1.2rem; font-weight: 400; color: #464C53; padding: 0 0.8rem 0 0.8rem; }
.company-section .company-item .main-products, .genre {width: 100%; height: 1.8rem;  overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.company-section .company-item .genre {margin-top: -0.3rem;}

/* content */
.content-section {padding:3.2rem; max-width: 58rem;width: 50%; height: 59rem;  background: #fff; border-radius: 15px;border:#B1B8BE solid 1px; overflow:hidden;}
.content-section .section-header { display: flex; justify-content: space-between; align-items: center; }
.content-section .section-header h3 { font-size: 2.4rem; font-weight: bold; color: #1E2124; margin: 0;}
.content-section .section-header .plus-btn { background: none; border: none; cursor: pointer; height: 2.4rem; }

/* content_카테고리 필터 */
.content-section .genre-slider {margin:0;  position: relative; /*height:15rem; */display: flex; align-items: center; gap: 1rem;}
.genre-slider .category-swiper {  position: relative;flex: 1; width: auto;height:10rem; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; }
.genre-slider .category-swiper.swiper-initialized { opacity: 1; margin:3rem 4.2rem;}
.genre-slider .category-swiper .swiper-wrapper {width: 100%; padding: 0; box-sizing: border-box;  }
.genre-slider .category-swiper .swiper-slide { width: auto; flex-shrink: 0;}

.content-section .genre-slider-item {position: relative;; flex-direction: column; align-items: center; padding: 8px; cursor: pointer; /*transition: all 0.3s ease;*/ width:10rem; height: 10rem; min-width: 10rem;min-height: 10rem;  border-radius: 50%;}
.genre-slider-item .filter-icon {position: absolute;left:0; top:1.9rem; display: flex; align-items: center;  justify-content: center;width: 100%; height: 4rem;}
.genre-slider-item .filter-icon img {width: 3.6rem; height: 3.6rem;}
.genre-slider-item .filter-count { position: absolute;left:0; top:2.3rem;font-size: 2.3rem;font-weight: 700;color: #464C53;display: none;align-items: center; justify-content: center; text-align: center;width: 100%; height: 4rem; }
.genre-slider-item span { position: absolute; left:0; top:6rem; width: 100%; font-size: 1.2rem;  text-align: center;font-weight:700; line-height:100%; text-align: center; color:#464C53; }

/* 장르 슬라이더 아이템 배경색 클래스들 */
.genre-slider-item.bg-green {background: #EAF6EC; }
.genre-slider-item.bg-yellow {background: #FFF3DB; }
.genre-slider-item.bg-sky {background: #E7F4FE; }
.genre-slider-item.bg-blue {background: #ECF2FE; }
.genre-slider-item.bg-pink {background: #FBEFF0; }
.genre-slider-item.bg-gray {background: #E6E8EA; }

/* 장르 활성화된 아이템의 배경색 */
.genre-slider-item.bg-green.active{border: #D8EEDD solid 5px; box-sizing: border-box;}
.genre-slider-item.bg-yellow.active{border: #FFE0A3 solid 5px; box-sizing: border-box;}
.genre-slider-item.bg-sky.active{border: #D3EBFD solid 5px; box-sizing: border-box;}
.genre-slider-item.bg-blue.active{border: #D8E5FD solid 5px; box-sizing: border-box;}
.genre-slider-item.bg-pink.active{border: #F5D6D9 solid 5px; box-sizing: border-box;}
.genre-slider-item.bg-gray.active{border: #CDD1D5 solid 5px; box-sizing: border-box;}
.genre-slider-item.active .filter-count {top:1.8rem;}
.genre-slider-item.active .filter-icon{top:1.4rem; }
.genre-slider-item.active span {top:5.5rem; }

/* 장르카테고리 필터 Swiper 버튼 스타일 */
.genre-slider .swiper-button-next,
.genre-slider .swiper-button-prev { width: 3.2rem; height: 3.2rem;border:##CDD1D5 solid 1px; color: #666; cursor: pointer; border-radius: 50%; transition: all 0.3s ease; display: flex;
  position:absolute; top:6.3rem;margin: 0;}
.genre-slider .swiper-button-prev {left:0; }
.genre-slider .swiper-button-next {right:0;}
.genre-slider .swiper-button-prev .svg-icon.ico-angle.left {align-items: center;justify-content: center; background-position:center center; }
.genre-slider .swiper-button-next .svg-icon.ico-angle.right {align-items: center;justify-content: center; background-position:center center;  }
.genre-slider .swiper-button-next .svg-icon.ico-angle {width: 2.4rem; height:2.4rem; content: "";  background-repeat: no-repeat;transform:0; position: absolute;left:0.5rem;}
.genre-slider .swiper-button-next::after { background: none;}


/* content_카테고리 그리드 */
.content-section .content-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 0; overflow: hidden; }

/* 콘텐츠 아이템 초기 숨김 설정 */
.content-section .content-item { display: none; }
.content-section .content-item {gap: 1.2rem; min-height: 15rem; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; }

.content-sumnail { width: 16.2rem; height: 7.6rem;border-radius: 1.1rem; overflow: hidden;  position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.content-sumnail::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(4px); opacity: 80%; z-index: 1; }
.content-sumnail img { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  z-index: 3;}

.content-section .content-item .content-info {padding-top:1rem; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important;}
.content-section .content-item .content-info p.content-tit { font-size: 1.5rem; font-weight: 700; color:#1E2124; width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; box-sizing: border-box !important; max-width: 100% !important;}
.company, .type { font-size: 1.2rem;font-weight:400; color: #464C53; display: block;width: 95%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 1.1rem;}  

.content-section .view-all {text-align: right;margin-top:0.3rem;}
.content-section .view-all-link {color: #1E2124;text-decoration: none;font-size: 1.5rem; font-weight: 400;}
.content-section .view-all-link:hover {text-decoration: underline;}


/* 바닥 레이아웃 */
.bottom-column { max-width: 1280px; width: 100%; height: 27rem; display: flex; gap:40px; align-items: center; }

.business-info-section {background: #fff; border-radius: 15px;padding:3.0rem;border:#B1B8BE solid 1px; }

/* Business Info */
.business-info-section {position: relative;max-width: 27rem; height: 27rem;}
.business-info-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom:1.2rem;}
.business-info-section .section-header h3 { font-size: 2.4rem; font-weight: bold; color: #1E2124; margin: 0;}
.business-info-section .section-header .plus-btn { background: none; border: none; cursor: pointer; height: 2.4rem; }

/* Business Info Swiper 수정 */
.business-info-swiper {position: relative; height: 19rem;width: 100%; overflow: hidden; opacity: 0; transition: opacity 0.3s ease;}
.business-info-swiper.swiper-initialized { opacity: 1; padding: 0;margin:0; }
.business-info-swiper .swiper-wrapper {position: relative;  width: 100%; height: 15rem;}
.business-info-swiper .swiper-slide { width: 100%; flex-shrink: 0;}
.business-info-swiper .swiper-slide a {display:block;width:100%; height:100%;}

.business-info-content { margin-bottom: 0; width: 100%; gap:8px;}
.business-info-content .info-date { font-size: 1.2rem;font-weight: 400;  color: #1E2124; }
.business-info-content .info-title { font-size: 1.5rem; font-weight: 700; color: #1E2124; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin:0.8rem 0;}
.business-info-content .info-text { font-size: 1.2rem; font-weight: 400; color: #464C53; line-height: 1.4; height:5rem;  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; text-overflow: ellipsis; max-height: 5rem; margin-top:0.4rem; }

/* Business Info 컨트롤 버튼 컨테이너 */
.business-info-swiper .swiper-button-next,
.business-info-swiper .swiper-button-prev { position: static; display: inline-flex; margin: 0; transform: none;margin-bottom: 30px;}
.business-info-swiper .swiper-button-prev .svg-icon.ico-angle {width: 1.6rem; height:1.6rem; content: ""; background:url(../../../img/frt/main/business-button-pre.svg); background-repeat: no-repeat;transform:rotate(0deg); }
.business-info-swiper .swiper-button-next .svg-icon.ico-angle {width: 1.6rem; height:1.6rem; content: ""; background:url(../../../img/frt/main/business-button-pre.svg); background-repeat: no-repeat;transform:rotate(180deg); }
.business-info-swiper .swiper-button-prev .svg-icon.ico-angle:hover { background:url(../../../img/frt/main/business-button-pre-on.svg);background-repeat: no-repeat; }
.business-info-swiper .swiper-button-next .svg-icon.ico-angle:hover { background:url(../../../img/frt/main/business-button-pre-on.svg);background-repeat: no-repeat; }
.business-info-swiper .swiper-button-prev {position: absolute; left:16rem;top:83%;width: 1.6rem; height:1.6rem; border:none; background: none;}
.business-info-swiper .swiper-button-next {position: absolute; right:0.5rem; top:83%;width: 1.6rem; height:1.6rem;border:none; background: none;  }
.business-info-swiper .swiper-button-next::after, .swiper-button-prev::after { background: none; border:none; width:0;}
.business-info-swiper .swiper-button-prev:active { border:none; background:none;}
.business-info-swiper .swiper-button-next .svg-icon.ico-angle {mask-image:none;-webkit-mask-image:none;}
.business-info-swiper .swiper-button-prev .svg-icon.ico-angle {mask-image:none;-webkit-mask-image:none;}


/* webinar */
.webinar-section {position: relative;background: #fff; border-radius: 15px;border:#B1B8BE solid 1px; padding:3.0rem; max-width: 27rem; height: 27rem;}
.webinar-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom:1.2rem;}
.webinar-section .section-header h3 { font-size: 2.4rem; font-weight: bold; color: #1E2124; margin: 0;}
.webinar-section .section-header .plus-btn { background: none; border: none; cursor: pointer; height: 2.4rem; }
/* webinar-swiper */
.webinar-swiper { width: 100%;height: 19rem; overflow: hidden; opacity: 0; transition: opacity 0.3s ease;}
.webinar-swiper.swiper-initialized {opacity: 1;}
.webinar-swiper .swiper-wrapper { width: 100%;}
.webinar-swiper .swiper-slide {position: relative; width: 100%; flex-shrink: 0;}
/* webinar-text */
.webinar-content {width: 100%; height: 17rem; }
.webinar-sumnail {position: relative; width: 100%; height: 10.2rem; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);}
.webinar-sumnail img {width: 100%; height: 100%; object-fit: cover; opacity: 0.8;}
.webinar-title { font-size: 1.5rem; height: 4.2rem;font-weight: 700; color: #1E212; line-height: 1.4;margin-top: 0.8rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; text-overflow: ellipsis; max-height: 4.2rem; }

/* webinar-swiper 컨트롤 버튼 컨테이너 */
.webinar-swiper .swiper-button-next,
.webinar-swiper .swiper-button-prev { position: static; display: inline-flex; margin: 0;}
.webinar-swiper .swiper-button-prev .svg-icon.ico-angle {width: 1.6rem; height:1.6rem; content: ""; background:url(../../../img/frt/main/business-button-pre.svg); background-repeat: no-repeat;transform: none; }
.webinar-swiper .swiper-button-next .svg-icon.ico-angle {width: 1.6rem; height:1.6rem; content: ""; background:url(../../../img/frt/main/business-button-pre.svg); background-repeat: no-repeat;transform:rotate(180deg); }
.webinar-swiper .swiper-button-prev .svg-icon.ico-angle:hover { background:url(../../../img/frt/main/business-button-pre-on.svg);background-repeat: no-repeat; }
.webinar-swiper .swiper-button-next .svg-icon.ico-angle:hover { background:url(../../../img/frt/main/business-button-pre-on.svg);background-repeat: no-repeat; }
.webinar-swiper .swiper-button-prev {position: absolute; left:16rem;top:83%;width: 1.6rem; height:1.6rem; border:none; background: none;}
.webinar-swiper .swiper-button-next {position: absolute; right:0.5rem; top:83%;width: 1.6rem; height:1.6rem;border:none; background: none;  }
.webinar-swiper .swiper-button-next::after, .swiper-button-prev::after { background: none; border:none; width:0; height: 0;}
.webinar-swiper .swiper-button-prev:active { border:none; background:none;}
.webinar-swiper .swiper-button-next .svg-icon.ico-angle {mask-image:none;-webkit-mask-image:none;}
.webinar-swiper .swiper-button-prev .svg-icon.ico-angle {mask-image:none;-webkit-mask-image:none;}


/* Features & Archive 컨테이너 */
.features-archive-container {max-width: 58rem; width: 50%; }

/* Features 섹션 */
.features-section{ position: relative;flex: 1; max-width: 27rem;height: 27rem;border-radius: 1.2rem;}
.features-sumnail {position: relative; width: 100%; height: 27rem; border-radius: 10px; overflow: hidden;}
.features-sumnail::before {content: ''; position: absolute;top: 0; left: 0;width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.5); }
.features-sumnail img { width: 100%; height: 100%; object-fit: cover;}

.features-info a {display: block;}
.features-content {position: absolute; top:0;display: flex; flex-direction: column; padding:3rem 3rem; width: 100%; height: 100%;z-index: 10;box-sizing: border-box;}
.features-content .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom:1.2rem;z-index: 20;}
.features-content .section-header h3 { font-size: 2.4rem; font-weight: bold; color: #fff; margin: 0;}
.features-content .section-header .plus-btn { background: none; border: none; cursor: pointer; height: 2.4rem; }
.features-content .section-header .svg-icon.ico-plus {background:url(../../../img/frt/main/icon-btn-more.svg);}

.features-content .features-date {color:#fff; font-size: 1.2rem; font-weight: 400; display: inline-block; margin-bottom: 6px;}
.features-content .features-tit { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px;color:#fff;   line-height: 1.4; height: calc(1.5rem * 1.4 * 2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; text-overflow: ellipsis;  }
.features-content .features-details {display: flex; flex-direction: column;font-size: 1.2rem; font-weight: 400; gap: 0.4rem; color: #fff;overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; text-overflow: ellipsis; }
.fcon-bg {background-color:#fff;border-radius: 1.2rem;border:#B1B8BE solid 1px; position: static;}
.fcon-bg .section-header h3 {color: #1E2124;}
.fcon-bg .features-date { color: #1E2124;}
.fcon-bg .features-tit { color: #1E2124;}
.fcon-bg .features-details { color: #464C53;}
.fcon-bg .section-header .svg-icon.ico-plus {background: none; border: none; cursor: pointer; height: 2.4rem;mask-image:none;-webkit-mask-image:none;background-image: url(../../../libs/krds/img/component/icon/ico_plus.svg); }


/* Archive 섹션 */
.archive-section { flex: 1; max-width: 27rem;height: 27rem;border-radius: 1.2rem;border:#B1B8BE solid 1px; padding:4rem;}
.archive-section {position: relative;background: #fff; border-radius: 15px;border:#B1B8BE solid 1px; padding:3.0rem; max-width: 27rem; height: 27rem;}
.archive-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom:1.2rem;}
.archive-section .section-header h3 { font-size: 2.4rem; font-weight: bold; color: #1E2124; margin: 0;}
.archive-section .section-header .plus-btn { background: none; border: none; cursor: pointer; height: 2.4rem; }

.archive-section .archive-content {display: flex;flex-direction: column;gap: 12px;}
.archive-section .archive-item {padding-bottom: 12px;border-bottom: 1px solid #f0f0f0;}
.archive-section .archive-item:last-child {border-bottom: none; padding-bottom: 0;}

.archive-section .archive-tit {font-size:1.5rem; font-weight: 700; color: #1E2124;margin-bottom: 0.4rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.archive-section .archive-date {font-size: 1.2rem; font-weight: 400; color:#AB2B36;}
.archive-section .archive-thumbnail { width: 100%; height: 7.6rem; border-radius: 0.8rem; overflow: hidden; margin-top: 0.4rem; background:#f4f5f6 url(../../../img/frt/main/noImg.svg) no-repeat; background-position:center;}
.archive-section .archive-thumbnail img { width: 100%; height: 100%; object-fit: cover;}



/* 뷰포트 너비가 1920px 이상일 때 적용 */
@media (min-width: 1920px) {    
	.inner {padding-left:0; padding-right: 0;}
    .three-column-layout { display: flex; }
    .right-column { /*gap:25px;*/ margin-right: 0;}
    .company-section {max-width:58rem; }
    .content-section {max-width:58rem;}
}

/* 뷰포트 너비가 1769px-1919 이하일 때 적용 */
@media (min-width: 1769px) and (max-width: 1919px) {    
    .inner {padding-left:0; }
    .right-column {max-width: 121rem; width: 121rem;/*min-height: 90rem;*/gap: 4rem;margin: 4rem 0; margin-right: 0; margin-left: auto; flex-direction: row; flex-wrap: wrap; flex-shrink: 0; justify-content: flex-end; }    
    .left-column {flex: 1; max-width: calc(100% - 121rem - 4rem); width: auto;  padding: 0 2%; background-size: cover; background-position: center; background-repeat: no-repeat; }
    
    .company-section,
    .content-section {width: calc(50% - 2rem); flex-shrink: 0; }
    
    .visual-area .visual-title {width: 100%;font-size: 4.1rem;margin-bottom:2rem;  }    
    .about-marketplace {height: auto;min-height: 60rem;padding: 2rem 2rem 2rem 2rem;margin:2.5rem 0;}    
    .service-cards .service-card {padding:1.5rem 1.2rem 1.5rem 1.2rem;}
    .service-cards {width: 100%; flex-wrap: wrap; height: auto; min-height: 12rem; margin: 1rem 0 0 0;}    
    .stats-section {width: 100%; grid-template-columns: repeat(3, 1fr); margin-top: 1rem;gap: 0.5rem;}    
    .stat-item { height: auto;min-height: 8rem; padding: 1rem 0.5rem; }
    .main-carousel-swiper {max-width:100%; height:25rem;}
    .bottom-column {width: 121rem; justify-content: flex-end;}
}

@media (min-width: 1639px) and (max-width: 1768px) {      
    .inner {padding-left:0; }
    
    /* 3단 레이아웃 가변형 조정 */
    .three-column-layout {display: flex;max-width: 100%;width: 100%; margin: 0 auto; }

    /* left-column 30% 너비로 조정 */
    .left-column { flex: 1; width: calc(100% - 70%); max-width: none;min-height:100%; padding: 0 2.4rem; background-image: url(../../../img/frt/main/aside.png); background-repeat: no-repeat; background-size: cover; margin-right: 2rem; }


    /* left-column 내부 요소들 가변형 조정 */
    .visual-area .visual-title { width: 100%; font-size: 4.2rem; margin-bottom: 2rem; }
    .about-marketplace {height: auto;min-height: 60rem;padding: 2rem; margin-bottom: 3rem; margin-top:2.5rem;}
    .service-cards .service-card {padding:2rem 1.2rem;}
    .service-cards { display: flex; flex-direction: row; gap: 0.6rem; margin: 1rem 0 0 0; height: auto; min-height: 15rem; width: 100%; box-sizing: border-box; } 
    .service-cards { width: 100%; flex-wrap: wrap; height: auto;min-height: 12rem; margin: 1rem 0 0 0; } 
    .stats-section { width: 100%; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; gap: 0.5rem; }    
    .stat-item {height: auto; min-height: 8rem; padding: 1rem 0.5rem; }
    .main-carousel-swiper {height:18rem;}

    /* 오른쪽 컬럼: 55% 너비, left-column 고정에 맞춤 */
    .right-column {width:70%; max-width: none; min-height: auto;gap: 2rem;margin: 0 0 0 0; padding: 3rem 0 2rem 0; display: flex;flex-direction: row;flex-wrap: wrap;align-items: stretch;}

    /* Company 섹션: 48% 너비, 가로 배치 */
    .company-section {width: 48%; max-width: none; min-height: auto; padding: 2rem; flex-shrink: 0; }

    /* Content 섹션: 48% 너비, 가로 배치 */
    .content-section { width: 48%; max-width: none;  min-height: auto; padding: 2rem;  border-radius: 1.2rem; flex-shrink: 0; }
    .company-section .section-header {margin-bottom:3rem;}
    /* Company 섹션 그리드 가변 크기 조정 */
    .company-section .company-grid { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 1rem; margin-top:2rem;}     
    .company-section .company-item { width: 100%; /*height: auto; */min-height: none; padding:0 0 1rem 0; box-sizing: border-box; }  

    /* Content 섹션 내부 요소들 가변 크기 조정 */
    .content-section .section-header {margin-bottom:1.5rem;}
    .content-section .content-grid {margin-top:1.5rem;}
    .content-section .genre-slider { margin: 0; position: relative; display: flex; align-items: center; gap: 0.8rem; }
    .genre-slider .category-swiper { position: relative; flex: 1; width: auto; height: auto; min-height: none; overflow: hidden; opacity: 0; transition: opacity 0.3s ease;}  
    .genre-slider .category-swiper.swiper-initialized { opacity: 1; margin: 1.5rem 2.5rem 1.5rem 3rem;}
    .content-section .genre-slider-item {width:10rem; height: 10rem;} 
    .genre-slider .swiper-button-next {display: flex;position: absolute;top: 5rem;right:-1rem;margin: 0; z-index: 5; }
    .genre-slider .swiper-button-prev {display: flex;position: absolute;top: 5rem;left:-1rem;margin: 0; z-index: 5; }

    /* Content 그리드 가변 크기 조정   */
    .content-section .content-grid {display: grid;grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 0; }

    /* Content 아이템 가변형 설정 (1280px-1699px에서만) */
    .content-section .content-item { display: none; width: 100%; height: auto; min-height: 9rem; gap: 1rem; box-sizing: border-box; }
    .content-sumnail {width: 100%; height: auto; min-height: 9rem;}
    .content-item .content-info {width: 100%; box-sizing: border-box;}
    .content-item .content-info p.content-tit {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3rem;}
    .company, .type {width: 100%; word-wrap: break-word; font-size: 1.1rem;}  

    /* Bottom-column 2×2 그리드 배치 */
    .bottom-column { max-width: 100%; width: 100%; height: auto; padding-right:2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; gap: 2rem; align-items: stretch; flex-basis: 100%; }

    /* Bottom-column 내부 섹션들 가변 크기 조정 */
    .business-info-section,
    .webinar-section,
    .archive-section {width: 100%;max-width:none;min-height: 20rem;padding: 2rem;background: #fff; border-radius: 1.2rem; border: #B1B8BE solid 1px; overflow: hidden; box-sizing: border-box; }
    .features-section {width: 100%;max-width:none;min-height: 20rem; }
    .features-section .features-content{padding:2rem; }

    .business-info-section .section-header,
    .webinar-section .section-header,
    .archive-section .section-header {display: flex; justify-content: space-between; align-items: center;margin-bottom: 1.6rem; }
   
    .archive-section .archive-thumbnail {margin-top:1rem;}  
  
 }

@media (min-width: 1400px) and (max-width: 1640px) {      
    .inner {padding-left:0; }

    /* 3단 레이아웃 가변형 조정 */
    .three-column-layout {display: flex;max-width: 100%;width: 100%; margin: 0 auto; }

    /* left-column 30% 너비로 조정 */
    .left-column { flex: 1; width: calc(100% - 70%); max-width: none;min-height: 98rem; padding: 0 2.4rem; background-image: url(../../../img/frt/main/aside.png); background-repeat: no-repeat; background-size: cover; margin-right: 2rem;}


    /* left-column 내부 요소들 가변형 조정 */
    .visual-area {margin:3.5rem 0 0 0;}
    .visual-area .visual-title { width: 100%; font-size: 4.6rem; margin-bottom: 2rem; }
    .about-marketplace {height: auto;min-height: 60rem;padding: 2rem; margin-bottom: 2rem; margin-top: 2rem;}
    .service-cards .service-card {padding:1.5rem 2rem;}
    .service-cards { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0 0 0; height: auto; min-height:none; width: 100%; box-sizing: border-box; } 
    .service-cards { width: 100%; flex-wrap: wrap; height: auto;min-height: 12rem; margin: 1rem 0 0 0; } 
    .stats-section { width: 100%; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; gap: 0.5rem; }    
    .stat-item {height: auto; min-height: 8rem; padding: 1rem 0.5rem; }
    .main-carousel-swiper {height:20rem;}

    /* 오른쪽 컬럼: 55% 너비, left-column 고정에 맞춤 */
    .right-column {width:70%; max-width: none; min-height: auto;gap: 2rem;margin: 0; padding: 3rem 0 3rem 0;display: flex;flex-direction: row;flex-wrap: wrap;align-items: stretch;}

    /* Company 섹션: 48% 너비, 가로 배치 */
    .company-section {width: 48%; max-width: none; min-height: auto; padding: 2rem; flex-shrink: 0; }

    /* Content 섹션: 48% 너비, 가로 배치 */
    .content-section { width: 48%; max-width: none;  min-height: auto; padding: 2rem;  border-radius: 1.2rem; flex-shrink: 0; }
    .company-section .section-header {margin-bottom:3rem;}
    /* Company 섹션 그리드 가변 크기 조정 */
    .company-section .company-grid { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 1rem; margin-top:2rem;}     
    .company-section .company-item { width: 100%; /*height: auto; */min-height: none; padding:0 0 1rem 0; box-sizing: border-box; }
    .company-section .company-item .company-img {height:7.2rem;}

    /* Content 섹션 내부 요소들 가변 크기 조정 */
    .content-section .section-header {margin-bottom:1.5rem;}
    .content-section .content-grid {margin-top:1.5rem;}
    .content-section .genre-slider { margin: 0; position: relative; display: flex; align-items: center; gap: 0.8rem; }
    .genre-slider .category-swiper { position: relative; flex: 1; width: auto; height: auto; min-height: none; overflow: hidden; opacity: 0; transition: opacity 0.3s ease;}  
    .genre-slider .category-swiper.swiper-initialized { opacity: 1; margin: 1.5rem 2.5rem 1.5rem 3.3rem;}
    .content-section .genre-slider-item {width:10rem; height: 10rem;} 
    .genre-slider .swiper-button-next {display: flex;position: absolute;top: 5rem;right:-1rem;margin: 0; z-index: 5; }
    .genre-slider .swiper-button-prev {display: flex;position: absolute;top: 5rem;left:-1rem;margin: 0; z-index: 5; }

    /* Content 그리드 가변 크기 조정   */
    .content-section .content-grid {display: grid;grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 0; }

    /* Content 아이템 가변형 설정 (1280px-1699px에서만) */
    /*.content-section .content-item { display: none; width: 100%; height: auto; min-height: 9rem; gap: 1rem; box-sizing: border-box; }
    .content-sumnail {width: 100%; height: auto; min-height: 9rem;border:solid 1px;}
    .content-item .content-info {width: 100%; box-sizing: border-box;}
    .content-item .content-info p.content-tit {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3rem;}
    .company, .type {width:100%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 1.1rem;} */
	
	 .content-section .content-item { display: none; width: 100%; height: auto; min-height: 9rem; gap: 1rem; box-sizing: border-box; }
    .content-sumnail {width:95%; height: auto; min-height:8rem;}
    .content-item .content-info {width: 98%; box-sizing: border-box;}
    .content-item .content-info p.content-tit {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3rem;}
    .company, .type {width: 95%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 1.1rem;} 
	.content-section .view-all {margin-top:1.5rem;}

    /* Bottom-column 2×2 그리드 배치 */
    .bottom-column { max-width: 100%; width: 100%; height: auto; padding-right:2.5rem; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; gap: 2rem; align-items: stretch; margin-top: 0; flex-basis: 100%; }

    /* Bottom-column 내부 섹션들 가변 크기 조정 */
    .business-info-section,
    .webinar-section,
    .archive-section {width: 100%;max-width:none;min-height: 20rem;padding: 2rem;background: #fff; border-radius: 1.2rem; border: #B1B8BE solid 1px; overflow: hidden; box-sizing: border-box; }
    .features-section {width: 100%;max-width:none;min-height: 20rem; }
	.features-section .features-content{padding:2rem; }
	 
    .business-info-section .section-header,
    .webinar-section .section-header,
    .archive-section .section-header {display: flex; justify-content: space-between; align-items: center;margin-bottom: 1.6rem; }
    .archive-section .archive-tit {width: 100%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    
    .business-info-content .info-text {margin-top:1rem;}
    .business-info-content .info-title {margin:1rem 0;} 
    .archive-section .archive-thumbnail {height:12rem; margin-top:1rem;}
    .business-info-swiper .swiper-button-prev {left:1rem;top:85%}
    .business-info-swiper .swiper-button-next {top:85%}

    .webinar-swiper .swiper-button-prev {left:1rem; top:85%;}
    .webinar-swiper .swiper-button-next {top:85%;}

}


@media (min-width: 960px) and (max-width: 1399px) {
    .inner {padding-left:0; padding-right: 0;}
    
    /* 3단 레이아웃 태블릿 조정 */
    .three-column-layout { display: flex; max-width: 100%; width: 100%; margin: 0 auto; /*gap: 2rem;*/ }

    /* 왼쪽 컬럼 */
    .left-column {width: 40%; max-width: none; min-height: 100vh; height: 100%;padding: 2rem 2rem 2rem 2rem; margin-right: 0; background-size: cover;z-index: 10; box-sizing: border-box; transition: top 0.3s ease;}
    .visual-area {margin:4.8rem 0 0 0;}    

    /* 오른쪽 컬럼: 55% 너비, left-column 고정에 맞춤 */
    .right-column { width:60%; max-width: none;min-height: auto;gap: 2rem;/*margin: 0 0 0 40%; */padding: 0 2rem 0 2rem; flex-direction: column;margin:2rem 0; }

    /* Company 섹션: 100% 너비, 세로 배치 */
    .company-section {width: 100%; max-width: none; height: auto; min-height: 30rem; padding: 2.5rem; }

    /* Content 섹션: 100% 너비, 세로 배치 */
    .content-section { width: 100%; max-width: none; height: auto;min-height: 30rem; padding: 2.4rem; border-radius: 1.2rem; }

    /* Left-column 내부 컨텐츠 가변 크기 조정 */
    .visual-area .visual-title { width: 100%; font-size: 4.6rem;margin-bottom: 2rem; margin-top: -4rem;}  
    .about-marketplace { height: auto; min-height: 45rem; padding: 2rem;  margin-top: 2.5rem;}    
    .about-marketplace h3.section-title {font-size:3rem;}

    .service-cards { height: auto; min-height: 15rem; margin: 1rem 0 0 0; gap: 1.2rem; display: flex; flex-direction: column; flex-wrap: wrap; }  
    .service-cards .service-card { flex: 1; min-width: 0; padding: 1.5rem; box-sizing: border-box; }
    .stats-section { margin-top: 1rem; gap: 1.2rem; }  
    .stat-number {font-size: 2rem; margin-top: 1rem; }
    
    .main-carousel-swiper {height:20rem;}

    /* Company 섹션 그리드 가변 크기 조정 */
    .company-section .company-grid { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 1rem; }  
    .company-section .company-item { width: 100%; min-height: none; padding:0 0 1rem 0; box-sizing: border-box; }  
    
    .carousel-section {margin-top:1.5rem;}

    /* Content 섹션 내부 요소들 가변 크기 조정 */
    .content-section .genre-slider { margin: 0; position: relative; display: flex; align-items: center; gap: 0.8rem; }
    .genre-slider .category-swiper { position: relative; flex: 1; width: auto; height: auto; min-height: none; overflow: hidden; opacity: 0; transition: opacity 0.3s ease;}  
    .genre-slider .category-swiper.swiper-initialized { opacity: 1; margin: 1.5rem 2.5rem; }
    .content-section .genre-slider-item {width:10rem; height: 10rem;} 
    .genre-slider .swiper-button-next {display: flex;position: absolute;top: 5rem;right:-1rem;margin: 0; z-index: 5; }
    .genre-slider .swiper-button-prev {display: flex;position: absolute;top: 5rem;left:-1rem;margin: 0; z-index: 5; }

    /* Content 그리드 가변 크기 조정   */
    .content-section .content-grid {display: grid;grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 0; }
    .content-sumnail {width:100%;}
    .company, .type {width:90%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}  

    /* Bottom-column 2×2 그리드 배치 */
    .bottom-column { max-width: 100%; width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2rem; align-items: stretch; margin-top: 0; }

    /* Bottom-column 내부 섹션들 가변 크기 조정 */
    .business-info-section,
    .webinar-section,
    .archive-section {width: 100%;max-width:none;min-height: 20rem;padding: 2rem;background: #fff; border-radius: 1.2rem; border: #B1B8BE solid 1px; overflow: hidden; box-sizing: border-box; }
    .features-section {width: 100%;max-width:none;min-height: 20rem; }
	.features-section .features-content{padding:2rem; }
	 
    .business-info-section .section-header,
    .webinar-section .section-header,
    .archive-section .section-header {display: flex; justify-content: space-between; align-items: center;margin-bottom: 1.6rem; }

    .archive-section .archive-thumbnail {margin-top:1rem;} 

}


@media (max-width: 959px) {
   .inner {padding-left:0; padding-right: 0;}
    /* 모바일 레이아웃 - 세로 배치 */
  .three-column-layout {display: flex;flex-direction: column;max-width: 100%; width: 100%;margin: 0 auto; gap: 2rem; }
  
  /* left-column 모바일 스타일 */
    .left-column { width: 100%; max-width: none;min-height: auto; padding: 2rem; margin-right: 0; background-size: cover;background-position: center; position: static;}
    .visual-area {margin-top: 2.5rem;} 
    .visual-area .visual-title {font-size:4.5rem; word-wrap:break-word;margin-right: 4rem; margin-bottom: 2.5rem;}
    .about-marketplace {margin-top:2.5rem; height:auto; padding: 2rem 2rem 3rem 2rem;}  
    .about-marketplace h3.section-title {font-size:2.8rem;}
    .main-carousel-swiper {max-width: none;min-height: auto;height:20rem; }
    
    .company-section .company-item{width:100%; height:auto; padding-bottom: 1rem;}
    .service-cards {height:auto;}
    .service-cards .service-card {padding:2rem 1rem;}
    
    /* right-column 모바일 스타일 */
    .right-column { display: flex;flex-direction: column; max-width: 100%; width: 100%; min-height: auto; gap: 2rem; margin: 0;margin-bottom: 2rem; padding: 0 2rem; }

    /* company-section 모바일 스타일 */
    .company-section { width: 100%;max-width: none;height: auto; min-height: 30rem; padding: 2rem; margin-bottom: 0; }

    /* company-section 헤더 및 + 버튼 모바일 스타일 */
    .company-section .section-header { display: flex;  justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }  
    .company-section .section-header h3 { font-size: 2rem; font-weight: bold; color: #1E2124;margin: 0; }  
    .company-section .section-header .plus-btn { background: none; border: none; cursor: pointer;height: 2.4rem; width: 2.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; }  
    .company-section .section-header .plus-btn:hover {background-color: #f0f0f0; }

    .svg-icon.ico-swiper-stop {background:url(../../../img/frt/main/ico_swiper_stop.svg)}


    /* content-section 모바일 스타일 */
    .content-section {width: 100%;max-width: none;height: auto;min-height: 30rem; padding: 2rem;margin-bottom:0; }
    .content-sumnail {width:100%;}   
    .genre-slider .category-swiper {margin: 0 auto;}
    .genre-slider .category-swiper.swiper-initialized {margin:0 3rem 2rem 5rem;}
    .content-section .genre-slider-item {width:10rem; height: 10rem;}
  
    /* content-section 헤더 및 + 버튼 모바일 스타일 */
    .content-section .section-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }  
    .content-section .section-header h3 { font-size: 2rem; font-weight: bold; color: #1E2124; margin: 0; }  
    .content-section .section-header .plus-btn {background: none;border: none; cursor: pointer; height: 2.4rem; width: 2.4rem;display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; }  
    .content-section .section-header .plus-btn:hover { background-color: #f0f0f0; }
    .company, .type {width:90%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}

    /* bottom-column 모바일 스타일 */
    .bottom-column { max-width: 100%; width: 100%; height: auto;display: flex; flex-direction: column; gap: 2rem; align-items: stretch; padding: 0; }
  
    /* business-info-section 모바일 스타일 */
    .business-info-section { width: 100% !important; max-width: none !important; height: auto; padding: 2rem 2rem 2.5rem 2rem; }
    .business-info-content .info-title {/*padding: 0.8rem 0;*/-webkit-line-clamp:2;}
    .business-info-swiper .swiper-button-prev {left:0;top:90%}
    .business-info-swiper .swiper-button-next {top:90%}
    /* business-webinar-container 모바일 스타일 */
    .business-webinar-container { width: 100%; border: none; }
  
    /* webinar-section 모바일 스타일 */
    .webinar-section { width: 100%;max-width: none;height: auto; min-height: 20rem; padding: 2rem; }

    /* webinar 내부 요소들 모바일 스타일 */
    .webinar-swiper { height: auto; min-height:none; }  
    .webinar-content { height: auto; min-height: none; padding-bottom:2rem; } 
    .webinar-sumnail { height: auto; min-height: 20rem;height: 20rem;}  
    .webinar-title { height: auto; min-height: 3rem; }
    .webinar-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }  
    .webinar-section .section-header h3 { font-size: 2rem; }
    .webinar-swiper .swiper-button-prev {left:1rem; top:90%;}
    .webinar-swiper .swiper-button-next {top:90%;}
  
    /* features-section  */
    .features-section { width: 100%;max-width: none;height: auto;min-height: 20rem;border-radius: 1.2rem;}  
    .features-section .features-content{padding:2rem; min-height: 20rem;}
    .features-sumnail {min-height: 20rem;}  
    .features-content .section-header {display: flex; justify-content: space-between; align-items: center;margin-bottom: 1.6rem;}  
    .features-content .section-header h3 { font-size: 2rem;  }  
    .features-content .section-header .plus-btn:hover {background-color: rgba(255, 255, 255, 0.2);}  

    /* archive-section */
    .archive-section {width: 100%;max-width: none; height: auto; min-height: 20rem; padding: 2rem; border-radius: 1.2rem;}  
    .archive-section .section-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem;}  
    .archive-section .section-header h3 {font-size: 2rem;font-weight: bold;color: #1E2124; margin: 0; }  
    .archive-section .section-header .plus-btn {background: none;border: none; cursor: pointer;height: 2.4rem; width: 2.4rem; display: flex; align-items: center; justify-content: center;border-radius: 50%;transition: all 0.3s ease;} 

    /* content-section */
    .genre-slider .swiper-button-next,
    .genre-slider .swiper-button-prev {width: 2.4rem; height: 2.4rem; border: #CDD1D5 solid 1px; color: #666; cursor: pointer; border-radius: 50%; transition: all 0.3s ease; display: flex; position: absolute; top: 3.5rem; margin: 0; z-index: 5; }

    .genre-slider .swiper-button-prev { left: 0;}  
    .genre-slider .swiper-button-next { right: 0; }  
    .genre-slider .swiper-button-next .svg-icon.ico-angle { width: 1.2rem; height: 1.2rem; content: ""; background-repeat: no-repeat; transform: 0; position: absolute; left: 0.4rem; top: 0.5rem;}
    .genre-slider .swiper-button-prev .svg-icon.ico-angle { width: 1.2rem; height: 1.2rem; content: ""; background-repeat: no-repeat; transform: 0; position: absolute; left: 0.4rem; top: 0.5rem;}    

    /* business-info */
    .business-info-swiper { height: auto; min-height: 15rem; }  
    .business-info-swiper .swiper-wrapper { height: auto; min-height: 12rem; }  
    .business-info-content .info-text { height: auto; min-height: 3rem; }

    /* business-info-section 헤더 및 + 버튼 모바일 스타일 */
    .business-info-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem;  }  
    .business-info-section .section-header h3 { font-size: 2rem; }
}

@media (max-width: 600px) {
    .company-section .company-item{width:100%; height:auto; padding-bottom: 1rem;}
    .service-cards {height:auto;}
    .service-cards .service-card {padding:2rem 1rem;}
    
      /* 아카이브 */
    .archive-section .archive-tit {}
    .archive-section .archive-thumbnail {height:9rem;margin-top:1rem;}
}
@media (max-width: 560px) {
     
    .visual-area .visual-title {width: calc(100% - 4rem);font-size:3.8rem; word-wrap:break-word;margin-right: 4rem; margin-bottom: 2.5rem;}
    .about-marketplace h3.section-title {font-size:2.5rem;}
    .search-container .search-input {font-size:2rem;}
    .service-cards {height:auto; flex-direction:column;}
    .service-cards .service-card {padding:1.5rem 1.5rem;}
    .service-card h3 {margin:0 0;font-size:1.6rem;}
    .service-card p {margin-top:0; font-size:1.2rem;}
    .card-icon01, .card-icon02, .card-icon03 {height:3.5rem;}
    .stat-number {font-size:1.8rem;margin-top:0;}
    .about-marketplace {padding:1.5rem;}
    .stats-section {grid-template-columns:auto;}
    .stat-item {height:auto; padding:1.5rem;}

    .right-column {padding:0 1.5rem;}
    .company-section .company-item .company-img>img {max-width:6rem; max-height:4rem;}
    .content-section .content-grid {display: grid;grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 0; }
    .genre-slider .category-swiper.swiper-initialized {margin:0 3rem 2rem 4.2rem;}
    .business-info-swiper .swiper-button-prev {top:88%; left: 2%;}
    .business-info-swiper .swiper-button-next {top:88%;}  
    
}