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

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


/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
    .btn, .btn_lg, .btn_sm, .btn_md {position: relative;display: inline-flex;align-items: center;justify-content: center;border:1px solid;font-weight: 600;box-sizing: border-box;color: var(--black-color00);line-height: 1.2;border-radius: 0;overflow: hidden;}

    .btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;}
    .btn {height: auto;padding: 6px 15px 7px;font-size: 90%;}
    .btn_lg {width:92px;height:72px;line-height:70px;font-size:14px;}
    .btn_md {width:60px;line-height:28px;height:30px;font-size:13px;}
    .btn_sm {height:30px;line-height:28px;width:auto;padding:0 8px;font-size:inherit;border-color:#aaa;background-color:#aaa;color:#fff;}

    #wrap .btn_point{color: var(--point-white);background: var(--black-color11);border-color: var(--border-color03);font-weight: 400;}
    #wrap .btn_wh{border-color: var(--point-white);background-color: var(--point-white);color: var(--black-color00);}
    #wrap .btn_basic{border-color:var(--black-color00);background-color:var(--point-white);color:var(--black-color00);}
    #wrap .btn_default{border-color:#aaa;background-color:#aaa;color:#fff;}
    #wrap .btn_info{border-color:#d3d3d3;background-color:#fff;color:#555;}
    #wrap .btn_reset{border-color:#d3d3d3;background:#fff url('../images/common/icon_btn_reset.gif') no-repeat 9px 50%;padding:0 10px 0 30px;color:#555;}

    .btn_wrap {margin: 0;padding: 80px 0 0;display:flex;justify-content: flex-end;flex-wrap: wrap;gap: 15px;font-size: var(--title-20);}
	.btn_wrap button{font-size:inherit;color:inherit;font-weight:inherit;}

    @media (max-width:1023px) {
        .btn_wrap{padding-top: clamp(30px, 8vw, 80px);}
    }
    @media (max-width:479px) {
        .btn_wrap{gap: 10px;}
    }


/*───────────────────────────────────────────────────────────
	공통
───────────────────────────────────────────────────────────*/
    #container{border-top: var(--borderline01) solid var(--point-color01); padding-block: 46px 160px;}
    #wrap:has(.full_sec) #container > .w_custom.cont{width: 100%; max-width: 100%;}

    .sub_visual{position: relative;height: 697px;background: no-repeat center / cover;font-size: var(--title-20);color: var(--point-white);padding-block: 96px;box-sizing: border-box;}
    .sub_visual .w_custom{display: flex;flex-direction: column;gap: 10px;max-width: 1740px;height: 100%;justify-content: flex-end;border-left: 1px solid rgba(255,255,255,0.25);padding-left: 12px;}
    .sub_visual h2{font-size: 480%;font-weight: 600;line-height: 1.3;padding: 50px 0 0 48px;border-left: 1px solid var(--point-white);box-sizing: border-box;}

    .sub_title{position: relative;font-size: var(--title-20);box-sizing: border-box;display: flex;flex-direction: column;align-items: flex-start;gap: 40px;}
        .sub_title.hd{margin-bottom: 46px;}
        .sub_title.cen{text-align: center;align-items: center;}
    .sub_title h2{font-size: 400%;font-weight: 700;color: var(--black-color00);line-height: 1;}
    .sub_title h2 em{font-weight: inherit; color: var(--point-color01);}
    .sub_title h3{font-size: 225%; font-weight: 700; color: var(--black-color00); line-height: 1.28;}
    .sub_title .logo{display: block; width: 60%;}
    .sub_title h3 small{font-size: 93%; line-height: 1.2;}

    @media (max-width:1023px){
        #container{padding-bottom: clamp(100px, 16vw, 160px);}

        .sub_visual{height: clamp(450px, 69.7vw, 697px);padding-block: clamp(60px, 9.6vw, 96px);}
        .sub_visual h2{font-size: 440%;padding: clamp(20px, 4.8vw, 48px) 0 0 clamp(20px, 4.8vw, 48px);}

        .sub_title{gap: clamp(20px, 4vw, 40px);}
        .sub_title.hd{margin-bottom: clamp(30px, 5vw, 46px);}
        .sub_title h2{font-size: 370%}
        .sub_title h3{font-size: 205%;}
    }
    @media (max-width:860px){
        .sub_visual h2{font-size: 400%;}
        
        .sub_title h2{font-size: 340%}
    }
    @media (max-width:640px){
        .sub_visual h2{font-size: 350%;}

        .sub_title h2{font-size: 310%}
        .sub_title h3{font-size: 195%;}
    }
    @media (max-width:479px){
        .sub_visual h2{font-size: 300%;}

        .sub_title h2{font-size: 270%;}
        .sub_title h3{font-size: 175%;}
    }

/*───────────────────────────────────────────────────────────
	company
───────────────────────────────────────────────────────────*/
    /* 회사소개 */
        .sub_about .info_list{max-width: 1100px;margin-inline: auto;}
        .sub_about .info_list > li{display: flex;align-items: center;justify-content: space-between;gap: 30px;}
        .sub_about .info_list > li:nth-child(2n){flex-direction: row-reverse;}
        .sub_about .info_list .thumb{display: flex;}
        .sub_about .info_list .cont{width: fit-content; text-align: right;}
        .sub_about .info_list .txt_wrap{position: relative;font-size: var(--title-20);}
        .sub_about .info_list .txt_wrap + .txt_wrap{margin-top: 35px;}
        .sub_about .info_list .txt_wrap h3{font-size: 240%;font-weight: 700;color: var(--point-color03);line-height: 1.2;}
            .sub_about .info_list .txt_wrap h3 + h5{margin-top: 10px;}
        .sub_about .info_list .txt_wrap h5{font-size: 170%; font-weight: 600; color: var(--black-color03); line-height: 1.57;text-decoration: underline; text-underline-offset: -8px; text-decoration-skip-ink: none; text-decoration-color: rgba(179, 17, 23, 0.1); text-decoration-thickness: 13px;}
        .sub_about .info_list .txt_wrap h6{font-size: 130%; font-weight: 400; color: var(--black-color03); line-height: 1.6;}

        @media (max-width:1023px){
            .sub_about .info_list .txt_wrap + .txt_wrap{margin-top: clamp(15px, 3.5vw, 35px);}
            .sub_about .info_list .txt_wrap h3 + h5{margin-top: clamp(5px, 1vw, 10px);}
            .sub_about .info_list .txt_wrap h3{font-size: 220%;}
            .sub_about .info_list .txt_wrap h5{font-size: 160%;}
            .sub_about .info_list .txt_wrap h6{font-size: 120%;}
        }
        @media (max-width:860px){
            .sub_about .info_list > li{display: block;}
                .sub_about .info_list > li + li{margin-top: 30px;}
            .sub_about .info_list .cont{width:100%;text-align: left;padding-top: 20px;}
        }
        @media (max-width:640px){
            .sub_about .info_list .txt_wrap h3{font-size: 200%;}
            .sub_about .info_list .txt_wrap h5{font-size: 150%;}
            .sub_about .info_list .txt_wrap h6{font-size: 110%;}
        }
        @media (max-width:479px){
            .sub_about .info_list .txt_wrap h3{font-size: 180%;}
            .sub_about .info_list .txt_wrap h5{font-size: 140%;}
            .sub_about .info_list .txt_wrap h6{font-size: 100%;}
        }

    /* 오시는 길 */
        .sub_location{border-top: var(--borderline01) solid var(--point-color01); padding-top: 62px;}
        .sub_location .map_box{width: 100%; height: 505px;}
        .sub_location .map_box iframe{width: 100%; height: 100%;}
        .sub_location .map_info{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 20px 30px;padding-block: 27px;border-bottom: 2px solid var(--black-color11);}
        .sub_location .addr_desc{display: flex; align-items: center; gap: 10px; font-size: var(--title-20);}
        .sub_location .addr_desc dt{position: relative; flex-shrink: 0; display: flex; align-items: center; height: 48px;}
        .sub_location .addr_desc dt em{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);font-size: 110%;font-weight: 700;color: var(--point-color01);line-height: 1.48;}
        .sub_location .addr_desc dd{font-size: 110%; font-weight: 700; color: var(--black-color00); line-height: 1.47;}
        .sub_location .addr_desc dd span{display: block;}
        .sub_location .exp_wrap{display: flex; flex-wrap: wrap; gap:15px 38px;}
        .sub_location .exp_wrap .addr_desc dd{font-size: max(13px, 85%);}
        .sub_location .traffic{padding: 86px 0 0 30px;}
        .sub_location .traffic .addr_desc{gap: 36px;}
        .sub_location .traffic .addr_desc dd{font-size: 100%;}

        @media (max-width:1023px){
            .sub_location{padding-top: clamp(40px, 6.2vw, 62px);}
            .sub_location .map_box{height: clamp(300px, 50.5vw, 505px);}
            .sub_location .addr_desc dt{height: clamp(36px, 4.8vw, 48px);}
            .sub_location .traffic{padding: clamp(50px, 8.6vw, 86px) 0 0 clamp(20px, 3vw, 30px);}
            .sub_location .traffic .addr_desc{gap: clamp(20px, 3.6vw, 36px);}
        }

    /* 사업장 */
        .sub_business{margin-top: -1vw;}
        .sub_business .tab_list{display: flex;flex-wrap: wrap;gap: 10px 30px;font-size: var(--title-20);margin-bottom: 110px;}
        .sub_business .tab_list > li{font-size: max(13px, 85%);font-weight: 400;color: var(--black-color11);cursor: pointer;line-height: 1.58;text-decoration: underline;text-underline-offset: 3px;transition: all 0.4s;}
        .sub_business .tab_list > li.on{color: var(--point-color01);}
        .sub_business .tab_cont > .item{transition: all 0.4s;}
        .sub_business .tab_cont > .item:not(.on){opacity: 0; height: 0; overflow: hidden;}
        .sub_business .map_list{display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(15px, 3.2vw, 60px);}
        .sub_business .exp_list{margin-top: 100px; display: flex; flex-direction: column; gap: 30px;}
        .sub_business .exp_list .title{position: relative; font-size: var(--title-20); border-bottom: 1px solid var(--black-color00); padding-bottom: 10px; box-sizing: border-box;}
        .sub_business .exp_list .title h6{font-size: max(13px, 85%); font-weight: 700; color: var(--black-color00); line-height: 1.57;}
        .sub_business .exp_list .desc{position: relative; font-size: var(--title-20); box-sizing: border-box; display: flex; padding-block: 26px; border-bottom: 1px solid var(--black-color00);}
        .sub_business .exp_list .desc dt{font-size: max(13px, 70%); font-weight: 700; color: var(--black-color00); line-height: 1.54; width: 180px; flex-shrink: 0; padding-right: 15px; box-sizing: border-box;}
        .sub_business .exp_list .desc dd{font-size: max(13px, 75%); font-weight: 700; color: var(--black-color11); line-height: 1.59;}
        .sub_business .exp_list .desc dd strong{display: block; font-size: 153%; line-height: 1.51; color: var(--black-color00);}
        .sub_business .area_wrap{display: flex;flex-wrap: wrap;gap: 30px 0;max-width: 1080px;margin-inline: auto;}
        .sub_business .map_box{position: relative;width: 37.2%;}
        .sub_business .map_box img{width: auto; height: auto;}
        .sub_business .map_box img.ov{position: absolute; top:0; left:0; opacity: 0; pointer-events: none; transition: all 0.4s;}
            .sub_business .map_box img.ov[title=""]{display: none;}
            .sub_business .map_box img.ov.on{opacity: 1;}
        .sub_business .map_box area[title=""]{display: none;}
        .sub_business .cont_box{width: 62.8%;padding-left: clamp(30px, 4.8vw, 90px);box-sizing: border-box;}
		.sub_business .map_info{transition: all 0.4s;}
        .sub_business .map_info:not(.on){overflow: hidden; opacity: 0; height: 0;}
        .sub_business .map_info .title{position: relative; font-size: var(--title-20);}
		.sub_business .map_info .title h6{font-size:115%;font-weight:700;color: var(--black-color00);line-height: 1.51;}
        .sub_business .map_info .comp_list{width: 100%;font-size: var(--title-20);padding-left: 35px;display: flex;flex-wrap: wrap;gap: 0 15px;box-sizing: border-box;}
        .sub_business .map_info .comp_list > li{width: calc(100% / 2 - 7.5px);font-size: 115%;font-weight: 700;color: var(--black-color00);line-height: 1.51;}

        .sub_business .area_wrap:has(.tas_info) { justify-content: space-between; }
        .sub_business .map_info.tas_info .comp_list > li { width: 100%; }

        @media (max-width:1023px){
            .sub_business .tab_list{margin-bottom:clamp(40px, 11vw, 110px)}
            .sub_business .exp_list{margin-top:clamp(30px, 10vw, 100px);}
            .sub_business .exp_list .desc{padding-block:clamp(20px, 2.6vw, 26px)}
            .sub_business .exp_list .desc dt{width: clamp(90px, 18vw, 180px);}
        }
        @media (max-width:860px){
            .sub_business .map_box{width: 100%;text-align: center;}
			.sub_business .map_box img.ov{left:50%;transform: translateX(-50%);}
            .sub_business .cont_box{width: 100%; padding-left: 0;}
        }
        @media (max-width:479px){
            .sub_business .map_info .comp_list > li{width: 100%; font-size: 100%;}
        }

