@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

*{margin: 0; padding: 0; box-sizing: border-box;}
a{text-decoration: none; color: inherit;}
ul{list-style: none;}
img, svg{width: 100%;}
a, span{display: inline-block;}

body{font-family: 'Noto Sans KR', sans-serif; color: var(--white); line-height: 1.5;}
:root{--main: #326cfe; --mainDark: #3353A1; --white: #fff; --dark: #111;}
.line-change{display: block;}
.btn{width: calc(20.625rem + ((1vw - 3.75px) * 61.8182)); height: 40px; border-radius: 25px;
  font-size: calc(1.25rem + ((1vw - 3.75px) * 1.039));}
.sec-title{font-size: calc(1.625rem + ((1vw - 3.75px) * 1.697));}


#header{background: url(../images/visual-img.png) no-repeat center/cover;
    width: 100%; height: 100%;}
#header .header-in{padding: 0 20px;}
#header .logo{padding-top: 30px;}
#header .logo img{width: 135px;}
#header .text-area{padding-top: 75px;}
#header .mini-title{font-size: calc(1.125rem + ((1vw - 3.75px) * 1.4545)); font-weight: 700;}
#header .mini-title span{display: inline-block; background: var(--main);
  padding: 6px 12px; border-radius: 25px;
  margin-right: 10px;}
#header .big-title{font-size: calc(1.75rem + ((1vw - 3.75px) * 4.4156)); font-weight: 700;
  padding-top: 35px;}
#header .btn-area{padding: 100px 0;}
#header .btn-start-area .btn{background: var(--main); text-align: center; line-height: 40px;}
#header .btn-login-area{padding-top: 30px;}
#header .btn-login-area p{padding-left: 10px; padding-bottom: 10px;
  font-size: calc(1rem + ((1vw - 3.75px) * 1.039));}
#header .btn-login-area .btn{background: var(--white); color: var(--dark); line-height: 40px; text-align: center;}

.sec1{background: var(--mainDark);}
.sec1-in{text-align: center;}
.sec1 .sec-img{padding-top: 100px;}
.sec1 .sec-img img{width: 75%;}
.sec1 .text-area{padding: 50px 0 100px;}
.sec1 .text-area p{font-size: calc(1rem + ((1vw - 3.75px) * 1.039)); padding-top: 40px;}

.sec2{background:  #000 url(../images/section2-img.png) no-repeat left center;}
.sec2 .sec2-in{padding: 100px 0; background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);}
.sec2 .text-area{padding: 50px 20px;}
.sec2 .text-area .sec2-list{padding-top: 50px;}
.sec2 .sec2-list h3{font-size: calc(1.375rem + ((1vw - 3.75px) * 0.9697));}
.sec2 .list-flex{display: flex; padding: 10px 0;}
.sec2 .list-icon{width: 8%; margin-right: 20px;}
.sec2 .list-icon-de{width: 10%;}
.sec2 .list-text p{font-size: calc(0.875rem + ((1vw - 3.75px) * 1.039));}

.sec3{background: var(--mainDark);}
.sec3 .sec3-in{padding: 100px 0;}
.sec3 .sec-title{text-align: center; padding-bottom: 50px;}
.sec3 .question-area{padding: 0 20px; color: var(--dark);}
.sec3 .q-list li{background: var(--white); border-radius: 35px;
  width: calc(21.875rem + ((1vw - 3.75px) * 85.7143));
  height: calc(3.125rem + ((1vw - 3.75px) * 1.6));
  font-size: calc(1.125rem + ((1vw - 3.75px) * 1.039)); font-weight: 700;
  margin: 10px auto; padding: 0 10px 0 20px;
  display: flex; justify-content: space-between; align-items: center;}
.sec3 .q-list li p{width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sec3 .q-list li .arrow{width: 19px;}

#footer{background: var(--mainDark); padding: 100px 0 150px;}
#footer .footer-top{font-size: calc(0.75rem + ((1vw - 3.75px) * 1.039)); text-align: center;
  padding-bottom: 100px;}
#footer .footer-top .footer-list li{display: inline-block; padding: 5px;}
#footer .footer-top .line a{border-bottom: 1px solid var(--white);}

#footer .footer-bottom .footer-version{text-align: center;}
#footer .footer-bottom .version-icon img{width: 131px;}
#footer .footer-social{padding-top: 50px;}
#footer .footer-social .social-list{display: flex; justify-content: space-between; align-items: center;
  text-align: center; 
  margin: 0 auto;
  width: 50%;}
#footer .footer-social li{width: 40px; height: 40px;
  background: var(--white); border-radius: 50%;}
#footer .footer-social li a{width: 30px; height: 30px; margin-top: 5px;}
#footer .footer-social li a img{width: 30px; height: 30px;}

@media screen and (min-width: 650px) {
  .btn{width: 568px; height: 50px; font-size: 24px;}
  .sec-title{font-size: 40px;}


  #header .big-title{font-size: calc(2.8125rem + ((1vw - 7.6px) * 3.4091));}
  #header .btn-area{padding: 120px 0 150px;}
  #header .btn-start-area .btn{line-height: 50px;}
  #header .btn-login-area{padding-top: 50px;}
  #header .btn-login-area p{font-size: 20px;}
  #header .btn-login-area .btn{line-height: 50px;}

  .sec1 .sec-img img{width: 450px;}
  .sec1 .text-area p{font-size: 20px;}
  .sec1 .text-area p .line-change{display: inline-block;}

  .sec2 .list-icon{width: 48px; margin-right: 20px;}
  .sec2 .list-icon-de{width: 60px;}
  .sec2 .list-text p{font-size: 18px;}

  .sec3 .q-list li{width: calc(42.5rem + ((1vw - 7.6px) * 25.9091)); height: 60px;
    font-size: 22px;}
  .sec3 .q-list li .arrow{width: 30px; margin-top: 5px;}

  #footer .footer-top{font-size: 16px;}
  #footer .footer-social .social-list{width: 320px; margin: 0 auto;}

}

@media screen and (min-width: 1000px) {
  #header .header-in{padding: 0; max-width: 1200px; margin: 0 auto;}
  #header .logo{padding-left: 30px;}
  #header .text-area{padding-left: 100px;}
  #header .mini-title{font-size: 30px;}
  #header .big-title{font-size: 60px;}
  #header .btn-area{padding-left: 100px;}

  .sec1 .sec1-in{max-width: 1200px; margin: 0 auto;
    display: flex; justify-content: space-around; align-items: center;
    padding: 150px 0;}
  .sec1 .sec-img{padding-top: 0;}
  .sec1 .text-area{padding: 0; text-align: left;}

  .sec2 .text-area{max-width: 1200px; margin: 0 auto;}
  .sec2 .sec2-list h3{font-size: 30px;}

  .sec3 .q-list li{width: 794px;}

  #footer .footer-top .footer-list{max-width: 794px; margin: 0 auto;}
}