/*=======================================
    index
=======================================*/

/*---------------------------
   image_url
---------------------------*/

/*-- top-about-images --*/

    .top-about-pc{
        background-image: url(../../assets/images/index/about_image_pc.jpg);
    }

    .top-about-sp{
        background-image: url(../../assets/images/index/about_image_sp.jpg);
    }

/*-- careers-images --*/

    .top-carrers-pc{
        background-image: url(../../assets/images/index/4_careers_1.jpg);
    }

    .top-carrers-sp{
        background-image: url(../../assets/images/index/4_careers_1_sp.jpg);
    }

/*-- contact-images --*/

    .top-contact-pc{
        background-image: url(../../assets/images/index/5_contact.jpg);
    }

    .top-contact-sp{
        background-image: url(../../assets/images/index/5_contact_sp.jpg);
    }




/*---------------------------
   main-image_Section 
---------------------------*/

    .main-image-container{
        display: block;
    }

    .main-image{
        width: 100%;
        height: 100vh;
    }
    
    .main-img{
        background-image: url(../../assets/images/index/top_image_sp.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .mainImage-content_box{
        bottom: 4%;
        width: 100%;
        position: absolute;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;   
        padding: 0 4%;
        color: var(--white);
    }

    .m-textbox-left{
        display: flex;
        align-items: flex-end;
    }

    .m-textbox-left h3{
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .m-textbox-right{
        position: relative;
        text-shadow: 0px 2px 0px rgba(16, 16, 16, 0.25);
    }
    
    .m-textbox-right h2{
        letter-spacing: 2px;
        line-height: 40px;
    }

    .m-textbox-right p{
        letter-spacing: 1.12px;
        line-height: 24px;
    }

    .mainImage-content_box-sp{
        display: flex;
        width: 100%;
        position: absolute;
        bottom: 14%;
        padding: 0 4%;
        color: var(--white);
    }

@media screen and (min-width: 1640px) {

    .fs-96{
        font-size: 96px;
    }

    .fs-32{
        font-size: 32px;
    }

    .fs-28{
        font-size: 28px;
    }

    .m-textbox-right h2{
        line-height: 104px !important;
        margin-bottom: 12px;
    }

    .m-textbox-right p{
        letter-spacing: 1.12px;
        line-height: 24px;
    }

}


@media screen and (max-width: 1280px) and (min-width: 768px) {

    .m-textbox-right h2{
        letter-spacing: 4px !important; 
        line-height: 58px !important;
    }

    .tb-fs-48{
        font-size: 48px;
    }

    .tb-fs-18{
        font-size: 18px;
    }

    .tb-fs-16{
        font-size: 16px;
    }

}




@media screen and (min-width: 768px) {

    .main-img{
        background-image: url(../../assets/images/index/top_image.jpg);
    }

    .mainImage-content_box{
        bottom: 8%;
        flex-direction: row;
        justify-content: space-between;   
        padding: 0 4%;
    }

    .m-textbox-right{
        text-shadow: 0px 2px 0px rgba(16, 16, 16, 0.25);
    }

    .m-textbox-right h2{
        letter-spacing: 5.44px;
        line-height: 84px;
    }

    .m-textbox-right p{
        letter-spacing: 2px;
        line-height: 40px;
    }

}
 


/*---------------------------
   about_Section 
---------------------------*/

    .about-section{
        
    }

/*---------------------------
   vision_Section 
---------------------------*/

    .vision-section{
        
    }

    .v-img{
        width: 100%;
    }

    .v-img img{
        width: 100%;
    }

    .v-text-container{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .v-text-container .fa-right{
        text-align: left;
    }

    .v-pl{
        padding-left: 0px;
    }

    .v-pr{
        padding-right: 0px;
    }

    .v-section-container .c-btn{
        margin: 0 auto;
    }


@media screen and (min-width: 768px) {

    .v-text-container .fa-right{
        text-align: right;
    }

    .v-pl{
        padding-left: 48px;
    }

    .v-pr{
        padding-right: 48px;
    }

}

/*---------------------------
   Bussiness_Section 
---------------------------*/

    .b-column-box{
        display: flex;
        position: relative;
        flex-direction: column;
    }

    .bc-image-box{
        position: relative;
    }

    .bc-image img{
        width: 100%;
        height: 100%;
    }

    .bc-image-box a{
        position: absolute;
        right: 0;
        bottom: 0px;
    }

    .b-content-container .c-btn{
        margin: 0 auto;
    }

/*---------------------------
   Careers_Section 
---------------------------*/

    .careers-section{

    }


/*-----------------------------
   CompanyInformation_Section 
------------------------------*/

    .ci-table{
        width: calc(100%);
    }


    
    .ci-table th{
        width: 28%;
        vertical-align: top;
        text-align: center;
        padding: 20px;
        border: 1px solid #b4b7c0;
        border-bottom: 0px;
        /* font-definition */
        font-size: 18px;
        font-weight: 400;
        color: var(--darkBlack);
    }

    .ci-table tr:last-child th{
        border-bottom: 1px solid #b4b7c0;
    }

    .ci-table td{
        width: 72%;
        padding: 20px 20px 20px 104px;
        border: 1px solid #b4b7c0;
        border-bottom: 0px;
        border-left: 0px;
        /* font-definition */
        font-size: 18px;
        font-weight: 400;
        color: var(--darkBlack);
    }

    .ci-table tr:last-child td{
        border-bottom: 1px solid #b4b7c0;
    }

    .ci-table-workDetail-list li{
        line-height: 32px;
    }

/*---- m-btn ----*/

    .m-btn{
        display: flex;
        position: relative;
        width: 100%;
        height: 44px;
        max-width: 336px;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        border: 1px solid #7D808C;
        color: #7D808C !important;
        margin-right: auto;
    }

    .m-btn img{
        position: absolute;
        right: 16px;
    }
    
    .m-btn:hover{
        border: 1px solid var(--deepBlack);
    }

    .m-btn:hover > img{
        right: 10px;
        transition: .35s;
    }

@media screen and (max-width: 768px) {
    
    .m-btn{
        max-width: 100%;
    }
    
    .map-btn{
        max-width: 100%;
    }

    .ci-table th{  
        width: 100%;
        display: block;
        border: 1px solid #F6FAFB;
        border-left: 1px solid #F6FAFB;
        background-color: #F6FAFB;
    }

    .ci-table td{
        width: 100%;
        display: flex;
        text-align: center;
        border-bottom: 1px;
        border: 1px solid #F6FAFB;
        border-left: 1px solid #F6FAFB;
        padding: 20px 20px 20px 20px;
        align-items: center;
        justify-content: center;
        flex-direction: column;

    }

    .ci-table tr:last-child th{
        border-bottom: 1px solid #F6FAFB;
    }

    .ci-table tr:last-child td{
        border-bottom: 1px solid #F6FAFB;
    }

}

@media screen and (min-width: 768px) {



}


/*-----------------------------
   Contact_Section 
------------------------------*/



    .contact-section .c-btn{
        margin-right: auto;
        margin-left: auto;
    }


@media screen and (min-width: 768px) {

    .contact-section .c-btn{
        margin-right: 0;
        margin-left: auto;
    }

}

/*-----------------------------
   smartPhone-CSS-definition 
------------------------------*/

@media screen and (max-width: 768px) {
    
    .contact-section .c-l-text{
        text-align: left;
    }

}