@import url("common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");

/* 공통 */
.basic_cont {margin: 160px 0 100px;}

/* 서브타이틀 */
.subtitle {margin-bottom: 30px;}

/* 상단 롤링 (인기뉴스) */
.popluar:not(:has(.swiper-slide)) {display: none;}
.popluar {padding: 50px 0; margin-bottom: 50px;}

.popluar .swiper-slide {height: auto;}
.popluar .popular_card {display: flex; gap: 60px; height: 100%;}
.popluar .popular_card .imgbox {width: 60%; max-width: 750px; flex-shrink: 0; aspect-ratio: 5 / 3; border-radius: 10px;}
.popluar .popular_card .imgbox img {width: 100%; height: 100%; object-fit: cover; transition:all .3s linear;}
.popluar .popular_card .txtbox {width: 100%; display: flex; flex-direction: column;}
.popluar .popular_card .txtbox_head {display: flex; gap: 10px; align-items: center; margin-bottom: 10px;}
.popluar .popular_card .txtbox_head::before {content: ''; height: 13px; border-left: 1px solid var(--border); order: 1;}
.popluar .popular_card .txtbox_head .date {order: 0;}
.popluar .popular_card .txtbox_head .name {order: 2;}
.popluar .popular_card .txtbox h3 {margin-bottom: 10px;}
.popluar .popular_card .txtbox p.cont {margin-bottom: 30px; word-break: break-all;}
.popluar .popular_card .txtbox .more_wrap {margin-top: auto; padding-bottom: 5px;}
.popluar .popular_card .more {width: fit-content;}

.popluar .swiper {position: relative;}
.popluar .popular_pagination {position: absolute; right: 0; bottom: 13px; left: auto; width: auto; display: flex; align-items: center; gap: 10px; z-index: 2; top: auto;}
.popluar .popular_pagination .swiper-pagination-bullet {width: 10px; height: 10px; margin: 0; background: var(--black); transition: background 0.3s linear; opacity: 0.2; transition: all 0.3s linear;}
.popluar .popular_pagination .swiper-pagination-bullet:hover {background: var(--main); opacity: 1;}
.popluar .popular_pagination .swiper-pagination-bullet-active {background: var(--black); opacity: 1;}



/*******************************************************************************
    @media 1444px
*******************************************************************************/
@media all and (max-width:1444px){

}

/*******************************************************************************
	@media 1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 상단 롤링 */
.popluar .popular_card {gap: 40px;}
}

/*******************************************************************************
	@media 980px
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.basic_cont {margin: 130px 0 80px;}

/* 상단 롤링 */
.popluar {padding: 40px 0; margin-bottom: 40px;}
.popluar .popular_card .txtbox_head {margin-bottom: 5px;}
.popluar .popular_card .txtbox h3 {margin-bottom: 5px; font-size: 1.8rem;}

.popluar .popular_pagination {bottom: 11px;}
.popluar .popular_pagination .swiper-pagination-bullet {width: 8px; height: 8px;}
}

/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.basic_cont {margin: 115px 0 60px;}

/* 서브타이틀 */
.subtitle {margin-bottom: 20px;}

/* 상단 롤링 */
.popluar {padding: 30px 0; margin-bottom: 30px;}

.popluar .popular_card {flex-direction: column; gap: 20px;}
.popluar .popular_card .imgbox {width: 100%; max-width: 100%;}
.popluar .popular_card .txtbox {flex: 1;}
.popluar .popular_card .txtbox .more_wrap {padding-bottom: 0;}
.popluar .popular_pagination {bottom: 6px;}

}