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;}
.img{background-repeat:no-repeat; background-size:contain; margin:0 auto;}
.layout{width:100%; margin:0 auto;}
.content{background-image:url(../images/v2_bg.png); background-size:cover; background-position:center; background-attachment:fixed; background-position:center top; padding-top:20px;}
.bg-gradient{background-image:linear-gradient(to bottom, rgba(0,0,0,0), #242e0c);}
.top-wrap i,.bottom-wrap i{background-image:url(../images/v2_icon.png); background-size:200%; background-position-x:0;}
.top-wrap i,.bottom-wrap i{display:block; margin:0 auto;}

.mLang-btn{position:relative; width:52px; height:25px; margin-top:10px; margin-right:10px; margin-bottom:20px; background-color:#e2e3e7; float:right;}
.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 .mLang-btn-wrap ul{display:flex; flex-direction:column;}
.mLang-btn.current .mLang-btn-wrap{height:auto;}
.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; order:-1;}
.mLang-btn .mLang-btn-wrap li:hover{background-color:#c9c4c1;}
.mLang-btn .mLang-btn-wrap li:nth-child(2){margin-top:2px;}

.title{width:30%; height:auto; display:block; margin:0 auto; clear:both;}
h1{text-align:center; font-size:40px; margin-top:10px; margin-bottom:0; background:-webkit-linear-gradient(#4777e6, #061eb2); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
h3{color:#061eb2; text-align:center; font-size:30px; font-weight:100;}
.title-hd{margin:0;}
.banner-img{width:80%; height:auto; display:block; margin:20px auto 0;}

.menu-wrap{display:flex; justify-content:space-between; width:100%; max-width:700px; margin:0 auto; padding:0 10px;}
.menu-wrap ul{width:48%;}
.menu-wrap ul > li{background:url(../images/apple_column.png) no-repeat center; background-size:contain; width:100%; aspect-ratio:450/136; padding-left:8%; margin-bottom:15px;}
.menu-wrap ul > li a{display:flex; align-items:center; width:100%; height:100%; padding-right:35%; font-size:3.5vw; color:#1B4C80;}
.menu-wrap ul > li a i{width:20%; height:50%; background:url(../images/icon_apple.svg) no-repeat center; background-size:contain; margin:0 5% 0 0;}
.menu-wrap ul.android-menu > li{background-image:url(../images/android_column.png);}
.menu-wrap ul.android-menu > li a{color:#72A7AD;}
.menu-wrap ul.android-menu > li a i{background-image:url(../images/icon_android.svg);}

.alert-txt{color:#000; text-align:center; padding:5vw 0;}
.text{color:#656460; text-align:center; padding:3vw 0 8vw;}

/* The actual timeline (the vertical ruler) */
.timeline{position:relative; max-width:1000px; margin:20px auto 0;}
/* The actual timeline (the vertical ruler) */
.timeline::after{content:''; position: absolute; width:3px; background:linear-gradient(rgba(237,207,155,0) 0%,rgba(17, 41, 189) 10%,rgba(17, 41, 189) 90%,rgba(237,207,155,0) 100%); top:0; bottom:0; left:30%; margin-left:-3px;}
/* Container around content */
.container{padding:10px 40px 30px; position:relative; background-color:inherit; width:50%;}
/* The circles on the timeline */
.container::after{content:''; position:absolute; width:20px; height:20px; right:-17px; background-color:#1129bd; top:15px; border-radius:50%; z-index:1;}
/* First container around content */
.container:first-child{padding-top:30px;}
/* The first circles on the timeline */
.container:first-child::after{margin-top:30px;}
/* Place the container to the right */
.right{left:30%;}
/* Fix the circle for containers on the right side */
.right::after{left:-10px;}

i.chevron{width:50px; height:38px; background-position:100%; background-position-x:0;}
i.chevron a{display:block; width:100%; height:100%;}
i.chevron-up{background-position-y:95px;}
i.chevron-down{background-position-y:130px;}
.container-wrap{padding-top:50px;}
i.apple{background-position:94px 109px; width:95px; height:105px;}
.container span.label{font-size:50px; height:50px; font-weight:bolder; margin:0; padding:0; background:-webkit-linear-gradient(#4777e6, #061eb2); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.container span{font-size:14px; color:#1129bd; font-weight:normal; display:inline-block; vertical-align:middle; padding-left:20px; margin-top:10px;}
.timeline .img{width:100%; margin:0;}
.timeline .img{width:100%; margin:0; display:block;}
.timeline .img.en{width:100%; margin:0; display:none;}
html:not([lang="chs"]) .timeline .img.cn{display:none;}
html:not([lang="chs"]) .timeline .img.en{display:block;}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 768px) {
	.layout{width:100%;}
	.content-wrap{background-attachment:fixed;}
	.lang{margin-bottom:30px;}
	.lang .current{width:60px; line-height:1.5em;}
	.lang:after{width:.5em; height:.5em; border-width:.2em .2em 0 0;}
	.lang a{font-size:1em;}
	.title{width:45%;}
	.banner-img{width:98%;}
	h1{font-size:1.6em;}
	h3{font-size:1.2em;}
	i.apple{background-position:102% 100%; width:13%; height:15vw;}
	.timeline::after{left:8%;}
	.container::after{width:5vw; height:5vw; left:-8.0%;}
	.right{left:12%;}
	.container{width:85%; padding:5% 5% 8%;}
	.container span.label{font-size:2.5em; height:1em;}
	.container span{font-size:.65em; padding-left:10px;}
}