.container,
.normal-height {
    min-height: 100vh
}

.title-page h1,
.title-rotate>h2 {
    white-space: nowrap;
    padding: 0 0 0 30px
}

.login-box,
.social li,
.social-top li {
    vertical-align: middle
}

.copyright,
.login-box h2,
.title-page h1,
.title-rotate>h2 {
    text-transform: uppercase
}

.box-news,
.box-slider,
section {
    float: left
}

.box-library-pdf,
.box-news,
.box-service-home:not(.blank),
.career-title,
.faq-title,
.file-up,
.full-map,
.infobox .close-box-map,
.item-award,
.link-page,
.thumb,
button,
input[type=file] {
    cursor: pointer
}

.all-album,
.all-pics .text-length,
.box-slider,
.details-content>span,
.dragscroll,
.img-moving,
.overlay-dark,
.overlay-menu {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none
}

.outer-nav:not(.second).hide,
.upload_target {
    visibility: hidden
}

.loadx {
    background: url(../images/cycle.png) center center no-repeat;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 82px;
    height: 82px;
    margin: -41px 0 0 -41px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: Rotate 1s linear infinite;
    animation: Rotate 1s linear infinite;
    display: none;
    z-index: 110000
}

.container,
.content-table,
section {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0
}

.container,
.content-wrap,
.footer,
section {
    display: block
}

.container {
    overflow: hidden
}

.content-page {
    background-color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center
}

.content-table {
    display: block
}

.content-wrap {
    width: 90%;
    max-width: 1200px;
    margin: auto
}

.container.mapshow {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    z-index: 999
}

.bg-menu {
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    position: absolute;
    background-color: #fff;
    z-index: 5
}

.logo-menu {
    width: 250px;
    height: 100px;
    position: absolute;
    left: 120px;
    top: 20px;
    -webkit-transition: all .6s ease-in-out .5s;
    transition: all .6s ease-in-out .5s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    z-index: 10
}

.logo-menu::after {
    content: '';
    background: url(../images/logo.svg) left center/contain no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.mask,
.overlay-menu {
    position: fixed;
    width: 100%;
    overflow: hidden;
    top: 0
}

.navigation.show .logo-menu {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.navigation.show {
    height: 100%
}

.navigation.show .nav li {
    -webkit-animation-name: goRight;
    animation-name: goRight;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.navigation:not(.show) .nav li {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.title-page h1>span>span.move,
.title-page.show h1::before {
    -webkit-animation-name: fadeIn;
    -webkit-animation-fill-mode: forwards
}

.overlay-menu {
    height: 0;
    right: 0;
    -ms-touch-action: none;
    -webkit-touch-callout: none;
    -moz-user-select: -moz-none;
    z-index: 50
}

.mask,
.overlay-menu.show {
    height: 100%
}

.mask {
    left: 0;
    z-index: 999
}

.mask::after,
.mask::before {
    content: '';
    position: fixed;
    height: 50vh;
    background-color: #fff;
    z-index: 1000;
    width: 100%;
    left: 0;
    overflow: hidden
}

.mask::before {
    top: 0;
    -webkit-transition: all .6s ease;
    transition: all .6s ease
}

.mask::after {
    bottom: 0;
    -webkit-transition: all .6s ease;
    transition: all .6s ease
}

.mask.show::after,
.mask.show::before {
    height: 0
}

.mask.finish {
    z-index: -99999
}

.blur {
    -webkit-filter: blur(20px);
    filter: blur(20px)
}

.footer {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    z-index: 15
}

.social-top {
    position: absolute;
    height: 100vh;
    width: 60px;
    left: -100px;
    top: 0;
    text-align: center;
    border-right: 1px solid #aaa;
    z-index: 100
}

.social-top.fixed {
    position: fixed;
    height: 100vh!important
}

.social-top ul {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.social,
.social li,
.social-top li {
    position: relative
}

.social-top li {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 0 2px
}

.social,
.social-top li a {
    width: 100%;
    display: block
}

.social-top li a {
    height: 100%;
    color:  #999;
}

.social-top.white li a,
.white .social-top li a {
    color: #fff
}

.social-top.white,
.white .social-top {
    border-color: #eee
}

.social {
    height: auto;
    margin: 0 0 20px;
    text-align: center
}

.social li {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 0 2px
}

.social li a {
    width: 100%;
    height: 100%;
    display: block;
    color: rgba(255, 255, 255, 1)
}

.bottom-text,
.copyright {
    width: auto;
    display: block;
    position: relative
}

.copyright,
.copyright a {
    color: #6a6a6a
}

.call {
    background: url(../images/call.svg) center center/contain no-repeat
}

.fax {
    background: url(../images/fax.svg) center center/contain no-repeat
}

.email {
    background: url(../images/email.svg) center center/contain no-repeat
}

.address {
    background: url(../images/location.svg) center center/contain no-repeat
}

.bottom-text {
    height: auto;
    margin: 0 0 0 300px;
    padding: 20px 0
}

.bottom-text.internal {
    margin: 0 0 0 90px
}

.copyright {
    font-weight: 300;
    font-size: 10px;
    line-height: 1.4;
    text-align: left
}

.copyright strong,
.title-page h1 {
    font-weight: 700
}

.logo-center {
    width: calc(100vw/3);
    height: calc(100vh/3);
    position: relative;
    display: block;
    margin: 0 auto 50px
}

.logo-bottom {
    width: 250px;
    height: 100px;
    position: relative;
    margin: 30px auto;
    display: none
}

.title-page {
    width: 400px;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    text-align: left;
    pointer-events: none;
    z-index: 2
}

.title-page h1 {
    position: absolute;
    width: 100%;
    height: auto;
    right: 0;
    bottom: 150px;
    font-size: calc(100vh/6);
    line-height: 1;
    display: block;
    color: rgba(0, 0, 0, .1);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.title-page h1>span>span {
    opacity: 0
}

.title-page h1>span>span.move {
    animation-name: fadeIn;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-fill-mode: forwards
}

.title-page h1::before {
    content: "";
    width: 40px;
    height: 70%;
    position: absolute;
    left: -30px;
    top: 15%;
    background-color: rgba(229, 27, 36, 1);
    opacity: 0
}

.login,
.login-block,
.login-box {
    position: relative;
    height: auto
}

.title-page.show h1::before {
    animation-name: fadeIn;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-fill-mode: forwards
}

.login-box {
    display: inline-block;
    width: 90%;
    max-width: 600px;
    margin: 0;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    padding: 40px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    z-index: 10
}

.login-box h2 {
    font-weight: 500;
    font-size: 30px;
    margin: 0 0 20px;
    display: block;
    color: rgba(229, 27, 36, 1)
}

.login-block {
    display: block;
    width: 100%
}

.login {
    display: inline-block;
    width: auto
}

.print,
body.auto .logo-bottom {
    display: block
}

.pass-mask {
    position: absolute;
    left: 20px;
    top: 1px;
    width: calc(100% - 30px);
    height: calc(100% - 2px);
    font-weight: 300;
    font-size: 16px;
    line-height: 60px;
    color: #666;
    background-color: #fff;
    text-align: left;
    z-index: 1
}

.pass-mask.hide {
    width: 0;
    overflow: hidden
}

#internal-page .title-page h1 {
    bottom: 50px;
    right: auto;
    left: 90px;
    color: #fff;
    -webkit-transform: none;
    transform: none
}

body.auto .bottom-text {
    width: 100%;
    margin: 0;
    background-color: #fff
}

body.auto .copyright {
    text-align: center
}

body.auto .social-top {
    height: calc(100vh - 125px)
}

body.auto .social-top.project-detail {
    height: calc(100vh - 75px)
}

body.auto .footer {
    position: relative;
    left: auto;
    bottom: auto;
    background: url(../images/pattern3.png);
    float: left
}

body.auto .title-page {
    width: 100%;
    height: auto;
    left: 60px;
    top: calc(100vh - 300px)
}

body.auto .title-page h1 {
    position: relative;
    bottom: auto;
    right: auto;
    -webkit-transform: none;
    transform: none;
    font-size: calc(100vw/20);
    color: rgba(255, 255, 255, 1);
    padding: 0 0 0 30px
}

body.auto .title-page h1::before {
    width: 20px;
    left: 0
}

body.auto .wheel {
    bottom: 100px
}

body.auto .wheel.project-detail {
    bottom: 50px
}

.title-rotate {
    width: 400px;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    text-align: left
}

.title-rotate>h2 {
    position: absolute;
    width: 100%;
    height: auto;
    right: 0;
    bottom: 150px;
    font-weight: 700;
    font-size: calc(100vh/6);
    line-height: 1;
    display: block;
    color: rgba(0, 0, 0, .1);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.box-nav li a,
.box-nav span {
    font-weight: 100;
    font-size: 36px
}

.title-rotate>h2::before {
    content: "";
    width: 40px;
    height: 70%;
    position: absolute;
    left: -30px;
    top: 15%;
    background-color: rgba(229, 27, 36, 1)
}

.print,
.print-box {
    position: relative;
    height: auto
}

.print {
    width: 100%;
    padding: 20px 5%;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    border-top: 1px solid #aaa
}

.print-box {
    display: inline-block;
    width: auto;
    margin: 0
}

.print-but,
.save-but,
.share-but {
    padding: 0 20px 0 10px;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    text-transform: uppercase;
    color: #4c4c4c;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 1);
    z-index: 1
}

.print-but::before,
.save-but::before,
.share-but::before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    content: ''
}

.map-box,
.share-item li {
    -webkit-border-radius: 50%
}

.save-but::before {
    height: 40px;
    background: url(../images/favorite.svg) 50%/80% no-repeat
}

.print-but::before {
    height: 40px;
    background: url(../images/print.svg) 50%/80% no-repeat
}

.share-but::before {
    height: 40px;
    background: url(../images/share.svg) 50%/80% no-repeat
}

.share-item {
    position: absolute;
    right: -100%;
    bottom: 5px;
    width: 100%;
    height: 40px
}

.share-item ul {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    text-align: left;
    padding: 0 0 0 10px
}

.share-item li {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #aaa;
    -webkit-transition: all .3s cubic-bezier(.44, .39, .34, 1.03);
    transition: all .3s cubic-bezier(.44, .39, .34, 1.03);
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    left: -40px;
    opacity: 0
}

.share-item li a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0;
    text-indent: -9999px
}

.share-item li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.share-item li a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.item-intergram::before {
    background: url(../images/intergram-grey.svg) 50%/70% no-repeat
}

.item-intergram::after {
    background: url(../images/intergram-orange.svg) 50%/70% no-repeat
}

.item-facebook::before {
    background: url(../images/facebook-grey.svg) 50%/70% no-repeat
}

.item-facebook::after {
    background: url(../images/facebook-orange.svg) 50%/70% no-repeat
}

.item-linkedin::before {
    background: url(../images/linkedin-grey.svg) 50%/70% no-repeat
}

.item-linkedin::after {
    background: url(../images/linkedin-orange.svg) 50%/70% no-repeat
}

.share-but.active+.share-item li {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    left: 0;
    opacity: 1
}

.share-but.active+.share-item li:nth-child(2) {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.share-but.active+.share-item li:nth-child(3) {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.box-nav {
    font-weight: 100;
    line-height: 1;
    width: auto;
    height: auto;
    position: absolute;
    right: 0;
    top: 50%;
    padding: 10px 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    z-index: 15
}

.box-nav span,
.box-nav span::before,
.box-nav ul {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.box-nav ul {
    width: 40px;
    height: 40px;
    text-align: right;
    margin: 0
}

.box-intro,
.box-nav span,
.content-main,
.outer-nav.second,
.slogan {
    text-align: center
}

.box-nav span {
    width: auto;
    height: 40px;
    color: #aaa
}

.box-nav span::before {
    content: '/';
    color: #aaa;
    font-size: 36px;
    margin: 0 5px 0 0
}

.all-service::before,
.box-cover::after,
.box-project-home::before,
.box-service-home a span::before,
.box-service-home a::after,
.box-service-home a::before,
.colum-text::before,
.content-history::after,
.content-history>h2::after,
.content-history>h2::before,
.content-main::after,
.content-main::before,
.content-page[data-post=manager]::after,
.content-page[data-post=manager]::before,
.content-page[data-post=resource] .box-text::after,
.full-map::after,
.go-inner::after,
.item-history::after,
.sub-nav ul::after,
.value::before {
    content: ''
}

.box-nav li {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out
}

.next,
.next-prev,
.prev {
    width: 50px;
    height: 50px;
    position: absolute
}

.box-nav li a {
    display: block;
    color: #444;
    pointer-events: none
}

.go-inner,
.sub-nav li a {
    font-weight: 700;
    text-transform: uppercase
}

.box-nav li.current {
    opacity: 1
}

.next-prev {
    top: 0;
    left: 30px
}

.next,
.prev {
    color: #333;
    -webkit-transition: opacity .3s ease-in-out, color .3s ease-in-out;
    transition: opacity .3s ease-in-out, color .3s ease-in-out
}

.sub-nav,
.sub-nav ul {
    position: relative;
    display: block;
    height: auto
}

.next {
    left: 0;
    bottom: -100px;
    transform: rotate(-180deg)
}

.prev {
    left: 0;
    top: -100px
}

.next:not(.disabled):hover,
.prev:not(.disabled):hover {
    color: rgba(229, 27, 36, 1)
}

.next.disabled,
.prev.disabled {
    opacity: .2;
    pointer-events: none
}

.box-nav.white {
    -webkit-filter: brightness(800%);
    filter: brightness(800%)
}

.sub-nav {
    width: auto;
    margin: 0 auto
}

.sub-nav ul {
    width: 100%;
    white-space: nowrap;
    z-index: 2
}

.link-text h3,
.news-txt h3,
.title-pdf h3,
.title-pic h3 {
    white-space: normal
}

.sub-nav ul::after {
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: -25px;
    background: url(../images/pattern.png);
    z-index: -1
}

.bg-cover,
.box-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.sub-nav li {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 -1.5px;
    vertical-align: top;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1)
}

.sub-nav li a {
    display: block;
    padding: 15px;
    vertical-align: top;
    margin: 0 1px;
    font-size: 14px;
    color: #7e8387;
    background-color: #fff
}

.outer-nav.second .sub-nav li.current a,
.sub-nav li.current a {
    background-color: rgba(229, 27, 36, 1);
    color: #fff;
    pointer-events: none
}

.outer-nav.second .sub-nav li.active a,
.sub-nav li.active a {
    background-color: rgba(229, 27, 36, 1);
    color: #fff
}

.outer-nav:not(.second) {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: -50px 0 0;
    text-align: center;
    z-index: 5
}

.outer-nav.second {
    width: 100%;
    height: auto;
    top: -300px;
    left: 0;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    z-index: 100
}

.outer-nav.second .sub-nav li {
    box-shadow: none
}

.outer-nav.second .group,
.outer-nav.second .sub-nav ul::after {
    display: none
}

.outer-nav.second .sub-nav li a {
    font-size: 12px;
    padding: 10px 15px;
    margin: 0
}

.outer-nav.second.fixed {
    pointer-events: auto;
    opacity: 1;
    top: 0;
    background-color: rgba(255, 255, 255, .3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1)
}

.box-library-pdf img,
.colum-pic img,
.item-award img,
.pic-logo img,
.pic-thumb-bg img,
.thumb img {
    pointer-events: none
}

.box-slider {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: block;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: -moz-none;
    z-index: 1
}

.content-main,
.group-central {
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden
}

.group-central {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%)
}

.group-central.show-text {
    z-index: 1
}

.group-central:first-child {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.content-main::after,
.content-main::before {
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.box-intro {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 -5px;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 5
}

.bg-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.bg-fixed,
.slide-mask {
    -webkit-backface-visibility: hidden
}

.box-cover {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1
}

.box-cover svg,
.box-cover::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.box-cover::after {
    background: -webkit-radial-gradient(circle farthest-side at center center, rgba(132, 108, 91, 1) 0, rgba(255, 255, 255, 0) 100%);
    background: radial-gradient(circle farthest-side at center center, rgba(132, 108, 91, 1) 0, rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: hard-light
}

.box-cover svg {
    z-index: 3
}

.bg-cover.pattern,
.box-cover.pattern,
.box-cover.pattern span {
    background: url(../images/pattern.png) left top;
    background-size: auto
}

.bg-fixed,
.pic-thumb-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.bg-fixed {
    background-attachment: fixed;
    backface-visibility: hidden
}

.is-Edge .box-cover::after,
.is-IE .box-cover::after {
    mix-blend-mode: inherit;
    display: none
}

.pic-thumb-bg img,
.slide-mask {
    height: auto;
    width: 100%;
    position: relative;
    display: block
}

.pic-thumb-bg img {
    opacity: 0
}

.slide-mask {
    overflow: hidden;
    backface-visibility: hidden
}

.bg-home,
.bg-inner {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-backface-visibility: hidden;
    display: block;
    width: 100%
}

.bg-home {
    height: 100vh;
    backface-visibility: hidden
}

.bg-inner {
    height: calc(100vh - 100px);
    backface-visibility: hidden
}

.bg-scene,
.canvas-bg {
    position: absolute;
    background: url(../images/pattern.png);
    top: 0
}

.group-central
.canvas-bg {
    background: url(../images/home-bg.jpg) no-repeat !important;
	background-size: cover !important;
}
.play-pic,
.stop-pic {
    display: block;
    position: absolute;
    z-index: -9999
}

body.auto .slide-mask .slide-pagination {
    bottom: 70px
}

body.auto .slide-mask .slide-buttons {
    opacity: 1;
    bottom: 150px
}

.bg-scene {
    width: 100%;
    height: 100%;
    left: 0
}

.bg-scene svg {
    width: auto;
    height: 100vh;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.canvas-bg {
    width: 100%;
    height: 100%;
    left: 0
}

#home-page .title-page,
.control-svg,
.play-svg,
.stop-svg {
    display: none
}

#home-page .slide-mask {
    opacity: 0
}

.white .logo-blue .c-red {
    fill: #e31b23
}

.white .logo-blue .c-blue {
    fill: #06357a
}
.white .logo-blue .c-green {
    fill: #009345
}

.go-inner {
    font-size: 14px;
    line-height: 1.4;
    padding: 10px 0;
    display: block;
    position: relative;
    margin: 10px 0;
    color: #fff;
    z-index: 10
}

.go-inner::after {
    height: 1px;
    width: 0;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    margin: 0 0 0 5px
}

.go-page {
    background: url(../images/zoom.svg) 50%/80% no-repeat rgba(229, 27, 36, 1);
    width: 50px;
    height: 50px;
    position: absolute;
    display: block;
    right: 30px;
    bottom: 0;
    z-index: 10
}

.slogan,
.slogan h2 {
    position: relative;
    display: block
}

.slogan {
    width: 100%;
    height: auto;
    margin: 20px 0
}

.slogan h2 {
    color: #009345;
    line-height: 1.6;
    font-size: calc(100vw/36);
    font-weight: 300;
    text-transform: uppercase
}

.group-central[data-name=picture-home] {
    background: url(../images/pattern.png)
}

.group-central[data-name=service-home] .box-intro {
    height: 100%
}

.all-service {
    position: absolute;
    display: block;
    width: 75%;
    /*max-width: 150vh;*/
    height: auto;
    margin: auto;
    bottom: 80px;
    right: 24vh
}

.all-service::before {
    width: calc(100vh/1.8);
    height: calc(100vh/1.8);
    position: absolute;
    right: -8vh;
    bottom: 16vh;
    border: 1px solid #aaa
}

.box-service-home,
.service-home {
    position: relative;
    text-align: center
}

.service-home {
    display: block;
    width: 100%;
    height: auto;
    margin: 0
}

.box-service-home {
    display: inline-block;
    vertical-align: top;
    width: calc(100vh/3);
    height: calc(100vh/4);
    margin: 5px 3px
}

.box-service-home .hover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .3);
    mix-blend-mode: multiply;
    z-index: 1
}

.is-Edge .box-service-home .hover,
.is-IE .box-service-home .hover {
    mix-blend-mode: inherit
}

.box-service-home a {
    width: 90%;
    height: 100%;
    position: absolute;
    left: 5%;
    top: 0;
    color: #eee;
    z-index: 2
}

.box-service-home a span {
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: none;
    margin: 10px 0
}

.box-service-home h3,
.text-project h3 {
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase
}

.box-service-home a span::before {
    width: 100px;
    height: 1px;
    display: block;
    margin: 0 auto 15px;
    background-color: #ddd
}

.box-service-home a::after,
.box-service-home a::before {
    height: 100%;
    display: inline-block;
    vertical-align: middle
}

.box-service-home h3 {
    font-size: calc(100vh/45);
    margin: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    text-align: center;
    z-index: 2
}

.pic-service-home {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat
}

.all-project,
.box-project-home,
.project-home {
    position: relative;
    display: block;
    height: auto
}

.all-project {
    width: 100%;
    margin: 0
}

.project-home {
    width: 90%;
    max-width: 1000px;
    margin: auto;
    text-align: center
}

.box-project-home {
    width: 100%;
    margin: 0
}

.box-project-home::before {
    width: calc(100vh/2.5);
    height: calc(100vh/2.2);
    position: absolute;
    left: 55%;
    top: 8%;
    border: 1px solid #aaa;
    z-index: 1
}

.pic-project-home,
.text-project {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.pic-project-home {
    width: calc(100vh/.8);
    height: calc(100vh/1.8);
    max-width: 65%;
    overflow: hidden
}

.text-project {
    width: auto;
    max-width: 35%;
    height: auto;
    margin: 0 -50px;
    padding: 20px;
    background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
    background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
    text-align: left;
    z-index: 2
}

.text-project h3,
.text-project p {
    margin: 0 0 10px;
    display: block;
    position: relative;
    color: #fff
}

.text-project h3 {
    font-size: calc(100vh/30)
}

.text-project p {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    font-family: Arial, Helvetica, sans-serif
}

.box-logo h3,
.colum-text h3 {
    font-size: 18px;
    font-weight: 500
}

.project-home .slide-buttons {
    width: 100px;
    position: relative;
    margin: -20px 0;
    left: 68%;
    top: auto
}

.project-home .slide-next,
.project-home .slide-prev {
    width: 40px;
    height: 40px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    left: auto;
    right: auto;
    margin: 0 3px
}

.all-logo,
.box-news,
.colum-pic,
.colum-pic img,
.colum-text,
.partner {
    display: block
}

.project-home .slide-prev {
    background-color: #09347a
}

.project-home .slide-next {
    background-color: #e51b24
}

.group-central[data-name=news-home] .content-main {
    text-align: right
}

.group-central[data-name=news-home] .box-intro {
    max-width: 900px;
    margin: 0 15% 0 0
}

.group-central[data-name=news-home] .box-intro::before {
    content: '';
    width: calc(100vh/2.5);
    height: calc(100vh/2);
    position: absolute;
    right: -10%;
    top: -10%;
    border: 1px solid #aaa
}

.box-news {
    width: calc(50% - 5px);
    position: relative;
    overflow: hidden;
    padding: 0
}

.colum-text,
.colum-text::before {
    top: 0;
    position: absolute;
    width: 100%;
    left: 0
}

.colum-text {
    height: auto;
    color: #fff;
    text-align: left;
    z-index: 2
}

.all-logo,
.box-logo h3,
.view-all {
    text-align: center
}

.colum-text::before {
    height: 100%;
    background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, .8), rgba(229, 27, 36, .8));
    background: linear-gradient(45deg, rgba(9, 52, 122, .8), rgba(229, 27, 36, .8))
}

.all-logo,
.box-logo,
.colum-pic,
.colum-text h3,
.partner,
.pic-logo {
    position: relative
}

.map-box,
.pic-logo,
.view-all {
    background-color: #fff
}

.colum-text h3 {
    line-height: 1.6;
    display: block;
    padding: 10px 10px 10px 70px;
    z-index: 2
}

.colum-pic {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.colum-pic img {
    width: 100%;
    height: auto;
    opacity: 0
}

.box-news:nth-child(1) {
    height: calc(100vh/1.6 + 5px);
    margin: 0
}

.box-news:nth-child(2) {
    height: calc(100vh/3.2);
    margin: 0 0 0 5px
}

.box-news:nth-child(3) {
    height: calc(100vh/3.2);
    margin: 5px 0 0 5px
}

#home-page .partner {
    max-width: 850px
}

.partner {
    width: 70%;
    height: auto;
    margin: auto
}

.all-logo {
    width: 100%;
    height: auto;
    margin: 10px auto
}

.box-logo {
    width: auto;
    max-width: calc(100%/3.2);
    height: auto;
    display: inline-block;
    margin: 10px;
    vertical-align: middle
}

.box-logo h3,
.pic-logo,
.pic-logo a,
.pic-logo img {
    display: block
}

.pic-logo {
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1)
}

.pic-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh / 5);
    margin: auto
}

.box-logo h3 {
    text-transform: uppercase;
    margin: 10px 0;
    color: #fff;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1)
}

.company-text h3,
.view-all {
    font-weight: 700;
    text-transform: uppercase
}

.company-text,
.view-all {
    display: inline-block;
    position: relative
}

.view-all {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.2;
    color: #09347a;
    padding: 10px 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.company-info a,
.company-text {
    color: #585858
}

#home-page .pic-logo {
    max-width: 100%
}

.company-text {
    width: 50%;
    height: auto;
    vertical-align: middle;
    margin: 0 0 0 40px;
    padding: 0;
    text-align: left
}

.align-center,
.date {
    text-align: center
}

.company-text h3 {
    font-size: 26px;
    margin: 0 0 10px;
    display: block
}

.company-info {
    font-weight: 400;
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    margin: 0
}

.company-info li {
    display: block;
    margin: 0 0 10px;
    width: 100%
}

.company-info p,
.company-info span,
.map-box {
    display: inline-block;
    vertical-align: middle
}

.company-info p {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: calc(100% - 40px)
}

.company-info span {
    width: 30px;
    height: 30px;
    margin: 0 5px 0 0
}

.map-box {
    height: calc(100vh - 200px);
    width: calc(100vh - 200px);
    position: relative;
    margin: 0 0 0 10%;
    border-radius: 50%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out
}

.content-map-box,
.thumb {
    -webkit-border-radius: 50%
}

.content-map-box {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: block;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-border-radius .6s ease-in-out;
    transition: border-radius .6s ease-in-out
}

.full-map,
.zoom-control a {
    -webkit-border-radius: 5px
}

.full-map {
    position: absolute;
    top: 50%;
    right: -20px;
    background-color: #e51b24;
    width: 40px;
    height: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    border-radius: 5px
}

.full-map::after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/video/fullscreen.svg) 50%/80% no-repeat
}

