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

───────────────────────────────────────────────────────────*/
   .sub_content{font-family:var(--font-type01);}

/*───────────────────────────────────────────────────────────
	공통
───────────────────────────────────────────────────────────*/
    .sub_visual{position: relative;height: 540px;z-index: 5;}
    .sub_visual .thumb{position: absolute;inset: 0;background: url('../images/sub/sv_thumb.jpg') no-repeat center / cover;}
        .sub_visual .thumb:before{position: absolute; content:''; inset: 0; background: rgba(0,0,0,0.45);}
        .sub_visual .thumb.sv_gd001{background-image: url('../images/sub/sv_gd001.jpg');}
        .sub_visual .thumb.sv_gd002{background-image: url('../images/sub/sv_gd002.jpg');}
        .sub_visual .thumb.sv_gd003{background-image: url('../images/sub/sv_gd004.jpg');}
        .sub_visual .thumb.sv_gd003{background-image: url('../images/sub/sv_gd003.jpg');}
        .sub_visual .thumb.sv_gd005{background-image: url('../images/sub/sv_gd005.jpg');}
        .sub_visual .thumb.sv_gd006{background-image: url('../images/sub/sv_gd006.jpg');}
        .sub_visual .thumb.board{background-image: url('../images/sub/sv_board.jpg');}

    .sub_visual .w_custom{display: flex;flex-direction: column;justify-content: center;gap: 16px;height: 100%;z-index: 2;padding-top: 20px;}
    .sub_visual .txt_wrap{position: relative;font-size: var(--title-20);box-sizing: border-box;}
    .sub_visual .txt_wrap h2{font-size: 90px;font-weight: 700;line-height: 1.1;letter-spacing: 0;filter: var(--filter-white);}

    .sub_nav{position: absolute;box-sizing: border-box;z-index: 9;display: flex;align-items: center;left: 0;bottom: 47px;width: 100%;}
    .sub_nav .home{display: flex;align-items: center;justify-content: center;flex-shrink: 0;padding-right: 24px;box-sizing: border-box;}
    .sub_nav .home img{max-width: 20px;}
    .sub_nav .desc{position: relative;display: flex;font-size: var(--title-20);width: 100%;}
    .sub_nav .desc :where(dt, dd){position: relative;font-size: max(15px, 90%);font-weight: 500;width: 100%;max-width: 270px;height: 100%;padding-inline: 25px;cursor: pointer;box-sizing: border-box;display: flex;align-items: center;}
    .sub_nav .desc :where(dt, dd):before{position: absolute;content:'';width: 1px;height: 12px;background: rgba(255,255,255,0.4);top:50%;left:0;translate: 0 -50%;transition: all 0.4s;}
    .sub_nav .desc :where(dt, dd).on :before{scale: -1 -1;}
    .sub_nav .desc :where(dt, dd) span{position: relative;display: block;width: 100%;padding-right: 30px;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;filter: var(--filter-white);}
    .sub_nav .desc :where(dt, dd) span:before{position: absolute;content: '';width: 9px;aspect-ratio: auto 1;clip-path: var(--poly-path01);border: 2px solid var(--black-color01);top: 42%;right: 2px;rotate: 135deg;translate: 0 -50%;transition: all 0.4s;box-sizing: border-box;border-radius: 2px;}
    .sub_nav .desc :where(dt, dd):not(:has(li)){display: none;}
    .sub_nav .desc ul{position: absolute;top: calc(100% + 15px);left:0;width: 100%;padding-block: 15px;box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s;background: var(--point-white);border: 1px solid var(--border-color01);box-sizing: border-box;border-radius: var(--radius-10);}
    .sub_nav .desc .on ul{opacity: 1; pointer-events: all;}
    .sub_nav .desc ul a{display: block;padding: 8px 24px;font-size: max(14px, 90%);color: var(--black-color06);}
    .sub_nav .desc ul .on a{color: var(--point-color01);}

    .hd_title{position: relative;font-size: var(--title-20);box-sizing: border-box;display: grid;gap: 20px;text-align: center;padding-block: 137px 57px;text-wrap: balance;}
    .hd_title h2{font-size: 70px;font-weight: 700;color: var(--black-color01);line-height: 1.1;letter-spacing: -0.03em;}

    
    @media (max-width:1023px){
        .sub_visual{height: clamp(350px, 54vw, 540px);}
		.sub_visual .w_custom{padding-top:clamp(0px, 2vw, 20px);}
        .sub_visual .txt_wrap h2{font-size: clamp(50px, 9vw, 90px);}

        .sub_nav{bottom: clamp(25px, 4.7vw, 47px);}
        .sub_nav .home{padding-right: clamp(20px, 2.5vw, 25px);}
        .sub_nav .desc :where(dt, dd){padding-inline: clamp(20px, 2.5vw, 25px);max-width: clamp(220px, 27.5vw, 270px);}
        .sub_nav .desc :where(dt, dd):before{height: clamp(10px, 1.7vw, 12px);}
        .sub_nav .desc ul a{padding: clamp(6px, 1.3vw, 8px) clamp(20px, 2.4vw, 24px);}

        .hd_title{padding-block: clamp(80px, 13.7vw, 137px) clamp(30px, 5.7vw, 57px);}
        .hd_title h2{font-size: clamp(38px, 7vw, 70px);}
    }

    @media (max-width:640px){
        .sub_nav .desc:has(dd li) dt{display: none;}
        .sub_nav .desc :where(dt, dd){max-width:none; padding-right: 0;}
    }


