@charset "utf-8";

/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2016 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: Rain $
 * $Date: 2019-07-16 Mon. $
 * **請注意: 本樣式檔提供各分頁製作獨立樣式，共同樣式請於完成後併入此樣式檔。
*/
@font-face { font-family: "Roboto"; font-weight: normal; font-style: normal; src: url("../fonts/Roboto-Regular.eot"); src: url("../fonts/Roboto-Regular.woff2") format("woff2"); src: url("../fonts/Roboto-Regular.woff") format("woff"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; src: url("../fonts/Roboto-Bold.eot"); src: url("../fonts/Roboto-Bold.woff2") format("woff2"); src: url("../fonts/Roboto-Bold.woff") format("woff"); }
@font-face { font-family: "Roboto Thin"; font-weight: 100; font-style: normal; src: url("../fonts/Roboto-Thin.eot") format("eot"), url("../fonts/Roboto-Thin.woff") format("woff"); src: url("../fonts/Roboto-Thin.ttf") format("truetype"); src: url("../fonts/Roboto-Thin.svg#Roboto-Thin") format("svg"); }
html { font-size: 16px; }
body { width: 100%; font-size: 16px; font-family: "Roboto", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; overflow-x: hidden; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -ms-overflow-style: scrollbar; color: #222 }
html,
body { margin: 0; }

/* Global Style */
* { -webkit-backface-visibility: hidden; }
img { border: 0; vertical-align: bottom; }
a,
a:visited,
a:hover,
a:focus,
a:active { text-decoration: none; outline: 0; }
:focus,
:active { outline: 0; }
p { line-height: inherit; }
label { font-weight: inherit; }
input,
button,
textarea,
select,
optgroup,
option { font-family: inherit; font-size: inherit; *font-size: 100%; font-style: inherit; font-weight: inherit; outline: 0; }
textarea { resize: vertical; }
ol.reset,
ul.reset,
li.reset { margin: 0; padding: 0; list-style: none; }
section,
article,
aside,
footer,
header,
nav,
main { display: block; }

/* 文字編輯器 */
.text-edit { font-size: 1.125rem; line-height: 2; padding: 30px; }
.text-edit img { max-width: 100%; height: auto !important; }
@media only screen and (max-width:565px) {
	.text-edit { font-size: 1rem; padding: 0px; }
}

/* scroll-view */
.scroll-fade { opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade.scroll-view { opacity: 1; }
.scroll-fade-down { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade-down.scroll-view { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
.scroll-fade-up { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade-up.scroll-view { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
.scroll-fade-left { -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade-left.scroll-view { opacity: 1; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
.scroll-fade-right { -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, -o-transform 0.8s; transition: opacity 1.5s, -webkit-transform 0.8s; -o-transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s; transition: opacity 1.5s, transform 0.8s, -webkit-transform 0.8s; }
.scroll-fade-right.scroll-view { opacity: 1; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
.tracking-in-expand { -webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
@-webkit-keyframes tracking-in-expand {
	0% { letter-spacing: -0.5em; opacity: 0; }
	40% { opacity: 0.6; }
	100% { opacity: 1; }
}
@keyframes tracking-in-expand {
	0% { letter-spacing: -0.5em; opacity: 0; }
	40% { opacity: 0.6; }
	100% { opacity: 1; }
}

/* 共用架構 */
.g-wrap { min-height: calc(100vh - 250px); overflow: hidden; padding-top: 125px; }
.container-1560 { width: 1560px; margin: 0 auto; padding: 0 15px; }
.container-1400 { width: 1400px; margin: 0 auto; padding: 0 20px; }
@media only screen and (max-width:1800px) {
	.g-wrap { padding-top: 100px }
}
@media only screen and (max-width:1600px) {
	.container-1560 { width: 100%; }
	.container-1400 { width: 100%; }
}
@media only screen and (max-width:767px) {
	.i-about .txt-wrap { width: 80%; margin: 0 auto; }
}
@media only screen and (max-width:565px) {
	.g-wrap { padding-top: 70px }
}

/* 共用標題 */
.h2 { text-transform: uppercase; text-align: left; position: relative; }
.h2 .small { font-size: 1.25rem; color: #000; display: block; }
.h2 .color { font-size: 3rem; font-weight: bold; background: -webkit-linear-gradient(left, #d18810, #dcc632 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.h2.scroll-view { -webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
@media only screen and (max-width:991px) {
	.h2 { font-size: 2.5rem; white-space: normal; margin-bottom: 15px; }
	.h2 .small { font-size: 1rem; }
	.h2 .color { font-size: 2rem; display: inline-block }
}
@media only screen and (max-width:767px) {
	.h2 { font-size: 2rem; }
}
@media only screen and (max-width:565px) {
	.h2 .small { display: inline-block; margin-right: 5px; }
}

/* 共用滑過圖片 */
@media only screen and (min-width:992px) {
	.hover-box .pic-box { position: relative; overflow: hidden; }
	.hover-box .pic-box:before,
	.hover-box .pic-box:after { content: ""; position: absolute; left: -500px; top: 0; opacity: 0.3; width: 300px; height: 100%; -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; *zoom: 1; background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFF', endColorstr='#FFFFFF', GradientType=0); }
	.hover-box .pic-box:hover:before { left: 150%; -webkit-transition: left 0.5s; -o-transition: left 0.5s; transition: left 0.5s; }
	.hover-box .pic-box:hover:after { left: 150%; -webkit-transition: left 0.5s; -o-transition: left 0.5s; transition: left 0.5s; left: 100%; -webkit -o transition-delay: 0.1s; }
}

/* 共用按鈕樣式 */
.g-btn { font-size: 1rem; text-align: center; padding: 9px; display: inline-block; min-width: 150px; overflow: hidden; position: relative; border-radius: 4px; border: 1px solid #b50221; color: #b50221; }
.g-btn.dark { background: #444; color: #fff; border: #444 1px solid; }
.g-btn.red { background: #b50221; color: #fff; border: #b50221 1px solid; }
.btn-wrap { }
.btn-wrap.gray { background: #f6f6f6; }
.btn-wrap.center { text-align: center; margin: 3% auto; }
@media only screen and (min-width:992px) {
	.g-btn:hover { background: #b50221; color: #fff; -webkit-transition: background 0.5s 0.25s; -o-transition: background 0.5s 0.25s; transition: background 0.5s 0.25s; }
}
.btn-more { display: inline-block; position: relative; z-index: 0; width: 120px; height: 40px; line-height: 40px; color: #fff; font-size: 0.75rem; letter-spacing: 1px; font-weight: bold; text-align: center; cursor: pointer; color: #fff; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.btn-more:before { content: ''; display: block; width: 120px; height: 40px; z-index: -1; position: absolute; left: 0px; top: 0px; -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); -o-transform: skewX(-25deg); transform: skewX(-30deg); background: rgb(227, 219, 37); background: -moz-linear-gradient(90deg, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); background: -webkit-linear-gradient(90deg, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); background: linear-gradient(90deg, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3db25", endColorstr="#d9ac1c", GradientType=1); -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
@media only screen and (min-width:992px) {
	.btn-more:hover { color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }
	.btn-more:hover:before { background: -moz-linear-gradient(90deg, rgba(209, 136, 16, 1) 0%, rgba(227, 219, 37, 1) 89%); background: -webkit-linear-gradient(90deg, rgba(209, 136, 16, 1) 0%, rgba(227, 219, 37, 1) 89%); background: linear-gradient(90deg, rgba(209, 136, 16, 1) 0%, rgba(227, 219, 37, 1) 89%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d9ac1c", endColorstr="#e3db25", GradientType=1); }
}
.btn-back { position: relative; display: inline-block; width: 145px; font-weight: 100; font-size: 0.875rem; z-index: 0; line-height: 50px; color: #fff; text-align: center; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.btn-back:before { content: url('../images/btn_back.svg'); position: absolute; left: 0px; top: 0px; z-index: -1 }
.btn-back:after { content: url('../images/btn_shadow.svg'); position: absolute; color: #ffffff; left: 10px; top: 10px; z-index: -2; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
@media only screen and (min-width:992px) {
	.btn-back:hover { color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); }
	.btn-back:hover:after { left: 5px; top: 5px; }
}

/* Header */
.flip-vertical-left { -webkit-animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) reverse both; animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) reverse both; }
@-webkit-keyframes flip-vertical-left {
	0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
	100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
}
@keyframes flip-vertical-left {
	0% { -webkit-transform: rotateY(0); transform: rotateY(0); }
	100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
}
.scale-up-hor-left { -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
@-webkit-keyframes scale-up-hor-left {
	0% { -webkit-transform: scaleX(0.4); transform: scaleX(0.4); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; opacity: 0; }
	100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; opacity: 1; }
}
@keyframes scale-up-hor-left {
	0% { -webkit-transform: scaleX(0.4); transform: scaleX(0.4); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; opacity: 0; }
	100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; opacity: 1; }
}
#header { z-index: 99; font-size: 0; text-align: center; -o-transition: background 0.5s ease; -webkit-transition: background 0.5s ease; transition: background 0.5s ease; background: #fff; border-bottom: 1px solid #ddd; position: fixed; width: 100%; }
#header:before { width: 100%; background: #5e0d8b; position: absolute; }
#header .logo { width: 150px; height: 91px; text-align: center; display: inline-block; -o-transition: margin 0.35s; -webkit-transition: margin 0.35s; transition: margin 0.35s; vertical-align: top; margin: 16.5px 0; position: absolute; left: 50px; }
#header .logo a { height: 100%; width: 100%; font-size: 0; background: url('../images/logo.svg') center center no-repeat; display: block; background-size: contain; }
#header .logo a img { max-width: 100%; }
#header .right-box { font-size: 0; display: inline-block; top: 42px; position: absolute; right: 36px; }
#header .right-box>* { vertical-align: middle; height: 40px; line-height: 40px; }
#header .right-box .lang-wrap { display: inline-block; vertical-align: middle; position: relative; }
#header .right-box .lang-wrap .lang-toggle { margin: 0; font-size: 1rem; cursor: pointer; height: 100%; text-align: left; position: relative; padding-right: 20px; }
#header .right-box .lang-wrap .lang-toggle:after { content: ''; width: 10px; height: 10px; position: absolute; right: 0; top: 15px; border-style: solid; border-width: 8px 5px 0px 5px; border-color: #000 transparent transparent transparent; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; }
#header .right-box .lang-wrap .lang-toggle.open:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
#header .right-box .lang-wrap .lang-toggle .icon-earth { width: 24px; height: 24px; position: relative; display: inline-block; vertical-align: middle; margin: 0 7px 3px 0; }
#header .right-box .lang-wrap .lang-toggle .icon-earth svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#header .right-box .lang-wrap .lang-toggle .icon-earth svg path { fill: #fff; }
#header .right-box .lang-wrap .lang-toggle .nowLang { }
#header .right-box .lang-wrap ul { display: none; position: absolute; top: 100%; left: 50%; width: 120px; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%);  background: rgb(255, 255, 255, 0.9);-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);z-index: 0; }
#header .right-box .lang-wrap ul li { font-size: 1rem; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
#header .right-box .lang-wrap ul li:last-child { border-bottom: 0 }
#header .right-box .lang-wrap ul li a { color: #000; display: block; font-size: 0.937rem; -webkit-transition: color 0.5s; -o-transition: color 0.5s; transition: color 0.5s;}
#header .right-box .search-wrap { display: inline-block; position: relative; }
#header .right-box .gap { display: inline-block; height: 15px; width: 1px; background: #222; margin: 0 30px 0 20px; vertical-align: middle }
#header .right-box .search-wrap input { width: 0; border: 1px solid #fff; border-radius: 0px; padding: 0px 0px; line-height: 40px; height: 40px; font-size: 1rem; -webkit-transition: ease 0.35s; transition: ease 0.35s; vertical-align: middle; }
#header .right-box .search-wrap .search-btn { font-size: 0; display: inline-block; font-size: 0; border: none; width: 40px; height: 40px; line-height: 40px; background: transparent; vertical-align: middle; }
#header .right-box .search-wrap .search-btn svg { vertical-align: middle; }
#header .right-box .search-wrap input::-webkit-input-placeholder { font-size: 0.85rem; color: #ddd }
#header .right-box .search-wrap input:-moz-placeholder { font-size: 0.75rem; color: #ddd }
#header .right-box .search-wrap input::-moz-placeholder { font-size: 0.75rem; color: #ddd }
#header .right-box .search-wrap input:-ms-input-placeholder { font-size: 0.75rem; color: #ddd }
@media only screen and (min-width:992px) {
	#header .switch { display: none; }
	#header .menu { width: auto; vertical-align: top; display: inline-block; }
	#header .menu > ul { height: 100%; font-size: 0; }
	#header .menu > ul > li { position: relative; text-align: center; display: inline-block; }
	#header .menu > ul > li:after { content: ''; display: inline-block; width: 1px; height: 14px; background: #666; position: absolute; right: 0; top: 50%; margin-top: -7px; }
	#header .menu > ul > li:last-child:after { display: none; }
	#header .menu > ul > li > a { position: relative; display: block; color: #212121; font-size: 1.05rem; letter-spacing: 1px; line-height: 50px; padding: 37px 50px; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; font-weight: 600; box-sizing: content-box; }
	#header .menu > ul > li ul { position: absolute; font-size: 1rem; top: 100%; left: 50%; width: 150px; background: rgba(255, 255, 255, 0.9); opacity: 0; -webkit-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); display: block !important; }
	#header .menu > ul > li ul li { white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, 0.1); -moz-transition: background 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: background 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: background 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: background 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
	#header .menu > ul > li ul li a { display: block; color: #000; padding: 10px; -moz-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
	#header .menu > ul > li ul li:hover { /*background: rgba(255, 182, 52, 0.9);*/background: rgba(255, 255, 255, 0.9); }
	#header .menu > ul > li ul li:hover a { color: #d9ac1c; }
	#header .menu > ul > li:hover > a,
	#header .menu > ul > li.on > a { color: #d9ac1c; }
	#header .menu > ul > li.on > a:after { background: #7a3491; z-index: -1; }
	#header .menu > ul > li:hover ul { opacity: 1; -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: opacity 0.35s, -webkit-transform 0s; transition: opacity 0.35s, -webkit-transform 0s; -o-transition: transform 0s, opacity 0.35s; transition: transform 0s, opacity 0.35s; transition: transform 0s, opacity 0.35s, -webkit-transform 0s; }
	#header .right-box .lang-wrap:hover ul { display: block; background: rgba(255, 255, 255, 0.9); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);	box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);}
	#header .right-box .lang-wrap ul li:hover a { color: #d9ac1c; }
	#header .right-box .lang-wrap .lang-toggle:hover:after { border-color: #d9ac1c transparent transparent transparent; }
	#header .right-box .search-wrap input:focus { display: inline-block; max-width: 100%; width: auto; border: 1px solid #dcdcdc; padding: 0px 10px; }
	#header .right-box .search-wrap:hover input { display: inline-block; width: auto; border: 1px solid #dcdcdc; padding: 0px 10px; }
	#header .right-box .search-wrap .search-btn:hover svg { fill: #d9ac1c; }
	#header .search-outter { display: none !important; }
	#header.scroll-view { position: fixed; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 100%; background: rgba(255, 255, 255, 0.9) }
	#header.scroll-view .logo { }
	#header.scroll-view .logo a { }
	#header.scroll-view .menu { }
	#header.scroll-view .menu > ul > li > a { }
	#header.scroll-view .menu > ul > li.on > a { color: #d9ac1c; }
	#header.scroll-view .menu > ul > li.hidden-lg,
	#header.scroll-view .menu > ul > li.hidden-md { display: inline-block !important; }
	#header.scroll-view .menu > ul > li > a:after { display: none; }
}
@media only screen and (max-width:1800px) {
	#header { width: 100%; position: fixed; }
}
@media only screen and (max-width:1480px) {
	#header .logo { width: 20%; height: 80px; margin: 10px 0; left: 0; }
	#header .menu > ul > li > a { padding: 25px 45px; }
	#header .right-box .box { padding: 15px 15px; }
	#header .right-box .box.online { border-right: 1px solid rgba(255, 255, 255, 0.1); font-size: 0; }
	#header .right-box .box.online svg { margin-right: 0; }
}
@media only screen and (max-width:1366px) {
	#header { }
	#header .logo { width: 20%; height: 80px; margin: 10px 0; left: 0; }
	#header .menu > ul > li > a { }
	#header .right-box { }
}
@media only screen and (max-width:1199px) {
	#header .menu > ul > li > a { padding: 25px 24px; }
	#header .right-box .box.info .txt .link,
	#header .right-box .box.info .txt .link:first-child { font-size: 0; }
	#header .right-box .box.info svg { margin-right: 0 }
}
@media only screen and (max-width:991px) {
	#header { position: fixed; height: 100px; }
	#header .switch { right: 20px; }
	#header:before { display: none; }
	#header .logo { margin: 10px 0; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); height: 80px; }
	#header .logo:before { border-radius: 50%; -ms-transform: translate(-50%, -50%); }
	#header .menu { position: absolute; display: inline-block; margin: 0; background: #fff; left: -100%; right: auto; height: 100vh; }
	#header.scroll-view .menu { right: auto; }
	#header .menu > ul { display: none; }
	#header .menu > ul { height: 100%; padding: 40px 0; }
	#header .menu > ul > li { position: relative; display: block; text-align: center; }
	#header .menu > ul > li > a { color: #bbbbbb; font-size: 1.5rem; position: relative; display: block; text-align: left; text-transform: uppercase; line-height: 3.6rem; }
	#header .menu > ul > li > a span { position: absolute; right: -20px; top: 50%; margin-top: -10px; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #999 transparent transparent transparent; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }
	#header .menu > ul > li.on > a { color: #fff; font-weight: 700; background: transparent !important; }
	#header .menu > ul > li ul { position: absolute; padding: 10px 0; display: none; }
	#header .menu > ul > li.on ul { position: relative; opacity: 1; }
	#header .menu > ul > li ul li a { display: block; color: #747474; padding: 6px 0; font-size: 1.125rem; }
	#header .menu.active { opacity: 1; left: 0; top: 0; height: 100vh; width: 100%; padding: 80px 60px; opacity: 1; z-index: 1; background: rgba(37, 37, 37, 0.9); -webkit-animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) reverse both; animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) reverse both; }
	#header .menu.active > ul { display: block !important; height: 100%; overflow-y: auto; }
	#header .menu.active > ul > li { position: relative; display: block; padding: 20px 0; text-align: center; }
	#header .menu.active > ul > li:nth-child(1) { -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 0.2s; animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 0.2s; }
	#header .menu.active > ul > li:nth-child(2) { -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 0.4s; animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 0.4s; }
	#header .menu.active > ul > li:nth-child(3) { -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 0.6s; animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 0.6s; }
	#header .menu.active > ul > li:nth-child(4) { -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 0.8s; animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 0.8s; }
	#header .menu.active > ul > li:nth-child(5) { -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1s; animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1s; }
	#header .menu.active > ul > li > a { font-size: 1.5rem; position: relative; display: inline-block; line-height: 1.2; padding: 0; }
	#header .menu.active > ul > li > ul { padding: 20px 0 0; width: 100%; display: none; }
	#header .menu.active > ul > li > ul > li >a { display: block; color: #fff; padding: 9px 0; }
	#header .menu.active > ul > li.on ul { position: relative; opacity: 1; display: block }
	#header .menu.active > ul > li.on > a { color: #d9ac1c; }
	#header .menu.active > ul > li.on > a span { border-top-color: #d6c42a; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
	#header .menu.active > ul > li.on > a span { position: absolute; right: -20px; top: 64%; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #d9ac1c transparent transparent transparent; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }
	#header .right-box { top: 31px; }
	#header .right-box .lang-wrap ul { left: auto; right: 0; transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -webkit-transform: translateX(0); }
	#header .right-box .search-wrap { display: none; }
	#header .right-box .gap { margin: 0 15px 0 5px; }
	#header .right-box .search-icon { display: inline-block; width: 40px; float: left; }
	#header .right-box .search-icon svg { vertical-align: middle; }
	#header .search-outter { position: absolute; top: 100%; right: 0; padding: 10px; display: none; background: rgba(0, 0, 0, 0.7); width: calc(100% - 40px); z-index: -1;; }
	#header .search-outter .close { position: absolute; right: 100%; top: 0; bottom: 0; width: 40px; color: #fff; background: #000; opacity: 1; font-size: 0.812rem; }
	#header .search-outter .close i { position: absolute; left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
	#header .search-outter input { width: 100%; padding: 6px; border: none; height: 36px; border-bottom: 1px solid #666; font-size: 1rem; background: transparent; color: #fff }
	#header .search-outter .search-btn { position: absolute; right: 10px; top: 50%; margin-top: -15px; border: none; border-radius: 0; height: 33px; font-size: 0; width: 34px; background: transparent; }
	#header .search-outter .search-btn svg { fill: #fff; }
	#header .switch { display: block; border: none; position: absolute; top: 17px; left: 20px; width: 62px; height: 73px; padding: 0; background: url('../images/icon.png') center center no-repeat; background-size: contain; z-index: 100; }
	#header .switch .icon { position: relative; width: 62px; height: 73px; display: inline-block; }
	#header .switch .icon i { display: block; width: 35%; -webkit-transition: -webkit-transform 0.5s; height: 3px; position: absolute; left: 50%; top: 50%; transition: -webkit-transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; margin-left: -13px; border-radius: 3px; background: rgba(255, 255, 255, 1); }
	#header .switch .icon svg { width: 100%; }
	#header .switch .icon svg .gradient { fill: url(#Gradient1); }
	#header .switch .icon .linetop { margin-top: -10px; }
	#header .switch .icon .linebottom { margin-top: 10px; margin-left: -11px; }
	#header .switch .icon .linemiddle { margin-left: -10px; }
	#header .switch.on .icon .linetop { margin-top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
	#header .switch.on .icon .linemiddle { width: 0; }
	#header .switch.on .icon .linebottom { margin-top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -13px; }
}
@media only screen and (max-width:767px) {
	#header .right-box a { }
	#header .switch { -webkit-transform: scale(0.6); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; }
}
@media only screen and (max-width:565px) {
	#header { height: 70px; }
	#header .logo { margin: 0; height: 70px; }
	#header .right-box { top: 15px; right: 15px; }
	#header .switch { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; top: 0; }
}
@media only screen and (max-width:320px) {
	#header .logo { width: 150px; -ms-transform: translate(0, 0); left: 50%; }
}

/*  */

/* Footer */
#footer { text-align: center; overflow: hidden; color: #222; text-align: left; background: #f6f6f6; }
#footer .top-box { font-size: 0; font-weight: bold; padding: 3% 15px; }
#footer .top-box .logo-box,
#footer .top-box .link-box { font-size: 1rem; display: inline-block; vertical-align: middle; }
#footer .top-box .logo-box { width: 25%; height: 150px; background: url(../images/logo.svg) no-repeat center center; border-right: 1px solid #e5e5e5; margin-right: 3%; background-size: 50% auto; }
#footer .top-box .logo-box .txt { display: inline-block; vertical-align: middle; width: calc(100% - 230px); line-height: 1.5 }
#footer .top-box .logo-box .txt  a { color: #222; display: inline-block; margin-right: 10px; color: #888; }
#footer .top-box .link-box { width: calc(100% - 28%); /* text-align: right;  */ }
#footer .top-box .link-box { font-size: 0; }
#footer .top-box .link-box> li { font-size: 1rem; width: 25%; display: inline-block; vertical-align: top; padding: 0 5%; line-height: 2; }
#footer .top-box .link-box> li>a { color: #222; font-size: 1.125rem; font-weight: 700 }
#footer .top-box .link-box> li> ul> li> a { color: #444 }
#footer .top-box .link-box> li:last-child a { display: block }
#footer .copyright { padding: 30px 15px; font-size: 0.875rem; text-align: center; background: #efefef; }
#footer .copyright .grnet { color: #a0a0a0; }
#footer .copyright .grnet a { color: #a0a0a0; }
#footer:after { content: ''; display: block; height: 10px; background: rgb(227, 219, 37); background: -moz-linear-gradient(90deg, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); background: -webkit-linear-gradient(90deg, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); background: linear-gradient(90deg, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3db25", endColorstr="#d9ac1c", GradientType=1); -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
@media only screen and (min-width:992px) {
	#footer .top-box .box:hover img { opacity: 0.9; }
}
@media only screen and (max-width:1680px) {
	#footer .top-box .link-box { }
}
@media only screen and (max-width:1366px) {
	#footer .hidden-1480 { display: none }
	#footer .visible-1480 { display: block; }
	#footer .top-box .logo-box { border-right: 1px solid #ddd; }
	#footer .top-box .link-box { }
}
@media only screen and (max-width:1199px) {
	#footer .top-box .logo-box { background-size: 70% auto }
	#footer .top-box .link-box { }
}
@media only screen and (max-width:992px){
	#footer .top-box .link-box>li>a { font-size: 0.875rem; }
	#footer .top-box .link-box>li>ul>li>a { font-size: 0.8125rem; }
}
@media only screen and (max-width:767px) {
	#footer .top-box .logo-box { background-size: 70% auto }
	#footer .top-box .logo-box { }
	#footer .top-box .logo-box img,
	#footer .top-box .link-box { }
	#footer .top-box .link-box> li { padding: 0 10px; }
	#footer .top-box .link-box>li>a { font-size: 0.8125rem; }
	#footer .top-box .link-box>li>ul>li>a { font-size: 0.75rem; }
}
@media only screen and (max-width:565px) {
	#footer .top-box .logo-box { display: block; width: 50%; border-right: 0; margin: 0 auto; }
	#footer .top-box .link-box { width: 100%; display: block; }
	#footer .top-box .link-box a { width: 100%; display: block; text-align: left; }
	#footer .top-box .link-box> li { width: calc(100%/3) }
	#footer .top-box .link-box> li:last-child { width: 100% }
	#footer .top-box .link-box> li:last-child a { display: inline-block; width: calc(30% - 5px); margin-right: 20px; }
}
@media only screen and (max-width:320px) { }

/* Go Top */
.go-top { position: fixed; z-index: 990; bottom: -100px; height: 32px; border-radius: 16px; right: 35px; cursor: pointer; line-height: 50px; color: #fff; text-align: center; font-size: 0; width: 37px; transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; }
.go-top:before { position: absolute; bottom: 88px; right: 20px; display: block; width: 7px; height: 7px; border-radius: 7px; background: #666; }
.go-top:after { position: absolute; bottom: 55px; right: 23px; display: block; width: 1px; height: 40px; background: #666; }
.go-top span { position: relative; display: block; z-index: 10 }
.go-top span:before { content: ""; border-style: solid; border-width: 2px 2px 0 0; border-color: #fff #fff transparent transparent; position: absolute; display: inline-block; width: 10px; height: 10px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 13px; left: 15px; z-index: 10; }
.go-top span:after { content: ""; position: absolute; display: inline-block; width: 2px; height: 11px; top: 15px; left: 19px; background: #fff; z-index: 10; }
.go-top.scroll-view { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); bottom: 50px; }
@media only screen and (min-width:992px) {
	.go-top:hover path { fill: #000; stroke: #eccd00 }
}
@media only screen and (max-width:991px) {
	.go-top { }
	.go-top.scroll-view { bottom: 20px; }
}

/*=====================  Index  ========================== */
@-webkit-keyframes drawLine {
	0% { opacity: 1; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
	25% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1, 0.6); -ms-transform: scale(1, 0.6); transform: scale(1, 0.6); }
	40% { -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0.7); -ms-transform: scale(1, 0.7); transform: scale(1, 0.7); }
	75% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
	100% { opacity: 0; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
}
@keyframes drawLine {
	0% { opacity: 1; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
	25% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transform: scale(1, 0.6); -ms-transform: scale(1, 0.6); transform: scale(1, 0.6); }
	40% { -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0.7); -ms-transform: scale(1, 0.7); transform: scale(1, 0.7); }
	75% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
	100% { opacity: 0; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }
}

/* Banner */
#index.g-wrap { padding-top: 0 }
#index .i-banner { position: relative; height: 100%; margin: 0 auto; overflow: hidden; background: #222 }
#index .i-banner .banner-slick { position: relative; }
#index .i-banner .banner-slick .item { position: relative; width: 100%; overflow: hidden; vertical-align: top; padding-bottom: 50% }
#index .i-banner .banner-slick .item a { display: block; }
#index .i-banner .banner-slick .item img { position: absolute; left: 50%; top: 50%; transform: scale(1.1) translate(-50%, -50%); -ms-transform: scale(1.1) translate(-50%, -50%); -moz-transform: scale(1.1) translate(-50%, -50%); -webkit-transform: scale(1.1) translate(-50%, -50%); opacity: 0; transition: scale translate 2s ease; -o-transition: scale translate 2s ease; -moz-transition: scale translate 2s ease; -webkit-transition: all 2s ease; transform-origin: 0 0; }
#index .i-banner .banner-slick .slick-slide .item.in img { -webkit-transform: scale(1.05) translate(-50%, -50%); -ms-transform: scale(1.05) translate(-50%, -50%); transform: scale(1.05) translate(-50%, -50%); opacity: 1; }
#index .i-banner .scroll-down { position: absolute; width: 1px; bottom: 0; text-align: center; color: #fff; display: block; left: 50%; }
#index .i-banner .scroll-down:before { content: 'SCROLL'; display: block; margin: 0px auto; text-align: center; margin-left: -25px; color: #d9ac1c; font-size: 0.875rem; font-family: "Roboto"; font-weight: 700; }
#index .i-banner .scroll-down.scroll-view:before { -webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation: tracking-in-expand 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
#index .i-banner .scroll-down:after { content: ""; width: 1px; height: 65px; bottom: 0; background: rgb(255, 171, 0); background: -moz-linear-gradient(180deg, rgba(255, 171, 0, 1) 23%, rgba(0, 0, 0, 0.9976365546218487) 100%); background: -webkit-linear-gradient(180deg, rgba(255, 171, 0, 1) 23%, rgba(0, 0, 0, 0.9976365546218487) 100%); background: linear-gradient(180deg, rgba(255, 171, 0, 1) 23%, rgba(0, 0, 0, 0.9976365546218487) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffab00", endColorstr="#000000", GradientType=1); display: block; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-animation: drawLine 2s linear infinite; animation: drawLine 2s linear infinite; }
@media only screen and (max-width:1800px) {
	#index .i-banner { width: 100%; }
}
@media only screen and (max-width:1199px) {
	#index.g-wrap { padding-top: 100px }
}
@media only screen and (max-width:991px) {
	#index .i-banner { }
}
@media only screen and (max-width:767px) {
	#index .i-banner .banner-slick .item { padding-bottom: 100%; }
	#index .i-banner .banner-slick .slick-slide .item.in img { }
	#index .i-banner .scroll-down { bottom: 50px; }
	#index .i-banner .scroll-down:after { height: 20px }
}
@media only screen and (max-width:565px) {
	#index.g-wrap { padding-top: 70px }
	#index .i-banner .banner-slick .slick-slide .item.in .text { width: calc(100% - 20%); }
}

/* i-news */
.i-news { position: relative; padding: 10% 0 18%; background: #171717; overflow: hidden; background: url('../images/news_bg.png') center center no-repeat #171717; background-attachment: fixed; }
.i-news .wrap { font-size: 0; }
.i-news .left-box,
.i-news .right-box { display: inline-block; vertical-align: middle; }
.i-news .left-box { width: 30%; padding: 0 6%; }
.i-news .left-box .h2 .small { color: #fff }
.i-news .left-box .h2 .color { -webkit-text-fill-color: #fff; }
.i-news .right-box { width: 55%; }
.i-news .right-box .news-box { display: block; position: relative; overflow: hidden; width: 60% }
.i-news .right-box .news-box .ti { font-size: 1.25rem; color: #fff; line-height: 2 }
.i-news .right-box .news-box .date { color: #ecd72a; font-size: 1rem; }
.i-news .right-box .news-box .date:before { content: ''; width: 24px; height: 1px; background: #626262; margin: 20px 0; display: block; }
@media only screen and (max-width:1680px) {
	.i-news .bg.right { width: 80%; right: -15%; top: -35%; }
}
@media only screen and (max-width:1366px) {
	.i-news { padding: 8% 0 20%; background-size: cover }
}
@media only screen and (max-width:991px) {
	.i-news .right-box .news-box { width: 80%; }
	.i-news .right-box .news-box .ti { font-size: 1rem; }
}
@media only  screen and (max-width:767px) {
	.i-news { padding: 5% 0;  background-size: 150% auto}
	.i-news .left-box,
	.i-news .right-box { display: block; width: 100%; padding: 0 15% 0 10%; }
	.i-news .left-box { }
	.i-news .left-box .h2 { display: inline-block; margin-bottom: 0 }
	.i-news .left-box .btn-more { float: right }
}
@media only  screen and (max-width:565px) {
	.i-news { padding: 20px 0 30px; }
	.i-news .left-box,
	.i-news .right-box { padding: 0; }
	.i-news .right-box .news-box .date:before { margin: 3px 0; }
	.i-news .bg.left { left: 0%; top: 0; height: 100%; width: 60%; background-size: cover; opacity: 0.2 }
	.i-news .bg.right { right: -10%; width: 93%; top: -87px; opacity: 0.5 }
	.i-news .bg.right img { height: 100%; }
}

/* Index Mission */
.i-mission { z-index: 0; position: relative; padding: 6% 0; background: url('../images/mission_bg.png') left top no-repeat; background-size: cover; margin-top: -100px; }
.i-mission:before { content: url('../images/hexagon_right.png'); position: absolute; right: 0; top: -650px; }
.i-mission:after { content: url('../images/hexagon_left.png'); position: absolute; left: 0; top: -29%; z-index: -1 }
.i-mission .wrap { font-size: 0; }
.i-mission .left-box,
.i-mission .right-box { display: inline-block; vertical-align: middle; }
.i-mission .left-box { width: 45%; padding: 0 5% 0 10%; line-height: 2; }
.i-mission .left-box .txt { margin: 0 auto; font-size: 1.1rem; }
.i-mission .right-box { width: 55%; position: relative; }
.i-mission .right-box .news-box img { width: 100%; }
.i-mission .mission-list + .page-box { color: #d6a730; z-index: 0; position: absolute; font-size: 1.25rem; right: 0; bottom: 0; background: #fff; text-align: center; padding: 20px 30px; }
.i-mission .mission-list + .page-box:before { content: ''; border-style: solid; border-color: transparent #ffffff transparent transparent; border-width: 68px 40px 0px 0; display: inline-block; position: absolute; left: -40px; bottom: 0; }
.i-mission .mission-list + .page-box span { cursor: pointer; margin: 0 auto; transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; display: inline-block; vertical-align: baseline; padding: 0 6px; }
.i-mission .mission-list + .page-box span.current { font-weight: bold; }
.i-mission .mission-list + .page-box span.all { }
@media (max-width:1680px) {
	.i-mission:before { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; right: 0%; top: -650px; }
	.i-mission:after { -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); transform-origin: left bottom; left: 0%; top: -40%; }
	.i-mission .left-box { padding: 0 5% 0 15%; width: 55% }
	.i-mission .right-box { width: 45% }
}
@media only screen and (max-width:1366px) {
	.i-mission:after { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); top: -70%; }
	.i-mission { padding: 5% 0; margin-top: -10%; }
	.i-mission .left-box { padding: 0 5% 0 15%; width: 60% }
	.i-mission .right-box { width: 40% }
	.i-mission .left-box .txt { line-height: 1.8; }
}
@media (max-width:1199px) {
	.i-mission:before { -webkit-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); }
	.i-mission:after { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); top: -360px; }
}
@media only screen and (max-width:991px) {
	.i-mission:before { top: -655px; }
	.i-mission:after { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); top: -380px; }
	.i-mission .left-box .txt { font-size: 1rem; line-height: 1.5;}
}
@media only screen and (max-width:767px) {
	.i-mission { padding: 4% 0; background-position: center center; margin-top: 0 }
	.i-mission:after { -webkit-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); top: -480px; opacity: 0.6 }
	.i-mission .left-box,
	.i-mission .right-box { display: block; width: 100%; padding: 0 10%; }
}
@media only screen and (max-width:565px) {
	.i-mission { padding: 10px 0 20px; }
	.i-mission:before { -webkit-transform: scale(0.2); -ms-transform: scale(0.2); transform: scale(0.2); }
	.i-mission:after { -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); top: -450px }
	.i-mission .left-box,
	.i-mission .right-box { display: block; width: 100%; padding: 0; }
	.i-mission .left-box .txt { margin-bottom: 20px; }
	.i-mission .mission-list + .page-box { padding: 5px 40px; font-size: 1.125rem; }
	.i-mission .mission-list + .page-box:before { border-width: 36px 20px 0px 0; left: -20px; }
}
.i-partner { background: #fff; text-align: center; padding: 40px 0 120px; }
.i-partner .h2 { text-align: center; }
.i-partner .summary { max-width: 960px; line-height: 36px; font-size: 1.125rem; color: #777; margin: 40px auto 0; opacity: 0; transform: translateY(40px); -moz-transform: translateY(40px); -webkit-transform: translateY(40px); transition: opacity 1s .25s, transform 1s .25s; -moz-transition: opacity 1s .25s, transform 1s .25s; -webkit-transition: opacity 1s .25s, transform 1s .25s; }
.i-partner.scroll-view .subject,
.i-partner.scroll-view .summary { opacity: 1; transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); }
.i-partner .partner-slick { margin-top: 50px; }
.i-partner .partner-slick:before,
.i-partner .partner-slick:after { content: ''; display: block; position: absolute; z-index: 10; width: 1px; height: 100%; background: #fff; top: 0; }
.i-partner .partner-slick:before { left: 0; }
.i-partner .partner-slick:after { right: 0; }
.i-partner .partner-slick .item { position: relative; vertical-align: top; padding: 0 30px; }
.i-partner .partner-slick .item:before { content: ''; display: block; position: absolute; width: 1px; height: 100%; background: #e5e5e5; top: 0; left: -0.5px; }
.i-partner .partner-slick .item .box { display: block; position: relative; overflow: hidden; transform: rotateY(90deg); -moz-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transition: transform 1s .5s; -moz-transition: transform 1s .5s; -webkit-transition: transform 1s .5s; }
.i-partner.scroll-view .partner-slick .item .box { transform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
.i-partner .partner-slick .item .box .pic { position: relative; }
.i-partner .partner-slick .item .box .pic img { position: relative; transition: transform .5s; -moz-transition: transform .5s; -webkit-transition: transform .5s;}
.i-partner .partner-slick .item .box .name { position: absolute; width: calc(100% - 30px); line-height: 26px; font-size: 1rem; color: #fff; margin: 0; opacity: 0; padding: 7px 15px; top: 50%; left: 15px; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: opacity .5s, box-shadow .5s; -moz-transition: opacity .5s, box-shadow .5s; -webkit-transition: opacity .5s, box-shadow .5s; }
.i-partner .list li:nth-child(2) .box { transition-delay: .6s; -moz-transition-delay: .6s; -webkit-transition-delay: .6s; }
.i-partner .list li:nth-child(3) .box { transition-delay: .7s; -moz-transition-delay: .7s; -webkit-transition-delay: .7s; }
.i-partner .list li:nth-child(4) .box { transition-delay: .8s; -moz-transition-delay: .8s; -webkit-transition-delay: .8s; }
.i-partner.scroll-view .list li .box { transform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
@media (min-width:992px) {
	.i-partner .partner-slick .item .box:hover .pic img { transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transform: scale(1.05);}
	.i-partner .partner-slick .item .box:hover .name { opacity: 1; }
	.i-partner .list li .box { display: block; position: relative; overflow: hidden; transform: rotateY(90deg); -moz-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transition: transform 1s .5s; -moz-transition: transform 1s .5s; -webkit-transition: transform 1s .5s; }
	.i-partner .partner-slick .item .box:hover .pic:after { opacity: 0.8; }
}
@media (max-width:991px) {
	.i-partner .partner-slick .item { padding: 20px; }
}
@media (max-width:565px) {
	.i-partner { padding: 20px 0; }
	.i-partner .summary { margin-top: 20px; }
	.i-partner .partner-slick { margin-top: 20px; }
	.i-partner .partner-slick .item { padding: 10px; }
	.i-partner .partner-slick .item { padding: 0 20px; }
}

/* ============= Page ========== */
.page-wrap { padding: 50px 0; }
.p-banner { position: relative; z-index: 0; }
.p-banner .h2 { font-size: 2.65rem; letter-spacing: 0.2rem; font-weight: bold; position: absolute; color: #fff; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.p-banner .h2.on { -webkit-animation: tracking-out-contract 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: tracking-out-contract 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }
@media (max-width:1199px) {
	.page-wrap { padding: 30px 0; }
}
@media (max-width:991px) {
	.p-banner .h2 { font-size: 2rem; }
}
@media (max-width:767px) {
	.page-wrap { padding: 15px 0; }
}
@media (max-width:565px) {
	.p-banner .h2 { font-size: 1.65rem; }
}

/* Breadcrumb */
.g-breadcrumb { display: block; padding: 0; list-style: none; text-align: right; color: #1f1f1f; margin: -8px 0 0 0; font-weight: bold; }
.g-breadcrumb li { display: inline-block; vertical-align: top; padding-left: 45px; font-size: 0.9375rem; position: relative; }
.g-breadcrumb li:first-child { padding-left: 0; }
.g-breadcrumb li a { display: block; color: #666; }
.g-breadcrumb li a:hover { color: #444; text-decoration: underline; }
.g-breadcrumb li:before { content: ""; display: inline-block; width: 6px; height: 6px; position: absolute; top: 50%; left: 13px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-style: solid; border-color: #555; border-width: 1px 1px 0 0; margin-top: -4px; }
.g-breadcrumb li:first-child:before { display: none; }
.g-breadcrumb li:last-child { color: #d9ac1c; }
@media (max-width:991px) {
	.g-breadcrumb { margin: 10px auto; font-size: 0.875rem; padding-right: 10px;}
	.g-breadcrumb li { padding-left: 30px; }
	.g-breadcrumb li:before { left: 10px; }
}
.nodata { text-align: center; margin: 30px auto; }
.nodata .icon { display: inline-block; width: 50px; height: 50px; position: relative; border-radius: 50%; border: 1px solid #cccccc; -webkit-transition: -webkit-transform 0.35s, opacity 0.35s; -moz-transition: -moz-transform 0.35s, opacity 0.35s; -o-transition: -o-transform 0.35s, opacity 0.35s; transition: transform 0.35s, opacity 0.35s; opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }
.nodata .icon i { position: absolute; top: 50%; left: 50%; font-size: 1.5rem; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #ccc; }
.nodata .title { display: block; font-size: 1.5rem; margin: 15px auto 0 auto; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; -moz-transition: -moz-transform 0.5s, opacity 0.5s; -o-transition: -o-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; opacity: 0; -webkit-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%); }
.nodata .btn { display: block; opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; }
.nodata .btn a { display: block; margin: 10px auto; font-size: 1rem; width: 100%; max-width: 150px; text-align: center; text-decoration: underline; border-radius: 25px; color: #5b5b5b; }
.nodata .btn a:hover { text-decoration: none; }
.nodata.scroll-view .icon { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.nodata.scroll-view .title { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
.nodata.scroll-view .btn { opacity: 1; }
@media (max-width:767px) {
	.nodata .icon { width: 60px; height: 60px; }
	.nodata .icon i { font-size: 1.9rem; }
	.nodata .title { font-size: 1.3rem; }
}

/* Aside Nav */
.aside-nav { margin-bottom: 40px; }
.aside-nav .toggle { font-size: 1rem; width: 100%; height: 45px; line-height: 45px; padding: 0 45px 0 15px; margin: 0; cursor: pointer; border: 0; position: relative; background: #b50221; color:; }
.aside-nav .toggle:after { content: "\f107"; text-align: center; width: 40px; line-height: 45px; position: absolute; right: 0; top: 0; bottom: 0; font-family: "Font Awesome 5 Free"; font-weight: 900; border-left: 1px solid #e5e5e5; pointer-events: none; color: #f0dff2; font-size: 0.875rem; }
.aside-nav ul.ul-list { text-align: center; font-size: 0; }
.aside-nav ul.ul-list li { display: inline-block; }
.aside-nav ul.ul-list li a { color: #333; font-size: 1.125rem; width: 135px; background: #fff; margin: 0 5px; -moz-transition: color 0.25s, background 0.25s; -o-transition: color 0.25s, background 0.25s; -webkit-transition: color 0.25s, background 0.25s; transition: color 0.25s, background 0.25s; }
@media only screen and (min-width:991px) {
	.aside-nav .toggle:hover:after { background: #00b0b7; color: #fff; }
	.aside-nav ul.ul-list li:hover a { color: #b50221; background: #f9f9f9; }
	.aside-nav ul.ul-list li.current a { background-color: #b50221; color: #fff }
	.aside-nav .cate-wrap .toggle { display: none; }
	.aside-nav .cate-wrap ul { display: block !important; background: transparent; }
}
@media only screen and (max-width:991px) {
	.aside-nav { margin-bottom: 50px; margin-top: 10px; }
	.aside-nav .page-title { padding: 11px 17px; }
	.aside-nav ul.ul-list li { display: block; border-bottom: #ebebeb 1px solid; border-top: 0; }
	.aside-nav ul.ul-list li a { width: 100%; margin: 0 auto; border: 0; border-radius: 0; }
	.aside-nav .cate-wrap .toggle { color: #fff; border-radius: 5px; }
	.aside-nav .cate-wrap.open .toggle:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f106"; }
	.aside-nav .cate-wrap { width: calc(100% - 60px); position: relative; z-index: 2; margin: 0 auto; border-radius: 5px; }
	.aside-nav .cate-wrap.single { width: 100%; max-width: 350px; margin: 15px auto; float: none; }
	.aside-nav .cate-wrap ul { display: none; top: 100%; left: 0; width: 100%; border-radius: 0 0 8px; overflow: hidden; border: #ebebeb 1px solid; }
}
@media only screen and (max-width:640px) {
	.aside-nav { margin-bottom: 20px; }
	.aside-nav .cate-wrap { }
}

/* Page Pager */
.p_pager { text-align: center; padding: 20px 0px; position: relative; }
.p_pager .num-area { display: inline-block; margin-bottom: 7px; }
.p_pager .num-area a { font-size: 1rem; margin: 0px 12px; position: relative; color: black; }
.p_pager .num-area a:after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: black; top: 40%; right: -85%; }
.p_pager .num-area a:last-child:after { display: none; }
.p_pager .num-area .num.current { color: #d49130; position: relative; }
.p_pager .num-area .num.current:before { position: absolute; content: ""; display: block; height: 2px; width: 25px !important; background: #d49130; top: 85%; left: -20%; }

/* ============= Pproduct-List ========== */
#product-list { }
#product-list .list { font-size: 0; }
#product-list .pro-box { position: relative; margin: 0 20px 40px; width: calc(100%/2 - 40px); display: inline-block; border: 1px solid #e8e8e8; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); overflow: hidden; }
#product-list .pro-box .pic-box,
#product-list .pro-box .txt-box { font-size: 1rem; display: inline-block; width: 50%; vertical-align: top }
#product-list .pro-box .pic-box { position: relative; overflow: hidden; }
#product-list .pro-box .pic-box img { width: 100%; }
#product-list .pro-box .txt-box { padding: 5% 5%; background-size: cover; background-repeat: no-repeat; vertical-align: middle; }
#product-list .pro-box .txt-box .h3 { text-align: left; font-size: 2rem; font-weight: bold; max-height: 7.5rem; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#product-list .pro-box .txt-box .btn-more { position: absolute; right: 10%; bottom: 10%; color: #d9ac1c; }
#product-list .pro-box .txt-box .btn-more:before { background: #fff; border: 1px solid #ddd; box-shadow: 0 0 10px rgba(200, 200, 200, 0.3) }
@media (min-width:992px) {
	#product-list .pro-box:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border: 1px solid #ebc528; }
	#product-list .pro-box:hover .txt-box .btn-more:before { background: -moz-linear-gradient(90deg, rgba(209, 136, 16, 1) 0%, rgba(227, 219, 37, 1) 89%); background: -webkit-linear-gradient(90deg, rgba(209, 136, 16, 1) 0%, rgba(227, 219, 37, 1) 89%); background: linear-gradient(90deg, rgba(209, 136, 16, 1) 0%, rgba(227, 219, 37, 1) 89%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d9ac1c", endColorstr="#e3db25", GradientType=1); }
	#product-list .pro-box:hover .txt-box .btn-more { color: #fff }
}
@media (max-width:1199px) {
	#product-list .pro-box { margin: 0 15px 40px; width: calc(100%/2 - 30px); }
	#product-list .pro-box .txt-box { padding: 0 5%; }
	#product-list .pro-box .txt-box .h3 { font-size: 1.625rem; margin-bottom: 5px }
	#product-list .pro-box .txt-box .txt { font-size: 1rem; }
}
@media (max-width:991px) {
	#product-list .pro-box { margin: 0 10px 30px; width: calc(100%/3 - 20px); padding-bottom: 70px; vertical-align: top }
	#product-list .pro-box .pic-box,
	#product-list .pro-box .txt-box { width: 100%; display: block }
	#product-list .pro-box .txt-box { padding: 0px 20px; }
	#product-list .pro-box .txt-box .h3 { font-size: 1.3rem; margin-bottom: 5px; -webkit-line-clamp: 1; }
	#product-list .pro-box .txt-box .txt { height: 6rem; }
	#product-list .pro-box .txt-box .btn-more { bottom: 20px }
}
@media (max-width:767px) {
	#product-list .pro-box { width: calc(100%/2 - 20px); }
	#product-list .pro-box .txt-box { padding: 20px; }
	#product-list .pro-box .txt-box .txt { height: auto; }
}
@media (max-width:565px) {
	#product-list .pro-box { width: calc(100% - 20px); }
	#product-list .pro-box .txt-box { padding: 0 20px; overflow: visible }
	#product-list .pro-box .txt-box .txt { height: auto; }
}

/* Product View */
#product-view { position: relative; overflow: hidden; background: rgb(255, 255, 255); background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0) 80%, rgba(221, 221, 221, 1) 100%); background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0) 80%, rgba(221, 221, 221, 1) 100%); background: linear-gradient(0deg, rgba(255, 255, 255, 0) 80%, rgba(221, 221, 221, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dddddd", GradientType=1); }
#product-view .rellax { position: absolute; z-index: 0 }
#product-view .rellax img { width: 100%; }
#product-view .rellax:nth-child(1) { right: 0; top: 0; width: 40%; }
#product-view .rellax:nth-child(2) { left: 0; top: 15%; width: 10%; }
#product-view .rellax:nth-child(3) { left: 5%; top: 40%; width: 5%; }
#product-view .rellax:nth-child(4) { left: 0; bottom: -30%; width: 60%; }
#product-view .wrap { font-size: 0; margin-bottom: 5%; }
#product-view .pic-slider,
#product-view .txt-box { font-size: 1rem; display: inline-block; vertical-align: top; position: relative; width: 50%; }
#product-view .pic-slider { padding: 0 50px; }
#product-view .pic-slider img { width: 100%; }
#product-view .txt-box { padding: 5% 5% 5% 10%; line-height: 2; background-size: cover; background-repeat: no-repeat; }
#product-view .txt-box .h2 { font-size: 3rem; font-weight: bold; line-height: 3.2rem; }
#product-view .txt-box .h2:after { content: ''; display: block; width: 24px; height: 1px; background: #888; margin: 10% 0; }
#product-view .txt-box .txt { font-weight: bold; font-size: 1.125rem; line-height: 2; }
#product-view .txt-box .txt> li { position: relative; padding-left: 12px; }
#product-view .txt-box .txt> li:before { content: '.'; position: absolute; left: 0; top: -5px; }
#product-view .tab-wrap { text-align: center; }
#product-view .tab-wrap .tab { position: relative; display: inline-block; font-size: 0; padding: 0; vertical-align: middle; width: 100%; }
#product-view .tab-wrap .tab:after { content: ''; width: 2px; height: 60px; display: block; position: absolute; left: 50%; background: #d0d0d0; top: -5px; }
#product-view .tab-wrap .tab>li { font-size: 1rem; display: inline-block; padding: 0; vertical-align: middle; margin: 0px 33px; }
#product-view .tab-wrap .tab>li a { position: relative; display: inline-block; transition: all 0.3s ease; z-index: 1; text-align: center; font-size: 1.25rem; color: #444; font-weight: bold; padding: 5px; }
#product-view .tab-wrap .tab>li a.current,
#product-view .tab-wrap .tab>li a.current { color: #d9ac1c; border-bottom: 2px solid #d9ac1c; }
#product-view .tab-wrap .tab>li a.current:after { content: ''; position: absolute; left: 50%; border-width: 7px 7px 7px 7px; border-color: #d9ac1c transparent transparent transparent; border-style: solid; margin-left: -6px; top: 100%; display: block; }
#product-view .content { font-size: 1rem; margin-top: 30px; }
@media (min-width:992px) {
	#product-view .tab-wrap .tab>li:hover a { color: #d9ac1c; }
}
@media (max-width:1199px) {
	#product-view .txt-box { padding: 5% 5% 5% 10%; }
	#product-view .txt-box .h2 { font-size: 2.5rem; }
}
@media (max-width:991px) {
	#product-view .rellax:nth-child(1) { width: 50%; }
	#product-view .rellax:nth-child(2) { width: 5%; }
	#product-view .rellax:nth-child(3) { width: 5%; }
	#product-view .rellax:nth-child(4) { width: 60%; bottom: -10%; }
	#product-view .txt-box .h2 { font-size: 2rem; }
	.product-table-theme .table-style th,
	.product-table-theme .table-style td { padding: 10px 15px; font-size: 1rem; }
	.product-table-theme .table-style td { width: 100px }
	.product-table-theme .table-style th:first-child,
	.product-table-theme .table-style td:first-child { max-width: 50% }
}
@media (max-width:767px) { }
@media (max-width:565px) {
	#product-view .rellax:nth-child(1) { width: 60%; }
	#product-view .rellax:nth-child(2) { width: 10%; }
	#product-view .rellax:nth-child(3) { width: 10%; }
	#product-view .rellax:nth-child(4) { width: 80% }
	#product-view .pic-slider,
	#product-view .txt-box { width: 100%; padding: 0; margin-bottom: 10px; }
	#product-view .txt-box .h2 { font-size: 2rem; }
	#product-view .txt-box .h2:after { display: none; }
	#product-view .tab-wrap .tab>li { margin: 0 15px; }
	#product-view .tab-wrap .tab>li a { font-size: 1.1rem; }
	#product-view .tab-wrap .tab:after { top: 6px; height: 30px; }
	.product-table-theme .table-style { font-size: 0.875rem; }
	.product-table-theme .table-style th,
	.product-table-theme .table-style td { padding: 8px 10px; }
}

/* ============= Site Map ========== */
#sitemap .page-wrap { position: relative }
#sitemap .bg { position: absolute; z-index: -1; bottom: 0%; }
#sitemap .bg img { width: 100% }
#sitemap .list .h2 { font-size: 1.55rem; font-weight: bold; margin-bottom: 15px; display: inline-block; -moz-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
#sitemap .list .h2:after { content: ''; display: block; width: 100%; height: 3px; margin-top: 15px; background: -webkit-linear-gradient(90deg, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); background: linear-gradient(90deg, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3db25", endColorstr="#d9ac1c", GradientType=1); }
#sitemap .list { width: 100%; font-size: 0; text-align: center; margin: 7% auto; line-height: 2; font-weight: bold; }
#sitemap .list> li { display: inline-block; width: calc(100%/4 - 20px); margin: 0 10px 80px; font-size: 1.125rem; vertical-align: top; }
#sitemap .list> li >ul >li { display: block; }
#sitemap .list> li >ul >li a { color: #222; -moz-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: color 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width:992px) {
	#sitemap .list 	.h2:hover,
	#sitemap .list> li >ul >li a:hover { color: #d9ac1c }
}

@media (max-width:1199px) {
	#sitemap .bg img { width: 150% }
	#sitemap .list> li { width: calc(100%/2 - 20px); }
}
@media (max-width:767px) {
	#sitemap .bg img { width: 200% }
}
@media (max-width:565px) {
	#sitemap .bg { top: 0; }
	#sitemap .bg img { width: 300% }
	#sitemap .list> li { }
}
@media (max-width:400px) {
	#sitemap .list> li { width: calc(100% - 20px); }
}

/* ============= Team ========== */
#team { background: #f9f9f9; }
#team .h2 { text-align: center }
#team .txt { line-height: 2; font-size: 1.125rem; }
#team .txt.center { text-align: center; width: 80%; margin: 0 auto 5%; }
#team .grid { font-size: 0; margin: 0 -30px; }
#team .team-box { position: relative; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); padding: 15px 20px; margin: 0 0 30px; background: #fff; overflow: hidden; }
#team .team-box:before { content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: -webkit-linear-gradient(top, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); background: linear-gradient(top, rgba(227, 219, 37, 1) 0%, rgba(209, 136, 16, 1) 89%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3db25", endColorstr="#d9ac1c", GradientType=1); }
#team .team-box:after { content: url('../images/team_bg.png'); position: absolute; right: -14px; bottom: -28px; }
#team .team-box .pic-box,
#team .team-box .txt-box { display: inline-block; vertical-align: middle; margin: 0 20px; }
#team .team-box .pic-box { width: 165px; border-radius: 20px; overflow: hidden; }
#team .team-box .pic-box img { margin: 0 auto; WIDTH: 100%; }
#team .team-box .txt-box { width: calc(100% - 165px - 80px); }
#team .team-box .h3 { font-weight: bold }
@media (max-width:1199px) {
	#team .txt { font-size: 1rem; }
	#team .grid { margin: 0 -15px; }
	#team .team-box { width: calc(50% - 30px); margin: 0 15px 30px; }
}
@media (max-width:565px) {
	#team .txt { font-size: 1rem; }
	#team .grid { margin: 0; }
	#team .team-box { width: calc(100% - 30px); margin: 0 15px 20px; }
}


/* partner */

.partner-wrap{ position: relative; font-size: 0; text-align: center; }
.partner-list{ position: relative; top: 0;  }
.partner-list.bottom { position: absolute; top: 267px; }
.partner-list:nth-child(2){ margin-top: -10.5%}
.partner-list:nth-child(3){ margin-top: -10.5%}
.partner-list:nth-child(4){ margin-top: -10.5%}
.partner-list .box{ display: inline-block; width: calc(100%/5 + 10%); margin-left: -5%; margin-right: -5%}
.partner-list .box:after{ content: ''; display: block; width: 100%; height: 100%; background: #000  }
.partner-list .box path{ stroke: #d9ac1c; }
.partner-list .box pattern img{ }
.partner-list .box polygon{ }
.partner-list .box:nth-child(1) polygon{  }

@media (max-width:1199px) {
	.partner-list .box{  width: calc(100%/5 + 8%); margin-left: -4%; margin-right: -4%}
	/* .partner-list:nth-child(2){ margin-top: -14.5%;}
  .partner-list:nth-child(3){ margin-top: -14.5%;}
  .partner-list:nth-child(4){ margin-top: -14.5%;} */
}

@media (max-width: 991px) {
	.partner-list .box{ width:calc(100%/3); margin-left: 0; margin-right: 0}
	.partner-list div.box{display: none;}
	.partner-list div.box:after{ display: none; }

}

@media (max-width: 767px) {
	.partner-list svg.box{ height: auto!important; }
	.partner-list .box{width: calc(100%/3); }
	.partner-list:nth-child(2){ margin-top: -6%;}
  .partner-list:nth-child(3){ margin-top: -6%;}
  .partner-list:nth-child(4){ margin-top: -6%;}
}
@media (max-width: 565px) {
	.partner-list svg.box{ float: left; display: block;}
	.partner-list .box{width: calc(100%/2);}
	.partner-list:nth-child(2){ margin-top: 0%}
  .partner-list:nth-child(3){ margin-top: 0%}
  .partner-list:nth-child(4){ margin-top: 0%}
}



/* ============= About Us ========== */
#about { }
#about .wrap { font-size: 0; text-align: center }
#about .txt { font-size: 1.125rem; line-height: 2.2; }
#about .wrap .left-box,
#about .wrap .right-box,
#about .wrap .icon-box { display: inline-block; font-size: 1rem; vertical-align: middle; text-align: left }
#about .wrap .left-box { padding: 0 5%; width: 60%; }
#about .wrap .right-box { width: 40%; }
#about .wrap .right-box img { width: 100%; }

/* icon */
#about .icon-wrap { overflow: hidden; }
#about .icon-wrap .container { padding: 10% 15px; }
#about .icon-wrap .bg { position: absolute; width: 100%; background: url('../images/about_bg.jpg') no-repeat center center; z-index: -1; overflow: hidden; padding-bottom: 30%; }
#about .wrap .icon-box { vertical-align: top; color: #fff; transform: rotateY(90deg); -moz-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transition: transform 1s .5s; -moz-transition: transform 1s .5s; -webkit-transition: transform 1s .5s; width: calc(50%); padding: 0 0%; }
#about .wrap .icon-box:nth-child(2),
#about .wrap .icon-box:nth-child(2) .h2{ text-align: right }
#about .wrap .icon-box.scroll-view { transform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
#about .wrap .icon-box .h2 { }
#about .wrap .icon-box .txt{ color: #222; }


/* history */
#about .history { padding: 5% 0; }
#about .history .h2 { text-align: center; }
#about .history .slider { margin: 30px auto }
#about .history .item { padding: 0 10%; position: relative; display: block; border-right: 1px solid #ddd; }
#about .history .slick-slide:nth-child(even) .item { border: 0; }
#about .history .item .h3 { font-size: 2rem; color: #d9ac1c; font-weight: 700; margin-top: 0 }
#about .history .item li { font-size: 0; margin-bottom: 20px }
#about .history .item .month { width: 85px; font-size: 1.65rem; color: #5a4626; font-weight: 700; display: inline-block; vertical-align: top; position: relative; margin-right: 15px; }
#about .history .item .month:after { content: ''; width: 12px; height: 2px; display: inline-block; vertical-align: top; background: #ccc; position: absolute; right: 2px; top: 16px; }
#about .history .item .txt { display: inline-block; font-size: 1.125rem; display: inline-block; width: calc(100% - 100px); vertical-align: top; }
@media (max-width:1480px) {
	#about .icon-wrap .bg { height: 401px; }
}
@media (max-width:1199px) {
	#about .icon-wrap .bg { background-size: auto 324px; }
	#about .txt { font-size: 1rem; line-height: 1.8; }
}
@media (max-width:991px) {
	#about .icon-wrap .container {  }
	#about .icon-wrap .bg {  background-size: auto 100%;  height: 320px;;;}
	#about .wrap .left-box,
	#about .wrap .right-box { width: 100%; padding: 0 30px; }
	#about .history .item .month { font-size: 1.2rem; width: 75px }
	#about .history .item .txt { width: calc(100% - 90px); line-height: 1.6; font-size: 1rem; }
	#about .txt { line-height: 2.2; }
}
@media (max-width:767px) {
	#about .icon-wrap .bg { background-size: cover; background-position: 0 center; height: 320px;}
	#about .wrap .icon-box { width: calc(50% - 20px); margin: 0 10px; }
	#about .wrap .icon-box { width: calc(100% - 20px); margin: 0 10px; }
	#about .wrap .icon-box:nth-child(2),
	#about .wrap .icon-box:nth-child(2) .h2{ text-align: left }
	#about .txt { line-height: 1.8; }
}
@media (max-width:565px) {
	#about .wrap { margin-bottom: 5% }
	#about .icon-wrap .container { padding-top: 15%; padding-bottom: 7%; }
	#about .wrap .left-box,
	#about .wrap .right-box { padding: 0 }
	#about .icon-wrap .bg { height: 360px; background-position: 22% center; }

	#about .history .item { border: 0;  padding: 35% 0;padding: 0 5%; }
	#about .history .item .month { width: 60px; margin-right: 7px; }
	#about .history .item .month:after { top: 10px; right: 0; }
}
@media (max-width:400px) {
	#about .icon-wrap .container { padding-top: 20% }
	#about .icon-wrap .bg { padding-bottom: 170%; }
}

/* ============= Contact ========== */
#contact { background: url('../images/contact_map_bg.jpg') center top no-repeat; background-size: cover; background-attachment: fixed }
#contact .map-wrap { font-size: 0; padding: 5% 0; color: #432c06 }
#contact .map-wrap .logo-box { text-align: center; margin-bottom: 5% }
#contact .map-wrap .wrap { font-size: 0; text-align: center}
#contact .map-wrap .left-box,
#contact .map-wrap .right-box { font-size: 1.125rem; display: inline-block; width: 50%; vertical-align: top }
#contact .map-wrap .box { font-size: 1rem; width: 20%; color: #222; display: inline-block;  }
#contact .map-wrap .box .h3 { font-size: 1.65rem; font-weight: bold; margin: 0;  display: inline-block; vertical-align: middle}
#contact .map-wrap .box .txt {  display: inline-block; margin: 0; font-weight: bold; color: #432c06; vertical-align: middle }
#contact .map-wrap .box .txt:before { content: url('../images/contact_icon.png'); display: inline-block; margin-right: 10px; vertical-align: middle }
#contact .map-wrap .info{ color: #432c06; font-size: 1.3125rem; text-align: center; margin: 50px auto; font-weight: bold; }
#contact .map-wrap .info a{ color: #432c06; }
#contact .map-wrap .left-box ul { line-height: 2.5; margin-bottom: 10px; }
#contact .map-wrap .left-box ul span { font-weight: bold; }
#contact .map-wrap .left-box ul a { color: #432c06; }
#contact .map-wrap .left-box ul i { display: none; }
#contact .from-wrap { padding: 5% 8%; background: url('../images/contact_bg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed }
#contact .from-wrap .h3 { text-align: center; font-weight: bold }
#contact .from-wrap .msg-welcome { margin: 10px auto; font-weight: bold; margin-bottom: 20px; padding-left: 15px; line-height: 2; text-align: center; }
#contact .from-wrap .star { font-size: 1rem; line-height: 1; color: #d9ac1c; display: inline-block; top: 15px; left: 0px; font-weight: 400; font-style: normal; margin: 0; margin-right: 5px; }
#contact .from-wrap .form-box { display: block; position: relative; margin: 10px; }
#contact .from-wrap .form-box.form-half { display: inline-block; vertical-align: top; width: calc(50% - 24px); }
#contact .from-wrap .form-box.form-sex { display: inline-block; vertical-align: top; width: calc(50% - 24px); padding: 0px 170px 0px 0px; }
#contact .from-wrap .form-box.form-sex .sex-group { position: absolute; right: 9px; line-height: 45px; width: 155px; bottom: 0; }
#contact .from-wrap .form-box.form-sex .sex-group .radio-style { max-width: 50%; }
#contact .from-wrap .label-style { font-size: 1.125rem; color: #222; padding: 0; display: block; line-height: 45px; width: 100%; left: 0; top: 8px; text-align: left; font-weight: bold; }

/* #contact .from-wrap .form-box.form-half:nth-child(odd) { }
#contact .from-wrap .form-box.form-half:nth-child(even) { }
#contact .from-wrap .form-box.form-half:nth-child(even) .label-style { width: 120px; } */
#contact .from-wrap .input-style { color: #666; background: #fff; height: 46px; padding: 0 10px; width: 100%; display: block; outline: none; border-radius: 0; border: 0; }
#contact .from-wrap .input-style:focus { border: 1px solid #d18910; }
#contact .from-wrap .radio-style { padding: 0; margin: 0 5px; display: inline-block; font-weight: bold; }
#contact .from-wrap .radio-style input { outline: none; display: none; }
#contact .from-wrap .radio-style input + span { display: inline-block; vertical-align: baseline; border: 1px solid #ccc; background: #fff; height: 24px; width: 24px; padding: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: background 0.15s; -o-transition: background 0.15s; -webkit-transition: background 0.15s; transition: background 0.15s; margin: 0 3px -5px 0; }
#contact .from-wrap .radio-style input + span i { display: block; width: 100%; height: 100%; background: #d18910; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: transform 0.2s; -o-transition: transform 0.2s; -webkit-transition: transform 0.2s; transition: transform 0.2s; }
#contact .from-wrap .radio-style input:checked + span { }
#contact .from-wrap .radio-style input:checked + span i { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
#contact .from-wrap .radio-style:active input + span { border-color: #666; }
#contact .from-wrap .radio-style:active input + span i { background-color: #666; }
#contact .from-wrap .radio-style:active input:checked + span { border-color: #666; background: #fff; }
#contact .from-wrap .radio-style:active input:checked + span i { background-color: #666; }
#contact .from-wrap .form-box .item-group { line-height: 40px; }
#contact .from-wrap .form-box .item-group .checkbox-style { max-width: 50%; }
#contact .from-wrap .textarea-style { color: #666; background: #Fff; height: 100px; padding: 10px; width: 100%; display: block; outline: none; border: 0; }
#contact .from-wrap .textarea-style:focus { border: 1px solid #d18910; }
#contact .from-wrap .select-style { color: #666; padding: 0 20px 0 10px; display: block; width: 100%; height: 46px; outline: none; border: 0; }
#contact .from-wrap .select-style::-ms-expand { display: none; }
#contact .from-wrap .select-style:focus { border: 1px solid #d18910; }
#contact .from-wrap .form-box.code { max-width: calc(50% - 24px); width: 100%; display: inline-block; vertical-align: middle; padding-right: 130px; }
#contact .from-wrap .codeimg { width: 115px; position: absolute; bottom: 0; right: 0; }
#contact .from-wrap .form-bottom { position: relative; }
#contact .from-wrap .form-bottom .btn-submit { border: 0; background: transparent; position: absolute; right: 10px; bottom: 10px; display: inline-block; width: 145px; font-weight: 100; font-size: 0.875rem; z-index: 0; line-height: 50px; color: #fff; text-align: center; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
#contact .from-wrap .form-bottom .btn-submit:before { content: url('../images/btn_back.svg'); position: absolute; left: 0px; top: 0px; z-index: -1 }
#contact .from-wrap .form-bottom .btn-submit:after { content: url('../images/btn_shadow.svg'); position: absolute; color: #ffffff; left: 10px; top: 10px; z-index: -2; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
#contact .finish-msg { padding: 50px 0; display: block; text-align: center; }
#contact .finish-msg .fc-ti { font-size: 2rem; line-height: 1; font-weight: bold; margin: 0 auto 15px auto; }
#contact .finish-msg .fc-text { font-size: 1.125rem; margin: 0 auto 15px auto; }
@media (min-width:992px) {
	#contact .from-wrap .form-bottom .btn-submit:hover { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); }
	#contact .from-wrap .form-bottom .btn-submit:hover:after { left: 5px; top: 5px; }
	#contact .map-wrap .left-box ul a:hover,
	#contact .map-wrap .box a.txt:hover { text-decoration: underline; }
}
@media (max-width:1600px) {
	#contact .map-wrap .left-box { width: 40% }
	#contact .map-wrap .right-box { width: 60% }
}
@media (max-width:1199px) { }
@media (max-width:991px) {
	#contact .map-wrap .logo-box { width: 160px; margin: 0 auto 20px; }
	#contact .map-wrap .logo-box img { width: 100%; }
	#contact .map-wrap { padding: 5%; }
	#contact .map-wrap .left-box,
	#contact .map-wrap .right-box { width: 100%; }
	#contact .map-wrap .box { border-top: 1px solid #fff }
	#contact .map-wrap .info {font-size: 1.112rem; }
	#contact .map-wrap .box .h3 { font-size: 1.375rem; }
	#contact .map-wrap .box .h3,
	#contact .map-wrap .box .txt { display: inline-block; }
	#contact .map-wrap .box .txt:before { display: none; }
	#contact .map-wrap .box .h3:before { content: url('../images/contact_icon.png'); display: inline-block; margin-right: 10px; vertical-align: middle }
	#contact .from-wrap { padding: 5%; }
	#contact .from-wrap .msg-welcome { margin: 17px auto; padding: 0; }
	#contact .from-wrap .msg-welcome span { display: inline; }
	#contact .from-wrap .form-bottom { padding-right: 0; }
	#contact .from-wrap .form-bottom .btn-submit { }
	#contact .from-wrap .form-box.form-half { width: calc(100% - 24px); display: block; }
	#contact .from-wrap .form-box.form-half.odd { margin-right: 0; }
	#contact .from-wrap .form-box.form-half.even { margin-right: 0; }
	#contact .from-wrap .form-box.form-sex { width: 100%; display: block; }
	#contact .from-wrap .form-box.form-half:nth-child(even) { }
	#contact .from-wrap .form-box.form-half:nth-child(even) .label-style { width: 185px; }
	#contact .from-wrap .form-box.code { max-width: calc(70% - 24px); }
	#contact .from-wrap .form-bottom .btn-submit { width: 160px; }
}
@media (max-width:767px) {
	#contact .map-wrap .box .h3 { font-size: 0.8125rem }
	#contact .map-wrap .info { font-size: .75rem; }
	#contact .map-wrap .box .h3,
	#contact .map-wrap .box .txt { display: block; }
	#contact .from-wrap { }
	#contact .from-wrap .form-box.code { max-width: calc(100% - 24px); }
	#contact .from-wrap .form-bottom { padding-bottom: 100px; }
	#contact .from-wrap .form-bottom .btn-submit { right: 50%; margin-right: -80px; }
}
@media (max-width:565px) {
	#contact .map-wrap { padding: 20px; }
	#contact .from-wrap { padding: 30px 0px; }
	#contact .map-wrap .logo-box { width: 120px; margin: 0 auto 20px; }
	#contact .map-wrap .box { width: 50%; }
	#contact .map-wrap .box .h3 { font-size: 1.125rem; }
	#contact .map-wrap .box .txt { font-size: 1rem; padding-left: 33px; }
	#contact .map-wrap .left-box ul { font-size: 0.975rem; padding-left: 33px; }
	#contact .map-wrap .left-box ul span { font-weight: normal }
	#contact .map-wrap .left-box ul i { display: inline-block; margin-right: 10px }
	#contact .from-wrap .codeimg { top: auto; bottom: 0; }
	#contact .from-wrap .label-style { line-height: 40px; top: auto; font-size: 1rem; }
	#contact .from-wrap .radio-style { margin: 0 5px; }
}

/* ============= News ========== */
#news .p-info-list { padding: 0 30px; display: block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; }
#news .p-info-list .grid { margin: 0px -30px; font-size: 0 }
#news .p-info-list .info-box { font-size: 1rem; position: relative; background: #fff; width: calc(100%/3 - 60px); margin: 10px 30px 50px; border: 1px solid #e8e8e8; background: white; padding: 20px 30px; -webkit-transition: background 0.5s; -o-transition: background 0.5s; transition: background 0.5s; }
#news .p-info-list .info-box .info-box-title { display: inline-block; color: #666; font-size: 1.25rem; line-height: 1.5; -webkit-transition: color 0.5s; -o-transition: color 0.5s; transition: color 0.5s; }
#news .p-info-list .info-box .line-bar { width: 24px; height: 1px; background: #000000; margin: 20px 0; -webkit-transition: width 1s cubic-bezier(0.7, 0, 0.3, 1) 0.2s; -o-transition: width 1s cubic-bezier(0.7, 0, 0.3, 1) 0.2s; transition: width 1s cubic-bezier(0.7, 0, 0.3, 1) 0.2s; }
#news .p-info-list .info-box-time { position: relative; z-index: 0; }
#news .p-info-list .info-box-time span { font-weight: 600; background: -webkit-linear-gradient(left, #d9ac1c 0, #dcc632 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#news .p-info-list .info-box-time .info-box-btn { color: white; position: absolute; right: 20px; -webkit-transition: text-shadow 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: text-shadow 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: text-shadow 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
#news .p-info-list .info-box-time .info-box-btn:after { content: ""; display: block; width: 120px; height: 40px; z-index: -1; position: absolute; left: -20%; top: -40%; -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); background: -webkit-gradient(linear, left top, right top, from(#e3db25), color-stop(39%, #f8b241), color-stop(89%, #d9ac1c)); background: -webkit-linear-gradient(left, #e3db25 0%, #f8b241 39%, #d9ac1c 89%); background: -o-linear-gradient(left, #e3db25 0%, #f8b241 39%, #d9ac1c 89%); background: linear-gradient(90deg, #e3db25 0%, #f8b241 39%, #d9ac1c 89%); }
@media (min-width:992px) {
	#news .p-info-list .info-box:hover .line-bar { width: 100%; }
	#news .p-info-list .info-box:hover .info-box-title { color: #000 }
	#news .p-info-list .info-box:hover .info-box-time .info-box-btn { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) }
}
@media (max-width:1199px) {
	#news .grid { margin: 0px -15px; }
	#news .p-info-list .info-box { width: calc(100%/3 - 30px); margin: 10px 15px 30px; }
}
@media (max-width:991px) {
	#news .grid { margin: 0px -15px; }
	#news .p-info-list .info-box { width: calc(100%/2 - 30px); margin: 10px 15px 20px; }
	#news .p-info-list .info-box-time .info-box-btn { opacity: 1 }
}
@media (max-width:640px) {
	#news .grid { margin: 0px -15px; }
	#news .p-info-list .info-box { width: calc(100% - 30px); margin: 10px 15px 15px; }
	#news .p-info-list .info-box-time .info-box-btn { opacity: 1 }
}
#news-view { }
#news-view .hexagon-time { display: inline-block; position: relative; z-index: 1; width: 120px; height: 40px; padding: 15px 0px; color: #fff; font-size: 13px; letter-spacing: 1px; font-weight: 600; text-align: center; left: 13px; }
#news-view .hexagon-time::before { content: ""; display: block; width: 120px; height: 40px; z-index: -1; position: absolute; left: 0; top: 0; -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); background: #e3db25; background: -webkit-gradient(linear, left top, right top, from(#e3db25), color-stop(39%, #f8b241), color-stop(89%, #d9ac1c)); background: -webkit-linear-gradient(left, #e3db25 0%, #f8b241 39%, #d9ac1c 89%); background: -o-linear-gradient(left, #e3db25 0%, #f8b241 39%, #d9ac1c 89%); background: linear-gradient(90deg, #e3db25 0%, #f8b241 39%, #d9ac1c 89%); }
#news-view .p-news-area-title { text-align: left; border-bottom: 3px solid #efefef; padding-bottom: 11px; }
#news-view .p-news-area-title .h3 { display: inline-block; margin-left: 40px; font-size: 1.65rem; line-height: 1.6; font-weight: bold }
#news-view .p-back-to-list { display: inline-block; padding: 50px 0px 20px 0px; }
@media (max-width:1199px) {
	#news-view .p-news-area-title .h3 { margin-left: 0; display: block; }
}
@media (max-width:737px) {
	#news-view .p-news-area-title .h3 { font-size: 1.25rem; }
}

/* 2019.12.06 */
/* header */
#header{
	background: rgba(27, 28, 28, .9);
	border-bottom: none;
}
#header .menu>ul>li>a{
	color: #fff;
}
#header .right-box .search-wrap input{
	border: none;
}
#header .right-box .search-wrap .search-btn svg{
	fill: #fff;
}
#header .right-box .lang-wrap .lang-toggle .nowLang{
	color: #fff;
}
#header .right-box .gap{
	background: #fff;
}
#header .right-box .lang-wrap .lang-toggle:after{
	border-color: #fff transparent transparent transparent;
}
#header .right-box{
	right: 65px;
}
.g-wrap{
	padding-top: 124px;
}
@media (min-width:992px){
	#header .menu > ul > li ul{
		width: 210px;
	}
}
@media (max-width: 1481px){
	#header .right-box{
		top: 30px;
	}
	.g-wrap{
		padding-top: 100px;
	}
}
@media (max-width: 1199px){
	#header{
		background: rgba(27, 28, 28, 1);
	}
}
@media (max-width: 991px){
	#header .right-box .search-icon svg{
		fill: #fff;
	}
	#header .right-box{
		right: 36px;
	}
	#header .search-outter {
    background: rgba(0, 0, 0, 0.9);
	}
}
@media (max-width:565px){
	#header .right-box{
		top: 20px;
		right: 25px;
	}
	#header .logo{
		left: 90px;
		transform: unset;
		-moz-transform: unset;
  	-webkit-transform: unset;
	}	
	#header .right-box {
    right: 10px;
	}
	.g-wrap{
		padding-top: 70px;
	}
}
@media (max-width: 320px){
	#header .logo {
    width: 20%;
    left: 90px;
	}
}
/* 首頁 */
.i-news{
	background-image: none;
	background-color: #fff;
	padding: 8% 0 14%;
}
.i-mission:before,.i-mission:after{
	display: none;
}
.i-mission{
	padding: 16% 0;
	position: relative;
}
.i-mission .txt-box{
	position: absolute;
	top: 50%;
	left: 8%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 550px;
	height: 300px;
	padding: 80px;
	background:rgba(28, 29, 29, 0.7);
	color: #fff;
	
}
.i-mission .txt-box h3{
	font-size: 36px;
	margin: 20px 0;
}
.i-mission .txt-box p{
	font-size: 22px;
}
.i-news .container-1400{
	text-align: center;
}
.i-news .container-1400 h3{
	font-size: 36px;
	color: #1b1c1c;
	font-weight: 600;
}
.i-news .container-1400 h3::after{
	content: '';
	display: block;
	width: 25px;
	height: 2px;
	background: #1b1c1c;
	margin: 20px auto 40px;
}
.i-news .container-1400 p{
	font-size: 22px;
	color: #1b1c1c;
	max-width: 960px;
	margin: auto;
}
.i-news .container-1400 .more-btn{
	display: block;
	margin: 85px auto 0;
	width: 160px;
	color: #1b1c1c;
	padding: 10px 20px;
	background: #f4ba19;
	border-radius: 20px;
	font-size: 18px;
	font-weight: 600;
	transition: color .3s ease-in-out;
	-moz-transition: color .3s ease-in-out;
  -webkit-transition: color .3s ease-in-out;
}
.i-news .container-1400 .more-btn:hover{
	color: #fff;
}
@media (max-width: 1199px){
	.i-mission .txt-box{
		width: 450px;
		height: 250px;
		padding: 45px;
	}
	.i-mission .txt-box p{
		font-size: 20px;
	}
}
@media (max-width: 991px){
	.i-news{
		padding: 5% 0 14%;
	}
	.i-news .container-1400 p{
		font-size: 20px;
		color: #1b1c1c;
	}
	.i-mission{
		padding: 22% 0;
	}
	.i-mission .txt-box{
		width: 450px;
		height: 250px;
		padding: 45px;
	}
	.i-mission .txt-box p{
		font-size: 20px;
	}
	.i-mission{
		padding: 0;
		height: 300px;
	}
}
@media (max-width: 767px){
	.i-mission .txt-box{
		text-align: center;
		width: 370px;
		height: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		padding: 20px;
	}
	.i-mission .txt-box p{
		font-size: 18px;
	}
	.i-news .container-1400 .more-btn{
		font-size: 16px;
	}
}
@media (max-width: 399px){
	.i-mission .txt-box{
		width: 300px;
		padding: 20px 10px;
	}
	.i-mission .txt-box p{
		font-size: 16px;
	}
}
/* 產品詳細 */
.text-edit img{
	display: inline-block;
}
/* 經營團隊 */
.h2 .color {
	font-size: 2.25rem;
	font-weight: bold;
	background: none;
	-webkit-text-fill-color: #000;
}
#team .txt.center{
	margin: 50px auto 130px;
}
.partner-wrap {
	margin: 90px 0 150px;
}
/* 聯絡我們 */
#contact .map-wrap {
	padding: 10% 0;
}
/* 產品優勢 */
#news .p-info-list .info-box {
	width: calc(100%/2 - 60px);
	padding: 35px 170px 35px 35px;
}
#news .p-info-list .info-box-time .info-box-btn{
	right: -110px;
	bottom: 10px;
	/* padding-left: 30px; */
	color: #f4ba19;
}
#news .p-info-list .info-box{
	transition: all .3s ease-in-out;
}
#news .p-info-list .info-box:hover{
	border: 1px solid #f4ba19;
}
#news .p-info-list .info-box:hover .info-box-time .info-box-btn{
	color: #fff;
	text-shadow: unset;
	-webkit-text-shadow: unset;
	-webkit-transition: unset;
  -o-transition: unset;
  transition: unset;
}
#news .p-info-list .info-box:hover .info-box-time .info-box-btn::after{
	background: #f4ba19;
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
#news .p-info-list .info-box-time .info-box-btn:after{
	background: #fff;
	border: 1px solid #f4ba19;
}
#news .p-info-list{
	max-width: 1200px;
	margin: auto;
	padding: 0;
}
/* 產品列表 */
#product-list .pro-box:hover .txt-box .btn-more:before{
	background: #f4ba19;
}
#news .p-info-list .info-box .info-box-title{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 1199px){
	.page-wrap{
		padding: 30px 20px;
	}
	#news .p-info-list .info-box{
		padding: 35px;
	}
	#news .p-info-list .info-box-time{
		text-align: right;
		margin-top: 30px;
	}
	#news .p-info-list .info-box-time .info-box-btn{
		position: relative;
		right: unset;
		bottom: unset;
		display: inline-block;
		margin-right: 30px;
	}
}
@media (max-width: 991px){
	#news .p-info-list .info-box .info-box-title{
		font-size: 18px;
	}
	#news .p-info-list .info-box .info-box-title{
		-webkit-line-clamp: 3;
	}
}
@media (max-width: 767px){
	#news .p-info-list .info-box .info-box-title{
		font-size: 16px;
	}
	#news .p-info-list .info-box {
		width: 100%;
		margin: 0;
		padding: 20px;
	}
	#news .p-info-list .info-box-time .info-box-btn {
    margin-right: 55px;
	}
}
/* 關於我們 */
#about .icon-wrap .bg{
	background: url(../images/about_pic.jpg) no-repeat center center;
}
#about .icon-wrap .container{
	padding: 13% 15px;
}
#about .icon-wrap .container .wrap h3{
	font-size: 46px;
	text-align: center;
	color: #fff;
	margin: 0;
}
#about .history .h2{
	margin-bottom: 60px;
}
@media (max-width: 1399px){
	#about .icon-wrap .container{
		padding: 14% 15px;
	}
	#about .icon-wrap .container .wrap h3{
		font-size: 40px;
	}
}
@media (max-width: 1199px){
	#about .icon-wrap .container{
		padding: 16% 15px;
	}
}
@media (max-width: 991px){
	#about .icon-wrap {
		display: block;
		height: 320px;
		position: relative;
	}
	#about .icon-wrap .container{
		padding: unset;
	}
	#about .icon-wrap .container .wrap h3{
		width: 100%;
		font-size: 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
  	-webkit-transform: translate(-50%,-50%);
	}
}
@media (max-width: 599px){
	#about .icon-wrap .container .wrap h3{
		font-size: 26px;
		padding: 0 20px;
	}
	#about .history .h2{
		margin-bottom: 40px;
	}
}
@media (max-width: 400px){
	#about .icon-wrap .bg {
		padding-bottom: 0;
	}
}
/* 我們的優勢 */
#news-view .hexagon-time::before{
	background: #f4ba19;
}
#news-view .hexagon-time{
	color: #222;
}
#news-view .hexagon-time span{
	position: absolute;
	display: inline-block;
	width: 100%;
	left: 40px;
	font-size: 20px;
	top: 7px;
}
#news-view .p-news-area-title{
	border-bottom: none;
}
@media (max-width: 767px){
	#news-view .hexagon-time span{
		left: 0;
		top: 7px;
	}
	#news-view .p-news-area-title{
		margin-bottom: 15px;
	}
}


