
.companyInfoArea {
    margin-top: 48px;
}
.companyInfoArea .companyInfoContainer {
    display: flex;
}
.companyInfoArea .addressImg {
    max-width: 433.8px;
    width: 100%;
    margin-right: 29px;
}
.companyInfoArea .infoContent  {
    padding-top: 13px;
    width: 100%;
}
.contentTitle {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.37;
    color: #000;
    padding-bottom: 7px;
    border-bottom: 1px solid #e6e6e6;
    padding-left: 23px;
    margin-right: 20.7px;
    letter-spacing: 0.6px;
}
.companyInfoArea .infoContent .infoContext{
    font-size: 16.12px;
    line-height: 1.62;
    margin-top: 28px;
    padding-left: 23px;
}
.companyInfoArea .infoContent .infoContext .infoLine {
    display: flex;
    margin-bottom: 14.8px;
}
.companyInfoArea .infoContent .infoContext .infoLine:last-child {
    margin-bottom: 0;
}
.companyInfoArea .infoContent .infoContext .infoLine .infoTitle{
    font-weight: 600;
    margin-right: 15px;
    width: 23%;
}
.companyInfoArea .infoContent .infoContext .infoLine .infoText {
    align-self: flex-start;
}
.companyInfoArea .messageContainer {
    margin-top: 133px;
}
.companyInfoArea .messageContainer .contentTitle {
    letter-spacing: 1.9px;
    padding-bottom: 16px;
}
.companyInfoArea .messageContainer .messageContent {
    display: flex;
    margin-top: 10px;
}
.companyInfoArea .messageContainer .messageContent .messageImg{
    max-width: 433.8px;
    width: 100%;
    margin-right: 62px;
    margin-top: 4px;
}
.companyInfoArea .messageContainer .messageContent .messageTxt {
    width: 100%;
    padding-left: 22px;
    padding-top: 11px;
    padding-right: 25px;
    font-size: 16.13px;
    line-height: 2.125;
    text-align: justify;
}
.companyInfoArea .messageContainer .messageContent .messageImg .imgTxt {
    display: block;
    width: 100%;
    text-align: end;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.1px;
    margin-top: 11px;
}
.timeLineArea {
    margin-top: 149px;
    padding-bottom: 75px;
}
.timeLineArea .timeLineTitle {
    background: #333333;
    color: white;
    font-size: 24.9px;
    font-weight: 600;
    line-height: 1.625;
    padding: 5px 0 13px 70px;
}
.timeLineArea .timeLineContent {
    padding: 58px 40px 86px 70px;
    background: white;
}
.timeLineArea .timeLineContent .timeLine {
    display: flex;
    width: 100%;
}
.timeLineArea .timeLineContent .timeLine .time {
    width: 19%;
}
.timeLineArea .timeLineContent .timeLine .time .timeBlock {
    max-width: 177.5px;
    width: 100%;
    color: white;
    background: #333333;
    font-size: 24.9px;
    font-size: 24.9px;
    padding: 9px 10px 14px;
    text-align: center;
    letter-spacing: 2.1px;
    font-weight: 600;
}
.timeLineArea .timeLineContent .timeLine:not(:first-child) .time {
    padding-top: 82px;
}
.timeLineArea .timeLineContent .timeLine .timeLineTxt {
    width: auto;
    padding-left: 93px;
    font-size: 16px;
    line-height: 1.625;
    padding-top: 18px;
    position: relative;
}
.timeLineArea .timeLineContent .timeLine:not(:first-child) .timeLineTxt {
    padding-top: 99.7px;
}
.timeLineArea .timeLineContent .timeLine .timeLineTxt::before {
    content: "";
    display: block;
    position: absolute;
    width: 28.16px;
    height: 28.16px;
    background: #333;
    border-radius: 50%;
    left: 36px;
    top: 29.1%;
    transform: translateY(-50%);
}
.timeLineArea .timeLineContent .timeLine:not(:first-child) .timeLineTxt::before {
    top: 60%;
}
.timeLineArea .timeLineContent .timeLine .timeLineTxt::after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 1px;
    background: #333;
    left: 49px;
    top: 0;
    transform: translateX(50%);
}
.timeLineArea .timeLineContent .timeLine:first-child .timeLineTxt::after {
    height: 71%;
    top: 29%;
}
.timeLineArea .timeLineContent .timeLine:last-child .timeLineTxt::after {
    height: 64%;
    top: unset;
    bottom: 36%;
}
.timeLineArea .timeLineContent .timeLine .timeLineTxt .tlTitle {
    font-weight: 600;
    width: 100%;
}
.timeLineArea .timeLineContent .timeLine .timeLineTxt .tlText {
    margin-top: 9px;
    text-align: justify;
} 

