.download-banner {
    min-height: 100vh;
    padding-top: 88px;
    background: #edeff1 url(../img/banner-bg.cef92e7.png) bottom/auto 808px no-repeat
}

.download-banner-inner {
    max-width: 1200px;
    min-width: 320px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 140px
}

.download-title {
    /* padding-top: 90px; */
    text-align: center;
    padding: 16px;
}

.download-title h1 {
    font-size: 56px;
    font-weight: 600;
    color: #e61b46;
    line-height: 58px;
    margin-bottom: 16px
}

.download-title h3 {
    font-size: 34px;
    font-weight: 600;
    color: #030810;
    line-height: 38px;
    margin-bottom: 40px
}

.download-title p {
    font-size: 20px;
    color: #030810;
    line-height: 28px
}

.donwload-banner__wrap {
    margin-right: -22px
}

.donwload-banner__wrap img {
    width: 672px
}

.download-mobile {
    display: none
}

.download-list {
    width: 1200px;
    min-height: 216px;
    align-items: center;
    justify-content: center;
    margin: -88px auto -128px;
    background: #fff;
    border-radius: 48px;
    box-shadow: 0 4px 28px 0 rgba(41,45,59,.08);
    display: flex;
    position: relative;
    z-index: 100
}

.download-list a:hover {
    text-decoration: none
}

.download-item {
    width: 300px;
    padding-top: 45px;
    text-align: center;
    position: relative
}

.download-item:before {
    content: "";
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 28px
}

.download-item__title {
    font-size: 16px;
    color: #4f545e;
    line-height: 18px
}

.download-er-code {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 183px;
    left: 50%;
    width: 166px;
    height: 166px;
    padding: 15px;
    background: #fff;
    box-shadow: 0 4px 28px 0 rgba(41,45,59,.16);
    border-radius: 16px;
    transform: translate(-50%,-5px)
}

.download-er-code img {
    width: 100%
}

.download-item--ios:before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAllBMVEUAAAADCBAODhwDCBEDCRAECRETExMDChEECRAECRAGDBMHDRUoKCgDCBAECBEDCREDCBEDCREECREFCBAECREDCREDCREECBEFChEFChIECxIECRIFChQFCxEcHBwDCRAECBEECRAECREECREECREECBAECREECRIJCRMLCxUDCRAECBAECBADCREECBEDCBADCBEDCBAuRcIcAAAAMXRSTlMA+hLy6oAMS66KJyEG3rhP9uPDWz6llHhoYkU4MiwJ7tPLx7KRfG1VGxfn2L2p1Z6YgAn8EgAAAoNJREFUeNrt2NlS4zAQBdDrJY5jO86+kH1fIAHu///cQEKCYcJUYUlxV43Oq1+62q1uqWFZlmVZlmVZlmVZlvWXqJQ2XiDFpNXkmxBC1Bo86UCEXcgPXUgwnPLiAQIMPF5FKF7N4ZWP4sXn/Iip6WTOjCEKV2JGE4VzPWbUULgSM1IULpjy03SHwtWYsUXxVvzUgwDPvNpAAJcXXgsSRPwQCqjndyOeLAT0n7OYdGalGHJEcYLiuOXeqnN87Q2CWx+3q7Tq+43ZslJzcQfxesYLZ9kKkOX2m8w69CcwaxzyKycs46IcOvzOXwcwx33hDY+VdoKkXXnkTY0yTBk0+BOf//AKMzbMKw1gQIn5LQzUdo8qOtBtSzUP0Cv2qKSSQK8DVdS30OyBKrwhNEuqSvlpQ7c+VbSg3TMVvEC7ERVUJ9BuJakBvXtifk/Qb0cFfZyJmRp7ZAgY83MYcGR+JRgwF3bGUGV+ZRgwZX4jGOAwvxiAqICMZKjO/NowwBfWqJWOfRcGLJlfFQZ0qWCIKxlPxC70a1GBn+BMyg3WyHj1qMCJoF1KFQdotyZl1XWbatbQbOKQsgo7paIwgJxOZGIVG9SpLB1Cow7VPUOjMt+IqmyfZ2Ku12uqSqGV6/GdoBdahW8krWX2dQpbNK5kJQhwfUkVpLo8X8KEJvOqxzBh7DCnHr4ofLc3S3Ah4qfVxzBlNxWzcPhQ4++FUGBgglRdGLXk73hjmBUs+BvOADmoR1SdH5oz70Y8ZZg3OX4LptIOcBJtmvzicYi72Hi8cI4DZEUVn1edPe5kX2mcollsXHyX1EL/lJ3uCPcUtQfj4MeAo7ELy7Isy7Isy7Isy7L+Q38AuB7ykwnPh3IAAAAASUVORK5CYII=) 0 0/72px no-repeat
}

