@charset "utf-8";


/* =========================================================
   ABOUT PAGE
========================================================= */

.about_page {
    --about-line: #e8e8e8;
    --about-card: #f7f7f7;
    --about-dark: var(--color-bg-dark);

    position: relative;
    width: 100%;

    color: var(--color-text);
}


/* =========================================================
   COMMON
========================================================= */

.about_page .main_sec {
    position: relative;
}


/*
 * 이미지 + 텍스트 기본 정렬
 */
.about_page .grid_card2 {
    align-items: center;
}


/*
 * 이미지
 */
.about_page .round_img {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: #f4f4f4;
}


/*
 * 회사소개 이미지는
 * 페이지 전체에서 통일된 비율 사용
 */
.about_page .round_img img {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;
    object-position: center;
}


/*
 * 공통 타이틀 스타일은 mobile.css 것을 유지하고
 * 서브페이지에서 필요한 간격만 조정
 */
.about_page .main_sec_tit {
    max-width: 650px;
}


.about_page .main_sec_tit h2 {
    letter-spacing: -.04em;
}


.about_page .main_sec_tit p {
    max-width: 580px;

    color: var(--color-text-sub);

    letter-spacing: -.025em;
}


/* =========================================================
   01. ABOUT INTRO
========================================================= */

.about_intro {
    padding-top: 150px;
}


.about_intro .grid_card2 {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: clamp(50px, 7vw, 130px);
}


/*
 * 첫 번째 타이틀은
 * 회사소개 페이지의 메인 카피이므로 조금 크게
 */
.about_intro .about_tit {
    font-size:
        clamp(38px, 4.8vw, 76px);

    font-weight: 650;
    line-height: 1.08;

    letter-spacing: -.055em;
}


/*
 * 설명은 일반 섹션보다 여유 있게
 */
.about_intro .main_sec_tit p {
    margin-top: 28px;

    font-size: 18px;
    line-height: 1.85;
}


/*
 * 첫 이미지
 */
.about_intro .round_img {
    border-radius:
        var(--radius-lg);
}


.about_intro .round_img img {
    aspect-ratio: 1.16 / 1;
}


/*
 * 이미지 뒤에 은은한 장식
 */
.about_intro .round_img::before {
    content: "";

    position: absolute;
    z-index: 2;

    right: 28px;
    bottom: 28px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        var(--color-primary);

    pointer-events: none;
}


/* =========================================================
   02. COMPANY
========================================================= */

.about_company {
    background:
        var(--color-bg-gray);
}


.about_company .grid_card2 {
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    gap: clamp(50px, 7vw, 130px);
}


.about_company .round_img {
    border-radius:
        var(--radius-lg);
}


.about_company .main_sec_tit {
    padding-left:
        clamp(0px, 3vw, 50px);
}


/* =========================================================
   03. CREATIVE
========================================================= */

.about_creative {
    background: #fff;
}


.about_creative .grid_card2 {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: clamp(50px, 7vw, 130px);
}


.about_creative .round_img {
    border-radius:
        var(--radius-lg);
}


/*
 * Company와 Creative 사이에서
 * 이미지 위치가 교차되어 자연스러운 흐름 생성
 */
.about_creative .main_sec_tit {
    padding-right:
        clamp(0px, 3vw, 50px);
}


/* =========================================================
   SECTION NUMBER
   이미지 쪽에 아주 작게 포인트
========================================================= */

.about_company .round_img::after,
.about_creative .round_img::after {
    position: absolute;
    z-index: 3;

    right: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .92);

    color:
        var(--color-text);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .05em;
}


.about_company .round_img::after {
    content: "01";
}


.about_creative .round_img::after {
    content: "02";
}


/* =========================================================
   04. KNOW-HOW
========================================================= */

.about_knowhow {
    padding:
        140px 0;

    background:
        var(--about-dark);

    color: #fff;
}


.about_knowhow .main_tit_flex {
    align-items: stretch;

    gap:
        clamp(60px, 8vw, 150px);
}


/*
 * 왼쪽 제목 영역
 */
.about_knowhow > .center >
.main_tit_flex >
.main_sec_tit {
    flex:
        0 0
        min(520px, 38%);

    justify-content: center;
}


/*
 * 기존 빨간 영문 타이틀 / 라인은 그대로 활용
 */
.about_knowhow .main_sec_tit h2 {
    color: #fff;

    font-size:
        clamp(32px, 3.5vw, 54px);

    line-height: 1.25;
}


.about_knowhow .main_sec_tit p {
    color:
        rgba(255, 255, 255, .62);

    line-height: 1.75;
}

.about_knowhow .main_sec_tit p strong{
    display:block;
    margin-bottom:10px;
    font-size:clamp(18px,3vw,24px);
    color:var(--color-text-white);
}


/* =========================================================
   COUNT
========================================================= */

.about_count {
    flex: 1 1 auto;

    min-width: 0;
}


/*
 * 혹시 기존 markup에서
 * .about_count 안쪽 .center를 유지할 경우
 * 중첩 center 여백 제거
 */
.about_count > .center {
    max-width: none;

    padding: 0;
}


.about_count .grid_card3 {
    height: 100%;

    gap: 1px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, .16);
}


.about_count .grid_card3 > div {
    position: relative;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;

    min-width: 0;
    min-height: 310px;

    padding:
        clamp(18px, 2vw, 32px);

    background:
        #222122;
}


/*
 * 카드 위 작은 빨간 포인트
 */
.about_count .grid_card3 > div::before {
    content: "";

    display: block;

    width: 8px;
    height: 8px;

    margin-bottom: 60px;

    border-radius: 50%;

    background:
        var(--color-primary);
}


/*
 * 카드 설명
 */
.about_count .grid_card_tit {
    display: block;

    color:
        rgba(255, 255, 255, .58);

    font-size:
        clamp(16px, 2.2vw, 20px);

    font-weight: 400;
    line-height: 1.55;

    letter-spacing: -.025em;
}


/*
 * 숫자
 */
.about_count .grid_card_txt {
    margin-top: 35px;

    color: #fff;

    font-size:
        clamp(20px, 2vw, 30px);

    font-weight: 400;

    line-height: 1;
}


.about_count .counter {
    color:
        var(--color-primary);

    font-size:
        clamp(42px, 3.6vw, 70px);

    font-weight: 650;

    letter-spacing: -.055em;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .about_page .round_img img {
        transition:
            transform .7s
            cubic-bezier(.2, .7, .2, 1);
    }


    .about_company .round_img:hover img,
    .about_creative .round_img:hover img {
        transform:
            scale(1.025);
    }


    .about_count .grid_card3 > div {
        transition:
            background .3s ease;
    }


    .about_count .grid_card3 > div:hover {
        background:
            #292829;
    }

}


/* =========================================================
   1260
========================================================= */

@media all and (max-width:1260px) {

    .about_intro {
        padding-top: 120px;
    }


    .about_intro .grid_card2,
    .about_company .grid_card2,
    .about_creative .grid_card2 {
        gap: 60px;
    }


    .about_knowhow {
        padding:
            110px 0;
    }


    .about_knowhow .main_tit_flex {
        flex-direction: column;

        gap: 70px;
    }


    .about_knowhow > .center >
    .main_tit_flex >
    .main_sec_tit {
        flex: none;

        width: 100%;
        max-width: 700px;
    }


    .about_count {
        width: 100%;
    }


    .about_count .grid_card3 > div {
        min-height: 270px;
    }

}


/* =========================================================
   1024
========================================================= */

@media all and (max-width:1024px) {

    /*
     * mobile.css에서 grid_card2가
     * 1열로 전환되므로 그 흐름을 그대로 사용
     */
    .about_intro .grid_card2,
    .about_company .grid_card2,
    .about_creative .grid_card2 {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /*
     * 텍스트 → 이미지 순서
     */
    .about_intro .main_sec_tit,
    .about_creative .main_sec_tit {
        order: 1;
    }


    .about_intro .round_img,
    .about_creative .round_img {
        order: 2;
    }


    /*
     * Company는 원래
     * 이미지 → 텍스트 순서 유지
     */
    .about_company .round_img {
        order: 1;
    }


    .about_company .main_sec_tit {
        order: 2;

        padding-left: 0;
    }


    .about_creative .main_sec_tit {
        padding-right: 0;
    }


    .about_page .main_sec_tit {
        max-width: 700px;
    }


    .about_page .round_img img,
    .about_intro .round_img img {
        aspect-ratio: 16 / 10;
    }

}


/* =========================================================
   768
========================================================= */

@media all and (max-width:768px) {

    .about_intro {
        padding-top: 70px;
    }


    .about_intro .grid_card2,
    .about_company .grid_card2,
    .about_creative .grid_card2 {
        gap: 36px;
    }


    .about_intro .about_tit {
        font-size:
            clamp(34px, 10vw, 52px);

        line-height: 1.08;
    }


    .about_intro .main_sec_tit p {
        margin-top: 14px;

        font-size: 16px;
        line-height: 1.75;
    }


    .about_page .round_img {
        border-radius:
            var(--radius-md);
    }


    .about_company .round_img::after,
    .about_creative .round_img::after {
        right: 14px;
        bottom: 14px;

        width: 44px;
        height: 44px;

        font-size: 11px;
    }


    /* Know-how */
    .about_knowhow {
        padding:
            80px 0;
    }


    .about_knowhow .main_tit_flex {
        gap: 45px;
    }


    .about_count .grid_card3 {
        grid-template-columns: 1fr;

        gap: 1px;

        border-radius:
            var(--radius-md);
    }


    .about_count .grid_card3 > div {
        min-height: 0;

        padding:
            30px;
    }


    .about_count .grid_card3 > div::before {
        margin-bottom: 45px;
    }


    .about_count .grid_card_txt {
        margin-top: 25px;
    }

}


/* =========================================================
   540
========================================================= */

@media all and (max-width:540px) {

    .about_page .round_img img,
    .about_intro .round_img img {
        aspect-ratio: 4 / 3;
    }


    .about_intro .about_tit {
        font-size:
            clamp(32px, 10vw, 44px);
    }


    /*
     * PC용 강제 <br> 때문에
     * 모바일 문장이 너무 잘게 끊겨 보이는 것을 완화
     */
    .about_page .main_sec_tit p br {
        display: none;
    }


    .about_page .main_sec_tit p {
        max-width: 100%;
    }


    .about_count .grid_card3 > div {
        padding:
            28px 24px;
    }


    .about_count .grid_card3 > div::before {
        margin-bottom: 36px;
    }


    .about_count .counter {
        font-size:
            clamp(40px, 13vw, 58px);
    }

}



/* =========================================================
   IPTV PAGE
========================================================= */

.iptv_page {
    --iptv-line: #e7e7e7;
    --iptv-card: #f7f7f7;
    --iptv-dark: var(--color-bg-dark);

    width: 100%;
    color: var(--color-text);
}

.iptv_page .main_sec_tit {
    max-width: 680px;
}

.iptv_page .main_sec_tit h2 {
    letter-spacing: -.04em;
}

.iptv_page .main_sec_tit p {
    max-width: 650px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text-sub);
    letter-spacing: -.025em;
}


/* =========================================================
   01. INTRO
========================================================= */

.iptv_intro {
    padding-top: 150px;
}

.iptv_intro .grid_card2 {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;
    gap: clamp(50px, 7vw, 130px);
}

.iptv_intro .about_tit {
    font-size: clamp(38px, 4.6vw, 72px);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -.055em;
}

.iptv_intro .main_sec_tit p {
    margin-top: 28px;
    font-size: 18px;
    line-height: 1.8;
}

