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: #161616; }
.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: #161616; 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: #161616; 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; }

/*버튼 종류*/
.btn-small { display: inline-block; width: 180px; height: 36px; border: solid 1px #161616; background-color: #ffffff; font-size: 12px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 34px; transition: all 0.5s; }
.btn-small.radius { border-radius: 18px; }
.btn-small + .btn-small { margin-left: 3px; }
.btn-small.type1 { width: 94px; }
.btn-small.type2 { width: 64px; }
.btn-small.type3 { width: 70px; }
.btn-small.type4 { width: 136px; }
.btn-small.type5 { width: 108px; }
.btn-small.type6 { width: 172px; }
.btn-small.type7 { width: 120px; }

.btn-medium { display: inline-block; width: 210px; height: 44px; border: solid 1px #161616; background-color: #ffffff; font-size: 13px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; 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 #161616; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 48px; transition: all 0.5s; }
.btn-medium2 + .btn-medium2 { margin-left: 14px; }
.btn-medium2.radius { border-radius: 25px; }
.btn-large { display: inline-block; width: 250px; height: 54px; border: solid 1px #161616; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 52px; transition: all 0.5s; }
.btn-large.radius { border-radius: 27px; }
.btn-large + .btn-large { margin-left: 14px; }
.btn-popup { display: inline-block; width: 430px; height: 56px; border: solid 1px #161616; background-color: #ffffff; font-size: 14px; font-weight: 400; letter-spacing:-0.65px; text-align: center; color: #161616; line-height: 54px; transition: all 0.5s; }

/*버튼 색상*/
.btn-small.disabled, .btn-medium.disabled, .btn-medium2.disabled, .btn-large.disabled, .btn-popup.disabled { border: solid 1px #d6d6d6; background-color: #d6d6d6; color: #ffffff; 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: #161616; transition: all 0.5s; }
.btn-small.black, .btn-medium.black, .btn-medium2.black, .btn-large.black, .btn-popup.black { border: solid 1px #161616; background-color: #161616; color: #ffffff; transition: all 0.5s; }
.btn-small.gray, .btn-medium.gray, .btn-medium2.gray, .btn-large.gray, .btn-popup.gray { border: solid 1px #f9f9f9; background-color: #f9f9f9; color: #161616; 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 #d6d6d6; 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 #e80032; background-color: #e80032; color: #fff; transition: all 0.5s; }
.btn-small.blue, .btn-medium.blue, .btn-medium2.blue, .btn-large.blue, .btn-popup.blue { border: solid 1px #546bff; background-color: #546bff; color: #fff; transition: all 0.5s; }
.btn-small.izmir, .btn-medium.izmir, .btn-medium2.izmir, .btn-large.izmir, .btn-popup.izmir { border: solid 1px #9eaaff; background-color: #9eaaff; color: #fff; transition: all 0.5s; }
.btn-small.line-blue, .btn-medium.line-blue, .btn-medium2.line-blue, .btn-large.line-blue, .btn-popup.line-blue { border: solid 1px #546bff; background-color: #ffffff; color: #546bff; 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 green; background-color: green; color: #fff; 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 #161616; background-color: #161616; 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 #d6d6d6; background-color: #d6d6d6; color: #ffffff; }
.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 #161616; background-color: #fff; color: #161616; }
.btn-small.gray:hover, .btn-medium.gray:hover, .btn-medium2.gray:hover, .btn-large.gray:hover, .btn-popup.gray:hover { border: solid 1px #e6e6e6; background-color: #fff; color: #161616; }
.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 #d6d6d6; 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 #e80032; background-color: #fff; color: #e80032; }
.btn-small.blue:hover, .btn-medium.blue:hover, .btn-medium2.blue:hover, .btn-large.blue:hover, .btn-popup.blue:hover { border: solid 1px #546bff; background-color: #fff; color: #546bff; }
.btn-small.izmir:hover, .btn-medium.izmir:hover, .btn-medium2.izmir:hover, .btn-large.izmir:hover, .btn-popup.izmir:hover { border: solid 1px #9eaaff; background-color: #fff; color: #9eaaff; }
.btn-small.line-blue:hover, .btn-medium.line-blue:hover, .btn-medium2.line-blue:hover, .btn-large.line-blue:hover, .btn-popup.line-blue:hover { border: solid 1px #546bff; background-color: #546bff; color: #fff; }
.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 green; background-color: #fff; color: green; }
/*버튼 그룹화*/
.btn-group-type1 { display: inline-block; width: 100%; height: 100%; margin: 32px auto 0; text-align: center; }
.btn-group-type1 button.btn-popup { float: left; width: 49%;  }
.btn-group-type1 button.btn-popup + .btn-popup { float: right; }
.btn-group-type1 button.btn-popup.flexible { width: 100%; }
/*========== [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: #546bff 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; }
input[type="radio"] { position: relative; display: inline-block; width: 20px; height: 20px; margin:-2px 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: #546bff; 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: #546bff; color: #fff; border: 1px solid #546bff; border-radius: 2px; }
.paginate-area ul li.on a:hover { background: #546bff; color: #fff; border: 1px solid #546bff; }
.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: #161616; }
.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: #161616; background: #f6f6f6; }
.select-box-area label { width: 100%; }
.select-box-area label.on ~ .actual-option { display: block; }
/*인풋박스*/
.input { width: 200px; padding: 8px 12px; border: solid 1px #e6e6e6; background-color: #ffffff; font-size: 13px; letter-spacing:-0.65px; color: #161616; }
input[type='text'].input::placeholder { color: #161616; }
input[type='text'].input::-webkit-input-placeholder { color: #b6b6b6; }
input[type='text'].input::-webkit-moz-placeholder { color: #161616; }
input[type='text'].input:-moz-placeholder { color: #161616; }
input[type='text'].input::-moz-placeholder { color: #161616; }
input[type='text'].input:-ms-input-placeholder { color: #161616; }
textarea.input::placeholder { color: #161616; }
textarea.input::-webkit-input-placeholder { color: #b6b6b6; }
textarea.input::-webkit-moz-placeholder { color: #161616; }
textarea.input:-moz-placeholder { color: #161616; }
textarea.input::-moz-placeholder { color: #161616; }
textarea.input:-ms-input-placeholder { color: #161616; }
select.input { padding: 6px 12px; }
.input::placeholder { color: #b6b6b6; }
.input[disabled] { background: #f6f6f6; border: 0; cursor: not-allowed; color: #868686; }
.input[readonly] { background: #f9f9f9; color: #161616; }
.input.active, .input:focus { border-color: #46535f; }
.input.flexible { width: 100%; }
.input.right { text-align: right; }
.input.type1 { width: 120px !important; }
.input.type2 { width: 280px; }
.input.type3 { width: 146px; }

/*========== [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: #161616; }
input[type='text'].input-calendar::placeholder { color: #161616; }
input[type='text'].input-calendar::-webkit-input-placeholder { color: #b6b6b6; }
input[type='text'].input-calendar::-webkit-moz-placeholder { color: #161616; }
input[type='text'].input-calendar:-moz-placeholder { color: #161616; }
input[type='text'].input-calendar::-moz-placeholder { color: #161616; }
input[type='text'].input-calendar:-ms-input-placeholder { color: #161616; }
.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: #161616!important; }
.flatpickr-prev-month:hover > svg { fill: #161616!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: #161616!important; }
.flatpickr-day.today:hover { border: none!important; border-radius: 50%!important; background: #f6f6f6!important; color: #161616!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: #161616; 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: #161616; }
.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: #161616; 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: #e80032; font-family: 'Lato'; margin-right: 12px; }
.product-box > ul li.slider > .product-price > ul > li.price { font-size: 18px; font-weight: 800; color: #161616; 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: #161616; 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: #161616; 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: #161616; 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; }

/*product-box type-e 일때*/
.product-box.type-e .delivery { display: none!important; }
.product-box.type-e .detail-info { display: none!important; }
.product-box.type-e { width: 100%; height: auto; position: relative; }
.product-box.type-e > ul  { overflow: hidden; }
.product-box.type-e > ul + ul { margin: 60px 0 0; }
.product-box.type-e > ul li.slider { display: block; float: left; width: 200px; height: auto; margin-left: 0; }
.product-box.type-e > ul li.slider > .product-img { display: block; width: 100%; height: 100%; }
.product-box.type-e > 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-e > 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-e > ul li.slider > .product-img > a:hover img { transform: scale(1.05); }

.product-box.type-e > ul li.slider > .product-title { display: block; width: 100%; height: auto; padding: 16px 16px 0; }
.product-box.type-e > ul li.slider > .product-title > a { display:-webkit-box; font-size: 15px; font-weight: 400; color: #161616; line-height: 1.47; letter-spacing: -0.75px; white-space: normal; text-overflow: ellipsis; overflow: hidden; width: 95%; height: 44px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-box.type-e > ul li.slider > .product-title > a:hover { text-decoration: underline; }
.product-box.type-e > 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-e > ul li.slider > .product-title > p.shop-name { font-size: 13px; }

.product-box.type-e > ul li.slider > .product-price { padding: 8px 16px 16px; }
.product-box.type-e > ul li.slider > .product-price > ul > .price { font-size: 18px; font-weight: 900; color: #546bff; }
.product-box.type-e > ul li.slider > .product-price > ul > .price:after { content: '원'; display: inline-block; vertical-align: middle; font-size: 14px; color: #546bff; margin: -4px 0 0 4px; }
.product-box.type-e > ul li.slider > .product-price > ul li.like { float: right; display: inline-block; }
.product-box.type-e > ul li.slider > .product-price > 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-e > ul li.slider > .product-price > 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-e > ul li.slider > .product-price > ul li.like > a.on { background: url(/image/web/common/icon_like_s.png) center center no-repeat; background-size: contain; }
.product-box.type-e > ul li.slider > .product-price > ul li.like > span { float: left; line-height: 24px; font-size: 12px; color: #868686; margin-left: 4px; }

/*========== [09] 상품타입 끝 ==========*/


/*========== [10] 첨부하기 시작 ==========*/
.board-write-area ul > li > label { display: block; font-size: 12px; color: #161616; 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; }
.img-upload-area .btn-small { height: 35px; line-height: 33px!important; }
.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; }
.file-upload-area .btn-small { height: 35px; line-height: 33px!important; }
.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 수정 요청으로 파일업로드 수정함 */

.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; }


/*평점*/
.score { float: right; }
.score > ul { display: inline-block; width: 100%; height: auto; }
.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; }
.score > ul > li.on { background: url(/image/web/common/icon_star_s.png) center center no-repeat; background-size: contain; }
.score > div .number { display: block; height: 32px; line-height: 32px; font-size: 20px; font-weight: 900; color: #35c5f0; margin: 0 0 6px; }
.score > div .number:before { content: ''; width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin: -4px 0 0; background: url(/image/web/common/icon_star_p.png) center center no-repeat; background-size: contain; }
.score > div .text { display: block; padding-left: 11px; height: 15px; line-height: 15px; text-align: center; font-size: 10px; color: #b6b6b6; }


/*파일업로드*/
.file-upload { overflow: hidden; }
.file-upload + .file-upload  { margin: 8px 0 0; }
.file-upload > div.block + div.block { margin: 8px 0 0; }
.file-upload > div.block > * { vertical-align: middle; }
.file-upload > div.block input[type='file']{ display: none; }
.file-upload > div.block .btn-small { display: inline-block; width: 190px; height: 34px; text-align: center; font-size: 12px; font-weight: 500; color: #868686; cursor: pointer; margin-right: 6px; }
.file-upload > div.block .btn-small:hover { border: solid 1px #e6e6e6; background-color: #f6f6f6; color: #767676; }
.file-upload > div.name-chk { display: inline-block; width: 100%; height: auto; font-size: 12px; margin: 8px 0 0; }
.file-upload > div.name-chk .filename { float: left; display: inline-block; width: 139px; height: 20px; padding-right: 8px; font-size: 12px; font-weight: 500; color: #b6b6b6; max-height: 20px; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; word-break: break-all; }
.file-upload > div.name-chk input[type="checkbox"] { margin-right: 6px; }
.file-upload > div.block { position:relative; }
.file-upload > div.block > input { display:block!important; position:absolute; top:0; left:0; width:190px; height:34px; opacity:0; cursor:pointer; }

.file-upload .btn-plus { width: 36px; height: 36px; border: solid 1px #d6d6d6; transition: all 0.5s; }
.file-upload .btn-plus span { display: inline-block; width: 34px; height: 34px; 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 .btn-minus { width: 36px; height: 36px; border: solid 1px #d6d6d6; transition: all 0.5s; }
.file-upload .btn-minus span { display: inline-block; width: 34px; height: 34px; 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 .btn-plus:hover { background: #f6f6f6; }
.file-upload .btn-minus:hover { background: #f6f6f6; }