@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
html {
  font-family: 'Noto Sans TC';
}
.card-img-top {
	height:auto;
}
.card-title {
	color:#34322F !important;
  font-family: 'Noto Sans TC';
}
.card-text {
	color:#34322F !important;
}
.card-text:last-child {
	font-family: 'Noto Sans TC';
	text-align: left;
}
.grid-item a, .carousel-item a {
	text-decoration: none;
}
#banner .carousel-caption {
	top:0px;
	z-index:10;
}
.carousel-control-prev, .carousel-control-next {
	height:100%;
}

body {
	font-family: 'Noto Sans TC';
	font-weight:300;
	padding-top: 80px;
	position: relative;
}
#smSearchForm, #xsSearchForm {
	display: none;
}
#searchForm {
	position: relative;
}
#search {
	height: 0%;
	width: 150px;
	position: absolute;
	/*animation-name: searchBack;
	animation-duration: 0.35s;*/
	display: none;
}
#search.active {
	top:30px;
	left: 5px;
	height: 100%;
	animation-name: search;
	animation-duration: 0.35s;
	display: inherit;
}
@keyframes search {
	from {
		height: 0%;
	}
	to {
		height: 100%;
	}
}
@keyframes searchBack {
	from {
		height: 100%;
	}
	to {
		height: 0%;
	}
}

/*----------Footer區塊------------*/

.foot .avier {
	max-width:140px;
}
.foot .logo img {
	max-width: 100%;
}
.foot .icon {
	display: flex;
	justify-content: space-around;
}
.foot .icon a img {
	max-height: 16px;
}
.foot p {
	color: #fff;
	font-size: 0.8em;
	line-height: 1.5em;
}
.fline {
	padding: .25rem .25rem .25rem 2rem;
	border-left-style: solid;
	border-left-color: #FFFFFF;
	border-left-width: thin;
	position: absolute;
	margin: 0;
	left: 50%;
}
.flink {
	color: #FFFFFF;
	margin-bottom: 1vw;
	font-family: "Noto Sans TC";
	font-weight: 300;
	font-style: normal;
	font-size: 0.8em;
	line-height: 1.5em;
	-ms-transform: rotate(0deg); /* IE 9 */
	-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
	transform: rotate(0deg);
}
.flink2 {
	height: 1.3vw;
	width: auto;
	margin-top: 10px;
	margin-right: 3vw;
	-ms-transform: rotate(0deg); /* IE 9 */
	-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
	transform: rotate(0deg);
}
.ftext {
	color: #FFFFFF;
	font-family: "Noto Sans TC", Helvetica, Arial, serif;
	font-weight: 300;
	font-style: normal;
	font-size: .9vw;
	letter-spacing: 0.07vw;
	line-height: .4vw;
}
.ftext2 {
	color: #FFFFFF;
	font-family: "Noto Sans TC", Helvetica, Arial, serif;
	font-weight: 300;
	font-style: normal;
	font-size: .8vw;
	letter-spacing: 0.07vw;
}
.category {
	color: #000;
}
.category:hover {
	color: #02AAA5;
	text-decoration: none;
}
.category.active {
	color: #02AAA5;
	text-decoration: underline;
}
.category.active {
	color: #02AAA5;
	text-decoration: none;
}
.navbar-brand img {
	width:auto;
	height:70px;
}
.editor img {
	max-width:100% !important;
	height: auto !important;
}
.dropdown-toggle::after {
	margin-left:1.225em;
}
.carousel-control-next, .carousel-control-prev {
	z-index:99;
}
@media (max-width:992px) {
	body {
		padding-top: 70px;
	}
	#xsSearchForm {
		display: flex;
		justify-content: center;
		margin-left: 14px;
		margin-right: 14px;
		width:auto;
	}
	#xsSearchForm input {
		max-width: 180px;
		height:30px;
	}
	.nav-item-search {
		padding: 10px 5px;
	}
	#navbarResponsive {
		background: #fff;
		position: relative;
	}
	#navbarResponsive .nav-item {
		text-align: center;
	}
	#navbarResponsive .slash {
		display: none;
	}
	#navbarResponsive .row {
		margin-left: 0px !important;
		margin-right: 16px;
		height: 40px;
		justify-content: center;
	}
	#search, #searchToggle {
		display: none;
	}
	#navbarResponsive .row a img {
		margin-left: 8px;
		margin-right: 8px;
	}
	.navbar-brand img {
		height:50px;
	}
}
@media (max-width:767px) {
	.index-benner-description {
		display: none;
	}
	.carousel-caption {
		padding-right:3vw !important;
	}
	.carousel-caption h3 {
		font-size:1em;
	}
	.carousel-caption p {
		font-size:0.85em;
	}
	.foot {
		margin-top: 90px;
		padding-top: 30px;
		padding-bottom: 10px;
	}
	.foot .icon {
		padding-top: 15px;
	}
	.foot .part-1 > .row {
		border-bottom-style: solid;
		border-bottom-color: #FFFFFF;
		border-bottom-width: thin;
		padding-bottom: 40px;
		margin-right: -3px;
		margin-left: -3px;
	}
	.foot .part-2 {
		padding-top: 35px;
	}
	.sort {
		font-size: 1rem !important;
	}
	.slash2 {
		font-size: 1rem !important;
		margin-left:1.8vmin !important;
		margin-right:1.8vmin !important;
	}
	.sm-hide-br {
		display: none;
	}
}
@media (min-width:375px) {
}
@media (min-width:576px) {
}
@media (min-width:768px) {
	.foot {
		margin-top: 90px;
		padding-top: 45px;
		padding-bottom: 50px;
	}
	.foot .part-1 {
		order: 2;
	}
	.foot .part-1 > .row {
		padding-top:1em;
		padding-bottom: 0px;
		border-bottom: none;
		border-left-style: solid;
		border-left-color: #FFFFFF;
		border-left-width: thin;
	}
	.foot .part-2 {
		order: 1;
		padding-top: 1.2em;
		border-bottom: 0;
	}
	.foot .icon {
		padding-top: 1em;
	}
	.space {
		padding: 0rem 5rem;
		margin-top: 5rem;
		margin-bottom: 90px;
	}
}
@media (min-width:992px) {
	.foot {
		width: auto;
		margin-top: 90px;
	}
	.fline {
		border-left-style: solid;
		border-left-color: #FFFFFF;
		border-left-width: thin;
		border-bottom-style: hidden;
		left: 50%;
	}
}
@media (min-width:1200px) {
	.foot > .container-fluid {
		max-width:1100px;
		margin-right:auto;
		margin-left:auto;
	}
	.flink {
		font-size: 1em;
		line-height: 0.8em;
		margin-bottom: 18px;
	}
	.foot .part-2 {
		padding-top: 0.8em;
	}
	.foot p {
		font-size: 1em;
	}
}
@media (min-width:1920px) {
}
.portfolio-item {
	margin-bottom: 50px;
	padding: 0 3rem
}

