@charset "utf-8";

html:has(.sub_about) { scroll-behavior: smooth; }

.sub_visual { position: relative; box-sizing: border-box; height: 560px; }
.sub_visual .thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/sub/sv_company.jpg') no-repeat center / cover; }
.sub_visual .cont { position: relative;  display: flex; align-items: center; height: 100%; padding-block: 100px 110px; }
.sub_visual .text_wrap { display: flex; flex-direction: column; justify-content: center; gap: 10px; font-size: var(--title-20); color: var(--point-white); }
.sub_visual .text_wrap h2 { font-size: 350%; font-weight: 700; letter-spacing: 0; color: inherit; }
.sub_visual .text_wrap p { font-size: 90%; font-weight: 300; line-height: 1.56; letter-spacing: 0; color: inherit; }
.sub_visual nav { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding-block: 22px 42px; }
.sub_visual nav dl { position: relative; font-size: var(--title-20); display: flex; align-items: center; flex-wrap: wrap; row-gap: 15px; }
.sub_visual nav dt { box-sizing: border-box; padding-right: 40px; translate: 0 -1px; }
.sub_visual nav dd { position: relative; box-sizing: border-box; color: var(--point-white); }
.sub_visual nav dd:last-child { padding: 0; }
.sub_visual nav dd::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.3); }

.sub_visual nav .depth01_dd { min-width: 275px; font-size: 100%; font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; }
.sub_visual nav .depth01_dd span { position: relative; display: block; width: 100%; color: inherit; font-size: inherit; font-weight: inherit; box-sizing: border-box; padding-inline: 41px 60px; cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.sub_visual nav .depth01_dd span::before { content: ''; position: absolute; right: 41px; top: calc(50% + 1px); translate: 0 -50%; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0px 5px; border-color: #ffffff transparent transparent transparent; }
.sub_visual nav .depth01_dd ul { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; background: var(--point-white); border: 1px solid var(--point-color01); z-index: 10; box-sizing: border-box; padding-block: 20px; opacity: 0; pointer-events: none; transition: all 0.4s; border-radius: var(--radius-10); }
.sub_visual nav .depth01_dd li a { display: block; font-weight: 400; color: var(--black-color02); padding-inline: 40px; padding-block: 11px; box-sizing: border-box; transition: all 0.4s; font-size: 90%; }

.sub_visual nav .depth01_dd.on ul { opacity: 1; pointer-events: all; }

.sub_visual nav .depth02_dd span { display: none; position: relative; width: 100%; color: inherit; font-size: inherit; font-weight: 500; box-sizing: border-box; padding-inline: 41px; cursor: pointer; }
.sub_visual nav .depth02_dd span::before { content: ''; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0px 5px; border-color: #ffffff transparent transparent transparent; }
.sub_visual nav .depth02_dd ul { display: flex; }
.sub_visual nav .depth02_dd li { box-sizing: border-box; position: relative; }
.sub_visual nav .depth02_dd li + li::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.3); }
.sub_visual nav .depth02_dd li a { font-size: 100%; font-weight: 300; letter-spacing: -0.03em; box-sizing: border-box; padding-inline: 41px;  }
.sub_visual nav .depth02_dd li:last-child a { padding-right: 0; }
.sub_visual nav .depth02_dd li.on a { font-weight: 600; }

.sub_visual nav .depth01_dd li.on a { color: var(--point-color01); font-weight: 500; }

.page_title { box-sizing: border-box; text-align: center; padding-block: 90px 60px; font-size: var(--title-20); position: relative; z-index: 5; }
.page_title h3 { font-size: 250%; font-weight: 700; letter-spacing: -0.03em; color: var(--black-color03); line-height: 1.4; }
.page_title h4 { box-sizing: border-box; padding-block: 11px 10px; padding-inline: 30px; display: inline-block; background: var(--black-color03); border-radius: var(--radius-50); color: var(--point-white); font-size: 120%; font-weight: 400; letter-spacing: -0.02em; margin-top: 50px; }
.page_title em { color: var(--point-color03); font-weight: inherit; }
.page_title p { color: var(--black-color03); font-weight: 500; font-size: 100%; letter-spacing: -0.03em; margin-top: 17px; }
.page_title p .for_m { display: none; }
.page_title h4 + p { margin-top: 27px; }
.page_title h6 { font-size: 120%; letter-spacing: -0.03em; font-weight: 600; margin-bottom: 25px; }

body:has(.sub_vision, .sub_skill) .sub_visual .thumb { background-image: url('../images/sub/sv_science.jpg'); }
body:has(.sub_pipeline) .sub_visual .thumb { background-image: url('../images/sub/sv_pipeline.jpg'); }
body:has(.sub_notice, .sub_press, .sub_ir) .sub_visual .thumb { background-image: url('../images/sub/sv_news.jpg'); }
body:has(.sub_people, .sub_inquiry, .sub_location) .sub_visual .thumb { background-image: url('../images/sub/sv_contact.jpg'); }

body:has(.sub_service) .sub_visual nav { display: none; }

.bullet { display: flex; align-items: baseline; gap: 18px; }
.bullet::before { content: ''; display: block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 100%; background: var(--point-color03); translate: 0 -4px; }

.flex_des { display: flex; width: 100%; }
.flex_col { flex-direction: column; }
.g60 { gap: clamp(30px, 3.2vw, 60px); }
.g20 { gap: 20px; }
.g15 { gap: 15px; }
.g40 { gap: 40px; }
@media (hover: hover) {
    .sub_visual nav .depth01_dd li:hover a { color: var(--point-color01); }
}

@media (max-width: 1346px){
    br.for_pc { display: none; }
}

@media (max-width: 1023px) {
    .sub_visual { height: clamp(420px, 56vw, 560px); }
    .sub_visual .cont { padding-block: clamp(85px, 10vw, 100px) clamp(80px, 11vw, 110px); }
    .sub_visual .text_wrap h2 { font-size: clamp(40px, 7vw, 70px) }
    .sub_visual nav { padding-block: clamp(12px, 2vw, 22px) clamp(20px, 4vw, 42px); }
    .sub_visual nav dt { padding-right: clamp(10px, 4vw, 40px); flex-shrink: 0; }
    .sub_visual nav dt a { display: block; width: clamp(15px, 2vw, 20px); }
    .sub_visual nav .depth01_dd span { padding-inline: clamp(10px, 4vw, 41px) clamp(20px, 5vw, 60px); }
    .sub_visual nav .depth01_dd span::before { right: clamp(10px, 4vw, 41px); top: 50%;  }
    .sub_visual nav .depth01_dd ul { padding-block: clamp(12px, 2vw, 20px); }
    .sub_visual nav .depth01_dd li a { padding-inline: clamp(10px, 4vw, 40px); padding-block: clamp(9px, 1vw, 11px); }
    .sub_visual nav .depth02_dd li a { padding-inline: clamp(10px, 3.5vw, 41px); }

    .page_title { padding-block: clamp(60px, 9vw, 90px) clamp(40px, 6vw, 60px); }
    .page_title h3 { font-size: clamp(30px, 5vw, 50px); }
    .page_title h6 { margin-bottom: clamp(15px, 2.5vw, 25px); }
    .page_title p { margin-top: clamp(14px, 1.7vw, 17px); }
    .page_title h4 { margin-top: clamp(25px, 5vw, 50px); padding-inline: clamp(20px, 3vw, 30px); }
    .page_title h4 + p { margin-top: clamp(20px, 2.7vw, 27px); }
}

@media (max-width: 860px){
    .bullet { gap: 12px; }
    .bullet::before { width: 5px; height: 5px; }
}

@media (max-width: 640px){
    .g40 { gap: 20px; }

    .sub_visual nav dl { flex-wrap: nowrap; }
    .sub_visual nav dl dd { width: 100%; }
    .sub_visual nav .depth02_dd span { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; padding-inline: clamp(20px, 3vw, 41px) clamp(20px, 5vw, 60px); }
    .sub_visual nav .depth02_dd ul { display: block; position: absolute; top: calc(100% + 10px); left: 1px; width: 100%; background: var(--point-white); border: 1px solid var(--point-color01); z-index: 10; box-sizing: border-box; padding-block: clamp(12px, 2vw, 20px); opacity: 0; pointer-events: none; transition: all 0.4s; transition: all 0.4s; border-radius: var(--radius-10); }
    .sub_visual nav .depth02_dd li a { display: block; font-weight: 400; color: var(--black-color02); padding-inline: clamp(15px, 3vw, 40px); padding-block: clamp(9px, 1vw, 11px); box-sizing: border-box; transition: all 0.4s; }
    .sub_visual nav .depth02_dd li.on a { color: var(--point-color01); }
    .sub_visual nav .depth02_dd li:last-child a { padding-right: clamp(15px, 3vw, 40px); }
    .sub_visual nav .depth02_dd.on ul { opacity: 1; pointer-events: all; }

    .sub_visual nav .depth01_dd { min-width: auto; }
    .sub_visual nav .depth01_dd span::before { border-width: 5px 4px 0 4px; right: clamp(10px, 2vw, 41px); }
    .sub_visual nav .depth02_dd { min-width: auto; }
    .sub_visual nav .depth02_dd span::before { border-width: 5px 4px 0 4px; }

}

@media (max-width: 479px) {
    .g20 { gap: 15px; }
    .sub_visual nav .depth01_dd span::before { top: 49%; }
    .sub_visual nav .depth02_dd span::before { top: 49%; }
    
    .page_title p .for_m { display: block; }
}

@media (max-width: 300px){
    .sub_visual nav .depth02_dd span { padding-right: 12px; }
}

/*───────────────────────────────────────────────────────────

    회사소개 및 핵심가치

───────────────────────────────────────────────────────────*/

.sub_about .about_cont { margin-top: 27px; position: relative; box-sizing: border-box; padding-bottom: 120px; }
.sub_about .about_cont::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 380px; background: var(--point-color03); }
.sub_about .about_cont ul { counter-reset: num 0; flex-wrap: nowrap; }
.sub_about .about_cont .flex_des li { position: relative; text-align: center; flex-direction: column; justify-content: space-between; font-size: var(--title-20); border: 1px solid var(--border-color01); border-radius: var(--radius-10); box-sizing: border-box; box-shadow: var(--shadow-01); background: var(--point-white); }
.sub_about .about_cont .flex_des li::before { content: counter(num, decimal-leading-zero); counter-increment: num 1; position: absolute; left: 50%; top: -1px; translate: -50% -50%; box-sizing: border-box; min-width: 60px; aspect-ratio: auto 1; display: flex; justify-content: center; align-items: center; border-radius: 100%; background: var(--black-color00); color: var(--point-white); font-size: 110%; font-weight: 600; letter-spacing: -0.03em;  }
.sub_about .about_cont .flex_des dl { box-sizing: border-box; padding-inline: clamp(20px, 1.6vw, 30px); padding-block: 55px 35px;  }
.sub_about .about_cont .flex_des dt { flex-direction: column; }
.sub_about .about_cont .flex_des dt h4 { color: var(--black-color00); font-weight: 600; font-size: 150%; letter-spacing: -0.03em; }
.sub_about .about_cont .flex_des dt h5 { color: var(--point-color03); font-weight: 500; font-size: 110%; letter-spacing: -0.03em; line-height: 1.37; }
.sub_about .about_cont .flex_des dd { box-sizing: border-box; margin-top: 24px; padding-top: 25px; color: var(--black-color03); font-weight: 400; font-size: 90%; line-height: 1.56; letter-spacing: -0.03em; border-top: 1px solid var(--border-color01); }
.sub_about .about_cont .flex_des .img_wrap { position: relative; left: -1px; bottom: -1px; border-radius: 0 0 var(--radius-10) var(--radius-10); overflow: clip; width: calc(100% + 2px); }

