@font-face {
    font-family: SF Pro;
    src: url(/assets/SF-Pro-CSl_Urlf.ttf) format("truetype");
    font-weight: 100
}

sup {
    font-family: SF Pro;
    position: relative;
    vertical-align: super;
    top: .05em;
    padding: 0 .1em
}

html,#app {
    height: 100%
}

body {
    margin: 0;
    background: #30303c;
    overflow-x: hidden;
    height: 100%
}

@keyframes loading {
    10% {
        background: #0054fe
    }

    60% {
        background: #b7b8c9
    }
}

.mainContent {
    height: 100%;
    background-size: 100% 100%;
    font-family: BoxedLight,PingFang SC,Microsoft YaHei light,WenQuanYi Micro Hei,sans-serif
}

.mainContent .rtl {
    direction: rtl
}

.mainContent .scaleSprite {
    transform: scale(.45);
    transform-origin: 0 0;
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url(/assets/scale.png)
}

.mainContent .scaleSprite.shield_success_pop_up_00000 {
    width: 436px;
    height: 494px;
    background-position: -0px -0px
}

.mainContent .scaleSprite.shield_success_pop_up_00001 {
    width: 436px;
    height: 494px;
    background-position: -436px -0px
}

.mainContent .scaleSprite.shield_success_pop_up_00002 {
    width: 436px;
    height: 494px;
    background-position: -872px -0px
}

.mainContent .scaleSprite.shield_success_pop_up_00003 {
    width: 436px;
    height: 494px;
    background-position: -1308px -0px
}

.mainContent .scaleSprite.shield_success_pop_up_00004 {
    width: 436px;
    height: 494px;
    background-position: -0px -494px
}

.mainContent .scaleSprite.shield_success_pop_up_00005 {
    width: 436px;
    height: 494px;
    background-position: -436px -494px
}

.mainContent .scaleSprite.shield_success_pop_up_00006 {
    width: 436px;
    height: 494px;
    background-position: -872px -494px
}

.mainContent .scaleSprite.shield_success_pop_up_00007 {
    width: 436px;
    height: 494px;
    background-position: -1308px -494px
}

.mainContent .scaleSprite.shield_success_pop_up_00008 {
    width: 436px;
    height: 494px;
    background-position: -0px -988px
}

.mainContent .scaleSprite.shield_success_pop_up_00009 {
    width: 436px;
    height: 494px;
    background-position: -436px -988px
}

.mainContent .scaleSprite.shield_success_pop_up_00010 {
    width: 436px;
    height: 494px;
    background-position: -872px -988px
}

.mainContent .scaleSprite.shield_success_pop_up_00011 {
    width: 436px;
    height: 494px;
    background-position: -1308px -988px
}

.mainContent .scaleSprite.shield_success_pop_up_00012 {
    width: 436px;
    height: 494px;
    background-position: -0px -1482px
}

.mainContent .scaleSprite.shield_success_pop_up_00013 {
    width: 436px;
    height: 494px;
    background-position: -436px -1482px
}

.mainContent .scaleSprite.shield_success_pop_up_00014 {
    width: 436px;
    height: 494px;
    background-position: -872px -1482px
}

.mainContent .scaleSprite.shield_success_pop_up_00015 {
    width: 436px;
    height: 494px;
    background-position: -1308px -1482px
}

.mainContent .scaleSprite.shield_success_pop_up_00016 {
    width: 436px;
    height: 494px;
    background-position: -0px -1976px
}

.mainContent .scaleSprite.shield_success_pop_up_00017 {
    width: 436px;
    height: 494px;
    background-position: -436px -1976px
}

.mainContent .scaleSprite.shield_success_pop_up_00018 {
    width: 436px;
    height: 494px;
    background-position: -872px -1976px
}

.mainContent .scaleSprite.shield_success_pop_up_00019 {
    width: 436px;
    height: 494px;
    background-position: -1308px -1976px
}

.mainContent .glowSprite {
    transform: scale(.45);
    transform-origin: 19px 17px;
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url(/assets/glowing.png)
}

.mainContent .glowSprite.shield_success_shiny_effect_00000 {
    width: 390px;
    height: 448px;
    background-position: -0px -0px
}

