@font-face {
	font-family: 'Trajan Pro Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Trajan Pro Bold'), url('../fonts/trajan-pro-bold.woff') format('woff');
}
@font-face {
	font-family: 'Trajan Pro';
	font-style: normal;
	font-weight: normal;
	src: local('Trajan Pro'), url('../fonts/trajan-pro-regular.woff') format('woff');
}

html {
  margin: 0px;
  padding: 0px;
  overflow-y: scroll; 
}
body {
  font-family: '微軟正黑體', 'Microsoft JhengHei','arial';
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 25px; 
  margin: 0px; 
}
.trajan-pro-bold {
	font-family: 'Trajan Pro Bold';
}
.trajan-pro {
	font-family: 'Trajan Pro';
}
.text-light {
	color:#ffffff;
} 
.text-dark {
	color:#000000;
} 
.text-center {
	text-align:center
} 

p{
	font-size: 100%;
	line-height : 220%;
}

h1{
  font-size: 300%;
  line-height: 310%;
}

h1.brand-name{
  font-size: 350%;
  line-height: 360%;
}

h2{
  font-size: 160%;
  line-height: 180%;
}

.slogan {
	letter-spacing : 10px;
}

.container-fluid {
	padding :0px;
}
.row {
  margin: 0px;
}
 
#navbar { 
	padding: 0px;
}
.navbar { 
	height : 78px; 
	border-top: #686f7d 1px solid;
	border-bottom: #686f7d 1px solid; 
} 

.navbar.background {
/* 	background-color: #000000;
	opacity:0.3; */
}

.navbar-background {
	display:none;
	background-color: #000000; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
	filter: alpha(opacity=30); 
	-moz-opacity: 0.3; 
	-khtml-opacity: 0.3; 
	opacity: 0.3;
	position:fixed;
	top:0px;
	left:0px; 
	width:100%;
	height :76px;
}
 
.navbar .navbar-nav {
    display: inline-block; 
    float: none; 
	padding-top: 13px;
}

.navbar .navbar-collapse {
    text-align: center;
}
  
 .navbar-toggle .icon-bar {
	background-color: #fff;
}

.navbar-nav>li>a ,
.navbar-nav>li>a:link,
.navbar-nav>li>a:visited,
.navbar-nav>li>a:active 
{
	color : #ffffff;
	font-size: 80%;
	background-color:transparent;
}
.navbar-nav>li>a:hover {
	color : #b4e4fa;
	background-color:transparent;
}
.main-container {
	  padding-top:100px;  
}

section {
	padding-top:20px;
}

.button-menu { 
	width :100%;
	margin:auto;
    text-align: center;
	max-width : 650px; 
}

.button-menu a {
	width : 210px;
	height : 158px;
	display:inline-block;
	position:relative;
}

.button-menu  a .item{
	width : 210px;
	height : 158px;
	background-repeat:no-repeat;
	background-size : cover;
	position:absolute;
	left:0px;
	top:0px;
}
  
.button-menu  a .item{
	width : 210px;
	height : 158px;
	background-repeat:no-repeat;
	background-size : cover;
	position:absolute;
	left:0px;
	top:0px;
}
  
.button-menu  a .desc{ 
	position:absolute;
	right:10px;
	bottom:10px;
	font-size: 150%;
}
  
.button-menu  a .item.about{
/* 	display:inline-block; */
	background-image:url(../images/about-button.jpg); 
}
.button-menu  a .item.ecom{
/* 	display:inline-block; */
	background-image:url(../images/ecom-button.jpg); 
	}
.button-menu  a .item.hosting{
	/* display:inline-block; */
	background-image:url(../images/hosting-button.jpg); 
}
.button-menu  .item.seo{
	/* display:inline-block; */
	background-image:url(../images/seo-button.jpg); 
}
.button-menu  a .item.edm{
	/* display:inline-block; */
	background-image:url(../images/edm-button.jpg); 
}
.button-menu a .item.client{
	/* display:inline-block; */
	background-image:url(../images/client-button.jpg); 
}
 