.sub_about .core_cont .page_title { padding-top: 117px; }
.sub_about .core_cont .page_title h3 { color: var(--black-color00); }

.sub_about .core_cont .circle_wrap { position: relative; }
.sub_about .core_cont .circle_cont { width: 100%; max-width: 420px; height: 100%; border: 2px solid var(--point-color03); border-radius: 100%; margin-inline: auto; box-sizing: border-box; padding: 38px; position: relative; z-index: 2; }
.sub_about .core_cont .circle_cont .circle_box { width: 100%; height: 100%; box-sizing: border-box; padding: 30px; background: rgba(235, 97, 29, 0.1); border-radius: inherit; }
.sub_about .core_cont .circle_cont .circle_box .circle { width: 100%; height: 100%; box-sizing: border-box; padding: 25px; background: var(--point-color03); border-radius: 100%; font-size: var(--title-20); }
.sub_about .core_cont .circle_cont .circle_box .circle span { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: var(--point-white); color: var(--point-color03); font-size: 200%; letter-spacing: -0.03em; font-weight: 600; line-height: 1.25; text-align: center; border-radius: inherit; box-shadow: var(--shadow-02); aspect-ratio: auto 1; }

.sub_about .core_cont .circle_wrap .ico_pc { position: relative; max-width: 908px; margin-inline: auto; min-height: 371px; margin-top: -144px; }
.sub_about .core_cont .circle_wrap .ico_pc li { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 13px; width: 180px; aspect-ratio: auto 1; border: 1px solid var(--border-color02); border-radius: 100%; font-size: var(--title-20); text-align: center; }
.sub_about .core_cont .circle_wrap .ico_pc li::before { content: ''; position: absolute; width: 1px; border-left: 1px dashed var(--black-color10); box-sizing: border-box; }
.sub_about .core_cont .circle_wrap .ico_pc li::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 100%; background: var(--point-color03); z-index: 3; }
.sub_about .core_cont .circle_wrap .ico_pc .img_wrap { box-sizing: border-box; width: 100%; padding-inline: 59px; padding-top: 27px; }
.sub_about .core_cont .circle_wrap .ico_pc .text_wrap { color: var(--black-color03); font-weight: 600; font-size: 100%; line-height: 1.4; letter-spacing: -0.03em; }

