@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;
}