@charset "utf-8";

/* 
 * content CSS Document
 *
 */
header {position: absolute;}
header .logo .bk {display: none !important; opacity: 0;}
header .header-wrap.on .logo .bk {display: block !important; opacity: 1;}

/* sub-visual */
.area-subVisual {position: relative; width: 100%; height: 550rem; background-color: var(--color-black);background-color:var(--color-black);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
.subVis_tit {display: flex; flex-direction: column; justify-content: center; align-items:center; color: var(--color-white); text-align: center; height: 100%;}
.subVis_tit h2 {font-size: 65rem; font-weight: 600; }
.subVis_tit span.eng {font-size: 18rem; letter-spacing: 0.02em; font-weight: 600; display: block; margin-bottom: 20rem; opacity: 0.8;}

[data-sublayout="about"] {background-image: url(/images/content/sub_visual01.jpg);}
[data-sublayout="business"] {background-image: url(/images/content/sub_visual02.jpg);}
[data-sublayout="technology"] {background-image: url(/images/content/sub_visual03.jpg);}
[data-sublayout="esg"] {background-image: url(/images/content/sub_visual04.jpg);}
[data-sublayout="recruit"] {background-image: url(/images/content/sub_visual05.jpg);}
[data-sublayout="investor"] {background-image: url(/images/content/sub_visual06.jpg);}
[data-sublayout="content"] {background-image: url(/images/content/sub_visual07.jpg);}

/* lnb */
.area_lnb {position: absolute; bottom: 0; left: 0; width: 100%; height: 80rem; font-size: 18rem; border-top: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(20rem); z-index: 8;}
.area_lnb .inr {display: flex; justify-content: center; height: 100%;}
.area_lnb .dept1 {position: relative; display: flex; align-items: center; justify-content: center; padding-right:42rem; margin-right: 10rem; font-size: 25rem; font-weight:600; color: var(--color-white); white-space: nowrap;}
.area_lnb .dept1::before {position: absolute; content: ''; top: 50%; right: 0; width:7rem; height:7rem; border-radius: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.25)}
.area_lnb ul {display: flex; height: 100%;}
.area_lnb li {display: inline-block; color: var(--color-white);}
.area_lnb li a {position: relative; display: flex; align-items: center; white-space: nowrap; width: 100%; height: 100%; padding: 0 25rem; box-sizing: border-box; opacity: 0.5;}
.area_lnb li a.on {opacity: 1 !important; pointer-events: none;}
.area_lnb li a.on::before { opacity: 1;}

