/*  공통 */
.con_wrap { max-width: 1420px; padding:0 60px; margin:0 auto; }

.sub_title { line-height: 1; text-align: center; }
.sub_title h1 { position:relative; display: inline-block; padding:0 0 45px; font-size: 44px; font-weight: 900; }
/* .sub_title h1:before { content:""; display: block; width:50px; height:1px; background:#000; margin:0 auto 30px; } */

.sub_title p { position:relative; font-size: 24px; font-weight:900; word-break: keep-all; line-height: 42px; }
.sub_title p:before { content:""; display: block; width:50px; height:1px; background:#000; margin:0 auto 45px; }
.sub_title p span { color:#007ad6; font-weight: 600; }
.sub_title p i { font-style: normal; font-weight: 400; }

/* .bg_bot { width:100%; height: 500px; background:url('../img/gre_bg.jpg') no-repeat center / cover; } */

#vision { padding-top: 35px; padding-bottom: 130px; position:relative; z-index: 1; }
#vision:after { content:""; position:absolute; left:0; width:100%; bottom:0; height: 500px; background:#f6f6f6; z-index: -1; }


/* contents */
.vis_con { position:relative; margin-top: 50px; }
.vis_con ul { border:1px solid #ddd; display: flex; flex-wrap: wrap; background:#fff; }
.vis_con ul li { width:50%; text-align: center; padding:80px 100px 0; height: 310px; }
.vis_con ul li:nth-child(odd) { position:relative; padding-right: 215px; }
.vis_con ul li:nth-child(even) { padding-left: 215px; }
.vis_con ul li:nth-child(1):after { content:""; position:absolute; right:0; top:60px; width:1px; height: 35px; background:#ddd; }
.vis_con ul li:nth-child(3):after { content:""; position:absolute; right:0; bottom:60px; width:1px; height: 35px; background:#ddd; }

.vis_con ul li > div { padding-bottom: 60px; }
.vis_con ul li:nth-child(1) > div,
.vis_con ul li:nth-child(2) > div { border-bottom: 1px solid #ddd; }

.vis_con ul li h2 { margin:38px auto 0; font-size:16px; font-weight: 500; width:160px; line-height:40px; background:#000; color:#fff; border-radius: 20px; }

.vis_con .img { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
.vis_con .img img { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none;  }
.vis_con .img p { position:absolute; left:50%; transform: translateX(-50%); bottom:110px; font-size:19px; color:#333; font-weight: 700; }
.vis_con .img p:before { content:""; display: block; width:20px; height:2px; background:#007ad6; margin:0 auto 12px; }





@media screen and (max-width: 1300px) {
    .vis_con ul li { padding:80px 50px 0; }
}

@media screen and (max-width: 1024px) {
    .sub_title h1 { padding: 0 0 40px; font-size: 38px; }
    .sub_title p { font-size: 20px; }

    .vis_con .img img { transform: scale(.8);}
    .vis_con ul li:nth-child(odd) { padding-right: 170px; }
    .vis_con ul li:nth-child(even) { padding-left: 170px; }

    .vis_con ul li { padding-top: 50px; height: 265px; }
    .vis_con ul li h2 { margin-top: 25px; width:auto; }

}

@media screen and (max-width: 768px) {
    #vision { padding-top: 20px; padding-bottom: 80px; }

    .con_wrap { padding: 0 40px; }
    .sub_title h1 { padding: 0 0 30px; font-size: 33px; line-height: 40px; }
    .sub_title p { font-size: 18px; line-height: 30px; }
    .sub_title p:before { margin: 0 auto 30px; }

    .vis_con ul { border:0; margin-top: 50px; }
    .vis_con ul li { height: auto; padding:50px 30px; }
    .vis_con ul li i { display: inline-block; height: 80px; }
    .vis_con ul li i img { transform: scale(.8);}
    .vis_con ul li h2 { margin-top:30px; font-size:15px; line-height: 35px; }
    .vis_con ul li > div { padding-bottom:0; }
    .vis_con ul li:nth-child(odd) { padding-right: 30px; border-right: 1px solid #ddd; }
    .vis_con ul li:nth-child(even) { padding-left: 30px; }

    .vis_con .img img { transform: scale(1); width:330px; }
    .vis_con .img { position:relative; left:initial; top:initial; transform: translate(0); text-align: center; }
    .vis_con .img p { bottom: 85px; }


    .vis_con ul li:nth-child(1):after { display: none; }
    .vis_con ul li:nth-child(3):after { display: none; }
    .vis_con ul li:nth-child(1) > div,
    .vis_con ul li:nth-child(2) > div { border-bottom:0; }
    .vis_con ul li:nth-child(1),
    .vis_con ul li:nth-child(2) { border-bottom:1px solid #ddd; ; }

    #vision:after { display: none; }

}

@media screen and (max-width: 640px) {
    .con_wrap { padding: 0 20px; }

    .vis_con .img img { width:300px; }
}