@charset "utf-8";
@import url('/share/css/font/Paperlogy.css');
@import url('/share/css/font/suite.css');
@import url('/share/css/font/jalnan.css');
@import url('/share/css/font/EliceDXNeolli.css');
@import url('/share/css/font/establishRetrosans.css');
@import url('/share/css/swiper.min.css');

:root {
	--krds-contents-wrap-size: 1320px;
	--font-family-base: 'Pretendard GOV', 'Malgun Gothic', '맑은고딕', sans-serif;
	--font-paper: 'Paperlogy', sans-serif;
	--font-jalnan: 'Jalnan', sans-serif;
	--font-jalnan-go: 'JalnanGothic', sans-serif;
	--font-elicedx: 'EliceDXNeolli', sans-serif;
	--font-estab: 'establishRetrosans', sans-serif;
}

.krds-header .btn-navi {color: var(--krds-light-color-text-subtle);}
.krds-header .hd-main {display: flex; align-items: center; justify-content: space-between;}

.krds-footer {background: var(--krds-light-color-surface-gray-subtler);}
.krds-footer .logo {width: 30rem}
.krds-footer .f-con .f-info {font-size: 1.6rem;}
.krds-footer .f-btm .f-btm-text .f-menu {font-size: 1.6rem;}
.krds-footer .f-con .f-link {width: auto;}
.krds-footer .f-con .f-link .link-sns a {border: 1px solid var(--krds-light-color-border-gray-light); background-color: transparent;}
.krds-footer .f-btm .f-btm-text .f-menu .point {color: inherit; font-weight: 400;}