.map-box.show {
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-height: inherit;
    max-width: inherit;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    z-index: 100000
}

.map-box.show .content-map-box {
    -webkit-border-radius: 0;
    border-radius: 0
}

.map-box.show .full-map {
    top: 10px;
    right: 10px
}

.map-box.show .full-map::after {
    background: url(../images/video/cancel-fullscreen.svg) 50%/80% no-repeat
}

.map-box.show .zoom-control {
    right: 10px
}

#home-page .date {
    top: 0;
    bottom: auto;
    background-color: #fff
}

.date {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 28px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    background-color: #eee;
    font-weight: 100;
    font-size: 30px;
    color: #666;
    line-height: 1.2;
    z-index: 1
}

.content-history,
.content-overview {
    height: auto;
    position: relative;
    display: block
}

.date span {
    font-weight: 500;
    font-size: 10px;
    display: block;
    color: #aaa
}

.text-blue {
    color: #000
}

.text-red {
    color: #e51b24
}

.text-grey {
    color: #999
}

.text-white {
    color: #fff;
    text-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    font-weight: 700!important
}

.item-history h3,
.value h3 {
    font-weight: 700;
    text-transform: uppercase
}

.align-justify {
    text-align: justify
}

.align-left {
    text-align: left
}

.align-right {
    text-align: right
}

#about-page .bg-scene svg {
    width: 100%;
    height: auto;
    left: 0;
    top: -50%;
    -webkit-transform: none;
    transform: none
}

.content-page[data-post=overview] {
    padding: 22px 0 0
}

.content-overview {
    width: 90%;
    max-width: 1000px;
    padding: 5%;
    color: #444;
    margin: auto
}

.content-history {
    width: 100%;
    padding: 5% 0;
    margin: 0;
    z-index: 2
}

