@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 에 있습니다.

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

body::-webkit-scrollbar { display: none; }

.sub_visual { position: relative; height: 360px; background: no-repeat center;  z-index: 5; background-size: cover; box-sizing: border-box; margin-top: 100px;}
.sub_visual .sv_title { width: 100%; font-size: var(--title-20); color: var(--point-white); text-align: center; display: flex; justify-content: center; align-items: center; height: 100%; }
.sub_visual .sv_title h2 { font-size: 250%; font-weight: 700; line-height: normal; }
.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: 500; 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: 60px; border-bottom: 1px solid var(--border-color01); background: var(--point-white); box-sizing: border-box; }
.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-18); font-weight: 400; letter-spacing: -0.02em; font-family: var(--font-type03); 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: 2px 10px 0;  }

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


.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-type03); 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); }


.page_title { text-align: center; font-family: var(--font-type03); font-size: var(--title-20); margin-bottom: 40px; }
.page_title h3 { color: var(--black-color01); font-weight: 600; font-size: 200%; letter-spacing: 0; font-family: var(--font-type03); line-height: 1.1;}

.page_ico { display: block; max-width: 187px; margin-inline: auto; }

.sub_content { font-size: var(--title-20); }
.sub_content .gray_bg { background: var(--gray-bg03); position: relative; }

.sub_content .sub_title strong { display: block; position: relative; color: var(--point-color01); font-family: var(--font-type03); font-weight: 600; font-size: 160%; letter-spacing: -0.03em; line-height: normal; box-sizing: border-box; padding-left: 28px; }
.sub_content .sub_title strong::before { content: ''; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; background: var(--point-color01); }

.sub_content .flex_des { display: flex; }

.sub_content .bullet_list > li { position: relative; color: var(--black-color06); font-weight: 300; font-size: var(--title-17); letter-spacing: -0.03em; line-height: 1.65; box-sizing: border-box; padding-left: 12px; font-family: var(--font-type03); }
.sub_content .bullet_list > li::before { content: ''; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 100%; background: var(--black-color08); }
.sub_content .bullet_list > li + li { margin-top: 5px; }

.sub_content .chk_text { position: relative; color: var(--black-color03); font-weight: 300; font-size: var(--title-17); line-height: 1.59; letter-spacing: -0.03em; font-family: var(--font-type03); box-sizing: border-box; padding-left: 24px; text-wrap: auto; }
.sub_content .chk_text::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 10px; background: url('../images/sub/ico_chk.svg') no-repeat center; background-size: 100% auto; }

.sub_content .chk_title { position: relative; color: var(--point-color01); font-weight: 500; font-size: 110%; letter-spacing: -0.03em; font-family: var(--font-type03); box-sizing: border-box; padding-left: 22px; }
.sub_content .chk_title::before { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 10px; background: url('../images/sub/ico_chk.svg') no-repeat center; background-size: 100% auto;  }

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

