.pro-info-title {font-size: 1.4rem;padding-bottom: 8px;border-bottom: 1px rgb(1 59 91 / 36%) solid;margin-bottom: 8px;color: #1a547d;font-weight: 400;}
.pro-info-text {font-size: 16px;line-height: 1.7;font-weight: 300;}
.power-bg {
    position: absolute;
    width: 100%;
    max-width: 56%;
    bottom: 2%;
    right: 1%;
    background: rgb(255 255 255 / 78%);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
}
.power-wind-box {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 0;
    left: 3%;
    border: 0px #000 solid;
}
.power-1 {
    position: absolute;
    width: 15%;
    bottom: 0;
    left: 50%;
    margin-left: -7%;
    z-index: 1;
}
.power-wind {
    position: absolute;
    width: 120px;
    top: -60px;
    left: 50%;
    margin-left: -60px;
    animation: spin 8s linear infinite; /* 控制旋轉速度 */
    transform-origin: center center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.projects-info-box {
    position: absolute;
    width: 100%;
    max-width: 17%;
    background: rgb(255 255 255 / 90%);
    padding: 10px 20px;
    left: 21%;
    top: 10%;
    border-radius: 12px;
    box-shadow: -10px 14px 18px 1px rgb(0 0 0 / 10%);
    opacity: 0;
}
.projects-info-box::after {
    content: '';
    position: absolute;
    clip-path: polygon(0 0, 0 56%, 100% 100%);
    background: #fff;
    right: -16%;
    bottom: 6%;
    z-index: 1;
    width: 50px;
    height: 50px;
}
.projects-info-box2 {
    position: absolute;
    width: 100%;
    max-width: 29%;
    background: rgb(255 255 255 / 90%);
    padding: 10px 20px;
    left: 48%;
    top: 1%;
    border-radius: 12px;
    box-shadow: -10px 14px 18px 1px rgb(0 0 0 / 10%);
    opacity: 0;
}
.projects-info-box2::after {
    content: '';
    position: absolute;
    clip-path: polygon(100% 0, 28% 0, 0 100%);
    background: #fff;
    left: 10%;
    bottom: -17%;
    z-index: 1;
    width: 50px;
    height: 50px;
}
.power-bg.animate__animated {opacity: 1;}
.projects-info-box3 {
    position: absolute;
    width: 100%;
    max-width: 27%;
    background: rgb(255 255 255 / 90%);
    padding: 10px 20px;
    left: 8%;
    top: 28%;
    border-radius: 12px;
    box-shadow: -10px 14px 18px 1px rgb(0 0 0 / 10%);
    opacity: 0;
}
.projects-info-box3::after {
    content: '';
    position: absolute;
    clip-path: polygon(0 35%, 0% 100%, 100% 13%);
    background: #fff;
    right: -9%;
    top: 6%;
    z-index: 1;
    width: 50px;
    height: 50px;
}
.projects-info-box4 {
    position: absolute;
    width: 100%;
    max-width: 23%;
    background: rgb(255 255 255 / 90%);
    padding: 10px 20px;
    left: 48%;
    top: 42%;
    border-radius: 12px;
    box-shadow: -10px 14px 18px 1px rgb(0 0 0 / 10%);
    opacity: 0;
}
.projects-info-box4::after {
    content: '';
    position: absolute;
    clip-path: polygon(0 0, 32% 100%, 100% 100%);
    background: #fff;
    left: 8%;
    top: -26%;
    z-index: 1;
    width: 50px;
    height: 50px;
}

#years h4 {font-size: 26px;}
.years-animate {opacity: 0; /* 預設隱藏 */}
[data-aos].aos-animate {opacity: 1 !important; /* 動畫中顯示 */}
.public_body {
    border: 0px rgb(255 255 255 / 50%) solid;
    padding: 20px 0px;
    text-align: center;
    position: relative;
    background: rgb(255 255 255 / 20%);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 55px;
   background: linear-gradient(to bottom,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 100%); 
}
.public_title {
    font-size: 22px;
    font-weight: 500;
    color: #244c85;
    background: #dde3ec;
    margin-bottom: 20px;
    padding: 5px 0px;
}
.public-bg {
    /* background: rgb(199 213 235 / 75%); */
    padding: 10px;
    border-radius: 20px;
}
.tag {
    position: absolute;
    width: 21px;
    height: 100px;
    background: #1a547d;
    left: 1%;
    top: -28px;
    transform: rotate(45deg);
    display: none;
}
.esg-body {
     background-image: url(../images/bg-5.jpg?v=2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
}
#esg .esg-body .parallax-container .page:last-child {margin-bottom: 50px;}
.bg-title {position: absolute;bottom: 10px;  right: 1%; color: white; font-size: 26px; background:#1A567F; padding: 10px 20px; border-radius: 8px;  z-index: 2; transition: opacity 1s ease-in-out;  font-size: 16px; font-weight: 500; color: #fff;}

#community .parallax-content .page:nth-child(odd) .com-pic {
       width: 63%;
    position: absolute;
    height: 100%;
    right: 0;
    top: 0px; 
}
#community .parallax-content .page:nth-child(even) .com-pic {
       width: 63%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0px; 
}
#community .page {margin-bottom: 30px;}
#community .parallax-content {position: initial;}
.community-box h3 { margin-bottom: 10px;}
.community-box p { font-weight: 400;text-align: left;text-shadow: #053c5b 1px 0 11px;}
#community .parallax-content .page:nth-child(odd) .community-box { 
  position: relative;
    z-index: 2;
    width: 35%;
    left:-10%;
    border-radius: 10px;
    padding: 30px;
   /*  box-shadow: 2px 1px 10px 2px rgb(0 0 0 / 5%);*/
    overflow: hidden;
    color: #fff;
}
#community .parallax-content .page:nth-child(even) .community-box { 
  position: relative;
    z-index: 2;
    width: 35%;
    left: 75%;
    border-radius: 10px;
    padding: 30px;
   /* box-shadow: 2px 1px 10px 2px rgb(0 0 0 / 5%);*/
    overflow: hidden;
    color: #fff;
}

.comm-line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 50vh;
    width: 8px;
    background: #709dbd;
}
#community .parallax-content:before {background-color: rgb(0 0 0 / 0%);}
.bg-accent2 {
    background-image: url(../../images/bg-3.jpg?v=2);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    z-index: 0;
    left: 0;
    filter: blur(0px);
}
/* .banner-img {
     background-image: url(../images/banner_bg.jpg?v=10);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    width: 100%;
    height: 100%;
}*/
.banner-img {
    position: relative; /* 保證子層絕對定位相對於此 */
    background: none !important; /* 避免舊 background-image */
    width: 100%;
    height: 100%;
    
}

