@charset "utf-8";
body {
	margin: 0px;
	font-size: 1em;
	letter-spacing: 0.05em;
	color: #333;
}
img {
	border: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
 *border-collapse: expression('separate', cellSpacing = '0');
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}
a:link, a:visited, a:hover, a:active {
	text-decoration: none !important;
}
table tr td {
	padding: 0;
}
h1, h2, h3, h4, h5, h6, ul, li, ol {
	margin: 0;
	padding: 0;
}
::selection {
	background: #000;
	color: #d8e032;
}
::-moz-selection {
	background:#000;
	color:#d8e032;
}
/*表單設定*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Source Sans Pro,Helvetica Neue,Roboto,Noto Sans CJK TC,Heiti TC,-apple-system,BlinkMacSystemFont,Ubuntu,Cantarell,微軟正黑體,sans-serif;
}
select {
	border: 1px solid #ccc;
	padding: 8px 1px;
	color: #666;
}
input {
	border: 1px solid #ccc;
	padding: 8px 5px;
	color: #666;
}
textarea {
	border: 1px solid #ccc;
	padding: 3px 5px;
	color: #666;
}
input[type="submit"], input[type="reset"], input[type="button"], button {
	-webkit-appearance: none;
}

@media (min-width: 959px) {
/*選單*/
#navmenu {
	display: none;
}
#menu-btn {
	display: none;
}
#toolbarnav {
	display: none;
}
/*主內容*/
#content {

}
#pagebody {
	margin: 0;
}
#w {
	margin: 0;
}
}


/*統一設定*/
.rel {
	position: relative;
}
.container {
	margin: 0 auto;
	max-width: 1200px;
	width: auto !important;
	width: 980px;
}
.container02 {
	margin: 0 auto;
	width: 90%;
}
.container04 {
	margin: 0 auto;
	padding: 25px;
}
.addtop0 {
	margin-top: 0 !important;
	padding: 0 !important;
}
.addtop25 {
	padding-top: 25px;
}
.addtop50 {
	margin-top: 50px !important;
}
.addtop100 {
	margin-top: 100px !important;
}
.addleft25 {
	margin-left: 25px;
}
.addbottom25 {
	margin-bottom: 25px;
}
.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: url(../images/svg/loader.svg) center no-repeat #ffffff;
}
.web {
	display: block;
}
.mobile {
	display: none;
}
.yellow {
 color: #fff45c;
}
.orange {
 color: #ffa912;
}
.green {
 color: #d8e032;
}
.font-big {
 font-size: 110%;
}

/*全網站icon設定*/
.icon-arrow{
  background: url(../images/svg/arrow.svg) left top;
	background-repeat: no-repeat;
	-moz-background-size:20px;
	-webkit-background-size:20px;
	-o-background-size:20px;
	background-size:20px;	
	padding-left: 25px;
}

/*上方*/
header {
	width: 100%;
	height: 100px;
	position: fixed;
	z-index: 250;
	top: 0;
	left: 0;		
	z-index: 250;
}
header.fix {
	width: 100%;
	position: fixed;
	z-index: 250;
	top: 0;
	left: 0;	
	height: 50px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	background: #1d1d1d;
}
#logo {
	position: absolute;
	top: 25px;
	left: 15px;
  color: #fff;
}
header.fix #logo {
	position: absolute;
	top: 8px;
	left: 5px;
	height: 40px;
	overflow: hidden;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	color: #fff;
}

/*純文字logo設定*/
#logo a {
 color: #fff;
}
#logo div.small {
 font-size: 0.5em;
 font-weight: 500;
}

/*純文字logo設定-fix*/
header.fix #logo a {
 color: #fff;
 font-weight: 300;
}
header.fix #logo span.big {
 font-size: 100%;
}
header.fix #logo div.small {
 display: none;
}

/*連結*/
nav {
	z-index: 250;
	height: 50px;
	position: absolute;
	top: 25px;
	right: 15px;
}
nav li {
	list-style-type: none;
}
header.fix nav {
	z-index: 250;
	height: 50px;
	position: absolute;
	top: 0;
	right: 45px;
}
header.fix nav li ,header.fix nav li a{
	color: #fff;
}
/*第一層*/
ul.navigation li {
	position: relative;
	list-style-type: none;
	z-index: 100;
	display: inline-block;
	color: #fff;
	text-align: center;
	font-size: 1em;
	line-height: 50px;
	padding: 0 10px;
}
ul.navigation li a {
	display: block;
	text-align: center;
	color: #fff;
}
ul.navigation li:hover a{
	color: #fff;
}
ul.navigation li:last-child {
	border-right: none;
}
ul.navigation li ul {
	width: 100%;
	display: none;/*隱藏*/
	position: absolute;
	left: 0;
}
ul.navigation li:hover > ul {
	display: block;/*出現*/
}
ul.navigation ul li {
	color: #fff;
	width: 100%;
	background: #433d3b;
	line-height: 25px;
	padding: 10px 0;
}
ul.navigation ul li:hover {
	background: #d8e032;

}
ul.navigation ul li:hover a {
	color: #000;
}
ul.navigation ul li:last-child {
	border-bottom: none;
}
/*連結高度*/
.addheight {
	text-align: center;
}
.addheight:hover {
	background: #433d3b;
	color: #fff;
}
.addheight ul li a {
	color: #fff;
}
.addheight ul li a:hover {
}



/*首頁bammer波動*/
.wave-container {
  position: relative;
  background-image: url(../images/banner.png);
	background-size: cover;
	background-position: center;
  width: 100%;
  height: 800px;
  margin: 0 auto;
}
#wave {
  position: absolute;
  bottom: -70%;
	left: 0;
  width: 200px;
  height: 100px;
	
}
.displayno {
    -webkit-transition: opacity 1.0s ease-in;
       -moz-transition: opacity 1.0s ease-in;
         -o-transition: opacity 1.0s ease-in;
                                  opacity: 0;
}
#wave::before {
	content: "";
	background-color: #fff;
	border-radius: 40%;
	position: absolute;
	opacity: 0.4;
	left: -50%;
	bottom: -50%;
	width: 1024px;
	height: 1024px;
  -webkit-animation: spin 15s linear infinite;
  -moz-animation: spin 15s linear infinite;
  animation: spin 15s linear infinite;
}
#wave::after {
content: "";
	background-color: #fff;
	border-radius: 40%;
	position: absolute;
	opacity: 0.4;
	left: 0;
	bottom: -50%;
	width: 1024px;
	height: 1024px;
  -webkit-animation: spin 8s linear infinite;
  -moz-animation: spin 8s linear infinite;
  animation: spin 8s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*首頁banner標題*/
