@charset "UTF-8";

/* Common Elements */
.tbl{display:table;}
.tbl_r{display:table-row;}
.tbl_c{display:table-cell;}
.clear{clear:both;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.ac{text-align:center;}
.al{text-align:left;}
.ar{text-align:right;}
.vc{vertical-align:middle;}
.row.vc{display:flex; align-items:center;}
.vb{vertical-align:bottom;}
.vt{vertical-align:top;}
.np{padding:0;}
.nm{margin:0;}
.center{ margin-left:auto; margin-right:auto; }
.hideText{ font:1px 'AdobeBlank'; }
.wf{color:#FFF;}
small.ref{ color:#999; font-size:12px; font-style:italic; }
small.ref:before{content:'\2014 ';}

.inTable{width:100%; border-collapse:separate; border-spacing:0 6px;}
.inTable.tight{border-spacing:0 2px;}
.inTable th, .inTable td{border-width:1px; border-style:solid; overflow:hidden; vertical-align:middle;}
.inTable th{color:#FFF; border-radius:10px 0 0 10px; text-align:right;}
.inTable th label, .inTable th span{display:block; padding:5px 10px 5px 30px; white-space:nowrap; height:100%;}
.inTable td{ margin:0; padding:0; border-radius:0 10px 10px 0; }
.inTable input, .inTable textarea{display:block !important; width:100%; resize:vertical; outline:none;border:none; padding:2px 10px; height:110%; }

.flex-row.row {
	display: flex;
	flex-wrap: wrap;
	position:relative;
}
.flex-row.row > [class*='col-'] {
	display: flex;
	flex-direction: column;
	position:relative;
}

.nb{border:0;}
.brd1{ border:1px solid red; }
.brd2{ border:1px solid blue; }
.brd3{ border:1px solid green; }
.userBtn {padding:5px 20px; text-align:center; border-radius:10px 0; border-width:2px; border-style:outset; color:#FFF; outline:none; -webkit-user-select:none; user-select:none; margin:10px 0;}
.userBtn:active{ border-style:inset;}

.c1{background:rgba(240, 83, 48,1);} /* red */ /* rgb(252, 220, 213) */
.c2{background:rgba(249,158, 41,1);} /* orange */ /* rgb(255, 239, 219) */
.c3{background:rgba(246,204, 44,1);} /* yellow */ /* rgb(255, 251, 234) */
.c4{background:rgba( 25,172,182,1);} /* blue */ /*rgba( 25,172,182,0.2);*/
.c5{background:rgba( 36,175, 94,1);} /* green */ /* rgb(223, 250, 234) */
.c6{background:rgba(149,198, 75,1);} /* light green */ /* rgb(238, 252, 218) */
.c7{background:rgba(198, 75,113,1);} /* purple */
.c0{background:rgba(220,220,220,1);}
.c1a::after{background:rgba(240, 83, 48,1);}
.c2a::after{background:rgba(249,158, 41,1);}
.c3a::after{background:rgba(246,204, 44,1);}
.c4a::after{background:rgba( 25,172,182,1);}
.c5a::after{background:rgba( 36,175, 94,1);}
.c6a::after{background:rgba(149,198, 75,1);}
.c7a::after{background:rgba(198, 75,113,1);} /* purple */

.arrow:before{ content:''; display:block; width:52px; height:52px; padding:10px; background: no-repeat center center;
	background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4yIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTIuODg3cHgiIGhlaWdodD0iNTIuODg4cHgiIHZpZXdCb3g9IjAgMCA1Mi44ODcgNTIuODg4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yNi40NDMsNTIuODg4QzExLjg2Miw1Mi44ODgsMCw0MS4wMjQsMCwyNi40NDNTMTEuODYyLDAsMjYuNDQzLDBzMjYuNDQzLDExLjg2MiwyNi40NDMsMjYuNDQzDQoJCVM0MS4wMjQsNTIuODg4LDI2LjQ0Myw1Mi44ODh6IE0yNi40NDMsMUMxMi40MTQsMSwxLDEyLjQxNCwxLDI2LjQ0M2MwLDE0LjAzLDExLjQxNCwyNS40NDQsMjUuNDQzLDI1LjQ0NA0KCQlzMjUuNDQzLTExLjQxNCwyNS40NDMtMjUuNDQ0QzUxLjg4NywxMi40MTQsNDAuNDczLDEsMjYuNDQzLDF6Ii8+DQo8L2c+DQo8Zz4NCgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI2LjQ0MywzOS4yMDYgMTAuMjExLDI1Ljc5IDEwLjg0OCwyNS4wMTkgMjYuNDQzLDM3LjkwOSA0Mi4wMzksMjUuMDE5IDQyLjY3NiwyNS43OSAJIi8+DQo8L2c+DQo8L3N2Zz4NCg==);
}
.separator{border-bottom:2px solid #EEE; opacity:1; top:90px; position:relative;}

/*@media (min-width: 951px) {*/

	.pageCon{min-width:951px; }
	.screenCon{ width:950px; /*min-height:650px;*/ }
/*}*/

.pageCon{ position:relative; margin-top:200px; padding:80px 0 0 0; } /* Hold Background */
.pageCon.s{margin:10px 0; padding:60px 0 00px 0;}
.container{ min-width:1000px; }
.screenCon{ position:relative; margin:0 auto; text-align:left; padding:20px 30px; }
body{font:normal 16px 'open_sansregular', arial; background-attachment:fixed; }




/***************************
	scrollBar
***************************/
::-webkit-scrollbar {width: 0.5em;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background:rgba(190,190,190,0.9);  }
::-webkit-scrollbar-thumb {background-color: #666; outline: 1px solid slategrey; border-radius:10px;}
::-webkit-input-placeholder, ::-moz-placeholder{font-weight:200;}

/***************************
	Top Bar
***************************/
.topBar{ top:0; left:0; width:100%; position:fixed; background:linear-gradient(rgba(0,0,0,0.2) 0, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 100%); padding:5px 10px; box-sizing:border-box;z-index:99; transition:ease-in 0.5s; }
.topBar.dark{background:rgba(60,60,60,0.95);}
.topBar h3{display:inline-block; margin:0; padding:0;}
.topBar .logo{border:0; /*clip:rect(0,0,0,0)*/  }
.topBar h3 a{text-decoration:none; border:0;}
#ILC_Logo{ width:42px; height:33px; }
#CUHK_Logo{ width:41px; height:33px; }

.topMenu{ list-style:none; }
.topMenu li{display:inline-block; }
.topMenu a{ padding:5px 8px; color:#FFF; font-size:14px; text-decoration:none; font-weight:normal; margin:auto; display:inline-block;  }

/***************************
	Footer
***************************/
.footer{position:fixed; bottom:5px; left:5px; display:block; transition:ease-out 0.3s;}
.footer.active{opacity:1 !important; visibility:visible;}
.footer small{font-size:12px; color:rgba(0,0,0,0.5);}

/***************************
	Left Menu
***************************/
.leftCol{ position:fixed; left:-300px; top:0; height:100%; opacity:0; transition:ease-in-out 0.8s; z-index:98;}
.leftCol nav{height:100%;}
.leftCol nav:before{ content:''; display:inline-block; height:100%; vertical-align:middle;}
.sideMenu{vertical-align:middle; display:inline-block; overflow:auto;}
.leftCol.active{ left:0; opacity:1;  }
.leftCol ul{list-style:none; margin:0; padding:0;}
.leftCol ul ul{}

/*.leftCol .sideMenu li{position:relative;}*/
.leftCol .sideMenu a::before{content:''; display:inline-block; position:relative; top:-3px; left:-7px; width:10px; height:1px; border-radius:10px; border:1px solid rgba(30,30,30,.8);  transition:ease-in-out 0.4s; }
.leftCol .sideMenu ul li a::before {width:5px ; height:1px; top:-3px; left:-5px;}
.leftCol .sideMenu a::after{content:''; display:block; position:absolute; top:0; left:0; height:100%; width:0%; transition:ease-in-out 0.4s; z-index:-1; border-radius:5px; background:rgba(0,0,0,0.5); }

.leftCol .sideMenu a:hover::before { border-color:#FFF; background:#FFF; }
.leftCol .sideMenu a:hover::after {width:100%; border:1px solid rgba(255,255,255,0.5);}
.leftCol .sideMenu a:hover{color:rgba(255,255,255,1); padding-left:25px;}

.leftCol .sideMenu a{ position:relative; display:block; margin:1px; padding:1px 20px 1px 20px; text-decoration:none; color:rgba(0,0,0,0); transition:ease-in-out 0.4s; user-select:none; outline:none; overflow:hidden; }
.leftCol .sideMenu a.active{}
.leftCol .sideMenu a.active::before{background:rgba(240, 83, 48,1); border-color:rgba(240, 83, 48,1); width:20px; }
@media (max-width:1500px) {
	.leftCol .sideMenu a{width:20px; text-wrap:none; white-space:nowrap;}
	.leftCol .sideMenu a:hover{width:auto;}
}
@media (max-width:1100px) {
	.sideMenu{display:none !important;}
}

/***************************
	Full Section Menu
***************************/
.fullMenu{ position:fixed; top:0; left:0; height:100%; width:100%; z-index:1000; background:rgba(100,100,100,0.9); opacity:0; visibility:hidden; transition:ease-in-out 0.3s;}
.fullMenu.active{opacity:1; visibility:visible;}
.fullMenu .holder{overflow:auto; padding:30px; display:block; height:100%; max-width:900px; margin:auto; }
.fullMenu .closeBtn{position:fixed; top:10px; right:30px; font-size:70px; line-height:0.7em; display:block; z-index:1100;}
.fullMenu .closeBtn:hover{text-decoration:none;}
@media (max-width: 750px) {
	.fullMenu .holder{padding:0; width:100%;}
	.fullMenu .closeBtn{position:relative; top:0; left:0; text-align:right;}
}

.fullMenu.Sec ul{list-style:none; display:inline-block; margin:0; padding:0;}
.fullMenu.Sec ul li{float:left; position:relative; margin:1px;}
.fullMenu.Sec ul li a{width:250px; height:250px; display:block; line-height:1em; padding:145px 15px 5px 15px; border-radius:20px 20px 90px 20px;}
.fullMenu.Sec ul li a:hover{background:rgba(100,100,100,1); text-decoration:none;}
.fullMenu.Sec ul::after{content:''; clear:both; display:block; float:none;}
.fullMenu.Sec div[class|="col"]{ position:relative; }
.fullMenu.Sec a{color:#FFF; font-size:20px; display:block; }
.fullMenu.Sec span.secNum{font:normal 150px 'oswaldmedium'; display:inline-block; position:absolute; top:5px; left:5px; opacity:0.2; color:#000; line-height:1em; }
@media (max-width: 750px) {
	.fullMenu.Sec ul li{display:block; width:100%;}
	.fullMenu.Sec ul li a{width:100%;height:inherit; padding:30px 30px 30px 170px; border-radius:0;}
}

.fullMenu.Mod{overflow:auto; background:rgba(50,50,50,0.9)}
.fullMenu.Mod .holder{padding:10px 10px;}
.fullMenu.Mod a{display:block; text-decoration:none; color:#FFF;}
.fullMenu.Mod a:hover{background:rgba(255,255,255,0.4);}
.fullMenu.Mod ul{list-style:none; padding:0; margin:5em auto; max-width:900px;}
.fullMenu.Mod li{margin:2px 0; padding:0; font-size:30px; }
.fullMenu.Mod img{height:120px; margin-right: 15px;}
.fullMenu.Mod .modNum{display:block; font-size:20px; line-height:1em;}
.fullMenu.Mod .media, .fullMenu.Mod .caption{display:inline-block; vertical-align:middle;}
@media (max-width: 750px) {
	.fullMenu.Mod .modNum{font-size:15px;}
	.fullMenu.Mod .holder{padding:2px 2px;}
	.fullMenu.Mod ul{margin-top:1em;}
	.fullMenu.Mod img{height:80px;}
	.fullMenu.Mod a{font-size:20px;}
}





/***************************
	Next Button
***************************/
.nextBtn.active{opacity:1; transform:translate(0,0); outline:none; user-select:none; visibility:visible; }
.nextBtn{opacity:0; transition:ease-in-out 0.5s; transform:translate(-20px,0); visibility:hidden; }
.nextBtn{ position:fixed; display:block; padding:8px 25px; vertical-align:middle; z-index:99; border:1px solid rgba(249,158, 41,1); color:rgba(249,158, 41,1); bottom:50px; right:50px; border-radius:15px 0; background:rgba(255,255,255,0.1); }
.nextBtn:visited, .nextBtn:active, .nextBtn:link{ text-decoration:none; color:rgba(249,158, 41,1); }
.nextBtn:hover{background: rgba(249,158, 41,0.9);  text-decoration:none; color:rgba(255,255,255,1); /*rgba(249,158, 41,0.2);*/ }




/***************************
	Intro
***************************/
.intro{ background-repeat:no-repeat; background-size:cover; width:100%; height:950px; background-position:center center;}
.intro{ -webkit-clip-path: polygon(100% 0, 100% 94%, 50% 100%, 0 94%, 0 0);
clip-path: polygon(100% 0, 100% 94%, 50% 100%, 0 94%, 0 0);
}

.intro .mainTitle .title{font-size:25px; font-family:'open_sansregular'; font-weight:normal;}
.intro .mainTitle .num{font-size:160px; font-family:'merriweatherbold'; position:absolute; top:-110px; right:0px;}
.intro .modTitle{font-size:70px; font-family:'merriweatherbold'; line-height:0.9em;}

.intro .motto{display:table;width:100%; margin:13px 0; color:rgba(0,0,0,0.5);}
.intro .motto .row{ display:table-row; width:100%; overflow:hidden; overflow-wrap:break-word; text-wrap:avoid;}
.intro .motto .row span{display:table-cell; font-size:16px; letter-spacing:4px;  }
.intro .motto .row .vLine{vertical-align:middle;}
.intro .motto .row .vLine::before{content:''; display:block; border-right:1px solid rgba(0,0,0,0.5); width:1px; height:10px;}

.intro .scrollDown:before{ content:''; display:block; width:53px; height:53px; padding:10px; background: no-repeat center center; margin:5px auto;
	background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4yIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTIuODg3cHgiIGhlaWdodD0iNTIuODg4cHgiIHZpZXdCb3g9IjAgMCA1Mi44ODcgNTIuODg4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yNi40NDMsNTIuODg4QzExLjg2Miw1Mi44ODgsMCw0MS4wMjQsMCwyNi40NDNTMTEuODYyLDAsMjYuNDQzLDBzMjYuNDQzLDExLjg2MiwyNi40NDMsMjYuNDQzDQoJCVM0MS4wMjQsNTIuODg4LDI2LjQ0Myw1Mi44ODh6IE0yNi40NDMsMUMxMi40MTQsMSwxLDEyLjQxNCwxLDI2LjQ0M2MwLDE0LjAzLDExLjQxNCwyNS40NDQsMjUuNDQzLDI1LjQ0NA0KCQlzMjUuNDQzLTExLjQxNCwyNS40NDMtMjUuNDQ0QzUxLjg4NywxMi40MTQsNDAuNDczLDEsMjYuNDQzLDF6Ii8+DQo8L2c+DQo8Zz4NCgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI2LjQ0MywzOS4yMDYgMTAuMjExLDI1Ljc5IDEwLjg0OCwyNS4wMTkgMjYuNDQzLDM3LjkwOSA0Mi4wMzksMjUuMDE5IDQyLjY3NiwyNS43OSAJIi8+DQo8L2c+DQo8L3N2Zz4NCg==);
}
.intro .scrollDown{display:inline-block; text-decoration:none; color:rgba(255,0,0,0.4); font-size:12px;}



/***************************
	Login
***************************/
.div_login {width:430px; margin:40px auto; }
.div_login table{width:100%; margin:0;}
.div_login th{width:100px;}
.div_login th, .div_login td{vertical-align:middle;}
.div_login td input{width:100%; vertical-align:middle; border:1px solid #999; border-radius:6px; padding:0 7px; font-size:90%; line-height:1.7em; outline:none;}
.div_login td input:focus{background:rgb(255, 239, 219);}
.div_login .btnPane{text-align:right; margin-top:10px;}
.div_login .status{color:red; display:inline-block; margin:0 10px;}
.div_login .status-duo{color:#999999;}
#btn_login, .btn_consent{ border:1px outset rgba(249,158, 41,1); background:rgba(249,158, 41,1); margin:0; padding:4px 20px; color:#FFF; border-radius:15px 0px; outline:none;}
#btn_login:active, .btn_consent:active{border-style:inset;}

/***************************
	Sec General
***************************/
.secTitle{font:normal 70px 'merriweatherbold'; position:relative; padding-top:50px; margin:20px 0 40px 0; min-height:2.5em; }
.secTitle .num{position:absolute; display:inline-block; font:normal 250px 'oswaldmedium'; top:-20px; left:-10px; z-index:-1; opacity:0.2; line-height:1em; }
.subTitle{font-size:35px; font-family:'merriweatherbold';}
h4{font-size:35px; font-family:'merriweatherbold';}
h5{font-size:25px; font-weight:bold;}

.txt_status { padding:0 5px; display:inline-block; opacity:0; visibility:hidden; transition:ease-out 0.3s;}
.txt_status.error{color:#F00;}
.txt_status.success{color:#AAA;}
.txt_status.active{opacity:1; visibility:visible;}
.saveStatus{font-size:80%;}

/***************************
	Questionnaire
***************************/
#cqq{position:relative; padding-bottom:200px;}
#cqq::before{content:''; display: block; z-index:-999; width:100%; height:100%; position:absolute; top:-60px; left:0; background:#F7F7F7; transform:skew(0, -6deg); }
#cqq .rating{border-collapse:separate; border-spacing:2px 5px;}
#cqq .rating tr:nth-child(1){line-height:0.8em; border:1px solid red;}
#cqq .rating small{color:#999; font-size:12px; line-height:1.0em;}
#cqq .rating th{width:350px; vertical-align:middle; }
#cqq .rating td{}
#cqq .rating label{display:inline-block; overflow:hidden; position:relative; cursor:pointer;}
#cqq .rating label:nth-last-child(n+2){margin-right:55px; }
#cqq .rating label span{display:inline-block; width:30px; height:30px; border:2px solid #EAEAEA; vertical-align:middle; line-height:27px; text-align:center; transition:ease-in-out 0.3s;}
#cqq .rating label input:checked + span{border-color:rgb(149,198, 75); background-color:rgba(149,198, 75,1); color:#FFF; }
#cqq .rating input{position:absolute; top:0; left:-50px;}
#cqq #lbl_otherComments{display:block; margin-top:10px;}
#cqq textarea{width:100%; height:8em; position:relative; border:1px solid #666; padding:5px; margin:5px 0; font-weight:200;}

#cqq #lbl_commentStatus{padding:0 5px; display:inline-block; opacity:0; visibility:hidden; transition:ease-out 0.3s;}
#cqq #lbl_commentStatus.success{color:#AAA;}
#cqq #lbl_commentStatus.error{color:#F00;}
#cqq #lbl_commentStatus.error, #cqq #lbl_commentStatus.success{visibility:visible; opacity:1;}
#cqq .div_consent{margin-bottom:20px;}
#cqq .div_consent input{display:inline-block; width:3%; vertical-align:top;}
#cqq .div_consent span{display:inline-block; width:96%; font-weight:200;}

/*
.int0408 .userBtn{border-color:rgb(240, 83, 48); background-color:rgb(240, 83, 48); / *color:rgb(95, 76, 5);* / transition:ease-out 0.3s; }
.int0408 .userBtn:active{border-style:inset;}
*/
#btn_submitRating{padding:2px 10px; border:1px solid #666;}
#btn_submitRating:disabled{color:rgba(0,0,0,0.2); background:#DDD; border-color:#CCC;}






/***************************
	Footer Contact
***************************/

#c99{color:#666; overflow:hidden; background:#333; }

#c99.footerContact{padding-top:25px; font-size:80%;}
#c99.footerContact h4{font-family:'open_sansregular'; font-size:25px; font-weight:normal; color:#DDD;}
#c99.footerContact a{text-decoration:none; color:inherit;}

#c99 .secCnt{display:table; width:100%;}
#c99 .secCnt>div{display:table-cell; padding:0 20px;}
#c99 .secCnt div:nth-child(1){width:50%;}
#c99 .secCnt div:nth-child(n+2){border-left:1px solid #3D3D3D;}
#c99 .secCnt div:nth-child(2){width:25%;}
#c99 .secCnt div:nth-child(3){width:25%;}