@charset "UTF-8";
/* CSS Document */

html, body{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
	-webkit-text-size-adjust: 100%; 
	-webkit-font-smoothing:antialiased;
	-webkit-tap-highlight-color: transparent;
	-moz-osx-font-smoothing:grayscale;
	box-sizing: border-box;
	overflow-x: hidden;
}

/********************************************************* rwd-desktop(13～) **********************************************************/
@media(min-width: 1600px){ 
/******************* main ********************/
#main{
	display:flex;
	flex-direction: row;
	align-items: center;
	height:100%;
	overflow:hidden;
}

#main-logo, #main-content{
	width:50%;
	height:100%;
}

/************ main-logo ***************/
#select-path{
	margin:30vh 0 30vh 10vw;
	display: flex;
	flex-direction: row;
 	justify-content:center;
	cursor:pointer;
}

#select-path-mobile{
	display:none;
}

.select-content{
	transform: translate(-3.5vw, 16.5vh);
}

#select-download{
	transform: translate(3.5vw, 5.5vh);
}

.button{
	font-family: 'Helvetica Neue', 'Noto Sans';
	font-weight: lighter;
	letter-spacing: 25px;
	text-align:end;
	width:8vw;
	height:6vh;
	font-size:2.5vw;
	margin:25vh 2.5vw 0 -4vw;
	display:none;
}

.lang-en .button{
	font-family:'Calibri', 'Lato';
	font-size:2.5vw;
	font-weight: lighter;
	letter-spacing: 3px;
	width:11vw;
}

/************ main-content ***************/
#content-up, #content-bottom{
	height:50%;
	min-height:0;
	text-align: end;
	display: flex;
	flex-direction: column;
	align-items: end;
}

/********** content-up ************/
#lang-switch{
	width:1vw;
	text-align: center;
	color:#707070;
	transform: translate(-9.5vw,6vh);
	font-family: 'Helvetica Neue';
}

#lang-switch span:lang(en){
	font-family:'Calibri', 'Lato';
}

.lang-switch{
	display:none;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
}

.lang-switch.tcn{
	display: flex;
}

.switch-up{
	height:3vh;
	padding-left: 5.5px;
	margin-bottom: 0.3vh;
}

.switch-bottom{
	display: flex;
	flex-direction: column;
	align-items: center;
	border-left:solid 0.5px;
	height:5vh;
	line-height: 2.5vh;
	padding-left: 5px;
	visibility:hidden;
}

.switch-bottom.show{
	visibility: visible;
}

/********** content ************/
#content{
	overflow-y: auto;
	overflow-x: hidden;
	font-size:1vw;
	width:50%;
	height:35dvh;
	margin:0 auto;
	font-family: 'Helvetica Neue', 'Noto Sans';
	z-index:10;
	text-align: start;
	transform: translate(-5vw, 18.5dvh);
}

.main-content{
	width:100%;
	height:100%;
	display:flex;
	flex-direction: row;
	align-items:center;
	display:none;
}

.content{
	width:100%;
	height:100%;
}

.content.contact{
	width:80%;
	height:100%;
	display: flex;
	flex-direction: column;
}

.contact-contentwrapper{
	display: flex;
	flex-direction: column;
	width:100%;
	height:30%;
	margin:auto;
}
/********** contact-content ************/
.up{
	font-size:1.2vw;
	width:100%;
}
#email{
	margin:auto 0;
}

#phone{
	margin:auto 0;
}

a{
	font-family:'Calibri', 'Lato';
	color:black;
}

#contact-term{
	visibility: hidden;
}

/********** contact-term ************/
.down{
	color:grey;
	font-family:'Avenir Next', 'Montserrat';
	font-size:0.6vw;
	width:50%;
	display: flex;
	flex-direction: column;
	align-items: end;
	transform: translate(-2.5vw, 2dvh);
}

#contact-term{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:10px;
	margin:1.5dvh 0;
	cursor: pointer;
}

#company-name{
	margin:auto 0;
}

#contact-footer{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:5px;
	margin:0.2vh 0;
}

/********** contact-icon ************/
.static{
	height:100%;
	width:20%;
	display: flex;
	flex-direction: column;
}

.contact-iconwrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	height:30%;
	margin:auto;
}

.message{
	cursor: pointer;
}

.icon{
	width:2vw;
}