#word {
 text-align: center;
 color: #fff;
 padding-top: 200px;
}
#word h2 {
 font-size: 1.2em;
 font-weight: 500;
 letter-spacing:15px;
}
#word h4.en {
 font-size: 3.5em;
 font-weight: 800;
 font-family: 'Dela Gothic One', cursive;
 font-family: 'Roboto', sans-serif;
}
#word b {
 font-size: 2em;
 font-weight: 500;
 letter-spacing:5px;
}
#word p {
 font-size: 1em;
 line-height: 2em;
 color: #eee;
}

/*首頁裝飾線條*/
#decoration-line {
 position: absolute;
 left: 50%;
 background: url(../images/decoration-line.png);
 width: 199px;
 height: 378px;
 opacity: 0;
}

/*首頁行銷服務標題*/
#index-service-title {
 text-align: center;
}
#index-service-title h2 {
 font-size: 2em;
 color: #757575;
 margin-bottom: 0;
 letter-spacing: 5px;
}
#index-service-title h4.en {
 font-size: 6em;
 color: #eeeeee;
 margin-top: -20px;
}
.wave-container:hover #decoration-line {
 opacity: 1;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}


/*首頁 網路行銷服務*/
.index-service , .index-service a{
 color: #fff;
 text-align: center;
}
.index-service h4 {
 font-size: 4em;
 font-weight: 900;
}
.index-service h5 {
 font-size: 2em;
 font-weight: 500;
}
.index-service p {
 line-height: 2em;
 margin: 10px;
}
/*六項服務單獨設定*/
.service-mouth {
 background-image: url(../images/service-community01.jpg);
 background-repeat: repeat-x;
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
 width: 100%;
 padding: 50px;
}
.service-mouth a {
 display: block;
 width: 600px;
 margin: 50px auto;
 padding:150px 50px;
 background:rgba(190,191,97,0.8);
-webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}
.service-mouth a:hover {
 background: #000;
-webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.service-forum {
 background-image: url(../images/service-forum.jpg);
 background-size: cover;
 background-position: center;
 padding: 180px 25px;
}
.service-forum a {
 display: block;
 width: 700px;
 padding: 50px;
 margin: 50px auto;
}
.service-community {
 background-image: url(../images/service-community.jpg);
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
 width: 100%;
 padding:150px 50px;
}
.service-community a {
 display: block;
 width: 700px;
 padding: 50px;
 margin: 50px auto;
}
.service-info {
 background-image: url(../images/service-info.jpg);
 background-size: cover;
 background-position: center;
 padding:50px 50px;
}
.service-info a {
 display: block;
 width: 700px;
 padding: 50px;
 margin: 50px auto;
}
.service-info .jump {
  position: absolute;
	top: -50px;
	left: -250px;
}
.service-threas {
 background-image: url(../images/bannerin-threads.jpg);
 background-size: cover;
 background-position: center;
 padding:100px 50px 200px 50px;
}

/*左字右圖-影音行銷*/
.service-video {
 background-color: #7f708f;
}
.service-video .left-txt {
 float: left;
 width: 50%;
 height: 50vh;
 padding:15% 10% 0 10%;
 position: relative;
}
.service-video .left-txt a {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 height: 250px;
 width: 450px;
 margin-top: -125px;
 margin-left: -225px;
}
.service-video .right-img {
 float: right;
 width: 50%;
 height: 50vh;
 background-image: url(../images/service-video.jpg);
 background-position: center;
 -moz-background-size: cover;
 -webkit-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}


/*左圖右字-廣編合作*/
.service-ad {
 background-color: #031722;
}
.service-ad .left-img {
 float: left;
 width: 50%;
 height: 50vh;
	background-image: url(../images/service-ad.jpg);
	background-position: center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.service-ad .right-txt {
 float: right;
 width: 50%;
 height: 50vh;
 padding:50px 50px 50px 50px;
 position: relative;
 text-align: center;
}
.service-ad .right-txt a {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 height: 250px;
 width: 450px;
 margin-top: -125px;
 margin-left: -225px;
}


/*首頁-品牌行銷顧問*/
#index-marketing {
 background: url(../images/index-marketing.jpg);
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
 width: 100%;
 height: 600px;
 padding:150px 50px 50px 50px;
 margin-bottom: 50px;
 text-align: center;
 color: #fff;
}
#index-marketing h3 {
 font-size: 4em;
 font-weight: 900;
 margin-bottom: 25px;
}
#index-marketing p {
 font-size: 1.1em;
 line-height: 2em;
}
#index-marketing a {
 display: block;
 width: 120px;
 height: 50px;
 line-height: 50px;
 border: 1px solid #fff;
 color: #fff;
 margin: 15px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
#index-marketing a:hover {
 background: #000;
 border: 1px solid #000;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

/*首頁-自媒體+設計*/
#index-design {
 text-align: center;
 margin-bottom: 60px;
 padding-bottom: 60px;
 border-bottom: 1px solid #eee;
}
#index-design h4 {
 font-size: 4em;
 color: #515151;
 font-weight: 700;
}
#index-design a {
 display: block;
 width: 120px;
 height: 50px;
 line-height: 50px;
 border: 1px solid #000;
 color: #000;
 margin: 15px auto;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}
#index-design a:hover {
 background: #000;
 color: #fff;
 border: 1px solid #000;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

/*首頁-行銷趨勢*/
#index-blog {
 margin: 35px 0;
}
#index-blog h4 {
 text-align: center;
 font-size: 4em;
 font-weight: 500;
}
#index-blog .column {
	margin-bottom: 25px;
}
#index-blog .column .blog {
	float: left;
  width:calc(100% / 4 );
  padding: 25px;
}
#index-blog .column .blog img {
 width: 100%;
}
#index-blog .column .blog h5 {
	font-size: 1.1em;
	font-weight: 500;
	margin: 15px 0 0 0;
	line-height: 25px;
}
#index-blog .column .blog h5 a {
	color: #0A0707;
}

/*首頁底部*/
#index-bottom {
 text-align: center;
 background: url(../images/bg-bottom.jpg);
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 padding: 150px;
}
#index-bottom h4 {
 font-size: 3em;
}
#index-bottom p {
 font-size: 1.1em;
 line-height: 1.7em;
}
#index-bottom ul{
 text-align: center;
}
#index-bottom li {
 display: inline-block;
 margin: 25px ;
 padding: 20px 5px 5px 5px ;
 font-size: 1.2em;
}
#index-bottom li:hover {
 color: #d8e032;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

