@charset "utf-8";

/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/

body:before {
    background-image: url('../images/index/main-photo.webp');
    height: 100vh;
    top: 0;
    background-position: 50%;
}

#main {
    padding: 369px 0 0;
    position: relative;
}


#main .inner {
    max-width: 1244px;
}

#main .wrapMain {
    position: relative;
}

#main .wrapMain:before {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.28) 100%);
    height: 275px;
    width: 100%;
    bottom: 0;
    left: 0;
}

#main .wrapMain .wrapTitleTop {
    margin-bottom: 140px;
}

#main .wrapMain .wrapTitleTop .titleTop {
    font-size: 72px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: -1px;
    letter-spacing: 7.3px;
    line-height: 1.2;
}

#main .wrapMain .wrapTitleTop .TitleTopEn {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1.3px;
}

#main .wrapMain .boxMain {
    position: relative;
    padding-bottom: 13vh;
}

#main .wrapMain .boxMain .titleMissionTop {
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
}

#main .wrapMain .boxMain .subMissionTop {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1.8px;
    margin-bottom: 27px;
}

#main .wrapMain .boxMain .txtMissionTop {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.55;
    letter-spacing: 0.9px;
    text-align: justify;
}

#main .wrapMain .boxMain .boxButton {
    text-align: left;
    margin-top: 0;
    position: absolute;
    bottom: 0;
}

#main .wrapMain .boxMain .boxButton a {}

#main .wrapMain .txtScroll {
    display: flex;
    width: auto;
    writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    position: absolute;
    right: 47px;
    top: 114px;
    height: 70%;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
}

#main .wrapMain .txtScroll:before {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    height: 89%;
    width: 1px;
    top: 90px;
    right: 50%;
    transform: translateX(-50%);
}

#main .mainSlider {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.71) 71%, rgba(255, 255, 255, 1) 100%);
    padding: 25px 0 172px;
}

#main .mainSlider .iframeSlider {}

#main .mainSlider .iframeSlider .sliderPhoto {
    width: 302px;
}

#main .mainSlider .iframeSlider .sliderPhoto .mainPhoto {
    margin: 0 15px;
    box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.1);
}

#main .mainSlider .iframeSlider .sliderPhoto:nth-child(2n) .mainPhoto {
    margin-top: 59px;
    margin-bottom: 10px;
}

#main .mainSlider .iframeSlider .sliderPhoto .mainPhoto img {
    aspect-ratio: 300/202;
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}

/* areaNewsTop */
.areaNewsTop {
    padding: 84px 0;
}

.areaNewsTop .inner {
    max-width: 1340px;
}

.areaNewsTop .newsList {
    margin-top: 66px;
    margin-bottom: 16px;
}

.areaNews .boxButton a {
    padding: 15px 48px;
}

.areaNews .boxButton a .txtButton {
    padding-right: 21px;
    letter-spacing: 0.5px;
}

.areaNews .boxButton a .txtButton::after {
    background: url(../images/common/icon-contact-ft.svg) no-repeat;
    background-size: 100%;
    width: 7px;
    height: 12px;
    top: 55%;
    transform: translateY(-50%);
    right: 8px;
    filter: brightness(0) invert(1);
}

.areaNews .boxButton a .txtButton::before {
    display: none;
}

.areaNewsTop .newsList>li {
    width: calc(100% / 3 - 18px);
    margin-bottom: 25px;
}

.areaNewsTop .newsList>li:not(:nth-child(3n)) {
    margin-right: 21px;
}

.areaNewsTop .newsList>li a {
    padding: 23px 24px 24px;
    box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.2);
}

.areaNewsTop .newsList>li a .newsPhoto {
    margin-bottom: 24px;
}

.areaNews .newsList>li a .listCat {
    margin-bottom: 5px;
}

.areaNewsTop .newsList>li a .listCat li {
    background: #bd8100;
}

.areaNewsTop .newsList>li a .newsPhoto img {
    aspect-ratio: 361/180;
}

