legend, .blind, caption{position: absolute;top: 0;height: 0;font-size: 0;line-height: 0;}

body { width:100%; height:100%; position:relative;}
.design-guide-area { padding: 0 80px 80px;  width:100%; height:auto; margin:0 auto 300px; overflow:hidden; }
.design-guide-area .title-info { border-bottom: 1px solid #000; padding-bottom: 16.5px; margin: 80px 0 13.5px; }
.design-guide-area .title-info > h4 { font-family: 'Noto Sans KR'; font-size: 36px; font-weight: 500; line-height: 1.5; letter-spacing: -1.08px; text-align: left; color: #4a4545; }
.design-guide-area > h5 { font-family: 'Noto Sans KR'; font-size: 20px; margin: 0 0 16px; }

/*========== [01] 폰트 시작 ==========*/
.font-style-area { width:100%; height:auto; display:inline-block; margin: 32.5px 0 0; }
.font-style-area li { font-size: 20px; line-height: 1.45; letter-spacing: -1px; text-align: left; color: #4a4545; margin: 0 0 16px; }
/*영문 폰트*/
.font-style-area .eng { float: left; width: 476px; }
.font-style-area .eng li { font-family: 'Lato'; }
.font-style-area .eng li.lato-light { font-weight: 400; }
.font-style-area .eng li.lato-bold { font-weight: 700; }
.font-style-area .eng li.lato-black { font-weight: 900; }
/*한글 폰트*/
.font-style-area .kor { float: left; width: 476px; }
.font-style-area .kor li { font-family: 'Noto Sans KR'; }
.font-style-area .kor li.noto-light { font-weight: 300; }
.font-style-area .kor li.noto-regular { font-weight: 400; }
.font-style-area .kor li.noto-medium { font-weight: 500; }
.font-style-area .kor li.noto-bold { font-weight: 700; }
.font-style-area .kor li.noto-black { font-weight: 900; }
.guide-text { display: block; font-size: 13px; font-weight: 300; line-height: 1.19; letter-spacing: -0.8px; text-align: left; color: #4a4545; margin-top: 15px; }
/*========== [01] 폰트 끝 ==========*/


/*========== [02] 버튼 시작 ==========*/
.btn-style-area h5 { margin-top: 60px; }
.btn-style-area { display:inline-block; width:1600px; padding-bottom:60px; overflow-x:scroll; }
.btn-style-area > div { display:inline-block; width:6000px;}
.btn-style-area .guide-text:first-child { font-size: 16px; }

/*버튼 종류*/
/*------modified 2019-09-24 박상준 / a 태그 호환성문제 해결 시작*/
.btn-small { display: inline-block; width: 180px; height: 34px; border: solid 1px #4a4545; background-color: #ffffff; font-size: 12px; font-weight: 400; letter-spacing: -0.65px; text-align: center; color: #4a4545; line-height: 32px;  transition:all 0.5s; }
.btn-small + .btn-small { margin-left: 3px; }
.btn-small.type1 { width: 100px; }
.btn-small.type2 { width: 46px; }
.btn-small.type3 { width: 92px; }
.btn-medium { display: inline-block; width: 210px; height: 44px; border: solid 1px #4a4545; background-color: #ffffff; font-size: 13px; font-weight: 500; letter-spacing: -0.65px; text-align: center; color: #4a4545; line-height: 42px; transition:all 0.5s; }
.btn-medium + .btn-medium { margin-left: 14px; }
.btn-medium2 { display: inline-block; width: 210px; height: 50px; border: solid 1px #4a4545; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing: -0.65px; text-align: center; color: #4a4545; line-height: 48px;  transition:all 0.5s; }
.btn-medium2 + .btn-medium2 { margin-left: 14px; }
.btn-large { display: inline-block; width: 250px; height: 54px; border: solid 1px #4a4545; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing: -0.65px; text-align: center; color: #4a4545; line-height: 52px;  transition:all 0.5s; }
.btn-large + .btn-large { margin-left: 14px; }
.btn-popup { display: inline-block; width: 430px; height: 56px; border: solid 1px #4a4545; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing: -0.65px; text-align: center; color: #4a4545; line-height: 54px;  transition:all 0.5s; }
/*------modified 2019-09-24 박상준 / a 태그 호환성문제 해결 끝*/

/*버튼 색상*/
.btn-small.disabled, .btn-medium.disabled, .btn-medium2.disabled, .btn-large.disabled, .btn-popup.disabled { border: solid 1px #f6f6f6; background-color: #f6f6f6; color: #868686; cursor:no-drop;}
.btn-small.white, .btn-medium.white, .btn-medium2.white, .btn-large.white, .btn-popup.white { border: solid 1px #ffffff; background-color: #ffffff; color: #4a4545; transition:all 0.5s;}
.btn-small.black, .btn-medium.black, .btn-medium2.black, .btn-large.black, .btn-popup.black { border: solid 1px #4a4545; background-color: #4a4545; color: #ffffff; transition:all 0.5s;}
.btn-small.line-gray, .btn-medium.line-gray, .btn-medium2.line-gray, .btn-large.line-gray, .btn-popup.line-gray { border: solid 1px #e6e6e6; background-color: #ffffff; color: #868686; transition:all 0.5s;}
.btn-small.red, .btn-medium.red, .btn-medium2.red, .btn-large.red, .btn-popup.red { border: solid 1px #ff5a5c; background-color: #ff5a5c; color: #fff; transition:all 0.5s;}
.btn-small.line-red, .btn-medium.line-red, .btn-medium2.line-red, .btn-large.line-red, .btn-popup.line-red { border: solid 1px #ff5a5c; background-color: #fff; color: #ff5a5c; transition:all 0.5s;}
.btn-small.blue, .btn-medium.blue, .btn-medium2.blue, .btn-large.blue, .btn-popup.blue { border: solid 1px blue; background-color: blue; color: #fff; transition:all 0.5s;}
.btn-small.blue2, .btn-medium.blue2, .btn-medium2.blue2, .btn-large.blue2, .btn-popup.blue2 { border: solid 1px blue; background-color: #007bff; color: #fff; transition:all 0.5s;}
.btn-small.orange, .btn-medium.orange, .btn-medium2.orange, .btn-large.orange, .btn-popup.orange { border: solid 1px orange; background-color: orange; color: #fff; transition:all 0.5s;}
.btn-small.green, .btn-medium.green, .btn-medium2.green, .btn-large.green, .btn-popup.green { border: solid 1px #31b2ae; background-color: #31b2ae; color: #fff; transition:all 0.5s;}
.btn-small.line-green, .btn-medium.line-green, .btn-medium2.line-green, .btn-large.line-green, .btn-popup.line-green { border: solid 1px #31b2ae; background-color: #fff; color: #31b2ae; transition:all 0.5s;}

.btn-small.flexible, .btn-medium.flexible, .btn-medium2.flexible, .btn-large.flexible, .btn-popup.flexible { width: 100%; }
/*버튼 hover효과*/
.btn-small:hover, .btn-medium:hover, .btn-medium2:hover, .btn-large:hover, .btn-popup:hover { border: solid 1px #4a4545; background-color: #4a4545; color: #fff; }
.btn-small.disabled:hover, .btn-medium.disabled:hover, .btn-medium2.disabled:hover, .btn-large.disabled:hover, .btn-popup.disabled:hover { border: solid 1px #f6f6f6; background-color: #f6f6f6; color:#868686; }
.btn-small.white:hover, .btn-medium.white:hover, .btn-medium2.white:hover, .btn-large.white:hover, .btn-popup.white:hover { border: solid 1px #fff; background-color: transparent; color: #fff; }
.btn-small.black:hover, .btn-medium.black:hover, .btn-medium2.black:hover, .btn-large.black:hover, .btn-popup.black:hover { border: solid 1px #4a4545; background-color: #fff; color: #4a4545; }
.btn-small.line-gray:hover, .btn-medium.line-gray:hover, .btn-medium2.line-gray:hover, .btn-large.line-gray:hover, .btn-popup.line-gray:hover { border: solid 1px #e6e6e6; background-color: #f6f6f6; color:#767676;  }
.btn-small.red:hover, .btn-medium.red:hover, .btn-medium2.red:hover, .btn-large.red:hover, .btn-popup.red:hover { border: solid 1px #ff5a5c; background-color: #fff; color: #ff5a5c; }
.btn-small.line-red:hover, .btn-medium.line-red:hover, .btn-medium2.line-red:hover, .btn-large.line-red:hover, .btn-popup.line-red:hover { border: solid 1px #ff5a5c; background-color: #ff5a5c; color: #fff; }
.btn-small.blue:hover, .btn-medium.blue:hover, .btn-medium2.blue:hover, .btn-large.blue:hover, .btn-popup.blue:hover { border: solid 1px blue; background-color: #fff; color: blue; }
.btn-small.orange:hover, .btn-medium.orange:hover, .btn-medium2.orange:hover, .btn-large.orange:hover, .btn-popup.orange:hover { border: solid 1px orange; background-color: #fff; color: orange; }
.btn-small.green:hover, .btn-medium.green:hover, .btn-medium2.green:hover, .btn-large.green:hover, .btn-popup.green:hover { border: solid 1px #31b2ae; background-color: #fff; color: #31b2ae; }
.btn-small.line-green:hover, .btn-medium.line-green:hover, .btn-medium2.line-green:hover, .btn-large.line-green:hover, .btn-popup.line-green:hover { border: solid 1px #31b2ae; background-color: #31b2ae; color: #31b2ae; }

/*버튼 그룹화*/
.btn-group-type1 { display:inline-block; width:100%; height:100%; margin:32px auto 0; }
.btn-group-type1 button.btn-popup { float:left!important; width:48%!important; margin:1%!important }
.btn-group-type1 button.btn-popup+.btn-popup { }
/*========== [02] 버튼 끝 ==========*/


/*========== [03] 체크박스/라디오 시작 ==========*/
.chk-box-radio-box-area { padding-top: 45px; }
.chk-box-radio-box-area .chk { float: left; width: 200px;}
.chk-box-radio-box-area .radio { float: left; }
/*체크박스*/
input[type="checkbox"] { display: inline-block; width: 20px; height: 20px; vertical-align: middle; -webkit-appearance: none; margin: -3px 0 0; padding: 0; cursor: pointer; border-radius: 2px; border: 1px solid #d6d6d6; background: #fff; }
input[type="checkbox"]:checked { background: #4a4545 url(/image/web/common/icon_check.png) center center no-repeat; background-size: contain; border: 0; }
input[type="checkbox"] + input[type="checkbox"] { margin-left: 16px; }
/*라디오 2019-10-04 박상준 / css 수정 */
input[type="radio"] { position:relative; display: inline-block; width: 20px; height: 20px; margin: -2px 8px 0 0; vertical-align: middle; text-align: center; -webkit-appearance: none; cursor: pointer; border-radius: 50%; background: #fff; border: 1px solid #d6d6d6; }
input[type="radio"]:checked { background: #fff; border: 1px solid #d6d6d6; }
input[type="radio"]:checked:before { content: ''; display: inline-block; width: 10px; height: 10px; background: #ff5a5c; border-radius: 50%; vertical-align: middle; margin-top: -5px; position:absolute; top:50%; left:50%; margin-left:-5px; }
input[type="radio"] + input[type="radio"] { margin-left: 16px; }
/*========== [03] 체크박스/라디오 끝 ==========*/


/*========== [04] 페이지네이트 시작 ==========*/
.paginate-area { margin: 40px 0; text-align: center; }
.paginate-area:after { content: ''; display: block; clear: both; }
.paginate-area ul { display: inline-block; }
.paginate-area ul li { float: left; margin: 0 1px; }
.paginate-area ul li a { display: inline-block; width: 28px; height: 28px; line-height: 26px; text-align: center; padding: 0; vertical-align: middle; text-decoration: none; transition: all 0.5s;font-size: 13px; color: #999; font-weight: 400; }
.paginate-area ul .dir { width: 28px; height: 28px; padding: 0 2px; }
.paginate-area ul .dir a { display: inline-block; width: 24px; height: 24px; margin: 0; }
.paginate-area ul .dir.prev a { background: url(/image/web/common/pagination-prev.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.next a { background: url(/image/web/common/pagination-next.png) center center no-repeat; background-size: contain; }
.paginate-area ul .dir.start a { background: url(/image/web/common/pagination-start.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.end a { background: url(/image/web/common/pagination-end.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.prev a:hover { background:#f6f6f6 url(/image/web/common/pagination-prev.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.next a:hover { background:#f6f6f6 url(/image/web/common/pagination-next.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.start a:hover { background:#f6f6f6 url(/image/web/common/pagination-start.png) center center no-repeat; background-size: contain;}
.paginate-area ul .dir.end a:hover { background:#f6f6f6 url(/image/web/common/pagination-end.png) center center no-repeat; background-size: contain;}
.paginate-area ul li.on a { font-weight: 400; background:#ff5a5c; color: #fff; border: 1px solid#ff5a5c; border-radius: 2px; }
.paginate-area ul li.on a:hover { background:#ff5a5c; color: #fff; border: 1px solid#ff5a5c; }
.paginate-area ul li a:hover { background: #f6f6f6; }
/*========== [04] 페이지네이트 끝 ==========*/

/*========== [05] 셀렉트/인풋 시작 ==========*/
.select-input-area { box-sizing:border-box; width:100%; height:auto; display:inline-block;}
.select-input-area .guide-text { margin-bottom: 40px;}
.select-input-area ul.input-box-area { margin: 25px 0 0; }
.select-input-area ul.input-box-area li { float: left; display: inline-block; width: 200px; margin: 27px 60px 0 0; }
/*셀렉트박스*/
.select-box-area { border: 1px solid #e6e6e6; padding:4px 12px; display:block; width: 200px;height:100%; position:relative; }
.select-box-area > .select-slider { width: 100%; cursor:pointer; display: inline-block; position: relative; background: transparent; }
.select-box-area > .select-slider > span { font-size: 13px; color: #4a4545;}
.select-box-area > .select-slider > i { position: absolute; top: 50%; margin-top: -10px;right: -4px; width: 20px; height: 20px;  background: url(/image/web/common/icon_arrow_select_down.png) center center no-repeat; background-size: contain; }
.select-box-area > .select-slider.on > i { background: url(/image/web/common/icon_arrow_select_up.png) center center no-repeat; background-size: contain;}
.select-box-area > #select-type-01 { display: none; padding: 0 16px; }
.select-box-area .actual-option { position: absolute; top: calc(100% - 1px); left: 0; display:none; width: 100%;max-height: 120px;  box-sizing: border-box; border: 1px solid #e6e6e6; font-size: 13px;overflow-y: scroll; background: #fff; z-index: 10; cursor: pointer;}
.select-box-area .actual-option li { position: relative; float: left; width:100%;clear: both; padding: 8px 16px; transition: all 0.5s; color: #868686; }
.select-box-area .actual-option li:hover { color: #4a4545; background:#f6f6f6;}
.select-box-area label{width: 100%;}
.select-box-area label.on ~ .actual-option { display: block; }
/*인풋박스*/
.input { width: 300px; padding: 7px 16px 6px; border: solid 1px #e6e6e6; background-color: #ffffff; font-size: 12px; letter-spacing: -0.65px; color: #4a4545; }
input[type='text'].input::placeholder { color: #4a4545; }
input[type='text'].input::-webkit-input-placeholder { color: #b6b6b6; }
input[type='text'].input::-webkit-moz-placeholder { color: #4a4545; }
input[type='text'].input:-moz-placeholder { color: #4a4545; }
input[type='text'].input::-moz-placeholder { color: #4a4545; }
input[type='text'].input:-ms-input-placeholder { color: #4a4545; }
textarea.input::placeholder { color: #4a4545; }
textarea.input::-webkit-input-placeholder { color: #b6b6b6; }
textarea.input::-webkit-moz-placeholder { color: #4a4545; }
textarea.input:-moz-placeholder { color: #4a4545; }
textarea.input::-moz-placeholder { color: #4a4545; }
textarea.input:-ms-input-placeholder { color: #4a4545; }
.input[disabled] { background: #f6f6f6; border: 0; cursor:not-allowed; color:#868686;}
.input.active, .input:focus { border-color: #46535f; }
.input.flexible { width: 100%; }
/*========== [05] 셀렉트/인풋 끝 ==========*/


/*========== [06] 캘랜더 시작 ==========*/
.calendar-area { width:100%; height:auto; display:inline-block;}
.calendar-area ul.calendar-box-area { margin: 25px 0 0; }
.calendar-area ul.calendar-box-area li { float: left; display: inline-block; width: 300px; margin: 27px 60px 0 0; }
.input-calendar { width: 200px; padding: 8px 12px; border: solid 1px #e6e6e6; background-color: #ffffff;
position:relative; font-size: 13px; letter-spacing: -0.65px; color: #4a4545; }
input[type='text'].input-calendar::placeholder { color: #4a4545; }
input[type='text'].input-calendar::-webkit-input-placeholder { color: #b6b6b6; }
input[type='text'].input-calendar::-webkit-moz-placeholder { color: #4a4545; }
input[type='text'].input-calendar:-moz-placeholder { color: #4a4545; }
input[type='text'].input-calendar::-moz-placeholder { color: #4a4545; }
input[type='text'].input-calendar:-ms-input-placeholder { color: #4a4545; }
.input-calendar[disabled] { background: #f6f6f6; border: 0; cursor:not-allowed; color:#868686;}
.input-calendar.active, .input-calendar:focus { border-color: #46535f; }
.input-calendar.flexible { width: 100%; }
.input-calendar.icon-img { }
.input-calendar.icon-img { padding-left:36px;background:#ffffff url(/image/web/common/icon_calendar.png) 6px center no-repeat; background-size:24px 24px;}
.input-calendar.icon-img[disabled] { background:#f6f6f6 url(/image/web/common/icon_calendar.png) 6px center no-repeat;background-size:24px 24px;}
/*flatpickr 커스텀*/
.flatpickr-calendar{width: 260px!important;padding: 20px 20px 10px 20px!important;margin-left:-40px!important; margin-top: 15px!important; border: 1px solid #d6d6d6!important;border-radius: 4px!important;}
.flatpickr-weekdays .flatpickr-weekdaycontainer span.flatpickr-weekday{font-size: 12px; color: #b6b6b6; font-weight: 400;}
.flatpickr-current-month { padding:0 0 0 0!important;}
.dayContainer{min-width: 100%!important; max-width: 100%!important;width: 100%!important;}
.dayContainer .flatpickr-day{width: 28px!important;height: 28px!important; font-size:12px;max-width:28px!important;}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month{top: 15px!important;left: 15px!important;}
.flatpickr-calendar .flatpickr-months .flatpickr-next-month{top: 15px!important;right: 15px!important;}
.flatpickr-next-month > svg { fill:#b6b6b6!important; }
.flatpickr-prev-month > svg { fill:#b6b6b6!important; }
.flatpickr-next-month:hover > svg { fill: #4a4545!important;}
.flatpickr-prev-month:hover > svg { fill: #4a4545!important;}
.flatpickr-calendar.arrowTop:before{border-bottom-color:#d6d6d6!important;}
.flatpickr-calendar.arrowBottom:before{border-top-color:#d6d6d6!important;}
.flatpickr-calendar:before, .flatpickr-calendar:after{left: 50%!important;}
.flatpickr-innerContainer .flatpickr-rContainer{width: 100%;}
.numInputWrapper{width: auto;}
.numInputWrapper span.arrowUp{display: none;}
.flatpickr-current-month input.cur-year{width: 40px; font-size: 0.8125rem!important;font-weight: 500!important;}
.flatpickr-current-month span.cur-month{font-size: 0.8125rem;font-weight: 500!important;}
.flatpickr-current-month .numInputWrapper{width: auto!important;}
.flatpickr-days{width: 100%!important;}
.flatpickr-day {line-height:28px!important;}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{opacity: 0!important; visibility: hidden!important;}
.flatpickr-day.today{border:none!important; border-radius:50%!important;background:#f6f6f6!important; color: #4a4545!important;}
.flatpickr-day.today:hover{border:none!important; border-radius:50%!important;background:#f6f6f6!important; color: #4a4545!important;}
.flatpickr-day:hover { border:none!important; border-radius:50%!important;background:#f6f6f6!important;}
.flatpickr-day.selected { background:#299BFF!important;}
.flatpickr-day.selected:hover { background:#299BFF!important;}
.flatpickr-days .btn_small ~ .btn_small{display: none;}
.flatpickr-months .flatpickr-prev-month.disabled,
.flatpickr-months .flatpickr-next-month.disabled{display: block!important; opacity: .3!important;}
/*========== [06] 캘랜더 끝 ==========*/


/*========== [07] 모달레이어팝업 시작 ==========*/
.modal-area { width:100%; height:auto; display:inline-block;}
.modal-area > button { margin:60px 0;}
.modal-layer-area { display:none; background:#fff; overflow-y:auto; max-height:720px; min-width:360px;position:relative; margin:0 auto; z-index:100; padding:40px 24px 24px; box-shadow:0px 1px 5px rgba(0,0,0,0.2); }
.modal-layer-area button.b-close.modal-close { position:absolute; top:16px; right:16px;width:32px; height:32px;background:url(/image/web/common/icon_modal_close_n.png) center center no-repeat; background-size: contain; }
.modal-layer-area button.b-close.modal-close:hover {background:url(/image/web/common/icon_modal_close_s.png) center center no-repeat; background-size: contain; }
.modal-layer-area .modal-content { width:100%; height:auto; position:relative; text-align:center; margin:0 auto;}
.modal-layer-area .modal-content > h5 { font-size:20px; font-weight:500; color: #4a4545; margin-bottom:12px;}
.modal-layer-area .modal-content > p { font-size:12px; color:#868686; }
/*========== [07] 모달레이어팝업 끝 ==========*/


/*========== [08] 상품타입 시작 ==========*/
.product-area { width:100%; height:auto; display:inline-block;}
.product-area > .guide-text { margin-bottom:40px;}
.product-area > .guide-text2 { margin-bottom:16px; margin-top:40px; font-weight:bold; color:blue;}
.product-box { width:100%; height:auto; position:relative;}
.product-box > ul {display:inline-block; width:100%; height:auto;}
.product-box > ul li.slider { display:block; float:left; width:200px; height:auto; }
.product-box > ul li.slider:first-child { margin-left:0!important;}
.product-box > ul li.slider > .product-img { display:block; width:100%; height:100%;}
.product-box > ul li.slider > .product-img > a { display:block; width:100%; height:0; padding-bottom:100%;position:relative; transition:all 0.5s;  overflow:hidden;  overflow:hidden;}
.product-box > ul li.slider > .product-img > a > img { transform:scale(1.0); transition:all 0.5s;position:absolute; top:0; left:0; width:100%; height:100%;}
.product-box > ul li.slider > .product-img > a:hover img { transform:scale(1.05);}
.product-box > ul li.slider > .product-ect { display:block; width:100%; height:auto; margin-top:8px;}
.product-box > ul li.slider > .product-ect > ul  { width:100%; height:auto;}
.product-box > ul li.slider > .product-ect > ul > li.brand { float:left; display:block; font-size:14px;color: #4a4545;}
.product-box > ul li.slider > .product-ect > ul > li.delivery { float:right; display:block;padding:2px 6px; border:1px solid #758baf; color:#758baf; font-size:10px; margin-top:1px;}
.product-box > ul li.slider > .product-ect > ul > li.shop { float:right;width:24px; height:24px; display:block;}
.product-box > ul li.slider > .product-ect > ul > li.shop > a { display:block; width:100%; height:100%;background:url(/image/web/common/icon_shop.png) center center no-repeat;background-size:contain; text-indent:-9999px;}
.product-box > ul li.slider > .product-ect > ul > li.like { float:right;width:24px; height:24px; display:block;}
.product-box > ul li.slider > .product-ect > ul > li.like > a { display:block; width:100%; height:100%; transition:all 0.5s;background:url(/image/web/common/icon_like_n.png) center center no-repeat;background-size:contain; text-indent:-9999px; transform:scale(1.0);}
.product-box > ul li.slider > .product-ect > ul > li.like > a:hover { transform:scale(1.08);background:url(/image/web/common/icon_like_s.png) center center no-repeat;background-size:contain;}
.product-box > ul li.slider > .product-ect > ul > li.like > a.on {background:url(/image/web/common/icon_like_s.png) center center no-repeat;background-size:contain;}
.product-box > ul li.slider > .product-title { display:block; width:100%; height:auto;margin-top:8px;}
.product-box > ul li.slider > .product-title > a {display:block;font-size:14px; color: #4a4545;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:95%;}
.product-box > ul li.slider > .product-title > a:hover { text-decoration:underline;}
.product-box > ul li.slider > .product-title > p {display:block;font-size:12px; color:#868686;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:95%; margin-top:4px;}
.product-box > ul li.slider > .product-price { display:block; width:100%; height:auto;margin-top:8px;}
.product-box > ul li.slider > .product-price > ul {width:100%; height:auto; }
.product-box > ul li.slider > .product-price > ul > li { display:block; float:left;}
.product-box > ul li.slider > .product-price > ul > li.discount { font-size:18px;font-weight:800; color:#ff5a5c; font-family:'Lato'; margin-right:12px;}
.product-box > ul li.slider > .product-price > ul > li.price { font-size:18px;font-weight:800; color: #4a4545; font-family:'Lato';}
.product-box  ul li.slider > .product-price > ul > li.origin-price { font-size:13px;color:#b6b6b6; font-family:'Lato'; text-decoration:line-through; margin-left:6px; margin-top:5px;}
/*product-box type-a 일때*/
.product-box.type-a { }
.product-box.type-a .like { display:none!important;}
.product-box.type-a .shop { display:none!important;}
/*product-box type-b 일때*/
.product-box.type-b .delivery { display:none!important;}
.product-box.type-b .detail-info { display:none!important;}
.product-box.type-b .discount { display:none!important;}
.product-box.type-b .origin-price { display:none!important;}
/*product-box type-c 일때*/
.product-box.type-c .like { display:none!important;}
.product-box.type-c .shop { display:none!important;}
.product-box.type-c .delivery { display:none!important;}
.product-box.type-c .detail-info { display:none!important;}
.product-box.type-c .discount { display:none!important;}
.product-box.type-c .origin-price { display:none!important;}
/*product-box 사용예제 부모 클래스명 test-box*/
.test-box { width:1080px; height:auto; background:#b5e1ea; }
.test-box > .product-box > ul > li { display:block; float:left; width:calc((100% - 72px)/4); height:auto;margin-left:24px; }
/*product-box type-r 일때*/
.product-box.type-r { width:100%; height:auto; position:relative;}
.product-box.type-r > ul  {display:inline-block; width:100%; height:auto;}
.product-box.type-r > ul li.slider { display:block; float:left; width:200px; height:auto; margin-left:24px;}
.product-box.type-r > ul li:first-child { margin-left:0;}
.product-box.type-r > ul li.slider > .product-img { display:block; width:100%; height:100%;}
.product-box.type-r > ul li.slider > .product-img > a { display:block; width:100%; height:0; padding-bottom:100%;position:relative; transition:all 0.5s;  overflow:hidden;  overflow:hidden;}
.product-box.type-r > ul li.slider > .product-img > a > img { transform:scale(1.0); transition:all 0.5s;position:absolute; top:0; left:0; width:100%; height:100%; }
.product-box.type-r > ul li.slider > .product-img > a:hover img { transform:scale(1.05);}
.product-box.type-r > ul li.slider > .product-ect { display:block; width:100%; height:auto; margin-top:8px;}
.product-box.type-r > ul li.slider > .product-ect > ul  { width:100%; height:auto;}
.product-box.type-r > ul li.slider > .product-ect > ul > li.score {float:left; display:block;}
.product-box.type-r > ul li.slider > .product-ect > ul > li.score > ul { width:100%;display:inline-block; position:relative;}
.product-box.type-r > ul li.slider > .product-ect > ul > li.score > ul > li {width:12px; height:12px; display:block; float:left;background:url(/image/web/common/icon_star_n.png) center center no-repeat; background-size:contain;}
.product-box.type-r > ul li.slider > .product-ect > ul > li.score > ul > li.on {background:url(/image/web/common/icon_star_s.png) center center no-repeat; background-size:contain;}
.product-box.type-r > ul li.slider > .product-ect > ul > li.user-id { float:left; display:inline-block;color:#b6b6b6; font-size:12px; margin-left:8px; margin-top:4px;}
.product-box.type-r > ul li.slider > .product-ect > ul > li.date { float:right; display:inline-block;color:#b6b6b6; font-size:12px; margin-left:8px; margin-top:4px;}
.product-box.type-r > ul li.slider > .product-title { display:block; width:100%; height:auto;margin-top:8px;}
.product-box.type-r > ul li.slider > .product-title > a {display:-webkit-box;font-size:13px; color: #4a4545; line-height:1.8em; max-height: 3.6em; white-space:normal;text-overflow:ellipsis; overflow:hidden; width:95%; -webkit-line-clamp:2;  -webkit-box-orient:vertical; }
.product-box.type-r > ul li.slider > .product-title > a:hover { text-decoration:underline;}
.product-box.type-r > ul li.slider > .product-title > p {display:block;font-size:11px; color:#868686;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:95%; margin-top:4px;}
/*product-box type-d 일때*/
.product-box.type-d { width:100%; height:auto; position:relative;font-size:0!important; letter-spacing:0!important; word-spacing:0!important;}
.product-box.type-d > ul {display:inline-block; width:100%; height:auto;  }
.product-box.type-d > ul:first-child li.slider { /*border-top:1px solid #e6e6e6*/}
.product-box.type-d > ul li.slider { display:block; float:left; width:100%; height:auto; padding:12px 0; border-bottom:1px solid #e6e6e6;}
.product-box.type-d > ul li.slider:first-child { margin-left:0!important;}
.product-box.type-d > ul li.slider > .product-img { float:left; display:block; width:160px; height:160px;margin-right:24px;}
.product-box.type-d > ul li.slider > .product-info {float:left; width:calc(100% - 184px); height:auto; display:block;}
.product-box.type-d > ul li.slider > .product-img > a { display:block; width:100%;height:0;padding-bottom:100%; position:relative; transition:all 0.5s;  overflow:hidden;  overflow:hidden;}
.product-box.type-d > ul li.slider > .product-img > a > img { transform:scale(1.0); transition:all 0.5s;position:absolute; top:0; left:0; width:100%; height:100%;}
.product-box.type-d > ul li.slider > .product-img > a:hover img { transform:scale(1.05);}
.product-box.type-d > ul li.slider > .product-info .product-title { float:left; display:block; width:60%;}
.product-box.type-d > ul li.slider > .product-info .product-title .brand { font-size:14px; display:block;margin-top:8px; }
/*.product-box.type-d > ul li.slider > .product-info .product-title > a { display:inline-block; font-size:14px; color: #4a4545;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:95%; margin-top:8px;}*/
.product-box.type-d > ul li.slider > .product-info .product-title p.detail-info {display:block;font-size:12px; color:#868686;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:95%; margin-top:4px;}
.product-box.type-d > ul li.slider > .product-info .product-title .product-price { width:100%; height:auto; text-align:left;}
.product-box.type-d > ul li.slider > .product-info .product-title .product-price > ul { width:100%; height:auto;display:inline-block;}
.product-box.type-d > ul li.slider > .product-info .product-title .product-price > ul > .price {font-size:18px; margin-top:16px;font-weight:800; color: #4a4545; font-family:'Lato';}
.product-box.type-d > ul li.slider > .product-info .product-title .product-price > ul > .delivery { float:left;display:block; padding:2px 6px; border:1px solid #758baf; color:#758baf; font-size:10px; margin-top:8px;}
.product-box.type-d > ul li.slider > .product-info .product-ect { float:right; display:block; width:40%;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul { width:100%; height:auto; display:inline-block;text-align:left;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.shop { display:inline-block; width:100%; height:auto;float:right;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.shop > a { float:right;display:inline-block; font-size:12px; color:#868686; line-height:24px;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.shop > a:hover { text-decoration:underline;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.shop > a > span { float:left;width:24px; height:24px; display:block; text-indent:-9999px; background:url(/image/web/common/icon_shop.png) center center no-repeat;background-size:contain;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul { display:inline-block; width:100%; float:right;margin-right:12px; margin-top:24px; }
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score { float:right; display:block;margin-top:40px;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score > span {float:right; line-height:24px; font-size:12px; color:#868686; margin-left:8px;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score > ul {display:inline-block; position:relative; }
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score > ul > li {width:16px; height:16px; display:block; float:left; margin-top:4px;background:url(/image/web/common/icon_star_n.png) center center no-repeat; background-size:contain;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.score > ul > li.on {background:url(/image/web/common/icon_star_s.png) center center no-repeat; background-size:contain;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like { float:right; display:inline-block;margin-top:40px; margin-left:24px; }
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like > a { float:left; display:block; width:24px; height:24px;transition:all 0.5s; background:url(/image/web/common/icon_like_n.png) center center no-repeat;background-size:contain; text-indent:-9999px; transform:scale(1.0);}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like > a:hover { transform:scale(1.08);background:url(/image/web/common/icon_like_s.png) center center no-repeat;background-size:contain;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like > a.on {background:url(/image/web/common/icon_like_s.png) center center no-repeat;background-size:contain;}
.product-box.type-d > ul li.slider > .product-info .product-ect > ul li.like > span { float:left; line-height:24px;font-size:12px; color:#868686; margin-left:4px;}
/*========== [09] 상품타입 끝 ==========*/


/*========== [10] 첨부하기 시작 ==========*/
/*2019-10-04 박상준 / 폰트 정렬 오류 수정 */
.board-write-area ul > li > label { display: block; font-size: 12px; color: #4a4545; margin: 24px 0 5px; text-align:left; }
.board-write-area .btn-group-area { margin-top: 40px; }
/*사진첨부*/
.img-upload-area { border-bottom: 1px solid #e6e6e6; padding-bottom: 24px; }
.img-upload-area > div + div { margin-top: 8px; }
.img-upload-area > div > label { display:block; float:left; margin:0 0 0 0; cursor:pointer;}
.img-upload-area > div > input#file-upload { display:none;}
.img-upload-area { border-bottom: 1px solid #e6e6e6; padding-bottom: 24px; }
.img-upload-area > div + div { margin-top: 8px; }
/*------modified 2019-09-24 박상준 / a 태그 호환성문제 해결 시작*/
.img-upload-area .btn-small { height: 35px; line-height:33px!important;}
/*------modified 2019-09-24 박상준 / a 태그 호환성문제 해결 끝*/
.img-upload-area .btn-plus { width: 35px; height: 35px; border: solid 1px #d6d6d6; margin-left: 8px; transition:all 0.5s;}
.img-upload-area .btn-plus span { display: inline-block; width: 23px; height: 23px; margin: 0;vertical-align: middle; background: url(/image/web/common/icon_plus.png) center center no-repeat;background-size: contain; text-indent: -5000px; }
.img-upload-area .btn-minus { width: 35px; height: 35px; border: solid 1px #d6d6d6; margin-left: 8px; transition:all 0.5s;}
.img-upload-area .btn-minus span { display: inline-block; width: 23px; height: 23px; margin: 0;vertical-align: middle; background: url(/image/web/common/icon_minus.png) center center no-repeat;background-size: contain; text-indent: -5000px; }
.img-upload-area .btn-plus:hover { background:#f6f6f6;}
.img-upload-area .btn-minus:hover { background:#f6f6f6;}
.img-upload-area .file-upload-delete { display: inline-block; margin-left: 8px; font-size: 11px; color: #b6b6b6;cursor:pointer;}
.img-upload-area .file-upload-delete:hover { text-decoration:underline;}
.img-upload-area .file-upload-delete > em { text-indent:-9999px; display:inline-block; width:18px; height:18px;background:#b6b6b6 url(/image/web/common/icon_delete.png) center center no-repeat;background-size: contain; margin-right:8px; transition:all 0.5s;}
.img-upload-area .file-upload-delete > em:hover {background:#868686 url(/image/web/common/icon_delete.png) center center no-repeat;background-size: contain;}
/*파일첨부*/
.file-upload-area { border-bottom: 1px solid #e6e6e6; padding-bottom: 24px; }
.file-upload-area > div + div { margin-top: 8px; }
.file-upload-area > div > label { display:block; float:left; margin:0 0 0 0; cursor:pointer;}
.file-upload-area > div > input#file-upload { display:none;}
.file-upload-area { border-bottom: 1px solid #e6e6e6; padding-bottom: 24px; }
.file-upload-area > div + div { margin-top: 8px; }
/*------modified 2019-09-24 박상준 / a 태그 호환성문제 해결 시작*/
.file-upload-area .btn-small { height: 35px; line-height:33px!important; }
/*------modified 2019-09-24 박상준 / a 태그 호환성문제 해결 끝*/
.file-upload-area .btn-plus { width: 36px; height: 36px; border: solid 1px #d6d6d6; margin-left: 8px; transition:all 0.5s;}
.file-upload-area .btn-plus span { display: inline-block; width: 23px; height: 23px; margin: 0;vertical-align: middle; background: url(/image/web/common/icon_plus.png) center center no-repeat;background-size: contain; text-indent: -5000px; }
.file-upload-area .btn-minus { width: 36px; height: 36px; border: solid 1px #d6d6d6; margin-left: 8px; transition:all 0.5s;}
.file-upload-area .btn-minus span { display: inline-block; width: 24px; height: 24px; margin: 0;vertical-align: middle; background: url(/image/web/common/icon_minus.png) center center no-repeat;background-size: contain; text-indent: -5000px; }
.file-upload-area .btn-plus:hover { background:#f6f6f6;}
.file-upload-area .btn-minus:hover { background:#f6f6f6;}
.file-upload-area .file-upload-delete { display: inline-block; margin-left: 8px; font-size: 11px; color: #b6b6b6;cursor:pointer;}
.file-upload-area .file-upload-delete:hover { text-decoration:underline;}
.file-upload-area .file-upload-delete > em { text-indent:-9999px; display:inline-block; width:18px; height:18px;background:#b6b6b6 url(/image/web/common/icon_delete.png) center center no-repeat;background-size: contain; margin-right:8px; transition:all 0.5s;}
.file-upload-area .file-upload-delete > em:hover {background:#868686 url(/image/web/common/icon_delete.png) center center no-repeat;background-size: contain;}
/*========== [10] 첨부하기 끝 ==========*/


/* 2019-09-28 수정 요청으로 파일업로드 수정함 */
.btn-small.type4 { width: 136px; }
.img-upload-area.type2 { text-align: left; }
.img-upload-area.type2 .btn-small.type4 { float: none; width: 136px; display: block; }
.img-upload-area.type2 .file-name { display: inline-block; min-width: 74px; font-size: 11px; color: #b6b6b6; margin-right: 8px; }
.img-upload-area.type2 .file-delete-check { display: inline-block; vertical-align: middle; margin-top: 5px; font-size: 11px; color: #b6b6b6; }
.img-upload-area.type2 .file-delete-check input[type="checkbox"] { margin-right: 8px; }