html, body{
	height: 100%;
	min-width: 960px;
}
#landing .container{
	background-color: orange;
	height: 100%;
	width: 100%;
	font-family: 'Calvert MT Std';
	overflow: hidden;
	/*color: white;*/
}

#landing .newsblock{
	display: block;
	width: 100%;
	height: 75px;
	position: absolute;
	bottom: 0;
	background-color: rgba(0,0,0,.5);
	text-align: center;
}
#landing .newsblock .newsset{
	display: inline-block;
	width: 960px;
	position: relative;
	margin: auto;
	vertical-align: middle;
}
#landing .newsblock .newsicon{
	width: 45px;
	height: 37px;
	display: inline-block;
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/news_icn.png');
	vertical-align: top;
	margin-top: 15px;
	margin-right: 10px;
}
#landing .newsblock .news{
	position: relative;
	color: white;
	width: 450px;
	display: inline-block;
	text-align: left;
	overflow: hidden;
}

#landing .newsblock .news .new_wrapper {
	height: 60px;
	margin-top: 15px;
	position: relative;
}

#landing .newsblock .news .msg{
	list-style: none;
	font-size: 1.1em;
	height: 75px;
}
#landing .newsblock .news a{
	text-decoration: none;
}
#landing .newsblock .news a .msg {
	color: white;
}
#landing .newsblock .news .msg:after{
	content: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/news_link.png');
	margin-left: 5px;
}

#landing .slideshow{
	display: none;
}
#landing .landing-cover{
	width: 100%;
	height: 800px;
	position: relative;
	overflow: hidden;
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/bkg.jpg');
	background-size: cover;
}
#landing>.footer{
	display: none;
}
.section, .slide{
	background-size: cover;
}

.section{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#landing .nav{
	/* padding: 0;
	margin: 40px 0px; */
	padding: 40px 0;
	margin: 0;
	position: fixed;
	color: black;
	bottom: 0px;
	left: 0;
	z-index: 99999999999;
	width: 100%;
	text-align: center;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+56,0.3+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0, rgba(0,0,0,0.45) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 0,rgba(0,0,0,0.45) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 0,rgba(0,0,0,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=0 ); /* IE6-9 */

}
#landing .nav li{
	display: inline-block;
}


#landing .nav_section {
	width: 11%;
    left: 80px;
    position: relative;
}
#landing .template_nav > .logo{
	display: inline-block !important;
	float: left;
	margin-top: -15px;
	margin-right: 50px;
}
#landing .nav_section:nth-child(6){
	width: 15%;
}
#landing .nav_section:nth-child(9){
	width: 13%;
}
#landing .lang.inner{
	display:  none;
}
#landing .nav .label{
	margin: 0px 4px;
	width: 13px;
	height: 13px;
	transition: margin 0.8s;
	text-align: center;
	position: relative;
	overflow: visible;
	z-index:30;
}

#landing .nav .label #circle{
	width: 13px;
	height: 13px;
	content: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/navigation/navigation_bar-dot.png);
}

#landing .nav .label.active #circle{
	border-radius: 20px;
	background-color: white;
	bottom: -3px;
	-webkit-transition: bottom 0.8s;
	-o-transition: bottom 0.8s;
	transition: bottom 0.8s;
	-webkit-transition-delay: 0;
	-o-transition-delay: 0;
	transition-delay: 0;
}

#landing .nav:hover .label.active #circle{
	position: absolute;
	width: 19px;
	height: 19px;
	background-color: initial !important;
	content:url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/navigation/navigation_bar-sun.png);
	left: -30%;
	/*bottom: -30px;*/
	z-index:20;
	bottom: 23px;
	-webkit-transition-delay: 0.8s;
	-o-transition-delay: 0.8s;
	transition-delay: 0.8s;
}

#landing .nav:hover .label{
	margin:0 60px;
}

#landing .nav #active_sun{
	opacity: 0;
	position: absolute;
	bottom: 0;
	-webkit-transition: bottom 0.8s;
	-o-transition: bottom 0.8s;
	transition: bottom 0.8s;
	-webkit-transition-delay: 0;
	-o-transition-delay: 0;
	transition-delay: 0;
	margin-left: -125%;
}
#landing .nav li .legend{
	width: 136px;
	cursor: pointer;
	padding-top: 25px;
	color: white;
	opacity: 0;
	transition:	opacity 0.8s;
	transition-delay: 0s;

	position: absolute;
	top: 0;
	left: -9999px;
	right: -9999px;
	z-index:10;
}

