@charset "utf-8";

.main {color: #fff; background: #000;}
.main .h-full {height: 100vh;}

.main section.sec1 .ani-wrap {background-image: url(/img/main/main_bg01.jpg);}
.main section.sec2 .ani-wrap {background-image: url(/img/main/main_bg02.jpg);}
.main section.sec3 .ani-wrap {background-image: url(/img/main/main_bg03.jpg);}
.main section.sec4 .ani-wrap {background-image: url(/img/main/main_bg04.jpg);}
.main .ani-wrap { width: 100%; height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center;}
.main .ani-wrap .text-box {text-align: center;}


.main .main-ani {position: relative; height: 430vh;}
.main .main-ani .item-box {height: 100vh;}
.main .main-ani section { }
.main .main-ani section .ani-wrap {position: absolute; left: 0; top: 0;}

.main .main-ani .clip-ani .ani-wrap { clip-path:circle(0% at 50% 50%); transition: clip-path 1.2s;}
.main .main-ani .clip-ani.active .ani-wrap {clip-path: circle(100% at 50% 50%); }



/*  */
.sec2 .text-box {}
.sec2 .text-box .po-mid {display: flex; margin: 70px 0; gap: 40px; justify-self: center;}

.sec3 .text-box {display: flex; justify-content: center; align-items: center; gap: 200px; }
.sec3 .text-box .po-center {position: relative; color: #000; width: 280px; }
.sec3 .text-box .po-center::before {content:""; width: 280px; height: 280px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url(/img/main/icon_plus.png) center no-repeat; z-index: -1; opacity: 0.7; background-size: cover;}
/* .sec3 .text-box .po-center::before,
.sec3 .text-box .po-center::after {content:""; width: 80px; height: 280px; background: rgba(255,255,255,0.6); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1;} */
.sec3 .text-box .po-center::after {transform: translate(-50%,-50%) rotate(90deg);}

.sec4 .text-box {display: flex; gap: 780px; justify-content: center; align-items: center; }
@media screen and (max-width:1280px) {
  .sec3 .text-box {gap: 120px;}
  .sec3 .text-box .po-center {width: 200px;}
  .sec3 .text-box .po-center::before {width: 200px; height: 200px;}

  .sec4 .text-box {gap: 400px;}
}
@media screen and (max-width:1024px) {
  .sec2 .text-box .po-mid {margin: 45px 0; gap: 28px;}

  .sec3 .text-box {flex-direction: column; }
  .sec4 .text-box {flex-direction: column; gap: 200px;}
  .sec4 .text-box .img-box {width: 200px;}
}
@media screen and (max-width:768px) {
  .main .main-ani {height: 450vh;}
  .main .ani-wrap .text-box {padding: 0 3%;}

  .sec2 .text-box .po-mid {gap: 16px; margin: 40px 0;}

  .sec3 .text-box {gap: 100px;}
  .sec3 .text-box .po-center::before {width: 180px; height: 180px;}

  .sec4 .text-box {gap: 160px;}
  .sec4 .text-box .img-box {width: 60%; margin: auto;}
}
@media screen and (max-width:480px) {
  .sec2 .text-box .po-mid {gap: 8px;}

  .sec3 .text-box {gap: 80px;}
  .sec3 .text-box .po-center::before {width: 140px; height: 140px;}
}



/*  */
.sec5 {padding-top: 200px; padding-bottom: 100px;}
.sec5 .inner {max-width: 1240px; width: 90%; overflow: hidden;}
.sec5 .bnr-slide {position: relative;}
.sec5 .bnr-slide .slide-util {position: absolute; left: 0; top: 80px; display: flex; align-items: center; gap: 10px; font-size: var(--font-18); z-index: 5; text-align: center;}
.sec5 .bnr-slide .slide-util .slide-arr {width: 20px; height: 20px; cursor: pointer; background-position: center; background-repeat: no-repeat; background-size: cover;}
.sec5 .bnr-slide .slide-util .slide-arr.prev-btn {background-image: url(/img/com/arr_left.svg);}
.sec5 .bnr-slide .slide-util .slide-arr.next-btn {background-image: url(/img/com/arr_right.svg);}
.sec5 .bnr-slide .slide-util .slide-arr.swiper-button-disabled {opacity: 0.5;}
.sec5 .bnr-slide .slide-util .slide-paging .active {font-weight: 800;}

.sec5 .bnr-slide .item {display: flex; justify-content: space-between; background: #000; padding: 40px 40px 0 0;}
.sec5 .bnr-slide .item .left {padding-top: 80px;}
.sec5 .bnr-slide .item .left .btn-box {margin-top: var(--row-60); transform: translateY(100%); opacity: 0; }
.sec5 .bnr-slide .item .right {position: relative; transform: translateY(10%); opacity: 0; max-width: 50%; width: 50%; max-width: 550px;}
.sec5 .bnr-slide .item .right::before {content:""; position: absolute; width: 100%; height: 100%; background: #Fff; opacity: 0.15; right: -40px; top: -40px;}
.sec5 .bnr-slide .item .right .img-box {position: relative; z-index: 0; width: 100%; }
.sec5 .bnr-slide .item .right .img-box span {display: block; padding-top: 118%; position: relative; overflow: hidden;}
.sec5 .bnr-slide .item .right .img-box span img {width: 100%; height: 100%; position: absolute;left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover;}

.sec5 .bnr-slide .menu-list {position: absolute; left: 50%; bottom: 30px; transform: translateX(-60%); z-index: 5;}
.sec5 .bnr-slide .menu-list ul li {width: 250px; height: 50px; padding: 0 25px; display: flex; gap: 10px; font-size: var(--font-18); background: var(--c-red2); color: #fff; font-weight: 600; transition: 0.3s; align-items: center; cursor: pointer; transform: translateY(50%); opacity: 0; transition-property: transform, opacity ; transition-duration: 0.8s;}
.sec5 .bnr-slide .menu-list ul li:nth-child(1) {transition-delay: 0.8s;}
.sec5 .bnr-slide .menu-list ul li:nth-child(2) {transition-delay: 1s;}
.sec5 .bnr-slide .menu-list ul li:nth-child(3) {transition-delay: 1.2s;}
.sec5 .bnr-slide .menu-list ul li:nth-child(4) {transition-delay: 1.4s;}
.sec5 .bnr-slide .menu-list ul li:nth-child(5) {transition-delay: 1.6s;}
.sec5 .bnr-slide .menu-list ul li + li {margin-top: 10px;}
.sec5 .bnr-slide .menu-list ul li span {font-weight: 800;}
.sec5 .bnr-slide .menu-list ul li.active {background: #fff; color: var(--c-red2);}

.sec5 .bnr-slide .item .tit {display: block; transform: translateY(50%); opacity: 0; }
.sec5 .bnr-slide .item .txt {font-size: var(--font-20); color: #fff; opacity: 0; transform: translateY(80%); margin-top: 0.5em;}
.sec5.sc-ani .bnr-slide .item .tit {transform: translateY(0); opacity: 1; transition: 0.8s;}
.sec5.sc-ani .bnr-slide .item .txt {transform: translateY(0); opacity: 1; transition: 0.8s; /*font-family: var(--crimson);*/ letter-spacing: 0px;}
.sec5.sc-ani .bnr-slide .item .left .btn-box {transform: translateY(0); opacity: 1; transition: 0.8s 0.4s;}
.sec5.sc-ani .bnr-slide .item .right {transform: translateY(0); opacity: 1; transition: 1s 0.8s;}
.sec5.sc-ani .bnr-slide .menu-list ul li {transform: translateY(0); opacity: 1;}

/*  */
.text-move {width: 100%; overflow: hidden; padding: 50px 0;}
.text-move .roll-box {display: flex; gap: 50px; white-space: nowrap; font-size: 0;}
.text-move .roll-box span {display: block; height: 110px; flex-shrink: 0;}
.text-move .roll-box span img {height: 100%; }


@media screen and (max-width:1280px) {
  .sec5 .bnr-slide .menu-list ul li {width: 220px;}

  .text-move .roll-box span {height: 90px;}
}
@media screen and (max-width:1024px) {
  .sec5 .bnr-slide .slide-util {top: 20px;}
  .sec5 .bnr-slide .item {padding: 0; padding-right: 20px; flex-direction: column; gap: 60px;}
  .sec5 .bnr-slide .item .right {width: 60%; margin-left: auto;}
  .sec5 .bnr-slide .item .right::before {right: -20px; top: -20px;}
  .sec5 .bnr-slide .menu-list {left: 40%; transform: translateX(-70%);}
  .sec5 .bnr-slide .menu-list ul li {padding: 0 18px;}
}
@media screen and (max-width:768px) {
  .sec5 {padding: 120px 0 60px;}
  .sec5 .bnr-slide .item .right {width: 80%;}
  .sec5 .bnr-slide .menu-list ul li {width: 180px; padding: 0 16px; font-size: 14px; gap: 8px; height: 46px;}

  .text-move .roll-box span {height: 70px;}
}
@media screen and (max-width:480px) {
  .sec5 .bnr-slide .item .right {width: 90%;}
  .sec5 .bnr-slide .menu-list {left: 0; transform: translate(0); bottom: 0;}
  .sec5 .bnr-slide .menu-list ul li {width: 140px; font-size: 12px; height: 40px; padding: 0 12px; gap: 4px;}

  .text-move {padding: 30px 0;}
  .text-move .roll-box span {height: 50px;}
}





/* sec6 */
.sec6 {max-width: 1920px; margin: 0 auto; padding: 100px 0; overflow: hidden;}

.sec6 .item {display: flex; align-items: center; margin: 100px 0;}
/* 좌상 우상 우하 좌하 */
.sec6 .item .img-area {width: 52%; max-width: 1000px; position: relative; flex-shrink: 0;}
.sec6 .item .img-area .bg { width: 100%;  height: 550px;  transition: 1s;}
.sec6 .item .img-area .img-box {position: absolute; font-size: 0; }
.sec6 .item .img-area .logo {position: absolute;}

.sec6 .item .text-area {width: 100%;}
.sec6 .item .text-area .tit {font-weight: 700; font-family: var(--archivo);}
.sec6 .item .text-area .tit span {display: block; margin-bottom: 5px; font-weight: 500; font-size: 20px; line-height: 1.2;}
.sec6 .item .text-area .txt {font-size: 25px; margin-top: 30px;}
.sec6 .item .text-area .txt .en {font-size: 0.8em; font-weight: 400; margin-top: 10px; letter-spacing: 0.05em;}
.sec6 .item .text-area .btn-box {margin-top: var(--row-80);}

.sec6 .item.left .text-area {padding-left: 180px; }
.sec6 .item.left .img-area .bg {background: var(--c-red); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
.sec6 .item.left .img-area .img-box {left: 50%; bottom: 0; transform: translateX(-50%); width: 50%; min-width: 300px;}
.sec6 .item.left .img-area .logo {right: 100px; top: 80px;}

.sec6 .item.right .text-area {padding-right: 180px; text-align: right;}
.sec6 .item.right .img-area .bg {background: #fff; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);}
.sec6 .item.right .img-area .img-box {right: 60px; bottom: 80px; min-width: 300px; }
.sec6 .item.right .img-area .logo {bottom: 100px; left: 80px;}

.sec6 .item.sc-ani.left .img-area .bg {clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);}
.sec6 .item.sc-ani.right .img-area .bg {clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);}
@media screen and (max-width:1280px) {
  .sec6 .item.left .img-area .logo {width: 100px; right: 80px; top: 60px;}
  .sec6 .item.left .text-area {padding-left: 10%;}

  .sec6 .item.right .text-area {padding-right: 10%;}
  .sec6 .item.right .img-area .img-box {right: unset; bottom: unset; top: 30%; left: 60%; transform: translate(-50%,-50%); width: 70%; }
  .sec6 .item.right .img-area .logo {bottom: 60px; left: 80px;}

  .sec6 .item .img-area .bg {height: 460px;}
  .sec6 .item .text-area .txt {font-size: 22px; margin-top: 1em;}

}
@media screen and (max-width:1024px) {
  .sec6 .item {gap: var(--row-60);}
  .sec6 .item.left {flex-direction: column;}
  .sec6 .item.left .img-area .logo {right: 50px; top: 40px;}
  .sec6 .item.left .img-area .img-box {left: 10px; transform: translateX(0); width: 300px;}
  .sec6 .item.left .text-area .txt-wrap .img-logo {height: 60px;}
  .sec6 .item.left .text-area .txt-wrap .img-logo img {height: 100%;}
  .sec6 .item.right {flex-direction: column-reverse;}
  .sec6 .item.right .img-area .img-box {width: 400px; left: 70%;}
  .sec6 .item.right .img-area .logo {bottom: 50px; left: 50px; height: 35px;}
  .sec6 .item.right .img-area .logo img {height: 100%;}

  .sec6 .item .img-area {width: 80%;}
  .sec6 .item .img-area .bg {height: 280px;}
  .sec6 .item .text-area .txt {font-size: 20px;}
  .sec6 .item .text-area .btn-box {margin-top: 26px;}

}
@media screen and (max-width:768px) {
  .sec6 .item .text-area .tit span {font-size: 18px;}
  .sec6 .item.left .img-area .img-box {width: 240px; min-width: unset;}
  .sec6 .item.right .img-area .img-box {width: 320px; left: unset; transform: translateY(-50%); right: 0;}
}
@media screen and (max-width:480px) {
  .sec6 {padding: 60px 0;}
  .sec6 .item {margin: 80px 0;}
  .sec6 .item .img-area .bg {height: 200px; transition: 0.6s;}
  .sec6 .item .text-area .txt {font-size: 16px;}

  .sec6 .item.left .img-area .img-box {width: 70%;}
  .sec6 .item.left .img-area .logo {right: 30px; top: 30px; width: 60px;}
  .sec6 .item.left .text-area .txt-wrap .img-logo {height: 46px;}

  .sec6 .item.right .img-area .img-box {width: 90%; min-width: unset; top: 25%;}
  .sec6 .item.right .img-area .logo {left: 30px; bottom: 30px; height: 24px;}
}


/* sec7 */
.sec7 {margin-bottom: 250px; overflow: hidden; width: 100%;}
.sec7 .head {margin-bottom: 100px; text-align: center;}
.sec7 .head .tit {line-height: 1.2; margin-top: 10px;}
.sec7 .head .txt {color: #eee;}
.sec7 .head .txt-en {font-size: 20px; margin-top: 0.5em; letter-spacing: 0;}


.sec7 .slide-area {width: 480px; margin: auto;}
.sec7 .recipe-slide {padding: 0 45px; position: relative; overflow: visible;}
.sec7 .recipe-slide .swiper-slide {}
.sec7 .recipe-slide .swiper-slide .img-box {margin: auto; font-size: 0; text-align: center; position: relative;}
.sec7 .recipe-slide .swiper-slide .img-box::before {content:""; width: 400px; height: 400px; background: radial-gradient(circle closest-side, #D0151B, transparent); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; z-index: -1; transition: 0.5s 0.2s;}
.sec7 .recipe-slide .swiper-slide .img-box span {display: block; transition: transform 0.5s 0.2s; width: 100%; position: relative; padding-top: 112%;}
.sec7 .recipe-slide .swiper-slide .img-box span img {position: absolute; max-width: 100%; max-height: 100%; transform: translate(-50%,-50%); object-fit: cover; left: 50%; top: 50%;}
.sec7 .recipe-slide .swiper-slide .text-box {margin-top: 60px; text-align: center; opacity: 0; pointer-events: none; transition: 0.3s 0.5s; }
.sec7 .recipe-slide .swiper-slide .text-box .pd-name {font-weight: 800; font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec7 .recipe-slide .swiper-slide .text-box p.txt-ty3 { margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0;}
.sec7 .recipe-slide .swiper-slide .text-box .btn-box {margin-top: 40px;}

.sec7 .recipe-slide .slide-arr {position: absolute; z-index: 5; height: 0; width: 100%; left: 0; top: 200px;  display: flex; justify-content: space-between; align-items: center;}
.sec7 .recipe-slide .slide-arr > div {width: 50px; height: 50px; background: #262626; background-position: center; background-repeat: no-repeat;  }
.sec7 .recipe-slide .slide-arr .prev-btn {background-image: url(/img/com/icon_left_arrow.svg);}
.sec7 .recipe-slide .slide-arr .next-btn {background-image: url(/img/com/icon_right_arrow.svg);}

.sec7 .recipe-slide .swiper-slide.swiper-slide-active .img-box span { transform: scale(1.2);}
.sec7 .recipe-slide .swiper-slide.swiper-slide-active .img-box::before {opacity: 1;}
.sec7 .recipe-slide .swiper-slide.swiper-slide-active .text-box {opacity: 1; pointer-events: auto;}
@media screen and (max-width:1280px) {

}
@media screen and (max-width:1024px) {
  .sec7 .recipe-slide .swiper-slide .text-box .pd-name {font-size: 26px;}
}
@media screen and (max-width:768px) {
  .sec7 .slide-area {width: 90%; max-width: 480px; }
}
@media screen and (max-width:480px) {
  .sec7 {margin-bottom: 180px;}
  .sec7 .head {margin-bottom: 60px; padding: 0 12px;}
  .sec7 .head .logo img {width: 20%; }

  .sec7 .recipe-slide .slide-arr {top: calc(90vw/2 - 20px); }
  .sec7 .recipe-slide .slide-arr > div {width: 40px; height: 40px;}
  .sec7 .recipe-slide .swiper-slide .text-box p.txt-ty3 {margin-top: 6px;}
  .sec7 .recipe-slide .swiper-slide .text-box .btn-box {margin-top: 24px;}
}


/* sec8 */
.sec8 {position: relative; text-align: center; overflow: hidden; width: 100%;}
.sec8 .item-wrap {width: 100%; height: 100vh;}
.sec8 .item-wrap .img-box {position: sticky; left: 0; top: 0; width: 100%; height: 100%; font-size: 0;}
.sec8 .item-wrap .img-box span {display: block; width: 100%; height: 100%;}
.sec8 .item-wrap .img-box span img {width: 100%; height: 100%; object-fit: cover;  }

.sec8 .item-wrap .text-box {position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; flex-wrap:wrap;}
.sec8 .item-wrap .logo {width: 100%; position: absolute; top: 24vh; z-index: 5;}
.sec8 .item-wrap .text-box span {display: block; width: 440px;}
@media screen and (max-width:1280px) {

}
@media screen and (max-width:1024px) {
  .sec8 .item-wrap .logo {top: 29vh;}
  .sec8 .item-wrap .logo img {width: 180px;}
  .sec8 .item-wrap .text-box span {width: 310px;}
}
@media screen and (max-width:768px) {
  .sec8 .item-wrap .logo img {width: 140px;}
  .sec8 .item-wrap .text-box > div {width: 120px;}
  .sec8 .item-wrap .text-box span {width: 100%;}
  .sec8 .item-wrap .text-box > div .txt-ty5 {font-size: 26px;}
  .sec8 .item-wrap .text-box > div .txt-ty3 {font-size: 16px;}
}
@media screen and (max-width:480px) {
  .sec8 .item-wrap .logo img {width: 120px;}
  .sec8 .item-wrap .text-box > div .txt-ty5 {font-size: 20px;} 
  .sec8 .item-wrap .text-box > div .txt-ty3 {font-size: 14px;}
}