/* Html Body */
html, body {
  font-size:12px;
  color:#000;
  font-family:Helvetica, Arial, Verdana , sans-serif, "微軟正黑體", "Microsoft JhengHei";
  -webkit-text-size-adjust:none;
  -webkit-font-size-delta:10px;

  background-color:#fff;
  word-break:break-all;
}
a { color:#; text-decoration:none; }
a:hover { color:#; text-decoration:none; }


/* Side Navbar */

#header 
{
	position:fixed; z-index:998;
	width:100%; height:90px !important; min-height:90px !important;
	
	background-color:rgba(0,0,0,0.8);
	background-color: #DFEBBD;
	
	/*
	background-color:rgba(0,0,0,0.8);
	background-color:#000 \9;
	-webkit-transition: All 400ms ease;
	-moz-transition: All 400ms ease;
	-o-transition: All 400ms ease;
	transition: All 400ms ease;
	*/
}

#header a.logo, #header nav, #footer { position:absolute; }
#header a.logo {
	display: block;
	top: 20px;
	left: 70px;
	width: 200px;
	margin-left: -120px;
	height: 50px;
	margin: 0 auto;
	text-indent: -9999px;
	background: url(images/icon-wrap-logo.png) no-repeat;
	overflow: hidden;
}
#header a.logo-index {
	background:url(images/icon-wrap-logo.png) no-repeat;
}

#header .copyright {
	bottom:15px;
	width:100%;
	font-size:12px; text-align:center; letter-spacing:1px;
	color:#fff;
}
#header nav {
	top:25px; 
	right:0px;
	text-align:center;
	margin-left:-120px;
	overflow:hidden;
}
#header nav a {
	display:block;
	float:left;
	position:relative;
	padding: 10px 0px;
}
#header nav a span {
	display:block;
	color:#fff;
	font-size:1.4em;
	padding:0 20px;
	overflow:hidden;
	-webkit-transition:All 1s ease;
	-moz-transition:All 1s ease;
	-o-transition:All 1s ease;
	transition:All 1s ease;
}
#header nav a:hover span, #header nav a.current span {
	color:#FFDE00;
}
#header nav a:before, #header nav a:after {
	position:absolute; top:8px;
	font-size:20px; text-indent:0;
	color:#fff;
	opacity:0;
	-webkit-transition:All 1s ease;
	-moz-transition:All 1s ease;
	-o-transition:All 1s ease;
	transition:All 1s ease;
}
#header nav a:before {
	left:0px;
	content:'{';
}
#header nav a:after {
	right:0px;
	content:'}';
}
#header nav a:hover:before, #header nav a.current:before {
	left:9px;
	opacity:1;
}
#header nav a:hover:after, #header nav a.current:after {
	right:9px;
	opacity:1;
}


.menu {
	display:none;
  	position:fixed; top:25px; right:25px; z-index:99999;
  	background:url(images/icon-wrap.png) no-repeat -109px -108px;
  	width:35px;
  	height:35px;  
}

/*copyright*/
#footer {
	position:absolute; right:20px; bottom:10px;
	color:#000;
}
#footer01{
	text-align: center;
	width: 100%;
	height: 0px;
	background: #313131;
}

#footer01 div{

	color: white;/*#949494;*/
	
	/*
	padding: 5px;
	padding-left:28px;
	padding-right:28px;
	*/

	font-size: 14px;
	letter-spacing: 1px;
	font-family: Verdana;
	word-wrap:break-word; 
}
.footer_social_img{
	margin: 5px;
	width: 30px;

}
#footer_img1, #footer_img2{
	padding-right: 25px;
}
.footer_img{
	opacity: 0.5;
	height:30px;
	width:auto;
	padding-top: 10px;
}

