@font-face{
    font-family: "wavehaus-bold";
    src: url("../font/Wavehaus-128Bold.otf");
}
@font-face{
    font-family: "wavehaus-book";
    src: url("../font/Wavehaus-66Book.otf");
}
@font-face{
    font-family: "wavehaus-light";
    src: url("../font/Wavehaus-42Light.otf");
}
@font-face{
    font-family: "bigcaslon-black";
    src: url("../font/bigcaslonblack.ttf");
}

html,body{
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "wavehaus-book";
	line-height: 1.3;
}
div{
	box-sizing: border-box;
}
.row{
	margin: 0 -22px;
}
.col-11{
	width: 91.66%;
	padding: 0 22px;
	float: left;
}
.col-12{
	width: 100%;
	padding: 0 22px;
	float: left;
}
.col-1{
	width: 8.33%;
	padding: 0 22px;
	float: left;
}
.col-2{
	width: 16.66%;
	padding: 0 22px;
	float: left;
}
.col-4{
	width: 33.33%;
	padding: 0 22px;
	float: left;
}
.col-6{
	width: 50%;
	padding: 0 22px;
	float: left;
}
.col-7{
	width: 58.33%;
	padding: 0 22px;
	float: left;
}
.col-8{
	width: 66.66%;
	padding: 0 22px;
	float: left;
}
.col-3{
	width: 25%;
	padding: 0 22px;
	float: left;
}
.col-10{
	width: 83.33%;
	padding: 0 22px;
	float: left;
}
header{
	height: 90px;
	border-bottom: 1px solid #979797;
	/*overflow: hidden;*/
}
header div{
	height: 100%;	
}
#logo{
	margin: 20px 0;
	height: calc(100% - 40px);
}
.relative{
	position: relative;
}
.nav{
	float: right;
	position: relative;
}
.nav-item{
	width: 164px;
	padding: 0 22px;
	float: left;
	line-height: 90px;
	height: 91px;
	font-size: 15px;
	color: #FFFFFF;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	transition: all .8s 0s cubic-bezier(.23,1,.32,1);
	border-bottom: 1px solid transparent;
}
.nav-item:hover{
	font-family: 'wavehaus-bold';
	/*border-bottom: 1px solid #43BEE8;*/
}
.dropdown_menu{
	position: absolute;
	top: calc(100% + 1px);
	left: -25px;
	width: 100%;
	/*border-top: 1px solid #43BEE8;*/
	overflow: hidden;
	opacity: 0;
	height: 0;
	z-index: 999;
   	padding: 0 25px;
    box-sizing: content-box;
    background: #868591;
}
.dropdown_menu_list{
	height: 55px;
	line-height: 55px;
	border-top: 1px solid #43BEE8;
	box-sizing: border-box;
	font-family: 'wavehaus-book';
}
.dropdown_menu a:first-child .dropdown_menu_list{
	border-top: unset!important;
}
.dropdown_menu_list:hover{
	font-family: 'wavehaus-bold';
}
#investment:hover .dropdown_menu{
	height: 220px;
	opacity: 1;
}
#partners:hover .dropdown_menu{
	height: 165px;
	opacity: 1;
}
.applynow{
	border-left: 1px solid #979797;
	border-right: 1px solid #979797;
	width: 280px;
}
.applynow:hover{
	background: rgba(34,31,52,0.3);
	/*background: rgba(255,255,255,0.3);*/
}
.search{
	padding-left: 0!important;
}
.bold{
	font-family: "wavehaus-bold";
}
.light{
	font-family: "wavehaus-light";
}
#search{
	margin: 28px 0;
	height: calc(100% - 56px);
}
#menu-line{
	width: 164px;
	height: 2px;
	background: #43BEE8;
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	opacity: 0;

}
.nav:hover #menu-line{
	opacity: 1;
}

.transition{
	transition: all .8s 0s cubic-bezier(.23,1,.32,1);
}

#list{
	position: fixed;
	left: 8.33%;
	bottom: 13.5%;
}
.list-item{
	border-left: 1px solid #43BEE8;
	padding-left: 18px;
	box-sizing: border-box;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 15px;
	margin-top: 12px;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}
