@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,500,900');
@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900');
@import url('https://fonts.googleapis.com/earlyaccess/notosanssc.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@import url('https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
@import "../../vendors/bootstrap-3.3.7/dist/css/bootstrap.min.css";
@import "../../vendors/swiper-3.4.1/dist/css/swiper.min.css";
@import "../../vendors/font-awesome-4.7.0/css/font-awesome.min.css";
@import "../../vendors/rd-navbar-2.1.8/dist/css/rd-navbar.css";
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');
@import "layout.css";
/* Header, Footer*/
@import "nav.css";
/* Nav */
@import "swiper.css";
/* Main Visual */
@import "main-content.css";
/* Main Content */
@import "sub-content.css";
/* Sub Content */
@import "ezsboard5.css";
/* board css */
@import "slick.css";
/* Slick Carousel */
@import "zeusbiz.css";
/* sktbiz */
@import "basic_mall.css";
/* mall */
@import "OverlayScrollbars.css";
/* scroll design */
@import "fotorama.css";
/* view Thumbnail */

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}

@font-face {
	font-family: 'DoHyeon';
	font-style: normal;
	font-weight: 400;
	src: local('※'),
		url('fonts/DoHyeon.woff2') format('woff2'),
		url('fonts/DoHyeon.woff') format('woff'),
		url('fonts/DoHyeon.ttf') format('truetype'),
		url('fonts/DoHyeon.otf') format('opentype'),
		url('fonts/DoHyeon.eot') format('embedded-opentype');
}


@font-face {
	font-family: 'SUITE';
	font-style: normal;
	src: url('../font/SUITE-Light.woff2') format('woff2');
	font-weight: 300;
}

@font-face {
	font-family: 'SUITE';
	font-style: normal;
	src: url('../font/SUITE-Regular.woff2') format('woff2');
	font-weight: 400;
}

@font-face {
	font-family: 'SUITE';
	font-style: normal;
	src: url('../font/SUITE-Medium.woff2') format('woff2');
	font-weight: 500;
}

@font-face {
	font-family: 'SUITE';
	font-style: normal;
	src: url('../font/SUITE-SemiBold.woff2') format('woff2');
	font-weight: 600;
}

@font-face {
	font-family: 'SUITE';
	font-style: normal;
	src: url('../font/SUITE-Bold.woff2') format('woff2');
	font-weight: 700;
}

@font-face {
	font-family: 'SUITE';
	font-style: normal;
	src: url('../font/SUITE-ExtraBold.woff2') format('woff2');
	font-weight: 800;
}

@font-face {
	font-family: 'SUITE';
	font-style: normal;
	src: url('../font/SUITE-Heavy.woff2') format('woff2');
	font-weight: 900;
}

@-ms-viewport {
	width: auto;
}

body {
	overflow-x: hidden;
	font-family: 'SUITE', 'Noto Sans KR', 'Noto Sans', 'Nanum Gothic', Helvetica, Arial, sans-serif;
	font-weight: normal;
	letter-spacing: -0.04em;
	font-size: 14px ! important;
}

.text-primary {
	color: #fff !important;
}

.text-primary2 {
	color: #1aab5f !important;
}

.text-primary3 {
	color: #498cdf !important;
}

p {
	line-height: 1.75;
}

a {
	color: inherit;
	cursor: pointer;
}