/*───────────────────────────────────────────────────────────
	Goods
───────────────────────────────────────────────────────────*/
    /* 카테고리*/
        .prodCate_list{display: flex;justify-content: center;flex-wrap: wrap;font-size: var(--title-20);text-align: center;gap: clamp(10px, 1.1vw, 20px); box-sizing: border-box; margin-bottom: 80px;}
        .prodCate_list > li{position: relative;font-size: 95%;font-weight: 600;color: var(--point-color01);line-height: 1.2;letter-spacing: -0.03em;background: var(--point-color02);border-radius: 60px;transition: all 0.4s;}
        .prodCate_list > li > a{display: flex;align-items: center;justify-content: center;padding: 19px 30px 18px;min-width: 304px;height: 100%;box-sizing: border-box;transition: inherit;}
            .prodCate_list > li.on{background: var(--point-color01);}
            .prodCate_list > li.on > a{filter: var(--filter-white);}

            @media (hover:hover) and (pointer:fine){
                .prodCate_list > li:hover{background: var(--point-color01);}
                .prodCate_list > li:hover > a{filter: var(--filter-white);}
            }

        @media (max-width:1023px){
            .prodCate_list{flex-wrap: nowrap;justify-content: flex-start;overflow: hidden;overflow-x: auto; width: calc(100% + 60px); margin-left: -30px; padding-inline: 30px; margin-bottom: clamp(30px, 8vw, 80px);}
            .prodCate_list > li{flex-shrink: 0;}
            .prodCate_list > li > a{padding-block: clamp(16px, 2.4px, 19px) clamp(15px, 2.3vw, 18px);min-width: auto;}
        }

    /* 페이징 */
        #wrap .paging {text-align:center;padding:0;line-height:normal;margin: 80px 0 0;box-sizing:border-box;display: flex;justify-content: center;flex-wrap: wrap;gap: 8px;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(14px, 80%);font-weight: 400;color: var(--black-color03);padding: 1px 5px 0;border:0;box-sizing:border-box;width: auto;min-width: 40px;height: 40px;line-height: 1.2;text-align:center;margin: 0;font-family: inherit;border: 0;}
		#wrap .paging :is(.page_num.on a, a.on){color: var(--point-white);background: var(--point-color01);border-radius: var(--radius-04);}
		#wrap .paging .arrow a {font-size:0;background:no-repeat center;}
        #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:16px;}
		#wrap .paging .arrow.next a {margin-left:16px;}

        @media (max-width:1023px){
            #wrap .paging{gap: clamp(5px, 1.3vw, 8px); margin-top: clamp(40px, 8vw, 80px);}
            #wrap .paging a{min-width: clamp(32px, 4.5vw, 40px);height: clamp(32px, 4.5vw, 40px);}
            #wrap .paging .arrow.prev a {margin-right:clamp(5px, 1.6vw, 16px);}
            #wrap .paging .arrow.next a {margin-left: clamp(5px, 1.6vw, 16px);}
        }

    /* 리스트 */
        .no_data{font-size: var(--title-18);font-weight: 500;color: var(--black-color06);padding: 50px 30px;text-align: center;box-sizing: border-box;border-top: 1px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);}

        .gd_table{position: relative; width: 100%; box-sizing: border-box;}
        .gd_table table{position: relative; width: 100%; box-sizing: border-box; font-size: var(--title-20); text-align: center; border-top: 1px solid var(--black-color01);}
        .gd_table :where(th, td){font-size: 90%; font-weight: 400; color: var(--black-color06); line-height: 1.22; letter-spacing: -0.03em; vertical-align: middle; padding-inline: 5px; border-bottom: 1px solid var(--border-color01); box-sizing: border-box;}
            .gd_table :where(th, td):nth-child(1){width: 5%;}
            .gd_table :where(th, td):nth-child(2){width: 6.875%;}
            .gd_table :where(th, td):last-child{width: 5%;}
        .gd_table thead th{font-weight: 500; color: var(--black-color01);padding-block: 31px;}
        .gd_table tbody td{padding-block: 20px;}
        .gd_table tbody td strong{font-weight: 500; color: var(--black-color03);}
        .gd_table .show_image{display: flex;align-items: center;justify-content: center;width: 100%;max-width: 80px;aspect-ratio: auto 1;border-radius: var(--radius-04);overflow: hidden;margin-inline: auto;}
        .gd_table .icon{display: flex;align-items: center;justify-content: center;margin-inline: auto;width: 36px;height: 36px;border-radius: var(--radius-04);background: var(--black-color08);padding: 8px;box-sizing: border-box; transition:all 0.4s;}

        .layer_dim{position: fixed;inset: 0;display: block;background: rgba(0,0,0,0.4);opacity: 0;pointer-events: none;z-index: 110;transition: all 0.4s;}
            body:has(.thumb_layer.on){overflow: hidden; touch-action: none;}
            body:has(.thumb_layer.on) .layer_dim{opacity: 1; pointer-events: all;}
        .thumb_layer{position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 120; box-sizing: border-box; opacity: 0; pointer-events: none; transition: all 0.4s;}
            .thumb_layer.on{opacity: 1;}
            .thumb_layer.on .w_custom{pointer-events: all;}
        .thumb_layer .w_custom{width: calc(100% - 60px);max-width: 560px;background: var(--point-white);border-radius: var(--radius-10);padding-right: 60px;}
        .thumb_layer .cont{padding: 30px;box-sizing: border-box;border-right: 1px solid var(--border-color01);}
        .thumb_layer .thumb{width: 100%; aspect-ratio: auto 1; display: flex; align-self: center; justify-content: center; border-radius: var(--radius-05);}
        .thumb_layer .close_btn{position: absolute;top: 19px;right:15px;width: 30px;aspect-ratio: auto 1;}
            .thumb_layer .close_btn{&:before, &:after{position: absolute;content:'';width: 77%;height: 2px;background: var(--black-color03);top:50%;left:50%;translate: -50% -50%;rotate: 45deg;}}
            .thumb_layer .close_btn:after{rotate: -45deg;}
			
			/* over */
				@media (hover:hover) and (pointer:fine){
					.gd_table .icon:hover{background:var(--point-color01);}
				}

		@media (max-width:1400px){
			.gd_table :where(th, td){font-size: max(15px, 75%);}
		}
		@media (max-width:1300px){
			.gd_table{overflow: hidden; overflow-x: auto; width: calc(100% + 60px); margin-left: -30px; padding-inline:30px; box-sizing: border-box;}
            .gd_table table{width: 1300px;}
		}
        @media (max-width:1023px){
            .gd_table thead th{padding-block: clamp(20px, 3.1vw, 31px);}
            .gd_table tbody td{padding-block: clamp(15px, 2vw, 20px);}
            .thumb_layer .w_custom{padding-right: clamp(45px, 6vw, 60px);}
            .thumb_layer .cont{padding: clamp(25px, 3vw, 30px);}
			.gd_table .icon{width: clamp(32px, 4.1vw, 36px);height: clamp(32px, 4.1vw, 36px);}
            .thumb_layer .close_btn{top:clamp(10px, 1.9vw, 19px);right: clamp(11px, 1.5vw, 15px);width: clamp(24px, 3vw, 30px);}
        }