/*----------------------網路行銷服務----------------------*/
#service {
 text-align: center;
}
#service .service {
 width: 100%;
 padding: 50px;
}
#service .service a {
	display: block;
	width: 700px;
	padding: 50px;
	margin: 50px auto;
	color: #fff;
}
#service .service h4 {
 font-size: 4em;
}
#service .service h5 {
 font-size: 1.2em;
}
/*網路行銷服務的口碑行銷-額外設定*/
#service .service-mouth {
 background-image: url(../images/bannerin-service-mouth.jpg);
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
 width: 100%;
 padding: 50px;
}
#service > .service-mouth a {
 display: block;
 width: 600px;
 margin: 50px auto;
 padding:150px 50px;
 background: none;
 border-radius: 0;
}
#service > .service-video {
	background-image: url(../images/bannerin-service-video.jpg);
	background-size: cover;
	background-position: center;
	padding: 50px; 
	background-attachment: fixed;
}
#service > .service-ad {
	background-image: url(../images/bannerin-service-ad.jpg);
	background-size: cover;
	background-position: center;
	padding: 50px; 
}
#service > .service-threads {
	background-image: url(../images/bannerin-threads.jpg);
	background-size: cover;
	background-position: center;
	padding: 50px; 
}
/*網路行銷服務的口碑行銷-底部影片*/
#service-all {
 text-align: center;
 background-color: #2c2b2d;
}
video {
	height: 90vh;
	background-color: #2c2b2d;
}



/*麵包屑*/
#sitemap {
	position: absolute;
	right: 20px;
	bottom: 20px;
}
#sitemap ul {
	text-align: right;
}
#sitemap li , #sitemap li a {
	display: inline-block;
	font-size: 0.8em;
	color: #fff;
	padding: 0 5px;
}
#sitemap li a:hover {
  color: #d8e032;
 }
#sitemap li::after {
  content: " > ";
}
#sitemap li:last-child::after {
  content: "";
}
#sitemap li:first-child {
 background-image: url(/images/svg/home.svg);
 background-repeat: no-repeat;
 background-position: left center;
 padding-left: 17px;
-moz-background-size:15px 15px;
-webkit-background-size:15px 15px;
-o-background-size:15px 15px;
background-size:15px 15px;
}

/*回上頁*/
#back {
	width: 105px;
	margin: 50px auto;
	text-align: center;
	cursor: pointer;
	-mox-opacity: 0.5;
	filter: alpha(opacity=50);
	opacity: 0.5;
}
#back:hover {
	-mox-opacity: 1;
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-transition: ease-in-out 0.3s;
	-o-transition: ease-in-out 0.3s;
	-webkit-transition: ease-in-out 0.3s;
	transition: ease-in-out 0.3s;
}
#back span {
	float: left;
	display: block;
	padding: 5px;
}
/*分頁數字*/
#page {
	margin: 25px 0;
}
#page ul {
	text-align: center;
}
#page li {
	display: inline-block;
	margin: 0 5px;
	font-size: 13px;
	color: #000;
}
#page li a {
	color: #999;
}
#page li a:hover {
	color: #000;
}
/*編輯器*/
.ckediter{
 padding: 10px;
}
.ckediter img {
	max-width: 100%;
	height:auto !important;
}
.ckediter-date {
	padding-left: 10px;
	color: #00a0e9;
}
.ckediter h2 {
  font-size: 1.8em;
  font-weight: 800;
  color: #666;
  padding-top: 50px;
  padding-bottom: 10px;
}
.ckediter h3 {
  color: #b22222;
  position: relative;
  padding-left: 10px;
}
.ckediter h3::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 3px;
  height: 13px;
  background: #7d1919;
}
.ckediter a {
  display: inline-block;
  background: #000;
  color: #d8e032;
  padding: 3px 5px;
}
.ckediter a:hover {
  background: #d8e032;
  color: #000;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

/*共用按鈕*/
a.btn {
 display: block;
 width: 200px;
 height: 50px;
 line-height: 50px;
 border: 1px solid #000;
 color: #000;
 margin: 15px auto;
 text-align: center;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}
a.btn:hover {
 background: #000;
 color: #fff;
 border: 1px solid #000;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}


/*網路行銷服務-內頁上方共用*/
#bannerin {
	background-position: center;
	background-position: top;
  background-attachment: fixed;
  -moz-background-size:cover;
  -webkit-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
	width: 100%;
	height: 100vh;
	position: relative;
}
#bannerin-word {
 position: absolute;
 text-align: center;
 width: 600px;
 height: 150px;
 top: 50%;
 left: 50%;
 margin-top: -75px;
 margin-left: -300px;
}
#bannerin-word h1 {
 font-size: 5em;
 line-height: 1.1em;
 font-weight: 900;
 color: #fff;
 padding-bottom: 25px;
}
#bannerin-word h4 {
 font-size: 1.8em;
 line-height: 1.1em;
 font-weight: normal;
 color: #fff;
 padding: 0 15px;
}
#bannerin-word p {
 color: #eee;
 line-height: 1.5em;
}
/*----------------------網路行銷服務-內頁上方共用-背景---------------------*/
.service-mouth-bg {
 background-image: url(../images/bannerin-service-mouth.jpg);
}
.service-forum-bg {
 background-image: url(../images/bannerin-service-forum.jpg);
}
.bannerin-service-community {
 background-image: url(../images/bannerin-service-community.jpg);
}
.bannerin-service-info {
 background-image: url(../images/bannerin-service-info.jpg);
}
.bannerin-service-video {
 background-image: url(../images/bannerin-service-video.jpg);
}
.bannerin-service-ad {
 background-image: url(../images/bannerin-service-ad.jpg);
}
.service-threads {
 background-image: url(../images/bannerin-threads.jpg);
}

/*--------------------------------口碑行銷--------------------------------*/
/*口碑行銷01*/
#service-mouth-01 {
 background-color: #bebf61;
 color: #fff;
 position: relative;
 height: 60vh;
}
#service-mouth-01 h3 {
 font-size: 4em;
}
#service-mouth-01 h4 {
 font-size: 3em;
}
#service-mouth-01 p {
 font-size: 1.5em;
}
#service-mouth-01-txt {
 position: absolute;
 top: 30%;
 left: 40%;
}
#service-mouth-01-img {
 position: absolute;
 top: -20%;
 left: 10%;
}
@media (min-width: 959px) and (max-width: 1660px) {
#service-mouth-01 {
 background-color: #bebf61;
 background-image: url(../images/service-mouth-01.png);
 background-position: left;
 background-repeat: no-repeat;
 font-size: 80%;
}
#service-mouth-01-img {display: none;}
}


/*口碑行銷02*/
#service-mouth-02 {
 background-color: #000;
 color: #fff;
 height: 60vh;
 overflow: hidden;
}
#service-mouth-02 .left-img {
 float: left;
 width: 60%;
}
#service-mouth-02 .right-txt {
 float: right;
 width: 40%;
 padding: 5%;
}
#service-mouth-02 .right-txt h4 {
 font-size: 4em;
 font-weight: 900;
}
@media (min-width: 959px) and (max-width: 1660px) {
#service-mouth-02 {
 background-color: #000;
 background-image: url(../images/service-mouth-02.jpg);
 height: auto;
 color: #000;
 text-align: center;
}
#service-mouth-02 .left-img {display: none;}
#service-mouth-02 .right-txt {width: 100%; padding: 10%; }
}

