.header {

    background: #fff;
    border-top: 5px solid #995f35;
}

.header .inner {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

@media (max-width: 769px) {
    .header .inner {
        padding: 0 20px;
    }   
}

.header .mobile_btn {
    display: none;
    cursor: pointer;
}

.header .mobile_btn{
    font-size: 30px;
    color: #493627;
}

@media (max-width: 768px) {
    .header .mobile_btn {
        display: block;
        z-index: 999;
    }
}


.header .gnb {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

@media (max-width: 768px) {
    .header::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);

        height: 5px;
        width: 100%;
        background: #995f35;
        z-index: 999;
    }

    .header .inner h1 {
        z-index: 999;
    }

    .header .gnb {
        display: none;

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        width: 100%;

        padding: 105px 20px 25px 20px;

        z-index: 998;
    }

    .header .gnb.on {
        display: block;
    }

    .header .gnb>ul {
        flex-direction: column;
        gap: 0;
        height: 0;
        background: #f7b83d;
        padding: 50px 0;
        border-radius: 20px;
    }
}

.header .gnb>ul {
    display: flex;
    gap: 75px;
    height: 100%;
    align-items: center;
}

@media (max-width:768px) {
    .header .gnb>ul {
        gap: 0;
        justify-content: space-evenly;
    }
}

