@charset "utf-8";
body{
	font-family: Arial, "Arial Black", "Arial Narrow";
	font-family: "Roboto", sans-serif;
}
p{
	font-family: "Roboto", sans-serif;
}
/* CSS Document */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(../fonts/glyphicons-halflings-regular.eot);
    src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.glyphicon-asterisk:before {
    content: "\2a"
}

.glyphicon-plus:before {
    content: "\2b"
}

.glyphicon-euro:before {
    content: "\20ac"
}

.glyphicon-minus:before {
    content: "\2212"
}

.glyphicon-cloud:before {
    content: "\2601"
}

.glyphicon-envelope:before {
    content: "\2709"
}

.glyphicon-pencil:before {
    content: "\270f"
}

.glyphicon-glass:before {
    content: "\e001"
}

.glyphicon-music:before {
    content: "\e002"
}

.glyphicon-search:before {
    content: "\e003"
}

.glyphicon-heart:before {
    content: "\e005"
}

.glyphicon-star:before {
    content: "\e006"
}

.glyphicon-star-empty:before {
    content: "\e007"
}

.glyphicon-user:before {
    content: "\e008"
}

.glyphicon-film:before {
    content: "\e009"
}

.glyphicon-th-large:before {
    content: "\e010"
}

.glyphicon-th:before {
    content: "\e011"
}

.glyphicon-th-list:before {
    content: "\e012"
}

.glyphicon-ok:before {
    content: "\e013"
}

.glyphicon-remove:before {
    content: "\e014"
}

.glyphicon-zoom-in:before {
    content: "\e015"
}

.glyphicon-zoom-out:before {
    content: "\e016"
}

.glyphicon-off:before {
    content: "\e017"
}

.glyphicon-signal:before {
    content: "\e018"
}

.glyphicon-cog:before {
    content: "\e019"
}

.glyphicon-trash:before {
    content: "\e020"
}

.glyphicon-home:before {
    content: "\e021"
}

.glyphicon-file:before {
    content: "\e022"
}

.glyphicon-time:before {
    content: "\e023"
}

.glyphicon-road:before {
    content: "\e024"
}

.glyphicon-download-alt:before {
    content: "\e025"
}

.glyphicon-download:before {
    content: "\e026"
}

.glyphicon-upload:before {
    content: "\e027"
}

.glyphicon-inbox:before {
    content: "\e028"
}

.glyphicon-play-circle:before {
    content: "\e029"
}

.glyphicon-repeat:before {
    content: "\e030"
}

.glyphicon-refresh:before {
    content: "\e031"
}

.glyphicon-list-alt:before {
    content: "\e032"
}

.glyphicon-lock:before {
    content: "\e033"
}

.glyphicon-flag:before {
    content: "\e034"
}

.glyphicon-headphones:before {
    content: "\e035"
}

.glyphicon-volume-off:before {
    content: "\e036"
}

.glyphicon-volume-down:before {
    content: "\e037"
}

.glyphicon-volume-up:before {
    content: "\e038"
}

.glyphicon-qrcode:before {
    content: "\e039"
}

.glyphicon-barcode:before {
    content: "\e040"
}

.glyphicon-tag:before {
    content: "\e041"
}

.glyphicon-tags:before {
    content: "\e042"
}

.glyphicon-book:before {
    content: "\e043"
}

.glyphicon-bookmark:before {
    content: "\e044"
}

.glyphicon-print:before {
    content: "\e045"
}

.glyphicon-camera:before {
    content: "\e046"
}

.glyphicon-font:before {
    content: "\e047"
}

.glyphicon-bold:before {
    content: "\e048"
}

.glyphicon-italic:before {
    content: "\e049"
}

.glyphicon-text-height:before {
    content: "\e050"
}

.glyphicon-text-width:before {
    content: "\e051"
}

.glyphicon-align-left:before {
    content: "\e052"
}

.glyphicon-align-center:before {
    content: "\e053"
}

.glyphicon-align-right:before {
    content: "\e054"
}

.glyphicon-align-justify:before {
    content: "\e055"
}

.glyphicon-list:before {
    content: "\e056"
}

.glyphicon-indent-left:before {
    content: "\e057"
}

.glyphicon-indent-right:before {
    content: "\e058"
}

.glyphicon-facetime-video:before {
    content: "\e059"
}

.glyphicon-picture:before {
    content: "\e060"
}

.glyphicon-map-marker:before {
    content: "\e062"
}

.glyphicon-adjust:before {
    content: "\e063"
}

.glyphicon-tint:before {
    content: "\e064"
}

.glyphicon-edit:before {
    content: "\e065"
}

.glyphicon-share:before {
    content: "\e066"
}

.glyphicon-check:before {
    content: "\e067"
}