/* SideNav */
ul.SideNav { overflow:hidden; }
ul.SideNav > li { position:relative; border-bottom:solid 1px #b2b2b2; }
ul.SideNav li a {
  display:block;
  padding:30px 15px;
  color:#fff;
  font-size:1.3em; text-align:center; text-shadow:1px 1px 3px rgba(0,0,0,0.3);  
}

ul.SideNav .sb-submenu a { color:#fff; font-size:18px; padding:10px 30px; }
ul.SideNav .sb-submenu li:last-child a { padding-bottom:20px; }


/* breadcrumb */
#breadcrumb {
	position:fixed; top:25px; right:20px; z-index:9998;
	color:#fff;
	font-size:30px;
	background-color:transparent !important;
}


/**/
#wrapper { width:100%; }
#wrapper section {
	position:relative;
	width:100%;
	background-color:#fff;
}

.orange-container{
	font-size: 18px;
	text-align: center;
	width: 100%;
	height: 240px;
	background-color: rgba(255,204,0,0.9);
	font-family: Helvetica, "Microsoft JhengHei";
}
#orange-container_us{
	background-color: #f9cc2e;
}
.orange-text{
	width: 550px;
	padding-top: 80px;
	margin: 0 auto;
}

.slogan,.slogan-l,.slogan-r{
	float: left;
}
.main-text, .trend-main-text{
	margin: 0 auto;
	font-size: 2.8em;
	font-weight: bold;
	letter-spacing: -3px;
	white-space: inherit;
}
.slogan, .trend-slogan {
	width: 450px;
	float: left;
}

.slogan-l,.slogan-r{
	width: 50px;
	margin: 0 auto;
	font-size: 6em;
	font-weight: 100;
	margin-top: -48px;
	float: left;
	white-space: pre;
}

.down-text, .trend-down-text{
	margin: 0 auto;
	font-size: 1.5em;
	margin-top:-10px;
	line-height: 30px;
	font-weight: 600;
	font-family: 'Play', sans-serif;
}
#wrapper #index .item {
	text-align: center;
	position:absolute;
	width:100%; height:100%;
    background-position: 50% 50%;
	background-size: cover;
	-webkit-backface-visibility: hidden;
}


#wrapper #index .item.b05{
	background-position: 50% 0%;
}
#wrapper #index .item.b03 { background-image:url(images/IndexIMG-03.jpg); }
#wrapper #index .item.b05 { background-image:url(images/IndexIMG-15.jpg); }
#wrapper #index .item.b10 {	
	background-image:url(images/IndexIMG-05.jpg);}
/*#wrapper #index .item.b05 { background-image:url(images/IndexIMG-05.jpg); }*/
#wrapper #index span {
	font-size: 2em;
	
	
	width: 295px;
	display:block;
	position:relative;
	letter-spacing:2px; text-align:center; text-shadow:0 0 10px rgba(0,0,0,0.5);
	color:#fff;
}

#wrapper #portfolio .unitIMG span {
	font-size: 2em;
	display:block;
	position:relative;
	top:50%;
	right:30%;
	/*width:480px;*/
	letter-spacing:2px; text-align:center; text-shadow:0 0 10px rgba(0,0,0,0.5);
	color:#fff;
}
#wrapper #trend .unitIMG span {
	display:block;
	position:relative;
	top:30%;
	right:10%;
	/*width:480px;*/
	letter-spacing:2px; text-align:center; text-shadow:0 0 10px rgba(0,0,0,1);
	color:#fff;
	font-size: 2em;
}
#wrapper #us .unitIMG span {
	font-size: 2em;
	display:block;
	position:relative;
	top:60%;
	/*width:480px;*/
	letter-spacing:2px; text-align:center; text-shadow:0 0 10px rgba(0,0,0,0.5);
	color:#fff;
}
#wrapper #contact .unitIMG span {
	display:block;
	position:relative;
	top: 48%;
	letter-spacing:2px; text-align:center; text-shadow:0 0 10px rgba(0,0,0,0.5);
	color:#fff;
	font-size: 2em;
}
#wrapper #index .item.b03 span {
	top:88%;
	right: -62%;
}

