/*----------------------------------------/
service
---------------------------------------- */
.service-wrap{ padding: 80px 0px; background: url("/images/theme-b67/index/bg-service.jpg")  repeat-x left top #000; background-size: 60% auto;  }

.service { width: calc(100% + 40px); margin:0px auto 0px 120px; padding: 0px; display: flex;flex-wrap: wrap; position: relative;z-index: 1;}
.service li {width: calc(100%/3 - 40px ); margin:20px; position: relative;  transition: all 0.3s linear 0s; list-style: none; }
.service li:nth-child(1) { margin-left: -120px }
.service li:nth-child(4) { margin-left: 0px }
.service li .item{width: 100%;  }

.service li .inner-body { position: absolute;bottom:0px; left:0px; width:100%; height: auto; padding:10px 0px; display: flex; flex-wrap: nowrap; justify-content: space-between;align-items: center; z-index: 9; background-color: rgba(0,0,0,.5) }
.service li i{width:15%;}
.service li i img{filter: brightness(900%)}
.service li:hover i img{filter:none}

.service li h3 { width:85%;position: relative; z-index: 5; margin: auto 30px;font-size:1.5rem; font-weight: 400; color: #fff; letter-spacing: 1px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
.service li h3::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #c30d23; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}
.service li:hover h3::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.service li:hover h3{ color:#c30d23}
.service li .photo { width: 100%; height: auto; padding: 0px;  overflow: hidden; position: relative; z-index: 0;  }
.service li .photo figure{ width: 100%; padding-top:75.25%; height: 0; object-fit: cover;overflow: hidden;background: #000; position: relative; transition: all 0.5s ease 0s;}
.service li .photo figure img { max-width: none;  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}

.service li:hover  .photo figure img {opacity: 0.4; transform: scale(1.05)}

@media (max-width:979px) {
.service li h3 { font-size:1.275rem; margin-bottom: 10px; }
}
@media (max-width:767.98px) {
.service li h3 { font-size:1.375rem; margin-bottom: 10px; }   
}

@media (max-width:480px) {
.service { margin:0px auto;}   
.service li {width: calc(100%/2 );}    
.service li:nth-child(1) { margin-left:auto}
.service li:nth-child(4) { margin-left: auto}
.service li h3 { font-size:1.15rem; margin-bottom: 10px; }   
}
@media (max-width:280px) {
.service li {width: 100%;}    
}


.culture{position: relative;width: 100%; margin:50px  auto 80px auto; }
.culture-box{width: 50%; padding: 20px;}
.photo{ border-radius: 20px; position: relative;z-index: 3 }
.photo:after{  content: ""; width: 60px; height: 60px; position: absolute; z-index: -1; right:-20px;top:-20px;  background: url("/images/theme-b67/index/dot-1.svg") no-repeat left top; background-size: contain;  -webkit-animation: rotate-keyframe  3.5s linear infinite; }
.photo img{ border-radius: 20px; overflow: hidden; z-index:9 }
.rotate {  animation-name: rotate-keyframe; animation-duration: 3s;    animation-iteration-count: infinite; /* 動畫播放次數 */ animation-timing-function: linear;   /* 影片加速速率 */}
@keyframes rotate-keyframe {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width:840px) {
.culture-box{width: 100%; padding: 20px;}
}
@media (max-width:640px) {
.culture-box{  padding: 20px 0px;}
}


.grid-card { display: grid; width: 100%; margin: auto; grid-template-columns: repeat(auto-fit, minmax(31.333%, 1fr)); gap:20px; padding: 15px 0px;position: relative;z-index:2}
.grid-box {   width: 100%; padding: 20px;   border:solid 1px #f7f7f7; background-color:#efecec;box-shadow: 0 0 15px rgba(195, 13, 35, .3);}
.grid-w30 h3 { font-size: 1.25rem; margin-bottom: 20px; font-weight: 700;text-align: center; color:#c30d23}
.grid-w30 ul { margin: 0px; padding: 0px; list-style: none}
.grid-w30 ul li{ margin: 0px; padding: 0px; }
.grid-w30 ul.font-m li{ font-size: .9rem; margin-bottom: 5px;}
.grid-w30 figure.pho{   margin-bottom: 20px; border-radius:30px; overflow: hidden}

.grid-box-color { display: flex; flex-wrap: wrap;align-items: center; justify-content: center; width:200px; height: 200px;  padding: 20px;  border-radius:99rem;  border:solid 1px #f8f8f8; background-color:transparent;  }
.grid-box-color:nth-child(1){border: 1px solid #a2c617; background-color:#a2c617; }
.grid-box-color:nth-child(2){border: 1px solid #f59c00;  background-color:#f59c00;}
.grid-box-color:nth-child(3){border: 1px solid #017a84; background-color:#017a84; }
.grid-box-color:nth-child(4){border: 1px solid #03a9f4;  background-color:#03a9f4;}
 
.grid-box-color.grid-w30 h3 { margin:0px  auto; text-align: center; font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; color:#fff}
 figure.pic-radius{ margin:30px; border-radius:30px; overflow: hidden}
 figure.pic-radius img{ border-radius:30px; overflow: hidden}
 
@media(max-width: 1180px) {
.grid-card {  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr)); gap:50px 20px; padding: 15px 0px;position: relative;z-index:2}
 }



.separate { width: 20px; height: 2px; background: #c30d23; margin: 20px auto;}



.iconBox { width: 120px; height: 120px; background: #c30d23; border-radius: 50%; display: flex; align-items: center;  justify-content: center; margin: -50px auto 30px auto;}

.iconBox i{width: 80%; height: 80px; filter: invert(100%) brightness(5) grayscale(1);}