@charset "utf-8";
/* ----------TRANSITION---------- */
	.sec_video:before,
	#main_slider .owl-dot,
	#main_slider .item:after,
	#sales_slider .sales_title{
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
/* ----------SEC_TOP---------- */
	.sec_top {
		height: calc(100vh - 142px);
		min-height: 640px;
		padding: 6% 0;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		font-size: 18px;
		color:#ffffff;
		position: relative;
	}
	.sec_top h1{/*20210701修改頁面h1*/
		font-family: 'cwTeXYen', sans-serif;
		padding:10px 0 4%;
		font-size: 36px;
		letter-spacing: 3px;
	}
	.sec_top h2{
		font-family: 'cwTeXYen', sans-serif;
		padding:10px 0 4%;
		font-size: 36px;
		letter-spacing: 3px;
	}
	.sec_top h2 br{
		display: none;
	}
	.sec_top .w1200{
		height: 520px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin:auto;
	}
	.sec_top .container{
		box-shadow: 0 0 19px 0 rgba(0,0,0,.2);
		position: relative;
		overflow: hidden;
		z-index: 2;

		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.sec_top .cates,
	.sec_top .content{
		float:left;
	}
	.sec_top .cates > p,
	.sec_top .cates a{
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		display: block;
		padding:68px 10px;

		padding:68px 5px \9;
	}
	.sec_top .cates p{
		line-height: 1.1em;
	}
	.sec_top .cates > p{
		background-color: #E48026;
		cursor:default;
	}
	.sec_top .cates a{
		color: #fff;
		background-color: #E48026;
	}
	.sec_top .cates{
		width: 40px;
	}
	.sec_top .content{
		width: calc(100% - 50px);
		padding:40px 8% 30px 5%;
	}

	.sec_top .col50,
	.sec_top .col60,
	.sec_top .col40{
		margin-left:-4px;
		padding: 0 2%;
		vertical-align: top;
	}
	.sec_top .col60{
		padding-left: 0;
	}
	.sec_top .col40{
		padding-right: 0;
	}

	.sec_top .content p{
		text-align: left;
		margin-bottom: 15px;
	}
	.sec_top label{
		display: block;
		text-align: left;
		margin-bottom: 22px;
	}
	.sec_top label.btn-red{
		letter-spacing: 3px;
		text-align: center;
		background: url(../img/icon/arrow-w.png) #E48026 80% center no-repeat;
		background-size: 10px;
	}
	.sec_top label.btn-red:hover{
		/*background: url(../img/icon/arrow-r.png) #ffffff 80% center no-repeat;*/
		background-color: #D75526;
		background-size: 10px;
		color: #fff;
	}
	.sec_top input[type="text"]{
		border:none;
	}
	.sec_top #returntime{
		width: 100%;
		min-height: 47px;
		padding: 8px 18px;
		border:2px solid #ffffff;
	}
/* ----------NEWS_SLIDER---------- */
/*
	#news_slider{
		background-color: #E48026;
		color:#ffffff;
		text-align-last: center;
		padding:15px 25px;
		font-size: 18px;
	}
	#news_slider p{
		letter-spacing: 4px;
		display: inline-block;
		vertical-align: middle;
	}
*/
/* ----------SEC_VIDEO---------- */
	.sec_video{
		position: relative;
		overflow: hidden;
		height: 27vw;
		min-height: 169px;
		cursor: pointer;
	}
	.sec_video:before{
		content:'';
		display: block;
		width: 94%;
		height: 80%;
		box-shadow: 0 0 0 2px #E48026 inset;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin:auto;
		z-index: 1;
	}
	.sec_video:hover:before{
		width: 96%;
		height: 85%;
	}
	/*.sec_video.active{
		height: auto;
		opacity: 1;
	}
	.sec_video.active:before{
		width: 100%;
		height: 100%;
	}*/
	.sec_video iframe{
		display: block;
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin:auto;
		opacity: .6;
	}
	/*.sec_video.active iframe{
		position: relative;
		opacity: 1;
	}*/
	.sec_video img{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin:auto;
	}
	#vid_lightbox{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;left: 0;
		z-index: 1000;
		cursor: url(../img/icon/error.png), auto;
		display: none;
	}
	#vid_lightbox .box{
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		margin:auto;
		width: 80%;
		height: 0;
		padding-bottom: 45%;
		background-color: rgba(255,255,255,.7);
		border:1px solid #E48026;
		box-shadow: 0 0 15px 5px rgba(0,0,0,.2);
		cursor: default;
	}
	#vid_lightbox iframe{
		display: block;
		width: 90%;
		height: 90%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin:auto;
	}

	#close_box{
		position: absolute;
		top: 10px;
		right: 10px;
		width: 30px;
		height: 30px;
		background:url(../img/icon/error.png) right top no-repeat;
		background-size: contain;
		cursor: pointer;
	}
