.mobile-show {
  display:none;
}

#main-banner {
  position: relative;
  background-image: url("/images/main_banner.webp");
  background-size:100%;
  height: 1200px;
  transition:all 1s 0.6s;
  margin-top:100px;
}

#main-banner.active {
  background-size:80%;
}


#main-banner .banner-text {
  position: absolute;
  top: 27px;
  left: 300px;
  transition:all 1s 0.6s
}

#main-banner.active .banner-text {
  top:60px;
}

#main-banner .banner-text h2 {
  font-size: 5rem;
  font-weight: 800;
}

#main-banner .banner-text p {
  font-size: 2.2rem;
}

#main-banner .banner-sub-text {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#main-banner .banner-sub-text p {
  font-size: 2rem;
  text-align: center;
  font-weight: 300;
}

.sec-title {
  margin-bottom:100px;
}

.sec-title h2 {
  font-size:3.6rem;
  font-weight:500;
  display:inline;
  position:relative;
}

.sec-title h2:before {
  content:"";
  position:absolute;
  width:100%;
  height:3px;
  left:0;
  bottom:-4px;
  background:linear-gradient(to right, #DBE23C, #00AA4E);
}

#section3 .click-box-parent {
  display:none;
}

#section1 .hexagon-back img {
  position:relative;
  z-index:2;
}
  
#section1 .hexagon-back .line {
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  transform-origin:center;
  background-color:#00AA4E;
  height:3px;
  transition:all 0.25s 0.5s;
}

#section1 .hexagon-back.active .line {
  width:480px;
}

#section1 .hexagon-back .line span {
  opacity:0;
  transition:all 0.25s 0.5s;
}

#section1 .hexagon-back.active .line span {
  opacity:1;
}

#section1 .hexagon-back .line span:nth-child(1) {
  position:absolute;
  left:-60px;
}

#section1 .hexagon-back .line span:nth-child(2) {
  position:absolute;
  right:-60px;
}

#section1 .hexagon-back .line:before {
  content:"";
  width:14px;
  height:14px;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background-color:#00AA4E;
}

#section1 .hexagon-back .line:after {
  content:"";
  width:14px;
  height:14px;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background-color:#00AA4E;
}

#section1 .hexagon-back .line span {
  font-size:2.5rem;
}

#section1 .hexagon-back .line-1 {
  transform:translate(-50%, -50%) rotate(60deg);
}

#section1 .hexagon-back .line-1 span:nth-child(1) {
  top:-29px;
  left:-75px;
}

#section1 .hexagon-back .line-1 span:nth-child(2) {
  top:-11px;
  right:-113px;
}

#section1 .hexagon-back .line-2 span:nth-child(1) {
  top:-12px;
  left:-89px;
}

#section1 .hexagon-back .line-2 span:nth-child(2) {
  top:-22px;
  right:-87px;
}

#section1 .hexagon-back .line-3 span:nth-child(1) {
  top:-35px;
  left:-222px;
}

#section1 .hexagon-back .line-3 span:nth-child(2) {
  top:-32px;
  right:-224px;
  text-align:right;
}

#section1 .hexagon-back .line-2 {
  transform:translate(-50%, -50%) rotate(120deg);
}

#section1 .hexagon-back .line-3 {
  transform:translate(-50%, -50%) rotate(180deg);
}

#section1 .hexagon-back .line-1 span {
  transform:rotate(-60deg);
}

#section1 .hexagon-back .line-2 span {
  transform:rotate(-120deg);
}

#section1 .hexagon-back .line-3 span {
  transform:rotate(-180deg);
}

#section1 .hexagon-back img {
  transition:all 0.25s 0.5s;
  transform-origin:center;
}

#section1 .hexagon-back.active img {
  transform:rotate(90deg);
}

#section1 .hexagon-back {
  position:relative;
  width: 100%;
  background-image: url("../images/blend_line.webp");
  background-size: cover;
  height: 740px;
  position: relative;
}

