@charset "utf-8";
@import "normalize.css";
@import "webfonts/webfonts.css";
@import "vendor/aos.css";
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: 500;
  line-height: 1.5;
}

html {
  font-size: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  height: auto;
  font-size: 15px;
  font-family: 나눔스퀘어, 'NanumSquare', sans-serif;
  color: #000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: keep-all;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  /* color: #004863; */
}

ul,
ul li {
  list-style: none;
}

img,
fieldset,
iframe {
  border: 0 none;
}

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

form legend,
fieldset legend,
hr {
  display: none;
}

em,
address {
  font-style: normal;
}

table {
  width: 100%;
  table-layout: fixed;
}

table caption {
  display: none;
}

table th {
  text-align: center;
}

button {
  border: 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
}

strong {
  font-weight: 800;
}

body.desktop .m-show,
body.mobile .m-hide {
  display: none;
}
body.mobile .m-show,
body.desktop .m-hide {
  display: block;
  max-width: 100%;
}

/* 
  Main
*/
.wrap {
  max-width: 1650px;
  padding: 0 20px;
  margin: 0 auto;
}

/* 
  section 1
*/
.section1 {
  background: linear-gradient(130deg, #140e38 0%, #060319 86%, #06041a 100%);
  padding: 75px 0 500px;
}

.section1 .titleArea {
  text-align: center;
  margin-bottom: 50px;
}

.title1 {
  display: inline-flex;
  color: #fff;
  font-size: 4.7rem;
  font-weight: 800;
  box-shadow: inset 0 -2px 0 #fff;
}

.title1 img {
  display: inline-block;
  align-self: flex-start;
  margin: 3px 20px 0 0;
}

.titleText {
  font-size: 3.3rem;
  color: #fff;
  max-width: 1160px;
  word-break: keep-all;
  margin: -100px auto 0;
}
.titleText em {
  color: #f4ec14;
}

/* 
  section 2
*/
.section2 {
  background: #107eff;
  text-align: center;
  padding: 120px 0 180px;
  position: relative;
}
.section2:before {
  content: '';
  position: absolute;
  top: -590px; left: 0;
  z-index: 1;
  width: 100%;
  height: 590px;
  background: url('../img/landing/section2_bg.png') top center no-repeat;
}

.section2 .wrap {
  position: relative;
  z-index: 1;
  margin-top: -300px;
}

.section2 h3 {
  color: #fff;
  font-size: 8.9rem;
  font-weight: 500;
  font-family: 'onemobiletitle';
  line-height: 1.2;
  margin-bottom: 55px;
}

.section2 h3 span {
  color: #f4ec14;
  display: block;
}

.h3_under {
  font-size: 3.7rem;
  font-weight: 800;
  display: inline;
  box-shadow: inset 0 -30px 0 #f4ec14;
  padding: 0 10px;
}

.priceBox {
  text-align: center;
  background: #fff;
  padding: 40px;
  font-size: 5.2rem;
  font-weight: 600;
  vertical-align: middle;
  box-shadow: 12px 12px 25px rgb(15 72 58 / 42%);
  margin-top: 40px;
  margin-bottom: 200px;
}
.priceBox h4 {
  display: inline;
  font-weight: 600;
}
.priceBox span {
  display: inline-block;
  word-wrap: break-word;
}
.priceBox span.under {
  display: inline;
  box-shadow: inset 0 -2px 0 #000;
}

.priceBox em {
  color: #f92f2f;
  font-family: 'onemobiletitle';
  font-size: 7rem;
  font-weight: 600;
}
.priceBox img {
  display: inline-block;
  vertical-align: middle;
  margin: 0 30px;
}

h4.title2 {
  color: #fff;
  font-size: 8.9rem;
  font-family: 'onemobiletitle';
  font-weight: 500;
  line-height: 1.2;
  word-break: keep-all;
  margin-bottom: 140px;
}

h4.title2 .under {
  color: #100a2f;
  display: inline;
  box-shadow: inset 0 -2px 0 #100a2f;
  word-break: break-all;
}

.pointWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 45px;
  margin-bottom: 100px;
}

.pointBox {
  flex: 1 1 calc(50% - 45px);
  background-color: #fff;
  border-radius: 5px;
  padding: 60px 40px;
  display: flex;
  justify-content: space-between;
  color: #282828;
  font-size: 3rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.2;
}