/* ----------MAIN_SLIDER---------- */
	.owl-item { /* prevent filter and text flickering */
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
	}
	#main_slider .item{
		display: block;
		height: 450px;
		max-height: 69vh;
		text-align: center;
    	background: center center no-repeat;
		background-size: cover;
	}
	/*#main_slider .item:after{
		content:'';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(204, 0, 51, 0.25);
	}*/
	#main_slider .item .container,
	#main_slider .item:before{
		display: inline-block;
		vertical-align: middle;
		position: relative;
		z-index: 5;
	}
	#main_slider .item:before{
		content:'';
		width: 0;
		height: 100%;
	}
	#main_slider .item{
		font-size: 18px;
		backface-visibility: none;
	}
	#main_slider .item h2{
		font-size: 3.5em;
		font-weight: 600;
		letter-spacing: 8px;
	}
	#main_slider .item p{
		letter-spacing: 4px;
		margin-bottom: 40px;
	}
	#main_slider .item .btn{
		display: inline-block;
		font-size: 28px;
		letter-spacing: 5px;
		padding: 12px 60px;
	}
	#main_slider .item:hover .btn{
		border:2px solid #ffffff;
		background-color: rgba(255,255,255,.3);
	}

	#main_slider .owl-dots{
		position: absolute;
		bottom: 5%;
		left: 0;
		right: 0;
		margin:0 auto;
		text-align: center;
	}
	#main_slider .owl-dot{
		display: inline-block;
		width: 70px;
		height: 6px;
		margin:0 12px;
		background-color: #fefefe;
	}
	#main_slider .owl-dot.active{
		width: 120px;
		background-color: #E48026;
	}
/* ----------SALES_SLIDER---------- */
	#sales_slider{
		position: relative;
	}
	#sales_slider a{
		display: block;
	}
	#sales_slider .item{
		max-height: 450px;
		position: relative;
		overflow: hidden;
	}
	#sales_slider .item:after{
		content:'';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-box-shadow:inset 0 -250px 250px -100px rgba(0,0,0,.7);
		box-shadow:inset 0 -250px 250px -100px rgba(0,0,0,.7);
	}
	#sales_slider .item img{
		opacity: .9;
		height: auto;
		max-height: none;
	}
	#sales_slider .sales_title{
		color:#ffffff;
		display: block;
		padding:10% 15%;
		position: absolute;
		left: 0;
		right: 0;
		bottom:0;
		margin:auto auto 5% auto;
		z-index: 5;
		opacity: 0;
		pointer-events: none;
	}
	#sales_slider .center ~ .active .sales_title{ /* make last item text invisible*/
		opacity: 0;
		pointer-events: none;
	}
	#sales_slider .active .sales_title,
	#sales_slider .center + .active .sales_title{
		opacity: 1;
		pointer-events: all;
	}
	#sales_slider .sales_title:hover{
		-webkit-transform: scale(1.1);
		   -moz-transform: scale(1.1);
		    -ms-transform: scale(1.1);
		     -o-transform: scale(1.1);
		        transform: scale(1.1);
	}
	#sales_slider h3{
		font-weight: 600;
		text-align:center;
		letter-spacing: 7px;
	}

	#sales_slider .owl-nav,
	#info_slider .owl-nav{
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		margin:auto 0;
		box-shadow: -120px 0 120px -50px rgba(0,0,0,.5) inset,
					120px 0 120px -50px rgba(0,0,0,.5) inset;
		pointer-events: none;
	}
	#sales_slider .owl-prev,
	#sales_slider .owl-next,
	#info_slider .owl-prev,
	#info_slider .owl-next{
		/*width: 10%;*/
		/*height: 100%;*/
		width: 20px;
		height: 37px;
		background: url(../img/icon/arrow-w.png) center center no-repeat;
		position: absolute;
		top:50%;
		right: 3%;
		/*right: 0;*/
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		     -o-transform: translateY(-50%);
		        transform: translateY(-50%);
		pointer-events: all;
	}
	#sales_slider .owl-prev,
	#info_slider .owl-prev{
		left: 3%;
		right: auto;
		-webkit-transform: rotate(180deg) translateY(-50%);
		   -moz-transform: rotate(180deg) translateY(-50%);
		    -ms-transform: rotate(180deg) translateY(-50%);
		     -o-transform: rotate(180deg) translateY(-50%);
		        transform: rotate(180deg) translateY(-50%);
		transform-origin: top;
	}