.glyphicon-move:before {
    content: "\e068"
}

.glyphicon-step-backward:before {
    content: "\e069"
}

.glyphicon-fast-backward:before {
    content: "\e070"
}

.glyphicon-backward:before {
    content: "\e071"
}

.glyphicon-play:before {
    content: "\e072"
}

.glyphicon-pause:before {
    content: "\e073"
}

.glyphicon-stop:before {
    content: "\e074"
}

.glyphicon-forward:before {
    content: "\e075"
}

.glyphicon-fast-forward:before {
    content: "\e076"
}

.glyphicon-step-forward:before {
    content: "\e077"
}

.glyphicon-eject:before {
    content: "\e078"
}

.glyphicon-chevron-left:before {
    content: "\e079"
}

.glyphicon-chevron-right:before {
    content: "\e080"
}

.glyphicon-plus-sign:before {
    content: "\e081"
}

.glyphicon-minus-sign:before {
    content: "\e082"
}

.glyphicon-remove-sign:before {
    content: "\e083"
}

.glyphicon-ok-sign:before {
    content: "\e084"
}

.glyphicon-question-sign:before {
    content: "\e085"
}

.glyphicon-info-sign:before {
    content: "\e086"
}

.glyphicon-screenshot:before {
    content: "\e087"
}

.glyphicon-remove-circle:before {
    content: "\e088"
}

.glyphicon-ok-circle:before {
    content: "\e089"
}

.glyphicon-ban-circle:before {
    content: "\e090"
}

.glyphicon-arrow-left:before {
    content: "\e091"
}

.glyphicon-arrow-right:before {
    content: "\e092"
}

.glyphicon-arrow-up:before {
    content: "\e093"
}

.glyphicon-arrow-down:before {
    content: "\e094"
}

.glyphicon-share-alt:before {
    content: "\e095"
}

.glyphicon-resize-full:before {
    content: "\e096"
}

.glyphicon-resize-small:before {
    content: "\e097"
}

.glyphicon-exclamation-sign:before {
    content: "\e101"
}

.glyphicon-gift:before {
    content: "\e102"
}

.glyphicon-leaf:before {
    content: "\e103"
}

.glyphicon-fire:before {
    content: "\e104"
}

.glyphicon-eye-open:before {
    content: "\e105"
}

.glyphicon-eye-close:before {
    content: "\e106"
}

.glyphicon-warning-sign:before {
    content: "\e107"
}

.glyphicon-plane:before {
    content: "\e108"
}

.glyphicon-calendar:before {
    content: "\e109"
}

.glyphicon-random:before {
    content: "\e110"
}

.glyphicon-comment:before {
    content: "\e111"
}

.glyphicon-magnet:before {
    content: "\e112"
}

.glyphicon-chevron-up:before {
    content: "\e113"
}

.glyphicon-chevron-down:before {
    content: "\e114"
}

.glyphicon-retweet:before {
    content: "\e115"
}

.glyphicon-shopping-cart:before {
    content: "\e116"
}

.glyphicon-folder-close:before {
    content: "\e117"
}

.glyphicon-folder-open:before {
    content: "\e118"
}

.glyphicon-resize-vertical:before {
    content: "\e119"
}

.glyphicon-resize-horizontal:before {
    content: "\e120"
}

.glyphicon-hdd:before {
    content: "\e121"
}

.glyphicon-bullhorn:before {
    content: "\e122"
}

.glyphicon-bell:before {
    content: "\e123"
}

.glyphicon-certificate:before {
    content: "\e124"
}

.glyphicon-thumbs-up:before {
    content: "\e125"
}

.glyphicon-thumbs-down:before {
    content: "\e126"
}

.glyphicon-hand-right:before {
    content: "\e127"
}

.glyphicon-hand-left:before {
    content: "\e128"
}

.glyphicon-hand-up:before {
    content: "\e129"
}

.glyphicon-hand-down:before {
    content: "\e130"
}

.glyphicon-circle-arrow-right:before {
    content: "\e131"
}

.glyphicon-circle-arrow-left:before {
    content: "\e132"
}

.glyphicon-circle-arrow-up:before {
    content: "\e133"
}

.glyphicon-circle-arrow-down:before {
    content: "\e134"
}

.glyphicon-globe:before {
    content: "\e135"
}

.glyphicon-wrench:before {
    content: "\e136"
}

.glyphicon-tasks:before {
    content: "\e137"
}

.glyphicon-filter:before {
    content: "\e138"
}

.glyphicon-briefcase:before {
    content: "\e139"
}

.glyphicon-fullscreen:before {
    content: "\e140"
}

.glyphicon-dashboard:before {
    content: "\e141"
}

