/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/

html,
body {
    font-family: "微軟正黑體";
    font-size: 100%;
    overflow-x: hidden;
	background:#f5f7f8;
}

body a {
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
	font-weight: 600;
    /*font-family: 'Raleway', sans-serif;*/
    font-family: '微軟正黑體';
}

/*p {
    line-height: 1.8;
    font-size: 15px;
    color: #333;
    letter-spacing: 0.5px;
}*/

p {
    line-height: 1.8;
    font-size: 16px;
    color: #333;
    letter-spacing: 0.5px;
}

.m2 {
    margin-left: 15px;
}


ul {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

body a:hover {
    text-decoration: none;
}


.p-ban .p-ban-pic img {
    position: relative;
    width: 1936px;
    max-width: none;
    height: 270px;
    left: 50%;
    margin-left: -968px;
}

#page-title.overview {
    padding: 25px 0;
    /*padding: 181px 0;*/
}

#page-title {
    padding: 131px 0;
    background-repeat: no-repeat;
    background-color: #FFF;
}

#page-title h1, .breadcrumb a, .breadcrumb > .active, .breadcrumb > li + li:before {
    color: #FFFFFF;
    text-shadow: 2px 2px 4px #12070f;
    /*margin-left: 20px;*/
}

.breadcrumb > .active {
    /*color: #777777;*/
}

.breadcrumb > li {
    display: inline-block;
}

/*.icon-contact-man {
    background-image: url(css-img/icon-contact-man.png);
}

.corporate-icon-contact {
    padding-left: 100px;
    background-repeat: no-repeat;
    background-position: 25px center;
    height: 100px;
}

.corporate-content-grey {
    background-color: #f2f2f2;
    padding: 15px;
}
*/

/* category */

/*.category {
    text-align: center;
}*/

.interIm {
    width: 50%;
    font-size: 14px;
    line-height: 50px;
    border: 1px solid #d0d0d0;
    padding: 34px 47px;
}

.category {
    margin-top: 5px;
    margin-bottom: 50px;
}

.category {
    text-align: center;
    margin-top: 40px;
}

.category a:hover, .category a.active {
    background-color: #f03940;
    color: #FFF;
}


.category a {
    display: inline-block;
    padding: 0 15px;
    height: 47px;
    line-height: 47px;
    color: #333;
    background-color: #e0e0e0;
    border-radius: 2px;
    /*margin: 0 3px;*/
    margin: 3px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 19px;
}

/* banner */

/* header */
.logo {
    display: block;
    float: left;
    /*width: 135px;*/
    width: 100%;
    /*height: 36px;*/
    font-size: 0;
    background: url(../images/logo.jpg) no-repeat;
}

.navbar-light .navbar-brand {
    font-size: 1em;
    color: #000;
}

header h1 a span {
    color: #fff;
    display: block;
    font-size: 12px;
    letter-spacing: 5px;
    word-spacing: 5px;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 500;
    text-transform: capitalize;
    color: #000;
    letter-spacing: 1px;
    border-bottom: 1.5px solid #fff;
    font-weight: bold;
    font-size: 19px;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
    color: #f03940;
    border-bottom: 1.5px solid #f03940;
    font-size: 19px;
}

.w3ls-btn {
    letter-spacing: 1px;
    font-weight: 600;
}

/*footer*/

/*footer .bottomArea {
    background: #2e363a;
    color: #fff;
    padding: 80px 0 50px;
}

footer .social b {
    display: block;
    font-size: 15px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    margin-bottom: 30px;
}

ol, ul {
    list-style: none;
}

.wrap {
    width: 1160px;
    margin: 0 auto;
}

footer .leftBox li {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
    width: calc(100% / 7);
    padding-right: 12px;
    box-sizing: border-box;
}

footer .rightBox {
    float: left;
    width: 260px;
}

footer .social {
    width: 100%;
    border-bottom: 1px solid #3c4448;
    padding-bottom: 35px;
    margin-bottom: 20px;
}*/

/*footer end*/

/*-- //header --*/
/* -- TOP HEADER */
.top-middle li {
    display: inline-block;
}
.top .top-middle, .top .top-right {
    padding: 0px;
}
.top .top-left {
    padding: 4px 0 0;
    text-align: right;
}
.top-left li {
    display: inline-block;
	color:#fff;
    margin-right: 0em;
    letter-spacing: 1px;
}
.top {
    padding: 10px 0;
    background: #f03940;
}
.top-middle {
    text-align: left;
}
.top-left p{
	color:#fff;
    font-size: 16px;
    margin-top: 3px;
}
.top-left i.fab fa {
    margin-right: 2px;
    color: #ffffff;
    font-size: 20px;
}

.top-middle li {
    margin-right: 15px;
}
.top-middle i.fab.fa-facebook-f {
    font-size: 16px;
    text-align: center;
    line-height: 29px;
    width: 30px;
    height: 30px;
}
.top-middle i.fab.fa-facebook-f:hover {
    color: #527dbd;
}
.top-middle i.fab.fa-twitter {
    font-size: 16px;
    text-align: center;
    line-height: 29px;
    width: 30px;
    height: 30px;
}
.top-middle i.fab.fa-twitter:hover {
    color: #1da1f2;
}
.top-middle i.fab.fa-google-plus-g {
    font-size: 16px;
    text-align: center;
    line-height: 29px;
    width: 30px;
    height: 30px;
}
.top-middle i.fab.fa-google-plus-g:hover {
    color: #dd4b39;
}
.top-middle i.fab.fa-linkedin-in {
    font-size: 16px;
    text-align: center;
    line-height: 29px;
    width: 30px;
    height: 30px;
}
.top-middle i.fab.fa-linkedin-in:hover {
    color: #0077b5;
}
.top-middle  i.fab {
	color: #fff;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
.t-op.row {
    margin: 0;
}
/* -- //TOP HEADER */ 
.navbar {
    padding: 0.5rem 0.5rem;
}
/* banner */

.bg1 {
    background: url(../images/bg2.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw;
}

.bg2 {
    background: url(../images/bg3.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw;
}

.bg3 {
    background: url(../images/bg.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw !important;
}
.bg4 {
    background: url(../images/index_bg.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw !important;
}
.bg5 {
    background: url(../images/index_bg1.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw !important;
}
.bg6 {
    background: url(../images/index_bg2.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw !important;
}
.bg7 {
    background: url(../images/index_bg3.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw !important;
}
.bg8 {
    background: url(../images/index_bg4.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw !important;
}
.bg9 {
    background: url(../images/index_bg5.jpg)no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    height: 45vw !important;
}
.banner-text {
    padding: 30vw 0 0;
}
h4.agile-title {
    color: #fff;
    font-size: 2.8em;
    margin: 0 0 0 20px;
    /*text-shadow: 3px 1px 1px #000;*/
    font-weight: 600;
    /*line-height: 1.5em;*/
    letter-spacing: 2px;
    width: 57%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f03940+0,f03940+50,f03940+100&1+0,0.6+50,0+100 */
    background: -moz-linear-gradient(left, rgba(240,57,64,1) 0%, rgba(240,57,64,0.6) 50%, rgba(240,57,64,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(240,57,64,1) 0%,rgba(240,57,64,0.6) 50%,rgba(240,57,64,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(240,57,64,1) 0%,rgba(240,57,64,0.6) 50%,rgba(240,57,64,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f03940', endColorstr='#00f03940',GradientType=1 ); /* IE6-9 */
}
/*-- text Slider --*/

#slider {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0 auto;
}

.rslides_tabs {
    list-style: none;
    padding: 0;
    background: rgba(0, 0, 0, .25);
    box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
    -moz-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
    font-size: 18px;
    list-style: none;
    margin: 0 auto 50px;
    max-width: 540px;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}

.rslides_tabs li {
    display: inline;
    float: none;
    margin-right: 1px;
}

.rslides_tabs a {
    width: auto;
    line-height: 20px;
    padding: 9px 20px;
    height: auto;
    background: transparent;
    display: inline;
}

.rslides_tabs li:first-child {
    margin-left: 0;
}

.rslides_tabs .rslides_here a {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: bold;
}

.events {
    list-style: none;
}

.callbacks_container {
    position: relative;
}

.callbacks li {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.callbacks_tabs li {
    display: block;
    margin: 0.5em 0;
}

.callbacks_tabs a {
    height: 12px;
    width: 12px;
    display: inline-block;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: relative;
    font-size: 0;
}

.callbacks_tabs a:after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid white;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    top: -5px;
    left: -5px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    transition: .5s all;
}

.callbacks_here a:after {
    border-color: #fff;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -ms-transform: scale(1);
}

/*
.callbacks_nav {
	position: absolute;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	top: 78%;
	opacity: 0.7;
	z-index: 3;
	text-indent: -9999px;
	overflow: hidden;
	text-decoration: none;
	height: 34px;
	width: 34px;
	background: url("../images/left.png") no-repeat 0px 0px;
}
.callbacks_nav.prev {
	left: auto;
	background: url("../images/back.png") no-repeat 0px 0px;
	left: 18em;
}
.callbacks_nav.next {
	left: auto;
	background: url("../images/next.png") no-repeat 0px 0px;
	right: 18em;
}
.callbacks_nav:active {
	opacity: 1.0;
}
.callbacks2_nav:active {
	opacity: 1.0;
}*/

#slider-pager a {
    display: inline-block;
}

#slider-pager span {
    float: left;
}

#slider-pager span {
    width: 100px;
    height: 15px;
    background: #fff;
    display: inline-block;
    border-radius: 30em;
    opacity: 0.6;
}

#slider-pager .rslides_here a {
    background: #FFF;
    border-radius: 30em;
    opacity: 1;
}

#slider-pager a {
    padding: 0;
}

#slider-pager li {
    display: inline-block;
}

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    left: 0%;
    top: 0;
    width: 100%;
}

.rslides li {
    position: relative;
    display: block;
    float: none;
}

.rslides img {
    height: auto;
    border: 0;
}

.callbacks_tabs li {
    display: inline-block;
}

.callbacks li {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.callbacks_tabs li {
    display: inline-block;
    margin: 0 0.5em;
}

.callbacks_tabs a {
    height: 12px;
    width: 12px;
    display: inline-block;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: relative;
    font-size: 0;
}

.callbacks_tabs a:after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid white;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    top: -5px;
    left: -5px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    transition: .5s all;
}

.callbacks_here a:after {
    border-color: #fff;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -ms-transform: scale(1);
}

p.sub-para {
    font-size: 18px;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 300;
}

.callbacks_tabs {
    list-style: none;
    position: absolute;
    right: 50px;
    bottom: 20px;
    z-index: 2;
    border-radius: 5px;
}

.slider-top span {
    font-weight: 600;
}
.slider-info p {
    font-size: 15px;
    letter-spacing: 1px;
    margin-top: 1em;
    text-transform: capitalize;
    width: 66%;
}

.slider-info a {
    color: #f9f9f9;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 2px 1px 1px #000;
}

/* //text slider */

/* //banner */

.new_top i {
    font-size: 30px;
    color: #f03940;
}
.new_top h3 {
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 600;
    line-height: 1.4em;
    color: #000000;
}
.new_top p {
    /*font-size: 15px;*/
    font-size: 18px;
    line-height: 1.8em;
    color: #777;
}
.new_top {
    padding: 55px 40px;
    -webkit-box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
    background: #fff;
}
/*-- details --*/
h3.w3ls-title {
    font-size: 2.7em;
    color: #000;
}
.card.w3l-acd:nth-child(2) {
    margin: 1em 0;
}
span.fa.fa-check.mr-2 {
    color: #f03940;
}
.card-header {
    padding: 0.4rem 1.25rem;
}
button.btn.btn-link {
    color: #000;
    letter-spacing: 2px;
    font-weight: 600;
}
button.btn.btn-link:hover{
	text-decoration:none;
}
/*-- //details --*/
/*-- stats --*/
.w3layouts_stats_left {
    padding: 0;
    text-align: center;
}
.w3layouts_stats_left p {
    font-size: 3.5em;
    font-weight: 500;
    letter-spacing: 2px;
    color: #f03940;
    margin: 0 0 0.2em 0;
}
.w3layouts_stats_left h3 {
    font-size: 18px;
    color: #000;
    letter-spacing: 1px;
}
.inner_w3l_agile_grids-1 h6 {
    font-size: 15px;
    margin-top: 0.8em;
    color: #000;
}
section.stats h4 {
    font-size: 40px;
    width: 65%;
    text-align: center;
	line-height: 1.2em;
    margin: 0 auto;
    color: #2c363e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
}
p.stap {
    font-size: 15px;
    color: #000;
    margin: 1em 0 5em;
    text-align: center;
}
/*-- //stats --*/
/* video popup */

.pop-bg {
    background: url(../images/bg3.jpg)no-repeat center;
    background-size: cover;
    min-height: 35vw;
}

.button {
    padding: 8em 0em 0em;
}

.button a {
    padding: 10px 22px;
    display: inline-block;
    background: rgba(48, 42, 42, 0.85);
    border-radius: 11px;
    color: #ffffff;
    outline: none;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.button span {
    font-size: 20px;
    vertical-align: middle;
}

.pop-bg2 .button {
    padding-top: 17em;
}

.demo-left iframe {
    width: 100%;
    border: none;
}

.small-demo iframe {
    min-height: 196px;
}

.video-grid1 {
    padding: 0;
}

.pop-row2 {
    margin: 1.5em 0;
}

.pop-row2-middle {
    margin: 0 1.2em;
}

.poprow-3 {
    margin-right: 1.2em;
}

.popl-row {
    margin-top: 1.5em;
}

h3.video-txt {
    color: #000;
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.5;
}

p.video-p-agileinfo {
    letter-spacing: 0.3px;
}

.img-caption {
    background: #ededed;
    padding: 1em;
}

.img-caption p.video-p-agileinfo {
    letter-spacing: 0.3px;
    font-size: 0.9em;
}

/* //video popup */

arrow-container,
.arrow-1 {
    width: 100px;
    height: 100px;
}

.arrow-container {
    position: absolute;
    bottom: 25px;
    left: 47%;
    right: 0;
    top: 42%;
}

.arrow-1 {
    background:transparent;
    opacity: 0.5;
    border-radius: 50%;
    position: absolute;
}

.arrow-2 {
    width: 60px;
    height: 60px;
    background:#f03940;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    display: table;
}

.arrow-2:focus {
    text-decoration: none;
}

.arrow-2:before {
    width: 52px;
    height: 52px;
    content: "";
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
}

.arrow-2 i.fa {
    font-size: 1.2em;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
}
/* testimonials */

.carousel-indicators .active {
    background: #f03940;
}

.content {
    margin-top: 20px;
}

.adjust1 {
    float: left;
    margin-bottom: 0;
    border: none;
}

.adjust2 {
    margin: 0;
}

.carousel-indicators li {
    background: #000;
	cursor:pointer;
}

.carousel-control {
    color: #fff;
    bottom: 0;
}

.carousel-control:hover,
.carousel-control:focus {
    color: #fff;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

.media-object {
    margin: auto;
    margin-top: 1em;
    border-radius: 50%;
}
.adjust1 {
    margin-bottom: 2px;
    border: 0;
    background: #ffffff;
    box-shadow: 0 0 29px 0 rgba(41, 41, 41, 0.19);
    padding: 48px 48px 65px;
}
@media screen and (max-width: 768px) {
    .media-object {
        margin-top: 0;
    }
}


/* //testimonials */

p.Lor {
    font-size: 15px;
    color: #777;
    line-height: 1.8em;
}
/*-- testimonials --*/
.about-right h4 {
    font-size: 24px;
    font-weight: 600;
    color:#131212;
}
.testi-text {
    position: relative;
    /*padding: 24px;*/
}

.fone {
    margin-top: 30px;
}
.carousel-control .active {
    background: #31708f;
}
.adjust1 p {
    color: #777;
    line-height: 1.8em;
    text-align: left;
    font-size: 16px;
    /*font-size: 18px;*/
    letter-spacing: 1px;
}

.testi-left .carousel-control.left,
.testi-left .carousel-control.right {
    width: 19px;
    height: 19px;
}

.testi-text1:before {
    border-left: 10px solid #ad1a0a;
    border-right: none !important;
    left: auto !important;
    right: -3% !important;
}
.testi-text h4 {
    font-size: 1.3em;
    color: #f03940;
    line-height: 1.5em;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: left;
}
.caption.testi-text span {
    font-size: 1.2em;
    margin-right: 10px;
    color: #777;
}

.testi-text h5 {
    font-size: 1em;
    color: #000 ;
    line-height: 1.5em;
    font-weight: 600;
	letter-spacing:2px;
    text-align: left;
}

.testi-left {
    width: 89%;
    margin: 0 auto;
    position: relative;
}
/*-- //testimonials --*/
.stats1 {
    background: #ffffff;
    box-shadow: 0 0 29px 0 rgba(41, 41, 41, 0.19);
    padding: 57px;
}
.features{
     /*background: url(../images/bg2.jpg)no-repeat center;*/
     background: url()no-repeat center;
	 background-size:cover;
}
.row.stats_inner.top-st {
    border-top: 1px solid #e8e8e8;
}
.stat-grids:nth-child(1){
    border-right: 1px solid #e8e8e8;
}
.heading-agileinfo {
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 40px;
    text-align: center;
    color: #000;
    text-transform: capitalize;
    position: relative;
    /*margin-top: 0;*/
     margin-top: 50px;
}

.heading-agileinfo span {
    display: block;
    font-size: 17px!important;
    margin-top: 1em;
    letter-spacing: 4px;
    text-transform: capitalize;
    /*color: #000000;*/
    /*color: #A9A9A9;*/
    color: #FFFFFF;
    font-weight: 500;
    background-color: #f03940;
}
.heading-agileinfo span:after {
    content: '';
    background:#f03940;
    height: 2px;
    width: 70px;
    position: absolute;
    top: 132%;
    right: 47%;
}
/*-- news --*/
h5.card-title {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 1em;
    color: #f03940;
	font-weight: 600;
}
p.card-text {
    color: #777;
    font-size: 15px;
    line-height: 1.8em;
    letter-spacing: 1px;
}
/*-- //card --*/
h4.modal-title {
    font-size: 24px;
    color:#f03940;
    font-weight: 600;
    letter-spacing: 2px;
}
.modal-body p {
    font-size: 15px;
    color: #777;
    line-height: 1.8em;
    padding: 20px 0;
}
/*--news--*/
footer {
	/*background-color: #0e0f10;*/
    background-color: #ebebeb;
    
}

.footer-text a {
    color: #808080;
    text-decoration: none;
    -webkit-transition: all 0.3s 0s ease-in-out;
    line-height: 22px;
}

footer h3{
	/*font-size: 1.5em;*/
    /*font-size: 26px;*/
    font-size: 18px;
	/*color: #ffffff;*/
    /*color: #f03940;*/
    color: #a8272c;
	/*margin-bottom: 20px;*/
    margin-bottom: 5px;
	letter-spacing: 1px;
}

footer p {
    /*color: #bfbfbf;*/
    color: #808080;
    font-size: 15px;
    line-height: 1.8em;
}
footer ul li {
    display: block;
    /*color: #bfbfbf;*/
    color: #808080;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.8em;
    margin: 0.7em 0;
}

footer-list i {
	padding-right: 10px;
	color: #ffa41f;
}

footer ul li a {
	color: #bfbfbf;
	font-size: 13px;
	font-weight: 600;
	display: block;
	padding: 5px 0px;
	text-decoration: none;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

footer ul li a:hover {
	color: #ffa41f;
}

footer ul li.hd {
	color: #f03940 ;
}

.newsletter .email {
	background-color: #F4F4F4;
	border: none;
}

.flickr-grid {
	float: left;
	width: 32%;
	margin: 0 0.1em .2em;
}

.flickr-grid a img {
	width: 100%;
	padding: 0.3em;
	border: 1px solid #333333;
}

.newsletter .email {
	outline: none;
	padding: 13px 15px;
	color: #fff;
	font-size: 14px;
	width: 80%;
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid #2d2d2d;
}

.newsletter {
	position: relative;
	margin-top: 2em;
}

button.btn1 {
	color: #fff;
	border: none;
	padding: 12px 0;
	text-align: center;
	text-decoration: none;
	background: #f03940 ;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	transition: 0.5s all;
	float: right;
	cursor: pointer;
	width: 20%;
}

/*--//footer--*/

/*--/copyright--*/

.copyright ul li {
	display: inline-block;
	padding: 0 10px;
}

a.facebook {
	color: #fff;
	font-size: 16px;
}

a.facebook:hover {
	color: #f03940 ;
}

.copyrighttop {
	float: right;
}

.copyrightbottom {
	float: left;
}

.copyright {
	background: #141415;
	color: #fff;
	border-top: 1px solid rgba(25, 24, 24, 0.58);
}

.copyrightbottom p {
    color: #fff;
    letter-spacing: 1px;
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
}
.copyrightbottom a {
	color: #f03940 ;
	text-decoration: none;
}

.copyrightbottom a:hover {
	color: #fff;
}

.copyrighttop h4 {
	font-size: 0.95em;
}

.banner-1 {
    background: url(../images/g3.jpg)no-repeat;
    height: 18vw;
}

.banner-1 {
    background: url(../images/g3.jpg)no-repeat;
    height: 18vw;
}

.banner-1 {
    background: url(../images/g3.jpg)no-repeat;
    height: 18vw;
}

.banner4 {
    background: url(../images/g3.jpg)no-repeat;
    height: 18vw;
}

.w3layouts_bottom {
    background:url(../images/bg3.jpg) no-repeat 0px 0px;
	text-align: center;
	background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
	padding:6em 0;
}
.w3layouts_getin_info h3 {
    color: #fff;
    letter-spacing: 4px;
    font-size: 36px;
    text-align: left;
}
.w3layouts_getin a {
    font-size: 1em;
    color: #fff;
    background:#f03940;
    padding: 0.7em 2em;
    letter-spacing: 2px;
    display: inline-block;
}
.w3layouts_getin a:hover {
    color: #fff;
    background:#acd422;
}
/*-- welcome --*/
.welcome-left h3 {
    color:#f03940;
    font-size: 36px;
    letter-spacing: 1px;
}
.welcome-left h4 {
    color: #464646;
    font-size: 17px;
    line-height: 1.8;
    margin: 15px 0;
	    font-weight: 700;
    letter-spacing: 1px;
}
.welcome-left p {
    /*font-size: 15px;*/
    font-size: 16px;
    color: #777;
    line-height: 1.8em;
}

.welcome-left2 {
    /*font-size: 15px;*/
    font-size: 16px;
    color: #777;
    line-height: 1.8em;
    padding: 0 15px 15px 15px;
}
/*-- about-team --*/

.thumbnail.team-agileits {
    border: none;
    text-align: center;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.team .effectd-caption {
    padding: 20px;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    transition: .5s all;
}
.team h4 {
    color: #f03940;
    font-size: 22px;
    letter-spacing: 2px;
    font-weight: 600;
}
.social-lsicon a {
    color: #000;
    padding: 0 7px;
    font-size: 16px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.social-lsicon a:hover {
    color: #f03940;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

/*-- //about-team --*/
/*--services --*/
.w3-services{
  padding:5em 0;
}
.w3-services-left-grid h3 {
    color: #fff;
}
.w3-services-left-grid h4 {
    font-size: 1.4em;
    color: #fff;
	margin-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.w3-services-left-grid p, .w3-icon-grid1 p {
    font-size: 15px;
    line-height: 28px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    color: #777;
}
.Supp {
    float: left;
    width: 80%;
    margin-left: 5%;
}
.w3-icon-grid1 i {
    font-size: 16px;
    color: #fff;
    float: left;
    width: 40px;
    height: 40px;
    background:#029EB7;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
}
.w3-icon-grid-gap1:nth-child(2){
    margin: 3em 0;
}
.w3-services-right-grid h3 {
    text-transform: capitalize;
    color: #58575d;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 6px;
    margin-bottom: 15px;
}
.w3-services-left-grid a {
    color: #fff;
    text-transform: capitalize;
    border: 2px solid #fff;
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 1px;
}

.w3-services-left-grid a:hover{
    background: #1cc7d0;
    border: 2px solid #1cc7d0;
}
.more{
	margin:2em 0;
}
.w3-services-right-grid {
    padding-left: 4em;
}
/*-- what we do --*/
.w3l_header {
    text-align: center;
    font-size: 3em;
    color: #2c363e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
}
.wthree_head_section p {
    font-size: 15px;
    text-align: center;
    margin: 20px auto;
    width: 60%;
    color: #5e5e5e;
    line-height: 1.8em;
    letter-spacing: 1px;
}
.wthree_head_section {
    margin-bottom: 5em;
}
.about-info-grids {
    text-align: center;
}
.bord {
    background: #e8e8e8;
    height: 1px;
    width: 75%;
    margin: 3em auto;
}
.about-info.about-info2 {
   border-left: 1px solid #e8e8e8;
   /*border-right: 1px solid #e8e8e8;*/
}
.about-info-grids p {
    font-size: 15px;
    margin:0;
    color: #777;
    font-weight: 400;
	line-height:1.8em;
}
.about-info-grids h4 {
    font-size: 22px;
    color: #151515;
    letter-spacing: .075em;
    font-weight: 600;
    text-transform: capitalize;
    margin: 20px 0;
}
.about-info-grids i {
    font-size: 36px;
    color: #f03940;
}
/*-- //what we do --*/
.w3_agileits_header.two {
    color: #fff;
}
/*-- //services --*/
/*--gallery--*/
.gallery-grids {
	padding:5px;
}
.gallery-box {
    display: block;
    overflow: hidden;
    width: 100%;
	transition: .3s;
	-webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
}
/*--image-zoom--*/
img.zoom-img {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -ms-transition-duration: .5s;
    -o-transition-duration: .5s;
}
img.zoom-img:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-duration: 750ms;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-duration: 750ms;
    -ms-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -ms-transition-duration: 750ms;
    -o-transition-duration: 750ms;
    overflow: hidden;
}

/*table*/

@charset "utf-8";.gWrap {
    width: 100%;
    background: #fff;
    overflow: hidden
}

#header {
    width: 100%;
    background: #fff;
    position: relative
}

#header>.container-fluid {
    padding: 0
}

#header .header-top {
    background: #22aee9
}

.topIcon {
    background: ;
    height: 38px;
    float: right
}

.topIcon li {
    float: left;
    height: 38px;
    border-right: 1px solid rgba(255,255,255,0.5);
    padding: 0 21px
}

.topIcon li a {
    color: #fff;
    line-height: 38px;
    width: 100%;
    text-decoration: none
}

.topIcon li a .fa {
    margin: 10px
}

.topIcon li a img {
    vertical-align: middle;
    margin-right: 10px
}

.topIcon .wrap {
    position: relative;
    margin: 0 6px 0 0
}

.topIcon .wrap .lang {
    cursor: pointer
}

.topIcon .wrap .lang #panel {
    position: absolute;
    width: 150px;
    z-index: 10;
    top: 37px;
    right: -11px;
    border: #e5e4e4 solid 1px;
    background-color: #fff;
    display: none;
    overflow: hidden
}

.topIcon .wrap .lang #panel a {
    display: block;
    padding: 3px 0 3px 10px;
    text-align: left;
    line-height: 22px;
    color: #666;
    text-align: center
}

.topIcon .wrap .lang #panel a:hover {
    color: #000;
    background: #efefef
}

#header {
    position: fixed;
    z-index: 3;
    height: 88px
}

footer {
    width: 100%;
    /*background: #17a8e5;*/
    padding-top: 20px
}

footer a {
    color: #fff
}

footer .ti {
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff
}

footer .ulSet {
    list-style: none;
    margin: 0 0 35px 0;
    padding: 0
}

footer .ulSet a {
    color: #a8e1ff;
    font-size: .9em
}

.blueBg {
    background: #fff;
    font-size: .9em;
    padding: 16px 0 10px;
    color: #666;
    line-height: 30px;
    margin-top: 40px
}

.share {
    float: right;
    display: block;
    width: 110px;
    height: 70px;
    color: #9C9C9C;
    line-height: 70px;
    margin-top: 17px;
    margin-right: 23px
}

.share .fa {
    font-size: 1.6em;
    margin-right: 10px;
    vertical-align: middle
}

.share:hover {
    color: #17a8e5
}

footer .copyright {
    text-align: right;
    line-height: 38px;
    font-size: .9em
}

footer .fa {
    padding: 0 8px 0 0;
    font-size: 1.6em
}

footer span.gap {
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.2);
    margin: 0 15px;
    display: inline-block
}

footer .social {
    text-align: right
}

footer .fb {
    display: inline-block;
    margin: 10px 0
}

footer .box {
    width: auto
}

footer .box:last-child {
    width: 130px;
    margin: 0;
    padding: 0
}

footer .box:last-child a {
    display: block
}

footer .footLogo {
    line-height: 30px
}

footer .footLogo span {
    display: inline-block;
    width: 30%;
    margin: 0 10px 0 0
}

footer .footLogo img {
    line-height: 30px;
    display: inline
}

@media (max-width: 1359px) {
    #header a.share {
        font-size:0;
        width: 30px;
        text-align: center
    }

    #header a.share .fa {
        font-size: 1.6rem
    }

    #header .cd-primary-nav {
        left: 164px
    }

    #header .cd-primary-nav >.has-children >a {
        padding: 0
    }
}

@media only screen and (max-width: 1200px) {
    footer .box {
        width:25%
    }
}

@media only screen and (max-width: 1190px) {
    footer>.container {
        width:70%
    }

    footer .box {
        width: 25%
    }
}