#landing .nav:hover li .legend{
	opacity: 1;
	transition-delay: 0.5s;
}

#landing .openslide{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -175px;
	margin-top: -195px;
	text-align: center;
	color: white;
	width: 350px;
	height: 350px;
	background: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/circle.png') center center no-repeat;
}
#landing .openslide .msg{
	position: relative;
	/* top: 80px; */
	top: 99px;
}
#landing .openslide .msg h2{
	text-align: center;
	display: inline-block;
	width: 65%;
	font-size: 2.5em;
	line-height: 1.5;
	font-weight: 400;
	margin: .1em 0;
	text-shadow: 0px 0px 26px rgba(0,0,0,0.35);
	color: white;
}
#landing .openslide .msg p{
	width: 70%;
	font-size: 16px;
	display: inline-block;
	text-align: center;
	font-weight: 200;
	margin: 0;
    margin-bottom: .5em;
	text-shadow: 0px 0px 26px rgba(0,0,0,0.35);
}
#landing .openslide .arrow{
	position: relative;
	top: 20px;
	left: 10px;
}


#landing .openslide .values{
	position: absolute;
	font-weight: 200;
	font-size: 1.2em;
	line-height: 1.5;
	text-shadow: 0px 0px 26px rgba(0,0,0,0.35);
}
#landing .openslide .values.c{
	top: 73px;
    left: -10%;
	width: 90px;
	margin-left: -45px;
}
#landing .openslide .values.e{
	top: 70px;
	left: 98%;
}
#landing .openslide .values.h{
	top: 80%;
	left: 103%;
}
#landing .openslide .values.g{
	top: 83%;
	left: -10%;
}
#landing .openslide .values.s{
    top: 284px;
    left: -24%;
	width: 100px;
}

#landing .sperator {
	margin: 0 auto;
	width: 40px;
	border-bottom: 3px solid white;
}
#landing .slide_btn{
	top: 96px;
	position: relative;
	z-index: 100;
}
#landing .slide_btn, #landing .site_btn{
	cursor: pointer;
}

#landing .closebtn{
	cursor: pointer;
	position: fixed;
	display: block;
	width: 100px;
	height: 20px;
	padding: 10px;
	text-align: center;
	background-color: white;
	right: 10px;
	top: 10px;
	z-index: 99999;
}

#landing .template_nav{
	float:none;
	width: 960px;
	/*text-align: center;*/
}

#landing .template_nav .title{
	text-align: left;
}

#landing .General_Education_Programme .title{
	width: 202px;
}

#landing .ori{
	position: absolute;
    bottom: 75px;
    left: 50%;
    font-size: 23px;
    width: 100%;
    left: 0;
    padding: 13px 0;
    /* background-color: rgba(57, 117, 123, 0.78); */
    text-align: center;
    /* -webkit-transform: translateX(-55%); 
    -ms-transform: translateX(-55%);
    -o-transform: translateX(-55%);
    transform: translateX(-55%);*/
}
#landing .ori a{
	color: white;
	font-size: 1em;
}
#landing .ori img{
	width: 34px;
	height: auto;
	margin-right: 1em;
}

/*====================================
=            Mouse Scroll            =
====================================*/
#landing .mouse-wrap{
	/*width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);*/
	position: absolute;
	z-index: 999;
}
#landing .mouse-scroll{
	position: absolute;
	top: 80%;
	left: 50%;
}

#landing .mouse-scroll .desc{
	color: #87AB62;
	margin-left: -60px;
	margin-top: 10px;
}
#landing .mouse-scroll span
{
	position: relative;
	display: block;
	width: 5px;
	height: 5px;
	-ms-transform: rotate(45deg); /* IE 9 */
	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	transform: rotate(45deg);

	border-right: 2px solid #87AB62;
	border-bottom: 2px solid #87AB62;
	margin: 0 0 3px 6px;
}

#landing .mouse-scroll .unu
{
	margin-top: 6px;
}

#landing .mouse-scroll .unu, .doi, .trei
{
	-webkit-animation: mouse-scroll 1s infinite;
	-moz-animation: mouse-scroll 1s infinite;
}

#landing .mouse-scroll .unu
{
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-webkit-animation-direction: alternate;
}