.glyphicon-paperclip:before {
    content: "\e142"
}

.glyphicon-heart-empty:before {
    content: "\e143"
}

.glyphicon-link:before {
    content: "\e144"
}

.glyphicon-phone:before {
    content: "\e145"
}

.glyphicon-pushpin:before {
    content: "\e146"
}

.glyphicon-usd:before {
    content: "\e148"
}

.glyphicon-gbp:before {
    content: "\e149"
}

.glyphicon-sort:before {
    content: "\e150"
}

.glyphicon-sort-by-alphabet:before {
    content: "\e151"
}

.glyphicon-sort-by-alphabet-alt:before {
    content: "\e152"
}

.glyphicon-sort-by-order:before {
    content: "\e153"
}

.glyphicon-sort-by-order-alt:before {
    content: "\e154"
}

.glyphicon-sort-by-attributes:before {
    content: "\e155"
}

.glyphicon-sort-by-attributes-alt:before {
    content: "\e156"
}

.glyphicon-unchecked:before {
    content: "\e157"
}

.glyphicon-expand:before {
    content: "\e158"
}

.glyphicon-collapse-down:before {
    content: "\e159"
}

.glyphicon-collapse-up:before {
    content: "\e160"
}

.glyphicon-log-in:before {
    content: "\e161"
}

.glyphicon-flash:before {
    content: "\e162"
}

.glyphicon-log-out:before {
    content: "\e163"
}

.glyphicon-new-window:before {
    content: "\e164"
}

.glyphicon-record:before {
    content: "\e165"
}

.glyphicon-save:before {
    content: "\e166"
}

.glyphicon-open:before {
    content: "\e167"
}

.glyphicon-saved:before {
    content: "\e168"
}

.glyphicon-import:before {
    content: "\e169"
}

.glyphicon-export:before {
    content: "\e170"
}

.glyphicon-send:before {
    content: "\e171"
}

.glyphicon-floppy-disk:before {
    content: "\e172"
}

.glyphicon-floppy-saved:before {
    content: "\e173"
}

.glyphicon-floppy-remove:before {
    content: "\e174"
}

.glyphicon-floppy-save:before {
    content: "\e175"
}

.glyphicon-floppy-open:before {
    content: "\e176"
}

.glyphicon-credit-card:before {
    content: "\e177"
}

.glyphicon-transfer:before {
    content: "\e178"
}

.glyphicon-cutlery:before {
    content: "\e179"
}

.glyphicon-header:before {
    content: "\e180"
}

.glyphicon-compressed:before {
    content: "\e181"
}

.glyphicon-earphone:before {
    content: "\e182"
}

.glyphicon-phone-alt:before {
    content: "\e183"
}

.glyphicon-tower:before {
    content: "\e184"
}

.glyphicon-stats:before {
    content: "\e185"
}

.glyphicon-sd-video:before {
    content: "\e186"
}

.glyphicon-hd-video:before {
    content: "\e187"
}

.glyphicon-subtitles:before {
    content: "\e188"
}

.glyphicon-sound-stereo:before {
    content: "\e189"
}

.glyphicon-sound-dolby:before {
    content: "\e190"
}

.glyphicon-sound-5-1:before {
    content: "\e191"
}

.glyphicon-sound-6-1:before {
    content: "\e192"
}

.glyphicon-sound-7-1:before {
    content: "\e193"
}

.glyphicon-copyright-mark:before {
    content: "\e194"
}

.glyphicon-registration-mark:before {
    content: "\e195"
}

.glyphicon-cloud-download:before {
    content: "\e197"
}

.glyphicon-cloud-upload:before {
    content: "\e198"
}

.glyphicon-tree-conifer:before {
    content: "\e199"
}

