@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	" board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods "
	" layout/popup.html "

	위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다.

	** header, footer, main 관련은 /css/skin.css 에 있습니다.

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


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

    sub common

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

.txtAni + .txtAni { transition-delay: 0.3s; }

.sub_visual { position: relative; height: 540px; background: no-repeat center;  box-sizing: border-box; z-index: 5; background-size: cover;}
.sub_visual .sv_title { width: 100%; font-size: var(--title-20); color: var(--point-white); text-align: left; display: flex; justify-content: center; align-items: center; height: 100%; box-sizing: border-box; padding-top: 60px; }
.sub_visual .sv_title p { font-size: 110%; font-weight: 400; line-height: normal; letter-spacing: 0.005em; }
.sub_visual .sv_title p span { opacity: 0.6; }
.sub_visual .sv_title h2 { font-size: 400%; font-weight: 600; line-height: normal; margin-top: 18px; }
.sub_visual .nav_wrap { position: absolute; right: 0; bottom: 50px; width: 100%; }
.sub_visual .nav_wrap nav { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; color: var(--point-white); font-size: var(--title-17); font-weight: 400; font-family: var(--font-type02); }
.sub_visual .nav_wrap span { line-height: 1.18; letter-spacing: -0.03em; }
.sub_visual .nav_wrap a { position: relative; padding-right: 19px; margin-right: 17px; box-sizing: border-box; flex-shrink: 0; }
.sub_visual .nav_wrap a::after { content: ''; position: absolute; right: 0; top: 10px; width: 4px; height: 4px; background: var(--point-white); opacity: 0.2; }
.sub_visual .nav_wrap span { position: relative; box-sizing: border-box; } 
.sub_visual .nav_wrap span:not(:last-child) { font-weight: 200; opacity: 0.8; font-family: var(--font-type01); }
.sub_visual .nav_wrap span:has(+ span) { padding-right: 22px; margin-right: 17px;  }
.sub_visual .nav_wrap span:has(+ span)::after { content: ''; position: absolute; right: 0; top: 8px; width: 4px; height: 4px; background: var(--point-white); opacity: 0.2; }

.sub_nav { width: 100%; height: 70px; border-bottom: 1px solid var(--border-color01); background: var(--gray-bg02); }
.sub_nav > div { height: 100%; }
.sub_nav ul { display: flex; width: 100%; height: 100%; flex-wrap: nowrap; }
.sub_nav li { width: 100%; height: 100%; position: relative; color: var(--black-color06); font-size: var(--title-19); font-weight: 400; letter-spacing: -0.03em; font-family: var(--font-type02); transition: all 0.4s; }
.sub_nav li::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--point-color01); transition: transform 0.4s; transform: scaleX(0);  }
.sub_nav li a { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; color: inherit; text-align: center; box-sizing: border-box; padding: 0 10px;  }

.sub_nav li.on { color: var(--point-color01); font-weight: 600; }
.sub_nav li.on::after { transform: scaleX(1) }

#wrap:has(.sub_contact, .sub_serv, .sub_agree) .nav_wrap span.depth01 { display: none; }

.page_title { text-align: center; font-size: var(--title-20); margin-bottom: 80px; }
.page_title.space60 { margin-bottom: 60px; }
.page_title h3 { color: var(--black-color01); font-weight: 600; font-size: 300%; letter-spacing: -0.03em; font-family: var(--font-type02); text-transform: uppercase; line-height: normal; }
.page_title p { position: relative; color: var(--black-color03); font-weight: 400; font-size: 105%; line-height: 1.67; letter-spacing: -0.03em; font-family: var(--font-type02); margin-top: 31px; padding-top: 32px; box-sizing: border-box; text-wrap: balance; }
.page_title p::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 50px; height: 2px; background: var(--point-color01);  }

#wrap .board_search { background: var(--trans-color); padding: 0; line-height: initial; margin-bottom: 80px; }
#wrap .board_search .board_search_wrap { display: flex; justify-content: center; gap: 10px; box-sizing: border-box; }
#wrap .board_search .board_search_wrap .board_search_sel { width: 160px; }
#wrap .board_search .board_search_wrap .board_input_box { width: 360px; }
#wrap .board_search .board_search_wrap .board_input_box input[type="text"] { width: 100%; }
#wrap .board_search .board_search_wrap .board_submit_box { width: 60px; height: 60px; background: var(--black-color01); }
#wrap .board_search .board_search_wrap .board_submit_box input[type="submit"] { width: 100%; height: 100%; appearance: none; border: none; font-size: 0; background: url('../images/sub/ico_search.svg') no-repeat center; background-size: 20px 20px; }

#wrap select,
#wrap input[type="text"],
#wrap input[type="password"],
#wrap input[type="number"],
#wrap input[type="date"] { height: 60px; padding: 0 20px; background: var(--gray-bg04); color: var(--black-color05); font-size: var(--title-18); font-weight: 500; font-family: var(--font-type02); letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; white-space: nowrap; border: 0; }

#wrap input[type="text"]::placeholder,
#wrap input[type="password"]::placeholder,
#wrap input[type="number"]::placeholder,
#wrap input[type="date"]::placeholder { font-size: 100%; font-weight: 300; color: var(--black-color10); letter-spacing: -0.03em; }

#wrap select { margin: 0; width: 100%; padding-right: 35px; background: var(--gray-bg04) url('../images/sub/ico_search_arw.svg') no-repeat center right 20px; appearance: none; cursor: pointer; }

