@charset "utf-8";

/**************************
  Main Page
**************************/

/* Main - section_swiper */
#contIdx .section_swiper {position: relative;display:flex; width:100%; height:630px; overflow: hidden;}
#contIdx .section_swiper .slide {background: url(/img/shop_main_noimg.jpg) center center no-repeat; background-size: cover; width: 100%;}
#contIdx .section_swiper .slide_text_warp {display: flex; justify-content: center; align-items: center; height:100%; width:100%;}
#contIdx .section_swiper .slide_text_warp span {font-family: 'NanumSquareRound'; letter-spacing: -0.02em; -webkit-text-stroke: 1px #fff; text-shadow:0 0 6px rgba(0,0,0,0.25);}
#contIdx .section_swiper .swiper-button-next, 
#contIdx .section_swiper .swiper-button-prev {top:50%; transform: translateY(-50%);}
#contIdx .section_swiper .swiper-button-next {right:calc((100% - 1280px) / 2 - 20px); border:0; margin:0; width: 20px; height: 50px; background:url(/img/arrow_next.png) center no-repeat; background-size: cover;}
#contIdx .section_swiper .swiper-button-prev {left:calc((100% - 1280px) / 2 - 20px); border:0; margin:0; width: 20px; height: 50px; background:url(/img/arrow_prev.png) center no-repeat; background-size: cover;}

/* Main - section_gallery */
#contIdx .section_gallery .gall_wrap {display:flex; justify-content: space-between; gap:10px;}
#contIdx .section_gallery .gall_wrap .col_4 {width:calc(100% - 20px / 3)}
#contIdx .section_gallery .gall_wrap .col_2_wrap {display:flex; justify-content: space-between; flex-wrap: wrap; gap:10px;}
#contIdx .section_gallery .gall_wrap .col_2_wrap .col_2 {width:calc(50% - 5px)}
#contIdx .section_gallery .gall_wrap a {position:relative; display: block; width:100%;height: 100%; overflow:hidden; background-color: #000;}
#contIdx .section_gallery .gall_wrap img {width:100%;height: 100%;object-fit: cover; object-position: center}
#contIdx .section_gallery .gall_wrap span {position:absolute; lefT:0; right:0; top:0; display: flex; justify-content: center; align-items: center; width:100%; height:100%;  text-shadow: 0 0 6px rgba(0,0,0,0.25); }
#contIdx .section_gallery .gall_wrap a:hover img {transform:scale(120%); opacity:0.7; transition: all 0.5s;}
#contIdx .section_gallery#sec3 {background-color: #f2f2f2;}

/* Main - section_products */
#contIdx .section_products .prdct_wrap {display:flex; justify-content: space-between; gap:70px  20px; flex-wrap: wrap;}
#contIdx .section_products .prdct_wrap .col_3 {width:calc((100% - 60px) / 4)}
#contIdx .section_products .prdct_wrap .col_3 a {position:relative; display: block; width:100%;height: 100%; }
#contIdx .section_products .prdct_wrap .col_3 a .img {width:100%; aspect-ratio: 1 / 1; overflow:hidden;}
#contIdx .section_products .prdct_wrap .col_3 a .img img {width:100%; height:100%; object-fit: cover; object-position: center;}
#contIdx .section_products .prdct_wrap .col_3 a p {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#contIdx .section_products .prdct_wrap .col_3 a:hover img {transform:scale(120%); transition: all 0.5s;}

@media screen and (max-width:1280px) {
  #contIdx .section_swiper .swiper-button-next {right: 20px;}
  #contIdx .section_swiper .swiper-button-prev {left: 20px;}
  #contIdx .section_swiper .slide {display: flex; align-items: center; padding-top:0 !important;}
}

@media screen and (max-width:767px) {
  #contIdx .section_swiper {height:480px;}
  #contIdx .section_gallery .gall_wrap {flex-flow: column;}
  #contIdx .section_gallery .gall_wrap .col_4 {width:100%;}
  #contIdx .section_products .prdct_wrap .col_3 {width:calc(50% - 10px)}
}

/**************************
  Sub Page
**************************/

/* sub common */
.sub_page img {max-width: 100%;}
.subTop_bnr {height:200px; background-size: cover; background-position: center;
background-attachment: fixed;}
.subTop_bnr_01 {background-image:url('/img/subTop_bnr_01.png')}
.sub_page #secBrdcrmb a:not(:last-child):after {content:">"; display: inline-block; padding:0 10px; font-family: cursive;}
.sub_page #secBrdcrmb .xi-home-o {margin-top:-2px; vertical-align: middle;}
.xi-home-o {padding-bottom: 3px;}


