@import url("common.css");

/* 공통 */
:root {--common_gap: 20px;}


.main_wrap {margin-top: 142px; display: flex; gap: 40px; position: relative; margin-bottom: 50px; align-items: flex-start;}

.main_wrap::before {content: ''; border-left: 1px solid var(--border); position: absolute; left: 770px; top: 0; height: 100%;}

.main_wrap .main_left {width: 60%; max-width: 750px; flex-shrink: 0;}
.main_wrap .main_right {flex: 1;}

.main_wrap .imgbox {aspect-ratio: 5 / 3;}
.main_wrap .imgbox img {width: 100%; height: 100%; object-fit: cover; transition:all .3s linear;}
.main_wrap .imgbox.banner_img_box {aspect-ratio: 51 / 14;}

.main_wrap article a:hover .imgbox img {transform: scale(1.05);}
.main_wrap article a:hover h2,
.main_wrap article a:hover h3 {color: var(--main);}
.main_wrap article a:hover p {color: var(--black);}

.main_wrap article a h2,
.main_wrap article a h3,
.main_wrap article a p {transition:all .3s linear; word-break: break-all;}



/* 좌측 (헤드라인, 최근 뉴스) */
.main_left .headline {padding-bottom: var(--common_gap); margin-bottom: var(--common_gap); border-bottom: 1px solid var(--border); width: 100%;}
.main_left .headline .imgbox {margin-bottom: var(--common_gap);}
.main_left .headline a {display: block;}
.main_left .headline a:hover .imgbox img {transform: scale(1.05);}

.main_left .latest .latest_tit {display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--common_gap);}


.main_left .latest ul {display: flex; flex-direction: column; gap: var(--common_gap);}
.main_left .latest ul a {display: flex; gap: var(--common_gap); align-items: center;}
.main_left .latest ul a .imgbox {width: 45%; flex-shrink: 0; max-width: 310px;}
.main_left .latest ul a .txtbox {width: 100%;}
.main_left .latest ul a .txtbox .catname {margin-bottom: 7px; padding: 1px 10px; font-size: 13px; line-height: 176.923%; background: var(--grayBg); display: inline-flex; border-radius: 3px;}
.main_left .latest ul a .txtbox h3 {font-weight: 400; margin-bottom: 2px;}

/* 우측 (인기뉴스, 배너) */
.main_right .popular h2 {margin-bottom: var(--common_gap);}
.main_right .popular ul {display: flex; flex-direction: column; gap: var(--common_gap);}
.main_right .popular ul a {display: flex; gap: var(--common_gap); align-items: center;}
.main_right .popular ul a .imgbox {width: 40%; max-width: 200px; flex-shrink: 0;}
.main_right .popular ul a .txtbox {width: 100%;}
.main_right .popular ul a .txtbox h3 {margin-bottom: 2px;}

.main_right .banner {margin-top: 50px;}
.main_right .banner ul {display: flex; gap: 10px; flex-direction: column;}
.main_right .banner a {display: block;}
.main_right .banner a:not([href='']):hover img {transform: scale(1.05);}

.main_right .banner a[href=''] {pointer-events: none;}

/*******************************************************************************
    @media 1444px
*******************************************************************************/
@media all and (max-width:1444px){
/* 공통 */
.main_wrap::before {left: calc(60% + var(--common_gap));}
}

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

}

/*******************************************************************************
    @media 980px
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.main_wrap {flex-direction: column; gap: 0; margin-top: 110px;}
.main_wrap::before {display: none;}
.main_wrap > div {width: 100% !important; max-width: 100% !important;}

/* 좌측 */
.main_left .headline .imgbox {border-radius: 10px;}
.main_left {padding-bottom: 25px; margin-bottom: var(--common_gap); border-bottom: 1px solid var(--border);}
.main_left .latest .latest_tit {margin-bottom: 15px;}
.main_left .latest ul {gap: 10px;}

/* 우측 */
.main_right .popular h2 {margin-bottom: 15px;}
.main_right .popular ul {gap: 15px;}
.main_right .popular ul a .imgbox {width: 45%; max-width: 310px;}

.main_right .banner {margin-top: 30px;}
.main_right .banner ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.main_wrap {margin-top: 100px; margin-bottom: 40px;}

/* 좌측 */
.main_left .headline .imgbox {margin-bottom: 10px;}

.main_left .latest ul a .imgbox {width: 50%;}
.main_left .latest ul a .txtbox h3 {margin-bottom: 0; -webkit-line-clamp: 2; line-clamp: 2;}
.main_left .latest ul a .txtbox p.fs15 {display: none;}

/* 우측 */
.main_right .popular ul a .imgbox {width: 50%;}

.main_right .popular ul a:has(.imgbox) .txtbox h3 {margin-bottom: 0; -webkit-line-clamp: 2; line-clamp: 2;}
.main_right .popular ul a:has(.imgbox) .txtbox p.fs15 {display: none;}

/* 배너 */
.main_right .banner {margin-top: var(--common_gap);}
.main_right .banner ul {grid-template-columns: 1fr; gap: 3px;}
.main_right .banner a:hover img {transform: scale(1.05);}
}