@charset "utf-8";

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}

@keyframes visual_scale {
 from{transform:scale(1.2);}
 to{transform:scale(1);}
}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(20rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

@keyframes moveArrowDown {
  0% {opacity: 0; transform: translateY(-100%) rotate(90deg);}
  50% {opacity: 1; transform: translateY(0) rotate(90deg);}
  100% {opacity: 0; transform: translateY(100%) rotate(90deg);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

 /* common */
.main-dec {display: flex; align-items: center; margin-bottom: 35rem; font-weight: 600; line-height: normal;}
.main-dec::before {content:''; width: 10rem; height: 10rem; margin-top: -1px; margin-right: 10rem; border-radius: 100%; border: 3rem solid var(--point-color);}

h3 {line-height: 1.3; font-size: var(--font-75); font-weight: 500; letter-spacing: -1px;}

@media (max-width: 540px){
  .main-dec {margin-bottom: 27rem; font-size: 13rem;}
  .main-dec::before {width: 6rem; height:6rem; margin-right: 8rem; margin-top: -2rem; border-width: 2rem;}
  
  h3 {word-break: keep-all; letter-spacing: -0.5px;}
}

/* main visual */
.main-visual{position: relative; height:var(--height-full);}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual__bg{overflow: hidden; position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover; background-image: url(../img/main/main-visual.jpg); transform: scale(1.2); animation:visual_scale 12s ease forwards;}

.main-visual__controls {z-index: 1; position: absolute; left: 57rem; bottom: 73rem; display:flex; gap:18rem;}
.main-visual__btn {width: 60rem; height: 60rem; font-size: 0; background-image: url(../img/main/slider-arrow.svg); background-repeat: no-repeat; background-size: 22rem; background-position: center;}
.main-visual__btn.button-prev {transform: scaleX(-1);}
.main-visual__count {display: inline-flex; align-items: center; font-weight: 700; color: var(--white);}
.main-visual__count .swiper-pagination {position: relative; display: inline-flex; align-items: center; margin: 0 14rem;}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:7rem; height:7rem; margin: 0 7rem; border-radius: 7rem; background:#fff; transition: var(--trans-01);}
.main-visual .swiper-pagination-bullet-active{opacity:1; width: 40rem;}

.main-visual__video {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: auto;
    backface-visibility: hidden;
}
/* .main-visual__video {object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);} */
/* .main-visual__item::after {opacity: .5; position:absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #000;} */

.main-visual__text{z-index: 1; position:absolute; bottom:160rem; width:100%; color: var(--white);}
.main-visual__text h2{overflow:hidden;line-height:1.3;}
.main-visual__text h2 span {display: block; opacity: 0; font-size: var(--font-58); font-weight: 700; letter-spacing: -1px; word-break: keep-all; animation:text_up_motion 1.6s ease .3s forwards;}
.main-visual__text p {overflow:hidden; margin-bottom:22rem;}
.main-visual__text p span {display: block; opacity: 0; font-family: var(--lang-en); font-weight: 600; font-size: var(--font-16); animation:text_up_motion 1.6s ease .1s forwards;}

/* .main-scroll {position: absolute; right: 50rem; bottom: 50rem; display: flex; width: 100rem; height: 100rem; justify-content: center; align-items: center; border: 2rem solid var(--white); border-radius: 100%;}
.main-scroll i {position: relative; display: block; overflow: hidden; width: 35rem; height: 35rem;}
.main-scroll i::after {position: absolute; content:''; width: 100%; height: 100%; background: url(../img/layout/arrow-basic_w.svg) no-repeat center / contain; transform: rotate(90deg); animation:moveArrowDown 1.6s infinite ease-in-out} */

/* @media (min-aspect-ratio: 16/9) {
  .video-wrap video{height: 56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.video-wrap video{width: 177.78vh;}
} */


@media all and (max-width:1200px){
  .main-visual__text p {margin-top: 22rem;}
}

@media (max-width: 540px){
  .main-visual__text{position:absolute; bottom:120rem; }
  .main-visual__text p {margin-bottom: 15rem;}
  .main-visual__text p span {font-size: 13rem;}

  .main-visual__controls {left: 12rem; bottom: 50rem; gap: 12rem;}
  .main-visual__btn {width: 40rem; height: 40rem; background-size: 18rem;}
  .main-visual__count {font-size: 13rem; font-weight: 600;}
  .main-visual__count .swiper-pagination {margin: 0 10rem;}
  .main-visual .swiper-pagination-bullet{width: 5rem; height: 5rem; margin: 0 5rem;}
  .main-visual .swiper-pagination-bullet-active{width: 30rem;}

  /* .main-scroll {left: 50%; right: auto; bottom: 30rem; width: 52rem; height: 52rem; transform: translateX(-50%);}
  .main-scroll i {width: 22rem; height: 22rem;} */
}


/* about */
.main-about {overflow: hidden; position: relative; padding:max(9.3750vw, 180rem) 0 max(9.8958vw, 190rem);}
.main-about::before {opacity: 0.13; position: absolute; right: -7%; top: -11%; content:''; display: block; width: 618rem; height: 618rem; background: url(../img/layout/symbol.svg) no-repeat center / contain;}
.main-about__list {display: flex; justify-content: space-between; align-items: center; margin-top: 80rem;}
.main-about__list figure {overflow: hidden; flex-shrink: 0; width: 57%; margin-right: 100rem; border-radius: var(--br-20);}
.main-about__list ul {width: 100%;}
.main-about__list li {display: flex; align-items: center; justify-content: space-between; padding: 20rem 0;}
.main-about__list li:not(:last-child) {border-bottom: 1px solid var(--bd-01);}
.main-about__list dt {display: block; margin-bottom: 8rem; font-size: 22rem; font-weight: 600; text-transform: uppercase;}
.main-about__list dd {color: var(--b-02);}
.main-about__list li p {display: inline-flex; align-items: center;font-family: var(--lang-ko); font-size: 77rem; font-weight: 400; letter-spacing: -2rem;}
.main-about__list li strong,
.main-about__list li span {font-family: var(--lang-ko); font-size: 77rem; font-weight: 400; letter-spacing: -2rem;}
.main-about__list li span {margin-left: 5rem;}
.main-about__list li:first-child span {margin-top: -12rem; line-height: 1;}

@media all and (max-width:1200px){
  .main-about {padding:max(9.3750vw, 180rem) 0;}
  .main-about__list {margin-top: 60rem;}
  .main-about__list figure {width: 55%; margin-right: 80rem;}
  .main-about__list li strong,
  .main-about__list li span {font-size: 70rem;}
}

@media all and (max-width:1023px){
  .main-about::before {opacity: 0.07; width: 500rem; height: 500rem;}
  .main-about__list {align-items: stretch; margin-top: 70rem;}
  .main-about__list figure {width: 50%;}
  .main-about__list li strong,
  .main-about__list li span {font-size: 60rem;}
  .main-about__list dl {width: 50%;}
}

@media (max-width:860px){
  .main-about {padding: 160rem 0 120rem;}
  .main-about::before {right: -13%; top: -13%;}
  .main-about__list {flex-direction: column; margin-top: 62rem;}
  .main-about__list figure {width: 100%; height: 350rem;}
  .main-about__list ul{margin-top: 30rem;}
}

@media (max-width: 540px){
  .main-about::before {display: none;}
  .main-about {padding: 80rem 0 60rem;}
  .main-about h3 br {display: none;}

  .main-about__list {margin-top: 40rem;}
  .main-about__list figure {margin-right: 0; height: 200rem;}  
  .main-about__list ul {margin-top: 5rem;}
  .main-about__list li strong,
  .main-about__list li span {font-size: 42rem;}
  .main-about__list dl {width: auto;}
  .main-about__list dt {margin-bottom: 5rem; font-size: 18rem;}
}

/* business */
.main-business {position: relative;}
.main-business .main-title {position: absolute; left:0; top:0; width: 100%; height: 100%;} 
.main-business .main-title .wrap {height: 100%;}
.main-business .main-title__inr {position: sticky; top: 0; height:var(--height-full); padding-top: max(9.3750vw, 180rem); ;  color: var(--white);}
.main-business .main-title__bg {position: absolute; top: 0; width: 100%; height: 100%;}
.main-business .main-title__bg figure {position: sticky; top: 0; width: 100%; height:var(--height-full); background: url(../img/main/business-bg.jpg) no-repeat top center / cover;}

.main-business__inr {padding: max(9.3750vw, 180rem) 0; text-align: right;}
.main-business__list {display: inline-block;}
.main-business__item a {overflow: hidden; position: relative; display: block; width: 500rem; height: 540rem; text-align: left; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; border-radius: var(--br-20); transition: var(--trans-01); cursor: pointer;}
.main-business__item:not(:last-child) {margin-bottom: 42rem;}
.main-business__item:nth-child(1) a {background-image: url(../img/main/business01.jpg);}
.main-business__item:nth-child(2) a {background-image: url(../img/main/business02.jpg);}
.main-business__item:nth-child(3) a {background-image: url(../img/main/business03.jpg);}
.main-business__item:nth-child(4) a {background-image: url(../img/main/business04.jpg);}
.main-business__item .btn-wrap {opacity: 0; height: 0; transition: var(--trans-01);}

.main-business__txt {position: relative; display: flex; flex-direction: column; justify-content:flex-end; height: 100%; padding: 50rem 40rem; color: var(--white);}
.main-business__txt::before {position: absolute; left:0; bottom:0; content:''; display: block; width: 100%; height: 100%;}
.main-business__txt strong {position: relative; margin-bottom: 10rem; font-size: var(--font-24); font-weight: 600;}
.main-business__txt p {position: relative; line-height: 1.6;}

.main-business__item:nth-child(1) .main-business__txt::before {background: linear-gradient(180deg,rgba(24, 47, 48, 0) 0%, rgba(24, 47, 48, 1) 80%);}
.main-business__item:nth-child(2) .main-business__txt::before {background: linear-gradient(180deg,rgba(38, 32, 32, 0) 0%, rgba(38, 32, 32, 1) 80%);}
.main-business__item:nth-child(3) .main-business__txt::before {background: linear-gradient(180deg,rgba(61, 29, 19, 0) 0%, rgba(61, 29, 19, 1) 80%);}
.main-business__item:nth-child(4) .main-business__txt::before {background: linear-gradient(180deg,rgba(75, 46, 17, 0) 0%, rgba(75, 46, 17, 1) 80%);}

@media (hover: hover) and (pointer: fine){
	.main-business__item a:hover {box-shadow: 45rem 66rem 40rem rgba(0, 0, 0, .1);}
	.main-business__item a:hover .btn-wrap {opacity: 1; height: 63rem; margin-top: 25rem;}
}

@media all and (max-width:1200px){
  .main-business__item a{width: 420rem;}

  @media (hover: hover) and (pointer: fine){
    .main-business__item a:hover {box-shadow: 24rem 40rem 28rem rgba(0, 0, 0, .1);}
  }
}

@media all and (max-width:1023px){
  .main-business__item a {width: 375rem; height: 470rem;}
  .main-business__txt {padding: 40rem 30rem;}

  @media (hover: hover) and (pointer: fine){
    .main-business__item a:hover {box-shadow: 15rem 30rem 20rem rgba(0, 0, 0, .1);}
  }
}
@media (max-width:860px){
  .main-business .main-title__inr {position: relative; height: auto; padding-top: 150rem;}
  .main-business__inr {padding: 440rem 0 140rem;}
  .main-business__list {display: block;}
  .main-business__item a {width: 100%; height: 400rem;}
  .main-business__item .btn-wrap {opacity: 1; position: absolute; right: 40rem; bottom: 50rem; height: auto; margin-top: 25rem;}
  .main-business__txt {padding: 50rem 40rem;}

  .main-business__item:nth-child(1) a {background-image: url(../img/main/business01_mob.jpg);}
  .main-business__item:nth-child(2) a {background-image: url(../img/main/business02_mob.jpg);}
  .main-business__item:nth-child(3) a {background-image: url(../img/main/business03_mob.jpg);}
  .main-business__item:nth-child(4) a {background-image: url(../img/main/business04_mob.jpg);}
}

@media (max-width: 540px){
  .main-business .main-title__inr {padding-top: 70rem;}
  .main-business__inr {padding: 250rem 0 80rem;}
  .main-business__item:not(:last-child) {margin-bottom: 20rem;}
  .main-business__item .btn-wrap{position: relative; right: auto; bottom: auto;}
  .main-business__txt {padding: 35rem 22rem;}
  .main-business__txt strong {margin-bottom: 7rem;}

  .main-business__item:nth-child(1) a {background-image: url(../img/main/business01.jpg);}
  .main-business__item:nth-child(2) a {background-image: url(../img/main/business02.jpg);}
  .main-business__item:nth-child(3) a {background-image: url(../img/main/business03.jpg);}
  .main-business__item:nth-child(4) a {background-image: url(../img/main/business04.jpg);}
}

@media (max-width: 1200px) and (hover: hover) and (pointer: fine){
  .main-business__item:hover {box-shadow: none;}
}

/* board */
.main-board {overflow: hidden; position: relative; padding-top: max(8.8542vw, 170rem);}
.gallery-slider {margin-top: 80rem;}
.gallery-slider__control {display: flex; align-items: center; position: absolute; right: 0; top: 80rem;}
.gallery-slider__control *[class^="swiper-button--"] {width: 52rem; height: 52rem; font-size: 0; background: url(../img/layout/arrow-basic.svg) no-repeat center / contain; cursor: pointer;}
.gallery-slider__control .swiper-button--prev {margin-right: 28rem; transform: scaleX(-1);}
.gallery-slider__control *.swiper-button-disabled {opacity: .15;}
.gallery-slider .swiper-slide {overflow: inherit;}
.gallery-slider .swiper-slide a {padding-top: 33rem; border-top: 2rem solid var(--bd-01); transition: var(--trans-01);}
.gallery-slider .swiper-slide strong {display:-webkit-box; overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis; margin-bottom: 10rem; font-size: 20rem; font-weight: 600;}
.gallery-slider .swiper-slide p {min-height: 52rem; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:2; line-height: 1.6; color: var(--b-02); word-break: keep-all;}
.gallery-slider .swiper-slide .img {overflow: hidden; position: relative; width: 100%; height: 280rem; margin-top: 50rem; border-radius: var(--br-20); background: #f4f4f4; transition: var(--trans-01);}
.gallery-slider .swiper-slide .img img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.gallery-slider .swiper-slide .img:not(:has(img))::after {filter: grayscale(1); -webkit-filter: grayscale(1); opacity: .2; position: absolute; left:50%; top: 50%; content:''; width: 200rem; height: 52rem; background: url(../img/layout/logo.svg) no-repeat center / contain; transform: translate(-50%, -50%);}
.gallery-slider .swiper-pagination {position: relative; margin-top: 40rem;}
.swiper-pagination-bullet {opacity: 1; width: 100%; width: 12rem; height: 12rem; margin: 0 3rem; background: #ddd; border-radius: 100%;}
.swiper-pagination-bullet-active {background: var(--point-color);}

@media (hover: hover) and (pointer: fine){
  .gallery-slider .swiper-slide a:hover {border-top-color: var(--point-color);}
  .gallery-slider .swiper-slide a:hover .img {box-shadow: 24rem 40rem 28rem rgba(0, 0, 0, 0.08);}
}

@media (max-width: 1200px) and (hover: hover) and (pointer: fine){
  .gallery-slider .swiper-slide a:hover .img {box-shadow: none;}
}

@media all and (max-width:1200px){
  .gallery-slider {margin-top: 65rem;}
}

@media (max-width:860px){
  .main-board {padding: 140rem 0 0;}
  .gallery-slider__control {display: none;}
  .gallery-slider .swiper-slide .img {height: 360rem;}
  .swiper-pagination-bullet {margin: 0 4rem;}

}
@media (max-width: 540px){
  .main-board {padding-top: 70rem;}
  .gallery-slider {margin-top: 40rem;}
  .gallery-slider .swiper-slide strong {margin-bottom: 8rem; font-size: 18rem;}
  .gallery-slider .swiper-slide .img {margin-top: 32rem; height: 240rem;}
  .gallery-slider .swiper-slide .img:not(:has(img))::after {width: 160rem; height: 40rem;}
  .gallery-slider .swiper-pagination {margin-top: 30rem;}
  .swiper-pagination-bullet {width: 10rem; height: 10rem;}

  .gallery-slider .swiper-slide a {padding-top: 26rem;}
}

/* bottom */
.main-bottom {overflow: hidden; position: relative; padding:max(19.2708vw, 370rem) 0 max(18.2292vw, 350rem); text-align: center;}
.main-bottom::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 50%; background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);}
.main-bottom__symbol {position: absolute; left:0; top:0; width: 100%; height: 100%;}
.main-bottom__symbol figure {opacity: .15; position: absolute; left: 50%; top: 50%; width: 618rem; aspect-ratio: 1/1; transform: translate(-50%, -50%); background:url(../img/layout/symbol.svg) no-repeat center / contain;}

.circle-bg {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.circle-bg span {opacity: 0; position: absolute; left: 50%; top: 50%; width: 618rem; aspect-ratio: 1/1;  border-radius: 100%; border: 1px solid rgba(255, 181, 58, 0.3); transform: translate(-50%, -50%); animation: ripple 4.5s infinite ease-out;}

.circle-bg span:nth-child(1) {animation-delay: 0s;}
.circle-bg span:nth-child(2) {animation-delay: 1.5s;}
.circle-bg span:nth-child(3) {animation-delay: 3s;}

.main-bottom .btn-wrap {margin-top: 45rem;}
.main-bottom__inr p {margin-bottom: 12rem; font-size: var(--font-24); font-weight: 500;}
.main-bottom__inr h3 strong {font-weight: 600; color: var(--point-color);}

@keyframes ripple {
  0% {opacity: 0.8; transform: translate(-50%, -50%) scale(1);}
  70% {opacity: 0.4;}
  100% { opacity: 0;transform: translate(-50%, -50%) scale(4);}
}

@media all and (max-width:1023px){
  .main-bottom {padding: 300rem 0;}
}

@media (max-width: 540px){
  .main-bottom {padding: 120rem 0;}
  .circle-bg span {width: 300rem;}
  .main-bottom__symbol figure {opacity: 0.08; width: 300rem; margin-top: -20rem;}
  .main-bottom__inr p {margin-bottom: 10rem;}
  .main-bottom .btn-wrap {margin-top: 30rem;}

  .circle-bg span:nth-child(1) {animation-delay: 0s;}
  .circle-bg span:nth-child(2) {animation-delay: 0.8s;}
  .circle-bg span:nth-child(3) {animation-delay: 1.6s;}
}