.sub_content .title_deco { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; color: var(--point-color01); font-size: 90%; font-weight: 600; text-transform: uppercase; margin-bottom: 22px; letter-spacing: -0.03em; }
.sub_content .title_deco::before { content: ''; display: inline-flex; width: 40px; height: 1px; background: var(--point-color01); }

#wrap .btn_wrap { display: flex; justify-content: center; align-items: center; margin-top: 80px; }

.sub_m_nav { width: 100%; height: 55px; background: var(--point-white); border-bottom: 1px solid var(--border-color01); display: none; }
.sub_m_nav .mob_nav{display: flex; height: 100%; border-left: 1px solid var(--border-color01); font-size: 16px; font-weight: 400; }
.sub_m_nav .mob_nav :where(dt, dd){position: relative; height: 100%; border-right: 1px solid var(--border-color01); box-sizing: border-box; }
.sub_m_nav .mob_nav dt a{display: flex;width: 55px;height: 100%; align-items: center;justify-content: center;font-size: 0;padding: 16px;box-sizing: border-box;}
.sub_m_nav .mob_nav dt a img { width: 20px; height: 19px; }
.sub_m_nav .mob_nav dd { width: calc(100% - 55px); }
.sub_m_nav .mob_nav dd span{position: relative;display: flex;align-items: center; height: 100%;padding:2px 45px 0 10px;box-sizing: border-box; font-family: var(--font-type02); font-weight: 400;color: var(--black-color01); border-right: 1px solid rgba(221, 221, 221, 0.2);line-height: 1.4;cursor: pointer; letter-spacing: -0.03em;}
.sub_m_nav .mob_nav dd span:before{position: absolute;content:'';width: 8px;height: 8px;border:solid var(--black-color03);border-width: 0 0 2px 2px;top: 48.5%;right: 19px;transform: translateY(-50%) rotate(-45deg);border-radius: 1px; transition: all 0.4s;}
.sub_m_nav .mob_nav dd.on span:before{transform: translateY(-50%) rotate(-45deg) scale(-1,-1);top: 55%;}
.sub_m_nav .mob_nav dd ul{position: absolute;top: calc(100% + 1px);left:-1px;width: calc(100% + 2px);padding: 10px 0;background: var(--point-white);border:1px solid var(--border-color01); border-top: 0; box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s; z-index: 10; }
.sub_m_nav .mob_nav dd.on ul{opacity: 1; pointer-events: all;}
.sub_m_nav .mob_nav dd ul li a{display: block;font-weight: 400;color: var(--black-color02);padding: 11px 12px;box-sizing: border-box;line-height: 1.4;}
.sub_m_nav .mob_nav dd ul li.on a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;font-weight: 500;}
.sub_m_nav .mob_nav dd + dd span { color: var(--point-color01); font-weight: 600; padding-left: 21px; }
.sub_m_nav .mob_nav dd + dd span::before { border-color: var(--point-color01); }

@media (hover: hover) and (pointer: fine){
    .sub_nav li:hover { color: var(--point-color01);  }
    .sub_nav li:hover::after { transform: scaleX(1); }
    
}

@media screen and (max-width: 1023px){
    .sub_visual { height: clamp(300px, 54vw, 540px); }
    .sub_visual .sv_title { padding-top: clamp(10px, 6vw, 60px); }
    .sub_visual .sv_title h2 { margin-top: clamp(9px, 1.8vw, 18px); font-size: 370%; }
    .sub_visual .nav_wrap { bottom: clamp(25px, 5vw, 50px); }
    .sub_visual .nav_wrap a { padding-right: clamp(12px, 1.9vw, 19px); margin-right: clamp(10px, 1.7vw, 17px); }
    .sub_visual .nav_wrap a img { width: 19px; height: 17px; }
    .sub_visual .nav_wrap a::after { top: 9px; }
    .sub_visual .nav_wrap span:has(+ span) { padding-right: clamp(12px, 2.2vw, 22px); margin-right: clamp(12px, 1.7vw, 17px); }
    .sub_visual .nav_wrap span:has(+ span)::after { top: 7px; }

    .sub_nav { height: clamp(55px, 7vw, 70px); }

    .page_title h3 { font-size: 280%; }
    .page_title { margin-bottom: clamp(40px, 8vw, 80px); }
    .page_title.space60 { margin-bottom: clamp(30px, 6vw, 60px); }
    .page_title p { margin-top: clamp(15px, 3vw, 31px); padding-top: clamp(15px, 3vw, 32px) }

    #wrap .board_search { margin-bottom: clamp(40px, 8vw, 80px); }

    .sub_content .title_deco { gap: clamp(10px, 1.6vw, 16px); margin-bottom: clamp(10px, 2.2vw, 22px); }
    .sub_content .title_deco::before { width: clamp(25px, 4vw, 40px); }

    #wrap .btn_wrap { margin-top: clamp(40px, 8vw, 80px); }
}

@media screen and (max-width: 860px){
    .sub_visual .sv_title h2 { font-size: 340%; }
    .sub_visual .sv_title p { font-size: 105%; }
    .sub_visual .nav_wrap a::after { top: 8px; }
    .sub_visual .nav_wrap a img { width: 18px; height: 16px; }
    .sub_visual .nav_wrap span:has(+ span)::after { top: 6px; }

    .page_title h3 { font-size: 260%; }

    #wrap select,
    #wrap input[type="text"],
    #wrap input[type="password"],
    #wrap input[type="number"],
    #wrap input[type="date"] { height: 50px; padding: 0 15px; }
    #wrap .board_search .board_search_wrap .board_submit_box { width: 50px; height: 50px; }
    #wrap .board_search .board_search_wrap .board_submit_box input[type="submit"] { background-size: 18px 18px; }
    #wrap select { background: var(--gray-bg04) url(../images/sub/ico_search_arw.svg) no-repeat center right 15px; padding-right: 30px; }

}

