@charset "utf-8";

/*비주얼*/
.visual{position:relative;width:100%;height:100dvh;}
.visual .txt-area{position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);text-align: center;color:#fff;z-index:3}
.visual .con-txt{position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);opacity:0;width:max-content;}
.visual .visual-txt1 img{width:500px;}
.visual .visual-txt2 h2{margin-bottom:calc(var(--mg-mm) - 10px);font-size: 100px;font-weight: 700;}
.visual .visual-txt2 p{font-size: 30px;}
.visual .scr-btn{display:flex;position:absolute;bottom:var(--mg-mm);left:50%;z-index:3;transform: translateX(-50%);font-size: 14px;color:#fff;font-weight: 700;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;}
.visual .scr-btn p{margin-bottom:40px}
.visual .scr-btn span{display:block;position:relative;width:38px;height:38px;background:rgba(255,255,255,0.1);border-radius: 50%;}
/* .visual .scr-btn span::before{content:'';display:block;position:absolute;bottom:19px;left:19px;width:1px;height:43px;background:#fff;} */
/*animation:scrBtn 1.2s infinite;*/
.visual .visual-txt1{animation:opacityOnOff 2.5s 1 forwards 1s;}
.visual .visual-txt2{animation:opacityOn 2.5s 1 forwards 3.5s;}
.visual::before{content:'';display:block;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background:rgba(0,0,0,0.3)}
.visual .line{position:absolute;width:1px;height:50px;}

@keyframes opacityOnOff{
  0%{opacity:0; transform:translate(-50%, -40%)}
  80%{opacity:1; transform:translate(-50%, -50%)}
  100%{opacity:0;}
}

@keyframes opacityOn{
  0%{opacity:0; transform:translate(-50%, -40%)}
  100%{opacity:1; transform:translate(-50%, -50%)}
}

/* @keyframes scrBtn{
  0%{transform: translateY(-6px);}
  50%{transform: translateY(0px);}
  100%{transform: translateY(-6px);}
} */

/*섹션1*/
.intro{overflow:hidden;}
.intro .txt-area{position:relative;width:100%;height:100%;margin-bottom:var(--mg-bg);text-align: center;line-height:1.3;}
.intro .txt-area .con-tit{position:absolute;top:40%;left:50%;transform:translate(-50%, -50%);width:100%;}
.intro .txt-area p{font-size: var(--com-txt-bg);}
.intro .txt-area h3 span{font-weight: 400;}
.intro .txt-area h3{margin-top:30px;font-size: 60px;font-weight: 700;}
.intro .con-img{position:absolute;top:0;left:0;width:100%;height:100dvh;}
.intro .con-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;}
.intro .con-img video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;}
.intro{height:100vh;}
.intro .con-img::before{content:'';display:block;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background:rgba(0,0,0,0.2)}

/*서비스*/
.service{padding-top:calc(var(--mg-bg));}
.service h3{font-size: var(--com-txt-bg);font-weight: 700;}
.service .con-tit a{display:flex;font-size: var(--com-txt-sm);align-items: center;gap:5px;}
.service .service-bx{padding:var(--mg-bg) 0;}
.service .service-bx:not(.service-bx1){margin-top:-220px;}
.service .service-bx:not(.service-bx4){padding-bottom:calc(var(--mg-mm) * 2);}
.service .service-bx .con-tit p{display:flex;width:80px;height:34px;margin-bottom:30px;align-items: center;justify-content: center;border-radius: 999px;font-size:var(--com-txt-sm);font-weight: 600;}
.service .service-bx h4{font-size:120px;font-weight: 700;}
.service .service-bx .con-tit{margin-bottom:var(--mg-mm);}
.service .service-bx .con-txt h5{margin-bottom:13px;font-size: 30px;font-weight: 700;line-height:1.2;}
.service .service-bx .con-txt p{font-size: var(--com-txt);line-height:1.6;}
.service .service-bx .con-r{padding-left:calc(var(--mg-bg) - 20px)}
.service .service-bx .con-r a {display: block; border-radius: 10px; overflow: hidden}
.service .service-bx .con-r img{width:600px; vertical-align: top}
.service .service-bx1 .con-tit p{background:var(--bg1)}
.service .service-bx2{background:var(--bg1)}
.service .service-bx2 .con-tit p{background:#DFE3EA;}
.service .service-bx3{background:var(--main);color:#fff;}
.service .service-bx3 .con-tit p{background:rgba(238, 238, 238, 0.20);}
.service .service-bx4{background:var(--bk);color:#fff;}
.service .service-bx4 .con-tit p{background:rgba(238, 238, 238, 0.20);}

/*미디어쿼리*/
@media screen and (max-width:1024px){
  .intro .txt-area h3{font-size:45px;}
  .service .service-bx .con-r img{width:400px}
  .service .service-bx h4{font-size: 70px;}
  .service .service-bx .con-txt h5{font-size: 25px;}
  .service .service-bx .con-r{padding-left:var(--mg-mm);}
  .visual .visual-txt2 h2{font-size: 70px;}
  .visual .visual-txt2 p{font-size: 25px;}
  .visual .visual-txt1 img{width:400px;}
  .service{padding-top:var(--mg-bg);}
}

@media screen and (max-width:768px){
  .intro .txt-area h3{font-size:35px;}
  .service .service-bx .inner{flex-wrap: wrap;}
  .service .service-bx .inner>div{width:100%;padding:0;}
  .service .service-bx .con-r{margin-top:30px;}
  .service .service-bx h4{font-size: 40px;}
  .service .service-bx1 .con-tit p{height:30px;width:70px;margin-bottom:20px;}
  .service .service-bx .con-r img{width:100%;}
  .visual .visual-txt2 h2{font-size: 50px;}
  .visual .visual-txt2 p{font-size: 16px;line-height:1.5;}
  .visual .visual-txt1 img{width:60vw;}
}