@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500..900&display=swap');

.mission_wrap{font-family: 'Noto Sans KR'; word-break: keep-all;}
.mission_wrap .title_top {
    padding-top: 100px;
}
.mission_wrap img{max-width: 100%;}
.mission_wrap .txt_red{ color: #DF474D!important;}
.mission_wrap .txt_red_b{ color: #DF474D!important;font-weight: 700;}
.mission_wrap  span{ font-size: unset;}
.mission_wrap .mission_text{
     font-weight: 500;  font-size: 24px;color: #333333; 
     padding: 40px 0 70px; text-align: center; line-height: 1.6;
}

.mission_wrap .mission_chart{margin-bottom: 100px;}
.mission_wrap .pc{display: block;}
.mission_wrap .mobile{display: none;}

.mission_wrap .mission_box{ text-align: center; margin-bottom: 100px;}
.mission_wrap .mission_box div{ background:#fff; border: 1px solid #E5E5E5;  box-shadow: 4px 4px 10px rgba(0,0,0,0.05);
position: relative; z-index: 1; width: calc(100% - 40px); margin: -50px auto 0; padding: 30px;
}
.mission_wrap .mission_box div p{ font-size: 22px; color: #333; }
.mission_wrap .mission_box div .tit{ font-size: 40px; color: #DF474D; font-weight: 900; margin-bottom: 20px;}
.mission_wrap .mission_box div .tit::before{content: '';width: 35px;height: 35px; display: inline-block;
    background-image: url('../images/img_mission_icon1.png'); background-size: contain; margin-right: 15px;}
.mission_wrap .mission_box div .tit.vision::before{background-image: url('../images/img_mission_icon2.png');}
.mission_wrap .mission_box div .stit{ padding-bottom:30px; letter-spacing: -0.7px;}
.mission_wrap .mission_box div .stit.bline{border-bottom:1px dotted #ddd;}
.mission_wrap .mission_box div ul{ display: inline-flex; flex-direction: column;align-items: flex-start; }
.mission_wrap .mission_box div ul li{  padding: 18px 0; display: inline-block; }
.mission_wrap .mission_box div ul li::after{ content: '';width: calc(100%  - 60px); height: 19px;border-bottom:1px dotted #ddd; display: block; position: absolute; left: 30px;}
.mission_wrap .mission_box div ul li:last-child::after{display: none;}
.mission_wrap .mission_box div ul li p{font-size: 17px; display: inline-block; color: #666; font-weight: 500; }
.mission_wrap .mission_box div ul li p.tit_en{ width: 120px; text-align: left; font-size: 22px; font-weight: 800; color:#333;}
.mission_wrap .mission_box div ul li p:nth-child(2){ border-left:1px solid #DAD7D7; padding-left: 20px; }
.mission_wrap .mission_box div ul li p:first-child span{ color: #DF474D;}

@media screen and (max-width: 480px) {
    .mission_wrap .title_top { padding-top:30px;}
    .mission_wrap .title_top h2{ margin-bottom: 20px;}

    .mission_wrap .mission_text{ font-size: 18px; padding: 30px 0 50px;}

    .mission_wrap .mission_chart{margin-bottom: 60px;}
    .mission_wrap .pc{display: none;}
    .mission_wrap .mobile{display: block;}

    .mission_wrap .mission_box{ margin-bottom: 60px;}
    .mission_wrap .mission_box div{width: calc(100% - 30px); margin-top: -20px; padding: 30px 15px 10px;}
    .mission_wrap .mission_box div .tit{ font-size: 28px; margin-bottom: 15px;}
    .mission_wrap .mission_box div .stit{  font-size: 18px;}
    .mission_wrap .mission_box div .stit.bline{border-bottom:0;}

    .mission_wrap .mission_box div ul li{display: grid; grid-template-columns: 90px 1fr;align-items: center; border-top:1px dotted #ddd;}
    .mission_wrap .mission_box div ul.en li{grid-template-columns: 1fr;}
    .mission_wrap .mission_box div ul li::after{ display: none;}
    .mission_wrap .mission_box div ul li p{font-size: 16px; text-align: left; display: inline-block;}
    .mission_wrap .mission_box div ul li p.tit_en{ font-size:16px;}
    .mission_wrap .mission_box div ul li p.tit_en span{ font-size: 21px;}
    .mission_wrap .mission_box div ul li p:nth-child(2){padding-left: 15px; }

}