#section1 .hexagon-back {
  position
}

#section1 .hexagon-wrap {
  position: absolute;
  top: 91px;
  left: 50%;
  transform:translateX(-50%);
}

#section1 .hexagon-back .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
  z-index:9;
}

#section1 .hexagon-back .text p {
  font-size:2.5rem;
  white-space:nowrap;
  margin-bottom:0;
}

#section1 .hexagon-back .text ul  {
  flex-flow:row nowrap;
  align-items:center;
  gap:0 4px;
}

#section1 .hexagon-back .text ul li {
  font-size:2rem;
  white-space:nowrap;
  line-height:120%;
}

#section1 .hexagon-back .text h3 {
  color:#00AA4E;
  font-size:6rem;
  font-weight:600;
}

#section1 .sec-row {
  display:flex;
  justify-content:center;
  margin-top:-50px;
}

#section1 .sec-row .row > div {
  flex:0 1 auto;
  margin-bottom:40px;
}

#section1 .sec-row .service-text {
  position:relative;
}

#section1 .sec-row .service-text:before {
  content:"";
  position:absolute;
  left:50%;
  top:-20px;
  transform:translateX(-50%);
  background-color:#DBE23C;
  width:15px;
  height:15px;
  border-radius:50%;
}

#section1 .sec-row .row > div:nth-child(even) .service-text:before {
  content:"";
  background-color:#00AA4E;
}



#section1 .sec-row .row p {
  font-size:2rem;
  font-weight:300;
  text-align:center;
}

#section1 .sec-row .row > div {
  margin-bottom:50px;
}

#section2 {
  position:relative;
  padding-bottom:400px;
}

#section2 .sec-row > .row > div {
  margin-left:750px;
  transition:all 1s 0.3s;
}

#section2 .sec-row .row > div {
  margin-bottom:50px;
}

#section2 .sec-row.active .row > div:nth-child(1) {
  margin-left:0;
}

#section2 .sec-row.active .row > div:nth-child(2) {
  margin-left:250px;
}

#section2 .sec-row.active .row > div:nth-child(3) {
  margin-left:450px;
}

#section2 .sec-row .box {
  display:flex;
  gap:0 20px;
  align-items:center;
}

#section2 .sec-row .box .step-number {
  flex:0 1 auto;
  width:50px;
  height:50px;
  border: 3px solid transparent;
  text-align:center;
  line-height:45px;
  border: 3px solid transparent;
  border-radius: 50%;
  background-image: linear-gradient(#fff, #fff), 
  linear-gradient(to right, #DBE23C 0%,  #00AA4E 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-size:2.3rem;
  font-weight:300;
  color:#00AA4E;
}

#section2 .sec-row .box .text {
  flex:0 1 770px;
}

#section2 .sec-row .box .text h4 { 
  font-size:2rem;
  font-weight:500;
  margin-bottom:10px;
}

#section2 .sec-row .box .text p { 
  font-size:2rem;
  font-weight:300;
}

#section2 .sec-bot-image {
  position:absolute;
  width:960px;
}

#section2 .sec-bot-image img {
  width:100%;
}

#section3 .sec-title {
  text-align:right;
  margin-bottom:48px;
}

#section3 .sec-row .row {
  gap:64px 0;
  margin:0 -17.5px;
}

#section3 .sec-row .row > div {
  padding:0 17.5px;
}

#section3 .sec-row .row > div:nth-child(1),
#section3 .sec-row .row > div:nth-child(3) {
  margin-top:170px;
}

#section3 .sec-row .row > div:nth-child(5) {
  margin-bottom:170px;
}

#section3 .sec-row .row > div:nth-child(5) .box {
  transform:translateY(-170px);
}


#section3 .sec-row .box {
  border:2px solid rgba(0, 170, 78, 1);
  padding:25px 22px 30px 17px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.4);
  height:245px;
  display:flex;
  align-items:center;
}

#section3 .sec-row > .row div:nth-child(even) .box {
  border-color: #DBE23C;
}


