@charset "utf-8";
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

img { max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; cursor: pointer; }
ul { list-style-type: none; margin: 0; padding: 0; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; /*For IE 6&7 only*/ }

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.wrapper { width: 1440px; margin: auto; }

/* header */
.header { position: fixed; z-index: 111; width: 100%; height: 130px; transition: all 1s ease; }

.header.sticky { background: rgba(255,255,255,.9); box-shadow: 0px 0px 5px #000; }

.m-menu, .m-nav { display: none; }

.logo { width: 40%; float: left; margin-top: 6px; }
.lang { width: 90px; float: right; }
.lang ul { margin: 55px 0px 0; }
.lang ul li { display: inline-block; margin: 0 2px; }
.lang ul li a { display: inline-block; font-size: 14px; text-align: center; border: #999 1px solid; width: 35px; height: 35px; line-height: 33px; border-radius: 35px; background: #fff; }
.lang ul li.active a, .lang ul li a:hover { background: #dc7c1a; color: #fff; border: #dc7c1a 1px solid; }

.main-menu { width: calc(60% - 90px); float: right; }
.main-menu ul { text-align: right; margin: 50px 10px 0; }
.main-menu ul li { display: inline-block; margin: 0 25px; }
.main-menu ul li a { font-size: 18px; display: inline-block;  padding: 10px 0 3px; }
.main-menu ul li a.active, .main-menu ul li a:hover { border-bottom: #dc7c1a 2px solid; }

/* banner */
.banner { position: relative; overflow: hidden; }
.banner .pro, .banner .slogan { position: absolute; }

.swiper-slide > img { width: 100vw; max-width: inherit; height: 100vh; }
.swiper1 { background: url(../images/banner/banner-01_bg.jpg) no-repeat top center; background-size: cover; }
.swiper2 { background: url(../images/banner/banner-02_bg.jpg) no-repeat top center; background-size: cover; }
.swiper3 { background: url(../images/banner/banner-03_bg.jpg) no-repeat top center; background-size: cover; }
.swiper1 .slogan, .swiper2 .slogan, .swiper3 .slogan { bottom: 50px; }
.swiper1 .slogan, .swiper2 .slogan { right: 10%; text-align: right; }
.swiper3 .slogan { left: 15%; }
.swiper1 .pro, .swiper2 .pro, .swiper3 .pro { text-align: center; width: 100%; top: 140px; }
.swiper1 .pro img { width: 75%; }
.swiper2 .pro img, .swiper3 .pro img { width: 80%;  }



/* section */
.section { padding: 30px 0; }
.section .title { font-size: 48px; color: #db7c1a; text-shadow: rgba(0,0,0,.2) 4px 4px 0px; font-family: "Roboto Black", Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; margin-bottom: 30px; }
.section strong { color: #db7c1a; font-size: 22px; }



/* about */
.about { font-size: 20px; line-height: 1.4; padding: 120px 0; }
.about .mask { background: rgba(255,255,255,.8); }
.about .wrapper { padding: 100px 100px; }
.about .left, .about .right { float: left; width: 40%; margin: 0 5%; }
.parallax-window { min-height: 950px; background: transparent; }


/* quality */
.quality { background: url(../images/quality_bg.jpg) no-repeat top center #ededed; font-size: 20px; line-height: 1.4; }
.quality .left, .quality .right, .quality .pic { width: 31%; margin-right: 2%; float: left; }
.parallax-quality { min-height: 900px; background: transparent; }

/* products */
.products { background: url(../images/product_bg.jpg) no-repeat bottom center; }
.pro-list { width: 32%; margin: 0 0.6% 50px; float: left; position: relative; }
.pro-list .pro-name { position: absolute; bottom: 16px; left: 20px; font-size: 36px; color: #221714; text-shadow: rgba(0,0,0,.2) 4px 4px 0px; font-family: "Oswald Regular", Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; }

/* footer */
.cont { background: #db7c1a; font-size: 16px; padding: 5px 0; }
.cont .note { float: left; color: #fff; line-height: 26px; }
.cont .contact { float: right; }
.cont .contact a { display: block; background: url(../images/contact_bg.png) no-repeat; color: #db7c1a; font-weight: bold; padding: 4px 120px 4px 20px; margin-right: 30px; }

.foot { padding: 30px 0; }
.foot-logo { float: left; width: 25%; padding-top: 20px; }
.foot-info { float: left; width: 70%; font-size: 14px; margin-left: 5%; }
.font-info a { font-size: 14px; }
.foot-info > div { padding: 2px 0; }
.foot-info > div:not(:first-child):before { content: ""; background: url(../images/foot-icon.png) no-repeat 0px 0px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.foot-info div.fax:before { background-position: 0px -20px; }
.foot-info div.email:before { background-position: 0px -40px; }
.foot-info div.website:before { background-position: 0px -60px; }
.foot-info div.add:before { background-position: 0px -80px; }
.foot-info .com-name { font-size: 24px; font-weight: bold; margin-bottom: 12px; line-height: 1; }
.foot-info .tel, .foot-info .fax { display: inline-block; }
.foot-info .tel { margin-right: 30px; }
.foot-info .email, .foot-info .website, .foot-info .add { font-size: 14px; }

.goto-top { display: none; position: fixed; right: 15px; bottom: 30px; cursor: pointer; }

.copyright { background: #000; color: #ccc; text-align: center; padding: 12px 0; font-size: 14px; }

.contact { -webkit-animation: jump 1.5s ease 0s infinite normal; animation: jump 1.5s ease 0s infinite normal; }
@-webkit-keyframes jump {
  0%{ -webkit-transform: translateX(0); transform: translateX(0); }
  20%{ -webkit-transform: translateX(0); transform: translateX(0); }
  40%{ -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  50%{ -webkit-transform: translateX(0); transform: translateY(0); }
  60%{ -webkit-transform: translateX(-15px); transform: translateX(-15px); }
  80%{ -webkit-transform: translateX(0); transform: translateX(0); }
  100%{ -webkit-transform: translateX(0); transform: translateY(0); }
}
@keyframes jump {
  0%{ transform: translateX(0); }
  20%{ transform: translateX(0); }
  40%{ transform: translateX(-30px); }
  50%{ transform: translateX(0); }
  60%{ transform: translateX(-15px); }
  80%{ transform: translateX(0); }
  100%{ transform: translateX(0); }
}

@media (max-width:1440px) {
	#container { overflow: hidden; }
	.wrapper { width: 100%; padding: 0 15px; }

	.swiper1 .slogan { right: 2%; }
	.swiper3 .slogan { left: 5%; }
	.swiper1 .slogan img, .swiper3 .slogan img { max-width: 450px; }
	.swiper2 .slogan img { max-width: 600px; }
	.swiper1 .pro, .swiper2 .pro, .swiper3 .pro { text-align: center; width: 100%; top: 160px; bottom: inherit; }
	.swiper1 .pro img { width: 75%; }
	.swiper2 .pro img, .swiper3 .pro img { width: 90%; }
}

@media(max-width:1280px) {
	.logo { margin-top: 12px; }
	.swiper-slide > img { width: 100vw; max-width: inherit; height: 100vh; }
	.swiper1 .slogan img, .swiper2 .slogan img, .swiper3 .slogan img { max-width: 500px; }
}

@media (max-width:1110px) {
	.logo { margin-top: 20px; }
	.lang { float: right; width: 100px; margin-top: 20px; margin-right: 15px; }
	.lang ul { margin: 0; }
	.lang ul li { margin: 0 4px; }
	
	.main-menu { width: 100%; clear: both; padding-top: 10px; margin-top: -20px; }
	.main-menu ul { margin: -30px 0 0; }
	
	.pro-list .pro-name { font-size: 30px; bottom: 10px; }
}

@media (max-width:1024px) {
	.header { height: 115px; }
}

@media (max-width:960px) {
	.header { height: 110px; }
	.main-menu ul li { margin: 0 20px; }
	.pro-list .pro-name { font-size: 24px; }
}

@media (max-width:800px) {
	.m-menu { display: block; position: absolute; top: 25px; right: 10px; }
	.m-nav { display: none; position: fixed; width: 100%; height: 100%; z-index: 110; top: 84px; overflow: hidden; }
	
	.m-nav ul { height: 100%; }
	.m-nav li { border-bottom: #ccc 1px solid; height: 80px; position: relative; background: rgba(0,0,0,.9); }
	.m-nav a { display: block; line-height: 80px; text-align: center; font-size: 28px; vertical-align: middle; /*position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0);*/ color: #db7a17; }
	.m-lang { width: 50%; float: left; }
	.m-nav .m-lang + .m-lang { border-left: #ccc 1px solid; }
	
	.menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; }
  .menu-trigger { position: relative; width: 40px; height: 24px; }
  .menu-trigger span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #000; }
  .menu-trigger span:nth-of-type(1) { top: 0; }
  .menu-trigger span:nth-of-type(2) { top: 10px; }
  .menu-trigger span:nth-of-type(3) { bottom: 0; }
  .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); }
  .menu-trigger.active span:nth-of-type(2) {  opacity: 0; }
  .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg); }
	
	.header { height: 84px; background: rgba(255,255,255,.5); box-shadow: 0px 0px 5px #000; }
	.logo { width: 315px; margin: 10px auto; float: none; }
	.lang { float: right; width: 75px; margin-top: 20px; display: none; }
	.lang ul { margin: 0; }
	.lang ul li { margin: 0; }
	
	.main-menu { width: 100%; clear: both; padding-top: 10px; display: none; }
	.main-menu ul { margin: -30px 0 0; }
	.main-menu ul li { margin: 0 15px; }

	.swiper-slide > img { width: 100vw; max-width: inherit; height: 600px; }
	.swiper1 .slogan img, .swiper2 .slogan img, .swiper3 .slogan img { max-width: 360px; }
	
	.quality .left, .quality .right, .quality .pic { width: 100%; float: none; }
	
	.pro-list { width: 48%; margin: 0 1% 20px; }
	.pro-list .pro-name { font-size: 30px; bottom: 14px; }
	.parallax-quality { min-height: 600px; }
}

@media (max-width:640px) {
	.main-menu ul { text-align: center; margin: 0; }
	.parallax-quality { min-height: 400px; }
	.pro-list .pro-name { font-size: 24px; bottom: 10px; }
}

@media (max-width:480px) {
	.lang { float: right; width: 75px; margin-top: 20px; }
	.lang ul { margin: 0; }
	.lang ul li { margin: 0; }
	.main-menu { float: none; width: 100%; clear: both; padding-top: 10px; }
	.main-menu ul li { margin: 0 10px; }
	.main-menu ul li a { font-size: 16px; }
	
	.swiper-slide > img { height: 480px; }
	.swiper1 .slogan, .swiper2 .slogan, .swiper3 .slogan { bottom: 20px; }
	
	.about .wrapper { padding: 20px 15px; }
	
	.quality .left, .quality .right, .quality .pic { float: none; width: 100%; }
	
	.parallax-quality { min-height: 350px; }
	
	.pro-list { float: none; width: 100%; margin-bottom: 20px; }
	.pro-list .pro-name { font-size: 36px; bottom: 15px; }
	
	.cont .note { float: none; }
	.cont .contact { float: none; margin-top: 10px; margin-bottom: 10px; }
	.cont .contact a { padding: 5px 0 10px 20px; background-size: contain; }
	
	.foot { padding: 10px 0 30px; }
	.foot-logo { float: none; width: 50%; margin: auto; padding: 0; }
	.foot-info { float: none; width: 100%; }
	.foot-info .com-name { font-size: 18px; margin-top: 12px; }
	.foot-info .tel, .foot-info .fax { display: block; }
}

@media (max-width:375px) {
	.logo { width: 80%; margin: 15px 0 0 0; }
	.lang { float: right; width: 75px; margin-top: 20px; }
	.lang ul { margin: 0; }
	.main-menu { float: none; width: 100%; clear: both; padding-top: 10px; }
	.main-menu ul { text-align: left; margin: 0; }
	.main-menu ul li { margin: 0 10px; }
	
	.swiper1 .pro { top: 120px; }
	.swiper2 .pro { top: 120px; }
	.swiper3 .pro { top: 120px; }
	.swiper1 .pro img, .swiper2 .pro img, .swiper3 .pro img { width: 98%; }
	.swiper1 .slogan, .swiper2 .slogan, .swiper3 .slogan { bottom: 20px; }
	.swiper1 .slogan img, .swiper2 .slogan img, .swiper3 .slogan img { width: 70%; }
	.swiper-slide > img { height:360px; }
	.swiper3 .slogan { right: inherit; left: 2%; }
	
	.parallax-quality { min-height: 250px; }
	
	.section .title { font-size: 32px; /*margin-bottom: 0px;*/ }
	
	.about .wrapper { padding: 20px 15px; }
	
	.quality .left, .quality .right, .quality .pic { float: none; width: 100%; }
	
	.pro-list .pro-name { bottom: 12px; left: 8px; font-size: 28px; }
}
@media (max-width:360px) {
	.main-menu ul li { margin: 0 8px; }
}
@media (max-width:320px) {
	.main-menu ul li { margin: 0 3px; }
	.pro-list .pro-name { bottom: 8px; left: 8px; }
}