@charset "utf-8";
/********************************************
	HEADER
********************************************/
#header{position:fixed;top:0;display:flex;justify-content:space-between;gap:20px; align-items: center;width: 100%;margin:0 auto;background-color: rgba(255,255,255,1);height:var(--shop-header-height); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;z-index: 3; padding:0 5%;box-sizing: border-box;}
#header .logoArea{width:140px;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out;z-index:4;}
#header .logo{display:inline-block;width:100%;min-height:120px;background:url(/images/layout/logo.png) 0% 50% no-repeat;background-size:auto 120px;  text-indent: -9999px;box-sizing: border-box; }
/* #header .t--search{position: relative;width:40px;min-height:20px;background:url(/images/layout/i_search_wh.png) 50% 50% no-repeat; text-align:right;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out;z-index: 4;} */
#header .language{text-align:left;padding-bottom:40px; z-index: 4;}
#header .language a{display:inline-block;min-height:10px;background:url(/images/layout/left_arrow_bl.png) 0% 50% no-repeat;padding-left:12px;margin-left:8px; font-weight: 400;font-size:13px;line-height:1;color:#888;}
#header .language a:first-child{background:none; padding-left:0px;margin-left:0px;}
#header .language a.on{color:var(--concept-color);}

#header .util{text-align:right;padding-bottom:40px; z-index: 4;}
#header .util > *{position: relative;display:inline-block;padding-left:26px;font-weight:500;font-size:14px;line-height:1;color:#888;}
#header .util > *:before{ content: "";position:absolute; left: 0; top:50%;transform:translateY(-50%);content: ' '; width: 3px;height:3px;background:var(--concept-color); border-radius:50%;margin-left:10px;  }
#header .util > *:first-child{ padding-left:0px;margin-left:0px;}
#header .util > *:first-child:before{background:none; padding-left:0px;margin-left:0px;}
#header .util a.on{color:#333;}

#gnb-shop {flex:1; text-align:right; padding-bottom:40px;}
#gnb-shop > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden;}
#gnb-shop .gnb_wrap {margin:0 auto;position:relative}
#gnb-shop .gnb_wrap:hover, #gnb-shop .gnb_wrap:focus, #gnb-shop .gnb_wrap:active{z-index:3}
#gnb-shop #gnb1_ul { width: 100%; text-align:right; transition: 1.0s; position: relative; }
#gnb-shop #gnb1_ul:before{ content: ""; display: block; width: 100%; height: 0; background-color: rgba(255,255,255,0.98); border-bottom:1px solid #ebebeb; position: fixed; width: 100%; left: 0; top: 0; z-index: -2; opacity: 0; transition: 0.5s; }
#gnb-shop.on #gnb1_ul:before{ height:300px; opacity: 1; }