@media only screen and (max-width: 1169px) {
    #header>.container {
        padding:0;
        width: 100%
    }

    #cd-primary-nav {
        z-index: 10
    }

    footer .copyright {
        text-align: left
    }
}

@media only screen and (max-width: 992px) {
    footer .box {
        margin:0
    }
    h5 {
        margin-top: 15px;
    }
}

@media only screen and (max-width: 768px) {
    footer .box {
        margin:0
    }
}

@media only screen and (max-width: 680px) {
    .topIcon li {
        padding:0 5px
    }

    .topIcon li a span {
        display: none
    }

    .lan span {
        display: none
    }

    footer .footLogo span {
        display: inline-block;
        width: 21%;
        margin-right: 5px
    }

    footer .social {
        text-align: left
    }

    footer .social .gap {
        margin: 0 5px 0 0
    }
}

#index .banner {
    width: 100%;
    overflow: hidden
}

#index .banner-wrap {
    position: relative;
    width: 992px;
    left: 50%;
    margin-left: -496px
}

#index .banner .bx-wrapper {
    margin: 0
}

#index .banner .bx-wrapper .bx-viewport {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
    left: 0
}

#index .banner .bxslider >div >a {
    display: block;
    position: relative
}

#index .banner .bxslider >div >a .txt {
    position: absolute;
    color: #fff;
    font-size: 2em;
    opacity: 0;
    left: 45%;
    text-align: left;
    transition: all .5s linear;
    -ms-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    box-sizing: border-box;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    width: 45%;
    top: 20%
}

#index .banner .bxslider >div >a .txt.loadin {
    opacity: 1;
    bottom: 40px;
    top: 94px
}

#index .banner .bxslider >div >a .txt.leaveout {
    bottom: 60px;
    opacity: 0
}

#index .banner .bx-wrapper .bx-pager {
    height: 12px;
    bottom: 30px;
    padding: 0
}

#index .banner .bx-wrapper .bx-pager.bx-default-pager a {
    width: 13px;
    position: relative;
    height: 13px;
    border: 1px #fff solid;
    box-sizing: border-box;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    background: none
}

#index .banner .bx-wrapper .bx-pager.bx-default-pager a:hover,#index .banner .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: none
}

#index .banner .bx-wrapper .bx-pager.bx-default-pager a.active:after {
    content: '';
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    background: #FFF;
    top: 3px;
    left: 3px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}

.bx-wrapper .bx-controls-direction a {
    width: 52px;
    height: 52px;
    border-radius: 50px;
    opacity: .8
}

.bx-wrapper .bx-prev {
    left: 1%;
    background: url(../images/i_prev.png) #fff center center no-repeat
}

.bx-wrapper .bx-next {
    right: 1%;
    background: url(../images/i_next.png) #fff center center no-repeat
}

@media (min-width: 992px) {
/*#about .org img {*/

.typo py-5 img {
    margin: 50px auto 20px;
}

.img-responsive {
    display: block;
     max-width: 100%; 
     height: auto; 
    margin: auto;
}

.hidden-lg img {
    display: none;
}


    #index .banner-wrap {
        width:1260px;
        margin-left: -630px
    }

    #index .banner .bxslider >div >a .txt {
        bottom: 64px;
        margin-left: 0;
        font-size: 2em;
        padding: 20px 60px 20px 20px;
        font-style: italic;
        text-shadow: 1px 2px 2px rgba(0,0,0,0.3)
    }

    #index .banner .bxslider >div >a .txt.loadin {
    }

    #index .banner .bxslider >div >a .txt.leaveout {
        bottom: 140px
    }

    #index .banner .bxslider >div >a .txt .title {
        line-height: 44px;
        text-decoration: none
    }
}

@media (min-width: 1200px) {
    #index .banner .bxslider >div >a .txt .title {
    }

    #index .banner-wrap {
        width: 100%;
        left: 0;
        margin-left: 0
    }

    #index .banner .bxslider >div >a .txt {
        bottom: auto;
        top: 160px
    }

    #index .banner .bxslider >div >a .txt.loadin {
        bottom: auto;
        top: 120px
    }

    #index .banner .bxslider >div >a .txt.leaveout {
        bottom: auto;
        top: 80px
    }
}

@media (max-width: 992px) {
.typo py-5 img {
    margin: 50px auto 20px;
}

.img-responsive {
    display: block;
     max-width: 100%; 
     height: auto; 
    margin: auto;
}

.hidden-sm img {
    display: none;
}
    
    #index .banner {
        margin-top:80px
    }

    #index .banner .bxslider >div >a .txt {
        left: 30%
    }
}

#iNews {
    margin: 50px auto
}

#iNews .date {
    padding: 0
}

#iNews .day {
    float: left;
    color: #000;
    font-family: arial;
    font-size: 3em;
    margin-right: 2%
}

#iNews .month {
    float: left;
    height: 50px;
    line-height: 11px;
    padding: 27px 0 0;
    color: #888
}

#iNews .month span {
}

#iNews .name {
    padding-left: 0
}

#iNews .name >a {
    padding: 14px 0;
    display: inline-block;
    text-align: left;
    text-decoration: none;
    color: #333;
    height: 70px;
    font-size: .9em
}

#iNews .owl-carousel .owl-item {
    background: url(../images/news_gap.png) 87% center no-repeat;
    margin: 0 30px 0 0
}

#iNews .owl-carousel .owl-item:nth-child(3n) {
    background: none
}

#iNews .owl-dots {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center
}

#iNews .owl-dot {
    text-align: center;
    margin: 0 5px;
    display: inline-block
}

#iNews .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ccc;
    display: inline-block;
    border-radius: 10px
}

#iNews .owl-dot.active span {
    background: #4b4b9f
}

#iNews .owl-nav {
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    font-size: 0
}

#iNews .owl-prev,#iNews .owl-next {
    width: 25px;
    height: 45px;
    position: absolute;
    background: url(../images/left.png) no-repeat
}

#iNews .owl-next {
    right: 0;
    background: url(../images/right.png) no-repeat
}

#iMarket {
}

#iMarket .title {
    color: #008dd2;
    font-size: 1.6em;
    font-family: 'Calibri'
}

#iPro {
    margin: 54px auto 25px;
    background: url(../images/i_market_bg.png) center top no-repeat;
    border-top: 2px solid #BDE8FA
}

#iPro p.info {
    width: 50%;
    margin: 0 auto 4%;
    text-align: center;
    font-size: 1.1em
}

#iPro>.container {
    width: 80%
}

#iPro .title {
    color: #008dd2;
    font-size: 3em;
    font-family: 'Calibri';
    margin: 60px auto 17px;
    text-align: center;
    font-style: italic
}

#iPro .proBox {
    display: block;
    height: 100%;
    vertical-align: middle;
    z-index: 0;
    padding: 0;
    margin: 0
}

#iPro .proBox .picBox {
    padding: 0;
    margin-bottom: 4px
}

#iPro .proBox .picBox img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    width: 100%
}

#iPro .proBox .picBox .i_pic_1 {
}

#iPro .proBox:hover img {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)
}

#iPro .proBox .pic img {
    width: 100%;
    max-width: 100%
}

#iPro .proBox .color {
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-decoration: none;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease
}

#iPro .proBox .color .box {
    background: #000
}

#iPro .proBox .color>img {
    top: 40%;
    left: 23%;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    position: absolute;
    display: block
}

#iPro .proBox .color>span {
    display: block;
    top: 41%;
    left: 36%;
    font-size: 1.8em;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    position: absolute
}

#iPro .proBox .color .btnBox {
    padding: 10px;
    color: #fff;
    width: 100%;
    left: 5%;
    z-index: 999999;
    transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    display: inline-block;
    top: 30%;
    position: absolute;
    opacity: 0
}

#iPro .proBox .color .btnBox a {
    background: #22aee9;
    display: inline-block;
    padding: 8px 10px;
    color: #fff;
    width: 43%;
    float: left;
    margin: 3px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-decoration: none
}

#iPro .proBox .color .btnBox a:hover {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8)
}

#iPro .proBox .color.yellow a,#iPro .proBox .color.yellowRaw a {
    background: #ffa800
}

#iPro .proBox .color.green a,#iPro .proBox .color.greenRaw a {
    background: #00ad86
}

#iPro .proBox .color.blue,#iPro .proBox .color.blueRaw {
    background: url(../images/icon_plus_box.png) 90% 10% #22aee9 no-repeat
}

#iPro .proBox .color.yellow,#iPro .proBox .color.yellowRaw {
    background: url(../images/icon_plus_box.png) 90% 10% #ffa800 no-repeat
}

#iPro .proBox .color.green,#iPro .proBox .color.greenRaw {
    background: url(../images/icon_plus_box.png) 90% 10% #00ad86 no-repeat
}

#iPro .proBox .color.blue:before,#iPro .proBox .color.yellow:before,#iPro .proBox .color.green:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -13px;
    top: 20%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 13px 11px 0;
    border-color: transparent #22aee9 transparent transparent
}

#iPro .proBox .color.yellow:before {
    border-color: transparent #ffa800 transparent transparent
}

#iPro .proBox .color.green:before {
    border-color: transparent #00ad86 transparent transparent
}

#iPro .proBox .color.blueRaw:after,#iPro .proBox .color.yellowRaw:after,#iPro .proBox .color.greenRaw:after {
    content: '';
    display: block;
    position: absolute;
    top: 20%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 13px;
    border-color: transparent transparent transparent #22aee9;
    right: -13px;
    z-index: 9999
}

#iPro .proBox .color.yellowRaw:after {
    border-color: transparent transparent transparent #ffa800
}

#iPro .proBox .color.greenRaw:after {
    border-color: transparent transparent transparent #00ad86
}

#iPro .col-md-3:hover .color {
    background-color: #333
}

#iPro .proBox:hover .color {
    background: url(../images/i_box_hover.png)
}

#iPro .proBox:hover .color.blue:before,#iPro .proBox:hover .color.yellow:before,#iPro .proBox:hover .color.green:before {
    border-color: transparent #343434 transparent transparent
}

#iPro .proBox:hover .color.blueRaw:after,#iPro .proBox:hover .color.yellowRaw:after,#iPro .proBox:hover .color.greenRaw:after {
    border-color: transparent transparent transparent #343434
}

#iPro .proBox:hover .color>img {
    top: 10%
}

#iPro .proBox:hover .color>span {
    top: 10%
}

#iPro .proBox:hover .color>.btnBox {
    opacity: 1
}

#iInfo {
    margin: 0 auto 1%;
    font-size: 15px
}

#iInfo .infoBox {
    margin: 5% auto
}

#iInfo .title {
    font-size: 1.8em;
    font-style: italic;
    margin: 10px 0 20px;
    line-height: 1.2em;
    text-transform: uppercase
}

#iInfo .txt {
    color: #666;
    font-size: .9em
}

#iInfo .infoBox img {
    display: block
}

@media only screen and (min-width: 1196px) {
    .owl-carousel .owl-stage-outer {
        padding:0 60px
    }
}

@media only screen and (max-width: 1170px) {
    footer .footer .row {
        width:100%
    }

    #iNews .date {
        padding: 0;
        width: 100%;
        height: 30px
    }

    #iNews .day {
        font-size: 2.5em;
        width: 15%
    }

    #iNews .month {
        width: 70%;
        height: 30px
    }

    #iNews .month>span {
        display: inline-block
    }

    #iNews .name {
        width: 90%
    }
}

@media only screen and (max-width: 992px) {
    #iPro>.container {
        width:100%
    }

    footer .footer {
        width: 100%
    }

    #iNews {
        margin: 42px auto 50px
    }

    #index .txtBox {
        width: 90%;
        text-align: center;
        color: #000;
        margin: 35% auto 0
    }

    #iNews .owl-carousel .owl-item:nth-child(2n) {
        background: none
    }

    .owl-stage-outer {
        margin: 0 50px
    }
}

@media only screen and (max-width: 680px) {
    #iPro>div >div.col-xs-12 {
        width:100%
    }

    #iTxt {
        text-align: left
    }

    .owl-carousel .owl-item {
        background: none
    }

    #iNews {
        margin: 20px auto
    }

    #iNews .name >a {
        width: 85%
    }

    #index .banner {
        margin-top: 50px
    }

    #index .banner .bxslider >div >a .txt {
        margin-top: -7%;
        left: 36%;
        width: 280px;
        font-size: 1.5em;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.3)
    }

    #index .banner .bxslider >div >a .txt.load {
        top: 0
    }

    #index .banner .bxslider >div >a .txt .ti img {
        width: 20%;
        height: 20%
    }

    #index .banner .bxslider >div >a .txt .type {
        font-size: .6em;
        padding: 5px 8px;
        margin-bottom: 3px
    }

    #index .banner .bxslider >div >a .txt .redTxt {
        font-size: 1em;
        margin-bottom: 3px
    }

    #index .banner .bxslider >div >a .txt .smaTxt {
        font-size: .5em
    }

    #iPro .title {
        font-size: 2em;
        margin: 20px auto 10px
    }

    #iPro p.info {
        width: 100%;
        text-align: left
    }

    .owl-stage-outer {
        margin: 0 30px
    }

    #iInfo .infoBox {
        width: 100%
    }

    #iInfo .title {
        overflow: hidden;
        text-align: center;
        font-size: 1.2em
    }

    #iInfo .txt {
        text-align: center
    }

    #iInfo .infoBox img {
        display: block;
        margin: 0 auto
    }
}

.pBanner {
    position: relative;
    height: 245px;
    z-index: 10;
    margin-top: 135px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center
}

.pBanner .banTi {
    color: #fff
}

.pBanner .txt {
    font-size: .8em;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9)
}

.pBanner h3 {
    font-weight: normal;
    text-transform: uppercase;
    font-family: 'Calibri';
    text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
    font-size: 2.5em;
    margin: 60px 0 70px
}

.pBanner .txt {
    font-size: 1em
}

@media only screen and (max-width: 992px) {
    .pBanner {
        height:135px;
        margin-top: 80px
    }

    .pBanner h3 {
        font-size: 1.5em
    }
}

@media only screen and (max-width: 768px) {
    .pBanner {
        background-size:cover
    }

    .pBanner h3 {
        font-size: 1.2em
    }
}

.contentBox {
    padding: 80px 15px;
    background: #fff
}

@media only screen and (max-width: 992px) {
    .contentBox {
        background:#fff;
        padding: 85px 15px
    }
}

.btn.active,.btn:active {
    background: #fff;
    box-shadow: none;
    color: #22AEE9
}

.btn {
    background: #eee;
    color: #676767;
    border-radius: 0;
    border: none;
    outline: none;
    font-size: .9em;
    border-right: 1px solid #D1D1D1;
    padding: 10px 24px;
    float: left
}

.btn.filter {
    width: 20%;
    outline: none
}

.btn.filter:hover {
    color: #22AEE9;
    background: #fff
}

.btn.dropdown-toggle {
    background: #333;
    color: #ccc
}

.sort-list-btn {
    text-align: center;
    margin-top: 33px
}

.btn-group {
    background: #CECECE;
    margin: 0 15px 20px 0
}

.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover {
    color: #22AEE9
}

.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover {
    background: #fff
}

@media only screen and (max-width: 1024px) {
    .btn-group {
        position:absolute;
        top: 220px;
        right: 15px;
        z-index: 999
    }
}

@media only screen and (max-width: 768px) {
    .btn-group {
        position:absolute;
        top: 165px;
        right: 0;
        z-index: 99
    }
}

.pPager {
    text-align: center;
    font-size: 0;
    margin: 30px 0;
    font-family: Arial
}

.pPager a {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    color: #444;
    text-align: center;
    border: 1px solid #008DD2
}

.pPager a.prev,.pPager a.next {
    width: 33px;
    margin: 5px
}

.pPager a.prev {
    border-radius: 3px 0 0 3px
}

.pPager a.next {
    border-radius: 0 3px 3px 0
}

.pPager a.num {
    width: 32px;
    margin: 0 5px
}

.pPager a:hover,.pPager a:active {
    background: #efefef
}

.pPager a.current {
    color: #fff;
    font-weight: 700;
    border-color: #008DD2;
    text-decoration: none;
    background: #008DD2
}

.pPager a.disable {
    color: #999;
    cursor: not-allowed
}

@media (min-width: 992px) {
    .pPager {
        margin-top:60px
    }
}

@media (max-width: 992px) {
    .pContent {
        width:100%;
        padding: 50px 0 50px;
        position: relative
    }
}

.bigTi {
    margin: 0 auto 50px;
    padding-top: 30px;
    text-align: center;
    font-size: 1.6em;
    font-style: italic
}

.pBanner.pro {
    background: url(../images/ban_pro.jpg) center top no-repeat
}

.pBanner.pro h3 {
    margin-top: 12px
}

@media (max-width: 992px) {
    .pBanner.pro {
        background-size:auto 100%;
        margin-top: 80px
    }
}

#proList .proBox {
    padding: 0 4% 40px
}

#proList .proBox .picBox {
    position: relative;
    border: 1px #fff solid;
    border-bottom: 1px solid #D4D4D4;
    box-sizing: border-box;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease
}

#proList .proBox .picBox img {
    display: block;
    margin: 0 auto
}

#proList .proBox .picBox:hover {
    border: 1px #ccc solid
}

#proList .proBox .picBox .view {
    position: absolute;
    right: 0;
    top: 0;
    width: 49px;
    height: 49px;
    background: url(../images/view.png) no-repeat;
    opacity: 0;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease
}

#proList .proBox .picBox:hover .view {
    opacity: 1
}

#proList .proBox .txtBox {
    text-align: center;
    background: url(../images/pro_bg.png) 0 1px repeat-x;
    line-height: 50px
}

@media only screen and (min-width: 992px) {
    #proList .sort-list-btn {
        margin-top:26px
    }
}

@media only screen and (min-width: 1200px) {
    #proList .sort-list-btn {
        margin-top:21px
    }
}

@media only screen and (max-width: 480px) {
    #proList .proBox {
        width:100%;
        margin-bottom: 20px
    }
}

#proView .contentBox {
    margin-top: 130px
}

#proView .bg {
    background: url(../images/pro_view_bg.png) left top no-repeat;
    width: 1170px;
    height: calc(100vw - 0);
    position: absolute;
    background-attachment: fixed;
    z-index: 0
}

#proView .txtBox {
    background: #f7f7f7;
    padding: 50px 30px
}

#proView .txtBox .series {
    font-size: .8em
}

#proView .txtBox .name {
    font-size: 2.2em;
    margin-bottom: 14px
}

#proView .txtBox .btnWrap a {
    display: inline-block;
    width: 49%;
    margin-right: 2px;
    text-align: center;
    padding: 7px 20px;
    background: #e7e7e7;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    margin-bottom: 15px;
    color: #fff;
    text-decoration: none;
    font-size: .9em
}

#proView .txtBox .btnWrap a.fa {
    margin-right: 10px
}

#proView .txtBox .btnWrap a.inquery {
    background: #008dd2
}

#proView .txtBox .btnWrap a.inquery2 {
    background: #f29a00
}

#proView .txtBox .btnWrap a.back {
    color: #000
}

#proView .txtBox .des {
    overflow: hidden;
    padding: 0 0 0 0
}

.mCSB_container {
    padding-right: 10px
}

#proView .tabWrap {
    width: 100%;
    background: #fff
}

#proView .tabWrap ul.fix {
    margin: 0;
    padding: 0;
    height: 50px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #fff
}

#proView .tabWrap .cf:before,#proView .tabWrap .cf:after {
    content: "";
    display: table
}

#proView .tabWrap .cf:after {
    clear: both
}

#proView .tabWrap .cf {
    zoom:1;margin: 0 auto
}

#proView .tabWrap .toggle {
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center
}

#proView .tabWrap .toggle li {
    margin: 0;
    display: inline-block;
    text-align: center;
    height: 40px;
    padding: 0 10px;
    margin-top: 10px
}

#proView .tabWrap .toggle li a {
    display: block;
    float: left;
    text-align: center;
    margin: 0 auto 0;
    width: 128px;
    color: #2F2F2F;
    border-right: 1px solid #D0D0D0;
    font-size: 1.1em;
    text-decoration: none
}

#proView .tabWrap .toggle li a:hover {
    color: #22AEE9
}

#proView .tabWrap .toggle li a.active {
    position: relative;
    color: #22AEE9;
    cursor: default
}

#proView .tabWrap .toggle li a.active:after {
    content: '';
    display: block;
    width: 16px;
    height: 8px;
    background: url(../images/tab_active.png);
    position: absolute;
    top: 38px;
    left: 45%
}

#proView #download {
}

#download table.table {
    width: 100%;
    font-size: 1.2em
}

#download tr:nth-of-type(even) {
    background: #efefef
}

#download td,#download th {
    text-align: left;
    vertical-align: middle;
    padding: 9px 24px;
    border: 1px solid #FFF
}

#download th {
    color: white;
    font-weight: bold;
    text-align: center;
    background: #008DD2;
    padding: 10px 5px
}

#download td>a.link {
    color: #FFF;
    background: #626262;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
    margin: 0 auto;
    font-size: .9em;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease
}

#download td>a.link:hover {
    color: #fff;
    background: #01112F
}

#download tr:hover {
    opacity: .8
}

@media only screen and (max-width: 1170px) {
    #download table.table {
        width:90%;
        margin: 0 auto
    }

    #download td>a {
        display: block;
        margin-bottom: 10px
    }
}

@media only screen and (max-width: 680px) {
    #download td>a.link {
        display:block
    }
}

@media only screen and (max-width: 768px) {
    #download table,#download thead,#download tbody,#download th,#download td,#download tr {
        display:block;
        border: none
    }

    #download th:hover,#download td:hover {
        opacity: .95
    }

    #download thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px
    }

    #download tr {
        padding: 12px;
        border: 1px solid #E1E1E1;
        border-bottom: none
    }

    #download th {
    }

    #download td {
        position: relative;
        padding-left: 35%;
        border: none
    }

    #download td.pic {
        padding-left: 20px
    }

    #download td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap
    }

    #download td>a.link {
        margin-left: 0
    }

    #download td:nth-of-type(1):before,#download td:nth-of-type(2):before,#download td:nth-of-type(3):before {
        font-weight: bold;
        padding: 5px 0
    }

    #download td:nth-of-type(1):before {
        content: "Title"
    }

    #download td:nth-of-type(2):before {
        content: "File"
    }

    #download td:nth-of-type(3):before {
        content: "File Name"
    }
}

@media only screen and (max-width: 680px) {
    #proView .txtBox .btnWrap a {
        width:100%
    }

    #proView .tabWrap .toggle li {
        padding: 0
    }

    #proView .tabWrap .toggle li a {
        width: auto;
        padding: 0 10px
    }
}

#about .pBanner {
    background: url(../images/ban_about.png) center top no-repeat
}

#about .vision {
    padding: 50px 80px
}

#about h4 {
    color: #008dd2;
    font-size: 1.6em
}

#about h4 span {
    color: #666
}

#about h4.dot {
    position: relative;
    padding-left: 19px
}

#about h4.dot:before {
    content: '';
    width: 4px;
    height: 26px;
    background: #008dd2;
    position: absolute;
    left: 0
}

.vision.sTi {
    color: #008dd2
}

#about p {
    line-height: 2em
}

#about p.padBot {
    margin-bottom: 30px
}

.vision .line {
    width: 100%;
    margin: 2px auto;
    height: 1px;
    background: #ccc
}

.vision .pic {
    padding-left: 0
}

.vision .txt {
    padding-right: 0
}

.org {
    background: url(../images/org_bg.png);
    width: 100%;
    background-size: cover;
    border: 1px solid #ddd;
}

.orgbg {
    min-height: 600px;
    background: url(../images/org_img.png) right top no-repeat;
    background-size: 100% auto
}

.org .picBox img {
    margin: 20px auto 0
}

.milestones {
    background: url(../images/mile_bg.png);
    width: 100%;
    background-size: cover
}

.milestones .year {
    width: 168px;
    line-height: 45px;
    height: 45px;
    color: #fff;
    background: #008dd2;
    text-align: center;
    margin-bottom: 20px
}

.milestones .year:after {
    content: '';
    display: inline-block;
    height: 9px;
    background: url(../images/dot_line.png) no-repeat;
    position: absolute;
    width: 100%;
    top: 20px;
    left: 182px
}

.csr .readmore {
    display: block;
    width: 163px;
    height: 50px;
    background: #000;
    color: #fff;
    line-height: 50px;
    font-size: 1.2em;
    text-align: center;
    text-decoration: none
}

.csr .readmore span {
    background: #008dd2;
    display: block;
    width: 50px;
    height: 50px;
    float: right
}

.stakeholder .col-md-4 {
    padding: 0 61px;
    margin-bottom: 30px
}

.stakeholder .picBox {
    width: 100%
}

.stakeholder .picBox img {
    margin: 0 auto;
    max-width: 100%;
    width: 100%
}

.stakeholder .title {
    font-size font-size: 1.3em;
    margin: 15px 0 0;
    font-style: italic;
    font-size: 1.4em;
    line-height: 50px;
    height: 50px
}

.stakeholder .title.lineSmall {
    line-height: 1em
}

.stakeholder .sTi {
    color: #008dd2
}

@media only screen and (max-width: 1200px) {
    .orgbg {
        background:none;
        min-height: auto
    }

    #about .vision {
        padding: 50px
    }
}

@media only screen and (max-width: 992px) {
    #about .contentBox {
        padding:50px 30px
    }

    .stakeholder .col-md-4 {
        padding: 0 15px
    }
}

#news .pBanner {
    background: url(../images/ban_news.png) center top no-repeat
}

#news .timeline {
    margin: 50px auto;
    border-bottom: 1px solid #008dd2
}

#news h4 {
    position: relative;
    padding-left: 20px;
    border-bottom: 1px solid #008dd2;
    color: #008DD2;
    padding-bottom: 10px
}

#news h4:before {
    content: '';
    width: 5px;
    height: 20px;
    background: #008dd2;
    position: absolute;
    left: 0
}

#news .timeline a {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 35px;
    line-height: 35px;
    vertical-align: top
}

#news .timeline a.current {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px
}

#news .timeline a:after {
    content: '';
    width: 9px;
    height: 9px;
    border: 1px solid #008dd2;
    background: #fff;
    position: absolute;
    display: block;
    top: 31px;
    left: 11px
}

#news .timeline a.current:after {
    background: #008dd2
}

#news .newsBox {
    border-bottom: 1px solid #ccc;
    padding: 16px 15px
}

#news .dateBox {
    width: 68px;
    padding: 17px;
    height: 70px;
    background: #008dd2;
    color: #fff;
    box-sizing: border-box
}

#news .dateBOx .date {
    display: block;
    margin: 0 auto;
    text-align: center
}

#news .dateBOx .line {
    width: 50px;
    margin: 0 auto;
    height: 1px;
    background: #fff
}

#news .newsTi {
    color: #666;
    font-weight: normal
}

#news .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #008dd2
}

#news .newsViewTi {
    font-size: 1.2em;
    line-height: 2em
}

#news .newsviewBox {
    border-bottom: 1px solid #008dd2;
    padding: 15px
}

#news .socialBox {
    float: right
}

#news .socialBox a {
    display: inline-block;
    width: 27px;
    height: 27px;
    box-sizing: border-box;
    border: 1px solid #008dd2;
    margin: 5px;
    text-align: center;
    border-radius: 27px;
    line-height: 27px
}

#news .socialBox a:hover {
    background: #008dd2;
    color: #fff
}

.newsInfoBox {
    margin: 50px 0 0 0;
    padding: 0 0 20px 0
}

.newsInfoBox .back {
    width: 84px;
    height: 31px;
    display: block;
    background: url(../images/news_left.png) no-repeat;
    padding-left: 90px;
    line-height: 31px;
    color: #333;
    text-decoration: none
}

.newsInfoBox .next {
    width: 100%;
    height: 31px;
    display: block;
    background: url(../images/news_right.png) right center no-repeat;
    text-align: right;
    padding-right: 90px;
    line-height: 31px;
    color: #333;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.newsInfoBox a:hover {
    opacity: .8
}

@media only screen and (max-width: 768px) {
    #news .timeline {
        border-bottom:none
    }

    #news .timeline a {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        margin-bottom: 10px;
        border-bottom: 1px solid #008dd2
    }

    #news .timeline a:after {
        left: 0;
        top: 11px
    }
}

@media only screen and (max-width: 680px) {
    #news .newsViewTi {
        width:100%
    }
}

#support .pBanner {
    background: url(../images/ban_support.png) center top no-repeat
}

#support h4 {
    position: relative;
    padding-left: 20px;
    border-bottom: 1px solid #008dd2;
    color: #008DD2;
    padding-bottom: 10px
}

#support h4:before {
    content: '';
    width: 5px;
    height: 20px;
    background: #008dd2;
    position: absolute;
    left: 0
}

#support .supportBox {
    border-bottom: 1px solid #ccc;
    padding: 16px 15px
}

#support .dateBox {
    float: left;
    width: 68px;
    padding: 10px;
    height: 70px;
    background: #008dd2;
    color: #fff;
    box-sizing: border-box
}

#support .newsTi {
    font-size: 1.1em
}

#support .dateBox .date {
    display: block;
    margin: 0 auto;
    text-align: center
}

#support .dateBox .line {
    width: 50px;
    margin: 0 auto;
    height: 1px;
    background: #fff
}

#support .btnAw {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #008dd2;
    border-radius: 40px;
    text-align: center;
    line-height: 40px;
    background: url(../images/icon_white_paper.png) no-repeat center center
}

