
#view3swiper {
	background-color: #ddd; /*background:linear-gradient(#b8b8b8, 10%, #fff);*/
	background: url('./img/sect3_bg.jpg') no-repeat center / cover;
}

.view3swiper.swiper {
	/*position: relative; width: 1900px; height: 650px; border:0px solid blue; margin:0 auto*/
	position: absolute; width: 2000px; height: auto; top: 55%; left: 50%; transform: translate(-50%, -50%); border:0px solid blue;
	padding: 20px 0 70px; text-align: center;
}
/*.view3swiper .swiper-wrapper .swiper-slide { display:flex; align-items:center; justify-content:center; flex-direction: column; }*/
/*.view3swiper .swiper-wrapper .swiper-slide img { width:600px; }*/


/* 네비게이션 변경하기 */
.view3swiper .swiper-button-prev:after, .view3swiper .swiper-button-next:after { content: ''; color:#fff; }
.view3swiper .swiper-button-prev, .view3swiper .swiper-button-next {
	width: 40px; height: 40px; border-radius: 50%; background-color: #fff; color: #141414; opacity: 0.8; border: 1px solid #bbb;
	display: flex; align-items: center; justify-content: center;
	top: 53%; transform: translateY(-50%)
}
.view3swiper .v3s-next { transform: translateX(-670px);  }
.view3swiper .v3s-prev { transform: translateX(670px);   }


/* 페이지네이션 변경하기 */
.view3swiper .swiper-pagination-bullet {
	width:12px; height:12px; border-radius: 10px; 
	transition: all .3s ease; 
}
.view3swiper .swiper-pagination-bullet-active { width:50px; background-color: #59185C }
.view3swiper .swiper-pagination {
	--swiper-pagination-bullet-inactive-color:  #111;/* 색 */
	--swiper-pagination-bullet-inactive-opacity: .2;/* 투명도 */
	--swiper-pagination-bottom:0px;/*하단 위치 높이 변경*/
	--swiper-pagination-bullet-horizontal-gap: 5px;/*불렛간 간격 조정 - 가로*/
	--swiper-pagination-bullet-vertical-gap: 10px;/*불렛간 간격 조정 - 세로*/
}

.view3swiper .title { position: relative; display: inline-block; text-align: center; padding: 0px 0px 50px}
.view3swiper .title .t1 { font-size: 1.3rem; line-height: 1; letter-spacing: -1.5px; }
.view3swiper .title .t2 {
	font-size: 4rem; line-height:1; letter-spacing: -2px; font-weight: 800;
/*
    background: linear-gradient( 90deg, #ff6b6b, #feca57, #C74ACA );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
*/
}

.view3swiper .swiper-slide { letter-spacing: -0.5px;  }

.view3swiper .swiper-slide .img { margin:0 0 15px; filter: brightness(.3); overflow: hidden; box-shadow: 0 0 15px rgba(0,0,0,0.3); }
.view3swiper .swiper-slide .img, .view3swiper .swiper-slide .img img { border-radius:20px; }

.view3swiper .swiper-slide .tt { opacity:0; transform:translateX(50px)  }
.view3swiper .swiper-slide .tt.pno {
	font-size: 0.9rem; color: #141414; margin-bottom: 10px; opacity:0; transform:translateY(50px); font-family: 'Montserrat' , sans-serif;
	letter-spacing: -1px; font-weight: 500; text-align: left; padding-left: 15px;transition: all 0.7s 1.2s ease;
}
.view3swiper .swiper-slide .tt.pno:before {
	position: absolute; content:''; top: 4px; left: 3px; width:5px; height:12px; background-color: #000;
}

.view3swiper .swiper-slide .tt.tt1 { font-size: 1.4rem; font-weight: 600; letter-spacing: -1.5px; color:#CB2118; transition: all 1s 0.2s ease; }
.view3swiper .swiper-slide .tt.tt2 { font-size: 1rem; color:#141414; letter-spacing: -1px; margin-top:10px;  transition: all 1s 0.4s ease; }

.view3swiper .swiper-slide.swiper-slide-active .img { filter: brightness(1);  transition: all 1s 0s ease;  }
.view3swiper .swiper-slide.swiper-slide-active .tt.pno { opacity: 1; transform:translateY(0px);  }
.view3swiper .swiper-slide.swiper-slide-active .tt.tt1 { opacity: 1; transform:translateX(0px);  }
.view3swiper .swiper-slide.swiper-slide-active .tt.tt2 { opacity: 1; transform:translateX(0px);  }


.view3swiper .swiper-slide .img .imgcut {
	position: absolute; display: inline-block; right: 20px; bottom: 10px;
	font-size: 0.75rem; letter-spacing: -0.5px; color: rgba(255,255,255, 0.7); text-shadow: 0 0 5px rgba(0,0,0,0.5);
}


.play-paused {
	position: relative; display: inline-block; font-size:1.4rem; padding: 0 !important; top:2px; left: 25px;
	color: #59185C; cursor: pointer;
}

#view3swiper .line-box {
	position: absolute; width:700px; height: calc(100vh - 120px); background-color: none; border: 0px solid red;
	bottom: 0; left: 50%; transform: translateX(-50%);
}
#view3swiper .line-box .l1, .line-box .l2 { position:absolute; width:1px; height:0%; background-color: #909090;  }
#view3swiper .line-box .l1 { transition: all 3s 0.2s ease; top:0; left: 0;}
#view3swiper .line-box .l2 {  bottom:0; right:0 }

#view3swiper.active .line-box .l1,
#view3swiper.active .line-box .l2 { height:100%; transition: all 3s 0.2s ease; }

#view3swiper .line-box .l1::before, #view3swiper .line-box .l2::before {
	position: absolute; content: ''; width:5px; height:5px; border-radius: 50%; background-color: #000;
	left: 50%; transform: translateX(-50%); opacity: 1;
}

#view3swiper.active .line-box .l1::before { top:100%; }
#view3swiper.active .line-box .l2::before { top:0%; }
#view3swiper.active .line-box .l1::before,
#view3swiper.active .line-box .l2::before { opacity: 0; transition: all 0.1s 2.9s ease; }