.download-item--android:before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAilBMVEUAAAADCBADCRAECBAECREECBEUFBQECRI2NjYZGRkDCRADCREFCREMDBkDChADCBADCBEECBEDCRAHDRUDCBADCBADCRADChEECxIJCRMECRAECRAFCRADCRMECxMGDBEQEBYECREECBAECBEECRAFChQFCxIDCBAECREECREEChEFChEGCREDCBAaTAzcAAAALXRSTlMAno5/dngMcwQJ6KNjE07i89SqIfz47kpGGtDMb1FBKw/CvLeLMi7ZxYiFa1cSrcPMAAACXElEQVR42u3ax3LiQBSF4QNYgVaWyJgcHM/7v94ACjWDzeB2SS2X63677tVfdRd3cyGEEEIIIYQQQgghPnOIMtyURQeYFsQebvLiAMZZPOCGAy2Y14+2uGEb9dECn2NUXBeVMX20YpacK1aPnWcVk7F67jyuzm3JDO2Y0D92Ff+hukefE7RkPuAnBnO0I9vxhl2GFjhD3jR0YJqd8r9SG0YFM94xC2DQes675msY4274Bc8uTNnzQoUrjx94q1DxYg9DJsz5gKt4RbmAz9wERrhPzL0DiHglAvDO3JMLE95YSDLX4geWmyUsvMEAN2JlyMqnnxEMGFPDGM1LqSFF80bUMELjVtSyQtN8avHRtB619NC0LrV00TS/o8VHQ46+NV7jm9Zjyz+iTkHKE7UAsOxqWQJYKJ6kAWrjzpkLAYtaHoCQubmLujgsKFs/yFYsOKjLhqWlftCSpQ3qErPk6Ac5LMWoCys9/aAeKxIkQRIkQRIkQRIkQRIkQRL0Q4IGLFn6QRZLA9QlYWmhH7RgKUFdOiwMpvpB0wELHdRlOmLuBfpBeGFuNEVtJopnaf87Qf2UZ2qCGgWv25m3AL4TBITebPsaoBH6QVd+f9AjtTyiaUtqWaJp6yE1DNdonPOzJnbS4Zd1YES4G/EL1C6EMbZtT1mx7IseK8HpCcNsVhxcPLDSx10SdI8E3SNB90jQPb8/qP9hpzvtBiFiaXJ9pvKENngsDANcBAMWPLQhi5nrXV89xBlasRjxzHNRcD2ejUK0ZLrfJF6Iv4RestlPIYQQQgghhBBCCPFT/AEA12UdcGfOYQAAAABJRU5ErkJggg==) 0 0/72px no-repeat
}

.download-item--mac:before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAclBMVEUAAAAFChEEChEDCRMDCBAFChQLCxYDCBEDCRAECREECREDCRAECBEECREDCREqKioDCBADCBEDCRADCREECBAECBEECBATExMDCREECREFChIDChAFChMHDRQECBEDCREFCBADCRIJCxQECREECRIDCBDFUmiBAAAAJXRSTlMAa4RS3jAWl6A/derVxqkG+/Ls4r64fA3miGJONCW0pFtVHNKRb03N6QAAAX9JREFUeNrt2dlqwzAQheFxaivyHu/Z06Sd93/FurmLhXFBSkeY890LfoQGJEQAAAAAAAAAAABgQemGHWq0suxJ2bHUrkizc5psNOxcQzb4DeyDisCRwlFQQI4ECEIQghCEIAS9iI9eBcUZZz4FnXbM3x4FqZQ5VR4F9cx17NOhLqrbw5MpO2/b9hANpIIuy3QsHVRqfsryHT/pUjboylMb0aDA6MkH0aCQJypFkkERTyUkGnQ0gi6yQYkRNPgWJLxDn0bQkTw71OEgGkR7o6goRYM0G/KLZNCJTbFkEIVGzxeJBplzdpINom7ScyXhIPU6aHslHURRzcy7vHje0NKIxIPosbkFiohUonvlwZ3a46c0ghCEoNUEdRtHOv61wv8yBCFoTUEVO1eRjZada8lGzM7FZOVes1P1nSyV5485Cc9IZpecS3qjiGdE9CcIWoKgJesP2vKMLYkYe7wqGnu8Khp7vCoae7wq6nlRT//pEC46EAAAAAAAAAAAADj3A3LmXQSjUHIlAAAAAElFTkSuQmCC) 0 0/72px no-repeat
}

