@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans:400');
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean');

.mo { display: none;}

.banner { background: #f8fafb; padding: 6.2rem 0 10.6rem;}
.banner .inner { max-width: 1200px; margin: 0 auto;  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.banner .inner .info { width: 80%; margin: 0 auto;}
.banner .inner .info h2 { font-size: 2.8rem; font-weight: bold; margin-bottom: 1rem;}
.banner .inner .info p { font-size: 1.5rem; margin-bottom: 3.1rem; line-height: 1.2;}
.banner .inner .info a { align-items: center; gap: 1rem; font-size: 1.5rem; display: flex; padding: 1.2rem 2.8rem; border-radius: 1rem; background:#fff; border: 2px solid #ebebeb; color: #b3b3b3; }


main { margin-top: -5.6rem;}
main h3 { font-weight: 600; font-size: 1.5rem;}
main .main_clr { color: #0061ff; font-size: 1.2rem; font-weight: 500;filter: blur(4px); transition: .2s; position: relative;}
main .main_clr:hover { filter: blur(3px);}

main .inner	{ max-width: 1200px; margin: 0 auto;}

main .gonggo { padding: 3rem 0;}
main .gonggo h2 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1.8rem; padding-left: 1rem;}
main .gonggo ul { display: flex; justify-content: space-between; padding: 2.5rem 0; border-radius: .5rem; border: 1px solid #ebebeb;}
main .gonggo ul li { width: 33.3333%; border-right: 1px solid #ebebeb;}
main .gonggo ul li:nth-last-child(1) { border-right: none;}
main .gonggo ul li a { display: block; padding: 0 1.5rem; }
main .gonggo ul li a .name { margin-bottom: 1rem; font-weight: 600;}
main .gonggo ul li a .title { font-size: 1.5rem; font-weight: 700; height: 1.5rem;text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
main .gonggo ul li a .cate { color: #888; margin-top: .5rem;}
main .gonggo ul li a .district { margin: 1.5rem 0;color: #888; font-weight: 600;}
main .gonggo ul li a .btn { text-align: center; font-size: 1.2rem; font-weight: 600; padding: 1rem; border-radius: 10px; background: #d1e2ff; color: #2a69e1;}
main .gonggo ul li a .btn i { font-size: inherit; color: inherit;}

main .top_list { display: flex; background: #fff; padding: 2.5rem 0; border-radius: .5rem; border: 1px solid #ebebeb;}
main .top_list li { width: 33.3333%; border-right: 1px solid #ebebeb;}
main .top_list li:nth-last-child(1) { border-right: none;}
main .top_list li a { display: flex; flex-wrap: wrap; align-items: flex-start;justify-content: space-between;padding: 0 2rem;} 
main .top_list li a .left { width: 70%;}
main .top_list li a .left h3 { margin-bottom: .5rem;}
main .top_list li a .left p:nth-child(2) { color: #666; margin-bottom: 1.3rem;font-weight: 500;min-height: 2rem;}
main .top_list li a img { border: 1px solid #ddd; border-radius: .5rem}
main .top_list li a .yearsal { width: 100%;text-align: right; font-weight: 500;}

main .issue { margin: 9rem auto; display: flex; justify-content: space-between;}
main .issue > div { width: 49%;}
main .issue > div h2 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1.6rem; padding-left: 1rem;}
main .issue .left ul { padding: 1rem 3rem; border-radius: 10px; border: 1px solid #ebebeb; display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 3.4rem);}
main .issue .left ul li { height: calc(100% / 5);border-bottom: 1px solid #ebebeb;display: flex; align-items: center;}
main .issue .left ul li:nth-last-child(1){ border-bottom: none;}
main .issue .left ul li a { width: 100%;display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; }
main .issue .left ul li a .fl { display: flex; align-items: center; gap: 1rem;}
main .issue .left ul li a .fl .rank { background: #d1e2ff; padding: .3rem .5rem;}
main .issue .left ul li a .fl .name h3 { margin-bottom: .3rem;}
main .issue .right { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;}
main .issue .right .top ul {border: 1px solid #ebebeb; padding: 2.5rem 0; border-radius: 10px; display: flex; }
main .issue .right .top ul li { width: 50%; border-right: 1px solid #ebebeb; padding: 0 3rem; }
main .issue .right .top ul li:nth-child(n+2) { border-right: none;}
main .issue .right .top ul li a h3 { margin-bottom: .3rem; }
main .issue .right .top ul li a p:nth-child(2) { color: #666; margin-bottom: 1.3rem;}
main .issue .right .top ul li a p:nth-child(3) { text-align: right;}
/* main .issue .right .bottom { height: 50%;}
main .issue .right .bottom .ad_content .adsbygoogle { height: 200px;} */
main .issue .right .bottom { height: 50%; display: flex;  gap: 1rem;}
main .issue .right .bottom a { width: 50%; border: 1px solid #ebebeb; border-radius: 10px; padding: 1.5rem;}
main .issue .right .bottom a:nth-child(1) {background: url(../img/calc1.png) 90% 80% / 18% no-repeat;}
main .issue .right .bottom a:nth-child(2) {background: url(../img/calc2.png) 90% 80% / 18% no-repeat;}
main .issue .right .bottom a p:nth-child(1) { font-size: 1rem; color: #666; }
main .issue .right .bottom a p:nth-child(2) { font-size: 1.7rem; margin-top:.5rem; font-weight: 600; padding-right: 23%;}


main .recommend { margin-top: 5rem;}
main .recommend h2 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1.8rem; padding-left: 1rem;}
main .recommend ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
main .recommend ul li { width: calc(33.3333% - 1.8rem); margin-bottom: 1.8rem; border-radius: 10px; border: 1px solid #ebebeb; }
main .recommend ul li a .top { padding: 1.8rem ; border-bottom: 1px solid #ebebeb; display: flex; justify-content: space-between; align-items: flex-start;}
main .recommend ul li a .top .left .district { color: #949494; font-size: 1.1rem; margin-bottom: 1rem;}
main .recommend ul li a .top .left h3 { margin-bottom: .3rem;}
main .recommend ul li a .top .left P:nth-child(3) { font-weight: 500; color: #666; min-height: 2rem;}
main .recommend ul li a .top .right img{ border: 1px solid #ddd; border-radius: .5rem}
main .recommend ul li a .bottom { display: flex; padding: 1rem 2rem; align-items: center; justify-content: space-between;}
main .recommend ul li a .bottom p { font-size: 1.2rem; font-weight: 500;}

main .content_list { background: #f8fafb; padding: 6rem 0; margin: 7rem 0 0;}
main .content_list .content_title { display: flex; justify-content: space-between; margin-bottom: 1.5rem;}
main .content_list .content_title h2 { font-weight: 600; font-size: 1.8rem;}
main .content_list .content_title a { font-size: 1.2rem; display: flex; align-items: center; gap: 0.6rem;}
main .content_list .slide_wrap { display: flex; jsutify-content: space-between; gap: 1rem;}
main .content_list .slide_wrap .slide { overflow: hidden; border-radius: 10px; border: 1px solid #ebebeb;}
main .content_list .slide_wrap .slide a { display: flex; flex-direction: column; }
main .content_list .slide_wrap .slide a .img_wrap { height: 50%; background: #fff; }
main .content_list .slide_wrap .slide a .img_wrap img { width: 100%;}
main .content_list .slide_wrap .slide a .text_wrap { background: #fff; padding: 2rem; height: 50%;}
main .content_list .slide_wrap .slide a .text_wrap span { padding: .3rem .6rem; border-radius: 14px; border: 1px solid #0061ff; color: #0061ff; }
main .content_list .slide_wrap .slide.yellow .text_wrap span { border: 1px solid #ff9300; color: #ff9300; }
main .content_list .slide_wrap .slide a .text_wrap p { min-height: 2.4rem;margin-top: 1.5rem; font-size: 1.2rem; font-weight: 600;}

main .function_content { margin: 7rem 0;display: flex; justify-content: space-between; height: 300px; gap: 2rem; }
main .function_content .left { width: 28%; display: flex; flex-direction: column; gap: 1rem;}
main .function_content .left a { height: 50%; border: 1px solid #ebebeb; border-radius: 10px; padding: 2rem;}
main .function_content .left a:nth-child(1) {background: url(../img/calc1.png) 90% 80% / 18% no-repeat;}
main .function_content .left a:nth-child(2) {background: url(../img/calc2.png) 90% 80% / 18% no-repeat;}
main .function_content .left a p:nth-child(1) { font-size: 1.2rem; color: #666; }
main .function_content .left a p:nth-child(2) { font-size: 1.5rem; margin-top:.5rem; font-weight: 600; padding-right: 23%;}
main .function_content .center { width: 26%; background: #d9e8ff; border-radius: 10px; padding: 3rem 2rem;}
main .function_content .center > p { color: #4193f6; font-size: 1.2rem;} 
main .function_content .center > h2 { line-height: 1.2;font-size: 1.5rem; font-weight: 600; margin: 1rem 0 2rem;}
main .function_content .center ul li a { display: flex; align-items: center; justify-content: space-between; width: 80%;padding: 0.8rem 1.3rem; border-radius: 20px; }
main .function_content .center ul li:nth-child(1) a { margin-bottom: 1rem; background: #4193f6; color: #fff; }
main .function_content .center ul li:nth-child(2) a { background: #fff;}
main .function_content .right { width: 46%;}

.contact { width: 50%; border-radius: 15px; overflow: hidden; position: relative;border: 1px solid #ddd; display: flex; align-items: flex-end; background: #fdfeff;}
.contact .text_wrap { position: absolute;top: 50%; transform: translateY(-50%); left: 0; width: 100%;padding: 1.5rem;}
.contact .text_wrap h2 { margin-bottom: .5rem; font-family:'Black Han Sans';font-size: 2.4rem; color: #0b44ad;font-weight: unset; padding-left: 0;}
.contact .text_wrap p { margin-top: .5rem; line-height: 1.2;}
.contact .text_wrap p span { font-weight: 600; font-size: 1.2rem; color: #0b44ad;}
.contact .text_wrap p:nth-child(2) { color: #676767;}
.contact .text_wrap p:nth-child(3) { user-select: text; margin-top: 1rem; font-weight: 600; word-break: break-word;}
.contact .text_wrap p:nth-child(3) span { font-size: 1rem; display: block; margin-bottom: -0.3rem;}
.contact .text_wrap button {font-size: 14px;font-weight: bold; background: #fff; border-radius: 15px; padding: 0.2rem .5rem 0.2rem .5rem; border: 1px solid #333; background: #fff;}
.contact .text_wrap button:hover { background: #f0f0f0;}
.contact img { width: 100%; vertical-align: bottom;}


/* 컨텐츠 영역보다 작아졌을때 */
@media screen and (max-width: 1200px) {
	.banner { padding: 6.2rem 1.5rem 10.6rem;}
	.inner { padding: 0 1.5rem;}
	.banner .inner { padding: 0;}
	.banner .inner .contact .text_wrap h2 { font-size: 2.2rem;}
}

@media screen and (max-width: 767px) {
	.mo { display: block;}
	main { margin-top: 1.5rem;}
	.banner { padding: 5rem 1.5rem; }
	.banner .inner { flex-direction: column;}
	.banner .inner .info { width: 100%;}
	.banner .inner .info h2 { font-size: 2.4rem; text-align: center;}
	.banner .inner .info p { text-align: center; font-size: 1.3rem;}
	.banner .inner .info a { padding: 1.2rem 1.5rem;}
    .contact { width: 100%;}
    .contact .text_wrap h2 { font-size: 3rem;}
    .contact .text_wrap p { font-size: 1.4rem;}
    .contact .text_wrap p span { font-size: 1.6rem;}
    .contact .text_wrap p:nth-child(3) { line-height: 1.5;}
    .contact .text_wrap p:nth-child(3) span { font-size: 1.2rem;}

	main .top_list { flex-direction: column; padding: 0;}
	main .top_list li { width: 100%; border-right: unset; border-bottom: 1px solid #ebebeb;}
	main .top_list li:nth-last-child(1) { border-bottom: unset;}
	main .top_list li a { padding: 2rem;}
	main .top_list li a .yearsal { margin-top: .7rem;}
	main .top_list li a .left p:nth-child(2) { font-size: 1.2rem;}

	main .gonggo ul { flex-wrap: wrap; border: none; padding-top: 0;}
	main .gonggo ul li { width: 100%; border: 1px solid #ebebeb; border-radius: 10px; padding: 2rem 1.5rem; margin-bottom: 2rem; border: 1px solid #ebebeb;}
	main .gonggo ul li:nth-last-child(1) { border-right: 1px solid #ebebeb;}
	main .gonggo ul li a { padding: 0;}
	main .gonggo ul li a .cate { font-size: 1.4rem;}
	
	main .issue { flex-direction: column;}
	main .issue > div { width: 100%; }
	main .issue .left ul { padding: 1rem 1.5rem;}
	main .issue .left ul li:nth-child(4) { border-bottom: none;}
	main .issue .left ul li:nth-child(5) { display: none;}
	main .issue .right { margin-top: 3rem;}
	main .issue .right .top ul li { padding: 0 1.5rem;}
	main .issue .right .top ul li a h3 { height: 1.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
	main .issue .right .top ul li a p:nth-child(2) { font-size: 1.2rem;}
	main .issue .right .bottom { height: unset; flex-wrap: wrap; }
	main .issue .right .bottom a { width: 100%;}
	main .issue .right .bottom a p:nth-child(1) { font-size: 1.2rem;}
	main .issue .right .bottom a:nth-child(1) { background: url(../img/calc1.png) 90% 80% / 14% no-repeat;}
	
	main .recommend { margin-top: 3rem;}
	main .recommend ul { flex-direction: column;}
	main .recommend ul li { display: none; width: 100%;}
	main .recommend ul li:nth-child(1),
	main .recommend ul li:nth-child(2),
	main .recommend ul li:nth-child(3),
	main .recommend ul li:nth-child(4){ display: block;}
	main .recommend ul li a .top { padding-bottom: 1rem;}
	main .recommend ul li a .top .left P:nth-child(3) { font-size: 1.2rem;}

	main .content_list .slide_wrap .slide a .text_wrap { padding: 1.2rem;}
	main .content_list .slide_wrap .slide a .text_wrap p { line-height: 1.2;}


	main .function_content { flex-wrap: wrap; gap: unset;}
	main .function_content .left { width: 49%;}
	main .function_content .left a { padding: 1.2rem;}
	main .function_content .left a p:nth-child(1) { display: none;}
	main .function_content .left a p:nth-child(2) { padding-right: 0;} 
	main .function_content .center { width: 49%; padding: 1.2rem;}
	main .function_content .center ul li a { width: 100%;}
	main .function_content .right { width: 100%; margin-top: 1rem;}
}