@charset "utf-8";

figure.effect-lily img {
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    opacity: .7;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0)
}

figure.effect-lily figcaption {
    top: auto;
    bottom: 0;
    height: 50%;
    text-align: left
}

figure.effect-lily h2,
figure.effect-lily p {
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0)
}

figure.effect-lily h2 {
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s
}

figure.effect-lily p {
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform .35s;
    transition: opacity 0.2s, transform .35s
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
    opacity: 1
}

figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-lily:hover p {
    -webkit-transition-delay: .05s;
    transition-delay: .05s;
    -webkit-transition-duration: .35s;
    transition-duration: .35s
}

figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(50, 60, 77, 0.8) 75%);
    background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(50, 60, 77, 0.8) 75%);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0)
}

figure.effect-sadie h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform 0.35s, color .35s;
    transition: transform 0.35s, color .35s;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
}

figure.effect-sadie:hover h2 {
    color: #fff;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0)
}

figure.effect-sadie:hover figcaption::before,
figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-roxy {
    background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
    background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%)
}

figure.effect-roxy img {
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0)
}

figure.effect-roxy figcaption::before {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    border: 1px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0)
}

figure.effect-roxy figcaption {
    padding: 3em;
    text-align: left
}

figure.effect-roxy h2 {
    padding: 30% 0 10px
}

figure.effect-roxy p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
}

figure.effect-roxy:hover img {
    opacity: .7;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-bubba {
    background: #9e5406
}

figure.effect-bubba img {
    opacity: .7;
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

figure.effect-bubba:hover img {
    opacity: .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 .35s;
    transition: opacity 0.35s, transform .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 {
    padding-top: 30%;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
}

figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .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)
}

figure.effect-romeo {
    -webkit-perspective: 1000px;
    perspective: 1000px
}

figure.effect-romeo img {
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(0, 0, 300px);
    transform: translate3d(0, 0, 300px)
}

figure.effect-romeo:hover img {
    opacity: .6;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

figure.effect-romeo:hover figcaption::before {
    opacity: .5;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
    transform: translate3d(-50%, -50%, 0) rotate(45deg)
}

figure.effect-romeo:hover figcaption::after {
    opacity: .5;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    transform: translate3d(-50%, -50%, 0) rotate(-45deg)
}

figure.effect-romeo h2,
figure.effect-romeo p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s
}

figure.effect-romeo h2 {
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0)
}

figure.effect-romeo p {
    padding: .25em 2em;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0)
}

figure.effect-romeo:hover h2 {
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0)
}

figure.effect-romeo:hover p {
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0)
}

figure.effect-layla {
    background: #18a367
}

figure.effect-layla img {
    height: -webkit-calc(100% + 40px);
    height: calc(100% + 40px)
}

figure.effect-layla figcaption {
    padding: 3em
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
    position: absolute;
    content: '';
    opacity: 0
}

figure.effect-layla figcaption::before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

figure.effect-layla figcaption::after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

figure.effect-layla h2 {
    padding-top: 26%;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s
}

figure.effect-layla p {
    padding: .5em 2em;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s
}

figure.effect-layla:hover img {
    opacity: .7;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

figure.effect-honey {
    background: #4a3753
}

figure.effect-honey img {
    opacity: .9;
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

figure.effect-honey:hover img {
    opacity: .5
}

figure.effect-honey figcaption::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
}

figure.effect-honey h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em 1.5em;
    width: 100%;
    text-align: left;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0)
}

figure.effect-honey h2 i {
    font-style: normal;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0)
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-oscar {
    background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%)
}

figure.effect-oscar img {
    opacity: .9;
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

figure.effect-oscar figcaption {
    padding: 3em;
    background-color: rgba(58, 52, 42, 0.7);
    -webkit-transition: background-color .35s;
    transition: background-color .35s
}

figure.effect-oscar figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: ''
}

figure.effect-oscar h2 {
    margin: 20% 0 10px;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: scale(0);
    transform: scale(0)
}

figure.effect-oscar:hover h2 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

