web-work/MainPage/css/styles.css

/* @import url(http://fonts.useso.com/css?family=Open+Sans:400,700,600);
@import url(http://fonts.useso.com/css?family=Oswald:400,700); */
* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background: #fff;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

::selection {
    color: #fff;
    background: #005f8d;
}

::-moz-selection {
    color: #fff;
    background: #005f8d;
}

p {
    color: #858585;
    margin: 0 0 1em !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
}

.fitImage {
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
}

.animated {
    /* -webkit-animation-duration: 1s; */
    animation-duration: 1s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.mcbook {
    opacity: 0;
}

.show {
    opacity: 1;
}

.pDark p {
    color: #6D6D6D;
}

#services .circle:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotateY(360deg);
    transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
}

.pDark h3 {
    color: #BEBEBE;
}

.btn {
    background: #005f8d;
}

.btn:hover {
    background: #145AC4;
}

.btn, .form-control, .team-socials i {
    border-radius: 5px !important;
}

.form-group {
    margin: 0 auto;
    margin-bottom: 15px;
    width: 95%;
}

.form-control {
    border: none;
    padding: 22px 4px;
    outline: none;
    color: #5A5A5A;
    margin: 0;
    width: 210px;
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
    background: #fff;
    font-size: inherit;
    border-radius: 0px !important;
    width: 99%;
}

.button-outline {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    color: #fff;
    padding: 10px 25px;
    border: 2px solid #fff;
    border-radius: 0px;
    font-size: 16px;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.15);
}

.button-outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.35);
}

a {
    color: #005f8d;
    text-decoration: none;
    text-shadow: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

a:hover {
    color: #000;
    text-decoration: none;
}

.btn {
    border: 0px;
    border-radius: 0px;
}

.btn-primary {
    background: #005f8d;
}

.form-control {
    border-radius: 0px;
}

.mrgn30 {
    margin: 30px 0;
}

.copyright {
    color: #6D6D6D;
    background: #161616;
    padding: 20px 0;
}

#top {
    position: relative;
}

.topHome {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 5;
}

.topHome:hover {
    color: #F89F9F;
}

/* Header
----------------------------------------------*/
#section-top {
    background: #4E4E4E;
}

#section-top ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
}

#section-top ul li {
    display: inline-block;
}

#section-top ul li a {
    border-radius: 2px;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    width: 35px;
    text-align: center;
}

#section-top .region-top-first {
    float: right;
}

.header { /* ✅ 导航栏 */
    position: fixed;
    width: 100%;
    z-index: 50;
    border-radius: 0;
    top: 0px;
    background: rgba(255, 255, 255, 0);
}

.addBg { /* ✅ 导航栏 背景 */
    background: #457fea;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.navbar-inverse {
    background: transparent;
}

.navbar-inverse .navbar-toggle {
    background-color: #005f8d;
}

.navbar-inverse .navbar-toggle .icon-bar {
    /*background-color: #005f8d;*/
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background: #005f8d;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #00a1cb;
}

/*导航栏高亮文字颜色*/
.addBg .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
}

/*导航栏文字颜色*/
.navbar-inverse .navbar-toggle:hover .icon-bar {
    background: #a7d0ff;
}

.navbar-toggle {
}

.hero-text h1 {
    color: #fff !important;
}

.hero-text {
    color: #000;
    width: 83%;
    text-align: center;
    margin: 40% auto 24px auto;
    font-family: 'Oswald', sans-serif;
}

.hero-text p {
    font-family: 'Oswald', sans-serif;
    padding: 0;
    margin: 12px 8% 0;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

/*.carousel-inner*/
#myCarousel {
    margin-top: 50px;
    border-bottom: 4px solid #005f8d;
}

.carousel-inner > .item {
}

.carousel-caption {
    padding: 0px;
    bottom: 40%;
    display: block;
    height: 80px;
}

.carousel-caption h1 {
    font-size: 45px;
    padding: 10px 15px;
    background: rgba(128, 180, 33, 0.80);
    color: #FFFFFF;
    text-shadow: none;
    font-weight: bold;
    display: inline-block;
}