#landing .mouse-scroll .doi
{
	-webkit-animation-delay: .2s;
	-moz-animation-delay: .2s;
	-webkit-animation-direction: alternate;
}

#landing .mouse-scroll .trei
{
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-webkit-animation-direction: alternate;
}

#landing .mouse-scroll .mouse
{
	height: 21px;
	width: 14px;
	border-radius: 10px;
	transform: none;
	border: 2px solid #87AB62;
	top: 170px;
}

#landing .mouse-scroll .wheel
{
	height: 5px;
	width: 2px;
	display: block;
	margin: 5px auto;
	background: #87AB62;
	position: relative;
}

#landing .mouse-scroll .wheel
{
	-webkit-animation: mouse-wheel 1.2s ease infinite;
	-moz-animation: mouse-wheel 1.2s ease infinite;
}

@-webkit-keyframes mouse-wheel
{
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateY(6px);
		-ms-transform: translateY(6px);
		transform: translateY(6px);
	}
}

@-moz-keyframes mouse-wheel
{
	0% { top: 1px; }
	50% { top: 2px; }
	100% { top: 3px;}
}

@-webkit-keyframes mouse-scroll {

	0%   { opacity: 0;}
	50%  { opacity: .5;}
	100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@keyframes mouse-scroll {

	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}


/*=====  End of Mouse Scroll  ======*/


.cover{
	width: 100%;
	height:960px;
	top:0;
	left:0;
	overflow: hidden;
	position: relative;
}
.cover-img,
.cover-img-blur{
	width:100%;
	height: 100%;
	position: absolute;
	background-size: cover;
	background-repeat: none;
}

.knowmore{
	border: 2px solid white;
	border-radius: 5px;
	width: 100px;
	height: 20px;
	padding: 10px;
	font-family: 'Calvert MT Std';
	font-weight:  200;
	position: relative;
	margin: 2em auto 0 auto;
	color: white;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
}
.conclusion a{
	text-decoration: none;
}
.conclusion a:hover .knowmore{
	background-color: white;
}

#creativity .cover-img{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/creativity/bkg.jpg);
}
#creativity .cover-img-blur{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/creativity/blur_bkg.jpg);
}
#enter .cover-img{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/enter/bkg.jpg);
}
#enter .cover-img-blur{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/enter/blur_bkg.jpg);
}
#healthy .cover-img{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/healthy/bkg.jpg);
}
#healthy .cover-img-blur{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/healthy/blur_bkg.jpg);
}

#green .cover-img{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/bkg.jpg);
}
#green .cover-img-blur{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/blur_bkg.jpg);
}
#social .cover-img{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/social/bkg.jpg);
}
#social .cover-img-blur{
	background-image: url(/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/social/blur_bkg.jpg);
}