figure.effect-oscar:hover figcaption {
    background-color: rgba(58, 52, 42, 0)
}

figure.effect-oscar:hover img {
    opacity: .4
}

figure.effect-marley figcaption {
    text-align: right
}

figure.effect-marley h2,
figure.effect-marley p {
    position: absolute;
    right: 30px;
    left: 30px;
    padding: 10px 0
}

figure.effect-marley p {
    bottom: 30px;
    line-height: 1.5;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

figure.effect-marley h2 {
    top: 30px;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0)
}

figure.effect-marley:hover h2 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-marley h2::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0)
}

figure.effect-marley h2::after,
figure.effect-marley p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s
}

figure.effect-marley:hover h2::after,
figure.effect-marley:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-ruby {
    background-color: #17819c
}

figure.effect-ruby img {
    opacity: .7;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15)
}

figure.effect-ruby:hover img {
    opacity: .5;
    -webkit-transform: scale(1);
    transform: scale(1)
}

figure.effect-ruby h2 {
    margin-top: 20%;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0)
}

figure.effect-ruby p {
    margin: 1em 0 0;
    padding: 2em;
    border: 1px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(0, 20px, 0) scale(1);
    transform: translate3d(0, 20px, 0) scale(1)
}

figure.effect-ruby:hover h2 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-ruby:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1)
}

figure.effect-milo {
    background: #2e5d5a
}

figure.effect-milo img {
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
    transform: translate3d(-30px, 0, 0) scale(1.12);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

figure.effect-milo:hover img {
    opacity: .5;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1)
}

figure.effect-milo h2 {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1em 1.2em
}

figure.effect-milo p {
    padding: 0 10px 0 0;
    width: 50%;
    border-right: 1px solid #fff;
    text-align: right;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0)
}

figure.effect-milo:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-dexter {
    background: -webkit-linear-gradient(top, rgba(37, 141, 200, 1) 0%, rgba(104, 60, 19, 1) 100%);
    background: linear-gradient(to bottom, rgba(37, 141, 200, 1) 0%, rgba(104, 60, 19, 1) 100%)
}