.carousel-caption h3 {
    font-size: 30px;
    color: #1C4604;
    font-weight: bold;
    text-shadow: #fff 1px 1px 1px;
}

.actionPanel {
    padding: 25px 0;
    background: #005f8d;
}

.actionPanel h3 {
    margin: 0px;
}

.circle {
    background: #fff;
    height: 90px;
    width: 90px;
    border-radius: 95px;
    color: #005f8d;
    line-height: 90px !important;
}

#section-strapline {
    background: #fcfdff;
    line-height: 42px;
    clear: both;
}

/*----Nav ----*/
.header .navbar-brand {
    float: left;
    padding: 22px 15px;
    line-height: 18px;
    height: 50px; /*color:#005f8d;*/
}

.navbar-brand b {
    color: #00a1cb;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
}

.addBg .navbar-brand b {
    color: #fff;
}

.navbar-brand b i {
    color: #fff;
    font-style: normal;
}

.logo {
    font-size: 2.2em;
    text-shadow: none;
    margin: 8px 0 0 0;
}

.logo:hover {
    color: #5A5A5A;
}

.header .navbar {
    margin: 0;
    background: transparent;
    border: 0;
}

/*导航栏透明时文字颜色*/
.navbar-inverse .navbar-nav > li > a {
    color: #a7d0ff;
    font-size: 1.2em;
    line-height: normal;
    margin: 17px;
    padding: 6px 0px !important;
    border-radius: 5px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

.addBg .navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

/*导航栏透明时高亮文字颜色*/
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #ffffff;
    background: none;
    border-radius: 0px;
}

.addBg .navbar-inverse .navbar-nav > .active > a, .addBg .navbar-inverse .navbar-nav > .active > a:hover, .addBg .navbar-inverse .navbar-nav > .active > a:focus {
    color: #00486B;
    background: none;
    border-radius: 0px;
}

.navbar-inverse .navbar-nav > .active {
}

.header .navbar-nav > li > a {
    padding: 25px 18px;
}

.page-section {
    width: 100%;
    height: auto;
    padding: 35px 0;
}

.noPadd {
    padding: 0;
}

.page-section h1 {
    font-size: 3.5em;
    margin: 90px 0 30px;
    line-height: 1.2em;
}

.page-section h1 span {
    font-weight: 200;
}

.page-section h2 {
    color: #005f8d;
}

.page-section p {
    font-size: 1.1em;
    line-height: 1.6em;
}

.darkBg {
    background: #000;
}

.darkBg .fa {
    color: #005f8d;
}

/*--- Banner ----*/
.banner-container {
    width: 100%;
    position: relative;
    padding: 0px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
    /*background: url("../images/banner-bg.jpg") no-repeat;*/
    background-size: 100% 100%;
    background-size: cover;
    position: relative;
    border-bottom: 2px #005f8d solid;
}

.banner-container > img {
    width: 100%;
}

.banner-content {
    position: absolute;
    z-index: 3;
    top: 0px;
    left: 0px;
    right: 0px;
}

.hero-text h1 {
    color: #fff;
    font-size: 6.5em;
    margin: 2% 0 30px;
    line-height: 1.5em;
    font-family: 'Roboto', sans-serif;
    text-shadow: 1px 1px 1px #8F8F8F;
    font-weight: 900;
    font-size: 48px;
    margin: 37px 0 13px;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(124, 124, 124, 1);
    background: rgba(0, 161, 203, 0.53);
    display: inline-block;
    /* float: left; */
    margin: 0 auto;
    text-align: center;
    padding: 15px 17px;
}

.hero-text p {
    font-size: 1.6em;
    color: #fff;
    font-style: normal;
    font-family: 'Roboto', sans-serif;
    text-shadow: 1px 1px 1px #8F8F8F;
}

.arrow-link {
    display: block;
    font-size: 32px;
    margin-top: 20px;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
    width: 60px;
    margin: 0 auto;
}

a.arrow-link {
    color: #005f8d;
}

a.arrow-link:hover {
    color: #005f8d;
}

.colord { /*公司简介背景*/
    background: #2f5bac;
}

.colord p {
    color: #DAE0FF;
}

.colord h3 {
    color: #fff;
}