/*───────────────────────────────────────────────────────────
	goods
───────────────────────────────────────────────────────────*/
    /* 리스트 */
        .goods_cate{display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: var(--title-20); margin-bottom: 109px; display:none;}
        .goods_cate > li{position: relative;width: calc(100% / 7 - 27.43px);font-size: max(13px, 70%);font-weight: 700;color: var(--black-color00);box-sizing: border-box;text-align: center;}
        .goods_cate > li > a{display: flex;align-items: center;justify-content: center;padding: 11px 15px;border:1px solid var(--black-color00);border-radius: 50px;background: var(--point-white);box-sizing: border-box;transition: all 0.4s;height: 100%;}
            .goods_cate > li.on > a{background: var(--point-color01); color: var(--point-white);}

        .goods_list{display: flex; flex-wrap: wrap; gap: 23px;}
        .goods_list > li{position: relative;width: calc(100% / 4 - 17.25px);padding: 13px 18px 24px;box-sizing: border-box;background: var(--gray-bg02); box-shadow:var(--shadow-02);}
        .goods_list .link{position: absolute; inset: 0; z-index: 5;}
        .goods_list .thumb{display: block; width: 100%; aspect-ratio: auto 1; overflow: hidden;}
        .goods_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .goods_list .desc{font-size: var(--title-20); margin-top: 12px;}
        .goods_list .desc dt{font-size: inherit; font-weight: 700; color: var(--black-color03); line-height: 1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
            .goods_list .desc dt + dd{margin-top: 20px;}
        .goods_list .desc dd{font-size: 16px;font-weight: 500;color: var(--black-color03);line-height: 1.25;height: 60px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
        .no_data{font-size: max(13px, var(--title-15));text-align: center;padding-block: 30px;}

            /* over */
            @media (hover:hover) and (pointer:fine){
                .goods_cate > li:not(.on) > a:hover{background: var(--point-color01); color: var(--point-white);}
                
                .goods_list > li:hover .thumb img{transform: scale(1.05);}
            }

        @media (max-width:1400px){
            .goods_cate{column-gap:20px;}
            .goods_cate > li{width: calc(100% / 7 - 17.15px);}
        }
        @media (max-width:1300px){
            .goods_cate > li{width: calc(100% / 6 - 16.67px);}
        }
        @media (max-width:1100px){
            .goods_cate > li{width: calc(100% / 5 - 16px);}
        }
        @media (max-width:1023px){
            .goods_cate{column-gap:15px;margin-bottom: clamp(20px, 10.9vw, 109px);}
            .goods_cate > li{width: calc(100% / 5 - 12px);}

            .goods_list{gap: 15px;}
            .goods_list > li{width: calc(100% / 4 - 11.25px);}
            .goods_list .desc dt + dd{margin-top: clamp(10px, 2vw, 20px);}
            .goods_list .desc dd{font-size: 15px; height: 57px;}
        }
        @media (max-width:860px){
            .goods_cate{column-gap:12px;}
            .goods_cate > li{width: calc(100% / 4 - 9px);}

            .goods_list > li{width: calc(100% / 2 - 7.5px);}
        }
        @media (max-width:640px){
            .goods_cate{flex-wrap: nowrap;overflow: hidden;overflow-x: auto;width: calc(100% + 30px);margin-left: -15px;padding-inline: 15px;box-sizing: border-box;}
                .goods_cate {-ms-overflow-style: none; scrollbar-width: none; }
                .goods_cate::-webkit-scrollbar {display: none;}
            .goods_cate > li{width: max-content;flex-shrink: 0;}
            .goods_cate > li > a{padding-inline: 20px;}

            .goods_list .desc dd{font-size: 14px; height: 53px;}
        }
        @media (max-width:479px){
            .goods_list > li{padding:13px 13px 20px;}
            .goods_list .desc dt{font-size: max(15px, 90%);}
            .goods_list .desc dd{font-size: 13px; height: 49px;}
        }
        @media (max-width:360px){
            .goods_list > li{width: 100%;}
        }

    /* 상세 */ 
        .goods_view .detail_list{text-align: center;}

/*───────────────────────────────────────────────────────────
	board
───────────────────────────────────────────────────────────*/
    /* 검색 */
        .board_wrap{border-top: var(--borderline01) solid var(--point-color01); padding-top: 100px; }
        .search_wrap{margin-bottom: 22px;display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 10px 30px;}
        .search_wrap fieldset{display: flex;justify-content: flex-end;gap: 10px;font-size: var(--title-20);}
        .search_wrap select{border: 0;line-height: normal;padding: 0 40px 0 15px;background: var(--gray-bg02);width: 90px;height: 34px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;font-size: max(13px, 70%);font-weight: 500;color: var(--black-color00);flex-shrink: 0;appearance: none;background: var(--gray-bg02) url('../images/sub/sel_arw.svg') no-repeat calc(100% - 15px) 50%;}
        .search_wrap [type="text"]{border:1px solid var(--border-color03);width: 100%;max-width: 213px;height: 34px;line-height: normal;padding: 0 15px;background: var(--point-white);overflow: hidden;text-overflow:ellipsis;white-space:nowrap;font-size: max(13px, 70%);font-weight: 500;color: var(--black-color00);box-sizing: border-box;}
        .search_wrap [type="submit"]{display: inline-flex;align-items: center;height: 34px;background: var(--black-color11);font-size: max(13px, 70%);font-weight: 400;color: var(--point-white);padding-inline: 15px; flex-shrink: 0;}

        @media (max-width:1023px){
            .sub_board{padding-top: clamp(70px, 10vw, 100px);}
            .search_wrap{margin-bottom: clamp(15px, 3vw, 22px);}
        }

    /* 리스트 */
        .bbs_num{display: flex;font-size: var(--title-20);gap: 4px;line-height: inherit;padding: 0;}
        .bbs_num :where(dt, dd){font-size: max(12px, 60%); font-weight: 400; color: var(--black-color11); line-height: 1.34;}
        .bbs_num dt{flex-shrink: 0;}
        .bbs_num dd{color:var(--point-color01);}
        .bbs_table{position: relative;width: 100%;box-sizing: border-box;border-top: 1px solid var(--black-color00);table-layout: fixed;}
        .bbs_table .left{text-align: left;padding-inline: 15px;}
        .bbs_table tr{border-bottom: 1px solid var(--border-color03); text-align: center; font-size: var(--title-20);}
        .bbs_table :where(th, td){font-size: 90%;font-weight: 400; line-height: 1.3;}
        .bbs_table th{color: var(--black-color00); padding: 12px 5px;}
        .bbs_table td{color: var(--black-color11);padding: 11px 5px;}
        .bbs_table td a{text-decoration: underline;text-underline-offset: 3px; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

        @media (max-width:1023px){
            .bbs_table.list_default :where(col, th, td):nth-child(5){display: none;}
            .bbs_table.list_default col:nth-child(1){width: 80px;}
        }
        @media (max-width:860px){
            .bbs_table.list_default col:nth-child(1){width: 70px;}
        }
        @media (max-width:640px){
            .bbs_table.list_default :where(col, th, td):nth-child(3){display: none;}
            .bbs_table.list_default col:nth-child(1){width: 60px;}
        }
        @media (max-width:479px){
            .bbs_table.list_default :where(col, th, td):nth-child(1){display: none;}
        }
        @media (max-width:431px){
            .bbs_table.list_default :where(col, th, td):nth-child(4){display: none;}
        }

    /* 상세 */
        .bbs_view{font-size: var(--title-20);}
        .bbs_view .view_title{padding-block: 14px; border-block: 1px solid var(--border-color03);}
        .bbs_view .view_title h3{font-size: max(14px, 80%); font-weight: 400; color: var(--black-color00); line-height: 1.3; }
        .bbs_view .view_info{padding-block: 14px;display: flex;flex-wrap: wrap;gap: 8px 30px;border-bottom: 1px solid var(--border-color03);}
        .bbs_view .view_info .desc{display: inline-flex; gap: 4px;}
        .bbs_view .view_info .desc dt{flex-shrink: 0;}
        .bbs_view .view_info .desc :where(dt, dd){font-size: max(13px, 65%); font-weight: 400; color: var(--black-color00); line-height: 1.33;}
        .bbs_view .view_conts{padding:22px 0; line-height: 1.3;}

        @media (max-width:1023px){
            .bbs_view .view_info{column-gap:clamp(25px, 3vw, 30px);}
        }