@media screen and (max-width: 640px){
    .sub_visual .sv_title h2 { font-size: 310%; }
    .sub_visual .sv_title p { font-size: 100%; }
    .sub_visual .nav_wrap a::after { top: 9px; }
    .sub_visual .nav_wrap a img { width: 17px; height: 15px; }
    .sub_visual .nav_wrap span:has(+ span)::after { top: 6px; }

    .page_title h3 { font-size: 240%; }
    .page_title p { font-size: 95%; }

    #wrap .board_search .board_search_wrap .board_search_sel { width: 25%; }
    #wrap .board_search .board_search_wrap .board_input_box { width: 70%; }

}

@media screen and (max-width: 479px){
    .sub_visual .sv_title h2 { font-size: 280%; }
    .sub_visual .sv_title p { font-size: 95%; }
    .sub_visual .nav_wrap a::after { top: 7px; width: 3px; height: 3px; }
    .sub_visual .nav_wrap a img { width: 16px; height: 14px; }
    .sub_visual .nav_wrap span:has(+ span)::after { width: 3px; height: 3px; }

    .page_title h3 { font-size: 220%; }
    .page_title p { font-size: 90%; }

    #wrap select,
    #wrap input[type="text"],
    #wrap input[type="password"],
    #wrap input[type="number"],
    #wrap input[type="date"] { height: 40px; padding: 0 10px; }
    #wrap .board_search .board_search_wrap { gap: 5px; }
    #wrap .board_search .board_search_wrap .board_submit_box { width: 40px; height: 40px; }
    #wrap .board_search .board_search_wrap .board_submit_box input[type="submit"] { background-size: 16px 16px; }

    #wrap select { background: var(--gray-bg04) url(../images/sub/ico_search_arw.svg) no-repeat center right 10px; background-size: 11px 5px; padding-right: 25px; }
    
    .sub_nav { display: none; }
    .sub_m_nav { display: block; }
}

@media screen and (max-width: 435px){
    #wrap .board_search .board_search_wrap { flex-wrap: wrap; gap: 10px 5px; }
    #wrap .board_search .board_search_wrap .board_search_sel { width: 100%; }
    #wrap .board_search .board_search_wrap .board_input_box { width: calc(100% - 45px); }
}

@media screen and (max-width: 410px){
    .page_title p br { display: none; }
}

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

    회사소개

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

.sub_about { font-size: var(--title-20); font-family: var(--font-type02); }
.sub_about h4 { position: relative; color: var(--black-color01); font-weight: 600; font-size: 250%; line-height: 1.36; letter-spacing: -0.03em; margin-bottom: 40px; }
.sub_about h4 strong { color: var(--point-color01); font-weight: inherit; }

.sub_about .about_con01 { position: relative;  }
.sub_about .about_con01 p { position: relative; color: var(--black-color04); font-weight: 400; font-size: 125%; line-height: 1.68; letter-spacing: -0.03em; }
.sub_about .about_con01 p strong { color: var(--black-color03); font-weight: 500; }
.sub_about .about_con01::before { content: ''; position: absolute; right: 0; top: 20px; width: 670px; height: 150px; background: url('../images/sub/about_logo.svg') no-repeat center; background-size: 100% auto; opacity: 0.6; }

.sub_about .about_con02 { position: relative; box-sizing: border-box; margin-top: 70px; padding-top: 72px; }
.sub_about .about_con02::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--border-color01); }
.sub_about .about_con02::after { content: ''; position: absolute; left: 0; top: 0; width: 10%; height: 2px; background: var(--point-color01); }
.sub_about .about_con02 p { color: var(--black-color06); font-weight: 400; font-size: 100%; line-height: 1.7; letter-spacing: -0.03em; }
.sub_about .about_con02 p + p { margin-top: 24px; }
.sub_about .about_con02 strong { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 15px 24px; color: var(--black-color01); font-weight: 600; font-size: 160%; line-height: normal; letter-spacing: 0.1em; margin-top: 40px; }
.sub_about .about_con02 strong small { color: var(--black-color03); font-weight: 500; font-size: var(--title-20); letter-spacing: -0.03em; }


@media screen and (max-width: 1040px){
    .sub_about .about_con01 p br.del { display: none; }
}

@media screen and (max-width: 1023px){
    .sub_about h4 { margin-bottom: clamp(20px, 3vw, 40px); font-size: 230%; }
    .sub_about .about_con01::before { width: 536px; height: 120px; top: 10px; }
    .sub_about .about_con02 { margin-top: clamp(30px, 7vw, 70px); padding-top: clamp(30px, 7vw, 72px); }
    .sub_about .about_con02 p + p { margin-top: clamp(15px, 2.4vw, 24px); }
    .sub_about .about_con02 strong { margin-top: clamp(20px, 4vw, 40px); gap: 15px clamp(15px, 2.4vw, 24px); }
    
}

@media screen and (max-width: 860px){
    .sub_about h4 { font-size: 210%; }
    .sub_about .about_con01 p { font-size: 110%; }

    .sub_about .about_con01::before { width: 429px; height: 96px; }
}

@media screen and (max-width: 640px){
    .sub_about h4 { font-size: 190%; }
    .sub_about .about_con01::before { width: 344px; height: 77px; }
}

