@charset "utf-8";
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@keyframes vibes2{0%,40%,100% {transform:translateY(0)}20%,60% {transform:translateY(3px)}}



* {font-family: 'NanumSquareNeo' !important;}

#wrap {display:flex; justify-content:flex-start; align-items:flex-start; width:100%; max-width:1920px; height:100%; max-height:1080px; overflow:hidden;}
#wrap .logo {position:absolute; top:60px;left:200px;}
#wrap.bg {background-image: url("../img/bg-img.png"); background-repeat:no-repeat;}
#wrap .obj {background-image:url("../img/obj.png"); background-repeat:no-repeat; width:482px; height:452px; position:absolute; right:-0;top:5%}
#wrap .obj:before {content:'';display:block;background:url(../img/obj2.png);width:30px;height:33px;position:absolute;top:29px;right:288px;animation: vibes2 1.5s infinite;}

.box-wrap {width:100%; height:100%; padding:60px 120px;}
.title {position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:20px; }
.title span {z-index:1;position:relative;display:inline-block;padding:0;width:397px;height:46px;font-size:0;background:url("../img/title.png") no-repeat;}
.title h2 img {position:absolute;top:-45px;right:-78px;}
.title p, .title p b {font-size: 17px;font-family: 'Pretendard' !important;}

/* 탭 */
.tabs {position:relative;z-index:1;}
.tabs .tab-body {max-width:1420px; margin:0 auto;}
.tabs .tab-header {margin: 2.5rem 0 3rem;; justify-content:center;}
.tabs .tab-header::after{display:none;}
.tabs .tab-header > a,
.tabs .tab-header > button {position:relative;margin-left:-1px;padding:1rem 6rem;font-size:1rem;font-weight:normal;color:var(--c_gray_60);border:none; border-bottom:0;font-family:var(--f_nsN);background-color:#fff;cursor:pointer;}
.tabs .tab-header > button:nth-child(1) {border-radius: 10px 0 0 10px;}
.tabs .tab-header > button:nth-child(4) {border-radius: 0 10px 10px 0;}
.tabs .tab-header > a.active,
.tabs .tab-header > button.active {z-index:10; color:#fff; font-weight:bold; background:#004998; }
.tabs .tab-header > button.active::before {content:''; display: block; background:url("../img/tab-point.png"); width:40px; height:34px; background-repeat:no-repeat; position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);}
.tab-body::-webkit-scrollbar {
    width: 18px;
}

.tab-body::-webkit-scrollbar-thumb {
    height: 30%;
    border-radius:18px;
    background-clip:padding-box;
    border:6px solid white;
    background:var(--c_gray_40);
}

img.logo_blend {mix-blend-mode:darken;}

/* 탭컨텐츠 */
.board-content {/* margin-top:24px; */position:relative;z-index:200;}
.page-list {display:flex;justify-content: center;align-items:flex-start;flex-wrap:wrap;gap:20px;margin-bottom:2rem;}
.page-list li {width: calc(100%/6 - 18px);height: 158px;/* margin:0 8px; */}
.page-list li a {display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.page-list li a:hover .inner {border:2px solid transparent; background-image:linear-gradient(#fff, #fff), linear-gradient(135deg, #CE3B38 0%,  #299BC6 100%); background-origin: border-box; background-clip: content-box, border-box; box-shadow: 0 10px 15px 0 rgba(0,0,0,0.07);}
.page-list li a .inner {display:flex; width:100%; height:100%; background:#fff; justify-content:center; flex-direction:column; flex-wrap:wrap; align-items:center; border:1px solid #E3E4E9; border-radius:15px; gap:12px;}
.page-list li a .inner .thumb {width:70px; height:70px; border-radius:50%; background-color:#F8F9FB; background-repeat:no-repeat; background-position:center;}
.page-list li a .inner span {padding:0 8%; text-align:center; line-height:1.2;font-size:15px;}

/* 학종클 */
#tab3 {max-width:1330px;}
#tab3 .grap{position:absolute;top:130px;width:100%;}
#tab3 {position:relative;width:100%;}
#tab3 .district {display:none;width:600px;position:absolute;top:80px;right:0;}
#tab3 .w_info{flex-direction: column;position:relative;padding:60px 40px 40px 200px;border-radius:30px 30px 0 0 ;border:1px solid #EFEFEF;background:#fff;z-index:99;}
#tab3 .w_info strong{display:flex;align-items:center;gap:6px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #D7D7D7;font-size:24px;font-weight:800;}
#tab3 .w_info .imgwrap{position:absolute;left:40px;top:60px;width:126px;height:126px;padding:4px;border:1px solid #D7D7D7;border-radius:100px;overflow:hidden;background:#fff}
#tab3 .w_info .imgwrap img{border-radius:100px; width:100%; height:100%;object-fit:cover;}
#tab3 .more{width:100%; height:70px; background:#004998; border-radius:0 0 30px 30px; color:#fff; text-align:center; font-size:20px; font-weight:500; line-height:70px;}
#tab3 .more a {display: inline-block; padding-right:48px;}
#tab3 .more a::after{content:'';display:block;width:25px;height:25px;background:url(../img/more.png) no-repeat 50% 50%; position:absolute; bottom:24px; right:34%; opacity: 0; transition:all .4s; transform:translateX(-10px);}
#tab3 .more a:hover::after, #tab3 .more a:active::after {transform:translateX(0); opacity: 1;}

#tab3 .map_img_area {position:absolute;top:0px;left:0px;}
#tab3 .map_img {position:relative;width:601px;height:559px;background: url(../img/cn_map.png) no-repeat;background-size: contain;}
.map_img a._marker {transition:all .25s ease-out;position:absolute;}
.map_img a._marker em{display:block;position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:auto;min-width:44px;padding:5px 0;font-size:12px;border-radius:30px;line-height:1;font-weight:600;text-align:center;background-color:#5f81c0;color:#fff;z-index:500;}
.map_img a._marker.on em::after{content:'';position:absolute;left:16%;bottom:24px;transform:translateX(-50%);display:block;width:33px;height:32px;background:url(../img/ico_point_ov.png) no-repeat;animation: vibes2 1.5s 
ease infinite;}
.map_img a._marker.on em {display:block; z-index: 1;position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:auto;min-width:44px;padding:5px 0;font-size:12px;border-radius:30px;line-height:1;font-weight: 800;text-align:center;background-color:#fff;color:#CE3B38;}


/* 학종클 지도 */
.map_img .b_01 {top:69px;left:437px;}/* 천안 */ .map_img a._marker.b_01 em {top:45px;} /*천안*/
/*.map_img a._marker.b_01 em {top:40px;}
.map_img a._marker.b_01 em::after {top:-16px;bottom:0;transform:translateX(-50%) rotate(-180deg);}*/
.map_img .b_02 {top:301px;left:388px;}/* 공주 */
.map_img .b_03 {top:377px;left:193px;}/* 보령 */
.map_img .b_04 {top:146px;left:337px;}/* 아산 */ 
.map_img .b_05 {top:160px;left:143px;}/* 서산 */
.map_img .b_06 {top:431px;left:420px;}/* 논산계룡 */ .map_img a._marker.b_06 em {width:62px;}
.map_img .b_07 {top:94px;left:214px;}/* 당진 */
.map_img .b_08 {top:480px;left:534px;}/* 금산 */
.map_img .b_09 {top:420px;left:298px;}/* 부여 */
.map_img .b_10 {top:480px;left:235px;}/* 서천 */
.map_img .b_11 {top:320px;left:285px;}/* 청양 */
.map_img .b_12 {top:260px;left:202px;}/* 홍성 */
.map_img .b_13 {top:204px;left:280px;}/* 예산 */
.map_img .b_14 {top:157px;left:59px;}/* 태안 */

.map_img .b_01.on:before {content:'';display:block; background-image: url(../img/ch_ov.png);width:164px;height:174px;position:absolute;top:-28px;left:-88px;}
.map_img .b_02.on:before {content:'';display:block; background-image: url(../img/go_ov.png);width:159px;height:199px;position:absolute;top:-114px;left:-86px;}
.map_img .b_03.on:before {content:'';display:block; background-image: url(../img/br_ov.png);width:103px;height:177px;position:absolute;top:-115px;left:-52px;}
.map_img .b_04.on:before {content:'';display:block; background-image: url(../img/as_ov.png);width:115px;height:146px;position:absolute;top:-91px;left:-58px;}
.map_img .b_05.on:before {content:'';display:block; background-image: url(../img/se_ov.png);width:131px;height:198px;position:absolute;top:-138px;left:-62px;}
.map_img .b_06.on:before {content:'';display:block; background-image: url(../img/no_ov.png);width:138px;height:144px;position:absolute;top:-83px;left:-80px;}
.map_img .b_07.on:before {content:'';display:block; background-image: url(../img/dj_ov.png);width:157px;height:149px;position:absolute;top:-94px;left:-80px;}
.map_img .b_08.on:before {content:'';display:block; background-image: url(../img/ge_ov.png);width:129px;height:144px;position:absolute;top:-92px;left:-62px;}
.map_img .b_09.on:before {content:'';display:block; background-image: url(../img/bu_ov.png);width:154px;height:155px;position:absolute;top:-89px;left:-77px;}
.map_img .b_10.on:before {content:'';display:block; background-image: url(../img/seo_ov.png);width:150px;height:96px;position:absolute;top:-54px;left:-90px;}
.map_img .b_11.on:before {content:'';display:block; background-image: url(../img/cy_ov.png);width:142px;height:126px;position:absolute;top:-79px;left:-70px;}
.map_img .b_12.on:before {content:'';display:block; background-image: url(../img/ho_ov.png);width:126px;height:105px;position:absolute;top:-70px;left:-71px;}
.map_img .b_13.on:before {content:'';display:block; background-image: url(../img/ye_ov.png);width:152px;height:138px;position:absolute;top:-80px;left:-95px;}
.map_img .b_14.on:before {content:'';display:block; background-image: url(../img/tae_ov.png);width:125px;height:319px;position:absolute;top:-118px;left:-58px;}




/* 홍보·소통 */
.page-list.sns li a .inner .thumb {width:80px; height:80px;}
.page-list.sns li {width:calc(100%/2 - 198px); height:200px;}
.page-list.sns li a .inner {flex-direction:row; gap:40px;}
.page-list.sns li a .inner .sns_desc {width:270px; font-size:15px;}
.page-list.sns li a .inner .sns_desc .sns_title {margin-bottom:20px; font-family: 'GMarketSans' !important; font-size:20px; font-weight:700;}
.page-list.sns li a .inner .sns_desc .sns_title span {padding:0; font-family: 'GMarketSans' !important;  font-size:20px;}
.page-list.sns li a .inner .sns_desc .sns_title span.ytb {color:#E20000;}
.page-list.sns li a .inner .sns_desc .sns_title span.fb {color:#1877F2;}
.page-list.sns li a .inner .sns_desc .sns_title span.insta {color:transparent; -webkit-background-clip: text;  background-clip: text;background-image:linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%)}
.page-list.sns li a .inner .sns_desc .sns_title span.issue {color:#4161A6;}



footer {padding:40px 0; position:fixed; bottom:0;}
footer p {text-align:center; font-size:13px; }

/* 반응형 */
/*@media(max-width:1536px){
	.title {flex-direction:column; gap:16px;}
	.tab-body {overflow-y:scroll;height: 100%;padding-bottom:5rem}
	.tabs .tab-header > button {padding:1rem 1rem;}
}
@media(max-width:1440px){
	.desc span > br {display:none;}
	.title h2 img {top:-30px; right:-43px;}
	.tabs .tab-header {margin:1.5rem 0;}
	.page-list li {font-size:0.9rem;}
}

@media(max-width:1280px){
	.obj.num1, .obj.num2, .bg_obj {display:none;}
	.desc {padding-right:20px;}
	.bg {background: linear-gradient(90deg, rgba(41, 181, 199, 1) 0%, rgba(41, 153, 199, 1) 100%);}
	.left-box::before {display:none}
	.bg::before, .bg::after, .left-box::after {display:none;}
	.left-box {width:100%; height:auto; padding:58px 0 16px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:12px; background-image:url("../img/logo_bg.png"); background-size:300px; background-repeat:no-repeat; background-position: 20% 30%;}
	.left-box > img {width:150px; height:auto; padding-top:32px; position:absolute; left:4%; top:0;}
	.left-box .head_title {display:flex; flex-direction:column; justify-content:center; align-items:center; padding-top:16px;}
	.left-box .head_title a {position:relative;display:block; background-image:url("../img/head_title01.png"); background-repeat:no-repeat; width:345px; height:54px;}
	.left-box .head_title a:after {position:absolute;content:'';display:block;width:59px;height:52px;right:-30px;top:-24px;background:url('../img/head_title01_obj.png')no-repeat;}
	.left-box .head_title .desc {padding:0; margin-top:0;}
	.left-box .head_title .desc > p {margin:0;}
	.left-box .head_title .desc > p > br {display:none;}
	.left-box .head_title img {display:none;}
	.right-box {width:100%; height:calc(100% - 170px); border-radius:100px 100px 0 0; padding:20px 60px; position:relative;}
	.right-box::before {pointer-events:none;z-index:2;display:block; content:""; width:100vw; height:231px; position:absolute; bottom:0; left:0; background-image:url("../img/bg_img.png"); background-repeat:no-repeat; background-position:bottom; background-size:contain;}
	.title {flex-direction:column; display:none;}
	.title span {background-size:78%; height:26px;}
	.title p {font-size:0.9rem;}
}
@media(max-width:1024px){
	.page-list li {height:110px;}
	.inner {align-items:normal; gap:8px;}
	.inner span {font-size:0.9rem; width:151px; text-align:center;}
	.page-list li a .inner .thumb {width:45px; height:45px;}
}
@media(max-width:820px){
	#wrap {font-size:0.9rem;}
	.page-list {gap:8px;}
	.page-list li {width:160px; height:60px;}
	.page-list li a .inner {border-radius:7px;}
	.inner .thumb {display:none;}
	.inner span {width:100%; font-size:0.8rem;}
	.tabs .tab-header > button {font-size:0.9rem;}
}
@media(max-width:600px){
	.left-box {padding-top:36px; background-size:250px; background-position:50% 30%;}
	.left-box > img {width:120px; padding-top:20px;}
	.left-box .head_title .desc {text-align:center;}
	.left-box .head_title a {background-size:90%; background-position:center; height:52px;}
	.left-box .head_title .desc {font-size:0.8rem; padding:0 16%;}
	.right-box {height:calc(100% - 145px);padding:20px 44px; border-radius:80px 80px 0 0}
	.tabs .tab-header {margin:1rem 0;}
	.tabs .tab-header > button {font-size:0.8rem; padding:0.8rem 0.8rem;}
}
@media(max-width:524px){
	
	.left-box .head_title {padding-top:0;}
	.page-list {gap:10px;}
	.page-list li {width:90px; height:80px;}
	.tabs .tab-header {display:flex; flex-direction:row; flex-wrap:wrap; border-radius:none; background:none;}
	.tabs .tab-header > button {width:46%; height:50px; padding:2% 3%;}
	.tabs .tab-header .t1 {border-radius:0 20px 0 0;}
	.tabs .tab-header .t2 {border-radius:20px 0 0 0;}
	.tabs .tab-header .t3 {border-radius:0 0 0 20px ;}
	.tabs .tab-header .t4 {border-radius:0 0 20px 0 ;}
}
@media(max-width:400px){
	.tabs .tab-header > button {width:50%;}
	.left-box .head_title a {background-size:70%;}
}
@media(max-width:320px){
	.left-box {background-size:200px; background-position:50% -50%;}
	.left-box .head_title .desc {font-size:0.9em;}
}
*/