#container{position:relative;}
#container #gnb{position:fixed;left:0;top:50%;transform:translateY(-50%);height:calc(100% - 100px);width: 18%;}
#container #gnb > div{display:flex;padding:50px 50px 0;flex-direction: column;justify-content: flex-end;height:100%;}
#container #gnb > div .btn-wrap{display: flex;flex-direction: column;align-items: center;gap:15px;}
#container #gnb > div .btn-wrap > a{display: flex;align-items: center;justify-content: center;width:100%;min-height:55px;padding:10px;color:#fff;font-size:20px;font-weight:600;border:2px solid #fff;border-radius: 50px;text-align: center;}
#container #gnb > div .sns-wrap{display: flex;align-items: center;gap:10px;margin-top:15px;}
#container #gnb > div .sns-wrap > a{display: flex;align-items: center;justify-content: center;}
#container #gnb > div .sns-wrap > a.insta{background: url("../images/insta-icon.png")no-repeat center/cover;width: 37px;height: 37px;}
#container #gnb > div .sns-wrap > a.youtube{background: url("../images/youtube-icon.png")no-repeat center/cover;width: 37px;height: 26px;}
#fullpage{background:url("../images/main-bg.jpg")no-repeat center top/cover;}
#fp-nav{top:auto;bottom:50px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{background-color: transparent;width:20px;height:20px;border:3px solid #fff;margin:0;position:relative;left:auto;top:auto;}
#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{margin:0;width:20px;height:20px;background-color: #fff;}
#fp-nav ul li:hover a span,.fp-slidesNav ul li:hover a span { width: 20px; height: 20px; margin: 0; } 
#fp-nav ul li, .fp-slidesNav ul li{width: 20px;height: 20px;margin:0;}
#fp-nav ul li a, .fp-slidesNav ul li a{display:flex;}
#fp-nav ul, .fp-slidesNav ul{display:flex;flex-direction: column;gap:10px;}
.fp-tableCell{vertical-align:baseline;}
.section{}
.section .wrap{padding:50px;position:relative;width: 100%;height: 100%;}

.section.s1 .wrap{height:auto;}
.section.s1 .wrap .logo{position: absolute;right:50px;top:50px;}
.section.s1 .wrap .logo > a{display: flex;background: url("../images/logo.png")no-repeat center/cover;width: 15.7813vw;height: 3.4896vw;}
.section.s1 .wrap .title-a{display: flex;flex-direction: column;height: 100%;padding-top:50px;}
.section.s1 .wrap .title-a .t-title{}
.section.s1 .wrap .title-a .t-title .title-1{background: url("../images/text-img01.png")no-repeat center/cover;width: 29.8438vw;height: 2.9167vw;}
.section.s1 .wrap .title-a .t-title .title-2{background: url("../images/text-img02.png")no-repeat center/cover;width: 37.5vw;height: 16.6146vw;margin-top:50px;}
.section.s1 .wrap .title-a .b-title{margin-top:15.2604vw;position:relative;}
.section.s1 .wrap .title-a .b-title .title-3{background: url("../images/text-img03.png")no-repeat center/cover;width: 45.9896vw;height: 3.3333vw;}
.section.s1 .wrap .title-a .t-title .title-1, .section.s1 .wrap .title-a .t-title .title-2, .section.s1 .wrap .title-a .b-title .title-3 { opacity: 0; transform: scale(1.05); filter: blur(4px); transition: opacity 1s ease, transform 1.5s ease, filter 1.5s ease; } 
 .section.s1 .wrap .title-a.active .t-title .title-1 { opacity: 1; transform: scale(1); filter: blur(0); transition-delay: 0.3s; } 
 .section.s1 .wrap .title-a.active .t-title .title-2 { opacity: 1; transform: scale(1); filter: blur(0); transition-delay: 0.6s; } 
 .section.s1 .wrap .title-a.active .b-title .title-3 { opacity: 1; transform: scale(1); filter: blur(0); transition-delay: 0.9s; } 
 
