html, body {
  touch-action: manipulation; /* or none */
  overscroll-behavior: contain;
}
header{
    top: 38px;
}
#headerAreaPc .header_inner .header_inner_bottom #gnb .dropdown_menu{
    top:139px;
}
#line_banner{
    position:sticky;
    top:0;
    left:0;
    width: 100%; 
    height: 38px;
    z-index: 100;
    background: #EAEAEA;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease;
}


.banner-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-item {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.banner-item.active {
    opacity: 1;
    transform: translateY(0);
}

.banner-item.prev {
    opacity: 0;
    transform: translateY(-100%);
}

.close-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}


.close-btn::before,
.close-btn::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 1px;
    background: var(--gray-color-1000);
    border-radius: 1px;
}

.close-btn::before {
    transform: rotate(45deg);
}

.close-btn::after {
    transform: rotate(-45deg);
}


#visual_suwon {
	position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 2140px;
    margin: 20px auto 0;
}
#visual_suwon .swiper-slide{width: 456px;   transform: translate3d(0px, -55px, 0px) scale(0.8533);
    transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1) 0.15s;
    min-height: auto;}
#visual_suwon .swiper-slide.swiper-slide-prev,
#visual_suwon .swiper-slide.swiper-slide-duplicate-prev {
    transform: translate3d(-16px, -55px, 0px) scale(0.8533);
}

#visual_suwon .swiper-slide.swiper-slide-next,
#visual_suwon .swiper-slide.swiper-slide-duplicate-next {
    transform: translate3d(16px, -55px, 0px) scale(0.8533);
} 


#visual_suwon .swiper-slide img{width: 100%; border-radius:16px;}

#visual_suwon .swiper-slide.swiper-slide-active {transform:translate3d(0,0,0) scale(1);}

#visual_suwon .swiper-button-prev { left: calc(50% + 130px); margin-top: 0; top: auto; bottom: 71px; outline: 0; width: 32px; height: 32px; border: 0; border-radius: 4px; background:  #fff;}
#visual_suwon .swiper-button-next {right: calc(50% - 200px); margin-top: 0; top: auto; bottom: 71px; outline: 0;  width: 32px; height: 32px; border: 0; border-radius: 4px; background:  #fff;}
#visual_suwon .swiper-button-next:hover,
#visual_suwon .swiper-button-prev:hover { background:  rgba(255,255,255,0.7); transition: all 0.3s ease-out;}
#visual_suwon .swiper-button-prev::after ,
#visual_suwon .swiper-button-next::after {font-size: 12px; color: var(--gray-color-1000);}

#visual_suwon .swiper-slide a { display: block; font-size: 0; pointer-events: none; }
#visual_suwon .swiper-slide a::after { content:""; display: block; width: 100%; height: 100%; background:  rgba(0,0,0,0.4); position: absolute; left: 0; top: 0; border-radius: 20px;}
#visual_suwon .swiper-slide.swiper-slide-active a::after,#visual_suwon .swiper-slide.swiper-slide-prev a::after,#visual_suwon .swiper-slide.swiper-slide-next a::after  { display: none;}
#visual_suwon .swiper-slide.swiper-slide-active a,#visual_suwon .swiper-slide.swiper-slide-prev a,#visual_suwon .swiper-slide.swiper-slide-next a { pointer-events: auto; }
#visual_suwon .img img { width: 100%; border-radius: 20px;}
@media screen and (max-width:767px) {
    .wrap{position: relative;overflow: hidden;}
    header{top: 45px;}
    .appointment {transform:translate(-50%, 150px)}
    .quick{bottom:60px !important;}
    #line_banner{height: 45px;}
    #visual_suwon{margin: 0 auto;}
    #visual_suwon .img img {border-radius: 0;}

    #visual_suwon .swiper-slide{width: 456px;   transform: translate3d(0px, 0, 0px) scale(1);
    transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1) 0.15s;
    min-height: auto;}
    #visual_suwon .swiper-slide.swiper-slide-prev,
    #visual_suwon .swiper-slide.swiper-slide-duplicate-prev {
        transform: translate3d(0, 0, 0px) scale(1);
    }

    #visual_suwon .swiper-slide.swiper-slide-next,
    #visual_suwon .swiper-slide.swiper-slide-duplicate-next {
        transform: translate3d(0, 0, 0px) scale(1);
    } 



    #visual_suwon .swiper-slide.swiper-slide-active {transform:translate3d(0,0,0) scale(1);}
    #visual_suwon .swiper-button-prev { left: calc(50% + 100px); margin-top: 0; top: auto; bottom: 71px; outline: 0; width: 32px; height: 32px; border: 0; border-radius: 4px; background:  #fff;}
    #visual_suwon .swiper-button-next {right: calc(50% - 170px); margin-top: 0; top: auto; bottom: 71px; outline: 0;  width: 32px; height: 32px; border: 0; border-radius: 4px; background:  #fff;}

}