#creativity .cover{
	/*background-color: #c0b65d;*/
}
#creativity .gradient{
	/* Fallback (could use .jpg/.png alternatively) */
	background-image: -webkit-linear-gradient(180deg, #c0b65d 10%, #7eb9cc 90%); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(180deg, #c0b65d 10%, #7eb9cc 90%); /* FF3.6+ */
	background-image:     -ms-linear-gradient(180deg, #c0b65d 10%, #7eb9cc 90%); /* IE10 */
	background-image:      -o-linear-gradient(180deg, #c0b65d 10%, #7eb9cc 90%); /* Opera 11.10+ */
	background-image:         linear-gradient(180deg, #c0b65d 10%, #7eb9cc 90%); /* W3C */
	background-color: #c0b65d;

}
#creativity .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/creativity/mission-icon.png');
}
#creativity .conclusion a:hover .knowmore{
	color:#c0b65d;
}


#enter .cover{
	background-color: #7eb9cc;
}
#enter .gradient{
	/* Fallback (could use .jpg/.png alternatively) */
	background-image: -webkit-linear-gradient(180deg, #7eb9cc 10%, #70ba95 90%); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(180deg, #7eb9cc 10%, #70ba95 90%); /* FF3.6+ */
	background-image:     -ms-linear-gradient(180deg, #7eb9cc 10%, #70ba95 90%); /* IE10 */
	background-image:      -o-linear-gradient(180deg, #7eb9cc 10%, #70ba95 90%); /* Opera 11.10+ */
	background-image:         linear-gradient(180deg, #7eb9cc 10%, #70ba95 90%); /* W3C */
	background-color: #7eb9cc;

}
#enter .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/enter/mission-icon.png');
}
#enter .conclusion a:hover .knowmore{
	color:#7eb9cc;
}

#healthy .cover{
	background-color: #6fa2bf;
}
#healthy .gradient{
	/* Fallback (could use .jpg/.png alternatively) */
	background-image: -webkit-linear-gradient(180deg, #6fa2bf 10%, #adc36d 90%); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(180deg, #6fa2bf 10%, #adc36d 90%); /* FF3.6+ */
	background-image:     -ms-linear-gradient(180deg, #6fa2bf 10%, #adc36d 90%); /* IE10 */
	background-image:      -o-linear-gradient(180deg, #6fa2bf 10%, #adc36d 90%); /* Opera 11.10+ */
	background-image:         linear-gradient(180deg, #6fa2bf 10%, #adc36d 90%); /* W3C */
	background-color: #6fa2bf;

}
#healthy .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/healthy/mission-icon.png');
}
#healthy .conclusion a:hover .knowmore{
	color:#6fa2bf;
}

#green .cover{
	background-color: #adc36d;
}
#green .gradient{
	/* Fallback (could use .jpg/.png alternatively) */
	background-image: -webkit-linear-gradient(180deg, #adc36d 10%, #70ba95 90%); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(180deg, #adc36d 10%, #70ba95 90%); /* FF3.6+ */
	background-image:     -ms-linear-gradient(180deg, #adc36d 10%, #70ba95 90%); /* IE10 */
	background-image:      -o-linear-gradient(180deg, #adc36d 10%, #70ba95 90%); /* Opera 11.10+ */
	background-image:         linear-gradient(180deg, #adc36d 10%, #70ba95 90%); /* W3C */
	background-color: #adc36d;

}
#green .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/mission-icon.png');
}
#green  .conclusion a:hover .knowmore{
	color:#adc36d;
}

#social .cover{
	background-color: #70ba95;
}
#social .gradient{
	/* Fallback (could use .jpg/.png alternatively) */
	background-image: -webkit-linear-gradient(180deg, #70ba95 10%, #a6bf61 90%); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(180deg, #70ba95 10%, #a6bf61 90%); /* FF3.6+ */
	background-image:     -ms-linear-gradient(180deg, #70ba95 10%, #a6bf61 90%); /* IE10 */
	background-image:      -o-linear-gradient(180deg, #70ba95 10%, #a6bf61 90%); /* Opera 11.10+ */
	background-image:         linear-gradient(180deg, #70ba95 10%, #a6bf61 90%); /* W3C */
	background-color: #70ba95;

}
#social .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/social/mission-icon.png');
}
#social .conclusion a:hover .knowmore{
	color:#70ba95;
}


.elem{
	opacity: 0;
}
.elem-scale{
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

#enter .elem.mountain{
	/*filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';*/
	height: 45%;
	/*max-height: 350px;*/
	min-height: 300px;
	position: absolute;
	bottom: 0;
}

#enter .elem.mountain_zoom{
	position: absolute;
	bottom: 0;
	width: 110%;
	height: 30%;
	
}
#enter .elem.mountain_zoom img{
	position: absolute;
}
#enter .elem.mountain_zoom .mountain_l{
	width: 100%;
	bottom: 0;
}


#enter .elem.mountain_zoom .spot img{
	position: absolute;
}

#enter .elem.mountain_zoom .grid{
	width:100%;
	height: 413px;
	position: absolute;
	bottom: 0;
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/enter/ent-grid.png');
	background-repeat: repeat-x;
}


#enter .elem.mountain_zoom .spot{
	position: absolute;
	width: 351px;
	/*background-color: red;
	opacity: .9;*/

}
#enter .elem.mountain_zoom .spot.s1{
	/*left: 320px;
	top: -190px;*/
	left: 8%;
	/*top: -50%;*/
	bottom: 40px;
}
#enter .elem.mountain_zoom .spot.s2{
	left: 35%;
    top: -317px;
}
#enter .elem.mountain_zoom .spot.s3{
    left: 60%;
    top: -282px;
}
#enter .elem.mountain_zoom .spot.s4{
   left: 80%;
    top: -311px;
}
#enter .elem.mountain_zoom .spot h3{
	color: white;
	margin: 0;
	opacity: 0;
}
#enter .elem.mountain_zoom .spot .content{
	position: relative;
	width: 351px;
	height: 325px;
	margin-bottom: 30px;
	cursor: pointer;
	transform: matrix(0.5, 0, 0, 0.5, 0, 0);
	transform-origin: left bottom;
}

