@charset "UTF-8";
/*-------------------------------------------------
title       : 인체유래은행 메인
Author      : 허수정
Create date : 2023-10
-------------------------------------------------*/

/* 메인 전체 */
#wrap.main { background:linear-gradient(180deg, #FFF 0%, #E2E6F8 46.41%); }

/* 비주얼 */
#visual { position:relative; padding:8.9rem 2rem 18.1rem; text-align: center; }
#visual::before, #visual::after { content:""; position:absolute; }
#visual::before { top:38%; left:7.5rem; width:23.8rem; height:22.1rem; background:url("../../../image/service/main/mainHuman/visual_bg01.png") no-repeat 50% 50% / 100%; }
#visual::after { bottom:0; right:0; width:34.1rem; height:43.2rem; background:url("../../../image/service/main/mainHuman/visual_bg02.png") no-repeat 50% 50% / 100%; }
#visual .icon { display:block; max-width:46.6rem; margin:0 auto; }
#visual .icon img { max-width:100%; }
#visual h2 { position:relative; margin:1.2rem 0 1rem; color:#111; font-size:8.6rem; font-weight:900; line-height:1.1;font-family:'Inter'; z-index: 2; }
#visual h2 em { color: #002AC1; }
#visual p { position:relative; font-size:5.2rem; font-weight:600; font-family:'Inter'; line-height:1.1; z-index: 2; }
#visual p b { color:#002AC1; }
#visual .search_form { position:relative; z-index: 2; }
#visual .search_form .input-group { position:relative; width:100%; max-width: 60rem; margin:4.5rem auto 6rem; border-radius: 16px; background:#fff; box-shadow: 0px 18px 40px 0px rgba(97, 108, 157, 0.24); overflow: hidden; }
#visual .search_form .input-group::before { content:"\f0d1"; position:absolute; top:50%; left:3rem; color:#6B6E78; font-size:1.8rem; font-family: 'remixicon' !important; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#visual .search_form .input-group input { width:100%; padding:2.5rem 3rem 2.5rem 6rem; border:none;  border-radius: 16px; font-size:1.8rem; }
#visual .search_form .input-group input::placeholder { color:#6B6E78; }
#visual .move_down { display:inline-block; padding:1rem; animation: move .5s ease-in infinite alternate; }
#visual .move_down::after { content:""; display:block; width:1.4rem; height:1.4rem; border-bottom:1px solid #000; border-right:1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
@keyframes move {
    0% { -webkit-transform: translateY(0rem); transform: translateY(0rem); }
    100% { -webkit-transform: translateY(0.5rem); transform: translateY(0.5rem); }
}

