.relative-box{
    position:relative;
}
.tab-control{
    border-bottom:1px solid rgba(0,0,0,0.1);
    display:flex;
    align-items:stretch;
    justify-content:center;
    flex-direction:row;
    position:sticky;
    top:0;
    width:100%;
    background-color:#fff;
    transition:transform 0.5s;
    z-index:2;
    overflow-x:auto;
}
.tab-control.down{
    transform:translateY(6.75em);
}
.tab-control a{
    display:block;
    font-size:1.5em;
    height:3.125em;
    line-height:3.125;
    margin-right:2.6em;
}
.tab-control a:last-child{
    margin-right:0;
}
.tab-control a.active{
    color:var(--theme-purple);
}

.sec1{
    padding:7% 0 8%;
}
.sec1 h3{
    font-size:3em;
    color:#333;
    text-align:center;
    margin-bottom:6.8%;
}
.sec1 h5{
    font-size:2.5em;
    color:#333;
    line-height:1.5;
    max-width:33%;
}
.sec1 .flex-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction:row;
    flex-wrap:wrap;
}
.sec1 .flex-box img{
    width:48.53%;   
}
.sec1 .flex-box img.big{
    width:66.18%;   
    margin-bottom:2.8%;
}


.sec2{
    background-color:#f7f7f9;
    padding:9.375% 0;
}
.sec2 .flex-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction:row-reverse;
    margin-bottom:5.5%;
}
.sec2 .flex-box img.big{
    width:66.18%;
}
.sec2 .flex-box h5{
    width:33%;
    font-size:2.5em;
    color:#333;
    line-height:1.5;
    text-align:center;
}
.sec2 .swiper-prev,.sec2 .swiper-next{
    cursor:pointer;
    width:3.125em;
    height:3.125em;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    margin-top:-1.5625em;
    background-color:#dfdeec;
    color:var(--theme-purple);
    font-family: 'FontAwesome400';
    z-index:1;
}
.sec2 .swiper-prev{
    right:100%;
    margin-right:1.875em;
}
.sec2 .swiper-next{
    left:100%;
    margin-left:1.875em;
}
.sec2 .swiper-prev::before,.sec2 .swiper-next::before{
    font-size:1.25em;
}
.sec2 .swiper-prev::before{
    content:"\f053";
}
.sec2 .swiper-next::before{
    content:"\f054";
}


.sec3{
    padding:8.3% 0 9%;
}



.sec4{
    background-color:#f7f7f9;
    color:#333;
    padding: 8% 0;
}
.sec4 h3{
    font-size:3em;
    text-align:center;
}
.sec4 h5{
    font-size:1.75em;
    text-align:center;
    margin:4.4% 0;
}
.sec4 p{
    font-size:1.375em;
    line-height:1.64;
    color:#333;
}



.sec5{
    padding:7.8125% 0;
    color:#333;
}
.sec5 .inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction:row;
}
.sec5 .text-box{
    width:45.88%;
}
.sec5 h5{
    font-size:1.75em;
}
.sec5 p{
    font-size:1.5em;
    line-height:1.5;
    margin:1em 0 2em;
}
.sec5 .img-box{
    width:39.48%;   
}
.sec5 .swiper-pagination{
    position:static;
    margin-top:1.875em;
}
.sec5 .swiper-pagination-bullet{
    width:0.5em;
    height:0.5em;
    margin: 0 0.25em;
    border-radius:0.25em;
    background-color:var(--theme-purple);
    opacity:0.3;
}
.sec5 .swiper-pagination-bullet.swiper-pagination-bullet-active{
    width:1.375em;
    opacity:1;
}


.sec6{
    background-repeat:no-repeat;
    background-image:url(../images/recruit_sec6_bg.png);
    background-position:center center;
    background-size:57.29% auto;
    background-color:#f7f7f9;
    padding:8.8% 0;
    text-align:center;
    color:#333;
}
.sec6 .swiper-prev,.sec6 .swiper-next{
    cursor:pointer;
    width:3.125em;
    height:3.125em;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    margin-top:-1.5625em;
    background-color:#dfdeec;
    color:var(--theme-purple);
    font-family: 'FontAwesome400';
}
.sec6 .swiper-prev{
    right:100%;
}
.sec6 .swiper-next{
    left:100%;
}
.sec6 .swiper-prev::before,.sec6 .swiper-next::before{
    font-size:1.25em;
}
.sec6 .swiper-prev::before{
    content:"\f053";
}
.sec6 .swiper-next::before{
    content:"\f054";
}
.sec6 h3{
    font-size:3em;
    margin-bottom:5%;
}
.sec6 h5{
    font-size:1.5em;
    line-height:1.25;
    margin-bottom:3.3%;
    padding:0 17.5%;
}
.sec6 p{
    font-size:1.25em;
    line-height:1.5;
    margin: 0 auto;
    width:88%;
    padding:0 3em;
    position:relative;
}
.sec6 p::before,.sec6 p::after{
    content:"";
    display:block;
    background-repeat:no-repeat;
    background-size:contain;
    width:2.6em;
    height:2.5em;
    position:absolute;
}
.sec6 p::before{
    background-image:url(../images/recruit_sec6_icon1.png);
    left:0;
    top:-1.5em;
}
.sec6 p::after{
    background-image:url(../images/recruit_sec6_icon2.png);
    right:0;
    bottom:1.5em;
}