.list-active{
	font-size: 25px;
	border-left: 3px solid #43BEE8;
	line-height: 30px;
}
.blue{
	color:#43BEE8!important;
}
.blue-bg{
	background:#43BEE8!important;
}
#text{
	width: 80%;
	height: 52vmin;
	/*background: rgba(255,255,255,0.3);*/
	position: absolute;
	top: 50%;
	right: 8.33%;
	transform: translateY(-50%);
}
.title-page{
	font-family: "bigcaslon-black";
	font-size: 140px;
	text-align: right;
	line-height: 152px;
	position: absolute;
	right: 0%;
	bottom: 0;
	color: #fff;
}
#text p{
	font-size: 18px;
	color: #FFFFFF;
	text-align: right;
	line-height: 22px;
	font-family: "wavehaus-book";
	margin: 0;
	max-width: 400px;
}
.title-page{
	position: absolute;
	bottom: 0;
	right: 0;
}
.title-line{
	/*transition: all 0.3s ease;*/
}
#t22,#t23,#t32,#t33,#t42,#t43{
	opacity: 0;
	transform: translateY(30px);
}
#text2,
#text1{
	position: absolute;
	bottom: 0;
	right: 0;
	/*border-right: 3px solid #43BEE8;*/
	padding-right: 15px;
	line-height: 24px;
	opacity: 0;
}
#blueline2,
#blueline{
	position: absolute;
	right: 0;
	top: 0;
	width: 3px;
	height: 0%;
	background: #43BEE8;
}
.learnmore{
	font-family: "wavehaus-bold"!important;
}
.arrow1{
	position: absolute;
	right: 15px;
	display: inline-block;
	transform: translateX(0) translateZ(0);
}
.arrow2{
	position: absolute;
	right: 15px;
	display: inline-block;
	opacity: 0;
    transform: translateX(-20px) translateZ(0);
}
.learnmore:hover .arrow1{
	opacity: 0;
    transform: translateX(20px) translateZ(0);
    transition: transform .7s cubic-bezier(.23,1,.32,1),opacity .45s cubic-bezier(.165,.84,.44,1);
}
.learnmore:hover .arrow2{
	opacity: 1;
    transform: translateX(0) translateZ(0);
    transition: transform .7s .1s cubic-bezier(.23,1,.32,1),opacity .45s .1s cubic-bezier(.165,.84,.44,1);
}


/*graphic*/
#graphic{
	position: fixed;
	left: 0;
	top: 0;
	width: 58.33%;
	height: 100%;
	/*background: rgba(255,255,255,0.3);*/
	overflow: hidden;
	z-index: -1;
}
#square{
	width: 52vmin;
	height: 52vmin;
	/*background: rgba(255,255,255,0.3);*/
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.squareline{
	background: #fff;
	position: absolute;
	transition: all 0.6s cubic-bezier(.23,1,.32,1);
}
.horiz{
	width: 33.33%;
	height: 1px;
}
.vertical{
	width: 1px;
	height: 33.33%;
}
#corner{
	position: absolute;
	right: 0;
	top: 0;
	width: 33.33%;
	height: 33.33%;
	transition: all 0.6s cubic-bezier(.23,1,.32,1);
}
#corner img{
	width: 100%;
	height: 100%;
}
#sl1{
	top: 0;
	right: 66.66%;
}
#sl2{
	top: 0;
	left: 33.33%;
}
#sl3{
	top: 0;
	left: 66.66%;
}
#sl4{
	right: 0;
	top: 0;
}
#sl5{
	right: 0;
	top: 33.33%;
}
#sl6{
	right: 0;
	top: 66.66%;
}
#sl7{
	bottom: 0;
	left: 66.66%;
}
#sl8{
	bottom: 0;
	right: 33.33%;
}
#sl9{
	bottom: 0;
	right: 66.66%;
}
#sl10{
	bottom: 0;
	left: 0;
}
#sl11{
	left: 0;
	bottom: 33.33%;
}
#sl12{
	left: 0;
	bottom: 66.66%;
}
.slope{
	width: 60vw;
	height: 1px;
	background: #fff;
	transform: rotate(-45deg);
	position: absolute;
	transform-origin: 100% 50%;
	transition: all 0.3s ease-in-out;
}
#line1{
	right: 100%;
	top: 0;
}
#line2{
	right: 100%;
	top: 100%;
}
#line3{
	right: 0;
	top: 100%;
}
#line4{
	right: 0;
	top: 0;
	width: 0;
}
#line5{
	right: 0;
	top: 0;
	width: 0;
}