.glyphicon-tree-deciduous:before {
    content: "\e200"
}
a:hover{
	text-decoration: none;
}
button,
button.active,
.navbar-toggler:hover, .navbar-toggler:focus {
  outline: none;
}
.btn-more{
	border:1px solid #eee;
	padding: 8px 20px;
	display: block;
	width: 90px;
	text-align: center;
	color:#000;
	font-weight: bold;
	transition: all 0.5s;
	border-radius:4px;
}
.btn-more:hover{
	background-color: rgba(250,101,1,0.8);
	color:#fff;
}
.date{
	display: block;
	font-size:16px;
	color:#393838;
}
.nav-top{
	background-color: #606060;
	text-align: right;
}
.nav-top a{
	display: inline-block;
	padding: 4px 12px;
	color:#fff;
}
.navbar{
	padding: 0;
	margin: 0;
}
.navbar-brand{
	background: url("../images/layout/logo_en.png") no-repeat center center;
	width: 280px;
	height: 80px;
	text-indent: -9999px;
	margin-right: 0;
}
.navbar .navbar-toggler {
    height: 34px;
    padding-right: 0px;
    position: relative;
    float: right;
    padding: 9px 0px;
    margin-top: 0;
    margin-right: 12px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.navbar .navbar-toggler:hover, .navbar .navbar-toggler:focus {
    background: transparent;
}
.navbar-toggler * {
    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}
.navbar-toggler .sr-only, .navbar-toggler span:after, .navbar-toggler span:before {
    display: none;
}
.navbar .open span:nth-child(4) {
    transform: rotate(135deg);
    position: relative;
    -webkit-transform: rotate(135deg);
    top: -9px;
}
.navbar .open span:nth-child(3) {
    opacity: 0;
}
.navbar .open span:nth-child(2) {
    transform: rotate(225deg);
    position: relative;
    -webkit-transform: rotate(225deg);
    top: 9px;
}
.navbar-toggler .icon-bar {
    background-color: #888;
}
.navbar-toggler .icon-bar + .icon-bar {
    margin-top: 6px;
}
.navbar .navbar-toggler .icon-bar {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 1px;
    background-color: #333;
}
.nav-link{
	font-family: "Roboto Condensed", sans-serif;
	font-weight: bold;
	font-size: 20px;
}
.owl-wrap{
	width: 86%;
	margin: 0 auto;
}
.owl-carousel.owl-loaded{
	position: relative;
}
.owl-theme .owl-nav [class*='owl-']:hover{
	color:rgba(0,0,0,0.5);
}
button.owl-prev,
button.owl-next{
	outline: none;
}
button.owl-prev.fas.fa-angle-left {
    left: -35px;
    position: absolute;
    font-size: 3em;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    font-family: "Font Awesome 5 Free";
    color: #333;
}
button.owl-next.fas.fa-angle-right {
    right: -35px;
    position: absolute;
    font-size: 3em;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    font-family: "Font Awesome 5 Free";
    color: #333;
}
.owl-carousel .owl-nav [class*="owl-"]:hover{
	background: transparent;
}
.owl-nav {
    position: absolute;
    width: 100%;
    top: 30%;
	transform: translateY(-30%);
    margin-top: 0px!important;
	}
#Banner > div{
	padding-left: 0;
	padding-right: 0;
}
#Banner .owl-nav{
	top: 25%;
}
#Banner button.owl-prev.fas.fa-angle-left{
	left:0;
	color:rgba(255,255,255,.7);
}
#Banner button.owl-next.fas.fa-angle-right{
	right:0;	
	color:rgba(255,255,255,.7);
}
#Banner .owl-dots{
	position: absolute;
	width:50%;
	left: 25%;
	right:25%;
	bottom:-28px;
	z-index: 990;
}

#Quality .owl-dots{
	margin-top: 12px;
}
#about{
	background: url("../images/layout/map.jpg") no-repeat center right;
	padding: 30px 0;
}
/*＝＝＝關於鴻成＝＝＝*/
.about-wrap{
	display: flex;
	flex-wrap: wrap;
    align-items: center;
}
.about-wrap p{
	line-height: 1.8;
	padding-left: 4px;
}
.about-detail{
		padding-left: 36px;
	}
/*＝＝＝關於鴻成 經營理念＝＝＝*/
.about-wrapper{
    list-style: none;
    padding: 0;
    margin: 0;
}
.about-wrapper > li{
	padding-bottom: 20px;
}
.about-title{
	font-size:24px;
	font-weight: bold;
	text-align: center;
	padding: 12px 0;
	border-bottom: 1px solid #ff6501;
	border-bottom: 2px solid #999;
}
h2{
	font-size:28px;
	position: relative;
	font-family: "Playfair Display", serif;
	font-weight:bold;
}
h2:before{
	position: absolute;
	content: "";
	left:-28px;
	top:6px;
	width: 24px;
	height: 24px;
	border-radius:24px;
	background-color: #ff6501;
}
#Honor h2,
#Quality h2,
#Page h2{
	width:4em;
	margin: 0 auto 36px auto;
}
#Page h2.Quality-title{
	width:8em;
}
#Page h2.TheProcess-title{
	width:5.5em;
}
#Products h2{
	width:4em;
	margin: 0 auto 36px auto;
}
#Products h3{
	text-align: center;
	border-bottom: 3px solid #fb8102;
	margin: 0 auto 20px auto;
	padding-bottom: 8px;
	width:100%;
}
#Quality .row{
	margin-left: 0;
	margin-right: 0;
}
/*＝＝＝榮譽事蹟＝＝＝*/
.Honor-Wrap{
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	padding: 0 15px;
}
.Honor-item{
	border-radius:5px;
	border: 1px solid #eeee;
	background-color: #fff;
	padding: 8px;
    margin: 0 4px 12px 4px;
    flex-basis: calc(50% - 10px);
}
.card{
	border:none;
}
.card-title{
	font-size:18px;
	text-align: left;
}
.card-body{
	padding-top: 8px;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}
