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

───────────────────────────────────────────────────────────*/
    
    #container{position: relative; padding-bottom: 150px;}
    #container:has(.pdZero){padding-bottom: 0;}

    @media (max-width:1280px) {
        br.for_pc{display: none;}
    }
    @media (max-width:1023px) {
        #container{padding-bottom: clamp(80px, 15vw, 150px);}
    }

/*───────────────────────────────────────────────────────────
	
    서브

───────────────────────────────────────────────────────────*/
    /* 상단 */
        .sub_top{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap:30px;padding-block: 80px 60px;}
        .hd_title{position: relative; font-size: var(--title-20);}
        .hd_title h2{font-size: 60px; font-weight: 600; color: var(--black-color01); line-height: 1.3;}

        .nav_desc{display: flex;align-items: center;flex-wrap: wrap;gap: 12px 0;font-size: var(--title-20);}
        .nav_desc dt{font-size: 0;}
        .nav_desc dt a{display: flex; align-items: center; width: 18px;}
        .nav_desc :where(dt, dd){display: flex;align-items: center;}
        .nav_desc :where(dt, dd):after{display: inline-flex;content:'';width: 7px;aspect-ratio: auto 1;clip-path: var(--clip-poly01);border: 1px solid rgba(85, 85, 85, 0.6);rotate: -45deg;margin-inline: 13px 16px;}
        .nav_desc :where(dt, dd):last-child:after{display: none;}
        .nav_desc dd{font-size: max(13px, 80%);font-weight: 400;color: rgba(34, 34, 34, 0.7);line-height: 1.3;}
        .nav_desc dd:last-child{font-weight: 500; color: var(--black-color01);}

        .info_title{position: relative; font-size: var(--title-20); width: 100%;}
            .info_title.hd{margin-bottom: 40px;}
        .info_title h3{font-size: 230%; font-weight: 600; color: var(--black-color02); line-height: 1.3;}
        .info_title h5{font-size: 120%; font-weight: 400; color: var(--black-color01); line-height: 1.6;}

        .cate_wrap{position: relative; box-shadow: inset 0 -1px 0 var(--border-color01); margin-bottom: 80px;}
        .cate_wrap .link_list{display: flex; gap: clamp(30px, 4vw, 60px); font-size: var(--title-20); overflow: hidden; overflow-x: auto;}
        .cate_wrap .link_list > li{font-size: inherit; font-weight: 400; color: var(--black-color01); line-height: 1.3; flex-shrink: 0; transition: all 0.4s;}
        .cate_wrap .link_list > li > a{position: relative; display: block;padding-bottom: 20px;}
            .cate_wrap .link_list > li.on{color: var(--point-color01); font-weight: 500; box-shadow: inset 0 -2px 0 var(--point-color01);}

            /* over */
                @media (hover:hover) and (pointer:fine) {
                    .cate_wrap .link_list > li:hover{color: var(--point-color01);}
                }

        @media (max-width:1200px) {
            .cate_wrap .link_list{width: calc(100% + 60px); margin-left: -30px; padding-inline: 30px;}
        }
        @media (max-width:1023px) {
            .sub_top{padding-block: clamp(50px, 8vw, 80px) clamp(30px, 6vw, 60px);}
            .hd_title h2{font-size: clamp(40px, 6vw, 60px);}
            .nav_desc dt a{width: clamp(14px, 2.3vw, 18px);}
            .cate_wrap { margin-bottom: clamp(60px, 8vw, 80px); }
            .cate_wrap .link_list > li > a{padding-bottom: clamp(15px, 2vw, 20px);}
            .info_title.hd{margin-bottom: clamp(20px, 4vw, 40px);}
            .info_title h3{font-size: 210%;}
            .info_title h5{font-size: 110%;}
        }
        @media (max-width:640px) {
            .nav_desc :where(dt, dd):after{width: 5px; margin-inline:11px 14px;}
            .info_title h3{font-size: 190%;}
            .info_title h5{font-size: 100%;}
        }
        @media (max-width:479px) {
            .sub_top{gap: 25px;}
            .nav_desc{width: 100%;}
            .info_title h3{font-size: 170%;}
            .info_title h5{font-size: 95%;}
        }

