@charset "utf-8";
/*----------------------------------------------------------------------*/
/* KeyVisual */
.index_slider { position: relative; }
.bxSlider_list.no_slider .bx-controls { display: none; }
.index_slider .bxSlider_list .item .img { background-position: center center; background-size: cover; /*padding-bottom: 50.886%;*/ padding-bottom: 42%; }

@media (max-width: 768px) {
    .index_slider .bxSlider_list .item .img { max-width: unset; padding-bottom: 106.25%; }
}

.index_slider .play_btn { position: absolute; left: 50%; top: 50%; border-radius: 50%; background: #333; text-decoration:none; }
.index_slider .play_btn::before {
	content: ''; position:absolute; top:50%; left:50%; width:140px; height:140px; margin:-70px 0 0 -70px;
	background: url(../images/icon_play.svg); opacity: .85;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; 
	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;
	}
.index_slider .play_btn:hover::before { opacity: 1; }

.index_slider .videoBox { padding-bottom: 56.25%; position: relative; width: 100%; background: #000; }
.index_slider .videoBox iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; margin:0; }

.index_slider .close_btn { position: absolute; right: 22px; top: 72px; z-index: 10000; display:block; text-decoration:none; font-size: 0; width: 37px; height: 37px; opacity:0.7; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.index_slider .close_btn:hover { opacity:1; }
.index_slider .close_btn:before, .index_slider .close_btn:after { display:block; content:''; position:absolute; top:0; left:50%; width:2px; height:100%; background-color:#fff; }
.index_slider .close_btn:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
.index_slider .close_btn:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }

/*----------------------------------------------------------------------*/
/* 共用樣式 */
.index_title { background-color: #A8B400; color: #0c0103; display: flex; justify-content: center; align-items: center; }
.index_title h2 { text-transform:uppercase; letter-spacing: .1em; padding-left: .1em; padding-top: .1em; padding-bottom: .1em; font-family: 'Bank Gothic', 'sans-serif'; font-weight:500; text-align: center; }

.index_more_btn { text-align: center; }
.index_more_btn a { font-size: 1.5em; font-weight:500; text-transform:uppercase; border: 3px solid var(--main_color); border-radius: 10px; padding: 2px 15px; display: inline-block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.index_more_btn a:hover { border-color: #fff; transform: scale(1.15); }

/*----------------------------------------------------------------------*/
/* 首頁產品列表 */
.index_list { background-size: cover; background-position: center; }
.index_list ul { display: flex; flex-wrap: wrap; text-align: center; max-width: 1280px; margin: 0 auto; }
.index_list ul li { width: calc(50% - 10px); margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; }
.index_list ul li .item { position: relative; width: 100%; }
.index_list ul li:nth-child(even) { margin-left: 20px; }
.index_list .item_title { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.index_list .item_title a { font-weight: 500; font-size: min(max(1.125rem, 4.5vw), 1.875rem); color: #fff; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 5px; box-sizing: border-box; }
.index_list .imgBox { width: 100%; height: 0; padding-bottom: 46.666666%; position: relative; overflow: hidden; }
.index_list .imgBox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.index_list li .imgBox img, .index_list .item_title, .index_list .item_title a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.index_list .item:hover .imgBox img { filter: saturate(0%) brightness(55%); }
.index_list .item:hover .item_title { background-color: rgba(0,0,0,.7); }
.index_list .item:hover .item_title a { color: var(--main_color); }

/*----------------------------------------------------------------------*/
/* 首頁News */
.index_news_list ul { display: flex; flex-wrap: wrap; text-align: center; max-width: 1280px; margin: 0 auto; }
.index_news_list ul li { margin-left: calc(56px * 3 / 2); width: calc(100% / 3 - 56px); max-width: 450px; }
.index_news_list ul li:first-child { margin-left: 0; }
.index_news_list .imgBox { width: 100%; height: 0; padding-bottom: 84.212%; position: relative; overflow: hidden; }
.index_news_list .imgBox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.index_news_list .imgBox a:hover { opacity: 0.7; }
.index_news_list .imgBox a:hover img { transform: scale(1.125); }
.index_news_list .item_title { padding: 20px 10px; font-size: 1.5em; font-weight:500; line-height: 1.25em; }
.index_news_list .item_title a, .index_news_list .imgBox a img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

/*----------------------------------------------------------------------*/
/* RWD */
@media screen and (max-width: 639px) {
	.index_title h2 { font-size: min(max(1.5rem, 8vw), 4.25rem); }
	.index_more_btn { padding: 10px 0; }
	.index_slider .play_btn::before { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
	.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: 10px; }
	.bx-wrapper .bx-pager.bx-default-pager a { width: 8px; height: 8px; }
	
	.index_list { padding: 7% 5%; }
	
	.index_news_list { padding: 7% 30px; }
	.index_news_list ul { flex-direction: column; }
	.index_news_list ul li { width: 100%; margin: 0 auto 20px; }
	.index_news_list ul li:first-child { margin: 0 auto 20px; }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
	.index_title h2 { font-size: 2.875em; }
	.index_more_btn { padding: 20px 0; }
	.index_slider .play_btn::before { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
	
	.index_list { padding: 65px 5%; }
	.index_list .item_title a { font-size: 1.75em; }
	.bx-wrapper .bx-controls-direction a { width: 40px; height: 80px; margin-top: -40px; }
	.bx-wrapper .bx-prev:after, .bx-wrapper .bx-next:after { width: 40px; height: 40px; border-width: 4px; margin-top: -22px; }
	
	.index_news_list { padding: 30px 5%; }
}

@media screen and (max-width: 767px) {
	.index_news_list .item_title, .index_more_btn a { font-size: min(max(1.125rem, 4.5vw), 1.875rem); }
	.index_news_list ul { flex-direction: column; }
	.index_news_list ul li { width: 100%; margin: 0 auto 20px; }
	.index_news_list ul li:first-child { margin: 0 auto 20px; }
}

@media screen and (min-width: 1024px) {
	.index_title { padding: .576em 0; }
	.index_title h2 { font-size: 4.25em; }
	.index_more_btn { padding: 35px 0; }
	
	.index_list { padding: 5%; }
	.index_list .item_title a { font-size: 3em; }
	.bx-wrapper .bx-controls-direction a { width: 70px; height: 140px; margin-top: -70px; }
	.bx-wrapper .bx-prev:after, .bx-wrapper .bx-next:after { width: 70px; height: 70px; border-width: 5px; margin-top: -37px; }
	.bx-wrapper .bx-prev:after { left: 23px; }
	.bx-wrapper .bx-next:after { right: 23px; }
	
	.index_news_list { padding: 65px 5% 0; }
	.index_news_list .item_title { padding: 30px 10px; }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
	.index_title { padding: 0; }
	.index_title h2 { padding-top: 1px; padding-bottom: 1px; }
}