/*了解更多*/
.bg-icon1  {
  margin-left: auto; 
  margin-right: auto;
  transition:.3s all ease;
  padding: 5px 20px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  background-color: #ee0b19; 
}

.bg-icon1:hover  {
  background-color: #790f16; 
  color: #fff;
}

.bg-icon1 a { color:#fff;}

/* 對話框 */
.balloon {
  margin: 20px auto;
  width: 300px;
  height: 130px;
}
 

.balloon-default {
  background: #efefef;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #000;
  padding: 10px;
  position: relative;
  width: 100%;
}
 
.balloon-default::after {
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-bottom: solid 10px #efefef;
  top: -10px;
  content: "";
  display: block;
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
   width: 0px;
}


/*首頁小框*/
.from {
  font-size:18px;
   width: 100%;
  float: left; 
  background-color: #ff27b0;
  padding: 10px; 
  margin:5px;
  border-radius: 10px;
  text-align:center;
  color:#fff;
  font-weight:bold;
}

.design3 img{
	height: 200px;
	width: 200px;
   background-color: #F0F0F0;
	padding: 4px;
	border: 1px solid #D5D5D5;
}

.design1{

	width: 100%;
   padding: 10px;
   border:2px #fff solid;
  background-color: rgba(0, 0, 0, 0.7);
}

.design1:hover{
  width: 100%;
  padding: 10px;
  border:1px #fff solid;
  background-color: rgba(110, 110, 18, 0.7);
}

.design2{
  width: 50%;
  padding: 10px;
  margin:0 auto;
  background-color: rgba(0, 0, 0, 0.7);
}

.design2:hover{
  width: 50%;
  padding: 10px;
  background-color:#856e00;
}

.topnavbar {
  background-color: #fff;
  position: relative;/*頁籤&banner分開不重疊*/
  line-height: 0;
  padding: 0;/*頁籤間距*/
}

.topnavbar .container {
  text-align: center;
  padding: 0;
}

.topnavbar .container::after {
  display: inline-block;
  width: 100%;
}

body {
    background-color: #fff;/*背景底色*/
}
.line {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}


.swiper-container {
  height: auto !important;
}

.swiper-wrapper, .swiper-slide {
  height: 0 !important;
  padding-bottom: calc(700 / 1920 * 100%); /* 自定響應式圖片高度 */
}

.swiper-slide {
  width: 100% !important;
}
body[data-type="fullpage"]:not(#managehome) #wrap>*:not(:last-child) {
    margin-bottom: 0px;
}



#bodyinhome .fcol.fcol-6 {
    background-color: #445357;
}

#bodyinhome .fcol.fcol-5, #bodyinhome .fcol.fcol-3 {
   display:none;
}

#bodyinhome .fcol.fcol-4{
    background: url(https://static.iyp.tw/37467/files/08e702c4-4501-4959-abf0-01174c125763.jpg) 100% 0 / cover no-repeat;
    position: relative;
    overflow: hidden;
}

#bodyinhome .fcol.fcol-2 .container {
   background-color: #cfcfcf;
   width:100%;
   padding:0px;
}


body.about-us .fcol.fcol-2  .container {    
   background-color: #eaffe8;
}

#bodyinpage .fcol.fcol-4  .container {    
   background-color: #445357;
}

/*頁籤底拉寬*/
#header .topnavbar .container {
    padding-left: 60px;
    padding-right: 60px;
    width: 100%;
}
#nav {
    vertical-align: bottom;
}

#nav ul li a {
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
    color: #000;
    padding: 10px;
    line-height: 1.3;
    transition: .3s;
   font-size:15px;
}

#nav ul li a:hover {
    color: #508a16;
}

#nav ul li.current a {
    color: #508a16;
} 

#nav .subnav {
    background-color: #fff;
}

#nav li.has-subnav ul li.has-subnav>div a::after, #nav>ul>li.has-subnav>a::after {
    padding-left: 2px;/*下拉選單箭頭距離*/
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: inherit;
    color: #008b8b;
}


.product-list-div h2 {
    text-shadow: 0 0px 0 #333;
}



ul.product-list li a.focus h3, ul.product-list li a:hover h3 {
    color: #464646;
}
ul.product-list li h3 {
    flex: 1 0 auto;
    max-height: 3.15rem;
    margin: 0.7rem 0;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #7a7a7a;
    overflow: hidden;
    padding: 0 16px;
}