/*───────────────────────────────────────────────────────────
	
    Board

───────────────────────────────────────────────────────────*/
    /* 작성하기 */
        #wrap .bbs_write{position: relative;display: block;width: 100%;box-sizing: border-box;border-top: 1px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);padding-block: 30px;}
        #wrap .bbs_write :where(tbody, tr, th, td){position: relative;display: block;width: 100%;background: none;border:0;padding:0;line-height: 1.57;}
        #wrap .bbs_write tbody{display: flex;gap: 20px clamp(50px, 5.3vw, 100px);flex-wrap: wrap;}
        #wrap .bbs_write tr{width: calc(100% / 2 - clamp(50px, 5.3vw, 100px) / 2);display: flex;align-items: center;gap: 18px 0;font-size: var(--title-20);}
            #wrap .bbs_write tr:has([name="content"], [name="captcha"]){width: 100%;}
        #wrap .bbs_write th{width: clamp(140px, 10vw, 150px);flex-shrink: 0;padding-right: 15px;font-size: inherit;font-weight: 500;color: var(--black-color01);letter-spacing: -0.03em;}
        #wrap .bbs_write th em{font-weight: inherit;color: var(--point-color01);}
        #wrap .bbs_write td{width: 100%;font-size: 95%;font-weight: 400;color: var(--black-color03);letter-spacing: -0.03em;line-height: inherit;}
        #wrap .bbs_write label{font-size: inherit; font-weight: inherit; color: inherit;}
        #wrap .bbs_write :where([type="text"], [type="password"], textarea){width: 100%;height: 60px;min-width: auto;border: 1px solid var(--border-color01);line-height: normal;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;padding: 0 20px;font-size: inherit;font-weight: inherit;color: inherit;vertical-align: middle;letter-spacing: inherit;margin: 0;}
        #wrap .bbs_write :where([type="text"], [type="password"], textarea)::placeholder{color: var(--black-color09);}
        #wrap .bbs_write textarea{height: 200px;resize: none;pad': 20px';padding: 20px;}
        #wrap .cap_wrap{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;}
        #wrap .cap_wrap .controller{display: flex;flex-shrink: 0;gap: 10px;width: 225px;padding: 10px;box-shadow: inset 0 0 0 1px var(--border-color01);}
        #wrap #captcha_box{width: 100%;aspect-ratio: auto 4.73;border: 1px solid var(--border-color01);overflow: hidden;margin: 0;}
        #wrap #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height: none;margin: -1px 0 0 -1px;}
        #wrap #refreshCode{font-size: 0;width: 40px;aspect-ratio: auto 1;background: var(--point-white) url('../images/sub/refreshCode.svg') no-repeat center;flex-shrink: 0;border: 1px solid var(--border-color01);}
        #wrap #captcha_inp{max-width: 230px;}
        #wrap .policy_wrap{margin-top: 40px;display: grid;gap: 24px;}


        #wrap .btn_wrap{position: relative;inset: auto;padding: 0;margin: 80px 0 0;display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;}

        @media (max-width:1023px){
            #wrap .bbs_write{padding-block: clamp(25px, 3vw, 30px);}
            #wrap .bbs_write tr{width: 100%;row-gap: clamp(10px, 2.3vw, 18px);}
            #wrap .bbs_write :where([type="text"], [type="password"]){height: clamp(45px, 7vw, 60px);padding-inline: clamp(15px, 2.5vw, 20px);}
            #wrap .bbs_write textarea{height: clamp(130px, 20vw, 200px);padding: clamp(15px, 2.5vw, 20px);}
            #wrap .cap_wrap .controller{width: clamp(200px, 25vw, 225px);padding: clamp(7px, 1.5vw, 10px);gap: clamp(7px, 1.5vw, 10px);}
			#wrap #refreshCode{width:clamp(36px, 4.5vw, 40px);background-size: clamp(14px, 2.1vw, 16px);}
            #wrap .policy_wrap{margin-top: clamp(25px, 4vw, 40px);gap: clamp(15px, 2.4vw, 24px);}
            #wrap .btn_wrap{margin-top:clamp(40px, 8vw, 80px);}
        }
        @media (max-width:860px){
            #wrap .cap_wrap{flex-wrap: wrap;}
        }
        @media (max-width:479px){
            #wrap .bbs_write tr{flex-wrap: wrap;}
            #wrap .bbs_write th{width: auto; flex-shrink: unset; padding-right: 0;}
            #wrap #captcha_inp{max-width: none;}
        }

    /* 인풋 */
        textarea[readonly]{width: 100%;height: 160px;font-size: var(--title-16);resize: none;box-sizing: border-box;line-height: 1.6;color: var(--black-color08);letter-spacing: -0.03em;overflow: hidden;overflow-y: auto;background: var(--point-white);border: 1px solid var(--border-color01);padding: 20px;}
            textarea[readonly]::-webkit-scrollbar {width: auto; }
            textarea[readonly]::-webkit-scrollbar-track {border-left: 4px solid var(--border-color01); margin:10px; cursor: pointer;}
            textarea[readonly]::-webkit-scrollbar-thumb {border-left: 4px solid var(--black-color10); cursor: pointer;}

        label:has([type="checkbox"]){display: flex;align-items: flex-start;gap: 12px;font-size: var(--title-18);font-weight: 500;color: var(--black-color01);line-height: 28px;transition: all 0.4s;cursor: pointer;}
        label:has([type="checkbox"]) em{font-weight: 600;color: var(--point-color08);display: contents;}
        label [type="checkbox"]{position: relative;display: inline-flex;width: 28px;height: 28px;border: 1px solid var(--border-color01);background: var(--point-white);transition: inherit;cursor: pointer;flex-shrink: 0;}
            label [type="checkbox"]:before{position: absolute;content:'';width: 16px;aspect-ratio: auto 1.33;background: url('../images/sub/chk_icon.svg') no-repeat center / 100% auto;transition: inherit;top: 50%;left: 50%;translate: -50% -50%;filter: var(--filter-black) opacity(0.2);}
            label [type="checkbox"]:checked{border-color: var(--black-color03);background: var(--black-color01);}
            label [type="checkbox"]:checked:before{filter: var(--filter-white);}
        label:has([type="checkbox"]) em{font-weight: inherit; color: var(--point-color01); display: contents;}

        @media (max-width:1023px){
            textarea[readonly]{padding: clamp(18px, 2.5vw, 20px);height: clamp(140px, 16.5vw, 160px);} 
            label:has([type="checkbox"]){line-height: clamp(20px, 3.3vw, 28px);gap: clamp(10px, 1.7vw, 12px);}
            label [type="checkbox"]{width: clamp(20px, 3.3vw, 28px);height: clamp(20px, 3.3vw, 28px);}
            label [type="checkbox"]:before{width: clamp(11px, 2.1vw, 16px);}
        }
        @media (max-width:640px){
            textarea[readonly]::-webkit-scrollbar-track {border-width: 3px;}
            textarea[readonly]::-webkit-scrollbar-thumb {border-width: 3px;}
        }


    /* 버튼 */
        #wrap .view_btn{position: relative; line-height: inherit; min-height: auto;}
        #wrap .view_btn:after{display: none;}
        #wrap .btn_wrap{position: relative;inset: auto;display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;text-align: center;padding: 0;margin: 60px 0 0;font-size: var(--title-20);}
        #wrap .btn_wrap :where(button, a){display: flex;align-items: center;justify-content: center;font-size: inherit;font-weight: 400;color: var(--point-white);line-height: 1.3;min-width: 180px;padding: 17px 25px;background: var(--point-color01);}
            #wrap .btn_wrap :where(button, a).sm{min-width:140px;}

        @media (max-width:1023px) {
            #wrap .btn_wrap{margin-top: clamp(35px, 6vw, 60px);}
            #wrap .btn_wrap :where(button, a){min-width: clamp(135px, 19vw, 180px);padding-block: clamp(14px, 2.2vw, 17px);}
            #wrap .btn_wrap :where(button, a).sm{min-width: clamp(100px, 15vw, 140px);}
        }


    /* 검색 */
        #wrap .search_wrap{position: relative; margin-bottom: 40px;}
        #wrap .search_wrap fieldset{display: flex;justify-content: flex-end;gap: 10px;font-size: var(--title-20);}
        #wrap .search_wrap .inp_box{display: flex;width: 100%;max-width: 360px;}
        #wrap .search_wrap :where(select, [type="text"], button){height: 50px;font-size: 90%;font-weight: 400;color: var(--black-color06);line-height: normal;border: 1px solid var(--border-color01);background: var(--point-white);padding-inline: 19px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
        #wrap .search_wrap select{width: 100%;max-width: 160px;appearance: none;background: var(--point-white) url('../images/sub/sel_arw.svg') no-repeat calc(100% - 19px) 50%;padding-right: 45px;flex-shrink: 0;}
        #wrap .search_wrap [type="text"]{width: 100%;border-right: 0;}
        #wrap .search_wrap button{width: 50px;flex-shrink: 0;background: var(--black-color01) url('../images/sub/search.svg') no-repeat center;border: 0;padding: 0;}

        @media (max-width:1023px) {
            #wrap .search_wrap{margin-bottom: clamp(20px, 4vw, 40px);}
            #wrap .search_wrap :where(select, [type="text"], button){padding-inline: clamp(15px, 2.4vw, 19px);}
            #wrap .search_wrap .inp_box{max-width: clamp(300px, 36vw, 360px);}
            #wrap .search_wrap :where(select, [type="text"], button){height: clamp(42px, 6.5vw, 50px);}
			#wrap .search_wrap select{max-width: clamp(120px, 17vw, 160px);background-position-x: calc(100% - clamp(15px, 2.4vw, 19px));padding-right: clamp(40px, 5vw, 50px);}
            #wrap .search_wrap button{width: clamp(42px, 6.5vw, 50px);background-size: clamp(18px, 2.7vw, 22px);}
        }
        @media (max-width:479px) {
            #wrap .search_wrap :where(select, [type="text"], button){font-size: 85%;}
        }
        @media (max-width:360px) {
            #wrap .search_wrap fieldset{flex-wrap: wrap;}
            #wrap .search_wrap .inp_box{max-width: 100%;}
            #wrap .search_wrap select{max-width: 100%; flex-shrink: unset;}
        }

    /* 기본 리스트 */
        #wrap .list_default{position: relative;font-size: var(--title-20);border-top: 2px solid var(--black-color01);}
        #wrap .list_default :where(th, td){font-size: 90%;font-weight: 400;line-height: 1.3;text-align: center;padding-inline: 15px;border-bottom: 1px solid var(--border-color01);}
        #wrap .list_default :where(th, td) strong{font-weight: 500;}
        #wrap .list_default .left{text-align: left;}
        #wrap .list_default th{color: var(--black-color00);padding-block: 20px;}
        #wrap .list_default td{color: var(--black-color06);padding-block: 23px;font-weight: 300;}
        #wrap .list_default td a{color: var(--black-color01);white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}

        @media (max-width:1023px) {
            #wrap .list_default th{padding-block: clamp(15px, 2vw, 20px);}
            #wrap .list_default td{padding-block: clamp(17px, 2.3vw, 23px);}
        }
        @media (max-width:640px) {
            #wrap .list_default col:nth-child(1){width: 70px;}
            #wrap .list_default col:nth-child(3){width: 130px;}
        }
        @media (max-width:479px) {
            #wrap .list_default :is(col, th, td):nth-child(1){display: none;}
            #wrap .list_default col:nth-child(3){width: 120px;}
            #wrap .list_default :where(th, td){font-size: 85%;}
        }

    /* 상세 */
        /* 상세 */
        #wrap .bbs_view{position: relative;font-size: var(--title-20);border-bottom: 1px solid var(--border-color01);}
        #wrap .bbs_view .view_tit{padding: 30px 20px 23px;text-align: left;border: 0;margin: 0;width: 100%;font-size: var(--title-20);background: none;display: grid;gap: 18px;border-top: 2px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);}
            #wrap .bbs_view .view_tit:after{display: none;}
        #wrap .bbs_view .view_tit h3{font-size: 150%;font-weight: 500;color: var(--black-color01);width: 100%;text-align: inherit;line-height: 1.3;letter-spacing: -0.03em;}
        #wrap .bbs_view .view_tit p{font-size: 90%;font-weight: 400;color: var(--black-color08);width: 100%;text-align: inherit;display: block;line-height: 1.67;padding: 0;}
        #wrap .bbs_view .view_cont{padding: 30px 20px;min-height: 278px;font-size: 95%;font-weight: 400;color: var(--black-color04);line-height: 1.8;letter-spacing: -0.03em;border-bottom: 0;box-sizing: border-box;width: 100%;margin: 0;word-break: keep-all;}
        #wrap .extra_editor_wrap{display: flex;gap: 12px clamp(30px, 3vw, 44px);width: 100%;border: 0;box-sizing: border-box;margin: 0;background: none;overflow: hidden;padding: 23px 0;border-top: 1px solid var(--border-color01);}
        #wrap .extra_editor_wrap h4{position: relative;font-size: 90%;font-weight: 500;color: var(--black-color03);line-height: 1.3;text-align: center;width: 140px;flex-shrink: 0;padding: 0 15px;background: none;display: flex;align-items: center;justify-content: center;}
        #wrap .extra_editor_wrap h4:before{position: absolute; content:''; width: 1px; height: 12px; background: var(--border-color01); top:50%; right:0; translate: 0 -50%;}
        #wrap .extra_cont{display: flex;flex-direction: column;gap: 12px;padding: 0;font-size: 85%;font-weight: 400;color: var(--black-color07);line-height: 1.3;width: 100%;}
        #wrap .extra_cont span{font-size: inherit;color: inherit;display: block;margin: 0;}
        #wrap .extra_cont span a{color: inherit !important;}


        @media (max-width:1023px){
            #wrap .bbs_view .view_tit{padding: clamp(23px, 3vw, 30px) clamp(15px, 2.5vw, 20px) clamp(20px, 2.3vw, 23px);gap: clamp(10px, 2vw, 18px);}
            #wrap .bbs_view .view_tit h3{font-size: 180%;}
            #wrap .bbs_view .view_cont{padding: clamp(20px, 3vw, 30px) clamp(15px, 2.5vw, 20px);min-height: clamp(180px, 28vw, 278px);}
            #wrap .extra_editor_wrap{padding-block: clamp(18px, 2.3vw, 23px);column-gap: clamp(25px, 3.5vw, 30px);}
            #wrap .extra_editor_wrap h4{width: clamp(100px, 14vw, 140px);}
        }
        @media (max-width:640px){
            #wrap .bbs_view .view_tit h3{font-size: 160%;}
        }
        @media (max-width:479px){
            #wrap .bbs_view .view_tit h3{font-size: 130%;}
            #wrap .bbs_view .view_cont{font-size: 90%;line-height: 1.7;}
        }
        @media (max-width:360px){
            #wrap .extra_editor_wrap{flex-wrap: wrap;padding-inline: 15px;}
            #wrap .extra_editor_wrap h4{width: 100%;padding-inline: 0;text-align: left;justify-content: flex-start;}
            #wrap .extra_editor_wrap h4:before{display: none;}
        }

    /* 페이징 */
        #wrap .paging {text-align:center;padding:0;line-height:normal;margin: 50px 0 0;box-sizing:border-box;display: flex;justify-content: center;flex-wrap: wrap;gap: 10px;font-size: var(--title-20);}
		#wrap .paging span {display: block;}
		#wrap .paging a {display:inline-flex;align-items:center;justify-content:center;font-size: max(13px, 85%);font-weight: 400;color: var(--black-color08);padding: 0;border:0;box-sizing:border-box;width: auto;min-width: 36px;height: auto;min-height: 22px;line-height: 1.3;text-align:center;margin: 0;border-radius: 0;}
		#wrap .paging :is(.page_num.on a, a.on){color: var(--point-color01); font-weight: 600;}
		#wrap .paging .arrow a {font-size:0;background:no-repeat center;}
        #wrap .paging .arrow img{display: none;}
        #wrap .paging .arrow:where(.first, .last) a{background-image:url('../images/sub/paging_first.svg');}
        #wrap .paging .arrow:where(.prev, .next) a{background-image:url('../images/sub/paging_prev.svg');}
        #wrap .paging .arrow:where(.next, .last) a{scale: -1 -1;}
		#wrap .paging .arrow.prev a {margin-right: 5px;}
		#wrap .paging .arrow.next a {margin-left: 5px;}

        @media (max-width:1023px){
            #wrap .paging{gap: clamp(5px, 1.5vw, 10px); margin-top: clamp(35px, 5vw, 50px);}
            #wrap .paging a{min-width: clamp(28px, 4.1vw, 36px);}
            #wrap .paging .arrow.prev a {margin-right:clamp(0px, 1vw, 5px);}
            #wrap .paging .arrow.next a {margin-left: clamp(0px, 1vw, 5px);}
        }