.download-item--windows:before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAllBMVEUAAAAECxMDCREFCREHDRQDCBEDCRAHDhYECRAECRAFCRAFChIECBAJCRMcHBwDCBADCBAECBEECBADCREDCREDCBAEChEECREGCxEECREECRAECRADCBEECRIFChEFCREDCREECRIICREDCREECREECBAECBEDCRAECREFCBADChEECxIFChULCxYNDRsTExMDCREDCBCet2L4AAAAMXRSTlMAQ+ZsJvXtIsqMbWE9Ggn729W/p6GbhX4rxLGtlXJnV1A2H+PRureRd11MRjAWEg3lYnTAPQAAASBJREFUeNrt2llSwkAURuGbBG3GqCiKCjI4IDO9/82RKpqhUlSKJ+4FzreCU+nup/wCAAAAAAAAwIBGvfb6XL4XfW76Vfl8uvMboidt97ud38cHH+gFLQa9t5f3lQ8Ug8I18YFmkEsqH7trohi0nPX/W82hSNUHWkHzwTi7JuFwSiKJWtAwyt7wz/ZwFIPS9qQ6+tu9YeWgVvPbFyid/Q75PRtfiCCCCCKIIIIIIogggggiiCDdoKhYKtKITiW4SXExJ1KLT3Wdr4wggggiiCCCCCKIIIIIIujGgsz9Jt8MCbodM0OCA87K1CJnXs/GKGULY5T8XKdnZK6T55KRiUGT3cnXkVFcbCfI3Gwwx02zxZyFYaXZ6SkAAAAAAABw0db2HEQkMCPfAwAAAABJRU5ErkJggg==) 0 0/72px no-repeat
}

.download-item--ios:hover:before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAllBMVEUAAADnG0bnG0bnHEfnHEfoHEfoHEfoHEfmHEfnG0bnG0fnHEfrIUnoH0vnG0bnG0fnHEbvIFDsJ0/5K1jnG0bnHEbnG0bnHEnyJEz/LFjnHEfnG0fnG0fnHEboHEfpHUjpHEnpHknoHEnsHkrmG0bnG0fnG0fnHEbnHEfmG0fnG0fnHEfpIU3nHEbnG0bnG0boHEbmG0Zj7y+fAAAAMXRSTlMA++qAeVpQS/n28q4nId7IuBAMCeLUwT4TBaWUi2hiRTgyLBru2LKRbbuphxfmns2Y5Anr9AAAAohJREFUeNrt2tdy4kAQBdArAQJFRM4mLtH2+v7/z63BRBs/oJlBXbVzXnnpmr6a0AUsy7Isy7Isy7Isy7J+iApp8x1SNEptfgohhNfkQR8izEMeDSDBZMGTFwgw9nkWIX9ehWcu8hcH3BOT6V6VVybIXYFX2shdLeAVD7kr8EqK3NUXvFjMkTuPV0rI34oXRQjQ4tkaAtR4EkjoFxDxKBSQ570pD6oC9p8vMem0CjHkiOIe8tMtF1f97UdxXLv3o7dKE9dttpZDr4sniIstnlSWpdptNaO2wwtnM2rArFnIW5WwjJNy6PA7t1CHObV3hz+9DTs9NDrDN97VLMOUcZO/cFyHv/uAGWuHGaVG2rZjdlUD2S5SRR+6lajmBXrFPpXsetBrQxW+B81eqCKYQLNeQgV+B7qNqKIE7VpU8A7tplSQNKDdStIGtPeH2f2BfnMqGOFMxqkxh34FZleFAVtmV4ABf4V9Y0iYXRkGLJjdFAY4zC6GARVpK+Qzuw4McIVt1Eqf/QAGLJldAgMGVDDBhYgn4gBnMk57t4ETGTdYI8drQAWVCNqlVLHBgZhUm8h1h2qK0KxRIWUFO6WisA5Ayk5kYhRb96ksnUCjPo+kvGHL/CQq2S6/iLleF6kqxYW+Py4IeqHtJEV679WnsEHjStYCAV1XUoJUh+dLmNBmVn4ME2aOmAuR4myv1cOJiKb5M5gyX4gZOBx5fFwIk4Z8VNKFUUs+JpjBrHqVj6iMYVrtTkVOUt20W8Gdesowr7HljWTXqeMgWrd5422Cp1gHlyXY3vYkGro867/iSV6HzUOnqusuvut54aEmdzDFM0Wd8az+a8HRrAbLsizLsizLsizLsv5D/wD4WfIRx0i4xwAAAABJRU5ErkJggg==)
}

