@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face { font-family: 'Arita-buri-SemiBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-buri-SemiBold.woff') format('woff'); font-weight: normal; font-style: normal; }
            

/* Reset */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;height:100%;font-family: 'Noto Sans KR', sans-serif;font-weight:400}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img, dl, dt, dd, p {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
header ul, nav ul, footer ul {margin:0;padding:0;list-style:none}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button,input[type=button],input[type=submit]{cursor:pointer;}
input[type=text], input[type=password], input[type=submit], input[type=image], button {border-radius:0;-webkit-appearance:none}
textarea, select {font-size:1em;}
textarea {border-radius:0;-webkit-appearance:none}
p {margin:0;padding:0;word-break:break-all}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:inherit;text-decoration:none}
ul,ol,li{list-style:none;padding:0;margin:0;}
input, button, textarea, select {font-family: 'Noto Sans KR', sans-serif; outline: none}
.clear {clear:both}
.fl { float: left; }
.fr { float: right; }

/*사파리 버튼 초기화*/
input[type="text"], input[type="password"], input[type="button"], input[type="submit"], textarea { -webkit-appearance: none; -webkit-border-radius: 0; }

/*--------------------------------------------------------------------------------------------------------------------------*/

/*셀렉트 커스텀*/
select {
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none; /* 화살표 없애기 공통*/
    background-image: url('../img/btn_arrow_select1.png');
    background-repeat: no-repeat;
    background-position: 85% center;
    background-size: 8px;
    background-color: #fff;
    cursor: pointer; 
}
select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }

