<!-- 頁籤+輪播-->

/* Default tab style */

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'stroke7pixeden';
	
}

.tabs {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	font-weight: 300;
	font-size: 1.25em;
}

/* Nav */
.tabs nav {
	text-align: center;
}

.tabs nav ul {
	position: relative;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
	list-style: none;
	-ms-box-orient: horizontal;
	-ms-box-pack: center;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}

.tabs nav ul li {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	text-align: center;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.tabs nav a {
	position: relative;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 2.5;
}

.tabs nav a span {
	vertical-align: middle;
	font-size: 0.75em;
}

.tabs nav li.tab-current a {
	color: #74777b;
}

.tabs nav a:focus {
	outline: none;
}

/* Icons */
.icon::before {
	z-index: 10;
	display: inline-block;
	margin: 0 0.4em 0 0;
	vertical-align: middle;
	text-transform: none;
	font-weight: normal;
	font-variant: normal;
	font-size: 1.3em;
	font-family: 'stroke7pixeden';
	line-height: 1;
	speak: none;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* Content */
.content-wrap {
	position: relative;
}

.content-wrap section {
	display: none;
	margin: 0 auto;
	padding: 1em;
	max-width: 1200px;
	text-align: center;
}

.content-wrap section.content-current {
	display: block;
}

.content-wrap section p {
	margin: 0;
	padding: 0.75em 0;
	color: rgba(40,44,42,0.05);
	font-weight: 900;
	font-size: 4em;
	line-height: 1;
}

/* Fallback */
.no-js .content-wrap section {
	display: block;
	padding-bottom: 2em;
	border-bottom: 1px solid rgba(255,255,255,0.6);
}

.no-flexbox nav ul {
	display: block;
}

.no-flexbox nav ul li {
	min-width: 15%;
	display: inline-block;
}

@media screen and (max-width: 58em) {
	.tabs nav a.icon span {
		display: none;
	}
	.tabs nav a:before {
		margin-right: 0;
	}
}
/*****************************/
/* Trapezoid, based on http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/ */
/*****************************/ 

.tabs-style-tzoid {
	max-width: 1200px;
}

.tabs-style-tzoid nav {
	padding: 0 1em;
}

.tabs-style-tzoid nav ul li {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.tabs-style-tzoid nav ul li a {
	padding: 0 1.5em 0 0.3em;
	color: #FFF;/*頁籤文字底色*/
	font-size:22px;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

@media screen and (max-width: 54em) {
	.tabs-style-tzoid nav ul li a {
		padding: 0 0.5em 0 0.3em;
	}
}

.tabs-style-tzoid nav ul li a:hover,
.tabs-style-tzoid nav ul li a:focus {
	color: #fff;
}

.tabs-style-tzoid nav ul li.tab-current a,
.tabs-style-tzoid nav ul li.tab-current a:hover {
	color: #057091;
}

.tabs-style-tzoid nav ul li a span {
	font-weight: 500;
	font-size: 0.75em;
}

.tabs-style-tzoid nav ul li a::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	outline: 1px solid transparent;
	border-radius: 10px 10px 0 0;
	background: #057091;
	box-shadow: inset 0 -3px 3px rgba(0,0,0,0.05);
	content: '';
	-webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
	transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.tabs-style-tzoid nav ul li.tab-current a::after,
.tabs-style-tzoid .content-wrap {
	background: #fff;
	box-shadow: none;
}
/*輪播*/


/*飛入效果*/
.effect8 {
    position: relative;
    overflow: hidden;
}

.effect8 img {
    transition: all 1s;
}

.effect8:hover img {
    transform: scale(1.2);
}

/* Button */
.effect8 .btn {
    border: none;
    outline: none;
    padding: 10px 35px;
    background-color: rgba(255, 156, 21, 0.8);
/*	background: -webkit-linear-gradient(bottom,#3f0463 0,#651a66 50%,#b94366 75%,#d95365 100%);*/
	/*background-image: linear-gradient(40deg, #fc00ff 0%, #00fffc 45%, #fffc00 100%);*/

    cursor: pointer;
    color: black;
    font-size: 18px;
    white-space: nowrap;
    margin-top: 20px;
    margin-right: 40px;
    transition: all .5s;
}

.effect8 .btn:hover {
    background: rgba(255, 156, 21, 1);
}

/* Text */
.effect8 h2 {
    position: absolute;
    right: 0px;
    top: 20%;
    text-align: right;
    transform: translateX(700px) scale(0.1);
    transition: transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.effect8 .btn {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(800px);
    transition: transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.effect8:hover h2 {
    transform: translateX(0px) scale(1);
}

.effect8:hover .btn {
    left: 50%;
    transform: translateX(-50%);
    animation: btnWidth 1.2s forwards;
}

@keyframes btnWidth {
    0% {
        padding: 10px 35px;
        opacity: .2;
    }

    50% {
        padding: 10px 100%;
    }

    100% {
        padding: 10px 35px;
        opacity: 1;
    }
}

   .btn_s_bg{
	  background: -webkit-linear-gradient(to bottom, #dc2430, #7b4397);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #dc2430, #7b4397);
	text-shadow: 0.1em 0.1em #333;font-weight:bold;
	color:#FFF;
   }
   .btn_s_bg:hover {
	  background: -webkit-linear-gradient(to bottom, #dc2430, #7b4397);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #dc2430, #7b4397);
	text-shadow: 0.1em 0.1em #333;font-weight:bold;
	color:#FFF;
   }
/*
====================================================================
  Footer
====================================================================
*/
.tran3s,.theme-main-menu .navbar-nav>li a,#project-section .project-gallery .single-img .opacity,
#team-section .team-member-wrapper .single-team-member .member-name h6,
#team-section .team-member-wrapper .single-team-member .member-name p,
#team-section .team-member-wrapper .single-team-member .member-name ul,
#our-client .owl-theme .owl-dots .owl-dot span {
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
 }
 
 .round-border {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
}
 ul {list-style-type: none;}
  a {text-decoration: none; display: inline-block;}
 a:hover,a:focus,a:visited {text-decoration: none; outline: none;}

footer {
  margin: 100px 0 0 0;
  background: #1e1e1e;
  padding: 60px 0 25px 0;
  text-align: center;
}
footer .logo {
  margin-top:10px;
  margin-bottom: 15px;
 text-align: center;
 
}
footer ul {

  margin-top: 13px;
 margin-left:-20px;
 text-align: center;
}
footer ul li {
  display: inline-block;
  margin-top: 13px;
  text-align: center;
  
  
}
@media (max-width: 1024px) { 
footer .logo {
  margin-top:10px;
  margin-bottom: 15px;
 text-align: center;
 margin-left:120px;
}
footer ul {

  margin-top: 13px;
 margin-left:-40px;
 text-align: center;
}
footer ul li a {
  width: 40px;
  line-height: 40px;
  font-size: 18px;
  margin: 0 2px;
  border:1px solid transparent;
}
footer p {
  color:#fff;
  font-size: 15px;
  margin-top: 50px;
  text-align: center;
   margin-left:90px;
}
 }
footer ul li a {
  width: 45px;
  line-height: 45px;
  font-size: 18px;
  margin: 0 7px;
  border:1px solid transparent;
 
}
footer ul li:nth-child(1) a {
  color: #677fb5;
  border-color:#677fb5;
  
}
footer ul li:nth-child(2) a {
  color: #70c2e9;
  border-color:#70c2e9;
}
footer ul li:nth-child(3) a {
  color: #d8545d;
  border-color:#d8545d;
}
footer ul li:nth-child(4) a {
  color: #06c152;
  border-color:#06c152;
}
footer ul li:nth-child(5) a {
  color: #F00;
  border-color:#F00;
}
footer ul li:nth-child(6) a {
  color: #ff3ba4;
  border-color:#ff3ba4;
}
footer ul li:nth-child(7) a {
  color: #e299c2;
  border-color:#e299c2;
}
footer ul li:nth-child(8) a {
  color: #faaa5e;
  border-color:#faaa5e;
}
footer ul li:nth-child(1) a:hover {
  background: #677fb5;
  transform: scale(1.2);
 
}
footer ul li:nth-child(2) a:hover {
  background: #70c2e9;
  transform: scale(1.2);
}
footer ul li:nth-child(3) a:hover {
  background: #d8545d;
  transform: scale(1.2);
}
footer ul li:nth-child(4) a:hover {
  background: #06c152;
  transform: scale(1.2);
}
footer ul li:nth-child(5) a:hover {
  background: #F00;
  transform: scale(1.2);
}
footer ul li:nth-child(6) a:hover {
  background: #ff3ba4;
}
footer ul li:nth-child(7) a:hover {
  background: #e299c2;
}
footer ul li:nth-child(8) a:hover {
  background: #faaa5e;
}
footer ul li a:hover {
  color:#fff !important;
}
footer p {
  color:#fff;
  font-size: 15px;
  margin-top: 50px;
}