#introbox{
	position: relative;
	width:100%;
	background-image: url(imgs/intoro_bg.jpg);
	background-size:contain;
	background-repeat: no-repeat;
	background-color:#184618;
	background-position: center top;
}
#introbox:before{
	content:"";
	display: block;
	padding-top:66.8%;
}

#introbox a{
	position: absolute;
	display: block;
	background-size:contain;
	background-repeat: no-repeat;
}
#introbox a:before{
	content:"";
	display: block;
}

#introbox #intro2top{
	background-image: url(imgs/top-logo.png);
	width:17%;
	left:32.9%;
	top:0.5%;

	z-index:2;
}
#introbox #intro2top:before{
	padding-top:54.7%;
}


#introbox #intro2idea{
	background-image: url(imgs/top-to-send.png);
	width:44%;
	left:25.9%;
	top:5%;
}
#introbox #intro2idea:before{
	padding-top:68.3%;
}
#introbox #intropickup{
	background-image: url(imgs/top-monthry.png);
	width:38.4%;
	left:30.8%;
	top:50.7%;
}
#introbox #intropickup:before{
	padding-top:19.2%;
}
#introbox #intro2wpotal{
	background-image: url(imgs/top-open-wp.png);
	width:24%;
	left:37.2%;
	top:73.1%;
}
#introbox #intro2wpotal:before{
	padding-top:65.2%;
}
#introbox #intro2wpotal.wpnew{
	background-image: url(imgs/top-open-wp-new.png);
}


@media screen and (max-width:480px){
	#introbox{
		background-size: 205%;
	}
	#introbox:before{
		padding-top:137.1%;
	}

	#introbox #intro2top{
		width:34.5%;
		left:15%;
		top:0.5%;
	}
	

	#introbox #intro2idea{
		width:90.5%;
		left:0.3%;
		top:4.7%;
	}
	#introbox #intro2idea:before{
		padding-top:68.3%;
	}
	#introbox #intropickup{
		width:78.9%;
		left:10.3%;
		top:50.4%;
	}
	#introbox #intropickup:before{
		padding-top:19.2%;
	}
	#introbox #intro2wpotal{
		width:49.2%;
		left:24.0%;
		top:73.1%;
	}
	#introbox #intro2wpotal:before{
		padding-top:65.2%;
	}
	

}


#topcarousel{
	background-color:#184618;
	padding:1% 0% 3%;
	position:relative;
/*
	overflow-x:hidden;
*/
}

#topcarousel:before{
	content:"";
	display:block;
	position:absolute;
	bottom:-1%;
	width:10%;
	z-index:10;
	padding-top:2.5%;
	left:45%;
	background-image:url(imgs/topic-under.png);
	background-size: contain;
	background-repeat: no-repeat;
}
#topcarousel:after{
	content:"";
	display:block;
	background-color:#b28850;
	position:absolute;
	padding-top:2%;
	bottom:0%;
	width:100%;
}

#topcarouselmask{
	width:100%;
	overflow-x:hidden;
}

#topcarouselbox{
/*
	display:flex;
	width:228.5714285714286%;
*/
	white-space:nowrap;
	transform: translate3d(-25.3%, 0px, 0px);
	position:relative;
	-webkit-transition: transform 0.5s linear;
	   -moz-transition: transform 0.5s linear;
	    -ms-transition: transform 0.5s linear;
	     -o-transition: transform 0.5s linear;
	        transition: transform 0.5s linear;
}
#topcarouselbox.loopmode{
	-webkit-transition: none;
	   -moz-transition: none;
	    -ms-transition: none;
	     -o-transition: none;
	        transition: none;
}

#topcarousel li{
	position:relative;
	display:inline-block;
	margin:0% 0.40%;
	
	width:29.1%;
	border:2px solid #000000;
	border-radius: 5%/10%;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
/*
	overflow: hidden;
	flex:1;
*/
}
#topcarousel li:before{
	content:"";
	display:block;
	padding-top:56.25%;
}

#topcarousel li.waitload{
	border-color:transparent;
}
#topcarousel li.tovideo,
#topcarousel li.toimage{
	cursor:pointer;
}

#topcarousel li a{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	border-radius: 5%/10%;
	overflow:hidden;
}