.iptv_intro .round_img {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #f4f4f4;
}

.iptv_intro .round_img img {
    display: block;
    width: 100%;
    aspect-ratio: 1.16 / 1;
    object-fit: cover;
}

.iptv_note {
    display: block;
    margin-top: 18px;

    color: #888;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   02. INFORMATION
========================================================= */

.iptv_info {
    background: var(--color-bg-gray);
}

.iptv_info_grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 70px;
}

.iptv_info_card {
    position: relative;

    min-height: 310px;
    padding: clamp(30px, 3vw, 50px);

    border: 1px solid #e5e5e5;
    border-radius: var(--radius-lg);

    background: #fff;
}

.iptv_card_num {
    display: block;

    margin-bottom: 55px;

    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
}

.iptv_info_card h3 {
    margin-bottom: 18px;

    font-size: clamp(22px, 2vw, 30px);
    font-weight: 650;
}

.iptv_info_point {
    display: block;

    font-size: clamp(20px, 2vw, 28px);
    font-weight: 600;
    line-height: 1.4;
}

.iptv_info_point em {
    color: var(--color-primary);
    font-style: normal;
}

.iptv_info_card p {
    margin-top: 16px;

    color: var(--color-text-sub);
    font-size: 16px;
    line-height: 1.7;
}

.iptv_media_logo {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 25px;
}

.iptv_media_logo > div {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 0;

    min-width: 0;
    height: 90px;

    padding: 18px;

    border: 1px solid #eee;
    border-radius: var(--radius-md);

    background: #fff;
}

.iptv_media_logo img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 42px;
}


/* =========================================================
   03. TARGETING
========================================================= */

.iptv_target_grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1px;

    margin-top: 70px;

    overflow: hidden;

    border: 1px solid var(--iptv-line);
    border-radius: var(--radius-lg);

    background: var(--iptv-line);
}

.iptv_target_card {
    min-height: 330px;

    padding: clamp(28px, 2.5vw, 42px);

    background: #fff;
}

.iptv_target_eng {
    display: block;

    min-height: 42px;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
}

.iptv_target_card h3 {
    margin-top: 40px;

    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 650;
    line-height: 1.4;
}

.iptv_target_card p {
    margin-top: 18px;

    color: var(--color-text-sub);

    font-size: 16px;
    line-height: 1.75;
}


/* 장점 */

.iptv_advantage {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-top: 20px;
}

.iptv_advantage_item {
    display: flex;

    gap: 30px;

    padding: clamp(30px, 3vw, 48px);

    border-radius: var(--radius-lg);

    background: var(--iptv-dark);

    color: #fff;
}

