@charset "utf-8";

.inner{display:flex; flex-direction:column; justify-content:center; position:relative; margin:0 auto; padding:50px 20px 0; max-width:1440px; width:100%;  box-sizing:border-box;  height:100%;}

#content{ margin:0 auto;}
#content h2.main_tit{margin-bottom:60px; font-size:40px; font-weight:400; color:#1e1e1e; font-family:'Noto Serif KR', sans-serif; text-align:center;}
#content p{font-size:16px; line-height:1.8;}

.btn_more{display:block; position:relative; font-size:16px; color:#d5aa64 !important; cursor:pointer;}
.btn_more:after{content:''; display:inline-block; margin:-5px 0 0 8px; width:7px; height:7px; border-top:2px solid #d5aa64; border-right:2px solid #d5aa64; transform:rotate(45deg); transform-origin:center; vertical-align:middle;}
.btn_more02{display:block; width:200px; height:54px; line-height:54px; color:#0f442a !important; box-sizing:border-box; border:1px solid #0f442a; transition:0.3s ease; text-align:center; font-family:'Noto Serif KR', sans-serif;}
.btn_more02:hover{background:#0f442a; color:#fff !important;}

.fp-viewing-1Page .area_quick a.top{opacity:0; visibility:hidden;}


/* 탑배너 */
#header{transition:0.5s ease;}
/* .fp-viewing-1Page #header{top:120px;} */
.area_topbanner .box{position:relative; width:100%; height:100px !important; overflow:hidden;}
.area_topbanner .box > img{display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%;}
.area_topbanner .box .inner{display:flex; justify-content:space-between; align-items:center; flex-direction:row !important; padding-top:0 !important;}
.area_topbanner .box .inner .img_map{position:absolute; left:15%; width:70%; height:100%; cursor:pointer;}
.area_topbanner .box .inner .btn{transition:0.3s ease;}
.area_topbanner .box .inner .btn:hover{opacity:0.5;}
.area_topbanner .box .close{display:block; background:none; border:0; width:23px;}
.area_topbanner .box .close img{width:100%;}
.area_topbanner .box .view_more{display:block; margin-top:12px; width:40px;}
.area_topbanner .box .view_more img{width:100%;}
body.top_banner_close .area_topbanner .box{display:none;}
/*body.top_banner_close #section00{display:none !important;}*/
body.top_banner_close #header{top:0;}

/* 배경 이미지 섹션 > 상단 그라데이션 */
.bg_img{position:relative;}
.bg_img:after{content:''; display:block; position:absolute; top:0; left:0; background:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); z-index:1; width:100%; height:120px;}

/* 비주얼 */
.fp-responsive .area_visual{overflow:inherit;}
.area_visual{position:relative;  max-width: 100%; margin:0 auto; overflow:hidden;}
.area_visual .control{position:absolute; bottom:5%; z-index:1;}
.area_visual .swiper-slide .box{display:block;}
.area_visual .swiper-slide .box > div{background-size:cover; background-position:center; background-repeat:no-repeat; width:100%; height:100vh;}
/*.area_visual .swiper-slide .box img{width:100%; height:100%; object-fit:cover;}*/
.area_visual .swiper-slide .box .mob{display:none;}
.area_visual .control{display:flex; position:absolute; bottom:10%; width:100%; justify-content:center;}
.area_visual .control > div{position:relative;}
.area_visual .swiper-pagination{font-size:0;}
.area_visual .swiper-pagination-bullet{position:relative; margin:0 25px 0 0; width:6px; height:6px; background:#fff; opacity:1;}
.area_visual .swiper-pagination-bullet-active{background:#fff;}
.area_visual .swiper-pagination-bullet:before{content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); width:22px; height:22px; border:1px solid #fff; border-radius:50%; transition:0.5s ease;}
.area_visual .swiper-pagination-bullet-active:before{transform:translate(-50%,-50%) scale(1);}
.area_visual .btn_autoplay > button{position:absolute; top:-2px; left:0; background:none; height:10px;}
.area_visual .btn_play{display:none;}
.area_visual .btn_stop{display:block;}
.area_visual .btn_autoplay.active .btn_play{display:block;}
.area_visual .btn_autoplay.active .btn_stop{display:none;}

/* 메뉴소개 */
.area_menu{background:#f9f8f3 url(../images/main/obj_main01.png)no-repeat; background-position:100% -28%;}
.area_menu .swiper{position:relative;}
.area_menu .swiper-slide{display:flex; transition:0.5s ease;}
.area_menu .swiper-slide-prev{opacity:0;}
.area_menu .img_box{width:64%; height:60vh;}
.area_menu .img_box{clip-path:polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% calc(100% - 0px), calc(100% - 56px) 100%, 56px 100%, 0 calc(100% - 56px), 0 56px); background-position:center; background-size:cover; background-repeat:no-repeat;}
.area_menu .txt_box{display:flex; flex-direction:column; justify-content:center; padding:0 80px 0 60px; box-sizing:border-box; width:36%;}
.area_menu .txt_box h3{font-size:35px; color:#222; font-weight:normal; font-family:'Noto Serif KR', sans-serif;}
.area_menu .txt_box p{margin:30px 0 60px; color:#444; width:90%; word-break:keep-all;}
.area_menu .control{position:absolute; width:64%; left:0; top:50%; transform:translateY(-50%); z-index:1;}
.area_menu .swiper-button-next, 
.area_menu .swiper-button-prev{margin-top:0; transform:translateY(-50%); width:40px;}
.area_menu .swiper-button-prev, 
.area_menu .swiper-container-rtl .swiper-button-next{left:50px;}
.area_menu .swiper-button-next, 
.area_menu .swiper-container-rtl .swiper-button-prev{right:50px;}
.area_menu .swiper-button-next:after, 
.area_menu .swiper-button-prev:after{display:none;}
.area_menu .swiper-button-next img, 
.area_menu .swiper-button-prev img{width:100%;}


/* 도담 소식 */
#section03 .inner{padding:141px 20px 62px /* justify-content: flex-end; */}
.area_news{background:#fdfdfb url(../images/main/obj_main01.png)no-repeat; background-position:100% 12%;}
.area_news h3{display:none; position:relative; margin:0 auto 50px; padding:0 3px 8px; width:160px; font-size:20px; color:#0f442a; font-family:'Noto Serif KR', sans-serif; border-bottom:2px solid #0f442a; text-align:center; transition:0.3s ease; cursor:pointer; }
/*
.area_news .tab_container{display:flex; justify-content: center;}
.area_news .tab_container .box{width: 60% !important; margin-left: 15px;}
*/
.area_news .tab_btn{}
.area_news .tab_btn ul{display:flex; justify-content:center; align-items:stretch;}
.area_news .tab_btn a{opacity:0.4; display:inline-flex; justify-content:center; align-items:center; min-width:160px; height:55px; box-sizing:border-box; padding:0 3px; font-size:20px; color:#0f442a; font-weight:600; font-family:'Noto Serif KR', sans-serif; border-bottom:2px solid #0f442a; text-align:center; transition:0.3s ease;}
.area_news .tab_btn li.on a{opacity:1;}
.area_news .tab_container{margin-top:50px;}
.area_news .tab_container .box{display:none; min-height:clamp(400px, 24.688vw/* 474px */, 474px);}
.area_news .news_list{display:flex; justify-content:center;}
.area_news .news_list li{width:calc(100% / 4);}
.area_news .news_list li+li{margin-left:40px;}
.area_news .news_list li:nth-of-type(4){display:none;}
.area_news .img{display:block; position:relative; padding-top:100%; width:100%; clip-path:polygon(40px 0, calc(100% - 40px) 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 0px), 0 40px);}
.area_news .img img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; object-fit:cover;}
.area_news .cover{position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); transition:0.5s ease; opacity:0;}
@supports (background:rgba(0,0,0,0.8)){
    .area_news .cover{background:rgba(0,0,0,0.5); backdrop-filter:blur(10px);}
}
.area_news .img:hover .cover{opacity:1;}
.area_news .cover .btn_more{position:absolute; width:100%; text-align:center; top:50%; transform:translateY(-50%); color:#f5e8c9 !important;}
.area_news .cover .btn_more:after{border-color:#f5e8c9 !important;}
.area_news .btn_more02{margin:70px auto 0;}
.area_news .none_data{display:flex; justify-content:center; align-items:center; min-height:clamp(200px, 18.229vw/* 350px */, 350px); box-sizing:border-box; border:0;}


/* 이 달의 식단 */
.area_month{background:url(../images/main/img_bg01.jpg)no-repeat 50% 50%/cover;}
.area_month .box{position:relative; background:rgba(15,68,42,0.85); padding:150px 10px 110px; width:500px; clip-path:polygon(50px 0, calc(100% - 50px) 0, 100% 50px, 100% calc(100% - 50px), calc(100% - 50px) 100%, 50px 100%, 0 calc(100% - 50px), 0 50px); text-align:center; overflow:hidden;}
.area_month .box .main_tit{margin-bottom:40px !important; color:#fff !important;}
.area_month .box p{color:rgba(255,255,255,0.8);}
.area_month .box .btn_more02{margin:80px auto 0; color:#fff !important; border-color:#fff;}
.area_month .box .btn_more02:hover{color:#0f442a !important; background:#fff;}
.area_month .box .obj{position:absolute; top:-100px; right:-164px; width:85%; opacity:0.5;}


/* 고객센터 */
.area_cs{position:relative; background:url(../images/main/img_bg02.jpg)no-repeat 50% 50%/cover;}
.area_cs .inner{padding-top:0;}
.area_cs .cont{display:flex; justify-content:center; align-items:center;}
/*.area_cs .cont .obj{width:33%;}*/
.area_cs .txt_box{margin-left:100px;}
.area_cs .txt_box .main_tit{margin-bottom:20px !important; color:#fff !important; text-align:left !important;}
.area_cs .txt_box .tel{display:block; margin-bottom:30px; font-size:50px; color:#fff; font-family:'Noto Serif KR', sans-serif;}
.area_cs .txt_box p{color:rgba(255,255,255,0.8);}
.area_cs .txt_box p:first-child{margin-bottom:14px; color:#fff;}
.area_cs .sns{display:flex; margin-top:40px;}
.area_cs .sns li+li{margin-left:20px;}
.area_cs .sns li a{opacity:0.6; display:flex; justify-content:center; align-items:center; border:1px solid #fff; width:50px; height:50px; border-radius:50%; transition:0.3s ease;}
.area_cs .sns li a:hover{opacity:1;}
.area_cs .sns li a img{width:25px;}
/*.area_cs .area_banner{overflow:hidden; position:absolute; padding:0 20px; bottom:60px; left:50%; transform:translateX(-50%); max-width:1440px; width:100%; box-sizing:border-box; white-space:nowrap;}*/
/* .area_cs .rolling_wrap .box{display:inline-block; font-size:0;} */
.area_cs .rolling_wrap .list{/* display:inline-block *//* white-space:nowrap; */ /*font-size:0;*/}
.area_cs .rolling_wrap .list li{/* display:inline-block; *//*  margin-right:60px; */}
/*
.area_cs .rolling_wrap .list li a{display: block;}
.rolling_wrap .simply-scroll,
.rolling_wrap .simply-scroll .simply-scroll-list li,
.rolling_wrap .simply-scroll .simply-scroll-clip{height: auto;}
.rolling_wrap .simply-scroll,.rolling_wrap .simply-scroll .simply-scroll-clip{width: 100%;}
.simply-scroll .simply-scroll-list li{width: 220px;}
*/

@media screen and (max-width:1920px){
    .area_topbanner .box > img{width:auto; height:100%;}
}

@media screen and (max-width:1620px){
    .inner{padding:50px 130px 0; max-width:none;}
    .area_cs .area_banner{max-width:none; width:calc(100% - 260px); padding:0;}
}

@media screen and (max-width:1280px){
	 #fp-nav{display:none !important;} 
    
    #fullpage{height:auto !important;}
    .fp-tableCell{vertical-align:top;}
    .fp-section.fp-table,
    .fp-slide.fp-table,
    .fp-tableCell{height:auto !important;}

    #header{position:absolute; background:none;}
  

    
    #content h2.main_tit{font-size:30px;}
    .inner{padding:140px 3%; max-width:none;}
    .bg_img:after{display:none;}
    
    .area_topbanner .box{height:100px !important;}
    .area_topbanner .box .inner{padding-bottom:0 !important;}
    
    .area_menu .img_box{height:38vw;}
    .area_menu .txt_box{padding:0 60px 0 40px;}
    .area_menu .txt_box h3{font-size:25px;}
    
    .area_cs .inner{padding-top:140px;}
    .area_cs .cont{padding-bottom:100px;}
    .area_cs .txt_box .tel{font-size:40px;}

    #section03 .inner{padding:80px 3%}

}

@media screen and (max-width:1024px){
  
    
    .inner{padding:120px 3%;}
    #content h2.main_tit{margin-bottom:40px; font-size:24px;}
    #content p{font-size:15px; line-height:1.7;}
    .btn_more{font-size:15px;}
    .btn_more02{width:160px; height:44px; line-height:42px; font-size:15px;}
    
    .area_topbanner .box{height:80px !important;}
    .area_topbanner .box .close{width:15px;}
    .area_topbanner .box .view_more{margin-top:14px; width:30px;}
    
    .area_visual .swiper-slide .box > div{height:85vh;}
    .area_visual .control{bottom:45px;}
    
    .area_menu .img_box{clip-path:polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% calc(100% - 0px), calc(100% - 46px) 100%, 46px 100%, 0 calc(100% - 46px), 0 46px);}
    .area_menu .txt_box h3{font-size:20px;}
    .area_menu .txt_box p{margin:22px 0 50px;}
    .area_menu .swiper-button-next, 
    .area_menu .swiper-button-prev{width:30px;}
    .area_menu .swiper-button-next, 
    .area_menu .swiper-container-rtl .swiper-button-prev{right:30px}
    .area_menu .swiper-button-prev, 
    .area_menu .swiper-container-rtl .swiper-button-next{left:30px;}
    .area_menu{background-position:100% -95px; background-size:33%;}
    
    .area_news{background-size:230px;}
    .area_news h3{font-size:18px; margin-bottom:40px; width:140px;}
    .area_news .news_list li+li{margin-left:20px;}
    .area_news .img{clip-path:polygon(30px 0, calc(100% - 30px) 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 0px), 0 30px);}
    .area_news .btn_more02{margin-top:60px;}
    
    .area_month .box{padding:100px 50px 60px; width:380px; clip-path:polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);}
    .area_month .box .main_tit{margin-bottom:30px !important;}
    .area_month .box .btn_more02{margin-top:60px;}
    .area_month .box .obj{top:-68px; right:-110px;}
    .area_month .box p > br{display:none;}
    
    .area_cs .inner{padding-top:120px;}
    .area_cs .cont{padding-bottom:80px;}
    .area_cs .obj{width:300px;}
    .area_cs .txt_box .main_tit{margin-bottom:15px !important;}
    .area_cs .txt_box .tel{margin-bottom:20px; font-size:30px;}
    .area_cs .txt_box p:first-child{margin-bottom:11px;}
    .area_cs .sns{margin-top:30px;}
    .area_cs .sns li+li{margin-left:10px;}
    .area_cs .sns li a{width:40px; height:40px;}
    .area_cs .sns li a img{width:18px;}
/*    .area_cs .area_banner{bottom:30px;}*/
    /* .area_cs .rolling_wrap .list li{margin-right:40px;} */
    /* .area_cs .area_banner img{width:140px;} */
}

@media screen and (max-width:900px){
    .area_menu .swiper{overflow:hidden;}
    .area_menu .swiper-slide{flex-direction:column;}
    .area_menu .img_box{height:55vw; width:100%;}
    .area_menu .txt_box{padding:30px 10px 0; width:100%; text-align:center;}
    .area_menu .txt_box p{margin:12px auto 30px; width:70%;}
    .area_menu .control{transform:none; top:0; width:100%; height:55vw;}
}

@media screen and (max-width:880px){
	.area_visual{overflow:inherit;}
}

@media screen and (max-width:768px){
    /* .fp-viewing-1Page #header{top:50px;} */
    
    .inner{padding:80px 3%;}
    #content h2.main_tit{margin-bottom:30px; font-size:20px;}
    #content p{font-size:14px;}
    .btn_more{font-size:14px;}
    .btn_more:after{margin:-5px 0 0 4px; width:6px; height:6px;}
    .btn_more02{width:140px; height:40px; line-height:38px; font-size:14px;}
    
    .area_topbanner .box{height:50px !important;}
    .area_topbanner .box > img{height:125%;}
    
    .area_visual .swiper-slide .box .web{display:none;}
    .area_visual .swiper-slide .box .mob{display:block;}
    .area_visual .swiper-slide .box .mob img{width:100%;}
    .area_visual .swiper-slide .box > div{height:auto;}
    .area_visual .swiper-pagination-bullet{margin-right:15px; width:4px; height:4px;}
    .area_visual .swiper-pagination-bullet:before{width:16px; height:16px;}
    .area_visual .btn_autoplay > button{top:-3px;}
    
    .area_menu{background-position:100% -50px; background-size:60%;}
    .area_menu .txt_box{padding-top:20px;}
    .area_menu .txt_box h3{font-size:18px;}
    .area_menu .txt_box p{margin:10px auto 25px;}
    .area_menu .img_box{clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 0px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px);}
    .area_menu .swiper-button-prev, 
    .area_menu .swiper-container-rtl .swiper-button-next{left:15px;}
    .area_menu .swiper-button-next, 
    .area_menu .swiper-container-rtl .swiper-button-prev{right:15px;}
    
    .area_news h3{padding-bottom:5px; margin-bottom:30px; font-size:16px; width:120px;}
    .area_news .news_list{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
    .area_news .news_list li+li{margin-left:0px;}
    .area_news .news_list li{width:auto;}
	.area_news .news_list li:nth-of-type(4){display:block;}
    .area_news .img{clip-path:polygon(22px 0, calc(100% - 22px) 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 0px), 0 22px);}
    .area_news .box:first-child .news_list li:nth-child(2) .img{clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 0px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);}
    .area_news .box:last-child .news_list li:first-child .img{clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 0px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);}
    .area_news .btn_more02{margin-top:40px;}
    
    .area_month .box{padding:80px 20px 50px; width:270px;}
    .area_month .box .main_tit{margin-bottom:20px !important;}
    .area_month .box .btn_more02{margin-top:40px;}
    .area_month .box .obj{width:90%;}
    
    .area_cs .inner{padding-top:80px;}
    .area_cs .cont{padding-bottom:50px;}
    .area_cs .obj{display:none;}
    .area_cs .txt_box{margin-left:0; text-align:center;}
    .area_cs .txt_box .main_tit{margin-bottom:12px !important; text-align:center !important;}
    .area_cs .txt_box .tel{margin-bottom:15px; font-size:22px;}
    .area_cs .txt_box p:first-child{margin-bottom:5px;}
    .area_cs .sns{margin-top:20px; justify-content:center;}
/*
    .area_cs .sns li a{width:35px; height:35px;}
    .area_cs .sns li a img{width:15px;}
*/
    /* .area_cs .rolling_wrap .list li{margin-right:20px;} */
/*
    .simply-scroll .simply-scroll-list li{width: 180px;}
    .area_cs .rolling_wrap .list li a img{width: 70%; display: block; margin:  0 auto;}
*/
}

@media screen and (max-width:620px){
	 .area_news .tab_btn a{min-width:100px; height:45px; font-size:18px;}
}

@media screen and (max-width:480px){
    /* .area_visual .swiper-slide .box > div{height:65vh} */
    
    .area_menu .txt_box p{width:100%;}
    
    .area_month .inner{align-items:center;}
     /* .area_cs .area_banner img{width:80px;} */
}

@media screen and (max-width:360px){
	.area_news .tab_btn a{min-width:80px; font-size:17px;}
}