@charset "utf-8";

/* main */
.main-visual .swiper-wrapper .swiper-slide {height: 640px;}
.main-visual .swiper-wrapper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.main-visual .swiper-pagination {bottom: 40px !important; display: flex; align-items: center; column-gap: 12px; justify-content: center;}
.main-visual .swiper-pagination .swiper-pagination-bullet {width: 12px; height: 12px; background: var(--primary); margin: 0 !important;}
.main-visual .swiper-button-next,
.main-visual .swiper-button-prev {width: 60px; height: 60px;}

.main-visual .swiper-button-prev {background: url(../img/arrow-left.svg) no-repeat center center / cover; left: 4vw;}
.main-visual .swiper-button-next {background: url(../img/arrow-right.svg) no-repeat center center / cover; right: 4vw;}

.main-visual .swiper-button-next:after,
.main-visual .swiper-rtl .swiper-button-prev:after,
.main-visual .swiper-button-prev:after,
.main-visual .swiper-rtl .swiper-button-next:after {content: '' !important;}

.main-tit {position: relative; width: 100%; height: 300px; display: flex; align-items: center; background: url(../img/main-tit-img.webp) no-repeat center center / cover;}
.main-tit::after {position: absolute; width: 100%; height: 100%; background-color: var(--text1); top: 0; left: 0; opacity: 0.6; z-index: 1; display: block; content: '';}
.main-tit .inner-m {position: relative; z-index: 2; display: flex; column-gap: 70px;}
.main-tit .inner-m img {width: auto; height: 128px;}
.main-tit .inner-m p,
.main-tit .inner-m b {font-size: 40px;}
.main-tit .inner-m p {color: #fff;}

.main-quick {padding: 80px 0;}
.main-quick ul {display: flex; column-gap: 18px;}
.main-quick ul li {width: calc(100% / 4);}
.main-quick ul li a {width: 100%; padding: 30px 0; background-color: #fff; border: 3px solid #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center; column-gap: 24px; font-size: 32px; font-weight: 600; color: var(--text2);}
.main-quick ul li a:hover {border: 3px solid var(--primary); transition: all 0.2s;}

/* 반응형 */
@media screen and (max-width: 1520px) {

}
@media screen and (max-width: 1350px) {

    .main-visual .swiper-wrapper .swiper-slide {height: 33vw;}
    .main-tit {padding: 40px 0; height: auto;}
    .main-tit .inner-m p {width: 100%; text-align: center; word-break: keep-all;}
    .main-tit .inner-m p,
    .main-tit .inner-m b {font-size: 36px;}
    .main-tit .inner-m img {display: none;}
    .main-quick ul li a {flex-direction: column; row-gap: 10px;}

}
@media screen and (max-width: 1024px) {
    .main-tit .inner-m p,
    .main-tit .inner-m b {font-size: 30px;}
    .main-quick ul li a {padding: 20px 16px; font-size: 24px;}
    .main-quick ul li a img {width: 36px; height: 36px;}
}
@media screen and (max-width: 768px) {

    .main-visual {padding: 16px; background-color: #fff;}
    .main-visual .swiper-wrapper .swiper-slide {height: 86vw; border-radius: 10px; overflow: hidden;}
    .main-visual .swiper-wrapper .swiper-slide .pc-mode {display: none;}
    .main-visual .swiper-wrapper .swiper-slide .mo-mode {display: block;}
    .main-visual .swiper-button-next,
    .main-visual .swiper-button-prev {width: 32px; height: 32px;}
    .main-visual .swiper-button-prev {left: 2vw;}
    .main-visual .swiper-button-next {right: 2vw;}
    .main-visual .swiper-pagination {bottom: 16px !important; column-gap: 8px;}
    .main-visual .swiper-pagination .swiper-pagination-bullet {width: 8px; height: 8px;}

    .main-tit .inner-m .pc-mode {display: none;}
    .main-tit .inner-m .mo-mode {display: block;}

    .main-quick {padding: 60px 0;}
    .main-quick ul {column-gap: 12px;}
    .main-quick ul li a {padding: 16px 18px; font-size: 16px; border-radius: 10px;}
    .main-quick ul li a img {width: 30px; height: 30px;}

}
@media screen and (max-width: 600px) {
    
}
@media screen and (max-width: 500px) {

    .main-tit {padding: 30px 0;}
    .main-tit .inner-m p,
    .main-tit .inner-m b {font-size: 24px;}
    .main-quick {padding: 40px 0;}
    .main-quick ul li a {padding: 16px 2vw; font-size: 3.2vw;}

}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 390px) {
    .main-tit .inner-m p,
    .main-tit .inner-m b {font-size: 6vw;}
}
@media screen and (max-width: 340px) {
}

/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/
/*****/