.pointBox h5 {
  display: inline-block;
  border-radius: 15px;
  background-color: #100a2f;
  color: #fff;
  font-size: 2.6rem;
  font-family: 'onemobiletitle';
  text-transform: uppercase;
  padding: 5px 10px 2px;
  margin-bottom: 25px;
}

.pointBox .textArea {
  flex: 1;
  word-break: keep-all;
}
.pointBox img {
  align-self: center;
}

.youtubeWrap {
  position: relative;
  padding-bottom: 60.25%;
  padding-top: 25px;
  height: 0;
  box-shadow: 12px 12px 25px rgb(15 72 58 / 42%);
}

.youtubeWrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 
  section 3
*/
.section3 {
  background: #130f30;
  text-align: center;
  padding: 120px 0 150px;
}
.section3 .titlearea {
  margin-bottom: 45px;
}
h3.title3 {
  color: #fff;
  font-family: 'onemobiletitle';
  font-size: 8.9rem;
  font-weight: 800;
  text-align: center;
  display: inline;
  margin-bottom: 75px;
  box-shadow: inset 0 -2px 0 #2fe7ba;
}
h3.title3 span {
  color: #2fe7ba;
}

.graphWrap {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 55px 40px 80px;
  position: relative;
  gap: 30px;
}

.graphImg {
  flex: 0 0 418px;
}

.graphText {
  font-size: 3rem;
  text-align: left;
  line-height: 1.2;
  font-weight: 500;
  padding-top: 150px;
}

.graphText h4 {
  position: absolute;
  left: -10px;
  top: 60px;
  font-size: 3.3rem;
  color: #fff;
  background: #210eb0;
  padding: 10px 120px 10px 50px;
}

.graphText p.big {
  font-size: 4.2rem;
  margin-bottom: 25px;
}

.graphText p.under {
  display: inline;
  box-shadow: inset 0 -19px 0 #b6fdec;
}


.graphUnder {
  color: #fff;
  font-size: 3.6rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 150px 0;
  margin: 150px 0;
}

.graphUnder .circle {
  position: absolute;
  left: 0; top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #2fe7ba;
  border-radius: 50%;
  color: #130f30;
  font-size: 4.2rem;
  text-align: center;
  width: 55px; height: 55px;
  vertical-align: top;
  margin: 16px 15px 0 0;
}

.graphUnder dt {
  font-family: 'onemobiletitle';
  font-size: 6.2rem;
  font-weight: 500;
  color: #2fe7ba;
  margin-bottom: 20px;
  position: relative;
  padding-left: 80px;
}
.graphUnder dd:before {
  content: '';
  background-color: #2fe7ba;
  width: 6px; height: 6px;
  border-radius: 50%;
  position: absolute;
  top: 23px; left: 0;
}
.graphUnder dd {
  position: relative;
  padding-left: 20px;
  margin-left: 70px;
  margin-bottom: 20px;
}

.lecWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 100px;
  justify-content: center;
}

.lecCard {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  flex: 0 0 475px;
  padding: 55px 10px 30px 32px;
  text-align: left;
  background-color: #fff;
}
.lecCard .title {
  display: flex;
  gap: 15px;
  font-family: 'onemobiletitle';
  font-size: 5rem;
  font-weight: 500;
  align-items: center;
  word-break: keep-all;
}
.lecCard .title span {
  color: #00b186;
  display: block;
}

.lecCard .txt {
  font-size: 2.9rem;
  margin-top: 20px;
}


/* 
  section 4
*/
.section4 {
  text-align: center;
  padding: 150px 0 120px;
}
.section4 .titlearea {margin-bottom: 75px;}
h3.title4 {
  color: #1c80f5;
  font-family: 'onemobiletitle';
  font-size: 8.9rem;
  font-weight: 800;
  text-align: center;
  display: inline;
  box-shadow: inset 0 -2px 0 #1c80f5;
}

h4.title4 {
  text-align: center;
  font-size: 4.8rem;
  font-weight: 700;
  margin-bottom: 40px;
}

.aplcList {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  justify-content: center;
  margin-bottom: 115px;
}

.aplcCard {
  background: #f8f7f7;
  border: 1px solid #f2f1f1;
  padding: 30px 20px;
  max-width: 474px;
  flex: 1 0 474px;
  text-align: left;
}

