/*icon*/

.line{position:fixed;right:0.5%;top: 50%;z-index:1000;transform:scale(0.4);}

.FB {position: fixed;right: 0.5%; top:60%;z-index: 1000;transform:scale(0.4);}

.TL {position: fixed; right: 0.5%; top: 70%; z-index: 1000;transform:scale(0.4);}

.MAIL {position: fixed; right: 0.5%; top: 80%; z-index: 1000;transform:scale(0.4);}


body{background:#fff;}

#wrap{background:url(https://static.iyp.tw/409546/files/ad2e98b5-1c4d-4533-b0da-a31b2e603de9.jpg)no-repeat;
background-position:top center;background-size:cover;background-attachment:fixed;}

.fcol .container {
    padding: 16px;
    background: 
    rgba(255,255,255,0.);
}

/*回首頁*/
.navbar-nav > li > a {
    color: #fff;
}

.topnavbar .container {
    height: 100%;
    padding-top: 0px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 0;
}

.topnavbar {
  background-color: #fff;
  top:0px;
  position: relative;
  z-index:100;
  width:100%;
  padding: .6rem 0;
  height: 150px;
  padding-top:0px;
}



/*nav*/
#nav ul li a {
    white-space: nowrap;
    color: #333;
    line-height: 1.3;
    font-weight: normal;
    padding: 10px 18px;
    font-size: 95%;
    border-right: 1px #888 dotted;
    transition:all 0.5s;
}

#nav ul li a:hover{
    background:#c6dff5;
    color: #555;
}


#nav ul li.current a  {
    background:#1568a9;
    color: #fff;  
}



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

.swiper-wrapper, .swiper-slide {
  height: 0 !important;
  padding-bottom: calc(650 / 1920 * 100%); /* 注意圖片高度與寬度要去掉單位 */
}

.swiper-slide {
  width: 100% !important;
}

/*Index*/
.serveimg {
    display: block;
    text-align: center;
    width: 100%;
    height: 0px;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative;
    border-radius:10px; 
    min-height:80px;
    background:#c5e0f5;
    padding:15px 12px;
    transition:all.3s;
}


.serveimg:hover {
    display: block;
    text-align: center;
    width: 100%;
    height: 0px;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative;
    border-radius:10px; 
    min-height:80px;
    background:#1f64aa;
    padding:15px 12px;
}



.serveimg p span{color:#555;display:block;height:80px;}
.serveimg p span:hover{color:#fff;display:block;}


/*h1*/
.h1title{color:#1966aa;border-bottom:1px dashed #1966aa;}

ul.product-list li a:hover {
    color: #000;
}/*改產品格 滑鼠滑過去字顏色*/

/*pd*/
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: #000;
    overflow: hidden;
    padding: 0 16px;
}

ul.product-list li .desc{
   display:none;
}

body[data-type="fullpage"] .product-list-div h2 a.show-all {
    color: #fff;
    transition-property: left, color;
    background: #59aacb;
    text-shadow: none;
    padding: 0 10px;
}

.mark {
    background: none;
   }

/*footer*/
#foot-nav ul li a {
    color: #fff;
    font-size: 1.06em;
  
}

#foot-nav {
    clear: both;
    padding: 1em 0;
    border-bottom: 1px solid #fff;
  ;
}
.contact-row {
    padding: 0em 0 1em;
    line-height: 1.6;
  display:none;
}

#footer {
    color:#fff;
  
}

#contact-info ul li span {
    color: #fff;
}

#copyright, #copyright a{color:#dcdcdc;}


/*隱藏 追蹤分享 字樣*/
div.col-md-5 {
display: none;
}

/*Index_1*/
#bodyinhome .fcol.fcol-1{
  background:url(https://static.iyp.tw/409546/files/1c3c1aa2-8267-45b5-9f62-f23488f9338b.jpg)no-repeat;
  background-position: top center;
  background-size:cover;
}
}  
#bodyinhome .fcol.fcol-1 .container {
   max-width:65%;
  width:100%;
  padding:60px 80px;

}
@media(max-width:960px){
  #bodyinhome.rwd-collapse.viewmode.default .fcol.fcol-1 .container{
   padding:1px 1px 1px 1px; 
  }
   }
