@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanslao.css);
	html, body {width: 100%; height: 100%; padding:0; margin:0 }
	img{ display:block;  padding:0; margin:0}
	ul, li, div{padding:0; margin:0}
	li{ list-style:none; }
	#content {position: relative;padding:0;margin:0; width: 1170px; height: 1227px;}
	#content img {position: absolute;left: 0;}
	#content .active {z-index: 1;opacity: 1;}
	.img_tab{ width:1170px; float:left; margin:0;}
	.img_tab li{ list-style:none; float:left;}
	.img_tab1{ float:left;}
	.img_tab2{ float:right;}
	.sub{width:1170px;}
	.btn{position: relative; width: 497px;margin:0 auto; p }
	.btn img{ margin:0 auto; }
	.sub_bg{background: #ebebeb; width:1170px; margin:0 auto; text-align:center; padding-bottom: 150px; float: left;}
	#fla{ text-align:center; background: #232323; width: 1170px;}
	.video{ margin:0 auto; text-align:center; width: 850px; }
	.padding{ padding-bottom:15px;}
	.search{width: 1170px; margin: 0 auto; float: left;}
	.search a{text-decoration: none; cursor: pointer;}
	.search-btn:hover{background: #444; box-shadow: 0 0; }
	.search-btn{background: #333; color: #fff; text-align: center; font-size: 21px; font-weight: 600; text-decoration: none;  padding: 25px 0; border-radius: 8px; letter-spacing: -1px; box-shadow: 0 5px #dbdbdb;}
	.search-padding{padding: 100px 0; width: 100%; margin: 0 auto; }
	.btn-box{position:relative; top: -185px;}
	.btn2{ margin: 0 auto; }
	.btn2 li{float: left; padding: 0 118px;}

/* 기본 스타일 및 레이아웃 */
.tab-container {
  max-width: 1170px;
  font-family: sans-serif;
	background: #ffd800;
}

/* 탭 버튼 스타일 */
.tab-menu {
  display: flex;
  justify-content: center;
  gap: 0px;
	background-color: #fff;
	 border-radius: 35px;
	width: 700px;
	margin: 0 auto;
	margin-bottom: 50px;
	
}

.tab-btn {
  padding: 12px 130px;
  font-size: 27px;
  border: none;
  border-radius: 35px;
  background-color:  transparent;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
	width: 50%;
}

.tab-btn.active {
  background-color: #333333; 
  color: #fff;
  font-weight: bold;
	font-size: 28px;
	
}

/* 콘텐츠 표시/숨김 제어 */
.tab-content {
  display: none;
  height: auto;    
  overflow: hidden;    
}

.tab-content.active {
  display: block;	
}

/* 이미지 그리드 레이아웃 (제시된 이미지 구조 재현) */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  height: auto; 
}

.main-img {
  grid-column: span 2;
}

.main-img img, .sub-img-left img, .sub-img-right img {
  width: 100%;
  height: auto;
  border-radius: 15px; /* 이미지 모서리 둥글게 */
  display: block;
}


/* 스와이퍼 */

	.swiper-wrapper {
		height: 740px !important;
	}


	.bannerSwiper{
		width:100%;
		height: 840px;
		position:relative;
		margin:0px 0;
	}

	.bannerSwiper img{
		width:100%;
		max-width: 1170px;
		display:block;
	}

	.swiper-button-box{
		z-index: 100;
		position: relative;
		top:-430px;
	}

	.bannerSwiper .swiper-button-prev,
	.bannerSwiper .swiper-button-next{
		color:#000;
		background:#ffe500;
		width:38px;
		height:38px;
		border-radius:50%;
	}

	.bannerSwiper .swiper-button-prev:after,
	.bannerSwiper .swiper-button-next:after{
		font-size:20px;
		font-weight:900;
	}


@media all and (max-width: 769px) {	
	body{ background: #fff;}
	img{width: 100%;}	
	#content {width: 100%; height: auto;}	
	.search{border-radius: 0 !important; width: 100%;}
	.search-btn{ width:100%; font-size: .9rem; padding: 12px 0px; margin: 50px 0; }
	.search-padding{padding: 0px 0px 50px 0;}
	.sub_bg{ width: 100%;}
	#fla{ width: 100%;}
	.video{width:80%; padding-bottom: 70px;}
	.sub-box{padding-top: 115%;}
	.hr{display: none;}
	.search-padding{padding: 0; width: 75%;}
	.btn{width: 50%;}
	.btn-box{top:-1.2%}
	.btn2 li{width: 25%; padding: 0;}
	.btn2-left{position: relative; left:8%}
	.btn2-right{position: relative; left:31%}
	

	
	.bannerSwiper{
		height: auto;
		min-height: 270px;
		max-height: 270px;
	}

	.bannerSwiper img{
		max-width: 100%;
	}

	.swiper-button-box{
		max-width: 100%;
		top:-618px;
	}

	.bannerSwiper .swiper-button-prev,
	.bannerSwiper .swiper-button-next{
		width:20px;
		height:20px;
	}
	
	.bannerSwiper .swiper-button-prev:after,
	.bannerSwiper .swiper-button-next:after{
		font-size:10px;
	}
	
	.top-air {width: 20%; top:75px; left: 10%;}	
	.top-text {top:120px; }

	}


}