.download-item--android:hover:before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAilBMVEUAAADoHEbnG0fnHEboHEbnHEfnHEf/HVTpLVvnHEfnG0boHEfsJk3nG0bnG0foHEfoHUjnG0bnHEfpHEnnG0bnG0bmG0bnG0btHUznHEjpHEjrI0vyI03nHEboHEfoG0fpHkrnG0boHEfpHkfnG0bnHEbvIFHmHEbnG0fmHEfnHEbnHkjoHUfmG0ZC0dhaAAAALXRSTlMAjp5/eHZyCAt11KMN8eFkTurnLPz3zsIbSkYVEohRQSKnbTK8qw+ayLi2X1d86vVgAAACSklEQVR42u3a2W6rMBSF4ZWEkwESZgKBzFPH9f6vd6JCkQ5pTuoKm6ja39UWV7+QJduSIYQQQgghhBBCCCG+cnAz3JS5B5hWzBzc5MwKGGfxgBsOtGDeyD3ihqM7QgfeuMCXFnxDJ+Y2LqJ9Pw0TMgnTp32EC3uObuT0Dr2Q/wh7kcccHZnH/EI8Rze2r7zhdYsOTBLelExg2vjE/zpNYdRyzjvmS5hR9zxUUcpvSGHMih9CP3J4xYn8sJxWMCRnyQMQsiEA4LGUwwybpXcALhtcAO8s2TBiz4q9hcUrFrY2K3uY4LKWsKHx0YUBCypYQL8TFZyg34wKZtAuopIIunlU4kG3AZUMoFuPSnrQzesr8aBJ5FmLM37ovLC8CG1a7ngRrAFseko2ANYBL3ZLtOeZJR+wqOQP4LP0jNZMWAnH6kHjkJWJhgPiRj1oU8+pht1iqB401LCPsDZQDxqwJkESJEESJEESJEESJEESJEEPEhTzk6UeZNVzjLbY/LRWD1rXs422PLESZ+pBWczKE9qSBSytoB6EFUtBhtbkZdFu9JOg0a7sydGiYnW0nTXwkyDAd+zjqoAW6kENvz9oSCV76Lahkg10OydUkJyh3ZAKhjCgz2/rwwj/JeA3BC8+jBlPpwVr1vSDxVoxnY5h2PhqpUxYG+E+CbpHgu6RoHsk6J5fHzS6Chp2GwSXn/LmMxUXXdixEi/xoYhZcdCF7YylQfPVw2yLTqxnzd/hlD0+OpL1UtvxUamuhGkvgxBCCCGEEEIIIcSj+Avb3WWEi5YHMwAAAABJRU5ErkJggg==) 0 0/72px no-repeat
}

.download-item--mac:hover:before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAdVBMVEUAAADnHUfoG0fmHEjnHEbqH0nqIU3oG0fnG0bnHEfoHEnnG0bnG0fnHEfnHUj/Kl7nG0fnHEbmG0fnHEfnG0fmHEfoG0fsJVXnG0fnHEfoHEfoHEfoHUfvJk3nHEfnG0bnG0bnHEbnHEfnG0jrIUnpHUnmG0ZFhk6gAAAAJnRSTlMAa4RS3jAXl+uiP8apdTQG8ubi1L64fA2fiHBiThTc1rSTW1UmI1HWxMEAAAF/SURBVHja7dnJbsMgFIXh67QmxnM8Zh6a9L7/I9ZpVzWyXAnSi6zzbVgh/QuQGAgAAAAAAAAAAAAsKF2xQ5VWlj0RO7axK9LsnCYbFTtXkQ1+AfugNHAkdRQUkCMBghCEIAQhCEG/xAevguKaa5+Cjsx88yjoFDFHJ4+CuqEn9mlRp6VWnuyy/NY0u7AntW8v9TaWDio0f7sk/EMXskFXHluJBgVGT9KLBr3zSKlIMijnsYxEgw5G0EM2KDOCet+CPmWDPoygA3m2qM+9aBBtjKK0EA3asiF5SAYd2RRLBtHZ6KlJNMjcZ0fZIGpHPVcSDlIb49VXNojCiAdJmvAgCkk8iNRK70/Pcb/tlAdnao+v0ghCEIIWE9SuHGn5aYH/ZQhC0JKCSnauJBsNO9eQjZidi8nKPWKnojtZKvK3KRlPyCan5AW9UMgTQvoTBM1B0JzlB615wppEDD1eFQ09XhUNPV4VDT1eFXU8q6P/tHuftSMAAAAAAAAAAABw7gso5WcTULL3OAAAAABJRU5ErkJggg==) 0 0/72px no-repeat
}

