@charset "utf-8";
/* 메인 반응형 CSS */

@media all and (max-width: 800px) {
	html, body,
	html.fp-enabled,
	html.fp-enabled body {
		overflow: auto !important;
		overflow-x: hidden !important;
		height: auto !important;
	}
	#fullpage {
		transform: none !important;
	}
	.section {
		height: auto !important;
	}
	.fp-tableCell {
		height: auto !important;
		display: block !important;
	}
	#fp-nav {
		display: none !important;
	}

	/* PC/모바일 전환 */
	.main-visual-pc-only {
		display: none !important;
	}
	.main-visual-mobile-only {
		display: block !important;
		height: 400px !important;
		min-height: 400px !important;
		position: relative !important;
		overflow: hidden !important;
	}
	/* ID 기반 PC/모바일 전환 */
	#mainVisual {
		display: none !important;
	}
	#mainVisualMobile {
		display: block !important;
		height: 400px !important;
		min-height: 400px !important;
		position: relative !important;
		overflow: hidden !important;
	}
	#mainVisualMobile video {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		z-index: 1 !important;
	}
	.mobile-txt-1, .mobile-txt-2 {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		text-align: center !important;
		padding: 0 20px !important;
		box-sizing: border-box !important;
	}
	.mobile-txt-1 {
		animation: fadeSlide1 8s infinite !important;
	}
	.mobile-txt-2 {
		animation: fadeSlide2 8s infinite !important;
	}
	@keyframes fadeSlide1 {
		0%, 45% { opacity: 1; }
		50%, 95% { opacity: 0; }
		100% { opacity: 1; }
	}
	@keyframes fadeSlide2 {
		0%, 45% { opacity: 0; }
		50%, 95% { opacity: 1; }
		100% { opacity: 0; }
	}
	.mobile-visual-wrap {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.mobile-bg-video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 1;
	}
	.mobile-txt-slider {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		transform: translateY(-50%);
		z-index: 10;
	}
	.mobile-txt-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		padding: 0 20px;
		box-sizing: border-box;
		opacity: 0;
	}
	.mobile-txt-item strong {
		display: block;
		font-size: 26px;
		font-weight: 600;
		color: #fff;
		line-height: 1.4;
		text-shadow: 0 2px 10px rgba(0,0,0,0.7);
	}
	.mobile-txt-item span {
		display: block;
		font-size: 14px;
		color: #fff;
		margin-top: 15px;
		text-shadow: 0 1px 5px rgba(0,0,0,0.5);
	}
	.mobile-txt-1 {
		animation: fadeSlide1 8s infinite;
	}
	.mobile-txt-2 {
		animation: fadeSlide2 8s infinite;
	}
	@keyframes fadeSlide1 {
		0%, 45% { opacity: 1; }
		50%, 95% { opacity: 0; }
		100% { opacity: 1; }
	}
	@keyframes fadeSlide2 {
		0%, 45% { opacity: 0; }
		50%, 95% { opacity: 1; }
		100% { opacity: 0; }
	}

	/* 메인 비주얼 모바일 높이 조정 */
	#mainVisual,
	#mainVisual.full-height,
	#fullpage #mainVisual,
	#fullpage #mainVisual.section {
		height: 400px !important;
		min-height: 400px !important;
	}
	#fullpage #mainVisual .fp-tableCell {
		height: 400px !important;
	}
	.main-visual-con,
	.main-visual-con .slick-list,
	.main-visual-con .slick-track,
	.main-visual-item {
		height: 400px !important;
	}
	/* 메인 비주얼 아이템 - 상대 위치 */
	.main-visual-item {
		position: relative !important;
	}
	/* PC 이미지 숨김 */
	.main-visual-item .main-visual-pc-img {
		display: none !important;
	}
	/* 모바일 이미지 - 배경처럼 전체 덮기 */
	.main-visual-item .main-visual-m-img {
		display: block !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 1 !important;
		overflow: hidden !important;
	}
	.main-visual-item .main-visual-m-img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	/* 모바일 동영상 */
	.main-visual-item .main-visual-m-img video,
	.main-visual-item .main-visual-m-img .mobile-video {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	/* 텍스트 레이어 - 이미지 위에 표시 */
	.main-visual-item .main-visual-txt-con {
		position: absolute !important;
		top: 50% !important;
		left: 0 !important;
		width: 100% !important;
		transform: translateY(-50%) !important;
		z-index: 10 !important;
	}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 {
		font-size: 28px !important;
		line-height: 1.4 !important;
		opacity: 1 !important;
		color: #fff !important;
		text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
	}
	.main-visual-item .main-visual-txt-con .main-visual-sub-txt {
		font-size: 14px !important;
		margin-top: 15px !important;
		opacity: 1 !important;
		text-shadow: 0 1px 5px rgba(0,0,0,0.5) !important;
	}
	.main-visual-txt-inner.area {
		padding: 0 20px !important;
	}

	/* 제품영역 모바일 - 2열 그리드 + overflow 방지 */
	#mainProduct {
		padding: 40px 0 !important;
		min-height: auto !important;
	}
	.product-section-wrap {
		padding: 0 15px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	.product-block {
		width: 100% !important;
		overflow: hidden !important;
	}
	.product-block-list {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	.product-block-item {
		width: 100% !important;
		flex: none !important;
	}
	.product-block-item a {
		padding: 15px !important;
		border-radius: 12px !important;
	}
	.product-block__thum {
		margin: 0 0 10px 0 !important;
	}
	.product-block__thum img {
		height: 80px !important;
		max-width: 100% !important;
	}
	.product-block__text {
		font-size: 14px !important;
	}

	/* 하단 배너 모바일 - 세로 배치 + 잘림 방지 */
	#mainBanner {
		padding: 30px 0 !important;
		width: 100% !important;
		overflow: hidden !important;
	}
	.common-banner {
		padding: 0 15px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.banner-list {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
		width: 100% !important;
	}
	.banner-item {
		flex: none !important;
		width: 100% !important;
		height: 120px !important;
		border-radius: 12px !important;
		background-size: cover !important;
		background-position: center !important;
	}
	.banner-item a {
		padding: 20px !important;
	}
	.banner-txt {
		margin-bottom: 10px !important;
	}
	.banner-txt span {
		font-size: 18px !important;
	}
	.banner-arrow {
		width: 32px !important;
		height: 32px !important;
	}
	.banner-arrow::before {
		width: 8px !important;
		height: 8px !important;
		border-width: 2px !important;
	}

	/* 설비/응용분야 슬라이드 모바일 */
	#mainEquipment,
	#mainApplication {
		padding: 40px 0 !important;
		min-height: auto !important;
	}
	.equipment-titles,
	.application-titles {
		padding: 0 15px !important;
		margin-bottom: 20px !important;
	}
	.equipment-titles h2,
	.application-titles h2 {
		font-size: 24px !important;
	}
	.equipment-slide-wrap,
	.application-slide-wrap {
		padding: 20px 0 !important;
		gap: 15px !important;
	}
	.equipment-slide-item,
	.application-slide-item {
		width: 200px !important;
		height: 130px !important;
	}
}