.modular1 {

    text-align: center;

}



.modular1 .title h2 {

    margin-top: 1em;

}



.modular1 ul {

    font-size: 0;

}



.modular1 li .img_box {

    width: 107px;

    display: inline-block;

}

.modular1 li .img_box img {
  max-width: 100%;
  max-height: 100%;
}



.modular1 li {

    display: inline-block;

    width: calc(50% - 4px);

    margin: 2px;

    text-align: left;

    /* padding: 4%; */

    box-sizing: border-box;

    background: #f5f2ed;

    vertical-align: top;

    height: 250px;

}



.modular1 li .table-cell {

    display: table-cell;

    vertical-align: middle;

    height: 250px;

    padding: 0 10%;

    box-sizing: border-box;

    width: 1%;

}



.modular1 li .img_box {

    vertical-align: middle;



}



.modular1 li .right {

    display: inline-block;

    vertical-align: middle;

    margin-left: 1em;

    position: relative;

    padding-top: 1em;

    width: calc(100% - 107px - 1em);

}



.modular1 li .right::after {

    content: '';

    position: absolute;

    display: block;

    width: 2em;

    height: 3px;

    top: 0;

    background: #c32823;

}



.modular1 .title {

    margin-bottom: 1em;

}







.modular2 {

    font-size: 0;

}



.modular2 .left,

.modular2 .right {

    width: 50%;

    display: inline-block;

    vertical-align: bottom;

    color: #fff;

}



.modular2 .left h2 {

    line-height: 1.1;

    margin-bottom: 0.5em;

}



.modular2 .left h3 {

    margin-bottom: 0.5em;

}



.modular2 .right {

    text-align: center;

}



.modular2 .right img {

    max-width: 100%;

}



.modular3 {

    text-align: center;



}



.modular3 h2 {

    margin-bottom: 0.5em;

}



.modular3 .left>h3 {

    margin-bottom: 1em;

}



.modular3 .swiper-menu {

    text-align: center;

}



.modular3 .swiper-menu .swiper-wrapper {

    display: block;

}



.modular3 .swiper-menu .swiper-slide {

    display: inline-block;

    width: auto;

}



.modular3 .swiper-menu .swiper-slide {

    cursor: pointer;

    position: relative;

    padding-bottom: 0.5em;

}



.modular3 .swiper-menu .swiper-slide.on::after {

    position: absolute;

    content: '';

    height: 3px;

    width: 100%;

    left: 0;

    bottom: 0;

    background: #c32823;

}



.modular3 .swiper-content .swiper-slide img {

    width: 100%;

}



.modular3 .right li {

    display: none;

}



.modular3 .right li.on {

    display: block;

}



.modular3 .swiper-content .swiper-slide {

    overflow: hidden;

}



.modular3 .swiper-content .swiper-slide.swiper-slide-active .text-box {

    transform: translate3d(0, 0, 0);

}



.modular3 .text-box {

    text-align: left;

    padding: 5%;

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    box-sizing: border-box;

    background: rgba(195, 40, 35, 0.5);

    color: #fff;

    transform: translate3d(-100%, 0, 0);

    transition: all .3s;

    width: 12em;

}



.modular3 .text-box h2 {

    line-height: 1.1;

    margin-bottom: 0.2em;

    font-weight: 100;

}



.modular3 .text {

    position: absolute;

    bottom: 10%;

}



.modular4 {

    padding-top: 0;

    overflow: hidden;

}



.modular4 li.on {

    width: 35%;

    background: url(../images/join/talent/06.jpg) no-repeat center center;

    background-size: cover;

}



.modular4 li {

    width: 16.25%;

    padding: 5% 3%;

    box-sizing: border-box;

    float: left;

    background: #f5f2ed;

    position: relative;

    height: 520px;

    transition: all 1s;



}



.modular4 li+li::after {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 1px;

    background: #fff;

}



.modular4 li .show {

    opacity: 0;

    transition: all 1s;



}



.modular4 li .show::after {

    position: absolute;

    bottom: 15%;

    height: 3px;

    width: 3em;

    background: #c32823;

    content: '';

}



.modular4 li .show h2 {

    line-height: 1.1;

    margin-bottom: 0.5em;

}



.modular4 li .default {

    text-align: center;

    opacity: 1;

    position: absolute;

    bottom: 15%;

    width: 100%;

    left: 0;

    transition: all 1s;

}



.modular4 li.on .show {

    opacity: 1;

}



.modular4 li.on .default {

    opacity: 0;

}



.modular4 li .default .text {

    margin-top: 1em;

}



.modular5 {

    text-align: center;

    color: #fff;

}



.modular5 .button {

    background: #b8120d;

    display: inline-block;

    position: relative;

    color: #fff;

    border-radius: 2px;

    overflow: hidden;

}



.modular5 .button:hover {

    opacity: 0.8;

    color: #fff !important;

}



.modular5 .button .content {

    display: inline-block;

    vertical-align: middle;

    padding: 1em 2em;

}



.modular5 {

    padding: 8% 0;

}



.modular5 .button .icon {

    background: #910e0a;

    display: inline-block;

    vertical-align: middle;

    padding: 10px 20px;

}



.modular5 .button {

    margin-top: 2em;

}







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

    .modular1 br {

        display: none;

    }

}



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



    .modular2 .left h2{

        line-height: 1.3;

    }



    .modular1 li,

    .modular1 li .table-cell {

        height: 180px;

    }



    .modular1 ul {

        white-space: nowrap;

        overflow: auto;

    }



    .modular1 li .img_box {

        width: 58px;

    }



    .modular1 li .right {

        width: calc(100% - 58px - 1em);

        max-height: 6em;

        overflow: hidden;

    }



    .modular1 li .img_box img {

        max-width: 100%;

        max-height: 100%;

    }



    .modular1 ul li {

        white-space: normal;

        width: 80%;

    }



    .modular3 .text,

    .modular3 .text-box {

        position: relative;

        transform: translate(0, 0);

        background: none;

        color: #000;

    }



    .modular4 li.on,

    .modular4 li {

        width: 100%;

        display: block;

        height: auto;

        padding: 10%;

    }



    .modular4 li+li {

        margin-top: 1em;

    }



    .modular4 li .default {

        display: none;

    }



    .modular4 li .show {

        opacity: 1;

        padding-bottom: 10%;

    }



    .modular3 .swiper-menu .swiper-wrapper {

        display: flex;

    }





}