#section3 .sec-row .box .title h5 {
  font-size:2rem;
  font-weight:500;
}

#section3 .sec-row .box .title p {
  font-size:2rem;
  line-height:128%;
  font-weight:300;
  margin-bottom:0;
}

#section4 {
  background-color:rgba(0, 170, 78, 1);
  padding:60px 0;
}

#section4 .sec-info {
  display:flex;
  flex-flow:column wrap;
  align-content:center;
}

#section4 .sec-info > .row {
  margin:0 -50px;
}

#section4 .sec-info > .row > div {
  padding:0 50px;
  position:relative;
}

/* #section4 .sec-info > .row > div:before {
  content:"";
  width:101px;
  display:block;
  height:1px;
  border-top:2px dashed #fff;
  position:absolute;
  left:calc(50% - -54px);
  top:50%;
  transform:translateY(-50%);
} */

#section4 .sec-info > .row > div:last-child:before {
  display:none;
}

#section4 .sec-info > .row .box {
  box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
  width:110px;
  height:110px;
  border-radius:50%;
  border:2px solid #fff;
  display:flex;
  justify-content:center;
  align-items:center;
}

#section4 .sec-info > .row .box p {
  margin-bottom:0;
  font-size:2rem;
  color:#fff;
  line-height:160%;
  text-align:center;
}

#section4 .sec-info .manager-row {
  display:flex;
  flex-flow:row nowrap;
  gap:187px;
  justify-content:center;
  margin-top:156px;
  margin-bottom:50px;
}

#section4 .sec-info .manager-row .manager-item span {
  border:2px solid rgba(219, 226, 60, 1);
  border-radius:18px;
  font-size:2.5rem;
  color:rgba(219, 226, 60, 1);
  display:block;
  text-align:center;
  height:36px;
  line-height:30px;
  width:233px;
  position:relative;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

#section4 .sec-info .manager-row .manager-item {
  position:relative;
}

#section4 .sec-info.active .manager-row .manager-item:before {
  height:210px;
}

#section4 .sec-info.active > .row > div:before {
  width:101px;
}

#section4 .sec-info.active .manager-row .manager-item:nth-child(1):after {
  width:179px;
}

#section4 .sec-info.active .brand-image:before {
  height:356px;
}

#section4 .sec-info .manager-row .manager-item:before {
  content:"";
  width:1px;
  display:block;
  height:0;
  border-left:2px solid transparent;
  -o-border-image: url('../images/dot-line-gradient.png') 10 round;
     border-image: url('../images/dot-line-gradient.png') 10 round;
  position:absolute;
  left:50%;
  bottom:36px;
  transform:translateX(-50%);
  transition:all 0.6s 0.3s;
}

#section4 .sec-info > .row > div:before {
  content:"";
  width:0;
  display:block;
  height:1px;
  border-top:6px solid transparent;
  -o-border-image: url('../images/dot-line-white.png') 15 round;
  border-image: url('../images/dot-line-white.png') 15 round;
  position:absolute;
  left:calc(50% - -54px);
  top:50%;
  transform:translateY(-50%);
  transition:all 0.6s 0.3s;
}

#section4 .sec-info .manager-row .manager-item:nth-child(1):after {
  content:"";
  width:0;
  display:block;
  height:1px;
  border-top:6px solid transparent;
  -o-border-image: url('../images/dot-line-yellow.png') 15 round;
     border-image: url('../images/dot-line-yellow.png') 15 round;
  position:absolute;
  left:calc(100% + 4px);
  top:50%;
  transform:translateY(-50%);
  transition:all 0.6s 0.3s;
}

#section4 .brand-image:before {
  content:"";
  width:1px;
  display:block;
  height:0;
  border-left:2px solid transparent;
  -o-border-image: url('../images/dot-line-gradient-2.png') 10 round;
     border-image: url('../images/dot-line-gradient-2.png') 10 round;
  position:absolute;
  left:50%;
  bottom:275px;
  transform:translateX(-50%);
  transition:all 0.6s 0.3s;
}

