@import"iconfont.css";

.font-en {
    font-family: "Montserrat"
}

.fw-400 {
    font-weight: 400
}

.fw-700 {
    font-weight: 700
}

.lh-125 {
    line-height: 1.25
}

.lh-15 {
    line-height: 1.5
}

.fz-14 {
    font-size: 14px
}

.fz-40 {
    font-size: 40px
}

@media screen and (max-width: 1600px) {
    .fz-40 {
        font-size: 32px
    }
}

@media screen and (max-width: 1400px) {
    .fz-40 {
        font-size: 24px
    }
}

@media screen and (max-width: 768px) {
    .fz-40 {
        font-size: 20px
    }
}

.mt-40 {
    margin-top: 40px
}

@media screen and (max-width: 1024px) {
    .mt-40 {
        margin-top: 20px
    }
}

.fr-btn::before,
.fr-btn,
.layer-video,
.calc-filter,
.calc-btn,
.prodown-item__down,
.prod-vr-link,
.sof-item__img img,
.caser-item__img img,
.case-item__txt,
.case-item__gradient,
.pager>a,
.recr-item_btn::before,
.recr-item_btn,
.customer-item img,
.customer-item,
.history-item__circle,
.path-item,
.honor-item__img img,
.honor-item__img,
.honor-item__circle::after,
.af-item__img img,
.pnav-link::after,
.pro360t-item,
.question-btn,
.office-item__line,
.office-item__info,
.view-more>span::before,
.view-more>span::after,
.ib-pager-item span,
.ib-pager-item::after,
.solutionm-link,
.pmc-link::before,
.pmc-link,
.list-m-menu>li,
.submenu-link,
.header-logo img,
.banner-dots li button::before {
    -webkit-transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.social-link,
.fclink-item,
.gotop,
.fmenu-item,
.fsf-submit,
.prodown-item__title,
.prodown-item__view,
.product-item__title,
.casef-option,
.sof-item__info,
.caser-item,
.techp-item__title,
.tech-item__desc,
.recr-item__more,
.recr-item__info,
.honor-item__screen,
.honor-item__title,
.af-item,
.pnav-link,
.page-crumb>a,
.btn-pro360,
.news-item_btn>span,
.news-item__title,
.view-more,
.if-item,
.header-user>span,
.header-led>span {
    -webkit-transition: color .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: color .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.btn-calc-submit::before,
.prodown-item__down::before,
.history-progress,
.history-line {
    -webkit-transition: width .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: width .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.prodown-item__view::after,
.techp-item__img-box::after,
.recrd-side-link,
.recr-item::before,
.history-list,
.af-item__img::after,
.question-btn::before,
.news-item__img-circle,
.btn-menu::before,
.btn-menu::after,
.header {
    -webkit-transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.btn-calc-submit,
.history-item__year,
.btn-menu span {
    -webkit-transition: opacity .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.sof-item,
.caser-item::after,
.news-item_btn,
.if-box {
    -webkit-transition: background .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: background .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.layer-vmain,
.prodown-item__title,
.prodf-item__txt,
.product-item__intro,
.casen-item__txt,
.case-leadtxt,
.sn-item__txt,
.sc-left__txt,
.sc-box-txt__wrap,
.at-txt,
.layer-cmain,
.pro-360-bg,
.office-box__txt .office-item__info,
.ib-pager {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300;
    src: local("Montserrat Light"), local("Montserrat-Light"), url("../assets/fonts/montserrat-v14-latin/montserrat-v14-latin-300.woff2") format("woff2"), url("../assets/fonts/montserrat-v14-latin/montserrat-v14-latin-300.woff") format("woff")
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../assets/fonts/montserrat-v14-latin/montserrat-v14-latin-regular.woff2") format("woff2"), url("../assets/fonts/montserrat-v14-latin/montserrat-v14-latin-regular.woff") format("woff")
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    src: local("Montserrat Medium"), local("Montserrat-Medium"), url("../assets/fonts/montserrat-v14-latin/montserrat-v14-latin-500.woff2") format("woff2"), url("../assets/fonts/montserrat-v14-latin/montserrat-v14-latin-500.woff") format("woff")
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    src: local("Montserrat Bold"), local("Montserrat-Bold"), url("../assets/fonts/montserrat-v14-latin/montserrat-v14-latin-700.woff2") format("woff2"), url("../assets/fonts/montserrat-v14-latin/montserrat-v14-latin-700.woff") format("woff")
}


.wow {
    visibility: hidden
}

.no-cssanimations .wow {
    visibility: visible
}

.mt-10 {
    margin-top: 10px
}

.mt-20 {
    margin-top: 20px
}

.mt-30 {
    margin-top: 30px
}

.mt-40 {
    margin-top: 40px
}

.mt-50 {
    margin-top: 50px
}

.mt-60 {
    margin-top: 60px
}

.mt-70 {
    margin-top: 70px
}

.mt-80 {
    margin-top: 80px
}

.mt-90 {
    margin-top: 90px
}

.mt-100 {
    margin-top: 100px
}

.mt-110 {
    margin-top: 110px
}

.mt-120 {
    margin-top: 120px
}

.mt-140 {
    margin-top: 140px
}

.mt-160 {
    margin-top: 160px
}

.mt-200 {
    margin-top: 200px
}

@media(max-width: 1400px) {
    .mt-160 {
        margin-top: 120px
    }

    .mt-140 {
        margin-top: 100px
    }

    .mt-120 {
        margin-top: 80px
    }
}

@media(max-width: 1200px) {
    .mt-160 {
        margin-top: 100px
    }
}

@media(max-width: 1024px) {
    .mt-50 {
        margin-top: 25px
    }

    .mt-60 {
        margin-top: 30px
    }

    .mt-70 {
        margin-top: 35px
    }

    .mt-80 {
        margin-top: 40px
    }

    .mt-90 {
        margin-top: 45px
    }

    .mt-100 {
        margin-top: 50px
    }

    .mt-110 {
        margin-top: 55px
    }

    .mt-120 {
        margin-top: 60px
    }

    .mt-140 {
        margin-top: 70px
    }

    .mt-200 {
        margin-top: 100px
    }
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.d-inline-block {
    display: inline-block
}

.d-none {
    display: none
}

.d-block {
    display: block
}

.v-rl {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl
}

.v-lr {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr
}

.container {
    overflow: hidden
}

.contact-map .BMapLabel {
    border: 0
}

.contact-map .anchorBL {
    display: none
}

.list {
    position: relative;
    font-size: 0
}

.list>li {
    display: inline-block;
    vertical-align: top
}

.list-1>li {
    width: 100%
}

.list-2>li {
    width: 50%
}

.list-3>li {
    width: 33.3333%
}

.list-4>li {
    width: 25%
}

.list-5>li {
    width: 20%
}

.list-6>li {
    width: 16.6666%
}

.list-7>li {
    width: 14.2857%
}

.img-box {
    position: relative
}

.img-box::before {
    content: "";
    display: block
}

.img-box>img {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.bg-white {
    position: relative;
    z-index: 10;
    background-color: #fff
}

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

.bg-contain {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain
}

.wx-share {
    margin-top: -130px;
    margin-left: -120px;
    border-radius: 3px;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    padding: 20px 10px;
    width: 240px;
    height: 280px;
    background-color: #fff;
    cursor: pointer;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1)
}

.wx-share img {
    display: block;
    width: 100%
}

.wx-share p {
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 500;
    color: #000
}

.wx-share i {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5;
    text-align: center;
    color: #000
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 80px, 0);
        transform: translate3d(0, 80px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUpSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 80px, 0);
        transform: translate3d(0, 80px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmall;
    animation-name: fadeInUpSmall
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-40px, 0, 0);
        transform: translate3d(-40px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-40px, 0, 0);
        transform: translate3d(-40px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeftSmall {
    -webkit-animation-name: fadeInLeftSmall;
    animation-name: fadeInLeftSmall
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(40px, 0, 0);
        transform: translate3d(40px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRightSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(40px, 0, 0);
        transform: translate3d(40px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRightSmall {
    -webkit-animation-name: fadeInRightSmall;
    animation-name: fadeInRightSmall
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms
}

.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms
}

.animated.slow {
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

@media(prefers-reduced-motion) {
    .animated {
        -webkit-animation: unset !important;
        animation: unset !important;
        -webkit-transition: none !important;
        transition: none !important
    }
}

.slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track::after,
.slick-track::before {
    display: table;
    content: ""
}

.slick-track::after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    outline: 0
}

.slick-slide a {
    outline: 0
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid rgba(0, 0, 0, 0)
}

.slick-arrow.slick-hidden {
    display: none
}

.banner-dots {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    font-size: 0;
    text-align: center
}

.banner-dots li {
    margin: 0 4px;
    display: inline-block;
    vertical-align: top
}

.banner-dots li button {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
    font-size: 0;
    background-color: rgba(0, 0, 0, 0);
    outline: 0;
    cursor: pointer
}

.banner-dots li button::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .1);
    box-shadow: 0 0 2px rgba(0, 0, 0, .1)
}

.banner-dots li.slick-active button::before {
    background-color: #333
}

@media(max-width: 1024px) {
    .banner-dots {
        bottom: 0
    }

    .banner-dots li {
        margin-right: 4px;
        margin-left: 4px
    }

    .banner-dots li button::before {
        width: 4px;
        height: 4px
    }
}

.wrap {
    margin-right: 80px;
    margin-left: 80px
}

.main {
  
}

@media(max-width: 1600px) {
    .wrap {
        margin-right: 40px;
        margin-left: 40px
    }

    .main {
        margin-right: 40px;
        margin-left: 40px
    }
}

@media(max-width: 1200px) {
    .wrap {
        margin-right: 20px;
        margin-left: 20px
    }

    .main {
        margin-right: 20px;
        margin-left: 20px
    }
}

.header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    padding: 10px 0
}

.header.hide {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.page-top {
    height: 80px
}

.header-inner {
    position: relative
}

.header-logo {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 14px
}

.header-logo img {
    display: block;
    width: auto;
    height: 32px
}

.header-logo .logo-b {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.header-menu {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 50px
}

.menu-item {
    margin-right: 40px;
    position: relative
}

.menu-item:last-of-type {
    margin-right: 0
}

.menu-item:hover .menu-item__sub {
    visibility: visible;
    opacity: 1;
    pointer-events: auto
}

.menu-item:hover .menu-link::before {
    visibility: visible;
    opacity: 1
}

.menu-link {
    position: relative;
    display: block;
    font: 400 14px/60px "Montserrat";
    color: #fff;
    text-transform: uppercase
}

.menu-link::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 100%;
    height: 10px
}

.menu-link::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 8px;
    height: 2px;
    background-color: #1226aa;
    visibility: hidden;
    opacity: 0
}

.menu-link.active::before,
.menu-link.current::before,
.menu-link:hover::before {
    visibility: visible;
    opacity: 1
}

.menu-item__sub {
    position: absolute;
    top: 100%;
    margin-top: 10px;
    left: 0;
    min-width: 120px;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}

.submenu-link {
    display: block;
    padding: 0 20px;
    font: 400 14px/60px "Montserrat";
    color: #333;
    white-space: nowrap
}

.submenu-link:hover {
    background-color: #1226aa;
    color: #fff
}

.header-right {
    position: absolute;
    top: 0;
    right: 0
}

.header-right {
    font-size: 0
}

.header-user,
.header-led {
    display: inline-block;
    vertical-align: top;
    text-align: center
}

.header-user>span,
.header-led>span {
    display: inline-block;
    vertical-align: top;
    font-size: 28px;
    line-height: 60px;
    width: 60px;
    color: #fff
}

.header-signout {
    display: inline-block;
    vertical-align: top;
    font: 400 16px/60px "Montserrat"
}

.btn-menu {
    position: relative;
    margin-right: -10px;
    display: none;
    vertical-align: top;
    width: 40px;
    height: 40px
}

.btn-menu::before,
.btn-menu::after,
.btn-menu span {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 2px;
    background-color: #333
}

.btn-menu::before,
.btn-menu::after {
    content: ""
}

.btn-menu::before {
    margin-top: -7px
}

.btn-menu::after {
    margin-top: 5px
}

.btn-menu span {
    margin-top: -1px
}

.menu-open .btn-menu::before {
    margin-top: -1px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.menu-open .btn-menu::after {
    margin-top: -1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.menu-open .btn-menu span {
    opacity: 0
}

@media(min-width: 1025px) {

    .page-menu .header,
    .fixed-menu .header,
    .hover-menu .header {
        background-color: #fff;
        -webkit-box-shadow: 0 0 12px rgba(185, 185, 185, .2);
        box-shadow: 0 0 12px rgba(185, 185, 185, .2)
    }

    .page-menu .header-logo .logo-b,
    .fixed-menu .header-logo .logo-b,
    .hover-menu .header-logo .logo-b {
        opacity: 1
    }

    .page-menu .menu-link,
    .fixed-menu .menu-link,
    .hover-menu .menu-link {
        color: #333
    }

    .page-menu .menu-link:hover,
    .fixed-menu .menu-link:hover,
    .hover-menu .menu-link:hover {
        color: #1226aa
    }

    .page-menu .header-user>span,
    .page-menu .header-led>span,
    .fixed-menu .header-user>span,
    .fixed-menu .header-led>span,
    .hover-menu .header-user>span,
    .hover-menu .header-led>span {
        color: #333
    }

    .page-menu .header-user:hover>span,
    .page-menu .header-led:hover>span,
    .fixed-menu .header-user:hover>span,
    .fixed-menu .header-led:hover>span,
    .hover-menu .header-user:hover>span,
    .hover-menu .header-led:hover>span {
        color: #1226aa
    }

    .page-menu .header-signout,
    .fixed-menu .header-signout,
    .hover-menu .header-signout {
        color: #333
    }
}

.m-menu {
    display: none;
    position: fixed;
    z-index: 900;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    background-color: #f5f7f9;
    padding-top: 70px;
    padding-right: 20px;
    padding-left: 20px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
}

.menu-open .list-m-menu>li {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.menu-open .list-m-menu>li:nth-of-type(2) {
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms
}

.menu-open .list-m-menu>li:nth-of-type(3) {
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms
}

.menu-open .list-m-menu>li:nth-of-type(4) {
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms
}

.menu-open .list-m-menu>li:nth-of-type(5) {
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms
}

.menu-open .list-m-menu>li:nth-of-type(6) {
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms
}

.menu-open .list-m-menu>li:nth-of-type(7) {
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms
}

.m-submenu {
    display: none;
    position: fixed;
    z-index: 910;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    background-color: #f5f7f9;
    padding-top: 70px;
    padding-right: 20px;
    padding-left: 20px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

.m-submenu.active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.m-submenu.active::after {
    -webkit-transform: scaleY(0);
    transform: scaleY(0)
}

.m-submenu::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), to(rgb(255, 255, 255)));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgb(255, 255, 255));
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transition: transform .4s linear;
    -webkit-transition: -webkit-transform .4s linear;
    transition: -webkit-transform .4s linear;
    transition: transform .4s linear;
    transition: transform .4s linear, -webkit-transform .4s linear
}

.m-submenu-body {
    position: absolute;
    top: 70px;
    right: 20px;
    bottom: 0;
    left: 20px;
    overflow-y: auto
}

.list-m-menu>li {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0)
}

.m-menu-link {
    position: relative;
    display: block;
    text-align: left;
    font: 400 16px/50px "Montserrat";
    color: #333
}

.m-menu-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: #efefef
}

.m-menu-link.has-sub::before {
    content: "";
    font-family: iconfont;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -20px;
    width: 20px;
    line-height: 40px;
    color: #aaa
}

.m-submenu-header {
    position: relative;
    padding-left: 20px;
    display: block;
    margin-bottom: 10px;
    font: 400 14px/50px "Montserrat";
    color: #333;
    border-bottom: 1px solid #f5f7f9
}

.m-submenu-header::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 20px;
    font-family: iconfont;
    font-size: 12px;
    text-align: left;
    line-height: 40px;
    color: #333
}

.m-submenu-content {
    display: none
}

.m-submenu-content.active {
    display: block
}

.m-submenu-link {
    display: block;
    font: 400 14px/40px "Montserrat";
    color: #333
}

.m-third-link {
    display: block;
    font: 400 12px/30px "Montserrat";
    color: #707070;
    padding-left: 20px
}

@media(max-width: 1200px) {
    .header-logo {
        margin-top: 6px
    }

    .header-logo img {
        height: 28px
    }

    .menu-link {
        line-height: 40px
    }

    .header-user>span,
    .header-led>span {
        font-size: 24px;
        line-height: 40px;
        width: 40px
    }

    .header-menu {
        margin-left: 30px
    }

    .menu-item {
        margin-right: 30px
    }

    .header-signout {
        color: #333
    }
}

@media(max-width: 1024px) {
    .header-logo {
        margin-top: 8px
    }

    .header-logo img {
        height: 24px
    }

    .m-menu {
        display: block
    }

    .m-submenu {
        display: block
    }

    .btn-menu {
        display: inline-block
    }

    .header-menu {
        display: none
    }

    .header-inner {
        height: 40px
    }

    .menu-open .m-menu {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    .header {
        background-color: #fff
    }

    .header .header-logo .logo-b {
        opacity: 1
    }

    .header .header-user>span,
    .header .header-led>span {
        color: #333
    }

    .header .header-user:hover>span,
    .header .header-led:hover>span {
        color: #1226aa
    }
}

.dropmenu {
    position: fixed;
    z-index: 900;
    top: 80px;
    right: 0;
    left: 0;
    height: 0
}

.sub-menu {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    -webkit-transition: all .2s;
    transition: all .2s;
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms
}

.sub-menu.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    -webkit-transition-delay: 0;
    transition-delay: 0;
    -webkit-transition: all 0s;
    transition: all 0s
}

.product-menu {
    position: relative;
    font-size: 0;
    z-index: 1
}

.product-menu::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25%;
    background-color: #f5f7f9
}

.product-menu::after {
    content: "";
    position: absolute;
    top: 35px;
    left: 50%;
    bottom: 35px;
    width: 1px;
    background-color: #707070;
    opacity: .24
}

.product-menu.no-border::after {
    opacity: 0
}

.pm-left,
.pm-center {
    display: inline-block;
    vertical-align: top;
    width: 25%
}

.pm-link {
    display: block;
    padding-left: 80px;
    font: 400 18px/80px "Montserrat";
    color: #333;
    text-align: left
}

.pm-link.current {
    background-color: #fff;
    color: #1226aa
}

.pmc-item {
    padding-left: 40px;
    padding-top: 16px;
    display: none
}

.pmc-item.active {
    display: block
}

.pmc-link {
    position: relative;
    padding: 10px 0 10px 30px;
    display: block;
    font: 400 18px/28px "Montserrat";
    color: #333;
    opacity: .47
}

.pmc-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #333
}

.pm-right {
    padding: 35px 0;
    display: inline-block;
    vertical-align: top;
    width: 50%
}

.pmr-item {
    margin: 0 auto;
    max-width: 300px
}

.pmr-item::before {
    padding-top: 82.6086956522%
}

@media(min-width: 1025px) {

    .pmc-link:hover,
    .pmc-link.current {
        color: #1226aa;
        opacity: 1
    }

    .pmc-link:hover::before,
    .pmc-link.current::before {
        background-color: #1226aa
    }
}

@media(max-width: 1600px) {
    .pm-link {
        font-size: 16px;
        line-height: 60px
    }

    .pmc-link {
        font-size: 16px;
        line-height: 24px;
        padding-left: 40px
    }

    .pmc-item {
        padding-top: 6px
    }

    .pmr-item {
        max-width: 200px
    }

    .product-menu::after {
        top: 20px;
        bottom: 20px
    }
}

@media(max-width: 1200px) {
    .dropmenu {
        top: 60px
    }

    .page-top {
        height: 60px
    }

    .pmc-link {
        padding-left: 20px
    }
}

.solutionm-item {
    border-bottom: 1px solid #f5f7f9;
    border-right: 1px solid #f5f7f9
}

.solutionm-item:nth-of-type(3n) {
    border-right-width: 0
}

.solutionm-link {
    display: block;
    font: 400 18px/100px "Montserrat";
    text-align: center;
    color: #1226aa;
    background-color: #fff
}

@media(min-width: 1025px) {
    .solutionm-link:hover {
        background-color: #f5f7f9
    }
}

@media(max-width: 1600px) {
    .solutionm-link {
        font-size: 16px;
        line-height: 80px
    }
}

@media(max-width: 1400px) {
    .solutionm-link {
        line-height: 60px
    }
}

/*!
 * fullPage 3.0.8
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
 * or Fullpage Commercial License for commercial use
 * http://alvarotrigo.com/fullPage/pricing/
 *
 * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 */
.fp-enabled body,
html.fp-enabled {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.fp-slide {
    float: left
}

.fp-slide,
.fp-slidesContainer {
    height: 100%;
    display: block
}

.fp-slides {
    z-index: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.fp-section.fp-table,
.fp-slide.fp-table {
    display: table;
    table-layout: fixed;
    width: 100%
}

.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%
}

.fp-slidesContainer {
    float: left;
    position: relative
}

.fp-controlArrow {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: rgba(0, 0, 0, 0) #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff
}

.fp-scrollable {
    overflow: hidden;
    position: relative
}

.fp-scroller {
    overflow: hidden
}

.iScrollIndicator {
    border: 0 !important
}

.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important
}

#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0)
}

#fp-nav.fp-right {
    right: 17px
}