a:hover,
a:focus,
a:active,
a.active {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
h7 {
	font-family: 'SUITE', 'Noto Sans KR', 'Nanum Gothic', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 500;
}

.btn-primary {
	color: white;
	background-color: #fff;
	border-color: #fff;
	font-family: 'SUITE', 'Noto Sans KR', 'Nanum Gothic', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.open .dropdown-toggle.btn-primary {
	color: #ed7247;
	border-color: #fff;
	background-color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
	background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	background-color: #fff;
	border-color: #fff;
}

.btn-primary .badge {
	color: #fff;
	background-color: white;
}

.btn-xl {
	color: white;
	background-color: #fff;
	border-color: #fff;
	font-family: Roboto, 'SUITE', 'Noto Sans KR', 'Nanum Gothic', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: 500;
	border-radius: 3px;
	font-size: 18px;
	padding: 20px 40px;
}

.btn-xl:hover,
.btn-xl:focus,
.btn-xl:active,
.btn-xl.active,
.btn-xl:active:focus,
.open .dropdown-toggle.btn-xl {
	color: white;
	background-color: #1aab5f;
	border-color: #1aab5f;
}

.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
	background-image: none;
}

.btn-xl.disabled,
.btn-xl[disabled],
fieldset[disabled] .btn-xl,
.btn-xl.disabled:hover,
.btn-xl[disabled]:hover,
fieldset[disabled] .btn-xl:hover,
.btn-xl.disabled:focus,
.btn-xl[disabled]:focus,
fieldset[disabled] .btn-xl:focus,
.btn-xl.disabled:active,
.btn-xl[disabled]:active,
fieldset[disabled] .btn-xl:active,
.btn-xl.disabled.active,
.btn-xl[disabled].active,
fieldset[disabled] .btn-xl.active {
	background-color: #fff;
	border-color: #fff;
}

.btn-xl .badge {
	color: #fff;
	background-color: white;
}

::-moz-selection {
	text-shadow: none;
	color: #fff;
	background: #498cdf;
}

::selection {
	text-shadow: none;
	color: #fff;
	background: #498cdf;
}

img::selection {
	background: transparent;
}

img::-moz-selection {
	background: transparent;
}

body {
	webkit-tap-highlight-color: #498cdf;
}

@media (min-width:992px) {
	body {
		font-size: 16px ! important;
	}
}


/* ============================
   메인 비주얼: 프리미엄 페이징(캡슐형)
   - 배경이 밝을 때도 잘 보이도록 반투명/블러 처리
   - 활성 bullet은 '점 → 캡슐'로 부드럽게 확장
   - 브랜드 블루 그RADIENT (#3f51b5 → #03A9F4)
   - Swiper v4~v8 공통 클래스(.swiper-pagination-bullet) 사용
   ============================ */

/* 페이징 전체 컨테이너(가운데 배치 + 유리감) */
.swiper-main .swiper-pagination {
	position: absolute;
	/* 슬라이드 안에서 위치 */
	left: 50%;
	transform: translateX(-50%);
	bottom: 22px;
	/* 하단 여백 */
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	/* 캡슐 내부 여백 */
	background: rgba(255, 255, 255, .45);
	/* 밝은 배경에서도 보이도록 */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	/* 유리감(지원 브라우저에서 적용) */
	border-radius: 999px;
	/* 캡슐 모양 */
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	z-index: 10;
}

/* 기본 불릿(작은 원형 점) */
.swiper-main .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	/* 기본 점 크기 */
	border-radius: 999px;
	background: rgba(0, 86, 179, .35);
	/* 브랜드 블루 계열의 옅은 점 */
	border: 1px solid rgba(255, 255, 255, .9);
	opacity: 1;
	/* Swiper 기본의 투명도 0.2 → 1 */
	position: relative;
	transition: all .35s cubic-bezier(.2, .7, .2, 1);
	cursor: pointer;
	/* 안쪽 하이라이트(살짝 빛나는 느낌) */
}

.swiper-main .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: inherit;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
	opacity: .55;
	transition: opacity .35s;
}

