* {margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-r); font-weight: normal; font-size: 16px;}
ul, li {list-style: none;}
a {text-decoration: none; color: #2F2F34;}
p, span {color: #1e1e1e;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;	font-size: 100%;vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {	content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
::selection {background-color: #dbf0ff; color: #000;}

:root {
    --font-b: 'NotoSansKR-Bold';
    --font-sb: 'NotoSansKR-SemiBold';
    --font-m: 'NotoSansKR-Medium';
    --font-r: 'NotoSansKR-Regular';
    --font-l: 'NotoSansKR-Light';
    --font-t: 'NotoSansKR-Thin';
    --font-ab: 'Agatho__Bold';
    --font-al: 'Agatho__Light';
    --font-pa: 'Paperlogy-SemiBold';
    --m-color: #d3b8e5;
    --s-color: #b565a7;
}

button {display: inline-block; border: none; cursor: pointer; background-color: inherit;}
select {border: 1px solid #e9e9e9; padding: 0 35px 0 15px; display: inline-block; width: 150px; height: 40px; outline: none; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url(/Content/img/select_arrow.png) no-repeat right 15px top 50% / 10px; font-size: 14px; color: #737373;}
select:focus {border: 1px solid var(--m-color);}

input {appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 4px; padding: 0 15px; outline: none; font-size: 14px; border: 1px solid #e9e9e9; color: #737373; height: 40px;}
input::-ms-clear, input::-ms-reveal {display: none; width: 0; height: 0;}
input::-webkit-search-decoration, input::-webkit-search-cancel-button,
input::-webkit-search-results-button, input::-webkit-search-results-decoration {display: none;}

textarea {resize: none; border-radius: 4px; padding: 14px; border: 1px solid #e9e9e9; outline: none; font-size: 16px;}

label {cursor: pointer; font-size: 14px; display: inline-block;}

/* page */
.page_btn {text-align: center; margin-top: 100px; }
.page_btn ul {display: flex; justify-content: center;}
.page_btn ul li {display: flex;}
.page_btn ul li a { width: 35px; height: 35px; line-height: 34px; border-radius: 10px; background-color: #f2f2f2; color: #8b95a1; margin: 0 2px; display: inline-block; font-size: 14px;}
.page_btn ul li.num {margin: 0 5px;}
.page_btn ul li.num a {background-color: #fff;}
.page_btn ul li.num a.on {background-color: #1a2c44; color: #fff;}
.page_btn ul li a:hover {background-color: #dee0e4; transition: 0.3s;}
.page_btn ul li a img {vertical-align: middle;}

.inner {max-width: 1200px; margin: 0 auto;}
.contents .con_box {margin: 180px auto 120px;}
.celebon_title {text-align: center; font-size: 20px; margin: 50px 0; display: inline-block; width: 100%;}

.search {text-align: center; margin: 30px 0;}

.btn_wrap {text-align: center; margin-top: 80px;}
.btn_wrap a {background-color: #1a2c44; color: #fff; padding: 10px 20px; border-radius: 4px; font-size: 14px; display: inline-block;}



/* swiper */
.contents .arrow_swiper {position: relative;}

.contents .swiper-button-prev {background: url(../img/left_btn.svg) no-repeat; background-size: contain; background-position: center; width: 30px; height: 60px; left: 7%; right: auto;}
.contents .swiper-button-next {background: url(../img/right_btn.svg) no-repeat; background-size: contain; background-position: center; width: 30px; height: 60px; right: 7%; left: auto;}
.contents .swiper-button-prev::after {display: none;}
.contents .swiper-button-next::after {display: none;}

.contents .swiper-button-prev.swiper_out_btn {left: -70px; height: 45px;}
.contents .swiper-button-next.swiper_out_btn {right: -70px; height: 45px;}

.contents .swiper-pagination {left: 50%; transform: translateX(-50%);}
.contents .swiper-pagination-bullet {opacity: 1; background-color: #dedede; margin: 0 3px;}
.contents .swiper-pagination-bullet-active {background-color: var(--m-color);}


/* md_list */
.md_list {display: flex; flex-wrap: wrap; justify-content: center;}
.md_list > div {width: calc((100% - 3%) / 4); margin-right: 1%;}
.md_list > div:last-of-type {margin-right: 0;}

.md_box a {display: inline-block; width: 100%;}
.md_box a img {width: 100%; display: block;}
.md_box a .md_txt {padding: 20px 25px 35px; width: 100%; display: inline-block; text-align: center;}
.md_box a .md_txt .md_tit {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 18px; margin-bottom: 10px;}
.md_box a .md_txt span {color: #a2a2a2; font-size: 14px; display: inline-block; width: 100%; margin-bottom: 15px;}
.md_box a .md_txt .md_price {font-size: 20px;}

.md_box button {border: 1px solid var(--m-color); color: var(--m-color); width: 100%; font-family: var(--font-l); padding: 10px 0; position: relative; font-size: 15px;}
.md_box button:hover {background-color: var(--m-color); color: #fff; transition: .3s;}
.md_box button i {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 20px;}



/* 태블릿 */
@media screen and (max-width: 1200px) {
    .inner {width: 100%; padding: 0 20px;}

    .contents .arrow_swiper {width: 90%; margin: 0 auto;}
    .contents .swiper-button-prev.swiper_out_btn {left: -6%;}
    .contents .swiper-button-next.swiper_out_btn {right: -6%;}
}
/* 모바일 */
@media screen and (max-width:767px){
    .inner {padding: 0 14px;}
    .contents .con_box {margin: 80px auto;}

    .contents .swiper-button-prev {width: 20px; height: 28px; left: 5%;}
    .contents .swiper-button-next {width: 20px; height: 28px; right: 5%;}

    .md_list > div {width: calc((100% - 3%) / 2); margin-right: 3%; margin-bottom: 30px;}
    .md_list > div:nth-of-type(2n) {margin-right: 0;}
    .md_list > div:nth-of-type(3), 
    .md_list > div:nth-of-type(4) {margin-bottom: 0;}

    .md_box a .md_txt {padding: 20px 10px 25px;}
    .md_box a .md_txt .md_tit {font-size: 16px; margin-bottom: 5px;}
    .md_box a .md_txt .md_price {font-size: 18px;}

    .md_box button {font-size: 14px;}
    .md_box button i {font-size: 17px;}

    .contents .arrow_swiper {width: 85%;}
    .contents .swiper-button-next.swiper_out_btn {height: 25px; width: 15px; right: -8%;}
    .contents .swiper-button-prev.swiper_out_btn {height: 25px; width: 15px; left: -8%;}
}