#fp-nav.fp-left {
    left: 17px
}

.fp-slidesNav {
    position: absolute;
    z-index: 4;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0 !important;
    right: 0;
    margin: 0 auto !important
}

.fp-slidesNav.fp-bottom {
    bottom: 17px
}

.fp-slidesNav.fp-top {
    top: 17px
}

#fp-nav ul,
.fp-slidesNav ul {
    margin: 0;
    padding: 0
}

#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative
}

.fp-slidesNav ul li {
    display: inline-block
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none
}

#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px
}

#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer
}

#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active+.fp-tooltip {
    -webkit-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in;
    width: auto;
    opacity: 1
}

#fp-nav ul li .fp-tooltip.fp-right {
    right: 20px
}

#fp-nav ul li .fp-tooltip.fp-left {
    left: 20px
}

.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell,
.fp-auto-height.fp-section {
    height: auto !important
}

.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell,
.fp-responsive .fp-auto-height-responsive.fp-section {
    height: auto !important
}

.fp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.fullpage .iScrollVerticalScrollbar {
    display: none !important
}

* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.page-index {
    height: 100vh;
    overflow: hidden
}

.page-index .footer-fixed {
    display: block
}

.index-banner {
    position: relative
}

.ib-item {
    position: relative;
    height: 100vh;
    overflow: hidden
}

.ib-title {
    position: absolute;
    right: 40px;
    bottom: 40px;
    left: 40px;
    visibility: hidden;
    opacity: 0;
    font: 300 44px/1.25 "Montserrat";
    letter-spacing: .08em;
    color: #fff;
    text-align: center;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: all .6s;
    transition: all .6s
}

.ib-txt {
    position: absolute;
    right: 0;
    bottom: 40px;
    left: 0;
    visibility: visible;
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: all .6s;
    transition: all .6s
}

.ib-txt-wrap {
    color: #fff
}

.ib-txt-wrap p {
    font: 300 16px/1.25 "Montserrat";
    letter-spacing: .02em
}

.ib-txt-wrap h3 {
    margin-top: 10px;
    font: 300 24px/1.25 "Montserrat";
    letter-spacing: .02em
}

.ib-txt-wrap.left {
    text-align: left
}

.ib-item__img {
    opacity: 0;
    -webkit-transition: all .6s;
    transition: all .6s;
    -webkit-transform: translate3d(0, 120px, 0);
    transform: translate3d(0, 120px, 0)
}

.slick-current .ib-item__img {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-current .ib-title,
.slick-current .ib-txt {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.ib-pager {
    position: absolute;
    top: 50%;
    right: 80px
}

.ib-pager-item {
    position: relative;
    padding-right: 20px;
    height: 30px;
    white-space: nowrap;
    font: 500 14px/30px "Montserrat";
    color: #fff;
    cursor: pointer;
    text-align: right
}

.ib-pager-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: -5px;
    background-color: #fff;
    opacity: .36;
    -webkit-transform: scale(0.6);
    transform: scale(0.6)
}

.ib-pager-item span {
    display: inline-block;
    vertical-align: top;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
}

.ib-pager-item.current span {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.ib-pager-item.current::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.section-scroll-box {
    height: 100vh;
    overflow: hidden
}

.section-cases,
.section-footer {
    -webkit-transition: all .7s ease;
    transition: all .7s ease
}

@media(max-width: 1600px) {
    .ib-pager {
        right: 40px
    }

    .ib-title {
        font-size: 32px
    }
}

@media(max-width: 1200px) {
    .section-scroll-box {
        height: auto;
        overflow: auto
    }

    .section-cases,
    .section-footer {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important
    }

    .ib-pager {
        right: 20px
    }

    .index-banner {
        position: relative;
        overflow: hidden
    }

    .index-banner::before {
        content: "";
        display: block;
        padding-top: 56.25%
    }

    .slick-ib {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden
    }

    .page-index {
        height: auto !important;
        overflow: visible !important
    }

    .fp-enabled body,
    html.fp-enabled {
        height: auto !important;
        overflow: visible !important
    }

    .ib-item {
        height: auto;
        overflow: hidden
    }

    .ib-item::before {
        padding-top: 56.25%
    }

    .section,
    .fp-tableCell,
    .fp-scrollable {
        height: auto !important
    }

    .ib-title {
        font-size: 24px
    }
}

@media(max-width: 1024px) {
    .index-banner {
        margin-top: 0
    }

    .ib-pager-item {
        font-size: 12px;
        line-height: 20px;
        height: 20px;
        padding-right: 15px
    }

    .ib-pager-item::after {
        width: 6px;
        height: 6px;
        margin-top: -3px
    }
}

@media(max-width: 750px) {

    .ib-item::before,
    .index-banner::before {
        padding-top: 146.6666666667%
    }

    .ib-title {
        font-size: 18px
    }
}

.if-box {
    position: relative
}

.if-box::before,
.if-box::after {
    content: "";
    position: absolute;
    background-color: #f5f7f9
}

.if-box::before {
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px
}

.if-box::after {
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px
}

@media(min-width: 1201px) {
    .if-box:nth-of-type(3n+1)::before {
        display: none
    }

    .if-box:nth-of-type(n+4)::after {
        height: 0
    }
}

.if-item {
    padding: 50px 0 40px;
    display: block;
    color: #1226aa;
    margin-right: 80px;
    margin-left: 80px
}

.if-item__title {
    font: 700 40px/1.5 "Montserrat";
    text-transform: capitalize
}

.if-item__desc {
    margin-top: 1em;
    min-height: 54px;
    height: 35px;
    overflow: hidden;
    font: 400 14px/18px "Montserrat";
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

@media(max-width: 1600px) {
    .if-item {
        padding-top: 40px;
        padding-bottom: 30px;
        margin-right: 40px;
        margin-left: 40px
    }

    .if-item__title {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .if-item__title {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .list-if>li {
        width: 50%
    }

    .if-item {
        margin-right: 20px;
        margin-left: 20px
    }
}

@media(max-width: 1200px)and (min-width: 769px) {
    .if-box:nth-of-type(2n+1)::before {
        display: none
    }

    .if-box:nth-of-type(n+5)::after {
        height: 0
    }
}

@media(min-width: 1025px) {
    .if-box:hover {
        background-color: #1226aa
    }

    .if-box:hover .if-item {
        color: #fff
    }
}

@media(max-width: 768px) {
    .list-if>li {
        width: 100%
    }

    .if-box::before {
        display: none
    }

    .if-item {
        padding-top: 30px
    }

    .if-item__desc {
        min-height: auto
    }

    .if-item__title {
        font-size: 20px
    }
}

.index-fifa {
    font-size: 0
}

.index-fifa::before {
    padding-top: 44.2708333333%
}

.fifa-item {
    position: absolute
}

.fifa-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.fifa-item:nth-of-type(1) {
    top: 0;
    left: 0;
    width: 66.6666666667%
}

.fifa-item:nth-of-type(1)::before {
    padding-top: 66.40625%
}

.fifa-item:nth-of-type(1)::after {
    border-right: 1px solid #fff
}

.fifa-item:nth-of-type(2),
.fifa-item:nth-of-type(3) {
    right: 0;
    width: 33.3333333333%
}

.fifa-item:nth-of-type(2)::before,
.fifa-item:nth-of-type(3)::before {
    padding-top: 66.40625%
}

.fifa-item:nth-of-type(2)::after,
.fifa-item:nth-of-type(3)::after {
    border-left: 1px solid #fff
}

.fifa-item:nth-of-type(2) {
    top: 0
}

.fifa-item:nth-of-type(2)::after {
    border-bottom: 1px solid #fff
}

.fifa-item:nth-of-type(3) {
    bottom: 0
}

.fifa-item:nth-of-type(3)::after {
    border-top: 1px solid #fff
}

@media(max-width: 1200px) {
    .index-fifa::before {
        padding-top: 0
    }

    .fifa-item {
        position: relative;
        display: inline-block;
        vertical-align: top
    }

    .fifa-item:nth-of-type(1) {
        width: 33.3333%
    }

    .fifa-item:nth-of-type(1)::after {
        border-right: 1px solid #fff
    }

    .fifa-item:nth-of-type(2),
    .fifa-item:nth-of-type(3) {
        width: 33.3333%
    }

    .fifa-item:nth-of-type(2)::after {
        border-bottom-width: 0;
        border-right: 1px solid #fff
    }

    .fifa-item:nth-of-type(3)::after {
        border-top-width: 0
    }
}

@media(max-width: 1024px) {

    .fifa-item:nth-of-type(1),
    .fifa-item:nth-of-type(2),
    .fifa-item:nth-of-type(3) {
        width: 50%
    }

    .fifa-item:nth-of-type(3) {
        display: none
    }
}

@media(max-width: 640px) {

    .fifa-item:nth-of-type(1),
    .fifa-item:nth-of-type(2),
    .fifa-item:nth-of-type(3) {
        width: 100%;
        border-left-width: 0;
        border-right-width: 0;
        margin-top: 4px
    }

    .fifa-item:nth-of-type(3) {
        display: block
    }
}

.office-wrap {
    position: relative;
    text-align: right
}

.office-left {
    z-index: 5;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80px;
    text-align: left
}

.office-left-title {
    font: 700 30px/1.35 "Montserrat";
    max-width: 540px
}

.view-more {
    display: inline-block;
    vertical-align: top;
    color: #1226aa;
    font: 500 14px/30px "Montserrat";
    text-transform: uppercase
}

.view-more>span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: .5em;
    font-size: 20px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    overflow: hidden
}

.view-more>span::before,
.view-more>span::after {
    position: absolute;
    top: 0;
    bottom: 0
}

.view-more>span::before {
    right: 0;
    left: 0
}

.view-more>span::after {
    content: "";
    right: 100%;
    width: 100%;
    font-size: 20px;
    line-height: 30px;
    text-align: center
}

.view-more.black {
    color: #333
}

.view-more:hover>span::before,
.view-more:hover>span::after {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.view-more:hover.black {
    color: #1226aa
}

.office-num {
    position: absolute;
    bottom: 80px;
    left: 0;
    white-space: nowrap;
    font-size: 0
}

.onum-item {
    display: inline-block;
    vertical-align: top;
    color: #1226aa;
    margin-right: 60px
}

.onum-item>span {
    display: inline-block;
    vertical-align: bottom
}

.onum-item:last-of-type {
    margin-right: 0
}

.onum-item__digit {
    font: 700 100px/1 "Montserrat"
}

.onum-item__txt {
    margin-left: .75em;
    font: 700 18px/24px "Montserrat";
    padding-bottom: .5em
}

.office-box {
    display: inline-block;
    vertical-align: top;
    width: 68.3333333333%;
    max-width: 1312px
}

.office-box::before {
    padding-top: 57.1646341463%
}

.office-box__txt {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .75);
    display: none
}

.office-box__txt .office-item__info {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    margin-top: 0;
    padding: 20px;
    visibility: visible;
    opacity: 1
}

@-webkit-keyframes scale2 {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(2);
        transform: scale(2)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scale2 {
    from {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(2);
        transform: scale(2)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.office-item {
    position: absolute;
    margin-top: -15px;
    margin-left: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(18, 38, 170, .14)
}

.office-item::before {
    content: "";
    position: absolute;
    top: 33.3333%;
    left: 33.3333%;
    width: 33.3333%;
    height: 33.3333%;
    border-radius: 50%;
    background-color: #1226aa
}

.office-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background-color: #1226aa;
    opacity: .07
}

.office-item:hover {
    z-index: 10
}

.office-item:hover .office-item__line,
.office-item:hover .office-item__info {
    visibility: visible;
    opacity: 1
}

.office-item.current::after {
    -webkit-animation: scale2 2s linear infinite;
    animation: scale2 2s linear infinite
}

.office-item__circle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background-color: #1226aa;
    opacity: .14
}

.office-item__name {
    position: absolute;
    top: 100%;
    left: 50%;
    font: 400 14px/20px "Montserrat";
    color: #333;
    text-transform: uppercase;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.office-item__line,
.office-item__info {
    visibility: hidden;
    opacity: 0
}

.office-item__line {
    width: 110px;
    position: absolute;
    bottom: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain
}

.office-item__line::before {
    padding-top: 102.7027027027%
}

.office-item__line.left {
    right: 50%;
    background-image: url(../images/office_line2.png)
}

.office-item__line.right {
    left: 50%;
    background-image: url(../images/office_line1.png)
}

.office-item__info {
    position: absolute;
    top: 0;
    margin-top: -150px;
    border: 2px solid #1226aa;
    padding: 20px 30px;
    color: #333;
    width: 350px;
    background: #fff;
    text-align: left
}

.office-item__info.left {
    right: 50%;
    margin-right: 110px
}

.office-item__info.right {
    left: 50%;
    margin-left: 110px
}

.office-item__info h3 {
    font: 700 20px/1.25 "Montserrat";
    margin-bottom: .25em
}

.office-item__info h4 {
    font: 700 14px/1.25 "Montserrat";
    margin-bottom: .75em
}

.office-item__info p {
    font: 400 14px/1.25 "Montserrat"
}

@media(min-width: 1025px) {
    .office-box__txt {
        display: none !important
    }
}

@media(max-width: 1600px) {
    .office-left-title {
        font-size: 24px
    }

    .onum-item__digit {
        font-size: 72px
    }

    .onum-item__txt {
        font-size: 14px;
        line-height: 18px
    }

    .office-box {
        width: 72%
    }

    .office-left {
        left: 40px
    }
}

@media(max-width: 1200px) {
    .office-left-title {
        font-size: 20px;
        max-width: inherit
    }

    .onum-item__digit {
        font-size: 60px
    }

    .onum-item__txt {
        font-size: 12px;
        line-height: 16px
    }

    .office-left {
        position: relative;
        margin-left: 20px;
        margin-right: 20px;
        left: auto
    }

    .office-left .view-more {
        margin-top: 10px
    }

    .office-num {
        position: relative;
        bottom: 0;
        margin-top: 30px
    }

    .office-box {
        width: 100%;
        margin-top: 30px
    }
}

@media(max-width: 1024px) {

    .office-item__line,
    .office-item__info {
        display: none
    }

    .office-box__txt .office-item__info {
        display: block
    }
}

@media(max-width: 768px) {
    .office-left-title {
        font-size: 16px;
        margin-right: 20px
    }

    .onum-item__digit {
        font-size: 40px
    }

    .onum-item__txt {
        font-size: 10px;
        line-height: 12px
    }

    .onum-item {
        margin-right: 30px
    }

    .office-item {
        width: 12px;
        height: 12px;
        margin-top: -6px;
        margin-left: -6px
    }

    .office-item__name {
        font-size: 8px
    }

    .office-box__txt .office-item__info {
        padding: 10px
    }

    .office-item__info h3 {
        font-size: 14px
    }

    .office-item__info h4 {
        font-size: 12px
    }

    .office-item__info p {
        font-size: 12px
    }
}

.news-box {
    overflow: hidden
}

.list-news {
    margin-right: -2px;
    margin-left: -2px
}

.list-news>li:nth-of-type(n+4) {
    margin-top: 4px
}

.news-item {
    display: block;
    margin: 0 2px
}

.news-item__img {
    overflow: hidden
}

.news-item__img::before {
    padding-top: 60.9375%
}

.news-item__img-circle {
    position: absolute;
    z-index: 3;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    pointer-events: none;
    display: none;
    -webkit-transform: scale(3);
    transform: scale(3)
}

.news-item__img-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.news-item__img-circle span::before {
    content: "";
    display: block;
    padding-top: 100%
}

.news-item__img-circle span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 1000px solid #edeff7;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.news-item__info {
    position: relative;
    padding: 30px 180px 30px 40px
}

.news-item__title {
    height: 3.8em;
    overflow: hidden;
    font: 700 20px/1.3 "Montserrat";
    color: #333;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.news-item__date {
    position: absolute;
    top: 30px;
    right: 40px;
    font: 400 14px/26px "Montserrat";
    color: #1226aa
}

.news-item__more {
    position: relative;
    margin-top: 20px;
    background-color: #edeff7
}

.news-item__more-txt {
    padding-left: 40px;
    font: 400 14px/44px "Montserrat";
    color: #a0a0a0
}

.news-item_btn {
    position: absolute;
    right: 40px;
    top: -20px;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%
}

.news-item_btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #1226aa;
    border-radius: 50%
}

.news-item_btn>span {
    display: inline-block;
    vertical-align: top;
    font-size: 24px;
    line-height: 40px;
    color: #1226aa
}

@media(min-width: 1025px) {
    .news-item__img-circle {
        display: block
    }

    .news-item:hover {
        background-color: #edeff7
    }

    .news-item:hover .news-item__title {
        color: #1226aa
    }

    .news-item:hover .news-item_btn {
        background-color: #1226aa
    }

    .news-item:hover .news-item_btn>span {
        color: #fff
    }

    .news-item:hover .news-item__img-circle {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@media(max-width: 1600px) {
    .news-item__title {
        font-size: 16px
    }
}

@media(max-width: 1200px) {
    .news-item_btn {
        right: 20px
    }

    .news-item__info {
        padding: 20px 140px 20px 20px
    }

    .news-item__title {
        font-size: 14px
    }

    .news-item__date {
        top: 20px;
        right: 20px
    }
}

@media(max-width: 1024px) {
    .news-item_btn {
        width: 30px;
        height: 30px;
        top: -15px
    }

    .news-item_btn::before {
        border-width: 1px
    }

    .news-item_btn>span {
        font-size: 16px;
        line-height: 30px
    }
}

@media(max-width: 768px) {
    .list-news>li {
        width: 100%
    }

    .news-item__info {
        padding-right: 120px
    }
}

.question-box {
    height: 180px;
    padding: 70px 0;
    background: url(../images/question.jpg) no-repeat center center;
    background-size: cover
}

.question-inner {
    position: relative
}

.question-left {
    font: 500 30px/40px "Montserrat";
    color: #fff;
    letter-spacing: .02em
}

.question-btn {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    overflow: hidden;
    padding: 0 30px;
    font: 500 20px/2 "Montserrat";
    color: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
    letter-spacing: .02em
}

.question-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
}

@media(min-width: 1025px) {
    .question-btn:hover {
        color: #1226aa
    }

    .question-btn:hover::before {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@media(max-width: 1600px) {
    .question-left {
        font-size: 24px
    }
}

@media(max-width: 1400px) {
    .question-left {
        font-size: 20px
    }
}

@media(max-width: 768px) {
    .question-left {
        font-size: 16px
    }

    .question-btn {
        font-size: 16px;
        line-height: 40px
    }
}

@media(max-width: 640px) {
    .question-box {
        padding: 40px 0;
        height: auto
    }

    .question-btn {
        margin-top: 20px;
        position: relative;
        display: inline-block;
        font-size: 12px
    }
}

.led-box {
    position: relative;
    background-color: #f5f7f9;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh
}

.led-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: -webkit-grab;
    cursor: grab
}

.btn-pro360 {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 12;
    -webkit-box-shadow: 4px 4px 25px rgba(161, 164, 185, .2);
    box-shadow: 4px 4px 25px rgba(161, 164, 185, .2);
    text-align: center;
    color: #d6d6d6;
    cursor: pointer
}

.btn-pro360 span {
    display: inline-block;
    vertical-align: top;
    font-size: 24px;
    line-height: 60px
}

.btn-pro360.left {
    left: 160px
}

.btn-pro360.right {
    right: 160px
}

.btn-pro360:hover {
    color: #1226aa
}

.pro-360-box {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: -320px
}

.pro-360-bg {
    position: absolute;
    top: 30%;
    right: 0;
    left: 0;
    font: 700 248px/1 "Montserrat";
    color: rgba(235, 235, 235, .35);
    text-align: center;
    pointer-events: none
}

.pro-360 {
    position: relative;
    z-index: 3;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    cursor: -webkit-grab;
    cursor: grab
}

.pro-360::before {
    padding-top: 66.6666666667%
}

.pro-360 .threesixty {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important
}

.slick-pro360t {
    position: absolute;
    z-index: 10;
    top: 50%;
    margin-top: 280px;
    left: 50%;
    margin-left: -240px;
    width: 480px
}

.slick-pro360t::before,
.slick-pro360t::after {
    content: "";
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    width: 100px;
    pointer-events: none
}

.slick-pro360t::before {
    left: 0;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(145, 247, 249, 0)), to(rgb(245, 247, 249)));
    background-image: linear-gradient(to left, rgba(145, 247, 249, 0), rgb(245, 247, 249))
}

.slick-pro360t::after {
    right: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(145, 247, 249, 0)), to(rgb(245, 247, 249)));
    background-image: linear-gradient(to right, rgba(145, 247, 249, 0), rgb(245, 247, 249))
}

.slick-pro360t.two .slick-list {
    text-align: center
}

.slick-pro360t.two .slick-track {
    display: inline-block !important;
    vertical-align: top !important;
    width: auto !important;
    -webkit-transform: none !important;
    transform: none !important
}

.pro360t-item {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 0 35px;
    text-align: center;
    cursor: pointer;
    font: 700 20px/40px "Montserrat";
    color: #aaa
}

.pro360t-item::after,
.pro360t-item::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #c3c3c3
}

.pro360t-item::after {
    right: -5px
}

.pro360t-item::before {
    left: -5px
}

.pro360t-item>span {
    display: inline-block;
    vertical-align: top
}

.slick-center .pro360t-item {
    color: #1226aa
}

.slick-center .pro360t-item>span {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

@media(max-width: 1920px) {
    .pro-360-bg {
        font-size: 12.9166666667vw
    }
}

@media(max-width: 1600px) {
    .btn-pro360 {
        width: 50px;
        height: 50px
    }

    .btn-pro360 span {
        font-size: 20px;
        line-height: 50px
    }

    .btn-pro360.left {
        left: 80px
    }

    .btn-pro360.right {
        right: 80px
    }
}

@media(max-width: 1400px) {
    .pro-360 {
        width: 840px
    }

    .slick-pro360t {
        width: 840px;
        margin-top: 240px;
        margin-left: -420px
    }

    .pro-360-box {
        margin-top: -280px
    }

    .pro360t-item {
        font-size: 16px
    }
}

@media(max-width: 1200px) {
    .led-box {
        padding: 80px 0 120px;
        height: auto
    }

    .pro-360-box {
        position: relative;
        top: auto;
        margin-top: 0
    }

    .btn-pro360 {
        width: 40px;
        height: 40px
    }

    .btn-pro360 span {
        font-size: 16px;
        line-height: 40px
    }

    .btn-pro360.left {
        left: 40px
    }

    .btn-pro360.right {
        right: 40px
    }
}

@media(max-width: 1024px) {
    .pro-360 {
        width: 100%;
        max-width: 90%
    }

    .slick-pro360t {
        left: auto;
        position: relative;
        width: 90%;
        top: auto;
        margin-top: auto;
        margin-left: auto;
        margin-right: auto
    }

    .btn-pro360.left {
        left: 20px
    }

    .btn-pro360.right {
        right: 20px
    }
}

@media(max-width: 768px) {
    .led-box {
        padding-top: 40px;
        padding-bottom: 60px;
        background-size: cover
    }

    .btn-pro360 {
        width: 30px;
        height: 30px;
        margin-top: -40px
    }

    .btn-pro360 span {
        font-size: 12px;
        line-height: 30px
    }

    .slick-pro360t {
        position: relative
    }

    .pro-360::before {
        padding-top: 0
    }

    .pro-360 .threesixty {
        position: relative;
        height: auto !important
    }

    .pro-360 .threesixty::before {
        content: "";
        display: block;
        padding-top: 66.6666666667%
    }

    .btn-pro360.left {
        left: 10px
    }

    .btn-pro360.right {
        right: 10px
    }

    .slick-pro360t::before,
    .slick-pro360t::after {
        display: none
    }
}

@media(max-width: 640px) {
    .slick-pro360t {
        width: 250px
    }

    .slick-pro360t .slick-list {
        padding: 0 !important
    }

    .pro360t-item {
        width: 80px;
        padding-right: 0;
        padding-left: 0
    }
}

.threesixty .threesixty_images {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0
}

.threesixty .threesixty_images img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.threesixty .threesixty_images img.previous-image {
    visibility: hidden;
    width: 0
}

.threesixty .threesixty_images img.current-image {
    visibility: visible;
    width: 100%
}

.threesixty .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px !important;
    margin-left: -30px !important;
    width: 60px;
    display: block;
    height: 30px;
    background: #333;
    background: rgba(0, 0, 0, .7);
    border-radius: 5px
}

.threesixty .spinner span {
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: bolder;
    color: #fff;
    text-align: center;
    line-height: 30px;
    display: block
}

.threesixty .nav_bar {
    display: none
}

.layer-comment {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .8)
}

