body {
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: black;
  letter-spacing: -0.05em;
  word-break: keep-all;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto,"Helvetica Neue","Noto Sans", Arial, sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
html, body {
  font-family: 'pretendard', 'Malgun Gothic', sans-serif;
}

body a {
  border: 0;
}

.help .header {
  height: auto;
  background: rgb(85,204,198);
  background: linear-gradient(180deg, rgba(82,116,182,1) 0%, rgba(85,204,198,1) 50%);
  padding-top:6em;
  padding-bottom:6em;
}

.help .contents {
  background: #ebfbfb;
  height: auto;
  padding-bottom: 80px;
}

.help .footer {
  height: auto;
  background: white;
}

.help .header,
.help .contents,
.help .footer {
  display: block;
  text-align: center;
}

.help .section {
  display: block;
  width: 1070px;
  margin: auto;
  text-align: initial;
}

.helpTitle {
  margin-top: 2em;
}

.helpImg {
  margin-top: -2em;
  margin-bottom: -4em;
}
.helpImgDiv {
  overflow:hidden;
}

.header p {
  text-align: center;
  margin: 0;
}

.headerText01 {
  text-align: center;
  font-size: 1.4em;
  color: white;
  font-weight: 200;
  line-height: 1.4em;
}

.headerText01 b {
  font-weight: 600;
  font-size: 1.15em;
}

.headerText02 {
  text-align: center;
  font-size: 1em;
  color: #008c8a;
  font-weight: 500;
  margin-top: 8px !important;
}

.contents .section {
  padding-top: 6em;
}

.contents .step {
  font-size: 1.5em;
  font-weight: 600;
  color: #1fada7;
  display: grid;
  grid-template-columns: 1.6em 1fr;
  margin-bottom: 12px
}

.contents .step span {
  display: flex;
  align-self: center;
}

.contents .step span:first-child {
  font-size: 1.1em;
}

.stepContents {
  margin-left: 2.3em;
}

.stepContents span + img {
  margin-top: 18px;
}

.stepContents img + img {
  margin-top: 40px;
  margin-bottom: 90px;
}

.stepContents + .step {
  margin-top: 90px;
}

.stepContents.s01 {
  display: grid;
  grid-template-columns: 700px auto 1fr;
}

.stepContents.s01 span + a {
  margin-left: 30px;
}

.downloadBtn {
  box-sizing: border-box;
  width: 160px;
  display: flex;
  align-content: center;
  height: 36px;
  text-align: center;
  border-radius: 18px;
  padding: 0px 16px;
  background-color: #1fada7;
  border: 2px solid #a8e1de;
  color: white;
  font-weight: 600;
  font-size: 16px;
  align-self: center;
}
.downloadBtn:hover {
  background-color: #0f9e98;
}

.downloadBtn > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-self: center;
  align-items: center;
  margin: auto;
}

.downloadBtn img {
  margin-right: 6px;
}

.footer .section {
  margin-top: 50px;
  margin-bottom: 50px;
}

.footer .section p {
  margin: 0;
}

.footer .section p b {
  margin-right: 6px;
  font-size: 15px;
}

.footer .section a {
  margin-bottom: 5px;
  display: inline-block;
}


.inviteStep {
  margin-top: 40px;
  margin-bottom: 90px;
  position:relative;
}

.inviteText {
  color: red;
  font-weight:bold;
  /*font-size: 3vw;*/
  font-size: 36px;
  position: absolute;
  left: 15%;
  top: 39%;
}

/*********************************
        @media 
*********************************/
@media (max-width:576px) {
  .help .header {
    padding-top: 4em;
    padding-bottom: 4em;
  }
  .help .header .section {
    width: 100%;
  }
  .headerText01 {
    font-size: 1.15em;
  }
  .headerText01,
  .headerText02 {
    margin-left: 4% !important;
    margin-right: 4% !important;
  }
  .contents .step {
    font-size: 1.3em;
  }
  .help .section {
    width: 88%;
  }
  .header .section {
    text-align: center;
  }
  .helpTitle {
    width: 320px;
  }
  .helpImg {
    width: 500px;
    margin-top: -0em;
    margin-bottom: -1em;
    margin-left:-100px;
    margin-right:-100px;
  }
  .helpImgDiv {
  }
  .help .header {
    height: auto;
  }
  .stepContents.s01 {
    grid-template-columns: 1fr;
  }
  .buttonBox{
    text-align:center;
  }
  .stepContents {
    margin-left: 0;
  }
  .downloadBtn {
    width:50%;
    margin:.8em auto 0 auto;
  }
  .stepContents img {
    width:100%;
  }
  .footer {
    font-size:12px;
  }
  .footer .bottomCI {
    width:100px;
  }


  .inviteText {
    color: red;
    font-weight: bold;
    font-size: 3vw;
    position: absolute;
    left: 17%;
    top: 39%;
  }
}

@media (min-width:577px) and (max-width:1200px) {
  .headerText01 {
    font-size: 1.2em;
  }

  .contents .step {
    font-size: 1.3em;
  }

  .help .section {
    width: 90%;
  }

  .header .section {
    text-align: center;
  }

  .helpTitle {
    width: 500px;
  }

  .helpImg {
    width: 700px;
    margin-top: 1em;
    margin-bottom: -2em;
    margin-left: -100px;
    margin-right: -100px;
  }

  .help .header {
    height: auto;
  }

  .stepContents.s01 {
    grid-template-columns: 1fr;
  }

  .buttonBox {
    text-align: center;
  }

  .stepContents {
    margin-left: 0;
  }

  .downloadBtn {
    width: 50%;
    margin: .8em auto 0 auto;
  }

  .stepContents img {
    width: 100%;
  }

  .footer {
    font-size: 12px;
  }

  .footer .bottomCI {
    width: 100px;
  }

  .inviteText {
    color: red;
    font-weight: bold;
    font-size: 3vw;
    position: absolute;
    left: 17%;
    top: 39%;
  }
}