/*口碑行銷03*/
#service-mouth-03 {
  background-image: url(../images/service-mouth-03.jpg);
  background-position: center;
	background-position: top;
	background-attachment: fixed;
	background-size: cover;
	width: 100%;
	padding-bottom: 50px;
	position: relative;
}
#service-mouth-03 h2 {
 padding: 10% 20px;
 color: #fff;
 font-size: 4em;
 text-align: center;
}
#service-mouth-03 ul {
 text-align: center;
}
#service-mouth-03 li {
 display: inline-block;
 width: 400px;
 height: 400px;
 -webkit-border-radius: 250px;
 -moz-border-radius: 250px;
 border-radius: 250px;
 margin-left: -50px;
 margin-top: -100px;
 border: 1px solid #fff;
 padding: 50px;
 position: relative;
}
#service-mouth-03 li h4 {
 font-size: 3em;
 color: #fff;
 display: inline-block;
}
#service-mouth-03 li p {
 color: #fff;
}
#service-mouth-03 li a {
 color: #fff;
 border-bottom: 1px solid #fff;
}
#service-mouth-03 li:last-child h4 {
 font-size: 2.2em;
}
#service-mouth-03 li.style01 {
 background: rgba(169,48,47,0.6);
}
#service-mouth-03 li.style02 {
 background: rgba(135,91,51,0.6);
}
#service-mouth-03 li.style03 {
 background: rgba(27,27,27,0.6);
}
#service-mouth-03 li .word {
 position: absolute;
 top: 80px;
 left: 80px;
}
#service-mouth-03 li .word03 {
 position: absolute;
 top: 50px;
 left: 60px;
}

/*口碑行銷04*/
#service-mouth-04 {
 margin: 50px 0;
}
#service-mouth-04 .colum {
 border: 1px solid #9fa02e;
 margin-bottom: 50px;
}
#service-mouth-04 .left-img {
 float: left;
 width: 50%;
}
#service-mouth-04 .right-txt {
 float: right;
 width: 50%;
 padding:50px;
}
#service-mouth-04 .left-txt {
 float: left;
 width: 50%;
 padding:50px;
}
#service-mouth-04 .right-img {
 float: right;
 width: 50%;
}
#service-mouth-04 .colum a {
 color: #000;
}
#service-mouth-04 .colum h3 {
 background: #9fa02e;
 color: #fff;
 padding: 15px 50px;
 margin: 5px -65px;
 font-size: 2em;
}
#service-mouth-04 .colum strong.big {
 font-weight: 900;
 font-size: 120%;
}
#service-mouth-04 .colum h4 {
  font-size: 1.5em;
	color: #626262;
 font-weight: 400;
}
#service-mouth-04 .colum h5 {
  font-size: 1.3em;
	color: #9fa02e;
	margin-top: 15px;
 font-weight: 400;
}
#service-mouth-04 .colum p {
 color: #626262;
 line-height: 1.5em;
}

/*--------------------------------論壇行銷--------------------------------*/
/*論壇行銷01*/
#service-forum-01 {
 background-image: url(../images/service-forum01.jpg);
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
 background-position: center center;
 height: 100vh;
 position: relative;
}
#service-forum-01-txt {
 width: 890px;
 padding: 15px 25px;
 position: absolute;
 top: 30vh;
 left: 50%;
 margin-left: -445px;
 background-image: url(../images/service-forum01.png);
 background-position: top center;
 background-repeat: no-repeat;
}
#service-forum-01-txt h3 {
 font-size: 4em;
 font-weight: 900;
 color: #fc6a68;
}
#service-forum-01-txt p {
 font-size: 1.5em;
 line-height: 1.8em;
 font-weight: 900;
 margin-top: 40px;
 color: #fff;
}
/*論壇行銷02*/
#service-forum-02 {
 height: 730px;
 padding-top: 225px;
 position: relative;
 font-size: 4em;
 font-weight: 900;
 color: #fc6a68;
 text-align: center;

}
#service-forum-02-img {
 position: absolute;
 left: 50%;
 margin-left: -9px;
 margin-top: -170px;
 top: 0;
}

/*論壇行銷03*/
#service-forum-03 .colum {
 float: left;
 width: 50%;
 height: 50vh;
 text-align: center;
 padding: 5% 3%;
}
#service-forum-03 .colum h4 {
 font-size: 3em;
 line-height: 1.1em;
 font-weight: 900;
}
#service-forum-03 .colum p {
 font-size: 1.5em;
} 
#service-forum-03 .s1 {
 background-color: #fb625c;
 color: #fff;
}
#service-forum-03 .s2 {
 background-color: #ea9491;
 color: #fff;
}
#service-forum-03 .s3 {
 background-color: #ecc9c8;
 color: #fb625c;
}
#service-forum-03 .s4 {
 background-color: #fbf6f6;
 color: #ea9491;
}


/*--------------------------------社群行銷--------------------------------*/
/*社群行銷01*/
#service-community-01 {
  background-image: url(../images/service-community01.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	text-align: center;
	padding: 50px 25px;
  color: #b19679;
}
#service-community-01 h3 {
  font-size: 3.5em;
	font-weight: 900;
}
#service-community-01 p {
  font-size: 1em;
	line-height: 2.2em;
}
#service-community-01 ul {
 text-align: center;
}
#service-community-01 li {
 display: inline-block;
 width: 168px;
 height: 168px;
}
/*社群行銷02*/
#service-community-02 {
 background-color: #b19679;
 background-image: url(../images/service-community02.jpg);
 background-repeat: no-repeat;
 background-position: bottom center;
 background-attachment: fixed;
 text-align: center;
 padding: 80px 25px 150px 25px;
}
#service-community-02 p {
  font-size: 1.8em;
	line-height: 1.5em;
	color: #fff;
}
#service-community-02 h2 {
  font-size: 3.5em;
	font-weight: 900;
	color: #fff;
}
#service-community-icon {
 width: 200px;
 height: 200px;
 margin: -100px auto 10px auto;
 text-align: center;
 padding-top: 60px;
 background: rgba(216,224,50,0.5);
 color: #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