.whatsapp {
	display:none;
}

.wecom{
	display:none;
}

/********** platform ************/
#intro{
	border:solid;
	border-radius:20px;
	box-shadow:20px 10px 20px grey;
	width:100%;
	height:85%;
	overflow:hidden;
}

#intro video{
	width:100%;
	height:100%;
}

/********** content-bottom ************/
#lang-switch-mobile{
	display:none;
}

#open-animation{
	font-family:'Calibri', 'Lato';
	font-size:3.5vw;
	font-weight: bold;
	letter-spacing: 10px;
	text-shadow: 20px 20px 6px #d1d1d1;
	transform: translate(-17vw, 10vh);
}

#companylogo{
	font-family:'Avenir Next', 'Montserrat';
	display: flex;
	flex-direction: row;
	align-items:center;
	width:13vw;
	transform: translate(-9vw, 15vh);
}

#copyright{
	font-size:1vw;
}

#sd-logo{
	font-size:2.5vw;
	margin:-0.6vw 0 0 0.2vw;
}

#mobile-button{
	display:none;
}
}

/********************************************************* rwd-desktop(11-13) **********************************************************/
@media (min-width: 960px) and (max-width: 1600px) {
/******************* main ********************/
#main{
	display:flex;
	flex-direction: row;
	align-items: center;
	height:100vh;
}

#main-logo, #main-content{
	width:50%;
	height:100%;
}

/************ main-logo ***************/
#select-path{
	margin:25vh 0 25vh 12vw;	
	display: flex;
 	justify-content:center;
	cursor: pointer;
	height:50%;
}

#select-path-mobile{
	display:none;
}

.select-content{
	width:3.7vw;
	transform: translate(-5.5vw, 21.5dvh);
}

#select-query{
	height:45dvh;
}

#select-download{
	width:10vw;
	transform: translate(4.5vw, 2.5vh);
}

.button{
	font-family: 'Helvetica Neue', 'Noto Sans';
	font-weight: lighter;
	letter-spacing: 18px;
	text-align:end;
	width:13vw;
	height:6vh;
	font-size:2.5vw;
	margin:36.5vh 1.5vw 0 -5vw;
	display:none;
}

.lang-en .button{
	font-family:'Calibri', 'Lato';
	font-size:2.5vw;
	letter-spacing: 3px;
	margin:36.5vh 1.8vw 0 -5vw;
	width:15vw;
}

/************ main-content ***************/
#content-up, #content-bottom{
	height:50%;
	text-align: end;
	display: flex;
	flex-direction: column;
	align-items: end;
}

/********** content-up ************/
#lang-switch{
	width:3vw;
	text-align: center;
	color:#707070;
	transform: translate(-9.5vw,10vh);
	font-family: 'Helvetica Neue', 'Noto Sans';
}

#lang-switch span:lang(en){
	font-family:'Calibri', 'Lato';
}

.lang-switch{
	display:none;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
}

.lang-switch.tcn{
	display: flex;
}

.switch-up{
	height:3vh;
	padding-left: 5.5px;
	margin-bottom: 1vh;
}

.switch-bottom{
	display: flex;
	flex-direction: column;
	align-items: center;
	border-left:solid 0.5px;
	height:8vh;
	line-height: 3.5vh;
	padding-left: 5px;
	visibility: hidden;
}

.switch-bottom.show{
	visibility: visible;
}

/********** content ************/
#content{
	overflow-y: auto;
	font-size:1.2vw;
	width:60%;
	height:70dvh;
	margin:0 auto;
	font-family: 'Helvetica Neue', 'Noto Sans';
	z-index:10;
	text-align: start;
	transform: translate(-5vw, 17dvh);
}

.main-content{
	width:100%;
	height:100%;
	display:flex;
	flex-direction: row;
	align-items:center;
	display:none;
}

.content{
	width:100%;
	height:100%;
}

.content.contact{
	width:80%;
	height:100%;
	display: flex;
	flex-direction: column;
}

.contact-contentwrapper{
	display: flex;
	flex-direction: column;
	width:100%;
	height:30%;
	margin:auto;
}
/********** contact-content ************/
.up{
	font-size:1.5vw;
	width:100%;
}
#email{
	margin:auto 0;
}

#phone{
	margin:auto 0;
}