.layer-cmain {
    position: absolute;
    top: 50%;
    right: 200px;
    left: 200px
}

.layer-cheader {
    position: relative;
    padding: 30px 80px;
    background-color: #f5f7f9
}

.layer-cheader-title {
    font: 700 40px/1.25 "Montserrat";
    color: #1226aa
}

.layer-cbody {
    background-color: #fff;
    padding: 40px 80px
}

.layerc-close {
    position: absolute;
    top: 50%;
    right: 80px;
    font-size: 40px;
    line-height: 1;
    width: 1em;
    color: #333;
    margin-top: -0.5em;
    height: 1em;
    cursor: pointer;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.layerc-close:hover {
    opacity: .8
}

@media(max-width: 1600px) {
    .layer-cmain {
        right: 40px;
        left: 40px
    }

    .layer-cbody {
        padding-right: 40px;
        padding-left: 40px
    }

    .layer-cheader-title {
        font-size: 32px
    }

    .layer-cheader {
        padding: 20px 40px
    }

    .layerc-close {
        font-size: 32px;
        right: 40px
    }
}

@media(max-width: 1400px) {
    .layer-cheader-title {
        font-size: 24px
    }

    .layerc-close {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .layer-cmain {
        right: 20px;
        left: 20px
    }

    .layer-cbody {
        padding-right: 20px;
        padding-left: 20px
    }

    .layer-cheader {
        padding: 10px 20px
    }

    .layerc-close {
        right: 20px
    }

    .layer-cheader-title {
        font-size: 20px
    }

    .layerc-close {
        font-size: 20px
    }
}

@media(max-width: 1024px) {
    .layer-cbody-scroll {
        max-height: 480px;
        overflow-y: scroll
    }
}

@media(max-width: 768px) {
    .layer-cbody {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

.page-banner {
    overflow: hidden
}

.page-banner::before {
    padding-top: 31.25%
}

.pb-wrap {
    position: absolute;
    top: 0;
    right: 200px;
    bottom: 0;
    left: 200px
}

.pb-wrap .page-crumb {
    position: absolute;
    bottom: 20px;
    left: 0
}

.page-crumb-box {
    padding: 15px 0
}

.page-crumb {
    font-size: 0;
    white-space: nowrap
}

.page-crumb>a {
    position: relative;
    margin-right: 24px;
    display: inline-block;
    vertical-align: top;
    font: 400 14px/30px "Montserrat";
    color: #fff
}

.page-crumb>a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -19px;
    width: 14px;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    font-family: "iconfont";
    color: #fff
}

.page-crumb>a:last-of-type::before {
    display: none
}

.page-crumb>a:hover {
    color: #1226aa
}

.page-crumb.black>a {
    color: #333
}

.page-crumb.black>a::before {
    color: #333
}

.page-crumb.black>a:hover {
    color: #1226aa
}

.pb-txt {
    position: absolute;
    top: 50%;
    left: 0;
    width: 500px;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.pb-txt h1 {
    margin-bottom: 10px;
    font: 700 64px/1.25 "Montserrat"
}

.pb-txt p {
    font: 400 14px/18px "Montserrat"
}

.pb-txt a {
    color: #fff;
    text-decoration: underline
}

@media(max-width: 1600px) {
    .pb-wrap {
        right: 40px;
        left: 40px
    }

    .pb-txt h1 {
        font-size: 48px
    }
}

@media(max-width: 1400px) {
    .pb-txt h1 {
        font-size: 32px
    }

    .page-banner::before {
        padding-top: 0;
        height: 400px
    }

    .page-banner>img {
        height: auto;
        width: 1400px;
        left: 50%;
        top: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0)
    }
}

@media(max-width: 1200px) {
    .pb-wrap {
        right: 20px;
        left: 20px
    }
}

@media(max-width: 1024px) {
    .page-banner {
        margin-top: 60px
    }
}

@media(max-width: 768px) {
    .page-banner::before {
        padding-top: 0;
        height: 300px
    }

    .page-banner>img {
        height: 300px;
        width: auto;
        left: 50%;
        top: 50%
    }

    .pb-txt {
        top: 40%;
        width: auto;
        right: 20px
    }

    .page-crumb-box {
        overflow-x: scroll
    }
}

.page-nav-box {
    height: 60px
}

.nav-page {
    padding: 1px 0
}

.page-nav {
    position: relative;
    background-color: #fff
}

.page-nav::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #f5f7f9
}

.page-nav.fixed {
    position: fixed;
    z-index: 100;
    top: 80px;
    right: 0;
    left: 0
}

.pnav-item {
    position: relative
}

.pnav-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    width: 2px;
    height: 24px;
    margin-top: -12px;
    background-color: #f5f7f9
}

.pnav-item:first-of-type::before {
    display: none
}

.pnav-item.current .pnav-link::after {
    visibility: visible;
    opacity: 1
}

.pnav-link {
    display: block;
    position: relative;
    font: 400 14px/60px "Montserrat";
    text-align: center;
    color: #333
}

.pnav-link:hover {
    color: #1226aa
}

.pnav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #1226aa;
    visibility: hidden;
    opacity: 0
}

.list-pnav.list-1 {
    text-align: center
}

.list-pnav.list-1>li {
    width: 50%
}

@media(max-width: 1200px) {
    .page-nav.fixed {
        top: 60px
    }
}

@media(max-width: 1024px) {
    .page-nav-box {
        display: none
    }

    .page-nav::before {
        display: none
    }
}

.ai-main {
    font-size: 0;
    color: #333
}

.ai-left,
.ai-right {
    display: inline-block;
    vertical-align: top
}

.ai-left {
    width: 36%
}

.ai-left h3 {
    font: 700 40px/1.25 "Montserrat";
    margin-right: 40px
}

.ai-right {
    width: 64%;
    font: 400 14px/20px "Montserrat"
}

@media(max-width: 1600px) {
    .ai-left h3 {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .ai-left h3 {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .ai-left {
        width: 100%
    }

    .ai-right {
        margin-top: 30px;
        width: 100%;
        max-width: 800px
    }
}

@media(max-width: 768px) {
    .ai-left h3 {
        font-size: 20px
    }
}

.list-af {
    margin-right: -2px;
    margin-left: -2px
}

.af-item {
    margin: 0 2px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 50px 40px;
    background-color: #f5f7f9;
    color: #333
}

.af-item__title {
    font: 700 40px/1.25 "Montserrat";
    height: 2.5em;
    margin-bottom: 14px
}

.af-item__link {
    position: relative;
    z-index: 1;
    padding: 0 1em;
    display: inline-block;
    vertical-align: top;
    font: 700 14px/2 "Montserrat";
    color: #333
}

.af-item__link::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    background-color: #333;
    border-radius: 28px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scale(0.14285);
    transform: scale(0.14285);
    -webkit-transition: transform .1s linear .1s, width .1s linear;
    -webkit-transition: width .1s linear, -webkit-transform .1s linear .1s;
    transition: width .1s linear, -webkit-transform .1s linear .1s;
    transition: transform .1s linear .1s, width .1s linear;
    transition: transform .1s linear .1s, width .1s linear, -webkit-transform .1s linear .1s
}

.af-item__link:hover::before {
    width: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform .15s linear, width .15s linear .15s;
    -webkit-transition: width .15s linear .15s, -webkit-transform .15s linear;
    transition: width .15s linear .15s, -webkit-transform .15s linear;
    transition: transform .15s linear, width .15s linear .15s;
    transition: transform .15s linear, width .15s linear .15s, -webkit-transform .15s linear
}

.af-item__intro {
    height: 100px
}

.af-item__desc {
    font: 700 14px/22px "Montserrat"
}

.af-item__img {
    width: 72%;
    margin-right: auto;
    margin-left: auto
}

.af-item__img::before {
    padding-top: 100%
}

.af-item__img .white {
    visibility: hidden;
    opacity: 0
}

.af-item__img::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 1000px;
    margin-top: -500px;
    margin-left: -500px;
    border-radius: 50%;
    background-color: #1226aa;
    -webkit-transform: scale(0);
    transform: scale(0)
}

@media(min-width: 1025px) {
    .af-item:hover {
        color: #fff
    }

    .af-item:hover .af-item__img .white {
        visibility: visible;
        opacity: 1
    }

    .af-item:hover .af-item__img .blue {
        visibility: hidden;
        opacity: 0
    }

    .af-item:hover .af-item__img::after {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    .af-item:hover .af-item__link {
        color: #fff
    }

    .af-item:hover .af-item__link::before {
        background-color: #fff
    }

    .af-item:hover .af-item__link:hover {
        color: #1226aa
    }
}

@media(max-width: 1600px) {
    .af-item__title {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .af-item {
        padding-right: 20px;
        padding-left: 20px
    }

    .af-item__title {
        font-size: 24px
    }
}

@media(max-width: 768px) {
    .af-item__title {
        font-size: 20px;
        height: auto
    }

    .list-af>li {
        width: 100%
    }

    .list-af>li:nth-of-type(n+2) {
        margin-top: 4px
    }
}

.as-item {
    height: 320px;
    padding-top: 1px
}

.as-box:first-of-type {
    border-right: 1px solid #fff
}

.as-box:first-of-type .as-item__intro {
    margin-left: 200px
}

.as-box:last-of-type {
    border-left: 1px solid #fff
}

.as-box:last-of-type .as-item__intro {
    margin-left: 200px;
    margin-right: 200px
}

.as-item__intro {
    color: #fff;
    margin-top: 80px
}

.as-item__intro h3 {
    font: 700 50px/1.25 "Montserrat";
    margin-bottom: .4em
}

.as-item__intro p {
    font: 400 30px/1.3 "Montserrat"
}

@media(max-width: 1600px) {
    .as-box:first-of-type .as-item__intro {
        margin-left: 40px
    }

    .as-box:last-of-type .as-item__intro {
        margin-left: 40px;
        margin-right: 40px
    }

    .as-item__intro h3 {
        font-size: 36px
    }

    .as-item__intro p {
        font-size: 24px
    }
}

@media(max-width: 1400px) {
    .about-slogan {
        margin-top: 120px
    }

    .as-item__intro h3 {
        font-size: 28px
    }

    .as-item__intro p {
        font-size: 20px
    }
}

@media(max-width: 768px) {
    .about-slogan {
        margin-top: 60px
    }

    .about-slogan>li {
        width: 100%
    }

    .as-box:first-of-type {
        border-right: 0
    }

    .as-box:first-of-type .as-item__intro {
        margin-left: 20px
    }

    .as-box:last-of-type {
        border-left: 0
    }

    .as-box:last-of-type .as-item__intro {
        margin-left: 20px;
        margin-right: 20px
    }

    .as-item {
        height: auto;
        padding: 40px 0
    }

    .as-item__intro {
        margin-top: 0
    }

    .as-item__intro h3 {
        font-size: 24px
    }

    .as-item__intro p {
        font-size: 16px
    }
}

.at-item {
    overflow: hidden
}

.at-item::before {
    padding-top: 62.5%
}

.at-item img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.at-left {
    background-color: #f5f7f9
}

.at-left.bg-white {
    background-color: #fff
}

.at-right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background-color: #f5f7f9
}

.at-txt__wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 200px
}

.at-txt {
    position: absolute;
    top: 50%;
    left: 0;
    color: #333;
    max-width: 640px
}

.at-txt h3 {
    font: 700 40px/1.25 "Montserrat"
}