#support .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #008dd2
}

#support .whiteViewTi {
    font-size: 1.2em;
    line-height: 2em
}

#warranty .warrantyBox {
    padding: 50px 0;
    border-bottom: 1px solid #efefef
}

#warranty .dateBox {
    background: url(../images/warranty_date_bg.png);
    width: 119px;
    height: 119px;
    text-align: center
}

#warranty .dateBox .date {
    font-size: 2em;
    color: #fff;
    line-height: 78px
}

#warranty .dateBox .dateBot {
    color: #008dd2
}

#warranty .warrantyBox .warrantyTi {
    font-size: 1.2em
}

#eol h4 {
    margin: 80px 0 10px;
    padding: 0;
    font-weight: 100px;
    border-bottom: none;
    font-size: 1.5em
}

#eol h4:before {
    width: 0;
    height: 0
}

#eol .table th,#eol .table td {
    padding: 2% 5%;
    border-top: none;
    border-bottom: 1px solid #ddd
}

#eol .table th {
    width: 30%;
    border-right: 1px solid #ddd;
    font-weight: 100;
    text-transform: uppercase
}

#eol .table td {
    width: 55%
}

#eol .table th span {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background: #008dd2;
    color: #fff;
    text-align: center
}

#eol .picBox img {
    margin: 0 auto
}

#career h4 {
    position: relative;
    color: #333;
    margin: 41px 0 30px;
    padding-left: 15px;
    font-weight: normal
}

#career h4:before {
    content: '';
    width: 4px;
    height: 20px;
    background: #008dd2;
    position: absolute;
    left: 0
}

#career .pBanner {
    background: url(../images/ban_career.png) center top no-repeat
}

#career .center {
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 33px
}

#career .picBox img {
    margin: 0 auto
}

#career .picturtTi {
    font-size: 16px
}

#career .joinBox {
    text-align: center
}

#career .joinBox .img {
    margin-bottom: 30px
}

#career .joinBox .img img {
    margin: 0 auto;
    max-width: 100%
}

#career .joinBox .blueBox {
    display: block;
    padding: 10px 0;
    margin: 0 15px;
    color: #fff;
    background: #008dd2;
    text-align: center
}

#career .joinBox .blueBox.two {
    background: #035f8c
}

#career .joinBox .linkBox {
}

#career .joinBox .linkBox >a {
    display: block;
    line-height: 1em;
    width: 118px;
    height: 157px;
    background: url(../images/link_box.png) no-repeat;
    color: #fff;
    text-align: center;
    float: left;
    margin: 0 7%;
    padding-top: 80px;
    box-sizing: border-box
}

#career ul.list li,#industries ul.list li {
    float: left;
    margin: 0 10px 0 0;
    position: relative;
    padding: 0 10px 0 20px;
    list-style: none
}

#industries ul.list li a {
    color: #444;
    text-decoration: none
}

#industries ul.list li a:hover {
    color: #23527c
}

#career ul.list li a.on,#industries ul.list li a.on {
    font-weight: bold;
    color: #23527c
}

#career .blueBox .awBig {
    text-align: center
}

#career .blueBox .awBig img {
    text-align: center
}

#career ul.list li:before,#industries ul.list li:before {
    content: '';
    background: #666;
    position: absolute;
    left: 0;
    top: 5px;
    width: 1px;
    height: 15px;
    display: inline-block
}

#career ul.list li.on,#career ul.list li:hover,#industries ul.list li.on,#industries ul.list li:hover {
    color: #008dd2
}

#career.life .life-box {
    font-size: 0;
    text-align: center
}

#career.life .life-box .slider-for {
    width: 765px;
    height: 550px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    box-shadow: 1px 1px 5px 2px rgba(0,0,0,.2)
}

#career.life .life-box .slider-for .box {
    position: relative;
    overflow: hidden
}

#career.life .life-box .slider-for .box .txt {
    color: #fff;
    position: absolute;
    display: block;
    padding: 6px 15px;
    width: 100%;
    min-width: 200px;
    background: rgba(0,0,0,.6);
    bottom: 0;
    left: 0;
    font-size: 1.143rem
}

#career.life .life-box .slider-nav {
    width: 200px;
    display: inline-block;
    vertical-align: top;
    height: 550px;
    overflow: hidden;
    margin-left: 20px
}

#career.life .life-box .slider-nav .box {
    margin-bottom: 5px;
    height: 137.5px;
    overflow: hidden;
    position: relative
}

#career.life .life-box .slider-nav .box img {
    width: auto;
    max-height: 100%;
    box-shadow: 1px 1px 3px 2px rgba(0,0,0,.3)
}

#career.life .life-box .slider-nav .slick-slide:before {
    content: '';
    position: absolute;
    width: 188.45px;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.2)
}

#career.life .life-box .slider-nav .slick-current:before {
    display: none
}

#career.life .life-box .slider-for .slick-next,#career.life .life-box .slider-for .slick-prev {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    background: url(../images/form_aw.png)no-repeat center center;
    font-size: 0;
    border: none;
    z-index: 100
}

#career.life .life-box .slider-for .slick-next {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    right: 0
}

#career.life .life-box .slider-for .slick-prev {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    left: 0
}

@media only screen and (max-width: 1199px) {
    #career.life .life-box {
        padding:20px
    }

    #career.life .life-box .slider-for {
        width: 680px;
        height: 489px
    }

    #career.life .life-box .slider-for .box img {
        max-width: 100%
    }

    #career.life .life-box .slider-nav {
        height: 489px
    }

    #career.life .life-box .slider-nav {
        width: 170px
    }

    #career.life .life-box .slider-nav .box {
        margin-bottom: 7px;
        height: 117.25px
    }

    #career.life .life-box .slider-nav .box img {
        height: 117.25px
    }

    #career.life .life-box .slider-nav .slick-slide:before {
        width: 160px
    }
}

@media only screen and (max-width: 991px) {
    #career.life .life-box {
        padding:30px
    }

    #career.life .life-box .slider-for {
        width: 100%;
        height: auto
    }

    #career.life .life-box .slider-nav {
        height: auto;
        width: 100%;
        margin: 20px auto 0
    }

    #career.life .life-box .slider-nav .box img {
        width: calc(100% - 10px);
        margin: 0 auto;
        display: block;
        max-width: 100%
    }

    #career.life .life-box .slider-nav .slick-slide:before {
        width: calc(100% - 10px);
        left: 5px
    }
}

@media only screen and (max-width: 639px) {
    #career.life .life-box {
        padding:15px;
        position: relative
    }

    #career.life .life-box .slider-nav {
        display: none
    }

    #career.life .life-box .slider-for {
        box-shadow: none
    }

    #career.life .life-box .slider-for .box {
        box-shadow: 1px 1px 3px 2px rgba(0,0,0,.2);
        overflow: auto
    }

    #career.life .life-box .slider-for .box .txt {
        position: relative;
        transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        left: auto;
        bottom: auto;
        width: 100%
    }

    #career.life .life-box .slider-for .slick-dots {
        text-align: center;
        width: 100%;
        padding: 0;
        margin: 20px 0 0 0;
        z-index: 10
    }

    #career.life .life-box .slider-for .slick-dots li {
        display: inline-block;
        position: relative;
        margin: 0 5px;
        padding: 0;
        cursor: pointer
    }

    #career.life .life-box .slider-for .slick-dots li button {
        font-size: 0;
        outline: none;
        border: 0;
        width: 13px;
        height: 13px;
        border-radius: 100%;
        background: #ddd;
        padding: 0;
        box-shadow: 2px 2px 1px rgba(0,0,0,0.2) inset
    }

    #career.life .life-box .slider-for .slick-dots li.slick-active button {
        width: 13px;
        height: 13px;
        background: #17a8e5
    }
}

#rma .picBox img {
    margin: 0 auto
}

#rma .newsBox {
    margin-bottom: 30px
}

#rma .newsBox .txt {
    margin-top: 5px
}

#competitive .pBanner {
    background: url(../images/ban_compotitive.png) center center no-repeat;
    margin-top: 80
}

#manufacture h4 {
    color: #fff;
    text-align: center;
    font-size: 1.5em;
    font-style: italic;
    margin: 60px auto 40px
}

#manufacture h4 p {
    font-size: .6em;
    margin: 20px 0
}

#manufacture {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: url(../images/advantage_bg.png) top center no-repeat
}

#manufacture .manufactureBox {
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px;
    width: 23%;
    margin: 0 1%;
    padding: 15px;
    min-height: 490px
}

#manufacture .manufactureBox img {
    width: 100%
}

#manufacture .manufactureBox .ti {
    color: #008dd2;
    margin: 15px 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    text-align: center;
    font-size: 1.5em;
    font-style: italic
}

#manufacture .picBox img {
    width: 100%;
    margin: 5% auto
}

#manufacture .iconTi {
    text-align: center;
    margin: 50px auto 30px;
    font-size: 2em
}

#manufacture .topBox {
    margin: 20px auto 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd
}

#manufacture .videoBox iframe {
    width: 100%;
    height: 400px
}

#manufacture .processBox {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd
}

#manufacture .processBox .ti {
    color: #008dd2;
    font-size: 1.2em;
    margin: 20px 0
}

#manufacture .videoBox2 iframe {
    width: 100%;
    height: 150px
}

#quality h4 {
    font-size: 1.5em;
    color: #008dd2;
    margin: 30px auto 20px
}

#quality h4.marBot40 {
    margin-bottom: -40px
}

#quality .picBox {
    margin: 20px 0
}

#quality .picBox img {
    width: 100%;
    margin: 0 auto
}

#new h4 {
    font-size: 1.5em;
    color: #008dd2;
    margin: 30px auto 20px
}

#new .teamBox {
    min-height: 185px;
    margin: 30px 15px;
    background: url(../images/team_bg.png) center center no-repeat;
    background-size: cover;
    color: #fff;
    padding: 20px 50px;
    box-sizing: border-box
}

#new .teamBox .ti {
    font-size: 1.3em
}

#new .teamBox .txt {
    width: 40%;
    line-height: 1.6em
}

#new .techBox {
    height: 430px
}

#new .techBox img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto
}

#new .techBox .ti {
    font-size: 1.1em;
    margin: 20px 0 5px;
    color: #008DD2
}

@media only screen and (max-width: 992px) {
    #manufacture .manufactureBox {
        width:47%;
        float: left;
        margin-bottom: 20px
    }

    #manufacture .videoBox {
        padding: 0
    }

    #manufacture .videoBox iframe {
        width: 100%;
        height: 350px
    }

    #manufacture .videoBox2 iframe {
        width: 100%;
        height: 300px
    }
}

@media only screen and (max-width: 768px) {
    #manufacture .videoBox iframe {
        width:100%;
        height: 300px
    }

    #manufacture .videoBox2 iframe {
        width: 100%;
        height: 150px
    }

    #quality h4.marBot40 {
        margin-bottom: 0
    }
}

@media only screen and (max-width: 680px) {
    #manufacture .videoBox iframe {
        width:100%;
        height: 200px
    }
}

#industries .pBanner {
    background: url(../images/ban_industries.png) center center no-repeat
}

#industries h4 {
    position: relative;
    padding-left: 20px;
    color: #008DD2;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 1.3em
}

#industries h4:before {
    content: '';
    width: 5px;
    height: 20px;
    background: #008dd2;
    position: absolute;
    left: 0
}

#industries h4 span {
    color: #333;
    text-transform: lowercase
}

#industries .title {
    color: #008DD2;
    font-size: 1.6em;
    margin: 20px 0
}

#pNews {
    width: 100%;
    padding: 0
}

#pNews .newsBox {
    border-top: 1px solid #ddd;
    padding: 5px 0
}

#pNews .date {
    padding: 0
}

#pNews .day {
    float: left;
    color: #008DD2;
    font-family: arial;
    font-size: 2em;
    width: 48%;
    margin-right: 2%
}

#pNews .month {
    float: left;
    height: 50px;
    color: #008DD2;
    width: 50%;
    font-size: .5em;
    line-height: 15px;
    padding-top: 10px
}

#pNews .month span {
    display: block;
    text-transform: uppercase
}

#pNews .name {
    padding: 0
}

#pNews .name >a {
    display: inline-block;
    text-align: left;
    text-decoration: none;
    color: #333;
    font-size: .8em
}

#pNews .owl-prev,#pNews .owl-next {
    font-size: 0;
    background: url(../images/p_right.png) no-repeat;
    width: 9px;
    height: 15px;
    display: block;
    position: absolute;
    right: 0;
    top: 20px
}

#pNews .owl-prev {
    background: url(../images/p_left.png) no-repeat;
    left: 0;
    top: 6px
}

#pNews .owl-nav {
    width: 45px;
    height: 45px;
    background: url(../images/indust_line.png) center center no-repeat;
    position: absolute;
    top: -72px;
    right: 0
}

#industries .caseBox {
    display: block;
    position: relative
}

#industries .applicatTi {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px
}

#industries .owl-carousel .owl-item {
    padding: 0
}

#industries .owl-carousel .owl-stage-outer {
    padding: 0;
    margin: 0
}

#industryBox .owl-prev,#industryBox .owl-next {
    font-size: 0;
    background: url(../images/indus_right.png) no-repeat;
    width: 18px;
    height: 32px;
    display: block;
    position: absolute;
    right: -50px;
    top: 50%
}

#industryBox .owl-prev {
    font-size: 0;
    background: url(../images/indus_left.png) no-repeat;
    left: -50px
}

#indusview .picBox img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto
}

#indusview .related,#indusview .success {
    display: inline-block;
    padding: 8px 20px 8px 60px;
    color: #fff;
    background: url(../images/icon_related.png) 10% center no-repeat #008dd2;
    text-decoration: none;
    font-size: .8em;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3)
}

#indusview .success {
    background: url(../images/icon_success.png) 10% center no-repeat #00ad86
}

#indusview .proBox {
    padding: 0 4%
}

#indusview .proBox .picBox {
    position: relative;
    border: 1px #fff solid;
    border-bottom: 1px solid #D4D4D4;
    box-sizing: border-box;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease
}

#indusview .proBox .picBox img {
    display: block;
    margin: 0 auto;
    width: 100%
}

#indusview .proBox .picBox:hover {
    border: 1px #ccc solid
}

#indusview .proBox .picBox .view {
    position: absolute;
    right: 0;
    top: 0;
    width: 49px;
    height: 49px;
    background: url(../images/view.png) no-repeat;
    opacity: 0;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease
}

#indusview .proBox .picBox:hover .view {
    opacity: 1
}

#indusview .proBox .txtBox {
    text-align: center;
    background: url(../images/pro_bg.png) 0 1px repeat-x;
    line-height: 50px
}

.botBg {
    background: #efefef;
    padding: 2% 0
}

#story .picWrap {
}

#story .picWrap img {
    width: 100%;
    margin: 0 auto
}

#story .txtBox {
    background: #fff;
    padding-top: 30px;
    padding: 30px
}

#story .owl-prev,#story .owl-next {
    font-size: 0;
    background: url(../images/indus_right.png) center center no-repeat;
    width: 18px;
    height: 32px;
    display: block;
    position: absolute;
    top: 50%;
    right: -50px
}

#story .owl-prev {
    font-size: 0;
    background: url(../images/indus_left.png) no-repeat;
    left: -50px
}

#story #imgBox .owl-prev,#story #imgBox .owl-next {
    font-size: 0;
    background: url(../images/w_right.png) center center no-repeat #22AEE9;
    width: 28px;
    height: 28px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 30px;
    top: inherit;
}

#story #imgBox .owl-prev {
    font-size: 0;
    background: url(../images/w_left.png) no-repeat #22AEE9 center center;
    left: 0
}

@media only screen and (max-width: 992px) {
    #story .txtBox {
        margin:0 15px 15px 15px
    }

    #industryBox .owl-prev {
        left: 5%
    }

    #industryBox .owl-next {
        right: 5%
    }

    #indusview .owl-prev {
        left: 5%
    }

    #indusview .owl-next {
        right: 5%
    }

    #story .owl-prev {
        left: -20px
    }

    #story .owl-next {
        right: -20px
    }
}

#star .star {
    color: #EE8210;
    font-weight: bold;
    font-size: 1.1em;
    padding-left: 3px
}

#star #member .note {
    font-size: 1.6em;
    font-style: italic;
    border-bottom: 5px solid #efefef;
    margin: 50px 0 20px
}

#star span.blue {
    color: #22AEE9
}

#star #member .note .blue {
    font-size: .7em;
    color: #22AEE9;
    font-family: arial;
    font-style: normal
}

#star #member .subTi {
    position: relative;
    font-size: 1.2em;
    padding: 20px 0 0 30px;
    border-bottom: 1px dotted #CCC;
    margin-bottom: 20px;
    color: #000
}

#star #member .subTi:before {
    content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 16px;
    background: #17A8E5;
    left: 16px;
    top: 25px
}

#star #member .edit .labelbox .input label.radio {
    float: left
}

#star #member .edit .labelbox .input label.radio.left {
    margin-left: 10px;
    margin-right: 0
}

#star #member .edit .labelbox .input .w100 {
    margin-right: 5px;
    float: left
}

#star #member .edit .labelbox .input.other {
    width: calc(100% - 150px)
}

#star #member .edit .labelbox .input .w200 {
    width: 200px;
    margin-right: 20px;
    float: left
}

#star .star-form .labelbox .input input.step-1-3.left {
    margin-left: 10px;
    margin-right: 0
}

#star #member .edit .labelbox .input .step-2-3 input.new {
    width: calc(32% - 107px);
    margin-left: 0
}

#star #member .edit .labelbox .input select {
    display: inline-block;
    margin-right: 1%;
    height: 32px;
    width: 90px;
    margin-bottom: 10px
}

#star #member .edit .labelbox .input select.col-md-2 {
    width: 15%
}

#star #member .edit .labelbox .input span {
    display: inline-block;
    float: left;
    line-height: 32px;
    margin-right: 10px
}

#star #member .edit .form-control {
    border-radius: 0;
    box-shadow: none
}

#star #member .edit .checkbox {
    margin: 3px 0
}

#star #member .edit .labelbox .item.no {
    background: none
}

#star #member .edit .labelbox .item.no:after {
    display: none
}

#star #member .floatL {
    float: left
}

#star #member textarea {
    width: 100%;
    height: 100px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #ddd
}

#star #member .btn.add,#star #member .btn.end {
    width: auto;
    color: #fff;
    background: #00ad86;
    ;padding: 0 35px;
    margin: 0 auto 50px;
    height: 36px;
    display: block
}

#star #member .btn.add .fa,#star #member .btn.end .fa {
    font-size: 1.8em
}

#star #member .noBorder {
    border: none
}

#star #member .btn.end {
    margin: 50px auto
}

#star #member .btn.editBtn {
    width: auto;
    color: #fff;
    background: #00ad86;
    ;padding: 0 35px;
    margin: 50px auto;
    height: 36px;
    display: block
}

@media only screen and (max-width: 768px) {
    #star #member .edit .labelbox .input select.col-md-2 {
        width:90%;
        margin-bottom: 15px
    }

    #star #member .edit .labelbox .input .w100 {
        width: 85%;
        margin-bottom: 10px
    }

    #star #member .edit .labelbox .input .w200 {
        width: 100%
    }
}

#contact .pBanner {
    background: url(../images/ban_contact.png) center center no-repeat
}

#inquery h4 {
    font-size: 2em;
    color: #005698;
    text-transform: uppercase
}

#contact .blue {
    color: #59a3dc
}

#contact label {
    width: 100%
}

#contact .input {
    width: 100%;
    height: 40px;
    border: 1px solid #dbdbdb;
    margin-bottom: 20px
}

#contact .input input {
    display: block;
    width: 100%;
    height: 38px;
    border: none;
    background: #fff;
    padding: 0 10px;
    outline: none
}

#contact .textarea {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    min-height: 200px;
    border: 1px solid #dbdbdb;
    margin-bottom: 10px
}

#contact .btnBox {
    text-align: right
}

#contact .btnReset,#contact .btnSubmit {
    border: none;
    color: #fff;
    float: none;
    padding: 14px 50px;
    outline: none;
    background: #000
}

#contact .btnSubmit {
    background: #008dd2
}

#contact .selectBox {
    position: relative;
    border: 1px solid #dbdbdb;
    border-radius: 0;
    margin-bottom: 20px
}

#contact .selectBox select {
    float: none;
    height: 36px;
    border: none;
    border-radius: 0 !important;
    background: url(../images/form_aw.png) no-repeat right;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 0 40px 0 10px
}

#contact .selectBox select::-ms-expand {
    display: none
}

#contact .privacy-policy {
    font-size: 16px
}

#location .container-fluid.bg {
    padding: 100px 0;
    background: #f8f8f8
}

#location h4 {
    position: relative;
    padding-left: 20px;
    color: #008DD2;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 1.3em
}

#location h4:before {
    content: '';
    width: 5px;
    height: 20px;
    background: #008dd2;
    position: absolute;
    left: 0
}

#location h4.no:before {
    opacity: 0
}

#location .mapBox {
    position: relative
}

#location .map {
    height: 648px;
    background: url(../images/map_bg.png) center center no-repeat;
    font-size: 14px
}

#location .map iframe {
    width: 100%;
    height: 100%;
    border: 0
}

#location .icon {
    position: absolute;
    color: #008DD2;
    line-height: 29px;
    font-size: 15px
}

#location .icon img {
    vertical-align: bottom;
}

#location .icon.white {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5)
}

#location .icon span {
    display: inline-block;
    padding: 3px;
    margin: 0 10px;
    font-size: 1.2em;
    font-style: italic
}

#location .icon span.name {
    margin: 0;
    padding: 0
}

#location .icon.one {
    right: 8.5%;
    top: 44.5%
}

#location .icon.two {
    right: 7%;
    top: 46%
}

#location .icon.three {
    right: 21%;
    top: 40%
}

#location .icon.four {
    right: 23%;
    top: 46%
}

#location .icon.five {
    top: 40%;
    right: 82%
}

#location .infobox {
    background: #EFEFEF;
    padding: 30px 36px;
    box-sizing: border-box;
    font-size: .9em;
    box-shadow: 0 5px 8px rgba(100,100,100,0.1) inset;
    margin-bottom: 30px;
    height: 338px
}

#location .infobox .ti {
    padding: 10px 0;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 20px
}

#location .infobox .ti span {
    display: inline-block;
    width: 30px;
    text-align: center;
    color: #fff;
    height: 30px;
    margin-right: 15px;
    line-height: 30px;
    background: #008dd2
}

#location .infobox .ti span.name {
    margin: 0
}

#location .infobox .ti .linkBtn {
    display: block;
    float: right
}

#location .infobox .list li {
    line-height: 2em
}

#location .infobox .list .fa {
    margin-right: 10px;
    width: 20px;
    color: #008dd2
}

@media only screen and (max-width: 1200px) {
    #location .map {
        height:600px;
        background-size: 100%
    }

    #location .icon span.name {
        display: none
    }

    #location .icon.one {
        right: 14.5%;
        top: 44.5%
    }

    #location .icon.two {
        right: 15%;
        top: 45.5%
    }

    #location .icon.three {
        right: 19%;
        top: 36%
    }

    #location .icon.four {
        right: 20%;
        r: ;
        op: 45%
    }

    #location .icon.five {
        top: 40%;
        left: 9%
    }
}

@media only screen and (max-width: 768px) {
    #location .container-fluid.bg {
        padding:50px auto
    }

    #location .map {
        height: 500px
    }
}

@media only screen and (max-width: 480px) {
    #location .map {
        height:256px
    }
}

#inquiryList .pBanner {
    background: url(../images/ban_inquiry.png) center center no-repeat
}

#inquiryList h4 {
    position: relative;
    padding-left: 20px;
    border-bottom: 1px solid #008dd2;
    color: #008dd2;
    padding-bottom: 10px;
    font-size: 1.2em;
    margin-bottom: 40px
}

#inquiryList h4:before {
    content: '';
    width: 3px;
    height: 20px;
    background: #008dd2;
    position: absolute;
    left: 0
}

#inquiryList .inquiryBox {
    border-bottom: 1px solid #ddd;
    margin: 20px 0 0;
    padding-bottom: 15px
}

#inquiryList .inquiryBox .picBox {
}

#inquiryList .inquiryBox .picBox img {
    width: 100%;
    margin: 0 auto;
    max-width: 100%
}

#inquiryList .inquiryBox .num {
    padding: 10px 0;
    text-align: center;
    font-size: 1.2em
}

#inquiryList .inquiryBox .delete {
    border: none;
    background: #008dd2;
    color: #fff;
    margin: 0 auto;
    width: 80px;
    padding: 5px;
    display: block;
    float: none
}

#inquiryList .inquiryBox textarea {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    min-height: 114px;
    border-color: #ddd;
    height: 100%
}

#inquiryList .inquiryBox:last-child {
    margin-bottom: 50px
}

#inquiryList label {
    float: left;
    width: 140px
}

#inquiryList .input {
    width: calc(100% - 140px);
    float: left
}

#inquiryList input {
    width: 100%;
    position: relative;
    border: 1px solid #dbdbdb;
    margin-bottom: 20px;
    padding: 3px 10px;
    box-sizing: border-Box;
    border-radius: 0;
    height: 38px
}

#inquiryList .input textarea {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    min-height: 114px;
    border-color: #ddd;
    height: 100%
}

#inquiryList .btnBox {
    text-align: right
}

#inquiryList .btnReset,#inquiryList .btnSubmit {
    border: none;
    color: #fff;
    float: none;
    padding: 14px 0;
    outline: none;
    background: #000;
    width: 151px
}

#inquiryList .btnSubmit {
    background: #008dd2
}

.reset-box-sizing,.reset-box-sizing *,.reset-box-sizing *:before,.reset-box-sizing *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

ul.reset {
    margin: 0;
    padding: 0;
    list-style: none
}

.header {
    position: fixed;
    z-index: 100;
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.15);
    top: 0;
    left: 0
}

.header a {
    text-decoration: none
}

.header .option {
    width: 100%;
    height: 38px;
    background: #22aee9;
    font-size: 0;
    text-align: right
}

.header .option >div {
    display: inline-block;
    position: relative;
    vertical-align: top;
    border-right: 1px solid rgba(255,255,255,.5)
}

.header .option >div:last-child {
    border-right: none
}

.header .option >div a {
    display: block;
    position: relative;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    color: #fff;
    padding: 0 15px
}

.header .option >div a:hover,.header .option >div:hover >a {
    background-color: #0088c1 !important
}

.header .option >div a i {
    margin-right: 8px
}

.header .option >div a.select {
    padding-right: 32px
}

.header .option >div a.select:after {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    top: 14px;
    right: 17px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.header .option >div a.lang {
    padding-left: 63px;
    background: url('../images/lan.png') 15px center no-repeat
}

.header .option .option-sub {
    position: absolute;
    z-index: 100;
    width: 140px;
    background: #22aee9;
    top: 38px;
    right: 0;
    display: none
}

.header .option >div:hover .option-sub {
    display: block
}

.header .option .option-sub >li {
    border-top: 1px solid rgba(255,255,255,.5)
}

.header .option .option-sub >li >a {
    display: block;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    text-align: center
}

.header .nav {
    position: relative;
    padding-top: 35px;
    padding-left: 15px;
    padding-bottom: 35px;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out
}

.header.scroll .nav {
    padding-top: 10px;
    padding-bottom: 5px
}

.header .nav a.logo {
    display: block;
    float: left;
    width: 135px;
    height: 36px;
    font-size: 0;
    background: url('../images/logo.png') no-repeat
}

.header .nav a.switch {
    display: none
}

.header .nav a.share {
    display: block;
    float: right;
    width: auto;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #666;
    margin: 0
}

.header .nav a.share:hover {
    color: #000
}

.header .nav a.share i {
    font-size: 24px;
    color: #999;
    vertical-align: middle;
    margin-right: 10px
}

.header .nav a.share:hover i {
    color: #333
}

.header .nav .lang {
    float: right;
    position: relative
}

.header .nav .lang a.lang-select {
    display: block;
    position: relative;
    width: 80px;
    height: 36px;
    line-height: 34px;
    font-size: 12px;
    color: #333;
    border: 1px solid #333;
    border-radius: 3px;
    padding-left: 6px;
    opacity: .5
}

.header .nav .lang:hover a.lang-select {
    opacity: 1
}

.header .nav .lang a.lang-select:after {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    top: 12px;
    right: 7px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.header .nav .lang .lang-sub {
    position: absolute;
    width: 100%;
    border: 1px solid #666;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0,0,0,.25);
    top: 38px;
    left: 0;
    display: none
}

.header .nav .lang:hover .lang-sub {
    display: block
}

.header .nav .lang .lang-sub:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    top: -3px;
    left: 0
}

.header .nav .lang .lang-sub li a {
    display: block;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    color: #666;
    background: #fff;
    text-align: center
}

.header .nav .lang .lang-sub li a:hover {
    background: #f5f5f5
}

.header .nav .search {
    float: right;
    position: relative;
    margin-right: 10px
}

.header .nav .search input {
    display: block;
    width: 110px;
    height: 36px;
    font-size: 12px;
    border: 1px solid #999;
    background: #fff;
    border-radius: 3px;
    padding: 0 20px 0 4px;
    outline: none
}

.header .nav .search input::-ms-input-placeholder {
    font-size: 12px
}

.header .nav .search input:-moz-placeholder {
    font-size: 12px
}

.header .nav .search input::-moz-placeholder {
    font-size: 12px
}

.header .nav .search input::-webkit-input-placeholder {
    font-size: 12px
}

.header .nav .search input:focus {
    border-color: #333
}

.header .nav .search button {
    display: block;
    position: absolute;
    width: 20px;
    height: 34px;
    color: #999;
    border: none;
    background: #fff;
    border-radius: 3px;
    top: 1px;
    right: 1px;
    padding: 0
}

.header .nav .search button:hover {
    color: #333
}

.header .nav .nav-menu {
    position: absolute;
    top: 35px;
    left: 165px;
    font-size: 0;
    transition: top .3s ease-in-out;
    -ms-transition: top .3s ease-in-out;
    -moz-transition: top .3s ease-in-out;
    -webkit-transition: top .3s ease-in-out
}

.header.scroll .nav .nav-menu {
    top: 10px
}

.header .nav .nav-menu >li {
    display: inline-block;
    position: relative;
    vertical-align: top
}

.header .nav .nav-menu >li.lang-xs {
    display: none
}

.header .nav .nav-menu >li:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 22px;
    background: #e2e2e2;
    top: 7px;
    left: 0
}

