@charset "utf-8";

/********************************************************

// * 본 스킨은 Ninny Design에서 제작되었습니다.
// * 이 파일은 저작권법의 보호를 받습니다.
// * 무단 복제, 배포, 수정, 재판매를 금지합니다.
// * 위반 시 민·형사상 법적 책임을 질 수 있습니다.
// * © 2026 Ninny Design. All rights reserved.

// * Developed by Ninny Design.
// * This file is protected by copyright law.
// * Unauthorized copying, distribution, modification, or resale is strictly prohibited.
// * Violators may be subject to civil and criminal penalties.
// * © 2026 Ninny Design. All rights reserved.

********************************************************/

/* 게시판 목록 */
#bo-list .gallery-wrap { --columns-cnt:4; }
#bo-list .gallery-wrap ul { display:grid; grid-template-columns: repeat(var(--columns-cnt), 1fr); gap:clamp(40px, 4vw, 70px) clamp(15px, 2vw, 30px); }
#bo-list .gallery-wrap a { display:block; }
#bo-list .gallery-image { position: relative; background:#f8f8f8; border-radius: 20px; padding:clamp(10px, 2vw, 20px); overflow: hidden; }
#bo-list .gallery-image .image { padding-bottom:100%; border-radius: clamp(12px, 2vw, 20px); overflow:hidden; }
#bo-list .gallery-image .image img { object-fit: contain; }
#bo-list .gallery-image .opt { position: absolute; left:10px; top:10px; display: flex; align-items: center; z-index:9; }
#bo-list .gallery-image .bo-notice { font-size:.625rem; font-weight: 800; background: var(--main-color1); color:#fff; border-radius: 2px; padding:2px 5px; }

#bo-list .gallery-cont { margin-top:20px; }
#bo-list .gallery-info { color:#777; font-size: .875rem; }
#bo-list .gallery-info span:nth-child(2) { position: relative; padding-left:10px; margin-left:10px; }
#bo-list .gallery-info span:nth-child(2):before { content: ""; position: absolute; left:0; top:50%; transform: translateY(-50%); width:1px; height:10px; background:#ddd; }
#bo-list .gallery-subject { font-size:1.25rem; }
#bo-list .gallery-price { margin-top:5px; font-weight: 800; }


@media (max-width: 1024px) {
    #bo-list .gallery-wrap { --columns-cnt:2; }
}



/* 게시판 읽기 */
#bo-v #bo-v-info { display: grid; grid-template-columns: 40% 1fr; gap:0 clamp(50px, 8vw, 120px); align-items:flex-start; }
#bo-v #bo-v-info .bo-v-images { grid-row: 1/3; }

#bo-v #bo-v-info .swiper-slide { padding:var(--slide-padding); }
#bo-v #bo-v-info .swiper-slide .image { padding-bottom: 100%; }
#bo-v #bo-v-info .swiper-slide .image img { object-fit: contain; }
#bo-v #bo-v-info .swiper-slide .no-image { left:50%; top:50%; width:calc(100% + var(--slide-padding)*2); height:calc(100% + var(--slide-padding)*2); transform: translate(-50%, -50%); }

#bo-v #bo-v-info .swiper-bic { border-radius: clamp(30px, 4.5vw, 50px); border: 1px solid #ddd; overflow:hidden; }
#bo-v #bo-v-info .swiper-bic .swiper-slide { --slide-padding:clamp(20px, 3vw, 40px); }

#bo-v #bo-v-info .swiper-thumbs { margin-top:5px; }
#bo-v #bo-v-info .swiper-thumbs .swiper-slide { border-radius: 10px; border: 1px solid #ddd; cursor: pointer; --slide-padding:clamp(5px, .7vw, 10px); }
#bo-v #bo-v-info .swiper-thumbs .swiper-slide-thumb-active { border-color:#111; }

#bo-v #bo-v-info h2 { display: grid; gap:clamp(5px, 1.2vw, 10px) 0; }
#bo-v #bo-v-info h2 .bo-v-cate { color:var(--main-color1); font-size:clamp(1rem, 1.3vw, 1.375rem); font-weight: 800; }
#bo-v #bo-v-info h2 .bo-v-subject { font-size:clamp(1.375rem, 2.6vw, 2.5rem); line-height:1.2; }

#bo-v #bo-v-info .bo-v-eng { color:#999; margin-top:5px; font-size:.875rem; }
#bo-v #bo-v-info .bo-v-desc { font-size:clamp(1rem, 1vw, 1.125rem); margin-top:clamp(10px, 2vw, 25px); padding:clamp(10px, 1.2vw, 15px) 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }

#bo-v #bo-v-info dl { margin-top:clamp(20px, 3vw, 40px); display: grid; grid-template-columns: clamp(80px, 7vw, 120px) 1fr; gap:clamp(10px, 1.2vw, 15px) clamp(10px, 2vw, 20px); align-items: center; }
#bo-v #bo-v-info dt { color:#666; }

