
/*flip-box*/


.am-flip-box { -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; overflow: visible; margin-bottom: 15px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-origin: center; -moz-transform-origin: center; transform-origin: center; opacity: 1; z-index: 0; -webkit-transition: z-index 750ms ease; -moz-transition: z-index 750ms ease; -o-transition: z-index 750ms ease; transition: z-index 750ms ease; -ms-transition: z-index 0ms ease; }
    .am-flip-box:hover { z-index: 100; }
    .am-flip-box .title { font-size: 18px; color: #424242; margin: 5px 0 16px 0; }
    .am-flip-box .front,
    .am-flip-box .back { -webkit-transition: all 750ms ease 0s; -moz-transition: all 750ms ease 0s; -o-transition: all 750ms ease 0s; transition: all 750ms ease 0s; -ms-transition: all 0ms ease 0s; position: relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    .am-flip-box .front { position: relative; color: #444; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 1; pointer-events: none }

    .am-flip-box .back { position: absolute; top: 0px; left: 0px; right: 0px; /*bottom: 0px;*/ min-height: 100%; z-index: 0; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); display: flex; justify-content: center; align-items: Center; }

    .am-flip-box .icon-double-right { width: 30px; height: 16px; position: relative; display: inline-block; margin: 0 8px -2px; }
        .am-flip-box .icon-double-right::before { content: ""; position: absolute; top: 50%; left: 0; width: 30px; border-bottom: 1px solid currentColor; }
        .am-flip-box .icon-double-right::after { content: ""; position: absolute; top: 3px; right: 1px; width: 11px; height: 11px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-right: 1px solid currentColor; border-top: 1px solid currentColor; }

    .am-flip-box.rotate-3d .front { -webkit-transform: rotateY(0) translateX(0); -moz-transform: rotateY(0) translateX(0); transform: rotateY(0) translateX(0); }
    .am-flip-box.rotate-3d .back { -webkit-transform: rotateY(-180deg) translateX(-300px); -moz-transform: rotateY(-180deg) translateX(-300px); transform: rotateY(-180deg) translateX(-300px); }

    .am-flip-box.flip-right .back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); }
    .am-flip-box.rotate-3d.flip-right .back { -webkit-transform: rotateY(180deg) translateX(300px); -moz-transform: rotateY(180deg) translateX(300px); transform: rotateY(180deg) translateX(300px); }
    .am-flip-box.flip-top .front { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }

    .am-flip-box.flip-top .back { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); }

    .am-flip-box.rotate-3d.flip-top .front { -webkit-transform: rotateX(0deg) translateY(0); -moz-transform: rotateX(0deg) translateY(0); transform: rotateX(0deg) translateY(0); }
    .am-flip-box.rotate-3d.flip-top .back { -webkit-transform: rotateX(-180deg) translateY(-300px); -moz-transform: rotateX(-180deg) translateY(-300px); transform: rotateX(-180deg) translateY(-300px); }

    .am-flip-box.flip-bottom .front { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
    .am-flip-box.flip-bottom .back { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); transform: rotateX(-180deg); }
    .am-flip-box.rotate-3d.flip-bottom .front { -webkit-transform: rotateX(0deg) translateY(0); -moz-transform: rotateX(0deg) translateY(0); transform: rotateX(0deg) translateY(0); }
    .am-flip-box.rotate-3d.flip-bottom .back { -webkit-transform: rotateX(180deg) translateY(300px); -moz-transform: rotateX(180deg) translateY(300px); transform: rotateX(180deg) translateY(300px); }
    .am-flip-box:hover .front { background-color: #FFF; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); }
    .am-flip-box:hover .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 1; }
    .am-flip-box.rotate-3d:hover .front { -webkit-transform: rotateY(180deg) translateX(100%); -moz-transform: rotateY(180deg) translateX(100%); transform: rotateY(180deg) translateX(100%); }
    .am-flip-box.rotate-3d:hover .back { -webkit-transform: rotateY(0deg) translateX(0); -moz-transform: rotateY(0deg) translateX(0); transform: rotateY(0deg) translateX(0); }
    .am-flip-box.flip-right:hover .front { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); }
    .am-flip-box.rotate-3d.flip-right:hover .front { -webkit-transform: rotateY(-180deg) translateX(-100%); -moz-transform: rotateY(-180deg) translateX(-100%); transform: rotateY(-180deg) translateX(-100%); }

    .am-flip-box.flip-top:hover .front { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); transform: rotateX(-180deg); }
    .am-flip-box.flip-top:hover .back { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }

    .am-flip-box.rotate-3d.flip-top:hover .front { -webkit-transform: rotateX(180deg) translateY(-100%); -moz-transform: rotateX(180deg) translateY(-100%); transform: rotateX(180deg) translateY(-100%); }
    .am-flip-box.rotate-3d.flip-top:hover .back { -webkit-transform: rotateX(0deg) translateY(0); -moz-transform: rotateX(0deg) translateY(0); transform: rotateX(0deg) translateY(0); }

    .am-flip-box.flip-bottom:hover .front { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); }

    .am-flip-box.flip-bottom:hover .back { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
    .am-flip-box.rotate-3d.flip-bottom:hover .front { -webkit-transform: rotateX(-180deg) translateY(100%); -moz-transform: rotateX(-180deg) translateY(100%); transform: rotateX(-180deg) translateY(100%); }
    .am-flip-box.rotate-3d.flip-bottom:hover .back { -webkit-transform: rotateX(0deg) translateY(0); -moz-transform: rotateX(0deg) translateY(0); transform: rotateX(0deg) translateY(0); }

    .am-flip-box.rotate-text-3d .front,
    .am-flip-box.rotate-text-3d .back { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }
        .am-flip-box.rotate-text-3d .front .box > .center { -webkit-transform: translateZ(60px) scale(.94); transform: translateZ(60px) scale(.94); }
        .am-flip-box.rotate-text-3d .back .box > .center { -webkit-transform: translateZ(60px) scale(.94); transform: translateZ(60px) scale(.94); }

.am-flip-box01 .front,
.am-flip-box01 .back { border: 1px solid #dcdcdc; padding: 50px; background-color: #FFF; text-align: center; }

.am-flip-box01 .back { white-space: nowrap; }
    .am-flip-box01 .back > div { display: inline-block; width: 100%; white-space: normal; vertical-align: middle; }
    .am-flip-box01 .back:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
.am-flip-box01 .icon { width: 80px; height: 80px; border-radius: 50%; border: 2px solid currentColor; font-size: 36px; line-height: 80px; display: inline-block; margin: 0 auto 18px; color: #2c5cda; }

@media only screen and (max-width: 1199px) {
    .am-flip-box01 .front,
    .am-flip-box01 .back { padding: 25px; }
}

.am-flip-box02 { margin-top: 50px; }
    .am-flip-box02 .front,
    .am-flip-box02 .back { border: 1px solid #dcdcdc; text-align: center; background-color: #FFF; }
    .am-flip-box02 .am-iconbox { margin: 0px 10%; }
    .am-flip-box02 .front,
    .am-flip-box02 .back { padding: 0 46px 46px; }

    .am-flip-box02 .am-btn-2 { width: 146px; }
    .am-flip-box02 .back { justify-content: start; align-items: start; }

    .am-flip-box02 .icon { width: 96px; height: 96px; line-height: 104px; border-radius: 50%; font-size: 40px; display: block; margin: -48px auto 35px; color: #ffffff; background-color: #2c5cda; }


@media only screen and (max-width: 1199px) {
    .am-flip-box02 .am-iconbox { margin: 0px 10%; }
}





.am-flip-box03 .pic img { width: 100%; }
.am-flip-box03 .box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; white-space: nowrap; }
    .am-flip-box03 .box:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
    .am-flip-box03 .box::before { content: ""; background-color: #2c5cda; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .85; }
.am-flip-box03 .front .title { margin: 0; }
.am-flip-box03 .box > .center { white-space: normal; display: inline-block; width: 100%; vertical-align: middle; text-align: center; color: #FFF; position: relative; padding: 0px 20px; }
.am-flip-box03 .title { color: #FFF; font-size: 18px; }
.am-flip-box03 .back,
.am-flip-box03 .back a,
.am-flip-box03 .back a:link,
.am-flip-box03 .back a:active,
.am-flip-box03 .back a:visited,
.am-flip-box03 .back a:hover { color: #FFF; }



.am-flip-box04 .front { background-color: #fbfbfb; border: 1px solid #e5e5e5; text-align: center; }
.am-flip-box04 .pic { margin: -1px; }
    .am-flip-box04 .pic img { width: 100%; vertical-align: top; }
.am-flip-box04 .center { padding: 25px; text-align: center; }
    .am-flip-box04 .center .title { font-size: 18px; color: #424242; margin: 0px 0px 12px; }
.am-flip-box04 .back { white-space: nowrap; background-color: #2c5cda; }
    .am-flip-box04 .back:after,
    .am-flip-box04 .back > .box:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
    .am-flip-box04 .back .center { display: inline-block; vertical-align: middle; width: 100%; white-space: normal; text-align: center; padding: 35px 55px; }
    .am-flip-box04 .back .title { font-size: 18px; color: #fff; margin: 0px 0px 19px; }
    .am-flip-box04 .back,
    .am-flip-box04 .back a,
    .am-flip-box04 .back a:link,
    .am-flip-box04 .back a:active,
    .am-flip-box04 .back a:visited,
    .am-flip-box04 .back a:hover { color: #FFF; }

        .am-flip-box04 .back > .box { display: inline-block; vertical-align: middle; width: 100%; }
.am-flip-box04 .front { font-size: 14px; color: #666666; }


@media only screen and (max-width: 1199px) {
    .am-flip-box04 .back .center { padding: 25px; }
}

.am-flip-box05 img { width: 100%; }
.am-flip-box05 .cont { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; z-index: 1; padding: 22px 20px 19px; color: #FFF; }
    .am-flip-box05 .cont:after { content: ""; background-color: #2c5cda; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.85; }
.am-flip-box05 .title { color: #FFF; margin: 0 0 8px; }
    .am-flip-box05 .title small { font-size: 16px; color: #FFF; display: block; margin-top: 3px; font-weight: normal; }
.am-flip-box05 .back { text-align: center; white-space: nowrap; background-color: #00bec5; color: #FFF; }

    .am-flip-box05 .back > .center { white-space: normal; display: inline-block; vertical-align: middle; width: 100%; padding: 30px 35px; }
    .am-flip-box05 .back .title { margin-bottom: 27px; }
        .am-flip-box05 .back .title small { margin-top: 6px; }
.am-flip-box05 .social { margin-bottom: 14px; }
.am-flip-box05 .back .social a,
.am-flip-box05 .back .social a:link,
.am-flip-box05 .back .social a:active,
.am-flip-box05 .back .social a:visited { width: 44px; height: 44px; line-height: 44px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; font-size: 22px; color: #2c5cda; background-color: #FFF; display: inline-block; margin: 0 4px 6px; transition: all ease-in 200ms; -moz-transition: all ease-in 200ms; /* Firefox 4 */ -webkit-transition: all ease-in 200ms; /* Safari and Chrome */ -o-transition: all ease-in 200ms; /* Opera */ -ms-transition: all ease-in 200ms; /* IE9? */ }
    .am-flip-box05 .back .social a:hover { text-decoration: none; }

.am-flip-box05 .back a,
.am-flip-box05 .back a:link,
.am-flip-box05 .back a:active,
.am-flip-box05 .back a:visited,
.am-flip-box05 .back a:hover { color: #FFF; }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .am-flip-box05 .back > .center { padding: 15px; }
}

.am-flip-box06 { text-align: center; }
    .am-flip-box06 .front,
    .am-flip-box06 .back { text-align: center; padding: 50px 50px 45px; background-color: #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
    .am-flip-box06 .title { font-size: 18px; margin: 30px 0px 17px; }
        .am-flip-box06 .title:after { content: ""; border-bottom: 1px solid #ffffff; width: 50px; display: block; margin: 21px auto 0; }
    .am-flip-box06 .front { background-color: #00bec5; }
        .am-flip-box06 .front,
        .am-flip-box06 .front .title { color: #FFF; }
    .am-flip-box06 .back .title { margin-top: 0; }
        .am-flip-box06 .back .title:after { border-bottom-color: #3eaffc; }
    .am-flip-box06 .back { white-space: nowrap; }
        .am-flip-box06 .back:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
        .am-flip-box06 .back .center { white-space: normal; display: inline-block; vertical-align: middle; width: 100%; }
        .am-flip-box06 .back > .box { display: inline-block; vertical-align: middle; width: 100%; }

    .am-flip-box06 .am-btn-1 { width: 146px; }

    .am-flip-box06 .icon { font-size: 62px; }


@media only screen and (max-width: 1199px) {
    .am-flip-box06 .front,
    .am-flip-box06 .back { padding: 30px 25px 25px; }
}

.am-flip-box07 { position: relative; margin: 0; float: left; width: 20%; }
    .am-flip-box07 .front h3 { position: absolute; text-align: center; margin: 0; line-height: 1.2; color: #fff; font-size: 14px; padding: 20px 0; width: 80%; bottom: 30px; background-color: #20a3f0; }
        .am-flip-box07 .front h3 span { display: block; font-weight: normal; font-size: 13px; padding: 3px 0 0 0; }
    .am-flip-box07 .front img { width: 100%; }
    .am-flip-box07 .back { background-color: #697b85; }
        .am-flip-box07 .back .vertical-align { text-align: center; position: absolute; left: 0; bottom: 50%; padding: 0 15px; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); color: #fff; }

@media only screen and (min-width: 1200px) {
    .am-flip-box07 .back .vertical-align { padding: 0 48px; }
}

.am-flip-box07 .back h5 { margin: 0; line-height: 1.2; color: #fff; width: 100%; font-size: 14px; padding: 0 0; text-align: center; }
.am-flip-box07 .back h6 { font-weight: normal; margin: 3px 0 0 0; line-height: 1.2; color: #fff; width: 100%; font-size: 13px; padding: 0 0; text-align: center; }
.am-flip-box07 .back p { margin: 25px 0 0 0; font-size: 13px; }
.am-flip-box07 .back .home11-social { margin: 0 0 18px 0; }
    .am-flip-box07 .back .home11-social a { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; border: 1px solid #fff; border-radius: 50%; margin: 3px; color: #fff; }
        .am-flip-box07 .back .home11-social a:hover { opacity: 0.5; text-decoration: none; }

@media only screen and (max-width: 991px) and (min-width: 768px) {
    .am-flip-box07 { width: 33.33%; }
}

@media only screen and (max-width: 767px) {
    .am-flip-box07 { float: none; width: 100%; }
}

.am-flip-box01 .icon,
.am-flip-box05 .back .social a,
.am-flip-box05 .back .social a:link,
.am-flip-box05 .back .social a:active,
.am-flip-box05 .back .social a:visited { color: #2c5cda; }
.am-flip-box02 .icon,
.am-flip-box03 .box::before,
.am-flip-box04 .back,
.am-flip-box05 .cont:after { background-color: #2c5cda; }