/*----------導覽列------------*/

.slash {
	font-family: "Noto Sans TC", Helvetica, Arial, serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.5rem;
	color: #02AAA5;
	text-align: left;
	letter-spacing: 1.5px;
	line-height: 36px;
	right: 18%;
	margin-left: 20px;
}
.slash2 {
	color: #02AAA5;
	font-family: "Noto Sans TC";
	font-weight: 300;
	font-style: normal;
	font-size: 1.5rem;
	text-align: center;
	letter-spacing: 1.5px;
	margin-left: 2.5vmin;
	margin-right: 2.5vmin;
}
.rlink {
	height: 15px;
	width: auto;
	margin-top: 7px;
	margin-left: 20px;
	align: left;
	-ms-transform: rotate(0deg); /* IE 9 */
	-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
	transform: rotate(0deg);
}
.search {
	z-index: 999;
}
.fb:hover {
	filter: invert(50%) sepia(8%) saturate(5552%) hue-rotate(188deg) brightness(103%) contrast(92%);
}
.ig:hover {
	filter: invert(53%) sepia(81%) saturate(426%) hue-rotate(292deg) brightness(106%) contrast(102%);
}
.bag:hover {
	filter: invert(59%) sepia(88%) saturate(642%) hue-rotate(335deg) brightness(106%) contrast(103%);
}
.nav-link {
	font-family: "Noto Sans TC", Helvetica, Arial, serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1rem;
	letter-spacing: 1.0px;
	margin-right: 1em;
}


/*----------搜尋列-------------*/

body {
	background: #fffff;
}
#wrap {
	margin: 10px 0px -30px 20px;
	display: inline-block;
	position: relative;
	height: 60px;
	float: right;
	padding: 0;
	position: relative;
	background-color: #fffff;
	background-size: contain;
}
input[type="txt"] {
	height: 40px;
	font-size: 16px;
	display: inline-block;
	font-family: "Lato";
	font-weight: 100;
	border: none;
	outline: none;
	color: #555;
	padding: 3px;
	padding-right: 10px;
	width: 0px;
	position: absolute;
	top: -10px;
	right: 0;
	background: none;
	z-index: 3;
	transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
	cursor: pointer;
	background-size: contain;
	background-color: #fffff;
}
input[type="txt"]:focus:hover {
	border: 1px solid #BBB;
	background-size: contain;
	background-color: #fffff;
}
input[type="txt"]:focus {
	width: 300px;
	z-index: 1;
	border: 1px solid #BBB;
	cursor: text;
	background: #fffff;
	background-size: contain;
}
input[type="submit"] {
	height: 15px;
	width: auto;
	display: inline-block;
	color: red;
	float: right;
	background: url("../img/search.svg") center center no-repeat;
	text-indent: -10000px;
	border: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	cursor: pointer;
	opacity: 1;
	background-color: #fffff;
	background-size: contain;
	cursor: pointer;
	transition: opacity .4s ease;
}
input[type="submit"]:hover {
	opacity: 1;
}