.header .nav .nav-menu >li >a {
    display: block;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    color: #000;
    padding: 0 12px
}

.header .nav .nav-menu >li:hover >a {
    color: #2aaee9
}

.header .nav .nav-sub-wrap {
    position: fixed;
    z-index: 99;
    width: 100%;
    border-top: 1px solid #ddd;
    background: rgba(255,255,255,.9);
    padding: 20px 165px;
    top: 144px;
    left: 0;
    display: none;
    transition: top .3s ease-in-out;
    -ms-transition: top .3s ease-in-out;
    -moz-transition: top .3s ease-in-out;
    -webkit-transition: top .3s ease-in-out
}

.header.scroll .nav .nav-sub-wrap {
    top: 89px
}

.header .nav .nav-menu >li:hover >.nav-sub-wrap {
    display: block
}

.header .nav .nav-sub-wrap:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 36px;
    top: -36px;
    left: 0
}

.header.scroll .nav .nav-sub-wrap:before {
    height: 6px;
    top: -6px
}

.header .nav .nav-sub-wrap .nav-sub li {
    display: inline-block;
    position: relative;
    padding: 0 15px;
    vertical-align: top
}

.header .nav .nav-sub-wrap .nav-sub li:after {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    background: #bbb;
    top: 50%;
    right: -2px;
    margin-top: -2px
}

.header .nav .nav-sub-wrap .nav-sub li:last-child:after {
    display: none
}

.header .nav .nav-sub-wrap .nav-sub li a {
    display: block;
    text-align: center;
    font-size: 16px;
    color: #555
}

.header .nav .nav-sub-wrap .nav-sub li a:hover {
    color: #22aee9
}

.header .nav .nav-sub-wrap .nav-sub li a .ico {
    height: 60px
}

.header .nav .nav-sub-wrap .nav-sub li a .ico img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

.header .nav .nav-sub-wrap .nav-sub li a span {
    display: block;
    font-size: 16px;
    color: #555;
    margin-top: 15px;
    padding: 0 15px
}

.header .nav .nav-sub-wrap .nav-sub li a:hover span {
    color: #22aee9
}

.header .nav .nav-sub-v {
    min-width: 100%;
    background: rgba(255,255,255,.9);
    top: 71px;
    left: 50%;
    opacity: 0;
    box-shadow: 0 1px 5px rgba(0,0,0,.15);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transition: top .3s ease-in-out;
    -ms-transition: top .3s ease-in-out;
    -moz-transition: top .3s ease-in-out;
    -webkit-transition: top .3s ease-in-out
}

.header.scroll .nav .nav-sub-v {
    top: 41px
}

.header .nav .nav-sub-v:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 36px;
    top: -36px;
    left: 0
}

.header.scroll .nav .nav-sub-v:before {
    height: 6px;
    top: -6px
}

.header .nav .nav-sub-v >li {
    border-top: 1px solid #ddd
}

.header .nav .nav-sub-v >li >a {
    display: block;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    color: #555;
    text-align: center;
    padding: 0 25px
}

.header .nav .nav-sub-v >li >a:hover {
    color: #22aee9;
    background: #fff
}

@media (max-width: 1199px) {
    .header .nav {
        padding-top:10px !important;
        padding-bottom: 10px !important
    }

    .header .nav a.switch {
        display: block;
        position: relative;
        float: right;
        width: 36px;
        height: 36px;
        border: 1px solid #999;
        border-radius: 3px;
        margin-left: 15px;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out
    }

    .header .nav a.switch:hover,.header .nav a.switch.open {
        border-color: #22aee9;
        background: #22aee9
    }

    .header .nav a.switch span {
        display: block;
        position: absolute;
        width: 18px;
        height: 2px;
        background: #999;
        left: 8px;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out
    }

    .header .nav a.switch:hover span,.header .nav a.switch.open span {
        background: #fff
    }

    .header .nav a.switch span:nth-child(1) {
        top: 10px
    }

    .header .nav a.switch span:nth-child(2),.header .nav a.switch span:nth-child(3) {
        top: 16px
    }

    .header .nav a.switch span:nth-child(4) {
        top: 22px
    }

    .header .nav a.switch.open span:nth-child(1),.header .nav a.switch.open span:nth-child(4) {
        width: 2px;
        opacity: 0;
        top: 16px;
        left: 16px
    }

    .header .nav a.switch.open span:nth-child(2) {
        width: 20px;
        left: 7px;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg)
    }

    .header .nav a.switch.open span:nth-child(3) {
        width: 20px;
        left: 7px;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg)
    }

    .header .nav .nav-menu {
        position: fixed;
        z-index: 150;
        width: 200px;
        height: 100%;
        background: #fff;
        top: 0 !important;
        left: auto;
        right: -200px
    }

    .header .nav .nav-menu >li {
        display: block;
        border-bottom: 1px solid #ddd
    }

    .header .nav .nav-menu >li:before {
        display: none
    }

    .header .nav .nav-menu >li >a {
        font-size: 16px;
        text-align: center
    }

    .header .nav .nav-sub-wrap {
        display: block;
        z-index: 151;
        width: 200px;
        height: 100%;
        background: #fff;
        top: 0 !important;
        left: auto;
        right: -210px;
        padding: 0;
        transition: right .3s ease-in-out;
        -ms-transition: right .3s ease-in-out;
        -moz-transition: right .3s ease-in-out;
        -webkit-transition: right .3s ease-in-out
    }

    .header .nav .nav-sub-wrap .nav-sub li {
        display: block;
        border-bottom: 1px solid #ddd
    }

    .header .nav .nav-sub-wrap .nav-sub li:after {
        display: none
    }

    .header .nav .nav-sub-wrap .nav-sub li a {
        padding: 10px
    }

    .header .nav .nav-sub-wrap .nav-sub li a.back-nav-sub {
        height: 36px;
        line-height: 36px;
        font-size: 15px;
        color: #999;
        padding: 0
    }

    .header .nav .nav-sub-wrap .nav-sub li a .ico {
        float: left;
        width: 60px
    }

    .header .nav .nav-sub-wrap .nav-sub li a span {
        float: right;
        width: calc(100% - 65px);
        text-align: left
    }

    .header .nav .nav-sub-v {
        position: fixed !important;
        display: block !important;
        z-index: 151;
        width: 200px !important;
        min-width: auto;
        height: 100%;
        background: #fff;
        top: 0 !important;
        left: auto;
        right: -210px;
        padding: 0;
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transition: right .3s ease-in-out;
        -ms-transition: right .3s ease-in-out;
        -moz-transition: right .3s ease-in-out;
        -webkit-transition: right .3s ease-in-out
    }

    .header .nav .nav-sub-v li a.back-nav-sub {
        height: 36px;
        line-height: 36px;
        font-size: 15px;
        color: #999;
        padding: 0
    }
}

@media (max-width: 639px) {
    .header .option {
        padding:0
    }

    .header .option >div {
        width: 25%
    }

    .header .option >div:first-child {
        border-left: 1px solid rgba(255,255,255,.5)
    }

    .header .option >div a {
        text-align: center;
        padding: 0 5px
    }

    .header .option >div a.select:not(.lang) {
        padding-right: 15px
    }

    .header .option >div a.select:after {
        display: none
    }

    .header .option >div a i {
        line-height: 38px;
        font-size: 14px;
        margin-right: 0
    }

    .header .option .option-sub a {
        font-size: 14px
    }

    .header .option .option-sub.member {
        display: none !important
    }
}

@media (max-width: 479px) {
    .header .nav a.logo {
        width:112px;
        height: 30px;
        background-size: 112px 30px;
        margin-top: 3px
    }

    .header .nav a.share {
        font-size: 0
    }

    .header .nav a.switch {
        margin-left: 10px
    }

    .header .nav .lang {
        display: none
    }

    .header .nav .search {
        margin-right: 0
    }

    .header .nav .nav-menu >li.lang-xs {
        display: block;
        text-align: center
    }

    .header .nav .nav-menu >li.lang-xs >a {
        display: inline;
        font-size: 14px;
        color: #000
    }

    .header .nav .nav-menu >li.lang-xs >a:hover {
        color: #2aaee9
    }
}

.footer {
    background: #fff;
    padding-top: 0
}

.footer .links {
    background: #17a8e5;
    padding: 30px 0 20px
}

.footer .links ul {
    margin: auto;
    padding: 0 15px
}

.footer .links ul li {
    display: inline-block;
    vertical-align: top;
    padding-right: 115px
}

.footer .links ul li:last-child {
    padding-right: 0
}

.footer .links ul li .ti {
    line-height: 26px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin: 0
}

.footer .links ul li .ti a {
    color: #fff
}

.footer .links ul li .subs {
    margin-top: 10px
}

.footer .links ul li span {
    display: block;
    line-height: 22px;
    font-size: 14px
}

.footer .links ul li span a {
    color: #b2eaff;
    text-decoration: none
}

.footer .links ul li span a:hover {
    color: #fff
}

.footer .copy {
    padding: 20px 15px 25px
}

.footer .copy a.logo {
    display: block;
    float: left;
    width: 112px;
    height: 30px;
    font-size: 0;
    background: url('../images/logo.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 10px
}

.footer .copy .txt {
    float: left;
    line-height: 30px;
    font-size: 13px;
    color: #888
}

.footer .copy .txt a {
    color: #888;
    text-decoration: none
}

.footer .copy .txt a:hover {
    color: #000
}

.footer .copy .social {
    float: right
}

.footer .copy .social li {
    display: inline-block;
    height: 30px;
    vertical-align: top;
    margin-right: 15px
}

.footer .copy .social li:last-child {
    margin-right: 0
}

.footer .copy .social li a {
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    color: #666;
    text-decoration: none
}

.footer .copy .social li a:hover {
    color: #000
}

.footer .copy .social li a i {
    display: inline-block;
    line-height: 30px;
    font-size: 14px;
    color: #777;
    vertical-align: top;
    padding: 0;
    margin-right: 8px
}

.footer .copy .social li a:hover i {
    color: #000
}

@media (min-width: 992px) and (max-width:1199px) {
    .footer .links ul li {
        padding-right:66px
    }

    .footer .copy {
        width: 970px
    }
}

@media (max-width: 991px) {
    .footer .links ul li {
        width:calc(25% - 4px);
        margin-bottom: 10px;
        padding-right: 0
    }

    .footer .links ul li:last-child {
        width: 100%;
        margin-bottom: 0
    }

    .footer .links ul li:last-child .ti {
        display: inline-block;
        width: calc(25% - 4px);
        margin-bottom: 10px
    }

    .footer .links ul li:last-child .ti:last-child {
        margin-right: 0
    }

    .footer .copy {
        width: 750px
    }
}

@media (max-width: 767px) {
    .footer .links ul {
        padding:0 15px
    }

    .footer .copy {
        width: 100%
    }

    .footer .copy .social {
        float: left;
        width: 100%;
        margin-top: 5px;
        text-align: left
    }
}

@media (max-width: 639px) {
    .footer .links ul li {
        width:calc(50% - 3px)
    }

    .footer .links ul li:last-child .ti {
        width: calc(50% - 3px)
    }
}

@media (max-width: 479px) {
    .footer .links ul li {
        display:block;
        width: 100%
    }

    .footer .links ul li .subs {
        margin-top: 5px
    }

    .footer .links ul li .subs span {
        display: inline-block;
        position: relative;
        line-height: 26px;
        margin-right: 17px
    }

    .footer .links ul li .subs span:last-child {
        margin-right: 0
    }

    .footer .links ul li .subs span:after {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        height: 14px;
        background: #b2eaff;
        top: 6px;
        right: -11px
    }

    .footer .links ul li .subs span:last-child:after {
        display: none
    }

    .footer .copy a.logo {
        float: none
    }

    .footer .copy .txt {
        float: none;
        width: 100%;
        margin: 8px 0 0
    }

    .footer .copy .social {
        float: none;
        margin-top: 0
    }
}

a.go-top {
    display: block;
    position: fixed;
    width: 40px;
    height: 40px;
    font-size: 12px;
    font-family: 'Arial',Sans-serif;
    color: #fff;
    background: #008dd2;
    border-radius: 100%;
    text-align: center;
    padding-top: 18px;
    right: 40px;
    bottom: 60px;
    opacity: .75;
    text-decoration: none;
    transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0)
}

a.go-top.view {
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1)
}

a.go-top:hover {
    opacity: 1
}

a.go-top:before {
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    top: 9px;
    left: 15px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.g-wrap {
    padding-top: 144px
}

@media (max-width: 1199px) {
    .g-wrap {
        padding-top:94px
    }
}

.p-ban {
    position: relative;
    height: 272px;
    margin-bottom: 60px
}

.p-ban .p-ban-pic {
    overflow: hidden
}

.p-ban .p-ban-pic img {
    position: relative;
    width: 1936px;
    max-width: none;
    height: 270px;
    left: 50%;
    margin-left: -968px
}

.p-ban .container {
    position: relative;
    height: 272px;
    margin-top: -270px;
    padding: 60px 15px 0
}

.p-ban .p-ti {
    font-size: 45px;
    color: #fff;
    text-shadow: 2px 1px 2px rgba(0,0,0,.85);
    text-transform: uppercase
}

.p-ban .p-small {
    max-width: 440px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,.45)
}

.p-ban .p-nav {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 45px;
    left: 0;
    bottom: 0;
    padding: 0 15px
}

.p-ban .p-nav ul {
    font-size: 0
}

.p-ban .p-nav ul li {
    display: inline-block;
    vertical-align: top;
    padding-right: 1px
}

.p-ban .p-nav ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    color: #444;
    background: #eee;
    text-align: center;
    text-decoration: none;
    padding: 0 15px
}

.p-ban .p-nav ul li.current a,.p-ban .p-nav ul li a:hover {
    color: #008dd2;
    background: #fff
}

@media (max-width: 991px) {
    .p-ban {
        height:182px;
        margin-bottom: 40px
    }

    .p-ban .p-ban-pic img {
        width: 1290px;
        height: 180px;
        margin-left: -645px
    }

    .p-ban .container {
        height: 182px;
        margin-top: -180px;
        padding: 20px 15px 0
    }

    .p-ban .p-ti {
        font-size: 30px
    }

    .p-ban .p-nav {
        height: 35px
    }

    .p-ban .p-nav a.p-nav-btn {
        display: block;
        position: relative;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        color: #fff;
        background: #008dd2;
        text-decoration: none;
        padding: 0 15px
    }

    .p-ban .p-nav a.p-nav-btn i {
        display: block;
        position: absolute;
        height: 25px;
        line-height: 25px;
        top: 5px;
        right: 15px;
        transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out
    }

    .p-ban .p-nav a.p-nav-btn.open i {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg)
    }

    .p-ban .p-nav ul {
        position: absolute;
        z-index: 10;
        width: calc(100% - 30px);
        border: 1px solid #eee;
        border-top: none;
        top: 35px;
        display: none
    }

    .p-ban .p-nav ul li {
        display: block;
        width: 100% !important;
        padding-right: 0
    }

    .p-ban .p-nav ul li a {
        height: 35px;
        line-height: 35px;
        text-align: left
    }
}

.p-pager {
    margin-top: 50px;
    text-align: center
}

.p-pager a {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 36px;
    line-height: 34px;
    font-size: 16px;
    font-family: 'Arial',Sans-serif;
    color: #008dd2;
    border: 1px solid #008dd2;
    vertical-align: top;
    margin: 0 3px;
    text-decoration: none
}

.p-pager a:hover,.p-pager a.current {
    color: #fff;
    background: #008dd2
}

.p-pager a.prev:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 6px solid #008dd2;
    border-bottom: 4px solid transparent;
    top: 13px;
    left: 14px
}

.p-pager a.next:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-left: 6px solid #008dd2;
    border-bottom: 4px solid transparent;
    top: 13px;
    left: 14px
}

.p-pager a.prev:hover:after,.p-pager a.next:hover:after {
    border-left-color: #fff;
    border-right-color: #fff
}

.p-pager a.prev.disabled,.p-pager a.next.disabled {
    border-color: #ddd;
    background: none;
    cursor: not-allowed
}

.p-pager a.prev.disabled:after,.p-pager a.next.disabled:after {
    border-left-color: #ddd;
    border-right-color: #ddd
}

@media (max-width: 479px) {
    .p-pager a.num:nth-child(n+5) {
        display:none
    }
}

.p-bot-box {
    margin-top: 50px;
    padding: 15px;
    border-top: 1px solid #008dd2;
    border-bottom: 1px solid #008dd2
}

.p-bot-box a {
    display: block;
    position: relative;
    width: calc(50% - 10px);
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.p-bot-box a:hover {
    color: #008dd2
}

.p-bot-box a.prev {
    float: left;
    padding-left: 90px
}

.p-bot-box a.prev:before {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-left: 3px solid #008dd2;
    border-bottom: 3px solid #008dd2;
    top: 5px;
    left: 6px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.p-bot-box a.prev:after {
    content: 'BACK /';
    display: block;
    position: absolute;
    font-size: 18px;
    color: #008dd2;
    top: 0;
    left: 35px
}

.p-bot-box a.next {
    float: right;
    padding-right: 90px
}

.p-bot-box a.next:before {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 3px solid #008dd2;
    border-right: 3px solid #008dd2;
    top: 5px;
    right: 6px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.p-bot-box a.next:after {
    content: '/ NEXT';
    display: block;
    position: absolute;
    font-size: 18px;
    color: #008dd2;
    top: 0;
    right: 35px
}

@media (max-width: 767px) {
    .p-bot-box a {
        width:100%
    }

    .p-bot-box a.next {
        margin-top: 5px
    }
}

#index .banner {
    position: relative;
    margin-top: 0;
    overflow: hidden
}

#index .ban-slick .slick-dots {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
}

#index .ban-slick .slick-dots li {
    display: inline-block;
    vertical-align: top
}

#index .ban-slick .slick-dots li button {
    display: block;
    position: relative;
    width: 14px;
    height: 14px;
    font-size: 0;
    border: 1px solid #fff;
    background: none;
    border-radius: 100%;
    margin: 0 5px;
    outline: none
}

#index .ban-slick .slick-dots li.slick-active button:after {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 100%;
    top: 3px;
    left: 3px
}

#index .banner .ban-prev,#index .banner .ban-next {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,.75);
    border-radius: 100%;
    top: 50%;
    margin-top: -25px
}

#index .banner .ban-prev {
    left: 30px
}

#index .banner .ban-prev:before {
    content: '';
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    border-left: 2px solid #777;
    border-bottom: 2px solid #777;
    top: 18px;
    left: 21px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#index .banner .ban-next {
    right: 30px
}

#index .banner .ban-next:before {
    content: '';
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 2px solid #777;
    border-right: 2px solid #777;
    top: 18px;
    right: 21px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#index .news {
    position: relative;
    padding: 60px 15px
}

#index .news-slick .slick-slide {
    padding: 0 60px
}

#index .news-slick:before,#index .news-slick:after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 100px;
    background: #e8e8e8;
    top: 5px;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg)
}

#index .news-slick:before {
    left: 33.333%
}

#index .news-slick:after {
    right: 33.333%
}

#index .news-slick .date {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #888;
    background: #fff
}

#index .news-slick .date strong {
    display: inline-block;
    font-size: 40px;
    font-weight: normal;
    color: #000;
    margin-right: 10px;
    vertical-align: middle
}

#index .news-slick .date span {
    display: inline-block;
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle
}

#index .news-slick .date i {
    display: inline-block;
    height: 50px;
    line-height: 52px;
    font-style: normal;
    vertical-align: middle
}

#index .news-slick .info {
    padding-top: 10px;
    font-size: 15px;
    color: #333;
    background: #fff
}

#index .news a.news-prev,#index .news a.news-next {
    display: block;
    position: absolute;
    width: 25px;
    height: 45px;
    top: 50%;
    margin-top: -22.5px
}

#index .news a.news-prev {
    left: 15px;
    background: url('../images/left.png') no-repeat
}

#index .news a.news-next {
    right: 15px;
    background: url('../images/right.png') no-repeat
}

#index .sec {
}

#index .sec .ti {
    font-size: 30px;
    font-weight: bold;
    font-family: 'Microsoft JhengHei',Sans-serif;
    color: #008dd2;
    text-align: center
}

#index .sec .info {
    font-size: 18px;
    padding: 0 15px;
    margin: 25px auto 0;
    text-align: center
}

#index .sec .sec-list {
    max-width: 1170px;
    margin: 25px auto;
    padding: 0 15px
}

#index .sec .sec-list .box {
    float: left;
    width: 50%;
    margin-bottom: 4px;
    overflow: hidden
}

#index .sec .sec-list .box .pic {
    float: left;
    position: relative;
    width: 50%;
    overflow: hidden
}

#index .sec .sec-list .box:nth-child(4n+3) .pic,#index .sec .sec-list .box:nth-child(4n) .pic {
    float: right
}

#index .sec .sec-list .box .pic img {
    display: block;
    position: relative;
    height: 200px;
    width: auto;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
}

#index .sec .sec-list .box .pic img.hover {
    position: absolute;
    top: 0;
    opacity: 0
}

#index .sec .sec-list .box:hover .pic img.hover {
    opacity: 1
}

#index .sec .sec-list .box .txt {
    float: right;
    position: relative;
    width: 50%;
    height: 200px;
    text-align: center;
    padding: 0 15px
}

#index .sec .sec-list .box:nth-child(4n+3) .txt,#index .sec .sec-list .box:nth-child(4n) .txt {
    float: left
}

#index .sec .sec-list .box:nth-child(3n+1) .txt {
    background: #22aee9
}

#index .sec .sec-list .box:nth-child(3n+2) .txt {
    background: #ffa800
}

#index .sec .sec-list .box:nth-child(3n) .txt {
    background: #00ad86
}

#index .sec .sec-list .box:hover .txt {
    background: url('../images/index_sec_bg.jpg')
}

#index .sec .sec-list .box .txt:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-right: 14px solid;
    border-bottom: 12px solid transparent;
    top: 45px;
    left: -14px
}

#index .sec .sec-list .box:nth-child(4n+3) .txt:before,#index .sec .sec-list .box:nth-child(4n) .txt:before {
    border-left: 14px solid;
    border-right: none;
    left: auto;
    right: -14px
}

#index .sec .sec-list .box:nth-child(3n+1) .txt:before {
    border-left-color: #22aee9;
    border-right-color: #22aee9
}

#index .sec .sec-list .box:nth-child(3n+2) .txt:before {
    border-left-color: #ffa800;
    border-right-color: #ffa800
}

#index .sec .sec-list .box:nth-child(3n) .txt:before {
    border-left-color: #00ad86;
    border-right-color: #00ad86
}

#index .sec .sec-list .box:hover .txt:before {
    border-left-color: #343434;
    border-right-color: #343434
}

#index .sec .sec-list .box .txt >div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#index .sec .sec-list .box .txt .box-ti {
    line-height: 45px;
    font-size: 35px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,.2);
    padding-bottom: 15px
}

#index .sec .sec-list .box .txt .box-ti img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px
}

#index .sec .sec-list .box .txt .box-links {
    font-size: 0;
    text-align: left;
    display: none
}

#index .sec .sec-list .box .txt .box-links a {
    display: inline-block;
    width: calc(50% - 4px);
    height: 34px;
    line-height: 34px;
    font-size: 16px;
    color: #fff;
    background: #22aee9;
    padding: 0 4px;
    margin: 0 1px 4px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#index .sec .sec-list .box .txt .box-links a:hover {
    background: #0088c1;
    text-shadow: 1px 1px 0 rgba(0,0,0,.2)
}

#index .sec .sec-list .box:nth-child(3n+1) .txt .box-links a {
    background: #22aee9
}

#index .sec .sec-list .box:nth-child(3n+2) .txt .box-links a {
    background: #ffa800
}

#index .sec .sec-list .box:nth-child(3n) .txt .box-links a {
    background: #00ad86
}

#index .sec .sec-list .box:nth-child(3n+1) .txt .box-links a:hover {
    background: #0088c1
}

#index .sec .sec-list .box:nth-child(3n+2) .txt .box-links a:hover {
    background: #f38400
}

#index .sec .sec-list .box:nth-child(3n) .txt .box-links a:hover {
    background: #008d6d
}

#index .about {
    font-size: 0;
    margin-top: 60px;
    margin-bottom: 40px
}

#index .about .box {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    margin-bottom: 20px;
    padding: 0 15px
}

#index .about .box .ico {
    height: 80px
}

#index .about .box .ico img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#index .about .box .ti {
    height: 60px;
    line-height: 30px;
    font-size: 26px;
    font-style: italic;
    color: #000;
    text-transform: uppercase;
    margin-top: 15px
}

#index .about .box .info {
    line-height: 24px;
    font-size: 13px;
    color: #777;
    margin-top: 15px
}

@media (max-width: 1599px) {
    #index .sec .sec-list {
        padding:0 15px
    }

    #index .sec .sec-list .box .txt {
        padding: 0 15px
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    #index .sec .sec-list .box .txt .box-links a {
        width:calc(50% - 2px)
    }
}

@media (max-width: 991px) {
    #index .ban-slick {
        width:992px;
        left: 50%;
        margin-left: -496px
    }

    #index .news-slick:before {
        left: 50%
    }

    #index .news-slick:after {
        display: none
    }

    #index .sec .sec-list {
        max-width: 750px
    }

    #index .sec .sec-list .box {
        width: 100%
    }

    #index .sec .sec-list .box .pic {
        float: left !important
    }

    #index .sec .sec-list .box .txt {
        float: right !important
    }

    #index .sec .sec-list .box:nth-child(4n+3) .txt:before,#index .sec .sec-list .box:nth-child(4n) .txt:before {
        border-left: none;
        border-right-width: 14px;
        border-right-style: solid;
        left: -14px;
        right: auto
    }

    #index .sec .sec-list .box .txt .box-links {
        height: auto !important;
        display: block !important;
        overflow: visible !important
    }

    #index .sec .sec-list .box .txt .box-links a {
        border: 1px solid #fff;
        line-height: 32px
    }

    #index .about .box {
        width: 50%
    }
}

@media (max-width: 639px) {
    #index .ban-slick {
        width:768px;
        margin-left: -384px
    }

    #index .news-slick:before {
        display: none
    }

    #index .sec .sec-list .box .pic {
        float: none;
        width: 100%
    }

    #index .sec .sec-list .box .pic img {
        width: 100%;
        height: auto
    }

    #index .sec .sec-list .box .txt {
        float: none;
        width: 100%;
        height: auto;
        padding: 15px
    }

    #index .sec .sec-list .box .txt:before {
        border-top: none;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 14px solid;
        top: -14px;
        left: 45px
    }

    #index .sec .sec-list .box:nth-child(3n+1) .txt:before {
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #22aee9
    }

    #index .sec .sec-list .box:nth-child(3n+2) .txt:before {
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #ffa800
    }

    #index .sec .sec-list .box:nth-child(3n) .txt:before {
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #00ad86
    }

    #index .sec .sec-list .box:hover .txt:before {
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #343434
    }

    #index .sec .sec-list .box .txt >div {
        top: 0;
        transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0)
    }

    #index .about .box {
        width: 100%
    }
}

@media (max-width: 479px) {
    #index .sec .sec-list .box .txt .box-links a {
        width:calc(50% - 2px)
    }
}

#industries .retail-list .news {
    float: right;
    position: relative;
    width: 33.333%
}

#industries .retail-list .news .ti {
    height: 26px;
    line-height: 26px;
    font-size: 23px;
    font-family: 'Arial','Microsoft JhengHei',Sans-serif;
    padding-left: 20px;
    margin: 5px 0 0;
    border-left: 4px solid #008dd2
}

#industries .retail-list .news .ti strong {
    font-weight: normal;
    color: #008dd2;
    text-transform: uppercase
}

#industries .retail-list .news .news-slick {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-top: 25px
}

#industries .retail-list .news .news-slick:before,#industries .retail-list .news .news-slick:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #ddd;
    left: 0
}

#industries .retail-list .news .news-slick:before {
    top: 33.333%
}

#industries .retail-list .news .news-slick:after {
    top: 66.667%
}

#industries .retail-list .news .news-slick .slick-slide a {
    display: block;
    padding: 14px;
    text-decoration: none
}

#industries .retail-list .news .news-slick .slick-slide a .date {
    float: left;
    width: 80px
}