a{
	font-family:'Calibri', 'Lato';
	color:black;
}

#contact-term{
	visibility: hidden;
}

/********** contact-term ************/
.down{
	color:grey;
	font-family:'Avenir Next', 'Montserrat';
	font-size:0.8vw;
	width:60%;
	display: flex;
	flex-direction: column;
	align-items: end;
	transform: translate(-4vw, 2dvh);
}

#contact-term{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:10px;
	margin:1.5dvh 0;
	cursor: pointer;
}

#company-name{
	margin:auto 0;
}

#contact-footer{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:5px;
	margin:0.2vh 0;
}

/********** contact-icon ************/
.static{
	height:100%;
	width:20%;
	display: flex;
	flex-direction: column;
}

.contact-iconwrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	height:30%;
	margin:auto;
}

.icon{
	width:3vw;
}

.message{
	cursor: pointer;
}

 .email,
 .phone{
	display: flex;
 }

.line,
.whatsapp,
.wecom{
	display: none;
}

/********** platform ************/
#intro{
	border:solid;
	border-radius:20px;
	box-shadow:15px 10px 20px grey;
	width:100%;
	height:80%;
	overflow:hidden;
}

#intro video{
	width:100%;
	height:100%;
}

/********** content-bottom ************/
#lang-switch-mobile{
	display:none;
}

#open-animation{
	font-family:'Calibri', 'Lato';
	font-size:3.5vw;
	font-weight: bold;
	letter-spacing: 5px;
	text-shadow: 20px 20px 6px #d1d1d1;
	transform: translate(-15vw, 10vh);
}

#companylogo{
	font-family:'Avenir Next', 'Montserrat';
	display: flex;
	flex-direction: row;
	align-items:center;
	width:13vw;
	transform: translate(-7.2vw, 15vh);
}

#copyright{
	font-size:1vw;
}

#sd-logo{
	font-size:2.5vw;
	margin:-0.6vw 0 0 0.2vw;
}

#mobile-button{
	display: none;
}
}

/************************************************************* rwd-pad ****************************************************************/
@media(min-width:540px) and (max-width: 960px) and (orientation: portrait){
/******************* main ********************/
#main{
	height:100%;
	width:100%;
	display:flex;
	flex-direction: column;
	align-items: center;
}

#main-logo{
	width:100%;
	height:25%;
}

#main-content{
	width:100%;
	height:75%;
	display: flex;
	flex-direction: column;
}

/************ main-logo ***************/
#select-path{
	display:none;
}

#select-path-mobile{
	width:100%;
	height:100%;
	display:flex;
	flex-direction: row;
	align-items: center;
	position:relative;
}

#mobile-path-left{
	width:30%;
	height:100%;
	position:absolute;
	left: 0;
	display: flex;
	flex-direction: row;
}

#iconwrapper-left{
	display:flex;
	flex-direction: row;
	align-items: center;
	width:35%;
}

#iconwrapper-left.rotate{
	transform: rotate(90deg) translate(3vw,-13vh);
}

.select-content-mobile{
	transform: translate(6vw, 8vh);
}

#mobile-path-right{
	width:30%;
	height:100%;
	right:0;
	position:absolute;
	display: flex;
	flex-direction:row;
}

#iconwrapper-right{
	display: flex;
	flex-direction: row;
	align-items: center;
	width:35%;
	margin-left:auto;
}

#select-query-mobile{
	transform: translate(-7vw, 2vh);
}

#select-download-mobile{
	transform:translateX(-4vw);
}

.button{
	display: none;
}

/************ main-content ***************/
#content-up, #content-bottom{
	width:100%;
	height:50%;
}

/********** content-up ************/
#lang-switch{
	display: none;
}

/********** mobile-button ************/
#mobile-button{
	width:20%;
	margin-left:20vw;
	font-family: 'Helvetica Neue', 'Noto Sans';
	font-size:5vw;
	text-align: center;
	display: none;
}

#mobile-button.show{
	display:block;
}

.mobile-button{
	margin:1vh auto;
	letter-spacing: 5vw;
	font-weight: lighter;
}

.lang-en .mobile-button{
	font-family:'Calibri', 'Lato';
	font-size:5vw;
	font-weight:100;
	letter-spacing: 3px;
	width:13vw;
}