.at-txt h4 {
    font: 700 20px/1.5 "Montserrat"
}

.at-txt p {
    font: 400 14px/20px "Montserrat"
}

@media(max-width: 1600px) {
    .at-txt__wrap {
        left: 40px
    }

    .at-txt h3 {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .about-team>li {
        width: 100%
    }

    .at-right {
        display: none
    }

    .at-left::before {
        padding-top: 0
    }

    .at-txt__wrap {
        position: relative;
        padding: 60px 40px;
        left: auto
    }

    .at-txt {
        position: relative;
        top: auto;
        max-width: 90%;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .at-txt h3 {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .at-txt__wrap {
        padding: 40px 20px
    }
}

@media(max-width: 768px) {
    .at-txt {
        max-width: 100%
    }

    .at-txt h3 {
        font-size: 20px
    }

    .at-right {
        display: block
    }
}

.section-title {
    font: 700 40px/1.25 "Montserrat";
    color: #333
}

.section-title.white {
    color: #fff
}

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

.section-title.small {
    font-size: 24px
}

.section-title.download {
    position: relative
}

.section-title.download .at-link-download {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -20px
}

.honor-item {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    background-color: #f5f7f9;
    padding-top: 40px;
    padding-bottom: 10px
}

.honor-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff
}

.honor-item__circle {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.honor-item__circle::before {
    content: "";
    display: block;
    padding-top: 100%
}

.honor-item__circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 200px solid #e6e9f0;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1.5);
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.honor-item__img {
    z-index: 1;
    width: 60%;
    max-width: 180px;
    margin: 0 auto
}

.honor-item__img::before {
    padding-top: 144.4444444444%
}

.honor-item__info {
    position: relative;
    z-index: 3;
    padding-right: 40px;
    margin-right: 15px;
    margin-left: 15px
}

.honor-item__title {
    font: 400 14px/30px "Montserrat";
    height: 28px;
    color: #333
}

.honor-item__screen {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    color: #c6c6c6;
    cursor: pointer
}

@media(min-width: 1025px) {
    .honor-item:hover .honor-item__title {
        color: #1226aa
    }

    .honor-item:hover .honor-item__circle::after {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1)
    }

    .honor-item__screen:hover {
        color: #1226aa
    }
}

@media(max-width: 1600px) {
    .section-title {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .about-honor {
        margin-top: 120px
    }

    .section-title {
        font-size: 24px
    }
}

@media(max-width: 1024px) {
    .honor-item__circle {
        display: none
    }
}

@media(max-width: 768px) {
    .about-honor {
        margin-top: 80px
    }

    .section-title {
        font-size: 20px
    }
}


.about-devlpment {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
}

.about-devlpment__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 87%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.about-devlpment p,
.about-devlpment h3,
.about-devlpment span,
.about-devlpment i {
    color: #000;
}

.about-devlpment__bg::before {
    content: "";
    display: block;
    padding-top: 100%
}

.about-devlpment__bg span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: no-repeat url(/wp-content/themes/blocksy/static/js/circle.png) center center;
    background-size: contain;
    -webkit-transition: transform 1s;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s
}

.path-item {
    padding: 0 100px;
    color: #fff;
    opacity: .5
}

.path-item__wrap {
    width: 374px
}

.path-item__year {
    font: 700 40px/1.25 "Montserrat"
}

.path-item__desc {
    margin-top: .5em;
    font: 400 16px/22px "Montserrat"
}

.path-item__img {
    margin-top: 10px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    -webkit-transition: all .5s ease .3s;
    transition: all .5s ease .3s
}

.path-item__img::before {
    padding-top: 73.2394366197%
}

.slick-center .path-item,
.slick-active .path-item {
    opacity: 1
}

.slick-center .path-item__img,
.slick-active .path-item__img {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}

@media(max-width: 1600px) {
    .path-item__year {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .path-item__year {
        font-size: 24px
    }
}

@media(max-width: 1280px) {
    .path-item {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .path-item__wrap {
        width: 100%;
        max-width: 374px;
        margin-right: auto;
        margin-left: auto
    }
}

@media(max-width: 768px) {
    .path-item__year {
        font-size: 20px
    }
}

.history-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 0;
    background-color: #fff
}

.history-list {
    font-size: 0;
    white-space: nowrap
}

.history-main {
    position: relative;
    padding: 5px 70px 0
}

.history-body {
    overflow: hidden;
    padding-top: 5px
}

.history-list {
    position: relative;
    -webkit-transition: transform .5s;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s
}

.history-list::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    left: 0;
    height: 1px;
    background-color: #000;
}

.history-progress {
    position: absolute;
    top: 4px;
    left: 0;
    height: 1px;
    background-color: #f28300;
}

.btn-history-arrow {
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    cursor: pointer
}

.btn-history-arrow.left {
    left: 0
}

.btn-history-arrow.right {
    right: 0
}

.history-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 180px;
    cursor: pointer;
    text-align: center
}

.history-item::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background-color: #000
}

.history-item.current .history-item__circle {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.history-item.current .history-item__year {
    opacity: 1
}

.history-item.last::after {
    background-color: rgba(0, 0, 0, 0);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0))
}

.history-item__year {
    margin-top: 30px;
    display: block;
    font: 700 22px/1 "Montserrat";
    color: #fff;
    opacity: .3
}

.history-item__circle {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f28300;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.history-item__circle::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border-radius: 50%;
    background: rgb(255 0 0 / 34%);
}

@media(max-width: 1600px) {
    .history-item__year {
        font-size: 24px
    }
}

@media(max-width: 1400px) {
    .history-item__year {
        font-size: 20px
    }
}

@media(max-width: 768px) {
    .history-main {
        padding-right: 30px;
        padding-left: 30px
    }

    .history-item {
        width: 100px
    }

    .history-item__year {
        font-size: 16px
    }
}

.about-service {
    padding: 100px 0;
    background-color: #f5f7f9
}

.aservice-item {
    font-size: 0;
    color: #333;
    margin-bottom: 100px
}

.aservice-item:last-of-type {
    margin-bottom: 0
}

.aservice-item__title,
.aservice-item__desc {
    display: inline-block;
    vertical-align: top
}

.aservice-item__title {
    width: 24%;
    margin-right: 10%;
    font: 700 40px/1.25 "Montserrat"
}

.aservice-item__desc {
    width: 66%;
    font: 400 14px/24px "Montserrat"
}

.sc-box {
    position: relative;
    font-size: 0
}

.sc-box-img {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    overflow: hidden
}

.sc-box-img::before {
    padding-top: 62.5%
}

.sc-box-txt {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    background-color: #fff
}

.sc-box-txt__wrap {
    position: absolute;
    top: 50%;
    right: 200px;
    left: 80px
}

@media(max-width: 1600px) {
    .aservice-item__title {
        font-size: 32px
    }

    .sc-box-txt__wrap {
        right: 40px
    }
}

@media(max-width: 1400px) {
    .aservice-item__title {
        font-size: 24px
    }

    .sc-box-txt {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        background-color: #fff
    }

    .sc-box-txt__wrap {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        padding: 60px 40px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .sc-box-img {
        display: none
    }
}

@media(max-width: 1200px) {
    .about-service {
        padding: 80px 0
    }

    .aservice-item {
        margin-bottom: 60px
    }

    .aservice-item__title {
        width: 100%;
        margin-right: 0
    }

    .aservice-item__desc {
        width: 100%;
        margin-top: 10px
    }

    .sc-box-txt__wrap {
        padding-right: 20px;
        padding-left: 20px
    }
}

@media(max-width: 768px) {
    .about-service {
        padding: 60px 0
    }

    .aservice-item__title {
        font-size: 20px
    }

    .sc-box-img {
        display: block;
        width: 100%
    }
}

.list-customer {
    margin-right: -4px;
    margin-left: -4px
}

.customer-item {
    overflow: hidden;
    margin-right: 4px;
    margin-left: 4px
}

.customer-item::before {
    padding-top: 40.9523809524%
}

.customer-item:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

@media(max-width: 1200px)and (min-width: 769px) {
    .list-customer>li {
        width: 16.6666%
    }

    .list-customer>li:nth-of-type(n+7) {
        margin-top: 8px
    }
}

@media(max-width: 768px)and (min-width: 481px) {
    .list-customer>li {
        width: 20%
    }

    .list-customer>li:nth-of-type(n+6) {
        margin-top: 8px
    }
}

@media(max-width: 480px) {
    .list-customer>li {
        width: 25%
    }

    .list-customer>li:nth-of-type(n+5) {
        margin-top: 8px
    }
}

.welfare {
    position: relative;
    font-size: 0
}

.welfare-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

.welfare-right {
    padding: 80px 0
}

.welfare-info {
    color: #333;
    margin-left: 120px;
    max-width: 640px
}

.welfare-info h3 {
    font: 700 40px/1.25 "Montserrat"
}

.welfare-info p {
    font: 400 14px/16px "Montserrat"
}

.rec-form {
    padding-top: 140px;
    padding-bottom: 50px;
    background: #1226aa url(../images/rem_bg.png) no-repeat top right
}

.rec-type {
    font-size: 0
}

.rec-type>span,
.rec-type>a {
    position: relative;
    margin: 0 20px;
    display: inline-block;
    vertical-align: top;
    font: 400 14px/24px "Montserrat";
    color: #fff;
    opacity: .5
}

.rec-type>span.current,
.rec-type>a.current {
    opacity: 1
}

.rec-type>span::after,
.rec-type>a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    margin-top: -5px;
    width: 1px;
    height: 10px;
    background-color: rgba(255, 255, 255, .5)
}

.rec-type>span:first-of-type,
.rec-type>a:first-of-type {
    margin-left: 0
}

.rec-type>span:last-of-type,
.rec-type>a:last-of-type {
    margin-right: 0
}

.rec-type>span:last-of-type::after,
.rec-type>a:last-of-type::after {
    display: none
}

@media(max-width: 1600px) {
    .welfare-info {
        width: 80%;
        margin-left: 60px
    }

    .welfare-info h3 {
        font-size: 32px
    }

    .rec-form {
        padding-top: 120px
    }
}

@media(max-width: 1400px) {
    .welfare-info h3 {
        font-size: 24px
    }

    .rec-form {
        padding-top: 100px
    }
}

@media(max-width: 1200px) {
    .welfare-left {
        display: none
    }

    .welfare {
        padding-left: 0 !important
    }

    .welfare-info {
        width: auto;
        max-width: inherit;
        margin-left: 20px;
        margin-right: 20px
    }

    .rec-form {
        padding-top: 80px
    }
}

@media(max-width: 768px) {
    .welfare-info h3 {
        font-size: 20px
    }

    .welfare-right {
        padding: 60px 0
    }

    .rec-form {
        padding-top: 60px
    }

    .rec-type>span {
        font-size: 12px
    }

    .list-rec-form>li {
        width: 100%
    }

    .list-rec-form>li:nth-of-type(n+2) {
        margin-top: 20px
    }

    .res-input {
        padding: 0 10px;
        font-size: 12px
    }
}

.list-rec-form {
    margin-right: -2px;
    margin-left: -2px
}

.rec-form-item {
    position: relative;
    margin-right: 2px;
    margin-left: 2px
}

.rec-select {
    display: block;
    width: 100%;
    border: 0;
    padding: 20px;
    outline: 0;
    font: 400 14px/1 "Montserrat";
    color: #bababa
}

.select-arrow {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 20px;
    line-height: 1;
    margin-top: -0.5em;
    color: #1226aa;
    pointer-events: none
}

.res-input {
    width: 100%;
    display: block;
    border: 0;
    outline: 0;
    padding: 0 20px;
    background-color: #fff;
    height: 54px;
    font-size: 14px;
    font-family: "Montserrat";
    color: #333
}

.res-submit {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 20px;
    height: 54px;
    width: 60px;
    text-align: center;
    cursor: pointer;
    color: #1226aa
}

.list-recr {
    margin-right: -2px;
    margin-left: -2px
}

.list-recr>li:nth-of-type(n+4) {
    margin-top: 4px
}

.recr-item {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 2px
}

.recr-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #1226aa;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center
}

.recr-item__info {
    position: relative;
    z-index: 1;
    padding: 40px;
    background-color: #f5f7f9;
    color: #333;
    height: 300px
}

.recr-item__title {
    font: 700 24px/1.25 "Montserrat"
}

.recr-item__desc {
    margin-top: 1.15em;
    font: 400 14px/20px "Montserrat"
}

.recr-item__desc p {
    margin-bottom: 10px
}

.recr-item__desc p>span {
    font-weight: 700
}

.recr-item__more {
    position: relative;
    z-index: 5;
    padding-left: 40px;
    font: 400 14px/35px "Montserrat";
    color: #bbc2d9
}

.recr-item_btn {
    position: absolute;
    right: 20px;
    top: -16px;
    width: 32px;
    height: 32px;
    text-align: center;
    border-radius: 50%
}

.recr-item_btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #1226aa;
    border-radius: 50%
}

.recr-item_btn>span {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    line-height: 32px;
    color: #1226aa
}

@media(min-width: 1025px) {
    .recr-item:hover::before {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }

    .recr-item:hover .recr-item__info {
        background-color: rgba(0, 0, 0, 0);
        color: #fff
    }

    .recr-item:hover .recr-item__more {
        color: #fff
    }

    .recr-item:hover .recr-item_btn {
        background-color: #fff
    }

    .recr-item:hover .recr-item_btn::before {
        border-color: #fff
    }
}

@media(max-width: 1600px) {
    .recr-item__title {
        font-size: 20px
    }
}

@media(max-width: 1200px) {
    .list-recr>li {
        width: 50%
    }

    .list-recr>li:nth-of-type(n+3) {
        margin-top: 4px
    }

    .recr-item__info {
        padding: 20px
    }
}

@media(max-width: 768px) {
    .recr-item__title {
        font-size: 16px
    }

    .list-recr>li {
        width: 100%
    }

    .list-recr>li:nth-of-type(n+2) {
        margin-top: 4px
    }
}

.pager {
    font-size: 0;
    text-align: center
}

.pager>a {
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
    font: 400 14px/20px "Montserrat";
    min-width: 20px;
    border-radius: 50%;
    color: #333
}

.pager>a:hover {
    color: #1226aa
}

.pager>a.current {
    background-color: #1226aa;
    color: #fff
}

.recrd-header {
    background-color: #f5f7f9;
    padding: 20px 0
}

.recrd-title {
    font: 700 40px/1.25 "Montserrat";
    color: #1226aa
}

.recrd-tags {
    font-size: 0
}

.recrd-tags>span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
    font: 400 14px/24px "Montserrat";
    color: #1226aa
}

.recrd-tags>span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    margin-top: -5px;
    width: 1px;
    height: 10px;
    background-color: #1226aa
}

.recrd-tags>span:last-of-type {
    margin-right: 0
}

.recrd-tags>span:last-of-type::after {
    display: none
}

.article-main {
    position: relative
}

.article-left {
    width: calc(100% - 120px);
    max-width: 1000px
}

.recrd-article h3 {
    font: 700 20px/1.2 "Montserrat";
    color: #1226aa
}

.recrd-article p {
    font: 400 14px/20px "Montserrat";
    color: #333
}

.recrd-contact {
    font-size: 0
}

.recrd-qrcode {
    display: inline-block;
    vertical-align: top;
    width: 94px;
    height: auto
}

.recrd-contact-info {
    margin-left: 1em;
    display: inline-block;
    vertical-align: top;
    font: 400 14px/24px "Montserrat";
    color: #333
}

.recrd-side {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px
}

.recrd-side-link {
    display: block;
    font: 400 14px/16px "Montserrat";
    color: #333;
    margin-bottom: 18px
}

.recrd-side-link>span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #1226aa;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center
}

.recrd-side-link>span::before {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    display: inline-block;
    vertical-align: top
}

.go-back::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fff;
    margin-top: -3px;
    margin-left: -3px
}

@media(min-width: 1025px) {
    .recrd-side-link:hover {
        color: #1226aa;
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
}

@media(max-width: 1600px) {
    .recrd-title {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .recrd-title {
        font-size: 24px
    }
}

@media(max-width: 768px) {
    .article-left {
        width: 100%
    }

    .recrd-side {
        position: relative;
        width: auto;
        margin-top: 40px
    }

    .recrd-side-link {
        display: inline-block;
        vertical-align: top;
        margin-right: 20px
    }

    .recrd-title {
        font-size: 20px
    }

    .recrd-tags>span {
        margin-right: 20px
    }

    .recrd-tags>span::after {
        right: -10px
    }

    .recrd-qrcode {
        width: 80px
    }

    .recrd-contact-info {
        font-size: 12px;
        line-height: 20px
    }
}

.list-contact {
    margin-right: -1px;
    margin-left: -1px;
    margin-top: 2px
}

.contact-item {
    margin-right: 1px;
    margin-left: 1px
}

.contact-item__img::before {
    padding-top: 59.2476489028%
}

.contact-item__info {
    padding: 50px;
    background-color: #f8f8f8;
    height: 29.8958333333vw
}

.contact-item__title {
    font: 700 50px/1.2 "Montserrat";
    color: #1226aa
}

.contact-item__title>span {
    display: inline-block;
    vertical-align: top;
    font-weight: 400;
    margin-right: 10px;
    font-size: 40px;
    line-height: 60px
}

.contact-item__part {
    font: 700 24px/1.25 "Montserrat";
    color: #333
}

.contact-item__desc {
    font: 400 14px/20px "Montserrat";
    color: #333
}

.contact-item__desc p>span {
    font-weight: 700
}

.contact-thanks {
    width: 66.6666%;
    color: #333
}

.contact-thanks h3 {
    font: 700 30px/1.25 "Montserrat"
}

.contact-thanks p {
    font: 400 14px/18px "Montserrat"
}

.cform-box {
    font-size: 0;
    margin-right: -2px;
    margin-left: -2px
}

.cform-item {
    display: inline-block;
    vertical-align: top
}

.cform-item__wrap {
    position: relative;
    margin-right: 2px;
    margin-left: 2px
}

.cform-item__wrap label.error {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 12px;
    line-height: 14px;
    color: #333
}

.col-25 {
    width: 25%
}

.col-50 {
    width: 50%
}

.col-33 {
    width: 33.3333%
}

.col-66 {
    width: 66.6666%
}

.col-100 {
    width: 100%
}

.cform-name {
    position: relative;
    padding-left: 180px
}

.cform-name>span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 180px;
    text-align: center;
    font: 400 14px/54px "Montserrat";
    background-color: #1226aa;
    color: #fff
}

.cform-select {
    display: block;
    width: 100%;
    padding: 20px 0 20px 30px;
    border: 0;
    outline: 0;
    background-color: #f5f7f9;
    font: 400 14px/1 "Montserrat"
}

.cform-input {
    display: block;
    border: 0;
    padding: 0 0 0 15px;
    width: 100%;
    height: 54px;
    outline: 0;
    background-color: #f5f7f9;
    color: #1226aa;
    font-size: 16px;
    font-weight: 400;
    font-family: "Montserrat"
}

.cform-textarea {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border: 0;
    outline: 0;
    resize: none;
    background-color: #f5f7f9;
    color: #1226aa;
    font-size: 16px;
    font-weight: 400;
    font-family: "Montserrat";
    line-height: 1.5
}

.cform-submit {
    display: inline-block;
    vertical-align: top;
    width: 140px;
    height: 44px;
    border-radius: 44px;
    font-weight: 400;
    font-family: "Montserrat";
    border: 0;
    padding: 0;
    background-color: #1226aa;
    color: #fff
}

.cform-checkbox-title {
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    font-weight: 500;
    font-family: "Montserrat"
}

.cform-checkbox-input {
    width: 0;
    height: 0;
    opacity: 0
}

.cform-checkbox-input:checked+label::after {
    opacity: 1
}

.cform-checkbox-label {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    padding-left: 1em;
    margin-right: 2em;
    margin-top: .5em;
    color: #666;
    font-weight: 400;
    font-family: "Montserrat";
    cursor: pointer
}

.cform-checkbox-label::before,
.cform-checkbox-label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: .75em;
    height: .75em;
    margin-top: -0.375em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 50%
}