/*公司介绍下方文本框 背景*/
.c1 {
    background: #49c7d0;
    padding: 15px;
    height: 600px; /* 设置固定高度 */
}

.c2 {
    background: #457fea;
    padding: 15px;
    height: 600px; /* 设置固定高度 */
}

.c1:hover, .c2:hover {
    background: rgba(0, 43, 54, 0.89);
    cursor: pointer;
}

.hero-button {
    text-align: center;
    background: rgba(255, 255, 255, 0.36);
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    margin: 0 auto;
    clear: left;
    width: auto;
}

.hero-img {
    text-align: center;
    margin: 124px auto 24px auto;
}

.da-slider {
    margin: 0 auto !important;
}

.heading h2 {
    color: #222;
}

#contactUs .heading h2 {
    color: #fff;
}

.sub-heading {
    padding: 15px 0;
}

.sub-heading h2 {
    font-size: 18px;
    margin: 15px 0 8px;
}

.sub-heading p {
    color: #5A5A5A;
}

.heading {
    padding: 3px 10px;
    padding-bottom: 15px;
    margin-bottom: 30px;
    display: block;
}


/*test part*/
/* 电脑端 (PC) 显示：左右排列 */
.feature-container-custom {
    display: flex;
    flex-direction: row; /* 电脑端左右布局 */
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
}

.feature-media {
    flex: 1;
    max-width: 50%; /* 电脑端图片最大50% */
}

.feature-media img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.feature-text {
    flex: 1.5;
    max-width: 50%;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
}

/* 📱 手机端自适应 (当屏幕宽度小于 768px) */
@media screen and (max-width: 768px) {
    .feature-container-custom {
        flex-direction: column; /* 改为上下排列 */
        text-align: center; /* 文字居中 */
        padding: 10px;
    }

    .feature-media {
        max-width: 100%; /* 图片宽度变为100% */
    }

    .feature-text {
        max-width: 100%; /* 文字宽度100% */
        font-size: 14px; /* 字体缩小 */
        padding: 10px;
    }

    .feature-text p {
        max-height: none; /* 移除文字高度限制 */
        overflow: visible; /* 允许文字完整显示 */
    }
}

.heading p {
    font-size: 1.2em;
}

.pdingBtm30 {
    padding-bottom: 30px;
}

.da-arrows span:after {
    width: 25px;
    height: 37px;
}

.da-arrows span {
    position: absolute;
    top: 50%;
    height: 34px;
    width: 34px;
    border-radius: 60px;
    background: none;
}

.da-dots span {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    margin: 3px;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 1px rgba(255, 255, 255, 0.1);
    border: 2px solid #005f8d;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

#aboutUs {
    background: #fff;
    padding-top: 35px;
    padding-bottom: 25px;
    overflow: hidden;
}

#aboutUs .feature {
    margin-top: 30px;
    margin-bottom: 54px;
}

#aboutUs .right {
    padding-left: 32px;
    float: right;
}

#aboutUs .left {
    padding-right: 32px;
    float: left;
}

#aboutUs h3 {
    font: 18px/34px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #222;
}

.fluid-video-wrapper {
    margin-top: 18px;
}

#aboutUs .left {
    padding-right: 32px;
    float: left;
}

#aboutUs .right {
    float: right;
}

.row .six {
    width: 50%;
}

/* Features
    -------------------------------------------------*/
#news {
    background: #fff;
    padding-top: 35px;
    padding-bottom: 25px;
    overflow: hidden;
}

#news .feature {
    margin-top: 30px;
    margin-bottom: 54px;
}

#news .right {
    padding-left: 32px;
    float: right;
}

#news .left {
    padding-right: 32px;
    float: left;
}

#news h3 {
    font: 18px/34px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #222;
}

.announcement-text {
    justify-content: flex-end; /* 让整个内容靠右 */
}

.fluid-video-wrapper {
    margin-top: 18px;
}

.row .six {
    width: 50%;
}

/* Services
/* 外层容器 */
.container {
    width: 90%; /* 控制整体宽度 */
    max-width: 1200px; /* 最大宽度，防止超出屏幕 */
    margin: 0 auto; /* 居中 */
}

