@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nanum+Myeongjo&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&family=Song+Myung&family=Teko:wght@300..700&family=Tektur:wght@400..900&display=swap');
#special4 .swiper-slide {
  overflow: hidden;
/*  backface-visibility: hidden;*/
/*  -webkit-backface-visibility: hidden;*/
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#special4 .swiper {
    position:relative;
    width: 100%;
    height: 100vh;
    float:left;
    transition:opacity .6s ease, transform .3s ease;
}

#special4 .swiper .special3-prev,
#special4 .swiper .special3-next { top: 60%; }
#special4 .swiper .special3-prev::after, #special4 .swiper .special3-next::after { color:#fff }
#special4 .swiper:hover .special3-prev,
#special4 .swiper:hover .special3-next {
    opacity:1;
    visibility:visible;
}
#special4 .swiper:hover .special3-prev { transform:translateX(100px);}
#special4 .swiper:hover .special3-next { transform:translateX(-200px);}


#special4 .swiper.loading { opacity:0; visibility:hidden; }

#special4 .swiper-slide .slide-bgimg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-position:center;
    background-size:cover;
    /*filter: brightness(0.4);*/
}
#special4 .swiper-slide .entity-img { display:none; }

#special4 .swiper-slide .content .cont-left {
    border-top-right-radius:44px; border-bottom-left-radius:44px; overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,0.5);
    width: 600px; transition: 0.5s -0.1s ease;

}

#special4 .swiper-slide .content .cont-right { width: 500px; margin-left: 50px; overflow: hidden; }
#special4 .swiper-slide .content {
    position:absolute;
    display: flex; width: 1100px; justify-content: center; align-items: center;
    top:58%;
    left:48%;
    transform: translate(-50%, -50%);
    color:#fff; border: 0px solid red;
}
#special4  .content > div { text-align: left }
#special4 .swiper-slide .content .title-eng {
    text-transform:uppercase; letter-spacing:-2px; font-family:"Nanum Myeongjo", serif;
    font-size:2.4rem;
    font-weight:400;
    opacity: 0;
    transition: all 0.7s ease;
    letter-spacing: 0.6rem;
    text-align: left;
    white-space: nowrap;
}
#special4 .swiper-slide .content .title-eng span { color:#a3e6d8; font-weight: 600; }

#special4 .swiper-slide .content .bar {
    position: relative; display: inline-block; width: 1px; height: 20px; margin: 10px auto;
    background-color: #fff; border-radius: 3px;
    transform:translateY(-10px); opacity: 0; transition: all 0.7s ease .2s;
}
#special4 .swiper-slide .content .txt {
      display:block;
      font-size:1.2rem;
      letter-spacing: -.5px;
      line-height:1.4;
      transform:translateX(100px);
      opacity:0;
}
#special4 .swiper-slide .content .p1 { transition:all 1s cubic-bezier(.19,.48,.22,1.27) 0.5s; } 
#special4 .swiper-slide .content .p2 { transition:all 1s cubic-bezier(.19,.48,.22,1.27) 0.7s; } 
#special4 .swiper-slide .content .p3 { transition:all 1s cubic-bezier(.19,.48,.22,1.27) 0.9s; }
#special4 .swiper-slide .content .p4 { transition:all 1s cubic-bezier(.19,.48,.22,1.27) 1.1s; }

/*#special4 .swiper-slide .content.show .cont-left img {  transform: translateX(0); opacity: 1; }*/
#special4 .swiper-slide .content.show .title-eng { transform: translateX(0); opacity: 1; letter-spacing: -0.5px ; }
#special4 .swiper-slide .content.show .p1 { transform: translateX(0); opacity: 1; }
#special4 .swiper-slide .content.show .p2 { transform: translateX(0); opacity: 1; }
#special4 .swiper-slide .content.show .p3 { transform: translateX(0); opacity: 1; }
#special4 .swiper-slide .content.show .p4 { transform: translateX(0); opacity: 1; }
#special4 .swiper-slide .content.show .bar { transform: translateY(0); opacity: 1; }

#special4 [class^="swiper-button"]
{
  width:44px;
  opacity:0;
  visibility:hidden;
  transition: all 0.5s ease;
}

#special4 .special3-prev { transform:translateX(270px); }
#special4 .special3-next { transform:translateX(-370px); }


/* 페이지네이션 변경하기 */
#special4 .swiper-pagination-bullet {
    width: 7px; height: 7px; border-radius: 7px; margin-right: 10px;
    transition: all .3s ease;  z-index: 10; background: #fff;
}
#special4 .swiper-pagination-bullet-active { width:70px; background-color:#fff }
#special4 .swiper-pagination {
    --swiper-pagination-bottom:0px;/*하단 위치 높이 변경*/
    --swiper-pagination-bullet-horizontal-gap: 5px;/*불렛간 간격 조정 - 가로*/
    bottom: 50px;
    color: #fff !important;
    /*margin-left: 100px;*/
}


#special4 small { font-size:0.875rem }


/*********/

#special4 .title {
    position: absolute; width: 100%; height: auto; top: 28%; left: 50%; letter-spacing: -1px;
     z-index: 99; transition:all 0.3s ease 0.1s; color:#fff; transform: translate(-50%, -50%); 
}
#special4 .title .tt1 { font-size:1.3rem; font-weight: 400; text-align:center; }
#special4 .title .tt2 {
    font-size:2.4rem; font-weight: 600; margin-bottom:50px; color:#E8DCC4; letter-spacing: -1.5px; opacity: 1; text-align: center;
    font-family: "Noto Serif KR", serif; font-style: italic;
}
/*#special4.active .title { opacity: 1; }*/



#special4 .swiper-slide .slide-bgimg { z-index: 1 }
#special4 .swiper-slide .content { z-index: 3 }


/* 처음 가림막 */
.special3_bg {
    position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index:2 ;
    background-color: rgba(0,0,0,0.6); animation: special3_bg 0.7s 0.3s both; display: block;
    border-radius: 0;
}
@keyframes special3_bg { from { left: 100%; transform: skew(-90deg);} to {  } }


@media (max-height: 800px ) {
    #special4 .swiper-slide .content .cont-left  { width:450px; height: 270px }
    #special4 .title .tt1 { font-size:2.5rem } 
    #special4 .title .tt2 {  }  
}

@media (max-height: 700px ) {
}