/* 퀵메뉴 */
.main_quick { display: flex; flex-wrap:wrap; }
.main_quick > li { width:calc(25% - 1.2rem); }
.main_quick > li:not(:last-child) { margin-right:1.6rem; }
.main_quick > li > a { display:block; height:100%; padding:4rem 5rem 0; border-radius:40px; color:#fff; overflow: hidden; }
.main_quick > li:nth-child(1) > a { background-color:#4958CF; } 
.main_quick > li:nth-child(2) > a { background-color:#28348E; } 
.main_quick > li:nth-child(3) > a { background-color:#78AD35; } 
.main_quick > li:nth-child(4) > a { background-color:#E54B76; } 
.main_quick > li strong { font-size:2.8rem; line-height:3.4rem; }
.main_quick > li p { margin-top:1.1rem; font-size:1.8rem; font-weight:500; }
.main_quick > li .icon { float: right; max-width: 100%; margin-top:2rem; }
.main_quick > li .icon img { -webkit-transition: all .3s; transition: all .3s; }
.main_quick > li > a:hover .icon img, .list > li > a:focus .icon img { -webkit-transform: scale(1.1); transform: scale(1.1); }

/* 메인 하단 */
.section02 { display: flex; flex-wrap: wrap; margin-top:4rem; }
.section02 > div { width:calc(50% - 0.8rem); }
.section02 > div:not(:last-child) { margin-right:1.6rem; }
.section02 .box { position:relative; padding:5rem 5rem 5.5rem; border-radius: 40px; background:#fff; }
.section02 .box .tit { color:#111; font-size:2.8rem; line-height:1.25; }
.section02 .box .more_view { display:inline-block; position:absolute; top:5rem; right:5rem; padding:1rem 2rem; border:1px solid #E5E7ED; border-radius: 30px; background:#E5E7ED; font-size:1.6rem; line-height:1.9rem; -webkit-transition: all .3s; transition: all .3s; }
.section02 .box .more_view:hover, .box .more_view:focus { background:#fff; }

/* 공지사항 */
.notice {}
.notice .tit { padding-bottom:1.9rem; border-bottom:1px solid #ddd; }
.notice .list { margin-top:2.6rem; }
.notice .list > li { padding:1.4rem 0; }
.notice .list > li .title { display: inline-block; vertical-align: middle; max-width:calc(100% - 10rem); padding-right:1rem; color:#111; font-size:2rem; font-weight:400; line-height:1.25; text-overflow:ellipsis; white-space: nowrap; overflow:hidden; }
.notice .list > li a { -webkit-transition: all .3s; transition: all .3s; }
.notice .list > li a:hover, .notice .list > li a:focus { text-decoration: underline; }
.notice .list > li .new { display:inline-block; vertical-align: middle; position:relative; top:-0.1rem; margin-right:0.3rem; border-radius:50%; width:1.8rem; height:1.8rem; background:#3445C7; }
.notice .list > li .new::after { content:"N"; position:absolute; top:50%; left:50%; color:#fff; font-size:10px; font-weight:500; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.notice .list > li .date { float: right; color:#666; font-size:1.6rem; line-height:1.25; }

/* 데이터 유형별 현황 */
.data_situation {}
.data_situation .list { display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top:2.1rem; }
.data_situation .list > li {}
.data_situation .list > li a { display: block; padding:4.7rem 4.2rem; border-radius:20px ; background:#F2F4F9; overflow: hidden; -webkit-transition: all .3s; transition: all .3s; }
.data_situation .list > li a:hover, .data_situation .list > li a:focus { background:#fff; box-shadow: 0 0 8px rgba(0,0,0,0.08); }
.data_situation .list > li .txt { font-size:2rem; font-weight:600; line-height:1.25; }
.data_situation .list > li .txt::before { content:""; display:inline-block; vertical-align: middle; width:3.6rem; height:3.6rem; margin-right:1rem; }
.data_situation .list > li:nth-child(1) .txt::before { background:url("../../../image/service/main/mainHuman/data_icon01.png") no-repeat 50% 50% / cover; }
.data_situation .list > li:nth-child(2) .txt::before { background:url("../../../image/service/main/mainHuman/data_icon02.png") no-repeat 50% 50% / cover; }
.data_situation .list > li:nth-child(3) .txt::before { background:url("../../../image/service/main/mainHuman/data_icon03.png") no-repeat 50% 50% / cover; }
.data_situation .list > li:nth-child(4) .txt::before { background:url("../../../image/service/main/mainHuman/data_icon04.png") no-repeat 50% 50% / cover; }
.data_situation .list > li .num { float: right; color:#002AC1; font-size:2.2rem; font-weight:700; }

/*
반응형
*/
@media all and (max-width:1240px) {
    .main_quick > li { width:calc(50% - 0.6rem); margin:0.6rem 0; }
    .main_quick > li:not(:last-child) { margin-right:0; }
    .main_quick > li:nth-child(2n) { margin-left:1.2rem; }

    .section02 .box { width:100%; }
    .section02 > div:not(:last-child) { margin:0 0 1.6rem; }
}
@media all and (max-width:1080px) {
    #visual h2 { font-size:7.4rem; }
    #visual p { font-size:4.6rem; }
}
@media all and (max-width:765px) {
    #visual { padding:8rem 2rem; }
    #visual::before { top:30%; left:0; }

    .data_situation .list { grid-template-columns:1fr; }
}
@media all and (max-width:520px) {
    #visual h2 { font-size:6.4rem; }
    #visual p { font-size:3.6rem; }

    .main_quick > li { width:100%; }
    .main_quick > li:nth-child(2n) { margin-left:0; } 

    .notice .list > li .date { float: none; display:block; margin-top:0.5rem; }
}
@media all and (max-width:375px) {
    .section02 .box { padding:4rem 4rem 4.5rem; border-radius: 30px; }
    .section02 .box .more_view { top:3.8rem; right:4rem; }
}