/* 使用 Flexbox 让图片和文本左右排列 */
.grid {
    display: flex; /* 让子元素水平排列 */
    align-items: flex-start; /* 让图片和文字顶部对齐 */
    justify-content: space-between; /* 让图片和文字保持间距 */
    flex-wrap: wrap; /* 允许在小屏幕下换行 */
    flex-direction: row-reverse; /* 反转排列顺序，让图片在左边，文字在右边 */
}

/* 文字部分 */
.text-content {
    flex: 1; /* 让文字部分占据 50% */
    max-width: 50%; /* 限制最大宽度 */
    padding-left: 40px; /* 文字和图片之间的间距 */
    color: white; /* 文字颜色 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 让标题和段落排成列 */
}

/* 标题部分居中 */
.text-content h2 {
    text-align: center; /* 标题居中 */
    margin-top: 0; /* 去除标题的默认上边距 */
    margin-bottom: 20px; /* 给标题与段落之间加点间距 */
}

/* 段落部分左右对齐 */
.text-content p {
    text-align: justify; /* 段落文字左右对齐 */
    margin: 0;
}

/* 图片部分 */
.image-content {
    flex: 1; /* 让图片部分占据 50% */
    max-width: 50%; /* 限制最大宽度 */
    max-height: fit-content;
}

/* 让图片自适应 */
.image-content img {
    width: 100%; /* 让图片宽度自适应 */
    height: auto; /* 保持图片比例 */
    display: block; /* 去除底部默认间隙 */
}

/* 在小屏幕（如手机）下调整布局 */
@media (max-width: 768px) {
    .grid {
        flex-direction: column; /* 改为上下排列 */
        text-align: center; /* 让文字居中 */
    }

    .text-content, .image-content {
        max-width: 100%; /* 让内容占满屏幕 */
        padding: 0; /* 移除间距 */
    }
}

#heading3 {
    text-align: center; /* 让文字居中 */
    margin: 10px 0 45px 0;
}


/* Team*/
#news {
    background: #fff;
    padding-top: 35px;
    padding-bottom: 25px;
    overflow: hidden;
}

#news .feature {
    margin-top: 30px;
    margin-bottom: 54px;
}

#news .right {
    padding-left: 32px;
    float: right;
}

#news .left {
    padding-right: 32px;
    float: left;
}

#news h3 {
    font: 18px/34px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #222;
}

.fluid-video-wrapper {
    margin-top: 18px;
}

#news .left {
    padding-right: 32px;
    float: left;
}

#news .right {
    float: right;
}

.row .six {
    width: 50%;
}

#contactUs {
    /*background: #005f8d;*/;
}

#contactUs .btn {
    border-radius: 0px !important;
    background: rgba(0, 0, 0, 0.32);
}

.descrition {
    min-height: 90px;
    /*text-align: center;*/
    /*border-bottom: 1px solid #dadde2;*/
    padding: 5px 15px;
}

#services h2 {
    color: #fff;
}

/* --Portfolio----- */
#work { /*阿尔兹海默症 背景*/
    background: #2f5bac;
    color: #fff;
}

#work h2 {
    color: #fff !important;
}

#work p {
    color: #fff;
}

#portfolio {
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative;
}

#portfolio video {
    width: 80%; /* 控制视频宽度，可以调整 */
    max-width: 900px; /* 最大宽度，避免过大 */
    height: auto; /* 保持原始比例 */
    border-radius: 10px; /* 添加圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    cursor: pointer; /* ✅ 鼠标指针变为手型 */
}

nav#filter {
    margin-bottom: 1.5em;
}

nav#filter li {
    display: inline-block;
    margin: 0 0 0 5px;
}

nav#filter a {
    padding: 4px 12px;
    line-height: 20px;
    border: 1px solid #005f8d;
    text-decoration: none;
}

.current {
    background: #005f8d;
    color: #fff;
}

.page-section.intro {
    min-height: 600px;
}

.btn {
    font-weight: 200;
}

.btn-dark {
    background: #444;
    color: #fff;
}

.btn-dark:hover {
    background: #000;
    color: #fff;
}

