/* Universal */
@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Regular.otf');
}
*{
	box-sizing: border-box;
}
html, body{
	height: 100%;
}
.wrapper{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	height: 100%;
}
.relative{
	position: relative;
}
.transition{
	transition: all 0.3s ease-in-out;
}
.center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);	
}
.v-center{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	
}
.h-center{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);	
}
.hvr-underline-from-left-normal,
.hvr-underline-from-left-blue,
.hvr-underline-from-left{
	display:inline-block;
	vertical-align:middle;
	-webkit-transform:perspective(1px) translateZ(0);
	transform:perspective(1px) translateZ(0);
	box-shadow:0 0 1px transparent;
	position:relative;
	/*overflow:hidden*/
}
.hvr-underline-from-left-normal:before,
.hvr-underline-from-left-blue:before,
.hvr-underline-from-left:before{
	content:"";
	position:absolute;
	z-index:-1;
	left:0;
	right:100%;
	bottom:-23px;
	background:#FFF;
	height:4px;
	-webkit-transition-property:right;
	transition-property:right;
	-webkit-transition-duration:.3s;transition-duration:.3s;
	-webkit-transition-timing-function:ease-out;
	transition-timing-function:ease-out
}
.hvr-underline-from-left-normal:active:before,
.hvr-underline-from-left-normal:hover:before,
.hvr-underline-from-left-normal:focus:before,
.hvr-underline-from-left-blue:active:before,
.hvr-underline-from-left-blue:hover:before,
.hvr-underline-from-left-blue:focus:before,
.hvr-underline-from-left:active:before,
.hvr-underline-from-left:focus:before,
.hvr-underline-from-left:hover:before{
	right:0
}
.hvr-underline-from-left-blue:active:before,
.hvr-underline-from-left-blue:hover:before,
.hvr-underline-from-left-blue:focus:before{
    background:#41345E;
}
.hvr-underline-from-left-blue:before{
    background:#41345E;
}
.hvr-underline-from-left-blue:before,
.hvr-underline-from-left-normal:before{
	bottom: -1px;
	height: 1px;
}
.nav-selected:before{
	right: 0!important;
}
body{
	background-color: #fff;
	color: #333333;
	font-family: 'PingFang SC',"Microsoft Yahei","微软雅黑",'Montserrat','Helvetica';
	line-height: 1.3;
}
p{
	line-height: 1.3;
}
a{
	color: inherit;
	text-decoration: none;
}
a:visited{
	text-decoration: none;
}
img{
	object-fit: cover;
	object-position: center;
}
:focus{
	outline: none;
}
.square {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.row{
	margin: 0 -15px;
	overflow:hidden;
}
.col-1{
	width: calc(8.333333% - 30px);
	margin: 0 15px;
	float: left;
}
.col-2{
	width: calc(16.666% - 30px);
	margin: 0 15px;
	float: left;
}
.col-3{
	width: calc(25% - 30px);
	margin: 0 15px;
	float: left;
}
.col-4{
	width: calc(33.3333% - 30px);
	margin: 0 15px;
	float: left;
}
.col-5{
	width: calc(41.6666% - 30px);
	margin: 0 15px;
	float: left;
}
.col-6{
	width: calc(50% - 30px);
	margin: 0 15px;
	float: left;
}
.col-7{
	width: calc(58.3333% - 30px);
	margin: 0 15px;
	float: left;
}
.col-8{
	width: calc(66.6666% - 30px);
	margin: 0 15px;
	float: left;
}
.col-9{
	width: calc(75% - 30px);
	margin: 0 15px;
	float: left;
}
.col-10{
	width: calc(83.3333% - 30px);
	margin: 0 15px;
	float: left;
}
.col-11{
	width: calc(91.6666% - 30px);
	margin: 0 15px;
	float: left;
}
.col-12{
	width: calc(100% - 30px);
	margin: 0 15px;
	float: left;
}


h1{
	font-weight: 500;
	font-size: 48px;
	letter-spacing: 1px;
	line-height: 67px;
	color: #FFFFFF;
}
h2{
	font-weight: 500;
	font-size: 34px;
	letter-spacing: 1px;
	line-height: 53px;
	color: #FFFFFF;
}
h3{
	font-weight: 500;
	font-size: 24px;
	letter-spacing: 0;
	line-height: 33px;
	color: #FFFFFF;
}
h4{
	font-size: 18px;
	letter-spacing: 0;
	line-height: 29px;
	color: #FFFFFF;
	font-weight: normal;
}
h5{
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 18px;
	color: #41345E;
}
p,
.p1{
	font-size: 14px;
	letter-spacing: 0px;
	line-height: 20px;
	color: #FFFFFF;
	font-weight: normal;
}
.p2{
	font-size: 12px;
	letter-spacing: 0;
	line-height: 16px;
	color: #FFFFFF;
	font-weight: normal;
}
.pfooter,
.pheader{
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	color: #FFFFFF;
}


.scroll-up{
	display: none;
	position: fixed;
	right: 65px;
	bottom: 150px;
	/*border-radius: 32px;*/
	/*width: 32px;*/
	/*height: 32px;*/
	text-align: center;
	/*line-height: 28px;*/
	font-size: 0px;
	/*color: #fff;*/
	/*background-color: #00587C;*/
	opacity: 0.5;
}
.scroll-up:hover{
	opacity: 1;
}
/*.page-loader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 99999;
}
.loading-box{
	height: 40px;
	width: 193px;
}
.img-box{
	position: absolute;
	left: 0;
	top: 0;
	height: 40px;
	width: 193px;
}
.skew{
	transform: skew(-20deg);
	width: 205px;
	height: 40px;
	overflow: hidden;
	animation-fill-mode: forwards;
	background: #fff;
}
.skew img{
	transform: skew(20deg);
}
.fakeloading{
	animation: fake-loading 20s ease-in-out;
}
@keyframes fake-loading{
	0%{
		width: 0;
	}
	30%{
		width: 30px;
	}
	50%{
		width: 100px;
	}
	90%{
		width: 130px;
	}
	100%{
		width: 202px;
	}
}*/

/* header */
header{
	padding: 45px 0 25px;
	height: 120px;
	background: #41345E;
	color: #FFFFFF;
	position: fixed;
	width: 100%;
	z-index: 200;
	top: 0;
}
nav{
	float: right;
	height: 50px;
	line-height: 50px;
	text-transform: uppercase;
	white-space: nowrap;
}
.nav-item{
	display: inline-block;
	margin: 0 0 0 90px;
	cursor: pointer;
	z-index: 100;

}
.drop-down-menu{
	width: 150px;
	padding: 0;
	background:  rgba(255,255,255,0.95);
	position: absolute;
	z-index: 100;
    left: -41px;
    top: 73px;
    overflow: hidden;
    max-height: 0px;
    opacity: 0;
    border-left: 1px solid rgba(65,52,94,0.3);
    border-right: 1px solid rgba(65,52,94,0.3);
    border-bottom: 1px solid rgba(65,52,94,0.3);
}
.drop-down-menu-item h5{
	line-height: 32px;
	font-weight: normal;
	/*transition: all 0.1s ease;*/
}
.drop-down-menu-item{
	height: 32px;
	/*transition: all 0.1s ease;*/
}
.drop-down-menu-item:hover{
	background: #41345E;
}
.drop-down-menu-item:hover h5{
	color: #fff;
}
.nav-item:hover .drop-down-menu{
	/*padding: 10px 0;*/
	max-height: 600px;
	opacity: 1;
}
.header-margin{
	height: 120px;
}
.hbg-box{
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translate(0, -50%);
    display: none;
    cursor: pointer;
    padding-top: 7px;
    z-index: 500;
}
.hbg{
    width: 20px;
    height: 0px;
    border-bottom: 2px solid #ffffff;
    margin-bottom: 5px;
}
.m-menu-open #hbg1-m{
	transform: rotate(-45deg);
	transform-origin: right;
}
.m-menu-open #hbg2-m{
	opacity: 0;
}
.m-menu-open #hbg3-m{
	transform: rotate(45deg);
	transform-origin: right;
}

