/* 공통 */
.sub_con { max-width: 1300px; width:100%; margin:0 auto; }
.sub_h1 { font-size: 44.5px; font-weight: bold; letter-spacing: -2.23px; line-height: 1.34; color: #000; word-break: keep-all; }
.sub_h1 span { font-weight: 300; }
.sub_h2 { font-size: 18.5px; letter-spacing: 3.7px; color: #219914; margin-bottom:10px; text-transform: uppercase; word-break: keep-all; }
.s_tit_p { font-size: 21.5px; font-weight: 300; letter-spacing: -0.54px; line-height: 1.77; color: #000; margin-top: 20px; word-break: keep-all; }


.sec_pad { padding:100px 0; }
.sec_pad:last-of-type { padding-bottom: 140px; }
.bg_bot { width:100%; height: 500px; background:url('../img/gre_bg.jpg') no-repeat center / cover; /* margin-top: 100px; */ }
.flex { display: flex; }


.img img { max-width: 100%; }

/* contents */
#about { position: relative; overflow: hidden; padding:90px 0 0; }

/* s1 */
#s1 { text-align: center; padding:0 0 95px; }
#s1 .img { position: relative; margin: 50px 0 0; z-index: 1; }
#s1 .img::before { content:""; position:absolute; left:50%; width:300%; top:50%; transform: translate(-50%, -50%); height: 320px; background:#f7f7f7; z-index: -1; }
#s1 .img .mob { display: none; }


/* s2 */
#s2 .sub_h1 { color: #fff; }
#s2 .sub_h2 { color: #fff; margin-left: 6px; }

#s2 .flex { height:700px; }
#s2 .img { width:50%; height: 100%; background:url('../img/ab_s2_img.jpg') no-repeat center / cover; }
#s2 .img.mob { display: none; }

#s2 .right { width:50%; height: 100%; padding:105px 0 105px 70px; background: #1b1e2a; }
#s2 .right .txt { max-width: 650px;  color: #fff; }
#s2 .d1_ul { margin-top: 35px; border-top: 2px solid #fff; }
#s2 .d1_li { padding:40px 0; border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; word-break: keep-all; }
#s2 .d1_li h3 { font-size: 30.5px; font-weight: bold; width: 140px; margin-right: 45px; word-break: keep-all; white-space: nowrap;  }
#s2 .d2_ul { position:relative; top:10px; }
#s2 .d2_ul li { position:relative; padding-left:15px; font-size: 15.5px; font-weight: 300; letter-spacing: -0.78px; line-height: 1.65; word-break: keep-all; }
#s2 .d2_ul li:before { content:""; position:absolute; left:0; top:10px; width:4px; height: 4px; background:#fff; }
#s2 .d2_ul li + li { margin-top: 15px; }


/* s3 */
#s3 .sub_con { text-align: center; }
#s3 .flex { margin-top: 70px; justify-content: space-between; }
#s3 .flex > div { padding:0 20px; width: calc(50% - 20px); height: 300px; background:url('../img/ab_cl_bg.png') no-repeat center; border: 1px solid #ddd; display: flex; justify-content: center; align-items: center; }





@media screen and (max-width: 1420px) {
    /* 공통 */
    .sub_con { max-width: 1420px; padding:0 60px; }


    /* contents */
    /* s2 */
    #s2 .right { padding: 80px 60px; }

    /* s3 */
    #s3 br { display: none; }


}

@media screen and (max-width: 1023px) {
    /* 공통 */
    .sub_con { padding:0 40px; }
    .sub_h1 { font-size: 38px; line-height: 1.65; }
    .s_tit_p { font-size: 18px; }

    .bg_bot { height: 350px; }
    .sec_pad { padding: 80px 0; }
    .sec_pad:last-of-type { padding-bottom: 100px; }

    /* contents */

    /* s1 */
    #s1 .img .mob { display: block; margin:0 auto; padding-left: 45px; text-align: center; }
    #s1 .img .pc { display: none; }

    /* s2 */
    #s2 .right { padding: 60px 40px; }
    #s2 .sub_h2 { margin:0 0 5px 6px; }

    #s2 .d1_ul { margin-top: 20px; }
    #s2 .d1_li { flex-wrap: wrap; padding:30px 0; }
    #s2 .d1_li h3 { font-size: 24px; width: 100%; }
    #s2 .d2_ul { top: 0; margin-top: 20px; }


    /* s3 */
    #s3 .flex { margin-top: 50px;}

}
@media screen and (max-width: 767px) {
    /* 공통 */
    .sub_con { padding:0 20px; }
    .sub_h1 { font-size: 30px; }
    .sub_h2 { font-size: 15px; margin-bottom: 5px; }
    .s_tit_p { font-size: 16px; margin-top: 15px; line-height: 2; }

    .bg_bot { height: 250px; }
    .flex { flex-wrap: wrap; }
    .sec_pad { padding: 60px 0; }
    .sec_pad:last-of-type { padding-bottom: 80px; }


    /* contents */
    #about { padding:50px 0 0; }

    /* s1 */
    #s1 { padding: 0 0 60px; }
    #s1 .img::before { display: none; }
    #s1 .img .mob { padding-left: 15px; }

    /* s2 */
    #s2 .flex { height: auto; }
    #s2 .right { padding: 60px 20px; }
    #s2 .right { width: 100%; }
    #s2 .d1_li h3 { font-size: 20px; }
    #s2 .d2_ul { margin-top: 15px; }
    #s2 .d2_ul li + li { margin-top: 10px; }

    #s2 .img { width: 100%; background: none; }
    #s2 .img.mob { display: block; margin:0 auto; text-align: center; }


    /* s3 */
    #s3 .flex > div { width:100%; height: auto; padding:30px; }
    #s3 .flex > div:last-of-type { margin-top: 20px; }

}