.sec7{
    padding:8.3% 0 10.4%;
    color:#333;
}
.sec7 .title{
    text-align:center;
    margin-bottom:7.8%;
}
.sec7 h3{
    font-size:3em;
    margin-bottom:3.3%;
}
.sec7 h4{
    font-size:1.75em;
}
.sec7 .box{
    border-top:1px solid rgba(51, 51, 51, 0.1);
    padding:5% 0;
}
.sec7 .box:last-child{
    border-bottom:1px solid rgba(51, 51, 51, 0.1);
}
.sec7 h5{
    font-size:2em;
    color:var(--theme-purple);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction:row;
    cursor:pointer;
}
.sec7 h5::after{
    content:"+";
    display:block;
    margin-left:0.5em;
    flex-shrink:0;
}
.sec7 .box.active h5::after{
    content:"-";
}
/*.sec7 p,.sec7 .slide-box ol li{
    font-size:1.25em;
    line-height:1.5;
    margin-bottom:0.5em;
}*/
.sec7 .slide-box{
    margin-top:3.4%;
    display:none;
    font-size:1.25em;
    line-height:1.75;
}
/*.sec7 .slide-box ul > li{
    margin-bottom:4.85%;
}
.sec7 .slide-box ol{
    list-style-type:decimal;
    list-style-position:inside;
}*/
.sec7 .btn{
    margin-top:4.85%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    font-size:1.125em;
    position:relative;
    background-color:var(--theme-yellow);
    width:10.56em;
    height:2.6em;
    color:#fff;
    float:right;
    z-index:1;
}
.sec7 .btn::before{
    content:"";
    display:block;
    border:1px solid rgba(255,255,255,0.6);
    position:absolute;
    inset:0;
}
.sec7 .btn::after{
    font-family: 'FontAwesome400';
    content:"\f105";
    margin-left:0.5em;
}
.sec7 .btn input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}
.sec7 .btn .bgcolor{
    background-color:var(--theme-purple);
    height:100%;
    position:absolute;
    right:0;
    top:0;
    z-index:-1;
    transition:width 0.5s;
    width:0;
}


.sec8{
    background-color:#f7f7f9;
    padding:8.85% 0;
    color:#333;
    position:relative;
}
.sec8 .text-box{
    width:40%;
}
.sec8 .img-box{
    position:absolute;
    right:0;
    top:0;
    width:50.677%;
    height:100%;
    overflow:hidden;
}
.sec8 .img-box img{
    object-fit:cover;
    width:100%;
    height:100%;
}
.sec8 h5{
    font-size:1.75em;
    margin-bottom:0.7em;
}
.sec8 p{
    font-size:1.5em;
    line-height:1.5;
    margin-bottom:2em;
}
.sec8 li{
    font-size:1.5em;
    line-height:1.75;
    padding-left:1.75em;
}
.sec8 li img{
    width:0.9em;
    margin-left:-1.75em;
    margin-right:0.85em;
    vertical-align:middle;
}
.sec8 li b{
    vertical-align:middle;
}
@media only screen and (min-width:1025px){    
    .tab-control a:hover{
        color:var(--theme-purple);
    }
    .sec2 .swiper-prev:hover,.sec2 .swiper-next:hover{
        background-color:var(--theme-purple);
        color:#fff;
    }
    .sec6 .swiper-prev:hover,.sec6 .swiper-next:hover{
        background-color:var(--theme-purple);
        color:#fff;
    }
    .sec7 .btn:hover .bgcolor{
        width:100%;
        left:0;
        right:auto;
    }
}
@media only screen and (max-width:1024px){
    .section{
        font-size:1.25em;
    }

    .tab-control{
        justify-content:flex-start;
        padding:0 5%;
    }
    .tab-control.down{
        transform:translateY(8.5em);
    }
    .tab-control a{
        font-size:1.875em;
        white-space:nowrap;
    }

    .sec1{
        padding:15% 0;
    }
    .sec1 h3{
        margin-bottom:10%;
    }
    .sec1 h5{
        font-size:2em;
        max-width:none;
        margin-bottom:5%;
        text-align:center;
    }
    .sec1 .flex-box{
        display:block;
    }
    .sec1 .flex-box img{
        width:100%;
        margin-bottom:5%;
    }
    .sec1 .flex-box img.big{
        width:100%;   
        margin-bottom:5%;
    }
    .sec1 .flex-box img:last-child{
        margin-bottom:0;
    }


    .sec2{
        padding:15% 0;
    }
    .sec2 .flex-box{
        display:block;
        margin-bottom:5%;
    }
    .sec2 .flex-box img.big{
        width:100%;
    }
    .sec2 .flex-box h5{
        width:100%;
        font-size:2em;
        margin-bottom:5%;
    }
    .sec2 .relative-box{
        margin-left:5em;
        margin-right:5em;
    }
    .sec2 .swiper{
        overflow:visible;
    }


    .sec3{
        padding:15% 0;
    }



    .sec4{
        padding: 15% 0;
    }
    .sec4 h5{
        margin:10% 0;
    }



    .sec5{
        padding:15% 0;
    }
    .sec5 .inner{
        display:block;
    }
    .sec5 .text-box{
        width:100%;
        margin-bottom:10%;
    }
    .sec5 .img-box{
        width:100%;   
    }


    .sec6{
        padding:15% 0;
    }
    .sec6 .swiper-prev{
        right:auto;
        left:-5%;
    }
    .sec6 .swiper-next{
        left:auto;
        right:-5%;
    }
    .sec6 h3{
        font-size:3em;
        margin-bottom:10%;
    }
    .sec6 h5{
        margin-bottom:10%;
        padding:0;
    }




    .sec7{
        padding:15% 0;
    }
    .sec7 .title{
        margin-bottom:10%;
    }
    .sec7 h3{
        margin-bottom:5%;
    }
    .sec7 .box{
        padding:10% 0;
    }


    .sec8{
        padding:0;
    }
    .sec8 .text-box{
        width:100%;
        padding:15% 0;
    }
    .sec8 .img-box{
        position:static;
        width:100%;
        height:auto;
    }
    .sec8 .img-box img{
        width:100%;
    }
}