/* ----------INFO_SLIDER---------- */
	#info_slider{
		background-color: #e5e5e5;
		padding:110px 125px;
		position: relative;
	}
	#info_slider .item{
		text-align:center;
		color:#E48026;
		-webkit-transition: none;
		   -moz-transition: none;
		    -ms-transition: none;
		     -o-transition: none;
		        transition: none;
	}
	#info_slider .center .item{
		color:#161616;
		position: relative;
		-webkit-transition: color 2s ease;
		   -moz-transition: color 2s ease;
		    -ms-transition: color 2s ease;
		     -o-transition: color 2s ease;
		        transition: color 2s ease;
	}
	#info_slider .center .item:before,
	#info_slider .center .item:after{
		content:'';
		display: block;
		width: 1px;
		height: 90%;
		background-color: #161616;
		position: absolute;
		top: 0;
		bottom: 0;
		margin:auto 0;
		left: 0;
		-webkit-animation: growHeight .5s forwards;
		   -moz-animation: growHeight .5s forwards;
		    -ms-animation: growHeight .5s forwards;
		     -o-animation: growHeight .5s forwards;
		        animation: growHeight .5s forwards;
	}
	#info_slider .center .item:after{
		left: auto;
		right: 0;
	}
	#info_slider h3{
		font-size: 50px;
		line-height: 60px;
		font-weight: 600;
		letter-spacing: 8px;
		margin-top: 25px;
	}
	#info_slider p{
		font-size: 22px;
		letter-spacing: 3px;
		font-weight: 400;
	}

	#info_slider .owl-nav{
		box-shadow: none;
		left: 0;
	}
	#info_slider .owl-prev,
	#info_slider .owl-next{
		background: url(../img/icon/arrow-b.png) center center no-repeat;
		right: 8%;
	}
	#info_slider .owl-prev{
		left: 8%;
	}
