@font-face {
  font-family: "Pretendard Variable";
  src: url('/resource/customFonts/PretendardVariable.woff2') format('woff2');
}
*{margin: 0; padding: 0; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color: #111;}
li{list-style: none;}
a{text-decoration: none !important; color: #111 !important;}
img{max-width: 100%;}

.dim{width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; background-color: #000; opacity: 0.3; display: none; z-index: 11;}
.dim.active{display: block;}
.scroll_none{overflow: hidden;}
@media (min-width: 1024px){
  .pc{display: flex;}
  .mob{display: none;}
}
@media (max-width: 1024px){
  .pc{display: none;}
  .mob{display: flex;}
}


.b_left_8, .b_left_16, .b_right_8, .b_right_16, .b_bottom_8, .b_bottom_16, .b_top_8, .b_top_16{position: relative;}
.b_left_8::after, .b_left_16::after, .b_right_8::after, .b_right_16::after, .b_bottom_8::after, .b_bottom_16::after, .b_top_8::after, .b_top_16::after{content: ''; display: block; background-color: #111; position: absolute;}
.b_left_8::after{left: 0; width: 1px; height: calc(100% - 16px); top: 8px;}
.b_left_16::after{left: 0; width: 1px; height: calc(100% - 32px); top: 16px;}
.b_right_8::after{right: 0; width: 1px; height: calc(100% - 16px); top: 8px;}
.b_right_16::after{right: 0; width: 1px; height: calc(100% - 32px); top: 16px;}
.b_top_8::after{left: 8px; width: calc(100% - 16px); height: 1px; top: 0;}
.b_top_16::after{left: 16px; width: calc(100% - 32px); height: 1px; top: 0;}
.b_bottom_8::after{left: 8px; width: calc(100% - 16px); height: 1px; bottom: 0;}
.b_bottom_16::after{left: 16px; width: calc(100% - 32px); height: 1px; bottom: 0;}

.wrap{border: 3px solid #000; position: relative; box-sizing: border-box; padding: 0; min-height: 110vh;}
.col_50{width: 50%;}
.flex_50{display: flex;}



.list_head{display: flex; justify-content: space-between; align-items: center; padding: 42px 40px 26px 32px; font-weight: bold;}
.list_head.b_bottom_8::after, .list_head.b_bottom_16::after{bottom: -1px; z-index: 3;}

.list_title{position: relative; display: flex; align-items: center; font-size: 24px;}
.list_title::before{content: ''; display: block; margin-right: 12px; width: 20px; height: 26px; background-image: url(../img/icon_list_title.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
.view_all{display: flex; align-items: center; font-size: 12px;}
.view_all::after{content: ''; display: block; width: 40px; height: 1px; background-color: #111; margin-left: 12px;}


/* Product list */
.prd_list_grid{display: grid; grid-gap: 1px; grid-template-columns: repeat(6,minmax(0,1fr)); overflow: hidden;}
.prd_el{box-sizing: border-box; position: relative;}
.prd_el::before, .prd_el::after{content: ''; display: block; position: absolute; background-color: #e4e4e4; width: 1px; height: calc(100% - 16px); top: 8px;}
.prd_el::before{ left: 0px; transform: translateX(-1px);}
.prd_el::after{ right: 0px; transform: translateX(1px);}

.prd_img{padding: 8px; box-sizing: border-box;}
.prd_img::after{content: ''; display: block; width: calc(100% - 16px); position: absolute; top: -1px; left: 8px; background-color: #e4e4e4; height: 1px;}
.prd_img::before{content: ''; display: block; width: 100%; padding-bottom: 100%; background-color: #D8D8D8; z-index: -1;}

.prd_el:hover{z-index: 1;}
.prd_el:hover:before, .prd_el:hover:after, .prd_el:hover .prd_img::after, .prd_el:hover .prd_info{background-color: #111; transition: background-color 0.3s ease;}
.prd_el:hover:before, .prd_el:hover:after{height: calc(100% - 8px);}
.prd_el:hover .prd_info *{ color: #fff;}

.prd_info{width: 100%; box-sizing: border-box; padding: 12px; position: relative;}
.prd_info::before{content: '';display: block;background-color: #e4e4e4; position: absolute; left: 8px; width: calc(100% - 16px); height: 1px; top: 0;}
.prd_info::after{content: '';display: block;background-color: #e4e4e4; position: absolute; left: 8px; width: calc(100% - 16px); height: 1px; bottom: -1px;}
.prd_el_a:hover .prd_info::before{background-color: #111; z-index: 1;}
.prd_name{width: 75%; font-size: 14px; line-height: 1.35; height: 36px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box;}
.prd_price{display: block; text-align: right; font-size: 14px; font-weight: bold;}
.prd_price::after{content: '¥'; font-size: 12px;}

.prd_list_grid.grid_col_6{grid-template-columns: repeat(6,minmax(0,1fr));}
.prd_list_grid.grid_col_5{grid-template-columns: repeat(5,minmax(0,1fr));}
.prd_list_grid.grid_col_4{grid-template-columns: repeat(4,minmax(0,1fr));}
.prd_list_grid.grid_col_3{grid-template-columns: repeat(3,minmax(0,1fr));}
.prd_list_wide.col_50 .prd_el:nth-child(-n+3) .prd_img::after{background-color: unset;}

.bookmark{position: absolute; right: 12px; top: 16px; width: 26px; height: 26px; cursor: pointer;}
.bookmark_img1, .bookmark_img2{width: 100%; height: 100%; object-fit: contain;}
.bookmark .bookmark_img1, .bookmark.marked .bookmark_img2{display: block;}
.bookmark.marked .bookmark_img1, .bookmark .bookmark_img2{display: none;}
/*{width: 100%; height: 100%;}*/
.img_banner_50 .img_banner_50_img{width: calc(100% - 48px); max-height: calc(100% - 48px); object-fit: cover; position: absolute;}
.img_banner_50 .img_banner_50_h1{font-size: 36px; font-weight: 200; color: #fff; position: absolute; left: 54px; top: 54px;}

.contact_banner{padding: 60px 32px 40px; margin-bottom: 40px; display: flex; align-items: center; justify-content: space-between;}
.contact_banner .see_more{font-size: 48px; font-weight: 500; position: relative; display: flex; align-items: center;}
.contact_banner .see_more .arrow_box{margin-left: 24px;}
.contact_banner .cb_span{font-size:16px; font-weight: bold;}

.fst_sec{overflow: hidden; transition: ease 0.5s all;}
.fst_sec.show{overflow: unset;}
.arrow_box{position: relative;}
.arrow_1, .arrow_2{width: 100%; height: 100%; position: absolute; display: block; background-image: url(../img/arrow_diagonal.png); background-size: contain; transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); margin: 0 !important; padding: 0 !important; background-repeat: no-repeat;}
.arrow_1{transition-delay: 0.1s;}
.arrow_2{transform: translate(-60%, -60%); opacity: 0; }
.see_more:hover .arrow_1{transform: translate(60%, 60%);opacity: 0;transition-delay: 0s;}
.see_more:hover .arrow_2{transform: translate(0, 0); opacity: 1; transition-delay: 0.1s;}

.contact_banner .arrow_box{width: 36px; height: 32px;}

@media (max-width: 1024px){
  #wrap{border: 0; overflow-x: hidden; padding-top: 120px;}
  .col_50{width: 100%;}
  .prd_list_grid{grid-template-columns: repeat(2,minmax(0,1fr))}

  .list_head{padding: 18px 8px 12px;}
  .list_title{font-size: 13px;}
  .list_title::before{width:12px; height: 16px; margin-right: 6px;}
  .view_all{font-size: 8px;}
  .view_all::after{margin-left: 8px;}
  .flex_50{flex-direction: column;}
  .prd_list_wide.col_50 .prd_list_grid{grid-template-columns: repeat(2,minmax(0,1fr))}
  .img_banner_50 .img_banner_50_img{position: relative; width: 100%; height: unset;}
  .img_banner_50 .img_banner_50_h1{top:36px; left: 28px; font-size: 20px;}
  .col_50.b_right_16::after{content: none;}

  .contact_banner{flex-direction: column; justify-content: unset; padding: 32px 0; margin-bottom: 20px;}
  .contact_banner > .cb_span:last-child{display: none;}
  .contact_banner > .cb_span{font-size: 12px; margin-bottom: 12px; display: block;}
  .contact_banner .see_more{font-size: 20px;}
  .contact_banner .see_more .arrow_box{margin-left: 10px; width: 15px; height: 15px;}

  .prd_list_grid.grid_col_6{grid-template-columns: repeat(2,minmax(0,1fr));}
  .prd_list_grid.grid_col_5{grid-template-columns: repeat(2,minmax(0,1fr));}
  .prd_list_grid.grid_col_4{grid-template-columns: repeat(2,minmax(0,1fr));}
  .prd_list_grid.grid_col_3{grid-template-columns: repeat(2,minmax(0,1fr));}

  .bookmark{width: 20px; height: 20px; top: 12px;}
}

.fws{width: 100%; position: relative;   height: 40px;}
.fws_ul{height: 40px; border: 1px solid #111; box-sizing: border-box; position: absolute; width: 100%; background-color: #fff; overflow: hidden;}
.fws_ul.open{height: unset; z-index: 1;}
.fws_ul::after{content: ''; display: block; position: absolute; right: 20px; top: 15px; background-image: url(../img/arrow_down.png); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 10px; height: 10px; transform: rotate(00deg); transition: ease 0.3s transform;}
.fws_ul.open::after{transform: rotate(180deg);}
.fws_li{padding:10px 16px 10px; height: 40px; width: 100%; box-sizing: border-box; background-color: #fff; transition: ease 0.2s background-color; cursor: pointer;}
.fws_li:hover{background-color: #f5f5f5;}

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

/* input form start */
.f_wrap{font-weight: 400;}
.f_name{font-size: 14px; display: block; margin-bottom: 8px;}
.f_input_text{padding: 10px 16px 9px; font-size: 16px; border: 1px solid #c7c7c7; border-radius: 0; outline: none; box-sizing: border-box}

/* input form end */