.banner-fade {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 1; /* 背景層，內容要高於這個 */
    transition: opacity 0.8s;
}
.banner-fade.show { opacity: 1; }

.banner-content {
    position: relative;
    z-index: 2;   /* 保證內容在最上面！ */
}

.banner_bg {height: 100vh;position: relative;}
.mouse {
max-width: 20px;
    width: 100%;
    animation: move .9s ease-in-out infinite alternate;
    z-index: 999;
       bottom: 20px;
    left: 50%;
    position: absolute;
    margin-left: -10px;
}

@-moz-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

@-webkit-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

@-o-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

@keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}
.bg-line {
position: absolute;
    bottom: 0;
    width: 100%;
    height: 0px;
    /* background: #333; */
    z-index: 1;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, rgba(255, 255, 255, 1) 50%);
}
.bg-line2 {
position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    /* background: #333; */
    z-index: 1;
       background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, rgb(243 243 243) 50%);
}
.com-arrow {
    position: absolute;
    bottom: 10px;
    z-index: 10;
    font-size: 18px;
    color: white;
    cursor: pointer;
    user-select: none;
    background: rgba(0, 0, 0, 0.4);
    padding: 5px 12px;
    border-radius: 4px;
    transition: background 0.3s;
}
.com-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
}
.com-arrow.left {
  left: 10px;
}
.com-arrow.right {
  left: 50px;
}

.community-bg{
      background-image: url(../images/bg-4-3.jpg?v=3);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    width: 100%;
    height: 100%;
}
.go-down {
    background: #000;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    margin-left: 20px;
}