.mainContent .glowSprite.shield_success_shiny_effect_00001 {
    width: 390px;
    height: 448px;
    background-position: -390px -0px
}

.mainContent .glowSprite.shield_success_shiny_effect_00002 {
    width: 390px;
    height: 448px;
    background-position: -780px -0px
}

.mainContent .glowSprite.shield_success_shiny_effect_00003 {
    width: 390px;
    height: 448px;
    background-position: -1170px -0px
}

.mainContent .glowSprite.shield_success_shiny_effect_00004 {
    width: 390px;
    height: 448px;
    background-position: -1560px -0px
}

.mainContent .glowSprite.shield_success_shiny_effect_00005 {
    width: 390px;
    height: 448px;
    background-position: -0px -448px
}

.mainContent .glowSprite.shield_success_shiny_effect_00006 {
    width: 390px;
    height: 448px;
    background-position: -390px -448px
}

.mainContent .glowSprite.shield_success_shiny_effect_00007 {
    width: 390px;
    height: 448px;
    background-position: -780px -448px
}

.mainContent .glowSprite.shield_success_shiny_effect_00008 {
    width: 390px;
    height: 448px;
    background-position: -1170px -448px
}

.mainContent .glowSprite.shield_success_shiny_effect_00009 {
    width: 390px;
    height: 448px;
    background-position: -1560px -448px
}

.mainContent .glowSprite.shield_success_shiny_effect_00010 {
    width: 390px;
    height: 448px;
    background-position: -0px -896px
}

.mainContent .glowSprite.shield_success_shiny_effect_00011 {
    width: 390px;
    height: 448px;
    background-position: -390px -896px
}

.mainContent .glowSprite.shield_success_shiny_effect_00012 {
    width: 390px;
    height: 448px;
    background-position: -780px -896px
}

.mainContent .glowSprite.shield_success_shiny_effect_00013 {
    width: 390px;
    height: 448px;
    background-position: -1170px -896px
}

.mainContent .glowSprite.shield_success_shiny_effect_00014 {
    width: 390px;
    height: 448px;
    background-position: -1560px -896px
}

.mainContent .glowSprite.shield_success_shiny_effect_00015 {
    width: 390px;
    height: 448px;
    background-position: -0px -1344px
}

.mainContent .glowSprite.shield_success_shiny_effect_00016 {
    width: 390px;
    height: 448px;
    background-position: -390px -1344px
}

.mainContent .glowSprite.shield_success_shiny_effect_00017 {
    width: 390px;
    height: 448px;
    background-position: -780px -1344px
}

.mainContent .glowSprite.shield_success_shiny_effect_00018 {
    width: 390px;
    height: 448px;
    background-position: -1170px -1344px
}

.mainContent .glowSprite.shield_success_shiny_effect_00019 {
    width: 390px;
    height: 448px;
    background-position: -1560px -1344px
}

.mainContent .glowSprite.shield_success_shiny_effect_00020 {
    width: 390px;
    height: 448px;
    background-position: -0px -1792px
}

.mainContent .glowSprite.shield_success_shiny_effect_00021 {
    width: 390px;
    height: 448px;
    background-position: -390px -1792px
}

.mainContent .glowSprite.shield_success_shiny_effect_00022 {
    width: 390px;
    height: 448px;
    background-position: -780px -1792px
}

.mainContent .glowSprite.shield_success_shiny_effect_00023 {
    width: 390px;
    height: 448px;
    background-position: -1170px -1792px
}

.mainContent>div {
    height: 100%;
    display: flex;
    justify-content: center
}

.mainContent>div>.backg {
    position: absolute;
    width: 100%;
    max-width: 1920px;
    max-height: 800px;
    height: calc(100% - 30px);
    z-index: -1;
    overflow: hidden;
    top: 30px
}

.mainContent>div>.backg.successBg {
    background: url(/assets/success.png);
    background-size: cover;
    background-position: center 20%
}

.mainContent>div>.backg.failedBg {
    background: url(/assets/failed.png);
    background-size: cover;
    background-position: center 20%
}

