/*
	scroll-top
	
*/

.scroll-top {
	display: none;
	position: fixed;
	bottom: 80px;
	right: 10%;
	z-index: 99;
	border: none;
	outline: none;
	color: white;
	cursor: pointer;
	width: 60px;
	height: 60px;
	background: url(../images/common/top_button.png);
}

.scroll-top.active {
	display: block;	
}

/*
	
	slide

*/

/*--- 'Swiper' Carousel ---*/

.swiper,
.swiper-slide img {
	width: 100%;
}

.swiper-pc > .swiper-wrapper {height:100%}
.swiper-mobile > .swiper-wrapper {height:100%}
.swiper-slide video {
	height: 100%;
    width: 100vh;
    min-width: 100%;
	object-fit: cover;
}
.swiper-mobile .swiper-slide video {
	display: none;
}

.swiper-wrapper {
	height: auto;
}

/*--- Previous & Next Buttons ---*/

.swiper-button-prev:after,
.swiper-button-next:after {
	font-size: 26px;
	font-weight: bold;
	color: #fff;
	transition: 0.3s;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
	opacity: 0.7;
}

.swiper-tools .swiper-button-prev,
.swiper-tools .swiper-button-next {
    text-align: left;
    bottom: -7px;
    width: auto;
    top: unset;
    --swiper-navigation-size: 20px;
}

.swiper-tools .swiper-button-prev {
	left: 215px;
	padding: 0 15px;
    right: unset;
}

.swiper-tools .swiper-button-next {
	left: 245px;
	padding: 0 15px;
    right: unset;
}

.swiper-tools .swiper-button-prev:after,
.swiper-tools .swiper-button-next:after {
	font-size: 12px;
}


/*--- Pagination ---*/

.swiper-pagination-bullets {
	bottom: 18px;
}

.swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: transparent;
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background-color: #fff;
}

.swiper-tools .swiper-pagination {
	text-align: left;
    bottom: -6px;
    left: 180px;
    width: auto;
}

.swiper-pagination-fraction {
	color: rgba(255, 255, 255, 0.5);
}

.swiper-pagination-current {
	color: #fff;
}

.swiper-text {
	position: absolute;
	width: 100%;
    top: 45%;
    transform: translateY(-50%);
    z-index: 1;
    color: #fff;
}

.swiper-text p {
	font-family: 'NanumSquare';
	font-weight: 400;
	font-size: 22px;
	line-height: 32px;
}

.swiper-text h1 {
	color: #fff;
    margin-top: 2.3%;
    font-size: 4.125rem;
    line-height: 5.5rem;
    font-weight: 700;
}

.swiper-container {
	height: 100vh;
}

.progress {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	height: 5px;
	transition: height 0.3s;
	background: rgba(255, 255, 255, 0.1019607843);
	display: flex;
	width: 100%;
	z-index: 10;
	margin: 0;
  }
  
  .nowTime {
	width: 0%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	transition: width 0.3s linear;
  }

.sub-banner {
	margin-top: 90px; 
	width: 100%; 
	height: 400px;
	display: flex; 
	align-items: center; 
	justify-content: center;
}

.sub-banner.banner-company {
	background: url(../images/company/sub_banner_01.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.sub-banner.banner-product {
	background: url(../images/product/sub_banner_02.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.sub-banner.banner-people {
	background: url(../images/people/sub_banner_03.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.sub-banner.banner-invest {
	background: url(../images/invest/sub_banner_04.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.sub-banner.banner-family {
	background: url(../images/family/sub_banner_05.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.sub-banner.banner-helper {
	background: url(../images/helper/sub_banner_06.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.sub-banner p {
	color: #fff;
	font-size: 3.125rem;
}

.sub-swiper {
	overflow: hidden;
}

.sub-swiper .active {
	background: #000;
	color: #fff;
}

.sub-swiper .swiper-button-prev:after, .sub-swiper .swiper-button-next:after {
	color: #000;
}

.sub-swiper .swiper-button-prev, .sub-swiper .swiper-container-rtl .swiper-button-next{
	left: -30px;
}

.sub-swiper .swiper-button-next, .sub-swiper .swiper-container-rtl .swiper-button-prev{
	right: -30px;
}

/*--- Progress Bar ---*/

.carousel-progress {
	width: 100%;
	max-width: 150px;
	height: 2px;
	background-color: rgba(255, 255, 255, 0.5);
	z-index: 1;
	margin-top: 7%;
}

.swiper-progress {
    height: 2px;
    background-color: #fff;
	animation-name: progress;
	/*2022-08-05 27�ʷ� ����*/
	animation-duration: 27s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	margin: 0;
}

@keyframes progress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

/*--- Button ---*/

.print-button {
    position: absolute;
    right: 0;
    top: 3.75rem;
}

.board-button {
	text-align: center;
	margin: 3.75rem 0 9rem;
}
	
.board-button .pc {
	display: inline-block;
}

.board-button .mobile {
	display: none;
}

.board-button img {
	width: auto;
}

.board-button .pc div {
	border: 1px solid #666;
	color: #1a1a1a;
	font-size: 18px;
	font-weight: 400;
	display: inline-block;
	height: 50px;
	width: 146px;
	line-height: 50px;
}

.board-button .mobile div {
	border: 1px solid #666;
	color: #1a1a1a;
	font-size: 1.75rem;
	font-weight: 400;
	display: inline-block;
	height: 5rem;
	width: 16rem;
	line-height: 5rem;
}

.map-button-wrap {
	position: absolute;
	right: 0;
	bottom: 0;
}

input[type="radio"]{
    display:none;
}

input[type="radio"] + label
{
	width: 20px;
	height: 20px;
    background: url(../images/common/radio_btn_off.png) no-repeat;
    vertical-align: middle;
}

input[type="radio"]:checked + label
{
	width: 20px;
	height: 20px;
    background: url(../images/common/radio_btn_on.png) no-repeat;
    vertical-align: middle;
}

.popup-close {
	position: absolute;
	top: 3%;
	right: 5%;
}

.popup-message {
	position: absolute;
	top: 10%;
	left: 4%;
	right: 4%;
	pointer-events: none;
	animation-name: hide;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes hide {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}


/* 2024.09.23 - 김지안 추가 */
	.swiper-text {
		height: 260px;
	}
	.swiper-text .container {
		height: 100%;
	}
	.swiper-text .swiper-tools {
		position: absolute;
		bottom: -30px;
		width: 100%;
	}

	@media screen and (max-width: 1023px) {
		.swiper-text {
			height: 400px;
		}
	}

	@media (max-width:575px) {
		.swiper-text {
			height: 280px;
		}
	}