#section4 .brand-image {
  text-align:center;
  position:relative;
}

#section4 .brand-image img {
  width:344px;
}

#section5 {
  padding:170px 0;
}

#section5 .sec-title {
  margin-bottom:70px;
}

#section5 .sec-sub-text p {
  font-size:2rem;
  font-weight:300;
}

#section5 .project-area {
  margin-top:90px;
}

#section5 .project-area .project-info {
  position:relative;
}

#section5 .project-area .project-info > ul {
  flex-flow:column wrap;
}

#section5 .project-area .project-info > ul > li {
  display:flex;
  border-top: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), 
  linear-gradient(to right, #fff 0%, #fff 3%, rgba(0, 170, 78, 1) 50%, #fff 65%, #fff 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#section5 .project-area .project-info > ul > li:last-child {
  border-bottom:1px solid transparent;
}

#section5 .project-area .project-info > ul > li .name {
  font-weight:500;
  font-size:2rem;
  width:150px;
  margin-left:200px;
  margin-right:30px;
  padding:4px 0;
}

#section5 .project-area .project-info > ul > li .value {
  font-weight:300;
  font-size:2rem;
  padding:4px 0;
}

#section5 .project-area .project-info .project-image {
  position:absolute;
  right:18%;
  top:68%;
  transform:translateY(-50%);
}

#section5 .project-area .project-info .project-image img {
  width:473px;
}

#section5 .application-area .title {
  text-align:center;
  margin-top:180px;
  margin-bottom:32px;
}

#section5 .application-area .title h4 {
  font-size:2rem;
  font-weight:500;
}

#section5 .application-area .title p {
  font-size:1.8rem;
  font-weight:300;
}

#section5 .application-area .bar-parent {
  display:flex;
  justify-content:center;
}

#section5 .application-area .bar-parent.active .bar-item .bar-name,
#section5 .application-area .bar-parent.active .application-bar,
#section5 .application-area .bar-parent.active .bar-item .bar-percent {
  transform:translateX(0);
  opacity:1;
}

#section5 .application-area .application-bar {
  display:flex;
  justify-content:center;
  flex-flow:column wrap;
  gap:12px 0;
  transform:translateX(-100px);
  opacity:0;
  transition:all 0.8s 0.3s;
}

#section5 .application-area .bar-item {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0 5px;  
}

#section5 .application-area .bar-item .bar-percent {
  font-size:2.5rem;
  font-weight:500;
  transform:translateX(100px);
  transition:all 0.8s 0.3s;
  opacity:0;
}

#section5 .application-area .bar-item:nth-child(1) .bar-percent {
  color:rgba(0, 170, 78, 1);
}

#section5 .application-area .bar-item:nth-child(2) .bar-percent {
  color:#000;
}

#section5 .application-area .bar-item:nth-child(3) .bar-percent {
  color:rgba(24, 63, 49, 1);
}

#section5 .application-area .bar-item:nth-child(4) .bar-percent {
  color:rgba(75, 143, 38, 1);
}

#section5 .application-area .bar-item:nth-child(5) .bar-percent {
  color:rgba(59, 173, 122, 1);
}

#section5 .application-area .bar-item:nth-child(6) .bar-percent {
  color:rgba(156, 218, 192, 1);
}

#section5 .application-area .bar-item .progress-bar {
  border-radius:20px;
  height:16px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

#section5 .application-area .bar-item:nth-child(1) .progress-bar {
  width:650px;
  background-color:rgba(0, 170, 78, 1);
}

#section5 .application-area .bar-item:nth-child(2) .progress-bar {
  width:450px;
  background-color:#000;
}

#section5 .application-area .bar-item:nth-child(3) .progress-bar {
  width:450px;
  background-color:rgba(24, 63, 49, 1);
}

