@font-face{
    font-family:'Videopac';
    src: url('../font/Videopac Bold.otf'), format('woff');
}

@font-face {
    font-family: 'Giants-Inline';
    src: url('../font/Giants-Inline.woff2'), format('woff2');
    font-weight: normal;
    font-style: normal;
}

.fadejs{opacity: 0;}


header span{
  font-size: clamp(1rem, 1vw, 1rem);
  letter-spacing: 0.2em;
}


    video {
      width: 100%; 
    }
    
    svg { 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;}
      
      text {
        font-family: 'Videopac', 'sans-serif';
        font-weight: 900;
        text-transform: uppercase;
        font-size: 37px;
      }
          
    .wrapper {
        position: relative;
        /* width: 80%; */
        margin: 0 auto;
        overflow: hidden;
        max-width: 1260px;
    }
    .wrapper .mainName1{
        top: 33%;
        left: -50%;
        background: -webkit-linear-gradient(150deg,#2e0f6c 0%, #9c45d8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 1; 
        animation: trans1 1s ; 
        animation-delay: 0.2s;
        animation-timing-function : linear; 
        animation-fill-mode: forwards;
        }
        @keyframes trans1 {
            0% {
                left: -50%;
            }
            100%{
                left: 15%;
            }
        }
        .wrapper p{letter-spacing:3px; font-size: 27px; position: absolute;
            font-family: 'Giants-Inline';}
        .wrapper .mainName2{
            bottom: 12%;
            right:-90%;
            background: -webkit-linear-gradient(20deg,#2e0f6c 0%, #9c45d8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            z-index: 2;
            animation: trans2 1s ; 
            animation-delay: 1.2s;   
            animation-timing-function : linear; 
            animation-fill-mode: forwards;   
            }
            @keyframes trans2 {
                0% {
                    right: -90%;
                }
                100%{
                    right: 12%;
                }
            }
    @media (max-width:850px) {
        .wrapper p{ font-size: 22px;}
        .wrapper .mainName1{top: 30%;}
        .wrapper .mainName2{bottom: 10%;}
        
    }
    @media (max-width:520px) {
        .wrapper p{font-size: 17px;}
        .wrapper .mainName1{top: 27%;}
        .wrapper .mainName2{bottom: 7%;}
        
    }
    @media (max-width:375px) {
        .wrapper p{font-size: 15px;}
        .wrapper .mainName1{top: 27%;}
        .wrapper .mainName2{bottom: 7%;}  
    }
    @media (max-width:340px) {
        .wrapper p{font-size: 14px;}
        .wrapper .mainName1{top: 27%;}
        .wrapper .mainName2{bottom: 7%;}  
    }
  


  /* .wrapper
      :before,
      :after {
          content: '';
          position: absolute;
          top: 0;
          width: 10px;
          height: 100%;
      }
      
      :before {
          left: -9px;
      }
      
     :after {
          right: -5px;
      }*/

      .bold{font-weight: 800;}

      .con{text-align: center;}
      .con p{font-size: 20px; line-height:1.6em;font-weight: 100;transition-delay: 3.5s;}

      .con h1{font-size: 35px;margin-bottom:3%; line-height: 40px; letter-spacing: 2px;}
      .con1{margin-top: 0;}
      .con1 .con1bg{width: 100%; padding:350px 0;
        background-image: url('../images/sub1_imb2.jpg');
        background-attachment: fixed; color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right center;
    }
    .con1 .con1bg h1{margin-top: 5%; font-size: 35px;line-height: 60px;
        letter-spacing: 3px;font-weight: 300;}
    .con1bg h1 span{font-size: 35px; color: #ba72f2; letter-spacing: 3px;
        font-weight: 300;font-style: italic;line-height: 50px;}
    h1.bf{position: relative;}
    h1.bf::before{
        content: '';
         top:-100px;
         left: 0;
         width: 100%;
         height: 100%;
         position: absolute;
         background-image: url('../images/beforeLogo.png');
         background-size: 60px;
         background-position: center;
         background-repeat: no-repeat;
         left: 50%;
         transform: translateX(-50%);
     }


      .con2 {width: 100%;  padding-top:350px;}
      .con2 img.logo{padding: 120px 10px;}
      .con2 .text-box{transition-delay: 3.5s;}
      .con2 .text_box img{padding: 0;vertical-align: revert-layer;}
      .con2 .text_box img.ciColor{width: 300px; display: block; margin: 20px auto;}
      .con2 .text_box b{font-weight: 400; color: #5f1597;}
      .con2 .text_box span.red{color:red;}
      .con2 .text_box span.blue{color:blue;}
        
    .con2 .con2_text span {
          font-size: 30px;
          line-height: 75px;
          font-weight: 500;
          font-style: italic;
    }



    .vision{
            padding-bottom: 100px;
    
            background-image: url("../images/visionBg.jpg");
            background-size: 40%;
            background-position: 100% 95%;
            background-repeat: no-repeat; opacity: 1;
            animation: vbg 1s ;
            animation-timing-function : linear; 
            animation-fill-mode: forwards;
    
        }

    .con3 {width: 100%; height:100%;margin: 0;
        padding-top: 350px;

    }

    @keyframes vbg {
        0% {
            opacity: 0;
            background-position: 200% 110%;
        }
        100%{
            opacity: 1;
            background-position: 100% 95%;
        }
    }
    .con3 p{transition-delay: 3.5s;}




    .con4 {padding-top: 350px;}
    .con4 p{max-width:70%; padding: 20px;margin: 0 auto; text-align: center; transition-delay: 3.5s;}
    .con4 p img{box-sizing: border-box; width: 90%; max-width: 800px;}
   
   
    @media (max-width: 720px) {
        .con4 p{max-width: 95%;}
       .con4 p img{width:100%;}
    }
    @media (max-width: 420px) {
        .con4 p{padding: 0; padding-top: 30px;}
     }
   

    .con5wrap{margin: 0 auto; max-width: 1000px;
        padding: 350px 0;
        width: 100vw;
        padding-bottom: 70px;
        
    }
    .con5wrap h1{font-size: 35px; letter-spacing:2px; padding: 30px 20px; margin-bottom: 5%; text-align: center;}
    .con5{margin: 0 auto; display: flex; flex-wrap: nowrap; gap:1em;}
    .con5 .con5_box{flex-basis:150px; flex-grow:0; flex-shrink:0; }
    .con5 li img{ height: 40px;}
    

    .con5_box1 .flexbox{
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        padding: 10px;
        transition-delay: 3.5s;
    }
    .flexbox .item{
        min-height: 100px;
        flex-basis: 150px;
        flex-shrink: 1;
        flex-grow: 1;
    }


    @media (max-width: 774px) {
        .flexbox .item{min-height: 60px; flex-basis: 120px;}
    }



    footer{width: 100%;padding:10px 0;
        background-color: #463860;
        text-align: -webkit-center;
        color: #fff;
        font-size: 13px;margin-top: 100px;}
    .footer{display: flex; flex-wrap: wrap;  justify-content: center;
        gap: 1em; width: 90%;}

    .footer div{display: inline-table;}
    .footer .text{margin-right:1%; text-align:right;}
    .footer .text p{line-height: 22px;}
    .footer .sns a{display: inline-block; line-height:70px; margin-left: 40px;
        }
    .footer .sns a img{width:35px;}

    /*공통*/
    @media (max-width:430px) {
        .con h1{font-size: 27px;}
        .con5wrap h1{font-size: 27px;}
    }


/*con1*/
@media (max-width:850px) {
    .con1 .con1bg {padding:20% 3%;}
    .con1 .con1bg h1 {font-size: 25px; line-height: 40px;}
    .con1 p {font-size: 14px;}
    
}
@media (max-width:600px) {
    .con1 .con1bg h1 {font-size: 16px; line-height: 28px;}
    .con1 p {font-size: 11px;}
    .con h1 {margin-bottom: 6%;}
    
}
@media (max-width:448px) {
    .con1 .con1bg {padding:30% 1%;}
    .con1 p { max-width: 330px; font-size: 12px; margin: 0 auto; padding-bottom: 10px;}
    .con1 .con1bg h1{letter-spacing: 0; font-size: 17px;}
  
}
@media (max-width:340px) {
   
}


/*con2*/
@media (max-width:850px) {
    .con2 p {font-size: 14px;}
    
}

@media (max-width:600px) {
    .con2 p{font-size: 13px; padding-top: 20px;}
    .con2 .con2_text span {font-size: 25px; line-height: 80px;}
    .con2 img.logo {padding: 100px 25px;}
    .con2 .text_box img {width: 10px;} 
    .con2 .text_box img.ciColor{width: 275px; display: block; margin: 25px auto;}
    .con2{width: 90%; margin: 0 auto; padding-top: 230px;}  
}
@media (max-width:430px) {
    .con2 .con2_text span {font-size: 21px; line-height: 80px;}
    .con2 img.logo {width: 70%; padding: 70px 15px;}
}
@media (max-width:327px) {
    .con2 .con2_text span {line-height:0;}
    .con2 .text_box {padding: 10% 2%;font-size: 11px;}
}


/*con3*/

@media (max-width:1200px) {
    .vision{background-size: 50%;}
}
@media (max-width:850px) {
    .con3 p {font-size: 14px;padding-bottom: 20px;padding:  10px;}
    .vision{padding-bottom: 60px;}
    
}
@media (max-width:430px) {
    .vision{background-size: 70%; padding-bottom: 60px;}
    .con3 p {padding: 0 2%;font-size: 11px;}
}
@media (max-width:387px) {
    .vision{background-size: 70%; padding-bottom: 60px;}
    .con3 p{padding:  10px;}
}

/*con4*/

@media (max-width:1200px) {
}
@media (max-width:600px) {
    .con4{padding-top: 230px;}
    .con4 p{max-width: 88%;}
}

@media (max-width:327px) {
}



    /*footer*/
    @media (max-width: 774px) {
        .footer{justify-content: space-around;}
        .footer .text { margin-right: 0; font-size: 10px;}
        .footer .text p {
            line-height: 15px;
        }
        .footer .sns a {
            line-height: 42px;
            margin-left: 20px;
        }
        .ch {
            bottom: 7%;}
        .ch a img {width: 80px;}

    }
    @media (max-width: 472px) {
        .footer .sns a {
            line-height: 0;
            margin-left: 20px;
        }
        .footer .text {text-align: center;}
        .footer .sns a img {
            width: 25px;
        }

    }