.timeline {
  position: relative;
  padding-left: 50px;
}
.timeline-line {
  position: absolute;
  top: 0;
  left: 20px;
  width: 4px;
  height: 0;
  background: #1a567f;
  transition: height 0.3s ease-out;
}
.timeline-event {
  position: relative;
  margin: 80px 0;
}
.timeline-event::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 0;
  width: 14px;
  height: 14px;
  background: #1a567f;
  border-radius: 50%;
}
.timeline-content time {    
    display: block;
    font-style: normal;
    font-size: 16px;
    line-height: 26px;
    color: #1a567f;
    font-weight: 500;
}
.time-line-end2 {
     position: absolute;
    bottom: -5%;
    width: 100%;
}
.time-line-end2 h4 {
        text-align: center;
    color: #7290b0;
    border-bottom: 1px #d2e4f7 solid;
    display: table;
    margin: auto;
}
.time-line-end2::after {
    position: absolute;
    content: '';
    left: 50%;
    top: -16px;
    text-align: center;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #d2e4f7 transparent transparent transparent;
    margin-left: -10px;
}
   .timeline-container {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      padding: 50px 0;
    }
    .timeline-line {
position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    background: #d0d0d0;
    transform: translateX(-50%);
    height: 0;
    transition: height 0.6s ease;
    }
    .timeline-item {
      display: flex;
      align-items: center;
      margin: 40px 0;
    }
    .timeline-content {
    width: 45%;
    }
    .timeline-content.left {
      margin-right: auto;
    }
    .timeline-content.right {
      margin-left: auto;
    }
    .timeline-dot {
      width: 16px;
      height: 16px;
      background: #d2e4f7;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%; /* 垂直居中於 timeline-content */
      transform: translate(-50%, -50%); /* 精確對齊中央線條 */
      z-index: 10; /* 確保圓點在線條之上 */
    }

.timeline-container .timeline-item:nth-child(odd) {text-align: left;}
.timeline-container .timeline-item:nth-child(even) {text-align: right;}
.map {
    width: 100%;
    position: relative;
 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    width: 100%;
    height: 100vh;
    transition: background-position 0.5s ease; /* 平滑過渡 */
}
.map:hover {
    background-position: calc(50% + 50px) bottom; /* 水平偏右50px, 垂直仍為 bottom */
}
.map-info-box {
    position: absolute;
    width: 100%;
    max-width: 35%;
    /* background: rgb(255 255 255 / 55%); */
    padding: 20px;
    left: 2%;
    top: 2%;
    border-radius: 12px;
    opacity: 0;
        pointer-events: none; /* 可防止 hover 狀態卡住 */
   transform: perspective(600px) rotateY(90deg); 
  transition: opacity 0.5s ease;
}

@keyframes flipLeft {
  0% {
    transform: perspective(600px) rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(600px) rotateY(0deg);
    opacity: 1;
  }
}
.map-info-box.animate {
  animation: flipLeft 1s forwards;
}
.map-info-box h3 {color: #013b5b;margin-bottom: 15px;line-height: 1;}
.map-info-box h3 span{font-size: 28px;}
.pro-info-stitle {font-weight: 500;color: #5b5b5b;}
.pro-info-text2 {font-size: 28px;font-weight: 600;line-height: 1.5;color: #000;display: contents;}
.pro-info-text2 span{ font-size: 20px;display: inline-block;}
:root {
  --line-color: #88aebd;
}

/* ========== 垂直線條（直線） ========== */
.dashed-line-vertical {
    width: 4px;
    height: 80px;
    position: absolute;
    overflow: hidden;
    left: 11%;
        bottom: 0;
}

.dashed-line-vertical::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 200%;
  background-size: 100% 20px; /* 10px 線 + 10px 空格 */
}

/* 垂直：由上往下 */
.dashed-line-vertical.top-down::before {
  top: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--line-color),
    var(--line-color) 10px,
    transparent 10px,
    transparent 20px
  );
  animation: move-vertical-down 1s linear infinite;
}

@keyframes move-vertical-down {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}

