@charset "utf-8";

body {--his-offset: 0px;}
body:has(header:not(.header--hide)) {--his-offset: var(--header-h);}
body:has(header:not(.header--hide)) .his-cate-top + #his2021 {margin-top: var(--his-offset);}
body:has(header:not(.header--hide)) .fixed-box + .cont {margin-top: var(--his-offset);}

/* banner */
.banner{width: 100%; padding: 192px 0 165px; position: relative;}
#company .banner{background: url(../images/intro-bg.png) no-repeat center; background-size: cover;}

.banner h1{font-size: 40px; font-weight: 700; color: #fff; font-family: 'Orbitron'; line-height: 1.2;}
.banner .banner-bar{position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,.6); width: 100%;}
.banner .banner-bar a{padding: 17.75px 16.5px; background-color: #0C00AE;}
.banner .banner-bar img{width: 21px; height: 18.5px;}

.banner .dropdown {--rounded: 0px; --theme-1: #fff; color: var(--theme-1); position: relative; font-size: 15px; height: 100%; background-color: none; align-items: center; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.banner .dropdown .trigger {padding: 18px 21px; border-radius: var(--rounded); transition: color .4s, border .4s, background .4s; display: flex; align-items: center; justify-content: space-between; gap: 1em; text-transform: uppercase; font-size: 15px; line-height: 1; border-right: 1px solid #fff; font-family: var(--font-primary);}
.banner .dropdown .trigger img{width: 18px; height: 18px; margin: 0 0 0 114px;}
.banner .dropdown ul {position: absolute; top: 100%; left: 0; width: 100%; border-bottom-left-radius: var(--rounded); border-bottom-right-radius: var(--rounded); border-top: none; display: none; background: #2B2B2B; transition: color .4s, border .4s, background .4s; z-index: 2;}
.banner .banner-bar .dropdown ul > li > a {display: flex; align-items: center; padding-inline: 1em; line-height: 1; transition: color .4s, border .4s, background .4s; gap: 0.5em; background-color: #000; font-family: var(--font-primary);}
.banner .dropdown ul > li > a img {width: 1.4em; height: 1.4em; border-radius: 50%; object-fit: cover;}
.banner .dropdown:hover .trigger {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.banner .dropdown:hover ul {display: block;}
.banner .dropdown ul > li > a:hover {color: var(--sub-color1);}
:lang(en) .banner .dropdown .trigger{line-height: 1.3;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .banner{padding: 120px 0;}
  .banner h1 {font-size: 34px;}

  .banner .dropdown {width: 180px;}
  .banner .dropdown .trigger {gap: 0; width: 100%;}
  .banner .dropdown .trigger img {margin-left: 20px;}
}
@media screen and (max-width: 767px) {
    .banner{padding: 120px 0 80px;}
    .banner h1 {font-size: 25px; text-align: center;}
    .banner .banner-bar {display: none;}

    .mo-overflow {overflow-x: auto;}
    .mo-overflow img {min-width: 720px;}
}



/* common */
.sub-inner{padding: 150px 0 160px;}
.sub-inner.pb-0 {padding-bottom: 0;}
.sub-inner h2{font-size: 60px; font-weight: 700; font-family: var(--font-primary); line-height: 1.25; margin: 0 0 60px;}
.sub-inner .sub-title {margin: 0 auto 80px;}
.sub-inner .sub-title h2{margin: 0 0 28px; font-family: var(--font-primary);}
.sub-inner .sub-title p {font-size: 20px; font-weight: 400; font-family: var(--font-primary); line-height: 1.7; word-break: keep-all;}
.sub-inner .sub-title img {width: 100%; margin: 50px 0 0;}

.sub-cate {width: 100%; display: flex; justify-content: space-around; align-items: center; border-radius: 22px; background: #F6F6F6; margin: 0 0 70px;}
.sub-cate.moView {display: none;}
.sub-cate li {width: 100%; position: relative;}
.sub-cate li::after {content: ''; display: block; width: 1px; height: 17px; background: #DEDEDE; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.sub-cate li:last-child:after {display: none;}
.sub-cate li a {display: block; width: 100%; font-size: 17px; font-weight: 400; font-family: var(--font-primary); color: #646464; line-height: 44px; text-align: center;}
.sub-cate li.active {width: 100%; background: var(--blue); border-radius: 22px;}
.sub-cate li.active::after {display: none;}
.sub-cate li.active a {font-weight: 700; color: white;}
.sub-cate li.hide::after {display: none;}

.image-box {padding: 23px; border-radius: 15px; background-color: #f6f6f6;}
.image-box.mt {margin-top: 50px;}
.image-box.mt img{margin:0 auto; width: 60%;}
.image-box img {width: 100%;}
:lang(en) .sub-cate li:nth-of-type(4):after{content: none;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
    .sub-inner{padding: 100px 0;}
    .sub-inner h2 {font-size: 39px;}
    .sub-inner .sub-title h2 {margin: 0 0 16px;}
    .sub-inner .sub-title p {font-size: 16px;}

    .sub-cate {border-radius: 19px; margin: 0 0 70px;}
    .sub-cate.pcView {display: none;}
    .sub-cate.moView {display: grid; grid-template-columns: repeat(4, 1fr);}
    .sub-cate.moView.mb{margin-bottom: 20px;}
    .sub-cate li::after {height: 17px;}
    .sub-cate.g-s li:nth-child(4n):after {display: none;}
    .sub-cate.moView li:last-child::after {display: block;}
    .sub-cate li:last-child.active::after {display: none;}
    .sub-cate li a {font-size: 16px; line-height: 38px;}
    .sub-cate li.active {border-radius: 19px;}

    .sub-cate.pcView {display: none;}
    .sub-cate.moView {display: grid; grid-template-columns: repeat(4, 1fr);}
    .sub-cate.moView.mb{margin-bottom: 20px;}
}
@media screen and (max-width: 767px) {
    .sub-inner{padding: 70px 0;}
    .sub-inner h2 {font-size: 29px;}

    .sub-cate.moView {grid-template-columns: repeat(3, 1fr);}
    .sub-cate.moView.g-s {grid-template-columns: repeat(2, 1fr);}
    .sub-cate li::after {height: 15px;}
    .sub-cate.g-s li:nth-child(even):after {display: none;}
    .sub-cate li:nth-child(4n):after {display: block;}
    .sub-cate.s-c li:nth-child(3n):after {display: none;}
    .sub-cate li a {font-size: 15px; line-height: 40px;}
    .sub-cate li.active {border-radius: 22px;}
}
@media screen and (max-width: 360px) {
    .sub-cate {display: grid; grid-template-columns: repeat(2, 1fr);}
    .sub-cate li:nth-child(even):after {display: none;}
    .sub-cate li:nth-child(odd):after {display: block;}
    .sub-cate li.active::after {display: none;}
    .sub-cate.s-c li:nth-child(3n):after {display: block;}
    .sub-cate.s-c li.active:nth-child(3n):after {display: none;}
    .sub-cate.moView.ai-dt li:last-child {grid-column: 1 / 3; grid-row: 2 / 3;}
    .sub-cate.moView.ai-dt li:last-child::after {display: none;}
}





/* form */
.form-body .tip {font-size: 20px; font-weight: 700; font-family: var(--font-primary); margin-bottom: 16px;}
.form-body .tip span {font-size: 20px; font-weight: 700; font-family: var(--font-primary); color: var(--blue);}

.esg-form-body {}
.esg-form-body .dd-form {padding-top: 19px; border-top: 1px solid #000;}
.esg-form-body .dd-form-table tbody tr :where(th, td) {padding-block: 19px;}
.esg-form-body .dd-form .label {font-size: 18px; font-weight: 500; font-family: var(--font-primary);}
.esg-form-body .dd-form .label .req {font-size: 18px; font-weight: 500; font-family: var(--font-primary); color: var(--blue);}
.esg-form-body .dd-form .label .title {display: flex; align-items: center; justify-content: space-between; min-width: 65px;}
.esg-form-body .dd-form .label .title span {font-size: 18px; font-weight: 500; font-family: var(--font-primary);}
.esg-form-body .dd-inp .inp-box {border-radius: 23px; border: 0; background-color: #F6F6F6;}
.esg-form-body .dd-inp .inp-box:has(textarea) {border-radius: 5px;}
.esg-form-body .dd-inp .inp-box input, .esg-form-body .dd-inp .inp-box textarea {font-size: 18px; font-weight: 400; font-family: var(--font-primary);}
.esg-form-body .dd-inp .inp-box input::placeholder {color: #9C9C9C;}

.esg-form-body .dd-file .file-box label .label {border-radius: 50px; border-color: #E8E8E8; background: #fff;}
.esg-form-body .dd-file .file-box label .btn-find {border-radius: 50px; border: none; background: #646464; font-size: 18px; font-weight: 400; color: #fff; min-width: 150px; padding: 1em;}
.esg-form-body .dd-file .file-box .btn-cancel {border-radius: 50%; background: #646464;}

.esg-form-body .dd-form-indiv-policy {margin-top: 40px; padding-top: 65px; border-top: 1px solid #C9C9C9;}
.esg-form-body .dd-form-indiv-policy .content {height: 580px; background: #fff; border-radius: 5px; color: #707070;}
.esg-form-body .dd-form-indiv-policy .dd-inp .checkbox-group .checkbox label .label {font-size: 16px; color: #000;}
.esg-form-body .dd-inp .checkbox-group .checkbox label .chck.radio::before {background-color: var(--navy);}
.esg-form-body .dd-inp .checkbox-group .checkbox label input:checked ~ .chck {border-color: var(--navy);}

.esg-form-body .dd-form .submit-button {font-size: 18px; padding: 12px 34px; border-radius: 25px; background-color: #2C2C2C;}
:lang(en) .esg-form-body .dd-form .label{text-align: start;font-size: 17px; position: relative;}
:lang(en) .esg-form-body .dd-form .label > span{display: inline-block; gap: 4px; font-weight: 500;}
:lang(en) .dd-form-table colgroup .col--th{width: 180px;}
/* :lang(en) .esg-form-body .dd-form .label .req{position: absolute; right: 0;} */
.inquiry-form-body {}
.inquiry-form-body .dd-form {padding-top: 19px; border-top: 1px solid #000;}
.inquiry-form-body .dd-form-table tbody tr :where(th, td) {padding-block: 19px;}
.inquiry-form-body .dd-form .label {font-size: 18px; font-weight: 500; font-family: var(--font-primary);}
.inquiry-form-body .dd-form .label .req {font-size: 18px; font-weight: 500; font-family: var(--font-primary); color: var(--blue);}
.inquiry-form-body .dd-form .label .title {display: flex; align-items: center; justify-content: space-between; min-width: 65px;}
.inquiry-form-body .dd-form .label .title span {font-size: 18px; font-weight: 500; font-family: var(--font-primary);}
.inquiry-form-body .dd-inp .inp-box {border-radius: 23px; border: 0; background-color: #F6F6F6;}
.inquiry-form-body .dd-inp .inp-box:has(textarea) {border-radius: 5px;}
.inquiry-form-body .dd-inp .inp-box input, .inquiry-form-body .dd-inp .inp-box textarea {font-size: 18px; font-weight: 400; font-family: var(--font-primary);}
.inquiry-form-body .dd-inp .inp-box input::placeholder {color: #9C9C9C;}

.inquiry-form-body .dd-form-indiv-policy {margin-top: 40px; padding-top: 65px; border-top: 1px solid #C9C9C9;}
.inquiry-form-body .dd-form-indiv-policy .content {height: 580px; background: #fff; border-radius: 5px; color: #707070;}
.inquiry-form-body .dd-form-indiv-policy .dd-inp .checkbox-group .checkbox label .label {font-size: 16px; color: #000;}
.inquiry-form-body .dd-inp .checkbox-group .checkbox label .chck.radio::before {background-color: var(--navy);}
.inquiry-form-body .dd-inp .checkbox-group .checkbox label input:checked ~ .chck {border-color: var(--navy);}

.inquiry-form-body .dd-form .submit-button {font-size: 18px; padding: 12px 34px; border-radius: 25px; background-color: #2C2C2C;}

.footnote {}
.footnote strong {display: block; font-size: 16px; font-weight: 700; font-family: var(--font-primary); line-height: 1.5; color: #646464;}
.footnote strong br {display: none;}
.footnote p {margin-left: 57px; font-size: 14px; font-weight: 400; font-family: var(--font-primary); line-height: 1.25; color: #646464; word-break: keep-all;}
:lang(en) .dd-file .file-box label .btn-find{white-space: nowrap;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
    .esg-form-body .dd-form-table tbody tr :where(th, td) {padding-bottom: 0;}
    .esg-form-body .dd-inp .inp-box input, .esg-form-body .dd-inp .inp-box textarea {font-size: 16px;}
    
    .inquiry-form-body .dd-form-table tbody tr :where(th, td) {padding-bottom: 0;}
    .inquiry-form-body .dd-inp .inp-box input, .inquiry-form-body .dd-inp .inp-box textarea {font-size: 16px;;}

    .footnote {display: block;}
    .footnote strong {font-size: 14px; margin-bottom: 10px;}
    .footnote strong br {display: block;}
    .footnote p {margin-left: 0; font-size: 14px;}
}
@media screen and (max-width: 767px) {
    .footnote {margin-bottom: 20px;}
    .footnote strong {font-size: 14px; margin-bottom: 0;}
    .footnote strong br {display: none;}
    .footnote p {margin-left: 10px; font-size: 14px; line-height: 1.3; word-break: keep-all;}
    .footnote p .pcView {display: block;}
    :lang(en) .esg-form-body .dd-form .label{justify-content: start;}
}



/* company */
#company .sub-title h2 {margin-bottom: 60px;}

.intro .txt-top strong {font-size: 36px; font-family: 'Orbitron'; font-weight: 700; color: #CBCBCB; line-height: 1.33; text-transform: uppercase;}
.intro .txt-top p {font-size: 18px; color: #000; font-family: var(--font-primary); line-height: 1.7; word-break: keep-all; margin-top: 20px;}
.intro .txt-top p span {color: #000; line-height: 1.7; font-size: 20px; font-weight: 700; margin: 40px 0 11px; display: block; font-family: var(--font-primary);}

.intro .intro-step-list {display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; margin-top: 100px;}
.intro .intro-step-list .item {width: 100%; height: 100%;}
.intro .intro-step-list .item .step-top {display: flex; align-items: center; width: 100%; height: 64px; padding-left: 30px; color: #fff; position: relative;}
.intro .intro-step-list .item .step-top .year {font-size: 30px; font-weight: 700; font-family: var(--font-primary); margin-right: 20px;}
.intro .intro-step-list .item .step-top .sub {font-size: 28px; font-weight: 400; font-family: var(--font-primary);}
.intro .intro-step-list .item .step-top .intro-step-arrow {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.intro .intro-step-list .item .step-top .intro-step-arrow.long {display: block;}
.intro .intro-step-list .item .step-top .intro-step-arrow.short {display: none;}

.intro .intro-step-list .item .step-bottom {width: 100%; padding: 25px 0 25px 25px; position: relative;}
.intro .intro-step-list .item .sbj {font-size: 24px; font-weight: 700; font-family: var(--font-primary); line-height: 1.25; word-break: keep-all;}
.intro .intro-step-list .item .list-box {width: 100%; height: 100%;}
.intro .intro-step-list .item .list-box .step-txt {margin-top: 10px;}
.intro .intro-step-list .item .list-box .step-txt li {font-size: 18px; font-weight: 400; font-family: var(--font-primary); line-height: 1.5; word-break: keep-all; padding-left: 15px; position: relative; margin-bottom: 5px;}
.intro .intro-step-list .item .list-box .step-txt li::before {content: ''; position: absolute; top: 10px; left: 0; width: 7px; height: 7px; border-radius: 50%; background-color: #CBCBCB;}

.intro .intro-step-list .item:nth-child(1) {padding-top: 128px; border-bottom: 1px solid var(--blue);}
.intro .intro-step-list .item:nth-child(1) .step-top {background-image: linear-gradient(to right, var(--blue), #2667B4);}
.intro .intro-step-list .item:nth-child(1) .sbj {color: var(--blue);}

.intro .intro-step-list .item:nth-child(2) {padding-top: 64px; border-bottom: 1px solid #2667B4;}
.intro .intro-step-list .item:nth-child(2) .step-top {background-image: linear-gradient(to right, #2667B4, var(--navy));}
.intro .intro-step-list .item:nth-child(2) .sbj {color: #2667B4;}

.intro .intro-step-list .item:nth-child(3) {border-bottom: 1px solid var(--navy);}
.intro .intro-step-list .item:nth-child(3) .step-top {background-image: linear-gradient(to right, var(--navy), #F47E4D);}
.intro .intro-step-list .item:nth-child(3) .sbj {color: var(--navy);}


.intro-icon-box {padding: 35px; width: 100%; margin-top: 100px; border-radius: 20px; background-color: #F0F6FE;}
.intro-icon-box .contents {display: flex; justify-content: space-between; align-items: center;}
.intro-icon-box .contents:last-child {margin-top: 30px;}
.intro-icon-box .contents h3 {width: 175px; font-size: 21px; font-weight: 700; font-family: var(--font-primary);}
.intro-icon-box .contents:first-child h3 {color: var(--blue);}
.intro-icon-box .contents:last-child h3 {color: var(--navy);}
.intro-icon-box .contents .icon-list {width: calc(100% - 175px); display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;}
.intro-icon-box .contents .icon-list li {width: 100%; height: 142px; padding: 12px 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: 10px; background-color: #fff;}
.intro-icon-box .contents .icon-list li img {width: 98px;}
.intro-icon-box .contents .icon-list li p {margin-top: 10px; font-size: 17px; font-weight: 400; font-family: var(--font-primary); line-height: 1.1; text-align: center; word-break: keep-all;}
:lang(en) .intro-icon-box .contents .icon-list li p{font-size: 14px;}
:lang(en) .intro-icon-box .contents .icon-list li {height: 150px;}
:lang(en) .intro-icon-box .contents h3{width: auto}
/* en company */
:lang(en) .intro .intro-step-list .item .step-top{padding-left: 15px;}
:lang(en) .intro .intro-step-list .item .step-top .intro-step-arrow{display: none;}
:lang(en) .intro .intro-step-list .item .step-top .intro-step-arrow.short{display: none;}
:lang(en) .intro .intro-step-list .item .step-top .year{font-size: 18px;}
:lang(en) .intro .intro-step-list .item .step-top .sub{font-size: 19px;}
.greet .sub-title .img-box {position: relative;}
.greet .sub-title .img-box p {position: absolute; top: 45px; left: 40px; font-size: 30px; font-weight: 700; font-family: var(--font-primary); line-height: 1.6; color: #646464;}
.greet .content {display: grid; grid-template-columns: auto 796px;}
.greet .content h3 {font-size: 40px; font-weight: 700; font-family: var(--font-primary); line-height: 1.5; color: var(--navy); margin-bottom: 20px;}
.greet .content .txt-box {width: 100%;}
.greet .content .txt-box p {font-size: 18px; font-weight: 400; font-family: var(--font-primary); line-height: 1.7;}
.greet .content .txt-box .sign {font-size: 20px; font-weight: 600; text-align: right; color: #646464; margin-top: 20px;}
.greet .content .txt-box .sign span {font-size: 20px; font-weight: 700; color: #000;}
.greet .content .txt-box .sign img {width: 120px; display: inline-block;}

.history .sub-title {display: grid; grid-template-columns: auto 796px;}
.history .sub-title .cont h3 {padding: 10px 0 24px; border-top: 2px solid #646464; font-size: 30px; font-weight: 700; color: #646464;}
.history .sub-title .cont p {font-size: 18px; font-weight: 400; font-family: var(--font-primary); line-height: 1.7; word-break: keep-all;}
.history .sub-title .cont p strong {font-size: 18px; font-weight: 700; color: var(--blue);}
.history .sub-title .cont p span {font-size: 18px; font-weight: 400; font-family: var(--font-primary); line-height: 1.7; color: var(--blue);}

.history .sub-title .cont ul {display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; padding: 32px 0; margin-top: 40px; border-radius: 10px; background-color: #F6F6F6;}
.history .sub-title .cont ul li {padding: 0 42px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.history .sub-title .cont ul li img {width: 170px; margin: 0;}
.history .sub-title .cont ul li p {font-size: 16px; font-weight: 700; font-family: var(--font-primary); line-height: 1.5; text-align: center; margin-top: 10px;}
.history .sub-title .cont ul li p span {font-size: 16px; font-weight: 700; font-family: var(--font-primary); line-height: 1.5; text-align: center; color: var(--blue); width: 100%;}

.history .comp-body {padding-bottom: 100px;}
.history .comp-body:last-child {margin-bottom: 0;}
.history .comp-body .his-title {position: relative; margin-bottom: 60px;}
.history .comp-body .his-title .txt-box {text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.history .comp-body .his-title .txt-box h3 {font-size: 30px; font-weight: 700; font-family: var(--font-primary); color: white;}
.history .comp-body .his-title .txt-box h4 {font-size: 40px; font-weight: 700; font-family: var(--font-primary); color: #CBCBCB; text-transform: uppercase;}
.history .comp-body .his-title .img-box img {width: 100%; height: 100%; object-fit: cover;}

.history .comp-body .his-body {display: grid; grid-template-columns: 1fr 796px;}
.history .his-cate-top {display: none;}
.history .comp-body .his-body .his-cate li {padding-left: 20px; margin-bottom: 24px; position: relative;}
.history .comp-body .his-body .his-cate li::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: #CBCBCB;}
.history .comp-body .his-body .his-cate li a {font-size: 20px; font-weight: 400; font-family: var(--font-primary); color: #CBCBCB; text-transform: uppercase;}
.history .comp-body .his-body .his-cate li.active::before {background-color: var(--navy);}
.history .comp-body .his-body .his-cate li.active a {font-weight: 700; color: var(--navy);}

.history .comp-body .his-body .his-content {display: flex; justify-content: space-between; align-items: start;}

.history .comp-body .his-body .his-content .progress {width: 7px; height: 100%; background-color: #F6F6F6; position: relative; overflow: hidden;}
.history .comp-body .his-body .his-content .progress .progress-bar {width: 7px; height: 0; max-height: 100%; background-color: var(--blue); transition: height 0.8s cubic-bezier(0.25, 1, 0.5, 1);}

.history .comp-body .his-body .his-list {width: 690px;}
.history .comp-body .his-body .his-list li {display: grid; grid-template-columns: 100px 1fr; padding: 30px 0; border-top: 1px solid #CBCBCB;}
.history .comp-body .his-body .his-list li.only .his-cont p {line-height: 35px;}
.history .comp-body .his-body .his-list li h3 {font-size: 30px; font-weight: 700; font-family: var(--font-primary); line-height: 35px;}
.history .comp-body .his-body .his-list li .his-cont {}
.history .comp-body .his-body .his-list li .his-cont li {display: block; padding: 0; border: 0; margin-bottom: 16px;}
.history .comp-body .his-body .his-list li .his-cont li:last-child {margin-bottom: 0;}
.history .comp-body .his-body .his-list li .his-cont li p {font-size: 18px; font-weight: 400; font-family: var(--font-primary); line-height: 28px; word-break: keep-all;}
.history .comp-body .his-body .his-list li .his-cont li p strong {font-size: 18px; font-weight: 700; font-family: var(--font-primary); line-height: 28px; color: var(--navy); word-break: keep-all;}
.history .comp-body .his-body .his-list li .his-cont li p span {font-size: 13px; font-weight: 700; font-family: var(--font-primary); color: var(--blue); display: inline-block; word-break: keep-all;}

:lang(en) .history .sub-title .cont ul li{padding: 0 16px;}


.performance .container {display: grid; grid-template-columns: 1fr 796px; min-height: 50px;}
.performance .container .fixed-box {position: sticky; top: 150px; height: 700px; z-index: 1; display: flex; justify-content: space-between;}
.performance .container .res-cate {display: block; margin-top: 120px;}
.performance .container .res-cate li {padding-left: 20px; margin-bottom: 24px; position: relative;}
.performance .container .res-cate li::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: #CBCBCB;}
.performance .container .res-cate li a {font-size: 20px; font-weight: 400; font-family: var(--font-primary); color: #CBCBCB; text-transform: uppercase;}
.performance .container .res-cate li.active::before {background-color: var(--blue);}
.performance .container .res-cate li.active a {font-weight: 700; color: var(--blue);}

.performance .container .scroll-container {position: relative; top: 0; right: 0; width: 7px; height: 700px; background-color: #F6F6F6;}
.performance .container .scroll-container .scroll-bar {position: absolute; top: 0; left: 0; width: 100%; height: 180px; background-color: var(--blue);}

.performance .container .his-box {padding-top: 150px;}
.performance .container .his-box:first-child {padding-top: 0;}
.performance .container .cont {position: relative;}
.performance .container .cont h3 {font-size: 30px; font-weight: 700; font-family: var(--font-primary); text-align: right;}
.performance .container .cont h4 {font-size: 70px; font-weight: 500; font-family: var(--font-primary); color: #CBCBCB; text-align: right; text-transform: uppercase;}

.performance .container .cont .perf-list {width: 695px; margin: 35px 0 0 100px;}
.performance .container .cont .perf-list .perf-list-item {display: grid; grid-template-columns: 120px 1fr; padding: 30px 0; border-top: 1px solid #CBCBCB;}
.performance .container .cont .perf-list .perf-list-item h5 {font-size: 30px; font-weight: 700; font-family: var(--font-primary); color: var(--blue); line-height: 1;}
.performance .container .cont .perf-list .perf-list-item ul li {font-size: 18px; font-weight: 400; font-family: var(--font-primary); margin-bottom: 14px; word-break: keep-all;}



.map .sub-cate li.active {background: var(--navy);}

.map .info {display: grid; grid-template-columns: 1fr 796px; gap: 23px;}
.map .info div {padding: 24px 0; border-top: 1px solid;}
.map .info .title {border-color: #000;}
.map .info .title h3 {font-size: 26px; font-weight: 700; line-height: 28px; font-family: var(--font-primary);}
.map .info .txt-box {display: grid; grid-template-columns: 465px 1fr; border-color: #CBCBCB;}
.map .info .txt-box .tel {border: 0; padding: 0; display: flex; justify-content: space-between; align-items: center;}
.map .info .txt-box p {font-size: 18px; font-weight: 400; font-family: var(--font-primary); line-height: 28px;}
.map .info .txt-box p strong {font-size: 18px; font-weight: 700;}
.map .info .txt-box .bar { width: 1px; height: 20px; background-color: #cbcbcb; padding: 0; border: 0;}
.map .info .txt-box .bar.bar1 {display: block;}
.map .info .txt-box .bar.bar2 {display: none;}

.map .map-box .wrap_map .map_border {display: none;}
.map .map-box .wrap_controllers {display: none;}
.map .map-box .cont {display: none;}
:lang(en) .map .info .txt-box{display: flex; flex-direction: column;}
:lang(en) .map .info .txt-box .tel{justify-content: start; gap:16px;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
    .intro .txt-top p{font-size: 16px; word-break: keep-all; margin-top: 40px;}

    .intro .intro-step-list .item .step-top {height: 54px; padding-left: 15px;}
    .intro .intro-step-list .item .step-top .year {font-size: 22px; margin-right: 15px;}
    .intro .intro-step-list .item .step-top .sub {font-size: 20px;}
    .intro .intro-step-list .item .step-top .intro-step-arrow.long {display: none;}
    .intro .intro-step-list .item .step-top .intro-step-arrow.short {display: block;}

    .intro .intro-step-list .item .step-bottom {padding: 15px 0 25px 15px;}
    .intro .intro-step-list .item .sbj {font-size: 20px;}
    .intro .intro-step-list .item .list-box .step-txt li {font-size: 16px; padding-left: 15px;}

    .intro .intro-step-list .item:nth-child(1) {padding-top: 108px;}
    .intro .intro-step-list .item:nth-child(2) {padding-top: 54px;}

    .intro-icon-box .contents {display: block;}
    .intro-icon-box .contents h3 {margin-bottom: 15px;}
    .intro-icon-box .contents .icon-list {width: 100%; gap: 10px;}
    .intro-icon-box .contents .icon-list li {height: 130px;}
    .intro-icon-box .contents .icon-list li img {width: 80px;}
    .intro-icon-box .contents .icon-list li p {font-size: 15px;}

    .greet .sub-title .img-box p {top: 30px; left: 30px; font-size: 26px; color: #000;}
    .greet .content {display: block;}
    .greet .content h3 {font-size: 32px;}
    .greet .content .txt-box p {font-size: 16px; word-break: keep-all;}
    .greet .content .txt-box .sign {font-size: 18px; margin-top: 20px;}
    .greet .content .txt-box .sign span {font-size: 18px;}

    .history .sub-title {display: block;}
    .history .sub-title .cont h3 {padding: 10px 0 24px; font-size: 24px;}
    .history .sub-title .cont p {font-size: 16px;}
    .history .sub-title .cont p strong {font-size: 16px;}
    .history .sub-title .cont p span {font-size: 16px;}

    .history .sub-title .cont ul {padding: 24px 0;}
    .history .sub-title .cont ul li {padding: 0 30px;}
    .history .sub-title .cont ul li img {width: 170px; margin: 0;}
    .history .sub-title .cont ul li p {font-size: 14px;}
    .history .sub-title .cont ul li p span {font-size: 14px;}

    .history .comp-body .his-title .txt-box h3 {font-size: 22px;}
    .history .comp-body .his-title .txt-box h4 {font-size: 30px;}

    .history .comp-body .his-body {display: block;}
    .history .his-cate {display: none;}
    .history .his-cate-top {display: block; position: sticky; top: 0; width: 100%; background-color: #fff; z-index: 888; transform: translateY(var(--his-offset)); transition: transform .4s;}
    
    .history .his-cate-top ul {width: 720px; padding-block: 20px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
    .history .his-cate-top li {padding-left: 20px; position: relative;}
    .history .his-cate-top li::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: #CBCBCB;}
    .history .his-cate-top li a {font-size: 20px; font-weight: 400; font-family: var(--font-primary); color: #CBCBCB; text-transform: uppercase;}
    .history .his-cate-top li.active::before {background-color: var(--navy);}
    .history .his-cate-top li.active a {font-weight: 700; color: var(--navy);}
    .his-cate-top + #his2021 {margin-top: 0; transition: margin-top .4s;}

    .history .comp-body .his-body .his-content {display: flex; justify-content: space-between; align-items: start; height: 100%;}

    .history .comp-body .his-body .his-content .progress {width: 7px; height: 100%; position: static; display: block;}
    .history .comp-body .his-body .his-content .progress .progress-bar {width: 7px; height: 0;}

    .history .comp-body .his-body .his-list {width: 650px; height: 100%;}
    .history .comp-body .his-body .his-list li {padding: 24px 0;}
    .history .comp-body .his-body .his-list li h3 {font-size: 26px;}
    .history .comp-body .his-body .his-list li .his-cont li {margin-bottom: 12px;}
    .history .comp-body .his-body .his-list li .his-cont li p {font-size: 18px;}
    .history .comp-body .his-body .his-list li .his-cont li p strong {font-size: 18px;}
    .history .comp-body .his-body .his-list li .his-cont li p span {font-size: 11px;}

    .performance .container {display: block;}
    .performance .container .fixed-box {display: block; height: 100%; top: 0; background-color: #fff; padding-top: 20px; transform: translateY(var(--his-offset)); transition: transform .4s;}
    .performance .container .res-cate {margin-top: 0; display: flex; justify-content: space-between;}
    .performance .container .res-cate li {padding-left: 15px; margin-bottom: 32px;}
    .performance .container .res-cate li::before {width: 7px; height: 7px;}
    .performance .container .res-cate li a {font-size: 18px;}
    .fixed-box + .cont {margin-top: 0; transition: margin-top .4s;}
    #his2021 {padding-top: 30px;}

    .performance .container .scroll-container {display: none;}

    .performance .container .cont h3 {font-size: 24px;}
    .performance .container .cont h4 {font-size: 50px;}

    .performance .container .his-box {padding-top: 80px;}
    .performance .container .cont .perf-list {width: 100%; margin: 28px 0 0;}
    .performance .container .cont .perf-list .perf-list-item {grid-template-columns: 120px 1fr; padding: 30px 0;}
    .performance .container .cont .perf-list .perf-list-item ul li {font-size: 16px; margin-bottom: 14px;}

    .map .info {grid-template-columns: 1fr 480px; gap: 20px;}
    .map .info div {padding: 16px 0 24px;}
    .map .info .title h3 {font-size: 22px;}
    .map .info .txt-box {display: block;}
    .map .info .txt-box .tel {justify-content: start; gap: 20px;}
    .map .info .txt-box p {font-size: 16px;}
    .map .info .txt-box p strong {font-size: 16px;}
    .map .info .txt-box .bar.bar1 {display: none;}
    .map .info .txt-box .bar.bar2 {display: block;}
}
@media screen and (max-width: 767px) {
    .intro .intro-step-list {display: flex; flex-direction: column; gap: 50px;}
    .intro .intro-step-list .item .step-top {height: 54px; padding-left: 15px;}
    .intro .intro-step-list .item .step-top .year {font-size: 22px; margin-right: 15px;}
    .intro .intro-step-list .item .step-top .sub {font-size: 20px;}
    .intro .intro-step-list .item .step-top .intro-step-arrow.long {display: block;}
    .intro .intro-step-list .item .step-top .intro-step-arrow.short {display: none;}

    .intro .intro-step-list .item .step-bottom {padding: 15px 0 25px 15px;}
    .intro .intro-step-list .item .sbj {font-size: 20px;}
    .intro .intro-step-list .item .list-box .step-txt li {font-size: 16px; padding-left: 15px;}

    .intro .intro-step-list .item:nth-child(1) {padding-top: 0;}
    .intro .intro-step-list .item:nth-child(2) {padding-top: 0}

    .intro-icon-box {padding: 35px 15px;}
    .intro-icon-box .contents .icon-list {grid-template-columns: 1fr 1fr; gap: 15px;}

    .greet .sub-title .img-box p {width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; text-align: center;}
    .greet .bg {height: 180px; background-image: url(../images/sub/comp01-1.png);}
    .greet .bg img {display: none;}
    .greet .content h3 {font-size: 26px;}

    .history .sub-title .cont p .resp {display: none;}

    .history .sub-title .cont ul {padding: 24px 0;}
    .history .sub-title .cont ul li {padding: 0 15px;}
    .history .sub-title .cont ul li p {font-size: 12px;}
    .history .sub-title .cont ul li p span {font-size: 12px;}

    .history .his-cate-top {}
    .history .his-cate-top ul {width: 90%; padding-block: 15px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
    .history .his-cate-top li {padding-left: 20px;}
    .history .his-cate-top li::before {width: 10px; height: 10px;}
    .history .his-cate-top li a {font-size: 18px;}

    .history .comp-body .his-title .img-box {height: 100px;}
    .history .comp-body .his-title .txt-box {width: 100%;}
    .history .comp-body .his-title .txt-box h3 {font-size: 16px;}
    .history .comp-body .his-title .txt-box h4 {font-size: 22px;}

    .history .comp-body .his-body .his-list {width: 100%; height: 100%;}
    .history .comp-body .his-body .his-list li {padding: 20px 0; grid-template-columns: 80px 1fr;}
    .history .comp-body .his-body .his-list li h3 {font-size: 22px;}
    .history .comp-body .his-body .his-list li .his-cont li {margin-bottom: 10px;}
    .history .comp-body .his-body .his-list li .his-cont li p {font-size: 16px;}
    .history .comp-body .his-body .his-list li .his-cont li p strong {font-size: 16px;}
    .history .comp-body .his-body .his-list li .his-cont li p span {font-size: 12px;}

    .performance .container .fixed-box {padding-bottom: 15px;}
    .performance .container .fixed-box h2 {margin-bottom: 30px;}
    .performance .container .res-cate {display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 0;}
    .performance .container .res-cate li {padding: 0; margin: 0; border: 1px solid #CBCBCB; border-radius: 15px;}
    .performance .container .res-cate li::before {display: none;}
    .performance .container .res-cate li a {font-size: 15px; display: block; width: 100%; text-align: center; padding-block: 5px;}
    .performance .container .res-cate li.active {background-color: var(--blue); border-color: var(--blue);}
    .performance .container .res-cate li.active a {color: white;}

    .performance .container .scroll-container {display: none;}

    .performance .container .cont h3 {font-size: 20px;}
    .performance .container .cont h4 {font-size: 36px;}

    .performance .container .his-box {padding-top: 60px;}
    .performance .container .cont .perf-list {width: 100%; margin: 20px 0 0;}
    .performance .container .cont .perf-list .perf-list-item {grid-template-columns: 100px 1fr; padding: 30px 0;}
    .performance .container .cont .perf-list .perf-list-item h5 {font-size: 26px;}
    .performance .container .cont .perf-list .perf-list-item ul li {font-size: 14px; margin-bottom: 10px;}

    .map .info {display: block;}
    .map .info div {padding: 16px 0;}
    .map .info .title h3 {font-size: 22px;}
    .map .info .txt-box {display: block;}
    .map .info .txt-box .tel {justify-content: start; gap: 20px;}
    .map .info .txt-box p {font-size: 16px;}
    .map .info .txt-box p strong {font-size: 16px;}
    .map .info .txt-box .bar.bar1 {display: none;}
    .map .info .txt-box .bar.bar2 {display: block;}
    :lang(en) .intro .intro-step-list .item .step-top .intro-step-arrow.long{display: none;}
    :lang(en) .intro .intro-step-list .item .step-top .intro-step-arrow.short{display: block; margin-right: 15px;}

}
@media screen and (max-width: 360px) {
    .history .his-cate-top ul {gap: 15px 0;}
    .history .his-cate-top li {padding-left: 15px;}
    .history .his-cate-top li::before {width: 7px; height: 7px;}
    .history .his-cate-top ul li a {font-size: 15px;}
}





/* product */
#product .banner{background: url(../images/sub/prod-bg.png) no-repeat center; background-size: cover;}

.prod-body {}
.prod-body li {display: grid; grid-template-columns: 1fr 796px; gap: 100px; margin: 0 0 60px;}
.prod-body li.atc-title {gap: 0;}
.prod-body li.wide {display: block; width: 100%;}

.prod-body li.prod-title {}
.prod-body li.prod-title h3 {font-size: 46px; font-weight: 700; font-family: var(--font-primary); line-height: 1.25;}
.prod-body li.prod-title h3 span.blue {font-size: 46px; font-weight: 700; font-family: var(--font-primary); color: var(--blue);}
.prod-body li.prod-title h3 span.blue.sub {font-size: 34px;}
.prod-body li.prod-title .desc {}
.prod-body li.prod-title .desc li {display: block; font-size: 18px; font-family: var(--font-primary); line-height: 1.5; word-break: keep-all; margin: 0 0 18px; padding-left: 18px; position: relative;}
.prod-body li.prod-title .desc li::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #7e7e7e; position: absolute; top: 12px; left: 0;}
.prod-body li.prod-title .desc li.noList {padding-left: 0;}
.prod-body li.prod-title .desc li.noList::before {display: none;}

.prod-body li .img-box {display: flex; justify-content: center; align-items: end;}
.prod-body li .img-box img {display: block;}

.prod-body .sbj {border-top: 2px solid var(--navy); padding: 10px 0 0;}
.prod-body .sbj h4 {font-size: 22px; font-weight: 700; color: var(--navy);}
.prod-body .bd-t {font-size: 24px; font-weight: 700; font-family: var(--font-primary); color: var(--navy); border-top: 2px solid var(--navy); padding: 12px 0 16px;}

.prod-body li .cont {}
.prod-body li .cont img {width: 100%;}
.prod-body li .cont .prod02-2-1 img{margin:0 auto; width: 60%;}
.prod-body li .cont .prod02-4-1 img{margin:0 auto; width: 50%;}
.prod-body li .cont .prod02-5-1 img{margin:0 auto; width: 80%;}
.prod-body li .cont .prod02-6-1 img{margin:0 auto; width: 80%;}
.prod-body li .cont .prod02-7-1 img{margin:0 auto; width: 60%;}
.prod-body li .cont .prod02-7-2 img{margin:0 auto; width: 60%;}
.prod-body li .cont .prod03-2-1 img{margin:0 auto; width: 80%;}
.prod-body li .cont .prod03-3-1 img{margin:0 auto; width: 80%;}
.prod-body li .cont .prod04-3-1 img{margin:0 auto; width: 80%;}
.prod-body li .cont .prod04-3-1 img{margin:0 auto; width: 80%;}
.rd-body .rd01-4-2 img{margin:0 auto; width: 80%;}

.prod-body li .cont .lineUp {display: grid; grid-template-columns: 1fr 1fr; gap: 30px 120px;}
.prod-body li .cont .lineUp .item {grid-template-columns: 190px 1fr; gap: 25px; margin-bottom: 0;}
.prod-body li .cont .lineUp .item .img-box {height: 100%; align-items: center; border-radius: 7px; background-color: #E9E9E9; padding: 10px;}
.prod-body li .cont .lineUp .item .img-box img {width: inherit;}
.prod-body li .cont .lineUp .item .txt-box {}
.prod-body li .cont .lineUp .item .txt-box h5 {font-size: 18px; font-weight: 700; font-family: var(--font-primary); color: #fff; line-height: 32px; text-align: center; width: 100%; height: 32px; border-radius: 16px; background-color: #2667B4; margin-bottom: 20px;}
.prod-body li .cont .lineUp .item .txt-box ul {}
.prod-body li .cont .lineUp .item .txt-box ul li {display: block; font-size: 16px; line-height: 1.25; position: relative;  margin: 0 0 10px; padding: 0; padding-left: 10px; word-break: keep-all;}
.prod-body li .cont .lineUp .item .txt-box ul li::before {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #A4A4A4; position: absolute; top: 7px; left: 0;}

.prod-body li .cont .core-func {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.prod-body li .cont .core-func .item {display: block; margin: 0;}
.prod-body li .cont .core-func .item h5 {width: 100%; font-size: 18px; font-weight: 700; font-family: var(--font-primary); padding: 7px; color: white; background-color: var(--blue);}
.prod-body li .cont .core-func .item h5.navy {background-color: var(--navy);}
.prod-body li .cont .core-func .item ul {margin: 12px 0;}
.prod-body li .cont .core-func .item ul li {display: block; font-size: 16px; line-height: 1.5; position: relative;  margin: 0 0 12px; padding: 0; padding-left: 15px; word-break: keep-all;}
.prod-body li .cont .core-func .item ul li::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #A4A4A4; position: absolute; top: 8px; left: 0;}

.prod-body li .cont .func-title {display: block; font-size: 25px; font-weight: 700; font-family: var(--font-primary); color: #fff; line-height: 44px; text-align: center; width: 100%; height: 44px; border-radius: 22px; background-color: var(--blue); margin-bottom: 30px;}
.prod-body li .cont .func {display: grid; grid-template-columns: repeat(2, 390px); justify-content: space-between;}
.prod-body li .cont .func li {display: flex; gap: 0; border-top: 1px solid #CBCBCB; padding: 14px 0 26px; margin: 0;}
.prod-body li .cont .func li.last {padding: 12px 0 0;}
.prod-body li .cont .func li.noLine {border-top: 0; padding-top: 0;}
.prod-body li .cont .func li h5 {width: 35px; font-size: 18px; font-weight: 700; font-family: var(--font-primary); line-height: 1.5; color: var(--blue);}
.prod-body li .cont .func li .txt-box {width: 100%;}
.prod-body li .cont .func li .txt-box strong {font-size: 18px; font-weight: 600; font-family: var(--font-primary); line-height: 1.5; word-break: keep-all;}
.prod-body li .cont .func li .txt-box ul {margin: 8px 0 0;}
.prod-body li .cont .func li .txt-box ul li {position: relative; display: block; border-top: 0; padding: 0; padding-left: 14px; margin: 0 0 8px; font-size: 15px; font-weight: 400; font-family: var(--font-primary); word-break: keep-all; line-height: 1.5; color: #646464;}
.prod-body li .cont .func li .txt-box ul li::before {content: ''; display: block; width: 9px; height: 9px; position: absolute; top: 6px; left: 0; background-image: url(../images/sub/plus.svg); background-size: contain; background-repeat: no-repeat;}
.prod-body li .cont .func li .txt-box ul li:last-child {margin: 0;}
.prod-body li .cont .func li .txt-box p {font-size: 15px; font-weight: 400; font-family: var(--font-primary); line-height: 1.5; color: #646464; word-break: keep-all; margin-top: 10px;}

.prod-body li .cont .func.wide {grid-template-columns: repeat(4, 190px);}
.prod-body li .cont .func.wide li {display: block; padding: 10px 0 0 14px; position: relative;}
.prod-body li .cont .func.wide li::before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #707070; position: absolute; top: 20px; left: 0;}
.prod-body li .cont .func.wide li strong {font-size: 17px; font-weight: 700;}

.prod-body li .cont .type {display: grid; grid-template-columns: repeat(2, 390px); justify-content: space-between; border-top: 1px solid #D6D6D6; padding: 16px 0 30px;}
.prod-body li .cont .type li {position: relative; display: block; border-top: 0; padding: 0; padding-left: 14px; margin: 0 0 16px; font-size: 18px; font-weight: 600; font-family: var(--font-primary); color: #646464; word-break: keep-all;}
.prod-body li .cont .type li::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #646464; position: absolute; top: 10px; left: 0;}
.prod-body li .cont .type li.last {margin: 0;}

.prod-body li .cont .prod-type {padding: 20px 30px; border-radius: 15px; background: #f6f6f6;}
.prod-body li .cont .prod-type h4 {font-size: 22px; font-weight: 700; color: white; line-height: 44px; text-align: center; width: 100%; height: 44px; border-radius: 22px; background-color: var(--blue); margin: 0 0 12px;}
.prod-body li .cont .prod-type .prod-type-item {display: flex;}
.prod-body li .cont .prod-type .prod-type-item .item {width: 100%;}
.prod-body li .cont .prod-type .prod-type-item .item .img-box {padding: 48px 16px;}
.prod-body li .cont .prod-type .prod-type-item .item h5 {font-size: 18px; font-weight: 700; color: #646464; line-height: 1.75; text-align: center; width: 100%; height: 36px; border-radius: 18px; border: 2px solid #828282; background-color: white;}
.prod-body li .cont .prod-type .prod-type-item .bar {display: block; border-left: 1px dashed #C2C2C2; margin: 0 34px;}

.prod-body li .cont .ex {font-size: 17px; font-weight: 700; font-family: var(--font-primary); margin: 16px 0 0;}
.prod-body li .cont ul.ex {display: grid; grid-template-columns: repeat(2, 390px); justify-content: space-between;} 
.prod-body li .cont ul.ex li {position: relative; display: block; border-top: 0; padding: 0; padding-left: 14px; font-size: 17px; font-weight: 700; font-family: var(--font-primary); margin: 0 0 12px; word-break: keep-all;}
.prod-body li .cont ul.ex li::before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #707070; position: absolute; top: 9px; left: 0;}
.prod-body li .cont ul.ex li span {font-size: 17px; font-weight: 400; word-break: keep-all;}
.prod-body li .cont .ex.wide {display: block;}

.prod-body li .cont .result .item {display: flex; margin-bottom: 0;}
.prod-body li .cont .result .item img {display: block; width: 164px; height: auto; box-shadow: 0 0 9px rgba(0, 0, 0, .16);}
.prod-body li .cont .result .item h5 {font-size: 18px; font-weight: 700; font-family: var(--font-primary); color: #646464; line-height: 1.25;}
.prod-body li .cont .result .item ul {margin-top: 24px;}
.prod-body li .cont .result .item ul li {display: block; font-size: 16px; line-height: 1.5; color: #646464; position: relative;  margin: 0 0 12px; padding: 0; padding-left: 15px; word-break: keep-all;}
.prod-body li .cont .result .item ul li::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #A4A4A4; position: absolute; top: 8px; left: 0;}
.prod-body li .cont .result .item ul li strong {font-size: 16px; line-height: 1.5; word-break: keep-all;}

.prod-body li .cont .result.i-s {display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; border-top: 1px solid #CBCBCB; padding: 0 18px;}
.prod-body li .cont .result.i-s .item {flex-direction: column; align-items: center; gap: 0;}
.prod-body li .cont .result.i-s img {margin: 30px 0;}
.prod-body li .cont .result.i-s .item h5 {display: block; text-align: center; width: 100%; height: 42px; line-height: 40px; border-radius: 21px; border: 2px solid #707070;}
.prod-body li .cont .result.i-s .item ul {width: 100%; padding: 0 11px;}
.prod-body li .cont .result.s-p-s .item {justify-content: center; gap: 20px;}

.prod-body li .cont.apply {padding-top: 14px; border-top: 1px solid #CBCBCB;;}

.prod01-1_page{margin: 0 auto;}
.prod01-2_page{margin: 0 auto;}
:lang(en) .sub-cate.ground {display: grid; grid-template-columns: repeat(4,1fr); row-gap: 20px;background-color: transparent; grid-template-rows: repeat(2,70px) !important}
:lang(en)  .prod-body li.prod-title h3{font-size: 42px;}
:lang(en) .prod-body li .cont .result.i-s .item h5{height: auto; line-height: 1.5; border-radius:999px; padding: 8px; font-size: 17px;}
:lang(en) .sub-cate li a{line-height: 1.3;  height: 100%;min-height: 50px;  padding:8px; display: flex; align-items: center;justify-content: center;}
:lang(en) .sub-cate.ground li a{line-height: 1.3; height: 100%; padding:8px; display: flex; align-items: center;justify-content: center;}
:lang(en) .map .sub-cate li a{min-height: 50px !important;}
:lang(en) .sub-cate li{height: 100%; display: block;}
:lang(en) .sub-cate li::after{height: 70%; z-index: 5;}
:lang(en) .sub-cate li::before{content: ""; height: 34px; z-index: 5;}
:lang(en) .sub-cate.ground li:not(.active):not(:has(+ .active))::before{content: '';display: block;width: 1px;height: 70%;background: #DEDEDE;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
:lang(en) .sub-cate.ground li:nth-of-type(4):before,:lang(en) .sub-cate.ground li:last-of-type:before{content: none !important}
:lang(en) .sub-cate.ground li::after{content: ""; background-color:#F6F6F6 ;z-index: -1;  width: 100%; height: 100%; display: inline-block; }
:lang(en) .sub-cate li.active{height: 100%;  display: block; border-radius: 50px;}
:lang(en) .sub-cate.ground li:first-of-type::after,:lang(en) .sub-cate.ground li:nth-of-type(5)::after{border-radius: 50px 0 0 50px;}
:lang(en) .sub-cate.ground li:nth-of-type(4)::after,:lang(en) .sub-cate.ground li:last-of-type::after{border-radius: 0 50px 50px 0;}
:lang(en) #rd .rd-list li .rd-list-txt .txt ul li h5{min-width: 35px;  margin-bottom: auto; margin-top: 4px;}
:lang(en) .railway-list li {gap: 8px;}
:lang(en) .sub-inner .sub-title p{font-size: 17px;}
:lang(en) .enView{
    display: block;
}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
    .prod-body li {display: block; margin: 0 0 80px;}
    .prod-body li.wide {display: block; width: 100%;}
    #rd .rd-list li .rd-list-txt .txt ul li h5
    .prod-body li.prod-title h3 {font-size: 34px;}
    .prod-body li.prod-title h3 span.blue {font-size: 34px;}
    .prod-body li.prod-title h3 span.blue span {display: none;}
    .prod-body li.prod-title .desc {margin-top: 20px;}
    .prod-body li.prod-title .desc li {font-size: 16px; margin: 0 0 12px; padding-left: 16px;}
    .prod-body li.prod-title .desc li::before {top: 8px;}
    .prod-body li.prod-title .desc img {margin-top: 40px;}

    .prod-body li .img-box {margin-bottom: 80px;}
    .prod-body li .img-box.pcView {display: none;}

    .prod-body .sbj {padding: 10px 0 0;}
    .prod-body .sbj h4 {font-size: 20px;}
    .prod-body .bd-t {font-size: 20px; padding: 12px 0 20px;}

    .prod-body li .cont .lineUp {display: block;}
    .prod-body li .cont .lineUp .item {display: grid; margin-bottom: 30px;}

    .prod-body li .cont .func-title {font-size: 22px; line-height: 40px; height: 40px; border-radius: 20px;}
    .prod-body li .cont .func {grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .prod-body li .cont .func li {display: flex; gap: 0;}
    .prod-body li .cont .func li .txt-box p {font-size: 15px;}

    .prod-body li .cont .func.wide {grid-template-columns: repeat(4, 1fr); gap: 20px;}
    .prod-body li .cont .func.wide li {display: block; padding: 10px 0 0 14px; position: relative;}
    .prod-body li .cont .func.wide li::before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #707070; position: absolute; top: 20px; left: 0;}
    .prod-body li .cont .func.wide li strong {font-size: 17px; font-weight: 700;}

    .prod-body li .cont .type {grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 16px 0 30px;}
    .prod-body li .cont .type li {padding-left: 14px; margin: 0 0 10px; font-size: 16px;}
    .prod-body li .cont .type li::before {width: 7px; height: 7px; top: 8px;}

    .prod-body li .cont .prod-type h4 {font-size: 20px; line-height: 40px; height: 40px; border-radius: 20px;}
    .prod-body li .cont .prod-type .prod-type-item {display: flex;}
    .prod-body li .cont .prod-type .prod-type-item .item .img-box {margin-bottom: 0;}
    .prod-body li .cont .prod-type .prod-type-item .item h5 {font-size: 16px; line-height: 32px; height: 32px; border-radius: 18px; border: 1px solid #828282;}
    .prod-body li .cont .prod-type .prod-type-item .bar {display: block; border-left: 1px dashed #C2C2C2; margin: 0 34px;}

    .prod-body li .cont .ex {font-size: 16px;}

    .prod-body li .cont .result .item {display: flex; margin-bottom: 0;}
    .prod-body li .cont .result .item img {display: block; width: 164px; height: auto; box-shadow: 0 0 9px rgba(0, 0, 0, .16);}
    .prod-body li .cont .result .item h5 {font-size: 17px;}
    .prod-body li .cont .result .item ul {margin-top: 24px;}
    
    .prod-body li .cont .result.i-s {display: grid; gap: 0 30px; padding: 0;}
    .prod-body li .cont .result.i-s .item h5 {display: block; height: 40px; line-height: 38px; border-radius: 20px;}
    .prod-body li .cont .result.i-s .item ul {width: 100%; padding: 0;}

    .prod-body li .cont .prod02-2-1 img{width: 100%;}
    .prod-body li .cont .prod02-4-1 img{width: 100%;}
    .prod-body li .cont .prod02-5-1 img{width: 100%;}
    .prod-body li .cont .prod02-6-1 img{width: 100%;}
    .prod-body li .cont .prod02-7-1 img{width: 100%;}
    .prod-body li .cont .prod02-7-2 img{width: 100%;}
    .prod-body li .cont .prod03-2-1 img{width: 100%;}
    .prod-body li .cont .prod03-3-1 img{width: 100%;}
    .prod-body li .cont .prod04-3-1 img{width: 100%;}
    .prod-body li .cont .prod04-3-1 img{width: 100%;}
    .rd-body .rd01-4-2 img{width: 100%;}
    

    .sub-cate.moView.ai-dt {grid-template-columns: repeat(2, 1fr);}
    .sub-cate.moView.ai-dt li:nth-child(2n):after {display: none;}
    :lang(en) .sub-cate li a{line-height: 1.3; height: 100%; padding:8px; display: flex; align-items: center;justify-content: center;}
    :lang(en) .sub-cate.ground {display: none;}
    :lang(en) .sub-cate li.active{border-radius:22px}
    

}
@media screen and (max-width: 767px) {
    .prod-body li {display: block; margin: 0 0 80px;}
    .prod-body li.wide {display: block; width: 100%;}

    .prod-body li.prod-title h3 {font-size: 24px;}
    .prod-body li.prod-title h3 span.blue {font-size: 24px;}
    .prod-body li.prod-title h3 span.blue.sub {font-size: 24px;}
    .prod-body li.prod-title .desc {margin-top: 20px;}
    .prod-body li.prod-title .desc li br {display: none;}
    .prod-body li.prod-title .desc li br.moView {display: block;}

    .prod-body li .cont .lineUp .item {display: block; grid-template-columns: 130px 1fr; gap: 15px; margin-bottom: 40px;}
    .prod-body li .cont .lineUp .item .img-box {margin-bottom: 20px; padding: 15px;}
    .prod-body li .cont .lineUp .item .txt-box h5 {font-size: 16px; line-height: 30px; height: 30px; border-radius: 15px;}
    .prod-body li .cont .lineUp .item .txt-box ul li {font-size: 15px; margin: 0 0 8px; padding-left: 10px;}
    .prod-body li .cont .lineUp .item .txt-box ul li::before {top: 6px;}

    .prod-body li .cont .core-func {display: block;}
    .prod-body li .cont .core-func .item {display: block; margin-bottom: 30px;}
    .prod-body li .cont .core-func .item h5 {font-size: 16px; padding: 7px;}
    .prod-body li .cont .core-func .item ul {margin: 12px 0;}
    .prod-body li .cont .core-func .item ul li {font-size: 15px; margin: 0 0 10px; padding-left: 12px;}
    .prod-body li .cont .core-func .item ul li::before {width: 6px; height: 6px; top: 8px;}
    .prod-body li .cont .core-func .item ul li br {display: none;}

    .prod-body li .cont .func-title {font-size: 17px; line-height: 1.25; height: 100%; border-radius: 0; padding-block: 10px;}
    .prod-body li .cont .func {display: block;}
    .prod-body li .cont .func li.last {padding: 14px 0 26px;}
    .prod-body li .cont .func li h5 {font-size: 17px; width: 30px;}
    .prod-body li .cont .func li .txt-box strong {font-size: 17px;}
    .prod-body li .cont .func li .txt-box strong br {display: none;}
    .prod-body li .cont .func li .txt-box strong br.moView {display: block;}
    .prod-body li .cont .func li .txt-box p br {display: none;}
    .prod-body li .cont .func li .txt-box p br.moView {display: block;}

    .prod-body li .cont .func.wide li {padding: 10px 0 10px 14px;}

    .prod-body li .cont .type {display: block; padding: 16px 0 30px;}
    .prod-body li .cont .type li {padding-left: 14px; margin: 0 0 10px; font-size: 16px;}
    .prod-body li .cont .type li::before {width: 7px; height: 7px; top: 8px;}

    .prod-body li .cont .prod-type {padding: 20px 15px;}
    .prod-body li .cont .prod-type h4 {font-size: 18px; line-height: 38px; height: 38px; border-radius: 20px;}
    .prod-body li .cont .prod-type .prod-type-item {display: flex;}
    .prod-body li .cont .prod-type .prod-type-item .item .img-box {margin-bottom: 0;}
    .prod-body li .cont .prod-type .prod-type-item .item h5 {font-size: 16px; line-height: 32px; height: 32px; border-radius: 18px; border: 1px solid #828282;}
    .prod-body li .cont .prod-type .prod-type-item .bar { margin: 0 20px;}

    .prod-body li .cont .ex {font-size: 16px;}
    .prod-body li .cont ul.ex {display: block;} 
    .prod-body li .cont ul.ex li {padding-left: 14px; font-size: 16px; margin: 0 0 12px;}
    .prod-body li .cont ul.ex li::before {top: 8px;}
    .prod-body li .cont ul.ex li span {font-size: 15px;}

    .prod-body li .cont .result .item {display: flex; margin-bottom: 0;}
    .prod-body li .cont .result .item img {width: 200px;}
    .prod-body li .cont .result .item h5 {font-size: 16px;}
    .prod-body li .cont .result .item ul {margin-top: 24px;}
    .prod-body li .cont .result .item ul li {font-size: 14px; margin: 0 0 10px; padding-left: 12px;}
    .prod-body li .cont .result .item ul li::before {width: 5px; height: 5px; top: 7px;}

    .prod-body li .cont .result.i-s {display: block;}
    .prod-body li .cont .result.i-s .item:first-child {margin-bottom: 40px;}
    .prod-body li .cont .result.i-s .item h5 {height: 36px; line-height: 34px; border-radius: 18px;}
    .prod-body li .cont .result.i-s .item ul {width: 100%; padding: 0;}

    .prod-body li .cont .result.s-p-s .item {flex-direction: column; align-items: center; gap: 40px;}
    .prod-body li .cont .result.s-p-s h5 {text-align: center; word-break: keep-all;}
    .prod-body li .cont .result.s-p-s h5 br {display: none;}
    :lang(en) .sub-cate li a{line-height: 1.3; height: 100%; min-height: 74px;padding:8px; display: flex; align-items: center;justify-content: center;}
    
    /* :lang(en) .prod-body li .cont .prod-type .prod-type-item .item h5{line-height: 1.3; height: 50px; display: flex; justify-content: center; align-items: center;} */
    
}
@media screen and (max-width: 360px) {
    .prod-body li .cont .func li .txt-box strong br.min {display: block;}
}




/* rd */
#rd .banner{background: url(../images/rd-bg.png) no-repeat center; background-size: cover;}
#rd .title {display: grid; grid-template-columns: 1fr 796px; margin-bottom: 80px;}
#rd .title .txt-box {}
#rd .title .txt-box h3 {font-size: 36px; font-weight: 700; color: var(--navy); margin: 0 0 30px;}
#rd .title .txt-box p {font-size: 19px; font-weight: 400; line-height: 1.7; margin: 0 0 20px; word-break: keep-all;}

.railway-list {display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 50px;}
.railway-list li {display: flex; padding-left: 20px; border-left: 1px solid #D8D8D8;}
.railway-list li:first-child {padding-left: 0; border: 0;}
.railway-list li span {display: block; width: 40px; font-size: 24px; font-weight: 700; font-family: var(--font-primary); line-height: 1.25; color: var(--blue);}
.railway-list li strong {font-size: 24px; line-height: 30px;}
.railway-list li p {font-size: 17px; font-family: var(--font-primary); line-height: 1.25; margin-top: 10px;}

#rd .sub-cate {margin: 100px 0 80px;}
#rd .sub-cate li {border: 0;}
#rd .sub-cate li.active {background-color: var(--navy);}
#rd .sub-cate li a {font-weight: 700;}

#rd ul.rd-list-style {}

#rd ul.rd-list-style.grid {grid-template-columns: 1fr 1fr;}
#rd ul.rd-list-style li {font-size: 17px; line-height: 1.7; position: relative;  margin: 0 0 3px; padding: 0; padding-left: 18px; word-break: keep-all;}
#rd ul.rd-list-style li::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #7e7e7e; position: absolute; top: 10px; left: 0;}
#rd ul.rd-list-style li strong {font-size: 17px; font-weight: 700;}
#rd ul.rd-list-style.noList li {padding-left: 0;}
#rd ul.rd-list-style.noList li::before {display: none;}

#rd .rd-list-title {padding: 10px 0 54px; border-top: 2px solid #C9C9C9; font-size: 30px; font-weight: 700; color: #4D4D4D;}
#rd .rd-list {}
#rd .rd-list li {display: grid; grid-template-columns: 796px 1fr; gap: 100px; margin-bottom: 100px;}
#rd .rd-list li:last-child {margin: 0;}
#rd .rd-list li .img-box {}
#rd .rd-list li .img-box img {}

#rd .rd-list li .rd-list-txt {width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: start;}
#rd .rd-list li .rd-list-txt .txt { width: 100%;}
#rd .rd-list li .rd-list-txt .txt h4 {font-size: 34px; font-weight: 700; color: var(--blue); margin: 0 0 16px;}
#rd .rd-list li .rd-list-txt .txt ul {border-top: 3px solid var(--blue);}
#rd .rd-list li .rd-list-txt .txt ul li {display: flex; gap: 0; padding: 12px 0; border-bottom: 1px solid #D6D6D6; margin: 0;}
#rd .rd-list li .rd-list-txt .txt ul li:last-child {border-bottom: 0;}
#rd .rd-list li .rd-list-txt .txt ul li h5 {width: 35px; font-size: 17px; font-weight: 700; font-family: var(--font-primary); line-height: 1.5; color: var(--blue);}
#rd .rd-list li .rd-list-txt .txt ul li p {font-size: 17px; font-family: var(--font-primary); line-height: 30px;}

#rd .rd-list li:nth-child(even) {grid-template-columns: 1fr 796px;}
#rd .rd-list li:nth-child(even) .rd-list-txt .txt h4 {color: var(--navy);}
#rd .rd-list li:nth-child(even) .rd-list-txt .txt ul {border-top: 3px solid var(--navy);}
#rd .rd-list li:nth-child(even) .rd-list-txt .txt ul li h5 {color: var(--navy);}

#rd .detail-btn {width: 100%; justify-content: space-between; background-color: #646464; border-radius: 26px; align-items: center; color: #fff; padding: 11.5px 19.5px;}
#rd .detail-btn p{font-size: 19px; font-weight: 600;}
#rd .detail-btn img{width: 24px; height: 24px; margin-left: 10px;}
:lang(en) #rd .rd-list li .rd-list-txt .txt h4{font-size: 30px;}
:lang(en) #rd ul.rd-list-style.grid{grid-template-columns: none;}
.rd01_page {margin: 0 auto;}

.rd-body .rd-title {display: grid; grid-template-columns: 1fr 796px; gap: 45px; margin: 0 0 60px;}
.rd-body .rd-title .title-area {display: flex; flex-direction: column; justify-content: space-between;}
.rd-body .rd-title .title-area h3 {font-size: 46px; font-weight: 700; font-family: var(--font-primary); line-height: 1.25;}
.rd-body .rd-title .title-area h3 span {color: var(--navy); font-size: 46px; font-weight: 700; font-family: var(--font-primary);}
.rd-body .rd-title .title-area h3 span.blue {color: var(--blue);}
.rd-body .rd-title .title-area h3 span.blue.sub {font-size: 34px;}

.rd-body .rd-title .cont {}
.rd-body .rd-title .cont p {font-size: 17px; font-family: var(--font-primary); line-height: 30px;}
.rd-body .rd-title .cont p strong {font-size: 17px; font-weight: 700; display: block; margin: 14px 0;}
.rd-body .rd-title .cont .desc-item {display: grid; grid-template-columns: 1fr 1fr; justify-content: space-between; gap: 14px; margin: 40px 0 0;}
.rd-body .rd-title .cont .desc-item .item {border-top: 3px solid var(--navy);}
.rd-body .rd-title .cont .desc-item .item h4 {font-size: 22px; font-weight: 700; color: var(--navy); padding: 12px 0; margin-bottom: 8px; border-bottom: 1px solid #CBCBCB;}

.rd-body .rd-title .cont .sub-desc {display: grid; grid-template-columns: repeat(2, 1fr); padding: 16px 18px; margin: 26px 0 0; background-color: #E9E9E9;}
.rd-body .rd-title .cont .sub-desc li {font-size: 16px; color: #646464;}

.rd-body .rd-img-box {padding: 23px; border-radius: 15px; background-color: #f6f6f6;}
.rd-body .rd-img-box h4 {font-size: 22px; font-weight: 700; color: white; line-height: 44px; text-align: center; width: 100%; height: 44px; border-radius: 22px; background-color: var(--navy); margin: 0 0 12px;}
.rd-body .rd-img-box img.main {display: block; margin: 36px auto 63px;}
.rd-body .rd-img-box img{margin: 0 auto;}
.rd-body .txt-img{margin-top: 25px;}

.rd-body .rd-img-box ul.flex {justify-content: space-between;}
.rd-body .rd-img-box ul.flex li h5 {width: 100%; height: 34px; border-radius: 17px; font-size: 22px; font-weight: 700; font-family: var(--font-primary); line-height: 34px; text-align: center; color: white; background-color: #646464;margin: 0 0 6px;}

.rd-body .rd-list-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 7px;}
.rd-body .rd-list-grid.grid2 {grid-template-columns: repeat(2, 1fr);}
.rd-body .rd-list-grid h5 {font-size: 22px; font-weight: 700; font-family: var(--font-primary); color: var(--blue); padding: 8px 4px; border-top: 3px solid var(--blue); border-bottom: 3px solid var(--skyblue); background: transparent;}
.rd-body .rd-list-grid p {font-size: 16px; font-family: var(--font-primary); line-height: 28px; word-break: keep-all; padding: 8px 4px;}

.rd-body .ktcs ul.grid {grid-template-columns: repeat(4, 1fr); gap: 26px 7px;}
.rd-body .ktcs ul.grid .txt-box {display: flex; border-top: 3px solid var(--blue); border-bottom: 3px solid var(--skyblue); align-items: center;}
.rd-body .ktcs ul.grid .txt-box h1{font-size: 14px; letter-spacing:-.5px; line-height: 20px; color: white; font-weight: 700; text-align: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue);}
.rd-body .ktcs ul.grid .txt-box h5 {font-size: 22px; font-weight: 700; font-family: var(--font-primary); color: var(--blue); padding: 8px 4px; margin-left: 10px; background: transparent;}
.rd-body .ktcs ul.grid p {font-size: 16px; font-family: var(--font-primary); line-height: 1.75; word-break: keep-all; padding: 8px 4px;}

.rd-body .ktcs ul.grid {display: grid !important; margin-top: 73px;}



.sub-inner.dark {background-color: #f6f6f6;}
.sub-inner.dark .rd-body .rd-title .title-area h3 span {color: var(--blue);}
.sub-inner.dark .rd-body .rd-title .cont .desc-item .item {border-top: 3px solid var(--blue);}
.sub-inner.dark .rd-body .rd-title .cont .desc-item .item h4{color: var(--blue);}
.sub-inner.dark .rd-body .rd-img-box {background-color: white;}
.sub-inner.dark .rd-body .rd-img-box h4 {background-color: var(--blue);}

.rd-body .rd-cont-box {margin-top: 50px;}
.rd-body .rd-cont-box.mt-90 {margin-top: 90px;}
.rd-body .rd-cont-box h5 {font-size: 22px; font-weight: 700; font-family: var(--font-primary); color: white; padding: 8px 12px; background-color: var(--blue);}
.rd-body .rd-cont-box .rd-cont-item {display: grid; grid-template-columns: 1fr 796px; margin-top: 36px;}

.rd-contents {display: grid; grid-template-columns: 1fr 796px; gap: 100px;}
.rd-contents .sbj {border-top: 2px solid var(--navy); padding: 10px 0 0;}
.rd-contents .sbj h4 {font-size: 22px; font-weight: 700; color: var(--navy);}
.rd-contents .bd-t {font-size: 24px; font-weight: 700; font-family: var(--font-primary); color: var(--navy); border-top: 2px solid var(--navy); padding: 12px 0 16px;}

.rd-body .rd-img-box.cont {display: flex; gap: 70px; padding-inline: 70px;}
.rd-body .rd-img-box.cont h5 {display: block; font-size: 22px; font-weight: 700; font-family: var(--font-primary); text-align: center; color: #fff; width: 100%; height: 42px; line-height: 40px; border-radius: 21px; margin-bottom: 30px;}
.rd-body .rd-img-box.cont h5.blue {background-color: var(--blue);}
.rd-body .rd-img-box.cont h5.navy {background-color: var(--navy);}

#rd .rd01-4-cont {width: 100%;}
#rd .rd01-4-cont h5 {font-size: 18px; font-family: var(--font-primary); line-height: 32px; padding: 18px 0 0; word-break: keep-all;}
#rd .rd01-4-cont .item {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 8px; margin: 40px 0;}
#rd .rd01-4-cont .item p {width: 100%; font-size: 18px; font-weight: 700; font-family: var(--font-primary); padding: 7px; color: white; background-color: var(--blue);}
#rd .rd01-4-cont .item ul.rd-list-style {margin: 12px 0;}
#rd .rd01-4-cont .item ul.rd-list-style li {display: block; border-left: 0; font-size: 16px; line-height: 24px;}
#rd .rd01-4-cont .item ul.rd-list-style li::before {top: 8px;}


.tab-btn {width: 100%; display: flex; justify-content: space-around; align-items: center; border-radius: 22px; background: #F6F6F6; margin: 100px 0 80px;}
.tab-btn a {width: 100%; position: relative; display: block; width: 100%; font-size: 17px; font-weight: 400; font-family: var(--font-primary); color: #646464; line-height: 44px; text-align: center;}
.tab-btn a::after {content: ''; display: block; width: 1px; height: 17px; background: #DEDEDE; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.tab-btn a:last-child:after {display: none;}
.tab-btn a.active {width: 100%; font-weight: 700; color: white; background: var(--navy); border-radius: 22px;}
.tab-btn a.active::after {display: none; font-weight: 700; color: white;}
.tab-btn a.hide::after {display: none;}

.patents-container ul.patents-content {display: grid; grid-template-columns: repeat(5, 1fr); gap: 60px 28px; margin: 0;}
.patents-container .patents-content li {display: flex; flex-direction: column; justify-content: space-between; border: 0; padding: 0;}
.patents-container .patents-content li .thumb-cont {width: 100%; height: 295px; overflow: hidden; border: 1px solid #DEDEDE;}
.patents-container .patents-content li .thumb-cont img {width: 100%; height: 100%; margin: 0;}
.patents-container .patents-content li .category {font-size: 16px; font-weight: 700; font-family: var(--font-primary); color: var(--navy); margin: 14px 0 0;}
.patents-container .patents-content li .desc {font-size: 16px; font-weight: 700; font-family: var(--font-primary); line-height: 24px; margin: 8px 0 14px; word-break: keep-all;}
.patents-container .patents-content li .number {font-size: 16px; font-weight: 400; font-family: var(--font-primary); line-height: 1; color: #646464; margin: 0;}

:lang(en) .sub-inner.dark .rd-body .rd-img-box h4{
    font-size: 18px;
}
:lang(en) .rd-body .ktcs ul.grid .txt-box h5{font-size: 18px; height: 70px; display: flex; align-items: center;}
:lang(en) .rd-body .ktcs ul.grid .txt-box> h1{flex-shrink: 0;}
:lang(en) #rd .rd01-4-cont .item p{font-size: 16px; min-height: 65px;}
:lang(en) .rd-body .ktcs ul.grid li:nth-of-type(4) .txt-box h1,:lang(en) .rd-body .ktcs ul.grid li:last-of-type .txt-box h1{text-indent: -2px;}
@media (hover: hover) {
    #rd .rd-list li .rd-list-txt .detail-btn:hover {background-color: var(--blue);}
    #rd .rd-list li:nth-child(even) .rd-list-txt .detail-btn:hover {background-color: var(--navy);}
}
@media screen and (max-width: 1399px) {
    #rd .sub-inner.mb-0 {padding-bottom: 0;}

    #rd .title {display: block; margin-bottom: 80px;}
    #rd .title .txt-box {}
    #rd .title .txt-box h3 {font-size: 30px; margin: 0 0 20px;}
    #rd .title .txt-box p {font-size: 16px; margin: 0 0 10px;}

    #rd .rd-list-title {padding: 10px 0 24px; font-size: 24px;}
    #rd .rd-list li {display: flex; gap: 23px; align-items: end; margin-bottom: 100px;}
    #rd .rd-list li:last-child {margin: 0;}

    #rd .rd-list li .img-box {height: 100%; overflow: hidden;border-radius: 15px; display: flex; justify-content: center; align-items: center;}
    #rd .rd-list li .img-box.moView {display: none;}
    #rd .rd-list li .img-box img {max-width: 170%;}

    #rd .rd-list li .rd-list-txt {min-height: 350px;}
    #rd .rd-list li .rd-list-txt .txt h4 {font-size: 28px; margin: 0 0 10px;}
    #rd .rd-list li .rd-list-txt .txt ul li {padding: 10px 0;}
    #rd .rd-list li .rd-list-txt .txt ul li h5 {width: 35px; font-size: 16px; line-height: 1.7;}
    #rd .rd-list li .rd-list-txt .txt ul li p {font-size: 16px; line-height: 1.7;}

    #rd ul.rd-list-style.grid {display: block !important;}
    #rd ul.rd-list-style li {font-size: 16px; margin: 0 0 3px; padding-left: 18px;}
    #rd ul.rd-list-style li::before {width: 7px; height: 7px; top: 9px;}
    #rd ul.rd-list-style li strong {font-size: 16px;}

    .railway-list {margin-top: 40px;}
    .railway-list li {padding-left: 10px;}
    .railway-list li span {width: 30px; font-size: 20px; line-height: 1.7;}
    .railway-list li strong {font-size: 20px; line-height: 1.7;}
    .sub-inner .sub-title .railway-list li p {font-size: 14px; line-height: 1.7; margin-top: 5px;}
        
    .rd-body .rd-title {display: grid; grid-template-columns: 1fr 500px; gap: 35px; margin: 0 0 60px;}
    .rd-body .rd-title .title-area {display: flex; flex-direction: column; justify-content: space-between;}
    .rd-body .rd-title .title-area h3 {font-size: 32px;}
    .rd-body .rd-title .title-area h3 span {font-size: 32px;}

    .rd-body .rd-title .cont p {font-size: 16px; line-height: 1.7; word-break: keep-all;}
    .rd-body .rd-title .cont p strong {font-size: 16px; margin: 14px 0;}
    .rd-body .rd-title .cont .desc-item { margin: 30px 0 0;}
    .rd-body .rd-title .cont .desc-item .item h4 {font-size: 20px; padding: 8px 0;}

    .rd-body .rd-title .cont .sub-desc {display: block; padding: 16px 18px; margin: 26px 0 0;}
    .rd-body .rd-title .cont .sub-desc li {font-size: 16px; color: #646464;}

    .rd-body .rd-img-box {padding: 23px; border-radius: 15px;}
    .rd-body .rd-img-box h4 {font-size: 20px; line-height: 40px; height: 40px; border-radius: 20px; margin: 0 0 12px;}
    .rd-body .rd-img-box img.main {display: block; margin: 36px auto 63px;}

    .rd-body .rd-img-box ul.flex li {margin-top: 40px;}
    .rd-body .rd-img-box ul.flex li h5 {width: 100%; height: 30px; border-radius: 15px; font-size: 18px; line-height: 30px; margin: 0 0 6px;}

    .rd-body .rd-list-grid h5 {font-size: 20px; padding: 5px 4px;}
    .rd-body .rd-list-grid p {font-size: 15px; line-height: 1.7; padding: 8px 4px;}

    .rd-body .rd-cont-box {margin-top: 50px;}
    .rd-body .rd-cont-box.mt-90 {margin-top: 90px;}
    .rd-body .rd-cont-box h5 {font-size: 20px; padding: 8px 12px;}
    .rd-body .rd-cont-box .rd-cont-item {display: block; margin-top: 24px;}
    .rd-body .rd-cont-box .rd-cont-item .rd-list-style {margin-bottom: 24px;}

    .rd-body .ktcs ul.grid {grid-template-columns: repeat(3, 1fr); gap: 26px 10px;}
    .rd-body .ktcs ul.grid .txt-box h5 {font-size: 20px; padding: 6px 4px; margin-left: 5px;}
    .rd-body .ktcs ul.grid p {font-size: 16px; word-break: keep-all; padding: 8px 4px;}

    .rd-contents {display: block;}
    .rd-contents .sbj h4 {font-size: 20px;}

    .rd-body .rd-img-box.cont {display: flex; gap: 40px; padding-inline: 23px;}
    .rd-body .rd-img-box.cont h5 {font-size: 20px; height: 40px; line-height: 38px; border-radius: 20px; margin-bottom: 30px;}

    #rd .rd01-4-cont h5 {font-size: 16px; line-height: 1.7;}
    #rd .rd01-4-cont .item p {font-size: 16px; padding: 5px 7px;}
    #rd .rd01-4-cont .item ul.rd-list-style {margin: 12px 0;}
    #rd .rd01-4-cont .item ul.rd-list-style li {font-size: 14px; line-height: 1.7;}
    #rd .rd01-4-cont .item ul.rd-list-style li strong {font-size: 14px;}
    #rd .rd01-4-cont .item ul.rd-list-style li::before {top: 8px;}

    .patents-container ul.patents-content {grid-template-columns: repeat(3, 1fr); gap: 60px 28px;}
    .patents-container .patents-content li .thumb-cont {height: 295px;}
    .patents-container .patents-content li .category {font-size: 16px; margin: 14px 0 0;}
    .patents-container .patents-content li .desc {font-size: 16px; line-height: 24px; margin: 8px 0 14px;}
    .patents-container .patents-content li .number {font-size: 16px; line-height: 1;}
    :lang(en) .railway-list li {padding-inline: 8px;}
    :lang(en) .rd-body .rd-title .title-area h3{font-size: 35px;}
    :lang(en) .rd-body .rd-list-grid h5{font-size: 18px; height: 70px; display: flex; align-items: center;}

}
@media screen and (max-width: 767px) {
    #rd .title .txt-box h3 {font-size: 24px; margin: 0 0 20px;}
    #rd .title .txt-box p {font-size: 14px; margin: 0 0 10px;}
    #rd .title .txt-box p .resp {display: none;}

    #rd .rd-list li .img-box {width: 100%; height: 200px; margin-bottom: 20px;}
    #rd .rd-list li .img-box.moViewN {display: none;}
    #rd .rd-list li .img-box.moView {display: flex;}
    #rd .rd-list li .img-box img {max-width: auto; width: 100%; height: 100%; object-fit: cover;}

    #rd .rd-list-title {padding: 10px 0 24px; font-size: 24px;}
    #rd .rd-list li {display: flex; flex-direction: column-reverse; margin-bottom: 100px;}

    #rd .rd-list li .rd-list-txt {width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: start; min-height: 0;}
    #rd .rd-list li .rd-list-txt .txt { width: 100%; margin-bottom: 20px;}
    #rd .rd-list li .rd-list-txt .txt h4 {font-size: 24px; margin: 0 0 10px;}
    #rd .rd-list li .rd-list-txt .txt ul li {display: flex; flex-direction: row; gap: 0; padding: 10px 0;}

    #rd .rd-list li.rd-list-cont:nth-child(even) {flex-direction: column;}

    #rd ul.rd-list-style li {font-size: 14px; margin: 0 0 3px; padding-left: 13px;}
    #rd ul.rd-list-style li::before {width: 6px; height: 6px; top: 8px;}
    #rd ul.rd-list-style li strong {font-size: 14px;}

    .railway-list {display: block; margin-top: 24px;}
    .railway-list li {padding-left: 0; padding-block: 8px; border-left: 0; border-top: 1px solid #D8D8D8;}
    .railway-list li span {width: 40px;}
    .sub-inner .sub-title .railway-list li p {margin-top: 2px;}
    .sub-inner .sub-title .railway-list li p br {display: none;}

    .rd-body .rd-title {display: block; margin: 0 0 60px;}
    .rd-body .rd-title .title-area {display: flex; flex-direction: column; justify-content: space-between;}
    .rd-body .rd-title .title-area h3 {font-size: 26px; margin-bottom: 15px;}
    .rd-body .rd-title .title-area h3 span {font-size: 26px;}
    .rd-body .rd-title .title-area h3 br {display: none;}
    .sub-inner.dark .rd-body .rd-title .title-area h3 span {font-size: 26px;}

    .rd-body .rd-title .cont .desc-item {display: block; margin: 30px 0 0;}
    .rd-body .rd-title .cont .desc-item .item { margin-bottom: 20px;}
    .rd-body .rd-title .cont .desc-item .item h4 {font-size: 20px; padding: 8px 0;}

    .rd-body .rd-title .cont .sub-desc li {font-size: 14px;}

    .rd-body .rd-img-box {padding: 20px;}
    .rd-body .rd-img-box h4 {font-size: 18px; line-height: 36px; height: 36px; border-radius: 18px;}
    .rd-body .rd-img-box img.main {margin: 36px auto;}

    .rd-body .rd-img-box ul.flex {display: block !important;}
    .rd-body .rd-img-box ul.flex li {margin-bottom: 20px;}
    .rd-body .rd-img-box ul.flex li:last-child {margin-bottom: 0;}
    .rd-body .rd-img-box ul.flex li h5 {font-size: 16px;}
    .rd-body .rd-img-box ul.flex li img {width: 100%;}

    .rd-body .rd-list-grid {margin-top: 40px; grid-template-columns: 1fr;}
    .rd-body .rd-list-grid.grid2 {grid-template-columns: 1fr;}
    .rd-body .rd-list-grid h5 {font-size: 20px; padding: 5px 4px;}
    .rd-body .rd-list-grid p {font-size: 15px; line-height: 1.7; padding: 8px 4px;}

    .rd-body .rd-cont-box {margin-top: 50px;}
    .rd-body .rd-cont-box.mt-90 {margin-top: 90px;}
    .rd-body .rd-cont-box h5 {font-size: 20px; padding: 8px 12px;}
    .rd-body .rd-cont-box .rd-cont-item {display: block; margin-top: 24px;}
    .rd-body .rd-cont-box .rd-cont-item .rd-list-style {margin-bottom: 24px;}

    .rd-body .ktcs ul.grid {grid-template-columns: 1fr; gap: 26px 20px;}
    .rd-body .ktcs ul.grid .txt-box h1{font-size: 12px;}
    .rd-body .ktcs ul.grid .txt-box h5 {font-size: 18px; margin-left: 3px;}
    .rd-body .ktcs ul.grid p {font-size: 14px;}


    .rd-contents {display: block;}
    .rd-contents .sbj h4 {font-size: 20px;}

    .rd-body .rd-img-box.cont {display: block;}
    .rd-body .rd-img-box.cont .item:first-child {margin-bottom: 50px;}
    .rd-body .rd-img-box.cont h5 {font-size: 20px; height: 40px; line-height: 38px; border-radius: 20px; margin-bottom: 30px;}

    #rd .rd01-4-cont h5 .resp {display: none;}
    #rd .rd01-4-cont .item {display: block;}
    #rd .rd01-4-cont .item li {margin-bottom: 25px;}
    #rd .rd01-4-cont .item ul.rd-list-style li{margin-bottom: 3px;}
    #rd .rd01-4-cont .item ul.rd-list-style li br {display: none;}

    .tab-btn {display: grid; grid-template-columns: 1fr 1fr;}
    .tab-btn a:last-child:after {display: block;}
    .tab-btn a:nth-child(2):after {display: none;}
    .tab-btn a.active::after {display: none;}

    .patents-container ul.patents-content {grid-template-columns: repeat(2, 1fr); gap: 60px 28px;}
    .patents-container .patents-content li .category {font-size: 14px;}
    .patents-container .patents-content li .number {font-size: 14px;}
    :lang(en) .rd-body .ktcs ul.grid .txt-box h5{font-size: 18px; height: 50px; display: flex; align-items: center;}
}



/* career */
#career .banner{background: url(../images/sub/cr-bg.png) no-repeat center; background-size: cover;}
#career .rec-title {font-size: 50px; font-weight: 400; line-height: 1.5;}
#career .rec-title span {font-size: 50px; font-weight: 700; line-height: 1.5; color: var(--navy);}
.car-body h3 {font-size: 40px; font-weight: 700; font-family: var(--font-primary); color: #444; margin: 0 0 30px;}

.car-list-style.grid {grid-template-columns: 1fr 1fr;}
.car-list-style li {font-size: 17px; font-family: var(--font-primary); line-height: 1.75; position: relative;  margin: 0 0 3px; padding: 0; padding-left: 18px;}
.car-list-style li::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #7e7e7e; position: absolute; top: 12px; left: 0;}
.car-list-style li strong {font-size: 17px; font-weight: 700;}
.car-list-style.noList li {padding-left: 0;}
.car-list-style.noList li::before {display: none;}

#career .talent .grid {grid-template-columns: repeat(4, 1fr); gap: 18px;}
#career .talent .grid .item {position: relative;}
#career .talent .grid .item .txt-box {position: absolute; width: 100%; display: block; bottom: 0; left: 0; padding: 12px 22px;}
#career .talent .grid .item .txt-box h4 {font-size: 26px; font-weight: 700; color: white; margin: 0 0 5px;}
#career .talent .grid .item .txt-box .car-list-style {border-top: 1px solid #707070; padding: 10px 0 0;}
#career .talent .grid .item .txt-box .car-list-style li {color: white; line-height: 1; margin: 0 0 12px;}
#career .talent .grid .item .txt-box .car-list-style li::before {top: 5px; background-color: white;}

#career .welfare .grid {grid-template-columns: 1fr 1fr; gap: 30px 16px;}
#career .welfare .grid .item {display: grid; grid-template-columns: 100px 1fr; gap: 26px; height: 100%; border-bottom: 1px solid #B9B9B9;}
#career .welfare .grid .item .img-box {}
#career .welfare .grid .item .img-box img {}
#career .welfare .grid .item .txt-box {margin: 0 0 30px;}
#career .welfare .grid .item .txt-box h4 {font-size: 24px; font-weight: 700; font-family: var(--font-primary); margin: 0 0 12px;}
#career .welfare .grid .item .txt-box .car-list-style.grid {gap: 0;}
#career .welfare .grid .item .txt-box .car-list-style li {font-size: 16px; line-height: 1.75;}
#career .welfare .grid .item .txt-box .car-list-style li::before {top: 10px;}

#career .process .grid {grid-template-columns: repeat(4, 1fr); position: relative; background-color: #F6F6F6; border-radius: 17px;}
#career .process .grid .item {width: 100%; padding: 19px 0 24px; display: flex; flex-direction: column; align-items: center; position: relative;}
#career .process .grid .item h4 {font-size: 17px; font-weight: 700; font-family: var(--font-primary); color: var(--blue); margin-bottom: 16px;}
#career .process .grid .item img {width: 120px;}
#career .process .grid .item p {font-size: 24px; font-weight: 700; font-family: var(--font-primary); color: #444; margin-top: 10px;}
#career .process .grid .item.border::before {content: ''; position: absolute; width: 1px; height: 80%; background-color: #ccc; left: 0; top: 50%; transform: translateY(-50%);}
#career .process .grid .next {position: absolute; width: 34px; height: 34px; border-radius: 50%; background-color: #646464; text-align: center; top: 50%; left: 0; transform: translateY(-50%) translateX(-50%); z-index: 2;}
#career .process .grid .next i {font-size: 20px; color: white; line-height: 34px;}

#career .process .grid .item.active {border: 2px solid var(--navy); border-radius: 17px; background-color: white;}
#career .process .grid .item.active h4 {color: var(--navy);}
#career .process .grid .item.active p {color: var(--navy);}
#career .process .grid .next.active {background-color: var(--navy);}

#career .process .proc-txt {margin: 40px 0;}

#career .process .email {border-top: 1px solid #B1B1B1; padding-top: 30px; justify-content: space-between; align-items: end;}
#career .process .email .txt-box h4 {font-size: 24px; font-weight: 700; color: #646464; margin: 0 0 10px;}
#career .process .email .txt-box p {font-size: 18px; line-height: 1.5; word-break: keep-all;}
#career .process .email .e-add {border: 1px solid #C2C2C2; padding: 10px 19px; border-radius: 24px;}
#career .process .email .e-add p {font-size: 18px; font-weight: 400; font-family: var(--font-primary);}
#career .process .email .down {border: 1px solid var(--navy); padding: 10px 19px; background-color: var(--navy); border-radius: 24px; margin-left: 15px;}
#career .process .email .down p {font-size: 18px; font-weight: 400; color: #fff; font-family: var(--font-primary);}
#career .process .email .down p i {margin-left: 10px;}
:lang(en) #career .process .email{align-items: end;}
.board-rec .col--sbj {width: 100%;}
.board-rec .col--date {width: 200px; margin-left: 20px;}
.board-rec table {width: 100%; border-top: 2px solid var(--navy); border-bottom: 1px solid #000; background-color: white;} 
.board-rec table tr {border-bottom: 1px solid #CBCBCB;}
.board-rec table tr:last-child {border-bottom: 0;}
.board-rec table tr td .date-resp {display: none; font-size: 14px; font-weight: 700; font-family: var(--font-primary); color: #CBCBCB;}
.board-rec table tr td .sbj {font-size: 20px; font-weight: 700; font-family: var(--font-primary);}
.board-rec table tr td.date {font-size: 14px; font-weight: 700; font-family: var(--font-primary); color: #CBCBCB;}

#career .faq .faq-list {width: 100%; border-top: 1px solid #000; border-bottom: 1px solid #000;}
#career .faq .faq-list li { border-bottom: 1px solid #CBCBCB; cursor: pointer;}
#career .faq .faq-list li:last-child {border-bottom: 0;}
#career .faq .faq-list li .faq-question {display: flex; justify-content: space-between; align-items: center; padding: 24px 28px 24px 50px;}
#career .faq .faq-list li .faq-question .txt-box h4 {font-size: 18px; font-weight: 700; font-family: var(--font-primary); position: relative;}
#career .faq .faq-list li .faq-question .txt-box h4::before {content: 'Q'; position: absolute; top: 0; left: -35px; font-size: 22px; font-weight: 700; font-family: var(--font-primary); line-height: 1.1; color: #646464;}
#career .faq .faq-list li .faq-question .more {position: relative; width: 25px; height: 25px;}
#career .faq .faq-list li .faq-question .more img {width: 25px; position: absolute; top: 0; right: 0; transition: all .4s;}
#career .faq .faq-list li .faq-question .more img.plus {opacity: 1;}
#career .faq .faq-list li .faq-question .more img.min {opacity: 0;}

#career .faq .faq-list li .faq-answer {display: none; padding: 24px 53px 24px 50px; background-color: #F6F6F6; transform: translateY(-100%); transition: all .4s;}
#career .faq .faq-list li .faq-answer p {font-size: 18px; font-weight: 400; font-family: var(--font-primary); line-height: 1.75; word-break: keep-all;}

#career .faq .faq-list li.active .faq-question .more img.plus {opacity: 0;}
#career .faq .faq-list li.active .faq-question .more img.min {opacity: 1;}
#career .faq .faq-list li.active .faq-answer {display: block; transform: translateY(0);}


#career .board-view {border-top: 2px solid var(--navy);}
#career .board-view-head .title {font-family: var(--font-primary);}
#career .board-view-head .title .tag {font-family: var(--font-primary); color: var(--navy);}
#career .board-view-head .info-item {font-family: var(--font-primary);}
#career .board-view-head .info-item b {font-family: var(--font-primary);}
#career .board-view-body {font-family: var(--font-primary);}
#career .board-view-aside aside .board-view-paging .btn span {font-family: var(--font-primary);}
:lang(en) #career .talent .grid .item .txt-box .car-list-style li{font-size: 15px;}
:lang(en) #career .talent .grid .item .txt-box h4{font-size: 22px; line-height: 1.2;}
:lang(en) #career .process .grid .item p{font-size: 22px; display: flex; justify-content: center; align-items: center; text-align: center;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
    #career .rec-title {font-size: 40px;}
    #career .rec-title span {font-size: 40px;}
    .car-body h3 {font-size: 32px;}

    .car-list-style.grid {grid-template-columns: 1fr 1fr;}
    .car-list-style li {font-size: 16px;  margin: 0 0 3px; padding-left: 15px; word-break: keep-all;}
    .car-list-style li::before {width: 6px; height: 6px; top: 12px;}
    .car-list-style li strong {font-size: 16px;}

    #career .talent .grid {grid-template-columns: repeat(2, 1fr);}
    #career .talent .grid .item .txt-box h4 {font-size: 24px;}
    #career .talent .grid .item .bg img {width: 100%; height: 100%; object-fit: cover;}

    #career .welfare .grid {grid-template-columns: 1fr 1fr; gap: 30px 16px;}
    #career .welfare .grid .item {grid-template-columns: 80px 1fr; gap: 15px;}
    #career .welfare .grid .item .img-box {width: 70px; height: 70px;}
    #career .welfare .grid .item .txt-box {margin: 0 0 20px;}
    #career .welfare .grid .item .txt-box h4 {font-size: 20px;}
    #career .welfare .grid .item .txt-box .car-list-style.grid {gap: 0;}
    #career .welfare .grid .item .txt-box .car-list-style li {line-height: 1.5;}

    #career .process .grid {grid-template-columns: repeat(4, 1fr);}
    #career .process .grid .item {display: flex; flex-direction: column; align-items: center; position: relative;}
    #career .process .grid .item h4 {font-size: 14px;}
    #career .process .grid .item img {width: 80px;}
    #career .process .grid .item p {font-size: 18px;}

    #career .process .email {padding-top: 30px; gap: 20px;}
    #career .process .email .txt-box h4 {font-size: 24px;}
    #career .process .email .txt-box p {font-size: 16px; line-height: 32px;}
    #career .process .email .e-add {border-radius: 18px;}

    .board-rec .col--sbj {width: 100%;}
    .board-rec .col--date {display: none;}
    .board-rec table tr td .date-resp {display: block;}
    .board-rec table tr td .sbj {font-size: 18px;}
    .board-rec table tr td.date {display: none;}

    #career .faq .faq-list li .faq-question .txt-box h4 {font-size: 16px;}
    #career .faq .faq-list li .faq-question .more img {width: 25px;}

    #career .faq .faq-list li .faq-answer p {font-size: 16px;}
    :lang(en) #career .process .email{flex-direction: column; align-items: start;}
}
@media screen and (max-width: 767px) {
    #career .rec-title {font-size: 29px;}
    #career .rec-title span {font-size: 29px;}
    .car-body h3 {font-size: 22px;}

    .car-list-style.grid {grid-template-columns: 1fr 1fr;}
    .car-list-style li {font-size: 14px;  margin: 0 0 3px; padding-left: 15px; word-break: keep-all;}
    .car-list-style li::before {width: 6px; height: 6px; top: 12px;}
    .car-list-style li strong {font-size: 16px;}

    #career .talent .grid .item .txt-box {padding: 10px 18px;}
    #career .talent .grid .item .txt-box h4 {font-size: 20px;}

    #career .welfare .grid {grid-template-columns: 1fr;}
    #career .welfare .grid .item:last-child {border-bottom: 0;}

    #career .process .grid {grid-template-columns: repeat(2, 1fr);}
    #career .process .grid .item.border.bd-t::before {width: 80%; height: 1px; top: 0; left: 10%;}
    #career .process .grid .item p {font-size: 18px;}
    #career .process .grid .next {width: 22px; height: 22px;}
    #career .process .grid .next i {font-size: 12px; line-height: 20px;}

    #career .process .email {flex-direction: column; align-items: stretch;}
    #career .process .email .flex {flex-direction: column; gap: 20px;}
    #career .process .email .e-add p {text-align: center;}
    #career .process .email .down {margin-left: 0; text-align: center;}

    .board-rec .col--date {display: none;}
    .board-rec table tr td .sbj {font-size: 16px;}
    .board-rec table tr td.date {display: none;}

    #career .faq .faq-list li .faq-question .more img {width: 20px;}

    #career .faq .faq-list li .faq-answer p {font-size: 16px;}
    :lang(en) #career .talent .grid .item .txt-box h4{font-size: 18px;}
    :lang(en) #career .talent .grid .item .txt-box{padding: 8px;}
    :lang(en) #career .talent .grid .item .txt-box .car-list-style li{line-height: 1.3;font-size: 14px; margin-bottom: 4px;}
    #career .process .grid .item:nth-child(3) .next{
        display: none;
    }

}



/* esg */
#esg .banner{background: url(../images/sub/esg-bg.png) no-repeat center; background-size: cover;}
#esg h2 {font-size: 50px; font-weight: 400; line-height: 1.5;}
#esg h2 span {font-size: 50px; font-weight: 700; line-height: 1.5; color: var(--navy);}
.esg-body h3 {font-size: 40px; font-weight: 700; font-family: var(--font-primary); color: #000; margin: 0 0 30px;}

#esg .esg-body.esg-grid {display: grid; grid-template-columns: 1fr 796px; gap: 100px;}
#esg .esg-body.esg-grid.moView {display: none;}

#esg .way .grid {grid-template-columns: repeat(3, 1fr); gap: 18px;}
#esg .way .grid .item {position: relative;}
#esg .way .grid .item .txt-box {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: start; padding: 30px;}
#esg .way .grid .item .txt-box h4 {font-size: 20px; font-weight: 400; font-family: var(--font-primary); color: #87CBFF;}
#esg .way .grid .item .txt-box h5 {font-size: 30px; font-weight: 700; font-family: var(--font-primary); color: white;}
#esg .way .grid .item .txt-box p {font-size: 17px; font-weight: 400; font-family: var(--font-primary); color: white; word-break: keep-all;}

#esg .sub-inner:has(.manage) {padding: 100px 0; background-image: url(../images/sub/esg02-bg.png); background-size: cover; background-repeat: no-repeat; background-position: center center;}
#esg .manage h3 {font-size: 31px; font-weight: 700; font-family: var(--font-primary); color: #87CBFF; margin: 0 0 18px;}
#esg .manage h4 {font-size: 50px; font-weight: 700; font-family: var(--font-primary); color: white; line-height: 1.5; margin: 0 0 190px;}
#esg .manage p {font-size: 20px; font-weight: 400; font-family: var(--font-primary); color: white; line-height: 1.75; margin-top: 20px; word-break: keep-all;}

#esg .ethics .esg-body {margin-bottom: 90px;}
#esg .ethics .esg-body .title {border-top: 1px solid #646464; padding: 20px 0 0;}
#esg .ethics .esg-body.esg-grid .title h3 {color: #000; margin: 0 0 20px;}
#esg .ethics .esg-body.esg-grid .title p {font-size: 24px; font-weight: 500; font-family: var(--font-primary); line-height: 1.75; color: var(--navy);}
#esg .ethics .esg-body.esg-grid .cont p {font-size: 19px; font-weight: 400; font-family: var(--font-primary); line-height: 1.75;}

#esg .ethics .esg-body.esg-grid .cont.tablet {position: relative; height: 560px;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box {width: calc(100% - 45px); padding: 40px 35px; position: absolute; top: 19px; left: 14px; z-index: 2;}

#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol {padding: 0 10px;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li {display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #D9D9D9;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li:first-child {padding-top: 0;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li:last-child {border-bottom: 0; padding-bottom: 4px;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li .num {width: 27px; height: 27px; font-size: 22px; font-weight: 700; font-family: var(--font-primary); line-height: 28px; color: white; text-align: center; border-radius: 50%; background-color: #646464; margin-right: 15px;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li p {font-size: 20px; font-weight: 500; font-family: var(--font-primary); color: #444;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li p span {font-size: 20px; font-weight: 700; font-family: var(--font-primary); color: var(--blue);}

#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box hr {border-color: #707070; margin: 30px 0;}

#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter {padding: 0 5px;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter p {font-size: 17px; font-weight: 400; font-family: var(--font-primary); line-height: 1.75;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong {font-size: 20px; font-weight: 700; font-family: var(--font-primary); color: #646464; text-align: right; display: block; margin-top: 25px;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong span {font-size: 20px; font-weight: 700; font-family: var(--font-primary); color: #000;}
#esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong img {display: inline-block; width: 120px;}

#esg .ethics .esg-body.esg-grid .cont.tablet .bg {width: 1170px; top: -25px; right: -60px; position: absolute; z-index: 1;}

#esg .ethics .esg-body .resp {display: grid; grid-template-columns: repeat(5, 1fr); padding: 20px 0; background-color: white;}
#esg .ethics .esg-body .resp li {padding: 0 15px; border-left: 1px solid #C6C6C6;}
#esg .ethics .esg-body .resp li:first-child {border: 0;}
#esg .ethics .esg-body .resp li .img-box {display: flex; justify-content: center; align-items: center; width: 74px; height: 74px; border-radius: 50%; background-color: #F6F6F6; flex-shrink: 0;}
#esg .ethics .esg-body .resp li .img-box img {display: block; width: 40px;}
#esg .ethics .esg-body .resp li h4 {font-size: 24px; font-weight: 700; font-family: var(--font-primary); color: #646464; margin-top: 24px;}
#esg .ethics .esg-body .resp li p {font-size: 17px; font-weight: 400; font-family: var(--font-primary); line-height: 1.5; margin-top: 10px;}

#esg .report .title p {font-size: 17px; font-family: var(--font-primary); line-height: 32px;}
#esg .report .report-list {display: grid; grid-template-columns: repeat(4, 1fr); background: #f6f6f6; margin: 42px 0 80px;}
#esg .report .report-list li {padding: 30px 25px; position: relative;}
#esg .report .report-list li h4 {font-size: 24px; font-weight: 700; font-family: var(--font-primary); color: #646464; margin-bottom: 10px;}
#esg .report .report-list li p {font-size: 24px; font-weight: 700; font-family: var(--font-primary);}
#esg .report .report-list li p.address {font-size: 18px; font-weight: 400; line-height: 1.5;}
#esg .report .report-list li p.address strong {font-size: 18px;}
#esg .report .report-list li .img-box {width: 87px; height: 87px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 30px; right: 25px;}
#esg .report .report-list li .img-box img {}

#esg .report .report-list li.active {border-radius: 16px; background-color: var(--blue);}
#esg .report .report-list li.active .img-box {width: 91px; height: 91px; background-color: #007CDB; position: static;}
#esg .report .report-list li.active .img-box img {width: 50px;}
#esg .report .report-list li.active .txt-box {display: flex; justify-content: space-between; align-items: end; margin-top: 20px;}
#esg .report .report-list li.active .txt-box h4 {font-size: 30px; line-height: 1.25; color: white; margin-bottom: 0;}
#esg .report .report-list li.active .txt-box .next {width: 42px; height: 42px; border-radius: 50%; background-color: white; text-align: center;}
#esg .report .report-list li.active .txt-box .next i {font-size: 24px; line-height: 42px; color: var(--blue);}

#esg .report .report-list li.line {position: relative;}
#esg .report .report-list li.line::before {content: ''; width: 1px; height: 85%; background-color: #C6C6C6; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
#esg .report .report-list li.line::after{display: none; content: ''; width: 85%; height: 1px; background-color: #C6C6C6; position: absolute; top: 0; left: 7.5%;}

#esg .report .esg-body .title {border-top: 1px solid #646464; padding: 14px 0 0;}
#esg .report .esg-body.esg-grid .title h3 {font-size: 22px; font-weight: 700; font-family: var(--font-primary); color: #646464; margin: 0 0 14px;}
#esg .report .esg-body.esg-grid .title p {font-size: 15px; font-weight: 400; font-family: var(--font-primary); line-height: 1.75; color: #646464;}
#esg .report .esg-body.esg-grid .title p span {width: 13px; display: inline-block;}

#esg .report .esg-body.esg-grid .cont { margin-bottom: 60px;}
#esg .report .esg-body.esg-grid .cont .func {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
#esg .report .esg-body.esg-grid .cont .func li {display: flex; gap: 0; border-top: 1px solid #CBCBCB; padding: 14px 0 26px; margin: 0;}
#esg .report .esg-body.esg-grid .cont .func li.last {padding: 12px 0 0;}
#esg .report .esg-body.esg-grid .cont .func li h4 {width: 35px; font-size: 18px; font-weight: 700; font-family: var(--font-primary); line-height: 1.6; color: var(--navy);}
#esg .report .esg-body.esg-grid .cont .func.blue li h4 {color: var(--blue);}
#esg .report .esg-body.esg-grid .cont .func li .txt-box {width: 100%;}
#esg .report .esg-body.esg-grid .cont .func li .txt-box strong {font-size: 18px; font-weight: 600; font-family: var(--font-primary); line-height: 1.6;}
#esg .report .esg-body.esg-grid .cont .func li .txt-box p {margin-top: 10px; font-size: 16px; line-height: 1.6; color: #444; word-break: keep-all;}

#esg .form h2 {font-size: 60px; font-weight: 700;}
#esg .form .inp-notice {margin-top: 15px; font-size: 16px; color: #9C9C9C;}

:lang(en) #esg h2{line-height: 1.3;}
:lang(en) #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li .num{ flex-shrink: 0;}
:lang(en) #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li p{line-height: 1.3; font-size: 18px;}
:lang(en) #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box{}
:lang(en) #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box hr{margin: 15px 0;}
:lang(en) #esg .ethics .esg-body .resp li h4{font-size: 22px; line-height: 1.3;}
:lang(en) #esg .report .report-list li p{font-size: 23px;     padding-bottom: 10px;}
:lang(en) #esg .report .report-list li p.address{font-size: 20px;}
:lang(en) #esg .report .esg-body.esg-grid .cont .func{
    border-top: 1px solid #CBCBCB;
}
:lang(en) #esg .report .esg-body.esg-grid .cont .func li:first-of-type,:lang(en) #esg .report .esg-body.esg-grid .cont .func li:nth-of-type(2){
border-top: transparent;
}
@media (hover: hover) {
    .esg-form-body .dd-file .file-box label .btn-find:hover {background: var(--navy);}
    .esg-form-body .dd-file .file-box .btn-cancel:hover {background: var(--navy); border: 0;}
    .esg-form-body .dd-form .submit-button:hover {background: var(--navy);}
}
@media screen and (max-width: 1399px) {
    #esg h2 {font-size: 40px;}
    #esg h2 span {font-size: 40px;}
    #esg .form h2 {font-size: 40px;}
    .esg-body h3 {font-size: 32px;}

    #esg .esg-body.esg-grid {display: block;}
    #esg .esg-body.esg-grid.moView {display: none;}

    #esg .way .grid .item .txt-box {padding: 20px;}
    #esg .way .grid .item .txt-box h4 {font-size: 16px;}
    #esg .way .grid .item .txt-box h5 {font-size: 24px;}
    #esg .way .grid .item .txt-box p {font-size: 14px;}

    #esg .manage h3 {font-size: 22px; margin: 0 0 18px;}
    #esg .manage h4 {font-size: 36px; margin: 0 0 190px;}
    #esg .manage p {font-size: 18px; margin-top: 20px;}

    #esg .ethics .esg-body {margin-bottom: 90px;}
    #esg .ethics .esg-body .title {padding: 20px 0 0;}
    #esg .ethics .esg-body.esg-grid .title h3 {margin: 0 0 20px;}
    #esg .ethics .esg-body.esg-grid .title p {font-size: 24px;}
    #esg .ethics .esg-body.esg-grid .cont p {font-size: 18px;}

    #esg .ethics .esg-body .title.tablet {display: flex; align-items: center; margin-bottom: 40px;}
    #esg .ethics .esg-body .title.tablet h3 {margin: 0 20px 0 0;}
    #esg .ethics .esg-body.esg-grid .cont.tablet {position: relative; height: 560px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box {width: calc(100% - 45px); padding: 40px 35px; position: absolute; top: 19px; left: 14px; z-index: 2;}

    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol {padding: 0 10px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li {padding: 12px 0;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li .num {width: 22px; height: 22px; font-size: 16px; line-height: 22px; margin-right: 12px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li p {font-size: 18px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li p span {font-size: 18px;}

    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box hr {margin: 25px 0;}

    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter {padding: 0 5px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter p {font-size: 16px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong {font-size: 18px; margin-top: 25px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong span {font-size: 18px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong img {width: 100px;}

    #esg .ethics .esg-body.esg-grid .cont.tablet .bg {width: 1000px; top: 0; right: -30px; position: absolute; z-index: 1;}

    #esg .ethics .esg-body .resp {grid-template-columns: repeat(3, 1fr); padding: 20px 0; gap: 40px 0;}
    #esg .ethics .esg-body .resp li {padding: 0 15px; border-left: 1px solid #C6C6C6;}
    #esg .ethics .esg-body .resp li:nth-child(4) {border: 0;}
    #esg .ethics .esg-body .resp li h4 {font-size: 22px;}
    #esg .ethics .esg-body .resp li p {font-size: 16px;}

    #esg .report .title p {font-size: 16px;}
    #esg .report .report-list {grid-template-columns: repeat(2, 1fr); gap: 20px 0; background: #f6f6f6; margin: 42px 0 80px;}
    #esg .report .report-list li {padding: 30px 25px; height: 220px;}
    #esg .report .report-list li h4 {font-size: 22px; margin-bottom: 10px;}
    #esg .report .report-list li p {font-size: 20px;}
    #esg .report .report-list li p.address {font-size: 16px;}
    #esg .report .report-list li p.address strong {font-size: 18px;}
    #esg .report .report-list li .img-box {width: 70px; height: 70px; position: absolute; bottom: 30px; right: 25px;}

    #esg .report .report-list li.line3::before {display: none;}
    #esg .report .report-list li.line3::after{display: block;}

    #esg .report .report-list li.active .img-box {width: 80px; height: 80px;}
    #esg .report .report-list li.active .img-box img {width: 45px;}
    #esg .report .report-list li.active .txt-box h4 {font-size: 24px;}

    #esg .report .esg-body.esg-grid .title p span {display: none;}

    #esg .report .esg-body.esg-grid .cont { margin: 40px 0 60px;}
    #esg .report .esg-body.esg-grid .cont .func li {display: flex; gap: 0; border-top: 1px solid #CBCBCB; padding: 14px 0 26px; margin: 0;}
    #esg .report .esg-body.esg-grid .cont .func li h4 {width: 35px; font-size: 18px;}
    #esg .report .esg-body.esg-grid .cont .func li .txt-box strong {font-size: 18px;}
    #esg .report .esg-body.esg-grid .cont .func li .txt-box p {font-size: 14px;}
    :lang(en) #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter p{font-size: 15px;}
    :lang(en) #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li p{font-size: 16px;}
}
@media screen and (max-width: 767px) {
    #esg h2 {font-size: 29px;}
    #esg h2 span {font-size: 29px;}
    .esg-body h3 {font-size: 22px;}
    #esg .form h2 {font-size: 29px;}

    #esg .esg-body.esg-grid {display: block;}
    #esg .esg-body.esg-grid.moViewN {display: none;}

    #esg .way .grid {display: block !important;}
    #esg .way .grid .item {width: 100%; height: 120px; margin-bottom: 30px; border-radius: 20px; overflow: hidden;}
    #esg .way .grid .item:last-child {margin-bottom: 0;}
    #esg .way .grid .item::before {content: ''; position: absolute; width: 100%; height: 100%; background-color: #000; opacity: .5; top: 0; left: 0;}
    #esg .way .grid .item .txt-box {padding: 30px; flex-direction: row; justify-content: flex-start; align-items: center;}
    #esg .way .grid .item .txt-box div {width: 40%;}
    #esg .way .grid .item .txt-box h4 {font-size: 16px;}
    #esg .way .grid .item .txt-box h5 {font-size: 24px;}
    #esg .way .grid .item .txt-box p {font-size: 14px;}
    #esg .way .grid .item .bg {width: 100%; height: 100%;}
    #esg .way .grid .item .bg img {width: 100%; height: 100%; object-fit: cover;}

    #esg .manage h3 {font-size: 18px;}
    #esg .manage h4 {font-size: 28px; margin: 0 0 60px;}
    #esg .manage p {font-size: 16px;}

    #esg .ethics .esg-body {margin-bottom: 90px;}
    #esg .ethics .esg-body .title {padding: 15px 0 0;}
    #esg .ethics .esg-body.esg-grid .title h3 {font-size: 22px; margin: 0 0 20px;}
    #esg .ethics .esg-body.esg-grid .title p {font-size: 16px;}
    #esg .ethics .esg-body.esg-grid .cont p {font-size: 16px; word-break: keep-all;}

    #esg .ethics .esg-body .title.tablet {display: block; margin-bottom: 40px;}
    #esg .ethics .esg-body .title.tablet h3 {margin: 0 20px 0 0;}
    #esg .ethics .esg-body.esg-grid .cont.tablet {position: initial; height: auto;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box {width: 100%; padding: 0; position: initial;}

    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li {align-items: start;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li .num {width: 18px; height: 18px; font-size: 10px; line-height: 18px; margin-top: 4px; margin-right: 7px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li p {font-size: 15px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box ol li p span {font-size: 15px;}

    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter {padding: 15px; background-color: #fff;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter p {font-size: 14px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong {font-size: 16px; margin-top: 25px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong span {font-size: 16px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong img {width: 80px;}

    #esg .ethics .esg-body.esg-grid .cont.tablet .bg {display: none;}

    #esg .ethics .esg-body .resp {display: block; padding: 0;}
    #esg .ethics .esg-body .resp li {padding: 20px; display: flex; align-items: center; border-top: 1px solid #C6C6C6; border-left: 0}
    #esg .ethics .esg-body .resp li:nth-child(1) {border: 0;}
    #esg .ethics .esg-body .resp li:nth-child(4) {border-top: 1px solid #C6C6C6;}
    #esg .ethics .esg-body .resp li .img-box {margin-right: 20px;}
    #esg .ethics .esg-body .resp li h4 {font-size: 20px; margin-top: 0;}
    #esg .ethics .esg-body .resp li p {font-size: 14px; margin-top: 7px;}

    #esg .report .title p {font-size: 16px; word-break: keep-all;}
    #esg .report .report-list {display: block; background: #f6f6f6; margin: 42px 0 80px;}
    #esg .report .report-list li {padding: 30px 25px; height: auto;}
    #esg .report .report-list li h4 {font-size: 20px; margin-bottom: 7px;}
    #esg .report .report-list li p {font-size: 18px;}
    #esg .report .report-list li p.address {font-size: 16px;}
    #esg .report .report-list li p.address strong {font-size: 18px;}

    #esg .report .report-list li.line::before {display: none;}
    #esg .report .report-list li.line::after{display: block; width: 100%; left: 0;}

    #esg .report .report-list li.active a {height: 100%; display: flex; align-items: center;}
    #esg .report .report-list li.active .img-box {width: 70px; height: 70px; margin-right: 20px;}
    #esg .report .report-list li.active .img-box img {width: 40px;}
    #esg .report .report-list li.active .txt-box {margin-top: 0; width: calc(100% - 100px); align-items: center;}
    #esg .report .report-list li.active .txt-box h4 {font-size: 24px;}
    #esg .report .report-list li.active .txt-box .next {width: 36px; height: 36px;}
    #esg .report .report-list li.active .txt-box .next i {font-size: 20px; line-height: 36px;}

    #esg .report .esg-body.esg-grid .title p span {display: none;}

    #esg .report .esg-body.esg-grid .cont { margin: 40px 0 60px;}
    #esg .report .esg-body.esg-grid .cont .func {display: block;}
    #esg .report .esg-body.esg-grid .cont .func li {display: flex; gap: 0; border-top: 1px solid #CBCBCB; padding: 14px 0 26px; margin: 0;}
    #esg .report .esg-body.esg-grid .cont .func li.last {padding: 14px 0 26px;}
    #esg .report .esg-body.esg-grid .cont .func li h4 {width: 35px; font-size: 18px;}
    #esg .report .esg-body.esg-grid .cont .func li .txt-box strong {font-size: 18px;}
    #esg .report .esg-body.esg-grid .cont .func li .txt-box p {font-size: 14px;}
    :lang(en) #esg .report .report-list li p{font-size: 18px;}
    :lang(en) #esg .report .report-list li p.address{font-size: 16px;}
    :lang(en) #esg .ethics .esg-body .resp li h4{font-size: 20px;}
}
@media screen and (max-width: 360px) {
    #esg .way .grid .item .txt-box {padding: 15px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong {font-size: 14px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong span {font-size: 14px;}
    #esg .ethics .esg-body.esg-grid .cont.tablet .txt-box .letter strong img {width: 60px;}
}


/* support */
#support .banner{background: url(../images/sub/supp-bg.png) no-repeat center; background-size: cover;}
:lang(en) #support .inquiry-form-body .dd-form .label > span{display: flex; gap: 4px; font-weight: 500;}
.board-news .board_ls {width: 100%; border-top: 2px solid var(--navy); border-bottom: 1px solid #000; background-color: white;} 
.board-news .board_ls colgroup { border-spacing: 14px;}
.board-news .board_ls .col--num {width: 90px; background-color: #FBFBFB;}
.board-news .board_ls .col--sbj {padding: 0;}
.board-news .board_ls .col--date {width: 170px;}
.board-news .board_ls tr {}
.board-news .board_ls tr td.bb-1 {border-bottom: 1px solid #CBCBCB;}
.board-news .board_ls tr:last-child td {border-bottom: 0;}
.board-news .board_ls tr td .num {font-size: 20px; font-weight: 700; font-family: var(--font-primary); color: #CBCBCB;}
.board-news .board_ls tr td.title {padding: 0;}
.board-news .board_ls tr td .box {display: flex; margin: 0 14px; padding: 20px; border-bottom: 1px solid #CBCBCB;}
.board-news .board_ls tr:last-child td .box {border-bottom: 0;}
.board-news .board_ls tr td .box .category {font-size: 20px; font-weight: 700; font-family: var(--font-primary); min-width: 100px;}
.board-news .board_ls tr td .box .category.notice {color: var(--blue);}
.board-news .board_ls tr td .box .category.news {color: var(--navy);}
.board-news .board_ls tr td .box .sbj {font-size: 20px; font-weight: 700; font-family: var(--font-primary); border: 0;}
.board-news .board_ls tr td.date {font-size: 14px; font-weight: 700; font-family: var(--font-primary); color: #CBCBCB; text-align: right;}

#support .board-view {border-top: 2px solid var(--navy);}
#support .inquiry-form-body .dd-form .label .title {width: 47px; min-width: 0;}
#support .board-view-head .title {font-family: var(--font-primary);}
#support .board-view-head .title .tag {font-family: var(--font-primary); color: var(--navy);}
#support .board-view-head .info-item {font-family: var(--font-primary);}
#support .board-view-head .info-item b {font-family: var(--font-primary);}
#support .board-view-body {font-family: var(--font-primary);}
#support .board-view-aside aside .board-view-paging .btn span {font-family: var(--font-primary);}
:lang(en) #support  .inquiry-form-body .dd-form .label{display: flex;     align-items: start;justify-content: space-between;
   }
   :lang(en) #support  .inquiry-form-body .dd-form-table tbody tr :where(th, td){text-align: start;}
@media (hover: hover) {
    .inquiry-form-body .dd-form .submit-button:hover {background: var(--navy);}
}
@media screen and (max-width: 1399px) { 
    .board-news .board_ls colgroup { border-spacing: 14px;}
    .board-news .board_ls .col--num {width: 60px;}
    .board-news .board_ls .col--date {width: 110px;}
    .board-news .board_ls tr td .num {font-size: 16px;}
    .board-news .board_ls tr td .box .category {font-size: 16px; width: 60px;}
    .board-news .board_ls tr td .box .sbj {font-size: 16px;}
}
@media screen and (max-width: 767px) {
    .board-news .board_ls colgroup { border-spacing: 14px;}
    .board-news .board_ls .col--num {width: 40px;}
    .board-news .board_ls .col--sbj {width: 100%;}
    .board-news .board_ls .col--date {display: none;}
    .board-news .board_ls tr td .num {font-size: 12px;}
    .board-news .board_ls tr td .box {display: grid; grid-template-columns: 50px 1fr; padding: 20px 10px; margin-right: 0;}
    .board-news .board_ls tr td .box .category {font-size: 14px; width: 50px;}
    .board-news .board_ls tr td .box .sbj {font-size: 14px;}
    .board-news .board_ls tr td.date {display: none;}
    :lang(en) #support .inquiry-form-body .dd-form .label{justify-content: start;}
}
@media screen and (max-width: 499px) {
    /* common */
    .sub-cate.moView {grid-template-columns: repeat(2, 1fr);}
}