.header .gnb>ul>li {
    position: relative;
    text-align: center;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.header .gnb ul>li {
    font-size: 20px;
    font-weight: 500;
    color: #222;
}

@media (max-width:768px) {
    .header .gnb ul>li {
        font-size: 16px;
    }
}

.header .gnb ul>li>a {
    line-height: 100px;
}

.header .gnb>ul>li span {
    color: #f7b83d;
}

.header .gnb>ul>li:hover {
    color: #f7b83d;
}

@media (max-width:768px) {
    .header .gnb>ul>li:hover {
        color: #222;
    }

    .header .gnb>ul>li.on {
        color: #f7b83d;
    }

    .header .gnb>ul>li {
        width: 100%;
        padding: 0 20px;
    }
    
}

.header .gnb>ul>li .lnb {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 999;
    background: #fff;
    border: 3px solid #995f35;
    border-radius: 110px 110px 75px 75px;
    padding: 100px 30px 50px 30px;

    opacity: 0;
    visibility: hidden;
}

.header .gnb>ul>li:hover .lnb {
    opacity: 1;
    visibility: visible;
}

@media (max-width:768px) {

    .header .gnb ul>li .lnb {
        display: none;
        border-radius: 25px;
        border: none;
        width: 100%;
        padding: 0;
        background: #fff;
    }

    .header .gnb>li .lnb.on {
        display: block;
    }

    .header .gnb>ul>li>a {
        line-height: 0;
    }

    .header .gnb>ul>li .lnb {
        position: static;
        top: 0;
        left: 0;
        transform: translate(0, 10px);
        background: #fff;
    }

    .header .gnb>ul>li .lnb>li {
        margin: 0 auto;
        background: #fff;
    }
}

.header .gnb>ul>li .lnb>li {
    width: 150px;
    white-space: nowrap;
    background: #f7b83d;
    text-align: center;
}

@media (max-width:768px) {
    .header .gnb>ul>li .lnb>li {
        background: transparent;
    }
}

.header .gnb>ul>li .lnb>li:first-child{
    border-radius: 10px 10px 0 0;
    padding: 20px 0 0 0;
}

.header .gnb>ul>li .lnb>li:last-child {
    border-radius: 0 0 10px 10px;
    padding: 0 0 20px 0;
}

.header .gnb>ul>li .lnb>li>a {
    font-size: 15px;
    font-weight: 300;
    color: #fff;
    line-height: 26px;
}

@media (max-width:768px) {
    .header .gnb>ul>li .lnb>li>a {
        color: #808080;
        font-weight: 400;
        font-size: 14px;
    }
}

.main_egg {
    /* background: #ee7421; */
    position: relative;
    background: linear-gradient(to top, #f7b83d 50%, #fff 50%);
}

@media (max-width:768px) {
    .main_egg .egg_inner {
        border-radius: 25px;
        overflow: hidden;
    }
}

@media (max-width:768px) {
    .main_egg {
        padding: 0 20px;
    }

    .main_egg .slick-slider {
        width: 100%;
    }

    .main_egg .e_slide .itm {
        margin: 0;
    }
}

.main_egg .e_slide {
    gap: 20px;
}

.main_egg .e_slide .itm {
    height: calc(100vh - 300px);
    margin: 0 30px;
    border-radius: 25px;
    position: relative;
}

@media (max-width:768px) {
    .main_egg .e_slide .itm {
        height: 300px;
        border-radius: 0;
    }
}

@media (max-width: 769px) {
    .main_egg .e_slide .itm {
        margin: 0;
    }
}

.main_egg .e_slide .itm01 {
    background: url(../imges/mv_01n.jpg)no-repeat center center/cover;
}

.main_egg .e_slide .itm02 {
    background: url(../imges/nmv02.png)no-repeat left bottom /cover;
}

.main_egg .e_slide .itm03 {
    background: url(../imges/mv_03nn.png)no-repeat center center/cover;
}

.main_egg .e_slide .itm .txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main_egg .e_slide .itm .txt span {
    display: block;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 15px 0;
    text-align: center;
    text-shadow: 0 0 8px #353535;
}

.main_egg .e_slide .itm02 .txt span {
    text-shadow: 0 0 8px #353535;
}

.main_egg .e_slide .itm .txt strong {
    font-size: 70px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 0 10px #4e4e4e;
}

.main_egg .e_slide .itm02 .txt strong {
    text-shadow: 0 0 8px #979797;
}

.main_egg .e_slide .itm .txt small {
    color: #f7b83d;
}

@media (max-width: 768px) {
    .main_egg .e_slide .itm .txt span {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
        margin: 0 0 6px 0;
        text-align: center;
        text-shadow: 0 0 8px #353535;
    }
    
    .main_egg .e_slide .itm .txt strong {
        font-size: 22px;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 0 10px #4e4e4e;
    }
}


.main_egg .slide_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 997;
   
    display: flex;
    justify-content: space-between;
    max-width: 1280px;
    width: 100%;
    /* padding: 0 15px; */
}

.main_egg .slide_btn .egg {
    width: 100px;
    height: 100px;
}

@media (max-width: 769px) {
    .main_egg .slide_btn .egg {
        width: 50px;
    }   
}

.main_egg .slide_btn .egg_l {
    background: url(../imges/negg01.png)no-repeat center center/cover;
    transform: scaleX(-1);
    position: relative;
    transition: 0.3s;
}

.main_egg .slide_btn .egg_l::before {
    content: "\e93e";
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: xeicon;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.main_egg .slide_btn .egg_l:hover {
    background: url(../imges/negg02.png)no-repeat center center/cover;
}

.main_egg .slide_btn .egg_l:hover::before {
    color: transparent;
}

.main_egg .slide_btn .egg_r {
    background: url(../imges/negg01.png)no-repeat center center/cover;
    position: relative;
    transition: 0.3s;
}

.main_egg .slide_btn .egg_r::before {
    content: "\e93e";
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: xeicon;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.main_egg .slide_btn .egg_r:hover {
    background: url(../imges/negg02.png)no-repeat center center/cover;
}

.main_egg .slide_btn .egg_r:hover::before {
    color: transparent;
}

.main_imformation {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .main_imformation {
        padding: 30px 0;
    }
}

.main_imformation .inner {
    display: flex;
}

.main_imformation .inner .i_img{
    padding: 0 10px;
}

.main_imformation .i_img {
    width: 100%;
    position: relative;
}

.main_imformation .i_img img {
    border-radius: 25px;
}

.main_imformation .i_img span {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 5px #afafaf;
    white-space: nowrap;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .main_imformation .i_img img  {
        border-radius: 10px;
    }

    .main_imformation .i_img span {
        font-size: 13px;
        font-weight: 500;
        white-space: normal;
        text-align: center;
    }
}

.main_recipe {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .main_recipe {
        padding: 0 0 30px 0;
    }
}

.main_recipe .inner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    min-height: 370px;
}

@media (max-width: 768px) {
    .main_recipe .inner {
        padding: 0 20px;
        display: flex;
        flex-direction: column;
    }   
}

.main_recipe .left {
    grid-column: 1/3;
    background: #f7b83d;
    border-radius: 20px 0 0 20px;

    position: relative;
}

@media (max-width: 768px) {
    .main_recipe .left {
        border-radius: 25px 25px 0 0;
        padding: 20px 0;
    }
}

@media (max-width: 768px) {
    .main_recipe .left {
        grid-column: 1/1;
    }   
}

.main_recipe .left .tit {
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.main_recipe .left .tit h3 {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    margin: 0 0 10px 0;
}

.main_recipe .left .tit p {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    text-align: center;
}

@media (max-width: 768px) {
    .main_recipe .left .tit h3 {
        font-size: 26px;
        margin: 0 0 6px 0;
    }

    .main_recipe .left .tit p {
        font-size: 12px;
        font-weight: 400;
    }
}

.main_recipe .right {
    position: relative;
    grid-column: 3/7;
    border: 2px solid #f7b83d;
    border-radius: 0 20px 20px 0;
}

@media (max-width: 768px) {
    .main_recipe .right {
        border-radius: 0 0 25px 25px;
    }    
}


.main_recipe .right .r_img img {
    width: 300px;
    height: 380px;
    text-align: center;
    padding: 50px 0;
    margin: 0 0 0 50px;
}

@media (max-width: 768px) {
    .main_recipe .right .r_img img {
        padding: 30px 0 70px 0;
        margin: 0 auto 0 0;
    }    
}


.main_recipe .right .r_img .txt {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .main_recipe .right .r_img .txt {
        top: 72%;
        left: 63%;
        align-items: flex-end;
    }    
}


.main_recipe .right .r_img .txt span {
    font-size: 20px;
    font-weight: 400;
    color: #f7b83d;
    margin: 0 0 5px 0;
}

@media (max-width: 768px) {
    .main_recipe .right .r_img .txt span {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
}

.main_recipe .right .r_img .txt strong {
    font-size: 40px;
    font-weight: 700;
    line-height: 46px;
    margin: 0 0 50px 0;
    white-space: nowrap;
    color: #222;
}

@media (max-width: 768px) {
    .main_recipe .right .r_img .txt strong {
        font-size: 28px;
        position: relative;
    }

    .main_recipe .right .r_img .txt strong::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 30px;
        background: #f7b83d;

        z-index: -1;
    }
}

.main_recipe .right .r_img .txt strong span {
    font-size: 40px;
    font-weight: 700;
    line-height: 46px;
    margin: 0 0 50px 0;
    white-space: nowrap;
    color: #222;
    position: relative;
    z-index: 998;
}

@media (max-width: 768px) {
    .main_recipe .right .r_img .txt strong span {
        font-size: 28px;
        text-shadow: none;
    }
}


.main_recipe .right .r_img .txt small {
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 0 auto;
    padding: 12px 22px;
    border-radius: 25px;
    background: #f7b83d;
    border: 1px solid transparent;
    color: #fff;
}

.main_recipe .right .r_btn {
    position: absolute;
    top: 63%;
    left: 53%;
    transform: translate(0, 0);

    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    .main_recipe .right .r_btn {
        top: 85%;
        left: 33%;
    }
}

.main_recipe .right .r_btn::before {
    content: "";
    position: absolute;
    left: 49%;
    background: #eeeeee;
    height: 15px;
    width: 2px;
}

.main_recipe .right .r_btn i {
    font-size: 16px;
    font-weight: 500;
    color: #222;
}

.main_notice {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .main_notice {
        padding: 30px 0;
    }

    .main_notice .inner {
        padding: 0 20px 0;
    }
}

.main_notice .inner .n_con {
    display: flex;
    /* align-items: center; */
    /* border: 2px solid #f7b83d; */
    border-radius: 50px;
    gap: 64px;
}

@media (max-width: 768px) {
    .main_notice .inner .n_con {
        flex-direction: column;
        border-radius: 25px;
        padding: 0;
        gap: 20px;
    }
}

.main_notice .n_con .left {
    flex: 1;
}

.main_notice .n_con .left h3 {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 48px 0;
    padding: 0 0 16px 0;
    border-bottom: 1px solid #f7b83d;
}

@media (max-width:768px) {
    .main_notice .n_con .left h3 {
        margin: 0 0 24px 0;
    }
}

.main_notice .n_con .left h3 i {
    float: right;
}

.main_notice .n_con .left .notice {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 768px) {
    .main_notice .n_con .left .notice>li {
        font-size: 13px;
        font-weight: 400;
        /* list-style-type: disc; */
        word-break: break-all;
    }
}

.main_notice .n_con .customer {
    flex: 1;
    display: flex;
    border-radius: 10px;
    padding: 50px 20px;
    background: #f7b83d;
    align-items: center;
}

@media (max-width: 768px) {
    .main_notice .n_con .customer {
        padding: 30px 0;
    }
}

@media (max-width: 768px) {
    .main_notice .n_con .customer {
        width: 100%;
    }
}

.main_notice .n_con .customer>li {
    text-align: center;
    flex: 1;
    color: #fff;
}

@media (max-width: 768px) {
    .main_notice .n_con .customer>li {
        font-size: 12px;
        font-weight: 400;
    }
}

.main_notice .n_con .customer>li~li {
    border-left: 1px solid rgba(205, 255, 255, 0.5);
}

.main_notice .n_con .customer>li i {
    display: block;
    margin: 0 0 16px 0;
    font-size: 30px;
}

.main_notice .n_con .customer>li a {
    display: block;
    text-align: center;
}

.footer {
    background: #f9f9f9;
}

.footer .inner {
    position: relative;
}

@media (max-width:768px) {
    .footer .inner {
        padding: 50px 20px;
    }
}

.footer .f_top {
    padding: 25px 0 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
}

@media (max-width:768px) {
    .footer .f_top {
        padding: 0;
        border-bottom: none;
    }
}

.footer .f_top .customer {
    display: flex;
    gap: 30px;
}

@media (max-width: 769px) {
    .footer .f_top .customer {
        gap: 12px;
        flex-direction: column;
    }
}


.footer .f_top .customer>li {
    font-size: 15px;
    font-weight: 400;
    color: #808080;
}

@media (max-width: 769px) {
    .footer .f_top .customer>li {
        font-size: 13px;
    }
}

.footer .f_top .sns {
    display: flex;
    gap: 10px;
}

.footer .f_top .sns i {
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.footer .f_top .sns .face {
    background: #369;
    border-radius: 10px;
}

.footer .f_top .sns .insta {
    background: linear-gradient(45deg, #F7DA46 5%, #d12738 55%, #9961ff 100%);
    border-radius: 10px;
}

.footer .f_bottom {
    padding: 20px 0 40px 0;
}

.footer .f_bottom address {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 400;
    color: #808080;
}

.footer .f_bottom .company {
    display: flex;
    margin: 0 0 5px 0;
    gap: 20px;
}

@media (max-width:768px) {
    .footer .f_bottom .company {
        flex-direction: column;
        gap: 6px;
    }
}

.footer .f_bottom .company>li {
    font-size: 13px;
    font-weight: 400;
    color: #808080;

    position: relative;
}

.footer .f_bottom .company>li~li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translate(0, -50%);

    width: 1px;
    height: 10px;
    background: #ddd;
}

@media (max-width: 768px) {
    .footer .f_bottom .company>li~li::before  {
        display: none;
    }
}

.footer .f_bottom .tell {
    display: flex;
    gap: 20px;
    margin: 0 0 10px 0;
}

@media (max-width: 768px) {
    .footer .f_bottom .tell {
        margin: 0 0 6px 0;
    }
}

.footer .f_bottom .tell>li {
    font-size: 13px;
    font-weight: 400;
    color: #808080;

    position: relative;
}

.footer .f_bottom .tell>li~li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translate(0, -50%);

    width: 1px;
    height: 10px;
    background: #ddd;
}

.footer .f_bottom span {
    font-size: 13px;
    font-weight: 400;
    color: #909090;
}

.footer .f_bb {
    background: #fff;
    padding: 15px 0;
}

.footer .f_bb .inner{
    display: flex;
    justify-content: space-between;
    /* gap: 50px; */
}

@media (max-width: 768px) {
    .footer .f_bb .inner {
        display: grid;
        grid-template-columns: repeat(4, 2fr);
        padding: 0 20px;
    }
}

.footer .f_logo {
    position: absolute;
    bottom: 60px;
    right: 20px;
}

@media (max-width: 768px) {
    .footer .f_logo {
        bottom: 26px;
    }
}