@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}
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.fixed {height:100%}
html.fixed 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 {margin-top:2.25rem; overflow-y:auto; width:100%; height:calc(100% - 21.875rem); min-height:3rem}
#header .gnb ul {display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:1rem}
#header .gnb ul li {width:100%; border-bottom:1px solid #C5C5C5}
#header .gnb ul 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 ul li a::before {content:''; display:block; width:3rem; height:3rem; background-size:contain; background-repeat:no-repeat; background-position:center}
#header .gnb ul 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 ul li.menu_class a {color:#9B9F31}
#header .gnb ul li.menu_class a::before {background-image:url(/public/test/images/common/ico_menu_01.png)}
#header .gnb ul li.menu_recipe a {color:#29A2A3}
#header .gnb ul li.menu_recipe a::before {background-image:url(/public/test/images/common/ico_menu_02.png)}
#header .gnb ul li.menu_lab a {color:#D97E71}
#header .gnb ul li.menu_lab a::before {background-image:url(/public/test/images/common/ico_menu_03.png)}
#header .layer_footer {border-radius:0 0 0 2.5rem; border-top:1px solid #C5C5C5; background:#F8F5ED; padding:2rem 2.5rem 2rem 3rem; position:absolute; bottom:0; right:0; width:100%; min-height:14.25rem}
#header .layer_footer::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 ul {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 2.25rem; 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}
#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}


/* active 상태 */


@media screen and (max-width:1024px) {
    #header .logo a::before {display:none}

}/* 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% - 25.625rem)}
    #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 {padding:2rem 1.34rem; min-height:16.33rem}
    #header .layer_footer::after {width:6.83rem; height:4.83rem}
}/* sm */
/* --------------------------------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 */