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

	Sub common

───────────────────────────────────────────────────────────*/
    #header.sub_header { transition: 0.3s; }
    #container:has(.full_sec) { width: 100%; max-width: 100%; }
    .sub_visual { position: relative; height: 400px; background: no-repeat center; box-sizing: border-box; background-size: cover; font-size: var(--title-20); }
    .sub_visual .sv_title { height: 100%; display: flex; align-items: center; box-sizing: border-box; padding-top: 69px; }
    .sub_visual .sv_title h2 { color: var(--point-white); text-align: center; font-family: var(--font-type02); font-size: 300%; letter-spacing: -0.03em; font-weight: 500; }

    .sub_nav { width: 100%; height: 69px; border-bottom: 1px solid var(--border-color01); background: var(--point-white); position: sticky; top: 0; z-index: 2; }
    .sub_nav > div { height: 100%; }
    .sub_nav ul { display: flex; width: 100%; height: 100%; flex-wrap: nowrap; }
    .sub_nav li { width: 100%; height: 100%; position: relative; color: var(--black-color06); font-size: var(--title-19); font-weight: 500; letter-spacing: -0.03em; 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-inline: 30px;  }

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

    .page_title { box-sizing: border-box; padding-top: 100px; font-size: var(--title-20); }
    .page_title h3 { color: var(--black-color01); font-weight: 600; font-size: 270%; text-align: center; line-height: 1.23; letter-spacing: -0.03em; }

    .bullet_list > li { display: inline-flex; gap: 8px; align-items: baseline; color: var(--black-color05); font-weight: 400; font-size: var(--title-19); line-height: 1.53; letter-spacing: -0.03em; }
    .bullet_list > li + li { margin-top: 9px; }
    .bullet_list > li::before { content: ''; display: block; width: 4px; height: 4px; flex-shrink: 0; background: var(--black-color05); border-radius: 100%; translate: 0 -4px; }

    
    #wrap .btn_wrap { margin: 0 auto; padding: 0; padding-top: 0; font-size: 0; vertical-align: top; display: inline-block; }
    #wrap .btn_wrap .btn{ margin-top: 59px; display: inline-flex; box-sizing:border-box; align-items: center; justify-content:space-between; text-align: center; width:220px; height:60px;background:var(--point-color01); font-size:var(--title-20); color:var(--point-white); font-weight:500; letter-spacing:-0.05em; padding-inline: 24px; position: relative; border: 0;}	
    #wrap .btn_wrap .btn::before{width:0; height:100%; content:""; background:var(--black-color01); position: absolute; top:0; left:0; transition:width 0.3s;}
	#wrap .btn_wrap .btn::after{width:16px;height:14px;content:"";background:url('../images/skin/link_more.svg')no-repeat center;display: inline-block;background-size:auto 100%;filter:var(--filter-white);position: relative;}
    #wrap .btn_wrap .btn span{font-size:inherit; color:inherit; font-weight:inherit; position: relative;}

    .sub_title { font-size: var(--title-20); margin-bottom: 38px; }
    .sub_title h4 { display: flex; align-items: baseline; gap: 20px; color: var(--black-color01); font-weight: 600; font-size: 200%; letter-spacing: -0.03em; font-family: var(--font-type02); }
    .sub_title h4::before { content: ''; display: block; width: 8px; height: 8px; background: var(--point-color01); translate: 0 -10px; }

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

    @media (hover: hover) and (pointer: fine){
        .sub_nav li:hover { color: var(--point-color01);  }
        .sub_nav li:hover::after { transform: scaleX(1); }
        #wrap .btn_wrap .btn:hover::before{width:100%;}
    }

    @media (max-width: 1285px){
        .sub_nav > div { width: 100%; max-width: 100%; overflow-x: auto; white-space: nowrap;  }
        .sub_nav li::after { background: var(--border-color01); bottom: 0; }
        .sub_nav li.on::after { background: var(--point-color01); }
    }

    @media (max-width: 1023px){
        .sub_visual { height: clamp(300px, 40vw, 400px); }
        .sub_visual .sv_title { padding-top: clamp(18px, 6.9vw, 69px); }
        .sub_visual .sv_title h2 { font-size: 280%; }
        
        .sub_nav { height: clamp(55px, 7vw, 69px); }
        .sub_nav li a { padding-inline: clamp(20px, 3vw, 30px); }

        .page_title{ padding-top: clamp(60px, 10vw, 100px); }
        .page_title h3 { font-size: 260%; }

        .bullet_list > li + li { margin-top: clamp(7px, 0.9vw, 9px); }

        .sub_title { margin-bottom: clamp(25px, 4vw, 38px); }

        #wrap .paging { margin-top: clamp(40px, 8vw, 80px); }
        #wrap .paging .arrow.next a { margin-left: clamp(5px, 1vw, 10px); }
        #wrap .paging .arrow.prev a { margin-right: clamp(5px, 1vw, 10px); }
        #wrap .btn_wrap .btn { margin-top: clamp(25px, 6vw, 59px); }
    }

    @media (max-width: 860px){
        .sub_visual .sv_title h2 { font-size: 270%; }
        .page_title h3 { font-size: 250%; }
        .sub_title h4 { font-size: 190%; }
    }

    @media (max-width: 640px){
        .sub_visual .sv_title h2 { font-size: 260%; }
        .page_title h3 { font-size: 240%; }
        .bullet_list > li { gap: 6px; }
        .bullet_list > li::before { width: 3px; height: 3px;  }

        .sub_title h4 { font-size: 180%; gap: 15px; }
        .sub_title h4::before { width: 6px; height: 6px; translate: 0 -8px; }
        
        #wrap .paging a { min-width: 30px; min-height: 30px; }
        #wrap .paging .arrow a { width: 30px; }
        #wrap .btn_wrap .btn{width:170px;height:50px;padding:0 20px;}
    }

    @media (max-width: 479px){
        .sub_visual .sv_title h2 { font-size: 250%;}
        
        .sub_nav li::after { bottom: 0; }
        .page_title h3 { font-size: 230%; }
        .sub_title h4 { font-size: 170%; }

        
    }

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

	회사소개

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

    .sub_about .img_wrap { aspect-ratio: 1 / 0.205; width: calc(100% + 260px); max-width: 1660px; margin-left: -260px; }
    .sub_about .img_wrap img { display: block; width: 100%; height: 100%; min-height: 210px; object-fit: cover; }
    .sub_about .txt_wrap { margin-top: 60px; }
    .sub_about .txt_wrap .txt_box { font-size: var(--title-20); font-weight: 600; box-sizing: border-box; }
    .sub_about .txt_wrap .txt_box:nth-child(2) { position: relative; margin-top: 49px; padding-top: 51px; border-top: 2px solid var(--border-color01); }
    .sub_about .txt_wrap .txt_box:nth-child(2)::before { content: ''; position: absolute; left: 0; top: -2px; width: 140px; height: 2px; background: var(--black-color01); }
    .sub_about .txt_wrap .txt_box h4 { color: var(--black-color01); font-weight: 600; font-size: 250%; line-height: 1.3; letter-spacing: -0.03em; }
    .sub_about .txt_wrap .txt_box h4 strong { color: var(--point-color01); font-weight: inherit; }
    .sub_about .txt_wrap .txt_box .acc { display: block; margin-top: 21px; color: var(--black-color03); font-weight: 500; font-size: 130%; font-weight: 500; line-height: 1.5; letter-spacing: -0.03em;}
    .sub_about .txt_wrap .txt_box p { color: var(--black-color05); font-weight: 400; font-size:110%; line-height: 1.69; letter-spacing: -0.035em; }
    .sub_about .txt_wrap .txt_box p + p { margin-top: 23px; }



    @media (max-width: 1023px){
        .sub_about .txt_wrap { margin-top: clamp(30px, 6vw, 60px); }
        .sub_about .txt_wrap .txt_box .acc { margin-top: clamp(15px, 2.1vw, 21px); }
        .sub_about .txt_wrap .txt_box:nth-child(2) { margin-top: clamp(30px, 5vw, 49px); padding-top: clamp(30px, 5vw, 51px); }
        .sub_about .txt_wrap .txt_box:nth-child(2)::before { width: clamp(80px, 14vw, 140px); }
        .sub_about .txt_wrap .txt_box p + p { margin-top: clamp(15px, 2.3vw, 23px); }

    }

    @media (max-width: 860px){
		 .sub_about .txt_wrap .txt_box h4 { font-size: 230%; }
    }

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

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

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

	주요연혁

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

    .sub_history .flex_des { display: flex; flex-wrap: wrap; align-items: flex-start; }
    .sub_history .img_wrap { width:40%; height: 71vh; position: sticky; left: 0; top: 150px; box-sizing: border-box; padding-right: 50px; }
    .sub_history .history_cont { width:60%;box-sizing:border-box;padding-left:150px;}
    .sub_history .cont { position: relative; margin-top: 5px; }
    /* .sub_history .cont::before { content: ''; position: absolute; left: 0; top: 20px; width: 1px; height: calc(100% - 20px); background: var(--border-color01); } */
    .sub_history .cont > li { position: relative; box-sizing: border-box; padding-left: 66px; font-size: var(--title-20); box-sizing: border-box; list-style: none; }
    .sub_history .cont > li::before { content: ''; position: absolute; left: 0; top: 12px; width: 1px; height: 100%; background: var(--border-color01); }
    .sub_history .cont > li::after { content: ''; position: absolute; left: 0; top: 12px; width: 1px; height: 0; background: var(--point-color01); transition: all 0.4s; }
    .sub_history .cont > li:not(:last-child) { padding-bottom: 85px; } 
    .sub_history .cont strong { color: var(--black-color03); font-weight: 500; font-size: 200%; letter-spacing: 0; line-height: 1; position: absolute;left:-136px;top:5px;}
	.sub_history .cont .bullet_list{padding-top:10px;display: flex;flex-direction: column;}
    .sub_history .cont .bullet_list::before { content: ''; position: absolute; left: -11px; top: 12px; width: 8px; height: 8px; border-radius: 100%; background: var(--black-color08); border: 7px solid var(--border-color01); z-index: 1; }
    /* .sub_history .cont > li ul.bullet_list { margin-top: 24px; } */

    .sub_history .cont > li.aos-animate::after { height: 100%; }
    .sub_history .cont > li.aos-animate strong { color: var(--point-color01); }
    .sub_history .cont > li.aos-animate .bullet_list::before { background: var(--point-color01); border-color: #FFE2CE; }

    @media (max-width: 1280px){
        .sub_history .cont > li { padding-left: 50px; }
        
    }

    @media (max-width: 1023px){
        
        .sub_history .img_wrap img { display: block; width: 100%; object-fit: cover; }
        .sub_history .cont > li { padding-left: clamp(40px, 5vw, 50px); }
        /* .sub_history .cont > li ul.bullet_list { margin-top: clamp(20px, 2.4vw, 24px); } */
        .sub_history .cont > li:not(:last-child) { padding-bottom: clamp(40px, 8.5vw, 85px); }
    }

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

    @media (max-width: 640px){
        .sub_history .flex_des { gap: 40px; }
        .sub_history .img_wrap { width: 100%; position: static; padding-right: 0; height: auto;  }
        .sub_history .history_cont { width: 100%; padding-left:0;}
        .sub_history .cont::before { left: 7px; }
        .sub_history .cont strong { font-size: 180%; position: static;}
        .sub_history .cont .bullet_list::before { left: 0; top: 8px; width: 6px; height: 6px; border-width: 5px; }
        .sub_history .cont > li::before { left: 8px; }
        .sub_history .cont > li::after { left: 8px; }
    }


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

	카다로그

───────────────────────────────────────────────────────────*/
    .sub_cata .cont + .cont { margin-top: 80px; }
    .sub_cata .flex_des { display: flex; align-items: flex-start; gap: 100px; }
    .sub_cata .img_wrap { position: relative; flex-shrink: 0; width: 46.43%; display: flex; justify-content: flex-end; box-sizing: border-box; padding-right: 120px; padding-bottom: 60px; }
    .sub_cata .img_wrap::before { content: ''; position: absolute; right: 0; bottom: 0; width: 200vw; height: 300px; background: var(--gray-bg02); }
    .sub_cata .img_wrap .img_box { position: relative; z-index: 2; box-shadow: var(--shadow-03); }
    .sub_cata .txt_wrap { font-size: var(--title-20); width: calc(53.57% - 100px); box-sizing: border-box; padding-top: 63px; }
    .sub_cata .txt_wrap em { display: block; color: var(--point-color01); font-weight: 400; font-size: 100%; letter-spacing: -0.01em; font-style: italic; font-family: var(--font-type02); }
    .sub_cata .txt_wrap h4 { margin-top: 16px; color: var(--black-color01); font-weight: 600; font-size: 270%; letter-spacing: -0.01em; }
    .sub_cata .txt_wrap p { margin-top: 26px; color: var(--black-color06); font-weight: 400; font-size: 95%; line-height: 1.69; letter-spacing: -0.05em; }
    .sub_cata .txt_wrap a{ margin-top: 59px; display: inline-flex; box-sizing:border-box; align-items: center; justify-content:space-between; text-align: center; width:220px; height:60px;background:var(--point-color01); font-size:var(--title-20); color:var(--point-white); font-weight:500; letter-spacing:-0.05em; padding-inline: 24px; position: relative;}	
    .sub_cata .txt_wrap a::before{width:0; height:100%; content:""; background:var(--black-color01); position: absolute; top:0; left:0; transition:width 0.3s;}
    .sub_cata .txt_wrap a i{width:16px; height:17px; background:url('../images/sub/ico_download.svg')no-repeat center; display: inline-block; background-size:auto 100%;  position: relative;}
    .sub_cata .txt_wrap a span{font-size:inherit; color:inherit; font-weight:inherit; position: relative;}

    .sub_cata .flex_rev { flex-direction: row-reverse; }
    .sub_cata .flex_rev .img_wrap { padding-left: 120px; justify-content: flex-start; }
    .sub_cata .flex_rev .img_wrap::before { right: unset; left: 0 }
    .sub_cata .flex_rev .txt_wrap { text-align: right; }

    @media (hover:hover) and (pointer:fine){
        .sub_cata .txt_wrap a:hover::before{width:100%;}
    }

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

    /* @media (max-width: 1240px){
        .sub_cata .img_wrap { padding-right: 60px; width: 50%; }
        .sub_cata .txt_wrap { width: calc(50% - 100px); }
        .sub_cata .flex_rev .img_wrap { padding-left: 60px; }
    } */

    @media (max-width: 1023px){
        .sub_cata .cont + .cont { margin-top: clamp(60px, 8vw, 80px); }
        .sub_cata .flex_des { gap: clamp(40px, 6vw, 100px); justify-content: space-between; }
        .sub_cata .img_wrap { padding-right: 20px; max-width: 320px; width: 100%; }
        .sub_cata .img_wrap::before { height: 200px; }
        .sub_cata .img_wrap .img_box { width: clamp(280px, 32vw, 320px); }
        .sub_cata .flex_rev .img_wrap { padding-left: clamp(30px, 6vw, 60px); padding-right: 0; }
        .sub_cata .txt_wrap { width: calc(100% - 320px); max-width: 500px; }
        .sub_cata .txt_wrap h4 { font-size: 250%; margin-top: clamp(10px, 1.6vw, 16px); }
        .sub_cata .txt_wrap p { margin-top: clamp(15px, 2.6vw, 26px); }
        .sub_cata .txt_wrap a { margin-top: clamp(25px, 6vw, 59px); }
    }

    @media (max-width: 860px){
        .sub_cata .cont + .cont { margin-top: clamp(80px, 10vw, 100px) }
        .sub_cata .flex_des { flex-direction: column; gap: 60px; }
        .sub_cata .txt_wrap { padding-top: 0; width: 100%; order: 1; max-width: revert; }
        .sub_cata .txt_wrap h4 { font-size: 240%; }
        .sub_cata .img_wrap { width: 100%; justify-content: center; max-width: revert; order: 2; padding-right: 0; }
        .sub_cata .img_wrap .img_box { width: fit-content; max-width: 300px; }
        .sub_cata .img_wrap::before { right: unset; left: 0; }
        
        .sub_cata .flex_rev .img_wrap { padding-left: 0; padding-right: 0; justify-content: center; }
        .sub_cata .flex_rev .img_wrap::before { left: 0; }
        .sub_cata .flex_rev .txt_wrap { text-align: left; }
    }

    @media (max-width: 640px){
        .sub_cata .flex_des { gap: 40px; }
        .sub_cata .img_wrap { padding-bottom: 30px; }
        .sub_cata .img_wrap .img_box { width: 50%; }
        .sub_cata .txt_wrap h4 { font-size: 230%; }
        .sub_cata .txt_wrap a { width: 170px; height: 50px; padding-inline: 20px; }
        .sub_cata .txt_wrap a i { width: 14px; height: 15px; }
        .sub_cata .img_wrap::before { height: 150px; }
    }

    @media (max-width: 479px){
        .sub_cata .img_wrap { padding-bottom: 20px; }
        .sub_cata .img_wrap .img_box { width: 60%; }
    }

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

	인증서

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

    .sub_cert .list{display: flex;flex-wrap:wrap;gap:26px;}
	.sub_cert .list li{width:calc(25% - 20px);box-sizing:border-box;position: relative;height:0;padding-bottom:36%;overflow:hidden;border:1px solid var(--border-color01);}
	.sub_cert .list li img{width:100%;height:100%;object-fit:cover;position: absolute;top:0;left:0;}

    @media (max-width: 860px){
        .sub_cert .list{gap:21px;}
		.sub_cert .list li{width:calc(100% / 3 - 14px);padding-bottom:47%;}
        
    }
	@media (max-width: 640px){
        .sub_cert .list{gap:15px;}
		.sub_cert .list li{width:calc(100% / 2 - 7.5px);padding-bottom:73%;}
        
    }


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

	제품소개

───────────────────────────────────────────────────────────*/
    #wrap .sub_list .list_array { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; margin-bottom: 29px; font-size: var(--title-20); }
    #wrap .sub_list .list_array .list_count, #wrap .sub_list .list_array .list_count span { font-size: var(--title-18); font-weight: 400; font-family: var(--font-type02); letter-spacing: -0.03em; color: var(--black-color06); float: unset; line-height: 1.3; height: auto; vertical-align: top; text-align: left; display: inline-block; }
    #wrap .sub_list .list_array .list_count span { color: var(--black-color01); font-weight: 600; font-family: var(--font-type01); }
    #wrap .sub_list .list_array:after { display: none; }
    #wrap .sub_list .list_array > form { display: none; }
    
    #wrap .sub_list .list_array ul { float: unset; display: flex; gap: 5px; }
    #wrap .sub_list .list_array ul:after { display: none; }
    #wrap .sub_list .list_array ul li { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 100%; font-size: 0; }
    #wrap .sub_list .list_array ul li.on { background: var(--black-color01); border-color: var(--trans-color); }
    #wrap .sub_list .list_array ul li.typeA.on:before { background-color: var(--black-color01); }
    #wrap .sub_list .list_array ul li.typeB.on:before { background-color: var(--black-color01); }
    #wrap .sub_list .list_array ul li:before, #wrap .sub_list .list_array ul li::before { position: static; background-position: center; }

    #wrap .sub_list .list_Galleryform ul { display: flex; padding: 0; margin: 0; gap: 40px; flex-wrap: wrap; }
    #wrap .sub_list .list_Galleryform ul li { width: calc(100% / 3 - 27px); margin: 0; }
    #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; display: flex; justify-content: center; align-items: center; padding: 0; height: auto; width: 100%; aspect-ratio: 1/1; border: none; font-size: 0; margin: 0; position: relative; z-index: 1; text-align: center; box-sizing: border-box; overflow: hidden; vertical-align: top; border-radius: 20px; transition: all 0.4s; }
    #wrap .sub_list .list_Galleryform ul li .thumb .img_box { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; height: 100%; }
    #wrap .sub_list .list_Galleryform ul li .thumb::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--border-color01); border-radius: inherit; box-sizing: border-box; transition: all 0.4s; opacity: 1; }
    #wrap .sub_list .list_Galleryform ul li .thumb::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid var(--point-color01); border-radius: inherit; box-sizing: border-box; transition: all 0.4s; opacity: 0; }
    #wrap .sub_list .list_Galleryform ul li .thumb img { width: auto; height: auto; transform: unset; position: static; left: unset; top: unset; vertical-align: top; }

    #wrap .sub_list .list_Galleryform ul li .txt_info { padding: 0; margin: 0; width: 100%; font-size: var(--title-20); margin-top: 20px; }
    #wrap .sub_list .list_Galleryform ul li .txt_info > span { display: block; width: 100%; height: 100%; color: var(--black-color03); font-weight: 500; font-size: 120%; line-height: 1.5; letter-spacing: -0.03em; text-align: center; }


    #wrap .sub_list .list .list_Listform > ul { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
    #wrap .sub_list .list .list_Listform > ul:after { display: none; }
    #wrap .sub_list .list .list_Listform > ul li:nth-child(2n+1) { clear: none; }
    #wrap .sub_list .list .list_Listform > ul li { position: relative; margin: 0; width: calc(100% / 2 - 20px); float: unset; border: none; border-radius: 20px; transition: all 0.4s; }
    #wrap .sub_list .list .list_Listform > ul li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--border-color01); border-radius: inherit; }
    #wrap .sub_list .list .list_Listform > ul li::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid var(--point-color01); opacity: 0; border-radius: inherit; transition: all 0.4s; z-index: 5; }
    #wrap .sub_list .list .list_Listform > ul li dl { display: flex; }
    #wrap .sub_list .list .list_Listform > ul li a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }
    #wrap .sub_list .list .list_Listform > ul li dl dt { width: 40%; aspect-ratio: auto 1; display: flex; justify-content: center; align-items: center;  border-right: 0; }
    #wrap .sub_list .list .list_Listform > ul li dl dt .img_box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding-inline: 45px; padding-block: 60px; box-sizing: border-box; }
    #wrap .sub_list .list .list_Listform > ul li dl dd { width: 60%; box-sizing: border-box; padding: 30px; font-size: var(--title-20); }
    #wrap .sub_list .list .list_Listform > ul li dl dd > span { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; color: var(--black-color03); font-weight: 500; font-size: 120%; line-height: 1.5; letter-spacing: -0.03em; }
    #wrap .sub_list .list .list_Listform > ul li dl dt img { width: auto; height: auto; object-fit: cover; }

    @media (hover: hover) and (pointer: fine) {
        #wrap .sub_list .list_Galleryform ul li:hover .thumb { box-shadow: var(--shadow-03); }
        #wrap .sub_list .list_Galleryform ul li:hover .thumb::before { opacity: 0; }
        #wrap .sub_list .list_Galleryform ul li:hover .thumb::after { opacity: 1; }

        #wrap .sub_list .list .list_Listform > ul li:hover { box-shadow: var(--shadow-03); }
        #wrap .sub_list .list .list_Listform > ul li:hover::after { opacity: 1; }
    }

    @media (max-width: 1200px){
        #wrap .sub_list .list .list_Listform > ul li dl dt .img_box { padding-block: 40px; }
    }

    @media (max-width: 1023px){
        #wrap .sub_list .list_array { margin-bottom: clamp(20px, 3vw, 29px); }
        #wrap .sub_list .list_Galleryform ul li .thumb .img_box { padding-inline: clamp(30px, 5vw, 75px); padding-block: clamp(40px, 5vw, 88px); }
        #wrap .sub_list .list_Galleryform ul li .txt_info { margin-top: clamp(15px, 2vw, 20px); }

        #wrap .sub_list .list .list_Listform > ul li dl dt .img_box { padding-inline: clamp(25px, 5vw, 45px); padding-block: clamp(25px, 4vw, 40px); }
        #wrap .sub_list .list .list_Listform > ul li dl dd { padding: clamp(20px, 3vw, 30px); }
    }

    @media (max-width: 860px){
        #wrap .sub_list .list_Galleryform ul { gap: 20px; }
        #wrap .sub_list .list_Galleryform ul li { width: calc(100% / 3 - 14px); }
        #wrap .sub_list .list_Galleryform ul li .txt_info > span { font-size: 110%; }

        #wrap .sub_list .list .list_Listform > ul { gap: 20px; }
        #wrap .sub_list .list .list_Listform > ul li dl dd > span { font-size: 110%; }
        
    }

    @media (max-width: 640px){
        #wrap .sub_list .list_Galleryform ul li { width: calc(100% / 2 - 10px); }
        #wrap .sub_list .list .list_Listform > ul li { width: 100%; }
        #wrap .sub_list .list .list_Listform > ul li dl dt { width: 30%; }
        #wrap .sub_list .list .list_Listform > ul li dl dd { width: 70%; }

        #wrap .sub_list .list_array ul li { width: 30px; height: 30px; }
        #wrap .sub_list .list_array ul li:before, #wrap .sub_list .list_array ul li::before { width: 14px; height: 14px; }
    }

    @media (max-width: 479px){
        
        #wrap .sub_list .list_Galleryform ul { gap: 15px; }
        #wrap .sub_list .list_Galleryform ul li { width: calc(100% / 2 - 7.5px); }
        #wrap .sub_list .list_Galleryform ul li .thumb { border-radius: 10px; }
        #wrap .sub_list .list_Galleryform ul li .txt_info > span { font-size: 100%; }

        #wrap .sub_list .list .list_Listform > ul li { border-radius: 10px; }
    }

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

	제품 검색 페이지

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

    #wrap .sub_list .list_search > div > span, #wrap .sub_list .list_search .search_form, #wrap .sub_list .list_search .search_form .search, #wrap .sub_list .list_search .search_form .select_box_wrap { font-size: 0; height: auto; line-height: unset; margin: 0; padding: 0; vertical-align: top; display: inline-block; box-sizing: border-box; width: 100%; }
    #wrap .sub_goods_search .sub_list .list_array { justify-content: space-between; }
    
    #wrap .list_search { width: 100%; box-sizing: border-box; margin: 0; letter-spacing: unset; padding: 0; text-align: left; overflow: hidden; background: var(--trans-color); margin-bottom: 29px; }
    #wrap .sub_list .list_search > div { float: unset; }
	#wrap .list_search .search_wrap { display: flex; justify-content: flex-end; gap: 15px; flex-wrap: wrap; }
    #wrap .list_search .search_wrap > span { display: inline-flex; align-items: center; flex-shrink: 0; }
	#wrap .list_search .search_sel { width: 160px; flex-shrink: 0; }
	#wrap .list_search .inp_custom { position: relative; width: 100%; max-width: 300px; }
	#wrap .list_search .inp_custom input[type="text"] { padding: 0 60px 0 24px; box-sizing: border-box; width: 100%; margin: 0; }
	#wrap .list_search .inp_custom a { position: absolute; right:0; width: 56px; height: 56px; appearance: none; border: none; font-size: 0; background: url('../images/sub/ico_search.svg') no-repeat center; background-size: 22px 22px; }

    
    #wrap .sub_list select, #wrap .sub_list input[type="text"], #wrap .sub_list input[type="password"], #wrap .sub_list input[type="number"], #wrap .sub_list input[type="date"] { height: 56px; background: var(--gray-bg04); color: var(--black-color04); font-size: max(13px, var(--title-17)); font-weight: 400; outline: none; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; letter-spacing: -0.04em; margin: 0; border: 0; font-family: var(--font-type02); }

    #wrap .sub_list select { width: 100%; height: 56px; padding-left: 24px; padding-right: 45px; background: var(--gray-bg04) url(../images/sub/ico_sel_arw.svg) no-repeat center right 24px; appearance: none; cursor: pointer; background-size: 14px 8px; border: 0; outline: 0; }

    @media (max-width: 1023px){
        #wrap .list_search { margin-bottom: clamp(20px, 3vw, 29px); }
    }

    @media (max-width: 860px){

    }

    @media (max-width: 640px){
        #wrap .list_search .search_wrap > span { width: 100%; justify-content: flex-end; }
        #wrap .sub_list select { height: 44px; padding-left: 15px; padding-right: 40px; background: var(--gray-bg04) url(../images/sub/ico_sel_arw.svg) no-repeat center right 15px; }
        #wrap .sub_list select, #wrap .sub_list input[type="text"], #wrap .sub_list input[type="password"], #wrap .sub_list input[type="number"], #wrap .sub_list input[type="date"] { height: 44px; }
        #wrap .list_search .inp_custom input[type="text"] { padding: 0 50px 0 15px; }
        #wrap .list_search .inp_custom a { width: 44px; height: 44px; background-size: 16px 16px; }
    }

    @media (max-width: 505px){
        #wrap .list_search .search_sel { width: 33.33%; }
        #wrap .list_search .inp_custom { width: calc(66.66% - 15px); }
    }

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

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

	제품 상세 페이지

───────────────────────────────────────────────────────────*/
    #container:has(.sub_goods_view) { padding-top: 0; }
    #wrap:has(.sub_goods_view) .page_title { display: none; }
    .sub_goods_view .sub_gv_cont:nth-child(1) { background: var(--gray-bg02); box-sizing: border-box; padding-block: 100px 120px; }
    .sub_goods_view .flex_des { display: flex; flex-wrap: wrap; align-items: center; gap: 100px; }
    .sub_goods_view .flex_des .img_wrap { width: 41.43%; aspect-ratio: 1 auto; display: flex; justify-content: center; align-items: center; flex-shrink: 0; background: var(--point-white); border-radius: 20px; box-sizing: border-box; box-shadow: var(--shadow-03); }
    .sub_goods_view .flex_des .img_wrap .img_box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 50px; box-sizing: border-box; }
    .sub_goods_view .flex_des .txt_wrap { width: calc(58.57% - 100px); font-size: var(--title-20); }
    .sub_goods_view .flex_des .txt_wrap .cate { margin-bottom: 29px; color: var(--point-color01); font-weight: 600; font-size: 90%; letter-spacing: -0.01em; font-style: italic; font-family: var(--font-type02); }
    .sub_goods_view .flex_des .txt_wrap h3 { color: var(--black-color01); font-weight: 600; font-size: 270%; line-height: 1.23; letter-spacing: 0; }
    .sub_goods_view .flex_des .txt_wrap .desc { color: var(--black-color05); font-family: var(--font-type02); font-weight: 400; font-size: 95%; line-height: 1.69; letter-spacing: -0.04em; box-sizing: border-box; margin-top: 50px; padding-top: 51px; border-top: 2px solid var(--border-color01); }
    .sub_goods_view .sub_gv_cont:nth-child(2) { box-sizing: border-box; padding-block: 98px 80px; border-bottom: 1px solid var(--border-color01); }
    
    @media (max-width: 1023px){
        .sub_goods_view .sub_gv_cont:nth-child(1) { padding-block: clamp(50px, 10vw, 100px) clamp(80px, 12vw, 120px); }
        .sub_goods_view .flex_des { gap: 40px; }
        .sub_goods_view .flex_des .txt_wrap { width: calc(58.57% - 40px); }
        .sub_goods_view .flex_des .txt_wrap .cate { margin-bottom: clamp(20px, 3vw, 29px); }
        .sub_goods_view .flex_des .txt_wrap h3 { font-size: 260%; }
        .sub_goods_view .flex_des .txt_wrap .desc { margin-top: clamp(20px, 5vw, 50px); padding-top: clamp(20px, 5vw, 50px); }
        .sub_goods_view .flex_des .img_wrap .img_box { padding: clamp(30px, 5vw, 50px); }

        .sub_goods_view .sub_gv_cont:nth-child(2) { padding-block: clamp(60px, 10vw, 98px) clamp(40px, 8vw, 80px); }
        
    }

    @media (max-width: 860px){
        .sub_goods_view .flex_des .txt_wrap h3 { font-size: 250%; }
    }

    @media (max-width: 640px){
        .sub_goods_view .flex_des { flex-direction: column; }
        .sub_goods_view .flex_des .img_wrap { width: 100%; }
        .sub_goods_view .flex_des .txt_wrap { width: 100%; }
        .sub_goods_view .flex_des .txt_wrap h3 { font-size: 240%; }
    }

    @media (max-width: 479px){
        .sub_goods_view .flex_des .img_wrap .img_box { border-radius: 10px; }
        .sub_goods_view .flex_des .txt_wrap h3 { font-size: 230%; }
    }

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

	고객문의

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

    #smart_editor2 { width: 100% !important; }

    .sub_bbs_write { box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap; gap: 40px; padding-block: 40px; border-top: 1px solid var(--black-color01); border-bottom: 1px solid var(--border-color01); }
    .sub_bbs_write .line2 { display: flex; flex-wrap: wrap; gap: 60px; }
    .sub_bbs_write .line2 dl { width: calc(50% - 30px); }
    .sub_bbs_write dl { display: flex; flex-wrap: wrap; width: 100%; align-items: baseline; box-sizing: border-box; }
    .sub_bbs_write dl dt { width: 180px; box-sizing: border-box; padding-right: 15px; color: var(--black-color03); font-weight: 500; font-size: var(--title-19); letter-spacing: -0.04em; font-family: var(--font-type02); }
    .sub_bbs_write dl dt .require_dot { color: var(--point-color01); }
    .sub_bbs_write dl dd { width: calc(100% - 180px); display: flex; align-items: center; }
    .sub_bbs_write dl.text_box { align-items: center; }
    .sub_bbs_write dl.text_box dd { width: calc(100% - 180px); }
    .sub_bbs_write dl.text_box textarea { width: 100%; height: 326px; }

    .sub_bbs_write dl.captcha_dl dd { gap: 10px; flex-wrap: wrap; }
    .sub_bbs_write dl.captcha_dl dd .captcha_wrap { box-sizing: border-box; padding: 10px; display: flex; gap: 10px; border: 1px solid var(--border-color01); }
    .sub_bbs_write dl.captcha_dl dd .captcha_wrap #refreshCode { display: inline-flex; background:var(--point-white) url('../images/skin/icon_reset.svg') no-repeat center; font-size: 0; cursor: pointer; min-width:40px; width:40px; height:40px;box-sizing: border-box;border:1px solid var(--border-color01); }
    .sub_bbs_write dl.captcha_dl dd input#captcha { width: calc(100% - 262px); max-width: 350px; }
    .sub_bbs_write dl.captcha_dl dd #captcha_box { margin: 0; width: 180px; height: 40px; box-sizing: border-box; overflow: hidden; }
    .sub_bbs_write dl.captcha_dl dd #captcha_box img { width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; max-width: initial; max-height: initial; margin-left: -1px; margin-top: -1px; }
    .sub_bbs_write input[type="text"], .sub_bbs_write input[type="password"], .sub_bbs_write input[type="number"], .sub_bbs_write input[type="date"] { height: 60px; line-height: 1.5; width: 100%; border: 0; background: var(--gray-bg02); color: var(--black-color03); font-weight: 400; font-size: var(--title-18); font-family: var(--font-type02); padding: 0 24px; text-indent: 0; border-radius: 0; margin: 0; box-sizing: border-box; vertical-align: middle; text-align: left; outline: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; letter-spacing: -0.04em; }
    .sub_bbs_write input[type="text"]::placeholder, .sub_bbs_write input[type="password"]::placeholder, .sub_bbs_write input[type="number"]::placeholder, .sub_bbs_write input[type="date"]::placeholder { color: var(--black-color08); font-weight: 300; }

    #wrap .sub_policy { box-sizing: border-box; margin-top: 40px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 40px; border: 1px solid var(--border-color01); }
    #wrap .sub_policy input[type="checkbox"] + label { display: flex; align-items: baseline; font-size: var(--title-20); font-weight: 600; }
    #wrap .sub_policy input[type="checkbox"] + label:before, #wrap .sub_policy input[type="checkbox"] + label::before { margin: 0 12px 0 0; align-self: flex-start; }
    #wrap .sub_policy .chk_cont { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
    #wrap .sub_policy .chk_cont a { font-size: var(--title-16); color: var(--black-color08); font-weight: 400; text-decoration: underline; letter-spacing: -0.03em; text-underline-offset: 4px; transform: translateY(-2px); }
    #wrap .sub_policy .area_box { width: 100%; margin-top: 20px; padding: 0 10px; box-sizing: border-box; background: var(--gray-bg04); }
    #wrap .sub_policy .area_box textarea { width: 100%; height: 130px; padding: 14px 20px; box-sizing: border-box; color: var(--black-color08); font-weight: 400; font-size: var(--title-17); line-height: 1.6; letter-spacing: -0.03em; font-family: var(--font-type02); border: none; resize: none; background: var(--trans-color); }

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

    @media (max-width: 1023px){
        .sub_bbs_write { padding-block: clamp(30px, 4vw, 40px); }
        .sub_bbs_write .line2 { gap: 30px; }
        .sub_bbs_write .line2 dl { width: calc(50% - 15px); }
        .sub_bbs_write dl dt { width: 140px; }
        .sub_bbs_write dl dd { width: calc(100% - 140px); }
        .sub_bbs_write dl.text_box dd { width: calc(100% - 140px); }

        #wrap .sub_policy { margin-top: clamp(30px, 4vw, 40px); padding: clamp(20px, 4vw, 40px); }
        #wrap .sub_policy .area_box textarea { height: clamp(100px, 13vw, 130px); padding: clamp(10px, 1.4vw, 14px) clamp(15px, 2vw, 20px); }
    }

    @media (max-width: 860px){
        .sub_bbs_write .line2 { gap: 20px; }
        .sub_bbs_write .line2 dl { width: calc(50% - 10px); }
        .sub_bbs_write dl dt { width: 120px; }
        .sub_bbs_write dl dd { width: calc(100% - 120px); }
        .sub_bbs_write dl.text_box dd { width: calc(100% - 120px); }
    }

    @media (max-width: 640px){
        .sub_bbs_write { gap: 15px; }
        .sub_bbs_write .line2 { gap: 15px; }
        .sub_bbs_write .line2 dl { width: 100%; }
        .sub_bbs_write dl.text_box textarea { height: clamp(250px, 30vw, 326px); }
        .sub_bbs_write input[type="text"], .sub_bbs_write input[type="password"], .sub_bbs_write input[type="number"], .sub_bbs_write input[type="date"] { padding: 0 15px; height: 45px; }
        .sub_bbs_write dl.captcha_dl dd { flex-direction: column; align-items: flex-start; }
        .sub_bbs_write dl.captcha_dl dd input#captcha { width: 100%; max-width: unset; }

        #wrap .sub_policy input[type="checkbox"] + label:before, #wrap .sub_policy input[type="checkbox"] + label::before { margin-right: 7px; }

        .sub_bbs_write dl.text_box dt { display: none; }
        .sub_bbs_write dl.text_box dd { width: 100%; padding-left: 10px; padding-right: 10px; }
        
    }

    @media (max-width: 479px){
        .sub_bbs_write dl dt { align-self: center; }
        .sub_bbs_write dl.captcha_dl dt { align-self: baseline; }
        .sub_bbs_write dl.captcha_dl dd #captcha_box { width: 150px; height: 32px; }
        .sub_bbs_write dl.captcha_dl dd .captcha_wrap #refreshCode { width: 32px; height: 32px; min-width: 32px; }
        #wrap .sub_policy input[type="checkbox"] + label:before, #wrap .sub_policy input[type="checkbox"] + label::before { margin-right: 5px; }
    }

    @media (max-width: 375px){
        .sub_bbs_write dl.captcha_dl dd #captcha_box { width: 120px; }
        .sub_bbs_write dl.captcha_dl dd .captcha_wrap { gap: 5px; }
        
    }

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

	게시판

