@charset "utf-8";

/***************************************************

    인트로(Intro)

***************************************************/
#intro_page {text-align: center;}
#intro_page .page_list {display: flex; height: 80vh; border-bottom: 1px solid #ddd;}
#intro_page .page_list > div {width: 25%; padding: 0 10px; display: flex; flex-direction: column; justify-content: center;}
#intro_page .page_list > div:not(:last-of-type) {border-right: 1px solid #ddd;}
#intro_page .page_list > div > dt {height: 125px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; word-break: keep-all;}
#intro_page .page_list h2 {height: 100px; color: #203d89; font-size: 35px; font-weight: 700; font-family: "GmarketSans"; position: relative; line-height: 1; display: flex; justify-content: center; align-items: center;}
#intro_page .page_list h2::before {content: ""; width: 50px; height: 1px; background-color: #203d89; position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%);}
#intro_page .page_list h3 {color: #222; font-size: 20px; font-weight: 400;}
#intro_page .page_list .mid_box {height: 300px; display: flex; justify-content: center; align-items: center;}
#intro_page .page_list .mid_box2 {max-width: 80%; height: 350px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
#intro_page .page_list .mid_box2 li {width: 49%; height: calc(100% / 7 - 5px);}
#intro_page .page_list .mid_box2 li:last-of-type {width: 100%;}
#intro_page .page_list .mid_box2 a {height: 100%; font-weight: 500; display: flex; justify-content: center; align-items: center; border-radius: 10px;}
#intro_page .btn_link {width: 100%; max-width: 175px; height: 50px; font-size: 20px; font-weight: 600; border-radius: 10px;}
#intro_page .btn_link i {font-weight: 800; margin-left: 10px;}
#intro_page .intro_ft {height: 20vh; padding: 1% 40px 0; display: flex; align-items: center; justify-content: space-between;}
#intro_page .intro_ft .info_box {margin: 0 20px;}
#intro_page .intro_ft address {color: #000; font-weight: 600; margin-bottom: 15px;}
#intro_page .intro_ft .copyright {color: #666; font-size: 15px;}
#intro_page .intro_ft .sns_list {display: flex;}
#intro_page .intro_ft .sns_list li {}
#intro_page .intro_ft .sns_list li:not(:last-of-type) {margin-right: 7px;}
#intro_page .intro_ft .sns_list a {display: inline-flex;}

@media screen and (max-width: 1540px) {
    #intro_page .page_list > div:last-of-type h2::before {bottom: 9px;}
    #intro_page .intro_ft {padding: 1% 20px 0;}
}

@media screen and (max-width: 1200px) {
    #intro_page .page_list h2 {font-size: 28px; height: 80px;}
    #intro_page .page_list > div:last-of-type h2::before {bottom: 7px;}
    #intro_page .page_list h3 {font-size: 16px;}
    #intro_page .page_list > div > dt {height: 100px;}
    #intro_page .page_list .mid_box2 {max-width: 95%; height: 340px; font-size: 14px;}
    #intro_page .btn_link {font-size: 16px; max-width: unset; height: 40px;}


}

@media screen and (max-width: 1080px) {
    #intro_page .page_list {flex-wrap: wrap; height: auto;}
    #intro_page .page_list h2 {height: auto; font-size: 26px; line-height: 1.2;}
    #intro_page .page_list h2::before,
    #intro_page .page_list > div:last-of-type h2::before {bottom: -5px;}
    #intro_page .page_list > div {width: 50%; padding: 30px;}
    #intro_page .page_list > div:nth-of-type(3) {width: 100%; border-right: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 80px 10px;}
    #intro_page .page_list > div:nth-of-type(4) {width: 100%;}
    #intro_page .page_list > div > dt {height: 65px;}
    #intro_page .page_list .mid_box {height: 250px; margin-bottom: 20px;}
    #intro_page .page_list .mid_box2 {max-width: unset; height: 200px;}
    #intro_page .page_list .mid_box2 li {width: 24%; height: 35px;}
    #intro_page .intro_ft {height: auto; padding: 30px 20px; flex-wrap: wrap; justify-content: center;}
    #intro_page .intro_ft .info_box {width: 100%; margin: 30px 0;}
    #intro_page .intro_ft address, #intro_page .intro_ft .copyright {font-size: 14px;}
    #intro_page .intro_ft address {margin-bottom: 5px;}


}

@media screen and (max-width: 768px) {
    #intro_page .page_list h2 {font-size: 22px;}
    #intro_page .page_list h3 {font-size: 15px;}
    #intro_page .page_list > div > dt {height: 58px;}
}

@media screen and (max-width: 480px) {
    #intro_page .page_list > div {width: 100%;}
    #intro_page .page_list > div:not(:last-of-type) {border-right: none; border-bottom: 1px solid #ddd;}
    #intro_page .page_list > div:nth-of-type(3) {border-top: none; padding: 60px 10px;}
}






@media screen and (max-width: 1080px) {
    
}

@media screen and (max-width: 768px) {
    
}

@media screen and (max-width: 480px) {
    
}