@charset "utf-8";

@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {--theme-color: #FC6736;}

/* 공통 */
html {}
body {font-family:Pretendard; color: #333;font-size: 14px;}
.inner-def {max-width: 1320px; margin: 0 auto; padding: 0 30px;}
.inner-md {max-width: 675px; margin: 0 auto; padding: 0 30px;}
.inner-sm {max-width: 540px; margin: 0 auto; padding: 0 30px;}

.only-pc {display: block;}
.only-mobile {display: none;}
.clear::after{content: ''; display: block; clear: both;}

.read-only, .sound-only, .sound_only {display:none;}
.info-dot {position: relative;margin: 4px 0;padding-left: 8px;font-size: 13px;color: rgba(0, 0, 0, 0.48);}
.info-dot::before {display: inline-block;content: '';position: absolute;top: 50%;left: 0;margin-top: -2px;width: 4px;height: 4px;border-radius: 50%;background-color: var(--theme-color);}

.cke_sc {display:none;}
#bo_vc_empty {padding: 24px 0 48px;text-align: center;}

img {max-width: 100%;height: auto;}
.sct_noitem {width: 100%;padding: 32px 0;text-align: center;}

#container {padding-top: 60px;}

.bordert-top-1 {border-top: 1px solid #000;}
.bordert-top-2 {border-top: 2px solid #000;}

/* font */
.font-bold {font-weight: bold !important;}
.color-theme {color: var(--theme-color) !important;}

.tal {text-align:left !important;}
.tac {text-align:center !important;}
.tar {text-align:right !important;}

/* margin */
.mart4 {margin-top: 4px !important;}
.mart12 {margin-top: 12px !important;}
.mart24 {margin-top: 24px !important;}
.mart32 {margin-top: 32px !important;}

.marr4 {margin-right: 4px !important;}

/* 아이콘 */
i.icon {display: inline-block;text-indent: -9999px;font-size: 0;}
.icon.search-01 {width: 32px; height: 30px; background-image: url("../img/icon_search_2x.png"); background-size: 32px 30px; background-repeat: no-repeat;}
.icon.menu {width: 32px; height: 22px; background-image: url("../img/icon_menu_2x.png"); background-size: 32px 22px; background-repeat: no-repeat;}
.icon.mb-search {width: 32px; height: 30px; background-image: url("../img/icon_search_2x.png"); background-size: 32px 30px; background-repeat: no-repeat;}
.icon.right-arrow-01 {width: 42px; height: 16px; background-image: url("../img/icon_right_arrow_01_2x.png"); background-size: 42px 16px; background-repeat: no-repeat;}
.icon.search-02 {width: 38px; height: 36px; background-image: url("../img/icon_search_02_2x.png"); background-size: 38px 36px; background-repeat: no-repeat;}
.icon.search-black {width: 30px; height: 30px; background-image: url("../img/icon_search_black_2x.png"); background-size: 30px 30px; background-repeat: no-repeat;}
.icon.filter {width: 28px; height: 30px; background-image: url("../img/icon_filter.png"); background-size: 28px 30px; background-repeat: no-repeat;}
.icon.slide-menu-close {width: 26px; height: 26px; background-image: url("../img/icon_slide_menu_close_2x.png"); background-size: 26px 26px; background-repeat: no-repeat;}
.icon.required {width: 12px; height: 10px; background-image: url("../img/icon_required_2x.png"); background-size: 12px 10px; background-repeat: no-repeat;}
.icon.round-arrow-left {width: 64px; height: 64px; background-image: url("../img/ico_round_arrow_left_2x.png"); background-size: 64px 64px; background-repeat: no-repeat;}
.icon.round-arrow-right {width: 64px; height: 64px; background-image: url("../img/ico_round_arrow_right_2x.png"); background-size: 64px 64px; background-repeat: no-repeat;}
.icon.video {width: 20px; height: 20px; background-image: url("../img/icon_recipe_video_2x.png"); background-size: 20px 20px; background-repeat: no-repeat;}
.icon.text {width: 20px; height: 20px; background-image: url("../img/icon_recipe_write_2x.png"); background-size: 20px 20px; background-repeat: no-repeat;}


.icon.emo.recipe-month{width: 34px; height: 36px; background-image: url("../img/icon_recipe_month_2x.png"); background-size: 34px 36px; background-repeat: no-repeat;}
.icon.emo.recipe-category{width: 16px; height: 18px; background-image: url("../img/icon_recipe_category_2x.png"); background-size: 16px 18px; background-repeat: no-repeat;}
.icon.emo.recipe-release{width: 36px; height: 35px; background-image: url("../img/icon_to_be_released_2x.png"); background-size: 36px 35px; background-repeat: no-repeat;}
.icon.emo.recipe-popular{width: 36px; height: 35px; background-image: url("../img/icon_popular_recipe_2x.png"); background-size: 36px 35px; background-repeat: no-repeat;}
.icon.emo.recipe-search{width: 36px; height: 36px; background-image: url("../img/icon_search_recipe_2x.png"); background-size: 36px 36px; background-repeat: no-repeat;}


/* 컴포넌트 */
.radioA {display: inline-block;}
.radioA input {display: none;}
.radioA input + label {cursor: pointer;}
.radioA input + label i {display: inline-block; vertical-align: middle; width: 16px; height: 16px; background-image: url("../img/icon_input_radio_off_2x.png"); background-size: 16px 16px; background-repeat: no-repeat;}
.radioA input:checked + label i {display: inline-block; vertical-align: middle; width: 16px; height: 16px; background-image: url("../img/icon_input_radio_on_2x.png"); background-size: 16px 16px; background-repeat: no-repeat;}
.radioA input + label span {display: inline-block; margin-left: 4px; vertical-align: middle; color: rgba(0,0,0,0.68); font-weight: 500;}

.checkboxA {display: inline-block;}
.checkboxA input {display: none;}
.checkboxA input + label {cursor: pointer;}
.checkboxA input + label i {display: inline-block; vertical-align: middle; width: 14px; height: 14px; background-image: url("../img/icon_input_checkbox_off_2x.png"); background-size: 14px 14px; background-repeat: no-repeat;}
.checkboxA input:checked + label i {display: inline-block; vertical-align: middle; width: 14px; height: 14px; background-image: url("../img/icon_input_checkbox_on_2x.png"); background-size: 14px 14px; background-repeat: no-repeat;}
.checkboxA input + label span {display: inline-block; margin-left: 4px; vertical-align: middle; color: rgba(0,0,0,0.68); font-weight: 500;}

.radio-button {}
.radio-button input {display: none;}
.radio-button input + label{display: block; padding: 12px 0; border: 1px solid #ccc; border-radius: 6px; color: rgba(0, 0, 0, 0.78); font-weight: 500; text-align: center; cursor: pointer;}
.radio-button input:checked + label {border: 1px solid #000; background-color: #000; color: #fff;}

.selectA {height: 36px; padding: 0 38px 0 12px; background: url('../img/icon_arrow_down_2x.png') no-repeat right 12px center; background-size: 14px 10px; border: 1px solid #ddd;border-radius: 6px;outline: none;-webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none;}
.selectA::-ms-expand{display:none;/*for IE10,11*/}



/* form */
.form-type-01 {}
.form-type-01 > li {padding-bottom: 30px;}
.form-type-01 > li > h4 {margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #000; font-size: 16px; color: #000;}
.form-type-01 > li > p {font-size: 16px; color: rgba(0, 0, 0, 0.58);}

.form-type-02 {}
.form-type-02 > li {padding-bottom: 30px;}
.form-type-02 > li > h4 {margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #000; font-size: 16px; color: #000;}
.form-type-02 .form-info {display: flex; align-items: center; min-height: 36px; padding: 4px 0;}
.form-type-02 .form-info  > b {display: block; width: 100px; color: #000; font-weight: 500;}
.form-type-02 .form-info > p {display: block; width: calc(100% - 100px); color: rgba(0, 0, 0, 0.78);}
.form-type-02 .form-info > p br {display:none;}

.form-type-03 {}
.form-type-03 > li {padding-bottom: 16px;}
.form-type-03 > li > h4 {margin-bottom: 8px;text-align: left;}
.form-type-03 > li > input {margin-bottom: 8px;}
.form-type-03 .select-button-list {display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; margin-bottom: 12px; border-radius: 6px; overflow: hidden;}
.form-type-03 .select-button-list button {position: relative;width: 33.333%; height: 100%; background-color: #f4f4f4; color: rgba(0, 0, 0, 0.58); text-align: center;}
.form-type-03 .select-button-list button::after {display: block; content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 40px; background-color: #ddd;}
.form-type-03 .select-button-list button:last-child::after {display: none;}
.form-type-03 .select-button-list button.on {background-color: var(--theme-color); color: #fff;}


.form-write {}
.form-write > div {margin-bottom: 12px;}
.form-write .board-sel {}
.form-write .board-sel select {}
.form-board-input {display: flex; align-items: center;}
.form-board-input .input-cell {flex-grow: 1; display: flex; justify-content: space-between;}
.form-board-input .input-cell p {width: 49%;}
.form-board-input .checkboxA {flex-shrink: 0;width: 80px; text-align: right;}
.form-board-input > p {width: 100%;}
.form-board-input > p input {}

.input-text {width: 100%; height: 40px; padding: 0 12px; font-size: 14px; } 
.input-text::placeholder {font-size: 13px; color: rgba(0, 0, 0, 0.58);}




/* 버튼 */
.btn {display: inline-block; border-radius: 4px; text-align: center;}
.btn-sm {padding: 2px 4px; font-size: 12px; font-weight: 500;}
.btn-md {padding: 6px 16px; font-size: 14px; font-weight: 500;}
.btn-lg {padding: 16px 42px; font-size: 16px; font-weight: 500;}
.btn-box-grey {background-color: #fff; border: 1px solid #ccc; color: rgba(0,0,0,0.58);}
.btn-box-grey2 {border: 1px solid #ddd;background-color: #f4f4f4; color: rgba(0,0,0,0.58);}
.btn-box-theme {background-color: var(--theme-color); border: 1px solid var(--theme-color); color: #fff;}
.btn-border-black {border: 1px solid #333; color: #333;}
.btn-def {width: 100%; height: 52px; line-height: 52px; font-size: 16px; font-weight: bold; color: #000;}
.btn-submit {border-radius: 8px; background-color: var(--theme-color); color: #fff; border: 1px solid var(--theme-color)}
.btn-cancel {border-radius: 8px; background-color: #cecece; color: #fff;}

.btn-wrap {display: flex; justify-content: center; margin-top: 30px;}
.btn-wrap button {margin: 0 8px;}

/* modal */
.modal-wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.28);z-index: 9999;}
.modal-wrap .modal-contents {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;padding: 12px;}
.modal-wrap .modal-contents .modal-inner {position: relative;max-width: 650px;padding: 48px 24px;background: #fff;border-radius:8px;}


.point-modal-wrap .modal-contents .modal-inner {padding-bottom: 220px;background-image: url("/img/point_membership_webcome_img.png");background-size: contain;background-repeat: no-repeat;background-position: bottom;text-align: center;}
.point-modal-wrap .title {font-size: 20px;font-weight: 700;}
.point-modal-wrap .point {display: block;padding: 24px 0;font-size: 36px;color: #f93638;}
.point-modal-wrap .text {font-size: 15px;color: rgba(0, 0, 0, 0.78);}
.point-modal-wrap .text p {word-break: keep-all;}
.point-modal-wrap .btn {position: absolute;top: 20px;right: 20px;display: block;width: 24px;height: 24px;}
.point-modal-wrap .btn::before {content: '';position: absolute;top: 0;left: 10px;display: block;width: 2px;height: 22px;margin: 0 auto;transform: rotate(45deg);background: #3d3a46;}
.point-modal-wrap .btn::after {content: '';position: absolute;top: 0;left: 10px;display: block;width: 2px;height: 22px;margin: 0 auto;transform: rotate(-45deg);background: #3d3a46;}


/* 로그인 */
.login-wrap {}
.login-wrap h2 {text-align: center;}
.login-input-wrap {}
.login-input-wrap input {width: 100%; height: 50px; padding: 0 16px; margin-top: 12px;}
.login-input-wrap .login-etc {display: flex; justify-content: space-between; align-items: center; padding: 16px 0;}
.login-input-wrap .login-etc a {color: rgba(0, 0, 0, 0.68); font-weight: 500;}
.login-input-wrap .login-btn-wrap .btn {margin-bottom: 12px; border-radius: 8px;}
.login-input-wrap .sns-login {margin-top: 8px; border-top: 1px solid #eee;}
.login-input-wrap .sns-login p {margin: 20px 0; font-size: 12px; color: rgba(0, 0, 0, 0.58); text-align: center;}
.login-input-wrap .sns-login .sns-login-list {display: flex; justify-content: center; align-items: center;}
.login-input-wrap .sns-login .sns-login-list li {margin: 0 8px;}
.login-input-wrap .sns-login .sns-login-list li a.sns {display: block; width: 46px; height: 46px; background-size: 46px 46px;}
.login-input-wrap .sns-login .sns-login-list li a.sns.naver {background-image: url("../img/icon_sns_naver_2x.png"); }
.login-input-wrap .sns-login .sns-login-list li a.sns.kakao {background-image: url("../img/icon_sns_kakao_2x.png"); }

.login-agree-wrap {}
.login-agree-wrap .text {padding: 14px 0; text-align: center; color: rgba(0, 0, 0, 0.58);}
.login-agree-wrap .chk-all {display: block; margin-top: 16px; padding-bottom: 20px; font-size: 15px; text-align: center;}
.login-agree-wrap section {margin-bottom: 20px; padding-top: 12px; border-top: 1px solid #ddd;}
.login-agree-wrap section .agree-title {padding-bottom: 8px; color: #000; font-weight: 500;}
.login-agree-wrap section .agree-content {width: 100%; min-height: 120px; margin-bottom: 8px; padding: 10px 12px; color: rgba(0, 0, 0, 0.78); border: 1px solid #ddd; border-radius: 6px;}
.login-agree-wrap section .checkboxA {display: block; text-align: right;}
.login-agree-wrap button {margin-top: 10px;}

.join-input-wrap {padding-top: 30px;}
.join-input-wrap ul li {position:relative;}
.join-input-wrap .info {position: absolute;top: 2px;right: 0;font-size: 12px;color: rgba(0, 0, 0, 0.48);}

/* 헤더 */
#header {position: relative; width: 100%; height: 80px; border-bottom: 1px solid #EBEBEB;}
#header > div {height: 100%;}
.header-wrap {height: 100%;display: flex;justify-content: space-between;align-items: center;}

#logo {flex-shrink: 0; width: 176px; margin-right: 24px;} 

.hd-search {flex-shrink: 1; max-width: 500px; width: 100%;}
.hd-search-wrap {}
.hd-search-wrap {position: relative; height: 56px; }
.hd-search-wrap .icon {position: absolute; top: 50%; left: 20px; margin-top: -14px;}
.hd-search-wrap .hd-search-input {width: 100%; height: 56px; padding-left: 77px; border: 2px solid var(--theme-color); border-radius: 22px; font-size: 14px; }
.hd-search-wrap .hd-search-input::placeholder {color: rgba(0,0,0,0.48);}
.hd-search-wrap .hd-search-input:focus {outline: none;box-shadow: none;border: 2px solid var(--theme-color);}

.hd-menu {flex-shrink: 0; display: flex;align-items: center;}
.hd-menu::after {content: ''; display: block; clear: both;}
#gnb {float: left;}
#gnb::after {content: ''; display: block; clear: both;}
#gnb  > li{float: left; padding: 0 25px;}
#gnb  > li > a{display: block; font-size: 17px;}

.hd-login {float: right; padding-left: 35px;}
.hd-login .login-bf {}
.hd-login .login-bf a {font-size: 15px; color: rgba(0,0,0,0.48);}

.hd-login .login-af {position:relative;}
.hd-login .login-af > a {display: block;height: 33px;line-height: 33px;}
.hd-login .login-af > ul {display:none;position: absolute;top: 38px;left: 0;width: 100px;padding: 8px 14px;border-radius: 6px;border: 1px solid #ddd;background-color: #fff;z-index: 9;}
.hd-login .login-af > ul.active{display:block;}
.hd-login .login-af > ul > li {}
.hd-login .login-af > ul > li > a {display: block;line-height: 24px;color: rgba(0, 0, 0, 0.58);}
.hd-login .login-af > ul > li > a:hover {color: rgba(0, 0, 0, 0.98);}


#slide-menu {position: fixed;right: -100%;top: 0;width: 100%;height: 100%;background-color: #fff;transition: all ease 0.5s;-webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;z-index: 99999;}
#slide-menu.open {right: 0;}

.slide-menu-wrap {position: relative;}
.slide-menu-header {position: relative; width: 100%; height: 80px; display: flex; align-items: center;gap: 14px; padding: 0 16px; border-bottom: 1px solid #EBEBEB;}
.slide-menu-header > p {font-size: 16px;}
.slide-menu-header > p > a {display: inline-block; margin-right: 4px; color: #000; font-weight: bold;}
.slide-menu-header > p > span{color: rgba(0,0,0,0.58);}
.slide-menu-header .logout{padding: 3px 6px;border: 1px solid #ddd;border-radius: 4px;color: rgba(0, 0, 0, 0.58);}
#slide-menu-close {position: absolute; top: 50%; right: 16px; margin-top: -13px; display: block;}
#slide-menu-close i {display: block;}


.slide-menu-cont {padding: 12px 24px;}
.slide-menu-list {}
.slide-menu-list > li {}
.slide-menu-list > li > a{display: block; padding: 14px 0; font-size: 18px; font-weight: bold;}

.hd-recipe-live {width: 100%;height: 44px;background: var(--theme-color);color: #fff;}
.hd-recipe-live .text {display: block;height: 44px;display: flex;align-items: center;justify-content: center;letter-spacing: -0.5px;}
.hd-recipe-live .text .t {color: #fff;}
.hd-recipe-live .text .btn {display: inline-block;margin-left: 8px;padding: 4px 10px;background: #fff;color: var(--theme-color);border-radius: 100px;font-weight: bold;}

/* 메인 */
#main section {margin-bottom: 60px;}
#main section:last-child{margin-bottom: 0;}
.main-title {margin-bottom: 18px;}
.main-title .emo {margin-right: 10px;vertical-align: middle;}
.main-title span {display: inline-block;vertical-align: middle;font-size: 28px;color: #000;}

#main-banner {}
#main_bn {position: relative;}
#main_bn .owl-item {border-radius: 24px;overflow: hidden;}
#main_bn .btn_wr a {display: inline-block;}
#main_bn .btn_wr a.pager-prev {position: absolute;top: 50%;left: 24px;margin-top: -27px;color: #fff;z-index: 1;}
#main_bn .btn_wr a.pager-next {position: absolute;top: 50%;right: 24px;margin-top: -27px;color: #fff;z-index: 1;}
#main_bn .btn_wr a i {font-size: 50px;}
#main_bn .slide-counter {position: absolute;bottom: 8px;left: 50%;margin-left: -15px;width: 30px;text-align: center;color: #fff;z-index: 1;}

.recipe-list {margin-left: -30px;}
.recipe-list li{float: left; padding-left: 30px; padding-bottom: 24px; }
.recipe-list li.W50{width: 50%;}
.recipe-list li.W33{width: 33.333%;}
.recipe-list li.W25{width: 25%;}
.recipe-list li.empty{padding: 0;float: none;width: 100%;text-align: center;font-size: 16px;}
.recipe-list li .recipe-box{position: relative;border: 1px solid #eee;background-color: #fff;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);border-radius: 16px;overflow: hidden;}
.recipe-list .recipe-detail{}


.recipe-list .recipe-info{position: relative; display: block; padding: 24px;}
.recipe-list .recipe-info .recipe-etc {display: flex;align-items: center;gap: 6px;}
.recipe-list .recipe-info .recipe-etc .recipe-cate{display: inline-block;padding: 8px 12px; border-radius: 18px; background-color: var(--theme-color);}
.recipe-list .recipe-info .recipe-etc .recipe-cate i{margin-right: 2px; vertical-align: middle;}
.recipe-list .recipe-info .recipe-etc .recipe-cate span{display: inline-block;vertical-align: middle; color: #fff;font-size: 15px;}
.recipe-list .recipe-info .recipe-etc .recipe-video {display: flex;align-items: center;justify-content: center;width: 34px;height: 34px;background-color: #ffeded;border-radius: 50%;}
.recipe-list .recipe-info .recipe-etc .recipe-text {display: flex;align-items: center;justify-content: center;width: 34px;height: 34px;background-color: #f1f7ff;border-radius: 50%;}
.recipe-list .recipe-info .recipe-sub-title {display: flex;align-items: center;justify-content: space-between;height: 34px;padding-top: 16px;}
.recipe-list .recipe-info .recipe-sub-title .recipe-date {font-size: 14px; color: rgba(0, 0, 0, 0.48);}

.recipe-list .recipe-info .recipe-type {}
.recipe-list .recipe-info .recipe-type .type1 {display: inline-block;padding: 2px 8px;border-radius: 100px;background-color: #7eb2fe;font-size: 12px;color: #fff;text-align: center;}
.recipe-list .recipe-info .recipe-type .type2 {display: inline-block;padding: 2px 8px;border-radius: 100px;background-color: #9BCE26;font-size: 12px;color: #fff;text-align: center;}
.recipe-list .recipe-info .recipe-type .type4 {display: inline-block;padding: 2px 8px;border-radius: 100px;background-color: #F65C60;font-size: 12px;color: #fff;text-align: center;}

.recipe-list li.W50 .recipe-info .recipe-title{width: 60%;height: 100px;padding-top: 12px;word-break: keep-all;font-weight: bold; font-size: 32px; color: #000;}
.recipe-list li.W33 .recipe-info .recipe-title{width: 60%;/*height: 100px;*/padding-top: 12px;word-break: keep-all;font-weight: bold; font-size: 24px; color: #000;}
.recipe-list li.W25 .recipe-info .recipe-title{width: 100%;height: 100px;padding-top: 12px;word-break: keep-all;font-weight: bold; font-size: 24px; color: #000;}

.recipe-list .recipe-info .recipe-tag{ display: inline-block;padding: 6px 12px; background-color: #f3f3f3; border-radius: 18px; font-size: 12px;}
.recipe-list .recipe-info .recipe-tag + .recipe-tag {margin-left: 6px;}
.recipe-list .recipe-info .recipe-tag span{color: #333;}
.recipe-list .recipe-info .recipe-tag span.t{}
.recipe-list .recipe-info .recipe-tag span.t::after{display: inline-block;content: ""; width: 1px;height: 10px;margin: 0 10px;background-color: #ccc;}
.recipe-list .recipe-img{position: relative;}
.recipe-list .recipe-img img{}
.recipe-list .recipe-img .recipe-release{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background-color: rgba(0,0,0,0.38);font-size: 38px;color: rgba(255, 255, 255, 0.9);font-weight: bold;}
.recipe-list .btn-bookmark{position: absolute;top: 24px;right: 24px; z-index: 9;}
.btn-bookmark{display: block; width: 27px; height: 32px; background-image: url("../img/icon_bookmart_off_2x.png"); background-size: 27px 32px; background-repeat: no-repeat;z-index: 9;}
.btn-bookmark.on{background-image: url("../img/icon_bookmark_on_2x.png");}


.banner-01 {position: relative;padding: 56px 78px 40px; background-color: #FFF3C1;border-radius: 32px;}
.banner-01 .txt{margin-bottom: 16px; font-size: 40px; color: #000;}
.banner-01 .txt span{color: var(--theme-color);font-weight: bold;}
.banner-01 a{display: inline-block;padding: 20px;font-size: 22px; background-color: #fff;}
.banner-01 a span{display: inline-block;padding-right: 60px;; vertical-align: middle; color: var(--theme-color);font-weight: bold;}
.banner-01 a .icon {vertical-align: middle;}



.recipe-search-wrap{padding: 80px 0 50px; background-color: #F2F7FD;}
.recipe-search-wrap .main-title{text-align: center;}
.recipe-category-list {display: flex;flex-wrap: wrap;justify-content: center;margin-top: 32px;}
.recipe-category-list > li {margin: 0 15px 30px;}
.recipe-category-list > li > a{display: block;padding: 20px 52px; border-radius: 8px; background-color: #fff; font-size: 20px;font-weight: 500;color: #333;transition: 0.3s;}
.recipe-category-list > li > a:hover{background-color: var(--theme-color);color: #fff;box-shadow: 0px 6px 24px r}

/* #recipe-popular .recipe-list {margin-left:0;}
#recipe-popular .recipe-list li {padding-left:0} */

#recipe-popular .inner-def {overflow: hidden;}
#recipe-popular .swiper {overflow: unset;}
#recipe-popular .swiper-button-prev, #recipe-popular .swiper-button-next {display: block;width: 64px;height: 64px;border-radius: 50%;overflow: unset;box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.18);}
#recipe-popular .swiper-button-prev {top: 50%;left: -22px;margin-top: -32px;}
#recipe-popular .swiper-button-next {top: 50%;right: -22px;margin-top: -32px;}
#recipe-popular .swiper-button-prev::after, #recipe-popular .swiper-button-next::after {display:none;}
#recipe-popular .recipe-list .recipe-img .recipe-release {font-size:26px;}


.recipe-board-latest {}
.recipe-board-latest .board-list {display: flex;gap: 24px;width: 100%;}
.recipe-board-latest .board-list .board-row {flex: 1;}


#footer {margin-top: 120px; padding-bottom: 40px;border-top: 1px solid #ddd;}
.footer-menu{ border-bottom: 1px solid #ddd;}
.footer-menu-list {height: 58px;display: flex;align-items: center;}
.footer-menu-list > li {margin-right: 30px;}
.footer-menu-list > li > a{font-size: 15px; color: #555;}
.footer-info-wrap{margin-top: 40px;}
.footer-info {float: left;}
.footer-info .company-name{font-size: 28px; font-weight: bold; color: #000;}
.footer-info .footer-addr-list{margin-top: 22px;}
.footer-info .footer-addr-list > li{margin-bottom: 5px;}
.footer-info .footer-addr-list > li:last-child{margin-bottom: 0;}
.footer-info .footer-addr-list > li span{display: inline-block; margin-right: 12px; font-size: 15px; color: #888;}
.footer-info .footer-addr-list > li span:last-child{margin-right: 0;}

.footer-cs {position: relative; float: right; padding-left: 30px;}
.footer-cs::before{display: block;content: "";position: absolute;top: 0; left: 0; width: 1px;height: 100%;background-color: #ddd;}
.footer-cs h3{font-size: 18px;color: #000;}
.footer-cs .cs-tel{margin:4px 0 8px; font-size: 34px;color: #000;font-weight: bold;}
.footer-cs .cs-time{font-size: 15px; color: #666;}
.footer-cs .cs-list{margin-right: 14px;margin-top: 14px;}
.footer-cs .cs-list > li{float: left;margin-right: 10px;}
.footer-cs .cs-list > li:last-child{margin-right: 0;}
.footer-cs .cs-list > li > a{display: block;padding: 6px 34px; border-radius: 100px; background-color: var(--theme-color); color: #fff;}


/* 서브 페이지 공통 */
.page-title {margin-bottom: 30px; font-size: 28px; color: #000;}
.list-cnt-wrap {margin-bottom: 16px; font-size: 16px;}
.list-cnt-wrap .list-cnt-txt {color: rgba(0,0,0,0.68);}
.list-cnt-wrap .list-cnt {color: var(--theme-color); font-weight: 500;}


.pagination-wrap{font-family: "GmarketSans"; font-size: 14px;}
.paging, .paging2{justify-content: center;}
.paging, .paging2, .paging .paging-num, .paging2 .paging-num{display: flex; align-items: center;}
.paging > span, .paging2 > span{display: flex; margin-top: 4px;}
.paging .paging-num, .paging2 .paging-num{margin-left: 4px; margin-right: 4px; position: relative; top: -1px;}
.paging .paging-num .page{line-height: normal;}
.paging .paging-num .page, .paging2 .paging-num .page{/*height: 40px;*/ height: auto; /*margin-left: 4px;*/ font-size: 14px; margin:0; padding: 10px;}
.paging .paging-num .page:first-child, .paging2 .paging-num .page:first-child{margin-left: 0;}
.paging .paging-num .page.active span, .paging2 .paging-num .page.active span{position: relative; display: inline-block; color:var(--theme-color); font-weight: 700;}
.paging2 > button span{background-image: none;}
.paging2 .paging-num a.now-num,.paging2 .paging-num a.last-num{display:none;}
.paging2 .paging-num a.on, .paging2 .paging-num a:hover{border-bottom: none;}

.paging button.first-btn, .paging2 button.first-btn{width: 30px;height: 42px;background: url(../img/ico_page2_arrow_prev_2x.png) no-repeat center;background-size: 15px 14px; opacity: .3;}
.paging button.last-btn, .paging2 button.last-btn{width: 30px;height: 42px;background: url(../img/ico_page2_arrow_next_2x.png) no-repeat center;background-size: 15px 14px; opacity: .3;}
.paging button.prev-btn, .paging2 button.prev-btn{width: 30px;height: 42px;background: url(../img/ico_page2_arrow_left_2x.png) no-repeat center;background-size: 9px 14px;}
.paging button.next-btn, .paging2 button.next-btn{width: 30px;height: 42px;background: url(../img/ico_page2_arrow_right_2x.png) no-repeat center;background-size: 9px 14px;}
.paging .paging-num .page, .paging .first-btn, .paging .last-btn, .paging2 .paging-num .page, .paging .first-btn, .paging2 .last-btn{display: inline-block;}
.paging .prev-btn, .paging .next-btn, .paging2 .prev-btn, .paging2 .next-btn{position: static; transform: none;}

.pagination-wrap {margin-top: 24px;font-family: 'Noto Sans KR';font-weight: normal;text-align: center;}
.paging button {width: 30px;height: 42px;background: url("../img/ico_pagination_2x.png") no-repeat;background-size: 120px 42px;}
.paging button span {display: inline-block;font-size: 0;text-indent: -999px;}
.paging .first-btn {background-position: 0 0;}
.paging .prev-btn {background-position: -30px 0;}
.paging .next-btn {background-position: -60px 0;}
.paging .last-btn {background-position: -90px 0;}
.paging .paging-num {display: inline-block;margin: 0 12px;vertical-align: middle;}
.paging .paging-num .page {display: inline-block;width: 30px;height: 46px;font-size: 16px;color: rgba(0, 0, 0, 0.58);cursor: pointer;}
.paging .paging-num .page.active, .paging .paging-num .page:hover {font-weight: bold;color: #383838;color: var(--theme-color);}
.paging .paging-num .now-num, .paging .paging-num .last-num {display: none;}

.pg_wrap {text-align: center;}
.pg_wrap .pg {display: flex;align-items: center;justify-content: center;}

.pg_wrap .pg .page {display: inline-block;width: 30px;height: 46px;line-height: 46px;font-size: 16px;color: rgba(0, 0, 0, 0.58);cursor: pointer;}
.pg_wrap .pg .page.pg_current, .pg_wrap .pg .page:hover {font-weight: bold;color: #383838;color: var(--theme-color);}

.pg_wrap .pg .pg_start{display: inline-block;width: 30px;height: 42px;background: url(../img/ico_page2_arrow_prev_2x.png) no-repeat center;background-size: 15px 14px; opacity: .3;font-size: 0;}
.pg_wrap .pg .pg_end{display: inline-block;width: 30px;height: 42px;background: url(../img/ico_page2_arrow_next_2x.png) no-repeat center;background-size: 15px 14px; opacity: .3;font-size: 0;}
.pg_wrap .pg .pg_prev{display: inline-block;width: 30px;height: 42px;background: url(../img/ico_page2_arrow_left_2x.png) no-repeat center;background-size: 9px 14px;font-size: 0;}
.pg_wrap .pg .pg_next{display: inline-block;width: 30px;height: 42px;background: url(../img/ico_page2_arrow_right_2x.png) no-repeat center;background-size: 9px 14px;font-size: 0;}



/* 레시피 목록 */
.search-wrap {margin-bottom: 50px; padding: 50px 50px; background: #FFFFFF;border: 1px solid #EBEBEB;box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.18);border-radius: 18px;}
.search-wrap .search-inner {max-width: 750px; margin: 0 auto;}
.search-box {display: flex;justify-content: space-between;align-items: center; padding-bottom: 30px;}
.search-box .search-input-wrap {position: relative; width: calc(100% - 166px); height: 80px;}
.search-box .search-input-wrap i {position: absolute;top: 50%;left: 24px;margin-top: -18px;}
.search-box .search-input-wrap input {width: 100%; height: 100%; padding-left: 90px; border: 4px solid #FC6736;border-radius: 100px;font-size: 18px;font-weight: bold;color: rgba(0, 0, 0, 0.78);}
.search-box .search-input-wrap input::placeholder {font-size: 18px; color: rgba(0,0,0,0.48);}
.search-box .btn-search-filter {display: flex;align-items: center;justify-content: center; width: 146px; height: 80px; border-radius: 300px; background-color: var(--theme-color); color: #fff; font-size: 24px; font-weight: 500;}
.search-box .btn-search-filter span{margin-right: 14px;}


.search-filter {}
.search-filter .filter-list {margin-bottom: 30px;}
.search-filter .filter-list:last-child {margin-bottom: 0;}
.search-filter .filter-list > b {display: block; margin-bottom: 10px; font-size: 16px; color: #333;}
.search-filter .filter-list .sort-list{display: flex;}
.search-filter .filter-list .sort-list li{margin-right: 14px;}
.search-filter .filter-list .sort-list li a {}
.search-filter .filter-list .sort-list li a .radio {display: inline-block;vertical-align: middle;width: 16px;height: 16px;background-image: url("../img/icon_input_radio_off_2x.png");background-size: 16px 16px;background-repeat: no-repeat;}
.search-filter .filter-list .sort-list li a.on .radio {background-image: url("../img/icon_input_radio_on_2x.png");}
.search-filter .filter-list .sort-list li a span {display: inline-block;margin-left: 4px;vertical-align: middle;color: rgba(0, 0, 0, 0.68);font-weight: 500;}

.search-filter .filter-list .category-list {display: flex;  flex-wrap: wrap;}
.search-filter .filter-list .category-list li {margin-right: 8px; margin-bottom: 4px;}
.search-filter .filter-list .category-list li:last-child{margin-right: 0;}
.search-filter .filter-list .category-list li a {display: inline-block;padding: 8px 14px;text-align: center;border-radius: 100px;border: 1px solid #EBECF0;background-color: #EBECF0;color: rgba(0, 0, 0, 0.68);font-weight: 500;}
.search-filter .filter-list .category-list li a.on {border: 1px solid var(--theme-color);color: var(--theme-color);background-color: #fff;}
.search-filter .filter-list .category-list li p input {display: none;}
.search-filter .filter-list .category-list li p input + label {display: inline-block; padding: 8px 14px; text-align: center; border-radius: 100px; border: 1px solid #EBECF0; background-color: #EBECF0; color: rgba(0,0,0,0.68); font-weight: 500; cursor: pointer;}
.search-filter .filter-list .category-list li p input:checked + label {border: 1px solid var(--theme-color); color: var(--theme-color); background-color: #fff;}


/* 레시피 상세 */
.recipe-detail-wrap {}
.recipe-thum-wrap {margin-bottom: 24px;}
.recipe-thum-img {position: relative;overflow: hidden;}
.recipe-thum-img img {}
.recipe-thum-img .recipe-release {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, 0.38);font-size: 38px;color: rgba(255, 255, 255, 0.9);font-weight: bold;}
.recipe-live {position: absolute; top: 24px; left: 24px; display: inline-block; padding: 8px 20px; border-radius: 100px; background-color: #fff; border: 2px solid #FF3E3E;}
.recipe-live .icon.live {position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(255,75,75,0.4); vertical-align: middle;}
.recipe-live .icon.live::after {display: block;content: ''; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background-color: #FF3E3E;}
.recipe-live span {display: inline-block; margin-left: 12px; font-size: 18px ;font-weight: 500; color: #FF3E3E; vertical-align: middle;}

.recipe-thum-gallery-img {margin-top: 24px;overflow: hidden;}
.recipe-thum-gallery-img .swiper-slide {border-radius: 10px;overflow: hidden;cursor:pointer;}

.recipe-title-info {position: relative; margin-top: 30px;}
.recipe-title-info .recipe-sub-title {display: flex;align-items: center;justify-content: space-between;padding-bottom: 8px;}
.recipe-title-info .recipe-sub-title .release-date {color: rgba(0, 0, 0, 0.48);font-size: 16px;}
.recipe-title-info .recipe-sub-title .recipe-type {}
.recipe-title-info .recipe-sub-title .recipe-type .type3 {display: inline-block;padding: 2px 8px;border-radius: 100px;background-color: #7eb2fe;font-size: 12px;color: #fff;text-align: center;}
.recipe-title-info .recipe-sub-title .recipe-type .type2 {display: inline-block;padding: 2px 8px;border-radius: 100px;background-color: #9BCE26;font-size: 12px;color: #fff;text-align: center;}
.recipe-title-info .recipe-sub-title .recipe-type .type4 {display: inline-block;padding: 2px 8px;border-radius: 100px;background-color: #F65C60;font-size: 12px;color: #fff;text-align: center;}
.recipe-title-info .title {padding-right: 38px;font-size: 38px; font-weight: bold; color: #000;word-break: keep-all;}
.recipe-title-info .title br {display:none;}
.recipe-title-info .recipe-tag-list {margin-top: 30px;}
.recipe-title-info .recipe-tag-list > p {display: inline-block; margin-right: 10px; padding: 8px 14px; background-color: #f3f3f3; border-radius: 18px; font-size: 15px;}
.recipe-title-info .recipe-tag-list > p:last-child {margin-right: 0;}
.recipe-title-info .recipe-tag-list .recipe-cate {}
.recipe-title-info .recipe-tag-list .recipe-cate i {margin-right: 2px; vertical-align: middle;}
.recipe-title-info .recipe-tag-list .recipe-cate span {display: inline-block; vertical-align: middle;}
.recipe-title-info .recipe-tag-list .recipe-tag {}
.recipe-title-info .recipe-tag-list .recipe-tag span {color: #333;}
.recipe-title-info .recipe-tag-list .recipe-tag .t {position: relative;}
.recipe-title-info .recipe-tag-list .recipe-tag .t::after{display: inline-block;content: ""; width: 1px;height: 10px;margin: 0 10px;background-color: #ccc;}
.recipe-title-info .recipe-tag-list .recipe-tag .n {}
.recipe-title-info .btn-bookmark {position: absolute; top: 35px; right: 0;}
.recipe-title-info .recipe-explan {margin-top: 24px;color: rgba(0, 0, 0, 0.48);font-size: 16px;white-space: pre-line;word-break: keep-all;}

.recipe-detail-info-wrap {padding-top: 24px;border-top: 1px solid #ddd;}
.recipe-detail-info-wrap > div {margin-top: 60px;}
.recipe-detail-info-wrap > div:first-child {margin-top: 0px;}
.recipe-detail-info-wrap .recipe-editor img {max-width: 360px;margin-bottom: 12px;}
.recipe-detail-info-wrap .recipe-video {position: relative;width: 100%;padding: 56.25% 0 0 0; background-color: #f4f4f4;}
.recipe-detail-info-wrap .recipe-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.recipe-detail-title {display: block; margin-bottom: 8px; font-size: 15px; font-weight: bold; color: #333;}

.recipe-ingredient {}
.recipe-ingredient-list {margin-left: -18px;}
.recipe-ingredient-list > li{float: left; width: 50%; margin-bottom: 8px; padding-left: 18px; cursor: pointer;}
.recipe-ingredient-list > li p input {display: none;}
.recipe-ingredient-list > li p input + label {display: flex; justify-content: space-between; padding: 16px 20px; background-color: #F4F4F4; border: 2px solid #F4F4F4; color: rgba(0,0,0,0.68); font-size: 16px; transition: 0.2s; cursor: pointer;}
.recipe-ingredient-list > li p input:checked + label {background-color: #fff; border: 2px solid var(--theme-color); color: var(--theme-color);}
.recipe-ingredient-list > li p input + label:hover {background-color: #fff; border: 2px solid var(--theme-color); color: var(--theme-color);}
.recipe-ingredient-list > li .ingredient{}
.recipe-ingredient-list > li .amount{}

.recipe-step {}
.recipe-step-list > li {display: flex; margin-bottom: 20px; font-size: 18px; line-height: 1.5;}
.recipe-step-list > li:last-child {margin-bottom: 0;}
.recipe-step-list > li .step {padding-right: 6px; color: var(--theme-color); font-weight: bold;}
.recipe-step-list > li .text {color: #333; word-break: keep-all;}

.recipe-tip-list {}
.recipe-tip-list > li {margin-bottom: 0;font-size: 14px;}
.recipe-tip-list > li .step {font-weight: 500;}
.recipe-tip-list > li .text {color: rgba(0, 0, 0, 0.58);}

.recipe-editor {margin-top:30px !important;padding-top: 30px;border-top: 1px solid #ddd;}
.recipe-editor a {color: #4a90e2 !important;}

.recipe-memo {position: relative;}
.recipe-memo .memo-title {position: relative;height: 50px;background: #fdf7bc;}
.recipe-memo .memo-title .text {display:block;position: absolute;top: 11px;left: 50%;width: 120px;margin-left: -60px;padding: 4px 32px;letter-spacing: 0;text-align: center;background: var(--theme-color);color: #fff;border-radius: 50%;font-size: 18px;font-weight: bold;}
.recipe-memo .memo-title .btn-save-memo {position: absolute;top: 13px;right: 16px;background: #fff;padding: 4px 6px;color: var(--theme-color);font-weight: bold;font-size: 12px;}
.recipe-memo .memo {position: relative;width: 100%;height: 180px;padding: 12px 12px 12px;border: none;resize: none;line-height: 24px;font-size: 14px;border-radius: 0px;background:#fdf7bc;overflow: auto;}
.recipe-memo .info {margin-top: 4px;color: rgba(0, 0, 0, 0.58);font-size: 13px;}



.recipe-file {}
.recipe-file-list {display: flex;flex-wrap: wrap;gap: 8px;}
.recipe-file-list > li {display: inline-block;border: 1px solid #ccc;border-radius: 100px;padding: 10px 20px;}
.recipe-file-list > li > i {color: #bcbcbc;}
.recipe-file-list > li > a {margin-left: 4px;color: rgba(0, 0, 0, 0.58);}

.recipe-vote {margin-top: 60px;}
.recipe-vote .vote-title {display: block; margin-bottom: 8px; font-size: 15px; font-weight: bold;color: var(--theme-color);}
.vote-list {}
.vote-list > li {width: 100%; margin-bottom: 8px;}
.vote-list > li:last-child {margin-bottom: 0;}
.vote-list > li p input {display: none;}
.vote-list > li p input + label {position: relative; display: block; width: 100%; height: 52px; padding: 15px 20px; background-color: #f4f4f4; border: 2px solid #f4f4f4; border-radius: 100px; cursor: pointer;}
.vote-list > li p input:checked + label {background-color: #fff; border: 2px solid var(--theme-color);}
.vote-list > li p input + label span {font-size: 16px; font-weight: 500; color: rgba(0,0,0,0.68);}
.vote-list > li p input:checked + label span {color: var(--theme-color);}
.vote-list > li p input + label i {position: absolute; top: 50%; right: 20px; margin-top: -9px; display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ccc;}
.vote-list > li p input:checked + label i {border: 2px solid var(--theme-color); background-color: var(--theme-color);}
#poll_btn {padding: 0 !important;}
#poll_btn button {width: 100%;height: 34px;color: #fff;background-color: var(--theme-color) !important; border-radius: 100px !important;}

.vote-result {}
.vote-result > li {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 52px; margin-bottom: 8px; padding: 0 20px; background-color: #cdcdcd; border-radius: 100px;}
.vote-result > li:last-child {margin-bottom: 0;}
.vote-result > li span {position: relative; display: block; font-weight: 500; z-index: 1;}
.vote-result > li .vote-name {color: #fff;}
.vote-result > li .vote-per {color: #fff;}
.vote-result > li .vote-grapth {position: absolute; top: 0; left: 0; display: block; height: 100%; border-radius: 100px; background-color: var(--theme-color);}

.recipe-hashtag {margin-top: 30px;}
.recipe-hashtag-list {display: flex; flex-wrap: wrap;}
.recipe-hashtag-list > li {padding-right: 8px; padding-bottom: 4px;}
.recipe-hashtag-list > li span {display: inline-block; padding: 10px 20px; border: 1px solid #ccc; border-radius: 100px; color: rgba(0,0,0,0.58); cursor: pointer;}



.board-comment-wrap {margin-top: 30px; padding-top: 30px; border-top: 1px solid #ccc;}
.comment-cnt-wrap {margin-bottom: 30px;}
.comment-cnt-wrap .comment-cnt-txt {font-size: 16px; font-weight: 500;}
.comment-cnt-wrap .comment-cnt-txt .list-cnt {font-weight: bold; color: var(--theme-color);}

.comment-list {}
.comment-list .bo_vl_opt {position: absolute;top: 0;right: 0;}
.comment-list .btn_cm_opt {}
.comment-list .bo_vc_act{display:none;position: absolute;top: 22px;right: 0;width: 50px;border: 1px solid #ddd;text-align: center;color: rgba(0, 0, 0, 0.38);background: #fff;z-index: 1;}
.comment-list .bo_vc_act.active{display:block;}
.comment-list .bo_vc_act > li {border-bottom:1px solid #ddd;}
.comment-list .bo_vc_act > li:last-child {border-bottom:none;}
.comment-list .bo_vc_act > li > a {display:block;color: rgba(0, 0, 0, 0.38);line-height: 22px;font-size: 13px;}

.comment-row {position: relative; display: flex;flex-direction: row; margin-bottom: 22px;}
.comment-row .mem-profile {width: 50px; height: 50px; border-radius: 50%;border: 1px solid #ddd; overflow: hidden;}
.comment-row .mem-profile img {}
.comment-row .comment-info {padding-left: 12px;}
.comment-row .comment-info .mem-nickname {margin-right: 4px; font-size: 12px;}
.comment-row .comment-info .comment-date {font-size: 12px; color: rgba(0,0,0,0.38);}
.comment-row .comment-info .comment-text {padding-top: 8px;}
.comment-row .comment-set {position: absolute; top: 0; right: 0;}
.comment-row .comment-set span {display: inline-block; border: 1px solid #ccc; border-radius: 4px; padding: 1px 4px;font-size: 12px; color: rgba(0,0,0,0.58); cursor: pointer;}

.comment-write {display: flex; flex-wrap: wrap;margin-top:24px;}
.comment-write textarea {width: calc(100% - 70px);padding: 12px;background-color: #f6f6f6;border: 1px solid #ccc;border-radius: 8px 0 0 8px;}
.comment-write button {display: block; width: 70px; background-color: var(--theme-color); color: #fff; font-weight: 500; border-radius: 0 8px 8px 0;}

/* 댓글 html 사용 */
.comment-list {}
.comment-row {}
.comment-row .pf_img {flex-shrink: 0;width: 50px;height: 50px;border-radius: 50%;overflow: hidden;}
.comment-row .pf_img img {min-width: 50px;min-height: 50px;}
.comment-row .cm_wrap {flex-grow: 1;flex-shrink: 0;flex-basis: 0;padding-left: 12px;}
.comment-row .cm_wrap .member {margin-right: 4px;font-size: 13px;}
.comment-row .cm_wrap .bo_vc_hdinfo {font-size: 13px;color: rgba(0, 0, 0, 0.38);}
.comment-row .cm_wrap .cmt_contents {padding-top: 8px;}
.comment-row {}

.bo_vc_w .wr_content {resize: none;}
.bo_vc_w .btn_submit {}

.no-membership {}
.sign-membership {position: relative; width: 100%; padding: 24px; border: 1px solid #ddd; border-radius: 12px;}
.sign-membership .text {display: inline-block; font-size: 13px; color: rgba(0,0,0,0.58);word-break: keep-all;}
.sign-membership .price {position: absolute; top: 28px; right: 24px; display: inline-block; font-size: 16px; color: #000; font-weight: 500;}
.sign-membership .btn-sign-membership {display: block; width: 100%; margin-top: 12px; padding: 16px; background-color: var(--theme-color); border-radius: 8px; text-align: center; font-size: 18px; font-weight: bold; color: #fff;}

.buy-recipe {display: flex; justify-content: space-between; align-items: center; margin-top: 24px; width: 100%; padding: 24px; border: 1px solid #ddd; border-radius: 12px;}
.buy-recipe .text {display: inline-block; font-size: 13px; color: rgba(0,0,0,0.58);}
.buy-recipe .text br {display:none;}
.buy-recipe .btn-buy-recipe {display: inline-block; width: 44%; padding: 16px; background-color: var(--theme-color); border-radius: 8px; text-align: center; font-size: 18px; font-weight: bold; color: #fff;}
.buy-recipe .btn-buy-recipe span {margin-left: 6px;}

/* 기본 게시판 */
.board-list-wrap {}
.board-header {display: flex; align-items: center; height: 50px; border-top: 1px solid #000; border-bottom: 1px solid #ddd;}
.board-header > li {}
.board-header > li.board-chk {flex-shrink: 0; width: 30px;}
.board-header > li.board-no {flex-shrink: 0; width: 60px;}
.board-header > li.board-title {flex-grow: 1;}
.board-header > li.board-date {flex-shrink: 0; width: 80px;}
.board-header > li.board-cate {flex-shrink: 0; width: 80px;}
.board-header > li.board-status {flex-shrink: 0; width: 80px;}
.board-header > li span{display: block; text-align: center; color: #000; font-weight: 500;}


.board-list {}
.board-list > li {display: flex; align-items: center; height: 50px; border-bottom: 1px solid #ddd;}
.board-list > li > div {}
.board-list > li > div.board-chk {flex-shrink: 0; width: 30px; text-align: center;}
.board-list > li > div.board-no {flex-shrink: 0; width: 60px;}
.board-list > li > div.board-title {flex-grow: 1;}
.board-list > li > div.board-date {flex-shrink: 0; width: 80px;}
.board-list > li > div.board-cate {flex-shrink: 0; width: 80px;}
.board-list > li > div.board-status {flex-shrink: 0; width: 80px; text-align: center;}
.board-list > li > div > span {display: block; text-align: center;}
.board-list > li > div.board-title > a {display: block; padding-left: 30px; text-align: left;}
.board-list > li > div.board-date > span {color: rgba(0, 0, 0, 0.58);}
.board-list > li > div.board-no .notice {color: var(--theme-color); font-weight: 500;}
.board-list > li.empty-board {justify-content: center;}

.board-cate-wrap {margin-bottom: 30px;}
.board-cate-list {display: flex; flex-wrap: wrap;}
.board-cate-list > li {margin-right: 8px; margin-bottom: 4px;}
.board-cate-list > li > a {display: block; padding: 10px 28px; background-color: #f4f4f4; border-radius: 100px; color: rgba(0, 0, 0, 0.58);}
.board-cate-list > li > a.on {background-color: var(--theme-color); color: #fff;}


/* 갤러리 게시판 */
.gallery-list-wrap {}
.gallery-list {margin-left: -30px;}
.gallery-list li{float: left; padding-left: 30px; padding-bottom: 20px;}
.gallery-list li.w25 {width: 25%;}
.gallery-list li.empty_list {width: 100%;padding: 30px;text-align: center;}
.gallery-list .gallery-box {position: relative;}
.gallery-list .gallery-box .list-chk {position: absolute;top: 10px;left: 10px;z-index: 9;}
.gallery-list .gallery-detail {}
.gallery-list .gallery-thum {position: relative; padding-top: 70%; overflow: hidden; border-radius: 16px; overflow: hidden;}
.gallery-list .gallery-thum p {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.gallery-list .gallery-thum p img {width: 100%; height: 100%; object-fit: cover}
.gallery-list .gallery-info {padding-top: 12px;}
.gallery-list .gallery-info .title {height: 40px; font-size: 16px; font-weight: bold;}
.gallery-list .gallery-info .write-info {position: relative; margin-top: 4px; text-align: right; font-size: 13px; color: rgba(0, 0, 0, 0.38);}
.gallery-list .gallery-info .write-info .write-member {position: relative; margin-right: 12px;}
.gallery-list .gallery-info .write-info .write-member::after {display: block; content: ''; position: absolute; top: 50%; right: -8px; margin-top: -4px; width: 1px; height: 8px; background-color: #ccc;}
.gallery-list .gallery-info .write-info .write-date {}


/* 게시판 상세 */
.board-detail-wrap {}
.board-detail {}
.board-detail .board-write-info {color: rgba(0, 0, 0, 0.58);}
.board-detail .board-write-info .board-write-member {position: relative;margin-right: 12px;}
.board-detail .board-write-info .board-write-member::after {display: block;content: '';position: absolute;top: 50%;right: -8px;margin-top: -4px;width: 1px;height: 8px;background-color: #ccc;}

.board-detail .board-tile-info {margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #ccc;}
.board-detail .board-tile-info .board-title {padding-bottom: 12px; font-size: 24px; color: #000; font-weight: bold;}
.board-detail .board-tile-info .board-title .notice {margin-right: 4px;color: var(--theme-color);}
.board-detail .board-tile-info .board-title .cate {margin-right: 6px; color: var(--theme-color);} 
.board-detail .board-tile-info .board-write-info {text-align: right;}
.board-detail .board-view {min-height: 140px; padding-bottom: 30px;}
.board-detail .board-view img {margin-bottom: 8px;}

.board-detail .board-answer {padding-top: 12px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.board-detail .board-answer .board-write-info {padding-bottom: 12px;}


.board-btn {display: flex; justify-content: space-between; align-items: center; margin-top:24px;}
.board-btn .board-btn-left {}
.board-btn .board-btn-left .btn {}
.board-btn .board-btn-right {}
.board-btn .board-btn-right .btn {}

.board-navi {margin-top: 30px;}
.board-navi-list {border-top: 1px solid #ddd;}
.board-navi-list > li {display: flex; align-items: center; height: 52px; border-bottom: 1px solid #ddd;}
.board-navi-list > li span {flex-shrink: 0; display: block; width: 80px; padding-left: 12px; color: rgba(0, 0, 0, 0.58);}
.board-navi-list > li a {flex-grow: 1; display: block; color: rgba(0, 0, 0, 0.78);}

.empty-list {text-align: center;font-size: 14px;padding: 24px 0;}
.empty-list a {font-weight: bold;}

/*  결제하기 */
.sel-payment {display: flex;     justify-content: space-between;}
.sel-payment > p {width: 49%;}
.price-info {display: flex; justify-content: space-between; align-items: center;}
.price-info b {font-size: 16px; color: #000;}
.price-info .price-text {}
.price-info .price-text span {display: inline-block; vertical-align: middle; font-size: 18px; color: rgba(0, 0, 0, 0.78);} 
.price-info .price-text .price {font-size: 24px; color: var(--theme-color); font-weight: bold;}



/* 마이페이지 */
.mypage-wrap {}
.member-info {margin-bottom: 30px; color: #000;}
.member-info .name {display: inline-block; font-size: 26px; font-weight: bold;}
.member-info span {font-size: 18px;}

.membership-info {position: relative; margin-bottom: 16px; padding: 24px; border: 1px solid #ddd; border-radius: 12px;}
.membership-info .title {padding-bottom: 18px; font-size: 18px; color: #000; font-weight: bold;}
.membership-info .period-info {}
.membership-info .period-info .text {font-size: 13px;color: rgba(0, 0, 0, 0.58);word-break: keep-all;}
.membership-info .period-info .use-date {display: inline-block; vertical-align: middle; font-size: 16px;}
.membership-info .period-info .use-date span {font-weight: bold; color: #000;}
.membership-info .period-info .start-date {display: inline-block; vertical-align: middle; color: rgba(0, 0, 0, 0.58);}
.membership-info .period-info .start-date::before {display: inline-block; content: ''; width: 1px; height: 10px; margin:0 8px; background-color: #ccc;}
.membership-info .btn {position: absolute; top: 50%; right: 24px; margin-top: -20px; display: block; width: 110px; height: 40px; line-height: 40px; text-align: center; border-radius: 6px; background-color: var(--theme-color); color: #fff;}
.btn-membership-cancel {display: block;position: relative;float: right;padding-right: 16px;font-size: 13px;color: rgba(0, 0, 0, 0.38);}
.btn-membership-cancel::after {content:'';position: absolute;top: 1px;right: 0;display:block;width:10px;height:14px;opacity: 0.3;background-image: url("../img/icon_right_arrow_02_2x.png");background-repeat: no-repeat;background-size: 10px 14px;}

.my-point {position: relative;display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;padding: 24px;border: 1px solid #ddd;border-radius: 12px;}
.my-point .point-info {font-size: 18px;color: #000;font-weight: bold;}
.my-point .point-info .point {margin-left: 12px;}
.my-point .point-info .point b {color:var(--theme-color)}
.my-point .btn-list {display: flex;align-items: center;gap: 6px;}
.my-point .btn-list a {display: block;padding: 6px 14px;background: #f3f3f3;border-radius: 6px;color: rgba(0, 0, 0, 0.58);}

.my-recipe-cnt {position: relative; display: flex; margin-bottom: 30px; border: 1px solid #ddd; border-radius: 12px;}
/* .my-recipe-cnt::after {display: block; content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color: #ddd;} */
.my-recipe-cnt > a {position: relative; display: flex; justify-content: space-between; align-items: center;flex-direction: column;gap: 6px; width: 50%; height: 100%; padding: 14px 0;border-right: 1px solid #ddd;}
.my-recipe-cnt > a:last-child {border-right: none;}
.my-recipe-cnt > a span {}
.my-recipe-cnt > a .title {font-size: 16px;}
.my-recipe-cnt > a .cnt {font-size: 18px; font-weight: bold; color: var(--theme-color);}

.mypage-menu {margin-bottom: 30px;}
.mypage-menu .title {margin-bottom: 12px; padding-bottom: 12px; font-size: 18px; color: #000; border-bottom: 1px solid #ddd;}
.mypage-menu {}
.mypage-menu-list {}
.mypage-menu-list > li {}
.mypage-menu-list > li > a{display: block; padding: 8px 0; color: rgba(0, 0, 0, 0.78);}

.mypage-wrap .btn-logout {width: 100%; height: 52px; border-radius: 0; font-weight: 500;}

.leave-wrap {margin-top: 30px;}
.leave-wrap .btn-leave {float: right; color: rgba(0, 0, 0, 0.58); font-size: 15px;}

/* 멤버십 관리 */
.payment-info {display: flex; justify-content: space-between; align-items: center;}
.payment-info .payment-number {font-size: 16px; color: rgba(0, 0, 0, 0.58);}
.payment-info .payment-change {display: block; padding: 12px 20px; background-color: #eee; border-radius: 100px; color: rgba(0, 0, 0, 0.58); font-weight: 500;}



/* 결제내역 */
.my-order {}
.my-order-list {}
.my-order-list > li {position: relative; padding: 16px 64px 16px 0; border-bottom: 1px solid #ddd;}
.my-order-list > li.empty {padding-right: 0;text-align: center;}
.my-order-list > li .order-date {padding-bottom: 12px; color: rgba(0, 0, 0, 0.58);}
.my-order-list > li .order-status {position: absolute; top: 12px; right: 0; display: inline-block; padding: 4px 8px; font-size: 12px; border-radius: 4px;}
.my-order-list > li .order-status.order-status-cancel {border: 1px solid #F64545; color: #F64545;}
.my-order-list > li .order-status.order-status-complete {background-color: #3F67F8; color: #fff;}
.my-order-list > li .order-status.order-status-deposit-complete {background-color: #53B04B; color: #fff;}
.my-order-list > li .order-status.order-deposit-checking {background-color: #E4FBE2; color: #449D3D;}
.my-order-list > li .order-item {font-weight: bold;}
.my-order-list > li .order-item br {display:none;}
.my-order-list > li .order-pay {position: absolute; right: 0; bottom: 16px; font-weight: bold; color: #000;}



/* qna */
.qna-status-wait {display: inline-block !important; margin: 0 auto; padding: 4px 8px; border-radius: 4px; background-color: #f4f4f4; font-size: 13px; color: rgba(0, 0, 0, 0.58);}
.qna-status-complate {display: inline-block !important; margin: 0 auto; padding: 4px 8px; border-radius: 4px; background-color: var(--theme-color); font-size: 13px; color: #fff;}


/* faq */
.faq-search {position: relative; margin-bottom: 24px;}
.faq-search .faq-sch-input { position: relative; width: 100%; height: 50px; padding: 0 30px; border: 1px solid #000; border-radius: 100px;}
.faq-search button {position: absolute; top: 50%; right: 30px; margin-top: -15px;}

.faq-list-wrap {margin-top: 12px; border-top: 1px solid #ddd;}
.faq-list {}
.faq-list > li{border-bottom: 1px solid #ddd;}
.faq-list .faq-qeustion {position: relative; padding: 18px 0; cursor: pointer; font-size: 16px; font-weight: bold; color: #000;}
.faq-list .faq-qeustion::after {display: block; content: ''; position: absolute; top: 50%; right: 0; margin-top: -6px; width: 12px; height: 12px ;background: url("../img/icon_plus_2x.png"); background-size: 12px 12px;}
.faq-list .faq-qeustion.on::after {background-image: url('../img/icon_minus_2x.png');}
.faq-list .faq-qeustion span {margin-right: 12px;}
.faq-list .faq-qeustion a {}
.faq-list .faq-qeustion a > * {display:inline;}
.faq-list .faq-answer {display: none; min-height: 64px; padding: 12px; background-color: #f4f4f4; border-top: 1px solid #ddd;}
.faq-list .faq-answer.on {display: block;}

.no-data {text-align: center;padding: 14px 0;font-size: 16px;}


/* 멤버십 소개 */
.membership-intro {background-color: #FEF4D1;}

.membership-top {padding: 80px 0 60px;text-align: center;}
.membership-top .sub-title {position: relative;}
.membership-top .sub-title p {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 15px;color:#FFAE00;font-weight:bold;}
.membership-top .sub-title i {display:inline-block;width: 54px;height: 54px;margin: 0 -6px;background-color: #fff;border-radius: 50%;}
.membership-top .title {display: block;padding: 30px 0 40px; font-family: yg-jalnan;font-weight: bold;color: #FC6736;font-size: 42px;}
.membership-top .text {font-size: 18px;line-height: 160%;}

.membership-first {padding: 30px 0; background-color: #FFB700;}
.membership-first p {font-weight: 700;font-size: 24px;color: #fff;text-align: center;}

.membership-second {display: flex;justify-content: center;padding: 50px 0; background-color: #fff;}
.membership-second ul {padding:0 12px;}
.membership-second ul > li {position: relative;padding-bottom: 20px;padding-left: 30px;font-size: 20px;}
.membership-second ul > li::before {content:'';position: absolute;top: 1px;left: 0;display:block;width:20px;height:20px;background: url("../img/icon_pin_2x.png");    background-size: 20px 20px;}
.membership-second ul > li:last-child {padding-bottom:0;}
.membership-second ul > li > b {}
.membership-second ul > li > .small {display:block;margin-top: 4px;font-size: 13px;color: rgba(0, 0, 0, 0.48);}


.membership-third {padding: 50px 0; background-color: #FEF4D1;}
.membership-third h3 {font-size: 20px;text-align: center;}
.membership-third .price-text {text-align: center;}
.membership-third .price-text .price {display: inline-block;padding: 50px 0; font-size: 30px;font-weight: bold;text-align: center;}
.membership-third .price-text .price .small {display: block;margin-top: 4px;font-weight: 400;font-size: 13px;color: rgba(0, 0, 0, 0.48);text-align: right;}
.membership-third button {display: block;width: 240px;height: 55px;margin: 0 auto;border-radius: 0;}
.membership-third .desc {margin-top: 60px;padding-top: 40px;border-top: 1px solid #333;}
.membership-third .desc h4 {font-size: 15px;}
.membership-third .desc ul {padding: 16px 0;}
.membership-third .desc ul > li {position: relative;margin-bottom: 10px;margin-left: 12px;padding-left: 12px;font-size: 15px;}
.membership-third .desc ul > li::before {content:'';position: absolute;top: 50%;left: 0;display:block;width:4px;height:4px;margin-top: -2px;border-radius: 50%;background: #000;}
.membership-third .desc ul > li:last-child {margin-bottom: 0;}
.membership-third .desc ul > li > b {color: #FC6736;}
.membership-third .desc .check {padding-left: 12px;}

.membership-event {margin-bottom: 36px;text-align: center;}
.membership-event .text {position: relative;display: inline-block;padding: 58px 24px 24px;background: #fff;border-radius: 12px;font-size: 16px;box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.15);}
.membership-event .text::before {content:'EVENT';position: absolute;top: 0;left: 0;display:block;width:100%;height:34px;line-height: 34px;background:#FF4500;color:#fff;text-align: center;border-radius: 12px 12px 0 0;}
.membership-event .text .title {color:#FF4500;}
.membership-event .text .sub {}
.membership-event .text .point {margin-top: 8px;font-size: 20px;}
.membership-event .text .point b {color:#FF4500;}


/* 사용자 레시피 작성 (엠버서더 게시판) */
.recipe-info .btn_del {display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%;border: 1px solid #ddd;}
.recipe-ingredient-input-list {}
.recipe-ingredient-input-row {position: relative;display: flex;align-items: center;justify-content: space-between;gap: 10px;margin-bottom: 12px;border-bottom: 1px solid #ddd;padding-bottom: 10px;}
.recipe-ingredient-input-row > div {}
.recipe-ingredient-input-row .recipe-ingredient-input {display: flex;align-items: center;gap: 6px;}
.recipe-ingredient-input-row .recipe-ingredient-input label {display: block;width: 80px;}
.recipe-ingredient-input-row .recipe-ingredient-input input {}
.recipe-ingredient-input-row .btn_del_ingredient {}


.recipe-input-list {}
.recipe-input-row {display: flex;align-items: center;margin-bottom: 12px;border-bottom: 1px solid #ddd;padding-bottom: 10px;}
.recipe-input-row .recipe-input {display: flex;align-items: center;gap: 8px;width: 100%;}
.recipe-input-row .recipe-input label {width: 80px;}
.recipe-input-row .recipe-input input {flex-grow: 1;width: initial;}

.tip-input-row {display: flex;align-items: center;margin-bottom: 12px;border-bottom: 1px solid #ddd;padding-bottom: 10px;}
.tip-input-row .recipe-input {display: flex;align-items: center;gap: 8px;width: 100%;}
.tip-input-row .recipe-input label {width: 80px;}
.tip-input-row .recipe-input input {flex-grow: 1;width: initial;}

.board-recipe .board-detail .board-view img {max-height:180px;}

/* 레시피 메모 */
.recipe-memo {}
.recipe-memo .memo-list-wrap {margin-left: -16px;}
.memo-list-wrap .memo-list {float: left;width: 25%;height: 197px;padding-left: 16px;padding-bottom: 16px;}
.memo-list-wrap .memo-list > a {display: flex;flex-direction: column;height: 100%;padding: 12px 16px;background: #fdf7bc;border: 1px solid #e4dfa4;border-radius: 2px;}
.memo-list-wrap .memo-list .memo-recipe-title {margin-bottom: 12px;font-size: 15px;font-weight: bold;}
.memo-list-wrap .memo-list .memo-text {height: 100px;overflow: hidden;white-space: pre-line;color: rgba(0, 0, 0, 0.78);}
.memo-list-wrap .memo-list .date {margin-top: 8px;font-size: 13px;text-align: right;color: rgba(0, 0, 0, 0.48);}

/* 포인트 */
.point-list-wrap {padding: 16px;border: 1px solid #ddd;border-radius: 8px;}
.point-list-wrap .point-list {padding: 16px 0;border-bottom: 1px solid #ddd;font-size: 16px;}
.point-list-wrap .point-list:first-child {padding-top:6px;}
.point-list-wrap .point-list:last-child {padding-bottom:6px;border-bottom: none;}
.point-list-wrap .point-list .radioA {display:block;}
.point-list-wrap .point-list .radioA input:checked + label .point {color: var(--theme-color);font-weight: 700;}
.point-list-wrap .point-list .radioA label {display: flex;align-items: center;justify-content: space-between;}
.point-list-wrap .point-list .radioA label > span{display: flex;align-items: center;}
.point-list-wrap .point-list .radioA label .point {display:block;margin-left: 8px;color: rgba(0, 0, 0, 0.58);}
.point-list-wrap .point-list .radioA label .price {display:block;color: rgba(0, 0, 0, 0.38);font-weight: 400;font-size: 15px;}

.point-charge-complete {padding: 32px 12px;border: 1px solid #ddd;border-radius: 8px;text-align: center;}
.point-charge-complete .favi-check {display: inline-flex;justify-content: center;align-items: center;width: 50px;height: 50px;background: var(--theme-color);border-radius: 50%;}
.point-charge-complete .favi-check i {font-size: 20px;color: #fff;}
.point-charge-complete .point {padding-top: 24px;font-size: 22px;font-weight: 700;}
.point-charge-complete .point b {color: var(--theme-color);}
.point-charge-complete .text {padding: 16px 0 8px;font-size: 16px;color: rgba(0, 0, 0, 0.58);}
.point-charge-complete .link {display: block;padding-top: 15px;color: rgba(0, 0, 0, 0.38);text-decoration: underline;}



.my-point-list {}
.my-point-list > li {position: relative;display: flex;align-items: center;justify-content: space-between;padding: 16px 0;border-bottom: 1px solid #ddd;}
.my-point-list > li.empty_li {justify-content: center;}
.my-point-list > li .point_info {}
.my-point-list > li .point_info .point_tit {font-weight: bold;}
.my-point-list > li .point_info .point_top .point_num {}
.my-point-list > li .point_info .point_date_wrap {display: block;padding-top: 12px;}
.my-point-list > li .point_info .point_date1 {color: rgba(0, 0, 0, 0.38);}
.my-point-list > li .point_info .point_date2.txt_expired {}
.my-point-list > li .point_num {font-size: 15px;font-weight: 700;color: #3a8afd;}
.my-point-list > li.point_use .point_num {color: #ff4f76;}



#bo_v_act {margin: 20px 0 30px;text-align:center}
#bo_v_act .bo_v_act_gng {position:relative}
#bo_v_act a {margin-right:5px;vertical-align:middle;color:#4a5158}
#bo_v_act a:hover {background-color:#fff;color:#ff484f;border-color:#ff484f}
#bo_v_act i {font-size:1.4em;margin-right:5px}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;z-index:9999;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}


.maywrap-intro {}
.maywrap-intro .intro-top {padding-bottom: 40px;background: #FEF4D1;text-align: center;}
.maywrap-intro .intro-top .top-img {}
.maywrap-intro .intro-top .top-img img {width: 460px;}
.maywrap-intro .intro-top .sub-title {position: relative; display: inline-block;margin-top: 30px; padding: 8px 40px;background: #FFE68C;color: #7A4500;font-size: 15px; font-weight: 500;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.14);}
.maywrap-intro .intro-top .sub-title::before {content: '';position: absolute;top: 0;left: -15px;display: block;width: 15px;height: 33px;background: url("../img/icon_maywrap__diagram01_2x.png");background-size: 15px 33px;}
.maywrap-intro .intro-top .sub-title::after {content: '';position: absolute;top: 0;right: -15px;display: block;width: 15px;height: 33px;background: url("../img/icon_maywrap__diagram01_2x.png");background-size: 15px 33px;transform: scaleX(-1);}
.maywrap-intro .intro-top .title {margin: 12px 0 30px;font-family: yg-jalnan;font-size: 45px;color: #F95845;}
.maywrap-intro .intro-top .text {position: relative;padding-top: 50px;font-size: 18px;line-height: 1.4;}
.maywrap-intro .intro-top .text::before {content: '';position: absolute;top: 0;left: 50%;display: block;width: 1px;height: 22px;margin: 0 auto;transform: rotate(30deg);background: #333;}
.maywrap-intro .intro-content {padding-top: 60px;}

.maywrap-intro .intro-content .intro-text {}
.maywrap-intro .intro-content .intro-text .num {font-size: 70px;font-weight: 900;color: #eee;}
.maywrap-intro .intro-content .intro-text .title {margin-top: -30px;font-size: 28px;font-weight: 700;color: #633800;}
.maywrap-intro .intro-content .intro-text .text {margin-top: 30px;font-size: 18px;line-height: 1.4;}
.maywrap-intro .intro-content .intro-img {display: flex;align-items: center;gap: 8px;margin-top: 24px;}

.maywrap-intro .intro-content .intro-img > div {}
.maywrap-intro .intro-content .intro-img > div img {}   
.maywrap-intro .intro-content .intro-01 .intro-img {justify-content: flex-end;}         
.maywrap-intro .intro-content .intro-01 .intro-img > div img {max-height: 200px;border: 1px solid #eee;}
.maywrap-intro .intro-content .intro-02 .intro-img {}    
.maywrap-intro .intro-content .intro-02 .intro-img > div img {max-height: 200px;}
.maywrap-intro .intro-content .intro-03 .intro-img {}    
.maywrap-intro .intro-content .intro-03 .intro-img > div img {max-height: 150px;}
.maywrap-intro .intro-content .intro-04 .intro-img {}    
.maywrap-intro .intro-content .intro-04 .intro-img > div img {max-height: 150px;}