@font-face {
    font-family: 'DINCond-Bold';
    src: url('./fonts/DINCond-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Ubuntu-Bold';
    src: url('./fonts/Ubuntu-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Ubuntu-Light';
    src: url('./fonts/Ubuntu-Light.woff') format('woff');
}

@font-face {
    font-family: 'Ubuntu-Medium';
    src: url('./fonts/Ubuntu-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Ubuntu-Regular';
    src: url('./fonts/Ubuntu-Regular.woff') format('woff');
}

html,
body,
ul {
    padding: 0;
    margin: 0;
}

footer span,
footer a {
    opacity: 0.7;
    font-family: 'Ubuntu-Light';
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 24px;
    text-decoration: none;
}

.bg {
    width: 100%;
    height: 100%;
    background-image: url('../images/bg.png');
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

ul li {
    list-style: none;
}

ul li.logo {
    height: 80px;
    background-image: url(../images/logo.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

ul li.wxmini {
	margin-top: 20px;
    height: 110px;
    background-image: url(../images/koloclass_qrcode.jpg);
    background-position: center center;
    background-repeat: no-repeat;
}

ul li.desc {
    text-align: center;
    margin-top: 30px;
}

ul li.desc p {
    font-style: italic;
}

ul li.desc p.title {
    opacity: 0.9;
    font-family: 'Ubuntu-Light';
    font-size: 26px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 36px;
    margin: 0;
}

ul li.desc p.mobile {
    display: none;
}

ul li.desc p.pc {
    font-size: 16px;
    font-family: 'Ubuntu-Light';
    color: rgba(255, 255, 255, .8);
}

ul li.btn-group .btn {
    background-color: rgba(255, 255, 255, .98);
    border-radius: 1px;
    padding: 0 30px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-family: 'Ubuntu-Regular';
    font-size: 16px;
    color: #181818;
    letter-spacing: 0;
    opacity: 1;
    transition: opacity .3s ease-in;
}
ul li.btn-group .btn-ios {
    display: inline-block;
    width: 140px;
}

ul li.btn-group .btn-android {
    display: inline-block;
    width: 140px;
}


ul li.btn-group .btn::before {
    background-position: center center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

ul li.btn-group .btn.btn-ios::before {
    background-image: url('../images/ios.svg');
    width: 24px;
    height: 24px;
    margin-top: -8px;
    margin-right: 5px;
}

ul li.btn-group .btn.btn-android::before {
    background-image: url('../images/android.svg');
    width: 24px;
    height: 26px;
    margin-top: -4px;
    margin-right: 5px;
}

.bg-images {
    display: none;
}

.bg-mobile {
    display: none;
}

#ios{
    background: url("../images/qr.png");
    background-size: cover;
}

#android{
    background: url("../images/qr.png");
    background-size: cover;
}