.index-company ul, .index-business ul, .index-products ul, .list, .site-map ul, .contact-list, .contact-list ul, .form-style, .product-list {
	margin: 0;
	padding: 0;
	list-style-type: none
}
.index-company, .index-business, .index-products, .index-company a span, .pageLink span, .pageLink a, .input-animate input, .input-animate textarea {
	box-sizing: border-box
}
.list .news-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}
.index-company a, .index-business li, .site-map h3, .form-style input[type="submit"] {
	padding: 5px;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(90deg, #da2126 0, #b8395d 100%)
}
.index>div+div {
	margin-top: 50px
}
.index-bg {
	height: 100vh;
	background: url("../images/index/bg.jpg") 60% 50% no-repeat, url("../images/index-bg-repeat.jpg") 60% 50% repeat-y
}
.index-bg main {
	padding-bottom: 50px
}
.index-carousel {
	outline: none
}
.index-company h2, .index-business h2, .index-products h2 {
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0;
	color: #fff;
	text-shadow: 0 0 15px rgba(0,0,0,0.4)
}
.index-company h2 span, .index-business h2 span, .index-products h2 span {
	margin-left: 10px;
	font-size: 12px;
	font-style: italic;
	text-transform: uppercase
}
.index-company h2 i, .index-business h2 i, .index-products h2 i {
	margin-right: 5px
}
.index-company li, .index-company p, .index-business li, .index-business p, .index-products li, .index-products p {
	color: #fff
}
.index-company li {
	position: relative;
	padding-left: 1em
}
.index-company li::before {
	content: '\f140';
	position: absolute;
	left: 0;
	font-family: 'FontAwesome'
}
.index-company a {
	position: relative;
	display: inline-block;
	margin-top: 15px;
	font-size: 12px;
	text-transform: uppercase
}
.index-company a span {
	position: absolute;
	display: inline-block;
	top: 0;
	right: -30px;
	width: 29px;
	height: 29px;
	padding-top: 3px;
	text-align: center;
	font-size: 14px;
	background: linear-gradient(90deg, #bd3554 0, #b8395d 100%) no-repeat
}
.index-business li {
	display: inline-block;
	width: 45%;
	margin: 5px 0;
	vertical-align: top
}
.product-carousel a {
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto
}
.product-carousel p {
	text-align: center
}
.list a, .list .bg-contain {
	display: inline-block;
	vertical-align: top
}
.list .bg-contain {
	width: 100px;
	height: 100px
}
.list a {
	width: calc(100% - 130px);
	margin-left: 15px;
	text-decoration: none
}
.list li {
	padding: 10px
}
.list li+li {
	border-top: 1px dotted #ccc
}
.list p {
	margin: 0;
	color: #555;
	font-size: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden
}
.list .news-title {
	margin-bottom: 0
}
.news-title {
	margin: 0 auto 20px;
	font-weight: 500;
	color: #d92127
}
.time {
	color: #ccc;
	font-size: 12px
}
.time::before {
	content: '\f073';
	font-family: 'FontAwesome';
	margin-right: 5px
}
.pageLink {
	padding: 15px 0;
	text-align: center
}
.pageLink span, .pageLink a {
	width: 30px;
	height: 30px;
	display: inline-block;
	margin: 0 5px;
	line-height: 2
}
.pageLink span {
	color: #555
}
.pageLink a {
	color: #d92127;
	text-decoration: none;
	border-radius: 50%
}
.link-box {
	margin: 10px auto;
	text-align: center
}
.link-box a {
	display: inline-block;
	padding: 5px 10px;
	text-decoration: none
}
.site-map {
	max-width: 625px;
	text-align: center
}
.site-map a {
	padding: 5px;
	color: #d92127;
	text-decoration: none
}
.site-map>ul>li {
	display: inline-block;
	width: calc(100% / 2 - 5px);
	max-width: 180px;
	margin: 0 auto 30px;
	vertical-align: top
}
.contact p {
	text-align: center
}
.contact-logo {
	display: flex;
	height: 150px;
	justify-content: center;
	align-items: center;
	vertical-align: top;
	background-image: radial-gradient(circle, #f55628 20%, #e9352f 70%, rgba(0,0,0,0) 100%), -webkit-linear-gradient(left, #df335d 0%, #e54958 100%);
	background-image: radial-gradient(circle, #f55628 20%, #e9352f 70%, rgba(0,0,0,0) 100%), -o-linear-gradient(left, #df335d 0%, #e54958 100%);
	background-image: radial-gradient(circle, #f55628 20%, #e9352f 70%, rgba(0,0,0,0) 100%), linear-gradient(to right, #df335d 0%, #e54958 100%)
}
.contact-logo img {
	-webkit-filter: drop-shadow(0px 0px 80px rgba(255,255,255,0.3));
	filter: drop-shadow(0px 0px 80px rgba(255,255,255,0.3))
}
.contact-list {
	margin: 20px auto
}
.contact-list h3 {
	margin-bottom: 0;
	color: #d92127
}
.contact-list>li+li {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dotted #ccc
}
.contact-list li {
	color: #d92127
}
.contact-list li[data-title] {
	padding-left: 5em
}
.contact-list li[data-title]::before {
	content: attr(data-title) "：";
	display: inline-block;
	color: #333;
	margin-left: -5em
}
.contact-list a {
	color: #d92127
}
.contact-list iframe {
	width: 100%;
	height: 250px
}
.form-style li {
	padding: 15px 0
}
.form-style li:last-child {
	text-align: center
}
.form-style li div:not(:only-child) {
	display: inline-block;
	width: 40%
}
.form-style input[type="reset"], .form-style input[type="submit"] {
	margin: 10px;
	padding: 10px 15px;
	font-family: '峚煱𨬡絭w';
	border: none;
	cursor: pointer
}
.form-style input[type="reset"] {
	color: #fff;
	background-color: #ccc
}
.form-style img, .form-style button {
	vertical-align: middle
}
.input-animate {
	position: relative;
	border-bottom: 1px solid #ccc
}
.input-animate input, .input-animate textarea {
	width: 100%;
	padding: 10px;
	border: none;
	outline: none
}
.input-animate label {
	position: absolute;
	top: 5px;
	left: 10px;
	color: #3b3b3b;
	font-size: 20px;
	transition: all .5s ease;
	pointer-events: none
}
.input-animate label[data-remark]::after {
	content: attr(data-remark);
	padding: 0 3px;
	margin-left: 3px;
	color: #fff;
	font-size: 12px;
	background-image: linear-gradient(90deg, #bd3554 0, #b8395d 100%);
	vertical-align: middle;
	transition: all .3s ease
}
.input-animate .input-line {
	position: absolute;
	bottom: -1px;
	width: 0;
	height: 2px;
	margin-left: 50%;
	background-image: linear-gradient(90deg, #bd3554 0, #b8395d 100%);
	transition: all .5s ease
}
.input-animate-focus input ~ label, .input-animate-focus textarea ~ label {
	top: -20px;
	font-size: 14px;
	color: #b8395d
}
.input-animate-focus input ~ .input-line, .input-animate-focus textarea ~ .input-line {
	margin-left: 0;
	width: 100%
}
.refresh {
	padding: 0;
	margin-left: 5px;
	font-size: 20px;
	background-color: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	color: #d92127
}
.product-list {
	max-width: 670px;
	padding: 15px 10px;
	margin: auto
}
.product-list li {
	display: inline-block;
	width: 150px;
	padding: 10px;
	margin: 0 3% 15px;
	vertical-align: top
}
.product-list a {
	display: block;
	text-decoration: none
}
.product-list div {
	width: 150px;
	height: 150px;
	margin: 0 auto
}
.product-list p {
	margin-top: 0;
	text-align: center;
	color: #d92127;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden
}
.product-show {
	margin-top: 30px
}
.product-show div {
	outline: none
}
.product-show a {
	display: block;
	width: 70%;
	margin: auto
}
.product-show img {
	object-fit: contain
}
.product-nav div {
	outline: none
}
.product-nav a {
	display: block;
	width: 100px;
	height: 100px;
	margin: auto
}
.product-detial {
	margin-top: 20px
}
.product-detial h3 {
	position: relative;
	line-height: 1.2;
	margin-bottom: 1em;
	font-size: 2em;
	color: #d92127;
	border-bottom: 1px solid currentColor
}
.product-detial h3::before, .product-detial h3::after {
	font-size: 14px;
	font-weight: 500;
	color: #333
}
.product-detial h3::before {
	content: attr(data-num);
	display: block
}
.product-detial h3::after {
	content: attr(data-type);
	position: absolute;
	right: 0;
	bottom: -20px;
	font-style: italic
}
.product-detial dl {
	margin-left: 0
}
.product-detial dt {
	color: #b8395d;
	font-weight: 700
}
.product-detial dd {
	margin-left: 0
}
.product-detial dd::before {
	content: '\f138';
	font-family: 'FontAwesome';
	margin-right: 3px;
	color: #d92127
}
.search>p {
	font-size: 1.2em
}
.search>p span {
	display: inline-block;
	margin: 0 3px;
	color: #d92127
}
.search .product-list {
	max-width: none
}
.error404 {
	position: relative;
	min-height: calc(100vh - 193px);
	background: url("../images/error404.png") 50% 50% no-repeat
}
.error404 .link-box {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px
}
.error404 .link-box a {
	color: #d92127
}
@media (max-width: 767px) {
.secondary-nav li {
	display: inline-block
}
.secondary-nav li+li {
	margin-left:1px
}
}
@media (min-width: 768px) and (max-width: 1023px) {
body {
	font: 14px/1.6 Arial, '微軟正黑體'
}
body:not([class*="index-bg"]) header {
	padding: 0
}
.page-content {
	margin: 0;
	border-top: 2px solid;
	-webkit-border-image: 1 -webkit-linear-gradient(left, #da2126 0%, #b8395d 100%);
	-o-border-image: 1 -o-linear-gradient(left, #da2126 0%, #b8395d 100%);
	border-image: 1 linear-gradient(to right, #da2126 0%, #b8395d 100%)
}
.index-business, .index-products {
	display: inline-block;
	vertical-align: top
}
.index-company {
	max-width: 700px
}
.index-business {
	width: calc(100% - 55%)
}
.index-business li {
	width: 90%
}
.index-products {
	width: calc(100% - 46%)
}
.contact-list ul {
	float: left;
	width: 40%
}
.contact-list iframe {
	float: right;
	width: calc(100% - 41%)
}
.contact-list>li::before, .contact-list>li::after {
	content: '';
	display: table
}
.contact-list>li::after {
	clear: both
}
.form-style li:nth-child(-n+4) {
	display: inline-block;
	width: 45%
}
.form-style li:nth-child(-n+4):nth-child(odd) {
	margin-right: 8%
}
.product-show a {
	width: 80%
}
.product-box, .product-detial {
	display: inline-block;
	vertical-align: top
}
.product-box {
	width: 60%
}
.product-detial {
	width: calc(100% - 65%);
	margin-left: 3%
}
.secondary-nav li {
	display: inline-block
}
.secondary-nav li+li {
	margin-left: 1px
}
}
@media (min-width: 1024px) {
body:not([class*="index-bg"]) header {
	padding: 0
}
header h1, header nav {
	width: auto
}
.page-banner h2 {
	margin-top: 164px;
	left: 0;
	transform: none
}
.page-banner h2::before {
	left: 3.8em;
	bottom: 50%
}
.secondary-nav div{
	margin-top: 0px;
}
.secondary-nav a {
	transition: all .5s ease;
	padding: 7px 10px;
}
.secondary-nav a:hover {
	opacity: 1
}
.secondary-nav li+li{
	margin-left:5px
}
.serch-box input {
	width: auto;
	margin-left: 5px;
	padding-top: 7px;
	padding-bottom: 7px
}
.serch-box button {
	cursor: pointer
}
.menu-btn {
	display: none
}
.navigation {
	display: block;
	margin-top: 13px
}
.navigation li {
	display: inline-block
}
.navigation a {
	display: block;
	padding: 5px 4px;
	margin: 0 5px;
	color: #fff;
	text-decoration: none;
	font-size: 20px;
	text-align: center
}
.navigation a::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	margin-left: 50%;
	background-color: rgba(255,255,255,0.5);
	transition: all .5s ease
}
.navigation a:hover::after {
	width: 100%;
	margin-left: 0
}
footer {
	padding: 15px 0
}
footer p {
	float: right;
	margin: 0
}
footer p span {
	display: inline
}
footer a:hover {
	text-decoration: underline
}
.contact-info {
	float: left
}
.page-menu {
	float: left;
	width: 20%;
	padding-bottom: 20px;
	border-bottom: none
}
.page-menu li {
	display: list-item
}
.page-menu li+li a {
	margin-top: 5px
}
.page-menu a {
	margin-top: 0;
	padding-left: 10px;
	padding-right: 5px;
	text-align: right;
	transition: all .5s ease
}
.page-menu a:hover {
	opacity: 1
}
.page-content {
	float: left;
	width: calc(100% - 23%);
	margin: 10px auto;
	padding-left: 2%;
	border-top: none;
	border-left: 2px solid;
	border-image: 1 linear-gradient(180deg, #da2126 0, #b8395d 100%)
}
.page-content a {
	transition: all .5s ease
}
.page-content a:hover {
	color: #f55628
}
.index-bg footer {
	position: fixed;
	width: 100%;
	bottom: 0
}
.index-company, .index-business, .index-products {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 32px
}
.index-company {
	width: calc(100% - 66%)
}
.index-business {
	width: calc(100% - 75%);
	margin-left: 50px;
	margin-right: 50px
}
.index-business li {
	width: 95%
}
.index-products {
	width: calc(100% - 70%)
}
.index-products .product-carousel button {
	width: 15px;
	height: 15px;
	top: 35%;
	background-size: 15px
}
.list li {
	border: 1px solid transparent
}
.list li:hover {
	-webkit-border-image: 1 -webkit-linear-gradient(left, #da2126 0%, #b8395d 100%);
	-o-border-image: 1 -o-linear-gradient(left, #da2126 0%, #b8395d 100%);
	border-image: 1 linear-gradient(to right, #da2126 0%, #b8395d 100%)
}
.list li:hover+li {
	border-top-color: transparent
}
.pageLink a::after, .link-box a::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	margin-left: 50%;
	transition: all .5s ease;
	background-image: linear-gradient(90deg, #df335d 0%, #e54958 100%)
}
.pageLink a:hover::after, .link-box a:hover::after {
	width: 100%;
	margin-left: 0
}
.link-box a::after {
	background-color: #f55628;
	background-image: none
}
.site-map ul ul li {
	width: 70%;
	margin: 0 auto -10px
}
.site-map a::after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	margin-left: 50%;
	background-image: linear-gradient(90deg, #df335d 0%, #e54958 100%);
	transition: all .5s ease
}
.site-map a:hover::after {
	width: 100%;
	margin-left: 0
}
.contact-list {
	margin-top: 0
}
.contact-list ul {
	float: left;
	width: 40%
}
.contact-list iframe {
	float: right;
	width: calc(100% - 41%)
}
.contact-list>li::before, .contact-list>li::after {
	content: '';
	display: table
}
.contact-list>li::after {
	clear: both
}
.form-style li:nth-child(-n+4) {
	display: inline-block;
	width: 45%
}
.form-style li:nth-child(-n+4):nth-child(odd) {
	margin-right: 9%
}
.form-style li:last-child input {
	transition: all .3s ease
}
.form-style li:last-child input[type="reset"]:hover {
	box-shadow: -3px 0 20px rgba(0,0,0,0.2)
}
.form-style li:last-child input[type="submit"]:hover {
	box-shadow: -3px 0 20px rgba(217,33,39,0.2)
}
.refresh:hover {
	-webkit-animation: round .3s ease-in;
	animation: round .4s ease-in
}
.secondary-nav li {
	display: inline
}
@-webkit-keyframes round {
to {
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
@keyframes round {
to {
-ms-transform:rotate(1turn);
transform:rotate(1turn)
}
}
.product-list li {
	border: 1px solid transparent
}
.product-list li:hover {
	-webkit-border-image: 1 -webkit-linear-gradient(left, #da2126 0%, #b8395d 100%);
	-o-border-image: 1 -o-linear-gradient(left, #da2126 0%, #b8395d 100%);
	border-image: 1 linear-gradient(to right, #da2126 0%, #b8395d 100%)
}
.product-show a {
	width: 90%
}
.product-box, .product-detial {
	display: inline-block;
	vertical-align: top
}
.product-box {
	width: 60%
}
.product-detial {
	width: calc(100% - 65%);
	margin-left: 3%
}
}