/*공통css*/
#c3_wrap .con1300 { margin: 0 auto; width: 100%; max-width: 1300px; }
#c3_wrap .c_tit { line-height: 1; }
#c3_wrap .c_tit h2 { font-size: 18px; color: #fff; font-family: 'Montserrat'; word-break: keep-all; text-transform: uppercase;  letter-spacing: 3.6px; }
#c3_wrap .c_tit h1 { margin:35px 0 40px; font-size: 60px; font-weight: bold; color: #fff; word-break: keep-all; }
#c3_wrap .c_tit p { font-size: 24.5px; color: #fff; line-height: 40px; word-break: keep-all; }


/*Content CSS*/
#c3_wrap { width: 100%; height: 100vh; text-align: center; display: flex; align-items: center; justify-content: center; background: url('../img/c3_bg.jpg') no-repeat 50% 50%; background-size: cover; }
#c3_wrap .list_wrap { margin-top: 60px; }
#c3_wrap .list_wrap ul { display: flex; }
#c3_wrap .list_wrap li { width:calc(33.33% - 23.35px); margin-right: 35px; }
#c3_wrap .list_wrap li:last-child { margin-right: 0; }

#c3_wrap .list_wrap li a { position:relative; display:block; width:100%; height: 100%; background:url('../img/c3_dot_bg.png') repeat center rgba(255,255,255,.3); padding:70px 20px; }
#c3_wrap .list_wrap li a:after { content:""; position:absolute; left:0; top:0; width:100%; height: 100%; border:3px solid #fff; opacity: 0; transition: all .3s; }
#c3_wrap .list_wrap li:hover a:after { opacity: 1; }


#c3_wrap .list_wrap li .ico { display: inline-block; }
#c3_wrap .list_wrap li h2 { margin:40px 0 20px; font-size: 30px; color: #fff; font-family: 'NanumSquare',sans-serif; word-break: keep-all; font-weight: bold; }
#c3_wrap .list_wrap li h2 img { display: none; }
#c3_wrap .list_wrap li p { font-size: 15px; color: #fff; word-break: keep-all; font-weight:300; }
#c3_wrap .list_wrap li p img { display: inline-block; vertical-align: middle; margin-left: 10px; }






@media screen and (max-width:1350px) {
    /* 공통 */
    #c3_wrap { padding:0 50px; }

    #c3_wrap .c_tit h2 { font-size: 16px; }
    #c3_wrap .c_tit h1 { margin: 28px 0; font-size: 50px; }

    /* c3_con */
    #c3_wrap .list_wrap { margin-top: 40px }
}

@media screen and (max-width:1024px) {
    /* 공통 */
    #c3_wrap { padding:0 40px; }
    #c3_wrap br { display: block; }

    /* c3_con */
    #c3_wrap .list_wrap li { width: calc(33.33% - 13.35px); margin-right: 20px; }
    #c3_wrap .list_wrap li a { padding: 40px 15px; }
    #c3_wrap .list_wrap li h2 { margin: 30px 0 10px; font-size: 22px; line-height: 30px; }
}

@media screen and (max-width:768px) {
    /* 공통 */
    #c3_wrap { padding:0 20px; }
    #c3_wrap br { display: none; }

    #c3_wrap .c_tit h1 { margin: 20px 0; font-size: 40px; }
}

@media screen and (max-width: 640px) {
    /* c3_con */
    #c3_wrap .list_wrap ul { flex-wrap: wrap; }
    #c3_wrap .list_wrap li { width:100%; margin:0 0 15px; }
    #c3_wrap .list_wrap li a { display: flex; padding: 20px 15px; align-items: center; }

    #c3_wrap .list_wrap li .ico img { width:50px; }
    #c3_wrap .list_wrap li p { display: none; }
    #c3_wrap .list_wrap li h2 { margin:0 0 0 15px; font-size:20px; }
    #c3_wrap .list_wrap li h2 img { display: inline-block; margin-left: 10px; }
}

@media screen and (max-width: 480px) {
    /* 공통 */
    #c3_wrap { background-position: 45% 50%; }
    #c3_wrap .c_tit h2 { font-size: 14px; }
    #c3_wrap .c_tit h1 { margin: 15px 0; font-size: 33px; }

    /* c3_con */
    #c3_wrap .list_wrap li a { padding:15px; }

    #c3_wrap .list_wrap li .ico img { width:40px; }
    #c3_wrap .list_wrap li h2 { font-size:18px; }
    #c3_wrap .list_wrap { margin-top: 30px;  }
}