.about .group01 {position: relative; height: 932px; padding-top: 350px; text-align: center; background: url(https://img.lifet.co.kr/visual/about_back.jpg) no-repeat center top; background-size: cover;}
.about .group01 img {z-index: 1; position: relative; width: 118px;}
.about .group01 p {z-index: 1; position: relative; margin-top: 30px; color: #FFF; font-size: 64px; font-weight: 500; line-height: 150%;}
.about .group01::before {content:''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(47, 47, 47, .3);}
.about [class*="group0"] {color: #000;}
.about [class*="group0"] h2 {margin-bottom: 8px; color: #68A5FE; font-size: 32px; font-weight: 500; line-height: 150%;}
.about [class*="group0"] h3 {font-size: 48px; font-weight: 500; line-height: 130%; } 
.about .group02 {color: #fff; background-color: #3D3D3D;}
.about .group02, .about .group03 {padding: 130px 0;}
.about .group04, .about .group05 {padding: 140px 0;}
.about .group02 ul {display: flex; flex-wrap: wrap; margin-top: 10px; margin-left: -214px;}
.about .group02 ul li {padding-left: 214px; padding-top: 50px;}
.about .group02 ul li > span {display: block; margin-bottom: 6px; font-size: 28px; font-weight: 400; line-height: 150%;}
.about .group02 ul li strong {display: block; width: 190px; font-size: 58px; font-weight: 500; line-height: 150%;}
.about .group02 ul li:nth-child(3) strong {display: inline; width: auto;}
.about .group02 ul li:last-child strong {width: auto; font-size: 45px;}
.about .group03 {background-color: #F4F5FA;}
.about .group03 p {margin-top: 40px; font-size: 28px; font-weight: 400; line-height: 130%;}
.about .group03 p + p {margin-top: 30px; margin-bottom: 60px;}
.about .group03 .img {overflow: hidden; height: 400px; border-radius: 20px;}
.about .group03 .img img {height: 400px; width: 100%; object-fit: cover;}
.about .group04 ul {margin-top: 92px;}
.about .group04 ul li {display: flex; align-items: flex-start;}
.about .group04 ul li + li {margin-top: 56px;}
.about .group04 ul li .img {overflow: hidden; display: flex; align-items: flex-end; justify-content: center; width: 569px; height: 341px; margin-right: 59px; border-radius: 8px; background-color: #F4F5FA;}
.about .group04 ul li .img img {width: 100%;}
/*.about .group04 ul li:nth-child() .img img {width: 240px;}*/
.about .group04 ul li:nth-child(5) .img img {width: 204px;}
.about .group04 ul li .img img + img {margin-left: -30px;}
.about .group04 dl {flex: 1;}
.about .group04 dl dt {font-size: 40px; font-weight: 500; line-height: 130%;}
.about .group04 dl dd {margin-top: 15px; font-size: 28px; line-height: 130%; word-break: keep-all}
.about .group05 {color: #fff; background-color: #76AEFF;}
.about .group05 h2 {color: #fff;}
.about .group05 div > ol {position: relative; width: 978px; margin-left: 62px; margin-top: 60px; padding: 70px 74px 82px 70px; border-radius: 20px; background-color: rgba(60, 128, 227, .6);}
.about .group05 div > ol::after {content: ''; position: absolute; top: 93px; left: 213px; width: 2px; height: 88.2%; background-color: #A0C7FF;}
.about .group05 div > ol > li {align-items: flex-start;}
.about .group05 div > ol > li + li {margin-bottom: 60px;}
.about .group05 div > ol > li > ol > li + li {margin-bottom: 50px;}
.about .group05 ol {display: flex; flex-flow: column; flex-direction: column-reverse;}
.about .group05 ol li {display: flex; align-items: center;}
.about .group05 ol li .year {position: relative; width: 88px; color: #E4EFFF; font-size: 36px; font-weight: 400; line-height: 130%;}
.about .group05 ol li .year::after {z-index: 1; content: ''; position: absolute; right: -72px; top: 8px; width: 24px; height: 24px; border: 4px solid #fff; border-radius: 50%; background-color: #518EE7;}
.about .group05 ol li .date {width: 140px;color: #CCE1FF; font-size: 24px; font-weight: 400; line-height: 130%;}
.about .group05 ol ol {margin-left: 144px;}
.about .group05 ol li p {font-size: 32px; font-weight: 500; line-height: 130%; }
.about .group05 ol li p span {display: block; font-size: 24px; font-weight: 400;}

@media (max-width:767px) {
    .about [class*="group0"] {padding: 50px 20px;}
    .about [class*="group0"] h2 {font-size: 16px;}
    .about .group01 {height: 519px; padding-top: 283px; background-image: url(https://img.lifet.co.kr/visual/about_back_m.png);}
    .about .group01 img {width: 80px;}
    .about .group01 p {width: 208px; margin: 18px auto 0; font-size: 28px;}
    .about [class*="group0"] h3 {word-break: keep-all; font-size: 26px;}
    .about .group02 h3 span {display: block;}
    .about .group02 ul {margin-top: 30px; margin-left: -50px;}
    .about .group02 ul li {padding: 30px 0 0 50px;}
    .about .group02 ul li:nth-child(1) {order: 0; width: 43%;}
    .about .group02 ul li:nth-child(2) {order: 1; }
    .about .group02 ul li:nth-child(3) {order: 4; width: 43%;}
    .about .group02 ul li:nth-child(4) {order: 2; width: 43%;}
    .about .group02 ul li:nth-child(5) {order: 3; }
    .about .group02 ul li:nth-child(6) {order: 5;}
    .about .group02 ul li > span {margin-bottom: 0; font-size: 16px;}
    .about .group02 ul li > span span {display: none;}
    .about .group02 ul li strong {width: 118px; font-size: 36px;}
    .about .group02 ul li:last-child strong {font-size: 20px;}
    .about .group03 .img {display: flex; justify-content: center; height: 204px; border-radius: 8px;}
    .about .group03 .img img {height: 204px;}
    .about .group03 p {margin-top: 30px; font-size: 16px;}
    .about .group03 p br {display: none;}
    .about .group03 p + p {margin-top: 16px; margin-bottom: 30px;}
    .about .group04 ul {margin-top: 41px;}
    .about .group04 ul li {flex-flow: column;}
    .about .group04 ul li + li {margin-top: 41px;}
    .about .group04 ul li .img {width: 100%; height: auto; margin: 0 0 16px;}
    .about .group04 ul li:nth-child(5) .img img {width: 117px;}
    .about .group04 ul li .img img + img {margin-left: -15px;}
    .about .group04 dl dt {font-size: 20px;}
    .about .group04 dl dd {margin-top: 8px; font-size: 16px;}
    .about .group05 ol li {flex-flow: column; align-items: flex-start;}
    .about .group05 div > ol {width: auto; margin: 40px 0 0; padding: 30px 0 30px 32px;}
    .about .group05 ol li .year {margin-bottom: 12px; padding-left: 30px; font-size: 20px;}
    .about .group05 ol li .year::after {right: auto; left: 0; top: 6px; width: 10.5px; height: 10.5px; border-width: 1.5px;}
    .about .group05 ol li .date {font-size: 14px;}
    .about .group05 ol li p {margin-top: 4px; font-size: 15px; font-weight: 400;}
    .about .group05 ol li p span {font-size: 13px;}
    .about .group05 div > ol::after {left: 38px; top: 40px; width: 1px; height: 93.4%;}
    .about .group05 ol ol {margin-left: 30px;}
    .about .group05 div > ol > li + li {margin-bottom: 30px;}
    .about .group05 div > ol > li > ol > li + li {margin-bottom: 18px;}
    .about .group05 div > ol > li:first-child .year {margin-top: 0;}
}