.content-history::after {
    width: 130vh;
    height: 130vh;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -65vh 0 0 -65vh;
    background: -webkit-radial-gradient(circle farthest-side at center center, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
    background: radial-gradient(circle farthest-side at center center, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
    z-index: -1
}

.content-history>h2::after,
.content-history>h2::before {
    width: 40%;
    height: 1px;
    background-color: #999;
    position: absolute;
    top: 50%
}

.item-history,
.item-history h3 {
    position: relative;
    display: block
}

.content-history>h2::after {
    right: 0
}

.content-history>h2::before {
    left: 0
}

.item-history {
    width: 90%;
    max-width: 900px;
    height: auto;
    padding: 0 20px;
    margin: 0 auto 20px;
    color: #09347a
}

.item-history h3 {
    font-size: calc(100vw/36);
    margin: 0 0 10px
}

.item-history p {
    margin: 0 0 10px;
    font-size: 18px;
    display: block
}

.item-history::after {
    width: 1px;
    height: 50px;
    position: relative;
    display: block;
    margin: 20px auto;
    background-color: #999
}

.content-value,
.value {
    height: auto;
    display: block;
    position: relative;
    color: #444
}

.content-value {
    width: 90%;
    max-width: 900px;
    padding: 5%;
    margin: auto
}

.value {
    width: 100%;
    padding: 20px;
    margin: 0 0 20px;
    background-color: #fff;
    -webkit-border-radius: 28px;
    border-radius: 28px
}

.value::before {
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;
    position: absolute;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    border: 1px solid #eee
}

.value h3,
.value p {
    display: block;
    position: relative
}

.value h3 {
    font-size: 24px;
    margin: 0 0 10px;
    color: #09347a
}

.title-name>h3,
.title-name>p {
    color: #fff;
    text-transform: uppercase
}

.value p {
    margin: 0 0 15px;
    font-size: 16px
}

.content-page[data-post=info] .content-center {
    width: auto;
    max-width: 900px
}

.content-page[data-post=info] .content-center::after {
    display: none
}

.img-chart,
.img-chart img {
    height: auto;
    display: block;
    position: relative
}

.img-chart {
    width: 80%;
    max-width: 1200px;
    margin: 5% auto
}

.img-chart img {
    width: 100%;
    margin: 0
}

.content-page[data-post=manager] .content-right::after,
.img-chart .zoom {
    display: none
}

.content-page[data-post=manager] {
    background-color: #041e56;
    padding: 50px 0;
    text-align: center;
    z-index: 5
}

.content-page[data-post=manager]::after,
.content-page[data-post=manager]::before {
    width: 100%;
    height: 30px;
    position: absolute;
    left: 0;
    background-color: rgba(9, 52, 122, .4);
    z-index: -1
}

.content-page[data-post=manager]::before {
    top: -30px
}

.content-page[data-post=manager]::after {
    bottom: -30px
}

.content-page[data-post=manager] .content-left,
.content-page[data-post=manager] .content-right {
    padding: 0;
    width: auto;
    max-width: 450px;
    display: inline-block;
    vertical-align: top;
    float: none;
    margin: 20px 50px
}

.chart-box,
.thumb,
.title-name {
    vertical-align: middle
}

.content-manager {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    margin: 0
}

.content-manager span {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 10
}

.content-manager.hide span,
.manager {
    display: block
}

.content-manager>h3 {
    text-transform: uppercase;
    position: absolute;
    left: -140px;
    top: 100px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-size: 24px;
    font-weight: 500
}

.manager,
.thumb,
.thumb img,
.title-name {
    position: relative
}

.manager {
    width: 100%;
    height: auto;
    margin: 0 0 20px;
    padding: 0 30px 0 0;
    -webkit-transition: -webkit-filter .5s ease-in-out;
    transition: filter .5s ease-in-out;
    z-index: 1
}

.content-manager.hide .manager,
.content-manager.hide>h3 {
    -webkit-filter: blur(5px);
    filter: blur(5px)
}

.thumb {
    width: 150px;
    height: 150px;
    display: inline-block;
    padding: 5px;
    margin: 0 10px 0 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2)
}

.thumb img {
    width: 100%;
    height: 100%;
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.title-name {
    width: calc(100% - 170px);
    height: auto;
    display: inline-block
}

.title-name>h3 {
    font-weight: 300;
    display: block;
    width: 100%;
    font-size: 18px;
    margin: 0 0 10px
}

.content-info .content-text p,
.title-name>p {
    font-size: 14px
}

.title-name>strong {
    font-weight: 700
}

.title-name>p {
    font-weight: 400;
    display: block;
    width: 100%
}

.info-manager {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0
}

.content-info {
    position: fixed;
    width: 550px;
    height: auto;
    left: auto;
    top: auto;
    right: auto;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    z-index: 20
}

.content-info .title-name {
    text-align: left;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
    background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
    padding: 10px 20px;
    width: 100%
}

.content-info .content-text {
    padding: 20px;
    margin: 0;
    display: block;
    width: 100%
}

.content-info.showup {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.content-page[data-post=resource] {
    background: url(../images/pattern.png)
}

.content-page[data-post=resource] .content-center {
    width: 100%
}

.content-page[data-post=resource] .box-text {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 800px;
    padding: 40px 60px 40px 40px
}

.content-page[data-post=resource] .box-text::after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #999
}

.chart-box {
    position: relative;
    display: inline-block;
    width: auto;
    margin: 0 0 0 -60px;
    z-index: 1
}

.info-chart,
.info-chart span {
    display: inline-block;
    margin: 0;
    vertical-align: middle
}

.chart-box svg {
    position: relative;
    width: calc(100vh/2.5);
    height: calc(100vh/2.5);
    display: inline-block;
    vertical-align: middle
}

.info-chart {
    position: relative;
    width: auto;
    height: auto;
    color: #444;
    text-align: left
}

.info-chart span {
    width: 25px;
    height: 25px
}

.info-chart>ul {
    list-style-type: none!important
}

.info-chart li {
    display: block;
    margin: 0 0 15px
}

.info-chart p {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin: 0 0 0 10px;
    line-height: 1.4
}

.color-01 {
    background-color: #7a57a4
}

.color-02 {
    background-color: #4185d6
}

.color-03 {
    background-color: #c53e3a
}

.color-04 {
    background-color: #9cc24e
}

.content-page[data-post=policy] .content-center {
    width: auto;
    max-width: 900px
}

.content-page[data-post=policy] .content-center::after {
    display: none
}

.content-page[data-post=policy] .box-text {
    display: inline-block;
    vertical-align: middle;
    padding: 40px;
    background-color: #fff
}

.item-award,
.slide-award {
    display: block;
    height: auto;
    position: relative
}

.content-page[data-post=policy] .content-column h2 {
    text-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    font-weight: 700
}

.content-page[data-post=achievement] {
    background: url(../images/pattern.png);
    padding: 50px 0;
    text-align: center
}

.slide-award {
    width: 90%;
    max-width: 1100px;
    margin: 10px auto 0
}

.item-award {
    width: calc(100% - 2px);
    max-width: 400px;
    margin: 0 auto;
    text-align: center
}

.item-award h3,
.item-award img,
.video-center {
    display: block;
    margin: auto
}

.item-award h3 {
    font-weight: 700;
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    color: #09347a;
    padding: 10px
}

.title-pdf h3,
.title-pic h3,
.title-video h3 {
    color: #fff;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase
}

.item-award img {
    width: 100%;
    height: auto
}

.item-video,
.video-center {
    height: calc(1125/2000 * 980px)
}

.content-page[data-post=document] .content-column:nth-child(1) {
    padding: 50px 0;
    text-align: center;
    background-color: #09347a
}

.content-page[data-post=document] .content-column:nth-child(2) {
    padding: 50px 0;
    text-align: center;
    background: url(../images/pattern.png)
}

.video-center {
    position: relative;
    width: 90%;
    max-width: 980px
}

.bottom-video,
.item-video {
    margin: 0;
    width: 100%;
    display: block;
    position: relative
}

.bottom-video {
    height: auto;
    padding: 20px 0
}

.title-video {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5
}

.title-video h3 {
    display: block;
    padding: 10px 20px;
    font-size: 16px;
    background-color: rgba(0, 0, 0, .5)
}

.box-library-pdf,
.title-pic {
    background-color: rgba(0, 0, 0, .3)
}

.slide-video-playing .title-video {
    display: none
}

.pic-center {
    position: relative;
    display: inline-block;
    width: 80%;
    max-width: 1100px;
    height: auto;
    margin: 20px 0;
    text-align: center
}

.box-library-pdf,
.library-thumb {
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden
}

.library-thumb {
    width: 95%;
    height: auto;
    -webkit-border-radius: 20px;
    border-radius: 20px
}

.library-thumb.brochure .pic-library {
    height: 200px
}

.pic-library {
    display: block;
    width: 100%;
    height: calc(100vh/3);
    overflow: hidden;
    -webkit-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0
}

.title-pic {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 20px
}

.title-pic h3 {
    display: block;
    font-size: 16px
}

.pdf-slide {
    max-width: 800px
}

.box-library-pdf {
    width: 98%;
    max-width: 350px;
    height: 350px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .2)
}

.box-library-pdf img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    margin: 0;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.download-pdf {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -35px 0 0 -35px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    z-index: 10
}

.download-pdf::after,
.project-box .text-project::after,
.title-pdf h3::after {
    left: 0;
    top: 0;
    content: ''
}

.download-pdf::after {
    background: url(../images/pdf-down.svg) center center/cover no-repeat #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.title-pdf,
.title-pdf h3 {
    position: relative;
    display: inline-block
}

.title-pdf {
    width: auto;
    height: auto;
    vertical-align: top;
    margin: -100px 0 0;
    cursor: pointer;
    z-index: 1
}

.title-pdf h3 {
    font-size: 15px;
    line-height: 1.2;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
    vertical-align: middle;
    padding: 10px 40px 10px 20px
}

.title-pdf h3::after {
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    z-index: -1
}

.content-slide,
.text-slide {
    width: 100%;
    z-index: 5;
    position: relative;
    height: auto
}

.text-slide {
    margin: 0 0 30px;
    display: block
}

.text-slide h2 {
    font-size: calc(100vw/20);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: #aaa;
    background: -webkit-linear-gradient(35deg, #fff 20%, #666 100%);
    background: linear-gradient(35deg, #fff 20%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.content-slide {
    margin: 0 -5px;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    text-align: center
}

.project-box {
    position: relative;
    display: block;
    width: 90%;
    max-width: 1000px;
    height: auto;
    margin: auto;
    text-align: center
}

.project-box .text-project {
    margin: 0 0 0 -80px;
    background-image: none;
    background-color: transparent
}

.project-box .text-project::after {
    width: 100%;
    height: 100%;
    position: absolute;
    background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
    background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
    z-index: -1
}

.project-box .text-project::before {
    content: '';
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    position: absolute;
    left: -10px;
    top: -10px;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    z-index: -2
}

.box-project-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0
}

.box-project-box::before {
    content: '';
    width: calc(100vh/3);
    height: calc(100vh/4);
    position: absolute;
    left: 50%;
    top: 5%;
    border: 1px solid #aaa;
    z-index: 1
}

.pic-project-box {
    position: relative;
    width: calc(100vh/.8);
    height: calc(100vh/2);
    max-width: 70%;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    overflow: hidden
}

.project-box .slide-item {
    opacity: .3;
    pointer-events: none;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.project-box .slide-item.prev-item {
    opacity: 0
}

.project-box .slide-item.center {
    opacity: 1;
    pointer-events: auto;
    -webkit-filter: none;
    filter: none;
    -webkit-transform: none;
    transform: none
}

.project-box .slide-wrapper-outer {
    overflow: visible
}

.project-box .slide-pagination {
    margin: 50px auto
}

.project-box .slide-buttons {
    margin: -70px 0 0
}

#project-details-page .bg-scene {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#project-details-page .bg-scene svg {
    width: 100%;
    height: auto
}

#project-details-page .content-column>h2::after,
#project-details-page .content-column>h2::before {
    content: '';
    display: table-cell;
    width: 35%;
    top: 50%;
    border-top: 1px solid #aaa;
    position: absolute
}

#project-details-page .bg-inner {
    height: calc(100vh - 50px)
}

#project-details-page .sub-nav ul::after {
    background-image: none;
    background-color: #fff
}

#project-details-page .content-column>h2 {
    margin: 30px 0
}

#project-details-page .content-column>h2::before {
    left: 0
}

#project-details-page .content-column>h2::after {
    right: 0
}

body.auto #project-details-page .title-page h1 {
    font-size: calc(100vw/40)
}

.tilte-project {
    position: relative;
    width: 100%;
    height: auto;
    text-align: left;
    display: block;
    color: #fff;
    margin: 0;
    padding: 0 30px
}

.tilte-project h2::before {
    content: "";
    width: 20px;
    height: 70%;
    position: absolute;
    left: 0;
    top: 15%;
    background-color: rgba(229, 27, 36, 1);
    opacity: 0
}

.faci-slide,
.logo-project,
.logo-project img,
.pic-location,
.pic-location img {
    height: auto;
    position: relative
}

.tilte-project h2 {
    font-size: calc(100vw/30);
    font-weight: 700;
    text-transform: uppercase
}

.tilte-project h2>span>span {
    opacity: 0
}

.tilte-project h2>span>span.move,
.tilte-project.show h2::before {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.logo-project {
    width: 200px;
    display: block;
    margin: 60px auto;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden
}

.logo-project img {
    width: 100%;
    display: block
}

.pic-location {
    width: 100%;
    max-height: 100vh;
    display: block;
    margin: 0;
    overflow: hidden
}

.pic-location img {
    width: 100%;
    display: block
}

.content-page[data-post=location] .content-center::after,
.pic-location .zoom {
    display: none
}

.content-page[data-post=intro] .content-left {
    background-color: #09347a;
    color: #fff
}

.content-page[data-post=intro] .content-left a {
    color: #fff
}

.content-page[data-post=location] .content-center {
    color: #fff;
    width: 100%;
    max-width: 900px;
    margin: 30px auto
}

.content-page[data-post=location] .content-center a {
    color: #fff
}

.content-page[data-post=location] .box-text {
    background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
    background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
    padding: 30px
}

.faci-slide {
    width: calc(100%/3);
    display: block;
    margin: 0 auto
}

.faci-slide .slide-wrapper-outer {
    overflow: visible
}

.faci-slide .slide-buttons {
    margin: -40px 0 0
}

.faci-slide .item {
    width: 100%;
    height: calc(100vh/2.2);
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0
}

.faci-slide .item img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    pointer-events: none
}

.faci-slide .item h3,
.product-slide .item h3 {
    font-size: 14px;
    max-width: calc(100% - 70px);
    background-color: #fff;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    padding: 10px 15px;
    margin: 0;
    text-align: left
}

.content-page[data-post=products] {
    background-color: #eee
}

.product-slide {
    width: calc(100vw/2);
    height: auto;
    position: relative;
    display: block;
    margin: 0 auto
}

.product-slide .item {
    width: 100%;
    height: calc(100vh/2);
    position: relative;
    display: block;
    margin: auto
}

.product-slide img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    pointer-events: none
}

.product-slide .slide-item {
    pointer-events: none;
    opacity: .2;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out
}

.product-slide .slide-item:not(.center) .zoom {
    opacity: 0;
    pointer-events: none
}

.product-slide .slide-item.center,
.product-slide .slide-item.center .zoom {
    pointer-events: auto;
    opacity: 1
}

.fullcontent .header,
.headermap,
.hidemouse,
.level-index-out,
.link-page.current,
.news-pic img,
.no-link,
.pic-length img,
.pic-thumb img,
.wheel {
    pointer-events: none
}

.product-slide .slide-wrapper-outer {
    overflow: visible
}

.faq-text,
.news-pic,
.news-txt {
    overflow: hidden
}

.content-page[data-post=news] {
    background: url(../images/pattern.png)
}

.content-page[data-post=library],
.item-resize::before {
    background-color: #eee
}

.item-resize {
    padding: 10px;
    margin: auto;
    width: 98%;
    display: inline-block;
    position: relative;
    vertical-align: top;
    min-height: 270px
}

.item-resize::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.item-resize .date {
    padding: 10px;
    left: 10px;
    top: 10px;
    bottom: auto;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    z-index: 2
}

.item-resize .date span {
    display: inline
}

.item-resize .date span::before {
    content: '-';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px
}

.item-resize .news-pic {
    width: 100%;
    height: 180px
}

.item-resize .news-txt {
    width: 100%;
    padding: 10px;
    height: auto;
    max-height: 65px;
    text-align: left
}

.project-bottom {
    text-align: center;
    margin: 0;
    padding: 30px 0;
    display: block;
    float: left;
    position: relative;
    width: 100%;
    background-color: #fff
}

.project-bottom .go-back {
    font-size: 18px;
    padding: 15px 20px;
    -webkit-border-radius: 30px;
    border-radius: 30px
}

.project-bottom .go-back::before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;
    position: absolute;
    border: 1px solid #09347a;
    -webkit-border-radius: 30px;
    border-radius: 30px
}

#support-page .content-center::after {
    display: none
}

.faq-content,
.faq-item {
    display: block;
    position: relative;
    height: auto
}

.content-page[data-post=faq] .content-column {
    padding: 30px 0
}

.content-page[data-post=faq] {
    background: url(../images/pattern.png)
}

.content-page[data-post=faq] .input-area,
.content-page[data-post=faq] .input-text {
    width: 100%
}

.faq-content {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 50px
}

.faq-item {
    width: 100%;
    margin: 0 0 5px
}

.faq-title {
    position: relative;
    display: table;
    width: 100%;
    height: auto;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, .1);
    line-height: 40px;
    text-align: left;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.faq-item:nth-child(even) .faq-title {
    background-color: rgba(255, 255, 255, .8);
    border: 1px solid #ddd
}

.faq-title h3 {
    display: inline-block;
    padding: 0 0 0 20px;
    vertical-align: middle;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    color: #444;
    text-align: left;
    width: calc(100% - 80px)
}

.faq-num {
    display: table-cell;
    width: 70px;
    height: auto;
    vertical-align: middle;
    font-size: 30px;
    color: #aaa;
    font-weight: 300;
    text-align: center
}

.faq-item.active .faq-num,
.faq-item.active .faq-title h3,
.faq-item:nth-child(even).active .faq-title h3 {
    color: #fff
}

.st-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    background: url(../images/list.svg) 50%/80% no-repeat
}

.faq-detail,
.faq-text {
    position: relative;
    display: block
}

.faq-item.active .st-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-filter: brightness(800%);
    filter: brightness(800%)
}

#map-canvas,
.news-item {
    -webkit-transform: translate3d(0, 0, 0)
}

.faq-item.active .faq-title,
.faq-item:nth-child(even).active .faq-title {
    background-color: #09347a
}

.faq-item:nth-child(even).active .faq-num {
    color: #fff;
    border-color: transparent
}

.faq-text {
    width: 100%;
    height: 0;
    -webkit-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out
}

.faq-detail,
.form-box {
    height: auto;
    width: 100%
}

.faq-detail {
    margin: 5px 0 0;
    padding: 30px 40px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .8);
    border: 1px solid #ddd
}

.answer {
    display: block;
    font-weight: 500;
    font-size: 30px;
    color: #e51b24;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 0 0 15px;
    text-align: left
}

.faq-detail ul {
    list-style-type: circle;
    padding: 0 0 0 20px
}

.faq-detail li,
.faq-detail p {
    margin: 0 0 15px;
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400
}

.form-box,
.news-list {
    text-align: center;
    position: relative
}

.form-box {
    display: inline-block;
    max-width: 800px;
    background-color: rgba(255, 255, 255, .5);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    margin: 0 auto 50px;
    padding: 40px;
    z-index: 5
}

.content-page[data-post=consulting] .content-column h2 {
    margin: 30px 0
}

.content-page[data-post=consulting] .box-text {
    padding: 100px 0
}

.content-page[data-post=consulting] .box-text>h3 {
    display: block;
    font-weight: 500;
    font-size: calc(100vw/45);
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0 0 20px;
    position: relative;
    width: 100%
}

.content-page[data-post=consulting] .box-text>h3::after {
    content: '';
    width: 100px;
    height: 1px;
    background-color: #eee;
    position: relative;
    display: block;
    margin: 20px auto
}

.content-page[data-post=consulting] .box-text:nth-child(odd) .bg-fixed {
    background-attachment: scroll
}

.content-page[data-post=consulting] .box-text:nth-child(odd) .bg-fixed::after {
    mix-blend-mode: multiply
}

.is-Edge .content-page[data-post=consulting] .box-text:nth-child(odd) .bg-fixed::after,
.is-IE .content-page[data-post=consulting] .box-text:nth-child(odd) .bg-fixed::after {
    display: none
}

#news-page .content-page {
    background-color: #ddd
}

#news-page .sub-nav ul::after {
    background-image: none;
    background-color: #ddd
}

.news-list {
    display: block;
    width: 90%;
    height: auto;
    max-width: 1200px;
    margin: 50px auto
}

.news-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 32%;
    max-width: 380px;
    margin: 6px;
    text-align: left;
    padding: 18px;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.news-pic,
.news-pic img,
.news-txt {
    display: block;
    width: 100%
}

.news-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff
}

.news-pic {
    position: relative;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #eee;
    height: 180px
}

.news-pic img {
    position: relative;
    height: auto;
    opacity: 0;
    z-index: -1
}

.news-txt {
    position: relative;
    height: 72px;
    padding: 15px 0 0 60px
}

.news-txt h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    text-transform: uppercase;
    display: block
}

.news-item:nth-child(1) {
    width: calc(44% + 6px);
    max-width: inherit;
    float: left;
    margin: 0 0 6px 7px;
    overflow: hidden
}

.news-item:nth-child(1) .news-pic {
    height: 300px
}

.news-item:nth-child(1) .news-txt {
    padding: 15px 0 0 60px;
    max-height: inherit;
    height: 80px
}

.news-item:nth-child(2),
.news-item:nth-child(3) {
    width: calc(52% + 12px);
    height: 205px;
    max-width: inherit;
    float: left;
    overflow: hidden
}

.news-item:nth-child(2) {
    margin: 0 0 6px 12px
}

.news-item:nth-child(3) {
    margin: 6px 0 6px 12px
}

.news-item:nth-child(2) .news-pic,
.news-item:nth-child(3) .news-pic {
    float: left;
    width: 56%;
    height: 100%;
    padding: 0
}