.control {position: absolute; z-index: 1; top: 0.9rem; right: var(--krds-contents-padding-x); display: flex; align-items: center; gap: 0.5rem;}
.control [class*="-btn"] {width: 3.5rem; height: 3.5rem; border-radius: 3.5rem; border: 1px solid #ddd; background-repeat: no-repeat; background-position: top 0.1rem left 0.1rem; background-size: cover;}
.control .prev-btn {background-image: url(../img/main/ico_main_btn_prev01.svg);}
.control .play-btn {background-image: url(../img/main/ico_main_btn_play01.svg); background-position: center;}
.control .play-btn.pause {background-image: url(../img/main/ico_main_btn_pause01.svg); background-position: top 0.1rem left 0.1rem;}
.control .next-btn {background-image: url(../img/main/ico_main_btn_next01.svg);}
.control .more-btn {background-color: #F5F5F5; background-image:url(../img/main/ico_main_plus01.svg); border-color: #F5F5F5;}

#main-promise {padding-top: 6rem; padding-bottom: 6rem; --img-width: 61rem; --ps-gap: 10rem;}
#main-promise .promise-swiper {position: relative;}
#main-promise .swiper-slide {position: relative; display: flex; align-items: stretch; gap: var(--ps-gap); background: #fff;}
#main-promise .swiper-slide::after {content:''; position: absolute; z-index: -1; top: 0; left: 100%; width: 5rem; height: 100%; background: #fff;}
#main-promise .swiper-slide .img {flex-shrink: 0; width: var(--img-width); border-radius: 2.8rem; overflow: hidden;}
#main-promise .swiper-slide .img img {display: block;	width: 100%; height: 100%; object-fit: cover;}
#main-promise .swiper-slide .txt {flex-grow: 1; position: relative; padding-top: 13.8rem;}
#main-promise .swiper-slide .txt::before {content:''; position: absolute; z-index: -1; text-indent: -9999px; bottom: 0; right: 0; width: 30.8rem; height: 21.6rem; background-repeat: no-repeat; background-position: bottom right; background-size: 100%;}
#main-promise .swiper-slide .txt.one::before {background-image: url(../img/main/ico_promise_slide_deco01.svg);}
#main-promise .swiper-slide .txt.two::before {background-image: url(../img/main/ico_promise_slide_deco02.svg);}
#main-promise .swiper-slide .txt.three::before {background-image: url(../img/main/ico_promise_slide_deco03.svg);}
#main-promise .swiper-slide .txt.four::before {background-image: url(../img/main/ico_promise_slide_deco04.svg);}
#main-promise .swiper-slide .txt.five::before {background-image: url(../img/main/ico_promise_slide_deco05.svg);}
#main-promise .swiper-slide .txt .tit {font-family: var(--font-elicedx); font-size: 3.6rem; font-weight: 700;}
#main-promise .swiper-slide .txt .tit strong {background: linear-gradient(90deg, #027C72 0%, #1137CE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
#main-promise .swiper-slide .txt .subt {margin-top: 1.2rem; font-size: 1.9rem; font-weight: 500; color: #333;}
#main-promise .sw-top-wrap {position: absolute; z-index: 1; top: 5.6rem; right: 0; display: flex; align-items: center; justify-content: space-between; width: calc(100% - (var(--img-width) + var(--ps-gap)));}
#main-promise .sw-top-wrap .tit {font-family: var(--font-elicedx); padding-left: 5rem; font-size: 2.8rem; font-weight: 500; background: url(../img/main/ico_promise_tit_deco01.svg) no-repeat left center;}
#main-promise .sw-top-wrap .control {position: static;}
#main-promise .sw-top-wrap .control > div {display: flex; align-items: center; gap: 2rem; background: #F5F5F5; border-radius: 4rem; padding: 0 1rem;}
#main-promise .sw-top-wrap .control > div button {position: relative; width: 4.4rem; height: 4.4rem; background-repeat: no-repeat; background-position: center; border: 0; border-radius: 0;}
#main-promise .sw-top-wrap .control > div button.prev-btn {background-image: url(../img/main/ico_promise_prev01.svg);}
#main-promise .sw-top-wrap .control > div button.prev-btn.swiper-button-disabled {background-image: url(../img/main/ico_promise_prev02.svg);}
#main-promise .sw-top-wrap .control > div button.next-btn {background-image: url(../img/main/ico_promise_next01.svg);}
#main-promise .sw-top-wrap .control > div button.next-btn.swiper-button-disabled {background-image: url(../img/main/ico_promise_next02.svg);}
#main-promise .sw-top-wrap .control .play-btn {width: 4.4rem; height: 4.4rem; background: #F5F5F5 url(../img/main/ico_main_btn_play01.svg) no-repeat center/cover; border: 0;}
#main-promise .sw-top-wrap .control .play-btn.pause {background-image: url(../img/main/ico_promise_pause01.svg)}
#main-promise .sw-top-wrap .swiper-pagination {position: static; width: auto; color: var(--krds-light-color-text-subtle);}
#main-promise .sw-top-wrap .swiper-pagination .swiper-pagination-current {font-weight: 700;}
#main-promise .sw-top-wrap .swiper-pagination .swiper-pagination-total {color: var(--krds-light-color-text-subtle)}

#main-promise .go-promise {margin-top: 4rem; width: 100%;}
#main-promise .go-promise a {display: inline-block; font-size: 1.9rem; padding: 2rem 3rem; border-bottom:  1px solid #ddd; background: url(../img/main/ico_gopromise01.svg) no-repeat left center, url(../img/main/ico_gopromise02.svg) no-repeat right center;}

/********************************************************************************** 반응형*********************************************************************/
@media (max-width: 1400px) {
	#main-promise {--img-width: 55rem; --ps-gap: 5rem;}
	#main-promise .sw-top-wrap {top: 4rem; flex-wrap: wrap;}
}

@media (max-width: 1025px) {

	#main-promise {padding-top: 3rem; padding-bottom: 11rem;}
	#main-promise .swiper-slide {flex-direction: column; align-items: flex-start; gap: 8.2rem; padding-bottom: 2rem;}
	#main-promise .swiper-slide::after {display: none;}
	#main-promise .swiper-slide .img {width: 100%; height: 40rem;}
	#main-promise .swiper-slide .txt {width: 100%; padding-top: 0;}
	#main-promise .swiper-slide .txt .tit {word-break: keep-all;}
	#main-promise .swiper-slide .txt .tit strong {display: inline;}
	#main-promise .sw-top-wrap {position: static;}
	#main-promise .sw-top-wrap .tit {position: absolute; z-index: 1; top: 42rem; left: 0; width: 100%;}
	#main-promise .sw-top-wrap .control {position: absolute; z-index: 1; top: auto;	 bottom: -8rem; right: 0; width: 100%; height: 4.4rem; justify-content: flex-end;}
}

@media (max-width: 768px) {
	:root {
		--krds-contents-padding-x: 12px;
	}
	.krds-header .header-con .logo,
	.krds-footer .logo {width: 25rem}
	.krds-header .header-con .logo strong {display: none;}

	.krds-footer > .inner {gap: 3rem; padding: 3rem 2rem;}
	.krds-footer .f-btm {flex-direction: column; align-items: flex-start; justify-content: flex-start;	}
	.krds-footer .f-btm .f-copy {text-align: left;}
	.krds-footer .f-con .f-link .link-go .krds-btn.text .svg-icon {margin-bottom: -.6rem;}
	
	.control {top: 1.1rem; right: 2rem; left: auto; justify-content: flex-end;}
	.control [class*="-btn"] {width: 4.3rem; height: 4.3rem;}
	
	#main-promise .swiper-slide {gap: 7.8rem;}
	#main-promise .swiper-slide .img {height: 38.4rem; border-radius: 2.6rem;}
	#main-promise .swiper-slide .txt {padding-left: 2rem; padding-right: 2rem;}
	#main-promise .swiper-slide .txt::before {left: 0; bottom: -13.7rem; width: 100%; height: 40rem; background-color: #fff; background-size: 50%; background-position: bottom 3.5rem right;}
	#main-promise .swiper-slide .txt.one::before {background-size: 60%;}
	#main-promise .sw-top-wrap .tit {top: 40.3rem; left: 2rem; width: auto; padding-left: 4.8rem; background-size: auto 100%;} 
	#main-promise .swiper-slide .txt .tit {word-break: keep-all; white-space: wrap;}
	#main-promise .sw-top-wrap .control {gap: 1rem; right: 2rem; width: auto;}
	#main-promise .go-promise {margin-top: 2rem;}
	#main-promise .go-promise a {width: 23rem; padding: 1.2rem 3rem;}
}

@media (max-width: 480px) {
	.control {top: 6.7rem; left: 0; width: 100%; right: auto; justify-content: center;}
}