/* 공통 */
.con_wrap { width:1300px; margin:0 auto; }
.se_con { padding:90px 0; }

.sub_title { line-height: 1; text-align: center; }
.sub_title span { display: inline-block; margin-bottom: 20px; font-size:17px; color:#3d6cb3; font-family: 'Montserrat';
font-weight: 500; text-transform: uppercase; word-break: keep-all; }
.sub_title h1 { font-size:43px; color:#000; font-weight: 300; font-family: 'NanumSquare'; word-break: keep-all;}
.sub_title h1 b { font-weight: 800; }
.sub_title h1 br { display: none; }


/*Content CSS*/
#s1_con { margin-top: 75px; }
.s1_list { position:relative; }
.s1_list::before { content:""; position:absolute; left:0; right:0; top:0; height: 50px; background: linear-gradient(to bottom, #000, #fff); opacity: 0.02; }
.s1_list::after { content:""; position:absolute; left:0; right:0; bottom:0; height: 50px; background: linear-gradient(to top, #000, #fff); opacity: 0.02; }

.s1_list > li { display: flex; border-bottom: 1px solid #ddd; }
.s1_list > li:last-child { border-bottom:0; }
.s1_list > li .img { width:50%; }
.s1_list > li:nth-child(1) .img { background:url('../img/ab_img1.jpg') no-repeat center / cover; }
.s1_list > li:nth-child(2) .img { background:url('../img/ab_img2.jpg') no-repeat center / cover; }
.s1_list > li:nth-child(3) .img { background:url('../img/ab_img3.jpg') no-repeat center / cover; }

.s1_list .txt { width:50%; padding:80px; line-height: 1; }
.s1_list .txt_con { width:560px; }

.s1_list > li:nth-child(odd) .txt { display: flex; justify-content: flex-start; }
.s1_list > li:nth-child(even) .txt { display: flex; justify-content: flex-end; border-right:1px solid #ddd; }

.s1_list .title { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20px;
    border-bottom: 1px solid #ddd; }
.s1_list .title h2 { position:relative; font-size:30px; color:#333; font-family: 'NanumSquare'; }
.s1_list .title h2:after { content:""; position:absolute; left:0; right:0; bottom:-21px; height: 2px; background:#3d6cb3; }
.s1_list .title b { font-size:110px; color: rgba(61, 108, 179, 0.12);; font-family:'Montserrat';}

.s1_list .list { padding:25px 0; }
.s1_list .list p { font-size:17px; color:#333; word-break: keep-all; }
.s1_list .list h3 { font-size:17px; color:#333; font-family: 'NanumSquare'; margin-top: 40px; }
.s1_list .list h3:before { content:""; display: inline-block; width:4px; height: 4px; background:#3d6cb3; border-radius: 50%;
vertical-align: 3px; margin-right: 8px; }

.s1_list .list ul { display: flex; flex-wrap: wrap; margin-top: 20px; }
.s1_list .list li { width:178px; height:46px; line-height: 42px; margin:0 0 8px 5px; }
.s1_list .list li a { display: block; width:100%; height: 100%; border-radius: 23px; transition: all .3s; border:1px solid #555;
text-align: center; font-size:16px; color:#000; font-weight: 300; }
.s1_list .list li a:hover { background:#3d6cb3; color:#fff; border-color: #3d6cb3; }
.s1_list .list li:nth-child(3n+1) { margin-left: 0; }


@media screen and (max-width: 1450px) {
    .s1_list .txt { padding:50px; }
    .s1_list .txt_con { width:100%; }
}

@media screen and (max-width: 1350px) {
    .s1_list .list li { width: calc(50% - 10px); }
    .s1_list > li:nth-child(1) .img { background-position: 70% 50%; }
    .s1_list > li:nth-child(2) .img { background-size:125% auto; }

    .s1_list .list p { line-height: 28px; }
    .s1_list .list li:nth-child(n+2) { margin-left: 5px; }
    .s1_list .list li:nth-child(2n+1) { margin-left: 0; }
}

@media screen and (max-width: 1024px) {
    .s1_list .txt { padding:30px; }
    .s1_list > li:nth-child(1) .img { background-position: 10% 50%; }
}

@media screen and (max-width: 760px) {
    .s1_list .txt { padding:20px 20px 0; }
    .s1_list > li { flex-wrap: wrap; border-bottom: 0; }
    .s1_list > li ~ li { padding-top: 20px; }
    .s1_list > li:nth-child(odd) .img { order:2; }
    .s1_list > li:nth-child(odd) .txt { order:1; }
    .s1_list > li .img { width:100%; height: 300px; }
    .s1_list > li .txt { width:100%; }

    .se_con { padding:80px 0 0; }
    #s1_con { margin-top: 50px; }

    .sub_title span { font-size:15px;}
    .sub_title h1 { font-size:36px; line-height: 48px; }
    .sub_title h1 br { display: block; }

    .s1_list > li:nth-child(1) .img { background-position: 50% 50%; }
    .s1_list > li:nth-child(2) .img { background-size:auto 100%; }

    .s1_list .title b { font-size:75px; }
    .s1_list .title h2 { font-size:26px; }

    .s1_list .list p { font-size: 15px; }
    .s1_list .list li a { font-size:15px; }

}