@charset "utf-8";

/* contentWrap */
#contentWrap{ width: calc( 100% - 140px); margin: 85px auto 120px; }
#contentWrap .contentTit{ margin-bottom: 30px;}
.contentTit h2{ font-size: 36px; font-weight: 800; color: #303030; margin-bottom: 20px; text-align: center; }
.contentTit p{ line-height: 1.5em; text-align: center;}

#contentWrap .employeeChart{ width: 80%; margin: 0 auto; display: flex; justify-content: center; flex-direction: column;}
.employeeChart .employer{ display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative;}
.employer .peoTxt{ padding: 20px 40px; background: #db746b; border-radius: 20px;}
.peoTxt p{ text-align: center; color: #fff; font-size: 24px;}
.peoTxt p span{ font-size: 16px; color: #fff;}
.employer .chartLine{ position: relative; top: 0; width: 2px; height: 3.125rem; background: #eff3f2; }

.employeeChart .chartStep{ display: flex; justify-content: center; align-items: center; }
.chartStep .guide{ padding: 20px 40px; border-radius: 20px; background: #e9c775;}
.chartStep .guideCenter{ padding: 20px 40px; border-radius: 20px; background: #66ad92;}
.chartLineRow{display: block; width: 3.125rem; height: 1px; background: #eff3f2;}

#contentWrap .employTable table{ width: 80%; margin: 50px auto;}
.employTable thead tr{ text-align: center;  border-top: 1px solid #eff4f3; border-bottom: 1px solid #eff4f3; }
.employTable thead tr td{ border-right: 1px solid #eff4f3; padding: 10px 0; vertical-align: middle; text-align: center;}
.employTable thead tr td:last-child{ border-right: none;}
.employTable tbody tr{ text-align: center;  border-top: 1px solid #eff4f3; border-bottom: 1px solid #eff4f3; }
.employTable tbody tr td{ border-right: 1px solid #eff4f3; padding: 10px 0; vertical-align: middle; text-align: center;}
.employTable tbody tr td:last-child{ border-right: none;}

@media all and (max-width: 1440px){
    #contentWrap{ width: calc(100% - 90px); margin: 20px auto 80px;}

}
@media all and (max-width: 1024px){
    #contentWrap .employTable table{ width: 100%;}
}
@media all and (max-width: 768px){
    .contentTit h2{ font-size: 30px; margin-bottom: 10px;}
    #contentWrap .employeeChart{ width: 100%;}
    .chartStep .guideCenter{ padding: 20px 30px;}
    .chartStep .guide{ padding: 20px 10px;}
    .peoTxt p{ font-size: 18px;}
    .peoTxt p span{ font-size: 14px;}

    #contentWrap .employTable table{ width: 100%;}
    .employTable thead tr td{ font-size: 12px; padding: 5px 0;}
    .employTable tbody tr td{ font-size: 12px; padding: 5px 0;}
    .employTable thead tr td:first-child{ width: 80px;}
    .employTable tbody tr td:first-child{ width: 80px;}
    .employTable thead tr td:nth-child(2){ width: 50px;}
    .employTable tbody tr td:nth-child(2){ width: 50px;}
}
@media all and (max-width: 520px){
    #contentWrap{ width: calc(100% - 24px);}
    .peoTxt p{ font-size: 14px;}
    .peoTxt p span{ font-size: 11px; display: block;}
    .chartLineRow{ width: 20px;}
    .chartStep .guide{ padding: 14px 20px; border-radius: 10px;}
    .chartStep .guideCenter{ padding: 14px 30px; border-radius: 10px;}
    .employer .chartLine{ height: 1.25rem;}
    .employer .peoTxt{ padding: 14px 30px; border-radius: 10px;}

    .employTable tr td{ font-size: 11px; padding: 5px;}
    .employTable tr td:last-child{ font-size: 11px;}
    .employTable thead tr td:first-child{ width: 80px;}
    .employTable tbody tr td:last-child{ text-align: left; padding-left: 10px;}
    
}
@media all and (max-width: 320px){
    .chartStep .guide{ padding: 10px 12px;}
    .chartStep .guideCenter{ padding: 10px 17px;}
    .employer .peoTxt{ padding: 5px 30px;}

    
    
}