@charset "utf-8";

/* ºñÁÖ¾ó */
.mainV-swiper .swiper-wrapper .swiper-slide { width: 100%; height: 878px; position: relative;display: flex;align-items: center;flex-wrap: wrap;align-content: center;text-align: center;}
.mainV-swiper .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0;width: 67px;height: 3px;border-radius: 0;}
.mainV-swiper .swiper-pagination-bullet {background: rgba(255,255,255,0.8);}
.mainV-swiper .swiper-pagination-fraction, .mainV-swiper .swiper-pagination-custom, .mainV-swiper .swiper-container-horizontal > .swiper-pagination-bullets {bottom: 60px;}

.mainV-img1 {background: url("../img/main-visual1.png") no-repeat 50% 50%;background-size:cover;}
.mainV-img2 {background: url("../img/main-visual2.png") no-repeat 50% 50%;background-size:cover;}
.mainV-img3 {background: url("../img/main-visual3.png") no-repeat 50% 50%;background-size:cover;}
.mainV-img4 {background: url("../img/main-visual4.png") no-repeat 50% 50%;background-size:cover;}
.mainV-txt { color: #fff;width: 100%; text-align: center;}
.mainV-txt .mainV-subtxt span { display: inline;}
.mainV-txt p span {display: block;font-size: 27px;line-height: 130%;font-weight: 500;}
a.mainV-link {width: 160px;height: 45px;line-height: 45px;font-size: 17px;font-weight: 300;border: 1px solid #fff;color: #fff;display: inline-block;margin-top: 40px;}
/*a.mainV-link::after {content: '';display: inline-block;background: url(../img/mainV-link-ico.png) center no-repeat;width: 24px;height: 9px;margin-left: 15px; margin-bottom: 2px;} */
a.mainV-link:hover {background: #008c45;border: 1px solid #008c45;}



/* 탭 스타일 */
.maintab-wrap { position: relative;margin-bottom: 150px;}
.maintab-wrap .maintab-blank { position: absolute;left: 0;top: 60%;background: #F9F9F9;width: 100%;height: 40%;}
.tab-container{overflow:hidden;width: 100%; height:100%;padding: 0 0 50px 0;position: relative;}
.tab-content { height:100%; position:relative;background: url(../img/cafe-promise-mtxt.png) center 80px no-repeat; padding: 150px 0 0 0;background-size: 600px auto;}
.tabs { display: flex;}
.tabs::after { content: '';position: absolute;left: 0;top: 77px;width: 100%; height: 3px;background: #F2F2F2; z-index: 1;}
.tab {  width: calc(100%/3); height: 80px; border-bottom: 3px solid #F2F2F2; background-color: #fff; line-height: 80px; font-size:23px;color: #A4A4A4;text-align: center; display: block; float: left; text-align: center; transition: all 0.2s ease; position: relative;z-index: 100;cursor: pointer;}
.tab:hover {color: #008c45;border-bottom: 3px solid #008c45;}
.tab.active {  background-color: #fff; color: #008c45;border-bottom: 3px solid #008c45;}
/* 슬라이드 스타일 */
.tab-content-slider {  display: none;  height: 100%;}
.tab-content-slider.first{  display: block;}

/* 탭 컨텐츠 스타일 
.maintab-wrap { position: relative;clear: both;width: 100%;padding: 100px 0;}
.tabs { position: relative;clear: both;margin-top: 50px; padding-bottom: 40px; background-color: #ffffff; width:100%; margin: 0 auto;}
.tabs::after { content: '';position: absolute;left: 0;top: 77px;width: 100%; height: 3px;background: #F2F2F2; z-index: 1;}
.tab_item { width: calc(100%/3); height: 80px; border-bottom: 3px solid #F2F2F2; background-color: #fff; line-height: 80px; font-size:23px;color: #A4A4A4;text-align: center; display: block; float: left; text-align: center; transition: all 0.2s ease; position: relative;z-index: 100;}
.tab_item:hover { opacity: 1;cursor: pointer;color: #008c45;border-bottom: 3px solid #008c45;}

.tab_content { display: none; padding: 150px 0; clear: both; overflow: hidden;background: url(../img/cafe-promise-mtxt.png) center 110px no-repeat; width: 100%;height: 100%;background-size: contain;}*/

/* 선택 된 탭 콘텐츠를 표시 */
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content { display: block;}

/* 선택된 탭 스타일 */
.tabs input:checked + .tab_item { color: #008c45;border-bottom: 3px solid #008c45;}
/* 라디오 버튼 UI삭제*/
input[name="tab_item"] { display: none;}
 
/* keyframes로 애니메이션 효과 적용 */
.swiper-slide .fadeLeft {text-align: center;}

/* .swiper-slide-active 에 애니메이션 설정 적용 */ /* fadeLeft 이름 지정 */
.swiper-slide.swiper-slide-active .fadeLeft .mainMenu-img { animation: fadeLeft 1s 0.2s both;   }
.swiper-slide.swiper-slide-active .fadeLeft .mainMenu-ttl { animation: fadeTop 1s 0.3s both; }
.swiper-slide.swiper-slide-active .fadeLeft .mainMenu-txt { animation: fadeTopTxt 1s 0.3s both; }
.mainMenu-img { padding: 70px 0 40px;height: 560px;}
.mainMenu-ttl { font-size: 25px;color: #000;font-weight: 600;padding: 10px 0;}
.mainMenu-txt { font-size: 15px;color: #000;font-weight: 400;}


.tab-content .swiper-button-next { background: url(../img/right-arrow.png) center no-repeat;width: 26px;height: 50px;top: var(--swiper-navigation-top-offset, 87%);}
.tab-content .swiper-button-prev { background: url(../img/left-arrow.png) center no-repeat;width: 26px;height: 50px;top: var(--swiper-navigation-top-offset, 87%);}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { display: none;}

@keyframes fadeLeft {
    0% {opacity: 0.5; transform: translateX(20px);}
    100% {opacity: 1; transform: translateY(0);}
}

@keyframes fadeTop {
    0% {opacity: 0.5; transform: translateY(10px);}
    100% {opacity: 1; transform: translateX(0);}
}

@keyframes fadeTopTxt {
    0% {opacity: 0.7; transform: translateY(20px);}
    100% {opacity: 1; transform: translateX(0);}
}


/* slow 컨텐츠 */
.mainslow-wrap {display: flex;align-items: flex-start;flex-wrap: wrap;align-content: center;padding-bottom: 100px;}
.mainslow-conts.left { float: left; width: calc(40% - 20px);margin-right: 20px;}
.mainslow-conts.right { float: right; width: calc(60% - 20px);margin-left: 20px;}
.mainslow-conts.left .slow-img { background: url(../img/slow-img1.png) center no-repeat; background-size: contain;width: 100%;height: 513px;}
.mainslow-conts.right .slow-img { background: url(../img/slow-img2.png) center no-repeat; background-size: cover;width: 100%;height: 479px;}
.green-txt { color: #008c45;}
.slow-ttl { font-size: 17px;font-weight: 500; margin-bottom: 10px;}
.slow-txt { clear: both;padding-bottom: 60px;}
.slow-txt p { font-size: 35px;color: #000;font-weight: 300;line-height: 130%;}
.slow-txt p span { font-weight: 700;}
.slow-txtconts { font-size: 17px;color: #000;text-align: left;padding-top: 60px;padding-bottom: 0px;font-weight: 300;}


/* 쉼터 컨텐츠 */
.main-restWrap {background: #F9F9F9;padding: 100px 0;overflow: hidden;}
.mainrest-wrap {display: flex;align-items: flex-end;flex-wrap: wrap;align-content: center;padding-bottom: 0px;}
.mainrest-conts.left { float: left; width: calc(65% - 20px);margin-right: 20px;}
.mainrest-conts.right { float: right; width: calc(35% - 20px);margin-left: 20px;}
.mainrest-conts.left .rest-img { background: url(../img/rest-img1.png) center no-repeat; background-size: cover;width: 100%;height: 413px;}
.mainrest-conts.right .rest-img { background: url(../img/rest-img2.png) center no-repeat; background-size: cover;width: 100%;height: 505px;}
.rest-txtconts { font-size: 17px;color: #000; line-height: 27px;padding-top: 30px;font-weight: 300;}


/*인스타*/
.main-instaWrap {background: #fff;padding: 150px 0;}
.main-instaWrap .green-txt {padding-bottom: 40px;}
.main-instaconts {clear: both;display: flex; flex-wrap: wrap;}
.main-instaconts span {width: calc(100% / 6); padding: 10px;display: inline-block;box-sizing: border-box;}
.main-instaconts span img { width: 100%;}



/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/

@media (max-width: 1440px) and (min-width: 1201px) {

    

}
   

@media (max-width:1200px) {	
    
    
    
}



@media (max-width:1024px) {	
    
    .mainV-txt p span { font-size: 24px;}
    .mainV-swiper .swiper-wrapper .swiper-slide { height: 700px;}

    .tab-content { background-size: contain;}

    .mainMenu-img img { height: 400px;}

    .mainslow-conts.left {width: calc(50% - 20px);}
    .mainslow-conts.right {width: calc(50% - 20px);}
    .mainslow-conts.left .slow-img { background-size: cover;}
    .slow-txtconts { padding-top: 40px;}
    

}


@media (max-width:760px) {	
    
    .mainV-txt p span { font-size: 20px;}
    .mainV-swiper .swiper-wrapper .swiper-slide { height: 600px;}

    .tab { height: 70px;font-size: 20px;}
    .tabs::after { top: 67px;}

    .mainMenu-img { height:380px;}
    .mainMenu-img img { height: 280px;}
    .mainMenu-txt { margin: 0 50px;}
    .mainV-txt .mainV-subtxt span { display: block}

    .mainslow-wrap { display: block;}
    .mainslow-conts.left {width: calc(100% - 0px);}
    .mainslow-conts.right {width: calc(100% - 0px);}
    .slow-txt { padding-bottom: 30px;}
    .slow-txt p { display: inline-block;}
    .slow-txt p:first-child { margin-right: 10px;}
    .mainslow-conts.left .slow-img { height: 350px;margin-bottom: 30px;}
    .mainslow-conts.right .slow-img { height: 350px;}
    .slide-link.tal {text-align: center !important;}

    .main-restWrap {padding: 100px 0 50px;}
    .mainrest-wrap { display: block;position: relative;padding-bottom: 0;}
    .mainrest-conts.left {width: calc(100% - 0px); margin-right: 0px; margin-bottom: 30px;}
    /*.mainrest-conts.right {width: calc(100% - 0px);  margin-left: 0px;position: absolute;left: 0;top: 413px;height: 550px;background-size: contain;} */
    .mainrest-conts.right .rest-img { height: 550px;background-size: cover;background-position-y: bottom;display: none;}

    .main-instaconts span {width: calc(100% / 4);}

    .slow-txt p { font-size: 27px;}

    .mainV-img1 {background: url("../img/main-visual1-mo.jpg") no-repeat 50% 50%;background-size:cover;}

}



@media (max-width:480px) {	
    
    .mainV-swiper .swiper-wrapper .swiper-slide { height: 500px;}

    .slide-link a.mainV-link, .slide-link a.green-link { margin-top: 10px;}


    .main-instaconts span {width: calc(100% / 3);padding: 3px;}

    .mainMenu-img { height:360px;}
    .mainMenu-img img { height: 260px;}

    
    .slow-txt p span {display: block !important;}

}


@media (max-width:360px) {	

    .mainV-txt p span { font-size: 17px;letter-spacing: -0.5px;}

}