@charset "utf-8";

/*** Main Slide ***/
.MainSlider { width: 100%; height: 400px; position: relative; }
.MainSlider .swiper-slide { background: #f8f8f8; }

.MainSlider .main-slide01 { background: url(../images/main/MainSlide.svg) no-repeat center; background-size: cover; object-fit: cover; }
.MainSlider .main-slide02 { background: url(../images/main/img_main02.jpg) no-repeat center; background-size: cover; object-fit: cover; }
.MainSlider .main-slide03 { background: url(../images/main/img_main03.jpg) no-repeat center; background-size: cover; object-fit: cover; }

.MainSlider .main-slide001 { background: url(../images/main/img_main001.jpg) no-repeat center; background-size: cover; object-fit: cover; }
.MainSlider .main-slide002 { background: url(../images/main/img_main002.jpg) no-repeat center; background-size: cover; object-fit: cover; }
.MainSlider .main-slide003 { background: url(../images/main/img_main003.jpg) no-repeat center; background-size: cover; object-fit: cover; }

.MainSlider .swiper-slide .SlideTitle { position: relative; top: 50%; transform: translateY(-50%); width: 500px; padding-left: 5%; }

.SlideTitle h3 { font-size: 36px; font-weight: 700; color: #555555; line-height: 1.3; }
.SlideTitle h3 span { color: #003668; }
.SlideTitle > p { font-size: 17px; font-weight: 500; color: #505456; line-height: 1.5; margin-top: 25px; word-break: keep-all; }
.SlideTitle p span { color: #000; }

.pagination-wrap { 
	width: 300px; height: 20px; z-index: 2; bottom: 15%; position: absolute; left: 50%; margin: 0 auto; transform: translateX(-50%); 
	display: flex; flex-wrap: nowrap; align-items: center; margin-left: -639px; 
	}
.pagination-wrap .swiper-pagination-bullet { width: 15px; height: 15px; background: #A9A9A9; opacity: 1; }
.pagination-wrap .swiper-pagination-bullet-active { width: 48px; height: 15px; border-radius: 10px; background: #216EC5; position: relative; }
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,.swiper-pagination-fraction {
    bottom: -35px !important;
    left: 0;
    width: 100%
}


/**** 메인 컨텐츠 ****/
.main_intro_wrap {display:flex; width:100%; gap:35px; margin:50px 0; position:relative; }
.main_intro_wrap .main_repcon { width:100%; display:flex; flex-direction:column; gap:30px; }
.main_intro_wrap button { margin:0; }

/* 바로가기 메뉴 */
.main_quick { width:100%; display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.main_quick .btn_quick { 
	height:150px; display:flex; align-items:center; justify-content:center; flex-direction:column; border:solid 1px #cdcdcd; border-radius:10px;
	font-size:19px; font-weight:700; color:#333; line-height:1.0;  gap:20px; box-shadow: 0 2px 3px rgba(0,0,0,0.1); cursor:pointer;
	}
.main_quick  .btn_quick img { width:50px; height:50px; }
.main_quick .btn_quick:hover { border:solid 1px #a5bee7; outline:solid 3px rgba(33,110,197,0.1); color:#3573d8; }

/* 바로가기 메뉴(2) */
.main_quick_flex { width:320px; flex:none; display:grid; grid-template-rows:repeat(3, 1fr); gap:10px; }
.main_quick_flex .btn_quick { 
	height:100%; display:flex; align-items:center;  border:solid 1px #cdcdcd; border-radius:10px; padding:0 2.0rem; word-break:keep-all;
	font-size:19px; font-weight:700; color:#333; text-align:left; line-height:1.0;  gap:20px; box-shadow: 0 2px 3px rgba(0,0,0,0.1); cursor:pointer;
	
	}
.main_quick_flex  .btn_quick img { width:50px; height:50px; }
.main_quick_flex .btn_quick:hover { border:solid 1px #a5bee7; outline:solid 3px rgba(33,110,197,0.1); color:#3573d8; }

/* 공지사항 */
.main_news { width:100%; }
.main_news .news_head { display:flex; align-items:flex-start; justify-content:space-between; width:100%; height:35px; border-bottom:solid 2px #434343; box-sizing:border-box; }
.main_news .news_head p { font-size:22px; color:#333; font-weight:700; }
.main_news .news_head .btn_more { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:solid 2px #333; } 
.main_news .news_head .btn_more img { width:60%; object-fit:cover; }
.main_news .news_body { width:100%; height:calc(100% - 35px); box-sizing:border-box; padding-top:15px; }
.news_list { width:100%; }
.news_list li { display:inline-block; width:100%; position:relative; }
.news_list li:before {  content:""; display:inline-block; width:4px; height:4px; background:#999; border-radius:50%; margin-right:5px; position:relative; top:-3px; }
.news_item { display:inline-grid; grid-template-columns:1fr 100px; width:calc(100% - 20px); padding:3px 0; cursor:pointer; }
.news_item .news_tit { max-width:90%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:16px; color:#333; font-weight:500; }
.news_item .news_date { display:flex; align-items:center; justify-content:flex-end; width:100px; flex:none; font-size:15px; font-weight:400; color:#777; }
.news_item:hover .news_tit { text-decoration:underline; text-underline-offset:3px; color:var(--color-primary); }

/* 나의 사건 조회 */
.main_mycase  { width:430px; flex:none; background:#f1f2f5; border-radius:10px; overflow:hidden; box-sizing:border-box; padding:30px 35px; }
.mycase_head { display:flex; align-items:flex-start; width:100%; height:40px; }
.mycase_head p { font-size:22px; font-weight:700; color:#333;  }
.mycase_body { width:100%; height:calc(100% - 40px);  }
.mycase_item { display:flex; align-items:center; gap:10px; }
.mycase_item button { 
	width:100%; height:120px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; border-radius:5px;
	box-shadow:0 2px 3px rgba(0,0,0,0.1); box-sizing:border-box;
	} 
.mycase_item span { display:block; width:100%; font-size:18px; font-weight:700; color:#fff; }  
.mycase_item img { width:40px; height:40px; }
.mycase_item .btn_mycerti { background:#3573d8; }
.mycase_item .btn_mycase { background:#46a7ec; }
.mycase_item .btn_mycerti:hover { background:#265aaf; }
.mycase_item .btn_mycase:hover { background:#358dcb; }
.mycase_bt { width:100%; padding-top:15px; border-top:solid 1px #ddd;  }
.mycase_bt p { display:flex; align-items:center; font-size:16px; font-weight:600; line-height:1.0 !important;margin-bottom:5px; }
.mycase_bt p i { position:relative; top:-1px; }
.mycase_bt .lst_mycase { width:100%; }
.mycase_bt .lst_mycase li { display:inline-block; width:100%; font-size:13px; word-break:keep-all; margin-left:10px; text-indent:-9px; line-height:1.3; }
.mycase_bt .lst_mycase li:before { content:""; display:inline-block; width:3px; height:3px; background:#999; border-radius:50%; margin-right:5px; position:relative; top:-3px;  }


@media (max-width:1400px) {
	.main_quick .btn_quick { font-size:18px }
}

@media (max-width:1200px) {
	.main_intro_wrap { flex-direction:column; margin: 30px 0; padding: 0 10px; gap:20px; }
	.main_mycase { width:100%; }
	.mycase_item button { height:auto; flex-direction:row; padding:10px; }
	.mycase_item span { width:auto; }
	.main_quick .btn_quick { font-size:18px; }
	.main_quick_flex { width:100%; flex:auto; grid-template-columns:repeat(3, 1fr); grid-template-rows:auto; }
	.main_quick_flex .btn_quick { padding:30px; }
	.mycase_bt p { margin-bottom:5px; }
	
}

@media (max-width:1000px) {
	.main_quick { grid-template-columns:repeat(3, 1fr); }
	
}


@media (max-width:600px) {
	.main_quick { grid-template-columns:repeat(2, 1fr); }
	.main_quick .btn_quick { flex-direction:row; height:auto; padding:20px; justify-content: flex-start; font-size:16px;  }
	.main_quick .btn_quick img { width:30px; height:30px; }
	.main_quick .btn_quick span {word-break:keep-all;}
	.main_quick_flex { width:100%; flex:auto; grid-template-columns:repeat(1, 1fr); grid-template-rows:auto; }
	.mycase_item span { font-size:16px; }
	.mycase_item img { width:25px; height:25px; }
}

.Main-wrap { display: grid; grid-template-columns: 500px 1fr; position: relative; width: 100%; gap: 50px; padding: 50px 0; }
.MainLeft { position: relative; }
.MainRight { position: relative; }

.MainLeft ul { display: flex; flex-wrap: nowrap; position: relative; align-items: center; }
.MainLeft ul li { width: calc(100% / 4); }
.MainLeft ul li a { display: block; }

.MainLeft > ul > li a:hover { transform: translateY(-10px); transition: .4s ease; }
.MainLeft ul li a:hover p { color: #216EC5; }

.MainLeft ul li a i { height: 34px; display: block; text-align: center; margin-bottom: 10px; }
.MainLeft ul li a p { font-size: 15px; font-weight: 500; color: #222; text-align: center; }

.UserLogin { padding: 25px; position: relative; background: #F1F2F5; border-radius: 12px; margin-top: 25px; }
.UserLogin h3 { font-size: 20px; font-weight: bold; color: #222; margin-bottom: 15px; }
.UserLogin ul { display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 20px; }
.UserLogin ul li { width: calc(100% / 2); }
.UserLogin ul li:nth-child(1) { margin-right: 25px; }
.UserLogin ul li a { display: block; padding: 10px 20px; border-radius: 20px; background: red; text-align: center; font-size: 16px; color: #fff; }
.UserLogin ul li:nth-child(1) a { background: #216EC5; border: 1px solid #216EC5; }
.UserLogin ul li:nth-child(1):hover a { background: #fff; color: #216EC5; }
.UserLogin ul li:nth-child(2) a { background: #53AD8D; border: 1px solid #53AD8D; }
.UserLogin ul li:nth-child(2):hover a { background: #fff; color: #53AD8D; }
.UserLogin p { font-size: 16px; font-weight: bold; color: #222; margin-bottom: 15px; }
.UserLogin span { font-size: 13px; font-weight: 200; color: #222; display: block; word-break: keep-all; }

.Main-title { display: flex; flex-wrap: nowrap; position: relative; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.Main-title h3 { font-size: 18px; font-weight: bold; color: #000; }
.Main-title a:hover { transform: rotate(90deg); transition: .3s; }
.MainRight ul.NoticeList { display: block; }
.NoticeList li:not(:nth-last-child(1)) { margin-bottom: 24px; }
.NoticeList li a { display: block; position: relative; }
.NoticeList li a p { font-size: 17px; font-weight: bold; color: #000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; position: relative; width: 496px; }
.NoticeList li a:hover p { text-decoration: underline; }
.NoticeList li a span { display: block; padding-right: 120px; color: #666666; font-weight: 300; margin-top: 3px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 496px; }
.NoticeList li a b { position: absolute; bottom: 0; right: 0; font-size: 14px; font-weight: 300; color: #666666; }

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


@media all and (max-width:1200px) {
    .MainSlider { height: 300px; }
    .MainSlider .swiper-slide { background-size: auto auto; }
    .pagination-wrap { left: 20px; margin-left: 0; transform: translateX(0); bottom: 25px; }
    .swiper-pagination { text-align: start !important; }
    .SlideTitle h3 { font-size:2em; }
    .SlideTitle p { font-size:1em; }
}

@media all and (max-width:1024px) {
    .Main-wrap { display: block; }
    .MainRight { width: 100%; margin-top: 25px; }
    .MainLeft { display: flex; width: 100%; }
    .MainLeft > ul { flex-wrap: wrap; width: 45%; margin-right: 25px; }
    .MainLeft > ul li { width: calc(100% / 2); }
    .UserLogin { width: calc(100% - 45%); margin-top: 0; }
    .UserLogin ul li a { padding: 8px 20px; }
}

@media all and (max-width:780px) {
    .MainSlider { height: 220px; }
    .pagination-wrap .swiper-pagination-bullet { width: 13px; height: 13px; }
    .pagination-wrap .swiper-pagination-bullet-active { width: 35px; }
    .SlideTitle > p { margin-top: 15px; font-size: 14px; }
    .SlideTitle h3 { font-size: 25px; line-height:1.3; }
    .Main-wrap { padding: 30px 0; }
    .MainLeft { display: block; }
    .MainLeft > ul { width: 100%; flex-wrap: nowrap; }
    .MainLeft > ul li { width: calc(100% / 4); }
    .UserLogin { width: 100%; margin-top: 25px; }
}

@media all and (max-width:540px) {
    .Main-wrap { padding: 20px 0; }
    .MainSlider .swiper-slide { background-size: cover; }
    .MainSlider .swiper-slide .SlideTitle { width: 100%; top: 0; transform: translateY(0); margin-top: 35px; padding:0 8%; }
    .MainLeft ul li a p { font-size: 14px; }
    .NoticeList li a p,
    .NoticeList li a span { width: 100%; padding-right: 0; }
    .NoticeList li a p { font-size: 14px; }
    .NoticeList li a span { font-size: 13px; }
    .NoticeList li a b { position: relative; display: flex; justify-content: flex-end; font-size: 13px; }
    .NoticeList li:not(:nth-last-child(1)) { margin-bottom: 15px; }
    .Main-title { margin-bottom: 20px; }
}

@media all and (max-width:450px) {
    .UserLogin { padding: 20px; }
    .MainLeft > ul { flex-wrap: wrap; }
    .MainLeft > ul li { width: calc(100% / 2); }
    .MainLeft > ul li:nth-child(n + 3) { margin-top: 25px; }
    .UserLogin ul li a { font-size: 15px; }
    .UserLogin p { margin-bottom: 10px; }
    .UserLogin ul li:nth-child(1) { margin-right: 15px; }
}