.back-to-top {
    display: inline-block;
    clear: both;
    background: #fff;
    color: #333;
    padding: 0 10px 5px;
    margin: 20px 0 0;
    text-shadow: none;
}

.back-to-top:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}

hr {
    border-color: #ddd;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

#navigation {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 200px;
    background: #ffffff;
    box-shadow: 0 10px 10px -10px #000000;
}

#navigation > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation > li > a {
    margin: 1px;
    color: #000000;
    background: #cccccc;
    display: block;
    padding: 5px;
    text-decoration: none;
    transition: all 400ms;
}

#navigation > li > a.current, #navigation > li:hover > a {
    background: #999999;
}

.pageSection {
    min-height: 600px;
    padding: 20px;
    background: #dddddd;
}

.pageSection:nth-child(odd) {
    background: #eeeeee;
}

.socialIcons li {
    list-style: none;
    display: inline;
    margin-right: 6px;
}

footer {
    border-top: 1px solid #e5e5e5;
    padding: 45px 0;
    background: #fff;
}

.social a:hover {
    color: #000;
}

.social a {
    font-size: 32px;
    margin: 0 10px;
    color: #005f8d;
    background: rgba(255, 255, 255, 0.44);
    padding: 0px 10px;
}

.contact ul li {
    margin-bottom: 10px;
}

.contact ul li i {
    margin-right: 15px;
}

/*Clients*/
.clients #owl-demo .item {
    background: none;
}

.clients .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.clients .helper img {
    vertical-align: middle;
    max-height: 70px;
    max-width: 80%;
}

.clients .helper:hover {
    cursor: e-resize;
}

.clients .customNavigation > a {
    font-size: 25px;
    cursor: pointer;
    margin: 0px 5px;
}

.portfolio-item img:hover {
    width: 110%;
    height: 110%;
}


@media (min-width: 768px) {
    .header .navbar-brand {
        padding-left: 0;
    }

    .navbar-nav {
        float: right;
    }

    .navbar-inverse .navbar-nav > li > a {
        font-size: 1.1em;
        padding: 6px 0px !important;
        border-radius: 5px;
        margin: 19px 20px;
    }
}

@media (max-width: 768px) {
    .hero-text {
        color: #000;
        width: 83%;
        text-align: center;
        margin: 27% auto 24px auto;
    }

    .hero-text h1 {
        font-size: 21px !important;
    }

    a.arrow-link {
        display: none;
    }

    .banner-container {
        background-size: contain;
    }

    .row .six {
        width: auto;
    }

    .da-slide h2 {
        font-size: 28px;
    }

    .banner-content p {
        font-size: 1.2em;
        text-shadow: none;
    }

    .hero-img {
        display: none;
    }

    .da-slide p {
        width: 67%;
        top: 122px;
    }

    .team-member .member-img img {
        max-width: 100%;
    }

    .da-slider {
        height: 380px;
        width: 100%;
        min-width: initial;
        margin: 0px !important;
    }

    .header .navbar-nav > li > a {
        padding: 25px 12px;
    }

    .portfolio-item img {
        text-decoration: none;
        display: block;
        width: 330px;
        height: 228px;
        float: left;
        margin: 0 3px 3px 0;
        opacity: 1;
        -webkit-transform: scale(1, 1);
        -webkit-transition-timing-function: ease-out;
        -webkit-transition-duration: 250ms;
        -moz-transform: scale(1, 1);
        -moz-transition-timing-function: ease-out;
        -moz-transition-duration: 250ms;
    }

    .portfolio-item:hover .folio-info {
        top: 0px;
    }

    .portfolio-item .portfolio-desc .folio-info {
        padding: 0px;
    }

    .portfolio-item .portfolio-desc .folio-info h5 {
        font-size: 1em;
    }

;
}

@media (max-width: 760px) {
    .header .navbar-nav > li > a {
        padding: 7px 12px;
        font-size: 14px;
    }

    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        border-color: #A8A8A8;
    }

;
}