/*----------瀑布流------------*/

.grid-item {
	float: left;
	width: auto;
	height: auto;
	margin-bottom: 15px;
}
.grid-item--width2 {
	width: 160px;
}
.grid-item--height2 {
	height: 140px;
}

/*----------影片區塊------------*/

.video {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	background: #FFFFFF;
	box-shadow: 0px 20px 35px gray;
}
.play {
	width: 56px;
	height: auto;
	z-index: 10;
	position: absolute;
	top: 40%;
	left: 42%;
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: all 0.2s ease-in-out;
}
.play:hover {
	transform: scale(1.1);
}
.video-text {
	z-index: 20;
	position: absolute;
	padding: 2rem;
	top: 55%;
}
.video-title {
	margin-bottom: .75rem;
	color: #FFFFFF;
	font-family: "Noto Sans TC";
	font-weight: 500;
	font-style: normal;
	font-size: 1.6rem;
	line-height: 2.5rem;
	text-align: justify;
}
.video-tag {
	margin-top: .7rem;
	margin-bottom: .8rem;
	color: #FFFFFF;
	font-family: "NotoSansCJKtc-Bold";
	font-size: .7rem;
	line-height: .9rem;
	text-align: justify;
}

/*----------最新消息------------*/

.sort {
	text-align: center;
	font-family: "Noto Sans TC";
	font-weight: 400;
	font-style: normal;
	font-size: 1.3rem;
	letter-spacing: 1.25px;
	margin-right: 2vmin;
}
.card-text {
	font-size: 14px;
	line-height: 1.5em;
}
.news-tag {
	margin-top: .7rem;
	margin-bottom: .8rem;
	color: #919191 !important;
	font-family: "NotoSansCJKtc-Bold";
	font-size: .7rem;
	line-height: .9rem;
}
.news-tag span {
	padding-right:1em;
}
.news-date {
	margin-top: .7rem;
	margin-bottom: .8rem;
	color: #919191;
	font-family: "Noto Sans TC";
	font-weight: 500;
	font-style: normal;
	font-size: .8rem;
	line-height: .9rem;
	text-align: justify;
}
.article-tag {
	color: #fff;
	background-color: #02AAA5;
	border-color: #02AAA5;
	font-size: 1.2rem;
	padding: .5vw 1vw;
}
.news-pre {
	color: #02AAA5;
	font-family: "Noto Sans TC";
	font-weight: 500;
	font-style: normal;
	font-size: .8rem;
	text-align: left;
	letter-spacing: 1.5px;
}
.news-pre:hover {
	color: #02AAA5;
	font-family: "Noto Sans TC";
	font-weight: 500;
	font-style: normal;
	font-size: .8rem;
	text-align: left;
	letter-spacing: 1.5px;
}
.news-next {
	color: #02AAA5;
	font-family: "Noto Sans TC";
	font-weight: 500;
	font-style: normal;
	font-size: .8rem;
	text-align: right;
	letter-spacing: 1.5px;
}
.news-next:hover {
	color: #02AAA5;
	font-family: "Noto Sans TC";
	font-weight: 500;
	font-style: normal;
	font-size: .8rem;
	text-align: right;
	letter-spacing: 1.5px;
}
.control-prev {
	position: absolute;
	bottom: 0;
	z-index: 1;
	text-align: left;
	width: 15%;
	color: #fff;
	top: 15vw;
	transition: opacity .15s ease
}
.control-next {
	position: absolute;
	bottom: 0;
	z-index: 1;
	text-align: right;
	width: 15%;
	color: #fff;
	top: 15vw;
	transition: opacity .15s ease
}

/*----------Banner設定------------*/

.banner-title {
	/*letter-spacing: 1rem;*/
}
.banner-title2 {
	margin-top:0.5rem;
	padding-bottom: 1.2vw;
	letter-spacing: .1rem;
	text-align: center;
}


/*----------主要色按鈕------------*/