/* sub - company */
#contCompany #secMap h3 {position:relative; margin-bottom:20px; z-index:1;}
#contCompany #secMap h3 span {padding-left:10px; padding-right:20px;background:#fff; border-left:7px solid #111;}
#contCompany #secMap h3:before {content:""; position:absolute; top:50%; display:block; width:100%; height:1px; background-color:#ddd; z-index: -1; }
#contCompany #secMap .addr_copy { -webkit-appearance: none;-moz-appearance: none; appearance: none; padding:0 10px; background-color:#111; color:#fff;  border:none; }

/* sub - products_list */
#contProductsList #secListTop .list_info {display: flex; justify-content: space-between;}
#contProductsList #secListTop .list_info .sort {display: flex; align-items: center;}
#contProductsList #secListTop .list_info .sort li:not(:last-of-type):after {content:"ㅣ"; color:#ddd; padding:0 5px; }
#contProductsList #secListTop .list_info .sort button {color:#666; background-color: transparent;}
#contProductsList #secListTop .list_info .sort select {-webkit-appearance: none;-moz-appearance: none; appearance: none; width:100px; padding:3px; border-color:#ddd;background: url(/img/arrow_down.png) 95% center no-repeat; background-size: auto 50%;}
#contProductsList #secList {display:flex; justify-content: space-between; gap:70px  20px; flex-wrap: wrap;}
#contProductsList #secList .col_3 {width:calc((100% - 60px) / 4)}
#contProductsList #secList .col_3 a {position:relative; display: block; width:100%;height: 100%; }
#contProductsList #secList .col_3 a .img {width:100%; aspect-ratio: 1 / 1; overflow:hidden;}
#contProductsList #secList .col_3 a .img img {width:100%; height:100%; object-fit: contain; object-position: center;}
#contProductsList #secList .col_3 a p {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#contProductsList #secList .col_3 a:hover img {transform:scale(120%); transition: all 0.5s;}


/* sub - products_view */
#contProductsView #secInfo {display: flex; justify-content: space-between; gap:40px; flex-wrap: nowrap; align-items: flex-start;}
#contProductsView #secInfo .swiper_wrap {position:relative; width:600px;}
#contProductsView #secInfo .swiper {overflow:hidden}
#contProductsView #secInfo .swiper img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
#contProductsView #secInfo #mainSwiper {position:relative; width:100%; aspect-ratio: 1 / 1;margin-bottom:10px; }
#contProductsView #secInfo #mainSwiper .swiper-button-next, 
#contProductsView #secInfo #mainSwiper .swiper-button-prev {top:50%; transform: translateY(-50%);}
#contProductsView #secInfo #mainSwiper .swiper-button-next {right:10px; border:0; margin:0; width: 20px; height: 50px; background:url(/img/arrow_next.png) center no-repeat; background-size: cover;}
#contProductsView #secInfo #mainSwiper .swiper-button-prev {left:10px; border:0; margin:0; width: 20px; height: 50px; background:url(/img/arrow_prev.png) center no-repeat; background-size: cover;}
#contProductsView #secInfo #thumbSwiper .swiper-slide {background:#000;}
#contProductsView #secInfo #thumbSwiper .swiper-slide img {opacity: 0.2;}
#contProductsView #secInfo #thumbSwiper .swiper-slide-thumb-active img {opacity: 1;}
#contProductsView #secInfo .options {display: flex; flex-flow: column; gap:14px;}
#contProductsView #secInfo .options dl {display: flex;justify-content: space-between; align-items: center;}
#contProductsView #secInfo .options dl:not(:last-of-type) {padding-bottom:14px; border-bottom:1px solid #ddd; }
#contProductsView #secInfo .options dt {width:9em;}
#contProductsView #secInfo .options dd {width: calc(100% - 9em);}
#contProductsView #secInfo .options .opt_amount dd {display: flex;justify-content: space-between;}
#contProductsView #secInfo .options .opt_amount .control {display: flex; align-items: center;}
#contProductsView #secInfo .options .opt_amount .control { border:1px solid #ddd;}
#contProductsView #secInfo .options .opt_amount .control button {padding:0 12px ; background-color: #fff;}
#contProductsView #secInfo .options .opt_amount .control span {padding:7px 20px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
#contProductsView #secInfo .options .opt_amount .sms button {padding:9px 14px; border:1px solid #ddd; background-color: #fff;}
#contProductsView #secInfo .options .opt_selct select {-webkit-appearance: none;-moz-appearance: none; appearance: none;width:100%; padding:10px; border:1px solid #ddd;    background: url(/img/arrow_down.png) 95% center no-repeat;} 
#contProductsView #secInfo .total {display: flex; justify-content: space-between; border-top:1px solid #111}
#contProductsView #secInfo .btns {display: flex; justify-content: space-between; gap:14px;}
#contProductsView #secInfo .btns button {width:100%; padding:10px 0; }
#contProductsView #secInfo .btns button.btn_wht {border:1px solid #111; color:#111; background:#fff;}
#contProductsView #secInfo .btns button.btn_blk {border:1px solid #111; color:#fff; background:#111;}