/*社群行銷03*/
#service-community-03 {
 color: #b19679;
 padding: 0 0 50px 0;
}
#service-community-03 h3 {
 font-size: 4em;
 padding: 25px;
 text-align: center;
}
#service-community-03 .colum {
 float: right;
 width: 50%;
 height: 40vh;
 padding: 5% 3%;
 border: 1px solid #d1c0a5;
 margin-bottom: -1px;
 margin-right: -1px;
}
#service-community-03 .colum h4 {
 font-size: 2em;
 line-height: 1.1em;
 font-weight: 900;
}
#service-community-03 .colum p {
 font-size: 1.5em;
} 
#service-community-03 .bg {
 background-image: url(../images/service-community03.jpg);
 -moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#service-community-03 .colum:hover {
  background-color: #fef9f2;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}


/*--------------------------------內容行銷--------------------------------*/
/*內容行銷01*/
#service-info-01 {
	background-image: url(../images/service-info-01.jpg);
	background-position: center;
	background-position: top;
	background-attachment: fixed;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 70vh;
	position: relative;
}
#service-info-01-txt {
 position: absolute;
 top: 20%;
 right: 15%;
 background: rgba(0,0,0,0.6);
 padding: 50px;
 color: #fff;
}
#service-info-01-txt h4 {
 font-size: 4em;
}
#service-info-01-txt h5 {
 font-size: 2em;
 display: inline-block;
}
#service-info-01:hover h5 {
 background: #000;
 color: #d8e032;
 padding: 0 10px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
/*內容行銷02*/
#service-info-02 {
	background-image: url(../images/service-info-02.jpg);
	background-position: center;
	background-position: top;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 882px;
}
#service-info-02 h2 {
 text-align: center;
 padding-top: 400px;
 font-size: 4em;
 color: #402d2d;
}
#service-info-02:hover span.pink {
 color: #c96e6f;
}
#service-info-02 span.font-small {
 font-size: 80%;
 color: #c96e6f;
}

/*內容行銷03*/
#service-info-03 {
	background-color: #dda239;
}
#service-info-03 .left {
  float: left;
  width: 25%;
	height: 50vh;
	background-image: url(../images/service-info-03.jpg);
	-moz-background-size:cover;
  -webkit-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}
#service-info-03 .right {
  float: right;
  width: 75%;
	padding: 100px 50px 25px 50px;
	color: #fff;
	text-align: center;
}
#service-info-03 .right h4 {
 font-size: 4em;
}
#service-info-03 .right h5 {
 font-size: 2em;
}
#service-info-03 .right p {
 line-height: 2em;
}
#decoration-line-white {
 position: absolute;
	left: 30%;
	margin-top: -300px;
	top: 0;
 opacity: 0;
}
#service-info-03:hover #decoration-line-white {
 opacity: 100;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
/*內容行銷04*/
#service-info-04 {
 margin: 50px 0;
}
#service-info-04 .colum {
 border: 1px solid #9fa02e;
 margin-bottom: 50px;
}
#service-info-04 .left-img {
 float: left;
 width: 50%;
}
#service-info-04 .right-txt {
 float: right;
 width: 50%;
 padding:50px;
 margin-bottom: 50px;
}
#service-info-04 .left-txt {
 float: left;
 width: 50%;
 padding:50px;
}
#service-info-04 .right-img {
 float: right;
 width: 50%;
}
#service-info-04 .colum a {
 color: #000;
}
#service-info-04 .colum h3 {
 background: #dda239;
 color: #fff;
 padding: 15px 50px;
 margin: 5px -65px;
 font-size: 2em;
}
#service-info-04 .colum h4 {
  font-size: 2em;
	color: #dda239;
 font-weight: 800;
}
#service-info-04 .colum p {
 color: #626262;
 line-height: 1.8em;
}


/*--------------------------------影音行銷--------------------------------*/
/*影音行銷01*/
#service-video-01 {
	background-image: url(../images/service-video-01.jpg);
	background-position: center;
	background-position: top;
	background-attachment: fixed;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 70vh;
	padding-top: 10vh;
}
#service-video-01-txt {
  background:rgba(37,37,42,0.7);
	padding: 50px;
	color: #fff;
	text-align: center;
}
#service-video-01-txt h3 {
  font-size: 4em;
  font-weight: 800;
}
#service-video-01-txt p {
 line-height: 2em;
}
/*影音行銷02*/
#service-video-02 {
	height: 70vh;
}
#kol {
  float: left;
	width: 50%;
	background-image: url(../images/service-video-02.jpg);
	background-position: center;
	background-position: top;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 70vh;
}
#service-video-02 .right {
  float: right;
	width: 50%;
	padding: 5%;
}
#service-video-02 .right h4 {
 font-size: 4em;
 font-weight: 800;
 color: #63999e;
}
#service-video-02 .right h5 {
 font-size: 2em;
 font-weight: 800;
 color: #7ab4b7;
}
#service-video-02 .right p {
 color: #6e6e6e;
}
/*影音行銷03*/
#service-video-03 {
	background-image: url(../images/service-video-03.jpg);
	background-position: center;
	background-position: top;
	background-attachment: fixed;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100vh;
	padding-top: 30vh;
}
#service-video-03-txt {
	padding: 50px;
	color: #fff;
	text-align: center;
}
#service-video-03-txt h2 {
  font-size: 4em;
  font-weight: 800;
	padding-bottom: 20px;
}
#service-video-03-txt h3 {
  font-size: 2em;
	display: inline-block;
	padding: 0 5px;
}
#service-video-03-txt h4 {
  font-size: 1.5em;
}
#service-video-03:hover #service-video-03-txt h3 {
 background: #000;
}


/*--------------------------------廣編合作--------------------------------*/
/*廣編合作01*/
#service-ad-01 {
/* height: 70vh;*/
 text-align: center;
 padding:50px 0; 
}
#service-ad-01 h2 {
 font-size: 4em;
 font-weight: 800;
 color: #1e2944;
}
#service-ad-01 h3 {
 font-size: 2em;
 color: #374873;
}
#service-ad-01 ul {
 text-align: center;
}
#service-ad-01 li {
 display: inline-block;
 margin: 80px 25px 50px 25px;
}