#section5 .application-area .bar-item:nth-child(4) .progress-bar {
  width:350px;
  background-color:rgba(75, 143, 38, 1);
}

#section5 .application-area .bar-item:nth-child(5) .progress-bar {
  width:210px;
  background-color:rgba(59, 173, 122, 1);
}

#section5 .application-area .bar-item:nth-child(6) .progress-bar {
  width:190px;
  background-color:rgba(156, 218, 192, 1);
}

#section5 .application-area .bar-parent .bar-item .bar-name {
  color:#000;
  font-size:2rem;
  font-weight:500;
  margin-bottom:0;
  margin-left:15px;
  width:150px;
  transform:translateX(200px);
  opacity:0;
  transition:all 0.8s 0.3s;
}

#section6 {
  padding-bottom:80px;
}

#section6 .roadmap-image img {
  max-width:100%;
}

#section7 .sec-title {
  text-align:center;
  margin-bottom:30px;
}

#section7 .sec-title h2:before {
  display:none;
}

#section7 .partners-image {
  display:flex;
  justify-content:center;
}

#section7 .partners-image img {
  width:1450px;
  max-width:100%;
}

#section8 {
  padding-top:200px;
}

#section8 .sec-title {
  text-align:center;
  margin-bottom:40px;
}

#section8 .contact-info {
  margin-bottom:50px;
}

#section8 .contact-info ul {
  flex-flow:column wrap;
  align-items:center;
  gap:30px 0;
}

#section8 .contact-info ul li {
  font-size:2rem;
}

#section8 .file-download {
  display:flex;
  justify-content:center;
  gap:0 30px;
}

#section8 .file-download a {
  background-color:transparent;
  border:1px solid #000;
  color:#000;
  font-size:1.8rem;
  padding:5px 18px;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:0 8px;
  font-weight:300;
}

#section8 .file-download a img {
  width:20px;
}

.sec-title-2 {
  display:flex;
  flex-flow:row nowrap;
  gap:0 17px;
  margin-bottom:50px;
}

.sec-title-2 h2 {
  font-weight:500;
  font-size:3.6rem;
  color:#fff;
  flex:1 1 auto;
  white-space:nowrap;
}

.sec-title-2 p {
  font-size:2rem;
  font-weight:300;
  color:#fff;
  flex:0 1 auto;
  position:relative;
  margin-top:20px;
  padding-top:15px;
  line-height:160%; 
}

.sec-title-2 p:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100vw;
  height:5px;
  background-color:#fff;
  border-radius:2px;
}