───────────────────────────────────────────────────────────*/
    #container:has(.notice_wrap) { padding-block: 0 181px; }
    #container:not(:has(.notice_wrap)) .board_table_wrap { margin-top: 0; }
    
    .notice_wrap { box-sizing: border-box; padding-block: 100px 120px; background: var(--gray-bg02); }
    .notice_wrap .page_title { padding-top: 0; margin-bottom: 60px; }
    .notice_wrap .noticeSlide { position: relative; overflow: hidden; box-sizing: border-box; }
    .notice_wrap .noticeSlide .board_notice { position: relative; }
    .notice_wrap .noticeSlide .txt_wrap { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; width: 100%; height: 100%; box-sizing: border-box; padding: 40px; font-size: var(--title-20); }
    .notice_wrap .noticeSlide .txt_wrap p { color: var(--point-white); font-weight: 600; font-size: 140%; line-height: 1.29; letter-spacing: -0.03em; font-family: var(--font-type02); }
    .notice_wrap .swipe_arw { position: absolute; top: 50%; translate: 0 -50%; cursor: pointer; opacity: 0.5; transition: all 0.4s; }
    .notice_wrap .swipe_arw.prev { left: -70px; }
    .notice_wrap .swipe_arw.next { right: -70px; }

    .board_table_wrap { margin-top: 98px; }
    .board_table_wrap .scr_noti { display: none; font-size: var(--title-19); font-weight: 400; color: var(--black-color03); margin-block: 15px 7px; line-height: 1.3; }

    #wrap table.bbs_list { font-size: var(--title-20); border-top: 1px solid var(--black-color01); border-bottom: 0; }
    #wrap table.bbs_list col:first-child, #wrap table.bbs_list col:first-child { width: unset; }
    #wrap table.bbs_list th { color: var(--black-color03); font-size: 100%; font-family: var(--font-type02); font-weight: 500; padding-top: 26px; padding-bottom: 26px; box-sizing: border-box; border-bottom: 1px solid var(--border-color01); letter-spacing: -0.04em; }
    #wrap table.bbs_list td { padding-left: 12px; padding-right: 12px; font-size: var(--title-19); line-height: 1.3; font-weight: 400; color: var(--black-color07); text-align: center; vertical-align: middle; padding-top: 26px; padding-bottom: 23px; letter-spacing: -0.04em; font-family: var(--font-type02); box-sizing: border-box; border-bottom: 1px solid var(--border-color01); }
    #wrap table.bbs_list td.left { text-align: left; padding-left: 30px; color: var(--black-color05); }
    #wrap table.bbs_list td.year { font-size: var(--title-18); font-family: var(--font-type01); }

    @media (hover: hover) and (pointer: fine){
        .notice_wrap .swipe_arw:hover { opacity: 1; }
    }

    @media (max-width: 1600px){
        .notice_wrap { box-sizing: border-box; padding-inline: 50px; }
    }

    @media (max-width: 1023px){
        .notice_wrap { padding-block: clamp(50px, 10vw, 100px) clamp(80px, 12vw, 120px); }
        .notice_wrap .page_title { margin-bottom: clamp(30px, 6vw, 60px); }
        .notice_wrap .noticeSlide .txt_wrap { padding: clamp(20px, 3vw, 40px); }

        .board_table_wrap { margin-top: clamp(50px, 10vw, 98px); }
        #wrap table.bbs_list th { padding-top: clamp(15px, 2vw, 26px); padding-bottom: clamp(15px, 2vw, 26px); }
        #wrap table.bbs_list td { padding-top: clamp(15px, 2vw, 26px); padding-bottom: clamp(15px, 2vw, 23px); }
        #wrap table.bbs_list td.left { padding-left: clamp(12px, 3vw, 30px); }

        .notice_wrap .swipe_arw { width: 32px; height: 30px; }
        .notice_wrap .swipe_arw.prev { left: -60px; }
        .notice_wrap .swipe_arw.next { right: -60px; }
    }

    @media (max-width: 860px){
        .notice_wrap { padding-inline: 0; }
        .notice_wrap .swipe_arw { display: none; }
        .notice_wrap .noticeSlide { width: calc(100% + 30px); margin-left: -15px; padding-inline: 15px; }
        .notice_wrap .noticeSlide .txt_wrap p { font-size: 130%; }

        #wrap table.bbs_list col:nth-child(2), #wrap table.bbs_list col:nth-child(2) { width: 20%; }
        #wrap table.bbs_list col:nth-child(3), #wrap table.bbs_list col:nth-child(3) { width: 20%; }
    }

    @media (max-width: 640px){
        .notice_wrap .noticeSlide { padding-inline: 0; }
        .notice_wrap .noticeSlide > ul { margin-left: 15px; }

        #wrap table.bbs_list col:nth-child(2), #wrap table.bbs_list col:nth-child(2) { width: 23%; }
        #wrap table.bbs_list col:nth-child(3), #wrap table.bbs_list col:nth-child(3) { width: 23%; }
    }

    @media (max-width: 479px){
        .notice_wrap .noticeSlide { padding-right: 30px; }
        
        .board_table_wrap .scr_noti { display: block; }
        .board_table_wrap .scr_wrap { width: calc(100% + 30px); margin-left: -15px; overflow: hidden; overflow-x: auto; box-sizing: border-box; }
        .board_table_wrap .scr_table { width: 640px; padding-inline: 15px; box-sizing: border-box; }
    }