/* 탭 콘텐츠(Ethics) 컴포넌트 (component-view 전용)
   about.css .about .ethics 규칙을 .component_view 스코프로 이식. 원본 미수정. */
.component_view .ethics {
    margin-top: 6rem;
}
.component_view .ethics .tab_content.tab1 {
    display: flex;
    flex-direction: column;
    gap: 10rem;
}
.component_view .ethics h3 {
    line-height: 1.45;
    font-size: 3.2rem;
    font-weight: 900;
}
.component_view .ethics .txt {
    margin-top: 2.4rem;
    line-height: 1.6;
    font-size: 1.8rem;
}
.component_view .ethics .txt a {
    font-weight: 700;
}
.component_view .ethics .btn_area {
    margin-top: 5.2rem;
    text-align: left;
}
.component_view .ethics .info_list {
    display: flex;
    gap: 1.6rem;
    margin-top: 5.2rem;
}
.component_view .ethics .info_list li {
    display: flex;
    gap: 2rem;
    width: 50%;
    padding: 4rem;
    background: #F3F3F3;
}
.component_view .ethics .info_list .title {
    display: block;
    width: 10rem;
    line-height: 1.35;
    font-size: 1.8rem;
}
.component_view .ethics .info_list .txt {
    width: calc(100% - 10rem);
    margin-top: 0;
    line-height: 1.35;
    color: #666;
    font-size: 1.8rem;
}
.component_view .ethics .info_list .txt a {
    font-weight: 400;
}
@media (max-width: 1919px) {
    .component_view .ethics {
        margin-top: calc(100vw * (60 / 1919));
    }
    .component_view .ethics .tab_content.tab1 {
        gap: calc(100vw * (100 / 1919));
    }
    .component_view .ethics h3 {
        font-size: calc(100vw * (32 / 1919));
    }
    .component_view .ethics .txt {
        margin-top: calc(100vw * (24 / 1919));
        font-size: calc(100vw * (18 / 1919));
    }
    .component_view .ethics .btn_area {
        margin-top: calc(100vw * (52 / 1919));
    }
    .component_view .ethics .info_list {
        gap: calc(100vw * (16 / 1919));
        margin-top: calc(100vw * (52 / 1919));
    }
    .component_view .ethics .info_list li {
        gap: calc(100vw * (20 / 1919));
        padding: calc(100vw * (40 / 1919));
    }
    .component_view .ethics .info_list .title {
        width: calc(100vw * (100 / 1919));
        font-size: calc(100vw * (18 / 1919));
    }
    .component_view .ethics .info_list .txt {
        width: calc(100% - calc(100vw * (100 / 1919)));
        font-size: calc(100vw * (18 / 1919));
    }
}
@media (max-width: 1180px) {
    .component_view .ethics {
        margin-top: calc(100vw * (60 / 1180));
    }
    .component_view .ethics .tab_content.tab1 {
        gap: calc(100vw * (100 / 1180));
    }
    .component_view .ethics h3 {
        font-size: calc(100vw * (32 / 1180));
    }
    .component_view .ethics .txt {
        margin-top: calc(100vw * (24 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }
    .component_view .ethics .btn_area {
        margin-top: calc(100vw * (52 / 1180));
    }
    .component_view .ethics .info_list {
        gap: calc(100vw * (16 / 1180));
        margin-top: calc(100vw * (52 / 1180));
    }
    .component_view .ethics .info_list li {
        gap: calc(100vw * (20 / 1180));
        padding: calc(100vw * (40 / 1180));
    }
    .component_view .ethics .info_list .title {
        width: calc(100vw * (100 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }
    .component_view .ethics .info_list .txt {
        width: calc(100% - calc(100vw * (100 / 1180)));
        font-size: calc(100vw * (20 / 1180));
    }
}
@media (max-width: 767px) {
    .component_view .ethics {
        margin-top: calc(100vw * (60 / 767));
    }
    .component_view .ethics .tab_content.tab1 {
        gap: calc(100vw * (100 / 767));
    }
    .component_view .ethics h3 {
        font-size: calc(100vw * (48 / 767));
    }
    .component_view .ethics .txt {
        margin-top: calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }
    .component_view .ethics .btn_area {
        text-align: left;
        margin-top: calc(100vw * (60 / 767));
    }
    .component_view .ethics .info_list {
        flex-direction: column;
        gap: calc(100vw * (16 / 767));
        margin-top: calc(100vw * (52 / 767));
    }
    .component_view .ethics .info_list li {
        gap: calc(100vw * (20 / 767));
        width: 100%;
        padding: calc(100vw * (40 / 767));
    }
    .component_view .ethics .info_list .title {
        width: calc(100vw * (130 / 767));
        font-size: calc(100vw * (32 / 767));
    }
    .component_view .ethics .info_list .txt {
        width: calc(100% - calc(100vw * (130 / 767)));
        font-size: calc(100vw * (32 / 767));
    }
}


/* ----------------------------------------------------------
   다운로드 버튼 / 다운로드 목록 (탭 콘텐츠 extra: dl_btn, dl_list)
   원본: about.css .about .btn_download.large (1178~1262행) + .about .download / .download_list (1437~1540행)
   → .component_view .ethics 스코프로 이식. 원본 미수정.
   ---------------------------------------------------------- */
.component_view .ethics .btn_download.large {
    min-width: 25rem;
    height: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 0;
    border-color: #D9D9D9;
    text-align: left;
    background: #fff;
    color: #000;
}
.component_view .ethics .btn_download.large .ico {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    height: 100%;
    word-break: break-word;
    padding-right: 3.2rem;
    transition: color .2s ease;
}
.component_view .ethics .btn_download.large .ico::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: url("../images/support/btn_down_black.svg") no-repeat center center / 100% 100%;
    transition: background .2s ease;
}
/* only pc hover */
@media (hover: hover) and (min-width: 1180px) {
    .component_view .ethics .btn_download.large:hover .ico {
        color: var(--point-color)
    }
    .component_view .ethics .btn_download.large:hover .ico::after {
        background-image: url("../images/support/btn_down_red.svg");
    }
}

@media (max-width: 1919px) {
    .component_view .ethics .btn_download.large {
        min-width: calc(100vw * (250 / 1919));
        padding-left: calc(100vw * (20 / 1919));
        padding-right: calc(100vw * (20 / 1919));
    }
    .component_view .ethics .btn_download.large .ico {
        padding-right: calc(100vw * (32 / 1919));
    }
    .component_view .ethics .btn_download.large .ico::after {
        width: calc(100vw * (20 / 1919));
        height: calc(100vw * (20 / 1919));
    }
    
}
@media (max-width: 1180px) {
    .component_view .ethics .btn_download.large {
        min-width: calc(100vw * (220 / 1180));
        padding: calc(100vw * (18 / 1180)) calc(100vw * (20 / 1180));
    }
    .component_view .ethics .btn_download.large .ico {
        padding-right: calc(100vw * (32 / 1180));
    }
    .component_view .ethics .btn_download.large .ico::after {
        width: calc(100vw * (20 / 1180));
        height: calc(100vw * (20 / 1180));
    }
    
}
@media (max-width: 767px) {
    .component_view .ethics .btn_download.large {
        min-width: calc(100vw * (200 / 767));
        padding: calc(100vw * (30 / 767)) calc(100vw * (40 / 767));
        border-width: calc(100vw * (2 / 767));
    }
    .component_view .ethics .btn_download.large .ico {
        padding-right: calc(100vw * (56 / 767));
    }
    .component_view .ethics .btn_download.large .ico::after {
        width: calc(100vw * (36 / 767));
        height: calc(100vw * (36 / 767));
    }
}

.component_view .ethics .download {
    margin-top: 4rem;
    padding: 4rem;
    background: #F3F3F3;
}
.component_view .ethics .download_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem 8rem;
}
.component_view .ethics .download_list li {
    position: relative;
    padding-left: 1rem;
    line-height: 1.6;
    font-size: 1.6rem;
    font-weight: 500;
}
.component_view .ethics .download_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.1rem;
    width: .4rem;
    height: .4rem;
    border-radius: 99rem;
    background: #000;
}
.component_view .ethics .download_list li a {
    color: #000;
}

@media (max-width: 1919px) {
    .component_view .ethics .download {
        margin-top: calc(100vw * (40 / 1919));
        padding: calc(100vw * (40 / 1919));
    }
    .component_view .ethics .download_list {
        gap: calc(100vw * (12 / 1919)) calc(100vw * (80 / 1919));
    }
    .component_view .ethics .download_list li {
        padding-left: calc(100vw * (10 / 1919));
        font-size: calc(100vw * (16 / 1919));
    }
    .component_view .ethics .download_list li::before {
        top: calc(100vw * (11 / 1919));
        width: 4px;
        height: 4px;
    }
}

@media (max-width: 1180px) {
    .component_view .ethics .download {
        margin-top: calc(100vw * (40 / 1180));
        padding: calc(100vw * (40 / 1180));
    }
    .component_view .ethics .download_list {
        gap: calc(100vw * (12 / 1180)) calc(100vw * (80 / 1180));
    }
    .component_view .ethics .download_list li {
        padding-left: calc(100vw * (10 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }
    .component_view .ethics .download_list li::before {
        top: calc(100vw * (11 / 1180));
        width: 4px;
        height: 4px;
    }
}

@media (max-width: 767px) {
    .component_view .ethics .download {
        margin-top: calc(100vw * (40 / 767));
        padding: calc(100vw * (40 / 767));
    }
    .component_view .ethics .download_list {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(100vw * (24 / 767)) calc(100vw * (80 / 767));
    }
    .component_view .ethics .download_list li {
        padding-left: calc(100vw * (20 / 767));
        font-size: calc(100vw * (28 / 767));
    }
    .component_view .ethics .download_list li::before {
        top: calc(100vw * (17 / 767));
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 650px) {
    .component_view .ethics .download_list li::before {
        top: calc(100vw * (16 / 650));
        width: 6px;
        height: 6px;
    }
}

@media (max-width: 430px) {
    .component_view .ethics .download_list li::before {
        top: calc(100vw * (11 / 430));
        width: 4px;
        height: 4px;
    }
}