@media screen and (max-width: 479px){
    .sub_about h4 { font-size: 170%; }
    .sub_about .about_con01 p { font-size: 100%; }
    .sub_about .about_con01::before { width: 276px; height: 62px; top: 5px; }
}

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

    조직도

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

.sub_work { position: relative; font-size: var(--title-20); font-family: var(--font-type02); }
.sub_work::before { content: ''; position: absolute; left: 0; top: 60px; width: 100%; height: 790px; background: url('../images/sub/work_bg.png') no-repeat center; background-size: 100% auto; }
.sub_work .circle_wrap { width: 270px; height: 270px; border: 1px dashed var(--point-color01); border-radius: 100%; box-sizing: border-box; padding: 19px; margin-inline: auto; }
.sub_work .circle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px 0; width: 100%; height: 100%; background: var(--point-color02); box-shadow: 0px 0px 50px rgba(28, 108, 157, 0.20); border-radius: inherit; box-sizing: border-box; padding-top: 10px; padding-inline: 10px; overflow: hidden; }
.sub_work .circle h4 { color: var(--point-white); font-weight: 500; font-size: 200%; line-height: normal; letter-spacing: -0.03em; }
.sub_work .work_list { position: relative; margin-top: 60px; padding-top: 60px; box-sizing: border-box; display: flex; gap: 20px 80px; flex-wrap: wrap; }
.sub_work .work_list::before { content: ''; width: 1px; height: 80px; position: absolute; left: 50%; top: -80px; transform: translateX(-50%); background: var(--border-color01); }
.sub_work .work_list::after { content: ''; width: calc(100% - (100% / 4 - 60px)); height: 1px; position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: var(--border-color01); }
.sub_work .work_list > li { width: calc(100% / 4 - 60px); text-align: center; }
.sub_work .work_list > li strong { position: relative; display: block; width: 100%; box-sizing: border-box; padding: 24px 10px 23px; background: var(--black-color01); color: var(--point-white); font-weight: 500; font-size: 120%; letter-spacing: -0.03em; }
.sub_work .work_list > li strong::before { content: ''; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 14px; height: 14px; background: var(--point-color05); border: 3px solid var(--point-white); box-sizing: border-box; border-radius: 100%; z-index: 1; }
.sub_work .work_list > li strong::after { content: ''; position: absolute; left: 50%; top: -60px; transform: translateX(-50%); width: 1px; height: 60px; background: var(--border-color01); }
.sub_work .work_list02 > li { width: 100%; box-sizing: border-box; padding: 22px 10px 19px; background: var(--gray-bg02); border: 1px solid var(--border-color01); margin-top: 15px; color: var(--black-color03); font-weight: 400; font-size: var(--title-19); letter-spacing: -0.03em; }

@media screen and (max-width: 1280px){
    .sub_work .work_list { gap: 20px 50px; }
    .sub_work .work_list > li { width: calc(100% / 4 - 37.5px); }
    .sub_work .work_list::after { width: calc(100% - (100% / 4 - 37.5px)); }
}

@media screen and (max-width: 1023px){
    .sub_work .work_list { gap: 20px 30px; }
    .sub_work .work_list > li { width: calc(100% / 4 - 22.5px); }
    .sub_work .work_list::after { width: calc(100% - (100% / 4 - 22.5px)); }
    .sub_work .work_list > li strong { font-size: 110%; padding: clamp(18px, 2vw, 24px) 10px clamp(18px, 2vw, 23px); }
    
    .sub_work .circle { padding-top: clamp(5px, 1vw, 10px); gap: clamp(10px, 1.4vw, 14px) 0; }
    .sub_work .circle h4 { font-size: 190%; }
    .sub_work .work_list02 > li { padding: clamp(15px, 2vw, 22px) 10px clamp(15px, 1.9vw, 19px); margin-top: clamp(10px, 1.5vw, 15px); }
    
    
}

@media screen and (max-width: 860px){
    .sub_work .work_list { gap: 20px; margin-top: 50px; padding-top: 50px; }
    .sub_work .work_list::before { height: 66px; top: -66px; }
    .sub_work .work_list > li { width: calc(100% / 4 - 15px); }
    .sub_work .work_list::after { width: calc(100% - (100% / 4 - 15px)); }
    .sub_work .work_list > li strong { font-size: 100%; }
    .sub_work .work_list > li strong::before { width: 12px; height: 12px; }
    .sub_work .work_list > li strong::after { top: -50px; height: 50px; }
    
    .sub_work .circle_wrap { width: 243px; height: 243px; padding: 15px; }
    .sub_work .circle h4 { font-size: 180%; }

}

@media screen and (max-width: 640px){
    .sub_work .work_list > li { width: calc(100% / 2 - 10px); }
    .sub_work .work_list > li:nth-child(n + 3) strong::before,
    .sub_work .work_list > li:nth-child(n + 3) strong::after { display: none; }
    .sub_work .work_list::before { height: 63px; top: -63px; }
    .sub_work .work_list::after { width: calc(100% - (100% / 2 - 10px)); }

    .sub_work .circle_wrap { width: 219px; height: 219px; padding: 12px; }
    .sub_work .circle h4 { font-size: 170%; }
    .sub_work .circle .ico { width: 60%; }
}

