@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300&display=swap');

/* Special */
#special {}
#special .visual{height: 70vh; background:url(https://gonylab10.speedgabia.com/sunega/banner/special.jpg) no-repeat 50% 50%; background-size:cover;}

/* #special .visual h1 {left:50%; transform:translateX(-50%);} */
/* #special .visual h1 span {position:absolute; right:11%; font-size:20px; margin-bottom:30px;} */
/* #special .visual h1 strong {font-size:80px; margin:40px 0; } */
#special .visual h1 { left: 50%;margin-left: -120px;top:50%;}
#special .visual h1 span {font-size: 40px;letter-spacing: 5px; font-family: 'IBM Plex Sans KR', sans-serif;}
#special .visual h1 strong { opacity:0; transform:translateY(50%); transition:0.75s; font-size: 20px;}
#special .content { padding-top: 100px; padding-bottom: 200px; }
#special .content .Swiper { width: 100%; margin: 0 auto; padding-top: 150px; margin-top: 100px; position: relative; }	
#special .content .Swiper .swiper-view { width: 100%; margin:0 auto; height:900px; } 
#special .content .Swiper .swiper-container {height:100%; }
#special .content .Swiper .swiper-slide > div {width:100%;height:100%;}
#special .content .Swiper .swiper-slide > div {background-position:50% 50%;background-repeat:no-repeat;background-size:cover;}	
/* #special .content .Swiper .swiper-btn { position:absolute; top: 50%; transform: translateY(-50%); z-index:10; cursor:pointer; } */
#special .content .Swiper .swiper-btn:hover { }
/* #special .content .Swiper .swiper-button-prev { left: -50px; background: url(../images/idx_prev.png) no-repeat left top;} */
/* #special .content .Swiper .swiper-button-next { right: -50px; background: url(../images/idx_next.png) no-repeat left top; } */
/* #special .content .Swiper .swiper-pagination {display:inline-block; width:auto; bottom:4%; left:50%; transform: translateX(-50%); z-index:3;} */
/* #special .content .Swiper .swiper-pagination-bullet { display:inline-block; width:10px; height:10px; background-color: #fff; border-radius:50%;} */
/* #special .content .Swiper .swiper-pagination-bullet-active {background-color:#ccc0ac; border: 1px solid #ccc0ac;  width:18px; border-radius:40%;} */
/* #special .content .Swiper .swiper-btn:hover {opacity:1; text-shadow: none; box-shadow: none; } */
#special .Swipers{overflow:visible;   width: 77%; margin: 0 auto;}
#special .swiper-slide > div {width:100%;height:100%;transition:1s;opacity:0.2;}
#special .swiper-slide-active > div {transition:1s;opacity:1;}

#special .content .Swiper h3 { position: absolute; top: 120px; right: -100px; font-size: 120px;letter-spacing: -1px; font-family: MyLotteRegular; color: rgba(187, 187, 187, 0.2); }

#special .content .Swiper .txt {margin-bottom: 70px;}
#special .content .Swiper .txt p {font-size: 40px; }
#special .content .Swiper .txt h1 {font-size: 70px; font-family: MyLotteRegular; }
#special .content .Swiper .txt h1 span{display: block; margin-top: 50px; font-size: 16px; line-height: 28px;}

#special .content .Swiper .target-room { position: absolute; top: 125px; right: 0; font-family: MyLotteRegular; }
#special .content .Swiper .page { position: absolute; top: 125px; right: 0; }
#special .content .Swiper .page span { display: inline-block; font-family: MyLotteRegular; margin: 0 3px; }
#special .content .Swiper .page span:first-child::after { content: '/'; margin-left: 5px; }

#special .content .Swiper .swiper .detail-btn { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; background-color: rgba(0, 0, 0, 0.1);  border: 1px solid #fff; z-index: 2; border-radius: 10px; cursor: pointer; padding: 7px 15px; transition: color 0.5s, background-color 0.7s; }
#special .content .Swiper .swiper .detail-btn:hover { color: #000; background-color: #fff; }

#special .content .Swiper .desc { margin-top: 50px; display: flex; justify-content: space-around; align-items: flex-start;  }
#special .content .Swiper .desc p { }
#special .content .Swiper .desc p:first-child { font-size: 30px; font-family: MyLotteRegular; }
#special .content .Swiper .desc p:last-child { font-size: 16px; line-height: 2.2em; }


#special .bg-icon { position: absolute; opacity: 0.15; width: 270px; height: 270px; }
#special .bg-icon.bg-icon1 { left: -190px; top: 50px; }
#special .bg-icon.bg-icon2 { right: -180px; bottom: -70px; }
#special .bg-icon.bg-icon3 { left: -170px; bottom: -50px; }
#special .bg-icon.bg-icon4 { right: -250px; top: 280px; }
#special .bg-icon.bg-icon5 { left: -190px; bottom: 70px; }
#special .bg-icon.bg-icon6 { right: -170px; top: 75%; }
#special .bg-icon.bg-icon7 { left: -250px; top: 0; }