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;}
.top-wrap{padding-top:20px; background:url(../images/v2_bg.jpg); background-size:cover; background-repeat:no-repeat; *background:linear-gradient(#e0dfef, #c0c1df);}
.bg-gradient{background-image:linear-gradient(to bottom, rgba(0,0,0,0), #242e0c);}
.bottom-wrap{background-image:url(../images/v2_bg.jpg); background-size:cover; background-position:center; background-attachment:fixed; background-position:center top;}
.menu-wrap li i,.top-wrap i,.bottom-wrap i{background-image:url(../images/v2_icon.png); background-size:200%; background-position-x:0;}
.menu-wrap li.current i,.menu-wrap li:hover i{background-position-x:20px;}
.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:50px; 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.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;}

.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{background-color:#c3c7ec; width:80%; margin:30px auto; padding-top:25px; padding-bottom:4px;}
.menu-wrap h3{text-shadow:none; font-weight:bold; background:-webkit-linear-gradient(#4777e6, #061eb2); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.menu-wrap ul{text-align:center; padding:25px;}
.menu-wrap li{display:inline-block; width:200px; height:40px; margin:0 20px; border-radius:50px; border:1px solid #66676c; background-color:transparent; color:#66676c;}
.menu-wrap li.current,.menu-wrap li:hover{border:1px solid transparent; background:linear-gradient(#4777e6, #061eb2);}
.menu-wrap li span{color:#646462; line-height:40px;}
.menu-wrap li.current span,.menu-wrap li:hover span{color:#fff;}
.menu-wrap li i{display:inline-block; width:20px; height:20px; background-position-y:0; margin-right:10px; position:relative; top:4px;}

.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:6px; 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 (min-width: 320px) and (max-width: 600px) {
	.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:65%;}
	.banner-img{width:98%;}
	h1{font-size:1.6em;}
	h3{font-size:1.2em;}
	.menu-wrap{width:90%; margin:10px auto; padding-top:3%;}
	.menu-wrap ul{padding:2%;}
	.menu-wrap li{width:30%; height:auto; font-size:.7em; margin:0 3px;}
	.menu-wrap li span{line-height:25px;}
	.menu-wrap li i{top:2px; margin-right:5%; width:20%; height:18px; background-position-x:0;}
	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;}
}