.iptv_advantage_num {
    flex: 0 0 auto;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

.iptv_advantage_item h3 {
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 600;
}

.iptv_advantage_item strong {
    display: block;

    margin-top: 14px;

    color: var(--color-primary);

    font-size: 16px;
    font-weight: 600;
}

.iptv_advantage_item p {
    margin-top: 14px;

    color: rgba(255,255,255,.65);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   IPTV EFFECT SLIDE
========================================================= */

.iptv_effect {
    overflow: hidden;
    background: var(--color-bg-gray);
}


.iptv_effect_slide {
    position: relative;

    margin-top: 70px;
}


/*
 * centerMode에서 양옆 슬라이드가
 * 영역 밖으로 살짝 보이도록
 */
.iptv_effect_slide .slick-list {
    overflow: visible;

    margin: 0 -12px;
}


.iptv_effect_slide .slick-track {
    display: flex;
    align-items: center;
}


.iptv_effect_slide .slick-slide {
    height: auto;

    padding: 0 12px;

    opacity: .42;

    transform: scale(.88);

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.iptv_effect_slide .slick-center {
    opacity: 1;

    transform: scale(1);
}


.iptv_effect_item {
    overflow: hidden;

    border: 1px solid #e7e7e7;
    border-radius: var(--radius-lg);

    background: #fff;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.05);
}


.iptv_effect_img {
    width: 100%;
    padding:32px;
    overflow: hidden;

    background: #fff;
}


.iptv_effect_img img {
    display: block;
    width: 100%;
    max-width:600px;
    height: auto;
    margin:0 auto;
}


/* 설명 */

.iptv_effect_txt {
    padding:24px 28px 28px;
    text-align:center;
}


.iptv_effect_txt h3 {
    color: var(--color-text);

    font-size: 18px;
    font-weight: 650;
    line-height: 1.5;

    letter-spacing: -.025em;
}


.iptv_effect_txt p {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 10px;

    color: #777;

    font-size: 14px;
    line-height: 1.6;
}


.iptv_effect_txt p strong {
    color: var(--color-primary);

    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   SLIDE BUTTON
========================================================= */

.iptv_effect_slide .slick-arrow {
    position: absolute;

    top: 50%;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fff;

    color: transparent;

    font-size: 0;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.12);

    transform: translateY(-50%);

    cursor: pointer;
}


.iptv_effect_slide .slick-prev {
    left: 7%;
}


.iptv_effect_slide .slick-next {
    right: 7%;
}


.iptv_effect_slide .slick-arrow::before {
    content: "";

    width: 10px;
    height: 10px;

    border-top: 2px solid #222;
    border-right: 2px solid #222;
}


.iptv_effect_slide .slick-prev::before {
    transform: rotate(-135deg);
}


.iptv_effect_slide .slick-next::before {
    transform: rotate(45deg);
}


.iptv_effect_slide .slick-arrow:hover {
    background: var(--color-primary);
}


.iptv_effect_slide .slick-arrow:hover::before {
    border-color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media all and (max-width:1024px) {

    .iptv_effect_slide .slick-slide {
        padding: 0 10px;

        transform: scale(.92);
    }


    .iptv_effect_slide .slick-list {
        margin: 0 -10px;
    }


    .iptv_effect_slide .slick-prev {
        left: 20px;
    }


    .iptv_effect_slide .slick-next {
        right: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media all and (max-width:767px) {

    .iptv_effect_slide {
        margin-top: 45px;
    }


    .iptv_effect_slide .slick-slide {
        padding: 0 7px;

        opacity: .5;

        transform: scale(.94);
    }


    .iptv_effect_slide .slick-list {
        margin: 0 -7px;
    }


    .iptv_effect_item {
        border-radius: var(--radius-md);
    }


    .iptv_effect_txt {
        padding:
            20px 20px 24px;
    }


    .iptv_effect_txt h3 {
        font-size: 16px;
    }


    .iptv_effect_slide .slick-arrow {
        width: 42px;
        height: 42px;
    }


    .iptv_effect_slide .slick-prev {
        left: 8px;
    }


    .iptv_effect_slide .slick-next {
        right: 8px;
    }

}


/* =========================================================
   05. FAQ
========================================================= */

.iptv_faq_list {
    margin-top: 70px;

    border-top: 2px solid var(--color-text);
}

.iptv_faq_item {
    border-bottom: 1px solid var(--iptv-line);
}

.iptv_faq_item summary {
    position: relative;

    display: flex;
    align-items: center;

    gap: 22px;

    min-height: 90px;

    padding: 24px 65px 24px 10px;

    cursor: pointer;

    list-style: none;
}

.iptv_faq_item summary::-webkit-details-marker {
    display: none;
}

.iptv_faq_q {
    flex: 0 0 auto;

    color: var(--color-primary);

    font-size: 20px;
    font-weight: 700;
}

.iptv_faq_item summary strong {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

.iptv_faq_icon {
    position: absolute;

    top: 50%;
    right: 15px;

    width: 22px;
    height: 22px;

    transform: translateY(-50%);
}

.iptv_faq_icon::before,
.iptv_faq_icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background: #222;

    transform:
        translate(-50%, -50%);

    transition:
        transform .25s ease;
}

.iptv_faq_icon::before {
    width: 18px;
    height: 2px;
}

.iptv_faq_icon::after {
    width: 2px;
    height: 18px;
}

.iptv_faq_item[open]
.iptv_faq_icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

/* FAQ 답변 애니메이션 */

.iptv_faq_answer {
    display: flex;

    gap: 22px;

    max-height: 0;
    overflow: hidden;

    padding:
        0 65px 0 10px;

    opacity: 0;

    transition:
        max-height .45s ease,
        opacity .3s ease,
        padding .45s ease;
}


.iptv_faq_item[open]
.iptv_faq_answer {
    max-height: 500px;

    padding:
        0 65px 35px 10px;

    opacity: 1;
}

.iptv_faq_answer > span {
    flex: 0 0 auto;

    color: #aaa;

    font-size: 20px;
    font-weight: 700;
}

.iptv_faq_answer p {
    max-width: 900px;

    color: #666;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   06. PRODUCTS
========================================================= */

.iptv_product {
    background: var(--color-bg-gray);
}

.iptv_product_grid {
    margin-top: 70px;
}

.iptv_product_card {
    overflow: hidden;

    width: 100%;

    border: 1px solid #e5e5e5;
    border-radius: var(--radius-lg);

    background: #fff;
}

/* =========================================================
   COMPANY
========================================================= */

.iptv_product_company_wr {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-bottom: 1px solid #e5e5e5;

    background: #fff;
}


.iptv_product_company {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 14px;

    min-width: 0;
    min-height: 110px;

    padding: 0 25px 25px;

    border-right: 1px solid #eee;

    color: var(--color-text);

    font-size: 18px;
    font-weight: 650;

    line-height: 1.4;
}


.iptv_product_company:last-child {
    border-right: 0;
}


.iptv_product_company img {
    display: block;

    width: auto;
    max-width: 130px;
    max-height: 42px;

    object-fit: contain;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.iptv_product_card dl {
    margin: 0;
}


.iptv_product_card dl > div {
    display: grid;

    grid-template-columns:
        minmax(170px, .25fr)
        minmax(0, 1fr);

    gap: 0;

    padding: 0;

    border-top: 1px solid #eee;
}


.iptv_product_card dl > div:first-child {
    border-top: 0;
}


.iptv_product_card dt,
.iptv_product_card dd {
    display: flex;
    align-items: center;

    min-height: 78px;

    margin: 0;
    padding: 20px 28px;

    font-size: 16px;
    line-height: 1.6;

    box-sizing: border-box;
}


.iptv_product_card dt {
    background: #f7f7f7;

    color: var(--color-text);

    font-weight: 600;
}


.iptv_product_card dd {
    color: #666;
}


/*
 * CPV는 첫 번째 핵심 정보이므로
 * 조금 강조
 */

.iptv_product_card dl > div:first-child dd {
    color: var(--color-primary);

    font-size: clamp(22px, 2vw, 30px);
    font-weight: 650;
}


/* =========================================================
   PRODUCT TABLE
========================================================= */

.iptv_table_wrap {
    margin-top: 50px;

    overflow: hidden;

    border-top:
        2px solid var(--color-text);
}


.iptv_table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    background: #fff;
}


.iptv_table th,
.iptv_table td {
    padding: 22px 28px;

    border-bottom:
        1px solid #e5e5e5;

    font-size: 16px;
    line-height: 1.75;

    vertical-align: middle;
}


.iptv_table thead th {
    background: var(--iptv-dark);

    color: #fff;

    font-weight: 600;

    text-align: left;
}


.iptv_table thead th:first-child {
    width: 200px;
}


.iptv_table tbody th {
    width: 200px;

    background: #f5f5f5;

    color: var(--color-text);

    font-weight: 600;

    text-align: left;
}


.iptv_table tbody td {
    color: #666;

    text-align: left;
}


.iptv_table td p {
    margin: 0;

    color: #666;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   PRODUCT HOVER
========================================================= */

@media (hover:hover) {

    .iptv_product_company {
        transition:
            background .25s ease;
    }


    .iptv_product_company:hover {
        background: #fafafa;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media all and (max-width:1024px) {

    .iptv_product_company {
        min-height: 105px;

        padding: 22px 18px;

        font-size: 16px;
    }


    .iptv_product_company img {
        max-width: 105px;
        max-height: 36px;
    }


    .iptv_product_card dl > div {
        grid-template-columns:
            150px minmax(0, 1fr);
    }


    .iptv_product_card dt,
    .iptv_product_card dd {
        padding: 18px 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media all and (max-width:767px) {

    .iptv_product_grid {
        margin-top: 45px;
    }


    /*
     * 3사 로고는 모바일에서도
     * 한눈에 비교할 수 있도록 3열 유지
     */
    .iptv_product_company_wr {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .iptv_product_company {
        flex-direction: column;
        align-items:center;

        gap: 10px;

        min-height: 100px;

        padding: 18px 10px;

        font-size: 14px;

        text-align: center;
    }


    .iptv_product_company img {
        max-width: 90px;
        max-height: 32px;
    }


    /*
     * 상품 정보는 모바일에서
     * 제목 / 내용을 위아래로
     */
    .iptv_product_card dl > div {
        display: block;
    }


    .iptv_product_card dt,
    .iptv_product_card dd {
        display: block;

        min-height: 0;

        padding: 16px 20px;

        font-size: 16px;
    }


    .iptv_product_card dt {
        padding-bottom: 10px;
    }


    .iptv_product_card dd {
        padding-top: 0;

        background: #f7f7f7;
    }


    .iptv_product_card dl > div:first-child dd {
        font-size: 24px;
    }


    /* 비교표 */

    .iptv_table_wrap {
        margin-top: 40px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    .iptv_table {
        min-width: 650px;
    }


    .iptv_table thead th:first-child,
    .iptv_table tbody th {
        width: 140px;
    }


    .iptv_table th,
    .iptv_table td {
        padding: 18px 20px;

        font-size: 16px;
    }

}


/* =========================================================
   PRODUCT TABLE
========================================================= */

.iptv_table_wrap {
    margin-top: 70px;

    overflow-x: auto;

    border-top:
        2px solid var(--color-text);

    -webkit-overflow-scrolling: touch;
}

.iptv_table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;

    table-layout: fixed;

    background: #fff;
}

.iptv_table th,
.iptv_table td {
    padding: 22px 20px;

    border-bottom:
        1px solid #e5e5e5;

    border-right:
        1px solid #e5e5e5;

    font-size: 16px;
    line-height: 1.7;

    text-align: center;
    vertical-align: middle;
}

.iptv_table th:last-child,
.iptv_table td:last-child {
    border-right: 0;
}

.iptv_table thead th {
    background: var(--iptv-dark);

    color: #fff;

    font-weight: 600;
}

.iptv_table thead th:first-child {
    width: 150px;
}

.iptv_table tbody th {
    background: #f5f5f5;

    font-weight: 600;
}


.iptv_table td strong {
    font-weight: 600;
}

.iptv_table td p {
    margin-top: 8px;
    font-size: 16px;
}

.iptv_table td ul {
    margin: 0;
    padding-left: 20px;
}

.iptv_table td li {
    margin: 4px 0;

    font-size: 16px;
}


/* =========================================================
   07. CHANNEL
========================================================= */

.iptv_channel_image {
    margin-top: 70px;

    padding:
        clamp(20px, 2vw, 30px);

    border: 1px solid #eee;
    border-radius: var(--radius-lg);

    background: #fff;
}

.iptv_channel_image img {
    display: block;
    width: 100%;
    max-width: 1140px;
    height: auto;
    margin: 0 auto;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover:hover) {

    .iptv_info_card,
    .iptv_target_card,
    .iptv_product_card {
        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }

    .iptv_info_card:hover,
    .iptv_product_card:hover {
        transform:
            translateY(-5px);

        box-shadow:
            0 20px 45px
            rgba(0,0,0,.06);
    }

}


/* =========================================================
   1260
========================================================= */

@media all and (max-width:1260px) {

    .iptv_intro {
        padding-top: 120px;
    }

    .iptv_target_grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .iptv_target_card {
        min-height: 280px;
    }

}


/* =========================================================
   1024
========================================================= */

@media all and (max-width:1024px) {

    .iptv_intro .grid_card2 {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .iptv_intro .main_sec_tit {
        order: 1;
    }

    .iptv_intro .round_img {
        order: 2;
    }

    .iptv_intro .round_img img {
        aspect-ratio: 16 / 10;
    }

    .iptv_product_grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   768
========================================================= */

@media all and (max-width:768px) {

    .iptv_intro {
        padding-top: 70px;
    }

    .iptv_intro .about_tit {
        font-size:
            clamp(34px, 10vw, 52px);
    }

    .iptv_intro .main_sec_tit p {
        margin-top: 14px;

        font-size: 16px;
    }


    /* Information */

    .iptv_info_grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }

    .iptv_info_card {
        min-height: 0;

        padding: 30px;
    }

    .iptv_card_num {
        margin-bottom: 35px;
    }


    /* Target */

    .iptv_target_grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }

    .iptv_target_card {
        min-height: 0;

        padding: 30px;
    }

    .iptv_target_card h3 {
        margin-top: 25px;
    }


    /* Advantage */

    .iptv_advantage {
        grid-template-columns: 1fr;
    }


    /* Effect */

    .iptv_effect_slide {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }


    /* FAQ */

    .iptv_faq_list {
        margin-top: 45px;
    }

    .iptv_faq_item summary {
        min-height: 78px;

        gap: 15px;

        padding:
            20px 50px 20px 0;
    }

    .iptv_faq_item summary strong {
        font-size: 16px;
    }

    .iptv_faq_answer {
        gap: 15px;

        padding:
            0 20px 28px 0;
    }


    /* Product */

    .iptv_product_grid {
        margin-top: 45px;
    }

    .iptv_table_wrap {
        margin-top: 45px;
    }


    /* Channel */

    .iptv_channel_image {
        margin-top: 45px;

        padding: 25px;

        border-radius:
            var(--radius-md);
    }

}


/* =========================================================
   540
========================================================= */

@media all and (max-width:540px) {

    .iptv_page .main_sec_tit p br {
        display: none;
    }

    .iptv_intro .round_img img {
        aspect-ratio: 4 / 3;
    }

    .iptv_media_logo {
        flex-direction: column;
        align-items: stretch;
    }

    .iptv_media_logo > div {
        flex: none;

        width: 100%;
        height: 80px;
    }

    .iptv_advantage_item {
        gap: 20px;

        padding: 28px 24px;
    }

}








/* =========================================================
   CABLE TV PAGE
========================================================= */

.cable_page {
    --cable-line: #e8e8e8;
    --cable-dark: var(--color-bg-dark);

    width: 100%;

    color: var(--color-text);
}


.cable_page .main_sec_tit {
    max-width: 680px;
}


.cable_page .main_sec_tit h2 {
    letter-spacing: -.04em;
}


.cable_page .main_sec_tit p {
    max-width: 650px;

    font-size: 16px;
    line-height: 1.75;

    color: var(--color-text-sub);

    letter-spacing: -.025em;
}


/* =========================================================
   INTRO
========================================================= */

.cable_intro {
    padding-top: 150px;
}


.cable_intro .grid_card2,
.cable_local_intro .grid_card2 {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: clamp(50px, 7vw, 130px);
}


.cable_intro .about_tit {
    font-size:
        clamp(38px, 4.6vw, 72px);

    font-weight: 650;
    line-height: 1.1;

    letter-spacing: -.055em;
}


.cable_intro .main_sec_tit p +
p,
.cable_local_intro .main_sec_tit p +
p {
    margin-top: 12px;
}


.cable_intro .round_img,
.cable_local_intro .round_img {
    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #f4f4f4;
}


.cable_intro .round_img img,
.cable_local_intro .round_img img {
    display: block;

    width: 100%;

    aspect-ratio: 1.16 / 1;

    object-fit: cover;
}


.cable_type {
    display: inline-flex;

    margin-top: 22px;
    padding: 9px 14px;

    border-radius: 100px;

    background: #f2f2f2;

    color: #555;

    font-size: 14px;
    font-weight: 600;
}


.cable_note {
    display: block;

    margin-top: 12px;

    color: #888;

    font-size: 14px;
}


/* =========================================================
   INFO
========================================================= */

.cable_info {
    background:
        var(--color-bg-gray);
}


.cable_info_grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 70px;
}


.cable_info_card {
    min-width: 0;

    min-height: 310px;

    padding:
        clamp(30px, 3vw, 50px);

    border:
        1px solid #e5e5e5;

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.cable_card_num {
    display: block;

    margin-bottom: 50px;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.cable_info_card h3 {
    margin-bottom: 18px;

    font-size:
        clamp(22px, 2vw, 30px);

    font-weight: 650;
}


.cable_info_point {
    display: block;

    font-size:
        clamp(20px, 2vw, 28px);

    font-weight: 600;
    line-height: 1.45;
}


.cable_info_point em {
    color:
        var(--color-primary);

    font-style: normal;
}


.cable_info_card p,
.cable_info_card li {
    color:
        var(--color-text-sub);

    font-size: 16px;
    line-height: 1.7;
}


.cable_info_card p {
    margin-top: 16px;
}


.cable_info_card ul {
    margin-top: 18px;

    padding-left: 20px;
}


.cable_info_card li + li {
    margin-top: 6px;
}


/* =========================================================
   LOGOS
========================================================= */

.cable_logo_grid {
    display: grid;

    gap: 10px;

    margin-top: 25px;
}


.cable_logo_grid6 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.cable_logo_grid8 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


.cable_logo_grid span {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 80px;

    padding: 6px;

    border:
        1px solid #eee;

    border-radius:
        var(--radius-sm);

    background: #fff;
}


.cable_logo_grid img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 48px;

    object-fit: contain;
}


/* =========================================================
   TABLE COMMON
========================================================= */

.cable_table_head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 70px;
    margin-bottom: 16px;
}


.cable_table_head strong {
    font-size: 18px;
    font-weight: 650;
}


.cable_table_head span {
    color: #777;

    font-size: 14px;
}


.cable_table_wrap,
.cable_rate_table_wrap {
    overflow-x: auto;

    width: 100%;

    border-top:
        2px solid var(--color-text);

    -webkit-overflow-scrolling: touch;
}


.cable_table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    background: #fff;
}


.cable_table th,
.cable_table td {
    padding:
        12px 12px;

    border-right:
        1px solid #e5e5e5;

    border-bottom:
        1px solid #e5e5e5;

    font-size: 16px;
    line-height: 1.65;

    text-align: center;
    vertical-align: middle;
}


/* .cable_table th:last-child,
.cable_table td:last-child {
    border-right: 0;
} */


.cable_table thead th {
    background:
        var(--cable-dark);

    color: #fff;

    font-weight: 600;
}




.cable_table_note {
    background: #f7f7f7;

    color: #666;

    line-height: 1.7;
}


.cable_table_caption {
    margin-top: 18px;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}

.table_ch_list{
  display:flex;
  flex-flow:column nowrap;
  justify-content:space-between;
  align-items:center;
  gap:36px;
}

.table_ch_list img{
  width: 100%;
  max-width:120px;
}



/* =========================================================
   LOCAL INTRO
========================================================= */

.cable_local_intro {
    background: #fff;
}


/* =========================================================
   PROCESS
========================================================= */

.cable_process {
    overflow: hidden;

    background:
        var(--cable-dark);

    color: #fff;
}


.cable_process .main_sec_tit h2 {
    color: #fff;
}


.cable_process .main_sec_tit p {
    color:
        rgba(255,255,255,.6);
}


.cable_process_contents {
    margin-top: 75px;
}


.cable_process_text {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.cable_process_text article {
    display: flex;

    gap: 25px;

    min-height: 190px;

    padding:
        clamp(28px, 3vw, 42px);

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        var(--radius-lg);

    background: #222122;
}


.cable_process_num {
    flex: 0 0 auto;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.cable_process_text h3 {
    font-size:
        clamp(20px, 2vw, 27px);

    font-weight: 600;
    line-height: 1.45;
}


.cable_process_text p {
    margin-top: 14px;

    color:
        rgba(255,255,255,.58);

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   CUE LINE
========================================================= */

.cable_cue_wrap {
    position: relative;

    margin-top: 160px;

    padding:
        20px 0 70px;
}


.cable_cue_line {
    display: grid;

    grid-template-columns:
        .45fr 1.5fr
        .45fr 1.5fr
        .45fr .55fr
        1.5fr;

    align-items: start;

    width: 100%;
}


.cue_item {
    position: relative;

    min-width: 0;
}


.cue_bar {
    display: block;

    width: 100%;
    height: 8px;
}


.cue_cm .cue_bar {
    background: #fff;
}


.cue_program .cue_bar {
    background: #4d4d4d;
}


.cue_ad .cue_bar {
    background:
        var(--color-primary);
}


.cue_item em {
    display: block;

    margin-top: 25px;

    color: #fff;

    font-size: 14px;
    font-style: normal;
    font-weight: 600;

    text-align: center;
}


/* red popup */

.cue_tooltip {
    position: absolute;

    left: 50%;
    bottom: 38px;

    z-index: 3;

    width: 190px;

    padding:
        20px 15px;

    border-radius:
        var(--radius-sm);

    background:
        var(--color-primary);

    color: #fff;

    text-align: center;

    transform:
        translateX(-50%);
}


.cue_tooltip::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 0;
    height: 0;

    border-left:
        8px solid transparent;

    border-right:
        8px solid transparent;

    border-top:
        8px solid var(--color-primary);

    transform:
        translateX(-50%);
}


.cue_tooltip strong {
    display: block;

    font-size: 21px;
    font-weight: 650;
}


.cue_tooltip span {
    display: block;

    margin-top: 4px;

    font-size: 14px;
    line-height: 1.45;
}


/* =========================================================
   PRICE
========================================================= */

.cable_price {
    background:
        var(--color-bg-gray);
}


.cable_price_notice {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 65px;
    margin-bottom: 20px;

    padding:
        22px 26px;

    border-radius:
        var(--radius-md);

    background: #fff;
}


.cable_price_notice span,
.cable_price_notice strong {
    font-size: 16px;
    line-height: 1.6;
}


.cable_price_notice span {
    color: #666;
}


.cable_price_notice strong {
    color:
        var(--color-primary);

    font-weight: 650;
}


/* =========================================================
   RATE TABLE
========================================================= */

.cable_rate_table {
    min-width: 1000px;

    table-layout: auto;
}


.cable_rate_table th:nth-child(1) {
    width: 90px;
}


.cable_rate_table th:nth-child(2) {
    width: 230px;
}


.cable_rate_table th:nth-child(3) {
    width: 300px;
}


.cable_rate_table th:nth-child(4) {
    width: 130px;
}


.cable_rate_table th:nth-child(5) {
    width: 160px;
}


.cable_rate_table th:nth-child(6) {
    width: 140px;
}


.cable_rate_table th:nth-child(7) {
    width: 160px;
}

.rate_region {
    background: #f3f3f3;

    color:
        var(--color-primary);

    font-weight: 700 !important;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover:hover) {

    .cable_info_card {
        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }


    .cable_info_card:hover {
        transform:
            translateY(-5px);

        box-shadow:
            0 20px 45px
            rgba(0,0,0,.06);
    }

}


/* =========================================================
   1260
========================================================= */

@media all and (max-width:1260px) {

    .cable_intro {
        padding-top: 120px;
    }


    .cable_process_contents {
        margin-top: 60px;
    }


    .cable_cue_wrap {
        margin-top: 140px;
    }

}


/* =========================================================
   1024
========================================================= */

@media all and (max-width:1024px) {

    .cable_intro .grid_card2,
    .cable_local_intro .grid_card2 {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .cable_intro .main_sec_tit {
        order: 1;
    }


    .cable_intro .round_img {
        order: 2;
    }


    .cable_local_intro .round_img {
        order: 1;
    }


    .cable_local_intro .main_sec_tit {
        order: 2;
    }


    .cable_intro .round_img img,
    .cable_local_intro .round_img img {
        aspect-ratio: 16 / 10;
    }


    .cable_process_text {
        grid-template-columns: 1fr;
    }


    .cable_process_text article {
        min-height: 0;
    }

}


/* =========================================================
   768
========================================================= */

@media all and (max-width:768px) {

    .cable_intro {
        padding-top: 70px;
    }


    .cable_intro .about_tit {
        font-size:
            clamp(34px, 10vw, 52px);
    }


    /* info */

    .cable_info_grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }


    .cable_info_card {
        min-height: 0;

        padding: 30px;
    }


    .cable_card_num {
        margin-bottom: 35px;
    }


    .cable_logo_grid8 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* PP table */

    .cable_table_head {
        margin-top: 45px;
    }


    .cable_pp_table {
        min-width: 850px;
    }


    .cable_table th,
    .cable_table td {
        font-size: 16px;
    }


    /* process */

    .cable_process_contents {
        margin-top: 45px;
    }


    .cable_process_text article {
        gap: 18px;

        padding: 28px 24px;

        border-radius:
            var(--radius-md);
    }


    /*
     * 모바일에서도 프로그램 흐름 자체는 유지하고
     * 영역만 좌우 스크롤
     */
    .cable_cue_wrap {
        margin-top: 30px;
        padding-top:145px;

        padding-bottom: 65px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    .cable_cue_line {
        width: 800px;

        grid-template-columns:
            55px 160px
            55px 160px
            55px 70px
            160px;
    }


    .cue_tooltip {
        width: 170px;
    }


    /* price */

    .cable_price_notice {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 45px;

        padding: 20px;
    }

}


/* =========================================================
   540
========================================================= */

@media all and (max-width:540px) {

    .cable_page .main_sec_tit p br {
        display: none;
    }


    .cable_intro .round_img img,
    .cable_local_intro .round_img img {
        aspect-ratio: 4 / 3;
    }


    .cable_logo_grid6 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .cable_logo_grid span {
        height: 70px;
    }


    .cable_process_num {
        font-size: 14px;
    }


    .cable_cue_wrap {
        margin-right: -2.5rem;
    }


    .cable_table_caption {
        font-size: 14px;
    }

}







/* =========================================================
   GROUND WAVE PAGE
========================================================= */

.ground_page {
    --ground-line: #e7e7e7;
    --ground-card: #f7f7f7;
    --ground-dark: var(--color-bg-dark);

    position: relative;
    width: 100%;

    color: var(--color-text);
}


.ground_page .main_sec_tit {
    max-width: 680px;
}


.ground_page .main_sec_tit h2 {
    letter-spacing: -.04em;
}


.ground_page .main_sec_tit p {
    max-width: 650px;

    color: var(--color-text-sub);

    font-size: 16px;
    line-height: 1.75;

    letter-spacing: -.025em;
}



/* =========================================================
   01. INTRO
========================================================= */

.ground_intro {
    padding-top: 150px;
}


.ground_intro .grid_card2 {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap:
        clamp(50px, 7vw, 130px);
}


.ground_intro .about_tit {
    font-size:
        clamp(38px, 4.6vw, 72px);

    font-weight: 650;
    line-height: 1.08;

    letter-spacing: -.055em;
}


.ground_intro .main_sec_tit p {
    font-size: 18px;
    line-height: 1.8;
}


.ground_intro .main_sec_tit p:first-of-type {
    margin-top: 28px;
}


.ground_intro .main_sec_tit p + p {
    margin-top: 12px;
}


.ground_intro .round_img {
    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #f4f4f4;
}


.ground_intro .round_img img {
    display: block;

    width: 100%;

    aspect-ratio: 1.16 / 1;

    object-fit: cover;
    object-position: center;
}


.ground_type {
    display: inline-flex;

    margin-top: 24px;

    padding:
        9px 15px;

    border-radius: 100px;

    background:
        var(--color-bg-gray);

    color: #666;

    font-size: 14px;
    font-weight: 600;
}



/* =========================================================
   02. INFORMATION
========================================================= */

.ground_info {
    background:
        var(--color-bg-gray);
}


.ground_info_grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 70px;
}


.ground_info_card {
    position: relative;

    min-width: 0;
    min-height: 310px;

    padding:
        clamp(30px, 3vw, 50px);

    border:
        1px solid #e5e5e5;

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.ground_card_num {
    display: block;

    margin-bottom: 50px;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.ground_info_card h3 {
    margin-bottom: 18px;

    font-size:
        clamp(22px, 2vw, 30px);

    font-weight: 650;
}


.ground_info_point {
    display: block;

    font-size:
        clamp(20px, 2vw, 28px);

    font-weight: 600;
    line-height: 1.45;
}


.ground_info_card p,
.ground_info_card li {
    color:
        var(--color-text-sub);

    font-size: 16px;
    line-height: 1.7;
}


.ground_info_card p {
    margin-top: 16px;
}


.ground_info_card ul {
    margin-top: 18px;

    padding-left: 20px;
}


.ground_info_card li + li {
    margin-top: 8px;
}



/* media logo */

.ground_media_logo {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-top: 25px;
}


.ground_media_logo span {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 100px;

    padding: 18px;

    border:
        1px solid #eee;

    border-radius:
        var(--radius-md);

    background: #fff;
}


.ground_media_logo img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 55px;

    object-fit: contain;
}



/* =========================================================
   03. AD TYPE
========================================================= */

.ground_type_sec {
    background: #fff;
}


.ground_type_grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;

    margin-top: 70px;
}


.ground_type_card {
    position: relative;

    display: flex;

    flex-flow: column nowrap;

    min-width: 0;
    min-height: 390px;

    padding:
        clamp(28px, 2.5vw, 42px);

    border:
        1px solid var(--ground-line);

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.ground_type_num {
    display: block;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.ground_type_tit {
    margin-top: 48px;
}


.ground_type_tit h3 {
    font-size:
        clamp(22px, 2vw, 29px);

    font-weight: 650;
    line-height: 1.35;
}


.ground_type_tit > span {
    display: block;

    margin-top: 6px;

    color: #999;

    font-size: 14px;
    font-weight: 500;
}


.ground_type_card > p {
    margin-top: 20px;

    color: #666;

    font-size: 16px;
    line-height: 1.7;
}


.ground_type_time {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1px;

    margin-top: auto;

    padding-top: 40px;
}


.ground_type_time > div {
    min-width: 0;

    padding: 16px;

    background: #f7f7f7;
}


.ground_type_time > div:first-child {
    border-radius:
        var(--radius-sm) 0 0 var(--radius-sm);
}


.ground_type_time > div:last-child {
    border-radius:
        0 var(--radius-sm) var(--radius-sm) 0;
}


.ground_type_time span {
    display: block;

    color: #999;

    font-size: 14px;
}


.ground_type_time strong {
    display: block;

    margin-top: 5px;

    color:
        var(--color-text);

    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}


.ground_type_time .is_disabled {
    opacity: .45;
}



/* =========================================================
   04. EXAMPLE
========================================================= */

.ground_example {
    background:
        var(--color-bg-gray);
}


.ground_example_block {
    margin-top: 70px;

    padding:
        clamp(30px, 4vw, 60px);

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.ground_example_block +
.ground_example_block {
    margin-top: 20px;
}


.ground_example_head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}


.ground_example_head > div {
    display: flex;

    align-items: center;

    gap: 18px;
}


.ground_example_head span {
    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.ground_example_head h3 {
    font-size:
        clamp(22px, 2vw, 30px);

    font-weight: 650;
}


.ground_example_head > p {
    color: #777;

    font-size: 16px;
    line-height: 1.6;
}



/* flow */

.ground_program_flow {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        40px
        minmax(0, 1fr)
        40px
        minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    margin-top: 45px;
}


.ground_flow_item {
    min-width: 0;
}


.ground_flow_img {
    overflow: hidden;

    border:
        1px solid #eee;

    border-radius:
        var(--radius-md);

    background: #f4f4f4;
}


.ground_flow_img img {
    display: block;

    width: 100%;
    height: auto;
}


.ground_flow_item strong {
    display: block;

    margin-top: 15px;

    font-size: 16px;
    font-weight: 600;

    text-align: center;
}


.ground_flow_ad strong {
    color:
        var(--color-primary);
}


.ground_flow_arrow {
    color: #bbb;

    font-size: 22px;

    text-align: center;
}



/* visual example */

.ground_visual_grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;

    margin-top: 20px;
}


.ground_visual_card {
    overflow: hidden;

    min-width: 0;

    border:
        1px solid #e5e5e5;

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.ground_visual_img {
    overflow: hidden;

    background: #f4f4f4;
}


.ground_visual_img img {
    display: block;

    width: 100%;
    height: auto;
}


.ground_visual_txt {
    padding:
        28px 30px 32px;
}


.ground_visual_txt > span {
    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 600;
}


.ground_visual_txt h3 {
    margin-top: 8px;

    font-size:
        clamp(20px, 1.7vw, 25px);

    font-weight: 650;
}


.ground_visual_txt p {
    margin-top: 14px;

    color: #666;

    font-size: 16px;
    line-height: 1.7;
}


.ground_example_notice {
    margin-top: 20px;

    color: #888;

    font-size: 14px;
    line-height: 1.7;
}



/* =========================================================
   05. PRICE GUIDE
========================================================= */

.ground_price_guide {
    background:
        var(--ground-dark);

    color: #fff;
}


.ground_price_inner {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap:
        clamp(60px, 9vw, 150px);
}


.ground_price_guide
.main_sec_tit h2 {
    color: #fff;

    font-size:
        clamp(32px, 3.5vw, 54px);
}


.ground_price_desc {
    padding:
        clamp(30px, 4vw, 55px);

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:
        var(--radius-lg);

    background: #222122;
}


.ground_price_desc strong {
    display: block;

    color: #fff;

    font-size:
        clamp(21px, 2vw, 28px);

    font-weight: 600;
    line-height: 1.45;
}


.ground_price_desc p {
    margin-top: 18px;

    color:
        rgba(255,255,255,.58);

    font-size: 16px;
    line-height: 1.75;
}



/* =========================================================
   06 / 07. PRICE TABLE
========================================================= */

.ground_price {
    background: #fff;
}


.ground_radio_price {
    background:
        var(--color-bg-gray);
}


.ground_table_wrap {
    overflow-x: auto;

    margin-top: 70px;

    border-top:
        2px solid var(--color-text);

    -webkit-overflow-scrolling: touch;
}


.ground_table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;

    table-layout: fixed;

    background: #fff;
}


.ground_table th,
.ground_table td {
    padding:
        22px 24px;

    border-right:
        1px solid #e5e5e5;

    border-bottom:
        1px solid #e5e5e5;

    font-size: 16px;
    line-height: 1.6;

    text-align: center;
    vertical-align: middle;
}


.ground_table th:last-child,
.ground_table td:last-child {
    border-right: 0;
}


.ground_table thead th {
    background:
        var(--ground-dark);

    color: #fff;

    font-weight: 600;
}


.ground_table thead th:nth-child(1) {
    width: 16%;
}


.ground_table thead th:nth-child(2) {
    width: 16%;
}


.ground_table thead th:nth-child(3) {
    width: 42%;
}


.ground_table thead th:nth-child(4) {
    width: 26%;
}


.ground_table tbody th {
    background: #f6f6f6;

    font-weight: 700;
}


.ground_table td:last-child {
    font-weight: 600;
}


.ground_table_notice {
    margin-top: 18px;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}



/* =========================================================
   HOVER
========================================================= */

@media (hover:hover) {

    .ground_info_card,
    .ground_type_card,
    .ground_visual_card {
        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }


    .ground_info_card:hover,
    .ground_type_card:hover,
    .ground_visual_card:hover {
        transform:
            translateY(-5px);

        box-shadow:
            0 20px 45px
            rgba(0,0,0,.06);
    }


    .ground_flow_img img,
    .ground_visual_img img {
        transition:
            transform .5s ease;
    }


    .ground_flow_item:hover img,
    .ground_visual_card:hover img {
        transform:
            scale(1.025);
    }

}



/* =========================================================
   1260
========================================================= */

@media all and (max-width:1260px) {

    .ground_intro {
        padding-top: 120px;
    }


    .ground_type_grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .ground_visual_grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .ground_visual_card:last-child {
        grid-column:
            1 / -1;
    }


    .ground_visual_card:last-child {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* =========================================================
   1024
========================================================= */

@media all and (max-width:1024px) {

    .ground_intro .grid_card2 {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .ground_intro .main_sec_tit {
        order: 1;
    }


    .ground_intro .round_img {
        order: 2;
    }


    .ground_intro .round_img img {
        aspect-ratio: 16 / 10;
    }


    .ground_price_inner {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .ground_price_inner
    .main_sec_tit {
        max-width: 700px;
    }

}



/* =========================================================
   768
========================================================= */

@media all and (max-width:768px) {

    .ground_intro {
        padding-top: 70px;
    }


    .ground_intro .about_tit {
        font-size:
            clamp(34px, 10vw, 52px);
    }


    .ground_intro .main_sec_tit p {
        font-size: 16px;
    }


    /* information */

    .ground_info_grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }


    .ground_info_card {
        min-height: 0;

        padding: 30px;
    }


    .ground_card_num {
        margin-bottom: 35px;
    }


    /* type */

    .ground_type_grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }


    .ground_type_card {
        min-height: 0;

        padding: 30px;
    }


    .ground_type_tit {
        margin-top: 30px;
    }


    .ground_type_time {
        padding-top: 30px;
    }


    /* example */

    .ground_example_block {
        margin-top: 45px;

        padding: 30px;
    }


    .ground_example_head {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }


    /*
     * 프로그램 흐름은 이미지 크기를
     * 억지로 줄이지 않고 가로 스크롤
     */
    .ground_program_flow {
        grid-template-columns:
            240px 30px
            240px 30px
            240px;

        width: max-content;

        min-width: 100%;

        margin-top: 35px;
    }


    .ground_example_block {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    .ground_visual_grid {
        grid-template-columns: 1fr;

        margin-top: 16px;
    }


    .ground_visual_card:last-child {
        display: block;

        grid-column: auto;
    }


    /* price */

    .ground_price_desc {
        padding: 30px;
    }


    .ground_table_wrap {
        margin-top: 45px;
    }


    .ground_table th,
    .ground_table td {
        padding: 18px 20px;

        font-size: 16px;
    }

}



/* =========================================================
   540
========================================================= */

@media all and (max-width:540px) {

    .ground_page
    .main_sec_tit p br {
        display: none;
    }


    .ground_intro .round_img img {
        aspect-ratio: 4 / 3;
    }


    .ground_media_logo {
        gap: 8px;
    }


    .ground_media_logo span {
        height: 80px;

        padding: 12px;
    }


    .ground_media_logo img {
        max-height: 42px;
    }


    .ground_type_time {
        grid-template-columns: 1fr;
    }


    .ground_type_time > div:first-child,
    .ground_type_time > div:last-child {
        border-radius: 0;
    }


    .ground_type_time > div:first-child {
        border-radius:
            var(--radius-sm)
            var(--radius-sm)
            0 0;
    }


    .ground_type_time > div:last-child {
        border-radius:
            0 0
            var(--radius-sm)
            var(--radius-sm);
    }


    .ground_example_block {
        padding: 24px;
    }


    .ground_visual_txt {
        padding:
            24px 22px 28px;
    }

}







/* =========================================================
   OUTDOOR PAGE
========================================================= */

.outdoor_page {
    --outdoor-line: #e7e7e7;
    --outdoor-dark: var(--color-bg-dark);

    width: 100%;

    color: var(--color-text);
}


.outdoor_page .main_sec_tit {
    max-width: 680px;
}


.outdoor_page .main_sec_tit h2 {
    letter-spacing: -.04em;
}


.outdoor_page .main_sec_tit p {
    color: var(--color-text-sub);

    font-size: 16px;
    line-height: 1.75;

    letter-spacing: -.025em;
}



/* =========================================================
   01. INTRO
========================================================= */

.outdoor_intro {
    padding-top: 150px;
}


.outdoor_intro .grid_card2 {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap:
        clamp(50px, 7vw, 130px);
}


.outdoor_intro .about_tit {
    font-size:
        clamp(38px, 4.8vw, 76px);

    font-weight: 650;
    line-height: 1.08;

    letter-spacing: -.055em;
}


.outdoor_intro .main_sec_tit p:first-of-type {
    margin-top: 28px;
}


.outdoor_intro .main_sec_tit p + p {
    margin-top: 12px;
}


.outdoor_intro .round_img {
    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #f4f4f4;
}


.outdoor_intro .round_img img {
    display: block;

    width: 100%;

    aspect-ratio: 1.16 / 1;

    object-fit: cover;
}



/* =========================================================
   MEDIA TITLE
========================================================= */

.outdoor_media_head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;
}


.outdoor_section_num {
    color:
        var(--color-primary);

    font-size:
        clamp(42px, 5vw, 76px);

    font-weight: 650;
    line-height: 1;
}


.outdoor_lead {
    margin-top: 18px !important;

    color: var(--color-text) !important;

    font-size:
        clamp(20px, 2vw, 28px) !important;

    font-weight: 600;

    line-height: 1.45 !important;
}



/* =========================================================
   02. ELEVATOR
========================================================= */

.outdoor_elevator {
    background:
        var(--color-bg-gray);
}


.outdoor_elevator_intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    align-items: stretch;

    gap:
        clamp(40px, 6vw, 90px);

    margin-top: 70px;
}


.outdoor_elevator_intro .round_img {
    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #eee;
}


.outdoor_elevator_intro .round_img img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 430px;

    object-fit: cover;
}


.outdoor_feature_list {
    display: flex;

    flex-flow: column nowrap;

    justify-content: center;
}


.outdoor_feature_item {
    display: grid;

    grid-template-columns:
        50px minmax(0, 1fr);

    gap: 20px;

    padding:
        26px 0;

    border-bottom:
        1px solid #ddd;
}


.outdoor_feature_item:first-child {
    border-top:
        1px solid #ddd;
}


.outdoor_feature_item > span {
    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.outdoor_feature_item p {
    color: #555;

    font-size: 16px;
    line-height: 1.75;
}



/* =========================================================
   ELEVATOR SPEC
========================================================= */

.outdoor_spec {
    margin-top: 90px;
}


.outdoor_spec_head > span {
    display: block;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 650;
}


.outdoor_spec_head h3 {
    margin-top: 8px;

    font-size:
        clamp(24px, 2.5vw, 36px);

    font-weight: 650;
}


.outdoor_spec_head p {
    margin-top: 10px;

    color: #777;

    font-size: 14px;
}


.outdoor_spec_grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 1px;

    margin-top: 35px;

    overflow: hidden;

    border:
        1px solid var(--outdoor-line);

    border-radius:
        var(--radius-lg);

    background:
        var(--outdoor-line);
}


.outdoor_spec_grid article {
    position: relative;

    min-width: 0;
    min-height: 240px;

    padding:
        clamp(24px, 2.2vw, 34px);

    background: #fff;
}


.outdoor_spec_num {
    display: block;

    margin-bottom: 45px;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.outdoor_spec_grid strong {
    display: block;

    font-size: 16px;
    font-weight: 600;
}


.outdoor_spec_grid p {
    margin-top: 12px;

    color:
        var(--color-text);

    font-size:
        clamp(18px, 1.6vw, 23px);

    font-weight: 600;
    line-height: 1.45;
}


.outdoor_spec_grid p em {
    color:
        var(--color-primary);

    font-style: normal;
}


.outdoor_spec_grid small {
    display: block;

    margin-top: 10px;

    color: #888;

    font-size: 14px;
    line-height: 1.55;
}



/* =========================================================
   03. BUS / TAXI
========================================================= */

.outdoor_vehicle {
    background: #fff;
}


.outdoor_vehicle_visual {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-top: 70px;
}


.outdoor_vehicle_img {
    position: relative;

    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #eee;
}


.outdoor_vehicle_img img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;
}


.outdoor_vehicle_img > span {
    position: absolute;

    left: 24px;
    bottom: 24px;

    padding:
        9px 14px;

    border-radius: 100px;

    background:
        rgba(23,22,23,.86);

    color: #fff;

    font-size: 14px;
    font-weight: 600;
}



.outdoor_vehicle_info {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .45fr);

    gap:
        clamp(40px, 6vw, 90px);

    margin-top: 55px;
}


.outdoor_vehicle_features {
    border-top:
        1px solid #ddd;
}


.outdoor_vehicle_features article {
    display: grid;

    grid-template-columns:
        50px minmax(0, 1fr);

    gap: 20px;

    padding:
        22px 0;

    border-bottom:
        1px solid #ddd;
}


.outdoor_vehicle_features article > span {
    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.outdoor_vehicle_features p {
    color: #555;

    font-size: 16px;
    line-height: 1.7;
}



/* vehicle type */

.outdoor_vehicle_type {
    padding:
        clamp(28px, 3vw, 42px);

    border-radius:
        var(--radius-lg);

    background:
        var(--outdoor-dark);

    color: #fff;
}


.outdoor_vehicle_type_tit {
    display: block;

    margin-bottom: 35px;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 650;
}


.outdoor_vehicle_type > div {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}


.outdoor_vehicle_type strong {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 70px;

    padding: 15px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        var(--radius-sm);

    background:
        rgba(255,255,255,.04);

    font-size: 16px;
    font-weight: 500;
}



/* =========================================================
   04. OTHER VEHICLE
========================================================= */

.outdoor_other {
    background:
        var(--color-bg-gray);
}


.outdoor_other_grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 70px;
}


.outdoor_other_grid article {
    overflow: hidden;

    min-width: 0;

    border:
        1px solid #e5e5e5;

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.outdoor_other_img {
    overflow: hidden;

    background: #eee;
}


.outdoor_other_img img {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;
}


.outdoor_other_grid h3 {
    padding:
        22px 24px 26px;

    font-size: 18px;
    font-weight: 600;
}



/* =========================================================
   HOVER
========================================================= */

@media (hover:hover) {

    .outdoor_spec_grid article,
    .outdoor_other_grid article {
        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }


    .outdoor_spec_grid article:hover,
    .outdoor_other_grid article:hover {
        transform:
            translateY(-4px);

        box-shadow:
            0 18px 40px
            rgba(0,0,0,.06);
    }


    .outdoor_vehicle_img img,
    .outdoor_other_img img {
        transition:
            transform .6s ease;
    }


    .outdoor_vehicle_img:hover img,
    .outdoor_other_grid article:hover img {
        transform:
            scale(1.03);
    }

}



/* =========================================================
   1260
========================================================= */

@media all and (max-width:1260px) {

    .outdoor_intro {
        padding-top: 120px;
    }


    .outdoor_spec_grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .outdoor_spec_grid article {
        min-height: 220px;
    }


    .outdoor_other_grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* =========================================================
   1024
========================================================= */

@media all and (max-width:1024px) {

    .outdoor_intro .grid_card2 {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .outdoor_intro .main_sec_tit {
        order: 1;
    }


    .outdoor_intro .round_img {
        order: 2;
    }


    .outdoor_intro .round_img img {
        aspect-ratio: 16 / 10;
    }


    .outdoor_elevator_intro {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .outdoor_elevator_intro
    .round_img img {
        min-height: 0;

        aspect-ratio: 16 / 10;
    }


    .outdoor_vehicle_info {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   768
========================================================= */

@media all and (max-width:768px) {

    .outdoor_intro {
        padding-top: 70px;
    }


    .outdoor_intro .about_tit {
        font-size:
            clamp(34px, 10vw, 52px);
    }


    .outdoor_media_head {
        gap: 20px;
    }


    .outdoor_section_num {
        font-size: 42px;
    }


    /* elevator */

    .outdoor_elevator_intro {
        margin-top: 45px;
    }


    .outdoor_feature_item {
        grid-template-columns:
            38px minmax(0, 1fr);

        gap: 12px;

        padding: 20px 0;
    }


    .outdoor_spec {
        margin-top: 60px;
    }


    .outdoor_spec_grid {
        grid-template-columns: 1fr;

        border-radius:
            var(--radius-md);
    }


    .outdoor_spec_grid article {
        min-height: 0;

        padding: 26px 24px;
    }


    .outdoor_spec_num {
        margin-bottom: 25px;
    }


    /* vehicle */

    .outdoor_vehicle_visual {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }


    .outdoor_vehicle_img {
        border-radius:
            var(--radius-md);
    }


    .outdoor_vehicle_info {
        margin-top: 40px;
    }


    .outdoor_vehicle_features article {
        grid-template-columns:
            38px minmax(0,1fr);

        gap: 12px;
    }


    .outdoor_vehicle_type {
        border-radius:
            var(--radius-md);
    }


    /* other */

    .outdoor_other_grid {
        margin-top: 45px;
    }

}



/* =========================================================
   540
========================================================= */

@media all and (max-width:540px) {

    .outdoor_page
    .main_sec_tit p br {
        display: none;
    }


    .outdoor_intro .round_img img,
    .outdoor_elevator_intro
    .round_img img {
        aspect-ratio: 4 / 3;
    }


    .outdoor_media_head {
        display: block;
    }


    .outdoor_section_num {
        display: block;

        margin-top: 25px;
    }


    .outdoor_vehicle_type > div {
        grid-template-columns: 1fr 1fr;
    }


    .outdoor_other_grid {
        grid-template-columns: 1fr;
    }


    .outdoor_other_grid h3 {
        font-size: 16px;
    }

}









/* =========================================================
   ONLINE PAGE
========================================================= */

.online_page {
    --online-line: #e6e6e6;
    --online-dark: var(--color-bg-dark);

    width: 100%;

    color: var(--color-text);
}


.online_page .main_sec_tit {
    max-width: 720px;
}


.online_page .main_sec_tit h2 {
    letter-spacing: -.045em;
}


.online_page .main_sec_tit p {
    color: var(--color-text-sub);

    font-size: 16px;
    line-height: 1.75;

    letter-spacing: -.025em;
}



/* =========================================================
   COMMON
========================================================= */

.online_service_head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;
}


.online_section_num {
    color: var(--color-primary);

    font-size:
        clamp(42px, 5vw, 76px);

    font-weight: 650;
    line-height: 1;
}


.online_card_num {
    display: block;

    margin-bottom: 20px;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.online_desc_list {
    margin: 0;

    padding: 0;

    list-style: none;
}


.online_desc_list li {
    position: relative;

    padding:
        18px 0 18px 24px;

    border-bottom:
        1px solid #e0e0e0;

    color: #555;

    font-size: 16px;
    line-height: 1.7;
}


.online_desc_list li:first-child {
    border-top:
        1px solid #e0e0e0;
}


.online_desc_list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 30px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--color-primary);
}



/* =========================================================
   01. INTRO
========================================================= */

.online_intro {
    padding-top: 150px;
}


.online_intro .grid_card2 {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap:
        clamp(50px, 7vw, 130px);
}


.online_intro .about_tit {
    font-size:
        clamp(38px, 4.8vw, 76px);

    font-weight: 650;
    line-height: 1.08;

    letter-spacing: -.055em;
}


.online_intro .main_sec_tit p:first-of-type {
    margin-top: 28px;
}


.online_intro .main_sec_tit p + p {
    margin-top: 12px;
}


.online_intro .round_img {
    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #f3f3f3;
}


.online_intro .round_img img {
    display: block;

    width: 100%;

    aspect-ratio: 1.16 / 1;

    object-fit: cover;
}



/* =========================================================
   02. NAVER SEARCH
========================================================= */

.online_naver_search {
    background:
        var(--color-bg-gray);
}


.online_search_grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    /* align-items: center; */

    gap:
        clamp(50px, 7vw, 110px);

    margin-top: 70px;
}


.online_search_feature {
    display: grid;

    grid-template-columns:
        repeat(1, minmax(0, 1fr));

    gap: 10px;

    margin-top: 40px;
}


.online_search_feature article {
    min-width: 0;

    min-height: 125px;

    padding: 24px;

    border:
        1px solid #e5e5e5;

    border-radius:
        var(--radius-md);

    background: #fff;
}


.online_search_feature span {
    display: block;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.online_search_feature strong {
    display: block;

    margin-top: 25px;

    font-size: 17px;
    font-weight: 600;
}



.online_search_visual {
    position: relative;
}

.online_search_visual > span {
    display:inline-block;
    padding:
        10px 16px;

    border-radius: 100px;

    background:
        rgba(23,22,23,.88);

    color: #fff;

    font-size: 18px;
    font-weight: 600;
}

.online_search_visual_card_wr{
  gap:16px;
  margin-top:20px;
}

.online_search_visual_card{
    display: flex;
    flex-flow: column nowrap;
    align-items:center;
    gap:12px;
    padding:20px;
    background:#fff;
    border-radius:
        var(--radius-md);
}

.online_search_visual_card_wr2 .online_search_visual_card{
  align-items:flex-start;
}

.online_search_visual img {
    display: block;
    width: 100%;
    max-width:200px;
    height: auto;
    margin:0 auto;
}

.online_search_visual_card strong{
  font-size: 17px;
  font-weight: 600;
}

.online_search_visual_card p{
  font-size: 16px;
}





/* =========================================================
   03. DISPLAY
========================================================= */

.online_display {
    background: #fff;
}


.online_display_grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr);

    align-items: center;

    gap:
        clamp(50px, 7vw, 110px);

    margin-top: 70px;
}


.online_display_visual {
    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #f4f4f4;
}


.online_display_visual img {
    display: block;

    width: 100%;
    height: auto;
}


.online_display_point {
    margin-top: 45px;

    padding:
        clamp(28px, 3vw, 42px);

    border-radius:
        var(--radius-lg);

    background:
        var(--online-dark);

    color: #fff;
}


.online_display_point > span {
    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 650;
}


.online_display_point h3 {
    margin-top: 12px;

    color: #fff;

    font-size:
        clamp(21px, 2vw, 28px);

    font-weight: 600;
}


.online_display_point p {
    margin-top: 18px;

    color:
        rgba(255,255,255,.64);

    font-size: 16px;
    line-height: 1.75;
}

/* 

.online_display_subtitle{
  margin-top:60px;
  padding-top:60px;
  border-top:1px solid #ddd;
}

.online_display_subtitle .grid_card5{grid-template-columns: repeat(5, minmax(0, 1fr));gap:16px;}
.online_display_subtitle .grid_card5 > div{display:flex;flex-flow:column nowrap;gap:50px;padding:30px;border: 1px solid #e5e5e5;border-radius:var(--radius-md);}
.online_display_subtitle .grid_card5 strong{font-size: 16px;font-weight: 600;}
.online_display_subtitle .grid_card5 p{color: #555;font-size: 16px;word-break: keep-all;}
 */

/* =========================================================
   DISPLAY SUB TYPE
========================================================= */

.online_display_subtitle {
    margin-top: 50px;
}


.online_display_subtitle .grid_card5 {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
}


.online_display_subtitle .grid_card5 > div {
    position: relative;

    min-width: 0;
    min-height: 190px;

    padding:
        30px 24px 26px;

    border:
        1px solid #e5e5e5;

    border-radius:
        var(--radius-md);

    background:
        #f8f8f8;
}


/* 상단 포인트 라인 */
.online_display_subtitle .grid_card5 > div::before {
    content: "";

    position: absolute;

    left: 24px;
    top: 0;

    width: 34px;
    height: 3px;

    background:
        var(--color-primary);
}


.online_display_subtitle strong {
    display: block;

    font-size: 18px;
    font-weight: 650;

    line-height: 1.4;

    letter-spacing: -.03em;
}


.online_display_subtitle p {
    margin-top: 16px;

    color: #666;

    font-size: 16px;
    line-height: 1.7;

    word-break: keep-all;
}





/* =========================================================
   04. CONTENT
========================================================= */

.online_content {
    background:
        var(--color-bg-gray);
}


.online_content_grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 70px;
}


.online_content_card {
    overflow: hidden;

    min-width: 0;

    border:
        1px solid #e4e4e4;

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.online_content_img {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-bottom:1px solid #ddd;
}


.online_content_img img {
    display: block;

    width: 100%;
    max-width:480px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin:0 auto;
}


.online_content_img > span {
    position: absolute;

    left: 24px;
    top: 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:
        var(--color-primary);

    color: #fff;

    font-size: 14px;
    font-weight: 700;
}


.online_content_txt {
    padding:
        clamp(28px, 3vw, 45px);
}


.online_content_eng {
    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 600;
}


.online_content_txt h3 {
    margin-top: 9px;

    font-size:
        clamp(23px, 2vw, 30px);

    font-weight: 650;
}


.online_content_txt ul {
    margin-top: 28px;

    padding: 0;

    list-style: none;
}


.online_content_txt li {
    position: relative;

    padding-left: 20px;

    color: #666;

    font-size: 16px;
    line-height: 1.7;
}


.online_content_txt li + li {
    margin-top: 13px;
}


.online_content_txt li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 10px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-primary);
}



/* =========================================================
   05. SNS / YOUTUBE
========================================================= */

.online_social {
    background:
        var(--online-dark);
}


.online_social_grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.online_social_card {
    position: relative;

    overflow: hidden;

    min-width: 0;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:
        var(--radius-lg);

    background: #222122;
}


.online_social_num {
    position: absolute;

    z-index: 2;

    left: 35px;
    top: 35px;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.online_social_txt {
    min-height: 430px;

    padding:
        90px
        clamp(30px, 3vw, 48px)
        45px;
}


.online_social_txt > span {
    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 600;
}


.online_social_txt h2 {
    margin-top: 10px;

    color: #fff;

    font-size:
        clamp(26px, 2.5vw, 36px);

    font-weight: 650;
}


.online_social_txt ul {
    margin-top: 35px;

    padding: 0;

    list-style: none;
}


.online_social_txt li {
    position: relative;

    padding-left: 20px;

    color:
        rgba(255,255,255,.64);

    font-size: 16px;
    line-height: 1.7;
}


.online_social_txt li + li {
    margin-top: 14px;
}


.online_social_txt li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 10px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-primary);
}


.online_social_img {
    overflow: hidden;
}


.online_social_img img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}



/* =========================================================
   06. MEDIA / COMMERCE
========================================================= */

.online_media {
    background: #fff;
}


.online_media_grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 70px;
}


.online_media_card {
    overflow: hidden;

    border:
        1px solid #e5e5e5;

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.online_media_img {
    overflow: hidden;

    background: #f4f4f4;
}


.online_media_img img {
    display: block;

    width: 100%;

    aspect-ratio: 800 / 775;

    object-fit: cover;
}


.online_media_txt {
    padding:
        clamp(28px, 3vw, 45px);
}


.online_media_eng {
    display: block;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 600;
}


.online_media_txt h3 {
    margin-top: 8px;

    font-size:
        clamp(23px, 2vw, 30px);

    font-weight: 650;
}


.online_media_txt ul {
    margin-top: 26px;

    padding: 0;

    list-style: none;
}


.online_media_txt li {
    position: relative;

    padding-left: 20px;

    color: #666;

    font-size: 16px;
    line-height: 1.7;
}


.online_media_txt li + li {
    margin-top: 11px;
}


.online_media_txt li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 10px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-primary);
}



/* =========================================================
   07. KAKAO / TIKTOK
========================================================= */

.online_platform {
    background:
        var(--color-bg-gray);
}


.online_platform_grid {
    display: grid;

    gap: 20px;
}


.online_platform_card {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    overflow: hidden;

    min-width: 0;

    border:
        1px solid #e5e5e5;

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.online_platform_card.online_tiktok {
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr);
}


.online_tiktok .online_platform_txt {
    order: 2;
}


.online_tiktok .online_platform_img {
    order: 1;
}


.online_platform_txt {
    display: flex;

    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding:
        clamp(35px, 5vw, 70px);
}


.online_platform_eng {
    display: block;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 600;
}


.online_platform_txt h2 {
    margin-top: 9px;

    font-size:
        clamp(26px, 2.8vw, 40px);

    font-weight: 650;
}


.online_platform_txt ul {
    margin-top: 30px;

    padding: 0;

    list-style: none;
}


.online_platform_txt li {
    position: relative;

    padding-left: 20px;

    color: #666;

    font-size: 16px;
    line-height: 1.7;
}


.online_platform_txt li + li {
    margin-top: 13px;
}


.online_platform_txt li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 10px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-primary);
}


.online_platform_img {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    min-height: 480px;

    overflow: hidden;

    background: #eee;
}


.online_platform_img img {
    display: block;
    width: 90%;
    /* height: 100%; */
    aspect-ratio: 1400 / 493 ;
    object-fit: cover;

}



/* =========================================================
   08. WEBSITE
========================================================= */

.online_website {
    overflow: hidden;

    background:
        var(--online-dark);

    color: #fff;
}


.online_website_grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap:
        clamp(50px, 8vw, 140px);
}


.online_website_txt
.main_sec_tit_eng {
    display: block;

    color:
        var(--color-primary);

    font-size: 16px;
    font-weight: 600;
}


.online_website_txt
.main_sec_tit_line {
    width: 30px;
    height: 2px;

    margin-top: 16px;

    background:
        var(--color-primary);
}


.online_website_txt h2 {
    margin-top: 22px;

    color: #fff;

    font-size:
        clamp(30px, 3.5vw, 52px);

    font-weight: 650;

    letter-spacing: -.045em;
}


.online_website_txt ul {
    margin-top: 38px;

    padding: 0;

    list-style: none;
}


.online_website_txt li {
    position: relative;

    padding-left: 20px;

    color:
        rgba(255,255,255,.63);

    font-size: 16px;
    line-height: 1.75;
}


.online_website_txt li + li {
    margin-top: 13px;
}


.online_website_txt li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 11px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--color-primary);
}



/* =========================================================
   WEBSITE VISUAL
========================================================= */

.online_website_visual {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    width: 100%;
}


.online_website_img {
  display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
    padding:10px;
    border-radius:
        var(--radius-md);

    background: #fff;
}


.online_website_img img {
    display: block;

    width: 100%;
    /* height: 100%; */

    aspect-ratio: 40 / 32;

    object-fit: cover;
}


/* 살짝 엇갈리게 배치 */
.online_website_img:nth-child(even) {
    transform:
        translateY(35px);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover:hover) {

    .online_search_feature article,
    .online_content_card,
    .online_media_card,
    .online_platform_card {
        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }


    .online_search_feature article:hover,
    .online_content_card:hover,
    .online_media_card:hover {
        transform:
            translateY(-4px);

        box-shadow:
            0 20px 45px
            rgba(0,0,0,.06);
    }


    .online_content_img img,
    .online_media_img img,
    .online_platform_img img {
        transition:
            transform .6s ease;
    }


    .online_content_card:hover img,
    .online_media_card:hover img,
    .online_platform_card:hover img {
        transform:
            scale(1.025);
    }

}



/* =========================================================
   1260
========================================================= */

@media all and (max-width:1260px) {

    .online_intro {
        padding-top: 120px;
    }


    .online_search_grid,
    .online_display_grid {
        gap: 55px;
    }


    .online_social_txt {
        min-height: 470px;
    }


    .online_website_visual {
        min-height: 520px;
    }

    .online_display_subtitle .grid_card5 {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}



/* =========================================================
   1024
========================================================= */

@media all and (max-width:1024px) {

    .online_intro .grid_card2 {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .online_intro .round_img img {
        aspect-ratio: 16 / 10;
    }


    .online_search_grid,
    .online_display_grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .online_content_grid,
    .online_media_grid,
    .online_social_grid {
        grid-template-columns: 1fr;
    }


    .online_social_txt {
        min-height: 0;
    }


    .online_platform_card,
    .online_platform_card.online_tiktok {
        grid-template-columns: 1fr;
    }


    .online_tiktok .online_platform_txt,
    .online_tiktok .online_platform_img {
        order: initial;
    }


    .online_platform_img {
        min-height: 0;
    }


    .online_platform_img img {
        aspect-ratio: 16 / 9;
    }


    .online_website_grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .online_website_visual {
        max-width: 800px;

        width: 100%;
    }

}



/* =========================================================
   768
========================================================= */

@media all and (max-width:768px) {

    .online_intro {
        padding-top: 70px;
    }


    .online_intro .about_tit {
        font-size:
            clamp(34px, 10vw, 52px);
    }


    .online_service_head {
        gap: 20px;
    }


    .online_section_num {
        font-size: 42px;
    }


    .online_search_grid,
    .online_display_grid,
    .online_content_grid,
    .online_media_grid {
        margin-top: 45px;
    }


    .online_search_feature {
        margin-top: 30px;
    }

    .online_display_subtitle {
        margin-top: 35px;
    }


    .online_display_subtitle .grid_card5 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .online_display_subtitle .grid_card5 > div {
        min-height: 0;

        padding:
            26px 22px 24px;
    }


    .online_display_subtitle strong {
        font-size: 17px;
    }

    .online_content_card,
    .online_media_card,
    .online_platform_card,
    .online_social_card {
        border-radius:
            var(--radius-md);
    }


    .online_display_point {
        margin-top: 30px;

        border-radius:
            var(--radius-md);
    }


    .online_social_txt {
        padding:
            75px 28px 35px;
    }


    .online_platform_txt {
        padding:
            35px 28px;
    }


    .online_website_visual {
        min-height: 440px;
    }

}



/* =========================================================
   540
========================================================= */

@media all and (max-width:540px) {

    .online_page
    .main_sec_tit p br {
        display: none;
    }


    .online_intro .round_img img {
        aspect-ratio: 4 / 3;
    }


    .online_service_head {
        display: block;
    }


    .online_section_num {
        display: block;

        margin-top: 25px;
    }


    .online_search_feature {
        grid-template-columns: 1fr;
    }


    .online_search_feature article {
        min-height: 0;
    }


    .online_search_feature strong {
        margin-top: 15px;
    }

    .online_display_subtitle .grid_card5 {
        grid-template-columns: 1fr;
    }


    .online_display_subtitle .grid_card5 > div {
        padding:
            24px 20px 22px;
    }


    .online_content_txt,
    .online_media_txt {
        padding:
            26px 22px 30px;
    }


    .online_website_visual {
        min-height: 350px;
    }


    .online_device_img01 {
        width: 85%;
        height: 70%;
    }


    .online_device_img02 {
        width: 52%;
        height: 52%;

        border-width: 5px;
    }

}

/* =========================================================
   LIVE STREAMING
========================================================= */

.online_live_streaming {
    margin-top: 35px;
    padding-top: 30px;

    border-top:
        1px solid #e5e5e5;
}


.online_live_streaming_head > span {
    display: block;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 600;
}


.online_live_streaming_head h4 {
    margin-top: 7px;

    font-size:
        clamp(20px, 1.8vw, 26px);

    font-weight: 650;

    letter-spacing: -.03em;
}


.online_live_streaming_grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 22px;
}


.online_live_streaming_grid > div {
    min-width: 0;

    padding:
        22px 20px;

    border:
        1px solid #e8e8e8;

    border-radius:
        var(--radius-md);

    background:
        #f8f8f8;
}


.online_live_streaming_grid strong {
    display: block;

    color:
        var(--color-text);

    font-size: 16px;
    font-weight: 650;
}


.online_live_streaming_grid p {
    margin-top: 10px;

    color: #666;

    font-size: 15px;
    line-height: 1.65;

    word-break: keep-all;
}






/* =========================================================
   PRODUCTION PAGE
========================================================= */

.production_page {
    width: 100%;

    color: var(--color-text);
}


.production_page .main_sec_tit {
    max-width: 740px;
}


.production_page .main_sec_tit h2 {
    letter-spacing: -.045em;
}


.production_page .main_sec_tit p {
    color: var(--color-text-sub);

    font-size: 16px;
    line-height: 1.75;

    letter-spacing: -.025em;
}



/* =========================================================
   01. INTRO
========================================================= */

.production_intro {
    padding-top: 150px;
}


.production_intro .grid_card2 {
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap:
        clamp(50px, 7vw, 130px);
}


.production_intro .about_tit {
    font-size:
        clamp(38px, 4.8vw, 76px);

    font-weight: 650;
    line-height: 1.08;

    letter-spacing: -.055em;
}


.production_intro_lead {
    display: block;

    margin-top: 30px;

    font-size:
        clamp(21px, 2vw, 28px);

    font-weight: 650;

    line-height: 1.45;
}


.production_intro .main_sec_tit p {
    margin-top: 18px;
}


.production_intro .main_sec_tit p + p {
    margin-top: 10px;
}


.production_intro .round_img {
    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #f3f3f3;
}


.production_intro .round_img img {
    display: block;

    width: 100%;

    aspect-ratio: 1.16 / 1;

    object-fit: cover;
}



/* =========================================================
   02. POWER
========================================================= */

.production_power {
    background:
        var(--color-bg-gray);
}


.production_power_grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;

    margin-top: 70px;
}


.production_power_card {
    position: relative;

    min-width: 0;
    min-height: 350px;

    padding:
        30px 26px;

    overflow: hidden;

    border:
        1px solid #e6e6e6;

    border-radius:
        var(--radius-lg);

    background: #fff;
}


.production_power_num {
    display: block;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.production_power_icon {
    display: flex;

    align-items: center;

    height: 115px;

    margin-top: 30px;
}


.production_power_icon img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 63px;
}


.production_power_card h3 {
    margin-top: 20px;

    font-size:
        clamp(18px, 1.5vw, 22px);

    font-weight: 650;

    line-height: 1.4;
}


.production_power_card p {
    margin-top: 13px;

    color: #666;

    font-size: 16px;
    line-height: 1.7;

    word-break: keep-all;
}



/* =========================================================
   03. PROCESS
========================================================= */

.production_process {
    background:
        var(--color-bg-dark);

    color: #fff;
}


.production_process .main_sec_tit h2 {
    color: #fff;
}


.production_process .main_sec_tit p {
    color:
        rgba(255,255,255,.6);
}


.production_process_head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;
}


.production_process_big_num {
    color:
        var(--color-primary);

    font-size:
        clamp(45px, 6vw, 90px);

    font-weight: 650;

    line-height: 1;
}


.production_process_grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-top: 70px;
}


.production_process_card {
    position: relative;

    overflow: hidden;

    min-width: 0;

    padding-bottom: 30px;

    border:
        1px solid rgba(255,255,255,.1);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255,255,255,.04);
}


.production_process_step {
    position: absolute;

    z-index: 2;

    left: 20px;
    top: 20px;

    padding:
        8px 12px;

    border-radius: 100px;

    background:
        var(--color-primary);

    color: #fff;

    font-size: 14px;
    font-weight: 700;
}


.production_process_img {
    overflow: hidden;

    background: #292829;
}


.production_process_img img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;
}