@media screen and (max-width: 479px){
    .sub_work .work_list { gap: 20px 15px; margin-top: 40px; padding-top: 40px; }
    .sub_work .work_list > li { width: calc(100% / 2 - 7.5px); }
    .sub_work .work_list > li:nth-child(n + 3) strong::before,
    .sub_work .work_list > li:nth-child(n + 3) strong::after { display: none; }
    .sub_work .work_list > li strong::before { width: 10px; height: 10px; border: 2px solid var(--point-white); }
    .sub_work .work_list > li strong::after { height: 40px; top: -40px; }
    .sub_work .work_list::before { height: 51px; top: -51px; }
    .sub_work .work_list::after { width: calc(100% - (100% / 2 - 7.5px)); }

    .sub_work .circle_wrap { width: 197px; height: 197px; padding: 10px; }
    .sub_work .circle h4 { font-size: 160%; }
    .sub_work .circle .ico { width: 50%; }
}

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

    연혁

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

.sub_history { position: relative; font-size: var(--title-20); }   
.sub_history .flex_des { display: flex; align-items: flex-start; }
.sub_history .img_wrap { box-sizing: border-box; width: 50%; position: sticky; top: 192px; padding-right: 120px; }
.sub_history .img_wrap img { position: relative; z-index: 2; }
.sub_history .img_wrap::before { content: ''; position: absolute; left: -40px; top: -40px; width: 100px; height: 240px; background: var(--point-color04); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 87.5%); z-index: 1; }
.sub_history .history_wrap { position: relative; width: 50%; padding-left: 121px; box-sizing: border-box; margin-top: -5px; }
.sub_history .history_wrap::before { content: ''; position: absolute; left: 0; top: 24px; width: 1px; height: calc(100% - 24px); transform: translate(calc(-50% + 0.5px)); background: var(--border-color01);}
.sub_history .history_wrap .history_line { position: absolute; left: 0; top: 24px; width: 1px; background: var(--point-color01); }
.sub_history .history_wrap strong { position: relative; color: var(--black-color03); font-weight: 500; font-size: 250%; letter-spacing: 0; transition: all 0.4s; }
.sub_history .history_wrap strong::before { content: ''; position: absolute; left: -125px; top: 24px; width: 8px; height: 8px; background: var(--black-color08); border-radius: 100%; box-shadow: 0 0 0 7px var(--border-color01); box-sizing: border-box; transition: all 0.4s; }
.sub_history .history_wrap .history_box > li + li { margin-top: 75px; }
.sub_history .history_wrap .bullet_list { margin-top: 19px; }
.sub_history .history_wrap .bullet_list li { font-size: 95%; color: var(--black-color05); font-weight: 400; line-height: 1.53; letter-spacing: -0.03em; font-family: var(--font-type02); }
.sub_history .history_wrap .bullet_list li::before { background: var(--black-color05); }
.sub_history .history_wrap .bullet_list li + li { margin-top: 6px; }

