@-webkit-keyframes a {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(2.1);
        transform: scale(2.1);
        opacity: 0
    }
}

@keyframes a {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(2.1);
        transform: scale(2.1);
        opacity: 0
    }
}

@-webkit-keyframes b {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes b {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.icon {
    display: inline-block;
    vertical-align: baseline;
    margin: 0;
    padding: 0
}

.icon.iphone {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwYXRoIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM2OC4wMDMsMTE3LjQ1NmMtNDQuNDI2LDAtNjguMDEyLDIyLjIxNy0xMDIuOTE1LDIxLjc2NCAgIGMtMzQuOTEyLDAuNDUzLTU4LjQ5LTIxLjc2NC0xMDIuOTIyLTIxLjc2NGMtMzUuMzY0LDAtODAuMjU3LDIxLjc2NC0xMDAuNjU3LDUzLjUxMWMtMzcuNjI5LDU4LjA0OC0zNC4wMDUsMTIxLjA4OC0xOC4xMzUsMTg2LjM3OCAgIEM2MC42MDMsNDI2Ljc0NCwxMjEuMzU4LDUxMiwxNjkuNDIxLDUxMmMzOS40NDEsMCw1Ny4xMzEtMjEuMzI1LDk1LjY2Ny0yMS4zMjVjMzguNTI2LDAsNTUuNzU2LDIxLjMyNSw5NC43NiwyMS4zMjUgICBjNDQuNDI1LDAsOTcuNDcyLTczLjAyMywxMjAuMTUyLTEzNy44NzZjLTQzLjUzNC0xNy4yMzItNzMuMDEtNjAuMzA2LTczLjAxLTEwNi4xMTNjMC00NS4zNDYsMjMuMTMzLTgwLjI2NCw1OC40OTgtMTAwLjIxNSAgIEM0NDMuNzI5LDEzOC4zMTQsNDAyLjAwOCwxMTcuNDU2LDM2OC4wMDMsMTE3LjQ1NkwzNjguMDAzLDExNy40NTZ6IE0zNTYuMjA5LDBjLTYzLjkxOCw2LjgwNC0xMTEuNTIxLDYwLjMxMy0xMDcuNDQ0LDEyMS4wODEgICBDMzEyLjY5MSwxMTQuNzMxLDM1OS44NDgsNjAuNzY3LDM1Ni4yMDksMEwzNTYuMjA5LDB6IiBmaWxsPSIjQzZDN0M5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+");
    height: 20px;
    vertical-align: -3px;
    margin-right: 5px
}

.icon.android, .icon.iphone {
    width: 20px;
    background-size: cover
}

.icon.android {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQzcHgiIGhlaWdodD0iNTFweCIgdmlld0JveD0iMCAwIDQzIDUxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcgKDI4MTY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT4xNDYwODE1MDc5XzM2LWFuZHJvaWQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMTQ2MDgxNTA3OV8zNi1hbmRyb2lkIiBmaWxsPSIjQzZDN0M5Ij4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yOC4wMjEsNC41NjggTDI4LjU2OCwzLjc0OSBMMjkuMTA1LDIuOTQxIEwzMC4zMTQsMS4xMjggQzMwLjQ2MiwwLjkwNSAzMC40MDIsMC42MDUgMzAuMTgxLDAuNDU2IEMyOS45NTYsMC4zMDcgMjkuNjU2LDAuMzY3IDI5LjUwNywwLjU5MSBMMjguMjEyLDIuNTM1IEwyNy42NjcsMy4zNTIgTDI3LjExNCw0LjE4IEMyNS4zNjIsMy41MDEgMjMuNDA5LDMuMTIgMjEuMzQ2LDMuMTIgQzE5LjI4NSwzLjEyIDE3LjMzMiwzLjUwMSAxNS41OCw0LjE4IEwxNS4wMywzLjM1MiBMMTQuNDg1LDIuNTM1IEwxMy4xODgsMC41OSBDMTMuMDQsMC4zNjcgMTIuNzM5LDAuMzA3IDEyLjUxNSwwLjQ1NSBDMTIuMjkzLDAuNjAzIDEyLjIzMywwLjkwNCAxMi4zODEsMS4xMjcgTDEzLjU4OSwyLjk0IEwxNC4xMjgsMy43NDggTDE0LjY3NSw0LjU2NyBDMTAuNTYsNi40ODMgNy43NzcsMTAuMTEzIDcuNzc3LDE0LjI2OCBMMzQuOTE5LDE0LjI2OCBDMzQuOTE5LDEwLjExNCAzMi4xMzYsNi40ODQgMjguMDIxLDQuNTY4IEwyOC4wMjEsNC41NjggWiBNMTUuNTMyLDEwLjM5MSBDMTQuNzI3LDEwLjM5MSAxNC4wNzcsOS43NCAxNC4wNzcsOC45MzcgQzE0LjA3Nyw4LjEzNCAxNC43MjcsNy40ODQgMTUuNTMyLDcuNDg0IEMxNi4zMzUsNy40ODQgMTYuOTg1LDguMTM0IDE2Ljk4NSw4LjkzNyBDMTYuOTg1LDkuNzQgMTYuMzM1LDEwLjM5MSAxNS41MzIsMTAuMzkxIEwxNS41MzIsMTAuMzkxIFogTTI3LjE2MywxMC4zOTEgQzI2LjM2LDEwLjM5MSAyNS43MSw5Ljc0IDI1LjcxLDguOTM3IEMyNS43MSw4LjEzNCAyNi4zNiw3LjQ4NCAyNy4xNjMsNy40ODQgQzI3Ljk2OCw3LjQ4NCAyOC42MTgsOC4xMzQgMjguNjE4LDguOTM3IEMyOC42MTgsOS43NCAyNy45NjgsMTAuMzkxIDI3LjE2MywxMC4zOTEgTDI3LjE2MywxMC4zOTEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy45ODYsMTYuMjA4IEw3Ljc3NywxNi4yMDggTDcuNzc3LDE4LjYyNiBMNy43NzcsMjAuNTk5IEw3Ljc3NywzNy41MzUgQzcuNzc3LDM5LjIyOCA5LjE1Myw0MC42MDUgMTAuODQ2LDQwLjYwNSBMMTMuMDYyLDQwLjYwNSBDMTIuOTg4LDQwLjg2MSAxMi45NDYsNDEuMTMyIDEyLjk0Niw0MS40MTIgTDEyLjk0Niw0MS41NzQgTDEyLjk0Niw0Mi41NDMgTDEyLjk0Niw0Ny41NTMgQzEyLjk0Niw0OS4xNTggMTQuMjQ5LDUwLjQ2MSAxNS44NTUsNTAuNDYxIEMxNy40NjEsNTAuNDYxIDE4Ljc2Myw0OS4xNTggMTguNzYzLDQ3LjU1MyBMMTguNzYzLDQyLjU0MyBMMTguNzYzLDQxLjU3NCBMMTguNzYzLDQxLjQxMiBDMTguNzYzLDQxLjEzMyAxOC43Miw0MC44NjEgMTguNjQ4LDQwLjYwNSBMMjQuMDQ4LDQwLjYwNSBDMjMuOTc0LDQwLjg2MSAyMy45MzMsNDEuMTMyIDIzLjkzMyw0MS40MTIgTDIzLjkzMyw0MS41NzQgTDIzLjkzMyw0Mi41NDMgTDIzLjkzMyw0Ny41NTMgQzIzLjkzMyw0OS4xNTggMjUuMjM2LDUwLjQ2MSAyNi44NDEsNTAuNDYxIEMyOC40NDYsNTAuNDYxIDI5Ljc0OSw0OS4xNTggMjkuNzQ5LDQ3LjU1MyBMMjkuNzQ5LDQyLjU0MyBMMjkuNzQ5LDQxLjU3NCBMMjkuNzQ5LDQxLjQxMiBDMjkuNzQ5LDQxLjEzMyAyOS43MDgsNDAuODYxIDI5LjYzNCw0MC42MDUgTDMxLjg0OSw0MC42MDUgQzMzLjU0Miw0MC42MDUgMzQuOTE5LDM5LjIyOCAzNC45MTksMzcuNTM1IEwzNC45MTksMjAuNTk5IEwzNC45MTksMTguNjI2IEwzNC45MTksMTYuMjA4IEwzNC43MSwxNi4yMDggTDcuOTg2LDE2LjIwOCBMNy45ODYsMTYuMjA4IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTIuOTI5LDE2LjIwOCBDMS4zMjMsMTYuMjA4IDAuMDIxLDE3LjUwOSAwLjAyMSwxOS4xMTcgTDAuMDIxLDMxLjU1NiBDMC4wMjEsMzMuMTYxIDEuMzIzLDM0LjQ2NCAyLjkyOSwzNC40NjQgQzQuNTM0LDM0LjQ2NCA1LjgzNywzMy4xNjEgNS44MzcsMzEuNTU2IEw1LjgzNywxOS4xMTYgQzUuODM3LDE3LjUwOSA0LjUzNSwxNi4yMDggMi45MjksMTYuMjA4IEwyLjkyOSwxNi4yMDggWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMzkuNzY3LDE2LjIwOCBDMzguMTYsMTYuMjA4IDM2Ljg1OSwxNy41MDkgMzYuODU5LDE5LjExNyBMMzYuODU5LDMxLjU1NiBDMzYuODU5LDMzLjE2MSAzOC4xNiwzNC40NjQgMzkuNzY3LDM0LjQ2NCBDNDEuMzcyLDM0LjQ2NCA0Mi42NzMsMzMuMTYxIDQyLjY3MywzMS41NTYgTDQyLjY3MywxOS4xMTYgQzQyLjY3MywxNy41MDkgNDEuMzcyLDE2LjIwOCAzOS43NjcsMTYuMjA4IEwzOS43NjcsMTYuMjA4IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=");
    height: 24px;
    vertical-align: -6px;
    margin-right: 7px
}

body, html {
    width: 100%;
    height: 100%
}

body {
    color: #3b4046;
    background-color: #fefefe;
    font-size: 1em;
    line-height: 1.8;
    font-weight: 300;
    font-family: PingFang SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    -webkit-font-smoothing: antialiased
}

body * , body :after, body :before {
    box-sizing: border-box
}

.pure-button, a {
    text-decoration: none;
    -webkit-transition: color, .3s ease, background-color .3s ease;
    transition: color, .3s ease, background-color .3s ease
}

.main-container {
    width: 100%;
    height: 100%;
    min-width: 1024px;
    margin: 0 auto
}

.pure-g, .pure-g [class*=pure-u] {
    font-family: PingFang SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif
}

img.fade {
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

img.fade.lazyloaded {
    opacity: 1
}

.swiper-pagination {
    display: none
}

.swiper-pagination .swiper-pagination-bullet:first-child {
    background: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/icon-home.png) no-repeat -.5px 0;
    background-size: 8px 8px;
    width: 8px;
    height: 8px;
    border-radius: 0
}

.swiper-pagination-bullet-active {
    background: #4bfcff
}

.swiper-pagination-bullet {
    background: #a4e19d;
    width: 6px;
    height: 6px;
    margin-left: 1px
}

.inner-wrapper {
    box-shadow: 1px 0 1.4px rgba(0, 0, 0, .15), -1px 0 1.4px rgba(0, 0, 0, .15)
}

.unit {
    position: relative;
    width: 100%;
    height: 800px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden
}

.unit .left, .unit .right {
    position: relative;
    height: 100%
}

.unit .unit-wrapper {
    height: 100%;
    max-width: 1000px;
    margin: 0 auto
}

.unit .unit-wrapper .left {
    padding-left: 0 !important
}

.unit .unit-title {
    margin-top: 118px;
    padding-left: 0
}

.unit .unit-title .number {
    width: 76px;
    height: 76px;
    display: block
}

.unit .unit-title .number img {
    width: 100%;
    height: 100%
}

.unit .unit-title .title {
    font-weight: 200;
    font-size: 50px;
    line-height: 170%
}

.unit .unit-title .sub-title {
    font-size: 22px;
    color: #999;
    line-height: 120%
}

.unit .iphone-mock {
    position: absolute;
    width: 420px;
    height: auto;
    bottom: 30px
}

.unit .iphone-mock .mock {
    position: absolute;
    width: 100%;
    height: 0;
    padding-bottom: 190%;
    background: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/phone-high-res@2x.png) no-repeat;
    background-size: 420px 819px
}

.unit .iphone-mock .screen {
    position: relative;
    width: 80%;
    margin: 25% auto 0;
    z-index: 4
}

.unit .iphone-mock .screen img {
    display: block;
    width: 100%;
    height: 100%
}

.hero-unit {
    background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/banner@2x.jpg)
}