.m-menu{
	width: 300px;
	height: 100vh;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 300;
	padding: 80px 30px;
	background: #41345E;
	transform: translateX(300px);
	opacity: 0;
}
.m-menu-open.m-menu{
	transform: translateX(0px)!important;
	opacity: 1;
}
.m-nav-item{
	width: 100%;
	line-height: 56px;
	position: relative;
}
.level-icon{
	position: absolute;
	right: 0;
	top: 20px;
}
.m-menu-level2{
	position: fixed;
	right: 0;
	top: 0;
	z-index: 310;
	padding: 80px 30px;
	background: #41345E;
	width: 300px;
	height: 100vh;
	transform: translateX(300px);
	opacity: 0;
}
.m-menu-item h5{
	color: #fff;
	line-height: 35px;
	text-align: left;
	padding-left: 40px;
}
.level2{
	transform: translateX(0px);
	opacity: 1;
}
.level-back{
	transform: rotate(180deg);
	left: 0!important;
}
.level2-title{
	line-height: 56px;
	padding-left: 25px;
}

/* footer */
footer{
	height: 160px;
	background: #41345E;
	color: #FFFFFF;
	overflow: hidden;
}
.ft-up{
	height: 100px;
	border-bottom: 1px solid #ffffff;
}
.ft-down{
	height: 60px;
	line-height: 60px;
}
.ft-down-left{
	float: left;
}
.ft-down-right{
	float: right;
	line-height: 20px;
	height: 60px;
	padding-top: 20px;
}
.ft-nav{
	padding-top: 38px;
	line-height: 24px;
}
.ft-item{
	margin: 0 100px 0 0;
	display: inline-block;
}








