@charset "UTF-8";

/* visual */
.about-visual {background-image:url('../images/company/about-visual.png');}

/* service */
.about-service {
    width:100%; 
    background-image:url('../images/company/about-img.jpg');
    background-repeat: no-repeat;
    background-position: center center; 
    background-size: cover;
    background-attachment: fixed;
}
.about-service .inner {padding: 160px 0;}
.about-service .service-header{color:#fff; font-size:50px; font-weight: 500; text-align: center;}
.about-service .service-body {display: flex; justify-content: space-between; width: 80%; margin: 120px auto 0 auto;}
.about-service .service-body li {display: flex; flex-direction: column; align-items: center;}
.about-service .service-body li .icon{display: block; width: 160px; height: 160px; border: 1px solid #fff; border-radius: 50%; padding-top:48px ;}
.la-briefcase{color:#fff; font-size: 64px;text-align: center; }
.la-award{color:#fff; font-size: 64px;text-align: center; }
.la-user-friends{color:#fff; font-size: 64px;text-align: center; }
.la-handshake{color:#fff; font-size: 64px;text-align: center; }
.about-service .service-body li .category{font-size:18px; font-weight:300; color:#fff; opacity: 75%; padding:40px 0;}
.about-service .service-body li .text{font-size:28px; font-weight:500; color:#fff; text-align: center;}

/* infomation */
.about-info {
    width:100%; 
    background-image:url('../images/company/about-info.png');
    background-repeat: no-repeat;
    background-position: center bottom; 
    background-size: cover;
}
.about-info .inner {display: flex; padding: 160px 0;}
.about-info .info-header{color:#121212; font-size:50px; font-weight: 700;width:30%;line-height: 1.2;padding-right:80px;}
.about-info .info-table {width: 80%; border-top: 2px solid #121212;}
.about-info .info-table li {color:#121212; font-size:24px; font-weight: 600; padding: 40px 0; border-bottom: 1px solid #acacac;}
.about-info .info-table .table-h{display: inline-block; width: 200px; color:#121212; font-size:24px; font-weight: 400;}

@media screen and (max-width: 1280px) { /* PC + Tablet 환경 */    
    .about-service .inner {padding: 120px 40px;}
    .about-service .service-header {font-size:40px;}
    .about-service .service-body {width: 100%; margin: 80px auto 0 auto;}9.7vw
    .about-service .service-body li .icon {width: 140px; height: 140px; padding-top: 36px ;}   
    .about-service .service-body li .category {font-size:16px; padding:32px 0;}9.7vw
    .about-service .service-body li .text {font-size:20px;}

    .about-info .inner {flex-direction: column; padding: 120px 40px;}
    .about-info .info-header{font-size: 36px; width: 100%; padding-right:inherit;}
    .about-info .info-table {width: 100%; margin-top: 40px;}
    .about-info .info-table li {font-size:20px; padding: 28px 0;}
    .about-info .info-table .table-h{width: 160px; font-size:20px;}
}

@media screen and (max-width: 450px) { /* Mobile 환경 */
    .about-service .inner {padding: 80px 40px;}
    .about-service .service-header {font-size: 7.8vw;}
    .about-service .service-body {flex-direction: column; width: 100%; margin: 60px auto 0 auto;}
    .about-service .service-body li {flex-direction: row;padding: 10px 0;}
    .about-service .service-body li .icon {display: flex; align-items: center; justify-content: center; width: 24.3vw; height: 24.3vw; font-size: 40px; padding-top: inherit; }   
    .about-service .service-body li .category {display: none;}
    .about-service .service-body li .text {font-size:16px; margin-top: inherit; margin-left: 20px; text-align: left;}

    .about-info .inner {padding: 80px 40px;}
    .about-info .info-header{font-size: 28px;}
    .about-info .info-table {width: 100%; margin-top: 24px;}
    .about-info .info-table li {position: relative; font-size:16px; padding: 20px 0 20px 100px;}
    .about-info .info-table .table-h{position: absolute; left: 0; width: inherit; font-size:16px;}
}