#bodyinhome .fcol.fcol-1{
  background:url(https://static.iyp.tw/409546/files/4c9e6994-d83d-4fb6-8e82-f642c003c5a2.jpg)no-repeat;
  background-position: top center;
  background-size:cover;
  display:none;
}

#bodyinhome.about-us .fcol.fcol-1 .container {
  max-width:100%;
  width:100%;
  padding:60px 80px;
}


@media(max-width:600px){
  #bodyinhome.rwd-collapse.viewmode.default.about-us .fcol.fcol-1 .container{
   padding:60px 30px;
  }
 }

@media(max-width:767px){
#bodyinhome.about-us .fcol.fcol-1 .container {
  flex: 0 0 100%;
  max-width: 100%;
     font-size: 16px;
 }
}
 }
#bodyinhome .fcol.fcol-2{
  background:url(https://static.iyp.tw/409546/files/4c9e6994-d83d-4fb6-8e82-f642c003c5a2.jpg)no-repeat;
  background-position: top center;
  background-size:cover;
  background-color: #80AADA;
}
#bodyinhome .fcol.fcol-3{
  background:url(https://static.iyp.tw/409546/files/ced8db3c-9be2-434e-90b4-b32e063a4dba.jpg)no-repeat;
  background-position: top center;
  background-size:cover;
  background-color: ;
}
#bodyinhome .fcol.fcol-4{
  background:url()no-repeat;
  background-position: top center;
  background-size:cover;
  background-color: #ff6e2b;
}
#bodyinhome .fcol.fcol-5{
  background:url()no-repeat;
  background-position: top center;
  background-size:cover;
  background-color: ;
}
#bodyinhome .fcol.fcol-6{
  background:url()no-repeat;
  background-position: top center;
  background-size:cover;
  background-color:#17ffaa ;
}
#bodyinhome .fcol.fcol-2{
  background:url()no-repeat;
  background-position: top center;
  background-size:cover;
  display:none;
}

/*About_3*/

#bodyinhome.rwd-collapse.viewmode.default.about-us  .fcol.fcol-3 .container{
   padding:60px 16px;
}

.intro {
  -webkit-animation-delay: 1.5s;
}

.intro a {
  overflow: hidden;
  position: relative;
  padding: 10px 40px;
  border: 0px #aaa solid;
  display: inline-block;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  background: #6fc33c;
}

.intro a:hover {
  color: #fff;
  background: #000;
  transition: all 0.4s;
}

.intro a:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: -100%;
  display: block;
  background: #000;
  transition: all 0.4s;
  z-index: -1;
}

#service .list article {
  background: #fff;
  width: 90%;
  margin: 0%;
  box-shadow: 0px 5px 15px
    rgba(0,0,0,0.16);
  padding: 15px 15px 5px;
  text-align: left;
  height: 280px;
}

@media screen and (max-width: 768px) {
  #service .list article {
    height: 280px;
  }
}

#service .list article a {
  display: block;
}

#service .list article .image_hover {
  height: 70%;
  display: flex;
  align-items: center;
}

#service p {
  font-size: 90%;
  padding: 8px 0px;
  color: #777;
}

#service p span {
  padding: 8px 0px;
  color: #000;
}

.image_hover {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.image_hover img {
  margin: auto;
  transition: transform 0.6s ease;
}

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

.project .dfd-folio-categories .byline.category {
  display: inline-block;
  overflow: hidden;
  margin-bottom: 10px;
}

span.cat-name {
  background: #0060C9;
  padding: 5px 10px;
  float: right;
}

/*about-us第一階層語法*/
#bodyinpage.about-us .fcol.fcol-1 {
  background-image: url(https://static.iyp.tw/409546/files/4c9e6994-d83d-4fb6-8e82-f642c003c5a2.jpg); /* 设置背景图片 */
  background-position: top center; /* 设置背景图像位置 */
  background-size: cover; /* 背景图像覆盖整个元素 */
  
}
#bodyinpage.about-us .fcol.fcol-2 {
  background-image: url(); /* 设置背景图片 */
  background-position: top center; /* 设置背景图像位置 */
  background-size: cover; /* 背景图像覆盖整个元素 */
  background-color: #8BE2FF;  
}


