/* common */
.main_section {position: relative; width: 100%;}
.main_inner {position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px;}
.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 { position: relative; border: 0; z-index: 10;}
#footer .app_nav { background-color: #f3a221; box-shadow: 0 -5px 7.5px 0 rgba(10, 3, 4, 0.5); border-radius: 30px 30px 0 0; padding: 16px 20px; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px;}
#footer .app_nav > .btn { width: 112px; height: 32px; background-color: rgba(255, 255, 255, 0.102); box-shadow: 0 1px 2.5px 0 rgba(10, 3, 4, 0.08); border-radius: 100px; display: flex; align-items: center; justify-content: center;}
#footer .app_nav > .btn .link { display: flex; align-items: center; justify-content: center; gap: 6px;}
#footer .app_nav > .btn .link .icon { width: 15px;}
#footer .app_nav > .btn .link .txt { font-size: 11px; font-weight: 600; color: #fff;}
#footer .app_nav > .home { width: 60px; aspect-ratio: 1 / 1; background: #fab13d; box-shadow: 0 3.5px 7.5px 0 rgba(10, 3, 4, 0.12); display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; margin-top: -25px;}
#footer .app_nav > .home .link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
#footer .app_nav > .home .link .icon{max-width: 36px;}
#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;}



/* 메인 */
.main_page { padding-bottom: 0 !important;}
.main_page .main_banner1{margin-bottom: 22px;;}
.main_page .main_banner1 .contbox { position: relative; background: url(../images/smart/app_main_banner1_bg.png) no-repeat center bottom / cover #fdb33e; width: 100%; height: 340px; border-radius: 20px; padding: 25px 0 0;}
.main_page .main_banner1 .contbox .txtbox { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 12px;}
.main_page .main_banner1 .contbox .txtbox .sub { font-size: 25px; font-weight: 500; letter-spacing: -0.05em; color: #5c3d0b; margin-bottom: 4px;}
.main_page .main_banner1 .contbox .txtbox .tit { font-size: 33px; font-weight: 700; color: #4b3006; margin-bottom: 10px;}
.main_page .main_banner1 .contbox .txtbox .desc { font-size: 13px; line-height: 18px; font-weight: 500; color: #5b3c0b;}
.main_page .main_banner1 .contbox .btn_box { display: flex; justify-content: center;}
.main_page .main_banner1 .contbox .btn_box .main_more { font-size: 13px; font-weight: 500; color: #000000; background: rgba(255, 255, 255, 0.5); box-shadow: 0 2.5px 5px 0 rgba(0, 0, 0, 0.08); backdrop-filter: blur(6px); width: 90px; height: 33px; display: flex; align-items: center; justify-content: center; border-radius: 100px;}

.main_page .main_banner2 .contbox { position: relative; background: url(../images/smart/app_main_banner2_bg.png) no-repeat center bottom / cover #20203a; width: 100%; height: 340px; border-radius: 20px 20px 0 0; padding: 25px 0 0;}
.main_page .main_banner2 .contbox .txtbox { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 16px;}
.main_page .main_banner2 .contbox .txtbox .tit { font-size: 28px; font-weight: 700; color: #fdb33e; margin-bottom: 4px;}
.main_page .main_banner2 .contbox .txtbox .sub { font-size: 21px; font-weight: 500; letter-spacing: -0.05em; color: #fff; margin-bottom: 10px;}
.main_page .main_banner2 .contbox .txtbox .desc { font-size: 13px; line-height: 18px;  font-weight: 500; color: #fff;}
.main_page .main_banner2 .contbox .btn_box { display: flex; justify-content: center;}
.main_page .main_banner2 .contbox .btn_box .main_more{font-size: 13px; font-weight: 500; color: #000000; background: #fab13d; box-shadow: 0 2.5px 5px 0 rgba(0, 0, 0, 0.08);  width: 90px; height: 33px; display: flex; align-items: center; justify-content: center; border-radius: 100px;}



/* 확정일자신고 */
.report_page { position: relative; padding-bottom: 0 !important;}
.report_page .report_banner1 { overflow: hidden; margin-bottom: 40px;}
.report_page .report_banner1 .contbox { display: flex; align-items: center; flex-direction: column; padding-top: 28px; }
.report_page .report_banner1 .contbox .txtbox { position: relative; display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px;}
.report_page .report_banner1 .contbox .txtbox .tit { font-size: 27.5px; line-height: 1.3; font-weight: 700; color: #20203a; text-align: center;}
.report_page .report_banner1 .contbox .txtbox .desc { font-size: 16px;  line-height: 22px;  font-weight: 500; color: #4e4e74; text-align: center; }
.report_page .report_banner1 .contbox .imgbox { width: calc(100% + 20px); margin-left: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 40px;}
.report_page .report_banner1 .contbox .imgbox > img {max-width: 100%;}
.report_page .report_banner1 .contbox .countbox { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px;}
.report_page .report_banner1 .contbox .countbox .count_tit { font-size: 22px; font-weight: 500; color: #20203a;}
.report_page .report_banner1 .contbox .countbox .count { width: 100%; height: 76px; display: flex; align-items: center; justify-content: center; background: #20203a; border-radius: 6px;}
.report_page .report_banner1 .contbox .countbox .count .num { flex: 1; height: 100%; display: flex; align-items: center; font-size: 45px; font-weight: 500; color: #f4a429; padding: 0 28px;}
.report_page .report_banner1 .contbox .countbox .count .txt { height: 100%; display: flex; align-items: center; font-size: 40px; font-weight: 500; color: #7979a9; padding: 0 26px; border-left: 1px solid #4e4e77;}


.report_page .report_procedure { padding: 30px 0; background: #f3f9fd; margin-bottom: 30px;}
.report_page .report_procedure .sub_title { margin-bottom: 30px;}
.report_page .report_procedure .contbox { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 25px;}
.report_page .report_procedure .contbox > li { width: calc((100% - 20px) / 2); background: #20203a; border-radius: 15px; display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 16px 10px;}
.report_page .report_procedure .contbox > li .icon { display: flex; align-items: center; justify-content: center; max-width: 27px;}
.report_page .report_procedure .contbox > li .icon > img{max-width: 100%;}
.report_page .report_procedure .contbox > li .txt { font-weight: 700; font-size: 12px; color: #fff;}
.report_page .report_procedure .contbox > li .txt .bar { display: inline-block; font-weight: 200; margin: 0 2px;}
.report_page .report_procedure .info_txt { font-size: 12px; line-height: 17px; color: #20203a;  text-align: center;}


.report_page .report_banner2 { background: url(../images/smart/report_banner2_bg.png) no-repeat center / cover; padding: 14px 0; margin-bottom: 40px;}
.report_page .report_banner2 .contbox { display: flex; align-items: center; justify-content: space-between;}
.report_page .report_banner2 .contbox .txtbox { flex: 1; width: 55%; padding: 0 20px; display: flex; flex-direction: column; gap: 12px;}
.report_page .report_banner2 .contbox .txtbox .desc { font-size: 14px; color: #2f3742;}
.report_page .report_banner2 .contbox .txtbox .tit { font-size: 23px; font-weight: 700; color: #20203a;}
.report_page .report_banner2 .contbox .imgbox { display: flex; align-items: center; justify-content: center; width: 45%; max-width: 157px;}
.report_page .report_banner2 .contbox .imgbox > img{max-width: 100%;} 


.report_page .report_guide { margin-bottom: 80px;}
.report_page .report_guide .sub_title { font-size: 16px; font-weight: 500; text-align: left; margin-bottom: 16px;}
.report_page .report_guide .contbox { display: flex; flex-direction: column; gap: 10px;}
.report_page .report_guide .contbox > li { 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;}
.report_page .report_guide .contbox > li .icon { display: flex; align-items: center; justify-content: center; max-width: 42px; border: 1px solid #b8c5d0;border-radius: 50%;}
.report_page .report_guide .contbox > li .icon > img{max-width: 100%;}
.report_page .report_guide .contbox > li .txtbox { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;}
.report_page .report_guide .contbox > li .txtbox .tit { font-size: 13px; font-weight: 600; color: #20203a;}
.report_page .report_guide .contbox > li .txtbox .desc { font-size: 11px; color: #666; word-break: keep-all; letter-spacing: -0.03em;}



/* 스마트 월세페이 */
.smartpay_page { position: relative; padding-bottom: 0 !important;}
.smartpay_page .smart_banner1 { overflow: hidden;}
.smartpay_page .smart_banner1 .contbox::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 20%; background: #f6aa32;}
.smartpay_page .smart_banner1 .contbox { display: flex; align-items: center; flex-direction: column; padding-top: 28px; padding-bottom: 28px;}
.smartpay_page .smart_banner1 .contbox .bg { background: url(../images/smart/app_smart_banner1_bg.png) no-repeat 50% top / cover; position: absolute; left: 0; top: -40px; width: 100%; height: 808px;}
.smartpay_page .smart_banner1 .contbox .txtbox { position: relative; display: flex;  flex-direction: column; gap:14px; margin-bottom: 280px;}
.smartpay_page .smart_banner1 .contbox .txtbox .tit { font-size: 24px; line-height: 1.3; font-weight: 700; color: #20203a; 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 .infobox { position: relative; width: 100%; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px;}
.smartpay_page .smart_banner1 .contbox .infobox > li { width: 100%; border-radius: 10px; background-color: rgba(255, 255, 255, 0.8);  backdrop-filter: blur(5px); box-shadow: 0px 0.25px 7.5px 0px rgba(119, 119, 119, 0.18); display: flex; align-items: center; gap: 15px; padding: 15px;}
.smartpay_page .smart_banner1 .contbox .infobox > li .icon { display: flex; align-items: center; justify-content: center; max-width: 30px;}
.smartpay_page .smart_banner1 .contbox .infobox > li .icon > img{max-width: 100%;}
.smartpay_page .smart_banner1 .contbox .infobox > li .txt { font-size: 16px; line-height: 1.3; color: #4f350b; font-weight: 500;}
.smartpay_page .smart_banner1 .contbox .infobox2 { position: relative; width: 100%; display: flex; justify-content: space-between;}
.smartpay_page .smart_banner1 .contbox .infobox2::before { content: ""; position: absolute; left: 49%; transform: translateX(-50%); width: 1px; height: 100%; background: #ca8924;}
.smartpay_page .smart_banner1 .contbox .infobox2 > li {max-width: 50%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 5px 0;}
.smartpay_page .smart_banner1 .contbox .infobox2 > li .icon { width: 61px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;}
.smartpay_page .smart_banner1 .contbox .infobox2 > li .icon > img{max-width: 100%;}
.smartpay_page .smart_banner1 .contbox .infobox2 > li .tit { font-size: 17px; font-weight: 500; color: #20203a;}
.smartpay_page .smart_banner1 .contbox .infobox2 > li .desc { font-size: 11px; line-height: 15px; color: #6f4505;}


.smartpay_page .smart_why { padding: 60px 0 74px; 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: 42px; 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 {max-width: 1200px; margin: 0; border-top: 1px solid #333;}
.smartpay_page .smart_faq .faq-list-element .tab_li { display: none;}
.smartpay_page .smart_faq .faq-list-element .tab_li.on { display: block;}
.smartpay_page .smart_faq .faq-list-element:after { content: ''; display: block; clear: both}
.smartpay_page .smart_faq .faq-list-cont { overflow: hidden;}
.smartpay_page .smart_faq .faq-list-cont .faq-q { background-image: url(../images/common/ico-q.png); background-repeat: no-repeat;  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 { display: block; padding: 18px 10px 18px 45px; position: relative; border: 1px solid transparent; border-bottom: 1px solid #ddd;}
.smartpay_page .smart_faq .faq-list-cont .faq-q a span { display: inline-block;}
.smartpay_page .smart_faq .faq-list-cont .faq-q a span.faq-category { display: inline-block; border-radius: 4px;  text-align: center; background-color: #f6f6f6; font-size: 14px; color: #333333; margin-right: 15px; padding: 5px 10px}
.smartpay_page .smart_faq .faq-list-cont.active .faq-q a span.faq-category { background-color: #FFBD2F; color: #fff}
.smartpay_page .smart_faq .faq-list-cont .faq-q a span.text-cont { font-size: 14px; color: #333; font-weight: 700; line-height: 1.2; word-break: keep-all;}
.smartpay_page .smart_faq .faq-list-cont.active .faq-q a span.text-cont { color: #FFBD2F}
.smartpay_page .smart_faq .faq-list-cont .faq-q a i { display: inline-block; position: absolute; right: 10px; top: 50%; margin-top: -9px; z-index: 1; color: #999}
.smartpay_page .smart_faq .faq-list-cont.active .faq-q a i { color: #FFBD2F}
.smartpay_page .smart_faq .faq-list-cont .faq-a { background-image: url(../images/common/ico-a.png); background-repeat: no-repeat; background-position: 10px 10px; background-size: 25px auto; background-color: #f6f6f6; padding: 20px 20px 20px 45px;  font-size: 14px; line-height: 1.5; word-break: keep-all; display: none; color: #333;}
.smartpay_page .smart_faq .faq-list-cont.active .faq-a { display: block}


.smartpay_page .smart_banner2 { background: url(../images/smart/app_smart_banner2_bg.png) no-repeat center / cover; padding: 45px 0 60px;}
.smartpay_page .smart_banner2 .contbox { display: flex; justify-content:center; align-items: center; text-align: center; padding: 0 25px;}
.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 (min-width: 600px) {

  .main_page .main_banner1 .contbox { height: auto; aspect-ratio: 1 / 0.8;}
  .main_page .main_banner2 .contbox { height: auto; aspect-ratio: 1 / 0.765;}

  
  .smartpay_page .smart_banner1 .contbox .bg { top: 65px; background-image: url(../images/smart/app_smart_banner1_bg2.png);}
  .smartpay_page .smart_banner1 .contbox .infobox2 { max-width: 360px;}

}


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

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


  .report_page .report_procedure .contbox > li .txt { font-size: 10px;}
  .report_page .report_banner2 .contbox .imgbox { width: 40%;}


  .smartpay_page .smart_banner1 .contbox .infobox > li .txt {font-size: 13px;}
  .smartpay_page .smart_banner1 .contbox .infobox2 > li .desc { font-size: 10px;}

  .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; }
  
}