@charset "utf-8";

:root {
	--font-size:18px;
	--sub-font-size: 16px;
	--small-font-size: 15px;
}
.sub-fs {font-size: var(--sub-font-size) !important;}
.small-fs {font-size: var(--small-font-size);}
.pc_view {display:block}
.mb_view {display:none}
.mont {font-family:'Montserrat', sans-serif; }



/* wrap */
#wrap {width:100%; overflow:hidden; word-break:keep-all; transition:all 0.3s 0s ease-in-out;}
.inner {max-width:var(--inner); margin:0 auto;}
.intro_wrap {background:url(../img/bg.jpg) no-repeat left top/cover; padding:min(50px, 6vw) 10px; min-height: 100%;}
#header {width:100%; display: flex; align-items: center; flex-wrap: wrap; gap:10px 20px;}
#header .tit {font-size:clamp(12px, 2vw, 19px); line-height:1.3em}
#header img {max-width:30vw}
#container {display: flex; gap: 20px; margin-top:clamp(20px, 3.5vw, 45px)}
#container .banner_slide {max-width:880px; width: 60%; order:2}
#container .board_area {flex: 1;}

.banner_slide .swiper {overflow: hidden; border-radius:8px; position: relative;}
.banner_slide .box {display: block; color: #fff; position: relative;}
.banner_slide .box img {width: 100%;}
/* .banner_slide .box .img {position: relative; padding-bottom: calc(679px / 880 * 100%); overflow:hidden;}
.banner_slide .box .img > img {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; object-fit: cover;} */
.banner_slide .box::before {content:""; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);;}
.banner_slide .text_area {position: absolute; left: 0px; top: 0px; padding: 2em; width: 100%; height: 100%; color: #fff; ;}
.banner_slide .text_area .cate {display: inline-block; vertical-align: top; padding: 0.5em 1.2em; line-height: 1.3em; border:1px solid rgba(255, 255, 255, 50%); border-radius:8px;}
.banner_slide .text_area .txt_a {font-size: 1.33em; font-weight:600; line-height: 1.4em; margin-top: 0.5em; max-height:8.4em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:6; line-clamp:6; -webkit-box-orient: vertical;}

.banner_slide .arrow {width: 68px; height: 68px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9;}
.banner_slide .arrow:after {display: none !important;}
.banner_slide .swiper-button-prev {left: 1em;}
.banner_slide .swiper-button-next {right: 1em;}
.banner_slide .slide_control {display: flex; gap:5px; align-items: center; justify-content: center; padding-top: 10px;}
.banner_slide .slide_control .play_stop {font-size:0px; display: flex; width:14px; height:26px; justify-content: center; align-items: center; color:#ccc;}
.banner_slide .slide_control .play_stop:focus {outline:1px solid #ccc}
.banner_slide .slide_control .play:before {display: block; content: "▶"; font-size:9px;}
.banner_slide .slide_control .stop:before {display: block; content: ""; width: 2px; height: 9px; border-left:3px solid #ccc; border-right:3px solid #ccc;}
.banner_slide .swiper-pagination-bullet {margin:3px; width:25px;  height:25px; border:7px solid #f4f7ff;  background: #cccccc;}
.banner_slide .swiper-pagination-bullet-active {background: #fff; border-color:#14257d !important;}


.board_area .tit {font-size:1.333em; color: #14257d; text-align: center; line-height: 1.2em; font-weight:800; display: flex; justify-content: center; align-items: flex-start; min-height:50px;}
.banner .box {border-radius:8px 8px 0px 8px; position: relative; color: #fff;  min-height: 7.2222em; padding:1em 60px 1em 2em; display:flex; flex-direction: column; justify-content: center; transition:all 0.3s 0s ease-in-out;}
.banner .box:hover {box-shadow:2px 3px 5px rgba(0, 0, 0, 20%)}
.banner .box:after {content: ""; width: 66px; height: 62px; background: url(../img/bg_bg.png) no-repeat left top/cover; position: absolute; right:-1px; bottom: -1px;}
.banner .box .txt_a {font-size: 1.333em; line-height: 1.4em; font-weight: 700;}
.banner .box .txt_b {font-size: var(--small-font-size); line-height:1.3em;}
.banner > li + li {margin-top:5px}
.banner > li:nth-child(1) .box {background:#14257d;}
.banner > li:nth-child(2) .box {background:#043763;}
.banner > li:nth-child(3) .box {background:#306ad6;}

.borad {display: flex; gap: clamp(10px, 2vw, 20px); margin-top:20px;}
.borad > li {width:calc(50% - 10px);}
.borad .box {border-radius:10px; background: #fff; padding: 1em ; display: block; transition:all 0.3s 0s ease-in-out;}
.borad .box:hover {box-shadow:2px 3px 5px rgba(0, 0, 0, 20%)}
.borad .box .date {font-size:var(--small-font-size);}
.borad .box .date > strong {font-size: 1.73em; font-weight: 700; line-height: 1.4em; display: block;}
.borad .box .txt_a {margin-top:1em; font-weight:600; font-size: var(--sub-font-size); line-height: 1.4em; height: 5.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient: vertical;}
.borad .box .arrow {display: block; text-align: right; margin-top: 1em;}

.bb_banner {margin-top:clamp(10px, 2vw, 20px)}
.bb_banner > a {display:flex; align-items:center; gap:0.5em}
.bb_banner > a:after {content:""; width:clamp(20px, 3vw, 27px); height:clamp(20px, 3vw, 27px); background:url(../img/bb_arrow.png) no-repeat left top/cover}
.bb_banner > a img {max-width: 24vw;}



@media (hover: hover) and (pointer: fine) {

 }


@media screen and (max-width:1640px) {
	.main_visual .txt_frame {height:38vw ;}
}

/* 1440px 이하 */
@media screen and (max-width:1439px) {
	
	
}

/* 1200px 이하 */
@media screen and (max-width:1200px) {
	#container {flex-direction: column;}
	#container .banner_slide {width: 100%; max-width: 100%; order:0}
}

/* 980px 이하 */
@media screen and (max-width:979px) {
	:root {
		--font-size:17px;
		--sub-font-size:16px;
		--small-font-size: 15px;
	}


}

/* 768 이하 */
@media screen and (max-width:767px) {
	:root {
		--font-size:16px;
		--sub-font-size:15px;
		--small-font-size:14px;
	}
	
	.pc_view {display:none}
	.mb_view {display:block}
	#header img {max-width:calc(28vw - 10px);}
	.banner_slide .arrow {width: 30px; height: 30px;}
	

}



/* 480px 이하 */
@media screen and (max-width:479px) {
	:root {
		--font-size:14px;
		--sub-font-size:13px;
		--small-font-size:12px;
	}
	
	
}