@charset "utf-8";
/*───────────────────────────────────────────────────────────

	sub common

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



    #container:has(.full_sec) { max-width: 100%; width: 100%; }

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

    #header.sub_hd { position: fixed; }
    #header.sub_hd:not(.on) { background: var(--trans-color); }
    #header.sub_hd:not(.on) .header_cont { border-color: rgba(255, 255, 255, 0.2); }
    #header.sub_hd:not(.on) .header_cont .hd_logo a { background: url(../images/skin/hd_logo_ov.svg) no-repeat left center; background-size: auto 100%; }
    #header.sub_hd:not(.on) .hd_lnb > li > a, #header.sub_hd:not(.on) .hd_right .multi_lang .icon, #header.sub_hd:not(.on) .hd_right .all_cate { filter: var(--filter-white); }
    #header.sub_hd:not(.on) .hd_right .multi_lang ul li a { color: var(--point-white); }

    .sub_visual { height: 540px; position: relative; background-image: url('../images/sub/sv_company.jpg');  }
    .sub_visual .sv_title { text-align: center; width: 100%; height: 100%; display: flex; align-items: center; color: var(--point-white); font-size: var(--title-20); box-sizing: border-box; padding-top: 23px; }
    .sub_visual .sv_title h2 { font-size: 350%; font-weight: 700; letter-spacing: -0.04em; }
    .sub_visual .sv_title p { color: rgba(255, 255, 255, 0.6); font-size: 100%; font-weight: 400; margin-top: 9px; letter-spacing: 0; }

    body:has(.sub_product) .sub_visual { background-image: url('../images/sub/sv_product.jpg'); }
    body:has(.bbs_write_box) .sub_visual { background-image: url('../images/sub/sv_inquiry.jpg'); }

    .sub_nav{ position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.4); }
    .sub_nav .w_custom { width: 100%; }
    .sub_nav .desc{ position: relative; display: flex; height: 60px; font-size: var(--title-17); font-weight: 400; }
    .sub_nav .desc :where(dt, dd){position: relative; height: 100%; box-sizing: border-box; border-left: 1px solid rgba(255, 255, 255, 0.2); }
    .sub_nav .desc dt a{display: flex;width: 59px; height: 100%; align-items: center;justify-content: center;font-size: 0;padding: 22px 21px 22px 20px;box-sizing: border-box;}
    .sub_nav .desc dt a img { width: 20px; height: 19px; }
    .sub_nav .desc dd:last-child { border-right: 1px solid rgba(255, 255, 255, 0.2); }
    .sub_nav .desc dd span{position: relative;display: flex;align-items: center;height: 100%;padding:2px 60px 0 23px;box-sizing: border-box; font-family: var(--font-type02); font-weight: 300;color: var(--point-white);min-width: 299px; line-height: 1.4;cursor: pointer; letter-spacing: -0.03em;}
    .sub_nav .desc dd span:before{position: absolute; content: ''; width: 6px; height: 6px; border: solid var(--point-white); border-width: 0 0 2px 2px; top: 46%; right: 26px; transform: translateY(-50%) rotate(-45deg); border-radius: 1px; transition: all 0.4s; }
    .sub_nav .desc dd.on span:before{transform: translateY(-50%) rotate(135deg); top: 48%; }
    .sub_nav .desc dd ul{position: absolute;top: calc(100% + 1px);left: 0;width: calc(100% + 2px);padding: 20px 0;background: var(--point-white);border:1px solid var(--border-color01); box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s; z-index: 10; }
    .sub_nav .desc dd.on ul{opacity: 1; pointer-events: all;}
    .sub_nav .desc dd ul li a{display: block;font-weight: 400;color: var(--black-color02);padding: 11px 24px;box-sizing: border-box;line-height: 1.4;}
    .sub_nav .desc dd ul li.on a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;font-weight: 500;}

    .page_title { box-sizing: border-box; padding-top: 112px; text-align: center; font-size: var(--title-20); }
    .page_title h3 { color: var(--black-color01); font-weight: 700; font-size: 280%; letter-spacing: -0.04em; }
    .page_title p { color: var(--black-color06); font-size: 100%; font-weight: 400; letter-spacing: -0.04em; margin-top: 21px; }

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

    @media screen and (max-width: 1023px){
        .sub_visual { height: clamp(350px, 52vw, 520px); }
        .sub_nav .desc dt a { padding: clamp(16px, 2vw, 21px); }
        .sub_visual .sv_title h2 { font-size: 330%; }
        .sub_visual .sv_title p { margin-top: clamp(5px, 0.9vw, 9px); }

        .page_title { padding-top: clamp(60px, 1.2vw, 112px); }
        .page_title h3 { font-size: 260%; }
        .page_title p { margin-top: clamp(15px, 2.1vw, 21px); }
    }

    @media screen and (max-width: 860px){
        .sub_nav .desc { height: 55px; }
        .sub_nav .desc dt a { width: 54px; }
        .sub_nav .desc dd span { min-width: 260px; padding: 0 55px 0 20px; }
        .sub_nav .desc dd span:before { right: 20px; }
        .sub_visual .sv_title { padding-top: 30px; }
        .sub_visual .sv_title h2 { font-size: 310%; }

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

    @media screen and (max-width: 640px){
        .sub_nav .desc dt { border-left: 0; }
        .sub_nav .desc dt a { width: 49px; }
        .sub_nav .desc { height: 50px; }
        .sub_nav .desc dd:not(:last-child) { display: none; }
        .sub_nav .desc dd { width: calc(100% - 49px); }
        .sub_nav .desc dd:last-child { border-right: 0; }
        .sub_visual .sv_title { padding-top: 35px; }
        .sub_visual .sv_title h2 { font-size: 280%; }

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

    @media screen and (max-width: 479px){
        .sub_visual .sv_title h2 { font-size: 260%; }

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

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

	대표 인사말
    
───────────────────────────────────────────────────────────*/

    .sub_about .flex_des { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 100px; }
    .sub_about .img_wrap { width: 42.9%; }
    .sub_about .txt_wrap { width: calc(57.1% - 100px); font-family: var(--font-type02); box-sizing: border-box; font-size: var(--title-20); padding-top: 43px; }
    .sub_about .txt_wrap h4 { color: var(--black-color01); font-weight: 600; font-size: 220%; line-height: 1.37; letter-spacing: -0.04em; }
    .sub_about .txt_wrap h4 strong { color: var(--point-color01); font-weight: 700; font-size: inherit; }
    .sub_about .txt_wrap .acc { color: var(--black-color03); font-weight: 500; font-size: 110%; letter-spacing: -0.04em; margin-block: 39px 40px; }
    .sub_about .txt_wrap .desc { color: var(--black-color06); font-weight: 400; font-size: 90%; line-height: 1.67; letter-spacing: -0.04em; }
    .sub_about .txt_wrap .desc + .desc { margin-top: 24px; }
    .sub_about .txt_wrap > strong { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; color: var(--black-color03); font-weight: 500; font-size: var(--title-20); letter-spacing: -0.04em; margin-top: 58px; }
    .sub_about .txt_wrap > strong .name { color: inherit; font-size: 150%; letter-spacing: inherit; font-weight: 600; box-sizing: border-box; padding-bottom: 2px; letter-spacing: -0.045em; }

    @media screen and (max-width: 1280px){
        .sub_about .flex_des { gap: 60px; }
        .sub_about .txt_wrap { width: calc(57.1% - 60px); }
    }

    @media screen and (max-width: 1023px){
        .sub_about .flex_des { flex-direction: column; gap: clamp(40px, 6vw, 60px); }
        .sub_about .img_wrap { width: 100%; }
        .sub_about .txt_wrap { width: 100%; padding-top: 0; }
        .sub_about .txt_wrap h4 { font-size: 210%; }
        .sub_about .txt_wrap .acc { margin-block: clamp(25px, 4vw, 40px); }
        .sub_about .txt_wrap .desc + .desc { margin-top: clamp(20px, 2.5vw, 25px); }
        .sub_about .txt_wrap > strong { margin-top: clamp(30px, 5.8vw, 58px); }

        
    }

    @media screen and (max-width: 860px){
        .sub_about .txt_wrap h4 { font-size: 190%; }
        .sub_about .txt_wrap > strong .sign { width: 125px; }
    }

    @media screen and (max-width: 640px){
        .sub_about .txt_wrap h4 { font-size: 180%; }
    }

    @media screen and (max-width: 479px){
        .sub_about .txt_wrap h4 { font-size: 160%; }
        .sub_about .txt_wrap > strong .sign { width: 100px; }
    }

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

	경영이념
    