.production_process_eng {
    display: block;

    margin:
        27px 26px 0;

    color:
        var(--color-primary);

    font-size: 14px;
    font-weight: 600;

    text-transform: uppercase;
}


.production_process_card h3 {
    margin:
        7px 26px 0;

    color: #fff;

    font-size:
        clamp(20px, 1.8vw, 26px);

    font-weight: 600;
}



/* =========================================================
   04. PRICE
========================================================= */

.production_price {
    background: #fff;
}


.production_price_wrap {
    width: 100%;

    margin-top: 60px;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}


.production_price_table {
    width: 100%;
    min-width: 940px;

    border-collapse: collapse;

    border-top:
        2px solid var(--color-text);

    table-layout: fixed;
}


.production_col_type {
    width: 14%;
}


.production_col_item {
    width: 18%;
}


.production_col_staff {
    width: 34%;
}


.production_col_note {
    width: 34%;
}


.production_price_table th,
.production_price_table td {
    padding:
        20px 22px;

    border-bottom:
        1px solid #e5e5e5;

    border-right:
        1px solid #e5e5e5;

    font-size: 16px;
    line-height: 1.65;

    text-align: left;
    vertical-align: middle;

    word-break: keep-all;
}


.production_price_table thead th {
    padding-top: 22px;
    padding-bottom: 22px;

    background:
        var(--color-bg-dark);

    color: #fff;

    font-weight: 600;
}