.sub_history .history_wrap li.on strong { color: var(--point-color01); }
.sub_history .history_wrap li.on strong::before { background: var(--point-color01); box-shadow: 0 0 0 7px #D5E6F0; }

@media screen and (max-width: 1480px){
    .sub_history .img_wrap::before { left: -20px; top: -25px; }
}

@media screen and (max-width: 1023px){
    .sub_history .img_wrap::before { width: 80px; height: 192px; left: -10px; }
    .sub_history .img_wrap { padding-right: 100px; }
    .sub_history .history_wrap { padding-left: 100px; }
    .sub_history .history_wrap strong { font-size: 240%; }
    .sub_history .history_wrap strong::before { left: -104px; }
    .sub_history .history_wrap .history_box > li + li { margin-top: clamp(30px, 6.5vw, 75px); }
    .sub_history .history_wrap .bullet_list { margin-top: clamp(10px, 1.9vw, 19px); }
}

@media screen and (max-width: 860px){
    .sub_history .img_wrap { padding-right: 80px; }
    .sub_history .img_wrap::before { width: 72px; height: 173px; }
    .sub_history .history_wrap { padding-left: 80px; }
    .sub_history .history_wrap strong { font-size: 220%; }
    .sub_history .history_wrap strong::before { left: -83px; width: 7px; height: 7px; box-shadow: 0 0 0 5px var(--border-color01); top: 19px; }
    .sub_history .history_wrap li.on strong::before { width: 7px; height: 7px; box-shadow: 0 0 0 5px #D5E6F0; }
}

@media screen and (max-width: 640px){
    .sub_history .flex_des { flex-direction: column; gap: 30px; }
    .sub_history .img_wrap { width: calc(100% - 20px); position: relative; top: 0; padding-right: 0; }
    .sub_history .img_wrap::before { left: revert; right: -20px; clip-path: polygon(0 0, 100% 0, 100% 87.5%, 0 100%); }
    .sub_history .history_wrap { padding-left: 40px; width: 100%; margin-top: 0; }
    .sub_history .history_wrap::before { left: 7px; }
    .sub_history .history_wrap .history_line { left: 7px; }
    .sub_history .history_wrap strong { font-size: 180%; }
    .sub_history .history_wrap strong::before { left: -35px; top: 14px; }
}

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

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

    SERVICE

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

.sub_serv { font-size: var(--title-20); }
.sub_serv .flex_des { display: flex; gap: 40px; }
.sub_serv .flex_rev { flex-direction: row-reverse; }
.sub_serv .info_wrap { display: flex; align-items: center; box-sizing: border-box; width: 31.43%; padding: 56px 60px 57px; background: var(--gray-bg02);  }
.sub_serv .info_wrap dl { width: 100%; }
.sub_serv .info_wrap dt { display: flex; flex-direction: column; gap: 14px; color: var(--black-color01); font-weight: 600; font-size: 190%; letter-spacing: -0.03em; }
.sub_serv .info_wrap dt small { color: var(--point-color01); font-weight: 500; font-size: var(--title-18); letter-spacing: 0; }
.sub_serv .info_wrap dd { margin-top: 29px; padding-top: 30px; box-sizing: border-box; border-top: 1px solid var(--border-color01); }
.sub_serv .info_wrap dd .bullet_list li { font-size: 90%; color: var(--black-color05); font-weight: 400; line-height: 1.84; letter-spacing: -0.03em; font-family: var(--font-type02); }
.sub_serv .info_wrap dd .bullet_list li::before { background: var(--black-color05); }
.sub_serv .info_wrap dd .bullet_list li + li { margin-top: 0; }
.sub_serv .img_wrap { width: calc(100% - (31.43% + 40px)); }
.sub_serv .img_wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sub_serv .serv_con { position: relative; }
.sub_serv .serv_con .sec_position { position: absolute; top: -250px; }
.sub_serv .serv_con + .serv_con { padding-top: 79px; }

@media screen and (max-width: 1400px){
	.sub_serv .info_wrap{padding:56px 30px 57px;}
	.sub_serv .info_wrap dt{font-size:150%;}
}
@media screen and (max-width: 1023px){
    .sub_serv .info_wrap { padding: clamp(20px, 3vw, 56px) clamp(20px, 2vw, 60px) clamp(20px, 3vw, 57px); width:40%; }
    .sub_serv .info_wrap dt { gap: clamp(7px, 1.4vw, 14px); font-size: 170%; }
    .sub_serv .info_wrap dd { margin-top: clamp(15px, 2.9vw, 29px); padding-top: clamp(15px, 3vw, 30px); }
    .sub_serv .img_wrap { width: calc(100% - (35% + 40px)); }
    .sub_serv .serv_con + .serv_con { padding-top: clamp(40px, 7.9vw, 79px); }
}

@media screen and (max-width: 860px){
    .sub_serv .flex_des { flex-direction: column; gap: 0; }
    .sub_serv .img_wrap { width: 100%; order: 1; height: clamp(250px, 44vw, 440px); }
    .sub_serv .info_wrap { width: 100%; order: 2; }
}

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


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

    CONTACT

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

.sub_contact { font-size: var(--title-20); }
.sub_contact .map { width: 100%; height: 600px; }
.sub_contact .map .root_daum_roughmap_landing { width: 100% !important; height: 100%; }
.sub_contact .map .root_daum_roughmap .wrap_map { width: 100% !important; height: 100% !important; }
.sub_contact .map .root_daum_roughmap .cont { display: none; }
.sub_contact .flex_wrap { display: flex; align-items: flex-start; gap: 0 60px; }
.sub_contact .company_name { box-sizing: border-box; padding: 50px; margin-top: -50px; width: 466px; background: #072143; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); flex-shrink: 0; }
.sub_contact .company_name h4 { color: var(--point-white); font-weight: 600; font-family: var(--font-type02); font-size: 190%; line-height: 1.31; letter-spacing: -0.03em; }
.sub_contact .address_wrap { margin-top: 60px; box-sizing: border-box; padding-right: 50px; }
.sub_contact .address_wrap strong { color: var(--black-color01); font-weight: 500; font-size: 150%; font-family: var(--font-type02); line-height: 1.47; letter-spacing: -0.03em; }
.sub_contact .address_wrap .addr_list { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 28px; }
.sub_contact .address_wrap .addr_list dl { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 15px 12px; padding-left: 34px; }
.sub_contact .address_wrap .addr_list dl::before { content: ''; position: absolute; left: 0;  width: 24px; height: 24px; flex-shrink: 0; }
.sub_contact .address_wrap .addr_list dt { display: flex; color: var(--point-color01); font-weight: 500; font-size: 110%; letter-spacing: -0.03em; box-sizing: border-box;  }
.sub_contact .address_wrap .addr_list dd { color: var(--black-color05); font-weight: 400; font-size: 105%; letter-spacing: -0.03em; }

.sub_contact .address_wrap .addr_list li:nth-child(1) dl::before { top: 3px; background: url('../images/sub/ico_tel.svg') no-repeat center; background-size: 100% auto; }
.sub_contact .address_wrap .addr_list li:nth-child(2) dl::before { top: 4px; background: url('../images/sub/ico_fax.svg') no-repeat center; background-size: 100% auto;  }
.sub_contact .address_wrap .addr_list li:nth-child(3) dl::before { top: 4px; background: url('../images/sub/ico_mail.svg') no-repeat center; background-size: 100% auto; }

.sub_contact .title_deco { color: var(--point-color06); margin-bottom: 59px; }
.sub_contact .title_deco::before { background: var(--point-color06); }

@media screen and (max-width: 1418px){
    .sub_contact .address_wrap { padding-right: 0; }
}

@media screen and (max-width: 1023px){
    .sub_contact .flex_wrap { gap: 0 40px; }
    .sub_contact .map { height: clamp(300px, 60vw, 600px); }
    .sub_contact .company_name { width: 45%; padding: clamp(20px, 3.5vw, 50px); }
    .sub_contact .company_name h4 { font-size: 170%; }
    .sub_contact .title_deco { margin-bottom: clamp(20px, 4vw, 59px); }
    .sub_contact .address_wrap { width: calc(100% - (45% - 40px)); margin-top: clamp(20px, 4vw, 60px); }
    .sub_contact .address_wrap { padding-right: 0; }
    .sub_contact .address_wrap .addr_list { margin-top: clamp(15px, 2.8vw, 28px); gap: clamp(10px, 1.5vw, 15px) clamp(15px, 3vw, 40px); }
    .sub_contact .address_wrap strong { font-size: 130%; }
    .sub_contact .address_wrap .addr_list dl { gap: clamp(5px, 1.5vw, 15px) clamp(7px, 1.2vw, 12px); padding-left: 30px; }
    .sub_contact .address_wrap .addr_list dl::before { width: 22px; height: 22px; }
}

@media screen and (max-width: 860px){
    .sub_contact .flex_wrap { gap: 0 30px; }
    .sub_contact .company_name h4 { font-size: 150%; }
    .sub_contact .address_wrap strong { font-size: 120%; }
    .sub_contact .address_wrap .addr_list dl { padding-left: 25px; }
    .sub_contact .address_wrap .addr_list dl::before { width: 20px; height: 20px; }
    .sub_contact .address_wrap .addr_list li:nth-child(1) dl::before { top: 2px; }
    .sub_contact .address_wrap .addr_list li:nth-child(2) dl::before { top: 3px; }
    .sub_contact .address_wrap .addr_list li:nth-child(3) dl::before { top: 3px; }
}

@media screen and (max-width: 640px){
    .sub_contact .company_name h4 { font-size: 130%; }
    .sub_contact .address_wrap strong { font-size: 110%; }
    .sub_contact .flex_wrap { flex-direction: column; }
    .sub_contact .company_name { width: 100%; margin-top: -10px; }
    .sub_contact .address_wrap { width: 100%; }
    .sub_contact .address_wrap .addr_list dl::before { width: 18px; height: 18px; }
    .sub_contact .address_wrap .addr_list li:nth-child(1) dl::before { top: 3px; }
}

@media screen and (max-width: 479px){
    .sub_contact .company_name h4 { font-size: 110%; }
    .sub_contact .address_wrap .addr_list { flex-direction: column; }
    .sub_contact .address_wrap .addr_list dl { padding-left: 22px; }
    .sub_contact .address_wrap .addr_list dl::before { width: 16px; height: 16px; }
    .sub_contact .address_wrap .addr_list li:nth-child(1) dl::before { top: 4px; }
    .sub_contact .address_wrap .addr_list li:nth-child(2) dl::before { top: 4px; }
    .sub_contact .address_wrap .addr_list li:nth-child(3) dl::before { top: 4px; }
}

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

    갤러리 게시판 리스트

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

#wrap ul.bbs_gallery { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 40px 34px; }
#wrap ul.bbs_gallery li { position: relative; width: calc(100% / 3 - 22.67px); position: relative; transition: all 0.4s; }
#wrap ul.bbs_gallery li a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; }
#wrap ul.bbs_gallery li::before,
#wrap ul.bbs_gallery li::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; transition: all 0.4s; }
#wrap ul.bbs_gallery li::before { border: 1px solid var(--border-color01); z-index: 1; }
#wrap ul.bbs_gallery li::after { border: 2px solid var(--point-color01); z-index: 3; opacity: 0; visibility: hidden; }
#wrap ul.bbs_gallery li .thumb { width: 100%; height: 300px; position: relative; z-index: 2; overflow: clip; }
#wrap ul.bbs_gallery li .thumb img { position: absolute; z-index: 4; display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s; }
#wrap ul.bbs_gallery li .txt_info { box-sizing: border-box; padding: 30px; font-size: var(--title-20); }
#wrap ul.bbs_gallery li .txt_info p { color: var(--point-color02); font-weight: 400; font-size: 80%; letter-spacing: -0.03em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#wrap ul.bbs_gallery li .txt_info strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; word-break: break-word; margin-top: 14px; color: var(--black-color01); font-weight: 500; font-size: 120%; letter-spacing: -0.03em; }

@media (hover: hover) and (pointer: fine){
    #wrap ul.bbs_gallery li:hover { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); }
    #wrap ul.bbs_gallery li:hover::after { opacity: 1; visibility: visible; }
    #wrap ul.bbs_gallery li:hover .thumb img { transform: scale(1.05); }
}

@media screen and (max-width: 1023px){
    #wrap ul.bbs_gallery { gap: 30px 20px; }
    #wrap ul.bbs_gallery li { width: calc(100% / 3 - 13.34px); }
    #wrap ul.bbs_gallery li .txt_info { padding: clamp(25px, 2.5vw, 30px) clamp(15px, 2.5vw, 30px); }
    #wrap ul.bbs_gallery li .thumb { height: clamp(250px, 30vw, 300px); }
    #wrap ul.bbs_gallery li .txt_info strong { margin-top: clamp(7px, 1.4vw, 14px); }
}

@media screen and (max-width: 860px){
    #wrap ul.bbs_gallery li { width: calc(100% / 2 - 10px); }
    #wrap ul.bbs_gallery { gap: 20px; }
}

@media screen and (max-width: 640px){
    #wrap ul.bbs_gallery li .txt_info strong { font-size: 110%; }
}

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


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

    게시판 뷰 페이지

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

#wrap:has(.bbs_view) .page_title { margin-bottom: 80px; }
#wrap .bbs_view { border-bottom: 1px solid var(--border-color01); box-sizing: border-box; }
#wrap .bbs_view div.view_tit { padding: 0 12px 40px 40px;; border-top: 0; background: var(--trans-color); font-size: var(--title-20); border-bottom: 1px solid var(--border-color01); }
#wrap .bbs_view div.view_tit:after { display: none; }
#wrap .bbs_view div.view_tit .tit { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
#wrap .bbs_view div.view_tit .tit h4 { color: var(--black-color01); font-weight: 600; font-size: 200%; letter-spacing: -0.03em; line-height: 1.25; padding: 0; border-bottom: 0; box-sizing: border-box; padding-right: 10px; }
#wrap .bbs_view div.view_tit .info { display: flex; flex-wrap: wrap; gap: 10px 0; flex-shrink: 0; }
#wrap .bbs_view div.view_tit .info dl { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 15px; position: relative; box-sizing: border-box; }
#wrap .bbs_view div.view_tit .info dl:has(+ dl) { margin-right: 16px; padding-right: 19px; }
#wrap .bbs_view div.view_tit .info dl:has(+ dl)::after { content: ''; position: absolute; right: 0; top: 4px; width: 1px; height: 12px; background: rgba(136, 136, 136, 0.15); }
#wrap .bbs_view div.view_tit .info dt { color: var(--black-color06); font-weight: 500; font-size: 85%; letter-spacing: -0.03em; }
#wrap .bbs_view div.view_tit .info dd { color: var(--black-color08); font-weight: 400; font-size: 85%; letter-spacing: -0.03em; }

#wrap .bbs_view div.view_cont { padding: 60px 20px; font-size: var(--title-18); line-height: 1.3; border-bottom: 0; word-break: keep-all; }
#wrap .bbs_view div.view_cont .thumb_img_wrap { padding-bottom: 40px; }

#wrap .bbs_view + .view_btn { text-align: center; }


#wrap .bbs_view .extra_editor_wrap {display:table;table-layout:fixed;border-collapse:collapse;width:100%;border:0; background: var(--gray-bg02); box-sizing: border-box; }
#wrap .bbs_view .extra_editor_wrap > h4, 
#wrap .bbs_view .extra_editor_wrap > div.extra_cont {padding: 24px 0 23px;display:table-cell;box-sizing:border-box;vertical-align:middle;text-align:left;border: 0;}
#wrap .bbs_view .extra_editor_wrap > h4 {width:160px;background:none;color: var(--black-color03); font-family: var(--font-type02); font-size: var(--title-18);font-weight: 500;text-align: center;position:relative;z-index:1; letter-spacing: -0.03em;}
#wrap .bbs_view .extra_editor_wrap > h4::after {content:''; position:absolute;width:1px;height:12px;background:var(--border-color01);top:50%;right:0;transform:translateY(-50%);}
#wrap .bbs_view .extra_editor_wrap div.extra_cont {width: calc(100% - 160px);padding-left: 50px;padding-right:50px;}

#wrap .bbs_view .extra_editor_wrap div.extra_cont > span {font-size: var(--title-17); font-weight:400;color: var(--black-color06) !important; vertical-align:middle;display:block; letter-spacing: -0.03em; font-family: var(--font-type02); }
#wrap .bbs_view .extra_editor_wrap div.extra_cont > span a {font-size:inherit;color:inherit !important;font-weight:inherit;}
#wrap .bbs_view .extra_editor_wrap div.extra_cont > span + span {margin-top:12px;}



@media screen and (max-width: 1023px){
    #wrap:has(.bbs_view) .page_title { margin-bottom: clamp(40px, 8vw, 80px); }
    #wrap .bbs_view div.view_tit { padding: 0 clamp(6px, 1.2vw, 12px) clamp(20px, 4vw, 40px) clamp(10px, 4vw, 40px); }
    #wrap .bbs_view div.view_tit .tit { flex-wrap: wrap; }
    #wrap .bbs_view div.view_tit .tit h4 { font-size: 190%; }
    #wrap .bbs_view div.view_tit .info dl { gap: clamp(10px, 1.5vw, 15px); }
    #wrap .bbs_view div.view_tit .info dl:has(+ dl) { margin-right: clamp(10px, 1.6vw, 16px); padding-right: clamp(10px, 1.9vw, 19px); }
    #wrap .bbs_view div.view_cont { padding: clamp(30px, 6vw, 60px) clamp(15px, 2vw, 20px);  }
    #wrap .bbs_view div.view_cont .thumb_img_wrap { padding-bottom: clamp(20px, 4vw, 40px); }
    #wrap .bbs_view .extra_editor_wrap > h4 { width: clamp(90px, 16vw, 160px); }
    #wrap .bbs_view .extra_editor_wrap div.extra_cont { width: calc(100% - clamp(90px, 16vw, 160px)); padding-left: clamp(20px, 5vw, 50px); padding-right: clamp(20px, 5vw, 50px); }

}

@media screen and (max-width: 860px){
    #wrap .bbs_view div.view_tit .tit h4 { font-size: 170%; }
    #wrap .bbs_view div.view_tit .info dl:has(+ dl)::after { height: 10px; top: 5px; }
    #wrap .bbs_view .extra_editor_wrap > h4::after { height: 10px; }

    
    
}

@media screen and (max-width: 640px){
    #wrap .bbs_view div.view_tit .tit h4 { font-size: 150%; }
    #wrap .bbs_view div.view_tit .info dl:has(+ dl)::after { top: 4px; }


}

@media screen and (max-width: 479px){
    #wrap .bbs_view div.view_tit .tit h4 { font-size: 130%; width: 100%; }
    #wrap .bbs_view div.view_tit .info dl:has(+ dl)::after { height: 8px; }
    #wrap .bbs_view .extra_editor_wrap > h4::after { height: 8px; }
    #wrap .bbs_view div.view_tit .info { width: 100%; }

    
}