@charset "utf-8";



.intro-hero {position: relative; min-height: 553px;}
.intro-hero .intro-hero-bg {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;}
.intro-hero .intro-hero-content {display: flex; flex-direction: column; justify-content: center; color: #fff; padding-block: 300px 100px; height: 100%;}
.intro-hero .intro-hero-title {font-size: 100px; font-family: var(--ff-secondary); text-transform: uppercase;opacity: 0.5; height:120px; overflow: hidden;}
.intro-hero .intro-hero-title span { animation: intro .5s ease-in-out; display: block;}

.intro-hero .subpage_intro__lnb {position: absolute; bottom: 0; left: 0; width: 100%;   z-index: 100; color:#fff;background: rgba(0, 0, 0, 0.6); }
.intro-hero .subpage_intro__lnb .container {display: flex;height: 54px;}
.intro-hero .subpage_intro__lnb .cmp-lnb__home_btn {display: flex;align-items: center;justify-content: center;width: 54px;height: 100%;background: var(--primary);flex-shrink: 0;color: #fff;  }
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown {position: relative;height: 100%;width: 100%;max-width: calc(960px / 3);border-right: 1px solid rgba(255, 255, 255,0.3);  }  
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cur {display: flex;align-items: center;justify-content: space-between;width: 100%;height: 100%;padding: 0 20px;cursor: pointer;font-size: 15px; font-weight: 500; transition: .2s ease;}
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cur .icon {width: 19px;height: 19px;display: flex;align-items: center;justify-content: center;background: #686868;margin-left: 20px;flex-shrink: 0;  transition: .2s ease; border-radius: 50%;}
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cur .icon .ico--plus {}
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown.all-prod {border: 1px solid rgba(255, 255, 255,0.3); border-top:none; border-bottom: none; margin-left: auto; width: auto; }
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown.all-prod .cur {padding: 0 10px;}
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cmp-lnb-ls {width: 100%; background: #333; display: none; flex-direction: column; padding: 20px;list-style: none;}
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cmp-lnb-ls .depth-btn {font-size: 14px; padding: 0.5em ; display: block;}


@keyframes intro {
  from {transform: translateY(80px); }
  to {transform: translateY(0);}
}

@keyframes scaledown {
  from {transform: scale(1.1);}
  to {transform: scale(1);}
}


@media screen and (hover: hover) {
  .intro-hero .subpage_intro__lnb .cmp-lnb__dropdown:hover .cmp-lnb-ls {display: flex; }
  .intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cmp-lnb-ls .depth-btn:hover {color:var(--primary);}
  
}
@media screen and (max-width: 1399px) {
  .intro-hero {min-height: auto;}
  .intro-hero .intro-hero-content {padding-block: 160px 70px;}
  .intro-hero .intro-hero-title {font-size: 60px; height: auto;}
  
  .cmp-lnb__dropdown .cur {padding: 0 15px;}
  .cmp-lnb__dropdown.all-prod {display: none;}
  .cmp-lnb__dropdown .cmp-lnb-ls {padding: 10px;}
  .intro-hero .subpage_intro__lnb {display: none;}
  .intro-hero .subpage_intro__lnb .cmp-lnb__dropdown {max-width: calc((720px - 54px) / 3);}
}

@media screen and (max-width: 767px) {
  .intro-hero .intro-hero-content {padding-block: 160px 60px;}
  .intro-hero .intro-hero-title {font-size: 40px;}
  .intro-hero .subpage_intro__lnb {display: none;}
}



/* common */
.sp-content {padding-block: 180px 240px;}

.sp-head {padding-bottom: 110px;}
.sp-label {font-size: 20px; font-weight: 700; color: var(--primary); font-family: var(--ff-secondary); display: block;}
.sp-label.normal{text-transform: initial;}
.sp-label b{position: relative; margin-right: 26px;}
.sp-label b::after{content: ''; width: 2px; height: 16px; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); background: #9A9A9A;}
.sp-title {font-size: 50px; font-weight: 700; }

.sp-section {padding-block: 160px;}
.section-tit {font-size: 28px; color:var(--secondary); font-weight: 700; line-height: 1.8; padding-bottom: 1rem; display: block;}
.section-tit-sml {font-size: 26px; color:var(--primary); font-weight: 700; padding-bottom: 20px; display: block;}
.point-bar {width: 72px; height: 2px; background: #BDBDBD; display: block;position: absolute;top:20px; right: calc(100% + 20px);}

.nav-btn {border-radius: 50px; border:1px solid #DBDBDB;display: flex; margin:0 auto;transition: .2s ease;}
.nav-btn .btn {font-size: 18px; color:#9A9A9A; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50px; padding: .5rem 1rem; transition: .2s ease;}
.nav-btn .btn.active {background: var(--secondary); color:#fff; font-weight: 700;}


@media screen and (hover:hover){
  .nav-btn:hover {background: #eaeaea;}
  .nav-btn .btn:not(.active):hover {color: var(--secondary); font-weight: 500;}
}

@media screen and (max-width: 1399px) {
  .sp-content {padding-block: 100px;}
  .sp-section {padding-block: 100px;}
  .sp-head {padding-bottom: 40px;}
  .sp-label {font-size: 16px;}
  .sp-title {font-size: 34px;}
  .desc {font-size: 16px !important; word-break: keep-all;}
  .section-tit {font-size: 24px; padding-bottom: .5rem;}
  .section-tit-sml {font-size: 22px;}
  .nav-btn .btn {font-size: 14px; padding: .5rem ;}
  .point-bar {display: none !important; }
}
@media screen and (max-width: 767px) {
  .sp-section {padding-block: 80px 60px;}
  .sp-content {padding-block: 60px 90px;}
  .sp-label{font-size: 14px;}
  .sp-label b::after{height: 12px;}
  .sp-title {font-size: 28px;}
  .section-tit {font-size: 20px;}
}
@media screen and (max-width: 409px) {
  .section-tit {font-size: 19px;}
}

/* rnd-center */


/* research-project */
.research-project {}
.research-project .banner {position: relative;}
.research-project .banner .bg-img {width: 100%;}
.research-project .banner .typo {font-size:160px; font-weight: 500; font-family: var(--ff-secondary); color:rgba(160, 160, 160,0.6); margin-top: -120px; letter-spacing: -0.020rem; display: block; mix-blend-mode: plus-lighter;filter: brightness(0.8)}
.research-project .desc {line-height: 1.88; padding-bottom: 16px; font-size: 18px;}
.research-project .content {padding-block: 160px;}
.research-project .content .thumb {}
.research-project .content .thumb img {margin-left: auto; }
.research-project .content .text-cont {width: 990px; margin-left: auto; position: relative; margin-top: 90px;}
.research-project .content .text-cont .point-bar {}


/* Temp */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .research-project .banner .typo {font-size: 80px; margin-top: -60px;}
  .research-project .content .text-cont {width: 100%; margin-top: 50px;}
}
@media screen and (max-width: 767px) {
  .research-project .banner .typo {font-size: 51px; margin-top: -40px; margin-bottom: 20px;}
  
}
@media screen and (max-width: 409px) {
  .research-project .banner .typo {font-size: 44px; margin-top: -30px;}

}


.result-content {padding-top: 30px;}
.result-content .container {}
.result-content .content {display: grid; grid-template-columns: 312px 1fr;position: relative; margin-bottom: 60px;}
.result-content .content:last-child {margin-bottom: 0;}
.result-content .content:before {content: ''; display: block; height: calc(100% - 60px); border:1px solid #dfdfdf; position: absolute; top: 10px; left: 312px; }
.result-content .content .year { display: block; margin-top: -17px;}
.result-content .content .year span {position: relative; font-size: 75px; font-weight: 500;font-family: var(--ff-secondary); color:var(--secondary);  line-height: 0.8;}
.result-content .content .year span:before {content: ''; display: block; width: 110px; height: 1px; border:1px dotted #BDBDBD; position: absolute; top: 50%; left: 110%; transform: translateY(-50%);}
.result-content .content .desc-cont {font-size: 18px; position: relative;}
.result-content .content .desc-cont .item {display: flex; gap:60px; position: relative;}
.result-content .content .desc-cont .item:before {content: ''; display: block; width: 45px; height: 1px; border:1px dotted #BDBDBD; position: absolute; top: 12px; z-index: -1;}
.result-content .content .desc-cont .item .dot {width: 11px; height: 11px; border-radius: 50%; border:3px solid var(--primary); display: block; background: #fff; margin-top: 7px; margin-left: -5px;}
.result-content .content .desc-cont .item:not(:last-child) .wrap {padding-bottom: 40px;}
.result-content .content .desc-cont .item .wrap .desc {line-height: 1.5; font-weight: 500;}
.result-content .content .desc-cont .item .wrap .desc strong {display: block;}
.result-content .content .desc-cont .item .wrap .desc span {display: block; padding-top: 10px; color:#7C7C7C;}

.result-content .content.dark .year span {color:#001C67;}
.result-content .content.dark .desc-cont .item .dot {border-color:#001C67;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .result-content .content:before {left: 180px;}
  .result-content .content {grid-template-columns: 180px 1fr;}
  .result-content .content .year {margin-top: 0;}
  .result-content .content .year span {font-size: 42px;}
  .result-content .content .year span:before {display: none;}
}
@media screen and (max-width: 767px) {
  .result-content .content {grid-template-columns: 1fr; gap: 20px;}
  .result-content .content:before {left: 0; top: 60px;}
  .result-content .content .year span {font-size: 34px;}
  .result-content .content .desc-cont .item {gap: 20px;}
  .result-content .content .desc-cont .item:before {width: 20px;}
  .result-content .content .desc-cont .item:not(:last-child) .wrap {padding-bottom: 22px;}
}
@media screen and (max-width: 499px) {}

/* Patent Certification */
.patent-certi {
  .nav-btn {max-width: 796px; margin-bottom: 40px;}
  .certi-content {padding-block: 90px; border-bottom: 1px solid #D5D5D5;}
  .certi-content.pb--0 {border-bottom: none;}
  .certi-content .sbj {font-size: 28px; font-weight: 700; color:#4B4B4B; padding-bottom: 40px; display: block;}
  .certi-content .cert-list {grid-template-columns: repeat(5,1fr);}
  .certi-content .cert-list .tit {font-size: 16px; font-weight: 500; text-align: center; padding-top: 26px;}
  .certi-content .cert-item .thumb {box-shadow: 0px 3px 6px rgba(0,0,0,.1);border:1px solid #EBEBEB;}
  .certi-content .cert-item .thumb img {aspect-ratio: initial; width: 100%; height: 100%; border:none;}

  @media (hover: hover) {}
  @media screen and (max-width: 1399px) {
    .certi-content .sbj {font-size: 24px; padding-bottom: 30px;}
    .certi-content .cert-list {grid-template-columns: repeat(4,1fr); }
    .sp-section {padding-block: 50px;}
  }
  @media screen and (max-width: 767px) {
    .nav-btn {margin-bottom: 0;}
    .certi-content .sbj {font-size: 20px; padding-bottom: 20px;}
    .certi-content .cert-list {grid-template-columns: repeat(2,1fr);}
    .certi-content .cert-list .tit {font-size: 16px; padding-top: 1rem;}
  }
  @media screen and (max-width: 499px) {}
}




/* innovation-product */
.innovation-product.sp-content{padding-block: 180px 0;}
.innovation-product {
  .sp-head{display: flex; justify-content: space-between;}
  .sp-head .mark{max-width: 183px;}
  .text-cont {display: flex;flex-direction: column; width: 990px; margin-left: auto; position: relative;}
  .point-bar {width: 174px; }
  .section-tit-sml {color:var(--secondary);}
  .desc {line-height: 1.88; padding-bottom: 16px; font-size: 18px;}
  .thumb-cont {padding-top: 90px;}
  .thumb-cont .thumb-board {background: #F9F9F9; border-radius: 10px;display: flex; align-items: center; justify-content: center; padding: 20px; flex: 1;}
  .thumb-cont .thumb-board img {width: 100%; height: 100%; mix-blend-mode: multiply;}
  .thumb-cont .thumb-row {display: flex; gap: 30px; padding-top: 60px;}
  .thumb-cont .thumb-row .thumb-board {background: #F3F3F3;}
  .thumb-cont .thumb-row .thumb-board img {width: 624px;}
  .thumb-cont .thumb-row .thumb {width: 480px;flex-shrink: 0;}
  .bg-gray .container{padding-block: 160px 240px;}
  
  @media (hover: hover) {}
  @media screen and (max-width: 1399px) {
    .text-cont {width: 100%;}
    .thumb-cont {padding-top: 50px;}
    .thumb-cont .thumb-row {flex-direction: column;}
    .thumb-cont .thumb-row .thumb {width: 100%;}
    .bg-gray .container{padding-block: 80px 100px;}
  }
  @media screen and (max-width: 767px) {
  .sp-head .mark{max-width: 103px;}
    .thumb-cont .thumb-row {padding-top: 30px;}
    .bg-gray .container{padding-block: 60px 100px;}
    .bg-gray .container img{content: url(../images/business-area/iot/landslide-content2-img.png);}
  }
  @media screen and (max-width: 499px) {}
}

@media screen and (max-width: 1399px) {
  .innovation-product.sp-content{padding-block: 100px 0;}
}
@media screen and (max-width: 767px) {
  .innovation-product.sp-content{padding-block: 60px 0;}
}


.overview-content {
  .vision-card {}
  .vision-card .head {display: grid; grid-template-columns: 378px 1fr; gap: 30px; padding-bottom: 90px;}
  .vision-card .head .typo {font-size: 40px; font-weight: 700; color:#8F8F8F; mix-blend-mode: multiply ; line-height: 1.35;}
  .vision-card .head .txt-cont {}
  .vision-card .head .txt-cont .tit {font-size: 22px; font-weight: 700; color:var(--secondary); padding-bottom: 1rem; display: block;}
  .vision-card .head .txt-cont .desc {font-size: 18px; line-height: 1.77;}
  .vision-card .card-thumb-ls {display: flex;gap:30px;}
  .vision-card .card-thumb-ls .card {width: 100%; border-radius: 10px; overflow: hidden; position: relative; min-height: 452px; height: auto; padding: 0;}
  .vision-card .card-thumb-ls .card:nth-child(2) {transform: translateY(60px);}
  .vision-card .card-thumb-ls .card .thumb {width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0;}
  .vision-card .card-thumb-ls .card .inner {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding:30px 35px; align-items: flex-start; position: relative;}
  .vision-card .card-thumb-ls .card .inner .icon {}
  .vision-card .card-thumb-ls .card .inner .txt {font-size: 28px; font-weight: 600; color:#fff; padding-top: 1rem; display: block; line-height: 1.35; font-family: var(--ff-secondary);}

  .vision-diagram {background: #000827;}

  
  @media (hover: hover) {}
  @media screen and (max-width: 1399px) {
    .vision-card .head {grid-template-columns: 1fr; padding-bottom: 50px; gap: 20px;}
    .vision-card .head .typo {font-size: 30px;}
    .vision-card .head .txt-cont .tit {font-size: 19px;}
    .vision-card .card-thumb-ls {gap:1rem;}
    .vision-card .card-thumb-ls .card {min-height: 260px;}
    .vision-card .card-thumb-ls .card .inner {padding: 20px;}
    .vision-card .card-thumb-ls .card .inner .txt {font-size: 20px;}
    .vision-card .card-thumb-ls .card .inner .icon {width: 50px;}
    .vision-card .card-thumb-ls .card:nth-child(2) {transform:translateY(40px);}
  }
  @media screen and (max-width: 767px) {
    .vision-card .head {padding-bottom: 30px;}
    .vision-card .head .typo {font-size: 22px;}
    .vision-card .card-thumb-ls {flex-direction: column;}
    .vision-card .card-thumb-ls .card {justify-content: flex-end; min-height: auto;}
    .vision-card .card-thumb-ls .card:nth-child(2) {transform:translateY(0px);}
  }
  @media screen and (max-width: 499px) {}
  
}



/* greeting */
.greeting-content {
  .container {display: flex; justify-content: space-between;}
  .text-cont {display: flex; flex-direction: column;  width: 779px; flex-shrink: 0;}
  .text-cont .typo {font-size: 40px; font-weight: 700; color:#5A5A5A; mix-blend-mode: multiply ; line-height: 1.6; padding-bottom: 70px;}
  .text-cont .desc-cont {display: flex; flex-direction: column; gap: 1rem;}
  .text-cont .desc-cont .desc {font-size: 17px; line-height: 1.77;}
  .text-cont .ceo-sign {padding: 30px 110px 0px; display: flex; justify-content: flex-end;align-items: flex-end; gap: 2rem; }
  .text-cont .ceo-sign span {font-size: 20px; display: flex; gap: 1rem;}
  .text-cont .ceo-sign img {width: 195px;}
  .thumb-cont {background: #F2F2F2; width: 380px; height: 716px; display: flex; flex-direction: column; align-items:flex-end; justify-content: flex-end;}
  .thumb-cont img {max-width: none;}
  .thumb-cont .logo {width: 160px; margin: 0 32px 0 0;}
  .thumb-cont img:nth-child(2){margin: -32px -40px 0 0;}
  
  
  @media (hover: hover) {}
  @media screen and (max-width: 1399px) {
    .text-cont .typo {font-size: 24px; padding-bottom: 30px;}
    .text-cont {width: 70%;}
    .thumb-cont {width: 200px; height: 100%; margin-top: auto;}
    .thumb-cont img {max-width: 100%;}
    .thumb-cont .logo {width: 100px; margin: 32px 32px 32px 0;}
    .thumb-cont img:nth-child(2){margin: 0;}
    .text-cont .ceo-sign {padding: 60px 0px 0; justify-content: flex-start;}
    .text-cont .ceo-sign img {width: 120px;}
  }
  @media screen and (max-width: 767px) {
    .sp-head {padding-bottom: 80px;}
    .container {flex-direction: column-reverse; gap: 30px;}
    .text-cont {width: 100%;} 
    .thumb-cont {width: 100%; height: 150px; display: flex; flex-direction: row; background: #f7f7f7;}
    .thumb-cont img {width: 200px;}
    .thumb-cont .logo {margin: 32px 0;}
    .text-cont .typo {font-size: 22px;}
  }
  @media screen and (max-width: 499px) {}
}


.location-content {
  .loca-content {display: flex; flex-direction: column; padding-bottom: 90px;}
  .loca-content .loca-info {display: grid; grid-template-columns: 278px 1fr; gap: 30px; padding-bottom: 1.5rem;}
  .loca-content .loca-info .tit {font-size: 26px; font-weight: 700; border-top:2px solid #001C67; padding-top: 1rem;}
  .loca-content .loca-info .info {display: flex;font-size: 18px; border-top: 1px solid #CBCBCB;; padding-top: 1.4rem; align-items: flex-start; width: 100%;gap :34px;}
  .loca-content .loca-info .address {font-weight: 500;;}
  .loca-content .loca-info .contact {border-left: 1px solid #CBCBCB; ;}
  .loca-content .loca-info .contact .tel {padding-left: 30px;}
  .map-container {height: 578px;}

  @media (hover: hover) {}
  @media screen and (max-width: 1399px) {
    .loca-content .loca-info {grid-template-columns: 1fr; gap: 1rem;}
    .loca-content .loca-info .tit {font-size: 20px;}
    .loca-content .loca-info .info {font-size: 16px; flex-direction: column; gap: 1rem;}
    .map-container {height: 300px;}
  }
  @media screen and (max-width: 767px) {
    .loca-content .loca-info .tit {font-size: 18px;}
    .loca-content .loca-info .contact .tel {display: block; padding-left: 1rem;}
    .map-container {height: 250px;}
  }
  @media screen and (max-width: 499px) {}
}






.history-content {
  .his-section:not(:last-child) {padding-bottom: 110px;}
  .his-section .banner {position: relative; margin-bottom: 130px;}
  .his-section .banner .banner-img { position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
  .his-section .banner .inner {position: relative; padding-block: 80px; color:#fff; text-align: center;}
  .his-section .banner .inner .tit {font-size: 40px; font-weight: 700; display: block; padding-bottom: .5rem;}
  .his-section .banner .inner .desc {font-size: 22px; font-weight: 500; }

  .his-section .content {display: grid; grid-template-columns: 416px 1fr; position: relative;}
  .his-section .content:before {content: ''; display: block; height: calc(100% - 72px); width: 1px; border:1px solid #BDBDBD; position: absolute; top: 10px; left: 416px; }
  .his-section .content .his-head {position: relative;}
  .his-section .content .his-head .tag {font-size: 20px; font-family: var(--ff-secondary); color:var(--primary);font-weight: 600; display: block; position: absolute;bottom:calc(100% + 10px);}
  .his-section .content .his-head .typo {font-size: 30px; font-weight: 700; line-height: 1.3;}
  .his-section .content .his-desc {padding-left: 84px;}
  .his-section .content .his-desc .item {display: flex; gap:50px; padding-bottom: 30px; align-items: flex-start;}
  .his-section .content .his-desc .item:last-child {padding-bottom: 0;}
  .his-section .content .his-desc .item .year {font-size: 22px; color:#ACACAC; width: 60px;  flex-shrink: 0; margin-top: -4px; position: relative; display: flex;}
  .his-section .content .his-desc .item .year span {font-weight: 500;}
  .his-section .content .his-desc .item .year:before {content: ''; display: block; width: 62px; height: 1px; border:1px dashed #e4e4e4; position: absolute; top: 50%; right: calc(100% + 20px); transform: translateY(-50%);}
  .his-section .content .his-desc .item .year:after {content: ''; display: block; width: 6px; height: 6px; background: #797979; border-radius: 50%; position: absolute; top: 50%; right: calc(100% + 80px); transform: translateY(-50%);}
  .his-section .content .his-desc .item:first-child .year:after {background: #fff; border:4px solid #797979; width: 16px; height: 16px; right: calc(100% + 75px); }
  .his-section .content .his-desc .item .desc-cont {}
  .his-section .content .his-desc .item .desc-cont li {word-break: keep-all; position: relative; margin-bottom: .6rem; font-size: 18px;}
  .his-section .content .his-desc .item .desc-cont li:before {content: ''; display: block; width: 2px; height: 2px; border-radius: 50%; background: #000; position: absolute; top: 50%; left: -20px; transform: translateY(-50%);}

  .his-section:nth-child(2) .content:before {height: calc(100% - 145px);}
  .his-section:nth-child(3) .content:before {height: calc(100% - 70px);}
  
  
  @media (hover: hover) {}
  @media screen and (max-width: 1399px) {
    .his-section .banner {margin-bottom: 90px;}
    .his-section .banner .inner .tit {font-size: 30px;}
    .his-section .banner .inner {padding-block: 50px;}
    .his-section .content:before {left: 215px; height: calc(100% - 62px);}
    .his-section:nth-child(2) .content:before{height: calc(100% - 135px);}
    .his-section:nth-child(3) .content:before{height: calc(100% - 65px);}
    .his-section .content {grid-template-columns: 220px 1fr;}
    .his-section .content .his-head .typo {font-size: 22px;}
    .his-section .content .his-head .tag {font-size: 18px;}
    .his-section .content .his-desc {padding-left: 40px;}
    .his-section .content .his-desc .item {gap: 38px;}
    .his-section .content .his-desc .item .desc-cont li {font-size: 16px;}
    .his-section .content .his-desc .item .desc-cont li:before{top: 10px; transform: initial;}
    .his-section .content .his-desc .item .year:before {width: 22px;}
    .his-section .content .his-desc .item .year:after {right:calc(100% + 41px);}
    .his-section .content .his-desc .item:first-child .year:after {right:calc(100% + 36px);}
  }
  @media screen and (max-width: 767px) {
    .his-section .banner {margin-bottom: 30px;}
    .his-section .banner .inner .tit {font-size: 24px;}
    .his-section .content {grid-template-columns: 1fr; gap: 40px;}
    .his-section .content:before {left: 0; border:1px solid #eaeaea; height: calc(100% - 270px); top: 180px;}
    .his-section:nth-child(2) .content:before{height: calc(100% - 300px); top: 150px;}
    .his-section:nth-child(3) .content:before{height: calc(100% - 238px); top: 150px;}
    .his-section .content .his-desc {padding-left: 30px;}
    .his-section .content .his-desc .item {flex-direction: column; gap: 12px;}
    .his-section .content .his-desc .item:first-child .year:after {right:calc(100% + 30px);}
    .his-section .content .his-desc .item .year:after {right: calc(100% + 36px);}
    .his-section .content .his-head {text-align: center; background: #f2f2f2; border-radius: 10px; padding: 15px;}
    .his-section .content .his-head .tag {position: static; padding-bottom: .5rem; display: block;}
    .his-section .content .his-desc .item .desc-cont li {font-size: 14px;}
    .his-section .content .his-desc .item .year:before {right:calc(100% + 10px);}
    .his-section .content .his-desc .item:first-child .year:after {right:calc(100% + 21px);}
    .his-section .content .his-desc .item .year:after {right:calc(100% + 26px);}
    .his-section .content .his-desc .item .desc-cont li:before {left:-10px; top: 8px;}
  }
  @media screen and (max-width: 499px) {}
  
}





/* business-area */

.biz-area-content {
  .desc {font-size: 18px; line-height: 1.77;}
  .tit-sml {font-size: 26px; padding-bottom: 16px; display: block; font-weight: 500;}
  .gray-board {background: #F9F9F9; padding: 50px; border-radius: 10px; display: flex;align-items: center; justify-content: center; margin-top:90px;}
  .gray-board.safe{padding: 33px 27.5px;}
  .gray-board.white {background: #fff; }
  .wrapper .head {padding-bottom: 30px;}
  .section-tit {line-height: 1.4;}
  .section-tit small {font-size: 22px; font-weight: 500; color:#757575; display: block; padding-top: .5rem;}


  @media screen and (max-width: 1399px) {
    .ly-hori {grid-template-columns: 1fr; gap: .5rem;}
    .tit-sml {font-size: 18px;}
    .gray-board {margin-top: 30px; padding: 30px;}
    .sp-section {padding-block: 80px;}
    .section-tit small {font-size: 17px; display:inline-block; padding-left: .5rem;}
  }
  @media screen and (max-width: 767px) {
    .sp-section {padding-block: 60px;}
    .gray-board {margin-top: 0; padding: 20px 10px !important;}
    .tit-sml {word-break: keep-all;}
    
  }
  @media screen and (max-width: 499px) {}

}
.ly-hori {display: grid; grid-template-columns: 276px 1fr; gap: 30px;}
.bg-gray {background: #F9F9F9;}
.dot {display: block; width: 6px; height: 6px; border-radius: 50%; background: #919191; margin-top: .7rem; flex-shrink: 0;}

.biz-intro {}
.biz-intro .biz-intro-img {width: 100%;}
.biz-intro .content {padding-top: 80px;}
.biz-intro .section-tit {line-height: 1.35;}
.biz-intro .desc {}

.project-list{display: flex; flex-direction: column; gap: 32px;}
.project-list li{font-size: 18px;}
.project-list li div{font-size: 26px; font-weight: 700; color: #0030B1; margin: 0 0 6px;}
.project-list li div span{position: relative; font-weight: 600; color: #929292; font-size: 16px; margin: 0 0 0 32px;}
.project-list li div span::before{content: ''; width: 2px; height: 14px; background: #929292; position: absolute; left: -16px; top: calc(50% - 2px); transform: translateY(-50%);}

.bullet-item-ls {display: flex; flex-direction: column; gap: 30px; padding-top: 110px;}
.bullet-item-ls .item .tit-point {font-size: 22px;font-weight: 700; color:var(--secondary); display: flex; gap: .7rem; align-items: center; margin-bottom: 8px; display: flex; }
.bullet-item-ls .item .arr-icon {width: 21px; height: 21px; background: #302D2C; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.bullet-item-ls .item .arr-icon svg {margin-left: -4px;}
.bullet-item-ls .item .ls {padding-top: 1.2rem; border-top: 1px solid #CBCBCB; margin-left: 30px; font-size: 17px;}
.bullet-item-ls .item .ls li {display: flex; gap: .7rem; line-height: 1.75;  margin-bottom: .4rem;}
.bullet-item-ls .item .ls li:last-child {padding-bottom: 0;}
.bullet-item-ls .item .ls.grid-2 {display: grid; grid-template-columns: repeat(2,1fr);}

.bullet-item-ls.thumb-type {gap: 50px;}
.bullet-item-ls.thumb-type .item {display: flex; gap: 30px; align-items: flex-start;}
.bullet-item-ls.thumb-type .item .wrap {padding-top: 15px; width: 100%;}


.dt-tech-table {width: 100%; padding-top: 60px;}
.dt-tech-table .wit-1 {width: 276px;}
.dt-tech-table .table { border-top: 3px solid var(--blue); font-size: 16px;width: 100%; border-bottom:2px solid #464646;}
.dt-tech-table .table th {padding:7px 20px; text-align: left;}
.dt-tech-table .table td {padding:7px 20px;  font-size: 14px; font-weight: 500;}
.dt-tech-table .table thead {}
.dt-tech-table .table thead th {border-top: 1px solid #7F111B; position: relative; font-size: 16px; color:#fff; font-weight: 700;}
.dt-tech-table .table thead th:first-child {background: #001C67;}
.dt-tech-table .table thead th:nth-child(2) {background: #0030B1;}
.dt-tech-table .table tbody {border-bottom: 2px solid #a9a9a9;}
.dt-tech-table .table tbody tr {border-bottom: 1px solid #CCCCCC;}
.dt-tech-table .table tbody th { background: #E9E9E9;  font-size: 14px; font-weight: 600;}
.dt-tech-table .table tbody td:last-child { color:#707070; }
.dt-tech-content .content .img-cont {display: flex; align-items: center; justify-content: center;}


.card-ls {display: grid; grid-template-columns: repeat(3,1fr); gap: 30px 15px; padding-top: 90px;}
.card-ls .card {display: flex; flex-direction: column; padding: 20px; background: #fff; position: relative; align-items: start;min-height: 220px; height: 100%;}
.card-ls .card .tit-point {font-size: 18px; color:#001C67; font-weight: 700; padding-bottom: .3rem;}
.card-ls .card .ls {border-top: 1px solid #808080; padding-top:.7rem; width: 100%;}
.card-ls .card .ls li {font-size: 14px; display: flex; gap: .5rem; line-height: 1.8; }
.card-ls .card .thumb {position: absolute;right:5px; bottom:5px; mix-blend-mode: multiply;}
.card-ls .card.card-img-wide img {}
.card-ls .dot {width: 4px; height: 4px;}


@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .biz-intro .content {padding-top: 50px;}
  .card-ls {padding-top: 50px;}
  .card-ls .card {min-height: 280px;}
  .dt-tech-table .table th {padding:7px 10px;}
  .dt-tech-table .table td {padding:7px 10px;}
  .bullet-item-ls {padding-top: 50px;}
  .bullet-item-ls .item .tit-point {font-size: 18px;}
  .bullet-item-ls .item .ls {font-size: 16px;}
  .bullet-item-ls .item .ls.grid-2 {grid-template-columns: repeat(1,1fr);}
  .bullet-item-ls.thumb-type {gap: 1rem;}
  .bullet-item-ls.thumb-type .item {gap: 1.2rem;}
}
@media screen and (max-width: 767px) {
  .biz-intro .section-tit {line-height: 1.5;}
  .biz-intro .content {padding-top: 40px;}
  .bullet-item-ls .item .ls {margin-left: 10px; grid-template-columns: repeat(1,1fr); padding-top: .7rem;}
  .bullet-item-ls .item .ls li {font-size: 15px; word-break: keep-all;  }
  .bullet-item-ls .item .tit-point .sml {font-size: 13px; letter-spacing: -0.025rem;}
  .dt-tech-table {padding-top: 40px;}
  .dt-tech-table .wit-1 {width: auto;}
  /* .card-ls {grid-template-columns: repeat(2,1fr); gap: 30px 10px;}
  .card-ls .card {padding: 12px;}
  .card-ls .card .tit-point {font-size: 16px;} */

  .project-list li{font-size: 16px;}
  .project-list li div{font-size: 18px;}
  .project-list li div span{font-size: 14px;}
  .project-list li div span::before{top: 50%; height: 12px;}

  .card-ls {grid-template-columns: repeat(1,1fr);}
  .card-ls .card {min-height: auto;}
  .card-ls .card .thumb {position: static;  margin-left: auto; margin-top: -20px;}

  .bullet-item-ls.thumb-type {gap: 2rem;}
  .bullet-item-ls.thumb-type .item {flex-direction: column;}
  .bullet-item-ls.thumb-type .item .wrap {padding-top: 0; width: 100%;}
  .bullet-item-ls.thumb-type .item .thumb {width: 100%;}
  .dot {margin-top: .5rem;}

}
@media screen and (max-width: 410px) {
  .bullet-item-ls .item .tit-point {gap: .5rem;}
  .bullet-item-ls .item .tit-point .sml {font-size: 12px;}
}



.radar-container {position: relative;}
.radar-content {position: relative;width: 100%; height: 100%; display: flex;justify-content: center;}
.floating-img {position: absolute;right:50px; top:50px; display: flex; gap: 30px; align-items: flex-start;z-index: 1;}  
/* .radar-content .visual {position: absolute; top:0; right:0; width: 100%; height: 100%; object-fit: cover;} */

.radar-item {width: 100%; height: 100%; display: flex; align-items: center; position: absolute; justify-content: center; z-index: 2; top:0; left:0;}
.radar-item .visual {}
.radar-item .item {position: absolute; cursor: pointer;}
.radar-item .item .radar-box { cursor: pointer; position: absolute; display: flex; align-items: center; justify-content: center; gap: .8rem; }
.radar-item .item .radar-box .icon {width: 32px; height: 32px; background: #2C74FF; border-radius: 50%; display: flex; align-items: center; justify-content: center;  position: relative;  flex-shrink: 0;  z-index: 2; transition: .3s ease;}
.radar-item .item .radar-box .icon:before {content:""; position: absolute; width: 120%; height: 120%; border-radius: 50%; background: rgba(44, 116, 255,0.4); z-index: -1; animation: radar 2s infinite;}
.radar-item .item .radar-box .icon:after {content:""; position: absolute; width: 140%; height: 140%; border-radius: 50%; background: rgba(44, 116, 255,0.3); z-index: -1; animation: radar 2s infinite;}
.radar-item .item .radar-box .icon .mobile-number {display: none; font-size: 18px; font-weight: 700; color: #fff;}

.radar-item .item .inner { position: absolute; white-space: nowrap; left:-5px; top:-5px;  border-radius: 21px; z-index: -1; width: auto; height: auto; background: rgba(0, 0, 0,0.4 ); border-radius: 50px; backdrop-filter: blur(5px); transition: .4s ease; min-height: 42px; transition: width .4s ease, height .4s ease, background .4s ease, border-radius .4s ease;}
.radar-item .item .inner .txt-box {display: flex;flex-direction: column; gap: .5em; height: 100%; padding-inline: 48px 10px; padding-top: 11px; }
.radar-item .item .inner .txt-box .txt {display: flex;flex-direction: column; }
.radar-item .item .inner .txt-box .txt .tit {font-size: 16px; font-weight: 700; color:#fff;  transition: .2s ease; }
.radar-item .item .inner .txt-box .txt .desc {font-size: 16px; line-height: 1.43; white-space: pre-line;  color:#676767; border-top: 1px solid #676767; padding-top: .5rem; opacity: 0; width: 0; height: 0; margin-left: -5px; overflow: hidden;}
.radar-item .item .inner .txt-box .txt .desc b {color:#333;}
.radar-item .item .inner .txt-box .txt .desc span {display: block; padding-top: .3rem; font-weight: 700; color:#333;}

.radar-item .item.sky .radar-box .icon {background: #29B1FF;}
.radar-item .item.blue .radar-box .icon {background: #1178FF;}
.radar-item .item.blue-dark .radar-box .icon {background: #002FC8;}
.radar-item .item.navy .radar-box .icon {background: #080054;}

.radar-item .item.sky .radar-box .icon:before {background: rgba(41, 177, 255,0.4)}
.radar-item .item.sky .radar-box .icon:after {background: rgba(41, 177, 255,0.2)}

.radar-item .item.blue .radar-box .icon:before {background: rgba(17, 120, 255,0.4);}
.radar-item .item.blue .radar-box .icon:after {background: rgba(17, 120, 255,0.2);}

.radar-item .item.blue-dark .radar-box .icon:before {background: rgba(0, 47, 200,0.4);}
.radar-item .item.blue-dark .radar-box .icon:after {background: rgba(0, 47, 200,0.2);}

.radar-item .item.navy .radar-box .icon:before {background: rgba(8, 0, 84,0.4);}
.radar-item .item.navy .radar-box .icon:after {background: rgba(8, 0, 84,0.2);}

.radar-content .visual-mo {display: none; width: 100%;}

.bullet-icon-ls {display: grid; grid-template-columns: repeat(2,1fr); gap: 10px 16px; }
.bullet-icon-ls li {display: flex; gap: 16px; align-items: center;}
.bullet-icon-ls .icon {width: 45px; height: 45px; border-radius: 50%; background: #000F38; display: flex; align-items: center; justify-content: center;  border: 5px solid #B2B6C3; flex-shrink: 0;}
.bullet-icon-ls .txt {font-size: 17px; font-weight: 500; line-height: 1.47;}
.bullet-icon-ls li:nth-child(2) .icon {background:#001C67; border-color: #B2BAD1;}
.bullet-icon-ls li:nth-child(3) .icon {background:#001C67; border-color: #B2BAD1;}

.feature-icon-ls .icon-ls {display: flex; flex-direction: column; }
.feature-icon-ls .icon-ls li {padding-block: 15px;border-bottom: 1px solid #D9D9D9; display: flex; gap: 1rem; align-items: center;}
.feature-icon-ls .icon-ls li:last-child {border-bottom: none;}
.feature-icon-ls .icon-ls li .ico {}
.feature-icon-ls .icon-ls li .txt {font-size: 17px; font-weight: 600; line-height: 1.41;}



@keyframes radar {
  0% {transform: scale(.8);}
  100% {transform: scale(1.2);}
}
@media screen and (hover: hover) {
  .radar-item .item:hover {z-index: 3;}
  .radar-item .item:hover .inner {  background: #fff;  border-radius: 21px;   width: var(--hover-width, auto);  height: var(--hover-height, auto);   }
  .radar-item .item:hover .inner .txt-box .txt .tit {font-size: 17px;padding-bottom: .3rem; color:var(--primary);}
  .radar-item .item:hover .inner .txt-box .txt .desc {opacity: 1; width: auto; height: auto; transition: all .3s ease; overflow: visible;}
  .radar-item .item.sky:hover .inner .txt-box .txt .tit {color:#29B1FF;}
  .radar-item .item.blue:hover .inner .txt-box .txt .tit {color:#1178FF;}
  .radar-item .item.blue-dark:hover .inner .txt-box .txt .tit {color:#002FC8;}
  .radar-item .item.navy:hover .inner .txt-box .txt .tit {color:#080054;}
  .radar-item .item.vertical:hover .inner .txt .tit {padding-bottom: 0; padding-top: .3rem;}
  .radar-item .item:hover .radar-box .icon:before {display: none;}
  .radar-item .item:hover .radar-box .icon:after {display: none;}
}

@media screen and (min-width: 1400px ){
  .radar-item .item.vertical .inner {top:auto; bottom:calc(100% - 40px);}
  .radar-item .item.vertical .inner .txt-box {padding-top: 0; padding-bottom: 10px; justify-content: flex-end;}
  .radar-item .item.vertical .inner .txt-box .txt {flex-direction: column-reverse;}
  .radar-item .item.vertical .inner .txt-box .txt .desc {padding-top: 0; padding-bottom: .5rem; border:none; border-bottom: 1px solid #676767;}
  
  .radar-item .item.hori {display: flex; flex-direction: row-reverse;}
  .radar-item .item.hori .inner {left:auto; right: -5px;}
  .radar-item .item.hori .inner .txt-box .txt {text-align: right;}
  .radar-item .item.hori .inner .txt-box .tit {display: block; width: 100%;}
  .radar-item .item.hori .inner .txt-box {padding-inline: 17px 48px;}
  }

@media screen and (max-width: 1399px ){
  .floating-img {  z-index: 1 ; top:-20px; justify-content: flex-end; margin-bottom: -50px;}
  .floating-img img {width: 80px;}
  .radar-content {flex-direction: column;}
  .radar-content .visual {width: 100%; height: 300px; position: static;}

  .radar-item {position: static; flex-direction: column; gap: 10px; margin-top: 30px;}
  .radar-item .item {position: static !important; display: flex; width: 100% !important; gap: .5rem;}

  .radar-item .item .radar-box {align-items: flex-start; width: 100%;}
  .radar-item .item .inner {position: static !important; width: 100% !important;  min-height: auto; border-radius: 10px; background: #fff;}
  .radar-item .item .inner .txt-box {padding:14px 16px; }
  .radar-item .item .inner .txt-box .txt .tit {padding-bottom: 5px; color:var(--primary);}

  .radar-item .item.sky .inner .txt-box .txt .tit {color: #29B1FF;}
  .radar-item .item.blue .inner .txt-box .txt .tit {color: #1178FF;}
  .radar-item .item.blue-dark .inner .txt-box .txt .tit {color: #002FC8;}
  .radar-item .item.navy .inner .txt-box .txt .tit {color: #080054;}


  .radar-item .item .inner .txt-box .txt .desc {width: 100%; height: 100%; opacity: 1; overflow: visible; font-size: 15px !important; margin-left: 0;white-space: initial; word-break: keep-all; }
  .radar-item .item .radar-box .icon {width: 18px; height: 18px; margin-top: 15px; position: absolute;right: 20px; }
  .radar-item .item .radar-box .icon .desktop-icon {display: none;}
  .radar-item .item .radar-box .icon .mobile-number {display: block; font-size: 14px;}
  .radar-content .visual-pc {display: none;}
  .radar-content .visual-mo {display: block;}
}
@media screen and (max-width:767px){
  .bullet-icon-ls .txt {font-size: 14px;}
}

.landslide-detection-content {
  .content1 .gray-board {padding-block: 150px 20px; margin-top: 0; position: relative; }
  .content1 .wrapper .gray-board {padding: 50px;}
  .content1 .wrapper {padding-top: 110px;}
  .radar-item .item1 { --hover-width: 416px; --hover-height: 80px;  top: 71%; left: 48%; }
  .radar-item .item2 { --hover-width: 270px; --hover-height: 103px;  top: 28%; left: 52%; }
  .radar-item .item3 { --hover-width: 303px; --hover-height: 103px;  top: 38%; left: 20%; }
  .radar-item .item4 { --hover-width: 270px; --hover-height: 103px;  top: 47%; left: 73%; }

  .content3 .thumb-box {display: flex; gap: 30px; justify-content: space-between; padding-top: 90px;}
  .content3 .thumb-box .w-582 {width: 582px; object-fit: contain;}
  .content4 .gray-board {padding: 30px;}
  .content5 {padding-bottom: 240px;}

  @media screen and (max-width:1399px){
    .floating-img {top:20px; right:20px;}
    .floating-img img {width: 120px;}
    .content1 .wrapper {padding-top: 50px;}
    .content1 .wrapper .gray-board {padding: 20px;}
    .content3 .thumb-box {padding-top: 26px;  gap: 20px;}
    .content3 .thumb-box img {width: 31%; object-fit: contain;}
    .content3 .thumb-box .w-582 {width: 65%;}
    .content5 {padding-bottom: 100px;}
  }
  @media screen and (max-width:767px){ 
    .content1 .wrapper {padding-top: 30px;}
    .content1 .gray-board {flex-direction: column;}
    .floating-img {position: static; margin-bottom: 0; margin-left: auto;}
    .floating-img img {width: 100px; }
  }
}


.monitoring-diagram-content {display: flex; gap: 44px; padding-top: 50px;}
.monitoring-diagram-content .menu-list {max-width: 450px;}
.monitoring-diagram-content .menu-list .item:first-child {border-top:1px solid #DEDEDE;}
.monitoring-diagram-content .menu-list .item {border-bottom: 1px solid #DEDEDE; cursor: pointer;}
.monitoring-diagram-content .menu-list .item .tit {padding-left: 20px; padding-block: 20px; position: relative; font-size: 18px; color:#808080; display: flex; gap: 1rem; align-items: center; font-weight: 500; line-height: 1.1; transition: .2s ease; }
.monitoring-diagram-content .menu-list .item .plus {position: absolute;left:0px;}
.monitoring-diagram-content .menu-list .item .desc {padding: 0px 0px 0px 20px; height: 0; overflow: hidden;transition: .2s ease;}
.monitoring-diagram-content .menu-list .item .desc li {display: flex; gap: .5rem; font-size: 0px; padding-bottom: .5rem;  font-size: 18px; line-height: 1.5;}
.monitoring-diagram-content .menu-thumb {display: flex; flex-direction: column; align-items: center; position: relative;}
.monitoring-diagram-content .menu-thumb .thumb {position: relative; width: 576px; height: 370px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.monitoring-diagram-content .menu-thumb .thumb .monitoring-pad-temp {position: absolute;top:0; left:0; width: 100%; height: 100%;}
.monitoring-diagram-content .menu-thumb .thumb .thumb-img {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.monitoring-diagram-content .menu-thumb .thumb .thumb-img img {position: absolute; width: 538px; height: 325px;object-fit: contain;}
.monitoring-diagram-content .menu-thumb .shadow-bg {margin-top: -30px;}
.monitoring-diagram-content .menu-thumb .thumb .thumb-img img {display: none;}
.monitoring-diagram-content .menu-thumb .thumb .thumb-img img.active {display: block;}
.monitoring-diagram-content .menu-list .item.active .tit {padding-block: 13px; background: #F5F5F5; color:var(--primary); font-weight: 700;font-size: 22px;}
.monitoring-diagram-content .menu-list .item.active .plus {display: none;}
.monitoring-diagram-content .menu-list .item.active .desc {height: auto; overflow: visible; padding: 20px 0 18px 20px;transition: .2s ease; }


.controller {display: flex; width: 100%; justify-content: space-between; align-items: center; max-width: 576px;}
.controller .btn {width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border:1px solid #A8A8A8;}

.controller .btn-prev {}
.controller .btn-next svg {transform: rotate(180deg);}
.controller .bullet-ls {display: flex; gap: 18px;}
.controller .bullet-ls .bullet {width: 16px; height: 16px; border-radius: 50%;background: #DEDEDE; cursor: pointer; transition: .2s ease;}
.controller .bullet-ls .bullet.active {background: #2C74FF; position: relative; z-index: 1;}
.controller .bullet-ls .bullet.active::before {content:''; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 28px; height: 28px;  border:2px solid #2C74FF; border-radius: 50%;  z-index: -1;}
.controller .btn.disabled {opacity: .3; pointer-events: none;}


@media screen and (hover: hover) {
  .monitoring-diagram-content .menu-list .item:hover .tit {color:var(--primary);}
  .monitoring-diagram-content .menu-list .item:hover .plus svg path {fill:var(--primary);}
  .controller .btn:hover {border-color: var(--primary);}
  .controller .btn:hover svg path {stroke: var(--primary);}
  .controller .btn:hover svg line {stroke: var(--primary);}
  .controller .bullet-ls .bullet:hover {background: var(--primary);}

}

@media screen and (max-width: 1399px) {
  .monitoring-diagram-content {flex-direction: column-reverse; padding-top: 20px; gap: 20px;}
  .monitoring-diagram-content .menu-list {max-width: 100%;}
  .monitoring-diagram-content .menu-list .item .tit {font-size: 18px; padding: 10px 20px;}
  .monitoring-diagram-content .menu-list .item .desc li {font-size: 15px; white-space: initial;}

  .monitoring-diagram-content .menu-thumb {width: 100%;display: flex; flex-direction: column; gap: 30px;}
  .monitoring-diagram-content .menu-thumb .thumb { padding-inline: 10px; overflow: hidden; margin: 0 auto;width: 100%; aspect-ratio: 16/10; height: auto;}
  .monitoring-diagram-content .menu-thumb .thumb .thumb-img {position: relative;width: calc(100% - 10px); height: calc(100% - 30px); overflow: hidden; border-radius: 10px;}
  .monitoring-diagram-content .menu-thumb .thumb .thumb-img img {width: 100%; height: 100%;}
  .monitoring-diagram-content .menu-list .item .plus {left: 2px;}
  .monitoring-diagram-content .menu-list .item .plus svg {width: 7px; }
  .monitoring-diagram-content .menu-thumb .shadow-bg {position: absolute;bottom: -30px; display: none;}
  .monitoring-diagram-content .menu-list:not(.default) .item:not(.active) .tit {font-size: 16px;}

  .monitoring-diagram-content .menu-list .item.active .tit {font-size: 21px; padding: 13px;}
  .monitoring-diagram-content .menu-list .item.active .desc {padding: 10px 10px 5px ; min-height: auto;}

  .controller {max-width: 100%;}
  .controller .bullet-ls .bullet {width: 10px; height: 10px;}
  .controller .bullet-ls .bullet.active:after {width: 15px; height: 15px;}
}
@media screen and (max-width: 767px) {
.controller .btn {width: 24px; height: 24px;}
.controller .btn svg {width: 15px;}
.controller .bullet-ls .bullet.active::before {width: 20px; height: 20px; border-width: 1px;}
.monitoring-diagram-content .menu-list .item.active .tit {font-size: 18px;}
}
@media screen and (max-width: 399px) {
  .monitoring-diagram-content .menu-thumb .thumb .thumb-img {width: calc(100% - 4px); height: calc(100% - 20px);}
}




.manhole-remote-content {
  .noti {font-size: 17px; color:#000F38; position: absolute; bottom:103%; right:0;}
  .content1 .gray-board {position: relative;}
  .content1 .thumb-cont {display: flex; gap: 16px; margin-top: 70px;}
  .content1 .thumb-cont img {width: 100%; height: 100%; object-fit: cover;}
  .content3 .gray-board {padding-block: 0px;}
  .content3 .gray-board img {width: 647px;}
  
  .history-ls {display: flex;  padding-top: 40px;}
  .history-ls .ls {display: flex; flex-direction: column; gap: 14px;  width: 100%;}
  .history-ls li {display: flex; align-items: center; gap: 23px;}
  .history-ls li .date {max-width: 72px; width: 100%; padding: .2rem .5rem .1rem; background: #0030B1; border-radius: 50px; font-size: 12px; font-weight: 600; text-align: center;  color:#fff ;}
  .history-ls li:nth-child(even) .date {  background: #001C67;}
  .history-ls li .desc {font-size: 16px; font-weight: 500;  }

  .bullet-item-ls .item .ls.grid-2 {grid-template-columns: 0.9fr 1fr;}

  @media screen and (max-width: 1399px) {
    .noti {font-size: 14px;}
    .content1 .thumb-cont {display: grid; grid-template-columns: repeat(2,1fr);}
    .history-ls {gap: 1rem;}
    .history-ls li {gap: .5rem;}
    .history-ls li .desc {font-size: 14px !important;}
    .bullet-item-ls .item .ls.grid-2 {grid-template-columns: 1fr;}
  }
  @media screen and (max-width: 767px) {
    .content1 .thumb-cont {margin-top: 30px;}
    .content3 .gray-board {padding: 0 !important;}
    .history-ls {flex-direction: column;}
  }

}


.smart-agriculture-content {
  .thumb-ls {display: grid; grid-template-columns: repeat(3,1fr); gap: 32px 30px; padding-top: 110px;}
  .thumb-ls .item {border-bottom: 1px solid #AFAFAF;}
  .thumb-ls .item .thumb {width: 100%;}
  .thumb-ls .item .tit {font-size: 18px; font-weight: 700;padding-block: 8px 5px;}
  .text-cont .cont-head {padding-bottom: 50px;}
  .content3 .wrapper .head {padding-bottom: 60px;}
  .radar-content .visual {width: 985px; }
  .radar-item .item1 { --hover-width: 360px; --hover-height: 103px; top: 155px; left: 311px; }
  .radar-item .item2 { --hover-width: 279px; --hover-height: 128px; top: 97px; left: 494px; }
  .radar-item .item3 { --hover-width: 311px; --hover-height: 127px; top: 170px; left: 646px; }
  .radar-item .item4 { --hover-width: 317px; --hover-height: 128px; top: 341px; left: 494px; }
  .radar-item .item5 { --hover-width: 286px; --hover-height: 128px; top: 248px; left: 692px; }
  .radar-item .item6 { --hover-width: 297px; --hover-height: 127px; top: 218px; left: 483px; }

  @media screen and (max-width:1399px){
    .thumb-ls {padding-top: 60px;}
    .thumb-ls .item .tit {font-size: 16px;}
  }
  @media screen and (max-width:767px){
    .content3 .wrapper .head {padding-bottom: 30px;}
    .thumb-ls {padding-top: 30px; grid-template-columns: repeat(2,1fr); gap: 20px 10px;}
  }

  @media screen and (max-width:399px){
    .thumb-ls .item .tit {font-size: 13px;}
  }
}


.smart-city-content {
  .content1 .gray-board {position: relative; flex-direction: column; gap: 87px;}
  .content1 .gray-board .tit {font-size: 28px; font-weight: 700; color:var(--secondary); align-self: start;}
  .content1 .feature-icon-ls {position: absolute;right:30px; top:30px; z-index: 2;}
  .content1 .radar-content .visual {width: 1021px; }
  .content1 .radar-item .item1 { --hover-width: 329px; --hover-height: 101px; top: 106px; left: 60px; }
  .content1 .radar-item .item2 { --hover-width: 310px; --hover-height: 101px; top: 232px; left: 150px; }
  .content1 .radar-item .item3 { --hover-width: 271px; --hover-height: 101px; top: 307px; left: 369px; }
  .content1 .radar-item .item4 { --hover-width: 330px; --hover-height: 101px; top: 378px; left: 190px; }
  .content1 .radar-item .item5 { --hover-width: 245px; --hover-height: 101px; top: 487px; left: 405px; }
  .content1 .radar-item .item6 { --hover-width: 365px; --hover-height: 101px; top: 364px; left: 459px; }
  .content1 .radar-item .item7 { --hover-width: 246px; --hover-height: 130px; top: 314px; left: 705px; }
  .content1 .radar-item .item8 { --hover-width: 313px; --hover-height: 125px; top: 450px; left: 563px; }
  .content1 .radar-item .item9 { --hover-width: 271px; --hover-height: 130px; top: 373px; left: 745px; }
  .content1 .radar-item .item10 { --hover-width: 286px; --hover-height: 130px; top: 326px; left: 860px; }
  .content1 .radar-item .item11 { --hover-width: 275px; --hover-height: 130px; top: 245px; left: 900px; }
  .content1 .radar-item .item12 { --hover-width: 303px; --hover-height: 110px; top: 170px; left: 610px; }
  .content1 .radar-item .item13 { --hover-width: 328px; --hover-height: 130px; top: 134px; left: 359px; }
  .content1 .radar-item .item14 { --hover-width: 310px; --hover-height: 103px; top: 31px; left: 267px; }
  .content1 .radar-item .center { --hover-width: 399px; --hover-height: 133px; top: 40px; left: 600px; }

  .content3 .radar-content .visual {width: 816px;}
  .content3 .radar-item .item1 { --hover-width: 393px; --hover-height: 134px; top: 46px; left: 430px; }
  .content3 .radar-item .item2 { --hover-width: 283px; --hover-height: 108px; top: 215px; left: 340px; }
  .content3 .radar-item .item3 { --hover-width: 315px; --hover-height: 108px; top: 267px; left: 134px; }
  .content3 .radar-item .item4 { --hover-width: 295px; --hover-height: 108px; top: 280px; left: 537px; }
  .content3 .feature-icon-ls {padding-top: 30px;}

  @media screen and (max-width:1399px){
    .content1 .gray-board .tit {font-size: 18px;}
    .content1 .feature-icon-ls {right: 10px; top:10px;}
    .feature-icon-ls .icon-ls li {gap: .5rem; padding-block: 7px;}
    .feature-icon-ls .icon-ls li .txt {font-size: 14px;}
    .feature-icon-ls .icon-ls li .ico {width: 35px;}
    .content3 .feature-icon-ls .icon-ls {display: grid; grid-template-columns: repeat(2,1fr);gap:.5rem 1rem;}
    .content3 .feature-icon-ls .icon-ls li {padding: 10px; border-bottom: none; border:1px solid #e7e7e7; border-radius: 10px;}
  }
  @media screen and (max-width:767px){
    .content1 .gray-board {gap: 20px;}
    .content1 .feature-icon-ls {position: static; width: 100%;}
    .content3 .feature-icon-ls {padding-top: 20px;}
    .content3 .feature-icon-ls .icon-ls {grid-template-columns: repeat(1,1fr);}
    .content3 .feature-icon-ls .icon-ls li {padding:7px;}

  }

}

.smart-industry-content {
  .content3 {padding-bottom: 240px;}
  .content3 .wrapper {padding-top: 0; display: flex; gap: 54px;}
  .content3 .bullet-item-ls .item .tit-point {color:var(--primary); position: relative;}
  .content3 .bullet-item-ls .item .ls {margin-left: 0;}
  .content3 .noti {position: absolute; right:0; top:5px; font-size: 14px; color:#302D2C; font-weight: 400;}
  .content3 .item .wrap {min-height: 240px;}
  .content3 .item .gray-board {padding: 30px 15px; margin-top: 0;}
  .content3 .item .thumb img {width: 538px;}
  .content3 .prod-feature {display: flex; gap: 20px; margin-top: 26px;}
  .content3 .prod-feature .thumbnail {width: 192px; height: 180px; background: #fff; display: flex; align-items: center; justify-content: center;}
  .content3 .prod-feature .feat {display: flex; flex-direction: column; gap: .4rem;}
  .content3 .prod-feature .feat li {display: flex; gap: .5rem; align-items: center; font-size: 14px;}
  .content3 .prod-feature .feat li .icon {}
  @media screen and (max-width:1399px){
    .content3 {padding-bottom: 120px;}
    .content3 .noti {font-size: 12px;}
    .content3 .wrapper {gap: 1.5rem;}
    .content3 .item .wrap {min-height: 200px;}
    .content3 .bullet-item-ls .item .ls li span {line-height: 1.5; font-size: 14px;}
    .content3 .prod-feature {flex-direction: column;}
    .content3 .prod-feature .thumbnail {width: 100%;}
  }
  @media screen and (max-width:767px){
    .content3 {padding-bottom: 80px;}
    .content3 .wrapper {flex-direction: column; gap: 2.5rem;}
    .content3 .item .wrap {min-height: auto; padding-bottom: 1.25rem;}
    .bullet-item-ls.thumb-type {padding-top: 30px;}
  }
  
}

.smart-metering-content {
  .content1 .radar-content .visual {width: 1000px; }
  .radar-item .item1 { --hover-width: 406px; --hover-height: 150px; top: 360px; left: 279px; }
  .radar-item .item2 { --hover-width: 319px; --hover-height: 136px; top: 264px; left: 638px; }
  .radar-item .item3 { --hover-width: 314px; --hover-height: 103px; top: 170px; left: 700px; }
  
  @media screen and (max-width:1399px){
    .content2 .bullet-item-ls.thumb-type {padding-bottom: 40px;}
  }
  @media screen and (max-width:767px){
    .content2 .bullet-item-ls.thumb-type {padding-bottom: 30px;}
  }

}



.biz-service-ls {}
.biz-service-ls .service-item {display: flex; gap: 50px; padding-bottom: 90px; justify-content: space-between; align-items: flex-start;}
.biz-service-ls .service-item:last-child {padding-bottom: 0;}
.biz-service-ls .service-item .service-item-img {border-radius: 20px;overflow: hidden; width: 582px; flex-shrink: 0;}
.biz-service-ls .service-item .service-item-img img {width: 100%; max-width: 585px; height: 100%; object-fit: cover;}
.biz-service-ls .service-item .service-item-content {width: 100%; padding-top: 10px;}
.biz-service-ls .service-item .service-item-tit {font-size: 34px; font-weight: 700; padding-bottom: 14px;}
.biz-service-ls .service-item .service-item-tit .label {font-size: 17px; font-weight: 600; color:var(--secondary); font-family: var(--ff-secondary); display: block; text-transform: capitalize;}
.biz-service-ls .service-item .bullet-item-ls {border-top: 1px solid #DCDCDC; padding-top: 17px;;}
.biz-service-ls .service-item .bullet-item-ls .sub-tit {font-size: 22px; font-weight: 600; color:var(--primary); padding-bottom: 16px;}
.biz-service-ls .service-item .bullet-item-ls .ls {display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; border:none;}
.biz-service-ls .service-item .bullet-item-ls .ls li {font-size: 17px; font-weight: 400; color:#302D2C; line-height: 1.5;}


.biz-service-ls:not(.sml-type) .service-item:nth-child(even) {flex-direction: row-reverse; gap: 20px;}

.biz-service-ls.sml-type {}
.biz-service-ls.sml-type .service-item:not(:last-child) {padding-bottom: 50px;}
.biz-service-ls.sml-type .service-item .service-item-img {width: auto;}
.biz-service-ls.sml-type .service-item .service-item-content {padding-top: 30px;}

@media screen and (max-width:1399px){
  .biz-service-ls .service-item {flex-direction: column;}
  .biz-service-ls .service-item .service-item-img {width: 100%;}
  .biz-service-ls .service-item .service-item-img img {max-width: 100%;}
  .biz-service-ls .service-item {gap: 1rem;}
  .biz-service-ls .service-item .service-item-tit {font-size: 30px;}
  .biz-service-ls .service-item .service-item-tit .label {font-size: 15px;}
  .biz-service-ls .service-item .bullet-item-ls .sub-tit {font-size: 19px;}
  .biz-service-ls:not(.sml-type) .service-item:nth-child(even) {flex-direction: column;}
}
@media screen and (max-width:767px){
  .biz-service-ls .service-item .service-item-tit {font-size: 25px;}
  .biz-service-ls .service-item .bullet-item-ls .ls li {font-size: 15px; }
}

.esco-content {
  .tit-sml {font-weight: 700;}
  .biz-intro {padding-bottom: 60px;}
  .content2 {padding-bottom: 90px;}
  .content3 .thumb-ls {display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; padding-top: 10px;}
  .content3 .thumb-ls .ls {width: 100%; position: relative; padding: 25px 30px; display: flex;  align-items: flex-end; min-height:280px}
  .content3 .thumb-ls .ls .thumb {position: absolute;top:0; left:0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
  .content3 .thumb-ls .ls .txt-cont {color:#fff;}
  .content3 .thumb-ls .ls .txt-cont .tit {font-size: 22px; font-weight: 700; display: block;}
  .content3 .thumb-ls .ls .txt-cont .desc {font-size: 17px;}
  .content4 {padding-bottom: 240px;}
  .content4 .gray-board .thumb {width: 741px;}
    
  @media screen and (max-width:1399px){
    .content4 {padding-bottom: 120px;}
  }
  @media screen and (max-width:767px){
    .tit-sml {font-size: 20px; padding-bottom: 7px;}
    .content2 {padding-bottom: 60px;}
    .content3 .thumb-ls {grid-template-columns: repeat(1,1fr);}
    .content3 .thumb-ls .ls {min-height: 200px; padding: 18px 28px;}
    .content3 .thumb-ls .ls .txt-cont .tit {font-size: 18px;}
    .content3 .thumb-ls .ls .txt-cont .desc {font-size: 15px;}
    .content3 .wrapper .head {padding-bottom: 0;}

  }
}

.solar-power-plant-content {
  @media screen and (max-width:1399px){
    .biz-service-ls.sml-type {display: grid;grid-template-columns: repeat(2,1fr); gap: 2rem;}
    .biz-service-ls.sml-type .service-item .service-item-img {width: 100%;}
    .biz-service-ls.sml-type .service-item .service-item-content {padding-top: 0;}
    .biz-service-ls .service-item {justify-content: flex-start;}
    .biz-service-ls .service-item .service-item-tit {font-size: 26px;}
    .biz-service-ls .service-item .service-item-img {background: #f7f7f7; display: flex; align-items: center; justify-content: center; height: 200px; overflow: cover;}
    .biz-service-ls .service-item:last-child .service-item-img {background: #fff; display: flex; align-items: center; justify-content: center;}
    .biz-service-ls .service-item:last-child .service-item-img img {width: 100%; object-position:center bottom;}

    .biz-service-ls .service-item .service-item-img img {width: 50%;}
  }
  @media screen and (max-width:767px){
    .biz-service-ls.sml-type {display: grid;grid-template-columns: repeat(1,1fr);}
    .biz-service-ls .service-item .service-item-tit {font-size: 22px;}
    .biz-service-ls.sml-type .service-item .service-item-content {padding-inline: 1rem;}
    .biz-service-ls.sml-type .service-item:not(:last-child) {padding-bottom: 0;}
  }
}


.business-development-content {
  .sp-section:not(.biz-intro) .section-tit {font-size: 34px;}
  .wwd-ls {}
  .wwd-ls .item:not(:last-child) {padding-bottom: 90px;}
  .wwd-ls .item .thumb {border-radius: 20px; overflow: hidden; }
  .wwd-ls .item .text-cont {padding-top: 40px;}
  .wwd-ls .item .text-cont .wrap {padding-bottom: 17px;}
  .wwd-ls .item .text-cont .label {font-size: 26px; font-weight: 600; color:var(--secondary); padding-bottom: .5rem; display: block;}
  .wwd-ls .item .text-cont .tit {font-size: 34px; font-weight: 700;}
  .wwd-ls .item .text-cont .sub {font-size: 28px; font-weight: 500; color:#818181;}
  .wwd-ls .item .text-cont .desc {border-top: 1px solid #DCDCDC; padding-top: 1rem;}

  .biz-service-ls:not(:last-child) {padding-bottom: 90px;}
  .biz-service-ls .service-item .service-item-tit .label {color:var(--primary);}
  .biz-service-ls .service-item .cont-ls {padding-top: 40px;}
  .biz-service-ls .service-item .cont-ls .sbj {padding-bottom: 28px; display: block;}
  .biz-service-ls .service-item .bullet-item-ls .ls li {font-weight: 500; color:#434343;}

  
  @media screen and (max-width:1399px){
    .sp-section:not(.biz-intro) .section-tit {font-size: 24px;}
    .wwd-ls .item .text-cont .label {font-size: 19px;}
    .wwd-ls .item .text-cont .tit {font-size: 26px;}
    .wwd-ls .item .text-cont .sub {font-size: 19px;}
    .biz-service-ls .service-item .cont-ls {padding-top: 10px;}
    .biz-service-ls .service-item .cont-ls .sbj {padding-bottom: 17px; font-size: 18px;}
    .biz-service-ls .service-item .bullet-item-ls .ls li {font-size: 15px;}
    .biz-service-ls:not(:last-child) {padding-bottom: 60px;}
  }
  @media screen and (max-width:767px){
    .wwd-ls .item .text-cont .label {font-size: 17px;}
    .wwd-ls .item .text-cont .tit {font-size: 23px;}
    .wwd-ls .item .text-cont .sub {font-size: 16px;}
  }
}


.oversea-performance-content {
  position: relative;
  .bg-gray {background: #F9F9F9; position: absolute;bottom:0; left:0; width: 100%; height: 2820px; z-index: -1;} 
  .tit-sml {font-weight: 700;}
  .content1 .map {width: 411px; margin-left: -100px;}
  .content1 .wrap:not(:last-child) {padding-bottom: 60px;}
  .gray-board.shadow {box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.16); background: #fff;  align-items: initial;}
  .gray-board.shadow .info {display: flex;flex-direction: column; justify-content: space-between;}
  .gray-board.shadow .info .tit {font-size: 26px; color:#4B4B4B; font-weight: 700;}
  .gray-board.shadow .info .desc strong {font-size: 20px; font-weight: 500;}
  .gray-board.shadow .info .desc ul {color:#757575; padding-left: 50px; padding-top: 1rem;}
  .gray-board.shadow .info .desc ul li {display: flex; gap: 10px; white-space: nowrap; line-height: 1.5;margin-bottom: .4rem;}
  .section-tit{color: #0045FF;}

  @media screen and (max-width:1399px){
    .content1 .map {width: 300px;}
    .gray-board.shadow .info .tit {font-size: 20px;}
    .gray-board.shadow .info .desc strong {font-size: 18px;}
  }
  @media screen and (max-width:767px){
    .content1 .map {margin: 0 auto; width: 300px;}
    .gray-board.shadow {flex-direction: column; padding: 20px !important; margin-top: 30px; gap: 1rem;}
    .gray-board.shadow .info .tit {padding-bottom: 2rem; }
    .gray-board.shadow .info .desc ul {padding-left: 0;}
    .gray-board.shadow .info .desc ul li { white-space: initial; font-size: 14px;}
    .gray-board.shadow .info .desc strong {line-height: 1.5; font-size: 17px;}
  }
}


.hl-diagram {--size: 300px; display: flex; justify-content: flex-end; }
.hl-diagram > li {width: var(--size); height: var(--size); position: relative; padding: 15px; margin-inline: -2.5px;}
.hl-diagram > li .outer {position: absolute; top: 50%; left: 50%; z-index: 0; transform: translate(-50%, -50%); border-radius: 50%; width: 100%; height: 100%; }

.hl-diagram > li .outer::before {position: absolute; top: 0; left: 0; width: 100%; height: 50%; box-sizing: border-box; border: 5px solid rgba(0, 48, 177,0.8); content: '';}
.hl-diagram > li .outer::after {position: absolute; top: 0; left: 0; width: 100%; height: 50%; content: ''; display: block;}

.hl-diagram > li:nth-child(odd) .outer::before {border-bottom: none; border-radius: var(--size) var(--size) 0 0;}
.hl-diagram > li:nth-child(even) .outer::before {top: auto; bottom: 0; border-top: none; border-radius: 0 0 var(--size) var(--size); }

.hl-diagram > li:nth-child(odd) .outer::after {background: linear-gradient(to top, #fff 10%, transparent);;}
.hl-diagram > li:nth-child(even) .outer::after {top:auto; bottom:0; background: linear-gradient(to bottom, #fff 10%, transparent);;}


.hl-diagram > li .inner {position: relative; z-index: 1; background: #fff; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;border:1px solid #dedede;}
.hl-diagram > li .inner::before {position: absolute; top: 100%; left: 0; width: 100%; height: calc(var(--size) / 2); background: linear-gradient(to bottom, #bbbbbb, transparent 60%); content: ''; border-radius: var(--size) var(--size) 0 0; filter: blur(10px); opacity: .3;}
.hl-diagram > li .inner .gear {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 16px;}
.hl-diagram > li .inner .gear img {display: block; animation: rotate 10s 0s infinite linear; width: 100%;}
.hl-diagram > li:nth-child(even) .inner .gear img {animation: rotate-reverse 10s 0s infinite linear;}
.hl-diagram > li .inner .cont {text-align: center;}
.hl-diagram > li .inner .cont .key {display: block;  font-size: 20px; font-weight: 700;  line-height: 1.5;}
.hl-diagram > li .inner .cont .sml {display: block; font-size: 16px; font-weight: 500; line-height: 1.5; padding-top: .5rem;}
.hl-diagram > li .inner .cont .val .num {color: var(--primary);}
.hl-diagram > li .inner .cont .val small {font-size: 0.4em; color: #000;}

@keyframes rotate {
  to {transform: rotate(360deg);}
}
@keyframes rotate-reverse {
  to {transform: rotate(-360deg);}
}


@media screen and (max-width:1399px) {
  .hl-diagram {--size: 220px; justify-content: center;}
  .hl-diagram > li {padding: 10px;}
  .hl-diagram > li .outer::before {border-width: 3px;}
  .hl-diagram > li .inner .gear {padding: 10px;}
  .hl-diagram > li .inner .cont .key {font-size: 18px; margin-bottom: 0;}
  .hl-diagram > li .inner .cont .sml {font-size: 14px;}
  
}
@media screen and (max-width:767px)  {
  .hl-diagram {display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;--size: 150px;}
  .hl-diagram > li {transform: none!important; padding: 0; width: 100%;}
  .hl-diagram > li .outer::before {display: none;}
  .hl-diagram > li .outer::after {display: none;}
  .hl-diagram > li .inner {border-radius: 10px; background: #fff;}
  .hl-diagram > li .inner::before {display: none;}
  .hl-diagram > li .inner .gear img {width: auto; height: 100%;}
  .hl-diagram > li:last-child {grid-column: span 2;}
}