/*───────────────────────────────────────────────────────────
	Company
───────────────────────────────────────────────────────────*/
    .sub_location_map {position:relative;font-size: 0;}
    .sub_location_map .map_box {position: relative;width: 100%;height: 600px;}
    .sub_location_map iframe {width: 100%;height: 100%;box-sizing:border-box;}
    .sub_location_info dl {text-align:center;}
    .sub_location_info dt {margin:40px 0 23px;display: flex;justify-content: center;}
    .sub_location_info dd ul li {font-size:16px;line-height: 1.68;color:#333;position:relative;}
    .sub_location_info dd ul li + li {margin-top:9px;display:inline-block;vertical-align:middle;}
    .sub_location_info dd ul li + li + li:before {content:'';display:inline-block;vertical-align:middle;margin:0 26px;width:1px;height:12px;background:#ddd;}
    .sub_location_info dd ul li span,
    .sub_location_info dd ul li p {font-size:inherit;line-height:inherit;color:inherit;display:inline-block;vertical-align:middle;}
    .sub_location_info dd ul li span {font-weight:600;padding-right:4px;}
    .sub_location_info dd ul li p {word-break:keep-all;}

    @media (max-width:1200px) {
        .sub_location_info dt {margin:35px 0 20px;}
        .sub_location_info dd ul li {font-size:15px;}
        .sub_location_info dd ul li + li + li:before {margin:0 23px;}
    }
    @media (max-width:1023px) {
        .sub_location_map .map_box{height: clamp(300px, 60vw, 600px);}
        .sub_location_info dt{max-height: clamp(40px, 6.5vw, 60px);}
    }
    @media (max-width:860px) {
        .sub_location_info dt {margin:30px 0 20px;}
        .sub_location_info dd ul li + li {}
        .sub_location_info dd ul li + li + li:before {margin:0 20px;height:10px;}
    }
    @media (max-width:767px) {
    }
    @media (max-width:640px) {
        .sub_location_map {padding:0;}
    }
    @media (max-width:479px) {
        .sub_location_info dd ul li {font-size:14px;line-height:1.6;}
        .sub_location_info dd ul li + li + li:before {margin:0 15px;height:9px;}
    }
    @media (max-width:380px) {
        .sub_location_info dd ul li {font-size:13px;}
        .sub_location_info dd ul li + li + li:before {margin:0 10px;}
    }

    @media (max-width:350px) {
        .sub_location_info dd ul li,
        .sub_location_info dd ul li + li {margin-top:9px;display:block;}
        .sub_location_info dd ul li + li + li:before {display:none;}
    }


/*───────────────────────────────────────────────────────────
	Board
───────────────────────────────────────────────────────────*/
    .sub_content .main_inquiry{background: none; padding:0;}
    .sub_content .main_inquiry tr{background: var(--point-white);border: 1px solid var(--border-color01);color: var(--black-color01);font-weight: 500;}
    .sub_content .main_inquiry table label small{color: var(--black-color08);}
    .sub_content .main_inquiry table input:is([type="text"], [type="password"]){font-weight: 400;}
    .sub_content .main_inquiry table input:is([type="text"], [type="password"])::placeholder{color:var(--black-color10);}
    .sub_content .main_inquiry #captcha_box{border: 1px solid var(--border-color01);}
    .sub_content .main_inquiry table textarea{font-weight: 400;}

    #wrap .btn_wrap{display: flex;flex-wrap: wrap;justify-content: center;margin: 60px 0 0;padding: 0;}

    @media (max-width:1023px){
        #wrap .btn_wrap{margin-top:clamp(30px, 6vw, 60px);}
    }