.download-item--windows:hover:before {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAilBMVEUAAADnHEfoHkjnHEfrIkrnG0bnG0bnHEfoHUn3LEznG0boHEboHEfoHUfpHkrpHUrsHErmG0bnG0bnG0bnG0fmHEbnG0bnHEfnHEbtIk7nG0bnG0bnG0bnHEfnG0bnHEfoHEfoHEjmIUr/LGXmG0fnHEbnG0bnHEbmG0fnG0fpHUjnHEfmHEbmG0Yn2dDQAAAALXRSTlMA5kNsJu3AgzwLsG1hTy0iGvfbuKmblY56FPvz1dHIpHFXHwXjy6CKZl5GNcxodp4+AAABG0lEQVR42u3a63LBYBCH8U1E6tjQ0tIzaUvV3v/tOb2DGJPxyS6e3xU8E/t+8hcAAAAAAAAADnRqrbvPj6qYy7NZ5bnx/qobYqd+3/56enx40QIxMPwfDX7TSAOroHAmvZ+qBpZB2fJM3roa2ASFMxn007FIUwOroGHtb/WGdS0RqZgFjePppLd9w4ZBedJuLt9wVwPboH76rSWSs9+Q7vj4QgQRRBBBBBFEEEEEEUQQQQTZBsXl6iKd+FSCmxSVy0Ra0amu85URRBBBBBFEEEEEEUQQQQTdWJC7v8n3xkA+vtCeLJ5OGh6mFm7HKIc/5MjJXMfroOnY5GvuYvLldBTndTZYlCez9YG5CSpuCh1MTwEAAAAAAIDLtgDkjQAtC5X5sgAAAABJRU5ErkJggg==) 0 0/72px no-repeat
}

.download-item:hover .download-item__title {
    color: #e61b46
}

.download-item:hover .download-er-code {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%);
    transition: all .2s
}

.download-item--android .download-item__title:after,.download-item--mac .download-item__title:after,.download-item--windows .download-item__title:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 8px;
    margin: -3px 0 0 12px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQBAMAAADdUfNzAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAkUExURQAAAExVXU5UXVBTX1BVX09UXk1NZk5VXk9UXk5TXk9UXk5TXWaasekAAAAKdFJOUwAe62lp3Arb2tswf2E8AAAAL0lEQVQI12NID2QAAqlFAkCSeZciiGONm7MURHqDSBawiDdIFiJpjWBCTMuYCCQAlngOE9nsGZUAAAAASUVORK5CYII=) 0 0/5px no-repeat
}

.download-item--mac:hover .download-item__title:after,.download-item--windows:hover .download-item__title:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQBAMAAADdUfNzAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAqUExURQAAAPYzXfg1Xfg1X/o1X/g0Xv8zZvk1Xv8zXfg1Xvg1Xvg1Xvg1Xfg0XvXZ3r8AAAALdFJOUwAe62lp3ArbHtrbY+Ho6gAAADBJREFUCNdjSA9kAALZTQJAkvm0Iohjg5uzFUT6gEgWsIgPSBYiaYNg9oL1ZC4EEgDIuQ+GXGQRWAAAAABJRU5ErkJggg==)
}

.app-intro {
    min-width: 320px
}

.app-intro-inner {
    display: flex;
    max-width: 1200px;
    margin: 0 auto
}

.app-intro-thumbnail img {
    width: 100%;
    display: block
}

.app-intro-text h3 {
    font-size: 40px;
    font-weight: 600;
    color: #030810;
    line-height: 56px;
    margin-bottom: 36px
}

.app-intro-text p {
    font-size: 20px;
    color: #4f545e;
    line-height: 32px;
    margin-bottom: 50px
}