.cform-checkbox-label::before {
    border: 1px solid #1226aa
}

.cform-checkbox-label::after {
    background-color: #1226aa;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

@media(max-width: 1600px) {
    .contact-item__title {
        font-size: 36px;
        line-height: 40px
    }

    .contact-item__title>span {
        font-size: 32px;
        line-height: 40px
    }

    .contact-item__info {
        padding: 40px
    }

    .contact-item__part {
        font-size: 20px
    }

    .contact-item__desc {
        margin-top: 40px
    }

    .contact-item__info {
        height: auto
    }

    .contact-thanks h3 {
        font-size: 24px
    }
}

@media(max-width: 1400px) {
    .contact-item__title {
        font-size: 28px
    }

    .contact-item__title>span {
        font-size: 24px
    }

    .contact-item__part {
        font-size: 16px
    }

    .contact-thanks h3 {
        font-size: 20px
    }
}

@media(max-width: 1200px) {
    .contact-item__info {
        padding: 20px
    }

    .cform-input {
        font-size: 12px;
        height: 40px
    }

    .cform-textarea {
        font-size: 12px;
        line-height: 20px;
        height: 80px
    }

    .cform-name {
        padding-left: 140px
    }

    .cform-name>span {
        line-height: 40px;
        font-size: 12px;
        width: 140px
    }

    .cform-select {
        font-size: 12px;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 10px
    }

    .cform-submit {
        height: 40px
    }
}

@media(max-width: 1024px) {
    .list-contact>li {
        width: 50%
    }

    .contact-thanks {
        width: auto
    }

    .cform-item.col-66 {
        width: 100%
    }

    .cform-item.col-33 {
        width: 50%
    }
}

@media(max-width: 768px) {
    .contact-item__title {
        font-size: 24px
    }

    .contact-item__title>span {
        font-size: 20px
    }

    .list-contact>li {
        width: 100%
    }

    .contact-item__part {
        font-size: 14px
    }
}

@media(max-width: 640px) {
    .cform-item.col-33 {
        width: 100%
    }

    .cform-name {
        padding-left: 120px
    }

    .cform-name>span {
        width: 120px;
        font-size: 12px
    }

    .cform-select {
        padding-left: 10px;
        font-size: 12px
    }

    .select-arrow {
        font-size: 12px;
        right: 10px
    }
}

.tech-item {
    position: relative
}

.tech-item:nth-of-type(2n+1) {
    text-align: right
}

.tech-item:nth-of-type(2n+1) .tech-item__info {
    background-color: #f5f7f9;
    border-right: 4px solid #fff
}

.tech-item:nth-of-type(2n) .tech-item__info {
    right: 0;
    left: 640px
}

.tech-item__img {
    display: inline-block;
    vertical-align: top;
    width: 640px;
    overflow: hidden
}

.tech-item__img::before {
    padding-top: 87.1473354232%
}

.tech-item__info {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 640px;
    text-align: left;
    padding-left: 200px
}

.tech-item__desc {
    color: #333;
    width: 640px;
    padding-top: 100px
}

.tech-item__desc h3 {
    font: 700 40px/1.25 "Montserrat"
}

.tech-item__desc p {
    font: 400 14px/20px "Montserrat"
}

@media(min-width: 1025px) {
    .tech-item:hover .tech-item__desc {
        color: #1226aa
    }

    .tech-item:hover .view-more.black {
        color: #1226aa
    }
}

@media(max-width: 1600px) {
    .tech-item__info {
        padding-left: 40px;
        padding-right: 40px
    }

    .tech-item__info .view-more {
        margin-left: 40px;
        margin-bottom: 60px
    }

    .tech-item__desc {
        padding-left: 40px;
        padding-top: 80px;
        width: auto;
        max-width: 640px
    }

    .tech-item__desc h3 {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .tech-item__desc {
        padding-top: 60px
    }

    .tech-item__desc h3 {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .tech-item__desc {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 60px
    }

    .tech-item__info {
        position: relative;
        padding-left: 0
    }

    .tech-item__info .view-more {
        margin-left: 20px
    }

    .tech-item__desc {
        width: auto;
        max-width: inherit
    }

    .tech-item:nth-of-type(2n) .tech-item__info {
        left: 0
    }

    .tech-item:nth-of-type(2n+1) .tech-item__info {
        border-right: 0
    }
}

@media(max-width: 768px) {
    .tech-item__desc {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .tech-item__desc h3 {
        font-size: 20px
    }

    .tech-item__info {
        padding-right: 0
    }
}

.list-cases {
    margin-right: -2px;
    margin-left: -2px
}

.list-cases>li:nth-of-type(n+4) {
    margin-top: 4px
}

.case-item {
    position: relative;
    display: block;
    margin-right: 2px;
    margin-left: 2px
}

.case-item__img {
    overflow: hidden
}

.case-item__img::before {
    padding-top: 65.625%
}

.case-item__gradient {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 44.1176470588%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 28, 176, 0)), to(rgb(3, 27, 174)));
    background-image: linear-gradient(to bottom, rgba(4, 28, 176, 0), rgb(3, 27, 174))
}

.case-item__txt {
    position: absolute;
    bottom: 60px;
    left: 80px;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
}

.case-item__txt.small {
    bottom: 30px;
    left: 30px
}

.case-item__txt.small .case-item__title {
    font-size: 22px
}

.case-item__txt.small .case-item__desc {
    line-height: 20px;
    margin-top: 10px
}

.case-item__gradient,
.case-item__txt {
    visibility: hidden;
    opacity: 0
}

.case-item__title {
    margin-top: .1em;
    font: 700 50px/1.25 "Montserrat";
    color: #fff
}

.case-item__desc {
    font: 400 14px/24px "Montserrat";
    color: #fff
}

@media(min-width: 1025px) {

    .case-item:hover .case-item__gradient,
    .case-item:hover .case-item__txt,
    .fifa-item:hover .case-item__gradient,
    .fifa-item:hover .case-item__txt {
        visibility: visible;
        opacity: 1
    }

    .case-item:hover .case-item__txt,
    .fifa-item:hover .case-item__txt {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@media(max-width: 1600px) {
    .case-item__title {
        font-size: 36px
    }

    .case-item__txt {
        bottom: 40px;
        left: 40px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .case-item__txt.small {
        bottom: 20px;
        left: 20px
    }

    .case-item__txt.small .case-item__title {
        font-size: 16px
    }
}

@media(max-width: 1400px) {
    .case-item__title {
        font-size: 28px
    }
}

@media(max-width: 1200px) {
    .case-item__txt {
        bottom: 20px;
        left: 20px
    }

    .case-item__title {
        font-size: 16px
    }
}

@media(max-width: 1024px) {

    .case-item__gradient,
    .case-item__txt {
        visibility: visible;
        opacity: 1
    }

    .list-cases>li {
        width: 50%
    }

    .list-cases>li:nth-of-type(n+3) {
        margin-top: 4px
    }
}

@media(max-width: 640px) {
    .list-cases>li {
        width: 100%
    }

    .list-cases>li:nth-of-type(n+2) {
        margin-top: 4px
    }
}

.techd-banner::before {
    padding-top: 41.3541666667%
}

.list-techdr {
    margin-right: -1px;
    margin-left: -1px
}

.techdr-item {
    padding: 50px 30px;
    font-size: 0;
    height: 240px;
    margin-right: 1px;
    margin-left: 1px;
    background-color: #f5f7f9
}

.techdr-item__img {
    width: 120px;
    display: inline-block;
    vertical-align: top
}

.techdr-item__img::before {
    padding-top: 100%
}

.techdr-item__info {
    padding-left: 30px;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 120px)
}

.techdr-item__title {
    font: 700 30px/1.2 "Montserrat";
    color: #333
}

.techdr-item__desc {
    margin-top: 10px;
    font: 400 14px/18px "Montserrat";
    color: #333
}

.techdf-item {
    margin-bottom: 100px
}

.techdf-item:last-of-type {
    margin-bottom: 0
}

.techdf-item__img::before {
    padding-top: 42.7631578947%
}

.techdf-item__info {
    padding: 40px 60px;
    background-color: #f5f7f9;
    color: #333
}

.techdf-item__title {
    font: 700 40px/1.25 "Montserrat"
}

.techdf-item__desc {
    margin-top: 20px;
    font: 400 14px/22px "Montserrat"
}

@media(max-width: 1600px) {
    .techdr-item__title {
        font-size: 24px
    }

    .techdr-item__img {
        width: 100px
    }

    .techdf-item__info {
        padding: 30px 40px
    }

    .techdf-item {
        margin-bottom: 80px
    }

    .techdf-item__title {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .techdf-item__title {
        font-size: 24px
    }

    .techdf-item {
        margin-bottom: 60px
    }
}

@media(max-width: 1200px) {
    .techdr-item {
        height: auto;
        padding: 30px 20px
    }

    .list-techdr>li {
        width: 100%
    }

    .list-techdr>li:nth-of-type(n+2) {
        margin-top: 2px
    }

    .techdf-item__info {
        padding: 20px
    }

    .techdf-item {
        margin-bottom: 60px
    }
}

@media(max-width: 768px) {
    .techdf-item {
        margin-bottom: 40px
    }

    .techdr-item__title {
        font-size: 20px
    }

    .techdr-item__img {
        width: 60px
    }

    .techdr-item__info {
        width: calc(100% - 60px)
    }

    .techdf-item__title {
        font-size: 20px
    }
}

@media(max-width: 750px) {
    .techd-banner::before {
        padding-top: 0;
        height: 300px
    }

    .techd-banner img {
        left: 50%;
        height: 300px;
        width: auto;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }
}

.techp-item {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 70px 0
}

.techp-item::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #f5f7f9;
    pointer-events: none;
    border-top-width: 2px
}

.techp-item__img-box {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
    overflow: visible
}

.techp-item__img-box::before {
    padding-top: 100%
}

.techp-item__img-box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    border: 500px solid #f5f7f9;
    -webkit-transform: translate(-50%, -50%) scale(3);
    transform: translate(-50%, -50%) scale(3)
}

.techp-item__img {
    position: absolute;
    z-index: 2;
    top: 5%;
    left: 5%;
    width: 90%
}

.techp-item__img::before {
    padding-top: 100%
}

.techp-item__title {
    margin-right: 10px;
    margin-left: 10px;
    font: 700 24px/1.25 "Montserrat";
    color: #333;
    text-align: center
}

.techp-item__title>span {
    padding: 0 50px;
    position: relative;
    display: inline-block;
    vertical-align: top
}

.techp-item__title>span::before,
.techp-item__title>span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background-color: #333;
    border-radius: 50%
}

.techp-item__title>span::before {
    left: 0
}

.techp-item__title>span::after {
    right: 0
}

@media(min-width: 1025px) {
    .techp-item:hover .techp-item__title {
        color: #1226aa
    }

    .techp-item:hover .techp-item__img-box::after {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1)
    }
}

@media(max-width: 1600px) {
    .techp-item__title {
        font-size: 20px
    }

    .techp-item__title>span {
        padding-right: 40px;
        padding-left: 40px
    }
}

@media(max-width: 1400px) {
    .techp-item__title {
        font-size: 24px
    }
}

@media(max-width: 1024px) {
    .list-techp {
        margin-right: -2px;
        margin-left: -2px
    }

    .list-techp>li {
        width: 50%
    }

    .list-techp>li:nth-of-type(n+3) {
        margin-top: 4px
    }

    .techp-item {
        margin-right: 2px;
        margin-left: 2px
    }

    .techp-item__img-box::after {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1)
    }
}

@media(max-width: 768px) {
    .techp-item__title {
        font-size: 20px
    }

    .techp-item__title>span {
        padding-right: 20px;
        padding-left: 20px
    }
}

@media(max-width: 640px) {
    .list-techp>li {
        width: 100%
    }

    .list-techp>li:nth-of-type(n+2) {
        margin-top: 4px
    }
}

.service-center {
    position: relative;
    font-size: 0;
    text-align: right;
    background-color: #f5f7f9
}

.sc-left {
    position: absolute;
    top: 0;
    right: 640px;
    bottom: 0;
    left: 0
}

.sc-right {
    display: inline-block;
    vertical-align: top;
    width: 640px
}

.sc-right::before {
    padding-top: 67.0846394984%
}

.sc-left__txt {
    position: absolute;
    top: 50%;
    left: 200px;
    width: 640px;
    color: #333;
    text-align: left
}

.sc-left__txt h3 {
    font: 700 40px/1.25 "Montserrat"
}

.sc-left__txt p {
    font: 400 14px/22px "Montserrat"
}

.list-ssale {
    margin-right: -2px;
    margin-left: -2px
}

.list-ssale>li:nth-of-type(1) .ssale-item {
    background-color: #1226aa
}

.list-ssale>li:nth-of-type(2) .ssale-item {
    background-color: #283ed5
}

.list-ssale>li:nth-of-type(3) .ssale-item {
    background-color: #234dfc
}

.ssale-item {
    margin-right: 2px;
    margin-left: 2px;
    padding: 50px 40px;
    color: #fff;
    height: 420px
}

.ssale-item__header {
    position: relative
}

.ssale-item__img {
    position: absolute;
    top: 10px;
    right: 0;
    height: 60px;
    width: auto;
    opacity: .15
}

.ssale-item__num {
    display: inline-block;
    vertical-align: top;
    font: 700 80px/90px "Montserrat"
}

.ssale-item__title {
    margin-left: 20px;
    padding: 7px 0;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 200px);
    font: 700 30px/38px "Montserrat"
}

.ssale-item__desc {
    font: 400 14px/22px "Montserrat"
}

@media(max-width: 1600px) {
    .sc-left__txt {
        left: 40px;
        right: 40px;
        width: auto;
        max-width: 640px
    }

    .sc-left__txt h3 {
        font-size: 32px
    }

    .ssale-item__num {
        font-size: 64px;
        line-height: 1
    }

    .ssale-item__title {
        font-size: 24px;
        line-height: 32px;
        padding-top: 0;
        padding-bottom: 0
    }

    .ssale-item__img {
        top: 5px;
        height: 50px
    }
}

@media(max-width: 1400px) {
    .sc-left__txt h3 {
        font-size: 24px
    }

    .ssale-item__num {
        font-size: 48px
    }

    .ssale-item__title {
        font-size: 20px;
        line-height: 24px
    }

    .ssale-item__img {
        height: 40px;
        top: 4px
    }
}

@media(max-width: 1200px) {
    .ssale-item {
        padding: 30px 20px
    }

    .sc-left {
        position: relative;
        top: auto;
        right: auto;
        padding: 40px 20px
    }

    .sc-left__txt {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .sc-right {
        display: none
    }

    .ssale-item {
        height: auto
    }

    .list-ssale>li {
        width: 100%
    }

    .list-ssale>li:nth-of-type(n+2) {
        margin-top: 4px
    }
}

@media(max-width: 768px) {
    .ssale-item__num {
        font-size: 32px
    }

    .ssale-item__title {
        font-size: 14px;
        line-height: 16px
    }

    .ssale-item__img {
        height: 32px;
        top: 0
    }
}

.service-choose {
    padding: 70px 0;
    background-color: #e2e9ef
}

.service-choose .default-content {
    max-width: 1000px
}

.default-content {
    color: #333
}

.default-content h3 {
    font: 700 40px/1.25 "Montserrat"
}

.default-content h4 {
    font: 700 20px/1.5 "Montserrat"
}

.default-content p {
    font: 400 14px/22px "Montserrat"
}

.service-how {
    padding: 120px 0;
    font-size: 0
}

.serviceh-left,
.serviceh-right {
    display: inline-block;
    vertical-align: bottom
}

.serviceh-left {
    width: calc(100% - 240px)
}

.serviceh-right {
    width: 240px
}

.sh-content {
    color: #333
}

.sh-content h3 {
    font: 700 40px/1.25 "Montserrat"
}

.sh-content h4 {
    font: 700 20px/1.5 "Montserrat"
}

.sh-content p {
    font: 400 14px/30px "Montserrat"
}

.sh-more {
    font: 400 16px/1.5 "Montserrat";
    color: #333;
    text-transform: uppercase
}

.sh-pdf {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 160px;
    height: 50px;
    background-color: #1226aa;
    color: #fff;
    font: 400 14px/50px "Montserrat";
    border-radius: 25px
}

.sh-pdf>span {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    font-size: 20px;
    line-height: 50px
}

.service-network {
    padding: 140px 0;
    background-color: #f5f7f9
}

.sn-item {
    margin-top: 2px;
    position: relative;
    padding-left: 380px;
    background-color: #fff
}

.sn-item__num {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    text-align: center;
    background-color: #1226aa;
    color: #fff;
    font: 700 20px/60px "Montserrat"
}

.sn-item__title {
    position: absolute;
    top: 0;
    left: 70px;
    width: 310px;
    border-right: 2px solid #f5f7f9;
    padding-left: 1em;
    font: 700 20px/60px "Montserrat";
    color: #333
}

.sn-item__content {
    position: relative;
    height: 60px
}

.sn-item__txt {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    font: 400 16px/20px "Montserrat";
    color: #333
}

.sn-item.flex {
    padding-left: 0;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.sn-item.flex::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 70px;
    background-color: #1226aa
}

.sn-item.flex .sn-item__num,
.sn-item.flex .sn-item__title {
    position: relative;
    top: inherit;
    left: inherit;
    min-height: 60px;
    height: inherit
}

.sn-item.flex .sn-item__title {
    border-right: 0
}

.sn-item.flex .sn-item__content {
    border-left: 2px solid #f5f7f9;
    padding: 5px 0;
    width: calc(100% - 380px);
    min-height: 60px;
    height: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.sn-item.flex .sn-item__txt {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    -webkit-transform: none;
    transform: none
}

.sn-item.flex .sn-item__txt p {
    padding: 5px 10px
}

.sn-item.flex .sn-item__txt p:nth-of-type(n+2) {
    border-top: 1px solid #f5f7f9
}

@media(max-width: 1600px) {
    .default-content h3 {
        font-size: 32px
    }

    .sh-content h3 {
        font-size: 32px
    }

    .sh-content h4 {
        font-size: 16px
    }

    .service-network {
        padding: 120px 0
    }

    .sn-item__num,
    .sn-item__title {
        font-size: 16px
    }

    .sn-item__txt {
        font-size: 14px
    }
}

@media(max-width: 1400px) {
    .default-content h3 {
        font-size: 24px
    }

    .sh-content h3 {
        font-size: 24px
    }

    .service-network {
        padding: 100px 0
    }
}

@media(max-width: 1024px) {
    .serviceh-left {
        display: block;
        width: 100%
    }

    .serviceh-right {
        margin-top: 60px
    }

    .service-network {
        padding: 60px 0
    }

    .sn-item {
        padding-left: 0
    }

    .sn-item__num {
        width: 60px;
        position: relative;
        display: inline-block;
        vertical-align: top
    }

    .sn-item__title {
        left: auto;
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 60px);
        border-right: 0
    }

    .sn-item__content {
        height: auto;
        padding: 20px
    }

    .sn-item__txt {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .sn-item.flex {
        display: block
    }

    .sn-item.flex::before {
        display: none
    }

    .sn-item.flex .sn-item__num,
    .sn-item.flex .sn-item__title {
        display: inline-block;
        vertical-align: top;
        line-height: 40px;
        min-height: 40px
    }

    .sn-item.flex .sn-item__num {
        width: 40px
    }

    .sn-item.flex .sn-item__title {
        width: calc(100% - 40px)
    }

    .sn-item.flex .sn-item__content {
        width: 100%;
        border-left: 0;
        border-top: 1px solid #f5f7f9
    }
}

@media(max-width: 768px) {
    .default-content h3 {
        font-size: 20px
    }

    .sh-content h3 {
        font-size: 20px
    }

    .sh-content h4 {
        font-size: 14px
    }
}

.case-leadtxt {
    position: absolute;
    top: 50%;
    right: 160px;
    left: 200px
}

.list-caser>li:nth-of-type(3n) .caser-item {
    border-right-width: 0
}

.caser-item {
    position: relative;
    z-index: 1;
    display: block;
    height: 420px;
    padding: 80px 90px 0;
    color: #333
}

.caser-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-right: 2px solid #f5f7f9;
    border-bottom: 2px solid #f5f7f9
}

.caser-item::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.caser-item__img {
    height: 90px;
    position: relative
}

.caser-item__img img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%
}

