@charset "UTF-8";

/* main-banner */
.main-banner{width: 100%;height: 100vh;background: no-repeat 50% / cover;position: relative;}
.main-banner .img-wrap { width: 100%; height: 100%; position: relative;} 
.main-banner .img-wrap::after{content: '';position: absolute;top: 0;left: 0;width: calc(100% + 15%);height: 100%;background-color: rgba(28, 37, 57, 0.6);backdrop-filter: blur(10px);}

.main-banner .img-wrap img, .main-banner .img-wrap video{width: 100%;height: 100%;object-fit: cover;min-height: 100vh;}
.main-banner .banner-txt {position: absolute;top: 50%;transform: translateY(-50%);left: 160px;line-height: 1.7;color: #fff;font-weight: 600;font-size: 3em;} 
.main-banner .banner-txt__top { font-size: 30px; display: flex; color: #313133; } 
.main-banner .banner-txt__top::after { content: ''; width: 45px; height: 45px; background: no-repeat 50% / cover; background-image: url(../../images/ico/ico-plant_b.svg); margin-top: -5px;} 
.main-banner .banner-txt__bottom{font-size: 60px;}
.main-banner .banner-txt__bottom > * {font-size: inherit;}
.main-banner .detail-btn{margin-top: 35px;}
.main-banner__btnWrap {display: none; position: absolute;bottom: 100px;left: 160px;z-index: 1;} 
.main-banner__btn {display: flex;align-items: center;width: 100%;padding-left: 3px;}
.main-banner__btn .swiper-pagination {position: static;font-size: 20px;font-weight: 500;display: flex;margin: 0 21px;}
.main-banner__btn .swiper-pagination-bullet{background: #C5D5FF; opacity: .3; margin: 0 9px;}
.main-banner__btn .swiper-pagination-bullet-active {opacity: .8;}
.main-banner .btn{background-color: rgba(255,255,255,0.4);}
.main-banner .btn span::before, 
.main-banner .btn span::after{background: #fff;}


/*** main-section ***/
.main-section{padding-top: 120px;overflow: hidden;}
.title-wrap .btn{width: 40px;height: 40px;border-radius: 3px;display: flex;align-items: center;justify-content: center;}


/* sns */
.main-sns{margin-top: 100px;}
.main-sns__wrap{padding-top: 40px;position: relative;height: 460px;}
.main-sns .sns-btn {margin-bottom: 18px; width: 180px; height: 50px; display: flex; align-items: center; font-size: 20px; font-weight: 500; position: relative; justify-content: left; padding-left: 16px; border-radius: 2px; border: 1px solid var(--color-main);} 
.main-sns .sns-insta i{width: 34px; height: 34px; background: url(../../images/ico/ico-insta3.svg) no-repeat 50% / cover; margin-right: 8px;}
.main-sns .sns-youtube i{width: 34px; height: 34px; background: url(../../images/ico/ico-youtube.svg) no-repeat 50% / cover; margin-right: 8px;}
.main-sns .sns-btn.active{background-color: var(--color-main3);}
.main-sns .sns-cont__wrap {position: absolute;width: calc(100% - 250px);right: 0;top: 0;z-index: 2;} 
.main-sns .sns-cont__wrap .sns-slide{height: 100%;position: static;margin-top: 40px;width: 100%;}
.main-sns .slide-control {position: absolute;top: -40px;right: 0;} 
.main-sns .slide-control .swiper-button-prev, 
.main-sns .slide-control .swiper-button-next { position: static; } 
.main-sns .sns-slide li {width: 330px;}
.main-sns .sns-youtube .sns-slide li{width: 420px; height: 420px;}
.main-sns .sns-slide a {width: 100%;height: 0;padding-bottom: 125.333%;overflow: hidden;position: relative;} 
.main-sns .sns-insta a:hover .instagram-thum {transform: translate(-50%, -50%) scale(1.1);} 
.main-sns .sns-slide li:not(:last-child) { margin-right: 40px; } 
.main-sns .slide-control{top: -60px;display: flex;align-items: center;gap: 30px;}
.main-sns .slide-control .btn{background-color: #fff; border: 1px solid #e4e4e4; border-radius: 0;}
.main-sns .slide-control .btn span::before,
.main-sns .slide-control .btn span::after{background: var(--color-main);}
.main-sns .sns-youtube a{transition: .4s;border-radius: 2px;border: 1px solid var(--color-200);background: #FFF;padding: 60px 30px;height: 100%;}
.main-sns .youtube-img { width: 100%; height: 200px; } 
.main-sns .youtube-img img { width: 100%; height: 100%; object-fit: cover; } 
.main-sns .youtube-tit{font-size: 22px;margin-top: 24px;line-height: 1.7;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.main-sns .sns-youtube a:hover{background-color: #F6F6FC;}



/* story */
.section-story{position: relative; padding-bottom: 100px;}
.section-story::before{content: '';position: absolute;top: 40px;left: 0;width: 468px;height: 325px;background: no-repeat 50% / cover;background-image: url(../../images/user/main/story-bg.png);z-index: -1;}
.section-story::after{content: '';position: absolute;bottom: 23px;right: 0;width: 265px;height: 295px;background: no-repeat 50% / cover;background-image: url(../../images/user/main/story-bg02.png);z-index: -1;}
.section-story .title-wrap{margin-bottom: 40px;}
.board-story .btn{background-color: #fff; border: 1px solid #e4e4e4; border-radius: 0;}
.board-story .btn span::before,
.board-story .btn span::after{background: var(--color-main);}
.story-btn{font-size: 0; display: flex; gap: 30px;}
.story-slide li{width: 560px;}
.story-slide .img-wrap{width: 100%;position: relative;overflow: hidden;height: 0;padding-top: calc((420 / 560) * 100%);}
.story-slide .img-wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

/* board */
.main-section.section-board{padding: 60px 0;}
.section-board{position: relative;background: no-repeat 50% / cover;background-image: url(../../images/user/main/board-bg.png);min-height: 680px;}
.section-board .title02{color: #fff;}
.section-board .board{flex: 1;width: 50%;}
.section-board .board:first-child{padding-right: 90px;}
.section-board .title-wrap{margin-bottom: 30px;}
.section-board .title-wrap .btn{background-color: rgba(255,255,255,0.4);}
.section-board .board-list .pic_li_tit:hover{text-decoration: underline;}

/* activity */
.section-activity{padding-bottom: 150px; background: no-repeat 50% / cover; background-image: url(../../images/user/main/activity-bg.png);}
.section-activity .title-wrap{color: #fff;}
.activity-list{margin-top: 100px;}
.activity-list > li{flex: 1;}
.activity-list > li:first-child{margin-right: 50px;}
.activity-box{padding: 45px 0; text-align: center; border-radius: 10px; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.activity-box__txt{color: #fff; font-weight: 500; font-size: 1.5em; line-height: 1.6;}
.activity-box__btn{width: 235px; height: 65px; border-radius: 2px; margin: 0 auto; margin-top: 20px; background-color: #fff; border: 1px solid var(--color-main); color: var(--color-main); display: flex; align-items: center; justify-content: center; font-size: 1.375em; font-weight: 500; transition: .4s;}
.activity-box__btn:hover{background-color: var(--color-main); color: #fff;}


/* instagram */
.instagram-slide {overflow: hidden;width: 100%;}
.instagram-item > a {display: block;width: 100%;padding-top: 100%;position: relative;background: no-repeat center center;background-size: cover;}
.instagram-item > a:before {content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #000000;background: rgba(0, 0, 0, .8);background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .8) 100%);background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .8) 100%);background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .8) 100%);z-index: 1;opacity: 0;-webkit-transition: opacity .55s cubic-bezier(.215, .61, .355, 1);transition: opacity .55s cubic-bezier(.215, .61, .355, 1); }
.instagram-item > a:after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; z-index: 11; background-image: url(../../images/ico/ico-instagram.svg); background-repeat: no-repeat; background-size: 36px 36px; opacity: 0; -webkit-transition: opacity .55s cubic-bezier(.215, .61, .355, 1);transition: opacity .55s cubic-bezier(.215, .61, .355, 1);}
.instagram-item p {width: 100%;padding: 19px 57px;position: absolute;left: 0;top: 50%;font-size: 16px;font-weight: 400;text-align: left;color: #fff;transform: translateY(-50%);z-index: 2;opacity: 0;-webkit-transition: opacity .55s cubic-bezier(.215,.61,.355,1);transition: opacity .55s cubic-bezier(.215,.61,.355,1);}
.instagram-item > a:hover:before {opacity: 1;}
.instagram-item > a:hover:after {opacity: 1;}
.instagram-thum {position: absolute;transition: .4s;width: 100%;height: auto;object-fit: cover;user-select: none;top: 50%;left: 50%;transform: translate(-50%, -50%);} 
.instagram-slide__prev{position: absolute;left: 50px;top: 50%;transform: translateY(-50%);width: 60px;height: 60px;background: no-repeat 50% / cover;background-image: url(../../images/ico/main-slide__prev.svg);z-index: 11;}
.instagram-slide__next{position: absolute;right: 50px;top: 50%;transform: translateY(-50%);width: 60px;height: 60px;background: no-repeat 50% / cover;background-image: url(../../images/ico/main-slide__next.svg);z-index: 11;}




@media screen and (max-width: 1200px) {
  /* main-banner */
  .main-banner{height: max(700px, 100vh);}
  .main-banner .banner-txt{left: 40px; top: 45%;}
  .main-banner__btnWrap{left: 40px; bottom: 80px;}
  .main-banner .img-wrap img , .main-banner .img-wrap video{min-height: auto;}

  /* main-section */
  .main-section{padding-top: 100px;overflow: hidden;}

  /* sns */
  .main-sns__wrap {height: 479px;}
  .main-sns .sns-slide li{width: 350px;}
  .main-sns .sns-youtube a { padding: 30px 20px; } 
  .main-sns .youtube-img { height: 0; position: relative; overflow: hidden; padding-bottom: calc((200 / 360) * 100% ); } 
  .main-sns .youtube-img img { position: absolute; top: 0; left: 0; } 
  .main-sns .youtube-tit { font-size: 20px; } 
  .main-sns .sns-youtube .sns-slide li {width: 350px; height: 350px;}

  /* story */
  .section-story::before {left: -105px;top: 0;}
  .story-slide li {width: 420px;}
  .section-story::after {bottom: -8%; right: -7%;}

  /* board */
  .section-board{background-position: right; min-height: 600px;}
  .section-board .board:first-child{padding-right: 50px;}
  .main-board .inner{flex-wrap: wrap;}
  
  /* activity */
  .activity-box{padding: 30px 20px;}
  .activity-list > li:first-child{margin-right: 40px;}
  .activity-box__txt {font-size: 1.3em;}

}

@media screen and (max-width: 900px) {

  .section-board .board{width: 100%; flex: none;}
  .section-board .board:first-child{padding-right: 0; margin-bottom: 50px;}

}

@media screen and (max-width: 768px) {
  /* main-section */
  .main-section{padding-top: 80px;padding-bottom: 60px;}
  .title-wrap .btn{width: 35px; height: 35px;}


  /* main-banner */
  .main-banner{height: 620px;}
  .main-banner .banner-txt{font-size: 1.5em;left: 20px;text-align: center;top: 50%;left: 50%;width: 100%;transform: translate(-50%, -50%);}
  .main-banner__btnWrap{bottom: 50px;left: 50%;transform: translateX(-50%);}
  .main-banner__btn .swiper-pagination{margin: 0 10px;}
  .main-banner__btn .swiper-pagination-bullet{margin: 0 6px;}

  /* sns */
  .main-sns{margin-top: 80px;}
  .main-sns__wrap {height: 460px;padding-top: 30px;}
  .main-sns .sns-cont__wrap {width: 100%;padding-top: 125px;height: auto;} 
  .main-sns .slide-control {top: 91px;gap: 15px;z-index: 3;} 
  .main-sns .sns-cont__wrap .sns-slide { margin-top: 20px; } 
  .main-sns .sns-btn { width: 100%; height: auto; font-size: 14px; padding: 3px 16px; margin-bottom: 0; z-index: 3; } 
  .sns-cont__list > ul > li { flex: 1; } 
  .sns-cont__list > ul { display: flex; gap: 10px; } 
  .main-sns .sns-slide li {width: 250px;height: auto;} 
  .main-sns .sns-youtube .sns-slide li {width: 250px; height: 250px;}
  .main-sns .sns-slide a {height: 0;} 
  .main-sns .sns-slide li:not(:last-child) {margin-right: 10px;} 
  .main-sns .sns-youtube a {padding: 30px 20px;height: 100%;} 
  .main-sns .youtube-img { height: 0; position: relative; overflow: hidden; padding-bottom: calc((200 / 360) * 100%); } 
  .main-sns .youtube-img img { position: absolute; top: 0; left: 0; } 
  .main-sns .youtube-tit { font-size: 16px; margin-top: 15px; } 

  
  /* story */
  .section-story::before{width: 340px;height: 239px;}
  .section-story::after {width: 200px; height: 230px;}
  .section-story .title-wrap{margin-bottom: 20px;}
  .story-btn{gap: 20px;}
  .story-slide li{width: calc(100% - 70px);}

  /* board */
  .section-board .title-wrap {margin-bottom: 15px;}

  /* activity */
  .activity-list{flex-wrap: wrap; margin-top: 50px;}
  .activity-list > li{width: 100%;}
  .activity-list > li:first-child {margin-right: 0; margin-bottom: 30px;}
  .activity-box__btn {width: 215px; height: 50px; font-size: 1.25em;}
}