/* kv */
.kv{ background-image: url(../img/careers/kv.jpg); }

/* common */
.bg-green{ background-color: #40b198;}
.section-header{ font-size: 32px;  font-family: 'Inter-Black'; padding-top: 100px; padding-bottom: 50px;}

/* Opening Roles */
.location .item{ display: flex; padding: 70px 0; border-top: 2px solid #CCC;}
.location .item .left{ width: 350px; }
.location .item .left p{ font-size: 30px; color: var(--color-black); font-family: 'Inter-Black'; line-height: 40px;}
.location .item .left p::before{ content: ''; display: inline-block; width: 38px; height: 38px; background-image: url(../img/careers/icon-location.png); background-size: cover; vertical-align: middle; margin-right: 10px;}

.location .item .right{ flex: 1;}
.location .item-title{ position: relative;  border-top: 2px solid #CCC; margin-top: 60px; padding-top: 60px;}
.location .item-title.first-title{ border-top: none; margin-top: 0; padding-top: 0;}
.location .item-title span{color: var(--color-black); font-size: 30px; line-height: 40px; font-family: 'Inter-Black';}
.location .item-title a:hover{ color: #40b198;}
.location .item-desc{ font-size: 16px; line-height: 32px; padding: 30px 30px 0 0;}
.location .btn-show{ position: absolute; width: 28px; height: 28px; background-image: url(../img/careers/icon-arrow.png); background-size: cover; top: 10px; right: 0; overflow: hidden; text-indent: -999px;  transition: all 0.3s;}
.location .btn-show:hover{ opacity: .8;}
.location .item-more{ display: none;}
.location .item.active .btn-show{ transform: rotate(180deg);}
.location .item-mailto{ text-align: right; padding: 20px 40px 0 0;}
.location .item-mailto a{ display: inline-block; height: 28px; line-height: 28px; border-radius: 28px; padding: 0 20px; background-color: var(--color-blue); color: #FFF;}
.location .item-mailto a:hover{ opacity: .8;}

/* talent */
.talent{ display: flex; justify-content: space-between; padding-top: 50px;}
.talent .left{ flex: 1;}
.talent .left p{ font-size: 16px; line-height: 32px; margin-bottom: 30px;}
.talent .right{ margin-left: 80px; width: 40%; max-width: 474px;}
.talent .right .img1{ width: 100%;}
.talent-ls{ margin-left: 1.5em; list-style-type: disc; font-size: 16px; padding-bottom: 20px;}
.talent-ls li{ margin-bottom: 20px;}
.page{ padding-bottom: 0;}

.careers-header{ font-size: 26px; margin-top: 3em; margin-bottom: 1.5em;}
.careers-desc{ font-size: 16px; line-height: 32px; max-width: 840px; }
.careers-desc p{ margin-top: 1em;}

.speciality-body{ display: flex;  flex-wrap: wrap; margin-left: -40px; margin-top: 40px;}
.speciality-body .item{ width: calc(50% - 40px); margin-left: 40px; margin-top: 40px; border: 1px solid #40b198; border-radius: 18px; box-shadow: 0 0 20px rgba(3, 199, 156, 0.2);}
.speciality-body .item dl{ padding: 30px;}
.speciality-body .item dt{ font-size: 36px; color: #40b198; padding-bottom: 20px;}
.speciality-body .item dd{ font-size: 16px;padding-left: 20px; position: relative; line-height: 32px;}
.speciality-body .item dd::before{ content: '–'; font-size: 12px; font-weight: 600; position: absolute; left: 0; top: 0;}

/* working */
.working{ padding: 60px 0 60px 0; color: #FFF; margin-top: 80px; background-color: #40b198;}
.working.first{ margin-top: 80px;}
.working.hongkong{ margin-top: 100px;}
.working .wrap{ display: flex;}
.working .item-photo{ max-width: 670px; margin-top: 0px;}
.working .item-photo-en{ max-width: 670px; margin-top: 88px;}
.working .item-content{ flex: 1; margin-right: 50px;}
.working .item-content .item-title{ font-size: 26px;  font-family: 'Inter-Black';}
.working .item-content .item-title::before{ content: ''; display: inline-block; width: 38px; height: 38px; background-image: url(../img/careers/icon-location-light.png); background-size: cover; vertical-align: middle; margin-right: 10px;}
.working .item-content .item-desc{ font-size: 16px; line-height: 32px; margin-top: 40px; margin-bottom: 40px;}
.working.left-photo .item-photo{ order: 1;}
.working.left-photo .item-content{ order: 2;}
.working.left-photo .item-content{
    margin-right: 0;
    margin-left: 100px;
}


.slick-dots{ position: absolute; left: 0; bottom: 10px; text-align: center; width: 100%;}
.slick-dots li{ display: inline-block; margin: 0 5px; }
.slick-dots li button{overflow: hidden; cursor: pointer; width: 12px; height: 12px; line-height: 0; text-indent: -99px; border: none; border-radius: 50%; background-color: #CCC;}
.slick-dots li.slick-active button{ background-color: #40b198;}

/* news detail */
.detail-header{ padding: 200px 0 50px 0; border-bottom: 2px solid #DDD; font-size: 48px;}


.post-content{ line-height: 1.8; font-size: 18px; padding-top: 50px;}
.post-footer{ padding: 50px 0; font-size: 18px; display: flex;}

.post-footer span{ color: var(--color-orange); margin-right: 10px;}
.post-footer a{  color: var(--color-orange); position: relative; padding-bottom: 4px; overflow: hidden;}
.post-footer a::after{ content: ''; transform: translateX(0); transition: transform .4s cubic-bezier(.23,.46,.4,1); position: absolute; width: 100%; left: 0; bottom: 0; border-bottom: 2px solid var(--color-orange);}
.post-footer a:hover::after{ transform: translateX(100%);}

/* dark model */
body.dark .location .item .left p{ color: #FFF;}
body.dark .location .item-title a{ color: #FFF;}
body.dark .location .item-desc{ color: #DDD;}
body.dark .location .item-title span{ color: #DDD;}

@media screen and (max-width: 1180px) {
    .working .wrap {
        flex-direction: column;
    }
    .working .item-content{
        margin-right: 0px;
    }
    .working .item-photo-en{
        margin-top: 0px;
    }
    .working.first {
        margin-top: 30px;
    }
}

@media screen and (max-width: 980px) {
    .location .item-desc{
        font-size: 16px;
        line-height: 32px;
        padding: 18px 0 0 0;
    }
    .location .item .left{ 
        width: 250px; 
    }
    .location .item-title span{
        color: var(--color-black);
        font-size: 24px;
        line-height: 40px;
        font-family: 'Inter-Black';
    }
    .location .item .left p{ 
        font-size: 24px;
        color: var(--color-black);
        font-family: 'Inter-Black';
        line-height: 40px;
    }
    .working .wrap {
        flex-direction: column;
    }
    .working .item-content{
        margin-right: 0px;
    }
    .working .item-photo-en{
        margin-top: 0px;
    }
    .working.first {
        margin-top: 30px;
    }
}

@media screen and (max-width: 640px) { 

    /* kv */
    .kv {
      background-image: url(../img/careers/kv-mo.jpg);
    }

    .section-header {
        font-size: 18px;
        padding: 50px 15px 30px 15px;
    }
    .location .item .left p::before {
        width: 22px;
        height: 22px;
        margin-right: 5px;
    }
    .location .item {
        flex-direction: column;
        padding: 30px 0;
        border-top: 1px solid #CCC;
    }
    .location .item .left p {
        font-size: 16px;
        line-height: 24px;
        padding: 30px 0;
    }
    .location .item-title {
        border-top: 1px solid #CCC;
        margin-top: 30px;
        padding-top: 30px;
    }
    .location .item-title span {
        font-size: 18px;
        line-height: 24px;
    }
    .location .item-mailto {
        padding: 20px 0 0 0;
    }
    .location .item-desc {
        font-size: 1rem;
        line-height: 24px;
        padding: 18px 0 0 0;
    }

    .location .item .right {
       padding-left: 24px;
    }
    .location .btn-show {
        width: 16px;
        height: 16px;
        top: -50px;
    }

    .talent {
        flex-direction: column;
        padding-top: 20px;
    }
    .talent .left{order: 2; margin-top: 18px;}
    .talent .left p {
        font-size: 1rem;
        line-height: 24px;
        margin-bottom: 18px;
    }
    .talent .right {
        margin-left: 0;
        order: 1;
    }
    .talent .right img{ width: 100%; }

    .careers-header {
        font-size: 16px;
        margin-top: 2em;
        margin-bottom: 1em;
    }
    .talent .right {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }
    .talent-ls {
        margin-left: 1.4em;
        font-size: 14px;
        padding-bottom: 10px;
    }
    .talent-ls li {
        margin-bottom: 10px;
    }
    .careers-desc {
        font-size: 14px;
        line-height: 24px;
    }
    .speciality-body {
        display: block;
        margin-left:0;
        margin-top: 20px;
    }
    .speciality-body .item {
        width: auto;
        margin-left: 0;
        margin-top: 20px;
        border-radius: 10px;
    }
    .speciality-body .item dl {
        padding: 20px;
    }
    .speciality-body .item dt {
        font-size: 20px;
        padding-bottom: 10px;
    }
    .speciality-body .item dd {
        font-size: 14px;
        padding-left: 15px;
        line-height: 24px;
    }
    .working {
        padding: 30px 0 40px 0;
        margin-top: 10px;
    }
    .working .wrap {
       flex-direction: column;
    }
    .working.first {
        margin-top: 10px;
    }
    .working .item-content .item-title::before {

        width: 22px;
        height: 22px;
        margin-right: 5px;
    }
    .working .item-content {
        margin-right: 0;
    }
    .working .item-content .item-title {
        font-size: 16px;
    }
    .working .item-content .item-desc {
        font-size: 1rem;
        line-height: 24px;
        margin-top: 18px;
    }
    .working .item-photo {
        max-width: 100%;
        margin-top: 30px;
    }
    .working .item-photo-en{
        margin-top: 0px;
    }
    .working.left-photo .item-photo {
        order: 2;
    }
    .working.left-photo .item-content {
        margin-right: 0;
        margin-left: 0;
        order: 1;
    }
    .slick-slide img{ width: 100%;}
    .slick-dots li button {
        width: 8px;
        height: 8px;
        padding: 0;
    }

    /* news detail */
    .detail-header{ padding: 100px 0 30px 0; border-bottom: 1px solid #DDD; font-size: 32px;}


    .post-content{ line-height: 1.6; font-size: 14px; padding-top: 30px;}
    .post-footer{ padding: 50px 0; font-size: 16px;}
        

}