#mainContents h1{ font-size:47px; font-weight:700; margin-bottom:15px;}
#mainContents h1 i{ color:#ff0033; margin-right:7px;}
#mainContents > div{padding:100px 0;}

.hid {position: absolute;margin: -1px; padding: 0; width: 1px; height: 1px;border: 0;clip: rect(0, 0, 0, 0);overflow: hidden;}
/* slick slide common */
.slick-slider {-webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-slide {display: none; height: 100%;vertical-align: middle;}
.slick-list {overflow: hidden;}
.slick-list.dragging {cursor: pointer;}
.slick-initialized .slick-slide {display: inline-block;}
.slick-arrow.slick-hidden {display: none;}
.slick-current {opacity: 1; display: block;}
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}


.img-box {   display: block;  position: relative;    width: 100%;    text-align: center;}
.img-thum {  display: block;  position: relative;  padding-top: 56.25%;  overflow: hidden; /* 이미지 확대 시 영역 유지 */}
.img-box img {   position: absolute;  top: 50%;    left: 50%;    transform: translate(-50%, -50%);   width: 100%;    height: auto;    transition: transform 0.3s ease-in-out; /* 부드러운 확대 효과 */}
/* 마우스 오버 시 이미지 확대 */
.img-box:hover img {   transform: translate(-50%, -50%) scale(1.2);}

#news-area{ display:flex;gap:27px;}
#news-area .news-img{ flex-basis: 18%;flex-shrink: 0; }
#news-area .txt-box{ flex-grow: 1;}
#news-area .tit{ font-size:27px; font-weight:700; margin-bottom:7px;    display: block;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;white-space: normal; -webkit-line-clamp: 1;}
#news-area .date{ margin-top:5px; font-size:17px;}
#news-area .date span{ margin-right:10px;}
#news-area:hover .tit{ color:#0CF}

