@charset "utf-8"; 
@import url(/public/test/css/font.css); 

/* --------------------------------reset-------------------------------- */
[lang="ko"] {word-break:break-all}
* {margin:0; padding:0; box-sizing:border-box; font:inherit; color:inherit; flex-shrink:0; outline:none}
html, body {font-size:16px; color:#222}
html {-webkit-text-size-adjust:100%} /* 텍스트 자동 확대 방지 */
body, button, input, select, table, textarea {font-family:'Paperlogy', 'Noto Sans KR', sans-serif}
body {-webkit-text-size-adjust:none}
h1, h2, h3, h4, h5, h6 {font-size:inherit; line-height:inherit}
ul,ol,dl,menu,li {list-style:none}
a, a:active, a:hover {text-decoration:none}
button, input {-webkit-border-radius:0; border-radius:0; border:0}
button {background-color:transparent; cursor:pointer; outline:none}
blockquote, q {quotes:none}
:after, :before {box-sizing:inherit}
img, picture, video, canvas, svg {display:block; max-width:100%}
fieldset,img {border:0}
iframe {overflow:hidden; margin:0; border:0; padding:0; vertical-align:top}
address, em,i {font-style:normal}
textarea {-webkit-backface-visibility:hidden; backface-visibility:hidden; background-color:transparent; border:0; word-break:keep-all; word-wrap:break-word}
table {border-collapse:collapse; border-spacing:0}
td, th {padding:0}
input, select, textarea {vertical-align:middle; outline:none; box-sizing:border-box; border-radius:0; -moz-appearance:none; -webkit-appearance:none; 
appearance:none}


@media screen and (min-width:1024.1px) and (max-width:1280px) {
    html, body {font-size:15px}
}/* md1 */
@media screen and (min-width:767.1px) and (max-width:101.5rem) {
    html, body {font-size:14px}
}/* md2 */
@media screen and (max-width:767px) {
    html, body {font-size:12px}
}/* sm */
/* --------------------------------reset end--------------------------- */


/* --------------------------------common------------------------------ */
html.ofy_hidden {height:calc(var(--var, 1vh) * 100); height:100svh}
html.ofy_hidden body {height:100%; overflow:hidden}
#wrap {position:relative; width:100%; /* min-width:31.25rem; */ overflow:hidden; text-size-adjust:none; -webkit-text-size-adjust:none}
.blind {border:0; clip:rect(0 0 0 0); clip-path:inset(50%); width:1px; height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap}
.clearfix::after {content:""; clear:both; display:block}

@media screen and (min-width:1024.1px) {
    .bmo {display:none}
    .bpc {display:block}
    .ipc {display:inline-block}
    .imo {display:none}
}/* lg */

@media screen and (max-width:1024px) {
    .bpc {display:none}
    .bmo {display:block}
    .ipc {display:none}
    .imo {display:inline-block}
}/* md */

@media screen and (max-width:767px) {
}/* sm */
/* --------------------------------common end-------------------------- */



/* --------------------------------header-------------------------------- */
#header {position:fixed; top:0; left:0; right:0; width:100%; height:5.625rem; z-index:200; transition:.3s; background-color:transparent}
#header.scroll {background-color:rgba(255,255,255,0.75)}
header .inner {position:relative; width:93.75%; max-width:1800px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:5.625rem; z-index:200}
#header .logo {float:left; margin:0; display:flex; justify-content:flex-start; align-items:center; gap:3rem; position:relative}
#header .logo a {width:auto}
#header .logo .logo_img img {height:5.125rem}
#header .logo .logo_img.bpc {position:relative; background:url(/public/test/images/common/logo_kitchen_bk.png) no-repeat center / 100% auto; aspect-ratio:78/62; height:3.875rem; transition:all 0.15s ease-in-out}
#header .logo .logo_img.bpc:hover {background:url(/public/test/images/common/logo_kitchen.png) no-repeat center / 100% auto}
#header .logo .logo_img.bpc::before {content:''; display:block; width:1px; height:1.875rem; background-color:#D9D9D9; position:absolute; top:50%; left:-2rem; transform:translate(0,-50%)}
#header .btn_menu {width:3rem; height:3rem; background:url(/public/test/images/common/btn_menu.png) no-repeat center / 100% auto}

/*레이어메뉴*/
#header .layer_menu {position:fixed; top:0; left:0; width:100%; height:calc(var(--var,1vh) * 100); height:100svh; z-index:997; display:none}
#header .layer_menu .bg {position:absolute; left:0; top:0; width:100%; height:100%; background-color:#00000080}
#header .layer_inner {position:absolute; right:-480px; top:0; width:480px; height:100%; border-radius:2.5rem 0 0 2.5rem; background:#FBFAF7; overflow:hidden; transition-delay:.2s; transition:.8s; padding:2.5rem}
#header .layer_menu.active .layer_inner {right:0}
#header .btn_close {width:2.5rem; height:2.5rem; background:url(/public/test/images/common/btn_close.png) no-repeat center / 100% auto}
#header .gnb {position:relative; margin-top:2.25rem; overflow-y:auto; width:100%; height:calc(100% - 25rem); min-height:3rem}
#header .gnb_list {display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:1rem}
#header .gnb_list li {width:100%; border-bottom:1px solid #C5C5C5}
#header .gnb_list li a {font-size:1.5rem; font-weight:600; line-height:160%; letter-spacing:-.48px; display:flex; justify-content:flex-start; align-items:center; gap:1rem; width:100%; position:relative}
#header .gnb_list li a::before {content:''; display:block; width:3rem; height:3rem; background-size:contain; background-repeat:no-repeat; background-position:center}
#header .gnb_list li a::after {content:''; display:block; width:2.35rem; height:2.25rem; background:url(/public/test/images/common/ico_menu_next.png) no-repeat center/contain; position:absolute; top:50%; right:0; transform:translateY(-50%)}
#header .gnb_list li.menu_class a {color:#9B9F31}
#header .gnb_list li.menu_class a::before {background-image:url(/public/test/images/common/ico_menu_01.png)}
#header .gnb_list li.menu_recipe a {color:#29A2A3}
#header .gnb_list li.menu_recipe a::before {background-image:url(/public/test/images/common/ico_menu_02.png)}
#header .gnb_list li.menu_lab a {color:#D97E71}
#header .gnb_list li.menu_lab a::before {background-image:url(/public/test/images/common/ico_menu_03.png)}
#header .sns_list {margin-bottom:1.5rem; display:flex; justify-content:flex-end; align-items:center; gap:0.875rem}
#header .sns_list li {width:2.5rem; height:2.5rem}
#header .layer_footer {border-radius:0 0 0 2.5rem; position:absolute; bottom:0; right:0; width:100%; /* min-height:15rem */}
#header .layer_footer .top {padding:1rem 2.5rem 2rem}
#header .layer_footer .bot {border-top:1px solid #C5C5C5; background:#F8F5ED; padding:2rem 2.5rem 4rem 3rem; position:relative}
#header .layer_footer .bot::after {content:''; display:block; width:7.5rem; height:5.125rem; background:url(/public/test/images/common/logo_footer.png) no-repeat center/contain; position:absolute; top:2rem; right:2.5rem}
#header .layer_footer .fnb {display:flex; justify-content:flex-start; align-items:center; gap:0.5rem}
#header .layer_footer .fnb_menu a {display:inline-block; padding:4px 8px; color:#333; border-radius:0.375rem; border:1px solid #666; text-align:center; font-size:10px; font-weight:500; line-height:160%; letter-spacing:-.2px}
#header .company {display:flex; justify-content:flex-start; flex-direction:row; align-items:center; gap:0.75rem; margin:2rem 0 0.75rem}
#header .company .company_name {display:inline-block; color:#333; text-align:left; font-size:1rem; font-weight:500; line-height:100%; letter-spacing:-.32px}
#header .company .btn_contact {display:inline-flex; color:#999; text-align:center; font-size:0.75rem; font-weight:500; line-height:100%; letter-spacing:-.24px; justify-content:center; align-items:center; gap:0.25rem}
#header .company .btn_contact::after {content:''; display:block; width:0.75rem; height:0.75rem; background:url(/public/test/images/common/ico_dropdown.png) no-repeat center/contain; transition:transform .15s ease-in-out}
#header .company .btn_contact.show::after {transform:scaleY(-1)}
#header .contact {display:none}
#header .contact ul {display:flex; justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:0.75rem}
#header .contact p {color:#666; font-size:0.75rem; font-weight:500; line-height:100%; letter-spacing:-.24px; display:flex; justify-content:flex-start; align-items:center; gap:1.25rem}
#header .contact p span {min-width:52px}
#header .link_intro {display:flex; gap:0.5rem; justify-content:center; align-items:center; width:100%; height:3.5rem; padding:1rem 0; border-radius:1rem; border:2px solid #009551; background:linear-gradient(180deg,#009752 0%,#00B160 100%); color:#FFF; text-align:center; font-size:1.5rem; font-weight:700; line-height:3.5rem; letter-spacing:-.72px; word-break:keep-all; white-space:nowrap}
#header .link_intro::after {content:''; display:block; width:1.5rem; height:1.5rem; background:url(/public/test/images/common/ico_btn_next.png) no-repeat center/contain}

#header .copyright {color:rgb(196, 196, 196); font-size:10px; position:absolute; bottom:2rem; right:2.5rem}


@media screen and (max-width:1024px) {
    #header .logo a::before {display:none}
    #header .sns_list {bottom:1.34rem; gap:1rem}

}/* md */
@media screen and (max-width:767px) {
    header .inner {width:92%; height:6rem}
    #header .logo img {height:4rem}
    #header .btn_menu,
    #header .btn_close {width:2.84rem; height:2.84rem}
    #header .layer_inner {width:100%; right:-100%; border-radius:0}
    #header .gnb {margin-top:2.66rem; height:calc(100% - 26rem)}
    #header .gnb ul li a {font-size:1.34rem; gap:0.66rem}
    #header .gnb ul li a::before {width:2.66rem; height:2.66rem}
    #header .gnb ul li a::after {width:3rem; height:3rem}
    #header .link_intro {height:4rem; line-height:4rem; font-size:1.34rem; border-radius:1.34rem}
    #header .layer_footer {/* min-height:16.33rem */}
    #header .layer_footer .bot {padding:2rem 1.34rem 3.5rem 1.34rem}
    #header .layer_footer::after {width:6.83rem; height:4.83rem}
}/* sm */
@media screen and (max-width:320px) {
    #header .gnb ul li a::after {display:none}
}
/* --------------------------------header end-------------------------------- */


/* --------------------------------layout-------------------------------- */
#container {width:100%; margin-top:5.625rem}
section {position:relative; width:100%}
section .inner {position:relative; width:92%; max-width:1200px; margin:0 auto}
@media screen and (max-width:767px) {
    #container {margin-top:6rem}
}/* sm */
/* --------------------------------layout end-------------------------------- */


/* --------------------------------popup-------------------------------- */
/* #popup_all {width:100%; height:100vh}*/
#popup_all .popup {display:table; width:100%; position:fixed; left:0; top:0; z-index:303}
#popup_all > div {display:table; width:100%; height:100%; position:fixed; left:0; top:0; z-index:150}
#popup_all .bg {width:100%; position:absolute; left:0; top:0; background-color:#000; opacity:.65}
#popup_all .popup,
#popup_all .bg {height:calc(var(--var,1vh) * 100)}
#popup_all .out_layer_box {display:table-cell; text-align:center; vertical-align:middle; width:100%; height:100%}
#popup_all .in_layer_box {display:inline-block; position:relative; box-shadow:0 15px 35px #00000073; background-color:#fff; border-radius:1.875rem; width:90%; padding:2rem 0.85rem}
#popup_all .popup_alert .in_layer_box {max-width:384px}
#popup_all .popup_confirm .in_layer_box {max-width:440px}
#popup_all .popup_title {color:#333; text-align:center; font-size:1.5rem; font-style:normal; font-weight:500; line-height:160%; letter-spacing:-.72px}
#popup_all .popup_title.bold {font-weight:600}
#popup_all .popup_title + .popup_desc {margin:1.5rem auto 0}
#popup_all .popup_desc {color:#333; text-align:center; font-size:1rem; font-style:normal; font-weight:500; line-height:160%; letter-spacing:-.48px}
#popup_all .popup_cont b {font-weight:700}
#popup_all .popup_cont em {color:#009752}
#popup_all .popup_noti {color:#D78084; text-align:center; font-size:16px; font-style:normal; font-weight:500; line-height:160%; letter-spacing:-.48px}
#popup_all .popup_img {width:68.88%; max-width:248px; margin:0 auto 1rem}
#popup_all p.popup_title {margin:0.5rem auto 0}
#popup_all .btn_close {position:absolute; right:0; top:-2rem; width:1.25rem; height:1.25rem; background:url(/public/test/images/common/btn_close_pop.png) no-repeat center/contain; cursor:pointer; z-index:99}
#popup_all .btn_group {display:flex; justify-content:center; align-items:center; flex-direction:row; gap:.5rem; margin:2rem auto 0}
#popup_all .btn_group button {width:120px; height:3rem; line-height:100%; border-radius:8px; border:2px solid #009752; background:linear-gradient(180deg,#009752 0%,#00B160 100%),linear-gradient(0deg,#425A54 0%,#1D4138 100%),radial-gradient(52.15% 50.15% at 50% 50%,#FFF 0%,#F1F1F1 100%); color:#FFF; text-align:center; font-size:1.25rem; font-style:normal; font-weight:500; letter-spacing:-.6px}
#popup_all .btn_group button.btn_type_02 {border:2px solid #E9E9E9; background:linear-gradient(180deg,#E4E4E4 0%,#F5F5F5 100%); color:#333}

@media screen and (max-width:1024px) {
    #popup_all .in_layer_box {border-radius:1.34rem; padding:3.34rem 1rem}
    #popup_all .popup_title {font-size:1.34rem}
    #popup_all .popup_desc {font-size:1.17rem}
    #popup_all .popup_img {margin:0 auto 1.34rem}
    #popup_all .popup_title + .popup_desc,
    #popup_all p.popup_title {margin:1.34rem auto 0}
    #popup_all .btn_group {gap:1.34rem}
    #popup_all .btn_group button {width:50%; max-width:160px; height:4rem; font-size:1.34rem}
}/* md */
/* --------------------------------popup end-------------------------------- */


/* --------------------------------button-------------------------------- */
/* --------------------------------button end-------------------------------- */

/* --------------------------------input-------------------------------- */
input, textarea {font-size:1rem; border:none}
input::placeholder {color:#999}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0}

/* 일반 체크박스*/
.checkbox_wrap input[type="checkbox"] {display:none}
input[type="checkbox"] + label {position:relative; display:flex; align-items:center; gap:.5rem; cursor:pointer; width:100%; color:#333; font-size:1.25rem; font-weight:500; letter-spacing:-.48px}
input[type="checkbox"] + label b {font-weight:700}
input[type="checkbox"] + label .custom_checkbox {width:1.5rem; height:1.5rem; border-radius:50%; position:relative; transition:all .2s; background:#CECECE url(/public/test/images/common/ico_checkbox.png) no-repeat center / contain}
input[type="checkbox"]:checked + label .custom_checkbox {border-color:#009752; background:#009752 url(/public/test/images/common/ico_checkbox.png) no-repeat center / contain}
input[type="checkbox"].error + label {border-color:#e74c3c !important}
.checkbox_wrap {position:relative}
.checkbox_wrap:focus-within .custom_checkbox {border:1px solid #009752}
/* 동의약관 체크박스*/
.agree_wrap .checkbox_wrap {position:relative}
.agree_wrap .checkbox_wrap:focus-within label {border:1px solid #009752}
.agree_wrap input[type="checkbox"] + label {font-size:1rem; gap:.75rem; padding:0 1.5rem; height:4rem; line-height:4rem; border-radius:.5rem; border:1px solid #CECECE; background:#FFF; box-shadow:4px 4px 12px 0 #5959591a; border-radius:0.75rem}



/* 라디오 체크박스*/
.radio_list {margin-top:1rem}
.radio_list li {position:relative}
.radio_list li:not(:last-child) {margin-bottom:1rem}
.radio_list input[type="text"] {margin-bottom:1rem}
.radio_wrap {position:relative}
input[type="radio"] {display:none}
input[type="radio"] + label {position:relative; display:flex; align-items:center; gap:.5rem; cursor:pointer; width:100%; color:#333; font-size:1.25rem; font-weight:500; letter-spacing:-.48px; line-height:2.375rem}
input[type="radio"] + label b {font-weight:700}
input[type="radio"] + label .custom_radio {width:1.5rem; height:1.5rem; border-radius:50%; position:relative; transition:all .2s; background:#CECECE url(/public/test/images/common/ico_checkbox.png) no-repeat center / contain}
input[type="radio"]:checked + label .custom_radio {border-color:#009752; background:#009752 url(/public/test/images/common/ico_checkbox.png) no-repeat center / contain}
input[type="radio"].error + label {border-color:#e74c3c}
.radio_wrap:focus-within .custom_radio {border:1px solid #009752}

@media screen and (max-width:1024px) {
    .radio_list li:not(:last-child) {margin-bottom:0.5rem}
    input[type="radio"] + label {line-height:2.16rem}
    /*input[type="radio"] + label {padding:0 1rem; border-radius:0.75rem; height:3.33rem; line-height:3.33rem}*/
}/* md */
/* --------------------------------input end-------------------------------- */



/* --------------------------------animaiton-------------------------------- */
/* fadeUp animation base */
.fadeUp {
    opacity:0; 
    transform:translateY(20px); 
}


.fadeIn {
    opacity:0; 
}

@keyframes underline {
    0% {width:0}
    100% {width:100%}
}

@keyframes blinkCursor {
    0% {opacity:1}
    50% {opacity:0}
    100% {opacity:1}
}

@keyframes pulse {
    0% { transform:translate(-50%,-50%) scale(1); opacity:1}
    50% { transform:translate(-50%,-50%) scale(1.05); opacity:0.7}
    100% { transform:translate(-50%,-50%) scale(1); opacity:1}
}
/* --------------------------------animation end-------------------------------- */


@media screen and (min-width:1024.1px) {

}/* lg */

@media screen and (max-width:1024px) {

}/* md */
@media screen and (max-width:767px) {

}/* sm */