.patentTitle{ clear: both; text-align: center; } .patentTitle h2{ font-size: 26px; color: #323131; } .patentTitle span{ display: inline-block; width: 54px; height: 4px; background: #1697e9; } .patentHeader{ width: 100%; height:396px; position: relative; margin-bottom: 77px; } .patentAchievement a{ background: #fff; width: 120px; height: 36px; line-height: 32px; display: inline-block; text-align: center; position: absolute; bottom:120px; left:770px; z-index: 20; color: #40acff; font-size: 16px; border: 2px solid #40acff; } .patentAchievement a:hover{ background: #40acff; color: #ffffff; } .patentHeader .patentAchievement{ position: absolute; left: 50%; z-index: 10; transform: translateX(-50%); } .patentAchievement .patentTop{ position: absolute; top: 88px; left: 50%; transform: translateX(-50%); } .patentAchievementList{ position: relative; z-index: 20; height: 400px; margin-bottom: 58px; } .patentAchievementList .patentAchievLeft{ position: absolute; left: 80px; top: 0; width: 272px; height: 360px; position: relative; display: flex; display: -webkit-flex; justify-content: space-between; z-index: 26; overflow: hidden; } .patentAchievementList .patentAchievLeft img{ width: 100%; height: 250px; display: inline-block; position: absolute; top: 55px; left:0px; z-index: 30; } .patentAchievementList .patentAchievLeft img:after{ content: ''; width: 45px; height: 45px; position: absolute; bottom:-50px; right:-27px; background: #1697e9; transform: rotate(45deg); box-shadow: -2px 10px 20px #ccc; } .patentAchievementList .patentAchievLeft img:before{ content: ''; width: 45px; height: 45px; position: absolute; top: -50px; left:-27px; background: #1697e9; transform: rotate(45deg); box-shadow:8px -3px 20px #ccc; } .patentAchievementList .patentAchievLeft .remark{ position: absolute; width: 100%; height: 100%; overflow: hidden; left: 0px; bottom: 0; z-index: 30; background: rgba(47, 87, 176, .5); transition: all .2s ease-in; } .patentAchievementList .patentAchievLeft:hover .remark{ height: 100%; transition: all .2s ease-in-out } .patentAchievementList .patentAchievLeft .remark p{ margin-left: 70px; margin-top: 72px; width: 190px; font-size: 18px; color: #ffffff; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp:3; line-height: 32px; } .patentAchievementList .patentAchievLeft .remark a{ width: 110px; height: 34px; display: inline-block; text-align: center; color: #ffffff; border: 2px solid #ffffff; line-height: 30px; margin-left: 140px; margin-top: 47px; } .patentAchievementList .patentAchievLeft .remark a:hover{ color: #f3f9fc; background: #1697e9; border: 2px solid #1697e9; } .patentAchievementList .patentAchievRight{ position: absolute; top: 0; right: 0; width: 800px; z-index: 32; } .patentAchievementList ul{ width: 100%; display: flex; display: -webkit-flex; justify-content: space-around; height: 270px; } .patentAchievRight .achievementJump{ width: 410px; height: 50px; margin-top: 30px; } .patentAchievementList ul li{ width: 254px; text-align: center; height: 280px; background: #ffffff; } .achievementJump a,.achievementJump span{ width: 190px; height: 50px; display: inline-block; text-align: center; line-height: 46px; color: #40acff; font-size: 24px; cursor: pointer; border: 2px solid #40acff; border-radius: 5px; } .achievementJump span{ background: #40acff; margin-left: 25px; color: #fff; } .patentAchievementList ul li div{ width: 254px; height: 230px; overflow: hidden; } .patentAchievementList ul li div img{ width: 100%; height: 100%; } .patentAchievementList ul li p{ padding: 0px 22px 0px; height: 50px; line-height: 50px; font-size: 18px; color: #1f1f1f; text-align: left; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; } .patentAchievementListBj{ background: #f9f9f9; height: 350px; width: 100%; position: absolute; top: 50px; z-index: 21; } .patentAchievementList ul li:hover{ box-shadow: 0 4px 10px #ccc; margin-top: -4px; transition: all .2s ease-in-out; } /* 解决技术难题 */ .patentSolve{ margin-top: 13px; margin-bottom: 86px; width: 100%; height: 475px; background: url(../../../img/patent/patent_jiejue.jpg)no-repeat; background-size:100% 100%; } .patentSolve .patentSolveBody{ position: relative; z-index: 40; height: 475px } .patentSolveBody ul{ position: absolute; right: 0; top: 35%; transform: translateY(-50%); height:246px; width:660px; z-index: 192; display: flex; display: -webkit-flex; justify-content: space-between; } .patentSolveBody ul li{ width: 320px; height: 320px; background: #ffffff; transition: all .2s ease-in } .patentSolveBody ul li div{ position: relative; z-index: 40; width: 100%; height: 270px; overflow: hidden; } .patentSolveBody ul li div img{ width: 100%; height: 100%; display: inline-block; } .patentSolveBody{ text-align: center } .patentSolveBody ul li div a{ position: absolute; bottom: 15px; left: 50%; width: 120px; height: 34px; line-height: 30px; background: #ffffff; border: 2px solid #40acff; color: #40acff; text-align: center; margin-left: -60px; } .patentSolveBody ul li div a:hover{ background: #1697e9; color: #ffffff; border-color: #1697e9; } .patentSolveBody ul li:hover{ margin-top: -6px; box-shadow: 0 4px 10px #ccc; transition: all .2s ease-in-out } .patentSolveBody ul li p{ font-size: 17px; color: #1f1f1f; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -o-text-overflow: ellipsis; height: 50px; line-height: 50px; padding: 0 15px; } .patentSolveBody>a{ position: absolute; bottom: 30px; left: 50%; margin-left: -60px; width: 120px; height: 36px; line-height: 32px; text-align: center; font-size: 16px; color: #40acff; border: 2px solid #40acff; } .patentSolveBody>a:hover{ background: #1697e9; color: #ffffff; border-color:#1697e9; } /*知识产权交易政策 */ /* 政策咨询 */ .news{ display: flex; display: -webkit-flex; justify-content: space-between; } .news div{ width:578px; margin-top: 28px; } .news div h4{ font-size: 18px; color: #323131; font-weight: normal } .news div h4 img{ float: right; margin-bottom: 24px; } .news div ul{ clear: both; } .news div ul li a{ display: flex; display: -webkit-flex; justify-content: space-between; } .news div ul li a .newTxt{ width: 476px; } .news div ul li a .time{ width: 75px; height: 74px; text-align: center; background: #f4f4f4; padding-top: 16px; } .news div ul li a .time span{ display: inline-block; margin-bottom: 4px; color: #000000; font-size: 16px; } .news div ul li a .time span:nth-child(2){ font-weight: 800 } .news div ul li a .newTxt h5{ font-weight: normal; color: #1f1f1f; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; margin-bottom: 10px; } .news div ul li a .newTxt p{ font-size: 14px; color: #7a7878; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp:2; } .news div ul li a:hover .time{ background: #1697e9; } .new .policy>img{ width: 565px; height: 115px; } .news div ul li a:hover .time span{ color: #ffffff; } .news div ul li a:hover .newTxt h5{ color: #1697e9; } .consultation ul li .time { margin-top: 20px; } .more{ clear: both; overflow: hidden; float:right; font-size: 14px; color: #323131; margin-top: 15px; margin-bottom: 50px; } .more:hover{ color: #1697e9; } .more:hover span{ background: #1697e9; } .more:hover span::after{ background: #1697e9; } .more span{ display: inline-block; width: 22px; height: 1px; margin-left: 10px; margin-right: 8px; background: #323131; vertical-align: top; margin-top: 9px; } .more span:after{ content: ''; width: 6px; height: 1px; display: inline-block; background:#323131; transform: rotate(45deg); vertical-align: top; margin-left: 16px; margin-top: -2px; } .expert{ clear: both; margin-top: 20px; } .expert h5{ font-weight: normal; padding-left: 18px; border-left: 4px solid #1697e9; height:30px; line-height: 27px; font-size: 26px; color: #2f2f2f; } .expertList { display: flex; display: -webkit-flex; justify-content: space-between; margin-top: 28px; margin-bottom: 15px; } .expertList ul { display: flex; display: -webkit-flex; justify-content: space-between; width: 794px; } .expertList ul li{ width: 257px; height: 370px; background: #f9f9f9; transition: all .2s ease-in-out; text-align: center; border-bottom: 4px solid transparent; } .expertList ul li div{ width: 100%; } .expertList ul li div img{ width: 140px; height: 140px; margin: 37px auto 33px; display: inline-block; border-radius: 50%; } .expertList ul li h3{ font-weight: normal; font-size: 22px; margin-left: 8px; color: #1f1f1f; padding: 0 10px; height: 42px; line-height: 42px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; } .expertList ul li h3 span{ font-size: 18px; display: inline-block; margin-left: 12px; color: #1797e9; vertical-align: top } .expertList ul li p{ padding: 0 50px; font-size: 14px; color: #707070; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp:3; margin-top: 12px; } .expertList .expertImg{ width: 380px; height: 400px; margin-top: -30px; } .expertList .expertImg img{ width: 100% ; height: 100%; display: inline-block; } .expertList ul li:hover{ box-shadow: 0 0px 15px #ccc; margin-top: -4px; transition: all .2s ease-in-out; border-bottom: 4px solid #1697e9; } .trandPg{ width: 1200px; margin: 50px auto 40px; height: 390px; background: url(../../../img/patent/tradingIndexPg.jpg)no-repeat; background-size:100% 100%; position: relative; } .trandPg span{ display: inline-block; width: 110px; height: 34px; border-radius: 5px; background: #1697e9; color: #FFF; font-size: 18px; text-align: center; line-height: 34px; position: absolute; bottom: 104px; left: 30px; cursor: pointer; } .demandJump{ width: 410px; position: absolute; bottom: 38px; left: 50%; margin-left: -60px; } .demandJump a,.demandJump span{ display: inline-block; width: 190px; height: 50px; line-height: 48px; border-radius: 5px; color: #fff; background: rgba(0, 0, 0, .3); font-size: 24px; cursor: pointer; } .demandJump a{ } .demandJump span{ background: #1697e9; margin-left: 25px; } .trandPg:hover span{ animation:myBig .5s infinite; -webkit-animation:myBig .5s infinite; /* Safari 和 Chrome */ } .topHeader{ border-bottom: 1px solid #ececec; } .Entrance { clear: both; margin-top: 27px; margin-bottom: 44px; } .Entrance ul{ display: flex; display: -webkit-flex; justify-content: space-around; } .Entrance ul li{ cursor: pointer; width: 284px; height: 108px; line-height: 108px; background: url(../../../img/patent/tradingIndex_indexBj.jpg) no-repeat; background-size:100% 100%; font-size: 22px; color: #5e5e5e; } .Entrance ul li a{ color: #5e5e5e } .Entrance ul li a img{ margin-left: 45px; margin-right: 15px; } .Entrance ul li:hover{ box-shadow: 0 0 20px #ccc; } .Entrance ul li:hover a{ color: #1697e9; } @keyframes myBig{ 0%{transform: scale(1);box-shadow:0 0px 2px #ccc; } 50%{transform: scale(1.2);box-shadow:0 6px 20px #606363;} 100%{transform: scale(1);box-shadow:0 0px 2px #ccc;} } @media screen and (max-width:1200px){ body{ width: 1200px; margin: 0 auto; } .patentHeader,.patentSolve{ width: 1200px!important; margin: 0 auto; } }