@charset "utf-8";
@import url('/share/css/swiper-bundle.min.css');
@import url('/share/css/font/Ttangsbudaejjigae.css');

body {font-size: 1.6rem; line-height: 1.5;}

#search {height: 48.4rem; padding-top: 12rem; text-align: center; background: url('../img/main/bg_search01.png') no-repeat left top/auto 100%, url('../img/main/bg_search02.png') no-repeat right top/auto 100%;}
#search h3 {font-size: 5rem; font-weight: 500; font-family: 'Ttangsbudaejjigae';}
#search h3 strong {background: linear-gradient(90deg, #F85827 0%, #172192 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#search .sc-form {position: relative; margin: 9rem auto 0; width: 65.6rem;}
#search .sc-form::before {content: ''; position: absolute; z-index: 1; left: 1.2rem; bottom: 0; width: 10.3rem; height: 8.8rem; background: url('../img/main/ico_photo_search01.png') no-repeat 0 0/100%;}
#search .sc-form::after {content: ''; position: absolute; z-index: 1; right: 8.5rem; top: -7.5rem; width: 14rem; height: 7.5rem; background: url('../img/main/ico_photo_search02.png') no-repeat 0 0/100%;}
#search .sc-box {display: flex; position: relative; border-radius: 10rem; overflow: hidden; box-shadow: var(--krds-shadow3); border: 3px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(-90deg, #3C236D, #2078CA); background-origin: border-box; background-clip: content-box, border-box;}
#search .sc-box input.search {flex-grow: 1; min-width: 0; height: 6.6rem; padding-left: 12rem; border: 0; font-size: 1.8rem; font-weight: 700; color: var(--krds-light-color-text-subtle);}
#search .sc-box input.search::placeholder {font-size: 1.8rem; font-weight: 700; color: var(--krds-light-color-text-subtle);}
#search .sc-box .search-btn {display: block; width: 7.8rem; height: 6.6rem; text-indent: -9999px; background: url('../img/main/ico_search_btn.svg') no-repeat center;}

#photo-roll {margin-top: 6rem; padding-bottom: 6rem;}
#photo-roll .inner {position: relative;}
#photo-roll .swiper-slide {opacity: 0.2; transition: var(--krds-transition-fade);}
#photo-roll .swiper-slide a {display: block; position: relative; border-radius: 2.4rem; overflow: hidden;}
#photo-roll .swiper-slide a .img {position: relative;}
#photo-roll .swiper-slide a .img::after {content: ''; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; box-shadow: 0 0 36.058px 0 rgba(33, 75, 105, 0.70) inset;}
#photo-roll .swiper-slide a .tit {position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; padding: 5rem 2.6rem 2.6rem; font-size: 2rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, rgba(5, 12, 27, 0.00) 10.38%, #050C1B 100%); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-shadow: 0 0 3px rgba(0,0,0,0.8);}
#photo-roll .swiper-slide a::before {content: ''; position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(5, 12, 27, 0.49) 0%, rgba(5, 12, 27, 0.70) 100%); opacity: 0; transition: var(--krds-transition-fade); pointer-events: none;}
#photo-roll .swiper-slide a::after {content: '보러가기'; position: absolute; z-index: 2; left: 50%; top: 50%; padding-top: 7rem; font-size: 2rem; font-weight: 700; color: #fff; transform: translate(-50%, -50%); background: url('../img/main/ico_photo_more.svg') no-repeat center top; opacity: 0; transition: var(--krds-transition-fade); pointer-events: none;}
#photo-roll .swiper-slide a:hover,
#photo-roll .swiper-slide a:focus {box-shadow: 4px 4px 20px 0 rgba(5,12,27,0.3);}
#photo-roll .swiper-slide a:hover::before,
#photo-roll .swiper-slide a:focus::before {opacity: 0.7;}
#photo-roll .swiper-slide a:hover::after,
#photo-roll .swiper-slide a:focus::after {opacity: 1;}
#photo-roll .swiper-slide.swiper-slide-active {opacity: 1;}
#photo-roll .swiper-slide.swiper-slide-prev {opacity: 1;}
#photo-roll .swiper-slide.swiper-slide-next {opacity: 1;}
#photo-roll .pt-control {display: flex; align-items: center; gap: 15px; position: absolute; z-index: 1; right: 24px; top: -5.8rem;}
#photo-roll .pt-control .pt-current {position: relative; width: 11rem; flex-shrink: 0; margin-right: 25px;}
#photo-roll .pt-control .pt-current .autoplay-progress {position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 2px; background: #c2c2c2;}
#photo-roll .pt-control .pt-current .autoplay-progress span {display: block; height: 2px; background: #000;}
#photo-roll .pt-control .swiper-pagination {position: static; display: flex; justify-content: space-between; font-size: 1.7rem; color: #777;}
#photo-roll .pt-control .swiper-pagination .swiper-pagination-current {color: #222; font-weight: 700;}
#photo-roll .pt-control button {flex-shrink: 0; width: 24px; height: 24px;}
#photo-roll .pt-control button.prev-btn {background-image: url(../img/main/ico_photo_prev.svg);}
#photo-roll .pt-control button.next-btn {background-image: url(../img/main/ico_photo_next.svg);}
#photo-roll .pt-control button.play-btn {width: 30px; height: 30px; border-radius: 50%; background-color: #222; background-repeat: no-repeat; background-position: center;}
#photo-roll .pt-control button.play-btn.pause {background-image: url(../img/main/ico_pz_pause.svg);}
#photo-roll .pt-control button.play-btn.play {background-image: url(../img/main/ico_pz_play.svg);}


/********************************************************************************** 반응형*********************************************************************/
@media (max-width: 1547px) {
}

@media (max-width: 1199px) {
	#search {background-size: auto 50%;}
}

@media (max-width: 1023px) {
}


@media (max-width: 767px) {	
	#contents {min-height: 0;}
	#search {padding: 9rem 16px 0; height: 35rem; background-size: auto 94px;}
	#search h3 {font-size: 2.4rem;}
	#search .sc-form {width: 100%; margin: 7rem auto 0;}
	#search .sc-form::before {left: 0; width: 74px; height: 65px;}
	#search .sc-form::after {right: 44px; top: -37px; width: 70px; height: 38px;}
	#search .sc-box input.search {padding-left: 70px;}
	#search .sc-box .search-btn {background-size: 20px;}
	
	#photo-roll {margin-top: 40px;}
	#photo-roll .inner {padding-left: 36px; padding-right: 36px;}
	#photo-roll .pt-control {top: -40px; right: 50%; transform: translateX(50%);}
	#photo-roll .pt-control .swiper-pagination {font-size: 1.6rem;}
	#photo-roll .pt-control .pt-current {width: 98px; margin-right: 5px;}
	#photo-roll .pt-control button {width: 16px; height: 16px; background-size: 100%;}
	#photo-roll .pt-control button.play-btn {width: 20px; height: 20px; background-size: 16px;}
	#photo-roll .swiper-slide.swiper-slide-prev {opacity: 0.2;}
	#photo-roll .swiper-slide.swiper-slide-next {opacity: 0.2;}
	
}


@media (max-width: 359px){
}