/* sub - cart */
#contCart #secTable .info {width:calc(100% - 360px - 180px - 180px);padding-right:20px;}
#contCart #secTable .amount {width:360px;padding-right:20px;}
#contCart #secTable .price {width:180px;padding-right:20px;}
#contCart #secTable .ship {width:180px;}
#contCart #secTable .tb_header {display: flex; border-top: 1px solid #111; border-bottom: 1px solid #111;}
#contCart #secTable .tb_items li {display: flex; width: 100%; gap:20px; border-bottom:1px solid #ddd;}
#contCart #secTable .tb_items li:last-child {border-bottom:1px solid #111;}
#contCart #secTable .tb_items li .info {display: flex; align-items:center; gap:10px; border-right: 1px solid #ddd;}
#contCart #secTable .tb_items li .info .chk_wrap input[type="checkbox"] {-webkit-appearance: none;-moz-appearance: none; appearance: none; position: absolute; left: 0; opacity: 0;}
#contCart #secTable .tb_items li .info .chk_wrap input[type="checkbox"] + label {
  display: block; padding: 5px 7px; color:#888; border:1px solid #ddd; }
#contCart #secTable .tb_items li .info .chk_wrap input[type="checkbox"]:checked + label {color:#fff; background:#03c75a;} 
#contCart #secTable .tb_items li .info .info_inner {display: flex; gap:10px;}
#contCart #secTable .tb_items li .info .info_inner .thumb {width:100px; height:100px; flex:none}
#contCart #secTable .tb_items li .info .info_inner .thumb img {width:100%; height: 100%; object-fit: cover; object-position: center;}
#contCart #secTable .tb_items li .amount { font-size: smaller; border-right: 1px solid #ddd;}
#contCart #secTable .tb_items li .amount .gift {border-top:1px solid #ddd;}
#contCart #secTable .tb_items li .amount .btn_edit {padding:5px 10px; background-color: #fff; border:1px solid #ddd;}
#contCart #secTable .tb_items li .price {display: flex; justify-content: center; align-items:center; border-right:1px solid #ddd;}
#contCart #secTable .tb_items li .ship {display: flex; justify-content: center; align-items:center;}
#contCart #secTable .tb_items li .ship .btn_tooltip {position:relative;background:#fff;}
#contCart #secTable .tb_items li .ship .btn_tooltip:after{display:none; content:attr(data-tooltip);position:absolute;right:0;bottom: 0;width: 180px;padding:10px;border-radius: 5px;border:1px solid #ddd;background: #f2f2f2;text-align: left;font-size: 12px; line-height: 1.6;transform: translateY(100%);}
#contCart #secTable .tb_items li .ship .btn_tooltip:hover:after,
#contCart #secTable .tb_items li .ship .btn_tooltip.show:after {display: block;}
#contCart #secTable .tb_footer {display: flex; justify-content: center; gap:60px; align-items: center;}
#contCart #secTable .tb_footer {display: flex; justify-content: center; gap:60px; align-items: center;}
#contCart #secTable .tb_footer .price_detail {display: flex; padding-left:60px; padding-right:60px; gap:20px; align-items: center; border-right:1px solid #ddd;}
#contCart #secTable .tb_footer .price_detail dt {font-size:smaller}
#contCart #secTable .tb_footer .price_detail i[class^=xi-] {color:#ccc;}
#contCart #secTable .tb_footer .price_sum dl {display: flex; gap:10px}
#contCart #secTable .tb_footer .price_sum dd {color:#03c75a}
#contCart #secTable .tb_footer .btn_order {padding:15px 40px; color:#fff; text-shadow:0 0 5px rgba(0,0,0,.15); background:#03c75a; border-radius: 5px;;}
#contCart #secTable .tb_footer .btn_order:hover {background-color: #111;}