.app-intro-part-one {
    height: 1000px;
    background: url(https://r.hstong.com/fe/hs-web-nuxt-www-vbkr/img/part-one-bg.6f8a88e.png) center 0/cover no-repeat
}

.app-intro-part-one .app-intro-thumbnail {
    flex: 0 0 619px;
    order: 1
}

.app-intro-part-one .app-intro-text {
    padding-left: 95px;
    padding-top: 435px;
    order: 2
}

.app-intro-part-two {
    height: 888px;
    background: url(https://r.hstong.com/fe/hs-web-nuxt-www-vbkr/img/part-two-bg.06761c0.png) center 0/cover no-repeat
}

.app-intro-part-two .app-intro-thumbnail {
    flex: 0 0 588px
}

.app-intro-part-two .app-intro-text {
    padding-right: 110px;
    padding-top: 340px
}

.app-intro-part-two .app-intro-text h3,.app-intro-part-two .app-intro-text p {
    color: #fff
}

.app-intro-part-three {
    height: 888px;
    background: url(https://r.hstong.com/fe/hs-web-nuxt-www-vbkr/img/part-three-bg.1eaf7d0.png) center 0/cover no-repeat
}

.app-intro-part-three .app-intro-thumbnail {
    flex: 0 0 610px;
    order: 1
}

.app-intro-part-three .app-intro-text {
    padding-left: 100px;
    padding-top: 340px;
    order: 2
}

.app-intro-part-four {
    height: 888px;
    background: url(https://r.hstong.com/fe/hs-web-nuxt-www-vbkr/img/part-four-bg.5d2b0d9.png) center 0/cover no-repeat
}

.app-intro-part-four .app-intro-thumbnail {
    flex: 0 0 610px
}

.app-intro-part-four .app-intro-text {
    padding-right: 120px;
    padding-top: 340px
}

.app-intro-part-four .app-intro-text h3,.app-intro-part-four .app-intro-text p {
    color: #fff
}

.app-intro-part-five {
    height: 888px;
    background: url(https://r.hstong.com/fe/hs-web-nuxt-www-vbkr/img/part-five-bg.51e08b8.png) center 0/cover no-repeat
}

.app-intro-part-five .app-intro-thumbnail {
    flex: 0 0 610px;
    order: 1
}

.app-intro-part-five .app-intro-text {
    padding-left: 100px;
    padding-top: 340px;
    order: 2
}

.app-intro-part-five .app-intro-text .break-pc {
    display: block
}

.app-intro-part-six {
    height: 888px;
    background: url(https://r.hstong.com/fe/hs-web-nuxt-www-vbkr/img/part-six-bg.624d697.png) center 0/cover no-repeat
}

.app-intro-part-six .app-intro-thumbnail {
    flex: 0 0 610px
}

.app-intro-part-six .app-intro-text {
    padding-right: 65px;
    padding-top: 340px
}

.app-intro-part-six .app-intro-text .break-pc {
    display: block
}

.app-intro-part-seven {
    height: 632px;
    background: #fff
}

.app-intro-part-seven .app-intro-inner {
    display: block
}

.app-intro-part-seven .app-intro-text {
    padding-top: 155px;
    text-align: center
}

.app-intro-part-seven .app-intro-text h3 {
    margin-bottom: 32px
}

.app-intro-part-seven .download-list {
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none
}
.mobile-download{
    display: none;
}

@media screen and (max-width: 1200px) {
    .download-banner-inner {
        max-width:1024px;
        padding-left: 20px
    }

    .donwload-banner__wrap {
        padding-top: 100px
    }

    .donwload-banner__wrap img {
        width: 540px
    }

    .download-title h3 {
        font-size: 30px
    }

    .app-intro-inner,.download-list {
        max-width: 1024px
    }

    .app-intro-part-one .app-intro-text {
        padding: 340px 0 0 50px
    }

    .app-intro-part-two .app-intro-text {
        padding: 340px 60px 0 0
    }

    .app-intro-part-three .app-intro-text {
        padding: 340px 0 0 60px
    }

    .app-intro-part-four .app-intro-text {
        padding: 340px 60px 0 0
    }

    .app-intro-part-five .app-intro-text {
        padding: 340px 0 0 60px
    }

    .app-intro-part-six .app-intro-text {
        padding: 340px 60px 0 0
    }
}

@media screen and (max-width: 1024px) {
    .download-banner-inner {
        max-width:768px;
        padding-left: 20px
    }

    .donwload-banner__wrap {
        justify-content: center;
        /* padding-top: 130px; */
        display: flex;
    }

    .donwload-banner__wrap img {
        width: 400px
    }

    .app-intro-inner,.download-list {
        max-width: 768px
    }

    .app-intro-part-one .app-intro-thumbnail {
        flex: 0 0 450px;
        padding-top: 100px
    }

    .app-intro-part-one .app-intro-text {
        padding: 340px 0 0 30px
    }

    .app-intro-part-two .app-intro-inner {
        align-items: flex-end;
        height: 888px
    }

    .app-intro-part-two .app-intro-thumbnail {
        flex: 0 0 450px
    }

    .app-intro-part-two .app-intro-text {
        padding: 340px 30px 200px 0
    }

    .app-intro-part-two .app-intro-text h3 {
        font-size: 36px
    }

    .app-intro-part-three .app-intro-inner {
        align-items: flex-end;
        height: 888px
    }

    .app-intro-part-three .app-intro-thumbnail {
        flex: 0 0 450px
    }

    .app-intro-part-three .app-intro-text {
        padding: 340px 0 200px 30px
    }

    .app-intro-part-three .app-intro-text h3 {
        font-size: 36px
    }

    .app-intro-part-four .app-intro-inner {
        align-items: flex-end;
        height: 888px
    }

    .app-intro-part-four .app-intro-thumbnail {
        flex: 0 0 450px
    }

    .app-intro-part-four .app-intro-text {
        padding: 340px 30px 200px 0
    }

    .app-intro-part-four .app-intro-text h3 {
        font-size: 36px
    }

    .app-intro-part-five .app-intro-inner {
        align-items: flex-end;
        height: 888px
    }

    .app-intro-part-five .app-intro-thumbnail {
        flex: 0 0 450px
    }

    .app-intro-part-five .app-intro-text {
        padding: 340px 0 200px 30px
    }

    .app-intro-part-five .app-intro-text h3 {
        font-size: 36px
    }

    .app-intro-part-six .app-intro-inner {
        align-items: flex-end;
        height: 888px
    }

    .app-intro-part-six .app-intro-thumbnail {
        flex: 0 0 450px
    }

    .app-intro-part-six .app-intro-text {
        padding: 340px 30px 200px 0
    }

    .app-intro-part-six .app-intro-text h3 {
        font-size: 36px
    }
}

@media screen and (max-width: 768px) {
    .download-banner {
        padding-top:56px;
        background: url(https://r.hstong.com/fe/hs-web-nuxt-www-vbkr/img/banner-bg-mobile.07c9ffc.png) 50%/cover no-repeat
    }

    .download-banner-inner {
        max-width: none;
        padding-left: 0;
        padding-top: 88px;
        /* display: block; */
        flex-direction: column-reverse;
    }

    /* .donwload-banner__wrap {
        display: none
    }

    .download-title {
        padding-top: 0;
        text-align: center
    } */

    .download-title h1 {
        font-size: 44px;
        font-weight: 600;
        color: #fff;
        line-height: 48px;
        margin-bottom: 24px;
        margin-top: 28px
    }

    .download-title h3 {
        font-size: 20px;
        font-weight: 600;
        /* color:#fff; */
        line-height: 22px;
        margin-bottom: 32px;
        margin-top: 28px
    }

  

    

    .download-list {
        display: none
        
    }
    .mobile-download{
        display: flex;
        width: 100%;
        justify-content: center;
        flex-direction: column;
        background: transparent !important;
        margin-top: 20px;
        box-shadow: none;
        color: #fff;
    }
    .donwload-banner__wrap {
        margin-top: 0 !important;
        padding-top: 0;
        padding-bottom: 50px;
    }
    .mobile-download .download-item {
        background: #fff;
        display: flex;
        margin-top: 12px;
        border-radius: 12px !important;
        padding: 12px 16px !important;
        align-items: center;
        justify-content: center;
    }
    .download-item__title:after{
        display: none !important;
    }
    .mobile-download .download-item:before {
        margin: 0;
    }
    .app-intro-text h3 {
        font-size: 24px;
        font-weight: 600;
        color: #030810;
        line-height: 32px;
        margin-bottom: 16px
    }

    .app-intro-text h3 .break-h5 {
        display: block
    }

    .app-intro-text p {
        font-size: 14px;
        color: #9b9ea3;
        line-height: 20px;
        margin-bottom: 20px
    }

    .app-intro-text p .break-h5 {
        display: block
    }

    .app-intro-inner {
        flex-direction: column
    }

    .app-intro-part-one {
        height: auto
    }

    .app-intro-part-one .app-intro-thumbnail {
        order: 2;
        text-align: center
    }

    .app-intro-part-one .app-intro-text {
        order: 1;
        padding: 68px 10px 0;
        text-align: center
    }

    .app-intro-part-one .app-intro-thumbnail {
        height: 319px;
        padding-top: 0;
        overflow: hidden;
        flex: auto
    }

    .app-intro-part-one .app-intro-thumbnail img {
        height: 152%;
        width: auto;
        display: inline-block;
        position: relative;
        top: -68px
    }

    .app-intro-part-two {
        height: auto
    }

    .app-intro-part-two .app-intro-inner {
        height: auto;
        align-items: normal
    }

    .app-intro-part-two .app-intro-thumbnail {
        order: 2;
        text-align: center
    }

    .app-intro-part-two .app-intro-text {
        order: 1;
        padding: 80px 10px 34px;
        text-align: center
    }

    .app-intro-part-two .app-intro-text h3 {
        font-size: 24px
    }

    .app-intro-part-two .app-intro-text p {
        color: hsla(0,0%,100%,.64)
    }

    .app-intro-part-two .app-intro-thumbnail {
        height: 288px;
        overflow: hidden;
        flex: auto
    }

    .app-intro-part-two .app-intro-thumbnail img {
        height: 120%;
        width: auto;
        display: inline-block;
        position: relative;
        top: -54px
    }

    .app-intro-part-three {
        height: auto
    }

    .app-intro-part-three .app-intro-inner {
        height: auto;
        align-items: normal
    }

    .app-intro-part-three .app-intro-thumbnail {
        order: 2;
        text-align: center
    }

    .app-intro-part-three .app-intro-text {
        order: 1;
        padding: 74px 10px 39px;
        text-align: center
    }

    .app-intro-part-three .app-intro-text h3 {
        font-size: 24px
    }

    .app-intro-part-three .app-intro-thumbnail {
        height: 288px;
        overflow: hidden;
        flex: auto
    }

    .app-intro-part-three .app-intro-thumbnail img {
        height: 120%;
        width: auto;
        display: inline-block;
        position: relative;
        top: -54px
    }

    .app-intro-part-four {
        height: auto
    }

    .app-intro-part-four .app-intro-inner {
        height: auto;
        align-items: normal
    }

    .app-intro-part-four .app-intro-thumbnail {
        order: 2;
        text-align: center
    }

    .app-intro-part-four .app-intro-text {
        order: 1;
        padding: 76px 10px 14px;
        text-align: center
    }

    .app-intro-part-four .app-intro-text h3 {
        font-size: 24px
    }

    .app-intro-part-four .app-intro-text p {
        color: #fff
    }

    .app-intro-part-four .app-intro-thumbnail {
        height: 288px;
        overflow: hidden;
        flex: auto
    }

    .app-intro-part-four .app-intro-thumbnail img {
        height: 120%;
        width: auto;
        display: inline-block;
        position: relative;
        top: -54px
    }

    .app-intro-part-five {
        height: auto
    }

    .app-intro-part-five .app-intro-inner {
        height: auto;
        align-items: normal
    }

    .app-intro-part-five .app-intro-thumbnail {
        order: 2;
        text-align: center
    }

    .app-intro-part-five .app-intro-text {
        order: 1;
        padding: 75px 10px 20px;
        text-align: center
    }

    .app-intro-part-five .app-intro-text h3 {
        font-size: 24px
    }

    .app-intro-part-five .app-intro-thumbnail {
        height: 306px;
        overflow: hidden;
        flex: auto
    }

    .app-intro-part-five .app-intro-thumbnail img {
        height: 120%;
        width: auto;
        display: inline-block;
        position: relative;
        top: -54px
    }

    .app-intro-part-six {
        height: auto
    }

    .app-intro-part-six .app-intro-inner {
        height: auto;
        align-items: normal
    }

    .app-intro-part-six .app-intro-thumbnail {
        order: 2;
        text-align: center
    }

    .app-intro-part-six .app-intro-text {
        order: 1;
        padding: 75px 10px 26px;
        text-align: center
    }

    .app-intro-part-six .app-intro-text h3 {
        font-size: 24px
    }

    .app-intro-part-six .app-intro-text p {
        color: #9b9ea3
    }

    .app-intro-part-six .app-intro-thumbnail {
        height: 300px;
        overflow: hidden;
        flex: auto
    }

    .app-intro-part-six .app-intro-thumbnail img {
        height: 120%;
        width: auto;
        display: inline-block;
        position: relative;
        top: -54px
    }

    .app-intro-part-seven {
        display: none
    }
}