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; max-width:920px;}
.top-wrap{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;}
.menu-wrap.ios-menu{padding-top:0; margin-top: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: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:#F19937; 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:#F19937; cursor:pointer;}
.mLang-btn .mLang-btn-wrap .language.selected{color:#F19937; 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; padding-top:40px; margin-bottom:0; background:-webkit-linear-gradient(#FDBA18, #F07648); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
h3{color:#F19937; text-align:center; font-size:30px; font-weight:100;}
.title-hd{margin:0;}
.banner-img{width:100%; height:auto; display:block; margin:20px auto 0;}

.menu-wrap{background-color:#F9C87067; width:100%; margin-bottom:15px; padding:10px 5px;}
.menu-wrap h3{margin-bottom:7px; text-shadow:none; font-weight:500; background:-webkit-linear-gradient(#FDBA18, #F07648); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.menu-wrap ul{text-align:center;}
.menu-wrap li{display:inline-block; width:100%; height:33px; border-radius:50px; border:1px solid #333333; background-color:transparent; color:#333333;}
.menu-wrap li a{display:block;}
.menu-wrap li.current,.menu-wrap li:hover{border:0; background:linear-gradient(#FDBA18, #F07648); box-shadow:0px 0px 6px #0000007C;}
.menu-wrap li span{color:#333333; line-height:33px;}
.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:20px 0 10px;}

/* 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(#F199371A 0%,#F19937 50%,#F19937 70%,#F1993712 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:#F19937; 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:25px; height:18px; background-position:100%; background-position-x:0;}
i.chevron a{display:block; width:100%; height:100%;}
i.chevron-up{background-position-y:46px;}
i.chevron-down{background-position-y:245px;}
.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(#FDBA18, #F07648); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.container span{font-size:14px; color:#F19937; font-weight:normal; display:inline-block; vertical-align:middle; padding-left:20px; margin-top:10px;}
.timeline .img{display:none; width:100%; margin:8px 0 0;}
html[lang="chs"] .timeline .img.cn{display:block;}
html[lang="eng"] .timeline .img.en{display:block;}
html[lang="vit"] .timeline .img.vn{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:95%; margin:10px auto; padding:10px 5px!important;}
	.menu-wrap ul{padding:0;}
	.menu-wrap li{width:100%; height:auto; font-size:.7em; margin:0 auto;}
	.menu-wrap li span{line-height:25px;}
	.menu-wrap li i{margin-right:3px; width:17px; height:17px; 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;}
}