───────────────────────────────────────────────────────────*/

    #container:has(.sub_philo) { padding-bottom: 0; }

    .sub_philo { width: 100%; background: url('../images/sub/img_philo_bg.jpg') no-repeat center / cover; box-sizing: border-box; padding-block: 93px 160px; }
    .sub_philo .sub_title { color: var(--point-white); text-align: center; font-size: var(--title-20); }
    .sub_philo .sub_title h4 { font-size: 250%; font-weight: 700; letter-spacing: 0; }
    .sub_philo .sub_title p { font-size: 110%; font-weight: 400; color: rgba(255, 255, 255, 0.8); margin-top: 20px; letter-spacing: 0; }

    .sub_philo .flex_des { position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px; margin-top: 119px; box-sizing: border-box; }
    .sub_philo .flex_des::before { content: ''; position: absolute; left: 50%; top: -60px; width: 1px; height: 60px; background: rgba(255, 255, 255, 0.5); }
    .sub_philo .flex_des > li { width: calc(100% / 3 - 26.67px); box-sizing: border-box; padding-inline: 30px; padding-block: 29px; height: 440px; display: flex; align-items: flex-end; }
    .sub_philo .flex_des > li:nth-child(1) { background: url('../images/sub/img_philo01.jpg') no-repeat center / cover; }
    .sub_philo .flex_des > li:nth-child(2) { background: url('../images/sub/img_philo02.jpg') no-repeat center / cover; margin-top: 80px; }
    .sub_philo .flex_des > li:nth-child(3) { background: url('../images/sub/img_philo03.jpg') no-repeat center / cover; }
    .sub_philo .flex_des .txt { color: var(--point-white); font-size: var(--title-20); }
    .sub_philo .flex_des .txt span { font-size: 150%; font-weight: 700; line-height: 1.27; letter-spacing: 0; }


    @media screen and (max-width: 1023px){
        .sub_philo { padding-block: clamp(40px, 9.3vw, 93px) clamp(100px, 16vw, 160px); }
        .sub_philo .flex_des { margin-top: clamp(60px, 12vw, 120px); padding-top: clamp(40px, 6vw, 60px); }
        .sub_philo .flex_des::before { height: clamp(40px, 6vw, 60px); top: -40px; }
        .sub_philo .flex_des > li { width: calc(100% / 2 - 20px); padding-inline: clamp(25px, 3vw, 30px); padding-block: clamp(25px, 3vw, 30px); height: clamp(330px, 44vw, 440px); }
        .sub_philo .flex_des > li:nth-child(2) { margin-top: 0; margin-left: auto; }

        .sub_philo .sub_title h4 { font-size: 230%; }
        .sub_philo .sub_title p { margin-top: clamp(15px, 2vw, 20px); }
    }

    @media screen and (max-width: 860px){
        .sub_philo .sub_title h4 { font-size: 210%; }
    }

    @media screen and (max-width: 640px){
        .sub_philo .sub_title h4 { font-size: 190%; }
        .sub_philo .flex_des { gap: 20px; }
        .sub_philo .flex_des > li { width: calc(100% / 2 - 10px); }
    }

    @media screen and (max-width: 479px){
        .sub_philo .sub_title h4 { font-size: 170%; }
        .sub_philo .flex_des > li { width: 100%; }
    }

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

	오시는 길
    