/* style guide */
section{
	padding: 70px 0px;
}
.body-content{
	min-height: calc(100vh - 280px);
}
.purple{
	color: #41345E!important;
}
.bottom-blank{
	margin-bottom: 30px;
}
.style-title{
	font-weight: bold;
	color: #002539;
	font-size: 24px;
	margin: 25px 0;
}
.column{
	height: 630px;
	background: rgba(219,219,219,1);
}
#grid-img{
	right: 113px;
    width: calc(33.333% - 30px);
}
/* color */
.titlebox{
	/*padding: 12px 0;*/
	/*border-bottom: 1px solid #EEEEEE;*/
	font-family: lato;
	font-size: 16px;
	color: #002539;
	letter-spacing: 0;
	line-height: 24px;
	margin-bottom: 30px;
}
#color-table{
	width: 100%;
	font-size: 12px;
	table-layout: fixed;
}
.color-border{
	padding: 10px;
	border-bottom: 1px solid #DFE6EE;
}
#color-table th,
#color-table td{
	padding: 15px 15px;
	text-align: center;
}
.color-block{
	width: 100%;
	height: 165px;
	/*border-bottom: 1px solid #DFE6EE;*/
}
.color-name{
	font-size: 15px;
	color: #444444;
}
.colorhex{
	font-size: 13px;
	color: #777777;
}
.colorrgb{
	font-size: 12px;
	color: #777777;
}
.color-box{
	/*border: 1px solid #DFE6EE;*/
}
.color-title{
	padding: 10px;
	text-align: left;
}