@media (hover: hover){
	.area_lnb li a:hover {opacity: 1 !important; z-index: 10;}
}
.area_lnb.fix .dept1 {font-size: 20rem; margin-right: 10rem; padding-right: 30rem;}
.area_lnb.fix {position: fixed; top: 100rem; left: 0; z-index: 80; width: 100%; height: 60rem; font-size: 16rem; background: #00aa50; /* transition: all 0.8s ease; */ border-top: 0;}
.area_lnb.fix .home {background:rgba(0, 0, 0, 0.25); border: 0;}
.area_lnb.fix  li a { padding: 0 15rem;}

/* 1. 공통부분 */
#content {padding: 110rem 0 100rem; min-height:600rem; transition:0.3s ease; }
.sub-title {margin-bottom: 60rem; text-align: center;}
.sub-title h2 {margin:0 auto; font-size: 40rem; color: var(--color-black);}
.sub-title p {font-size: 18rem; font-weight: 300; color: #555; margin-top: 30rem;}
.sub-title p strong {font-weight: 600;}
.sub-title a {display: flex; align-items: center; justify-content: center; width: 50rem; height: 50rem; border: 1rem solid #555; transition: all .5s;}
.sub-title a svg {height: 11rem; fill: #555;  transition: all .5s;}
.sub-title a:hover {background-color: var(--color-black); border-color: var(--color-black);}
.sub-title a:hover svg {fill:var(--color-white);}
.ss-tit span {display: block; font-size: 18rem; letter-spacing:0.05em; font-weight: 600; text-transform: uppercase; color: var(--color-point); margin-bottom:35rem;}
.ss-tit h2 {font-size: 35rem; line-height: 1.45; letter-spacing: -0.02em; font-weight: 400;}
.ss-tit strong {display: block; font-weight: 700;}
.ss-tit p {font-size: 19rem; line-height: 1.8; color: #555;}
.sub-title .inr > div {margin:  0 30rem;}
.red {color: #e60012;}
.green {color: #009944;}
.blue {color: #0068b7;}

@media (max-width:1080px){
    #content {padding: 100rem 0; min-height: auto;}
    .area_lnb {height: 75rem;}
}
@media (max-width:767px){
    .area_lnb.fix {top: 80rem;}
    #content {padding: 70rem 0; }
    #content.pdt {padding: 180rem 0 80rem}
    .area-subVisual  {height: 500rem;}
    .subVis_tit h2 {font-size: 50rem;}
    .subVis_tit span.eng {font-size: 15rem; margin-bottom: 15rem;}
    .sub-title {margin-bottom: 40rem;}
    .sub-title h2 {font-size: 30rem;}
    .sub-title p {font-size: 15rem; line-height: 1.5; margin-top: 20rem;}
    .sub-title a {width: 40rem; height: 40rem;}
    .ss-tit span {font-size: 15rem; margin-bottom: 20rem;}
    .ss-tit h2 {font-size: 25rem;}
    .ss-tit p {font-size: 15rem; margin-top: 20rem;}
    .area_lnb {height: 60rem; font-size: 15rem; font-weight: 300;}
    .area_lnb .inr {overflow-x: auto; justify-content: flex-start; gap: 0;}
    .area_lnb li a {padding: 0 0 0 25rem; font-size: 15rem;} 
    .area_lnb.fix .dept1, .area_lnb .dept1 {font-size:18rem; font-weight: 500; padding-right:23rem;}
}
@media (max-width:480px){
    #content {padding: 60rem 0;}
    .sub-title {margin-bottom: 30rem;}
    .sub-title .inr {justify-content: center;}
    .sub-title a {display: none;}
    .area-subVisual {height: 380rem;}
    .subVis_tit h2 {font-size: 40rem;}
    .sub-title p br {display: none;}
    .area_lnb {height: 60rem; backdrop-filter:none; background-color: rgba(0, 0, 0, 0.8); }
    .area_lnb .lnb ul {display: flex; justify-content:center; white-space: nowrap;}
    .area_lnb li a {padding: 0; padding-right: 18rem;}
    .area_lnb .dept1 {display: none;}
}

/* about01 - 회사소개 */
.about01_img img {width: 100%; max-width: 100%; object-fit: cover;}
.about01_txt {margin-top: 100rem; position: relative;}
.about01_txt .vds {max-width: 100%; object-fit: contain; position: absolute; left: -10rem; bottom: 30rem; opacity: 0.25;}
.about01_txt .inr {display: flex; gap: 50rem; justify-content: space-between;}
.about01_txt .ss-tit h2 {font-size: 38rem; font-weight: 700; line-height: 1.4; margin-top: 30rem; letter-spacing: -0.01em;}
.about01_txt .list {width: 880rem; border-top: 2rem solid var(--color-black); transition-delay: .5s;}
.about01_txt .list li {padding: 22rem 15rem; border-bottom: 1rem dashed #ddd; font-size: 18rem;}
.about01_txt .list li:last-child { border-bottom: 1rem solid #ddd;}
.about01_txt .list dl {display: flex; align-items: center;}
.about01_txt .list dt {font-weight: 600; min-width: 120rem;}
.about01_txt .list dd {line-height: 1.6; font-weight: 300;}
.about01_txt .list dd.flex {display: flex; flex-wrap: wrap; gap:10rem 30rem;}
.about01_txt .list dd.flex span {display: inline-block; color:var(--color-black); font-weight: 600; margin-right: 15rem;}


@media (max-width:1280px){
    .about01_txt .list {width: 750rem;}
}
@media (max-width:1080px){
    .about01_img {height: 300rem;}
    .about01_img img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
    .about01_txt .inr {flex-direction: column; gap: 40rem;}
    .about01_txt {margin-top: 80rem;}
    .about01_txt .list {width: 100%;}
}
@media (max-width:767px){
    .about01_txt {margin-top: 40rem;}
    .about01_txt .inr {gap: 30rem;}
    .about01_txt .ss-tit h2 {font-size: 25rem; margin-top: 15rem;}
    .about01_txt .list li {font-size: 16rem; padding:20rem 0;}
    .about01_txt .list dl {flex-direction: column; gap: 15rem; align-items: flex-start;}
    .about01_txt .list dd.flex {flex-wrap: wrap;}
    .about01_txt .vds {width: 400rem; bottom: -50rem;}
}
@media (max-width:480px){
    .about01_txt .ss-tit h2 {font-size: 20rem;}
    .about01_txt .list li {font-size: 15rem; padding:15rem 0;}
    .about01_txt .list dl {gap: 10rem;}
    .about01_txt .list dd.flex {gap: 10rem 20rem;}
}

/* about02 - 인사말 */
[data-sub="about02"] {position: relative;}
[data-sub="about02"]::before {content: ''; position: absolute; top: -110rem; right: 0; width: 30%; height: 135%; z-index: -1; background: #f5f5f5;}
[data-sub="about02"] .sub-title {margin-bottom: 80rem;}
[data-sub="about02"] .sub-cont .inr {display: flex; align-items: center; justify-content: space-between; gap: 50rem;}
.ab02_txt {letter-spacing: -0.01em;}
.ab02_txt h2 {font-size: 55rem; line-height: 1.2; font-weight: 700; margin-bottom: 45rem; text-transform: uppercase;}
.ab02_txt dd {font-size: 19rem; line-height: 1.6; color: #555;}
.ab02_txt dd + dd {margin-top: 25rem; transition-delay: .15s;}
.ab02_txt dd.ceo {display: flex; align-items: center; font-weight: 600; gap: 22rem; margin-top: 35rem;}
.ab02_txt dd.ceo span {font-size: 35rem; line-height: 1; font-family: 'Kanginhan'; margin-top: -4rem;}
.ab02_img {position: relative; width: 600rem; margin: 0;}
.ab02_img img {width: 100%; max-width: 100%;}

@media (max-width:1080px){
    [data-sub="about02"]::before {top: 100rem; height: 117%;}
    [data-sub="about02"] .sub-cont .inr {flex-direction: column-reverse;}
    .ab02_img {width: 100%; max-width: 580rem;}
    .ab02_txt {width: 100%; text-align: center;}
    .ab02_txt h2 {font-size: 40rem; line-height: 1.35;}
    .ab02_txt h2 br {display: none;}0
    .ab02_txt dd.ceo {justify-content: center;}
}
@media (max-width:767px){
    [data-sub="about02"]::before {display: none;}
    [data-sub="about02"] .sub-title {margin-bottom: 50rem;}
    .ab02_img {max-width: 100%;}
    .ab02_txt h2 { margin-bottom: 30rem;}
    .ab02_txt h2 br {display: block;}
    .ab02_txt dd {font-size: 15rem;}
    .ab02_txt dd + dd {margin-top: 20rem;}
    .ab02_txt dd.ceo { gap: 10rem; margin-top: 30rem;}
    .ab02_txt dd.ceo span {font-size: 30rem;}
    .ab02_btn div {width: 50rem; height: 50rem; font-size: 13rem;}
    .ab02_txt dd.ceo span {font-size: 25rem;}
}
@media (max-width:480px){
    [data-sub="about02"] .sub-cont .inr {gap:35rem;}
    .ab02_txt h2 {font-size: 28rem;}
    br.hide-mo {display: none;}
}

/* about03 - 경영이념 */
[data-sub="about03"] .ss01 {padding: 0 0 130rem; background: url(/images/content/about3_bg.jpg) no-repeat 50% 100% / contain}
[data-sub="about03"] .ss01 .ss-tit {text-align: center; margin-bottom: 80rem; }
[data-sub="about03"] .ss01 .ss-tit h2 {font-size: 50rem; font-weight:700; margin: 30rem 0 35rem; transition-delay: 0.5s;}
[data-sub="about03"] .ss01 .ss-tit p {font-size: 19rem; line-height: 1.8; transition-delay: 0.5s;}
[data-sub="about03"] .ss01 .graph {position: relative; display:flex; gap: 70rem; justify-content: center; align-items: center; transition-delay: 0.8s; z-index: 10;}
[data-sub="about03"] .ss01 .graph div {position: relative; display: flex; align-items: center; justify-content: center; width: 350rem; height: 350rem; border-radius: 50%; background: rgba(230, 0, 18,0.1); border: 1rem dashed rgba(230, 0, 18, 0.25);}
[data-sub="about03"] .ss01 .graph div.active .circle::before {animation: motion1 .8s ease-in infinite 0s; z-index: -1;}
[data-sub="about03"] .ss01 .graph div:nth-child(1) .circle {background: #e60012 url(/images/content/about3_img1.png)}
[data-sub="about03"] .ss01 .graph div:nth-child(1) .circle::before {background: #e60012; opacity: 0.3;}
[data-sub="about03"] .ss01 .graph div:nth-child(2) .circle {background: #00ad64 url(/images/content/about3_img3.png)}
[data-sub="about03"] .ss01 .graph div:nth-child(2) .circle::before {background: #00ad64; opacity: 0.3;}
[data-sub="about03"] .ss01 .graph div:nth-child(3) .circle {background: #0050b1 url(/images/content/about3_img2.png)}
[data-sub="about03"] .ss01 .graph div:nth-child(3) .circle::before {background: #0050b1; opacity: 0.3;}
[data-sub="about03"] .ss01 .graph div:nth-child(2) {background: rgba(0, 153, 68,0.1); border-color: rgba(0, 173, 100, 0.25);}
[data-sub="about03"] .ss01 .graph div:nth-child(3) {background: rgba(0, 104, 183,0.1); border-color: rgba(0, 80, 177, 0.25);}
[data-sub="about03"] .ss01 .graph .circle {position: relative; display: flex; align-items: center; justify-content: center; width: 275rem; height: 275rem; border-radius: 50%; background-size: cover; background-repeat:no-repeat; background-position: 50% 50%; box-shadow : 0 0rem 20rem rgba(0, 0, 0, 0.15)}
[data-sub="about03"] .ss01 .graph .circle span {display: block;font-size:35rem; font-weight: 700; color: var(--color-white);}
[data-sub="about03"] .ss01 .graph .circle::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%;}
[data-sub="about03"] .ss02 {margin-top: 120rem;}
[data-sub="about03"] .ss02 .box {display: flex; justify-content: space-between; align-items: center;}
[data-sub="about03"] .ss02 .box + .box {margin-top: 60rem;}
[data-sub="about03"] .ss02 .txt {position: relative; width: 46%; padding-left: 50rem;}
[data-sub="about03"] .ss02 .txt h4 {font-size: 40rem; display: flex; align-items: flex-end; gap: 20rem; margin-bottom: 30rem; padding-bottom: 30rem; border-bottom: 1rem solid #e8e8e8;}
[data-sub="about03"] .ss02 .txt h4 span {display: block; font-size: 18rem; font-weight:600; color: var(--color-point); letter-spacing: 0.03em;}
[data-sub="about03"] .ss02 .txt p {font-size: 19rem; line-height: 1.8; font-weight: 300; word-break:keep-all;}
[data-sub="about03"] .ss02 .txt em {position:absolute; top:-45rem; left: 0; font-size: 80rem; line-height: 1; font-weight: 900; opacity: 0.08; z-index: -1;}
[data-sub="about03"] .ss02 .img {width: 48%; max-width: 100%; box-shadow : 0 0 30rem rgba(0, 0, 0, 0.12)}
[data-sub="about03"] .ss02 .img img {width: 100%; max-width: 100%;}
[data-sub="about03"] .graph_box {position: relative;}
[data-sub="about03"] .graph_box .line {position: absolute; top: 50%; left: 0; display: block; width: 0; height: 2px; border-top: 1rem dashed #333; z-index: -1; animation: arrow 6s linear infinite;}
[data-sub="about03"] .graph_box .line::before {content: '';position: absolute;  top: 50%; right: -8rem; transform: translateY(-50%); margin-top: -1rem; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 14px solid #333;}

@media (max-width:1080px){
    [data-sub="about03"] .ss01 {padding: 0 0 100rem;}
    [data-sub="about03"] .ss01 .ss-tit h2 {font-size:40rem;}
    [data-sub="about03"] .ss01 .graph {gap: 30rem;}
    [data-sub="about03"] .ss01 .graph div {width: 260rem; height: 260rem;}
    [data-sub="about03"] .ss01 .graph .circle {width: 220rem; height: 220rem;}
    [data-sub="about03"] .ss01 .graph .circle span {font-size: 25rem;}
    [data-sub="about03"] .ss02 {margin-top: 80rem;}
    [data-sub="about03"] .ss02 .txt {padding-left: 20rem;}
    [data-sub="about03"] .ss02 .txt h4 {font-size: 30rem; gap: 15rem; margin-bottom: 25rem; padding-bottom: 25rem;}
    [data-sub="about03"] .ss02 .txt em {font-size: 60rem; top: -30rem;;}
    [data-sub="about03"] .ss02 .txt p {font-size: 17rem; line-height: 1.6;}
}
@media (max-width:767px){
    [data-sub="about03"] .ss01 {padding: 0 0 80rem;}
    [data-sub="about03"] .ss01 .ss-tit h2 {font-size: 30rem; margin: 20rem 0 25rem;}
    [data-sub="about03"] .ss01 .ss-tit p {font-size: 15rem; line-height: 1.5;}
    [data-sub="about03"] .ss01 .graph div {width: 200rem; height: 200rem;}
    [data-sub="about03"] .ss01 .graph .circle {width: 170rem; height: 170rem;}
    [data-sub="about03"] .ss01 .graph .circle span {font-size: 20rem;}
    [data-sub="about03"] .ss01 .graph .circle:hover::before {animation: motion3 1s ease-in infinite 0s;}
    [data-sub="about03"] .ss01 .graph div:nth-child(2) {margin-top: -80rem;}
    [data-sub="about03"] .ss01 .graph div.active .circle::before {display: none;}
    [data-sub="about03"] .graph_box .line::before {border-top: 4px solid transparent; border-left: 8px solid #333; border-bottom: 4px solid transparent;}
    [data-sub="about03"] .ss02 {margin-top: 50rem;}
    [data-sub="about03"] .ss02 .box {flex-direction: column;}
    [data-sub="about03"] .ss02 .box + .box {margin-top: 60rem;}
    [data-sub="about03"] .ss02 .box:nth-child(2) {flex-direction: column-reverse;}
    [data-sub="about03"] .ss02 .img {width: 100%;}
    [data-sub="about03"] .ss02 .txt {width: 100%; margin-top: 50rem; padding-left: 0;}
    [data-sub="about03"] .ss02 .txt em {left: auto; right: 0; top: -10rem; font-size: 50rem;}
}
@media (max-width:480px){
    [data-sub="about03"] .ss01 {padding: 0 0 50rem;}
    [data-sub="about03"] .ss01 .ss-tit {}
    [data-sub="about03"] .ss01 .ss-tit h2 {font-size:25rem; line-height: 1.4;}
    [data-sub="about03"] .ss01 .graph {gap: 0}
    [data-sub="about03"] .ss01 .graph div {width: 115rem; height: 115rem;}
    [data-sub="about03"] .ss01 .graph .circle {width: 90rem; height: 90rem;}
    [data-sub="about03"] .ss01 .graph .circle span {font-size: 15rem; font-weight: 600;}
    [data-sub="about03"] .ss01 .graph div:nth-child(2) {margin-top: -100rem;}
    [data-sub="about03"] .graph_box .line {display: none;}
    [data-sub="about03"] .ss02 .box + .box {margin-top: 40rem;}
    [data-sub="about03"] .ss02 .txt {margin-top: 30rem;}
    [data-sub="about03"] .ss02 .txt em {display: none;}
    [data-sub="about03"] .ss02 .txt h4 {font-size: 20rem; gap:0; justify-content: space-between; align-items: center; margin-bottom: 20rem; padding-bottom: 20rem;}
    [data-sub="about03"] .ss02 .txt h4 span {font-size: 15rem;}
    [data-sub="about03"] .ss02 .txt p {font-size: 15rem;}
}

/* about04 - 연혁.수상경력 */
[data-sub="about04"] {}
[data-sub="about04"] .ab04_img .inr {height: 100%; display: flex; align-items: center; padding-bottom: 50rem;}
[data-sub="about04"] .ab04_img {position: relative; width: 100%; max-width: 1760rem; height: 440rem; background: var(--color-black) url(/images/content/about4.jpg) no-repeat 50% 50% / cover; margin: 0 auto; color: var(--color-white);}
[data-sub="about04"] .ab04_img .tit h3 {font-size: 45rem; text-transform: uppercase; font-weight: 700; margin: 20rem 0 30rem;}
[data-sub="about04"] .ab04_img .tit span {font-size: 15rem; font-weight:600; letter-spacing: 1.5rem; opacity: 0.7;}
[data-sub="about04"] .ab04_img .tit p {font-size: 17rem; font-weight: 300;}
[data-sub="about04"] .ab04_img .menu {width: 100%; position: absolute; bottom: 0; left: 0; display: flex; font-size: 22rem; font-weight: 600; text-align: center; border-top: 1rem solid rgba(255, 255, 255, 0.3);}
[data-sub="about04"] .ab04_img .menu a {position: relative; display: block; width: 280rem; padding: 30rem 0; box-sizing: border-box; opacity: 0.5;}
[data-sub="about04"] .ab04_img .menu a.active, [data-sub="about04"] .ab04_img .menu a:hover {opacity: 1;}
[data-sub="about04"] .ab04_img .menu a.active::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2rem; background: #fff;}
[data-sub="about04"] .ab04_history {margin-top: 50rem;}
[data-sub="about04"] .his_tit {width: 50%; padding-right: 80rem;}
[data-sub="about04"] .his_tit h3 {position: relative; font-size: 55rem; font-weight: 800; line-height: 1; font-style: italic; text-align: right; letter-spacing: -1.5rem;}
[data-sub="about04"] .his_tit h3::before {position: absolute; content: ''; top: 50%; right: -85rem; transform: translateY(-50%); width: 10rem; height: 10rem; border-radius: 50%; background: #555;}
[data-sub="about04"] .his_tit h3::after {position: absolute; content: ''; top: 50%; right: -100rem; transform: translateY(-50%); width: 40rem; height: 40rem; border-radius: 50%; background: rgba(0, 0, 0, 0.08); z-index: -1;}
[data-sub="about04"] .ab04_swiper {margin-top: 50rem; position: relative; text-align: center;}
[data-sub="about04"] .ab04_swiper .img {border: 1rem solid #e8e8e8;}
[data-sub="about04"] .ab04_swiper .img img {max-width: 100%; width: 100%; object-fit: contain;}
[data-sub="about04"] .ab04_swiper p {margin-top: 20rem;}
[data-sub="about04"] .ab04_btn {display: none; transition: .5s;}
[data-sub="about04"] .ab04_btn > div {position: absolute; top: 42%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; z-index: 10; width: 50rem; height: 50rem; font-size: 13rem; color: #fff; background:rgba(0, 0, 0, 0.5); cursor: pointer;}
[data-sub="about04"] .ab04_btn .ab04_next {right:0;}
[data-sub="about04"] .ab04_btn .ab04_prev {left:0;}
[data-sub="about04"] .his_box {width: 50%; padding-left: 80rem;}
[data-sub="about04"] .his_box .box {display: flex; gap: 70rem;}
[data-sub="about04"] .his_box strong {font-size: 25rem; }
[data-sub="about04"] .dot_list li {display: flex; align-items: center; gap:8rem;font-weight: 300; color: #555;}
[data-sub="about04"] .dot_list li + li {margin-top: 20rem;}
[data-sub="about04"] .dot_list b {display: block; width: 45rem;}
[data-sub="about04"] .dot_list i.dot {display: block; width: 3rem; height: 3rem; background: #111;}
[data-sub="about04"] .his_con {position: relative; display: flex; justify-content: center; padding-top: 150rem;}
[data-sub="about04"] .his_con::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1rem; height: 100%; background: #e8e8e8;}
[data-sub="about04"] .his_con::after {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1rem; height: 0; background: #00479d; transition: 1.5s; z-index: 10;}
[data-sub="about04"] .his_con.on h3 {color: #00479d;}
[data-sub="about04"] .his_con.on h3::before {background: #00479d}
[data-sub="about04"] .his_con.on h3::after {background: #00479d; opacity: 0.08;}
[data-sub="about04"] .his_con.on::after {height: 100%;}
[data-sub="about04"] .his_con .box + .box {margin-top: 50rem;}
[data-sub="about04"] .his_con.c2 .his_box {padding-right: 80rem; padding-left: 0;}
[data-sub="about04"] .his_con.c2 h3::before {right: auto; left: -85rem;}
[data-sub="about04"] .his_con.c2 h3::after {right: auto; left: -100rem;}
[data-sub="about04"] .his_con.c2 {flex-direction: row-reverse;}
[data-sub="about04"] .his_con.c2 .box {flex-direction: row-reverse;}
[data-sub="about04"] .his_con.c2 .his_tit {padding-left: 80rem; padding-right: 0;}
[data-sub="about04"] .his_con.c2 h3 {text-align: left;}
[data-sub="about04"] .his_con.c2 .dot_list li {flex-direction: row-reverse; text-align: right;}

@media (max-width:1500px){
    [data-sub="about04"] .ab04_img { max-width: 94%; height: 400rem;}
}
@media (max-width:1080px){
    [data-sub="about04"] .his_con {flex-direction: column; padding-left: 60rem;}
    [data-sub="about04"] .his_con::before {left: 0;}
    [data-sub="about04"] .his_con::after {left: 0;}
    [data-sub="about04"] .his_con.c2 {flex-direction: column;}
    [data-sub="about04"] .his_tit {width: 100%; padding-right:0;}
    [data-sub="about04"] .his_tit h3 {text-align: left;}
    [data-sub="about04"] .his_tit h3::before {right: auto; left: -85rem;}
    [data-sub="about04"] .his_tit h3::after {right: auto; left: -100rem;}
    [data-sub="about04"] .his_box {width: 100%; padding-left:0; margin-top: 50rem;}
    [data-sub="about04"] .his_con.c2 .his_box {padding-right: 0;}
    [data-sub="about04"] .his_con.c2 .his_tit {padding-left: 0;}
    [data-sub="about04"] .his_con.c2 h3::before {right: auto; left: -85rem;}
    [data-sub="about04"] .his_con.c2 h3::after {right: auto; left: -100rem;}
    [data-sub="about04"] .his_con.c2 .box {flex-direction: row;}
    [data-sub="about04"] .his_con.c2 .dot_list li  {flex-direction: row; text-align: left;}
}
@media (max-width:767px){
    [data-sub="about04"] .his_con.c1 {padding-top:0;}
    [data-sub="about04"] .his_con {padding-top: 100rem;}
    [data-sub="about04"] .his_tit h3 {font-size: 45rem;}
    [data-sub="about04"] .his_tit h3::before {left: -65rem;}
    [data-sub="about04"] .his_tit h3::after {left: -80rem;}
    [data-sub="about04"] .his_con.c2 h3::before {left: -65rem;}
    [data-sub="about04"] .his_con.c2 h3::after {left: -80rem;}
    [data-sub="about04"] .his_box .box {gap: 20rem; flex-direction: column !important;}
    [data-sub="about04"] .ab04_img {height: 350rem;}
    [data-sub="about04"] .ab04_img .tit h3 {font-size: 30rem; margin: 20rem 0 20rem;}
    [data-sub="about04"] .ab04_img .tit p {font-size: 15rem;}
    [data-sub="about04"] .ab04_img .menu {font-size: 18rem;}
    [data-sub="about04"] .ab04_img .menu a {padding: 20rem 0; width: 33.333%;}
    [data-sub="about04"] .ab04_swiper {margin-top: 30rem;}
    [data-sub="about04"] .ab04_swiper p {margin-top: 25rem; font-size: 16rem;}
    [data-sub="about04"] .dot_list b {width: 35rem;}
    [data-sub="about04"] .dot_list li + li {margin-top: 15rem;} 
    [data-sub="about04"] .his_con .box + .box {margin-top: 35rem;} 
    [data-sub="about04"] .ab04_swiper:hover .ab04_btn {display: block; }
}
@media (max-width:480px){
    [data-sub="about04"] .ab04_img {max-width: 100%;}
    [data-sub="about04"] .ab04_swiper {margin-top: 25rem;}
    [data-sub="about04"] .ab04_img .tit h3 {font-size: 25rem; margin: 20rem 0 20rem;}
    [data-sub="about04"] .his_con { gap: 0; padding-left: 0; padding-top: 60rem;}
    [data-sub="about04"] .his_con::before {display: none;}
    [data-sub="about04"] .his_con::after {display: none;}
    [data-sub="about04"] .his_con .dot_list li {flex-wrap: wrap;}
    [data-sub="about04"] .his_con.c2 .dot_list li {flex-wrap: wrap;}
    [data-sub="about04"] .his_tit h3::before, [data-sub="about04"] .his_tit h3::after {display: none;}
}

/* about05 - 사업장소개*/
[data-sub="about05"] {}
[data-sub="about05"] .global_img {position: relative; background: #f2f4f5; padding: 80rem 0; box-sizing: border-box; margin-bottom: 80rem;}
[data-sub="about05"] .global_img img.map {max-width: 100%; object-fit: contain; width: 100%;}
[data-sub="about05"] .global_img img.map2 {display: none;}
[data-sub="about05"] .global_branch > div {position: absolute; width: 450rem; padding: 30rem 30rem; box-sizing: border-box; background: #fff; border-radius:8rem;}
[data-sub="about05"] .global_branch .tit {width: 100%; display: flex; justify-content: space-between; align-items: center; padding-bottom: 20rem; margin-bottom: 20rem; border-bottom: 1rem dashed #ddd;}
[data-sub="about05"] .global_branch .tit p {display: flex; align-items: center; gap: 10rem; font-size: 22rem; font-weight: 600;}
[data-sub="about05"] .global_branch .tit img {height: 18rem;}
[data-sub="about05"] .global_branch .view {display: block; padding:10rem 18rem; box-sizing: border-box; font-size: 15rem; background: #f5f5f5; color: #aaa; border-radius: 3rem;}
[data-sub="about05"] .global_branch .view:hover {background: var(--color-point); color: var(--color-white);}
[data-sub="about05"] .global_branch ul {padding-top: 10rem;}
[data-sub="about05"] .global_branch li {font-size: 17rem; line-height: 1; display: flex; }
[data-sub="about05"] .global_branch li p {font-weight: 600; min-width: 60rem;}
[data-sub="about05"] .global_branch li span {font-weight: 300; color: #555;}
[data-sub="about05"] .global_branch li + li {margin-top: 16rem;}
[data-sub="about05"] .global_branch .korea {top: -30rem; left: 650rem;}
[data-sub="about05"] .global_branch .vietnam { bottom: -40rem; left: 45%; transform: translateX(-50%);}
[data-sub="about05"] .marker{position:absolute; top:50%; left:auto; display: flex; justify-content: center; align-items: center; transform:translate(-50%, -50%);}
[data-sub="about05"] .marker em{position:absolute; word-break:keep-all; font-size:20rem; font-weight:600; color:#444;}
[data-sub="about05"] .marker span{display:inline-block; background:#d7000f; width:8rem; height:8rem; border-radius:50%; z-index:1; opacity:0.8;}
[data-sub="about05"] .marker:before{background:#d7000f; width:40rem; height:40rem;}
[data-sub="about05"] .marker:before{animation:motion2 2s ease-in infinite 0s;}
[data-sub="about05"] .marker:before, [data-sub="about05"] .marker:after{display: block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40rem;height:40rem;border-radius:50rem; background:#d7000f; opacity:0; transition:0.3s;  z-index: 1;}
[data-sub="about05"] .marker.v1{margin-top:-52rem; left: auto; right: 16%;}
[data-sub="about05"] .marker.v2{margin-top:50rem; right: 22.5%;}
[data-sub="about05"] .marker.v1 em{top:-50rem;}
[data-sub="about05"] .marker.v2 em{top:55rem;}
[data-sub="about05"] .ab05_info {border-top: 1rem solid #111; border-bottom: 1rem solid #ddd;}
[data-sub="about05"] .ab05_info li {display: flex; justify-content: space-between; align-items: center; gap: 30rem; padding:40rem 20rem; box-sizing: border-box; border-bottom: 1rem dotted #ddd;}
[data-sub="about05"] .ab05_info li:last-child {border-bottom: 0;}
[data-sub="about05"] .ab05_info .img {width: 30%;}
[data-sub="about05"] .ab05_info .img img {width: 100%; max-width: 100%;}
[data-sub="about05"] .ab05_info .box {width: 65%; display: flex; align-items: center; gap: 30rem; justify-content: space-between;}
[data-sub="about05"] .ab05_info .txt {width: 80%;}
[data-sub="about05"] .ab05_info .txt h5 {font-size: 28rem; font-weight: 700; margin-bottom: 25rem;}
[data-sub="about05"] .ab05_info .txt dd + dd {margin-top: 20rem;}
[data-sub="about05"] .ab05_info .txt dd {display: flex; align-items:center; font-size: 17rem; line-height: 1.6;}
[data-sub="about05"] .ab05_info .txt dd svg {width:16rem; margin-right: 16rem;}
[data-sub="about05"] .ab05_info .txt dd span {max-width: 680rem;}
[data-sub="about05"] .ab05_info .txt dd.flex {display: flex; align-items: center; gap: 50rem;}
[data-sub="about05"] .ab05_info .txt dd.flex p {display: flex; align-items: center;}
[data-sub="about05"] .ab05_info .map_btn {display: flex; align-items: center; justify-content: center; width:20%; height: 60rem; font-size: 15rem; background: #222; border-radius: 3rem; color: var(--color-white) }
[data-sub="about05"] .ab05_info .map_btn:hover {background: #00479d; transition: .5s;}

@media (max-width:1500px){
    [data-sub="about05"] .global_branch .korea {left: 40%;}
    [data-sub="about05"] .ab05_info li {padding: 30rem 0;}
}
@media (max-width:1280px){
    [data-sub="about05"] .marker.v1 {margin-top:-45rem}
    [data-sub="about05"] .marker.v2 {margin-top:40rem}
}
@media (max-width:1080px){
    [data-sub="about05"] .marker.v1 {margin-top:-25rem}
    [data-sub="about05"] .marker.v2 {margin-top:30rem}
    [data-sub="about05"] .global_img {padding: 50rem 0 60rem; margin-bottom: 40rem;}
    [data-sub="about05"] .global_img img.map {display: none;}
    [data-sub="about05"] .global_img img.map2 {display: block; max-width: 100%; object-fit: contain; width: 100%;}
    [data-sub="about05"] .global_branch > div {width: 400rem;}
    [data-sub="about05"] .global_branch ul {padding-top: 0;}
    [data-sub="about05"] .global_branch .korea {left: 0; top: 0;}
    [data-sub="about05"] .global_branch .vietnam {bottom:-10rem; left: 0; transform: translateX(0);}
    [data-sub="about05"] .ab05_info .box {flex-direction: column; align-items: flex-start; width: 55%;}
    [data-sub="about05"] .ab05_info .img {width: 40%;}
    [data-sub="about05"] .ab05_info .txt {width: 100%;}
    [data-sub="about05"] .ab05_info .txt dd + dd {margin-top: 15rem;}
    [data-sub="about05"] .ab05_info .map_btn {width: 150rem;}
}
@media (max-width:767px){
    [data-sub="about05"] .global_branch {display: none;}
    [data-sub="about05"] .global_img {padding: 40rem 0;}
    [data-sub="about05"] .ab05_info li {flex-direction: column;}
    [data-sub="about05"] .ab05_info li .txt {width:100%; padding-left: 0;}
    [data-sub="about05"] .ab05_info li .img {width:100%;}
    [data-sub="about05"] .ab05_info .box {width: 100%;}
}
@media (max-width:480px){
    [data-sub="about05"] .ab05_info li {align-items: flex-start;}
    [data-sub="about05"] .ab05_info .txt h5 {font-size: 20rem;}
    [data-sub="about05"] .ab05_info .txt dd { font-size: 15rem;}
    [data-sub="about05"] .ab05_info .txt dd.flex {gap: 30rem;}
    [data-sub="about05"] .ab05_info .map_btn {width: 100%;} 
    [data-sub="about05"] .marker:before, [data-sub="about05"] .marker:after {animation: none; opacity: 0.05;}
    [data-sub="about05"] .ab05_info .txt dd svg {height: 14rem; margin-right: 8rem;}
}

/* business01 - 사업소개 */
[data-sub="business01"] {}
[data-sub="business01"] .sub-cont {position: relative; width: 100%; height: auto; padding: 500rem 0; overflow: hidden;}
[data-sub="business01"] .sub-cont::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1b2f46 url(/images/content/business_bg.jpg) no-repeat; z-index: -10;}
[data-sub="business01"] .sub-cont .bu_bg {width: 100%; height: 100%; object-fit: contain; }
[data-sub="business01"] .buBtn {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
[data-sub="business01"] .buBtn .btn { display: flex; align-items: center; gap: 12rem; position: absolute; z-index: 10;}
[data-sub="business01"] .buBtn .btn .dot {position: relative; display: flex; align-items: center; justify-content: center; width: 35rem; height: 35rem; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
[data-sub="business01"] .buBtn .btn .dot::before {content: ''; position: absolute; left: 50%; top: 15rem; transform: translateX(-50%); width: 1rem; border-left: 2rem dotted #fff;}
[data-sub="business01"] .buBtn .btn .dot i {width: 10rem; height: 10rem; border-radius: 50%; background: #fff; z-index: 10;}
[data-sub="business01"] .buBtn .btn p {cursor: pointer; font-size: 18rem; font-weight: 500; display: inline-block; padding: 15rem 22rem; background:rgba(255, 255, 255, 0.8); color: var(--color-black); border-radius: 30rem;}
[data-sub="business01"] .buBtn .num01 .btn {position: absolute; top:270rem;left:43.4%;}
[data-sub="business01"] .buBtn .num02 .btn {position: absolute; top:370rem;left:51%; }
[data-sub="business01"] .buBtn .num03 .btn {position: absolute; top:330rem;left:370rem;}
[data-sub="business01"] .buBtn .num01 .btn .dot::before { height: 150rem;}
[data-sub="business01"] .buBtn .num02 .btn .dot::before {height: 80rem;}
[data-sub="business01"] .buBtn .num03 .btn .dot::before {height: 60rem;}
[data-sub="business01"] .buBtn .active p {background: #e60012 !important; color: var(--color-white); position: relative;}
[data-sub="business01"] .buBtn .active p::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 110%; height:120%; border-radius: 30rem; background: #e60012; opacity: 0.2; z-index: -1;}
[data-sub="business01"] .buBtn .active .dot {background: rgba(230, 0, 18,0.3);}
[data-sub="business01"] .buBtn .active .dot i {background: #e60012}
[data-sub="business01"] .buBtn .active .dot::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: motion2 1.5s ease-in infinite 0s; width: 40rem;height: 40rem; border-radius: 50rem; background: #d7000f;opacity: 0; transition: 0.3s; z-index: 1;}
[data-sub="business01"] .buBtn .num {background-repeat: no-repeat; background-size: cover;}
[data-sub="business01"] .buBtn .num .img {overflow: hidden; visibility: hidden; height: 0}
[data-sub="business01"] .buBtn .num.active .img {overflow: visible; visibility: visible;  height: 100%;}
[data-sub="business01"] .buBtn .num01.active {width: 100%; height: 100%; background-image:url(/images/content/bu_tab01.png)}
[data-sub="business01"] .buBtn .num02.active {width: 100%; height: 100%; background-image:url(/images/content/bu_tab02.png)}
[data-sub="business01"] .buBtn .num03.active {width: 100%; height: 100%; background-image:url(/images/content/bu_tab03.png)}
[data-sub="business01"] .tabCon {overflow: hidden; visibility: hidden; position: absolute; top: 25%; right:3%; width: 100%; max-width: 450rem;}
[data-sub="business01"] .tabCon.active {overflow: visible; visibility: visible; }
[data-sub="business01"] .bu_txt .img {position: relative;}
[data-sub="business01"] .bu_txt .img img {width: 100%; max-width: 100%;}
[data-sub="business01"] .bu_txt .img em {position: absolute; bottom: 0; left: 0; display: inline-block; font-size: 15rem; padding: 10rem 22rem; background: #00479d; color: #fff;}
[data-sub="business01"] .bu_txt .info {background: #fff; padding: 35rem 30rem; box-sizing: border-box;}
[data-sub="business01"] .bu_txt .info p {font-size: 25rem; font-weight: 700; text-align: center; width: 100%; padding-bottom: 25rem; margin-bottom: 25rem; border-bottom: 1rem dashed #ddd;}
[data-sub="business01"] .bu_txt .info p span {display: block; font-size: 18rem; font-weight: 400; margin-top: 12rem;}
[data-sub="business01"] .bu_txt .info ul {display: flex; flex-wrap: wrap; gap: 12rem 20rem;}
[data-sub="business01"] .bu_txt .info li {position: relative; font-size: 16rem;  padding-left: 14rem;}
[data-sub="business01"] .bu_txt .info li::before {content: ''; position: absolute; top: 7rem; left: 0; width: 4rem; height: 4rem; background: #ccc;}

@media (max-width:1780px){
    [data-sub="business01"] .buBtn .num02 .btn {top: 330rem;}
    [data-sub="business01"] .buBtn .num03 .btn {top: 300rem; left:340rem;}
}
@media (max-width:1650px){
    [data-sub="business01"] .tabCon {right: 20rem; max-width: 400rem;}
    [data-sub="business01"] .buBtn .num01 .btn {top: 250rem;}
    [data-sub="business01"] .buBtn .num01 .btn .dot::before {height: 120rem;}
    [data-sub="business01"] .buBtn .num02 .btn .dot::before {height: 50rem;}
    [data-sub="business01"] .buBtn .num01 .btn {top: 220rem; left: 690rem;}
    [data-sub="business01"] .buBtn .num02 .btn {left: 805rem;}
    [data-sub="business01"] .buBtn .num03 .btn {top:280rem; left:310rem;}
}
@media (max-width:1500px){
    [data-sub="business01"] .tabCon {max-width: 400rem;}
    [data-sub="business01"] .bu_txt .img {height: 200rem;}
    [data-sub="business01"] .bu_txt .img img {height:100%; object-fit:cover;}
    [data-sub="business01"] .bu_txt .info ul {gap: 15rem}
}
@media (max-width:1400px){
    [data-sub="business01"] .tabCon {max-width: 80%; top: auto; bottom: 20rem; right: 50%; transform: translateX(50%); }
    [data-sub="business01"] .bu_txt {max-width: 100%; display: flex; justify-content: center;}
    [data-sub="business01"] .bu_txt .img {width:48%; height: auto}
    [data-sub="business01"] .bu_txt .info {display: flex; flex-direction: column; justify-content: center; width:52%; padding: 40rem 40rem; height: auto; }
}
@media (max-width:1080px){
    [data-sub="business01"] .sub-cont {padding: 0; padding-bottom: 970rem;}
    [data-sub="business01"] .sub-cont::before {background-size: cover;}
    [data-sub="business01"] .buBtn .num.active {background-position-x:-100rem;}
    [data-sub="business01"] .buBtn .num01 .btn {left: 560rem;}
    [data-sub="business01"] .buBtn .num02 .btn {top: 310rem; left: 678rem;}
    [data-sub="business01"] .buBtn .num03 .btn {top: 260rem;left: 200rem;}
    [data-sub="business01"] .tabCon {bottom: 30rem;}
}
@media (max-width:767px){
    [data-sub="business01"] .sub-cont {padding: 0; padding-bottom: 710rem;}
    [data-sub="business01"] .buBtn .btn p {font-size: 15rem;  padding: 10rem 15rem; white-space: nowrap;}
    [data-sub="business01"] .buBtn .btn .dot {width: 25rem; height: 25rem;}
    [data-sub="business01"] .buBtn .btn .dot i {width: 6rem; height: 6rem;}
    [data-sub="business01"] .buBtn .btn .dot::before {display: none;}
    [data-sub="business01"] .buBtn .num.active {background-position-x:0; background-size: cover;}
    [data-sub="business01"] .buBtn .num01.active {background-image:url(/images/content/bu_mo1.png)}
    [data-sub="business01"] .buBtn .num02.active {background-image:url(/images/content/bu_mo2.png)}
    [data-sub="business01"] .buBtn .num03.active {background-image:url(/images/content/bu_mo3.png)}
    [data-sub="business01"] .buBtn .btn {flex-direction: column-reverse;}
    [data-sub="business01"] .buBtn .num01 .btn {top: 160rem; left: 360rem;}
    [data-sub="business01"] .buBtn .num02 .btn {flex-direction: row; left: 510rem; top: 230rem;}
    [data-sub="business01"] .buBtn .num03 .btn {top: 165rem; left: 150rem;}
    [data-sub="business01"] .tabCon {max-width: 92%; left: 50%; right: auto; transform: translateX(-50%);}
    [data-sub="business01"] .bu_txt .img {width: 50%;}
    [data-sub="business01"] .bu_txt .info {width: 50%; padding: 30rem 20rem;}
    [data-sub="business01"] .bu_txt .info p {font-size: 18rem; margin-bottom: 20rem; padding-bottom: 20rem;}
    [data-sub="business01"] .bu_txt .info p span {font-size: 16rem; margin-top: 10rem;}
    [data-sub="business01"] .bu_txt .info ul {gap: 10rem;}
    [data-sub="business01"] .bu_txt .info li {font-size: 15rem;}
    [data-sub="business01"] .bu_txt .img em {bottom: auto; top: 0;}
}
@media (max-width:480px){
    [data-sub="business01"] .sub-cont {padding-bottom: 100%;}
    [data-sub="business01"] .bu_txt {flex-direction: column; box-shadow : 0 0 15rem rgba(0, 0, 0, 0.18)}
    [data-sub="business01"] .bu_txt .info {padding: 20rem;}
    [data-sub="business01"] .bu_txt .img {width:100%; height: 200rem;}
    [data-sub="business01"] .bu_txt .info {width: 100%;}
    [data-sub="business01"] .bu_txt .img em {padding: 10rem 20rem; font-size: 14rem;}
    [data-sub="business01"] .bu_txt .info p {font-size: 16rem;}
    [data-sub="business01"] .bu_txt .info li {font-size: 14rem;}
    [data-sub="business01"] .buBtn .active .dot::after {display: none;}
    [data-sub="business01"] .buBtn .btn .dot {display: none;}
    [data-sub="business01"] .buBtn {height:500rem; position: initial;}
    [data-sub="business01"] .buBtn .num.active {background-position-x:-60rem}
    [data-sub="business01"] .buBtn .btn p{padding:7rem 12rem; font-size: 12rem;}
    [data-sub="business01"] .buBtn .num01 .btn {top: 125rem; left: 200rem;}
    [data-sub="business01"] .buBtn .num02 .btn {top: 255rem; left: 104rem;}
    [data-sub="business01"] .buBtn .num02.active {background-image:url(/images/content/bu_mo02.png)}
    [data-sub="business01"] .buBtn .num03 .btn {top: 118rem; left: 30rem;}
}
/* technology01 - 기술개발 */
[data-sub="technology01"] {}
[data-sub="technology01"] .sub-title {margin-bottom: 100rem;}
[data-sub="technology01"] .sub-cont .inr {display: flex; gap: 50rem; justify-content: space-between; align-items:flex-start;}
[data-sub="technology01"] .sub-cont.fix .inr {justify-content: flex-end;}
[data-sub="technology01"] .techLeft {position: sticky; top:150rem; padding-top:50rem;}	 
[data-sub="technology01"] .techLeft .tit {margin-bottom: 60rem;}
[data-sub="technology01"] .techLeft .tit span {font-weight: 600; color: #0068b7; display: block; margin-bottom: 30rem;}
[data-sub="technology01"] .techLeft .tit h2 {font-size: 40rem; line-height: 1.4; font-weight: 700; letter-spacing:-0.01em;}
[data-sub="technology01"] .techLeft .btn {display: flex; flex-direction: column; gap: 15rem; text-align: center;}
[data-sub="technology01"] .techLeft .btn a {display: inline-block; padding: 20rem 25rem; max-width: 200rem; font-size: 16rem; text-transform: uppercase; box-sizing: border-box; border-radius: 30rem; letter-spacing: -0.01em; color: #b5b5b5; background: #f5f5f5;}
[data-sub="technology01"] .techLeft .btn a.on {background: linear-gradient(90deg, #1f8eff, #006ddc); color: #fff;}
[data-sub="technology01"] .sub-cont.pdt .techRight {}
[data-sub="technology01"] .techRight {display: flex; flex-direction: column; gap: 80rem;}
[data-sub="technology01"] .techRight li {opacity: 0.5; transition: .5s; }
[data-sub="technology01"] .techRight li.on{opacity: 1;}
[data-sub="technology01"] .techRight .img img {max-width: 100%; width: 100%;}
[data-sub="technology01"] .techRight .txt {margin-top: 50rem;}
[data-sub="technology01"] .techRight .txt h3 {font-size: 40rem; font-weight: 700; letter-spacing: -0.01em; display: flex; gap: 22rem; align-items: flex-end;}
[data-sub="technology01"] .techRight .txt h3 span {font-size: 18rem; font-weight: 300; color: #888; padding-bottom: 2rem;}
[data-sub="technology01"] .techRight .txt p {font-size: 18rem; line-height: 1.7; font-weight: 300; color: #555; margin-top:40rem;}
[data-sub="technology01"] .techRight .txt .tag {display: flex; gap: 8rem; margin-top: 35rem;}
[data-sub="technology01"] .techRight .txt .tag span {font-size: 15rem; color: #888; padding: 15rem 17rem; border: 1rem solid #e8e8e8;}

@media (max-width:1500px){	      
    [data-sub="technology01"] .techLeft .tit h2 {font-size: 30rem}
    [data-sub="technology01"] .techRight {width: 55%;}
}
@media (max-width:1080px){
    [data-sub="technology01"] .techLeft .tit {margin-bottom: 40rem;}
    [data-sub="technology01"] .techRight {width: 50%;}
    [data-sub="technology01"] .techRight .txt {margin-top: 35rem;}
    [data-sub="technology01"] .techRight .txt p {margin-top: 30rem;}
    [data-sub="technology01"] .techRight .txt p br {display: none;}
}
@media (max-width:767px){
    [data-sub="technology01"] .sub-cont .inr {flex-direction: column;}
	[data-sub="technology01"] .techLeft{position:static; padding-top:0; width: 100%;}
    [data-sub="technology01"] .techLeft .tit {margin-bottom: 30rem;}
    [data-sub="technology01"] .techLeft .tit span {margin-bottom: 20rem;}
    [data-sub="technology01"] .techLeft .btn {display: grid; grid-template-columns: repeat(3,1fr); gap: 12rem; width: 100%;}
    [data-sub="technology01"] .techLeft .btn a {padding: 22rem 10rem; border-radius: 35rem; max-width: 100%;}
    [data-sub="technology01"] .techRight {width: 100%; gap: 50rem;} 
	[data-sub="technology01"] .techRight li{opacity:1;}
    [data-sub="technology01"] .techRight .txt .tag {flex-wrap: wrap;}
    [data-sub="technology01"] .techRight .txt h3 {font-size: 30rem;  gap: 18rem;}
    [data-sub="technology01"] .techRight .txt p {font-size: 15rem; line-height: 1.5; margin-top: 20rem;}
    [data-sub="technology01"] .techRight .txt .tag {margin-top: 25rem;}
    [data-sub="technology01"] .techRight .txt .tag span {font-size: 15rem; padding: 12rem 15rem;}
}
@media (max-width:480px){
    [data-sub="technology01"] .sub-cont .inr {gap: 30rem;}	
    [data-sub="technology01"] .techLeft .tit h2 {font-size: 22rem;}
    [data-sub="technology01"] .techLeft .tit h2 br {display: none;}
    [data-sub="technology01"] .techLeft .btn { grid-template-columns: repeat(2,1fr);}
    [data-sub="technology01"] .techLeft .btn a {padding: 15rem 5rem; font-size: 15rem;}
    [data-sub="technology01"] .techRight .txt {margin-top: 20rem;}
    [data-sub="technology01"] .techRight .txt h3 {font-size: 20rem; gap: 10rem;}
    [data-sub="technology01"] .techRight .txt h3 span {font-size: 15rem;}
}

/* ESG - 공통부분 */
.area_esg .sub-title {margin-bottom: 100rem;}
.area_esg .ss-tit {display: flex; justify-content: space-between; align-items: flex-end;}
.area_esg .esg_btn {display: block; font-size: 15rem; padding: 25rem 50rem; background: #f8f8f8; border: 1rem solid #e8e8e8; color: #888; transition: .5s;}
.area_esg .esg_btn:hover {background: #222; color: var(--color-white);}
.esg_img {margin-top:60rem;}
.esg_img img {width: 100%; height: 100%; object-fit: cover;}
.esg_h4 {display: flex; align-items: center; gap: 18rem; font-size: 30rem; font-weight: 700; margin-bottom: 35rem;}
.esg_h4 i {width: 8rem; height: 25rem; background: linear-gradient(45deg, #097cd3, #0050b1);}
.esg_h5 {position: relative; display: inline-block; font-size: 20rem; padding-right: 18rem; margin-bottom: 30rem;}
.esg_h5::before {content: ''; position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; border-radius: 50%; background: linear-gradient(45deg, #097cd3, #0050b1);}
.esg_p {font-size: 18rem; line-height: 1.8; font-weight: 300; margin-top: 20rem;}
.esg_con .con {margin-top: 55rem;}
.esg_con .con + .con {border-top: 1rem dashed #ddd; padding-top: 55rem;}
.area_esg .num_list li {position: relative; font-size: 17rem; counter-increment: list-number;}
.area_esg .num_list li::before {content: counter(list-number); position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 23rem; height: 23rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12rem; background: #222; color: #fff;}
.area_esg .btn_box {display: none;}
@media (max-width:1080px){
    .area_esg .ss-tit {flex-direction: column; align-items: flex-start; gap: 30rem;}
    .area_esg .sub-title {margin-bottom: 80rem;}
    .esg_img {margin-top: 50rem;}
    .area_esg .ss-tit .esg_btn {display: none;}
    .area_esg .btn_box {display: block; margin: 80rem auto 0 auto; text-align: center;}
    .area_esg .btn_box .esg_btn {display: inline-block;}
}
@media (max-width:767px){
    .esg_h4 {gap: 15rem; font-size: 25rem; margin-bottom: 25rem;}
    .esg_h4 i {width: 7rem; height: 20rem; }
    .esg_h5 {font-size: 18rem; padding-right: 15rem; margin-bottom: 20rem;}
    .esg_con .con{margin-top: 50rem;}
    .esg_con .con + .con { padding-top:50rem;}
    .esg_img {margin-top: 30rem;}
}
@media (max-width:480px){
    .esg_h4 {gap: 15rem; font-size: 22rem;}
    .esg_h5 {font-size: 16rem;}
    .esg_p {font-size: 15rem; line-height: 1.5}
}

/* esg01 - 지속가능경영 */
[data-sub="esg01"] {}
[data-sub="esg01"] .esg_img {position: relative; font-size:68rem; letter-spacing: 0.05em; font-weight:800; color: rgba(255, 255, 255, 0.5);  font-family: "Playfair Display", 'Pretendard', Sans-serif;}
[data-sub="esg01"] .esg_img .img-txt {width: 96%; position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); z-index: 10; text-align: center; /*animation: marquee 15s linear infinite;  white-space: nowrap;*/}
[data-sub="esg01"] .esg_img .img-txt i {display: inline-block; font-family: 'GongGothicMedium'; font-weight: 500; margin: 0 10rem;}
[data-sub="esg01"] .esg_con .slogan {position: relative; display: inline-block; text-transform: uppercase; font-weight: 600; box-sizing: border-box; margin:0 6rem;}
[data-sub="esg01"] .esg_con .slogan::before {position: absolute; content: ''; bottom:0;left: 0; width: 100%; height: 1rem; border-bottom: 1rem solid #888;  z-index: -1;}
[data-sub="esg01"] .esg_con .list {display: grid; grid-template-columns: repeat(3,1fr); justify-items: center; gap: 50rem; margin-bottom: 50rem;}
[data-sub="esg01"] .esg_con .list li {width: 100%; padding: 50rem 40rem; box-sizing: border-box; box-shadow : 0 0 25rem rgba(0, 0, 0, 0.05); border: 1rem solid #fafafa;}
[data-sub="esg01"] .esg_con .list .img {position: relative; width: 240rem; height: 240rem; border-radius: 50%; overflow: hidden; margin: 0 auto;}
[data-sub="esg01"] .esg_con .list .img span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 110rem; line-height: 1; font-weight: 900; color: rgba(255, 255, 255, 0.3); z-index: 10;}
[data-sub="esg01"] .esg_con .list .img img {width: 100%; height: 100%; object-fit: cover;}
[data-sub="esg01"] .esg_con .list dl {margin-top: 30rem; text-align: center;}
[data-sub="esg01"] .esg_con .list dt {font-size: 25rem; font-weight: 700;}
[data-sub="esg01"] .esg_con .list dd {font-size: 18rem; font-weight: 600; color: #b7b7b7; margin-top:10rem;}
[data-sub="esg01"] .esg_con p {font-size: 18rem; line-height: 1.8; font-weight: 300;}
[data-sub="esg01"] .esg_con strong {font-weight: 600;}

@media (max-width:1280px){
    [data-sub="esg01"] .esg_img {height: 330rem; font-size: 60rem;}
    [data-sub="esg01"] .esg_img img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;}
}
@media (max-width:1080px){
    [data-sub="esg01"] .esg_img {font-size: 40rem;}
    [data-sub="esg01"] .esg_con .list {gap: 20rem; margin-bottom: 40rem;}
    [data-sub="esg01"] .esg_con .list li {padding: 40rem 30rem}
    [data-sub="esg01"] .esg_con .list .img {width: 200rem; height: 200rem;}
}
@media (max-width:767px){
    [data-sub="esg01"] .esg_con p {font-size: 15rem;}
    [data-sub="esg01"] .esg_con .list {grid-template-columns: repeat(1,1fr);}
}

@media (max-width:480px){
    [data-sub="esg01"] .esg_img {height: 280rem; font-size:28rem;}
    [data-sub="esg01"] .esg_img .img-txt {width: 100%;}
    [data-sub="esg01"] .ss-tit h2 {font-size: 22rem;}
    [data-sub="esg01"] .ss-tit h2 strong{display: inline;}
}
/* esg02 - 윤리경영 */
[data-sub="esg02"] {}
[data-sub="esg02"] .num_list {padding: 10rem 50rem; box-sizing: border-box; border: 5rem solid #f5f5f5;}
[data-sub="esg02"] .num_list li:first-child { border-top: 0;}
[data-sub="esg02"] .num_list li {display: flex; align-items: center; position: relative; font-size: 17rem; padding: 25rem 0 25rem 35rem; border-top: 1rem solid #e8e8e8; counter-increment: list-number}
[data-sub="esg02"] .num_list li::before {content: counter(list-number); position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 23rem; height: 23rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12rem; background: #222; color: #fff;}
[data-sub="esg02"] .con.c3 .box:nth-child(2) {margin-top:40rem;}
[data-sub="esg02"] .con.c3 .esg-cs {display: flex; align-items: center; gap: 80rem; font-size: 17rem; padding: 30rem 40rem; border:5rem solid #f5f5f5; box-sizing: border-box; margin-bottom: 30rem;}
[data-sub="esg02"] .con.c3 .esg-cs dt {display: flex; align-items: center; gap: 15rem; font-weight: 600;}
[data-sub="esg02"] .con.c3 .esg-cs dd {color: #555;}
[data-sub="esg02"] .con.c3 .esg-cs dl {display: flex; align-items: center; gap: 15rem;}
[data-sub="esg02"] .con.c3 em.note {font-weight: 300; color: #777;}
[data-sub="esg02"] .con.c3 em.note i {margin-right: 5rem; font-weight: 300;}
[data-sub="esg02"] .con.c3 .box:nth-child(2) svg {width: 20rem; fill: #b7b7b7;}

@media (max-width:767px){
    [data-sub="esg02"] .num_list {padding: 0; border: none;}
    [data-sub="esg02"] .num_list li {font-size: 15rem; padding: 15rem 0 15rem 28rem;}
    [data-sub="esg02"] .num_list li::before {width: 18rem; height: 18rem;}
    [data-sub="esg02"] .con.c3 .esg-cs {gap: 40rem; font-size: 15rem; padding: 20rem 20rem;}
}

/* esg03 - 환경경영 */
[data-sub="esg03"] {}
[data-sub="esg03"] .graph_box {display: flex; align-items: center; justify-content: center; height: 575rem; padding:50rem; width: 100%; box-sizing: border-box; border: 1rem solid #e8e8e8; margin-top: 40rem;}
[data-sub="esg03"] .graph_box .center {position: relative; width: 37%; height: 100%;}
[data-sub="esg03"] .graph_box .graph {position: absolute; display: flex; align-items: center; justify-content: center; width: 270rem; height: 270rem; border-radius: 50%; background: rgba(242, 160, 0, 0.15)}
[data-sub="esg03"] .graph_box .graph p {width: 185rem; height: 185rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17rem; color: #fff; font-weight: 500; background: #f2a000;}
[data-sub="esg03"] .graph_box .graph.g1 {top: 0; left: 50%; transform: translateX(-50%); z-index: 10;}
[data-sub="esg03"] .graph_box .graph.g1 p {box-shadow: 0 0 20rem rgba(242, 160, 0, 0.25)}
[data-sub="esg03"] .graph_box .graph.g2 {background: rgba(0, 173, 100, 0.15); bottom: 0; left:0}
[data-sub="esg03"] .graph_box .graph.g2 p {background: #00ad64; box-shadow: 0 0 20rem rgba(0, 173, 100, 0.25)}
[data-sub="esg03"] .graph_box .graph.g3 {background: rgba(0, 103, 219, 0.15); bottom: 0; right: 0}
[data-sub="esg03"] .graph_box .graph.g3 p {background: #0067db; box-shadow: 0 0 20rem rgba(0, 103, 219, 0.25)}
[data-sub="esg03"] .graph_box i {text-align: center;}
[data-sub="esg03"] .graph_box i img {width: 100%; max-width: 80%; text-align: center;}
[data-sub="esg03"] .con.c2 .img_box {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 380rem; padding: 40rem 70rem; background: url(/images/content/esg03_01.jpg) no-repeat center / cover; box-sizing: border-box; color: var(--color-white);}
[data-sub="esg03"] .con.c2 .img_box div {width: 70%;}
[data-sub="esg03"] .con.c2 .img_box p {font-weight: 300;}
[data-sub="esg03"] .con.c2 .img_box .more {display: inline-block; padding: 18rem 48rem; font-size: 16rem; font-weight: 400; border-radius: 3rem; background: rgba(255, 255, 255, 0.25);}
[data-sub="esg03"] .con.c2 .img_box .more:hover {background: var(--color-white); color: #0050b1; font-weight: 500;}

@media (max-width:1400px){
    [data-sub="esg03"] .graph_box .center {width: 45%;}
}

@media (max-width:1280px){ 
    [data-sub="esg03"] .esg_img {height: 300rem;}
    [data-sub="esg03"] .esg_img img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;}
    [data-sub="esg03"] .graph_box .center {width: 48%;}
}
@media (max-width:1080px){
    [data-sub="esg03"] .graph_box {padding: 30rem; height: 460rem;}
    [data-sub="esg03"] .graph_box .center {width: 50%;}
    [data-sub="esg03"] .graph_box .graph {width: 220rem; height: 220rem;}
    [data-sub="esg03"] .graph_box .graph p {width: 150rem; height: 150rem;font-size: 16rem;}
    [data-sub="esg03"] .con.c2 .img_box {padding: 30rem 60rem;}
    [data-sub="esg03"] .con.c2 .esg_p br {display: none;}
}
@media (max-width:767px){
    [data-sub="esg03"] .graph_box .center {width: 66%;}
    [data-sub="esg03"] .graph_box .graph p {font-size: 15rem;}
    [data-sub="esg03"] .con.c2 .img_box {padding: 60rem 40rem; flex-direction: column; height: auto; align-items: flex-start; gap: 30rem;}
    [data-sub="esg03"] .con.c2 .img_box div {width: 100%;}
}
@media (max-width:480px){
    [data-sub="esg03"] .ss-tit h2 {font-size: 20rem;}
    [data-sub="esg03"] .ss-tit h2 strong {display: inline}
    [data-sub="esg03"] .graph_box {padding: 25rem;} 
    [data-sub="esg03"] .graph_box .center {width: 100%;}
    [data-sub="esg03"] .graph_box {height: 325rem;}
    [data-sub="esg03"] .graph_box .graph {width: 150rem; height: 150rem;}
    [data-sub="esg03"] .graph_box .graph p {width: 110rem; height: 110rem; font-size: 15rem;}
    [data-sub="esg03"] .con.c2 .img_box {padding: 50rem 25rem;}
    [data-sub="esg03"] .con.c2 .img_box .more {padding: 10rem 28rem;}
}
/* esg04 - 사회 */
[data-sub="esg04"] {}
[data-sub="esg04"] .num_list li::before {left: 30rem;}
[data-sub="esg04"] .num_list {display: grid; grid-template-columns: repeat(2,1fr); gap: 15rem;}
[data-sub="esg04"] .num_list li {padding: 22rem 22rem 22rem 62rem; box-sizing: border-box; background: #f8f8f8;}
[data-sub="esg04"] .con.c3 .box:nth-child(2) {margin-top:40rem;}
[data-sub="esg04"] .con.c3 .esg-cs {display: flex; align-items: center; gap: 80rem; font-size: 17rem; padding: 30rem 40rem; border:5rem solid #f5f5f5; box-sizing: border-box; margin-bottom: 30rem;}
[data-sub="esg04"] .con.c3 .esg-cs dt {display: flex; align-items: center; gap: 15rem; font-weight: 600;}
[data-sub="esg04"] .con.c3 .esg-cs dd {color: #555;}
[data-sub="esg04"] .con.c3 .esg-cs dl {display: flex; align-items: center; gap: 15rem;}
[data-sub="esg04"] .con.c3 em.note {font-weight: 300; color: #777;}
[data-sub="esg04"] .con.c3 em.note i {margin-right: 5rem; font-weight: 300;}
[data-sub="esg04"] .con.c3 .box:nth-child(2) svg {width: 20rem; fill: #b7b7b7;}

@media (max-width:1280px){ 
    [data-sub="esg04"] .esg_img {height: 300rem;}
    [data-sub="esg04"] .esg_img img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;}
}
@media (max-width:1080px){
    [data-sub="esg04"] .num_list {grid-template-columns: repeat(1,1fr);}
    [data-sub="esg04"] .num_list li {padding: 20rem 20rem 20rem 55rem; box-sizing: border-box; background: #f8f8f8;}
    [data-sub="esg04"] .num_list li::before {left: 20rem;}
}
@media (max-width:767px){
    [data-sub="esg04"] .con.c3 .esg-cs {gap: 40rem; font-size: 15rem; padding: 20rem 20rem;}
}
@media (max-width:480px){
    [data-sub="esg04"] .num_list li {font-size: 15rem;}
}

/* esg05 - 지배구조 */
[data-sub="esg05"] {}
[data-sub="esg05"] .org_list {padding:40rem; box-sizing: border-box; border: 1rem solid #e8e8e8; font-weight: 500; text-align: center;}
[data-sub="esg05"] .org_list img {max-width: 95%;}
[data-sub="esg05"] .org1 span {position: relative; display: flex; align-items: center; justify-content: center; width: 175rem; height: 175rem; border-radius: 50%; background-color:#0050b1; background-image: url(/images/content/org_vds.png); background-size: 180rem; background-repeat: no-repeat; background-position-x: 40rem; background-position-y: 20rem; color: #fff; font-size: 20rem; font-weight: 600;  box-shadow : 0 0 15rem rgba(0, 131, 213, 0.2); margin: 0 auto;}
[data-sub="esg05"] .org1 span::after {content: ''; position: absolute;}
[data-sub="esg05"] .org1 span::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 210rem; height: 210rem; border-radius: 50%; background: #fff; border: 1rem dashed #ddd; z-index: -1;}
[data-sub="esg05"] .org2 {margin-top: 80rem;}
[data-sub="esg05"] .org2 span {position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 180rem;height: 180rem; border: 5rem solid rgba(215, 0, 15, 0.5);  border-radius: 50%; box-sizing: border-box; font-size: 18rem; color: #fff; background: #d7000f;}
[data-sub="esg05"] .org2 span::before {content: ''; position: absolute; top: -6rem; left: 50%; transform: translateX(-50%); width: 12rem; height: 12rem; border-radius: 50%; background: #d7000f; border: 2rem solid #fff;}
[data-sub="esg05"] .org2 span::after {content: ''; position: absolute; top: -80rem; left: 50%; transform: translateX(-50%); width: 1rem; height:210rem; border-left: 1rem solid #ddd; box-sizing: border-box; z-index: -10;}
[data-sub="esg05"] .org3 {display: flex; gap: 35%; justify-content: center; margin-top:120rem; position: relative;}
[data-sub="esg05"] .org3::before {content: ''; position: absolute; top:-60rem; left: 50%; transform: translateX(-50%); width: 300rem; height: 1rem; background: #ddd;}
[data-sub="esg05"] .org3 span {position: relative; display: inline-block; width: 280rem; padding: 25rem 0; border-radius: 5rem; box-sizing: border-box; font-size: 18rem; color: #fff;}
[data-sub="esg05"] .org3_1 span::after, [data-sub="esg05"] .org3_2 span::after {content: ''; position: absolute; top: -60rem;}
[data-sub="esg05"] .org3_1 span::before, [data-sub="esg05"] .org3_2 span::before {content: ''; position: absolute; top: -6rem; left: 50%; transform: translateX(-50%); width: 12rem; height: 12rem; border-radius: 50%; border: 2rem solid #fff; z-index: 1;}
[data-sub="esg05"] .org3_1 {position: relative;}
[data-sub="esg05"] .org3_1::before {content: ''; position: absolute; top:-60rem; left: 50%; transform: translateX(-50%); height: 60rem; border-left: 1rem solid #ddd;} 
[data-sub="esg05"] .org3_1 span {background: #0067db;}
[data-sub="esg05"] .org3_1 span::before {background: #0067db;}
[data-sub="esg05"] .org3_1 span::after {left: 0; transform: translate(50%, 0); width: 100%; height: 1rem; background: #ddd;}
[data-sub="esg05"] .org3_2 {position: relative;}
[data-sub="esg05"] .org3_2::before {content: ''; position: absolute; top:-60rem; left: 50%; transform: translateX(-50%); height: 100%; border-left: 1rem solid #ddd;} 
[data-sub="esg05"] .org3_2 span {background: #00ad64;}
[data-sub="esg05"] .org3_2 span::before {background: #00ad64; }
[data-sub="esg05"] .org3_2 > span::after {left: 0; transform: translate(-50%, 0); width: 100%; height: 1rem; background: #ddd;}
[data-sub="esg05"] .org3_cont {margin-top: 20rem;}
[data-sub="esg05"] .org3_cont span {background: #333;}
[data-sub="esg05"] .org3_cont span::before {display: none;}

@media (min-width:1921px){
	[data-sub="esg05"] .org_list img{width:100%;}
}
@media (max-width:1280px){ 
    [data-sub="esg05"] .esg_img {height: 300rem;}
    [data-sub="esg05"] .esg_img img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;}
}
@media (max-width:1080px){
    [data-sub="esg05"] .org3 {gap: 25%;}
    [data-sub="esg05"] .org3::before {display: none;}
}
@media (max-width:767px){
    [data-sub="esg05"] .org_list {padding:40rem 20rem;}
    [data-sub="esg05"] .org2 span::after {height: 194rem;}
    [data-sub="esg05"] .org3 {gap: 0; margin-top: 80rem;}
    [data-sub="esg05"] .org3_1 span::after, [data-sub="esg05"] .org3_2 span::after {top: -40rem;}
    [data-sub="esg05"] .org3_1 {width: 50%;}
    [data-sub="esg05"] .org3_1::before {top: -40rem; height: 40rem;}
    [data-sub="esg05"] .org3_2 {width: 50%;}
    [data-sub="esg05"] .org3_2::before {top: -40rem; height: 40rem;}
}
@media (max-width:480px){
    [data-sub="esg05"] .org_list {padding:30rem 20rem;}
    [data-sub="esg05"] .org3 {flex-direction: column; align-items: center; margin-top: 40rem;}
    [data-sub="esg05"] .org3_1 {width: 100%;}
    [data-sub="esg05"] .org3_2 {width: 100%; margin-top: 40rem;}
    [data-sub="esg05"] .org3_cont {margin-top: 10rem;}
    [data-sub="esg05"] .org3_1 span::after, [data-sub="esg05"] .org3_2 span::after {display: none;}
}
/* recruit01 - 인재상 */
.area_recruit .ss-tit {text-align: center;}
.area_recruit .ss-tit h2 {}
[data-sub="recruit01"] {position: relative;}
[data-sub="recruit01"]::before {content: ''; position: absolute; bottom: -120rem; left: 50%; transform: translateX(-50%); background: url(/images/content/recruit01_bg.png) no-repeat; width: 100%; height: 388rem; z-index: -1;}
[data-sub="recruit01"] .sub-title p br {display: none;}
[data-sub="recruit01"] .recruit_list {display: flex; gap: 20rem; align-items: center; text-align: center; margin-top: 60rem;}
[data-sub="recruit01"] .recruit_list li {width: 100%; padding: 60rem 30rem; box-sizing: border-box; background: #fff; border: 1rem solid #e8e8e8; transition: .5s;}
[data-sub="recruit01"] .recruit_list li.active {border-color: #111; box-shadow : 0 0 20rem rgba(0, 0, 0, 0.08)}
[data-sub="recruit01"] .recruit_list .img {margin-bottom: 40rem;}
[data-sub="recruit01"] .recruit_list .img img {max-width: 100%; object-fit: contain;}
[data-sub="recruit01"] .recruit_list .txt .eng {font-size: 17rem; font-weight: 600; color: #bbb;}
[data-sub="recruit01"] .recruit_list .txt dt {font-size: 25rem; font-weight: 700; margin: 25rem 0;}
[data-sub="recruit01"] .recruit_list .txt dd {font-size: 17rem; line-height: 1.7; font-weight: 300; color: #555;}
[data-sub="recruit01"] .recruit_list .dot {display: flex; gap: 7rem;}
[data-sub="recruit01"] .recruit_list .dot i {display: inline-block; width: 4rem; height: 4rem; border-radius: 50%; background: var(--color-black);}
[data-sub="recruit01"] .recruit_list .dot i:nth-child(2) {opacity: 0.5;}
[data-sub="recruit01"] .recruit_list .dot i:nth-child(3) {opacity: 0.3;}

@media (max-width:1280px){
    [data-sub="recruit01"] .recruit_list li {padding: 50rem 30rem;}
    [data-sub="recruit01"] .recruit_list .dot {display: none;}
    [data-sub="recruit01"] .recruit_list .txt dd br {display: none;}
}
@media (max-width:1080px){
    [data-sub="recruit01"] .recruit_list {gap: 10rem;}
    [data-sub="recruit01"] .recruit_list .img {margin-bottom: 25rem;}
    [data-sub="recruit01"] .recruit_list .img img {width: 80%; border-radius: 50%; border: 10rem solid #f8f8f8;}
    [data-sub="recruit01"] .recruit_list .txt dt {margin: 20rem 0;}
}
@media (max-width:767px){
    [data-sub="recruit01"] .sub-title p br {display: block;}
    [data-sub="recruit01"]::before {bottom: -80rem; height: 120rem; background-size: cover; background-position-x: 50%;}
    [data-sub="recruit01"] .recruit_list {gap: 20rem; flex-direction: column;} 
    [data-sub="recruit01"] .recruit_list li {padding: 40rem 30rem;}
    [data-sub="recruit01"] .recruit_list .txt .eng {font-size: 15rem;}
    [data-sub="recruit01"] .recruit_list .txt dt {font-size: 20rem;}
    [data-sub="recruit01"] .recruit_list .txt dd {font-size: 15rem; line-height: 1.5;}
    [data-sub="recruit01"] .recruit_list .img img {width: auto;}
}
@media (max-width:480px){
    .area_recruit .ss-tit {text-align: left;}
    [data-sub="recruit01"] .recruit_list .img img {width: 70%;}
}

/* recruit03 - 인사제도 */
[data-sub="recruit03"] .graph {position: relative; margin: 120rem auto; width: 480rem; height: 480rem;}
[data-sub="recruit03"] .graph .center {position: relative;display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: url(/images/content/recruit03_ctrcle.png) no-repeat 50% 50% / cover; margin: 0 auto;}
[data-sub="recruit03"] .graph .center h4 {position: relative; display: flex; flex-direction: column; gap: 8rem; align-items: center; justify-content: center; font-size: 35rem; width: 200rem; height: 200rem; border-radius: 50%; background: linear-gradient(45deg, #057bff, #00479d); box-shadow : 0 0 20rem rgba(5, 123, 255, 0.12); color: #fff;}
[data-sub="recruit03"] .graph .center h4 span {display: block; font-size: 16rem; font-weight: 300;}
[data-sub="recruit03"] .graph .center h4::after {position: absolute; content: ''; width: 200rem;height: 200rem; background: url(/images/content/recruit_vds.png) no-repeat; background-size: contain; background-position:40rem 30rem;}
[data-sub="recruit03"] .graph .center h4::before {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 285rem; height: 285rem; border-radius: 50%; background: rgba(0, 80, 170,0.05); z-index: -1;}
[data-sub="recruit03"] .graph .icon {position: relative; display: flex; align-items: center; justify-content: center; width: 130rem; height: 130rem; border-radius: 50%; background: linear-gradient(45deg, #344888, #364267); box-shadow : 0 0 20rem rgba(52, 72, 136, 0.08)}
[data-sub="recruit03"] .graph .icon img {height: 38rem;}
[data-sub="recruit03"] .graph .list > div {position: absolute;}
[data-sub="recruit03"] .graph .list span {position: absolute; font-size: 18rem; font-weight: 600; top: 50%; transform: translateY(-50%);}
[data-sub="recruit03"] .graph .list .g1 {flex-direction: row-reverse; position: absolute; top: 0; left: 0;}
[data-sub="recruit03"] .graph .list .g1 span {left: -180rem;}
[data-sub="recruit03"] .graph .list .g2 {top: 0; right: 0;}
[data-sub="recruit03"] .graph .list .g2 span {right: -100rem;}
[data-sub="recruit03"] .graph .list .g3 {flex-direction: row-reverse; bottom:0; left: 0}
[data-sub="recruit03"] .graph .list .g3 span {left: -100rem;}
[data-sub="recruit03"] .graph .list .g4 {bottom: 0; right: 0}
[data-sub="recruit03"] .graph .list .g4 span {right: -140rem;}
[data-sub="recruit03"] .re03_list {display: grid; grid-template-columns: repeat(2,1fr); gap: 30rem;}
[data-sub="recruit03"] .re03_list li {display: flex; align-items: center; gap: 40rem; padding: 60rem 50rem; border: 1rem solid #e8e8e8; box-sizing: border-box;}
[data-sub="recruit03"] .re03_list .icon {display: flex; align-items: center; justify-content: center; width: 80rem; height: 80rem; background: #f5f5f5;}
[data-sub="recruit03"] .re03_list .icon img {height: 33rem;}
[data-sub="recruit03"] .re03_list dl {width: 75%;}
[data-sub="recruit03"] .re03_list dt {font-size: 20rem; font-weight: 600; margin-bottom: 15rem;}
[data-sub="recruit03"] .re03_list dd {font-size: 17rem; font-weight: 300; color: #555;}

@media (max-width:1080px){
    [data-sub="recruit03"] .re03_list {gap: 20rem;}
    [data-sub="recruit03"] .re03_list li {padding: 40rem 30rem; gap: 25rem;}
    [data-sub="recruit03"] .re03_list .icon {width: 75rem; height: 75rem;}
    [data-sub="recruit03"] .graph .icon {width: 100rem; height: 100rem; }
    [data-sub="recruit03"] .graph .icon img {height: 32rem;}
}
@media (max-width:767px){
    [data-sub="recruit03"] .graph { margin: 100rem auto; width: 420rem; height: 420rem;}
    [data-sub="recruit03"] .graph .list span {font-size: 15rem; font-weight: 500;}
    [data-sub="recruit03"] .graph .list .g1 span {left: -140rem}
    [data-sub="recruit03"] .graph .list .g2 span {right: -80rem}
    [data-sub="recruit03"] .graph .list .g3 span {left: -80rem}
    [data-sub="recruit03"] .graph .list .g4 span {right: -115rem}
    [data-sub="recruit03"] .re03_list {grid-template-columns: repeat(1,1fr); gap: 15rem;}
    [data-sub="recruit03"] .re03_list .icon {width: 60rem; height: 60rem;}
    [data-sub="recruit03"] .re03_list dl {width: 80%;}
    [data-sub="recruit03"] .re03_list dt {font-size: 18rem; margin-bottom: 10rem;}
    [data-sub="recruit03"] .re03_list dd {font-size: 15rem;}
}
@media (max-width:480px){
    [data-sub="recruit03"] .graph { margin: 80rem auto; width: 280rem; height:280rem;}
    [data-sub="recruit03"] .graph .center h4 {width: 120rem; height: 120rem; font-size: 20rem; gap: 5rem;}
    [data-sub="recruit03"] .graph .center h4::before {width: 150rem; height: 150rem;}
    [data-sub="recruit03"] .graph .center h4 span {font-size: 15rem;}
    [data-sub="recruit03"] .graph .icon {width: 70rem; height: 70rem;}
    [data-sub="recruit03"] .graph .icon img {height: 28rem;}
    [data-sub="recruit03"] .graph .list span {font-size: 14rem; top: auto; text-align: center;}
    [data-sub="recruit03"] .graph .list .g1 span {left: 50%; bottom: -35rem; transform: translateX(-50%); width: 100%;} 
    [data-sub="recruit03"] .graph .list .g2 span {left: 50%; bottom: -25rem; right: auto; transform: translateX(-50%);width: 100%;}
    [data-sub="recruit03"] .graph .list .g3 span {left: 50%; bottom: -25rem; transform: translateX(-50%);width: 100%;}
    [data-sub="recruit03"] .graph .list .g4 span {left: 50%; bottom: -40rem;right: auto; transform: translateX(-50%);width: 100%;}
    [data-sub="recruit03"] .re03_list li {flex-direction: column; align-items: flex-start; gap: 20rem; padding: 30rem 20rem;}
    [data-sub="recruit03"] .re03_list .icon {width: 55rem; height: 55rem;}
    [data-sub="recruit03"] .re03_list .icon img {height: 28rem;}
}

/* recruit04 - 복지제도 */
[data-sub="recruit04"] {position: relative;}
[data-sub="recruit04"]::before {content: ''; position: absolute; bottom: -120rem; left: 0; width: 100%; height:20%; background: #f8f8f8; z-index: -10;}
[data-sub="recruit04"] .re04_img {position: relative; overflow-x: hidden; margin-top: 60rem;}
[data-sub="recruit04"] .re04_img .img {display: flex; justify-content: space-between; gap: 10rem;}
[data-sub="recruit04"] .re04_img .img img:nth-child(1) {width: 40%;}
[data-sub="recruit04"] .re04_img .img img:nth-child(2) {width: 28%;}
[data-sub="recruit04"] .re04_img .img img:nth-child(3) {width: 28%;}
[data-sub="recruit04"] .re04_list {position: relative; margin-top: 80rem;}
[data-sub="recruit04"] .re04_list ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 30rem;}
[data-sub="recruit04"] .re04_list li {position: relative; padding: 60rem 40rem; box-sizing: border-box; background: #fff; border: 1rem solid #e8e8e8;}
[data-sub="recruit04"] .re04_list .icon {height: 52rem; position: absolute; top: 60rem; right: 35rem;}
[data-sub="recruit04"] .re04_list .num {width: 30rem; height: 30rem; border-radius: 50%; background: #111; font-size: 14rem; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 70rem;}
[data-sub="recruit04"] .re04_list .txt dt {font-size: 20rem; font-weight: 700; margin-bottom: 20rem;}
[data-sub="recruit04"] .re04_list .txt dd {font-size: 17rem; font-weight: 300; color: #555;}
[data-sub="recruit04"] .marquee {position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 100rem; letter-spacing: -.015em; text-transform: uppercase; white-space: nowrap; pointer-events: none; font-size: 130rem; font-weight: 900; color: rgba(24, 45, 65, 0.04); font-style: italic;  z-index: -10;}

@media(prefers-reduced-motion:reduce){
	.marquee-txt{ display: none; }
}
@media(prefers-reduced-motion:no-preference){
	.marquee-txt{ animation: marquee 15s linear infinite; }
}

@media (max-width:1080px){
    [data-sub="recruit04"] .re04_list .num {margin-bottom: 40rem;}
    [data-sub="recruit04"] .re04_list ul {grid-template-columns: repeat(2,1fr);}
    [data-sub="recruit04"] .re04_list li {padding: 40rem 25rem;}
    [data-sub="recruit04"] .re04_list .icon {height: 40rem; top: 40rem; right: 25rem;}
}
@media (max-width:767px){
    [data-sub="recruit04"] .re04_list {margin-top: 40rem;}
    [data-sub="recruit04"] .re04_list ul {gap: 20rem;}
}
@media (max-width:480px){
    [data-sub="recruit04"] .re04_img {margin-top: 30rem;}
    [data-sub="recruit04"] .re04_img .img {display: flex; flex-wrap: wrap;}
    [data-sub="recruit04"] .re04_img .img img:nth-child(1) {width: 100%; }
    [data-sub="recruit04"] .re04_img .img img:nth-child(2) {width: 48%;}
    [data-sub="recruit04"] .re04_img .img img:nth-child(3) {width: 48%;}
    [data-sub="recruit04"] .re04_list ul {grid-template-columns: repeat(1,1fr); gap: 15rem;}
    [data-sub="recruit04"] .re04_list .txt dd br {display: none;}
    [data-sub="recruit04"] .marquee {display: none;}
}


/* investor01 -공시정보 */
[data-sub="investor01"] .investor-box {background: #f8f8f8; padding:70rem; box-sizing:border-box; display:flex; align-items: center; justify-content: center;}
[data-sub="investor01"] .investor-box iframe { width:100%; max-width:770px; height:940px; background-color:#fff; box-shadow:0rem 8rem 20rem rgba(0,0,0,0.08); padding:20rem;}

/* investor02 - 재무정보보 */
[data-sub="investor02"] {overflow: hidden;}
[data-sub="investor02"] .tab-container .fsCon {overflow: hidden; visibility: hidden; height: 0;}
[data-sub="investor02"] .tab-container .fsCon.active {overflow: visible; visibility: visible; height: 100%;}
[data-sub="investor02"] .tab-menu {margin-bottom: 50rem; text-align: center;}
[data-sub="investor02"] .tab-menu ul {width: auto; display: inline-flex; gap: 5rem; align-items: center; justify-content: center; text-align: center; border-radius:50rem; padding: 9rem; border: 1rem solid #ddd;}
[data-sub="investor02"] .tab-menu li {cursor: pointer; font-size: 17rem; width: 140rem; height: 60rem; display:flex; align-items: center; justify-content: center; font-weight: 500; color: #888; border-radius: 30rem;}
[data-sub="investor02"] .tab-menu li.active {background: var(--color-point); color:var(--color-white); pointer-events: none;}
[data-sub="investor02"] .tab-menu li:not(.active):hover {background: #f5f5f5;}
[data-sub="investor02"] .fsCon.active .box.b2 {margin-top: 80rem;}
[data-sub="investor02"] .fsCon em.notice {display: flex; align-items: center; gap:8rem; font-size: 18rem;  margin-top: 30rem; color: #666; line-height: 1;}
[data-sub="investor02"] .fsCon em.notice i {font-size: 20rem;}
[data-sub="investor02"] .tit {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 35rem;}
[data-sub="investor02"] .tit h3 {font-size:35rem; font-weight: 700;}
[data-sub="investor02"] .tit em, [data-sub="investor02"] .select_tit em {font-size: 18rem; color: #666; align-self: flex-end;}
[data-sub="investor02"] .select_tit {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 25rem;}
[data-sub="investor02"] .select_year {position: relative; background: var(--color-white); width: 200rem;}
[data-sub="investor02"] .select_year select {overflow:hidden; position: relative; padding: 0 40rem 0 18rem; margin: 0; width: 100%; height: 50rem; font-size: 16rem; text-overflow: ellipsis; white-space: nowrap; background-color: transparent; border: 1px solid #ddd; border-radius: 4px; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-position: calc(100% - 15rem);}
[data-sub="investor02"] .table {border: 1rem solid #e8e8e8; font-family: var(--font-eng);}
[data-sub="investor02"] .table thead {border-bottom: 1rem solid #e8e8e8;}
[data-sub="investor02"] .table thead tr:first-child th {font-size: 18rem; font-weight: 600;}
[data-sub="investor02"] .table thead {border-top:2px solid #333;}
[data-sub="investor02"] .table thead th {border-left: 1rem dashed #ddd; border-bottom: 1rem dashed #ddd; background: #f8f8f8;}
[data-sub="investor02"] .table thead th[rowspan] {border-right: 1rem dotted #ddd; border-bottom: 0}
[data-sub="investor02"] .table th {font-weight:600; color: #000;}
[data-sub="investor02"] .table th, [data-sub="investor02"] .table td {padding: 18rem 10rem; box-sizing: border-box; text-align: center; font-size: 17rem;}
[data-sub="investor02"] .table td {color: #555; font-weight: 300;}
[data-sub="investor02"] .table tr.gray {background: #f8f8f8;}
[data-sub="investor02"] .table tbody th {border: 0; border-bottom: 1rem dotted #ddd;}
[data-sub="investor02"] .table tbody td.last {background: #fafafa; border-left: 1rem solid #333; border-right: 1rem solid #333 }
[data-sub="investor02"] .table tbody tr:last-child td.last {border-bottom: 1rem solid #333;}
[data-sub="investor02"] .table thead th.last {border-left: 1rem solid #333; border-right: 1rem solid #333; border-top: 1rem solid #333; }

@media (max-width:1080px){
    [data-sub="investor01"] .investor-box {padding:50rem;}
    [data-sub="investor01"] .investor-box iframe {max-width:100%; height: 960rem;}
}
@media (max-width:767px){
    [data-sub="investor01"] .investor-box {padding:0; background: 0; border: 1rem solid #e8e8e8;}
    [data-sub="investor02"] .tab-menu {margin-bottom: 30rem;}
    [data-sub="investor02"] .tit {margin-bottom:25rem;}
    [data-sub="investor02"] .select_tit { margin-bottom: 20rem;}
    [data-sub="investor02"] .tit h3 {font-size:25rem;}
    [data-sub="investor02"] .tit em, [data-sub="investor02"] .select_tit em  {font-size: 15rem;}
    [data-sub="investor02"] .table {margin-top: 0;}
    [data-sub="investor02"] .table thead tr:first-child th {font-size: 16rem;}
    [data-sub="investor02"] .table th, [data-sub="investor02"] .table td {padding: 10rem 8rem; font-size: 15rem;}
    [data-sub="investor02"] .fsCon.active .box.b2 {margin-top: 60rem;}
    [data-sub="investor02"] .fsCon em.notice {gap:5rem; font-size: 15rem; margin-top: 20rem;}
    [data-sub="investor02"] .fsCon em.notice i {font-size: 16rem;}
}
@media (max-width:480px){
    [data-sub="investor02"] .tab-menu ul {gap: 0; padding: 7rem; width: 100%;}
    [data-sub="investor02"] .tab-menu li {font-size: 13rem; width: 100%; height: 40rem;}
    [data-sub="investor02"] .tit {margin-bottom: 20rem;}
    [data-sub="investor02"] .fsCon.active .box.b2 {margin-top: 50rem;}
    [data-sub="investor02"] .select_tit {flex-direction: column; gap: 10rem;}
    [data-sub="investor02"] .select_year {width: 100%;}
}