@charset "utf-8";
/* CSS Document */


#jobs{margin: 0 auto;}
#jobs>.display{margin: 0 auto; padding: 100px 0;}
#jobs>.display .title{ text-align: center; margin: 0 auto;}
#jobs>.display .title>.tit{font-size: 4rem; font-weight: normal; color: #333; }
#jobs>.display .list{margin: 0 auto; padding: 50px 0;}
#jobs>.display .list>ul>li{display: block;float: left; width: 31.33%; box-sizing: border-box; background: #fff;text-align: left; margin-bottom: 3%; margin-right:3%; overflow: hidden; transition: all .35s; }
#jobs>.display .list>ul>li:nth-child(3n){ margin-right: 0;}
#jobs>.display .list>ul>li>a{display: block; padding: 40px;}
#jobs>.display .list>ul>li>a .tit{font-size: 2rem; font-weight: bold; color: #333; overflow: hidden; text-overflow:ellipsis;white-space: nowrap; box-sizing: border-box; transition: all .35s;}
#jobs>.display .list>ul>li>a .box{ position: relative; text-align: left; padding: 15px 0;}
#jobs>.display .list>ul>li>a .box>p{line-height: 2.4rem; font-size: 1.4rem; color: #666;}
#jobs>.display .list>ul>li>a .view{text-align: left;}
#jobs>.display .list>ul>li>a .view>span{display: inline-block;color:#00a687;text-decoration: underline;}
#jobs>.display .list>ul>li:hover .tit{color: #154a9a;}
#jobs>.display .list>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}

#jobs>.view{ position: relative; margin:0 auto; width: 90%;}
#jobs>.view>.title{ text-align: left;font-size: 3.6rem; font-weight:700;color: #333; border-bottom: 1px solid #ddd; padding: 30px 0 10px 0; }
#jobs>.view>.close{ position: absolute;z-index: 43;right: 0;top: 20px; transition: all .5s;}
#jobs>.view>.close>i{font-size: 4.2rem; font-weight: 200; color: #154a9a; cursor: pointer;}
#jobs>.view>.close:hover{transform:rotate(180deg);}
#jobs>.view>.container{ position: relative; margin:40px auto 0 auto; overflow-y: auto;}
#jobs>.view>.container::-webkit-scrollbar {width:5px;height: 1px;}
#jobs>.view>.container::-webkit-scrollbar-thumb {background:#666;}
#jobs>.view>.container::-webkit-scrollbar-track { box-shadow: 0 0 0 rgba(255,255,255,1); border-radius: 10px;background: none;}
#jobs>.view>.container>.item{margin-bottom: 20px; width: 97%; }
#jobs>.view>.container>.item>.tit{ padding: 10px 0; font-size: 1.8rem; font-weight: bold; color: #154a9a;}
#jobs>.view>.container>.item>.con{ text-align: left; font-size: 1.4rem;color: #666; width: 100%;padding: 5px 0; box-sizing: border-box;}
#jobs>.view>.container>.row{background: #eee; padding: 5px 20px; font-size: 1.4rem;color: #666; margin-bottom: 20px;width: 97%; }
#jobs>.view>.container>.row>p{padding: 5px 0;}


#idea{background: #fff;margin: 0 auto;}
#idea>.display{padding: 100px 0;}
#idea>.display .title{ text-align: center; margin: 0 auto;}
#idea>.display .title>.tit{font-size: 4rem; font-weight: normal; color: #333; }
#idea>.display .title>.txt{ width: 60%; padding: 30px 0; margin: 0 auto; font-size: 1.6rem; color: #999;line-height: 2.4rem;}

#idea>.display .container{ margin: 0 auto; padding: 60px 0;}
#idea>.display .container>.item{ position: relative; width: 33.33%; border: 1px solid #ddd;margin-top: -1px; margin-left: -1px; float: left; padding: 100px 0; }
#idea>.display .container>.item>.ico{text-align: center;}
#idea>.display .container>.item>.ico>img{ width: 60px; height: auto; background: #154a9a; padding: 10px;border-radius: 100%;}
#idea>.display .container>.item>.box{ width: 100%; text-align: center; padding: 20px 0;}
#idea>.display .container>.item>.box>.tit{font-size: 2rem; color: #333; font-weight: bold;}
#idea>.display .container>.item>.box>.txt{ position: absolute;z-index: 10; left: 0;bottom: 0;  width: 100%;height: 100%; opacity: 0; text-align: left; font-size: 1.4rem; color: #fff; line-height: 2rem; padding: 50px; background: rgba(0,165,135,1); transition: all .35s;}
#idea>.display .container>.item>.box>.txt>h3{display: block; margin-bottom:30px; font-size: 2.4rem; font-weight: bold;}
#idea>.display .container>.item:hover .box>.txt{ opacity: 1; transform: translateY(0);}



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

    #jobs>.display .list>ul>li>a .box>.tit{font-size: 2.2rem;}

}




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

    #jobs>.display .list>ul>li>a .box>.tit{font-size: 2rem;}

}

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


    #idea>.display .title>.txt{ width: 80%; font-size: 1.4rem;}

}


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

    #jobs>.display{ padding-bottom: 0;}
    #jobs>.display .title>.tit{font-size: 3.2rem;}
    #jobs>.display .list>ul>li>a{padding: 30px;}
    #jobs>.display .list>ul>li>a .box>.tit{font-size: 1.8rem;}

    #jobs>.view>.container>.item{width: 100%;}
    #jobs>.view>.title>.tit{font-size: 3rem;}

    #idea>.display .title>.tit{font-size: 3.2rem;}
    #idea>.display .container>.item>.box>.txt{ font-size: 1.3rem; padding: 30px;}
    #idea>.display .container>.item>.box>.txt>h3{font-size: 2rem; }
    #idea>.display .container>.item>.box>.tit{font-size: 1.6rem;}


}


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


    #jobs>.display .list>ul>li{width: 48.5%; margin-right: 0; }
    #jobs>.display .list>ul>li:nth-child(even){ float: right;}


}




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

    #jobs{padding: 30px 0;}
    #jobs>.title{padding: 10px 0;}

    #jobs>.display .list>ul>li{width: 48%; margin-bottom: 3%; margin-right:0;}
    #jobs>.display .list>ul>li:nth-child(even){float: right;}



}

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

    #jobs>.display>.describe{ font-size: 1.4rem; line-height: 2.4rem; padding-bottom: 30px;}

    #jobs>.view>.title>.tit{font-size: 2.4rem;}
    #jobs>.view>.title>.expire{font-size: 1.4rem;}



    #idea>.display .title>.txt{ width: 100%; }
    #idea>.display .container>.item{ width: 50%;}


}


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

    #jobs>.display{padding: 50px 0;}
    #jobs>.display .title>.tit{font-size: 2.8rem;}
    #jobs>.display .list>ul>li{float: none; width:100%; }

    #jobs>.view>.title>.tit{font-size: 2rem;}
    #jobs>.view>.close>i{font-size: 3.2rem; }
    #jobs>.view>.container>.item>.tit{ font-size: 1.6rem;}
    #jobs>.view>.container>.item>.con>p{width: 100%;float: none;}


    #idea>.display .title>.tit{font-size: 2.8rem;}

    #idea>.display .container>.item{ width: 100%; float: none; }



}

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

    #jobs>.title>h3{ font-size: 2.4rem;}
    #jobs>.display{padding:30px 0;}


}