@charset "utf-8";

/* Utils */
.link-more {border:2px solid var(--primary); width: auto; min-width: 230px; justify-content: space-between; border-radius: 100px; display: flex; align-items: center; justify-content: space-between; gap: 1.5em; padding: 0.3em 0.3em 0.3em 1em;} 
.link-more .txt {color:var(--primary); font-weight: 600;}
.link-more .icon {background:var(--primary); width: 1.5em; height: 1.5em; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.link-more .icon svg {width: 1em; height: 1em;}

.tab-buttons {display: grid; grid-template-columns: repeat(3, 1fr );}
.tab-buttons.grid-cols-5 {grid-template-columns: repeat(5, 1fr );}
.tab-button {display: flex; align-items: center; justify-content: center; color: #7D7D7D; line-height: 1.3; padding: 0.5em 1em; min-height: 55px; background: #F9F9F9; text-align: center; border: 1px solid #ccc; margin: -1px 0 0 -1px;}
.tab-button.active {background: var(--primary); border-color: var(--primary); color: white; font-weight: 700;}

@media (hover: hover) { 
  .link-more:hover {background: var(--primary); color: white;}
  .link-more:hover .txt {color: white;}
  .link-more:hover .icon {background: white;}
  .link-more:hover .icon svg * {stroke: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .link-more {min-width: 180px; font-size: 14px;}

  .tab-buttons {grid-template-columns: repeat(2, 1fr);}
  .tab-button {font-size: 14px; min-height: 0;}
}
@media screen and (max-width: 767px) {
  .link-more {min-width: 140px;}

  .tab-buttons {grid-template-columns: repeat(1, 1fr);}
  .tab-button {font-size: 14px;}
}

.fc-red {color:#B3001A;}
.fc-green {color:#00AB06;}
.fc-sky {color:#00B1FF;} 
i {font-style: normal;}

/* Layouts */
.subpage-wrapper {--theme: var(--primary); --theme-light: #F2F7FF; padding-bottom: 200px; font-size: 17px; line-height: 1.8; word-break: keep-all;}
.subpage-wrapper.theme-cyan {--theme: #00B5C2; --theme-light: #F2FCFD;}
.subpage-wrapper.theme-orange {--theme: var(--secondary); --theme-light: #fff1e5;}
.subpage-wrapper.theme-navy {--theme: var(--primary-dark); --theme-light: #F2F7FF;}
.subpage-wrapper.theme-sky {--theme: #00B1FF; --theme-light: #F2FBFF;}
.sp-head {margin-bottom: 83px; padding-top: 135px;}
.sp-head-tag {display: block; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--theme); margin-bottom: 0.5em;}
.sp-head-title {font-size: 80px; font-weight: 700; line-height: 1.1;}
.sp-head-title span {color:var(--theme);}
.sp-head-title b {font-size: 30px; color:#8B8B8B;}
.sp-head-desc {margin-top: 1.5em; font-size: 20px; line-height: 1.5;}

.layout-split {display: grid; grid-template-columns: 250px 1fr; gap: 50px;}
.layout-split-2 {display: grid; grid-template-columns: 243px 1fr; gap: 50px 13px;}
.layout-split-full {grid-column: 1 / -1;}

.sp-section {padding-block: 80px 100px;}
.sp-section-banner {position: relative; color: white;}
.sp-section-banner-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover;}
.sp-section-title {font-size: 33px; font-weight: 700; line-height: 1.3; margin-bottom: 0.5em;}




@media screen and (min-width: 768px) {
  .layout-split-head .sp-section-title {margin-bottom: 0;}
}
@media screen and (max-width: 1399px) {
  .subpage-wrapper {padding-bottom: 150px; font-size: 16px;}
  .sp-head {margin-bottom: 50px; padding-top: 100px; text-align: center;}
  .sp-head-tag {font-size: 20px;}
  .sp-head-title {font-size: 40px;}
  .sp-head-title b {font-size: 23px;}
  .sp-head-desc {font-size: 18px;}

  .layout-split, .layout-split-2 {grid-template-columns: 150px 1fr; gap: 30px;}
  .layout-split-2 {gap: 30px 13px;}

  .sp-section {padding-block: 60px 80px;}
  .sp-section-title {font-size: 28px;}

}
@media screen and (max-width: 767px) {
  .subpage-wrapper {padding-bottom: 100px;}
  .sp-head {margin-bottom: 30px; padding-top: 80px; text-align: center;}
  .sp-head-tag {font-size: 16px;}
  .sp-head-title {font-size: 30px;}
  .sp-head-title b {font-size: 18px;}
  .sp-head-desc {font-size: 16px;}

  .layout-split, .layout-split-2 {display: block;}

  .sp-section {padding-block: 50px 70px;}
  .sp-section-title {font-size: 24px;}
}


/* Intro hero */
.intro-hero {position: relative; height: 493px;}
.intro-hero-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.intro-hero-content {display: flex; align-items: center; padding-block: 150px 50px; height: 100%; color: white;}
.intro-hero-title {font-family: var(--font-tertiary); font-size: 40px; font-weight: 700; text-transform: uppercase;}

.lnb-bar {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5); z-index: 100; color:#fff;}
.lnb-bar .container {display: flex;height: 54px; }
.lnb-bar .lnb-bar-home-button {display: flex;align-items: center;justify-content: center;width: 54px;height: 100%;background: var(--primary);flex-shrink: 0;color: #fff;  }
.lnb-bar .lnb-bar-dropdown {position: relative;height: 100%;width: 100%;max-width: calc(960px / 3);border-right: 1px solid rgba(255, 255, 255,0.3);  }  
.lnb-bar .lnb-bar-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: 400; transition: .2s ease;}
.lnb-bar .lnb-bar-dropdown .cur .icon {width: 19px;height: 19px;display: flex;align-items: center;justify-content: center;background: #fff;margin-left: 20px;flex-shrink: 0;  transition: .2s ease; border-radius: 50%;}
.lnb-bar .lnb-bar-dropdown .lnb-bar-dropdown-ls {width: 100%; background: #333; display: none; flex-direction: column; padding: 20px; border-radius: 0 0 10px 10px;}
.lnb-bar .lnb-bar-dropdown .lnb-bar-dropdown-ls .depth-btn {font-size: 15px; padding: 0.3em 0; display: block;}
.lnb-bar .lnb-bar-dropdown:hover .lnb-bar-dropdown-ls {display: flex;}
.lnb-bar .lnb-bar-dropdown .lnb-bar-dropdown-ls .depth-btn:hover {color:var(--primary);}

@media screen and (max-width: 1399px) {
  .intro-hero {height: 350px;}
  .intro-hero-content {padding-block: 60px 50px; text-align: center; justify-content: center;}
  .lnb-bar .container {max-width: calc(100% - 20px)!important; width: 100%!important;}
  .lnb-bar-dropdown .cur {padding: 0 15px;}
  .lnb-bar-dropdown .lnb-bar-dropdown-ls {padding: 10px;}
}
@media screen and (max-width: 767px) {
  .intro-hero {height: 250px;}
  .intro-hero-content {padding-block: 50px 0;}
  .intro-hero-title {font-size: 32px;}

  .lnb-bar {position: fixed; display: none;}
  .lnb-bar .container {height: 36px;}
  .lnb-bar .lnb-bar-home-button {height: 35px; width: 35px; }
  .lnb-bar .lnb-bar-dropdown .cur {font-size: 13px; line-height: 1.3; padding: 0 14px;}
  .lnb-bar .lnb-bar-dropdown .cur .icon {width: 15px; height: 15px;}
  .lnb-bar .lnb-bar-dropdown .lnb-bar-dropdown-ls {padding: 7px 5px; position: absolute; bottom: 100%;}
  .lnb-bar .lnb-bar-dropdown .lnb-bar-dropdown-ls .depth-btn {font-size: 13px;}
}



/* company :  greeting */
.greeting-content .typo {font-size: 40px; color:var(--primary); font-weight: 700;padding-bottom: 60px; display: block;}
.greeting-content .wrapper {display: flex; gap: 40px;  padding-bottom: 47px; display: grid; grid-template-columns:385px 1fr ; align-items: center;}
.greeting-content .wrapper .visual {position: relative; border-radius: 15px; overflow: hidden; width: 100%; height: 100%; }
.greeting-content .wrapper .visual .greeting-img { width: 100%; height: 100%; object-fit: cover;}
.greeting-content .wrapper .desc {line-height: 1.58; letter-spacing: -0.027em; padding-bottom: .9em;}
.greeting-content .wrapper .desc-2 {font-size: 20px; letter-spacing: -0.027em; padding-bottom: .6em; display: block;}
.greeting-content .wrapper:nth-of-type(2) {gap:30px; padding-bottom: 0;}
.greeting-content .wrapper:nth-of-type(2) .visual {order: 2;}

.greeting-content .wrapper .line {width: 100%; height: 18px; background-color: #E7E7E7;}
.greeting-content .wrapper .content .section_tit {font-size: 38px; font-family: var(--ff-secondary); color:#A5A5A5; text-transform: uppercase;}
@media screen and (max-width:1399px){
  .greeting-content .typo {font-size: 26px; padding-bottom: 20px;}
  .greeting-content .wrapper {grid-template-columns: repeat(1,1fr); padding-bottom: 20px;}
  .greeting-content .wrapper .content {width: 100%;}
  .greeting-content .wrapper .visual {width: 100%;}
  .greeting-content .wrapper .line {height: 20px; width: 100%;}
  .greeting-content .wrapper:nth-child(2) {flex-direction: column;}
  .greeting-content .wrapper:nth-child(2) .content {width: 100%;}
}
@media screen and (max-width:767px){
  .greeting-content .typo {font-size: 22px; line-height: 1.3; text-align: center;}
  .greeting-content .wrapper .desc-2 {line-height: 1.3;}
}




/* Company Organization */
.org-chart {margin-top: -150px; position: relative; z-index: -1;}
.org-chart-img {width: 100%;}

@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}

/* Company Mission */
.mission {}
.mission .sp-section-title { color:#9A9A9A; text-align: center; padding-bottom: 1em;}
.mission-chart {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.mission-chart .sbj-cont {border-radius: 55px; background: var(--primary); display: flex; flex-direction: column; align-items: center; width: 762px; padding: 1em ; gap: 8px; position: relative;margin-bottom: 54px; z-index: 22; color: white; text-align: center;}
.mission-chart .sbj-cont:before {content:""; width: 39px; height: 18px;background: var(--primary); clip-path: polygon(100% 0, 0 0, 50% 100%); position: absolute; top:100% ; left:50%; transform: translate(-50% ,0);}
.mission-chart .sbj-cont .tit {font-size: 22px; font-weight: 700; line-height: 1.2;}
.mission-chart .sbj-cont .desc {font-size: 22px; font-weight: 700;}
.mission-chart .mission-ls {display: flex; gap: 20px; padding-top:54px; width: 1148px; position: relative  ; }
.mission-chart .mission-ls:before {content:""; position: absolute;top:1px; left:50%; transform: translate(-50% ,  0); background: #CBCBCB; display: block; width: calc(100% - 368px); height: 3px;}
.mission-chart .mission-ls .item {width: 100%; border-radius: 15px; border: 1px solid var(--gray-light); padding: 31px 13px 34px; display: flex; flex-direction: column ;  align-items: center; text-align: center; position: relative;}
.mission-chart .mission-ls .item .typo {font-size: 29px; font-weight: 700; color:#C6C6C6;}
.mission-chart .mission-ls .item .tag {font-size: 22px; font-weight: 700; background: var(--primary-dark); border-radius: 50px; width: 226px;display: block; color:#fff; } 
.mission-chart .mission-ls .item .sbj {font-size: 19px; font-weight: 700; color:var(--navy); line-height: 1.47;}
.mission-chart .mission-ls .item .desc {font-size: 17px; padding-top: 1em; line-height: 1.67;}
.mission-chart .mission-ls .item img {margin: 20px 0  20px;}
.mission-chart .mission-ls .item .circle {width:26px; height: 26px; border:7px solid var(--primary-dark); background: #fff; border-radius: 50%; position: absolute; top:-13px; left:50%; transform: translate(-50% , 0); flex-shrink: 0; z-index: 2;}
.mission-chart .mission-ls .item .circle::before {content:""; position: absolute;  left:50%; transform: translate(-50% , 0%); width: 3px; height: 40px; background: #CBCBCB; top:-48px; z-index: 0;}
.mission-chart .mission-ls .item:nth-child(2) .circle::before {height: 108px; top:-115px;}


@media screen and (max-width: 1399px) {
  .mission-chart .sbj-cont {width: 100%; margin-bottom: 0;}
  .mission-chart .sbj-cont .desc {font-size: 19px;}
  .mission-chart .mission-ls .item .typo {font-size: 22px;}
  .mission-chart .mission-ls {width: 100%;}
  .mission-chart .mission-ls:before {display: none;}
  .mission-chart .mission-ls .item .circle::before  {display: none;}
  .mission-chart .mission-ls .item .tag {width: 100%; font-size: 20px;}
  .mission-chart .mission-ls .item .sbj {font-size: 15px; word-break: keep-all;}
  .mission-chart .mission-ls .item .desc {font-size: 15px; word-break: keep-all;}
  .mission-chart .mission-ls .item img {width:70px ;}
}
@media screen and (max-width: 767px) {
  .mission-chart .mission-ls {flex-direction: column;}
  .mission-chart .sbj-cont {border-radius: 20px;}
  .mission-chart .sbj-cont .tit {font-size: 18px;}
  .mission-chart .sbj-cont .desc {text-align: center; line-height: 1.4; font-size: 18px;}
  .mission-chart .mission-ls .item .tag {border-radius: 7px;}
  .mission-chart .sbj-cont:before {top: 99%;}
}

/* Company History */
.history-slogan {font-size: 35px; font-weight: 700; line-height: 1.54; padding-top: 40px; color:#555555;}

.history {padding: 0!important; background: #f8f7f6;}
.history-container {display: flex; padding: 65px 0; position: relative;}
.history:last-child .history-container {padding-bottom: 200px;}
.history-container::before {position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: var(--gray-light); content: '';}
.history:first-child .history-container::before {top: .5em;}
.history-head {width: 50%; padding-right: 150px;}
.history-head .sbj {color: var(--primary-dark); font-family: var(--font-secondary); font-weight: 600;}
.history-head .desc {color: var(--gray); font-family: var(--font-secondary); font-weight: 600;}
.history-body {width: 50%; padding-top: 10px;}
.history-body .year-ls-item {position: relative; display: flex; gap: 15px; padding-left: 50px; padding-bottom: 50px;}
.history-body .year-ls-item:last-child {padding-bottom: 0;}
.history-body .year-ls-item::before {position: absolute; top: .75em; left: 0; transform: translate(-50%, -50%); width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; border: 3px solid var(--primary); content: ''; background: #fff;}
.history-body .year-ls-item .year {font-size: 26px; font-weight: 500; position: absolute; top: 0; right: calc(100% + 35px); line-height: 1; color: #909090;}
.history-body .year-ls-item .month_ls-item {display: flex; gap: 30px; padding-bottom: 15px;}
.history-body .year-ls-item .month_ls-item:last-child {padding-bottom: 0;}
.history-body .year-ls-item .month_ls-item .month {width: 34px; font-size: 16px; font-weight: 700; color: var(--primary); flex-shrink: 0;}

.history.bg .history-head .sbj,
.history.bg .history-body,
.history.bg .history-body .year-ls-item .year {color: #fff;}
.history.bg .history-body .year-ls-item .month_ls-item .month {color: #008CF8;}
.history.bg .history-body .year-ls-item::before {border-color: #008CF8;}


@media screen and (max-width: 1399px) {
  .history-slogan {font-size: 25px; padding-top: 20px;}

  .history-head {padding-right: 120px;}
  .history-body .year-ls {font-size: 15px;}
  .history-body .year-ls-item {padding: 0 0 35px 35px;}
  .history-body .year-ls-item .year {font-size: 22px;}
  .history-body .year-ls-item .month_ls-item {gap: 20px;}
}
@media screen and (max-width: 767px) {
  .history-slogan {font-size: 19px; padding-top: 10px;}

  .history-container {flex-direction: column; gap: 20px;}
  .history-container::before {left: 0px;}
  .history:last-child .history-container {padding-bottom: 100px;}
  .history-head {padding-right: 0; width: 100%; padding-left: 25px; position: relative;}
  .history-head::before {position: absolute; top: 11px; left: 0; content: ''; width: 21px; height: 21px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 5px solid var(--primary); transform: translate(-50%, -50%);}
  .history.bg .history-head::before {border-color: #008CF8;}
  .history-head .sbj {font-size: 22px;}
  .history-head .desc {font-size: 18px;}
  .history-body {width: 100%;}
  .history-body .year-ls {font-size: 14px;}
  .history-body .year-ls-item {flex-direction: column; padding: 0 0 45px 25px;}
  .history-body .year-ls-item::before {top: 10px;}
  .history-body .year-ls-item .year {position: static; display: block; font-size: 20px;}
}

.his_title {display: flex;align-items: center; justify-content: center; margin-bottom: 50px;}
.his_title .his_title_year {font-size: 51px; color:#fff; padding: 93px 0; font-family: var(--font-secondary); font-weight: 600;}
.his-block {padding-bottom: 80px;}
.his-block:last-child {padding-bottom: 0;}
.his_content {display: flex; justify-content: space-between; gap: 90px;}
.his_content .his_head {width: 570px;position: relative; display: flex; flex-direction: column;justify-content: space-between;}
.his_content .his_head .txt { font-size: 23px; line-height: 1.56; color:#555555;}
.his_content .his_head .line {width: 100%; height: 18px; background-color: #EDEDED; margin-top: auto;}
.his_content .his_head img {display: block; align-self: flex-start;}
.his_content .his_head .company_img {position: absolute;bottom: 0; right:0;}
.his_content .his_head .logo {width: auto; height: 60px; filter: grayscale(1); opacity: 0.15;}
.his_content .his_body {width: 807px;}
.his_content .his_body .his_item {display: flex; gap: 47px; padding: 35px 0; border-bottom: 1px solid #CCCCCC;}
.his_content .his_body .his_item:last-child {border-bottom: none;}
.his_content .his_body .his_item .year {font-size: 35px; font-weight: 700; line-height: 1;}
.his_content .his_body .his_item .bullet {}
.his_content .his_body .his_item .bullet > li {font-size: 19px; color:#575757;}

@media screen and (max-width:1399px){
    .his_title .his_title_year {font-size: 27px; padding: 50px 0;}
    .his-block {padding-bottom: 60px;}
    .his_content {gap: 40px;}
    .his_content .his_head .txt {font-size: 18px;}
    .his_content .his_body .his_item {gap: 20px;}
    .his_content .his_body .his_item {padding: 20px 0 ;}
    .his_content .his_body .his_item .year {font-size: 22px; margin-top: 4px;}
    .his_content .his_body .his_item .bullet > li {font-size: 16px;}
    .his_content .his_head .company_img {width: 60%;}
    .his_content .his_head .logo {height: 40px;}
}
@media screen and (max-width:767px){
  .his_title {margin-bottom: 20px;}
    .his-block {padding-bottom: 50px;}
    .his_content {flex-direction: column; gap: 20px;}
    .his_content .his_head {width: 100%; gap: 20px;}
    .his_content .his_head .txt {font-size: 17px;}
    .his_content .his_head .company_img { width: 150px;}
    .his_content .his_head img {width:200px;}
    .his_content .his_body {width: 100%;}
    .his_content .his_body .his_item {gap: 10px;}
    .his_content .his_body .his_item .bullet > li {font-size: 14px;}
    .his_content .his_body .his_item .year {margin-top: 0; font-size: 20px;}
    .his_content .his_head .logo {display: none;}
}


/* Business area */
.biz_ls {display: flex; flex-direction: column; gap: 40px;}
.biz_section {display: flex;}
.biz_section .thumb {width: 50%; min-height: 400px; border-radius: 20px;}
.biz_section .content {width: 50%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding-block: 50px; border-bottom: 1px solid var(--gray-light); position: relative;}
.biz_section .content .sbj {line-height: 1.2;}
.biz_section .content .typo {position: absolute; bottom: 0; right: 0; font-size: 56px; color: var(--gray-light); line-height: 1; font-weight: 700; font-family: var(--font-secondary); opacity: 0.4; z-index: -1;}
.biz_section:nth-child(2n-1) .thumb {order: 1;}
.biz_section:nth-child(2n-1) .content {order: 2; padding-left: 50px;}
.biz_section:nth-child(2n) .thumb {order: 2;}
.biz_section:nth-child(2n) .content {order: 1; padding-right: 50px;}
.biz_section:nth-child(2n) .content .typo {right: auto; left: 0;}

@media screen and (max-width: 1399px) {
  .biz_section {display: block;}
  .biz_section .thumb {width: 100%; min-height: 250px;}
  .biz_section .content {width: 100%; padding: 30px 0!important;}
  .biz_section .content .typo {font-size: 50px; left: auto!important; right: 0!important;}

}
@media screen and (max-width: 767px) {
  .biz_section .thumb {min-height: 250px;}
  .biz_section .content {padding: 25px 10px!important;}
  .biz_section .content .typo {display: none;}
}
@media screen and (max-width: 499px) {}


/* Temp */
.rnd-vision-banner {position: relative; overflow: hidden; border-radius: 20px;}
.rnd-vision-banner .bg {width: 100%; height: 350px; object-fit: cover;}
.rnd-vision-banner::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); content: '';}
.rnd-vision-banner .slogan {position: absolute; bottom: 0%; left: 0%; padding: 30px; font-size: 32px; line-height: 1.5; letter-spacing: -0.02em; color: white; font-weight: 500; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
.rnd-vision-banner .slogan b {color: var(--theme); font-size: 1.2em; line-height: 1.5; display: block;}
.rnd-vision {display: flex;justify-content: space-between; flex-direction: column; align-items: center; gap: 50px;}
.rnd-vision .sbj {font-size: 46px; color:#CCCCCC;width: 20%; flex-shrink: 0;}
.rnd-vision .body .desc {font-size: 19px; margin-bottom: 45px;}
.rnd-vision .diagram_container {border-radius: 167px; background: white; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); padding: 22px;display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-top: -50px; position: relative; z-index: 1;}
.rnd-vision .diagram_container .diagram_ls {display: flex;align-items: center;}
.rnd-vision .diagram_container .diagram_ls .item {display: flex; align-items: center; justify-content: center; position: relative; width: 290px; height: 290px; border-radius: 50%; background:linear-gradient(to bottom, var(--primary-light) 0% ,var(--primary) 100% );}
.rnd-vision .diagram_container .diagram_ls .item::before {content:""; background:url('../images/rnd/plus_icon.svg') no-repeat center / cover ; width: 40px;height: 40px; position: absolute; right:-20px; z-index: 1;}
.rnd-vision .diagram_container .diagram_ls .item:last-child:before {display: none;}
.rnd-vision .diagram_container .diagram_ls .item .rnd_vision_circle {position: absolute;}
.rnd-vision .diagram_container .diagram_ls .item .txt {font-size: 25px; font-weight: 700;color:#fff; text-align: center;}

@media screen and (max-width: 1399px) {
  .rnd-vision-banner .slogan {font-size: 24px;}
  .rnd-vision .sbj {width: 100%;font-size: 30px; width: 25%;}
  .rnd-vision .body {width: 70%;}
  .rnd-vision .body .desc {font-size: 15px;}
  .rnd-vision .diagram_container {padding: 14px;}
  .rnd-vision .diagram_container .diagram_ls .item {width: 160px; height: 160px;}
  .rnd-vision .diagram_container .diagram_ls .item .rnd_vision_circle {width: 90%;}
  .rnd-vision .diagram_container .diagram_ls .item .txt {font-size: 17px;}
  .rnd-vision .diagram_container .diagram_ls .item::before {width: 30px;height: 30px;right: -15px;}
}
@media screen and (max-width: 767px) {
  .rnd-vision-banner .slogan {font-size: 20px;}
  .rnd-vision {flex-direction: column; gap: 10px;}
  .rnd-vision .sbj {font-size: 20px; width: 100%;}
  .rnd-vision .body {width: 100%;}
  .rnd-vision .diagram_container {border-radius: 10px;padding: 20px; background:#f9f9f9;}
  .rnd-vision .diagram_container .diagram_ls {flex-direction: column; width: 100%;gap: 10px;}
  .rnd-vision .diagram_container .diagram_ls .item {width: 100%;height: auto; padding: 50px 0; border-radius: 10px;overflow: hidden;}
  .rnd-vision .diagram_container .diagram_ls .item .rnd_vision_circle {width: 60%; min-width: 180px;}
  .rnd-vision .diagram_container .diagram_ls .item::before {display: none;}
}

/* Rnd: certificate */
.cert-ls {display: grid; grid-template-columns: repeat(5, 1fr); gap: 50px 18px;}
.cert-ls .list-empty {grid-column: 1 / -1;}
.cert-ls li {}
.cert-ls li .thumb {position: relative;}
.cert-ls li .thumb .cert-img {display: block; width: 100%; border: 1px solid #b8b8b8;}
.cert-ls li .thumb .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s;}
.cert-ls li .thumb .overlay:hover {opacity: 1;}
.cert-ls li .thumb .overlay .icon-box {display: flex; flex-direction: column; align-items: center; gap: 10px; color: white; font-size: 14px; text-align: center;}
.cert-ls li .cont {padding-top: 21px;}
.cert-ls li .cont .tit {font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 0.3em;}
.cert-ls li .cont .tit .tag {display: block; color: var(--primary); font-size: 14px; font-weight: 700; margin-bottom: 0.4em;}
.cert-ls li .cont .num {font-size: 14px; color: var(--gray1); display: block;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .cert-ls {grid-template-columns: repeat(3, 1fr); gap: 30px 18px;}
}
@media screen and (max-width: 767px) {
  .cert-ls {grid-template-columns: repeat(2, 1fr); gap: 30px 10px;}
  .cert-ls li .cont .tit {font-size: 15px;}
  .cert-ls li .cont .tit .tag {font-size: 14px;}
  .cert-ls li .cont .num {font-size: 14px;}
}


/* Customer: inquiry */
.inq-layout {display: grid; grid-template-columns: 350px 1fr; gap: 80px; align-items: start; padding-top: 135px;}
.inq-layout .sp-head {position: sticky; top: 135px; margin-top: -10px;}

.inq-layout .sp-head .desc {font-size: 18px; color: var(--gray); margin-bottom: 10px; margin-top: 1em;}

.inq-contact-info {border-top: 1px solid var(--gray-light); padding-block: 20px; font-family: var(--font-secondary);}
.inq-contact-info .tit {font-size: 18px; font-weight: 700; color: var(--gray-dark); margin-bottom: 10px; display: block;}
.inq-contact-info ul {display: flex; flex-direction: column; gap: 10px;}
.inq-contact-info ul li {display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--gray-dark);}
.inq-contact-info ul li .icon {width: 40px; height: auto; margin-left: -5px;}

@media screen and (max-width: 1399px) {
  .inq-layout {grid-template-columns: repeat(1, 1fr); gap: 0; padding-top: 100px;}
  .inq-layout .sp-head {position: relative; top: 0; margin-top: 0;}
  .inq-layout .sp-head .desc {font-size: 16px;}
  .inq-contact-info {border-bottom: 1px solid var(--gray-light);}
  .inq-contact-info .tit {text-align: left;}
  .inq-contact-info ul li {}
}
@media screen and (max-width: 767px) {
  .inq-layout {padding-top: 80px;}
}


/* Customer : Location */
.location-info {position: relative; z-index: 10; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 3px solid var(--primary);}
.location-info-thumb {position: relative;}
.location-info-thumb .thumb {width: 100%; height: 100%; object-fit: cover;}
.location-info-thumb:has(.noti)::before {background: linear-gradient(to top, rgb(0,0,0,1), transparent);}
.location-info-thumb .noti,
.location-info-thumb .logo {position: absolute; bottom: 15px; left: 15px; width: 150px;}
.location-info-thumb .noti {color: #fff; width: 100%;}
.location-info-thumb .noti .tit {font-weight: 700; margin-bottom: 0.5em; display: block; font-size: 20px;}
.location-info-thumb .noti .txt {font-size: 15px; }
.location-info table {table-layout: fixed; grid-column: span 2;}
.location-info table :where(th, td) {border-block: 1px solid #dfdfdf; padding: 10px 20px;}
.location-info table tbody {}
.location-info table tbody tr {}
.location-info table tbody tr th {background: #f5f4f3; width: 100px;}
.location-info table tbody tr td {}

.location-content {position: relative;}
.location-content .map-container {height: 450px; border-radius: 20px;}
.location-content .location-info {width: calc(100% - 120px); margin-inline: auto; margin-top: -60px;}

@media screen and (max-width: 1399px) {
  .location-content .location-info {margin-top: 0; width: 100%; font-size: 15px;}
  .location-info-thumb .noti, .location-info-thumb .logo {width: 100px;}
  .location-content .map-container {height: 400px;}
}

@media screen and (max-width: 767px) {
  .location-content .map-container {height: 300px;}
  .location-content .location-info {grid-template-columns: repeat(1, 1fr); font-size: 14px; margin-top: 50px;}
  .location-info table {display: block;}
  .location-info table * {display: block;}
  .location-info table tr {display: grid; grid-template-columns: 80px 1fr;}
  .location-info table :where(th, td) {padding: 10px; border-top: none;}
  .location-info table tbody tr th {width: auto;}
}


/* Products: Lineup */
.lineup-ls {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.lineup-ls .lineup-item {position: relative;}
.lineup-ls .lineup-item .lineup-item-inner {display: block; position: relative; border: 1px solid var(--gray-light); border-radius: 20px; overflow: hidden; height: 100%;}
.lineup-ls .lineup-item .lineup-item-thumb {position: relative; background: #f9f9f9; aspect-ratio: 4/3;}
.lineup-ls .lineup-item .lineup-item-thumb img {width: 100%; height: 100%; object-fit: cover;}
.lineup-ls .lineup-item .lineup-item-thumb .lineup-item-tag {position: absolute; top: 15px; left: 15px; background: var(--primary); color: white; font-size: 14px; border-radius: 100px; padding: 0.4em 1em; line-height: 1; font-weight: 500;}
.lineup-ls .lineup-item .lineup-item-content {padding: 15px;}
.lineup-ls .lineup-item .lineup-item-content .lineup-item-title {font-size: 18px; font-weight: 700; display: block;}
.lineup-ls .lineup-item .lineup-item-content .lineup-item-desc {font-size: 15px; color: var(--gray); margin-bottom: 0; line-height: 1.3;}

.lineup-ls .lineup-item .lineup-item-inner.link-prevent .lineup-item-thumb {opacity: 0.5;}
.lineup-ls .lineup-item:nth-child(4) {grid-column: 1;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .lineup-ls {grid-template-columns: repeat(3, 1fr);}
  .lineup-ls .lineup-item .lineup-item-thumb .lineup-item-tag {font-size: 12px; top: 10px; left: 10px;}
  .lineup-ls .lineup-item .lineup-item-content {padding: 15px;}
  .lineup-ls .lineup-item .lineup-item-content .lineup-item-title {font-size: 16px;}
  .lineup-ls .lineup-item .lineup-item-content .lineup-item-desc {font-size: 14px;}
}
@media screen and (max-width: 767px) {
  .lineup-ls {grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .lineup-ls .lineup-item:nth-child(4) {grid-column: auto;}
}
@media screen and (max-width: 499px) {
  .lineup-ls {grid-template-columns: repeat(1, 1fr);}
}


/* Product Detail */
.product-intro {background: #F0F0F0; padding-bottom: 96px;}
.product-intro-content {display: grid; grid-template-columns: 680px 1fr; gap: 10px; position: relative;}
.product-intro-content .thumb {grid-column-start: 2; grid-row: 1 / 3; padding-top: 200px; position: absolute; right: 0;}
.product-intro-content .thumb img {margin: 0 auto;}
.product-intro-content .sp-head {grid-column-start: 1; margin-bottom: 0px; padding-top: 80px;}
.product-intro-content .content {color: #3C3C3C; grid-column-start: 1;}
.product-intro-content .content .product-name {font-size: 60px; font-weight: 700; color: var(--theme); line-height: 1.3; margin-bottom: 0.5em;}
.product-intro-content .content .product-desc {font-size: 20px; line-height: 1.5; font-weight: 500; padding-top: 30px;}
.product-intro-content .content .product-desc.bullet {font-size: 18px; font-weight: 500; line-height: 1.5; display: flex; flex-direction: column; gap: 10px;}
.product-intro-content .content .product-desc.bullet > li:before {width: 0.5em; height: 0.5em;}
.product-intro-content .content .desc-info {display: flex; gap :22px; margin-top: 182px; position: relative;z-index: 1;}
.product-intro-content .key-features { grid-column: span 2; margin-top: 50px;}
.product-intro-content .key-features .title {font-size: 30px; font-weight: 700; color: #B2B2B2; line-height: 1.3; padding-bottom: 0.7em; border-bottom: 1px solid #AFAFAF;}
.product-intro-content .key-features ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 15px; padding-block: 15px 0;}
.product-intro-content .key-features ul li {display: flex; align-items: flex-start; gap: 19px; padding-block: 15px;}
.product-intro-content .key-features ul li .icon {flex-shrink: 0; width: 72px; object-fit: contain; }

.product-intro-content .key-features ul li .content {padding-top: 5px;}
.product-intro-content .key-features ul li .content .tit {display: block; color: var(--theme); font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 0.3em;}
.product-intro-content .key-features ul li .content .desc {display: block; font-size: 17px; line-height: 1.58; letter-spacing: -0.025em;}







.prod-section {padding-block: 155px 125px; border-bottom: 1px solid #AFAFAF;}
.prod-section:last-child, .prod-section.no-border {border-bottom: none;}
.prod-section-title {font-size: 35px; font-weight: 700; display: block; margin-bottom: 1em; line-height: 1.3; text-transform: uppercase;}
.prod-section-head:has(.prod-section-desc) .prod-section-title {margin-bottom: 0.3em;}
.prod-section-desc {font-size: 18px; margin-bottom: 1em; line-height: 1.5;}
.prod-section:has(.video-container) {padding-block:130px 170px;}
.prod-section:has(.prod-spec) {padding-block:130px 166px;}


.prod-type-banner {position: relative;}
.prod-type-banner .bg {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}
.prod-type-banner .container {display: grid; grid-template-columns: repeat(4, 1fr);  gap: 0px; position: relative; z-index: 1; padding-block: 70px; color: white;}
.prod-type-banner .container .title {font-size: 35px; font-weight: 700; line-height: 1.3; margin-top: -3px;}
.prod-type-banner .container .desc {font-size: 20px; font-weight: 500; grid-column: span 3;}
.prod-types-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 67px; padding-inline: 97px; padding-top: 70px;}

.video-container {position: relative; overflow: hidden; border-radius: 20px;}
.video-container .thumb {width: 100%; aspect-ratio: 16 / 9; object-fit: cover;}
.video-container .overlay {all: unset; cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.video-container .overlay .icon {}

.prod-spec {width: 100%; font-size: 18px;}
.prod-spec th {width: 300px;}
.prod-spec :where(th, td) {padding: 0.8em 1em; border-right: 10px solid white; text-align: left; line-height: 1.4;}
.prod-spec td:last-child {border-right: none;}
.prod-spec tr {border-bottom: 1px solid #AFAFAF;}
.prod-spec thead th {border-top: 2px solid #757575; background: #F6F6F6; color: #676767;}
.prod-spec thead td {border-top: 2px solid var(--theme); background: var(--theme-light); color: var(--theme); font-weight: 700; text-align: center;}
.prod-spec tbody {font-size: 17px;}
.prod-spec tbody th {background: #ECECEC; color: #575757; vertical-align: top;}
.prod-spec tbody td {text-align: center;}
.prod-spec tbody td img {margin-inline: auto;}

.prod-section-content .noti {color:#AFAFAF;  text-align: right; padding-top: 18px;}
.prod-section-content .noti span {display: block; line-height: 1.47;}

.prod-app { padding-block: 140px 110px;}
.prod-app .container {display: flex; display: grid; grid-template-columns:1.3fr 1fr; gap: 87px;}
.prod-app .prod-section-title {font-size: 50px; margin-bottom: 0.7em;}
.prod-app .app-type span {font-size: 40px; font-weight: 700; color:var(--theme); line-height: 1.25;}
.prod-app .app-type small {font-size: 25px; color:#8B8B8B; display: block; line-height: 1; display: none;}
.prod-app .app-type-info {padding-top: 30px; font-size: 20px;}
.prod-app .app-type-info ul.bullet > li {font-size: 17px; padding-bottom: .2em;}
.prod-app .app-type-info ul.bullet > li:before {width: .5em; height: .5em;}
/* .prod-app .app-type-info span {display: flex; padding-bottom: .2em; gap: .2em;}
.prod-app .app-type-info span i {line-height: 1.3; padding-top: .3em;} */
.prod-app .app-type-info span {display: block;padding-bottom: .5em;}

.prod-app .app-type-info .info-desc {line-height: 1.4; }
.prod-app .app-type-info .info-desc b {padding-bottom: .3em;}

.prod-app.type2 .container {grid-template-columns:1fr; gap: 0;}
.prod-app.type2 .prod-section-title {margin-bottom: 1.4em;}
.prod-app.type2 .wrapper {display: grid; gap :48px; grid-template-columns:1fr 1fr;}
.prod-app.type2 .wrapper .content:first-child {border-right: 1px solid #AFAFAF; padding-right: 44px;}
.prod-app.type2 .wrapper .thumb {height: 662px; width: 585px;}

.prod-app.type3 .container {grid-template-columns:1fr; gap: 0;}
.prod-app.type2 .prod-section-title {margin-bottom: 1.4em;}
.prod-app.type3 .wrapper {grid-template-columns:1fr;display: grid;}
.prod-app.type3 .wrapper .content {display: grid; grid-template-columns: 1fr 480px; gap: 40px; align-items: center;}
.prod-app.type3 .wrapper .content:first-child {border-bottom: 1px solid #AFAFAF;  padding-bottom: 80px;}
.prod-app.type3 .wrapper .content:last-child {padding-top: 80px;}


.prod-app-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.prod-app-list > li {display: flex; flex-direction: column;}
.prod-app-list > li .thumb {border-radius: 20px;}
.prod-app-list > li .content {padding-block: 22px; border-bottom: 1px solid #AFAFAF; height: 100%;}
.prod-app-list > li .content .title {font-size: 20px; font-weight: 500; line-height: 1.3; display: block; margin-bottom: 0.3em;}
.prod-app-list > li .content:not(:has(.desc)) .title {margin-bottom: 0;}
.prod-app-list > li .content .desc {font-size: 17px; line-height: 1.5;}

.prod-feature { background: #F0F0F0;}
.prod-feature .container {display: grid; grid-template-columns:1.3fr 1fr; gap: 70px;}
.prod-feature .thumb {}
.prod-feature .content {}
.prod-feature .content .title {font-size: 40px; font-weight: 700; line-height: 1.25;}
.prod-feature .content .title .prod-name {font-size: 65px; font-weight: 700; display: block; color:#D7D7D7; margin-top: .1em;}
.prod-feature .content .desc {font-size: 17px; padding-top: 58px; display: flex; flex-direction: column; gap: 25px; color:#3C3C3C; line-height: 1.47;}
.prod-feature .content .desc .tit {font-size: 20px; display: block;margin-bottom: .3em;}
.prod-feature .content .bullet > li:before {width: 0.5em; height: 0.5em;}
.prod-feature .content .diagram {--adjust: 100px; margin-left: calc(-1 * var(--adjust)); max-width: calc(100% + var(--adjust)); margin-top: 40px;}


.prod-feature .numbering {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 50px;}
.prod-feature .numbering .cont {display: flex; flex-direction: column; gap:25px;}
.prod-feature .numbering .cont.right {gap: 17px;}
.prod-feature .numbering .item {display: flex;  font-size: 18px; color: #3C3C3C; font-weight: 600; gap: 14px; align-items: center;}
.prod-feature .numbering .item.tag {align-items: flex-start;}
.prod-feature .numbering .txt {line-height: 1.38; font-weight: 600;}
.prod-feature .numbering .txt.tag {transform: translateY(10px);}
.prod-feature .numbering .num {width: 32px; height: 32px; border-radius: 50%; font-weight: 600; background-color:var(--primary-light); color: #fff; font-size: 18px; font-weight: bold; display: flex; justify-content: center; align-items: center; flex-shrink :0;}
.prod-feature .numbering .item.normal .num {background-color: var(--primary);}
/* .prod-feature .numbering .item.normal .txt {color: var(--primary); font-weight: 700;} */
.prod-feature .numbering .item.dark .num {background-color: #003797;}
.prod-feature .numbering .item.dark.point .txt {color: #003797; font-weight: 700;}


.prod-feature .numbering.type2 {grid-template-columns: repeat(1,1fr); gap: 30px; }

.theme-cyan .prod-feature .numbering .item .num {background: #00B7CC;}
.theme-cyan .prod-feature .numbering .item.normal .num {background: #008291;}
.theme-cyan .prod-feature .numbering .item.dark .num {background: #006084;}
.theme-cyan .prod-feature .numbering .item.point .txt {color: #006084; font-weight: 700; }


.divide {width: 100%; height: 1px; background: #AFAFAF; margin-top: 170px;}

@media screen and (max-width: 1399px) {
  .product-intro {padding-bottom: 80px;}
  .product-intro .sp-head {text-align: left;}
  .product-intro-content {grid-template-columns: 1.5fr 1fr;}
  .product-intro-content .thumb {padding-top: 100px; grid-row: 1/3; position: static;}
  .product-intro-content .content .product-name {font-size: 40px;}
  .product-intro-content .content .product-desc {font-size: 16px; padding-top: 30px;}
  .product-intro-content .content .product-desc.bullet {font-size: 16px; }
  .product-intro-content .content .desc-info {margin-top: 100px;}
  .product-intro-content .key-features {margin-top: 30px !important; grid-column: span 2;}
  .product-intro-content .key-features .title {font-size: 25px;}
  .product-intro-content .key-features ul {gap: 10px; grid-template-columns: repeat(2,1fr);}
  .product-intro-content .key-features ul li {flex-direction: column; gap: 6px; align-items: center; background: rgba(255, 255, 255,0.5); border-radius: 10px; padding: 25px 10px }
  .product-intro-content .key-features ul li .content {text-align: center;}
  .product-intro-content .key-features ul li .content .tit {font-size: 17px;}
  .product-intro-content .key-features ul li .content .desc {font-size: 15px;}

  .prod-section {padding-block: 80px 80px;}
  .prod-section-title {font-size: 28px;}
  .prod-section:has(.video-container) {padding-block: 80px;}
  .prod-section:has(.prod-spec) {padding-block: 80px;}

  .prod-type-banner {}
  .prod-type-banner .container {grid-template-columns: 1fr; gap: 0; text-align: center; padding-block: 70px 50px;}
  .prod-type-banner .container .title {font-size: 25px; margin-bottom: 0.3em;}
  .prod-type-banner .container .desc {font-size: 16px;}
  .prod-types-list {padding-top: 50px; gap: 30px; padding-inline: 0;}

  .video-container .overlay .icon {width: 80px;}

  .prod-spec {font-size: 16px;}
  .prod-spec tbody {font-size: 14px;}
  .prod-spec th {width: 200px;}

  .prod-app {padding-block: 60px 80px;}
  .prod-app-list {gap: 10px;}
  .prod-app-list > li .thumb {border-radius: 10px;}
  .prod-app-list > li .content {padding-block: 15px;}
  .prod-app-list > li .content .title {font-size: 16px;}
  .prod-app-list > li .content .desc {font-size: 14px;}
  .prod-app .container {grid-template-columns: 1fr 1.2fr;  gap: 30px;}
  .prod-app .prod-section-title {font-size: 35px; margin-bottom: 0.5em;}
  .prod-app .app-type span {font-size: 26px;}
  .prod-app .app-type small {font-size: 17px;}
  .prod-app .app-type-info {font-size: 15px; padding-top: 25px;}
  .prod-app .app-type-info ul.bullet > li {font-size: 15px;}
  .prod-app .app-type-info span:has(i) {flex-direction: column; gap: 0;} 

  .prod-app.type2 .container {gap: 30px;}
  .prod-app.type2 .wrapper {gap: 20px;}
  .prod-app.type2 .wrapper .thumb {width: 100%; height: 400px;}
  .prod-app.type2 .app-type span {font-size: 23px;}
  .prod-app.type2 .app-type-info span {display: block;}

  .prod-app.type3 .wrapper .content {grid-template-columns: 1fr 1fr;}
  .prod-app.type3 .wrapper .content:first-child {padding-bottom: 30px;}
  .prod-app.type3 .wrapper .content:last-child {padding-top: 30px;}

  .prod-app .app-type-info span {display: block; line-height: 1.4;}
  .prod-app .app-type-info span i {padding-top: 0;}
  
  .prod-feature .container {grid-template-columns: 1fr 1.2fr; gap: 30px;}
  .prod-feature .thumb {width: 100%;}
  .prod-feature .content {padding-left: 0;}
  .prod-feature .content .title {font-size: 24px;}
  .prod-feature .content .title small {font-size: 0.7em;}
  .prod-feature .content .desc {font-size: 16px; padding-top: 22px;}
  .prod-feature .content .desc .tit {font-size: 17px;}
  .prod-feature .content .diagram {--adjust: 60px; margin-top: 20px;}
  .prod-feature .content .title .prod-name {font-size: 41px;}
  .prod-feature .content .bullet {padding-top: 20px; gap: 10px;}
  .prod-feature .content .info-num {gap: 10px; margin-top: 25px;}
  .prod-feature .content .info-num .item .desc {font-size: 15px;}
  .prod-feature .content .info-num .item .num {width: 22px; height: 22px;}
  .divide {margin-top: 100px;}

  .prod-feature .numbering {padding-top: 20px;}
  .prod-feature .numbering .num {width: 22px; height: 22px; font-size: 14px;}
  .prod-feature .numbering .item {font-size: 16px;}

  .prod-feature .numbering.type2 {gap: 15px;}
  
  
  
}
@media screen and (max-width: 767px) {
  .product-intro {padding-bottom: 50px;}
  .product-intro .sp-head {margin-bottom: 20px;}
  .product-intro-content {grid-template-columns: 1fr;}
  .product-intro-content .sp-head {order: 0; text-align: center;}
  .product-intro-content .thumb {margin-bottom: 20px; order: 1; grid-row: auto; grid-column: auto; padding-top: 0;}
  .product-intro-content .thumb img {margin-left: 0; max-width: 240px; margin-inline: auto;}
  .product-intro-content .content {order: 2;}
  .product-intro-content .content .product-name {font-size: 26px;}
  .product-intro-content .content .product-desc {padding-top: 0;}
  .product-intro-content .content .desc-info {margin-top: 40px;display: flex; flex-direction: column;}
  .product-intro-content .content .product-desc.bullet {padding-top: 0px;}
  .product-intro-content .key-features {margin-top: 30px !important; grid-column: span 1; order: 3;}
  .product-intro-content .key-features .title {font-size: 18px;}
  .product-intro-content .key-features ul {grid-template-columns: repeat(1,1fr); gap: 10px;}
  .product-intro-content .key-features ul li {align-items: flex-start; gap: 15px; flex-direction: row; background: #fff; padding: 17px 10px 20px;}
  .product-intro-content .key-features ul li .icon {width: 50px;}
  .product-intro-content .key-features ul li .content {text-align: left;}
  .product-intro-content .key-features ul li .content .tit {font-size: 16px;}
  .product-intro-content .key-features ul li .content .desc {font-size: 14px;}
  .prod-section {padding-block: 60px 70px;}
  .prod-section-title {font-size: 24px;}

  .prod-type-banner .container {padding-block: 50px;}
  .prod-type-banner .container .title {font-size: 20px;}
  .prod-type-banner .container .desc {font-size: 16px;}
  .prod-types-list {padding-top: 20px; padding-inline: 0; grid-template-columns: 1fr; gap: 20px;}
  .prod-types-list .prod-types-item {width: 100%; max-width: 300px; margin-inline: auto;}
  
  .video-container .overlay .icon {width: 50px;}
  
  .prod-spec :where(th, td) {padding: 0.5em 0.7em; font-size: 14px; border-right: 3px solid white;}
  .prod-spec th {width: auto;}
  
  .prod-app .container {grid-template-columns: 1fr; gap:30px}
  .prod-app .prod-section-title {font-size: 26px; margin-bottom: .5em;}
  .prod-app .app-type span {font-size: 23px;}
  .prod-app .app-type-info span {display: block; line-height: 1.3;}
  .prod-app-list {grid-template-columns: repeat(1, 1fr); gap: 20px;}
  .prod-app.type2 .wrapper {grid-template-columns: 1fr;}
  .prod-app.type2 .wrapper .content:first-child {border-right: none; padding-right: 0;}
  .prod-app.type2 .wrapper .thumb {height: auto;}
  .prod-app.type2 .app-type span {line-height: 1.3;}

  .prod-feature .container {gap: 25px; grid-template-columns: 1fr;} 
  .prod-feature .thumb {width: 100%;}
  .prod-feature .content {padding-left: 0;}
  .prod-feature .content .title {font-size: 22px;}
  .prod-feature .content .diagram {--adjust: 50px; margin-top: 20px;}
  .prod-feature .content .title .prod-name {font-size: 34px;}
  .prod-feature .numbering {grid-template-columns: 1fr; gap:10px}
  .prod-feature .numbering .cont {gap: 10px !important;}
  .prod-feature .numbering .item.tag {align-items: center;}

  .prod-feature .numbering .txt.tag {transform: translateY(0px);}
  .prod-app.type3 .wrapper .content {grid-template-columns: 1fr; gap: 30px;}
  .prod-app .app-type-info {padding-top: 11px;}
  
}



/* 제품별 커스텀 */

.s100-clean .product-intro-content .key-features {margin-top: 90px;}
.s100-clean .product-intro-content .thumb {padding-top: 150px; grid-column-start:1;}
.s100-clean .product-intro-content .thumb img {mix-blend-mode: multiply;}

.s100-pro .product-intro-content {grid-template-columns: 710px 1fr;}
.s100-pro .product-intro-content .thumb {grid-column-start:1; padding-top: 150px;}
.s100-pro .product-intro-content .thumb img {mix-blend-mode: multiply;}
.s100-pro .product-intro-content .key-features {margin-top: 90px;}
.s100-pro .product-intro-content .content .desc-info {margin-top: 63px;}
.s100-pro .prod-feature .thumb {margin-top: -40px;}

.s100-ro .product-intro-content {grid-template-columns: 560px 1fr;}
.s100-ro .product-intro-content .key-features {grid-column: span 2;margin-top: 200px; }
.s100-ro .prod-type-banner .container .desc {letter-spacing: -0.025em;}
.s100-ro .prod-feature .container {gap: 47px;}
.s100-ro .prod-app .app-type {min-height: 100px;}

.c100-clean .product-intro-content .thumb {padding-top: 100px; padding-right: 50px;}
.c100-clean .product-intro-content .key-features {margin-top: 120px;}

.c100-clean .prod-feature .container {align-items: center;}

.c100-ro-tank .product-intro-content {grid-template-columns: 1fr 1fr;}
.c100-ro-tank .product-intro-content .thumb {padding-top: 200px;}
.c100-ro-tank .product-intro-content .key-features {margin-top: 70px;}
.c100-ro-tank .product-intro-content .key-features ul li {gap: 17px;}
.c100-ro-tank .product-intro-content .key-features ul li .content .desc {letter-spacing: -0.035em;}
.c100-ro-tank .prod-feature {padding-bottom: 324px;}
.c100-ro-tank .prod-feature .container {display: flex; justify-content: flex-end; position: relative;}
.c100-ro-tank .prod-feature .thumb {position: absolute; width: 1044px; left:0; pointer-events: none;}
.c100-ro-tank .prod-feature .content {margin-left:auto;}
.c100-ro-tank .prod-feature .content .title {letter-spacing: -0.035em;}

.wh-clean .product-intro-content .key-features {grid-column: span 2; margin-top: 200px;}
.wh-clean .product-intro-content .thumb {padding-top: 122px;}

.wh-clean .prod-feature {padding-block:72px 94px  }
.wh-clean .prod-feature .container {grid-template-columns: 1fr; gap: 55px;}
.wh-clean .prod-feature .content {display: grid; grid-template-columns: 310px 1fr; gap: 40px;}
.wh-clean .prod-feature .content .desc-cont {padding-top: 20px;}
.wh-clean .prod-feature .content .txt {letter-spacing: -0.02em; color:#3C3C3C; line-height: 1.47;}
.wh-clean .prod-feature .content .txt.fw--500 {color:#8B8B8B; padding-top: 25px;}

.wh-ro .prod-feature .container {grid-template-columns:775px 1fr; gap: 50px;}
.wh-ro .prod-feature .numbering.type2 {gap: 20px; padding-top: 0;}
.wh-ro .product-intro-content .thumb {padding-top: 150px;}
.wh-ro .number-ls {display: flex; flex-direction: column;}
.wh-ro .number-ls .ls {display: grid;grid-template-columns: 150px 1fr; align-items: flex-start; width: 100%; border-top: 3px solid #C4C4C4; padding-block: 27px 40px; gap: 16px;}
.wh-ro .number-ls .ls:last-child {padding-bottom: 0;}
.wh-ro .number-ls .ls .tit {font-size: 25px; font-weight: 700; color:#0088FF; line-height: 1.3;}
.wh-ro .number-ls .ls.green .tit {color:#009CAE; }
.wh-ro .number-ls .ls.green .item .num {background:#009CAE; }
.wh-ro .number-ls .ls.navy .tit {color:#003797; }
.wh-ro .number-ls .ls.navy .item .num {background:#003797; }
.wh-ro .prod-feature .content {display: flex; align-items: center; gap: 34px; padding-top: 50px;}
.wh-ro .prod-feature .content .txt {line-height: 1.47;}

.t-series .product-intro {background: white; padding-top: 130px; padding-bottom: 0;}
.t-series .product-intro-content {gap: 50px;}
.t-series .product-intro .product-name {margin-bottom: 0.3em; color: black;}
.t-series .product-intro .product-subtitle {font-size: 32px; font-weight: 500; line-height: 1.3; margin-bottom: 1em;}
.t-series .product-intro-content .thumb {padding-top: 0; grid-row: 1 / 2;}
.t-series .product-intro-content .thumb img {border-radius: 20px;}
.t-series .product-intro-content .key-features {margin-top: 0; grid-column: span 2;}
.t-series .product-intro-content .key-features .title {color: inherit;}
.t-series .product-intro-content .key-features ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 0; padding-top: 35px;}
.t-series .product-intro-content .key-features ul li {align-items: center; padding: 0;}
.t-series .product-intro-content .key-features ul li .icon {width: 60px;}
.t-series .product-intro-content .key-features ul li .content {padding-top: 0;}

.t-series .prod-comps {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.t-series .prod-comps-row {display: flex; flex-direction: column;}
.t-series .prod-comps-row .prod-comps-thumb {border-radius: 20px; aspect-ratio: 4 / 3; object-fit: cover;}
.t-series .prod-comps-row .prod-comps-content {padding-block: 20px 0;}
.t-series .prod-comps-row .prod-comps-content .title {font-size: 18px; font-weight: 600; line-height: 1.3; display: block; margin-bottom: 0.3em;}
.t-series .prod-comps-row .prod-comps-content .desc {font-size: 16px; line-height: 1.5; word-break: normal;}

.t-series .prod-comps.type-2 .prod-comps-row {grid-column: span 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: center;}
.t-series .prod-comps.type-2 .prod-comps-row .prod-comps-content {padding-block: 20px;}
.t-series .prod-comps.type-2 .prod-comps-row .prod-comps-content .title {font-size: 20px;}
.t-series .prod-comps.type-2 .prod-comps-row .prod-comps-content .desc {font-size: 16px;}

.t-series .prod-spec thead td {border-top-color: var(--gray-dark); color: inherit; background: white;}

.t-series .easy-to-install {overflow: hidden; border-bottom: none;}
.t-series .easy-to-install .container {border-bottom: 1px solid #afafaf;}
.t-series .easy-to-install .swiper {overflow: visible;}
.t-series .easy-to-install .swiper-slide {}
.t-series .easy-to-install .swiper-slide img {border: 1px solid var(--gray-light); border-radius: 20px; background: white;}
.t-series .easy-to-install .swiper-slide .cont {padding-top: 10px; display: flex; gap: 0.7em;}
.t-series .easy-to-install .swiper-slide .cont .num {font-size: 20px; color: var(--primary-dark); font-weight: 400; line-height: 1.3;}
.t-series .easy-to-install .swiper-slide .cont .desc {display: block; line-height: 1.5;}

.t-series .easy-to-install .controlls {position: relative; display: flex; gap: 20px; margin-top: 20px; align-items: center; padding-top: 20px;}
.t-series .easy-to-install .controlls .button-prev,
.t-series .easy-to-install .controlls .button-next {all: unset; cursor: pointer; color: var(--gray); flex-shrink: 0;}
.t-series .easy-to-install .controlls .button-prev svg,
.t-series .easy-to-install .controlls .button-next svg {width: 50px; height: 50px;}
.t-series .easy-to-install .controlls .pagination {position: relative; top: 0; left: 0; width: 100%; height: 2px;}
.t-series .easy-to-install .controlls .pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--primary-dark);}


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

  .s100-clean .product-intro-content {grid-template-columns: 1.5fr 1fr;}
  .s100-clean .product-intro-content .thumb {padding-top: 70px; grid-column-start: 2;}
  .s100-pro .product-intro-content {grid-template-columns: 1.5fr 1fr;}
  .s100-pro .product-intro-content .thumb {padding-top: 118px; grid-column-start:2;}
  .s100-ro .product-intro-content {grid-template-columns: 1.5fr 1fr;}
  .s100-ro .product-intro-content .key-features ul {grid-template-columns: repeat(2, 1fr);}
  .s100-ro .product-intro-content .thumb {padding-top: 200px;}
  .s100-ro .prod-app .app-type {min-height: 57px;}
  .c100-clean .product-intro-content .key-features ul {grid-template-columns: repeat(2, 1fr);}
  .c100-clean .product-intro-content .thumb {padding-top: 150px; padding-right: 0;}
  .c100-clean .product-intro-content .content .product-desc.bullet {padding-top: 0;}
  .c100-ro-tank .product-intro-content {grid-template-columns: 1.5fr 1fr;}
  .c100-ro-tank .product-intro-content .content .product-desc.bullet {font-size: 14px;}
  .c100-ro-tank .prod-feature {padding-bottom: 80px;}
  .c100-ro-tank .prod-feature .container {flex-direction: column;}
  .c100-ro-tank .prod-feature .content {margin-left: 0;}
  .c100-ro-tank .prod-feature .thumb {position: static; width: 100%;}
  .wh-clean .product-intro-content .key-features ul {grid-template-columns: repeat(2, 1fr);}
  .wh-clean .prod-feature {padding-block:70px;}
  .wh-clean .prod-feature .container {gap: 30px;}
  .wh-clean .prod-feature .content {grid-template-columns: 200px 1fr;}
  .wh-ro .product-intro-content .thumb {padding-top: 180px;}
  .wh-ro .prod-feature .container {grid-template-columns: 1fr;}
  .wh-ro .prod-feature .numbering.type2 {grid-template-columns: repeat(2,1fr);}
  .wh-ro .number-ls .ls .tit {font-size: 21px;}
  .wh-ro .prod-feature .numbering .item {align-items: flex-start;}
  
  .t-series .product-intro {padding-top: 100px;}
  .t-series .product-intro-content {gap: 50px 30px; grid-template-columns: 1.2fr 1fr;}
  .t-series .product-intro .product-subtitle {font-size: 24px;}
  .t-series .prod-comps {grid-template-columns: repeat(2, 1fr);}
  .t-series .easy-to-install .controlls {margin-top: 0;}
  .t-series .easy-to-install .controlls .button-prev svg, .t-series .easy-to-install .controlls .button-next svg {width: 40px; height: 40px;}
  .s100-pro .prod-feature .thumb {margin-top: 0;}

  .c100-ro-tank .prod-feature .numbering .txt.tag {transform: translateY(0px);}
  .c100-ro-tank .prod-feature .numbering .cont {gap: 16px;}

  .prod-section-content .noti {font-size: 14px;}
}

@media screen and (max-width: 767px) {
  .s100-clean .product-intro-content {grid-template-columns: 1fr;}
  .s100-clean .product-intro-content .thumb {padding-top: 0; grid-column-start: 1;}
  .s100-pro .product-intro-content {grid-template-columns: 1fr;}
  .s100-pro .product-intro-content .thumb {grid-row: auto; grid-column: auto; padding-top: 0;}
  .s100-pro .product-intro-content .thumb img {position: static; transform: none; width: 100%;}
  .s100-pro .product-intro-content .key-features {grid-column: span 1;}
  .s100-pro .product-intro-content .key-features ul {grid-template-columns: repeat(1, 1fr);}
  .s100-ro .product-intro-content .key-features {grid-column: span 1;}
  .s100-ro .product-intro-content .key-features ul {grid-template-columns: repeat(1,1fr);}
  .s100-ro .product-intro-content .thumb {padding-top: 0; }
  .s100-ro .product-intro-content {grid-template-columns: 1fr ;}
  .c100-clean .product-intro-content {grid-template-columns: 1fr;}
  .c100-clean .product-intro-content .thumb {grid-row: auto; grid-column: auto; padding-top: 0;}
  .c100-clean .product-intro-content .thumb img {position: static; transform: none; width: 100%; margin:0 auto;}
  .c100-clean .product-intro-content .key-features {grid-column: span 1; margin-top: 30px;}
  .c100-clean .product-intro-content .key-features ul {grid-template-columns: repeat(1, 1fr);}
  .c100-clean .prod-app .container {grid-template-columns:1fr; gap: 25px;}
  .c100-ro-tank .product-intro-content {grid-template-columns: 1fr;}
  .c100-ro-tank .product-intro-content .thumb {padding-top: 0;}
  .c100-ro-tank .prod-app .container {grid-template-columns: 1fr;}
  .wh-clean .product-intro-content {grid-template-columns: 1fr;}
  .wh-clean .product-intro-content .thumb {grid-row: auto; grid-column: auto; padding-top: 0;}
  .wh-clean .product-intro-content .thumb img {position: static; transform: none; width: 100%;}
  .wh-clean .product-intro-content .key-features {grid-column: span 1;}
  .wh-clean .product-intro-content .key-features ul {grid-template-columns: repeat(1, 1fr);}
  .wh-ro .product-intro-content .thumb {padding-top: 0;}
  .t-series .product-intro {padding-top: 80px;}
  .t-series .product-intro-content {gap: 30px; grid-template-columns: repeat(1, 1fr);}
  .t-series .product-intro-content .thumb img {max-width: 100%;}
  .t-series .product-intro-content .key-features {grid-column: span 1;}
  .t-series .product-intro-content .key-features ul {grid-template-columns: repeat(2, 1fr); padding-top: 20px; gap: 5px;}
  .t-series .product-intro-content .key-features ul li {flex-direction: column; padding: 20px; border: 1px solid var(--gray-light); border-radius: 10px; text-align: center; gap: 10px;}
  .t-series .product-intro-content .key-features ul li .icon {width: 50px;}
  .t-series .prod-comps {grid-template-columns: repeat(1, 1fr);}
  .s100-ro .prod-app .app-type {min-height: 0px;}
  .wh-clean .prod-feature .content {grid-template-columns: 1fr; gap: 14px;}
  .wh-clean .prod-feature .content .desc-cont {padding-top: 0;}
  .wh-ro .number-ls .ls {grid-template-columns: 1fr; padding-block: 20px;}
  .wh-ro .prod-feature .numbering.type2 {grid-template-columns:1fr; gap: 15px;}
  .wh-ro .prod-feature .content {flex-direction: column; gap: 15px;}
  .wh-ro .prod-feature .container {gap: 26px;}
}
@media screen and (max-width: 499px) {}






/* application */
.bg-sky {background: #EEF1F2;}
.app-field-btn {display: flex; gap: 30px; padding-block: 63px 83px;;}
.app-field-btn .item {width: 380px; display: flex; flex-direction: column; gap: 10px; cursor:pointer; height: 100%;}
.app-field-btn .item .btn {font-size: 25px; padding: .6em; border-radius: 50px; border:3px solid #AFAFAF; color:#fff; background: #AFAFAF; text-transform: uppercase; line-height: 1; width: 100%; transition: .2s ease;}
.app-field-btn .item .ls {}
.app-field-btn .item .ls > li {font-size: 20px; color:#8B8B8B; padding: 1em; text-align: center; border-bottom: 1px solid #AFAFAF; transition: .2s ease;}
.app-field-btn .item.active .ls > li {color:#5F5F5F;font-weight: 600;}
.app-field-btn .item.active .btn {background: var(--primary); border:3px solid #fff; font-weight:700; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);}
.app-field-btn .item.primary.active .btn {background: var(--primary); }
.app-field-btn .item.green.active .btn {background: #008F9F; }
.app-field-btn .item.sky.active .btn {background: #00B1FF; }


.app-field-btn.bot {padding-block: 200px 0;}

.app-content {}
.app-content .content {display: none;}
.app-content .content .item {display: grid; grid-template-columns: 631px 1fr; gap:90px; padding-block: 138px 55px;}
.app-content .content .item:last-child {padding-bottom: 0;}
.app-content .content .item:not(:last-child) {border-bottom: 1px solid #AFAFAF;}
.app-content .content .item .thumb {width: 100%;}
.app-content .content .item .text-cont {}
.app-content .content .item .sbj {font-size: 45px;  font-weight: 700; color:#262626; padding-bottom: .5em; line-height: 1.2;}
.app-content .content .item .model {font-size: 20px;}
.app-content .content .item .model span {display: block;}
.app-content .content .item .info {padding-top: 66px;}
.app-content .content .item .info .row:not(:last-child) {padding-bottom: 20px;}
.app-content .content .item .info .row .tit {font-size: 20px; font-weight: 700; color:var(--primary-light); display: block; line-height: 1.4;  padding-bottom: .2em;}
.app-content .content .item .info .row .desc {line-height: 1.47; display: block;}
.app-content .content .item .info .row .bullet {padding-top: .2em;}
.app-content .content .item .info .row .bullet li {padding-bottom: .3em; line-height: 1.47;}
.app-content .content .item .info .row .bullet li:before {width: 0.5em; height: 0.5em;}
.app-content .content.green .item .info .row .tit {color:#00B7CC; }
.app-content .content.sky .item .info .row .tit {color:#00B1FF; }
.app-content .content.active {display: block;}


@media (hover:hover) {
  .app-field-btn .item.primary:hover .btn {background: var(--primary); }
  .app-field-btn .item.green:hover .btn {background: #008F9F; }
  .app-field-btn .item.sky:hover .btn {background: #00B1FF; }
  .app-field-btn .item:hover .btn {border:3px solid #fff;  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);}
  .app-field-btn .item:hover .ls > li {color:#505050;}
}


@media screen and (max-width: 1399px) {
  .app-field-btn {gap: 13px;}
  .app-field-btn .item {width: 100%;}
  .app-field-btn .item .btn {font-size: 18px; line-height: 1.3; padding: .5em 1.5em;}
  .app-field-btn .item .ls > li {font-size: 15px; padding: .5em 1em; line-height: 1.3;}
  .app-content .content .item {grid-template-columns: 1fr 1.1fr; padding-block: 80px 50px; gap: 28px;}
  .app-content .content .item .sbj {font-size: 32px;}
  .app-content .content .item .model {font-size: 17px; line-height: 1.4;}
  .app-content .content .item .info {padding-top: 20px;}
  .app-content .content .item .info .row .tit {font-size: 17px;}
  .app-content .content .item .info .row .desc {font-size: 15px;}
}

@media screen and (max-width: 767px) {
  .app-field-btn {flex-direction: column; padding-block: 40px; gap: 0;}
  .app-field-btn .item {height: 100%;}
  .app-field-btn .item .ls {height: 0; overflow: hidden; transition: height .3s ease, opacity .2s ease; opacity: 0;}
  .app-field-btn .item.active .ls {height:150px; overflow: visible; opacity: 1;}
  .app-field-btn .item:last-child.active .ls {height:70px; overflow: visible;}
  .app-content .content .item {grid-template-columns: 1fr; padding-block: 50px;}
  .app-content .content .item .sbj {font-size: 27px;}
  .app-content .content .item .model {font-size: 16px; line-height: 1.5;}
  .app-content .content .item .info .row:not(:last-child) {padding-bottom: 14px;}
}







/* Temp */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}