/*-------------------- 4. Sections --------------------*/ .section-title h2 { font-size: 36px; /*color: #B3B3BB;*/ color: #424242; font-weight: 300; letter-spacing: 3px; position: relative; margin: 0 0 10px 0; -webkit-font-smoothing: antialiased; /*padding-bottom: 15px;*/ } /*.section-title h2:after {*/ /*left: 50%;*/ /*z-index: 1;*/ /*width: 60px;*/ /*height: 3px;*/ /*content: " ";*/ /*bottom: -5px;*/ /*margin-left: -30px;*/ /*text-align: center;*/ /*position: absolute;*/ /*background: #D4D4D4;*/ /*}*/ .dark-bg .section-title h2 { color: #fff; } .section-title p { font-size: 20px; /*font-weight: 100;*/ color: #666666; line-height: 23px; letter-spacing: 1px; -webkit-font-smoothing: antialiased; } .section-title p.section-title-p.cyxy-trs-source[contenteditable='true']{ margin-top: -50px !important } /*@media (min-width: 800px){*/ /*.section-title p.section-title-p.cyxy-trs-source {*/ /*margin: 0;*/ /*}*/ /*}*/ .section-title div { font-size: 20px; /*font-weight: 100;*/ color: #666666; line-height: 23px; letter-spacing: 1px; -webkit-font-smoothing: antialiased; } .section-title div.cyxy-trs-source .cyxy-trs-target{ display: block; } /*-------------------- 4.1. CTA sectoin --------------------*/ .section-cta { padding: 40px 0; color: #fff; background-color: #fcbe03; } .section-cta h2 { color: #fff; font-size: 23px; font-weight: 100; margin: 0 0 20px; } .button-cta { border: 2px solid #fff; padding: 10px 50px; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; color: #fff; display: inline-block; -webkit-transition: all .4s ease; /* Safari and Chrome */ -moz-transition: all .5s ease; /* Firefox */ -o-transition: all .5s ease; /* IE 9 */ -ms-transition: all .5s ease; /* Opera */ transition: all .5s ease; } .button-cta:hover { color: #000; background-color: #fff; text-decoration: none; } /*-------------------- 4.1 xiaoyi --------------------*/ .xiaoyi-web { background: #f3f3f3; } .xiaoyi-web-intro { display: inline-flex; position: absolute; width: 380px; height: 600px; right: 40px; top: 0px; border: 1px solid #EAEAEA; background-color: #fff; padding: 0 10px; } .xiaoyi-web-iframe { display: inline-flex; position: absolute; top: 0px; left: 40px; width: 670px; height: 600px; border: 1px solid #EAEAEA; background-color: #fff; padding: 0 0px; } .xiaoyi-web-label { background: url("../imgs/webtrs/xiaoyi-label.png") center no-repeat; background-size: cover; text-decoration: none; display: block; position: relative; border-radius: 5px; /*padding: 0 30px;*/ margin: auto; /*background: #00aeef;*/ margin-top: 20px; height: 50px; width: 300px; } .xiaoyi-web-label span{ font-size: 0; } .xiaoyi-web-step1 { margin-top: 39px; font-size: 14px; color: #333333; position: relative; } .xiaoyi-web-step2 { margin-top: 20px; font-size: 14px; color: #333333; position: relative; } .xiaoyi-web-step3 { margin-top: 20px; font-size: 14px; color: #333333; position: relative; } #xiaoyitext { font-size: 24px; color: #666666; font-weight: 100; float: right; line-height: 1.7; margin-right: 204px; margin-top: 160px; letter-spacing: 5px; /*white-space:pre-line;*/ text-align: center; -webkit-font-smoothing: antialiased; } #xiaoyitext>p{ font-size: 24px; color: #666666; font-weight: 100; margin: 0; letter-spacing: 0px; line-height: 35px; } #xiaoyitext>p[contenteditable="true"]{ /*max-width: 265px;*/ font-size:12px; line-height: 15px; } /*#xiaoyitext.cyxy-trs-source{*/ /*position: relative;*/ /*}*/ /*#xiaoyitext.cyxy-trs-source .cyxy-trs-target{*/ /*position: absolute;*/ /*}*/ /*-------------------- 4.1. About --------------------*/ .mz-module { position: relative; /*margin-bottom: 8px;*/ } .mz-module-about { /*border: 1px solid #E6E6EA;*/ min-height: 230px; padding: 10px 6px; /*background-color: #EFEFF1;*/ } .mz-module-about h3 { font-weight: 100; font-size: 28px; /* text-transform: uppercase; */ color: #282828; /* letter-spacing: 2px; */ margin-bottom: 15px; margin-top: 52px; -webkit-font-smoothing: antialiased } #api { padding-bottom: 63px; } #api .mz-module-about h3 { /*font-weight: 200;*/ font-size: 18px; /* text-transform: uppercase; */ color: #424242; /* letter-spacing: 2px; */ margin-bottom: 20px; margin-top: 46px; } .mz-module-about h3 span{ font-size: 14px; } .dark-bg .mz-module-about h3 { color: #FFFFFF; } .mz-module-about p { font-size: 14px; /*font-weight: 100;*/ line-height: 22px; color: #666666; -webkit-font-smoothing: antialiased } .mz-module-button { background-color: #B6B6C3; padding: 15px; text-transform: uppercase; font-weight: 700; font-size: 12px; display: block; position: absolute; bottom: 0px; left: 0; right: 0; opacity: 0; color: #fff; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .mz-module:hover .mz-module-button { bottom: -45px; opacity: 1; } .mz-module-button:hover { background-color: #1a1a1a; color: #fff; text-decoration: none; } .mz-module-button { color: #fff; } .api-green-button { /* background-color: #fff; */ width: 140px; /*height: 40px;*/ padding: 10px; text-transform: uppercase; /*font-weight: 500;*/ font-size: 14px; display: inline-block; margin: 0px 55px; color: #5ebb8d; border: 2px solid #5ebb8d; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; border-radius: 6px; font-weight: bold; } .api-green-button .cyxy-trs-target{ display: block; font-size: 12px; } .api-green-button:hover, .api-green-button:focus { background-color: #5ebb8d; color: #fff; text-decoration: none; } #btn-chrome-webstore { width: 160px; text-transform: none; } .ot-circle { height: 95px; width: 95px; text-align: center; line-height: 98px; color: #FFFFFF; margin: 0 2px 4px; font-size: 75px; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } /*-------------------- 4.2. Featured --------------------*/ .featured-item { margin-bottom: 30px; height: 110px; } .featured-icon { float: left; font-size: 22px; border-radius: 5px; width: 55px; height: 55px; background-color: #F8F8F8; line-height: 50px; text-align: center; } .featured-text { text-align: left; margin-left: 85px; } .featured-text h4 { color: #47474C; font-size: 17px; font-weight: 700; } .featured-text p { color: #747377; margin-top: 7px; font-size: 13px; line-height: 21px; font-weight: 500; } /*-------------------- 4.2. Skills --------------------*/ .section-text h3 { margin: 0 0 30px; font-weight: 800; color: #5D5D5D; } .section-text h4 { margin: 0 0 20px; font-weight: 700; font-size: 17px; } .dark-bg .section-text h3 { color: #dfdfdf; } .dark-bg .section-text h4 { color: #dfdfdf; } /*-------------------- 4.3. Portfolio --------------------*/ figure { position: relative; overflow: hidden; margin: 0 1px 1px 0; background: #726FB9; text-align: center; cursor: pointer; } figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ot-portfolio-item figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .ot-portfolio-item figure figcaption, .ot-portfolio-item figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } figure.effect-bubba { background: #000; margin-bottom: 1px; } figure.effect-bubba img { opacity: 0.90; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.effect-bubba:hover img { opacity: 0.4; } figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } figure.effect-bubba figcaption::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(0, 1); } figure.effect-bubba figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); } figure.effect-bubba h2 { opacity: 0; color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; padding-top: 30%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } figure.effect-bubba p { color: #fff; font-size: 13px; font-weight: 500; padding: 20px 2.5em; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } figure.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } figure.effect-bubba:hover h2, figure.effect-bubba:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*-------------------- 4.4. Dark Short section (counters, quote, etc) --------------------*/ .app-bg { background: url("../imgs/app-bg2.png") no-repeat center center; background-size: cover; position: relative; } .app-bg .app-bg-postion{ position: absolute; top: 50%; transform: translateY(-50%); left: 0; height: 65%; background: url(https://cdn-web.caiyunapp.com/trisolaris/imgs/imgs/app-bg2-des.png) no-repeat center right; right: 60%; background-size: cover; } .app-bg .app-use-postion{ position: absolute; top: 50%; transform: translateY(-50%); /* left: 0; */ height: 65%; right: 60%; background-size: cover; display:flex; justify-content: flex-end; opacity: 0.8; } /* .app-bg .app-use-postion::before{ position: absolute; left: 0; top:0; right: 0; bottom:0; background: linear-gradient(#fff, #ccc); z-index: 1; content: ""; opacity: 0.2; } */ .app-bg .app-use-postion > img{ width:250px; margin-left: 8%; } .app-bg .app-use-postion > img.image1{ opacity: 0.2; } .app-bg .app-use-postion > img.image2{ opacity: 0.4; } .app-bg .app-use-postion > img.image3{ opacity: 0.6; } .grey-bg { background: #f5f5f5; } .light-bg { background-color: #f8f8f8; } .white-bg { background-color: #ffffff; } .xiaoyi-bg { background: url("../imgs/xiaoyi-col.png") no-repeat center center; background-size: cover; height: 1020px; position: relative; } .webtrs-bg { background-color: #EAF1F2; } .webtrs-img { background: url("../imgs/webtrs-img.png") no-repeat center center; background-size: cover; height: 380px; position: relative; } .webtrs-img p{ text-align: center; font-size: 28px; color: #666666; font-weight: 100; margin: 0; letter-spacing: 0px; line-height: 48px; } .webtrs-text { position: absolute; right: 11%; top: 25%; } .xiaoyi-bg-scroll{ position: absolute; /* top:-60px; */ padding-top: 60px; height: 60px; left: 0; right: 0; } .xiaoyi-bg .xiaoyi-bg-postion{ position: absolute; width: 1000px; left: 50%; transform: translate(-50%,-50%); top:50%; /* background: red; */ /* height: 780px; */ height: 810px } .xiaoyi-bg-postion1,.xiaoyi-bg-postion2,.xiaoyi-bg-logo{ position: absolute; } .xiaoyi-bg-postion1>img,.xiaoyi-bg-postion2>img{ display: block; width: 100%; } .xiaoyi-button{ display: flex; position: absolute; width: 420px; top: 260px; left: 50%; transform: translateX(-50%); justify-content: space-between; } .xiaoyi-button > a{ display: block; width: 200px; border-radius: 5px; overflow: hidden; } .xiaoyi-button > a >img{ display: block; width: 100%; cursor: pointer; transition: background .3s; } .xiaoyi-button > a >img:hover{ background: rgba(255,255,255,0.8); } .xiaoyi-bg-postion1{ left: -5%; width: 42%; /* top:50%; transform: translateY(-50%); */ bottom: 0; } .xiaoyi-bg-postion2{ bottom: 0px; right: -5%; width: 70%; } .xiaoyi-bg-logo{ top: 10%; right:25%; /* background: red; */ } .xiaoyi-bg-logo >.xiaoyi-logo-icon{ width: 100px; height: 100px; display: block; } .xiaoyi-bg-logo > .xiaoyi-logo-des{ width:110px; } .xiaoyi-logo{ width: 100px; height: 100px; display: block; border-radius: 20px; margin: 0 auto; margin-left: 10px; } #xiaoyitext{ position: absolute; left: 50%; transform: translateX(-50%); margin: 0; width: 500px; top:160px; } .about-bg { background: url("../imgs/about-bg.jpg") no-repeat center center; background-size: cover; } .green-bg { /*background-color: rgb(82,178,131);*/ background-color: #52b283; color: #fff; } .dark-bg { background-color: #333231; color: #fff; } .short-section { border-top: 1px solid #5D5D5F; border-bottom: 1px solid #5D5D5F; padding-top: 70px; padding-bottom: 70px; } .counter-item h2 { color: #fff; font-size: 60px; font-weight: 900; } .counter-item h6 { color: #FFF; font-size: 16px; font-weight: 700; margin: 10px 0 0 0; text-transform: uppercase; } /*-------------------- 4.5. Partners Slider --------------------*/ #partners { padding-bottom: 93px; } .owl-portfolio .owl-controls { position: absolute; left: 0; top: 38%; width: 100%; } .owl-portfolio .owl-controls .owl-nav [class*=owl-] { padding: 8px 17px; background: rgba(0, 0, 0, 0.18); border-radius: 0; margin: 0; font-size: 20px; z-index: 1000; } .owl-portfolio .owl-controls .owl-nav [class*=owl-]:hover { background: #000; color: #fff; text-decoration: none; } .owl-portfolio .owl-controls .owl-prev { float: left; } .owl-portfolio .owl-controls .owl-next { float: right; } .owl-portfolio-item { text-align: center; display: inline-block; } .partner-logo { /*height: 80px;*/ text-align: center; display: inline-block; } .partner-logo img { height: 100%; width: 100%; /*opacity: 0.8;*/ width: auto !important; filter: Gray; -webkit-filter: grayscale(100%); } .owl-partners { margin: 20px; } .xiaoyi-web-intro .cyxy-trs-target{ display: none !important; } .xiaomeng-bg { background: #fffdfd; background-size: cover; height: 840px; position: relative; } .xiaomeng-bg .xiaomeng-bg-postion{ position: absolute; width: 1000px; left: 50%; transform: translate(-50%,-50%); top:50%; height: 698px } .xiaomeng-bg-postion1,.xiaomeng-bg-postion2{ position: absolute; } .xiaomeng-bg-postion1>img,.xiaomeng-bg-postion2>img{ display: block; width: 100%; } .xiaomeng-bg-postion1{ /* left: -5%; */ top: 10%; width: 42%; } .xiaomeng-bg-postion2{ bottom: 0px; right: -5%; width: 52%; } .xiaomeng-logo{ width: 100px; height: 100px; display: block; border-radius: 20px; margin: 0 auto; margin-left: 10px; } .xiaomeng-title{ height: 39px; margin-top:20px; } .xiaomeng-title > p{ font-size: 40px; font-weight: 300; color: #424242; line-height: 42px; letter-spacing: 4px; } #xiaomengtext { height: 66px; margin-top:73px; } #xiaomengtext>p{ font-size: 24px; font-weight: 400; color: #666666; margin: 0; letter-spacing: 4px; line-height: 35px; } #xiaomengtext>p[contenteditable="true"]{ font-size:12px; line-height: 15px; } .xiaomeng-button{ display: flex; position: absolute; width:420px; margin-top:80px; left: 50%; transform: translateX(-50%); justify-content: space-between; } .xiaomeng-button > a{ display: block; width: 177px; height:68px; line-height: 68px;; background: #fde3e2; border-radius: 10px; overflow: hidden; text-align: center; } .xiaomeng-button > a > img{ opacity: 1.5; } .api-xiaomeng-button { font-size: 24px; font-weight: bold; color: #EC7070; transition: color 0.1s; } .api-xiaomeng-button:hover, .api-xiaomeng-button:focus { background-color: #ff8c88; color: #fff; text-decoration: none; } .api-xiaomeng-button > img { width: 20px; /* height: 24px; */ display: none; } .api-xiaomeng-button.url > img { width: 26px; } .api-xiaomeng-button > img.image-defualt{ display: inline-block; } .api-xiaomeng-button:hover .image-defualt { display: none; } .api-xiaomeng-button:hover .image-hover{ display: inline-block; } .xiaomeng-logo-text{ width:228px; height:48px; }