.visual-sec {margin-top:-92px}
.visual-sec .txt-box  {
	position: absolute;
	width: 86%;
	left:7%;
	top:37%;
 	box-sizing: border-box;
 	z-index: 10;
}
.visual-sec .txt-box > h3  {
	color: #fff;
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.4;
	word-break: keep-all;
 	opacity: 0;
	transition: 1s 0.2s;
}
.visual-sec .txt-box > p  {
		color: #fff;
		margin-top:10px;
		font-size: 2rem;
		transform: translateY(20px);
		opacity: 0;
		font-weight:300; 
		word-break: keep-all;
		transition: 1s 0.4s;
}
.visual-sec .swiper-slide-active .txt-box > h3,
.visual-sec .swiper-slide-active .txt-box > p  {
	transform: translateY(0);
	opacity: 1;
}

.visual-sec .img-box  {
		display: block;
		width: 100%;
		height: 100vh;
		overflow: hidden;
}
.visual-sec img  {
	transform: scale(1.05);
	transition: 1.5s 0.1s;
}
.visual-sec .swiper-slide-active img  {
	transform: scale(1.0);
}
.visual-sec .all-box  {
	position: absolute;
	display: inline-flex;
	width: 86%;
	left:7%;
	height: 25px;
 	bottom:10%;
  	box-sizing: border-box;
    font-size:1.3rem; 
	z-index: 20; 
 	font-weight:400;
	letter-spacing:3px;
	line-height:1;
}
.visual-sec .progress-box  {
	position: relative;
	width: 170px;
	height: 50px;
	z-index: 11;
}
.autoplay-progress  {
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10;
	width: 100px;
	height: 3px;
	background-color: rgba(0, 0, 0, 0.1);
}

.autoplay-progress svg  {
	--progress: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
 	stroke-width: 4px;
	stroke: #fff;
	fill: none;
	stroke-dashoffset: calc(100 * (1 - var(--progress)));
	stroke-dasharray: 100;
}


.visual-sec .swiper-pagination  {
	display: flex;
	color: #fff;
	justify-content: space-between;
	position: static;
	text-align: left;
}
.visual-sec .swiper-pagination span {color:#fff}
.visual-sec .arrow-box  {
	position: relative;
	width: 80px;
	height: 50px;
}

.visual-sec .swiper-button-next,
.visual-sec .swiper-button-prev  {
	width: 21px;
	height: 21px;
	top: 0;
	margin-top: 0;
	background: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-left-fff.svg) no-repeat center / 100%;
}

.visual-sec .swiper-button-next  {
	background-image: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-right-fff.svg);
}
.visual-sec .swiper-button-next::after,
.visual-sec .swiper-button-prev::after  {
	font-size: 0;
}

  

.visual-sec {position:relative}
.visual-sec .quick {position:absolute;bottom:0;right:0;z-index:999; padding:0 5%; backdrop-filter: blur(10px);  background: rgba(255, 255, 255, 0.2);}
.visual-sec .quick ul {display:flex; }
.visual-sec .quick li {font-size:1.7em;display:flex; align-items:center; padding:30px 0; white-space:nowrap; }
 .visual-sec .quick li:last-child {padding-left:40px} 