#enter .elem.mountain_zoom .spot .content .pic{
	position: absolute;
	bottom: 0px;;
}
#enter .elem.mountain_zoom .spot .content .coner{
	position: absolute;
	bottom: 10px;
	right: 9px;
}
#enter .elem.mountain_zoom .spot .dot{
	position: relative;
    left: -5px;
    top: 5px;

}

#enter .spot .line{
	width: 1px;
	height: 0px;
	background-color: white;
	position: absolute;
	bottom: 0;
}

#enter .elem.mountain_zoom .ent-path{
	top: 0;
	left: 90px;
}

#enter .ent-path,
#enter .ent-path img{
	position: absolute;
	bottom: 0;
	width: 110%;
	left: 20%;
	height: 25%;
}
#enter .sunlight-box{
	top:25%;
	left: 23%;
}
#enter .keyvisual{
	position: absolute;
	left:60%;
	top: 47%;
}
#enter .elem.key-walker{
	position: absolute;
	top: 0;
}
/*#enter .elem.sunlight-box{
	position: absolute;
	top: 0;
	left: 0;
	}*/

	.headline{
		/*opacity: 1;*/
		color: white;
		position: absolute;
		width: 45%;
		display: block;
		text-align: right;
		top: 43%;
	}
	.headline h1{
		text-align: right;
		position: relative;
		font-size: 3.2em;
		line-height: 1.25;
		margin:  0 ;
	}
	.headline p{
		margin: 0 ;

		/*font-size: 13px;*/
	}
	.text h2{
		margin: 0 ;
	}
	.text p{
		margin: 0;
		font-size: 1.2em;
	}

	.gradient{
		width: 100%;
		height:960px;
		overflow: hidden;
		position: relative;
	}
	.gradient .icon{
		width: 180px;
		height: 156px;
		position: relative;
		margin:0 auto 2em auto;
		background-repeat: no-repeat;
	}
	.conclusion{
		color: white;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);

	}
	.conclusion h1{
		margin: 0;
	}

	.sunlight-box{
		position: absolute;
		/* width: 100%; */
	}
	.sunlight-box .sunlight{
		position: relative;
		width: 480px;
		height: 480px;
		left: 0;
		top:0;
		overflow: hidden;
	}
	.sunlight-box .sunlight-bg{
		position: absolute;
		width: 184px;
		height: 184px;
		top: 142px;
    	left: 146px;
		overflow: hidden;
	}
/*==================================
=            Creativity            =
==================================*/

#creativity .keyvisual{
	position: absolute;
	top:30%;
	width: 100%;
	min-width: 500px;
}
#creativity .keyvisual .rope{
	position: relative;
	left: 0;
	top: 0;
	width:100%;
	height: 100%;
	overflow: hidden;
}
#creativity .sunlight-box{
	position: absolute;
	left: 0;
}
#creativity .keyvisual .clip{
	position: relative;
	left: 60%;
	top: -100px;
}
#creativity .keyvisual .clip img{
	position: absolute;
}
#creativity .keyvisual .clip img.clip-open{
	
}
#creativity .cloth{
	position: absolute;
	top:100%;
	left: 50%;
	/*width: 560px;*/
	margin-left: -280px;
	height: 50%;
}
#creativity .cloth .t-shirt{
	position: absolute;
	/*width: 100%;*/
	height: 100%;
	/*min-width: 400px;
	max-width: 558px;*/
	min-height: 500px;
	left: 50px;
	top: 10%;
}
#creativity .cloth .t-shirt.glow{
	opacity: 0;
}
#creativity .cloth .cloth-bg{
	position: relative;
	/*top: -50px;
	left: 50px;*/
	width: 550px;
	margin-left: 10%;
	margin-right: 10%;
	margin-top:-5%;

}
#creativity .elem a{
	color: #6cce5c;
}
#creativity #clab-intro h1{
	margin: 1em 0;
}
#creativity #clab-intro{
	position: relative;
	width: 400px;
	top: 0;
	right: 0;
	left: 0;
	bottom:  0;
	margin: auto;
	text-align: center;
	background-color: rgba(0,0,0,.7);
	padding:  2em 1.2em 4em 1.2em;
}
#creativity #clab-intro p{
	font-size: 14px;
}
#creativity #clab{
    position: relative;
    width: 480px;
    top: -40px;
    left: 13%;
    font-size: 15px;
    line-height: 2.2em;
	margin: auto;
	text-align: left;
}
#creativity .mindmap{
	position: relative;
	width: 80%;
	left: 50%;
	top: 50%;
	margin-left: -40%;
	margin-top: -25%;
	max-width: 1200px;
	min-width: 500px;
	/*top: 10%;
	left: 50%;
	margin-left: -622px;*/
	/*background-position: 20% 0;
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/creativity/cloth_mindmap.png');
	background-size: cover;
	width:100%;
	height: 100%;*/
}
#creativity .mindmap img{
	width:100%;
}
#creativity .mindmap .cloth-mindmap{

	width:100%;
	height: 100%;
}