h5.card-title{	
	margin-bottom: 0;
	padding-left: 2px;
	padding-right: 2px;
	font-size:14px;
	line-height: 1.4;
}
#Products h5.card-title{
	text-overflow: inherit;
	white-space: inherit;
}
/*＝＝＝商品＝＝＝*/
.index-products{
	background: url("../images/layout/index_products.png") no-repeat top right;
	background-size: contain;
}
.products-item{
	padding-bottom:12px;
}
.index-products img{
	/*margin: 12px auto;*/
	margin: 0 auto 12px auto;
}
.index-products a{
	display: block;
	color:#222;
	transition: all 0.5s;
}
.index-products a:hover{
	color:#ff6501;	
}
.index-products a > img{
	transition: all 0.5s;
}
.index-products a:hover > img{
	filter: contrast(150%)
}
.index-products p{
	margin-bottom: 20px;
}
.index-products_wrap{
}
.pic-text{
	display: flex;
    align-items: center;
}

.text{
	position: absolute;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	font-size:20px;
    /*font-family: "Oswald", sans-serif;*/
	font-family: "Playfair Display", serif;
	font-weight: bold;
	color:#fa7c01;
	left:0;
	right:0;
}
.text-top{
	margin-top: -30px;
	margin-bottom: 30px;
}
.pic-text:first-child > img{
	margin-bottom: 0;
}
/*＝＝＝榮譽事蹟＝＝＝*/
#Honor{
	background: url("../images/layout/index_honor.jpg") no-repeat top center;
	padding-top: 60px;
	
}
#ESG{
	overflow: hidden;
	margin: 40px 0 80px 0;
}
#ESG .col-12{
	padding-left: 0;
	padding-right: 0;
}
#ESG h2{
	margin-bottom: 20px;
	width: 14em;
	margin: 0 auto 20px auto;
	text-align: center;
	position: relative;
}
#ESG h2:before{
	background-color: #fff;
	left:-18px;
}
.ESG-main{
	background: linear-gradient(to bottom,  #f97500 0%,#fd8a03 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding-top: 12px;
	padding-bottom: 12px;
}
.ESG-detail{
	width:90%;
	margin: 0 auto;
	color:#fff;
}
.ESG-detail p{
	font-size:18px;
}

.ESG-bg{
	background: url("../images/layout/index_ESG.jpg") no-repeat top right;	
	z-index: 9;
}
.ESG-pic img{
	float: right;	
}
/*＝＝＝＝＝＝*/
#Quality{
	background: url("../images/layout/index_Certification.jpg") no-repeat top center;
	padding: 0px 8px 20px 8px;
	background-size: cover;
}
/*＝＝＝內頁＝＝＝*/
#Page,
#Products{
	border-top:1px solid #eee;
	padding-top:20px;
}
.page-title{
	font-size:18px;
	border-radius:4px;
	color:#fff;
	background-color: #ff6501;
	padding: 2px 8px
}
/*＝＝＝製品分類＝＝＝*/
.Pro_List,
.about-thanks{
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.Pro_item,
.thanks-list{
	width:47%;
	margin-left: 4px;
	margin-right: 4px;
}
.thanks-list{
	margin-bottom: 20px;
}
#Products .columns{
	font-size:16px;
	text-align: right;
	color:#222;
	font-weight: bold;
	padding-bottom: 8px;
}
#Products .columns span{
	color:#999;
}
#Products .columns a{
	color:#999;
	font-weight: normal;
}
#Products .columns a:hover{
	color:#ff6501;
}
#Products p.page-item{
padding-left: 20px;
}
#Products nav ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
#Products nav ul li{
	padding: 0 0;
	border-bottom: 1px dashed #eee;
}
#Products .dropdown-item.active, 
#Products .dropdown-item:active{
	background-color:#ff6501;
}
#Products table{
	margin-bottom: 20px;
}
#Products table td{
	padding: 8px 4px;
}
#Products .table-striped tbody tr:first-child > td:nth-child(2),
#Products table td:first-child{
	text-align: center;
	font-weight: bold;
}
#Products .pic{
	position: relative;
	z-index: 1;
}
#Products .pic:before{
	content:"";
	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
	z-index: 2;
}
#Products .card{
	border: 1px solid #eee;
    margin-bottom: 20px;
}
#Products .card-body{
	padding: 1.25rem 0.75rem;
}
#Products-Wrap{
	padding-bottom: 20px;
}
#Products-Wrap .row{
	margin: 0;
}
#Products-Wrap .row > div{
	padding: 0;
}
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}
.timeline > li {
  margin-bottom: 20px;
  position: relative;
  width: 50%;
  float: left;
  clear: left;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li > .timeline-panel {
  width: 95%;
  float: left;
  border: 1px solid #d4d4d4;
  /*border-radius: 2px;*/
  /*padding: 20px;*/
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}
.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.timeline > li > .timeline-badge {
  color: #fff;
  width: 24px;
  height: 24px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  right: -12px;
  z-index: 100;
}
.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline-badge > a {
  color: #C5C7C5 !important;
}
.timeline-badge a:hover {
  color: #000 !important;
}
.timeline-title {
  margin-top: 0;
  color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
    padding:20px;
    margin-bottom: 0;
}
.timeline-body > p + p {
  margin-top: 5px;
}
.timeline-footer{
    padding:20px;
    background-color:#f4f4f4;
}
.timeline-footer > a{
    cursor: pointer;
    text-decoration: none;
}
.tooltip{

    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:5px;
    font-size:11px;
    opacity:0;
    filter:alpha(opacity=0);
    
}
.tooltip.in{
    /*opacity:0;
    filter:alpha(opacity=80);*/
    
}
.tooltip.top{
    margin-top:-2px;
}
.tooltip.right{
    margin-left:2px;
}
.tooltip.bottom{
    margin-top:2px;
}
.tooltip.left{
    margin-left:-2px;
}
.tooltip.top .tooltip-arrow{
    bottom:0;
    left:0;
    margin-left:0;
    border-left:0 solid transparent;
    border-right:5px solid transparent;
    border-top:0 solid #000;
}
.tooltip.left .tooltip-arrow{
    bottom:0;
    left:0;
    margin-left:0;
    border-left:0 solid transparent;
    border-right:5px solid transparent;
    border-top:0 solid #000;
}
.tooltip.bottom .tooltip-arrow{
    bottom:0;
    left:0;
    margin-left:0;
    border-left:0 solid transparent;
    border-right:5px solid transparent;
    border-top:0 solid #000;
}
.tooltip.right .tooltip-arrow{
    bottom:0;
    left:0;
    margin-left:0;
    border-left:0 solid transparent;
    border-right:5px solid transparent;
    border-top:0 solid #000;
}
.tooltip-inner{
    width:200px;
    padding:3px 8px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background-color:#313131;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
}
.tooltip-arrow{
    position:absolute;
    width:0;
    height:0;
}
.timeline > li.timeline-inverted{
  float: right; 
  clear: right;
  margin-top: 30px;
  margin-bottom: 30px;
}
.timeline > li:nth-child(2){
  margin-top: 60px;
}
.timeline > li.timeline-inverted > .timeline-badge{
  left: -12px;
}
/*＝＝＝技術開發＝＝＝*/
#Page .table{
	margin-bottom: 40px;
}
#Page .bg-light{
	background-color: rgba(235,235,235,1.00) !important;
}
#Page .table th,
#Page .table td{
	vertical-align: middle;
}
#Page .table-bordered th, 
#Page .table-bordered td{
	border-color:#c5c7c9;
}
#Page .bg-warning{
	padding: 8px 12px;
	border-radius: 8px;
	margin-top: -20px;
	margin-bottom: 40px;
}
#Page .features{
	padding-left: 0;
	margin: 0;
	text-align: left;
	padding-bottom: 12px;
	list-style: none;
}
#Page .features li{
	padding: 4px 0;
	border-bottom: 1px dashed #eee;
}
/*＝＝＝生產工程＝＝＝*/
#process{
	padding:8px 0;
	margin: 0 auto;
	font-size:24px;
	font-weight: bold;
}
.Process-Wrap{
	display: flex;
	align-items: center;
	margin-bottom: 0;
	padding: 12px 0;
	background-color: rgba(238,238,238,0.5);
	margin-left: 4px;
	margin-right: 4px;
}
.Process-title{
	font-size:18px;
	font-weight: bold;
	margin-bottom: 0;
}
.Process-icon{
	padding:12px 0;
}
.Process-icon > i{
	color:#999;
}
footer{
	background-color: #eeeeee;
	padding: 24px 0 12px 0;
}
h6{
    font-family: "Playfair Display", serif;
    font-size: 20px;
	font-weight: bold;
}
.footer-list{
	padding: 0;
	margin: 0;
	list-style: none;
}
.footer-list > li{
	padding-bottom: 8px;
}
.footer-list > li > a{
	color: #222222;
}
.footer-list > li:first-child > a,
.footer-list > li > i{
	color: #fb8102;	
}
.footer-list > li > i{
	font-size:22px;	
	margin-right: 12px;
}
.footer-list > li:first-child > i{
	font-size:36px;
}
.footer-list > li:first-child > a{
font-weight: bold;
font-family: "Raleway", sans-serif;
	font-size:24px;
}