/*--------------------------------Threads行銷--------------------------------*/
/*脆行銷頁top*/
#bannerin.service-threads #bannerin-word h1 {
 position: relative;
}
#bannerin.service-threads #bannerin-word h1::before {
 position: absolute;
 top: -120px;
 left: 50%;
 width: 120px;
 height: 120px;
 margin-left: -60px;
 background-image: url(../images/threads-icon.png);
 content: '';
}
#bannerin.service-threads #bannerin-word h2{
 color: #fff;
 font-weight: 600;
}
/*脆行銷01*/
#service-threads-01 {
 padding: 180px 0;
 text-align: center;
 position: relative;
 min-height: 580px;
}
#service-threads-01 #hand {
 position: absolute;
 right: 0;
 bottom: 0;
}
#service-threads-01-in {
 position: absolute;
 top: 50%;
 margin-top: -81px;
}
@media (min-width: 1660px) and (max-width: 1920px) {#service-threads-01-in {left: 15%;}}
@media (min-width: 1440px) and (max-width: 1660px) {#service-threads-01-in {left: 10%;}}
@media (min-width: 1280px) and (max-width: 1440px) {#service-threads-01-in {left: 8%;}}
@media (min-width: 959px) and (max-width: 1280px) {#service-threads-01-in {left: 1%;}}


#service-threads-01 h2 {
 font-size: 2.8em;
 font-weight: 800;
}
#service-threads-01 h2 span {
 position: relative;
 padding-left: 62px;
}
#service-threads-01 h2 span::before {
 content: '';
 background: url(../images/threads-icon02.png);
 background-size: cover;
 width: 62px;
 height: 62px;
 position: absolute;
 top: 0;
 left: 0;
}

#service-threads-01 h3 {
 padding: 10px;
 font-weight: 800;
}
#service-threads-01 h3 .yellow {
 color: #fff100;
}
#service-threads-01-arrow {
  position: relative;
  width: 600px; /* 矩形的寬度 */
  height: 48px; /* 矩形的高度 */
  background-color: #333; /* 背景顏色 */
  border-radius: 10px; /* 圓角半徑 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  margin: 0 auto;
}
/* 右側箭頭 */
#service-threads-01-arrow::after {
  content: '';
  position: absolute;
  right: -19px; /* 調整箭頭的位置 */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #333; /* 與矩形相同的顏色 */
}
/*脆行銷02*/
#service-threads-02 {
  background-image: url(../images/service-threads-01.jpg);
  background-position:left; 
  background-repeat: no-repeat;
  background-color: #323232;
  min-height: 700px;
  color: #fff;
  padding: 25px 25px 25px 675px;
}
@media (min-width: 1660px) and (max-width: 1920px) {#service-threads-02 {padding: 25px 25px 25px 600px;}}
@media (min-width: 1440px) and (max-width: 1660px) {#service-threads-02 {padding: 25px 25px 25px 500px;}}
@media (min-width: 1280px) and (max-width: 1440px) {#service-threads-02 {padding: 25px 25px 25px 400px;}}
@media (min-width: 959px) and (max-width: 1280px) {#service-threads-02 {padding: 25px 25px 25px 300px;}}

#service-threads-02 h2{
 opacity: 0.8;
 font-size: 2.5em;
 padding: 10px;
}
#service-threads-02 ul {
 list-style-type: none;
 padding: 25px;
}
#service-threads-02 li {
 padding: 20px 10px 5px 10px;
 font-size: 1.3em;
 font-weight: 700;
 position: relative;
}
#service-threads-02 li::before {
 content: '';
 background-image: url(../images/threads-02-arrow.png);
 width: 35px;
 height: 45px;
 position: absolute;
 top: 45px;
 left: -31px;
}
#service-threads-02 li:last-child::before {
 background-image: none;
}
#service-threads-02-arrow {
  position: relative;
  width: 600px; /* 矩形的寬度 */
  height: 48px; /* 矩形的高度 */
  background-color: #c2c25b; /* 背景顏色 */
  border-radius: 10px; /* 圓角半徑 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2em;
  font-weight: 800;
  letter-spacing: 0.05em;
}
/* 右側箭頭 */
#service-threads-02-arrow::after {
  content: '';
  position: absolute;
  left: -18px; /* 調整箭頭的位置 */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #c2c25b; /* 與矩形相同的顏色 */
}

/*脆行銷03*/
#service-threads-03 {
 background-image: url(../images/service-threads-02.jpg);
 background-repeat: no-repeat;
 background-position: bottom;
 /*background-attachment: fixed;*/
 padding: 170px 50px;
}
#service-threads-03 h2 {
 font-size: 2.5em;
 font-weight: 800;
}
#service-threads-03 h2 {
 font-size: 2.8em;
 font-weight: 800;
}
#service-threads-03 h3 {
 padding: 20px 0 0 0;
 font-weight: 800;
}
#service-threads-03 p {
 padding: 10px 0;
}
#service-threads-03 a.btn-threats {
 display: inline-block;
 padding: 10px 20px;
 background: #d8e032;
 color: #000;
 font-weight: 800;
 font-size: 1.1em;
 border-radius: 10px; 
}

/*-----------------------其他內頁上方共用-背景---------------------------*/
#bannerin-other {
  background-attachment: fixed;
	background-position: top center;
	height: 40vh;
	position: relative;
}
#bannerin-other-word {
 position: absolute;
 text-align: center;
 width: 900px;
 height: 150px;
 top: 50%;
 left: 50%;
 margin-top: -15px;
 margin-left: -450px;
}
#bannerin-other-word h1 , #bannerin-other-word h2{
 font-size: 4em;
 line-height: 1.1em;
 font-weight: 900;
 color: #fff;
 padding-bottom: 25px;
}
#bannerin-other-word h4 {
 font-size: 2em;
 line-height: 1.1em;
 font-weight: normal;
 color: #fff;
 padding: 0 15px;
}
#bannerin-other-word p {
 color: #fff;
 padding: 0 15px;
 margin: 0;
}
.bannerin-marketing {
 background: #000;
}
.bannerin-service {
 background-image: url(../images/bg-cell.jpg);
}
.bannerin-blog {
 background-image: url(../images/blog.jpg);
}
.bannerin-design-about {
 background-image: url(../images/design-about.jpg);
}
.bannerin-design {
 background-image: url(../images/design.jpg);
}


/*--------------------------------品牌行銷顧問--------------------------------*/
/*第一塊*/
#marketing {
 height: 60vh;
}
#marketing #happy-people {
  float: left;
	width: 40%;
	background-image: url(../images/marketing01.jpg);
	background-position: center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 60vh;
}
#marketing #marketing-txt  {
  float: right;
	width: 60%;
	padding: 5%;
	height: 60vh;
	background: #a8a93e;
	color: #fff;
}
#marketing #marketing-txt h3 {
 font-size: 4em;
 font-weight: 800;
}
#marketing #marketing-txt h4 {
 font-weight: 500;
 line-height: 2em;
 display: inline-block;
}
#marketing #marketing-txt p {
 font-weight: 500;
 line-height: 2em;
 margin: 0;
}
#marketing:hover #marketing-txt h4  {
 background: #000;
 padding: 0 5px;
}
/*第二塊-六項能力*/
#marketing-ability {
 border-top: none;
 border-right: 1px solid #3b3b3b;
 border-bottom: none;
 border-left: 1px solid #000;
	background-image: url(../images/index-marketing.jpg);
	background-position: bottom center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