───────────────────────────────────────────────────────────*/

    .sub_location .loca_wrap + .loca_wrap { margin-top: 120px; }
    .sub_location .map { width: 100%; height: 519px; }
    .sub_location .info_wrap { display: flex; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box; padding-inline: 80px 40px; gap: 40px 120px; }
    .sub_location .info_wrap .com_name { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; width: 340px; min-height: 240px; box-sizing: border-box; padding-block: 39px 42px; padding-inline: 40px; color: var(--point-white); font-size: var(--title-20); margin-top: -80px; }
    .sub_location .info_wrap .com_name p { font-size: 90%; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, 0.5); }
    .sub_location .info_wrap .com_name h4 { font-size: 180%; font-weight: 500; letter-spacing: -0.04em; font-family: var(--font-type02); }
    .sub_location .info_wrap .com_info { width: calc(100% - 460px); margin-top: 61px; }
    .sub_location .info_wrap .com_info dl { display: flex; align-items: flex-start; gap: 40px; font-size: var(--title-20); }
    .sub_location .info_wrap .com_info dl + dl { margin-top: 20px; }
    .sub_location .info_wrap .com_info dt { display: flex; align-items: flex-start; gap: 20px; color: var(--black-color03); font-weight: 700; font-size: 90%; letter-spacing: 0;  flex-shrink: 0; width: 127px; }
    .sub_location .info_wrap .com_info dt > span { align-self: center; }
    .sub_location .info_wrap .com_info dt .ico { display: inline-flex; justify-content: center; align-items: center; background: var(--gray-bg01); border-radius: 100%; width: 36px; aspect-ratio: 1 auto; flex-shrink: 0; }
    .sub_location .info_wrap .com_info dt .ico::before { content: ''; display: block; }
    .sub_location .info_wrap .com_info dl:nth-child(1) dt .ico::before { width: 12px; height: 16px; }
    .sub_location .info_wrap .com_info dl:nth-child(1) dd { font-family: var(--font-type02); }
    .sub_location .info_wrap .com_info dl:nth-child(2) dt .ico::before { width: 15px; height: 15px; }
    .sub_location .info_wrap .com_info dl:nth-child(3) dt .ico::before { width: 19px; height: 17px; }
    .sub_location .info_wrap .com_info dd { align-self: flex-start; color: var(--black-color06); font-weight: 400; font-size: 90%; letter-spacing: -0.04em; box-sizing: border-box; padding-top: 6px; }

    .sub_location .loca_fine .com_name { background: var(--point-color01); }
    .sub_location .loca_chem .com_name { background: var(--point-color02); }

    
    .sub_location .loca_fine .info_wrap .com_info dl:nth-child(1) dt .ico::before { background: url('../images/sub/ico_mark.svg') no-repeat center; background-size: auto 100%; }
    .sub_location .loca_fine .info_wrap .com_info dl:nth-child(2) dt .ico::before { background: url('../images/sub/ico_tel.svg') no-repeat center; background-size: auto 100%; }
    .sub_location .loca_fine .info_wrap .com_info dl:nth-child(3) dt .ico::before { background: url('../images/sub/ico_fax.svg') no-repeat center; background-size: auto 100%; }

    .sub_location .loca_chem .info_wrap .com_info dl:nth-child(1) dt .ico::before { background: url('../images/sub/ico_mark02.svg') no-repeat center; background-size: auto 100%; }
    .sub_location .loca_chem .info_wrap .com_info dl:nth-child(2) dt .ico::before { background: url('../images/sub/ico_tel02.svg') no-repeat center; background-size: auto 100%; }
    .sub_location .loca_chem .info_wrap .com_info dl:nth-child(3) dt .ico::before { background: url('../images/sub/ico_fax02.svg') no-repeat center; background-size: auto 100%; }


    @media screen and (max-width: 1130px){
        .sub_location .info_wrap { padding-inline: 40px; }
    }

    @media screen and (max-width: 1023px){
        .sub_location .loca_wrap + .loca_wrap { margin-top: clamp(60px, 12vw, 120px); }
        .sub_location .map { height: clamp(350px, 52vw, 520px); }
        .sub_location .info_wrap { gap: clamp(20px, 4vw, 40px) clamp(40px, 10vw, 120px); padding-inline: clamp(25px, 4vw, 40px); }
        .sub_location .info_wrap .com_name { padding-inline: clamp(25px, 3vw, 40px); padding-block: clamp(25px, 3vw, 42px); width: 35%; min-height: clamp(140px, 22vw, 240px); }
        .sub_location .info_wrap .com_info { width: calc(65% - clamp(40px, 10vw, 120px)); margin-top: clamp(30px, 6vw, 61px); }
        .sub_location .info_wrap .com_info dl { gap: clamp(20px, 4vw, 40px); }
        .sub_location .info_wrap .com_info dl + dl { margin-top: clamp(15px, 2vw, 20px); }
    }

    @media screen and (max-width: 860px){
        .sub_location .info_wrap { flex-direction: column; }
        .sub_location .info_wrap .com_name { width: 95%; }
        .sub_location .info_wrap .com_info { margin-top: 0; width: 100%; }
        .sub_location .info_wrap .com_info dt { gap: 15px; }
        .sub_location .info_wrap .com_info dt span { min-width: 64px; }
        .sub_location .info_wrap .com_info dt .ico { width: 32px; height: 32px; }

        .sub_location .info_wrap .com_info dl:nth-child(1) dt .ico::before { width: 10px; height: 14px; }
        .sub_location .info_wrap .com_info dl:nth-child(2) dt .ico::before { width: 13px; height: 13px; }
        .sub_location .info_wrap .com_info dl:nth-child(3) dt .ico::before { width: 17px; height: 15px; }
    }

    @media screen and (max-width: 640px){
        .sub_location .info_wrap .com_name { width: 100%; margin-top: -20px; position: relative; z-index: 2; }

        .sub_location .info_wrap { padding: 0; }
        .sub_location .info_wrap .com_info dt { gap: 10px; }
        .sub_location .info_wrap .com_info dt span { min-width: 60px; }
        .sub_location .info_wrap .com_info dt .ico { width: 30px; height: 30px; }

        .sub_location .info_wrap .com_info dl:nth-child(1) dt .ico::before { width: 9px; height: 12px; }
        .sub_location .info_wrap .com_info dl:nth-child(2) dt .ico::before { width: 11px; height: 11px; }
        .sub_location .info_wrap .com_info dl:nth-child(3) dt .ico::before { width: 15px; height: 13px; }
    }

    @media screen and (max-width: 479px){
        .sub_location .info_wrap .com_info dl { flex-direction: column; gap: 15px 20px; }
        .sub_location .info_wrap .com_info dt { width: 100%; }
        .sub_location .info_wrap .com_info dt .ico { width: 28px; height: 28px; }
        .sub_location .info_wrap .com_info dd { padding-top: 0; }
    }

    @media screen and (max-width: 375px){
        
        .sub_location .info_wrap .com_info dt .ico { width: 26px; height: 26px; }
    }

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

	온라인 문의
    