.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(1) { left: 0; top: 0; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(1)::before { height: 107px; left: 209px; top: -41px; rotate: 55deg; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(1)::after { left: 245px; top: -20px; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(2) { left: 198px; bottom: 21px; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(2)::before { height: 70px; left: 145px; top: -57px; rotate: 28deg; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(2)::after { left: 155px; top: -55px; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(3) { right: 200px; bottom: 21px; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(3)::before { height: 70px; right: 145px; top: -57px; rotate: -28deg; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(3)::after { right: 155px; top: -55px; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(3) { gap: 29px; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(4) { right: 0; top: 0; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(4)::before { height: 110px; right: 211px; top: -44px; rotate: -55deg; }
.sub_about .core_cont .circle_wrap .ico_pc li:nth-child(4)::after { right: 245px; top: -20px; }

.sub_about .core_cont .circle_wrap .ico_mob { font-size: var(--title-20); display: none; margin-top: 80px; }
.sub_about .core_cont .circle_wrap .ico_mob li { display: flex; align-items: baseline; gap: 40px; box-sizing: border-box; padding: 30px; border: 1px solid var(--border-color01); border-radius: var(--radius-10); }
.sub_about .core_cont .circle_wrap .ico_mob li + li { margin-top: 20px; }
.sub_about .core_cont .circle_wrap .ico_mob .img_wrap { box-sizing: border-box; width: 80px; }
.sub_about .core_cont .circle_wrap .ico_mob .text_wrap { color: var(--black-color03); font-weight: 600; font-size: 100%; line-height: 1.4; letter-spacing: -0.03em; }

@media (max-width: 1023px){
    .sub_about .about_cont { margin-top: clamp(20px, 2.7vw, 27px); padding-bottom: clamp(60px, 12vw, 120px); }
    .sub_about .about_cont::before { height: clamp(320px, 38vw, 380px); }
    .sub_about .about_cont .flex_des dd { margin-top: clamp(15px, 2vw, 25px); padding-top: clamp(15px, 2vw, 25px); }
    .sub_about .about_cont ul { flex-direction: column; row-gap: clamp(70px, 10vw, 100px); }
    .sub_about .about_cont .flex_des li { max-width: 420px; margin-inline: auto; }
    .sub_about .about_cont .flex_des li::before { min-width: clamp(45px, 6vw, 60px); }
    .sub_about .about_cont .flex_des dl { padding-inline: clamp(20px, 2vw, 30px); padding-block: clamp(35px, 5vw, 55px) clamp(25px, 3vw, 35px); }
    .sub_about .about_cont .flex_des dt h5 br { display: none; }

    .sub_about .core_cont .circle_cont { padding: clamp(20px, 4vw, 38px); }
    .sub_about .core_cont .circle_cont .circle_box { padding: clamp(20px, 3vw, 30px); }
    .sub_about .core_cont .circle_cont .circle_box .circle { padding: clamp(20px, 3vw, 25px); }

    .sub_about .core_cont .circle_wrap .ico_pc { display: none; }
    .sub_about .core_cont .circle_wrap .ico_mob { display: block; margin-top: clamp(40px, 8vw, 80px); }
    .sub_about .core_cont .circle_wrap .ico_mob li { padding: clamp(20px, 3vw, 30px); gap: clamp(20px, 4vw, 40px); }
    .sub_about .core_cont .circle_wrap .ico_mob li + li { margin-top: clamp(15px, 2vw, 20px); }
    .sub_about .core_cont .circle_wrap .ico_mob .img_wrap { width: clamp(45px, 8vw, 80px); }
    
}

@media (max-width: 479px){
    .sub_about .core_cont .circle_cont { max-width: 360px; width: 80%; }
    .sub_about .core_cont .circle_cont .circle_box .circle span { font-size: 20px }
}

/*───────────────────────────────────────────────────────────

    비젼 & 전략

───────────────────────────────────────────────────────────*/

.sub_vision::before { content: ''; position: absolute; left: 0; top: -253px; width: 100%; height: 583px; background: url('../images/sub/img_vision_bg.png') no-repeat top center; background-size: auto 100%; }
.sub_vision .vision_cont .flex_des { flex-wrap: nowrap; gap: 120px; }
.sub_vision .vision_cont .flex_des li { position: relative; width: 100%; aspect-ratio: auto 1; text-align: center; box-sizing: border-box; border-radius: 100%; }

.sub_vision .vision_cont .flex_des li::after { position: absolute; content: ''; left: calc(100% + 25px); top: 50%; translate: 0 -50%; width: 10px; height: 10px; border-radius: 100%; box-sizing: border-box; z-index: 2; }
.sub_vision .vision_cont .flex_des li::before { position: absolute; content: ''; left: -29px; top: 50%; translate: -50% -50%; width: 10px; height: 10px; border-radius: 100%; box-sizing: border-box; z-index: 2; }
.sub_vision .vision_cont .flex_des li div { width: 100%; height: 100%; box-sizing: border-box; border-radius: inherit; padding: 32px; }
.sub_vision .vision_cont .flex_des li div::before { content: ''; position: absolute; left: calc(100% + 25px); top: calc(50% - 1px); width: 60px; height: 1px; background: var(--border-color02); }
.sub_vision .vision_cont .flex_des li:last-child div::before { display: none; }
.sub_vision .vision_cont .flex_des dl { display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--point-white); width: 100%; height: 100%; border-radius: inherit; font-size: var(--title-20); box-sizing: border-box; border: 8px solid; padding-block: 20px; padding-inline: 30px; }
.sub_vision .vision_cont .flex_des h4 { font-weight: 700; font-size: 180%; letter-spacing: -0.03em; color: inherit; }
.sub_vision .vision_cont .flex_des h5 { color: inherit; font-weight: 500; font-size: 100%; letter-spacing: -0.03em; margin-bottom: 4px; }
.sub_vision .vision_cont .flex_des dd { position: relative; color: var(--black-color03); font-weight: 400; font-size: 100%; line-height: 1.5; letter-spacing: -0.03em; box-sizing: border-box; margin-top: clamp(10px, 1.2vw, 18px); padding-top: clamp(20px, 1.8vw, 26px); }
.sub_vision .vision_cont .flex_des dd::before { content: ''; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 40px; height: 1px; background: var(--border-color02); }

.sub_vision .vision_cont .flex_des li:nth-child(1) div { background: var(--point-bg01); color: var(--point-color02); }
.sub_vision .vision_cont .flex_des li:nth-child(1)::after { background: var(--point-color02); box-shadow: 0 0 0 6px rgba(0, 17, 48, 0.2); }
.sub_vision .vision_cont .flex_des li:nth-child(1) dl { border-color: var(--point-color02); box-shadow: var(--shadow-03); }
.sub_vision .vision_cont .flex_des li:nth-child(2) div { background: var(--point-bg02); color: var(--point-color01); }
.sub_vision .vision_cont .flex_des li:nth-child(2)::after { background: var(--point-color01); box-shadow: 0 0 0 6px rgba(88, 181, 48, 0.20); }
.sub_vision .vision_cont .flex_des li:nth-child(2)::before { background: var(--point-color01); box-shadow: 0 0 0 6px rgba(88, 181, 48, 0.20); }
.sub_vision .vision_cont .flex_des li:nth-child(2) dl { border-color: var(--point-color01); box-shadow: var(--shadow-04); }
.sub_vision .vision_cont .flex_des li:nth-child(3) div { background: var(--point-bg03); color: var(--point-color03); }
.sub_vision .vision_cont .flex_des li:nth-child(3)::after { display: none; }
.sub_vision .vision_cont .flex_des li:nth-child(3)::before { background: var(--point-color03); box-shadow: 0 0 0 6px rgba(235, 97, 29, 0.20); }
.sub_vision .vision_cont .flex_des li:nth-child(3) dl { border-color: var(--point-color03); box-shadow: var(--shadow-05); } 

@media (max-width: 1300px){
    .sub_vision .vision_cont .flex_des { gap: 70px; }
    .sub_vision .vision_cont .flex_des li::after { left: calc(100% + 12px); }
    .sub_vision .vision_cont .flex_des li::before { left: -17px; }
    .sub_vision .vision_cont .flex_des li div { padding: 24px; }
    .sub_vision .vision_cont .flex_des li div::before { left: calc(100% + 12px); width: 40px; }
    .sub_vision .vision_cont .flex_des dd { margin-top: 10px; padding-top: 20px; }
    
}

@media (max-width: 1140px){
    .sub_vision .vision_cont .flex_des { flex-direction: column; gap: 120px; align-items: center; }
    .sub_vision .vision_cont .flex_des li { max-width: 380px; }
    .sub_vision .vision_cont .flex_des li::after { left: 50%; top: calc(100% + 25px); translate: -50% 0; }
    .sub_vision .vision_cont .flex_des li::before { left: 50%; top: -29px; translate: -50% 0; }
    .sub_vision .vision_cont .flex_des li div::before { width: 1px; height: 60px; left: 50%; top: calc(100% + 25px); }
}

@media (max-width: 1023px){
    .sub_vision::before { height: clamp(400px, 58vw, 583px); top: clamp(-253px, -26.5vw, -130px); }
    .sub_vision .vision_cont .flex_des { gap: clamp(80px, 12vw, 120px); }
    .sub_vision .vision_cont .flex_des li div { padding: clamp(16px, 2.4vw, 24px); }
    .sub_vision .vision_cont .flex_des li div::before { height: clamp(30px, 6vw, 60px); }
    .sub_vision .vision_cont .flex_des dd { margin-top: clamp(10px, 1.5vw, 15px); padding-top: clamp(15px, 2vw, 20px); }
    .sub_vision .vision_cont .flex_des h4 { font-size: clamp(24px, 3.6vw, 36px); }
    
    .sub_vision .vision_cont .flex_des dl { padding-block: clamp(15px, 2vw, 20px); padding-inline: clamp(15px, 3vw, 30px); }
}

@media (max-width: 860px){
    .sub_vision .vision_cont .flex_des li { max-width: clamp(260px, 45vw, 380px); }
    .sub_vision .vision_cont .flex_des li::after { width: 8px; height: 8px; top: calc(100% + 20px); }
    .sub_vision .vision_cont .flex_des li::before { width: 8px; height: 8px; top: -24px }
    .sub_vision .vision_cont .flex_des li:nth-child(1)::after { box-shadow: 0 0 0 4px rgba(0, 17, 48, 0.2); }
    .sub_vision .vision_cont .flex_des li:nth-child(2)::after { box-shadow: 0 0 0 4px rgba(88, 181, 48, 0.20); }
    .sub_vision .vision_cont .flex_des li:nth-child(2)::before { box-shadow: 0 0 0 4px rgba(88, 181, 48, 0.20); }
    .sub_vision .vision_cont .flex_des li:nth-child(3)::before { box-shadow: 0 0 0 4px rgba(235, 97, 29, 0.20); }
}

@media (max-width: 479px){
    .sub_vision .vision_cont .flex_des li div { padding: 8px; }
}

/*───────────────────────────────────────────────────────────

    핵심 기술

───────────────────────────────────────────────────────────*/

.sub_skill .skill_cont .acc_wrap { box-sizing: border-box; padding-inline: 30px; padding-block: 29px; border: 1px dashed var(--border-color02); width: fit-content; margin-inline: auto; border-radius: var(--radius-130); }
.sub_skill .skill_cont .acc_wrap .flex_des { gap: 110px; }
.sub_skill .skill_cont .acc_wrap li { position: relative; aspect-ratio: auto 1; width: 200px; display: flex; justify-content: center; align-items: center; font-size: var(--title-20); border-radius: 100%; border: 1px solid var(--border-color01); background: var(--point-white); box-shadow: var(--shadow-06); box-sizing: border-box; }
.sub_skill .skill_cont .acc_wrap li:first-child::before { content: ''; position: absolute; left: calc(100% + 40px); top: 50%; translate: 0 -50%; width: 30px; height: 3px; background: var(--black-color03); }
.sub_skill .skill_cont .acc_wrap li:first-child::after { content: ''; position: absolute; left: calc(100% + 54px); top: 50%; translate: 0 -50%; width: 3px; height: 30px; background: var(--black-color03); }
.sub_skill .skill_cont .acc_wrap li span { font-size: 150%; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; color: var(--black-color06); }
.sub_skill .skill_cont .acc_wrap li span em { color: var(--point-color03); font-weight: inherit; }
.sub_skill .skill_cont .arw { max-width: 382px; margin-inline: auto; margin-block: 20px 60px; }
.sub_skill .skill_cont .flat_wrap { border-radius: var(--radius-10); overflow: clip; }
.sub_skill .skill_cont .flat_wrap .sub_title { text-align: center; font-size: var(--title-20); flex-direction: column; gap: 5px; background: var(--point-color03); padding-inline: 30px; padding-block: 31px 34px; box-sizing: border-box; color: var(--point-white); }
.sub_skill .skill_cont .flat_wrap .sub_title h4 { color: inherit; font-size: 150%; font-weight: 600; letter-spacing: -0.03em; }
.sub_skill .skill_cont .flat_wrap .sub_title p { color: inherit; font-size: 120%; font-weight: 500; letter-spacing: -0.03em; }
.sub_skill .skill_cont .flat_cont { box-sizing: border-box; padding: clamp(30px, 2.7vw, 50px); background: var(--point-bg04); }
.sub_skill .skill_cont .flat_cont > div { background: var(--point-white);  overflow: clip; border-radius: var(--radius-10); }
.sub_skill .skill_cont .flat_cont .cont_title { font-size: var(--title-20); text-align: center; color: var(--point-white); box-sizing: border-box; padding-block: 21px 22px; padding-inline: 30px; }
.sub_skill .skill_cont .flat_cont .cont_title h5 { font-size: 140%; font-weight: 500; line-height: 1.07; letter-spacing: -0.02em; }
.sub_skill .skill_cont .flat_cont .cont_title h5 small { font-size: 85%; }
.sub_skill .skill_cont .flat_cont .cont_box { box-sizing: border-box; padding-block: 30px 48px; padding-inline: 50px; text-align: center; font-size: var(--title-20); border-radius: 0 0 var(--radius-10) var(--radius-10); }
.sub_skill .skill_cont .flat_cont .cont_box p { color: var(--black-color03); font-weight: 500; font-size: 120%; line-height: 1.5; letter-spacing: -0.03em; }
.sub_skill .skill_cont .flat_cont .cont_box p em { font-weight: inherit; color: var(--point-color03); }
.sub_skill .skill_cont .table_wrap { margin-top: 28px; padding-top: 21px; box-sizing: border-box; border-top: 1px solid var(--border-color01); }
.sub_skill .skill_cont .table_wrap h6 { font-size: 150%; font-weight: 400; color: var(--black-color02); letter-spacing: -0.03em; }
.sub_skill .skill_cont .table_wrap h6 em { font-weight: 700; }
.sub_skill .skill_cont .table_wrap table { margin-top: 19px; box-sizing: border-box; border-top: 1px solid var(--black-color01); font-size: var(--title-20); }
.sub_skill .skill_cont .table_wrap table :where(th, td) { box-sizing: border-box; padding-inline: 15px; font-weight: 600; letter-spacing: -0.04em; border-bottom: 1px solid var(--border-color01); }
.sub_skill .skill_cont .table_wrap table :where(th:nth-child(1), td:nth-child(1)) { border-right: 1px solid var(--border-color01); }
.sub_skill .skill_cont .table_wrap table th { padding-block: 12px 11px; font-size: 100%; color: var(--black-color01); background: var(--gray-bg01); }
.sub_skill .skill_cont .table_wrap table td { padding-block: 13px; font-size: 90%; color: var(--black-color03); }
.sub_skill .skill_cont .table_wrap table td:nth-child(2) { font-weight: 400; color: var(--black-color05); }
.sub_skill .skill_cont .table_wrap table td em { color: var(--point-color03); font-weight: inherit; }
.sub_skill .skill_cont .table_wrap table td:nth-child(2) em { font-weight: 500; }

.sub_skill .skill_cont .flat_cont .cbt_box .cont_title { background: var(--point-color02); }
.sub_skill .skill_cont .flat_cont .cbt_box { border: 1px solid var(--point-color02); }
.sub_skill .skill_cont .flat_cont .hbt_box .cont_title { background: var(--point-color05); }
.sub_skill .skill_cont .flat_cont .hbt_box { border: 1px solid var(--point-color05); }

@media (max-width: 1023px) {
    .sub_skill .skill_cont .acc_wrap { padding-inline: clamp(20px, 3vw, 29px); padding-block: clamp(20px, 3vw, 30px); }
    .sub_skill .skill_cont .acc_wrap li { width: clamp(150px, 20vw, 200px); }
    .sub_skill .skill_cont .arw { max-width: clamp(200px, 38vw, 382px); margin-block: clamp(15px, 2vw, 20px) clamp(40px, 6vw, 60px); }
    .sub_skill .skill_cont .flat_wrap .sub_title { padding-inline: clamp(20px, 3vw, 30px); padding-block: clamp(20px, 3vw, 31px) clamp(20px, 3vw, 34px); }
    .sub_skill .skill_cont .flat_cont { flex-direction: column; padding: clamp(20px, 3vw, 30px); }
    .sub_skill .skill_cont .flat_cont .cont_title { padding-inline: clamp(20px, 3vw, 30px); padding-block: clamp(15px, 2vw, 21px) clamp(15px, 2vw, 22px); }
    .sub_skill .skill_cont .table_wrap { margin-top: clamp(20px, 3vw, 28px); padding-top: clamp(15px, 2vw, 21px); }
    .sub_skill .skill_cont .table_wrap table { margin-top: clamp(15px, 2vw, 19px); }
    .sub_skill .skill_cont .flat_cont .cont_box { padding-block: clamp(20px, 3vw, 30px) clamp(30px, 4vw, 48px); padding-inline: clamp(20px, 5vw, 50px); }
    .sub_skill .skill_cont .flat_cont .cont_box p { font-size: clamp(17px, 2.4vw, 24px); }
    .sub_skill .skill_cont .table_wrap table :where(th, td) { padding-inline: clamp(10px, 1.5vw, 15px); }
    .sub_skill .skill_cont .table_wrap table th { padding-block: clamp(7px, 1vw, 12px) clamp(7px, 1vw, 11px); }
    .sub_skill .skill_cont .table_wrap table td { padding-block: clamp(7px, 1vw, 13px); }
}

@media (max-width: 479px){
    .sub_skill .skill_cont .acc_wrap .flex_des { flex-direction: column; gap: 80px; }
    .sub_skill .skill_cont .acc_wrap li:first-child::before { left: 50%; top: calc(100% + 40px); translate: -50% -50%; width: 25px; height: 2px; }
    .sub_skill .skill_cont .acc_wrap li:first-child::after { left: 50%; top: calc(100% + 40px); translate: -50% -50%; height: 25px; width: 2px; }
}

@media (max-width: 400px) {

}

/*───────────────────────────────────────────────────────────

    파이프라인

───────────────────────────────────────────────────────────*/

.sub_pipe .pipe_pc .img_wrap { text-align: center; }
.sub_pipe .pipe_m { width: 100%; display: none; }
.sub_pipe .pipe_m .img_wrap { width: 100%; max-width: 640px; margin-inline: auto; }
.sub_pipe .pipe_list { margin-top: 80px; }
.sub_pipe .pipe_list li { display: flex; align-items: center; gap: 40px; box-sizing: border-box; padding: 30px; border: 1px solid var(--border-color01); border-radius: var(--radius-10); }
.sub_pipe .pipe_list li + li { margin-top: 30px; }
.sub_pipe .pipe_list li .ico_wrap { width: 120px; border-radius: 100%; flex-shrink: 0; }
.sub_pipe .pipe_list li .text_wrap { font-size: var(--title-20); }
.sub_pipe .pipe_list li .text_wrap h5 { font-size: 90%; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 12px; }
.sub_pipe .pipe_list li .text_wrap h4 { color: var(--black-color03); font-weight: 700; font-size: 130%; letter-spacing: -0.03em; line-height: 1.39; margin-bottom: 14px; }
.sub_pipe .pipe_list li .text_wrap p { color: var(--black-color03); font-weight: 400; font-size: 85%; letter-spacing: -0.03em; line-height: 1.64; }
.sub_pipe .pipe_list li .text_wrap p + p { margin-top: 3px; }

.sub_pipe .pipe_list li:nth-child(1) .ico_wrap { background: var(--point-color06); }
.sub_pipe .pipe_list li:nth-child(1) .text_wrap h5 { color: var(--point-color06); }
.sub_pipe .pipe_list li:nth-child(2) .ico_wrap { background: var(--point-color07); }
.sub_pipe .pipe_list li:nth-child(2) .text_wrap h5 { color: var(--point-color07); }
.sub_pipe .pipe_list li:nth-child(3) .ico_wrap { background: var(--point-color08); }
.sub_pipe .pipe_list li:nth-child(3) .text_wrap h5 { color: var(--point-color08); }
.sub_pipe .pipe_list li:nth-child(4) .ico_wrap { background: var(--point-color09); }
.sub_pipe .pipe_list li:nth-child(4) .text_wrap h5 { color: var(--point-color09); }
.sub_pipe .pipe_list li:nth-child(5) .ico_wrap { background: var(--point-color10); }
.sub_pipe .pipe_list li:nth-child(5) .text_wrap h5 { color: var(--point-color10); }
.sub_pipe .pipe_list li:nth-child(6) .ico_wrap { background: var(--point-color11); }
.sub_pipe .pipe_list li:nth-child(6) .text_wrap h5 { color: var(--point-color11); }
.sub_pipe .pipe_list li:nth-child(7) .ico_wrap { background: var(--point-color12); }
.sub_pipe .pipe_list li:nth-child(7) .text_wrap h5 { color: var(--point-color12); }

@media (max-width: 1023px){
    .sub_pipe .pipe_pc { display: none; }
    .sub_pipe .pipe_m { display: block; }

    .sub_pipe .pipe_list { margin-top: clamp(40px, 8vw, 80px); }
    .sub_pipe .pipe_list li { padding: clamp(20px, 3vw, 30px); gap: clamp(20px, 4vw, 40px); }
    .sub_pipe .pipe_list li .ico_wrap { width: clamp(80px, 12vw, 120px); }
    .sub_pipe .pipe_list li .text_wrap h5 { margin-bottom: clamp(8px, 1.2vw, 12px); }
    .sub_pipe .pipe_list li .text_wrap h4 { margin-bottom: clamp(10px, 1.4vw, 14px); font-size: clamp(20px, 2.6vw, 26px) }
    .sub_pipe .pipe_list li + li { margin-top: clamp(15px, 3vw, 30px); }
}

@media (max-width: 375px){
    .sub_pipe .pipe_list li { flex-direction: column; text-align: center; }
}

/*───────────────────────────────────────────────────────────

    오시는길

───────────────────────────────────────────────────────────*/

.sub_location .map_wrap { width: 100%; height: 620px; border-radius: var(--radius-10); overflow: clip; }
.sub_location .flex_des { display: flex; margin-top: 61px; }
.sub_location .office_title { width: 23.19%; box-sizing: border-box; font-size: var(--title-20); padding-right: 20px;  }
.sub_location .office_title .img_wrap { max-width: 144px; margin-top: -1px; }
.sub_location .office_info { width: 76.81%; }
.sub_location .office_info li + li { margin-top: 38px; padding-top: 40px; border-top: 1px solid var(--border-color01); }
.sub_location .office_info dl { display: flex; font-size: var(--title-20); }
.sub_location .office_info dl dt { color: var(--black-color02); font-family: var(--font-type02); font-weight: 500; font-size: 100%;  letter-spacing: -0.01em; width: 142px; box-sizing: border-box; padding-right: 20px; translate: 0 -1px; flex-shrink: 0; }
.sub_location .office_info dl dd { width: calc(100% - 142px); color: var(--black-color05); font-weight: 400; font-size: 90%; letter-spacing: -0.03em; font-family: var(--font-type02); translate: 0 1px; }
.sub_location .office_info li:nth-child(1) dl dd { font-size: 95%; }

@media (max-width: 1023px){
    .sub_location .map_wrap { height: clamp(300px, 60vw, 620px); }
    .sub_location .flex_des { margin-top: clamp(30px, 6vw, 61px); }
    .sub_location .office_info li + li { margin-top: clamp(20px, 4vw, 38px); padding-top: clamp(20px, 4vw, 40px); }
}

@media (max-width: 860px){
    .sub_location .office_info dl dt { width: 128px; }
    .sub_location .office_info dl dd { width: calc(100% - 128px); }
}

@media (max-width: 640px){
    .sub_location .office_title .img_wrap { max-width: 120px; }
    .sub_location .flex_des { flex-direction: column; gap: 30px; }
    .sub_location .office_title { width: 100%; padding-right: 0; }
    .sub_location .office_info { width: 100%; }
    .sub_location .office_info dl dt { width: 110px; }
    .sub_location .office_info dl dd { width: calc(100% - 110px); }
}

@media (max-width: 479px){
    .sub_location .flex_des { gap: 20px; }
    .sub_location .office_info dl { flex-direction: column; gap: 12px; }
    .sub_location .office_info dl dt { width: 100%; padding-right: 0; }
    .sub_location .office_info dl dd { width: 100%; }
}



/*───────────────────────────────────────────────────────────

    일반 게시판

───────────────────────────────────────────────────────────*/


#wrap :where(select, input:where([type="text"], [type="password"], [type="number"], [type="date"])) { height: 60px; color: var(--black-color02); font-size: var(--title-18); font-weight: 400; outline: none; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-inline: 20px 23px; letter-spacing: -0.03em; margin: 0; border: 0; border: 1px solid var(--border-color01); border-radius: var(--radius-04); transition: all 0.4s; }
#wrap input:where([type="text"], [type="password"], [type="number"], [type="date"])::placeholder { color: var(--black-color06); font-weight: 400;  }

#wrap .board_search { line-height: 1.3; margin: 0; text-align: right; font-size: 0; width: 100%; box-sizing: border-box; padding: 0; background: var(--trans-color); }
#wrap .board_search .bbs_search { float: unset; }
#wrap .board_search_wrap { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
#wrap .board_search .board_search_sel { display: inline-flex; gap: 10px; width: auto; margin-bottom: 0; }
#wrap .board_search select { width: 180px; padding-inline: 23px 40px; border-radius: var(--radius-06); margin: 0; background: var(--point-white) url('../images/sub/ico_sel_arw.svg') no-repeat center right 22px; appearance: none; cursor: pointer; background-size: 14px 8px;  }
#wrap .board_search .inp_custom { position: relative; width: calc(100% - 190px); max-width: 440px; }
#wrap .board_search .inp_custom input[type="text"] { width: 100%;  box-sizing: border-box; margin: 0; border-radius: var(--radius-06); padding-inline: 23px 65px ; }
#wrap .board_search .btn_search { position: absolute; right: 0; top: 0; width: 60px; height: 60px; appearance: none; border: none; font-size: 0; background: url('../images//sub/ico_search.svg') no-repeat 16px center; background-size: 24px 24px; }

#wrap .bbs_list { font-size: var(--title-20); border-top: 1px solid var(--black-color03); border-bottom: 0; }
#wrap .bbs_list th {  color: var(--black-color01); font-size: 90%; font-weight: 500; padding-block: 26px; box-sizing: border-box; border-bottom: 1px solid var(--border-color01); letter-spacing: -0.04em; }
#wrap .bbs_list td { padding-inline: 12px; font-size: var(--title-18); line-height: 1.3; font-weight: 400; color: var(--black-color05); text-align: center; vertical-align: middle; padding-block: 25px; letter-spacing: -0.04em; box-sizing: border-box; border-bottom: 1px solid var(--border-color01); }
#wrap .bbs_list td.left { text-align: left; padding-left: 0; color: var(--black-color03); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#wrap .bbs_list td.left a { display: flex; align-items: center; gap: 11px; }
#wrap .bbs_list td.left a span { display: inline-block; max-width: calc(100% - 30px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

#wrap .bbs_list tr.board_notice td { background: var(--point-white); }

#wrap .paging { display: flex; gap: 5px; justify-content: center; align-items: center; margin: 0; margin-top: 60px; min-height: unset; padding-top: 0; line-height: 1.3; }
#wrap .paging a { display: inline-flex; align-items: center; justify-content: center; font-size: var(--title-18); font-weight: 400; color: var(--black-color06); padding: 0; border: 0; box-sizing: border-box; min-width: 40px; min-height: 40px; width: auto; height: auto; line-height: 1; text-align: center; vertical-align: top; font-family: var(--font-type04); margin: 0; padding-right: 1px; padding-top: 1px; }
#wrap .paging :is(.on a, a.on) { border-radius: 100%; background: var(--black-color00); color: var(--point-white); font-weight: 600; }
#wrap .paging .arrow a {font-size:0; min-width:36px; background:no-repeat center; }
#wrap .paging .arrow a img { display: none; }
#wrap .paging .arrow.first a {background-image:url("../images/sub/ico_pagi_first.svg");}
#wrap .paging .arrow.prev a {background-image:url("../images/sub/ico_pagi_prev.svg"); margin-right:0;}
#wrap .paging .arrow.next a {background-image:url("../images/sub/ico_pagi_next.svg"); margin-left:0;}
#wrap .paging .arrow.last a {background-image:url("../images/sub/ico_pagi_last.svg");}

@media (max-width: 1023px){
    #wrap .bbs_list colgroup col:nth-child(1) { width: 100px; }
    #wrap .bbs_list colgroup col:nth-child(3) { width: 150px; }
    #wrap .bbs_list colgroup col:nth-child(4) { width: 100px; }

    #wrap .board_search_wrap { margin-bottom: clamp(30px, 4vw, 40px); }

    #wrap .board_search select { width: clamp(120px, 18vw, 180px); background-position: center right clamp(15px, 2.2vw, 22px); padding-inline: clamp(15px, 2.3vw, 23px) clamp(30px, 4vw, 40px); }
    #wrap :where(select, input:where([type="text"], [type="password"], [type="number"], [type="date"])) { padding-inline: clamp(15px, 2vw, 20px) clamp(15px, 2vw, 23px); height: clamp(45px, 7vw, 60px); }
    #wrap .board_search .inp_custom { max-width: clamp(300px, 44vw, 440px); width: calc(100% - (clamp(120px, 18vw, 180px) + 10px)); }
    #wrap .board_search .inp_custom input[type="text"] { padding-inline: clamp(15px, 2.3vw, 23px) clamp(35px, 6.5vw, 65px); }
    #wrap .board_search .btn_search { width: clamp(45px, 6vw, 60px); height: clamp(45px, 6vw, 60px); background-size: clamp(16px, 2.4vw, 24px) clamp(16px, 2.4vw, 24px); }

    #wrap .bbs_list th { padding-block: clamp(15px, 2vw, 26px); }
    #wrap .bbs_list td { padding-block: clamp(15px, 2vw, 25px); }
    #wrap .bbs_list td.left a .board_ico img { width: clamp(13px, 1.6vw, 16px); }

    #wrap .paging { margin-top: clamp(40px, 6vw, 60px); }
    #wrap .paging a { min-width: clamp(30px, 4vw, 40px); min-height: clamp(30px, 4vw, 40px); }
    #wrap .paging .arrow a { min-width: clamp(30px, 4vw, 36px); }
}

@media (max-width: 860px){
    #wrap .bbs_list colgroup col:nth-child(1) { width: 80px; }
    #wrap .bbs_list colgroup col:nth-child(3) { width: 120px; }
    #wrap .bbs_list colgroup col:nth-child(4) { width: 80px; }

}

@media (max-width: 640px){
    #wrap .bbs_list colgroup col:nth-child(1) { width: 60px; }
    #wrap .bbs_list colgroup col:nth-child(3) { width: 100px; }
    #wrap .bbs_list:not(:has(.no_data)) :where(colgroup col:nth-child(4), table.bbs_list th:nth-child(4), table.bbs_list td:nth-child(4)) { display: none; }

}

@media (max-width: 479px){
    #wrap .bbs_list:not(:has(.no_data)) :where(colgroup col:nth-child(3), table.bbs_list th:nth-child(3), table.bbs_list td:nth-child(3)) { display: none; }
}

@media (max-width: 360px){
    #wrap .board_search_wrap { flex-direction: column; }
    #wrap .board_search select { width: 100%; }
    #wrap .board_search .inp_custom { width: 100%; max-width: 100%; }
    #wrap .bbs_list colgroup col:nth-child(1) { width: 50px; }
}


/*───────────────────────────────────────────────────────────

    게시판 뷰 페이지

───────────────────────────────────────────────────────────*/
#wrap .bbs_view { margin-top: 0; }
#wrap .bbs_view .view_tit { padding: 0; border-bottom: 1px solid var(--border-color01) ; border-top: 1px solid var(--black-color03); margin: 0 auto; width: 100%; box-sizing: border-box; text-align: left; vertical-align: top; font-size: 0; font-size: var(--title-20); padding-block: 29px; padding-inline: 20px; background: var(--point-white); }
#wrap .bbs_view h4 { border-bottom: 0; padding: 0; font-size: 110%; font-weight: 500; color: var(--black-color03); letter-spacing: -0.03em;  }
#wrap .bbs_view .view_tit ul { display: flex; margin-top: 22px; gap: 12px 0; flex-wrap: wrap; }
#wrap .bbs_view .view_tit li { display: flex; align-items: baseline; position: relative; font-size: 80%; line-height: inherit; color: var(--black-color08); text-align: left; letter-spacing: -0.03em; }
#wrap .bbs_view .view_tit li span { font-size: inherit; font-weight: inherit; color: inherit; }
#wrap .bbs_view .view_tit li:has(+ li) span::after { content: ''; display: inline-block; width: 1px; height: 12px; background: var(--border-color02); margin-inline: 17px 16px; }

#wrap .bbs_view .view_cont { position: relative; padding-block: 33px 30px; padding-inline: 20px; color: var(--black-color06); font-size: var(--title-18); min-height: 287px; margin: 0 auto; width: 100%; box-sizing: border-box; text-align: left; vertical-align: top; word-break: keep-all; letter-spacing: -0.03em; border-bottom: 1px solid var(--border-color01); z-index: 2; }
#wrap .bbs_view .view_cont .thumb_img_wrap { padding-bottom: 0; text-align: left; margin-top: 29px; border-radius: 10px; overflow: hidden; width: fit-content; }

#wrap .btn_wrap { padding: 0; padding-top: 0; margin-top: 60px; font-size: 0; vertical-align: top; display: flex; justify-content: center; }

#wrap .sub_board .bbs_view .extra_editor_wrap { display: table; table-layout: fixed; border-collapse: collapse; width: 100%; border: 0; border-radius: 4px; box-sizing: border-box; border-bottom: 1px solid var(--border-color01); }
#wrap .sub_board .bbs_view .extra_editor_wrap h4, #wrap .sub_board .bbs_view .extra_editor_wrap .extra_cont { padding-block: 24px 20px; display: table-cell; box-sizing: border-box; vertical-align: middle; text-align: left; border: 0; }
#wrap .sub_board .bbs_view .extra_editor_wrap h4 { width: 180px; background: none; color: var(--black-color03); font-size: var(--title-18); font-weight: 500; position: relative; z-index: 1; letter-spacing: -0.03em; background: var(--gray-bg01); box-sizing: border-box; padding-inline: 29px; }
#wrap .sub_board .bbs_view .extra_editor_wrap .extra_cont { width: calc(100% - 180px); padding-inline: 30px; }
#wrap .sub_board .bbs_view .extra_editor_wrap .extra_cont span { font-size: var(--title-17); font-weight: 400; color: var(--black-color07) !important; vertical-align: middle; display: block; letter-spacing: -0.03em; font-family: var(--font-type03);  }
#wrap .sub_board .bbs_view .extra_editor_wrap .extra_cont span a { font-size: inherit; color: inherit !important; font-weight: inherit; }
#wrap .sub_board .bbs_view .extra_editor_wrap .extra_cont span + span { margin-top: 12px; }


@media (max-width: 1023px) {
    #wrap .bbs_view .view_tit { padding-block: clamp(20px, 3vw, 29px); padding-inline: clamp(15px, 2vw, 20px); }
    #wrap .bbs_view .view_tit ul { margin-top: clamp(15px, 2vw, 22px); }
    #wrap .bbs_view .view_tit li:has(+ li) span::after { margin-inline: clamp(12px, 1.6vw, 17px) clamp(12px, 1.6vw, 16px); height: clamp(10px, 1.2vw, 12px); }
    #wrap .bbs_view .view_cont { padding-block: clamp(20px, 3vw, 33px) clamp(20px, 3vw, 30px); padding-inline: clamp(15px, 2vw, 20px); }

    #wrap .bbs_view .view_cont .thumb_img_wrap { margin-top: clamp(20px, 3vw, 29px); }

    #wrap .sub_board .bbs_view .extra_editor_wrap h4, #wrap .sub_board .bbs_view .extra_editor_wrap div.extra_cont { padding-block: clamp(15px, 2vw, 24px) clamp(15px, 2vw, 20px); }
    #wrap .sub_board .bbs_view .extra_editor_wrap h4 { width: clamp(100px, 18vw, 180px); padding-inline: clamp(20px, 3vw, 29px); }
    #wrap .sub_board .bbs_view .extra_editor_wrap .extra_cont { width: calc(100% - clamp(100px, 18vw, 180px)); padding-inline: clamp(20px, 3vw, 30px); }
    #wrap .btn_wrap { margin-top: clamp(40px, 6vw, 60px); }
}

@media (max-width: 640px) {
    #wrap .bbs_view .view_cont { min-height: 200px; }
}

/*───────────────────────────────────────────────────────────

    갤러리 게시판

───────────────────────────────────────────────────────────*/

#wrap .sub_board ul.bbs_gallery { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 30px; width: 100%; }
#wrap .sub_board ul.bbs_gallery:after { display: none; }
#wrap ul.bbs_gallery li { position: relative; display: flex; flex-direction: column; width: calc(100% / 3 - 20px); margin: 0; float: unset; font-size: var(--title-20); border-radius: var(--radius-10); overflow: clip; box-shadow: inset 0 0 0 1px var(--border-color01); }
#wrap ul.bbs_gallery li::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--point-color03); box-sizing: border-box; border-radius: inherit; opacity: 0; transition: all 0.4s; }
#wrap ul.bbs_gallery li .thumb { width: 100%; aspect-ratio: auto 1.57; padding: 0; text-align: center; height: auto; position: relative; border: 0; overflow: hidden; vertical-align: top; font-size: 0; flex-shrink: 0; }
#wrap ul.bbs_gallery li .thumb:has(.no_img) { border: 1px solid var(--border-color01); border-top-left-radius: inherit; border-top-right-radius: inherit; }
#wrap ul.bbs_gallery li .thumb img { position: static; transform: none; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s; }
#wrap ul.bbs_gallery li .text_wrap { box-sizing: border-box; padding-block: clamp(20px, 1.9vw, 27px) clamp(20px, 2.1vw, 33px); padding-inline: clamp(20px, 2vw, 30px); display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 38px; }
#wrap ul.bbs_gallery li dl { padding: 0; font-size: var(--title-20); display: flex; flex-direction: column; gap: 17px; }
#wrap ul.bbs_gallery li dt { font-size: 110%; color: var(--black-color00); font-weight: 600; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#wrap ul.bbs_gallery li dd { color: var(--black-color05); font-size: 85%; font-weight: 400; line-height: 1.64; letter-spacing: -0.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; }
#wrap ul.bbs_gallery li p { color: var(--black-color05); font-size: 80%; font-weight: 300; letter-spacing: -0.02em; line-height: 1.3; text-align: left; margin: 0; }

@media (hover: hover) and (pointer: fine) {
    #wrap ul.bbs_gallery li:hover .thumb img { scale: 1.1; }
    #wrap ul.bbs_gallery li:hover::after { opacity: 1; }
}

@media (max-width: 1023px) {
    #wrap .sub_board ul.bbs_gallery { gap: clamp(15px, 3vw, 30px); }
    #wrap ul.bbs_gallery li { width: calc(100% / 2 - clamp(15px, 3vw, 30px) / 2) }
    #wrap ul.bbs_gallery li .text_wrap { gap: clamp(25px, 4vw, 38px); }
    #wrap ul.bbs_gallery li dl { gap: clamp(10px, 1.7vw, 17px); }
}

@media (max-width: 479px){
    #wrap ul.bbs_gallery li { width: 100%; }
}


/*───────────────────────────────────────────────────────────

    게시판 쓰기

───────────────────────────────────────────────────────────*/

#wrap .bbs_write { position: relative; display: block; width: 100%; box-sizing: border-box; border-top: 1px solid var(--black-color03); padding-top: 40px; }
#wrap .bbs_write tbody { display: flex; gap: 20px clamp(40px, 4.2vw, 80px); flex-wrap: wrap; }
#wrap .bbs_write tr { width: calc(100% / 2 - clamp(40px, 4.2vw, 80px) / 2); display: flex; align-items: center; gap: 6px 0; font-size: var(--title-20); }
#wrap .bbs_write tr:has([name="content"]) { align-items: flex-start; }
#wrap .bbs_write tr:has([name="content"], [name="captcha"]) { width: 100%; }
#wrap .bbs_write :where(th, td) { position: relative; display: block; width: 100%; box-sizing: border-box; background: none; border: 0; padding: 0;  }
#wrap .bbs_write th { width: clamp(140px, 10vw, 150px); flex-shrink: 0; color: var(--black-color03); font-size: 100%; font-weight: 500; letter-spacing: -0.03em; padding-right: 20px; }
#wrap .bbs_write tr:has([name="content"]) th { padding-top: 9px; }
#wrap .bbs_write tr:has([name="content"]) textarea { min-width: auto; height: 200px; border-radius: var(--radius-04); border: 1px solid var(--border-color01);  color: var(--black-color02); box-sizing: border-box; padding-block: 23px; padding-inline: 19px; letter-spacing: -0.03em; }
#wrap .bbs_write label { font-size: inherit; color: inherit; font-weight: inherit; }
#wrap .bbs_write label em { color: var(--point-color03); font-weight: inherit; }
#wrap .bbs_write td { width: 100%; font-size: 90%; font-weight: 400; color: var(--black-color03); letter-spacing: -0.03em; line-height: inherit; }
#wrap .bbs_write td:has([name="captcha"]) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#wrap .bbs_write input[name="captcha"] { max-width: 300px; }
#wrap .bbs_write :where([type="text"], [type="password"], textarea) { width: 100%; line-height: inherit; }
#wrap .bbs_write .captcha_wrap { display: flex; gap: 10px; padding: 10px; width: 225px; box-shadow: inset 0 0 0 1px var(--border-color01); border-radius: var(--radius-04); }
#wrap .bbs_write #captcha_box { display: block; width: 100%; overflow: hidden; margin: 0; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: inherit; }
#wrap .bbs_write #captcha_box img { width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; max-width: none; max-height: none; margin: -1px 0 0 -1px; }
#wrap .bbs_write #refreshCode { width: 40px; aspect-ratio: auto 1; border: 1px solid var(--border-color01); font-size: 0; background: var(--point-white) url('../images/sub/ico_reset.svg') no-repeat center / 16px auto; flex-shrink: 0; cursor: pointer; box-sizing: border-box; border-radius:inherit; }

#wrap .policy_wrap { margin-top: 40px; box-sizing: border-box; padding-top: 41px; border-top: 1px solid var(--border-color01); }
#wrap .policy_wrap .area_box { width: 100%; margin-top: 20px; padding-inline: 9px; box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: var(--radius-04); }
#wrap .policy_wrap .area_box textarea { width: 100%; height: 158px; padding-block: 20px 16px; padding-inline: 10px; box-sizing: border-box; color: var(--black-color07); font-size: var(--title-16); line-height: 1.62; letter-spacing: 0; border: none; resize: none; background: var(--trans-color); outline: none; }

#wrap .policy_wrap .area_box textarea::-webkit-scrollbar { width: 4px;}
#wrap .policy_wrap .area_box textarea::-webkit-scrollbar-thumb {background: var(--black-color10); border-radius: 2px; }
#wrap .policy_wrap .area_box textarea::-webkit-scrollbar-track {border-radius: 10px;background:var(--border-color01); margin-block: 10px; }

#wrap label:has([type="checkbox"]) { display: flex; width: fit-content; align-items: flex-start; gap: 11px; font-size: var(--title-18); font-weight: 500; letter-spacing: 0; cursor: pointer; color: var(--black-color03); }
#wrap label:has([type="checkbox"]) strong { color: var(--point-color03); font-weight: inherit; display: contents; }
#wrap label [type="checkbox"] { position: relative; display: flex; width: 25px; height: 25px; border: 1px solid var(--border-color01); background: var(--point-white); appearance: none; flex-shrink: 0; transition: all 0.4s; cursor: pointer; border-radius: var(--radius-04); }
#wrap label [type="checkbox"]::before { content: ''; position: absolute; inset: 0; background: url('../images/sub/ico_chk.svg') no-repeat center / 12px auto; transition: inherit; }

#wrap label [type="checkbox"]:checked { background: var(--black-color02); border: 1px solid var(--black-color02); }
#wrap label [type="checkbox"]:checked::before { filter: var(--filter-white); }

#wrap:not(:has(.inp_custom)) :where([type="text"], [type="password"], [type="number"], [type="date"]):focus { border-color: var(--black-color01); }
#wrap .bbs_write :where([type="text"], [type="password"], [type="number"], [type="date"], textarea)::placeholder { color: var(--black-color08); }

.officer_wrap { display: flex; flex-wrap: nowrap; width: 100%; gap: 20px 32px; margin-top: 84px; }
.officer_wrap .officer { width: 100%; box-sizing: border-box; padding-block: clamp(20px, 2.2vw, 40px) clamp(25px, 2.7vw, 49px); padding-inline: clamp(25px, 2.7vw, 50px); background: var(--gray-bg01); border-radius: var(--radius-10); font-size: var(--title-20); }
.officer_wrap .officer h4 { display: flex; align-items: baseline; flex-wrap: wrap; color: var(--black-color02); font-size: 150%; font-weight: 700; letter-spacing: -0.03em; gap: 15px 0; }
.officer_wrap .officer h4 span { font-size: inherit; font-weight: inherit; }
.officer_wrap .officer h4 span::after { content: ''; display: inline-block; width: 1px; height: 18px; background: var(--border-color02); margin-inline: clamp(12px, 1.4vw, 25px) clamp(12px, 1.4vw, 24px); }
.officer_wrap .officer h4 small { display: flex; align-items: baseline; position: relative; font-size: 60%; font-weight: 400; color: var(--black-color03); letter-spacing: -0.03em; translate: 0 -4px; }
.officer_wrap .officer .contact_list { margin-top: 29px; display: flex; flex-direction: column; gap: 20px; }
.officer_wrap .officer dl { display: flex; align-items: baseline; gap: 15px 0; color: var(--black-color03); }
.officer_wrap .officer dt { display: flex; align-items: baseline; gap: 20px; font-weight: 500; font-size: 90%; letter-spacing: -0.03em; width: 136px; box-sizing: border-box; padding-right: 10px; flex-shrink: 0; }
.officer_wrap .officer dt .ico { display: flex; justify-content: center; align-items: center; width: 36px; aspect-ratio: auto 1; background: var(--point-white); border-radius: 100%; flex-shrink: 0; translate: 0 1px; }
.officer_wrap .officer dt .ico img { max-width: calc(100% - 15px); max-height: calc(100% - 15px); }
.officer_wrap .officer dd { font-size: 90%; font-weight: 400; letter-spacing: -0.03em; width: 100%; }

@media (max-width: 1023px) {
    #wrap .bbs_write { padding-top: clamp(30px, 4vw, 40px); }
    #wrap .bbs_write tr { width: 100%; }
    #wrap .bbs_write th { width: clamp(130px, 14vw, 140px); }

    #wrap .bbs_write input[name="captcha"] { max-width: clamp(220px, 30vw, 300px); }
    #wrap .bbs_write tr:has([name="content"]) textarea { height: clamp(150px, 20vw, 200px); padding-block: clamp(15px, 2vw, 23px); padding-inline: clamp(15px, 2vw, 19px); }

    #wrap .policy_wrap { margin-top: clamp(30px, 4vw, 40px); padding-top: clamp(30px, 4vw, 41px); }
    #wrap .policy_wrap .area_box { margin-top: clamp(15px, 2vw, 20px); }
    #wrap .policy_wrap .area_box textarea { height: clamp(135px, 16vw, 158px); }

    #wrap label:has([type="checkbox"]) { gap: clamp(9px, 1.3vw, 11px); }
    #wrap label [type="checkbox"] { width: clamp(20px, 2.5vw, 25px); height: clamp(20px, 2.5vw, 25px); }

    .officer_wrap { margin-top: clamp(40px, 8vw, 84px); flex-direction: column; }
    .officer_wrap .officer h4 span::after { margin-inline: clamp(12px, 2.5vw, 25px) clamp(12px, 2.4vw, 24px); }
    .officer_wrap .officer .contact_list { margin-top: clamp(20px, 3vw, 29px); gap: clamp(15px, 2vw, 20px); }
    .officer_wrap .officer dt { width: clamp(125px, 13vw, 136px); gap: clamp(15px, 2vw, 20px); }
    .officer_wrap .officer dt .ico { width: clamp(26px, 3.6vw, 36px); }
}

@media (max-width: 640px) {
    #wrap .bbs_write tr { flex-wrap: wrap; }
    #wrap .bbs_write th { width: 100%; }
    #wrap .bbs_write input[name="captcha"] { max-width: 100%; }
}

@media (max-width: 479px) {
    .officer_wrap .officer h4 span { width: 100%; }
    .officer_wrap .officer h4 span::after { display: none; }
    .officer_wrap .officer h4 small { width: 100%; }
}

@media (max-width: 385px) { 
    .officer_wrap .officer dl { flex-direction: column; }
    .officer_wrap .officer dt { width: 100%; padding-right: 0; }
}


/*───────────────────────────────────────────────────────────

    Our people

───────────────────────────────────────────────────────────*/

#wrap .sub_cate_wrap { display: none; }
#wrap .sub_list .list_array { display: none; }
#wrap .sub_list .list_Galleryform > ul { display: flex; flex-direction: column; gap: 140px; }
#wrap .sub_list .list_Galleryform > ul > li { width: 100%; float: unset; margin: 0; box-sizing: border-box; position: relative; z-index: 1; display: flex; }
#wrap .sub_list .list_Galleryform > ul > li .img_wrap { max-width: 380px; width: 27.53%; aspect-ratio: auto 0.79; border-radius: var(--radius-10); overflow: clip; }
#wrap .sub_list .list_Galleryform > ul > li .img_wrap img { width: 100%; height: 100%; object-fit: cover; }
#wrap .sub_list .list_Galleryform > ul > li .text_wrap { width: 72.47%; box-sizing: border-box; padding-left: 100px; font-size: var(--title-20); box-sizing: border-box; padding-top: 60px; }
#wrap .sub_list .list_Galleryform > ul > li .text_wrap h4 { position: relative; display: flex; align-items: center; gap: 16px; color: var(--black-color00); font-weight: 600; font-size: 210%; }
#wrap .sub_list .list_Galleryform > ul > li .text_wrap h4::before { content: ''; width: 100px; height: 2px; position: absolute; left: -130px; top: 50%; translate: 0 -50%; background: var(--point-color03); }
#wrap .sub_list .list_Galleryform > ul > li .text_wrap h4 small { color: var(--point-color03); font-size: 47.6%; font-weight: 500; }
#wrap .sub_list .list_Galleryform > ul > li .text_wrap h5 { color: var(--black-color00); font-weight: 500; font-size: 120%; letter-spacing: -0.03em; margin-top: 30px; }
#wrap .sub_list .list_Galleryform > ul > li .bio { color: var(--black-color03); font-size: 90%; font-weight: 400; line-height: 1.11; letter-spacing: -0.03em; margin-top: 30px; text-align: left; }
#wrap .sub_list .list_Galleryform > ul > li .bio:not(:has(ul)) { column-gap: 0; column-count: 2; }
#wrap .sub_list .list_Galleryform > ul > li .bio:not(:has(ul)) * { break-inside: avoid; margin-bottom: 20px; width: 100%; box-sizing: border-box; padding-right: 20px; }
#wrap .sub_list .list_Galleryform > ul > li .bio ul { column-gap: 0; column-count: 2; }
#wrap .sub_list .list_Galleryform > ul > li .bio ul li { position: relative; break-inside: avoid; margin-bottom: 20px; width: 100%; box-sizing: border-box; padding-right: 20px; }
#wrap .sub_list .list_Galleryform > ul > li .bio *:has(br:only-child) { display: none; }
#wrap .sub_list .list_Galleryform > ul > li .bio *:has(img) { display: none; }
#wrap .sub_list .list_Galleryform > ul > li .bio * { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; text-align: left !important; background: none !important; }
#wrap .sub_list .list_Galleryform > ul > li .mail { position: relative; display: flex; align-items: center; gap: 14px; box-sizing: border-box; padding-block: 20px 19px; padding-inline: 20px; border-radius: var(--radius-10); border: 1px solid var(--border-color01); max-width: 355px; margin-top: 30px; background: var(--point-white); transition: all 0.4s; }
#wrap .sub_list .list_Galleryform > ul > li .mail .ico { display: flex; align-items: center; flex-shrink: 0;  }
#wrap .sub_list .list_Galleryform > ul > li .mail .ico::before { content: ''; display: block; width: 19px; height: 12px; background: url('../images/sub/ico_goods_mail.svg') no-repeat center / 19px auto; transition: all 0.4s; }
#wrap .sub_list .list_Galleryform > ul > li .mail span { color: var(--black-color03); font-size: 90%; font-weight: 400; line-height: 1.11; letter-spacing: -0.03em; }
#wrap .sub_list .list_Galleryform > ul > li .mail a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#wrap .sub_list .list_Galleryform > ul > li:nth-child(4n+1) { clear: none; }
#wrap .sub_list .list_Galleryform > ul:after { display: none; }

#wrap .sub_list .list_Galleryform .ceo_list { padding-bottom: 140px; }
#wrap .sub_list .list_Galleryform .ceo_list::before { content: ''; position: absolute; width: 200vw; height: 360px; background: var(--gray-bg01); left: -100vw; bottom: 0; z-index: -1; }

@media (hover: hover) and (pointer: fine) {
    #wrap .sub_list .list_Galleryform > ul > li .mail:hover { border-color: var(--point-color03); }
    #wrap .sub_list .list_Galleryform > ul > li .mail:hover .ico::before { background-image: url('../images/sub/ico_goods_mail_on.svg'); }
}

@media (max-width: 1023px) {
    #wrap .sub_list .list_Galleryform > ul { gap: clamp(70px, 14vw, 140px); }
    #wrap .sub_list .list_Galleryform > ul > li { flex-direction: column; }
    #wrap .sub_list .list_Galleryform > ul > li .img_wrap { width: 100%; }
    #wrap .sub_list .list_Galleryform > ul > li .text_wrap { width: 100%; padding-left: 0; padding-top: clamp(40px, 6vw, 60px); }
    #wrap .sub_list .list_Galleryform > ul > li .text_wrap h4::before { display: none; }
    #wrap .sub_list .list_Galleryform > ul > li .text_wrap h5 { margin-top: clamp(20px, 3vw, 30px); }
    #wrap .sub_list .list_Galleryform > ul > li .bio { margin-top: clamp(20px, 3vw, 30px); }
    #wrap .sub_list .list_Galleryform > ul > li .bio:not(:has(ul)) * { margin-bottom: clamp(15px, 2vw, 20px); }
    #wrap .sub_list .list_Galleryform > ul > li .mail { margin-top: clamp(15px, 3vw, 30px); padding-inline: clamp(15px, 2vw, 20px); padding-block: clamp(15px, 2vw, 20px) clamp(15px, 2vw, 19px); max-width: 100%; width: fit-content; }

    #wrap .sub_list .list_Galleryform > ul > li .bio ul li { margin-bottom: clamp(15px, 2vw, 20px); }

    #wrap .sub_list .list_Galleryform .ceo_list { padding-bottom: clamp(70px, 14vw, 140px); }
    #wrap .sub_list .list_Galleryform .ceo_list::before { height: 660px; }
}

@media (max-width: 479px) {
    #wrap .sub_list .list_Galleryform > ul > li .bio:not(:has(ul)) { column-count: 1; }
    #wrap .sub_list .list_Galleryform > ul > li .bio:not(:has(ul)) * { padding-right: 0; }
    #wrap .sub_list .list_Galleryform > ul > li .bio ul { column-count: 1; }
    #wrap .sub_list .list_Galleryform > ul > li .bio ul li { padding-right: 0; }
    
    
}