/* pics */
.img-box{
	position: relative;
	font-size: 0px;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.country-item{
	width: 50%;
	float: left;
}
.country-row{
        overflow: hidden;
}
.country-img{
	width: 100%;
}
.img-mask{
	width: 0%;
	height: 100%;
	position: absolute;
	top: 0;
	left: -25%;
	background: rgba(65,52,94,0.85);
	transform: skew(-33deg);
	opacity: 0;
}
.img-box:hover .img-mask{
	width: 150%;
	opacity: 1;
}
.img-box:hover .country-title{
	transform: translate(-50%, -150%);
}
.country-more{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, 80%);
	color:#fff;
	opacity: 0;
}
.img-box:hover .country-more{
	opacity: 1;
	transform: translate(-50%, 200%);
}
.img-box:hover .country-img{
	transform: scale(1.03);
}
.visa-item{
	height: 400px;
    width: 100%;
    /*float: left;*/
}
.visa-item .visa-img{
	width: 100%;
	height: 150%;
	transition: transform 3s ease-in-out, margin-top 0.2s ease-out;
}
.visa-item:hover .visa-img{
	transform: translateY(-50%) scale(1.05);
}
.visa-info-box{
	height: 100%;
    position: absolute;
    top: 0;
    width: calc(41.666% + 12.5px);
}
.visa-info-box-left{
	left: 0;
}
.visa-info-box-right{
	right: 0;
}
.visa-img-mask{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(65,52,94,0.85);
}
.align-center{
	text-align: center;
}
.visa-info{
	position: absolute;
	width: calc(100% - 30px);
	max-width: 520px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.visa-info h3{
	margin-top: 35px;
	margin-bottom: 5px;
}
.visa-info h4{
	margin-bottom: 20px;
}
.visa-info .visa-des{
	margin-bottom: 45px;
	text-align: center;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	height: 20px;
}
.visa-info-box:hover .visa-img-mask{
	background: rgba(65,52,94,0.95);
}
.visa-viewmore{
	position: absolute;
	left: 50%;
	transform: translate(-50%,-100%);
	opacity: 0;
}
.visa-info-box:hover .visa-viewmore{
	transform: translate(-50%,50%);
	opacity: 1;
}
.visa-info-box:hover .visa-info{
	transform: translate(-50%, -60%);
}



.mouse-mask{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.short-line{
	width: 50px;
	height: 2px;
	background-color: #fff;
	margin: 0px auto;
}
.property-detail{
	margin-top: 25px;
	margin-bottom: 20px;
	font-weight: normal;
}
.property-item{
	height: 500px;
}
.property-item .visa-info h3{
	margin-bottom: 25px;
	/*margin-top: 10px;*/
}
.property-item .visa-info h4{
	/*margin-bottom: 50px;*/
}
.property-des{
	/*margin-bottom: 30px;*/
	margin-top: 65px;
}
.porperty-viewmore{
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	top: 60%;
}
.visa-info-box:hover .porperty-viewmore{
	opacity: 1;
}
.property-des .property-hide{
	opacity: 1;
}
.visa-info-box:hover .property-hide{
	opacity: 0;
}
.visa-info-box:hover .property-info{
	transform: translate(-50%, -35%);
}




/* typeface */
.typeface{
	height: 165px;
	position: relative;
	text-align: center;
	white-space: nowrap;
}
.tf-title{
	font-family: Montserrat;
	font-size: 12px;
	color: #7F929C;
}
.tf-font{
	font-size: 24px;
	line-height: 23px;
	color: #002539;
}
.tf-container{
	width: 100%;
	height: calc(100% - 2px);
	border: 1px solid #DEDEDE;
}

/*.tg-left{
	width: 290px;
	padding: 0 50px 0 13.5px;
	float: left;
}*/
.tg-title{
	font-family: 'Montserrat';
	font-size: 18px;
	color: #1D252D;
	letter-spacing: 0;
	line-height: 22px;
	margin-bottom: 20px;
}
.tg-css{
	font-family: 'Montserrat';
	font-size: 14px;
	color: #1D252D;
	letter-spacing: 0;
	line-height: 19px;
}
.tg-right{
	/*margin-left: 305px;*/
	border: 1px solid #D0D3D4;
	padding: 50px 40px;
}
/*.tg-right h1{
	text-align: center;
}*/
.tg-row{
	margin-bottom: 45px;
}

/* Hover */
.hover-box{
	height: 128px;
	margin-bottom: 30px;
}
.header-hover{
	cursor: pointer;
}
.hover-slash{
	position: absolute;
	left: -10px;
	opacity: 0;
}
.hover-slash-show{
	opacity: 1!important;
}

input{
	font-family: 'lato';
	width: 100%;
	height: 40px;
	padding: 15px;
	font-size: 14px;
	color: #BD9B60;
	border: 1px solid #BD9B60;
}
input:focus{
	border: 1px solid #002539;
	color:#002539;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #BD9B60;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #BD9B60;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #BD9B60;
}

input:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    opacity: 0; /* Firefox */
}
input:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
    opacity: 0;
}
input:focus::-ms-input-placeholder { /* Microsoft Edge */
    opacity: 0;
}

button{
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	width: 122px;
	height: 40px;
	font-size: 14px;
	border: none;
	border-radius: 40px;
	overflow: hidden;
}
.purple-btn{
	color: #fff;
	background-color: #41345E;
}
.white-btn{
    color: #41345E;
	background-color: #E5E5E5;
}

.qrcode{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(255,255,255,0.8);
	display: none;
}

.normal-link{
	color: #41345E;
}
.normal-link:hover{
	color: #41345E;
	text-decoration: none;
}
@keyframes zoom-in {
  0% {
   opacity:  0;
  }
  100% {
  	opacity: 1;
  }
}
.is-animated {
  animation: .6s zoom-in;
}