#industries .retail-list .news .news-slick .slick-slide a .date strong {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    font-size: 35px;
    font-family: 'Arial','Microsoft JhengHei',Sans-serif;
    color: #008dd2;
    vertical-align: top
}

#industries .retail-list .news .news-slick .slick-slide a .date span {
    display: inline-block;
    height: 36px;
    line-height: 18px;
    font-size: 12px;
    color: #0371a6;
    text-align: center;
    vertical-align: top
}

#industries .retail-list .news .news-slick .slick-slide a .title {
    float: right;
    width: calc(100% - 80px);
    height: 36px;
    line-height: 18px;
    font-size: 13px;
    color: #333;
    padding-left: 5px;
    margin: 0;
    overflow: hidden
}

#industries .retail-list .news .aw {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 0;
    right: 0
}

#industries .retail-list .news .aw:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 51px;
    background: #d8d8d8;
    top: -7px;
    left: 18px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-list .news .aw .news-prev {
    display: block;
    position: absolute;
    width: 9px;
    height: 15px;
    top: 0;
    left: 0
}

#industries .retail-list .news .aw .news-prev:after {
    content: '';
    display: block;
    position: absolute;
    width: 9px;
    height: 9px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    top: 3px;
    left: 3px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-list .news .aw .news-next {
    display: block;
    position: absolute;
    width: 9px;
    height: 15px;
    right: 0;
    bottom: 0
}

#industries .retail-list .news .aw .news-next:after {
    content: '';
    display: block;
    position: absolute;
    width: 9px;
    height: 9px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    top: 3px;
    right: 3px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-list .intro {
    float: left;
    width: 66.667%;
    padding: 5px 45px
}

#industries .retail-list .intro .ti {
    line-height: 30px;
    font-size: 24px;
    color: #33a4db;
    margin: 0
}

#industries .retail-list .intro .cont {
    line-height: 26px;
    font-size: 16px;
    margin-top: 10px
}

#industries .retail-list .app {
    margin-top: 40px;
    margin-bottom: 60px
}

#industries .retail-list .app .ti {
    height: 26px;
    line-height: 26px;
    font-size: 21px;
    font-family: 'Arial','Microsoft JhengHei',Sans-serif;
    color: #008dd2;
    padding-left: 20px;
    margin: 0 45px;
    border-left: 4px solid #008dd2;
    text-transform: uppercase
}

#industries .retail-list .app .app-inner {
    position: relative;
    margin-top: 25px
}

#industries .retail-list .app .app-slick {
    margin: 0 35px
}

#industries .retail-list .app .app-slick .slick-slide a {
    display: block;
    position: relative;
    margin: 0 10px
}

#industries .retail-list .app .app-slick .slick-slide a:hover:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../images/indus_list_app_mask.png');
    top: 0;
    left: 0
}

#industries .retail-list .app .app-slick .slick-slide a .name {
    position: absolute;
    width: 100%;
    height: 60px;
    line-height: 24px;
    font-size: 17px;
    color: #fff;
    background: rgba(0,0,0,.8);
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0 15px;
    text-align: center
}

#industries .retail-list .app .app-slick .slick-slide a .name>div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#industries .retail-list .app .app-prev {
    display: block;
    position: absolute;
    width: 18px;
    height: 32px;
    top: 50%;
    left: 0;
    margin-top: -16px
}

#industries .retail-list .app .app-prev:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-left: 3px solid #008dd2;
    border-bottom: 3px solid #008dd2;
    top: 6px;
    left: 6px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-list .app .app-next {
    display: block;
    position: absolute;
    width: 18px;
    height: 32px;
    top: 50%;
    right: 0;
    margin-top: -16px
}

#industries .retail-list .app .app-next:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 3px solid #008dd2;
    border-right: 3px solid #008dd2;
    top: 6px;
    right: 6px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

@media (max-width: 991px) {
    #industries .retail-list .news {
        float:none;
        width: 100%;
        margin-top: 25px
    }

    #industries .retail-list .intro {
        float: none;
        width: 100%;
        padding: 0
    }

    #industries .retail-list .app {
        margin-top: 25px
    }

    #industries .retail-list .app .ti {
        margin: 0
    }
}

@media (max-width: 767px) {
    #industries .retail-list .app {
        margin-bottom:40px
    }
}

#industries .retail-view .top .pic {
    float: left;
    width: 50%;
    padding: 0 15px
}

#industries .retail-view .top .txt {
    float: right;
    width: 50%;
    padding: 0 25px
}

#industries .retail-view .top .txt .ti {
    font-size: 24px;
    color: #008dd2;
    border-left: 4px solid #008dd2;
    padding-left: 20px;
    margin: 10px 0 0
}

#industries .retail-view .top .txt .info {
    line-height: 30px;
    font-size: 16px;
    margin: 15px 0
}

#industries .retail-view .top .txt .btn-box a {
    display: inline-block;
    position: relative;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    color: #fff;
    padding: 0 18px 0 52px;
    margin-bottom: 4px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.15);
    text-decoration: none
}

#industries .retail-view .top .txt .btn-box a:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 37px;
    opacity: .1
}

#industries .retail-view .top .txt .btn-box a:hover:after {
    opacity: .2
}

#industries .retail-view .top .txt .btn-box a.btn-related {
    background: #008dd2 url('../images/icon_related.png') 18px center no-repeat
}

#industries .retail-view .top .txt .btn-box a.btn-related:hover {
    background-color: #006da2
}

#industries .retail-view .top .txt .btn-box a.btn-success {
    background: #00ad86 url('../images/icon_success.png') 18px center no-repeat
}

#industries .retail-view .top .txt .btn-box a.btn-success:hover {
    background-color: #008668
}

#industries .retail-view .top .txt .btn-box a.btn-related:after {
    background: rgba(0,140,210,1);
    background: -moz-linear-gradient(top,rgba(0,140,210,1) 0,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0,rgba(0,140,210,1)),color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,rgba(0,140,210,1) 0,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,rgba(0,140,210,1) 0,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,rgba(0,140,210,1) 0,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,rgba(0,140,210,1) 0,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008cd2',endColorstr='#ffffff',GradientType=0 )
}

#industries .retail-view .top .txt .btn-box a.btn-success:after {
    background: rgba(0,173,133,1);
    background: -moz-linear-gradient(top,rgba(0,173,133,1) 0,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0,rgba(0,173,133,1)),color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,rgba(0,173,133,1) 0,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,rgba(0,173,133,1) 0,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,rgba(0,173,133,1) 0,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,rgba(0,173,133,1) 0,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ad85',endColorstr='#ffffff',GradientType=0 )
}

#industries .retail-view .related {
    margin-top: 40px;
    padding: 0 15px
}

#industries .retail-view .related .ti {
    height: 26px;
    line-height: 26px;
    font-size: 23px;
    color: #008dd2;
    padding-left: 30px;
    background: url('../images/icon_telated_ti.png') left center no-repeat
}

#industries .retail-view .related .related-inner {
    position: relative;
    margin-top: 25px
}

#industries .retail-view .related .related-slick a {
    display: block;
    width: 90%;
    max-width: 310px;
    margin: 0 auto;
    text-decoration: none
}

#industries .retail-view .related .related-slick a .pic {
    position: relative
}

#industries .retail-view .related .related-slick a:hover .pic:before {
    content: '';
    display: block;
    position: absolute;
    width: 49px;
    height: 49px;
    background: url('../images/view.png') no-repeat;
    top: 0;
    right: 0
}

#industries .retail-view .related .related-slick a:hover .pic:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-bottom: none;
    top: 0;
    left: 0
}

#industries .retail-view .related .related-slick a .name {
    border-top: 1px solid #ccc;
    background: url('../images/indus_related_txt.jpg') top center no-repeat;
    background-size: 100% 30px;
    line-height: 24px;
    font-size: 18px;
    color: #000;
    text-align: center;
    padding: 10px 15px;
    margin: 0
}

#industries .retail-view .related .related-slick a:hover .name {
    color: #008dd2
}

#industries .retail-view .related .related-prev {
    display: block;
    position: absolute;
    width: 18px;
    height: 32px;
    top: 50%;
    left: -15px;
    margin-top: -16px
}

#industries .retail-view .related .related-prev:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-left: 3px solid #008dd2;
    border-bottom: 3px solid #008dd2;
    top: 6px;
    left: 6px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-view .related .related-next {
    display: block;
    position: absolute;
    width: 18px;
    height: 32px;
    top: 50%;
    right: -15px;
    margin-top: -16px
}

#industries .retail-view .related .related-next:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 3px solid #008dd2;
    border-right: 3px solid #008dd2;
    top: 6px;
    right: 6px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-view .related .related-prev.slick-disabled,#industries .retail-view .related .related-next.slick-disabled {
    display: none !important
}

#industries .retail-view .success {
    margin-top: 40px;
    padding: 60px 0 80px;
    background: url('../images/indus_success_bg.jpg')
}

#industries .retail-view .success .ti {
    font-size: 28px;
    font-style: italic;
    padding-top: 35px;
    background: url('../images/icon_advan_ti.png') top center no-repeat;
    text-align: center
}

#industries .retail-view .success .success-inner {
    position: relative;
    padding: 0 30px;
    margin-top: 40px
}

#industries .retail-view .success .success-slick .slick-slide table {
    width: 100%;
    table-layout: fixed
}

#industries .retail-view .success .success-slick .pic {
    width: 50%;
    padding-right: 15px;
    vertical-align: top
}

#industries .retail-view .success .success-pic-slick .slick-prev {
    display: block;
    position: absolute;
    z-index: 5;
    width: 30px;
    height: 30px;
    font-size: 0;
    border: none;
    background: #33a4db;
    left: 0;
    bottom: 0;
    opacity: .75
}

#industries .retail-view .success .success-pic-slick .slick-prev:after {
    content: '';
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    top: 9px;
    left: 12px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-view .success .success-pic-slick .slick-next {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    font-size: 0;
    border: none;
    background: #33a4db;
    left: 32px;
    bottom: 0;
    opacity: .75
}

#industries .retail-view .success .success-pic-slick .slick-next:after {
    content: '';
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    top: 9px;
    right: 12px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-view .success .success-pic-slick .slick-prev:hover,#industries .retail-view .success .success-pic-slick .slick-next:hover {
    opacity: 1
}

#industries .retail-view .success .success-slick .txt {
    width: 50%;
    background: #fff;
    padding: 30px;
    vertical-align: top
}

#industries .retail-view .success .success-slick .title {
    line-height: 28px;
    font-size: 22px;
    color: #0d82bc;
    margin: 0
}

#industries .retail-view .success .success-slick .info {
    line-height: 28px;
    font-size: 16px;
    margin-top: 5px
}

#industries .retail-view .success .success-prev {
    display: block;
    position: absolute;
    width: 18px;
    height: 32px;
    top: 50%;
    left: 0;
    margin-top: -16px
}

#industries .retail-view .success .success-prev:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-left: 3px solid #008dd2;
    border-bottom: 3px solid #008dd2;
    top: 6px;
    left: 6px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#industries .retail-view .success .success-next {
    display: block;
    position: absolute;
    width: 18px;
    height: 32px;
    top: 50%;
    right: 0;
    margin-top: -16px
}

#industries .retail-view .success .success-next:after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 3px solid #008dd2;
    border-right: 3px solid #008dd2;
    top: 6px;
    right: 6px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

@media (max-width: 991px) {
    #industries .retail-view .top .pic {
        float:none;
        width: 100%;
        max-width: 550px;
        margin: 0 auto;
        padding: 0
    }

    #industries .retail-view .top .txt {
        float: none;
        width: 100%;
        max-width: 550px;
        margin: 20px auto 0;
        padding: 0
    }
}

@media (max-width: 767px) {
    #industries .retail-view .related .related-inner,#industries .retail-view .success .success-inner {
        margin:25px 15px 0
    }

    #industries .retail-view .success .success-slick .slick-slide table,#industries .retail-view .success .success-slick .slick-slide table tbody,#industries .retail-view .success .success-slick .slick-slide table tr,#industries .retail-view .success .success-slick .slick-slide table td {
        display: block;
        width: 100%
    }

    #industries .retail-view .success .success-slick .slick-slide table {
        table-layout: auto
    }

    #industries .retail-view .success .success-slick .pic,#industries .retail-view .success .success-slick .txt {
        width: 100%;
        max-width: 515px;
        margin: 0 auto
    }

    #industries .retail-view .success .success-slick .pic {
        padding-right: 0
    }

    #industries .retail-view .success .success-slick .txt {
        padding: 15px
    }
}

#proList .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

#proView .contentBox {
    margin-top: 20px
}

#proView .txtBox .btnWrap a:hover {
    background: #ddd
}

#proView .txtBox .btnWrap a.inquery:hover {
    background: #0077b1
}

#proView .txtBox .btnWrap a.inquery2:hover {
    background: #ec6f00
}

#competitive .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

#competitive #new .ti {
    font-size: 24px;
    color: #008dd2;
    margin: 0
}

#competitive #new .info {
    line-height: 30px;
    font-size: 16px;
    color: #000;
    margin: 10px 0 0
}

#competitive #new .bar {
    position: relative;
    margin: 35px auto 0;
    overflow: hidden
}

#competitive #new .bar img {
    position: relative;
    width: 1140px;
    max-width: none;
    height: 198px;
    left: 50%;
    margin-left: -570px
}

#competitive #new .bar .txt {
    position: absolute;
    max-width: 350px;
    color: #fff;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#competitive #new .bar .sub-ti {
    font-size: 20px;
    margin: 0;
    text-transform: uppercase
}

#competitive #new .bar .sub-info {
    line-height: 20px;
    font-size: 15px;
    margin-top: 10px
}

#competitive #new .list {
    font-size: 0
}

#competitive #new .list .item {
    display: inline-block;
    width: calc(33.333% - 20px);
    vertical-align: top;
    margin-top: 30px
}

#competitive #new .list .item:nth-child(3n+2) {
    margin-left: 30px;
    margin-right: 30px
}

#competitive #new .list .item .title {
    line-height: 25px;
    font-size: 20px;
    color: #008dd2;
    padding: 10px 0;
    margin: 0
}

#competitive #new .list .item .cont {
    line-height: 20px;
    font-size: 15px;
    margin: 0
}

#competitive #new .visible-xs-block .table {
    margin-top: 40px
}

#competitive #new .table-responsive {
    margin-top: 40px
}

#competitive #new .table thead th {
    border: none;
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    background: #9cacbe;
    padding: 5px 10px
}

#competitive #new .table thead th:nth-child(1) {
    width: 10%
}

#competitive #new .table thead th:not(:nth-child(1)) {
    width: 18%
}

#competitive #new .table tbody th {
    font-size: 18px;
    font-weight: normal;
    color: #008dd2;
    padding: 5px 10px
}

#competitive #new .table tbody td {
    font-size: 16px;
    padding: 5px 10px
}

#competitive #new .table tbody td.combine {
    font-size: 18px;
    background: #eee;
    text-align: center
}

@media (max-width: 767px) {
    #competitive #new .list .item {
        width:calc(50% - 20px)
    }

    #competitive #new .list .item:nth-child(3n+2) {
        margin-left: 0;
        margin-right: 0
    }

    #competitive #new .list .item:nth-child(2n) {
        margin-left: 40px
    }
}

@media (max-width: 479px) {
    #competitive #new .bar .txt {
        max-width:none;
        left: 0;
        padding: 0 30px
    }

    #competitive #new .list .item {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important
    }
}

#competitive.manufac .p-ban {
    margin-bottom: 0
}

#competitive.manufac .contentBox {
    margin-top: -2px
}

#support .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

#warranty .box {
    max-width: 940px;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    margin: 0 auto
}

#warranty .box:last-child {
    border-bottom: none
}

#warranty .box .circle {
    float: left;
    width: 120px;
    height: 120px;
    border: 1px solid #008dd2;
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
    padding: 4px;
    overflow: hidden
}

#warranty .box .circle >div {
    position: relative;
    width: 110px;
    height: 110px;
    background: #008dd2;
    border-radius: 100%
}

#warranty .box .circle >div:before {
    content: '';
    display: block;
    position: absolute;
    width: 110px;
    height: 45px;
    background: #fff;
    left: 0;
    bottom: 0
}

#warranty .box .circle >div strong,#warranty .box .circle >div span {
    display: block;
    position: relative;
    text-align: center
}

#warranty .box .circle >div strong {
    line-height: 55px;
    font-size: 40px;
    font-family: 'Arial',Sans-serif;
    color: #fff;
    padding-top: 10px
}

#warranty .box .circle >div span {
    line-height: 32px;
    font-size: 18px;
    color: #008dd2
}

#warranty .box .txt {
}

#warranty .box .txt .ti,#support .ti {
    line-height: 26px;
    font-size: 20px;
    color: #008dd2;
    margin: 0;
    padding: 5px 0
}

#warranty .box .txt .info {
    line-height: 30px;
    font-size: 16px;
    margin-top: 5px
}

@media (max-width: 479px) {
    #warranty .box .circle {
        float:none
    }

    #warranty .box .txt {
        float: none;
        width: 100%;
        margin-top: 10px
    }
}

#eol .ti {
    max-width: 1060px;
    font-size: 25px;
    color: #008dd2;
    margin: 50px auto 30px
}

#eol .list-new .pic {
    float: left;
    width: 50%;
    padding-right: 15px
}

#eol .list-new .txt {
    float: right;
    width: 50%;
    padding-left: 15px
}

#eol .list-new .txt li {
    position: relative;
    line-height: 24px;
    font-size: 16px;
    padding: 15px 0 15px 30px
}

#eol .list-new .txt li:before {
    content: '';
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    top: 21px;
    left: 0
}

#eol .list-new .txt li:nth-child(1):before {
    background: #20af5d
}

#eol .list-new .txt li:nth-child(2):before {
    background: #04a9b5
}

#eol .list-new .txt li:nth-child(3):before {
    background: #ecce01
}

#eol .list-new .txt li:nth-child(4):before {
    background: #ff5a30
}

#eol .list-new .txt li:nth-child(5):before {
    background: #f7a501
}

@media (max-width: 1199px) {
    #eol .list-new .txt li {
        padding-top:10px;
        padding-bottom: 10px
    }

    #eol .list-new .txt li:before {
        top: 16px
    }
}

@media (max-width: 991px) {
    #eol .list-new .pic {
        width:140px;
        padding-right: 0
    }

    #eol .list-new .txt {
        width: calc(100% - 155px)
    }
}

@media (min-width: 480px) and (max-width:991px) {
    #eol .list-new .txt li {
        height:146px;
        padding-left: 0
    }

    #eol .list-new .txt li:before {
        display: none
    }
}

@media (max-width: 479px) {
    #eol .list-new .pic {
        width:100px
    }

    #eol .list-new .txt {
        width: calc(100% - 100px)
    }

    #eol .list-new .txt li {
        padding-left: 0
    }

    #eol .list-new .txt li:before {
        width: 30px;
        height: 3px;
        top: 0;
        left: 0
    }

    #eol .list-new .txt li:nth-child(3):before {
        background: #ff5a30
    }

    #eol .list-new .txt li:nth-child(4):before {
        background: #f7a501
    }

    #eol .list-new .txt li:nth-child(5):before {
        background: #ecce01
    }
}

#eol .list {
    max-width: 1060px;
    margin: 0 auto
}

#eol .list .box {
    position: relative;
    border-bottom: 1px solid #ddd;
    padding: 15px 0
}

#eol .list .box:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background: #eee;
    top: 0;
    left: 280px
}

#eol .list .box .item {
    float: left;
    position: relative;
    width: 280px;
    line-height: 24px;
    font-size: 16px;
    padding-left: 38px;
    padding-right: 15px
}

#eol .list .box .item span {
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 13px;
    color: #fff;
    background: #0092cf;
    text-align: center;
    top: 0;
    left: 0
}

#eol .list .box .cont {
    float: right;
    width: calc(100% - 300px);
    line-height: 24px;
    font-size: 16px;
    padding: 0 15px
}

@media (max-width: 767px) {
    #eol .list .box:before {
        display:none
    }

    #eol .list .box .item {
        float: none;
        width: 100%
    }

    #eol .list .box .cont {
        float: none;
        width: 100%;
        padding: 0 15px 0 38px;
        margin-top: 5px
    }
}

#white .ti {
    position: relative;
    line-height: 24px;
    font-size: 24px;
    color: #008dd2;
    padding-left: 24px;
    padding-bottom: 15px;
    border-bottom: 1px solid #008dd2
}

#white .ti:before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 26px;
    background: #008dd2;
    top: 0;
    left: 0
}

#white .list {
    margin-top: 20px
}

#white .list .box {
    padding: 20px 0;
    border-bottom: 1px solid #ddd
}

#white .list .box .date {
    float: left;
    width: 90px;
    height: 70px;
    color: #fff;
    background: #008dd2;
    padding: 8px;
    text-align: center
}

#white .list .box .date span {
    display: block;
    height: 27px;
    line-height: 27px;
    font-size: 15px;
    font-family: 'Arial',Sans-serif
}

#white .list .box .date span +span {
    border-top: 1px solid #fff
}

#white .list .box .txt {
    float: left;
    width: calc(100% - 200px);
    margin-left: 26px
}

#white .list .box .title {
    padding: 0;
    border: none;
    margin: 0;
    padding: 5px 0
}

#white .list .box .title:before {
    display: none
}

#white .list .box .title a {
    line-height: 24px;
    font-size: 18px;
    color: #008dd2
}

#white .list .box .info {
    line-height: 22px;
    font-size: 16px;
    margin: 0
}

#white .list .box a.download {
    display: block;
    float: right;
    width: 40px;
    height: 40px;
    border: 1px solid #008dd2;
    background: #fff url('../images/icon_white_paper.png') center no-repeat;
    border-radius: 100%;
    margin-right: 30px
}

#white .list .box a.download:hover {
    background: #008dd2 url('../images/icon_white_paper_hover.png') center no-repeat
}

@media (max-width: 639px) {
    #white .list .box .txt {
        float:right;
        width: calc(100% - 100px);
        min-height: 70px;
        margin-left: 0
    }

    #white .list .box a.download {
        float: left;
        margin-top: 10px;
        margin-left: 25px;
        margin-right: 0
    }
}

#white .view-head .date {
    float: left;
    width: 90px;
    height: 70px;
    color: #fff;
    background: #008dd2;
    padding: 8px;
    text-align: center
}

#white .view-head .date span {
    display: block;
    height: 27px;
    line-height: 27px;
    font-size: 15px;
    font-family: 'Arial',Sans-serif
}

#white .view-head .date span +span {
    border-top: 1px solid #fff
}

#white .view-head .txt {
    float: right;
    width: calc(100% - 95px);
    height: 69px;
    border-bottom: 1px solid #008dd2
}

#white .view-head .txt .ti {
    float: left;
    position: relative;
    width: calc(100% - 40px);
    max-height: 52px;
    line-height: 26px;
    font-size: 20px;
    color: #000;
    border: none;
    padding: 0 15px;
    margin: 0;
    top: 50%;
    overflow: hidden;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#white .view-head .txt .ti:before {
    display: none
}

#white .view-head .txt a.download {
    display: block;
    float: right;
    width: 40px;
    height: 40px;
    border: 1px solid #008dd2;
    background: #fff url('../images/icon_white_paper.png') center no-repeat;
    border-radius: 100%;
    margin-top: 15px
}

#white .view-head .txt a.download:hover {
    background: #008dd2 url('../images/icon_white_paper_hover.png') center no-repeat
}

#white .edit {
    margin-top: 30px
}

@media (max-width: 767px) {
    #white .view-head .date {
        float:none
    }

    #white .view-head .txt {
        float: none;
        position: relative;
        width: 100%;
        height: auto
    }

    #white .view-head .txt .ti {
        float: none;
        width: 100%;
        max-height: none;
        top: 0;
        padding: 10px 0;
        transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0)
    }

    #white .view-head .txt a.download {
        position: absolute;
        top: -55px;
        left: 105px;
        margin-top: 0
    }
}

#about .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

#about.mile .p-ban {
    margin-bottom: 0
}

#about.mile .milestones {
    padding-top: 60px;
    overflow: hidden
}

#about.vision-new .p-ban {
    margin-bottom: 0
}

#about.vision-new .sec-1 {
    position: relative;
    min-height: 600px;
    margin-top: -2px;
    background: url('../images/about_vision_new1.jpg') center bottom no-repeat;
    padding-top: 150px
}

#about.vision-new .sec-1 .secti {
    max-width: 450px;
    line-height: 35px;
    font-size: 30px;
    font-weight: bold;
    color: #139fe4;
    margin: 0
}

#about.vision-new .sec-1 .cont {
    max-width: 450px;
    line-height: 35px;
    font-size: 22px;
    color: #139fe4;
    margin: 10px 0 0
}

#about.vision-new .sec-1 .icon {
    font-size: 0;
    max-width: 660px;
    margin: 30px auto 0
}

#about.vision-new .sec-1 .icon li {
    display: inline-block;
    width: 25%;
    text-align: center;
    vertical-align: top
}

#about.vision-new .sec-2 {
    padding: 40px 0;
    background: url('../images/about_vision_2bg.jpg') center top no-repeat
}

#about.vision-new .sec-2 .secti {
    display: inline-block;
    line-height: 30px;
    font-size: 24px;
    color: #008dd2;
    margin: 0;
    vertical-align: top
}

#about.vision-new .sec-2 span {
    display: inline-block;
    line-height: 30px;
    font-size: 20px;
    margin-left: 10px;
    vertical-align: top
}

#about.vision-new .sec-2 .cont {
    line-height: 28px;
    font-size: 16px;
    color: #000;
    margin-top: 15px;
    margin-bottom: 0
}

#about.vision-new .sec-3 {
    margin-top: 40px
}

#about.vision-new .sec-3 .pic {
    float: left;
    width: 40%
}

#about.vision-new .sec-3 .pic.right {
    float: right
}

#about.vision-new .sec-3 .pic img {
    margin: 0 auto
}

#about.vision-new .sec-3 .txt {
    float: right;
    width: 60%;
    padding: 30px 35px 0
}

#about.vision-new .sec-3 .txt.left {
    float: left
}

#about.vision-new .sec-3 .txt .secti {
    font-size: 24px;
    color: #008dd2;
    margin: 0
}

#about.vision-new .sec-3 .txt .info {
    display: block;
    font-size: 20px;
    font-weight: normal;
    color: #008dd2;
    margin-top: 10px
}

#about.vision-new .sec-3 .txt .cont {
    line-height: 28px;
    font-size: 16px;
    color: #000;
    margin: 10px 0 0
}

@media (max-width: 991px) {
    #about.vision-new .sec-1 {
        min-height:480px;
        background-size: 1536px 480px;
        padding-top: 60px
    }
}

@media (max-width: 767px) {
    #about.vision-new .sec-1 {
        min-height:360px;
        background-size: 1152px 360px
    }

    #about.vision-new .sec-1 .secti {
        max-width: 300px;
        line-height: 28px;
        font-size: 20px
    }

    #about.vision-new .sec-1 .cont {
        max-width: 300px;
        line-height: 26px;
        font-size: 16px
    }

    #about.vision-new .sec-3 {
        margin-top: 0
    }

    #about.vision-new .sec-3 +.sec-3 {
        margin-top: 40px
    }

    #about.vision-new .sec-3 .txt {
        padding-top: 0
    }
}

@media (max-width: 639px) {
    #about.vision-new .sec-3 .pic,#about.vision-new .sec-3 .pic.right {
        float:none;
        width: 100%
    }

    #about.vision-new .sec-3 .txt,#about.vision-new .sec-3 .txt.left {
        float: none;
        width: 100%;
        margin-top: 20px;
        padding: 0
    }
}

@media (max-width: 543px) {
    #about.vision-new .sec-1 {
        min-height:initial;
        background-size: 960px 300px;
        padding-top: 40px;
        padding-bottom: 200px
    }
}

@media (max-width: 459px) {
    #about.vision-new .sec-1 .icon li {
        width:50%;
        margin-bottom: 10px
    }
}

#about .org {
    max-width: 1085px;
    background: none;
    padding-bottom: 40px
}

#about .org .secti {
    font-size: 24px;
    color: #008dd2;
    margin: 0
}

#about .org .secti span {
    text-transform: uppercase
}

#about .org .cont {
    line-height: 32px;
    font-size: 16px;
    color: #000;
    margin-top: 20px;
    margin-bottom: 40px
}

#about .org img {
    margin: 50px auto 20px
}

#about .mile {
    max-width: 1140px
}

#about .mile .box {
    position: relative;
    padding: 20px 0 21px
}

#about .mile .box:nth-child(even) {
    background: #f5f8fa
}

#about .mile .box:last-child {
    padding-bottom: 20px
}

#about .mile .box:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: url('../images/about_mile_dot.jpg') repeat-x;
    left: 0;
    bottom: 0
}

#about .mile .box .year {
    float: left;
    position: relative;
    width: 155px;
    height: 42px
}

#about .mile .box .year:before {
    content: 'YEAR';
    display: block;
    position: absolute;
    font-size: 22px;
    font-family: 'Arial';
    font-style: italic;
    color: #d8e8f0;
    top: -5px;
    left: 25px
}

#about .mile .box .year span {
    display: block;
    position: absolute;
    font-size: 30px;
    font-style: italic;
    color: #008dd2;
    left: 60px;
    bottom: -8px;
    background: -webkit-linear-gradient(-45deg,#008dd2,#6242d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#about .mile .box:nth-child(even) .year span {
    color: #6242d4
}

#about .mile .box .txt {
    float: right;
    width: calc(100% - 155px);
    padding: 5px 30px;
    border-left: 1px solid #d3d3d3
}

