/* 탭 콘텐츠(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;
    }
}


/* ----------------------------------------------------------
   wysiwyg 본문(.body) 콘텐츠 타이포·표 (기본 스타일용)
   원본: comp-section.css .component_view .comp_section .content 규칙
   → .component_view .ethics .body 스코프로 이식. 원본 미수정.
   (섹션 스타일(.comp_section)은 기존 comp-section.css 규칙이 그대로 적용됨)
   ---------------------------------------------------------- */
.component_view .ethics .body .txt,
.component_view .ethics .body p {
    margin-top: 1.2rem;
    color: #000;
    line-height: 1.6;
    font-size: 1.8rem;
    font-weight: 600;
}
.component_view .ethics .body .txt:first-child,
.component_view .ethics .body p:first-child {
    margin-top: 0;
}
.component_view .ethics .body .txt a,
.component_view .ethics .body p a {
    position: relative;
    color: #2A66FF;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.component_view .ethics .body .desc {
    margin-top: 6rem;
    line-height: 1.6;
    font-size: 1.8rem;
    font-weight: 500;
}
.component_view .ethics .body .desc:first-child {
    margin-top: 0;
}
.component_view .ethics .body .shgroup {
    margin-top: 8rem;
    padding: 2.4rem 2.15rem;
    background: #F3F3F3;
}
.component_view .ethics .body .shgroup + .txt,
.component_view .ethics .body .shgroup + p {
    margin-top: 4rem;
}
.component_view .ethics .body .shgroup h4 {
    line-height: 1.25;
    font-size: 2rem;
}
.component_view .ethics .body h5 {
    position: relative;
    margin-top: 5rem;
    padding-left: 1.6rem;
    line-height: 1.25;
    font-size: 2rem;
}
.component_view .ethics .body h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    width: .4rem;
    height: 1.4rem;
    background: var(--point-color);
}
.component_view .ethics .body h5:first-child {
    margin-top: 0;
}
@media (max-width: 1919px) {
    .component_view .ethics .body .txt,
    .component_view .ethics .body p {
        margin-top: calc(100vw * (12 / 1919));
        font-size: calc(100vw * (16 / 1919));
    }
    .component_view .ethics .body .desc {
        margin-top: calc(100vw * (60 / 1919));
        font-size: calc(100vw * (18 / 1919));
    }
    .component_view .ethics .body .shgroup {
        margin-top: calc(100vw * (80 / 1919));
        padding: calc(100vw * (24 / 1919)) calc(100vw * (21.5/ 1919));
    }
    .component_view .ethics .body .shgroup + .txt,
    .component_view .ethics .body .shgroup + p {
        margin-top: calc(100vw * (40 / 1919));
    }
    .component_view .ethics .body .shgroup h4 {
        font-size: calc(100vw * (20 / 1919));
    }
    .component_view .ethics .body h5 {
        margin-top: calc(100vw * (50 / 1919));
        padding-left: calc(100vw * (16 / 1919));
        font-size: calc(100vw * (20 / 1919));
    }
    .component_view .ethics .body h5::before {
        top: calc(100vw * (5 / 1919));
        width: calc(100vw * (4 / 1919));
        height: calc(100vw * (14 / 1919));
    }
}
@media (max-width: 1180px) {
    .component_view .ethics .body .txt,
    .component_view .ethics .body p {
        margin-top: calc(100vw * (12 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }
    .component_view .ethics .body .desc {
        margin-top: calc(100vw * (24 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }
    .component_view .ethics .body .desc:first-child {
        margin-top: calc(100vw * (24 / 1180));
    }
    .component_view .ethics .body .shgroup {
        margin-top: calc(100vw * (80 / 1180));
        padding: calc(100vw * (20 / 1180)) calc(100vw * (24/ 1180));
    }
    .component_view .ethics .body .shgroup + .txt,
    .component_view .ethics .body .shgroup + p {
        margin-top: calc(100vw * (40 / 1180));
    }
    .component_view .ethics .body .shgroup h4 {
        font-size: calc(100vw * (22 / 1180));
    }
    .component_view .ethics .body h5 {
        margin-top: calc(100vw * (50 / 1180));
        padding-left: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (22 / 1180));
    }
    .component_view .ethics .body h5:first-child {
        margin-top: calc(100vw * (50 / 1180));
    }
    .component_view .ethics .body h5::before {
        top: calc(100vw * (5 / 1180));
        width: calc(100vw * (4 / 1180));
        height: calc(100vw * (14 / 1180));
    }
}
@media (max-width: 767px) {
    .component_view .ethics .body .txt,
    .component_view .ethics .body p {
        margin-top: calc(100vw * (16 / 767));
        line-height: 1.5;
        font-size: calc(100vw * (28 / 767));
    }
    .component_view .ethics .body .desc {
        margin-top: calc(100vw * (60 / 767));
        font-size: calc(100vw * (32 / 767));
    }
    .component_view .ethics .body .desc:first-child {
        margin-top: calc(100vw * (40 / 767));
    }
    .component_view .ethics .body .shgroup {
        margin-top: calc(100vw * (100 / 767));
        padding: calc(100vw * (45.5 / 767)) calc(100vw * (40/ 767));
    }
    .component_view .ethics .body .shgroup + .txt,
    .component_view .ethics .body .shgroup + p {
        margin-top: calc(100vw * (40 / 767));
    }
    .component_view .ethics .body .shgroup h4 {
        font-size: calc(100vw * (36 / 767));
    }
    .component_view .ethics .body h5 {
        margin-top: calc(100vw * (50 / 767));
        padding-left: calc(100vw * (24 / 767));
        font-size: calc(100vw * (36 / 767));
    }
    .component_view .ethics .body h5::before {
        top: calc(100vw * (10 / 767));
        width: calc(100vw * (8 / 767));
        height: calc(100vw * (24 / 767));
    }
    .component_view .ethics .body h5:first-child {
        margin-top: calc(100vw * (50 / 767));
    }
}

/* wysiwyg 표 (구글시트 붙여넣기: table[data-sheets-root]) — comp-section.css 규칙 이식 */
.component_view .ethics .body table[data-sheets-root] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    margin-top: 2.4rem;
    margin-bottom: 1rem;
    border: none;
}
.component_view .ethics .body table[data-sheets-root] col {
    width: auto !important;
}
.component_view .ethics .body table[data-sheets-root] tbody tr:first-child td {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    vertical-align: middle;
    padding: 1.6rem 1rem;
    color: #000;
    background-color: #F6F6F6;
    border: 0.1rem solid #D9D9D9;
}
.component_view .ethics .body table[data-sheets-root] tbody td {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: left;
    vertical-align: middle;
    padding: 1.2rem 1rem;
    color: #000;
    border: 0.1rem solid #D9D9D9;
}
.component_view .ethics .body table[data-sheets-root] td strong {
    font-weight: 700;
}
.component_view .ethics .body table[data-sheets-root] td em {
    font-style: italic;
}
.component_view .ethics .body table[data-sheets-root] td u {
    text-decoration: underline;
}
.component_view .ethics .body table[data-sheets-root] td div {
    margin: 0;
}
@media (max-width: 1919px) {
    .component_view .ethics .body table[data-sheets-root] {
        margin-top: calc(100vw * (24 / 1919));
    }
    .component_view .ethics .body table[data-sheets-root] tbody tr:first-child td {
        font-size: calc(100vw * (16 / 1919));
        padding: calc(100vw * (16 / 1919)) calc(100vw * (10 / 1919));
        border: calc(100vw * (1 / 1919)) solid #D9D9D9;
    }
    .component_view .ethics .body table[data-sheets-root] tbody td {
        font-size: calc(100vw * (16 / 1919));
        padding: calc(100vw * (12 / 1919)) calc(100vw * (10 / 1919));
        border: calc(100vw * (1 / 1919)) solid #D9D9D9;
    }
}
@media (max-width: 1180px) {
    .component_view .ethics .body table[data-sheets-root] tbody tr:first-child td,
    .component_view .ethics .body table[data-sheets-root] tbody td {
        font-size: calc(100vw * (16 / 1180));
        padding: calc(100vw * (10 / 1180)) calc(100vw * (10 / 1180));
        border: calc(100vw * (1 / 1180)) solid #D9D9D9;
    }
}
@media (max-width: 767px) {
    .component_view .ethics .body table[data-sheets-root] {
        min-width: 60rem;
    }
    .component_view .ethics .body table[data-sheets-root] tbody tr:first-child td,
    .component_view .ethics .body table[data-sheets-root] tbody td {
        font-size: calc(100vw * (28 / 767));
        padding: calc(100vw * (20 / 767)) calc(100vw * (10 / 767));
        border: calc(100vw * (1 / 767)) solid #D9D9D9;
    }
}

/* wysiwyg 점 목록(.dot_list) — comp-section.css 규칙 이식 (점은 ::before 로 그림) */
.component_view .ethics .body .dot_list {
    margin-top: 2.4rem;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.component_view .ethics .body .dot_list li {
    position: relative;
    margin-top: .4rem;
    padding-left: 1.1rem;
    line-height: 1.6;
    font-size: 1.6rem;
    list-style: none;
}
.component_view .ethics .body .dot_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: .5rem;
    height: .5rem;
    border-radius: 99rem;
}
.component_view .ethics .body .dot_list li:first-child {
    margin-top: 0;
}
.component_view .ethics .body .dot_list.black li {
    color: #000;
}
.component_view .ethics .body .dot_list.black li::before {
    background: #000;
}
.component_view .ethics .body .dot_list.gray li {
    color: #666;
}
.component_view .ethics .body .dot_list.gray li::before {
    background: #666;
}
@media (max-width: 1919px) {
    .component_view .ethics .body .dot_list {
        margin-top: calc(100vw * (24 / 1919));
    }
    .component_view .ethics .body .dot_list li {
        margin-top: calc(100vw * (4 / 1919));
        padding-left: calc(100vw * (11 / 1919));
        font-size: calc(100vw * (16 / 1919));
    }
    .component_view .ethics .body .dot_list li::before {
        top: calc(100vw * (10 / 1919));
        width: 5px;
        height: 5px;
    }
}
@media (max-width: 1600px) {
    .component_view .ethics .body .dot_list li::before {
        top: calc(100vw * (10/ 1600));
        width: 3px;
        height: 3px;
    }
}
@media (max-width: 1180px) {
    .component_view .ethics .body .dot_list {
        margin-top: calc(100vw * (8 / 1180));
    }
    .component_view .ethics .body .dot_list li {
        margin-top: calc(100vw * (4 / 1180));
        padding-left: calc(100vw * (11 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }
    .component_view .ethics .body .dot_list li::before {
        top: calc(100vw * (12 / 1180));
        width: 5px;
        height: 5px;
    }
}
@media (max-width: 1024px) {
    .component_view .ethics .body .dot_list li::before {
        top: calc(100vw * (11 / 1024));
        width: 3px;
        height: 3px;
    }
}
@media (max-width: 767px) {
    .component_view .ethics .body .dot_list {
        margin-top: calc(100vw * (12 / 767));
    }
    .component_view .ethics .body .dot_list li {
        margin-top: calc(100vw * (8 / 767));
        padding-left: calc(100vw * (20 / 767));
        font-size: calc(100vw * (28 / 767));
    }
    .component_view .ethics .body .dot_list li::before {
        top: calc(100vw * (18 / 767));
        width: 8px;
        height: 8px;
    }
}
@media (max-width: 650px) {
    .component_view .ethics .body .dot_list li::before {
        top: calc(100vw * (14 / 650));
        width: 6px;
        height: 6px;
    }
}
@media (max-width: 430px) {
    .component_view .ethics .body .dot_list li {
        padding-left: calc(100vw * (10 / 430));
    }
    .component_view .ethics .body .dot_list li::before {
        top: calc(100vw * (11 / 430));
        width: 4px;
        height: 4px;
    }
}