/* 메인 키비주얼 */
.main__keyimg{
    padding-left: var(--spacing-32);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 75px;
}
.main__keyimg-img{
    width: 50%; height: auto;
}
.main__keyimg-img > img{
    width: calc(100vw - 51%); height: auto;
}
.main__keyimg-content{
    width: 50%;
}
.main__keyimg-content--title{
    font-size: var(--fs-display);
    font-weight: var(--fw-sb);
    margin-bottom: var(--spacing-32);
}
.main__keyimg-content--btn1{
    padding: var(--spacing-8) var(--spacing-24);
    background: var(--color-pri-10);
    color: var(--color-pri-80);
    font-size: var(--fs-body-md);
    border-radius: 100px;
    margin-right: var(--spacing-16);
}
.main__keyimg-content--btn1:hover{
    background: var(--color-pri-30);
    color: var(--color-gray-0);
    transition: all 0.3s ease;
}
.main__keyimg-content--btn2{
    padding: var(--spacing-8) var(--spacing-24);
    border: 1px solid var(--color-pri-50);
    background: var(--color-gray-0);
    color: var(--color-pri-80);
    font-size: var(--fs-body-md);
    border-radius: 100px;
}
.main__keyimg-content--btn2:hover{
    background: var(--color-pri-50);
    color: var(--color-gray-0);
    transition: all 0.3s ease;
}

/* 로고 슬라이드 */
.main__slide{
    width: 100%; height: 124px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: var(--color-gray-0);
    border-top: 1px solid var(--color-pri-80);
}
.main__slide-wrap{
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0;
    /* animation: scrolling 20s linear infinite; */
    will-change: transform;
}
.main__slide-wrap > img{
    width: auto; height: 35px;
    margin-right: var(--spacing-80);
    flex-shrink: 0;
}
/* @keyframes scrolling {
    0% {transform: translateX(0);}
    100% {transform: translateX(-50%);}
} */

/* 소개글 */
.main__intro{
    background-color: var(--color-sec-80);
}
.main__intro-wrap{
    padding: var(--spacing-100) var(--spacing-32);
}
.main__intro-wrap > img{
    width: 40px; height: auto;
    margin-bottom: var(--spacing-4);
}
.main__intro-wrap--title{
    font-size: var(--fs-heading);
    font-weight: var(--fw-sb);
    color: var(--color-gray-0);
}

/* 솔루션 */
.main__text{
    display: block;
    padding: var(--spacing-100) var(--spacing-32) 0 var(--spacing-32);
}
.main__text .main__text-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main__text .main__text-header > img{
    width: 20px; height: 20px;
}
.main__text .main__text-header > img:hover{
    animation: bounceUp 0.6s infinite alternate ease-in-out;
}
@keyframes bounceUp {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
.main__text-header--title{
    font-size: var(--fs-heading);
    font-weight: var(--fw-sb);
}
.main__text-des{
    font-size: var(--fs-title-md);
    margin-top: var(--spacing-8);
}

.main__contents{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    padding-top: var(--spacing-32);
}
.main__content .main__content-wrap{
    display: block;
}
.main__content{
    overflow: hidden;
    border-top: 1px solid var(--color-pri-80);
    border-right: 1px solid var(--color-pri-80);
}
.main__content:nth-child(3n){
    display: block;
    border-right: none;
}
.main__content-wrap{
    overflow: hidden;
    transition: transform 0.4s ease-in-out;
}
.main__content-wrap:hover{
    transform: scale(1.025);
}
.main__content .main__content-wrap .main__content-img > img{
    width: 100%; height: auto;
}
.main__content-wrapper{
    padding: var(--spacing-32);
}
.main__content-wrapper--title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-32);
}
.main__content-wrapper--title---logo{
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}
.main__content-wrapper--title---logo > img{
    width: 28px; height: auto;
}
.main__content-wrapper--title---logo > p{
    font-size: var(--fs-title-md);
    font-weight: var(--fw-b);
}
.main__content-wrapper--title > img{
    width: 14px; height: 14px;
}
.main__content-wrapper--des{
    font-size: var(--fs-body-sm);
}
.main__content-wrapper--des > span{
    font-weight: var(--fw-b);
}

/* 뉴스 */
.main__news{
    padding-bottom: var(--spacing-100);
}
.main__list{
    display: block;
    margin: 0 var(--spacing-32);
    border-bottom: 1px solid var(--color-gray-90);
    padding-top: var(--spacing-32);
}
.main__list-item{
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}
.main__list-item--tag{
    padding: var(--spacing-4) var(--spacing-12);
    border: 1px solid var(--color-pri-80);
    color: var(--color-pri-80);
}
.main__list-item--date{
    color: var(--color-gray-60);
}
.main__list-title{
    padding: var(--spacing-24) 0;
    font-size: var(--fs-title-md);
}
.main__list-title:hover{
    color: var(--color-pri-50);
    transition: color 0.3s ease;
}

/* 컨텍 */
.main__contact{
    background: url('/assets/img/main-05.png') no-repeat center / cover;
    width: 100%;
    height: 100%;
}
.main__contactwrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.main__contactwrapper{
    padding: var(--spacing-100) var(--spacing-32);
    color: var(--color-gray-0);
}
.main__contactwrapper:first-child {
    grid-column: span 2;
}
.main__contactwrapper:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
}
.main__contact-text{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main__contact-text > h4{
    font-size: var(--fs-heading);
    font-weight: var(--fw-sb);
}
.main__contact-text > a > img{
    width: 85px; height: 85px;
}
.main__contact-text > a > img:hover{
    animation: bounceUp2 0.6s infinite alternate ease-in-out;
}
@keyframes bounceUp2 {
    from { transform: translateX(0); }
    to { transform: translateX(10px); }
}
.main__contactwrapper-btn{
    border-right: 1px solid var(--color-gray-0);
}
.main__contact-btn > a{
    font-size: var(--fs-heading);
    font-weight: var(--fw-sb);
}
.main__contact-btn:hover{
    color: var(--color-sec-80);
    transition: color 0.3s ease;
}