.hero-unit .nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #fff
}

.hero-unit .nav .nav-brand {
    width: 85px;
    height: 50px;
    background: url(https://image.9game.cn/s/uae/g/1m/ngp_dsp/ucc/logo.png) no-repeat;
    background-size: cover
}

.hero-unit .nav .pure-menu {
    max-width: 1000px;
    margin: 0 auto;
    height: 50px
}

.hero-unit .nav .pure-menu-list {
    float: right
}

.hero-unit .nav .pure-menu-selected {
    position: relative
}

.hero-unit .nav .pure-menu-selected:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #ff5712;
    border-radius: 7px
}

.hero-unit .header {
    padding: 120px 0 0
}

.hero-unit .title {
    height: 121px;
    margin: 0 auto;
    text-align: center
}

.hero-unit .title img {
    width: 100%;
    max-width: 584px;
    height: auto
}

.hero-unit .download-buttons {
    position: relative;
    width: 385px;
    margin: 32px auto 0
}

.hero-unit .download-buttons .pure-button {
    display: inline-block;
    color: #fff6de
}

.hero-unit .download-buttons .button-qrcode {
    width: 88px;
    height: 88px;
    background: url(https://cdn.9game.cn/ngm-portal-jws/ng_ios_qrcode.png) no-repeat;
    background-size: 88px 88px;
    margin-right: 10px
}

.hero-unit .download-buttons .button-qrcode:hover {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    -webkit-transform-origin: top right;
    transform-origin: top right
}

.hero-unit .download-buttons .button-app-store {
    width: 280px;
    height: 88px;
    padding-left: .8em;
    padding-right: .8em;
    line-height: 63px;
    letter-spacing: 0;
    font-size: 28px;
    background-color: #f8af43;
    background-image: -webkit-linear-gradient(bottom right, #fd7e36, #fdb745);
    background-image: linear-gradient(to top left, #fd7e36, #fdb745);
    border-radius: 1px;
    -webkit-transition: none;
    transition: none
}

.hero-unit .download-buttons .button-app-store:active {
    background-color: #ff9e00;
    background-image: -webkit-linear-gradient(bottom right, #fa6d1d, #ff9e00);
    background-image: linear-gradient(to top left, #fa6d1d, #ff9e00)
}

.hero-unit .iphone-mock {
    display: none
}

#unit-1 {
    background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/bg-part1@2x.jpg)
}

#unit-1 .left {
    padding-left: 10%
}

#unit-1 .circles {
    position: absolute;
    bottom: 50px;
    right: -40px;
    width: 488px;
    height: 356px;
    background: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/bubbles@2x.png) no-repeat;
    background-size: 488px 356px;
    z-index: 4
}