/* footer */
#footer{
	background: #1b1c1c;
}
#footer .top-box .link-box>li a,#footer .top-box .link-box>li>ul>li>a{
	color: #fff;
}
#footer .top-box .logo-box{
	border-right: none;
	margin-right: 0%;
}
#footer .top-box .link-box {
	width: 55%;
}
#footer .top-box .link-box>li{
	padding: 0 4%;
}
#footer .top-box .qr-code{
	width: 20%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
#footer .top-box .qr-code .pic{
	width: 120px;
	margin: auto;
}
#footer .top-box .qr-code .pic img{
	max-width: 100%;
}

#footer .top-box .qr-code span{
	display: inline-block;
	color: #fff;
	font-size: 16px;
	margin-top: 10px;
}
#footer .copyright{
	background: #1b1c1c;
	color: #fff;
}
@media (max-width: 991px){
	#footer .top-box .link-box {
    width: 65%;
	}
	#footer .top-box .logo-box{
		width: 18%;
	}
	#footer .top-box .qr-code{
		width: 17%;
	}
	#footer .top-box .qr-code .pic{
		width: 100px;
		height: 100px;
		margin: auto;
	}
	#footer .top-box .qr-code .pic img{
		max-width: 100%;
	}
	#footer .top-box .qr-code span{
		font-size: 15px;
	}
}
@media (max-width: 767px){
	#footer .top-box .link-box {
    width: 75%;
	}
	#footer .top-box .logo-box{
		width: 25%;
	}
	#footer .top-box .qr-code{
		width: 100%;
		display: block;
	}
	#footer .top-box .link-box>li{
		padding: 0 3%;
	}
}
@media (max-width: 565px){
	#footer .top-box .link-box {
    width: 100%;
	}
	#footer .top-box .logo-box{
		width: 45%;
		margin: auto;
	}
	#footer .top-box .qr-code{
		margin-top: 15px;
	}
	#footer .top-box .qr-code .pic{
		width: 70px;
		height: 70px;
	}
	#footer .top-box .qr-code span{
		font-size: 13px;
	}
}