/*mobile menu*/
.nav-mobile{
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
	height: unset;
	display: none;
	z-index: 120;
}
.ham-lines{
	width: 24px;
	height: 1px;
	background: #fff;
	margin:8px 0;
}
.hamburger.expand .ham-lines:nth-child(1){
	transform: rotate(45deg);
	width: 25px;
	transform-origin: left;
}
.hamburger.expand .ham-lines:nth-child(2){
	opacity: 0
}
.hamburger.expand .ham-lines:nth-child(3){
	transform: rotate(-45deg);
	width: 25px;
	transform-origin: left;
}
.menu-mobile{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: #221F34;
	z-index: 101;
	opacity: 0;
	visibility: hidden;
}
.menu-mobile.expand{
	opacity: 1!important;
	visibility: visible!important;
}
.mm-box{
	padding: 100px 25px;
}
.mm-item{
	height: unset;
	text-align: right;
}
.mm-title1{
	margin-bottom: 45px;
	font-family: "wavehaus-bold";
	font-size: 20px;
	color: #fff;
}
.mm-title2{
	margin-bottom: 13px;
	font-family: "wavehaus-book";
	font-size: 15px;
	color: #fff;
}
.mm-title3{
	font-family: "wavehaus-bold";
	font-size: 20px;
	color: #43BFE7;
}
.submenubox{
	height: 0px;
	overflow: hidden;
	position: relative;
	top: -15px;
}
.submenubox.expand{
	height: 148px!important;
}

@media (min-width: 2560px){
	.horiz,
	.slope,
	.vertical{
		border: thin solid #fff;
	}
}
@media (max-width: 1600px){
	.title-page{
		font-size: 100px;
		line-height: 116px;
	}
}
@media (max-width: 1366px){
	.nav-item{
		width: 125px;
	}
	.applynow{
		width: 180px;
	}
	.title-page{
		font-size: 60px;
		line-height: 70px;
	}
	#text p{
		font-size: 16px;
	}
}
@media (max-width: 1024px){
	.title-page{
		font-size: 50px;
		line-height: 60px;
	}
	#text p{
		font-size: 14px;
		line-height: 16px;
		max-width: 300px;
	}
	
	.nav-item{
		font-size: 11px;
		width: 95px;
		padding: 0;
		text-align: center;
	}
	.applynow{
		width: 120px;
	}
}
@media (max-width: 910px){
	header{
		height: 80px;
	}
	.nav-item{
		height: 81px;
		line-height: 80px;
	}
	.title-page{
		font-size: 112px;
		line-height: 120px;
	}
	#text p{
		font-size: 16px;
		line-height: 18px;
		max-width: 300px;
	}
	#list{
		display: none;
	}
	#graphic{
		width: 80%;
	}
	#square{
		width: 58vmin;
		height: 58vmin;
		top: 38%;
	}
	.slope{
		width: 100vw;
	}
	#text{
		top: calc(100% - 260px);
		right: 22px;
	}
	header .col-1{
		display: none;
	}
	header .col-11{
		width: 100%;
		padding: 0 22px 0 44px;
	}
}
@media (max-width: 650px){
	.nav-mobile{
		display: block;
	}
	header{
		position: relative;
		height: 72px;
	}
	.title-page{
		font-size: 40px;
		line-height: 50px;
	}
	#text p{
		font-size: 12px;
		line-height: 14px;
		max-width: 200px;
	}
	.list-item{
		margin-top: 8px;
	}
	#text{
		top: unset;
		bottom: 8%;
		right: 25px;
		transform: translateY(0);
	}
	#graphic{
		width: 70%;
		height: 100%;
	}
	#square {
	    width: 40vmin;
	    height: 40vmin;
	    top: 15%;
	    transform: translateY(0);
	}
	#list{
		bottom: 8%
	}
	.nav{
		display: none;
	}
	#logo {
	    margin: 16px 0;
	    height: calc(100% - 32px);
	}
}