/*───────────────────────────────────────────────────────────
	
    Goods

───────────────────────────────────────────────────────────*/
    /* 카테고리 */
        .prodCate{border-top: 2px solid var(--black-color01);padding-block: 60px;}
        .prodCate .info_list{display: flex; flex-wrap: wrap; gap: 20px; font-size: var(--title-20);}
        .prodCate .info_list > li{position: relative;font-size: inherit;font-weight: 400;color: var(--black-color05);line-height: 1.3;text-align: center;border: 1px solid var(--border-color01);background: var(--point-white);transition: all 0.4s;}
            .prodCate .info_list > li.on, .prodCate .info_list:not(:has(> li.on)) > li:first-child{color: var(--point-color01); border-color: var(--point-color01);}
        .prodCate .info_list > li > a{display:flex;align-items: center;justify-content: center;padding: 12px 26px;}

            /* over */
                @media (hover:hover) and (pointer:fine) {
                    .prodCate .info_list > li:hover{border-color: var(--point-color01);}
                }

        @media (max-width:1023px) {
            .prodCate{padding-block: clamp(30px, 6vw, 60px);}
            .prodCate .info_list{gap: clamp(10px, 2vw, 20px);}
            .prodCate .info_list > li > a{padding: clamp(10px, 1.7vw, 12px) clamp(13px, 2.6vw, 26px);}
        }
        @media (max-width:479px) {
            .prodCate .info_list > li{font-size: 90%;}
        }
        @media (max-width:360px) {
            .prodCate .info_list{gap: 7px;}
            .prodCate .info_list > li{font-size: 80%;}
            .prodCate .info_list > li > a{padding-inline: 10px;}
        }

    /* 리스트 */
        .no_data{text-align: center; font-size: var(--title-18); font-weight: 400; color: var(--black-color06); text-align: center; padding-block: 50px;}
        .prod_list{display: grid; grid-template: auto / repeat(4, 1fr); gap: 40px clamp(15px, 2.2vw, 40px);}
        .prod_list > li{position: relative;}
        .prod_list .link{position: absolute; inset: 0; z-index: 3;}
        .prod_list .desc{font-size: var(--title-20); display: grid; gap: 20px;}
        .prod_list .desc dt{width: 100%;aspect-ratio: auto 1;overflow: hidden;display: flex;align-items: center;justify-content: center;}
        .prod_list .desc dt img{width:100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .prod_list .desc dd{font-size: inherit; font-weight: 400; color: var(--black-color01); line-height: 1.3; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

            /* over */
                @media (hover:hover) and (pointer:fine) {
                    .prod_list > li:hover .desc dt img{scale: 1.05;}
                }

        @media (max-width:1023px) {
            .prod_list{row-gap: clamp(30px, 4.5vw, 40px);}
            .prod_list .desc{gap: clamp(15px, 2vw, 20px);}
        }
        @media (max-width:860px) {
            .prod_list{grid-template: auto / repeat(2, 1fr);}
        }
        @media (max-width:479px) {
            .prod_list .desc dd{font-size: 90%;}
        }
        @media (max-width:360px) {
            .prod_list{grid-template: auto / repeat(1, 1fr);}
        }

    /* 상세 */
        .prod_view{display: grid; gap: 100px;}
        .prod_view .gd_info{display: flex; align-items: center; gap: clamp(50px, 5.3vw, 100px);}
        .prod_view .gd_info .thumb{font-size: 0;width: 37.5%;aspect-ratio: auto 1;flex-shrink: 0;display: flex;align-items: center;justify-content: center;overflow: hidden;}
        .prod_view .gd_info .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .prod_view .gd_info .desc{font-size: var(--title-20); display: grid; gap: 30px; width: 100%;}
        .prod_view .gd_info .desc dt{font-size: 230%;font-weight: 600;color: var(--black-color02);line-height: 1.3;letter-spacing: 0;}
        .prod_view .gd_info .desc dd{font-size: inherit;font-weight: 400;color: var(--black-color05);line-height: 1.6;letter-spacing: -0.02em;text-wrap: balance;}
        .prod_view .gd_cont{padding-block: 60px; border-top:2px solid var(--black-color00); border-bottom: 2px solid var(--border-color01);}

        @media (max-width:1023px) {
            .prod_view{gap: clamp(50px, 10vw, 100px);}
            .prod_view .gd_info{gap: clamp(25px, 5vw, 50px);}
            .prod_view .gd_info .desc{gap: clamp(15px, 3vw, 30px);}
            .prod_view .gd_info .desc dt{font-size: 210%;}
            .prod_view .gd_cont{padding-block: clamp(30px, 6vw, 60px);}
        }
        @media (max-width:860px) {
            .prod_view .gd_info{flex-wrap: wrap;}
            .prod_view .gd_info .thumb{width: 100%; max-width: 580px; flex-shrink: unset;}
        }
        @media (max-width:640px) {
            .prod_view .gd_info .desc dt{font-size: 190%;}
        }
        @media (max-width:479px) {
            .prod_view .gd_info .desc dt{font-size: 170%;}
            .prod_view .gd_info .desc dd{font-size: 90%;}
        }