#wrapper #index .item.b05 span {
	width: 400px;
	top:52%;
	left: 50%;
	text-shadow: 0 0 10px rgba(0,0,0,1)
}

#wrapper #index .item.b10 span {
	width: 400px;
	top:70%;
	left: 19%;
	text-shadow: 0 0 10px rgba(0,0,0,1)
}
#wrapper #contact span.head {	
	font-size:2em;
}
#wrapper #contact span.text {
	margin-top:10px;
	font-size:16px;
}

#wrapper #portfolio span.head,#wrapper #trend span.head,#wrapper #us span.head {	
	font-size:2em;
}
#wrapper #portfolio span.text,#wrapper #trend span.text,#wrapper #us span.text {
	margin-top:10px;
	font-size:1.6em;
}
#wrapper #index span.head {	
	margin-top:-30px;
	font-size:2em;
}
#wrapper #index span.text {
	margin-top:10px;
	font-size:16px;
}

/* Style */
i.dplusStyle {
	display:inline-block;
	font-style:normal;
	padding:0 10px;
	opacity:0;
}

i.dplusStyle.l { margin-right:10px; }
i.dplusStyle.r { margin-left:10px; }

.animateD {
  -webkit-animation: dplus-animation 1.5s 1 ease-in forwards;
  -moz-animation: dplus-animation 1.5s 1 ease-in forwards;
  -ms-animation: dplus-animation 1.5s 1 ease-in forwards;
  -o-animation: dplus-animation 1.5s 1 ease-in forwards;
  animation: dplus-animation 1.5s 1 ease-in forwards;	
}

/* WebKit Animations */
@-webkit-keyframes dplus-animation {
  0%    { opacity:0; }
  100%  { opacity:1; margin:0; }
}
@-moz-keyframes dplus-animation {
  0%    { opacity:0; }
  100%  { opacity:1; margin:0; }
}
@-ms-keyframes dplus-animation {
  0%    { opacity:0; }
  100%  { opacity:1; margin:0; }
}
@-o-keyframes dplus-animation {
  0%    { opacity:0; }
  100%  { opacity:1; margin:0; }
}
@keyframes dplus-animation {
  0%    { opacity:0; }
  100%  { opacity:1; margin:0; }
}

.unitIMG {
	width:100%;
	height:600px;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center bottom;
	-webkit-backface-visibility: hidden;
}
.unitIMG_BK{
	width:100%;
	height:600px;
	background-image:url(images/unitIMG-about.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center bottom;
	-webkit-backface-visibility: hidden;
}


.headTitle { font-size:2em }

section #portfolio, section#trend, section#us {
	padding-bottom:35px;
	overflow:hidden;
	-webkit-transition: All 1s ease;
	-moz-transition: All 1s ease;
	-ms-transition: All 1s ease;
	-o-transition: All 1s ease;
	transition: All 1s ease;
}
#portfolio .unitIMG {
	display: block;
	opacity: 0;
	background-image:url(images/unitIMG-project01.jpg);
	background-position:center 80%;

}
#trend .unitIMG {
	display: block;
	opacity: 0;
	background-image:url(images/IndexIMG-05.jpg);
	background-position:center 80%;

}
#us .unitIMG {
	display: block;
	opacity: 0;
	background-image:url(images/IndexIMG-12.jpg);
    background-position: center 20%;
}


/* About */
#about div.text, #us div.text {
	font-size:1.5em; text-align:center;
	margin:auto;
}
#about div.text p,#us div.text p { margin-top:0; }