.news-item:nth-child(2) .news-txt,
.news-item:nth-child(3) .news-txt {
    float: right;
    width: 44%;
    padding: 60px 0 0 15px;
    height: 230px
}

.news-item:nth-child(2) .date,
.news-item:nth-child(3) .date {
    top: 0;
    left: calc(56% + 14px);
    bottom: auto
}

.option-02 .news-item {
    padding: 10px;
    margin: 0 4px 10px;
    width: 24%;
    max-width: 286px
}

.option-02 .news-txt {
    padding: 10px;
    height: 65px
}

.option-02 .news-item .date {
    left: 0;
    top: 0;
    bottom: auto;
    font-weight: 300;
    font-size: 24px;
    background-color: #fff
}

.option-02 .news-item:nth-child(1),
.option-02 .news-item:nth-child(2),
.option-02 .news-item:nth-child(3) {
    width: 32%;
    max-width: inherit;
    float: none;
    margin: 0 5px 10px;
    left: auto;
    height: auto
}

.option-02 .news-item:nth-child(1) .news-pic,
.option-02 .news-item:nth-child(2) .news-pic,
.option-02 .news-item:nth-child(3) .news-pic {
    width: 100%;
    height: 180px;
    float: none
}

.option-02 .news-item:nth-child(1) .news-txt,
.option-02 .news-item:nth-child(2) .news-txt,
.option-02 .news-item:nth-child(3) .news-txt {
    width: 100%;
    height: 65px;
    padding: 10px;
    float: none
}

.option-02 .news-item:nth-child(2) .date,
.option-02 .news-item:nth-child(3) .date {
    left: 0;
    top: 0;
    bottom: auto
}

.option-03 .news-item .date,
.option-03 .news-item:nth-child(2) .date,
.option-03 .news-item:nth-child(3) .date {
    left: auto;
    top: auto;
    bottom: auto
}

.option-03 .news-item {
    padding: 10px;
    margin: 0 3px 10px;
    width: 32%;
    max-width: inherit
}

.option-03 .news-txt {
    padding: 10px;
    height: 65px
}

.option-03 .news-item .date {
    padding: 10px 0 10px 20px;
    position: relative;
    text-align: left;
    font-weight: 300;
    font-size: 24px
}

.option-03 .news-item .date span {
    display: inline
}

.option-03 .news-item .date span::before {
    content: '-';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px
}

.option-03 .news-item:nth-child(1),
.option-03 .news-item:nth-child(2),
.option-03 .news-item:nth-child(3) {
    width: 32%;
    max-width: inherit;
    float: none;
    margin: 0 3px 10px;
    left: auto;
    height: auto
}

.option-03 .news-item:nth-child(1) .news-pic,
.option-03 .news-item:nth-child(2) .news-pic,
.option-03 .news-item:nth-child(3) .news-pic {
    width: 100%;
    height: 180px;
    float: none
}

.option-03 .news-item:nth-child(1) .news-txt,
.option-03 .news-item:nth-child(2) .news-txt,
.option-03 .news-item:nth-child(3) .news-txt {
    width: 100%;
    height: 65px;
    padding: 10px;
    float: none
}

.news-link,
.scroll-slide {
    height: auto;
    position: relative;
    display: block
}

#news-details-page .content-page {
    background-color: #ddd
}

#news-details-page .sub-nav ul::after {
    background-image: none;
    background-color: #eee
}

.content-page.list>h2 {
    padding: 20px 5%;
    font-weight: 500;
    font-size: 24px;
    text-transform: uppercase;
    color: #999
}

.content-page.list {
    opacity: 0;
    background: url(../images/pattern.png)
}

.content-page.list.show {
    opacity: 1
}

.scroll-slide {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0 0 30px;
    box-shadow: 0 30px 30px rgba(0, 0, 0, .1);
    z-index: 3
}

.career-list,
.content-small .box-text {
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1)
}

.scroll-slide h2 {
    font-size: 30px;
    font-weight: 300px;
    margin: 0 0 20px;
    text-transform: uppercase
}

.news-link {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto
}

.link-page {
    position: relative;
    display: block;
    width: 100%;
    height: 110px;
    padding: 10px;
    color: #4d4d4d;
    text-align: left;
    overflow: hidden;
    background-color: #fff
}

.pic-thumb {
    position: relative;
    float: left;
    display: block;
    width: 50%;
    height: auto;
    margin: 0 10px 0 0;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1
}

.pic-thumb img {
    position: relative;
    height: 88px;
    width: 100%;
    margin: 0;
    opacity: 0;
    z-index: -1
}

.link-text {
    position: relative;
    display: block;
    height: 100%;
    line-height: 90px;
    overflow: hidden
}

.link-page a,
.link-page.current::after {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0
}

.link-text h3 {
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    max-height: 90px;
    overflow: hidden;
    text-transform: uppercase
}

.link-page.current {
    background-color: #e51b24;
    color: #fff
}

.link-page a {
    display: block;
    z-index: 2
}

.link-page.current::after {
    content: '';
    z-index: 3
}

.load-content,
.load-data {
    position: relative;
    display: block;
    height: auto;
    width: 100%
}

.news-link .slide-buttons {
    margin: -40px 0 0
}

.load-content {
    background-color: #eee;
    padding-bottom: 30px;
    z-index: 4
}

.load-data::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #bbb;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: -1
}

.load-details,
.load-text,
.load-title {
    width: 100%;
    height: auto;
    display: block
}

.button-bottom,
.go-back,
.load-details,
.load-details .date,
.load-text,
.load-text table tbody,
.load-title,
.load-title h3 {
    position: relative
}

.load-details {
    max-width: 1100px;
    background-color: #eee;
    margin: 40px auto 0
}

.load-text iframe,
.load-text img {
    max-width: 100%
}

.load-title {
    text-align: center;
    padding: 20px 5%;
    margin: 30px 0
}

.load-title h3 {
    display: block;
    font-weight: 300;
    font-size: 30px;
    color: #61676d;
    text-transform: uppercase;
    line-height: 1.4
}

.load-text {
    padding: 40px;
    background-color: #fff;
    font-size: 16px;
    color: #666;
    line-height: 1.4
}

.load-text p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6
}

.load-text a {
    color: #c43a51;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.load-text img {
    width: auto;
    height: auto!important;
    margin: 10px auto;
    display: block
}

.load-text h1,
.load-text h2,
.load-text h3,
.load-text h4,
.load-text h5,
.load-text h6 {
    font-size: 18px;
    color: #383838;
    font-weight: 700;
    line-height: 1.4;
    margin: 10px 0
}

.load-text table {
    width: auto;
    max-width: 100%;
    height: auto;
    display: table;
    min-width: inherit;
    margin: 30px auto;
    table-layout: fixed
}

.load-text table tbody {
    display: table;
    width: 100%;
    min-width: 500px
}

.load-text table td,
.load-text table th {
    background-color: #7e8387;
    text-align: left;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    line-height: 1.6;
    padding: 10px 15px
}

.button-bottom,
.career-list td,
.career-list th {
    text-align: center
}

.link-page .date,
.link-page .date span {
    color: #666;
    font-size: 10px;
    display: inline;
    font-weight: 500
}

.link-page .date {
    background-color: #fff;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    margin: 0;
    z-index: 2
}

.link-page .date::after {
    display: none
}

.link-page .date span::before {
    content: '-';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px
}

.link-page.current .date {
    color: #fff;
    background-color: #a3a3a3
}

.link-page.current .date span {
    color: #fff
}

.load-details .date {
    color: #4a4a4a;
    background-color: #f1f1f1;
    display: inline-block;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto
}

.load-details .date::after {
    display: none
}

.load-details .date span {
    color: #4a4a4a
}

.button-bottom {
    margin: 20px 0;
    display: block
}

.go-back {
    width: auto;
    height: auto;
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    padding: 10px 15px;
    color: #fff;
    background-color: #09347a;
    text-transform: uppercase
}

.go-back::before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;
    position: absolute;
    border: 1px solid #09347a
}

.content-career,
.content-center,
.content-column,
.content-column ul,
.content-left,
.content-right {
    position: relative;
    display: block
}

#recruitment-page .bg-scene {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#recruitment-page .bg-scene svg {
    width: 100%;
    height: auto
}

.content-column {
    width: 100%;
    height: auto;
    float: left;
    overflow: hidden;
    margin: 0
}

.content-column ul {
    width: 100%;
    height: auto;
    list-style-type: square
}

.content-left,
.content-right {
    height: auto;
    color: #444;
    z-index: 2
}

.content-recruitment,
.content-small {
    width: 90%;
    height: auto;
    max-width: 1000px;
    position: relative;
    display: block;
    color: #222;
    margin: 5% auto;
    z-index: 2
}

.content-recruitment {
    margin: 40px auto
}

.content-center {
    margin: 5% auto;
    width: 50%;
    padding: 0;
    z-index: 2
}

.content-career {
    margin: 5% auto 10%;
    width: 60%;
    padding: 50px 5%;
    z-index: 2
}

.content-career::after,
.content-center::after,
.content-right::after {
    content: '';
    width: 120%;
    height: 100%;
    position: absolute;
    left: -10%;
    top: 0;
    background: -webkit-radial-gradient(circle farthest-side at center center, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
    background: radial-gradient(circle farthest-side at center center, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
    z-index: -1
}

.content-left {
    float: left;
    width: 50%;
    padding: 5% 10%
}

.content-right {
    float: right;
    width: 50%;
    padding: 10%
}

.box-text,
.content-column h2 {
    width: 100%;
    display: block;
    position: relative
}

.content-column h2 {
    font-weight: 500;
    font-size: calc(100vw/40);
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0 0 20px
}

.content-small>h2 {
    color: #fff;
    text-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    font-weight: 700
}

.box-text {
    height: auto;
    margin: auto
}

.box-text p {
    margin: 0 0 15px;
    font-size: 18px;
text-align:justify;
    display: block;
    position: relative
}

.box-text li {
    margin: 0 0 15px 15px;
    font-size: 16px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6
}

.content-small .box-text {
    padding: 30px;
    background-color: rgba(255, 255, 255, .9);
    margin: 20px 0;
    display: inline-block;
    width: auto
}

.pic-length {
    width: 50%;
    height: auto;
    display: block;
    float: right;
    overflow: hidden
}

.pic-length img {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    opacity: 0
}

.content-column .bg-fixed::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(0deg, #d2c389 0, #374a77 100%);
    background: linear-gradient(0deg, #d2c389 0, #374a77 100%);
    mix-blend-mode: hard-light
}

.is-Edge .content-column .bg-fixed::after,
.is-IE .content-column .bg-fixed::after {
    mix-blend-mode: inherit;
    display: none
}

#service-page .bg-inner {
    background-position: center bottom
}

#service-page .bg-scene {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

#service-page .bg-scene svg {
    width: 100%;
    height: auto
}

#service-page .content-center {
    width: auto;
    max-width: 1000px
}

#service-page .content-center::after {
    display: none
}

.career-box,
.career-list {
    display: block;
    position: relative;
    height: auto
}

#service-page .content-page .box-text {
    padding: 50px
}

#service-page .content-page.content-page-other .box-text,
#service-page .content-page[data-post=group-02] .box-text,
#service-page .content-page[data-post=group-03] .box-text,
#service-page .content-page[data-post=group-05] .box-text {
    background-color: rgba(255, 255, 255, .9);
    margin: 20px 0;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1)
}

.career-box {
    width: 100%;
    float: left;
    margin: 0
}

.content-table table {
    width: 100%;
    margin: 0 auto;
    border-spacing: 1px;
    font-size: 15px;
    table-layout: fixed;
    line-height: 1.6
}

.career-list tbody td {
    padding: 10px 15px;
    background-color: #eee;
    font-size: 15px;
    font-weight: 500;
    color: #414141;
    vertical-align: middle
}

.career-list tbody tr:nth-child(even) td {
    background-color: #ddd;
    color: #414141
}

.career-title a {
    font-size: 16px;
    font-weight: 500;
    color: #414141;
    text-transform: uppercase
}

.career-list {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto 50px;
    padding: 25px;
    background-color: #fff
}

.head-list th {
    padding: 10px 15px;
    background-color: #09347a;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    vertical-align: middle;
    text-transform: uppercase
}

.head-list th[scope=Number] {
    width: 60px
}

.head-list th[scope=Position] {
    width: auto;
    min-width: 300px
}

.head-list th[scope=Status] {
    width: 150px
}

.head-list th[scope=Quantity] {
    width: 120px
}

.head-list th[scope=Location],
.head-list th[scope=Expire] {
    width: 180px
}

.career-list td:nth-child(2),
.head-list th:nth-child(2) {
    text-align: left
}

.status {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-family: inherit
}

.career-form,
.status.hot {
    position: relative;
    display: block
}

.status.hot a {
    background-color: rgba(229, 27, 36, 1);
    color: #fff;
    font-weight: 700;
    padding: 8px 15px;
    display: inline-block;
    -webkit-border-radius: 20px;
    border-radius: 20px
}

.career-form {
    padding: 60px 0 80px;
    background-color: #09347a;
    width: 100%;
    height: auto;
    float: left;
    margin: 0
}

.join-title,
.join-us {
    width: 90%;
    margin: 0 auto;
    display: block;
    height: auto;
    text-align: center;
    position: relative
}

.join-title h3 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    text-transform: uppercase
}

.join-title p {
    font-size: 14px;
    font-weight: 300;
    color: #fff
}

.join-us {
    max-width: 600px
}

.join-form {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    overflow: hidden;
    padding: 40px 0 0
}

.join-us .input-text {
    float: left;
    width: 50%;
    margin: 0 0 12px
}

.join-us .input-text:nth-child(odd) {
    padding-right: 6px
}

.join-us .input-text:nth-child(even) {
    padding-left: 6px
}

.join-us .input-but {
    margin-top: 15px;
    opacity: 1
}

.download-but {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 0 0 80px;
    text-align: center
}

.download-but a {
    position: relative;
    display: inline-block;
    color: #fff;
    padding: 10px 60px 10px 20px;
    background-color: #09347a;
    text-align: left;
    -webkit-border-radius: 30px;
    border-radius: 30px
}

.download-but a::after,
.download-but a::before {
    position: absolute;
    content: ''
}

.download-but a::before {
    left: -7px;
    top: -7px;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    -webkit-border-radius: 35px;
    border-radius: 35px;
    border: 1px solid #09347a
}

.download-but a::after {
    width: 40px;
    height: 40px;
    right: 10px;
    top: 10px;
    background: url(../images/select.png) center center no-repeat #a3a3a3;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.details-content,
.details-content>span {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0
}

.details-center .download-but span {
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase
}

.details-center .download-but h3 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0
}

.details-content {
    height: 100vh;
    opacity: 0;
    text-align: center;
    overflow: hidden;
    z-index: 3000
}

.details-content::after,
.details-content::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.details-content.no-after::after,
.details-content.no-after::before {
    display: none
}

.details-content>span {
    height: 100vh;
    -moz-user-select: -moz-none;
    z-index: 1
}

.details-center {
    position: relative;
    display: inline-block;
    width: 90%;
    height: auto;
    vertical-align: middle;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    z-index: 5;
    opacity: 0
}

.details-outer,
.details-text {
    width: 100%;
    height: auto;
    position: relative
}

.input-area,
.input-text {
    vertical-align: top;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1)
}

.details-center h2,
.details-center h3 {
    color: #09347a;
    font-size: calc(100vw/50);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    display: block;
    margin: 0 0 20px;
    text-transform: uppercase
}

.details-outer {
    margin: 0;
    padding: 30px 50px 50px;
    background-color: #fff
}

.details-center.legislation {
    max-width: 800px
}

.details-outer.legis-pop {
    -webkit-border-radius: 15px;
    border-radius: 15px
}

.details-text {
    padding: 30px 0;
    display: block;
    border-bottom: 1px dotted #404040;
    border-top: 1px dotted #404040;
    font-size: 15px;
    line-height: 1.4;
    color: #404040;
    text-align: left
}

.details-text h3 {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 700;
    color: #404040;
    text-transform: uppercase;
    text-align: left
}

.details-text p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6
}

.details-text img {
    display: block;
    width: auto!important;
    height: auto!important;
    max-width: 100%;
    margin: 0 auto
}

.details-text ol,
.details-text ul {
    text-align: left;
    list-style: inherit;
    -webkit-margin-start: 16px
}

.details-text li,
.details-text ol li,
.details-text p span,
.details-text span {
    text-align: left;
    margin: 5px 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit
}

.details-text a {
    color: rgba(229, 27, 36, 1);
    font-weight: 700
}

.details-text a:hover {
    color: #404040
}

.details-text table {
    border-spacing: 1px;
    width: auto;
    max-width: 100%;
    height: auto;
    display: table;
    min-width: inherit;
    margin: 30px auto;
    table-layout: fixed
}

.details-text iframe {
    max-width: 100%
}

.details-text table tbody {
    display: table;
    width: 100%;
    min-width: 500px;
    position: relative
}

.details-text table td,
.details-text table th {
    border: 1px solid #788892;
    background-color: #7e8387;
    text-align: left;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    line-height: 1.6;
    padding: 10px 15px
}

