@charset "UTF-8";

/*
=========================================================
nobel-168.com 首頁 CLS 修正版 V2
檔名：css/cls-fix.css

修正內容：
1. 首頁 Swiper 預留高度，降低 CLS
2. 修正 1600px 以上原 style-3.css 的 padding:0 75px
   造成頁面寬度超出、右側白邊及水平捲軸
3. 最新消息預留高度
4. About 圖片預留比例
5. 熱門商品 Owl Carousel 初始化前預留空間
=========================================================
*/


/* =====================================================
0. 防止首頁任何元素產生水平溢位
===================================================== */

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}


/* =====================================================
1. 首頁 Banner / Swiper
===================================================== */

.index-hero {
	position: relative;
	display: block;

	/* 很重要：padding 必須算在 100% 寬度內 */
	box-sizing: border-box;

	width: 100%;
	max-width: 100%;

	height: 420px;
	min-height: 420px;

	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;

	overflow: hidden;
}

.index-hero > .swiper-wrapper {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.index-hero > .swiper-wrapper > .swiper-slide {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.index-hero .swiper-slide {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}


/* 平板 */
@media (min-width: 768px) {

	.index-hero {
		height: 460px;
		min-height: 460px;
	}

}


/* 一般桌機 */
@media (min-width: 1200px) {

	.index-hero {
		height: 38.54167vw;
		min-height: 520px;
		max-height: 740px;
	}

}


/*
---------------------------------------------------------
重要修正：

style-3.css 原本有：

@media (min-width:1600px) {
    .swiper-slider-classic {
        max-width:1920px;
        padding:0 75px;
    }
}

首頁為滿版 Banner，
若再加左右 75px padding，
某些瀏覽器 / Swiper 初始化狀態會造成水平 overflow。

只針對首頁 .index-hero 覆蓋，
其他內頁完全不受影響。
---------------------------------------------------------
*/

@media (min-width: 1600px) {

	.swiper-slider-classic.index-hero {
		width: 100%;
		max-width: 100%;

		margin-left: 0;
		margin-right: 0;

		padding-left: 0;
		padding-right: 0;
	}

}


/* =====================================================
2. 第一張 Banner
   JS 尚未初始化前就先顯示背景
===================================================== */

.index-hero .swiper-slide-1 {
	background-image: url("../images/banner02.jpg");
}


/* =====================================================
3. Swiper 分頁限制在 Banner 內
===================================================== */

.index-hero .swiper-pagination__module {
	box-sizing: border-box;
}


/* 桌機右側分頁不要超出容器 */
@media (min-width: 768px) {

	.index-hero.swiper-container-vertical .swiper-pagination__module {
		right: 20px;
	}

}


/* =====================================================
4. 最新消息
===================================================== */

.index-hotnews {
	display: block;
	box-sizing: border-box;

	width: 100%;
	max-width: 100%;

	min-height: 48px;

	overflow: hidden;
}


/* =====================================================
5. About 圖片
===================================================== */

.index_bg img[src*="index_about.jpg"] {
	display: block;

	width: 100%;
	height: auto;

	aspect-ratio: 570 / 449;
}


/* =====================================================
6. 熱門商品圖片
===================================================== */

.index-product-figure {
	position: relative;

	width: 100%;

	aspect-ratio: 600 / 602;

	overflow: hidden;
}

.index-product-figure > img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
}


/* =====================================================
7. Owl Carousel 初始化前預留高度
===================================================== */

.index-products {
	width: 100%;
	max-width: 100%;

	min-height: 360px;

	overflow: hidden;
}

.index-products:not(.owl-loaded) {
	display: flex;
	flex-wrap: nowrap;

	width: 100%;

	overflow: hidden;
}

.index-products:not(.owl-loaded) > .product {
	box-sizing: border-box;

	flex: 0 0 25%;
	max-width: 25%;

	padding-left: 15px;
	padding-right: 15px;
}


@media (max-width: 991px) {

	.index-products:not(.owl-loaded) > .product {
		flex-basis: 33.333333%;
		max-width: 33.333333%;
	}

}


@media (max-width: 767px) {

	.index-products {
		min-height: 350px;
	}

	.index-products:not(.owl-loaded) > .product {
		flex-basis: 50%;
		max-width: 50%;
	}

}


@media (max-width: 575px) {

	.index-products:not(.owl-loaded) > .product {
		flex-basis: 100%;
		max-width: 100%;
	}

}


/* =====================================================
8. WOW 動畫穩定
===================================================== */

.index_bg .wow,
.index-products .wow {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}


/* =====================================================
9. 圖片 baseline 微小位移
===================================================== */

.index-hero img,
.index_bg img,
.index-products img {
	vertical-align: middle;
}