@media screen and (max-width: 1023px){
    .sub_visual { margin-top: clamp(60px, 10vw, 100px); height: clamp(250px, 36vw, 360px); }
    .sub_visual .sv_title h2 { font-size: 230%; }
    
    .sub_nav { height: clamp(50px, 6vw, 60px); }

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

    .sub_content .sub_title strong { font-size: 150%; }
    .sub_content .sub_title strong::before { top: 17px; }

    .sub_content .chk_title::before { top: 7px; }
    .sub_content .chk_text { padding-left: 20px; }
    .sub_content .chk_title { padding-left: 20px; }
    .sub_content .bullet_list > li::before { top: 10px; }

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

@media screen and (max-width: 860px){
    .sub_visual .sv_title h2 { font-size: 210%; }
    .sub_content .sub_title strong { padding-left: 24px; font-size: 140%; }
    .sub_content .sub_title strong::before { width: 7px; height: 7px; top: 15px; }

    .sub_content .chk_text { padding-left: 18px; }
    .sub_content .chk_text::before { width: 11px; height: 9px; top: 6px; }
    .sub_content .bullet_list > li { padding-left: 8px; }
    .sub_content .bullet_list > li::before { width: 3px; height: 3px; top: 10px; }
    .sub_content .chk_title { padding-left: 18px; }
    .sub_content .chk_title::before { width: 11px; height: 9px; top: 7px; }

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

@media screen and (max-width: 640px){
    .sub_visual .sv_title h2 { font-size: 190%; }
    .sub_content .sub_title strong { padding-left: 20px; font-size: 130% }
    .sub_content .sub_title strong::before { width: 6px; height: 6px; top: 11px; }

    .sub_content .chk_text { padding-left: 16px; }
    .sub_content .chk_text::before { width: 10px; height: 8px; top: 7px; }

    .sub_content .chk_title { padding-left: 16px; }
    .sub_content .chk_title::before { width: 10px; height: 8px; top: 7px; }

    
    .sub_content .bullet_list > li::before { top: 9px; }

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

@media screen and (max-width: 479px){
    .sub_visual .sv_title h2 { font-size: 170%; }
    .sub_content .sub_title strong { padding-left: 16px; }
    .sub_content .sub_title strong::before { width: 5px; height: 5px; top: 12px; }

    .sub_content .chk_text { padding-left: 14px; }
    .sub_content .chk_text::before { width: 9px; height: 7px; top: 6px; }

    .sub_content .chk_title { padding-left: 14px; }
    .sub_content .chk_title::before { width: 9px; height: 7px; top: 7px; }

    .sub_nav { display: none; }
    .sub_m_nav { display: block; }

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

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

    회사소개

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

.sub_about .about_cont:not(:last-child) { box-sizing: border-box; }
.sub_about .about_cont + .about_cont { margin-top: 120px; }

.sub_about .about_banner { overflow: hidden; }

.sub_about .about_banner_txt { margin-top: 60px; }
.sub_about .about_banner_txt h4 { color: var(--point-color01); font-weight: 500; font-size: 180%; line-height: normal; letter-spacing: -0.02em; }
.sub_about .about_banner_txt h4 strong { font-weight: 600; font-size: inherit; letter-spacing: inherit; }

.sub_about .desc { position: relative; margin-top: 40px; padding-left: 50px; margin-left: 50px; box-sizing: border-box; font-family: var(--font-type03); }
.sub_about .desc::before { content: ''; position: absolute; left: 0; top: 7px; width: 1px; height: 80px; background: var(--black-color03); }
.sub_about .desc dl { margin-top: 24px; }
.sub_about .desc p:last-child { margin-top: 24px; }
.sub_about .desc p,
.sub_about .desc dd { color: var(--black-color06); font-weight: 400; font-size: var(--title-18); line-height: 1.78; letter-spacing: -0.02em; }
.sub_about .desc p strong { color: var(--black-color03); }
.sub_about .desc dt { color: var(--black-color03); font-weight: 500; font-size: var(--title-18); line-height: 1.78; letter-spacing: -0.02em; }

.sub_about .about_history { position: relative; }
.sub_about .about_history .history_line { position: absolute; left: 50%; top: 15px; width: 1px; height: 100%; background: var(--border-color01); }
.sub_about .about_history li { display: flex; justify-content: center; align-items: center; }
.sub_about .about_history li + li { margin-top: 80px; }
.sub_about .about_history li > strong { position: relative; display: block; width: 50%; color: var(--point-color01); font-weight: 700; font-size: 180%; line-height: normal; letter-spacing: 0; box-sizing: border-box; }
.sub_about .about_history li > strong::before { content: ''; position: absolute; box-sizing: border-box; top: 16px; width: 15px; height: 15px; background: var(--point-white); border: 3px solid var(--point-color01); border-radius: 100%; transform: translateX(-50%); z-index: 2; }
.sub_about .about_history li > strong::after { content: ''; position: absolute; box-sizing: border-box; top: 13px; width: 21px; height: 21px; background: rgba(23, 28, 97, 0.2); transform: translateX(-50%); border-radius: 100%; z-index: 1; box-shadow: 0 0 0 5px rgba(23, 28, 97, 0.1); }
.sub_about .about_history li > strong span::before { content: ''; position: absolute; top: 23px; width: 50px; height: 1px; background: var(--point-color01); }
.sub_about .about_history li > span { display: flex; gap: 16px; width: 50%; color: var(--black-color06); font-weight: 400; font-size: var(--title-18); line-height: normal; letter-spacing: -0.02em; font-family: var(--font-type03); box-sizing: border-box; }
.sub_about .about_history li > span em { color: var(--black-color03); font-weight: 500; font-size: var(--title-20); line-height: normal; letter-spacing: 0; flex-shrink: 0; }
.sub_about .about_history li:nth-child(odd) > strong { text-align: right; padding-right: 70px; }
.sub_about .about_history li:nth-child(odd) > strong::before { left: 100%; }
.sub_about .about_history li:nth-child(odd) > strong::after { left: 100%; }
.sub_about .about_history li:nth-child(odd) > strong span::before { right: 0; }
.sub_about .about_history li:nth-child(odd) > span { text-align: left; justify-content: flex-start; padding-left: 70px; }
.sub_about .about_history li:nth-child(even) { flex-direction: row-reverse; }
.sub_about .about_history li:nth-child(even) > strong { padding-left: 70px; }
.sub_about .about_history li:nth-child(even) > strong::before { left: 0; }
.sub_about .about_history li:nth-child(even) > strong::after { left: 0; }
.sub_about .about_history li:nth-child(even) > strong span::before { left: 0; }
.sub_about .about_history li:nth-child(even) > span { text-align: right; justify-content: flex-end; padding-right: 70px; }
.sub_about .about_history li:nth-child(even) > span em { order: 2; }

.sub_about .subsid_com .flex_des { margin-top: 30px; gap: 30px 80px; align-items: center; }
.sub_about .subsid_com .flex_des .img { display: flex; justify-content: center; align-items: center; padding: 62px 70px; flex-shrink: 0; width: calc(50% - 40px); box-sizing: border-box; background: var(--gray-bg01);  }
.sub_about .subsid_com .flex_des .img img { mix-blend-mode: darken; }
.sub_about .subsid_com .flex_des .txt { width: calc(50% - 40px); }
.sub_about .subsid_com .flex_des dl { display: flex; box-sizing: border-box; padding-left: 20px; }
.sub_about .subsid_com .flex_des dl + dl { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--border-color01); }
.sub_about .subsid_com .flex_des dt { position: relative; padding-left: 33px; width: 173px; color: var(--black-color03); font-weight: 500; font-size: var(--title-19); letter-spacing: -0.02em; line-height: normal; font-family: var(--font-type03); box-sizing: border-box; flex-shrink: 0; }
.sub_about .subsid_com .flex_des dt::before { content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 22px; }
.sub_about .subsid_com .flex_des dd { color: var(--black-color06); font-weight: 300; font-size: var(--title-18); letter-spacing: -0.03em; line-height: normal; }
.sub_about .subsid_com .flex_des dl:nth-child(1) dt::before { background: url('../images/sub/ico_about01.svg') no-repeat center; background-size: 100% auto; }
.sub_about .subsid_com .flex_des dl:nth-child(2) dt::before { background: url('../images/sub/ico_about02.svg') no-repeat center; background-size: 100% auto; }
.sub_about .subsid_com .flex_des dl:nth-child(3) dt::before { background: url('../images/sub/ico_about03.svg') no-repeat center; background-size: 100% auto; }
.sub_about .subsid_com .flex_des a { font-family: var(--font-type03); text-decoration: underline; text-underline-offset: 3px; }

@media screen and (max-width: 1023px){
    .sub_about .about_banner { height: clamp(250px, 40vw, 400px); }
    .sub_about .about_banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .sub_about .about_banner_txt { margin-top: clamp(30px, 6vw, 60px); }
    .sub_about .about_banner_txt h4 { font-size: 170%; }
    .sub_about .desc { margin-top: clamp(20px, 4vw, 40px); padding-left: clamp(25px, 5vw, 50px); margin-left: clamp(25px, 5vw, 50px); }
    .sub_about .desc::before { height: clamp(40px, 8vw, 80px); }
    .sub_about .desc dl { margin-top: clamp(12px, 2.4vw, 24px); }
    .sub_about .desc p:last-child { margin-top: clamp(12px, 2.4vw, 24px); }
    .sub_about .about_cont + .about_cont { margin-top: clamp(60px, 12vw, 120px); }

    .sub_about .about_history li + li { margin-top: clamp(40px, 8vw, 80px); }
    .sub_about .about_history li > strong { font-size: 170%; }
    .sub_about .about_history li > strong::before { top: 13px; }
    .sub_about .about_history li > strong::after { top: 10px; }
    .sub_about .about_history li > strong span::before { width: clamp(25px, 5vw, 50px); top: 20px; }
    .sub_about .about_history li > span { gap: clamp(10px, 1.6vw, 16px); }
    .sub_about .about_history li:nth-child(odd) > strong { padding-right: clamp(35px, 7vw, 70px); }
    .sub_about .about_history li:nth-child(odd) > span { padding-left: clamp(35px, 7vw, 70px); }
    .sub_about .about_history li:nth-child(even) > strong { padding-left: clamp(35px, 7vw, 70px); }
    .sub_about .about_history li:nth-child(even) > span { padding-right: clamp(35px, 7vw, 70px); }
    
    .sub_about .subsid_com .flex_des .img { padding: clamp(30px, 6.2vw, 62px) 70px; }
    .sub_about .subsid_com .flex_des dl { padding-left: clamp(10px, 2vw, 20px); }
    .sub_about .subsid_com .flex_des dl + dl { margin-top: clamp(15px, 2.6vw, 26px); padding-top: clamp(15px, 2.6vw, 26px); }
    .sub_about .subsid_com .flex_des dt { width: clamp(130px, 17vw, 173px); }
    
}

@media screen and (max-width: 860px){
    .sub_about .about_banner_txt h4 { font-size: 160%; }
    .sub_about .about_history li > strong { font-size: 160%; }
    .sub_about .about_history li > strong::before { width: 12px; height: 12px; }
    .sub_about .about_history li > strong::after { width: 17px; height: 17px;  }
    .sub_about .about_history li > strong span::before { top: 19px; }
    .sub_about .subsid_com .flex_des { gap: 30px 40px; }
    .sub_about .subsid_com .flex_des .img { width: calc(50% - 20px); }
    .sub_about .subsid_com .flex_des .txt { width: calc(50% - 20px); }
    .sub_about .subsid_com .flex_des dt::before { width: 20px; height: 20px; }
}

@media screen and (max-width: 640px){
    .sub_about .about_banner_txt h4 { font-size: 150%; }
    .sub_about .about_history { padding-left: 10px; }
    .sub_about .about_history .history_line { left: 9px; }
    .sub_about .about_history li { justify-content: flex-start; flex-wrap: wrap; gap: clamp(15px, 2vw, 20px); }
    .sub_about .about_history li:nth-child(odd) > strong { text-align: left; padding-right: 0; padding-left: clamp(35px, 7vw, 70px); }
    .sub_about .about_history li:nth-child(odd) > strong::before { left: 0; }
    .sub_about .about_history li:nth-child(odd) > strong::after { left: 0; }
    .sub_about .about_history li:nth-child(odd) > strong span::before { right: unset; left: 0; }
    .sub_about .about_history li:nth-child(odd) > span { padding-left: clamp(35px, 7vw, 70px); }
    .sub_about .about_history li:nth-child(even) { flex-direction: row; }
    .sub_about .about_history li:nth-child(even) > span { padding-right: unset; padding-left: clamp(35px, 7vw, 70px); justify-content: flex-start; text-align: left; }
    .sub_about .about_history li:nth-child(even) > span em { order: 0; }
    .sub_about .about_history li > strong { width: 100%; font-size: 150%; }
    .sub_about .about_history li > strong::before { width: 10px; height: 10px; top: 12px; }
    .sub_about .about_history li > strong::after { width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(23, 28, 97, 0.1); }
    .sub_about .about_history li > strong span::before { top: 16px; }
    .sub_about .about_history li > span { width: 100%; }
    .sub_about .subsid_com .flex_des { flex-direction: column; }
    .sub_about .subsid_com .flex_des .img { width: 100%; }
    .sub_about .subsid_com .flex_des .txt { width: 100%; }
    .sub_about .subsid_com .flex_des dt::before { width: 18px; height: 18px; }
}

@media screen and (max-width: 479px){
    .sub_about .about_banner_txt h4 { font-size: 140%; }
    .sub_about .desc { padding-left: 0; margin-left: 0; }
    .sub_about .desc::before { display: none; }
    .sub_about .about_history li > strong { font-size: 140%; }
    .sub_about .subsid_com .flex_des dt::before { width: 16px; height: 16px; }
}

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

    인사말

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

.sub_greeting .flex_des { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; }
.sub_greeting .flex_des .img { flex-shrink: 0; position: relative; }
.sub_greeting .flex_des .txt { font-family: var(--font-type03); box-sizing: border-box; padding-right: 10px; padding-top: 17px; }
.sub_greeting .flex_des .txt h4 { color: var(--black-color01); font-weight: 600; font-size: 180%; line-height: 1.39; letter-spacing: -0.02em; margin-bottom: 39px; }
.sub_greeting .flex_des .txt h4 strong { color: var(--point-color01); font-weight: inherit; }
.sub_greeting .flex_des .txt p { color: var(--black-color06); font-weight: 300; font-size: 90%; line-height: 1.78; letter-spacing: -0.02em; }
.sub_greeting .flex_des .txt p + p { margin-top: 24px; }
.sub_greeting .flex_des .txt > strong { display: flex; align-items: center; gap: 15px 16px; color: var(--black-color03); font-weight: 600; font-size: 120%; letter-spacing: -0.02em; line-height: normal; margin-top: 49px; }
.sub_greeting .flex_des .txt > strong small { color: inherit; font-weight: 500; font-size: var(--title-20); letter-spacing: inherit; line-height: inherit; flex-shrink: 0; }

.sub_greeting .info { position: absolute; right: 24px; top: -24px; }
.sub_greeting .info .desc{font-size: var(--title-20);font-family: var(--font-type01);background: var(--point-color01);pointer-events: all;display: flex;align-items: center;gap: 12px;writing-mode: tb-rl;padding: 22px 8px 19px;max-width: 36px;box-sizing: border-box; transform: rotate(180deg); }
.sub_greeting .info .desc dt{font-size: 80%;font-weight: 600;filter: var(--filter-white);transform: scale(-1,-1);}
.sub_greeting .info .desc dd{width: 1px;height: 60px;background: rgba(255,255,255,0.2);}

@media screen and (max-width: 1240px){
    .sub_greeting br.del { display: none; }
}

@media screen and (max-width: 1023px){
    .sub_greeting .flex_des { flex-direction: column; gap: 30px; justify-content: flex-start; align-items: flex-start; }
    .sub_greeting .flex_des .img { order: 1; }
    .sub_greeting .flex_des .txt { order: 2; }
    .sub_greeting .flex_des .txt h4 { margin-bottom: clamp(20px, 4vw, 39px); font-size: 170%; }
    .sub_greeting .flex_des .txt p + p { margin-top: clamp(12px, 2.4vw, 24px); }
    .sub_greeting .flex_des .txt > strong { margin-top: clamp(25px, 5vw, 49px); }
    .sub_greeting .info .desc { padding-inline: clamp(15px, 2vw, 20px); }
    .sub_greeting .info .desc dd { height: clamp(40px, 6vw, 60px); }
}

@media screen and (max-width: 860px){
    .sub_greeting .flex_des .txt h4 { font-size: 160%; }
}

@media screen and (max-width: 640px){
    .sub_greeting .flex_des .txt h4 { font-size: 150%; }
}

@media screen and (max-width: 479px){
    .sub_greeting .flex_des .txt h4 { font-size: 140%; }
}

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

    기업이념

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

.sub_philo .philo_title { text-align: center; font-family: var(--font-type03); margin-bottom: 142px; }
.sub_philo .philo_title p { color: var(--point-color01); font-weight: 400; font-size: 130%; line-height: normal; letter-spacing: -0.02em; }
.sub_philo .philo_title h4 { color: var(--point-color01); font-weight: 700; font-size: 220%; line-height: normal; letter-spacing: -0.02em; margin-top: 12px; }
.sub_philo .ellip_wrap { position: relative; text-align: center;  }
.sub_philo .ellip_wrap .ellip_box { position: relative; transform: rotate(8deg); }
.sub_philo .ellip_wrap .ellip_box .ellip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -34%) skew(-62deg) rotate(30deg); width: 40vw; height: 40vw; max-width: 290px; max-height: 290px; border-radius: 100%; box-shadow: inset 0 0 0 1px #ddd; box-sizing: border-box; }
.sub_philo .ellip_wrap .ellip_box .ellip .item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sub_philo .ellip_wrap .ellip_box .ellip .item::before,
.sub_philo .ellip_wrap .ellip_box .ellip .item::after { position: absolute; content: ''; width: 6px; height: 6px; border-radius: 100%; background: var(--point-color05); top: -3px; left: 50%; margin-left: -3px; transform: skew(-75deg, 33deg); }
.sub_philo .ellip_wrap .ellip_box .ellip .item::after { top: auto; bottom: -3px; }

.sub_philo .ellip_wrap .ellip_txt { position: relative; z-index: 2; }
.sub_philo .ellip_wrap .ellip_txt span::before { content: ''; position: absolute; width: 250px; height: 250px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--point-color05); opacity: 0.1; filter: blur(25px); border-radius: 100%; }
.sub_philo .ellip_wrap .ellip_txt span { color: var(--point-color05); font-weight: 700; font-size: 180%; line-height: 1.34; letter-spacing: 0;  }
.sub_philo .philo_desc { margin-top: 142px; color: var(--black-color03); font-weight: 400; font-size: var(--title-20); line-height: 1.7; letter-spacing: -0.02em; font-family: var(--font-type03); text-align: center; text-wrap: balance; }

.sub_philo .ellip_wrap .ellip_box .ellip .item {animation-name: philo_ani; animation-duration:180s; animation-iteration-count:infinite; transition-timing-function:linear;}
@keyframes philo_ani {0% {transform:rotate(0);}100% {transform:rotate(10800deg);}}

.sub_philo .ellip_wrap .stroke_txt{position: relative;display: inline-block;z-index: 3;}
.sub_philo .ellip_wrap .stroke_txt img{transition: all 0s; width: 100%; height: 100%; box-sizing: border-box; }
.sub_philo .ellip_wrap .stroke_txt .fill{position: absolute; top:0; left:-1px; clip-path: inset(0 100% 0 0);}
.sub_philo .philo_cont.aos-animate .stroke_txt img:not(.fill){transition: all 0.4s; transition-delay: 2.6s; opacity: 0; width: calc(100% - 1px); height: calc(100% - 1px); }
.sub_philo .philo_cont.aos-animate .stroke_txt .fill{clip-path: inset(0 0 0 0); transition: all 3s;}

.sub_philo .philo_cont { box-sizing: border-box; }
.sub_philo .philo_cont.gray_bg { position: relative; }
.sub_philo .philo_cont.gray_bg::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 120px; background: var(--black-color03); transform: translate(-50%, -50%); }
.sub_philo .philo_cont + .philo_cont { margin-top: 120px; padding-top: 120px; padding-bottom: 120px; }