@media (min-width: 992px) {
  .col-md-7 {
    width: 100%;
  }
}  


/*TEL4按鈕*/
#call4 a.more-btn {
  position: relative;
  margin-top: 0px;
  padding: 12px 15px;
  border: solid 1px #FF6F61; /* 鮮豔的紅色邊框 */
  color: #FF5733; /* 鮮紅色文字 */
  font-size: 25px;
  border-radius: 0em;
  display: inline-block;
  z-index: 9999;
  width: 95%;
  transition: all 0.3s ease-out; /* 添加過渡動畫 */
}

@media (max-width: 428px) {
  #call4 a.more-btn {
    position: relative;
    margin-top: 0px;
    padding: 10px 12px;
    border: solid 1px #FF6F61; /* 鮮豔的紅色邊框 */
    color: #FF5733; /* 鮮紅色文字 */
    font-size: 22px;
    border-radius: 0em;
    display: inline-block;
    z-index: 9999;
    width: 100%;
    transition: all 0.3s ease-out; /* 添加過渡動畫 */
  }
}

#call4 a.more-btn span {
  color: #fff; /* 文字顏色保持白色 */
}

#call4 a.more-btn:hover {
  color: #fff !important;
  text-decoration: none;
  border-color: #FF5733; /* 邊框顏色變為鮮紅色 */
  border-radius: 50px; /* 邊框圓角同步變化 */
}

#call4 a.more-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0%;
  height: 100%;
  background: #FF5733; /* 背景顏色為鮮紅色 */
  transform: translateX(-50%);
  border-radius: 0em;
  transition: all 0.3s ease-out;
}

#call4 a.more-btn:hover::before {
  width: 100%;
  left: 0;
  transform: translateX(0);
  border-radius: 50px; /* 背景圓角同步變化 */
  background: #FF5733; /* 背景顏色為鮮紅色 */
}

#call4 a.more-btn span {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}


/*按鈕3*/
.myButton3 {
	box-shadow: 0px 1px 0px 0px #1c1b18;
	background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
	background-color:#eae0c2;
	border-radius:15px;
	border:1px solid #333029;
	display:inline-block;
	cursor:pointer;
	color:#505739;
	font-family:Arial;
	font-size:22px;
	font-weight:bold;
	padding:40px 90px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton3:hover {
	background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
	background-color:#ccc2a6;
}
.myButton3:active {
	position:relative;
	top:1px;
}
/*框3*/
.zi_box_1 {
border: 2px solid #69b4ff;/* 框線顏色 */
margin: 2em 0;
padding: 20px;
position: relative;
}
.zi_box_1::before {
background-color: #fff;
color: #69b4ff;
/*content: "POINT";標題*/
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}
/* 按鈕 */
.myButton {
  box-shadow: 0px 1px 0px 0px ##ff0000; /* 血紅色陰影 */
  background: linear-gradient(to bottom, #B22222 5%, #ff0000 100%); /* 血紅色漸層背景 */
  background-color: #ff0000; /* 血紅色背景 */
  border-radius: 15px;
  border: 3px solid #000000; /* 粗黑色邊框 */
  display: inline-block;
  cursor: pointer;
  color: #ffffff; /* 白色文字 */
  font-family: Arial;
  font-size: 18px; /* 文字大小 */
  font-weight: bold;
  padding: 14px 18px; /* 增加內邊距 */
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffffff; /* 白色文字陰影 */
}

.myButton:hover {
  background: linear-gradient(to bottom, #8B0000 5%, #B22222 100%); /* 懸停時顏色反轉 */
  background-color: #ff0000; /* 血紅色背景 */
}

.myButton:active {
  position: relative;
  top: 1px;
}

body[data-type="fullpage"]:not(#managehome) #wrap > :not(:last-child) { margin-bottom: 0px; }