/* ----------ANIMATION---------- */
	@-webkit-keyframes slideOutDown {
		from {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		to {
			visibility: hidden;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}
	}
	@keyframes slideOutDown {
		from {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		to {
			visibility: hidden;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}
	}
	.slideOutDown {
		-webkit-animation-name: slideOutDown;
		animation-name: slideOutDown;
	}
	@-webkit-keyframes flipInX {
		from {
			-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
			transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
			-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
			opacity: 0;
		}
		40% {
			-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
			transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
			-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
		}
		60% {
			-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
			transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
			opacity: 1;
		}
		80% {
			-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
			transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		}
		to {
			-webkit-transform: perspective(400px);
			transform: perspective(400px);
		}
	}
	@keyframes flipInX {
		from {
			-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
			transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
			-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
			opacity: 0;
		}
		40% {
			-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
			transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
			-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
		}
		60% {
			-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
			transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
			opacity: 1;
		}
		80% {
			-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
			transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		}
		to {
			-webkit-transform: perspective(400px);
			transform: perspective(400px);
		}
	}
	.flipInX {
		-webkit-backface-visibility: visible !important;
		backface-visibility: visible !important;
		-webkit-animation-name: flipInX;
		animation-name: flipInX;
	}

	@-webkit-keyframes growHeight{
		from{height: 0;}
		to  {height: 90%;}
	}
	@keyframes growHeight{
		from{height: 0;}
		to  {height: 90%;}
	}
/* ----------RWD---------- */
	@media screen and (max-width: 1550px){
		.sec_top{
			min-height: 490px;
		}
		.sec_top .w1200{
			height: 390px;
			max-width: 768px;
		}
		.sec_top .cates > p,
		.sec_top .cates a{
			padding:45px 10px;
		}
		.sec_top h2{
			font-size: 30px;
			padding-bottom: 10px;
		}
		.sec_top h1{/*20210701修改頁面h1*/
			font-size: 30px;
			padding-bottom: 10px;
		}
		.sec_top .content p{
			margin-bottom: 5px;
		}
		.sec_top label{
			margin-bottom: 15px;
		}
		input[type="text"]{
			padding:7px 12px;
			font-size: 16px;
		}
		.sec_top #returntime{
			min-height: 38px;
			font-size: 16px;
		}
		.sec_top label.btn-red{
			padding:8px 25px;
		}
/*
		#news_slider{
			padding: 5px 20px;
		}
		#news_slider p{
			font-size: 14px;
		}
*/
		#info_slider{
			padding: 95px 125px;
		}
	}
	@media screen and (max-width: 1366px) {
		.sec_top{
			font-size: 16px;
		}

		#main_slider .item h2{
			font-size: 2.5em;
		}
		#main_slider .item .btn{
			font-size: 20px;
			padding: 10px 50px;
		}

		#info_slider h3{
			font-size: 35px;
			margin-top: 10px;
			letter-spacing: 5px;
		}
		#info_slider p{
			font-size: 18px;
		}
	}
	@media screen and (max-width: 1200px){
		.sec_top {
			height: calc(100vh - 110px);
		}
		.sec_top .content {
			padding: 40px 5% 30px 3%;
		}
		#info_slider{
			padding: 70px 125px;
		}
	}
	@media screen and (max-width: 1025px) {
		#sales_slider h3{
			font-size: 1.5em;
			font-weight: 400;
		}
		#info_slider p{
			font-size: 16px;
		}
		#info_slider h3{
			font-size: 28px;
			line-height: 1.2em;
			letter-spacing: 4px;
		}
	}
	@media screen and (max-width: 768px) {
		.sec_top{
			padding: 20% 0 10%;
			min-height: 300px;
			height: auto;
		}
		.sec_top .w1200{
			height: auto;
			position: relative;
		}
		.sec_top .container{
			padding:20px;
		}
		.sec_top .cates,
		.sec_top .content{
			float:none;
			width: 100%;
		}
		.sec_top .content{
			width: 100%;
			max-height: 0;
			padding: 0;
			overflow:hidden;
			-webkit-transition: all .4s ease;
			   -moz-transition: all .4s ease;
			    -ms-transition: all .4s ease;
			     -o-transition: all .4s ease;
			        transition: all .4s ease;
		}
		.sec_top .content.active{
			max-height: 1000px;
			padding: 30px 5% 30px 5%;
		}
		.sec_top .col50:last-child p{
			display: none;
		}
		.sec_top .cates > p,
		.sec_top .cates > a{
			-webkit-writing-mode: initial;
			writing-mode: initial;
			padding:10px;
			display: inline-block;
			width: 50%;
		}
		.sec_top .cates > p{
			cursor: pointer;
		}
		.sec_top .cates > a{
			margin-left: -8px;
		}
		.sec_top label.btn-red{
			margin-top: 10px;
		}

		#vid_lightbox .box{
			width: 90%;
			padding-bottom: 50.5%;
		}
		#close_box{
			top: -35px;
			right: 10px;
		}

		#main_slider .item h2{
			font-size: 2em;
		}
		#main_slider .owl-dot{
			width: 40px;
			margin:0 6px;
		}
		#main_slider .owl-dot.active{
			width: 70px;
		}
		#info_slider{
			padding:50px 50px;
		}
		#info_slider .owl-prev,
		#info_slider .owl-next{
			right: 5%;
		}
		#info_slider .owl-prev{
			left: 5%;
		}
		#info_slider .center .item:before,
		#info_slider .center .item:after{
			display: none;
		}

		/*.sec_video{
			pointer-events: none;
		}
		.sec_video iframe{
			pointer-events: all;
		}*/
	}
	@media screen and (max-width: 480px) {
		.sec_top h2{
			font-size: 24px;
		}
		.sec_top h2 br{
			display: block;
		}
		.sec_top .content.active{
			padding: 30px 0 0;
		}
		.sec_top .content p{
			margin-bottom: 5px;
		}
		.sec_top label{
			margin-bottom: 15px;
		}

		#main_slider .item{
			min-height: 415px;
		}
		#main_slider .item .container{
			text-align: center !important;
			text-align-last: center !important;
		}
		#main_slider .item h2{
			font-size: 1.5em;
		}
		#main_slider .item p{
			font-size: 14px;
			margin-bottom: 20px;
		}
		#main_slider .item .btn{
			font-size: 14px;
			padding: 10px 20px;
		}

		#sales_slider .owl-nav{
			box-shadow: none;
		}
	}
	@media screen and (max-width: 380px) {
		.sec_top .col60,
		.sec_top .col40{
			width: 100%;
			display: block;
			margin-left: 0;
		}
		.sec_top .col40{
			margin-left: -4px;
		}
	}

