@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
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		/* custom button type */
			/* button 공통 요소 */
		.btn, .btn_lg, .btn_sm, .btn_md {font-weight: 500;border: 1px solid;vertical-align: top;text-align:center;box-sizing:border-box;cursor:pointer;box-shadow:none;outline: none;display: inline-flex;align-items: center;justify-content: center;line-height: 1.4;}
			/* button 크기별 */
		.btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;}
		.btn {width: 150px;height: 60px;font-size: var(--title-18);}
        .btn_md {width:130px; height:50px; font-size:var(--title-16);}

			/* button 색상별 */
		.btn_point{border-color: var(--black-color01) !important;background-color: var(--black-color01) !important;color:#fff !important;font-weight: 400;}
		.btn_basic{border-color:var(--black-color01) !important; background-color:var(--point-white) !important;color:var(--black-color01) !important;}
		.btn_default{border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;}
		.btn_info{border-color:#d3d3d3 !important;background-color:#fff !important;color:#555 !important;}
		.btn_reset{border-color:#d3d3d3 !important;background:#fff url(../images/common/icon_btn_reset.gif) no-repeat 9px 50% !important;padding:0 10px 0 30px !important;color:#555 !important;}
			/* button wrapper */
		.btn_wrap {padding-top:60px;font-size:0;vertical-align:top;display:inline-block;}
		.btn_wrap.ta_center {width:100%;}
		.btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:15px;}
		.btn_wrap button > a, .btn_wrap a > a{margin-left:0;}
		.view_btn .btn_wrap.ta_right {position:absolute;right:0px;top:0px;}

	@media screen and (max-width:1024px) {
			/* button wrapper */
		.btn_wrap {padding-top:50px;}
		.view_btn .btn_wrap.ta_left {position:absolute;left:0px;top:0px;}
        .btn {width: 140px;height: 55px;}
        .btn_md {width:120px; height:45px;}
	}
	@media screen and (max-width:640px) {
			/* button wrapper */
		.btn_wrap {padding-top:40px;}
		.btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:10px;}
        .btn {width: 120px;height: 50px;}
        .btn_md {width:100px; height:40px;}
	}
	@media screen and (max-width:479px) {
			/* button 크기별 */
		.btn_wd {font-size:16px;}
		.btn {width:100px;}
		.btn_md {width:90px; height:40px;}
			/* button wrapper */
		.view_btn .paging {width:100%;min-height:87px;}
		.view_btn .paging + .btn_wrap.ta_right{top:70px;}
	}

/*───────────────────────────────────────────────────────────
	공통
───────────────────────────────────────────────────────────*/
    .sub_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
        .sub_title.hd{padding: 75px 0 26px;}
    .sub_title h4{font-size: 150%; font-weight: 600; color: var(--black-color01); line-height: 1.35;}

    #wrap .no_data{text-align: center; font-size: var(--title-18); font-weight: 400; color: var(--black-color03); padding:30px 0;}

/*───────────────────────────────────────────────────────────
	goods
───────────────────────────────────────────────────────────*/
    /* 리스트 */
        .sub_cate{display: flex; align-items: flex-start; justify-content: center; text-align: center; gap:20px; flex-wrap: wrap; padding:80px 0 0;}
        .sub_cate > li{position: relative;}
        .sub_cate .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .sub_cate .desc dt{font-size: 0; width: 90px; height: 90px; padding: 5px; border-radius: 100%; border:1px solid var(--transparent); box-sizing: border-box; transition: all 0.4s;}
            .sub_cate .desc dt + dd{margin-top: 8px;}
            .sub_cate > li.on .desc dt{border-color: var(--black-color01);}
        .sub_cate .desc dd{font-size: var(--title-15); font-weight: 400; color: var(--black-color01); line-height: 1.5;}

            /* over */
            @media screen and (min-width:1024px) {
                .sub_cate > li:hover .desc dt{border-color: var(--black-color01);}
            }

        #wrap .list_array{margin:0;}
        #wrap .list_array .sub_title{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px 30px;}
        #wrap .list_array .list_count{float: none; height: auto; line-height: 1.5; font-size: var(--title-14); font-weight: 400; color: var(--black-color06);}
        #wrap .list_array .list_count span{font-weight: 500; color: var(--black-color03); height: inherit; line-height: inherit; font-size: inherit;}

        .goods_list{display: flex; flex-wrap: wrap; gap:50px 20px;}
        .goods_list > li{position: relative; width: calc(100% / 4 - 15px); text-align: center; box-sizing: border-box;}
        .goods_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        /* .goods_list .thumb{position: relative;display: block;font-size: 0;width: 100%;padding-bottom: 129%;} */
            .goods_list .thumb + .desc{margin-top: 23px;}
        .goods_list .thumb img{/* position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; */image-rendering: -webkit-optimize-contrast; transform: translateZ(0);backface-visibility: hidden;}
        .goods_list .desc{font-size: var(--title-20); font-weight: 400; color: var(--black-color03);}
        .goods_list .desc dt{font-size: inherit;font-family: var(--font-type02);line-height: 1.4;font-weight: inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
            .goods_list .desc dt + dd{margin-top: 5px;}
        .goods_list .desc dd{font-size: 75%; line-height: 1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

        /* pagaing wrap */
            #wrap .paging {padding:80px 0 0;line-height:normal;font-size:0;margin:0;box-sizing:border-box;display: flex;align-items: center;justify-content: center;gap: 10px 25px;}
            #wrap .paging span {display:inline-flex;}
            #wrap .paging a {display:inline-flex;font-size:var(--title-14);font-weight: 400;color:var(--black-color09);padding:0;border: 0;box-sizing:border-box;height:auto;line-height: 1;min-width:auto;}
            #wrap .paging .on a{color:var(--black-color01); font-weight: inherit;}
            #wrap .paging a.on{color:var(--black-color01); font-weight: inherit;}
            #wrap .paging .arrow a {font-size:0;width:10px;height:10px;background: no-repeat center;}
            #wrap .paging :is(.arrow.first, .arrow.last) a{background-image: url('/data/skin/respon_default/images/sub/paging_first.svg');}
            #wrap .paging :is(.arrow.prev, .arrow.next) a{background-image: url('/data/skin/respon_default/images/sub/paging_prev.svg'); margin-right:15px;}
            #wrap .paging :is(.arrow.next, .arrow.last) {transform: scale(-1, -1);}
            #wrap .view_btn {position:relative; line-height:normal; min-height:80px;}
        
        @media screen and (max-width:1024px){
            .sub_cate{padding:70px 0 0; gap:15px; }

            #wrap .list_array .sub_title{padding: 70px 0 21px;}

            .goods_list{gap:50px 15px;}
            .goods_list > li{width: calc(100% / 4 - 11.25px);}
            .goods_list .thumb + .desc{margin-top: 18px;}

            #wrap .paging{padding: 70px 0 0;}
            #wrap .paging :is(.arrow.prev, .arrow.next) a{margin-right: 10px;}
        }
        @media screen and (max-width:860px){
            .sub_cate{padding:60px 0 0;}
            .sub_cate .desc dt{width: 80px; height: 80px;}

            #wrap .list_array .sub_title{padding: 65px 0 21px;}

            .goods_list > li{width: calc(100% / 3 - 10px);}

            #wrap .paging{padding: 60px 0 0;}
        }
        @media screen and (max-width:640px){
            .sub_cate{padding:50px 0 0;}
            .sub_cate{gap:10px;}
            .sub_cate .desc dt{width: 70px; height: 70px;}

            #wrap .list_array .sub_title{padding: 60px 0 16px;}

            .goods_list .thumb + .desc{margin-top: 15px;}
            .goods_list .desc dt + dd{margin-top: 3px;}

            #wrap .paging{padding: 50px 0 0;}
            #wrap .paging :is(.arrow.prev, .arrow.next) a{margin-right: 5px;}
        }
        @media screen and (max-width:479px){
            .sub_cate{padding:40px 0 0;}
            .sub_cate{gap:5px;}

            #wrap .list_array .sub_title{padding: 55px 0 16px;}

            .goods_list > li{width: calc(100% / 2 - 7.5px);}

            #wrap .paging{padding: 40px 0 0;}
        }
        @media screen and (max-width:360px){
            .sub_cate .desc dt{width: 60px; height: 60px;}
        }

    /* 뷰 */
        #wrap:has(.sub_view){padding-top: 0 !important;}
        #wrap:has(.sub_view) .header_wrap{position: relative;}
        #wrap:has(.sub_view) #header{box-shadow: none;}
        #wrap:has(.sub_view) .header_bnr.off{height: 30px;}
        #contents_wrap:has(.sub_view){max-width: 1840px;}
        #wrap .sub_view{padding:80px 0 0; display: flex; align-items: flex-start; flex-wrap: wrap;}
        #wrap .sub_view .detail_wrap{width: 67%;}
        #wrap .sub_view .thumb_list{display: flex; flex-wrap: wrap; gap:20px;}
        #wrap .sub_view .thumb_list > li{position: relative; width: calc(100% / 2 - 10px); box-sizing: border-box; font-size: 0;}
        #wrap .sub_view .exp_wrap{position: sticky;top: 60px;width: 33%;padding: 0 2.2vw 20px 5.2vw;box-sizing: border-box;max-height: calc(100vh - 60px);overflow-y: auto;}
        #wrap .sub_view .title_desc{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap:15px 30px; font-size: var(--title-20); }
        #wrap .sub_view .title_desc dt{font-size: 130%;font-weight: 400;color: var(--black-color03);font-family: var(--font-type02);line-height: 1.35;}
        #wrap .sub_view .title_desc dd{font-size: 80%;font-weight: 500;color: var(--black-color01);line-height: 1.2;}
        #wrap .sub_view .goods_cont{border-top: 1px solid var(--black-color01);margin-top: 25px;padding-top: 32px;box-sizing: border-box;}
        #wrap .sub_view .goods_info{font-size: var(--title-15); font-weight: 400; color: var(--black-color06); line-height: 1.8; letter-spacing: -0.03em;}
        #wrap .sub_view .goods_btn{display: flex;gap: 15px;margin-top: 49px;}
        #wrap .sub_view .goods_btn .btn{width: 100%;}
        #wrap .sub_view .goods_toggle{margin-top: 60px;}
        #wrap .sub_view .toggle_desc{border-top: 1px solid var(--border-color01); border-bottom: 1px solid var(--border-color01);}
        #wrap .sub_view .toggle_desc + .toggle_desc{margin-top: -1px;}
        #wrap .sub_view .toggle_desc dt{font-size:var(--title-15);font-weight: 600;color: var(--black-color00);padding: 19px 45px 18px 0;position: relative;cursor: pointer; line-height: 1.4;}
            #wrap .sub_view .toggle_desc dt:before{position: absolute;content:'';width: 5px;height: 5px;border:2px solid var(--transparent);border-right-color: var(--black-color01);border-bottom-color: var(--black-color01);top: calc(50% - 2px);right: 20px;transform: translateY(-50%) rotate(45deg);transition: all 0.4s;border-radius: 2px;}
                #wrap .sub_view .toggle_desc dt.on:before{transform: translateY(-50%) rotate(45deg) scale(-1, -1);top: calc(50% + 2px);}
        #wrap .sub_view .toggle_desc dd{font-size:var(--title-14);font-weight: 400;color: var(--black-color06);letter-spacing: -0.03em;padding: 3px 0 19px;display: none;line-height: 1.6;}
        #wrap .sub_view .toggle_desc dd > p{position: relative;padding-left: 9px;box-sizing: border-box;}
            #wrap .sub_view .toggle_desc dd > p:before{position: absolute;content:'';width: 3px;height: 3px;background: var(--black-color06);border-radius: 100%;top: 8px;left:0;}
            #wrap .sub_view .toggle_desc dd > p + p{margin-top: 8px;}

        @media screen and (max-width:1024px){
            #wrap .sub_view{padding:70px 0 0;}
            #wrap .sub_view .thumb_list{gap:15px;}
            #wrap .sub_view .thumb_list > li{width: calc(100% / 2 - 7.5px);}
            #wrap .sub_view .exp_wrap{padding:0 0 20px 30px;}
            #wrap .sub_view .goods_cont{margin-top:20px; padding-top: 27px;}
            #wrap .sub_view .goods_btn{margin-top: 40px;}
            #wrap .sub_view .goods_toggle{margin-top: 50px;}
            #wrap .sub_view .toggle_desc dt{padding:17px 40px 16px 0;}
                #wrap .sub_view .toggle_desc dt:before{right: 15px}
            #wrap .sub_view .toggle_desc dd{padding-bottom: 17px;}
        }
        @media screen and (max-width:860px){
            #wrap .sub_view{padding:60px 0 0;}
            #wrap .sub_view{flex-direction: column-reverse; gap: 40px;}
            #wrap .sub_view .detail_wrap{width: 100%;}
            #wrap .sub_view .exp_wrap{position: relative; top:0; width: 100%; padding:0; max-height: none; overflow: visible;}
        }
        @media screen and (max-width:640px){
            #wrap .sub_view{padding:50px 0 0;}
			#wrap .sub_view .thumb_list > li{width: calc(100% / 1 - 5px);}
            #wrap .sub_view .goods_cont{margin-top:15px; padding-top: 22px;}
            #wrap .sub_view .goods_btn{margin-top: 30px;}
            #wrap .sub_view .goods_toggle{margin-top: 40px;}
            #wrap .sub_view .toggle_desc dt{padding: 15px 40px 14px 0;}
            #wrap .sub_view .toggle_desc dd{padding-bottom: 15px;}
        }
        @media screen and (max-width:479px){
            #wrap .sub_view{padding:40px 0 0;}
            #wrap .sub_view .goods_cont{margin-top:15px; padding-top: 17px;}
            #wrap .sub_view .goods_info{line-height: 1.6;}
            #wrap .sub_view .goods_btn{margin-top: 25px;}
            #wrap .sub_view .goods_toggle{margin-top: 35px;}
            #wrap .sub_view .toggle_desc dt{padding: 14px 40px 13px 0;}
            #wrap .sub_view .toggle_desc dd{padding-bottom: 14px;}
            #wrap .sub_view .toggle_desc dd > p + p{margin-top: 6px;}
        }
        @media screen and (max-width:360px){
            #wrap .sub_view .thumb_list{gap:10px;}
        }

/*───────────────────────────────────────────────────────────
	board
───────────────────────────────────────────────────────────*/
    #wrap .bbs_view{padding:80px 0 0;}
    #wrap .bbs_view .title_desc{text-align: center; font-size: var(--title-20);}
    #wrap .bbs_view .title_desc dt{font-size: 150%; font-weight: 400; color: var(--black-color03); line-height: 1.35; font-family: var(--font-type02);}
    #wrap .bbs_view .title_desc dt + dd{margin-top:10px;}
    #wrap .bbs_view .title_desc dd{font-size: 80%; font-weight: 400; color: var(--black-color06); line-height: 1.4; letter-spacing: -0.02em;}
    #wrap .bbs_view .thumb_list{display: flex; flex-wrap: wrap; gap: 23px;}
    #wrap .bbs_view .thumb_list img{height: 100%; object-fit: cover;}
    #wrap .bbs_view .cont{padding: 47px 0 0;}

    @media screen and (max-width:1024px){
        #wrap .bbs_view{padding:70px 0 0;}
        #wrap .bbs_view .cont{padding:42px 0 0;}
    }
    @media screen and (max-width:860px){
        #wrap .bbs_view{padding:60px 0 0;}
        #wrap .bbs_view .cont{padding:37px 0 0;}
    }
    @media screen and (max-width:640px){
        #wrap .bbs_view{padding:50px 0 0;}
        #wrap .bbs_view .title_desc dt + dd{margin-top:7px;}
        #wrap .bbs_view .cont{padding:32px 0 0;}
    }
    @media screen and (max-width:479px){
        #wrap .bbs_view{padding:40px 0 0;}
        #wrap .bbs_view .cont{padding:27px 0 0;}
    }

/*───────────────────────────────────────────────────────────
	stores
───────────────────────────────────────────────────────────*/
    /* store_list */
        #contents_wrap:has(.sub_store_list){padding: 0}
        .sub_store_list .main_stores{padding:0;}
        .sub_store_list .main_stores .main_title{display: none;}
        .sub_store_list .main_stores .sub_title.hd{padding-top:0;}

/*───────────────────────────────────────────────────────────
	about
───────────────────────────────────────────────────────────*/
	/* .sub_about{margin-top:50px;} */
	.sub_about{width:100%;height:100vh;background:url('../images/sub/about_bg.jpg')no-repeat center;background-size:cover;display: flex;align-items:center;box-sizing:border-box;padding-bottom:60px;}
	.sub_about .img{width:100%;height:0;padding-bottom:500px;overflow:hidden;position: relative;}
	.sub_about .img img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);max-height:initial;}
	
	.sub_about .w_custom{display: flex;justify-content: flex-end;padding-top:135px;}
	.sub_about .txt_box{font-size:var(--title-20);width:65%;}
	.sub_about .txt_box p{font-size:79%;color:var(--point-white);font-weight:400;line-height:1.6;font-family:'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;}
	.sub_about .txt_box .logo{margin:28px 0}
	.sub_about .txt_box .logo img{height:55px;}
	.sub_about .txt_box p + p{margin-top:30px;}

	@media screen and (max-width:1500px){
		.sub_about .img{padding-bottom:36%;}
	}
	@media screen and (max-width:1200px){
		.sub_about{align-items: flex-end;background-position:left center;padding-bottom:50px;}
		.sub_about .w_custom{padding-top:0;}
		.sub_about .txt_box{width:100%;text-align: right;}
	}
	@media screen and (max-width:1024px){
		.sub_about .txt_box .logo{margin:15px 0;}
		.sub_about .txt_box .logo img{height:40px;}
	}
	@media screen and (max-width:860px){
		.sub_about .txt_box p + p{margin-top:15px;}
	}
	@media screen and (max-width:479px){
		.sub_about{height:auto;padding:150px 0 100px;background-position:right center;}
		
		.sub_about .img{padding-bottom:60%;}
		.sub_about .img img{width:auto;height:100%;max-width:initial;}
		
		.sub_about .txt_box{text-align:left;}
		.sub_about .txt_box p br{display: none;}
	}
	
/*───────────────────────────────────────────────────────────
	faq
───────────────────────────────────────────────────────────*/
	.board_tab{width:100%;display: flex;align-items: center;justify-content: center;gap:40px;margin-bottom:30px;}
	.board_tab li.on a{color:var(--black-color00);font-weight:700;}

	@media screen and (max-width:479px){
		.board_tab{gap:30px;margin-bottom:20px;}
	}
	
/*───────────────────────────────────────────────────────────

	제품 검색 페이지

───────────────────────────────────────────────────────────*/
	.goods_search .sub_title{text-align: center;}
    #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;margin-top:30px;}
    #wrap .sub_list .list_search > div { float: unset; }
	#wrap .list_search .search_wrap { display: flex; justify-content:center; 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:500px; }
	#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; background-color:transparent !important;}

    
    #wrap .sub_list .list_search 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 .list_search select { width: 100%; height: 56px; padding-left: 24px; padding-right: 45px; background: var(--gray-bg04) url('../images/skin/select_arw.png') no-repeat calc(100% - 20px) 50%; 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); }
		#wrap .list_search .inp_custom{max-width:300px;}
    }

    @media (max-width: 860px){
		#wrap .goods_search .search_wrap input[type="checkbox"]+ label{padding:0;}
    }

    @media (max-width: 640px){
		.goods_search .sub_title{padding-top:40px;}
	
		#wrap .list_search .search_wrap{justify-content: flex-end;}
        #wrap .list_search .search_wrap > span { width: 100%; justify-content: flex-end; }
        #wrap .sub_list .list_search select { height: 44px; padding-left: 15px; padding-right: 40px; background-position:center right 15px; }
        #wrap .sub_list .list_search 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){
        
    }