#about .mile .box .txt li {
    position: relative;
    line-height: 24px;
    font-size: 18px;
    color: #000;
    padding: 2px 0 2px 14px
}

#about .mile .box .txt li:before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    background: #009b90;
    top: 12px;
    left: 0
}

@media (max-width: 639px) {
    #about .mile .box .year {
        float:none;
        margin-left: 15px
    }

    #about .mile .box .year:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        background: #d3d3d3;
        left: 0;
        bottom: -10px
    }

    #about .mile .box .txt {
        float: none;
        width: 100%;
        border-left: none;
        margin-top: 20px;
        padding: 0 15px
    }
}

#about .csr .pic {
    float: left;
    width: 45%
}

#about .csr .txt {
    float: right;
    width: 55%;
    padding-left: 30px
}

#about .csr .txt .ti {
    line-height: 40px;
    font-size: 24px;
    color: #008dd2;
    margin: 60px 0 0
}

#about .csr .txt .info {
    line-height: 32px;
    font-size: 16px;
    margin-top: 20px
}

#about .csr .txt a.more {
    display: block;
    position: relative;
    float: left;
    width: 162px;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    color: #fff;
    background: #000;
    text-align: center;
    text-decoration: none;
    padding-right: 50px
}

#about .csr .txt a.more:hover {
    background: #333
}

#about .csr .txt a.more i {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: #008dd2;
    top: 0;
    right: 0
}

#about .csr .txt a.more i:before {
    content: '';
    display: block;
    position: absolute;
    width: 22px;
    height: 2px;
    background: #fff;
    top: 24px;
    left: 14px
}

#about .csr .txt a.more i:after {
    content: '';
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    top: 18px;
    right: 14px;
    transform: rotate(45deg)
}

#about .csr .txt .note {
    float: right;
    width: calc(100% - 180px);
    line-height: 25px;
    font-size: 16px;
    margin: 0
}

#about .csr .txt-2 {
    float: left;
    width: 100%;
    line-height: 32px;
    font-size: 16px;
    margin-top: 20px
}

#about .csr .txt-3 {
    float: left;
    width: 100%;
    line-height: 32px;
    font-size: 16px;
    margin-top: 20px
}

#about .csr .txt-3 strong {
    display: block;
    font-size: 20px;
    font-weight: normal;
    color: #008dd2;
    margin-bottom: 10px
}

#about .csr .txt-3 ol {
    margin: 10px 0;
    padding-left: 20px
}

#about .csr .txt-3 ol li {
    padding: 4px 0 4px 10px;
    line-height: 26px
}

@media (max-width: 1199px) {
    #about .csr .txt .note {
        float:none;
        width: 100%
    }

    #about .csr .txt a.more {
        margin-top: 10px
    }
}

@media (max-width: 991px) {
    #about .csr .pic {
        float:none;
        width: 100%;
        max-width: 550px;
        margin: 0 auto
    }

    #about .csr .txt,#about .csr .txt-2,#about .csr .txt-3 {
        float: none;
        width: 100%;
        max-width: 550px;
        margin: 30px auto 0;
        padding-left: 0
    }

    #about .csr .txt .ti {
        margin-top: 20px
    }
}

#about .stake {
    max-width: 1140px
}

#about .stake .secti {
    font-size: 24px;
    color: #008dd2;
    margin: 0
}

#about .stake .list {
    margin-top: 30px;
    padding-bottom: 40px
}

#about .stake .list .head {
    height: 50px;
    background: url('../images/about_stake_head.jpg') top left no-repeat
}

#about .stake .list .head .left {
    float: left;
    width: 430px;
    line-height: 44px;
    font-size: 18px;
    color: #fff;
    background: url('../images/about_stake_head_1.png') left center no-repeat;
    text-shadow: 0 2px 3px rgba(0,0,0,.2);
    padding-left: 30px;
    margin-left: 50px
}

#about .stake .list .head .left span {
    display: none
}

#about .stake .list .head .right {
    float: left;
    line-height: 44px;
    font-size: 18px;
    color: #fff;
    background: url('../images/about_stake_head_2.png') left center no-repeat;
    text-shadow: 0 2px 3px rgba(0,0,0,.2);
    padding-left: 30px;
    margin-left: 50px
}

#about .stake .list .item {
    padding: 15px 0;
    border-bottom: 1px solid #ddd
}

#about .stake .list .item:nth-child(even) {
    background: #f7f7f7
}

#about .stake .list .item:nth-child(2) {
    padding-top: 10px
}

#about .stake .list .item .left {
    float: left;
    width: 430px;
    line-height: 20px;
    font-size: 15px;
    color: #000;
    margin-left: 50px
}

#about .stake .list .item .left span {
    display: none
}

#about .stake .list .item .right {
    float: left;
    line-height: 20px;
    font-size: 15px;
    margin-left: 50px
}

#about .stake .list .item .right span {
    display: block;
    margin-bottom: 4px
}

#about .stake .list .item .right a {
    color: #287296
}

#about .stake .list .item .right a:hover {
    color: #008dd2
}

@media (max-width: 991px) {
    #about .stake .list .head {
        background-position:-100px top
    }

    #about .stake .list .head .left {
        width: 380px;
        margin-left: 25px
    }

    #about .stake .list .head .right {
        margin-left: 0
    }

    #about .stake .list .item .left {
        width: 380px;
        margin-left: 25px
    }

    #about .stake .list .item .right {
        margin-left: 0
    }
}

@media (max-width: 767px) {
    #about .stake .list .head {
        background-position:-380px top
    }

    #about .stake .list .head .left {
        float: right;
        width: calc(100% - 90px);
        margin: 0
    }

    #about .stake .list .head .left span {
        display: inline
    }

    #about .stake .list .head .right {
        float: left;
        width: 30px;
        font-size: 0;
        margin-left: 25px
    }

    #about .stake .list .item .left {
        float: right;
        width: calc(100% - 90px);
        color: #22aee9;
        margin: 0;
        padding: 5px 0
    }

    #about .stake .list .item .left span {
        display: block;
        color: #333;
        margin-top: 4px
    }

    #about .stake .list .item .right {
        float: left;
        width: 30px
    }

    #about .stake .list .item .right span {
        display: none
    }

    #about .stake .list .item .right a {
        display: block;
        width: 30px;
        height: 30px;
        background: #287296 url('../images/about_stake_head_2.png') center no-repeat;
        border-radius: 100%;
        font-size: 0;
        margin-left: 18px
    }

    #about .stake .list .item .right a:hover {
        background-color: #008dd2
    }
}

#investor .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

#news.investorNews .list .box {
    padding: 20px 0;
    border-bottom: 1px solid #ddd
}

#news.investorNews .list .box .date {
    float: left;
    width: 90px;
    height: 70px;
    color: #fff;
    background: #008dd2;
    padding: 8px;
    text-align: center
}

#news.investorNews .list .box .date span {
    display: block;
    height: 27px;
    line-height: 27px;
    font-size: 15px;
    font-family: 'Arial',Sans-serif
}

#news.investorNews .list .box .date span +span {
    border-top: 1px solid #fff
}

#news.investorNews .list .box a.txt {
    float: left;
    width: calc(100% - 110px);
    color: #666;
    margin-left: 20px
}

#news.investorNews .view-head .date {
    float: left;
    width: 90px;
    height: 70px;
    color: #fff;
    background: #008dd2;
    padding: 8px;
    text-align: center
}

#news.investorNews .view-head .date span {
    display: block;
    height: 27px;
    line-height: 27px;
    font-size: 15px;
    font-family: 'Arial',Sans-serif
}

#news.investorNews .view-head .date span +span {
    border-top: 1px solid #fff
}

#news.investorNews .view-head .txt {
    float: right;
    width: calc(100% - 95px);
    height: 69px;
    border-bottom: 1px solid #008dd2
}

#news.investorNews .view-head .txt .ti {
    float: left;
    position: relative;
    width: calc(100% - 130px);
    max-height: 52px;
    line-height: 26px;
    font-size: 20px;
    color: #000;
    border: none;
    padding: 0 15px;
    margin: 0;
    top: 50%;
    overflow: hidden;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#news.investorNews .view-head .txt .ti:before {
    display: none
}

#news.investorNews .view-head .txt .socialBox {
    float: right;
    width: 120px;
    margin-top: 16px;
    margin-right: 5px
}

#news.investorNews .edit {
    margin-top: 30px
}

@media (max-width: 767px) {
    #news.investorNews .view-head .date {
        float:none
    }

    #news.investorNews .view-head .txt {
        float: none;
        position: relative;
        width: 100%;
        height: auto
    }

    #news.investorNews .view-head .txt .ti {
        float: none;
        width: 100%;
        max-height: none;
        top: 0;
        padding: 10px 0;
        transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0)
    }

    #news.investorNews .view-head .txt .socialBox {
        position: absolute;
        top: -55px;
        left: 105px;
        margin-top: 0;
        margin-right: 0
    }
}

#news .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

#news .tiName {
    position: relative;
    font-size: 25px;
    color: #005698;
    margin-bottom: 10px;
    padding-left: 20px
}

#news .tiName:before {
    content: '';
    width: 5px;
    height: 20px;
    background: #008dd2;
    position: absolute;
    left: 0;
    top: 3px
}

#news .inCont {
    margin-left: 0;
    margin-right: 0
}

#news .list .box {
    padding: 20px 0;
    border-bottom: 1px solid #ddd
}

#news .list .box .date {
    float: left;
    width: 90px;
    height: 70px;
    color: #fff;
    background: #008dd2;
    padding: 8px;
    text-align: center
}

#news .list .box .date span {
    display: block;
    height: 27px;
    line-height: 27px;
    font-size: 15px;
    font-family: 'Arial',Sans-serif
}

#news .list .box .date span +span {
    border-top: 1px solid #fff
}

#news .list .box a.txt {
    float: left;
    width: calc(100% - 110px);
    color: #666;
    margin-left: 20px
}

#news .news-add {
    margin-bottom: 40px
}

#news .news-add .table th {
    font-size: 18px;
    font-weight: normal;
    color: #17a8e5;
    border-bottom-color: #e9e9e9
}

#news .news-add .table tbody tr:nth-child(even) {
    background: #f6f6f6
}

#news .news-add .table td {
    font-size: 16px;
    border-top-color: #e9e9e9
}

#news .news-add .table th:last-child,#news .news-add .table td:last-child {
    width: 120px;
    text-align: center
}

#news .news-add .table td a {
    color: #333
}

#news .news-add .table td a:hover {
    color: #005698
}

#news .view-head .date {
    float: left;
    width: 90px;
    height: 70px;
    color: #fff;
    background: #008dd2;
    padding: 8px;
    text-align: center
}

#news .view-head .date span {
    display: block;
    height: 27px;
    line-height: 27px;
    font-size: 15px;
    font-family: 'Arial',Sans-serif
}

#news .view-head .date span +span {
    border-top: 1px solid #fff
}

#news .view-head .txt {
    float: right;
    width: calc(100% - 95px);
    height: 69px;
    border-bottom: 1px solid #008dd2
}

#news .view-head .txt .ti {
    float: left;
    position: relative;
    width: calc(100% - 130px);
    max-height: 52px;
    line-height: 26px;
    font-size: 20px;
    color: #000;
    border: none;
    padding: 0 15px;
    margin: 0;
    top: 50%;
    overflow: hidden;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#news .view-head .txt .ti:before {
    display: none
}

#news .view-head .txt .socialBox {
    float: right;
    width: 120px;
    margin-top: 16px;
    margin-right: 5px
}

#news .edit {
    margin-top: 30px
}

@media (max-width: 767px) {
    #news .view-head .date {
        float:none
    }

    #news .view-head .txt {
        float: none;
        position: relative;
        width: 100%;
        height: auto
    }

    #news .view-head .txt .ti {
        float: none;
        width: 100%;
        max-height: none;
        top: 0;
        padding: 10px 0;
        transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0)
    }

    #news .view-head .txt .socialBox {
        position: absolute;
        top: -55px;
        left: 105px;
        margin-top: 0;
        margin-right: 0
    }
}

@media (max-width: 639px) {
    #news .news-add .table,#news .news-add .table thead,#news .news-add .table tbody,#news .news-add .table tr,#news .news-add .table th,#news .news-add .table td {
        display:block;
        width: 100%
    }

    #news .news-add .table th:last-child,#news .news-add .table td:last-child {
        display: none
    }

    #news .news-add .table td:after {
        content: '['attr(data-time)']';
        font-size: 15px;
        color: #999;
        margin-left: 10px
    }
}

#career .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

.wp-masonry-4-cols .wp-masonry-block {
    width: calc(25% - 15px)
}

@media (max-width: 991px) {
    .wp-masonry-4-cols .wp-masonry-block {
        width:calc(33.333% - 13.333px)
    }
}

@media (max-width: 639px) {
    .wp-masonry-4-cols .wp-masonry-block {
        width:calc(50% - 10px)
    }
}

@media (max-width: 399px) {
    .wp-masonry-4-cols .wp-masonry-block {
        width:100%
    }
}

#contact .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

#contact.location .p-ban {
    margin-bottom: 0
}

#location .container-fluid.bg {
    padding-top: 60px;
    padding-bottom: 60px
}

#location .icon.two {
    top: 48%
}

#location .map-box {
    position: relative;
    background: #f8f8f8;
    overflow: hidden
}

#location .map-box .bg {
    display: block;
    position: relative;
    width: 1100px;
    max-width: none;
    left: 50%;
    margin-left: -550px
}

#location .map-box >div {
    position: relative;
    width: 1100px;
    left: 50%;
    margin-left: -550px
}

#location .map-box >div >div {
    position: absolute;
    height: 29px;
    line-height: 29px;
    padding-left: 25px;
    font-size: 18px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    cursor: pointer
}

#location .map-box >div >div:before {
    content: '';
    display: block;
    position: absolute;
    width: 19px;
    height: 29px;
    top: 0;
    left: 0;
    background: url('../images/locate_marker.png') 0 0 no-repeat;
    transition: background .25s ease-in-out;
    -ms-transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out
}

#location .map-box >div >div:hover:before {
    background-position: 0 -29px
}

#location .map-box >div >div span {
    display: none;
    position: relative;
    z-index: 5;
    height: 29px;
    padding: 0 8px;
    background: rgba(240,56,225,.5)
}

#location .map-box .locate-1 {
    top: 250px;
    left: 778px
}

#location .map-box .locate-2 {
    top: 250px;
    left: 400px
}

#location .map-box .locate-3 {
    top: 278px;
    left: 390px
}

#location .map-box .locate-4 {
    top: 270px;
    left: 415px
}

#location .map-box .locate-5 {
    top: 290px;
    left: 405px
}

#location .map-box .locate-6 {
    top: 220px;
    left: 390px
}

#location .info {
    position: relative;
    margin-top: -22px
}

#location .info .tab {
    text-align: center
}

#location .info .tab li {
    display: inline-block;
    vertical-align: top;
    margin: 0 3px
}

#location .info .tab li a {
    display: block;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    color: #fff;
    padding: 0 40px;
    box-shadow: 0 2px 3px rgba(0,0,0,.2);
    text-shadow: 0 2px 3px rgba(0,0,0,.2);
    text-decoration: none;
    background: rgba(159,159,159,1);
    background: -moz-linear-gradient(top,rgba(159,159,159,1) 0,rgba(139,139,139,1) 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0,rgba(159,159,159,1)),color-stop(100%,rgba(139,139,139,1)));
    background: -webkit-linear-gradient(top,rgba(159,159,159,1) 0,rgba(139,139,139,1) 100%);
    background: -o-linear-gradient(top,rgba(159,159,159,1) 0,rgba(139,139,139,1) 100%);
    background: -ms-linear-gradient(top,rgba(159,159,159,1) 0,rgba(139,139,139,1) 100%);
    background: linear-gradient(to bottom,rgba(159,159,159,1) 0,rgba(139,139,139,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9f9f9f',endColorstr='#8b8b8b',GradientType=0 )
}

#location .info .tab li a:hover {
    background: rgba(139,139,139,1);
    background: -moz-linear-gradient(top,rgba(139,139,139,1) 0,rgba(120,120,120,1) 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0,rgba(139,139,139,1)),color-stop(100%,rgba(120,120,120,1)));
    background: -webkit-linear-gradient(top,rgba(139,139,139,1) 0,rgba(120,120,120,1) 100%);
    background: -o-linear-gradient(top,rgba(139,139,139,1) 0,rgba(120,120,120,1) 100%);
    background: -ms-linear-gradient(top,rgba(139,139,139,1) 0,rgba(120,120,120,1) 100%);
    background: linear-gradient(to bottom,rgba(139,139,139,1) 0,rgba(120,120,120,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b8b8b',endColorstr='#787878',GradientType=0 )
}

#location .info .tab li.active a {
    background: rgba(82,212,182,1);
    background: -moz-linear-gradient(top,rgba(82,212,182,1) 0,rgba(69,201,170,1) 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0,rgba(82,212,182,1)),color-stop(100%,rgba(69,201,170,1)));
    background: -webkit-linear-gradient(top,rgba(82,212,182,1) 0,rgba(69,201,170,1) 100%);
    background: -o-linear-gradient(top,rgba(82,212,182,1) 0,rgba(69,201,170,1) 100%);
    background: -ms-linear-gradient(top,rgba(82,212,182,1) 0,rgba(69,201,170,1) 100%);
    background: linear-gradient(to bottom,rgba(82,212,182,1) 0,rgba(69,201,170,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52d4b6',endColorstr='#45c9aa',GradientType=0 )
}

#location .info .detail {
    padding: 0 25px;
    margin-top: 35px
}

#location .info .detail .box {
    position: relative;
    background: #ecf1f0;
    padding: 15px;
    margin-bottom: 50px
}

#location .info .detail .box:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 25px;
    background: url('../images/locate_shadow.jpg') no-repeat;
    background-size: 100% 25px;
    left: 0;
    bottom: -25px
}

#location .info .detail .box .head {
    background: #fff;
    padding: 15px
}

#location .info .detail .box .head .ti {
    line-height: 32px;
    font-size: 24px;
    font-style: italic;
    color: #008dd2;
    padding-left: 30px;
    background: url('../images/locate_ti.jpg') 2px 4px no-repeat
}

#location .info .detail .box .head .map {
    height: 230px;
    background: none;
    margin-top: 15px
}

#location .info .detail .cont {
    font-size: 0;
    padding: 20px 15px 15px
}

#location .info .detail .cont li {
    display: inline-block;
    width: 50%;
    line-height: 18px;
    font-size: 15px;
    color: #000;
    padding: 9px 35px;
    background-repeat: no-repeat;
    background-position: 3px 9px;
    vertical-align: top
}

#location .info .detail .cont li.add {
    width: 100%;
    background-image: url('../images/locate_add.jpg')
}

#location .info .detail .cont li.tel {
    background-image: url('../images/locate_tel.jpg')
}

#location .info .detail .cont li.mail {
    background-image: url('../images/locate_mail.jpg')
}

#location .info .detail .cont li.fax {
    background-image: url('../images/locate_fax.jpg')
}

#location .info .detail .cont li.web {
    background-image: url('../images/locate_web.jpg')
}

#location .info .detail .cont li span {
    color: #5f716d
}

#location .info .detail .cont li a {
    color: #000;
    text-decoration: none
}

#location .info .detail .cont li a:hover {
    color: #009b90
}

@media (max-width: 767px) {
    #location .info {
        margin-top:20px
    }

    #location .info .tab {
        width: 100%;
        max-width: 360px;
        margin: 0 auto
    }

    #location .info .tab li {
        display: block;
        margin-bottom: 10px
    }

    #location .info .detail {
        padding: 0
    }

    #location .info .detail .cont {
        padding: 20px 0 15px
    }

    #location .info .detail .cont li {
        display: block;
        width: 100%
    }
}

@media (max-width: 639px) {
    #location .map-box >div {
        width:100%;
        left: 0;
        margin-left: 0
    }

    #location .map-box .bg {
        width: 720px;
        margin-left: -360px
    }
}

@media (max-width: 439px) {
    #location .map-box .bg {
        width:540px;
        margin-left: -270px
    }
}

#inquiryList .contentBox {
    padding-top: 0;
    padding-bottom: 60px
}

#inquiryList label {
    line-height: 38px
}

@media (min-width: 1200px) {
    .header {
        left:0 !important
    }

    .nav-mask-temp {
        display: none !important
    }
}

#career .join {
    position: relative;
    max-width: 1140px;
    margin-bottom: 60px
}

#career .join:before,#career .join:after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background: #dfdfdf;
    top: 0;
    left: 33.333%
}

#career .join:after {
    left: 66.666%
}

#career .join .box {
    float: left;
    width: calc(33.333% - 30px);
    padding: 10px 0 35px;
    margin: 0 15px
}

#career .join .box .pic {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto
}

#career .join .box .pic:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    border-radius: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out
}

#career .join .box:hover .pic:before {
    opacity: 1
}

#career .join .box .pic img.ico {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 60px;
    left: 60px;
    opacity: 0;
    transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out
}

#career .join .box:hover .pic img.ico {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1)
}

#career .join .box .txt {
    padding-top: 30px;
    text-align: center
}

#career .join .box .secti {
    line-height: 24px;
    font-size: 20px;
    margin: 0
}

#career .join .box .info {
    line-height: 22px;
    font-size: 16px;
    color: #555;
    margin: 4px 0 0
}

#career .join .box .btn-box {
    text-align: center;
    margin-top: 30px
}

#career .join .box .btn-box a {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0 25px;
    border-radius: 20px;
    box-shadow: 0 2px 3px rgba(0,0,0,.2);
    text-decoration: none;
    margin: 0 11px 15px;
    transition: opacity .25s linear;
    -ms-transition: opacity .25s linear;
    -moz-transition: opacity .25s linear;
    -webkit-transition: opacity .25s linear
}

#career .join .box .btn-box a:hover {
    opacity: .8
}

#career .join .box .btn-box a.blue {
    color: #fff;
    background: #008dd2
}

#career .join .box .btn-box a.yellow {
    color: #fff;
    background: #ffa800
}

#career .join .box .btn-box a.green {
    color: #fff;
    background: #00ad86
}

@media (max-width: 991px) {
    #career .join:before,#career .join:after {
        display:none
    }

    #career .join .box {
        float: none;
        width: 100%;
        padding: 20px 15px;
        margin: 0
    }

    #career .join .box:not(:last-child) {
        border-bottom: 1px solid #ddd
    }

    #career .join .box .pic {
        float: left
    }

    #career .join .box .txt {
        float: right;
        width: calc(100% - 240px)
    }
}

@media (max-width: 639px) {
    #career .join .box .pic {
        float:none;
        margin: 0 auto
    }

    #career .join .box .txt {
        float: none;
        width: 100%
    }
}

#competitive .mnf .sec-1 {
    padding-bottom: 50px
}

#competitive .mnf .sec-1 .head {
    padding: 0 20px
}

#competitive .mnf .sec-1 .head .secti {
    display: inline-block;
    line-height: 34px;
    font-size: 28px;
    color: #008dd2;
    vertical-align: top;
    margin: 0 10px 0 0
}

#competitive .mnf .sec-1 .head span {
    display: inline-block;
    line-height: 38px;
    font-size: 18px;
    color: #444;
    vertical-align: top
}

#competitive .mnf .sec-1 .list {
    font-size: 0;
    margin-top: 30px
}

#competitive .mnf .sec-1 .list .box {
    display: inline-block;
    width: 25%;
    padding: 0 20px;
    vertical-align: top
}

#competitive .mnf .sec-1 .list .box .txt {
    margin-top: 10px
}

#competitive .mnf .sec-1 .list .box .name {
    font-size: 24px;
    font-style: italic;
    color: #008dd2;
    margin: 0
}

#competitive .mnf .sec-1 .list .box .info {
    line-height: 22px;
    font-size: 16px;
    margin-top: 8px
}

#competitive .mnf .sec-2 {
    background: #f2f2f2;
    padding: 45px 0
}

#competitive .mnf .sec-2 .secti {
    font-size: 28px;
    color: #008dd2;
    text-align: center;
    margin: 0 0 45px 0
}

#competitive .mnf .sec-2 .pic {
    float: left;
    width: 50%;
    padding: 0 15px
}

#competitive .mnf .sec-2 .video {
    float: right;
    position: relative;
    width: 50%;
    padding-bottom: calc(28.125% - 17px)
}

#competitive .mnf .sec-2 .video iframe {
    position: absolute;
    width: calc(100% - 30px);
    height: 100%;
    top: 0;
    left: 15px
}

#competitive .mnf .sec-3 {
    padding: 60px 15px 30px
}

#competitive .mnf .sec-3 .txt {
    float: left;
    width: 55%;
    padding: 0 45px 0 15px
}

#competitive .mnf .sec-3 .secti {
    font-size: 22px;
    color: #008dd2;
    margin: 0
}

#competitive .mnf .sec-3 .info {
    line-height: 22px;
    font-size: 16px;
    margin: 10px 0 0
}

#competitive .mnf .sec-3 .pic {
    float: right;
    width: 45%;
    padding: 0 10px
}

#competitive .mnf .sec-3 .pic >div {
    float: left;
    width: 50%;
    padding: 0 5px
}

#competitive .mnf .sec-3 .pic p {
    height: 18px;
    line-height: 18px;
    font-size: 20px;
    font-style: italic;
    color: #000;
    border-left: 3px solid #008dd2;
    padding-left: 10px;
    margin: 10px 0 0
}

#competitive .mnf .sec-4 {
    padding: 30px 15px
}

#competitive .mnf .sec-4 .pic {
    float: left;
    width: 50%;
    padding: 0 15px
}

#competitive .mnf .sec-4 .txt {
    float: right;
    width: 50%;
    padding: 0 25px
}

#competitive .mnf .sec-4 .secti {
    font-size: 22px;
    color: #008dd2;
    margin: 0
}

#competitive .mnf .sec-4 .info {
    line-height: 22px;
    font-size: 16px;
    margin: 10px 0 0
}

#competitive .mnf .sec-5 {
    font-size: 0;
    padding: 30px 10px 40px
}

#competitive .mnf .sec-5 .box {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    padding: 0 20px;
    margin-bottom: 20px
}

#competitive .mnf .sec-5 .box .secti {
    font-size: 22px;
    color: #008dd2;
    margin: 0 0 15px
}

#competitive .mnf .sec-5 .box .info {
    line-height: 22px;
    font-size: 16px;
    margin: 10px 0 0
}

#competitive .mnf .sec-6 {
    background: #e4eef4;
    padding: 50px 0 0
}

#competitive .mnf .sec-6 .txt {
    float: left;
    width: 50%;
    padding: 50px 40px 100px
}

#competitive .mnf .sec-6 .secti {
    font-size: 22px;
    color: #008dd2;
    margin: 0
}

#competitive .mnf .sec-6 .info {
    line-height: 22px;
    font-size: 16px;
    color: #000;
    margin-top: 20px
}

#competitive .mnf .sec-6 .info strong {
    font-weight: normal;
    color: #008dd2
}

#competitive .mnf .sec-6 .pic {
    float: right;
    width: 50%;
    margin-bottom: -20px
}

#competitive .mnf .sec-6 .pic img {
    margin: 0 auto
}

#competitive .mnf .sec-6 .list {
    font-size: 0;
    margin-top: 35px;
    padding: 0 30px
}

#competitive .mnf .sec-6 .list .box {
    display: inline-block;
    width: calc(33.333% - 30px);
    max-width: 330px;
    background: #fff;
    vertical-align: top;
    margin: 0 15px 20px
}

#competitive .mnf .sec-6 .list .box p {
    font-size: 16px;
    color: #000;
    padding: 10px 0;
    margin: 0
}

#competitive .mnf .sec-7 {
    background: #f4f7f9;
    padding: 60px 0
}

#competitive .mnf .sec-7 .video {
    float: left;
    position: relative;
    width: 50%;
    padding-bottom: calc(37.5% - 23px)
}

#competitive .mnf .sec-7 .video video {
    position: absolute;
    width: calc(100% - 30px);
    height: 100%;
    top: 0;
    left: 15px
}

#competitive .mnf .sec-7 .txt {
    float: right;
    position: relative;
    width: 50%;
    padding-bottom: calc(37.5% - 23px)
}

#competitive .mnf .sec-7 .txt .inner {
    position: absolute;
    width: calc(100% - 60px);
    height: 100%;
    top: 0;
    left: 45px
}

#competitive .mnf .sec-7 .txt .inner >div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}

#competitive .mnf .sec-7 .txt .secti {
    font-size: 22px;
    color: #008dd2;
    margin: 0
}

#competitive .mnf .sec-7 .txt .info {
    line-height: 22px;
    font-size: 16px;
    color: #000;
    margin-top: 15px
}

#competitive .mnf .sec-8 {
    padding: 60px 15px
}

#competitive .mnf .sec-8 >div {
    float: left;
    width: 50%;
    padding: 0 18px
}

#competitive .mnf .sec-8 .secti {
    font-size: 22px;
    color: #008dd2;
    margin: 0 0 10px
}

#competitive .mnf .sec-8 .info {
    line-height: 22px;
    font-size: 16px;
    margin: 15px 0 0
}

@media (max-width: 1199px) {
    #competitive .mnf .sec-5 .box .secti {
        height:48px
    }

    #competitive .mnf .sec-6 .txt {
        padding: 40px 30px 80px
    }
}