#frame-1 {
  width:33%;
  margin-right: 6px; margin-bottom: 10px;
  background-color: #fff;
  border-radius: 15px; box-shadow: 3px 3px 18px 0px rgba(180, 180, 180, 0.30); 
}


.square-flip{
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-ms-perspective: 1000;
		perspective: 1000;

		-webkit-transform: perspective(1000px);
		-moz-transform: perspective(1000px);
		-ms-transform: perspective(1000px);
		transform: perspective(1000px);

		-webkit-transform-style: preserve-3d; 
		-moz-transform-style: preserve-3d; 
		-ms-transform-style: preserve-3d; 
		transform-style: preserve-3d; 

		/*border:1px solid #efefef;*/
		
		position:relative;
		float:left;
		margin: auto 0 auto;

		}
		.square-flip{
			width:100%;
			height:380px;
		}
		.square,.square2{
			width:100%;
			height:100%;
		}
.square{

			background-size: cover;
			background-position:center center;

			-ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			    transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			    -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			overflow: hidden;

			position:absolute;
			top:0;


			-webkit-backface-visibility: hidden; 
			backface-visibility: hidden;
		}
		.square-flip .square{
			-webkit-transform: rotateY(0deg);
			-moz-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			transform: rotateY(0deg);
			transform-style: preserve-3d;
			z-index:1;
		}
		.square-flip:hover .square{
			-webkit-transform: rotateY(-180deg);
			-moz-transform: rotateY(-180deg);
			-o-transform: rotateY(-180deg);
			-ms-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
			transform-style: preserve-3d;
		}


		.square2{

			background-size: cover;
			background-position:center center;

			-ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			    transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			    -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			overflow: hidden;

			position:absolute;
			top:0;

			-webkit-backface-visibility: hidden; 
			backface-visibility: hidden;
		}
		.square-flip .square2{
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
			-o-transform: rotateY(180deg);
			-ms-transform: rotateY(180deg);
			transform: rotateY(180deg);
			transform-style: preserve-3d;
			z-index:1;
		}
		.square-flip:hover .square2{
			-webkit-transform: rotateY(0deg);
			-moz-transform: rotateY(0deg);
			-o-transform: rotateY(0deg);
			-ms-transform: rotateY(0deg);
			transform: rotateY(0deg);
			transform-style: preserve-3d;
		}

		/*Square content*/
		.square-container{
			padding:40px;
			text-align:center;
			position:relative;
			top:50%;

			-ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			    transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			    -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);

		
			-webkit-transform: translateY(-50%) translateX(0px)  scale(1);
			-ms-transform: translateY(-50%) translateX(0px)  scale(1);
	transform: translateY(-50%) translateX(0px)  scale(1);
			transform-style: preserve-3d;
			z-index:2;
		}
		.square-flip:hover .square-container{
			
			-webkit-transform: translateY(-50%) translateX(-650px)  scale(.88);
			-ms-transform: translateY(-50%) translateX(-650px)  scale(.88);
      transform: translateY(-50%) translateX(-650px)  scale(.88);
			transform-style: preserve-3d;

		}

		.square-container2{
			padding:40px;
			text-align:center;
			position:relative;
			top:50%;

			-ms-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			    transition: transform 0.60s cubic-bezier(.5,.3,.3,1);
			    -webkit-transition: transform 0.60s cubic-bezier(.5,.3,.3,1);

			
			-webkit-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
			-ms-transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);
      transform: translateY(-50%) translateX(650px) translateZ(60px) scale(.88);

			transform-style: preserve-3d;
			z-index:2;
		}
		.square-flip:hover .square-container2{
			
			-webkit-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
			-ms-transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
			transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
      transform-style: preserve-3d;
		}



		/*Style text*/
		.square-flip h2{
			color:white;
			font-family: "微軟正黑體";
			font-weight:700;
			font-size:24px;
		}
		.square-flip h3{
			color:white;
			font-family: "微軟正黑體";
			font-weight:500;
			font-size:15px;
			line-height:26px;
		}
		/*Elements*/
		.flip-overlay{
			display:block;
			background:rgba(0,0,0,0.8);
			width:100%;
			height:100%;
			position:absolute;
			top:0;
		}
		.align-center{
			margin:0 auto;
		}

 .align-center img {
   aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
   display: block;
 }
		.kallyas-button{
			display:block;
			width:160px;
			padding:18px 30px;
			font-family:"Open Sans";
			font-weight:600;
			color:#fff;
			background:#FF2024;
			margin:0 auto;
			border-radius:2px;
			text-decoration:none;

			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa067+0,ff2959+49,ff2024+100 */
			background: #ffa067; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #ffa067 0%, #ff2959 49%, #ff2024 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #ffa067 0%,#ff2959 49%,#ff2024 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #ffa067 0%,#ff2959 49%,#ff2024 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa067', endColorstr='#ff2024',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}


		/*ADD SHADOWS OPTIONAL*/
		.square-flip .square .boxshadow, .square-flip .square .textshadow, .square-flip .square2 .boxshadow, .square-flip .square2 .textshadow{
			-ms-transition: 0.60s;
			    transition: 0.60s;
			    -webkit-transition: 0.60s;
		}

		.square-flip .square .boxshadow{
			-webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
			-moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
			box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
		}
		.square-flip .square .textshadow{
			-webkit-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
			-moz-text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
			text-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
		}
		.square-flip:hover .square .boxshadow, .square-flip:hover .square .textshadow{
			-webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
			-moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
			box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
		}


		.square-flip .square2 .boxshadow{
			-webkit-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
			-moz-box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
			box-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
		}
		.square-flip .square2 .textshadow{
			-webkit-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
			-moz-text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
			text-shadow: 240px 42px 58px -8px rgba(0,0,0,0.0);
		}
		.square-flip:hover .square2 .boxshadow, .square-flip:hover .square2 .textshadow{
			-webkit-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
			-moz-box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
			box-shadow: 24px 42px 58px -8px rgba(0,0,0,0.3);
		}

		
		/*You can delete this style*/
		.centerflipcards{
      display:block;
			width:1330px;
      height:440px;
			text-align:center;
			margin:0 auto;
			margin-top:25px;
		}
.clearfix{clear:both;}
.centerflipcards p{
      font-family:"Open Sans";
      font-size:13px;
      margin-top:10px;
      font-weight:700;
}

.col-3 {
    width: 33.33333%;
    padding: 5px;
    float: left;
    min-height: 1px;
}



@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1190 {
  font-family: '微軟正黑體';
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: auto 0;
  min-width: 150px;
  width: 100%;
  background: #000000;
  text-align: center;
}
figure.snip1190 * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1190 img {
  opacity: 0.8;
  width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
figure.snip1190 figcaption {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
figure.snip1190 h2 {
  font-weight: 400;
  left: 0;
  right: 0;
  letter-spacing: -1px;
  margin: 0 auto;
  position: absolute;
  text-transform: uppercase;
  bottom: 50%;
  color:#fff;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
figure.snip1190 h2 span {
  font-weight: 800;
}
figure.snip1190 p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  opacity: 0;
  font-size: 14px;
  -webkit-transform: translateY(-20%) scale(0.7);
  transform: translateY(-20%) scale(0.7);
}
figure.snip1190 .square {
  height: 78px;
  width: 78px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
figure.snip1190 .square:before,
figure.snip1190 .square:after,
figure.snip1190 .square div:before,
figure.snip1190 .square div:after {
  background-color: #ffffff;
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
figure.snip1190 .square:before,
figure.snip1190 .square:after {
  width: 65%;
  height: 2px;
}
figure.snip1190 .square div:before,
figure.snip1190 .square div:after {
  width: 2px;
  height: 65%;
}
figure.snip1190 .square:before,
figure.snip1190 .square div:before {
  left: 0;
  top: 0;
}
figure.snip1190 .square:after,
figure.snip1190 .square div:after {
  bottom: 0;
  right: 0;
}
figure.snip1190 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
figure.snip1190:hover img,
figure.snip1190.hover img {
  opacity: 0.25;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.snip1190:hover h2,
figure.snip1190.hover h2 {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
figure.snip1190:hover p,
figure.snip1190.hover p {
  opacity: 1;
  -webkit-transform: translateY(0px) scale(1);
  transform: translateY(0px) scale(1);
}
figure.snip1190:hover .square:before,
figure.snip1190.hover .square:before {
  width: 38%;
}
figure.snip1190:hover .square div:before,
figure.snip1190.hover .square div:before {
  height: 38%;
}
figure.snip1190:hover .square:after,
figure.snip1190.hover .square:after {
  width: 55%;
}
figure.snip1190:hover .square div:after,
figure.snip1190.hover .square div:after {
  height: 55%;
}

/*服務項目*/
.pc_01 { 
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;/*cover圖片剪裁不拉伸壓縮 ; contain不拉伸壓縮.等比縮放)*/
   background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0) 0% ,rgba(87, 103, 119, 1.0) 100%) , url(https://static.iyp.tw/37467/files/5224e86c-b11d-4f79-b6a2-0f7a9ffe34eb.png);
height: 500px; 
  display: flex; 
  align-items: center;

}

.pc_02 { 
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;/*cover圖片剪裁不拉伸壓縮 ; contain不拉伸壓縮.等比縮放)*/
   background-image: -webkit-linear-gradient(left, rgba(170,158,132,1.0) 0% ,rgba(87, 103, 119, 0.0) 100%) , url(https://static.iyp.tw/37467/files/7678b8b7-098e-4b42-831e-5fe5868bf88b.png);
height: 500px; 
  display: flex; 
  align-items: center;

}

.pc_03 { 
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;/*cover圖片剪裁不拉伸壓縮 ; contain不拉伸壓縮.等比縮放)*/
   background-image: -webkit-linear-gradient(left, rgba(170,158,132,0.0) 0% ,rgba(87, 103, 119, 1.0) 100%) , url(https://static.iyp.tw/37467/files/19508f09-f8b4-44ae-9ae3-3987acfe20ea.png);
height: 500px; 
  display: flex; 
  align-items: center;

}

.pc_04 { 
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;/*cover圖片剪裁不拉伸壓縮 ; contain不拉伸壓縮.等比縮放)*/
   background-image: -webkit-linear-gradient(left, rgba(170,158,132,1.0) 0% ,rgba(87, 103, 119, 0.0) 100%) , url(https://static.iyp.tw/37467/files/a0107f83-ee50-4c5e-8947-07b836703910.png);
height: 500px; 
  display: flex; 
  align-items: center;

}

.pc_05 { 
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;/*cover圖片剪裁不拉伸壓縮 ; contain不拉伸壓縮.等比縮放)*/
   background-image: -webkit-linear-gradient(left, rgba(170,158,132,0.0) 0% ,rgba(87, 103, 119, 1.0) 100%) , url(https://static.iyp.tw/37467/files/5f923761-d573-4a0b-9dc3-3fc4def19e8c.png);
height: 500px; 
  display: flex; 
  align-items: center;

}

@media only screen and (max-width: 1000px){
/*服務項目*/
.service_01 {
  background-color: rgba(87,103,119,0.8);   
}

.service_02 {
  background-color: rgba(170,158,132,0.8);   
}
}


/*手機版漢堡選單*/
.navbar .container {
    background-color: #333; /*導覽列背景顏色樣式*/
}
.navbar-icon-bar {
  width: 28px; /* 三變大*/
  height: 4px; 
  background-color: #fff; /* 填入想要的三條線顏色 */

}
.navbar-icon-bar:before, .navbar-icon-bar:after {
    background-color: #fff; /* 填入想要的三條線顏色 */
}
.navbar .rwd-navbar-toggle {
    padding-right: 150px !important;/*導覽列文字範圍右間距寬度*/
}
.navbar .rwd-navbar-toggle .label {
    left: 45px;
    font-size: 1.0rem; /*導覽列文字尺寸*/
    color: #000; /*導覽列文字顏色樣式*/
    background-color: #ffbb00;/*導覽列文字背景顏色*/
    border-radius: 3px;
    padding: 4px;
}
@media only screen and (max-width: 767px){
.rwd-side .nav li {
    border-bottom: 1px #ccc dashed; /* 展開連結文字底虛線 */
}
.rwd-side .nav span {
    color: #fff; /* 展開連結文字顏色 */
}}


/* 下排浮動頁籤連結 */
#wrap-fmenu{
   max-width:1280px;
    width:100%;
    margin:0px auto;
    display:block;
}
.fMenu{
   background-color:#222;
   display:block;
   position:fixed;
   width:100%;
   margin:0 auto;
   z-index:100;
   color:#FFF;
   left:0;
   bottom:0;
}
.fMenu ul li{
    letter-spacing:1.5px;
    float:left;
    width:33%;
    border-left:1px solid #fff;
    box-sizing:border-box;
    color:#FFF;
    min-height: 90px; /*最小高度*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fMenu ul li:first-child{
	border:none;
}
.fMenu ul li a{
    display:block;
    padding: 10px 10px 0 10px;
    font-size:15px;
    color:#FFF;
    text-align:center;
    box-sizing:border-box;
    letter-spacing:0px;
    line-height: 1.5;
}
.fMenu ul li a i{
    display:block;
    font-size:70%;
    color:#FFF;
}

/*避免遮到footer版權服務文字*/
body[data-type="fullpage"] .container #footer-service { padding: 15px 15px 100px 15px; ; }