@charset "utf-8";
/* version 9.0 | 2023-12-06 */

/*******************************************************************
	※ 퍼블본 → 개발본 오버라이드 참고사항

	퍼블리싱 리소스 오버라이드 시, 
	개발본과 퍼블본의 원활한 싱크 관리를 위해
	** 상단의 version 정보 함께 업데이트 부탁드립니다. ** 

	또한, 리소스 수정 및 추가시에 리소스의 출처를 알기 쉽도록
	날짜, 대제목, 작성자를 함께 주석에 기입하고 있습니다. 

	예) 
	s: 221109 : 모기지 간편한도조회 관련 컴포넌트 추가 | msh
		.ebbtn { 블라블라 } 
	e: 221109 : 모기지 간편한도조회 관련 컴포넌트 추가 | msh

	** 해당 개발 건의 대제목을 검색하시어 
	해당되는 리소스 누락없이 적용 부탁드립니다. **
********************************************************************/



/********************************************
	메인
********************************************/
/*
	공통
*/
/* 타이틀 */
.mainpage .main-copy { font-size: 42px; color: #303030; line-height: 1.2 }
.mainpage .sub-copy { font-size: 18px; color: #707070; line-height: 1.3; }

.mobile .mainpage .main-copy { font-size: 24px;  }
.mobile .mainpage .sub-copy { font-size: 13px; }

/* 영역 */
.container.type-main { padding-top: 0px; }
.mainpage .part-area { position: relative; margin: 0 auto; width: 970px;}
.mobile .mainpage .part-area { position: relative; margin: 0 auto; width: 100%;}


/*
	1영역
*/
/* PC */
.section-01 { clear: both; position: relative; width: 100%; padding: 0; box-sizing: border-box;  }
.section-01 .pagination-wrap { z-index: 100; position: absolute; top: 64%; left: 50%; width: 400px; transform: translateX(-50%); margin-left: 278px; }
.section-01 .pagination-wrap .pagination { float: left; }
.section-01 .pagination-wrap .pagination ul > li { display: inline-block; width: 50px; height: 4px; font: 0; text-indent: -1000px; overflow: hidden; background: #000000; opacity: 0.1 }
.section-01 .pagination-wrap .pagination ul > li.active { background: #e01e28; opacity: 1 }
.section-01 .pagination-wrap .control { float: left; position: relative; top: 7px; left: 9px }
.section-01 .pagination-wrap .control .ebbtn.main-pause { display: none; width: 20px; height: 20px; background: url('../image/page_main/main_pause.png') no-repeat; background-size: cover; text-indent: -1000px; overflow: hidden;}
.section-01 .pagination-wrap .control .ebbtn.main-play { display: none; width: 20px; height: 20px; background: url('../image/page_main/main_play.png') no-repeat; background-size: cover; text-indent: -1000px; overflow: hidden;}
.section-01 .pagination-wrap .control .ebbtn.active { display: block; }
.section-01 .main-swiper { width: 100%; height: 100% }
.section-01 .main-swiper .swiper-container { width: 100%; height: 100%; }
.section-01 .main-swiper .swiper-wrapper { width: 100%; height: 100%; }
.section-01 .main-swiper .swiper-slide { width: 100%; height: 100%; }
.section-01 .arrow-left { z-index: 10; position: absolute; top: 50%; transform: translateY(-50%); left: 80px; width: 65px; height: 116px; background: url('../image/page_main/arrow_left_01.png') no-repeat; background-size: cover; text-indent: -1000px; overflow: hidden; }
.section-01 .arrow-right { z-index: 10; position: absolute; top: 50%; transform: translateY(-50%); right: 80px; width: 65px; height: 116px; background: url('../image/page_main/arrow_right_01.png') no-repeat; background-size: cover; text-indent: -1000px; overflow: hidden; }
.section-01 .mouse-wheel { z-index: 10; position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); } 
.section-01 .mouse-wheel .mouse-scroll { opacity: 0; position: absolute; top: 8px; left: 50%; width: 4px; height: 9px; margin-left: -2px; }
.section-01 .mouse-wheel .mouse-scroll { animation: mouse-scroll 1500ms ease-in-out infinite; }
.section-01 .mouse-wheel .mouse-arrow { position: absolute; bottom: -15px; left: 50%; width: 8px; height: 5px; margin-left: -4px; }
@keyframes mouse-scroll {
	0% { opacity: 0; transform: translateY(0); }
	10% { opacity: 1; }	
	60% { transform: translateY(13px); }
	100% { transform: translateY(13px); }
}
@keyframes mouse-arrow {
	0% { transform: translateY(0px); opacity: 0; }
	50% { opacity: 1; }
	100% { transform: translateY(10px); opacity: 0; }
}

.section-01 .main-box01 { position: relative; width: 100%; height: 100%; background: #f9f9f9; }
.section-01 .main-box01 .decoration01 { z-index: 1; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin-top: 0px; margin-left: -330px; transform-origin: 50% 50%; }
.section-01 .main-box01 .decoration02 { z-index: 1; position: absolute; top: 100%; left: 50%; transform: translateY(-35%) translateX(-50%); margin-top: 0px; margin-left: 500px;  transform-origin: 50% 50%; }
.section-01 .main-box01 .decoration03 { z-index: 1; position: absolute; top: 0%; left: 50%; transform: translateY(-40%) translateX(-50%); margin-top: 0px; margin-left: 340px; transform-origin: 50% 50%; }
.section-01 .main-box01 .decoration01 { animation: circle01 3000ms infinite;}
.section-01 .main-box01 .decoration02 { animation: circle02 1500ms infinite;}
.section-01 .main-box01 .decoration03 { animation: circle03 2400ms infinite;}
@keyframes circle01 {
	0% { transform: translateY(-50%) translateX(-50%) scale(1) }
	50% { transform: translateY(-50%) translateX(-50%) scale(1.3)  }
	100% { transform: translateY(-50%) translateX(-50%) scale(1)  }
}
@keyframes circle02 {
	0% { transform: translateY(-35%) translateX(-50%) scale(1) }
	50% { transform: translateY(-35%) translateX(-50%) scale(1.2)  }
	100% { transform: translateY(-35%) translateX(-50%) scale(1)  }
}
@keyframes circle03 {
	0% { transform: translateY(-40%) translateX(-50%) scale(1) }
	50% { transform: translateY(-40%) translateX(-50%) scale(1.4)  }
	100% { transform: translateY(-40%) translateX(-50%) scale(1)  }
}


.section-01 .main-box01 .img-wrap { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin-left: -330px;  }
.section-01 .main-box01 .text-wrap { z-index: 3; position: absolute; top: 50%; left: 50%; width: 400px; transform: translateY(-50%) translateX(-50%); margin-left: 280px; }
.section-01 .main-box01 .text-wrap .main-copy { }
/* s: 231206 접근성수정 */
.section-01 .main-box01 .text-wrap .sub-copy { width: 261px; padding: 30px 0 60px 0}
.section-01 .main-box01 .text-wrap .sub-copy img { width: 100%; } 
/* e: 231206 접근성수정 */

/* Mobile */
.mobile .section-01 .pagination-wrap { z-index: 100; position: absolute; top: 675px; left: 50%; width: 100%; transform: translateX(-50%); margin-left: 0px; text-align: center; }
.mobile .section-01 .pagination-wrap .pagination { float: none; display: inline-block; }
.mobile .section-01 .pagination-wrap .control { float: none; display: inline-block; top: 7px;  }
.mobile .section-01 .main-swiper { width: 100%; height: 720px }
.mobile .section-01 .arrow-left { left: 20px; width: 20px; height: 36px; display: none; }
.mobile .section-01 .arrow-right { right: 20px; width: 20px; height: 36px; display: none; }
.mobile .section-01 .mouse-wheel { display: none } 
.mobile .section-01 .main-box01 { width: 100%; height: 100%;  }
.mobile .section-01 .main-box01 .decoration01 { top: 300px; left: 50%; width: 400px; transform: translateY(0%) translateX(-50%); margin-top: 0px; margin-left: 0px; }
.mobile .section-01 .main-box01 .decoration02 { display: none; top: 85%; left: 80%; width: 200px; transform: translateY(0%) translateX(0%); margin-top: 0px; margin-left: 0px; }
.mobile .section-01 .main-box01 .decoration03 {  top: -280px; left: auto; right: -280px; width: 600px; transform: translateY(0%) translateX(0%); margin-top: 0px; margin-left: 0px }
.mobile .section-01 .main-box01 .img-wrap { top: 290px; left: 50%; width: 550px; transform: translateY(0%) translateX(-50%); margin-left: 0px;  }
.mobile .section-01 .main-box01 .text-wrap { top: 80px; left: 50%; width: 190px; transform: translateY(0%) translateX(-50%); margin-left: 0px; }
.mobile .section-01 .main-box01 .text-wrap .main-copy { }
.mobile .section-01 .main-box01 .text-wrap .sub-copy { width: 203px; padding: 30px 0 0 0 } /* 231206 접근성수정 */

.mobile .section-01 .main-box01 .decoration01 { animation: circle011 3000ms infinite;}
.mobile .section-01 .main-box01 .decoration02 { animation: circle021 1800ms infinite;}
.mobile .section-01 .main-box01 .decoration03 { animation: circle031 2400ms infinite;}
@keyframes circle011 {
	0% { transform: translateY(0%) translateX(-50%) scale(1) }
	50% { transform:translateY(0%) translateX(-50%) scale(1.2)  }
	100% { transform: translateY(0%) translateX(-50%) scale(1)  }
}
@keyframes circle021 {
	0% { transform: translateY(0%) translateX(0%) scale(1) }
	50% { transform: translateY(0%) translateX(0%) scale(1.2)  }
	100% { transform: translateY(0%) translateX(0%) scale(1)  }
}
@keyframes circle031 {
	0% { transform: translateY(0%) translateX(0%) scale(1) }
	50% { transform: translateY(0%) translateX(0%) scale(1.2)  }
	100% { transform: translateY(0%) translateX(0%) scale(1)  }
}


/*
	2영역
*/
/* PC */
.section-02 { clear: both; position: relative; width: 100%; padding: 0; background: #ffffff; box-sizing: border-box; overflow: hidden; }
.section-02 .decoration01 { z-index: 1; opacity: 0.08; position: absolute; top: -36%; left: 50%; transform-origin: 50% 50%;   }
.section-02 .decoration01 { animation: sce02-01 160000ms infinite linear;}
.section-02 .decoration02 { z-index: 1;  opacity: 0.08;position: absolute; top: 30%; left: 50%; transform-origin: 50% 50%; }
.section-02 .decoration02 { animation: sce02-02 280000ms infinite linear;}
@keyframes sce02-01 {
	0% { transform: translateX(-121%) rotate(0deg); }
	100% { transform: translateX(-121%) rotate(-360deg) }
}
@keyframes sce02-02 {
	0% { transform: translateX(-13%) rotate(0deg); }
	100% { transform: translateX(-13%) rotate(-360deg) }
}
.section-02 .type-loan { z-index: 2; clear: both; height: 900px; }
.section-02 .type-loan .text-wrap { float: left; }
.section-02 .type-loan .img-wrap { float: right; }
.section-02 .type-deposit { z-index: 2; clear: both; height: 900px; }
.section-02 .type-deposit .text-wrap { float: right; }
.section-02 .type-deposit .img-wrap { float: left; }
.section-02 .text-wrap { width: 50%; text-align: left;  }
.section-02 .text-wrap .main-copy { padding: 300px 0 0 0; }
.section-02 .text-wrap .sub-copy { padding: 30px 0 0 0}
.section-02 .text-wrap .link-btn { padding: 35px 0 0 0;}
.section-02 .text-wrap .link-btn .ebbtn { margin: 0 8px 0 0 }
.section-02 .text-wrap .link-btn .ebbtn.mainpagebtn { min-width: 150px; padding: 0 18px; height: 55px; line-height: 53px; font-size: 18px; font-weight: normal; border-radius: 10px; color: #ffffff; background: #474e5d; }
.section-02 .text-wrap .link-btn .ebbtn.bg-main { background: linear-gradient(90deg, #ff3535, #df0124); box-shadow: 0 10px 20px rgba(223, 0, 32, .2); }
.section-02 .img-wrap { width: 50%; padding: 115px 0 0 0; text-align: right; }
.section-02 .type-loan .stage { float: right; position: relative; width: 388px; }
.section-02 .type-loan .scene01 { z-index: 0; }
.section-02 .type-loan .scene02 { opacity: 1; z-index: 1; position: absolute; top: 0; left: 0px; width: 100%; height: 545px; overflow: hidden; }
.section-02 .type-loan .scene02 img { position: absolute; top: 100%; left: 0px; }
.section-02 .type-loan .scene03 { opacity: 0; z-index: 2; position: absolute; top: 0px; left: 0px; width: 100%; height: 545px; overflow: hidden; transform-origin: 50% 75%;}
.section-02 .type-loan .scene03 img { position: absolute; top: 20px; left: 0px; }
.section-02 .type-loan.on-scroll .scene02 img { animation: sce02-01-02 700ms forwards;}
.section-02 .type-loan.on-scroll .scene03 { animation: sce02-01-03 700ms 900ms forwards;}
@keyframes sce02-01-02 {
	0% { top: 100%; }
	100% { top: 0%;; }
}
@keyframes sce02-01-03 {
	0% { opacity: 0; transform: scale(0.5); }
	80% { opacity: 1; transform: scale(1.1); }
	100% { opacity: 1; transform: scale(1); }
}
.section-02 .type-deposit .stage { float: left; position: relative; width: 388px; }
.section-02 .type-deposit .scene01 { z-index: 0; }
.section-02 .type-deposit .scene02 { opacity: 0; z-index: 1; position: absolute; top: 0; left: 0px;  }
.section-02 .type-deposit .scene03 { opacity: 0; z-index: 2; position: absolute; top: 0px; left: 0px; }
.section-02 .type-deposit .scene04 { opacity: 1; z-index: 3; position: absolute; top: 100px; left: 0px; width: 100%; height: 445px; overflow: hidden; }
.section-02 .type-deposit .scene04 img { opacity: 0; position: absolute; top: -100px; left: 0px; }
.section-02 .type-deposit.on-scroll .scene02 { animation: sce02-02-02 1000ms 500ms forwards; transform-origin: 50% 65%; }
.section-02 .type-deposit.on-scroll .scene03 { animation: sce02-02-03 1000ms 1500ms forwards; }
.section-02 .type-deposit.on-scroll .scene04 img { animation: sce02-02-04 2000ms 2500ms forwards;}
@keyframes sce02-02-02 {
	0% { opacity: 0; transform: scale(1.1) translateY(10%) }
	60% { opacity: 1; transform: scale(1) translateY(0); }
	70% { opacity: 1; transform: scale(1); }
	80% { opacity: 1; transform: scale(0.8); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes sce02-02-03 {
	0% { opacity: 0; }
	100% { opacity: 1;  }
}
@keyframes sce02-02-04 {
	0% { opacity: 0; transform: translateY(-0px) }
	10% { opacity: 1; transform: translateY(-0px) }
	100% { opacity: 1; transform: translateY(-900px) } /* 231206 접근성수정 */
}

/* Mobile */
.mobile .section-02 { padding: 0 10px;  }
.mobile .section-02 .decoration01 { opacity: 0.1; top: -25%; left: 50%; width: 700px; }
.mobile .section-02 .decoration01 { animation: sce02-011 160000ms infinite linear;}
.mobile .section-02 .decoration02 { opacity: 0.1;  top: 38%; left: 50%; width: 1200px; }
.mobile .section-02 .decoration02 { animation: sce02-021 280000ms infinite linear;}
@keyframes sce02-011 {
	0% { transform: translateX(-80%) rotate(0deg); }
	100% { transform: translateX(-80%) rotate(-360deg) }
}
@keyframes sce02-021 {
	0% { transform: translateX(-15%) rotate(0deg); }
	100% { transform: translateX(-15%) rotate(-360deg) }
}
.mobile .section-02 .type-loan { height: auto;  }
.mobile .section-02 .type-loan .text-wrap { clear: both; }
.mobile .section-02 .type-loan .img-wrap { clear: both; }
.mobile .section-02 .type-deposit { height: auto; }
.mobile .section-02 .type-deposit .text-wrap { clear: both; }
.mobile .section-02 .type-deposit .img-wrap { clear: both; }
.mobile .section-02 .text-wrap { width: 100%; text-align: center; }
.mobile .section-02 .text-wrap .main-copy { padding: 80px 0 0 0; }
.mobile .section-02 .text-wrap .sub-copy { padding: 25px 0 0 0}
.mobile .section-02 .text-wrap .link-btn .ebbtn { margin: 0 3px 0 3px }
.mobile .section-02 .text-wrap .link-btn { padding: 28px 0 0 0;}
.mobile .section-02 .text-wrap .link-btn .ebbtn.mainpagebtn { min-width: 110px; padding: 0 15px; height: 40px; line-height: 38px; font-size: 14px; border-radius: 5px; }
.mobile .section-02 .img-wrap { width: 100%; padding: 40px 0 0px 0; }
.mobile .section-02 .type-loan .stage { float: none; width: 220px; margin: 0 auto; }
.mobile .section-02 .type-loan .scene02 { height: 345px;  }
.mobile .section-02 .type-loan .scene03 { height: 345px;}
.mobile .section-02 .type-deposit .stage { float: none; width: 220px; margin: 0 auto; padding: 0 0 70px 0 }
.mobile .section-02 .type-deposit .scene04 {  top: 60px; height: 245px;  }
.mobile .section-02 .type-deposit .scene04 img {  top: -60px;  }
.mobile .section-02 .type-deposit.on-scroll .scene04 img { animation: sce02-02-042 2000ms 2500ms forwards;}
@keyframes sce02-02-042 {
	0% { opacity: 0; transform: translateY(-0px) }
	10% { opacity: 1; transform: translateY(-0px) }
	100% { opacity: 1; transform: translateY(-520px) } /* 231206 접근성수정 */
}




/*
	3영역
*/
/* PC */
.section-03 { clear: both; position: relative; width: 100%; padding: 80px 0; background: #424556; box-sizing: border-box; }
.section-03 .title-wrap { position: relative; width: 1080px; margin: 0 auto; padding: 10px 0 0 0;  }
.section-03 .title-wrap .section-title { display: inline-block; font-size: 32px; color: #ffffff; vertical-align: middle; } /* 231206 접근성수정 */
.section-03 .pagination { position: absolute; top: 0px; right: 0px; border: solid 1px #ffffff; border-radius: 10px; overflow: hidden; }
.section-03 .pagination ul {}
.section-03 .pagination ul > li { float: left; background: #424556; border-left: solid 1px #ffffff }
.section-03 .pagination ul > li:first-child { border-left: none }
.section-03 .pagination ul > li .ebbtn { width: 160px; height: 54px; color: #ffffff; font-size: 18px; }
.section-03 .pagination ul > li.active { background: #ffffff; }
.section-03 .pagination ul > li.active .ebbtn { color: #424556; }
.section-03 .text-wrap { padding: 130px 0 0 0 }
.section-03 .text-wrap .main-copy { color: #ffffff; }
.section-03 .img-wrap { position: absolute; top: 80px; right: 0px; }
.section-03 .qr-wrap { padding: 50px 0 105px 0; }
.section-03 .qr-wrap dl.qr-box { display: table; width: 480px; padding: 28px; border-radius: 15px; background: #4f5367; color: #ffffff; box-sizing: border-box; }
.section-03 .qr-wrap dl.qr-box > dt { font-size: 24px; display: table-cell; vertical-align: middle; line-height: 1.3 }
.section-03 .qr-wrap dl.qr-box > dd { display: table-cell; text-align: right; vertical-align: middle;}
.section-03 .qr-wrap .ebbtn.mobile-qr-box { display: none; }
.section-03 .qr-wrap .chaiimg { margin-bottom: 80px; }
.section-03 .qr-wrap .text.chai-info { margin-top: -55px; font-size: 28px; color: #fff; }
.section-03 .qr-wrap .text.chai-info > img { display: inline-block; margin-top: -4px; margin-left: 8px; vertical-align: middle; }
.section-03 .qr-wrap .text.chai-info .uline { position: relative; margin-top: -4px; font-weight: 900; }
.section-03 .qr-wrap .text.chai-info .uline:before { content: ''; position: absolute; bottom: 1px; left: 0; width: 100%; height: 1px; background: #fff; }
.section-03 .utility-wrap {  } 
.section-03 .utility-wrap ul.utility-list {}
.section-03 .utility-wrap ul.utility-list > li { display: inline-block; width: 355px; vertical-align: top }
.section-03 .utility-wrap ul.utility-list > li dl.shotcut-box { display: table; width: 100%; }
.section-03 .utility-wrap ul.utility-list > li dl.shotcut-box > dt { display: table-cell; width: 120px; ; }
.section-03 .utility-wrap ul.utility-list > li dl.shotcut-box > dd { display: table-cell; padding: 0 0 0 25px; text-align: left; font-size: 24px; color: #ffffff; vertical-align: middle;}
/* s: 231206 접근성수정 */
.section-03 .arrow-left { z-index: 10; position: absolute; top: 50%; transform: translateY(-50%); left: 80px; width: 62px; height: 114px; background: url('../image/page_main/arrow_left_02.png') no-repeat; background-size: cover; text-indent: -1000px; overflow: hidden; }
.section-03 .arrow-left.swiper-button-disabled { background: url('../image/page_main/arrow_left_02_disabled.png') no-repeat; background-size: cover; }
.section-03 .arrow-right { z-index: 10; position: absolute; top: 50%; transform: translateY(-50%); right: 80px; width: 62px; height: 114px; background: url('../image/page_main/arrow_right_02.png') no-repeat; background-size: cover; text-indent: -1000px; overflow: hidden; }
.section-03 .arrow-right.swiper-button-disabled { background: url('../image/page_main/arrow_right_02_disabled.png') no-repeat; background-size: cover; }
.section-03 .life-box { width: 1080px; margin: 0 auto; position: relative; }
/* e: 231206 접근성수정 */

/* Mobile */
.mobile .section-03 { clear: both; position: relative; width: 100%; padding: 50px 25px; background: #424556;  }
.mobile .section-03 .title-wrap { width: 100%; } /* 231206 접근성수정 */
.mobile .section-03 .title-wrap .section-title { font-size: 22px; } /* 231206 접근성수정 */
.mobile .section-03 .pagination { margin: 15px 0 15px 0; position: relative; top: auto; right: auto; border-radius: 5px; }
.mobile .section-03 .pagination ul { display: flex;}
.mobile .section-03 .pagination ul > li { float: none; flex: 1;  }
.mobile .section-03 .pagination ul > li .ebbtn { width: 100%; height:40px; font-size: 13px; }
.mobile .section-03 .text-wrap { padding: 55px 0 26px 0; text-align: center; }
.mobile .section-03 .img-wrap { position: relative; top: auto; right: auto; text-align: center; }
.mobile .section-03 .img-wrap img { margin: 0 auto; width: 250px; }
.mobile .section-03 .qr-wrap { padding: 15px 0 30px 0; text-align: center; }
.mobile .section-03 .qr-wrap dl.qr-box { display: none; }
.mobile .section-03 .qr-wrap .ebbtn.mobile-qr-box { display: block; font-size: 14px; padding: 12px 19px; border-radius: 10px; background: #4f5367; color: #ffffff; box-sizing: border-box; margin: 0 auto; }
.mobile .section-03 .qr-wrap .chaiimg { width: 260px; margin-bottom: 8px; }
.mobile .section-03 .qr-wrap .text.chai-info { margin-top: 0; font-size: 14px; }
.mobile .section-03 .qr-wrap .text.chai-info > img { margin-top: 0px; margin-left: 5px; width: 12px; }
.mobile .section-03 .qr-wrap .text.chai-info .uline { margin-top: -2px; }
.mobile .section-03 .qr-wrap .text.chai-info .uline:before { height: 1px; }
.mobile .section-03 .utility-wrap ul.utility-list { display: flex; }
.mobile .section-03 .utility-wrap ul.utility-list > li { flex: 1;  }
.mobile .section-03 .utility-wrap ul.utility-list > li dl.shotcut-box { display: block;  }
.mobile .section-03 .utility-wrap ul.utility-list > li dl.shotcut-box > dt { display: block; width: auto; text-align: center; }
.mobile .section-03 .utility-wrap ul.utility-list > li dl.shotcut-box > dt img { width: 62px; }
.mobile .section-03 .utility-wrap ul.utility-list > li dl.shotcut-box > dd { display: block; padding: 18px 0 0 0; text-align: center; font-size: 14px;}
.mobile .section-03 .arrow-left { left: 25px; width: 20px; height: 36px; _display: none; }
.mobile .section-03 .arrow-right { right: 25px; width: 20px; height: 36px; _display: none; }
.mobile .section-03 .life-box { width: 100%; }
/* 20230127 : 차이간편결제 오픈뱅킹으로 변경 및 스타일 수정 | slj */
/* .mobile .section-03 .life-box.chai .img-wrap { margin-top: 80px; }
.mobile .section-03 .life-box.chai .qr-wrap { margin-top: -333px; margin-bottom: 250px; } */

/* .section-03 .arrow-left.swiper-button-disabled { display: none; }
.section-03 .arrow-right.swiper-button-disabled { display: none; } */
/* //20230127 : 차이간편결제 오픈뱅킹으로 변경 및 스타일 수정 | slj */

/* s: 231206 접근성추가 */
.btn-lifeswiper-autoctrl { width: 30px; height: 30px; border-radius: 50%; background: url('../image/page_main/sec03_slide_play.png') no-repeat center / 100%; }
.btn-lifeswiper-autoctrl.autoplay { background: url('../image/page_main/sec03_slide_pause.png') no-repeat center / 100%; }
.section-03 .btn-lifeswiper-autoctrl { margin-left: 20px; }
.mobile .section-03 .btn-lifeswiper-autoctrl { position: absolute; top: 10px; right: 0; }
/* e: 231206 접근성추가 */

/*
	4영역
*/
/* PC */
.section-04 { clear: both; position: relative; width: 100%; padding: 80px 0; background: #f1f1f1; box-sizing: border-box; }
.section-04 .text-wrap { padding: 0 0 45px 0; text-align: center; }
.section-04 .text-wrap .main-logo { }
.section-04 .text-wrap .main-logo .logo { position: relative; overflow: hidden; display: block; width: 150px; margin: 0 auto; border-radius: 35px; box-shadow: 0px 0px 20px rgba(0,0,0, 0.1) }
.section-04 .text-wrap .main-copy { padding: 55px 0 0 0; }
.section-04 .text-wrap .sub-copy { padding: 20px 0 0 0}
.section-04 .qr-wrap { text-align: center; }
.section-04 .qr-wrap ul.qr-list {}
.section-04 .qr-wrap ul.qr-list > li { display: inline-block; padding: 0 24px; box-sizing: border-box; }
.section-04 .qr-wrap dl.qr-box { background: #ffffff; padding: 40px; border-radius: 15px; box-shadow: 0px 0px 20px rgba(0,0,0, 0.01); box-sizing: border-box; }
.section-04 .qr-wrap dl.qr-box > dt { padding: 0 0 33px 0}
.section-04 .qr-wrap dl.qr-box > dd {}

/* Mobile */
.mobile .section-04 { padding: 50px 25px; }
.mobile .section-04 .text-wrap { padding: 0 0 45px 0;  }
.mobile .section-04 .text-wrap .main-logo { }
.mobile .section-04 .text-wrap .main-logo .logo { width: 75px; border-radius: 15px; }
.mobile .section-04 .text-wrap .main-copy { padding: 25px 0 0 0; }
.mobile .section-04 .text-wrap .sub-copy { padding: 15px 0 0 0}
.mobile .section-04 .qr-wrap ul.qr-list > li { padding: 0 5px 20px 5px}
.mobile .section-04 .qr-wrap dl.qr-box {  padding: 15px 0px;  }
.mobile .section-04 .qr-wrap dl.qr-box > dt { padding: 0 0 0 0}
.mobile .section-04 .qr-wrap dl.qr-box > dt img { width: 85%}
.mobile .section-04 .qr-wrap dl.qr-box > dd { display: none; }