.sub_philo .circle_wrap { position: relative; }
.sub_philo .circle_wrap .circle_box { display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 50px; position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 500px; height: 500px; background: url('../images/sub/img_philo_bg.png') no-repeat center; background-size: 100% auto; border-radius: 100%; }
.sub_philo .circle_wrap .circle_box .circle { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; box-sizing: border-box; padding: 55px; background: radial-gradient(50% 50% at 50% 50%, #FFF 74.04%, rgba(255, 255, 255, 0.80) 100%); box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.25); border-radius: inherit; }
.sub_philo .circle_wrap .circle_box .circle span { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 56px; box-sizing: border-box; border: 3px solid var(--border-color03); border-radius: inherit; }
.sub_philo .circle_wrap ul { counter-reset: num 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 60px 520px; }
.sub_philo .circle_wrap ul li { width: calc(50% - 260px); font-family: var(--font-type03); }
.sub_philo .circle_wrap ul li:nth-child(even) { text-align: right; margin-left: auto; }
.sub_philo .circle_wrap ul li:last-child { text-align: center; margin-inline: auto; width: 100%; max-width: 400px; margin-top: -34px }
.sub_philo .circle_wrap dt { position: relative; color: var(--black-color03); font-weight: 600; font-size: 120%; line-height: normal; letter-spacing: -0.02em; }
.sub_philo .circle_wrap dt::before {  margin-bottom: 19px; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; color: var(--point-white); text-align: center; font-family: var(--font-type01); font-size: var(--title-15); font-weight: 500; border-radius: 100%; line-height: normal; letter-spacing: 0; }
.sub_philo .circle_wrap dd { color: var(--black-color06); font-weight: 400; font-size: var(--title-17); line-height: 1.56; letter-spacing: -0.03em; box-sizing: border-box; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color04); }
.sub_philo .circle_wrap ul li:nth-child(1) dt::before { background: #4EAEDE; content: '01'; }
.sub_philo .circle_wrap ul li:nth-child(2) dt::before { background: #7BC142; margin-left: auto; content: '05'; }
.sub_philo .circle_wrap ul li:nth-child(3) dt::before { background: #3E82CC; content: '02'; }
.sub_philo .circle_wrap ul li:nth-child(4) dt::before { background: #4A3D8E; margin-left: auto; content: '04'; }
.sub_philo .circle_wrap ul li:last-child dt::before { background: #445DB2; margin-inline: auto; content: '03'; }


@media screen and (max-width: 1282px){
    .sub_philo .circle_wrap dd br { display: none; }
}

@media screen and (max-width: 1280px){
    .sub_philo .circle_wrap ul { gap: 60px 480px; }
    .sub_philo .circle_wrap ul li { width: calc(50% - 240px); }
    .sub_philo .circle_wrap .circle_box { width: 450px; height: 450px; }
}

@media screen and (max-width: 1023px){
    .sub_philo .philo_title { margin-bottom: clamp(70px, 14vw, 142px); }
    .sub_philo .philo_title h4 { font-size: 210%; margin-top: clamp(6px, 1.2vw, 12px); }
    .sub_philo .ellip_wrap { margin-top: clamp(20px, 4vw, 40px); }
    .sub_philo .ellip_wrap .ellip_txt span { font-size: 170%; }
    .sub_philo .ellip_wrap .ellip_txt span::before { width: clamp(150px, 25vw, 250px); height: clamp(150px, 25vw, 250px); }
    .sub_philo .philo_desc { margin-top: clamp(70px, 14vw, 142px); }
    .sub_philo .ellip_wrap strong { font-size: 170%; }

    
    .sub_philo .circle_wrap .circle_box { position: static; left: unset; top: unset; transform: unset; margin-inline: auto; margin-bottom: 60px; }
    .sub_philo .circle_wrap .circle_box .circle { padding: clamp(25px, 5.5vw, 55px); }
    .sub_philo .circle_wrap .circle_box .circle span { padding: clamp(25px, 10vw, 56px); }
    .sub_philo .circle_wrap ul { gap: clamp(30px, 6vw, 60px) 40px; justify-content: flex-start; }
    .sub_philo .circle_wrap ul li { width: calc(50% - 20px); }
    .sub_philo .circle_wrap dt::before { margin-bottom: clamp(10px, 1.9vw, 19px); width: 33px; height: 33px; }
    .sub_philo .circle_wrap dd { margin-top: clamp(10px, 2vw, 20px); padding-top: clamp(10px, 2vw, 20px); }

    .sub_philo .circle_wrap ul li:nth-child(even) { text-align: left; }
    .sub_philo .circle_wrap ul li:nth-child(2) dt::before { margin-right: auto; margin-left: unset; }
    .sub_philo .circle_wrap ul li:nth-child(4) dt::before { margin-right: auto; margin-left: unset; }
    .sub_philo .circle_wrap ul li:last-child { margin-top: unset; width: calc(50% - 20px); max-width: unset; text-align: left; margin-inline: 0; }
    .sub_philo .circle_wrap ul li:last-child dt::before { margin-inline: 0 auto; }

    .sub_philo .philo_cont.gray_bg::before { height: clamp(60px, 12vw, 120px); }
    .sub_philo .philo_cont + .philo_cont { margin-top: clamp(60px, 12vw, 120px); padding-top: clamp(60px, 12vw, 120px); padding-bottom: clamp(60px, 12vw, 120px); }
    
    
}

@media screen and (max-width: 860px){
    .sub_philo .philo_title h4 { font-size: 200%; }
    .sub_philo .philo_title p { font-size: 120%; }
    .sub_philo .ellip_wrap .ellip_txt span { font-size: 160%; }
    
    .sub_philo .ellip_wrap strong { font-size: 160%; }
    .sub_philo .circle_wrap dt { font-size: 110%; }
    .sub_philo .circle_wrap dt::before { width: 30px; height: 30px; }
}

@media screen and (max-width: 767px){
    .sub_philo .circle_wrap .circle_box { position: static; left: unset; top: unset; transform: unset; width: 59vw; height: 59vw; margin-inline: auto; margin-bottom: clamp(40px, 6vw, 60px); padding: clamp(35px, 5vw, 50px); }
    .sub_philo .circle_wrap ul { flex-wrap: wrap; width: 100%; gap: 30px; }
    .sub_philo .circle_wrap ul li { width: 100%; }
    .sub_philo .circle_wrap ul li:last-child { width: 100%; }
    
    .sub_philo .circle_wrap dd { text-wrap: balance; }
    
}

@media screen and (max-width: 640px){
    .sub_philo .philo_title h4 { font-size: 190%; }
    .sub_philo .philo_title p { font-size: 110%; }
    .sub_philo .ellip_wrap .ellip_txt span { font-size: 150%; }
    
    .sub_philo .ellip_wrap strong { font-size: 150%; }
    .sub_philo .circle_wrap dt::before { width: 27px; height: 27px; }

    .sub_philo .ellip_wrap .ellip_box .ellip .item::before,
    .sub_philo .ellip_wrap .ellip_box .ellip .item::after { width: 3px; height: 3px; top: -1px; margin-left: -1px; }
    .sub_philo .ellip_wrap .ellip_box .ellip .item::after { top: auto; bottom: -1px; }
    
}

@media screen and (max-width: 479px){
    .sub_philo .circle_wrap .circle_box { width: 80vw; height: 80vw; }
    .sub_philo .philo_title h4 { font-size: 180%; }
    .sub_philo .philo_title p { font-size: 100%; }
    .sub_philo .ellip_wrap strong { font-size: 140%; }
    .sub_philo .ellip_wrap .ellip_txt span { font-size: 140%; }
    
    .sub_philo .circle_wrap ul { gap: 20px; }
    .sub_philo .circle_wrap dt::before { width: 24px; height: 24px; }
}

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

    인증서

───────────────────────────────────────────────────────────*/
.sub_patent .patent_wrap { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.sub_patent .patent_wrap li { width: calc(100% / 4 - 24px); box-sizing: border-box; }
.sub_patent .patent_wrap .img { position: relative; width: 100%; padding: 10px; box-sizing: border-box; }
.sub_patent .patent_wrap .img::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; clip-path: polygon(81% 0, 100% 0, 100% 100%, 0 100%); background: var(--border-color03); }
.sub_patent .patent_wrap .img::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; clip-path: polygon(0 0, 99% 0, 4% 97%, 0% 100%); background: var(--border-color01); }
.sub_patent .patent_wrap .img span { position: relative; z-index: 2; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--border-color01); }
.sub_patent .patent_wrap dl { text-align: center; margin-top: 24px; }
.sub_patent .patent_wrap dt { color: var(--black-color03); font-weight: 600; font-size: 110%; line-height: normal; letter-spacing: -0.02em; }
.sub_patent .patent_wrap dd { margin-top: 9px; color: var(--black-color06); font-weight: 300; font-size: var(--title-17); line-height: 1.47; letter-spacing: -0.03em; font-family: var(--font-type03); }

@media screen and (max-width: 1023px){
    .sub_patent .patent_wrap { gap: 20px; }
    .sub_patent .patent_wrap li { width: calc(100% / 4 - 15px); }
    .sub_patent .patent_wrap dl { margin-top: clamp(15px, 2.4vw, 24px); }
    .sub_patent .patent_wrap dd { margin-top: clamp(5px, 0.9vw, 9px); }
}

@media screen and (max-width: 860px){
    .sub_patent .patent_wrap li { width: calc(100% / 3 - 13.34px); }
}

@media screen and (max-width: 640px){
    .sub_patent .patent_wrap li { width: calc(100% / 2 - 10px); }
}

@media screen and (max-width: 479px){
    .sub_patent .patent_wrap .img { padding: 5px; }
}

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

    오시는 길

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

.sub_location .map { width: 100%; height: 560px; margin-top: 30px; margin-bottom: 41px; }
.sub_location dl { display: flex; flex-wrap: wrap; gap: 10px 9px; box-sizing: border-box; }
.sub_location dt { color: var(--black-color03); font-weight: 600; font-size: var(--title-17); line-height: normal; }
.sub_location dd { color: var(--black-color06); font-weight: 400; font-size: var(--title-17); line-height: normal; letter-spacing: -0.02em; }
.sub_location .addr_info { display: flex; flex-direction: column; align-items: center; gap: 17px; }
.sub_location .addr_info .flex_des { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 0; width: 100%; }
.sub_location .addr_info .flex_des dl:has(+ dl) { position: relative; margin-right: 28px; padding-right: 29px; }
.sub_location .addr_info .flex_des dl:has(+ dl)::after { content: ''; position: absolute; right: 0; top: 4px; width: 1px; height: 12px; background: var(--border-color04); }
.sub_location .loca_cont { box-sizing: border-box; }
.sub_location .loca_cont + .loca_cont { margin-top: 100px; padding-top: 100px; border-top: 1px solid var(--border-color01); }
.sub_location .ico_wrap { margin-top: 40px; margin-inline: auto; max-width: 169px; }
.sub_location .seoul_office dd { letter-spacing: 0; }

@media screen and (max-width: 1023px){
    .sub_location .map { margin-top: clamp(15px, 3vw, 30px); margin-bottom: clamp(20px, 4vw, 41px); height: clamp(300px, 56vw, 560px); }
    .sub_location .loca_cont + .loca_cont { margin-top: clamp(50px, 10vw, 100px); padding-top: clamp(50px, 10vw, 100px); }
    
    .sub_location .addr_info { gap: clamp(15px, 1.7vw, 17px) 15px; }
    .sub_location .addr_info .flex_des dl:has(+ dl) { margin-right: clamp(14px, 2.8vw, 28px); padding-right: clamp(14px, 2.8vw, 29px); }
    .sub_location .addr_info .flex_des dl:has(+ dl)::after { top: 3px; }
    .sub_location .ico_wrap { margin-top: clamp(20px, 4vw, 40px); width: 40%; }

    .sub_location dt { font-size: max(14px, var(--title-17)); }
    .sub_location dd { font-size: max(14px, var(--title-17)); }
    
}

@media screen and (max-width: 860px){
    
    .sub_location .addr_info .flex_des dl:has(+ dl)::after { height: 10px; top: 4px; }
}

@media screen and (max-width: 640px){
    
    .sub_location .addr_info .flex_des dl:has(+ dl)::after { height: 9px; top: 4px; }
}

@media screen and (max-width: 479px){
    
    .sub_location .ico_wrap { width: 30%; }

    
}

@media screen and (max-width: 330px){
    .sub_location .addr_info { align-items: flex-start; }
    .sub_location .addr_info .flex_des { flex-direction: column; justify-content: flex-start; }
    .sub_location dl { flex-direction: column; width: 100%; }
    .sub_location .ico_wrap { margin-inline: 0 auto; }
}



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

    비지니스(OBM, CONTAINER)

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

.sub_busi { position: relative; overflow: hidden; }
.sub_busi::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--border-color01); z-index: 1; }
.sub_busi ol { position: relative; z-index: 2; }
.sub_busi ol > li { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sub_busi ol > li:not(:last-child) { padding-bottom: 80px; }
.sub_busi .step_box { display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; background: var(--point-color01); border-radius: 100%; box-sizing: border-box; padding: 10px; }
.sub_busi .step_box .step { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; text-align: center; width: 100%; height: 100%; border: 1px dashed rgba(255, 255, 255, 0.4); border-radius: inherit; }
.sub_busi .step_box .step_num { color: rgba(255, 255, 255, 0.6); font-weight: 500; font-size: var(--title-16); line-height: normal; letter-spacing: -0.02em; }
.sub_busi .step_box .step_title { color: var(--point-white); font-weight: 400; font-size: var(--title-17); line-height: normal; letter-spacing: -0.02em; }

.sub_busi .step_con { justify-content: space-between; align-items: flex-start; margin-top: 80px; flex-wrap: wrap; }
.sub_busi .step_con > div { width: 50%; box-sizing: border-box; }
.sub_busi .step_con.flex_rev { flex-direction: row-reverse; }
.sub_busi .step_con .img_wrap { padding-right: 120px; }
.sub_busi .step_con .info_wrap { padding-left: 120px; }
.sub_busi .step_con.flex_rev .img_wrap { padding-right: 0; padding-left: 120px; }
.sub_busi .step_con.flex_rev .info_wrap { padding-left: 0; padding-right: 120px; }

.sub_busi .step_con dt { color: var(--black-color01); font-weight: 600; font-size: 140%; letter-spacing: -0.03em; line-height: normal; }
.sub_busi .step_con dt small { position: relative; display: block; margin-top: 12px; color: var(--black-color03); font-weight: 500; font-size: var(--title-19); letter-spacing: 0; background: var(--point-white); }
.sub_busi .step_con dt small span { position: relative; display: inline-block; background: var(--point-white); z-index: 2; box-sizing: border-box; padding-right: 15px; }
.sub_busi .step_con dt small::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 1px; background: var(--black-color03); }
.sub_busi .step_con dd { margin-top: 28px; }
.sub_busi .chk_text_wrap { box-sizing: border-box; padding: 15px 20px 13px; background: rgba(23, 28, 97, 0.05); margin-top: 30px; }

.sub_busi .step_con dd > ul + ul { margin-top: 24px; }
.sub_busi .step_con dd li:has(.chk_title) + li { margin-top: 12px; }

.sub_busi .contents_line { position: absolute; left: calc(50% - 1px); top: 24px; width: 3px; background: var(--point-color01); z-index: 2; }

.contai_wrap { position: relative; }
.sub_contai_com { display: none; position: absolute; left: 50%; top: 0; transform: translateX(-50%) !important; width: 100%; }
.sub_contai_com.on { display: block; overflow: hidden; }

.contai_btn_wrap { display: flex; justify-content: center; align-items: center; margin-bottom: 50px; }
.contai_btn_wrap li { display: flex; align-items: center; position: relative; box-sizing: border-box; color: var(--black-color08); font-weight: 400; font-size: var(--title-19); line-height: normal; letter-spacing: -0.03em; }
.contai_btn_wrap li:has(+ li) { padding-right: 40px; margin-right: 40px; }
.contai_btn_wrap li:has(+ li)::before { content: ''; position: absolute; right: 0; top: 4px; width: 1px; height: 14px; background: var(--border-color01); }
.contai_btn_wrap li a { font-size: inherit; color: inherit; font-weight: inherit; }
.contai_btn_wrap li.on { color: var(--point-color01); font-weight: 600; }

@media screen and (max-width: 1023px){
    .contai_btn_wrap li:has(+ li) { margin-right: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
    .sub_busi ol > li:not(:last-child) { padding-bottom: clamp(40px, 8vw, 80px); }
    .sub_busi .step_box { width: 140px; height: 140px; padding: clamp(5px, 1vw, 10px); }
    .sub_busi .step_box .step { gap: clamp(5px, 0.7vw, 7px); }
    
    .sub_busi .step_con { margin-top: clamp(40px, 8vw, 80px); }
    .sub_busi .step_con dt small { margin-top: clamp(6px, 1.2vw, 12px); }
    .sub_busi .step_con dt small span { padding-right: clamp(10px, 1.5vw, 15px); }
    .sub_busi .step_con dd { margin-top: clamp(14px, 2.8vw, 28px); }
    .sub_busi .chk_text_wrap { margin-top: clamp(15px, 3vw, 30px); padding: clamp(10px, 1.5vw, 15px) clamp(10px, 2vw, 20px); }
    .sub_busi .step_con .img_wrap { padding-right: clamp(60px, 9vw, 120px); }
    .sub_busi .step_con .info_wrap { padding-left: clamp(60px, 9vw, 120px); }
    .sub_busi .step_con.flex_rev .img_wrap { padding-right: 0; padding-left: clamp(60px, 9vw, 120px); }
    .sub_busi .step_con.flex_rev .info_wrap { padding-left: 0; padding-right: clamp(60px, 9vw, 120px); }

    .sub_busi .step_con dd li:has(.chk_title) + li { margin-top: clamp(6px, 1.2vw, 12px); }
    .sub_busi .step_con dd > ul + ul { margin-top: clamp(12px, 2.4vw, 24px); }
}

@media screen and (max-width: 860px){
    .sub_busi .step_box { width: 130px; height: 130px; }
    .contai_btn_wrap li:has(+ li)::before { height: 12px; }
}

@media screen and (max-width: 640px){
    .contai_btn_wrap li:has(+ li)::before { top: 3px; }
    .sub_busi::before { left: 60px; }
    .sub_busi .contents_line { left: 59px; }
    .sub_busi ol > li { align-items: flex-start; }
    .sub_busi .step_box { width: 120px; height: 120px; }
    .sub_busi .step_con { gap: clamp(20px, 3vw, 30px); }
    .sub_busi .step_con > div { width: 100%; }
    .sub_busi .step_con .img_wrap { padding-right: 0; padding-left: 120px; }
    .sub_busi .step_con .info_wrap { padding-left: 120px; }
    .sub_busi .step_con.flex_rev .img_wrap { padding-right: 0; padding-left: 120px; }
    .sub_busi .step_con.flex_rev .info_wrap { padding-right: 0; padding-left: 120px; }
}

@media screen and (max-width: 479px){
    .contai_btn_wrap li:has(+ li)::before { height: 10px; top: 4px; }
    .sub_busi .step_box { width: 110px; height: 110px; }
    .sub_busi::before { left: 55px; }
    .sub_busi .contents_line { left: 53px; }
    .sub_busi .step_con .img_wrap { padding-left: 100px; }
    .sub_busi .step_con .info_wrap { padding-left: 100px; }
    .sub_busi .step_con.flex_rev .img_wrap { padding-left: 100px; }
    .sub_busi .step_con.flex_rev .info_wrap { padding-left: 100px; }
}

@media screen and (max-width: 410px){
    .sub_busi .step_box { width: 100px; height: 100px; }
    .sub_busi .contents_line { left: 49px; }
    .sub_busi::before { left: 50px; }
    .sub_busi .step_con .img_wrap { padding-left: 80px; }
    .sub_busi .step_con .info_wrap { padding-left: 80px; }
    .sub_busi .step_con.flex_rev .img_wrap { padding-left: 80px; }
    .sub_busi .step_con.flex_rev .info_wrap { padding-left: 80px; }
    .sub_busi .step_con dt small::after { display: none; }
}

@media screen and (max-width: 350px){
    .sub_busi .step_box { width: 80px; height: 80px; }
    .sub_busi .contents_line { left: 39px; }
    .sub_busi::before { left: 40px; }
    .sub_busi .step_con .img_wrap { padding-left: 70px; }
    .sub_busi .step_con .info_wrap { padding-left: 70px; }
    .sub_busi .step_con.flex_rev .img_wrap { padding-left: 70px; }
    .sub_busi .step_con.flex_rev .info_wrap { padding-left: 70px; }
    .sub_busi .step_box .step_num { font-size: 12px; }
    .sub_busi .step_box .step_title { font-size: 13px; }
}


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

    연구소 소개

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

.sub_labo .img_box { margin-bottom: 60px; }
.sub_labo .img_wrap { display: flex; flex-wrap: wrap; gap: 20px 23px;  }
.sub_labo .img_wrap li { width: calc(100% / 3 - 15.34px); }
.sub_labo .img_box span { display: none; color: var(--black-color03); font-size: var(--title-18); font-weight: 300; font-family: var(--font-type03); margin-top: 15px; }

.sub_labo dl { display: flex; box-sizing: border-box; }
.sub_labo dt { box-sizing: border-box; padding-right: 15px; width: 380px; flex-shrink: 0; }
.sub_labo dd { color: var(--black-color06); font-weight: 300; font-size: var(--title-18); font-family: var(--font-type03); line-height: 1.78; letter-spacing: -0.02em; box-sizing: border-box; padding-right: 10px; }
.sub_labo dl + dl { margin-top: 60px; padding-top: 60px; border-top: 1px solid var(--border-color01); }

.sub_labo dd strong { display: block; color: var(--black-color03); font-weight: 400; margin-bottom: 15px; }

@media screen and (max-width: 1023px){
    .sub_labo .img_box { margin-bottom: clamp(30px, 6vw, 60px); }
    .sub_labo .img_wrap { gap: 20px; }
    .sub_labo .img_wrap li { width: calc(100% / 3 - 13.34px); }
    .sub_labo dt { width: clamp(240px, 34vw, 380px); }
    .sub_labo dl + dl { margin-top: clamp(30px, 6vw, 60px); padding-top: clamp(30px, 6vw, 60px); }
    .sub_labo dd strong { margin-bottom: clamp(10px, 1.5vw, 15px); }
}

@media screen and (max-width: 860px){
    .sub_labo .img_wrap { gap: 20px 15px; }
    .sub_labo .img_wrap li { width: calc(100% / 3 - 10px); }
}

@media screen and (max-width: 640px){
    .sub_labo .img_wrap { flex-wrap: nowrap; overflow: hidden; overflow-x: auto; width: calc(100% + 30px); box-sizing: border-box; padding-right: 15px; margin-left: -15px; }
    .sub_labo .img_wrap::-webkit-scrollbar { display: none; }
    .sub_labo .img_wrap li { width: calc(100% / 1.5 - 17.5px); flex-shrink: 0; box-sizing: border-box; }
    .sub_labo .img_wrap li:first-child { margin-left: 15px; }
    .sub_labo .img_box span { display: block; }
    .sub_labo dl { flex-wrap: wrap; gap: 15px; }
    .sub_labo dt { width: 100%; }
    .sub_labo dd { width: 100%; }
    
}

@media screen and (max-width: 479px){
    .sub_labo .img_box span { margin-top: 10px; }
}


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

    제품상담신청

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

#wrap input[type="checkbox"] { display:none; }
#wrap input[type="checkbox"] + label {cursor:pointer;font-size:var(--title-17);color:var(--black-color03);font-weight:500;}
#wrap input[type="checkbox"] + label strong{font-size:inherit;color:var(--point-color01);font-weight:inherit;}
#wrap input[type="checkbox"] + label:before, 
#wrap input[type="checkbox"] + label::before { display:inline-block; content:""; width:22px; height:22px;margin:0 11px 0 0; vertical-align:middle; background:url("../images/sub/chk_off.svg") no-repeat 0 50%; cursor:pointer;background-size:auto 100%; transition: background 0.4s;}
#wrap input[type="checkbox"]:checked + label:before, 
#wrap input[type="checkbox"]:checked + label::before { background:url("../images/sub/chk_on.svg") no-repeat 0 50%;background-size:auto 100%; transition: background 0.4s;}

#wrap .bbs_write_wrap{box-sizing:border-box;padding:30px 30px;gap:20px;display: flex;flex-direction: column;flex-wrap:wrap;border-top:1px solid var(--black-color03);border-bottom:1px solid var(--border-color01);}
#wrap .bbs_write_wrap dl{display: flex;flex-wrap:wrap;width:100%;align-items: center;}
#wrap .bbs_write_wrap dl dt{width:190px;font-size:var(--title-17);color:var(--black-color04);font-weight:500;display: flex;align-items: center;height:40px;text-align:left; letter-spacing: -0.02em; box-sizing: border-box; padding-right: 15px;}
#wrap .bbs_write_wrap dl dt .require_dot{font-size:inherit;color:var(--point-color01);font-weight:inherit;display: inline-block;margin-left:3px;}
#wrap .bbs_write_wrap dl dd{box-sizing:border-box;width:calc(100% - 190px);min-height:40px;display: flex;align-items: center; font-size: var(--title-17); color: var(--black-color03); font-family: var(--font-type03); font-weight: 400; }
#wrap .bbs_write_wrap dl dd:has(.short_input) { max-width: 330px; }
#wrap .bbs_write_wrap dl dd ul{display: flex;gap:20px;align-items: center;height:100%;flex-wrap:wrap;}
#wrap .bbs_write_wrap dl dd input[type="text"]{width:100%;height:40px;box-sizing:border-box;border:1px solid var(--border-color02);padding:0 15px;font-size:var(--title-17);color:var(--black-color03);font-weight:400; font-family: var(--font-type03);}
#wrap .bbs_write_wrap dl dd input[type="text"]:focus, 
#wrap .bbs_write_wrap textarea:focus{border-color:var(--black-color03);}
#wrap .bbs_write_wrap dl dd input[type="text"]::place-holder, 
#wrap .bbs_write_wrap textarea::placeholder{color:var(--black-color08);}
#wrap .bbs_write_wrap dl dd label[for="is_secret-y"] { display: flex; align-items: center; color: var(--black-color06); font-weight: 300; font-size: var(--title-16); letter-spacing: -0.02em; }
#wrap .bbs_write_wrap dl dd label[for="is_secret-y"] + .edit-box { margin-top: 10px; }
#wrap .bbs_write_wrap dl dd > div { width: 100%; }
#wrap .bbs_write_wrap textarea{resize:none;width:100%;height:400px;box-sizing:border-box;border:1px solid var(--border-color01);padding:20px 15px;font-size:var(--title-17);color:var(--black-color03);font-weight:400;letter-spacing:-0.02em; font-family: var(--font-type03); }

#wrap .bbs_write_wrap dl dd input[type="file"] { width: auto; font-size: var(--title-15); }
#wrap .bbs_write_wrap dl dd #file1_filezone { font-size: var(--title-15); }

#wrap .bbs_write_wrap dl.captcha_dl dd{gap:10px;}
#wrap .bbs_write_wrap .captcha_wrap{border:1px solid var(--border-color01);padding:10px;box-sizing: border-box; display: flex; gap:10px;}
#wrap .bbs_write_wrap .captcha_input { display: flex; align-items: center; gap: 10px; }
#wrap .bbs_write_wrap #captcha_box{margin:0;}
#wrap .bbs_write_wrap #captcha_box img{width:180px !important;height:40px !important;box-sizing:border-box;border:1px solid var(--border-color01); flex-shrink: 0; }
#wrap .bbs_write_wrap #refreshCode{display: inline-flex; background: url('../images/sub/ico_reset.svg') no-repeat center; font-size: 0; cursor: pointer; min-width: 40px; width: 40px; height: 40px; border:1px solid var(--border-color01); box-sizing: border-box; padding: 0;}
#wrap .bbs_write_wrap input#captcha{max-width: 200px; margin:0;}

#wrap .policy_wrap{box-sizing: border-box; margin-top: 40px; border: 1px solid var(--border-color01); box-sizing: border-box; padding: 30px 24px; }
#wrap .policy_wrap a { position: relative; margin-left: 8px; display: inline-block; margin-bottom: 2px; color: var(--black-color05); font-weight: 400; font-size: 13px; line-height: normal; font-family: var(--font-type03); }
#wrap .policy_wrap a::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -1px; left: 0; background: var(--black-color05); }
#wrap .policy_wrap .area_box{margin-top: 20px;}
#wrap .area_box{width: 100%; padding:10px;box-sizing: border-box; background: var(--gray-bg01); }
#wrap .area_box textarea{width: 100%; padding:5px 7px; border:0; background: none; box-sizing: border-box; font-size: 13px; font-weight: 400; color: var(--black-color06); line-height: 1.5; font-family: var(--font-type03);height:70px;}
#wrap .area_box textarea::-webkit-scrollbar { width: 4px;}
#wrap .area_box textarea::-webkit-scrollbar-thumb {border-radius: 10px; background: var(--black-color01); }
#wrap .area_box textarea::-webkit-scrollbar-track {background:var(--border-color01);}

#wrap .btn_wrap { padding: 0; margin-top: 60px; text-align: center; }
#wrap .btn_wrap a { display: flex; justify-content: center; align-items: center; margin-inline: auto; width: 160px; height: 60px; color: var(--point-white); background: var(--point-color01); font-size: var(--title-20); font-weight: 500; letter-spacing: -0.02em; font-family: var(--font-type03); }

@media only screen and (max-width:1024px) {
    #wrap .bbs_write_wrap dl dt{width:120px;}
    #wrap .bbs_write_wrap dl dd{width:calc(100% - 120px);}

    #wrap .policy_wrap { margin-top: clamp(20px, 4vw, 40px); padding: clamp(15px, 3vw, 30px) clamp(15px, 2.4vw, 24px); }
    #wrap .policy_wrap .area_box { margin-top: clamp(15px, 2vw, 20px); }

    #wrap .btn_wrap { margin-top: clamp(30px, 6vw, 60px); }
}
@media only screen and (max-width:860px) {
    #wrap .bbs_write_wrap{padding:30px 15px;}
    #wrap .bbs_write_wrap { gap: 15px; }

    #wrap .btn_wrap a { width: 144px; height: 54px; }
    
}
@media only screen and (max-width:640px) {
    #wrap .bbs_write_wrap{padding:20px 0;}
    #wrap .bbs_write_wrap dl dt{height:35px;}
    #wrap .bbs_write_wrap dl dd{min-height:35px;}
    
    #wrap .bbs_write_wrap dl dd ul{gap:15px;}
    #wrap .bbs_write_wrap dl dd input[type="text"]{ height:35px;padding:0 15px;}
    #wrap .bbs_write_wrap textarea{height:150px;padding:15px 15px;}

    #wrap .bbs_write_wrap dl.captcha_dl dd{flex-wrap: wrap;}
    #wrap .bbs_write_wrap #captcha_box img { height: 35px !important; }
    #wrap .bbs_write_wrap .captcha_input { width: 100%; }
    #wrap .bbs_write_wrap input#captcha { max-width: 180px; }
    #wrap .bbs_write_wrap #refreshCode { width: 35px; height: 35px; min-width: 35px; }

    #wrap input[type="checkbox"] + label:before, 
    #wrap input[type="checkbox"] + label::before { width:20px; height:20px;margin:0 8px 0 0; }
}
@media only screen and (max-width:479px) {
    #wrap .bbs_write_wrap{padding:20px 0;}
    #wrap .bbs_write_wrap dl dt{width:100px;}
    #wrap .bbs_write_wrap dl dd{width:calc(100% - 100px);}
    #wrap .bbs_write_wrap dl dd ul{gap:6px 10px;}
    
    
    #wrap .bbs_write_wrap .captcha_wrap{width:100%;}
    
    #wrap .btn_wrap a { width: 130px; height: 49px; }
    
    #wrap .policy_wrap{margin-top:20px;}
    #wrap .policy_wrap .area_box{margin-top:10px;}

    #wrap input[type="checkbox"] + label:before, 
    #wrap input[type="checkbox"] + label::before { width:18px; height:18px;margin:0 6px 0 0; }
    #wrap .policy_wrap a { font-size: 12px; }
}


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

    포트폴리오

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

#wrap .sub_cate_wrap { margin-bottom: 0; border-top: 0; border-bottom: 0; }
#wrap .sub_cate_wrap ul.sub_cate { margin: 0; display: flex; justify-content: center; align-items: center; }
#wrap .sub_cate_wrap ul.sub_cate li { position: relative; padding: 0; float: unset; box-sizing: border-box; color: var(--black-color08); font-weight: 400; font-size: var(--title-19); font-family: var(--font-type03); letter-spacing: -0.02em; line-height: normal; }
#wrap .sub_cate_wrap ul.sub_cate li.on { color: var(--point-color01); font-weight: 600; }
#wrap .sub_cate_wrap ul.sub_cate li a { color: inherit; font-size: inherit; font-weight: inherit; }
#wrap .sub_cate_wrap ul.sub_cate li:has(+ li) { margin-right: 40px; padding-right: 40px;  }
#wrap .sub_cate_wrap ul.sub_cate li:has(+ li)::after { content: ''; position: absolute; right: 0; top: 4px; width: 1px; height: 14px; background: var(--border-color01); }
#wrap .sub_cate_wrap ul.sub_cate li + li:before { display: none; }

#wrap .sub_list { margin-top: 50px; padding-top: 23px; box-sizing: border-box; border-top: 1px solid var(--black-color03); }
#wrap .sub_list .list_array ul li { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; font-size: 0; }
#wrap .sub_list .list_array ul li:before, 
#wrap .sub_list .list_array ul li::before { left: 50%; top: 50%; transform: translate(-50%, -50%); }
#wrap .sub_list .list_count { color: var(--black-color06); font-weight: 400; font-family: var(--font-type03); letter-spacing: -0.02em; font-size: var(--title-16); }
#wrap .sub_list .list_count span { color: var(--black-color03); font-weight: 500; }
#wrap .sub_list .list_Galleryform ul { display: flex; flex-wrap: wrap; gap: 42px 32px; }
#wrap .sub_list .list_Galleryform ul li { margin: 0; width: calc(100% / 4 - 24px); }
#wrap .sub_list .list_Galleryform ul li:nth-child(4n+1) { clear: unset; float: unset; }
#wrap .sub_list .list_Galleryform ul li .thumb { position: relative; border: 0; padding: 0 0 100%; }
#wrap .sub_list .list_Galleryform ul li .thumb::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--black-color02); box-sizing: border-box; opacity: 0; transition: all 0.4s; }
#wrap .sub_list .list_Galleryform ul li .thumb img { transition: all 0.4s; transform: translate(-50%, -50%) scale(1); }
#wrap .sub_list .list_Galleryform ul li .txt_info { padding-top: 0; margin-top: 18px; }
#wrap .sub_list .list_Galleryform ul li .txt_info h3 { color: var(--black-color02); font-weight: 500; font-size: var(--title-18); line-height: normal; letter-spacing: 0; text-align: left; }


#wrap .sub_list .list .list_Listform > ul { display: flex; flex-wrap: wrap; gap: 20px; }
#wrap .sub_list .list .list_Listform > ul li:nth-child(2n+1) { clear: unset; float: unset; }
#wrap .sub_list .list .list_Listform > ul li { margin: 0; width: calc(100% / 2 - 10px); border: none; }

#wrap .sub_list .list .list_Listform > ul li dl { position: relative }
#wrap .sub_list .list .list_Listform > ul li dl::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--black-color02); opacity: 0; transition: all 0.4s; }
#wrap .sub_list .list .list_Listform > ul li dl dt { border-right: 0; flex-shrink: 0; }
#wrap .sub_list .list .list_Listform > ul li dl dt img { transition: all 0.4s; transform: scale(1); }
#wrap .sub_list .list .list_Listform > ul li dl dd { color: var(--black-color02); font-weight: 500; font-size: var(--title-18); line-height: normal; letter-spacing: 0; text-align: left; }
#wrap .sub_list .list .list_Listform > ul li dl dd h3 { font-weight: inherit; font-size: inherit; color: inherit; }

@media (hover: hover) and (pointer: fine){
    #wrap .sub_list .list_Galleryform ul li:hover .thumb::after { opacity: 1; }
    #wrap .sub_list .list_Galleryform ul li:hover .thumb img { transform: translate(-50%, -50%) scale(1.05); }
    
    #wrap .sub_list .list .list_Listform > ul li:hover dl::after { opacity: 1; }
    #wrap .sub_list .list .list_Listform > ul li:hover dl dt img { transform: scale(1.05); }
}

@media screen and (max-width: 1023px){
    #wrap .sub_cate_wrap ul.sub_cate li:has(+ li) { margin-right: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
    #wrap .sub_list { margin-top: clamp(25px, 5vw, 50px); padding-top: clamp(15px, 2.3vw, 23px); }
    #wrap .sub_list .list_Galleryform ul { gap: 20px; }
    #wrap .sub_list .list_Galleryform ul li { width: calc(100% / 4 - 15px); }
    #wrap .sub_list .list_Galleryform ul li .txt_info { margin-top: clamp(12px, 1.8vw, 18px); }
}

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

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

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

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

    포트폴리오 상세

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

#wrap .sub_view { border-bottom: 1px solid var(--border-color01); box-sizing: border-box; padding-bottom: 100px; }
#wrap .sub_view .hash_tag { text-align: center; color: var(--point-color01); font-size: var(--title-18); font-weight: 600; line-height: normal; margin-bottom: 14px; }
#wrap .sub_view .page_title { margin-bottom: 20px; }
#wrap .sub_view .desc { margin-bottom: 40px; text-align: center; color: var(--black-color06); font-size: var(--title-18); font-weight: 400; font-family: var(--font-type03); line-height: 1.78; letter-spacing: -0.02em; }
#wrap .sub_view .thumb { width: 100%; max-width: 500px; margin-inline: auto; }

@media screen and (max-width: 1023px){
    #wrap .sub_view { padding-bottom: clamp(50px, 10vw, 100px); }
    #wrap .sub_view .hash_tag { margin-bottom: clamp(10px, 1.4vw, 14px); }
    #wrap .sub_view .page_title { margin-bottom: clamp(15px, 2vw, 20px); }
    #wrap .sub_view .desc { margin-bottom: clamp(20px, 4vw, 40px); }
}

@media screen and (max-width: 479px){
    #wrap .sub_view .thumb { width: 80%; }
}

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

    개발 프로세스

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

.sub_pro table thead th { text-align: center; font-size: var(--title-17); font-weight: 600; letter-spacing: -0.03em; box-sizing: border-box; padding: 24px 10px; }
.sub_pro table thead th:first-child { background: var(--point-color05); color: var(--point-white); }
.sub_pro table thead th:not(:first-child) { background: var(--gray-bg04); color: var(--point-color05); border-bottom: 1px solid var(--border-color01); border-top: 1px solid var(--border-color01); border-right: 1px dashed var(--border-color01); }
.sub_pro table tbody th { background: var(--point-color01); color: var(--point-white); font-size: var(--title-20); font-weight: 600; letter-spacing: -0.03em; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.sub_pro table tbody th,
.sub_pro table tbody td { box-sizing: border-box; padding: 31px 12px; text-align: center; text-wrap: auto; }
.sub_pro table tbody td { position: relative; color: var(--black-color05); font-weight: 300; font-size: var(--title-16); letter-spacing: -0.05em; font-family: var(--font-type03); vertical-align: top; border-bottom: 1px solid var(--border-color01); border-right: 1px dashed var(--border-color01); }
.sub_pro table tbody td.short_td::after { content: ''; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 18px; height: 14px; background: url('../images/sub/ico_short_arw.svg') no-repeat center; background-size: 100% auto; transition: all 0.4s; }
.sub_pro table tbody td.long_td::after { content: ''; position: absolute; right: -50%; top: 50%; transform: translate(50%, -50%); width: 140px; height: 14px; background: url('../images/sub/ico_long_arw.svg') no-repeat center; background-size: 100% auto; transition: all 0.4s; }
.sub_pro table tbody td p { margin-top: 15px; }

.sub_pro table tbody td.on::after { filter: brightness(0) saturate(100%) invert(19%) sepia(7%) saturate(5989%) hue-rotate(201deg) brightness(93%) contrast(116%); }

.sub_pro .pro_m { display: none; }
.sub_pro .process_wrap { display: flex; width: 100%; text-align: center; }
.sub_pro .process_wrap ul { width: 100%; }
.sub_pro .process_wrap li { position: relative; width: 100%; display: flex; flex-direction: column; gap: 15px; justify-content: center; align-items: center; box-sizing: border-box; padding: 25px 0; }
.sub_pro .process_wrap li .step_wrap { font-size: var(--title-20); font-weight: 500; letter-spacing: -0.05em; box-sizing: border-box; color: var(--point-color05); font-family: var(--font-type01); }
.sub_pro .process_wrap li:first-child { background: var(--point-color01); color: var(--point-white); font-size: var(--title-20); letter-spacing: -0.03em;  }
.sub_pro .process_wrap li:not(:first-child) { background: var(--point-white); font-size: var(--title-18); letter-spacing: -0.05em; font-family: var(--font-type03); color: var(--black-color05); border-bottom: 1px solid var(--border-color01); }

.sub_pro .process_body li.short_li::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%) rotate(90deg); width: 18px; height: 14px; background: url('../images/sub/ico_short_arw.svg') no-repeat center; background-size: 100% auto; z-index: 2; transition: all 0.4s; }
.sub_pro .process_body li.long_li::after { content: ''; position: absolute; left: 50%; top: 150%; transform: translate(-50%, -50%) rotate(90deg); width: 120px; height: 14px; background: url('../images/sub/ico_long_arw.svg') no-repeat center; background-size: 100% auto; z-index: 2; transition: all 0.4s; }
.sub_pro .process_wrap + .process_wrap { margin-top: 160px; }

.sub_pro .pro_m .process_wrap.aos-animate li:nth-child(2)::after { transition-delay: 0.6s; }
.sub_pro .pro_m .process_wrap.aos-animate li:nth-child(3)::after { transition-delay: 1.2s; }
.sub_pro .pro_m .process_wrap.aos-animate li:nth-child(4)::after { transition-delay: 1.8s; }
.sub_pro .pro_m .process_wrap.aos-animate li:nth-child(5)::after { transition-delay: 2.4s; }
.sub_pro .pro_m .process_wrap.aos-animate li:nth-child(6)::after { transition-delay: 3.0s; }
.sub_pro .pro_m .process_wrap.aos-animate li::after { filter: brightness(0) saturate(100%) invert(19%) sepia(7%) saturate(5989%) hue-rotate(201deg) brightness(93%) contrast(116%); }

@media screen and (max-width: 1280px){
    .sub_pro table col:nth-child(1) { width: 140px; }
}

@media screen and (max-width: 1240px){
    .sub_pro table tbody td.long_td::after { width: calc(100% + 30px); }
}

@media screen and (max-width: 1023px){
    .sub_pro table col:first-child { width: 12.5%; }
    .sub_pro .process_wrap + .process_wrap { margin-top: clamp(40px, 16vw, 160px); }
    .sub_pro .process_wrap li { padding: clamp(15px, 2.5vw, 25px) 0; }

    .sub_pro .pro_pc { display: none; }
    .sub_pro .pro_m { display: block; }
}

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

@media screen and (max-width: 640px){
    .sub_pro .process_wrap li { gap: 10px; }
}

@media screen and (max-width: 479px){
    .sub_pro .process_wrap + .process_wrap { margin-top: 40px; }
}