*{
    box-sizing: border-box;
    text-align: center;
    transition: 0.3s;
}

html, body{
      /* position: relative;
      max-width: 100%;
      overflow-x: hidden; */
      overscroll-behavior: none;
} 
.container{
   position:relative;
    display: flex;
    flex-direction:column;
    justify-content:flex-start;
    width: 100%; 
    height:100%;
    /* overflow: hidden; */
}

#logo_c{
   position:relative;
   display: flex;
   flex-direction:column;
   align-items: center;
   justify-content: center;
   width: 100vw; 
   height: 90vh;
   z-index: 1000;
}

#top{
   position:relative;
   display: flex;
   flex-direction:row;
   justify-content: center;
   flex-wrap: nowrap;
   width: 100%; 
   height:fit-content;
}

.logo{
   position:relative;
   width: 20%; min-width: 250px;
}

.group-card-m{
    position:relative;
    top:100px;
    left: -20%;
    transform: translate(80%);
    height: fit-content;
}

.group-card-c{
   position:relative;
    top:100px;
    left: 20%;
    transform: translate(-80%);
    height: fit-content;
}

.card{
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 32px;
    width: 390px;
    height: 150px;
    padding: 22px;
    background: rgba(255, 255, 255, 70);
    border-radius: 20px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }

#card-m1{
    position:relative;
    left:150px;
    border: 4px solid #5252E8;
    transform: rotate(4.01deg);
} 

#card-m2{
    position:relative;
    margin-top: 100px;
    border: 4px solid #5252E8;
    transform: rotate(8.78deg)
} 

#card-m3{   
    position:relative;
    left:250px;
    margin-top: 100px;
    border: 4px solid #5252E8;
    transform: rotate(-5.42deg);
} 

#card-c1{
    position:relative;
    padding-top: 40px;
    right:100px;
    border: 4px solid #F14530;;
    transform: rotate(-8.19deg);
} 

#card-c2{
    position:relative;
    padding-top: 40px;
    margin-top: 110px;
    border: 4px solid #F14530;;
    transform: rotate(7.75deg);
} 

#card-c3{
    position:relative;
    right:150px;
    margin-top: 60px;
    border: 4px solid #F14530;;
    transform: rotate(-1.95deg);
}

.blue{
    color: #534CEF;
} 

.red{
    color: #F14530;
} 

#copywriter_mini_c{
   position:relative;
   display: flex;
   justify-content:center;
}

.copywriter_mini{
   position:relative;
   display: flex;
   flex-direction:column;
   align-self: flex-end;
   font-family: "Noto Sans KR", sans-serif;
   font-optical-sizing: auto;
   font-weight: 900;
   font-style: normal;
   font-size: clamp(3.9rem, 3.9cqi, 5.9rem); 
   line-height: 1.1em;
   width: 550px; min-width: 390px;
   color: #000000;
   display: none;
}

.copywriter{
   position:relative;
   display: flex;
   flex-direction:column;
   align-self: flex-end;
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-size: clamp(3.9rem, 3.9cqi, 5.9rem); 
    line-height: 1.1em;
    width: 550px; min-width: 550px;
    color: #000000;
    margin-top: 9%;
 }

 .character_con{
   display: flex;
   flex-direction:column;
   align-items: center;
}

.character{
    margin-top:100px;
    left:-10px;
    width: 50%;
    transform: translateX(-15px);
}

.line{
   transform-origin: top left;
    width: 0px;
    height: 328px;
    margin-top: 50px;
    border: 1px solid #534CEF;
    left: 50%;
    transform: translate(-50%);
 }

#counter,
#counter_2{
   position:relative;
   margin-top: 2%;
   display: flex;
   flex-direction:column;
   align-items: center;
   height: fit-content;
 }

 .copywriter2,
 .copywriter3,
 .copywriter4{
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-size: clamp(3.5rem, 5.9cqi, 5.9rem); 
    line-height: 1.1em;
    color: #000000;
 }

 #copywriter_s{
   margin-top: 2%;
   position:relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100vw;
   height: 100vh;
   font-family: "Noto Sans KR", sans-serif;
   font-optical-sizing: auto;
   font-weight: 900;
   font-style: normal;
   font-size: clamp(3.5rem, 6.3cqi, 6.3rem); 
   line-height: 1.8em;
   letter-spacing: 0.3em; 
   color: #534CEF;
   transform: rotate(6deg);
}

.cr_s2{
   display: none;
}

 #cr2{ 
    color: #534CEF;
} 

#cr4,
#cr6{
    font-weight: 100;
} 

.newsletter{
   display: flex;
   align-items:end;
   justify-content: center;
   margin-top: 100px;
}

form{
    position:relative;
    display: inline;
}

.email{
    width: 384px;
    height: 40px;
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-size: clamp(2.1rem, 2.1cqi, 2.1rem); 
    line-height: 30px;
    letter-spacing: -1px;
    text-align:left;
    color: #A7A7A7; 
    border: none;
    border-bottom: 2px solid #5252E8;
 }

.email:focus{
    color: #000000;
    outline: none;
 }

.email:not(:placeholder-shown) {
   color: #000000;
}

button{
    position:relative;
    width: 220px;
    height: 50px;
    top:4px;
    margin-top: 10px;
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(2.5rem, 3.1cqi, 3.1rem); 
    line-height: 30px;
    /* letter-spacing: -1px;  */
    color: #534CEF;
    border: none;
    background-color: #ffffff;
}