.caser-item__img img.white {
    visibility: hidden;
    opacity: 0
}

.caser-item__title {
    font: 700 40px/1.25 "Montserrat";
    margin-top: 40px
}

.caser-item__desc {
    font: 400 14px/18px "Montserrat";
    margin-top: 20px
}

@media(min-width: 1025px) {
    .caser-item:hover {
        color: #fff
    }

    .caser-item:hover .caser-item__img img.black {
        visibility: hidden;
        opacity: 0
    }

    .caser-item:hover .caser-item__img img.white {
        visibility: visible;
        opacity: 1
    }

    .caser-item:hover::after {
        background-color: #1226aa
    }
}

@media(max-width: 1600px) {
    .case-leadtxt {
        left: 40px;
        right: 40px
    }

    .default-content h3 {
        font-size: 32px
    }

    .caser-item {
        padding: 60px 40px 0
    }

    .caser-item__title {
        font-size: 32px;
        margin-top: 30px
    }

    .caser-item__img {
        height: 70px
    }
}

@media(max-width: 1400px) {
    .default-content h3 {
        font-size: 24px
    }

    .caser-item__title {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .tech-item__img {
        display: none
    }

    .case-leadtxt {
        position: relative;
        top: auto;
        right: 0;
        left: 0;
        padding: 40px 20px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .caser-item {
        height: 320px;
        padding: 50px 20px 0
    }

    .list-caser>li {
        width: 50%
    }

    .list-caser>li:nth-of-type(3n) .caser-item {
        border-right-width: 2px
    }

    .list-caser>li:nth-of-type(2n) .caser-item {
        border-right-width: 0
    }

    .caser-item__img {
        height: 60px
    }
}

@media(max-width: 768px) {
    .default-content h3 {
        font-size: 20px
    }

    .caser-item__title {
        font-size: 20px
    }

    .caser-item {
        height: auto;
        padding: 40px 20px 40px
    }

    .list-caser>li {
        width: 100%
    }

    .list-caser>li:nth-of-type(3n) .caser-item {
        border-right-width: 0
    }

    .caser-item__img {
        height: 45px
    }
}

.at-link-download {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 0 20px;
    height: 40px;
    background-color: #1226aa;
    color: #fff;
    font: 400 14px/40px "Montserrat";
    border-radius: 25px
}

.at-link-download>span {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    font-size: 20px;
    line-height: 40px
}

.list-solutionf {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    gap: 4px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.list-solutionf>li {
    width: calc(25% - 3px)
}

.sof-item {
    position: relative;
    height: 100%;
    padding: 60px 50px;
    background-color: #f5f7f9;
    color: #333;
    font-size: 0
}

.sof-item__img {
    display: inline-block;
    vertical-align: top;
    width: 100px
}

.sof-item__img::before {
    padding-top: 100%
}

.sof-item__img .white {
    visibility: hidden;
    opacity: 0
}

.sof-item__info {
    margin-left: 40px;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 140px);
    color: #333
}

.sof-item__title {
    font: 700 20px/1.5 "Montserrat"
}

.sof-item__desc {
    margin-top: 20px;
    font: 400 14px/20px "Montserrat"
}

.sd-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.sdb-left,
.sdb-right {
    width: 50%
}

.sdb-left__wrap {
    margin-left: 200px;
    margin-right: 80px;
    max-width: 640px
}

.sdb-left__text video {
    height: inherit !important;
    max-width: 100%;
    margin-top: 20px
}

.sdb-right__img::before {
    padding-top: 62.5%
}

@media(min-width: 1025px) {
    .sof-item:hover {
        background-color: #1226aa
    }

    .sof-item:hover .sof-item__img .white {
        visibility: visible;
        opacity: 1
    }

    .sof-item:hover .sof-item__img .blue {
        visibility: hidden;
        opacity: 0
    }

    .sof-item:hover .sof-item__info {
        color: #fff
    }
}

@media(max-width: 1760px) {
    .list-solutionf>li {
        width: calc(50% - 2px)
    }
}

@media(max-width: 1600px) {
    .sdb-left__wrap {
        margin-left: 40px;
        margin-right: 40px
    }

    .sof-item__img {
        width: 80px
    }

    .sof-item {
        padding: 40px
    }

    .sof-item__info {
        margin-left: 30px
    }

    .sof-item__title {
        font-size: 16px
    }
}

@media screen and (max-width: 1200px) {
    .sdb-left__wrap {
        margin-left: 20px;
        margin-right: 20px
    }

    .sd-box {
        display: block
    }

    .sdb-left,
    .sdb-right {
        width: 100%
    }

    .sdb-right {
        margin-top: 30px
    }
}

@media(max-width: 1024px) {
    .sof-item {
        height: auto;
        padding-bottom: 40px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 40px
    }

    .list-solutionf>li {
        width: 100%
    }
}

@media(max-width: 768px) {
    .sof-item__title {
        font-size: 14px
    }

    .sof-item__desc {
        font-size: 12px
    }

    .sof-item__info {
        margin-left: 20px;
        width: calc(100% - 70px)
    }
}

@media(max-width: 640px) {
    .sof-item__img {
        width: 50px
    }

    .sof-item__desc {
        margin-top: 10px
    }
}

.case-number {
    font-size: 0
}

.casen-item {
    display: inline-block;
    vertical-align: top;
    position: relative;
    height: 310px
}

.casen-item__txt {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    color: #1226aa;
    text-align: center
}

.casen-item__txt>span {
    display: inline-block;
    vertical-align: top;
    text-align: left
}

.casen-item__txt.white {
    color: #fff
}

.casen-item__txt.big .casen-item__tleft {
    font-size: 80px
}

.casen-item__txt.big .casen-item__tright {
    padding-top: 16px;
    font-size: 20px;
    line-height: 24px
}

.casen-item__tleft {
    font: 700 68px/1 "Montserrat"
}

.casen-item__tleft>span {
    display: inline-block;
    vertical-align: top
}

.casen-item__tright {
    margin-left: 20px;
    padding-top: 14px;
    font: 400 14px/20px "Montserrat"
}

.casen-03 {
    background-color: #1226aa
}

.casen-06 {
    background-color: #3b54f4
}

.casef-item {
    position: relative;
    padding-left: 120px;
    margin-top: 2px
}

.casef-item__left {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 60px;
    font: 700 16px/60px "Montserrat";
    text-align: center;
    background-color: #1226aa;
    color: #fff
}

.casef-options {
    padding: 10px 30px;
    background-color: #f5f7f9
}

.casef-option {
    margin-right: 3em;
    position: relative;
    white-space: nowrap;
    font: 400 16px/40px "Montserrat";
    color: #333
}

.casef-option.current {
    color: #1226aa
}

.casef-option::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.5em;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background-color: #333;
    opacity: .22;
    pointer-events: none
}

.casef-option:last-of-type {
    margin-right: 0
}

.casef-option:last-of-type::after {
    display: none
}

@media(min-width: 1025px) {
    .casef-option:hover {
        color: #1226aa
    }
}

@media(max-width: 1600px) {
    .casen-item__tleft {
        font-size: 48px
    }

    .casen-item__tright {
        padding-top: 10px;
        line-height: 16px
    }

    .casen-item__txt.big .casen-item__tleft {
        font-size: 48px
    }

    .casen-item__txt.big .casen-item__tright {
        font-size: 14px;
        line-height: 16px;
        padding-top: 10px
    }

    .casef-option {
        font-size: 16px
    }

    .casef-item__left {
        font-size: 16px
    }

    .casef-item {
        padding-left: 100px
    }

    .casef-item__left {
        width: 100px
    }
}

@media(max-width: 1400px) {
    .casen-item {
        height: 240px
    }

    .casen-item__tleft {
        font-size: 36px
    }

    .casen-item__tright {
        padding-top: 4px;
        line-height: 14px;
        font-size: 12px
    }

    .casen-item__txt.big .casen-item__tleft {
        font-size: 36px
    }

    .casen-item__txt.big .casen-item__tright {
        font-size: 12px;
        line-height: 14px;
        padding-top: 4px
    }

    .casef-option {
        font-size: 14px
    }

    .casef-item__left {
        font-size: 14px
    }
}

@media(max-width: 1200px) {
    .casen-item {
        height: 180px
    }

    .casef-item {
        padding-left: 0
    }

    .casef-item__left {
        position: relative;
        display: block;
        line-height: 30px;
        height: 30px
    }

    .casef-options {
        padding: 10px
    }

    .casef-option {
        margin-right: 2em
    }

    .casef-option::after {
        right: -1em
    }

    .casef-item {
        margin-bottom: 10px
    }
}

@media(max-width: 768px) {

    .casen-01,
    .casen-02,
    .casen-05,
    .casen-06 {
        width: 50%
    }

    .casen-item__tleft {
        font-size: 32px
    }

    .casen-item__tright {
        margin-left: 10px;
        padding-top: 2px;
        line-height: 14px;
        font-size: 12px
    }

    .casen-item__txt.big .casen-item__tleft {
        font-size: 32px
    }

    .casen-item__txt.big .casen-item__tright {
        margin-left: 10px;
        font-size: 12px;
        line-height: 14px;
        padding-top: 2px
    }

    .casef-option {
        font-size: 12px
    }
}

@media(max-width: 640px) {
    .casen-04 {
        display: none
    }

    .casen-03 {
        width: 100%
    }
}

.cases-process {
    padding: 100px 0;
    background-color: #f5f7f9
}

.list-casesp {
    background-image: url(../images/cases_pbg.png)
}

.casesp-item {
    position: relative
}

.casesp-item::before {
    padding-top: 100%
}

.casesp-item__wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 60px
}

.casesp-item__ico {
    width: 70px;
    margin: 0 auto
}

.casesp-item__ico::before {
    padding-top: 100%
}

.casep-item__txt {
    margin: 0 auto;
    font: 400 16px/20px "Montserrat";
    color: #1226aa;
    text-align: center;
    max-width: 140px
}

@media(max-width: 1600px) {
    .casesp-item__ico {
        width: 60px
    }

    .casep-item__txt {
        font-size: 14px
    }
}

@media(max-width: 1400px) {
    .cases-process {
        padding: 80px 0
    }

    .casesp-item__ico {
        width: 50px
    }

    .casep-item__txt {
        font-size: 12px
    }
}

@media(max-width: 1200px) {
    .cases-process {
        padding: 60px 0
    }

    .list-casesp {
        background-image: none
    }

    .list-casesp>li {
        width: 33.3333%
    }

    .list-casesp>li:nth-of-type(n+4) {
        margin-top: 30px
    }

    .casesp-item {
        width: 180px;
        margin-right: auto;
        margin-left: auto;
        max-width: 90%
    }

    .casesp-item::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid #1226aa;
        border-radius: 50%
    }

    .casesp-item__wrap {
        top: 50%;
        padding-top: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

@media(max-width: 768px) {
    .list-casesp {
        background-image: none
    }

    .list-casesp>li {
        width: 50%
    }

    .list-casesp>li:nth-of-type(n+3) {
        margin-top: 30px
    }

    .casesp-item__ico {
        width: 35px
    }

    .casep-item__txt {
        padding: 0 20px
    }
}

.page-detail-title {
    font: 700 40px/1.25 "Montserrat";
    color: #333
}

.page-detail-date {
    font: 400 14px/20px "Montserrat";
    color: #1226aa
}

.case-article-left {
    width: calc(100% - 120px);
    max-width: 1140px
}

.case-detail-body {
    font: 400 14px/20px "Montserrat";
    color: #333
}

.case-detail-body img {
    max-width: 100% !important;
    height: auto !important
}

.case-detail-body blockquote {
    font: 500 24px/1.25 "Montserrat"
}

@media(max-width: 1600px) {
    .page-detail-title {
        font-size: 32px
    }

    .case-detail-body blockquote {
        font-size: 20px
    }
}

@media(max-width: 1400px) {
    .page-detail-title {
        font-size: 24px
    }
}

@media(max-width: 768px) {
    .case-article-left {
        width: 100%
    }

    .page-detail-title {
        font-size: 20px
    }

    .case-detail-body blockquote {
        font-size: 16px
    }
}

.products-intro {
    font-size: 0;
    color: #333
}

.products-intro__title,
.products-intro__desc {
    display: inline-block;
    vertical-align: top
}

.products-intro__title {
    width: 500px;
    padding-right: 140px;
    font: 700 40px/1.25 "Montserrat"
}

.products-intro__desc {
    width: calc(100% - 500px);
    font: 400 14px/18px "Montserrat"
}

.product-item__wrap {
    font-size: 0
}

.product-item {
    display: block;
    padding: 50px 0
}

.product-item:nth-of-type(2n+1) {
    background-color: #f5f7f9
}

.product-item__img {
    z-index: 1;
    display: inline-block;
    vertical-align: top;
    width: 400px
}

.product-item__img::before {
    padding-top: 100%
}

.product-item__img::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background-color: #fff
}

.product-item__img img.front {
    visibility: hidden;
    opacity: 0
}

.product-item__right {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 500px);
    margin-left: 100px;
    height: 400px
}

.product-item__intro {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0
}

.product-item__title {
    margin-bottom: 1em;
    font: 700 40px/1.25 "Montserrat";
    color: #333
}

.product-item__desc {
    font: 400 14px/24px "Montserrat";
    color: #333
}

.product-item__desc p>span {
    font-weight: 700
}

@media(min-width: 1025px) {
    .product-item:hover .product-item__title {
        color: #1226aa
    }

    .product-item:hover .product-item__img img.back {
        visibility: hidden;
        opacity: 0
    }

    .product-item:hover .product-item__img img.front {
        visibility: visible;
        opacity: 1
    }
}

@media(max-width: 1600px) {
    .products-intro__title {
        font-size: 32px
    }

    .product-item__title {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .products-intro__title {
        font-size: 24px
    }

    .product-item__title {
        font-size: 24px
    }

    .product-item__img {
        width: 360px
    }

    .product-item__right {
        height: 360px
    }
}

@media(max-width: 1200px) {
    .products-intro__title {
        font-size: 32px;
        width: auto;
        display: block
    }

    .products-intro__desc {
        width: 100%;
        display: block;
        margin-top: 20px
    }

    .product-item__img {
        width: 320px
    }

    .product-item__right {
        height: 320px
    }
}

@media(max-width: 1024px) {
    .products-page-nav .page-nav.fixed {
        position: relative;
        top: auto;
        right: auto;
        left: auto
    }

    .list-pnav-products>li {
        width: 33.3333%
    }

    .pnav-item::before {
        display: none
    }

    .product-item__right {
        width: calc(100% - 400px);
        margin-left: 60px
    }
}

@media(max-width: 768px) {
    .list-pnav-products>li {
        width: 50%
    }

    .products-intro__title {
        font-size: 20px
    }

    .product-item__title {
        font-size: 20px
    }

    .product-item__img {
        width: 200px
    }

    .product-item__right {
        height: auto;
        width: calc(100% - 280px)
    }

    .product-item__intro {
        position: relative;
        top: auto;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@media(max-width: 640px) {
    .product-item__img {
        width: 200px;
        margin-right: auto;
        margin-left: auto;
        display: block
    }

    .product-item__right {
        width: 100%;
        margin-left: 0;
        margin-top: 20px
    }
}

@media(max-width: 480px) {
    .list-pnav-products>li {
        width: 100%
    }

    .list-pnav-products .pnav-link {
        text-align: left
    }

    .list-pnav-products .pnav-link::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        background-color: #f2f2f2
    }
}

.list-protech {
    padding: 100px 0
}

.protech-item {
    position: relative;
    height: 360px;
    padding: 0 60px
}

.protech-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-color: #fff;
    opacity: .4
}

.protech-item:last-of-type::before {
    display: none
}

.protech-item__ico {
    width: 68px;
    background-color: #fff;
    border-radius: 50%
}

.protech-item__ico::before {
    padding-top: 100%
}

.protech-item__title {
    height: 3.9em;
    margin-top: 1em;
    font: 700 24px/1.3 "Montserrat";
    color: #fff
}

.protech-item__desc {
    font: 400 14px/20px "Montserrat";
    color: #fff
}

@media(max-width: 1600px) {
    .protech-item {
        padding-right: 40px;
        padding-left: 40px
    }

    .protech-item__title {
        font-size: 20px
    }
}

@media(max-width: 1400px) {
    .protech-item__title {
        font-size: 16px
    }
}

@media(max-width: 1200px) {
    .list-protech {
        padding: 60px 0
    }

    .protech-item {
        height: 240px
    }

    .list-protech>li {
        width: 50%
    }

    .list-protech>li:nth-of-type(n+3) {
        margin-top: 40px
    }
}

@media(max-width: 768px) {
    .protech-item {
        height: auto
    }

    .protech-item__title {
        height: auto
    }

    .protech-item__desc {
        margin-top: 10px
    }

    .list-protech>li {
        width: 100%
    }

    .list-protech>li:nth-of-type(n+2) {
        margin-top: 60px
    }
}

@media(max-width: 640px) {
    .protech-item {
        padding-right: 20px;
        padding-left: 20px
    }
}

.prod-led {
    position: relative;
    font-size: 0;
    text-align: right
}

.prod-led-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 33.3333%;
    background-color: #1226aa;
    background-image: url(../images/prod_left_bg.png)
}

