/* common */
.sub_section {position: relative; width: 100%;}
.sub_inner {position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px;}

.Pretendard {font-family:'Pretendard', sans-serif;}
.GmarketSans {font-family: 'GmarketSans';}
.sub_title { font-size: 20px; line-height: 28px; font-weight: 600; text-align: center; color: #1a1a32; margin-bottom: 25px;}
.sub_button { display: flex; align-items: center; justify-content: center; width: 100%; height: 65px; background: #ffbd31; border-radius: 6px; font-size: 23px; font-weight: 500; color: #1a1a32;}



/* 레이아웃 수정 */
#footer {border: 0;}
#footer .smart_btn { background: #f5bd41; display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; height: 65px; border-radius: 20px 20px 0 0; margin-top: -20px;}
#footer .smart_btn .txt { font-size: 22px; font-weight: 500; color: #202038;}
#footer .smart_btn .icon{background: url(../images/smart/smart_btn_arrow.png) no-repeat center/contain; width: 25px; aspect-ratio: 1/1;}
#footer .footer_inner { max-width: 1200px; margin: 0 auto; text-align: left; position: relative; background: #e6e6f2; border-top: 1px solid #000; padding: 20px;}
#footer .footer_inner .footer_partner { display: flex; gap: 10px; margin-bottom: 20px;}
#footer .footer_inner .footer_partner > li { width: 33.333%; border-radius: 3.5px; background-color: rgba(255, 255, 255, 0.702); box-shadow: 0 2.5px 7.5px 0 rgba(0, 0, 0, 0.1);}
#footer .footer_inner .footer_partner > li > a { display: flex; align-items: center; justify-content: center;}
#footer .footer_inner .footer_partner > li > a > img { max-width: 100%;}
#footer .footer_inner .footer_nav { display: flex; align-items: center; justify-content: center; gap: 7.5px;}
#footer .footer_inner .footer_nav > li { font-size: 10px; font-weight: 600; color: #555555;}
#footer .footer_inner .footer_nav > li > a { display: inline-block;}
#footer .footer_inner .footer_nav > li.bar::before { content: "|";}
#footer .footer_inner .company_info { font-size: 6px; font-weight: 500; text-align: center; display: block; color: #555555; margin-top: 10px;}



/* 스마트 월세페이 */
.smartpay_page {position: relative;}
.smartpay_page .smart_banner1 { background: url(../images/smart/mob_ss1_bg.png) no-repeat top center / cover;  overflow: hidden;}
.smartpay_page .smart_banner1 .contbox { display: flex; align-items: center; flex-direction: column; padding-top: 32px; padding-bottom: 27px;}
.smartpay_page .smart_banner1 .contbox .txtbox { position: relative; display: flex;  flex-direction: column;}
.smartpay_page .smart_banner1 .contbox .txtbox .tit { font-size: 45px; line-height: 1.2; font-weight: 700; color: #1a1a32; margin-bottom: 8px; text-align: center;}
.smartpay_page .smart_banner1 .contbox .txtbox .desc { font-size: 22.5px; line-height: 32.5px; font-weight: 500; color: #4f350b; margin-bottom: 30px; text-align: center;}
.smartpay_page .smart_banner1 .contbox .imgbox { width: 180%; max-width: 576px; display: flex; align-items: center; justify-content: center; padding-right: 7%; margin: -25px 0 -78px;}
.smartpay_page .smart_banner1 .contbox .imgbox > img {max-width: 100%;}
.smartpay_page .smart_banner1 .contbox .infobox { width: 100%; display: flex; flex-direction: column; gap: 15px;}
.smartpay_page .smart_banner1 .contbox .infobox > li { width: 100%; min-height: 80px; border-radius: 6px; background-color: rgba(255, 255, 255, 0.8); box-shadow: 0px 0.25px 7.5px 0px rgba(119, 119, 119, 0.18); display: flex; align-items: center; gap: 16px; padding: 14px;}
.smartpay_page .smart_banner1 .contbox .infobox > li .icon { display: flex; align-items: center; justify-content: center; max-width: 40px;}
.smartpay_page .smart_banner1 .contbox .infobox > li .icon > img{max-width: 100%;}
.smartpay_page .smart_banner1 .contbox .infobox > li .txt { font-size: 15.5px; line-height: 20px; color: #4f350b; font-weight: 500;}


.smartpay_page .smart_why { padding: 60px 0; background: #f3f9fd; margin-bottom: 70px;}
.smartpay_page .smart_why .contbox { display: flex; flex-direction: column; gap: 10px;}
.smartpay_page .smart_why .contbox > li { width: 100%; border-radius: 15px; background-color: #ffffff; box-shadow: 0px 2px 0 0 rgb(234 234 234);  padding: 17px 19px; display: flex; align-items: center; gap: 16px;}
.smartpay_page .smart_why .contbox > li .icon { display: flex; align-items: center; justify-content: center; max-width: 50px;}
.smartpay_page .smart_why .contbox > li .icon > img{max-width: 100%;}
.smartpay_page .smart_why .contbox > li .txt { font-size: 18px; font-weight: 500; line-height: 25px; color: #1a1a32;}


.smartpay_page .smart_use { margin-bottom: 100px;}
.smartpay_page .smart_use .contbox { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px;}
.smartpay_page .smart_use .contbox > li:not(.arrow) { width: 100%; min-height: 60px; border: 1px solid #d0e0ea; border-radius: 10px; background-color: #f4f9fd; display: flex; align-items: center; gap: 10px; padding: 10px 12px;}
.smartpay_page .smart_use .contbox > li:not(.arrow) .icon { display: flex; align-items: center; justify-content: center; max-width: 40px; border: 1px solid #b8c5d0;border-radius: 50%;}
.smartpay_page .smart_use .contbox > li .icon > img{max-width: 100%;}
.smartpay_page .smart_use .contbox > li .txtbox { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;}
.smartpay_page .smart_use .contbox > li .txtbox .step { font-size: 7px; font-weight: 600; color: #1a1a32; background: #ffba00; display: inline-block; border-radius: 2.5px; padding: 2px 4px; min-width: 40px;}
.smartpay_page .smart_use .contbox > li .txtbox .txt { font-size: 18px; font-weight: 500; line-height: 25px; color: #1a1a32;}
.smartpay_page .smart_use .contbox > li.arrow { width: 100%; display: flex; align-items: center; justify-content: center;}
.smartpay_page .smart_use .contbox > li.arrow .icon { display: flex; max-width: 14px;}


.smartpay_page .smart_faq { margin-top: 120px;}
.smartpay_page .smart_faq .sub_title { margin-bottom: 15px;}
.smartpay_page .smart_faq .faq-list-element {margin: 0;}
.smartpay_page .smart_faq .faq-list-cont .faq-q { background-image: url(../images/common/ico-q.png); background-position: 10px 10px; background-size: 25px auto;}
.smartpay_page .smart_faq .faq-list-cont.active .faq-q {background-image: url(../images/common/ico-q-on2.png);}
.smartpay_page .smart_faq .faq-list-cont .faq-q a { padding: 18px 10px 18px 45px;}
.smartpay_page .smart_faq .faq-list-cont .faq-q a span.text-cont { font-size: 14px; line-height: 1.2; word-break: keep-all;}
.smartpay_page .smart_faq .faq-list-cont .faq-a { background-image: url(../images/common/ico-a.png); background-position: 10px 10px; background-size: 25px auto;  padding: 20px 20px 20px 45px; font-size: 14px; line-height: 1.5; word-break: keep-all;}


.smartpay_page .smart_banner2 { background: url(../images/smart/mob_smart_banner2_bg.png) no-repeat center / cover; padding: 45px 0 140px;}
.smartpay_page .smart_banner2 .contbox {  display: flex; align-items: center;  justify-content: center; text-align: center; padding: 0 25px; max-width: 360px;  margin: 0 auto;}
.smartpay_page .smart_banner2 .contbox .txt { font-size: 18.5px; line-height: 27.5px; font-weight: 500; color: #fff; word-break: keep-all;}



@media screen and (max-width: 320px) {

  .sub_inner { padding: 0 16px; }
  .sub_button { font-size: 20px; }


  .smartpay_page .smart_banner1 .contbox .txtbox .tit { font-size: 38px;}
  .smartpay_page .smart_banner1 .contbox .txtbox .desc { font-size: 20px;  line-height: 28px;}
  .smartpay_page .smart_banner1 .contbox .infobox > li {min-height: 74px; gap: 12px; }
  .smartpay_page .smart_banner1 .contbox .infobox > li .icon { max-width: 36px;}
  .smartpay_page .smart_banner1 .contbox .infobox > li .txt {font-size: 14px;}

  .smartpay_page .smart_why .contbox > li { padding: 14px 16px; gap: 12px; }
  .smartpay_page .smart_why .contbox > li .icon { max-width: 44px;}
  .smartpay_page .smart_why .contbox > li .txt { font-size: 16px;}

  .smartpay_page .smart_use .contbox > li .txtbox .txt { font-size: 16px; }

}