@media (max-width: 480px) {
    .banner-container {
        background-size: contain;
    }

    .hero-text h1 {
        font-size: 17px !important;
    }

    .banner-container > img {
        width: 100%;
        height: 240px;
    }

    .responsive-headline {
        font-size: 16px !important
    }

    .hero-text {
        margin-top: 29%;
    }

    .navbar {
        min-height: 69px;
    }

    .arrow-link {
        display: none;
    }

    .da-slide h2 {
        font-size: 22px;
        top: 7px;
        text-shadow: none;
    }

    .da-slide p {
        width: 65%;
        top: 42px;
        height: 50px;
    }

    #section-top ul li a {
        height: 28px;
        line-height: 28px;
        width: 26px;
    }

    .team-socials a {
        background: white;
        padding: 1px 0;
        margin: 2px;
    }

    .team-socials i {
        width: 19px;
        height: 19px;
        position: relative;
        display: inline-block;
        text-align: center;
        font-size: 16px;
    }

    .page-section {
        padding: 0px;
    }

    .page-section h1 {
        font-size: 3em;
    }

    .page-section h2 {
        font-size: 2em;
    }

    .page-section p {
        font-size: 1em;
        margin: 0 0 20px;
    }

    .portfolio-item .portfolio-desc .folio-info h5 {
        font-size: 11px;
    }

;
}

@media (max-width: 320px) {
    .banner-container {
        background-size: contain;
    }

    .da-slider {
        height: 300px;
    }

    .da-slider {
        width: 100%;
        min-width: initial;
        position: relative;
        margin: 0 auto;
    }

    .da-dots {
        bottom: 2px;
    }

    .grid .text-content {
        padding-left: 29%;
        padding-right: 2%;
    }

    .portfolio-item:hover .folio-info {
        top: 0px;
    }

    .portfolio-item .portfolio-desc .folio-info h5 {
        text-transform: uppercase;
        text-align: center;
        font-weight: normal;
        font-size: 10px;
        margin: 10px 0 0 0;
    }

    nav#filter li {
        display: inline-block;
        margin: 0 0 23px 5px;
    }

;
}

#owl-demo .item {
    background: #3fbf79;
    padding: 30px 0px;
    margin: 10px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}

.customNavigation {
    text-align: center;
}

.customNavigation a {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.contact-parlex {
    padding-top: 0px;
    background-image: url('../images/banner-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.parlex-back { /*联系我们 背景*/
    padding: 30px 0;
    background-color: #2f5bac;
    color: #FDFDFD !important;
}

.parlex-back .heading p {
    color: #FDFDFD;
}

#clients {
    background: #fff;
}

#ContentText { /*文本*/
    color: rgb(217, 225, 229); /* 半透明蓝色 */
    font-size: 25px;
    text-decoration: underline; /* 下划线 */
}

iframe { /*地图大小*/
    width: 100%;
    height: 500px; /* 或根据需要调整 */
}

/*Price table*/
.flat .plan {
    border-radius: 0px;
    list-style: none;
    padding: 0 0 20px;
    margin: 0 0 15px;
    background: #fff;
    text-align: center;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29) !important;
}

.flat .plan li {
    padding: 10px 15px;
    color: #ccc;
    border-top: 1px solid #f5f5f5;
    -webkit-transition: 300ms;
    transition: 300ms;
}

.flat .plan li.plan-price {
    border-top: 0;
}

.flat .plan li.plan-name {
    border-radius: 0;
    padding: 15px;
    font-size: 24px;
    line-height: 24px;
    color: #fff;
    background: #4E4E4E;
    margin-bottom: 30px;
    border-top: 0;
}

.flat .plan li > strong {
    color: #6B6B6B;
    font-weight: normal;
}

.flat .plan li.plan-action {
    margin-top: 10px;
    border-top: 0;
}

.flat .plan.featured {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.flat .plan.featured:hover li.plan-name, .flat .plan:hover li.plan-name, .flat .plan.featured.plan-name {
    background: #005f8d !important;
}

.customNavigation {
    display: none;
}

#clients .heading {
    margin: 0px;
}

.isotope-item {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    opacity: 1;
}

.isotopeWrapper article {
    margin: 0px;
}


#customH2 {
    text-align: center !important;
    color: #FFF(247, 243, 242) !important;
    font-size: 24px !important;
    margin: 10px 0 45px 0 !important;
}