.inside_list .prototype-til{ padding-top: 35px; font-size: 28px;} .prototype-date{ padding: 15px; border-radius: 5px; margin-bottom: 25px; background: #f45c43; background: -moz-linear-gradient(left, #f45c43 0%, #eb3349 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349)); background: -webkit-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -o-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -ms-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: linear-gradient(to right, #f45c43 0%,#eb3349 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );} .prototype-date .cont_head{ padding-bottom: 0; color: #fff;} .prototype-client{ position: relative; float: right; width: 125px; height: 24px;} .prototype-client i{ position: absolute; bottom: 0; right: 0;} .prototype-client i img{ height: 130px;} .prototype-client span{ position: absolute; top: 50%; right: 50%;} .prototype-client span img{transform: translate(50%, -50%);} .prototype-text h3{ padding-left: 45px; font-size: 24px; font-weight: bold; line-height: 48px; margin-bottom: 15px; position: relative; } .prototype-text h3:before,.prototype-text h3:after{ position: absolute; left: 0; top: 40%; content: ""; width: 20px; height: 20px; border-radius: 0%; transform: rotate(20deg); background: #eb3349;} .prototype-text h3:before{transform: rotate(30deg) translate(0, -55%); background: #ffb8b8;} .prototype-text h3:after{transform: rotate(40deg) translate(30%, -35%); background: #ed5a5a;} .prototype-text h4{ padding-left: 45px; font-size: 20px; font-weight: bold; line-height: 48px; margin-bottom: 15px; position: relative;} .prototype-text h4:before{ position: absolute; left: 0; top: 50%; content: ""; width: 20px; height: 20px; border-radius: 0%; transform: rotate(20deg); background: #eb3349;} .prototype-text h4:before{transform: rotate(30deg) translate(10%, -50%); background: #ffb8b8;} .prototype-text ul li{ padding-left: 45px; list-style: none; position: relative;} .prototype-text ul li:before{ position: absolute; left: 0; top: 5px; content: ""; width: 23px; height: 23px; padding: 4px; border-radius: 50%; border: 1px dashed #fff; background: #ed5a5a;box-shadow:0 0 0 4px #fff inset;} .prototype-text ul li:after{ position: absolute; left: 11px; top: 30px; content: ""; width: 0px; height: 100%; display: block; border-right: 1px dashed #ed5a5a;} .prototype-text ul li:last-child:after{ display: none;} h3.prototype-text-head1{ padding-left: 45px; font-size: 24px; font-weight: bold; line-height: 48px; margin-bottom: 15px; position: relative; } h3.prototype-text-head1:before,h3.prototype-text-head1:after{ position: absolute; left: 0; top: 40%; content: ""; width: 20px; height: 20px; border-radius: 0%; transform: rotate(20deg); background: #eb3349;} h3.prototype-text-head1:before{transform: rotate(30deg) translate(0, -55%); background: #ffb8b8;} h3.prototype-text-head1:after{transform: rotate(40deg) translate(30%, -35%); background: #ed5a5a;} h4.prototype-text-head2{ padding-left: 45px; font-size: 20px; font-weight: bold; line-height: 48px; margin-bottom: 15px; position: relative;} h4.prototype-text-head2:before{ position: absolute; left: 0; top: 50%; content: ""; width: 20px; height: 20px; border-radius: 0%; transform: rotate(20deg); background: #eb3349;} h4.prototype-text-head2:before{transform: rotate(30deg) translate(10%, -50%); background: #ffb8b8;} ul.prototype-text-list1 li{ padding-left: 45px; list-style: none; position: relative;} ul.prototype-text-list1 li:before{ position: absolute; left: 0; top: 5px; content: ""; width: 23px; height: 23px; padding: 4px; border-radius: 50%; border: 1px dashed #fff; background: #ed5a5a;box-shadow:0 0 0 4px #fff inset;} ul.prototype-text-list1 li:after{ position: absolute; left: 11px; top: 30px; content: ""; width: 0px; height: 100%; display: block; border-right: 1px dashed #ed5a5a;} ul.prototype-text-list1 li:last-child:after{ display: none;} .prototype-list-ico{ position: absolute; left: 0; top: 5px; width: 23px; height: 23px; padding: 4px; border-radius: 50%; border: 1px dashed #ed5a5a; background: #fff;} .prototype-list-ico:before{ width: 100%; height: 100%; display: block; content: ""; border-radius: 50%; background: #ed5a5a;} .prototype-btn{ display: inline-block; padding: 3px 10px 3px 15px; height: 32px; border-radius: 16px; color: #fff !important; background: #f45c43; background: -moz-linear-gradient(left, #f45c43 0%, #eb3349 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349)); background: -webkit-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -o-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: -ms-linear-gradient(left, #f45c43 0%,#eb3349 100%); background: linear-gradient(to right, #f45c43 0%,#eb3349 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );} .prototype-btn-text{ height: 20px; line-height: 20px; margin: 3px 0; display: inline-block; overflow: hidden; vertical-align: top; position: relative;} .prototype-btn-ico{ position: relative; display: inline-block; width: 26px; height: 26px; margin:0 3px; vertical-align: top;} .prototype-btn-ico span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .prototype-btn-ico svg{ width: 100%; height: 100%;} .prototype-btn-ico path{ fill: #fff;} .prototype-img-desc{ font-size: 14px; color: #777;} .prototype-module{ max-width: 720px; margin: 0 auto 30px; padding: 30px; border-radius: 15px; border: 1px solid #ed5a5a;} .prototype-module .prototype-module-til{ position: relative; font-size: 32px; font-weight: bold; line-height: 44px; padding: 10px 0; margin-right: 120px; color: #fff; background: #ed5a5a; display: inline-block;} .prototype-module .prototype-module-til::before{ content: " "; position: absolute; top: 0; bottom: 0px; width: 60px; right: 100%; border-radius: 15px 0 0 15px; background: rgba(237,90,90,1);} .prototype-module .prototype-module-til::after{ content: " "; position: absolute; top: 0; bottom: 0px; width: 150px; left: 100%; background: rgba(237,90,90,1); background: -moz-linear-gradient(left, rgba(237,90,90,1) 0%, rgba(237,90,90,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(237,90,90,1)), color-stop(100%,rgba(237,90,90,0))); background: -webkit-linear-gradient(left, rgba(237,90,90,1) 0%,rgba(237,90,90,0) 100%); background: -o-linear-gradient(left, rgba(237,90,90,1) 0%,rgba(237,90,90,0) 100%); background: -ms-linear-gradient(left, rgba(237,90,90,1) 0%,rgba(237,90,90,0) 100%); background: linear-gradient(to right, rgba(237,90,90,1) 0%,rgba(237,90,90,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(237,90,90,1)', endColorstr='rgba(237,90,90,0)',GradientType=1 );} .prototype-module .prototype-module-img{ margin-bottom: 30px;} .prototype-module .prototype-module-desc{ color: #333333;} .prototype-module .prototype-module-tag{ display: flex; flex-wrap: wrap;} .prototype-module .prototype-module-tag p{ width: 50%;} .prototype-module .prototype-module-tag p span{ font-weight: bold;} .prototype-module .prototype-module-text{ margin-bottom: 0;} .wrap_text{display:inline-block} .buildin-btn-text{position:absolute;left:0;top:0;z-index:9;width:100%;transform:translateY(100%)} .buildin-btn-text .btn-letter{opacity:0} .btn-letter{display:inline-block;position:relative;transition:transform 300ms,opacity 300ms ease} .current-btn-text .btn-letter:nth-child(1){transition-delay:49ms} .current-btn-text .btn-letter:nth-child(2){transition-delay:99ms} .current-btn-text .btn-letter:nth-child(3){transition-delay:149ms} .current-btn-text .btn-letter:nth-child(4){transition-delay:199ms} .current-btn-text .btn-letter:nth-child(5){transition-delay:249ms} .current-btn-text .btn-letter:nth-child(6){transition-delay:299ms} .current-btn-text .btn-letter:nth-child(7){transition-delay:349ms} .current-btn-text .btn-letter:nth-child(8){transition-delay:399ms} .current-btn-text .btn-letter:nth-child(9){transition-delay:449ms} .current-btn-text .btn-letter:nth-child(10){transition-delay:499ms} .current-btn-text .btn-letter:nth-child(11){transition-delay:549ms} .current-btn-text .btn-letter:nth-child(12){transition-delay:599ms} .current-btn-text .btn-letter:nth-child(13){transition-delay:649ms} .current-btn-text .btn-letter:nth-child(14){transition-delay:699ms} .current-btn-text .btn-letter:nth-child(15){transition-delay:749ms} .current-btn-text .btn-letter:nth-child(16){transition-delay:799ms} .current-btn-text .btn-letter:nth-child(17){transition-delay:849ms} .current-btn-text .btn-letter:nth-child(18){transition-delay:899ms} .current-btn-text .btn-letter:nth-child(19){transition-delay:949ms} .current-btn-text .btn-letter:nth-child(20){transition-delay:999ms} .current-btn-text .btn-letter:nth-child(21){transition-delay:1049ms} .current-btn-text .btn-letter:nth-child(22){transition-delay:1099ms} .current-btn-text .btn-letter:nth-child(23){transition-delay:1149ms} .current-btn-text .btn-letter:nth-child(24){transition-delay:1199ms} .current-btn-text .btn-letter:nth-child(25){transition-delay:1249ms} .current-btn-text .btn-letter:nth-child(26){transition-delay:1299ms} .current-btn-text .btn-letter:nth-child(27){transition-delay:1349ms} .current-btn-text .btn-letter:nth-child(28){transition-delay:1399ms} .current-btn-text .btn-letter:nth-child(29){transition-delay:1449ms} .current-btn-text .btn-letter:nth-child(30){transition-delay:1499ms} .buildin-btn-text .btn-letter:nth-child(1){opacity:0;transition-delay:49ms} .buildin-btn-text .btn-letter:nth-child(2){opacity:0;transition-delay:99ms} .buildin-btn-text .btn-letter:nth-child(3){opacity:0;transition-delay:149ms} .buildin-btn-text .btn-letter:nth-child(4){opacity:0;transition-delay:199ms} .buildin-btn-text .btn-letter:nth-child(5){opacity:0;transition-delay:249ms} .buildin-btn-text .btn-letter:nth-child(6){opacity:0;transition-delay:299ms} .buildin-btn-text .btn-letter:nth-child(7){opacity:0;transition-delay:349ms} .buildin-btn-text .btn-letter:nth-child(8){opacity:0;transition-delay:399ms} .buildin-btn-text .btn-letter:nth-child(9){opacity:0;transition-delay:449ms} .buildin-btn-text .btn-letter:nth-child(10){opacity:0;transition-delay:499ms} .buildin-btn-text .btn-letter:nth-child(11){opacity:0;transition-delay:549ms} .buildin-btn-text .btn-letter:nth-child(12){opacity:0;transition-delay:599ms} .buildin-btn-text .btn-letter:nth-child(13){opacity:0;transition-delay:649ms} .buildin-btn-text .btn-letter:nth-child(14){opacity:0;transition-delay:699ms} .buildin-btn-text .btn-letter:nth-child(15){opacity:0;transition-delay:749ms} .buildin-btn-text .btn-letter:nth-child(16){opacity:0;transition-delay:799ms} .buildin-btn-text .btn-letter:nth-child(17){opacity:0;transition-delay:849ms} .buildin-btn-text .btn-letter:nth-child(18){opacity:0;transition-delay:899ms} .buildin-btn-text .btn-letter:nth-child(19){opacity:0;transition-delay:949ms} .buildin-btn-text .btn-letter:nth-child(20){opacity:0;transition-delay:999ms} .buildin-btn-text .btn-letter:nth-child(21){opacity:0;transition-delay:1049ms} .buildin-btn-text .btn-letter:nth-child(22){opacity:0;transition-delay:1099ms} .buildin-btn-text .btn-letter:nth-child(23){opacity:0;transition-delay:1149ms} .buildin-btn-text .btn-letter:nth-child(24){opacity:0;transition-delay:1199ms} .buildin-btn-text .btn-letter:nth-child(25){opacity:0;transition-delay:1249ms} .buildin-btn-text .btn-letter:nth-child(26){opacity:0;transition-delay:1299ms} .buildin-btn-text .btn-letter:nth-child(27){opacity:0;transition-delay:1349ms} .buildin-btn-text .btn-letter:nth-child(28){opacity:0;transition-delay:1399ms} .buildin-btn-text .btn-letter:nth-child(29){opacity:0;transition-delay:1449ms} .buildin-btn-text .btn-letter:nth-child(30){opacity:0;transition-delay:1499ms} .prototype-btn:hover .current-btn-text .btn-letter{opacity:0;transform:translateY(-100%)} .prototype-btn:hover .buildin-btn-text .btn-letter{opacity:1;transform:translateY(-100%)}