@media (max-width: 767px) {
	.navbar-header {
		height : 80px;
		width:100%;
	}
	#navbar { 
		width : 100%;
		padding: 0px;
	}
	.container>.navbar-header, 
	.container-fluid>.navbar-header, 
	.container>.navbar-collapse, 
	.container-fluid>.navbar-collapse {
		margin:0px;	
	}
	
	.navbar-toggle {
		padding-top:20px;
	}
	.navbar .navbar-nav  {
		padding-top:0px;
		margin:0px;
	}
	.navbar-collapse.collapsing  ul , 
	.navbar-collapse.in ul  {
		width :100%; 
	}
	.navbar-collapse.in ul > li ,
	.navbar-collapse.collapsing  ul > li {  
	} 
	.carousel-indicators {
	  top: -50px;
	}
 
	.navbar-collapse.in ul > li > a:hover ,
	.navbar-collapse.collapsing  ul > li >a :hover {
		background-color : #ffffff;   
		color : #000;
	}
	 
	 
	.navbar-collapse.in ul > li > a ,
	.navbar-collapse.collapsing  ul > li > a  {
		color : #fff;
			background-color : #000000;  
	} 
	.banner-sep {  display:none}
}

 
.background-cover { 
	width:100%;
	height:100%;
	background-size: cover;
	background-repeat:no-repeat;
}
.background-dark {
	background-color : #101922;
}
.background-light {
	background-color : #f8f8f8;
}
#top-section {
	background-image: url('../images/top-banner.jpg');
}

#ecom-section {
	background-image: url('../images/ecom-banner.jpg');
	background-position: top center;
}

#hosting-section {
	background-image: url('../images/hosting-banner.jpg');
}
#seo-section {
	background-image: url('../images/seo-banner.jpg');
	background-position: center center;
}
.position-relative { position:relative;}


.banner-sep {   
	position:absolute;
	left:25%;
	top:-24px;
	background:url('../images/banner-sep-small.png') no-repeat;
	background-position: top center;
	background-size: contain;
	width : 50%;
	height :55px;
}
.banner-section {
	padding-top: 80px; 
}
@media (max-width: 750px) {
	 .banner-section {
		padding-top: 100px; 
	}
}
@media screen and (min-width: 768px){
	.carousel-indicators {
	  top: -49px;
	}
}
 
.carousel-inner {   display:none ;  }

 .share-box {
	border:#414859 1px solid;
	width : 40px;
	height : 40px;
	display:inline-block; 
	margin:0 22px 100px 22px;
 }
 
 .share-box.facebook {
	background:url(../images/facebook-icon.png) center center no-repeat;
 }
 
 .share-box.google {
	background:url(../images/google-icon.png) center center no-repeat;
 }
 
 .share-box.p {
	background:url(../images/p-icon.png) center center no-repeat;
 }
 
 .share-box.twitter {
	background:url(../images/twitter-icon.png) center center no-repeat;
 }
 
 .img-container {
	width :100%;
 } 
 .img-container img {
	max-width : 100%;
 } 
  
 .edm-table {
	display:table;
	border:#878c92 1px solid;
	width : 75%; 
	margin:auto;
	margin-bottom : 30px;
 } 
 .edm-table .rows{
	display:row; 
 }
 
 .edm-table .rows .items{
	display:cell;
	vertical-align:middle;
 }
 
 .edm-table .rows.head{ 
	border-bottom:#c2c6c9 1px solid;
 }
 .edm-table .rows .items.content{  
	padding:20px 0px;
 }
 
 .contact-title {
	color : #9cdae5;
 } 

#contact-form {
	max-width : 800px;
	width : 80%;
	margin:0 auto;
} 
 
#form-section input[type="text"]{
	width : 100%;
}

#form-section textarea{
	width : 100%;
	height : 200px;
}

#form-section .btn {
	width : 120px;
}
 
 .gototop{
	position:fixed;
	display:none;
	right : 20px;
	bottom : 20px;
	width : 51px;
	height : 51px;
	background:url(../images/totop.png) center center no-repeat; 
 }