@media (min-width: 1281px) {
    .pageTitle::before {
        left: calc((100% - 1291px) / 2);
    }
}
@media (max-width: 1280px) {
    .pageTitle::before {
        left: -11px;
    }
}
@media (min-width: 769px) {
    .pageTitle {
        position: relative;
    }
    .pageTitle::before {
        position: absolute;
        content: "";
        display: block;
        background: url(../images/faq/MF-top.png) center no-repeat;
        background-size: 100%;
        width: 156px;
        height: 131px;
        top: 6px;

    }
    .companyInfoArea .infoContent .infoContext .infoLine .infoText .tel {
        pointer-events: none;
    }
}
@media (max-width:768px) {
    .companyInfoArea .companyInfoContainer {
        flex-direction: column; 
    }
    .pageTitle {
        padding-bottom: 9.38vw;
    }
    .contentTitle {
        font-size: clamp(17.5px , 4vw, 24px);
        padding-left: 0;
        margin-right: 0;
    }
    .companyInfoArea {
        margin-top: clamp(80px, 14.2vw, 108px);
    }
    .companyInfoArea .infoContent {
        padding-top: 8vw;
    }
    .companyInfoArea .infoContent .infoContext {
        padding-left: 0;
    }
    .companyInfoArea .infoContent .infoContext .infoLine {
        font-size: clamp(14px , 3.5vw, 18px);
    }
    .companyInfoArea .infoContent .infoContext .infoLine .infoTitle{
        width: 20%;
    }

    .companyInfoArea .addressImg {
        max-width: unset;
    }
    .companyInfoArea .messageContainer {
        margin-top: 15vw;
    }
    .companyInfoArea .messageContainer .contentTitle {
        padding-bottom: 10px;
    }
    .companyInfoArea .messageContainer .messageContent {
        flex-direction: column-reverse;
    }
    .companyInfoArea .messageContainer .messageContent .messageImg {
        max-width: 100%;
    }
    .companyInfoArea .messageContainer .messageContent .messageImg img {
        width: 100%;
    }
    .companyInfoArea .messageContainer .messageContent .messageImg .imgTxt {
        font-size: clamp(14px , 3.5vw, 18px);
    }

    .companyInfoArea .messageContainer .messageContent .messageTxt {
        padding-left: 0;
        padding-right: 0;
        padding-top: 4.03vw;
        font-size: clamp(14px , 3.5vw, 18px);
    }
    .timeLineArea {
        margin-top: 15vw;
        padding-bottom: 13vw;
    }
    .timeLineArea .timeLineTitle {
        padding: 4.8px 16px;
        font-size: clamp(18px , 4vw, 24px);
    }
    .timeLineArea .timeLineContent {
        padding: 6vw 5.33vw 6vw 0;
    }
    .timeLineArea .timeLineContent .timeLine {
        flex-direction: column;
    }
    .timeLineArea .timeLineContent .timeLine .time {
        width: 100%;
        position: relative;
    }
    .timeLineArea .timeLineContent .timeLine .time::before {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 1px;
        background: #333;
        left: 4.8vw;
        top: 0;
        transform: translateX(60%);
    }
    .timeLineArea .timeLineContent .timeLine:first-child .time::before {
        height: 50%;
        top: 50%;
    }
    .timeLineArea .timeLineContent .timeLine .time .timeBlock {
        margin-left: 9.5vw;
        font-size: clamp(18px, 4vw, 24px);
        max-width: clamp(145px, 26vw, 200px);
        width: 100%;
        padding: 1.87vw 2.67vw 2.4vw;
        padding: clamp(7px, 1.3vw, 10px) 2.67vw clamp(9px, 1.6vw, 12px);
    }
    .timeLineArea .timeLineContent .timeLine .timeLineTxt {
        padding-left: 9.5vw;
        font-size: clamp(14px, 3.5vw, 18px);
    }
    .timeLineArea .timeLineContent .timeLine .timeLineTxt::before {
        left: 5.33vw;
        transform: translateX(-50%);
        display: none;
    }
    .timeLineArea .timeLineContent .timeLine .timeLineTxt::after {
        left: 4.8vw;
    }
    .timeLineArea .timeLineContent .timeLine:not(:first-child) .time {
        padding-top: 6vw;
        padding-top: clamp(30px, 8vw, 50px);
    }
    .timeLineArea .timeLineContent .timeLine:not(:first-child) .timeLineTxt {
        padding-top: 6vw;
        padding-top: clamp(22.5px, 6vw, 30px);
    }
    .timeLineArea .timeLineContent .timeLine .time::after {
        content: "";
        display: block;
        position: absolute;
        width: clamp(18.9px, 5.1vw, 26.08px);
        height: clamp(18.9px, 5.1vw, 26.08px);
        background: #333;
        border-radius: 50%;
        left: calc(4.8vw + 2px);
        top: 67%;
        transform: translateY(-50%) translateX(-53%);
    }
    .timeLineArea .timeLineContent .timeLine:first-child .time::after {
        top: 50%;
    }
    .timeLineArea .timeLineContent .timeLine:first-child .timeLineTxt::after {
        height: 100%;
        top: 0;
    }
    .timeLineArea .timeLineContent .timeLine:last-child .timeLineTxt::after {
        display: none;
    }
    .timeLineArea .timeLineContent .timeLine:last-child .time::before {
        height: 71%;
    }
    .companyInfoArea .messageContainer .messageContent .messageImg {
        margin: 0 auto;
    }
    .companyInfoArea .messageContainer .messageContent .messageImg .imgTxt {
        text-align: center;
    }
}