#marketing-ability .colum {
 float: left;
 width: 50%;
 padding: 3% 5% 3% 10%;;
 background-color:rgab(59,59,59,0.9);
 color: #fff;
 border-top: 1px solid #000;
 border-right: 1px solid #3b3b3b;
 border-bottom: 1px solid #3b3b3b;
 border-left: 1px solid #000;
 /*min-height: calc(100vh/3);*/
 height: auto;
}
#marketing-ability .colum h4 {
 font-size: 3em;
 position: relative;
}
#marketing-ability .colum h4 i {
 position: absolute;
 top: 15px;
 left: -70px;
 color: #d8e032;
}
#marketing-ability .colum h5 {
 font-size: 1.2em;
 font-weight: 500;
 color: #d8e032;
}
/*第三塊-案例*/
#marketing-case {
 background-image: url(../images/marketing02.jpg);
 background-position: top center;
 background-repeat: no-repeat;
 padding: 120px 25px 5px 25px;
 text-align: center;
}
#marketing-case h2 {
 color: #fff;
 font-size: 4em;
 font-weight: 800;
}
#marketing-case p {
 color: #fff;
 font-size: 1.6em;
 margin: 0;
}
#marketing-case .big-green {
 font-size: 200%;
 color: #d8e032;
}
#marketing-case .green {
 color: #d8e032;
}
#marketing-case-img {
 padding: 50px;
 width: 70%;
 margin: 50px auto;
 background-color: #fff;
 box-shadow: 0 0 25px 22px rgba(0,0,0,.15);
}
/*第四塊-就交給我們*/
#marketing-tous {
	background-image: url(../images/bg-bottom.jpg);
	background-position: bottom center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 600px;
	padding-top: 200px;
	text-align: center;
	color: #3b3b3b;
	background-attachment: fixed;
}
#marketing-tous h3 {
 font-size: 3em;
}
#marketing-tous p {
 font-size: 1.2em;
}
#marketing-tous:hover span.green {
 background: #000;
 color: #d8e032;
}
/*第五塊-服務流程*/
#marketing-step {
	background-image: url(../images/marketing-step.jpg);
	color: #fff;
}
/*第五塊-服務流程-標題*/
#marketing-step #steptitle {
 position: absolute;
 top: 40%;
 left: -250px;
}
#marketing-step #steptitle h5 {
 font-size: 1.2em;
 font-weight: 200;
 letter-spacing :5px;
}
#marketing-step #steptitle h4 {
 font-size: 3.2em;
}
#marketing-step #steptitle b {
 font-size: 0.8em;
 letter-spacing :10px;
}
/*第五塊-服務流程-步驟*/
#marketing-step #step {
 float: right;
 width: 65%;
 padding: 50px 50px 50px 186px;
 background-image: url(../images/marketing-step.png);
 background-position: center left;
 position: relative;
}
#marketing-step #step .step {
 margin-bottom: 20px;
}
#marketing-step #step .step b {
 font-size: 5em;
 opacity: 0.5;
 margin-bottom: -30px;
 display: block;
}
#marketing-step #step .step h5 {
 font-size: 3em;
 margin: 0;
}
#marketing-step #step .step p {
 font-size: 1em;
 margin: 0;
}

/*--------------------------行銷趨勢----------------------------*/
/*列表頁*/
#blog .column {
	margin: 50px 0;
}
#blog .column .blog {
	float: left;
	width: 25%;
	padding: 1.2%;
}
#blog .column .blog h4 {
  font-size: 1.1em;
	font-weight: 300;
	margin: 8px;
	line-height: 25px;
}
#blog .column .blog h4 a {
	color: #0A0707;
}
/*內頁*/
#main {
	width: 800px;
	margin: 0 auto;
}
#main img {
	width: 100% !important;
}
.about-cell {
	border-top: 5px solid #666;
	border-bottom: 5px solid #666;
	padding: 25px 5px;
	color: #a9a9a9;
}
.textTitle {
	display: table;
	width: 100%;
	position: relative;
	height: 92px;
	padding: 15px 0 16px 77px;
	background: url(../images/title_line.jpg) bottom repeat-x;
}
.textTitle .textDate {
	position: absolute;
	width: 60px;
	height: 60px;
	line-height: 1.1rem;
	font-size: 0.7rem;
	color: #fff;
	background: #d8e032;
	border-radius: 60px;
	padding: 11px 0 0 0;
	text-align: center;
	top: 15px;
	left: 2px;
}
.textTitle h1 {
	display: table-cell;
	position: relative;
	margin: 0;
	padding: 0;
	height: 60px;
	line-height: 1.5rem;
	font-size: 1.4rem;
	vertical-align: middle;
	padding-right: 40px;
}
/*回上頁*/
.back {
	width: 105px;
	margin: 50px auto;
	text-align: center;
	cursor: pointer;
	-mox-opacity: 0.5;
	filter: alpha(opacity=50);
	opacity: 0.5;
}
.back:hover {
	-mox-opacity: 1;
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-transition: ease-in-out 0.3s;
	-o-transition: ease-in-out 0.3s;
	-webkit-transition: ease-in-out 0.3s;
	transition: ease-in-out 0.3s;
}
.back span {
	float: left;
	display: block;
	padding: 5px;
}
/*----------------------RWD響應式官網製作------------------------*/
#rwd-in {
	border: 1px solid #d9e7ee;
	height: 550px;
	margin-top: 100px;
	margin-bottom: 100px;
}
#rwd01 {
	position: absolute;
	top: 70px;
	left: 105px;
	display: block;
}
#rwd02 {
  position: absolute;
	top: -50px;
	left: 50%;
	z-index: 50;
	display: block;
	margin-left: -215px;
}
#rwd03 {
	position: absolute;
	top: 10px;
	right: 270px;
	z-index: 40;
	display: block;
}
#rwd04 {
	position: absolute;
	top: 150px;
	right: 170px;
	display: block;
}
#rwd-mobile {
	display: none;
}
#designcase {
	color: #60a29d;
	width: 800px;
	margin: 400px auto 0 auto;
	text-align: center;
}
#designcase li {
	display: inline-block;
	line-height: 23px;
}
#designcase li:after {
	content: "、";
}
#designcase li:last-child:after {
	content: "";
}
#designcase li a {
	color: #60a29d;
}
#designcase-btn {
	position: absolute;
	left: 50%;
	margin-left: -130px;
	bottom: -22px;
}
#designcase-btn a {
	display: block;
	color: #fff;
	background: #b5d1ce;
	text-align: center;
	padding: 15px 25px;
	font-size: 1.5em;
	width: 260px;
	letter-spacing: 0.01em;
	transition: 0.3s;
}
#designcase-btn a:hover {
	background: #000;
	transition: 0.3s;
}
#seo-banner {
	background: url(../images/seo-banner.jpg) top center no-repeat;
	height: 550px;
	padding: 50px;
}
h3.seo-title {
	font-size: 2.5em;
	font-weight: normal;
	margin: 15px 0;
	color: #515151;
	text-align: center;
}
#seo-description {
	width: 600px;
	font-size: 1em;
	color: #344c99;
	margin: 25px auto;
	text-align: center;
}
ul#seo-tool {
	text-align: center;
}
ul#seo-tool li {
	display: inline-block;
	margin: 10px;
	text-align: center;
	color: #fff;
}
#winhand {
	position: absolute;
	left: -100px;
	bottom: -159px;
}
#web-service {
 padding: 50px 0;
 text-align: center;
}
#web-service h2 {
 font-size: 4em;
 font-weight: 800;
 line-height: 1.1em;
 color: #363636;
}
#web-service .service li {
	float: left;
	width: 25%;
	margin: 10px 4%;
	list-style: none;
	text-align: center;
}
#web-service .service li .title {
	font-size: 18.75pt;
	font-weight: normal;
	width: 80%;
	padding: 10px 0;
	margin: 0 auto;
	color: #a6867b;
}
#web-service .service li .txt p {
  color: #725349;
}