.company-text h2,
.contact-form h2 {
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase
}

.group-central[data-name=contact-form] .content-main {
    text-align: left
}

.group-central[data-name=contact-form] .box-intro {
    max-width: 800px;
    margin: 0 0 0 300px;
    text-align: left
}

.input-but,
button {
    text-align: center
}

.contact-form {
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
    display: block
}

.company-text h2::after,
.contact-form h2::after {
    width: 150px;
    height: 1px;
    display: block;
    content: ''
}

.contact-form h2 {
    color: #fff;
    margin: 0 0 20px;
    display: block;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1)
}

.contact-form h2::after {
    background-color: #fff;
    margin: 15px 0
}

.company-text h2 {
    color: #aaa;
    margin: 0 0 20px;
    display: block
}

.company-text h2::after {
    background-color: #aaa;
    margin: 15px 0
}

input[type=text],
input[type=password],
textarea {
    font-weight: 300;
    background-color: #fff;
    font-size: 16px;
    border: none;
    color: #666;
    font-family: Montserrat, sans-serif
}

.require-col {
    width: 100%;
    height: auto;
    position: relative;
    display: block
}

.input-area,
.input-but,
.input-text,
button {
    height: auto;
    position: relative;
    display: inline-block
}

.input-text {
    width: 48%;
    margin: 0 0 5px
}

input[type=text],
input[type=password] {
    line-height: 60px;
    padding: 0 20px;
    width: 100%;
    height: 60px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.file-name,
textarea {
    -webkit-transition: all .3s ease-in-out
}

input[type=file] {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
    z-index: 1;
    opacity: 0
}

.input-area {
    width: calc(96% + 5px);
    margin: 0
}

textarea {
    line-height: 1.6;
    padding: 5px 20px;
    width: 100%;
    height: 120px;
    transition: all .3s ease-in-out;
    resize: none
}

input[type=text]:focus,
textarea:focus {
    color: #333
}

.input-but {
    width: calc(96% + 5px);
    margin: 20px 0
}

button {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    padding: 10px 20px;
    color: #fff;
    width: auto;
    -webkit-appearance: none;
    margin: 0;
    text-transform: uppercase;
    border: none;
    background-color: rgba(229, 27, 36, 1)
}

.file-mark,
.file-name {
    position: absolute;
    display: block
}

button::after {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    left: -5px;
    top: -5px;
    border: 1px solid rgba(229, 27, 36, 1)
}

button.but {
    float: right;
    margin: 20px 0
}

.file-name {
    left: 6px;
    top: 0;
    width: calc(100% - 6px);
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    color: #727272;
    font-weight: 300;
    z-index: 0;
    white-space: nowrap;
    padding: 0 100px 0 20px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s ease-in-out
}

.file-mark,
.infobox h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff
}

.file-mark {
    top: 5px;
    right: 5px;
    width: 96px;
    height: 50px;
    line-height: 50px;
    background-color: #a3a3a3;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.captcha,
.g-recaptcha {
    height: auto;
    text-align: center;
    position: relative;
    display: inline-block
}

.btn-grey {
    background-color: #6b6b6b
}

.btn-grey::after {
    border: 1px solid #6b6b6b
}

.captcha {
    width: 304px;
    vertical-align: middle;
    float: left
}

.g-recaptcha {
    width: 100%;
    margin: 0
}

.g-recaptcha>div {
    width: 100%!important;
    height: auto!important;
    position: relative;
    display: inline-block
}

#map-canvas,
.googlemap {
    width: 100%;
    height: 100%;
    left: 0
}

.captcha+button[type=submit] {
    float: right
}

.googlemap {
    position: fixed;
    top: -100%;
    overflow: hidden;
    -webkit-transition: top 1s ease-in-out;
    transition: top 1s ease-in-out;
    background-color: #ccc;
    z-index: 120
}

#map-canvas>div,
.gm-style .gm-style-iw,
.gm-style div div div div div div div {
    background-color: transparent!important
}

.googlemap.show {
    top: 0
}

#map-canvas {
    position: absolute;
    display: block;
    top: 0;
    transform: translate3d(0, 0, 0)
}

.gm-style .infobox,
.infobox h3,
.infobox p,
.pic-map {
    position: relative
}

.gm-style .gm-style-iw {
    width: 100%!important;
    height: auto!important;
    top: 50%!important
}

.gm-style .gm-style-iw>div {
    max-width: inherit!important;
    max-height: inherit!important
}

.gm-style .gm-style-iw>div>div {
    overflow: hidden!important;
    width: 100%;
    height: auto
}

.gm-style div div div div {
    z-index: 200!important
}

.gm-style div div div div:nth-child(4) {
    z-index: 10!important
}

.gm-style div div div div div div div {
    box-shadow: none!important
}

.gm-style .gmnoprint {
    z-index: 300!important
}

.gm-style .infobox {
    display: inline-block;
    width: 260px;
    height: auto;
    z-index: 999!important
}

.gm-style .infobox-inner {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    margin: 15px 15px 0 0;
    padding-bottom: 15px;
    background-color: #09347a!important
}

.pic-map,
.pic-map img {
    width: 100%;
    display: block
}

.pic-map {
    height: 130px;
    overflow: hidden!important
}

.all-album,
.all-pics,
.full {
    overflow: hidden
}

.pic-map img {
    height: auto
}

.infobox {
    font-family: Montserrat, sans-serif;
    text-align: left;
    line-height: 1.4
}

.infobox h3 {
    font-family: Montserrat, sans-serif;
    display: block;
    padding: 15px 20px 10px 15px
}

.infobox p {
    font-size: 13px;
    color: #fff;
    display: block;
    padding: 0 15px;
    font-weight: 400
}

.infobox a {
    color: #fff
}

.infobox .close-box-map {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 99999!important
}

.infobox .close-box-map::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/close.png) 50%/80% no-repeat #09347a;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.gm-style button[title=Close],
.gm-style button[title=Close] img {
    display: none!important
}

.gm-style .gm-style-iw+div img,
.gm-style button img {
    display: none
}

.gm-style .gm-style-iw~img {
    right: -10px!important;
    top: calc(50% - 20px)!important;
    width: 40px!important;
    height: 40px!important;
    opacity: 0
}

.zoom-control {
    position: absolute;
    bottom: 10px;
    right: -50px;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    z-index: 20
}

.zoom-control a {
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    box-shadow: 0 5px 24px rgba(0, 0, 0, .2);
    margin: 10px 0
}

.display-none,
.put-hide,
.put-show {
    display: none!important
}

.zoom-in {
    background: url(../images/zoom-in.svg) 50%/80% no-repeat #e51b24
}

.zoom-out {
    background: url(../images/zoom-out.svg) 50%/80% no-repeat #e51b24
}

.zoom-full {
    background: url(../images/video/fullscreen.svg) 50%/80% no-repeat #e51b24
}

.zoom-full.active {
    background: url(../images/video/cancel-fullscreen.svg) 50%/80% no-repeat #e51b24
}

.gm-style button {
    background: url(../images/video/fullscreen.svg) 50%/80% no-repeat #a3a3a3!important;
    width: 35px!important;
    height: 35px!important;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.gm-style.fullcontent button {
    background: url(../images/video/cancel-fullscreen.svg) 50%/80% no-repeat #a3a3a3!important
}

.fullcontent .header {
    z-index: -9999
}

.all-album {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    -moz-user-select: -moz-none;
    z-index: 3600
}

.album-center,
.album-load,
.album-pic-center {
    position: relative;
    display: block
}

.album-load {
    width: 100%;
    height: 100%;
    opacity: 0;
    text-align: center
}

.album-center {
    width: 100vw;
    height: 100vh
}

.album-pic-center {
    width: 100%;
    height: 100%;
    text-align: center
}

.album-pic-center .pic-name {
    position: absolute;
    left: 0;
    top: 1.5%;
    z-index: 5;
    width: 100%;
    height: auto;
    padding: 0 40px
}

.album-pic-center .pic-name h3 {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    padding: 10px 15px
}

.album-pic-center .pic-name h3>span>span {
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    opacity: 0
}

.album-pic-center .pic-name.move h3>span>span.move {
    opacity: 1
}

.container-zoom {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: block
}

.container-zoom::after,
.container-zoom::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.container-zoom>img {
    width: auto;
    height: auto;
    max-height: 80vh;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: 0 -3px
}

.all-pics {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 9999
}

.all-pics.show {
    display: block
}

.all-pics .text-length {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 40px;
    opacity: 0;
    -moz-user-select: -moz-none;
    text-align: center;
    z-index: 9998
}

.all-pics .text-length h3 {
    font-weight: 500;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, .5)
}

.full,
.full img {
    display: block;
    position: relative
}

.full {
    width: 100vw;
    height: 100vh
}

.full img {
    width: auto;
    height: auto;
    outline: 0;
    border: none;
    margin: 0 auto;
    opacity: 0;
    cursor: url(../images/openhand.png) 6 8, move;
    z-index: 5
}

.full.size-large img {
    max-width: inherit;
    max-height: inherit
}

.size-large::after,
.size-large::before {
    display: none
}

.size-large img {
    max-width: inherit!important;
    max-height: inherit!important;
    left: 0;
    top: 0;
    display: block;
    margin: 0
}

.size-large {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.allvideo,
.overlay-dark,
.size-large.dragscroll {
    overflow: hidden
}

.full span {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

.dragscroll {
    -moz-user-select: -moz-none
}

.pinch-zoom-container {
    width: 100vw!important;
    height: 100vh!important;
    position: relative;
    display: block;
    margin: 0
}

.pinch-zoom {
    width: 100%;
    left: 0;
    top: 0;
    text-align: center
}

.pinch-zoom::after,
.pinch-zoom::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.pinch-zoom>img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: 0 -3px
}

.allvideo,
.video-list,
.video-wrap {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.allvideo {
    position: fixed;
    display: none;
    z-index: 2200
}

.video-list,
.video-wrap {
    position: absolute;
    z-index: 100
}

.video-skin,
.video-wrap iframe {
    position: absolute;
    left: 0;
    z-index: 10
}

.video-skin {
    bottom: 0;
    width: 100vw;
    height: auto;
    min-height: 100%
}

.video-wrap iframe {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    display: block;
    top: 0
}

.close-pics-small {
    background: url(../images/close.svg) 50%/80% no-repeat #09347a;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: fixed;
    right: 10px;
    top: 10px;
    display: none;
    z-index: 99999
}

.close-pics-small::before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;
    position: absolute;
    border: 1px solid #09347a
}

.close,
.close-album,
.close-box,
.close-map,
.close-news,
.close-pics,
.close-popup,
.close-video {
    background: url(../images/close.svg) 50%/80% no-repeat #09347a;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 999999
}

.player,
.view-album {
    margin: -50px 0 0 -50px;
    z-index: 10
}

.close-box {
    width: 30px;
    height: 30px
}

.close-album::before,
.close-box::before,
.close-map::before,
.close-news::before,
.close-pics::before,
.close-popup::before,
.close-video::before,
.close::before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;
    position: absolute;
    border: 1px solid #09347a
}

.next-pic,
.prev-pic {
    width: 40px;
    height: 80px;
    top: 0;
    position: absolute;
    cursor: pointer
}

.next-pic {
    background: url(../images/next.svg) center center/contain no-repeat;
    right: 20px
}

.prev-pic {
    background: url(../images/previous.svg) center center/contain no-repeat;
    left: 20px
}

.next-pic.disabled,
.prev-pic.disabled {
    opacity: .2;
    pointer-events: none
}

.player {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%
}

.player::after,
.player::before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute
}

.player::before {
    background: url(../images/player.png) center top no-repeat
}

.player::after {
    background: url(../images/player.png) center bottom no-repeat;
    opacity: 0
}

.view-album {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%
}

.view-album::after,
.view-album::before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.zoom,
.zoom-hover {
    z-index: 20;
    position: absolute
}

.view-album::before {
    background: url(../images/dot-bg.png) center top no-repeat;
    position: absolute
}

.view-album::after {
    background: url(../images/dot-bg.png) center bottom no-repeat;
    position: absolute;
    opacity: 0
}

.go-top::before,
.zoom-hover::before {
    content: ''
}

.zoom {
    background: url(../images/zoom.svg) 50%/80% no-repeat rgba(0, 0, 0, .1);
    width: 60px;
    height: 60px;
    right: 10px;
    top: 10px;
    border: 1px solid #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block
}

.zoom-hover {
    background: url(../images/zoom-in.svg) 50%/80% no-repeat rgba(229, 27, 36, 1);
    width: 30px;
    height: 30px;
    right: 0;
    bottom: 15px;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.zoom-hover::before {
    width: 36px;
    height: 36px;
    left: -3px;
    top: -3px;
    position: absolute;
    border: 5px solid #b0b0b0;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    z-index: -1
}

.overlay-dark {
    background-color: rgba(59, 69, 100, .95);
    height: 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    -ms-touch-action: none;
    -webkit-touch-callout: none;
    -moz-user-select: -moz-none;
    -webkit-transition: height .5s ease-in-out;
    transition: height .5s ease-in-out;
    z-index: 1500
}

.overlay-dark.show {
    height: 100%
}

.go-top {
    background: url(../images/top.svg) 50%/80% no-repeat #09347a;
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: -100px;
    right: 20px;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 15
}

.map-background,
.touch {
    background-repeat: no-repeat
}

.go-top::before,
.wheel,
.wheel span,
.wheel.show::after {
    position: absolute
}

.go-top::before {
    width: 50px;
    height: 50px;
    left: -5px;
    top: -5px;
    border: 1px solid #09347a
}

.go-top.show {
    opacity: 1;
    bottom: 20px
}

.no-scroll {
    overflow-x: hidden;
    overflow-y: hidden!important;
    overflow: hidden
}

.level-index-out {
    z-index: -9999
}

.level-index-in {
    z-index: 9990
}

.visible {
    overflow: visible
}

.touch {
    background-image: url(../images/pinchzoom.png);
    background-position: left top
}

.cursor {
    cursor: url(../images/openhand.png) 8 8, move
}

.drag-cursor {
    cursor: url(../images/grabbing.png) 8 8, move
}

.desktop {
    display: block
}

.mobile {
    display: none
}

img.desktop {
    display: block
}

img.mobile {
    display: none
}

.headermap {
    z-index: -999!important
}

.wheel {
    width: 20px;
    height: auto;
    right: 40px;
    bottom: 0;
    z-index: 10
}

.wheel.white {
    -webkit-filter: brightness(800%);
    filter: brightness(800%)
}

.wheel span {
    left: -25px;
    bottom: 100px
}

.wheel span::after {
    content: "scroll";
    position: absolute;
    font-size: 16px;
    color: #666;
    font-weight: 500;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    letter-spacing: 5px
}

.wheel.show::after {
    content: "";
    bottom: -10px;
    left: 10px;
    width: 1px;
    height: 60px;
    background-color: #aaa
}

.wheel.show span,
.wheel.show::after {
    -webkit-animation: trackBallSlide 3s linear infinite;
    animation: trackBallSlide 3s linear infinite
}

.map-background {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    background-position: top center;
    background-size: contain
}

.map-background img {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0
}

.map-background canvas {
    width: 2000px;
    height: 1125px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    display: block;
    opacity: 1
}

.img-moving {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    cursor: url(../images/hand.html) 6 8, move;
    -moz-user-select: -moz-none
}

.img-moving img {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    position: absolute;
    top: 0;
    left: 0
}

#contact-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 110000;
    width: 82px;
    height: 82px;
    margin: -41px 0 0 -41px;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    animation: Rotate 2.5s linear infinite;
    -webkit-animation: Rotate 2.5s linear infinite;
    display: none
}

.contact-success,
.register-success {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -150px;
    padding: 20px;
    font-size: 15px;
    line-height: 1.6;
    width: 300px;
    height: auto;
    background-color: #c30004;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-align: center;
    z-index: 99999;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .5)
}

.color-red {
    background-color: #d00;
    color: #fff
}

.color-blue {
    background-color: #09347a;
    color: #fff
}

.inputContainer {
    position: relative;
    float: left
}

.formError {
    position: absolute;
    top: -30px;
    left: 20px;
    display: block;
    cursor: pointer;
    z-index: 5000
}

.formErrorContent {
    background-color: rgba(209, 0, 8, .8);
    position: relative;
    display: inline-block;
    color: #fff;
    width: auto;
    height: auto;
    max-width: 250px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    padding: 8px 12px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    z-index: 5001
}

.formErrorContent::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 7px 0;
    border-color: rgba(209, 0, 8, .8) transparent transparent
}

.greenPopup .formErrorContent {
    background-color: #008c44
}

.blackPopup .formErrorContent {
    background-color: #393939;
    color: #fff
}

.ajaxSubmit {
    padding: 20px;
    background-color: #008c44;
    display: none
}

.new-icon {
    background: url(../images/new.png) no-repeat;
    width: 60px;
    height: 40px;
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 4
}

.option-02 .new-icon {
    top: 20px;
    left: 70px
}

.list-news-icon {
    top: 25px;
    left: 10px
}