#topcarousel li:after{
	content:"";
	display:block;
	position:absolute;
	width:10%;
	padding-top:10%;
	background-repeat:no-repeat;
	background-size:contain;
	top:1.5%;
	right:1%;
	pointer-events: none; 
}
#topcarousel li.icsend:after{
	background-image:url(imgs/icsend.png);
}
#topcarousel li.iccontent:after{
	background-image:url(imgs/iccontent.png);
}
#topcarousel li.icvideo:after{
	background-image:url(imgs/icvideo.png);
}

#topcarousel li>.newicon,
#topcarousel li>.hoticon{
	display:block;
	position: absolute;
	width:24.0625%;
	cursor: pointer;
	user-select: none;
	pointer-events: none; 
	top:-2%;
	/* left:1.5625%;*/
	left:0%;
}
#topcarousel li>.newicon:before{
	background-image: url(imgs/newicon.png);
}
#topcarousel li>.hoticon:before{
	background-image: url(imgs/hoticon.png);
}

#topcarousel li>.newicon:before,
#topcarousel li>.hoticon:before{
	content:"";
	display:block;
	padding-top:28.57142857142857%;
	background-repeat: no-repeat;
	background-size: contain;
}

#topenqbanner:hover,
#topbannersbox li:hover,
#topcarousel li:hover{
	-webkit-filter: brightness(1.1);
	   -moz-filter: brightness(1.1);
	    -ms-filter: brightness(1.1);	
	     -o-filter: brightness(1.1);
	        filter: brightness(1.1);
}


#topcarousel li:hover>.newicon,
#topcarousel li:hover>.hoticon{
	opacity: 0;
}


#topcarousel button{
	border:0;
	top:0;
	position:absolute;
	width:5%;
	background-color:rgba(24,70,24,0.5);
	height:91%;
	color:#ff9b87;
	font-weight:bold;
	font-size:3vw;
	text-align:center;
	cursor:pointer;
}
#topcarousel button.exhover{
	background-color:rgba(24,70,24,1.0);
	color:#ffff00;
	font-size:4vw;
}

button#topcarouselback{
	left:0;
	text-align:left;
}
button#topcarouselnext{
	right:0;
	text-align:right;
}
@media screen and (max-width:480px){
	#topcarousel ul{
		transform: translate3d(-82%, 0px, 0px);
	}
	#topcarousel li{
		margin:0% 3%;
		width:80.15%;
	}
	#topcarousel button{
		width:9%;
	}
	
	#topcarousel button{
		font-size:5vw;
	}
	#topcarousel button.exhover{
		font-size:6vw;
	}
}
@media screen and (max-width:480.001px) and (max-width:1200px) {
	
}
@media screen and (min-width:1200.001px) {
	#topcarousel button{
		font-size:38px;
	}
	#topcarousel button.exhover{
		font-size:41px;
	}
}

#topbanners{
	background-color:#9c2881;
	background-image:url(imgs/banner-bg.jpg);
	background-size: 20%;
}

#topbannersbox{
	text-align:center;
	padding-top:0.3%;
}

#topbannersbox li{
	position:relative;
	display:inline-block;
	border-radius: 5% / 20%;
	overflow:hidden;
	width:48%;
	margin:0.3% 0.4%;
	background-size:cover;
	background-position: center center;
	background-repeat:no-repeat;
	border:2px solid #000000;
}
#topbannersbox li:before{
	display:block;
	content:"";
	padding-top:23.5%;
}
#topbannersbox li a{
	display:block;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
#topenqbanner{
	width:100%;
	border-top:2px solid #0b1f56;
	border-bottom:2px solid #0b1f56;
	background-color: #0b1f56;
	cursor:pointer;
	position: relative;
}
#topenqbanner:before{
	content:"";
	display:block;
	padding-top:3.768844221105528%;
	background-image:url(imgs/enq-banner.png);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: cover;
}


@media screen and (max-width:480px){
	#topbannersbox li{
		width:100%;
		border:0;
		border-radius:0;
		margin:0;
		border-top:2px solid #0b1f56;
	}
	#topenqbanner:before{
		/* padding-top:7.922535211267606%;*/
		padding-top:8.3%;
		background-position: 14.5% 0%;
	}
	
	#topbannersbox{
		padding-top:0%;
	}
	
	#topcarousel{
		padding:1% 0% 5%;
	}
	#topcarousel:before{
		width:16%;
		padding-top:4%;
		left:42%;
	}
	#topcarousel:after{
		padding-top:3%;
	}

	#topcarousel button{
		height:94%;
	}
		

}