/*-------------------------------------網頁設計案例---------------------------*/
#design {
 padding: 2% 1%;
}
#design a {
 color: #1B1B1B;
}
/*網頁設計案例分類*/
#design #design-title {
 float: left;
 padding: 5px 5px 5px 15px;
 margin-top: -15px;
}
#design #design-title h2 {
 font-size: 1.5em;
 font-weight: 300;
}
#design #design-title h3 {
 font-size: 0.8em;
 color: #999;
}
#design #options {
 float: right;
}
#design #options ul {
 text-align: right;
}
#design #options ul li {
 display: inline-block;
}
#sublink {
 width: 100%;
}
/*網頁設計案例分類-連結*/
#design #options ul li:not(:last-child) a::after {
content: '';
position: absolute;
right: 0;
top: 6px;
width: 1px;
height: 10px;
background-color: #cfd0d1;
}
#design #options ul li a {
position: relative;
display: block;
padding: 0 25px 20px;
margin-left: 10px;
color: #d8e032;
}
#design #options ul li a::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 0;
height: 2px;
background-color: #000;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#design #options ul li a:hover,#design #options ul li a.current {
  color: #000;
}
#design #options ul li a:hover::before, #design #options ul li a.current::before {
  width: 100%;
}
/*網頁設計列表*/
#design .element {
 float: left;
 width: calc(100% / 6);
 padding: 10px;
}
#design .element h4 {
 font-size: 1em;
 font-weight: 400;
}
#design .element img {
 width: 100%;
}
@media (max-width: 1480px){
#design .element {
 float: left;
 width: calc(100% / 5);
 padding: 10px;
}
}
@media (max-width: 1200px){
#design .element {
 float: left;
 width: calc(100% / 4);
 padding: 10px;
}
}

/*----------------------------網頁設計內頁介紹--------------------------------*/
#design-detail {
 margin: 50px 25px;
 padding: 25px;
 background-color: #fff;
 box-shadow: 0 0 25px 22px rgb(0 0 0 / 15%); 
}
#design-detail #case-img {
 float: left;
 width: 70%;
}
#design-detail #case-img img {
 width: 100%;
}
#design-detail #case-txt {
 float: right;
 width: 300px;
 padding: 50px 25px;
 margin-right: -50px;
 background: #f5f5f2;
}
#design-detail #case-txt h1 {
 font-size: 2em;
 margin-bottom: 25px;
}
#design-detail #case-txt h3 {
 border-bottom: 2px solid #d8e032;
 display: inline-block;
 padding: 5px;
 font-weight: 500;
}
#design-detail #case-txt ul#feature {
 font-size: 1em;
 color: #7c7d6f;
 margin-left: 5px;
 list-style-type: none;
}
#design-detail #case-txt ul#feature li::before {
 content: ' # '
}
#design-detail #case-link {
 float: right;
 width: 300px;
 margin-right: -50px;
}
#design-detail #case-link a {
 display: block;
 background: #d8e032;
 color: #000;
 text-align: center;
 width: 300px;
 padding: 15px;
}
#design-detail #case-link a:hover {
 background: #000;
 color: #d8e032;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}


/*-------------------------------------聯絡我們-------------------------------*/
/*聯絡我們-背景*/
.bg-contact {
	background-image: url(../images/contact.jpg);
	background-position: center;
	background-position: top;
	background-attachment: fixed;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	width: 100%;
	position: relative;
}
#contact {
 padding: 200px 0 50px 0;
 color: #fff;
}
#contact h1 {
 font-size: 4em;
 text-align: center;
}
#contact h3 {
 font-size: 1.1em;
 color: #000;
}
#contact h4 {
 font-size: 1.5em;
 padding-bottom: 25px;
 text-align: center;
}
#contact-in {
 background: #fff;
 color: #000;
 padding: 50px;
 width: 800px;
 margin: 0 auto
}
#contact .list {
	width: 100%;
	margin: 15px 0;
}
#contact .listinput input , #contact .listinput select , #contact .listinput textarea{
 font-size: 1em;
 letter-spacing: 1px;
}
#contact .list .half {
float: left;
 width: 50%;
}
#contact .btn {
 width: 100%;
 margin: 25px 0;
 font-size: 1.1em;
 background: #d8e032;
}
#contact .btn:hover {
 color: #fff;
 background: #000;
}





/*---------------------尾部---------------------*/
footer {
 background-image: url(../images/fbboter-bg.jpg);
 background-position: right;
 background-color: #1b1b1b;
 background-repeat: no-repeat;
 padding:50px 25px;
 color: #fff;
}
footer a {
 color: #fff;
}
footer a:hover {
 color: #bebf61;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
footer .column {
 float: left;
}
footer .column h6 {
 font-size: 1.2em;
 font-weight: 500;
 border-bottom: 1px solid #d8e032;
 margin-bottom: 10px;
 padding: 0 25px;
 height: 50px;
 line-height: 50px;
}
footer .column:last-child h6 {
 font-size: 2em;
 font-weight: 700;
 border-bottom: 5px solid #d8e032;
 height: 50px;
 line-height: 50px;
}
footer .column:nth-child(5) h6 {
 /*padding-right: 150px;*/
}
footer .column li {
 text-align: center;
 list-style-type: none;
 padding-bottom: 5px;
}
footer .column:last-child ul {
 margin: 25px;
}
footer .column:last-child li {
 text-align: left;
 padding-bottom: 5px;
}
#copyright {
 text-align: center;
 padding: 8px;
 background: #d8e032;
 color: #1b1b1b;
 font-size: 0.9em;
 font-weight: 300;
}