@media(max-width: 1800px){
	.wrapper{
		max-width: 1200px;
	}
}
@media(max-width: 1366px){
	footer{
		height: 120px;
	}
	.ft-up{
		height: 80px;
	}
	.ft-down{
		height: 40px;
		line-height: 40px;
	}
	.ft-down-left{
		float: left;
	}
	.ft-down-right{
		line-height: 20px;
		height: 40px;
		padding-top: 10px;
	}
	.ft-nav{
		padding-top: 28px;
	}
	.body-content{
		min-height: calc(100vh - 240px);
	}
}
@media(max-width: 768px){
	.wrapper{
		padding: 0 30px;
	}
	.row{
		margin: 0 -7.5px;
	}
	.col-1{
		width: calc(8.333333% - 15px);
		margin: 0 7.5px;
	}
	.col-2{
		width: calc(16.666% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-3{
		width: calc(25% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-4{
		width: calc(33.3333% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-5{
		width: calc(41.6666% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-6{
		width: calc(50% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-7{
		width: calc(58.3333% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-8{
		width: calc(66.6666% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-9{
		width: calc(75% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-10{
		width: calc(83.3333% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-11{
		width: calc(91.6666% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	.col-12{
		width: calc(100% - 15px);
		margin: 0 7.5px;
		float: left;
	}
	#header{
		height: 35px;
	}
	.header-margin{
		height: 80px;
	}
	header{
		padding: 0;
		height: 80px;
	}
	nav{
		display: none;
	}
	.hbg-box{
	    display: block;
	}
	h1{
		font-size: 40px;
		line-height: 56px;
	}
	h2{
		font-size: 20px;
		line-height: 34px;
	}
	h3{
		font-size: 16px;
		line-height: 22px;
	}
	h4{
		font-size: 14px;
		line-height: 18px;
	}
	h5{
		font-size: 14px;
	}
	.p1{
		font-size: 12px;
		line-height: 17px;
	}
	.p2{
		font-size: 10px;
	}
	.pfooter,
	.pheader{
		font-size: 14px;
	}
	.ft-item{
		margin: 0 70px 0 0;	
	}
	
	.body-content{
		min-height: calc(100vh - 200px);
	}
	.visa-item{
		height: 200px;
	}
	.visa-info .visa-des{
		margin-bottom: 25px;
	}
	.property-item{
		height: 250px;
	}
	.property-item h3{
		margin-bottom: 15px!important;
	}
	.property-des{
		margin-top: 0;
	}
	.property-detail{
		margin: 10px 0;
		letter-spacing: 0px;
	}
	.visa-info h4{
		font-size: 12px;
		margin-bottom: 10px;
	}
	.property-detail{
		font-size: 12px;
		line-height: 17px;
	}
	.bottom-blank{
		margin-bottom: 10px;
	}
	section{
		padding: 30px 0;
	}
}

@media(max-width: 550px){
	h1{
		font-size: 30px;
		line-height: 38px;
	}
	h2{
		font-size: 20px;
	}
	h3{
		font-size: 16px;
	}
	h4{
		font-size: 14px;
		font-weight: 400;
		line-height: 18px;
	}
	.ft-item{	
		width: 20%;
		text-align: center;
		margin: 0;
		float: left;
	}
	.visa-info-box:hover .visa-info {
	     transform: unset;
	}
	.img-box:hover .img-mask{
		width: unset;
		opacity: 0;
	}
	.img-box:hover .country-title{
		transform: translate(-50%, -50%);
	}
	.img-box:hover .country-more{
		opacity: 0;
		transform: none;
	}
	.img-box:hover .country-img{
		transform: none;
	}
	.visa-item:hover .visa-img{
		transform: none;
	}
	.visa-info-box:hover .property-hide{
		opacity: 1;
	}
	.visa-info-box:hover .porperty-viewmore{
		opacity: 0;
	}
	.short-line{
		margin: unset;
	}
	.property-detail{
		text-align: left;
	}
	.porperty-viewmore{
		left: 0;
		transform: unset;
	}
	header {
	    padding: 0;
	    height: 60px;
	}
	.header-margin {
	    height: 60px;
	}
	.body-content{
		min-height: calc(100vh - 150px);
	}
	footer{
		height: 90px;
	}
	.ft-up{
		height: 55px;
	}
	.ft-down{
		height: 35px;
		line-height: 30px;
	}
	.ft-down-right{
		line-height: 20px;
		height: 35px;
		padding-top: 5px;
	}
	.ft-nav{
		padding-top: 20px;
	}
	#header{
		height: 25px;
	}
	.m-menu-level2,
	.m-menu{
		width: 237px;
	}
}