.production_price_table tbody > tr > th {
    background:
        var(--color-bg-gray);

    color:
        var(--color-text);

    font-weight: 650;

    vertical-align: top;
}


.production_price_table tbody td {
    color: #555;
}


.production_price_table .production_staff {
    color:
        var(--color-text);

    font-weight: 500;
}


.production_price_table
.production_staff::before {
    content: "•";

    margin-right: 8px;

    color:
        var(--color-primary);
}



/* =========================================================
   05. PORTFOLIO
========================================================= */

.production_portfolio {
    background:
        var(--color-primary);

    color: #fff;
}


.production_portfolio_inner {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap:
        clamp(40px, 8vw, 140px);
}


.production_portfolio_eng {
    display: block;

    margin-bottom: 18px;

    color:
        rgba(255,255,255,.7);

    font-size: 16px;
    font-weight: 600;
}


.production_portfolio_inner h2 {
    color: #fff;

    font-size:
        clamp(30px, 4vw, 54px);

    font-weight: 650;
    line-height: 1.25;

    letter-spacing: -.045em;
}


.production_portfolio_btn {
    display: flex;

    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    width:
        clamp(280px, 24vw, 380px);

    min-height: 80px;

    padding:
        0 26px;

    border:
        1px solid rgba(255,255,255,.5);

    border-radius: 100px;

    color: #fff;

    font-size: 16px;
    font-weight: 600;

    transition:
        background .3s ease,
        color .3s ease;
}