.btn-avier {
	color: #fff;
	background-color: #02AAA5;
	border-color: #02AAA5;
	/*font-size: 1.2vw;
  height: 3.4vw;
  width: 10vw;*/
}
.btn-avier:hover {
	color: #fff;
	background-color: #04CBC5;
	border-color: #04BAB4
}
.btn-avier.focus, .btn-avier:focus {
	box-shadow: 0 0 0 .2rem rgba(2, 170, 165, .5)
}
.btn-avier.disabled, .btn-avier:disabled {
	color: #fff;
	background-color: #02AAA5;
	border-color: #02AAA5
}
.btn-avier:not(:disabled):not(.disabled).active, .btn-avier:not(:disabled):not(.disabled):active, .show > .btn-avier.dropdown-toggle {
	color: #fff;
	background-color: #049F9B;
	border-color: #03928D
}
.btn-avier:not(:disabled):not(.disabled).active:focus, .btn-avier:not(:disabled):not(.disabled):active:focus, .show > .btn-avier.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(2, 170, 165, .5)
}

/*----------斜線大標------------*/

.content-title {
	font-family: "Noto Sans TC";
	font-weight: 400;
	font-style: normal;
	font-size: 1.5rem;
}
.content-text {
	font-family: "Noto Sans TC";
	font-weight: 300;
	font-style: normal;
	font-size: 0.5rem;
	letter-spacing: 1.1px;
	color: #3C3C3C;
}

/*----------團隊區塊------------*/

.team-name {
	margin-bottom: .75rem;
	color: #3C3C3C;
	font-family: "Noto Sans TC";
	font-weight: 700;
	font-style: normal;
	font-size: 1.3rem;
	text-align: center;
}
.team-name2 {
	margin-bottom: .75rem;
	color: #3C3C3C;
	font-family: "Noto Sans TC";
	font-weight: 700;
	font-style: normal;
	font-size: .9rem;
	text-align: center;
}
.team-title {
	margin-top: -.375rem;
	margin-bottom: 0;
	color: #827077;
	font-family: "Noto Sans TC";
	font-weight: 300;
	font-style: normal;
	font-size: 1.1rem;
	text-align: center;
}
.team-title2 {
	margin-top: -.375rem;
	margin-bottom: 0;
	color: #827077;
	font-family: "Noto Sans TC";
	font-weight: 300;
	font-style: normal;
	font-size: .7rem;
	text-align: center;
}

/*----------產品介紹------------*/

.pd-title {
	color: #3C3C3C;
	font-family: "Noto Sans TC";
	font-weight: 300;
	font-style: normal;
	font-size: 1.5rem;
	line-height: .9rem;
	text-align: justify;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.pd-title2 {
	color: #3C3C3C;
	font-family: "Noto Sans TC";
	font-weight: 300;
	font-style: normal;
	font-size: 1.1rem;
	line-height: 1.35rem;
	text-align: justify;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
.btn-pd {
	color: #878787;
	border-color: #878787;
	border-bottom-width: 1px;
	line-height: 2em;
}
.btn-pd:hover {
	color: #fff;
	background-color: #04CBC5;
	border-color: #04BAB4
}

/*----------回到頁首------------*/

#gotop {
    position:fixed;
    z-index:90;
    right:30px;
    bottom:50px;
    display:none;
    width:50px;
    height:50px;
    color:#fff;
    background:#02AAA5;
	opacity: 0.5;
    line-height:50px;
    border-radius:50%;
    transition:all 0.5s;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

/*----------Business------------*/

.mt{
	margin-top: 75px;
}

.bmt{
	margin-top: 95px;
}

.animation{
	animation: jello 1s;
	animation-iteration-count: infinite;
}

@keyframes jello {
  from, 11.1%, to {
    transform: none;
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello-vertical {
    -webkit-animation: jello 1.5s infinite both;
    animation: jello 1.5s infinite both;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: jello;
}

.flip{
	margin:0px;
	text-align:center;
	cursor:pointer;}

.panel{
	margin:0px;
	padding:5px;
	text-align:center;
	background:#FBFBFB;
	display:none;}

.img-div {
	margin: 0px;
    position: relative;
    width: auto;
    height: auto;
}
.case-img {
    position: relative;
	display: block;
}
.case-img:hover .mask {
	display: block;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
	display:none;
}
.mask h3 {
    text-align: center;
	padding-top: calc(50% - 0.875rem);
	height:100%;
}


.btn-case {
	color: #878787;
	border-color: #878787;
	border-bottom-width: 1px;
	line-height: 2em;
	font-size: 1.2rem;
	padding: .5vw 1vw;
}
.btn-case.active, .btn-case:hover {
	color: #fff;
	background-color: #02AAA5;
	border-color: #04BAB4
}