@charset "UTF-8";

:root{
    --container-width:130rem;
}

/* ===================================
   공통
=================================== */
.bg-panel {
    position: absolute;
    left: 0;
    top: 45%;
    transform:translateY(-50%);
    width:calc(((100vw - 130rem)/2) + 68rem);
    height:33rem;
    background:rgba(0,0,0,.8);
    border-top-right-radius: var(--krds-rdo-size-lg);
    border-bottom-right-radius: var(--krds-rdo-size-lg);
}
.kosme-main-banner .inner,
.kosme-main-card .inner{
    display: flex;
    margin:0 auto;
    height: 100%;
    position:relative;
    flex-direction: column;
    gap: var(--krds-gap-5);
}

/* ===================================
   메인 비주얼
=================================== */

.kosme-main-banner{
    position:relative;
}
.kosme-main-banner .swiper-slide{
    position:relative;
    height:61rem;
}
.kosme-main-banner .im{
    position:absolute;
    inset:0;
}
.kosme-main-banner .im img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* 텍스트 영역 */
.kosme-main-banner .visual-content{
    position:absolute;
    inset:0;
    z-index:2;
}
.kosme-main-banner .visual-content .inner{
    height:100%;
}
.kosme-main-banner .txt-box{
    position: relative;
    top: 15rem;
    left: 0;
    width: 60rem;
}

/* KRDS 스타일 */
.kosme-main-banner .cate{
    display: none;
    margin-bottom:1.6rem;
    font-size:2rem;
    font-weight:500;
    color:#fff;
}
.kosme-main-banner .tit{
    margin-bottom: var(--krds-spacer-5);
    font-size: var(--krds-pc-font-size-display-medium);
    line-height: var(--krds-line-height-none);
    font-weight: var(--krds-font-weight-bold);
    letter-spacing: var(--krds-letter-spacing-none);
    color: var(--krds-color-light-alpha-white100);
}
.kosme-main-banner .desc{
    font-size:2rem;
    line-height:1.7;
    color:#fff;
}

/* ===================================
   컨트롤 바
=================================== */
.kosme-main-banner .control-area{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:7rem;
    background:rgba(0,32,71,.8);
    z-index:10;
}

.kosme-main-banner .control-area .inner{
    height:100%;
}
.kosme-main-banner .swiper-indicator{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:2rem;
}
.kosme-main-banner .swiper-pagination{
    position:static;
}
.kosme-main-banner .swiper-navigation{
    display:flex;
    gap:.8rem;
}
.kosme-main-banner .swiper-button-prev,
.kosme-main-banner .swiper-button-next,
.kosme-main-banner .swiper-button-play,
.kosme-main-banner .swiper-button-stop{
    position:static;
    margin:0;
    width: var(--krds-size-height-6);
    height: var(--krds-size-height-6);
}

/* ===================================
   카드 영역
=================================== */
.kosme-main-card{
    padding:6rem 0 8rem;
}
.kosme-main-card .card-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2.4rem;
}
.kosme-main-card .card-item{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:24rem;
    /*box-shadow:
        0 .4rem 2rem rgba(0,0,0,.08);*/
    transition:.2s ease;
}
.kosme-main-card .card-item:hover{
    transform:translateY(-.4rem);
}

.kosme-main-card .d-card {
    padding:0;
    border: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-border-gray-light);
    border-radius: var(--krds-radius-xlarge1);
}

.kosme-main-card .d-card .im {
    flex-shrink: 0;
    height: 14.6rem;
    background-repeat: no-repeat;
    background-position: center;
}

.kosme-main-card .d-card .im.i1 {
    background-image: url(/static/compat/images/eng/main_company_logo_01.png);
}

.kosme-main-card .d-card .im.i2 {
    background-image: url(/static/compat/images/eng/main_company_logo_02.png);
}

.kosme-main-card .d-card .im.i3 {
    background-image: url(/static/compat/images/eng/main_company_logo_03.png);
}

.kosme-main-card .d-card .im.i4 {
    background-image: url(/static/compat/images/eng/main_company_logo_04.png);
}

.kosme-main-card .d-card .im.i5 {
    background-image: url(/static/compat/images/eng/main_company_logo_05.png);
}
.kosme-main-card .d-card .im.i6 {
    background-image: url(/static/compat/images/eng/main_company_logo_06.png);
}

.kosme-main-card .d-card .in {
    border-radius: 0 0 var(--krds-radius-xlarge2) var(--krds-radius-xlarge2);
    padding: var(--krds-pc-padding-card-medium);
    background-color: var(--krds-light-color-surface-white-subtle);
}

.kosme-main-card .d-card .c-tit {
    padding-bottom: var(--krds-pc-padding-card-medium);
    font-weight: var(--krds-font-weight-bold);
    font-size: var(--krds-pc-font-size-heading-small);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 1;*/
}

.kosme-main-card .d-card .c-btn {
    display: flex;
    justify-content: flex-end;
    gap: var(--krds-gap-3);
}

.main-title-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap:var(--krds-gap-5);
}
.main-title-wrap .tit {
    font-size: var(--krds-pc-font-size-heading-large);
    letter-spacing: var(--krds-type-letter-spacing-1);
}

@media (max-width:1023px){
    .bg-panel {
        width: calc(((100vw - 130rem) / 2) + 80rem);
    }
    .kosme-main-banner .swiper-slide{
        height:50rem;
    }
    .kosme-main-banner .txt-box{
        top: 6rem;
        left:2rem;
        width:calc(100% - 25rem);
        height:auto;
        padding:3.2rem;
    }
    .kosme-main-banner .tit{
        font-size:3.8rem;
    }
    .kosme-main-banner .desc{
        font-size:1.8rem;
    }
    .kosme-main-card .card-list{
        grid-template-columns:repeat(2,1fr);
    }
    .kosme-main-card .card-item{
        min-height:33rem;
    }
}

@media (max-width:767px){
    .bg-panel {
        top: 20rem;
        width: 28rem;
        height: 28rem;
    }
    .kosme-main-banner .swiper-slide{
        height:42rem;
    }
    .kosme-main-banner .txt-box{
        left: 1.6rem;
        width: calc(100% - 9.5rem);
        padding: 0;
        top: 8rem;
    }
    .kosme-main-banner .cate{
        font-size:1.4rem;
    }
    .kosme-main-banner .tit{
        font-size: 2.2rem;
        line-height: 1.35;
        margin-bottom: var(--krds-spacer-1-2);
    }
    .kosme-main-banner .desc{
        font-size:1.5rem;
        line-height: 2rem;
    }
    .kosme-main-banner .swiper-indicator{
        justify-content:center;
    }
    .kosme-main-card .card-list{
        grid-template-columns:1fr;
    }
    .kosme-main-card .card-item{
        min-height:18rem;
    }
}