.prod-led-left__txt {
    position: absolute;
    top: 80px;
    right: 70px;
    left: 80px;
    bottom: 100px;
    text-align: left
}

.prod-title {
    font: 700 40px/1.25 "Montserrat";
    color: #fff
}

.prod-intro {
    margin-top: 40px;
    font: 400 14px/24px "Montserrat";
    color: #fff
}

.prod-calc-btn-box {
    position: absolute;
    bottom: 0;
    left: 0
}

.prod-calc-btn {
    display: inline-block;
    vertical-align: top;
    width: 170px;
    font: 400 14px/36px "Montserrat";
    border-radius: 18px;
    background-color: #fff;
    color: #1226aa;
    text-align: center;
    margin-bottom: 10px
}

.prod-calc-btn:first-of-type {
    margin-right: 5px
}

.prod-calc-btn>span {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 36px;
    margin-right: .25em
}

.prod-led-right {
    display: inline-block;
    vertical-align: top;
    width: 66.66%;
    background-color: #f5f7f9;
    text-align: left
}

.prod-led-right-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.obj-loading {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    margin-left: -80px;
    margin-top: -12px;
    width: 160px;
    height: 4px;
    border-radius: 10px;
    background-color: #999
}

.obj-progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #1226aa
}

.obj-progress-txt {
    position: absolute;
    bottom: 100%;
    right: 0;
    left: 0;
    font: 400 12px/20px "Montserrat";
    color: #999;
    text-align: center
}

.prod-split {
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 70px;
    width: 60px;
    padding-top: 90px
}

.prod-split-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #1226aa;
    border-radius: 50%;
    color: #fff;
    font: 400 16px/60px "Montserrat";
    text-align: center
}

.prod-split-progress {
    position: absolute;
    top: 90px;
    left: 50%;
    margin-left: -8px;
    width: 16px;
    bottom: 0
}

.prod-split-progress::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: #1226aa
}

.prod-progess-btn {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #1226aa
}

.prod-led-img::before,
.slick-prod-img::before {
    padding-top: 100%
}

.slick-prod-img .banner-dots {
    bottom: 20px
}

.prod-img-item {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat
}

.prod-img-item::before {
    padding-top: 62.5%
}

@media(min-width: 1440px) {
    .prod-img-item.image1 {
        background-size: 600px auto
    }
}

.prod-vr-link {
    position: absolute;
    top: 60px;
    right: 90px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    color: #1226aa;
    font-size: 48px;
    text-align: center;
    line-height: 60px
}

.prod-vr-link:hover {
    background-color: #1226aa;
    color: #fff
}

.list-prodtech {
    margin-right: -60px;
    margin-left: -60px
}

.prodtech-item {
    margin-right: 60px;
    margin-left: 60px
}

.prodtech-item__img {
    margin: 0 auto;
    width: 200px;
    border-radius: 50%;
    background-color: #f5f7f9
}

.prodtech-item__img::before {
    padding-top: 100%
}

.prodtech-item__img img {
    top: 20%;
    left: 20%;
    width: 60%
}

.prodtech-item__title {
    margin-top: 1.25em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font: 400 16px/1.2 "Montserrat";
    color: #1226aa
}

@media(max-width: 1600px) {
    .prodtech-item__title {
        font-size: 14px
    }

    .prodtech-item__img {
        width: 160px;
        margin-right: auto;
        margin-left: auto
    }
}

@media(max-width: 1400px) {
    .list-prodtech {
        margin-right: 0;
        margin-left: 0
    }

    .prodtech-item {
        margin-right: 0;
        margin-left: 0
    }
}

@media(max-width: 1200px) {
    .prodtech-item__img {
        width: 120px
    }

    .prodtech-item__title {
        font-size: 14px
    }
}

@media(max-width: 1024px) {
    .list-prodtech>li {
        width: 33.3333%
    }

    .list-prodtech>li:nth-of-type(n+4) {
        margin-top: 40px
    }
}

@media(max-width: 640px) {
    .list-prodtech>li {
        width: 50%
    }

    .list-prodtech>li:nth-of-type(n+3) {
        margin-top: 40px
    }

    .prodtech-item__img {
        width: 100px
    }

    .prodtech-item__title {
        font-size: 12px;
        margin-right: 10px;
        margin-left: 10px
    }
}

.prodf-item {
    position: relative;
    font-size: 0;
    display: block
}

.prodf-item:nth-of-type(2n+1) {
    text-align: right
}

.prodf-item:nth-of-type(2n+1) .prodf-item__txt {
    right: 120px;
    left: 200px
}

.prodf-item:nth-of-type(2n) .prodf-item__info {
    right: 0;
    left: 50%
}

.prodf-item:nth-of-type(2n) .prodf-item__txt {
    left: 120px;
    right: 200px
}

.prodf-item__info {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    left: 0;
    background-color: #f5f7f9;
    text-align: left
}

.prodf-item__txt {
    position: absolute;
    top: 50%;
    font: 400 14px/20px "Montserrat";
    color: #333
}

.prodf-item__txt h3 {
    font: 700 40px/1.25 "Montserrat";
    margin-bottom: .75em
}

.prodf-item__txt ul>li {
    position: relative;
    padding-left: 12px;
    font: 400 14px/20px "Montserrat"
}

.prodf-item__txt ul>li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -2px;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #333
}

.prodf-item__txt ul.list>li {
    margin-right: 30px
}

.prodf-item__img {
    display: inline-block;
    vertical-align: top;
    width: 50%
}

.prodf-item__img::before {
    padding-top: 57.9166666667%
}

.tabel-param {
    font: 400 18px/1.25 "Montserrat"
}

.tabel-param table {
    width: 100%
}

.tabel-param thead {
    background-color: #1226aa
}

.tabel-param thead th {
    height: 80px;
    text-align: center;
    font: 700 20px/1.25 "Montserrat";
    color: #fff;
    vertical-align: middle
}

.tabel-param thead th:first-of-type {
    padding-left: 50px;
    text-align: left
}

.tabel-param tbody tr:nth-of-type(2n) {
    background-color: #f5f7f9
}

.tabel-param tbody tr td {
    vertical-align: middle;
    height: 80px;
    font: 400 18px/1.25 "Montserrat";
    text-align: center;
    color: #333
}

.tabel-param tbody tr td:first-of-type {
    padding-left: 50px;
    text-align: left
}

@media(max-width: 1600px) {
    .prod-led-left__txt {
        left: 40px;
        top: 60px;
        bottom: 80px;
        right: 60px
    }

    .prod-title {
        font-size: 32px
    }

    .prod-vr-link {
        right: 40px;
        top: 40px
    }

    .prod-split {
        top: 40px;
        bottom: 40px;
        left: 40px
    }

    .prod-split {
        width: 40px
    }

    .prod-split-circle {
        line-height: 40px;
        height: 40px;
        font-size: 12px
    }

    .prod-vr-link {
        width: 40px;
        height: 40px;
        font-size: 32px;
        line-height: 40px
    }

    .prod-split-progress {
        top: 60px
    }

    .prodf-item:nth-of-type(2n+1) .prodf-item__txt {
        right: 40px;
        left: 40px
    }

    .prodf-item:nth-of-type(2n) .prodf-item__info {
        right: 0;
        left: 50%
    }

    .prodf-item:nth-of-type(2n) .prodf-item__txt {
        left: 40px;
        right: 40px
    }

    .prodf-item__txt h3 {
        font-size: 32px
    }

    .tabel-param {
        font-size: 14px
    }

    .tabel-param thead th {
        font-size: 16px;
        height: 60px
    }

    .tabel-param thead th:first-of-type {
        padding-left: 20px
    }

    .tabel-param tbody tr td {
        font-size: 14px;
        height: 60px
    }

    .tabel-param tbody tr td:first-of-type {
        padding-left: 20px
    }
}

@media(max-width: 1400px) {
    .prod-title {
        font-size: 24px
    }

    .prod-led-left__txt {
        top: 30px;
        bottom: 30px;
        right: 20px
    }

    .prodf-item__txt h3 {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .prodf-item__info {
        position: relative;
        padding: 40px 20px
    }

    .prodf-item:nth-of-type(2n+1) .prodf-item__txt {
        right: auto;
        left: auto
    }

    .prodf-item:nth-of-type(2n) .prodf-item__info {
        right: auto;
        left: auto
    }

    .prodf-item:nth-of-type(2n) .prodf-item__txt {
        left: auto;
        right: auto
    }

    .prodf-item__txt {
        position: relative;
        top: auto;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .prodf-item__img {
        width: 100%
    }
}

@media(max-width: 1280px) {
    .prod-led-left {
        position: relative;
        width: 100%;
        padding: 40px 0
    }

    .prod-led-left__txt {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        margin: 0 20px;
        right: auto
    }

    .prod-intro {
        margin-top: 10px
    }

    .prod-calc-btn-box {
        position: relative;
        margin-top: 40px
    }

    .prod-led-right {
        width: 100%;
        display: block;
        padding: 30px 0
    }

    .prod-led-right::before {
        padding-top: 0
    }

    .prod-split {
        top: 20px;
        left: 20px;
        bottom: 20px
    }

    .prod-vr-link {
        top: 20px;
        right: 20px
    }

    .prod-led-img,
    .slick-prod-img {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 auto;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .slick-prod-img .banner-dots {
        bottom: 0
    }
}

@media(max-width: 1024px) {
    .tabel-param {
        font-size: 12px
    }

    .tabel-param thead th {
        font-size: 14px;
        height: 60px
    }

    .tabel-param thead th:first-of-type {
        padding-left: 20px
    }

    .tabel-param tbody tr td {
        font-size: 12px;
        height: 60px
    }

    .tabel-param tbody tr td:first-of-type {
        padding-left: 20px
    }
}

@media(max-width: 768px) {
    .prod-split {
        top: 10px;
        left: 10px;
        bottom: 20px
    }

    .prod-split-circle {
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }

    .prod-vr-link {
        top: 10px;
        right: 10px;
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }

    .prodf-item__txt h3 {
        font-size: 20px
    }

    .tabel-param {
        overflow-x: scroll
    }

    .tabel-param table {
        width: 760px
    }

    .tabel-param thead th:first-of-type {
        padding-left: 10px
    }

    .tabel-param tbody tr td:first-of-type {
        padding-left: 10px
    }
}

.list-prodown {
    margin-right: -6px;
    margin-left: -6px
}

.list-prodown>li:nth-of-type(n+3) {
    margin-top: 32px
}

.prodown-item {
    margin-right: 6px;
    margin-left: 6px;
    position: relative;
    padding: 25px 20px 25px 100px;
    background-color: #f5f7f9;
    text-align: right
}

.prodown-item__ico {
    position: absolute;
    top: -8px;
    left: 0
}

.prodown-item__down {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
    overflow: hidden;
    font: 400 14px/30px "Montserrat";
    background-color: #fff;
    color: #333;
    border-radius: 30px;
    text-transform: capitalize
}

.prodown-item__down>span {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 30px;
    margin-right: .5em
}

.prodown-item__down::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #1226aa
}

.prodown-item__view {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #333;
    border-radius: 50%;
    margin-right: 10px
}

.prodown-item__view::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #1226aa;
    border-radius: 50%;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.prodown-item__title {
    position: absolute;
    top: 50%;
    right: 200px;
    left: 140px;
    text-align: left;
    font: 400 20px/1.2 "Montserrat";
    color: #333
}

@media(min-width: 1025px) {

    .prodown-item__view:hover,
    .prodown-item__down:hover {
        color: #fff
    }

    .prodown-item__view:hover::after {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    .prodown-item__down:hover::before {
        width: 100%
    }

    .prodown-item:hover .prodown-item__title {
        color: #1226aa
    }
}

@media(max-width: 1600px) {
    .prodown-item__title {
        font-size: 16px
    }
}

@media(max-width: 1400px) {
    .prodown-item__title {
        font-size: 14px
    }
}

@media(max-width: 1200px) {
    .prodown-item__ico {
        top: 0
    }

    .prodown-item__ico img {
        display: block;
        height: 80px
    }

    .prodown-item__title {
        left: 100px
    }
}

@media(max-width: 1024px) {
    .list-prodown>li {
        width: 100%
    }

    .list-prodown>li:nth-of-type(n+2) {
        margin-top: 10px
    }
}

@media(max-width: 768px) {
    .prodown-item {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-right: 10px
    }

    .prodown-item__ico img {
        height: 60px
    }

    .prodown-item__title {
        left: 10px;
        font-size: 12px;
        right: 100px
    }

    .prodown-item__down {
        font-size: 0;
        width: 30px;
        height: 30px;
        padding: 0
    }

    .prodown-item__down span {
        display: inline-block;
        vertical-align: top;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-right: 0
    }

    .prodown-item__ico {
        display: none
    }
}

.video-item .news-item__img::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -24px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 35px 0 35px 48px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(255, 255, 255, .89)
}

.login-main {
    padding: 140px 0;
    background-color: #f5f7f9
}

.lform-title {
    font: 700 40px/1.25 "Montserrat";
    color: #1226aa;
    text-align: center;
    text-transform: uppercase
}

.lform-item {
    position: relative
}

.lform-item label.error {
    font-size: 12px;
    line-height: 16px;
    font-family: "Montserrat";
    color: #aaa
}

.lform-item.select::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 40px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    pointer-events: none
}

.get-code {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 120px;
    height: 80px;
    border-radius: 40px;
    background-color: #1226aa;
    color: #fff;
    font-size: 20px;
    font-family: "Montserrat";
    text-align: center;
    line-height: 80px
}

.get-code.disable {
    background-color: #f5f7f9;
    color: #333
}

.lform-main {
    width: 600px;
    margin-right: auto;
    margin-left: auto
}

.lform-input {
    display: block;
    width: 100%;
    padding: 0 40px;
    border: 0;
    outline: 0;
    font-size: 20px;
    font-family: "Montserrat";
    color: #333;
    height: 80px;
    border-radius: 40px;
    background-color: #fff
}

.lform-input::-webkit-input-placeholder {
    color: #999
}

.lform-input::-moz-placeholder {
    color: #999
}

.lform-input:-ms-input-placeholder {
    color: #999
}

.lform-input::-ms-input-placeholder {
    color: #999
}

.lform-input::placeholder {
    color: #999
}

select:invalid {
    color: #999
}

.lform-select {
    display: block;
    width: 100%;
    padding: 0 40px;
    border: 0;
    outline: 0;
    font-size: 20px;
    font-family: "Montserrat";
    height: 80px;
    border-radius: 40px;
    background-color: #fff
}

.lform-select:invalid {
    color: #999
}

.lform-button {
    display: block;
    width: 100%;
    height: 80px;
    border-radius: 40px;
    border: 0;
    background-color: #1226aa;
    color: #fff;
    font-size: 20px;
    font-family: "Montserrat";
    text-transform: uppercase
}

.lform-tip {
    position: relative
}

.lform-checkbox-input {
    display: none
}

.lform-checkbox-input:checked+label::after {
    visibility: visible;
    opacity: 1
}

.lform-remember {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding-left: 26px;
    margin-left: 10px;
    font: 400 12px/20px "Montserrat";
    color: #b7b7b7
}

.lform-remember::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #1226aa;
    border-radius: 50%
}

.lform-remember::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1226aa;
    margin-top: -4px;
    visibility: hidden;
    opacity: 0
}

.lform-remember:hover {
    color: #1226aa
}

.lform-register {
    position: absolute;
    top: 0;
    right: 0;
    font: 400 12px/20px "Montserrat";
    color: #b7b7b7
}

.lform-register>a {
    color: #b7b7b7
}

.lform-register>a:hover {
    color: #1226aa;
    text-decoration: underline
}

@media(max-width: 1600px) {
    .login-main {
        padding: 120px 0
    }

    .lform-title {
        font-size: 32px
    }

    .lform-input {
        height: 60px;
        font-size: 16px
    }

    .lform-item.select::after {
        top: 30px
    }

    .lform-select {
        height: 60px;
        font-size: 16px
    }

    .lform-button {
        height: 60px;
        font-size: 16px
    }

    .get-code {
        height: 60px;
        line-height: 60px;
        font-size: 16px
    }
}

@media(max-width: 1400px) {
    .login-main {
        padding: 100px 0
    }

    .lform-title {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .lform-input {
        padding-right: 20px;
        padding-left: 20px
    }

    .lform-select {
        padding-right: 20px;
        padding-left: 20px
    }

    .lform-item.select::after {
        right: 10px
    }

    .login-main {
        padding: 80px 0
    }
}

@media(max-width: 768px) {
    .login-main {
        padding: 60px 0
    }

    .lform-title {
        font-size: 20px
    }

    .lform-main {
        width: auto;
        margin-right: 20px;
        margin-left: 20px
    }

    .lform-input {
        padding-right: 20px;
        padding-left: 20px
    }

    .lform-input,
    .lform-button,
    .get-code {
        height: 40px;
        line-height: 40px;
        font-size: 12px
    }

    .lform-item.select::after {
        top: 20px
    }

    .lform-select {
        height: 40px
    }
}

@media(max-width: 640px) {
    .lform-register {
        position: relative;
        margin-top: 10px;
        margin-left: 10px
    }
}

.calc-container {
    background-color: #f5f7f9
}

.calc-box {
    position: relative;
    margin-top: 160px;
    width: 820px;
    margin-left: auto;
    margin-right: auto
}

.calc-unit {
    position: absolute;
    top: -120px;
    right: 100%;
    width: 130px;
    text-align: left
}

.calc-unit-label {
    display: block;
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    font: 400 14px/2 "Montserrat";
    color: #333
}

.calc-unit-label::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff
}

.calc-unit-radio {
    display: none
}

.calc-unit-radio:checked+label {
    color: #1226aa
}

.calc-unit-radio:checked+label::before {
    background-color: #1226aa
}

.calc-wall {
    position: relative;
    height: 492px;
    background-color: #fff
}

.calc-man {
    position: absolute;
    bottom: 0;
    right: 100%;
    height: 50%;
    margin-right: 30px
}

.calc-man>img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: auto
}

.calc-man span {
    position: absolute;
    top: 100%;
    margin-top: 6px;
    right: 0;
    white-space: nowrap;
    font: 400 12px/1 "Montserrat";
    color: #333
}

.calc-wunit {
    position: absolute;
    top: -66px;
    right: 0;
    left: 0;
    height: 66px;
    text-align: center
}

.calc-wunit::before,
.calc-wunit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0
}

.calc-wunit::before {
    left: 0;
    border-left: 1px dashed #a5a5a5
}

.calc-wunit::after {
    right: 0;
    border-right: 1px dashed #a5a5a5
}

.calc-wunit-left,
.calc-wunit-right {
    position: absolute;
    top: 0;
    z-index: 10
}

.calc-wunit-left>span,
.calc-wunit-right>span {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50)
}

.calc-hunit-h {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -18px
}

.calc-top-handle {
    position: absolute;
    top: -132px;
    right: 0;
    left: 0;
    font-size: 0;
    text-align: center
}

.calc-top-handle>span:last-of-type {
    margin-left: 1px
}

.calc-right-handle {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 142px;
    width: 36px;
    margin-top: -36px
}