#bo-v #bo-v-info .sale-btn-wrap { margin-top:clamp(20px, 3vw, 40px); }
#bo-v #bo-v-info .sale-btn-wrap a { display: inline-block; border-radius: 5px; text-align: center; background:#111; color:#fff; font-size:1.125rem; padding:15px 100px; }

#bo-v #bo-v-info .bo-v-btns { border-bottom:none; border-top:1px solid #ddd; }

#bo-v #bo-v-con { margin-top:clamp(55px, 8vw, 100px); }
#bo-v #bo-v-con .con-title { border-bottom:1px solid #ddd; text-align: center; margin-bottom:clamp(30px, 5vw, 60px); }
#bo-v #bo-v-con .con-title span { border-bottom:2px solid #111; margin-bottom:-1px; font-size:1.125rem; display: inline-block; }

#bo-v #bo-v-con .con-detail { text-align: center; }



/* 상세페이지 */
.prd-detail { text-align: left; display: grid; grid-template-columns: 50% 1fr; gap:0 100px; max-width:1000px; align-items: center; margin:0 auto; }
.prd-detail .prd-title .desc { font-size:clamp(1.25rem, 1.5vw, 1.625rem); }
.prd-detail .prd-title h3 { font-size:clamp(1.875rem, 2.5vw, 3rem); }
.prd-detail .prd-title .en { color:var(--main-color1); }
.prd-detail .prd-title p { margin-top:clamp(15px, 2vw, 20px); line-height:1.7; font-size:clamp(1rem, 1vw, 1.125rem); color:#555; }
.prd-detail .prd-title .hashtag { display: flex; flex-wrap: wrap; margin-top:clamp(25px, 5vw, 50px); }
.prd-detail .prd-title .hashtag span { border-radius: 99px; border:1px solid #ddd; padding:10px 15px 8px; margin:0 3px 3px 0; color:#aaa; font-size:.875rem; }

.prd-detail .prd-image { text-align: center; background:#fdfdfd; box-shadow: inset 0 0 50px rgba(0,0,0,.05); border-radius: 50px; padding:15%; }
.prd-detail .prd-image .image { padding-bottom: 100%; }
.prd-detail .prd-image img { object-fit: contain; }
.prd-detail img { margin-bottom:0 !important; }

.prd-detail .prd-cont { grid-column: 1/3; }

.prd-detail .section { position: relative; margin-top:clamp(40px, 7vw, 80px); z-index:1; --sec-radius:20px; }

.prd-detail .sec-title { margin-bottom:clamp(15px, 3vw, 30px); }
.prd-detail .section h4 { display: grid; justify-items: baseline; gap:clamp(5px, 1vw, 10px); margin-bottom:clamp(10px, 2vw, 20px); }
.prd-detail .section h4 .en { position: relative; color:var(--main-color1); padding-left:10px; }
.prd-detail .section h4 .en:before { content:""; position: absolute; left:0; top:50%; transform: translateY(-50%); width:2px; height:14px; border-radius: 2px; background:var(--main-color1); }
.prd-detail .section h4 .ko { font-size:clamp(1.25rem, 1.8vw, 1.875rem); line-height: 1; }
.prd-detail .section h4 + p { color:#777; }

.prd-detail .section h5 { font-size:1.125rem; margin-bottom:clamp(10px, 1.2vw, 15px); }
.prd-detail .section dl { display: grid; grid-template-columns: 120px 1fr; gap:5px; }

.prd-detail .section li { position: relative; padding-left:10px; margin-bottom:5px; }
.prd-detail .section li:before { content: ""; position: absolute; left:0; top:8px; width:3px; height:3px; border-radius: 3px; background:#333; }
.prd-detail .section .card { border-radius:var(--sec-radius); border:1px solid var(--card-line-color); --card-line-color:#ddd; --card-padding:clamp(20px, 2.2vw, 25px) clamp(25px, 3vw, 30px); }



.prd-detail .sec1 .image { border-radius: var(--sec-radius); overflow:hidden; padding-bottom:20%; }
.prd-detail .sec2 .sec-cont { display: grid; grid-template-columns: repeat(2, 1fr); gap:clamp(10px, 3vw, 30px); }
.prd-detail .sec2 .card { padding:var(--card-padding); --card-line-color:var(--main-color1); }
.prd-detail .sec2 h5 { display: inline-block; padding:7px 15px 5px; border-radius: 99px; background:var(--main-color1); color:#fff; font-size:.875rem; }

.prd-detail .sec4 .sec-cont { display: grid; grid-template-columns: repeat(3, 1fr); gap:clamp(10px, 2vw, 20px); }

.prd-detail .sec4 .card { overflow:hidden; display: grid; }
.prd-detail .sec4 .card a { position: relative; pointer-events:none; padding-bottom:50%; }
.prd-detail .sec4 .card img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; }
.prd-detail .sec4 .card-cont { padding:var(--card-padding); }
.prd-detail .sec4 .card span { border-radius: 99px; background:var(--main-color3); color:#fff; padding:5px 15px; font-size:.875rem; }
.prd-detail .sec4 .card h5 { margin-top:10px; }
.prd-detail .sec4 .card p { color:#777; }

.prd-detail .sec5 .image-group { display: grid; grid-template-columns: repeat(2, 1fr); gap:clamp(10px, 2.5vw, 30px); margin-bottom:clamp(25px, 4.5vw, 50px); }
.prd-detail .sec5 .video-wrap { position: relative; padding-bottom:56.25%; }
.prd-detail .sec5 .video-wrap iframe { position: absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; }




@media (max-width: 768px) {
   #bo-v #bo-v-info { grid-template-columns: 100%; }
   #bo-v #bo-v-info .bo-v-images { grid-row: 1/2; }

   #bo-v #bo-v-info .bo-v-spec { margin-top:30px; }

   #bo-v #bo-v-info .sale-btn-wrap a { width:100%; }


   .prd-detail { display:block; }
   .prd-detail .prd-image { max-width:400px; margin:30px auto 0; }
   .prd-detail .prd-cont { grid-column: 1/2; }

   .prd-detail .prd-title p { line-height:1.6; }

   .prd-detail .sec1 .image { padding-bottom:40%; }

   .prd-detail .sec2 .sec-cont,
   .prd-detail .sec4 .sec-cont,
   .prd-detail .sec5 .image-group { grid-template-columns: 100%; }
}






/* 게시판 댓글 */
.cmt_btn {width:100%;text-align:left;border:0;border-bottom:1px solid #f0f0f0;background:#fff;font-weight:bold;margin:30px 0 0px;padding:0 0 15px}
.cmt_btn span.total {position:relative;display:inline-block;margin-right:5px;font-size:1em;color:var(--main-color1)}
.cmt_btn span.cmt_more {float:right;display:inline-block;width:15px;height:10px;background:url(./img/btn_cmt.png) no-repeat right 2px;margin-top:5px}
.cmt_btn_op span.cmt_more {background-position:right -8px}
.cmt_btn b {font-size:1.2em;color:#000}
.cmt_btn span.total:after {position:absolute;bottom:-17px;left:0;display:inline-block;background:var(--main-color1);content:"";width:100%;height:2px}
#bo_vc {}
#bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc article {margin:20px 0;position:relative;border-bottom:1px solid #f0f0f0}
#bo_vc article:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc article .profile_img img {border-radius:50%}
#bo_vc article .pf_img {float:left;margin-right:10px}
#bo_vc article .pf_img img {border-radius:50%;width:50px;height:50px}
#bo_vc article .cm_wrap {float:left;max-width:870px;width:90%}
#bo_vc header {position:relative;width:100%}
#bo_vc header:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc header .profile_img {display:none}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {color:#777}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {line-height:1.8em;padding:0 0 20px}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:underline;color:#ed6479}
#bo_vc_empty {margin:0;padding:80px 0 !important;color:#777;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc .bo_vl_opt {position:absolute;top:0;right:0}

.bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.bo_vc_act li {border-bottom:1px solid #f0f0f0}
.bo_vc_act li:last-child {border-bottom:0}
.bo_vc_act li a {display:inline-block;padding:10px 15px}
.bo_vc_act li a:hover {color:var(--main-color1)}

.bo_vc_w { position:relative; margin:10px 0; display:block; }

.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w textarea {border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;width:100%;height:120px;
-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1)}
#wr_secret {}
.bo_vc_w_info {margin:10px 0;float:left}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input {float:left;margin-right:5px}
.bo_vc_w_info #captcha {padding-top:10px;display:block;clear:both}
.bo_vc_w .btn_confirm {clear:both;margin-top:10px}
.bo_vc_w .btn_confirm label {display:inline-block;margin-right:10px;border-radius:3px;font-size:1.5em;text-align:center}

.bo_vc_w .btn-submit { height:45px; padding:0 20px; border-radius:5px; font-weight:bold; background:#111; color:#fff; }

.bo_vc_w .btn_confirm .secret_cm label {font-size:1em !important}
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}
.secret_cm {display:inline-block;float:left}

#bo_vc_send_sns {display:inline-block;float:left}
#bo_vc_sns {display:inline-block;margin:0;padding:0;list-style:none;zoom:1}
#bo_vc_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_sns li {float:left;margin:0 5px 0 0}
#bo_vc_sns .sns_li_f {border-radius:3px;background:#3a589b;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_t {border-radius:3px;background:#00aced;height:40px;line-height:40px;padding:0 0 0 10px}
#bo_vc_sns .sns_li_off {background:#bbb}
#bo_vc_sns a {display:inline-block;padding:0 15px 0 5px}
#bo_vc_sns input {margin:0 5px 0 0}