/* 2022.08 */
.sec_top{
	color: #161616;
}
.sec_top h1{
	color: #fff;
	font-weight: bold;
	text-shadow: 2px 2px 3px #333;
}
.sec_top .container{
	box-shadow: none;
	background-color: #F5F5F5;
}
.sec_top hr{
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	margin: 0;
}
.sec_top .content{
	padding: 0;
}
.sec_top_con{
	padding: 19px 60px 15px 60px;
}
.sec_top_date_box{
	width: 50%;
}
.sec_top_date_box.left{
	padding-right: 5px;
}
.sec_top_date_box.right{
	padding-left: 5px;
}
.sec_top_input2[type="text"]{
	color: #000;
	background-color: #fff;
}
.sec_top_input2::placeholder{
	color: #fff
}
.sec_top label.btn-red{
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 45px;
}
.index_about{
	padding: 50px 0;
	background-color: #fff;
}
.index_about_box{
	width: 50%;
}
.index_about_text{
	padding: 100px 40px 40px 40px;
}
.index_about_text h4{
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0;
	margin-bottom: 30px;
}
.index_about_text p{
	letter-spacing: 1;
}
#main_slider .item{
	height: 640px;
	max-height: none;
}
#main_slider .owl-dot{
	width: 30px;
	border-radius: 30px;
}
#main_slider .owl-dot.active{
	width: 30px;
}
#main_slider .slick-dots{
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	margin-top: 0;
}
.sec_video_index{
	position: relative;
	height: 960px;
	background-color: #fff;
	overflow: hidden;
}
.video_bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(20px);
	transform: scale(1.03);
}
.video_div{
	position: relative;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	top: 50%;
	transform: translateY(-50%);
}
.video_frame{
	position: relative;
	width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.video_frame iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.index_mobile_menu{
	display: none;
	padding: 10px;
	background-color: #fff;
}
.mobile_menu_item{
	width: 25%;
	padding: 15px 5px;
	font-size: 14px;
	text-align: center;
	border-bottom: 1px solid #ccc;
	letter-spacing: 0;
}
.mobile_menu_item img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
.sec_top .cates{
	float: none;
	width: 100%;
}
.sec_top .content{
	float: none;
	width: 100%;
}
.sec_top .cates > p, .sec_top .cates a{
	writing-mode: inherit;
	padding: 10px 0;
}
.col-50{
	width: 50%;
}
.cates_btn{
	display: block;
	padding: 10px 0;
}
.cates_btn.color1{
	color: #fff;
	background-color: #D75526;
}


@media(max-width: 1200px){
	.index_about_text{
		padding: 0 20px;
	}
	.sec_video_index{
		height: auto;
	}
	.video_bg{
		display: none;
	}
	.video_div{
		top: 0;
		transform: translateY(0);
	}
	.index_mobile_menu{
		display: block;
	}
}

@media(max-width: 991px){
	#main_slider .item{
		height: 500px;
	}
}

@media(max-width: 767px){
	.sec_top .col50, .sec_top .col60, .sec_top .col40{
		margin-left: 0;
	}
	.sec_top_con{
		padding-left: 0;
		padding-right: 0;
	}
	.index_about_box{
		width: 100%;
	}
	.index_about_text{
		padding: 0 0 30px 0;
	}
	#main_slider .item{
		height: 400px;
	}
}