@charset "utf-8";

.intro_main {background:#c6edf5 url(../../images/common/intro/intro_bg_1.jpg) center center no-repeat; background-size:cover; position:relative;
    display: flex; justify-content: center; align-items: center; height:calc(100vh - 120px); min-height: 950px;}
.intro_main::before {content:'';display:inline-block;position:absolute;bottom: 250px;right: 137px;background:url(../../images/common/intro/right_people.png) 0 0 no-repeat;width: 160px;height: 140px;}
.intro_main::after {content:'';display:inline-block;position:absolute;bottom: 150px;left: 37px;background:url(../../images/common/intro/left_people.png) 0 0 no-repeat;width: 222px;height: 220px;}

.intro_main .contents {max-width:1200px; width: 100%; /* margin:0 auto; padding:100px 0 80px 0; */}
.intro_main .contents h1 {background:#fff; border-radius: 50px; width:280px; margin:0 auto; text-align:center; padding:10px 0; font-size:20px;}
.intro_main .contents h1 img {width:100px;}
.intro_main .contents h1 span {display:inline-block; margin:0 0 0 5px; color:#116432}

.intro_main .contents .txt_wrap {margin:80px 0 50px 0; width:100%;}
.intro_main .contents .txt_wrap p {text-align:center;margin:0 0 5px 0;}
.intro_main .contents .txt_wrap p.info_title {font-size:1.3rem;  font-family: 'Gmarket', sans-serif; color: #636363;}
.intro_main .contents .txt_wrap p.big_title {font-size:1.8rem;  font-family: 'Gmarket', sans-serif; color: #4c4d52;}
.intro_main .contents .txt_wrap p.big_title span {color:#4152b5;}

.link_4 {display:flex; gap:20px; justify-content: center; position:relative} 
.link_4 .link {width:calc((100% / 4) - 15px)}
.link_4 .link a {background:#fff; border-radius:10px; padding:140px 0 30px 0; display:flex; flex-wrap:wrap; justify-content: center; transition: all 0.2s ease;}
.link_4 .link a p.title {font-size:1.5rem; font-family: 'jalnan'; width:100%; text-align:center;}
.link_4 .link a p.txt {font-size:1rem; margin:5px 0 18px 0;  width:100%; text-align:center; letter-spacing: -1px;}
.link_4 .link a span.link_go {background:#4152b5 url(../../images/common/intro/circle-arrow-right.svg) center right 10px no-repeat; color:#fff; border-radius: 50px; padding:10px 10px 10px 0; font-size:0.9rem; width:140px; display:inline-block; text-align:center; background-size:20px;}

.link_4 .link:nth-child(1) a {background:#fff url(../../images/common/intro/user-round.svg) center 50px no-repeat; background-size:3.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.link_4 .link:nth-child(2) a {background:#fff url(../../images/common/intro/calendar-clock.svg) center 50px no-repeat; background-size:3.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.link_4 .link:nth-child(3) a {background:#fff url(../../images/common/intro/tent-tree.svg) center 50px no-repeat; background-size:3.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.link_4 .link:nth-child(4) a {background:#fff url(../../images/common/intro/scroll-text.svg) center 50px no-repeat; background-size:3.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}

.notice_wrap {border-radius:10px; display:flex; width:1200px; margin:20px auto; background:#ffffffa6; padding:30px;box-shadow: 0 8px 20px rgba(0,0,0,0.1); position:relative; z-index:1}
.notice_wrap::before {content:'';display:inline-block;position:absolute;bottom: -52px;right: 37px;background:url(../../images/common/intro/only_child.png) 0 0 no-repeat;width: 113px;height: 150px;}
.notice_wrap p {width: 250px; font-family: 'jalnan'; padding:0 0 0 30px; font-size:1.1rem; position:relative}
.notice_wrap p::before {content:''; width:30px; height:30px; position:absolute; top:0; left:0; background:url(../../images/common/intro/megaphone.svg) 0 0 no-repeat; }
.notice_wrap ul li {line-height:1.6; position:relative; padding:0 0 0 8px; letter-spacing: -1px;;}
.notice_wrap ul li:nth-child(4) {margin:10px 0 0 0;}
.notice_wrap ul li::before {content:''; display:inline-block; position:absolute; left:0; top:12px; width:2px; height:2px;background:#000;}

footer {background:#3f4658; height:120px}
footer .foot {width:1200px; margin:0 auto; padding:20px 0}
footer .foot ul {display:flex}
footer .foot ul li {color:#f4f4f5; padding:0 25px 0 0; font-size:0.9rem; position:relative}
footer .foot ul li::before  {content:'';display:inline-block;position:absolute;right: 10px;top: 5px;width: 1px;height:10px;background:#aeb0b6;}
footer .foot ul li:last-child:before {display:none;}
footer .foot ul li a {color:#f4f4f5}
footer .foot ul li a:hover {color:#fff185;}
footer .foot ul + p {color:#aeb0b6;  font-size:0.8rem}

.footer_wrap {display: flex; justify-content: space-between; width: 1200px; margin: 0 auto; align-items: center; height: 120px;}
.footer_wrap .foot + img {width:80px;}






/* 카드 hover */
.link_4 .link a:hover {
    transform: translateY(-12px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* 내부 텍스트 강조 */
.link_4 .link a:hover p.title {color: #ffffff;}
.link_4 .link a:hover p.txt {color:#f4f4f5}

/* 버튼 hover */
.link_4 .link a:hover .link_go {
    background:#fff url(../../images/common/intro/circle-arrow-right-hover.svg) center right 10px no-repeat;
    padding-right: 20px; color:#4152b5; font-weight:500; background-size:20px;}

/* 카드 hover */
.link_4 .link:nth-child(1) a:hover {background:#4152b5 url(../../images/common/intro/user-round.svg) center 50px no-repeat; background-size:3.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.link_4 .link:nth-child(2) a:hover {background:#4152b5 url(../../images/common/intro/calendar-clock.svg) center 50px no-repeat; background-size:3.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.link_4 .link:nth-child(3) a:hover {background:#4152b5 url(../../images/common/intro/tent-tree.svg) center 50px no-repeat; background-size:3.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.link_4 .link:nth-child(4) a:hover {background:#4152b5 url(../../images/common/intro/scroll-text.svg) center 50px no-repeat; background-size:3.9rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}





/* 반응형 */
@media (max-width: 1200px) {

    .intro_main .contents {width:calc(100% - 40px); margin:0 20px;}
    .notice_wrap {flex-direction: column; width:100%; }
    .notice_wrap p {width: 100%; margin-bottom: 15px;}
    .link_4 {flex-wrap: wrap;}
    .footer_wrap {width:calc(100% - 40px); margin:0 20px;}
    .intro_main::after {display:none;}
}
@media (max-width: 900px) {
    .link_4 .link {width:calc((100% / 2) - 10px )}
    .intro_main .contents .txt_wrap {margin:30px 0 50px 0}

    .link_4 .link a {padding:70px 0 15px 0;}
    .link_4 .link:nth-child(1) a {background:#fff url(../../images/common/intro/user-round.svg) center 20px no-repeat; background-size:2.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
    .link_4 .link:nth-child(2) a {background:#fff url(../../images/common/intro/calendar-clock.svg) center 20px no-repeat; background-size:2.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
    .link_4 .link:nth-child(3) a {background:#fff url(../../images/common/intro/tent-tree.svg) center 20px no-repeat; background-size:2.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
    .link_4 .link:nth-child(4) a {background:#fff url(../../images/common/intro/scroll-text.svg) center 20px no-repeat; background-size:2.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}

    /* 카드 hover */
    .link_4 .link:nth-child(1) a:hover {background:#4152b5 url(../../images/common/intro/user-round.svg) center 20px no-repeat; background-size:2.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
    .link_4 .link:nth-child(2) a:hover {background:#4152b5 url(../../images/common/intro/calendar-clock.svg) center 20px no-repeat;background-size:2.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
    .link_4 .link:nth-child(3) a:hover {background:#4152b5 url(../../images/common/intro/tent-tree.svg) center 20px no-repeat;background-size:2.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
    .link_4 .link:nth-child(4) a:hover {background:#4152b5 url(../../images/common/intro/scroll-text.svg) center 20px no-repeat;background-size:2.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);}

}

/* 모바일 */
@media (max-width: 700px) {
    .intro_main .contents h1 img {width:80px;}
    .intro_main .contents { padding: 60px 0; }
    .intro_main .contents h1 {font-size: 16px; }
    .intro_main .contents .txt_wrap { margin:30px 0; }

}

@media (max-width: 600px) {
    .intro_main .contents {padding:20px 0;}
    .intro_main .contents .txt_wrap p.info_title {font-size:1rem}
    .intro_main .contents .txt_wrap p.big_title {font-size:1.4rem;}
    .link_4 .link {width:calc((100% / 2) - 5px )}
    .link_4 {gap:10px}
    .link_4 .link a p.title {font-size:1.2rem}
    .link_4 .link a p.txt {font-size:0.9rem; margin:0 0 5px 0;}

    .info_title span {display:block; text-align:center;}

    footer .foot ul li {font-size:0.8rem;}
    footer .foot {padding:10px 0; }
    footer {height:auto;}
    .footer_wrap {flex-wrap: wrap; padding:10px 0 10px 0; height:auto; justify-content: end;}

    .notice_wrap::before {background-size:70px;bottom: -100px; right: 20px; width:70px}

    .link_4 .link a span.link_go {padding:5px 15px 5px 0; width:100px;
    background:#4152b5 url(../../images/common/intro/circle-arrow-right.svg) center right 10px no-repeat; background-size:16px;}
    .link_4 .link a:hover .link_go {background-size:16px;}
    .notice_wrap {padding:20px;}
}