@media (max-width:1200px) {
  .pc-show {
    display:none;
  }
  .mobile-show {
    display:block;
  }

  .sec-title {
    margin-bottom:60px;
  }
  
  .sec-title h2 {
    font-size:2.2rem;
  }

  .sec-title-2 {
    flex-flow:column wrap;
    margin-bottom:36px;
  }

  .sec-title-2 h2 {
    font-size:2.2rem;
  }

  .sec-title-2 p:before {
    top:-20px;
    left:170px;
    height:2px;
  }

  .sec-title-2 p {
    margin-top:0;
    font-size:1.2rem;
    padding-top:10px;
    margin-bottom:0;
  }

  #main-banner {
    height:500px;
    background-size:115%;
    margin-bottom:120px;
    background-position: right 70%;
    background-size:85%;
    margin-top:0;
    height: 75vw;
    max-height: 690px;
    min-height: 450px;
  }

  #main-banner.active .banner-text {
    top:25px;
    width:100%;
  }

  #main-banner.active {
    background-size:80%;
  }
  
  #main-banner .banner-text {
    display: flex;
    flex-flow: column wrap;
    left: 15px;
    top:-10px;
  }

  #main-banner .banner-text h2 {
    order: 2;
    font-size: 2rem;
    width:290px;
    line-height:145%;
  }

  #main-banner .banner-text h2 br {
    display:none;
  }

  #main-banner .banner-text p {
    order: 1;
    font-size: 1.2rem;
    width:200px;
    margin-bottom:0;
  }

  #main-banner .banner-sub-text {
    right:15px;
    left:unset;
    transform:translateX(0);
    bottom:-130px;
  }
  
  #main-banner .banner-sub-text p {
    font-size:1.2rem;
    text-align:right;
    padding-left:20px;
  }

  #section1 .hexagon-wrap img {
    width:130px;
  }

  #section1 .hexagon-back {
    background-size:100%;
    height:350px;
    margin-bottom:70px;
  }

  #section1 .hexagon-back .text p {
    font-size:1.1rem;
  }

  #section1 .hexagon-back .text ul {
    gap: 0 2px;
  }

  #section1 .hexagon-back .text ul li {
    font-size:1rem;
  }

  #section1 .hexagon-back .text h3 {
    font-size:2.4rem;
    margin-bottom:0;
  }

  #section1 .hexagon-back.active .line {
    width:230px;
  }

  #section1 .hexagon-back .line:before {
    width:8px;
    height:8px;
  }

  #section1 .hexagon-back .line:after {
    width:8px;
    height:8px;
  }

  #section1 .hexagon-back .line span {
    font-size:1rem;
  }

  #section1 .hexagon-back .line-1 span:nth-child(1) {
    top: -14px;
    left: -34px;
  }
  
  #section1 .hexagon-back .line-2 span:nth-child(1) {
    top: 0px;
        left: -39px;
  }

  #section1 .hexagon-back .line-3 span:nth-child(1) {
    top: -20px;
    left: -55px;
  }

  #section1 .hexagon-back .line-2 span:nth-child(2) {
    top: -10px;
    right: -41px;
  }
  
  #section1 .hexagon-back .line-3 span:nth-child(2) {
    top: -20px;
    right: -55px;
  }

  #section1 .hexagon-back .line-1 span:nth-child(2) {
    top: -6px;
    right: -54px;
  }

  #section1 .sec-row .row {
    gap:35px 0;
  }

  #section1 .sec-row .row p {
    font-size:1.2rem;
  }

  #section1 .sec-row .row > div {
    margin-bottom:0;
  }

  #section2 {
    margin-top:100px;
    padding-bottom:220px;
  }

  #section2 .sec-title {
    margin-bottom:20px;
  }

  #section2 .sec-row .box {
    flex-flow:column wrap;
    align-items:flex-start;
  }

  #section2 .sec-row .box .step-number {
    margin-bottom:7px;
    border:2px solid transparent;
    width:35px;
    height:35px;
    line-height:35px;
  }

  #section2 .sec-row .box .text {
    flex:0 1 auto;
  }

  #section2 .sec-row .box .text h4 {
    margin-bottom:0;
    font-size:1.2rem;
  }

  #section2 .sec-row .box .text p {
    font-size:1.2rem;
    margin-bottom:0;
  }

  #section2 .sec-row .row {
    gap:20px 0;
  }

  #section2 .sec-row .row > div {
    margin-bottom:0;
  }

  #section2 .sec-row .row > div:nth-child(1) {
    margin-left:0;
  }

  #section2 .sec-row .row > div:nth-child(2) {
    margin-left:100px;
  }

  #section2 .sec-row .row > div:nth-child(3) {
    margin-left:200px;
  }

  #section2 .sec-row.active .row > div {
    margin-left:0 !important;
  }

  #section2 .sec-bot-image {
    width:300px;
    margin-top:20px;
  }

  #section3 {
    margin-bottom:30px;
  }

  #section3 .sec-title {
    margin-bottom:60px;
  }

  #section3 .sec-row .row {
    gap:0;
    justify-content:center;
  }

  #section3 .sec-row .row > div {
    margin-top:0 !important;
    padding:0 25px;
  }

  #section3 .sec-row > .row > div.active {
    display:block;
    margin-bottom:0;
  }
  
  #section3 .sec-row > .row > div:not(.active) {
    display:none;
  }

  #section3 .sec-row .box {
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    transform:translateY(0) !important;
  }

  #section3 .sec-row .box .title h5 {
    display:none;
  }

  #section3 .sec-row .box .title p {
    font-size:1.2rem;
    line-height:120%;
    margin-bottom:0;
  }

  #section3 .click-box-parent {
    display:flex;
  }

  #section3 .click-box-parent > div {
    flex: 1 1;
    text-align:center;
  }
  
  #section3 .click-box-parent > div:not(.active) p {
    opacity: .6;
}

  #section3 .click-box-parent > div.active p {
    font-weight:500;
  }

  #section3 .click-box-parent.top-box {
    margin-bottom:15px;
  }

  #section3 .click-box-parent.bottom-box {
    margin-top:15px;
  }

  #section3 .click-box-parent > div p {
    font-size:1.2rem;
    font-weight:300;
    position:relative;
    margin-bottom:0;
  }

  #section3 .click-box-parent > div p:after {
    content:"";
    transition:all 0.3s;  
    width:0;
    height:1px;
    background-color:#00AA4E;
    position:absolute;
    left:50%;
    bottom:-2px;
    transform:translateX(-50%);
    display:inline-block;
  }

  #section3 .click-box-parent > div.active p:after {
    content:"";
    width:20px;
    
  }

  #section4 {
    padding-bottom:40px;
  }

  #section4 .sec-info {
    width:350px;
    max-width:100%;
    margin:0 auto;
    align-items:flex-start;
    align-content:flex-start;
  }

  #section4 .sec-info > .row {
    width:100%;
    margin:0;
    justify-content:space-around;
  }

  #section4 .sec-info > .row > div {
    padding:0;
  }

  #section4 .sec-info > .row .box {
    width:60px;
    height:60px;
    border-width:1px;
  }

  #section4 .sec-info > .row .box p {
    font-size:1.1rem;
    line-height:130%;
  }

  #section4 .sec-info .manager-row {
    margin-top:80px;
    margin-bottom:20px;
    gap:0 48px;
    width:100%;
  }

  #section4 .brand-image img {
    width:144px;
  }

  #section4 .sec-info .manager-row .manager-item span {
    font-size:1.2rem;
    width:120px;
    height:18px;
    line-height:17px;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    border-width:1px;
  }

  #section4 .sec-info.active .manager-row .manager-item:nth-child(1):after {
    width:50px;
    border-width:3px;
  }

  #section4 .sec-info .manager-row .manager-item:nth-child(1):after {
    left:100%;
    top:43%;
  }

  #section4 .sec-info .manager-row .manager-item:before {
    bottom:18px;
  }

  #section4 .sec-info.active .manager-row .manager-item:before {
    height:103px;
    border-width:1px;
  }

  #section4 .sec-info > .row > div:before {
    left: calc(50% - -30px);
  }

  #section4 .sec-info.active > .row > div:before {
    border-width:3px;
    width:25px;
  }

  #section4 .sec-info.active .brand-image:before {
    height: 170px;
  }
  #section4 .brand-image:before {
    content: "";
    bottom: 115px;
    border-width:1px;
  }

  #section4 .brand-image {
    width:100%;
    text-align:center;
  }

  #section5 {
    padding-top:40px;
    padding-bottom:80px;
  }

  #section5 .sec-title {
    margin-bottom:12px;
  }
  
  #section5 .sec-sub-text p {
    font-size:1.2rem;
  }

  #section5 .project-area {
    margin-top:0;
  }
  
  #section5 .project-area .project-info {
    display:flex;
    flex-flow:column wrap;
  }

  #section5 .project-area .project-info > ul {
    order:2;
    width:100%;
  }

  #section5 .project-area .project-info > ul > li {
    display:flex;
    justify-content:center;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #fff 0%, #fff 5%, rgba(0, 170, 78, 1) 50%, #fff 95%, #fff 100%);
    gap:0 5px;
    height:30px;
  }

  #section5 .project-area .project-info > ul > li .name {
    margin-left:0;
    margin-right:0;
    text-align:right;
  }

  #section5 .project-area .project-info > ul > li span {
    width:50% !important;
    font-size:1.2rem !important;
  }

  #section5 .project-area .project-info .project-image {
    position:static;
    transform:translateY(0);
    order:1;
    width:100%;
    text-align:center;
  }

  #section5 .project-area .project-info .project-image img {
    width:190px;
  }

  #section5 .application-area .title {
    margin-top:50px;
  }

  #section5 .application-area .title h4 {
    font-size:1.2rem;
    margin-bottom:0;
  }

  #section5 .application-area .title p {
    font-size:1rem;
  }

  #section5 .application-area .bar-item .progress-bar {
    position:relative;
    overflow:visible;
    height:8px;
    box-shadow:0 2px 3px rgba(0, 0, 0, 0.3);
  }

  #section5 .application-area .bar-item:nth-child(1) .progress-bar {
    width:220px;
  }

  #section5 .application-area .bar-item:nth-child(2) .progress-bar,
  #section5 .application-area .bar-item:nth-child(3) .progress-bar {
    width:152px;
  }

  #section5 .application-area .bar-item:nth-child(4) .progress-bar {
    width:119px;
  }

  #section5 .application-area .bar-item:nth-child(5) .progress-bar {
    width:72px;
  }

  #section5 .application-area .bar-item:nth-child(6) .progress-bar {
    width:64px;
  }

  #section5 .application-area .application-bar {
    gap:14px 0;
  }

  #section5 .application-area .bar-item .progress-bar:before {
    position:absolute;
    left:0;
    bottom:100%;
    font-size:1.2rem;
    font-weight:500;
  }

  #section5 .application-area .bar-item:nth-child(1) .progress-bar:before {
    content:"30%";
    color:#00AA4E;
  }

  #section5 .application-area .bar-item:nth-child(2) .progress-bar:before {
    content:"20%";
    color:#000000;
  }

  #section5 .application-area .bar-item:nth-child(3) .progress-bar:before {
    content:"20%";
    color:#183F31;
  }

  #section5 .application-area .bar-item:nth-child(4) .progress-bar:before {
    content:"15%";
    color:#4B8F26;
  }

  #section5 .application-area .bar-item:nth-child(5) .progress-bar:before {
    content:"8%";
    color:#3BAD7A;
  }
  
  #section5 .application-area .bar-item:nth-child(6) .progress-bar:before {
    content:"7%";
    color:#9CDAC0;
  }

  

  #section5 .application-area .bar-item .bar-percent {
    display:none;
  }

  #section5 .application-area .bar-parent .bar-item .bar-name {
    width:90px;
    font-size:1.2rem;
    margin-left:0;
  }

  #section6 .sec-title {
    margin-bottom:24px;
  }

  #section7 {
    padding:0 15px;
  }

  #section7 .sec-title {
    margin-bottom:10px;
  }

  #section8 {
    padding-top:80px;
  }

  #section8 .sec-title {
    margin-bottom:26px;
  }

  #section8 .contact-info {
    margin-bottom:25px;
  }

  #section8 .contact-info ul {
    gap:10px 0;
  }

  #section8 .contact-info ul li {
    font-size:1.2rem;
  }

  #section8 .file-download {
    flex-flow:column wrap;
    gap:20px 0;
    align-items:center;
  }

  #section8 .file-download a {
    width:132px;
    font-size:1.2rem;
    padding:0;
    justify-content:center;
  }

  #section8 .file-download a img {
    display:none;
  }

  #footer {
    margin-top:110px;
    margin-bottom:30px;
  }

  #footer .footer-wrap ul {
    flex-flow:column wrap;
    align-items:center;
    gap:10px 0;
  }

  #footer .footer-wrap ul li:nth-child(1):after {
    display:none;
  }

  #footer .footer-wrap ul li {
    font-size:1rem;
  }
}