@charset "utf-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC");



*, *:active, *:focus, *:hover, *:link, *:visited {
    -o-transition: background-color 0.2s linear, border-color 0.1s linear;
    -webkit-transition: background-color 0.2s linear, border-color 0.1s linear;
    -moz-transition: background-color 0.2s linear, border-color 0.1s linear;
    transition: background-color 0.2s linear, border-color 0.1s linear
}
a{transition: 0.5s ease; }
h1, h2, h3, h4, h5{ margin:0;}
[class*=" fa-"], [class^="fa-"] {
    font-family: FontAwesome !important
}

html {
    font-size: 16px
}

input[type="text"] {
    font-size: inherit
}

input[type="button"],input[type="button"]:focus {    
    outline:none;
	cursor:pointer;
	transition: 0.5s ease;
}
button,button:focus {
    outline:none;
	cursor:pointer;
	transition: 0.5s ease;
}
body {
    color: #575757;
	font-family: 'Noto Sans TC', 'microsoft jhenghei', '微軟正黑體', 'PingFangTC', '蘋方-繁', 'Arial', sans-serif;
	margin:0;
	padding:0;
	
}


.header_div{transition: 0.5s ease; position:fixed; left:0; top:0; width:100%; padding-top:30px;    z-index: 88; }
.scroll .header_div{ padding-top:10px; background:rgba(0,0,0,0.7); padding-bottom:10px;}
.header_div .brand a img{transition: 0.5s ease;}
.scroll .header_div .brand a img{ height:65px;}
.header_div .outer{ max-width:1200px; margin:0 auto; padding: 0 15px; display:flex; flex-wrap:wrap;    justify-content: space-between;}
.header_div .outer .navi{ padding-top:20px;}
.header_div .outer .navi ul{ margin:0; padding:0; list-style:none;}
.header_div .outer .navi ul li{ display:inline-block; position:relative;}
.header_div .outer .navi ul li a{ display:block; padding:5px; text-align:center; color:#fff; font-size:16px; text-decoration:none; min-width:100px; border:1px solid transparent;}
.header_div .outer .navi ul li.active a,.header_div .outer .navi ul li:hover a{ border:1px solid #f8b62c;}
.header_div .outer .navi ul li .drop_down{ position:absolute; display:none; min-width:120%; right:20px; padding-top:10px;}
.header_div .outer .navi ul li .drop_down ul{ position:relative; }
.header_div .outer .navi ul li .drop_down ul:before{
	content:'';
	position:absolute;
	top:-7px;
	left:calc(50% - 4px + 30px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: #f8b72c transparent transparent transparent;
}
.header_div .outer .navi ul li .drop_down ul li{ display:block; position:relative;}
.header_div .outer .navi ul li .drop_down a{ font-style:italic; font-size:12px; display:block; padding:8px 0; text-align:right; border:none; border-bottom:1px solid #fff;} 
.header_div .outer .navi ul li .drop_down a:hover{ color:#f8b62c;}
.header_div .outer .navi ul li.had_sub_menu:hover .drop_down{ display:block;}
.home_block_top{ position:relative;}
.home_block_top .video{  overflow: hidden; position:relative; height:85vh;}
.home_block_top .video:before{
	content:'';
	position:absolute;
	z-index:2;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.7);
}
.home_block_top .video:after{
	content:'';
	position:absolute;
	z-index:3;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(59%, rgba(251,251,251,0)), color-stop(60%, rgba(255,255,255,0.02)), color-stop(100%, rgba(248,182,44,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#f8b62c', GradientType=0 );
}
.home_block_top .video video{
	margin:0;
	padding:0;
	min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
   	
	
}
.home_block_top .info{ position:absolute; left:0; top:0; width:100%; height:100%;display: flex; align-items: flex-end; justify-content: center; z-index:5;}
.home_block_top .info .outer{max-width:1200px; margin:0 auto; margin-bottom:30px; padding: 0 15px;}
.home_block_top .info .outer h2{ font-size:60px; color:#fff; position:relative;}
.home_block_top .info .outer h2 b{ display:inline-block; position:relative; font-weight:600;}
.home_block_top .info .outer h2 b:after{ content:''; position:absolute; right:-40px; bottom:15px; background:#f8b62c; width:15px; height:50px;}
.home_block_top .info .outer h2 b i{ font-style:normal; color:#f8b62c;}
.home_block_top .info .outer p{ font-size:21px; margin-top:20px; color:#fff;}

.home_block_middle .list{display: flex; flex-wrap:wrap;}
.home_block_middle .list .item{ width:calc(100% / 3); position:relative;}
.home_block_middle .list .item a{ display:block; position:relative;}
.home_block_middle .list .item a .img img{ width:100%;}
.home_block_middle .list .item a .info{ transition: 0.5s ease;position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7);display: flex; align-items: center; justify-content: center;}
.home_block_middle .list .item a .info h3{ font-size:28px; color:#fff; position:relative; font-weight:200;}
.home_block_middle .list .item a .info h3 b{font-weight:200; padding-left:20px; position:relative; display:inline-block;}
.home_block_middle .list .item a .info h3:after{ content:''; position:absolute; left:0; top:5px; background:#f8b62c; width:8px; height:30px; }
.home_block_middle .list .item a:hover .info{ opacity:0;}

.home_block_bottom{ background:#25252d; padding:45px 0;}
.home_block_bottom .outer{max-width:1200px; margin:0 auto; padding:0 15px; }
.home_block_bottom .outer h3{ color:#f8b62c; font-size:29px;}
.home_block_bottom .outer .list{display:flex; flex-wrap:wrap; }
.home_block_bottom .outer .list .col01{ width:40%; margin-right:10%;}
.home_block_bottom .outer .list .col02{ width:30%; color:#fff;}
.home_block_bottom .outer .list .col03{ width:20%; display: flex; justify-content: flex-end;   align-items: flex-end;}
.home_block_bottom .outer .list .col02 h4{ font-size:16px; color:#fff;}
.home_block_bottom .outer .list .keyin{ margin-top:20px;}
.home_block_bottom .outer .list .keyin .item{display: flex; align-items:center; padding:5px 0; }
.home_block_bottom .outer .list .keyin .item .label{ font-size:16px; width:55px; color:#fff;}
.home_block_bottom .outer .list .keyin .item .controller{ width:calc(100% - 55px);}
.home_block_bottom .outer .list .keyin .item .controller input{ background:#34343e; color:#fff; width:calc(100% - 6px); border:none; padding:3px;}
.home_block_bottom .outer .list .keyin .item .checkbox_list .checkbox_outer{ margin:5px 0;}
.home_block_bottom .outer .list .col02 .keyin { margin-top:0px;}
.home_block_bottom .outer .list .col03 input[type="submit"]{ outline:none; cursor:pointer; color:#25252d; font-size:16px; background:#f8b62c; border:1px solid #f8b62c; padding:5px 15px; border-radius:2px;}
.home_block_bottom .outer .list .col03 input[type="submit"]:hover{ background:none; color:#f8b62c;}
.checkbox_container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default checkbox */
.checkbox_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkbox_container .checkmark {
  position: absolute;
  top: 4px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #35353e;
}

/* On mouse-over, add a grey background color */
.checkbox_container:hover input ~ .checkmark {
  background-color: #333;
}

/* When the checkbox is checked, add a blue background */
.checkbox_container input:checked ~ .checkmark {
  background-color: #35353e;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox_container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox_container .checkmark:after {
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #f8b62d;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.product_slider{ position:relative;}
.product_slider .swiper-container{ height:85vh;}
.product_slider .swiper-button{ z-index:4;}
.product_slider .swiper-container:after{
	content:'';
	position:absolute;
	z-index:3;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(59%, rgba(251,251,251,0)), color-stop(60%, rgba(255,255,255,0.02)), color-stop(100%, rgba(248,182,44,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(251,251,251,0) 59%, rgba(255,255,255,0.02) 60%, rgba(248,182,44,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#f8b62c', GradientType=0 );
}
.product_slider .swiper-container .swiper-slide img{
	object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}
.product_slider .info{ transition: 0.5s ease;position:absolute;  z-index: 10;left:0; top:0; width:100%; height:100%; display: flex;align-items: flex-start; justify-content: flex-end;}
.product_slider .info .outer{width:1200px; margin:0 auto; margin-top:15vw;display: flex; justify-content: flex-end;}
.product_slider .info .box{ width:445px;}
.product_slider .info .box .title{ color:#25252d; font-size:12px; background:rgba(255,255,255,1); position:relative; padding:10px;}
.product_slider .info .box .title h3{color:#25252d; font-size:12px;}
.product_slider .info .box .title a{ display:inline-block;color:#25252d; font-size:12px; position:absolute; right:10px ;top:10px; text-decoration:none;}
.product_slider .info .box .title a i:after{content:'+'; font-style:normal; display:inline-block; width:10px; height:20px; text-align:center;}
.product_slider .info .box.active .title a i:after{content:'-';}
.product_slider .info .box .desc{ overflow:hidden;padding:0px 20px; opacity:0; transition: 0.5s ease; height:0; background:rgba(255,255,255,0.7); color:#25252d; font-size:12px; line-height:1.8;}
.product_slider .info .box.active .desc{ height:auto;padding:25px 20px; opacity:1; }
.product_slider .info .box .desc p{ margin-top:0; margin-bottom:15px;}



.footer_div .top_div{ background:#34343e; padding:60px 0;}
.footer_div .top_div .outer{max-width:1200px; margin:0 auto;  padding:0 15px;display: flex; flex-wrap: wrap;}
.footer_div .top_div .outer .col{ width:50%; font-size:14px;  color:#fff; line-height:2;}
.footer_div .top_div .outer .col h3{ font-size:16px;  color:#f8b62c;}
.footer_div .top_div .outer .col h4{ font-size:16px;  color:#fff; margin-top:20px; font-weight:400;}
.footer_div .top_div .outer .col a{ text-decoration:none;  color:#f8b62c;}
.footer_div .top_div .outer .col .society{ margin-top:-30px; text-align:right;}
.footer_div .top_div .outer .col .society a{transition: 0.5s ease; display:inline-block; margin-left:15px;}
.footer_div .top_div .outer .col .society a:hover{
	opacity:0.5;
	-ms-transform: scale(1.05, 1.05); /* IE 9 */
	-webkit-transform: scale(1.05, 1.05); /* Safari */
	transform: scale(1.05, 1.05);	
	
}
.footer_div .bottom_div{ background:#25252d; padding:10px 20px;}



@media screen and (max-width: 1240px){
	.home_block_middle .list .item a .info h3{ font-size:20px;}
	.home_block_middle .list .item a .info h3:after{ width:5px; height:22px;}
	.home_block_top .info .outer h2{ font-size:40px;}
	.home_block_top .info .outer h2 b:after {		
		right: -30px;
		bottom: 10px;		
		width: 10px;
		height: 35px;
	}
	.home_block_top .info .outer p{ font-size:18px;}
	.home_block_bottom .outer h3{ font-size:22px;}
	.home_block_bottom .outer .list .keyin .item .label{ font-size:14px;}
	
	.product_slider .info .outer{ width:calc(100% - 20px);}
	.checkbox_container{ font-size:14px;}
	
	/*.footer_div .top_div .outer .col{ font-size:13px;}
	.footer_div .top_div .outer .col h3{ font-size:22px;}
	.footer_div .top_div .outer .col h4{ font-size:20px; margin-top:15px;}*/
	.footer_div .bottom_div{ font-size:12px;}
}
@media screen and (max-width: 1024px){
	.home_block_top .video{ min-height:500px;}
}
@media screen and (max-width: 950px){
	.home_block_middle .list .item{ width:100%;border-bottom: 1px solid #999;}
	.product_slider .swiper-container{ height:65vh;}
}
@media screen and (max-width: 768px){
	.header_div .brand a img{ height:55px;}
	.scroll .header_div .brand a img{ height:45px;}	
	.header_div{ padding-top:15px;}
	.header_div .outer .navi{ padding-top:10px;}
	.header_div .outer .navi ul li a{ min-width:80px; padding:3px; font-size:15px;}
	.home_block_top .info .outer{    margin-bottom: 20px;}
	.home_block_top .info .outer p{ margin-top:15px; font-size:16px;}
	
	.home_block_bottom .outer .list .col01{ width:100%; margin-right:0;}
	.home_block_bottom .outer .list .col02{ width:100%; margin-top:20px; }
	.home_block_bottom .outer .list .col03{ width:100%; margin-top:20px;justify-content: flex-start;}
	.home_block_bottom .outer .list .col03 input[type="submit"]{ width:50%;}
	
	.footer_div .top_div .outer .col{ width:100%;}
	.footer_div .top_div .outer .col:first-child{ margin-bottom:20px;}
	.footer_div .top_div .outer .col .society{ text-align:left; margin-top:20px;}
	.footer_div .top_div .outer .col .society a{ margin-left:0; margin-right:15px;}
}
@media screen and (max-width: 640px){
	.header_div{ padding-top:10px;}
	.header_div .brand a img {  height: 40px;}
	.scroll .header_div .brand a img{ height:40px;}	
	.header_div .outer .navi{ padding-top:5px;}
	.header_div .outer .navi ul li a{ font-size:14px;    min-width: 60px;}
	.header_div .outer .navi ul li .drop_down{
		right: -15px;   min-width: 100vw;
		background: rgba(0,0,0,0);
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(40%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );	
	}
	.header_div .outer .navi ul li .drop_down ul:before{
		left:auto;
		right:45px;
	}
	.header_div .outer .navi ul li .drop_down a{ padding:5px 15px;}
	.home_block_bottom{ padding:30px 0;}
	.product_slider .info .outer{ margin-top:20vw;}
	
	.product_slider .swiper-button-prev,.product_slider .swiper-button-next {
		position: absolute;
		top: 50%;
		width: 35px;
		height: 35px;
	}
	.product_slider .swiper-button-prev:after,.product_slider  .swiper-button-next:after{ font-size:28px;}
	.footer_div .top_div{ padding:30px 0;}
	.footer_div .top_div .outer .col .society a img{ width:36px;}
}
@media screen and (max-width: 480px){
	.home_block_top .info .outer h2{ font-size:32px;}
	.home_block_top .info .outer h2 b:after {
		right: -20px;
		bottom: 8px;
		width: 7px;
		height: 28px;
	}
	.home_block_top .info .outer p{ font-size:14px;}
	.home_block_bottom .outer .list .col03 input[type="submit"]{ width:100%;}
	.product_slider .info .box{ width:100%; }
}