.visual-sec .quick i {color:#fff;border-radius:50%;border:2px solid #fff;box-sizing:border-box;padding:15px;}
.visual-sec .quick p {color:#fff;margin-left:10px}

@media(max-width:1400px){
 		.visual-sec .quick {display:none}
  
}


@media(max-width:959px){
		.visual-sec .txt-box {width:92%; left:4%;}
		.visual-sec .txt-box > h3 {font-size:3em}
		.visual-sec .txt-box > p {font-size:1.1em; letter-spacing:0}
		.visual-sec .all-box  { width:90%; left:5%; }
 

}

 
.more {font-size:1.2em;display:inline-block;margin-top:10px;}

.main .tit {font-size:3em; letter-spacing:-1px; font-weight:700}
.product .inner {display:flex; padding:100px 0; max-width:1530px;}
.product .titbox {width:25%;}
.product .txtbox {width:75%; }
.product .txtbox ul {width:100%; display:flex; align-items:flex-start; flex-wrap:wrap; gap:2%; justify-content:center}
.product .txtbox ul li {width:32%}
/* .product .txtbox ul li:nth-child(2) {margin-top:50px}
.product .txtbox ul li:nth-child(5) {margin-top:50px}
 */
 .product .txtbox ul li:nth-child(n+4) {margin-top:50px}

 .product .txtbox li {position:relative;box-shadow:0 0 15px rgba(0,0,0,0.1)}
.product .txtbox .imgbox {width:100%; height:230px; background-size:cover !important}
.product .txtbox li p {padding:25px 30px; font-size:1.4em; box-sizing:border-box;}
.product .txtbox li i {background:linear-gradient(135deg,  #ffd379 0%,#f7b01e 70%,#f7a600 100%);
width:60px; line-height:60px;  text-align:center;  color:#fff; position:absolute; right:0; top:0; font-size:1.8em;cursor:pointer}

/* Flashing */
.product .txtbox li:hover {}
.product .txtbox li:hover img  {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash  {
	0%  {
		opacity: .4;
	}
	100%  {
		opacity: 1;
	}
}
@keyframes flash  {
	0%  {
		opacity: .4;
	}
	100%  {
		opacity: 1;
	}
}


.facility .inner {display:flex;  max-width:1530px;}

.facility .titbox {width:25%}
.facility .txtbox {display:flex;width:75%}
.facility ul {display:flex;}
.facility ul li  {
	width: 50%;
	height: 330px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	z-index: 1;
	cursor:pointer
}
.facility ul li:nth-of-type(1)  {
background:  url('/common/img/main_fc1.png')no-repeat center center, rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-blend-mode:multiply;
}
.facility ul li:nth-of-type(2)  {
background:  url('/common/img/main_fc2.png')no-repeat center center, rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-blend-mode:multiply;
}
.facility ul li:nth-of-type(3)  {
background:  url('/common/img/pd1.jpg')no-repeat center center, rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-blend-mode:multiply;
}
.facility ul li:before  {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: -1;
  background:linear-gradient(144deg, rgb(247 166 0 / 60%) 0%, rgb(43 138 142) 100%);
  opacity: 0;
  transition: 0.5s;
}
.facility ul li .txt_area  {
  width: 100%;
  text-align: center;
  margin-top: 50px;
  padding: 0 10px;
  transition: 0.5s;
}
.facility ul li .txt_area strong  {
  display: block;
  font-size: 40px;
  letter-spacing: 0em;
  line-height: 1;
  word-break: keep-all;
  word-wrap: break-word;
  line-height: 1.4;
  color: #fff;
  font-weight: 600;
}
.facility ul li .txt_area p  {
  font-size: 20px;
  letter-spacing: -0.03em;
   line-height: 1.75rem;
  word-break: keep-all;
  word-wrap: break-word;
  color: #fff;
  font-weight: 400;
   opacity: 0;
  transform: translateY(40px);
  transition: 0.5s;
}
.facility ul li .txt_area .btn  {
margin-top: 24px;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.5s, transform 0.5s;
}

.facility ul li:hover:before  {
	top: 0;
	opacity: 1;
}
.facility ul li:hover .txt_area  {
	margin-top: 0;
}
.facility ul li:hover .txt_area p  {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}
.facility ul li:hover .txt_area .btn  {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}

 
.thumb {margin-top:5%;background:#f9f9f9;padding:5% 0}
.thumb .inner {display:flex;  max-width:1400px; }
.thumb .iconbox {width:35%; display:flex;flex-wrap: wrap;}
.thumb .iconbox li {width:50%; box-sizing:border-box; background:linear-gradient(135deg,  #a7cfd0 0%,#42979b 70%,#2b8a8e 100%);linear-gradient(135deg,  #2b8a8e 0%,#42979b 70%,#a7cfd0 100%);display: flex;    flex-direction: column;    align-items: center;    justify-content: center;font-size:1.4em;border-right:1px solid #eee;border-bottom:1px solid #eee;cursor:pointer}
.thumb .iconbox li:nth-child(2n) {border-right:0;}
.thumb .iconbox li:nth-child(3) {border-bottom:0}
.thumb .iconbox li:last-child {border-bottom:0}
.thumb .iconbox li:hover {  background:#fff }

.thumb .iconbox i {font-size:2.5em;margin-bottom:10px;color:#fff;padding:10px;border-radius:10px;}
.thumb .iconbox p {font-weight:600;color:#fff}
.thumb .iconbox li:hover i {color:#2b8a8e}
.thumb .iconbox li:hover p {color:#2b8a8e}

.thumb .map {width:65%; padding-left:50px; margin-left:auto}
.thumb .map .titbox {}
.thumb .map h5 {font-size:2.8em;font-weight:700;}
.thumb .map p {margin:10px 0;font-size:1.1em;color:#555}
.thumb .map iframe {width:100%;height:350px}



@media(max-width:1530px){

	.product .inner {  padding:70px 4% }
	.facility .inner { padding:70px 4%; padding-top:0}

}

 @media(max-width:1400px){

	.thumb .inner {padding:0 4%; }


}

@media(max-width:959px){
       

		.product .inner {flex-wrap:wrap}
		.product .titbox {width:100%; text-align:Center}
		.product .txtbox {width:100%;  margin-top:30px}
		.product .txtbox ul li {width:49%}
		.product .txtbox ul li:nth-child(2) {margin-top:0}
		.product .txtbox ul li:nth-child(n+3) {margin-top:40px}

		.facility .inner {flex-wrap:wrap}

		.facility .titbox {width:100%; text-align:center}
		.facility .txtbox { width:100%; margin-top:30px}
		.facility ul li .txt_area strong {font-size:2em; line-height:1.2}

		.thumb .inner  {flex-wrap:wrap}
		.thumb .iconbox {width:100%}
		.thumb .iconbox li {padding:30px; font-size:1.2em;  }

		.thumb .map {width:100%; padding-left:0;  margin-top:50px; text-align:center }

}