| Current Path : /home/zqegovsj/www/us3web.haibo.net/tzfengyuan/css/ |
| Current File : /home/zqegovsj/www/us3web.haibo.net/tzfengyuan/css/test.css |
:root {
--ltn__primary-color: #071c1f;
--ltn__primary-color-2: #041113;
/* Darken */
--ltn__primary-color-3: #133236;
/* Lighten */
--ltn__secondary-color: #e53e29;
--ltn__secondary-color-2: #cb3421;
/* Darken */
--ltn__secondary-color-3: #fb412a;
/* Lighten */
--ltn__heading-color: #071c1f;
--ltn__paragraph-color: #071c1f;
--ltn__heading-font: 'Rajdhani', sans-serif;
--ltn__body-font: 'Open Sans', sans-serif;
/* Footer ACD2D8 8CB2B2 */
--ltn__color-1: #8cb2b2;
--ltn__color-2: #ACD2D8;
--ltn__color-3: #A3BCC0;
--ltn__color-4: #84A2A6;
/* Gradient Colors */
--gradient-color-1: linear-gradient(90deg, rgba(242,139,194,1) 0%, rgba(216,177,242,1) 50%);
--gradient-color-2: linear-gradient(to top, rgba(7,28,31,0) 0%, rgba(7,28,31,1) 90%);
--gradient-color-3: linear-gradient(to bottom, rgba(7,28,31,0) 0%, rgba(7,28,31,1) 90%);
--gradient-color-4: linear-gradient(to top, rgba(242,246,247,0) 0%, rgba(242,246,247,1) 90%);
/* Background Colors */
--section-bg-1: #F2F6F7;
/* White */
--section-bg-2: #071c1f;
/* Black */
/* Border Colors */
--border-color-1: #e5eaee;
/* White */
--border-color-2: #1e2021;
/* Black */
--border-color-3: #576466;
/* Black */
--border-color-4: #eb6954;
/* Red */
--border-color-5: #bc3928;
/* Red */
--border-color-6: #103034;
/* Black */
--border-color-7: #d1dae0;
/* White */
--border-color-8: #f6f6f6;
/* White */
--border-color-9: #e4ecf2;
/* White */
--border-color-10: #ebeeee;
/* White */
--border-color-11: #ededed;
/* White */
--border-color-12: #e1e6ff;
/* White */
/* Box Shadow Colors */
--ltn__box-shadow-1: 0 16px 32px 0 rgba(7, 28, 31, 0.1);
--ltn__box-shadow-2: 0 0 4px rgba(0, 0, 0, 0.1);
/* like border */
--ltn__box-shadow-3: 0 1px 6px 0 rgba(32, 33, 36, .28);
/* like border GGL */
--ltn__box-shadow-4: 0 5px 20px 0 rgba(23, 44, 82, 0.1);
--ltn__box-shadow-5: 0 8px 16px 0 rgba(93, 93, 93, 0.1);
--ltn__box-shadow-6: 0 0 25px 2px rgba(93, 93, 93, 0.2);
/* Common Colors */
--black: #000000;
--black-2: #22355B;
--white: #fff;
--white-2: #F2F6F7;
--white-3: #e8edee;
--white-4: #e6ecf0;
--white-5: #f0f4f7;
--white-6: #f1f1f1;
--white-7: #F7F7F7;
--white-8: #FAFAFA;
--white-9: #F2F7FA;
--red: #FF0000;
--red-2: #f34f3f;
--red-3: #DB483B;
--silver: #C0C0C0;
--gray: #808080;
--maroon: #800000;
--yellow: #FFFF00;
--olive: #808000;
--lime: #00FF00;
--green: #008000;
--green-2: #79B530;
--aqua: #00FFFF;
--teal: #008080;
--blue: #0000FF;
--navy: #000080;
--fuchsia: #FF00FF;
--purple: #800080;
--pink: #FFC0CB;
--nude: #ebc8b2;
--orange: #ffa500;
--ratings: #FFB800;
/* social media colors */
--facebook: #365493;
--twitter: #3CF;
--linkedin: #0077B5;
--pinterest: #c8232c;
--dribbble: #ea4c89;
--behance: #131418;
--google-plus: #dd4b39;
--instagram: #e4405f;
--vk: #3b5998;
--wechat: #7bb32e;
--youtube: #CB2027;
--email: #F89A1E; }
/* ----------------------------------------
Section title
---------------------------------------- */
.section-title-area {
margin-bottom: 50px; }
.section-title-area p {
margin-bottom: 0;
max-width: 500px; }
.section-title-area p + p {
margin-top: 15px; }
.section-title-area.text-right p {
margin-left: auto; }
.section-title-area.text-center p {
margin-left: auto;
margin-right: auto; }
.section-title {
margin-bottom: 5px;
font-size: 40px;
font-weight: 700;
line-height: 1.2; }
.section-title span {
color: var(--ltn__secondary-color); }
.section-title p {
font-size: 16px;
line-height: 1.8;
color: var(--ltn__paragraph-color);
margin-top: 20px; }
.section-title.white .section-title {
color: var(--white); }
.section-title.white p {
color: rgba(var(--white), 0.7); }
/* Section Title 2 */
.ltn__section-title-2 {
margin-bottom: 40px; }
.ltn__section-title-2 .section-subtitle {
text-transform: uppercase;
font-size: 18px;}
.ltn__section-title-2 .section-title {
font-size: 72px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1; }
.ltn__section-title-2 p {
padding: 0 0 0 30px;
border-width: 0 0 0 2px;
border-style: solid;
border-color: var(--ltn__secondary-color);
max-width: 450px; }
.ltn__section-title-2.text-right p {
padding: 0 30px 0 0;
border-width: 0 2px 0 0;
margin-left: auto; }
.ltn__section-title-2.text-center p {
padding: 0 0 0 30px;
border-width: 0 0 0 2px;
margin-left: auto;
margin-right: auto;
text-align: left !important; }
/* ----------------------------------------------------
About Us Area
---------------------------------------------------- */
.about-us-img-wrap {
position: relative; }
.about-us-img-wrap img {
margin: 0; }
.about-us-img-info {
width: 310px;
height: 310px;
background-color: var(--white);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
-webkit-box-shadow: var(--ltn__box-shadow-1);
box-shadow: var(--ltn__box-shadow-1);
position: absolute;
top: 70%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto; }
.about-us-img-info h1 {
margin: 0;
font-size: 120px;
line-height: 0.8;
color: var(--ltn__secondary-color); }
.about-us-img-info h1 .counter {
font-size: 120px;
line-height: 0.8;
color: var(--ltn__secondary-color); }
.about-us-img-info h1 span {
font-size: 20px;
color: var(--ltn__heading-color); }
.about-us-img-info h6 {
margin: 0; }
.about-us-img-info h6 span {
font-size: 20px;
color: var(--ltn__secondary-color); }
.about-us-img-info .btn-wrapper {
margin-top: 50px; }
.about-us-img-info .dots-bottom {
height: 25px;
width: 25px;
background-color: var(--ltn__secondary-color);
display: inline-block;
position: absolute;
bottom: -10px;
left: 12px; }
.about-us-img-info-2 {
width: 190px;
height: 190px;
background-color: var(--ltn__secondary-color);
border: 15px solid;
border-color: var(--white);
bottom: 0;
top: auto;
-webkit-transform: inherit;
-ms-transform: inherit;
transform: inherit;
margin-right: 0; }
.about-us-img-info-2 h3 {
font-size: 50px;
color: var(--white); }
.about-us-img-info-2 h3 .counter {
font-size: 50px;
color: var(--white); }
.about-us-img-info-2 h3 span {
font-size: 20px;
color: var(--white); }
.about-us-img-info-2 h6 {
color: var(--white); }
.about-us-info-wrap .btn-wrapper {
margin-top: 40px; }
.about-us-info-wrap hr {
margin-top: 40px;
margin-bottom: 40px; }
.about-us-info-devide {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.about-us-info-devide .list-item-with-icon {
margin-left: 30px;
margin-bottom: 30px; }
.list-item-with-icon {
min-width: 300px; }
.about-us-img-info-inner {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column; }
.list-item-with-icon-2 ul,
.list-item-with-icon ul {
padding: 0;
margin: 0; }
.list-item-with-icon-2 ul li,
.list-item-with-icon ul li {
position: relative;
list-style: none;
padding-left: 60px;
font-weight: 700;
margin-bottom: 25px; }
.list-item-with-icon-2 ul li:last-child,
.list-item-with-icon ul li:last-child {
margin-bottom: 0; }
.list-item-with-icon-2 ul li::before,
.list-item-with-icon ul li::before {
position: absolute;
content: "\f00c";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
left: 0;
top: -5px;
background-color: var(--section-bg-1);
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
color: var(--ltn__secondary-color); }
.list-item-with-icon-2 ul li {
padding-left: 30px;
font-weight: 400;
margin-bottom: 0; }
.list-item-with-icon-2 ul li::before {
height: inherit;
line-height: inherit;
width: inherit;
background-color: transparent;
color: var(--ltn__heading-color);
top: 5px; }
.about-img-left {
margin-right: 30px; }
.about-img-right {
margin-left: 30px; }
.ltn__img-shape-left,
.ltn__img-shape-right {
position: relative; }
.ltn__img-shape-left::before,
.ltn__img-shape-right::before {
position: absolute;
content: "";
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 85%;
width: 30px;
background-color: var(--ltn__secondary-color); }
.ltn__img-shape-left {
padding-left: 30px; }
.ltn__img-shape-left::before {
left: 0; }
.ltn__img-shape-right {
padding-right: 30px; }
.ltn__img-shape-right::before {
left: auto;
right: 0; }
.about-call-us {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.about-call-us .call-us-icon {
font-size: 50px;
margin-right: 20px;
color: var(--ltn__secondary-color);
line-height: 1; }
.about-call-us .call-us-info p {
margin-bottom: 10px; }
.about-call-us .call-us-info h2 {
margin-bottom: 0px; }
@media (min-width: 992px) and (max-width: 1199px) {
.about-us-info-devide {
display: block; }
.about-us-info-devide .list-item-with-icon {
margin-left: 0; }
.list-item-with-icon {
margin-top: 30px;
margin-bottom: 40px; } }
@media (max-width: 991px) {
.about-img-left {
margin-right: 0;
margin-bottom: 40px; }
.about-img-right {
margin-left: 0;
margin-bottom: 40px; } }
@media (max-width: 767px) {
.xp-t-200{padding-top:120px!important}
.xp-b-200{padding-bottom:120px!important}
.ltn__section-title-2 .section-subtitle {
font-size: 18px;}
.ltn__section-title-2 .section-title {
font-size: 38px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1; }
.section-title {
margin-bottom: 5px;
font-size: 28px;
font-weight: 700;
line-height: 1.2; }
.custom-content-brief {
margin-bottom: 30px; }
.about-us-img-info {
height: 200px;
width: 220px; }
.about-us-img-info h1 .counter {
font-size: 80px; }
.about-us-img-info-2 {
width: 150px;
height: 150px; }
.about-us-img-info-2 h3 .counter {
font-size: 30px; }
.about-us-info-devide {
display: block; }
.about-us-info-devide .list-item-with-icon {
margin-left: 0; }
.list-item-with-icon {
margin-top: 30px;
margin-bottom: 40px; }
.list-item-with-icon {
min-width: 275px; } }
/* Feaured Carousel
-----------------------------------------------------------------*/
#oc-features .owl-item:not(.active) { opacity: .4; }
#oc-features .owl-item p {
font-size: 16px;
font-weight: 300;
color: #666;
}
/* Button-link
-----------------------------------------------------------------*/
.button-link {
display: inline-block;
position: relative;
color: #333;
font-weight: 600;
margin-top: 10px;
padding: 5px 0;
-webkit-transition: color .3s ease;
-o-transition: color .3s ease;
transition: color .3s ease;
}
.dark .button-link { color: #FFF; }
.button-link:hover { color: #00bed7; }
.button-link::after {
content: '';
background : url('images/border.svg') no-repeat;
position: absolute;
bottom: 0px;
left: 0;
margin-bottom: 0;
width: 100%;
height: 4px;
-webkit-transition: bottom .3s ease;
-o-transition: bottom .3s ease;
transition: bottom .3s ease;
}
.button-link.border-0::after { content: none; }
.button-link:hover::after { bottom: 3px; }
/* Owl Carousel - Controls - Arrows
-----------------------------------------------------------------*/
.owl-carousel-full .owl-nav [class*=owl-] {
left: 150px !important;
height: 60px;
line-height: 60px;
border: none;
color: #333;
background-color: transparent;
font-size: 28px;
border-radius: 0;
}
.owl-carousel .owl-nav .owl-next {
left: auto;
right: -155px;
}
.owl-carousel-full .owl-nav .owl-next {
left: auto !important;
right: 155px !important;
border-radius: 0;
}
.owl-carousel-full .owl-nav [class*=owl-]:hover { color: #333 !important; }
/* Owl Carousel - Responsive
-----------------------------------------------------------------*/
.device-lg .owl-carousel .owl-nav .owl-prev,
.device-md .owl-carousel .owl-nav .owl-prev,
.device-sm .owl-carousel .owl-nav .owl-prev,
.device-xs .owl-carousel .owl-nav .owl-prev { left: 2px !important; }
.device-lg .owl-carousel-full .owl-nav .owl-next,
.device-md .owl-carousel-full .owl-nav .owl-next,
.device-sm .owl-carousel-full .owl-nav .owl-next,
.device-xs .owl-carousel .owl-nav .owl-next { right: 2px !important; }
/* Grid Filter
-----------------------------------------------------------------*/
.grid-filter li.activeFilter a { font-weight: normal; }
.grid-overlay { background-color: rgba(0, 0, 0, 0.75); }
/* Testimonial
-----------------------------------------------------------------*/
.testimonials-rating {
margin-top: 15px;
color: #FFD700;
font-size: 18px;
line-height: 1;
}
.testi-content p {
font-size: 16px;
color: #666;
font-style: normal;
}
.testi-content p::before,
.testi-content p::after { display: none; }
.testi-meta::before { display: none; }
.testi-meta span { padding-left: 0; }
.testimonial .flex-control-nav { bottom: 25px; right: 20px; }
.testimonial .flex-control-nav li a { background-color: #333; }
.p-page-title{
padding-top: 150px!important;
padding-bottom: 150px!important;
}
@media (max-width: 991px) {
.p-page-title{
padding-top: 100px!important;
padding-bottom: 100px!important;
}
}
@media (max-width: 767px) {
.p-page-title{
padding-top: 40px!important;
padding-bottom: 40px!important;
}
.p-page-title h1{
font-size: 22px!important;
}
.p-page-title span{
font-size: 14px!important;
}
}
.p-0{padding:0!important}
.p-10{padding:10px!important}
.p-15{padding:15px!important}
.p-20{padding:20px!important}
.p-25{padding:25px!important}
.p-30{padding:30px!important}
.p-35{padding:35px!important}
.p-40{padding:40px!important}
.p-50{padding:50px!important}
.p-60{padding:60px!important}
.p-70{padding:70px!important}
.p-80{padding:80px!important}
.p-90{padding:90px!important}
.p-100{padding:100px!important}
.p-150{padding:150px!important}
.p-200{padding:200px!important}
.p-b-0{padding-bottom:0!important}
.p-b-5{padding-bottom:5px!important}
.p-b-10{padding-bottom:10px!important}
.p-b-15{padding-bottom:15px!important}
.p-b-20{padding-bottom:20px!important}
.p-b-25{padding-bottom:25px!important}
.p-b-30{padding-bottom:30px!important}
.p-b-35{padding-bottom:35px!important}
.p-b-40{padding-bottom:40px!important}
.p-b-50{padding-bottom:50px!important}
.p-b-60{padding-bottom:60px!important}
.p-b-70{padding-bottom:70px!important}
.p-b-80{padding-bottom:80px!important}
.p-b-90{padding-bottom:90px!important}
.p-b-100{padding-bottom:100px!important}
.p-b-110{padding-bottom:110px!important}
.p-b-120{padding-bottom:120px!important}
.p-b-130{padding-bottom:130px!important}
.p-b-140{padding-bottom:140px!important}
.p-b-150{padding-bottom:150px!important}
.p-b-200{padding-bottom:200px!important}
.p-t-0{padding-top:0!important}
.p-t-5{padding-top:5px!important}
.p-t-10{padding-top:10px!important}
.p-t-15{padding-top:15px!important}
.p-t-20{padding-top:20px!important}
.p-t-25{padding-top:25px!important}
.p-t-30{padding-top:30px!important}
.p-t-35{padding-top:35px!important}
.p-t-40{padding-top:40px!important}
.p-t-50{padding-top:50px!important}
.p-t-60{padding-top:60px!important}
.p-t-70{padding-top:70px!important}
.p-t-80{padding-top:80px!important}
.p-t-90{padding-top:90px!important}
.p-t-100{padding-top:100px!important}
.p-t-110{padding-top:110px!important}
.p-t-120{padding-top:120px!important}
.p-t-130{padding-top:130px!important}
.p-t-140{padding-top:140px!important}
.p-t-150{padding-top:150px!important}
.p-t-200{padding-top:200px!important}
.p-t-280{padding-top:280px!important}
.p-t-350{padding-top:350px!important}
/* Footer
-----------------------------------------------------------------*/
.widget > h4 {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 2;
padding-bottom: 10px;
margin-bottom: 0px;
}
.widget_links li,
.widget_links li a {
background-image: none !important;
padding-left: 5px;
color: #333333;
font-size: 14px;
font-weight: 300;
}
.social-icon.si-mini {
width: 24px;
height: 24px;
font-size: 11px;
line-height: 23px !important;
}
.social-icon.si-mini:hover i:first-child { margin-top: -23px; }
/* Misc
-----------------------------------------------------------------*/
#header, #header-wrap, #logo img {
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.feature-box h3 span.subtitle { font-size: 14px; }
.feature-box.fbox-plain .fbox-icon img { height: 50px; }
.col-padding {padding: 100px 60px !important; }
@media (max-width: 767px) {
.col-padding {padding: 50px 20px !important; }
}
.heading-block::before {
content: attr(data-heading);
display: block;
position: absolute;
top: 0;
left: 0;
color: #F5F5F5;
z-index: -1;
font-family: 'poppins', sans-serif;
font-weight: bold;
font-size: 90px;
line-height: .3;
}
.heading-block.center::before {
right: 0;
left: 0;
margin: auto;
}
.bg-color-light{padding:80px 0;background-color:rgba(var(--themecolorrgba,32,158,187),0.07);border-top:1px solid rgba(var(--themecolorrgba,32,158,187),.08);border-bottom:1px solid rgba(var(--themecolorrgba,32,158,187),.1)}
.heading-block h2{text-transform:none;letter-spacing:0}
.col-divider{position:relative}
.col-divider::after{--borderwidth: 20%;content:"";width:20%;width:var(--borderwidth);border:1px dashed rgba(0,0,0,.1);display:block;position:absolute;top:50%;right:0;transform:translate(-50%,-50%)}
.feature-text{display:flex;align-items:center;border-bottom:1px dashed rgba(0,0,0,.15);padding-bottom:10px}
.fbox-text{font-size:58px;line-height:1;font-weight:700}
.feature-text h3{font-size:22px;line-height:1.3;margin-bottom:0;margin-left:15px;font-weight:800}
.feature-text+p{color:#777;margin-top:10px;margin-bottom:0}
.section-curve::after {
height: 50px;
background-image: url('../img/curve.svg');
background-size: 100% 100%;
content: '';
display: block;
position: absolute;
width: 100%;
z-index: 0;
bottom: 0;
}
.ytb-card { margin-top: -330px;}
#ytb-video { cursor: pointer }
#ytb-video-button.play-icon {
position: absolute;
display: block;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
line-height: 61px;
margin-top: -31px;
margin-left: -31px;
transition: transform .3s ease;
}
#ytb-video:hover .play-icon {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
#ytb-video-button.play-icon i {
width: 60px;
height: 60px;
line-height: 61px;
font-size: 24px;
color: #000;
text-align: center;
border-radius: 50%;
background-color: #FFF;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 2;
transition: all .3s ease;
}
#ytb-video:hover .play-icon i {
background-color: red;
color: #FFF;
}
#ytb-video-button.play-icon i.icon-play { padding-left: 4px; }
#ytb-video-button.play-icon i:nth-of-type(2),
.video-played #ytb-video-button.play-icon i:nth-of-type(1) { display: none; }
.video-played #ytb-video-button.play-icon i:nth-of-type(2) { display: block; }
#ytb-video:not(:hover) i:nth-of-type(2) { opacity: 0; }
@media (min-width: 992px) {
.ytb-card { max-width: 820px; }
}
/* Timeline -------------------------------------------------------------------------- */
.timeline_items {
margin: 0!important;
position: relative;
background: url(../img/timeline_top.png) no-repeat top center;
padding-top: 9px
}
.timeline_items:after {
content: "";
width: 0;
height: 0;
border-width: 3px;
border-style: solid;
-webkit-border-radius: 100%;
border-radius: 100%;
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -3px;
display: block;
z-index: 1
}
.timeline_items li {
margin: 0!important;
list-style: none!important;
width: 45%;
padding: 0 0 25px 55%;
position: relative;
background: url(../img/timeline_right.png) no-repeat top center
}
.timeline_items li:nth-child(even) {
padding: 0 55% 25px 0;
background: url(../img/timeline_left.png) no-repeat top center
}
.timeline_items li h3 {
font-size: 30px;
line-height: 35px
}
.timeline_items li h3 span {
position: absolute;
right: 55%;
top: 8px
}
.timeline_items li h3:before {
content: "";
width: 7px;
height: 7px;
border-width: 4px;
border-style: solid;
-webkit-border-radius: 100%;
border-radius: 100%;
position: absolute;
left: 50%;
top: 11px;
margin-left: -8px;
display: block;
z-index: 1
}
.timeline_items li:nth-child(even) h3 {
text-align: right
}
.timeline_items li:nth-child(even) h3 span {
left: 55%;
right: auto
}
.timeline_items li .desc {
position: relative;
font-size: 15px;
line-height: 31px;
background: url(../img/textline.png) repeat-y
}
.timeline_items li .desc:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: -122%;
top: 0;
background-image: url(../img/stripes_10_b.png)
}
.timeline_items li:nth-child(even) .desc:before {
left: auto;
right: -122%
}
.timeline_items li:nth-child(even) .desc {
text-align: right
}
@media only screen and (min-width: 768px) {
.timeline_items li:nth-child(2n) h3 span::after {
border-right-color: #f8f8f8;
border-width: 5.5px 5.5px 5.5px 0;
left: -5px;
right: auto
}
}
.timeline .post-item:before,.timeline_items li h3:before,.timeline_items:after,a.content_link:after{border-color:#2991d6}
.timeline_items li h3 span,body,button{font-family:Roboto,Arial,Tahoma,sans-serif;font-weight:400}