.areaNewsTop .newsList>li a .newsName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 23px;
}

/* areaCompanyTop */
.areaCompanyTop {
    background: #fff;
    padding: 115px 0 120px;
}

.areaCompanyTop .wrapCompanyTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.areaCompanyTop .wrapCompanyTop .boxCompanyTop {
    width: 36%;
}

.areaCompanyTop .wrapCompanyTop .boxCompanyTop .txtCompanyTop {
    font-size: 16px;
    font-weight: 700;
    margin-top: 26px;
    line-height: 1.6;
    text-align: justify;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.areaCompanyTop .wrapCompanyTop .boxCompanyTop .boxButton {
    text-align: left;
}

.areaCompanyTop .wrapCompanyTop .boxCompanyTop .boxButton a {
    padding: 15px 48px;
}

.areaCompanyTop .wrapCompanyTop .companyTopPhoto {
    width: 60%;
    box-shadow: 40px 50px 30px rgba(0, 0, 0, 0.1);
    align-self: stretch;
}

.areaCompanyTop .wrapCompanyTop .companyTopPhoto img {
    aspect-ratio: 768/521;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 13px;
}

/* areaServiceTop */
.areaServiceTop {
    /* background: #ffffff; */
    margin-bottom: 156px;
}

.areaServiceTop .servicePhoto {
    filter: saturate(1) brightness(0.9);
}

.areaServiceTop .servicePhoto img {
    aspect-ratio: 1920 / 465;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 465px;
}


.areaServiceTop .inner {
    max-width: 1788px;
    margin-top: -160px;
    position: relative;
    padding: 0 30px;
}

.areaServiceTop .iframeService {
    background: #ffffff;
}

.areaServiceTop .wrapServiceTop {
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
    padding: 60px 20px 160px;
}

.areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .itemTitle {
    z-index: 1;
    padding-left: 0;
}

.areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .itemTitle::before {
    top: 4px;
    z-index: -1;
}

.areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .itemTitle .smallTitle {
    margin-left: 0px;
    margin-top: -5px;
}

.areaServiceTop .wrapServiceTop .boxServiceTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 66px;
}

.areaServiceTop .wrapServiceTop .boxServiceTop .serviceTopPhoto {
    width: 50%;
    align-self: stretch;
}

.areaServiceTop .wrapServiceTop .boxServiceTop .serviceTopPhoto img {
    aspect-ratio: 540/300;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.1);
}

.areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop {
    width: 45.6%;
    margin-top: -5px;
}

.areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .txtServiceTop {
    font-size: 16px;
    font-weight: 700;
    margin: 23px 0 49px;
    text-align: justify;
    letter-spacing: 1px;
    line-height: 1.6;
}

.areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .boxButton {
    text-align: left;
}

.areaServiceTop .itemTitle br {
    display: none;
}

/* areaContactTop */
.areaContactTop {
    background: rgb(49, 49, 49);
    padding: 95px 0 121px;
}

.areaContactTop .wrapContactTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.areaContactTop .wrapContactTop .subContactTop {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.6;
    letter-spacing: 1.6px;
    margin-right: 20px;
    width: calc(100% - 310px);
}

.areaContactTop .wrapContactTop .boxButton {
    text-align: right;
    margin: 24px 0 0 auto;
}

/* areaKnowled */
.areaKnowled {
    padding: 192px 0 193px;
}

.areaKnowled .inner {
    max-width: 1340px;
}

.areaKnowled .newsList {
    margin-top: 113px;
    margin-bottom: 19px;
}

.areaKnowled .newsList>li {
    width: calc(100% / 3 - 17px);
    margin-bottom: 21px;
}

.areaKnowled .newsList>li:not(:nth-child(3n)) {
    margin-right: 20px;
}

.areaKnowled .newsList>li a .newsPhoto img {
    aspect-ratio: 318 / 158;
}

