@charset "utf-8";

#container{padding-top:40px}
#container:before{height:910px;}
#content{width:100% !important; min-height:calc(910px - 125px); padding:0 !important; background-color:transparent !important; border-radius:0;}
#content:before,
#content:after{content:''; display:block; position:absolute; bottom:0; z-index:-2; width:50%;}
#content:before{left:0; height:93px; background:url(../images/main/bg_main_left.gif) repeat-x 0 0;}
#content:after{right:0; height:67px; background:url(../images/main/bg_main_right.gif) repeat-x 0 0;}

.main-wrap{display:grid; grid-template-columns:repeat(2, 1fr); gap:0 40px; width:1540px; box-sizing:border-box; padding:0 20px; margin:0 auto;}
.main-wrap:before{content:''; display:block; position:absolute; bottom:0; left:0; z-index:-1; width:100%; height:392px; background:url(../images/main/bg_main.png) no-repeat 50% 100%;}

.group-col03{display:grid; grid-template:190px 190px / 1fr 297px; gap:20px;}
.group-col03 article{overflow:hidden; background-color:#fff; border-radius:20px;}

/* 통합검색 */
[data-main="total"]{padding-top:80px;}
[data-main="total"] em{display:block; font-family:var(--font-eng); font-size:25px;}
[data-main="total"] h2{margin-top:40px; font-size:55px; font-weight:700; line-height:1.3;}
[data-main="total"] h2 strong{background:-webkit-linear-gradient(0deg, #014194, #029266); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.total-search{position:relative; width:710px; height:80px; box-sizing:border-box; margin-top:60px; padding:0 80px; background-color:#fff; border:3px solid var(--color-point); border-radius:50rem; box-shadow:0 15px 30px rgba(0,0,0,0.1);}
.total-search input[type="text"]{width:100%; height:100%; background:transparent; border:0; font-size:20px; font-weight:500; color:var(--color-point);}
.total-search input[type="text"]::placeholder{font-size:20px; color:#444; font-weight:400;}
/* .total-search input[type="text"]:focus{outline:none;} */
.total-search .btn{position:absolute; right:20px; top:50%; width:50px; height:50px; background:transparent url(../images/main/total_search.svg) no-repeat 50% 50%; background-size:23px 23px; border:0; transform:translateY(-50%);}
.total-search .xi-keyboard-o{position:absolute; left:40px; top:50%; font-size:25px; transform:translateY(-50%);}
[data-main="total"] em,
[data-main="total"] h2{opacity:0; transform:translateY(30px); transition:1s cubic-bezier(0.14, 0.3, 0.21, 1.07) 0s; transition-property:opacity, transform;}
[data-main="total"].active em,
[data-main="total"].active h2{opacity:1; transform:translateY(0);}
[data-main="total"].active em{transition-delay:0.1s;}
[data-main="total"].active h2{transition-delay:0.3s;}

/* 바로가기 */
[data-main="link"]{display:grid; grid-template-columns:repeat(2, 1fr); position:relative; min-height:330px; box-sizing:border-box; margin-bottom:20px; background-color:#fff; border:3px solid #c5dcee; border-radius:20px;}
[data-main="link"]:after{content:''; display:block; position:absolute; left:50%; top:0; width:1px; height:100%; background:#c5dcee;}
[data-main="link"] i{display:block; width:64px; height:62px; margin:0 auto;}
[data-main="link"] i img{width:100%;}
[data-main="link"] em{display:block; margin-top:5px; line-height:1.2; font-size:16px; font-weight:500; text-align:center;}
[data-main="link"] .box{position:relative;}
[data-main="link"] .box:before{content:''; opacity:0; display:block; position:absolute; top:-3px; z-index:1; width:calc(100% + 3px); height:calc(100% + 6px); box-sizing:border-box; border:3px solid transparent; border-radius:20px; background-image:linear-gradient(#fff, #fff), linear-gradient(0deg, #014194, #029266); background-origin:border-box; background-clip:content-box, border-box; box-shadow:0 15px 20px rgba(0,0,0,0.15); transition:opacity 0.3s ease;}
[data-main="link"] .box:nth-of-type(1):before{left:-3px;}
[data-main="link"] .box:nth-of-type(2):before{right:-3px;}
[data-main="link"] h3{display:flex; justify-content:center; align-items:center; position:absolute; top:-3px; left:50%; z-index:5; width:120px; height:37px; background-color:#dbefff; border-radius:0 0 10px 10px; font-size:17px; color:var(--color-point); font-weight:700; transform:translateX(-50%); transition:0.3s ease;}
[data-main="link"] .list{display:flex; flex-wrap:wrap; gap:30px; position:relative; z-index:10; padding:80px 50px 0;}
[data-main="link"] .list li{flex:1 1 auto;}
[data-main="link"] .list li.col{flex:0 1 100%;}
[data-main="link"] .list a{display:block;}
[data-main="link"] .list li.col a{display:flex; justify-content:center; align-items:center; gap:15px; height:80px; box-sizing:border-box;  background-image:linear-gradient(0deg, #e1f0ff, #fff); border:2px solid #a1c0e0; border-radius:10px;}
[data-main="link"] .list li.col a i{flex:none; margin:0;}
[data-main="link"] .box:hover:before{opacity:1;}
[data-main="link"] .box:hover h3{background-color:#009167; color:#fff;}

/* 공지사항 */
[data-main="notice"]{grid-row:1/3; position:relative; padding:30px 20px;}
[data-main="notice"] h3{display:inline-flex; justify-content:center; align-items:center; width:102px; height:35px; background-color:var(--color-point); border-radius:50rem; color:#fff; font-size:14px; font-weight:600;}
[data-main="notice"] .list{margin-top:5px;}
[data-main="notice"] .list > li > a{display:flex; flex-direction:column; gap:2px 0; padding:15px 0px; border-top:1px solid #e8eaec;}
[data-main="notice"] .list > li > a strong{font-size:16px; font-weight:600; letter-spacing:-1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color 0.3s ease;}
[data-main="notice"] .list > li > a i{opacity:0.6; font-size:14px;}
[data-main="notice"] .list > li:first-child > a{border-top-width:0;}
[data-main="notice"] .list > li > a:hover strong{color:var(--color-point);}
.more-btn{display:block; position:absolute; right:20px; top:30px; width:35px; height:35px; background:#c5ddf1 url(../images/main/more_arrow.svg) no-repeat 50% 50%; background-size:12px 10px; border-radius:100%; font-size:0; transition:background 0.3s ease;}
.more-btn:hover{background-color:#9dd2ff;}

/* 자원현황 */
[data-main="source"]{display:flex; flex-direction:column; padding:30px 20px 20px; background:url(../images/main/source_bg.jpg) no-repeat 50% 50%; background-size:cover; color:#fff;}
[data-main="source"].rec{background-image:url(../images/main/rec_bg.jpg);}
[data-main="source"] h3{font-size:23px; font-weight:600; letter-spacing:-1px;}
[data-main="source"] p{margin-top:5px; font-size:16px; letter-spacing:-1px; word-break:keep-all; line-height:1.3;}
[data-main="source"] .arrow-btn{display:flex; justify-content:center; align-items:center; position:relative; height:40px; box-sizing:border-box; margin-top:auto; background-color:#fff; border:2px solid #fff; border-radius:50rem; font-size:15px; color:#111; font-weight:600; transition:0.3s ease;}
[data-main="source"] .arrow-btn:after{content:''; display:block; position:absolute; right:6px; top:50%; width:30px; height:30px; background:#c5ddf1 url(../images/main/more_arrow.svg) no-repeat 50% 50%; background-size:12px 10px; border-radius:100%; transform:translateY(-50%); transition:background 0.3s ease;}
[data-main="source"] .arrow-btn:hover{border-color:var(--color-point); box-shadow:0 10px 20px rgba(0,0,0,0.2);}