/* sub - search */
#contSearch #secSchbox .sch_bar {display:flex; justify-content:space-between; width:340px; margin:0 auto; padding:10px 20px; border:2px solid #000; border-radius: 100px;}
#contSearch #secSchbox .sch_bar input {-webkit-appearance: none;-moz-appearance: none; appearance: none; width:100%; border:none; background:none; box-shadow: none;}
#contSearch #secSchbox .sch_bar input:focus {outline: transparent;}
#contSearch #secSchbox .sch_bar button {background-color: transparent;}
#contSearch #secResult {border-top:1px solid #ddd}
#contSearch #secListTop .list_info {display: flex; justify-content: space-between;}
#contSearch #secListTop .list_info .sort {display: flex; align-items: center;}
#contSearch #secListTop .list_info .sort li:not(:last-of-type):after {content:"ㅣ"; color:#ddd; padding:0 5px; }
#contSearch #secListTop .list_info .sort button {color:#666; background-color: transparent;}
#contSearch #secListTop .list_info .sort select {-webkit-appearance: none;-moz-appearance: none; appearance: none; width:100px; padding:3px; border-color:#ddd;background: url(/img/arrow_down.png) 95% center no-repeat; background-size: auto 50%;}
#contSearch #secList {display:flex; justify-content: space-between; gap:70px  20px; flex-wrap: wrap;}
#contSearch #secList .col_3 {width:calc((100% - 60px) / 4)}
#contSearch #secList .col_3 a {position:relative; display: block; width:100%;height: 100%; }
#contSearch #secList .col_3 a .img {width:100%; aspect-ratio: 1 / 1; overflow:hidden;}
#contSearch #secList .col_3 a .img img {width:100%; height:100%; object-fit: cover; object-position: center;}
#contSearch #secList .col_3 a p {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#contSearch #secList .col_3 a:hover img {transform:scale(120%); transition: all 0.5s;}


@media screen and (max-width:1280px) {
  /* sub - products_view */
  #contProductsView #secInfo .swiper_wrap {width:45%;}
  /* sub - cart */
  #contCart #secTable .info {width:45%;}
  #contCart #secTable .amount {width:25%;}
  #contCart #secTable .price {width:15%;}
  #contCart #secTable .ship {width:15%;}
  #contCart #secTable .tb_footer {gap:30px}
  #contCart #secTable .tb_footer .price_detail {padding-left:30px; padding-right:30px;}
}

@media screen and (max-width:1050px) {
  /* sub - products_view */
  #contProductsView #secInfo .options .opt_amount dd {flex-flow: column; align-items: flex-end; gap:10px;}
  /* sub - cart */
  #contCart #secTable .tb_footer {flex-wrap:wrap;gap:15px}
  #contCart #secTable .tb_footer .price_detail {width:100%; justify-content:center;padding-left:15px; padding-right:15px; padding-bottom:20px; border:none; border-bottom:1px solid #ddd;}
}

@media screen and (max-width:767px) {
  /* sub common */
  .subTop_bnr {background-attachment:unset;}
  /* sub - products_list */
  #contProductsList #secListTop .list_info {flex-flow: column; gap:10px;}
  #contProductsList #secList .col_3 {width:calc(50% - 10px)}
  /* sub - products_view */
  #contProductsView #secInfo {flex-flow: column;}
  #contProductsView #secInfo .swiper_wrap {width:100%;}
  /* sub - cart */
  #contCart #secTable {border-top:1px solid #111;}
  #contCart #secTable .tb_header {display: none;}
  #contCart #secTable .tb_items li {flex-flow: column; gap:10px}
  #contCart #secTable .info,
  #contCart #secTable .amount,
  #contCart #secTable .price,
  #contCart #secTable .ship {width:100%; padding:0;}
  #contCart #secTable .tb_items li .info { border-right: 0;}
  #contCart #secTable .tb_items li .amount { padding:20px; border-right: 0; background-color: #f2f2f2;}
  #contCart #secTable .tb_items li .price {display: flex; justify-content: space-between;border-right: 0;}
  #contCart #secTable .tb_items li .price:before {content:"주문금액"}
  #contCart #secTable .tb_items li .ship dl {display: flex; justify-content: space-between; width:100%}
  #contCart #secTable .tb_footer {justify-content: space-between;}
  #contCart #secTable .tb_footer .price_detail {flex-flow: column; gap:10px; padding:0 0 20px 0}
  #contCart #secTable .tb_footer .price_detail i[class^=xi-]{display: none;}
  #contCart #secTable .tb_footer .price_detail dl {display: flex; justify-content: space-between; width:100%;}#contCart #secTable .tb_footer .price_sum dl {flex-flow: column; text-align: left; gap:5px;}
  /* sub - search */
  #contSearch #secSchbox .sch_bar {width:100%;}
  #contSearch #secListTop .list_info {flex-flow: column; gap:10px;}
  #contSearch #secList .col_3 {width:calc(50% - 10px)}
}