@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
}
*,*:focus,*:hover{
    outline:none;
}
a{transition: 0.5s ease; text-decoration:none; }
button{transition: 0.5s ease;}
p{  margin-top: 0;}
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;
	background-color: #f5f5f5;
	
}
.toggle_btn { display:none; position:fixed; top:20px; right:15px;    width: 30px; height: 30px;z-index: 110; background:none;border:none;padding: 0;}
.toggle_btn span{ display:block; width:100%; height:3px; background:#fff; margin:5px 0;transition: 0.5s ease;}
.toggle_btn b{ display:block; color:#9fa1a0;}
.body_mobile_active  .toggle_btn{ right: calc(65% + 40px);}
.body_mobile_active .toggle_btn{ z-index:999;}
.body_mobile_active .toggle_btn b{ display:none;}
.body_mobile_active .toggle_btn span{ background: #fff;}
.body_mobile_active .toggle_btn span:nth-child(1){ transform: rotate(-45deg);}
.body_mobile_active .toggle_btn span:nth-child(2){ transform: rotate(-135deg);    position: absolute; top: 9px;}
.body_mobile_active .toggle_btn span:nth-child(3){ display:none;}
.hide{ display:none;}
.overlay{ z-index: 99;display: none; position: fixed; left:0;top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);}
.body_mobile_active .overlay{ display: block;}

#mobile_nav{z-index: 111; display: none; position: fixed; right: 0; top: 0; height: 100vh; overflow-y:auto;background-color: #181818; width: 65%;}
.body_mobile_active #mobile_nav{ display: block;}
#mobile_nav ul{ margin: 0; padding:0; list-style: none;}
#mobile_nav ul li{ display: block;}
#mobile_nav ul li.society{ display: none;}
#mobile_nav ul li a{ font-size: 16x; font-weight: 400; color: #fff; display: block; padding:15px 10px; text-align: center; border-bottom: 1px solid #9b9b9b;}
#mobile_nav ul li a.had_submenu i{ 
	margin-left: 5px;
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 4px 8px 4px;
	border-color: transparent transparent #e50114 transparent;
}
#mobile_nav ul li.active>a.had_submenu i{ 
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 4px 0 4px;
	border-color: #e50114 transparent transparent transparent;
}
#mobile_nav ul li .dropdown{ display: none; background: #2c2c2c	;}
#mobile_nav ul li .dropdown .dropdown{background: #4a4a4a	;}
#mobile_nav ul li.active>.dropdown{ display: block;}