/********** content ************/
#content{
	overflow-y: auto;
	overflow-x: hidden;
	font-size:2.5vw;
	width:50%;
	height:50dvh;
	margin:0 auto;
	font-family: 'Helvetica Neue', 'Noto Sans';
	z-index:10;
}

.main-content{
	width:100%;
	height:100%;
	display:flex;
	flex-direction: row;
	align-items:center;
	display:none;
}

.content{
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
}

.content.contact{
	width:80%;
	height:70%;
	display: flex;
	flex-direction: column;
}

.contact-contentwrapper{
	display: flex;
	flex-direction: column;
	align-items: end;
	width:100%;
	height:30%;
	margin:auto 0;
}
/********** contact-content ************/
.up{
	font-size:3vw;
	width:80%;
}
#email{
	margin:auto 0;
}

#phone{
	margin:auto 0;
}

a{
	font-family:'Calibri', 'Lato';
	color:black;
}

#contact-term{
	visibility: hidden;
}

/********** contact-term ************/
.down{
	color:grey;
	font-family:'Avenir Next', 'Montserrat';
	font-size:1.8vw;
	width:80%;
	display: flex;
	flex-direction: column;
	align-items:end;
	margin-top:4vh;
}

#contact-term{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:10px;
	margin:1.5dvh 0;
	cursor: pointer;
}

#company-name{
	margin:auto 0;
}

#contact-footer{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:5px;
	margin:0.2vh 0;
}

/********** contact-icon ************/
.static{
	height:70%;
	width:20%;
	display: flex;
	flex-direction: column;
}

.contact-iconwrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	height:30%;
	margin:auto;
}

.message{
	cursor: pointer;
}

.icon{
	width:5vw;
}

.whatsapp {
	display:none;
}

.wecom{
	display:none;
}

/********** platform ************/
#intro{
	border:solid;
	border-radius:20px;
	box-shadow:15px 10px 10px grey;
	width:120%;
	height:50%;
	overflow:hidden;
}

#intro video{
	width:100%;
	height:100%;
}

/********** content-bottom ************/
#lang-switch-mobile{
	width:20vw;
	font-size: 2.5vw;
	text-align: center;
	color:#707070;
	font-family: 'Helvetica Neue', 'Noto Sans';
	transform: translate(71.5vw, 12.5vh);
}

#lang-switch span:lang(en){
	font-family:'Calibri', 'Lato';
}

.lang-switch{
	display:none;
	flex-direction: row-reverse;
	justify-content:space-around;
	align-items: center;
}

.lang-switch.tcn{
	display: flex;
}

.switch-bottom{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width:70%;
	visibility:hidden;
}

.switch-bottom.show{
	visibility: visible;
}

#open-animation{
	font-family:'Calibri', 'Lato';
	font-size:3vw;
	letter-spacing: 3px;
	width:50%;
	text-align:center;
	margin:10vh 0 0 5vw;
}

#companylogo{
	font-family:'Avenir Next', 'Montserrat';
	display: flex;
	flex-direction: row;
	align-items: end;
	text-align: center;
	width:15%;
	margin:12vh auto;
}

#copyright{
	font-size:2vw;
	margin:0 auto;
}

#sd-logo{
	letter-spacing: 1px;
	font-size: 2.5vw;
	margin:0 auto;
}	
}

/************************************************************* rwd-phone ****************************************************************/
@media(max-width: 540px){
/******************* main ********************/
#main{
	height:100%;
	width:100%;
	display:flex;
	flex-direction: column;
	align-items: center;
}

#main-logo{
	width:100%;
	height:25%;
}

#main-content{
	width:100%;
	height:75%;
	display: flex;
	flex-direction: column;
}

/************ main-logo ***************/
#select-path{
	display:none;
}

#select-path-mobile{
	width:100%;
	height:100%;
	display:flex;
	flex-direction: row;
	align-items: center;
	position:relative;
}

#mobile-path-left{
	width:30%;
	height:100%;
	position:absolute;
	left: 0;
	display: flex;
	flex-direction: row;
}

#iconwrapper-left{
	display:flex;
	flex-direction: row;
	align-items: center;
	width:40%;
}

#iconwrapper-left.rotate{
	transform: rotate(90deg) translate(3vw,-6vh);
}

.select-content-mobile{
	transform: translate(6vw,3vh);
}

