html,body{font-family:Calibri; margin:0; padding:0; width:100%; height:100%;}
div, ul, ol, li, h1, h2, h3, h4, h5, h6{padding:0; margin:0;}
ul, ol{list-style:none;}
a{text-decoration:none; outline:none;}
*{box-sizing:border-box;}

.content{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:40px; background:url(../images/bg_main.png) center top; background-size:cover;}

.content .mainWrap{display:flex; align-items:center;}
.content .mainWrap > img{position:relative; width:46%; z-index:100;}
.content .mainWrap .rightBox{position:relative; flex-grow:1; background:#f5fbff; box-shadow:0 6px 2px #a9c7e3; border-radius:20px; padding:40px 60px; margin-left:-30px; border:1px solid #ddd;}
.content .mainWrap .rightBox .title{display:flex; align-items:center;}
.content .mainWrap .rightBox .title .logoWrap{display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; background:#fff; border-radius:10px; margin-right:12px; box-shadow:0 3px 6px #00000029;}
.content .mainWrap .rightBox .title .logoWrap img{width:85%;}
.content .mainWrap .rightBox .title h3{font-size:20px; color:#252526;}
.content .mainWrap .rightBox .downloadWrap{background:linear-gradient(180deg, #f4f9fd, #eef7ff); padding:30px 45px 15px; margin-top:20px; text-align:center; box-shadow:0 3px 6px #A8C4E180; border-radius:10px; border:1px solid #ddd;}
.content .mainWrap .rightBox .downloadWrap .version{display:flex; justify-content:center;}
.content .mainWrap .rightBox .downloadWrap .version a{margin:0 10px;}
.content .mainWrap .rightBox .downloadWrap .version a img{width:100%; max-width:150px;}
.content .mainWrap .rightBox .downloadWrap > p{color:#ACB5BD; font-weight:bold; text-align:center;}
.content .mainWrap .rightBox .downloadWrap > a{display:inline-block; background:#456173; color:#f5f5f7; margin:0 auto; padding:7px 30px; box-shadow:0 3px 6px #00000029; border-radius:30px; font-size:14px; cursor:pointer;}

.mLang-btn{position:absolute; top:10px; right:10px; width:52px; height:25px; margin-bottom:50px; background-color:#e2e3e7; z-index:10000;}
.mLang-btn:after{content:''; position:absolute; top:6px; right:6px; border-style:solid; border-width:1px 1px 0 0; color:#161c94; vertical-align:top; width:6px; height:6px; transform:rotate(135deg); z-index:1;}
.mLang-btn .mLang-btn-wrap{overflow:hidden; width:52px; height:25px; position:absolute; top:0; right:0;}
.mLang-btn.current .mLang-btn-wrap{height:127px;}
.mLang-btn .mLang-btn-wrap .language{text-decoration:none; width:52px; height:25px; background-color:#e2e3e7; border:1px solid #ccc; padding-left:13px; display:flex; color:#161c94; cursor:pointer;}
.mLang-btn .mLang-btn-wrap .language.selected{color:#161c94; padding:0px 5px;}
.mLang-btn .mLang-btn-wrap li:hover{background-color:#c9c4c1;}
.mLang-btn .mLang-btn-wrap li:nth-child(2){margin-top:2px;}


@media screen and (max-width: 768px) {
	.content{padding:25px;}
	.content .mainWrap{display:block;}
	.content .mainWrap > img{display:block; width:100%; margin:0 auto 20px;}
	.content .mainWrap .rightBox{margin-left:0; padding:15px 15px 25px;}
	.content .mainWrap .rightBox .title{display:block; text-align:center;}
	.content .mainWrap .rightBox .title .logoWrap{margin:0 auto 10px;}
	.content .mainWrap .rightBox .downloadWrap{background:transparent; padding:0; margin-top:15px; box-shadow:none; border:none;}
	.content .mainWrap .rightBox .downloadWrap .version a{margin:0 8px;}
	.content .mainWrap .rightBox .downloadWrap .version a img{max-width:105px;}
}