/* 2019.12.19 */
/* header */
#header{
	background: rgb(27, 28, 28);
}
@media (min-width: 992px){
	#header.scroll-view{
		background: rgb(27, 28, 28);
	}
	#header .menu>ul>li>a{
		padding: 25px 50px;
	}
	#header .logo{
		width: 120px;
		height: 75px;
		margin: 11.5px 0 11.5px 20px;
	}
	#header .right-box{
		top: 32px;
	}
}
@media (max-width: 1199px){
	#header .right-box{
		right: 35px;
	}
}
.g-wrap{
	padding-top: 100px;
}
@media (max-width: 565px){
	.g-wrap {
    padding-top: 70px;
	}
	#header .logo a{
		height: 80%;
    margin-top: 8px;
	}
	#header .right-box {
    right: 10px;
}
}
/* footer */
#footer .top-box .link-box>li>ul>li>a{
	font-weight: 500;
	font-size: 15px;
}
#footer .top-box .link-box>li{
	width: 22%;
	padding: 0 0 0 4%;
}
#footer .top-box .link-box>li:first-child{
	width: 34%;
}
@media (max-width: 1199px){
	#footer .top-box .logo-box{
		width: 18%;
	}
	#footer .top-box .link-box{
		width: 62%;
	}
	#footer .top-box .qr-code{
		width: 18%;
	}
}
@media (max-width: 991px){
	#footer .top-box .logo-box{
		width: 100%;
		background-size: contain;
		height: 110px;
		margin-bottom: 20px;
	}
	#footer .top-box .link-box{
		width: 82%;
	}
}
@media (max-width: 767px){
	#footer .top-box .logo-box{
		width: 100%;
		background-size: contain;
		height: 110px;
	}
	#footer .top-box .link-box{
		width: 100%;
	}
	#footer .top-box .link-box>li{
		width: auto;
		padding: 0 4% 0 4%;
	}
	#footer .top-box .link-box>li:first-child{
		width: auto;
	}
	#footer .top-box .logo-box{
		height: 90px;
	}
	#footer .top-box .qr-code{
		width: 100%;
		margin-top: 20px;
	}
	#footer .top-box .qr-code .pic{
		width: 70px;
		height: 70px;
	}
}
@media (max-width: 699px){
	#footer .top-box .link-box>li{
		width: 33.33%;
		margin-bottom: 15px;
	}
	#footer .top-box .link-box>li:first-child{
		width: 100%;
	}
	#footer .top-box .link-box> li:last-child a{
		width: 100%;
		margin-right: 0;
	}
	#footer .top-box .link-box>li:last-child{
		width: 33.33%;
	}
}
@media (max-width: 565px){
	#footer .top-box .link-box>li{
		padding: 0 2.5%;
	}
	#footer .top-box .logo-box {
    height: 65px;
	}
	#footer .top-box .link-box>li>a{
		font-size: 16px;
	}
	#footer .top-box .qr-code{
		width: 100%;
	}
	#footer .top-box .qr-code .pic{
		width: 60px;
		height: 60px;
	}
}
@media (max-width: 425px){
	#footer .top-box .link-box>li{
		padding: 0 4px;
	}
	#footer .top-box .link-box>li>ul>li>a{
		font-size: 12px;
	}
}
/* 關於我們 */
#about .history .item{
	border-right: none;
}
@media (max-width: 767px){
	#team .txt.center{
		width: 100%;
		margin: 50px auto;
	}
	.partner-wrap{
		margin: 50px 0 100px;
	}
}
/* 聯絡我們 */
#contact .map-wrap{
	padding: 8% 0;
}
#contact .map-wrap .info{
	margin: 80px auto 0;
}
#contact .map-wrap .info ul{
	font-size: 0;
	text-align: center;
}
#contact .map-wrap .info ul li{
	display: inline-block;
	vertical-align: middle;
	font-size: 20px;
	margin-bottom: 25px;
	font-family: '微軟正黑體';
	font-weight: 500;
}
#contact .map-wrap .info ul li:nth-child(1){
	margin-right: 35px;
}
#contact .map-wrap .info ul .l-3{
	margin-right: 35px;
}
#contact .from-wrap .form-bottom .btn-submit{
	color: #000;
	font-weight: bold;
	font-size: 17px;
}
#contact .from-wrap .form-bottom .btn-submit:hover{
	text-shadow: none;
	color: #fff;
}
#contact .from-wrap .form-bottom .btn-submit:after{
	display: none;
}
#contact .from-wrap .form-bottom .btn-submit:before{
	top: 3px;
}
@media (max-width: 991px){
	#contact .from-wrap .form-bottom .btn-submit:before{
		left: 8px;
	}
	#contact .map-wrap .box{
		border-top: none;
	}
}
@media (max-width: 767px){
	#contact .map-wrap .info ul li{
		font-size: 16px;
	}
}
@media (max-width: 499px){
	#contact .map-wrap .info ul{
		text-align: left;
		padding-left: 20px;
	}
	#contact .map-wrap .info ul li span{
		display: block;
	}
	#contact .map-wrap .box{
		width: 25%;
	}
	#contact .map-wrap .box .h3:before{
		margin: 0 5px;
	}
}
/* 產品資訊 */
#product-list .pro-box .txt-box .btn-more{
	color: #000;
}
#product-list .pro-box .txt-box .btn-more:before{
	background: #f4ba19;
}
.btn-more:hover{
	text-shadow: none;
}
#product-list .pro-box{
	vertical-align: top;
	display: inline-block;
	width: calc(100%/2 - 52px);
}
.btn-more:hover{
	text-shadow: none;
}
#product-list .list{
	text-align: center;
}
@media (max-width: 1399px){
	#product-list .pro-box .txt-box .h3{
		font-size: 28px;
	}
}
@media (max-width: 991px){
	#product-list .pro-box .txt-box .h3{
		font-size: 26px;
		margin-bottom: 15px;
	}
}
@media (max-width: 649px){
	#product-list .container-1400{
		padding: 0;
	}
	#product-list .pro-box .txt-box .h3{
		font-size: 20px;
	}
	#product-list .pro-box{
		width: 100%;
		margin: 0 0 30px;
	}
	#product-list .pro-box .txt-box .h3 {
    overflow: unset;
    display: inline-block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
	}
}

/* 產品詳細 */
.btn-back{
	color: #000;
}
.btn-back::after{
	display: none;
}
#product-view .btn-back{
	font-size: 16px;
	font-weight: 600;
}
.btn-back:hover{
	text-shadow: none;
}
@media (max-width: 619px){
	#product-view .container{
		padding: 0;
	}
	#product-view .tab-wrap .tab>li a{
		font-size: 15px;
	}
}
@media (max-width: 499px){
	#product-view .tab-wrap .tab>li a{
		font-size: 13px;
	}
}
@media (max-width: 375px){
	#product-view .page-wrap{
		padding: 30px 13px;
	}
	#product-view .tab-wrap .tab>li a{
		font-size: 12px;
		padding: 5px 0;
	}
}
/* 產品優勢 */
#news .p-info-list .info-box-time .info-box-btn{
	color: #000;
}
#news .p-info-list .info-box-time .info-box-btn:after{
	background: #f4ba19;
}
@media (max-width: 767px){
	#news .p-banner .h2{
		width: 100%;
		text-align: center;
	}
}
@media (max-width: 320px){
	#news .p-banner .h2{
		font-size: 24px;
	}
}