#gnb-shop:after{ content: ""; display: block; position: absolute; width: 100%; height: 0px; left: 0; right: 0; margin: 0 auto; bottom: 0px; background-color:#bbb; z-index: 5; opacity: 0; transition: 0.5s; }
#gnb-shop:hover:after{ opacity: 1; }
#gnb-shop ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb-shop .gnb1_li {float:none; display: inline-block; line-height:50px;position:relative; padding: 0 40px; }
#gnb-shop .gnb1_li .bg{ display: none; }
.gnb1_a {display:block;font-family: 'TheJamsil5Bold';color:#333; text-decoration:none; font-size:18px;letter-spacing:-0.02em;/*text-transform:uppercase;*/}
.gnb1_li .gnb1_a{ position: relative; display: block; }
.gnb2_li:first-child {border:0}
.gnb2_ul {display: none; position:absolute;top:50px; padding-top:15px;  width: 100%; left: 0; right: 0; opacity: 0; }
.gnb2_ul li{ position: relative; top: 0px; opacity: 0; }
#gnb-shop .gnb1_li > a{ position: relative; transition: 0.3s;cursor: pointer; z-index: 6;}
#gnb-shop .gnb1_li:hover > a{ color:var(--concept-color)}
#gnb-shop .gnb1_li > a:after{ content: ""; display: block; width: 100%; height: 2px;background-color: var(--concept-color); position: absolute; left: 50%; bottom:0px; opacity: 0; transform: scale(0) translate(-50%,0); z-index: 50; } 
#gnb-shop .gnb1_li:hover > a:after{ opacity: 1; transition: 0.5s; transform: scale(1) translate(-50%,0); transition-delay: 0.1s; }

.gnb2_ul .gnb2_ul_box { border-top:0;padding:0; }
.gnb2_a {display:block;padding:7px 0px;font-weight:400;font-size:14px; line-height:1.3;color:#666;text-align:center;text-decoration:none;position: relative; z-index: 1;}
a.gnb2_a:hover{ font-weight:500;color: #000;}

.gnb2_ul.on{ opacity: 1; }
.gnb2_ul.on li:nth-child(1){ opacity: 1; top: 0; /* transition: 1.0s;  */}
.gnb2_ul.on li:nth-child(2){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.2s;*/ }
.gnb2_ul.on li:nth-child(3){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.4s;*/ }
.gnb2_ul.on li:nth-child(4){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.6s;*/ }
.gnb2_ul.on li:nth-child(5){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.8s;*/ }
.gnb2_ul.on li:nth-child(6){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.8s;*/ }
.gnb2_ul.on li:nth-child(7){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.8s;*/ }
.gnb2_ul.on li:nth-child(8){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.8s;*/ }
.gnb2_ul.on li:nth-child(9){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.8s;*/ }
.gnb2_ul.on li:nth-child(10){ opacity: 1; top: 0; /*transition: 1.0s; transition-delay: 0.8s;*/ }

.gnb1_li_air .gnb2_a {}
.gnb1_li_on .gnb2_a {}
.gnb2_a:focus, .gnb2_a:hover {color:#fff}

/* 상단 레이아웃 white버전 - 스크롤 반응시 상단 메뉴 */
#header.bg_on{position:fixed; height:var(--header-height); border-bottom:1px solid #ebebeb;background-color: rgba(255,255,255,1);}
#header.bg_on .logoArea{}
#header.bg_on .logo{min-height:36px;background:url(/images/layout/logo-s.png) 0% 50% no-repeat;background-size:auto 36px;}
#header.bg_on #gnb-shop {padding-bottom:0px;}
#header.bg_on #gnb-shop .gnb1_li {line-height:40px;}
#header.bg_on .gnb2_ul {top:40px;}
#header.bg_on .gnb1_a {font-weight: 600;font-size:17px;color:#333;}
#header.bg_on .gnb2_a {color:#666;}
#header.bg_on a.gnb2_a:hover{ color: #000; }
#header.bg_on #gnb-shop #gnb1_ul:before{background-color: rgba(255,255,255,1); border-bottom:1px solid #ebebeb;}
#header.bg_on #gnb-shop .gnb1_li > a:after{  background-color: var(--concept-color); } 
#header.bg_on #gnb-shop.on #gnb1_ul:before{ height:240px;}
#header.bg_on #gnb-shop .gnb1_li:hover > a{ color: var(--concept-color); }
#header.bg_on .m_open{padding-bottom:0px; }

#header.bg_on .language{padding-bottom:0px;}
#header.bg_on .language a{color:#888;background:url(/images/layout/left_arrow_bl.png) 0% 50% no-repeat;}
#header.bg_on .language a:hover{color:#333;}
#header.bg_on .language a.on{color:var(--concept-color);}
#header.bg_on .language a:first-child{background:none; padding-left:0px;margin-left:0px;}

#header.bg_on .util{padding-bottom:0px;}
#header.bg_on .util a{font-size:14px;color:#888;}
#header.bg_on .util a:before{background:var(--concept-color);}
#header.bg_on .util a:first-child:before{background:none; padding-left:0px;margin-left:0px;}

#header.bg_on .hamburger-inner,
#header.bg_on .hamburger-inner:after,
#header.bg_on .hamburger-inner:before {position: absolute; width: 27px; height: 3px; background-color: #333 !important;transition: transform .3s ease .2s, background-color .3s ease .2s, opacity .3s ease .3s;}

/*모바일메뉴 */
#header .m_open{/* display:none;*/ text-align:right; width:60px;transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out;z-index: 4;  padding-bottom:40px; }

/* hamburger */
.hamburger { margin-right: 0;margin-left: auto;overflow: visible;cursor: pointer;z-index: 7;border: 0; transition-timing-function: linear;transition-duration: .3s ease;transition-property: opacity, -webkit-filter;transition-property: opacity, filter;transition-property: opacity, filter, -webkit-filter;}
.hamburger-box {position: relative;display: inline-block;width: 27px; height: 21px;vertical-align: middle;}
.hamburger-inner {display: block;top: 0;}

.hamburger-inner:after,
.hamburger-inner:before {display: block;content: '';}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {position: absolute; width: 27px; height: 3px; background-color: #333;transition: transform .3s ease .2s, background-color .3s ease .2s, opacity .3s ease .3s;}
.hamburger-inner:before { top: 9px; left: -8px;}
.hamburger-inner:after { top: 18px;   width: 26px;}

.hamburger-active { margin-right: 0;margin-left: auto;overflow: visible;cursor: pointer;z-index: 7;border: 0; transition-timing-function: linear;transition-duration: .3s ease;transition-property: opacity, -webkit-filter;transition-property: opacity, filter;transition-property: opacity, filter, -webkit-filter;}
.hamburger-active .hamburger-box {position: relative;display: inline-block;width:30px; height:30px;vertical-align: middle;}
.hamburger-active .hamburger-inner,
.hamburger-active .hamburger-inner:after { position: absolute; width: 27px; height: 3px;background-color: #fff;transition-delay: .1s;}
.hamburger-active .hamburger-inner { -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg);}
.hamburger-active .hamburger-inner:before {opacity: 0; transition: opacity .3s ease 0s}
.hamburger-active .hamburger-inner:after {width: 27px;-webkit-transform: translate3d(0, -18px, 0) rotate(-90deg); transform: translate3d(0, -18px, 0) rotate(-90deg);}

.hamburger-active.closer, .hamburger.mOpener{background:none;}

/* mMenu */
.mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; padding:0px; z-index:198; background:#000;  -ms-filter: alpha(opacity=80); filter: alpha(opacity=80); opacity:0.8; -moz-opacity:0.8;}
.mask .close{position:absolute;  top:10px;left:10px; z-index:202;} /* add */

.mMenu {display:none; position: fixed; right:-550px; top:0; width:550px; padding:0px;background-color: rgba(22,22,22,0.95); z-index:202; -webkit-overflow-scrolling: touch; overflow-y: auto;height:100%;}
.mMenu .mclose { position:absolute;  top:30px;right:30px; }
.mMenu .mTop {display:block;text-align:center;margin:60px 0px 30px; box-sizing: border-box;}
.mMenu .mTop .logo_s{display:inline-block; width:100%;min-height:80px;background:url(/images/layout/logo.png) 50% 50% no-repeat; background-size:auto 80px;}

.mMenu .util{display:flex;justify-content:center;align-items: center;text-align:center; margin:20px auto;}
.mMenu .util a{display:inline-block;min-height:14px;background:url(/images/layout/icon-star.png) 0% 50% no-repeat; padding-left:19px;margin-left:10px;font-weight: 400;font-size:13px;line-height:1;color:rgba(255,255,255, .8);}
.mMenu .util a:first-child{background:none; padding-left:0px;margin-left:0px;}

.mMenu .mTop .language_area{width:100%; margin-top:20px;}
.mMenu .mTop .language_area > *{position: relative;display:inline-block;margin-left:5px;}
.mMenu .mTop .language_area > *:first-child{margin-left:0px;}
.mMenu .mTop .language_area a{display:inline-block;border:2px solid #666; padding:4px 16px; border-radius:16px;font-weight: 400;font-size:14px;color: #aaa;line-height:1;}
.mMenu .mTop .language_area a.on{font-weight: 500;color: var(--concept-color);line-height:1;border:2px solid var(--concept-color);}
.mMenu .mTop .language_area a.login{font-weight: 500;color:#000;line-height:1;border:2px solid var(--concept-color);background-color: var(--concept-color); }

.mMenu .mTop .cart_area{width:100%; margin-top:20px; text-align: center;}
.mMenu .mTop .cart_area a{display:inline-block;font-weight: 400;font-size:14px;color: #aaa;line-height:1;}

.mMenu .mTop .btnArea{display: flex;width:100%;}
.mMenu .mTop .btnArea > * {flex: 1;}

.mMenu .list {padding:0px;}
.lnav{width:100%;-webkit-transition: all .25s ease-in;transition: all .25s ease-in;}
.lnav, .lnav ul, .lnav li {list-style: none;}
.lnav ul {margin:0px;}
.lnav {padding: 0px;margin: 0px;}
.lnav > li {margin: 0px 0; border-bottom:0px solid #dfdfdf;}
.lnav > li li {margin: 0px;}
.lnav > li li li{margin: 0px;}
.lnav a {line-height:1;font-weight:600;letter-spacing:-0.01em;display: block;outline: none;text-decoration: none;}
.lnav a .caret {float: right;/* width:13px;height:10px;display: inline-block;vertical-align: top;background:url(../img/lmenu.png) right center no-repeat; */ border-style:solid;border-width: 9px 6px 0 6px;border-color: #fff transparent transparent transparent; -webkit-transition: -webkit-transform .65s ease; transition: transform .65s ease;}
.lnav li.open > a > .caret{-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);border-color: var(--second-color) transparent transparent transparent;}

.lnav li a {color:#eee; font-size:20px;line-height:1; padding:16px 40px;} 
.lnav > li li a {color:#eee;  font-size:16px;line-height:1;font-weight: 400;padding: 12px 40px 12px 50px;}
.lnav li.open {}
.lnav li.open a{color:#fff;}
.lnav li.open li a {color:#eee;}
.lnav li.open li a:hover{color:#fff;}
.lnav li.active a{color:#fff;}
.lnav li li.active a{color:#fff;}
.lnav li.off a{}

/* 2 depth 여백 추가 */
.lnav > li li{}
.lnav li li:first-child{padding-top:10px;}
.lnav li li:last-child{padding-bottom:14px;}
/* .lnav li li:last-child{padding-bottom:14px;} */

/* 바디에 스크롤 막는 방법 */
.not_scroll{
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.not_scroll .cont {
    position: relative;
    top: 0;
}

/* Msearch */
.Msearch {position:fixed; top:-200%;width:100%; padding:70px 40px 40px;  z-index:9; background:#fff; border-bottom:1px solid #dfdfdf; box-shadow: 0px 1px 8px rgba(0,0,0,0.1); -webkit-overflow-scrolling: touch;}
.Msearch .mclose {position:absolute;  top:20px;right:5%; }
.Msearch .mclose img{max-width:100%;}
.Msearch .msearchBox{display:inline-block; width: 100%;  margin:0px; text-align:center; padding:0px;}
.Msearch .msearchBox > h3{font-weight:500;color:#424242;font-size: 14px;line-height:1.3;margin-bottom:20px;}
.Msearch .searchTb{position:relative;display:inline-block;width:100%; max-width:600px;vertical-align:middle;transition: all 0.3s ease-out}
.Msearch .searchTb input{width:100%;color:#000;font-size:14px;height:45px;padding:0px 50px 0 25px;border:2px solid #000;background:#fff;border-radius:48px;box-sizing:border-box;}
.Msearch .searchTb .btn__search{position: absolute;top:50%;transform:translateY(-50%);right:25px;width:18px;height:18px;background:url(/images/layout/i_search_18.png) 0 50% no-repeat;text-indent: -9999px; z-index: 2;}
.Msearch .searchTb .btn__search input[type=image]{border:0}
.Msearch .searchTb input:focus {outline: none;border-color:var(--concept-color);}

.Msearch input::placeholder {color:#333;font-size:16px;}
.Msearch input:-ms-input-placeholder {color:#333;font-size:16px;}
.Msearch input::-ms-input-placeholder {color:#333;font-size:16px;}
.Msearch input::-webkit-input-placeholder {color:#333;font-size:16px;}
.Msearch input::-moz-placeholder {color:#333;font-size:16px;}

/* Header END */

A.roll img{display:inline; border:0; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}
A.roll img.over { display:none; }
A.roll:hover {border:0; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}
A.roll:hover img { display:none; }
A.roll:hover img.over { display:inline;}

.btn_up_layer {position:fixed;opacity:0; right:5px;bottom:5px;display:none;padding:0px;/*width:80px;height:30px;*/ width:50px;  height:50px;border-radius:50%; background:url(/images/layout/top-arrow.png) 50% 50% no-repeat #000;background-size:auto 20px; display:flex;flex-direction: column;justify-content:center;align-items:center;text-align: center; font-weight: 600;color:rgba(255,255,255, 1); font-size:13px; z-index:100;cursor:pointer;transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;/*-ms-filter: alpha(opacity=70); filter: alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;*/ }
.btn_up_layer.active{opacity: 1;}

/* footer  */
.footer{position: relative; display:flex; justify-content: space-between; background:#1a1a1a; margin:0px auto;/*overflow:hidden;*/ padding:50px 5%; box-sizing: border-box;}
.footer:after {content:""; display:block; clear:both; height:0;}
.footer .f_logo{flex:0 0 200px;text-align:left;min-height:45px;background:url(/images/layout/logo-f.png) 0% 0% no-repeat;background-size:auto 45px; text-indent: -9999px;}
.footer .f_cont{flex:1;}
.footer .f_cont li{display:flex;flex-wrap: wrap; gap:25px; margin-bottom:8px; }
.footer .f_cont li > p{font-weight:400;color:#c8c8c8; font-size:14px;line-height:1.2;}
.footer .f_cont li > p > span{display:inline-block;font-weight:500;color:#888;margin-right:10px; }

.footer .f_menu{flex:0 0 350px; }

.f_copy{font-weight:400;color:#888; font-size:13px;line-height:1.3;letter-spacing:-0.01em;}	

.f_smenu {width:100%;text-align:left;margin-bottom:20px;}
.f_smenu > a {position:relative;display:inline-block; font-weight: 400;font-size:14px;color: #aaa;padding-left: 25px;}
.f_smenu > a::after {position:absolute; left:0; top:50%;transform:translateY(-50%);content: ' '; width: 4px;height: 4px;background:#aaa;border-radius:50%;margin-left:10px; }
.f_smenu > a:first-child{padding-left:0px;}
.f_smenu > a:first-child::after {position:absolute; left:0; top:50%;transform:translateY(-50%);content: ' '; width: 0px;height: 0px;margin-left:0px; }
.f_smenu .bold{font-weight:500;color: #eae6df;}

.footer .f_right{position: absolute; right:5%; top:40px; width:140px; text-align:center;}
.footer .f_right > p{font-weight:400;color:#c8c8c8; font-size:13px;line-height:1.2; }
.footer .f_right .qr{margin-top:8px;}
.footer .f_right .qr img{width:80px;}



.ellipsis02{overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.3em;height: 2.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */}
.ellipsis03{overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.3em;height: 3.9em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */} 
.ellipsis04{overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 4; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.3em;height: 5.2em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */} 

/*img 관련 */
.imgMax{max-width:100%;}
.imgFix{width:100%;}
.fullsize{display: inline-block;width: 100%;}
.fullsize img{width: 100%;}

.slideImg{position: relative; display: inline-block; width:100%; height:0px;padding-top:75%;overflow: hidden;border:1px solid #eee; border-radius:0px;background-size: cover; background:#fff;box-sizing: border-box; }
.slideImg img{position: absolute; top: 0; left: 0; right: 0; bottom: 0;width:100%; height:100%; }
.slideImg.mid{padding-top: 56.25%; }
.slideImg.full{padding-top: 100%; }
.slideImg.full-circle{padding-top: 100%;border-radius:50%;border:0px;}

/* 팝업 Basic */
.popupWrap_A{position:relative;display:flex; align-items:center; width: 100%; height:100vh;/*background:#fff;*/margin:0 auto;padding:0 2%; box-sizing: border-box;}/* basic */
.popupWrap_A img{max-width: 100%;}

.icon-close-black{position: absolute;right:20px;top:10px;width:21px; height:21px;background:url(/images/layout/close_black.png) 50% 50% no-repeat;text-indent: -9999px; z-index:2}
.icon-close-white{position: absolute;right:5px;top:0px;width:21px; height:21px;background:url(/images/layout/close_white.png) 50% 50% no-repeat;text-indent: -9999px; z-index:2}
.icon-close-white.p-inner{right:20px;top:13px;}

.popupBox_A{position:relative;width: 100%;padding:0px;/* background:#fff; */ margin-top:30px;border-radius:16px;} /* basic - x버튼 위에 */
.popupBox_A img{max-width: 100%;}

.popupBox_A {overflow: auto; 
	scrollbar-arrow-color: #fff; /* IE 6+ scroll styles */
	scrollbar-face-color: #999;
	scrollbar-shadow-color: #333;
	scrollbar-highlight-color: #000;
	scrollbar-darkshadow-color: #000;
	scrollbar-track-color: #ddd; /* Last IE 6+ scroll styles */
	scrollbar-color: #999 #ddd; /* Firefox 64+ */
	scrollbar-width: thin; /* Firefox 64+ */
	width: 100%;    
  }
  
.popupBox_A::-webkit-scrollbar {width: 6px;height: 6px;}
.popupBox_A::-webkit-scrollbar-track {background: padding-box #ddd;border-radius: 4px;}
.popupBox_A::-webkit-scrollbar-thumb {background: padding-box #999;border-radius: 4px;}
.popupBox_A::-webkit-scrollbar-thumb:hover { background: padding-box #aaa;}
.popupBox_A::-webkit-scrollbar-thumb:active {background: padding-box #333;box-shadow: inset 0 0 3px rgba(192, 192, 192, 0.5);}

.pop-title {font-weight:700;font-size:17px;line-height:1;color:#222;letter-spacing:-0.02em;} /* popup title */
.pop--topline{width:100%; padding:20px 25px 10px; border-bottom:1px solid #dfdfdf; }
.pop--top{width:100%; padding:15px 25px; background:#222;} 

.popup--inner{width:100%;background:#fff; max-height:70vh; padding:25px;}
.popup--inner{overflow: auto; 
	scrollbar-arrow-color: #fff; /* IE 6+ scroll styles */
	scrollbar-face-color: #999;
	scrollbar-shadow-color: #333;
	scrollbar-highlight-color: #000;
	scrollbar-darkshadow-color: #000;
	scrollbar-track-color: #ddd; /* Last IE 6+ scroll styles */
	scrollbar-color: #999 #ddd; /* Firefox 64+ */
	scrollbar-width: thin; /* Firefox 64+ */
  }
  
.popup--inner::-webkit-scrollbar {width: 6px;height: 6px;}
.popup--inner::-webkit-scrollbar-track {background: padding-box #ddd;border-radius: 4px;}
.popup--inner::-webkit-scrollbar-thumb {background: padding-box #999;border-radius: 4px;}
.popup--inner::-webkit-scrollbar-thumb:hover { background: padding-box #aaa;}
.popup--inner::-webkit-scrollbar-thumb:active {background: padding-box #333;box-shadow: inset 0 0 3px rgba(192, 192, 192, 0.5);}

.textTb{display: inline-block; width:100%;margin-bottom:20px;}
.textTb .tit1{font-weight: 700;color:#333;font-size:16px;line-height:1.45;letter-spacing:-0.01em;margin-bottom:10px;}
.textTb .txt1{color:#555;font-size:13px;line-height:1.45;letter-spacing:-0.01em;}
.textTb .txt2{color:#555;font-size:13px;line-height:1.45;letter-spacing:-0.01em;margin-bottom:10px;}
.textTb .txt3{color:#555;font-size:13px;line-height:1.45;letter-spacing:-0.01em;padding-left:20px;margin-bottom:8px;box-sizing: border-box;}
.textTb .txt4{color:#555;font-size:13px;line-height:1.45;letter-spacing:-0.01em;padding-left:40px;margin-bottom:8px;box-sizing: border-box;}


/* video 사용할 경우 */
.video_wrap{position: relative; margin:0px auto; padding-bottom: 56.25%;height: 0;overflow: hidden;}
.youtubeP{position: absolute;top: 0;left: 0;width: 100%; height: 100%;}

.content-video{position:relative; width:100%; margin:0 auto; text-align:center; background-color: #000; overflow:hidden; vertical-align:top; padding: 0px;}
.content-video:after {clear:both;display:block;height:0;overflow:hidden;visibility:hidden;content:"";} 
.content-video-txt{z-index: 2; position:absolute; top:50%;transform:translateY(-50%);text-align:center; }
.content-video video{background-color: #000;opacity:1;vertical-align:top;max-width:100%;height:auto}

.pc_only{display: inline-block;}
.mo_only{display: none;}


.inner{width:100%;max-width:var(--area-width);margin:0 auto;padding:0;box-sizing: border-box;}

/********************************************
	MAIN
********************************************/
/* shop 인경우 */
body.shop .container{width:90%; margin:var(--shop-header-height) auto 60px;  padding:40px 0; border-top:2px solid #000;}
.container {width:90%; margin:var(--shop-header-height) auto 60px;  padding:40px 0; border-top:2px solid #000;overflow: hidden; min-height:400px; }
.title{font-weight:700;font-size:40px;color:#000;line-height:1;letter-spacing:-0.01em;margin-bottom:40px;}

.noPage{display:flex;flex-direction: column;align-items: center; margin:0 auto;padding:60px 0; }
.noPage .img{width:50%; max-width:260px;margin:0 auto;margin-bottom:30px;}
.noPage .img img{width:100%;height:auto;}
.noPage .txt{text-align:center; font-weight:400;font-size:18px;color:#333;line-height:1.45;letter-spacing:-0.01em; }
.noPage .txt > span{font-weight:700;}

.f-partner{width:100%;margin:0 auto;border-top:1px solid #ebebeb; padding:10px 0;box-sizing: border-box;}
.f-partner .inner{position:relative;padding:0px 30px;}
/* .swiper_1 스와이퍼 */ 
.swiper_1 { position:relative;width:100%;padding:0px;margin:0px auto;z-index:1; box-sizing: border-box;} 
.swiper_1 .swiper-wrapper{display:flex;justify-content: center;align-items: center;gap:50px; }
.swiper_1 .swiper-slide {width:auto !important;box-sizing:border-box;  -webkit-box-sizing:border-box; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.swiper_1 .swiper-slide img{max-width:100%; height:70px;}

/* 버튼관련 */ 
.f-partner .inner .swiper-button-prev,  
.f-partner .inner .swiper-button-next{position:absolute; width:8px; height:15px; background-size:auto 15px;top:50%;margin-top:-8px;z-index:2;} /*크기*/
.f-partner .inner .swiper-button-prev{background-image: url(/images/layout/p_prev.png); left: 10px;} /*이미지,위치*/
.f-partner .inner .swiper-button-next{background-image: url(/images/layout/p_next.png); right:10px;}

.f-partner .inner .swiper-button-next.swiper-button-disabled, .f-partner .inner .swiper-button-prev.swiper-button-disabled {
	opacity:.0;
	cursor: auto;
	pointer-events: none
}

.swiper_1 .swiper-pagination-bullet {width: 12px;height: 7px;margin:0px 4px;display: inline-block;border-radius:24px; background: #bbb; border:0;}
.swiper_1 .swiper-pagination-bullet-active {width:40px;height:7px;background:#7357bd;}

.swiper_1 .swiper-scrollbar {display:none;border-radius:10px;position:relative;-ms-touch-action:none;background:#e2e2e2}
.swiper_1.swiper-container-horizontal>.swiper-scrollbar {position:absolute;left:0%;bottom:0px;z-index:50;height:2px;width:100%;}
.swiper_1 .swiper-scrollbar-drag {height:100%;width:100%;position:relative;background:rgba(0,0,0,.9);border-radius:0px;left:0;top:0}
.swiper_1 .swiper-scrollbar-cursor-drag {cursor:move}
.swiper_1 .swiper-pagination-progress {background:rgba(0,0,0,.9);position:absolute}


/********************************************
	login 및 공통사용
********************************************/
/* form */
.form_sty{width:100%;margin:0px;border-top:1px solid #666; padding-top:10px; box-sizing: border-box;}
.form_sty ul{display: flex;align-items: center; width:100%;margin-top:0px;/* border-bottom:1px solid #dfdfdf; */ padding:10px 0px;}
.form_sty li.top{vertical-align:top;padding-top:10px;  align-self:flex-start;}
.form_sty li{padding:0px;min-height:40px; display:inline-flex;align-items: center; }
.form_sty .tit{flex:0 0 180px;  }
.form_sty .tit > *{position:relative;display: inline-block;font-weight:600;font-size: 16px;color: #333;line-height:1;letter-spacing:-0.02rem;}
.form_sty .tit > *.required{padding-right:10px; background:none !important}
.form_sty .tit > *.required::before{position:absolute; right:0; top:0;content: '*';width:6px;height:6px;border-radius: 0%;font-size:14px;color: #ff0000;}
.form_sty .tit.sm{flex:0 0 100px;  }
.form_sty .tit.lg{flex:0 0 180px;  }
.form_sty .cont{flex:1;font-size:14px;/* color: #545454; */ }
.form_sty a{vertical-align:middle;}

.tit-required{margin-bottom:15px;}
.tit-required > span{position:relative;display: inline-block;color: #aaa;font-size:16px; line-height:1;letter-spacing:-0.03rem;}
.tit-required > span.required{padding-right:10px;}
.tit-required > span.required::before{position:absolute; right:0; top:0;content: '*';width:6px;height:6px;border-radius: 0%;font-size:14px;color: #ff0000;}

.file--name{display:inline-block;margin-left:10px;font-weight: 400;font-size:13px;line-height:20px;color:#666;}
.file--del{font-weight: 400;font-size:13px;line-height:1;color:#666;background:url(/images/layout/btn_close_14.png) 0 50% no-repeat;padding-left:20px;margin-top:10px;box-sizing: border-box;}

/* file upload */
.inputfile-wrap {position: relative;display: flex; width: 100%;}
.inputfile-wrap input[type="file"] {position: absolute;width: 1px;height: 1px;margin: -1px; padding: 0; border: 0; overflow: hidden;clip: rect(0, 0, 0, 0);}
.inputfile-wrap label.btn {display: block;width: 100px;height:40px;margin-left: 10px; color:#fff;border:0px solid #262729;background:#a3a5aa;line-height:40px;padding:0px 5px;text-align:center; font-size:14px;font-weight: 400;border-radius:4px;box-sizing: border-box;}
.inputfile-wrap input{width:100%;height:40px;padding:0 10px;border:1px solid #dfdfdf;background:#fff;color:#666; border-radius:4px; font-size:14px;box-sizing:border-box;transition: border-color 0.15s ease-in-out;}
.inputfile-wrap input:focus {outline: none;background-color:#fff;border-color:var(--concept-color);}

.f-group-A {display:flex;width:100%;margin:0px;align-items:center;}
.f-group-A > * {margin-left:10px;}
.f-group-A > *:first-child { margin-left: 0;}
.f-group-A .select-w{width:30%;} /* 모바일 100% */
.f-group-A .w1{width:50%;}
.f-group-A .w2{width:100px;}
.f-group-A .input-w{flex: 1;}
.f-group-A .sm{min-width:10px;text-align:center;font-weight:400;font-size:14px;color:#333;}
.f-group-A .input-tel{flex:0 0 100px;}

/********************************************
	login
********************************************/
.login-wrap{display:flex;width:100%; min-height:100vh; height:100%; justify-content: center;align-items: center;flex-direction: column; background:#f6f6f6;padding:5%;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.login-wrap .box{width:100%; max-width:600px; margin: 0 auto;  border:1px solid #dfdfdf; background:#fff;padding:80px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.login-wrap .box2{width:100%; max-width:600px; margin:20px auto;  border:1px solid #dfdfdf; background:#fff;padding:40px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; }
.login-wrap .login-logo{ display:flex; align-items: center;flex-direction: column;text-align:center;margin-bottom:20px;}
.login-wrap .login-logo img{width:auto;height:40px; }

.login-wrap .btn-area{display:flex;justify-content: center; gap:10px; margin-top:20px;}
.login-wrap .btn-area > *{flex:1;}
.login-wrap .btn-login{display: inline-flex; justify-content: center;align-items: center; cursor:pointer; height:45px;font-weight: 600;font-size:17px; color:#fff;line-height:1;letter-spacing:0.01em;background:var(--concept-color); border-radius:4px;box-sizing: border-box;}
.login-wrap .btn-join{display: inline-flex; justify-content: center;align-items: center;cursor:pointer; height:45px; font-weight: 600;font-size:17px; color:#fff;line-height:1;letter-spacing:0.01em; background:var(--point-color); border-radius:4px;box-sizing: border-box;}

#mb_login_notmb, #mb_login_od_wr{padding:0 !important; margin:0 !important;}
.login-wrap .box2 h3{margin-top:0; margin-bottom:10px;}



.login-form{}
.login-form ul{display: flex;align-items: center; gap:10px; margin-bottom:10px;}
.login-form .tit{flex:0 0 80px;font-weight:500;color:#333; font-size:16px;letter-spacing:-0.01em;line-height:1;}
.login-form .cont{flex:1;}

.login--info{display:flex; justify-content:space-between;align-items: center; margin-top:15px; }

.login--sns-wrap{margin-top:20px; padding-top:20px; border-top:1px solid #ddd; }
.login--sns{display:flex; justify-content:center;align-items: center; gap:5px; }
.login--sns > *{flex:1;}
.login--sns .sns--btn{display:flex; justify-content:center; align-items: center;width:100%;height:40px; font-weight:400; font-size:14px; border-radius:4px; box-sizing: border-box;}
.login--sns .sns--btn.naver{background:#1fc800;}
.login--sns .sns--btn.kakao{background:#ffeb00;}
.login--sns .sns--btn.google{background:#fff;border:1px solid #666;}

.login--sns .sns--naver{display: inline-flex; align-items: center; min-height:20px; background:url('/images/layout/sns-naver.png') 0px 50% no-repeat #1fc800; background-size:16px 16px;color:#fff; padding-left:30px; box-sizing: border-box;}
.login--sns .sns--kakao{display: inline-flex; align-items: center; min-height:20px; background:url('/images/layout/sns-kakao.png') 0px 50% no-repeat #ffeb00; background-size:20px 20px;color:#333; padding-left:30px; box-sizing: border-box;}
.login--sns .sns--google{display: inline-flex; align-items: center; min-height:20px; background:url('/images/layout/sns-google.png') 0px 50% no-repeat #fff; background-size:20px 20px;color:#333;padding-left:30px; box-sizing: border-box;}

.join-wrap{display:flex;width:100%; height:100vh; justify-content: center;align-items: center;flex-direction: column; background:#f6f6f6;padding:5%;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.join-wrap .box{width:100%; max-width:800px; margin: 0 auto;  border:1px solid #dfdfdf; background:#fff;padding:50px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.join-wrap .tit-md{margin-bottom:15px;}
.join-wrap section{margin-top:20px; padding-top:20px; border-top:1px solid #ddd;}

.joinOk{ display:flex;flex-direction: column; align-items: center;text-align:center; margin:80px auto 20px;}
.joinOk .icon{width:40%;}
.joinOk .icon img{width:100%; max-width:72px;}
.joinOk > p{padding-top:30px; font-weight:500;font-size:20px;line-height:1.45;color:#000; }


.join-sns{display:flex; justify-content:space-between;align-items: center;}
.join-sns > *{flex:1;}
.join-sns .txt-s{font-weight:500;}
.join-sns .s-cont{display:inline-flex; justify-content:flex-end;align-items: center; gap:10px; }
.join-sns .s-cont img{width:30px; }

.agreeBox{width:100%;}
.agreeBox .txt-s{font-weight:500;}
.agreeBox .agree-top{display:flex; justify-content:space-between;align-items: center; margin-bottom:10px;}
.agreeBox .agree-top > *{flex:1;}
.agreeBox .agree-top > *:nth-child(1){}
.agreeBox .agree-top > *:nth-child(2){display:inline-flex; justify-content:flex-end; }

.wr_box{display: inline-block; width:100%; border:1px solid #dfdfdf;background:#fafafa; margin:0px auto;max-height:150px;padding:20px;box-sizing: border-box;font-weight: 400;font-size:14px;line-height:1.45;color:#333; }
.wr_box > h3{font-weight: 500;font-size:15px;line-height:1.45;color:#333;margin-bottom:10px;}
.wr_box > p{font-weight: 400;font-size:14px;line-height:1.45;color:#333; margin-top:10px;}
.wr_box > p:first-child{ margin-top:0px;}

.wr_box{overflow: auto; 
	scrollbar-arrow-color: #fff; /* IE 6+ scroll styles */
	scrollbar-face-color: #999;
	scrollbar-shadow-color: #333;
	scrollbar-highlight-color: #000;
	scrollbar-darkshadow-color: #000;
	scrollbar-track-color: #ddd; /* Last IE 6+ scroll styles */
	scrollbar-color: #999 #ddd; /* Firefox 64+ */
	scrollbar-width: thin; /* Firefox 64+ */
  }
  
  .wr_box::-webkit-scrollbar {width: 6px;height: 6px;}
  .wr_box::-webkit-scrollbar-track {background: padding-box #ddd;border-radius: 4px;}
  .wr_box::-webkit-scrollbar-thumb {background: padding-box #999;border-radius: 4px;}
  .wr_box::-webkit-scrollbar-thumb:hover { background: padding-box #aaa;}
  .wr_box::-webkit-scrollbar-thumb:active {background: padding-box #333;box-shadow: inset 0 0 3px rgba(192, 192, 192, 0.5);}

.right-chkBox{display:flex;justify-content:flex-end;align-items: center;gap:10px; margin:10px auto;}

/* text */
.txt-lg{font-weight:400;font-size:20px;color:#333;line-height:1.5;letter-spacing:-0.01rem;}
.txt-md{font-weight:400;font-size:18px;color:#333;line-height:1.5;letter-spacing:-0.01rem;}
.txt-s{font-weight:400;font-size:16px;color:#333;line-height:1.5;letter-spacing:-0.01rem;}
.txt-xs{font-weight:400;font-size:14px;color:#333;line-height:1.5;letter-spacing:-0.01rem;}

.tit-md{font-weight:700;font-size:24px;color:#333;line-height:1.45;letter-spacing:-0.01rem;}

.bullet-list{display: inline-block;width:100%;padding-left:9px;font-weight:500;font-size:16px;color:#333;letter-spacing:-0.02rem;line-height:1.4;margin-bottom:8px;box-sizing: border-box;}
.bullet-list::before {content: ' '; display: inline-block; vertical-align: top;width:4px; height:4px; margin-top:9px;margin-left:-9px;margin-right:6px;border-radius: 50%; background:var(--concept-color);}

.list-typeA{width:100%; max-width:1200px; margin:60px auto 0px;} /* 2 */
.list-typeA ul{display:flex;justify-content: center;gap:80px; }
.list-typeA li{flex:1; max-width:400px;  cursor:pointer;transition:all 0.3s;}
.list-typeA li:hover{margin-top:-5px;/* box-shadow: 1px 1px 16px 0px rgba(22,22,22, 0.08); */}

.list-typeB{position:relative;width:100%;max-width:1200px; margin:60px auto 0px;}   /* 4 */
.list-typeB ul{display:flex;flex-wrap: wrap; justify-content: center; width:100%;}
.list-typeB li{width:22%;margin:0 0% 60px 4%; cursor:pointer;transition:all 0.3s;}
.list-typeB li:nth-child(4n-3){margin:0 0% 60px 0%;}
.list-typeB li:hover{margin-top:-5px;/* box-shadow: 1px 1px 16px 0px rgba(22,22,22, 0.08); */ }

.gallery--wrap{width:100%; text-align: left;}
.gallery--wrap .slideImg{border:0}
.gallery--wrap .text--wrap{padding:20px;box-sizing: border-box;}
.gallery--wrap .category{font-weight:400;font-size:14px;color:#888;line-height:1.45;letter-spacing:-0.01em;margin-bottom:0px;}
.gallery--wrap .tit{font-weight:600;font-size:24px;color:#333;line-height:1.45;letter-spacing:-0.01em;margin-bottom:10px; word-wrap: break-word;word-break:keep-all;	 /* white-space:nowrap; overflow:hidden; text-overflow:ellipsis;*/ }
.gallery--wrap .price-wrap{display:flex;align-items: center; gap:8px;}
.gallery--wrap .price{font-weight:500;font-size:18px;color:#666767;line-height:1.45;letter-spacing:-0.01em; /* position: relative; padding-top:12px; */ }
/* .gallery--wrap .price::before {content: ' ';position:absolute;  left:50%; top:0; transform: translateX(-50%); display: inline-block;width:24px; height:2px;background:var(--concept-color);} */
.gallery--wrap .price-1{font-weight:300;font-size:14px;color:#888;line-height:1.45;letter-spacing:-0.01em; text-decoration: line-through;}
.gallery--wrap .sale{font-weight:400;font-size:16px;color:#ee7700;line-height:1.45;letter-spacing:-0.01em;}
.ellipsis-3{overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.3em;height: 3.9em;}

/* detail */
:root {
	--detail--img-height:560px; 
  }
.detail--wrap{position: relative;display:block;width:100%; max-width:1400px; text-align:left;margin:0px auto 60px; overflow: hidden; font-size: 0;}
.detail--wrap .detail--img{ display: inline-block; width:700px; height:var(--detail--img-height); }
.detail--wrap .detail--cont{ display: inline-block;  width:calc(100% - 740px); margin-left:40px;  }
  
.swiper-container-wrapper { display: flex;flex-flow: row nowrap;width: 100%;}
.swiper-container-wrapper .swiper-slide {display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;background-size: cover;background-position: center;border:1px solid #ebebeb; background:#fff;box-sizing: border-box; }
.swiper-container-wrapper .swiper-slide img{width:100%;}
.gallery-top {position: relative;width: 80%; height:var(--detail--img-height);margin-right: 5%;}
.gallery-thumbs {width: 15%;height:var(--detail--img-height); padding: 0;}
.gallery-thumbs .swiper-wrapper {flex-direction: column; }
.gallery-thumbs .swiper-slide {opacity: 0.5;cursor: pointer;  flex-flow: column nowrap;width: 100%;}
.gallery-thumbs .swiper-slide-thumb-active {opacity: 1;}

.gallery-top .swiper-pagination-bullet { width:10px;height:2px;margin:0px 2px 0px;border-radius:0%;background:#aaa;opacity:0;box-sizing: border-box;}
.gallery-top .swiper-pagination-bullet-active {opacity:0;background:#333;}

@media (max-width: 1400px) {
	:root {
		--detail--img-height:480px; 
	  }
	.detail--wrap .detail--img{width:600px;}
	.detail--wrap .detail--cont{width:calc(100% - 620px); margin-left:20px; }

}

@media (max-width: 1200px) {
	:root {
		--detail--img-height:400px; 
	  }
	.detail--wrap .detail--img{width:500px;}
	.detail--wrap .detail--cont{width:calc(100% - 520px); margin-left:20px; }

}

@media (max-width: 1024px) {
	:root {
		--detail--img-height:auto; 
	  }
	.detail--wrap .detail--img{width:100%;}
	.detail--wrap .detail--cont{width:100%; margin-left:0px; margin-top:40px;}

	.swiper-container-wrapper {flex-flow: column nowrap; }
	.gallery-top {width: 100%; margin-right: 0px;}
	.gallery-thumbs {display:none;}
	/* .gallery-thumbs {width: 100%; padding-top: 10px;}
	.gallery-thumbs .swiper-wrapper {flex-direction: row;}
	.gallery-thumbs .swiper-slide {width: 25%;flex-flow: row nowrap;height: 100%;} */

	.gallery-top .swiper-pagination-bullet { opacity:1;}
	.gallery-top .swiper-pagination-bullet-active {opacity:1;}


}

.detail--wrap .detail--cont .p-category{position: relative; width:fit-content ; padding-bottom:4px; font-weight:300;font-size:18px;color:#333;line-height:1;letter-spacing:-0.01em; margin-bottom:10px;}
.detail--wrap .detail--cont .p-category::before {content: ' ';position:absolute;  left:0; bottom:0;  display: inline-block;width:100%; height:1px;background:var(--concept-color);}
.detail--wrap .detail--cont .p-tit{font-weight:600;font-size:30px;color:#333;line-height:1.45;letter-spacing:-0.01em; margin-bottom:20px;}
.detail--wrap .detail--cont .price-wrap{margin-bottom:20px;}
.detail--wrap .detail--cont .p-price{font-weight:400;font-size:30px;color:#333;line-height:1.45;letter-spacing:-0.01em;}
.detail--wrap .detail--cont .p-price > span{font-weight:800;}
.detail--wrap .detail--cont .o-price{font-weight:400;font-size:16px;color:#666;line-height:1.45;letter-spacing:-0.01em; }

.detail--wrap .detail--cont .total-price{display: flex;align-items: center; justify-content: space-between;  gap:10px; padding-top:15px; border-top:1px solid #666;margin-bottom:20px }
.detail--wrap .detail--cont .total-price .tit{font-weight:500;font-size:16px;color:#333;line-height:1.45;}
.detail--wrap .detail--cont .total-price .price{font-weight:400;font-size:20px;color:#333;line-height:1.45;letter-spacing:-0.01em; display: inline-flex;align-items: center; gap:5px;  }
.detail--wrap .detail--cont .total-price .price > span{font-weight:800;font-size:40px; }

.detail--wrap .detail--cont .text-wrap{margin-bottom:30px;}
.detail--wrap .detail--cont .text-wrap > dl{margin-top:15px;display: flex;align-items: center;  gap:10px; }
.detail--wrap .detail--cont .text-wrap > dl:first-child{margin-top:0px;}
.detail--wrap .detail--cont .text-wrap > dl.top{align-items: flex-start; }
.detail--wrap .detail--cont .text-wrap dt{width:100px; font-weight:500;font-size:16px;color:#333;line-height:1.45; }
.detail--wrap .detail--cont .text-wrap dd{flex:1; font-weight:300;font-size:16px;color:#333;line-height:1.45; }
.detail--wrap .detail--cont .text-wrap dd.point{font-weight:600;text-decoration: underline; }

.detail--wrap .detail--cont .btn-area {display: flex; margin:0px 0 10px; gap:5px}
.detail--wrap .detail--cont .btn-area > * {flex:1; }
.detail--wrap .detail--cont .wish-btn {flex:0 0 50px; height:50px; background: url(/images/layout/like_off.png) 50% 50% no-repeat; border:1px solid #a3a5aa; border-radius:4px; box-sizing: border-box;  }
.detail--wrap .detail--cont .wish-btn:hover {background: url(/images/layout/like_on.png) 50% 50% no-repeat; }
/*
.wish-btn input[type=checkbox] {display:none;}
.wish-btn input[type=checkbox] + label{padding-left:0px;}
.wish-btn label {cursor:pointer;margin-right:0px;}
.wish-btn input[type=checkbox]+ label:before {display: none;}
.wish-btn .wish {display: inline-block;width:40px; height:40px; border:1px solid #717379; background: url(/images/layout/like_off.png) 50% 50% no-repeat;-webkit-transition: -webkit-transform .65s ease; transition: -webkit-transform .65s ease; transition: transform .65s ease; transition: transform .65s ease, -webkit-transform .65s ease; box-sizing: border-box;}
.wish-btn input[type=checkbox]:checked ~ .motion > .wish {background: url(/images/layout/like_on.png) 50% 50% no-repeat;-webkit-transition: -webkit-transform .65s ease; transition: -webkit-transform .65s ease; transition: transform .65s ease; transition: transform .65s ease, -webkit-transform .65s ease;}
*/

/*  valueBtn-wrap : increase decrease */
.valueBtn-wrap{display: inline-flex;align-items:center;justify-content:center; }
.value-button { display:flex;align-items:center;justify-content:center;border: 1px solid #ddd;margin: 0px;width:30px;height:30px;padding:8px 0;font-weight:400;font-size:16px; color:#333;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; box-sizing: border-box; cursor:pointer; }
.valueBtn-wrap #input-wrap {margin: 0px;padding: 0px;}
.valueBtn-wrap input.number {text-align: center;border: none;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;margin: 0px;font-weight:500;font-size:12px; width:40px;height: 30px;box-sizing: border-box;}
.valueBtn-wrap input[type=number]::-webkit-inner-spin-button,
.valueBtn-wrap input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0; }

.detail-title{font-weight:700;font-size:30px;color:#333;line-height:1.45;letter-spacing:-0.01em; margin-bottom:40px; padding-bottom: 10px; border-bottom:1px solid #666;}
.product-info{width:100%; max-width:1400px; text-align:left;margin:0px auto 60px; }
.product-info .info--img{text-align: center; }
.product-info .info--img img{max-width:100%;}
.product-info .sit_empty{font-weight:400;font-size:16px;color:#333;line-height:1.45;letter-spacing:-0.01em;}

#sit_use_list > h3, #sit_qa_list > h3{font-weight:400;font-size:16px;color:#333;line-height:1.45;letter-spacing:-0.01em;}

.list--category{border:1px solid #ddd;background:#fff; padding:20px; border-radius: 4px; box-sizing: border-box;}
.list--category ul{display:flex;flex-wrap: wrap;justify-content: center; gap:10px;}
.list--category a{position: relative;font-weight:500;font-size:16px;line-height:1;color:#666; padding-left:10px; margin-left:20px;}
.list--category a::before {content: ' ';position:absolute;  left:0; top:50%; transform:translateY(-50%);  display: inline-block;width:5px; height:5px;background:var(--concept-color); border-radius: 50%;}
.list--category li a.active{font-weight:700;color:var(--concept-color);}
.list--category li a:hover{font-weight:700;color:var(--concept-color);}

.tit-xlg{font-weight:700;font-size:40px;color:#333;line-height:1.3;letter-spacing:-0.01rem;}
.tit-lg{font-weight:700;font-size:30px;color:#333;line-height:1.45;letter-spacing:-0.01rem;}
.tit-s{font-weight:700;font-size:16px;color:#333;line-height:1.45;letter-spacing:-0.01rem;}

/* 상세정보 더보기 */
.show-more-container {width: 100%;text-align:center;max-height:1000px;overflow: hidden;position: relative;margin-bottom:60px; }
.show-more-container img{max-width:100%; }
.show-more-container.d-open {max-height: none;padding-bottom: 100px;}
.show-more-container:after {content: '';height: 150px;display: block;position: absolute; bottom: 0;left: 0;right: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
.show-more-toggle {position: absolute;left:50%; transform:translateX(-50%); bottom: 0;z-index: 1;border-radius:0px;background:rgba(255,255,255,0.5); border:1px solid var(--concept-color); padding:12px 40px 14px; font-weight:400;font-size:14px; line-height:1;letter-spacing:0em;color:var(--concept-color);display:inline-block;transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;}
.close-more-toggle{position: absolute;left:50%; transform:translateX(-50%); bottom: 0; z-index: 1;border-radius:0px;background:rgba(255,255,255,0.5); border:1px solid var(--concept-color); padding:12px 40px 14px; font-weight:400;font-size:14px; line-height:1;letter-spacing:0em;color:var(--concept-color);display:none; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;}
.d-open {display:inline-block;transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;}
.d-close{display:none;transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;}


.detail-info{width:100%; max-width:1400px; margin:0 auto 40px auto; text-align: left;}
.detail-info .detail-stit{ font-weight:700;font-size:20px;color:#333;line-height:1.45; margin-bottom:10px;}

/* table */
.table--detail {width:100%; }
.table--detail table{table-layout:fixed;width:100%; min-width:100%;border-top:1px solid #dfdfdf;border-collapse: collapse; border-spacing: 0;  word-wrap: break-word;word-break: keep-all; }
.table--detail th{text-align:left;padding:15px;vertical-align:middle;background: #f6f6f6;border-bottom:1px solid #dfdfdf;font-weight:400;font-size:15px;color: #333;line-height:1.5;letter-spacing:0rem; }
.table--detail td{text-align:left;padding:15px;vertical-align:middle;border-bottom:1px solid #dfdfdf;font-weight:300;font-size:15px;color: #333;line-height:1.5;letter-spacing:0rem;}
.table--detail .f-point{font-weight:700;font-size:15px;}
.table--detail.center th, .table--detail.center td{text-align:center;}
.table--detail td p{margin-top:8px;}
.table--detail td p:first-child{margin-top:0px;}  
.table--detail .wd-1{width:180px; }
.table--detail .wd-2{width:180px; }
.table--detail .wd-3{width:350px; }
.table--detail .wd-4{width:350px; }

.text-list{font-weight:300;font-size:15px;color:#333;letter-spacing:-0.01rem;line-height:1.4; text-indent:-14px; padding-left:14px;box-sizing: border-box;}

.npay_button{width:100%; margin:20px 0 10px; display:flex; gap:10px; }
.npay_text {width:100px; height:45px;background: url(/images/layout/npay_sp_text.png) 0% 50% no-repeat; background-size: 90px auto;}
.npay_btn_link{ flex:1; height:45px; border-color: #00c851; background: url(/images/layout/npay_sp_payment.png) 50% 50% no-repeat #00de5a; background-size: 63px auto;  }

.detail-stxt{margin:0; text-align: right;font-weight:300;font-size:13px;color:#333;letter-spacing:-0.01rem;line-height:1.2;  }

.rules-wrap{width:100%;  }
.rules-wrap .top-title{position: fixed;left:0; top:0; width:100%; height:50px; display:flex; justify-content: space-between; align-items: center; border-bottom:1px solid #666; padding:0 16px; box-sizing: border-box; }
.rules-wrap .top-title .t-title{font-weight:400;font-size:16px;color:#333;letter-spacing:0rem;line-height:1.2; }
.rules-wrap .top-title .t-close{width:16px; height:16px;background:url(/images/layout/i_close_15.png) 50% 50% no-repeat; }
.rules-wrap .contents{width:100%; height:calc(100vh - 50px);margin-top:50px; padding:20px 16px; box-sizing: border-box;}
.rules-wrap .contents > section{margin-bottom:20px;}
.rules-wrap .tit-b{font-weight:700;font-size:16px;color:#000;letter-spacing:0rem;line-height:1.4; margin-bottom:20px;}
.rules-wrap .contents > section > h3{font-weight:500;font-size:14px;color:#000;letter-spacing:0rem;line-height:1.4;margin-bottom:5px;}
.rules-wrap .contents > section > p{font-weight:300;font-size:13px;color:#333;letter-spacing:0rem;line-height:1.4;margin-bottom:5px;}

.rules-wrap .contents{overflow: auto; 
	scrollbar-arrow-color: #fff; /* IE 6+ scroll styles */
	scrollbar-face-color: #999;
	scrollbar-shadow-color: #333;
	scrollbar-highlight-color: #000;
	scrollbar-darkshadow-color: #000;
	scrollbar-track-color: #ddd; /* Last IE 6+ scroll styles */
	scrollbar-color: #999 #ddd; /* Firefox 64+ */
	scrollbar-width: thin; /* Firefox 64+ */
  }
  
  .rules-wrap .contents::-webkit-scrollbar {width: 6px;height: 6px;}
  .rules-wrap .contents::-webkit-scrollbar-track {background: padding-box #ddd;border-radius: 4px;}
  .rules-wrap .contents::-webkit-scrollbar-thumb {background: padding-box #999;border-radius: 4px;}
  .rules-wrap .contents::-webkit-scrollbar-thumb:hover { background: padding-box #aaa;}
  .rules-wrap .contents::-webkit-scrollbar-thumb:active {background: padding-box #333;box-shadow: inset 0 0 3px rgba(192, 192, 192, 0.5);}



@media all and (max-width:1024px) {   
	.table--detail .wd-1{width:120px; }
	.table--detail .wd-2{width:160px; }
	.table--detail .wd-3{width:300px; }
	.table--detail .wd-4{width:300px; }

}


@media all and (max-width:768px) {   
	.table--detail .wd-1{width:100px; }
	.table--detail .wd-2{width:150px; }
	.table--detail .wd-3{width:35%; }
	.table--detail .wd-4{width:35%; }

	.table--detail th{padding:10px 15px;font-size:14px; }
	.table--detail td{padding:10px 15px;font-size:14px; }
	.table--detail .f-point{font-size:14px;}
	.text-list{font-size:14px;text-indent:-14px; padding-left:14px;}

}

@media all and (max-width:540px) {   
	.detail-info{ margin:0 auto 30px auto; }

	.table--detail .wd-1{width:70px; }
	.table--detail .wd-2{width:30%; }
	.table--detail .wd-3{width:50%; }
	.table--detail .wd-4{width:30%; }

	.table--detail th{padding:10px 5px;font-size:13px; }
	.table--detail td{padding:10px 5px;font-size:13px; }
	.table--detail .f-point{font-size:13px;}
	.text-list{font-size:13px;text-indent:-14px; padding-left:14px;}

}