.production_portfolio_btn i {
    font-style: normal;

    font-size: 23px;

    transition:
        transform .3s ease;
}


@media (hover:hover) {

    .production_portfolio_btn:hover {
        background: #fff;

        color:
            var(--color-primary);
    }


    .production_portfolio_btn:hover i {
        transform:
            translateX(5px);
    }


    .production_power_card {
        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }


    .production_power_card:hover {
        transform:
            translateY(-5px);

        box-shadow:
            0 18px 45px
            rgba(0,0,0,.06);
    }


    .production_process_img img {
        transition:
            transform .6s ease;
    }


    .production_process_card:hover
    .production_process_img img {
        transform:
            scale(1.035);
    }

}



/* =========================================================
   1260
========================================================= */

@media all and (max-width:1260px) {

    .production_intro {
        padding-top: 120px;
    }


    .production_power_grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .production_power_card {
        min-height: 320px;
    }

}



/* =========================================================
   1024
========================================================= */

@media all and (max-width:1024px) {

    .production_intro .grid_card2 {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .production_intro .round_img img {
        aspect-ratio: 16 / 10;
    }


    .production_process_grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .production_portfolio_inner {
        align-items: flex-start;
        flex-direction: column;
    }

}



/* =========================================================
   768
========================================================= */

@media all and (max-width:768px) {

    .production_intro {
        padding-top: 70px;
    }


    .production_intro .about_tit {
        font-size:
            clamp(34px, 10vw, 52px);
    }


    .production_power_grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        margin-top: 45px;
    }


    .production_power_card {
        min-height: 0;

        border-radius:
            var(--radius-md);
    }


    .production_power_icon {
        height: 90px;
    }


    .production_process_grid {
        margin-top: 45px;
    }


    .production_process_card {
        border-radius:
            var(--radius-md);
    }


    .production_price_wrap {
        margin-top: 40px;
    }


    .production_portfolio_btn {
        width: 100%;
        max-width: 400px;

        min-height: 70px;
    }

}



/* =========================================================
   540
========================================================= */

@media all and (max-width:540px) {

    .production_intro .round_img img {
        aspect-ratio: 4 / 3;
    }


    .production_power_grid {
        grid-template-columns: 1fr;
    }


    .production_power_card {
        display: grid;

        grid-template-columns:
            70px minmax(0, 1fr);

        column-gap: 18px;

        padding:
            24px 22px;
    }


    .production_power_num {
        grid-column: 1 / 3;
    }


    .production_power_icon {
        grid-column: 1;
        grid-row: 2 / 4;

        height: auto;

        margin-top: 25px;

        align-items: flex-start;
    }


    .production_power_icon img {
        max-width: 60px;
        max-height: 60px;
    }


    .production_power_card h3 {
        grid-column: 2;

        margin-top: 25px;
    }


    .production_power_card p {
        grid-column: 2;
    }


    .production_process_head {
        display: block;
    }


    .production_process_big_num {
        display: block;

        margin-top: 25px;
    }


    .production_process_grid {
        grid-template-columns: 1fr;
    }


    .production_process_img img {
        aspect-ratio: 16 / 9;
    }


    .production_portfolio_inner h2 br {
        display: none;
    }

}