───────────────────────────────────────────────────────────*/
    #container:has(.sub_bbs_write) { padding-bottom: 171px; }
    #wrap .bbs_write_box.sub_bbs_write { gap: 20px; }
    #wrap .bbs_write_box.sub_bbs_write .line2 { gap: 20px; }
    #wrap .bbs_write_box.sub_bbs_write .line2 dl { width: calc(50% - 10px); }
    #wrap .bbs_write_box.sub_bbs_write dl { background: var(--gray-bg02); padding-block: 19px; padding-inline: 30px; border: none; align-items: center; }
    #wrap .bbs_write_box.sub_bbs_write dl dt { display: inline-block; width: 160px; color: var(--black-color03); font-weight: 600; height: auto; min-height: unset; font-size: var(--title-18); font-family: var(--font-type02); box-sizing: border-box; padding-right: 15px; }
    #wrap .bbs_write_box.sub_bbs_write dl dt .require_dot { margin-top: 0; margin-left: 3px; color: var(--point-color01); font-size: 100%; }
    #wrap .bbs_write_box.sub_bbs_write dl dd { width: calc(100% - 160px); min-height: unset; }
    #wrap .bbs_write_box.sub_bbs_write dl dd input[type="text"],
    #wrap .bbs_write_box.sub_bbs_write dl dd input[type="password"], 
    #wrap .bbs_write_box.sub_bbs_write dl dd input[type="number"] { height: auto; font-size: var(--title-17); font-weight: 300; letter-spacing: -0.04em; color: var(--black-color03); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 1.5; }
    #wrap .bbs_write_box.sub_bbs_write dl dd textarea { font-size: var(--title-17); height: 178px; color: var(--black-color03); padding: 0; }
    #wrap .bbs_write_box.sub_bbs_write dl dd textarea::placeholder { color: var(--black-color10); }

    #wrap .bbs_write_box.sub_bbs_write dl.content_dl { align-items: flex-start; }

    #wrap .bbs_write_box.sub_bbs_write dl dd input[type="text"]:-webkit-autofill, 
    #wrap .bbs_write_box.sub_bbs_write dl dd input[type="password"]:-webkit-autofill, 
    #wrap .bbs_write_box.sub_bbs_write textarea:-webkit-autofill { -webkit-text-fill-color: var(--black-color03); }

    #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl { padding-block: 12px; padding-inline: 30px; }
    #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl dt { width: 160px; }
    #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl dd { width: calc(100% - 160px); gap: 30px; }
    #wrap .bbs_write_box.sub_bbs_write .captcha_wrap { gap: 10px; padding: 0; }
    #wrap .bbs_write_box.sub_bbs_write #captcha_box { width: 180px; height: 40px; }
    #wrap .bbs_write_box.sub_bbs_write #refreshCode { width: 40px; height: 40px; border: none; background: var(--black-color08) url('../images/sub/ico_reset.svg') no-repeat center/cover; background-size: 13px 17px; }
    #wrap .bbs_write_box.sub_bbs_write input#captcha { width: calc(100% - 260px); }

    #wrap .sub_policy { box-sizing: border-box; padding-block: 20px 19px; padding-inline: 30px; border: 1px solid var(--border-color01); }
    #wrap .sub_policy input[type="checkbox"] + label:before, #wrap .sub_policy input[type="checkbox"] + label::before { background: url('../images/sub/ico_check.svg') no-repeat center / cover; margin: 0; flex-shrink: 0; }
    #wrap .sub_policy input[type="checkbox"] + label { display: flex; gap: 11px; color: var(--black-color03); font-weight: 500; font-family: var(--font-type02); letter-spacing: -0.04em; }
    #wrap .sub_policy input[type="checkbox"] + label strong { font-weight: 600; }
    #wrap .sub_policy.sub_policy .chk_cont { justify-content: space-between; width: 100%; }
    #wrap .sub_policy.sub_policy .chk_cont a { color: rgba(51, 51, 51, 0.6); letter-spacing: 0; flex-shrink: 0; align-self: flex-start; }

    #wrap .main_more.arw.sub_arw { background: var(--point-color01); color: var(--point-white);  letter-spacing: 0; padding: 0 29px; }
    #wrap .main_more.arw.sub_arw:after { filter: var(--filter-white); }

    #wrap .btn_wrap { margin: 0 auto; padding: 0; padding-top: 60px; font-size: 0; vertical-align: top; display: inline-block; }

    @media (hover: hover) and (pointer: fine){
        #wrap .main_more.arw.sub_arw:hover { background: var(--point-color02); }
    }

    @media screen and (max-width: 1023px){
        #wrap .bbs_write_box.sub_bbs_write dl { padding-inline: clamp(20px, 3vw, 30px); }
        #wrap .bbs_write_box.sub_bbs_write dl dt { width: 130px; }
        #wrap .bbs_write_box.sub_bbs_write dl dd { width: calc(100% - 130px); }

        #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl { padding-inline: clamp(20px, 3vw, 30px); }
        #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl dt { width: 130px; }
        #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl dd { width: calc(100% - 130px);}

        #wrap .bbs_write_box.sub_bbs_write dl dd textarea { height: clamp(150px, 18vw, 178px); }

        #wrap .sub_policy { padding-inline: clamp(20px, 3vw, 30px); padding-block: clamp(15px, 2vw, 20px); }
        #wrap .btn_wrap { padding-top: clamp(40px, 6vw, 60px); }
    }

    @media screen and (max-width: 860px){
        #wrap .bbs_write_box.sub_bbs_write dl dt { width: 110px; }
        #wrap .bbs_write_box.sub_bbs_write dl dd { width: calc(100% - 110px); }

        #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl dt { width: 110px; }
        #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl dd { width: calc(100% - 110px);}
    }

    @media screen and (max-width: 640px){
        #wrap .bbs_write_box.sub_bbs_write dl { padding-block: 18px; }
        #wrap .bbs_write_box.sub_bbs_write .line2 dl { width: 100%; }
        #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl { padding-block: 18px; gap: 15px; }
        #wrap .bbs_write_box.sub_bbs_write dl.captcha_dl dd { gap: 20px; width: 100%; }
        #wrap .bbs_write_box.sub_bbs_write input#captcha { width: calc(100% - 250px); }

        #wrap .bbs_write_box.sub_bbs_write dl.content_dl { gap: 15px; }
        
    }

    @media screen and (max-width: 479px){
        #wrap .bbs_write_box.sub_bbs_write { gap: 15px; }
        #wrap .sub_policy input[type="checkbox"] + label { gap: 8px; }
        #wrap .bbs_write_box.sub_bbs_write input#captcha { width: 100%; }
    }

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

	회사연혁
    
