1 line
6.8 KiB
CSS
1 line
6.8 KiB
CSS
|
*{box-sizing:content-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-align:center}header *{box-sizing:border-box}header a{text-align:left}nav{width:100%;overflow:hidden;position:relative}nav video{width:100%;vertical-align:middle}nav h3{font-size:36px;margin:60px auto 160px;color:#fff;text-align:center}nav p{font-size:13px;line-height:2;color:#fff;text-align:center;opacity:.8}nav a{position:absolute;left:50%;bottom:40px;display:block;transform:translateX(-50%);width:195px;height:50px;line-height:50px;border-radius:10px;border:solid 1px #fff;color:#fff;transition:all .3s ease-in-out}nav a:hover{color:#1881c9;border:1px solid #1881c9}main{max-width:1200px;margin:0 auto;padding:80px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;align-items:flex-start}main .case-left{position:sticky;top:78px;width:18%;padding:30px 0;background-color:#f5f6f7}main .case-left h3{font-size:18px;margin-bottom:20px;text-indent:20px}main .case-left a{display:block;width:100%;height:56px;line-height:56px;font-size:16px;color:#4d4d4d}main .case-left a.active{background-color:#fff;color:#1881c9}main .case-left a:hover{color:#1881c9}main .case-right{width:74%}.case-top{background-image:linear-gradient(-21deg, #ff5549 0%, #fe8e84 100%),linear-gradient(#f8756b, #f8756b);width:86%;height:120px;border-radius:5px;padding:0 7%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;flex-wrap:nowrap}.case-top .case-top-right{width:100%;margin-left:50px}.case-top .case-top-right div{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.case-top .case-top-right div p{font-size:18px;color:#fff;font-weight:bold;line-height:2}.case-top .case-top-right div a{display:block;width:105px;height:28px;line-height:28px;color:#fff;border-radius:10px;border:solid 1px #fefeff;opacity:.8;transition:all .3s ease-in-out}.case-top .case-top-right div a:hover{opacity:1}.case-top .case-top-right hr{opacity:.6}.case-con-wrap{width:100%}.case-con{width:100%;margin:40px 0 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;align-items:flex-start;flex-wrap:nowrap}.case-con .case-con-img{display:flex;align-items:center;justify-content:center;width:22.5%;height:22.5%;aspect-ratio:1/1;min-width:22%;border-radius:5px;background-color:#f5f6f7;max-height:194px}.case-con .case-con-img h4{width:90%;font-weight:bold;text-align:center;font-size:16px}.case-con .case-con-img img{width:100%;max-height:194px}.case-con-right{width:100%;padding:0 40px;border-radius:5px;border:solid 1px #e6e9eb}.case-con-right div{display:flex;line-height:1.6}.case-con-right div i{display:block;font-style:normal;min-width:70px}.case-con-right div em{display:block;font-style:normal;min-width:70px}.case-con-right div p a{color:#f57c73}.case-con-right div:first-child{min-height:44.8px}.case-con-right .case-con-right-bottom{display:flex;align-items:center}.case-con-right .case-con-right-bottom a{color:#f57c73;margin:0 20px 0 10px;display:flex;align-items:center}.case-con-right .case-con-right-bottom a img{max-width:20px;margin-right:10px}.case-con-right div{margin:20px auto}.case-con-bottom{width:100%}.case-con-bottom h3{font-size:30px;line-height:6;text-align:center}.case-con-bottom .case-con-more{display:flex;justify-content:space-between;flex-wrap:wrap}.case-con-bottom .case-con-more p{width:23%;margin-bottom:2%;text-align:center;line-height:45px;height:45px;border-radius:4px;background-color:#f7f9fa;font-size:16px;color:#282b42}.case-con-bottom .case-con-more img{width:22%;margin-right:4%;margin-bottom:2%}.case-con-bottom .case-con-more img:nth-child(4n+4){margin-right:0}.case-con-bottom a{display:block;width:200px;height:56px;line-height:56px;margin:80px auto 0;text-align:center;color:#fff;background-image:linear-gradient(-21deg, #ff5549 0%, #fe8e84 100%),linear-gradient(#e53a2b, #e53a2b);border-radius:10px}.fix-box{box-sizing:border-box}.fix-box *,.fix-box *:before,.fix-box *:after{box-sizing:inherit}@media screen and (max-width: 768px){*{box-sizing:bor
|