/* 공통 */
.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.eng { font-size: 55px; letter-spacing: 0;}
.sub_h1 span { font-weight: 300; }
.sub_h2 { font-size: 18.5px; letter-spacing: 3.7px; color: #000; margin-bottom:10px; text-transform: uppercase; line-height: 1.7; 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; }

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


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

/* contents */
#history { position: relative; overflow: hidden; padding:60px 0 0; }
#history .sub_h2 { margin: 20px 0 0; letter-spacing: -0.46px; font-weight: 300; }
#history .sub_h2 span { font-weight: 500; }

/* s1 */
#history { text-align: center; }

.his_list_wr {width: 100%; position: relative; margin:50px 0 0; text-align: left; z-index: 1; padding:50px 0 0;}
.his_list_wr::before {content: ''; display: block; width: 1px; height: calc(100% + 50px); background: #ddd; position: absolute; top:0;
left:50%; transform:translateX(-50%); z-index: -1; }
.his_list_wr > li { width: 50%; border:0px solid red; display: flex; flex-direction: row-reverse; text-align: right; align-items: flex-start; margin-bottom: 50px; }
.his_list_wr > li:nth-child(odd) {margin-left:7px; }
.his_list_wr > li:nth-child(even) {justify-content: flex-start; text-align: left; margin-left:calc(50% - 7px);  flex-direction: row;}

/* dots */
.his_list_wr .his_dot {display: flex; align-items: center; }
.his_list_wr > li:nth-child(even) .his_dot {flex-direction: row-reverse; }
.his_list_wr .his_dot::after { content: ''; display:block; width: 15px; height: 15px; background: #fff; border:3px solid #219914;
border-radius: 50%; }
.his_list_wr .his_dot::before {content: ''; display: block ;width: 70px; height: 1px; background: #219914; }


/* his_txt */
.his_txt { position: relative; top:-10px; display: flex; }
.his_list_wr > li:nth-child(odd) .his_txt {margin-right: 25px; flex-direction: row-reverse; }
.his_list_wr > li:nth-child(even) .his_txt {margin-left: 25px; }
.his_txt h3 { font-size:24px; font-weight: 900; }
.his_txt p { font-size: 16px; font-weight: 300; position:relative; top:5px; word-break: keep-all; }
.his_list_wr > li:nth-child(odd) .his_txt h3 {margin-left: 30px; }
.his_list_wr > li:nth-child(even) .his_txt h3 {margin-right: 30px; }



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


    /* contents */
    .his_list_wr br { display: none; }

}

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

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

    /* contents */
    .bg_bot { margin-top: 100px; }
    .his_list_wr > li:nth-child(odd) .his_txt h3 { margin-left: 0; }
    .his_list_wr > li:nth-child(even) .his_txt h3 { margin-right: 0; }
    .his_txt { flex-direction: column; }
    .his_list_wr > li:nth-child(odd) .his_txt { flex-direction: column; }
    .his_txt p { top:0; margin-top: 15px; }



}
@media screen and (max-width: 767px) {
    /* 공통 */
    .sub_con { padding:0 20px; }
    .sub_h1 { font-size: 30px; }
    .sub_h1.eng { font-size: 35px; }
    .sub_h2 { font-size: 16px; margin-bottom: 5px; line-height: 1.9; }
    .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 */
    #history { padding:50px 0 0; }

    /* s1 */
    .his_list_wr { margin: 35px 0 0; padding: 35px 0 0; }
    .his_list_wr::before { left: 7px; height: 100%; }
    .his_list_wr > li { width: 100%; flex-direction: row !important; margin:0 0 50px!important; }
    .his_list_wr > li:nth-child(even) { margin-left: 0; }

    .his_list_wr > li .his_dot { flex-direction: row-reverse !important; }
    .his_list_wr .his_dot::before { width: 50px; }

    .his_list_wr > li .his_txt { margin-left: 20px !important; }
    .his_list_wr > li .his_txt h3 { text-align: left !important; }
    .his_txt h3 { font-size: 20px; }
    .his_txt p { margin-top: 10px; text-align: left !important; }

}