button:focus{
    outline: none;
}

button:hover{
    cursor: pointer;
    background-color: #d5d5d5;
}

.cbt_footer{
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    height: 200px;
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1.5rem, 2cqi, 2rem); 
    line-height: 1.4em;
    color: #000000;
 }

 #point{
   font-weight: 600;
 }

 .footer {
   margin-top: 200px;
   margin-bottom: 50px;
   font-family: "Noto Sans KR", sans-serif;
   font-optical-sizing: auto;
   font-weight: 300;
   font-style: normal;
   font-size: clamp(0.8rem, 1.3cqi, 1.3rem); 
   line-height: 1.3em;
   color: #727272;
   text-align: center;
}

.service_con{
   display: flex;
   flex-direction:column;
   align-items: center;
}

#service1,
#service2,
#service3,
#service4,
#service5,
#service6{
   display: flex;
   flex-direction:row;
   justify-content: center;
   width: 100vw;
   height:fit-content;
   margin-bottom: 20%;
    color: #000000;
}

.rec{
   transform-origin: top left;
   margin-left:50px;
   width: 450px;
}

.invite_con{
   position:relative;
   display: flex;
   justify-content:flex-start;
}

.invite{
   /* display: none; */
   margin-top:20px;
   width: 60%;
   max-width: 250px;
}

.info{
   text-align: left; 
   margin-right:50px;
   width: 30%;
}

.stop{
   position:sticky;
   top:20%;
}

.title_i{
   transform-origin: top left;
   font-family: "Noto Sans KR", sans-serif;
   font-optical-sizing: auto;
   font-weight: 900;
   font-style: normal;
   font-size: clamp(2.3rem, 3.3cqi, 3.3rem); 
   line-height: 1.4em;
   text-align: left;
}

.bold_i{
   transform-origin: top left;
   font-family: "Noto Sans KR", sans-serif;
   font-optical-sizing: auto;
   font-weight: 300;
   font-style: normal;
   font-size: clamp(1.7rem, 2cqi, 2rem); 
   line-height: 1.4em;
   text-align: left;
   margin-top:20px;
   color: #534CEF;
}

.num{
   transform-origin: top left;
   font-family: "Noto Sans KR", sans-serif;
   font-optical-sizing: auto;
   font-weight: 100;
   font-style: normal;
   font-size: clamp(4.5rem, 8cqi, 8rem); 
   line-height: 1.3em;
   text-align: left;
}

 @media screen and (max-width:1500px){
  .group-card-m{
   top:50px; 
   }

   .group-card-c{
   top:200px;
   }

   #card-m1{
      left: 10px;
   } 

   #card-m2{
      left: 10px; 
      margin-top: 150px;
   } 

   #card-m3{  
      left: 10px; 
      margin-top: 150px;
   } 

   #card-c1{
      right: 0px;
   } 

   #card-c2{
      margin-top: 150px;
   } 

   #card-c3{
      right: 0px;
      margin-top: 150px;
   }
   
   .group-card-c{
       margin-bottom: 35%;
   }

   .copywriter,
   /* .invite, */
   /* #copywriter_s br, */
   .title_i br, 
   .bold_i  br{
      display: none;
   }

   /* .stop{
      top:10%;
   } */

   .copywriter_mini{
      display: block;
   }

}

@media screen and (max-width:950px){
   .container{
       overflow: hidden;
   }



   #card-m1{
      transform: rotate(3.49deg);
   } 

   #card-m2{
      margin-top: 150px;
      transform: rotate(3.51deg)
   } 

    #card-m3{   
      margin-top: 150px;
      transform: rotate(-5.42deg);
   } 

   #card-c1{
      transform: rotate(-1.64deg);
   } 

    #card-c2{
      margin-top: 150px;
      transform: rotate(1.95deg);
   } 

   #card-c3{
      margin-top: 150px;
      transform: rotate(-0.39deg);
   }

   #copywriter_s{
      margin-top: 20%;
      line-height: 1.6em;
      letter-spacing: 0.2em;
      height:fit-content;
   }

   .cr_s1{
      display: none;
   }

   .cr_s2{
      display:flex;
   }

   #service1,
   #service2,
   #service3,
   #service4,
   #service5,
   #service6{
      flex-direction:column;
      align-items: center;
      margin-left:0px;
      margin-top:100px;
   }

   .rec{
      transform-origin:center;
      margin-left:0px;
      width: 350px;
      margin-top:70px;
   }

   .info{
      margin-top: 50px;
      margin-right: 0px;
      width: 75%;
   }

   .invite_con{
      justify-content:center;
   }
   
   .title_i{
      transform-origin:center;
   }
   
   .bold_i{
      transform-origin:center;
   }
   
   .num{
      transform-origin:center;
   } 
   
     /* #copywriter_s br, */
   .title_i br, 
   .bold_i  br{
      display: none;
   }

    .group-card-c{
      margin-bottom: 75%;
   }

   .copywriter_mini{
      display: block;
   }

   button{
      width: 320px;
   }

   #counter_2{
      margin-top:20%;
      height: fit-content;
   }
   .footer {
      color: #000000;
   }
}

#fade-in{
   animation: fadeIn 0.5s ease-out forwards ;
}
@keyframes fadeIn{
   from{
   opacity: 0;
   transform: scale(1.5);
   }
   to{
   opacity: 1;
   transform: scale(1);
   }
}