@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local("Roboto Light"),local("Roboto-Light"),url("../fonts/roboto-v15-latin-300.woff2") format("woff2"),url("../fonts/roboto-v15-latin-300.woff") format("woff"); }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local("Roboto"),local("Roboto-Regular"),url("../fonts/roboto-v15-latin-regular.woff2") format("woff2"),url("../fonts/roboto-v15-latin-regular.woff") format("woff"); }

@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local("Roboto Italic"),local("Roboto-Italic"),url("../fonts/roboto-v15-latin-italic.woff2") format("woff2"),url("../fonts/roboto-v15-latin-italic.woff") format("woff"); }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local("Roboto Medium"),local("Roboto-Medium"),url("../fonts/roboto-v15-latin-500.woff2") format("woff2"),url("../fonts/roboto-v15-latin-500.woff") format("woff"); }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local("Roboto Bold"),local("Roboto-Bold"),url("../fonts/roboto-v15-latin-700.woff2") format("woff2"),url("../fonts/roboto-v15-latin-700.woff") format("woff"); }


/*
	Theme Name: Aleron.
	Created : July 26 2018
	Updated : None
	Version: 1.0

*/

/* ========================================================================== */
/* ========================================================================== */
/* [Table of contents] */
/* ========================================================================== */
/* ========================================================================== */

/*	

	1. BASE MODULE.	
		1.1. RESET
		1.2. TYPOGRAPHY
		1.3. BUTTONS

	2. LAYOUT MODULE.
		2.1 SPACING AND ALIGNMENT
		2.2 HEADER
		2.3 CAROUSEL
		2.4 SIDEBAR
		2.5 FOOTER
		2.6 LOADER
		2.7 SCROLLING TOP
		2.8 TESTIMONIAL
		2.9 CUSTOMERS	
		2.10 IMAGE GALLERY
		2.11 VIDEO POPUP.

	3. PAGES MODULE.
		3.1 COMMON STYLES
		3.2 ABOUT PAGES
		3.3 SERVICES PAGES
		3.4 PROJECTS PAGE
		3.5 BLOGS PAGES
		3.6 CONTACT PAGES
		
		
	4. MEDIA QUERIES MODULE.
		4.1 TYPOGRAPHY BREAKPOINTS VIEW
		4.2 THEME BREAKPOINTS VIEW
		
*/


/* ==========================================================================
   	1. RESET MODULE.
   ========================================================================== */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1.6; overflow-x: hidden; font-family: Microsoft YaHei,Arial; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

    blockquote:before, blockquote:after,
    q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }
a { color: #666; }
    a:link { text-decoration: none; }

    a:visited { text-decoration: none; }

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

    a:active { text-decoration: none; }

/* ================== 
	1.2. TYPOGRAPHY. 
   ================== */
h1 { font-size: 24px; font-family: Microsoft YaHei,Arial; font-weight: 300; }

h2 { font-size: 22px; font-family: Microsoft YaHei,Arial; font-weight: 300; }

h3 { font-size: 20px; font-family: Microsoft YaHei,Arial; font-weight: 300; }

h4 { font-size: 18px; font-family: Microsoft YaHei,Arial; font-weight: 300; }

h5 { font-size: 16px; font-family: Microsoft YaHei,Arial; font-weight: 300; }

h6 { font-size: 14px; font-family: Microsoft YaHei,Arial; font-weight: 300; }

p { font-size: 15px; font-family: Microsoft YaHei,Arial; color: #666; font-weight: 300; }
img { max-width: 100%; }
/* ================== 
	1.3. BUTTOMS. 
   ================== */
.btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; font-family: Microsoft YaHei,Arial; }

.btn-custom { color: #fff; background-color: #d51a31; border-color: #d51a31; transition: 0.3s; padding: 6px 25px; }

    .btn-custom:hover { color: #fff; background-color: #333D4D; border-color: #333D4D; }

    .btn-custom:focus, .btn-custom.focus { box-shadow: 0 0 0 0.2rem rgba(51, 61, 77, 0.5); }

    .btn-custom.disabled, .btn-custom:disabled { color: #fff; background-color: #d51a31; border-color: #d51a31; }

    .btn-custom:not(:disabled):not(.disabled):active, .btn-custom:not(:disabled):not(.disabled).active,
    .show > .btn-custom.dropdown-toggle { color: #fff; background-color: #333D4D; border-color: #333D4D; }

        .btn-custom:not(:disabled):not(.disabled):active:focus, .btn-custom:not(:disabled):not(.disabled).active:focus,
        .show > .btn-custom.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(51, 61, 77, 0.5); }

.btn-transparent { color: #FFF; background-color: transparent; border-color: #FFF; padding: 6px 25px; }

    .btn-transparent:hover { color: #fff; background-color: #333D4D; border-color: #333D4D; }

    .btn-transparent:focus, .btn-transparent.focus { box-shadow: 0 0 0 0.2rem rgba(51, 61, 77, 0.5); }

    .btn-transparent.disabled, .btn-transparent:disabled { color: #fff; background-color: #007bff; border-color: #007bff; }

    .btn-transparent:not(:disabled):not(.disabled):active, .btn-transparent:not(:disabled):not(.disabled).active,
    .show > .btn-transparent.dropdown-toggle { color: #fff; background-color: #333D4D; border-color: #333D4D; }

        .btn-transparent:not(:disabled):not(.disabled):active:focus, .btn-transparent:not(:disabled):not(.disabled).active:focus,
        .show > .btn-transparent.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(51, 61, 77, 0.5); }

/* ==========================================================================
   	2. LAYOUT MODULE.
   ========================================================================== */

/* ================== 
	2.1 SPACING AND ALIGNMENT. 
   ================== */
.content .container { margin: 60px auto 60px auto; }


.color-background { padding: 5px 0px 5px 0px; background: #f9f9f9; }

@media (max-width: 1200px) {
    .container { max-width: 100%; }
}

/* ================== 
	2.2 HEADER. 
   ================== */
.main-header { width: 100%; background: #FFF; }

    .main-header .container { margin-top: 0px; margin-bottom: 0px; }

.top-header { transition: 0.5s; background: #d51a31; padding: 8px 0px; transition: 0.3s; position: relative; z-index: 1; }
    .top-header::after { content: ""; position: absolute; height: 100%; width: 50%; top: 0; right: 0; background: #000; z-index: 0; transform: skewX(-30deg) translateX(300px); border-left: 6px solid #fff; }

    .top-header p { color: #fff; transition: 0.3s; font-size: 12px; line-height: 1.4; font-weight: 700; }

.leftside { float: left; color: #FFF; position: relative; z-index: 1; }

    .leftside p { color: #fff; }

.rightside { float: right; position: relative; z-index: 1; }
.rightside p a{color:#fff;}
.social-items { display: inline-block; margin-right: 10px; }

.rightside .social-items .fa { font-size: 16px; transition: 0.3s; color: #fff; }

    .rightside .social-items .fa:hover { color: #2D527C; }

.location-top { display: inline-block; margin-right: 10px; }


/* ================== 
	2.4 SIDEBAR. 
   ================== */


/* ================== 
	2.5 FOOTER. 
   ================== */
.main-footer .container { margin-bottom: 0px; background: #000; }

.main-footer { padding: 10px 0px 70px 0px; color: #FFF; background-image: url("../img/images/img99.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }

.footer-logo { width: 120px; margin-bottom: 10px; }

    .footer-logo img { width: 100%; }

.social-footer { margin-top: 30px; }

    .social-footer h6 { color: #d9d9d9; }

.main-footer .social-items { display: inline-block; margin: 10px 5px 0px 0px; }

    .main-footer .social-items .fa { color: #333D4D; font-size: 18px; transition: 0.3s; }

        .main-footer .social-items .fa:hover { color: #fff; }

.main-footer .icon-fa { display: inline-block; font-size: 25px; line-height: 32px; background: #FFF; color: #FFF; width: 40px; height: 40px; text-align: center; vertical-align: bottom; border-radius: 5px; float: left; border: solid 1px #595959; transition: 0.3s; }

    .main-footer .icon-fa:hover .fa { color: #FFF; }

    .main-footer .icon-fa:hover { background: #333D4D; border: solid 1px #333D4D; }

.footer-center h5 { color: #d51a31; font-size: 17px; }

.footer-right h5 { color: #d51a31; font-size: 17px; }

.about-footer p { color: #fff; margin-top: 20px; }

.footer-center, .footer-right { padding-top: 50px; }

.categories-list { margin: 0px 15px 0px 0px; display: inline-block; font-size: 14px; font-family: Microsoft YaHei,Arial; color:; }
.categories-list-2 { margin-top: 10px; display: inline-block; font-size: 14px; font-family: Microsoft YaHei,Arial; }

.main-footer a:link { text-decoration: none; color: #FFF; }

.main-footer a:visited { text-decoration: none; color: #FFF; }

.main-footer a:hover { text-decoration: none; color: #FFF; }

.main-footer a:active { text-decoration: none; color: #FFF; }

.subscribe-footer h6 { margin-bottom: 10px; }

.subscribe-footer p { color: #FFF; }

.newsletter-box { margin: 15px 0px 15px 0px; }

    .newsletter-box form { display: flex; align-items: center; }

    .newsletter-box .input { width: 75%; height: 38px; background: #FDFCFB; border: none; font-family: inherit; color: #737373; letter-spacing: 1px; text-indent: 5%; font-size: 13px; font-family: Microsoft YaHei,Arial; }

    .newsletter-box .button { width: 25%; height: 38px; background-color: #d51a31; border: none; border-radius: 0 5px 5px 0; font-family: inherit; font-weight: 500; color: inherit; letter-spacing: 1px; cursor: pointer; color: #FFF; font-size: 13px; font-family: Microsoft YaHei,Arial; }

p.cursive { font-style: italic; color: #FFF; }

.left-footer { float: left; }

.right-footer { float: right; color: #595959; }

.left-footer p { color: #FFF; font-size: 13px; }

.right-footer p { color: #FFF; font-size: 13px; transition: 0.3s; }

hr.line-footer { border-top: 1px solid #d51a31; }


/* ===================== 
	2.7. SCROLLING TOP. 
   ==================== */
@media only screen and (min-width: 1024px) {
    main p { font-size: 20px; font-size: 1.25rem; }
}

.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(255, 64, 76, 1) url(../images/top.png) no-repeat center/60%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; border-radius: 5px; background-color: #d51a31; /* padding: 10px; */ }
    .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; }
    .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; }
    .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; }
.no-touch .cd-top:hover { background-color: #d51a31; opacity: 1; }

@media only screen and (min-width: 768px) {
    .cd-top { right: 20px; bottom: 20px; }
}

@media only screen and (min-width: 1024px) {
    .cd-top { height: 50px; wi: 50px; width: 50px; ght: 30px; bottom: 30px; }
}

/* ======================== 
	2.8 TESTIMONIAL.
   ======================== */
.main-gallery { margin-bottom: 15px; }

.gallery-cell { width: 100%; }

.testimonial-section { min-height: 200px; }

.avatar { width: 100px; height: 100px; margin: auto; }

    .avatar img { width: 100%; border-radius: 50%; }

.testimonial-quote { margin: 15px 100px 5px 100px; }

    .testimonial-quote p { text-align: center; font-size: 15px; color: #999999; font-weight: normal; }

.autor h6 { text-align: center; margin-bottom: 20px; }

.testimonial { text-align: center; max-width: 850px; margin: 10px auto 10px auto; }


.flickity-page-dots .dot.is-selected { background: #333D4D; }

.testimonials { padding: 20px 15px 20px 15px; margin-right: auto; margin-left: auto; clear: both; }

.testimonials-services { margin: -50px auto 20px auto; }

.flickity-enabled { position: relative; }
    .flickity-enabled:focus { outline: 0; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }
.flickity-enabled.is-draggable { -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 { position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 0%; background: #fff; background: hsla(0,0%,100%,.75); cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
    .flickity-prev-next-button:hover { background: #fff; }
    .flickity-prev-next-button:focus { outline: 0; box-shadow: 0 0 0 5px #09F; }
    .flickity-prev-next-button:active { filter: alpha(opacity=60); opacity: .6; }
    .flickity-prev-next-button.previous { left: 10px; }
    .flickity-prev-next-button.next { right: 10px; }
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; }
.flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; }
.flickity-prev-next-button:disabled { filter: alpha(opacity=30); opacity: .3; cursor: auto; }
.flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }
.flickity-prev-next-button .arrow { fill: #333; }
.flickity-prev-next-button.no-svg { color: #333; font-size: 26px; }
.flickity-page-dots { position: absolute; width: 100%; bottom: -5px; 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: 30px; height: 3px; margin: 0 8px; background: #999999; border-radius: 0%; filter: alpha(opacity=25); opacity: .25; cursor: pointer; }
    .flickity-page-dots .dot.is-selected { filter: alpha(opacity=100); opacity: 1; }


/* ======================== 
	2.9 CUSTOMERS.
   ======================== */

.customers-slider { padding: 0px; }

.slick-dots { text-align: center; padding: 0; }
    .slick-dots li { display: inline-block; margin-left: 4px; margin-right: 4px; display: none; }
        .slick-dots li.slick-active button { background-color: #999; }
        .slick-dots li button { font: 0/0 a; text-shadow: none; color: transparent; background-color: #fff; border: solid 1px #999; width: 15px; height: 15px; border-radius: 50%; }
        .slick-dots li :hover { background-color: #999; }

.responsive { clear: both; }

    .responsive div img { margin-left: auto; margin-right: auto; }

@media screen and (max-width: 800px) {
    .next, .prev { display: none !important; }
}

.span-item img { width: 100%; }

/* ======================== 
	2.10 IMAGE GALLERY.
   ======================== */

/* ========== #IMAGE GALLERY STYLE 1 ========== */
.magnific-img img { width: 100%; height: auto; margin-bottom: 5px; border-radius: 0px; }

.magnific-img { display: inline-block; width: 32.3%; }

a.image-popup-vertical-fit { cursor: -webkit-zoom-in; }
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; /* ideally, transition speed should match zoom duration */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }

.mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; }
.mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.98; }

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; }
.mfp-arrow-left:before { border-right: none !important; }
.mfp-arrow-right:before { border-left: none !important; }
button.mfp-arrow, .mfp-counter { opacity: 0 !important; transition: opacity 200ms ease-in, opacity 2000ms ease-out; }
.mfp-container:hover button.mfp-arrow, .mfp-container:hover .mfp-counter { opacity: 1 !important; }

/* Magnific Popup CSS */
.mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; }

.mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }

.mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; }

    .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }

.mfp-align-top .mfp-container:before { display: none; }

.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }

.mfp-ajax-cur { cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; }

.mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }

.mfp-auto-cursor .mfp-content { cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.mfp-loading.mfp-figure { display: none; }

.mfp-hide { display: none !important; }

.mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }
    .mfp-preloader a { color: #CCC; }
        .mfp-preloader a:hover { color: #FFF; }

.mfp-s-ready .mfp-preloader { display: none; }

.mfp-s-error .mfp-content { display: none; }

button.mfp-close,
button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; }

button::-moz-focus-inner { padding: 0; border: 0; }

.mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Microsoft YaHei, Baskerville, monospace; }
    .mfp-close:hover,
    .mfp-close:focus { opacity: 1; }
    .mfp-close:active { top: 1px; }

.mfp-close-btn-in .mfp-close { color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; }

.mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; }

.mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; }
    .mfp-arrow:active { margin-top: -54px; }
    .mfp-arrow:hover,
    .mfp-arrow:focus { opacity: 1; }
    .mfp-arrow:before,
    .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; }
    .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
    .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }

.mfp-arrow-left { left: 0; }
    .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; }
    .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; }

.mfp-arrow-right { right: 0; }
    .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; }
    .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; }
    .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }
    .mfp-iframe-holder .mfp-close { top: -40px; }

.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
    .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; }

/* Main image in popup */
img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure { line-height: 0; }
    .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; }
    .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; }
    .mfp-figure figure { margin: 0; }

.mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; }

.mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; }

.mfp-image-holder .mfp-content { max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    /**
       * Remove all paddings around the image on small screen
       */
    .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; }
    .mfp-img-mobile img.mfp-img { padding: 0; }
    .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; }
    .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; }
    .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; }
        .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }
    .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; }
    .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; }
}

@media all and (max-width: 900px) {
    .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); }
    .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; }
    .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; }
    .mfp-container { padding-left: 6px; padding-right: 6px; }
}

.magnific-img .image-popup-vertical-fit img a:link { text-decoration: none; border: solid 2px #000; }

.magnific-img .image-popup-vertical-fit img a:visited { text-decoration: none; border: solid 2px #000; }

.magnific-img .image-popup-vertical-fit img a:hover { text-decoration: none; border: solid 2px #000; }

.magnific-img .image-popup-vertical-fit img a:active { text-decoration: none; color: #000; border: solid 2px #000; }

/* ======================== 
	2.11 VIDEO POPUP.
   ======================== */
/* ========== #IMAGE LIGHTBOX ========== */
.images-group { display: flex; flex-wrap: wrap; }
    .images-group .image { width: 100%; cursor: pointer; }

.image img { width: 100%; }

.lightbox { z-index: 1; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; transition: 0.2s; top: 0; right: 0; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; }
    .lightbox .mobile { width: 100%; height: auto; }
    .lightbox span { color: white; cursor: pointer; position: absolute; top: 30px; right: 30px; z-index: 1; }
    .lightbox p { color: white; font-size: 20px; text-align: center; word-wrap: break-word; position: relative; margin: 0; }

    .lightbox.active { visibility: visible; opacity: 1; }

.placeholder { width: 100%; height: 1500px; }

/* ========== #YOUTUBE POPUP ========== */

.popup-youtube .video-image { position: relative; display: inline-block; }

    .popup-youtube .video-image img { width: 100%; }

    .popup-youtube .video-image:before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 10; background: transparent url(../img/master/play-btn.png) center center no-repeat; }

    .popup-youtube .video-image img a:link { text-decoration: none; color: #FFF; }

    .popup-youtube .video-image img a:visited { text-decoration: none; color: #FFF; }

    .popup-youtube .video-image img a:hover { text-decoration: none; color: #FFF; }

    .popup-youtube .video-image img a:active { text-decoration: none; color: #FFF; }

/* ========== #MODAL POPUP STYLE 1 ========== */

.modal-box { text-align: center; }

    .modal-box p { margin: 15px 0px 15px 0px; }

.modal-sm .modal-content { background: #FFF; border: 1px solid #ddd; border: 1px solid rgba(0, 0, 0, .2); -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); padding: 10px 20px 10px 20px; }

.close { color: #000; }

@media (min-width: 992px) {
    .modal-md { width: 600px; }
}

/* ==========================================================================
   	3. PAGES MODULE.
   ========================================================================== */

/* ================== 
	3.1. THEME PAGES COMMON STYLES. 
   ================== */
.pages-header { background-image: url("../img/images/img81.jpg"); height: 400px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }

.section-heading { width: 100%; position: absolute; bottom: 20px; }

    .section-heading .container { margin: 0px auto 0px auto; }

.span-title h1 { color: #FFF; }

.span-title p { color: #FFF; }

.section-title h3 { text-align: center; }

.section-title { margin-bottom: 30px; padding: 0px 120px 0px 120px; }

    .section-title p { text-align: center; color: #8C8C8C; margin-top: 10px; }

hr.center { width: 80px; border-top: 2px solid #d51a31; margin: 15px auto 15px auto; }

/* ================== 
	3.2. ABOUT PAGE. 
   ================== */

/* ========== #ABOUT ONE ========== */
.about-pic img { width: 100%; }

.about-content h6 { line-height: 2; margin: 2px 0px 5px 0px; color: #d51a31; }

.about-content p { line-height: 1.7; margin-bottom: 15px; }

.thumbnail-employee { display: block; line-height: 1.42857143; background-color: #fff; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; padding: 40px 0px 40px 0px; }

.employee-pic { width: 180px; margin: auto; }

.thumbnail-employee img { width: 100%; border-radius: 50%; }

.thumbnail-employee > img,
.thumbnail-employee a > img { margin-right: auto; margin-left: auto; width: 100%; }

a.thumbnail-employee:hover,
a.thumbnail-employee:focus,
a.thumbnail-employee.active { border-color: #337ab7; }

.thumbnail-employee .caption { padding: 9px; text-align: center; color: #333; }

    .thumbnail-employee .caption h5 { font-size: 17px; }

.employee-social { margin-top: 15px; }

.inner-employee-social { display: inline-block; margin-right: 5px; font-size: 20px; }

    .inner-employee-social a:link { text-decoration: none; color: #333D4D; }

    .inner-employee-social a:visited { text-decoration: none; color: #333D4D; }

    .inner-employee-social a:hover { text-decoration: none; color: #d51a31; }

    .inner-employee-social a:active { text-decoration: none; color: #333D4D; }

.info-box-pic img { width: 100%; }

.info-box-pic-2 img { width: 100%; }

.info-box-content { padding: 20px 0px 20px 0px; }

    .info-box-content p { line-height: 1.8; margin: 5px 0px 15px; }

    .info-box-content h6 { font-style: italic; font-stretch: expanded; color: #d51a31; }

/* ========== #ABOUT TWO ========== */
.about-info-2 p { line-height: 1.8; }

.about-info-2 h6 { color: #d51a31; }

.signature { width: 180px; margin-top: 20px; }

    .signature img { width: 100%; }

.inner-thumbnail { display: block; line-height: 1.42857143; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; }
    .inner-thumbnail > img,
    .inner-thumbnail a > img { margin-right: auto; margin-left: auto; width: 100%; }
a.inner-thumbnail:hover,
a.inner-thumbnail:focus,
a.inner-thumbnail.active { border-color: #337ab7; }
.inner-thumbnail .caption { padding: 9px; color: #333; }

    .inner-thumbnail .caption h5 { line-height: 2; font-size: 18px; }

    .inner-thumbnail .caption p { line-height: 1.7; color: #999999; }

.inner-panels { height: 280px; background: #333D4D; }

.inner-panels-center { height: 280px; background: #e6e6e6; }

.panel-icon { width: 50px; margin: 0px auto 15px auto; }

    .panel-icon img { width: 100%; }

.inner-panels, .inner-panels-center { padding: 50px; text-align: center; }

    .inner-panels h5 { color: #FFF; text-align: center; }

    .inner-panels p { color: #FFF; text-align: center; }

.panel-icon img { width: 100%; }

.service-grid { background: #FFF; padding: 60px; text-align: center; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; }

    .service-grid h6 { color: #333D4D; transition: 0.6s; }

    .service-grid p { color: #999; }

.last-grid { border-right: solid 1px transparent; }

.bottom-grid { border-bottom: solid 1px transparent; }

.service-grid-image { width: 50px; margin: auto; margin-bottom: 10px; }

    .service-grid-image img { width: 100%; }

.service-grid:hover h6 { color: #d51a31; font-weight: normal; }

/* ========== #ABOUT THREE ========== */
.about-us-info-3 h6 { line-height: 2; color: #d51a31; }

.about-us-info-3 p { line-height: 1.8; margin-bottom: 15px; }

/* ================== 
	3.3. SERVICES. 
   ================== */
/* ========== #SERVICES ONE ========== */
.service-panel { height: 400px; box-shadow: 0 0 10px rgba(204,204,204,0.6); -moz-box-shadow: 0 0 10px rgba(204,204,204,0.6); -webkit-box-shadow: 0 0 10px rgba(204,204,204,0.6); -o-box-shadow: 0 0 10px rgba(204,204,204,0.6); transition: 0.3s; padding: 80px 40px 80px 40px; background: #FFF; }

    .service-panel:hover { height: 430px; background: #d51a31; margin-top: -15px; }

.service-info { margin-bottom: 40px; }

.service-panel p { line-height: 1.4; font-size: 14px; }

.service-icon-1, .service-icon-2, .service-icon-3, .service-icon-4 { width: 50px; height: 50px; background-position: center; background-repeat: no-repeat; background-size: cover; }

.service-icon-1 { background-image: url("../img/master/building-2.png"); }

.service-panel:hover .service-icon-1 { background-image: url("../img/master/building.png"); }

.service-icon-2 { background-image: url("../img/master/drawing-2.png"); }

.service-panel:hover .service-icon-2 { background-image: url("../img/master/drawing.png"); }

.service-icon-3 { background-image: url("../img/master/paintbrush-2.png"); }

.service-panel:hover .service-icon-3 { background-image: url("../img/master/paintbrush-3.png"); }

.service-icon-4 { background-image: url("../img/master/safety-3.png"); }

.service-panel:hover .service-icon-4 { background-image: url("../img/master/safety-2.png"); }

.service-panel h5 { line-height: 2.5; font-size: 18px; }

.service-panel p { line-height: 1.8; }

.service-panel:hover h5 { color: #FFF; }

.service-panel:hover p { color: #FFF; }

.learn-more { margin-top: 20px; }

    .learn-more p { color: #d51a31; }

/* ========== #SERVICES TWO ========== */
.box-service { padding: 50px 20px 50px 20px; box-shadow: 0 0 10px rgba(204,204,204,0.6); -moz-box-shadow: 0 0 10px rgba(204,204,204,0.6); -webkit-box-shadow: 0 0 10px rgba(204,204,204,0.6); -o-box-shadow: 0 0 10px rgba(204,204,204,0.6); transition: 0.3s; margin: 15px 0px 15px 0px; background: #FFF; }

.inner-label { text-align: center; line-height: 1.8; }

    .inner-label h5 { font-size: 18px; margin-top: 10px; }

.rounded-icon { width: 80px; height: 80px; margin: auto; border-radius: 50%; border: solid 2px #d51a31; transition: 0.3s; position: relative; }

.inner-icon-1, .inner-icon-2, .inner-icon-3, .inner-icon-4, .inner-icon-5, .inner-icon-6 { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; }

.box-service:hover .rounded-icon { background: #d51a31; }

.inner-icon-1 { background-image: url("../img/master/building-2.png"); transition: 0.3s; }


.box-service:hover .inner-icon-1 { background-image: url("../img/master/building.png"); }

.inner-icon-2 { background-image: url("../img/master/paintbrush-2.png"); transition: 0.3s; }

.box-service:hover .inner-icon-2 { background-image: url("../img/master/paintbrush-3.png"); }

.inner-icon-3 { background-image: url("../img/master/safety-3.png"); transition: 0.3s; }

.box-service:hover .inner-icon-3 { background-image: url("../img/master/safety-2.png"); }

.inner-icon-5 { background-image: url("../img/master/crane-2.png"); transition: 0.3s; }

.box-service:hover .inner-icon-5 { background-image: url("../img/master/crane.png"); }

.inner-icon-4 { background-image: url("../img/master/leaf-2.png"); transition: 0.3s; }

.box-service:hover .inner-icon-4 { background-image: url("../img/master/leaf.png"); }

.inner-icon-6 { background-image: url("../img/master/hammer-2.png"); transition: 0.3s; }

.box-service:hover .inner-icon-6 { background-image: url("../img/master/hammer.png"); }

.about-parallax { background-image: url("../img/images/img40.jpg"); height: 410px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 60px 0px 60px 0px; }

    .about-parallax .container { margin: 0px auto 0px auto; }

    .about-parallax .inner-counter { background: transparent; border: solid 1px #FFF; padding: 20px 10px 60px 10px; }

    .about-parallax .counter-icon { width: 40px; margin: auto; }

        .about-parallax .counter-icon img { width: 100%; }

    .about-parallax .counter { text-align: center; font-size: 45px; color: #FFF; }

    .about-parallax .counter-statistics h5 { text-align: center; font-size: 18px; color: #F2AB26; }

    .about-parallax .counter-statistics p { color: #FFF; text-align: center; margin-top: 10px; }

/* ========== #SERVICES THREE ========== */
.span-services { display: block; line-height: 1.42857143; background-color: #fff; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; margin: 15px 0px 15px 0px; }
    .span-services > img,
    .span-services a > img { margin-right: auto; margin-left: auto; width: 100%; }
a.span-services:hover,
a.span-services:focus,
a.span-services.active { border-color: #337ab7; }
.span-services .caption { padding: 15px 0px 15px 0px; color: #333; }

    .span-services .caption h5 { font-size: 18px; }

    .span-services .caption p { line-height: 1.8; color: #999999; }

/* ================== 
	3.4. PROJECTS. 
   ================== */
.solution-image img { width: 100%; }

.solution-content h3 { text-align: left; margin: 30px 0px 10px 0px; }

.solution-content p { color: #666666; line-height: 1.7; margin-bottom: 20px; }

hr.short { width: 70px; border-top: 3px solid #d51a31; margin: 5px 0px 15px 0px; }

hr.blog-solutions { width: 90px; border-top: 3px solid #d51a31; margin: 5px 0px 15px 0px; }

.categories { margin-bottom: 30px; }

    .categories .list-group .list-group-item { border-radius: 0px; margin: 4px 0px 4px 0px; border: none; background: #f0f0f0; font-family: Microsoft YaHei,Arial; padding: 10px 25px; transition: 0.3s; border-left: solid 2px #d51a31; color: #808080; }

        .categories .list-group .list-group-item:hover { background: #d51a31; color: #FFF; }

        .categories .list-group .list-group-item.active { background: #d51a31; color: #FFF; }

            .categories .list-group .list-group-item.active:hover { background: #d51a31; color: #FFF; border-left: solid 2px #d51a31; }

blockquote { display: block; background: #fff; padding: 20px 20px 20px 45px; margin: 20px 10px 20px 20px; position: relative; font-size: 16px; line-height: 1.6; color: #333; text-align: justify; border-left: 5px solid #d51a31; border-right: 2px solid #d51a31; font-style: italic; font-family: Microsoft YaHei,Arial; }

    blockquote::before { content: "\201C"; /*Unicode for Left Double Quote*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; position: absolute; left: 10px; top: 5px; }

    blockquote::after { content: ""; }

    blockquote a { text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #7ad02f; }

        blockquote a:hover { color: #666; }

    blockquote em { font-style: italic; }

/* ================== 
	3.5. BLOG. 
   ================== */
/* ========== #BLOG CLASSIC ========== */
.span-posts { margin-bottom: 40px; }

    .span-posts p { margin: 10px 0px 20px 0px; }

hr.post { width: 100%; border-top: 1px solid #ddd; margin: 0px auto 5px auto; clear: both; }

.post-picture img { width: 100%; }

.span-details { margin: 20px 0px 10px 0px; height: 30px; }

.post-date { float: left; }

    .post-date p { color: #d51a31; }

.post-details { float: right; }

.post-details-2 { float: right; }

.inner-details { display: inline-block; margin-right: 10px; }

.post-title { clear: both; margin: 20px 0px 10px 0px; }

.list-group-flush .list-group-item { font-family: Microsoft YaHei,Arial; font-size: 14px; color: #808080; padding: 12px 0px 12px 0px; transition: 0.3s; }

    .list-group-flush .list-group-item:hover { color: #d51a31; }

.categorie h6 { margin-bottom: 20px; }

.categorie a:link { text-decoration: none; color: #808080; }

.categorie a:visited { text-decoration: none; color: #808080; }

.categorie a:hover { text-decoration: none; color: #591782; }

.categorie a:active { text-decoration: none; color: #808080; }

.badge .fa:hover { color: #591782; }

.recent-news { margin-top: 30px; }

    .recent-news h5 { font-size: 18px; margin-bottom: 20px; }

.categorie h5 { font-size: 18px; margin-bottom: 20px; }

.media { margin: 15px 0px 15px 0px; }

.media-body h5 { font-size: 15px; color: #595959; line-height: 1.5; }

h6.media-heading { font-size: 16px; line-height: 1.3; }

hr.recent-news { width: 100%; border-top: 1px solid #f2f2f2; margin: 15px auto 10px auto; clear: both; }

.pagination { display: inline-block; }

    .pagination a { color: black; float: left; padding: 10px 18px; text-decoration: none; border: 1px solid #DDD; margin: 0px 5px 0px 5px; font-family: Microsoft YaHei, sans-serif; color: #d51a31; transition: 0.3s; }

        .pagination a.active { background-color: #d51a31; color: white; border: 1px solid #d51a31; }

        .pagination a:hover:not(.active) { background-color: #d51a31; color: #FFF; border: solid 1px #d51a31; }

        .pagination a:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

        .pagination a:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

/* ========== #BLOG GRID ========== */
.blog-post { display: block; line-height: 1.42857143; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; }
    .blog-post > img,
    .blog-post a > img { margin-right: auto; margin-left: auto; width: 100%; }
a.blog-post:hover,
a.blog-post:focus,
a.blog-post.active { border-color: #337ab7; }
.blog-post .caption { padding: 10px 0px 10px 0px; }

    .blog-post .caption h5 { color: #333; margin-bottom: 10px; }

    .blog-post .caption h6 { font-size: 15px; line-height: 1.8; margin-bottom: 10px; }

    .blog-post .caption p { margin-bottom: 15px; }

/* ========== #BLOG SINGLE ========== */
.post-image img { width: 100%; }

.blog-content p { line-height: 1.6; margin: 10px 0px 20px 0px; }

blockquote { display: block; background: #fff; padding: 20px 20px 20px 45px; margin: 20px 10px 20px 20px; position: relative; font-size: 15px; line-height: 1.2; color: #666; text-align: justify; border-left: 5px solid #d51a31; border-right: 2px solid #d51a31; font-style: italic; }

    blockquote::before { content: "\201C"; /*Unicode for Left Double Quote*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; position: absolute; left: 10px; top: 5px; }

    blockquote::after { content: ""; }

    blockquote a { text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #7ad02f; }

        blockquote a:hover { color: #666; }

    blockquote em { font-style: italic; }

.comments { margin-top: 30px; }

/* ================== 
	3.6. CONTACT US. 
   ================== */
.alert-success { color: #FFF; background-color: #d51a31; border-color: #d51a31; font-family: Microsoft YaHei,Arial; font-size: 13px; }

.alert { padding: 10px 35px 10px 15px; margin-bottom: 15px; border: 1px solid transparent; border-radius: 4px; }

/* ========== #CONTACT ONE ========== */
.section-title h3 { text-align: center; }

.contact-box { padding: 30px 15px 30px 15px; box-shadow: 0 0 10px rgba(204,204,204,0.6); -moz-box-shadow: 0 0 10px rgba(204,204,204,0.6); -webkit-box-shadow: 0 0 10px rgba(204,204,204,0.6); -o-box-shadow: 0 0 10px rgba(204,204,204,0.6); }

.contact-icon { width: 50px; margin: auto; }


    .contact-icon img { width: 100%; }

.contact-box { text-align: center; }

    .contact-box p { line-height: 2; }

        .contact-box p.color { color: #d51a31; }

    .contact-box h5 { font-size: 18px; text-align: center; line-height: 3; }

hr.contact { width: 40px; border-top: 1px solid #d51a31; margin: 5px auto 15px auto; }

.no-margin { margin: 0px; }

.contact-right { padding: 0px; height: 547px; }

.contact-left { padding: 90px 80px 78px 80px; background: #FAFCFC; }

.customize { border: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; -o-transition: none; transition: none; border-radius: 0px; background: #fff1cc; height: 60px; padding: 6px 12px; font-size: 14px; border: solid 1px #fff1cc; font-family: Microsoft YaHei,Arial; color: #000; }

    .customize:focus { border-color: #e0ebeb; outline: 0; -webkit-box-shadow: none; box-shadow: none; }

    .customize::-moz-placeholder { color: #333; opacity: 1; }
    .customize:-ms-input-placeholder { color: #333; }
    .customize::-webkit-input-placeholder { color: #333; }

    .customize::-ms-expand { background-color: none; border: 0; }

.no-margin-bottom { margin-bottom: 0px; }

/* ========== #CONTACT TWO ========== */
.no-padding-bottom { margin-bottom: 0px; }

.map-container { position: relative; }

.inner-address { width: 500px; height: 400px; position: absolute; margin-top: -520px; padding: 50px; background: #FDC830; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #F37335, #FDC830); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }

    .inner-address h3 { color: #FFF; line-height: 2; }

    .inner-address p { line-height: 1.6; color: #FFF; }

    .inner-address h6 { color: #FFF; margin: 10px 0px 10px 0px; font-size: 16px; }

.controls p { text-align: center; }

/* ========== #CONTACT THREE ========== */
.inner-address-2 { margin-top: 20px; }

    .inner-address-2 p { line-height: 2.5; }

.span-contact h6 { color: #F2AB26; font-size: 16px; }

.span-contact h1 { line-height: 2; }

.inner-address-2 .fa { color: #F2AB26; }

/* ==========================================================================
   	5. MEDIA QUERIES MODULE.
   ========================================================================== */
/* ================================== 
	5.1. TYPOGRAPHY BREAKPOINTS VIEW. 
   ================================== */
@media (min-width:576px) {
    h1 { font-size: 24px; }

    h2 { font-size: 22px; }

    h3 { font-size: 20px; }

    h4 { font-size: 18px; }

    h5 { font-size: 16px; }

    h6 { font-size: 14px; }
}

@media (min-width:768px) {
    h1 { font-size: 26px; }

    h2 { font-size: 24px; line-height: 1.2; }

    h3 { font-size: 22px; }

    h4 { font-size: 20px; }

    h5 { font-size: 18px; }

    h6 { font-size: 16px; }
}

@media (min-width:992px) {
    h1 { font-size: 32px; }

    h2 { font-size: 28px; }

    h3 { font-size: 26px; }

    h4 { font-size: 24px; }

    h5 { font-size: 22px; }

    h6 { font-size: 18px; }
}

/* ================================== 
	5.1. TYPOGRAPHY BREAKPOINTS VIEW. 
   ================================== */
@media (max-width:1200px) {
    .service-panel { padding: 60px 20px 60px 20px; }

    .contact-left { padding: 50px; }
}

@media (max-width:1100px) {
    /* ========== #ABOUT ONE.  ========== */
    .info-box-content { padding: 0px; }
}

@media (max-width:992px) {

    /* ============================== 
	LAYOUT MODULE BREAKPOINTS. 
   ============================== */
    .carousel-caption h1 { font-size: 40px; line-height: 1.2; }

    .carousel-caption { top: 40%; }

        .carousel-caption h6 { font-size: 16px; }

    /* ============================= 
	PAGES MODULE BREAKPOINTS. 
   ============================= */
    /* ========== #THEME PAGES COMMON STYLES.  ========== */
    .pages-header { height: 250px; }

    .sidebar { margin-top: 30px; }

    .no-margin-top { margin: 0px 0px 30px 0px; }

    /* ========== #ABOUT ONE.  ========== */
    .thumbnail-employee { margin: 15px 0px 15px 0px; }

    .about-content { margin-top: 30px; }

    .inner-facts { width: 120px; margin-right: 10px; }

    .facts-icon { width: 40px; }

    .inner-facts p { font-size: 12px; line-height: 1; }

    .inner-facts .counter { line-height: 1.8; color: #333; font-size: 20px; }

    .facts-icon { width: 30px; }

    .info-box-pic { margin-bottom: 30px; }

    .info-box-pic-2 { margin-top: 30px; }

    /* ========== #ABOUT TWO.  ========== */
    .about-info-2 { margin-bottom: 30px; }

    .bottom-grid { border-bottom: solid 1px #ddd; }

    .service-grid { border-right: transparent; }

    /* ========== #ABOUT THREE.  ========== */
    .about-us-video { margin-top: 30px; }

    /* ========== #SERVICE ONE.  ========== */
    .service-panel { height: 100%; padding: 40px 30px 40px 30px; }

        .service-panel:hover { height: 100%; background: #d51a31; margin-top: 0px; }

    /* ========== #SERVICE TWO.  ========== */
    .about-parallax { height: 100%; padding: 60px 0px 60px 0px; }

    .inner-counter { margin: 15px 0px 15px 0px; }

    /* ========== #CONTACT ONE ========== */
    .contact-box { margin: 15px 0px 15px 0px; }

    /* ========== #CONTACT THREE ========== */
    .span-contact { margin-bottom: 40px; }
}

@media (max-width:768px) {
    .top-header { display: none; }

    .container { max-width: 768px; }

    .carousel-caption h1 { font-size: 34px; }

    .carousel-caption { top: 42%; }


    .main-footer { padding: 10px 0px 40px 0px; }

    .bottom-footer { text-align: center; }

    .left-footer { float: none; }

    .right-footer { float: none; color: #595959; }

    .footer-logo { width: 120px; margin-bottom: 20px; }

    /* ============================== 
	PAGES MODULE BREAKPOINTS.  
   ============================== */

    .section-title { padding: 0px 20px 0px 20px; }

        .section-title p { font-size: 13px; line-height: 1.7; margin-top: 5px; }

    hr.line-footer { margin: 30px 0px 20px 0px; }

    /* ========== #CONTACT US 1 ========== */
    .inner-address { width: 100%; height: 100%; background: #F2AB26; position: relative; margin-top: 0px; padding: 30px; }

    /* ========== #ABOUT TWO ========== */

    .bottom-box { margin-top: 20px; }

    /* ========== #GALLERY ========== */
    .magnific-img { width: 49%; }
}

@media (max-width:576px) {

    .btn { padding: 4px 12px; font-size: 14px; }

    .carousel-inner { height: 600px; }

    .carousel-caption { top: 40%; }

        .carousel-caption h1 { font-size: 30px; }

        .carousel-caption h6 { font-size: 14px; }

    .testimonial-quote { margin: 15px 20px 5px 20px; }

        .testimonial-quote p { font-size: 13px; line-height: 1.7; }

    /* ============================= 
	PAGES MODULE BREAKPOINTS. 
   ============================= */

    /* ========== #BLOGS.  ========== */
    .span-details { margin: 0px; height: 100%; }

    .post-date { float: none; }

    .post-details { float: none; margin-top: -30px; }

    .post-details-2 { float: none; margin-bottom: 20px; }

    .post-image { margin-bottom: 10px; }

    hr.posts { margin-top: -5px; }

    .inner-details { display: inline-block; margin-right: 4px; }
}

@media (max-width:450px) {

    .carousel-inner { height: auto; }
.content .container{margin-top:0;}
    .carousel-caption { top: 40%; }

        .carousel-caption h1 { font-size: 30px; }

        .carousel-caption h6 { font-size: 12px; }

    /* ============================= 
	PAGES MODULE BREAKPOINTS. 
   ============================= */

    /* ========== #BLOGS.  ========== */
    .inner-details P { font-size: 13px; }
}


#demo .carousel-indicators li { width: 18px; height: 18px; border-radius: 100%; border: 2px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.5); cursor: pointer; margin: 0 5px; }
#demo .carousel-indicators .active { border: 2px solid rgba(255,255,255,1); background: #d51a31; }
.main-navbar .container { margin-bottom: 0px; }
.main-navbar .navbar { padding: 0; }
.navbar-brand { flex: 0 0 200px; padding: 15px 0; }

#navbar1 { justify-content: flex-end; }
    #navbar1 .navbar-nav .nav-item { position: relative; }
     #navbar1 .navbar-nav .nav-item:last-child:before{content:"";position:  absolute;width:  80%;left: 20%;height:  1px;background: #d51a31;top: 25px;}
     #navbar1 .navbar-nav .nav-item:last-child:after{content:"";position:  absolute;width:  80%;left: 0%;height:  1px;background: #d51a31;bottom: 25px;}
        #navbar1 .navbar-nav .nav-item .nav-link { padding: 29px 15px; font-size: 13px; font-weight: 500; color: #222; transition: 0.3s all; }
        #navbar1 .navbar-nav .nav-item .nav-down { z-index: 2; position: absolute; width: 260px; top: 100%; z-index: 1; height: 0; }
            #navbar1 .navbar-nav .nav-item .nav-down li { background: #d51a31; opacity: 0; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: opacity .4s, -webkit-transform .5s; -moz-transition: opacity .4s, -moz-transform .5s; -ms-transition: opacity .4s, -ms-transform .5s; -o-transition: opacity .4s, -o-transform .5s; transition: opacity .4s, transform .5s; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(1) { transition-delay: 0ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(2) { transition-delay: 30ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(3) { transition-delay: 60ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(4) { transition-delay: 90ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(5) { transition-delay: 120ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(6) { transition-delay: 150ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(7) { transition-delay: 180ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(8) { transition-delay: 210ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(9) { transition-delay: 240ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(10) { transition-delay: 270ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(11) { transition-delay: 300ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(12) { transition-delay: 330ms; }
                #navbar1 .navbar-nav .nav-item .nav-down li:nth-child(13) { transition-delay: 360ms; }


                #navbar1 .navbar-nav .nav-item .nav-down li a { display: block; font-size: 13px; font-weight: 400; color: #fff; padding: 8px 10px; transition: 0.3s all; border-top: 1px solid rgba(0,0,0,0.15); position: relative; }
                    #navbar1 .navbar-nav .nav-item .nav-down li a:after { content: ""; width: 3px; position: absolute; top: 0; left: 0; height: 0; background: #fff; }

        #navbar1 .navbar-nav .nav-item a:hover { color: #d51a31; }
        #navbar1 .navbar-nav .nav-item:hover .nav-down { height: auto; }
            
            @media(min-width:768px)
            {
                #navbar1 .navbar-nav .nav-item:hover .nav-down li { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; }
                #navbar1 .navbar-nav .nav-item .nav-down li a:hover:after { height: 100%; }
                }
        


.service a { display: block; color: #fff; transition: all 0.1s; }
.service-icon { font-size: 42px; text-align: center; }
.service-inner { font-size: 15px; min-height: 50px; line-height: 1.5; }
    .service-inner p { margin: 0; }
.service-btn { display: flex; justify-content: space-between; align-items: center; }

.service-btn-left { color: #fff; font-size: 18px; font-weight: 400; transition: all 0.4s; }
    .service-btn-left i { margin-right: 8px; transition: opacity 0.4s; }
.service-btn-right i { font-size: 40px; position: relative; transition: all 0.4s; transform: translateX(-60px); opacity: 0; color: #fff; }
    .service-btn-right i:after { content: ""; position: absolute; right: 4px; top: 20px; width: 15px; height: 3px; background: #fff; transition: all 0.4s; }


.service:hover .service-btn-left { transform: translateX(-20px); }
    .service:hover .service-btn-left i { opacity: 0; }
.service:hover .service-btn-right i { transform: translateX(0); opacity: 1; }
    .service:hover .service-btn-right i:after { width: 60px; }

.section_title { text-align: center; overflow: hidden; padding-bottom: 30px; }
    .section_title .title_subtext span { display: inline-block; font-weight: 300; color: #aaa; }
.title h1 { position: relative; font-weight: 500; font-size: 36px; line-height: 48px; color: #222; display: inline-block; }

    .title h1::before { position: absolute; content: ""; height: calc(100% - 22px); top: 11px; width: 1000%; background: url(../images/title_pattern.jpg) repeat; right: calc(100% + 20px); opacity: 0.05; }
    .title h1:after { position: absolute; content: ""; height: calc(100% - 22px); top: 11px; width: 1000%; background: url(../images/title_pattern.jpg) repeat; left: calc(100% + 20px); opacity: 0.05; }
    .title h1 .title_word_2 { color: #d51a31; }



.workflow header { border-bottom: none; }
#main h2 { margin: 0px 0px 40px 0px; display: block; text-align: center; }
.workflow header p, .workflow p { /* text-align: center; */ margin-bottom: 70px; line-height: 20px; color: #fff; }
#main #flow-boxes h3, #main #flow-boxes p { text-align: left; color: #fff; }
.workflow a { color: #fff; border-bottom: 1px dotted #fff; padding-bottom: 1px; }
    .workflow a:hover { border-bottom-color: hsla(0, 0%, 100%, .4); }
.workflow code { font: 14px Menlo, Monaco, Consolas, Andale Mono, monospace; color: #fff; background: rgba(189, 150, 193, .2); padding: 3px 4px; border-radius: 5px; background-color: #d51a31; }
.workflow #flow-switcher { display: flex; flex-flow: wrap; justify-content: center; }

@media screen and (max-width:640px) {
    .workflow #flow-switcher { width: auto; height: 220px; margin: 0 0px; }
    #main { padding: 80px 15px 0; }
}

@media screen and (max-width:479px) {
    .workflow #flow-switcher { width: auto; height: 220px; margin: 0 -20px; }
}

.workflow #flow-switcher > li { flex: 0 0 128px; display: flex; align-items: center; height: 128px; margin: 0 12px; box-sizing: border-box; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, .3); justify-content: center; text-align: center; font-size: 16px; font-weight: 500; line-height: 20px; background-color: #000; color: #fff; cursor: pointer; -webkit-transform: scale(.85); transform: scale(.85); -webkit-transition: -webkit-transform .2s; transition: transform .2s; position: relative; }

@media screen and (max-width:640px) {
    .workflow #flow-switcher > li { border-radius: 0; width: 20%; height: 220px; -webkit-transform: none!important; transform: none!important; padding: 0; margin: 0!important; }
        .workflow #flow-switcher > li span { position: absolute; border-radius: 0; width: 190px; height: 20px; line-height: 20px; left: 50%; top: 50%; margin: -10px 0 0 -95px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); text-align: left; font-size: 16px; text-shadow: -1px 0 4px rgba(0, 0, 0, .2); }
        .workflow #flow-switcher > li br, .workflow #flow-switcher > li br:after { content: " "; }
}

.workflow #flow-switcher > li.done { background-color: #000; }

@media screen and (max-width:640px) {
    .workflow #flow-switcher > li, .workflow #flow-switcher > li.done { background-image: linear-gradient(to left bottom, #d06086 20%, #d51a31 80%); }
        .workflow #flow-switcher > li.active { background-image: linear-gradient(to left bottom, #eb1e63 20%, #eb1e63 80%); }
}

.workflow #flow-switcher > li:hover { -webkit-transform: scale(.95); transform: scale(.95); }
.workflow #flow-switcher > li.active { -webkit-transform: scale(1); transform: scale(1); background-color: #d51a31; }

@media screen and (max-width:640px) {
    .workflow #flow-switcher > li.active:after { content: ""; position: absolute; height: 0; width: 0; left: 50%; margin-left: -12px; bottom: -24px; border: 12px solid transparent; border-top-color: #eb1e63; }
}

.workflow #flow-boxes { zoom: 1; position: relative; z-index: 1; overflow: hidden; }
    .workflow #flow-boxes:after, .workflow #flow-boxes:before { content: ""; display: table; }
    .workflow #flow-boxes:after { clear: both; }

@media screen and (max-width:640px) {
    .workflow #flow-boxes { top: 0; margin: 0 -20px; height: auto; }
}

.workflow #flow-boxes > div.active { z-index: 5; pointer-events: auto; }

@media screen and (max-width:1012px) {
    .workflow #flow-boxes > div { width: 748px; margin-left: -374px; }
}

@media screen and (max-width:640px) {
    .workflow #flow-boxes > div { position: static; width: auto; margin: 0; padding: 30px 20px 0px; height: auto; display: none; }
        .workflow #flow-boxes > div.active { display: block; }
}

@media screen and (max-width:479px) {
    .workflow #flow-boxes > div { position: static; width: auto; margin: 0; padding: 30px 2px 0px; height: auto; display: none; }
}

.workflow #flow-boxes .codebox { position: absolute; top: 0; bottom: 0; }

@media screen and (max-width:640px) {
    .workflow #flow-boxes .codebox { position: static; }
}

.workflow #flow-boxes .codebox, .workflow #flow-boxes .codebox-container, .workflow #flow-boxes .text { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); will-change: opacity; -webkit-transition: opacity .4s, -webkit-transform .7s; transition: opacity .4s, transform .7s; -webkit-transition-timing-function: cubic-bezier(.35, 0, .23, 1); transition-timing-function: cubic-bezier(.35, 0, .23, 1); pointer-events: none; }

@media screen and (max-width:640px) {
    .workflow #flow-boxes .codebox, .workflow #flow-boxes .codebox-container, .workflow #flow-boxes .text { display: none; -webkit-transition: none!important; transition: none!important; }
}

.workflow #flow-boxes .codebox-container.hiddenLeft, .workflow #flow-boxes .codebox.hiddenLeft, .workflow #flow-boxes .text.hiddenLeft { -webkit-transform: scale(.85) translateX(-200px); transform: scale(.85) translateX(-200px); }
.workflow #flow-boxes .codebox-container.hiddenRight, .workflow #flow-boxes .codebox.hiddenRight, .workflow #flow-boxes .text.hiddenRight { -webkit-transform: scale(1.1) translate(150px); transform: scale(1.1) translate(150px); }
.workflow #flow-boxes .codebox-container.active, .workflow #flow-boxes .codebox.active, .workflow #flow-boxes .text.active { opacity: 1; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; pointer-events: auto; }

@media screen and (max-width:640px) {
    .workflow #flow-boxes .codebox-container.active, .workflow #flow-boxes .codebox.active, .workflow #flow-boxes .text.active { display: block; }
    .workflow #flow-boxes .codebox-container.hiddenLeft, .workflow #flow-boxes .codebox.hiddenLeft, .workflow #flow-boxes .text.hiddenLeft { display: none; }
    .workflow #flow-boxes .codebox-container.hiddenRight, .workflow #flow-boxes .codebox.hiddenRight, .workflow #flow-boxes .text.hiddenRight { display: none; }
}

.workflow #flow-boxes .text.active { z-index: 5; }
.workflow #flow-boxes .codebox-container { -webkit-transition: opacity .2s, -webkit-transform .4s; transition: opacity .2s, transform .4s; }
    .workflow #flow-boxes .codebox-container.hiddenLeft { -webkit-transform: scale(.5); transform: scale(.5); }
.workflow #flow-boxes .codebox-container { width: 440px; background: #f5f7f9; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); text-shadow: none; overflow: hidden; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); height: 180px; z-index: 10; }

@media screen and (max-width:640px) {
    .workflow #flow-boxes .codebox-container { width: auto; margin: 0; height: auto; overflow: auto; }
        .workflow #flow-boxes .codebox-container:after { content: none; }
}

.workflow #flow-boxes .codebox-container:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 47px; background: #ebeff3; border-right: 1px solid #e3e7ea; border-radius: 5px 0 0 5px; }
.workflow #flow-boxes .codebox-container:after { content: ""; position: absolute; left: 400px; top: 0; bottom: 0; width: 40px; border-radius: 0 6px 6px 0; pointer-events: none; z-index: 11; }
.workflow #flow-boxes { margin-top: 30px; height: 320px; }
    .workflow #flow-boxes .text { position: absolute; left: 0; top: 0; width: 100%; }
    .workflow #flow-boxes .text-box { display: flex; justify-content: center; align-items: center; }
    .workflow #flow-boxes .text a.more { display: block; color: #d51a31; transition: leeter-spacing 0.4s; font-weight: 700; }
        .workflow #flow-boxes .text a.more i { margin-left: 4px; transition: 0.3s all; }
        .workflow #flow-boxes .text a.more:hover i { margin-left: 10px; }
    .workflow #flow-boxes .text .text-img { flex: 0 1 auto; }
        .workflow #flow-boxes .text .text-img img { max-height: 300px; }
    .workflow #flow-boxes .text .text-content { position: relative; padding-left: 80px; flex: 0 0 380px; }
        .workflow #flow-boxes .text .text-content:after { content: ""; position: absolute; left: 0; top: 60px; height: 1px; background: #d51a31; width: 70px; }
        .workflow #flow-boxes .text .text-content:before { content: ""; position: absolute; left: 70px; top: 58px; height: 5px; width: 5px; border-radius: 100%; background: #d51a31; }

        .workflow #flow-boxes .text .text-content h3 { font-size: 24px; margin-bottom: 15px; }
        .workflow #flow-boxes .text .text-content p { color: #666; font-size: 14px; color: #888; margin-bottom: 15px; }





/*****************************
    COUNTER UP SECTION
******************************/
#counter_up,
#clients {background: #eee;overflow: hidden;margin: 60px 0;}
    #counter_up .container { margin-top: 0; margin-bottom: 0; }
.left_side { position: relative; padding-left: 15px; padding-right: 15px; }

.title_icon { font-size: 140px; color: rgba(255,255,255,0.10); position: absolute; top: calc(50% - 20px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.sucess { color: #fff; font-size: 20px; line-height: 48px; font-weight: 700; padding: 40px 0; position: relative; }
.left_side p { color: #eeeeee; line-height: 26px; }
.counts { font-size: 60px; color: #fff; font-weight: 700; }
.single_count { text-align: center; position: relative; }
    .single_count::after { content: ""; position: absolute; width: 2px; height: 100%; background: #333; top: 0; left: calc(100% + 15px); -webkit-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); }
.right_side .col-md-3:nth-child(4) .single_count::after { display: none; }
.single_count p { color: #d51a31; font-weight: 600; line-height: 48px; font-family: Microsoft YaHei,sans-serif; }
/*.left_side::before { position: absolute; right: 100%; height: 100%; width: 5000%; background: #d51a31; content: ""; top: 0; }*/
.left_side:before { content: ""; position: absolute; height: 100%; right: 0; top: 0; width: 430px; background: url(../images/company-video.jpg) no-repeat center/cover; z-index: 0; }

.left_side h3 { position: absolute; top: 30px; right: 0px; color: #fff; font-weight: 700; font-size: 24px; padding: 5px 30px; z-index: 0; }
    .left_side h3:after { content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; transform: skewX(-7deg); background: #d51a31; z-index: -1; box-shadow: -4px 4px 8px rgba(0,0,0,0.7); }

@media (min-width: 1441px) {
    .left_side:before { width: 530px; }
}

@media (min-width: 1540px) {
    .left_side:before { width: 630px; }
}

@media (min-width: 1640px) {
    .left_side:before { width: 730px; }
}

@media (min-width: 1740px) {
    .left_side:before { width: 830px; }
}

@media (min-width: 1840px) {
    .left_side:before { width: 930px; }
}

@media (min-width: 1940px) {
    .left_side:before { width: 1030px; }
}

.left_side::after { position: absolute; content: ""; height: 120%; width: 54px; background: #eee; border-left: 8px solid #fff; top: 0px; right: -25px; -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); -o-transform: rotate(7deg); transform: rotate(7deg); }



.homenew-inner { flex: auto; position: relative; display: flex; padding: 60px 0px; }
    .homenew-inner .post-aria { flex: 0 0 calc(33.33% - 20px); margin-right: 20px; }
.post-aria { position: relative; }

.post-aria-2 .post-aria-time { color: #ff701a; }

.post-aria-2 .post-aria-list-social .icon::after { background: #d90e0f; }

.post-aria-figure { display: block; overflow: hidden; }

    .post-aria-figure img { width: 100%; transition: all .3s ease; }

.post-aria-footer { position: relative; text-align: center; max-width: 90%; padding: 20px 15px; background: #ffffff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.27); }

.post-aria-title { font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.2; margin-bottom: 0; }
    .post-aria-title a { color: #d51a31; }
.post-aria-time { font-size: 13px; font-weight: 400; letter-spacing: .02em; font-family: Microsoft YaHei, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Microsoft YaHei, sans-serif; color: #aaa; }

.post-aria-list-social { transition: all .3s ease; }


@media (min-width: 992px) {


    .post-aria-figure img { transform: scale(1.1); }

    .post-aria-footer { position: absolute; overflow: hidden; left: 50%; bottom: 0; width: 90%; transform: translateX(-50%); padding: 10px; transition: all .3s ease; }

    .post-aria-list-social { overflow: hidden; height: 0; margin: 0; font-size: 12px; color: #888; line-height: 1.3; }

        .post-aria-list-social li { transform: translate3d(0, -100%, 0); opacity: 0; visibility: hidden; transition: inherit; }

    .post-aria:hover .post-aria-figure img { transform: none; }

    .post-aria:hover .post-aria-list-social { height: 44px; }
}



.footer-classic { background: #222; font-size: 13px; }
    .footer-classic .container { margin-bottom: 0; }
.footer { display: flex; padding: 40px 0; color: #fff; font-weight: 300; }
.footer a{color:#fff;}
.footer-title h3 { font-size: 24px; font-weight: 500; color: #fff; margin-bottom: 15px; }
.footer-contact { flex: 0 0 20%; position: relative; }
    .footer-contact:after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 2px; border-radius: 100%; background: radial-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0)); }
    .footer-contact ul { padding-right: 15px; }
        .footer-contact ul li { display: flex; margin-bottom: 25px; line-height: 1.2; }
            .footer-contact ul li span { display: inline-block; margin-right: 10px; flex: 0 0 50px; line-height: 20px; }
            .footer-contact ul li p { flex: auto; margin: 0; color: #fff; font-size: 13px; line-height: 20px; }
.footer-link { flex: 0 0 24%; padding: 0 20px; position: relative; }
    .footer-link.footer-link-2 { flex: 0 0 40%; }
    .footer-link:after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 2px; border-radius: 100%; background: radial-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0)); }
    .footer-link ul { display: flex; flex-flow: wrap; }
        .footer-link ul li { flex: 0 0 46%; margin-bottom: 10px; }
            .footer-link ul li i { margin-right: 5px; }
    .footer-link.footer-link-2 ul li { flex: 0 0 100%; margin-bottom: 5px; }

    .footer-link ul li a { color: #ccc; }
        .footer-link ul li a:hover { text-decoration: underline; color: #fff; }

.footer-img { flex: 0 0 20%; text-align: center; padding-left: 15px; }
.qr-code img { border-radius: 8px; margin-top: 20px; }
.footer-share { margin-top: 10px; }
    .footer-share img { margin: 0 2px; }

.footer-classic-bottom { padding: 10px 0; background-color: rgba(17,17,17,.7); }
    .footer-classic-bottom .container { margin-top: 0; margin-bottom: 0; }
p.rights { font-size: 13px; color: #ccc; text-align: center; }
    p.rights a { color: #ccc; text-decoration: underline; margin-left: 5px; }


#company-video { overflow: hidden; border-radius: 100%; position: relative; }

    #company-video .carousel-indicators li { width: 8px; height: 8px; background: #d51a31; border-radius: 100px; cursor: pointer; transition: all 0.3s; -webkit-transition: all 0.3s; }
        #company-video .carousel-indicators li.active { width: 35px; }

.video-wrap { position: relative; }
    .video-wrap img { border-radius: 100%; transform: scale(0.99); }
    .video-wrap::after { content: ""; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 10px 10px rgba(255,255,255,1) inset; left: 0; top: 0; border-radius: 100%; z-index: 0; }
    .video-wrap .link-circle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 0; z-index: 999; }
        .video-wrap .link-circle span { display: inline-block; width: 60px; height: 60px; background: rgba(213,26,49,0.8); border-radius: 100%; position: relative; transition: 0.3s; -webkit-transition: 0.3s; color: #222; }
            .video-wrap .link-circle span:before { position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background: #fff; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; transition: 0.3s; -webkit-transition: 0.3s; }
            .video-wrap .link-circle span i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-35%, -50%); transform: translate(-35%, -50%); color: #fff; }
            .video-wrap .link-circle span:hover { transform: scale(1.2); -webkit-transform: scale(1.2); }
                .video-wrap .link-circle span:hover i { color: #d51a31; }
                .video-wrap .link-circle span:hover:before { opacity: 1; transform: scale(.85); -webkit-transform: scale(.85); }


.front-pic img { width: 100%; }

.front-info h6 { color: #d51a31; font-style: italic; }

.front-info h5 { font-weight: 500; }

.quick-services { margin-top: 10px; }

.construction-icon { float: left; margin-right: 20px; width: 60px; height: 100px; }

    .construction-icon img { width: 100%; }

.inner-quick-services h5 { font-size: 16px; }

.inner-quick-services p { margin: 0px; line-height: 1.4; color: #808080; font-size: 13px; }

.inner-quick-services { margin: 30px 0px 30px 0px; clear: both; }

.front-stripe { padding: 0px 10px 0px 10px; color: #FFF; /* overflow: hidden; */ }

    .front-stripe p { color: #FFF; line-height: 1.4; }

.stripe-icon { float: left; margin-right: 20px; width: 55px; height: 100px; }

    .stripe-icon img { width: 100%; }

.inner-stripe-1 { padding: 15px 20px; background: #f11d37; }

.inner-stripe-2 { padding: 15px 20px; background: #d51a31; }

.inner-stripe-3 { padding: 15px 20px; background: #a51829; }

.inner-stripe-1 h5 { font-size: 18px; }

.inner-stripe-2 h5 { font-size: 18px; }

.inner-stripe-3 h5 { font-size: 18px; }


@media (max-width:1200px) {
    .quick-services { margin-top: 20px; }

    .inner-quick-services { margin: 10px; }

    .inner-stripe-1, .inner-stripe-2, .inner-stripe-3 { padding: 30px 15px 30px 15px; height: 100%; }

    .stripe-icon { height: 80px; }

    .inner-quick-services p { font-size: 13px; }


    .front-info p { line-height: 1.6; }
}

@media (max-width:1100px) {

    .front-info { margin-top: 0px; }

    .inner-quick-services { margin: 5px; }

        .inner-quick-services p { margin: 0px; line-height: 1.4; }
}


@media (max-width:992px) {
    .inner-stripe-1, .inner-stripe-2, .inner-stripe-3 { padding: 30px 20px 5px 20px; height: 100%; }

    .front-info { margin-top: 30px; }
}


@media (max-width:576px) {
    .inner-quick-services h5 { font-size: 16px; }

    .inner-stripe-1, .inner-stripe-2, .inner-stripe-3 { padding: 30px 20px 15px 20px; }
}



.bread {padding-top: 250px;background: url(../images/banner-about.jpg) no-repeat center/cover;}
.bread-inner { background: rgba(0,0,0,0.5); padding: 6px 0; color: #fff; }
.bread-inner-list ul li { padding: 0 10px; display: inline-block; font-size: 12px; }
    .bread-inner-list ul li a { color: #ccc; }
        .bread-inner-list ul li a:hover { color: #fff; text-decoration: underline; }
    .bread-inner-list ul li span { color: #fff; font-weight: 500; }

.sidebar { background: #f3f3f3; margin-bottom: 60px; }
.sidebar-title { overflow: hidden; padding-bottom: 10px; }
    .sidebar-title h3 { margin: 0; transform: skewY(-3deg); transform-origin: 0 0; background: #D51a31; box-shadow: 0 3px 6px #666; }
        .sidebar-title h3 span { display: block; text-align: center; padding: 85px 0 20px; font-size: 24px; font-weight: 500; color: #fff; transform: skewY(3deg); }
.sidebar ul { padding: 0 0 30px; position: relative; }

    .sidebar ul li a { display: block; color: #222; font-size: 16px; font-weight: 300; padding: 10px 0; text-align: center; }
    .sidebar ul li:after { content: ""; display: block; width: 0; margin: 0 auto; height: 2px; border-radius: 100%; background: radial-gradient(rgba(213,26,49), rgba(213,26,49,0)); transition: 0.3s all; }
    .sidebar ul li:hover:after { width: 80%; }
    .sidebar ul li.active a { color: #D51a31; font-weight: 500; }

    .sidebar ul .sidebar-contact { position: absolute; bottom: -30px; left: calc(50% - 30px); background: #fff; padding: 5px; border-radius: 100%; box-shadow: 0 -1px 0px #ddd; }
        .sidebar ul .sidebar-contact:before { display: block; content: "\f095"; font-family: FontAwesome; background: #f3f3f3; width: 50px; height: 50px; line-height: 50px; font-size: 30px; text-align: center; color: #D51a31; border-radius: 100%; box-shadow: 0 2px 2px #bbb; }
        .sidebar ul .sidebar-contact:hover:before { animation: slosh 0.8s; }

@keyframes slosh {
    0% { transform: rotate(0); }
    3% { transform: rotate(12deg); }
    6% { transform: rotate(-12deg); }
    10% { transform: rotate(0); }
    15% { transform: rotate(12deg); }
    20% { transform: rotate(-12deg); }
    25% { transform: rotate(0); }
    30% { transform: rotate(12deg); }
    35% { transform: rotate(-12deg); }
    40% { transform: rotate(0); }
    45% { transform: rotate(12deg); }
    50% { transform: rotate(-12deg); }
    55% { transform: rotate(0); }
    60% { transform: rotate(12deg); }
    65% { transform: rotate(-12deg); }
    70% { transform: rotate(0); }
    75% { transform: rotate(12deg); }
    80% { transform: rotate(-12deg); }
    85% { transform: rotate(0); }
    90% { transform: rotate(12deg); }
    95% { transform: rotate(-12deg); }
    100% { transform: rotate(0); }
}

.download { margin-bottom: 50px; border-radius: 100px; box-shadow: 0 4px 8px #ccc; background: #eee; padding: 3px; position: relative; overflow: hidden; transition: all 0.5s; }
.download-img { display: flex; justify-content: space-between; background: #fff; border-radius: 100px; align-items: center; position: absolute; left: 3px; width: calc(100% - 6px); transition: all 0.5s; }
.download-img-text { font-size: 30px; font-family:Microsoft YaHei, impact; padding-right: 30px; color: #D51a31; }
.download-text { font-size: 30px; font-family: Microsoft YaHei,impact; color: #fff; height: 60px; padding-left: 30px; line-height: 60px; }
.download:hover { background: #D51a31; }
    .download:hover .download-img { left: calc(100% - 63px); background: transparent; }
.about { margin-bottom: 60px; }
.about-inner { margin-top: 80px; margin-bottom: 30px; }
    .about-inner .inner-title { display: flex; align-items: flex-end; }
        .about-inner .inner-title h3 { position: relative; background: #D51a31; color: #fff; margin: 0; height: 40px; line-height: 40px; padding: 0 40px 0 20px; font-size: 24px; font-weight: 300; display: inline-block; margin-right: -8px; position: relative; z-index: -1; border-radius: 5px 0 0px 0px; box-shadow: 4px 4px 6px 0px rgba(255,255,255,0.3) inset; }
            .about-inner .inner-title h3::after { content: ""; position: absolute; border-style: solid; border-color: transparent #fff #901221 transparent; border-width: 10px 4px; top: 0; right: 0; transform: translateY(-50%); }
        .about-inner .inner-title span { height: 30px; flex: auto; font-size: 12px; font-weight: 300; color: #bbb; padding: 8px 0 0 5px; background: #f3f3f3; }


.about-content p { font-size: 14px; font-weight: 300; color: #666; }

.goods-slide { border: 4px solid #D51a31; box-shadow: 0 4px 8px #aaa; }
    .goods-slide.owl-carousel .owl-nav button.owl-prev,
    .goods-slide.owl-carousel .owl-nav button.owl-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: .22s; }

    .goods-slide.owl-carousel .owl-nav .owl-prev { left: 0; }
    .goods-slide.owl-carousel .owl-nav .owl-next { right: 0; }
    .goods-slide.owl-carousel .owl-nav .owl-nav { margin-top: 0; text-align: center; -webkit-tap-highlight-color: transparent; }
    .goods-slide.owl-carousel .owl-nav [class*='owl-'] { color: #fff; font-size: 20px; padding: 8px 8px 10px; background: rgba(213,26,49,0.5); display: inline-block; cursor: pointer; border: none; outline: none; }
        .goods-slide.owl-carousel .owl-nav [class*='owl-']:hover { background: rgba(213,26,49,1); outline: none; }

.goods-slide-box { position: relative; overflow: hidden; z-index: 1; }

    .goods-slide-box:before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; border-left: 0px solid transparent; border-top: 247px solid transparent; border-right: 247px solid rgba(0, 0, 0, 0.7); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; -webkit-transform: translateY(100%); transform: translateY(100%); }
    .goods-slide-box:hover:before { -webkit-transform: translateY(0); transform: translateY(0); }

.goods-overlay { position: absolute; top: 50%; z-index: 9; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%) scale(0); transform: translateY(-50%) translateX(-50%) scale(0); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; }

    .goods-overlay a { display: block; padding: 3px; height: 46px; width: 46px; border-radius: 50%; background-color: #fff; }

.goods-slide-box:hover .goods-overlay { -webkit-transform: translateY(-50%) translateX(-50%) scale(1); transform: translateY(-50%) translateX(-50%) scale(1); }

.goods-overlay a i { height: 40px; width: 40px; line-height: 40px; text-align: center; color: #fff; font-size: 18px; background-color: #333; border-radius: 50%; }
.goods-overlay:hover a i { background: #D51a31; }


.goods-slide-box h6 { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); margin: 0; text-align: center; color: #fff; font-size: 14px; font-weight: 500; padding: 5px 10px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.goods-slide-box:hover h6 { transform: translateY(100%); }



.timeline { position: relative; }

.timeline-hex-bottom, .timeline-hex-bottom:before, .timeline-hex-top:before, .timeline-region-wrapper:before { content: ''; }

.timeline .before { content: ''; position: absolute; top: 0; height: 102%; width: 2px; background: #f2f2ee; }
    .timeline .before:after, .timeline .before:before { left: 50%; transform: translate(-50%,-50%); border-radius: 50%; content: ''; background-color: #D51a31; width: 10px; height: 10px; z-index: 1; position: absolute; }
    .timeline .before:before { top: 0; }
    .timeline .before:after { bottom: -10px; }
.timeline .line { background-attachment: fixed; position: absolute; left: 0; width: 100%; background-size: 100%; background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#D51a31),color-stop(50%,#D51a31),color-stop(50%,#e2e3e3),color-stop(100%,#e2e3e3)); background-image: -moz-linear-gradient(top,#D51a31 0,#D51a31 50%,#e2e3e3 50%,#e2e3e3 100%); background-image: -webkit-linear-gradient(top,#D51a31 0,#D51a31 55%,#e2e3e3 55%,#e2e3e3 100%); background-image: linear-gradient(to bottom,#D51a31 0,#D51a31 50%,#e2e3e3 50%,#e2e3e3 100%); height: 100%; }
.timeline-region { position: relative; padding: 20px 0; perspective: 1000px; perspective-origin: 100% 50%; }
.timeline-hex { width: 30px; height: 51.96px; margin: 0 15px; position: absolute; left: calc(-30px); z-index: 10; top: 50%; transform: translateY(-50%); background-color: #888; line-height: 51.96px; display: inline-block; }
.timeline-hex-title { color: #fff; margin: 0; font-size: 18px; left: 50%; position: absolute; text-align: center; top: 50%; transform: translate(-50%,-50%); font-weight: 300; }
.timeline-hex-bottom, .timeline-hex-top { top: 0; overflow: hidden; background-color: #888; position: absolute; height: 100%; left: 0; }
.timeline-hex-top { width: 100%; z-index: -1; transform: rotate(60deg); }
.timeline-hex-bottom { width: 100%; z-index: -2; transform: rotate(-60deg); }
.timeline-region-wrapper { padding: 0 0 0 125px; }
    .timeline-region-wrapper:before { display: block; width: 125px; height: 2px; position: absolute; z-index: -1; left: 0; top: 50%; transform: translateY(-50%); background: #e2e3e3; }
.timeline-region-wrapper-content { padding: 15px; border-left: 2px solid #e2e3e3; position: relative; }
    .timeline-region-wrapper-content p { margin: 0; font-size: 15px; font-weight: 400; }

    .timeline-region-wrapper-content:after, .timeline-region-wrapper-content:before { content: ''; display: block; width: 15px; height: 2px; position: absolute; left: 0; background: #e2e3e3; }
    .timeline-region-wrapper-content:before { top: 0; }
    .timeline-region-wrapper-content:after { bottom: 0; }



.timeline-hex.in-center, .timeline-hex.in-center .timeline-hex-bottom, .timeline-hex.in-center .timeline-hex-top, .timeline-hex.in-center + .timeline-region-wrapper .timeline-region-wrapper-content:after, .timeline-hex.in-center + .timeline-region-wrapper .timeline-region-wrapper-content:before, .timeline-hex.in-center + .timeline-region-wrapper:before { background-color: #D51a31; }
    .timeline-hex.in-center + .timeline-region-wrapper .timeline-region-wrapper-content, .timeline-hex.in-center:nth-child(odd) { border-color: #D51a31; }

@media only screen and (min-width: 1170px) {
    .timeline .before { left: 50%; margin-left: -2px; }
    .timeline-region:nth-child(even) { width: 50%; left: 50%; }
    .timeline-region:nth-child(odd) { width: 50%; left: 0; perspective-origin: 100% 50%; }
        .timeline-region:nth-child(odd) .timeline-hex { left: auto; right: calc(-30px); z-index: 10; }
        .timeline-region:nth-child(odd) .timeline-region-wrapper { padding: 0 125px 0 0; }
            .timeline-region:nth-child(odd) .timeline-region-wrapper-content:after, .timeline-region:nth-child(odd) .timeline-region-wrapper-content:before, .timeline-region:nth-child(odd) .timeline-region-wrapper:before { left: auto; right: 0; }
        .timeline-region:nth-child(odd) .timeline-region-wrapper-content { border-left: 0; border-right: 2px solid #e2e3e3; }
}




.services-title-bg { position: relative; padding: 4px 40px; display: inline-block; margin-bottom: 20px; }
    .services-title-bg h3 { color: #ffffff; font-size: 18px; margin: 0; }
    .services-title-bg .title-line { background: #D51a31; position: absolute; left: 0; top: 0; height: 100%; width: 100%; transform: skewX(-30deg); z-index: -1; }
        .services-title-bg .title-line:before { content: ""; display: block; height: 100%; border-left: 2px solid #fff; border-right: 2px solid #fff; margin: 0 1px; }


.about-list { margin-bottom: 15px; }
    .about-list li { font-size: 15px; font-weight: 300; color: #666; }
        .about-list li span { color: #D51a31; }
            .about-list li span i { margin-right: 4px; }


.about-bellows-title { overflow: hidden; }
    .about-bellows-title h2 { margin: 0; width: 80px; height: 80px; background: url(../images/about-icon.png) no-repeat center top/contain; color: #fff; font-size: 36px; font-weight: 500; padding: 5px 0px 0 7px; float: left; }
        .about-bellows-title h2 span { display: block; transform: skewY(-14deg); }

    .about-bellows-title h4 { font-size: 24px; color: #bbb; margin: 15px 0 0 0; font-weight: 500; white-space: nowrap; float: left; }

.about-content .about-bellows { border: 4px solid #D51a31; border-radius: 40px; padding: 15px 15px 0 0; margin-top: -4px; }
    .about-content .about-bellows:first-child { }
    .about-content .about-bellows:nth-child(2n+1) { border-left: none; border-radius: 0 40px 40px 0; margin-left: 40px; padding: 30px 30px 15px 0; }
    .about-content .about-bellows:nth-child(2n) { border-right: none; border-radius: 40px 0 0 40px; margin-right: 40px; padding: 30px 0 15px 30px; }
    .about-content .about-bellows:nth-child(2n+1) .about-bellows-title { float: left; margin-right: 15px; }
    .about-content .about-bellows:nth-child(2n) .about-bellows-title { float: right; margin-left: 15px; }


.down .table tr td { border: 1px solid #d4d4d4; color: #666; font-size: 14px; }
    .down .table tr td a:hover { text-decoration: underline; }
.down .table thead tr { background: #666; color: #fff; }
.down .table tbody tr:nth-child(2n) { background: #f6f4f0; }
.down .table tbody tr:nth-child(2n+1) { background: #fff; }


.chairman { border: 4px solid #e7e4e7; padding: 0 30px 30px 30px; margin: 60px 30px 0 30px; }
.chairman-title h3 { background: #fff url(../images/speech-of-chairman.png) no-repeat center; text-align: center; width: 500px; height: 56px; font-size: 20px; font-weight: 300; margin: 0 auto; padding-top: 20px; color: #fff; margin-top: -24px; }

.about-content .chairman-content-title { color: #bbb; font-size: 16px; font-style: italic; text-align: center; }


.goods-section { padding: 60px 0; }
.water-bg { background: url(../images/map.png) center; }
.goods-category-title { margin: 0 auto 60px; max-width: 700px; position: relative; }
    .goods-category-title:after { content: ""; position: absolute; border-left: 3px solid #D51a31; border-top: 3px solid #D51a31; top: 0; left: 0; width: 60px; height: 30px; transition: 0.5s all; }
    .goods-category-title:before { content: ""; position: absolute; border-right: 3px solid #D51a31; border-bottom: 3px solid #D51a31; bottom: 0; right: 0; width: 60px; height: 30px; transition: 0.5s all; }

.goods-category-title-inner { text-align: center; }
    .goods-category-title-inner h3 { display: inline-block; font-size: 30px; color: #D51a31; padding: 0 20px; margin: 0; font-weight: 300; }

.goods-category-title-span { text-align: center; max-width: 600px; color: #222; font-size: 14px; margin: 10px auto 0; font-weight: 300; }


.goods-list-title { margin: 0 auto; max-width: 700px; position: relative; }
    .goods-list-title:after { content: ""; position: absolute; border-left: 3px solid #D51a31; border-top: 3px solid #D51a31; top: 0; left: 0; width: 60px; height: 30px; transition: 0.5s all; }
    .goods-list-title:before { content: ""; position: absolute; border-right: 3px solid #D51a31; border-bottom: 3px solid #D51a31; bottom: 0; right: 0; width: 60px; height: 30px; transition: 0.5s all; }

.goods-list-title-inner { text-align: center; }
    .goods-list-title-inner h3 { display: inline-block; font-size: 30px; color: #D51a31; padding: 0 20px; margin: 0; font-weight: 300; }

.goods-list-title-span { text-align: center; max-width: 600px; color: #aaa; font-size: 14px; margin: 10px auto 0; font-weight: 300; }



.goods-category ul { display: flex; flex-flow: wrap; width: 890px; margin: 0 auto; }
    .goods-category ul > a { width: 202px; height: 202px; margin: 5px; display: block; border: 1px solid #eee; }
.goods-category li { width: 200px; height: 200px; position: relative; -webkit-perspective: 300px; perspective: 300px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
    .goods-category li:nth-child(4n) { margin-right: 0; }
.goods-category .w { font-size: medium; font-size: initial; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -100px; transform-origin: 50% 50% -100px; will-change: transform; -webkit-animation: 200ms ease-out 0ms 1 normal forwards paused; animation: 200ms ease-out 0ms 1 normal forwards paused; }
.goods-category .f, .goods-category .b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: #fff; -webkit-transition: none; transition: none; }
.goods-category .f { background-color: #fff; }
.goods-category .b { padding: 10px; background: #D51a31; -webkit-transform: translate3d(0,0,-1px); transform: translate3d(0,0,-1px); 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; }
    .goods-category .b span { font-size: 16px; font-weight: 300; }
.goods-category .in-top .b, .goods-category .out-top .b { -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: translate3d(0,-100%,0) rotate3d(1,0,0,90deg); transform: translate3d(0,-100%,0) rotate3d(1,0,0,90deg); }
.goods-category .in-right .b, .goods-category .out-right .b { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,90deg); transform: translate3d(100%,0,0) rotate3d(0,1,0,90deg); }
.goods-category .in-bottom .b, .goods-category .out-bottom .b { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate3d(0,100%,0) rotate3d(-1,0,0,90deg); transform: translate3d(0,100%,0) rotate3d(-1,0,0,90deg); }
.goods-category .in-left .b, .goods-category .out-left .b { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg); transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg); }
.in { }
.in-top .w { -webkit-animation-name: in-top; animation-name: in-top; -webkit-animation-play-state: running; animation-play-state: running; }
.in-right .w { -webkit-animation-name: in-right; animation-name: in-right; -webkit-animation-play-state: running; animation-play-state: running; }
.in-bottom .w { -webkit-animation-name: in-bottom; animation-name: in-bottom; -webkit-animation-play-state: running; animation-play-state: running; }
.in-left .w { -webkit-animation-name: in-left; animation-name: in-left; -webkit-animation-play-state: running; animation-play-state: running; }
.out { }
.out-top .w { -webkit-animation-name: out-top; animation-name: out-top; -webkit-animation-play-state: running; animation-play-state: running; }
.out-right .w { -webkit-animation-name: out-right; animation-name: out-right; -webkit-animation-play-state: running; animation-play-state: running; }
.out-bottom .w { -webkit-animation-name: out-bottom; animation-name: out-bottom; -webkit-animation-play-state: running; animation-play-state: running; }
.out-left .w { -webkit-animation-name: out-left; animation-name: out-left; -webkit-animation-play-state: running; animation-play-state: running; }

@-webkit-keyframes in-top {
    from { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
    to { -webkit-transform: rotate3d(-1,0,0,90deg); transform: rotate3d(-1,0,0,90deg); }
}

@keyframes in-top {
    from { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
    to { -webkit-transform: rotate3d(-1,0,0,90deg); transform: rotate3d(-1,0,0,90deg); }
}

@-webkit-keyframes out-top {
    from { -webkit-transform: rotate3d(-1,0,0,90deg); transform: rotate3d(-1,0,0,90deg); }
    to { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
}

@keyframes out-top {
    from { -webkit-transform: rotate3d(-1,0,0,90deg); transform: rotate3d(-1,0,0,90deg); }
    to { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
}

@-webkit-keyframes in-right {
    from { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
    to { -webkit-transform: rotate3d(0,-1,0,90deg); transform: rotate3d(0,-1,0,90deg); }
}

@keyframes in-right {
    from { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
    to { -webkit-transform: rotate3d(0,-1,0,90deg); transform: rotate3d(0,-1,0,90deg); }
}

@-webkit-keyframes out-right {
    from { -webkit-transform: rotate3d(0,-1,0,90deg); transform: rotate3d(0,-1,0,90deg); }
    to { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
}

@keyframes out-right {
    from { -webkit-transform: rotate3d(0,-1,0,90deg); transform: rotate3d(0,-1,0,90deg); }
    to { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
}

@-webkit-keyframes in-bottom {
    from { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
    to { -webkit-transform: rotate3d(1,0,0,90deg); transform: rotate3d(1,0,0,90deg); }
}

@keyframes in-bottom {
    from { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
    to { -webkit-transform: rotate3d(1,0,0,90deg); transform: rotate3d(1,0,0,90deg); }
}

@-webkit-keyframes out-bottom {
    from { -webkit-transform: rotate3d(1,0,0,90deg); transform: rotate3d(1,0,0,90deg); }
    to { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
}

@keyframes out-bottom {
    from { -webkit-transform: rotate3d(1,0,0,90deg); transform: rotate3d(1,0,0,90deg); }
    to { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
}

@-webkit-keyframes in-left {
    from { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
    to { -webkit-transform: rotate3d(0,1,0,90deg); transform: rotate3d(0,1,0,90deg); }
}

@keyframes in-left {
    from { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
    to { -webkit-transform: rotate3d(0,1,0,90deg); transform: rotate3d(0,1,0,90deg); }
}

@-webkit-keyframes out-left {
    from { -webkit-transform: rotate3d(0,1,0,90deg); transform: rotate3d(0,1,0,90deg); }
    to { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
}

@keyframes out-left {
    from { -webkit-transform: rotate3d(0,1,0,90deg); transform: rotate3d(0,1,0,90deg); }
    to { -webkit-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg); }
}

.goods-list-ul { display: flex; flex-flow: wrap; margin: 30px 0; }
    .goods-list-ul li {flex: 0 0 20%;background: #999;position: relative;z-index: 1;}
        .goods-list-ul li a { display: block; color: #fff; text-align: center; padding: 10px 0; border-right: 1px rgba(255,255,255,.2) solid; border-left: 1px rgba(0,0,0,.1) solid; border-top: 1px rgba(255,255,255,.2) solid; border-bottom: 1px rgba(0,0,0,.1) solid; font-size: 13px; font-weight: 500; position: relative; z-index: 1;letter-spacing:-0.5px;}
        .goods-list-ul li:after { content: ""; background: #d51a31; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 0; transition: 0.4s all; z-index: 0; }
        .goods-list-ul li:hover:after { height: 100%; }

.product-list-box { margin-top: 30px; display: flex; }
.product-list-box-img {
    flex: 0 0 360px;
    padding-right: 100px;
}
.product-list-box-inner {flex: auto;margin: 20px;padding: 15px 20px;margin-left: 0;box-shadow: 0 0 8px #ddd;background: #fff;}

    .product-list-box-inner h3 a { font-size: 16px; font-weight:400;}
    .product-list-box-inner p {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;font-size: 14px;font-weight: 300;color: #666;margin-bottom: 10px;}
    .product-list-box-inner .box-btn { display: inline-block; padding: 6px 20px; border: 1px solid #ccc; color: #aaa; font-size: 14px; font-weight: 400; transition: all 0.3s; position: relative; overflow: hidden; }
        .product-list-box-inner .box-btn i { margin-left: 4px; }



        .product-list-box-inner .box-btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; width: 100%; height: 0; top: 50%; left: 50%; background: #D51a31; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); }
        .product-list-box-inner .box-btn:hover:after { height: 260%; opacity: 1; }

        .product-list-box-inner .box-btn:hover, .product-list-box-inner .box-btn:active { color: #fff; }


.product-list .product-list-box:nth-child(2n) { flex-flow: row-reverse; }
.product-list .product-list-box:nth-child(2n) .product-list-box-img {
    flex: 0 0 360px;
    padding-right: 0;padding-left: 100px;
}
    .product-list .product-list-box:nth-child(2n) .product-list-box-inner { margin-left: 30px; margin-right: 0; }

.goods-50 { padding: 50px 0; }
.goods-title { margin-bottom: 30px; }
    .goods-title h3 { font-size: 24px; font-weight: 300; color: #222; margin-bottom: 0; }
.goods-title-icon { position: relative; border-bottom: 1px solid #ccc; }
    .goods-title-icon i { font-size: 20px; color: #D51a31; transform: translateY(14px); background: #fff; padding-right: 10px; }

.sidegoods { padding: 50px 0; height: 100%; position: relative; }

@media (min-width: 992px) {
    .sidegoods-inner { width: 240px; }
}

@media (min-width: 1200px) {
    .sidegoods-inner { width: 255px; }
}


.sidegoods:after { content: ""; position: absolute; right: 0; top: 0; background: #f3f3f3; width: 1000px; height: 100%; }
.sidegoods-inner { position: relative; z-index: 9; }
    .sidegoods-inner h3 { background: #9f1425; padding: 30px 0px 10px 0; border-right: none; font-size: 24px; margin: 0; font-weight: 300; color: #fff; border-radius: 5px 5px 0px 0px; box-shadow: 0 4px 6px 2px rgba(255,255,255,0.3) inset; position: relative; text-align: center; font-weight: 500; }
        /*.sidegoods-inner h3::after { content: ""; position: absolute; top: 0; left: 50%; font-style: italic; font-weight: 700; border-radius: 100%; width: 50px; height: 50px; line-height: 42px; background: #f3f3f3; border: 4px solid #D51a31; color: #D51a31; transform: translate(-50%,-50%); font-size: 16px; box-shadow: 0px 2px 4px rgba(0,0,0,0.3); }*/

    .sidegoods-inner > ul { border-radius: 0px 0px 5px 5px; overflow: hidden; text-align: center; }
        .sidegoods-inner > ul li { position: relative; z-index: 1; background: #D51a31; }
            .sidegoods-inner > ul li a { display: block; padding: 6px 0; font-size: 14px; color: #fff; font-weight: 500; border-right: 1px rgba(255,255,255,.2) solid; border-left: 1px rgba(0,0,0,.1) solid; border-top: 1px rgba(255,255,255,.2) solid; border-bottom: 1px rgba(0,0,0,.1) solid; position: relative; z-index: 1; }
            .sidegoods-inner > ul li:after { content: ""; background: #9f1425; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 0; transition: 0.4s all; z-index: 0; }
            .sidegoods-inner > ul li:hover:after { height: 100%; }




.side-contact { padding: 30px 10px; background: url(../images/contact-img.png)no-repeat center/contain; }
.side-contact-inner { position: relative; }
    .side-contact-inner ul { position: relative; z-index: 999; }
        .side-contact-inner ul li { margin-bottom: 10px; display: flex; border-radius: 18px; overflow: hidden; }
            .side-contact-inner ul li span { flex: auto; height: 32px; line-height: 32px; color: #222; font-size: 14px; background: rgba(255,255,255,0.7); padding-left: 15px; color: #D51a31; font-weight: 500; }
            .side-contact-inner ul li i { flex: 0 0 32px; height: 32px; line-height: 32px; background: #D51a31; color: #fff; text-align: center; }
            .side-contact-inner ul li span a { color: #D51a31; }


.goods-details-inner h1 { font-size: 20px; color: #D51a31; text-shadow: 3px 3px 3px #ccc; margin: 10px 0 20px; font-weight: 400; }
.goods-details-inner ul li { font-weight: 400; margin-bottom: 10px; color: #888; }
    .goods-details-inner ul li span { display: inline-block; color: #D51a31; font-weight: 500; margin-right: 10px; }


.share-goods { margin-top: 50px; }
    .share-goods b { font-weight: 700; color: #000; }
.goods-tab { margin-top: 30px; }
    .goods-tab ul { display: flex; flex-flow: wrap; }
        .goods-tab ul li { }
            .goods-tab ul li a { display: block; background: #D51a31; background: -moz-linear-gradient(220deg, transparent 10px, #D51a31 11px); background: -webkit-linear-gradient(220deg, transparent 10px, #D51a31 11px); background: -ms-linear-gradient(220deg, transparent 10px, #D51a31 11px); background: -o-linear-gradient(220deg, transparent 10px, #D51a31 11px); background: linear-gradient(220deg, transparent 10px, #D51a31 11px); text-shadow: 0 1px 0 rgba(0,0,0,.5); color: #fff; padding: 10px 20px; text-decoration: none; }
            .goods-tab ul li.active a { background: #fff; background: -moz-linear-gradient(220deg, transparent 10px, #f3f3f3 11px); background: -webkit-linear-gradient(220deg, transparent 10px, #f3f3f3 11px); background: -ms-linear-gradient(220deg, transparent 10px, #f3f3f3 11px); background: -o-linear-gradient(220deg, transparent 10px, #f3f3f3 11px); background: linear-gradient(220deg, transparent 10px, #f3f3f3 11px); text-shadow: none; color: #333; }


.goods-content > div { display: none; padding: 20px; background: #f3f3f3; }
    .goods-content > div.active { display: block; }
    .goods-content > div p { font-size: 14px; font-weight: 300; color: #666; }
.about-goods { margin-top: 30px; }
    .about-goods h3 { display: inline-block; padding: 0px 55px; font-size: 20px; font-weight: 400; line-height: 40px; position: relative; margin-bottom: 0px; color: black; }
        .about-goods h3:before, .about-goods h3:after { position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); width: 35px; height: 2px; background: #D51a31; content: ""; }
        .about-goods h3:after { left: auto; right: 0px; }
        .about-goods h3 span { color: #D51a31; }

.project-item { border: 4px solid #f5f5f5; border-bottom: none; transition: 0.5s; -webkit-transition: 0.5s; }

    .project-item .box-title h4 { margin: 0; background: #f5f5f5; position: relative; z-index: 0; overflow: hidden; height: 40px; font-size: 14px; font-weight: 500; padding: 5px; }

        .project-item .box-title h4 a { color: #999; transition: 0.5s; -webkit-transition: 0.5s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; font-weight: 400;line-height:16px; }

        .project-item .box-title h4:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: -50px; background: #D51a31; z-index: -1; transition: 0.5s; -webkit-transition: 0.5s; }
    .project-item:hover { border-color: #D51a31; }
        .project-item:hover .box-title h4:after { bottom: 0; }

        .project-item:hover .box-title h4 a { color: #fff; }



.certificate-box { overflow: hidden; position: relative; box-shadow: 0 5px 4px 1px #ddd; }
    .certificate-box img { transition: all 0.2s; }
.certificate-title { margin: 5px 0 30px; font-size: 14px; font-weight: 300; text-align: center; }


.certificate-box-icon { position: absolute; bottom: 0; right: 0; }
    .certificate-box-icon i { font-size: 24px; color: #fff; position: relative; z-index: 999; padding: 12px; transform: scale(0); }
    .certificate-box-icon:after { content: ""; border-style: solid; border-color: transparent rgba(213,26,49,0.85) rgba(213,26,49,0.85) transparent; border-width: 40px; position: absolute; bottom: -40px; right: -40px; transition: all 0.2s; }

.certificate-box:hover img { transform: scale(1.1); }
.certificate-box:hover .certificate-box-icon:after { bottom: 0px; right: 0px; }
.certificate-box:hover .certificate-box-icon i { transform: scale(1); transition: all 0.3s 0.2s; }


.application .grid-sidebar { background: #f5f5f5; transition: all 0.3s; -webkit-transition: all 0.3s; margin: 15px 0; }
    .application .grid-sidebar h6 { padding: 20px 0; margin: 0; font-size: 15px; font-weight: 500; }
    .application .grid-sidebar:hover { box-shadow: 0 5px 10px 0 #aaa; transform: translateY(-5px); -sm-transform: translateY(-5px); -webkit-transform: translateY(-5px); }



.news-section { padding: 60px 0; }

.news-title-inner { position: relative; text-align: center; }
    .news-title-inner:after { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; width: 60%; top: calc( 50% - 2px ); height: 2px; background: #D51a31; }
    .news-title-inner h3 { display: inline-block; font-size: 30px; color: #D51a31; position: relative; background: #fff; padding: 0 20px; margin: 0; z-index: 99; font-weight: 300; }

.news-title-span { text-align: center; max-width: 500px; color: #aaa; font-size: 13px; margin: 10px auto 0; font-weight: 300; }


.blog-area { padding: 60px 0; background: url(../images/map.png) center; position: relative; z-index: 0; }
    .blog-area:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.3); z-index: -1; }
    .blog-area .blog-item { border: 1px solid #eee; margin-top: 30px; display: flex; transition: all .5s; -webkit-transition: all .5s; }

        .blog-area .blog-item .blog-left { flex: 0 0 25%; padding: 15px; }
        .blog-area .blog-item .blog-right { flex: 0 0 75%; padding: 20px 30px; display: flex; flex-flow: column; justify-content: space-between; }


        .blog-area .blog-item * { transition: all .3s; -webkit-transition: all .3s; }
.blog-inner-top { display: flex; }
.blog-inner-bottom { display: flex; align-items: flex-end; }

.blog-inner-top h3 { font-size: 18px; margin: 0 0 10px 0; }
    .blog-inner-top h3 a { color: #555; }
        .blog-inner-top h3 a:hover { color: #D51a31; }
.blog-inner-bottom p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: #888; line-height: 20px; font-size: 15px; font-weight: 300; }
.blog-inner-top h3, .blog-inner-bottom p { flex: 0 0 calc(100% - 140px); padding-right: 30px; }

.blog-inner-top span { font-size: 19px; color: #888; line-height: normal; }
.blog-inner-bottom span { display: inline-block; }
.blog-area .blog-item .blog-inner-bottom span a { display: block; padding: 6px 20px; border: 1px solid #ccc; border-radius: 100px; color: #888; font-size: 14px; transition: all .5s; -webkit-transition: all .5s; }

.blog-area .blog-item:hover { box-shadow: 0 6px 10px 5px rgba(0, 0, 0, .08); background: #fff; }
    .blog-area .blog-item:hover .blog-left { background: #D51a31; }
    .blog-area .blog-item:hover .blog-inner-top, .blog-area .blog-item:hover .blog-inner-bottom { transform: translateX(25px); }
        .blog-area .blog-item:hover .blog-inner-bottom span a { transform: translateX(25px); }
.blog-area .blog-item .blog-inner-bottom span a:hover { background: #D51a31; color: #fff; border-color: #D51a31; }

@media (max-width:992px) {
    .blog-area .blog-item { display: block; }
}

@media (max-width:768px) {
    .blog-inner-top { display: block; }
    .blog-inner-bottom { display: block; }
    .blog-inner-top span { font-size: 12px; }
    .blog-area .blog-item .blog-inner-bottom span a { margin-top: 12px; }
    .blog-inner-top h3, .blog-inner-bottom p { padding-right: 0; }
}



.blog-single-page-content { padding: 60px 0; }
    .blog-single-page-content .single-blog-post-content .content { padding: 20px; border: 1px solid #eee; }
        .blog-single-page-content .single-blog-post-content .content h4 { text-align: center; margin: 0 0 10px 0; font-size: 18px; }
        .blog-single-page-content .single-blog-post-content .content p { color: #666; font-size: 15px; font-weight: 300; }
        .blog-single-page-content .single-blog-post-content .content .blog-line { height: 1px; background: #eee; width: 80%; margin: 0 auto; margin: 5px 0 10px; }
        .blog-single-page-content .single-blog-post-content .content .blog-icon { text-align: center; }
            .blog-single-page-content .single-blog-post-content .content .blog-icon span { color: #888; margin: 0 10px; display: inline-block; }
                .blog-single-page-content .single-blog-post-content .content .blog-icon span a { color: #888; }
                    .blog-single-page-content .single-blog-post-content .content .blog-icon span a:hover { color: #D51a31; }



.details-footer { margin-top: 15px; font-size: 14px; }
.details-footer-left { float: left; }
.details-footer-right { float: right; }
.details-footer a { color: #888; display: inline-block; }
    .details-footer a span { display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
    .details-footer a:hover { color: #D51a31; }



.human-resources { padding: 60px 0; }
    .human-resources p { font-size: 16px; font-weight: 300; color: #666; }
    .human-resources .human-top { display: flex; flex-flow: wrap; }
    .human-resources .human-top-img { flex: 0 0 60%; box-shadow: 2px 2px 10px rgba(0,0,0,0.3); }
    .human-resources .human-top p { flex: auto; padding-left: 30px; margin-top: 20px; }

    .human-resources .human-bottom { display: flex; transform: translateY(-50px); flex-flow: wrap; }
    .human-resources .human-bottom-img { flex: 0 0 50%; border: 10px solid #fff; box-shadow: 2px 2px 10px rgba(0,0,0,0.3); }
    .human-resources .human-bottom p { flex: auto; padding-right: 30px; margin-top: 80px; }

/* 7. Contact */
.contact-page { padding-top: 50px; padding-bottom: 50px; }
    .contact-page .contact_address { border: 1px solid #ddd; padding: 20px; }

.contact-feedback-block input { height: 60px; display: block; overflow: hidden; }
.contact-page textarea:focus,
.contact-page input:focus { border-color: #D51a31; box-shadow: none; }

.contact-page .contact_address .title-1 h1 { font-size: 24px; font-weight: 500; line-height: 40px; color: #D51a31; margin: 0; }
.contact-page .contact_address .contact-media { padding: 8px 0; }
    .contact-page .contact_address .contact-media i { border: 1px solid #D51a31; font-size: 20px; border-radius: 50%; width: 35px; height: 35px; text-align: center; line-height: 35px; color: #D51a31; margin-right: 12px; }
.contact-page .contact_address .border-bottom { border-bottom: 1px solid #eee; align-items: center; }
    .contact-page .contact_address .border-bottom .media-body { font-size: 14px; font-weight: 400; color: #666;    line-height: 1.2; }
.contact-page .media-body h5 { font-size: 16px; color: #061538; font-weight: 500; margin: 0; }
.contact-page .contact_address .border-bottom .media-body a { color: #D51a31; text-decoration: underline; }


.form-title h3 { font-size: 24px; font-weight: 500; line-height: 40px; color: #D51a31; margin: 20px 0 0 0; text-align: center; }



.china-contact { margin-top: 20px; border-radius: 10px; border: 2px dashed #D51a31; }
    .china-contact h3 { margin: 0; padding: 4px 10px; }
    .china-contact ul { padding: 10px; }
        .china-contact ul li { display: flex; }
            .china-contact ul li span { flex: 0 0 60px; }
            .china-contact ul li p { flex: auto; margin: 0; }
                .china-contact ul li p a { display: block; color: #D51a31; text-decoration: underline; }
.other-contact { background: #D51a31; border-radius: 0 0 10px 10px; padding: 20px; }
    .other-contact h3 { margin: 0; color: #fff; font-weight: 500; }
    .other-contact ul { padding: 10px; color: #fff; }
        .other-contact ul li { display: flex; }
            .other-contact ul li span { flex: 0 0 60px; font-weight: 300; }
            .other-contact ul li p { flex: auto; margin: 0; font-weight: 300; }
                .other-contact ul li p a { display: block; color: #fff; text-decoration: underline; font-weight: 300; }


.organisation { font-weight: 300; }
.b_map { z-index: 1; position: relative; }
.b_map_img { width: 700px; margin: 0 auto; }
.e_map_tags li { z-index: 1; position: absolute; text-align: center; display: block; padding: 2px 10px; font-size: 12px; line-height: 20px; background: #fff; color: #D51a31; font-weight: 500; top: 0px; cursor: pointer; left: 0px; border: 1px solid #bbb; box-shadow: 0 2px 4px #888; border-radius: 2px; }
    .e_map_tags li::after { content: ""; position: absolute; bottom: -5px; left: 24%; width: 8px; height: 8px; transform: rotate(45deg); border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; background: #fff; }
.e_map_tags .m_map1 { top: 19%; left: 50%; }
.e_map_tags .m_map2 { top: 46%; left: 74%; }
.e_map_tags .m_map3 { top: 33%; left: 55%; }
.e_map_tags .m_map4 { top: 37%; left: 69%; }
.e_map_tags .m_map5 { top: 10%; left: 40%; }
.e_map_tags .m_map6 { top: 26%; left: 70%; }

.e_map_tags li.hover, .e_map_tags .centers { background: #D51a31; color: #fff;; border-color: #D51a31; }
    .e_map_tags li.hover::after, .e_map_tags .centers::after { background: #D51a31; border-color: #D51a31; }

.e_map_info { min-height: 240px; }
    .e_map_info .m_content { z-index: 1; border: #ccc 1px solid; padding: 15px 20px; background-color: #fff; display: block; }
    .e_map_info .hide { display: none; }

    .e_map_info .m_content h4 { padding-left: 180px; font-size: 16px; margin-bottom: 18px; background: url(../images/map_qunar.jpg) no-repeat 0px 0px; height: 50px; }
    .e_map_info .m_content h5 { text-align: center; margin-top: 0; font-size: 16px; padding: 0 20px; margin-bottom: 9px; }
    .e_map_info .m_content p { font-size: 14px; line-height: 22px; }
    .e_map_info .m_content ul { display: flex; flex-flow: wrap; }
        .e_map_info .m_content ul li { flex: 0 0 50%; display: flex; margin: 5px 0; }
            .e_map_info .m_content ul li.li-100 { flex: 0 0 100%; }
            .e_map_info .m_content ul li span:first-child { flex: 0 0 60px; }
            .e_map_info .m_content ul li span:last-child { flex: auto; }
                .e_map_info .m_content ul li span:last-child a { text-decoration: underline; color: #D51a31; }
    .e_map_info .m_content .more { color: #0589CA; }

.m_content_side { height: 1px; width: 100%; position: relative; }
    .m_content_side a { position: absolute; top: 0; z-index: 2; float: left; width: 30px; height: 30px; text-align: center; }
        .m_content_side a i { line-height: 30px; }
        .m_content_side a img { width: 30px; height: 30px; }
        .m_content_side a.m_left { left: 0px; }
        .m_content_side a.m_right { right: 0; }



.distributor { padding: 60px 0; }

    .distributor h4 { color: #D51a31; }



.pagination { margin: 18px 0; justify-content: center;width:100%;text-align:center; }
    .pagination ul { display: inline-block; *display: inline; *zoom: 1; margin-left: 0; margin-bottom: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
        .pagination ul > li { display: inline; }
            .pagination ul > li > a, .pagination ul > li > span { float: left; padding: 4px 12px; line-height: 18px; text-decoration: none; background-color: #fff; border: 1px solid #ddd; border-left-width: 0; }
                .pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span { background-color: #f5f5f5; }
        .pagination ul > .active > a, .pagination ul > .active > span { color: #999; cursor: default; }
        .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus { color: #999; background-color: transparent; cursor: default; }
        .pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-left-width: 1px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; }
        .pagination ul > li:last-child > a, .pagination ul > li:last-child > span { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px; }
.pagination-centered { text-align: center; }
.pagination-right { text-align: right; }
.pagination-large ul > li > a, .pagination-large ul > li > span { padding: 11px 19px; font-size: 17.5px; }
.pagination-large ul > li:first-child > a, .pagination-large ul > li:first-child > span { -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; }
.pagination-large ul > li:last-child > a, .pagination-large ul > li:last-child > span { -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; border-bottom-right-radius: 6px; }
.pagination-mini ul > li:first-child > a, .pagination-mini ul > li:first-child > span, .pagination-small ul > li:first-child > a, .pagination-small ul > li:first-child > span { -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; }
.pagination-mini ul > li:last-child > a, .pagination-mini ul > li:last-child > span, .pagination-small ul > li:last-child > a, .pagination-small ul > li:last-child > span { -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; }
.pagination-small ul > li > a, .pagination-small ul > li > span { padding: 2px 10px; font-size: 11.9px; }
.pagination-mini ul > li > a, .pagination-mini ul > li > span { padding: 0 6px; font-size: 10.5px; }
.pager { margin: 18px 0; list-style: none; text-align: center; *zoom: 1; }
    .pager:before, .pager:after { display: table; content: ""; line-height: 0; }
    .pager:after { clear: both; }
    .pager li { display: inline; }
        .pager li > a, .pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
            .pager li > a:hover, .pager li > a:focus { text-decoration: none; background-color: #f5f5f5; }
    .pager .next > a, .pager .next > span { float: right; }
    .pager .previous > a, .pager .previous > span { float: left; }
    .pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span { color: #999; background-color: #fff; cursor: default; }


.pagination__posts ul { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
    .pagination__posts ul li a { margin: 0 2px 4px; padding: 4px 10px; color: #565656; border: 1px solid #e4e4e4 !important; -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; border-radius: 4px !important; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
        .pagination__posts ul li a:hover, .pagination__posts ul li a:focus { color: #fff; background: #D51a31; border-color: #D51a31 !important; }
    .pagination__posts ul .active a { color: #fff; background: #ff543e; border-color: #ff543e !important; }



.down-inner-box { margin-bottom: 30px; display: flex; flex-flow: wrap; }
.down-inner-box-img { flex: 0 0 50%; padding-right: 15px; }
    .down-inner-box-img img { }
.down-inner-box-content { flex: 0 0 50%; display: flex; justify-content: space-between; flex-flow: column; }
    .down-inner-box-content h4 { font-size: 16px; font-weight: 400; color: #999; }
    .down-inner-box-content .down-inner-btn a { font-size: 13px; color: #fff; font-weight: 400; display: block; background: #D51a31; border-radius: 10px; text-align: center; padding: 8px 0; box-shadow: inset 2px 3px 5px 0 rgba(255,255,255,0.2), inset 0 0 3px 0 rgba(0,0,0,.2), inset -4px -3px 5px 0 rgba(0,0,0,.1), 1px 2px 5px 0 rgba(0,0,0,.3); }

        .down-inner-box-content .down-inner-btn a.down-more { background: #888; margin-bottom: 10px; }


        .workshop-box { margin-bottom: 30px; }
    .workshop-box h2 { padding: 10px 0; font-size: 16px; font-weight: 500; text-align: center; color: #222; }
.workshop-box-img { overflow: hidden; position: relative; box-shadow: 0 4px 10px #666; }
    .workshop-box-img img { transition: 424ms linear; }
    .workshop-box-img mark { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(213,26,49,0.3); z-index: 20; transform: skewX(45deg); visibility: hidden; transition: 360ms; }
        .workshop-box-img mark:after { content: ""; width: 0%; height: 100%; border-top: 3px solid #D51a31; border-bottom: 3px solid #D51a31; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; }
        .workshop-box-img mark:before { content: ""; width: 100%; height: 0%; border-left: 3px solid #D51a31; border-right: 3px solid #D51a31; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; }
        .workshop-box-img mark b { display: block; width: 46px; height: 46px; position: absolute; left: 50%; top: 50%; margin-left: -23px; margin-top: -23px; z-index: 30; }
            .workshop-box-img mark b:after { content: ""; width: 2px; height: 100%; background: #fff; position: absolute; left: 23px; top: 0; transform: translateY(-200px); -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); }
            .workshop-box-img mark b:before { content: ""; width: 100%; height: 2px; background: #fff; position: absolute; left: 0; top: 23px; transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); }

.workshop-box:hover .workshop-box-img img { transform: scale(1.1); }
.workshop-box:hover .workshop-box-img mark { opacity: 1; transform: skewX(0); visibility: visible; }
    .workshop-box:hover .workshop-box-img mark:before { height: 100%; transition: 330ms 200ms; }
    .workshop-box:hover .workshop-box-img mark:after { width: 100%; transition: 330ms 200ms; }
    .workshop-box:hover .workshop-box-img mark b:before { transition: 355ms 180ms; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); }
    .workshop-box:hover .workshop-box-img mark b:after { transition: 355ms 240ms; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); }


.nav-bar-close { display: none; }
.down-btn { display: none; }

@media (min-width: 768px) {
    .hidden-lg { display: none !important; }
}

@media (max-width: 767px) {
    .hidden-xs { display: none !important; }
    .site-header .top-logo { flex: 0 0 130px; }
    .header-logo p { margin-top: 0; }
        .header-logo p:before { border-left: 120px solid transparent; border-right: 0px solid transparent; border-bottom: 15px solid #fff; }
    .main-content { padding-bottom: 0; }

    .goods-slider .owl-nav button.owl-prev { left: -20px; }
    .goods-slider .owl-nav button.owl-next { right: -20px; }
    .site-nav { float: none; background: #212121; margin-top: 60px; }
        .site-nav li .nav-down { display: none; }
            .site-nav li .nav-down .nav-down-list ul.product-box li a .product-box-img { display: none; }
            .site-nav li .nav-down .nav-down-list h3 { display: none; }
        .site-nav > li { position: relative; }
            .site-nav > li > a { border-bottom: 1px solid #707070; }
            .site-nav > li > div { border-bottom: 1px solid #707070; background: #3d3d3d; }
    .down-btn { display: block; position: absolute; right: 0; top: 0; width: 42px; height: 42px; color: #fff; text-align: center; line-height: 42px; border-left: 1px solid #707070; }
    .nav-btn { color: #fff; margin: 15px 0; line-height: 0; text-align: right; }
        .nav-btn i { font-size: 40px; }
    .nav-bar-close { display: block; position: absolute; top: 0; right: 10px; font-size: 36px; color: #fff; }
    #company-video { margin-bottom: 20px; }
    .sidebar-title h3 span { padding: 40px 0 20px; }
    .sidebar ul li a { padding: 5px 0; }
    .sidebar ul { padding: 0px 0 30px; }
    .about-inner { margin-top: 0px; }
        .about-inner .inner-title span { font-size: 0; }
    .about-content .about-bellows { border: none; }
        .about-content .about-bellows:nth-child(2n+1), .about-content .about-bellows:nth-child(2n) { margin-left: 0; margin-right: 0; padding: 30px 0; }
        .about-content .about-bellows .about-bellows-title { width: 100%; }
    .down-inner-box-img { flex: 0 0 100%; padding-right: 0; margin-bottom: 10px; }
    .down-inner-box-content { flex: 0 0 100%; }
    .goods-tab ul li { flex: 0 0 100%; }
        .goods-tab ul li a { display: inline-block; width: 200px; }
    .goods-list-ul li { flex: 0 0 50%; }

    .product-list-box { flex-flow: wrap; margin-top: 30px; }
    .product-list-box-img { flex: 0 0 100%; }
    .product-list .product-list-box:nth-child(2n) .product-list-box-inner, .product-list-box-inner { margin: 0; padding: 20px; margin-bottom: 0; transform: translateX(0); }
    .product-list .product-list-box:nth-child(2n) { flex-flow: wrap row; }
    .goods-category ul { width: 100%; justify-content: center; }
        .goods-category ul a { margin-bottom: 30px; }
            .goods-category ul a h3 { text-align: center; }
    .human-resources .human-top-img { flex: 0 0 100%; }
    .human-resources .human-bottom-img { flex: 0 0 100%; }
    .chairman { border: 4px solid #e7e4e7; padding: 0 15px 15px 15px; margin: 0; }
    .chairman-title h3 { display: none; }
    .goods-category ul > a { margin: 0 0 30px 0; width: 302px; height: 302px; }
    .goods-category li { width: 300px; height: 300px; }
    #counter_up{display: none;}
    .footer-contact{flex:0 0 100%;}
    .footer-contact:after{display:none;}
    .footer-link{display: none;}
     .footer-img{display: none;}
}

.language{margin-left:15px;}
.language li{display:inline-block;margin-right:7px;}
.language li img{max-width:30px;}
.contact-inner
{
    position: fixed;
    right: 0;
    z-index: 999; 
    width: 480px;
    bottom: 0;
    background: #fff url(../images/contact-fixed.png) no-repeat right top;
    transition: 1s;
    -webkit-transition: 1s;
    padding: 25px 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    visibility: hidden;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.5s;}
.contact-inner.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.contact-inner i {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #222;
    font-size: 18px;
    cursor: pointer;
}
.contact-inner-tel{border-bottom: 1px solid #b7b7b7;}
.fixed-sns{position: fixed;right: 20px;bottom: 90px;z-index: 1030;}
.fixed-sns li{position:relative;height: 50px;width: 50px;text-align:center;line-height:50px;background:rgb(128,214,63);font-size: 22px;color:#fff;border-radius: 5px;margin-top: 10px;}
.fixed-sns li a{position: absolute;width: 150px;height: 150px;left: -170px;top: -50px;padding:  10px;background: #fff;border-radius: 10px;border:1px solid #ccc;transform: scaleY(0);transition:all 0.3s;}
.fixed-sns li:hover a{transform:scaleY(1);}
.fixed-sns li a:before{content:"";position:absolute;width: 16px;height: 16px;background:#fff;top: 50%;right: -8px;x;border-color: #ccc #ccc transparent transparent;transform: translateY(-50%) rotate(45deg);border-width: 1px;border-style: solid;}