#unit-2 {
    background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/bg-part2@2x.jpg)
}

#unit-2 .unit-title {
    margin-top: 198px;
    color: #fff
}

#unit-2 .unit-title .sub-title {
    color: #fff
}

#unit-2 .iphone-mock {
    right: 130px
}

#unit-2 .triangle {
    display: none
}

#unit-2 .bubble-box {
    position: absolute;
    bottom: 45px;
    left: -180px;
    width: 282px;
    height: 364px;
    background: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/bubble-box@2x.png) no-repeat;
    background-size: 282px 364px;
    z-index: 4
}

#unit-3 {
    background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/bg-part3@2x.jpg)
}

#unit-3 .left {
    padding-left: 200px
}

#unit-3 .circles {
    position: absolute;
    bottom: 190px;
    right: 110px;
    width: 191px;
    height: 191px
}

#unit-3 .circles .ic {
    position: relative;
    width: 191px;
    height: 191px;
    background-repeat: no-repeat;
    z-index: 4
}

#unit-3 .circles .ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -95.5px 0 0 -95.5px;
    width: 191px;
    height: 191px;
    border-radius: 1000px;
    -webkit-animation: a linear infinite 1.8s;
    animation: a linear infinite 1.8s
}

#unit-3 .circles #ripple-1 {
    background-color: #4ab5fe;
    opacity: .2;
    z-index: 3;
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms
}