@media (max-width: 991px) {
    #competitive .mnf .sec-1 {
        padding-bottom:20px
    }

    #competitive .mnf .sec-1 .head {
        padding: 0 15px
    }

    #competitive .mnf .sec-1 .list .box {
        width: 50%;
        margin-bottom: 20px;
        padding: 0 15px
    }

    #competitive .mnf .sec-2 .pic {
        float: none;
        width: 100%
    }

    #competitive .mnf .sec-2 .pic img {
        margin: 0 auto
    }

    #competitive .mnf .sec-2 .video {
        float: none;
        width: 100%;
        margin-top: 20px;
        padding-bottom: calc(56.25% - 30px)
    }

    #competitive .mnf .sec-3 .txt {
        float: none;
        width: 100%
    }

    #competitive .mnf .sec-3 .pic {
        float: none;
        width: 100%;
        margin-top: 20px
    }

    #competitive .mnf .sec-4 .pic {
        float: none;
        width: 100%
    }

    #competitive .mnf .sec-4 .txt {
        float: none;
        width: 100%;
        padding: 0 15px;
        margin-top: 20px
    }

    #competitive .mnf .sec-5 .box {
        width: 50%
    }

    #competitive .mnf .sec-5 .box .secti {
        height: auto
    }

    #competitive .mnf .sec-6 .txt {
        float: none;
        width: 100%;
        padding: 0 15px
    }

    #competitive .mnf .sec-6 .pic {
        float: none;
        width: 100%;
        margin: 40px 0 40px;
        padding: 0 15px
    }

    #competitive .mnf .sec-6 .list {
        padding: 0
    }

    #competitive .mnf .sec-6 .list .box {
        width: calc(33.333% - 10px);
        margin: 0 5px
    }

    #competitive .mnf .sec-7 .video {
        float: none;
        width: 100%;
        padding-bottom: calc(75% - 30px)
    }

    #competitive .mnf .sec-7 .txt {
        float: none;
        width: 100%;
        padding: 0;
        margin-top: 20px
    }

    #competitive .mnf .sec-7 .txt .inner {
        position: static;
        width: 100%;
        padding: 0 15px
    }

    #competitive .mnf .sec-7 .txt .inner >div {
        top: 0;
        transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0)
    }
}

@media (max-width: 539px) {
    #competitive .mnf .sec-1 .list .box {
        width:100%
    }

    #competitive .mnf .sec-5 .box {
        width: 100%
    }

    #competitive .mnf .sec-6 .list .box {
        width: 100%;
        margin: 0 auto 20px
    }

    #competitive .mnf .sec-8 >div {
        float: none;
        width: 100%;
        padding: 0 15px
    }

    #competitive .mnf .sec-8 >div:last-child {
        margin-top: 20px
    }
}

@media (max-width: 479px) {
    #competitive .mnf .sec-3 .pic >div {
        float:none;
        width: 100%;
        margin-bottom: 20px
    }
}

#competitive .qua {
    margin-bottom: 50px
}

#competitive .qua .txt {
    float: left;
    width: 45%;
    padding: 0 15px
}

#competitive .qua .txt .secti {
    font-size: 24px;
    color: #008dd2;
    margin: 0
}

#competitive .qua .txt .info {
    line-height: 28px;
    font-size: 16px;
    margin-top: 10px
}

#competitive .qua .pic {
    float: right;
    width: 55%;
    padding: 0 15px
}

#competitive .qua .info-2 {
    margin-top: 30px;
    padding: 0 15px
}

#competitive .qua .info-2 strong {
    display: block;
    font-size: 24px;
    font-weight: normal;
    color: #008dd2;
    margin-bottom: 10px
}

#competitive .qua .list {
    position: relative;
    font-size: 0;
    margin: 50px 15px
}

#competitive .qua .list:before,#competitive .qua .list:after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: calc(100% - 90px);
    background: #c8c8c8;
    top: 45px;
    left: 33.333%
}

#competitive .qua .list:after {
    left: 66.666%
}

#competitive .qua .list .box {
    display: inline-block;
    width: 33.333%;
    vertical-align: top;
    padding: 0 15px
}

#competitive .qua .list .box .bpic {
    max-width: 195px;
    margin: 0 auto
}

#competitive .qua .list .box .name {
    font-size: 20px;
    color: #266fa1;
    padding: 15px 0;
    margin: 0;
    text-align: center
}

@media (max-width: 1199px) {
    #competitive .qua .pic {
        padding-top:40px
    }
}

@media (max-width: 991px) {
    #competitive .qua .txt,#competitive .qua .pic {
        float:none;
        width: 100%
    }

    #competitive .qua .pic {
        padding-top: 20px
    }

    #competitive .qua .pic img {
        margin: 0 auto
    }

    #competitive .qua .list:before,#competitive .qua .list:after {
        display: none
    }

    #competitive .qua .list .box {
        width: 100%;
        margin-bottom: 20px
    }
}

#proList.cus .p-ban {
    margin-bottom: 0
}

#proList.cus .sec-1 {
    position: relative;
    margin-top: -2px;
    background: url('../images/cus_1_bg.jpg') center no-repeat;
    background-size: cover
}

#proList.cus .sec-1 >div {
    padding-top: 55px;
    padding-bottom: 45px
}

#proList.cus .sec-1 .secti {
    font-size: 24px;
    color: #008dd2;
    text-align: center;
    margin: 0
}

#proList.cus .sec-1 .info {
    max-width: 580px;
    line-height: 30px;
    font-size: 24px;
    color: #000;
    margin: 20px auto 0;
    text-align: center
}

#proList.cus .sec-1 .clearfix {
    margin-top: -40px
}

#proList.cus .sec-1 .txt {
    float: left;
    width: 60%;
    line-height: 28px;
    font-size: 18px;
    padding: 75px 40px 0
}

#proList.cus .sec-1 .pic {
    float: right;
    width: 40%;
    padding-right: 30px
}

#proList.cus .sec-1 .pic img {
    margin: 0 auto
}

#proList.cus .sec-2 {
    background: #e4eef4;
    line-height: 28px;
    font-size: 18px;
    color: #204a63;
    padding: 60px 0
}

#proList.cus .sec-2 .pic {
    float: left;
    margin-right: 40px
}

#proList.cus .sec-1-new {
    padding: 60px 0 20px
}

#proList.cus .sec-1-new .pic {
    float: right;
    width: 400px
}

#proList.cus .sec-1-new .txt {
    float: left;
    width: calc(100% - 440px);
    padding-top: 30px
}

#proList.cus .sec-1-new .secti {
    line-height: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #139fe4;
    margin: 0
}

#proList.cus .sec-1-new .sub-ti {
    line-height: 30px;
    font-size: 20px;
    color: #139fe4;
    margin: 10px 0 0
}

#proList.cus .sec-1-new .info {
    line-height: 28px;
    margin-top: 20px
}

#proList.cus .sec-2-new {
    position: relative;
    padding: 20px 0 40px
}

#proList.cus .sec-2-new:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 50px;
    background: url('../images/about_vision_2bg.jpg') center top no-repeat;
    left: 0;
    bottom: -50px;
    pointer-events: none
}

#proList.cus .sec-2-new .pic {
    float: left;
    width: 560px
}

#proList.cus .sec-2-new .txt {
    float: right;
    width: calc(100% - 600px);
    padding-top: 120px
}

#proList.cus .sec-2-new .info {
    line-height: 28px
}

#proList.cus .sec-3 {
    padding: 60px 15px 30px
}

#proList.cus .sec-3 .secti {
    font-size: 24px;
    color: #008dd2;
    text-align: center;
    margin: 0
}

#proList.cus .sec-3 .info {
    font-size: 24px;
    color: #000;
    text-align: center;
    margin: 35px 0 5px
}

#proList.cus .sec-3 .pic img {
    margin: 0 auto
}

#proList.cus .sec-3 .cont {
    line-height: 28px;
    font-size: 18px;
    margin: 30px 0 0;
    padding: 0 15px
}

#proList.cus .sec-4 {
    padding: 30px 15px
}

#proList.cus .sec-4 .pic {
    float: left;
    width: 50%;
    padding: 0 15px
}

#proList.cus .sec-4 .secti {
    font-size: 24px;
    color: #008dd2;
    margin: 0 0 10px
}

#proList.cus .sec-4 .txt {
    float: right;
    width: 50%;
    line-height: 28px;
    font-size: 18px;
    padding: 20px 15px 0
}

#proList.cus .sec-5 {
    padding: 30px 15px 60px
}

#proList.cus .sec-5 .txt {
    float: left;
    width: 40%;
    line-height: 28px;
    font-size: 18px;
    padding: 0 15px
}

#proList.cus .sec-5 .pic {
    float: right;
    width: 60%;
    padding: 0 15px
}

#proList.cus .sec-5 .pic img {
    margin: 0 auto
}

@media (max-width: 1199px) {
    #proList.cus .sec-1 .clearfix {
        margin-top:20px
    }

    #proList.cus .sec-1 .txt {
        padding-top: 0
    }

    #proList.cus .sec-1-new .txt {
        padding-top: 0
    }

    #proList.cus .sec-2-new .pic {
        width: 480px
    }

    #proList.cus .sec-2-new .txt {
        width: calc(100% - 520px);
        padding-top: 60px
    }
}

@media (max-width: 991px) {
    #proList.cus .sec-1 .txt {
        float:none;
        width: 100%;
        padding: 0
    }

    #proList.cus .sec-1 .pic {
        float: none;
        width: 100%;
        margin-top: 20px;
        padding: 0
    }

    #proList.cus .sec-2 .pic {
        float: none;
        margin-right: 0;
        margin-bottom: 20px
    }

    #proList.cus .sec-2 .pic img {
        margin: 0 auto
    }

    #proList.cus .sec-1-new .pic {
        width: 320px
    }

    #proList.cus .sec-1-new .txt {
        width: calc(100% - 340px)
    }

    #proList.cus .sec-2-new .pic {
        width: 380px
    }

    #proList.cus .sec-2-new .txt {
        width: calc(100% - 400px);
        padding-top: 0
    }

    #proList.cus .sec-4 .pic {
        width: 290px;
        padding: 0
    }

    #proList.cus .sec-4 .secti {
        padding: 0 15px
    }

    #proList.cus .sec-4 .txt {
        width: calc(100% - 305px)
    }

    #proList.cus .sec-5 .pic {
        width: 320px;
        padding: 0
    }

    #proList.cus .sec-5 .txt {
        width: calc(100% - 335px)
    }
}

@media (max-width: 767px) {
    #proList.cus .sec-1-new .pic,#proList.cus .sec-1-new .txt,#proList.cus .sec-2-new .pic,#proList.cus .sec-2-new .txt {
        float:none;
        width: 100%
    }

    #proList.cus .sec-1-new .pic img,#proList.cus .sec-2-new .pic img {
        margin: auto
    }

    #proList.cus .sec-1-new .txt,#proList.cus .sec-2-new .txt {
        margin-top: 20px
    }

    #proList.cus .sec-4 .pic,#proList.cus .sec-4 .txt {
        float: none;
        width: 100%
    }

    #proList.cus .sec-4 .pic img {
        margin: 0 auto
    }

    #proList.cus .sec-5 .pic,#proList.cus .sec-5 .txt {
        float: none;
        width: 100%
    }

    #proList.cus .sec-5 .pic {
        margin-top: 20px
    }
}

@media (min-width: 768px) and (max-width:991px) {
    #proList.cus .sec-3 .pic {
        float:left;
        width: 290px;
        margin-top: 20px
    }

    #proList.cus .sec-3 .cont {
        float: right;
        width: calc(100% - 305px)
    }
}

#star {
    margin-bottom: 60px
}

#star .title {
    position: relative;
    line-height: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #008dd2;
    margin: 0;
    padding-left: 15px
}

#star .title:before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 24px;
    background: #008dd2;
    top: 3px;
    left: 0
}

#star .note {
    line-height: 26px;
    font-size: 15px;
    margin-top: 10px;
    padding-left: 15px
}

#star .star-form {
    margin-top: 40px
}

#star .star-form .step {
    text-align: center
}

#star .star-form .step li {
    display: inline-block;
    position: relative;
    width: 160px;
    height: 34px;
    line-height: 34px;
    font-size: 16px;
    background: #ddd;
    border-radius: 17px;
    vertical-align: top;
    padding-left: 24px;
    margin-right: 20px
}

#star .star-form .step li.current {
    background: rgba(0,141,210,.25)
}

#star .star-form .step li:last-child {
    margin-right: 0
}

#star .star-form .step li:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-left: 6px solid #ddd;
    border-bottom: 4px solid transparent;
    top: 13px;
    right: -15px
}

#star .star-form .step li:last-child:before {
    display: none
}

#star .star-form .step li span {
    display: block;
    position: absolute;
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    color: #fff;
    background: #999;
    border-radius: 100%;
    top: 4px;
    left: 4px
}

#star .star-form .step li.current span {
    background: #008dd2
}

#star .star-form .subti {
    border-bottom: 5px solid #efefef;
    padding-bottom: 5px;
    margin-top: 30px;
    margin-bottom: 20px
}

#star .star-form .subti .step {
    display: block;
    float: left;
    width: 80px;
    line-height: 30px;
    font-size: 18px;
    color: #008dd2
}

#star .star-form .subti .txt {
    display: block;
    float: right;
    width: calc(100% - 80px);
    line-height: 30px;
    font-size: 20px
}

#star .star-form .grandti {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    color: #fff;
    background: #008dd2;
    padding: 0 25px;
    margin-bottom: 15px
}

#star .star-form .grandti +small {
    margin-left: 10px;
    color: #999
}

#star.done .star-form .labelbox .input {
    line-height: 26px;
    font-size: 14px;
    padding: 4px 0 4px 5px
}

#star .star-form .labelbox .input input.step-1-1 {
    float: left;
    width: calc(100% - 98px);
    margin-right: 10px
}

#star .star-form .labelbox .input label.radio.step-1-2 {
    margin-right: 0
}

#star #member .edit .labelbox .input select {
    display: block;
    float: left;
    width: calc(30% - 25px);
    font-size: 12px;
    margin: 0;
    padding: 0 6px
}

#star #member .edit .labelbox .input select.year {
    width: calc(40% - 25px)
}

#star #member .edit .labelbox .input >span {
    display: block;
    float: left;
    width: 25px;
    line-height: 32px;
    font-size: 13px;
    margin: 0;
    text-align: center
}

#star .star-form .labelbox .input input.step-1-3 {
    float: left;
    width: calc(100% - 94px);
    margin-right: 10px
}

#star .star-form .labelbox .input label.radio.step-1-4 {
    margin-right: 0
}

#star .star-form .labelbox .input .step-2-1,#star .star-form .labelbox .input .step-2-3 {
    width: calc(100% - 98px);
    margin-bottom: 10px
}

#star .star-form .labelbox .input .step-2-1:last-child {
    margin-bottom: 0
}

#star .star-form .labelbox .input .step-2-1 br,#star .star-form .labelbox .input .step-2-3 br {
    display: none
}

#star .star-form .labelbox .input label.radio.step-2-2 {
    width: 80px
}

#star .star-form .labelbox .input .step-2-1 input {
    float: left;
    width: 100px
}

#star #member .edit .labelbox .input .step-2-1 select {
    display: block;
    float: left;
    width: calc(22% - 60px);
    font-size: 12px;
    margin: 0;
    padding: 0 10px 0 6px
}

#star #member .edit .labelbox .input .step-2-1 select.year {
    width: calc(28% - 60px)
}

#star #member .edit .labelbox .input .step-2-1 >span {
    display: block;
    float: left;
    width: 25px;
    line-height: 32px;
    font-size: 13px;
    margin: 0;
    text-align: center
}

#star #member .edit .labelbox .input .step-2-3 input {
    float: left;
    width: calc(50% - 35px);
    margin-left: 5px
}

#star #member .edit .labelbox .input .step-2-3 select {
    display: block;
    float: left;
    width: calc(32% - 107px);
    font-size: 12px;
    margin: 0 7px 0 0;
    padding: 0 10px 0 6px
}

#star #member .edit .labelbox .input .step-2-3 select.year {
    width: calc(36% - 107px)
}

#star #member .edit .labelbox .input .step-2-3 >span {
    display: block;
    float: left;
    width: 25px;
    line-height: 32px;
    font-size: 13px;
    margin: 0;
    text-align: center
}

#star #member .edit .labelbox .input .step-2-3 >span.w {
    width: 60px;
    text-align: left
}

#star #member .edit .labelbox .input.step-2-4 select {
    float: left;
    width: calc(25% - 35px);
    margin-right: 10px
}

#star #member .edit .labelbox .input.step-2-5 select {
    width: auto
}

#star #member .edit .labelbox .input.step-2-5 input {
    float: left;
    width: 78px;
    margin-left: 10px
}

#star #member .edit .labelbox .input.step-2-5 select +select {
    margin-left: 10px
}

#star #member .edit .labelbox .input .step-2-6 {
    margin-bottom: 5px
}

#star #member .edit .labelbox .input .step-2-6 span {
    display: block;
    float: left;
    width: 25px;
    line-height: 32px;
    font-size: 13px;
    margin: 0;
    text-align: center
}

#star #member .edit .labelbox .input .step-2-6 span.w {
    width: 60px
}

#star #member .edit .labelbox .input .step-2-6 span.w2 {
    width: 65px
}

#star #member .edit .labelbox .input .step-2-6 input {
    float: left;
    width: calc(50% - 80px);
    margin-left: 5px;
    margin-right: 10px
}

#star #member .edit .labelbox .input .step-2-6 select {
    float: left;
    width: calc(25% - 60px)
}

#star #member .edit .labelbox .input textarea {
    height: auto;
    outline: none;
    padding: 4px 10px;
    transition: all .25s linear;
    -ms-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -webkit-transition: all .25s linear
}

#star #member .edit .labelbox .input textarea:focus {
    border-color: #17a8e5
}

#star #member .edit .labelbox .input.step-3-1 select {
    float: left;
    width: calc(15% - 29.166px)
}

#star #member .edit .labelbox .input.step-3-1 select.year {
    width: calc(20% - 29.167px)
}

#star #member .edit div[class^="more-"] +div[class^="more-"] {
    border-top: 1px solid #ddd;
    padding-top: 15px
}

#star #member .edit a.add-btn {
    display: block;
    width: 140px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    color: #fff;
    background: #00ad86;
    margin: 0 auto 30px;
    text-align: center;
    text-decoration: none
}

#star #member .edit a.add-btn:hover {
    background: #009473
}

#star #member .edit a.add-btn i {
    margin-right: 5px
}

#star #member .edit .labelbox .input .step-4-1 +.step-4-1 {
    margin-top: 10px
}

#star #member .edit .labelbox .input .step-4-1 p {
    line-height: 32px;
    margin-bottom: 0;
    font-size: 13px
}

#star #member .edit .labelbox .input .step-4-1 p span {
    float: none;
    font-size: 13px;
    margin-right: 3px
}

#star #member .edit .labelbox .input .step-4-1 input.step-4-2 {
    float: left;
    width: 140px;
    margin-right: 10px
}

#star #member .edit .labelbox .input .step-4-1 input[type="file"] {
    border: none;
    padding: 0;
    height: auto;
    margin-bottom: 5px
}

#star #member .edit .labelbox .input .step-4-3 {
    line-height: 24px;
    font-size: 14px
}

#star #member .edit .labelbox .input select.step-5-1 {
    width: auto;
    margin-right: 10px
}

#star #member .edit .labelbox .input input.step-5-2 {
    float: left;
    width: calc(100% - 40px)
}

#star #member .edit .labelbox .input input.step-5-2 +span {
    width: 30px;
    margin-left: 10px
}

#star #member .edit .labelbox .input input.step-5-3 {
    float: left;
    width: calc(100% - 174px)
}

#star #member .edit .labelbox.step-5-4 .item {
    width: 180px
}

#star #member .edit .labelbox.step-5-4 .input {
    width: calc(100% - 200px)
}

#star #member .edit .labelbox.step-5-5 .item {
    width: 240px
}

#star #member .edit .labelbox.step-5-5 .input {
    width: calc(100% - 260px)
}

#star #member .edit .labelbox.step-5-5 .input select {
    width: auto;
    max-width: calc(100% - 98px);
    margin-right: 10px
}

#star #member .edit .labelbox .input input.step-5-6 {
    width: 120px
}

#license {
    position: relative;
    width: 94%;
    max-width: 940px;
    max-height: 80vh;
    background: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    padding: 20px;
    margin: 10vh auto
}

#license .inner {
    max-height: calc(80vh - 40px)
}

@media (max-width: 991px) {
    #star #member .edit .labelbox .input .step-2-3.new {
        width:100%
    }

    #star #member .edit .labelbox .input .step-2-3 input.new,#star #member .edit .labelbox .input .step-2-3 select {
        width: 100px
    }

    #star #member .edit .labelbox .input .step-2-3 input {
        width: 100px
    }
}

@media (max-width: 767px) {
    #star .star-form .step li {
        display:block;
        width: 200px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px
    }

    #star .star-form .step li:last-child {
        margin-right: auto;
        margin-bottom: 0
    }

    #star .star-form .step li:before {
        border-top: 6px solid #ddd;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: none;
        top: auto;
        left: 50%;
        bottom: -15px;
        margin-left: -4px
    }

    #star .star-form .labelbox.step-2-a .item {
        float: none
    }

    #star .star-form .labelbox.step-2-a .input {
        float: none;
        width: 100%;
        margin-top: 5px
    }

    #star .star-form .labelbox .input .step-2-1 label.step-2-2,#star .star-form .labelbox .input .step-2-3 label.step-2-2 {
        float: none;
        width: 100%;
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input .step-2-1 >span {
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input .step-2-1 select,#star #member .edit .labelbox .input .step-2-1 select.year {
        width: calc(50% - 37.5px);
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input .step-2-3 >span {
        margin-bottom: 5px
    }

    #star .star-form .labelbox .input .step-2-1 input,#star #member .edit .labelbox .input .step-2-3 input {
        width: 100px;
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input .step-2-3 select,#star #member .edit .labelbox .input .step-2-3 select.year {
        width: 100px;
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input.step-2-4 {
        width: 100%;
        margin-top: 5px
    }

    #star #member .edit .labelbox .input.step-2-4 span {
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input.step-2-4 select {
        width: calc(50% - 35px);
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input.step-2-7 {
        width: 100%;
        margin-top: 5px
    }

    #star #member .edit .labelbox .input.step-3-1 {
        width: 100%;
        margin-top: 5px
    }

    #star #member .edit .labelbox .input.step-3-1 span {
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input.step-3-1 select {
        width: calc(30% - 33.333px);
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input.step-3-1 select.year {
        width: calc(40% - 33.333px);
        margin-bottom: 5px
    }

    #star #member .edit .labelbox.step-5-5 .item {
        float: none
    }

    #star #member .edit .labelbox.step-5-5 .input {
        float: none;
        width: 100%;
        margin-top: 5px
    }
}

@media (max-width: 639px) {
    #star #member .edit .labelbox .input .step-2-6 span {
        margin-bottom:5px
    }

    #star #member .edit .labelbox .input .step-2-6 input {
        width: calc(100% - 70px);
        margin-right: 0;
        margin-bottom: 5px
    }

    #star #member .edit .labelbox .input .step-2-6 span.w {
        margin-left: 9px
    }

    #star #member .edit .labelbox .input .step-2-6 select {
        width: calc(50% - 59.5px)
    }

    #star .star-form .grandti +small {
        display: block;
        margin-top: -5px;
        margin-left: 0;
        margin-bottom: 15px
    }
}

.tab-div {
    display: table;
    width: 100%;
    table-layout: fixed
}

.tab-div .tab-head,.tab-div .tab-body {
    display: table-row
}

.tab-div .tab-th,.tab-div .tab-td {
    display: table-cell
}

.tab-div .tab-th {
    line-height: 24px;
    font-size: 16px;
    /*color: #fff;*/
    /*background: #17a8e5;*/
    /*border: 1px solid #ddd;*/
    /*border-left: 1px solid #fff;*/
    /*box-shadow: 1px 1px 2px rgba(0,0,0,.25);*/
    text-align: center;
    padding: 5px 10px;
    font-weight: bold;
    padding: 8px 5px 5px;
    border-bottom: 3px solid #f03940;
}

.tab-div .tab-th:first-child {
    border-left: none
}

.tab-div .tab-td {
    line-height: 24px;
    font-size: 16px;
    padding: 5px 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    padding: 8px 5px 5px;
    color: #666;
}

.tab-div .tab-body:last-child .tab-td {
    border-bottom: none
}

@media (min-width: 768px) {
    .tab-div .clearfix:before,.tab-div .clearfix:after {
        display:none
    }
}

@media (max-width: 767px) {
    .tab-div,.tab-div .tab-body,.tab-div .tab-td {
        display:block;
        width: 100% !important
    }

    .tab-div .tab-head {
        display: none
    }

    .tab-div .tab-td {
        padding: 2px 0;
        border-bottom: none
    }

    .tab-div .tab-body {
        padding: 10px 0;
        border-bottom: 1px solid #ddd
    }

    .tab-div .tab-body:last-child {
        border-bottom: none
    }
}

.org-tab .tab-th:nth-child(1) {
    /*width: 120px*/
}

.org-tab .tab-th:nth-child(2) {
    /*width: 100px*/
    /*width: 150px*/
}

.org-tab .tab-th:nth-child(3) {
    /*width: 260px*/
   /* width: 150px*/
}

.org-tab .tab-td:nth-child(1),.org-tab .tab-td:nth-child(2) {
    text-align: center
}

.org-tab .tab-td.tab-td-head {
    /*color: #17a8e5*/
}

.org-tab .tab-td ol {
    margin: 0;
    padding-left: 20px
}

.org-tab .tab-td ol li {
    padding-left: 10px
}








.org-tab2 .tab-th:nth-child(1) {
    /*width: 120px*/
}

.org-tab2 .tab-th:nth-child(2) {
    /*width: 100px*/
    /*width: 150px*/
}

.org-tab2 .tab-th:nth-child(3) {
    /*width: 260px*/
   /* width: 150px*/
}

.org-tab2 .tab-td:nth-child(1),.org-tab2 .tab-td:nth-child(2) {
    text-align: left
}

.org-tab2 .tab-td.tab-td-head {
    /*color: #17a8e5*/
}

.org-tab2 .tab-td ol {
    margin: 0;
    padding-left: 20px
}

.org-tab2 .tab-td ol li {
    padding-left: 10px
}

@media (max-width: 767px) {
    .org-tab .tab-td.tab-td-head {
        display:inline-block;
        width: auto !important;
        /*font-size: 16px;*/
        font-size: 18px;
        color: #fff;
        /*background: #17a8e5;*/
        background: #f03940;
        margin-bottom: 5px;
        padding: 5px 15px;
        box-shadow: 1px 1px 2px rgba(0,0,0,.25)
    }

    .org-tab .tab-td.tab-td-head br {
        display: none
    }

    .org-tab .tab-td {
        position: relative;
        /*padding-left: 90px;*/
        padding-left: 50%;
        /*text-align: left !important */
        text-align: right !important 
        font-size: 18px;
    }

    .org-tab .tab-td:before {
        content: attr(data-title);
        display: block;
        position: absolute;
        /*width: 80px;*/
        width: 50%;
        height: 26px;
        line-height: 26px;
        /*font-size: 15px;*/
        /*color: #17a8e5;*/
        /*color: #c8c8c8;*/
        /*text-align: center;*/
        text-align: left;
        top: 1px;
        left: 0;
        font-size:18px;
        margin-left: 10px;
        color: #f58085;
    }


    .org-tab2 .tab-td.tab-td-head {
        display:inline-block;
        width: auto !important;
        /*font-size: 16px;*/
        font-size: 18px;
        color: #fff;
        /*background: #17a8e5;*/
        background: #f03940;
        margin-bottom: 5px;
        padding: 5px 15px;
        box-shadow: 1px 1px 2px rgba(0,0,0,.25)
    }

    .org-tab2 .tab-td.tab-td-head br {
        display: none
    }

    .org-tab2 .tab-td {
        position: relative;
        /*padding-left: 90px;*/
        padding-left: 35%;
        /*text-align: left !important */
        text-align: right !important 
        font-size: 18px;
    }

    .org-tab2 .tab-td:before {
        content: attr(data-title);
        display: block;
        position: absolute;
        /*width: 80px;*/
        width: 50%;
        height: 26px;
        line-height: 26px;
        /*font-size: 15px;*/
        /*color: #17a8e5;*/
        /*color: #c8c8c8;*/
        /*text-align: center;*/
        text-align: left;
        top: 1px;
        left: 0;
        font-size:18px;
        margin-left: 10px;
        color: #f58085;
    }


}

#about .benefit {
    max-width: 1085px;
    padding-bottom: 40px
}

#about .benefit .secti {
    font-size: 24px;
    color: #008dd2;
    margin: 0
}

#about .benefit .secti span {
    text-transform: uppercase
}

#about .benefit .cont {
    line-height: 32px;
    font-size: 16px;
    color: #000;
    margin: 20px 0
}

#about .benefit .list {
    margin: 0;
    padding-left: 20px;
    list-style-type: cjk-ideographic;
    font-size: 18px;
    color: #008dd2;
    margin-left: 5px
}

#about .benefit .list li {
    padding-left: 10px
}

#about .benefit .list >li +li {
    margin-top: 20px
}

#about .benefit .list li strong {
    line-height: 34px;
    font-size: 18px;
    font-weight: normal;
    color: #008dd2
}

#about .benefit .list li span {
    font-size: 16px;
    color: #333
}

