@charset "utf-8";

#career{margin: 0 auto; }
#career .wrap{margin: 0 auto;max-width: 1600px;padding: 100px 0;}
#career .title{ font-size: 4rem;}
#career .describe{ padding: 20px 0; font-size: 1.6rem; color: #666; line-height: 2.8rem;}

#career .container{margin: 0 auto;}
#career .container>.item{ background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.02); margin: 50px auto;}
#career .container>.item>.img{ width: 50%;  float: right; overflow: hidden;}
#career .container>.item>.img>img{width: 100%;height: auto; transition: all .8s;}
#career .container>.item>.box{width: 50%; float: left; overflow: hidden; box-sizing: border-box;padding: 100px; text-align: left;}
#career .container>.item>.box>.title{ position: relative; font-size: 2.4rem;font-weight: bold; padding-bottom: 20px; transition: all .35s;}
#career .container>.item>.box>.title:after{position: absolute;z-index: 1;left: 0; bottom: 0;width: 40px;height: 1px; background: #1e2687; content: '';}
#career .container>.item>.box>.text{padding-top: 30px; font-size: 1.6rem; color: #999; line-height: 3rem;}
#career .container>.item:nth-child(even) .img{ float: left;}
#career .container>.item:nth-child(even) .box{float: right;}
#career .container>.item:hover .box>.title{color: #1e2687;}
#career .container>.item:hover .img>img{transform: scale(1.1)}


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

    #career .container>.item>.box{padding: 80px;}

}

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

    #career .container>.item>.box{padding: 50px; padding-bottom: 0;}

}


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

    #career .wrap{padding: 50px 0;}

    #career .title{ font-size: 3.2rem;}
    #career .describe { font-size: 1.4rem;}

    #career .container>.item>.box>.text { font-size: 1.5rem; line-height: 2.8rem;}

}

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

    #career .container>.item>.box>.title {font-size: 2rem;}
    #career .container>.item>.box>.text { font-size: 1.4rem; line-height: 2.4rem;}

}


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

    #career .container>.item>.img{ width: 100%;  float: none!important;}
    #career .container>.item>.box{ width: 100%;float: none!important;padding-bottom: 50px;}

}

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

    #career .title{ font-size: 3rem;}

}


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

    #career .title{ font-size:2.4rem;}
    #career .title>span{display: block;}

    #career .container>.item>.box>.title { font-size: 1.8rem;}

    #career .container>.item>.box{padding: 30px!important;}
}