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

* {font-family: 'Inter', sans-serif; list-style: none; text-decoration: none; padding: 0; margin: 0; color: #323232;}
.strong {color: #2B7DE1; font-weight: 600; display: inline-block;}
.underline {position: relative;}
.underline::after {position: absolute; content: ''; width: 100%; height: 1px; background: #2B7DE1; bottom: 1px; left: 0;}

.wrapper {padding-top: 80px; max-width: 1440px; margin: 0 auto;}
.wrapper .articleWrap {}
.articleWrap .mainTitWrap {padding-left: 24px;}
.mainTitWrap .mainTit {padding-bottom: 16px;}
.mainTitWrap .mainTit h1 {font-size: 40px; line-height: 48px;}
.articleWrap .mainTitWrap .mainTextArea {}
.mainTitWrap .mainTextArea .mainTxt {}
.mainTitWrap .mainTextArea .mainTxt .textWrap {}
.mainTitWrap .mainTextArea .mainTxt .textWrap li {position: relative; font-size: 18px; line-height: 28px; padding-left: 16px;}

.mainTitWrap .mainTextArea .mainTxt .textWrap li::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; content:''; width: 8px; height: 8px; background: #323232; border-radius: 50%;}

.articleWrap .contentWrap {display: flex; padding: 40px 0 160px;}
.articleWrap .contentWrap.findAccount {padding-bottom: 40px;}
.contentWrap .stepWrap {flex: 1 0 0; text-align: center;}
.contentWrap .stepWrap .imageArea {}
.contentWrap .stepWrap .imageArea img {max-width: 50%;}
.contentWrap .stepWrap .textArea {padding-top: 24px;}
.contentWrap .stepWrap .textArea .title {font-size: 18px; font-weight: 600;}
.contentWrap .stepWrap .textArea .text {padding-top: 8px; max-width: 64%; margin: 0 auto; font-size:16px; line-height: 24px; letter-spacing: -0.5px;}
.contentWrap .stepWrap .textArea .numWrap {display: flex; justify-content: center; width: 100%;}
/* .contentWrap .stepWrap .textArea .numWrap .text:nth-child(1) {margin: 0; padding-right: 8px; font-weight: 600;} */
.contentWrap .stepWrap .textArea .numWrap .text:nth-child(2) {text-align: left; margin: 0;}

.contentWrap .contentRow {position:relative; display: flex; padding-bottom: 100px;}

.articleWrap .login, .articleWrap .findAccount {display: block;}
.login .contentRow:first-child, .findAccount .contentRow:first-child {flex-wrap: wrap;}
.login .contentRow:first-child .stepWrap, .findAccount .contentRow .stepWrap {flex: 0 0 33.3%;}
.login .contentRow:first-child .stepWrap:not(:last-child) {padding-bottom: 40px;}
.login .contentRow:last-child .stepWrap, .findAccount .contentRow:first-child .stepWrap {position: relative;}
.login .contentRow:last-child .stepWrap:first-child .imageArea img:first-child {padding-bottom: 24px;}
.login .contentRow:last-child .stepWrap:not(:first-child) .imageArea img {padding : 24px 0;}
.login .contentRow:last-child .stepWrap:nth-child(1)::after {position: absolute; content: ''; width: 12%; height: 1px; border-top: dashed 2px #323232; right: 12.1%; bottom: 30.5%;}
.login .contentRow:last-child .stepWrap:nth-child(2)::before {position: absolute; content: ''; width: 10%; height: 24%; border-left: dashed 2px #323232; border-top: dashed 2px #323232; left: -12%; top: 45%;}
.login .contentRow:last-child::after, .findAccount .contentRow:last-child::after {position: absolute; content: ''; width: 66.6%; height: 86%; border: dashed 2px #323232; border-radius: 8px; right: 0; z-index: -1;}

.findAccount .contentRow:first-child .stepWrap:nth-child(2)::after {position: absolute; content: ''; width: 45%; height: 1px; border-top: dashed 2px #EF002B; left: 77%; top: 45%;}
.findAccount .contentRow:first-child .stepWrap:nth-child(2) .imageArea::after {content: ""; position: absolute; top: 45% ; left: 121%; width: 8px; height: 8px; margin-top: 1px; border-top: 2px solid #EF002B; border-left: 2px solid #EF002B; transform: translate(-50%, -50%) rotate(135deg);}
.findAccount .contentRow:last-child::after {left: 0; height: 93%; top: -4%;}
.findAccount .contentRow .stepWrap {position: relative;}
.findAccount .contentRow:last-child .stepWrap:nth-child(2)::after {position: absolute; content: ''; width: 47%; height: 80%; border-right: dashed 2px #323232; border-bottom: dashed 2px #323232; right: -50%; top: -30%;}
.imgMo {display: none;}



@media (max-width: 1440px) {
  .wrapper {max-width: 92%;}
  .findAccount .contentRow:last-child .stepWrap:nth-child(2)::after {top: -33%; height: 83%;}
}
@media (max-width: 1020px) {
  .mainTitWrap .mainTextArea .mainTxt .textWrap li::before {top: 8px;}
  .contentWrap .stepWrap .textArea .text {max-width: 90%;}
  .findAccount .contentRow:last-child::after {height: 89%;}
  .findAccount .contentRow:last-child .stepWrap:nth-child(2)::after {top: -42%; height: 92%;}

  .findAccount .contentRow:first-child .stepWrap:nth-child(2)::after, .findAccount .contentRow:first-child .stepWrap:nth-child(2) .imageArea::after {top: 40%;}

}



@media (max-width: 720px) {
  .wrapper {padding-top: 64px;}
  .wrapper .articleWrap:last-child {padding-top: 40px;}
  .articleWrap .mainTitWrap {padding-left: 0;}
  .mainTitWrap .mainTit h1 {font-size: 5vw; line-height: 1.3;}
  .mainTitWrap .mainTextArea .mainTxt .textWrap li {font-size: 2.5vw; line-height: 1.5;}
  .articleWrap .contentWrap {padding: 24px 0 64px; flex-wrap: wrap;}
  .contentWrap .stepWrap, .login .contentRow:first-child .stepWrap, .findAccount .contentRow .stepWrap  {flex: 0 0 50%;}
  .contentWrap .stepWrap .textArea {padding-top: 16px;}
  .contentWrap .stepWrap .textArea .title {font-size: 2.3vw;}
  .contentWrap .stepWrap:nth-child(-n+2) {padding-bottom: 24px;}
  .contentWrap .stepWrap:nth-child(n+2) {padding-bottom: 0;}
  .contentWrap .stepWrap .textArea .text {max-width: 98%; font-size: 2vw; line-height: 1.5;}
  .contentWrap .stepWrap .imageArea img {max-width: 80%; margin: 0 auto;}
  .contentWrap .contentRow {flex-wrap: wrap; padding-bottom: 0;}
  .contentWrap .contentRow:not(:last-child) {padding-bottom: 40px;}
  .login .contentRow:first-child .stepWrap:not(:last-child) {padding-bottom: 24px;}
  .login .contentRow:last-child .stepWrap:first-child {flex: 0 0 100%; padding-bottom: 40px;}
  .login .contentRow:last-child .stepWrap:first-child .imageArea {display: flex;}

  .login .contentRow:last-child .stepWrap:first-child .imageArea img {max-width: 40%; margin: 0 auto; position: relative;}
  .login .contentRow:last-child .stepWrap:first-child .imageArea img:first-child {padding-bottom: 0;}
  .login .contentRow:last-child .stepWrap:not(:first-child) .imageArea img {padding: 0;}
  .login .contentRow:last-child::after {bottom: -3%; width: 100%; height: 64%; }
  .login .contentRow:last-child .stepWrap:nth-child(2)::before {display: none;}
  .login .contentRow:last-child .stepWrap:nth-child(1)::after {width: 1px; height: 20%; border-top: none; border-right: dashed 2px #323232; bottom: 6%; right: 23%;}

  .login .contentRow:last-child .stepWrap:nth-child(1) .textArea {width: 50%;}
  .login .contentRow:last-child .stepWrap:first-child .imageArea::after {position:absolute;  width: 10%; height: 1px; border-top: dashed 2px #323232; top: 40%; left: 45%; display: block; content: '';}

  .imgWeb {display: none;}
  .imgMo {display: block;}
  .findAccount .contentRow:first-child .stepWrap:nth-child(2)::after, .findAccount .contentRow:first-child .stepWrap:nth-child(2) .imageArea::after, .findAccount .contentRow:last-child .stepWrap:nth-child(2)::after, .findAccount .contentRow:last-child::after {display: none;}


}

@media (max-width: 480px) {
  .wrapper {padding-top: 40px;}
  .mainTitWrap .mainTextArea .mainTxt .textWrap li::before {width: 5px; height: 5px;}
  .mainTitWrap .mainTextArea .mainTxt .textWrap li {padding-left: 12px;}
  .contentWrap .stepWrap .textArea .text {max-width: 94%; }
  .login .contentRow:last-child .stepWrap:nth-child(1)::after {bottom: 10%;}
  .contentWrap .stepWrap .textArea .numWrap {display: block;}
  .contentWrap .stepWrap .textArea .numWrap .text:nth-child(1) {width: 100%;}
  .contentWrap .stepWrap .textArea .numWrap .text:nth-child(2) {text-align: center;}
}

@media (max-width: 360px) {
  .contentWrap .stepWrap .textArea .text {padding-top: 4px;}
}