@charset "utf-8";

/* #content */
.img_box img {width: 100%;}
.block {display: block;}
.m_color {color: #0C82FE;}

.kakao_top {background: #FFD852;}
.kakao_top .inner {padding: 110px 0; box-sizing: border-box;}
.kakao_top .inner h3 {font-size: 70px; line-height: 1em; letter-spacing: -1px; text-align: center; color: #3C1F1E;}


.kakao_plus {background: #FFCD23;}
.kakao_plus .inner {padding: 60px 16.66%; display: flex; gap: 180px; align-items: center; justify-content: center;}
.kakao_plus .inner p {width: 50%; color: #3C1F1E; font-size: 30px; font-weight: 350; line-height: 45px;}
.kakao_plus .inner .img_box {width: 50%;}


.method .inner > div {padding: 162px 16.66% 0;}
.method .inner > div .title_text {font-size: 45px; font-weight: 700; line-height: 55px; letter-spacing: -1px; color: #161718; margin-bottom: 90px;}
.method .inner > div .title_text .num {display: inline-block; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; background: #3C1F1E; 
    font-size: 36px; font-weight: 500; letter-spacing: -1px; color: #FFD852; text-align: center; margin-right: 28px;}
.method .inner .first_method {background: #F7F7F7;}
.method .inner .first_method ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px;}
.method .inner .first_method ul li .text_box {text-align: center; margin-bottom: 66px;}
.method .inner .first_method ul li .text_box .step_num {display: block; font-size: 28px; font-weight: 500; line-height: 44px; letter-spacing: -1px; color: #3C1F1E; position: relative;}
.method .inner .first_method ul li .text_box .step_num::after {content: ''; display: block; width: 42px; height: 3px; background: #FFD852; margin: 20px auto;}
.method .inner .first_method ul li .text_box p {color: #161718; font-size: 30px; font-weight: 700; line-height: 55px; letter-spacing: -2.5px;}

.method .inner .second_method {display: flex; align-items: center; justify-content: space-between;}
.method .inner .second_method .text_box {width: 58%;}
.method .inner .second_method .text_box .qr_step {display: flex; align-items: center; gap: 48px; padding-bottom: 123px;}
.method .inner .second_method .text_box .qr_step .img_box {width: 30%;}
.method .inner .second_method .text_box .qr_step .img_box img {height: 100%; object-fit: cover;}
.method .inner .second_method .text_box .qr_step dl {width: 70%;}
.method .inner .second_method .text_box .qr_step dl dt {font-size: 30px; font-weight: 700; line-height: 55px; letter-spacing: -2.5px; margin-bottom: .5em; color: #161718;}
.method .inner .second_method .text_box .qr_step dl dd {font-size: 28px; line-height: 52px; letter-spacing: -1px; color: #505050;}
.method .inner .second_method .text_box .qr_step dl dd .icon {display: inline-block; width: 37px; height: 31px; 
    background-image: url(../images/icon_plus.png); background-repeat: no-repeat; background-position: center; background-size: contain; margin: 0 12px 0 25px;}
.method .inner .second_method .img_box {width: 38%;}

.method .inner .third_method {background: #F7F7F7;}
.method .inner .third_method .info_box p {font-size: 30px; line-height: 55px; letter-spacing: -1px;}
.method .inner .third_method .info_box p.notice {font-size: 26px; font-weight: 400; line-height: 1.4em; color: #F00;}
.method .inner .third_method .info_box .btn_more {display: inline-block; width: 450px; font-size: 30px; font-weight: 700; line-height: 70px; color: #FFD852; 
    text-align: center; border-radius: 180px; background: #3C1F1E; position: relative; left: 50%; transform: translateX(-50%); margin: 100px 0;}


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .kakao_plus .inner {padding: 60px 10%;}
    .kakao_top .inner h3 {font-size: 50px;}

    .kakao_plus .inner {gap: 80px; padding: 60px 10%;}
    .kakao_plus .inner p {font-size: 26px; line-height: 1.2em;}

    .method .inner > div {padding: 162px 10% 0;}
    .method .inner > div .title_text {font-size: 32px; margin-bottom: 70px;}
    .method .inner > div .title_text .num {width: 65px; height: 65px; line-height: 65px;}
    .method .inner .first_method ul li .text_box p {font-size: 26px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    .kakao_top .inner {padding: 80px 0;}
    .kakao_top .inner h3 {font-size: 42px;}


    .kakao_plus .inner {padding: 42px 5%; flex-direction: column; gap: 32px;}
    .kakao_plus .inner p {width: 100%; text-align: center; font-size: 25px; line-height: 35px;}
    .kakao_plus .inner .img_box {width: 50%;}
    
    
    .method .inner > div {padding: 100px 5% 0;}
    .method .inner > div .title_text {font-size: 33px; line-height: 38.5px; margin-bottom: 80px;}
    .method .inner > div .title_text .num {width: 60px; height: 60px; line-height: 60px; font-size: 30px; margin-right: 20px;}
    .method .inner .first_method ul {grid-template-columns: repeat(1, 1fr); gap: 60px;}
    .method .inner .first_method ul li {display: flex; gap: 54px;}
    .method .inner .first_method ul li > div {width: 48%;}
    .method .inner .first_method ul li .text_box {text-align: left; margin-bottom: 0;}
    .method .inner .first_method ul li .text_box .step_num {font-size: 25px; line-height: 31px;}
    .method .inner .first_method ul li .text_box .step_num::after {width: 29px; height: 3px; margin: 15px 0;}
    .method .inner .first_method ul li .text_box p {font-size: 25px; line-height: 1em; letter-spacing: -1px;}
    
    .method .inner .second_method {flex-direction: column;}
    .method .inner .second_method .text_box {width: 100%;}
    .method .inner .second_method .text_box .qr_step {gap: 50px; padding-bottom: 62px;}
    .method .inner .second_method .text_box .qr_step dl dt {font-size: 30px; line-height: 55px; letter-spacing: -1px;}
    .method .inner .second_method .text_box .qr_step dl dd {font-size: 25px; line-height: 40px;}
    .method .inner .second_method .text_box .qr_step dl dd .icon {width: 26px; height: 22px; margin: 0 8.4px 0 17.5px;}
    .method .inner .second_method .img_box {width: 60%; margin: 0 auto;}

    .method .inner .third_method .info_box p {font-weight: 700; line-height: 45px;}
    .method .inner .third_method .info_box p i {display: block;}
    .method .inner .third_method .info_box p.notice {font-size: 26px; font-weight: 400; line-height: 1.4em; margin-top: 1em;}
    .method .inner .third_method .info_box .btn_more {width: 360px; font-size: 26px; line-height: 52px; margin: 80px 0;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    .kakao_top .inner {padding: 50px 0;}
    .kakao_top .inner h3 {font-size: 36px;}


    .kakao_plus .inner {gap: 20px;}
    .kakao_plus .inner p {font-size: 20px; line-height: 30px;}
    .kakao_plus .inner .img_box {width: 95%;}
    
    
    .method .inner > div {padding: 100px 5% 0;}
    .method .inner > div .title_text {font-size: 28px; line-height: 38px; margin-bottom: 43px; text-align: center;}
    .method .inner > div .title_text i {display: block;}
    .method .inner > div .title_text .num {display: block; width: 54px; height: 54px; line-height: 54px; font-size: 26px; margin: 0 auto 12px;}
    .method .inner .first_method ul {gap: 40px;}
    .method .inner .first_method ul li {flex-direction: column; gap: 0;}
    .method .inner .first_method ul li > div {width: 100%;}
    .method .inner .first_method ul li .text_box {text-align: center; margin-bottom: 21px;}
    .method .inner .first_method ul li .text_box .step_num {font-size: 22px; line-height: 30px;}
    .method .inner .first_method ul li .text_box .step_num::after {margin: 12px auto;}
    .method .inner .first_method ul li .text_box p {font-size: 22px; line-height: 25px;}
    
    .method .inner .second_method {flex-direction: column;}
    .method .inner .second_method .text_box {width: 100%;}
    .method .inner .second_method .text_box .qr_step {flex-direction: column; gap: 40px; padding-bottom: 40px;}
    .method .inner .second_method .text_box .qr_step .img_box {width: 60%;}
    .method .inner .second_method .text_box .qr_step dl {width: 85%;}
    .method .inner .second_method .text_box .qr_step dl dt {font-size: 22px; line-height: 30px;}
    .method .inner .second_method .text_box .qr_step dl dd {font-size: 20px; line-height: 30px;}
    .method .inner .second_method .text_box .qr_step dl dd .icon {width: 22px; height: 18px; margin: 0 8.4px 0 12px;}
    .method .inner .second_method .img_box {width: 80%;} 

    .method .inner .third_method .info_box p {font-size: 20px; line-height: 30px; word-break: keep-all;}
    .method .inner .third_method .info_box p.notice {font-size: 17px;}
    .method .inner .third_method .info_box p i {display: inline;}
    .method .inner .third_method .info_box .btn_more {width: 100%; font-size: 20px; line-height: 48px; margin: 43px 0 80px;}
}