@charset "utf-8";
* { letter-spacing: -0.025em; } 

body { background:url('../images/mainvisual.jpg') center 0 no-repeat #1e3558;} 
#wrap {  margin: 0 auto; } 
.mainvisual {height:100vh;position:relative;}
.mainvisual .maintxt{max-width:1300px; margin:0 auto;text-align:center;}
.mainvisual .maintxt h2{padding:10vh 0 4vh ;}
.mainvisual .maintxt h1{font-family: 'jal'; color:#ffffff; font-size:3.5em;line-height: 1;margin:0 0 10px 0;}
.mainvisual .maintxt .slogan {font-family: 'Gmarket Sans'; font-size:2em; color:#fff; font-weight:400; margin:5vh 0 6vh;line-height:1.2;}
.mainvisual .maintxt .slogan b{font-size:0.9em; color:#fae93d;  font-weight:400;}
.mainvisual .maintxt .date {font-family: 'Gmarket Sans'; font-size:23px; color:#fff; font-weight:400; line-height:33px;}
.mainvisual .maintxt .host {display:flex; margin:9vh 0 0;justify-content: center;gap:30px}
.mainvisual  .scroll {position:absolute;left:50%;margin-left:-25px; bottom:10px; opacity: 1;transition: all 1s 1.2s ease;width: 50px;   height: 100px;  text-align: center; animation: floatUpDown 1.5s ease infinite;}

.mainvisual .scroll p{color: #fff;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 6px;}    

.mainvisual  .scroll .mouse{
    width: 20px;
    height: 31px;
    border-radius: 10px;
    border: 2px solid #fff;
    top: 170px;
    transform: none;
    display: block;
    margin: 0 auto;
}

.mainvisual  .scroll .wheel {
    width: 2px;
    height: 7px;
    display: block;
    margin: 5px auto;
    background: #fff;
    position: relative;
    -webkit-animation: mouse-wheel 1.2s ease infinite;
    -moz-animation: mouse-wheel 1.2s ease infinite;
}

.mainvisual .scroll .arrow{display: inline-block;}
.mainvisual .scroll .arrow span{display: block; width: 8px; height:8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; margin-bottom: 3px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}

.mainvisual .scroll .unu{margin-top: 6px;}
.mainvisual .scroll .unu, .doi, .trei{-webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite;}
.mainvisual .scroll .unu{-webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate;}
.mainvisual .scroll .doi{-webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate;}
.mainvisual .scroll .trei{-webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate;}
.mainvisual .scroll .wheel{-webkit-animation: mouse-wheel 1.2s ease infinite;-moz-animation: mouse-wheel 1.2s ease infinite;}

@keyframes floatUpDown {
    0%   { bottom: 0; }
    50%  { bottom: 10px; }
    100% { bottom: 0; }
  }
@-webkit-keyframes mouse-wheel{
    0% {
     opacity: 1;
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     transform: translateY(0);
   }
 
   100% {
     opacity: 0;
     -webkit-transform: translateY(12px);
     -ms-transform: translateY(12px);
     transform: translateY(12px);
   }
 }
 
 @-moz-keyframes mouse-wheel{
   0% { top: 1px; }
   50% { top: 2px; }
   100% { top: 3px;}
 }
 
 @-webkit-keyframes mouse-scroll {
   0%   { opacity: 0;}
   50%  { opacity: .5;}
   100% { opacity: 1;}
 }
 @-moz-keyframes mouse-scroll {
   0%   { opacity: 0; }
   50%  { opacity: .5; }
   100% { opacity: 1; }
 }
 @-o-keyframes mouse-scroll {
   0%   { opacity: 0; }
   50%  { opacity: .5; }
   100% { opacity: 1; }
 }
 @keyframes mouse-scroll {
   0%   { opacity: 0; }
   50%  { opacity: .5; }
   100% { opacity: 1; }
 }

 

 .cont {max-width:1300px; margin:50px auto 0; background-color:#fff;border-radius:10px; box-shadow: 0 0 20px rgba(0,0,0,0.3);box-sizing: border-box;padding:80px 70px;}

 .cont  .formbox h3{font-size: 40px; font-weight: 600; color:#0f1b33;margin:0 0 40px 0;line-height:40px;text-align: center;}
 .cont  .formbox h3 span{font-size:25px; color:#6ab33e;}
 .cont  .formbox  .inputbox{margin:15px 0 20px;}
 .cont  .formbox  .inputbox > p{font-size: 20px;font-weight:600;color:#111;margin:0 0 10px 0;}
 .cont  .formbox  .inputbox input{border:1px solid #aaaaaa; height:60px;line-height: 60px; padding-left:20px; color:#666; font-size:18px;outline:none;width:100%;box-sizing: border-box;;}
 .cont  .formbox  .inputbox .flex2{display:flex; justify-content: space-between;gap:28px;}
 .cont  .formbox  .inputbox .flex2 input{width:50%;}

 .cont  .formbox  .inputbox input:focus {border-color:#6ab33e;color:#000;}
 .cont  .formbox .go_btn{display:Block;background: #EBE813;
    background: linear-gradient(90deg, rgba(235, 232, 19, 1) 0%, rgba(95, 188, 69, 1) 100%);width:520px; height:80px;line-height: 80px;text-align:center; font-size: 30px;font-weight: 800;color:#102e58; border-radius:80px;margin:70px auto 0;bordeR:none;outline:none;font-family: 'Pretendard';cursor:pointer;}

.cont  .formbox .go_btn:hover {background: #5fbb45;
    background: linear-gradient(90deg,rgba(95, 188, 69, 1) 0%, rgba(235, 232, 19, 1) 100%
    );}

#footer {text-align:center; padding:40px 0;font-size: 17px; color:#75859e;;}



@media (max-width: 768px){


    body { background:url('../images/mainvisual.jpg') center 0 no-repeat #1e3558;background-size: 350%;} 
    #wrap {  margin: 0 auto; } 
    .mainvisual {height:100vh;}
    .mainvisual .maintxt{padding:0 20px;}
    .mainvisual .maintxt h2{padding:15vh 0 2vh ;}
    .mainvisual .maintxt h2 img{width:120px;}    
    .mainvisual .maintxt h3 img{width:300px;max-width:100%;}    
    .mainvisual .maintxt h1{font-size:2.3em;line-height: 1.2;}
    .mainvisual .maintxt .slogan {font-size:1.3em;  margin:5vh 0 6vh;}
    .mainvisual .maintxt .date {font-size:16px; line-height:1.5;}
    .mainvisual .maintxt .host {margin:9vh 0 0;gap:20px}
    .mainvisual .maintxt .host a img{height:25px;}    
    
     .cont { margin:50px 20px 0; padding:40px 20px 60px;}
    
     .cont  .formbox h3{font-size:30px; line-height:30px;margin:0 0 20px 0;}
     .cont  .formbox h3 span{font-size: 20px;;}
     .cont .formbox .inputbox > p {font-size:17px ;}
     .cont  .formbox  .inputbox input{ font-size:17px;margin:3px 0;}
     .cont  .formbox  .inputbox .flex2{display:block;; justify-content: space-between;gap:28px;}
     .cont  .formbox  .inputbox .flex2 input{width:100%;}

     .cont  .formbox .go_btn{width:280px; height:60px;line-height: 60px;font-size: 25px;margin:40px auto 0;}
    
    #footer { padding:40px 20px;font-size: 14px;}
    
    


 }