#creativity .drop{
	position: absolute;
	left: -80px;
	top: 0;
}
#creativity .phone{
	position: absolute;
	left: 70%;
	bottom: 20%;
	width: 144px;
	height: 175px;
}
#creativity .text{
	position: absolute;
	color: white;
}
#creativity #daily-problem{
	left: 5%;
	top:35%;
	width: 300px;
}
#creativity #alert.text{
	left: 69%;
	bottom: 8%;
}

#creativity .creative{
	position: absolute;
	left: 12%;
	top: 15%;
}
/*=====  End of Creativity  ======*/

/*===============================
=            Healthy            =
===============================*/
#healthy .keyvisual{
	position: absolute;
	top: 0;
	left: 0;
	top: 20%;
	left: 50%;
}

#houses{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
#healthy #vow{
	width: 650px;
	height: 100%;
	position: absolute;
	top: 65%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
}
#healthy #vow img{
	top: 30%;
    display: inline-block;
    margin: 0 15px 30px 15px;
}
#healthy #vow div{
	width: 30%;
    display: inline-block;
    vertical-align: top;
    color:  white;
}
#healthy #vow div .title{
	font-weight: bold;
	text-decoration: underline;
	display: inline-block;
	margin-bottom: 5px;
    font-size: 1.2em;
    height: 65px;
}
#healthy .house{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background-attachment : fixed;
	background-color: #6fa2bf;
}
#healthy .house.h1{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/healthy/white-house-01.png');
}
#healthy .house.h2{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/healthy/white-house-02.png');
}
#healthy .house.h3{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/healthy/white-house-03.png');
}
#healthy #houses{

}
#houses #h3{
	background-attachment : local;
}

#healthy .more{
	position: absolute;
}
#healthy .more .more-btn{
	cursor: pointer;
}
#healthy .more .intro{
	position: relative;
	background-color: #ebf5f0;
	color: #97ad6f;
	width: 300px;
	min-height: 100px;
	padding: 10px;
	left: 50px;
	top: -30px;
}
#healthy .more .intro img{
	width: 100%;
}
#healthy .house.h1 .more{
    left: 70%;
	top: 50%;
}
#healthy .house.h1 .more.p2{
	left: 43%;
    top: 38%;
}
#healthy .house.h1 .more.p3{
	left: 30%;
    top: 52%;
}
#healthy .house.h2 .more{
	left: 30%;
	top: 50%;
}

#healthy .house.h2 .more.p2{
	left: 35%;
	top: 30%;
}
#healthy .house.h2 .more.p3{
    left: 56%;
    top: 59%;
}
#healthy .house.h2 .more.p4{
	left: 53%;
	top: 40%;
}

#healthy .house.h3 .more{
	left: 60%;
	top: 50%;
}
#healthy .more .intro h2,
#healthy .more .intro p{
	margin: 0;
}
#healthy .more .intro h2{
	line-height: 1.3em;
    margin-bottom: .3em;
}
#healthy .text{
	position: absolute;
	width: 500px;
	top: 10%;
	left: 50%;
	text-align: center;
	color: white;
	margin-left: -250px;
}
#healthy .text h2{
	font-size: 2.5em;
}
#healthy .text p{
	font-size: 1em;
}
/*=====  End of Healthy  ======*/


/*=============================
=            Green            =
=============================*/

