.intro{position: absolute; height: 100vh; overflow: hidden;}
.intro .cover{position: relative; z-index: 10; height: 100vh; background-position: center; background-size: cover;}
.intro .shadow-1{background: url('../image/upload/intro-shadow-1.png'); position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}
.intro .shadow-2{background: url('../image/upload/intro-shadow-2.png'); position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.intro .shadow-1 {
    -webkit-transition: all 10s ease-in-out;
    -moz-transition: all 10s ease-in-out;
    -o-transition: all 10s ease-in-out;
    -ms-transition: all 10s ease-in-out;
    transition: all 10s ease-in-out;
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-direction: normal;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in-out;
}
@-webkit-keyframes blink2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes blink2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.intro .shadow-2 {
    -webkit-transition: all 5s ease-in-out;
    -moz-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
    -ms-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-direction: normal;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: blink2;
    -moz-animation-timing-function: ease-in-out;
}
@keyframes animatedBackground {
    from {
        background-position: 0 top;
    }
    to {
        background-position: 1160px top;
    }
}
.intro .bg-cloud{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../image/upload/intro-cloud.jpg');
    background-size: cover;
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 100s linear infinite;
}
.intro .inner{position: absolute; z-index: 30; 
    bottom: 0; 
    right: 50%; 
    margin-right: -765px;
    text-align: right;
    color: #fff;
    font-size: 30px;
    width: auto;
}
.intro .inner .title{float: left;
    line-height: 80px;
    color: #fff;
    font-weight: 100;
    font-size: 60px;
    padding: 0 40px;
    background-color: rgba(230,23,30,0.85);
}
.intro .inner .desc{float: left;
    line-height: 80px;
    color: #fff;
    font-weight: 100;
    font-size: 60px;
    padding: 0 40px;
    background-color: rgba(15,59,145,0.85);
}
.intro .owl-nav{position: absolute; width: 100%; top: 50%;}
.intro .owl-nav > div{position: absolute; top: 50%; transform: translate(0, -50%); width: 30px; height: 30px; font-size: 0;}
.intro .owl-prev{left: 20px; background: url('../image/icon/owl-prev-dark.png');}
.intro .owl-next{right: 20px; background: url('../image/icon/owl-next-dark.png');}




.wg-about{height: 100vh; background-color: #fff; overflow: hidden;}
.wg-about-content{}
.wg-about-content .inner{position: relative; padding: 60px 30px 0 0;}
.wg-about-content .thumb{width: 750px;}
.wg-about-content .title{margin: 0; font-weight: bold; font-size: 7.8em; line-height: 1em;}
.wg-about-content .desc{margin: 0; font-weight: 100; font-size: 2.6em; line-height: 1.2em;}
.wg-about-content .action{margin-top: 20px;}
.wg-about-content .square{pointer-events: none; position: absolute; z-index: 10; 
    top: 0; 
    left: 50%;
    width: 580px; 
    height: 100%;
}
.wg-about-content .square > div{
    position: absolute;
    background-color: rgba(15,59,145,0.85);
}
.wg-about-content .square .left{
    bottom: calc(100% - 50px);  
    left: 0;
    width: 18px;
    height: 0;

    -webkit-transition: all 600ms ease-out;
    -moz-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    -ms-transition: all 600ms ease-out;
    transition: all 600ms ease-out;

    -webkit-transition-delay: 2400ms;
    -moz-transition-delay: 2400ms;
    -o-transition-delay: 2400ms;
    -ms-transition: 2400ms;
}
.wg-about-content .square .top{
    top: 0; 
    left: 18px;
    width: 0;
    height: 18px;

    -webkit-transition: all 600ms ease-out;
    -moz-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    -ms-transition: all 600ms ease-out;
    transition: all 600ms ease-out;

    -webkit-transition-delay: 3000ms;
    -moz-transition-delay: 3000ms;
    -o-transition-delay: 3000ms;
    -ms-transition: 3000ms;
}
.wg-about-content .square .right{
    top: 18px; 
    right: 0;
    width: 18px;
    height: 0;

    -webkit-transition: all 600ms ease-out;
    -moz-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    -ms-transition: all 600ms ease-out;
    transition: all 600ms ease-out;

    -webkit-transition-delay: 3600ms;
    -moz-transition-delay: 3600ms;
    -o-transition-delay: 3600ms;
    -ms-transition: 3600ms;
}
.wg-about-content .square .bottom{
    bottom: 0; 
    right: 18px;
    width: 0;
    height: 18px;

    -webkit-transition: all 600ms ease-out;
    -moz-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    -ms-transition: all 600ms ease-out;
    transition: all 600ms ease-out;

    -webkit-transition-delay: 4200ms;
    -moz-transition-delay: 4200ms;
    -o-transition-delay: 4200ms;
    -ms-transition: 4200ms;
}
.wg-about-content .square .end{
    bottom: 18px; 
    left: 0;
    width: 18px;
    height: 0;

    -webkit-transition: all 600ms ease-out;
    -moz-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    -ms-transition: all 600ms ease-out;
    transition: all 600ms ease-out;

    -webkit-transition-delay: 4800ms;
    -moz-transition-delay: 4800ms;
    -o-transition-delay: 4800ms;
    -ms-transition: 4800ms;
}

.wg-about-content .square.move .left{
    height: 50px;
}
.wg-about-content .square.move .top{
    width: calc(100% - 18px);
}
.wg-about-content .square.move .right{
    height: calc(100% - 18px);
}
.wg-about-content .square.move .bottom{
    width: calc(100% - 18px);
}
.wg-about-content .square.move .end{
    height: 32px;
}
.wg-about-content .square{
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

    -webkit-transition: all 1200ms ease-out;
    -moz-transition: all 1200ms ease-out;
    -o-transition: all 1200ms ease-out;
    -ms-transition: all 1200ms ease-out;
    transition: all 1200ms ease-out;

    -webkit-transition-delay: 5000ms;
    -moz-transition-delay: 5000ms;
    -o-transition-delay: 5000ms;
    -ms-transition: 5000ms;
}
.wg-about-content .square.move{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
/*@-webkit-keyframes boxOpen {
  30% {
    z-index: 999;
  }
  100% {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    z-index: 999;
  }
}
@-moz-keyframes boxOpen {
  30% {
    z-index: 999;
  }
  100% {
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    z-index: 999;
  }
}
@keyframes boxOpen {
  30% {
    z-index: 999;
  }
  100% {
    transform: rotateY(-180deg);
    z-index: 999;
  }
}
@-webkit-keyframes boxClose {
  30% {
    z-index: 999;
  }
  100% {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    z-index: 999;
  }
}
@-moz-keyframes boxClose {
  30% {
    z-index: 999;
  }
  100% {
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    z-index: 999;
  }
}
@keyframes boxClose {
  30% {
    z-index: 999;
  }
  100% {
    transform: rotateY(-180deg);
    z-index: 999;
  }
}
.wg-about-content .square.move {
  animation: boxOpen 1.5s forwards;
  -webkit-animation: boxOpen 1.5s forwards;
  -moz-animation: boxOpen 1.5s forwards;
  -webkit-animation-delay: 2.2s;
  animation-delay: 2s;
}*/




.wg-product{position: relative; height: 100vh; overflow: hidden;}
.wg-product .whead{position: absolute; z-index: 50; top: 60px; width: 100%;}
.wg-product .whead .title{color: #fff;}
.wg-product .whead .desc{color: #fff;}
.wg-product-list .link{display: block; overflow: hidden;}
.wg-product-list .cover{position: relative; height: 100vh; background-position: center; background-size: cover;}
.wg-product-list .cover:after{content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15,59,145,0.3);
}
.wg-product-list .inner{opacity: 0.5; position: absolute; width: 100%; left: 0; bottom: 40px; text-align: center;}
.wg-product-list .icon{width: 160px; height: 160px; margin: 0 auto; background: url('../image/icon/balloon.png') center no-repeat;}
.wg-product-list .title{margin: 0; font-size: 3.8em; color: #fff;}

.wg-product-list .link .cover,
.wg-product-list .link .cover:after,
.wg-product-list .link .inner,
.wg-product-list .link .icon img{
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    transition: all 400ms ease-out;

    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition: 100ms;
}

.wg-product-list .link:hover .cover{transform: scale(1.06);}
.wg-product-list .link:hover .cover:after{opacity: 0; /*height: 0;*/}
.wg-product-list .link:hover .inner{opacity: 1;}
.wg-product-list .link:hover .icon img{transform: rotate(135deg);}




.wg-news{overflow: hidden; position: relative; height: 100vh; overflow: hidden; background: url('../image/background/wg-news.jpg') center no-repeat; background-size: cover;}
.wg-news .whead .title{color: #fff;}
.wg-news .whead .desc{color: #fff;}
.wg-news-list{margin: 0 130px;}
.wg-news-list .link{display: block; background-color: #fff; color: #1c1c1c;}
.wg-news-list .thumb{width: 635px;}
.wg-news-list .inner{padding: 20px 50px;}
.wg-news-list .title{margin: 0; font-weight: normal; font-size: 3.8em; text-align: center;}
.wg-news-list .action{margin-top: 20px; text-align: center;}
.wg-news-list .square{position: absolute;
    width: 440px;
    right: 50%;
    top: 30px;
    bottom: 30px;
}
.wg-news-list .square > div{
    position: absolute;
    background-color: rgba(15,59,145,0.85);

    -webkit-transition: all 600ms ease-out;
    -moz-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    -ms-transition: all 600ms ease-out;
    transition: all 600ms ease-out;
}
.wg-news-list .square .right{
    bottom: calc(100% - 50px); 
    right: 0;
    width: 18px;
    height: 0;

    -webkit-transition-delay: 2400ms;
    -moz-transition-delay: 2400ms;
    -o-transition-delay: 2400ms;
    -ms-transition: 2400ms;
}
.wg-news-list .square .top{
    top: 0; 
    right: 18px;
    width: 0;
    height: 18px;

    -webkit-transition-delay: 3000ms;
    -moz-transition-delay: 3000ms;
    -o-transition-delay: 3000ms;
    -ms-transition: 3000ms;
}
.wg-news-list .square .left{
    top: 18px; 
    left: 0;
    width: 18px;
    height: 0;

    -webkit-transition-delay: 3600ms;
    -moz-transition-delay: 3600ms;
    -o-transition-delay: 3600ms;
    -ms-transition: 3600ms;
}
.wg-news-list .square .bottom{
    bottom: 0; 
    left: 18px;
    width: 0;
    height: 18px;

    -webkit-transition-delay: 4200ms;
    -moz-transition-delay: 4200ms;
    -o-transition-delay: 4200ms;
    -ms-transition: 4200ms;
}
.wg-news-list .square .end{
    bottom: 18px; 
    right: 0;
    width: 18px;
    height: 0;

    -webkit-transition-delay: 4800ms;
    -moz-transition-delay: 4800ms;
    -o-transition-delay: 4800ms;
    -ms-transition: 4800ms;
}

.wg-news-list .square.move .right{
    height: 50px;
}
.wg-news-list .square.move .top{
    width: calc(100% - 18px);
}
.wg-news-list .square.move .left{
    height: calc(100% - 18px);
}
.wg-news-list .square.move .bottom{
    width: calc(100% - 18px);
}
.wg-news-list .square.move .end{
    height: 32px;
}

.wg-news-list .owl-nav{position: absolute;
    width: 100%;
    top: 50%;
}
.wg-news-list .owl-nav > div{transform: translate(0, -50px;);
    position: absolute;
    font-size: 0;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
}
.wg-news-list .owl-prev{left: -70px; transform: rotate(45deg);}
.wg-news-list .owl-next{right: -70px; transform: rotate(-135deg);}
.wg-news-action{text-align: center; margin-top: 60px;}




.wg-cer{overflow: hidden; padding: 60px 0; background-color: #fff;}
.wg-cer-list .thumb{width: 245px;}
.wg-cer-list .thumb-md{width: 360px;}
.wg-cer-list .thumb img{border: 1px solid #d0d0d0;}
.wg-cer-list .inner{padding-left: 30px;}
.wg-cer-list .title{margin: 0; font-weight: bold; font-size: 3.8em; line-height: 1em;}
.wg-cer-list .desc{margin: 0; font-weight: 100; font-size: 3.4em; line-height: 1em;}




.wg-contact{overflow: hidden; padding: 60px 0; background-color: #eaeaea;}
.wg-contact .map{position: relative; height: 360px; border: 15px solid #fff;}
.wg-contact .map iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.wg-contact .wrapper{position: relative; height: 360px; padding: 60px 20px 60px 60px;}
.wg-contact .title{margin: 0 0 20px 0; font-weight: bold; font-size: 3.8em; line-height: 1em;}
.wg-contact .desc{margin: 0; font-weight: 100; font-size: 2.6em; line-height: 1em;}
.wg-contact .desc + .desc{margin-top: 25px;}
.wg-contact .desc strong{font-weight: 500;}
.wg-contact .square{pointer-events: none; position: absolute; z-index: 10; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
}
.wg-contact .square > div{
    position: absolute;
    background-color: rgba(15,59,145,0.85);
}
.wg-contact .square .left{
    top: 0; 
    left: 0;
    width: 18px;
    height: 50px;
}
.wg-contact .square .top{
    top: 0; 
    left: 18px;
    width: calc(100% - 18px);
    height: 18px;
}
.wg-contact .square .right{
    top: 18px; 
    right: 0;
    width: 18px;
    height: calc(100% - 18px);
}
.wg-contact .square .bottom{
    bottom: 0; 
    right: 18px;
    width: calc(100% - 18px);
    height: 18px;
}
.wg-contact .square .end{
    bottom: 18px; 
    left: 0;
    width: 18px;
    height: 32px;
}




.about-nav{}
.about-nav .nav-list + .nav-list{margin-top: 25px;}
.about-nav .nav-list > li + li{margin-top: 8px;}
.about-nav .title{margin: 0; font-weight: 500; font-size: 28px; text-transform: uppercase; color: #333; line-height: 1em;}
.about-nav .link{display: inline-block; position: relative; margin: 0; font-weight: 100; font-size: 28px; color: #666; line-height: 1em;}
.about-nav .title:hover{color: #ee2224; text-decoration: none;}
.about-nav .title:focus{color: #666; text-decoration: none;}
.about-nav .link:hover{color: #ee2224;}
.about-nav .link:focus{color: #666; text-decoration: none;}
.about-nav .active .title{color: #ee2224;}
.about-nav .active .link{padding-left: 15px; color: #ee2224;}
.about-nav .active .link:before{content: ''; position: absolute; top: 4px; left: 0; width: 3px; height: 20px; background-color: #ee2224;}

.about-nav .title.active{color: #ee2224;}
.about-nav .link.active{padding-left: 15px; color: #ee2224;}
.about-nav .link.active:before{content: ''; position: absolute; top: 4px; left: 0; width: 3px; height: 20px; background-color: #ee2224;}

.about-main{padding-right: 40px;}
.about-content{padding-bottom: 40px;}
.about-content + .about-content{padding-top: 40px; border-top: 1px dashed #ccc;}
.about-content .content + .content{margin-top: 30px;}
.about-content .topic{margin: 0 0 30px 0; font-weight: 500; color: #113889; font-size: 44px; line-height: 1em; text-transform: uppercase;}
.about-content .title{margin: 0 0 10px 0; font-weight: 500; font-size: 30px; color: #333; text-transform: uppercase; line-height: 1em;}
.about-content .desc{margin: 0; font-weight: 100; font-size: 26px; color: #333; line-height: 1em;}




.news-list .wrapper{margin-bottom: 40px; border: 1px solid #c7c7c7; background-color: #fff;}
.news-list .thumb{margin: 0; width: 370px; overflow: hidden;}
.news-list .thumb .link{display: block;}
.news-list .thumb img{
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition: 100ms;
}
.news-list .inner{padding: 20px 30px;}
.news-list .title{margin: 0 0 10px 0; font-weight: 500; color: #333; font-size: 3em; line-height: 1em;}
.news-list .desc{margin: 0; font-weight: 100; color: #666; font-size: 2.4em; line-height: 1em;}
.news-list .action{position: absolute; bottom: 30px; left: 30px;}
.news-list .thumb .link:hover img{transform: scale(1.1); transform-origin: center;}




.detail-header .title{margin: 0; text-align: center; font-size: 3.6em; font-weight: 500; color: #333; line-height: 1em;}
.detail-image{text-align: center; margin-top: 35px;}
.detail-content{margin-top: 50px;}
.detail-gallery{margin-top: 30px;}
.detail-gallery .owl-nav > div{width: 30px; height: 30px; font-size: 0; position: absolute; top: 50%; transform: translate(0, -50%);}
.detail-gallery .owl-prev{right: 100%; margin-right: 30px; background: url('../image/icon/owl-prev-dark.png');}
.detail-gallery .owl-next{left: 100%; margin-left: 30px; background: url('../image/icon/owl-next-dark.png');}
.detail-gallery .owl-dots{position: relative; width: 100%; text-align: center; margin-top: 15px;}
.detail-gallery .owl-dot{display: inline-block; margin: 0 4px; float: none; width: 12px; height: 12px; background-color: #ddd;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.detail-gallery .owl-dot.active{background-color: #d92222;}
.detail-gallery .link:before{content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(17,56,137,0);}
.detail-gallery .link:after{opacity: 0; content: ''; position: absolute; width: 200px; height: 200px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border:2px solid #fff;
    background: url('../image/icon/zoom-in.png');
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.detail-gallery .link:before,
.detail-gallery .link:after{
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition: 100ms;
}
.detail-gallery .link:hover:before{background-color: rgba(17,56,137,0.85);}
.detail-gallery .link:hover:after{opacity: 1; width: 90px; height: 90px;}




.career-nav{padding-right: 50px;}
/*.career-nav .title{margin: 0 0 30px 0; font-size: 46px; font-weight: 500; color: #133b9b; line-height: 1em;}*/
.career-nav li{width: 100%; padding: 20px 0; border-bottom: 1px solid #c7c7c7;}
.career-nav .link{position: relative; display: block; padding-left: 30px; font-size: 2.6em; font-weight: 500; color: #133b9b; line-height: 1em; background: url('../image/icon/arrow-nav.png') left 2px no-repeat;}
.career-nav .link small{white-space: nowrap; text-align: right; font-weight: 100; color: #333; font-size: 0.9em;}
.career-nav .link:hover{color: #133b9b;}
.career-nav .active .link{color: #ee2224; background: url('../image/icon/arrow-nav-active.png') left 2px no-repeat;}

.career-content{min-height: 600px; border-left: 1px solid #c7c7c7; padding-left: 50px; margin-top: 10px; padding-top: 5px;}
.career-content .block + .block{margin-top: 30px;}
.career-content .block-header{margin-bottom: 15px;}
.career-content .block-header .title{margin: 0; font-size: 3.6em; font-weight: 500; color: #ee2224; line-height: 1em;}
.career-content .block-body{font-size: 2.4em;}
.career-content .block-body p{margin-bottom: 5px; font-weight: 100; color: #333; line-height: 1.2em;}
.career-content .block-button{text-align: right; margin-top: 40px;}




.contact-map{height: 580px; position: relative; border: 1px solid #c7c7c7; background-color: #fff;}
.contact-map iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.contact-map .action{position: absolute; bottom: 23px; right: 60px;}
.contact-map .action .link{float: left; width: 56px; height: 56px; border: 1px solid #c7c7c7; background-color: #fff; padding: 3px;}
.contact-map .action .link + .link{margin-left: -1px;}
.contact-map .action .link img{float: left;}
.contact-map .action:hover .link{opacity: 0.4;}
.contact-map .action .link:hover{opacity: 1;}

.contact-info{margin-top: 50px;}
.contact-info .wrapper{}
.contact-info .icon{width: 80px; height: 80px; border: 1px solid #c7c7c7; background-color: #fff;}
.contact-info .inner{padding-left: 20px; font-size: 2.4em; font-weight: 100; line-height: 1em;}
.contact-info .inner strong{font-weight: 500;}

.contact-list{margin-top: 30px;}
.contact-list .item-list > li{padding: 50px 0;}
.contact-list .item-list > li + li{border-top: 1px solid #c7c7c7;}
.contact-list .thumb{margin: 0; width: 360px; border: 1px solid #c7c7c7;}
.contact-list .inner{padding: 0 40px; font-size: 2.4em; font-weight: 100; line-height: 1em;}
.contact-list .inner strong{font-weight: 500;}
.contact-list .map{width: 360px; height: 220px; position: relative; background-color: #fff; border: 1px solid #c7c7c7;}
.contact-list .map iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.contact-form{margin-top: 30px;}




.service-header{height: 740px; background: url('../image/background/service.jpg') center no-repeat; overflow: hidden;}
.service-header .container{height: 740px; position: relative;}

.service-block{padding-top: 60px;}

.service-list{position: absolute; bottom: 0; margin-top: 60px;}
.service-list .wrapper{display: block; text-align: center; position: relative;}
.service-list .wrapper:hover,
.service-list .wrapper:focus{text-decoration: none;}
.service-list .circle{display: inline-block; 
    padding: 10px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1)

    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition: 100ms;

    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.service-list .circle-inner{
    padding: 5px;
    background-color: #fff;
    border-left: 10px solid #111;
    border-top: 10px solid #111;
    border-right: 10px solid #113889;
    border-bottom: 10px solid #113889;
    border-radius: 50%;
    transform: rotate(45deg);
}
.service-list .icon{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 40px rgba(0,0,0,0.2) inset;
    transform: rotate(-45deg);
}
.service-list .title{margin: 15px 0 0 0; padding: 0; font-size: 3.4em; font-weight: normal; line-height: 0.9em; color: #333;}
.service-list .title small{display: block; font-size: 0.7em; color: #333;}
.service-list .bar{position: absolute; left: 0; right: 0; bottom: 0; margin: auto;
    width: 30px;
    background-color: #ed1c24;
}
.service-list .bar:before{content: ''; position: absolute; top: 0; left: 0;
    width: 100%;
    height: 30px;
    background-color: #113889;

    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition: 100ms;

    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

.service-list > .row > div:nth-child(odd) .wrapper{height: 660px;}
.service-list > .row > div:nth-child(odd) .bar{height: 300px;}
.service-list > .row > div:nth-child(even) .wrapper{height: 460px; margin-top: 200px;}
.service-list > .row > div:nth-child(even) .bar{height: 110px;}

.service-list .wrapper:hover .circle{transform: rotate(360deg);}
.service-list .wrapper:hover .bar:before{height: 100%;}



.social-list .thumb{margin-bottom: 20px; overflow: hidden;}
.social-list .thumb img{
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition: 100ms;

    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.social-list .inner{text-align: center;}
.social-list .title{margin: 0 0 10px 0; font-weight: 500; color: #333; font-size: 3em; line-height: 1em;}
.social-list .desc{margin: 0; font-weight: 100; color: #333; font-size: 2.6em; line-height: 1em;}
.social-list .link:hover .thumb img{transform: scale(1.1); transform-origin: center;}

.social-list .owl-nav > div{width: 30px; height: 30px; font-size: 0; position: absolute; top: 105px; /*transform: translate(0, -50%);*/}
.social-list .owl-prev{right: 100%; margin-right: 30px; background: url('../image/icon/owl-prev-dark.png');}
.social-list .owl-next{left: 100%; margin-left: 30px; background: url('../image/icon/owl-next-dark.png');}
.social-list .owl-dots{position: relative; width: 100%; text-align: center; margin-top: 15px;}
.social-list .owl-dot{display: inline-block; margin: 0 4px; float: none; width: 12px; height: 12px; background-color: #ddd;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.social-list .owl-dot.active{background-color: #d92222;}




/*.service-nav{}
.service-nav .nav-list + .nav-list{margin-top: 25px;}
.service-nav .nav-list > li + li{margin-top: 8px;}
.service-nav .title{margin: 0; font-weight: 500; font-size: 28px; text-transform: uppercase; color: #333; line-height: 1em;}
.service-nav .link{display: inline-block; position: relative; margin: 0; font-weight: 100; font-size: 28px; color: #666; line-height: 1em;}
.service-nav .title:hover{color: #ee2224; text-decoration: none;}
.service-nav .link:hover{color: #ee2224;}
.service-nav .active .title{color: #ee2224;}
.service-nav .active .link{padding-left: 15px; color: #ee2224;}
.service-nav .active .link:before{content: ''; position: absolute; top: 4px; left: 0; width: 3px; height: 20px; background-color: #ee2224;}
*/
.service-nav{}
.service-nav .nav-list + .nav-list{margin-top: 25px;}
.service-nav .nav-list > li + li{margin-top: 8px;}
.service-nav .title{margin: 0; font-weight: 500; font-size: 28px; text-transform: uppercase; color: #333; line-height: 1em;}
.service-nav .link{display: inline-block; position: relative; margin: 0; font-weight: 100; font-size: 28px; color: #666; line-height: 1em;}
.service-nav .title:hover{color: #ee2224; text-decoration: none;}
.service-nav .title:focus{color: #666; text-decoration: none;}
.service-nav .link:hover{color: #ee2224;}
.service-nav .link:focus{color: #666; text-decoration: none;}
.service-nav .active .title{color: #ee2224;}
.service-nav .active .link{padding-left: 15px; color: #ee2224;}
.service-nav .active .link:before{content: ''; position: absolute; top: 4px; left: 0; width: 3px; height: 20px; background-color: #ee2224;}

.service-nav .title.active{color: #ee2224;}
.service-nav .link.active{padding-left: 15px; color: #ee2224;}
.service-nav .link.active:before{content: ''; position: absolute; top: 4px; left: 0; width: 3px; height: 20px; background-color: #ee2224;}

.service-content{padding-right: 50px; margin-top: 2px;}
.service-content .inner{padding-left: 90px;}
.service-content .inner .block + .block{margin-top: 40px;}
.service-content .title{margin-bottom: 20px; font-weight: 500; font-size: 1.3em; margin-bottom: 20px;}
.service-content ul{padding-left: 22px;}




.productDe-image{text-align: center; width: 800px; margin: 0 auto;}
.productDe-image .img{}

.productDe-desc{margin-top: 60px;}
.productDe-desc-title{font-size: 3.6em; line-height: 1em; margin-bottom: 20px;}

.productDe-content{margin-top: 60px;
    background: rgb(239,239,239);
    background: -moz-linear-gradient(left, rgba(239,239,239,1) 0%, rgba(239,239,239,1) 50%, rgba(23,67,148,1) 50%, rgba(23,67,148,1) 100%);
    background: -webkit-linear-gradient(left, rgba(239,239,239,1) 0%,rgba(239,239,239,1) 50%,rgba(23,67,148,1) 50%,rgba(23,67,148,1) 100%);
    background: linear-gradient(to right, rgba(239,239,239,1) 0%,rgba(239,239,239,1) 50%,rgba(23,67,148,1) 50%,rgba(23,67,148,1) 100%);
}
.productDe-content-title{font-size: 3.6em; line-height: 1em; margin-bottom: 20px;}
.productDe-content .block{padding: 60px 0;}
.productDe-content .block-left{padding-right: 120px;}
.productDe-content .block-right{padding-left: 120px;}

.productDe-gallery{margin-top: 60px;}
.productDe-gallery-list{width: 800px; margin: 0 auto;}
.productDe-gallery-list .owl-dots{position: relative; width: 100%; text-align: center; margin-top: 20px;}
.productDe-gallery-list .owl-dot{display: inline-block; margin: 0 4px; float: none; width: 12px; height: 12px; background-color: #ddd;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.productDe-gallery-list .owl-dot.active{background-color: #174394;}
.productDe-gallery-list .link:before{content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(254,206,0,0);}
.productDe-gallery-list .link:after{opacity: 0; content: ''; position: absolute; width: 200px; height: 200px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border:2px solid #fff;
    background: url('../image/icon/zoom-in.png');
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.productDe-gallery-list .link:before,
.productDe-gallery-list .link:after{
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition: 100ms;
}
.productDe-gallery-list .link:hover:before{background-color: rgba(237,28,36,0.85);}
.productDe-gallery-list .link:hover:after{opacity: 1; width: 90px; height: 90px;}

.productDe-relate{border-top: 1px dashed #c7c7c7; margin-top: 60px; padding-top: 60px;}
.productDe-relate-list .thumb{position: relative; margin: 0 1px 20px 1px; border: 1px solid #c7c7c7;}
.productDe-relate-list .inner{text-align: center;}
.productDe-relate-list .title{margin: 0 0 2px 0; font-weight: 500; color: #333; font-size: 3em; line-height: 0.8em;}

.productDe-relate-list .thumb:before{content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; 
    background-color: rgba(17,56,137,0);
}
.productDe-relate-list .thumb:after{opacity: 0; content: ''; position: absolute; width: 100%; height: 100%; top: 50%; left: 0; margin: auto;
    background: url('../image/icon/btn-thumb.png');
    background-position: center;
    background-repeat: no-repeat;
}
.productDe-relate-list .thumb:before,
.productDe-relate-list .thumb:after{
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -ms-transition: 100ms;
}
.productDe-relate-list .link:hover .thumb:before{background-color: rgba(17,56,137,0.65);}
.productDe-relate-list .link:hover .thumb:after{opacity: 1; top: 0;}

.productDe-relate-list .desc{margin: 0; font-weight: 100; color: #ed1c24; font-size: 2.6em; line-height: 1em;}
.productDe-relate-list .owl-nav > div{width: 30px; height: 30px; font-size: 0; position: absolute; top: 105px; /*transform: translate(0, -50%);*/}
.productDe-relate-list .owl-prev{right: 100%; margin-right: 30px; background: url('../image/icon/owl-prev-dark.png');}
.productDe-relate-list .owl-next{left: 100%; margin-left: 30px; background: url('../image/icon/owl-next-dark.png');}
.productDe-relate-list .owl-dots{position: relative; width: 100%; text-align: center; margin-top: 15px;}
.productDe-relate-list .owl-dot{display: inline-block; margin: 0 4px; float: none; width: 12px; height: 12px; background-color: #ddd;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.productDe-relate-list .owl-dot.active{background-color: #d92222;}




.product-nav{position: fixed; z-index: 110; height: 100px; left: 0; right: 0; top: 100px; text-align: center;}
.product-nav .nav-list{display: inline-block;}
.product-nav .nav-list li{position: relative; padding: 0 25px;}
.product-nav .nav-list li + li:before{content: ''; position: absolute; left: 0; top: 15px; bottom: 15px;
    width: 1px;
    background-color: rgba(255,255,255,0.2);
}
.product-nav .link{opacity: 0.4; display: block; margin: 0; line-height: 100px; padding: 10px 0;}
.product-nav .icon{margin-bottom: 3px;}
.product-nav .title{margin: 0; color: #fff;}
/*.product-nav .active .link{opacity: 1;}*/
.product-nav .link.active{opacity: 1;}

.product-nav.gas .title{font-size: 2.2em; font-weight: normal; line-height: 80px;}

.product-list .item-list > li{position: relative; min-height: 820px; padding: 30px 0;}
.product-list .item-list > li:before{content: ''; position: absolute; 
    bottom: 0; 
    left: 50%;
    transform: translate(-50%, 0);
    border-left: 100vw solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 510px solid transparent;
}

.product-list .wrapper{position: relative;}
.product-list .inner{margin-top: 70px;}
.product-list .inner .topic{font-size: 3.6em; line-height: 1em; margin-bottom: 10px;}
.product-list .whead{text-align: left; margin-bottom: 30px;}
.product-list .whead .title{font-size: 12em; line-height: 0.7em; left: -5px; position: relative;}
.product-list .whead .subtitle{font-size: 5.4em; line-height: 0.7em;}
.product-list .info{
    position: absolute; 
    z-index: 10;
    top: 70px;
    left: 50%;
    margin-left: 340px;
}
.product-list .info .title{margin: 0; font-weight: 100; font-size: 3.4em; color: #3498cf; line-height: 0.8em;}
.product-list .info .desc{margin: 0; font-weight: 100; font-size: 5.4em; line-height: 0.8em;}
.product-list .info .action{margin-top: 40px;}

.product-list .item-list > li:nth-child(odd){background-color: #174394;}
.product-list .item-list > li:nth-child(odd):before{border-bottom-color: #fff;}
.product-list .item-list > li:nth-child(odd) .inner .topic{color: #fff;}
.product-list .item-list > li:nth-child(odd) .whead .title{color: #fff;}
.product-list .item-list > li:nth-child(odd) .editor-content{color: #fff; opacity: 0.7;}
.product-list .item-list > li:nth-child(odd) .editor-content ul{list-style-image: url('../image/icon/list-w.png');}
.product-list .item-list > li:nth-child(odd) .info .desc{color: #fff;}
.product-list .item-list > li:nth-child(even){background-color: #fff;}
.product-list .item-list > li:nth-child(even):before{border-bottom-color: #174394;}
.product-list .item-list > li:nth-child(even) .wrapper{left: 130px;}