.mainContent>div>.backg.wrongBg {
    background: url(/assets/something_wrong.png);
    background-size: cover;
    background-position: center 20%
}

.mainContent>div>.content {
    height: 100%;
    width: 100%
}

.mainContent>div>.content .red {
    color: #fe5959
}

.mainContent>div>.content .green {
    color: #7dff93
}

.mainContent>div>.content .blue {
    color: #59e0fe
}

.mainContent>div>.content .bigText {
    padding: 20px 0 0;
    font-size: 28px;
    letter-spacing: 0;
    text-align: center;
    line-height: 34px
}

.mainContent>div>.content .bigText.green {
    padding: 16px 45px 0
}

.mainContent>div>.content .text {
    max-width: 550px;
    margin: 0 auto;
    padding-top: 6px;
    font-size: 20px;
    color: #bbb;
    letter-spacing: 0;
    text-align: center;
    line-height: 28px
}

.mainContent>div>.content .text>span {
    color: #fff;
    display: block;
    width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-break: anywhere;
    padding-top: 3px
}

.mainContent>div>.content>.header {
    position: relative;
    margin: 0 auto;
    max-width: 580px;
    width: calc(100% - 50px);
    overflow: hidden
}

.mainContent>div>.content>.header>.top {
    margin-top: 40px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mainContent>div>.content>.header>.top>.logo {
    width: 128px;
    float: left;
    display: flex
}

.mainContent>div>.content>.header>.top>.logo>img {
    width: 100%;
    height: auto
}

.mainContent>div>.content>.header>.top>.logoContainer {
    display: flex;
    align-items: center
}

.mainContent>div>.content>.header>.top>.logoContainer>.logoth {
    width: 70px;
    margin-right: 10px
}

.mainContent>div>.content>.header>.top>.logoContainer>.logoth>img {
    width: 100%;
    height: auto
}

.mainContent>div>.content>.header>.top>.logoContainer>.cross {
    position: relative;
    width: 9px;
    height: 9px;
    margin-right: 11px
}

.mainContent>div>.content>.header>.top>.logoContainer>.cross>div {
    position: absolute;
    width: 1px;
    height: 9px;
    background-color: #fff;
    left: 50%
}

.mainContent>div>.content>.header>.top>.logoContainer>.cross>div:nth-child(1) {
    transform: rotate(45deg)
}

.mainContent>div>.content>.header>.top>.logoContainer>.cross>div:nth-child(2) {
    transform: rotate(-45deg)
}

.mainContent>div>.content>.header>.top>.logoContainer>.askmebet {
    width: 97px
}

.mainContent>div>.content>.header>.top>.logoContainer>.askmebet>img {
    width: 100%;
    height: auto
}

.mainContent>div>.content>.header>.top>.line {
    width: 1px;
    height: 41px;
    opacity: .1;
    background: #fff;
    float: left;
    margin: 0
}

.mainContent>div>.content>.header>.top>.license {
    float: left;
    width: 59%;
    display: flex;
    justify-content: space-between
}

.mainContent>div>.content>.header>.top>.license.licenseth {
    width: auto
}

.mainContent>div>.content>.header>.top>.license.licenseth>:nth-child(1) {
    margin-right: 12px
}

.mainContent>div>.content>.header>.top>.license>div {
    float: left
}

.mainContent>div>.content>.header>.top>.license>div img {
    width: 100%;
    height: auto
}

.mainContent>div>.content>.header>.top>.license>div>.gtext {
    opacity: .7;
    font-size: 10px;
    color: #fff;
    line-height: 12px
}

.mainContent>div>.content>.header>.top>.license>div>div:nth-child(2) {
    overflow: hidden;
    padding-top: 8px
}

.mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div {
    display: flex;
    float: left
}

.mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div.gambling {
    width: 60px
}

.mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div.mga {
    width: 82px;
    padding-left: 12px
}

.mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div.ga {
    width: 24px
}

.mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div.bmm {
    width: 98px;
    padding-left: 12px
}

.mainContent>div>.content>.header>.certified {
    color: #fff;
    width: 100%;
    font-size: 14px;
    line-height: 19px;
    padding-top: 14px;
    padding-bottom: 10px;
    clear: both;
    float: left;
    text-align: justify
}

.mainContent>div>.content>.success {
    padding: 0 5%;
    overflow: hidden
}

.mainContent>div>.content>.success>.loadGlowImage {
    width: 0;
    height: 0
}

.mainContent>div>.content>.success>.loadGlowImage>img {
    width: 100%
}

.mainContent>div>.content>.success>.statusImage {
    position: relative;
    max-width: 200px;
    height: auto;
    margin: 0 auto
}

.mainContent>div>.content>.success>.statusImage .shieldImage {
    height: 185px;
    overflow: hidden
}

.mainContent>div>.content>.success>.statusImage .shieldImage span {
    position: absolute
}

.mainContent>div>.content>.success>.official {
    font-size: 36px;
    color: #fad171;
    letter-spacing: 0;
    text-align: center;
    line-height: 46px;
    text-shadow: 0 3px 2px rgba(0,0,0,.5);
    font-weight: 600
}

.mainContent>div>.content>.success>.centerMsg {
    padding-bottom: 25px
}

.mainContent>div>.content>.loadScaleImage {
    width: 0;
    height: 0
}

.mainContent>div>.content>.loadScaleImage>img {
    width: 100%
}

.mainContent>div>.content>.iframeContainer {
    width: 100%;
    max-width: 414px;
    height: 736px;
    overflow: hidden
}

.mainContent>div>.content>.iframeContainer.border {
    margin: 32px auto 0;
    border: 1px solid rgba(255,255,255,.1)
}

.mainContent>div>.content>.iframeContainer>div {
    transform-origin: 0 0
}

.mainContent>div>.content>.iframeContainer>div>.iframeContent {
    width: 415px;
    height: 737px;
    border: 0
}

.mainContent>div>.content>.fail {
    position: relative;
    padding: 70px 0 0
}

.mainContent>div>.content>.fail.fixed {
    padding: 0;
    height: calc(100% - 170px);
    max-height: 395px;
    display: flex;
    flex-direction: column
}

.mainContent>div>.content>.fail>div:nth-child(1) {
    padding: 0 5% 25px
}

.mainContent>div>.content>.fail>div:nth-child(1)>div.steps {
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding-top: 52px;
    padding-bottom: 37px
}

.mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div {
    width: 424px;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div.mid {
    max-width: 95px;
    width: 10%
}

.mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div.mid>div {
    width: 1px;
    height: 100%;
    background: #fff;
    margin: 0 auto;
    opacity: .15
}

.mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div>.content {
    font-size: 20px;
    color: #fad171;
    line-height: 26px;
    padding-bottom: 14px;
    display: flex
}

.mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div>.content>.white {
    color: #bbb;
    text-wrap: nowrap
}

.mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div>.content>.space {
    width: 3%;
    min-width: 12px
}

.mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div img {
    width: 100%;
    height: auto
}

.mainContent>div>.content>.fail>div:nth-child(1)>div>.errorLogo {
    width: 80px;
    margin: 0 auto
}

.mainContent>div>.content>.fail>div:nth-child(1)>div>.errorLogo>img {
    width: 100%
}

.mainContent>div>.content>.fail>div:nth-child(1)>div>.cloudLogo {
    width: 100px;
    margin: 0 auto
}

.mainContent>div>.content>.fail>div:nth-child(1)>div>.cloudLogo>img {
    width: 100%;
    transform: translateY(6px)
}

.mainContent>div>.content>.load {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: -1
}

.mainContent>div>.content>.load>div {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px
}

.mainContent>div>.content>.load>div>div {
    width: 36px;
    height: 35px;
    display: flex;
    flex-wrap: wrap
}

.mainContent>div>.content>.load>div>div>div {
    width: 9px;
    height: 9px;
    margin: 1.5px;
    background: #b7b8c9
}

.mainContent>div>.content>.load>div>div>div:nth-child(1) {
    animation: loading 2.4s infinite
}

.mainContent>div>.content>.load>div>div>div:nth-child(2) {
    animation: loading 2.4s infinite .3s
}

.mainContent>div>.content>.load>div>div>div:nth-child(3) {
    animation: loading 2.4s infinite .6s
}

.mainContent>div>.content>.load>div>div>div:nth-child(6) {
    animation: loading 2.4s infinite .9s
}

.mainContent>div>.content>.load>div>div>div:nth-child(9) {
    animation: loading 2.4s infinite 1.2s
}

.mainContent>div>.content>.load>div>div>div:nth-child(8) {
    animation: loading 2.4s infinite 1.5s
}

.mainContent>div>.content>.load>div>div>div:nth-child(7) {
    animation: loading 2.4s infinite 1.8s
}

.mainContent>div>.content>.load>div>div>div:nth-child(4) {
    animation: loading 2.4s infinite 2.1s
}

.mainContent>div>.content>.load>div>div>div:nth-child(5) {
    background: transparent
}

.mainContent>div>.content .warn {
    margin: 0 auto;
    text-align: left;
    font-size: 14px;
    color: #bbb;
    line-height: 22px;
    max-width: 580px;
    width: calc(100% - 50px)
}

.mainContent>div>.content .warn>div {
    border-radius: 4px;
    padding: 12px 15px;
    background: #ffffff1a;
    border: 1px solid rgba(255,255,255,.5)
}

.mainContent>div>.content .warn>div>.line {
    display: inline-block;
    margin: -2px 6px -2px 7px;
    width: 1px;
    height: 13px;
    background: #747a7a
}

.mainContent>div>.content .warn.green>div {
    background: #7dff931a;
    border: 1px solid rgba(125,255,147,.5)
}

.mainContent>div>.content .warn.blue>div {
    background: #59e0fe1a;
    border: 1px solid rgba(89,224,254,.5)
}

.mainContent>div>.content .warn.red>div {
    background: #fe59591a;
    border: 1px solid rgba(254,89,89,.5)
}

.mainContent>div>.content .warn .white {
    color: #fff
}

.mainContent>div>.content>.version {
    opacity: .5;
    font-size: 10px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    line-height: 14px;
    padding: 15px 0 25px
}

.mainContent>div>.content>.version.bottom {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    padding: 0
}

@media screen and (max-width : 768px) {
    .mainContent>div>.content>.header>div>.top>.logo {
        width:132px;
        padding: 40px 27px 0 0
    }

    .mainContent>div>.content>.header>div>.top>:nth-child(3) {
        padding: 37px 0 0 27px
    }

    .mainContent>div>.content>.header>div>.top>:nth-child(3)>.right {
        padding-left: 27px
    }
}

@media screen and (max-width : 575px) {
    .mainContent .scaleSprite {
        transform:scale(.35)
    }

    .mainContent .glowSprite {
        transform: scale(.35);
        transform-origin: 12px 11px
    }

    .mainContent>div>.backg {
        top: 0;
        max-width: 1056px;
        max-height: calc(800px * .55)
    }

    .mainContent>div>.content {
        min-width: 0
    }

    .mainContent>div>.content .bigText {
        font-size: 16px;
        line-height: 20px;
        padding: 10px 0 0
    }

    .mainContent>div>.content .bigText.green {
        padding: 20px 20px 0
    }

    .mainContent>div>.content .text {
        max-width: 300px;
        font-size: 11px;
        letter-spacing: 0;
        text-align: center;
        line-height: 14px
    }

    .mainContent>div>.content>.header {
        max-width: 280px;
        width: 92%
    }

    .mainContent>div>.content>.header>.top {
        margin-top: 20px
    }

    .mainContent>div>.content>.header>.top.topth {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .mainContent>div>.content>.header>.top>.logo {
        width: 62px;
        display: flex
    }

    .mainContent>div>.content>.header>.top>.logoContainer>.logoth {
        width: 62px
    }

    .mainContent>div>.content>.header>.top>.logoContainer>.askmebet {
        width: 90px
    }

    .mainContent>div>.content>.header>.top>.line {
        height: 31px
    }

    .mainContent>div>.content>.header>.top>.line.lineth {
        display: block;
        width: 100%;
        height: 1px;
        margin: 6px 0 12px
    }

    .mainContent>div>.content>.header>.top>.license.licenseth>div .gtext {
        width: 83px
    }

    .mainContent>div>.content>.header>.top>.license>div img {
        width: 100%
    }

    .mainContent>div>.content>.header>.top>.license>div .gtext {
        width: 48px;
        font-size: 6px;
        line-height: 8px
    }

    .mainContent>div>.content>.header>.top>.license>div>div:nth-child(2) {
        padding-top: 6px
    }

    .mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div.gambling {
        width: 30px
    }

    .mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div.mga {
        width: 51px;
        padding-left: 6px
    }

    .mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div.ga {
        width: 14px
    }

    .mainContent>div>.content>.header>.top>.license>div>div:nth-child(2)>div.bmm {
        width: 42px;
        padding-left: 6px
    }

    .mainContent>div>.content>.header>.certified {
        font-size: 8px;
        line-height: 10px;
        padding-top: 8px;
        padding-bottom: 6px
    }

    .mainContent>div>.content>.success>.statusImage {
        max-width: 157px
    }

    .mainContent>div>.content>.success>.statusImage .shieldImage {
        height: 142px
    }

    .mainContent>div>.content>.success>.official {
        padding: 0 30px;
        font-size: 18px;
        line-height: 20px
    }

    .mainContent>div>.content>.success>.centerMsg {
        padding-bottom: 22px
    }

    .mainContent>div>.content>.iframeContainer {
        width: 80%
    }

    .mainContent>div>.content>.iframeContainer.border {
        margin-top: 28px
    }

    .mainContent>div>.content>.fail {
        padding: 20px 0 0
    }

    .mainContent>div>.content>.fail.fixed {
        max-height: 250px;
        height: calc(100% - 120px)
    }

    .mainContent>div>.content>.fail>div:nth-child(1) {
        padding: 0 5% 25px
    }

    .mainContent>div>.content>.fail>div:nth-child(1)>div.steps {
        flex-direction: column;
        align-items: center;
        padding-top: 24px;
        padding-bottom: 0
    }

    .mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div {
        width: 100%;
        max-width: 235px
    }

    .mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div.mid {
        height: 16px;
        width: initial;
        max-width: initial
    }

    .mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div.mid>div {
        display: none
    }

    .mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div>.content {
        font-size: 11px;
        line-height: 14px;
        padding-bottom: 8px
    }

    .mainContent>div>.content>.fail>div:nth-child(1)>div.steps>div>.content>.space {
        width: 3%;
        min-width: 6px
    }

    .mainContent>div>.content>.fail>div:nth-child(1)>div>.errorLogo {
        width: 54px
    }

    .mainContent>div>.content>.fail>div:nth-child(1)>div>.cloudLogo {
        width: 64px
    }

    .mainContent>div>.content .warn {
        font-size: 8px;
        line-height: 11px;
        max-width: 280px;
        width: 92%
    }

    .mainContent>div>.content .warn>div {
        padding: 9px 12px 10px
    }

    .mainContent>div>.content .warn>div>.line {
        margin: -2px 6px -2px 7px;
        height: 9px
    }

    .mainContent>div>.content>.version {
        font-size: 9px;
        padding: 10px 0 20px
    }

    .mainContent>div>.content>.version.bottom {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        padding: 0
    }
}

@media screen and (max-width : 319px) {
    .mainContent>div>.content>.header {
        width:82%
    }

    .mainContent>div>.content>.header>.top {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .mainContent>div>.content>.header>.top>.line {
        display: block;
        width: 100%;
        height: 1px;
        margin: 6px 0 12px
    }

    .mainContent>div>.content>.header>.top>.license {
        width: 100%
    }

    .mainContent>div>.content>.header>.top>.license>div>.gtext {
        width: auto
    }

    .mainContent>div>.content>.header>.top>.license>div>div:nth-child(2) {
        padding-top: 5px
    }

    .mainContent>div>.content>.header>.certified {
        padding-top: 12px
    }

    .mainContent>div>.content>.success>.text {
        padding: 12px 20px 0
    }

    .mainContent>div>.content>.fail.fixed {
        height: calc(100% - 160px)
    }

    .mainContent>div>.content .warn {
        width: 82%
    }

    .mainContent>div>.content .warn>div {
        padding: 6px 7px 7px
    }
}