/* 메인비주얼 */
.MVisual { position: relative; width:100%; height:auto; overflow: hidden; background:#0c1a28 ; padding:0 !important; }
.MVisual:before{ content:''; position:absolute; top:0;; left:0; background:#f2f0e8; width:100%; height:300px;}
.MVisual .area{ text-align:center; padding:100px 0 50px 0;}
.MVisual .area h2{ font-size:47px; margin-bottom:10px;}
.MVisual .slider {  isolation: isolate;margin-left: -30px;  }
.MVisual .slider,
.MVisual .slick-list,
.MVisual .slick-track { position: relative; }
.MVisual .item { position: relative; margin-left:30px;}
.MVisual .item img { width:100%;  }
.MVisual .item img.mo{ display:none;}
.MVisual .control { position: absolute; bottom:50px; right: 0; padding:10px 20px; display: flex; align-items: center;  z-index: 2; font-size:19px;}
.MVisual .control .page { color: #fff; margin-right: 1rem; }
.MVisual .control .page strong{ color:#fff;}
.MVisual .control .page span { position: relative; display: inline-block;padding-left:60px; margin-left:15px; color: #ebebeb; }
.MVisual .control .page span::before { position: absolute; top: 50%; left: -0.1rem; width:50px; height:1px; border-top:1px solid rgb(255,255,255);content: ""; }
.MVisual .control a { color: #fff; padding: 0 0.1rem; font-size:30px; }
.MVisual .control a.play { display: none; }


#s01{padding:50px 0 100px 0 !important; background:#0c1a28}
#s01 dl{display: grid; grid-template-columns:50% 1fr; gap:20px;}
#s01 img{object-fit: cover;object-position: center;}
#s01 dl dt{ position:relative;}
#s01 dl dt p{ font-size:37px; font-weight:700;}
#s01 dl dt img{ width:100%; }
#s01 dl dd ul{display: grid; grid-template-columns:repeat(2, 1fr);gap:20px;}
#s01 dl dd ul li{ position:relative;}
#s01 dl dd ul li img{ width:100%;}
#s01 p{ position:absolute; bottom:0; left:0; width:100%;overflow:hidden; padding:30px 20px 0 20px; box-sizing:border-box;background: linear-gradient(0deg, rgba(12, 26, 40, 1) 50%, rgba(12, 26, 40, 0.0) 100%);}
#s01 a p{ color:#fff;}
#s01 dl dd p{ font-size:22px; font-weight:500;}



#s02{ background:#12283d;  overflow:hidden;}
#s02 dl{display:flex; justify-content: space-between;}
#s02 img{ width:100%;}
#s02 dl dt{width:73%; }
#s02 dl dt ul{display: grid; grid-template-columns:repeat(2, 1fr);gap:37px;}
#s02 dl dt ul li{ border-bottom:1px solid rgb(255,255,255,0.1); padding-bottom:20px;}
#s02 dl dt ul li:nth-child(5), #s02 dl dt ul li:nth-child(6){ border-bottom:none}
#s02 #news-area .news-img{flex-basis: 28%;}

#s02 dl dt a{ color:#fff;}
#s02 .area{ width:calc(100% / 3)} 
#s02 .area{ border-left:1px solid rgb(255,255,255,0.2); padding:0 20px;box-sizing:border-box;}
#s02 .area:nth-child(1){ border:none;}
#s02 .area ul li+li{ margin-top:30px;}
#s02 h2{ color:#fff; font-weight:600; font-size:30px; margin-bottom:20px;}
#s02 p,
#s02 p a{ color:rgb(255,255,255,0.8)}
#s02 dl dd{ width:25%;border-left:1px solid rgb(255,255,255,0.2); padding-left:40px;box-sizing:border-box;}
#s02 dl dd ul li+li{ border-top:1px dotted rgb(255,255,255,0.2); padding-top:13px; margin-top:13px;}
#s02 dl dd ul li a:hover{ color:#3CF}

#Bmainbanner{ background:#e9edec; padding:0 !important;}
#Bmainbanner img{ width:100%;}


#s03 #video-list{display: grid; grid-template-columns:repeat(4, 1fr); gap:37px;}
#video-list img{ width:100%;}
#video-list .thumbnail {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;overflow: hidden;}
#video-list .thumbnail img {position: absolute;width: 100%;height: 100%;object-fit: cover;top: 0;left: 0;}

#video-list .shorts-title{ font-size:25px; margin:20px 0 10px 0; font-weight:600;}
#video-list .shorts-info{ opacity:0.7;}

#s04{ background:url(../img/main/s04-bg.jpg) no-repeat 50% 50% / cover; }

.ProZone { position: relative; }
.ProZone .pop_img { height: 100%;overflow: hidden;}
.ProZone .slider,
.ProZone .slick-list,
.ProZone .slick-track { position: relative; height: 100%; z-index: 1; }
.ProZone .pop_img .item a { position: relative; display: block; height: 100%; }
.ProZone .pop_img .item a img { width:100%;}
.ProZone .pop_img .item a{ position:relative;width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center;transition: transform 0.3s ease-in-out; }
.ProZone .pop_img .item a:hover{ transform: translate(0%, 0%) scale(1.1);}
.ProZone .nss_pg { }
.ProZone .nss_pg .page { font-size: 0.75rem; margin-right: 0.5rem; }

.ProZone .nss_pg .slick-arrow{ position:absolute; top:50%;transform: translateY(-50%); width:50px; height:50px; text-align:center; line-height:50px; background:#ededed; border-radius:50%; z-index:1;}
.ProZone .nss_pg .prev{ left:-25px;}
.ProZone .nss_pg .next{ right:-25px;}
.ProZone .nss_pg i{ font-size:30px;}
/* 팝업:active */
.ProZone .pop_img .item a img { transition: all 0.3s; }

.ProList{ margin-top:70px;}
.ProList ul{display: grid; grid-template-columns:repeat(5, 1fr);gap:20px 30px; text-align:center;}
.ProList ul li p{ margin-top:7px; color:#0168d0; font-weight:600;}

#s05 .inner{display: grid; grid-template-columns:repeat(2, 1fr); gap:70px;}
#s05 #video-list{display: grid; grid-template-columns:repeat(2, 1fr); gap:37px;}

#s06{ background:#efefef;}
.radioZone { position: relative; }
.radioZone .pop_img { height: 100%;overflow: hidden;}
.radioZone .slider,
.radioZone .slick-list,
.radioZone .slick-track { position: relative; height: 100%; z-index: 1; }
.radioZone .pop_img .item{ margin:0 10px;}

.radioZone .pop_img .item a{display:table-cell; vertical-align: middle; width:100%; text-align:center;}

.radioZone .pop_img .item a img{width:100%; height:auto; max-width:100%; max-height:100%;transition: transform 0.3s ease-in-out; }
.radioZone .pop_img .item a:hover img{ transform: translate(0%, 0%) scale(1.05);}



.radioZone .pop_img .item strong{ display:block; width:100%; text-align:center; margin-top:15px; font-size:25px;}
.radioZone .nss_pg, .eventZone .nss_pg { position:absolute; top:-70px; right:0; z-index:1;}
.radioZone .nss_pg .page, .eventZone  .nss_pg .page { margin-right: 0.5rem; }
.radioZone .nss_pg a, .eventZone .nss_pg a{ font-size:40px;}



.eventZone { position: relative; }
.eventZone .pop_img { height: 100%;overflow: hidden;}
.eventZone .slider,
.eventZone .slick-list,
.eventZone .slick-track { position: relative; height: 100%; z-index: 1; }
.eventZone .pop_img .item{ margin:0 10px;}
.eventZone .pop_img .item a { position: relative; display: block; height: 100%; }
.eventZone .pop_img .item a img { width:100%;}
.eventZone .pop_img .item a{ position:relative;width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center;}


#s08{ background:#003471; padding:70px 0 !important;}
#s08 ul{display: grid; grid-template-columns:repeat(7, 1fr); text-align:center; margin:0 150px;}


@media all and (max-width : 1920px){
	
	#mainContents h1{ font-size:37px;}
	#mainContents > div{padding:80px 0;}
	
	#news-area{gap:17px;}
	#news-area .tit{ font-size:21px;}
	
	#s01{padding:30px 0 80px 0 !important;}	
	#s01 dl dt p{ font-size:30px;}	
	#s01 dl dd p{ font-size:20px;}
	
	#s02 h2{font-size:25px;}
	#s02 .area ul li+li{ margin-top:20px;}
	#s02 dl dt ul{gap:27px;}
	#s02 dl dd ul li+li{padding-top:11px; margin-top:11px;}
	#news-area .date{ font-size:15px;}

	.radioZone .pop_img .item strong{font-size:20px;}
	#video-list .shorts-title{font-size:20px; margin:15px 0 5px 0;}
	
	#s08{padding:50px 0 !important;}
	#s08 ul{ margin:0 100px;}
	#s08 ul li img{ width:120px;}
}
@media all and (max-width :1450px){
	#mainContents h1{ font-size:30px;}
	#mainContents > div{ padding:70px 10px;}
    #s01 {padding: 30px 10px 80px 10px !important;}

	.ProZone{overflow:hidden}
	.ProZone .nss_pg .prev i{margin-left:10px;}
	.ProZone .nss_pg .next i{margin-right:10px;}

	#s05 .inner{gap:30px;}
	#s05 #video-list{gap:17px;}

	#s08 ul{margin:0 10px;}
	
}
@media all and (max-width :1024px){
	#s02 dl{display:block;}
	#s02 dl dt, #s02 dl dd{width:100%;}
	#s02 dl dd{padding:30px 0 0 0; border:none;}
	#s02 dl dd ul{display: grid; grid-template-columns:repeat(2, 1fr);gap:10px 20px;}
	#s02 dl dd ul li+li { padding-top:0;margin-top:0; border:none; }
	#s02 dl dd ul li{ border-bottom:1px dotted rgb(255, 255, 255, 0.2) !important; padding-bottom:10px;}

	#s03 #video-list{gap:20px;}

	.ProList ul {grid-template-columns: repeat(4, 1fr);gap:20px;}
	
	#s08 ul{gap:20px;}
	#s08 ul li img{width:100%;}
}
@media all and (max-width :800px){
	.MVisual .item img.pc{ display:none;}
	.MVisual .item img.mo{ display:block;}

	#s01 dl{ display:block;}
	#s01 dl dd{ margin-top:30px;}

	#s02 dl dt{display:block;}
	#s02 dl dt ul{display: grid; grid-template-columns:repeat(2, 1fr);gap:10px;}
	#s02 .area ul li+li {margin-top:0;}
	#s02 .area{padding:0; width:100%;border:none;}
	#s02 .area+.area{margin-top:30px;}
	
	#s02 dl dt ul{ display:block;}
	#s02 dl dt ul li+li{ padding-top:20px;}
	#s02 dl dt ul li:nth-child(5), #s02 dl dt ul li:nth-child(6){border-bottom: 1px solid rgb(255, 255, 255, 0.1);}

	#s03 #video-list {grid-template-columns: repeat(2, 1fr);}

	.ProList ul {grid-template-columns: repeat(3, 1fr);}

	#s05 .inner{display:block;}
	#s05 .inner .area+.area{margin-top:20px;}
}

@media all and (max-width :640px){

	#mainContents h1{font-size:25px;}
	#s01 dl dt p{ font-size:20px;}

	#s02 dl dd ul, #s02 dl dt ul{display:block;}
	#s02 dl dd ul li+li{ margin-top:10px;}

	#video-list .shorts-title{ font-size:17px;}

	.ProList ul {grid-template-columns: repeat(2, 1fr);}

	#s08 ul{grid-template-columns: repeat(4, 1fr);}
	.radioZone .nss_pg, .eventZone .nss_pg{top:-50px;}
	.radioZone .nss_pg a, .eventZone .nss_pg a{ font-size:30px;}
}
@media all and (max-width :480px){

	#mainContents > div{padding:37px 10px;}
	
	#s01 {padding: 30px 10px 37px 10px !important;}
	#s01 dl dd ul, #s03 #video-list, .ProList ul, #s05 #video-list{grid-template-columns: repeat(1, 1fr);}
	.ProList{ margin-top:10px;}
	.radioZone .pop_img .item, .eventZone .pop_img .item{margin: 0 5px;}
}