@charset "utf-8";
#fp-nav ul li, .fp-slidesNav ul li{margin:13px 7px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{background:#4fa4f8; /*네비게이션 컬러*/}

#fp-nav ul li, .fp-slidesNav ul li{
  margin: 15px 7px;
}
.fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell, .fp-auto-height.fp-section, .footer01 .fp-tableCell, .footer01 {
  height: auto !important;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{
}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{
}

#fp-nav{ opacity: 0; transition:opacity 1s 1s ease-out;}
#fp-nav.loaded{opacity: 1; }

.winload{ position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:2; transition:opacity 1s;}
.winload.loaded{ opacity: 0;}



/*.banner__video*/
.banner__video .bnnVideo{ position:relative; width:100%; height:100%;}
.banner__video .bnnVideo{ position:absolute; top:0; left:0; width:100%; height:100%;}
.banner__video #bnnvdo{ position:absolute; height:100%; width:100%; object-fit: cover;}
.banner__video .bnntxt{ width:100%; position:absolute; bottom:120px; }
.banner__video .title{ opacity: 0; transform:translateX(-70px); transition:transform 1s .5s ease-out, opacity 1s .5s ease-out;}
.banner__video .title.loaded{ opacity: 1; transform:translateX(0); }

@media screen and (max-width: 1024px){
  .banner__video {width: 100%; aspect-ratio: 16 / 9; min-height:650px}
  .banner__video .bnntxt{ bottom:70px; }
}
@media screen and (max-width: 768px){
  .banner__video .bnntxt{ bottom:30px; }
  .banner__video .bnntxt .title{line-height:1.1em;}
}



/*about__07*/
.about__07 {}
.about__07 .innerWrap::before { position:absolute; width:40%; top:0; right:0; height:100%; background:#eceff6; content:""; }
.about__07 .halfblockWrap{position:relative; display: flex; align-items: center;}
.about__07 .halfblock{}
.about__07 .halfblock.txtblock{ width:53%; padding-right:70px; }
.about__07 .halfblock.imgblock {width:47%; position:relative; }

.about__07 .halfblock.imgblock .imgratio{width:95%; aspect-ratio: 100/80;}
.about__07 .halfblock.imgblock img{width:100%; height:100%; object-fit:cover; border-radius: 30px;}
.about__07 .halfblock.txtblock button:hover a{color:#fff;}

.about__07 .ment{line-height: 1.6em;}
.about__07 .tbbtn{ border:1px solid #000; }
.about__07 .tbbtn span.dot{display: inline-block; width:13px; height:10px; position:relative; transition:.5s;}
.about__07 .tbbtn span.dot::after{ position:absolute; width:7px; height:7px; border-radius:50%; background:#000; top:calc(50% - 1px); left:0; transform:translate(-50%,-50%); content: ""; transition:width .5s;}

@media screen and (max-width:1300px){ 
  .about__07 .halfblock.txtblock{padding-left:0;}
  .about__07 .font60 {font-size:5rem;}
}
@media screen and (max-width:1024px){ 
  .about__07 .innerWrap::before{opacity:0;}
  .about__07 .halfblock.txtblock{padding-right:30px;}
  .about__07 .halfblock.imgblock .imgratio{width:100%;}
}
@media screen and (max-width:960px){
  .about__07 .halfblockWrap{width:95%; flex-wrap:wrap; margin:0 auto;}
  .about__07 .halfblock.txtblock{ width:100%; padding-right:0; padding-bottom:50px; }
  .about__07 .halfblock.imgblock {width:100%; }
}
@media screen and (max-width:768px){ 
  .about__07 .halfblockWrap{width:100%;}
  .about__07 .halfblock{width:100%;}
  .about__07 .halfblock, 
  .about__07 .halfblock .titleArea h2, 
  .about__07 .smallttl,
  .about__07 .halfblock .titleArea p{text-align: left;}
  .about__07 .font60 {font-size:3.4rem;}
  .about__07 span.sml_txt{font-size:2rem}
}
@media screen and (max-width:560px){ 
  .about__07 .font60 {font-size:3rem;}
}



/*about__08*/
.about__08{ position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size: cover; z-index: 0;}
.about__08::before { position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,.5); /*background-image: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.8));*/ content:""; z-index: -1;}
.about__08 .tit{ letter-spacing:0.02em;}
.about__08 .subtit{ line-height:1.7em; }
.about__08 .nbgall{ column-gap: 50px; }
.about__08 .nbgall .item{ background-color:rgba(0,0,0,.5); border-radius:30px; padding: 70px 20px; }
.about__08 .nbgall .item .number{letter-spacing:0.05em;}
.about__08 .nbgall .item .summary{ color:#4fa4f8; word-break:keep-all;}
@media screen and (max-width: 768px){
  .about__08 .nbgall .item { padding: 60px 20px;}
  .about__08 .subtit{ line-height:1.3em; }
  .about__08 .nbgall{ column-gap: 30px; row-gap: 30px; }
}
@media screen and (max-width: 560px){
  .about__08 .nbgall .item { padding: 50px 15px;}
  .about__08 .nbgall{ column-gap: 20px; row-gap: 20px; }
}



/* .service__09 - full4block_wrap 내 스타일 */
.service__09 .full4block_wrap {position:relative; width:100%; height:100vh; max-height:900px; min-height:600px; margin:0 auto;  }
.service__09 .blockBg_wrap::after{position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,.3); content:""; }
.service__09 .blockBg,
.service__09 .blockTxt {position:absolute; top:0; left:0; width:100%; height:100%; }

/* 백그라운드 이미지 */
.service__09 .blockBg {
  width:100%; height:100%;  background-repeat:no-repeat; background-position:center center; background-size: cover; opacity:0; transition-duration: 600ms; }

.service__09 .blockBg.on {opacity:1; }


/* 텍스트 부분 */
.service__09 .blockTxt {display:flex; flex-wrap:wrap;}
.service__09 .blockTxt a {
  width:25%;position:relative; display: flex; flex-direction: column;text-align: center; color: #fff; border-right:1px solid rgba(255,255,255,.1); }
.service__09 .blockTxt a:last-child {border:none;}
  /* hover dim */
.service__09 .blockTxt a:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); opacity:0.3; transition:opacity .2s;} 


/* text 위치 (선택자 간소화) */
.service__09 .txtWrap { width: 100%; position: absolute; top: 50%; transform: translateY(-30%); padding:0 20px; z-index:2; }

/* 타이틀 아래 선 (선택자 간소화) */
.service__09 .top_txt .title {position:relative; } 
.service__09 .top_txt .title:after {content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%) rotate( 45deg ); width:2px; height:30px; background-color:#fff; transition: transform .5s; } 

/* Content opacity (선택자 간소화) */
.service__09 .txtWrap .content {opacity:0; }

/* Hover 효과도 간소화된 선택자로 변경 */
.service__09 .blockTxt a:hover .txtWrap { transform: translateY(-50%);}
/* subtitle 클래스가 유틸리티와 함께 쓰이므로 hover 시 font-weight 덮어쓰기 */
.service__09 .blockTxt a:hover .top_txt .subtitle { color:#4fa4f8; font-weight:500;} 
.service__09  .blockTxt a:hover .txtWrap .content {opacity:1;}
.service__09 .blockTxt a:hover .top_txt .title:after { transform: translateX(-50%) rotate( 0deg ); }


@media screen and (max-width:768px) {
  .service__09 .blockTxt a {width:50%; }
  .service__09 .top_txt .title:after { height:25px;} 
}
@media screen and (max-width:560px) {
  .service__09 .full4block_wrap { height:100%; max-height:inherit; min-height:inherit; margin:0 auto; padding:20px 0;}
  .service__09 .blockTxt {position: relative;}
  .service__09  .blockTxt a {width:100%; padding:50px 0; border-bottom:1px dashed rgba(255,255,255,.2); border-right:0 none; }
  .service__09 .txtWrap {position:relative; top: inherit; transform: inherit;} 
  .service__09 .txtWrap .content {opacity:1;} 
  .service__09 .top_txt .title:after { height:20px;} 
  .service__09 .blockTxt a:hover .txtWrap { transform: none; }
  .service__09 .blockTxt a:hover .top_txt {margin-top:0;}
}

@media (hover : hover) {
  .service__09 .blockTxt a:hover:before{opacity:1;}
}



/* .secBanner__05 */
.secBanner__05 {position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size: cover; z-index: 0;}
  .secBanner__05::before { position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,.7); content:""; z-index: -1;}
  .secBanner__05 .titleArea {padding:0 20px;}
  .secBanner__05 .titleArea .tit{ font-size:9.5rem; line-height: 1.1em; }
  .secBanner__05 .titleArea .ment{ line-height: 1.8em; }

  .secBanner__05 .titleArea .changeColor{ color:#4fa4f8; }

  .secBanner__05 .mouse-shapes { position: absolute; bottom: 10%; right: 10%; cursor: pointer;width: 200px; height: 200px; border-radius: 50%; background: #4fa4f8; z-index: 10; }
  .secBanner__05 .mouse-shapes .txt{  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); letter-spacing:0.03em;}
  .secBanner__05.sensed .mouse-shapes{}

  @media screen and (max-width:1024px){
    .secBanner__05 .titleArea .tit{ font-size:8.5rem;}
  }
  @media screen and (max-width:768px){
    .secBanner__05 .titleArea .tit{ font-size:7rem;}
  }
  @media screen and (max-width:560px){
    .secBanner__05 .titleArea .tit{ font-size:5.8rem;}
  }