#mobile-path-right{
	width:30%;
	height:100%;
	right:0;
	position:absolute;
	display: flex;
	flex-direction:row;
}

#iconwrapper-right{
	display: flex;
	flex-direction: row;
	align-items: center;
	width:36%;
	margin-left:auto;
}

#select-query-mobile{
	transform: translateX(-7vw);
}

#select-download-mobile{
	transform:translate(-4vw, -2vh);
}

.button{
	display: none;
}

/************ main-content ***************/
#content-up, #content-bottom{
	width:100%;
	height:50%;
}

/********** content-up ************/
#lang-switch{
	display: none;
}

/********** mobile-button ************/
#mobile-button{
	width:40%;
	margin:-3vh 0 0 20vw;
	font-family: 'Helvetica Neue', 'Noto Sans';
	font-size:8vw;
	letter-spacing: 20px;
	display: none;
}

#mobile-button.show{
	display:block;
}

.mobile-button{
	margin:1vh auto;
	letter-spacing: 5vw;
	font-weight: lighter;
}

.lang-en .mobile-button{
	font-family:'Calibri', 'Lato';
	font-size:8vw;
	font-weight:100;
	letter-spacing: 3px;
}

/********** content ************/
#content{
	overflow-y: auto;
	font-size:4vw;
	width:70%;
	height:50vh;
	margin:0 auto;
	font-family: 'Helvetica Neue', 'Noto Sans';
	z-index:10;
}

.main-content{
	width:80%;
	height:100%;
	display:flex;
	flex-direction: row;
	align-items:center;
	display:none;
	margin:auto;
}

.content{
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
	margin:auto;
}

.content.contact{
	width:80%;
	height:50%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-contentwrapper{
	display: flex;
	flex-direction: column;
	align-items: end;
	width:100%;
	height:50%;
	margin:auto;
}
/********** contact-content ************/
.up{
	font-size:4vw;
	width:100%;
}
#email{
	margin:auto 0;
}

#phone{
	margin:auto 0;
}

a{
	font-family:'Calibri', 'Lato';
	color:black;
}

#contact-term{
	visibility: hidden;
}

/********** contact-term ************/
.down{
	color:grey;
	font-family:'Avenir Next', 'Montserrat';
	font-size:2.5vw;
	width:100%;
	display: flex;
	flex-direction: column;
	align-items:end;
	transform: translateY(3.5dvh);
}

#contact-term{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:10px;
	margin:1.5dvh 0;
	cursor: pointer;
}

#company-name{
	margin:2dvh 0;
}

#contact-footer{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:5px;
	margin:0.2vh 0;
}

/********** contact-icon ************/
.static{
	height:50%;
	width:20%;
	display: flex;
	flex-direction: column;
}

.contact-iconwrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	height:50%;
	width:100%;
	margin:auto 0;
}

.message{
	cursor: pointer;
}

.icon{
	width:8vw;
}

.whatsapp {
	display:none;
}

.wecom{
	display:none;
}

/********** platform ************/
#intro{
	border:solid;
	border-radius:20px;
	box-shadow:15px 10px 10px grey;
	width:120%;
	height:45%;
	overflow:hidden;
}

#intro video{
	width:100%;
	height:100%;
}

/********** content-bottom ************/
#lang-switch-mobile{
	width:20vw;
	font-size: 3.5vw;
	text-align: center;
	color:#707070;
	font-family: 'Helvetica Neue', 'Noto Sans';
	transform: translate(73vw, 19vh);
}

#lang-switch span:lang(en){
	font-family:'Calibri', 'Lato';
}

.lang-switch{
	display:none;
	flex-direction: row-reverse;
	justify-content:space-around;
	align-items: center;
}

.lang-switch.tcn{
	display: flex;
}

.switch-bottom{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width:70%;
	visibility:hidden;
}

.switch-bottom.show{
	visibility: visible;
}

#open-animation{
	font-family:'Calibri', 'Lato';
	font-size:4.5vw;
	letter-spacing: 3px;
	width:60%;
	text-align:center;
	margin:15.5vh 0 0 15vw;
}

#companylogo{
	font-family:'Avenir Next', 'Montserrat';
	display: flex;
	flex-direction: row;
	align-items:end;
	width:30%;
	margin:7vh auto;
}

#copyright{
	font-size:3.8vw;
	margin:0 auto;
}