/* 활성 불릿(점 → 캡슐로 확장 + 그RADIENT) */
.swiper-main .swiper-pagination-bullet-active {
	width: 28px;
	/* 가로로 길어져 ‘현재 슬라이드’ 강조 */
	background: linear-gradient(90deg, #3f51b5, #03A9F4);
	border-color: rgba(255, 255, 255, 0);
	/* 외곽선은 숨김 */
	box-shadow:
		0 6px 14px rgba(63, 81, 181, .25),
		/* #3f51b5 그림자 */
		0 2px 6px rgba(3, 169, 244, .18);
	/* #03A9F4 그림자 */
}

.swiper-main .swiper-pagination-bullet-active::after {
	opacity: 0;
	/* 활성일 땐 내부 하이라이트를 줄여 과한 반짝임 방지 */
}

/* 호버/포커스 인터랙션(데스크톱 접근성) */
.swiper-main .swiper-pagination-bullet:hover {
	transform: scale(1.15);
}

.swiper-main .swiper-pagination-bullet:focus {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(3, 169, 244, .25);
}

/* 다크 배경 이미지 위에서 더 또렷하게(선택) */
@media (prefers-color-scheme: dark) {
	.swiper-main .swiper-pagination {
		background: rgba(0, 0, 0, .35);
	}
}

/* 반응형: 모바일에선 살짝 작게, 위치 조금 올림 */
@media (max-width: 768px) {
	.swiper-main .swiper-pagination {
		bottom: 14px;
		padding: 6px 10px;
		gap: 8px;
	}

	.swiper-main .swiper-pagination-bullet {
		width: 7px;
		height: 7px;
	}

	.swiper-main .swiper-pagination-bullet-active {
		width: 24px;
	}
}

/* (옵션) 페이징이 슬라이드 하단 요소와 겹치면 더 위로 올리세요.
.swiper-main .swiper-pagination{ bottom:32px; }
*/

/* =========================================
   [패치] 페이징 컨테이너가 가로 전체를 차지하지 않도록 교정
   - 핵심: width:auto, pointer-events 제어
   - 대상: 메인 비주얼 슬라이드 전용
   ========================================= */

/* 페이징 래퍼: 내용만큼만(=auto) 차지 + 중앙 정렬 + 유리감 유지 */
.swiper-main .swiper-pagination {
	width: auto !important;
	/* ← 기본 100%를 강제로 끊음 */
	right: auto !important;
	/* ← 혹시 우측 고정되는 테마 방지 */
	left: 50% !important;
	/* 중앙 정렬 기준점 */
	transform: translateX(-50%) !important;
	box-sizing: content-box !important;
	pointer-events: none;
	/* ← 컨테이너는 이벤트 안 받음(덮어쓰기 방지) */
	z-index: 10;
}

/* 불릿은 클릭 가능해야 하므로 이벤트 활성화 */
.swiper-main .swiper-pagination-bullet {
	pointer-events: auto;
}

/* 만약 테마에서 가로줄을 그리는 progressbar가 켜질 경우 대비(안 쓰면 무시) */
.swiper-main .swiper-pagination-progressbar,
.swiper-main .swiper-pagination-progressbar-fill {
	display: none !important;
}

/* 페이징 기준점을 슬라이더(.swiper-main) 중앙으로 고정 */
.swiper-main{                     /* ← 부모를 기준점으로 만들기 */
  position: relative !important;
}

.swiper-main .swiper-pagination{  /* ← 정확히 중앙 정렬 */
  left:50% !important;
  transform:translateX(-50%) !important;
  right:auto !important;
}

/* 미세 보정(예: 6px 오른쪽으로 이동하고 싶을 때) */
.swiper-main .swiper-pagination{
  transform:translateX(calc(-50% + 6px)) !important;
}

/* =========================================
   Swiper v3.4.1 중앙 정렬 강제 패치
   - 기본 left:0; width:100% 규칙을 이기기 위해
     특이성과 !important를 높여서 재정의
   - 반드시 swiper.css 이후, 사용자 CSS의 가장 하단에 배치
   ========================================= */

/* 부모 기준점 보장 */
.swiper-container.swiper-main{
  position:relative !important;
}

/* 가로형일 때 왼쪽 정렬/가로 100%를 끊고, 가운데로 고정 */
.swiper-container-horizontal.swiper-main > .swiper-pagination,
.swiper-container-horizontal.swiper-main > .swiper-pagination.swiper-pagination-bullets{
  left:50% !important;
  right:auto !important;
  width:auto !important;                 /* ← 가로 100% 제거 */
  transform:translateX(-50%) !important; /* ← 정확히 가운데 */
  margin:0 !important;
  /* 우리의 ‘유리감 캡슐’ 레이아웃을 쓰도록 플렉스 지정 */
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-align:initial !important;         /* v3 기본 center 영향 제거 */
  pointer-events:none !important;        /* 컨테이너는 이벤트 차단(오토플레이 방해 방지) */
}

/* 불릿은 클릭 가능해야 하므로 이벤트는 켭니다 */
.swiper-container-horizontal.swiper-main > .swiper-pagination .swiper-pagination-bullet{
  pointer-events:auto !important;
}

/* 만약 progressbar 타입이 켜져 있으면 숨김 */
.swiper-main .swiper-pagination-progress,
.swiper-main .swiper-pagination-progressbar,
.swiper-main .swiper-pagination-progressbar-fill{
  display:none !important;
}

/* (선택) 미세 보정 — 4px 오른쪽으로 옮기고 싶으면 +4px 로 조정 */
.swiper-container-horizontal.swiper-main > .swiper-pagination{
  transform:translateX(calc(-50% + 0px)) !important;
}