───────────────────────────────────────────────────────────*/
    #container:has(.sub_history) { padding-top: 51px; }
    .history_wrap .cont { display: flex; flex-direction: column; }
    .history_wrap .thumb_wrap { position: relative; box-sizing: border-box; padding-bottom: 77px; }
    .history_wrap .thumb_wrap::before { content: ''; position: absolute; width: 1px; height: 100px; background: var(--border-color01); left: 50%; top: calc(100% - 77px);  }
    .history_wrap .thumb_wrap::after { content: ''; position: absolute; width: 1px; height: 0; background: var(--point-color01); left: 50%; top: calc(100% - 77px); transition: all 0.4s; }
    .history_wrap .thumb_wrap dl { font-size: var(--title-20);  text-align: center; box-sizing: border-box; padding-block: 101px 104px; padding-inline: 50px; }
    .history_wrap .thumb_wrap dl dt { color: var(--point-white); font-weight: 600; font-size: 250%; letter-spacing: 0; }    
    .history_wrap .thumb_wrap dl dd { color: rgba(255, 255, 255, 0.8); font-weight: 200; font-size: 110%; letter-spacing: -0.04em; margin-top: 22px; }
    .history_wrap .thumb_wrap .thumb { background: url('../images/sub/img_history_banner.jpg') no-repeat center / cover; }

    .history_wrap .history_box { position: relative; font-size: var(--title-20); width: 50%; box-sizing: border-box; }
    .history_wrap .history_box:not(:last-child)::before { content: ''; position: absolute; top: 23px; width: 1px; height: 100%; background: var(--border-color01);  }
    .history_wrap .history_box:not(:last-child)::after { content: ''; position: absolute; top: 23px; width: 1px; height: 0; background: var(--point-color01); transition: all 0.4s; }
    .history_wrap .history_box h4::before { content: ''; position: absolute; top: 24px; width: 9px; height: 9px; border-radius: 100%; background: var(--black-color08); box-shadow: 0 0 0 7px var(--border-color01); z-index: 2; }
    .history_wrap .history_box h4::after { content: ''; position: absolute; top: 28px; width: 60px; height: 1px; border-top: 1px dashed var(--black-color06); box-sizing: border-box; }
    .history_wrap .history_box:not(:last-child) { padding-bottom: 76px; }
    .history_wrap .history_box:nth-child(even) { align-self: flex-end; padding-left: 90px;  }
    .history_wrap .history_box:nth-child(even) h4::before { left: -4px; }
    .history_wrap .history_box:nth-child(even) h4::after { left: 0; }
    .history_wrap .history_box:nth-child(even)::before { left: 0; }
    .history_wrap .history_box:nth-child(even)::after { left: 0; }
    .history_wrap .history_box:nth-child(odd) { align-self: flex-start; text-align: right; padding-right: 91px; }
    .history_wrap .history_box:nth-child(odd)::before { left: 100%; }
    .history_wrap .history_box:nth-child(odd)::after { left: 100%; }
    .history_wrap .history_box:nth-child(odd) h4::before { left: calc(100% - 4px); }
    .history_wrap .history_box:nth-child(odd) h4::after { left: calc(100% - 60px); }
    .history_wrap .history_box:nth-child(odd) dl { justify-content: flex-end; }
    .history_wrap .history_box:nth-child(odd) dl dt { order: 2; padding-right: 0; padding-left: 15px; }
    .history_wrap .history_box:nth-child(odd) dl dd { order: 1; }
    .history_wrap .history_box h4 { color: var(--black-color01); font-size: 220%; font-weight: 700; letter-spacing: 0; margin-bottom: 19px; }
    .history_wrap .history_box h4 span { display: block; }
    .history_wrap .history_box dl { display: flex; font-size: var(--title-20); align-items: baseline; }
    .history_wrap .history_box dl + dl { margin-top: 14px; }
    .history_wrap .history_box dl dt { width: 70px; box-sizing: border-box; color: var(--black-color03); font-weight: 400; font-size: 110%; line-height: 1.46; letter-spacing: -0.04em; padding-right: 15px; }
    .history_wrap .history_box dl dd { width: calc(100% - 70px); color: var(--black-color06); font-weight: 400; font-size: 90%; line-height: 1.78; letter-spacing: -0.04em; font-family: var(--font-type02); }

    .history_wrap .thumb_wrap.aos-animate::after { height: 100px; }
    .history_wrap .history_box.aos-animate::after { height: 100%; }
    .history_wrap .cont > div.aos-animate + div h4 { color: var(--point-color01); }
    .history_wrap .cont > div.aos-animate + div h4::after { border-color: var(--point-color01); }
    .history_wrap .cont > div.aos-animate + div h4::before { background: var(--point-color01); box-shadow: 0 0 0 7px #DBE2F7; }

    .patent_wrap { margin-top: 138px; }
    .patent_wrap .flex_des { display: flex; flex-wrap: wrap; gap: 38px 20px; }
    .patent_wrap .flex_des li { width: calc(100% / 5 - 16px); }
    .patent_wrap .flex_des .img_wrap { box-sizing: border-box; height: 300px; display: flex; justify-content: center; align-items: center; padding-inline: 40px; background: var(--gray-bg02); }
    .patent_wrap .flex_des .img_box { box-shadow: var(--shadow-03); }
    .patent_wrap .flex_des dl { font-size: var(--title-20); font-family: var(--font-type02); text-align: center; margin-top: 20px; }
    .patent_wrap .flex_des dt { color: var(--black-color03); font-weight: 600; font-size: 100%; line-height: 1.5; letter-spacing: -0.03em; flex-shrink: 0; }
    .patent_wrap .flex_des dd { color: var(--black-color06); font-weight: 400; font-size: 90%; line-height: 1.67; letter-spacing: -0.03em; margin-top: 5px; }

    @media (max-width: 1280px){
        .patent_wrap .flex_des li { width: calc(100% / 4 - 15px);  }
    }

    @media (max-width: 1023px){
        .history_wrap .thumb_wrap dl {  padding-inline: clamp(25px, 5vw, 50px); }
        .history_wrap .thumb_wrap dl dd { margin-top: clamp(10px, 2vw, 22px); }
        .history_wrap .thumb_wrap { padding-bottom: clamp(40px, 8vw, 77px); }
        .history_wrap .thumb_wrap::before { top: calc(100% - clamp(40px, 8vw, 77px)); }
        .history_wrap .thumb_wrap::after { top: calc(100% - clamp(40px, 8vw, 77px)); }
        .history_wrap .thumb_wrap.aos-animate::after { height: clamp(55px, 11vw, 100px); }
        .history_wrap .history_box:nth-child(even) { padding-left: clamp(45px, 9vw, 90px); }
        .history_wrap .history_box:nth-child(odd) { padding-right: clamp(45px, 9vw, 91px); }
        .history_wrap .history_box:not(:last-child) { padding-bottom: clamp(40px, 7vw, 76px); }
        .history_wrap .history_box h4 { margin-bottom: clamp(10px, 1.9vw, 19px); }
        .history_wrap .history_box ul { margin-top: clamp(7px, 1.3vw, 13px); }
        .history_wrap .history_box h4::after { width: clamp(30px, 6vw, 60px); }
        .history_wrap .history_box:nth-child(odd) h4::after { left: calc(100% - clamp(30px, 5vw, 60px)); }
        .history_wrap .history_box dl + dl { margin-top: clamp(7px, 1.4vw, 14px); }

        .patent_wrap { margin-top: clamp(60px, 14vw, 138px); }
        .patent_wrap .flex_des { gap: clamp(30px, 3vw, 38px) 20px; }
        .patent_wrap .flex_des .img_wrap { padding-block: clamp(20px, 4vw, 45px); padding-inline: clamp(20px, 4vw, 40px); height: clamp(250px, 30vw, 300px); }
        .patent_wrap .flex_des dl { margin-top: clamp(15px, 2vw, 20px); }
    }

    @media (max-width: 860px){
        .history_wrap .history_box h4 { font-size: 200%; }
        .history_wrap .history_box h4::before { top: 19px; }
        .history_wrap .history_box h4::after { top: 22px; }
        .history_wrap .history_box dl dt { width: 50px; }
        .history_wrap .history_box dl dd { width: calc(100% - 50px); }

        .patent_wrap .flex_des li { width: calc(100% / 3 - 13.34px); }
    }

    @media (max-width: 640px){
        .history_wrap .thumb_wrap dl dd { font-size: 100%; }
        .history_wrap .thumb_wrap::after { left: 7px; }
        .history_wrap .thumb_wrap::before { left: 7px; }
        .history_wrap .history_box { width: 100%; }
        .history_wrap .history_box:nth-child(odd) { align-self: flex-end; text-align: left; padding-right: unset; padding-left: clamp(45px, 9vw, 91px); }
        .history_wrap .history_box:nth-child(odd)::before { left: 0; }
        .history_wrap .history_box h4::before { width: 6px; height: 6px; box-shadow: 0 0 0 4px var(--border-color01); }
        .history_wrap .history_box:nth-child(odd) h4::before { left: 5px; }
        .history_wrap .history_box:nth-child(odd) h4::after { left: 2px; }
        .history_wrap .history_box:nth-child(even) h4::before { left: 5px; }
        .history_wrap .history_box:nth-child(even) h4::after { left: 2px; }
        .history_wrap .history_box:nth-child(odd)::before { left: 7px; }
        .history_wrap .history_box:nth-child(odd)::after { left: 7px; }
        .history_wrap .history_box:nth-child(even)::before { left: 7px; }
        .history_wrap .history_box:nth-child(even)::after { left: 7px; }
        .history_wrap .cont > div.aos-animate + div h4::before { box-shadow: 0 0 0 4px #DBE2F7; }

        .history_wrap .history_box:nth-child(odd) dl dt { order: 1; padding-left: 0; padding-right: 15px; }
        .history_wrap .history_box:nth-child(odd) dl dd { order: 2;}

        .patent_wrap .flex_des li { width: calc(100% / 2 - 10px); }
    }

    @media (max-width: 479px){
        .history_wrap .history_box h4::before { top: 17px; }
        .history_wrap .history_box h4::after { top: 19px; }
        .history_wrap .history_box h4 { font-size: 180%; }
        .history_wrap .history_box dl dt { width: 40px; }
        .history_wrap .history_box dl dd { width: calc(100% - 40px); }
        .patent_wrap .flex_des { column-gap: 15px; }
        .patent_wrap .flex_des li { width: calc(100% / 2 - 7.5px); }
    }

    @media (max-width: 360px){
        .patent_wrap .flex_des li { width: 100%; }
    }

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

	프로덕트
    
───────────────────────────────────────────────────────────*/
    body:has(.sub_product) .page_title { display: none; }
    .product_nav { box-sizing: border-box; padding-top: 120px; }
    .product_nav .flex_des { display: flex; flex-wrap: nowrap; box-sizing: border-box; border-bottom: 1px solid var(--border-color01); white-space: nowrap; }
    .product_nav .flex_des li { position: relative; width: 100%; font-size: var(--title-20); box-sizing: border-box; }
    .product_nav .flex_des li a { color: var(--black-color08); font-weight: 400; font-size: 100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding-block: 22px 21px; padding-inline: 10px; letter-spacing: 0; text-align: center; transition: all 0.4s; }

    .product_nav .flex_des li::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--trans-color); transition: all 0.4s;  }

    .product_nav .flex_des li.on::before { background: var(--point-color01); width: 100%; }
    .product_nav .flex_des li.on a { color: var(--point-color01); font-weight: 700; }

    .sub_product .scr_text { font-size: var(--title-17); font-weight: 400; color: var(--black-color03); margin-bottom: 7px; display: none; }
    .sub_product .table_wrap { font-size: var(--title-20); }
    .sub_product .table_wrap thead th { box-sizing: border-box; padding-block: 19px; color: var(--point-white); font-weight: 700; font-size: 90%; letter-spacing: 0; background: var(--point-color02); padding-inline: 15px; }
    .sub_product .table_wrap thead th:has(small) { line-height: 1.12; }
    .sub_product .table_wrap thead th + th { border-left: 1px solid rgba(255, 255, 255, 0.4); }
    .sub_product .table_wrap thead th small { font-size: 78%; font-weight: 100; }
    .sub_product .table_wrap tbody td { padding-block: 18px; padding-inline: 15px; }
    .sub_product .table_wrap tbody td:not(.left) { text-align: center; }
    .sub_product .table_wrap tbody :where(th, td) { border-bottom: 1px solid var(--border-color01); }
    .sub_product .table_wrap tbody th { color: var(--black-color01); font-weight: 700; font-size: 100%; line-height: 1.6; letter-spacing: 0; background: var(--point-bg); }
    .sub_product .table_wrap tbody td { border-left: 1px solid var(--border-color01); }
    .sub_product .table_wrap tbody .app_td { color: var(--black-color01); font-weight: 400; font-size: 100%; line-height: 1.5; letter-spacing: 0; }
    .sub_product .table_wrap tbody .base_td { color: var(--black-color03); font-weight: 400; font-size: 90%; line-height: 1.67; letter-spacing: 0; }
    .sub_product .table_wrap tbody .left { color: var(--black-color06); font-weight: 400; font-size: 90%; line-height: 1.56; letter-spacing: 0; padding-left: 24px; }
    .sub_product .table_wrap tbody .type_td { color: var(--black-color06); font-weight: 400; font-size: 90%; line-height: 1.56; letter-spacing: 0;  }
    .sub_product .table_wrap tbody .spec_td { color: var(--black-color06); font-weight: 400; font-size: 85%; line-height: 1.59; letter-spacing: -0.04em; }

    
    @media (hover: hover) and (pointer: fine){
        .product_nav .flex_des li:hover::before { background: var(--point-color01); width: 100%; }
        .product_nav .flex_des li:hover a { color: var(--point-color01); }
    }

    @media (max-width: 1023px){
        .product_nav { padding-top: clamp(60px, 12vw, 120px); border-bottom: 1px solid var(--border-color01); }
        .product_nav .flex_des { border-bottom: 0; overflow: hidden; overflow-x: auto; }
        .product_nav .flex_des li a { padding-block: clamp(15px, 2vw, 22px) clamp(15px, 2vw, 21px); }
        .sub_product .table_wrap tbody td { padding-block: clamp(8px, 1.8vw, 18px); }
        .sub_product .scr_text { display: block; }
        .sub_product .scr_wrap { width: calc(100% + 60px); margin-left: -30px; overflow-x: auto; box-sizing: border-box; }
        .sub_product .table_wrap { width: 1120px; padding-inline: 30px; }
    }

    @media (max-width: 860px){
        .sub_product .scr_wrap { width: calc(100% + 30px); margin-left: -15px; }
        .sub_product .table_wrap { padding-inline: 15px; }
    }

    @media (max-width: 640px){
        .product_nav .flex_des { width: calc(100% + 30px); margin-left: -15px; padding-inline: 15px; }
        
    }

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