@font-face {
    font-family: 'AdobeFanHeitiStd';
    src: url('../fonts/AdobeFanHeitiStd.eot');
    src: url('../fonts/AdobeFanHeitiStd.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/AdobeFanHeitiStd.woff') format('woff'), 
    url('../fonts/AdobeFanHeitiStd.ttf') format('truetype'), 
    url('../fonts/AdobeFanHeitiStd.svg#AdobeFanHeitiStd') format('svg');
}

body{font-family: "Microsoft JhengHei";font-size: 14px;}

a,span,button,input,textarea,select{outline: none;}

h1,h2,h3,h4,h5,h6{margin: 5px 0;font-weight: bold;}

.clear{clear: both}

.col-30{width: 30%;float: left;}
.col-33{width: 33.33%;float: left;}
.col-50{width: 50%;float: left;}
.col-70{width: 70%;float: left;}
.col-100{width: 100%;float: left;}

.Margin-top-20{margin-top: 20px;}
.Margin-top-50{margin-top: 50px;}
.padding-right-10{padding-right: 10px;}
.padding-left-10{padding-left: 10px;}
.textAlign-center{text-align: center;}

.BorderTop{border-top:1px solid #dcdcdc;}
.BorderBottom{border-bottom:1px solid #dcdcdc;}

.container-sm{width: 100%;max-width: 800px;margin: 0 auto;}

.bg-red{
	background-color: #800000;
}


.bg-grey{
	background-color: #eee;
}
/*nav*/
.navbar {padding: 0;z-index: 10}
.navbar-brand img{width: auto;height: 90px;
	-webkit-transition: all .1s ease-in; //added vendor prefixes for older browsers
    -moz-transition: all .1s ease-in; //first parameter decides what properties to animate
    -m-transition: all .1s ease-in; // second is duration
    -o-transition: all .1s ease-in; //3rd is the timing-function
     transition: all .1s ease-in;

}
.navbar-dark .navbar-nav .nav-link,.navbar-dark .navbar-nav .nav-link:hover{
	color: #fff;
	padding: 10px 20px;
	font-size: 13px;
	text-align:center;
}

/*Slider*/
.slider{margin-top: 100px;z-index: 1;}
.carousel-item {
    height: 75vh;
    min-height: 600px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: rgba(0,0,0,0.4);
  	background-blend-mode: multiply;
}
.carousel-caption{width: 100%;}
.carousel-caption h1{
	font-size: 62px;
	margin-bottom: 40px;
	letter-spacing: 10px;
}
.carousel-caption a{
	border: 2px solid #fff;
	padding: 10px 30px;
	color: #fff;
	text-decoration: none;
}

/*Section*/
.section{
	float: left;
	width: 100%;padding: 80px 0;
}
.section-sm{float: left;width: 100%;padding: 40px 0;}
.bgRepeat {background-repeat: repeat;}

.heading{width: 100%;}
h1.pageHeadingDark{
	font-weight: bold;
	text-align: center;
	color: #232323;padding: 10px 30px;
	display: inline-block; border-bottom: 2px solid #800000;
	font-size: 32px;
	margin-bottom: 30px;
}
h1.pageHeadingFFF{
	font-weight: bold;
	text-align: center;
	color: #fff;padding: 10px 30px;
	display: inline-block; border-bottom: 2px solid #fff;
	font-size: 32px;
	margin-bottom: 30px;
}

/*Introduction*/
.IntroContent{text-align: center;}

.IntroContent h3{color: #800000;font-size: 20px;margin-bottom: 20px;font-weight: bold;}
.IntroContent p{
	line-height: 2;font-size: 14px;
	width: 100%;margin: 0 auto;color: #565656;
	margin-bottom: 30px;
}
.underlineLink{padding: 5px 20px;color: #2e2e2e;border-bottom: 2px solid #800000;}
.underlineLink:hover{color: #2e2e2e;text-decoration: none;}

.borderLink-Grey{
	padding: 5px 20px;color: #565656;
	border:1px solid #565656;
	transition: color 0.2s linear;
   -webkit-transition: color 0.2s linear;
   -moz-transition: color 0.2s linear;
}

.borderLink-Grey:hover{
	text-decoration: none;
	background-color: #800000;
	border-color: #800000;
	color: #fff;
}

.redLink,.redLink:hover{
	background-color: #800000;
	color: #fff!important;
	padding: 5px 20px;color: #565656;
	transition: color 0.2s linear;
   -webkit-transition: color 0.2s linear;
   -moz-transition: color 0.2s linear;
   text-decoration: none;
}

.IntroIMG{text-align: right}
.IntroIMG img{
	margin: 0 1%;
	width: 46%;
	height:360px;
}


/*Sidebar  Tabs*/
.Branding{margin-bottom: 30px;width: 100%;float: left;}
.sideBraning{width: 15%;float: left;}
.BraningContent{width: 85%;float: left;}
.sideBraning .nav {width: 100%;display: block;}
.sideBraning .nav li{margin-bottom: 5px;}

.sideBraning .tabs img{
	width: 100%;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.sideBraning .tabs .active img{
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.Brand-Intro{display: flex;}

.BrandingIMG img{
	width: 100%;height: 100%;
	object-fit:cover;
}


.Brand-Introduce{
	padding: 20px;
	background-color: #fff;
}
.Brand-Introduce img{width: 160px;height: auto;margin-bottom: 20px;}
.Brand-Introduce p{margin-bottom: 20px;font-size: 14px;color: #565656;}


/*CompanyNews*/
.CompanyNews-Container{
	width: 100%;float: left;
}
.EachNews{
	position: relative;
	width: 33.33%;float: left;
	margin-bottom: 40px;
	padding: 0 10px;
}
.EachNews img{width: 100%;height: 200px;object-fit:cover;}
.EachNews .date{
	position: absolute;
	top: 10px;
	left: 20px;
	background-color: #817365;
	color: #fff;
	padding: 5px;
	font-size: 12px;
}

.newsContent{
	text-align: left;
	width: 100%;padding: 10px;
	background-color: #eeeeee;
	color: #565656;
	min-height: 220px;
}

.newsContent h5{
	font-weight: bold;
	margin-bottom: 10px;
	color: #232323;
}

.newsContent p{
	display: -webkit-box;
-webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

footer{
	margin-top: 80px;
	position: relative;
	width: 100%;float: left;
	padding: 30px 0 80px 0;
	background-color:  #800000;
	color: #fff;
}

.footerLogo{
	width: 20%;float: left;
	text-align: center;
}
.footerLogo img{max-width: 100%;height: auto;}
.footerBradings{
	width: 50%;
	padding: 0 20px;
	float: left;
}
.FooterLinks h5{
	padding: 0 0 5px 0;border-bottom: 1px solid #fff;
	font-size: 16px;font-weight: bold;
	margin-bottom: 10px;
}
.footerBradings img{width: 31%;height: auto;margin-bottom: 10px;float: left;margin-right: 2%;}

.footerLinks{
	color: #fff;
	width: 30%;float: left;
}
.footerLinks table{
	width: 100%;
	border-collapse: collapse;
}
.footerLinks table td{padding: 5px 0;} 
.footerLinks a{color: #fff;text-decoration: none;}

.FooterCopyrights{
	position: absolute;bottom: 0;
	width: 100%;
	background-color: #510101;
	color: #fff;
	padding: 12px;
	font-size: 12px;
	text-align: center;
}


/*Scroll to Top*/
.scrollToTop img{width: 42px;height: 42px;border:2px solid #510101;}
.scrollToTop{
    width:42px; 
    height:42px; 
    text-align:center; 
    text-decoration: none;
    position:fixed;
    bottom:15px;
    right:15px;
    display:none;
    z-index: 10;

}
.scrollToTop:hover{
    text-decoration:none;
}


/*Subpage*/
.subpage-Banner{
	position: relative;
	margin-top: 100px;
	width: 100%;
	float: left;
	min-height: 300px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.subpage-location{
	position: absolute;
	top: 50%;left: 50%;
	background-color: #fff;
	text-align: center;
	padding: 15px;
	min-width: 300px;
	transform: translate(-50%,-50%);
}

.subpage-location h1{
	font-size:40px; 
	font-weight: 600;
}

.subpage-location a{
	color: #222;
	font-size: 15px;
	text-decoration: none;
}
.subpage-location a:hover{color: #800000;}
.subpage-location a.active{color: #800000;pointer-events:none;}

.blankContent{width: 100%;min-height: 800px;}

.sideTabLink{width: 25%;padding-right: 10px;}

.sideTabLink button{
	outline: 0;
	text-align: left;
	font-size: 15px;
	width:100%;padding: 15px;
	background-color: #eeeeee;
	color: #6c6c6c;
	border:0;
	font-weight: bold;
}

.sideTabLink button.active{background-color: #800000;color: #fff;}

.sideTabLink .subVerticalTab button{
	text-align: left;
	font-size: 15px;
	width:100%;padding: 15px;
	background-color: #dcdcdc;
	color: #6c6c6c;
	border:0;
	font-weight: bold;
} 

.TableContent {width: 75%;padding-left: 10px;}


.CompanyNews{
	width: 100%;
	float: left;
}
.myTabStyle .nav-tabs {
    border:0;
    padding: 0 10px;
}
.myTabStyle .nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-width: 0;
    margin-bottom: 20px;
}
.myTabStyle .nav-tabs > li > a {
    border: none;
    color: #666;
}
.myTabStyle .nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
    border: none;
    color: #800000 !important;
    background: transparent;
    font-weight: bold;
}
.myTabStyle .nav-tabs > li > a::after {
    content: "";
    background: #800000;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: -1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}
.myTabStyle .nav-tabs > li.active > a::after,
.nav-tabs > li:hover > a::after {
    transform: scale(1);
}
.myTabStyle .tab-nav > li > a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
}
.myTabStyle .tab-pane {
    padding: 15px 0;
}
.myTabStyle .nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.portfolio-Details{
	width: 100%;float: left;
	margin-top: 100px;
	padding: 40px 10px;
	color: #565656;
}

.portfolio-Details img{width: 100%;height: auto; margin-bottom: 30px;}

.portfolio-Details h3{font-size: 24px;font-weight: bold;margin-bottom: 20px;}
.portfolio-Details p{font-size: 14px;margin-bottom: 15px;}

.portfolio-shops{
	margin-top: 50px;
	border-top: 1px solid #ddd;
	padding: 10px 0;
}

.portfolio-shops h5{
	font-size: 18px;font-weight: bold;
}
.portfolio-shops a,.portfolio-shops a:hover{
	color: #800000;
	text-decoration: none;
}

/*Branding*/
.BrandingRow{
	text-align: center;
	width: 100%;
	float: left;
	margin:0 auto;
}
.EachBrand{
	padding: 50px 0;
}
.BrandingRow img{
	width: 100%;height: auto;
	max-width: 300px;
}

.Brand-Introduction{
	float: left;
	width: 100%;
	text-align: center;
	padding-bottom: 50px;
	border-bottom: 1px solid #ddd;
}
.Brand-Introduction img{height: 85px;width: auto;margin-bottom: 30px;}
.Brand-Introduction p{line-height: 1.8;font-size: 14px;color: #222222;margin-bottom: 20px;}

.Brand-Locations{
	padding: 40px 0;
	width: 100%;float: left;
}
.Brand-Locations h4{font-weight: bold;text-align: center; margin-bottom: 40px;}
.EachLocation{
	width: 25%;float: left;padding: 0 10px;
}
.EachLocation .EachLocation-Data{
	cursor: pointer;
	width: 100%;
	padding: 30px 0;
	text-align: center;
	color: #7d7d7d;
	border: 2px solid #7d7d7d;
	background-color:#fff; 
	height: 207px;
	margin-bottom: 30px;
}
.EachLocation-DataActive{
	cursor: pointer;
	width: 100%;
	padding: 30px 0;
	text-align: center;
	color: #fff;
	border: 2px solid #800000;
	background-color:#800000; 
	height: 207px;
	margin-bottom: 30px;
	box-shadow: 0px 20px 37px -20px #000000;
}

.EachLocation .EachLocation-Data span,.EachLocation-DataActive span{font-size: 40px;}
.EachLocation-Data h4,.EachLocation-DataActive h4{margin-bottom: 10px;}
.EachLocation-Data p,.EachLocation-DataActive p{margin: 0;}

/*google map*/
#map{width: 100%;height: 400px;}

/*Contacts*/

.contactsGooglemap{
	float: left;
	margin-top: 100px;
	width: 100%;
}
#contactsMap{width: 100%;height: 500px;}

.contactForm{width: 70%;float: left;}
.contactusData{width: 30%;float: left;padding-left: 20px;}
.contactForm h4,.contactusData h4{
	color: #800000;font-weight: bold;margin-bottom: 30px;
}
.contactForm h6{color: #800000;}

.contactForm input[type='text']{
	width: 100%;
	padding: 8px;
	border: 1px solid #d2d2d2:;
	margin-bottom: 15px;
}

.contactForm select{
	width: 100%;
	padding: 8px;
	border: 1px solid #d2d2d2:;
	height: 41px;
	margin-bottom: 10px;
}

.contactForm textarea{
	width: 100%;min-height: 150px;
	padding: 8px;
	border: 1px solid #d2d2d2:;
	resize:none;
	margin-bottom: 10px;
}

.contactForm input[type='submit']{
	text-align: center;
	padding:10px;
	min-width: 100px;
	color: #fff;
	border: 0;
	background-color: #800000;
}


.RadioChoice input[type=radio], .RadioChoice input[type=checkbox] {
		display:none;
	}

.RadioChoice input[type=radio] + label, .RadioChoice input[type=checkbox] + label {
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 300;
	letter-spacing: -1px;
	line-height: 25px;
	text-align: center;
	width: 30%;
	background-color: #dcdcdc;
	color: #696969;
	border: 1px solid #dcdcdc;
	padding: 6px;
	min-height: 41px;
}


.RadioChoice input[type=radio]:checked + label{
	background-color: #800000;
	color: #fff;
	border: 1px solid #800000;
}

.contactusData table{
	width: 100%;border-collapse: collapse;
}
.contactusData td{vertical-align: top;padding: 0 0 10px 0;}
.contactusData td:first-child{
	min-width: 45px;
}

/*about us*/

.aboutusIMG{text-align: left}
.aboutusIMG img{
	margin: 0 1%;
	width: 46%;
	height:360px;
	object-fit:cover;
}

.aboutus-Intro{text-align: left;}

.aboutus-Intro h2{
	font-size: 28px;
	padding-bottom: 10px;
	border-bottom: 2px solid #800000;
	margin-bottom: 20px;
}
.aboutus-Intro p{line-height: 1.8;}

.awards{text-align: center;}

.awards .nav-center {
  text-align: center;
}
.awards .nav-center ul.nav {
  display: inline-block;
}
.awards .nav-center ul.nav li {
  display: inline a;
  display-float: left;
}

.awards .nav-tabs>li {
    float: left;
    margin-bottom: -1px
}

.MultiCarousel {
    float: left;
    overflow: hidden;
    padding: 15px;
    width: 100%;
    position: relative;
}
.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
    float: left;
}
.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
    position: absolute;
    border-radius: 50%;
    top: calc(50% - 20px);
}
.MultiCarousel .leftLst {
    left: 10px;
}
.MultiCarousel .rightLst {
    right: 10px;
}
.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
    pointer-events: none;
    background: #333333;
}

.btn-MultiCarousel {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}

.award-container{width: 20%;float: left;padding: 0 15px;}
.award{background-color: #fff;}
.award img{
	width: 100%;height: 260px;
	object-fit:cover;
	border: 6px solid #fff;
}
.awardContent{padding: 10px 5px;background-color: #fff;}
.awardContent h5{font-size: 14px;margin-bottom: 20px;height:30px;overflow: hidden; }
.awardContent h6{font-size: 14px;color: #827365;}

button.aboutusCarouselBTN {
	cursor: pointer;
	outline: none;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .4rem .4rem;
    font-size: 1rem;
    line-height: 1.25;
    border-radius: .25rem;
    transition: all .15s ease-in-out;
}

/*work with us*/
.workWithUs{width: 100%;text-align: center;float: left;}


.workRole{
	display: flex;
	text-align: left;
	width: 100%;float: left;
	margin: 20px 0 10px 0;
	border: 1px solid #bfbfbf;
}

.RoleIMG {width: 35%;}
.RoleIMG img{width: 100%;height: 100%;object-fit:cover;}
.Rolecontent{width:65%;padding: 10px;min-height: 210px;}
.Rolecontent h5{
	color: #800000;padding-bottom: 4px;
	display: inline-block;border-bottom: 2px solid #800000;
	margin-bottom: 10px;
}

.Rolecontent p{
	display: -webkit-box;
	-webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}