/* 垂直：由下往上 */
.dashed-line-vertical.bottom-up::before {
  bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--line-color),
    var(--line-color) 10px,
    transparent 10px,
    transparent 20px
  );
  animation: move-vertical-up 1s linear infinite;
}

@keyframes move-vertical-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20px);
  }
}


/* ========== 水平線條（橫線） ========== */
.dashed-line-horizontal {
width: 30.5%;
    height: 4px;
    position: absolute;
    overflow: hidden;
    left: 11%;
    bottom: 0px;
}

.dashed-line-horizontal::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 200%;
  background-size: 20px 100%; /* 10px 線 + 10px 空格 */
}

/* 水平：由左往右 */
.dashed-line-horizontal.left-right::before {
  left: -100%;
  background: repeating-linear-gradient(
    to right,
    var(--line-color),
    var(--line-color) 10px,
    transparent 10px,
    transparent 20px
  );
  animation: move-horizontal-right 1s linear infinite;
}

@keyframes move-horizontal-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(20px);
  }
}

.bg-line2 {
    background-image: url(../images/bottom-bg.jpg);
    background-repeat: repeat-x;
    height: 80px;
    position: absolute;
    bottom: -77px;
    left: 0;
    width: 100%;
    display: block;
}
.power-linebox {
    position: absolute;
    height: 100px;
    bottom: 27px;
    width: 100%;
    overflow: hidden;
}
.vertical2 {left: 41.5%;}
.vertical3 {left: 42.5%;}
.horizontal2 {left: 43%;width: 27%;}
.vertical4 {left: 70%;}
.vertical5 {left: 71%;}
.horizontal3 {left: 71%; width: 20%;}
.vertical6 {left: 91%;}
.title-icon { font-size: 23px;position: absolute; color: #ff8500; top: 0; margin-left: -24px;}
.service-photo {overflow: hidden;border-radius: 90%; position: relative;box-shadow: 1px 5px 8px 1px rgb(0 0 0 / 36%);}
.service-title {text-align: center;margin-top: 10px;}
.service-title h5 {color: #0e4990;border-bottom: 2px #01a0e3 solid;display: inline-block;}
.plus-icon {opacity: 0;position: absolute;width: 50px; left: 50%;margin-left: -25px; top: 41%;font-size: 28px; text-align: center; color: #ff4200;}
.link4:hover .plus-icon {z-index: 1;opacity: 1;}
.cat-mod-1 { max-width: 715px; margin-left: auto; margin-right: auto; padding: 0 15px;}
.cat-wrap {padding: 120px 0 140px;}
.index-no2 {position: relative; top: 50px;}
.bg-image-3 { background-image: url(../images/page-bg1.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;}
.bg-accent-2,.bg-accent-2 h3 {background-color:#60aac9;color: #fff; position: relative;}
.page-top-bg {position:relative;}
.page-top-bg::after {/* background: linear-gradient(to bottom, rgb(0 0 0 / 58%) 0%, rgba(0, 0, 0, 0) 100%);*/content: '';top: 0;left: 0;width: 100%;height: 90px;position: absolute; }
#about {background: #fff;}
#about .blurb__title {color: #01a0e3;}
#about .blurb-text {color: #fff;}
.icon svg {top: -4px;position: relative;}
.about-box-1 {background: #01335d;}
.about-box-line {text-align: center; border-right: 1px rgb(255 255 255 / 44%) solid;}
/* #location {background: #aacce0;} */
.loaction-text-box {color: #1d3640; font-weight: 400;line-height: 1.6;padding: 0px 20px}
.loaction-text-box ul li {text-align: left; margin-bottom: 10px;}
.loaction-text-box h4 {color: #156483;margin-bottom: 8px;padding-bottom: 8px;border-bottom: 1px #ffffff solid;position: relative;}
.loaction-box {padding: 120px 0px 0px;}
.loaction-text-box ul li span {color: #0a5b7c;font-weight: 700;}
#contact h3 {color: #0a5b8a;position: relative;}
.contact-line {border-right: 1px #01a0e3 solid;margin-right: 15px;}
.contact-bg {background-image: url(../images/contact-bg.png); background-repeat: no-repeat; background-position: right 100%; background-size: 60%;}
#contact .button-black {color: #fff; background-color: #093C71; border-color: #093C71;}
.service-body {
    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    display: block;
    padding: 100px 0;
}
.service-box {padding: 0 15%;text-align: right;}
.service-title {text-align: center;font-size: 32px; color: #a3e3ff; font-weight: 400; border-bottom: 1px #fff solid; display: block; position: relative;}
.service-btitle {text-align: right;font-size: 32px; color: #a3e3ff; font-weight: 400; border-bottom: 1px #fff solid; display: inline-block; position: relative;}
.service-over {overflow: hidden;border: 1px #fff solid;}
#service {background: linear-gradient(135deg,  rgba(13,120,191,1) 0%,rgba(96,170,201,1) 100%); }
.service-tel {text-align: right; margin-top: 50px;}
.free-tel {}
.service-tel h4 {color: #ff941e;}
.service-tel h4 a:hover {color: #ff941e;}
.about-box-text {display: flex;justify-content: center; /* 水平置中 */ align-items: center;      /* 垂直置中 */}
.shadow {box-shadow: 6px 6px 12px 1px rgb(0 0 0 / 31%);}
.top-sbg{clip-path: polygon(0 12%, 100% 0, 100% 100%, 0% 100%);}
#service-info .contact-bg {background-size: 39%;}
/* .rd-navbar--is-stuck {background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgb(1, 160, 227) 100%);} */
.service-line {border-left: 2px #01a0e3 solid;}
.service-box2 img{padding: 5px;}
#service-info .blurb__title {color: #01a0e3;}
#service-info .blurb-text {color: #fff;}
.qrcode {width: 100%;max-width: 180px; margin-left: 30px;}




@media only screen and (max-width: 1500px) {
    #community .parallax-content .page:nth-child(odd) .community-box {left: -30px;}
    #community .parallax-content .page:nth-child(even) .community-box {width: 38%;left: 68%;}
    
}





@media only screen and (max-width: 1366px) {
    .projects-info-box2 {max-width: 44%;}
    .power-bg { max-width: 68%; bottom: 5%;}
    .map {height: 110vh;}
    .map-info-box {left: 10px;}
    

}


@media only screen and (max-width: 1280px) {


}

@media only screen and (max-width: 1024px) {
    .pro-info-text {font-size: 14px;}
     .projects-info-box2 { max-width: 38%; left: inherit;right: 4%;}
    .projects-info-box2::after { clip-path: polygon(100% 0, 0% 100%, 100% 66%);  left: -9%; bottom: 15%; width: 50px; height: 50px;}
    .power-bg {max-width: 64%;left: 50%;margin-left: -32%;}
    .projects-info-box { top: 3%;}
    .power-wind-box { width: 104px;height: 106px;}
    .pro-info-title {font-size: 20px;padding-bottom: 2px;}
    #community .parallax-content .page:nth-child(odd) .com-pic {width: 50%;}
    #community .parallax-content .page:nth-child(even) .com-pic {width: 50%;}
    .public_title {font-size: 18px;}
    .power-linebox {height: 70px;bottom: 18px;}
    
    

}


@media only screen and (max-width: 835px) {
    .power-wind-box {width: 78px;height: 80px;}
    .power-wind { width: 80px; top: -39px; margin-left: -40px;}
    .pro-info-text2 {font-size: 22px;}
    .pro-info-text2 span {font-size: 16px;display: block;}
    .pro-info-stitle {font-size: 15px;}
    
}

@media only screen and (max-width: 768px) {
        .projects-info-box2 {left: inherit; right: 5%; }
        .power-wind-box {width: 17%; height: 50%;}
        .power-bg { max-width: 96%; left: 50%; margin-left: -48%; bottom: 2%;padding-top: 22px;}
        .bg-title {font-size: 14px;right: 3px;}
        .community-box p {font-size: 14px;}
        .community-box h3 {font-size: 22px; line-height: 1.5; font-weight: 600;}
        .map {height: 75vh;}
        .map-info-box {max-width: 50%;}
        .map-info-box2{    position: absolute;width: 100%; max-width: 50%;  background: rgb(255 255 255 / 88%); padding: 15px 10px; left: 1%; top:1%; border-radius: 12px; opacity: 0;}

        .map-info-box2 h3 {color: #013b5b;margin-bottom: 15px;}
    .map-info-box2 h3 span{font-size: 18px;}
    .pro-info-text2 {font-size: 20px;font-weight: 500;}
    .pro-info-text2 span {font-size: 14px;}
    .pro-info-stitle {font-size: 13px;line-height: 1;}
    .power-linebox {bottom: 9%;}
    .loaction-box {padding: 40px 0px 0px;}
    .loaction-text-box h4 {text-align: left;padding-left: 20px;}
     #location .cat-wrap { padding: 40px 0 70px;}
    #location .index-no2 {top: 0px;}
    .contact-bg {background-position: right 100%;background-size: 90%;}
        .service-box2 p {display: inline-grid !important;}
    .service-box2 p img {width: 100% !important;}

}



@media only screen and (max-width: 480px) {
  .power-wind {width: 18vw;top: -100%;margin-left: -9vw;}
    .projects-info-box {max-width: 39%;left: 1%; top: 4%; padding: 2px 15px;}
    .pro-info-title {font-size: 12px;font-weight: 500;line-height: 1.5;}
    .pro-info-text {font-size: 11px;line-height: 1.4; margin-bottom: 7px;}
    .pro-info-text ul {padding: 0 14px; margin-bottom: 0;}
    .projects-info-box::after {width: 30px;height: 30px;}
    .projects-info-box2 {right: -7%;padding: 2px 12px;top: -11%; max-width: 45%;}
    .map-box {overflow: inherit;}
    .projects-info-box2::after {left: -14%;bottom: 42%;width: 25px;height: 25px;}
    .projects-info-box3 {max-width: 39%;padding: 2px 10px;left: -2%;top: 22%;}
    .projects-info-box3::after {right: -14%;top: 25%;width: 30px;height: 30px;}
    .projects-info-box4 {max-width: 46%;padding: 5px 10px;}
    .projects-info-box4::after {left: 16%;top: -20%;width: 23px;height: 25px;} 
    #years h4 {font-size: 18px;}
    .public_title {font-size: 18px;}
    #community .parallax-content .page:nth-child(odd) .community-box {
    width: 80%;
    left: 0px;
    padding: 20px;
    text-align: left;
}
        #community .parallax-content .page:nth-child(odd) .com-pic {
        position: relative;
        width: 85%;
        height: 230px;
        left: 15%;
    }
        .bg-title { font-size: 12px;right: 2px;line-height: 1.4;}
       #community .parallax-content .page:nth-child(even) .community-box {
        width: 80%;
        padding: 20px;
        text-align: left;
        left: inherit;
        right: -25%;
        margin-bottom: 10px;
}
        #community .parallax-content .page:nth-child(even) .com-pic {
        position: relative;
        width: 85%;
        height: 230px;
        right: 15%;
    }
    .public_body { width: 90%;margin-left: auto; margin-right: auto; padding: 10px 30px;}
        .pro-win .col-xl-4:first-of-type {
        border-bottom: 1px #dae6f1 solid;
        padding-bottom: 20px;
    }
    
    .map-info-box2{ max-width: 60%; }
    .map-info-box2 h3 {color: #013b5b;margin-bottom: 15px;}
    .map-info-box2 h3 span{font-size: 18px;}
    .pro-info-text2 {font-size: 20px;font-weight: 500;}
    .pro-info-text2 span {font-size: 14px;}
    .pro-info-stitle {font-size: 13px;line-height: 1;}
    .com-arrow {bottom: -50px;}
    .com-arrow.left {left: 0px;}
    .com-arrow.right {left: 38px;}
    .power-linebox { bottom: 15%;height: 20%;}
    .dashed-line-vertical {width: 2.5px;}
    .dashed-line-horizontal {height: 2.5px;}
    .in-bon {padding: 0!important;}
    .service-title h5 {font-size: 16px;}
    .loaction-text-box ul li {font-size: 14px;}
    .service-box {padding: 0 6%;}
    .service-body {padding: 40px 0;}
    .service-title {font-size: 20px;color: #a3e3ff;}
    .service-btitle {font-size: 20px;}
    .qrcode {max-width: 120px; margin: auto;}

    
}