.calc-right-handle>span:last-of-type {
    margin-top: 1px
}

.calc-btn {
    display: inline-block;
    vertical-align: top;
    width: 36px;
    height: 36px;
    background-color: #fff;
    font-size: 18px;
    line-height: 36px;
    color: #1226aa;
    text-align: center;
    cursor: pointer
}

.calc-btn:hover {
    background-color: #1226aa;
    color: #fff
}

.calc-wunit-left {
    left: 0
}

.calc-wunit-right {
    right: 0
}

.calc-uvalue {
    display: inline-block;
    vertical-align: top;
    min-width: 72px;
    height: 36px;
    text-align: center;
    font: 400 14px/36px "Montserrat";
    background-color: #fff;
    color: #333
}

.calc-hunit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 112px
}

.calc-hunit::before,
.calc-hunit::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0
}

.calc-hunit::before {
    border-top: 1px dashed #a5a5a5;
    top: 0
}

.calc-hunit::after {
    border-bottom: 1px dashed #a5a5a5;
    bottom: 0
}

.calc-hunit-top,
.calc-hunit-bottom {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 10
}

.calc-hunit-top>span,
.calc-hunit-bottom>span {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -18px
}

.calc-hunit-top {
    top: 0
}

.calc-hunit-bottom {
    bottom: 0
}

.calc-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 410px;
    height: 280px;
    background-image: url(../images/calc_bg.jpg);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.calc-out-wline {
    position: absolute;
    bottom: 100%;
    right: 0;
    left: 0;
    border-right: 1px dashed #a5a5a5;
    border-left: 1px dashed #a5a5a5
}

.calc-out-hline {
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    border-top: 1px dashed #a5a5a5;
    border-bottom: 1px dashed #a5a5a5
}

.calc-vline,
.calc-hline {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.calc-vline>span,
.calc-hline>span {
    position: absolute;
    background-color: rgba(255, 255, 255, .2)
}

.calc-vline>span {
    right: 0;
    left: 0;
    height: 1px
}

.calc-hline>span {
    top: 0;
    bottom: 0;
    width: 1px
}

@media(max-width: 1200px) {
    .calc-box {
        width: 400px
    }
}

@media(max-width: 640px) {
    .calc-box {
        width: 300px
    }

    .calc-unit {
        position: relative;
        top: auto;
        right: auto
    }

    .calc-uvalue {
        font-size: 12px;
        height: 24px;
        line-height: 24px
    }

    .calc-wunit,
    .calc-hunit {
        display: none
    }

    .calc-top-handle {
        top: -50px
    }

    .calc-right-handle {
        margin-left: 10px
    }

    .calc-out-wline,
    .calc-out-hline {
        display: none
    }

    .calc-wall {
        margin-top: 60px
    }
}

@media(max-width: 400px) {
    .calc-box {
        width: 260px
    }

    .calc-man {
        margin-right: 0
    }
}

.page-calculator .footer-fixed {
    display: none
}

.calc-filter {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-top: 1px solid #1226aa
}

.calc-filter.hide {
    margin-bottom: -280px
}

.calc-filter.hide .calc-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.calc-filter-wrap {
    padding-top: 60px;
    padding-bottom: 50px;
    height: 375px;
    overflow-y: scroll
}

.calc-filter-wrap::-webkit-scrollbar {
    width: 0;
    height: 0
}

.calc-filter-wrap::-webkit-scrollbar-button {
    background-color: rgba(0, 0, 0, 0)
}

.calc-filter-wrap::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, 0)
}

.calc-arrow {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    height: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background-color: #1226aa;
    color: #fff;
    text-align: center;
    cursor: pointer;
    -webkit-transform-origin: top center;
    transform-origin: top center
}

.calc-arrow>span {
    display: inline-block;
    vertical-align: top;
    font-size: 20px;
    line-height: 40px
}

.calc-filter-main {
    font-size: 0
}

.calc-product {
    display: inline-block;
    vertical-align: top;
    width: 360px;
    margin-right: 40px
}

.calc-ptitle {
    font: 700 20px/1 "Montserrat"
}

.calc-select1 {
    position: relative;
    padding-left: 110px;
    height: 40px;
    background-color: #f5f7f9
}

.calc-select1 select {
    display: block;
    width: 100%;
    padding: 13px 10px;
    border: 0;
    outline: 0;
    font: 400 14px/1 "Montserrat";
    color: #333;
    background-color: rgba(0, 0, 0, 0)
}

.calc-select1::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    font-family: "iconfont";
    pointer-events: none
}

.calc-select1-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 40px;
    background-color: #1226aa;
    color: #fff;
    font: 700 14px/1 "Montserrat";
    line-height: 40px;
    padding-left: 10px
}

.calc-product-info {
    padding: 15px 20px;
    background-color: #f5f7f9;
    font-size: 0
}

.calc-pro-img {
    display: inline-block;
    vertical-align: top;
    width: 90px
}

.calc-pro-img::before {
    padding-top: 100%
}

.calc-pro-right {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 120px);
    margin-left: 30px
}

.calc-pro-select {
    position: relative;
    height: 24px
}

.calc-pro-select select {
    display: block;
    width: 100%;
    padding: 5px 0 5px 10px;
    border: 0;
    outline: 0;
    font: 400 14px/1 "Montserrat";
    color: #333;
    background-color: #fff
}

.calc-pro-select::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    font-family: "iconfont";
    pointer-events: none
}

.calc-pro-desc {
    margin-top: 10px;
    font: 400 14px/20px "Montserrat";
    color: #333
}

.calc-filter-wall {
    display: inline-block;
    vertical-align: top;
    width: 350px
}

.cfw-change {
    position: relative;
    padding-left: 110px;
    background-color: #f5f7f9;
    color: #333
}

.cfw-change-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    padding-left: 10px;
    font: 700 14px/40px "Montserrat";
    background-color: #1226aa;
    color: #fff
}

.pm-input-box {
    position: relative;
    padding: 0 40px
}

.pm-input-box.no-btn {
    padding-right: 0;
    padding-left: 0
}

.pm-input-box>span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center
}

.pm-input-box input {
    display: block;
    width: 100%;
    height: 40px;
    border: 0;
    outline: 0;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0)
}

.pm-minus {
    left: 0
}

.pm-plus {
    right: 0
}

.calc-filter-set {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 790px);
    margin-right: 40px
}

.cfs-change {
    position: relative;
    padding-left: 360px;
    min-height: 40px
}

.cfs-change .pm-input-box {
    background-color: #f5f7f9
}

.cfs-change-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 40px
}

.cfs-change-select select {
    display: block;
    width: 100%;
    padding: 13px 10px;
    border: 0;
    outline: 0;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    background-color: #1226aa;
    color: #fff
}

.cfs-change-select::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: 5px;
    bottom: 0;
    width: 24px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    font-family: "iconfont";
    pointer-events: none;
    color: #fff
}

.btn-calc-submit {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    width: 220px;
    height: 40px;
    border-radius: 40px;
    background-color: #1226aa;
    color: #fff;
    text-align: center;
    font: 700 14px/40px "Montserrat"
}

.btn-calc-submit::before {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    top: -4px;
    bottom: -4px;
    left: -4px;
    width: 0;
    background-color: #f5f7f9;
    border-radius: 40px
}

.btn-calc-submit>span {
    display: inline-block;
    vertical-align: top;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    margin-right: 10px
}

.btn-calc-submit:hover {
    opacity: .9
}

.aspect-item-radio {
    display: none
}

.aspect-item-radio:checked+label {
    color: #1226aa
}

.aspect-item-radio:checked+label::before {
    content: ""
}

.aspect-item-label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #999
}

.aspect-item-label::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    font-family: "iconfont";
    font-size: 16px;
    line-height: 30px
}

.aspect-item-txt {
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    font-family: "Montserrat";
    line-height: 30px;
    color: #333
}

.aspect-item-input {
    display: inline-block;
    vertical-align: top
}

.aspect-item-input>input {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    outline: 0;
    margin: 0 5px;
    width: 50px;
    height: 30px;
    border: 1px solid #999;
    background-color: #fff;
    font-size: 14px;
    font-family: "Montserrat";
    text-align: center;
    color: #333
}

.aspect-item-input>span {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 30px;
    font-family: "Montserrat";
    color: #1226aa
}

@media(max-width: 1400px) {
    .cfs-change {
        padding-left: 200px
    }

    .cfs-change-select {
        width: 200px
    }
}

@media(max-width: 1200px) {
    .calc-product {
        width: calc(50% - 10px);
        margin-right: 20px
    }

    .calc-filter-set {
        width: calc(50% - 10px);
        margin-right: 0
    }

    .calc-filter-wall {
        width: calc(50% - 10px)
    }
}

@media(max-width: 640px) {

    .calc-product,
    .calc-filter-set,
    .calc-filter-wall {
        width: 100%;
        margin-right: 0
    }

    .calc-filter-set {
        margin-top: 30px
    }
}

.cr-item {
    position: relative;
    font-size: 0
}

.cr-item__label {
    display: inline-block;
    vertical-align: top;
    width: 320px;
    padding-left: 40px;
    border-right: 2px solid #fff;
    font: 700 14px/46px "Montserrat";
    color: #333
}

.cr-item__info {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 320px);
    padding-left: 40px;
    font: 400 14px/46px "Montserrat";
    color: #333
}

.list-calc-rlist>li:nth-of-type(2n+1) .cr-item {
    background-color: #f5f7f9
}

.layer-calc-result {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    visibility: visible;
    opacity: 1
}

.layer-calc-result.hide {
    -webkit-transform: translate3d(0, 100%, 0);
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    visibility: hidden;
    opacity: 0
}

.layer-calc-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5)
}

.layer-calc-main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 680px;
    padding: 40px 20px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff
}

.layer-video {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .9);
    visibility: hidden;
    opacity: 0
}

.layer-video.show {
    visibility: visible;
    opacity: 1
}

.layer-vmain {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -680px;
    width: 1360px;
    background-color: rgba(0, 0, 0, 0)
}

.layer-video-box::before {
    padding-top: 56.25%
}

.layer-video-box video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: fill;
    object-fit: fill
}

.layer-video-box.play .video-item__btn {
    visibility: hidden;
    opacity: 0
}

.layer-video-title {
    position: relative;
    font-size: 16px;
    font-family: "Montserrat";
    line-height: 30px;
    color: #fff;
    text-align: center
}

.layer-video-time {
    position: absolute;
    top: 0;
    right: 0;
    color: #aaa
}

.layer-video-tag {
    position: relative;
    padding-right: 120px;
    padding-top: 4px;
    padding-bottom: 4px
}

.layer-video-tag .newsd-tags a {
    color: #fff
}

.layer-video-tag .newsd-tags a::after {
    color: #fff
}

.layer-video-link {
    position: absolute;
    top: 0;
    right: 0
}

.layer-video-link .btn-white::after {
    background-color: #1226aa
}

.layer-close {
    position: absolute;
    top: .5em;
    right: .5em;
    font-size: 24px;
    line-height: 2;
    width: 2em;
    color: #fff;
    cursor: pointer;
    text-align: center
}

@media(min-width: 1025px) {
    .layer-video-link .btn-white:hover {
        background-color: #fff;
        color: #1226aa
    }

    .layer-video-link .btn-white:hover::after {
        width: 100%
    }
}

@media(max-width: 1440px) {
    .layer-vmain {
        width: 90%;
        left: 5%;
        margin-left: 0
    }
}

@media(max-width: 1024px) {
    .layer-close {
        right: 0;
        top: 0;
        text-align: center
    }

    .layer-video-link {
        position: relative;
        margin-top: 10px;
        padding-left: 0
    }

    .layer-video-link a {
        background-color: rgba(0, 0, 0, 0);
        color: #aaa;
        padding-left: 0
    }
}

@media(max-width: 640px) {
    .layer-vmain {
        width: 100%;
        left: 0
    }

    .layer-video-title {
        margin-right: 18px;
        margin-left: 18px
    }

    .layer-video-tag {
        margin-right: 18px;
        margin-left: 18px;
        padding-right: 0
    }

    .layer-video-tag .news-book {
        display: block;
        margin-top: 20px
    }

    .layer-video-tag .news-book span,
    .layer-video-tag .news-book a {
        margin-left: 0;
        margin-bottom: 10px
    }
}

@media(max-height: 880px)and (min-width: 1200px) {
    .layer-vmain {
        left: 50%;
        width: 1200px;
        margin-left: -600px
    }
}

@media(max-height: 800px)and (min-width: 1200px) {
    .layer-vmain {
        left: 50%;
        width: 1000px;
        margin-left: -500px
    }
}

@media(max-height: 680px)and (min-width: 1200px) {
    .layer-vmain {
        left: 50%;
        width: 800px;
        margin-left: -400px
    }
}

.slick-dots-at {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    text-align: center
}

.slick-dots-at>li {
    display: inline-block;
    vertical-align: top;
    margin: 0 6px
}

.slick-dots-at>li button {
    font-size: 0;
    border: 0;
    padding: 0;
    background-color: #fff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: .5;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.slick-dots-at>li.slick-active button {
    opacity: 1
}

.footer {
    padding-top: 120px;
    background: #333 url(../images/footer_bg.png) no-repeat right center;
    background-size: 100% auto
}

.footer-inner {
    position: relative
}

.fs-hi {
    font-size: 0;
    color: #fff
}

.fs-hi>span {
    display: inline-block;
    vertical-align: bottom
}

.fs-hi-big {
    font: 500 70px/1 "Montserrat"
}

.fs-hi-small {
    margin-left: .5em;
    font: 400 20px/1.6 "Montserrat"
}

.fs-form {
    font-size: 0;
    position: relative
}

.fs-form label.error {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 12px;
    line-height: 20px;
    color: #fff
}

.fsf-input {
    display: inline-block;
    vertical-align: top;
    width: 370px;
    height: 64px;
    border: 0;
    padding: 0 0 0 20px;
    outline: 0;
    font-size: 14px;
    font-family: "Montserrat"
}

.fsf-submit {
    display: inline-block;
    vertical-align: top;
    outline: 0;
    width: 160px;
    height: 64px;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, 0);
    font-size: 18px;
    letter-spacing: .02em;
    color: #fff;
    font-family: "Montserrat";
    cursor: pointer
}

.footer-bottom {
    position: relative
}

.fmenu-item {
    display: inline-block;
    vertical-align: top;
    margin-right: 60px;
    font: 400 18px/40px "Montserrat";
    color: #fff;
    text-transform: uppercase
}

.fmenu-item:last-of-type {
    margin-right: 0
}

.gotop {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    cursor: pointer
}

.gotop::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background-color: #1226aa;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-bottom: 30px
}

.fc-txt {
    display: inline-block;
    vertical-align: top;
    font: 400 14px/20px "Montserrat";
    color: #fff
}

.fc-txt>a {
    color: #fff;
    opacity: .46
}

.fc-main {
    position: relative
}

.fc-links {
    position: absolute;
    top: 0;
    right: 0
}

.fclink-item {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    margin-left: 30px;
    font: 400 14px/20px "Montserrat";
    text-transform: uppercase;
    text-decoration: underline
}

.footer-contact {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right
}

.footer-tel {
    font: 400 40px/1 "Montserrat";
    color: #fff
}

.footer-social {
    font-size: 0
}

.social-link {
    margin-left: 12px;
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: top;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    font-size: 20px;
    line-height: 32px;
    text-align: center
}

.social-link::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background-color: #1226aa;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media(min-width: 1025px) {
    .fmenu-item:hover {
        color: rgba(255, 255, 255, .6)
    }

    .social-link:hover {
        color: #fff
    }

    .social-link:hover::after {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .gotop:hover {
        color: #fff
    }

    .gotop:hover::after {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .fclink-item:hover {
        color: rgba(255, 255, 255, .6)
    }

    .fsf-submit:hover {
        color: rgba(255, 255, 255, .6)
    }
}

@media(max-width: 1600px) {
    .footer {
        padding-top: 80px
    }

    .footer-tel {
        font-size: 32px
    }
}

@media(max-width: 1400px) {
    .footer-tel {
        font-size: 24px
    }
}

@media(max-width: 1200px) {
    .footer-contact {
        margin-top: 50px;
        position: relative;
        text-align: left
    }

    .social-link {
        margin-left: 0;
        margin-right: 12px
    }

    .fsf-input,
    .fsf-submit {
        height: 50px
    }

    .fsf-input {
        width: 300px
    }

    .fsf-submit {
        font-size: 16px;
        width: 140px
    }

    .fs-hi-big {
        font-size: 60px
    }

    .fs-hi-small {
        font-size: 16px;
        line-height: 1.75
    }

    .fmenu-item {
        margin-right: 40px
    }
}

@media(max-width: 1024px) {
    .fc-links {
        position: relative;
        margin-top: 10px
    }

    .fclink-item {
        margin-left: 0;
        margin-right: 20px;
        margin-bottom: 10px
    }

    .footer {
        background-image: none
    }
}

@media(max-width: 768px) {
    .footer {
        padding-top: 60px
    }

    .footer-tel {
        font-size: 20px
    }

    .fsf-input,
    .fsf-submit {
        height: 40px
    }

    .fsf-input {
        width: 200px
    }

    .fsf-submit {
        font-size: 12px;
        width: 120px
    }

    .fmenu-item {
        font-size: 14px;
        margin-right: 20px
    }

    .footer-bottom {
        padding-right: 40px
    }

    .fs-hi-big {
        font-size: 40px
    }

    .fs-hi-small {
        font-size: 12px;
        line-height: 1.66
    }
}

.footer-fixed {
    position: fixed;
    z-index: 50;
    right: 10px;
    bottom: 120px;
    width: 40px
}

.fr-btn {
    position: relative;
    margin-top: 10px;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 30px
}

.fr-btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    border-radius: 20px;
    background-color: #1226aa
}

.fr-btn>span {
    position: relative;
    z-index: 2;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    color: #fff
}

.fr-btn:hover::before {
    opacity: .8
}

.fr-btn.d-none {
    opacity: 0
}

.fr-tel {
    text-align: right
}

.fr-tel>p {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 40px;
    font: 400 16px/40px "Montserrat";
    white-space: nowrap;
    color: #fff;
    visibility: hidden;
    opacity: 0
}

.fr-tel:hover::before {
    width: 200px
}

.fr-tel:hover>p {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all .2s ease .2s;
    transition: all .2s ease .2s
}

#udesk_btn_text {
    margin-right: 0 !important;
    margin-left: 0 !important;
    visibility: hidden;
    line-height: 20px;
    padding-left: 4px
}

#udesk_btn .udesk-client-btn {
    width: 40px !important;
    overflow: hidden;
    -webkit-transition: width .3s;
    transition: width .3s
}

#udesk_btn>a {
    border-radius: 3px !important;
    margin-right: 5px !important;
    margin-left: 0 !important
}

#udesk_btn:hover .udesk-client-btn {
    width: 250px !important
}

#udesk_btn:hover #udesk_btn_text {
    visibility: visible
}

@media(max-width: 768px) {
    .footer-fixed {
        bottom: 70px
    }

    #udesk_btn>a {
        margin-right: 10px !important
    }
}

/*# sourceMappingURL=app.css.map */