/* common */
#hope1 { overflow: hidden; padding-top:60px; }
.sub_h1 { position:relative; font-size: 60px; font-family: 'NanumSquareRound',sans-serif; font-weight: 800; }
.sub_h1.eng { font-size: 72px; text-transform: uppercase; }
.sub_h1::before { content:""; position: absolute; left:-20px; top:-15px; width:22px; height: 22px; background:#15a8b0; border-radius: 50%; }
.sub_h2 { font-size: 24px; font-family: 'NanumSquareRound',sans-serif; font-weight: 800; letter-spacing: -0.6px; line-height: 1; }
.sub_p { font-size: 19px; font-weight: 300; letter-spacing: -0.48px; line-height: 36px; }
.sub_p + .sub_p { margin-top: 30px; }
.sub_h1 + .sub_p { margin-top: 15px; }

.bg_bot { width:100%; height: 400px; background:url('../img/hope1_bg.jpg') no-repeat center / cover; margin:100px 0 0; }



/* hope1 */
#hope1 .sub_h1 + .sub_p { margin-top: 30px; }

.his_wrap { margin:120px 0 60px; }
.his_wrap > h2 { position:relative; padding-left: 20px; font-size: 36px; letter-spacing: -0.9px; font-family: 'NanumSquareRound',sans-serif; font-weight: 800; margin:0 0 55px; }
.his_wrap > h2::before { content:""; position:absolute; left:0; width:4px; top:3px; height: 34px; background:#15a8b0; }


.his_list { border-top: 1px solid #000; }
.his_list > li { display: flex; padding:50px 0; border-bottom: 1px solid #ddd; }
.his_list > li h3 { width:215px; height: 58px; line-height: 58px; background-image: linear-gradient(to right, #009a9a, #41c4dd); border-radius: 5px; color: #fff; text-align: center; }
.his_list > li:nth-child(2n) h3 { background-image: linear-gradient(to right, #f15e7c, #f2859e); }

.his_list > li .right { width:calc(100% - 215px); padding-left: 60px; display: flex; }
.his_list > li .his_txt { width:100%; }
.his_list > li .his_txt li { display: flex; padding:12px 0; }
.his_list > li .his_txt li b { font-size: 19px;  letter-spacing: -0.48px; line-height: 1; flex-shrink: 0;}
.his_list > li .his_txt li p { padding-left: 30px; white-space: nowrap; line-height: 1; }



.dot { width:17px; height: 17px; border-radius: 50%; background-color: #f15e7c; margin:0 auto; }
.dot + .dot { margin-top: 22px; }






@media screen and (max-width: 1400px) {

    /* common */
    /* #hope1 p br { display: none; } */


    /* hope1 */
    #hope1 p br { display: none; }

    .his_list > li .his_txt li b { line-height: 30px; }
    .his_list > li .his_txt li p { white-space: normal; line-height: 30px; }



}
@media screen and (max-width: 1023px) {

    /* common */
    #hope1 { padding-top: 35px; text-align: center; }
    .sub_h1 { display: inline-block; font-size: 40px; }
    .sub_h1.eng { font-size: 45px; }
    .sub_h1::before { left: -18px; top: -13px; width: 18px; height: 18px; }
    .sub_h1 span { font-size: 20px; }
    .sub_h2 { font-size: 20px; }
    .sub_p { font-size: 17px; line-height: 32px; }
    .sub_p + .sub_p { margin-top: 25px; }

    .bg_bot { height: 300px; margin-top: 80px; }


    /* hope1 */
    .his_wrap { margin: 80px 0 45px; text-align: left; }
    .his_wrap > h2 { padding-left: 20px; font-size: 26px; margin: 0 0 30px; }
    .his_wrap > h2::before { top: 0; height: 28px; }

    .his_list > li { padding: 30px 0; }

    .his_list > li h3 { width: 200px; height: 55px; line-height: 55px; }
    .his_list > li .right { width: calc(100% - 200px); padding-left: 40px; text-align: left; flex-wrap: wrap; }
    .his_list > li .his_txt li { padding: 8px 0; }
    .his_list > li .his_txt li b { font-size: 17px; }
    .his_list > li .his_txt li p { padding-left: 18px; }





}
@media screen and (max-width: 767px) {

    /* common */
    #hope1 { padding-top: 15px; }
    .sub_h1 { font-size: 30px; }
    .sub_h1.eng { font-size: 33px; }
    .sub_h1::before { left: -14px; top: -11px; width: 13px; height: 13px; }
    .sub_h1 span { display: none; }
    .sub_h2 { font-size: 18px; }
    .sub_p { font-size: 15px; line-height: 29px; }
    .sub_p + .sub_p { margin-top: 20px; }

    .bg_bot { height: 250px; margin-top: 60px; }

    /* hope1 */
    .his_wrap { margin: 50px 0 30px; }

    .his_wrap > h2 { padding-left: 15px; font-size: 21px; margin: 0 0 20px; }
    .his_wrap > h2::before { height: 23px; }

    .his_list > li { flex-wrap: wrap; }
    .his_list > li h3 { width: 180px; height: 50px; line-height: 50px; }
    .his_list > li .right { width: 100%; padding: 10px 0 0 10px; }
    .his_list > li .his_txt li { padding: 5px 0; }
    .his_list > li .his_txt li b { font-size: 16px; }
    .his_list > li .his_txt li p { line-height: 28px; }

    .dot { width:14px; height: 14px; }
    .dot + .dot { margin-top: 18px; }


}