ul.ul.whatwedo, ul.whatwedo2 { padding:30px 0 50px 0; overflow:hidden; }
ul.whatwedo li {
	display:inline-block;
	background-color:#000;
	width:200px; height:200px; margin:10px;
	font-size:1.3em; line-height:200px; vertical-align:middle;
	-webkit-border-radius:99em;
	-moz-border-radius:99em;
	border-radius:99em;
	color:#fff;
}
ul.logoList { background:#f2f2f2; padding:50px; overflow:hidden; }
ul.logoList div { margin-bottom:20px; }
ul.logoList li { display:inline-block; }
ul.logoList li img { width:100%; }




/* Content */
section#contact #breadcrumb, section#about #breadcrumb { color:#000; }
section#contact .wrap-box {
	width:100%;
	padding:50px 0;
}
section#contact .wrap-box ul, section#contact .wrap-box div {
	display:block;
	width:100%;
	font-size:18px; text-align:center;
}
section#contact .wrap-box div span { display:inline-block; margin-left:10px; }
section#contact .wrap-box ul li {
	display:inline-block;
	width:22px; height:22px;
}
section#contact .wrap-box ul li a {
	display:block;
	width:22px; height:22px;
	text-indent:-99999px;
	background-image:url(images/icon-wrap.png);
	background-repeat:no-repeat;
	overflow:hidden;
}
section#contact .wrap-box ul li a.icon-f { background-position:-13px -164px; }
section#contact .wrap-box ul li a.icon-p { background-position:-63px -164px; }
section#contact .wrap-box ul li a.icon-t { background-position:-113px -164px; }
section#contact .wrap-box div a {
	font-size:18px;
	color:#000;
}
section#contact .wrap-box div a:hover { color:rgba(255,204,0,1); }
section#contact .map-tabs {
	width:100%;
	overflow:hidden;
}
section#contact .map-tabs > div { font-size:24px; font-weight:bold; margin:10px; }
section#contact .map-tabs a { display:block; float:left; width:50%; color:#000; background-color:#e8e8e8; }
section#contact .map-tabs a:hover { background-color:#000; color:#fff; }
section#contact .map-tabs a.current { background-color:rgba(255,204,0,0.9); color:#000; }
section#contact .map-tabs a div.inner { width:370px; padding:50px 0; margin:auto; overflow:hidden; }
section#contact .map-tabs a h3 { font-size:24px; text-align:left; }
section#contact .map-tabs a h3 span { display:inline-block; font-size:15px; margin-left:10px; }
section#contact .map-tabs a dl.wrap-info { margin-top:10px; font-size:15px; }
section#contact .map-tabs a dl.wrap-info > dt { float:left; font-weight:bold; height:57px; margin-right:20px; }
section#contact .map-tabs a dl.wrap-info dd span { display:block; font-weight:normal; vertical-align:top; word-break:break-word; }
section#contact .map-tabs a dl.wrap-info dd span:first-child { margin-bottom:10px; }

section#contact .map-panes {
	width:100%; height:200px;
}
section#contact .map-panes div,section#contact .map-panes iframe { 
	widows:100%; height:100%; 
	pointer-events: none;
}


/*
#infscr-loading {
	position:fixed; top:0; left:0; z-index:9999;
	width:100%; height:100%;
	color:#fff;
	font-size:1.5em; text-align:center;
	background-color:rgba(0,0,0,0.5);
}
#infscr-loading img {
	position:absolute; top:50%; left:50%;
	margin-top:-10px; margin-left:-110px;
}
*/
/*
a#next {
	display:block;
	width:300px; height:50px;
	margin:auto;
	font-size:1.5em; text-align:center; vertical-align:middle; line-height:50px;
	color:#fff;
	background-color:#000;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px;
}
*/

.trend_dd {
	padding:5px;
	font-family: Helvetica, "Microsoft JhengHei";
	color:black;
}
.trend_title{
	color:black;
	width: 200px;
}
.trend_dd_span {
	width:200px;
	float:left;
	padding:5px;

}


/*FLOAT*/
.float{

}

@-webkit-keyframes Floating{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 8px);}
    to {-webkit-transform: translate(0, -0px);    }
}



section#us{
	background-color:white;
}
.core_value{
	background-color:rgba(255,255,255,1);
}