@charset "UTF-8";

.roadmap {
    width: 1280px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    color: #333;
}

.roadmap thead tr th,
.roadmap thead tr td {
    border: 1px solid #b3b3b3;
    padding: 10px 5px;
    text-align: center;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

.roadmap thead tr span,
.roadmap thead tr strong {
    display: inline-block;
}

.fz12 {
    font-size: 12px !important;
}

.row2-col1 span {
    transform: translateY(-20px);
    display: inline-block;
}

.w-role {
    width: 81px;
}

.w-business {
    width: 173px;
}

.w-core {
    width: 173px;
}

.w-growth {
    width: 173 px;
}

.w-market {
    width: 78px;
}

.w-sales {
    width: 110px;
}

.role {
    padding: 0;
}

.role>div {
    padding: 18px 10px;
}

.arrow {

    background: #ffe45a;

    position: relative;

    font-weight: bold;
}

.arrow::after {

    content: "";

    position: absolute;

    bottom: -18px;

    left: 50%;

    transform: translateX(-50%);

    border-left: 18px solid transparent;

    border-right: 18px solid transparent;

    border-top: 18px solid #ffe45a;

}

.dot {
    position: relative;
}

.dot::before {

    content: "";

    width: 27px;

    height: 27px;

    border-radius: 50%;

    background: #ffd400;

    display: block;

    margin: auto;

}

.position-relative {
    position: relative;
}

.relative01 {
    width: 75px;
    height: 107px;
    position: absolute;
    top: -34%;
    left: 50%;
    transform: translateX(-50%);
    background: url(/company/corporate/philosophy/plan/img/bg-down.svg) center center no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.relative02 {
    transform: translateY(20px);
    display: inline-block;
}

.growth {
    background-color: #E6E6E6;
    width: 69px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}

.growth.highlight {
    background-color: #ffe100;
}

.growth .c-icon-mod {
    width: 10px;
    height: 10px;
    margin-right: 3px;
}

.growth .c-icon-mod img {
    display: block;
    vertical-align: middle;
}

.growth.highlight .c-icon-mod {
    width: 12px;
    height: 12px;
}

.role-col {
    background-color: #f2f2f2;
    font-weight: 500;
}

.c-table-responsive__inner--mod {
    overflow-x: scroll;
}

.c-table-responsive__inner--mod {
    overflow-x: auto;
}

.roadmap.c-table tbody tr td,
.roadmap.c-table tbody tr th {
    text-align: center;
    padding: 9.5px 5px;
    font-size: 14px;
    line-height: 1.5;
}

.role-col,
.biz-col {
    background-color: #f3f3f3;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
}

.roadmap.c-table tbody tr td.infor {
    text-align: right;
    font-size: 18px;
    font-weight: 700;
}
.square {
    width: 42px;
    height: 42px;
    background: #E6E6E6;
    position: absolute;
    text-indent: -9999px;
}
.row4-col5 .square,
.row8-col10 .square,
.row5-col5 .square {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.row6-col6 .square {
    width: 270px;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    z-index: -1;
}
.row7-col5 .square {
    width: 194px;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    z-index: -1;
}
.row2-col2 {
    background-color: #D0AB43;
    color: #fff;
}
.row3-col2 {
    background-color: #CF6252;
    color: #fff;
}
.row4-col2 {
    background-color: #239C8D;
    color: #fff;
}
.row5-col2 {
    background-color: #1B809F;
    color: #fff;
}
.row6-col2 {
    background-color: #1B2A50;
    color: #fff;
}
.row2-col2 span,
.row3-col2 span,
.row4-col2 span,
.row5-col2 strong,
.row6-col2 span {
    display: block;
    text-align: center;
    color: #fff !important;
    margin-top: 3px;
    font-weight: 500;
}
.bold-focus .highlight {
    font-weight: bold;
    background: #FFE100;
    background: linear-gradient(0deg,rgba(255, 225, 0, 1) 40%, rgba(255, 255, 255, 1) 40%);
}
.small-note {
    font-weight: 400;
}
.c-list--mod .c-list__marker {
    padding-top: 5px;
}
@media screen and (max-width: 1430px) {
    .c-table-responsive-note--mod {
        display: block !important;
    }

    .c-table-responsive__inner--mod {
        overflow-x: scroll;
        padding-right: 15px;
    }

    .c-table-responsive__inner--mod::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 100%) 0% 0% no-repeat;
        content: "";
        position: absolute;
        z-index: 10;
        top: 0;
        bottom: 0;
        right: 0;
        width: 20px;
        height: 100%;
    }

    .c-table-responsive__inner table[class*="c-table"] {
        width: 1240px;
        margin-top: 0;
    }
}
@media screen and (max-width: 519px) {
    .c-media-block--medium-reverse--mod .c-media-block__media {
        order: -1;
        margin-bottom: 32px;
        margin-top: 0;        
    }
    .c-media-block--medium-reverse--mod {
        display: flex;
        flex-direction: column;
    }
}