.mainBody.pc { display:block; }
.mainBody.mobile { display:none; }

.mainContent    { text-align:center;  }
.mainContent h1 { color:#736c08; font-size:40px; font-weight:300; height:44px; line-height:44px; margin-top:81px; text-align:center; }
.mainContent p  { color:#000000; font-size:22px; font-weight:500; height:23px; margin-top:42px; }

.mainContent ul                        { margin:0 auto; margin-top:84px; margin-bottom:193px; width:380px; }
.mainContent ul.login-exist            { margin-top: 229px; margin-bottom: 228px; }
.mainContent ul li                     { border-radius:36px; height:60px; margin-bottom:30px; position:relative; }
.mainContent ul li.naver               { background-color:#27d34a; }
.mainContent ul li.google              { border:1px solid #d9dde2; }
.mainContent ul li.kakao               { background-color:#ffeb00; }
.mainContent ul li.kakao2              { background-color:#e7e7e7; }
.mainContent ul li.kakao2 .kakao-help  { position: absolute; display: flex; top: 50%; right: 10px; transform: translateY(-50%); background-color: transparent; border: none; }
.mainContent ul li.kakao2 .kakao-help img  { width: 30px; }
.mainContent ul li.facebook            { background-color:#3d56a1; }
.mainContent ul li.apple               { border:1px solid #121212; }
.mainContent ul li          a          { display:block; height:100%; width:100%; }
.mainContent ul li          a span     { display:block; height:22px; left:20px; position:absolute; top:50%; transform:translateY(-50%); width:22px; }
.mainContent ul li          a span img { width:22px; height:22px; }
.mainContent ul li.facebook a span img { width:14px; height:24px; }
.mainContent ul li          a strong   { height:60px; line-height:60px; font-weight:normal; font-size:18px; }
.mainContent ul li.naver    a strong   { color:#ffffff; }
.mainContent ul li.google   a strong   { color:#595959; }
.mainContent ul li.kakao    a strong   { color:#595959; }
.mainContent ul li.facebook a strong   { color:#ffffff; }


@media (max-width:1024px) {
    .mainContent    { text-align:center;  }
    .mainContent h1 { color:#00aeef; font-size:4.883vw; font-weight:300; height:4.297vw; line-height:4.297vw; margin-top:7.910vw; text-align:center; }
    .mainContent p  { color:#000000; font-size:2.441vw; font-weight:500; height:2.246vw; margin-top:4.102vw; }

    .mainContent ul                        { margin:0 auto; margin-top:13.770vw; margin-bottom:18.848vw; width:40.039vw; }
    .mainContent ul.login-exist            { margin-top:13.770vw; margin-bottom:18.848vw; }
    .mainContent ul li                     { border-radius:2.441vw; height:4.883vw; margin-bottom:2.930vw; position:relative; }
    .mainContent ul li.naver               { background-color:#27d34a; }
    .mainContent ul li.google              { border:1px solid #d9dde2; }
    .mainContent ul li.kakao               { background-color:#ffeb00; }
    .mainContent ul li.kakao2 .kakao-help  { position: absolute; display: flex; top: 50%; right: 0.9766vw; transform: translateY(-50%); background-color: transparent; border: none; }
    .mainContent ul li.kakao2 .kakao-help img  { width: 2.9297vw; }
    .mainContent ul li.facebook            { background-color:#3d56a1; }
    .mainContent ul li          a          { display:block; height:100%; width:100%; }
    .mainContent ul li          a span     { display:block; height:2.148vw; left:1.953vw; position:absolute; top:50%; transform:translateY(-50%); width:2.148vw; }
    .mainContent ul li          a span img { width:2.148vw; height:2.148vw; }
    .mainContent ul li.facebook a span img { width:1.367vw; height:2.344vw; }
    .mainContent ul li          a strong   { height:4.883vw; line-height:4.883vw; font-weight:normal; font-size:1.758vw; }
}


@media (max-width:768px) {
    .mainBody.pc { display:none; }
    .mainBody.mobile { display:block; }

    .mainContent h1 { font-size:63px; height:62px; line-height:62px; margin-top:80px; }
    .mainContent p  { font-size:26px; height:26px; line-height:26px; margin-top:0px; font-weight:normal; }
    .mainContent p:nth-of-type(1) { margin-top:40px; }
    .mainContent p:nth-of-type(1) { margin-top:8px; }

    .mainContent ul                        { margin:0 auto; margin-top:128px; width:410px; }
    .mainContent ul li                     { border-radius:25px; height:50px; margin-bottom:15px; position:relative; }
    .mainContent ul li.naver               { background-color:#27d34a; }
    .mainContent ul li.google              { border:1px solid #d9dde2; }
    .mainContent ul li.apple               { margin-bottom:193px; }
    .mainContent ul li.kakao               { background-color:#ffeb00; }
    .mainContent ul li.kakao2              { background-color:#e7e7e7; }
    .mainContent ul li.kakao2 .kakao-help  { position: absolute; display: flex; top: 50%; right: 10px; transform: translateY(-50%); background-color: transparent; border: none; }
    .mainContent ul li.kakao2 .kakao-help img  { width: 30px; }
    .mainContent ul li.facebook            { background-color:#3d56a1; }
    .mainContent ul li          a span     { display:block; height:20px; left:20px; position:absolute; top:50%; transform:translateY(-50%); width:22px; }
    .mainContent ul li          a span img { width:22px; height:22px; }
    .mainContent ul li.facebook a span img { width:14px; height:24px; }
    .mainContent ul li          a strong   { height:50px; line-height:50px; font-weight:normal; font-size:18px; vertical-align:top; }
}

@media (max-width:767px) {
    .mainBody.pc { display:none; }
    .mainBody.mobile { display:block; }

    .mainContent h1 { font-size:8.214vw; height:8.083vw; line-height:8.083vw; margin-top:10.430vw; }
    .mainContent p  { font-size:3.390vw; height:3.390vw; line-height:3.390vw; margin-top:0px; font-weight:normal; }
    .mainContent p:nth-of-type(1) { margin-top:5.215vw; }
    .mainContent p:nth-of-type(1) { margin-top:1.043vw; }

    .mainContent ul                        { margin:0 auto; margin-top:16.688vw; width:53.455vw; }
    .mainContent ul li                     { border-radius:3.259vw; height:6.519vw; margin-bottom:1.956vw; position:relative; }
    .mainContent ul li.naver               { background-color:#27d34a; }
    .mainContent ul li.google              { border:1px solid #d9dde2; }
    .mainContent ul li.apple               { margin-bottom:25.163vw; }
    .mainContent ul li.kakao               { background-color:#ffeb00; }
    .mainContent ul li.kakao2              { background-color:#e7e7e7; }
    .mainContent ul li.kakao2 .kakao-help  { top: 50%; right: 1.3038vw; transform: translateY(-50%); border: none; }
    .mainContent ul li.kakao2 .kakao-help img  { width: 3.9113vw; }
    .mainContent ul li.facebook            { background-color:#3d56a1; }
    .mainContent ul li          a span     { display:block; height:2.608vw; left:2.608vw; position:absolute; top:50%; transform:translateY(-50%); width:2.868vw; }
    .mainContent ul li          a span img { width:2.868vw; height:2.868vw; vertical-align:top; }
    .mainContent ul li.facebook a span img { width:1.825vw; height:3.129vw; }
    .mainContent ul li          a strong   { height:6.519vw; line-height:6.519vw; font-weight:normal; font-size:2.347vw; }
}

@media (max-width:414px) {
    .mainContent p {
        font-size: 14px;
        height: auto;
        line-height: unset;
    }

    .mainContent h1 {
        font-size: 34px;
        height: unset;
        line-height: unset;
        margin-top: 32px;
    }

    .mainContent ul {
        width: 300px;
    }

    .mainContent ul li {
        border-radius: 6px;
        height: auto;
        padding: 10px;
        margin-bottom: 15px;
    }

    .mainContent ul li a strong {
        font-size: 14px;
    }

    .mainContent ul li a span img {
        width: 22px;
        height: unset;
    }

    .mainContent ul li a span {
        height: auto;
    }

    .mainContent ul li.kakao2 .kakao-help  {
        top: 50%;
        right: 1.3038vw;
        transform:
        translateY(-50%); border: none;
    }

    .mainContent ul li.kakao2 .kakao-help img  {
        width: 30px;
    }

    .mainContent ul li.facebook a span img {
        width: 14px;
        height: 24px;
    }
}

@media (max-width:300px) {
    .mainContent ul {
        width: 100%;
    }
}