@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; position:relative; background-color:#000 }
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	justify-content: center;
	height:100%;
	/* height:57%; */
	/* padding-top:15rem; */
	text-align:center;
	box-sizing:border-box;
	transition:var(--transition-custom2);
	transition-delay:0.3s;
}
.main-visual-txt-inner{width:100%;}
.main-visual-txt-box .main-visual-txt1{font-size:5rem; font-weight:700; letter-spacing:-0.01em; line-height:1.2; color:#fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.29);}
.main-visual-txt-box .main-visual-txt2{font-size:1.5rem; font-weight:700; letter-spacing:-0.03em; line-height:1.25; color:var(--main-color2); margin-bottom:1rem;}

.main-search-box{text-align:center; width:100%; max-width:76rem; margin:auto; height:10rem; margin-top:5.5rem;}
.main-search-box .main-search-inner{position: relative; height:10rem; box-sizing:border-box;}
.main-search-box .main-search-inner:after{display:none;}
.main-search-box .search-word{height:100%; background-color:transparent; border:0; padding:0 4rem; padding-right:13rem; font-size:2rem; color:#333; letter-spacing:-0.025em; box-sizing:border-box; font-weight:300; border-radius:5rem; background: #fff}
.main-search-box .search-word{width:100%; border-right:0;}
.main-search-box .search-word:focus{outline:none;}
.main-search-box .search-word::placeholder{color:#aaa; transition:var(--transition-custom);}
.main-search-box .bbs-search-btn{position: absolute; top:50%; right:2rem; transform:translateY(-50%); width:6rem; height:6rem; color:#fff; cursor:pointer; vertical-align:top; background:var(--main-color2); border-radius:50%;}
.main-search-box .bbs-search-btn i{position: relative; font-size:2.4rem;}


.main-visual-bottom-box{position: relative; height:43%;}
.main-visual-bottom-box:before{position: absolute; content:''; width:100%; height:100%; top:0; left:0; background: rgba(0,0,0,0.2); backdrop-filter: blur(10px);}
.main-visual-bottom-box > div{height:100%;}
.main-visual-archive{display: flex; align-items:center; height:100%; position: relative;}
.main-visual-archive .left-box{width:36.7%;}
.main-visual-archive .left-box .tit{font-size:1.5rem; line-height:1.25; letter-spacing:-0.03em; color:var(--main-color2); font-weight:700; margin-bottom:1.5rem;}
.main-visual-archive .left-box .txt{font-size:3rem; line-height:1.33; letter-spacing:-0.06em; color:#fff; font-weight:700; margin-bottom:2.6rem}
.main-visual-archive .left-box .txt .count{text-decoration:underline;}
.main-visual-archive .left-box .link-btn{display: flex; align-items:center;}
.main-visual-archive .left-box .link-btn .icon{display: block; width:6rem; height:6rem; border:2px solid #fff; border-radius:50%; line-height:6rem; text-align:center; font-size:2.4rem; color:#fff; transition:var(--transition-custom); box-sizing:border-box;}
.main-visual-archive .left-box .link-btn .btn-txt{font-size:1.5rem; line-height:1.25; letter-spacing:-0.03em; color:#fff; margin-left:2rem;}
.main-visual-archive .right-box{width:63.3%;}
.main-visual-archive .right-box .main-archive-list{display: flex; flex-wrap:wrap; margin:0 -1rem; width:calc(100% + 2rem);}
.main-visual-archive .right-box .main-archive-list .list-item{width:calc(33.33% - 2rem); margin:1rem; border:1px solid rgba(255,255,255,0.2); border-radius:2rem; box-sizing:border-box; transition:var(--transition-custom);}
.main-visual-archive .right-box .main-archive-list .list-item a{ display: flex; justify-content: space-between; padding:3rem;}
.main-visual-archive .right-box .main-archive-list .list-item .txt{font-size:2.2rem; line-height:1.18; letter-spacing:0; color:#fff; font-weight:500; margin-bottom:1rem;}
.main-visual-archive .right-box .main-archive-list .list-item .num{font-size:1.5rem; line-height:1.25; letter-spacing:-0.03em; color:#fff; font-weight:700;}
.main-visual-archive .right-box .main-archive-list .list-item .icon-box .svg-item{display: block; width:5.8rem;}
.main-visual-archive .right-box .main-archive-list .list-item .icon-box .svg-item svg{display: block; width:100%;}

.main-visual-archive .right-box .main-archive-list .list-item:hover{background:var(--main-color2); border-color:var(--main-color2)}

.main-visual-archive .left-box .link-btn:hover .icon{background:var(--main-color2); border-color:var(--main-color2);}

/* animated */
.page-on .main-visual-txt-box{height:57%; padding-top:17rem;}

/* ******************  메인 컨텐츠 ********************** */
#mainContent1{}
/* 상단 스와이퍼 슬라이드 */
#mainContent1 .main-top-con{position: relative; width:100%; height:45%;}
#mainContent1 .main-top-con:before{position: absolute; content:''; width:100%; height:calc(100% - 5rem); background:var(--main-color); top:0; left:0;}
#mainContent1 .main-top-con:after{position: absolute; content:''; width:50%; height:calc(100% - 5rem); background:var(--main-color2); top:0; left:0;}
#mainContent1 .main-top-con > div{position: relative; height:100%; z-index:9;}
.slide-box-wrap{position: relative; display: flex; align-items: flex-end; height:100%;}
.slide-box-wrap .swiper{position: relative; width:50%; box-sizing:border-box; overflow:hidden;}
.slide-box-wrap .swiper .slide-item a{display: flex; align-items:center; transform:none;}
.slide-box-wrap .swiper .slide-item .img-box{width:44.18%;}
.slide-box-wrap .swiper .slide-item .img-box span{display: block;position: relative; width:100%; height:0; padding-top:73.68%;  border-radius:1rem; overflow:hidden;}
.slide-box-wrap .swiper .slide-item .img-box span img{position: absolute; width:100%; height:100%; top:0; left:0; bottom:0; right:0; margin:auto;}
.slide-box-wrap .swiper .slide-item .txt-box{width:55.72%; padding-left:4rem; box-sizing:border-box; margin-bottom:8rem;}
.slide-box-wrap .swiper .slide-item .txt-box .category{font-size:1.5rem; line-height:1.2; letter-spacing:0; color:#fff; font-weight:700;}
.slide-box-wrap .swiper .slide-item .txt-box .tit{font-size:3rem; line-height:1.33; letter-spacing:0.06em; color:#fff; font-weight:500; margin-top:2rem;}

/* 슬라이드 버튼 및 진행바 */
#mainContent1 .swiper-button{top:auto; bottom:0; left:auto; right:0; font-size:2.4rem; color:#222; height:auto; width:auto; bottom:2.5rem; transform:translateY(50%);}
#mainContent1 .swiper-button:after{display: none;}
#mainContent1 .swiper-button.swiper-button-prev{margin-right:3rem;}
#mainContent1 .swiper-pagination{top:auto; bottom:2.5rem; left:auto; right:10rem; height:2px; width:calc(55.72% - 14rem); z-index:-1;}
#mainContent1 .swiper-pagination-progressbar{background:#eee;}
#mainContent1 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#222}

.slide-box-wrap .swiper.left-swiper{margin-right:10rem;}
.slide-box-wrap .swiper.right-swiper{margin-left:10rem;}

/* 하단 게시판 */
#mainContent1 .main-bottom-con{position: relative; width:100%; height:55%; display: flex; align-items:center;}
#mainContent1 .main-bottom-con > div{width:100%;}
/* #mainContent1 .main-bottom-con .area-mian{width:100%;} */

/* 게시판 :: 탭 */
.main-tab-wrapper-style{position:relative;}
.main-tab-list-style ul{display:flex; width:calc(100% - 3rem); height:100%;}
.main-tab-list-style ul li{position:relative; margin-right:4rem;}
.main-tab-list-style ul li a{display: block;}
.main-tab-list-style ul li a em{font-size:2.5rem; letter-spacing:-0.05em; color:rgba(34,34,34,0.25); font-weight:700; transition:var(--transition-custom);}
.main-tab-list-style ul li a:hover em,
.main-tab-list-style ul li.selected a em{color:#222; }

.sub-tab-con{position: relative;}
.sub-tab-con .main-board-link{position: absolute; top:-2.5rem; right:0; transform:translateY(-100%); display: block; width:3rem; height:3rem; line-height:3rem; border:2px solid #555859; font-size:2.4rem; text-align:center; color:#222; border-radius:50%; box-sizing:border-box; transition:var(--transition-custom);}
.sub-tab-con .main-board-link:hover{background:var(--main-color2); border-color:var(--main-color2); color:#fff;}

/* 게시판 :: 컨텐츠 */
.main-board-list{display: flex; flex-wrap:wrap; align-content: flex-start; border-top:2px solid #222; border-bottom:1px solid #eee; padding:1rem 0; margin-top:3rem; min-height:15rem;}
.main-board-list .board-item{width:50%; padding-right:5rem; box-sizing:Border-box;}
.main-board-list .board-item a{position: relative;}
.main-board-list .board-item .item-tit{display: flex; width:calc(100% - 11rem); font-size:1.5rem; line-height:3.33; color:#222;}
.main-board-list .board-item .date{position: absolute; top:50%; right:0rem; font-size:1.3rem; color:#aaa; transform:translateY(-50%);}


/* ****************** 하단 퀵메뉴 ********************** */
.bottom-sub-menu{display: flex;}
.bottom-sub-menu .menu-item{width:33.33%;}
.bottom-sub-menu .menu-item a{position: relative; display: flex; align-items: center; justify-content: center; background:#000; height:16rem;}
.bottom-sub-menu .menu-item a:before{position: absolute; content:''; top:0; left:0; width:100%; height:100%; background:no-repeat center; background-size:cover; opacity:0.8;}
.bottom-sub-menu .menu-item a .txt{font-size:2.4rem; line-height:1.2; letter-spacing:0.12em; color:#fff; font-weight:700;}
.bottom-sub-menu .menu-item:nth-child(1) a:before{background-image:url('../images/main/main_bottom_img01.png');}
.bottom-sub-menu .menu-item:nth-child(2) a:before{background-image:url('../images/main/main_bottom_img02.png');}
.bottom-sub-menu .menu-item:nth-child(3) a:before{background-image:url('../images/main/main_bottom_img03.png');}

.bottom-sub-menu .menu-item:first-child a .txt{letter-spacing:1.2em;}


/* ******************  메인 왼쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	left:5rem;
    opacity: 1;
    transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; margin:20px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; box-sizing:border-box; padding:5px; }
#fp-nav ul li a span{display:block; width:5px; height:5px; background-color:rgba(255,255,255,0.3); border-radius:50%;}
#fp-nav ul li .fp-tooltip{
	display: none;
}
#fp-nav ul li a.active span{background:#fff;}

/* Black Style */
#fp-nav.black ul li a span{background-color:#ddd;}
#fp-nav.black ul li a.active span{background-color:var(--main-color2);}