header{ position: fixed; top:0; left: 0; width: 100%;z-index: 2;background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.95)); }
.scroll header{ background: rgba(0, 0, 0, 1);}
header .outer{ max-width:90%; margin:0 auto; padding:15px 15px; display:flex; flex-wrap:wrap;align-items: center; justify-content: space-between;position:relative; z-index:2; }
.scroll header .outer{padding:10px 15px;}
header .outer .brand img{transition: 0.5s ease;height: 52px;}
.scroll header .outer .brand img{ height: 32px; }
header .outer .brand a{ display:block;}
header .outer .navi ul{ margin:0; padding:0; list-style:none; display:inline-flex; }
header .outer .navi ul li{ display: inline-block;}
header .outer .navi ul li a{ display:block; padding:10px 25px; text-align:center; color:#fff; font-size:16px; transition: 0.5s ease;}
header .outer .navi ul li a:hover{ color:rgba(255,255,255,0.5);}
header .outer .navi ul li.society{ display: inline-flex;align-items: center;}
header .outer .navi ul li .dropdown{ display: none; position: absolute;padding:0;}
header .outer .navi ul li:hover>.dropdown{ display: inline-block;}
header .outer .navi ul li.active>.dropdown{ display: inline-block;}
header .outer .navi ul li .dropdown ul{ position: relative; min-width: 114px;}
header .outer .navi ul li .dropdown ul:before{
	content:'';
	position: absolute;
	width: 98%;
	height: 100%;
	left: 1%;	
	top: 0;	
	background: #5B5B5B; /* 06/23業主要求修改選單底色 by Jerry */
	border-radius: 5px; 
	z-index: -1;
}
header .outer .navi ul li .dropdown ul{display: inline-block;}
header .outer .navi ul li .dropdown ul li{ display: block;}
header .outer .navi ul li .dropdown ul li a{ color:#fff; padding: 5px 20px; display: block;}
header .outer .navi ul li .dropdown ul li a:hover{color:rgba(255,255,255,0.5);}
header .outer .navi ul li .dropdown .dropdown{ left: 100%; /*top: 0;*/ margin-top:-34px; min-width: fit-content;}
header .outer .navi ul li:hover .dropdown .dropdown{ display: none;min-height: 100%;}
header .outer .navi ul li .dropdown li:hover .dropdown{display: inline-block;}
/*header .outer .navi ul li .dropdown  .had_submenu i{
	display: inline-block;
	margin-left: 5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 4px 0 4px;
	border-color: #666 transparent transparent transparent;	

}
header .outer .navi ul li .dropdown  .had_submenu.active i{
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 8px;
	border-color: transparent transparent transparent #e50114;		
} 
header .outer .navi ul li .dropdown  .had_submenu.active~.dropdown{display: inline-block;min-height: 100%;}*/
main{ position: relative; z-index: 1;}
main .mobile_society{position: absolute; right: 15px; top: 75px; display: none; align-items: center; justify-content: flex-end; z-index: 88;}
main .mobile_society a{ display: inline-block; margin-left: 20px; }

main .slider_div .swiper-container.mobile{ display: none;}
main .slider_div .swiper-container.mobile .swiper-slide{ background-position: center;}
main .slider_div .swiper-slide{ min-height: 100vh; background-size: cover; position: relative;}
main .slider_div .swiper-slide .box{ display:flex; align-items: center; justify-content: center; color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center;}
main .slider_div .swiper-slide .box .info{ max-width: 940px; padding: 0 15px;}
main .slider_div .swiper-slide .box .info h2{ font-size: 60px;  font-weight: 400;}
main .slider_div .swiper-slide .box .info h3{font-size: 18px;   font-weight: 400;margin-bottom: 15px;}
main .slider_div .swiper-slide .box .info p{font-size: 18px; font-weight: 400;}
main .slider_div .swiper-container .swiper-pagination{ bottom:50px;} 
main .slider_div .swiper-container .swiper-pagination-bullet{ background: transparent; border: 1px solid #e50113;opacity: 1;}
main .slider_div .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #e50113;}

main .block{ position: relative;}
main .block .title{ text-align: center; color: #fff;}
main .block .title h2{ font-size: 40px; position: relative; padding-bottom: 50px;}
main .block .title h2:before{ content: ''; position: absolute; left: calc(50% - 43px); bottom: 20px; background:#e50113
; width: 86px; height: 5px; }
main .block p{ font-size: 18px;}
main .block p big{ display: block;font-size: 18px;   font-weight: 400;margin-bottom: 10px;}
main .block p small{ display: block; font-size: 14px; font-weight: 400;}

main .block01{ padding: 80px 15px; background: #000; color: #fff; text-align: center; font-size: 18px;}
main .introduce{padding: 90px 15px;  background: #181818; color: #fff; text-align: center;}

main .category_div .swiper-slide{ height: 37.5vw; position: relative;}
main .category_div .swiper-slide img{ 
	object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;

}


main .category_div .swiper-button-prev{
	left: 0; background-color: rgba(229, 1, 19, 0.77); padding-right: 10px;
	-webkit-border-top-right-radius: 100px;
	-webkit-border-bottom-right-radius: 100px;
	-moz-border-radius-topright: 100px;
	-moz-border-radius-bottomright: 100px;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;

}
main .category_div .swiper-button-next{ 
	right: 0;background-color: rgba(229, 1, 19, 0.77); padding-left: 10px;
	-webkit-border-top-left-radius: 100px;
	-webkit-border-bottom-left-radius: 100px;
	-moz-border-radius-topleft: 100px;
	-moz-border-radius-bottomleft: 100px;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;

}
main .category_div .swiper-button-prev:after{ font-size: 14px; font-weight: 700; color: #fff;}
main .category_div .swiper-button-next:after{ font-size: 14px; font-weight: 700; color: #fff;}
main .category_div .box{ height: 100%;}
main .category_div .img{ background-size: cover; background-position: center; width: 100%; height: 100%;}
main .category_div a{ display: block;position: relative; width: 100%; height: 100%;}
main .category_div .info{ position: absolute; left: 0; top:0; width: 100%; height: 100%; display: flex; flex-wrap:wrap;align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff;}

main .category_div a:hover .info{background-color: rgba(229, 1, 19, 0.43); background-image: url("../images/icon-zoom.svg"); background-repeat: no-repeat; background-position: center;background-size: 60px auto; text-indent: -9999px;}

main .news{padding: 90px 0px;  background: #000; color: #fff; text-align: center;}
main .news .list_item{ margin-top: 50px;}
main .news .list_item .outer{ display:flex; flex-wrap:wrap; max-width: 1200px; margin: 0 auto; padding: 0 -8px;}
main .news .list_item .outer .item{width:calc(100% / 5);}
main .news .list_item .outer .item a{ display: block; margin: 8px; overflow: hidden;}
main .news .list_item .outer .item a img{ width:100%;transition: 0.5s ease;}
main .news .list_item .outer .item a:hover img{
	-ms-transform: scale(1.1, 1.1); /* IE 9 */
	-webkit-transform: scale(1.1, 1.1); /* Safari */
	transform: scale(1.1, 1.1);
	text-decoration:none;
}
main .news .swiper_list{ display: none; margin-top: 50px;}
main .news .swiper_list .outer{  max-width: 1200px; margin: 0 auto; padding: 0 ;}
main .news .swiper_list .outer .swiper-container{ position: relative;}
main .news .swiper_list .outer .swiper-slide .slide_list{ display: flex; flex-wrap: wrap;width: 100vw; height: 100vw;}
main .news .swiper_list .outer .swiper-slide .box{ width: 50vw; height: 50vw;}
main .news .swiper_list .outer .swiper-slide .box a{ display: block; width: 100%; height: 100%; overflow: hidden;}
main .news .swiper_list .outer .swiper-slide .box a .img{width: 100%; height: 100%;}
main .news .swiper_list .outer .swiper-slide .box a .img{transition: 0.5s ease; background-position: center; background-size: cover; height: 50vw; display: flex; align-items: center; justify-content: center;}
main .news .swiper_list .outer .swiper-slide .box a .img:hover{
	-ms-transform: scale(1.1, 1.1); /* IE 9 */
	-webkit-transform: scale(1.1, 1.1); /* Safari */
	transform: scale(1.1, 1.1);
	text-decoration:none;
}
main .news .swiper_list .outer .swiper-button-prev{
	left: 0; background-color: rgba(229, 1, 19, 0.77); padding-right: 10px;
	-webkit-border-top-right-radius: 100px;
	-webkit-border-bottom-right-radius: 100px;
	-moz-border-radius-topright: 100px;
	-moz-border-radius-bottomright: 100px;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;	
}
main .news .swiper_list .outer .swiper-button-next{ 
	right: 0;background-color: rgba(229, 1, 19, 0.77); padding-left: 10px;
	-webkit-border-top-left-radius: 100px;
	-webkit-border-bottom-left-radius: 100px;
	-moz-border-radius-topleft: 100px;
	-moz-border-radius-bottomleft: 100px;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;	
}
main .news .swiper_list .outer .swiper-button-prev:after{ font-size: 14px; font-weight: 700; color: #fff;}
main .news .swiper_list .outer .swiper-button-next:after{ font-size: 14px; font-weight: 700; color: #fff;}



main .clients{padding: 90px 15px;  background: #000; color: #fff; text-align: center;}
main .clients .list_item .outer{ display:flex; flex-wrap:wrap; max-width: 1200px; margin: 0 auto; padding: 0 -8px;}
main .clients .list_item .outer .item{width:calc(100% / 5 - 60px); padding: 30px;}
main .clients .list_item .outer .item .img{ height: 120px; display: flex; align-items: center; justify-content: center;}
main .clients .list_item .outer .item img{ max-height: 120px; max-width: 100%;}
main .clients .list_item .outer .item .desc{ margin-top: 35px;}
main .clients .list_item .outer .item .desc h3{ text-align: center;color:#9b9b9b;font-size: 16px; }
main .clients .more{ text-align: center; margin-top: 60px;}
main .clients .more a{ background:#e50113; color:#fff; display:inline-block; width: 180px; border-radius: 100px; text-align: center; padding: 12px 0; font-size: 18px; transition: 0.5s ease;}
main .clients .more a:hover{
	-ms-transform: scale(1.1, 1.1); /* IE 9 */
	-webkit-transform: scale(1.1, 1.1); /* Safari */
	transform: scale(1.1, 1.1);
	text-decoration:none;
}
main .big_banner{ background-position: center; background-size: cover; height: 565px;}
main .big_banner .outer{ display: flex; flex-wrap:wrap; align-items: center; justify-content: center;width: 100%;
    height: 100%;}
main .big_banner .outer .info{ color:#fff; text-align: center;}
main .big_banner .outer .info h2 big{ display: block; font-size: 60px; font-weight: 200;}
main .big_banner .outer .info h2 small{ display: block; font-size: 18px;}
main .big_banner .outer .info h2 .red{ color: #E7000B;}
main .bread_crumbs{ background:#181818; padding: 20px 15px;}
main .bread_crumbs .outer{max-width: 1200px; margin: 0 auto;font-size: 18px;  color: #fff; }
main .bread_crumbs .outer a{ color: #fff;}

main .about_01{ background:#000; padding: 110px 0;}
main .about_01 .outer{max-width: 1200px; margin: 0 auto; padding: 0 15px;}
main .about_01 .outer .list_item{display: flex; flex-wrap:wrap; margin-left: -50px; margin-right: -50px; }
main .about_01 .outer .item{ width:calc(100% / 3 - 100px); text-align: center; margin: 0 50px;}
main .about_01 .outer .item .info{color:#fff;}
main .about_01 .outer .item .info h3{font-size: 24px; margin: 30px 0;}
main .about_01 .outer .item .info p{font-size: 16px; text-align: left; line-height: 2;}

main .about_02{ background-color: #000; background-position: center; background-size: cover; padding: 170px 0;}
main .about_02 .outer{max-width: 1200px; margin: 0 auto; padding: 0 15px;color: #fff;}
main .about_02 .outer h3{font-size: 40px; }
main .about_02 .outer h3 .red{ color:#e50113;}
main .about_02 .outer p{font-size: 18px;  margin-top: 10px; line-height: 1.5;}
main .about_02 .outer ul{ list-style: none; padding-left: 0; margin-left: -55px;}
main .about_02 .outer ul li{ margin-top: 25px;}
main .about_02 .outer ul li h4{ display: flex;flex-wrap: wrap;align-items: center; font-size: 22px;}
main .about_02 .outer ul li h4 img{ margin-right: 15px; margin-bottom: -5px; width: 36px;}
main .about_02 .outer ul li .gray{color: #A1A1A1;}
main .about_02 .outer ul li p{margin-left: 55px;margin-top: 10px; font-size: 14px;}
main .about_02 .outer ul li ul{list-style: disc; color: #E7000B;margin-left: 55px;}
main .about_02 .outer ul li ul h5{font-size: 16px;color: #fff; font-weight: 500;}
main .about_02 .outer ul li ul P{color: #A1A1A1; margin-left: 0; margin-top: 0px; margin-bottom: 5px;}
main .about_02 .outer ul li ul li{margin-top: 0;}
main .about_02 .outer .two_items{ display: flex; flex-wrap: wrap;}
main .about_02 .outer .two_items .col01{ margin-left: 50%; margin-right: -100%; width: calc(50% - 50px);padding-left: 50px;}
main .about_02 .outer .two_items .col01 img{ width: 100%; height: auto; margin-top: 10px;}
main .about_02 .outer .two_items .col02{ margin-right: 50%;  width: calc(50% - 55px);padding-left: 55px;}

main .tab_div .outer{max-width: 1200px; margin: 0 auto; padding: 0 15px;}
main .tab_div .outer ul{ display: flex; flex-wrap: wrap;justify-content: center; margin: 0; padding: 0; list-style: none;}
main .tab_div .outer ul li a{ display: block; padding: 5px 30px; border:1px solid #fff;font-size: 18px;   color: #fff; margin: 10px 12px; border-radius: 100px; }
main .tab_div .outer ul li.active a,main .tab_div .outer ul li a:hover{ background: #e50113;border:1px solid #e50113;}


main .case_share{ padding: 80px 0; background: #000;}
main .case_share .detail{ margin-top: 90px;}
main .case_share .detail .outer{ display: flex; flex-wrap: wrap; overflow: hidden;}
main .case_share .detail .outer .item{ width:20%; background-size: cover;height: 19.8vw;}
main .case_share .detail .outer .item a{ display: block; position: relative;width: 100%; height: 100%; color:#fff; font-size: 16px;}
main .case_share .detail .outer .item a .info{ opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%;background-color: rgba(229, 1, 19, 0.43);display: flex;  align-items: center;    justify-content: center;transition: 0.5s ease;     flex-direction: column; text-align: center;}
main .case_share .detail .outer .item a:hover .info{ opacity:1;}
main .case_share .detail .outer .item a .info .img img{ width: 60px;}

main .brand_slider{ background: #000000; padding: 100px 0 50px 0; position: relative;}
main .brand_slider .swiper-container{ width: 1200px; }
main .brand_slider .swiper-pagination{ position: relative;}
main .brand_slider .swiper-pagination .swiper-pagination-bullet{ background:#fff; opacity: 1; margin: 0 10px; }
main .brand_slider .swiper-pagination .swiper-pagination-bullet-active{ background: #e50113;}
main .brand_slider .swiper-button-prev:after{ font-size: 14px; font-weight: 700; color: #fff;}
main .brand_slider .swiper-button-next:after{ font-size: 14px; font-weight: 700; color: #fff;}
main .brand_slider .swiper-button-prev{
	left: 0; background-color: rgba(229, 1, 19, 0.77); padding-right: 10px;
	-webkit-border-top-right-radius: 100px;
	-webkit-border-bottom-right-radius: 100px;
	-moz-border-radius-topright: 100px;
	-moz-border-radius-bottomright: 100px;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;

}
main .brand_slider .swiper-button-next{ 
	right: 0;background-color: rgba(229, 1, 19, 0.77); padding-left: 10px;
	-webkit-border-top-left-radius: 100px;
	-webkit-border-bottom-left-radius: 100px;
	-moz-border-radius-topleft: 100px;
	-moz-border-radius-bottomleft: 100px;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;

}
main .brand_slider .swiper-slide .box{ display:flex; flex-wrap:wrap;    align-items: center;}
main .brand_slider .swiper-slide .box .logo{ width:calc(40% - 20px); padding-right: 20px;}
main .brand_slider .swiper-slide .box .logo img{ max-width: 100%;}
main .brand_slider .swiper-slide .box .info{ width:60%; color: #fff; font-size: 16px; line-height: 2;}
main .brand_slider .swiper-slide .box .more{ 
	text-align: right;
	display: flex;
    justify-content: flex-end;
    align-items: center;
}
main .brand_slider .swiper-slide .box .more i{
	margin-left: 10px;
	display:inline-block;
	position: relative;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #ffffff;
}
main .brand_slider .swiper-slide .box .more i:after{
	content: '';
	position: absolute;
	left: -11px;
	top: -5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #000;
}

main .product_list{ background: #000; padding: 80px 0; position:relative;}
main .product_list::before{content: ''; position: absolute; width: 1200px;top:0; left:calc(50% - 600px); background: #fff; height: 1px;}
main .product_list .tab_div .outer ul li a{ display:flex; align-items: center;}
main .product_list .tab_div .outer ul li a img{ margin-right: 5px;}
main .product_list .detail .outer{ max-width: 1200px; margin: 0 auto; padding:0 15px;}
main .product_list .detail .outer .sub_title{ text-align: center;}
main .product_list .detail .outer .sub_title h3{ color: #fff; font-size: 30px;}
main .product_list .detail .outer .list_item{ display: flex; flex-wrap: wrap; margin-left: -30px; margin-right: -30px;}
main .product_list .detail .outer .list_item .item{ width: calc(100% / 4 - 60px); padding: 30px;}
main .product_list .detail .outer .list_item .item .img img{ width: 100%;}
main .product_list .detail .outer .list_item .item .info{ text-align: center; margin-top: 15px;}
main .product_list .detail .outer .list_item .item .info h4{ font-size: 18px; color: #e50113; font-weight: 700;}
main .product_list .detail .outer .list_item .item .info p{font-size: 18px;color:#fff;}
main .product_list .detail .sub_block{ border-top: 1px solid #fff; padding-top: 60px;}
main .product_list .detail .sub_block:first-child{ border-top: none;}

main .case_share .more {
    text-align: center;
    margin-top: 60px;
}
main .case_share .more a{ background:#e50113; color:#fff; display:inline-block; width: 275px; border-radius: 100px; text-align: center; padding: 12px 0; font-size: 26px;transition: 0.5s ease;}
main .case_share .more a:hover{
	-ms-transform: scale(1.1, 1.1); /* IE 9 */
	-webkit-transform: scale(1.1, 1.1); /* Safari */
	transform: scale(1.1, 1.1);
	text-decoration:none;
}

main .work_list{ background: #000;}
main .work_list .outer{ max-width: 1200px; margin: 0 auto; padding: 0 15px;}
main .work_list .outer .item{ padding: 90px 0; border-top: 1px solid #fff;}
main .work_list .outer .item:first-child{ border-top: none;}
main .work_list .outer .item .item_title{ text-align: center;}
main .work_list .outer .item .item_title h3{ font-size: 28px; color: #fff; position: relative; padding-bottom: 40px;}
main .work_list .outer .item .item_title h3:after{content: ''; position: absolute; background: #e50113; left: calc(50% - 40px); bottom: 0; width: 80px; height:4px; }
main .work_list .outer .item .ul_list{ display: flex;justify-content: space-evenly; margin-top: 30px;}
main .work_list .outer .item .ul_list ul{ margin: 0; padding:0; line-height: 2; list-style: none;  font-size: 16px; color: #fff;}

main .contact_form{ background: #000; padding: 100px 0;}
main .contact_form .outer{ max-width: 1200px; margin: 0 auto; padding:0 15px; display: flex;flex-wrap:wrap; align-items: center;}
main .contact_form .outer .col01{ width: 100%; text-align: center;}
main .contact_form .outer .col01 .company h3{ font-size: 28px;}
main .contact_form .outer .col01 .info{ margin-top: 50px;}
main .contact_form .outer .col01 .info div{ display:flex; align-items: flex-start;justify-content: center; font-size: 16px; color:#9b9b9b; margin-bottom: 20px;}
main .contact_form .outer .col01 .info div img{ height: 20px; margin-right: 5px; margin-top: 5px;}
main .contact_form .outer .col02{display: none; width: calc(65% - 50px); padding-left: 50px; position: relative;}
main .contact_form .outer .col01 .info div img{ height: 20px; margin-right: 5px;}
main .contact_form .outer .col01 .info div img:nth-child(2){margin-left: 20px;}
main .contact_form .outer .col02:before{ content:''; position: absolute; width: 1px; left: 0; top: 0; height: 100%; background:  #4a4a4a;}
main .contact_form .outer .col02 .form_keyin .item{ margin: 20px 0;}
main .contact_form .outer .col02 .form_keyin .item input{ color: #fff; border:none; border-radius: 0; background:  #4a4a4a; font-size: 16px; padding: 7px; width: calc(100% - 14px);}
main .contact_form .outer .col02 .form_keyin .item textarea{color: #fff; border:none; border-radius: 0; background:  #4a4a4a; font-size: 16px; padding: 7px; width: calc(100% - 14px); height: 150px;}
main .contact_form .outer .col02 .form_keyin .item.two_col{ display: flex; flex-wrap:wrap; justify-content:space-between;}
main .contact_form .outer .col02 .form_keyin .item.two_col .col{ width: calc(50% - 10px);}
main .contact_form .outer .col02 .form_keyin .item ::placeholder { 
	color: #fff;
	opacity: 1; 
}
main .contact_form .outer .col02 .form_keyin .item :-ms-input-placeholder {color:#fff;}
main .contact_form .outer .col02 .form_keyin .item ::-ms-input-placeholder { color: #fff;}
main .contact_form .outer .col02 .form_keyin .item.action{ text-align: center; margin-bottom: 0;}
main .contact_form .outer .col02 .form_keyin .item.action button{ color: #fff; font-size: 20px; min-width: 170px; border-radius: 100px; border:none; padding: 10px 0; text-align: center; background:#e50113}

main .faq_list{ background: #000; padding: 100px 0;}
main .faq_list .outer{ max-width: 1200px; margin: 0 auto; padding: 0 15px;}
main .faq_list .item{ padding-top: 65px; padding-bottom: 65px; border-bottom: 1px solid #fff;}
main .faq_list .item:first-child{ padding-top: 0;}
main .faq_list .item:last-child{ border-bottom: none;}
main .faq_list .item .question{ display: flex; flex-wrap:wrap; font-size: 28px; color: #fff;}
main .faq_list .item .question b{ display: inline-block; width: 50px;font-size: 34px;}
main .faq_list .item .question h3{ width: calc(100% - 50px - 40px);}
main .faq_list .item .question i{ margin-top: 10px;  transform: rotate(	180deg);cursor: pointer; display: inline-block; background:url(../images/icon-arrow-down.svg) center no-repeat; background-size: contain; width: 40px; height:36px;}
main .faq_list .item.active .question i{ transform: rotate(	0deg);}
main .faq_list .item .answer{ display: none; margin-top: 30px;color: #fff; padding-left: 50px;}
main .faq_list .item.active .answer{ display: block;}
main .faq_list .item .answer p{ font-size: 16px; line-height: 1.8;}
main .faq_list .item .answer p:last-child{ margin-bottom: 0;}
.google_map iframe{
	width: 100%;
	height: 900px;
	/*opacity: 1 !important;*/
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);    
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);

}
.google_map iframe:hover{
	-webkit-filter: grayscale(0%);
    filter: grayscale(0%);    
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=0);
}
.pagination{ margin-top: 70px;}
.pagination .outer{ max-width: 1200px; margin: 0 auto; text-align: center;}
.pagination .outer a{ display:inline-block; border-radius: 5px; font-size: 14px; padding: 3px; background: #fff; margin:0 5px; min-width: 20px; color:#232323; }
.pagination .outer a.active,.pagination .outer a:hover{ background: #e50113; color:#fff;}

.mfp-content{ height: 100%;}
.mfp-bg{ opacity: 0.95;}

.popup_product_div{ height: 100%;}
.popup_product_div .outer{ width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.popup_product_div .btn_close{ border: none; background: none; border-radius: 0; position: absolute; right: 10px; top: 10px;}
.popup_product_div .btn_close img{ width: 50px;} 
.popup_product_div .outer .box{ width: 1100px; display: flex; flex-wrap: wrap; align-items: flex-end; padding:60px 15px;}
.popup_product_div .outer .box .col01{ width: 500px; margin-right: 50px;}
.popup_product_div .outer .box .col01 img{ width: 100%;}
.popup_product_div .outer .box .col02{ width: calc(100% - 550px); }
.popup_product_div .outer .box .col02 .product_name h3 big{ display: block; color: #e50113; font-size: 26px;}
.popup_product_div .outer .box .col02 .product_name h3 small{ display: block; color: #fff; font-size: 18px;}
.popup_product_div .outer .box .col02 .info{ font-size: 16px; line-height: 2; color: #fff; margin-top: 40px;}
.popup_product_div .outer .box .col02 .info p{color: #fff;}
.popup_product_div .outer .box .col02 .info p:last-child{ margin-bottom: 0;}

.mfp-arrow.mfp-arrow-left.mfp-prevent-close{ margin-top: 0; background: url(../images/icon-arrow-prev.svg) center no-repeat; background-size: contain;; width: 48px; height:48px;}
.mfp-arrow.mfp-arrow-left.mfp-prevent-close:before,.mfp-arrow.mfp-arrow-left.mfp-prevent-close:after{ 
	border-right: transparent;}
.mfp-arrow.mfp-arrow-right.mfp-prevent-close{ margin-top: 0;background: url(../images/icon-arrow-next.svg) center no-repeat; background-size: contain;; width: 48px; height:48px;}
.mfp-arrow.mfp-arrow-right.mfp-prevent-close:before,.mfp-arrow.mfp-arrow-right.mfp-prevent-close:after{ 
	border-left: transparent;}	
.fr-close.fr-close-outside{ width: 50px; height: 50px; right: 30px;}	
.fr-position-outside .fr-position-text{ display: none;}
.fr-close.fr-close-outside .fr-close-background{  display: none;}	
.fr-close.fr-close-outside .fr-close-icon{ background:url(../images/icon-close.svg) ; background-size: contain; background-position: center; width: 50px; height: 50px;}
.fr-thumbnail.fr-load-thumbnail.fr-thumbnail-active{ outline:4px solid #fff;}
.fr-thumbnail.fr-load-thumbnail .fr-thumbnail-image{ opacity: 0.4;}
.fr-thumbnail.fr-load-thumbnail.fr-thumbnail-active .fr-thumbnail-image{ opacity: 1;}
footer{ background: #181818;}
footer .outer{ max-width: 1200px; margin: 0 auto; padding: 0 15px;}
footer .outer .top_div{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;	
	padding: 50px 0;
}
footer .outer .top_div .col01{
	display: flex;
    flex-wrap: wrap;
}
footer .outer .top_div .item{ margin-right:75px; }
footer .outer .top_div .item h3{ color: #fff;font-size: 18px;}
footer .outer .top_div .item ul{ margin:20px 0 0 0; padding:0; list-style: none;}
footer .outer .top_div .item ul li{ margin-bottom: 15px;    display: flex;font-size: 14px;color:#9b9b9b;}
footer .outer .top_div .item ul li img{ margin-right: 10px; height: 20px;}
footer .outer .top_div .item ul li a{ color:#9b9b9b;}
footer .outer .bottom_div{ border-top: 1px solid #9b9b9b;font-size: 14px; padding:20px 0; text-align: center;}

.popup_div{ display: none; background-color: rgba(0, 0, 0, 0.8); position: absolute; left: 0; top: 0; width: 100%; height: 100%;z-index: 120;}
.popup_div .btn_close{ border:none; border-radius: 0; background: none; padding: 0; position: absolute; right: 20px; top: 10px; width: 48px;}
.popup_div .btn_close img{ width: 100%;}
.popup_div .scrollbar{ height: 80vh;}
.popup_div.rule .outer{ max-width: 1000px; color: #fff; padding:0 15px;}
.body_popup_active{ overflow: hidden;}
.body_popup_active .popup_div{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}

.popup_div.rule .outer h2{ font-size: 48px;  text-align: center;}
.popup_div.rule .outer .info{ margin-top: 40px;}
.popup_div.rule .outer .info p{font-size: 18px; line-height: 2; text-align: center; margin-bottom: 30px;}
.popup_div.rule .outer .info p span{ display: block;}
.popup_div.rule .outer .info.big p{ font-size: 24px;  }
.popup_div.rule .outer .info h3{ color:#e50113; font-size: 28px; text-align: center; margin-bottom:10px; }

.btn_top {
    position: fixed;
    right: 0;
    bottom: 30%;
    z-index: 50;
	width: 64px;
	height: 64px;
}


/**popup 輪播圖**/
.owl-carousel-outer .owl-nav{
	position: relative;
	z-index: 10;
}
.owl-carousel-outer .owl-nav button{
	padding: 0;
	width: 27px;
	height: 27px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;   
    justify-content: center;
}
.owl-carousel-outer .owl-nav span{
	color: #fff;
	font-size: 24px;
	line-height: 20px;
	width: 27px;
	height: 27px;
	padding: 0;
	border-radius: 100px;
	background-color: #e50113 !important;
	display: flex;
	flex-wrap: wrap;	
    justify-content: center;
	opacity: 0.5;
}
.owl-carousel-outer .owl-nav span:hover,.owl-carousel-outer .owl-nav span:active{
	opacity: 1;
}
.owl-carousel-outer .owl-prev{
	position: absolute;
	left: -10px;
    top: 50px;	
}
.owl-carousel-outer .owl-next{
	position: absolute;
	right: -10px;
	top: 50px;
}
.owl-carousel-outer .owl-thumbs{
	margin-top: 15px;
	display: flex;
	flex-wrap: wrap;
	margin-left: -5px;
	margin-right: -5px;
	
}
.owl-carousel-outer .owl-thumbs .owl-thumb-item{  
  width: 20%; 
  background: transparent;
  border: none;
  overflow: hidden;
  padding: 5px;
  position: relative;
}
.owl-carousel-outer .owl-thumbs .owl-thumb-item.active:after{
	content: '';
	position: absolute;
	left: 5px;
	top: 5px;
	width: calc(100% - 14px);
	height:calc(100% - 14px);
	/* border: 2px solid #e50113; */
}
.owl-thumbs .owl-thumb-item img{
  width:100%;
  height:auto;
}
.fancybox-content img {
    max-width: 100%;
    transition: all 0.1s;
}
.fancy-content{ display: block; /*not none*/ height: 0px; overflow: hidden; visibility: hidden; } /*  element after load in fancybox inner */ .fancybox-inner .fancy-content{ height: auto; overflow: hidden; visibility: visible;}
@media screen and (max-width: 1280px){
	main .product_list .detail .outer .list_item .item {
		width: calc(100% / 4 - 30px);
		padding: 15px;
	}
	main .product_list .detail .outer .list_item{ margin-left: 0; margin-right: 0;}
	main .about_01 .outer .list_item{ margin-left: 0; margin-right: 0;}

}
@media screen and (max-width: 1240px){
	main .brand_slider .swiper-container{ width: calc(100% - 80px); }
	main .product_list::before{    width: 100%;left: 0;}

}
@media screen and (max-width: 1100px){
	.popup_product_div .outer .box{
		width: calc(100% - 30px);
	}
}
@media screen and (max-width: 1024px){
	.toggle_btn{ display:block;}
	header .outer .navi{ display: none;}
	header .outer .brand img{ height: 40px;}
	.scroll header .outer .brand img{ height: 40px;}
	.body_mobile_active{ overflow-y: hidden;}
	main .mobile_society{ display: flex;}
	
	.popup_product_div .outer .box{ display: block;}
	.popup_product_div .outer .box .col01 {
		width: 100%;
		margin-right: 0;
	}
	.popup_product_div .outer .box .col02{width: 100%;}
	main .about_02{ padding: 100px 0;}
	main .about_02 .outer .two_items{ display: block; }
	main .about_02 .outer .two_items .col01{ margin-left: 0%; margin-right: 0%; width: 100%; margin-bottom: 30px; padding-left: 0;}
	main .about_02 .outer .two_items .col01 img{ width: 100%; height: auto; margin-top: 0px;}
	main .about_02 .outer .two_items .col02{ margin-right: 0%;  width: 100%; padding-left: 0;}
	main .about_02 .outer ul{margin-left: 0;}
	/**popup 輪播圖**/
	.owl-carousel-outer{			
	}
	.owl-carousel-outer .owl-thumbs .owl-thumb-item{
		width: calc(100% / 6);
	}
	.owl-carousel-outer .owl-next{
		top: 8vw;
	}
	.owl-carousel-outer .owl-prev{
		top: 8vw;
	}
}
@media screen and (max-width: 1023px){
	main .category_div .swiper-slide{ height: 60vw; }

	

}
@media screen and (max-width: 992px){
	main .clients .list_item .outer .item {
		width: calc(100% / 3 - 20px);
		padding: 10px;
	}

	main .brand_slider .swiper-slide .box{ display: block;}
	main .brand_slider .swiper-slide .box .logo{width:100%;	padding-right: 0px; text-align: center;	}
	main .brand_slider .swiper-slide .box .info{width:100%; margin-top: 20px;}

	main .contact_form{ padding: 50px 0;}
	main .contact_form .outer{ display:flex;}
	main .contact_form .outer .col01{width:100%; }
	main .contact_form .outer .col01 .info{ margin-top: 30px;}
	main .contact_form .outer .col02{width:100%; padding-left: 0; }
	main .contact_form .outer .col02:before{ background: none;}
	main .google_map iframe{ height: 100vw;}

	main .faq_list{ padding: 50px 0;}
	main .faq_list .item { padding-top: 30px;padding-bottom: 30px;}
	main .faq_list .item .question{ font-size: 24px;}
	main .faq_list .item .question b{ font-size: 30px; width: 40px;}
	main .faq_list .item .answer{ margin-top: 15px; padding-left: 40px;}
	main .faq_list .item .answer p{ font-size:16px;}

	main .product_list{ padding: 50px 0;}
	main .product_list .detail .sub_block{ padding-top: 30px;}

	main .work_list .outer .item { padding: 50px 0;}
}
@media screen and (max-width: 767px){	
	
	main .slider_div .swiper-container.web{ display: none;}
	main .slider_div .swiper-container.mobile{ display: block;}
	main .slider_div .swiper-slide .box .info h2{ font-size:48px;}
	main .category_div .swiper-slide{ height: 100vw; }
	main .news .list_item{ display: none;}
	main .news .swiper_list{ display: block;}
	main .big_banner{ height:60vw;}
	main .big_banner .outer .info h2 big{ font-size: 28px;}
	main .big_banner .outer .info h2 small{ font-size: 16px;}
	main .bread_crumbs .outer{ font-size: 16px;}

	main .about_01{ padding: 50px 0;}
	main .about_01 .outer .list_item{ display: block; margin: 0;}
	main .about_01 .outer .list_item .item{ width: 100%; margin: 0;}
	main .about_02{ padding: 50px 0;}
	main .about_02 .outer h3{ font-size: 28px;}
	main .about_02 .outer p{margin-top: 10px; font-size: 16px;}
	main .about_02 .outer ul li{margin-top: 30px;}
	main .about_02 .outer ul li h4 img{	width:20px;margin-right: 5px;}
	main .about_02 .outer ul li h4{font-size:20px;}
	main .about_02 .outer ul li ul h5{font-size: 14px;}
	main .about_02 .outer ul li p{font-size: 14px; margin-left: 26px;}
	main .about_02 .outer ul li ul{	margin-left: 26px;	}
	main .tab_div .outer ul{ justify-content: flex-start;}
	main .case_share{ padding: 50px 0;}
	main .tab_div .outer ul li a{ font-size:16px;padding: 5px 15px;}

	main .product_list .detail .outer .list_item .item {width: calc(100% / 2 - 30px);}

	main .work_list .outer .item .item_title h3{ font-size: 20px; padding-bottom: 25px;}
	main .work_list .outer .item .item_title h3:after{ height: 3px;}
	main .work_list .outer .item .ul_list{ display: block; text-align: center;}
	main .work_list .outer .item .ul_list .ul_item{text-align: left;}
	main .work_list .outer .item .ul_list ul{ display: inline-block; text-align: left;}


	.popup_div.rule .outer h2{ font-size: 36px;}
	.popup_div.rule .outer .info p{ font-size:16px;}
	.popup_div.rule .outer .info.big p{ font-size: 20px;}
	.popup_div.rule .outer .info p span{ display: inline;}



}
@media screen and (max-width:720px){
	main .block .title h2{ font-size: 30px;padding-bottom: 40px;}
	main .block .title h2:before{ height: 3px;}
	main .block p{ font-size: 14px;}
	main .clients .list_item .outer .item {
		width: calc(100% / 2 - 20px);
		padding: 10px;
	}
	
	main .clients .list_item .outer .item:nth-child(5){ /*display: none;*/}
	main .case_share .detail .outer .item{ width: 50%;    height: 40vw;}
	
	main .product_list .detail .outer .sub_title h3{ font-size: 24px;}
	main .product_list .detail .outer .list_item .item .info p{ font-size: 14px;}

	main .work_list .outer .item .ul_list ul{ font-size: 14px;}


	footer .outer .top_div{ display: block; padding-bottom: 0;}
	footer .outer .top_div .col01{ display: block;}
	footer .outer .top_div .item{ border-bottom: 1px solid #9b9b9b; margin-right: 0;    margin-top: 20px;padding-bottom: 20px;}
	footer .outer .top_div .item:first-child{ margin-top: 0;}
	footer .outer .top_div .item h3{ display: flex; flex-wrap: wrap;align-items: center; justify-content: space-between;}
	footer .outer .top_div .item h3 i{ cursor: pointer; display: inline-block; width: 24px; height: 24px; background: url(../images/icon-plus.svg) center no-repeat; background-size:contain;}
	footer .outer .top_div .item ul{ display: none;}
	footer .outer .top_div .item.active h3 i{    transform: rotate(45deg);}
	footer .outer .top_div .item.active ul{ display: block;}
	footer .outer .top_div .col02{ margin-top: 20px;}
	footer .outer .top_div .col02 .item ul{ display: block;}
	footer .outer .top_div .col02 .item{ border-bottom: none;}
	footer .outer .bottom_div{ text-align: left;}
	.btn_top{ width: 48px; height: 48px; bottom: 15%;}
	.btn_top img {
		width: 48px;
	}
}
@media screen and (max-width: 640px){
	main .slider_div .swiper-slide .box .info h2{ font-size:34px; margin-bottom: 20px;}
	main .slider_div .swiper-slide .box .info h2 span{ display:block;}
	main .slider_div .swiper-slide .box .info h3{ font-size:15px;}
	main .slider_div .swiper-slide .box .info p{ font-size:15px;}
	main .bread_crumbs{ padding: 10px 15px;}
	main .bread_crumbs .outer {font-size: 13px;	}
	main .contact_form .outer .col02 .form_keyin .item{ margin: 15px 0;}
	main .contact_form .outer .col02 .form_keyin .item.two_col{ display: block;}
	main .contact_form .outer .col02 .form_keyin .item.two_col .col {width: 100%; margin: 15px 0;}
	main .faq_list .item .question{ font-size: 18px;}
	main .faq_list .item .question b{ font-size: 22px;}
	main .faq_list .item .question i{ margin-top: 0;width: 30px;height: 30px;}
	main .clients .list_item .outer .item .desc h3{font-size: 14px;}

	/**popup 輪播圖**/	
	.owl-carousel-outer .owl-thumbs .owl-thumb-item{
		width: calc(100% / 5);
	}
	.owl-carousel-outer .owl-next{
		display: none !important;
	}
	.owl-carousel-outer .owl-prev{
		display: none !important;
	}
}