.careers{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #2C2E34;
  overflow-x: hidden;
  overflow-y: auto;
}
.careers-body{
  position: relative;
  margin-top: 64px;
  width: 100%;
  background-color: #2C2E34;
}

.careers-jobContainer{
  width: 100vw;
  margin-top: 0px;
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 10001;
}

.careers-job-description{
  width: 92%;
  margin-left: 4%;
  height: 100vh;
}

.careers-job-description-close{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.careers-job-description-close-img{
  width: 30px;
  height: 30px;
  object-fit: cover;
}
.careers-job-description-title{
  position: relative;
  text-align: left;
}
.careers-job-description-title p{
  color: #2a2a2a;
  font-weight: 300;
}

.careers-job-description-detail{
  position: relative;
  width: 92vw;
  height: calc(100vh - 130px);
}
.careers-job-description-detail-title{
  background-color: #3FACBF;
  color: white;
  width: 100%;
  height: 38px;
  font-size: 0;
  text-align: center;
}
.table-title{
  height: 38px;
  display: inline-block;
  width: 20%;
  text-align: center;
  font-weight: 700;
  line-height: 38px;
  position: relative;
}
.tab-cell{
  display: inline-block;
  width: 20%;
  height: 50px;
  text-align: center;
  font-weight: 700;
  line-height: 22px;
  position: relative;
}
.table-left{
  text-align: left;
}
.careers-job-description-detail-list{
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0;
  padding-bottom: 140px;
  margin-top: 20px;
}
.careers-job-description-list{
  background-color:#ffffff;
  color: black;
  width: 100%;
  //height: 50px;
  font-size: 0;
}
.table-detail{
  width: 100%;
  height: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all ease 1s;
  transform-origin: top center;
  position: relative;

}
.table-detail p{
  color: #2a2a2a;
  line-height: 150%;
  opacity: 0;
  transition: all ease 1s;
}
.table-detail-show{
  height: 250px;
}
.table-detail-show p{
  animation: fadeIn 1s ease 0.5s forwards;
}
.careers-job-description-bottom{
  width: 100%;
  position: absolute;
  bottom: 0px;
  height: 64px;
  background-color: white;
}
@keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.jobBtnClick{
}
.list-arrow{
  position: absolute;
  margin-top: -45px;
  background: url(http://yun-image.elab-plus.com/images/join/2_objects@2x.png) no-repeat 50% 50%;
  background-size: contain;
  cursor: pointer;
  transition: all ease 0.8s
}
.list-arrowOpen{
  background: url(http://yun-image.elab-plus.com/images/join/2_objects@2x_1.png) no-repeat 50% 50%;
  background-size: contain;
}

.tab-detail-content{
  text-align: left;
  width: 100%;
}

.menu-bottom{
  position: relative;
  height: 64px;
  width: 100%;
}

.menu-contact-map{
  width: 33%;
  height: 64px;
  position: absolute;
  left: 0%;
}
.menu-contact-phone{
  width: 33%;
  height: 64px;
  position: absolute;
  left: 33%;
}

.menu-contact-mail{
  width: 33%;
  height: 64px;
  position: absolute;
  left: 67%;
}

.map-icon{
  width: 22px;
  height: 35px;
  position: relative;
  text-align: left;
}
.map-img{
  opacity: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.map-address{
  text-align: center;
  width: 100%;
  height: 32px;
  position: relative;
}
.map-address p{
  opacity: 0;
  font-size: 17px;
  height: 32px;
  line-height: 32px;
}
.map-desc{
  text-align: left;
  width: 100%;
  height: 32px;
  position: relative;
}
.map-desc p{
  opacity: 1;
  font-size: 13px;
  height: 32px;
  line-height: 32px;
  color: black;
}

.phone-img{
  opacity: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.phone-icon{
  position: relative;
  text-align: left;
  width: 22px;
  height: 35px;
}
.phone-address{
  text-align: center;
  width: 100%;
  height: 32px;
  position: relative;
}
.phone-address p{
  opacity: 1;
  font-size: 17px;
  height: 32px;
  line-height: 32px;
}
.phone-desc{
  text-align: left;
  width: 100%;
  height: 32px;
  position: relative;
}
.phone-desc p{
  opacity: 1;
  font-size: 13px;
  height: 32px;
  line-height: 32px;
  color: black;
}

.email-img{
  opacity: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.email-icon{
  width: 22px;
  height: 35px;
  position: relative;
  text-align: left;
}
.email-address{
  text-align: center;
  width: 100%;
  height: 32px;
  position: relative;
}
.email-address p{
  opacity: 1;
  font-size: 17px;
  height: 32px;
  line-height: 32px;
}
.email-desc{
  text-align: left;
  width: 100%;
  height: 32px;
  position: relative;
}
.email-desc p{
  opacity: 1;
  font-size: 13px;
  height: 32px;
  line-height: 32px;
  color: black;
}

@media (max-width: 767px){
  .company-goal{
    position: relative;
    width: 100%;
    height: 612px;
  }
  .company-bg-color{
    position: absolute;
    width: 100%;
    height: 316px;
    background-color: #3FACBF;
  }
  .company-goal-bg{
    width: 80%;
    height: 534px;
    position: absolute;
    right: 0%;
    top: 1%;
    background-size: cover;
  }
  .company-goal-desc{
    width: 78%;
    margin: 100px 11%;
    position: absolute;
  }
  .company-vision{
    position: relative;
    width: 100%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .company-vision-title span{
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1vw;
    color: white;
    padding-bottom: 10px;
    padding-left: 1vw;
    border-bottom: 5px solid #3FACBF;
  }
  .company-vision-detail{
    margin-top: 28px;
  }
  .company-vision-detail p{
    font-weight:700;
    font-size: 14px;
    margin-top: 10px;
    color: white;
  }
  .company-value{
    margin-top: 10%;
    width: 100%;
    height: 499px;
    position: relative;
  }
  .company-value-panel-img{
    position: absolute;
    width: 100%;
    height: 300px;
    background-size: cover;
    margin-top:200px ;
  }
  .company-value-logo-img{
    position: absolute;
    width: 45%;
    height: 328px;
    background-size: cover;
    left: 0%;
  }
  .company-value-description{
    position: absolute;
    width: 50%;
    left: 50%;
  }
  .company-value-description-title{
    position: relative;
    width: 100%;
    text-align: left;
  }
  .company-value-description-title p{
    font-size: 22px;
    font-weight: 700;
    color: white;
    //padding-bottom: 20px;
  }
  .company-value-description-detail{
    position: relative;
    margin-top: 20px;
    width: 100%;
    text-align: left;
  }
  .company-value-description-detail p{
    font-weight: 300;
    font-size: 3vw;
    line-height: 3.5vw;
    margin-top: 6px;
    color: white;
  }
  .company-value-people{
    position: relative;
    width: 100%;
    margin-top: 110px;
    text-align: left;
  }
  .company-value-people-title{
    width: 100%;
  }
  .company-value-people-title p{
    color: white;
    font-size: 22px;
    font-weight: 700;
  }
  .company-value-people-des{
    width: 100%;
    margin-top: 10px;
    text-align: left;
  }
  .company-value-people-des p{
    font-size: 14px;
    color: white;
    font-weight: 300;
  }
  .company-job{
    width: 100%;
    position: relative;
  }
  .company-job-bg{
    position: absolute;
  }
  .company-job-bg-img{
    width: 100%;
    height: 460px;
    object-fit: cover;
  }
  .company-job-desc{
    position: absolute;
    margin-top: 70px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .company-job-desc-img{
    width: 55%;
  }
  .company-job-button{
    position: absolute;
    width: 100%;
    margin-top: 300px;
    margin-left: auto;
    margin-right: auto;
    //margin: 0 auto;
    text-align: center;
  }
  .company-job-button a{
    font-size: 12px;
    color: #000;
    line-height: 38px;
    padding: 8px 30px;
    background: white;
    border-radius: 20px;
    text-decoration: none;
  }

  .careers-job-description-title p{
    font-size: 15px;
  }
  .table-title{
    font-size: 12px;
  }
  .tab-cell{
    font-size: 9px;
  }
  .list-arrow{
    right: 0%;
    width: 12px;
    height: 12px;
  }
  .table-detail p{
    font-size: 12px;
  }
}

@media (min-width: 768px){
  .company-goal{
    position: relative;
    width: 100%;
    height: 1032px;
  }
  .company-bg-color{
    position: absolute;
    width: 100%;
    height: 616px;
    background-color: #3FACBF;
  }
  .company-goal-bg{
    width: 640px;
    height: 1032px;
    position: absolute;
    right: 0%;
    top: 1%;
    background-size: cover;
  }
  .company-goal-desc{
    width: 78%;
    margin: 300px 11%;
    position: absolute;
  }
  .company-vision{
    position: relative;
    width: 100%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .company-vision-title span{
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1vw;
    color: white;
    padding-bottom: 10px;
    padding-left: 1vw;
    border-bottom: 5px solid #3FACBF;
  }
  .company-vision-detail{
    margin-top: 28px;
  }
  .company-vision-detail p{
    font-weight:700;
    font-size: 19px;
    margin-top: 10px;
    color: white;
  }
  .company-value{
    margin-top: 10%;
    width: 100%;
    height: 799px;
    position: relative;
  }
  .company-value-panel-img{
    position: absolute;
    width: 100%;
    height: 600px;
    background-size: cover;
    margin-top:260px ;
  }
  .company-value-logo-img{
    position: absolute;
    width: 45%;
    height: 628px;
    background-size: cover;
    left: 0%;
  }
  .company-value-description{
    position: absolute;
    width: 50%;
    left: 50%;
  }
  .company-value-description-title{
    position: relative;
    width: 100%;
    text-align: left;
  }
  .company-value-description-title p{
    font-size: 22px;
    font-weight: 700;
    color: white;
    //padding-bottom: 20px;
  }
  .company-value-description-detail{
    position: relative;
    margin-top: 20px;
    width: 100%;
    text-align: left;
  }
  .company-value-description-detail p{
    font-weight: 300;
    font-size: 3vw;
    margin-top: 6px;
    color: white;
  }
  .company-value-people{
    position: relative;
    width: 100%;
    margin-top: 110px;
    text-align: left;
  }
  .company-value-people-title{
    width: 100%;
  }
  .company-value-people-title p{
    color: white;
    font-size: 22px;
    font-weight: 700;
  }
  .company-value-people-des{
    width: 100%;
    margin-top: 10px;
    text-align: left;
  }
  .company-value-people-des p{
    font-size: 14px;
    color: white;
    font-weight: 300;
  }
  .company-job{
    width: 100%;
    position: relative;
  }
  .company-job-bg{
    position: absolute;
  }
  .company-job-bg-img{
    width: 100%;
    height: 460px;
    object-fit: cover;
  }
  .company-job-desc{
    position: absolute;
    margin-top: 70px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .company-job-desc-img{
    width: 55%;
  }
  .company-job-button{
    position: absolute;
    width: 100%;
    margin-top: 300px;
    margin-left: auto;
    margin-right: auto;
    //margin: 0 auto;
    text-align: center;
  }
  .company-job-button a{
    font-size: 12px;
    color: #000;
    line-height: 38px;
    padding: 8px 30px;
    background: white;
    border-radius: 20px;
    text-decoration: none;
  }
  .careers-job-description-title p{
    font-size: 20px;
  }
  .table-title{
    font-size: 15px;
  }
  .tab-cell{
    font-size: 15px;
  }
  .list-arrow{
    right: 0%;
    width: 15px;
    height: 15px;
  }
  .table-detail p{
    font-size: 15px;
  }
}

@media (min-width: 992px){
  .company-goal{
    position: relative;
    width: 100%;
    height: 1032px;
  }
  .company-bg-color{
    position: absolute;
    width: 100%;
    height: 516px;
    background-color: #3FACBF;
  }
  .company-goal-bg{
    width: 720px;
    height: 1032px;
    position: absolute;
    right: 10%;
    background-size: cover;
  }
  .company-goal-desc{
    width: 78%;
    margin: 100px 11%;
    position: absolute;
  }
  .company-vision{
    position: relative;
    width: 100%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .company-vision-title span{
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1vw;
    color: white;
    padding-bottom: 10px;
    padding-left: 1vw;
    border-bottom: 10px solid #3FACBF;
  }
  .company-vision-detail{
    margin-top: 40px;
  }
  .company-vision-detail p{
    font-weight:700;
    font-size: 36px;
    margin-top: 15px;
    color: white;
  }
  .company-value{
    margin-top: 10%;
    width: 100%;
    height: 770px;
    position: relative;
  }
  .company-value-panel-img{
    position: absolute;
    width: 100%;
    background-size: cover;
    margin-top:340px ;
  }
  .company-value-logo-img{
    position: absolute;
    width: 450px;
    height: 678px;
    background-size: cover;
    left: 10%;
  }
  .company-value-description{
    position: absolute;
    width: 50%;
    left: 50%;
  }
  .company-value-description-title{
    position: relative;
    width: 100%;
    text-align: left;
  }
  .company-value-description-title p{
    font-size: 58px;
    font-weight: 700;
    color: white;
    //padding-bottom: 20px;
  }
  .company-value-description-detail{
    position: relative;
    margin-top: 20px;
    width: 100%;
    text-align: left;
  }
  .company-value-description-detail p{
    font-weight: 300;
    font-size: 30px;
    margin-top: 6px;
    color: white;
  }
  .company-value-people{
    position: relative;
    width: 100%;
    margin-top: 220px;
    text-align: left;
  }
  .company-value-people-title{
    width: 100%;
  }
  .company-value-people-title p{
    color: white;
    font-size: 58px;
    font-weight: 700;
  }
  .company-value-people-des{
    width: 100%;
    margin-top: 20px;
    text-align: left;
  }
  .company-value-people-des p{
    font-size: 30px;
    color: white;
    font-weight: 300;
  }
  .company-job{
    width: 100%;
    position: relative;
  }
  .company-job-bg{
    position: absolute;
  }
  .company-job-bg-img{
    width: 100%;
    height: 92vh;
    object-fit: cover;
  }
  .company-job-desc{
    position: absolute;
    margin-top: 30px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .company-job-desc-img{
    width: 55%;
  }
  .company-job-button{
    position: absolute;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .company-job-button a{
    padding: 5px 30px;
    color: #202020;
    background: #fff;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    font-size: 18px;
    line-height: 18px;
    text-decoration: none;
  }
  .careers-job-description-title p{
    font-size: 30px;
  }
  .table-title{
    font-size: 18px;
  }
  .tab-cell{
    font-size: 18px;
  }
  .list-arrow{
    right: 3%;
    width: 18px;
    height: 18px;
  }
  .table-detail p{
    font-size: 18px;
  }
}

@media (min-width: 1200px){
  .company-goal{
    position: relative;
    width: 100%;
    height: 1032px;
  }
  .company-bg-color{
    position: absolute;
    width: 100%;
    height: 516px;
    background-color: #3FACBF;
  }
  .company-goal-bg{
    width: 720px;
    height: 1032px;
    position: absolute;
    right: 10%;
    background-size: cover;
  }
  .company-goal-desc{
    width: 78%;
    margin: 100px 11%;
    position: absolute;
  }
  .company-vision{
    position: relative;
    width: 100%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .company-vision-title span{
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1vw;
    color: white;
    padding-bottom: 10px;
    padding-left: 1vw;
    border-bottom: 10px solid #3FACBF;
  }
  .company-vision-detail{
    margin-top: 40px;
  }
  .company-vision-detail p{
    font-weight:700;
    font-size: 36px;
    margin-top: 15px;
    color: white;
  }
  .company-value{
    margin-top: 10%;
    width: 100%;
    height: 770px;
    position: relative;
  }
  .company-value-panel-img{
    position: absolute;
    width: 100%;
    background-size: cover;
    margin-top:340px ;
  }
  .company-value-logo-img{
    position: absolute;
    width: 450px;
    height: 678px;
    background-size: cover;
    left: 10%;
  }
  .company-value-description{
    position: absolute;
    width: 50%;
    left: 50%;
  }
  .company-value-description-title{
    position: relative;
    width: 100%;
    text-align: left;
  }
  .company-value-description-title p{
    font-size: 58px;
    font-weight: 700;
    color: white;
    //padding-bottom: 20px;
  }
  .company-value-description-detail{
    position: relative;
    margin-top: 20px;
    width: 100%;
    text-align: left;
  }
  .company-value-description-detail p{
    font-weight: 300;
    font-size: 30px;
    margin-top: 6px;
    color: white;
  }
  .company-value-people{
    position: relative;
    width: 100%;
    margin-top: 220px;
    text-align: left;
  }
  .company-value-people-title{
    width: 100%;
  }
  .company-value-people-title p{
    color: white;
    font-size: 58px;
    font-weight: 700;
  }
  .company-value-people-des{
    width: 100%;
    margin-top: 20px;
    text-align: left;
  }
  .company-value-people-des p{
    font-size: 30px;
    color: white;
    font-weight: 300;
  }
  .company-job{
    width: 100%;
    position: relative;
  }
  .company-job-bg{
    position: absolute;
  }
  .company-job-bg-img{
    width: 100%;
    height: 92vh;
    object-fit: cover;
  }
  .company-job-desc{
    position: absolute;
    margin-top: 30px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .company-job-desc-img{
    width: 55%;
  }
  .company-job-button{
    position: absolute;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .company-job-button a{
    padding: 5px 30px;
    color: #202020;
    background: #fff;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    font-size: 18px;
    line-height: 18px;
    text-decoration: none;
  }
  .careers-job-description-title p{
    font-family: AritaHeiti-Light;
    font-size: 30px;
    color: #2A2A2A;
    letter-spacing: 0;
    line-height: 36px;
  }
  .table-title{
    font-size: 18px;
  }
  .tab-cell{
    font-size: 18px;
  }
  .list-arrow{
    right: 3%;
    width: 18px;
    height: 18px;
  }
  .table-detail p{
    font-size: 18px;
  }
}