/*placeholder*/
input::-ms-input-placeholder { font-weight: 400; color: #ccc; }
input::-webkit-input-placeholder { font-weight: 400; color: #ccc; }
input::-moz-placeholder { font-weight: 400; color: #ccc; }

textarea::-ms-input-placeholder { font-weight: 400; color: #ccc; }
textarea::-webkit-input-placeholder { font-weight: 400; color: #ccc; }
textarea::-moz-placeholder { font-weight: 400; color: #ccc; }

/*드래그*/
::selection { background: #a552e9; color: #fff; }
::-moz-selection { background: #a552e9; color: #fff; }

/*--------------------------------------------------------------------------------------------------------------------------*/

/*가변형 팝업*/
.pop-layer { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); width: 85%; height: auto; background: #fff; border-radius: 8px; z-index: 12; }
.dim-layer { display: none; position: fixed; _position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 12; }
.dim-layer-on { display: block; }
.dim-layer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .6; filter: alpha(opacity=60); }
.dim-layer .pop-layer { display: block; }
.dim-layer .pop-info { padding: 35px 15px; box-sizing: border-box; font-size: 13px; font-weight: 500; color: #555; text-align: center; word-break: keep-all; }

/*팝업창 버튼 1개*/
.dim-layer .btn-pop .btn { display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; background: #ffd74c; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; font-size: 13px; font-weight: 500; color: #000; }

/*팝업창 버튼 2개*/
.dim-layer .btns-pop .btn { display: block; float: left; width: 50%; height: 40px; line-height: 38px; text-align: center; background: #a552e9; border: none; box-sizing: border-box; font-size: 16px; font-weight: 500; color: #fff; }
.dim-layer .btns-pop .btn-v1 { background: #dedede; }
.dim-layer .btns-pop .btn:first-child { border-bottom-left-radius: 8px; }
.dim-layer .btns-pop .btn:last-child { border-bottom-right-radius: 8px; }

.pop-container { }
.pop-box { padding: 30px 20px 20px; box-sizing: border-box; }
.pop-tit { margin-bottom: 10px; font-size: 18px; font-weight: 600; color: #222; text-align: center; }
.pop-conts { font-size: 14px; font-weight: 400; color: #555; text-align: center; line-height: 20px; }
.pop-textarea { display: block; width: 100%; height: 120px; background: #f6f6f6; padding: 10px; border: 1px solid #f3e8f3; border-radius: 8px; box-sizing: border-box; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: #aaa; resize: none; }


/*공통*/
.wrap { padding-top: 55px; box-sizing: border-box; }
.wrap-ft { padding-bottom: 55px; box-sizing: border-box; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb55 { margin-bottom: 55px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.box-basic { background: #fff; padding: 10px 0 20px; box-sizing: border-box; }
.box-basic .inner { padding: 0 10px; box-sizing: border-box; }

/*상태 표시*/
.basic-mark { font-size: 12px; font-weight: 500; color: #17a887; }
.state-mark { margin-left: 10px; font-size: 12px; font-weight: 400; color: #f72084; }
.state-mark-v1 { margin-left: 10px; font-size: 12px; font-weight: 400; color: #17a887; }
.cancel-mark { margin-left: 10px; font-size: 12px; font-weight: 400; color: #f32424; }
.complete-mark { margin-left: 10px; font-size: 12px; font-weight: 400; color: #aaa; }
.complete-mark-v1 { margin-left: 10px; font-size: 12px; font-weight: 400; color: #a552e9; }

/*버튼 및 셀렉트 커스텀*/
/*버튼 1개*/
.btn-basic,
a.btn-basic { display: block; width: 100%; height: 46px; line-height: 44px; text-align: center; background: #fff; border: none; border-radius: 23px !important; box-sizing: border-box; font-size: 16px; font-weight: 500; color: #a552e9; margin: 0 auto; }
.btn-basic-v1,
a.btn-basic-v1 { background: #a552e9; color: #fff; }
.btn-basic-v2,
a.btn-basic-v2 { background: #fff; border: 1px solid #a552e9; box-sizing: border-box; }

/*버튼 2개*/
.btns:after { content: ''; display: block; clear: both; }
.btns .btn { float: left; width: 47%; height: 40px; line-height: 38px; margin-right: 6%; }
.btns .btn:last-child { margin-right: 0; }

/*버튼 하단 고정*/
.fix-btn { position: fixed; left: 0; right: 0; bottom: 2%; width: 92%; margin: 0 auto; }

/*기본 폼 디자인*/
.frm-group { position: relative; }
.frm-area { margin-bottom: 16px; }
.frm-area:last-child { margin-bottom: 0; }
.frm-area .tit-frm { font-size: 13px; font-weight: 400; color: #fff; }
.frm-area .inp-frm { width: 100%; height: 40px; background: none; padding: 0 10px; border: none; border-bottom: 2px solid #d0acee; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #fff; }
.frm-area .frm-info { margin-top: 5px; font-size: 13px; font-weight: 300; color: #fff; line-height: 25px; }
.frm-area .inp-frm-v1 { width: 100%; height: 40px; background: none; border: none; border-bottom: 2px solid #d0acee; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #fff; }
.frm-area .inp-frm-v1:after { content: ''; display: block; clear: both; }
.frm-area .inp-frm-v1 input { float: left; width: 80%; height: 100%; background: none; padding: 0 10px; border: none; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #fff; }
.frm-area .inp-frm-v1 .txt-frm { float: left; width: 20%; font-size: 12px; font-weight: 400; color: #fff; text-align: right; }
.frm-area .inp-frm-v1 .btn-frm { float: left; width: 20%; height: 25px; border-radius: 15px; background: #a552e9; font-size: 11px; font-weight: 400; color: #fff; }

/*체크박스 및 라디오 버튼 커스텀*/
.ck-custom { display: none; }
.ck-custom + label { display: block; position: relative; cursor: pointer; font-size: 13px; font-weight: 500; color: #fff; }
.ck-custom + label .custom { display: inline-block; width: 20px; height: 20px; background: url('../img/btn_check1_off.png') no-repeat; background-size: contain; margin-right: 10px; vertical-align: -6px; cursor: pointer; }
.ck-custom:checked + label .custom { background-image: url('../img/btn_check1_on.png'); }

.ck-custom2 { display: none; }
.ck-custom2 + label { display: block; position: relative; cursor: pointer; font-size: 13px; font-weight: 500; color: #fff; }
.ck-custom2 + label .custom { display: block; width: 100%; height: 30px; line-height: 28px; text-align: center; padding: 0 10px; border: 1px solid #d0acee; border-radius: 15px; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #d0acee; cursor: pointer; }
.ck-custom2:checked + label .custom { background: #a552e9; border: 1px solid #a552e9; box-sizing: border-box; color: #fff; }

.ck-custom3 { display: none; }
.ck-custom3 + label { display: block; position: relative; cursor: pointer; font-size: 14px; font-weight: 500; color: #222; }
.ck-custom3 + label .custom { display: inline-block; width: 20px; height: 20px; background: url('../img/btn_check1_off.png') no-repeat; background-size: contain; margin-right: 10px; vertical-align: -6px; cursor: pointer; }
.ck-custom3:checked + label .custom { background-image: url('../img/btn_check1_on.png'); }

.ck-custom4 { display: none; }
.ck-custom4 + label { display: block; position: relative; cursor: pointer; font-size: 13px; font-weight: 500; color: #222; }
.ck-custom4 + label .custom { display: inline-block; width: 20px; height: 20px; background: url('../img/btn_check2_off.png') no-repeat; background-size: contain; margin-right: 10px; vertical-align: -6px; cursor: pointer; }
.ck-custom4:checked + label .custom { background-image: url('../img/btn_check2_on.png'); }

.ck-custom5 { display: none; }
.ck-custom5 + label { display: block; position: relative; cursor: pointer; font-size: 13px; font-weight: 500; color: #222; }
.ck-custom5 + label .custom { display: inline-block; width: 20px; height: 20px; background: url('../img/btn_check1_off.png') no-repeat; background-size: contain; margin-right: 10px; vertical-align: -6px; cursor: pointer; }
.ck-custom5:checked + label .custom { background-image: url('../img/btn_check1_on.png'); }

.ck-custom6 { display: none; }
.ck-custom6 + label { display: block; position: relative; cursor: pointer; }
.ck-custom6 + label .custom { display: inline-block; width: 16px; height: 14px; background: url('../img/btn_check3_off.png') no-repeat; background-size: contain; cursor: pointer; }
.ck-custom6:checked + label .custom { background-image: url('../img/btn_check3_on.png'); }

.ck-custom7 { display: none; }
.ck-custom7 + label { display: inline-block; cursor: pointer; }
.ck-custom7 + label .custom { display: block; width: 40px; height: 20px; background: url('../img/btn_check4_off.png') no-repeat; background-size: contain; }
.ck-custom7:checked + label .custom { background-image: url('../img/btn_check4_on.png'); }

/* 별표 */
.star-box { padding: 10px 0 15px; box-sizing: border-box; text-align: center; }
.star-input > .input,
.star-input > .input > label:hover,
.star-input > .input > input:focus + label,
.star-input > .input > input:checked + label { display: inline-block; background: url('../img/bg_star1.png') no-repeat; vertical-align: 0; }
.star-input { display: inline-block; height: 24px; white-space: nowrap; }
.star-input > .input{ display: inline-block; position: relative; width: 133.3px; height: 24px; background-size: 133.3px; white-space: nowrap; overflow: hidden; }
.star-input > .input > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/*.star-input > .input.focus { outline:1px dotted #ddd; }*/
.star-input > .input > label { float: left; position: absolute; top: 0; left: 0; width: 24px; height: 0; padding: 24px 0 0 0; overflow: hidden; cursor: pointer; }
.star-input > .input > label:hover,
.star-input > .input > input:focus + label,
.star-input > .input > input:checked + label { background-size: 133.3px; background-position: 0 bottom; }
.star-input > .input > label:hover ~ label { background-image: none; }
.star-input > .input > label[for="p1"] { width: 24px; z-index: 5; }
.star-input > .input > label[for="p2"] { width: 26.389vw; z-index: 4; }
.star-input > .input > label[for="p3"] { width: 38.889vw; z-index: 3; }
.star-input > .input > label[for="p4"] { width: 52.778vw; z-index: 2; }
.star-input > .input > label[for="p5"] { width: 66.667vw; z-index: 1; }
.star-input output { display: block; margin-bottom: 12px; font-size: 18px; font-weight: 400; color: #222; }

/*썸네일*/
.thumb { width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }

/*라인*/
.line { content: ''; display: block; width: 100%; height: 10px; background: #f8f6f8; padding: 0; border: none; margin: 0; }


/*header*/
.header { position: fixed; z-index: 11; top: 0; width: 100%; }
.header .hd { position: relative; height: 60px; background: #fff; border-bottom: 1px solid #ccc; box-sizing: border-box; }
.header .hd:after { content: ''; display: block; clear: both; }
.header .hd .hd-back { position: absolute; left: 0; width: 60px; height: 60px; background: url('../img/btn_back1.png') center center no-repeat; background-size: 30px; border: none; cursor: pointer; }
.header .hd .hd-tit { font-size: 16px; font-weight: 400; color: #222; text-align: center; line-height: 60px; }

.hd-blank { height: 60px; }
.ft-blank { height: 80px; }


/*인트로*/
.intro { height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d2362d+0,ff362d+100 */
background: #d2362d; /* Old browsers */
background: -moz-linear-gradient(top, #ff362d 22%, #d2362d 71%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff362d 22%,#d2362d 71%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, #ff362d 22%,#d2362d 71%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2362d', endColorstr='#ff362d',GradientType=0 ); /* IE6-9 */ }
.intro img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); width: 206px; text-align: center; }


/*메인*/
.main { height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007242+0,008e42+100 */
background: #007242; /* Old browsers */
background: -moz-linear-gradient(top,  #008e42 0%, #007242 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #008e42 0%,#007242 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top,  #008e42 0%,#007242 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007242', endColorstr='#008e42',GradientType=0 ); /* IE6-9 */ padding-top: 172px; box-sizing: border-box; }

.hd-main { position: fixed; z-index: 11; top: 0; width: 100%; }
.hd-main .inner { position: relative; padding: 90px 20px 20px; box-sizing: border-box; }
.hd-main .hd-hamburger { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; background: url('../img/ico_hamburger1.png') center center no-repeat; background-size: contain; border: none; cursor: pointer; }
.hd-main .hd-logo { position: absolute; top: 20px; left: 0; right: 0; height: 50px; margin: 0 auto; }
.hd-main .hd-search { width: 100%; height: 40px; background: #fff; border-radius: 20px; box-sizing: border-box; }
.hd-main .hd-search:after { content: ''; display: block; clear: both; }
.hd-main .hd-search .inp-search { float: left; width: 80%; height: 100%; background: none; padding: 0 20px; border: none; box-sizing: border-box;  font-size: 14px; font-weight: 400; color: #222;}
.hd-main .hd-search .btn-search { float: left; width: 20%; height: 100%; background: url('../img/ico_search1.png') center center no-repeat; background-size: 30px; border: none; }
.hd-main .hd-info { display: block; max-width: 100%; height: 10px; margin: 16px auto; }

.main-menu { position: relative; z-index: 12; width: 100%; background: #fff; padding: 30px 20px 90px; border-top-left-radius: 30px; border-top-right-radius: 30px; box-shadow: 0 -6px 6px 0 rgba(15, 81, 53, 0.5); box-sizing: border-box; }
.main-menu:after { content: ''; display: block; clear: both; }
.main-menu li { position: relative; float: left; width: 45%; height: 68px; background-position: 10px center; background-repeat: no-repeat; background-size: 50px; border-radius: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.18); margin-right: 10%; margin-bottom: 20px; cursor: pointer; }
.main-menu li:nth-child(even) { margin-right: 0; }
.main-menu li:nth-child(1) { background-image: url('../img/ico_menu1.png'); }
.main-menu li:nth-child(2) { background-image: url('../img/ico_menu2.png'); }
.main-menu li:nth-child(3) { background-image: url('../img/ico_menu3.png'); }
.main-menu li:nth-child(4) { background-image: url('../img/ico_menu4.png'); }
.main-menu li:nth-child(5) { background-image: url('../img/ico_menu5.png'); }
.main-menu li:nth-child(6) { background-image: url('../img/ico_menu6.png'); }
.main-menu li:nth-child(7) { background-image: url('../img/ico_menu7.png'); }
.main-menu li:nth-child(8) { background-image: url('../img/ico_menu8.png'); }
.main-menu li:nth-child(9) { background-image: url('../img/ico_menu12.png'); }
.main-menu li:nth-child(10) { background-image: url('../img/ico_menu11.png'); }
.main-menu li:nth-child(11) { background-image: url('../img/ico_menu9.png'); }
.main-menu li:nth-child(12) { background-image: url('../img/ico_menu10.png'); }
.main-menu .tit-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); width: 100%; padding-right: 20px; box-sizing: border-box; font-size: 14px; font-weight: 600; color: #222; text-align: right; }


/*카테고리*/
.list-category { padding: 30px 20px; box-sizing: border-box; }
.list-category > li { border-bottom: 1px solid #eee; box-sizing: border-box; cursor: pointer;  -webkit-tap-highlight-color : rgba(0,0,0,0); }
.list-category > li:first-child { border-top: 1px solid #eee; box-sizing: border-box; }
.list-category .tit-category { position: relative; padding: 10px 20px; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #222; }
.list-category .btn-depth { background: url('../img/btn_arrow_bottom1.png') right center no-repeat; background-size: 26px; }
.list-category .btn-depth.active { background-image: url('../img/btn_arrow_top1.png'); -webkit-tap-highlight-color : rgba(0,0,0,0);}
.list-category .depth { display: none; }
.list-category .depth.active { display: block; }
.list-category .depth li { background: #f9f9f9; padding: 10px 30px; border-bottom: 1px solid #eee; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #222; }
.list-category .depth li:last-child { border-bottom: none; }


/*검색*/
.search .wrap { padding: 30px 20px; box-sizing: border-box; }
.search-area { width: 100%; height: 40px; background: #fff; border: 1px solid #ccc; border-radius: 20px; box-sizing: border-box; margin-bottom: 30px; }
.search-area:after { content: ''; display: block; clear: both; }
.search-area .inp-search { float: left; width: 80%; height: 100%; background: none; padding: 0 20px; border: none; box-sizing: border-box;  font-size: 14px; font-weight: 400; color: #222;}
.search-area .btn-search { float: left; width: 20%; height: 100%; background: url('../img/ico_search1.png') center center no-repeat; background-size: 30px; border: none; }

.result-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); text-align: center; font-size: 16px; font-weight: 400; color: #222; text-align: center; }
.result-message strong { display: block; }

.list-item li { margin-bottom: 23px; cursor: pointer; }
.list-item .thumb { width: 100%; height: 170px; border-radius: 20px; box-sizing: border-box; margin-bottom: 15px; }
.list-item .item-name { margin-bottom: 5px; font-size: 14px; font-weight: 600; color: #222; }
.list-item .item-op:after { content: ''; display: block; clear: both; }
.list-item .item-price { float: left; font-size: 14px; font-weight: 400; color: #d2362d; }
.list-item .item-price strong { font-size: 16px; }
.list-item .item-num { float: right; font-size: 12px; font-weight: 400; color: #222; }
.list-item .item-num strong { font-size: 14px; }


/*공지사항*/
.notice .wrap { padding: 30px 20px; box-sizing: border-box; }
.tbl-notice { width: 100%; table-layout: fixed; border-collapse: collapse; border-bottom: 1px solid #ccc; box-sizing: border-box; }
.tbl-notice tr { height: 40px; font-size: 14px; font-weight: 400; color: #222; }
.tbl-notice tr:nth-of-type(1) { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; box-sizing: border-box; }

.tbl-notice th { background: #f8f8f8; }
.tbl-notice td { background: #fff; cursor: pointer; }

.tbl-notice th:nth-of-type(1),
.tbl-notice td:nth-of-type(1) { width: 25%; text-align: left; }
.tbl-notice th:nth-of-type(2),
.tbl-notice td:nth-of-type(2) { width: 50%; }
.tbl-notice th:nth-of-type(3),
.tbl-notice td:nth-of-type(3) { width: 25%; }

.tbl-notice td:nth-of-type(1) { font-weight: 600; }
.tbl-notice td:nth-of-type(2) div { width: 98%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-notice td:nth-of-type(3) { font-size: 12px; color: #aaa; text-align: right; }

.paging { margin: 20px 0; text-align: center; }
.paging .btn-prev { width: 30px; height: 30px; background: url('../img/btn_prev1.png') center center no-repeat; background-size: contain; border: none; vertical-align: -10px; }
.paging .btn-next { width: 30px; height: 30px; background: url('../img/btn_next1.png') center center no-repeat; background-size: contain; border: none; vertical-align: -10px; }
.paging .paging-num { display: inline-block; width: 30px; height: 30px; text-align: center; font-size: 16px; font-weight: 400; color: #ccc; }
.paging .paging-num.active { color: #222; }


/*공지사항 상세*/
.notice-view .wrap { padding: 30px 20px; box-sizing: border-box; }
.notice-view .notice-info:after { content: ''; display: block; clear: both; }
.notice-view .notice-info .notice-category { float: left; font-size: 14px; font-weight: 400; color: #222; }
.notice-view .notice-info .notice-date { float: right; font-size: 14px; font-weight: 400; color: #aaa; }
.notice-view .tit-notice { padding: 20px 0; box-sizing: border-box; font-size: 16px; font-weight: 600; color: #222; }
.notice-view .notice-conts { padding: 20px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; box-sizing: border-box; margin-bottom: 20px; font-size: 14px; font-weight: 400; color: #222; }
.notice-view .btn-list { display: block; width: 60px; height: 40px; line-height: 40px; text-align: center; background: #fff;  border: 1px solid #ccc; box-sizing: border-box; margin: 0 0 0 auto; font-size: 14px; font-weight: 400; color: #222; }


/*상품 리스트*/
.item .wrap { padding: 30px 20px; box-sizing: border-box; }


/*상품 상세*/
.item-view .wrap { padding: 30px 20px; box-sizing: border-box; }
.item-view .tit-item { margin-bottom: 13px; font-size: 16px; font-weight: 600; color: #222; }
.item-view .item-info { padding-bottom: 23px; border-bottom: 1px solid #ccc; box-sizing: border-box; }
.item-view .item-info li { display: table; width: 100%; margin-bottom: 6px; }
.item-view .item-info li:last-child { margin-bottom: 0; }
.item-view .item-info li:after { content: ''; display: block; clear: both; }
.item-view .item-info .tit-item-info { display: table-cell; width: 15%; font-size: 14px; font-weight: 400; color: #222; }
.item-view .item-info .item-info-conts { display: table-cell; width: 85%; font-size: 14px; font-weight: 400; color: #222; }
.item-view .item-info li:nth-child(1) .item-info-conts { color: #d2362d; }
.item-view .item-info .item-info-conts strong { font-size: 16px; }
.item-view .item-conts { padding: 20px 0; box-sizing: border-box; }
.item-view .item-conts img { width: 100%; margin-bottom: 20px; }


/*영업센터*/
.contact .wrap { padding: 30px 20px; box-sizing: border-box; }
.contact .contact-info { padding-bottom: 30px; border-bottom: 1px solid #ccc; box-sizing: border-box; }
.contact .contact-info:after { content: ''; display: block; clear: both; }
.contact .contact-info > li { float: left; width: 30%; margin-right: 2%; }
.contact .contact-info > li:last-child { margin-right: 0; }
.contact .contact-info .img-animal { width: 100%; }
.contact .contact-info .person-name { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #222; text-align: center; }
.contact .contact-info .link-contact { margin-bottom: 10px; }
.contact .contact-info .link-contact:after { content: ''; display: block; clear: both; }
.contact .contact-info .link-contact li { float: left; width: 50%; text-align: center; }
.contact .contact-info .link-contact li:last-child { margin-right: 0; }
.contact .contact-info .link-contact img { width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box; }
.contact .contact-info .center-area:after { content: ''; display: block; clear: both; }
.contact .contact-info .center-area li { float: left; width: 48%; height: 26px; line-height: 24px; text-align: center; border: 1px solid #ccc; border-radius: 10px; box-sizing: border-box; margin-right: 4%; margin-bottom: 6px; font-size: 12px; font-weight: 400; color: #222; }
.contact .contact-info .center-area li:first-child { width: 100%; }
.contact .contact-info .center-area li:nth-child(odd) { margin-right: 0; }
.contact .contact-info > li:last-child .center-area li { margin-right: 4%; }
.contact .contact-info > li:last-child .center-area li:nth-child(2) { width: 100%; margin-right: 0; }
.contact .contact-info > li:last-child .center-area li:nth-child(even) { margin-right: 0; }
.center-location { padding: 20px 0; box-sizing: border-box; text-align: center; }
.center-location .tit-center-info { margin-bottom: 14px; font-size: 16px; font-weight: 600; color: #d2362d; }
.center-location .center-addr { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #222; }
.center-location .center-info { margin-bottom: 38px; font-size: 12px; font-weight: 400; color: #222; }
.center-location .img-map { width: 90%; }


/*다운로드 입장*/
.download-enter .wrap { padding: 30px 20px; box-sizing: border-box; }
.download-enter .list-enter li { height: 68px; line-height: 68px; text-align: center; border-radius: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.18); box-sizing: border-box; margin-bottom: 20px; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; }


/*다운로드*/
.download .wrap { padding: 30px 20px; box-sizing: border-box; }
.download .tit-download { margin-bottom: 20px; font-size: 16px; font-weight: 600; color: #222; }
.tbl-download { width: 100%; table-layout: fixed; border-collapse: collapse; border-bottom: 1px solid #ccc; box-sizing: border-box; }
.tbl-download tr { height: 40px; font-size: 14px; font-weight: 400; color: #222; }
.tbl-download tr:nth-child(1) { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; box-sizing: border-box; }

.tbl-download th { background: #f8f8f8; }
.tbl-download td { background: #fff; cursor: pointer; }

.tbl-download th:nth-of-type(1),
.tbl-download td:nth-of-type(1) { width: 70%; text-align: left; }
.tbl-download th:nth-of-type(2),
.tbl-download td:nth-of-type(2) { width: 30%; text-align: center; }

.tbl-download td:nth-of-type(1) div { width: 98%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-download td:nth-of-type(2) { font-size: 12px; color: #aaa; }


/*다운로드 상세*/
.download-view .wrap { padding: 30px 20px; box-sizing: border-box; }
.download-view .tit-download { margin-bottom: 6px; font-size: 16px; font-weight: 600; color: #222; }
.download-view .download-date { margin-bottom: 20px; font-size: 14px; font-weight: 400; color: #999; }
.download-view .download-conts { padding: 20px 0; border-top: 1px solid #ccc; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #222; }
.download-view .link-download img { height: 30px; margin-right: 10px; }


/*배송조회*/
.delivery .wrap { padding: 30px 20px; box-sizing: border-box; }
.date-filter { margin-bottom: 14px; }
.date-filter:after { content: ''; display: block; clear: both; }
.date-filter .tit-filter { float: left; width: 20%; font-size: 14px; font-weight: 600; color: #222; line-height: 40px; }
.date-filter .select-date { float: left; width: 80%; }
.date-filter .select-date:after { content: ''; display: block; clear: both; }
.date-filter .select-date select { float: left; height: 40px; padding: 0 10px; border: 1px solid #222; box-sizing: border-box; margin-right: 4%; font-size: 14px; font-weight: 400; color: #222; }
.date-filter .select-date select:last-of-type { margin-right: 0; }
.date-filter .select-date .select-year { width: 35%; }
.date-filter .select-date .select-month,
.date-filter .select-date .select-day { width: 28.5%; }

.tbl-delivery { width: 100%; table-layout: fixed; border-collapse: collapse; }
.tbl-delivery tr { height: 40px; border-bottom: 1px solid #eee; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #222; cursor: pointer; }
.tbl-delivery td:nth-of-type(1) { width: 15%; padding-left: 10px; box-sizing: border-box; }
.tbl-delivery td:nth-of-type(2) { width: 50%; }
.tbl-delivery td:nth-of-type(3) { width: 30%; padding-right: 10px; box-sizing: border-box; text-align: right; }

.query-message { margin-top: 70px; font-size: 16px; font-weight: 400; color: #222; text-align: center; }


/*배송조회 상세*/
.delivery-view .wrap { padding: 30px 20px; box-sizing: border-box; }
.filter-area { padding-bottom: 20px; border-bottom: 1px solid #ccc; box-sizing: border-box; }
.tbl-delivery-view { width: 100%; table-layout: fixed; border-collapse: collapse; }
.tbl-delivery-view tr { border-bottom: 1px solid #eee; box-sizing: border-box; }
.tbl-delivery-view th,
.tbl-delivery-view td { height: 40px; }
.tbl-delivery-view th { background: #d2362d; padding: 0 10px; box-sizing: border-box; font-size: 14px; font-weight: 300; color: #fff; text-align: left; }
.tbl-delivery-view td { padding: 0 10px; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #222; }
.btn-query { width: 100%; height: 40px; background: #007242; border: none; margin-top: 6px; font-size: 14px; font-weight: 400; color: #fff; }
.btn-query img { height: 20px; margin-right: 5px; }


/*장부조회*/
.ledger .wrap { padding: 30px 20px 100px; box-sizing: border-box; }
.account-info { padding-bottom: 20px; border-bottom: 1px solid #ccc; box-sizing: border-box; margin-bottom: 20px; font-size: 16px; font-weight: 400; color: #ccc; text-align: center; }
.account-info .bank-name { font-weight: 600; color: #003988; }
.account-info .account-num { font-weight: 600; color: #222; }
.account-info .account-name { color: #222; }

.tbl-ledger { width: 100%; table-layout: fixed; border-collapse: collapse; }
.tbl-ledger tr { height: 40px; font-size: 14px; font-weight: 400; color: #222; text-align: center; }
.tbl-ledger tr:first-child th { background: #d2362d; border-top: 0; color: #fff; }
.tbl-ledger th,
.tbl-ledger td { border: 1px solid #ccc; box-sizing: border-box; font-weight: 400; }
.tbl-ledger td { padding: 0 5px; box-sizing: border-box; }

.tbl-ledger th:nth-of-type(1),
.tbl-ledger td:nth-of-type(1) { width: 30%; border-left: 0; }
.tbl-ledger td:nth-of-type(1) { text-align: left; }
.tbl-ledger th:nth-of-type(2),
.tbl-ledger td:nth-of-type(2) { width: 25%; }
.tbl-ledger th:nth-of-type(3),
.tbl-ledger td:nth-of-type(3) { width: 15%; }
.tbl-ledger th:nth-of-type(4),
.tbl-ledger td:nth-of-type(4) { width: 10%; border-right: 0; }
.tbl-ledger td:nth-of-type(4) { text-align: right; }

.tbl-ledger tr.top-area td { background: #f8f8f8; border-right: 0; text-align: center; }
.tbl-ledger tr.bottom-area td { background: #eee; }

.tbl-ledger-v1 { width: 100%; table-layout: fixed; border-collapse: collapse; }
.tbl-ledger-v1 tr { height: 40px; border-bottom: 1px solid #ccc; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #222; }
.tbl-ledger-v1 th { width: 15%; background: #ddd; font-weight: 400; }
.tbl-ledger-v1 td { width: 35%; padding: 0 5px; box-sizing: border-box; text-align: right; }


/*footer*/
.footer { position: fixed; z-index: 999; bottom: 0; width: 100%; height: 80px; background: #fff; box-shadow: 0 -6px 6px 0 rgba(0, 0, 0, 0.04); box-sizing: border-box; }
.ft { height: 100%; background: #fff; }
.ft:after { content: ''; display: block; clear: both; }
.ft li { position: relative; float: left; width: 20%; height: 100%; text-align: center; background-position: center 20%; background-repeat: no-repeat; background-size: auto 40px; }
.ft li a { display: block; width: 100%; height: 100%; font-size: 12px; font-weight: 400; color: #222 !important; }
.ft li a .tit-footer { position: absolute; bottom: 15%; left: 0; right: 0; margin: auto; }

.ft li:nth-child(1) { background-image: url('../img/ico_footer1.png'); }
.ft li:nth-child(2) { background-image: url('../img/ico_footer2.png'); }
.ft li:nth-child(3) { background-image: url('../img/ico_footer3.png'); }
.ft li:nth-child(4) { background-image: url('../img/ico_footer4.png'); }
.ft li:nth-child(5) { background-image: url('../img/ico_footer5.png'); }

.btn-top { position: fixed; right: 20px; bottom: 110px; width: 40px; height: 40px; background: url('../img/btn_top1.png') center center no-repeat rgba(255, 255, 255, 0.5); background-size: 30px; border: 1px solid #ccc; border-radius: 10px; box-sizing: border-box; }