.upload_target {
    width: 1px;
    height: 0;
    border: 0 solid #fff;
    opacity: 0;
    overflow: hidden;
    z-index: -99999;
    position: absolute;
    left: -999999px;
    top: -999999px
}

.data-updating {
    margin: 20px 0;
    text-align: center
}

.career-educate {
    width: 100%;
    margin: 5% auto
}

.career-educate .item-resize {
    min-height: 50px
}

.career-educate .item-resize .date {
    width: auto;
    font-size: 30px;
    height: auto;
    color: rgba(229, 27, 36, 1);
    max-width: 60px
}

.career-educate .item-resize:hover .date {
    color: #666
}

.career-educate .item-resize .news-txt {
    left: 60px;
    width: calc(100% - 60px);
    max-height: none
}

.career-educate::after {
    background: 0 0
}

.popup-home {
    overflow: hidden!important;
    opacity: 0
}

.popup-home img {
    width: 100%;
    height: auto;
    display: block
}

.popup-home.details-content:after,
.popup-home.details-content:before {
    display: inline-block
}

.popup-home.details-content {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 3000;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    margin: 0
}

.popup-home.details-content::after,
.popup-home.details-content::before {
    content: '';
    position: relative;
    display: inline-block;
    width: auto;
    height: 100%;
    vertical-align: middle
}

.popup-home.details-content>span {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1
}

.popup-home .details-center {
    min-height: 0;
    font-family: Montserrat, sans-serif;
    position: relative;
    display: inline-block;
    width: 90%;
    height: auto;
    vertical-align: middle;
    max-width: 1000px;
    padding: 0;
    margin: 0 auto;
    z-index: 5;
    background-color: #fff;
    opacity: 0
}

.popup-home.details-content .close-popup {
    top: 30px;
    right: 30px;
    position: fixed;
    margin: 0
}

@media screen and (max-width:1600px) {
    body.auto .social-top {
        height: calc(100vh - 130px)
    }
    .sub-nav li a {
        font-size: 14px;
letter-spacing:1px;
    }
    .outer-nav.second .sub-nav li a {
        font-size: 12px
    }
    .content-left,
    .content-right {
        padding: 5%
    }
}

@media screen and (max-width:1500px) {
    .group-central[data-name=news-home] .box-intro {
        max-width: 800px
    }
    .project-box,
    .project-home {
        max-width: 800px;
        margin: 0 15% 0 auto
    }
    .all-logo {
        margin: 10px auto auto 5%
    }
}

@media screen and (max-width:1300px) {
    .news-item {
        padding: 14px;
        margin: 5px
    }
    .news-txt {
        height: 68px
    }
    .news-pic {
        min-height: inherit;
        height: 180px
    }
    .news-txt h3 {
        font-size: 13px
    }
    .news-item .date {
        bottom: 15px
    }
    .news-item:nth-child(1) {
        margin: 0 0 4px 6px
    }
    .news-item:nth-child(2) {
        margin: 0 0 6px 12px;
        height: 193px
    }
    .news-item:nth-child(3) {
        margin: 4px 0 4px 12px;
        height: 193px
    }
    .news-item:nth-child(2) .news-txt,
    .news-item:nth-child(3) .news-txt {
        height: 170px
    }
    .news-item:nth-child(1) .news-txt {
        padding: 10px 0 0 60px;
        height: 68px
    }
    .option-02 .news-item {
        width: 32%;
        max-width: inherit;
        margin: 0 5px 10px
    }
    .option-02 .news-item:nth-child(1),
    .option-02 .news-item:nth-child(2),
    .option-02 .news-item:nth-child(3) {
        margin: 0 5px 10px
    }
    .option-02 .news-txt {
        height: 65px
    }
    .option-02 .news-item:nth-child(1) .news-pic,
    .option-02 .news-item:nth-child(2) .news-pic,
    .option-02 .news-item:nth-child(3) .news-pic {
        height: 180px
    }
    .option-02 .news-item:nth-child(1) .news-txt,
    .option-02 .news-item:nth-child(2) .news-txt,
    .option-02 .news-item:nth-child(3) .news-txt,
    .option-03 .news-txt {
        height: 65px
    }
    .option-03 .news-item:nth-child(1) .news-pic,
    .option-03 .news-item:nth-child(2) .news-pic,
    .option-03 .news-item:nth-child(3) .news-pic {
        height: 180px
    }
    .option-03 .news-item:nth-child(1) .news-txt,
    .option-03 .news-item:nth-child(2) .news-txt,
    .option-03 .news-item:nth-child(3) .news-txt {
        height: 65px
    }
}