.areaKnowled .newsList>li a .listCat {
    margin-bottom: 7px;
}

.areaKnowled .newsList>li a .newsName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1120px) and (min-width: 769px) {
    .areaCompanyTop .wrapCompanyTop .boxCompanyTop {
        width: 45%;
    }

    .areaCompanyTop .wrapCompanyTop .companyTopPhoto {
        width: 50%;
    }

}

@media (max-width: 1000px) and (min-width: 769px) {
    .areaContactTop .wrapContactTop .subContactTop {
        font-size: clamp(24px, 3vw, 30px);
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .serviceTopPhoto {
        width: 45%;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop {
        width: 50%;
    }

}

@media (max-width: 950px) and (min-width: 769px) {
    .areaContactTop .wrapContactTop .subContactTop {
        font-size: clamp(24px, 3vw, 30px);
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .serviceTopPhoto {
        width: 45%;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop {
        width: 50%;
    }

    .areaServiceTop .itemTitle br {
        display: block;
    }

}

@media (max-width: 900px) {

    .areaNewsTop .newsList>li,
    .areaKnowled .newsList li {
        width: calc(100% / 2 - 15px);
        margin-bottom: 30px;
    }

    .areaNewsTop .newsList>li:not(:nth-child(3n)),
    .areaKnowled .newsList>li:not(:nth-child(3n)) {
        margin-right: 0;
    }

    .areaNewsTop .newsList>li:not(:nth-child(2n)),
    .areaKnowled .newsList>li:not(:nth-child(2n)) {
        margin-right: 30px;
    }
}

@media (max-width: 768px) {

    body:before {
        background-image: url('../images/index/main-photo.webp');
        height: 100vh;
        top: 0;
    }

    #main {
        padding: 167px 0 0;
        position: relative;
    }


    #main .inner {
        padding: 0 49px;
    }

    #main .wrapMain {
        position: relative;
    }

    #main .wrapMain:before {
        content: "";
        position: absolute;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.28) 100%);
        height: 275px;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    #main .wrapMain .wrapTitleTop {
        margin-bottom: 144px;
    }

    #main .wrapMain .wrapTitleTop .titleTop {
        margin-bottom: 1px;
        letter-spacing: 3.9px;
        line-height: 1.1;
        font-size: clamp(40px, 10.6vw, 46px);
    }

    #main .wrapMain .wrapTitleTop .TitleTopEn {
        letter-spacing: 0.9px;
        font-size: clamp(18px, 4.8vw, 22px);
    }

    #main .wrapMain .boxMain {
        padding-bottom: 0;
    }

    #main .wrapMain .boxMain .titleMissionTop {
        font-size: clamp(14px, 3.7vw, 18px);
        margin-bottom: 0px;
    }

    #main .wrapMain .boxMain .subMissionTop {
        letter-spacing: 0.8px;
        margin-bottom: 24px;
        font-size: clamp(18px, 4.8vw, 22px);
    }

    #main .wrapMain .boxMain .txtMissionTop {
        line-height: 1.6;
        letter-spacing: 1px;
        font-size: clamp(12px, 3.2vw, 16px);
        margin-bottom: 93px;
    }

    #main .wrapMain .boxMain .boxButton {
        text-align: left;
        margin-top: 0;
        position: initial;
        bottom: 0;
    }

    #main .wrapMain .boxMain .boxButton a {
        padding: 14px 48px 15px 48px;
    }

    #main .wrapMain .txtScroll {
        right: 3vw;
        top: 55vw;
        top: 204px;
        letter-spacing: 1.5px;
        font-size: clamp(10px, 2.6vw, 14px);
        top: clamp(204px, 54vw, 210px);
        right: 11px;
        right: clamp(11px, 3vw, 25px);
    }

    #main .wrapMain .txtScroll:before {
        top: 20vw;
        right: 48%;
        transform: translateX(-50%);
        top: 76px;
        top: clamp(76px, 20vw, 100px);
        height: 70%;
    }

    #main .mainSlider {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.71) 71%, rgba(255, 255, 255, 1) 100%);
        padding: 85px 0 64px;
        padding: 14vw 0 15vw;
    }

    #main .mainSlider .iframeSlider {}

    #main .mainSlider .iframeSlider .sliderPhoto {
        width: 217px;
    }

    #main .mainSlider .iframeSlider .sliderPhoto .mainPhoto {
        margin: 0 15px;
        box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
    }

    #main .mainSlider .iframeSlider .sliderPhoto:nth-child(2n) .mainPhoto {
        margin-top: 38px;
    }

    #main .mainSlider .iframeSlider .sliderPhoto .mainPhoto img {
        aspect-ratio: 300/202;
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;
    }

    /* areaNewsTop */
    .areaNewsTop {
        padding: 71px 0 12.5vw;
    }

    .areaNewsTop .inner {
        max-width: 1340px;
    }

    .areaNewsTop .newsList {
        margin-top: 66px;
        margin-bottom: 71px;
    }

    .areaNewsTop .newsList>li a {
        padding: 23px 24px 25px;
        box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.2);
    }

    .areaNewsTop .newsList>li a .newsPhoto {
        margin-bottom: 24px;
    }

    .areaNews .newsList>li a .listCat {
        margin-bottom: 16px;
    }

    .areaNewsTop .newsList>li a .listCat li {
        background: #bd8100;
    }

    .areaNewsTop .newsList>li a .newsPhoto img {
        aspect-ratio: 279 / 180;
    }

    .areaNewsTop .newsList>li a .newsName {
        margin-bottom: 24px;
    }

    .areaNews .boxButton a {
        padding: 15px 47.5px 14px;
        font-size: clamp(12px, 3.2vw, 14px);
    }

    /* areaCompanyTop */
    .areaCompanyTop {
        padding: 29px 0 96px;
        padding: 12.9vw 0 25.7vw;
    }

    .areaCompanyTop .wrapCompanyTop {
        flex-direction: column-reverse;
    }

    .areaCompanyTop .wrapCompanyTop .boxCompanyTop {
        width: 100%;
        padding: 0 24px;
    }

    .areaCompanyTop .wrapCompanyTop .boxCompanyTop .txtCompanyTop {
        font-size: clamp(14px, 2.5vw, 18px);
        margin-top: 24px;
        line-height: 1.6;
        letter-spacing: 1px;
        margin-bottom: 26px;
        margin: 6.2vw 0 6.9vw;
    }

    .areaCompanyTop .wrapCompanyTop .boxCompanyTop .txtCompanyTop br {
        display: none;
    }

    .areaCompanyTop .wrapCompanyTop .boxCompanyTop .boxButton {
        text-align: left;
    }

    .areaCompanyTop .wrapCompanyTop .boxCompanyTop .boxButton a {
        padding: 14px 48px 15px;
    }

    .areaCompanyTop .wrapCompanyTop .companyTopPhoto {
        width: 100%;
        margin-bottom: 48px;
        margin-bottom: 13vw;
    }

    .areaCompanyTop .wrapCompanyTop .companyTopPhoto img {
        aspect-ratio: 768/564;
        border-radius: 10px;
    }

    /* areaServiceTop */
    .areaServiceTop {
        margin-bottom: 159px;
    }

    .areaServiceTop .servicePhoto {}

    .areaServiceTop .servicePhoto img {
        aspect-ratio: 1920 / 465;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
        min-height: 465px;
    }


    .areaServiceTop .inner {
        width: 100%;
        padding: 0 5.1vw;
    }

    .areaServiceTop .wrapServiceTop {
        padding: 10.7vw 20px;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .itemTitle {
        z-index: 1;
        padding-left: 0;
        font-size: clamp(24px, 6.4vw, 28px);
        letter-spacing: 0;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .itemTitle::before {
        top: 2px;
        z-index: -1;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .itemTitle .smallTitle {
        margin-left: 0px;
        margin-top: -3px;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop {
        margin-top: 66px;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .serviceTopPhoto img {
        aspect-ratio: 540/436;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop {
        margin-top: -5px;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .txtServiceTop {
        margin: 22px 0 23px;
        letter-spacing: 1px;
        line-height: 1.6;
        font-size: clamp(14px, 2.5vw, 18px);
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop .boxButton {
        text-align: left;
    }

    /* areaContactTop */
    .areaContactTop {
        background: rgb(49, 49, 49);
        padding: 47px 0 48px;
    }

    .areaContactTop .wrapContactTop .subContactTop {
        line-height: 1.65;
        letter-spacing: 0.8px;
        margin-right: 20px;
        text-align: left;
        font-size: clamp(16px, 4.2vw, 20px);
    }

    .areaContactTop .wrapContactTop .boxButton {
        text-align: center;
        margin: 0 auto 0;
    }

    /* areaKnowled */
    .areaNews.areaKnowled {
        padding: 96px 0 96px;
    }

    .areaKnowled .inner {
        max-width: 1340px;
    }

    .areaKnowled .newsList {
        margin-top: 65px;
        margin-bottom: 71px;
    }

    .areaNews .newsList>li a .newsPhoto {
        margin-bottom: 24px;
    }

    .areaKnowled .newsList>li a .newsPhoto img {
        aspect-ratio: 318 / 205;
    }

    .areaKnowled .newsList>li a .listCat {
        margin-bottom: 18px;
    }

    .areaNews .newsList>li a .listCat li {
        padding: 0.8vw 3.3vw 0.6vw 3.3vw;
        width: auto;
    }

    .areaKnowled .newsList>li a .newsName {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .areaKnowled .boxButton a .txtButton:after {
        content: "";
        position: absolute;
        background: url(../images/common/icon-contact-ft.svg) no-repeat;
        background-size: 100%;
        width: 7px;
        height: 12px;
        top: 55%;
        transform: translateY(-50%);
        right: 8px;
        filter: brightness(0) invert(1);
    }

    .areaKnowled .boxButton a .txtButton:before {
        display: none;
    }

    .areaKnowled .boxButton a {
        font-size: clamp(12px, 3.2vw, 14px);
        padding: 14px 48px 15px;
    }
}

@media (max-width: 540px) {
    .areaServiceTop .wrapServiceTop .boxServiceTop {
        margin-top: 66px;
        flex-direction: column;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .serviceTopPhoto {
        width: 100%;
        margin-bottom: 51px;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .serviceTopPhoto img {
        aspect-ratio: 540/436;
    }

    .areaServiceTop .wrapServiceTop .boxServiceTop .contentServiceTop {
        width: 100%;
        margin-top: -5px;
    }

    .areaContactTop .wrapContactTop {
        flex-direction: column;
    }

    .areaContactTop .wrapContactTop .subContactTop {
        margin-right: 0;
        width: 100%;
        text-align: center;
    }

    .areaContactTop .wrapContactTop .boxButton {
        text-align: center;
        margin: 48px auto 0;
    }
}

@media (max-width: 430px) {

    .areaNewsTop .newsList>li,
    .areaKnowled .newsList>li {
        width: 100%;
        margin-right: 0;
    }

    .areaNewsTop .newsList>li:last-child,
    .areaKnowled .newsList>li:last-child {
        margin-bottom: 0;
    }

    .areaNews .newsList>li:not(:last-child),
    .areaKnowled .newsList>li:not(:last-child) {
        margin-bottom: 51px;
    }

    .areaNewsTop .newsList>li:not(:nth-child(3n)),
    .areaKnowled .newsList>li:not(:nth-child(3n)) {
        margin-right: 0;
    }

    .areaNewsTop .newsList>li:not(:nth-child(2n)),
    .areaKnowled .newsList>li:not(:nth-child(2n)) {
        margin-right: 0;
    }

}