/* Quick Link 컴포넌트 (component-view 전용)
   support.css .support.overview .link 규칙을 .component_view 스코프로 이식. 원본 미수정. */
.component_view .link {
    padding: 10rem 0;
    background: #F3F3F3;
}
.component_view .link h3 {
    line-height: 1.45;
    font-size: 3.2rem;
    font-weight: 900;
}
.component_view .link .link_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(24rem, auto);
    gap: 1.6rem;
    margin-top: 2.4rem;
}
.component_view .link .link_list li .group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 4.4rem 4rem 4rem;
    border: 1px solid #D9D9D9;
    background: #fff;
}
.component_view .link .link_list li .group .title {
    display: block;
    width: 25rem;
    line-height: 1.25;
    font-size: 2.4rem;
}
.component_view .link .link_list li .group::before {
    content: "";
    position: absolute;
    right: 4rem;
    top: 4rem;
    width: 6rem;
    height: 6rem;
    border-radius: 99rem;
    background-color: #000;
    background-image: var(--link-icon-bg);
    background-position: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}
.component_view .link .link_list li.link-registration .group::before {
    background-image: url("../images/support/ico_overview_link01.svg");
}
.component_view .link .link_list li.link-warranty .group::before {
    background-image: url("../images/support/ico_overview_link02.svg");
}
.component_view .link .link_list li.link-knowledgebase .group::before {
    background-image: url("../images/support/ico_overview_link08.svg");
}
.component_view .link .link_list li.link-device-manager .group::before {
    background-image: url("../images/support/ico_overview_link04.svg");
}
.component_view .link .link_list li.link-apps .group::before {
    background-image: url("../images/support/ico_overview_link05.svg");
}
.component_view .link .link_list li.link-dealer .group::before {
    background-image: url("../images/support/ico_overview_link11.svg");
}
.component_view .link .link_list li.link-forum .group::before {
    background-image: url("../images/support/ico_overview_link07.svg");
}
.component_view .link .link_list li.link-partner .group::before {
    background-image: url("../images/support/ico_overview_link06.svg");
}
.component_view .link .link_list li.link-ticket .group::before {
    background-image: url("../images/support/ico_overview_link10.svg");
}
.component_view .link .link_list .btn_gray_line.medium .go {
    padding-right: 2rem;
}
.component_view .link .link_list .btn_gray_line.medium .go:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    background: url("../images/support/ico_go_black.svg") no-repeat left top / 100% 100%;
    transition: all .2s;
}
@media (hover: hover) and (min-width: 1181px) {
    .component_view .link .link_list .btn_gray_line.medium:hover .go:before {
        background-image: url("../images/support/ico_go_red.svg");
    }
}
@media (max-width: 1919px) {
    .component_view .link {
        padding: calc(100vw * (100 / 1919)) 0;
    }
    .component_view .link h3 {
        font-size: calc(100vw * (32 / 1919));
    }
    .component_view .link .link_list {
        grid-auto-rows: minmax(calc(100vw * (240 / 1919)), auto);
        gap: calc(100vw * (16 / 1919));
        margin-top: calc(100vw * (24 / 1919));
    }
    .component_view .link .link_list li .group {
        padding: calc(100vw * (44 / 1919)) calc(100vw * (40 / 1919)) calc(100vw * (40 / 1919));
    }
    .component_view .link .link_list li .group .title {
        width: calc(100vw * (250 / 1919));
        font-size: calc(100vw * (24 / 1919));
    }
    .component_view .link .link_list li .group::before {
        right: calc(100vw * (40 / 1919));
        top: calc(100vw * (40 / 1919));
        width: calc(100vw * (60 / 1919));
        height: calc(100vw * (60 / 1919));
    }
    .component_view .link .link_list .btn_gray_line.medium .go {
        padding-right: calc(100vw * (20 / 1919));
    }
    .component_view .link .link_list .btn_gray_line.medium .go::before {
        width: calc(100vw * (12 / 1919));
        height: calc(100vw * (12 / 1919));
    }
}
@media (max-width: 1180px) {
    .component_view .link {
        padding: calc(100vw * (100 / 1180)) 0;
    }
    .component_view .link h3 {
        font-size: calc(100vw * (32 / 1180));
    }
    .component_view .link .link_list {
        grid-auto-rows: minmax(calc(100vw * (240 / 1180)), auto);
        gap: calc(100vw * (16 / 1180));
        margin-top: calc(100vw * (24 / 1180));
    }
    .component_view .link .link_list li .group {
        padding: calc(100vw * (30 / 1180));
    }
    .component_view .link .link_list li .group .title {
        width: calc(100vw * (160 / 1180));
        font-size: calc(100vw * (24 / 1180));
    }
    .component_view .link .link_list li .group::before {
        right: calc(100vw * (30 / 1180));
        top: calc(100vw * (30 / 1180));
        width: calc(100vw * (60 / 1180));
        height: calc(100vw * (60 / 1180));
    }
    .component_view .link .link_list .btn_gray_line.medium .go {
        padding-right: calc(100vw * (20 / 1180));
    }
    .component_view .link .link_list .btn_gray_line.medium .go::before {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
    }
}
@media (max-width: 767px) {
    .component_view .link {
        padding: calc(100vw * (100 / 767)) 0;
    }
    .component_view .link h3 {
        font-size: calc(100vw * (48 / 767));
    }
    .component_view .link .link_list {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: minmax(calc(100vw * (320 / 767)), auto);
        gap: calc(100vw * (20 / 767));
        margin-top: calc(100vw * (40 / 767));
    }
    .component_view .link .link_list li .group {
        padding: calc(100vw * (40 / 767));
    }
    .component_view .link .link_list li .group .title {
        width: calc(100vw * (410 / 767));
        font-size: calc(100vw * (36 / 767));
    }
    .component_view .link .link_list li .group::before {
        right: calc(100vw * (30 / 767));
        top: calc(100vw * (30 / 767));
        width: calc(100vw * (100 / 767));
        height: calc(100vw * (100 / 767));
    }
    .component_view .link .link_list .btn_gray_line.medium .go {
        padding-right: calc(100vw * (36 / 767));
    }
    .component_view .link .link_list .btn_gray_line.medium .go::before {
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
    }
}