#sd-logo{
	font-size: 4.5vw;
	margin:0 auto;
	letter-spacing: 1px;
}	
}

/*************************************************** rwd-phone-landscape ***********************************************************/
@media(orientation: landscape) and (min-width: 540px) and (max-width: 1024px){
/******************* main ********************/
#main{
	height:100%;
	width:100%;
	display:flex;
	flex-direction: column;
	align-items: center;
}

#main-logo{
	width:100%;
	height:25%;
}

#main-content{
	width:100%;
	height:75%;
	display: flex;
	flex-direction: column;
}

/************ main-logo ***************/
#select-path{
	display:none;
}

#select-path-mobile{
	width:100%;
	height:100%;
	display:flex;
	flex-direction: row;
	align-items: center;
	position:relative;
}

#mobile-path-left{
	width:23%;
	height:100%;
	position:absolute;
	left: 0;
	display: flex;
	flex-direction: row;
}

#iconwrapper-left{
	display:flex;
	flex-direction: row;
	align-items: center;
	width:35%;
}

#iconwrapper-left.rotate{
	transform: rotate(90deg) translate(15vw,-42dvh);
}

.select-content-mobile{
	transform: translate(3vw, 34dvh);
}

#mobile-path-right{
	width:23%;
	height:100%;
	right:0;
	position:absolute;
	display: flex;
	flex-direction:row;
}

#iconwrapper-right{
	display: flex;
	flex-direction: row;
	align-items: center;
	width:35%;
	margin-left:auto;
}

#select-query-mobile{
	transform: translate(-6vw, 20dvh);
}

#select-download-mobile{
	transform:translate(-4vw, 10.5dvh);
}

.button{
	display: none;
}

/************ main-content ***************/
#content-up, #content-bottom{
	width:100%;
	height:50%;
}

/********** content-up ************/
#lang-switch{
	display: none;
}

/********** mobile-button ************/
#mobile-button{
	width:20%;
	font-family: 'Helvetica Neue', 'Noto Sans';
	font-size:3.5vw;
	margin:20dvh 0 0 15vw;
	text-align: start;
	display: none;
}

#mobile-button.show{
	display:block;
}

.mobile-button{
	margin:1vh auto;
	letter-spacing: 5vw;
	font-weight: lighter;
}

.lang-en .mobile-button{
	font-family:'Calibri', 'Lato';
	font-size:3.5vw;
	font-weight:100;
	letter-spacing: 3px;
	width:13vw;
}

/********** content ************/
#content{
	overflow-y: auto;
	font-size:2vw;
	width:50%;
	height:40dvh;
	margin:15dvh auto 0 auto;
	font-family: 'Helvetica Neue', 'Noto Sans';
	z-index:10;
}

.content{
	display: none;
	flex-direction: column;
}

#contact-term{
	visibility: hidden;
}

/********** platform ************/
#intro{
	border:solid;
	border-radius:20px;
	box-shadow:15px 10px 10px grey;
	width:100%;
	overflow:hidden;
	margin-top:10%;
}

#intro video{
	width:100%;
	height:100%;
}

/********** content-bottom ************/
#lang-switch-mobile{
	width:15vw;
	font-size: 1.8vw;
	text-align: center;
	color:#707070;
	font-family: 'Helvetica Neue', 'Noto Sans';
	transform: translate(77vw, 13.8vh);
}

#lang-switch span:lang(en){
	font-family:'Calibri', 'Lato';
}

.lang-switch{
	display:none;
	flex-direction: row-reverse;
	justify-content:space-around;
	align-items: center;
}

.lang-switch.tcn{
	display: flex;
}

.switch-bottom{
	display: none;
}

.switch-bottom.show{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width:50%;
}

#open-animation{
	font-family:'Calibri', 'Lato';
	font-size:3vw;
	letter-spacing: 3px;
	width:50%;
	text-align:center;
	margin:10vh auto;
}

#companylogo{
	font-family:'Avenir Next', 'Montserrat';
	display: flex;
	flex-direction: row;
	align-items: end;
	text-align: center;
	width:15%;
	margin:-2vh auto;
}

#copyright{
	font-size:2vw;
	margin:0 auto;
}

#sd-logo{
	letter-spacing: 1px;
	font-size: 2.5vw;
	margin:0 auto;
}	
}