@media screen and (max-width:1100px) {
    .bg-menu,
    .bg-scene,
    .box-nav,
    .logo-menu,
    .social-top,
    .wheel,
    body.auto .logo-bottom {
        display: none
    }
    .copyright,
    .copyright a {
        color: #eee
    }
    .album-pic-center img,
    .full img {
        max-height: inherit
    }
    .details-content,
    .details-text table,
    .sub-nav {
        -webkit-overflow-scrolling: touch
    }
    #home-page .slide-mask,
    .zoom {
        opacity: 1
    }
    .box-logo,
    .box-news,
    .link-page,
    .manager {
        vertical-align: top
    }
    .career-list,
    .career-title a,
    .link-text h3,
    .news-txt h3 {
        font-family: Arial, Helvetica, sans-serif
    }
    .content-wrap {
        width: 100%
    }
    .container {
        margin: 70px 0 0
    }
    body.auto .title-page {
        position: absolute;
        left: 0;
        top: 20px;
        background-image: none
    }
    body.auto .title-page h1 {
        padding: 0 0 0 30px
    }
    body.auto .title-page h1::before {
        width: 20px;
        left: 0
    }
    .box-content,
    .footer {
        left: auto;
        position: relative
    }
    body.auto .bottom-text {
        background-color: transparent
    }
    body.auto .footer {
        background-image: none;
        background-color: #09347a
    }
    .navigation.show {
        overflow-y: auto;
        width: 100%;
        height: calc(100vh - 70px)
    }
    .navigation.show .nav li {
        -webkit-animation-name: goLeft;
        animation-name: goLeft;
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards
    }
    .footer {
        bottom: auto;
        background-color: #09347a;
        float: left
    }
    .social {
        margin: 20px 0
    }
    .social.display-none {
        display: block!important
    }
    .bottom-text,
    .bottom-text.internal {
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, .5);
        margin: 0
    }
    .copyright {
        width: 90%;
        text-align: center;
        margin: auto
    }
    .outer-nav.second.fixed .sub-nav,
    .sub-nav {
        width: 100%
    }
    .sub-nav {
        height: auto;
        overflow-y: hidden;
        overflow-x: auto
    }
    .details-content,
    .full.lock {
        overflow-x: hidden
    }
    .sub-nav>* {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    .sub-nav ul::after {
        display: none
    }
    .box-content,
    .close-pics-small,
    .colum-box {
        display: block
    }
    .sub-nav li a {
        font-size: 12px;
        padding: 15px
    }
    .outer-nav:not(.second) {
        margin: 0
    }
    .outer-nav.second.fixed {
        top: 70px;
        background-color: rgba(9, 52, 122, .5)
    }
    .go-top {
        background-color: rgb(0, 0, 0, .3);
        right: 20px
    }
    .go-top::before {
        border-color: rgb(0, 0, 0, .3)
    }
    .go-top.show {
        bottom: 30px
    }
    .box-content {
        height: auto;
        top: auto;
        width: auto
    }
    .colum-box {
        position: relative;
        height: auto;
        width: 100%;
        float: left;
        margin: 0;
        padding: 0
    }
    .full img {
        max-width: 100%
    }
    .all-pics .text-length h3 {
        font-size: 13px
    }
    .allvideo {
        top: 0;
        z-index: 5000
    }
    .overlay-video.show {
        height: 100%
    }
    .slide-pic-nav {
        top: auto;
        margin-top: 0;
        bottom: 60px;
        left: 0
    }
    .album-pic-center .pic-name h3 {
        font-size: 14px;
        padding: 10px
    }
    .thumb-content {
        bottom: 60px
    }
    .gallery-thumbs .item-container {
        width: 80px;
        height: 50px
    }
    .close,
    .close-album,
    .close-box .close-popup,
    .close-map,
    .close-popup,
    .close-video,
    .zoom {
        width: 40px;
        height: 40px;
        right: 10px;
        top: 10px
    }
    .thumb-box {
        position: relative;
        bottom: auto;
        left: auto
    }
    .zoom {
        box-shadow: none;
        background-color: rgba(0, 0, 0, .3)
    }
    .player,
    .view-album {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
    .title-page h1,
    .title-rotate>h2 {
        -webkit-transform: none;
        bottom: auto
    }
    .close-pics {
        display: none
    }
    .close-news {
        display: none!important
    }
    .title-page,
    .title-rotate {
        top: auto;
        position: relative;
        height: auto
    }
    .desktop {
        display: none
    }
    .mobile {
        display: block;
        pointer-events: auto
    }
    img.desktop {
        display: none
    }
    .title-rotate,
    img.mobile {
        display: block
    }
    .title-page {
        width: 100%;
        left: auto;
        padding: 30px 0;
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%)
    }
    .title-page h1 {
        position: relative;
        right: auto;
        transform: none;
        font-size: calc(100vw/20);
        color: #fff
    }
    .title-page h1::before {
        left: 0;
        width: 20px
    }
    .title-rotate {
        width: 100%;
        left: auto;
        margin: 30px 0
    }
    .details-content::after,
    .details-content::before,
    .print-but,
    .save-but,
    .share-but::before {
        display: none
    }
    .title-rotate>h2 {
        position: relative;
        right: auto;
        transform: none;
        font-size: calc(100vw/10);
        padding: 0 0 0 30px
    }
    .title-rotate>h2::before {
        width: 20px;
        left: 0
    }
    .login-box {
        margin: 20px 0;
        max-width: 500px;
        padding: 20px
    }
    .login-box h2 {
        font-size: 18px
    }
    #internal-page {
        min-height: inherit
    }
    #internal-page .title-page h1 {
        bottom: auto;
        right: auto;
        left: auto;
        position: relative;
        font-size: calc(100vw/20);
        color: #fff
    }
    .group-central[data-name=service-home] .title-rotate>h2,
    .group-central[data-name=news-home] .title-rotate>h2 {
        color: rgba(255, 255, 255, .3)
    }
    #internal-page .input-text {
        width: 100%;
        margin: 10px 0
    }
    #internal-page .content-main {
        background: url(../images/pattern.png)
    }
    .bg-cover,
    .bg-fixed,
    .box-cover {
        background-attachment: scroll
    }
    .share-but {
        height: auto;
        line-height: inherit;
        padding: 0 0 10px
    }
    .share-item {
        position: relative;
        right: auto;
        bottom: auto;
        height: auto
    }
    .share-item ul {
        text-align: center;
        padding: 0
    }
    .share-item li {
        -webkit-transform: none;
        transform: none;
        left: auto;
        opacity: 1
    }
    .details-content {
        overflow-y: auto!important
    }
    .details-center {
        width: 94%;
        margin: 20px 0
    }
    .details-center h2 {
        font-size: calc(100vw/32);
        font-weight: 700
    }
    .details-center h3 {
        font-size: calc(100vw/36);
        font-weight: 700
    }
    .details-outer {
        padding: 20px
    }
    .details-text {
        padding: 10px 0
    }
    .details-text h3 {
        font-size: 16px
    }
    .details-text p,
    .details-text table tbody:only-child tr:first-child td,
    .details-text table thead td,
    .details-text table thead th {
        font-size: 14px
    }
    .details-text table {
        display: block;
        min-width: inherit;
        overflow-y: hidden;
        overflow-x: auto
    }
    .box-slider,
    .content-main,
    .group-central,
    .service-home .slide-wrapper-outer {
        overflow: visible
    }
    .details-text table td,
    .details-text table th {
        font-size: 15px;
        padding: 8px 10px;
        font-weight: 400
    }
    .download-but {
        padding: 0 0 30px
    }
    .download-but a::after {
        width: 30px;
        height: 30px;
        top: 15px
    }
    .details-center .download-but span {
        font-size: 14px;
        font-weight: 400
    }
    .details-center .download-but h3 {
        font-size: 18px
    }
    .zoom-control {
        display: none
    }
    .close-map {
        width: 40px;
        height: 40px
    }
    .all-service,
    .group-central {
        width: 100%;
        position: relative;
        text-align: center
    }
    .is-IOS .gm-style button {
        display: none!important
    }
    .box-slider {
        height: auto;
        position: relative;
        left: auto;
        top: auto
    }
    .group-central {
        height: auto;
        left: auto;
        top: auto;
        display: block;
        float: left;
        -webkit-transform: translate(0, 0)!important;
        transform: translate(0, 0)!important;
        z-index: auto!important
    }
    .bg-cover,
    .box-cover {
        position: relative;
        left: auto;
        top: auto;
        max-height: 350px
    }
    .box-cover::after {
        display: none
    }
    body.auto .slide-mask .slide-pagination {
        bottom: 10px
    }
    .slogan {
        margin: 40px 0
    }
    .slogan h2 {
        font-size: calc(100vw/25)
    }
    .content-main {
        position: relative;
        height: auto;
        display: block;
        top: auto;
        left: auto
    }
    .content-main::after,
    .content-main::before {
        display: none
    }
    .box-intro {
        margin: auto;
        display: block
    }
    .all-service::before,
    .box-service-home .hover,
    .box-service-home.blank,
    .logo-center {
        display: none
    }
    .group-central[data-name=service-home] {
       /* background: #000 url(../images/pattern.png);*/
        background: #000;
    }
    .group-central[data-name=service-home] .box-intro {
        height: auto
    }
    .all-service {
        max-width: inherit;
        bottom: auto;
        right: auto;
        margin: 50px 0
    }
    .service-home {
        width: 55vw;
        margin: 30px auto
    }
    .service-home .slide-item {
        opacity: .5;
        pointer-events: none;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }
    .service-home .slide-item.center {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        z-index: 10
    }
    .box-service-home {
        width: auto;
        height: auto;
        margin: 10px 0 30px
    }
    .box-service-home a span {
        display: block
    }
    .box-service-home a {
        width: 100%;
        height: auto;
        position: relative;
        left: auto;
        top: auto;
        margin: 10px 0;
        display: block
    }
    .box-service-home a::after,
    .box-service-home a::before,
    {
        display: none
    }
    .box-service-home h3 {
        font-size: calc(100vw/28);
        margin: 20px 0 0
    }
    .box-service-home:not(.blank) {
        cursor: default
    }
    .pic-service-home {
        height: 40vw;
        width: 40vw;
        display: block;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        margin: auto
    }
    .pic-service-home::before {
        content: '';
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        position: absolute;
        left: -10px;
        top: -10px;
        border: 1px solid #aaa;
        -webkit-border-radius: 50%;
        border-radius: 50%
    }
    .group-central[data-name=project-home] {
        background: url(../images/pattern.png)
    }
    .box-project-home {
        display: block;
        width: 100%;
        height: auto;
        margin: 0
    }
    .box-project-home::before {
        display: none
    }
    .project-home {
        max-width: 700px;
        margin: 0 auto
    }
    .pic-project-home {
        position: relative;
        width: 100%;
        height: auto;
        max-width: inherit;
        display: block
    }
    #home-page .date,
    .go-inner,
    .text-project {
        display: inline-block
    }
    .text-project {
        width: 80%;
        max-width: inherit;
        margin: -50px 0 20px;
        text-align: center
    }
    .text-project h3 {
        font-size: calc(100vw/22)
    }
    .go-inner {
        font-size: 13px;
        padding: 10px 15px
    }
    .go-inner::after {
        height: 100%;
        width: 100%;
        background-color: #e51b24;
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        z-index: -1
    }
    #home-page .date {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        font-size: 24px;
        font-weight: 300
    }
    .group-central[data-name=news-home] {
        background-color: #8ca6cf
    }
    .group-central[data-name=news-home] .content-main {
        text-align: center
    }
    .group-central[data-name=news-home] .box-intro {
        width: 90%;
        margin: 0 auto 30px
    }
    .group-central[data-name=news-home] .box-intro::before {
        display: none
    }
    .box-news {
        display: inline-block;
        float: none
    }
    .colum-text {
        top: auto;
        bottom: 0;
        max-width: 300px
    }
    .colum-text::before {
        display: none
    }
    .colum-text h3 {
        font-size: 14px;
        padding: 10px 20px;
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, .8), rgba(229, 27, 36, .8));
        background: linear-gradient(45deg, rgba(9, 52, 122, .8), rgba(229, 27, 36, .8))
    }
    .box-news:nth-child(1),
    .box-news:nth-child(2),
    .box-news:nth-child(3) {
        width: calc(33% - 5px);
        height: calc(100vh/1.5);
        max-height: 300px;
        margin: 0
    }
    #home-page .partner,
    .partner {
        width: 90%;
        max-width: inherit
    }
    .box-logo {
        width: 200px;
        max-width: calc(50% - 20px);
        margin: 10px 6px
    }
    .box-logo h3 {
        font-size: 15px;
        color: #444;
        text-shadow: none
    }
    .pic-logo img {
        max-height: 130px
    }
    .view-all {
        margin: 10px 0 30px
    }
    .company-text {
        width: 80%;
        display: block;
        margin: 2px 0 30px;
        text-align: center;
        padding: 30px 20px
    }
    .company-text h3 {
        font-size: calc(100vw/25)
    }
    .map-box,
    .map-box.show {
        position: relative;
        width: 100%;
        max-width: inherit;
        height: 70vh;
        max-height: 500px;
        display: block;
        margin: 0;
        left: auto;
        top: auto;
        box-shadow: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transition: none;
        transition: none;
        z-index: auto
    }
    .content-map-box {
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transition: none;
        transition: none
    }
    .content-career::after,
    .content-center::after,
    .content-right::after,
    .full-map {
        display: none
    }
    .content-page[data-post=overview] {
        padding: 0
    }
    .content-overview {
        width: 100%;
        padding: 30px 0;
        background: url(../images/pattern.png);
        max-width: inherit
    }
    .content-overview .box-text {
        max-width: 600px;
        padding: 20px 5%
    }
    .content-history {
        padding: 30px 0
    }
    .content-history>h2::after,
    .content-history>h2::before {
        content: '';
        width: 30%
    }
    .item-history {
        width: 100%;
        padding: 0 20px;
        margin: 0 0 10px;
        max-width: inherit
    }
    .item-history h3 {
        font-size: calc(100vw/32)
    }
    .item-history p {
        font-size: 15px
    }
    .item-history::after {
        height: 30px;
        margin: 10px auto
    }
    .content-value {
        width: 100%;
        max-width: 600px;
        height: auto;
        padding: 30px 5%
    }
    .value {
        padding: 20px;
        margin: 0 0 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px
    }
    .value::before {
        -webkit-border-radius: 25px;
        border-radius: 25px
    }
    .value h3 {
        font-size: calc(100vw/32)
    }
    .value p {
        font-size: 15px
    }
    .content-page[data-post=info] .content-center {
        width: 100%;
        padding: 30px 5%;
        max-width: inherit
    }
    .content-page[data-post=info] .box-text {
        max-width: 600px;
        padding: 20px 5%
    }
    .img-chart {
        width: 100%;
        margin: 0;
        padding: 30px 5%
    }
    .img-chart .zoom {
        display: block
    }
    .content-page[data-post=manager] {
        padding: 30px 0 0;
        text-align: center
    }
    .content-page[data-post=manager]::before {
        height: 10px;
        top: -10px
    }
    .content-page[data-post=manager]::after {
        display: none
    }
    .content-page[data-post=manager] .content-left,
    .content-page[data-post=manager] .content-right {
        width: 100%;
        max-width: inherit;
        margin: 0
    }
    .content-page[data-post=manager] .content-left {
        padding: 30px 5%
    }
    .content-page[data-post=manager] .content-right {
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        padding: 30px 5%
    }
    .content-manager>h3 {
        position: relative;
        width: 100%;
        display: block;
        text-align: center;
        left: auto;
        top: auto;
        margin: 0 0 20px;
        -webkit-transform: none;
        transform: none;
        font-size: calc(100vw/32)
    }
    .manager {
        width: 48%;
        display: inline-block;
        margin: 0 0 20px;
        padding: 0
    }
    .chairman {
        display: block;
        margin: 20px auto
    }
    .content-page[data-post=manager] .content-right .content-manager>h3 {
        color: #fff
    }
    .thumb {
        width: 180px;
        height: 180px;
        margin: 0 0 10px
    }
    .title-name {
        width: 100%;
        height: auto;
        position: relative;
        display: block
    }
    .title-name.align-left {
        text-align: center
    }
    .title-name>h3 {
        font-size: 15px
    }
    .title-name>p {
        font-size: 13px
    }
    .content-info {
        max-width: 90%
    }
    .content-info .title-name>p {
        padding: 0 40px 0 0
    }
    .content-page[data-post=resource] {
        background: url(../images/pattern.png)
    }
    .content-page[data-post=resource] .content-center {
        background-color: transparent;
        color: #444
    }
    .content-page[data-post=resource] .content-center>h2 {
        color: #041e56
    }
    .content-page[data-post=resource] .box-text {
        display: block;
        width: 100%;
        max-width: 600px;
        padding: 30px
    }
    .chart-box {
        max-width: 90%;
        margin: 30px 0
    }
    .chart-box svg {
        width: calc(100vw/2.5);
        height: calc(100vw/2.5);
        min-width: 280px;
        min-height: 280px
    }
    .info-chart span {
        width: 20px;
        height: 20px
    }
    .info-chart p {
        font-size: 15px
    }
    .content-page[data-post=policy] .content-center {
        width: 100%;
        color: #444;
        padding: 0 5% 30px;
        max-width: inherit
    }
    .content-page[data-post=policy] .box-text {
        padding: 30px;
        width: 100%;
        max-width: 600px;
        background-color: #fff;
        margin: 30px auto 0
    }
    .content-page[data-post=achievement],
    .content-page[data-post=document] .content-column:nth-child(1),
    .content-page[data-post=document] .content-column:nth-child(2) {
        padding: 30px 0
    }
    .box-library-pdf,
    .pic-library {
        background-color: rgba(255, 255, 255, .3)
    }
    .content-page[data-post=policy] .content-column h2 {
        text-shadow: none;
        top: -80px;
        margin: 0;
        position: absolute;
        left: 0
    }
    .slide-award {
        width: 100%;
        margin: 10px 0
    }
    .item-award h3 {
        font-size: 13px
    }
    .title-video h3 {
        padding: 10px;
        font-size: 14px
    }
    .video-center {
        width: 96%;
        max-width: inherit
    }
    .item-video,
    .video-center {
        height: calc(1125/2000 * 96vw)
    }
    .video-center .slide-buttons {
        display: none
    }
    .thumbs-video .slide-buttons {
        margin: -25px 0 0
    }
    .pic-center {
        display: block;
        width: 90%;
        max-width: inherit;
        margin: 20px auto;
        opacity: 1
    }
    .bg-cover.pattern,
    .pic-center .slide-buttons {
        display: none
    }
    .box-library-pdf {
        width: 300px;
        height: 300px;
        margin: 0 auto 20px
    }
    .library-thumb {
        width: 96%;
        max-width: inherit
    }
    .pic-library {
        height: 250px
    }
    #recruitment-page .content-right,
    .content-small {
        background: url(../images/pattern.png)
    }
    .title-pdf h3,
    .title-pic h3 {
        font-size: 13px
    }
    .pic-center.video-slide .slide-wrapper-outer {
        padding: 20px 0 0
    }
    .content-small {
        margin: 0;
        max-width: inherit;
        width: 100%;
        padding: 20px
    }
    .content-center {
        margin: 0;
        width: 100%;
        padding: 30px 5%;
        background-image: none;
        background-color: #09347a;
        box-shadow: none;
        color: #fff
    }
    .content-career {
        margin: -50px 0 30px;
        width: 90%;
        padding: 30px 5%;
        text-align: center;
        display: inline-block;
        background-color: #fff;
        z-index: 2
    }
    .content-recruitment {
        width: 100%;
        padding: 20px 5%;
        margin: 0;
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        color: #fff;
        max-width: inherit
    }
    .content-career::after {
        display: none
    }
    .content-left {
        float: none;
        width: 100%;
        padding: 30px 5%;
        margin: 0
    }
    .content-right {
        float: right;
        padding: 30px 5%;
        z-index: 2
    }
    .content-right::after {
        left: -30%
    }
    .content-column h2 {
        font-size: calc(100vw/28);
        display: inline-block;
        padding: 0 5%;
        font-weight: 700
    }
    .career-form,
    .load-data::before {
        display: none
    }
    .content-left>h2 {
        color: #fff;
        left: 0;
        top: -80px;
        position: absolute;
        text-align: center
    }
    .content-small>h2 {
        color: #fff;
        left: 0;
        top: -160px;
        position: absolute
    }
    .content-center>h2,
    .content-recruitment>h2 {
        color: #fff
    }
    .text-box {
        padding: 20px;
        margin: -50px 0 50px;
        box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
        background-color: #fff
    }
    .content-small .box-text {
        margin: 0
    }
    .content-career p {
        text-align: justify
    }
    .pic-length {
        width: 100%;
        float: none;
        max-height: 150px
    }
    .pic-length::after {
        content: '';
        width: 100%;
        height: 150px;
        position: absolute;
        left: 0;
        top: 0;
        background: url(../images/overlay.png);
        opacity: .3
    }
    .content-column .bg-cover::after {
        background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
        background: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
        mix-blend-mode: inherit
    }
    .box-text li,
    .box-text p {
        font-size: 15px
    }
    .career-list {
        width: 96%;
        padding: 10px;
        margin: 30px auto 50px
    }
    .head-list th[scope=Number] {
        width: 40px
    }
    .head-list th[scope=Quantity] {
        width: 70px
    }
    .head-list th[scope=Location] {
        width: 150px
    }
    .head-list th[scope=Status],
    .head-list th[scope=Expire] {
        width: 100px
    }
    .career-list td:nth-child(2),
    .head-list th:nth-child(2) {
        text-align: left
    }
    .career-list table td,
    .head-list th {
        font-size: 13px;
        padding: 10px
    }
    .career-title a {
        font-size: 14px;
        font-weight: 700
    }
    #service-page .content-center {
        width: 100%;
        max-width: inherit
    }
    #service-page .content-page[data-post=group-03] .content-center,
    #service-page .content-page[data-post=group-01] .content-center {
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%)
    }
    #service-page .content-page[data-post=group-05] .content-center {
        background: url(../images/pattern.png);
        color: #444
    }
    #service-page .content-page.content-page-other .content-center>h2,
    #service-page .content-page[data-post=group-02] .content-center>h2,
    #service-page .content-page[data-post=group-03] .content-center>h2,
    #service-page .content-page[data-post=group-05] .content-center>h2 {
        left: 0;
        top: -80px;
        position: absolute
    }
    #service-page .content-page .box-text {
        padding: 30px 5%
    }
    #service-page .content-page.content-page-other .box-text,
    #service-page .content-page[data-post=group-02] .box-text,
    #service-page .content-page[data-post=group-03] .box-text,
    #service-page .content-page[data-post=group-05] .box-text {
        background-color: transparent;
        margin: 0;
        box-shadow: none
    }
    .content-page[data-post=faq] .content-column,
    .content-page[data-post=consulting] .content-column {
        padding: 30px 0 0
    }
    .content-page[data-post=consulting] .content-column h2 {
        margin: 0 0 20px
    }
    .content-page[data-post=consulting] .slide-news {
        width: 90%;
        padding: 0 0 20px
    }
    .content-page[data-post=consulting] .box-text {
        padding: 0;
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%)
    }
    .content-page[data-post=consulting] .box-text>h3 {
        font-size: calc(100vw/30);
        margin: -80px 0 60px
    }
    .faq-content {
        width: 94%;
        margin: auto;
        max-width: 700px
    }
    .answer {
        font-size: 22px
    }
    .faq-title {
        padding: 10px 0
    }
    .faq-num {
        font-size: 24px;
        font-weight: 300
    }
    .faq-detail {
        padding: 20px
    }
    .faq-title h3 {
        padding: 0;
        width: calc(100% - 60px)
    }
    .faq-detail li,
    .faq-detail p,
    .faq-title h3 {
        font-size: 14px
    }
    .faq-item .box-date {
        position: absolute;
        left: 70px;
        top: 0;
        padding: 5px 10px;
        width: auto;
        -webkit-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px
    }
    .news-item .date,
    .news-item:nth-child(2) .date,
    .news-item:nth-child(3) .date {
        bottom: auto;
        left: 0;
        top: 0
    }
    .text-box h3 {
        font-size: 15px
    }
    .text-box span {
        font-size: 14px
    }
    .form-box {
        width: 94%;
        padding: 20px;
        max-width: 700px
    }
    .news-list {
        width: 96%;
        margin: 30px auto;
        text-align: center
    }
    .news-item {
        padding: 14px;
        margin: 7px .5%
    }
    .news-txt {
        height: 68px;
        padding: 10px 0
    }
    .news-pic {
        min-height: inherit;
        height: 160px
    }
    .news-txt h3 {
        font-size: 13px
    }
    .news-item .date {
        font-size: 24px;
        font-weight: 300
    }
    .news-item:nth-child(1) {
        margin: 0 0 5px 6px
    }
    .news-item:nth-child(2) {
        margin: 0 0 12px 12px;
        height: 146px
    }
    .news-item:nth-child(3) {
        margin: 0 0 5px 12px;
        height: 146px
    }
    .news-item:nth-child(2) .news-txt,
    .news-item:nth-child(3) .news-txt {
        height: 100%;
        padding: 10px
    }
    .news-item:nth-child(1) .news-pic {
        height: 208px

    }
    .news-item:nth-child(1) .news-txt {
        padding: 10px 0;
        height: 68px
    }
    .option-02 .news-item,
    .option-02 .news-item:nth-child(1),
    .option-02 .news-item:nth-child(2),
    .option-02 .news-item:nth-child(3) {
        margin: 0 3px 10px
    }
    .option-02 .news-item:nth-child(1) .news-pic,
    .option-02 .news-item:nth-child(2) .news-pic,
    .option-02 .news-item:nth-child(3) .news-pic {
        height: 160px
    }
    .option-02 .news-item:nth-child(1) .news-txt,
    .option-02 .news-item:nth-child(2) .news-txt,
    .option-02 .news-item:nth-child(3) .news-txt {
        height: 65px
    }
    .option-03 .news-item {
        width: 32%
    }
    .option-03 .news-item:nth-child(1) .news-pic,
    .option-03 .news-item:nth-child(2) .news-pic,
    .option-03 .news-item:nth-child(3) .news-pic {
        height: 160px
    }
    .option-03 .news-item:nth-child(1) .news-txt,
    .option-03 .news-item:nth-child(2) .news-txt,
    .option-03 .news-item:nth-child(3) .news-txt {
        height: 65px
    }
    .content-page.list {
        background-image: none;
        background-color: #aaa
    }
    .load-details {
        margin: 0
    }
    .load-content {
        padding: 0
    }
    .load-title {
        margin: auto
    }
    .news-detail {
        padding-top: 30px
    }
    .link-page {
        padding: 10px;
        width: 240px;
        height: 90px;
        -webkit-transition: none;
        transition: none;
        display: inline-block;
        margin: 0 2px
    }
    .link-page .date {
        left: auto;
        right: 0
    }
    .link-page:first-child {
        margin: 0 2px 0 10px
    }
    .link-page:last-child {
        margin: 0 10px 0 2px
    }
    .pic-thumb {
        width: 40%
    }
    .pic-thumb img {
        height: 68px
    }
    .link-text {
        line-height: 70px
    }
    .link-text h3 {
        font-size: 12px;
        font-weight: 400;
        max-height: 63px;
        padding: 15px 0 0
    }
    .scroll-slide {
        -webkit-overflow-scrolling: touch;
        padding: 10px 0;
        box-shadow: none;
        overflow-y: hidden;
        overflow-x: auto
    }
    .scroll-slide>* {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    .scroll-slide.at-bottom {
        display: none
    }
    .news-link {
        width: 100%;
        white-space: nowrap;
        max-width: inherit
    }
    .load-text,
    .print {
        width: 96%;
        margin: auto
    }
    .load-text p {
        font-size: 15px
    }
    .load-text table td,
    .load-text table th {
        font-size: 15px;
        padding: 8px 10px;
        font-weight: 400
    }
    .load-text {
        padding: 20px
    }
    .print {
        z-index: 2
    }
    .load-text iframe {
        max-height: calc(100vw / 1.77)
    }
    .content-page[data-post=intro] .pic-length,
    .pic-location,
    .pic-project-box {
        max-height: calc(1125/2000 * 100vw)
    }
    .load-details .date {
        margin: 0 0 0 2%
    }
    .text-slide {
        margin: 0;
        position: absolute;
        left: 0;
        top: -100px
    }
    .text-slide h2 {
        font-size: calc(100vw/15);
        color: #fff;
        text-shadow: 0 5px 10px rgba(0, 0, 0, .1);
        background-image: none;
        -webkit-background-clip: inherit;
        -webkit-text-fill-color: inherit
    }
    .all-logo {
        margin: 10px 0
    }
    #project-page .text-slide {
        position: relative;
        left: auto;
        top: auto;
        margin: 20px 0
    }
    #project-page .text-slide h2 {
        color: #666;
        box-shadow: none;
        font-size: calc(100vw/28)
    }
    .content-slide {
        width: 100%;
        height: auto;
        margin: 0;
        display: block
    }
    .project-box {
        width: 90%;
        max-width: 700px;
        margin: auto
    }
    .project-box .text-project {
        width: 80%;
        max-width: inherit;
        display: inline-block;
        margin: -50px 0 20px;
        text-align: center
    }
    .project-box .text-project::before {
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        left: -5px;
        top: -5px;
        box-shadow: none
    }
    .box-project-box::before {
        display: none
    }
    .pic-project-box {
        width: 100%;
        height: auto;
        max-width: inherit;
        display: block;
        margin: 0
    }
    #project-details-page .content-column>h2::after,
    #project-details-page .content-column>h2::before,
    .content-page[data-post=intro] .pic-length::after,
    .project-box .slide-buttons {
        display: none
    }
    .project-box .slide-wrapper-outer {
        overflow: hidden
    }
    .project-box .slide-item {
        opacity: 1;
        pointer-events: none;
        -webkit-filter: none;
        filter: none;
        -webkit-transform: none;
        transform: none;
        -webkit-transition: none;
        transition: none
    }
    .project-box .slide-item.prev-item {
        opacity: 1
    }
    .project-box .slide-pagination {
        margin: 10px auto 30px
    }
    #project-details-page .bg-inner {
        height: calc(1125/2000 * 100vw)
    }
    #project-details-page .content-column>h2 {
        margin: 20px 0
    }
    body.auto #project-details-page .title-page h1 {
        font-size: calc(100vw/30)
    }
    .tilte-project h2 {
        font-size: calc(100vw/20)
    }
    .logo-project {
        width: 150px;
        margin: 30px auto 0;
        -webkit-border-radius: 15px;
        border-radius: 15px
    }
    #contact-page .box-cover,
    .item-resize .news-txt {
        max-height: inherit
    }
    .pic-location .zoom {
        display: block
    }
    .content-page[data-post=location] .content-center {
        max-width: inherit;
        margin: 0
    }
    .content-page[data-post=location] .box-text {
        padding: 0;
        background-color: transparent;
        background-image: none
    }
    .faci-slide {
        width: calc(100%/2)
    }
    .faci-slide.only-one {
        width: 80%
    }
    .faci-slide .item {
        width: 100%;
        height: calc(800/2000 * 100vw)
    }
    .faci-slide .item img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 0;
        pointer-events: none
    }
    .faci-slide .item h3,
    .product-slide .item h3 {
        font-size: 13px;
        max-width: inherit;
        text-align: center;
        width: 100%
    }
    .faci-slide .slide-item {
        pointer-events: none;
        opacity: .2;
        -webkit-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out
    }
    .faci-slide .slide-item:not(.center) .zoom {
        opacity: 0;
        pointer-events: none
    }
    .faci-slide .slide-item.center,
    .faci-slide .slide-item.center .zoom {
        pointer-events: auto;
        opacity: 1
    }
    .product-slide {
        width: calc(100%/2)
    }
    .product-slide.only-one {
        width: 80%
    }
    .product-slide .item {
        width: 100%;
        height: calc(800/2000 * 100vw)
    }
    .product-slide img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 0;
        pointer-events: none
    }
    .product-slide .slide-item {
        opacity: .2;
        -webkit-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out
    }
    .item-resize {
        padding: 5px;
        min-height: 250px;
        max-width: 400px
    }
    .item-resize .news-pic {
        height: 150px
    }
    .slide-news {
        margin: 0 auto
    }
    .content-page[data-post=library] .pic-center {
        margin: 20px auto
    }
    .project-bottom .go-back {
        font-size: 14px;
        padding: 15px;
        -webkit-border-radius: 25px;
        border-radius: 25px
    }
    .project-bottom .go-back::before {
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        left: -3px;
        top: -3px;
        -webkit-border-radius: 28px;
        border-radius: 28px
    }
    input[type=text],
    textarea {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 400
    }
    .input-area,
    .input-but,
    .input-text {
        width: 100%;
        margin: 5px 0
    }
    .contact-form {
        max-width: 700px;
        margin: auto
    }
    .group-central[data-name=contact-info] {
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%)
    }
    .group-central[data-name=contact-info] .company-text,
    .group-central[data-name=contact-info] .company-text a {
        color: #fff
    }
    .group-central[data-name=contact-form] .content-main {
        text-align: center
    }
    .group-central[data-name=contact-form] .box-cover {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%
    }
    .group-central[data-name=contact-form] .box-cover::after {
        display: block;
        background: url(../images/overlay.png)!important;
        opacity: .5
    }
    .group-central[data-name=contact-form] .box-intro {
        max-width: 90%;
        margin: auto;
        text-align: center;
        padding: 30px 0
    }
    .company-text h2,
    .contact-form h2 {
        font-size: calc(100vw/28);
        color: #fff;
        text-shadow: none
    }
    .company-text h2::after,
    .contact-form h2::after {
        width: 100px;
        margin: 10px auto;
        background-color: #fff
    }
    .new-icon {
        top: 20px;
        left: 70px
    }
    .option-03 .new-icon {
        top: 20px;
        left: 20px
    }
    .list-news-icon {
        top: 10px;
        left: 10px
    }
    .popup-home.details-content .close-popup::after {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        border: 1px solid rgba(255, 255, 255, .5);
        box-shadow: 0 0 60px rgba(0, 0, 0, .2);
        border-radius: 0;
        -webkit-border-radius: 0
    }
    .popup-home.details-content .close-popup {
        top: 0;
        right: 0
    }
    .career-educate {
        margin: 5% auto
    }
}

