@charset "UTF-8";


/* 헤더, 푸터, 섹션, 섹션타이틀은 common.css에 있음 */

.main_bg{background: url(../images/sub_main_bg.png) no-repeat center top;height: 434px;}

.visual .text{color: #fff;text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);margin-top: 80px;}
.visual .text strong{display: block;font-size: 7rem; font-family: 'Aggravo';}
.visual .text em{font-size: 3.8rem;font-style: normal;font-weight: 500;}


#section1{padding: 50px 0;}
.part1{}
.part1 .centerbox{}

.swiper {
    width: 100%;
    display: flex;
}

.swiper-wrapper {
    width: auto;
    display: flex;
    gap: 10px;
}

/* 버튼 디자인 */
.swiper-slide {
    flex: 0 0 auto;
    padding: 0.7em 1.2em;
    border-radius: 100px;
    border: 1px solid #333;
    background: #fff;
    color: #333;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    font-size: 2rem;
    transition: all 0.2s ease;
    width: auto;
}

/* 클릭(active) 상태 */
.swiper-slide.active {
    background: #333;
    border: 1px solid #333;
    color: #fff;
    border-color: #333;
    font-weight: 600;
}


#section2{padding-top: 5px;}
.part2{}
.part2 .content { /* display: flex;justify-content: center; */}
.part2 .content ul {padding: 10px 0 50px;border-top: 1px solid #999999;max-width: 1200px;display: block; margin: 0 auto;}
.part2 .content ul li {padding-top: 10px;}
.part2 .content ul li .title {display: flex; justify-content: space-between;align-items: center;border-bottom: 1px solid rgba(153, 153, 153, 0.3); cursor: pointer; padding-bottom: 20px;}
.part2 .content ul li:hover {background: #eee;}

.part2 .content ul li a{color: rgb(255, 154, 31);}
.part2 .content ul li img{border-radius: 10px;display: block;margin: 10px;}
.part2 .content ul li span{width: 46px;height: 46px;background: linear-gradient(130deg, #E56718 35%, #490179 100%);display: block;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 24px;color: #fff;font-weight: 500;box-shadow: inset 0 2px 3.1px rgba(255, 255, 255, 0.21);flex-shrink: 0;margin-right: 20px;}
.part2 .content ul li .category{min-width: 200px;color: #555;font-size: 1.8rem;font-weight: 500;}
.part2 .content ul li .q_title{flex-grow: 1;padding-right: 90px;color: #333;font-size: 1.8rem;font-weight: 500;line-height: 26px;/* display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden; */align-items: start;}
.part2 .content ul li .more{margin-right: 5px;display: flex;align-items: center;justify-content: center;cursor: pointer;max-width: 40px;height: 40px;}


.part2 .content ul li .content {font-size: 18px; padding: 30px; background: #ddd;  display: none;}

.part2 .content ul.page2, .part2 .content ul.page3, .part2 .content ul.page4{display: none;}

.part2 .pagination{display: flex;color: #fff;font-size: 17px;font-weight: 400;gap: 20px;justify-content: center;align-items: center;}
.part2 .pagination span{width: 40px;height: 40px;border-radius: 50%;background: rgba(17, 17, 17, 0.15);display: flex;align-items: center;justify-content: center;cursor: pointer;}
.part2 .pagination span.active{background: #000;}


/* 모바일 */
@media (min-width: 1205px) {
.swiper-wrapper {
    flex-wrap: wrap;
}
.swiper-slide {
    flex: 1;
}
}

@media screen and (max-width:960px){
    .swiper-slide {font-size: clamp(1.4rem, 3vw, 2rem);}

    .part2 .content ul li .category{display: none;}
    .part2 .content ul li .q_title{-webkit-line-clamp: 2;padding-right: 10px;}
}

@media screen and (max-width:700px){
    .main_bg{height: clamp(280px, 50vw, 430px);}

    .visual .text strong{display: block;font-size: clamp(4rem, 8vw, 7rem); font-family: 'Aggravo';}
    .visual .text em{font-size: clamp(2rem, 4vw, 3.8rem);font-style: normal;font-weight: 500;}
}

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

}