
#main{position: relative; }
#section1{overflow: hidden;}
.msec1{position: relative;}
.msec1 .swiper-slide{overflow:hidden}
.msec1 .swiper-slide .slogan{position:absolute; z-index:10; top:20%; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); }
.msec1 .swiper-slide .slogan p{color:#fff; font-weight: bold; position: relative; text-shadow: 0 0 0.5rem rgba(0,0,0,0.1);}
.msec1 .swiper-slide .slogan .text1{top:30px; opacity:0; font-size:5rem; margin-bottom: 30px; font-weight: 800; transition:0.5s 0.5s}
.msec1 .swiper-slide .slogan .text2{top:20px;opacity:0; filter: blur(10px); font-size:3.6rem; font-weight: 900;  transition:0.5s 1s}
.msec1 .swiper-slide .slogan .text3{top:30px;opacity:0; filter: blur(10px); font-size:2rem;  transition:0.5s 1s}


.msec1 .swiper-slide .bg{transform:scale(1.1);transition:10s; height:90rem; position: relative;}
.msec1 .swiper-slide .bg::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0;}
.msec1 .swiper-slide .bg img{width:100%; height: 100%; object-fit: cover;}

.msec1 .swiper-slide-active .bg{transform:scale(1)}
.msec1 .swiper-slide-active .slogan .text1{top:0;opacity:1; letter-spacing:normal;}
.msec1 .swiper-slide-active .slogan .text2{top:0;opacity:1; filter:blur(0)}
.msec1 .swiper-slide-active .slogan .text3{top:0;opacity:1; filter:blur(0)}

/*swiper*/
.msec1 .swiper-button-prev{width: 5rem; height: 5rem; background: url(../images/main/prev.png) no-repeat center; top:70%; left:50%; transform: translateX(-70rem);}
.msec1 .swiper-button-next{width: 5rem; height: 5rem; background: url(../images/main/next.png) no-repeat center; top:70%; left:50%; transform: translateX(-63rem); right:0}
.msec1 .swiper-pagination{max-width:var(--container); font-weight: bold; padding:0 2rem; text-align: center; color:#fff; position: absolute; left: 50%; transform: translate(-50%);  bottom: 10rem;}

.swiper-progress-bar {position:  absolute; left: 50%; transform: translate(-50%);; width:100%; max-width: var(--container); display: block; z-index: 1; height:.5rem; }
.swiper-progress-bar .slide_progress-bar {position: absolute; height: .3rem; background:#fff; width:50rem; clear: both; opacity:1; bottom: 35rem; left: 0;  right: 0; }
.swiper-progress-bar .slide_progress-bar:after {position: absolute; top: 0; left: 0; background:var(--sub_color); height: 100%; width: 0; content: ""; transition: 0.1s width linear;}
.swiper-progress-bar.active .slide_progress-bar {opacity: 1;}
.swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear;transition-delay: unset; width: 100%; transition-duration: 5s;}


/* 업무지원 */
.business{padding: 10rem 0; overflow: hidden; position: relative;}
.business::before{content: ''; width: 100%; height: 30%; background: var(--main_color); position: absolute; bottom: 0; left: 0;}
.business .inner{overflow: hidden;}
.business h2{font-size: 4rem; font-weight: bold; text-align: center;}
.title_bottom{color:#525252; text-align: center; margin-bottom: 8rem;}

.business_slide p{position: relative; overflow: hidden;}
.business_slide p::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0;}
.business_slide p img{transition: .5s;}

.business_slide p:hover img{scale: 1.2;}
.business_slide span{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff; z-index: 9; font-weight: bold; font-size: 2rem; display: block; 
    text-align: center;}


/* 하단 영역 */
.main_board{padding: 10rem 0}
.main_board .inner{display: flex; gap:5rem}

.board_zone{width:65%; display: flex; flex-wrap: wrap; }
.board_box{width: 50%; border:1px solid #ccc; border-bottom: 0; padding: 3rem;}
.border_none{border-left:none;}

.board_box h2{font-weight: bold; font-size: 2.2rem; margin-bottom: 2rem;}
.board_box ul li{display: flex; align-items: center; justify-content: space-between; gap:5rem; padding-bottom: 1rem;}
.board_box ul li a{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.board_box ul li span{color:#666; font-size: 1.4rem;}

.main_icon{width: 100%; display: table; border-collapse: collapse;  text-align: center;}
.main_icon li{display: table-cell; border: 1px solid #ccc;  width: 25%;}
.main_icon img{display: block; margin: auto; margin-bottom: 1rem;}
.main_icon li a{display: block; padding:2rem; transition: .5s;}
.main_icon li p{width: 4.6rem; height: 4.3rem; margin: auto; margin-bottom: 1rem;}
.main_icon li:nth-child(1) p{background: url(../images/main/main_icon01.png);}
.main_icon li:nth-child(2) p{background: url(../images/main/main_icon02.png);}
.main_icon li:nth-child(3) p{background: url(../images/main/main_icon03.png);}
.main_icon li:nth-child(4) p{background: url(../images/main/main_icon04.png);}

.main_icon li a:hover{background: var(--main_color); color:#fff}
.main_icon li:nth-child(1) a:hover p{background: url(../images/main/main_icon01_on.png);}
.main_icon li:nth-child(2) a:hover p{background: url(../images/main/main_icon02_on.png);}
.main_icon li:nth-child(3) a:hover p{background: url(../images/main/main_icon03_on.png);}
.main_icon li:nth-child(4) a:hover p{background: url(../images/main/main_icon04_on.png);}


.popup_zone{overflow: hidden; position: relative; width: calc(35% - 5rem);}

/* 기관 슬라이드 */
.agency{}
.agency .inner{overflow: hidden; padding-bottom:  10rem;}
.agency_slide img{border: 1px solid #ccc;}