@charset "UTF-8";

/* common */
.section .inner {max-width: 1600px; margin: 0 auto 0 auto;}
.d-flex {display: flex;}
.main-text {font-size: 56px; font-weight: 600; color: #fff;}
.main-text-small {font-size: 44px; font-weight: 600; color: #fff;}
.sub-text  {font-size: 20px; font-weight: 400; color: #fff; margin-top: 30px; line-height: 1.5;}
.visual-section {background-repeat: no-repeat; background-position: center center; background-size: cover;}

/* deleted */
.vision-section {background-image: url('../images/main/main-img.jpg');}
.business-slogan {background-image: url('../images/main/main-bisness-name.jpg');}
.career-section {background-image: url('../images/main/main-career.jpg');}
.company-section {background-image: url('../images/main/main-company.jpg');}

/* 두번째 섹션 */
.business-slogan .main-text,
.business-slogan .sub-text {color: #121212;}

/* section3 */
.business-section .business-inner {display: flex; height: 100%;}
.business-section .business-inner > div {display: flex; align-items: center; width: 50%; padding-left: 100px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.business-section .business-inner > div:nth-child(1) {background-image: url('../images/main/main-cloud.jpg');}
.business-section .business-inner > div:nth-child(2) {background-image: url('../images/main/main-itservice.jpg');}
.cloud_detail {display: inline-block; color: #fff; margin-top: 30px;}
.itservice_detail {display: inline-block; color: #fff; margin-top: 30px;}
.detail_bottom {
    display: inline-block; 
    color: #fff; 
    border-bottom: 2px solid #fff; 
    padding: 20px 0; margin-top: 30px;
}
.detail_bottom i {margin-left: 20px;}

/* 네번째 섹션 */
.career-section .career_name {font-size: 24px; font-weight: 300; color: #ff9812; margin-bottom: 30px;}
.career-section .career-roundbox {display: flex; margin-top: 40px;}
.career-section .roundbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px; 
    height: 120px; 
    color: #fff; 
    border: 1px solid #fff; 
    border-radius: 10px;
    margin-right: 10px;     
}
.career-section .roundbox a {color: #fff; text-align: center;}
.career-section .roundbox .career-icon {width: 60px; height: 60px; border:1px solid #fff; border-radius: 50%; margin-bottom: 10px;}
.career-section .roundbox i {font-size: 48px; margin-bottom: 20px;}
.career-section .roundbox p {font-size: 16px; font-weight: 300; color: #fff;}

/* 다섯번째 섹션 */
.company-section .inner {text-align: center;}
.company_detail {display: inline-block; font-weight: 300; color: #fff; margin-top: 30px; border: 1px solid #fff; padding: 15px;}

@media screen and (max-width: 1280px) { /* PC + Tablet 환경 */
    .section {height: 100vh;}
    .section .inner {width: 100%; padding: 0 40px;}
    .main-text {position: relative; z-index: 1; font-size: 44px; font-weight: 600; line-height: 1.25;}
    .main-text-small {font-size: 36px;  font-weight: 500; margin-top: 0; line-height: 1.25;}
    .sub-text  {position: relative; z-index: 1; font-size: 18px; margin-top: 20px;}   

    .visual-section:after {position: absolute; display: block; content: ''; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0 ,0, .25);}
    .vision-section .inner {text-align: center;}

    .business-section .business-inner {flex-direction: column;}
    .business-section .business-inner > div {position: relative; align-items: center; width: 100%; height: 50%; padding-left: 0;}
    /* .business-section .business-inner > div:after {position: absolute; display: block; content: ''; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0 ,0, .45);} */
    .business-section .business-inner > div > div {position: relative; z-index: 1; width: 100%; text-align: center;}
    .detail_bottom {font-size: 18px; font-weight: 400; padding: 10px 15px; margin-top: 10px; border: 1px solid #fff; margin-top: 40px;}
    .detail_bottom i {display: none;}

    .career-section .inner {text-align: center;}
    .career-section .career-roundbox {justify-content: center;}
    .career-section .roundbox {position: relative; z-index: 1;}

    .company_detail {position: relative; z-index: 1; font-size: 18px; font-weight: 400; padding: 10px 15px;}
}

@media screen and (max-width: 450px) { /* Mobile 환경 */
    .main-text {font-size: 7.2vw; line-height: 1.25;}
    .main-text-small {font-size: 5.8vw; font-weight: 500; margin-top: 20px;}
    .sub-text  {font-size: 3.9vw; margin-top: 20px;}
    .mobile-mode {display: none;}

    .detail_bottom {font-size: 3.5vw; font-weight: 400; padding: 8px 10px; margin-top: 20px; border: 1px solid #555; background-color: #121212; box-shadow: 0 5px 15px rgba(0, 0 ,0, .45);}
    .detail_bottom i {margin-left: 10px;}

    .career-section .roundbox {width: 80px; height: 100px; border-radius: 5px;margin-right: 5px; border: 1px solid #555; background-color: #121212; box-shadow: 0 5px 15px rgba(0, 0 ,0, .45);}
    .career-section .roundbox a {display: flex; flex-direction: column; align-items: center;}
    .career-section .roundbox span {display: block; width: 40px;}
    .career-section .roundbox p {font-size: 14px; font-weight: 300; color: #fff;}

    .company_detail {font-size: 3.5vw; font-weight: 400; padding: 8px 10px; margin-top: 20px; border: 1px solid #555; background-color: #121212; box-shadow: 0 5px 15px rgba(0, 0 ,0, .45);}
}