@charset "utf-8";
/* CSS Document */
@import url('https://fonts.font.im/css?family=Aldrich');

#talent{margin: 0 auto; padding: 150px 0;}

#talent .title{ position: relative; text-align: center; margin: 0 auto;}
#talent .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}
#talent .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; transform: translateX(-50%); content: '';}
#talent .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}
#talent .layout{margin: 0 auto; padding: 100px 0; }
#talent .layout>.content{margin: 0 auto; padding: 80px 0;}
#talent .layout>.content>.text{text-align: center; width: 70%;margin: 0 auto; font-size: 1.6rem; color: #333;line-height: 3rem;}
#talent .layout>.content>.text>span{position: relative; padding: 20px;}
#talent .layout>.content>.text>span:after{position: absolute;z-index: 12; left: -40px; top: 10px; font-size: 8rem; font-family: Arial; font-style: italic; color: #c7000c; width: 80px; ; content: '“';}
#talent .layout>.content>.text>span:before{ position: absolute;z-index: 12; right: -30px;bottom: -20px; font-size: 8rem; font-family: Arial; font-style: italic; color: #c7000c; width: 80px;  content: "”";}
#talent .layout>.project{margin: 0 auto; padding-top: 50px;}
#talent .layout>.project>.rows{ position: relative; display: block; float: left; width: 48%; margin-bottom: 5%; background: #f6f6f6;padding: 50px; box-sizing: border-box; border-radius: 16px; transition: all .3s;}
#talent .layout>.project>.rows:nth-child(even){float: right; transform: translateY(60px);}
#talent .layout>.project>.rows:after{position: absolute;z-index: 1; right: 0;bottom: 0; width: 100%;height: 100%;opacity: .3; background: url("../img/logo_s.png") no-repeat; background-position: right bottom; content: '';transition: all .35s;}
#talent .layout>.project>.rows .ico{position: relative;z-index: 20; text-align: center; padding: 20px 0;overflow: hidden; transition: all .35s;}
#talent .layout>.project>.rows .ico>img{height: 50px; width: auto;}
#talent .layout>.project>.rows .num{position: relative;z-index: 20; text-align: center;display: none; padding: 20px 0; height: 50px; line-height: 50px;}
#talent .layout>.project>.rows .num>span{ display: inline-block; font-family: 'Aldrich', sans-serif; font-size: 3rem;  color: #fff;}
#talent .layout>.project>.rows .tit{position: relative;z-index: 20; font-size: 2rem; font-weight: bold; color: #c7000c; text-align: center; transition: all .35s;}
#talent .layout>.project>.rows .txt{ position: relative;z-index: 20; padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; text-align: center; color: #666; transition: all .35s;}
#talent .layout>.project>.rows:hover{ background: #c7000c; background: linear-gradient(to bottom, #c7000c 0%, #efba84 100%); box-shadow: 4px 3px 20px rgba(0,0,0,.06); transform: translateY(-10px);}
#talent .layout>.project>.rows:hover .tit{color: #fff; transform: translateY(50px)}
#talent .layout>.project>.rows:hover .txt{color: rgba(255,255,255,.8);}
#talent .layout>.project>.rows:hover .ico{opacity: 0; height: 0;overflow: hidden;}
#talent .layout>.project>.rows:hover .num{display: block; opacity: 1; transform: translateY(-40px)}




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

    #talent .title>h3{ font-size: 3.2rem;}
    #talent .title>h4{font-size: 4.5rem;}

    #talent .layout>.content>.text{ width: 80%;font-size: 1.4rem; line-height: 2.4rem;}
    #talent .layout>.content>.text>span:after{ font-size: 7rem; top: 20px;}
    #talent .layout>.content>.text>span:before{ font-size: 7rem; bottom: -10px;}

}


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

    #talent .title>h3{ font-size: 2.8rem;}
    #talent .title>h4{font-size: 4rem;}


    #talent .layout>.project>.rows .tit{font-size: 1.8rem; }
    #talent .layout>.project>.rows .txt{ font-size: 1.4rem; line-height: 2.4rem; }
}

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

    #talent .layout{ padding: 50px 0; }
    #talent .layout>.content{ padding:0;}
    #talent .layout>.project>.rows{ float: none; width: 100%; margin-bottom: 20px;}
    #talent .layout>.project>.rows:nth-child(even){float: none; transform: translateY(0);}


}


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

    #talent{ padding: 60px 0;}

    #talent .title>h3{ font-size: 2.4rem; padding: 15px 0;}
    #talent .title>h4{font-size: 2.4rem;}


    #talent .layout>.content>.text{ font-size: 1.2rem; line-height: 2rem; color: #666;}
    #talent .layout>.content>.text>span:after{ font-size: 5rem;}
    #talent .layout>.content>.text>span:before{ font-size: 5rem; }


}