/* 서브페이지_ABOUT(회사소개, 사업영역, 연혁) CSS
작성자 : 효민디앤피
Date : 2025-00-00
*/

html {overflow-x: hidden;}
/************ sub_banner **************/
.sub_banner {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}
.sub_banner .img_box {
    width: 100%; height: 100%;
    position: relative;
}
.sub_banner .img_box::after {
    content: "";
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    background-color: rgba(0, 0, 0, 0.6);
}
.sub_banner .img_box img {
    height: 100%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.banner_title {
    width: 100%;
    position: absolute;
    top: 55%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #eee
}
.banner_title h1 {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 15px;
}
.banner_title p {
    font-size: 1.4rem;
    line-height: 160%;
}

/* tab버튼 */
.tab_about {
    width: 100%;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    overflow: hidden;
}
.tab_about ul {
    width: calc(100% - 32px);
    margin: 0 auto;
    display: flex;
}
.tab_about ul li {
    height: 100%; height: 58px;
    line-height: 58px;
    flex-grow: 1;
    text-align: center;
}
.tab_about ul li a {
    display: block;
    width: 100%; height: 100%;
    color: #666;
}
.tab_about ul .on {
    border-bottom: 3px solid #D80C18;
    box-sizing: border-box;
}
.tab_about ul .on a {
    color: #D80C18;
    font-weight: 500;
}

/************ about(회사소개) **************/
.about_info {
    width: calc(100% - 32px);
    margin: 0 auto;
    margin-top: 80px;
}
.about_info .txt_box {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}
.about_info .txt_box .img_box {
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 70px;
}
.about_info .img_box img {width: 100%;}
.about_info .txt_box h1 {
    font-size: 2.2rem;
    line-height: 140%;
    margin-bottom: 20px;
}
.about_info .index {
    color: #D80C18;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 20px;
}
.about_info .txt_box h1 span {font-weight: 400;}
.about_info .txt_box p {
    font-size: 1.4rem;
    line-height: 150%;
}
.point_txt {
    color: #FFE5E7;
    font-size: 4.8rem;
    font-weight: 700;
    text-align: center;
}

.intro {
    width: 100%;
    margin-top: 40px;
}
.intro .img_box {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 30px;
}
.intro .img_box img {width: 100%;}

/* 회사소개 슬라이드 효과 */
.about_info > div {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .6s ease,
    transform .6s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.about_info > div.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* (선택) 요소 내부도 살짝 늦게 올라오게 하고 싶다면 */
.about_info .intro > .img_box,
.about_info .intro > .txt_box {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.about_info .intro.reveal-in > .img_box,
.about_info .intro.reveal-in > .txt_box {
  opacity: 1;
  transform: translateY(0);
}
.about_info .intro.reveal-in > .txt_box { transition-delay: .15s; }

/* 회사소개-클라이언트 */
.client {
    width: 100%; height: 1350px;
    position: relative;
}
.client .img_box {
    width: 100%; height: 100%;
    position: relative;
    background-color: #333;
    overflow: hidden;
}
.client .img_box::after {
    content: "";
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    background-color: rgba(0, 0, 0, 0.8);
}
.client .img_box img {
    width: 100%; height: 100%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.client_inner {
    width: calc(100% - 32px);
    position: absolute;
    top: 60px; left: 16px;
}
.client .txt_box {
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
}
.client .txt_box .index {
    font-size: 1.4rem;
    margin-bottom: 15px;
}
.client .txt_box h2 {
    font-size: 2rem;
    line-height: 150%;
}
.client .list {
    width: 100%;
    overflow: hidden;
}

.client .logo_track {
  display: flex;
  animation: clientSlider 10s linear infinite; 
}
.client .logo_page {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 20px;
}

.client .logo_box {
  width: calc(50% - 15px); 
  position: relative;
  margin-bottom: 8px;
  height: 70px;    
}

.client .logo_box img {
  width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}


@keyframes clientSlider {
  from { transform: translateX(0); }
  to   { transform: translateX(-200%); }
}

.tablet_pc_only {display: none;}
.pc_only {display: none;}



/************ about(사업영역) **************/
.wrap {
    width: calc(100% - 32px);
    margin: 0 auto;
    margin-top: 80px;
}
/* process */
.process {width: 100%;}
.about_intro {
    text-align: center;
    margin-bottom: 50px;
}
.about_intro .index {
    color: #D80C18;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 15px;
}
.about_intro h2 {
    font-size: 2.4rem;
    line-height: 140%;
}
.info_table {
    width: 100%;
    margin: 0 auto;
}
.info_table .line {display: none;}
.info_table .box {
    width: 230px;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border: 1px solid #D80C18;
    box-sizing: border-box;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 0px 15px rgba(255, 189, 189, 0.3);
}
.info_table .box .box_inner {
    position: absolute;
    width: 100%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

}
.info_table .box .box_inner .icon {
    margin-bottom: 20px;
}
.info_table .box .box_inner h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
    color: #333;
}
.info_table .box .box_inner p {
    font-size: 1.4rem;
    line-height: 140%;
    color: #333;
}

.fade-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s ease;
}
.fade-up.up {
    opacity: 1;
    transform: translateY(0);
}

/* service */
.service {
    width: 100%;
    background-color: #f5f5f5;
    padding: 10px 0;
    margin-top: 100px;
}
.service .wrap {margin-top: 60px;}
.service_box {
    width: 100%;
    margin: 60px 0;
}
.serv_card {
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: transform 0.6s ease-out;
}
.serv_card.visible {
  opacity: 1;
  transform: translateY(0);
}
.serv_card .img_box {
    width: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(0, 0, 0);
    font-size: 0;
}
.serv_card .img_box img {width: 100%;opacity: 40%;aspect-ratio: 1/.6;object-position: top;}
.serv_card .txt_box {
    width: calc(100% - 40px);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    color: #fff;
}
.serv_card .txt_box .index {
    color: #eee;
    font-size: 1.4rem;
    margin-bottom: 6px;
}
.serv_card .txt_box h1 {
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 44px;
}

/* service_list 서비스 소개 */
.service_list {
    width: 100%;
    background-color: #222;
}
.service_list .wrap {
    margin-top: 0px;
    padding-top: 80px;
}
/* .motion_banner {
    width: 100%; height: 40px;
    overflow: hidden;
    padding: 20px 0;
} */
.banner_track {
  display: flex;
  width: max-content;
  animation: motion 25s linear infinite;
}
.banner_track ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.banner_track li {
    color: #666;
    font-size: 3.2rem;
    font-weight: bold;
    float: left;
    margin-right: 60px;
    white-space: nowrap;
}

@keyframes motion {
  from {transform: translateX(0);}
  to {transform: translateX(-50%); /* 2세트 중 앞 절반만큼 이동 */}
}
.list_info {
    width: 100%;
    padding-bottom: 100px;
}
.list_info .img_box {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.list_info .img_box img {width: 100%;}
.list_info .txt_box {
    width: 100%;
    color: #fff;
}
.list_info .index {
    display: inline-block;
    font-size: 1.4rem;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 6px 15px;
    margin-bottom: 10px;
    color: #eee;
}
.list_info .txt_box h2 {
    font-size: 3.2rem;
    margin-bottom: 15px;
}
.list_info .txt_box p {
    line-height: 160%;
}

#editing, #visual, #degital, #printing {
    scroll-margin-top: 20vh;
}

/************ about(연혁) **************/
.history_outer {
        width: 100%;
        background-color: #f5f5f5;
        padding: 60px 0;
        margin-top: 80px;
}
.history_sec {
    width: calc(100% - 32px);
    /* width: 100%; */
    margin: 0 auto;
    margin-top: 80px;
}
.time_box {
    width: 100%;
    position: relative;
}
.time_box .line {
    height: calc(100%);
    border: 1px solid #D80C18;
    position: absolute;
    top: 0; left: 10px;
}
.decade {
    width: 100%;
    position: relative;
    margin-top: 20px;
}
.decade .dot {
    width: 12px; height: 12px;
    border-radius: 12px;
    border: 2px solid #D80C18;
    background-color: #fff;
    position: absolute;
    top: 14px; left: 3px;
}
.decade h1 {
    font-size: 3.6rem;
    color: #D80C18;
    margin-bottom: 25px;
    margin-left: 38px;
}
.time_sec {
    width: calc(100% - 40px);
    margin-left: 40px;
    margin-bottom: 80px;
}
.time_sec .list {width: 100%;}
.time_list {
    margin-bottom: 30px;
    display: flex;
}
.time_list .year {
    width: 60px;
    float: left;
    font-weight: bold;
}
.time_list .info {
    width: calc(100% - 60px);
    color: #333;
    line-height: 150%;
}
.time_list .info p {
    margin-bottom: 16px;
}
.photo_gallery {
    width: 100%;
}
.time_photo {
    width: 100%;
    display: flex;
    gap: 8px;
}
.time_photo .img_box {
    width: 100%;
    margin-bottom: 8px;
}
.time_photo .img_box img {
    width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}



/************ 미디어쿼리(태블릿) **************/
@media screen and (min-width: 768px) {
    .mobile_only {display: none;}
    /*** sub_banner ***/
    .sub_banner {
        aspect-ratio: 16 / 9;
        max-height: 450px;
    }
    .sub_banner .img_box img {width: 100%;}
    .banner_title h1 {
        font-size: 3.8rem;
        margin-bottom: 20px;
    }
    .banner_title p {font-size: 1.6rem;}

    /****** about(회사소개) ******/
    .tab_about ul {
        width: calc(100% - 300px);
    }
    .tab_about ul li {
        height: 60px;
        line-height: 60px;
    }
    .tab_about ul li a {font-size: 1.8rem;}

    /* 회사소개 */
    .about_info {
        width: calc(100% - 40px);
        margin-top: 120px;
    }
    .about_info .txt_box .img_box {
        max-width: 340px;
        margin-bottom: 100px;
    }
    .about_info .index {font-size: 1.8rem;}
    .about_info .txt_box h1 {
        font-size: 3.2rem;
        margin-bottom: 25px;
    }
    .about_info .txt_box p {
        font-size: 1.6rem;
    }
    .about_info .point_txt {
        font-size: 6.2rem;
    }
    .intro {
        margin-top: 60px;
    }
    .intro .img_box {
    margin-bottom: 60px;
    }
    .client {
    width: 100%; height: 900px;
    }
    .client_inner {top: 80px; left: 16px;}
    .client .txt_box .index {
    font-size: 1.6rem;
    margin-bottom: 20px;
    }
    .client .txt_box h2 {font-size: 2.4rem;}
    .client .list .logo_box {
        width: calc(25% - 16px);
        margin-bottom: 15px;
        height: 65px;
    }
    .client .logo_page {
        gap: 20px;
    }
    .client .logo_track {
    animation: clientSlider 30s linear infinite;
    }
    .tablet_pc_only {display: block;}

    /****** about(사업영역) ******/
    .wrap {
        width: calc(100% - 60px);
        margin-top: 100px;
    }
    .about_intro .index {font-size: 1.8rem;}
    .about_intro h2 {font-size: 3rem;}
    .info_table {
        width: 600px;
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        margin-top: 60px;
    }
    .info_table .box {
        width: calc(50% - 40px);
        margin-bottom: 0;
    }
    .service .wrap {
        margin-top: 100px;
        margin-bottom: 80px;
    }
     .serv_box {
        display: flex;
        gap: 16px;
    }
    .serv_card .txt_box {width: calc(100% - 60px);}
    .motion_banner {
        height: 80px;
        padding: 20px 0;
    }
    .banner_track li {
        font-size: 4.8rem;
        margin-right: 40px;
    }
    .service_list .wrap {
        max-width: 550px;
        padding-top: 120px;
    }
    .list_info {padding-bottom: 120px;}
    .list_info .index {margin-bottom: 15px;}
    .list_info .txt_box h2 {
    font-size: 3.8rem;
    margin-bottom: 20px;
    }
    .list_info .txt_box p {
        font-size: 1.8rem;
    }

    /************ about(연혁) **************/
    .history_outer {
        margin-top: 160px;
}
    .history {
        width: 550px;
        margin: 0 auto;
    }
    .history h2 {font-size: 3.2rem;}
    .decade .dot {top: 20px;}
    .decade h1 {
        font-size: 4.4rem;
        margin-bottom: 30px;
    }
    .time_list {font-size: 1.8rem;}
    .time_photo {
        margin-left: 60px;
        gap: 10px;
    }


}

/************ 미디어쿼리(pc) **************/
@media screen and (min-width: 1024px) and (max-width: 1300px) {
    .serv_card .txt_box {width: calc(100% - 40px);}
    .serv_card .txt_box .index {
    color: #eee;
    font-size: 1.4rem;
    }
    .serv_card .txt_box h1 {
        font-size: 2.4rem;
        margin-bottom: 25px;
    }
    .serv_card .txt_box .item {
        font-size: 1.4rem;
    }
}


@media screen and (min-width: 1024px) {
    .sub_banner {max-height: 500px;}
    .tab_about ul {max-width: 800px;}
    .tab_about ul li {
        height: 68px;
        line-height: 68px;
    }
    .pc_only {display: block;}

    /* 회사소개 글+사진 */
    .about_info {
        max-width: 1400px;
        margin-top: 180px;
    }
    .about_info>.txt_box {
        margin-bottom: 100px;
    }
    .about_info .txt_box .img_box {
        max-width: 500px;
        margin-bottom: 150px;
    }
    .about_info .intro {
        display: flex;
        gap: 100px;
        align-items: center;
    }
    .about_intro .index {margin-bottom: 30px;}
    .about_intro h2 {
        font-size: 3.6rem;
        line-height: 150%;
    }

    .about_info .intro .txt_box {text-align: left;}
    .about_info .info_bottom {flex-direction: row-reverse;}
    .about_info .txt_box p {
        font-size: 1.8rem;
        line-height: 160%;
    }
    .about_info .txt_box h1 {
        font-size: 3.6rem;
    }
    .intro .img_box {margin-bottom: 0;}

    .client {
        height: 1030px;
    }
    .client_inner {
        width: 1400px;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }
    .client .txt_box .index {margin-bottom: 30px;}
    .client .txt_box h2 {font-size: 3rem;}
    
    .client .list .logo_box {
    width: calc(16.6% - 16px);
    height: 95px;
    margin-top: 40px;
    }
    
    .client .list .logo_box img {width: 100%;}
    .client .logo_track {
    animation: clientSlider 40s linear infinite; 
    }

    /****** about(사업영역) ******/
    .process {
        margin-top: 180px;
    }
    .wrap {max-width: 1400px;}
    .info_table {
        width: 100%;
        gap: 40px;
        margin-top: 80px;
        position: relative;
    }
    .info_table .line {
        display: block;
        width: 98%;
        border: 1px solid #D80C18; box-sizing: border-box;
        position: absolute;
        top: 50%; left: 10px;
    }
    .info_table .box {
        width: calc(25% - 40px);
    }
    .info_table .box .box_inner h3 {
        font-size: 2.2rem;
        margin-top: 25px;
    }
    .info_table .box .box_inner p {font-size: 1.6rem;}
    .service {
        margin-top: 120px;
        padding: 80px 0;
    }
    .service .about_intro h2 {font-size: 3.6rem;}
    .service_box {
        display: flex;
        gap: 16px;
        margin-top: 90px;
    }
    .service_list .wrap {
        max-width: 1400px;
        padding-top: 160px;
    }
    .service_list .list_info {
        display: flex;
        gap: 80px;
        align-items: center;
    }
    .service_list .change {
        flex-direction: row-reverse;
    }
    .list_info .txt_box h2 {
    margin-bottom: 25px;
    }
    #editing, #visual, #degital, #printing {
    scroll-margin-top: 30vh;
    }

    .banner_track li {margin-right: 80px;}

    
    /************ about(연혁) **************/
    .history {
        max-width: 1400px;
        width: 100%;
        margin-top: 80px;
    }
    .history h2 {font-size: 3.6rem;}
    .history_sec {
        margin-bottom: 0;
    }
    .time_box .line {
        left: 50%;
    }
    .decade {left: calc(50% - 10px);}
    .dot2020 h1, .dot2000 h1 {margin-left: 65px;}
    .dot2010 h1 {margin-left: -180px;}
    .dot1980 h1 {margin-left: -290px;}
    .time_sec {
        display: flex;
        gap: 120px;
        margin: 0 auto;
    }
    .num2020, .num2000 {flex-direction: row-reverse;}
    .num2010, .num1980 {text-align: right;}
    .num2010 .time_list, .num1980 .time_list {flex-direction: row-reverse;}
    .num2010 .year, .num1980 .info {float: right;}
    .time_photo {
        width: 100%;
        margin-left: 0;
    }
    .num2020 .time_photo {width: 70%; margin-left: 190px;}
    .num2010 .time_photo {width: 70%; margin-right: 190px;}
    /* .num2000 .time_photo {width: 70%; margin-left: 190px;} */
    .num1980 .time_photo {width: 70%; margin-right: 190px;}
    .num2020 .time_photo .img_box, .num2010 .time_photo .img_box {height: 60%;}
    .num2020 .time_photo .img_box, .num2010 .time_photo img {
        width: 100%;}
    
    .time_sec {margin-bottom: 100px;}
    .time_list .info {line-height: 120%;}
}