#unit-3 .circles #ripple-2 {
    background-color: #4ab5fe;
    opacity: .2;
    z-index: 2;
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

#unit-3 .circles #ripple-3 {
    background-color: #4ab5fe;
    opacity: .2;
    z-index: 1;
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

#unit-3 .circles .ic {
    background: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/ic@2x.png) no-repeat;
    background-size: 191px 191px
}

#unit-4 {
    display: none
}

#unit-5 {
    height: auto;
    padding: 60px 0;
    text-align: center;
    font-size: 80%;
    color: rgba(0, 0, 0, .4);
    background-color: #f8f8f8
}

#unit-5 a {
    color: inherit
}

#unit-5 a:hover {
    color: #333
}

@media screen and (max-width:1024.5px) {
    .main-container {
        max-width: 768px;
        min-width: inherit;
        overflow: hidden
    }

    .inner-wrapper {
        box-shadow: none
    }

    .swiper-pagination {
        display: block
    }

    .unit {
        padding: 0 15px;
        height: 100%
    }

    .unit .left, .unit .right {
        position: static;
        height: auto
    }

    .unit .unit-title {
        margin-top: 10%;
        padding-left: 20px
    }

    .unit .unit-title .number {
        width: 38px;
        height: 38px;
        margin-bottom: 8px
    }

    .unit .unit-title .number img {
        width: 100%;
        height: 100%
    }

    .unit .unit-title .title {
        font-weight: 200;
        font-size: 25px;
        line-height: 120%
    }

    .unit .unit-title .sub-title {
        font-size: 11px;
        color: #999;
        line-height: 180%
    }

    .unit .iphone-mock {
        position: relative;
        width: 70%;
        max-width: 414px;
        top: 20px;
        margin: 0 auto
    }

    .unit .iphone-mock .mock {
        background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/phone@2x.png);
        background-size: cover
    }

    .unit .iphone-mock .screen {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    .hero-unit {
        background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/m-bg-banner@2x.jpg)
    }

    .hero-unit .nav {
        display: none;
        height: 40px;
        padding: 0 10px
    }

    .hero-unit .nav .nav-brand {
        width: 68px;
        height: 40px
    }

    .hero-unit .nav .pure-menu {
        padding: 0
    }

    .hero-unit .nav .pure-menu-list {
        font-size: 80%;
        height: 40px
    }

    .hero-unit .header {
        padding-top: 15%
    }

    .hero-unit .title {
        height: auto
    }

    .hero-unit .title img {
        width: 80%
    }

    .hero-unit .download-buttons {
        width: 100%;
        margin-top: 15px
    }

    .hero-unit .download-buttons .button-qrcode {
        display: none
    }

    .hero-unit .download-buttons .button-app-store {
        margin: 0 auto;
        width: 140px;
        height: 44px;
        line-height: 33px;
        font-size: 14px
    }

    .hero-unit .iphone-mock {
        display: block;
        top: 25px
    }

    #unit-1 {
        background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/m-bg-part1@2x.jpg)
    }

    #unit-1 .left {
        padding-left: 0
    }

    #unit-1 .circles {
        position: absolute;
        left: 58%;
        bottom: 25px;
        margin-left: -109.8px;
        width: 219.6px;
        height: 160.2px;
        background-size: 219.6px 160.2px;
        z-index: 5
    }

    #unit-2 {
        background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/m-bg-part2@2x.jpg)
    }

    #unit-2 .unit-title {
        margin-top: 40px
    }

    #unit-2 .iphone-mock {
        position: absolute;
        top: 150px;
        bottom: inherit;
        left: 0;
        right: 0;
        width: 65%
    }

    #unit-2 .triangle {
        display: block;
        position: absolute;
        background-repeat: no-repeat;
        z-index: 6;
        -webkit-animation: b infinite 2s ease;
        animation: b infinite 2s ease
    }

    #unit-2 #triangle-red {
        width: 77px;
        height: 75px;
        background-size: 77px 75px;
        background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/triangle-red@2x.png);
        top: 50%;
        right: 2%
    }

    #unit-2 #triangle-green {
        width: 76px;
        height: 72px;
        background-size: 76px 72px;
        background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/triangle-green@2x.png);
        top: 70%;
        left: 4%;
        -webkit-animation-delay: .4s;
        animation-delay: .4s
    }

    #unit-2 .bubble-box {
        position: absolute;
        left: 56%;
        bottom: 5%;
        width: 112.8px;
        height: 145.6px;
        background-size: 112.8px 145.6px;
        z-index: 5
    }

    #unit-3 {
        background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/m-bg-part3@2x.jpg)
    }

    #unit-3 .left {
        padding-left: 0
    }

    #unit-3 .unit-title {
        margin-top: 40px
    }

    #unit-3 .circles {
        bottom: 10%;
        right: 71px;
        z-index: 5;
        width: 95px;
        height: 95px
    }

    #unit-3 .circles .ic {
        position: relative;
        width: 95px;
        height: 95px;
        background-repeat: no-repeat;
        z-index: 4
    }

    #unit-3 .circles .ripple {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -47.5px 0 0 -47.5px;
        width: 95px;
        height: 95px;
        border-radius: 1000px;
        -webkit-animation: a linear infinite 1.8s;
        animation: a linear infinite 1.8s
    }

    #unit-3 .circles #ripple-1 {
        background-color: #4ab5fe;
        opacity: .2;
        z-index: 3;
        -webkit-animation-delay: 0ms;
        animation-delay: 0ms
    }

    #unit-3 .circles #ripple-2 {
        background-color: #4ab5fe;
        opacity: .2;
        z-index: 2;
        -webkit-animation-delay: .3s;
        animation-delay: .3s
    }

    #unit-3 .circles #ripple-3 {
        background-color: #4ab5fe;
        opacity: .2;
        z-index: 1;
        -webkit-animation-delay: .6s;
        animation-delay: .6s
    }

    #unit-3 .circles .ic {
        background-size: 95px 95px
    }

    #unit-4 {
        display: block;
        background-image: url(https://image.uc.cn/s/uae/g/0h/menghu/ios/images/m-bg-banner@2x.jpg)
    }

    #unit-4 .app-info {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 175px;
        margin-top: -87.5px;
        margin-left: -150px;
        text-align: center
    }

    #unit-4 .app-info div {
        margin: 0 auto;
        text-align: center
    }

    #unit-4 .app-info img {
        width: 100%;
        height: 100%
    }

    #unit-4 .app-info .app-icon {
        width: 86.5px;
        height: 86.5px
    }

    #unit-4 .app-info .app-slogan {
        width: 144.5px;
        height: 18px;
        margin-top: 15px
    }

    #unit-4 .app-info .download {
        margin-top: 15px;
        background-color: transparent;
        border-radius: 0;
        color: #fff;
        border: 1px solid #fff;
        height: 39px
    }

    #unit-4 .copyright {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        color: hsla(0, 0%, 100%, .4);
        font-size: 12px;
        text-align: center
    }

    #unit-5 {
        display: none
    }
}

@media screen and (max-width:320px) {
    #unit-2 .bubble-box {
        position: absolute;
        left: 50%;
        bottom: 2%;
        width: 112.8px;
        height: 145.6px;
        background-size: 112.8px 145.6px;
        z-index: 5
    }
}