@media only screen and (max-width:1100px) and (orientation:landscape) {
    .bg-cover,
    .bg-home,
    .bg-inner,
    .box-cover {
        height: calc(900/2000 * 100vw)
    }
    .service-home {
        width: 45vw
    }
    .pic-service-home {
        height: 30vw;
        width: 30vw
    }
}

@media only screen and (max-width:1100px) and (orientation:portrait) {
    .bg-cover,
    .bg-home,
    .bg-inner,
    .box-cover {
        height: calc(1125/2000 * 100vw)
    }
    .service-home {
        width: 60vw
    }
    .pic-service-home {
        height: 45vw;
        width: 45vw
    }
}

@media screen and (max-width:950px) {
    .group-central[data-name=news-home] .box-intro {
        max-width: 600px
    }
    .box-news:nth-child(1),
    .box-news:nth-child(2) {
        width: calc(50% - 5px)
    }
    .box-news:nth-child(3) {
        width: calc(100% - 10px);
        margin: 5px 0 0
    }
    .news-item {
        margin: 5px .3%
    }
    .news-item:nth-child(1) {
        margin: 0 0 5px 6px
    }
    .news-item:nth-child(2) {
        margin: 0 0 12px 6px
    }
    .news-item:nth-child(3) {
        margin: 0 0 5px 6px
    }
}

@media screen and (max-width:840px) {
    .content-column.bg-fixed {
        background-image: none!important
    }
    #recruitment-page .content-right,
    .content-right {
        float: none;
        padding: 30px 5%;
        width: 100%;
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        background: linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%);
        color: #fff
    }
    .content-right>h2 {
        color: #fff;
        text-align: center
    }
    .content-right::after {
        display: none
    }
    .content-page[data-post=overview] .content-column.bg-fixed {
        background: -webkit-linear-gradient(45deg, rgba(9, 52, 122, 1) 0, rgba(0, 128, 9, 1) 100%)!important;
        background: linear-gradient(45deg, rgba(9, 52, 122, 1), rgba(229, 27, 36, 1))!important
    }
    .content-history>h2.text-grey {
        color: #fff
    }
    .content-history>h2::after,
    .content-history>h2::before {
        background-color: #fff
    }
    .news-item {
        width: 45%;
        padding: 10px
    }
    .news-txt {
        float: none;
        width: 100%;
        padding: 10px;
        height: 68px
    }
    .news-item:nth-child(1) {
        width: calc(90% + 8px);
        float: none;
        margin: 0 0 5px
    }
    .news-item:nth-child(1) .news-pic {
        height: 200px;
        margin: 0
    }
    .news-item:nth-child(1) .news-txt {
        max-height: inherit;
        height: auto;
        padding: 10px
    }
    .news-item:nth-child(2),
    .news-item:nth-child(3) {
        width: 45%;
        height: auto;
        max-width: 380px;
        float: none;
        margin: 2px 0
    }
    .news-item:nth-child(2) .news-pic,
    .news-item:nth-child(3) .news-pic {
        float: none;
        height: 180px;
        width: 100%
    }
    .news-item:nth-child(2) .news-txt,
    .news-item:nth-child(3) .news-txt {
        float: none;
        width: 100%;
        padding: 10px;
        height: 68px
    }
    .option-02 {
        width: 100%
    }
    .option-02 .news-item {
        width: 45%;
        margin: 0 0 5px
    }
    .option-02 .news-item:nth-child(1),
    .option-02 .news-item:nth-child(2),
    .option-02 .news-item:nth-child(3) {
        width: 45%;
        max-width: inherit;
        margin: 0 0 5px
    }
    .option-03 {
        width: 100%
    }
    .option-03 .news-item {
        width: 45%;
        margin: 0 0 5px
    }
    .option-03 .news-item:nth-child(1),
    .option-03 .news-item:nth-child(2),
    .option-03 .news-item:nth-child(3) {
        width: 45%;
        max-width: inherit;
        margin: 0 0 5px
    }
}

@media screen and (max-width:740px) {
    .pic-library {
        height: 200px
    }
    .career-list table {
        margin: 0;
        border-collapse: collapse;
        border-spacing: 0
    }
    .head-list {
        display: none
    }
    .career-list tr {
        display: block;
        margin: 0 0 10px
    }
    .career-list tr:last-child {
        margin: 0
    }
    .career-list tbody td {
        background-color: #eee;
        color: #444;
        border: none;
        border-bottom: 1px solid #fff;
        display: block;
        text-align: right;
        padding: 10px 15px;
        position: relative
    }
    .career-list td::before {
        content: attr(data-label);
        float: left;
        font-size: 12px;
        color: #999;
        font-weight: 700;
        position: absolute;
        left: 10px;
        top: 50%;
        margin: -8px 0 0;
        font-family: Arial, Helvetica, sans-serif
    }
    .career-list tbody tr:nth-child(even) td {
        background-color: #ddd;
        color: #333
    }
    .career-title a {
        color: #fff;
        padding: 0 0 0 100px;
        display: inline-block
    }
    .career-list td:nth-child(5) {
        font-size: 14px;
        padding: 10px 10px 10px 130px
    }
    .career-list td:last-child {
        border-bottom: 0
    }
    .career-list td:nth-child(2) {
        text-align: right
    }
    .career-title {
        background-color: #09347a!important
    }
    .career-title::before {
        color: #ddd!important
    }
    .text-slide {
        top: -80px
    }
    .load-text img {
        width: auto!important
    }
}

@media screen and (max-width:620px) {
    .captcha {
        width: 110px;
        height: 60px;
        overflow: hidden;
        margin: 0;
        -webkit-border-radius: 10px;
        border-radius: 10px
    }
    .g-recaptcha>div {
        margin: -6px 0 0 -2px;
        overflow: hidden
    }
    .captcha::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        width: 60px;
        height: 60px;
        background: url(../../../../../../www.gstatic.com/recaptcha/api2/logo_48.png) center center no-repeat #f9f9f9;
        z-index: 2
    }
    .captcha+.outer-but {
        float: none;
        display: inline-block;
        vertical-align: top
    }
    .captcha+.outer-but button {
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        font-size: 18px
    }
    button.but {
        margin: 10px 0
    }
    .box-library-pdf {
        width: 250px;
        height: 250px;
        margin: 0 auto 40px
    }
    .title-pdf {
        margin: -150px 0 0
    }
    #news-page .pic-library {
        height: calc(1125/2000 * 80vw)
    }
    #news-page .library-thumb {
        width: 100%;
        margin: 10px 0;
        display: block
    }
}

@media screen and (max-width:540px) {
    .colum-text,
    .news-item,
    .news-item:nth-child(2),
    .news-item:nth-child(3) {
        max-width: inherit
    }
    .faci-slide .item,
    .news-item:nth-child(1) .news-pic,
    .news-item:nth-child(1) .news-txt,
    .news-item:nth-child(2) .news-pic,
    .news-item:nth-child(2) .news-txt,
    .news-item:nth-child(3) .news-pic,
    .news-item:nth-child(3) .news-txt,
    .news-pic,
    .news-txt,
    .option-02 .news-item:nth-child(1) .news-pic,
    .option-02 .news-item:nth-child(1) .news-txt,
    .option-02 .news-item:nth-child(2) .news-pic,
    .option-02 .news-item:nth-child(2) .news-txt,
    .option-02 .news-item:nth-child(3) .news-pic,
    .option-02 .news-item:nth-child(3) .news-txt,
    .option-02 .news-pic,
    .option-02 .news-txt,
    .option-03 .news-item:nth-child(1) .news-pic,
    .option-03 .news-item:nth-child(1) .news-txt,
    .option-03 .news-item:nth-child(2) .news-pic,
    .option-03 .news-item:nth-child(2) .news-txt,
    .option-03 .news-item:nth-child(3) .news-pic,
    .option-03 .news-item:nth-child(3) .news-txt,
    .option-03 .news-pic,
    .option-03 .news-txt,
    .product-slide .item {
        height: auto
    }
    .copyright a {
        display: block;
        margin: 10px auto
    }
    .box-news:nth-child(1),
    .box-news:nth-child(2),
    .box-news:nth-child(3) {
        width: 100%;
        height: auto;
        max-height: inherit;
        margin: 0 0 5px
    }
    .content-column h2 {
        font-size: calc(100vw/18)
    }
    .content-manager>h3,
    .content-page[data-post=consulting] .box-text>h3,
    .details-center h2,
    .item-history h3,
    .value h3 {
        font-size: calc(100vw/22)
    }
    .manager {
        width: 100%
    }
    .news-item,
    .option-02 .news-item,
    .option-02 .news-item:nth-child(1),
    .option-02 .news-item:nth-child(2),
    .option-02 .news-item:nth-child(3),
    .option-03 .news-item,
    .option-03 .news-item:nth-child(1),
    .option-03 .news-item:nth-child(2),
    .option-03 .news-item:nth-child(3) {
        width: 90%;
        margin: 5px 0
    }
    .content-history>h2::after,
    .content-history>h2::before {
        display: none
    }
    .details-center h3 {
        font-size: calc(100vw/26)
    }
    .company-text h2,
    .contact-form h2 {
        font-size: calc(100vw/22)
    }
    .news-pic {
        max-height: 180px
    }
    .news-txt h3 {
        font-size: 12px
    }
    #project-page .text-slide h2 {
        font-size: calc(100vw/22)
    }
    .news-item:nth-child(1),
    .news-item:nth-child(2),
    .news-item:nth-child(3) {
        width: 90%;
        margin: 5px 0;
        max-width: inherit
    }
    .load-title h3 {
        font-size: 20px
    }
    .faci-slide,
    .product-slide {
        width: 80%
    }
    .faci-slide .item,
    .product-slide .item {
        overflow: visible
    }
    .faci-slide .item img,
    .product-slide .item img {
        height: calc(800/2000 * 100vw)
    }
    .faci-slide .item h3,
    .product-slide .item h3 {
        position: relative;
        left: auto;
        bottom: auto
    }
}

@media screen and (max-width:440px) {
    .navigation.show {
        height: calc(100vh - 60px)
    }
    .container {
        margin: 60px 0 0
    }
    .outer-nav.second.fixed {
        top: 60px
    }
    .title-page {
        padding: 20px 0
    }
    .title-page h1,
    body.auto .title-page h1 {
        font-size: calc(100vw/16);
        padding: 0 0 0 20px
    }
    .tilte-project h2::before,
    .title-page h1::before,
    .title-rotate>h2::before,
    body.auto .title-page h1::before {
        width: 10px
    }
    .tilte-project {
        padding: 0 20px
    }
    .title-rotate>h2 {
        padding: 0 0 0 20px
    }
    .project-home {
        width: 100%
    }
    .company-text {
        margin: 10px 0;
		padding:0 10px;
		text-align:left;
    }
.slogan {
    margin: 20px 0 0;
	text-align:center
}
    .text-project {
        margin: -30px 0 0
    }
    .content-page[data-post=policy] .box-text,
    .content-page[data-post=resource] .box-text {
        padding: 20px
    }
    #service-page .content-page .box-text,
    .content-overview .box-text {
        padding: 0 20px
    }
    .pic-center {
        margin: 0 auto
    }
    .load-title h3 {
        font-size: 18px
    }
    .project-box {
        width: 100%;
        margin: 0
    }
    .project-box .text-project {
        margin: -30px 0 0
    }
}

@media screen and (max-width:350px) {
    .box-service-home a span {
        font-size: 10px
    }
}

.scroll-slide::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.sub-nav::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.controls progress::-webkit-progress-value {
    background-color: #fff
}

.controls progress::-webkit-progress-bar,
.controls progress::-webkit-progress-value {
    background-color: rgba(255, 255, 255, .5)!important
}

:-webkit-full-screen,
:-webkit-full-screen-ancestor:not(iframe) {
    background-color: #fff!important;
    position: fixed!important;
    left: 0;
    top: 0;
    z-index: 2147483647!important
}

.is-Chrome.fullvideo .header {
    opacity: 0
}

.is-Chrome.fullvideo .wheel {
    display: none
}