.footer-copy p{
	padding: 0;
	margin: 0;
	line-height: 1.6;
	font-weight: 500;
}
.footer-copy p a{
	color:#222;
	font-size:16px;
}
.footer-copy p .copy{
	font-size:14px;
	font-weight: 300;
}
/*＝＝＝top按鈕＝＝＝*/
#goTop {
    position: fixed;
    bottom: 82px;
    right: 10px;
    display: block;
    cursor: pointer;
    z-index: 999;
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to bottom, #f97500 0%, #fd8a03 100%);
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    text-align: center;
    width:49px;
    height:49px;
    line-height:49px;
	border-radius:49px;
}
#goTop .fa {
	text-shadow:inherit;	
}
@media (min-width:576px){
	.Honor-Wrap{
		flex-direction: row;
	}
}
@media (max-width:767px){
	#ESG h2{
		width: 8em;
	}
	#ESG h2:before{
		left:-8px;
	}
	#Products .columns{
		padding-bottom: 20px;
	}
	.Products-Wrap{
		display: flex;
		flex-direction: column-reverse;
	}
	#Products nav{
		margin-bottom: 12px;
		margin-top: 20px;
        border-top: 2px solid #eee;
	}
	#Products h2{
		margin-top: 12px;
	}	
	.about-detail{
		padding-top: 12px;
		padding-bottom: 30px;
	}
	.about-pic{
	margin-bottom: 20px;
	}
	ul.timeline:before {
        left: 40px;
		left: 20px;
    }

    ul.timeline > li {
      margin-bottom: 20px;
      position: relative;
      width:100%;
      float: left;
      clear: left;
    }
    ul.timeline > li > .timeline-panel {
        width: calc(100% - 50px);
        width: -moz-calc(100% - 50px);
        width: -webkit-calc(100% - 50px);
    }

    ul.timeline > li > .timeline-badge {
		left: 28px;
        left: 8px;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

    ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }

    ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }

    .timeline > li.timeline-inverted{
      float: left; 
      clear: left;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .timeline > li.timeline-inverted > .timeline-badge{
      left: 28px;
      left: 8px;
    }
	.Process-Wrap > div{
	padding-left: 6px;
	padding-right: 6px;
	}
}
@media (min-width:768px){
    #Banner{
	position: relative;	
	}
	#Banner:before{
		position: absolute;
		content: "";
		display: block;
		background: url("../images/layout/banner_cover.png") no-repeat bottom center;
		background-size: cover;
		width: 100%;
		height: 111px;
		z-index: 99;
		bottom:-1px;
		left: 0;
		right: 0;	
	}
	#Banner .owl-nav{
	 top: 35%;
	transform: translateY(-35%);	
	}
	#Banner button.owl-prev.fas.fa-angle-left{
	left:35px;
	color:rgba(255,255,255,.7);
	}
	#Banner button.owl-next.fas.fa-angle-right{
		right:35px;	
		color:rgba(255,255,255,.7);
	}
	
	.ESG-wrap{	
	padding: 20px 0;
	color:#fff;
	display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
	position: relative;
	}
	.ESG-main{
	text-align: center;
	width:50%;
	z-index: 10;
}
	.ESG-pic{
		z-index: 9;
		width: 70%;
		position: absolute;
		right: 0;
		top: 0;
	}
	.ESG-detail p{
		font-size:20px;
	}
	#Quality{
	padding: 60px 8px 0 8px;
}
	.Pro_item,
	.thanks-list{
	width:30%;
	margin-left: 8px;
	margin-right: 8px;
	}
	/*＝＝＝關於鴻成＝＝＝*/
	.about-wrapper > li{
		/*width:48%;*/
		display: inline-block;
		vertical-align: top;
		padding-bottom: 20px;
	}
	#Products nav{
	padding-top: 36px;
	}
	#Products h3{
		margin-bottom: 36px;
	}
	#Products nav li > a {
	display: block;
	transition:all 0.5s;
	position: relative;
	z-index:1;
	padding:0 9px;
	height: 48px;
	line-height: 48px;
	}
	#Products nav li > a:hover {
		color:#fff;
	}
	#Products nav li > a:before{
		transition:all 0.5s;
		position:absolute;
		height: 48px;
		top:0;
		bottom:0;
		left:0;
		right:100%;
		background-color:#ff6501;
		content:"";
		z-index:-1;
	} 
	#Products nav li > a:hover:before {
		left:0;
		right:0;
		color:#Fff;
	}
	#Products .dropdown-item:hover,
	#Products .dropdown-item.active, 
	#Products .dropdown-item:active{
		background-color: transparent;
	}
	.Process-title{
		font-size:24px;
	}
  .footer-copy{
	text-align: right;
	}
}
@media (max-width:991px){
	.container, .container-sm, .container-md{
		max-width: 100%;
	}
	.nav-link{
	text-align: center;
	}
	.navbar-nav{
		background-color: #222;
	}
	.nav-link,
	.nav-link:hover,
	.nav-link:focus,
	.nav-link:visited{
		color:#fff;
	}
	.dropdown-item{
		text-align: center;
		
	}
	.navbar-nav .dropdown-menu{
		border:none;
		background-color: rgba(211,211,211,1.00);
	}
	.index-products p{
		margin-bottom: 20px;
		text-shadow:1px 1px 1px #999;
	}
	.about-wrap p{
		line-height:1.6;
	}
	#Products .dropdown-item{
		text-align: left;
	}
}
@media (min-width:992px){
	/*＝＝＝選單＝＝＝*/
	.navbar-expand-lg .navbar-nav{
		display: flex;
        justify-content: space-evenly;
        width: 100%;
    }
	.navbar-expand-lg .navbar-nav .nav-link{
		color:#000;
		text-align: center;
		height: 80px;
		line-height: 80px;
	}
	.navbar-expand-lg .navbar-nav .dropdown-menu{
		top:58px;
	}
	/*＝＝＝選單　滑鼠滑過＝＝＝*/
	.navbar-expand-lg .navbar-nav .nav-item {
		padding: 0px;
		width: 100%;
	}
	.navbar-expand-lg .navbar-nav .nav-item:after {
		position: absolute;
		width: 100%;
		height: 100%;
		bottom: 100%;
		left: 0;
		content: "";
		transition: all 0.3s;
		z-index: -1;
		text-align: center;
	}
	.navbar-expand-lg .navbar-nav .nav-item:hover > a {
		color: #333;
	}
	.navbar-expand-lg .navbar-nav .nav-item:hover > a:after {
		bottom: 0;
		background-color: #e7e7e7;
	}
	.navbar .navbar-nav > .open > a:focus {
		background-color: #ccc;
	}
	.navbar-expand-lg .navbar-nav .nav-link{
		padding-top:0;
		padding-bottom: 0;
	}
	.navbar-expand-lg .navbar-nav .nav-item:hover .dropdown-menu {
		display: block;
	}
	nav > .container{
		max-width: 100%;
	}
	.navbar-expand-lg .navbar-nav .nav-link{
	padding: 0;
	}
    .owl-nav {
    position: absolute;
    width: 100%;
    top: 35%;
	transform: translateY(-35%);
    margin-top: 0px!important;
	}
	.index-products{
		margin: 80px 0;
	}
	.about-wrap p{
		line-height: 2;
	}
	.ESG-detail p{
		font-size:24px;
	}
	#Quality{
		padding-bottom: 60px;
	}
	.Honor-item{
		padding: 12px;
		margin: 0 8px;
		flex-basis: calc(25% - 18px);
	}
}
@media (min-width:1024px){

	#ESG{
		margin-top: 80px;
	}
	#ESG h2{
		margin-bottom: 60px;
	}

	.ESG-detail{
		width:90%;
		padding: 60px 0;
		}
	.ESG-wrap{
		padding: 60px 0;
	}
}
@media (min-width:1200px){
	.container, .container-sm, .container-md, .container-lg, .container-xl{
		width: 1200px;
		margin: 0 auto;
	}
	h2{
		font-size:36px;
	}
	h2:before{
		top:12px;
		left:-36px;
	}
	.owl-nav {
    position: absolute;
    width: 100%;
    top: 40%;
	transform: translateY(-40%);
    margin-top: 0px!important;
	}
	#about{
		padding: 60px 0 0 0;
	}
	.about-wrap p{
		line-height: 3;
	}
	.about-detail{
		padding: 0 36px;
	}
	.text{
		font-size:36px;
		}
	.ESG-wrap{
		padding: 120px 0;
	}
	#Honor h2{
		margin-bottom: 80px;
    }
	.Honor-item{
		padding: 12px;
		margin: 0 10px;
		flex-basis: calc(25% - 22px);
	}
	h5.card-title{
		font-size:18px;
	}
	.footer-copy{
		padding-top:28px;	
	}	
}
@media (min-width:1800px){
	.Honor-Wrapper{
		width:1800px;
		margin: 0 auto;
	}
}
@media (min-width:1920px){
	.owl-wrap{
		width: 1820px;
		margin: 0 auto;
	}	
    .ESG-detail{
    padding: 120px 0;
    }
}