#about .benefit .list-sub {
    font-size: 16px;
    color: #333;
    margin: 5px 0;
    padding-left: 20px;
    list-style-type: decimal
}

#investor .meet-box {
    margin-top: 20px
}

#investor .meet-box .title {
    line-height: 32px;
    font-size: 18px;
    color: #008dd2
}

#investor .meet-box .head {
    display: table;
    width: 100%;
    border-top: 2px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,.1) inset
}

#investor .meet-box .head >div {
    display: table-cell;
    width: 25%;
    text-align: center;
    padding: 5px 10px;
    vertical-align: middle
}

#investor .meet-box .item {
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc
}

#investor .meet-box .item >div {
    display: table-cell;
    width: 25%;
    text-align: center;
    padding: 5px;
    vertical-align: middle
}

#investor .meet-box .item >div span {
    display: none
}

#investor .meet-box .item >div a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #008dd2;
    border-radius: 100%;
    text-align: center
}

#investor .meet-box .item >div a:hover {
    background: #222
}

@media (max-width: 767px) {
    #investor .meet-box .head {
        display:none
    }

    #investor .meet-box .item {
        display: block;
        border-top: 2px solid #ccc;
        box-shadow: 0 1px 2px rgba(0,0,0,.1) inset
    }

    #investor .meet-box .item >div {
        position: relative;
        display: block;
        width: 100% !important;
        border-bottom: 1px solid #ccc;
        text-align: left;
        padding-right: 50px
    }

    #investor .meet-box .item >div a {
        position: absolute;
        top: 50%;
        right: 5px;
        margin-top: -20px
    }

    #investor .meet-box .item >div span {
        display: block;
        line-height: 26px;
        padding: 7px 0
    }
}

#investor .equity-tab {
    margin-top: 20px;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid #e5e5e5
}

#investor .equity-tab th {
    text-align: center;
    width: 25%;
    padding: 10px;
    background: #22aee9;
    color: #fff;
    border-right: 1px solid #fff
}

#investor .equity-tab th:first-child {
    width: 50%
}

#investor .equity-tab td {
    padding: 10px;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    text-align: center
}

#investor .equity-tab td:first-child {
    text-align: left
}

@media (max-width: 479px) {
    #investor .equity-tab thead {
        display:none
    }

    #investor .equity-tab,#investor .equity-tab tbody,#investor .equity-tab tr,#investor .equity-tab td {
        display: block;
        width: 100%
    }

    #investor .equity-tab {
        border-color: #ccc;
        border-top-width: 2px;
        border-left-width: 2px
    }

    #investor .equity-tab td {
        position: relative;
        border-right-color: #ccc;
        border-bottom-color: #fff;
        text-align: left;
        padding: 5px 10px 4px
    }

    #investor .equity-tab td:nth-child(3) {
        border-bottom-color: #ccc
    }

    #investor .equity-tab td:nth-child(2),#investor .equity-tab td:nth-child(3) {
        padding-left: 90px
    }

    #investor .equity-tab td:nth-child(2):before,#investor .equity-tab td:nth-child(3):before {
        content: attr(data-title);
        display: block;
        position: absolute;
        width: 80px;
        height: 35px;
        line-height: 35px;
        color: #fff;
        background: #22aee9;
        top: 0;
        left: 0;
        text-align: center
    }
}

[data-edit-theme="society-group"] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse
}

[data-edit-theme="society-group"] td.head {
    font-weight: bold;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    padding: 10px 15px;
    text-align: center
}

[data-edit-theme="society-group"] td.content {
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    padding: 5px 10px;
    vertical-align: top
}

[data-edit-theme="society-group"] td.content p {
    font-weight: bold;
    text-align: center;
    margin: 0 0 5px
}

[data-edit-theme="society-group"] td.content ol {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 15px
}

[data-edit-theme="society-lines"] {
    position: relative;
    height: 41px
}

[data-edit-theme="society-lines"] i {
    display: block;
    position: absolute;
    background: #e0e0e0
}

[data-edit-theme="society-lines"] i:nth-child(1) {
    width: 70%;
    height: 1px;
    top: 20px;
    left: 15%
}

[data-edit-theme="society-lines"] i:nth-child(2) {
    width: 1px;
    height: 41px;
    top: 0;
    left: 50%
}

[data-edit-theme="society-lines"] i:nth-child(3) {
    width: 1px;
    height: 20px;
    top: 21px;
    left: 15%
}

[data-edit-theme="society-lines"] i:nth-child(4) {
    width: 1px;
    height: 20px;
    top: 21px;
    right: 15%
}

[data-edit-theme="ol-main-list"] {
    counter-reset: item;
    margin-top: 5px;
    padding-left: 5px
}

[data-edit-theme="ol-main-list"] li {
    display: block
}

[data-edit-theme="ol-main-list"] li:before {
    content: counters(item,"-")". ";
    counter-increment: item
}

[data-edit-theme="ol-main-list"] ol {
    margin-top: 0;
    padding-left: 20px
}

@media (max-width: 767px) {
    [data-edit-theme="society-group"],[data-edit-theme="society-group"] tbody,[data-edit-theme="society-group"] tr,[data-edit-theme="society-group"] td {
        display:block;
        position: relative;
        width: 100%
    }

    [data-edit-theme="society-group"] td.empty {
        display: none
    }

    [data-edit-theme="society-group"] td.head {
        width: 85%
    }

    [data-edit-theme="society-group"] td.content {
        width: 85%;
        margin: 20px 0 20px 15%
    }

    [data-edit-theme="society-group"] td.content:before {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        height: 100%;
        background: #e0e0e0;
        top: -22px;
        left: -7.5%;
        padding-top: 22px;
        box-sizing: content-box;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box
    }

    [data-edit-theme="society-group"] td.content:last-child:before {
        height: 50%
    }

    [data-edit-theme="society-group"] td.content:after {
        content: '';
        display: block;
        position: absolute;
        width: 7.5%;
        height: 1px;
        background: #e0e0e0;
        top: 50%;
        left: -7.5%
    }

    [data-edit-theme="society-lines"] {
        display: none
    }
}

#searchTxtBox {
    line-height: initial
}

@media (min-width: 1200px) {
    .header .nav .nav-sub-wrap .nav-sub {
        display:inline-block;
        vertical-align: top;
        white-space: nowrap
    }
}

@media (max-width: 1199px) {
    .header .nav .nav-sub-wrap .nav-sub {
        margin-left:0 !important
    }
}

#investor .stockBoxNote {
    max-width: 780px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    margin: 40px auto 0;
    padding: 20px 40px
}

@media (max-width: 768px) {
    #investor .stockBoxNote {
        font-size:15px;
        padding: 10px 15px
    }
}

@media (max-width: 420px) {
    #investor .stockBoxNote {
        padding-bottom:0
    }

    #investor .stockBoxNote span {
        display: block;
        position: relative;
        margin-bottom: 10px
    }

    #investor .stockBoxNote br {
        display: none
    }
}

.cookie-notice {
    position: relative;
    line-height: 18px;
    font-size: 14px;
    color: #fff;
    background: #22aee9;
    padding: 10px 30px 10px 10px
}

.cookie-notice a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: underline
}

.cookie-notice .cookie-notice-close {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 9px;
    right: 5px;
    opacity: .5
}

.cookie-notice .cookie-notice-close:hover {
    opacity: .75
}

.cookie-notice .cookie-notice-close:before,.cookie-notice .cookie-notice-close:after {
    content: '';
    display: block;
    position: absolute;
    width: 14px;
    height: 2px;
    background: #fff;
    top: 9px;
    left: 3px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.cookie-notice .cookie-notice-close:after {
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

#text-edit .content {
    margin-bottom: 60px
}

.text-edit * {
    max-width: 100%
}

.text-edit img {
    height: auto !important
}

#contact .input {
    position: relative
}

#contact .input .code {
    position: absolute;
    right: 0;
    top: 0
}

#contact .input .code .captcha-img {
}

.link-private {
    display: inline-block;
    margin: 0 5px;
    color: #FF9800;
    line-height: 50px
}


/*table end*/


/*ir*/

.divider{
    margin-top: 0;
}
.main_title{
    margin-bottom: 24px;
}
.sub_title{
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 22px;
    padding: 0 40px;
}
.text_area{
    text-align: left;
    margin-bottom: 35px;
}
.category{
    /*margin-top: 5px;*/
    margin-bottom: 50px;
}
.select_block{
    margin-bottom: 20px;
}
.download_icon{
    padding: 5px;
}
.download_icon:before{
    content: '\f0ed';
    font-family: 'FontAwesome';
    color: #666;
    font-size: 20px;
}
/*-- 每月報告 --*/
.postcontent+.postcontent{
    margin-top: 55px;
}
.postcontent,.template_table{
    width: 100%;
    position: relative;
}
.template_table thead:after{
    content: '';
    width: 100%;
    height: 3px;
    display: block;
    position: absolute;
    /*background-color: #d21f27;*/
    background-color: #f03940;
    margin: -3px 0 0;
    left: 0;
}
.template_table td, .template_table th{
    border:1px solid #ddd;
    padding: 8px 5px 5px;
    text-align: center;
    position: relative;
    font-size: 19px;
}

    .template_table.download_table2 td:first-child{
        padding-left: 130px;
        text-align: left;
    }


.template_table th{
    color: #333;
}
.template_table td{
    color: #666;
}
.template_table thead tr, .template_table tbody tr:nth-child(even){
    background-color: #f3f3f3;
}
.template_table.download_table td:first-child{
    text-align: left;
    padding-left: 150px;
}
.download_table td, .download_table th{
    width: 50%;
    border-left: 0;
    border-right: 0;
    min-height: 40px;
}
.download_table thead{
    display: none; /*僅投資人關係單元的下載表格移除標題*/
}
.download_table tr:hover td, .download_table tr:hover a:before{
    background-color: #f03940;
    color: #FFF;
}
.event_table td, .event_table th{
    border-left: 0;
    border-right: 0;
}
.event_table .date, .event_table .content{
    width: 26%;
    word-break:break-all;
}
.event_table .description {
    width:48%;
    word-break:break-all;
}
.event_table td.description {
    text-align:left;
}
.event_table a{
    color: #d21f27;
}
.event_table a:hover{
    text-decoration: underline !important;
}
.event_table a:nth-child(2n):before{
    content: '';
    display: inline-block;
    width: 1px;
    height: 13px;
    margin-left: 5px;
    margin-right: 8px;
    margin-bottom: -2px;
    background-color: #d21f27;
}
.event_table a:nth-child(2n):after{
    display: block;
    content: '';
}
.investor_table, .event_table{
    width: 1140px;
}
.investor_table td:first-child, .investor_table td:first-child{
    width: 87px;
}
.investor_table td+td{
    /*text-align: right;*/
    /*padding-left: 20px;*/
    /*padding-right: 20px;*/
}
.investor_table td.negative{
    color: #d21f27;
}
.investor_table .total, .investor_table .revenue{
    background-color: #e0e0e0;
}
.table_note{
    display: block;
    width: 100%;
    text-align: right;
    margin-bottom: 15px;
    margin-top: 5px;
}
.table_title{
    color: #d21f27;
    font-weight: bold;
    line-height: 18px;
    margin-bottom: 25px;
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: #888 !important;
}
.link{
    margin-top: 30px;
    background-color: #313131;
    color: #FFF;
}
/*--在股利分派及行事曆表格第一行文字設為粗體--*/
.font_weight_bold tbody tr:first-child td {
    /*font-weight:900;*/
}
/*-- 法人說明會 --*/
.conference_title{
    text-align: center;
    color: #d21f27;
    margin-top: -7px;
    margin-bottom: 25px;
}
.info_block{
    margin-bottom: 35px;
}
.info{
    color: #000;
    font-weight: bold;
    border: 1px solid #d0d0d0;
    padding: 25px 55px;
    width: 48.5%;
    min-height: 267px;
    float: left;
}
.info div>div{
    display: inline-block;
    height: 100%;
    vertical-align: top;
    line-height: 30px !important;
}
.info p{
    color: #666;
    font-weight: normal;
    display: inline-block;
    line-height: 30px !important;
}
.google_map{
    width: 48.5%;
    float: right;
    min-height: 267px;
}
/*-- 表單區塊 --*/
.form_block .select_block{
    margin-top: 25px;
    margin-bottom: 15px;
}
.form_block .select_block .form-control{
    padding-left: 12px;
}
.form_block{
    width: 65%;
    display: block;
    margin: 0 auto;
}
.form_table{
    width: 100%;
}
.form_table td{
    vertical-align: top;
}
.form_table td input, .form_table td textarea{
    width: 100%;
    margin-top: 10px;
}
.form_table label{
    color: #333;
}
.form_table .form-group{
    margin-bottom: 25px;
}
.form_table .col2 td{
    padding-right: 15px;
    width: 50%;
}
.form_table .col2 td+td{
    padding-right: 0;
    padding-left: 15px;
}
.form_table td textarea{
    height: 145px;
}
.required label:after{
    content: '*';
    color: #d21f27;
    display: inline-block;
}
.codes .form-group .form-control{
    width: 200px;
    margin-right: 5px;
}
.codes .form-group label{
    display: block;
}
.codes .form-group input, .codes .code_block{
    display: inline-block;
}
.code_block{
    margin: 5px 0;
}
.submit_btn{
    text-align: center;
}
.submit_btn input{
    width: 150px;
    height: 45px;
    color:#626262;
    border:none;
    background-color: #DCDCDC;
    border-radius: 2px;
    margin: 5px 9px 0;
    padding: 0;
    background-color: #FC3731;
    color:#FFF;
}
.submit_btn input:focus{
    outline: none !important;
}
@media(max-width:1200px){
    .main_title h1{
        color: #FFF;
    }
    .category a{
        margin-bottom: 10px;
    }
    .category a:last-child{
        margin-bottom: 0;
    }
    .table_note{
        text-align: left;
    }
    .postcontent{
        border-bottom: 0;
    }
    .postcontent{
        margin-bottom: 0 !important;
        padding-bottom: 0;
    }
    .template_table.download_table td:first-child{
        padding-left: 20px;
        font-size: 18px;
    }

    .template_table.download_table2 td:first-child{
        padding-left: 20px;
        text-align: left;
    }

    .template_table.download_table3 td:first-child{
        /*padding-left: 20px;*/
        text-align: center;
    }
}
@media(max-width:767px){
    .info{
        margin-bottom: 0;
    }
    .info, .google_map{
        width: 100%;
        float: none;
        margin-bottom: 20px;
        min-height: auto;
    }
    .form_table td{
        width: 100%;
        display: block;
        padding: 0;
    }
    .form_table .col2 td{
        padding-right: 0;
        width: 100%;
    }
    .form_table .col2 td+td{
        padding-left: 0;
    }
}
@media(max-width:479px){
    .download_table td+td, .download_table th+th{
        width: 24%;
    }
    
}

/*ir*/
/*--//image-zoom--*/
/*--//gallery--*/
/*--monthlysales--*/

/*.org-tab .tab-th:nth-child(1) {
    width: 120px;
}

.tab-div .tab-th:first-child {
    border-left: none;
}

.tab-div .tab-th {
    line-height: 24px;
    font-size: 16px;
    color: #fff;
    background: #17a8e5;
    border-left: 1px solid #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,.25);
    text-align: center;
    padding: 5px 10px;
}

.tab-div .tab-th, .tab-div .tab-td {
    display: table-cell;
}
*/



/*--monthlysales--*/
.well {
    font-weight: 300;
    font-size: 14px;
}
.list-group-item {
    font-weight: 300;
    font-size: 14px;
}
li.list-group-item1 {
    font-size: 14px;
    font-weight: 300;
}
.show-grid [class^=col-] {
    background: #fff;
	text-align: center;
	margin-bottom: 10px;
	line-height: 2em;
	border: 10px solid #f0f0f0;
}
.show-grid [class*="col-"]:hover {
	background: #e0e0e0;
}
.grid_3{
	/*margin-bottom:2em;*/
}
.xs h3, h3.m_1{
	color:#000;
	font-size:1.7em;
	font-weight:300;
	margin-bottom: 1em;
}
.grid_3 p{
	color: #999;
	font-size: 0.85em;
	margin-bottom: 1em;
	font-weight: 300;
}
.label {
	font-weight: 300 !important;
	border-radius:4px;
}  
.grid_5{
	background:none;
	/*padding:2em 0;*/
}
.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg, h3.bars {
    margin-bottom: 1em;
    color: #f03940;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 2px;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	border-top: none !important;
}
.tab-content > .active {
	display: block;
	visibility: visible;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	z-index: 0;
}
.badge-primary {
	background-color: #03a9f4;
}
.badge-success {
	background-color: #fb5710;
}
.badge-warning {
	background-color: #ffc107;
}
.badge-danger {
	background-color: #e51c23;
}
.grid_3 p{
	line-height: 2em;
	color: #888;
	font-size: 0.9em;
	margin-bottom: 1em;
	font-weight: 300;
}
.bs-docs-example {
	margin: 1em 0;
}
section#tables  p {
	margin-top: 1em;
}
.tab-container .tab-content {
	border-radius: 0 2px 2px 2px;
	border: 1px solid #e0e0e0;
	padding: 16px;
	background-color: #ffffff;
}
.table td, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	padding: 15px!important;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	font-size: 0.9em;
	color: #999;
	border-top: none !important;
}
.tab-content > .active {
	display: block;
	visibility: visible;
}
.label {
	font-weight: 300 !important;
}
.label {
	padding: 4px 6px;
	border: none;
	text-shadow: none;
}
.alert {
	font-size: 0.85em;
}
h1.t-button,h2.t-button,h3.t-button,h4.t-button,h5.t-button {
	line-height:2em;
	margin-top:0.5em;
	margin-bottom: 0.5em;
}
li.list-group-item1 {
	line-height: 2.5em;
}
.input-group {
	margin-bottom: 20px;
}
.in-gp-tl{
	padding:0;
}
.in-gp-tb{
	padding-right:0;
}
.list-group {
	margin-bottom: 48px;
}
ol {
	margin-bottom: 44px;
}
h2.typoh2{
    margin: 0 0 10px;
}
@media (max-width:768px){
.grid_5 {
	padding: 0 0 1em;
}
.grid_3 {
	margin-bottom: 0em;
}
}
@media (max-width:640px){
h1, .h1, h2, .h2, h3, .h3 {
	margin-top: 0px;
	margin-bottom: 0px;
}
.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg, h3.bars {
	margin-bottom: .5em;
}
.progress {
	height: 10px;
	margin-bottom: 10px;
}
ol.breadcrumb li,.grid_3 p,ul.list-group li,li.list-group-item1 {
	font-size: 14px;
}
.breadcrumb {
	margin-bottom: 25px;
}
.well {
	font-size: 14px;
	margin-bottom: 10px;
}
h2.typoh2 {
	font-size: 1.5em;
}
.label {
	font-size: 60%;
}
.in-gp-tl {
	padding: 0 1em;
}
.in-gp-tb {
	padding-right: 1em;
}
}
@media (max-width:480px){

.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg, h3.bars {
	font-size: 1.2em;
}
.table h1 {
	font-size: 26px;
}
.table h2 {
	font-size: 23px;
	}
.table h3 {
	font-size: 20px;
}
.label {
	font-size: 53%;
}
/*.alert,p {
	font-size: 14px;
}*/

.alert,p {
    font-size: 18px;
}
.pagination {
	margin: 20px 0 0px;
}
.grid_3.grid_4.w3layouts {
	margin-top: 25px;
}
}
@media (max-width: 320px){
.grid_4 {
	margin-top: 18px;
}
h3.title {
	font-size: 1.6em;
}
.alert {
	padding: 10px;
	margin-bottom: 10px;
}
ul.pagination li a {
	font-size: 14px;
	padding: 5px 11px;
}
.list-group {
	margin-bottom: 10px;
}
.well {
	padding: 10px;
}
.nav > li > a {
	font-size: 14px;
}
table.table.table-striped,.table-bordered,.bs-docs-example {
		display: none;
}
}
/*-- //monthlysales --*/
.form-group.row {
    margin-bottom: 1rem;
}
.bd-example {
    padding: 2em;
    border: 1px solid #eee;
    margin-bottom: 2em;
}

/*--/contact--*/
.address-left {
	width: 80px;
    height: 80px;
    text-align: center;
    background:#f03940;
    margin: 0 auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
}
.address-grid-wthree-agileits {
	text-align: center;
    margin: 0 auto;
}
.address-grid-wthree-agileits span {
    font-size: 1.7em;
    color: #fff;
    margin-top: 27px;
}

.address-right {
	margin-top:1.2em;
}
.address-right h6 {
    font-size: 1.1em;
    margin-bottom: 0.5em;
}
.contact_grid_right {
    width: 100%;
}
.contact_grid_right input[type="text"],
.contact_grid_right input[type="email"],
.contact_grid_right textarea {
    outline: none;
    padding: 15px 15px;
    font-size: 14px;
    color: #777;
    background: #f7f7f7;
    width: 100%;
    letter-spacing: 1px;
    border: 1px solid #ebeeef;
    margin-top: 1em;
}

.contact_grid_right input[type="text"]:nth-child(2),
.contact_grid_right input[type="email"] {
    margin: 1em 0 0;
}

.contact_grid_right textarea {
  /*  min-height: 150px; */
    margin: 1em 0em;
    resize: none;
}

.contact_grid_right input[type="submit"],
.contact_grid_right input[type="reset"] {
    outline: none;
    padding: 20px 0;
    font-size: 14px;
    color: #fff;
	background: #0e0f10;
	width: 22%;
    border: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
	font-weight:600;
	cursor: pointer;
}

.contact_grid_right input[type="submit"],
.contact_grid_right input[type="reset"]:hover {
    background-color: #f03940;
}

.contact-left h4 {
    color: #444;
    font-size: 1em;
    margin-bottom: .5em;
    letter-spacing: 1px;
    font-weight: 700;
}

.contact-left p {
    font-size: 1em;
    letter-spacing: 1px;
}

.contact-text a {
    color: #888;
    -webkit-transition: all 200ms ease-in;
}

.contact-text a:hover {
    color: #fb383b;
}

.contact_grid_right h6, .contact-left h6 {
    font-size: 1.2em;
    color: #f03940;
    margin-bottom: 1.5em;
    letter-spacing: 1px;
    font-weight: 600;
}
.contact-map {
    width: 100%;
}

.contact-map iframe {
    width: 100%;
    height:300px;
}
.address.row {
    width: 100%;
}
.address-right a {
    color: #777;
}
.address-right p {
    color: #777;
}
/*-- //contact--*/
/* -- Responsive code -- */

@media screen and (max-width: 1366px) {

}
@media screen and (max-width: 1080px) {
 .w3layouts_getin_info h3 {
    font-size: 30px;
}
}

@media screen and (max-width: 1050px) {
   
}

@media screen and (max-width: 1200px) {
    .navbar-toggler {
        padding: 0.2rem 0.5rem;
        /*background-color: #f03940;*/
        border: none;
    }
    .slider-info {
        height: 57vw;
    }
    h3.w3ls-title {
        font-size: 3em;
    }

	.navbar-nav .dropdown-menu {
		text-align: center;
	}
	h4.agile-title {
    width: 88%;
}
.slider-info p {
    width: 100%;
}
.details-w3l {
    margin-top: 2em;
}
.footer-grid:nth-child(3),.footer-grid:nth-child(4){
	/*margin-top:1.5em;*/
}
.copyrighttop {
    float: none;
    text-align: center;
    margin-bottom: 0.5em;
}
.copyrightbottom {
    float: none;
    text-align: center;
}
.w3layouts_getin_info {
    margin-bottom: 1em;
}
.w3layouts_getin_info h3 {
    text-align:center;
}
.banner-1 {
    height: 26vw;
}
.testi-left {
    width: 100%;
    margin: 2em auto 0;
}
}

@media screen and (max-width: 900px) {
}

@media screen and (max-width: 768px) {
  .w3_agile_testimonials_grid_right {
    width: 97%;
}
}

@media screen and (max-width: 736px) {
    .banner-text {
        padding: 9vw 0 0;
    }
    .jumbotron {
        padding: 0;
    }
    h3.w3ls-title {
        font-size: 2.7em;
}
.card-deck .card {
    flex: auto;
}
.card:nth-child(2) {
	margin-top:1.5em;
	margin-bottom:1.5em;
}
h4.agile-title {
    font-size: 2.5em;
    width: 100%;
}
.heading-agileinfo {
    font-size: 32px;
	    margin-bottom: 0.8em;
}
.w3layouts_stats_left p {
    font-size: 2.5em;
}
.arrow-container {
    left: 43%;
    top: 34%;
}
#small-dialog1 {
    max-width: 560px;
}
.about-info.about-info2 {
    border-left: none;
    border-right: none;
}
.about-info.about-info2 {
    margin: 2em 0;
}
.features {
    padding: 2.5em 0;
}
.w3layouts_news_left_grid2 {
    margin: 2em 0;
}
}
@media screen and (max-width: 667px) {
    .slider-info {
        /*height: 61vw;*/
        height: 41vw;
    }
    h3.w3ls-title {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 640px) {
.banner-1 {
    height: 29vw;
}
}

@media screen and (max-width: 600px) {
    .home h3 {
        font-size: 1.8em;
    }
    .banner-text {
        padding: 9vw 3vw 0;
    }
    h3.agile-title {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 568px) {
    h3.w3ls-title {
        font-size: 2.4em;
    }
    h3.agile-title {
        font-size: 2.3em;
    }
	h4.agile-title {
    font-size: 2em;
    line-height: 1.3em;
}
.w3_counter_grid1,.w3_counter_grid2{
	margin-top:1.5em;
}
.agile_testimonials_grids {
    margin: 0em 0 0em;
}
.top-middle li {
    margin-right: 0px;
}
.top-middle {
    float: left;
    width: 50%;
}
.top-left {
    float: right;
    width: 50%;
}
}
@media screen and (max-width: 480px) {
    .slider-info {
        /*min-height: 315px;*/
    }
    h3.w3ls-title {
        font-size: 2.2em;
    }
	.pricing-grid1, .pricing-grid2, .pricing-grid3 {
    width: 100%;
    margin-right: 0%;
}
.pricing-grid2 {
    margin: 1.5em 0;
}
.heading-agileinfo span {
    font-size: 14px!important;
    letter-spacing: 2px;
}
.pop-bg {
    min-height: 50vw;
}
.arrow-container {
    left: 39%;
    top: 30%;
}
.banner-1 {
    height: 34vw;
}
.welcome-left h3 {
    font-size: 30px;
}
.contact_grid_right input[type="submit"], .contact_grid_right input[type="reset"] {
    padding: 15px 0;
    width: 34%;
}
}
@media screen and (max-width: 414px) {
    .banner-text {
        padding: 8vw 3vw 0;
    }
	.navbar-light .navbar-brand {
    /*font-size: 0.9em;*/
    font-size: 50%;
}
.navbar {
    padding: 0.5rem 0rem;
}
.slider-info p {
    font-size: 14px;
}
.w3_agile_testimonials_grid_right {
    padding: 1em 3em;
}
}

@media screen and (max-width: 384px) {
	.card-header {
    padding: 0.4rem 0.2rem;
}
button.btn.btn-link {
    letter-spacing: 1px;
}
.w3layouts_getin_info h3 {
    font-size: 27px;
}
}

@media screen and (max-width: 375px) {
    .callbacks_tabs {
        right: 20px;
    }
    h3.agile-title {
        letter-spacing: 1px;
    }
	h4.agile-title {
    font-size: 1.6em;
}
}

@media screen and (max-width: 320px) {
    .navbar-light .navbar-brand {
        font-size: 0.8em;
    }
    h3.w3ls-title {
        font-size: 2em;
    }
	h4.agile-title {
    font-size: 1.4em;
}
.banner-text {
    padding: 12vw 3vw 0;
}
.slider-info p {
    font-size: 13px;
}
.heading-agileinfo span {
    letter-spacing: 0px;
}
.heading-agileinfo {
    font-size: 30px;
    margin-bottom: 0.4em;
}
.heading-agileinfo span:after {
    top: 124%;
    right: 39%;
}
button.btn.btn-link {
    letter-spacing: 0px;
    font-size: 15px;
}
.arrow-container {
    left: 35%;
    top: 20%;
}
.w3_agile_testimonials_grid_right {
    padding: 1em 2em;
}
.test-tooltip1:after {
    bottom: -6%;
}
.tex-t {
    padding: 3em 0em 0 1.5em;
}
.tex-t h4 {
    font-size: 18px;
}
.copyrightbottom p {
    letter-spacing: 0px;
    font-size: 14px;
    line-height: 25px;
}
p.card-text {
    font-size: 14px;
}
.agile_testimonials_grid p {
    font-size: 14px;
}
.w3layouts_getin_info h3 {
    font-size: 21px;
	letter-spacing:3px;
}
.banner-1 {
    height: 37vw;
}
.new_top h3 {
    font-size: 20px;
}
}

/* -- //Responsive code -- */
 .slash{
  position:relative;
  width:100px;
  height:40px;
  box-sizing:border-box;
  line-height:120px;
  background: linear-gradient(45deg, transparent 49.5%, #212121 49.5%, transparent 50.5%, transparent 50.5%);
}


.slash01{
position: absolute;
top: -50px;
}
.slash02{
position: absolute;
top: -25px;
left: 50px;
}

.recruit_img1{margin:30px auto 10px;}
.recruit_img1 img{max-width:100%;}
.recruit ul li{list-style:disc;}