figure.effect-dexter img {
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

figure.effect-dexter:hover img {
    opacity: .4
}

figure.effect-dexter figcaption::after {
    position: absolute;
    right: 20px;
    bottom: 30px;
    left: 20px;
    height: -webkit-calc(50% - 40px);
    height: calc(50% - 40px);
    border: 7px solid #fff;
    content: '';
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
}

figure.effect-dexter:hover figcaption::after {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-dexter figcaption {
    padding: 2em;
    text-align: left
}

figure.effect-dexter p {
    position: absolute;
    right: 60px;
    bottom: 60px;
    left: 60px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0)
}

figure.effect-dexter:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-sarah {
    background: #42b078
}

figure.effect-sarah img {
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

figure.effect-sarah:hover img {
    opacity: .4;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-sarah figcaption {
    text-align: left
}

figure.effect-sarah h2 {
    position: relative;
    overflow: hidden;
    padding: .5em 0
}

figure.effect-sarah h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

figure.effect-sarah:hover h2::after {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-sarah p {
    padding: 1em 0;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

figure.effect-sarah:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-zoe figcaption {
    top: auto;
    bottom: 0;
    padding: 1em;
    height: 3.75em;
    background: #fff;
    color: #3c4a50;
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

figure.effect-zoe h2 {
    float: left
}

figure.effect-zoe figcaption>span {
    float: right
}

figure.effect-zoe p {
    position: absolute;
    bottom: 8em;
    padding: 2em;
    color: #fff;
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transition: opacity .35s;
    transition: opacity .35s
}

figure.effect-zoe h2,
figure.effect-zoe figcaption>span {
    -webkit-transition: -webkit-transform .35s;
    transition: transform .35s;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0)
}

figure.effect-zoe figcaption>span::before {
    display: inline-block;
    padding: 8px 10px;
    font-family: 'feathericons';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-eye::before {
    content: '\e000'
}

.icon-paper-clip::before {
    content: '\e001'
}

.icon-heart::before {
    content: '\e024'
}

figure.effect-zoe h2 {
    display: inline-block
}

figure.effect-zoe:hover p {
    opacity: 1
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover figcaption>span {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

figure.effect-zoe:hover h2 {
    -webkit-transition-delay: .05s;
    transition-delay: .05s
}

figure.effect-zoe:hover figcaption>span:nth-child(4) {
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

figure.effect-zoe:hover figcaption>span:nth-child(3) {
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

figure.effect-zoe:hover figcaption>span:nth-child(2) {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

figure.effect-chico img {
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s;
    -webkit-transform: scale(1.12);
    transform: scale(1.12)
}

figure.effect-chico:hover img {
    opacity: .5;
    -webkit-transform: scale(1);
    transform: scale(1)
}

figure.effect-chico figcaption {
    padding: 3em
}

figure.effect-chico figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

figure.effect-chico figcaption::before,
figure.effect-chico p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform .35s;
    transition: opacity 0.35s, transform .35s
}

figure.effect-chico h2 {
    padding: 20% 0 20px
}

figure.effect-chico p {
    margin: 0 auto;
    padding: 0 2em;
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

html,
body {
    height: 100%;
    margin: 0;
}

.showHere {
    display: none;
}

.content_en {
    font-size: 1.2em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3px;
    padding-left: 20px;
}

.content_zh {
    font-size: 2.1em;
    letter-spacing: 0.1em;
    font-weight: bold;
    padding-left: 20px;
}

.yellow {
    color: #ffde00;
}

.red {
    color: #F00;
}

.black {
    color: #000;
}

.warp_effect {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.effect {
    width: 2500px;
}

.effect .line1,
.effect .line2 {
    height: 250px;
    overflow: hidden;
}

.square {
    width: 350px;
    height: 250px;
    float: left;
    overflow: hidden;
    background: #1a1a12;
}

.square .s_1 {
    width: 100%;
    height: 100%;
}

.square .s_2 {
    height: 50%;
    width: 50%;
    overflow: hidden;
}

.square .s_2 img {
    width: 100%;
}

.square .s_3 {
    height: 100%;
    width: 50%;
    float: right;
    overflow: hidden
}

.square .s_3 img {
    height: 100%;
}

.square figure a {
    display: block;
    text-decoration: none;
    text-align: center;
    color: #000;
}

.square figure a:hover h2 {
    color: #F00;
}

.square figure a:hover .caseName {
    color: #F00;
}

.square figure {
    margin: 0;
    padding: 0;
    position: relative;
}

.square figure img {
    display: block;
    position: relative;
    z-index: 10;
    filter: alpha(opacity=50);
    -webkit-opacity: 0.7;
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}

.square figure figcaption {
    display: block;
    position: absolute;
    z-index: 5;
    padding: 29px 44px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    text-align: center;
    -webkit-backface-visibility: hidden;
    /* Chrome, Safari, Opera */
    backface-visibility: hidden;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.square figure h2 {
    color: #000;
    font-size: 18px;
}

.square figure .caseName {
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

.square figure .view {
    font-size: 12px;
    line-height: 20px;
    color: #000;
    margin-top: 10px;
    border: 1px solid #000;
    border-radius: 5px;
    position: absolute;
    bottom: 15px;
    left: 25%;
    width: 50%;
}

.square figure .texts {
    margin: 15px 0;
    height: 130px;
    overflow: hidden;
    font-size: 14px;
}

.square figure img {
    -webkit-backface-visibility: hidden;
    /* Chrome, Safari, Opera */
    backface-visibility: hidden;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.square figure:hover img,
figure.hover img {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.square figure:hover figcaption,
figure.hover figcaption {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
}

.about {
    color: #fff;
}

.about .about-tit {
    margin-top: 0px;
    float: left;
    opacity: 0;
}

.about .a_find {
    float: right;
    width: 60%;
    font-size: 0.95em;
    line-height: 1.6em;
    opacity: 0;
}

.about .a_find .find1 {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 10px;
}

.about .three_box {
    margin-top: 8em;
    margin-bottom: 5em;
}

.about .three_box li {
    float: left;
    width: 33%;
    text-align: center;
    box-sizing: border-box;
    opacity: 0;
}

.about .three_box li img {
    width: 50%;
}

.about .three_box li .a_en {
    color: #ff7800;
    font-size: 0.75em;
    margin: 10px 0 5px;
    font-family: "Lucida Console", Monaco, monospace
}

.about .three_box li .a_name {
    font-size: 1.5em;
}

.about .three_box li .a_texts {
    font-size: 1em;
    color: #aaa;
    margin: 15px auto;
    width: 70%;
}

.page3 {
    /*background:url(../images/page3.jpg) repeat 100% top;*/
    background-color: #D8D8D8;
}

.works {
    color: #000;
}

.works .content_en {
    margin: 0.7em 0;
    color: #606060;
}

.works .tab {
    margin: 3em 0 1em 0;
}

.works .portfolio {
    margin: 3em 0;
    display: flex;
    flex-wrap: wrap;
}

.works .portfolio figure {
	position: relative;
    width: 25%;
    margin-bottom: 15px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    z-index: 1;
    background-color: #fff;
    transition: all .5s ease-out;
}
.works .portfolio figure:hover {
    background-color: #24241c;
}


.works .portfolio figure img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.works .portfolio figure figcaption {
	display: block;
    padding: 15px 10px;
    color: #fff;
    text-transform: uppercase;
    font-size: 1em;
    box-sizing: border-box;
}
.works .portfolio figure figcaption .portfolio__title{
	width: 100%;
	padding-bottom: 15px;
	text-align: left;
	color: #000;
	transition: all .5s ease-out;
}
.works .portfolio figure:hover figcaption .portfolio__title{
    color: #ff8c00;
}
.works .portfolio figure figcaption .portfolio__txt{
	line-height: 25px;
	color: #333;
	font-size: 1em;
	text-shadow: none;
	transition: all .5s ease-out;
}
.works .portfolio figure:hover figcaption .portfolio__txt{
	color: #fff;
}

.works .portfolio figure figcaption::before,
.works .portfolio figure figcaption::after {
    pointer-events: none;
}

.works .portfolio figure figcaption,
.works .portfolio figure .portfolio__links {
    width: 100%;
    height: 100%;
}

.works .portfolio figure .portfolio__links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
}
.works .portfolio figure .portfolio__links::before{
	content: '';
	width: 100%;
	padding-bottom: 71.4%;
	background-color: rgba(48,133,163,0.6);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	transition: all .5s ease-out;
	opacity: 0;
}

.works .portfolio figure h2 {
    word-spacing: -0.15em;
    font-weight: 1em;
}

.works .portfolio figure h2,
.works .portfolio figure p {
    text-shadow: 0 0 3px #999;
    box-sizing: border-box;
}

.works .portfolio figure h4 {
    word-spacing: -0.15em;
    font-weight: 1em;
}

.works .portfolio figure h4 {
    text-shadow: 0 0 3px #999;
    box-sizing: border-box;
}

.works .portfolio figure p {
    letter-spacing: 1px;
    font-size: 0.8em;
    text-align: justify;
}
.works .portfolio figure:hover .portfolio__links::before {
	opacity: 1;
}
.works .all_buttons {
    margin: 3em auto;
}

.title04 {
    height: 110px;
    padding-top: 1em;
    box-sizing: border-box;
}

.title04 .content_en {
    color: #aaaaaa;
    margin-bottom: 0;
}

.row {
    padding-bottom: 500em;
    margin-bottom: -500em;
    width: 50%;
}

.blog {
    background: #e9e9e9;
    height: 100%;
    float: left;
}

.blog .title04 {
    background: #fff;
}

.blog .title04 .content_zh,
.blog .title04 .content_en {
    padding-left: 0px;
}

.blog .blog_content {
    margin-left: 27%;
}

.blog .blog_box .blog_content {
	display: none;
}
.blog_nav{
	width: 100%; 
	padding-top: 20px;
	padding-left: 27%;
	padding-bottom: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.blog_nav .tabs-list{
	margin: 0 3px 8px 0;
	padding: 10px 15px;
	display: inline-block;
	background-color: #24241c;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
}
.blog_nav .tabs-list a{color: #fff;}
.blog_nav .tabs-list--current,.blog_nav .tabs-list:hover{
	background-color: #DA4B27;
}


.blog .blog_content ul {
    margin: 0 5% 5% 0;
    padding-bottom: 1em;
}

.blog .blog_content ul li {
    padding: 2.5em 10px;
    color: #5c5c5c;
    line-height: 1.6em;
    border-bottom: #d7d7d7 1px solid;
    position: relative;
    transition: all .5s ease-out;
}
.blog .blog_content ul li:hover{
	background-color: #24241c;
}

.blog .blog_content ul li:last-child{
	border-bottom: none;
}

.blog .blog_content ul li .artical_tit {
    color: #da4b27;
    font-size: 1.25em;
    margin-bottom: 0.7em;
    transition: all .5s ease-out;
}
.blog .blog_content ul li:hover .artical_tit{
	color: #ff8c00;
}
.blog .blog_content ul li a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: 200%;
    font-size: 0;
    opacity: 0;
}
.blog .blog_content ul li p{
	max-height: 50px;
	overflow: hidden;
	transition: all .5s ease-out;
}
.blog .blog_content ul li:hover p{
	color: #fff;
}
.qa {
    background: #202018 url(../images/qa_bg.jpg) repeat;
    height: 100%;
    /*margin-right: -1px;*/
    float: right;
}

.qa .title04 {
    border-bottom: 1px solid #41413a;
    color: #fff;
}

.qa .qa_content {
    padding: 0 5%;
    color: #fff;
    width: 80%;
    box-sizing: border-box;
}
.qa_nav{
	width: 100%;
	padding: 20px 5%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.qa_nav .tabs-list{
	margin: 0 3px 8px 0;
	padding: 10px 15px;
	display: inline-block;
	background-color: #fff;
	border-radius: 5px;
	cursor: pointer;
}
.qa_nav .tabs-list a{color: #111;}
.qa_nav .tabs-list--current,.qa_nav .tabs-list:hover{
	background-color: #DA4B27;
	color: #fff;
}
.qa_nav .tabs-list--current a,.qa_nav .tabs-list:hover a{color: white;}

.qa_scroll {
   	padding: 0;
}
.gallery-cell{
	padding: 2em 10px;
	position: relative;
	transition: all .5s ease-out
}
.gallery-cell:hover{
	background-color: #DA4B27;
}
.qaIcon {
    width: 40px;
    position: absolute;
    left: 10px;
    top: 1.6em;
    transition: all .5s ease-out
}
.gallery-cell:hover .qaIcon{
	filter: brightness(0);
}
.qaIcon img{
	width: 100%;
	display: block;
}

.qa_Title {
	width: 100%;
	padding-left: 55px;
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .5s ease-out
}
.gallery-cell:hover .qa_Title {
	color: #111;
}


.qa_answer {
    font-size: 1.1em;
    line-height: 1.8em;
    max-height: 62px;
    overflow: hidden;
    text-align: left;
}
.gallery-cell .qa_link{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}


.flickity-enabled {
    position: relative;
}

.flickity-enabled:focus {
    outline: none;
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.flickity-prev-next-button {
    display: none;
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
}

.flickity-rtl .flickity-page-dots {
    direction: rtl;
}

.flickity-page-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 8px;
    background: #c2c2c2;
    border-radius: 50%;
    filter: alpha(opacity=25);
    /* IE8 */
    opacity: 0.25;
    cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
    filter: alpha(opacity=100);
    /* IE8 */
    opacity: 1;
}

.blog .viewAll a {
    color: #000;
}

.qa .viewAll a {
    color: #fff;
}

.title04 .viewAll {
    float: right;
    margin: 5% 3%;
    border-bottom: 3px solid #da4b27
}

.title04 .viewAll a {
    position: relative;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
    font-size: 1.35em;
}

.title04 .viewAll a:hover,
.title04 .viewAll a:focus {
    outline: none;
}

.cl-effect-5 a {
    overflow: hidden;
    height: 1.2em;
}

.cl-effect-5 a span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.cl-effect-5 a span::before {
    position: absolute;
    top: 100%;
    content: attr(data-hover);
    font-weight: 700;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
}

.page5 .content_en {
    font-size: 0.9em;
}

.project {
    margin: 4em 0 0;
    padding: 0 20px;
}

.project figure {
    position: relative;
    display: inline-block;
    width: 20%;
    /**/
    margin-bottom: 3.5em;
    text-align: center;
}

.project figure img {
    display: block;
    position: relative;
    z-index: 10;
    max-width: 100%;
    height: auto;
    border: 1px solid #e9e9e9;
}

.project figure figcaption {
    display: block;
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0px;
    text-align: left;
}

.project figure .projectName {
    color: #000;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.2;
    border-left: 3px solid #900;
    padding-left: 10px;
}

.project figure a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.project figure img {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.project figure:hover img {
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
}

/**/
.page6 {
    /*background:url(../images/page6-2.jpg) no-repeat 100% #26211f;*/
    color: #fff;
    background-color: #000;
}
.idx-contact{
    padding: 0 15px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
}
.info {
    width: 30%;
}

.info .foot_logo {
    margin-bottom: 7em;
    font-size: 2em;
    line-height: 2em;
}

.info .foot_logo img {
    float: left;
}

.info .info_tit {
    font-family: 'Economica', sans-serif;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.4em;
    margin-bottom: 1.1em;
}

.info p {
    line-height: 1.7em;
    letter-spacing: 0.1em;
    font-size: 0.95em;
}

.info a {
    color: #fff;
}

.contact_btn {
    margin: auto;
    width: 250px;
    margin-bottom: 2em;
    display: none;
}

.contact_btn a {
    background: #ffde00;
    display: block;
    height: 50px;
    line-height: 50px;
    color: #000;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.5em;
}

.contact_btn a:hover {
    background: #fff;
}

.contact_form {
    width: 70%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
.contact_formtitle{
    width: 100%;
}
.contact_form .con_title {
    width: 100%;
    font-family: 'Economica', sans-serif;
    font-size: 4em;
    margin-bottom: 0.15em;
}
.contact_form #form1{
    width: 100%;
    overflow: hidden;
}
.contact_form .con_title span {
    color: #fff04e;
}

.form_row {
    width: 33%;
    float: left;
    box-sizing: border-box;
    padding-right: 6%;
    margin-top: 3em;
}

.form_right {
    float: right;
    padding-top: 0.5em;
    padding-right: 0px;
}

.form_right .text_box {
    border: 0;
    background: #d7d7d7;
    color: #000;
    height: 120px;
    width: 100%;
    margin-top: 0.5em;
}

.form_right .button {
    width: 100%;
    margin-top: 1em;
}

.footer {
    margin: 2em 0;
}

@media only screen and (min-width : 980px) and (max-width : 1200px) {
    .page3 {
        height: auto;
        overflow: hidden;
        background: #dcdddc;
    }

    .content {
        padding-top: 50px;
    }

    .about .three_box {
        margin-bottom: 1.7em;
        margin-top: 5em;
    }

	.blog .blog_nav{
		padding-left: 5%;
	}
    .blog .blog_content {
        margin-left: 5%;
    }

    .blog .blog_content ul li {
        padding: 2em 0;
        line-height: 1.6em;
        height: 100px;
    }

    .qa .qa_content {
        width: 100%;
    }

    .project figure {
        width: 25%;
    }

    .contact_form {
        float: right;
        width: 70%;
    }
}

@media only screen and (min-width : 768px) and (max-width : 979px) {
    .page3 {
        background: #dcdddc;
    }

    .about .three_box {
        margin-bottom: 6em;
    }

    .about .three_box li img {
        width: 50%;
    }

    .works .portfolio figure {
        width: 50%;
    }

    .blog {
        width: 100%;
        height: 100%;
    }
	.blog .blog_nav{
		padding-left: 5%;
	}
    .blog .blog_content {
        margin-left: 5%;
    }

    .qa {
        width: 100%;
        height: 900px;
    }

    .qa .qa_content {
        width: 100%;
    }

    .project figure {
        width: 33%;
    }

    .info {
        float: none;
        text-align: center;
        width: 100%;
    }

    .info .foot_logo {
        margin: 0 auto 1em;
    }

    .info .foot_logo img {
        float: none;
    }

    .contact_form {
        display: none;
    }

    .contact_btn {
        display: block;
    }
}

@media only screen and (min-width : 640px) and (max-width : 767px) {
    .page3 {
        background: #dcdddc;
    }

    .works .portfolio {
        margin: 2em 0;
    }

    .works .portfolio figure {
        width: 50%;
    }
	.works .portfolio figure figcaption .portfolio__txt{
		max-height: 75px;
		overflow: hidden;
	}
    .blog {
        width: 100%;
        height: 100%;
    }
	.blog .blog_nav{
		padding-left: 5%;
	}
    .blog .blog_content {
        margin-left: 5%;
    }

    .qa {
        width: 100%;
    }

    .qa .qa_content {
        width: 100%;
    }

    .project figure {
        width: 33%;
    }

    .info {
        float: none;
        text-align: center;
        width: 100%;
    }

    .info .foot_logo {
        margin: 0 auto 1em;
    }

    .info .foot_logo img {
        float: none;
    }

    .contact_form {
        display: none;
    }

    .contact_btn {
        display: block;
    }

}

@media only screen and (max-width : 639px) {
    .page1 {
        background: url(../images/index_26b99b394f08200b6409f6bbfece1f0e2.jpg) no-repeat center bottom;
        background-size: 990px auto;
    }

    .page3 {
        background: #dcdddc;
    }

    .works .portfolio {
        margin: 1.5em 0;
    }

    .content {
        padding-top: 50px;
    }

    .content_en {
        font-size: 0.9em;
    }

    .content_zh {
        font-size: 1.5em;
    }

    .about {
        padding: 0 20px;
    }

    .about .about-tit,
    .about .a_find {
        float: none;
    }

    .about .about-tit {
        margin-bottom: 5%;
    }

    .about .content_zh,
    .about .content_en {
        margin-left: 0;
        padding-left: 0;
    }

    .about .a_find {
        width: 100%;
        font-size: 0.8em;
        box-sizing: border-box
    }

    .about .three_box {
        margin-top: 2em;
        margin-bottom: 0em;
    }

    .about .three_box li {
        float: none;
        width: 100%;
        text-align: left;
        margin-bottom: 2em;
        overflow: hidden;
    }

    .about .three_box li img {
        width: 23%;
        margin-right: 1em;
        float: left;
    }

    .about .three_box li .a_en {
        width: 100%;
        margin: 0 0;
    }

    .about .three_box li .a_name {
        font-size: 1.2em;
        margin: 0.1em 0;
    }

    .about .three_box li .a_texts {
        font-size: 0.75em;
        margin: 1px auto;
        width: 100%;
    }

    .works .portfolio figure {
        width: 50%;
        /* height:200px;*/
    }
    .works .portfolio figure figcaption .portfolio__txt{
		max-height: 75px;
		overflow: hidden;
	}

    .works .portfolio figcaption {
        font-size: 0.8em;
    }

    .title04 {
        height: 90px;
    }

    .page5 .content_en {
        font-size: 0.75em;
    }

    .blog {
        width: 100%;
        height: 100%;
    }
	.blog .blog_nav{
		padding-left: 5%;
        padding-right: 5%;
	}
    .blog .blog_content {
        margin-left: 5%;
    }

    .blog .blog_content ul li {
        padding: 1.5em 0;
    }

    .blog .blog_content ul li .artical_tit {
        font-size: 1.1em;
    }

    .qa {
        width: 100%;
    }

    .qa .qa_content {
        width: 100%;
    }

    .qa_scroll .qaIcon {
        
    }

    .qa_scroll .qa_Title {
        font-size: 1.3em;
    }

    .qa_scroll .qa_Title a {
        color: #fff;
    }

    .qa_scroll .qa_answer {
        font-size: 1em;
        line-height: 1.5em;
        max-height: 48px;
    }  

    .title04 .viewAll a {
        font-size: 1em;
    }

    .project {
        padding: 0 0 0 0.5em;
    }

    .project figure {
        width: 33%;
        margin-bottom: 0.5em;
        box-sizing: border-box;
        padding-right: 0.5em;
    }

    .info {
        float: none;
        text-align: center;
        width: 100%;
    }

    .info .foot_logo {
        margin: 0 auto 1em;
    }

    .info .foot_logo img {
        float: none;
    }

    .contact_form {
        display: none;
    }

    .contact_btn {
        display: block;
    }
}

@media only screen and (max-width : 480px) {
    .project figure {
        width: 50%;
    }

    .about .three_box li img {
        width: 27%;
        height: auto;
    }
    .tabs-nav {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-between;
	}
    .tabs-nav .tabs-list{
        width: calc(50% - 6px);
        margin-right: 0;
        padding: 10px;
        text-align: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        
    }
}

/*2019 08修改*/
.banner{
    width: 100%;
    padding-top: 165px;
    position: relative;
}
.banner__img{
    width: 100%;
}
.banner__img img{
    width: 100%;
    height: auto;
    display: block;
}
.banner__text{
    width: calc(95% - 20px);
    max-width: 665px;
    margin: auto;
    padding: 0 20px 30px 40px;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    position: absolute;
    top: calc(12% + 165px);
    left: 5%;
}
.banner__text::after{
    content: '';
    width: 100%;
    height: calc(100% - 43px);
    border-style: solid;
    border-width: 0 1px 1px 1px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.banner__text .banner__sloganTitle{
    margin-bottom: 20px;
    font-size: 60px;
    line-height: 85px;
    font-weight: 700;
    letter-spacing: 0.2em;
    position: relative;
}
.banner__text .banner__sloganTitle span{display: inline-block;}
.banner__text .banner__sloganTitle::before,.banner__text .banner__sloganTitle::after{
    content: ''; 
    height: 1px;
    margin: auto;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
}
.banner__text .banner__sloganTitle::before{
    width: 5%;
    left: -40px;
}
.banner__text .banner__sloganTitle::after{
    width: 15%;
    right: -22px;
}
.banner__slogan{font-size: 20px; font-weight: 700; display: block; line-height: 35px;}
.banner__slogan-en{font-weight: 700; display: block;}
@media only screen and (max-width : 960px) {
    .banner__text::after{
        height: calc(100% - 29px);
    }
    .banner__text .banner__sloganTitle{
        font-size: 40px;
        line-height: 55px;
    }
    .banner__text .banner__sloganTitle::after{ width: calc(100% - 336px);}
}
@media only screen and (max-width : 768px) {
    .banner{
        padding-top: 130px;
    }
    .banner__text{
        width: calc(100% - 60px);
        padding-left: 20px;
        padding-right: 20px;
        left: 30px;
        top: calc(10% + 130px);
    }
    .banner__text::after{
        height: calc(100% - 21px);
    }
    .banner__text .banner__sloganTitle{
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 10px;
    }
    .banner__text .banner__sloganTitle::before{width: 10px; left: -20px;}
    .banner__text .banner__sloganTitle::after{ width: calc(100% - 252px);}
    .banner__slogan{font-size: 18px;}
}

@media only screen and (max-width : 480px) {
    .banner{
        padding-top: 0;
    }
    .banner__text{
        width: calc(100% - 30px);
        margin: auto;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
    }
    .banner__text .banner__sloganTitle{
        letter-spacing: 0.1em
    }
   .banner__text .banner__sloganTitle::after{ width: calc(100% - 220px);}
}