.visual{position: relative;} .pagination{ color: #fff; font-size: 20px; position: absolute; } .search-wrap{ position: absolute; bottom: 174px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 20px; .search-area{ padding-left: 40px; display: flex; align-items: center; gap: 25px; background-color: #fff; width: 687px; height: 76px; border-radius: 38px; position: relative; .search-btn{ position: absolute; right: 0; top: 0; } } .line{ width: 2px; height: 20px; background-color: #cccccc; } input{font-size: 20px; font-family: "Pretendard-L";} input::placeholder{color: #555;} .total-btn{ font-family: "Pretendard-B"; color: #fff; font-size: 20px; border-radius: 37.5px; width: 150px; height: 75px; background: linear-gradient(-45deg,#1865c8, #4037aa ) } } .current-status{ background-color: #f6f6f6; padding: 30px 0; .board{ position: relative; padding: 49px 0px; background-color: #fff; border-radius: 50px; ul{display: flex; gap: 37px; margin-right: 37px; justify-content: end;} li { .labeling{ display: flex; align-self: center; justify-content: center; margin-bottom: 14px; } .count{ font-family: "Pretendard-EB"; font-size: 32px; background-color: #f6f6f6; border-radius: 15px; width: 150px; height: 70px; line-height: 70px; text-align: center; &.all{ background-color: #fbefef; color: #dd1b1b; } } } .line{width: 2px; height: 110px; background-color: #eeeeee;} span{font-size: 22px; font-family: "Pretendard-SB";} img{margin-right: 10px; object-fit: contain;} } .current-btn { background-image: url(../../images/direct-btn-bg.png); background-repeat: no-repeat; position: absolute; width: 375px; height: 247px; top: 0; button{ position: absolute; top: 40px; right: 60px; display: flex; align-items: center; gap: 40px; span{ font-family: "MIWON"; font-size: 30px; color: #fff; } } } } .tabs{ ul{display: flex; justify-content: center; li:first-child::after{ content: ''; width: 3px; height: 30px; background-color: rgba(173, 176, 177, 0.2); margin: 0 38px 0 25px; } } .tab-title{ display: flex; align-items: center; gap: 13px; p{ cursor: pointer; font-family: "HAPPINESS-SANS-REGULAR"; color: #cccccc; font-size: 26px; b{ color: #cccccc; } } } .tab-title.active p{ color: #000; b{ color: #ff4141; } } } /* swiper */ .swiper { width:1620px; height: 100%; } .swiper-wrapper{ width: 1500px !important; margin: 0 auto; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: flex; justify-content: center; align-items: center; } .swiper-slide img { display: block; height: 100%; object-fit: cover; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{ width: 30rem !important; top: 407px !important; left: 50% !important; transform: translateX(-50%); } .swiper-pagination-progressbar{ background-color: #fff !important; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background-color: #4557a4 !important; } .swiper-button-prev { background-image: url(../../images/prev-btn.png); width: 94px !important; height: 94px !important; } .swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{ content: '' !important; } .swiper-button-next { background-image: url(../../images/next-btn.png); width: 94px !important; height: 94px !important; right: 66px; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{ content: '' !important; }