.section.s1 .wrap .section-line{}
.section.s1 .wrap .section-line .line-01{/*background: url("../images/line-02.svg")no-repeat;*/width: 41.9792vw;height: 0.2604vw;display: inline-block;position: absolute;top:50px;left:50px;}
.section.s1 .wrap .section-line .line-02{/*background: url("../images/line-03.svg")no-repeat;*/width: 25vw;height: 25vw;display: inline-block;position: absolute;top:50px;right:27%;}
.section.s1 .wrap .line-03{/*background: url("../images/line-01.svg")no-repeat;*/width: 0.2604vw;height: 19.5313vw;display: inline-block;position: absolute;bottom:0;right:37%;}
.section-line svg {
    overflow: visible;
  }
  .b-title svg{
    overflow: visible;
  }
  .b-title line,
  .section-line line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1s linear;
  }
  
  .section-line.animate .line-01 line {
    stroke-dashoffset: 0;
    transition-delay: 0s;
  }
  .line-02 path{
    clip-path: inset(0 50% 100% 0); 
    transition: clip-path 1s ease;
  }
  
  .section-line.animate .line-02 path {
    transition-delay: 0.5s;
    clip-path: inset(0 0 0 0); 
  }

  
  .b-title.animate .line-03 line {
    stroke-dashoffset: 0;
    transition-delay: 1.2s;
  }



  .section .wrap .list{display: flex;align-items: flex-start;height:100%;}
  .section .wrap .list .l-cont{width: 16.32%;position:relative;height: 100%;}
  .section .wrap .list .l-cont:after{content:'';background-color: #fff;position:absolute;right:0;top:0;width:4px;height:100%;}
  .section .wrap .list .l-cont > h2{color:#fff;font-size:2.3438vw;}
  .section .wrap .list .r-cont{width: 83.68%;padding-left:5.2083vw;height: 100%;}
  .section .wrap .list .r-cont > div{height:100%;}
  .section .wrap .list .r-cont > div.text-a{}
  .section .wrap .list .r-cont > div.text-a p + p{margin-top:3.6458vw;}
  .section .wrap .list .r-cont > div p{color:#fff;font-size:1.5625vw;font-weight:700;line-height: 1.5;}
  .section .wrap .list .r-cont > div p.name{font-weight: 400;}
  .section .wrap .list .r-cont > div .dl-list{}
  .section .wrap .list .r-cont > div .dl-list + .dl-list{margin-top:15px;}
  .section .wrap .list .r-cont > div .dl-list dl{display:flex;align-items: center;}
  .section .wrap .list .r-cont > div .dl-list dl + dl{margin-top:15px;}
  .section .wrap .list .r-cont > div .dl-list dl > dt{font-size:1.5625vw;font-weight:700;color:#fff;min-width: 23%;}
  .section .wrap .list .r-cont > div .dl-list dl > dd{font-size:1.5625vw;font-weight:700;color:#fff;}
  .section .wrap .list .l-cont > h2 { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; } 
  .section .wrap .list .l-cont::after { height: 0; transition:  1s ease; } 
  .section.active .wrap .list .l-cont > h2 { opacity: 1; transform: translateY(0);white-space: nowrap; } 
   .section.active .wrap .list .l-cont::after { height: 100%; } 
  .s2 .text-a p { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } 
   .s2.active .text-a p { opacity: 1; transform: translateY(0); } 
   .s2.active .text-a p:nth-of-type(1) { transition-delay: 0s; } 
   .s2.active .text-a p:nth-of-type(2) { transition-delay: 0.3s; } 
   .s2.active .text-a p:nth-of-type(3) { transition-delay: 0.6s; } 
   .s2.active .text-a p:nth-of-type(4) { transition-delay: 0.9s; } 
   .s2.active .text-a p:nth-of-type(5) { transition-delay: 1.2s; } 
   .s3 .dl-list dl { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } 
   .s3.active .dl-list dl { opacity: 1; transform: translateY(0); } 
   
  /* 최대 12개 정도까지 설정 */
  .s3.active .dl-list dl:nth-of-type(1) { transition-delay: 0s; }
  .s3.active .dl-list dl:nth-of-type(2) { transition-delay: 0.15s; }
  .s3.active .dl-list dl:nth-of-type(3) { transition-delay: 0.3s; }
  .s3.active .dl-list dl:nth-of-type(4) { transition-delay: 0.45s; }
  .s3.active .dl-list dl:nth-of-type(5) { transition-delay: 0.6s; }
  .s3.active .dl-list dl:nth-of-type(6) { transition-delay: 0.75s; }
  .s3.active .dl-list dl:nth-of-type(7) { transition-delay: 0.9s; }
  .s3.active .dl-list dl:nth-of-type(8) { transition-delay: 1.05s; }
  .s3.active .dl-list dl:nth-of-type(9) { transition-delay: 1.2s; }
  .s3.active .dl-list dl:nth-of-type(10) { transition-delay: 1.35s; }
  .s3.active .dl-list dl:nth-of-type(11) { transition-delay: 1.5s; }
  .s3.active .dl-list dl:nth-of-type(12) { transition-delay: 1.65s; }
  @media only screen and (max-width: 1700px){
    #container #gnb > div{padding-right:30px;}
    #container #gnb > div .btn-wrap > a{font-size:18px;}
}
@media only screen and (max-width: 1300px){
    #container #gnb{width: 21%;}
    .section .wrap .list .l-cont{width: 18.32%;}
    .section .wrap .list .r-cont{width: 81.68%;}
    #container #gnb > div .btn-wrap > a{font-size:16px;}

}
  @media only screen and (max-width: 1024px){
    .section .wrap .list .r-cont > div p{font-size:2vw;}
    .section .wrap .list .l-cont > h2{font-size:2.5vw;}
    .section .wrap .list .r-cont > div .dl-list dl > dt{font-size:2vw;min-width:31%;}
    .section .wrap .list .r-cont > div .dl-list dl > dd{font-size:2vw;}
    #container #gnb{width: 22%;}
    #container #gnb > div{padding-right:20px;}
    #container #gnb > div .btn-wrap > a{font-size:15px;}
  }

  @media only screen and (max-width: 850px){
    #fullpage{padding-bottom:250px;}
    .section.s1 .wrap .title-a .t-title .title-1{width: 65.3333vw;height: 6.4vw;}
    .section.s1 .wrap .title-a .t-title .title-2{width:76.8vw;height:34.1333vw;}
    .section.s1 .wrap .title-a .b-title .title-3{width: 69.8667vw;height: 5.0667vw;}
    .section.s1 .wrap .section-line .line-01{top:44px;left:30px;}
    .section.s1 .wrap .line-03{right:14%;bottom:auto;top:50%;transform: translateY(-50%);}
    .section.s1 .wrap .logo > a{}
    .section .wrap .list .l-cont{width: 100%;height:auto;display:inline-flex;align-items: center;}
    .section .wrap .list .l-cont::after { width:0; transition:  2s ease;position:relative;left:auto;right:auto;top:auto;bottom:auto;height:2px;margin-left:7px;} 
     .section.active .wrap .list .l-cont::after {width: 100%;height:2px} 
    #container #gnb{position:absolute;left:50%;transform: translateX(-50%);top:auto;bottom:0;width:100%;height:auto;}
    #container #gnb > div{align-items: center;padding:20px;height:auto;}
    .section{min-height:100vh;}
    .section .wrap{padding:30px 20px;height:100%;}
    .section.s1 {}
    .section.s1 .wrap{height:100vh;}
    .section.s1 .wrap .title-a{padding:13.3333vw 0;}
    .section.s1 .wrap .section-line .line-02{right:30px;top:12%;}
    .section.s1 .wrap .logo{top:30px;right:20px;}
    .section.s1 .wrap .logo > a{width:35.6667vw;height: 7.7333vw;}
    .section.s1 .wrap .title-a{justify-content: center;}
    .section.s1 .wrap .title-a .t-title .title-2{margin-top:5.8824vw;}
    .section .wrap .list{flex-direction: column;align-items: flex-start;}
    
    .section .wrap .list .r-cont{width: 100%;padding-left:0;margin-top:5.5vw;}
    .section .wrap .list .l-cont > h2{font-size:7.3438vw;}
    .section .wrap .list .r-cont > div p{font-size:3.5625vw;}
    .section .wrap .list .r-cont > div .dl-list dl{align-items: flex-start;}
    .section .wrap .list .r-cont > div .dl-list dl > dt{font-size:3.5625vw;min-width: 35%;}
    .section .wrap .list .r-cont > div .dl-list dl > dd{font-size:3.5625vw;}
    #container #gnb > div .btn-wrap > a{font-size:18px;}
    
}

@media only screen and (max-width: 550px){
    .section.s1 .wrap .section-line .line-02{right:30px;top:9%;}

}