#plants{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	/*overflow: scroll;*/
	/*padding-right: 2px;*/
}

#green .keyvisual{
	position: absolute;
	top: 0;
	left: 0;
	top: 20%;
}
#plants .plant{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background-attachment : fixed;
	background-color: #adc36d;
}
.plant.p1{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_steps-01.png');
}
.plant.p2{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_steps-02.png');
}
.plant.p3{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_steps-03.png');
	background-color: purple;
}
.plant.p4{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_steps-04.png');
}
.plant.p5{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_steps-05.png');
}
.plant.p6{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_steps-06.png');
}
#plants #p6{
	background-attachment : local;
}
#green .chart{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
#green .chart .node{
	position: absolute;
	width: 350px;
	height: 80px;
	text-align: center;
}
#green .chart .node .icon{
	position: relative;
	width: 100px;
	height: 100px;
	margin: auto;
}
#green .chart .node h2,
#green .chart .node p{
	
}
#green .chart .node h2{
	font-size: 1.4em;
	margin-bottom: 0;
}
#green .chart .node p{
	font-size: .7em;
	margin-top: .5em;
}
#green .chart .farmers{
	top: 20%;
	left: 50%;
	margin-left: -175px;
}
#green .chart .farmers .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_icon-farmer.png');
}
#green .chart .farmers{
	top: 10%;
	left: 50%;
	margin-left: -175px;
}
#green .chart .seeding .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_icon-seeding.png');
}
#green .chart .seeding{
	top: 40%;
	left: 82.5%;
	margin-left: -175px;
}
#green .chart .planting .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_icon-planting.png');
}
#green .chart .planting{
	bottom: 20%;
	left: 50%;
	margin-left: -175px;
	margin-top: -150px;
}
#green .chart .sharing .icon{
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_icon-salad.png');
}
#green .chart .sharing{
	top: 40%;
	left: 18.5%;
	margin-left: -175px;
}
#green .arrow{
	position: absolute;
	background-image: url('/20241031230201oe_/https://wys.cuhk.edu.hk/cms/wp-content/themes/wysc/img/landing/green/plant_arrow.png');
	width: 190px;
	height: 200px;
}
#green .arrow.top.left{
	left: 20%;
	top: 20%;
}
#green .arrow.top.right{
	left: 80%;
	top: 20%;
	margin-left: -160px;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
#green .arrow.bottom.left{
	left: 35%;
	top: 65%;
	margin-left: -160px;
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}
#green .arrow.bottom.right{
	left: 80%;
	top: 65%;
	margin-left: -160px;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
#green .sunlight-box{
	position: absolute;
	top: 20%;
	right: 10%;
}
/*=====  End of Green  ======*/

/*==============================
=            Social            =
==============================*/

#social .keyvisual{
	position: absolute;
	top: 0;
	left: 0;
	top: 20%;
}

#social .hover,
#social .land-box{
	/*position: absolute;
	width: 1090px;

	top: 70%;
	left: 50%;
	margin-left: -540px;
	background-color: yellow;*/
	position: absolute;
	margin: auto;
	left: 50%;
	margin-left: -520px;
	top: 50%;
	text-align: center;
	/*left: 50%;
	margin-left: -322px;*/	
}
#social .hover .land,
#social .land-box .land{
	/*position: relative;
	top: -50%;*/
	/*position: absolute;*/
	position: relative;
	overflow: hidden;
}

#social .hover .land{
	opacity: 0;
}

#social .hover .land .ground,
#social .land-box .land .ground{
	border: 2px solid white;
	border-radius:50%;
	cursor: pointer;
	/*width: 100%;
	height: 100%;*/
}


#social .land-box .deem
{
	position: absolute;
	width: 100%;
	height: 100%;
	border: none;
	background-color: white;
	opacity: 0;
	border-radius:50%;
}
#social .land-box .wyso .deem{
	width: 639px;
	left: 50%;
	margin-left: -320px;
}
#social .land-box .committee .deem{
	width: 335px;
	left: 50%;
	margin-left: -168px;
}

#social .hover .land.society,
#social .land-box .land.society{
}
#social .hover .land.committee,
#social .land-box .land.committee{
	top: -300px;

}
#social .hover .land.wyso,
#social .land-box .land.wyso{
	top: -200px;
}

