@import url('sub.css');

/* NEWS BOARD — TOP SLIDE */
.news_board_top {background:var(--grayBg);box-sizing:border-box; margin: 0 0 60px;}
.news_board_top .news_top_box {position:relative; width:100%;}
.news_board_top .swiper-slide > a {display:flex; align-items:stretch; width:100%;}
.news_board_top .thumb {position:relative; width:50%; aspect-ratio:765/498; overflow:hidden; border-radius:var(--borderR30); background:var(--white); flex-shrink:0;}
.news_board_top .thumb img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.news_board_top .thumb.noimg {display:flex; align-items:center; justify-content:center;}
.news_board_top .thumb.noimg::after {content:''; display:block; width:277px; max-width:70%; aspect-ratio:277/86; height:auto; background:url('/img/logo.svg') no-repeat center/contain;}
.news_board_top .txt {display:flex; flex-direction:column; width:50%; padding:70px 100px; box-sizing:border-box;}
.news_board_top .txt .in {display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%; padding:0 0 60px;}
.news_board_top .date {display:flex; align-items:center; gap:5px; color:var(--light); line-height: 100%;}
.news_board_top .date::before {content:'\ebcc'; display:block; width:20px; height:20px; line-height:20px; font-size:20px; font-family:var(--icon); text-align:center; color:var(--light); flex-shrink:0;}
.news_board_top .txt .fs30 {width:100%; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.news_board_top .txt .fs18 {width:100%; color:var(--basic); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.news_board_top .ctrl {position:absolute; left:calc(50% + 100px); bottom:70px; display:flex; align-items:center; gap:10px; z-index:2;}
.news_board_top .ctrl .count {display:flex; align-items:center; justify-content:center; gap:6px; width:80px; height:38px; box-sizing:border-box; background:var(--grayBg); border-radius:var(--borderR100); font-family:var(--eng);}
.news_board_top .ctrl .count b {font-size:0.8889rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--black); line-height:175%;}
.news_board_top .ctrl .count i {font-style:normal; font-size:0.6667rem; line-height:200%; opacity:0.5;}
.news_board_top .ctrl .count span {font-size:0.8889rem; line-height:175%; opacity:0.5;}
.news_board_top .ctrl .arrow {display:flex; align-items:center; gap:4px;}
.news_board_top .ctrl .arrow button {display:flex; align-items:center; justify-content:center; width:38px; height:38px; background:var(--white); border:1px solid var(--border); border-radius:50%; cursor:pointer; color:var(--black); transition:background 0.3s ease, border-color 0.3s ease;}
.news_board_top .ctrl .arrow button::before {display:block; width:22px; height:22px; line-height:22px; font-size:22px; font-family:var(--icon); text-align:center; color:var(--black); transition:color 0.3s ease;}
.news_board_top .ctrl .arrow button:hover {background:var(--main); border-color:var(--main);}
.news_board_top .ctrl .arrow button:hover::before {color:var(--white);}
.news_board_top .ctrl .news_top_prev::before {content:'\e408';}
.news_board_top .ctrl .news_top_next::before {content:'\e409';}
.news_board_top .ctrl .news_top_pause::before {content:'\e034'; width:18px !important; height:18px !important; line-height:18px !important; font-size:18px !important; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;}
.news_board_top .ctrl .news_top_pause.play::before {content:'\e037';}

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

/* NEWS BOARD — TOP SLIDE */
.news_board_top .txt {padding:60px 70px;}
.news_board_top .ctrl {left:calc(50% + 70px); bottom:60px;}

}
/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* NEWS BOARD — TOP SLIDE */
.news_board_top .txt {padding:50px 50px;}
.news_board_top .ctrl {left:calc(50% + 50px); bottom:50px;}

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

/* NEWS BOARD — TOP SLIDE */
.news_board_top .txt {padding:40px 36px;}
.news_board_top .txt .in {gap:16px; padding:0 0 50px;}
.news_board_top .ctrl {left:calc(50% + 36px); bottom:40px;}

}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){

/* NEWS BOARD — TOP SLIDE */
.news_board_top {margin: 0 0 40px;}
.news_board_top .swiper-slide > a {flex-direction:column;}
.news_board_top .thumb {width:100%;}
.news_board_top .txt {width:100%; padding:24px 0 0;}
.news_board_top .txt .in {padding:0 0 20px;}
.news_board_top .ctrl {position:static; justify-content:flex-start; width:100%;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* NEWS BOARD — TOP SLIDE */
.news_board_top {margin: 0 0 30px;}
.news_board_top .txt .in {gap:12px;}
.news_board_top .date::before {width:18px; height:18px; line-height:18px; font-size:18px;}
.news_board_top .ctrl .count {width:70px; height:34px;}
.news_board_top .ctrl .arrow button {width:34px; height:34px;}
.news_board_top .ctrl .arrow button::before {width:18px; height:18px; line-height:18px; font-size:18px;}
.news_board_top .ctrl .news_top_pause::before {width:14px !important; height:14px !important; line-height:14px !important; font-size:14px !important;}

}