.aplcCard dl {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  font-size: 2.4rem;
  margin-bottom: 20px;
}
.aplcCard dl dt {
  flex: 0 0 111px;
  width: 111px;
  color: #fff;
  font-weight: 600;
  background: #1c80f5;
  border-radius: 15px;
  text-align: center;
}

.aplcCard .btnWrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  text-align: center;
}
.aplcCard .btn {
  background: #1c80f5;
  border-radius: 10px;
  color: #fff;
  font-size: 2.4rem;
  padding: 8px 0;
}
.aplcCard .btn.sty02 {
  background: #130f30;
}

.cardWrap {
  background-color: #f5f5f5;
  padding: 70px 90px;
}

.cardList {
  text-align: left;
  background-color: #fff;
  padding: 40px;
  font-size: 2.4rem;
  font-weight: 600;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: space-between;
}

.cardList ul {
  flex: 1 1 auto;
  line-height: 2;
}

/* 
  responsive
*/
@media all and (max-width: 1020px) {
  html {
    font-size: 8px;
  }
  .title1 img {
    max-width: 200px;
    margin-top: 5px;
  }
  .titleText {margin-top: 40px;}
  .h3_under {box-shadow: inset 0 -20px 0 #f4ec14;}
  .graphUnder .circle {margin-top: 7px;}
  .graphText {padding-top: 100px;}
}

@media all and (max-width: 920px) {
  .titleText {margin-top: 1vh;}
  .pointBox {
    flex: 1 1 100%;
  }
}

@media all and (max-width: 850px) {
  .cardList {gap: 0;}
}

@media all and (max-width: 780px) {
  .section2 h3,
  h4.title2,
  h3.title3,
  h3.title4 {
    font-size: 6rem;
    margin-bottom: 50px;
  }

  .priceBox {padding: 20px;}

}

@media all and (max-width: 565px) {
  .wrap {padding: 0 10px;}
  html {
    font-size: 6px;
  }
  span, p, h1, h2, h3, h4, h5, h6, a, button, select, strong, b, dt, dd, li {
    transform: skew(-0.1deg);
  }
  .section1 {padding-bottom: 360px; padding-top: 60px;}
  .section2,
  .section3,
  .section4 {padding: 80px 0;}
  .section2 h3, h4.title2, h3.title3, h3.title4 {font-size: 4rem;}
  .section2 h3 {margin-bottom: 20px;}
  .title1 {font-size: 3rem;}
  .title1 img {max-width: 100px; margin: 2px 10px 0 0;}
  .h3_under {font-size: 3rem; box-shadow: inset 0 -9px 0 #f4ec14;}
  .priceBox {font-size: 3rem; margin-bottom: 100px;}
  .priceBox em {font-size: 4.5rem}
  .priceBox img {max-width: 100px; margin-top: 10px;}
  .pointWrap {margin-bottom: 50px;}
  .pointBox {padding: 30px;}
  .pointBox img {max-width: 90px;}
  .graphWrap {padding: 20px;}
  .graphText p.under {box-shadow: inset 0 -8px 0 #b6fdec;}
  .graphUnder {gap: 30px; margin: 50px 0;}
  .graphUnder dt {font-size: 4rem; padding-left: 42px;}
  .graphUnder dd {margin-left: 10px; font-size: 2.8rem;}
  .graphUnder dd:before {top: 9px;}
  .graphUnder .circle {width: 30px; height: 30px; top: -4px;}
  .aplcCard,
  .lecCard {flex: 1 0 100%; max-width: 100%;}
  .lecCard {padding: 40px 20px;}
  .lecCard .title {font-size: 4rem}
  .cardWrap {padding: 30px;}
  .graphText h4 {top: 30px; padding-right: 30px;}
  .cardList {padding: 15px;}
  .aplcCard dl dd {word-break: break-all;}
  .aplcList {overflow: hidden;}

  [data-aos][data-aos][data-aos-delay="400"].aos-animate,
  body[data-aos-delay="400"] [data-aos].aos-animate,
  [data-aos][data-aos][data-aos-delay="600"].aos-animate,
  body[data-aos-delay="600"] [data-aos].aos-animate,
  [data-aos][data-aos][data-aos-delay="800"].aos-animate,
  body[data-aos-delay="800"] [data-aos].aos-animate {transition-delay: .2s;}
  body[data-aos-duration="400"] [data-aos] {transition-duration: .2s;}
}

@media all and (max-width: 400px) {
  h4.title2 {font-size: 3.8rem}
  h3.title3 span {display: block;}
}