#social .land-box .floor{
	position: absolute;
	left: 50%;
	top: 100px;
	margin-left: -546px;
}
#social .people{	
	position: absolute;
	left: 55%;
	margin-left: -376px;
	top: 38%;
	width: 70%;
}
#social .spot{
	width: 300px;
	padding: 0 15px;
}
#social .spot h3,
#social .spot p{
	color:white;
	margin: 0;
}

#social .spot h3{
	font-size: 1.5em;
}
#social .spot p{
	font-size: .9em;
	margin: .5em;
}
#social .spot.s1{
	position: absolute;
	left: 60%;
	top: 14%;
	height: 480px;
	text-align: left;
}
#social .spot.s2{
	position: relative;
	left: 20%;
	top: 100px;
	height: 480px;
	text-align: right;
}
#social .spot.s2{
	position: relative;
	left: 20%;
	top: 100px;
	height: 480px;
	text-align: right;
}
#social .spot.s0{
	position: absolute;
	left: 65%;
	top: 64%;
	height: 300px;
	text-align: left;
}
#social .spot.s0 h3{
	position: absolute;
	bottom: 70px;
}
#social .spot.s0 p{
	position: absolute;
	bottom: 0;
}
#social .spot .line{
	position: absolute;
	bottom: 0;
	height: 0;
	width: 1px;
	background-color: white;
}
#social .spot.left .line{7
	left:0;
}
#social .spot.right .line{
	right: 0;
}
#social .spot.s0 .line{
}
#social .content{
}
#social .s{
    position: absolute;
    width: 650px;
    left: 50%;
    margin-left: -325px;
    top: 20%;
    text-align: center;
}
#social .s img{
	margin-bottom: 1em;
}
#social .s h2{
	font-size: 22px;
    margin: 1.2em 0;
}
#social .s .text{
	color:  white;
	width: 100%;
}
/*=====  End of Social  ======*/

.clndr .ical-btn{
	color: white;
	padding: 1.1em 1em 1em 1em;
	font-size: 14px;
	margin-top: 4px;
	background-color: #d2ce6d;
	cursor: pointer;
	border: 1px solid #aba85b;
}
.clndr .ical-btn:active{
	background-color: #cdc96a;
	border-top: 2px solid #a19e56;
	border-bottom: 1px solid #d2cf7b;
}
.clndr .ical-btn .fas{
	margin-right: 1em;
}
.clndr .sync-intro{
	position: absolute;
    width: 450px;
    left: 50%;
    padding: 1em;
    margin-left: -225px;
    top: 24%;
    background-color: white;
    border-radius: 5px;
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.3);
    box-shadow: 3px 3px 5px rgba(0,0,0,.1);
    opacity: 0;
    visibility: hidden;
}
.clndr .sync-intro h2{
	margin: 0;
	color: #d3ce6d;
}
.clndr .sync-intro p{
	color: #8c8484;
	margin: 0;
}
.clndr .sync-intro p.dl{
	margin-top: 5px;
}
.clndr .sync-intro .close-btn{
	font-size: 28px;
	position: absolute;
	right: .5em;
	top: 10px;
	cursor: pointer;
}
.clndr .sync-intro .linkbox{
	position: relative;
}
.clndr .sync-intro .textbox{
	display: table;
	width: 100%;
	height: 50px;
	padding-left: 1em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	border: 1px solid #ddd;
	text-align: left;
	margin-top: .5em

}
.clndr .sync-intro .clip-btn p{
	display: table-cell;
	vertical-align: middle;
}
.clndr .sync-intro .clip-btn{
	position: absolute;
	right: 10px;
	top: 17px;
	width: 30px;
	height: 30px;
	font-size: 22px;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
}
.clndr .sync-intro .clip-btn i{
	color: #ccc;
}
.clndr .sync-intro .clip-btn i:active{
	color: #aaa;
}
.clndr .sync-intro a{
	color: #7eb7c9;
	text-decoration: none;
}
.clndr .sync-intro a:hover{
	text-decoration: underline;
}

.clndr .sync-intro .option-wrapper .option{
	display: inline-block;
	padding: .5em 0em .2em 0;
	background-color: #ddd;
	color: white;
	width: 50%;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}
.clndr .sync-intro .option-wrapper .option:last-child{
	margin-left: -6px;
}
.clndr .sync-intro .option-wrapper .option.selected{
	background-color: #7eb7c9;
}
.unsubscribe-info{
	display: none;
}