@charset "utf-8";

@import url('common.css');
@import url('layout.css');
@import url('../js/slick/slick.css');
@import url('../js/slick/slick-theme.css');

/* color */
/* 공사 컬러 : blue, sky */
:root{
    --blue-color:#005BAC; 
    --sky-color:#00B2E3;
    --bg-sky-color:#f5f9ff;
    --navy-color:#0b3087;
    --border-gray:#d0d0d0;
}

.wrap {overflow:hidden;}

/* 메인 1단 */
.mainCnt_1 {padding:80px 0; width: 100%;}
.mainCnt_1 .searchWrap {margin-bottom:50px; width: 100%; display: flex; justify-content: center; position: relative; flex-direction:column; align-items: center;}
.mainCnt_1 .search_box {display:flex; border: 4px solid var(--blue-color); border-radius:50px; height: 70px; max-width:688px; width:100%; padding: 0 20px 0 30px; align-items:center; justify-content:space-between; box-sizing: border-box;}
.mainCnt_1 .search_box .text_box {width:calc(100% - 40px);}
.mainCnt_1 .search_box .text_box input {width: 100%; height: 100%; font-size: 20px;color: #222; box-sizing: border-box;border: 0; outline: 0; display: block; padding:0;}
.mainCnt_1 .search_box .text_box input::placeholder {color: #919191;}
.mainCnt_1 .search_box .search_btn {width: 40px;height: 40px;background: url('../img/main/icon_search_b.png') no-repeat center;}
.mainCnt_1 .search_tag {max-width:688px; width:100%; display: flex; padding-top: 10px; padding-left:34px; box-sizing: border-box;}
.mainCnt_1 .search_tag .tag{width:90px; color: #222; font-size: 18px;font-weight: bold;}
.mainCnt_1 .search_tag ul {width: calc(100% - 90px); display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.mainCnt_1 .search_tag ul li {float: left; font-size: 18px; font-weight: bold; color: #222; padding: 0 10px;}
.mainCnt_1 .search_tag ul li.tag_blue a{color:var(--navy-color);}

/* 더보기 공통 */
.more_area{font-size: 18px; color: #222; position: relative; padding-right:15px;}
.more_area::after{position:absolute; top:11px; right:2px;display: inline-block; width: 8px;height: 8px; border-top: 2px solid #555;border-left: 2px solid #555;box-sizing: border-box; content: " "; transform: rotate(135deg); }

/* 바로가기 아이콘 */
.mainCnt_1 .linkTit p {font-size: 26px; font-weight: bold; color: #222;}
.mainCnt_1 .linkTit a{position: relative; padding-right:15px; display:inline-flex; font-size: 18px; color: #222; align-items:center;}
.mainCnt_1 .linkTit a::after{position: absolute; display: inline-block; top:11px; right:2px; width: 8px;height: 8px;border-top: 2px solid #555;border-left: 2px solid #555;box-sizing: border-box; content: " "; transform: rotate(135deg);}
.mainCnt_1 .quick_link {width: 100%; display: flex; flex-wrap: wrap;}
.mainCnt_1 .quick_link .linkTit{width: 190px;}
.mainCnt_1 .quick_link .link_area{width: calc(100% - 190px);}
.mainCnt_1 .quick_link .link_area ul {display: flex; flex-wrap:wrap; justify-content:space-between; box-sizing: border-box;}
.mainCnt_1 .quick_link .link_area ul .link_item {transition:all 0.3s; position: relative; display: flex; width:120px; text-align: center; cursor: pointer;}
.mainCnt_1 .quick_link .link_area ul .link_item:last-child{margin-right: 0;}
.mainCnt_1 .quick_link .link_area ul .link_item a{width: 100%; height: 100%;display: inline-block;z-index:2;}
.mainCnt_1 .quick_link .link_area ul .link_item a .imgs{display:flex; align-items:center; justify-content:center; width:100%; height:120px; border:1px solid #c5c5c5; border-radius:10px; box-sizing:border-box;}
.mainCnt_1 .quick_link .link_area ul .link_item a .txts{display: inline-block; margin-top:7px; font-size: 18px; font-weight: bold; color: #222;}
/* Hover */
.mainCnt_1 .quick_link .link_area ul .link_item:hover{transform:translateY(-10px);}
.mainCnt_1 .quick_link .link_area ul .link_item a:hover .imgs{border-color:var(--blue-color);}
.mainCnt_1 .quick_link .link_area ul .link_item a:hover .txts{color: var(--blue-color);}

/* 메인 2단 */
.mainCnt_2 {padding:60px 0; width: 100%; background: #f0f4fd;}
.mainCnt_2 .title_box{display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--blue-color); padding-bottom: 10px;}
.mainCnt_2 .title_box .title_box_left{display: flex; align-items: baseline;}
.mainCnt_2 .title_box .title_box_left h2{font-size: 26px;font-weight: bold; color: #222;}
.mainCnt_2 .title_box .title_box_left span{font-size: 18px;color: #222; padding-left: 17px; font-weight:500;}
.mainCnt_2 .title_box .title_box_left .blue{color: var(--blue-color);}
.mainCnt_2 .tab_area  {position: relative;margin-top:16px; display:flex; justify-content: space-between;}
.mainCnt_2 .tab_area > ul {width:calc(100% - 614px); position:relative;}
.mainCnt_2 .tab_area .tabListBox{box-sizing: border-box; display:flex;}
.mainCnt_2 .tab_area .tabListBox::before {position: absolute; top:0; left:0; content:''; display:block; width:100%; height:60px; border-radius: 30px; background-color:#fff; border:1px solid #c5c5c5; box-sizing: border-box;}
.mainCnt_2 .tabListBox .tabList {width:calc(100% /3);}

.mainCnt_2 .tabListBox .tabList .title{width:calc(100% / 3); height: 60px;color: #222;font-size: 20px; font-weight: bold;  border-radius: 30px; position: absolute; top: 0;}
.mainCnt_2 .tabListBox .tabList.on .title{color: #fff;background-color: var(--blue-color);}
.mainCnt_2 .tabBox_List{width: 100%; display: flex; flex-wrap: wrap; justify-content:space-between;}
.mainCnt_2 .tabListBox .tabCnt_left{width:100%;}
.mainCnt_2 .tabListBox .tabList.on .tabCnt_area{display: block; position:absolute; width:100%; top:60px; left:0;}
.mainCnt_2 .tabListBox .tabList .tabCnt_area{display: none; width: 100%; }
.mainCnt_2 .tabBox_List .tab_boxItem{transition:background 0.3s; border: 1px solid #c5c5c5; background: #fff; width:calc((100% - 48px) / 3); margin-top:16px; height: 119px; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 10px;height: 120px; box-sizing: border-box;}
.mainCnt_2 .tabBox_List .tab_boxItem a {display:flex; justify-content: center; align-items: center; width:100%; height:100%; padding:5px; box-sizing: border-box;}
.mainCnt_2 .tabBox_List .tab_boxItem .txts{}
.mainCnt_2 .tabBox_List .tab_boxItem .txts>.titleSpan{width:100%; font-size: 20px; font-weight: bold; color: #222;}
.mainCnt_2 .tabBox_List .tab_boxItem .txts>span{display:inline-block; vertical-align:bottom; color: var(--blue-color); font-size: 26px; font-weight: bold; vertical-align: middle; word-break: break-all;}
.mainCnt_2 .tabBox_List .tab_boxItem .txts>em{display:inline-block; vertical-align:bottom; line-height:34px; font-size: 20px; color: #222;}
.mainCnt_2 .tabBox_List .tab_boxItem.active{background:var(--bg-sky-color);border: 2px solid var(--blue-color);box-shadow: 1px 8px 10px #a2c6ff42;}
.mainCnt_2 .tab_chart_area { display: flex; width:590px; height: 332px;}  
.mainCnt_2 .tab_chart_area .tab_chartBox {display:block; width:100%; border:1px solid #c5c5c5; box-sizing: border-box; border-radius:10px; overflow: hidden; }
.mainCnt_2 .tab_chart_area .tab_chartBox img{width: 100%;height: 100%;}

/* 메인 3단 */
.mainCnt_3 {display: flex; padding:60px 0;}
.mainCnt_3 .inner {display:flex; justify-content:space-between; gap:24px;}

/* 메인 3단 - 공지사항 */
.mainCnt_3 .noti {width: calc(100% - 881px);}
.mainCnt_3 .noti_title_box{display: flex; justify-content: space-between; border-bottom: 2px solid var(--blue-color); align-items: center; padding-bottom: 8px; box-sizing: border-box;}
.mainCnt_3 .noti_title_box h2{font-size: 26px; font-weight: bold;}
.mainCnt_3 .noti_title_box span{font-size: 18px;}
.mainCnt_3 .noti_List {width: 100%;}
.mainCnt_3 .noti_List li {width: 100%;}
.mainCnt_3 .noti_List li + li {margin-top:13px;}
.mainCnt_3 .noti_List li:first-child a{padding: 16px 0; border-bottom: 1px solid #c5c5c5;}
.mainCnt_3 .noti_List li a {display: flex; align-items: center; justify-content: space-between; position: relative;}
.mainCnt_3 .noti_List li:hover a span{text-decoration: underline;}
.mainCnt_3 .noti_List li:hover .date span{text-decoration: none;}
.mainCnt_3 .noti_List li:hover .txt_box strong{text-decoration: underline;}
.mainCnt_3 .noti_List li:hover .txt_box span{text-decoration: underline;}
.mainCnt_3 .noti_List li .date{display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; background: var(--blue-color); border-radius: 10px; width: 80px; height: 80px;}
.mainCnt_3 .noti_List li .date span{display: block; text-align: center; width: 100%; font-size: 26px; color: #fff; font-weight: bold;}
.mainCnt_3 .noti_List li .date em{font-size: 16px; font-weight: 400; color: #fff;}
.mainCnt_3 .noti_List li .txt_box{width: calc(100% - 100px); display: flex; align-items: center; align-content: center; flex-wrap: wrap; margin-left: 18px;}
.mainCnt_3 .noti_List li .txt_box strong{color: #222; font-size: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.mainCnt_3 .noti_List li .txt_box span{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;width: 100%;font-size: 16px; color: #555;}
.mainCnt_3 .noti_List li a > span {font-size: 18px; color: #222; padding-left: 14px; position: relative; white-space:nowrap;overflow: hidden;text-overflow: ellipsis; width: calc(100% - 115px);}
.mainCnt_3 .noti_List li a > span::before{content: " "; width: 4px; height: 4px; background: #9d9d9d;top: 12px; left: 1px; position: absolute;}
.mainCnt_3 .noti_List li a > em{color: #555; font-size: 18px;}

/* 메인 3단 - 연보 */
.mainCnt_3 .report_area {width:243px;}
.mainCnt_3 .report_title_box{display: flex; justify-content: space-between;align-items: center; padding-bottom: 7px;}
.mainCnt_3 .report_title_box h2{font-size: 26px; font-weight: bold;}
.mainCnt_3 .report_area .report_List {display:block; width:auto; height:350px; border: 1px solid #c5c5c5; box-sizing: border-box; overflow: hidden;}
.mainCnt_3 .report_area .report_List img {width:100%; height:100%;}


/* 메인 3단 - 알림판 */
.mainCnt_3 .newalarm_area {width:590px;position: relative;}
.mainCnt_3 .newalarm_title_box{padding-bottom: 7px;}
.mainCnt_3 .newalarm_title_box h2{font-size: 26px; font-weight: bold;}
.mainCnt_3 #slider-div{height: 350px;margin-bottom: 0; overflow: hidden;}
.mainCnt_3 .slick-slide a{display: block; ; width: 100%;height: 100%; box-sizing: border-box; border: 1px solid #c5c5c5;}
.mainCnt_3 .slick-slide img{height: 350px; width: 100%;}

/* 슬라이더 버튼 */
.popup-slider-btn {display:flex; justify-content: flex-end; align-items: center; height:20px; gap:5px; top:10px; right:0;border-top-left-radius:20px; position: absolute;}
.popup-slider-btn .prevArrow, 
.popup-slider-btn .nextArrow {position:relative; display:inline-flex; width:12px; height:12px; border-top:2px solid #333; border-left:2px solid #333; box-sizing:border-box;}
.popup-slider-btn .prevArrow {transform:rotate(315deg);}
.popup-slider-btn .nextArrow {margin:0 5px 0 0; transform:rotate(135deg);}
.popup-slider-btn .sliderPause {display:none; position:relative; margin:0 3px; width:10px; height:16px; border-left:2px solid #333; border-right:2px solid #333; box-sizing:border-box;}
.popup-slider-btn .sliderPlay {display:none; width: 0px; height: 0px; transform:rotate(270deg); border-top:10px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent;}
.popup-slider-btn .sliderPause.on, .popup-slider-btn .sliderPlay.on{display:block;}
.slick-counter {display:flex; align-items:center; position:absolute; bottom:13px; right:100px; font-size:18px; z-index:1; color:#333;}
.slick-dots{ display: none;}

/* 반응형 */

@media(max-width: 1400px) {
    /* 헤더 - 검색 영역 */
    .mainCnt_1{height: auto;}
    /* .mainCnt_1 .search_tag ul{width: 55%;} */
    .mainCnt_1 .search_tag ul li{font-size: 16px;}
    
    /* 메인 2단 */
    .mainCnt_2 .tabListBox .tabList .title{font-size: 18px;}
    .mainCnt_2 .tabBox_List .tab_boxItem .txts>p{font-size: 16px;}
    .mainCnt_2 .tabBox_List .tab_boxItem .txts>span{font-size: 20px;}
    .mainCnt_2 .tabBox_List .tab_boxItem .txts>em{line-height:27px; font-size: 16px;}

    /* 메인 3단 */
}

@media(max-width: 1300px) {
    /*메인 2단*/
    .mainCnt_2 .tab_area > ul {width:calc(100% - 524px); height:332px;}
    .mainCnt_2 .tab_chart_area {width:500px;}

    /*메인3단*/
    .mainCnt_3 .newalarm_area {width:500px;}
    .mainCnt_3 .noti {width:calc(100% - 791px);}
    
}

@media(max-width: 1200px) {
	/*메인 1단*/
	.mainCnt_1 .quick_link{display:block;}
	.mainCnt_1 .quick_link .linkTit{display:flex; justify-content:space-between; align-items:flex-end; width:auto; margin-bottom:10px;}
	.mainCnt_1 .quick_link .link_area{width:auto;}
	
    /*메인 3단*/
    .mainCnt_3 .inner {flex-wrap:wrap;}
    .mainCnt_3 .noti {width:100%; margin-bottom:6px;}
    .mainCnt_3 .noti_List {display:flex; flex-wrap: wrap; gap:16px; justify-content:space-between;}
    .mainCnt_3 .noti_List li:not(:first-child) {width:48%; margin-top:0;}
    .mainCnt_3 .newalarm_area {width:calc(100% - 267px);}
    
}

@media(max-width: 1024px) {
	/* 메인 1단 */
	.mainCnt_1 .linkTit p{font-size:22px;}
	.mainCnt_1 .linkTit a{font-size:16px;}
	.mainCnt_1 .quick_link .link_area ul{justify-content:normal; gap:20px 10px;}
	.mainCnt_1 .quick_link .link_area ul .link_item{width:calc((100% - 30px)/4);}
	.mainCnt_1 .quick_link .link_area ul .link_item a .txts{font-size:16px;}
	
    /*메인 2단*/
    .mainCnt_2 .tab_area {flex-direction:column;}
    .mainCnt_2 .tab_area > ul {width:100%;}
    .mainCnt_2 .tabBox_List .tab_boxItem {width:calc((100% - 32px) / 3);}
    .mainCnt_2 .tab_chart_area {width:100%; margin-top:16px;}

    /*메인 3단*/
    .mainCnt_3 .inner {gap:24px;}


}
@media(max-width: 960px) {
	/* 메인 2단 */
    .mainCnt_2 .title_box .title_box_left h2{font-size: 22px;}
    .mainCnt_2 .title_box .title_box_left span{font-size: 16px;}
    .mainCnt_2 .tabBox_List .tab_boxItem .txts>span{font-size: 22px;}
    .more_area{font-size: 16px;}
    .more_area::after{top:9px;}
    .mainCnt_2 .tabListBox .tabList .tab_title{width: 100%;}

    /* 메인 3단 */
    .mainCnt_3 .noti_title_box h2, .mainCnt_3 .report_title_box h2, .mainCnt_3 .newalarm_title_box h2 {font-size:22px;}
    .mainCnt_3 .noti {width: 100%; }
    .mainCnt_3 .slick-slide a{height: 350px;}
}

@media(max-width: 930px) {
    /*메인 3단*/
    .mainCnt_3 .noti_List li a > span,.mainCnt_3 .noti_List li a > em {font-size:16px;}
    

}


@media(max-width: 740px) {
	/* 메인 1단 */
	.mainCnt_1{padding:40px 0;}
	
    /* 메인 2단 */
    .mainCnt_2 {padding:40px 0;}
    
    /* 메인 3단 */
    .mainCnt_3 {padding:40px 0;}
    

}

@media(max-width: 640px) {
	/* 메인 1단 */
	.mainCnt_1 .quick_link .link_area ul{gap:12px 10px;}
	.mainCnt_1 .quick_link .link_area ul .link_item a .imgs{height:75px;}
	.mainCnt_1 .quick_link .link_area ul .link_item:nth-child(1) a .imgs>img{width:30px;}
	.mainCnt_1 .quick_link .link_area ul .link_item:nth-child(2) a .imgs>img{width:24px;}
	.mainCnt_1 .quick_link .link_area ul .link_item:nth-child(3) a .imgs>img{width:36px;}
	.mainCnt_1 .quick_link .link_area ul .link_item:nth-child(4) a .imgs>img{width:27px;}
	.mainCnt_1 .quick_link .link_area ul .link_item:nth-child(5) a .imgs>img{width:30px;}
	.mainCnt_1 .quick_link .link_area ul .link_item:nth-child(6) a .imgs>img{width:32px;}
	.mainCnt_1 .quick_link .link_area ul .link_item:nth-child(7) a .imgs>img{width:17px;}
	.mainCnt_1 .quick_link .link_area ul .link_item a .txts{line-height:18px; font-size:15px;}
		
    /*메인 3단*/
    .mainCnt_3 .noti_List {gap:10px;}
    .mainCnt_3 .noti_List li:not(:first-child) {width:100%;}
    .mainCnt_3 .noti_List li .txt_box {margin-left:0; width:calc(100% - 70px);}
    .mainCnt_3 .noti_List li .date {width:60px; height:60px;}
    .mainCnt_3 .noti_List li .date span {font-size:20px;}
    .mainCnt_3 .noti_List li .date em {font-size:14px;}
    
}

@media(max-width: 600px) {
    /* 메인 2단 */
    .mainCnt_2 .tab_area > ul {height:449px;}
    .mainCnt_2 .title_box .title_box_left {flex-direction: column;}
    .mainCnt_2 .title_box .title_box_left span{padding: 0;}
    .mainCnt_2 .tabBox_List .tab_boxItem{margin-top:10px; width: calc((100% - 10px) / 2);}
    .mainCnt_2 .tabBox_List .tab_boxItem .txts>p{font-size: 15px;}
    .mainCnt_2 .tabBox_List .tab_boxItem .txts>span{font-size: 18px;}
    .mainCnt_2 .tabBox_List .tab_boxItem .txts>em{font-size: 17px;}
    .mainCnt_2 .tabListBox .tabList .title{ font-size: 18px;}
    .mainCnt_2 .tab_chart_area {margin-top:10px;}

    /*메인 3단*/
    .mainCnt_3 .report_area {width:172px;}
    .mainCnt_3 .report_area .report_List {width:172px; height:250px;}
    .mainCnt_3 .newalarm_area {width:calc(100% - 196px); }
    .mainCnt_3 #slider-div {height:250px;}
    .mainCnt_3 .slick-slide img {height:250px;}
}

@media(max-width: 470px) {
    /* 메인 2단 */
    .mainCnt_2 .tabListBox .tabList .title{font-size: 15px;}
    .mainCnt_2 .tabBox_List .tab_boxItem .txts>span {font-size:15px;}
    
    /* 메인 3단 */
    .mainCnt_3 .inner {gap:10px;}
    .mainCnt_3 .newalarm_area {width: calc(100% - 155px);}
    .mainCnt_3 #slider-div {height:200px;}
    .mainCnt_3 .slick-slide img {height:200px;}
    .mainCnt_3 .report_area {width:145px;}
    .mainCnt_3 .report_area .report_List {width:145px; height:200px;}
    .mainCnt_3 .noti_List li .txt_box strong {font-size: 18px;}
    .mainCnt_3 .noti_List li .txt_box span{font-size: 15px;}
    .mainCnt_3 .noti_List li a > em{font-size: 16px;}
    
}

@media(max-width: 450px) {
	/* 메인 1단 */
	.mainCnt_1 .linkTit p{font-size:20px;}
	
    /*메인2단*/
    .mainCnt_2 .title_box .title_box_left h2 {font-size:20px;}

    /*메인3단*/
    
    .mainCnt_3 .noti_title_box h2, .mainCnt_3 .report_title_box h2, .mainCnt_3 .newalarm_title_box h2 {font-size:20px;}
}

@media(max-width: 370px) {
    /*메인 3단*/
    .mainCnt_3 .newalarm_area {width:100%;}
    .mainCnt_3  .report_List_wrap {display:flex; justify-content: center; align-items: center; background:linear-gradient(45deg, #f3f5ff, #e1e4fa); padding:20px 0; border-radius:20px;}
    .mainCnt_3 .report_area {width:100%;}
    .mainCnt_3 .report_area .report_List {box-shadow:3px 1px 11px #cdd2f1;}
    
}