html,body {height:100%;}
body {-webkit-font-smoothing: antialiased;position:relative;background-color:#0a1226;overflow:hidden}
a {/*font-weight:bold;*/color:#000}
a:hover {text-decoration:none;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;}
.btn:focus, .btn.focus {border:0;box-shadow:none;}
::-moz-focus-inner {border:0;padding:0;}
img {width:100%;}
p{margin:0;text-align:center;}
footer {background-color:#2c1b58;/*display:flex;flex-flow:column nowrap;*/margin-bottom:0;margin-top:auto;}
input {border:0;}
input:focus,select:focus,textarea:focus, input:focus,button:focus{outline:none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}
select {border:0;background-color:#e8daf3;}
.btn {min-width:50px;}

header {padding:15px;display:flex;justify-content:center;align-items:center;flex-flow:column;color:#3bff9e;font-size:24px;background-color:#0a1226d4;position: absolute;width:100%;z-index:1;}
.header-link {font-size:18px;color:#3bff9e;margin-top:5px;}
.logo {width:230px;margin:10px 0;}
main {width: 100%;height:100%;background:url("../img/bg-main.jpg") no-repeat;background-size:cover;background-position: center;}
article {width:100%;height:100%;display:flex;justify-content: center;align-items:center;}
.ysb-main {position: fixed;z-index: 99999999999999;top: 0;width: 100%;height: 100%;}
.link-wrapper {height:100%;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;padding:40px;}
.btn-link-ysb {background-color:#fff;border-radius:70px;width:500px;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;margin:30px 0;padding:20px;text-decoration:none;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out;}
.btn-link-ysb:hover {transform:scale(1.1)}
.link-ysb-img {width:40%;}
.clickin-wrapper {display:flex;justify-content:center;align-items:center;margin-top:20px;}
.link-text {font-size:25px;color:#163b7a;font-weight:bold;margin:0 10px;}
.arrow {width:30px;}
.arrow-1 {animation: blink 1s linear infinite;}
.arrow-2 {animation: blink 1.5s linear infinite;}
.arrow-left {margin-left:-7px;}
.arrow-right {margin-right:-7px;}
.app-text {text-decoration:underline;}
.btn-app-wrapper {display:flex;margin-top:10px;}
.btn-app-main {display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 20px;}
.btn-app-main span {font-size:14px;}
.btn-app {background-color:#3bff9e;border-radius:100%;width:80px;height:80px;display:flex;justify-content:center;align-items:center;}
.btn-app img {width:80%;-webkit-transition: all .4s ease-out;-moz-transition: all .4s ease-out;-o-transition: all .4s ease-out;transition: all .4s ease-out;}
.btn-app:hover {background-color:#000;}
.btn-app:hover img {filter:brightness(20)}
footer {position:absolute;bottom:0;padding:10px;background-color:rgba(10,18,38,.8);color:#dff3f3;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:1;}
footer p {font-size:14px;}
.brands-wrapper {display:flex;justify-content:center;align-items:center;padding:10px 0;margin:10px 0;border-top:solid rgba(223,243,243,.5) thin;border-bottom:solid rgba(223,243,243,.5) thin;}
.brands-wrapper span {margin:0 10px;}
.brands-side {display:flex;justify-content:center;align-items:center;padding:10px 0;}
.version-wrapper {display:flex;justify-content:center;align-items:center;}
.version-wrapper p {margin:0 10px;font-size:12px;}

.thirdparty-main {width:57%;height:600px;background-color:#000;}
.thirdparty-main iframe {width: 100%;height: 100%;border: 0;}

.back {display: none;}


@media screen and (max-width:1280px) {
    /*.thirdparty-main {display:none;}*/
    .ysb-main {position:absolute;overflow-y:scroll;}
    .ysb-main article {flex-direction: column;height:auto;}
    .ysb-main header {position:relative;}
    .ysb-main footer {position:relative;}
    .link-wrapper {height:auto;width:100%;}
    .btn-link-ysb {width:50%;margin:10px;}
    .thirdparty-main {height:550px;width:90%;margin:10px 0;}
}
@media screen and (max-width:980px) {
    .brands-wrapper {flex-flow:wrap;}
    .brands-side {width:100%;}
    .thirdparty-main {height:450px;}
}
@media screen and (max-width:600px) {
    .btn-link-ysb {width:300px;padding:10px;}
    .btn-app {width:70px;height:70px;}
    .btn-app-main {margin:0 10px;}
    .main-title {font-size:14px;}
    .logo {width:230px;}
    .header-link {font-size:12px;}
    .brands-side {padding:2px 0;}
    .version-wrapper p {font-size:10px;}
    .link-text {font-size:15px;}
    .link-ysb-img {width: 60%;}
    .arrow {width:20px;}
    .arrow-left {margin-left:-4px;}
    .arrow-right {margin-right:-4px;}
    .btn-app-main span {font-size:12px;}
    footer p {font-size: 12px;}
    .brands-wrapper {margin:5px 0;}
    .link-wrapper {padding:0;}

    .thirdparty-main {height:200px;}
}
@media screen and (max-width:375px), screen and (max-height:580px) {
    header {padding:8px;}
    .link-ysb-img {width: 40%;}
    .logo {width:150px;}
    .btn-app {width:40px;height:40px;}
    .btn-link-ysb {margin:10px 0;}
}
@media only screen and (max-width :1024px) and (max-height:600px) {
    .link-wrapper {flex-flow:row;}
    .btn-link-ysb {width:400px;margin:0 15px;}
    .btn-app {width:50px;height:50px;}
    .link-text {font-size:20px;}

}
@media only screen and (max-height :800px) {
    .thirdparty-main {height: 400px;}
}

@keyframes blink{
    50%{opacity: .3;}
    100%{opacity: 1;}
}