@charset "utf-8";

:root {
  --container-width: 1200px;
}

.intro-hero {position: relative; padding-block: 208px 143px;}
.intro-hero .intro-hero-bg {position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.intro-hero .intro-hero-title {font-size: 60px; font-weight: 500; color:#fff; font-family: var(--ff-secondary); text-transform: uppercase;}

.intro-hero .subpage_intro__lnb {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px);  z-index: 100;border-top: 1px solid rgb(242, 242, 242,0.2);  color:#fff;}
.intro-hero .subpage_intro__lnb .container {display: flex;height: 46px; }
.intro-hero .subpage_intro__lnb .cmp-lnb__home_btn {display: flex;align-items: center;justify-content: center;width: 46px;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: 14px; font-weight: 600; 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: #fff;margin-left: 20px;flex-shrink: 0;  transition: .2s ease;}
.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;}
.intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cmp-lnb-ls .depth-btn {font-size: 14px; padding: 0.5em ; display: block;}


@media (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) {
  .cmp-lnb__dropdown .cur {padding: 0 15px;}
  .cmp-lnb__dropdown.all-prod {display: none;}
  .cmp-lnb__dropdown .cmp-lnb-ls {padding: 10px;}
  .intro-hero {padding-block: 150px 100px;}
  .intro-hero .intro-hero-title {font-size: 40px;}
  
}

@media screen and (max-width: 767px) {
  .intro-hero {padding-block: 120px 60px;}
  .intro-hero .subpage_intro__lnb {position: fixed; display: none;}
  .intro-hero .subpage_intro__lnb .container {height: 36px;}
  .intro-hero .subpage_intro__lnb .cmp-lnb__home_btn {height: 35px; width: 35px; }
  .intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cur {font-size: 13px; line-height: 1.3; padding: 0 14px;}
  .intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cur .icon {width: 15px; height: 15px;}
  .intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cmp-lnb-ls {padding: 7px 5px; position: absolute; bottom: 100%;}
  .intro-hero .subpage_intro__lnb .cmp-lnb__dropdown .cmp-lnb-ls .depth-btn {font-size: 13px;}
  .intro-hero .subpage_intro__lnb .container {max-width: calc(100% - 20px) !important;}
}




/* common */

.sp-content {padding-block: 170px 200px; }
.sp-head {padding-bottom: 80px;}
.sp-label {font-size: 28px; font-weight: 500; color:#1C54FB; font-family: var(--ff-secondary); line-height: 1.3; text-transform: uppercase;}
.sp-title {font-size: 58px; font-weight: 700;}
.sp-desc {font-size: 18px; padding-top: 20px; display: block;}
.head-banner {padding: 70px; color:#fff;; position: relative; min-height: 390px; z-index: 1;}
.head-banner .bg {position: absolute;top:0; left:0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.head-banner .banner-tit {font-size: 30px; font-weight: 700; }
.head-banner .banner-desc {font-size: 18px; font-weight: 500; padding-top: 22px; display: block; line-height: 1.8;}

.sp-section {padding-block: 80px;}
.hori-layout {display: grid; grid-template-columns: 274px 1fr;}
.bg-gray {background: #F9F9F9;}
.bg-white {background: #fff;}

.data-down-ls {display: flex; padding-top: 30px; gap: 10px; justify-content: flex-end;}
.down-btn {border-radius: 50px; background: rgba(249, 249, 249,0.3);  display: flex; align-items: center; justify-content: center; padding: 0.5em 1.5em; gap: 10px; backdrop-filter: blur(10px);}
.down-btn .txt {font-size: 18px;color:#fff; font-weight: 500;;}
.down-btn .icon {}


.down-btn.theme-gray {background: #F9F9F9; }
.down-btn.theme-gray .txt {color:#000;}
.down-btn.theme-gray svg line {stroke: #000;}
.down-btn.theme-gray svg path {stroke: #000;}


.mo-scroll {overflow:auto hidden;}
.mo-scroll table {min-width: 720px;}



@media (hover: hover) {
  .down-btn:hover {background: #fff; color:#0033CB;}
  .down-btn:hover .txt {color:#0033CB; }
  .down-btn:hover svg line {stroke: #0033CB;}
  .down-btn:hover svg path {stroke: #0033CB;}

  .down-btn.theme-gray:hover {background: #0033CB; color: white;}
  .down-btn.theme-gray:hover .txt {color:#fff;}
  .down-btn.theme-gray:hover svg line {stroke: #fff;}
  .down-btn.theme-gray:hover svg path {stroke: #fff;}
}

@media screen and (max-width:1399px) {
  .sp-content {padding-block: 80px;}
  .sp-label {font-size: 24px;}
  .sp-title {font-size: 40px;}
  .sp-desc {font-size: 17px;}
  .sp-head {padding-bottom: 50px;}

  .head-banner {padding: 40px;min-height: 290px;}
  .head-banner .banner-tit {font-size: 24px;}

  .sp-section {padding-block: 50px;}
  .hori-layout {grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px;}
  .hori-layout:last-child {margin-bottom: 0;}
  .data-down-ls {flex-direction: column; }
  .down-btn .txt {font-size: 16px;}
}
@media screen and (max-width:767px) {
  .sp-content {padding-block: 50px 80px;}
  .sp-label {font-size: 18px;}
  .sp-title {font-size: 30px;}
  .sp-desc {font-size: 16px;}
  .head-banner {padding: 20px 14px;}
  .head-banner .banner-tit {font-size: 20px;}
  .head-banner .banner-desc {font-size: 16px; word-break: keep-all;}
}



/* esg */

.esg-thumb {border-radius: 15px; margin-top: 60px;}
.esg-content {}
.esg-content .arr {grid-column: 2}
.esg-content .esg-title { font-weight: 500; padding: 1em 1.5em; display: flex; align-items: center; justify-content: center; font-size: 24px; background:var(--esg) ; color:#fff; border-radius: 10px;}
.esg-content .arrow-icon svg {display: block; margin:  -30px auto 30px;}


.esg-content .cont-title {font-size: 30px; font-weight: 700; color:#1A46C7; line-height: 1.33;}
.esg-content .esg-ls {display: flex; gap: 25px; width: 100%; min-height: 337px;}
.esg-content .esg-ls .item {display: flex; flex-direction: column; align-items: center; border-radius: 15px; border:2px solid #DCDCDC; width: 100%; padding: 39px 20px; }
.esg-content .esg-ls .item .icon {margin-bottom: 20px; }

.esg-content .esg-ls .item .tit {font-size: 16px; font-weight: 500;color:#909090; text-align: center; text-transform: uppercase;}
.esg-content .esg-ls .item .tit-ko {font-size: 20px; font-weight: 700; color:#000; display: block;}
.esg-content .esg-ls .item .desc {font-size: 17px; font-weight: 600; text-align: center; line-height: 1.5;padding-top: 20px; word-break: keep-all;}
.esg-content .esg-ls .item .desc b {color:var(--esg)}
.esg-content .content:has(.task-ls) { margin-top: 13px;;}
.esg-content .task-ls {display: flex; gap: 33px ;width: 100%;}
.esg-content .task-ls .item {display: flex; flex-direction: column;  border-radius: 15px; background: #F6F6F6; width: 100%; padding: 28px 10px 28px 23px;}
.esg-content .task-ls .item .ls {display: flex; flex-direction: column; gap: 11px;}
.esg-content .task-ls .item .ls > li {display: flex; gap: 9px;}
.esg-content .task-ls .item .ls > li .bullet {width: 5px; height: 5px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: .4rem;}
.esg-content .task-ls .item .ls > li .desc {font-size: 13.5px;line-height: 1.52; color:#000; word-break: keep-all; letter-spacing: -0.02em;}
.esg-content .task-ls .item .ls > li .desc-sml {font-size: 15px; display: flex; flex-direction: column; color:#333; font-weight: 400; padding-top: 10px;}
.esg-content .task-ls .item .ls > li .desc-sml span {display: flex; letter-spacing: -0.003em;font-size: 15px; word-break: keep-all;}

.esg-content .esg-cert-ls {display: flex; gap: 28px;}
.esg-content .esg-cert-ls .item {display: flex; flex-direction: column; gap:19px ; align-items: center;}
.esg-content .esg-cert-ls .item .thumb {box-shadow: 20px 20px 20px rgba(0,0,0,0.05);}
.esg-content .esg-cert-ls .item .thumb img {display: block;}
.esg-content .esg-cert-ls .item .txt {font-size: 17px;}


.esg-content .declaration {}
.esg-content .declaration .desc-cont {}
.esg-content .declaration .desc-cont .desc {font-size: 18px; line-height: 1.7;}
#safety-management .declaration .desc .moView{display: none;}
.esg-content .declaration .desc-cont .ls  {display: flex; flex-direction: column; padding-top: 20px;}
.esg-content .declaration .desc-cont .ls .item {display: flex; gap: 20px; align-items: center; padding-block: 24px; border-bottom: 1px solid #707070;}
.esg-content .declaration .desc-cont .ls .item:last-child {border-bottom: none; padding-bottom: 0;}
.esg-content .declaration .desc-cont .ls .item .num {font-size: 20px; font-weight: 700; color:#fff; border-radius: 50%; background: var(--esg); width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1;}
.esg-content .declaration .desc-cont .ls .item .txt {font-size: 18px;}


.esg-content .down-content {}
.esg-content .down-content .detail-data {display: flex; gap: 20px;}
.esg-content .down-content .detail-data .item {width: 100%; display: flex; flex-direction: column; background: #1C54FB;border-radius: 8px; padding: 36px 20px 21px 20px;position: relative;}
.esg-content .down-content .detail-data .item:nth-child(2) {background: #0033CB;}
.esg-content .down-content .detail-data .item:nth-child(3) {background: #00279B;}
.esg-content .down-content .detail-data .item .tit-ko {font-size: 20px;font-weight: 500; color:#F9F9F9; line-height: 1.1;}
.esg-content .down-content .detail-data .item .tit-en {font-size: 25px;font-weight: 700; color:#fff; line-height: 1.3;}
.esg-content .down-content .detail-data .item .icon-img {position: absolute; top: 20px; right: 20px;  object-fit: cover; }


.esg-content .esg-policy {padding-top: 60px;}
.esg-content .esg-policy-table {width: 100%; border-collapse: collapse; border-top:2px solid #1A46C7; border-bottom:2px solid #707070;}
.esg-content .esg-policy-table tr {border-bottom: 1px solid #707070;}
.esg-content .esg-policy-table th {background: #F9F9F9; font-size: 20px; font-weight: 700; padding: 10px 20px; text-align: left; }
.esg-content .esg-policy-table td {padding: 10px 20px; }
.esg-content .esg-policy-table td:first-of-type {font-weight: 500;}

.esg-content .esg-policy-table .tr-border {border-bottom: 1px solid #ECECEC !important;}



@media screen and (max-width: 1399px) {
  .esg-content .esg-title {font-size: 22px;}
  .esg-content .cont-title {font-size: 20px;}
  .esg-content .esg-ls {gap: 10px; height: auto; min-height: 0;}
  .esg-content .esg-ls .item {padding: 20px 10px;}
  .esg-content .esg-ls .item .tit {font-size: 16px;}
  .esg-content .esg-ls .item .tit-ko {font-size: 18px;}
  .esg-content .esg-ls .item .desc {font-size: 15px;}
  .esg-content .esg-ls .item .icon {width: 60px ;height: 60px; margin-bottom: 10px;}
  .esg-content .task-ls {gap: 10px;}
  .esg-content .task-ls .item {padding: 20px 10px;}
  .esg-content .task-ls .item .ls > li .desc {font-size: 15px;line-height: 1.4;}
  .esg-content .task-ls .item .ls > li .desc-sml {padding-top: 6px;}
  .esg-content .esg-cert-ls {gap: 10px;}
  .esg-content .esg-cert-ls .item .txt {font-size: 13px;}

  .esg-content .arr {grid-column: 1;}
  .hori-layout:has(.esg-content .arr) {margin-bottom: 0;}
  .esg-content .arrow-icon svg {margin-bottom: 0;}
  .esg-content .declaration .desc-cont .desc {font-size: 16px;}
  .esg-content .declaration .desc-cont .ls .item .num {font-size: 17px;}
  .esg-content .down-content .detail-data .item {padding: 20px 16px;}

  .esg-content .down-content .detail-data .item .icon-img {width: 40px; height: 40px; }
  .esg-content .down-content .detail-data .item .tit-en {font-size: 21px;}
  .esg-content .down-content .detail-data .item .tit-ko {font-size: 18px;}

  .esg-content .esg-policy-table th {font-size: 17px;}
  #esg-management .esg-content .declaration .desc-cont .ls .item .txt {font-size: 16px;}



}
@media screen and (max-width: 767px) {
  .esg-content .esg-ls {flex-direction: column;}
  .esg-content .arrow-icon svg {width: 100%;}
  .esg-thumb {margin-top: 30px; border-radius: 5px;}
  .esg-content .esg-title {font-size: 18px; text-align: center; display: block; word-break: keep-all;}
  .esg-content .esg-ls .item .desc {padding-top: 10px;}
  .esg-content .esg-ls .item .icon {width: 80px;height: 60px;}
  .esg-content .task-ls {flex-direction: column;}
  .esg-content .task-ls .item {padding: 24px 20px;}
  .esg-content .esg-cert-ls {gap: 30px 20px; display: grid; grid-template-columns: repeat(2,1fr);}
  .esg-content .esg-cert-ls .item {gap: 5px;}
  .esg-content .arrow-icon {margin-bottom: 10px;}

  .esg-policy-table {font-size: 14px;}
  .esg-policy-table th,
  .esg-policy-table td {padding: 10px;}
  .esg-policy-table .btn-down {padding: 3px 10px; font-size: 12px;}
  .esg-content .down-content .detail-data {flex-direction: column;}

}




#sustainability-report .head-banner {color:#000; border:1px solid #ADB2C4; display: flex; min-height: 320px; padding: 0;}
#sustainability-report .head-banner .wrap { padding: 40px; padding-right: 10px; width: 100%;}
#sustainability-report .head-banner .thumb {width: 612px;  flex-shrink: 0; background: #F9F9F9;display: flex; align-items: center; justify-content: center;}
#sustainability-report .head-banner .banner-tit {color:#1A46C7;}
#sustainability-report .head-banner .banner-desc {padding-top: 8px;}
#sustainability-report .head-banner .data-down-ls {justify-content: flex-start; padding-top: 80px;}
#sustainability-report .head-banner .down-btn {border:1px solid #1A46C7; padding-inline: 1em; }
#sustainability-report .head-banner .down-btn .txt {color:#1A46C7; font-weight: 600;}
#sustainability-report .head-banner .down-btn .icon svg path {stroke:#1A46C7;}
#sustainability-report .head-banner .down-btn .icon svg line {stroke:#1A46C7;}


#sustainability-report .sust-content {}
#sustainability-report .sust-content .thumb {width: 100%; border:1px solid #ADB2C4;}
#sustainability-report .sust-content .gall-ls--v {grid-template-columns: repeat(3,1fr); gap: 60px 30px;}
#sustainability-report .sust-content .gall-ls--v .text-cont {display: flex; align-items: center; justify-content: space-between; margin-top: 18px;}
#sustainability-report .sust-content .gall-ls--v .text-cont .data-down-ls {padding-top: 0;}
#sustainability-report .sust-content .gall-ls--v .text-cont .year {font-size: 18px; font-weight: 700; }



/* Temp */
@media (hover: hover) {
  #sustainability-report .head-banner .down-btn:hover {background: #1A46C7; color:#fff;}
  #sustainability-report .head-banner .down-btn:hover .txt {color:#fff;}
  #sustainability-report .head-banner .down-btn:hover .icon svg path {stroke:#fff;}
  #sustainability-report .head-banner .down-btn:hover .icon svg line {stroke:#fff;}
}
@media screen and (max-width: 1399px) {
  #sustainability-report .head-banner {min-height: 200px;}
  #sustainability-report .head-banner .thumb {width: 50%; }
  #sustainability-report .head-banner .wrap {padding: 30px;}
  #sustainability-report .head-banner .data-down-ls {padding-top: 30px;}
  #sustainability-report .sust-content .thumb {object-fit: cover;}
  #sustainability-report .sust-content .gall-ls--v .text-cont {flex-direction: column; gap: 6px;}
  #sustainability-report .sust-content .gall-ls--v .text-cont .data-down-ls {flex-direction:row;}
  #sustainability-report .sust-content .gall-ls--v .text-cont {margin-top: 11px;}
}
@media screen and (max-width: 767px) {
  #sustainability-report .sust-content .gall-ls--v {grid-template-columns: repeat(1,1fr); gap: 40px;}
  #sustainability-report .head-banner {flex-direction: column; min-height: auto;}
  #sustainability-report .head-banner .wrap {padding: 20px 15px;}
  #sustainability-report .head-banner .thumb {width: 100%; }
}
@media screen and (max-width: 499px) {}




#safety-management {}
#safety-management .desc-hori {grid-column: 2; padding-top: 40px;}
#safety-management .declaration .hori-layout {margin-left: -60px;}
#safety-management .declaration .desc {font-size: 22px; padding-top: .7rem;display: block;}
#safety-management .declaration .content {background: #fff;padding: 60px; border:3px solid #A0C6E3;}
#safety-management .esg-content .declaration .desc-cont .ls .item {padding-block: 15px;}
#safety-management .esg-content .declaration .desc-cont .ls .item:last-child {padding-bottom: 0px;}
#safety-management .cont-desc {font-size: 18px; line-height: 1.8; }
#safety-management .target-policy {padding-bottom: 200px;}
#safety-management .target-policy .cont {display: flex;}
#safety-management .target-policy .cont .item {display: flex; flex-direction: column; padding-inline: 30px; border-left: 1px solid #E1E1E1;;width: 100%;}
#safety-management .target-policy .cont .item .icon { margin-bottom: 10px;}
#safety-management .target-policy .cont .item .tit {font-size: 24px; font-weight: 700; line-height: 1.33; margin-bottom: 10px;}
#safety-management .target-policy .cont .item .desc {font-size: 18px; line-height:1.55;}


@media screen and (max-width: 1399px) {
  #safety-management .declaration .hori-layout {margin-left: 0px;}
  #safety-management .declaration .content {padding: 30px;}
  #safety-management .declaration .desc {font-size: 16px;}
  #safety-management .desc-hori {grid-column: 1; grid-template-columns: repeat(2,1fr);display: grid; padding-top: 20px;}
  #safety-management .target-policy .desc-hori {grid-template-columns: repeat(3,1fr); display: grid;}
  #safety-management .esg-content .declaration .desc-cont .ls .item .txt {font-size: 16px;}
  #safety-management .cont-desc {font-size: 16px; line-height: 1.6;}
  #safety-management .target-policy {padding-bottom: 100px;}
  #safety-management .target-policy .cont .item {padding-inline: 20px 0;}
  #safety-management .target-policy .cont .item .desc {font-size: 16px; word-break: keep-all;}
  #safety-management .target-policy .cont .item .tit {font-size: 19px;}
}
@media screen and (max-width: 767px) {
  #safety-management .desc-hori {grid-template-columns: repeat(1,1fr);}
  #safety-management .target-policy .desc-hori {grid-template-columns: repeat(1,1fr);}
}

#cyber-audit-office {}
#cyber-audit-office .content {padding-bottom: 60px;}
#cyber-audit-office .hori-layout-type2 {grid-template-columns:362px 1fr; display: grid;}
#cyber-audit-office .report-it .report .cont-head {position: relative; margin-bottom: 40px;}

#cyber-audit-office .report-it .report .img-mo {display: none;}

#cyber-audit-office .report-it .report .cont-desc {padding-top: 15px; display: block; font-size: 18px;}
#cyber-audit-office .report-it .report .more-link {position: absolute; right:0; bottom:0; padding: .5em 1.5em; background: #004DC1; border-radius: 50px; color:#fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: space-between; width: 153px;}
#cyber-audit-office .report-it .cont-tit-sml {font-size: 20px; font-weight: 700;}
#cyber-audit-office .report-it .how-to {}
#cyber-audit-office .report-it .how-to .how-to-info {border-top:1px solid #000000;}
#cyber-audit-office .report-it .how-to .how-to-info .item {display: flex; align-items: center; padding-block: 10px; border-bottom:1px solid #E1E1E1;}
#cyber-audit-office .report-it .how-to .how-to-info .item .tag {font-size: 17px; display: flex; font-weight: 700; width: 266px; padding-inline: 10px; gap: 15px;}
#cyber-audit-office .report-it .how-to .how-to-info .item .txt {font-size: 17px; }
#cyber-audit-office .report-it .target {padding-bottom: 0;}
#cyber-audit-office .report-it .target .ls {display: grid; grid-template-columns: repeat(3,1fr ); gap: 13px;}
#cyber-audit-office .report-it .target .ls .item {display: flex; align-items: center; gap: 10px; border:1px solid #E1E1E1; padding: 15px 15px;font-weight: 700; font-size: 17px;}
#cyber-audit-office .report-it .target .ls .item .num {color:#004DC1;}
#cyber-audit-office .report-it .target .ls .item .txt {}



.principle {padding-bottom: 200px;}
.principle .ls {display: flex; flex-direction: column;}
.principle .ls .item {display: flex; gap: 20px;}
.principle .ls .item .tit {font-weight: 700; width: 266px; flex-shrink: 0; border-top: 1px solid #000000; padding-block: 15px; font-size: 20px;}
.principle .ls .item .tit .num {color:#004DC1; padding-right: 10px;}
.principle .ls .item .tit .txt {}
.principle .ls .item .desc {border-top: 1px solid #E1E1E1; padding-block: 15px; line-height: 1.64; width: 100%;}

@media screen and (max-width: 1399px) {
  #cyber-audit-office .hori-layout-type2 {grid-template-columns: repeat(1,1fr); gap: 10px;}
  #cyber-audit-office .content {padding-bottom: 40px;}
  #cyber-audit-office .report-it .target .ls .item {font-size: 15px;}
  #cyber-audit-office .report-it .cont-tit-sml {font-size: 17px;}
  #cyber-audit-office .report-it .how-to .how-to-info .item .txt {font-size: 15px;}
  .principle {padding-bottom: 100px;}
  .principle .ls .item .tit {font-size: 18px; width: 228px; }
  .principle .ls .item .desc {word-break: keep-all;font-size: 15px; word-break: keep-all;}
}
@media screen and (max-width: 767px) {
  #cyber-audit-office .head-banner .bg {filter: brightness(0.7);}
  #cyber-audit-office .report-it .report .cont-desc {font-size: 16px;}
  #cyber-audit-office .report-it .report .more-link {position: static; margin-top: 20px; width: 100%;}
  #cyber-audit-office .report-it .how-to .how-to-info .item .tag {width: 100px; gap: 10px; font-size: 15px; align-items: center; padding-right: 0; flex-shrink: 0;}
  #cyber-audit-office .report-it .target .ls {grid-template-columns: repeat(1,1fr);}
  .principle .ls {gap: 10px;}
  .principle .ls .item {flex-direction: column; gap: 0px;}
  .principle .ls .item .tit {width: 100%;}
}

.asung-form .tip {font-size: 16px; font-weight: 700;text-align: right; display: block;}
.asung-form .dd-form {border-top: 1px solid #000000; padding-top: 35px; --inp-height:45px}

.asung-form .dd-form-table .dd-inp .checkbox-group {display: grid; grid-template-columns: repeat(5,1fr); gap: 10px;}
.asung-form .dd-form-table .dd-inp .checkbox-group .checkbox label .label {font-size: 16px; letter-spacing: -0.04em; font-weight: 500;}
.asung-form .dd-form-table .dd-inp .checkbox-group .checkbox label .chck {border-radius: 50%; width: 24px; height: 24px; background: #F1F1F1; display: flex; align-items: center; justify-content: center;}
.asung-form .dd-form-table .dd-inp .checkbox-group .checkbox label .chck::before {width: 12px;height: 12px;border-radius: 50%; background: var(--primary); transform: none;}

.asung-form .dd-inp .inp-box {border-radius: 50px; border:none; background: #F9F9F9;}
.asung-form .dd-inp.content .inp-box{border-radius: 5px;}

.asung-form .dd-file .file-box label .label {border-radius: 50px; border:none; background: #F9F9F9;}
.asung-form .dd-form-table tbody tr :where(th, td) {padding-block:24px}
.asung-form .dd-file {gap: 20px;}
.asung-form .dd-file .file-box label .btn-find {border-radius: 50px; border:none; background: #A4A4A4; color:#fff; min-width: 150px; padding: 1em;}
.asung-form .dd-file .file-box .btn-cancel {background: #A4A4A4; border-radius: 50%;}
.asung-form .dd-file .inp-notice {font-size: 16px; color:#9C9C9C;}
.asung-form .dd-form-indiv-policy {padding-top: 80px; margin-top: 80px; border-top:1px solid #C9C9C9;}
.asung-form .dd-form-indiv-policy .content {height: 380px; background: #fff; border-radius:5px; color:#707070; }

.asung-form .dd-form-indiv-policy .title {color:#000; font-size: 22px;}
.asung-form .dd-form-indiv-policy .dd-inp .checkbox-group {font-size: 16px;}
.asung-form .noti {font-size: 16px; color:#9C9C9C; line-height: 1.7;padding-top: 10px; letter-spacing: -0.04em;}
.asung-form .dd-form .submit-button {background: #1A46C7; border-radius: 50px; padding:.5em 2em;}
.asung-form .dd-form .label .title {display: flex; align-items: center; justify-content: space-between; min-width: 65px;}

.asung-form .dd-inp .inp-box textarea {white-space: pre-line;}
.asung-form .dd-inp .inp-box textarea::placeholder {font-size: 16px;}


@media screen and (max-width: 1399px) {
  .asung-form .dd-form {padding-top: 30px;}
  .asung-form .dd-form-table .dd-inp .checkbox-group {grid-template-columns: repeat(3,1fr);}
  .asung-form .dd-form-table .dd-inp .checkbox-group .checkbox label .label {font-size: 15px;}
  .asung-form .dd-form .label .title {min-width: 57px;}
}
@media screen and (max-width: 767px) {
  .asung-form .dd-form-indiv-policy .dd-inp .checkbox-group .checkbox label .label {font-size: 15px;}
  .asung-form .dd-form-indiv-policy .dd-inp {justify-content: flex-start;}
  .asung-form .dd-form-indiv-policy .dd-inp .checkbox-group {align-items: flex-start;}
  .asung-form .dd-form {margin-top: 0px; padding-top: 0;}
  .asung-form .dd-form-table tbody tr :where(th, td) {padding-block: 10px 0;}
  .asung-form .dd-form-table .dd-inp .checkbox-group {grid-template-columns: repeat(2,1fr); gap: 0;}
  .asung-form .dd-form-table .dd-inp .checkbox-group .checkbox label {gap: .3em;}
  .asung-form .dd-form-table .dd-inp .checkbox-group .checkbox label .chck {width: 15px; height: 15px;}
  .asung-form .dd-form-table .dd-inp .checkbox-group .checkbox label .chck::before {width: 7px; height: 7px;}
  .asung-form .dd-form-table .dd-inp .checkbox-group .checkbox label .label {font-size: 14px;}
  .asung-form .dd-file .file-box label .btn-find {min-width: 100px;}
  .asung-form .dd-file .inp-notice {font-size: 13px;}
  .asung-form .dd-form-indiv-policy {padding-top: 40px; margin-top: 40px;}
  .asung-form .noti {font-size: 13px;}
  .asung-form .dd-file .file-box input[type="file"] {display: none;}
}


.divide {width: 100%; height: 1px; background: rgba(0, 0, 0,0.5); margin-block: 30px;}

#visit-request .asung-form .dd-form-table .dd-inp .checkbox-group.type2 {grid-template-columns: repeat(8,1fr);}
#visit-request .asung-form .dd-inp .inp-box:has(textarea) {height: 160px;}
#visit-request .asung-form .dd-inp .inp-box input[type=date] {color :#9C9C9C; width: auto;}
#visit-request .asung-form .dd-inp .inp-box input[type="date"]::-webkit-calendar-picker-indicator {filter: brightness(0) saturate(100%) invert(61) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(50%) contrast(89%);}
#visit-request .asung-form .dd-form-table tbody tr :where(th, td) {padding-block:15px;}
#visit-request .asung-form .dd-form-table tbody tr :where(th, td) .section-title{text-align: left; color: #1C54FB; font-size: 24px;}

/* flatpickr 모바일 input 숨기기 */
.flatpickr-mobile {
  display: none !important;
}

#visit-request-info .asung-form .dd-form {border-top: none; padding-top: 0;}
#visit-request-info .asung-form .dd-form-indiv-policy {border:none;}
#visit-request-info .visit-info {padding-bottom: 40px;}
#visit-request-info .visit-info-label {font-size: 30px; font-weight: 700; color:#1A46C7; padding-bottom: 40px; display: block;}
#visit-request-info .security ul {display: flex; flex-direction: column; gap: 6px;}
#visit-request-info .notice .content {height: 190px; overflow: hidden;}
#visit-request-info .security .content {height: 480px; overflow: hidden;}
#visit-request-info .notice ul {display: flex; flex-direction: column; gap: 6px;}
#visit-request-info .notice ul .fc-red {color:#FF0000;}
#visit-request-info .notice ul .fc-blue {color:#0023FE;}
#visit-request-info .notice ul li {line-height: 1.7;}
#visit-request-info .asung-form .dd-form-indiv-policy .title {font-size: 26px;}
#visit-request-info .asung-form .dd-form .cancel-button {font-size: 20px; font-weight: 700; color: white; background: #707070; padding: 0.5em 1.5em; border-radius: 50px;}  
#visit-request-info .asung-form .dd-form-foot {padding-top: 80px;}

.indiv-doc .red{color: red; font-weight: bold;}


@media screen and (max-width: 1399px) {
  #visit-request-info .visit-info {padding-bottom: 0;}
  #visit-request-info .asung-form .dd-form-indiv-policy .title {font-size: 22px;}
  #visit-request-info .visit-info-label {font-size: 24px; padding-bottom: 20px;}
  #visit-request-info .asung-form .dd-form .cancel-button {width: 100%;}
  #visit-request-info .asung-form .dd-form .button {width: 100%; max-width: 200px; text-align: center; font-size: 15px;}
  #visit-request-info .asung-form .dd-form-foot {margin: 0 auto;}
    #visit-request .asung-form .dd-form-table .dd-inp .checkbox-group.type2 {grid-template-columns: repeat(6,1fr);}
}
@media screen and (max-width: 767px) {
  #visit-request-info .visit-info-label {font-size: 18px; }
  #visit-request-info .asung-form .dd-form-indiv-policy .title {font-size: 20px;}
  #visit-request-info .asung-form .dd-form-indiv-policy .dd-inp .checkbox-group .checkbox label .label {font-size: 13px;}
  #visit-request-info .asung-form .dd-form-foot {flex-direction: column; gap: 5px;}
  #visit-request-info .asung-form .dd-form .button {width: 100%; max-width: 100%;} 
  #visit-request-info .asung-form .dd-form-indiv-policy .checks {padding-top: 10px;}
  #visit-request-info .asung-form .dd-inp .checkbox-group .checkbox label {gap: 0.3em;}
  #visit-request .asung-form .dd-form-table tbody tr :where(th, td) {padding-block: 10px 0;}
  .divide {margin-block: 0px;}
  /* .asung-form .dd-form {--inp-height: 35px;} */
  #calendar-icon {display: none;}
  #visit-request .asung-form .dd-form-table .dd-inp .checkbox-group.type2{grid-template-columns: repeat(4, 1fr);}
}

#esg-management .esg-data {
  .tr-border {border-bottom: 2px solid #B5B5B5 !important;}
  table {border-top: none !important;; width: 100%; border-left: none !important; border-right: none !important;}
  table tr {border-bottom: 1px solid #efefef !important; border-left: none !important;}
  table th {text-align: center; border-right: 1px solid #efefef; border-left: none !important; font-size: 16px; border-bottom: 2px solid #1A46C7 !important; font-weight: 700; border-top: none !important;}
  table th:nth-child(2){text-align: right !important;}
  table th:nth-child(3){text-align: right !important;}
  table th:nth-child(4){text-align: right !important;}
  table td {text-align: center; font-size: 14px; border-left: none;}
  table td br{display: none;}
  table th:last-child {border-right: none !important;}
  table tbody tr:last-child td {border-bottom: 2px solid #707070;}
  table tbody tr td:last-child {border-right:none !important;}
}



/* 공용 */
.tab-nav{display: grid; grid-template-columns: repeat(3, 1fr); text-align: center;}
.tab-nav span{border: 1px solid #DEDEDE; font-size: 17px; color: #ADB2C4; padding: 12px 0; line-height: 1.18; cursor: pointer;}
.tab-nav span:nth-child(2){border-left: none; border-right: none;}
.tab-nav .active{background-color: var(--primary-dark); color: #fff; font-weight: 700; border-color: var(--primary-dark);}

/* ----------------------- company ----------------------- */
/* overview */
#overview .sp-head{padding-bottom: 100px;}
.overview{display: grid; grid-template-columns: 269px 1fr; padding: 0 0 80px; gap: 7px;}
.overview p{font-size: 18px; line-height: 1.66;}
.overview p span{font-weight: bold;}
.overview .title{color: var(--primary-dark); font-size: 35px; font-weight: 700; line-height: 1.37;}
.overview div p:nth-child(2){margin: 20px 0;}
.overview .flex{margin: 60px 0 0;}
.overview .flex div:first-child{padding: 27px 0 0;}
.overview .flex div:nth-child(2){padding: 69px 25px 0;}

.partner{background-color: #F7F7F7;}
.partner .container{padding: 58px 0; gap: 58px; width: 100%; max-width: 1400px;}
.main-visual.swiper2 .swiper-slide{justify-content: center; align-items: center; display: flex;}
.my-prev{background: url(../images/company/prev.png) no-repeat center; background-size: cover; max-width: 42px; width: 100%; height: 42px; font-size: 0;}
.my-next{background: url(../images/company/prev.png) no-repeat center; background-size: cover; max-width: 42px; width: 100%; height: 42px; font-size: 0; transform: rotate(-180deg);}

/* greetings */
#greetings .sp-head{padding-bottom: 100px;}
.greetings{word-break: keep-all;}
.greetings>.flex{gap: 43px; align-items: flex-start;}
.greetings .left p{font-size: 18px; line-height: 1.6;}
.greetings .left>p:first-child{color: #707070; font-weight: 500; font-size: 25px; line-height: 2; margin: 0 0 24px;}
.greetings .left p:first-child span{color: #1C54FB; font-weight: 700; font-size: 34px; display: block; line-height: 1.47;}
.greetings .left p:nth-child(3){margin: 12px 0;}
.greetings .left strong{font-size: 1.125em; line-height: 1.66;}
.greetings .left p:nth-child(5){margin: 12px 0 19px;}
.greetings .left .flex{gap: 9px; justify-content: flex-end; padding: 0 20px 0 0;}
.greetings .left .flex p{font-size: 22px;}
.greetings .left .flex strong{font-size: 22px;}

/* history */
#history .sp-head{padding-bottom: 100px;}
.history>div:first-child{background: url(../images/company/history1.png) no-repeat center; background-size: cover;}
.history>div:last-child{background: url(../images/company/history2.png) no-repeat center; background-size: cover;}
.history>div:last-child ul{padding: 81px 0 194px 24px;}
.history .container{gap: 212px;}
#history .left{width: 382px;}
.history .left p:first-child{font-size: 30px; font-weight: 700; color: #509CFF; margin: 74px 0 17px;}
.history .left p:last-child{font-size: 45px; font-weight: 700; color: #fff;}
.history .container:nth-child(2) .left p:last-child{color: #000;}
.history ul{flex-direction: column; border-left: 1px solid #C7C7C7; padding: 75px 0 75px 24px;}
.history .right{color: #fff;}
.history .right .flex{gap: 68px; align-items: flex-start;}
.history .right li{margin: 0 0 28px; position: relative;}
.history .right li::before{content: ''; width: 12px; height: 12px; background-color: #509CFF; position: absolute; left: -30px; top: 9px; border-radius: 100%;}
.history .right p{font-weight: 500; font-size: 1.875em; color: #7D7D7D; line-height: 1; width: 74px;}
.history .right p span{color: #ACACAC;}
.history .right .flex div p{color: #fff; font-size: 1.0625em; width: inherit; line-height: 1.8;}
.history>.flex ul{padding: 60px 0 68px 24px;}
.history>.flex .right .flex div p{color: #000000;}


/* chart */
#chart .sp-head{padding-bottom: 89px;}
.chart section{background-color: #F9F9F9; padding-block: 100px 200px;}
.chart section p{font-size: 30px; font-weight: bold;}
.chart section img{margin: auto;}
.chart .img-box img{max-width: 100%;}
.chart .chart1-mo{display: none;}
.chart .chart2-mo{display: none;}

/* ----------------------- product ----------------------- */
.pdb200{padding-bottom: 200px;}
.pdb200 .recruit-mo{display: none;}

.product-title{color: var(--secondary); font-size: 1.875em; letter-spacing: -0.01em; line-height: 1;}
.product-sub-title{font-size: 1.125em; letter-spacing: -0.01em; line-height: 1.67; margin: 18px 0 90px;}
.introduce{gap: 105px; margin: 100px 0 80px;}
.introduce p{font-size: 2.5em; font-weight: 700; line-height: 1.35;}
.introduce li{padding: 0 0 0 20px; position: relative; line-height: 1.2; margin: 0 0 20px; font-size: 1.125em;}
.introduce li::before{content: ''; background-color: #D1D1D1; width: 6px; height: 6px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100%;}
.introduce li:last-child{margin: 0;}
.introduce.ver2{border-top: 3px solid #D9D9D9; padding: 30px 0 0; margin: 100px 0 60px;}

/* module */
#module .sp-head{padding-bottom: 40px;}
#square strong{color: #1C54FB; font-size: 1.875em;}
#square .cont{display: flex; flex-direction: column; gap: 60px;}
#square .cont .flex{gap: 26.5px; white-space: nowrap; border-top: 3px solid #D9D9D9;}
#square .cont ul{margin: 22px 0 0;}
#square .cont li{font-size: 1em; margin: 0 0 14px; padding: 0 0 0 16px; position: relative; line-height: 1.2;}
#square .cont li::before{content: ''; background-color: #D1D1D1; width: 6px; height: 6px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100%;}
#square .cont .flex div:first-child{padding: 30px 0 0; max-width: 373px; width: 100%;}
#square .cont .flex div:last-child{background-color: #F9F9F9; width: 100%; padding-block: 60px;}
#square .cont .flex div:last-child img{margin: auto; max-width: 90%;}
.module .img-box img{margin: auto;}
.module #cylinder .introduce{gap: 61px;}
.module #pouch .introduce{gap: 28px;}

/* car */

#car .sp-head{padding-bottom: 40px;}
.car .tab-nav{grid-template-columns: repeat(2, 1fr);}
.car .tab-nav span:last-child{border-right: 1px solid #DEDEDE;}
.car .bg{background: url(../images/product/new-car-bg.png) no-repeat center; background-size: cover;}
.car .bg .container{padding: 100px 0 105px;}
.car strong{font-size: 2.5em; font-weight: 700; color: #fff; text-align: center; display: block; line-height: 1.35;}
.car section .sub-title{font-size: 1.125em; color: #fff; text-align: center; margin: 12px 0 0; line-height: 1.5;}
.car section .sub-title .txt-pc{display: none;}
.car .in-tab .moView {display: none;}

.car section{overflow: hidden;}
.car section .grid{grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 40px 0 219px; }
.car section .grid li{background: rgba(255,255,255,.85); border-radius: 10px; padding: 20px 0 15px 15px; display: flex; flex-direction: column; position: relative; height: 175px; cursor: pointer;}
.car section .grid li.half{background: rgba(255,255,255,.85);}
.car section .grid li.half2{background: rgba(255,255,255,.85);}
.car section .grid li.half3{background: rgba(255,255,255,.85);}
.car section .grid li p{font-size: 1.125em; font-weight: 500; line-height: 1.2; padding-left: 5px;}
.car section .grid li p span{font-weight: 700; display: block; color: var(--esg); text-indent: -7px; padding-left: 7px;}
.car .number{border-radius: 100%; background-color: var(--esg); font-size: 1.25em; font-weight: 700; color: #fff; width: 30px; height: 30px; text-align: center; margin-top: auto; position: relative; border: 1px solid #fff; vertical-align: middle; display: flex; align-items: center; justify-content: center;}
.car section .grid li img{position: absolute;}
.car .main-img{position: relative; margin: auto; width: fit-content;}
.car .main-img .num{position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center;}
.car .in-tab{display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; backdrop-filter: blur(21px) brightness(83%); -webkit-backdrop-filter: blur(21px) brightness(83%); background: rgba(255,255,255,0); border-radius: 30px; margin: 22px 0 0;}
.car .in-tab div{padding: 8px; position: relative;}
.car .in-tab div::before{content: ''; width: 1px; height: 42px; background-color: #fff; opacity: .1; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.car .in-tab div:first-child::before{display: none;}
.car .in-tab.moView{display: none;}
.car .in-tab p{cursor: pointer; border-radius: 30px; font-size: 1.25em; color: #B4B4B4; font-weight: 700; line-height: 1.2; padding-block: 10.5px; font-weight: 500;}
.car .in-tab .active{background: var(--esg); font-weight: 700; color: #fff;}
.car .num .radar{width: 50px; height: 50px; background: rgb(11, 104, 167); border-radius: 50%; display: block; opacity: 0; position: absolute; flex-shrink: 0; z-index: -1;}
.car .blink .radar{animation: radarR1 1s linear infinite;}
.car .blink .number{animation: change-back .7s linear forwards;}
.car .deactivate .number{background-color: gray; transition: .7s;}

@keyframes radarR1 {
  0% {transform: scale(0.8); opacity: 0.5;}
  100% {transform: scale(1); opacity: 0.5;}
}

@keyframes change-back {
  100% {
    background: #00B4FF;
  }
}

.car-box{position: relative;}
.car-box .car-img{max-width: 800px; position: relative; z-index: 1; width: 100%;}
.car-box .shadow{position: absolute;}


.car #front .grid{grid-template-columns: repeat(6,1fr); margin: 40px 0 199px;}
.car #front .grid li:nth-child(1) img{bottom: 20.4px; right: 13.2px; mix-blend-mode: multiply;}
.car #front .grid li:nth-child(2) img{bottom: 11px; right: 13px;}
.car #front .grid li:nth-child(3) img{bottom: 8.7px; right: 17.1px;}
.car #front .grid li:nth-child(4) img{bottom: 17px; right: 15px; mix-blend-mode: multiply;}
.car #front .grid li:nth-child(5) img{bottom: 9.2px; right: 2px;}
.car #front .grid li:nth-child(6) img{bottom: -19.4px; right: 3.7px; mix-blend-mode: multiply;}
.car #front .main-img .num:nth-child(1){left: 42.7px; bottom: 109px;}
.car #front .main-img .num:nth-child(2){left: 185.1px; bottom: 75.9px;}
.car #front .main-img .num:nth-child(3){left: 242.7px; bottom: 93.4px;}
.car #front .main-img .num:nth-child(4){left: 316.7px; bottom: 188.2px;}
.car #front .main-img .num:nth-child(5){left: 201.7px; bottom: 125.7px;}
.car #front .main-img .num:nth-child(6){left: 109.6px; bottom: 208.7px;}
.car #front .car-box{margin-bottom: 42px;}
.car #front .shadow:nth-child(2){right: -12.9px; bottom: 20px; z-index: 1;}
.car #front .shadow:nth-child(3){left: 20px; bottom: -18px; mix-blend-mode: multiply; max-width: 752.65px;}
.car #front .shadow:nth-child(4){left: 20px; bottom: -18px; mix-blend-mode: multiply; max-width: 752.65px;}
.car #front .shadow:nth-child(5){left: 20px; bottom: -18px; mix-blend-mode: multiply; max-width: 696.11px;}

.car #rear .grid li:nth-child(1) img{bottom: 22.4px; right: 19.6px;}
.car #rear .grid li:nth-child(2) img{bottom: 16.1px; right: 17px;}
.car #rear .grid li:nth-child(3) img{bottom: 8.8px; right: 10.3px;}
.car #rear .grid li:nth-child(4) img{bottom: 18px; right: 10px; mix-blend-mode: multiply;}
.car #rear .grid{margin: 40px 0 96px;}
.car #rear .main-img .num:nth-child(1){right: 156.1px; bottom: 162.8px;}
.car #rear .main-img .num:nth-child(2){right: 269.1px; bottom: 169.8px;}
.car #rear .main-img .num:nth-child(3){right: 371.1px; bottom: 202.9px;}
.car #rear .main-img .num:nth-child(4){right: 150.1px; bottom: 202.9px;}
.car #rear .shadow{mix-blend-mode: multiply; max-width: 1311.79px;}
.car #rear .shadow{left: 170.4px; bottom: 16px;}
.car #rear .shadow:nth-child(3){left: 290.4px; bottom: 16px;}

.car #cowl .grid{grid-template-columns: repeat(4,1fr); margin: 40px 0 199px;}
.car #cowl .grid li:nth-child(1) img{bottom: 40.5px; right: 31.6px;}
.car #cowl .grid li:nth-child(2) img{bottom: 7px; right: 14px;}
.car #cowl .grid li:nth-child(3) img{bottom: 13px; right: 17px; mix-blend-mode: multiply;}
.car #cowl .grid li:nth-child(4) img{bottom: 15px; right: 22px; mix-blend-mode: multiply;}
.car #cowl .main-img .num:nth-child(1){left: 264.8px; top: 123.1px;}
.car #cowl .main-img .num:nth-child(2){right: 373.1px; top: 115.1px;}
.car #cowl .main-img .num:nth-child(3){left: 149.8px; top: 153.2px;}
.car #cowl .main-img .num:nth-child(4){left: 182.9px; top: 153.2px;}
.car #cowl .car-box{margin-bottom: 42px;}
.car #cowl .shadow:nth-child(2){right: -12.9px; bottom: 20px; z-index: 1;}
.car #cowl .shadow:nth-child(3){left: 20px; bottom: -18px; mix-blend-mode: multiply; max-width: 752.65px;}
.car #cowl .shadow:nth-child(4){left: 20px; bottom: -18px; mix-blend-mode: multiply; max-width: 752.65px;}
.car #cowl .shadow:nth-child(5){left: 20px; bottom: -18px; mix-blend-mode: multiply; max-width: 696.11px;}


.car #inner .grid{margin: 40px 0 91.58px;}
.car #inner .in-tab{grid-template-columns: repeat(3, 1fr);}
.car #scuff .grid{grid-template-columns: repeat(5, 1fr);}
.car #scuff .car-box .car-img{max-width: 1012px; width: 100%;}
.car #scuff .grid li:nth-child(1) img{bottom: 2.7px; right: 0px; mix-blend-mode: multiply;}
.car #scuff .grid li:nth-child(2) img{bottom: 11px; right: 20.5px; mix-blend-mode: multiply;}
.car #scuff .grid li:nth-child(3) img{bottom: 17px; right: 8.2px; mix-blend-mode: multiply;}
.car #scuff .grid li:nth-child(4) img{bottom: 17px; right: 1.2px; mix-blend-mode: multiply;}
.car #scuff .grid li:nth-child(5) img{bottom: 10.3px; right: 2.9px; mix-blend-mode: multiply;}
.car #scuff .main-img .num:nth-child(1){left: 329.8px; top: 192.5px;}
.car #scuff .main-img .num:nth-child(2){right: 470px; top: 210px;}
.car #scuff .main-img .num:nth-child(3){left: 408.7px; bottom: 158.3px;}
.car #scuff .main-img .num:nth-child(4){right: 386.7px; bottom: 161.3px;}
.car #scuff .main-img .num:nth-child(5){right: 217.9px; top: 174.7px;}
.car #scuff .shadow{mix-blend-mode: multiply; left: 60px; bottom: 46px; max-width: 1614.49px;}

.car #etc .grid{grid-template-columns: repeat(5,1fr);}
.car #etc .grid li:nth-child(1) img{bottom: 15px; right: 22.7px; mix-blend-mode: multiply;}
.car #etc .grid li:nth-child(2) img{bottom: 20px; right: 14.8px; mix-blend-mode: multiply;}
.car #etc .grid li:nth-child(3) img{bottom: 13.4px; right: 8.5px; mix-blend-mode: multiply;}
.car #etc .grid li:nth-child(4) img{bottom: 11px; right: 19.1px; mix-blend-mode: multiply;}
.car #etc .grid li:nth-child(5) img{bottom: 11px; right: 12.1px; mix-blend-mode: multiply;}
.car #etc .main-img .num:nth-child(1){left: 280.6px; bottom: 172.4px;}
.car #etc .main-img .num:nth-child(2){left: 285.6px; bottom: 209.7px;}
.car #etc .main-img .num:nth-child(3){right: 492px; bottom: 227.7px;}
.car #etc .main-img .num:nth-child(4){right: 327.8px; bottom: 227.7px;}
.car #etc .main-img .num:nth-child(5){right: 287.8px; bottom: 235.7px;}
.car #etc .car-box .car-img{max-width: 1012px; width: 100%;}
.car #etc .shadow{mix-blend-mode: multiply; left: 60px; bottom: 46px; max-width: 1614.49px;}

.car #trunk .grid{grid-template-columns: repeat(6,1fr); margin: 40px 0 76.01px;}
.car #trunk .grid li:nth-child(1) img{bottom: 22px; right: 19px; mix-blend-mode: multiply;}
.car #trunk .grid li:nth-child(2) img{bottom: 17px; right: 17px; mix-blend-mode: multiply;}
.car #trunk .grid li:nth-child(3) img{bottom: 10px; right: 8.2px; mix-blend-mode: multiply;}
.car #trunk .grid li:nth-child(4) img{bottom: 19px; right: 19px; max-width: 114px;}
.car #trunk .grid li:nth-child(5) img{bottom: 8px; right: 6px; mix-blend-mode: multiply;}
.car #trunk .grid li:nth-child(6) img{bottom: 10px; right: 4.4px; mix-blend-mode: multiply;}
.car #trunk .main-img .num:nth-child(1){right: 313.1px; top: 101.8px;}
.car #trunk .main-img .num:nth-child(2){right: 227.5px; top: 42.8px;}
.car #trunk .main-img .num:nth-child(3){right: 215.2px; top: 78.9px;}
.car #trunk .main-img .num:nth-child(4){right: 202px; top: 171px;}
.car #trunk .main-img .num:nth-child(5){right: 163.5px; top: 257.8px;}
.car #trunk .main-img .num:nth-child(6){right: 234.5px; bottom: 226.1px;}
.car #trunk .car-box .car-img{max-width: 1063px; width: 100%;}
.car #trunk .shadow{mix-blend-mode: multiply; max-width: 1311.79px;}
.car #trunk .shadow{left: 170.4px; bottom: 28px;}
.car #trunk .shadow:nth-child(3){left: 290.4px; bottom: 28px;}

/* housing */
#housing .sp-head{padding-bottom: 40px;}
.housing .introduce{gap: 149px;}
.housing .grid{grid-template-columns: repeat(3, 1fr); gap: 42px 34px;}
.housing .grid div{height: 295px; display: flex; align-items: center; justify-content: center; background-color: #F4F4F4; border-radius: 16px;}
.housing .grid li:last-child div{justify-content: flex-end;}
.housing .grid strong{margin: 16px 0 8px; font-size: 1.25em; display: block;}
.housing .grid p{font-size: 1.25em; line-height: 1;}

/* cooling */
#cooling .sp-head{padding-bottom: 40px;}
.cooling .introduce{gap: 231px;}

/* mold */
#mold .sp-head{padding-bottom: 40px;}
.mold .grid{grid-template-columns: repeat(2, 1fr); gap: 32px;}
.mold .introduce{gap: 118px; margin: 80px 0 0;}
.mold .introduce p{width: 295px; min-width: 295px;}

/* ----------------------- rnd ----------------------- */
.banner{color: #fff; background: url(../images/rnd/cylinder.png) no-repeat center; background-size: cover; padding: 67px 0 149px 70px;}
.banner strong{font-size: 1.875em; line-height: 1.4;}
.banner p{font-size: 1.125em; font-weight: 500; line-height: 1.67; margin: 22px 0 0;}
.field{grid-template-columns: 214px 1fr; gap: 60px 147px; margin: 80px 0 0;}
.field .grid{grid-template-columns: repeat(2, 1fr); gap: 26px;}
.field strong{font-size: 1.875em;}
.field .right{border-bottom: 2px solid #A1A1A1;}
.field .right .grid{margin: 0 0 50px;}
.field .right .grid div{background-color: #F9F9F9; height: 335px; display: flex; justify-content: center; align-items: center; border-radius: 16px;}
.field .right p{padding: 0 0 0 24px; position: relative; font-size: 1.125em; margin: 0 0 20px; line-height: 1;}
.field .right p::before{content: ''; width: 6px; height: 6px; background-color: #D1D1D1; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100%;}
.field .right b{color: var(--primary-dark);}
.field .left b{font-size: 1.25em; border-top: 1px solid #D4D4D4; color: #929292; padding: 9px 0 0; display: block; line-height: 1; text-transform: uppercase;}
.field .grid.bottom{gap: 16px 61px; padding: 9px 0 0; grid-template-columns: 1fr;}
.field .grid p{font-size: 1.125em; line-height: 1; padding: 0 0 0 24px; position: relative;}
.field .grid p::before{content: ''; width: 6px; height: 6px; background-color: #D1D1D1; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100%;}

/* laboratory */
#laboratory .sp-head{padding-bottom: 40px;}
.banner2{background: url(../images/rnd/laboratory1.png) no-repeat center; background-size: cover; padding: 94px 0 240px; margin: 100px 0 183px;}
.banner2 .container{position: relative;}
.banner2 strong{color: #fff; font-size: 2.5em;}
.banner2 img{position: absolute; right: 0; top: 91px;}
.laboratory .text{font-size: 1.125em; line-height: 1.67; letter-spacing: -0.01em;}
.laboratory .outer{grid-template-columns: 327px 1fr; gap: 60px 37px;}
.laboratory .left{align-items: center; gap: 20px; border-top: 4px solid var(--esg); padding: 33px 0 0;}
.laboratory .left b{font-size: 1.625em; line-height: 1.23;}
.laboratory .left p{font-size: 1.188em; font-weight: 500; margin: 10px 0 0; line-height: 1.2;}
.laboratory .right{border-top: 4px solid #DEDEDE; padding: 33px 0 0 33px; grid-template-columns: repeat(2, 1fr); gap: 22px 28px;}
.laboratory .right p{font-size: 1.188em; line-height: 1.2; position: relative; padding: 0 0 0 24px; vertical-align: middle;}
.laboratory .right p::before{content: ''; width: 6px; height: 6px; background-color: #474645; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100%;}
.laboratory .img-box .laborator-mo{display: none;}



/* CYLINDER */
.cylinder .grid.bottom{grid-template-columns: repeat(2, 1fr);}
.cylinder .field .right .grid div{height: 295px;}

/* MID LED */
.midled .banner{background: url(../images/rnd/midled.png) no-repeat center; background-size: cover; padding: 71px 0 92px 70px;}

/* WATER METER */
.watermeter .banner{background: url(../images/rnd/watermeter.png) no-repeat center; background-size: cover; padding: 71px 0 100px 70px;}
.watermeter .right .grid{grid-template-columns: 1fr; gap: 42px;}

/* LIQUID GAS */
.liquidgas .banner{background: url(../images/rnd/liquidgas.png) no-repeat center; background-size: cover; padding: 71px 0 100px 70px;}
.liquidgas .right .grid{grid-template-columns: 1fr; gap: 42px;}
.liquidgas .right .grid .flex{gap: 26px; height: fit-content; background: none;}

/* HVAC */
.hvac .banner{background: url(../images/rnd/havc.png) no-repeat center; background-size: cover; padding: 67px 0 104px 70px;}
.hvac .right .grid{grid-template-columns: 1fr; gap: 0;}
.hvac .field .grid p{line-height: 1.67;}
.hvac .field .grid p:nth-child(1)::before{top: 11px; transform: inherit;}
.hvac .field .grid p:nth-child(2)::before{top: 11px; transform: inherit;}
.hvac table{border-bottom: 2px solid #A1A1A1; border-top: 3px solid var(--primary-dark);}
.hvac table th{text-align: center; border-bottom: 2px solid #636363; padding: 11px 0; line-height: 1; font-size: 1.125em; border-left: 1px solid #E0E0E0;}
.hvac table td{width: 25%; text-align: center; border-bottom: 1px solid #CCCCCC; padding: 11px 0; line-height: 1; font-size: 1.125em; border-left: 1px solid #E0E0E0;}
.hvac table th:first-child{color: var(--primary-dark); text-align: left; padding-left: 19px; border-left: none;}
.hvac table td:first-child{color: var(--primary-dark); font-weight: 700; min-width: 267px; width: 267px; text-align: left; background: rgba(28,84,251,.05); padding-left: 19px; border-left: none;}
.hvac table tr:last-child td{border-bottom: none;}

/* ----------------------- equipment ----------------------- */
/* production */
#production .sp-head{padding-bottom: 90px;}
.production p{font-size: 1.875em; font-weight: 700; color: var(--primary-dark); margin: 100px 0 60px; line-height: 1;}
.production .grid{grid-template-columns: repeat(3, 1fr); gap: 18px;}
.production .thumb-1 {display: block; margin-left: auto;}
.production table{text-align: center; margin: 90px 0 0 auto; max-width: 802px; width: 100%;}
.production th{background: rgba(217, 217, 217, .4); border-right: 1px solid #E0E0E0; border-bottom: 2px solid var(--primary-dark); padding-block: 10px; line-height: 1;}
.production th:last-child{border-right: none;}
.production td{border-right: 1px solid #E0E0E0; line-height: 1; padding-block: 10px;}
.production .center{border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC;}
.production .area{font-weight: 700; color: var(--secondary);}
.production .semi{font-weight: 600;}
.production td:last-child{border-right: none;}
.production tr:last-child{color: #fff; background-color: var(--secondary);}
.production tr:last-child td{border: none;}
.production #gwangju .grid{grid-template-columns: repeat(2, 1fr);}
.production #seosan .flex{margin: 100px auto 60px; flex-direction: column;}
.production #seosan .flex p{margin: 0}
.production #seosan p {position: absolute;}
/* .production #seosan table{margin: 0 0 0 auto;} */

/* testing */
#testing .sp-head{padding-bottom: 90px;}
.testing .img-box{grid-template-columns: repeat(6, 1fr); gap: 40px 18px;}
.testing .img-box p{margin: 20px 0 0; font-size: 1.125em; font-weight: 700; line-height: 1;}
.testing .img-box li:nth-child(1){grid-column: span 2;}
.testing .img-box li:nth-child(2){grid-column: span 2;}
.testing .img-box li:nth-child(3){grid-column: span 2;}
.testing .img-box li:nth-child(4){grid-column: 1 / span 3;}
.testing .img-box li:nth-child(5){grid-column: 4 / span 3;}
.testing .pyo{grid-template-columns: 300px 1fr; gap: 80px 101px; margin: 80px 0 0;}
.testing .pyo .txt{margin-top: 10px;}
.testing .pyo .t-box{margin-left: 20px;position: relative;}
.testing .pyo .t-box::before{content: ''; background-color: #D1D1D1;width: 6px;height: 6px;position: absolute;left: -15px;top: 50%;transform: translateY(-50%);border-radius: 100%;}
.testing .pyo li:nth-child(odd){color: var(--primary-dark); font-size: 1.875em; font-weight: 700;}
.testing table{text-align: center; line-height: 1; width: 100%; border-bottom: 2px solid #A1A1A1;}
.testing table th{padding-block: 8px; background: #F4F4F4; border-bottom: 2px solid #1A46C7; border-left: 1px solid #E0E0E0;}
.testing table th:first-child{border-left: none;}
.testing table td{padding-block: 8px; width: 33.3%; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #E0E0E0;}
.testing table td:first-child{background: #F4F4F4; font-weight: 700; color: var(--secondary); border-left: none;}
.testing table tr:last-child td{border-bottom: none;}
.testing .pyo li p{font-weight: 500; margin: 20px 0 0;}

/* ----------------------- pr-center ----------------------- */
/* notice */
#notice .sp-head{padding-bottom: 100px;}
.notice table{width: 100%; border-collapse: separate; border-spacing: 7px 0;}
.notice th{background: #F3F3F3; border-bottom: 2px solid var(--primary-dark); line-height: 1; padding: 18px 0;}
.notice th:nth-child(2){text-align: left; padding: 18px 0 18px 21px;}
.notice tr{cursor: pointer;}
.notice tr:first-child{cursor: inherit;}
.notice td{text-align: center; line-height: 1; padding: 22px 0; letter-spacing: -0.04px; border-bottom: 1px solid #86868B;}
.notice td:first-child{width: 80px;}
.notice td:nth-child(2){text-align: left; padding: 22px 10px 22px 21px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 948px; max-width: 948px;}
.notice td:last-child{width: 144px;}

/* recruit */
#recruit .sp-head{padding-bottom: 100px;}
.recruit .step{margin: 80px 0;}
.recruit p{position: relative; padding: 0 0 0 17px; margin: 0 0 16px; font-size: 1.125em;}
.recruit p::before{content: ''; position: absolute; width: 5px; height: 5px; background-color: #B8B8B8; left: 0; top: 50%; transform: translateY(-50%); border-radius: 100%;}
.recruit p:last-child{margin: 0; line-height: 1.78; text-indent: -81px; padding: 0 0 0 98px;}
.recruit .top p:last-child{margin: 0; line-height: 1.78; text-indent: -60px; padding: 0 0 0 77px;}
.recruit p:last-child::before{top: 13px; transform: translateY(0);}
.recruit strong{max-width: 248px; width: 100%;}
.recruit .flex{gap: 129px;}
.recruit .top{padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid #86868B;}
.recruit strong{font-size: 1.875em; font-weight: 700; color: var(--primary-dark);}
.recruit .bottom{background: #F9F9F9; padding: 40px; margin: 60px 0 0; letter-spacing: -0.03em;}
.recruit .bottom p span{font-weight: 500;}
.recruit .bottom p::before{top: 10px; transform: translateY(0);}
.recruit .bottom p:last-child{text-indent: inherit; padding: 0 0 0 17px;}
.recruit .bottom p:last-child:before{top: 12px;}

/* location */
.location .grid{grid-template-columns: 226px 1fr; gap: 80px 51px;}
.location li:nth-child(odd){font-weight: 700; font-size: 1.875em; color: #676D7F; border-top: 2px solid #676D7F; padding: 29px 0 0;}
.location li:first-child{color: var(--primary-dark); border-color: var(--primary-dark);}
.location iframe{width: 100%; height: 521px;}
.location li>.flex{max-width: 850px; margin: 22px 0 0;}
.location .flex{align-items: center;}
.location .img-cover{background: #F5F5F2; border-radius: 100%; padding: 17.5px 19.8px;}
.location .flex b{margin: 0 17px 0 13px; font-size: 1.25em;}
.location .flex p{font-size: 1.25em;}
.location li>.flex .flex:last-child{margin-left: auto;}

@media screen and (max-width: 1399px){
  /* 공용 */
  .tab-nav span{font-size: 0.875em;}
  .pdb200{padding-bottom: 80px;}

/* ----------------------- company ----------------------- */
  /* overview */
  #overview .sp-head{padding-bottom: 60px;}
  .overview .title{font-size: 1.875em;}
  .overview p{font-size: 1em; word-break: keep-all;}
  .partner{padding: 0 20px;}
  .partner .container{gap: 20px;}

  /* greetings */
  #greetings .sp-head{padding-bottom: 60px;}
  .greetings>.flex{display: inherit !important;}
  .greetings img{margin: 40px auto 0;}
  .greetings .left p{font-size: 1em;}
  .greetings .left strong{font-size: 1em;}

  /* history */
  #history .left{width: 220px;}
  .history .container{gap: 18px;}
  #history .sp-head{padding-bottom: 60px;}
  .history img{max-width: 55%;}
  .history .left p:first-child{font-size: 1.125em;}
  .history .left p:last-child{font-size: 1.5em;}
  .history .right p{font-size: 1.25em; line-height: 1.2;}
  .history .right .flex div p{word-break: keep-all; font-size: 0.875em;}
  .history .right li::before{top: 6px;}

  /* chart */
  #chart .sp-head{padding-bottom: 60px;}
  .chart section{padding-block: 60px 80px;}
  .chart section p{font-size: 1.125em;}

/* ----------------------- product ----------------------- */
  /* module */
  .introduce p{font-size: 1.5em;}
  .introduce li{font-size: 1em;}

  /* car */
  .car .in-tab p{font-size: 1em;}
  
  .car .num .radar{width: 46px; height: 46px;}

  .car #front .grid{grid-template-columns: repeat(2, 1fr);}
  .car #front .main-img{padding-top: 9px;}
  .car .main-img .number{width: 24px; height: 24px; font-size: 0.875em;}
  .car #front .main-img .num:nth-child(1){left: 40px; bottom: 100px;}
  .car #front .main-img .num:nth-child(2){left: 168px; bottom: 70px;}
  .car #front .main-img .num:nth-child(3){left: 222px; bottom: 86px;}
  .car #front .main-img .num:nth-child(4){left: 288px; bottom: 174px;}
  .car #front .main-img .num:nth-child(5){left: 186px; bottom: 118px;}
  .car #front .main-img .num:nth-child(6){left: 96px; bottom: 190px;}

  .car #rear .grid{grid-template-columns: repeat(2, 1fr);}
  .car #rear .main-img{padding-top: 0;}
  .car #rear .main-img .num:nth-child(1){right: 105px; bottom: 112px;}
  .car #rear .main-img .num:nth-child(2){right: 186px; bottom: 120px;}
  .car #rear .main-img .num:nth-child(3){right: 264px; bottom: 140px;}
  .car #rear .main-img .num:nth-child(4){right: 100px; bottom: 144px;}
  .car #rear .shadow{bottom: -38px; left: 90px;}
  .car #rear .shadow:nth-child(3){bottom: -36px; left: 110px;}

  .car #cowl .grid{grid-template-columns: repeat(2, 1fr);}
  .car #cowl .main-img .num:nth-child(1){left: 236px; top: 112px;}
  .car #cowl .main-img .num:nth-child(2){right: 338px; top: 110px;}
  .car #cowl .main-img .num:nth-child(3){left: 130px; top: 140px;}
  .car #cowl .main-img .num:nth-child(4){left: 160px; top: 140px;}

  .car #filler .grid{grid-template-columns: repeat(2, 1fr);}
  .car #filler .main-img .num:nth-child(1){left: 260.9px; top: 40.8px;}
  .car #filler .main-img .num:nth-child(2){right: 327.8px; top: 29.1px;}
  .car #filler .main-img .num:nth-child(3){left: 342px; top: 67.2px;}
  .car #filler .main-img .num:nth-child(4){right: 168.8px; top: 45.2px;}

  .car #scuff .grid{grid-template-columns: repeat(2, 1fr);}
  .car #scuff .main-img .num:nth-child(1){left: 230px; top: 134px;}
  .car #scuff .main-img .num:nth-child(2){right: 330px; top: 126px;}
  .car #scuff .main-img .num:nth-child(3){left: 290px; bottom: 110px;}
  .car #scuff .main-img .num:nth-child(4){right: 276px; bottom: 114px;}
  .car #scuff .main-img .num:nth-child(5){right: 158px; top: 124px;}
  .car #scuff .shadow{left: 14px; bottom: 8px;}
  
  .car #etc .grid{padding-inline: 0; overflow: hidden; grid-template-columns: repeat(2, 1fr);}
  .car #etc .grid li:nth-child(1) img{width: 30%;}
  .car #etc .grid li:nth-child(2) img{width: 40%;}
  .car #etc .grid li:nth-child(3) img{width: 40%;}
  .car #etc .main-img .num:nth-child(1){left: 200px; bottom: 122px;}
  .car #etc .main-img .num:nth-child(2){left: 206px; bottom: 150px;}
  .car #etc .main-img .num:nth-child(3){right: 350px; bottom: 160px;}
  .car #etc .main-img .num:nth-child(4){right: 230px; bottom: 162px;}
  .car #etc .main-img .num:nth-child(5){right: 198px; bottom: 170px;}
  .car #etc .shadow{left: 14px; bottom: 8px;}
  
  .car #trunk .grid{grid-template-columns: repeat(2, 1fr);}
  .car #trunk .main-img .num:nth-child(1){right: 224px; top: 68px;}
  .car #trunk .main-img .num:nth-child(2){right: 170px; top: 30px;}
  .car #trunk .main-img .num:nth-child(3){right: 152px; top: 54px;}
  .car #trunk .main-img .num:nth-child(4){right: 148px; top: 164px;}
  .car #trunk .main-img .num:nth-child(5){right: 116px; top: 180px;}
  .car #trunk .main-img .num:nth-child(6){right: 170px; bottom: 160px;}
  .car #trunk .shadow{bottom: -36px; left: 90px;}
  .car #trunk .shadow:nth-child(3){bottom: -36px; left: 110px;}

  /* hosuing */
  #housing .sp-head{padding-bottom: 20px;}
  .housing .grid{grid-template-columns: repeat(2, 1fr); gap: 30px 20px;}
  .housing .grid strong{font-size: 1em;}
  .housing .grid p{font-size: 1em;}
  .introduce.ver2{margin: 50px 0 40px;}

  /* cooling */
  .cooling .introduce{gap: 89px;}

  /* mold */
  .mold .introduce{gap: 80px;}
  .mold .introduce p{width: 180px; min-width: 180px;}
  .mold .t-dot::before{top: 6px; transform: translateY(0);}

/* ----------------------- rnd ----------------------- */
  /* laboratory */
  .banner2{margin: 60px 0 103px; padding: 35px 0 265px;}
  .laboratory .outer{grid-template-columns: 280px 1fr; gap: 30px 20px;}
  .laboratory .left{gap: 14px;}
  .laboratory .left b{font-size: 1.25em;}
  .laboratory .left p{font-size: 1em;}
  .laboratory .right{padding: 33px 0 0 16px;}
  .laboratory .right p{font-size: 0.875em; word-break: keep-all;}
  .laboratory .right p::before{top: 5px; transform: translateY(0);}

  /* cylinder */
  .banner{padding: 60px 30px;}
  .banner p{word-break: keep-all;}
  .field{display: flex !important; flex-direction: column; gap: 20px;}
  .field .right{border-bottom: none;}
  .field .right p:last-child{margin: 0;}
  .field .right .grid div{height: fit-content; width: fit-content; margin: auto;}
  .field .left{border-top: 2px solid #A1A1A1;}
  .field .left b{border-top: none; padding: 30px 0 0;}

  /* hvac */
  .hvac .banner{padding: 60px 30px;}

  /* mid led */
  .midled .banner{padding: 60px 30px;}

  /* watermeter */
  .watermeter .banner{padding: 60px 30px;}
  .watermeter .field .right .grid div{padding: 20px;}

  /* lquid gas */
  .liquidgas .banner{padding: 60px 30px;}
  .liquidgas .right .grid .flex{gap: 16px;}
  .liquidgas .right .grid .flex:nth-child(2) img{width: 31%;}
  .liquidgas .right .grid .flex:nth-child(3) img{width: 48%;}

/* ----------------------- equipment ----------------------- */
  /* production */
  .production #seosan .flex{displ767ay: block !important; margin: 0 auto; flex-direction: column;}
  .production #seosan .flex p{margin: 100px 0 60px; position: static;}

  /* testing */
  .testing .pyo{grid-template-columns: 1fr; gap: 10px; margin: 40px 0 0;}
  .testing .pyo li:nth-child(odd){margin: 30px 0 0;}
  
  
/* ----------------------- pr-center ----------------------- */
  /* notice */
  .notice td:first-child{width: 54px;}
  .notice td:nth-child(2){width: 540px; max-width: 540px;}
  .notice td:last-child{width: 98px;}

  /* recruit */
  .recruit .flex{gap: 80px;}

  /* location */
  .location .grid{grid-template-columns: 1fr; gap: 20px;}
  .location .img-cover{padding: 12.5px 14.8px;}
  .location .flex b{font-size: 1.125em;}
  .location .flex p{font-size: 1em;}
  .location li:nth-child(odd){padding: 40px 0 0;}

}

@media screen and (max-width: 767px){
/* 공용 */
.sp-head{padding-bottom: 20px;}

/* ----------------------- company ----------------------- */
  /* overview */
  .overview{display: inherit;}
  #overview .sp-head{padding-bottom: 24px;}
  .overview .title{text-align: center; margin: 0 0 24px;}
  .overview .flex{margin: 30px 0 0; display: block !important;}
  .overview .flex div:first-child{margin: auto; padding: 20px 0 0;}
  .overview .flex div:nth-child(2){padding: 50px 0;}
  .overview .flex div img{margin: auto;}
  .partner .container{gap: 0;}
  .my-next{max-width: 34px; height: 34px;}
  .my-prev{max-width: 34px; height: 34px;}

  /* greetings */
  #greetings .sp-head{padding-bottom: 24px;}
  .greetings .left>p:first-child{font-size: 22px; text-align: center; line-height: 1.5; margin: 0 0 24px;}
  .greetings .left p:first-child span{font-size: 30px;}

  /* chart */
  .chart section p{margin: 0 0 20px;}
  /* .chart .img-box{overflow-x: scroll;} */
  .chart .img-box img{max-width: 100%;}
  .chart .chart1-pc{display: none;}
  .chart .chart1-mo{display: block;}
  .chart .chart2-pc{display: none;}
  .chart .chart2-mo{display: block;}

  /* history */
  #history .sp-head{padding-bottom: 50px;}
  .history .container{flex-direction: column; padding-left: 5px;}
  .history img{max-width: 100%;}
  #history .left{width: 100%; text-align: center;}
  .history ul{padding: 50px 0 50px 24px;}
  .history .left p:first-child{margin: 50px 0 17px;}
  .history .right .flex{flex-direction: column; gap: 10px;}
  .history .right p{width: 50px;}

/* ----------------------- product ----------------------- */
  /* module */
  #module .sp-head{padding-bottom: 20px}
  .product-title{font-size: 1.625em; text-align: center; line-height: 1.2;}
  .product-sub-title{font-size: 1em; margin: 18px 0 50px; line-height: 1.65; word-break: keep-all;}
  .introduce{display: inherit !important; margin: 40px 0;}
  .introduce p{font-size: 1.25em; margin: 0 0 20px;}
  .introduce li{margin: 0 0 10px; word-break: keep-all; padding: 0 0 0 16px; line-height: 1.65;}
  .introduce li::before{top: 8px; transform: translateY(0);}
  #square .cont .flex{display: initial !important;}
  #square strong{font-size: 1.25em;}
  #square .cont li{margin: 0 0 10px;}
  #square .cont .flex div:last-child{margin: 30px 0 0;}
  .module .img-box{overflow-x: hidden;}
  /* .module .img-box img{max-width: 720px;} */

  /* car */
  .car section .sub-title{line-height: 1.5; word-break: keep-all;}
  .car strong{font-size: 1.75em;}
  .car section .sub-title{font-size: 1em;}
  .car .bg .container{padding: 60px 0;}
  /* .car section .grid li{ min-width: 228px;} */
  .car .main-img{width: 100%;}
  .car section .grid li p{font-size: 1em;}
  .car .number{width: 22px; height: 22px; font-size: 0.875em;}
  .car .in-tab{align-items: center;}
  .car .in-tab p{font-size: 0.8em;}
  .car .in-tab.moView{display: block;}
  .car .grid{ grid-template-columns: inherit; overflow-x: scroll; padding-bottom: 4px; margin: 20px 0 30px;}
  
  .car .in-tab .moView {display: block;}
  .car #front .moView{display:block;}

  .car #front .grid{ grid-template-columns: repeat(2, 1fr); flex-wrap: wrap; overflow: hidden;}

  .car #front .main-img{padding-top: 4px;}
  .car #front .main-img .num:nth-child(1){left: 6.5%; bottom: 26%;}
  .car #front .main-img .num:nth-child(2){left: 23.55%; bottom: 20%;}
  .car #front .main-img .num:nth-child(3){left: 31.5%; bottom: 22%;}
  .car #front .main-img .num:nth-child(4){left: 40%; bottom: 44%;}
  .car #front .main-img .num:nth-child(5){left: 26%; bottom: 30%;}
  .car #front .main-img .num:nth-child(6){left: 13%; bottom: 48.5%;}
  .car #front .shadow:nth-child(2){right: 10%; bottom: 10%; max-width: 300px;}
  .car #front .shadow:nth-child(3){left: -5%; bottom: -3%; max-width: 700px;}
  .car #front .shadow:nth-child(4){left: -15%; bottom: -10%; max-width: 700px;}
  .car #front .shadow:nth-child(5){left: -5%; bottom: -3%; max-width: 700px;}

  .car #rear .grid{ grid-template-columns: repeat(2, 1fr); flex-wrap: wrap; overflow: hidden;}

  /* .car #rear .grid li{min-width: 238px;} */
  .car #rear .grid li:nth-child(1) img{right: 12.6px;}
  .car #rear .main-img .num:nth-child(1){left: inherit; right: 11%; bottom: 24%;}
  .car #rear .main-img .num:nth-child(2){left: inherit; right: 23%; bottom: 26%;}
  .car #rear .main-img .num:nth-child(3){left: inherit; right: 35%; bottom: 32%;}
  .car #rear .main-img .num:nth-child(4){left: inherit; right: 9%; bottom: 34%;}
  .car #rear .car-box img:first-child{position: relative; z-index: 1; transform: scale(1.2); margin: 0 0 50px -12px;}
  .car #rear .shadow{bottom: -26%; left: 10%;}
  .car #rear .shadow:nth-child(3){bottom: -18%; left: 20%;}

  .car #cowl .grid{ grid-template-columns: repeat(2, 1fr); flex-wrap: wrap; overflow: hidden;}
  .car #cowl .main-img{padding-top: 4px;}
  .car #cowl .main-img .num:nth-child(1){right: inherit; left: 34%; top: 30%;}
  .car #cowl .main-img .num:nth-child(2){right: inherit; left: 50%; top: 30%;}
  .car #cowl .main-img .num:nth-child(3){right: inherit; left: 20%; top: inherit; bottom: 58%;}
  .car #cowl .main-img .num:nth-child(4){left: inherit; left: 24%; top: inherit; bottom: 58%;}
  .car #cowl .shadow:nth-child(2){right: 10%; bottom: 10%; max-width: 300px;}
  .car #cowl .shadow:nth-child(3){left: 5%; bottom: -3%; max-width: 700px;}
  .car #cowl .shadow:nth-child(4){left: -10%; bottom: -10%; max-width: 700px;}
  .car #cowl .shadow:nth-child(5){left: 5%; bottom: -3%; max-width: 700px;}

  /* .car #scuff .grid li{width: 238px; } */
  .car #scuff .grid{ grid-template-columns: repeat(2, 1fr); flex-wrap: wrap; overflow: hidden;}
  .car #scuff .main-img .num:nth-child(1){left: 32%; bottom: inherit; top: 34%;}
  .car #scuff .main-img .num:nth-child(2){right: 46%; bottom: inherit; top: 32%;}
  .car #scuff .main-img .num:nth-child(3){left: 40%; top: inherit; bottom: 28%;}
  .car #scuff .main-img .num:nth-child(4){right: 38%; bottom: 28%;}
  .car #scuff .main-img .num:nth-child(5){right: 21%; top: 31%;}
  .car #scuff .shadow{left: 0; bottom: 0;}

  /* .car #ect */
  
  .car #ect .grid{ grid-template-columns: repeat(2, 1fr); flex-wrap: wrap; overflow: hidden;}
  .car #etc .main-img .num:nth-child(1){left: 28%; bottom: 30%;}
  .car #etc .main-img .num:nth-child(2){left: 28%; bottom: 38%;}
  .car #etc .main-img .num:nth-child(3){right: 48%; bottom: 40%;}
  .car #etc .main-img .num:nth-child(4){right: 31%; bottom: 39%;}
  .car #etc .main-img .num:nth-child(5){right: 27%; bottom: 43%;}
  .car #etc .shadow{left: 0; bottom: 0;}
  

  .car #trunk .grid{ grid-template-columns: repeat(2, 1fr); flex-wrap: wrap; overflow: hidden;}
  .car #trunk{margin: 0;}
  .car #trunk .grid{margin: 40px 0 100px;}
  .car #inner .in-tab{margin: inherit;}
  .car #in-tap .grid{ grid-template-columns: repeat(2, 1fr); flex-wrap: wrap; overflow: hidden;}
  /* .car #trunk .grid li{width: 258px; min-width: 258px;} */
  .car #trunk .grid li:nth-child(2) img{bottom: 40px; right: 6px; bottom: 15px}
  .car #trunk .main-img .num:nth-child(1){right: 29%; top: 11%;}
  .car #trunk .main-img .num:nth-child(2){right: 20%; top: -1%;}
  .car #trunk .main-img .num:nth-child(3){right: 17%; top: 6%;}
  .car #trunk .main-img .num:nth-child(4){right: 25%; top: 40%;}
  .car #trunk .main-img .num:nth-child(5){right: 11%; top: 42%;}
  .car #trunk .main-img .num:nth-child(6){right: 19%; bottom: 35%;}
  .car #trunk .car-img{transform: scale(1.2); margin: 0 0 30px -4px;}
  .car #trunk .shadow{bottom: -18%; left: 8%;}
  .car #trunk .shadow:nth-child(3){bottom: -20%; left: 20%;}


  .housing .grid{grid-template-columns: 1fr; gap: 50px;}
  .housing .grid strong{margin: 10px 0 6px; font-size: 0.875em;}
  .housing .grid p{font-size: 0.875em;}
  .housing .grid li:last-child div{justify-content: center;}

  /* cooling */
  #cooling .sp-head{padding-bottom: 20px;}

  /* mold */
  .mold .grid{grid-template-columns: 1fr; gap: 20px;}
  .mold .introduce p{width: inherit; min-width: inherit;}

/* ----------------------- rnd ----------------------- */
  /* laboratory */
  #laboratory .sp-head{padding-bottom: 20px;}
  .laboratory .text{font-size: 1em; line-height: 1.65;}
  .banner2{padding: 50px 0; margin: 35px 0 35px;}
  .banner2 .container{width: 100%;}
  .banner2 strong{font-size: 1.5em; text-align: center; display: block;}
  .banner2 .img-box{margin: 20px 0 0; padding: 0 15px;}
  .banner2 img{max-width: fit-content; position: relative; top: 0;}
  .laboratory .outer{display: flex !important; flex-direction: column; gap: 20px;}
  .laboratory .left{padding: 20px 0 0;}
  .laboratory .left b{font-size: 1.125em;}
  .laboratory .right{display: initial !important; padding: 20px 0 0 10px;}
  .laboratory .right p{padding: 0 0 0 18px; margin: 0 0 10px;}

  .banner2 strong {color: #fff; font-size: 1.5em;}

  .laboratory .img-box .laborator-pc{display: none; ;}
  .laboratory .img-box .laborator-mo{display: block; margin-inline: auto;overflow: hidden; width: 350px;}

  /* cylinder */
  .banner{padding: 30px 20px;}
  .banner strong{font-size: 1.25em;}
  .banner p{font-size: 0.875em; line-height: 1.65;}
  .field{margin: 40px 0 0;}
  .field strong{font-size: 1.25em;}
  .field .right .grid{grid-template-columns: 1fr;}
  .field .right p{font-size: 1em; padding: 0 0 0 16px; margin: 0 0 14px; word-break: keep-all; line-height: 1.65;}
  .cylinder .field .right p:nth-child(2){text-indent: -110px; padding: 0 0 0 126px}
  .cylinder .field .right p:nth-child(4){text-indent: -80px; padding: 0 0 0 96px;}
  .field .right p::before{top: 8px; transform: translateY(0);}
  .field .grid.bottom{gap: 14px 20px;}
  .field .grid p{font-size: 1em; word-break: keep-all; padding: 0 0 0 16px; line-height: 1.65;}
  .field .grid p::before{top: 8px; transform: translateY(0);}

  /* hvac */
  .hvac .banner{padding: 30px 20px; background-position: 65% center;}
  .hvac table th:first-child{padding-left: 0; text-align: center; font-size: 0.875em;}
  .hvac table th{font-size: 0.875em;}
  .hvac table td{font-size: 0.875em;}
  .hvac table td:first-child{width: initial; min-width: initial; padding-left: 0; text-align: center; font-size: 0.875em;}
  .hvac .field .grid p{line-height: 1.65;}
  .hvac .field .grid p:nth-child(1)::before{top: 8px;}
  .hvac .field .grid p:nth-child(2)::before{top: 8px;}
  .hvac .field .right p:nth-child(2){text-indent: -110px; padding-left: 126px;}

  /* midled */
  .midled .banner{padding: 30px 20px; background-position: 65% center;}

  /* watermeter */
  .watermeter .banner{padding: 30px 20px; }
  .watermeter .field .right .grid div{padding: 10px;}
  .watermeter .field .right p:nth-child(5){text-indent: -80px; padding-left: 96px;}

  /* liquid gas */
  .liquidgas .banner{padding: 30px 20px;}
  .liquidgas .banner{background-position: 65% center;}
  .liquidgas .right .grid{gap: 20px;}
  .liquidgas .right .grid .flex:nth-child(2) img{width: 30%;}



  /* esg */
  #safety-management .target-policy .cont .item{margin-bottom: 35px;}

/* ----------------------- equipment ----------------------- */
  /* production */
  #production .sp-head{padding-bottom: 60px;}
  .production p{font-size: 1.25em; margin: 40px 0 20px;}
  .production .grid{grid-template-columns: 1fr;}
  .production table{margin: 50px 0 0;}
  .production th{font-size: 0.875em;}
  .production table td{word-break: keep-all; font-size: 0.875em;}
  .production .area{width: 160px !important;}
  .production table td:nth-child(3){width: 140px !important;}
  .production td:last-child{width: 140px !important;}
  .production #gwangju .grid{grid-template-columns: 1fr;}
  .production .grid img{margin: auto;}
  .production #seosan .flex p{margin: 40px 0 20px;}

  /* testing */
  #testing .sp-head{padding-bottom: 20px;}
  .testing .img-box{ gap: 20px 10px;}
  .testing .img-box p{font-size: 0.75em; margin: 10px 0 0;}


  #cyber-audit-office .report-it .report .img-pc {display: none}
  #cyber-audit-office .report-it .report .img-mo {display: block; margin-inline: auto; width: 400px;}

  .testing .pyo{margin: 20px 0 0;}
  .testing .pyo li:nth-child(odd){font-size: 1.125em;}
  .testing table th{font-size: 0.75em;}
  .testing table td{font-size: 0.75em; word-break: keep-all;}
  .testing table td{font-size: 0.75em; word-break: keep-all;}
  .testing .pyo li p{font-size: 0.875em;}

/* ----------------------- pr-center ----------------------- */
  /* notice */
  #notice .sp-head{padding-bottom: 60px;}
  .notice table{border-spacing: 3px;}
  .notice th{font-size: 0.875em; padding: 10px 0;}
  .notice th:nth-child(2){padding: 10px 0 10px 10px;}
  .notice td{font-size: 0.875em; padding: 12px 0;}
  .notice td:first-child{width: 34px; min-width: 34px;}
  .notice td:nth-child(2){padding: 12px 8px 12px 10px; max-width: 196px; width: 196px;}
  .notice td:last-child{width: 80px; min-width: 80px;}

  /* recruit */
  #recruit .sp-head{padding-bottom: 20px;}
  .recruit .step{margin: 40px 0;}
  .recruit .flex{flex-direction: column; gap: 14px;}
  .recruit strong{font-size: 1.125em;}
  .recruit p{font-size: 0.875em; margin: 0 0 10px; word-break: keep-all;}
  .recruit p:last-child::before{top: 10px}
  .recruit .bottom{margin: 40px 0 0; padding: 20px;}
  .recruit .bottom p{line-height: 1.4;}
  .recruit .bottom p::before{top: 6px;}
  .recruit .bottom p:last-child:before{top: 6px;}
  .pdb200 .recruit-mo{display: block; margin-inline: auto; width: 400px;}
  .pdb200 .recruit-pc{display: none;}

  /* location */
  .location iframe{height: 321px;}
  .location li:nth-child(odd){font-size: 1.125em;}
  .location li>.flex{flex-direction: column; align-items: flex-start;}
  .location li>.flex .flex:last-child{margin-left: 0; margin-top: 10px;}
  .location .img-cover{padding: 6.5px 8.8px;}
  .location .img-cover img{width: 14px;}
  .location .flex b{font-size: 0.875em; margin: 0 15px 0 11px;}
  .location .flex p{font-size: 0.75em;}

  /* visit */
   #visit-request-info .security .content {height: 395px; overflow: hidden;}
   #visit-request-info .notice .content {height: 150px; overflow: hidden;}
}




@media screen and (max-width: 499px) {
  .car .main-img .number{width: 16px; height: 16px; font-size: 0.625em;}

    /* visit */
  #visit-request-info .security .content {height: 550px; overflow: hidden;}  
  #visit-request-info .notice .content {height: 230px; overflow: hidden;}


  /* esg */
  #esg-management .esg-data .table td:nth-child(1){width: 140px;}
  #esg-management .esg-data .table td:nth-child(2){width: 50px;}
  #esg-management .esg-data .table td:nth-child(3){width: 50px;}
  #esg-management .esg-data .table td:nth-child(4){width: 50px;}
  #esg-management .esg-data .table td:nth-child(5){width: 60px;}


  #esg-management .esg-data .data .table:nth-child(3) td:nth-child(1){width: 100px;}

  #esg-management .esg-data table td br{display: block;}




  .dd-file .file-box input{display: none;}
    
  .banner2{padding: 50px 0; margin: 35px 0 35px;}

  #safety-management .declaration .desc {letter-spacing: -0.9px;}
  #safety-management .declaration .desc .moView{display: block;}



  /* car */
  .car .num .radar{width: 38px; height: 38px;}

  .car section .grid li {height: 130px; padding: 20px 9px 15px 10px}
  .car .in-tab p {font-size: 0.8em;}
  .car .in-tab.moView{display: block;}
  .car #front .grid {grid-template-columns: repeat(2, 1fr); overflow: hidden; margin: 40px 0 100px;}
  .car #front .grid li:nth-child(1) img {width: 70%; bottom: 6px;}
  .car #front .grid li:nth-child(2) img {width: 47%; bottom: 6px;}
  .car #front .grid li:nth-child(3) img {width: 46%;}
  .car #front .grid li:nth-child(4) img {width: 50%; bottom: 8px;}
  .car #front .grid li:nth-child(5) img {width: 40%;}
  .car #front .grid li:nth-child(6) img {width: 45%; bottom: -6px; right: 0;}
  .car #front .shadow:nth-child(2){right: 10%; bottom: 8%; max-width: 200px;}
  .car #front .shadow:nth-child(3){left: 0; bottom: 5%; max-width: 500px;}
  .car #front .shadow:nth-child(4){max-width: 500px; left: 3%; bottom: -10%;}
  .car #front .shadow:nth-child(5){left: 0; bottom: -5%; max-width: 500px;}

  .car #front .moView{display: block;}

  .car #rear .grid {grid-template-columns: repeat(2, 1fr);overflow: hidden;}
  .car #rear .grid li:nth-child(1) img {width: 50%; bottom: 6px;}
  .car #rear .grid li:nth-child(2) img {width: 35%; bottom: 6px;}
  .car #rear .grid li:nth-child(3) img {width: 50%;}
  .car #rear .grid li:nth-child(4) img {width: 50%; bottom: 10px;}
  .car #rear .shadow{left: -4%; bottom: -34%;}
  .car #rear .shadow:nth-child(3){bottom: -40%; left: 0%;}

  .car #cowl .grid {grid-template-columns: repeat(2, 1fr); overflow: hidden;}
  .car #cowl .grid li:nth-child(1) img {width: 50%; bottom: 20px; right: 20px;}
  .car #cowl .grid li:nth-child(2) img {width: 50%;}
  .car #cowl .grid li:nth-child(3) img {width: 50%; bottom: 8px;}
  .car #cowl .grid li:nth-child(4) img {width: 60%; right: 10px; bottom: 8px;}
  .car #cowl .shadow:nth-child(2){right: 10%; bottom: 8%; max-width: 200px;}
  .car #cowl .shadow:nth-child(3){left: 0; bottom: 5%; max-width: 500px;}
  .car #cowl .shadow:nth-child(4){max-width: 500px; left: 3%; bottom: -10%;}
  .car #cowl .shadow:nth-child(5){left: 0; bottom: -5%; max-width: 500px;}

  .car #filler .grid{grid-template-columns: repeat(2, 1fr); overflow: hidden;}
  .car #filler .grid li:nth-child(1) img {width: 50%; }
  .car #filler .grid li:nth-child(2) img {width: 20%;}
  .car #filler .grid li:nth-child(3) img {width: 30%;}
  .car #filler .grid li:nth-child(4) img {width: 50%; bottom: 10px;}

  .car #scuff .grid{grid-template-columns: repeat(2, 1fr);overflow: hidden;}
  .car #scuff .grid li:nth-child(1) img {width: 70%;}
  .car #scuff .grid li:nth-child(2) img {width: 35%; bottom: 6px;}
  .car #scuff .grid li:nth-child(3) img {width: 50%; bottom: 20px}
  .car #scuff .grid li:nth-child(4) img {width: 60%;}
  .car #scuff .grid li:nth-child(5) img{width: 60%;}
  .car #scuff .shadow{bottom: -6%;}
  
  .car #etc .grid{grid-template-columns: repeat(2, 1fr);overflow: hidden;}
  .car #etc .grid li:nth-child(1) img {width: 35%; bottom: 6px;}
  .car #etc .grid li:nth-child(4) img{width: 56%;}
  .car #etc .grid li:nth-child(5) img{width: 50%;}
  .car #etc .shadow{bottom: -6%;}

  .car #trunk  .grid{grid-template-columns: repeat(2, 1fr); overflow: hidden;}
  .car #trunk .grid li:nth-child(1) img {width: 45%; right: 20px; bottom: 6px;}
  .car #trunk .grid li:nth-child(2) img {width: 45%; right: 20px; bottom: 10px;}
  .car #trunk .grid li:nth-child(3) img {width: 35%; right: 10px; bottom: 4px;}
  .car #trunk .grid li:nth-child(4) img {width: 35%; bottom: 20px; }
  .car #trunk .grid li:nth-child(5) img {width: 45%; bottom: 8px; right: 20px;}
  .car #trunk .grid li:nth-child(6) img {width: 45%; right: 20px; bottom: 8px;}
  .car #trunk .shadow{left: -4%; bottom: -34%;}
  .car #trunk .shadow:nth-child(3){bottom: -40%; left: 0%;}
}





@media screen and (max-width: 360px) {
  
  #visit-request-info .security .content {height: 620px; overflow: hidden;}  
  #visit-request-info .notice .content {height: 250px; overflow: hidden;}
}




/* Report-it: Process section */
#report-it .process-wrap { margin-top: 32px; padding: 22px 24px; border: 1px solid #E3ECFF;  border-radius: 12px; }
#report-it .process-wrap .sp-title-sml { display: inline-flex; align-items: center; gap: 16px; font-size: 18px; font-weight: 700;  }
#report-it .process-wrap .sp-title-sml::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1A46C7; box-shadow: 0 0 0 6px rgba(26, 70, 199, 0.12); }
#report-it .process-wrap .process { display: block; margin-top: 12px; padding-top: 14px; font-size: 16px; line-height: 1.7; color: #1B2B5C; word-break: keep-all; }
#report-it .process-wrap .process-time { display: block; font-weight: 400; font-size: 14px; color: #6B7A99; }
#report-it .noti.option { display: block; font-size: 12px; color: #6B7A99; }

@media screen and (max-width: 1399px) { 
  #report-it .process-wrap { padding: 18px; }
  #report-it .process-wrap .sp-title-sml { font-size: 16px; }
  #report-it .process-wrap .process { font-size: 15px; }
}

@media screen and (max-width: 767px) { 
  #report-it .process-wrap { padding: 14px; border-radius: 8px; }
  #report-it .process-wrap .sp-title-sml { font-size: 15px;  gap :5px 10px;flex-wrap: wrap;}
  #report-it .process-wrap .process { font-size: 14px; line-height: 1.6; }
  #report-it .process-wrap .process-time { font-size: 12px; }
}

/* Report-it: arrow flow nodes */
#report-it .process-wrap .process-flow { display: flex; flex-wrap: wrap; margin-top: 12px; padding-top: 14px;  }
#report-it .process-wrap .process-flow .node { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: #F7FAFF; color: #1B2B5C; font-size: 15px; font-weight: 600;  }
#report-it .process-wrap .process-flow .node + .node { position: relative; margin-left: 22px; }
#report-it .process-wrap .process-flow .node + .node::before { content: "→"; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); color: #1A46C7; font-weight: 700; }

@media screen and (max-width: 1399px) {
  #report-it .process-wrap .process-flow .node { font-size: 14px; padding: 7px 10px; }
  #report-it .process-wrap .process-flow .node + .node { margin-left: 18px; }
  #report-it .process-wrap .process-flow .node + .node::before { left: -14px; }
}

@media screen and (max-width: 767px) {
  #report-it .process-wrap .process-flow { gap: 8px 10px; }
  #report-it .process-wrap .process-flow .node { font-size: 13px; padding: 6px 10px; }
  #report-it .process-wrap .process-flow .node + .node { margin-left: 14px; }
  #report-it .process-wrap .process-flow .node + .node::before { left: -12px; }
}
/* Report-it: Contact section */
#report-it .contact-section { margin-top: 60px; padding: 22px 24px; border: 1px solid #E3ECFF; border-radius: 12px; }
#report-it .contact-section .section-title { display: inline-flex; align-items: center; gap: 16px; font-size: 18px; font-weight: 700;  margin-bottom: 12px; padding-bottom: 0; border-bottom: none; }
#report-it .contact-section .section-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1A46C7; box-shadow: 0 0 0 6px rgba(26, 70, 199, 0.12); }
#report-it .contact-section .section-title .optional { font-size: 14px; font-weight: 400; color: #6B7A99; margin-left: 0; }
#report-it .contact-section .section-desc { font-size: 14px; color: #6B7A99; margin-bottom: 16px; line-height: 1.5; padding-top: 12px;  }
#report-it .contact-section .dd-form-table { margin-bottom: 0; }
#report-it .contact-section .contact-notice { margin-top: 16px; padding-top: 16px; border-top: 1px solid #E9ECEF; }

@media screen and (max-width: 1399px) {
  #report-it .contact-section { margin-top: 30px; }
  #report-it .contact-section .section-title { font-size: 16px; }
  #report-it .contact-section .section-title .optional { font-size: 13px; }
}

@media screen and (max-width: 767px) {
  #report-it .contact-section { margin-top: 24px; }
  #report-it .contact-section .section-title { font-size: 15px; margin-bottom: 12px; padding-bottom: 8px; }
  #report-it .contact-section .section-title .optional { font-size: 12px; }
  #report-it .contact-section .section-desc { font-size: 13px; margin-bottom: 20px; }
}

/* Report-it: Contact email styling */
#report-it .contact-section .contact-email { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0; padding: 12px 16px; border: 1px solid #D1E0FF; border-radius: 8px; font-size: 14px; font-weight: 600; color: #1B2B5C; }
#report-it .contact-section .contact-email a { color: #1A46C7; text-decoration: none; font-weight: 700; transition: color 0.2s ease; }
#report-it .contact-section .contact-email a:hover { color: #0D2B8A; text-decoration: underline; }

@media screen and (max-width: 1399px) {
  #report-it .contact-section .contact-email { margin: 14px 0; padding: 10px 14px; font-size: 13px; }
  #report-it .contact-section .contact-email::before { font-size: 15px; }
}

@media screen and (max-width: 767px) {
  #report-it .contact-section .contact-email { margin: 12px 0; padding: 8px 12px; font-size: 12px; border-radius: 6px; }
  #report-it .contact-section .contact-email::before { font-size: 14px; }
}