@charset "UTF-8";
/* CSS Document */

#banner{
	margin:auto;
	width: 100%;
    /*height: 0;*/
    position: relative;
}
#banner .all{
	overflow: hidden;
	position:relative;
}
#banner .container {
    width: 100%;
    height: 0;
    position: relative;
}
#banner .pic {
    float: left;
    position: relative;
}
#banner .pic img{
	width:100%;
}
#banner .bg {
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    height: 0;
}
#banner .pic a{
	position:relative;
	display:block;
}
#banner .pic a iframe{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
.arr_l {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    background-size: cover;
    max-width: 44px;
    z-index: 999;
}
.arr_r {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    background-size: cover;
    max-width: 44px;
    z-index: 999;
}
#bannerBtnG {
    position: absolute;
    bottom: 10px;
    text-align:center;
	width:100%;
}
.bannerBtn {
    width: 20px;
    height: 0;
    padding-bottom: 20px;
    border-radius: 20px;
    background-color: rgba(255,255,255,1);
    display: inline-block;
}
.bannerBtn.a {
    background-color: #fe0281;
	width: 5px;
	padding-bottom: 5px;
	border:8px solid rgba(255,255,255,1);
}
.videoWrapper {
	position:absolute;
	padding-bottom: calc(57% - 119px);
	margin-top: 119px;
	height: 0;
	top:0;
	left:0;
	width:100%;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.corner{
	position:relative;
}
.corner img{
	display: block;
}
.corner:before{
	content: '';
    position: absolute;
    right: 0;
    border-top: 30px solid #f5f7fa;
    border-left: 30px solid transparent;
    width: 0;
    top: 0;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #bf165e;
}
#cityu-header{
	background-color:rgba(255,255,255,0.75);
	position:relative;
	z-index:1000;
	top:0;
}
#cityu-main .cityu-inner{
    border-top: none !important;
}
#cityu-header .cityu-inner{
    padding-bottom:0;
}
@media screen and (min-width: 568px){
#cityu-header{
	position:fixed;
}
}
#cityu-header .cityu-inner {
    background-color:transparent;
}
#cityu-nav {
    position:fixed;
	z-index:1000;
}
.timeLineYear{
	background-color:#e975a8; width:60px; height:60px; border-radius: 100%; color:#fff; font-size:90%; line-height:60px; text-align:center;
	cursor:pointer;
}
.timeLineYear span{
	display: block;
    line-height: 18px;
    padding-top: 12px;
}
.timteLineMonth{
	background-color:#981f54; width:55px; height:55px; border-radius: 100%; color:#fff; font-size:85%; line-height:55px; text-align:center; margin:0 6px
}
.timeDate{
	color:#ff0e79; margin-bottom:10px;
	display:block;
	clear:both;
}
.timeLineProjectNo{
	float:left;
	width:calc(12% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
}
.timeLineType{
	float:left;
	width:calc(7% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
}
.timeLinePrincipalInvestigator{
	float:left;
	width:calc(15% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
}
.timeLineProjectTitle{
	float:left;
	width:calc(36% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
}
.timeLineStartDate{
	float:left;
	width:calc(15% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
}
.timeLineCompleteDate{
	float:left;
	width:calc(15% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
}
.timeLineTopic{
	float:left;
	width:calc(40% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
	padding-bottom:20px;
}
.timeLineTopic2{
	float:left;
	width:calc(80% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:10px;
}
.timeLineSubject{
	float:left;
	width:calc(70% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
	padding-bottom:20px;
}
.timeLineSubject .LatestNewsContent{
	width:100%;
	min-height:0;
}
.timeLinePublisher{
	float:left;
	width:calc(30% - 20px);
	font-size:93%;
	line-height:20px;
	margin-right:20px;
	padding-bottom:20px;
}
.timeLinePublisher .LatestNewsPic{
	width:100%;
	padding-bottom:89%;
}
.timeLineSpeaker{
	float:left;
	width:calc(60% - 21px);
	font-size:93%;
	line-height:20px;
	border-left:1px #cccccc solid;
	padding-left:20px;
	padding-bottom:20px;
}
.timeLineSpeaker2{
	float:left;
	width:calc(20% - 21px);
	font-size:93%;
	line-height:20px;
	border-left:1px #cccccc solid;
	padding-left:20px;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:10px;
}
#peopleAll .card{
	float: left;
    width: calc(50% - 40px);
    background-color: #e2e2e2;
    padding: 10px 0 10px 10px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom:30px;
    display: none;
    min-height:151px;
}
#peopleAll .card img{
	float:left; width:27%;
}
#peopleAll .card .t1{
font-size:93%; line-height:16px; float:left; margin-left:15px; width:calc(73% - 15px)
}
#peopleAll .card .t2{
font-size:85%; line-height:16px; float:left; margin-left:15px; width:calc(73% - 15px); margin-top:12px;
}
#peopleAll .card .t3{
width:73%; float:left; border-bottom:1px #f5f7fa solid; margin-top:12px;
}
#peopleAll .card .t4{
font-size:85%; line-height:16px; float:left; margin-left:15px; width:calc(73% - 15px); margin-top:12px;
}
#peopleAll .card.noImg .t1, #peopleAll .card.noImg .t2, #peopleAll .card.noImg .t4{
width:calc(100% - 30px)
}
#peopleAll .card.noImg .t3{
width: calc(100% - 15px);
}

#peopleAll{
	margin-top: 20px;
}
#peopleIconSet{
	text-align: center;
    margin-top: 20px;
}
#peopleIconSet .icon{
    font-size:85%;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    padding: 10px 18px;
    background-color: #424242;
    position: relative;
    border-radius: 5px;
    border-bottom: 2px solid #d0d0d0;
}
#peopleIconSet .icon:hover{
     background-color: #757575;
}
/*
#peopleIconSet .icon:before{
   	content: '';
    position: absolute;
    right: 0;
    border-top: 5px solid #f5f7fa;
    border-left: 5px solid transparent;
    width: 0;
    top: 0;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #f5f7fa;
}*/
#peopleIconSet .icon img{
	display:block;
	margin:auto;
}
#peopleIconSet .icon.hover{
    background-color: #932251;
}
#contentPageTopBanner{
	position:relative;line-height: 0; overflow:hidden;text-align: center;
	background-size: cover;
	min-width:auto;
}
.cityu-m{
    background-color: #a8235f !important;
    display:block;
}
@media screen and (min-width: 568px){
 #contentPageTopBanner{
	min-width:960px;
}  
.cityu-m{
    display:none;
}
}
#contentPageTopBanner img{
	width:100%;
	margin:auto;
}
#cityu-header-deptlogos img{
	width: 348px;
}
@media only screen and (max-width: 767px){
#cityu-header-deptlogos img{
	width: auto;
}
}
#ban_Social{
	position:absolute; bottom:0; right:0; background-color:#8d2151;  height:50px; border-radius: 20px 0 0 0; line-height:50px; font-size:128%; color:#FFF; padding:0 20px
}
body.cityu-navtheme-02 #cityu-nav {border-bottom: 6px solid #8f1e52;}
body.cityu-navtheme-02 .ddsmoothmenu ul li a.selected, body.cityu-navtheme-02 .ddsmoothmenu ul li a:hover {background-color: #8f1e52;}
body.cityu-navtheme-02 .ddsmoothmenu ul li ul li a {border-color: #b0638e;background-color: #8f1e52;}
body.cityu-navtheme-02 .ddsmoothmenu ul li ul li a:hover {background-color: #741c44;}
body.cityu-navtheme-02 .ddsmoothmenu ul li ul li ul li a {border-color: #b0638e;}
.newTitleOut{
	max-width:1200px; margin:auto; position:absolute; left:0; right:0; height:100%; top:0
}
/*
.newTitle{
	background-image:url(../images/bg_title.png); background-size:cover; position:absolute; left:0; bottom:10px;font-size:180%; color:#fff; padding:20px 70px 20px 20px
}*/
.newTitle {
    font-size: 300%;
    color: #fff;
    max-width: 1140px;
    margin: auto;
    padding: 0 20px;
    border-bottom: 1px #FFF solid;
    font-family: 'ff-mark-black';
    transform: translateY(-25px);
}
.newTitle.noline {
    border-bottom:none;
}
/*
.newTitle_MSc{
	background-image: linear-gradient(to right, rgba(245,140,0,0.8) 0%, rgba(245,140,0,0.8) 10%, rgba(245,140,0,0.8) 90%, rgba(245,140,0,0) 100%);transform: skew(-15deg);
	position:absolute; left:0; bottom:100px; font-size:260%; color:#fff; padding:30px 70px 30px 30px
}*/
.newTitle_MSc {
    position: absolute;
    left: 0;
    margin: auto;
    bottom: 0;
    margin-bottom: 8%;
}
.newTitle_MSc span{
    font-size: 360%;
    color: #bf175e;
    padding: 10px 20px;
    font-weight: bold;
    background-color: rgba(255,255,255,0.8);
    font-family: ff-mark-black;
    /* border-bottom: 5px solid #737373;*/
}
#subMenuOut{
	background: #8e2151; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#8e2151, #bd195e); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#8e2151, #bd195e); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#8e2151, #bd195e); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#8e2151, #bd195e); /* Standard syntax */
}
#subMenu{
	max-width:960px;
	margin:auto;
	height: 50px;
}
#subMenu ul li{
position: relative;
    display: inline;
    float: left;
    }
#subMenu > ul > li  > a{
	font-size:100%;
	padding:0 10px;
	color:#fff;
	line-height:50px;
	display:inline-block;
	border-radius: 5px 5px 0 0;
}
#subMenu a.active{
	color:#902052!important;
	background-color:#FFF;
}
#subMenu a.hover{
	color:#902052;
}
.faceBorder{
position:absolute; border:4px solid #FFF; box-shadow: inset 0px 0px 5px #888888; width:4%; padding-bottom:4%; opacity:0;cursor: pointer;
}
.faceText{
position:absolute; background-color: #fff; padding: 4px 8px; font-size: 93%; display:none;
}
.contentTitle{
	color:#2d2e2e; font-size:143%; padding:0 20px; border-bottom:4px #83224e solid; text-align:left; line-height:35px; font-weight:bold
}
.content{
	text-align:left; padding:20px;line-height: 1.6;
}
#cityu-content ol {
    clear: left;
    list-style-type: decimal;
    margin-left: 40px;
}
body.cityu-layout-fullcontent #cityu-content{
	width:70% !important;
	background-color:transparent !important;
}
@media screen and (max-width: 768px){
body.cityu-layout-fullcontent #cityu-content{
	width:calc(100% - 40px) !important;
	margin:auto;
}
}
#cityu-content ul > li {
    background: transparent url(../images/bullet_dot_2.png) no-repeat scroll 6px 6px;
}
#cityu-content-table:after{
	content:'';
	display:block;
	clear:both;
}
#cityu-content-table ul > li{
	float:left;
	width:calc((100% - 40px)/3);
	margin-right:20px;
	background-color:#83224e;
	margin-bottom:20px;
}
#cityu-content-table ul > li:hover{
	background-color:#b71a5b;
}
#cityu-content-table ul > li div{
	background-color:#FFF;
	margin:10px 10px 0 10px;
	padding-bottom:60%;
	background-size: cover;
	background-position:center;
}
#cityu-content-table ul > li span{
	display:block;
	text-align:center;
	font-size:93%;
	line-height:20px;
	padding:10px 0;
	color:#FFF;
}
#cityu-content-table ul > li:nth-child(3n){
	margin-right:0px;
}
h1{
	padding-left:10px;
	width:calc(100% - 10px);
	font-size:143%;
	position:relative;
}
h1 .close{
	display:block;
	position:absolute;
	right:0;
	padding:0px 5px;
	background-color:#bf165e;
	color:#FFF;
	top:9px;
	font-size:79%;
}
h4.sub{
	padding-left: 10px;
    margin-top: -10px;
    margin-bottom: 20px !important;
    color: #6b6b6b;
	font-weight: bolder;
}
#awardLine{
	background-image:url(../images/bg_line_award.png); background-repeat:repeat-y;
}
#awardLine_H{
	background-image:url(../images/bg_line_award_H.png); background-repeat:repeat-x;
	background-size: 100% 67px;
}
#awardLine_H .awardContent{
	width:calc(100% - 40px);
}
#awardLine_H .awardContent2{
	margin-left:0;
}
.awardBox{
	margin-bottom:20px
}
.awardBox_H{
	margin-bottom:0px;
	display:none;
}
.awardBox:after, .awardBox_H:after, .awardBox_H > div:after{
	content:'';
	clear:both;
	display:block;
	float:none;
}
.awardIcon{
	padding-bottom:20px; float:left; margin-left:18px
}
.awardIcon2{
	float:left; margin-left:15px
}
.awardDate{
	padding:3px 0px; font-size:79%; line-height:normal; color:#FFF; background-color:rgba(230,85,148,0.8); width:67px; text-align:center
}
.awardArr{
	width:0; height:0; border-top: 10px solid transparent;border-bottom: 10px solid transparent; border-right:10px solid #fff; float:left; margin-top:25px; margin-left:10px
}
.awardArr_H{
	width:0; height:0; border-top:10px solid transparent  ;border-bottom: 10px solid #fff; border-right:10px solid transparent;border-left:10px solid transparent; margin:auto;
	display:none;
}
.awardContent{
	float:left; background-color:#FFF; width:calc(100% - 150px); padding:20px
}
.awardContent .awardImg{
	width:200px;
	height:150px;
	background-size: cover;
	background-repeat:no-repeat;
	background-position:center;
	float:left;
	background-color:#ececec;
	margin-right:10px;
}
.awardContent .awardText{
	width:calc(100% - 230px);
	padding:10px;
	float:left;
}
.awardContent .awardText .date{
	color: #ff0e79;
	font-size: 107%;
    line-height: 25px;
	padding:0;
	display:inline;
}
.awardContent.over a{
	position:relative;
	display:block;
	height: 150px;
	color:#000;
	margin-bottom:20px;
}

.awardContent.over a:hover:after{
	content: '';
    position: absolute;
    width: calc(100% - 230px);
    height: calc(100% - 4px);
	border:2px solid rgba(230,85,148,0.8);
    z-index: 100;
    top: 0;
    left: 210px;
    line-height: 150px;
    text-align: right;
    font-size: 143%;
    color: rgba(230,85,148,0.8);
}
.awardContent.over a.none{
	cursor:default;
}
.awardContent.over a.none:hover:after{
	content: '';
    position: absolute;
    width: 0;
    height: 0;
	border:none;
}

.awardContent span{
	font-size:128%;
	line-height: 25px;
	padding:10px 0 10px 0;
	display: block;
}

.awardContent2{
	margin-top: 10px;
    margin-left: 105px;
}
.awardTitle{
	font-size:143%; line-height:25px;
	 color:#000;
	 margin-bottom: 20px;
}
#cityu-content table td {
    text-align: left;
	/*
    border-bottom:none;
	padding:0 !important;
	font-size:107%;
	line-height:20px;
	padding-bottom:20px !important;
	*/
}
#cityu-content table td a{
	color: #e973a7;
}
#cityu-content table td img{
	width:80px;
	margin-right:20px;
	max-width:80px;
}

	.iconSocial.facebook{
		width: 30px;
		font-size: 257%;
		line-height: 30px;
		vertical-align: middle;
		color: #3f5c96;
		background-color: white;
		border-radius: 6px;
		margin-left:20px;
		background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,1));
	}
	a:hover .iconSocial.facebook{
		color: #fff;
        background-color: #3f5c96;
    	background: linear-gradient(#3f5c96, #3f5c96);
	}
	.iconSocial.instagram{
		width: 30px;
		font-size: 257%;
		line-height: 30px;
		vertical-align: middle;
		color: #FFF;
		background-color: rgb(228, 50, 129);
		border-radius: 9px;
		margin-left:10px;
	}
	a:hover .iconSocial.instagram{
		color: rgb(228, 50, 129);
        background-color: #fff;
	}
	.iconSocial.weixin{
		width: 26px;
		font-size: 143%;
		line-height: 30px;
		vertical-align: middle;
		color: #fff;
		border-radius: 6px;
		margin-left:10px;
		padding-left: 4px;
        background-color: #39ce1d;
    	background: linear-gradient(#39ce1d, #27af10);
	}
	a:hover .iconSocial.weixin{
		color: #39ce1d;
        background-color: #fff;
    	background: linear-gradient(#fff, #fff);
	}
	.iconSocial.youtube{
		width: 25px;
		font-size: 143%;
		line-height: 30px;
		vertical-align: middle;
		color: #fff;
		border-radius: 6px;
		margin-left:10px;
		padding-left: 5px;
        background-color: #e02c2d;
    	background: linear-gradient(#e02c2d, #bf1a23);
	}
	a:hover .iconSocial.youtube{
		color: #e02c2d;
        background-color: #fff;
    	background: linear-gradient(#fff, #fff);
	}
	.iconSocial.weibo{
		width: 25px;
		font-size: 143%;
		line-height: 30px;
		vertical-align: middle;
		color: #fff;
		border-radius: 6px;
		margin-left:10px;
		padding-left: 5px;
        background-color: #f09520;
    	background: linear-gradient(#f09520, #f09520);
	}
	a:hover .iconSocial.weibo{
		color: #f09520;
        background-color: #fff;
    	background: linear-gradient(#fff, #fff);
	}
	.btnJoinMail{
		font-size:100%;
		line-height:26px;
		background-color:#FFF;
		color:#8d2151;
		margin-left:20px;
		display:inline-block;
		border-radius: 20px;
		padding:0 10px;
	}
	#EducationandResearchTitle{
		font-size:214%; display:inline; font-weight:bold; border-bottom:4px solid #83224e
	}
	#EducationandResearchBoxAll{
		color:#2d2e2e;
		padding-top:10px;
	}
	#EducationandResearchBoxAll:after{
		content:'';
		clear:both;
		display:block;
	}
	.EducationandResearchBox{
		width:calc((100% - 24px) /4);
		padding-top:20px;
		padding-bottom:80px;
		background: linear-gradient(#f5f7fa, #e5e8ed);
		float:left;
		position:relative;
		margin-right:8px;
		min-height: 350px;
		transition: all 0.5s;
	}
	.EducationandResearchBox:hover{
		background: linear-gradient(#f5f7fa, #dcc6d2);
	}
	.EducationandResearchBox:last-child{
		margin-right:0;
	}
	.EducationandResearchBox .title{
		font-size:164%;
		font-family:"Arial Black";
		line-height:normal;
	}
	.EducationandResearchBox .icon{
		width:60px;
		margin:10px auto;
	}
	.EducationandResearchBox .icon img{
		width:100%;
	}
	.EducationandResearchBox .content{
		font-size:100%;
		line-height:18px;
		margin:0 10px;
	}
	.EducationandResearchBox .btn{
		position:absolute;
		bottom:30px;
		left:0;
		right:0;
		margin:auto;
		font-size:85%;
		color:#660e38;
		background-color:#FFF;
		padding:5px;
		width:100px;
	}
	.cityu-inner.clear{
		content:'';
		clear:both;
		display:block;
	}
	#LatestNewsAll{
		width:50%;
		padding-top:15px;
		float:left;
		color:#2d2e2e;
	}
	#LatestNewsAllTitle{
		font-size:179%; font-weight:bold; border-bottom:4px solid #83224e;
		padding-left:10px;
	}
	#UpcomingEvents{
		background-color:#f5f7fa;
		padding:15px 20px;
		color:#2d2e2e;
		position:relative;
	}
	#UpcomingEventsTitle{
		font-size:179%; font-weight:bold; border-bottom:4px solid #83224e; margin-bottom:30px;
	}
	.LatestNewsBox:after{
		content:'';
		clear:both;
		display:block;
	}
	.LatestNewsBox{
		margin-top:20px;
		border-bottom:1px dotted #000;
	}
	.LatestNewsPic{
		margin-right:15px;
		width:calc(50% - 15px);
		padding-bottom:42%;
		height:0;
		background-position:center center;
		background-size:cover;
		background-repeat:no-repeat;
		float:left;
	}
	.LatestNewsContent{
		float:left;
		width:50%;
		font-size:93%;
		line-height:18px;
		min-height:201px;
		padding-bottom:20px;
	}
	.LatestNewsContent a.ReadMore:after{
		content:'Read more >';
		background-color:#8d2151;
		padding:5px 10px;
		color:#FFF;
		display:inline-block;
		margin-top:20px;
		font-size:79%;
		cursor:pointer;
	}
	#UpcomingEventsAll{
		width:56%;		
	}
	.UpcomingEventsBox:after{
		content:'';
		clear:both;
		display:block;	
	}
	.UpcomingEventsBox{
		padding-bottom:10px;
	}
	.UpcomingEventsBox .date{
		width:60px;
		height:60px;
		background: linear-gradient(#64012d, #8c2050);
		color:#FFF;
		text-align:center;
		font-weight:bold;
		font-family:"Arial Black";
		font-size:214%;
		line-height:40px;
		float:left;
	}
	.UpcomingEventsBox.over .date{
		background: linear-gradient(#b31b5c, #bf185e);
	}
	.UpcomingEventsBox .date .month{
		font-weight:normal;
		font-size:107%;
		line-height:10px;
		font-family:"Arial";
	}
	.UpcomingEventsBox .title{
		float:left;
		border-top:1px dotted #000;
		padding:10px;
		width:calc(100% - 80px);
		font-size:79%;
		color:#4994b1;
	}
	.UpcomingEventsMore{
		display:block;
		font-size:79%;
		color:#4994b1;
		text-align:right;
		margin-top:20px;
	}
	#UpcomingEventsDetails{
		width:calc(40% - 10px);
		position:absolute;
		right:20px;
		top:78px;
	}
	#UpcomingEventsDetails a.ReadMore:after{
		content:'Read more >';
		background-color:#8d2151;
		padding:5px 10px;
		color:#FFF;
		display:inline-block;
		margin-top:20px;
		font-size:79%;
		cursor:pointer;
	}
	#contentRight{
		margin-left: 30px;
    	width: calc(50% - 30px);
		float:left;
	}
	.cityu-outer.clear{
		padding-bottom:25px;
	}
	.cityu-outer.clear:after{
		content:'';
		clear:both;
		display:block;
	}
	.mobileHide{
			display:block;
		}
	@media screen and (max-width: 768px) {
		.mobileHide{
			display:none;
		}
		.EducationandResearchBox{
			float:none;
			width:100%;
			margin-right:0;
		}
		.EducationandResearchBox {
    		min-height:0;
		}
		#LatestNewsAll{
			float:none;
			width:100%;
		}
		#contentRight{
			float:none;
			width:100%;
			margin-left: 0;
		}
		#ban_Social {
    height: 30px;
    border-radius: 10px 0 0 0;
    line-height: 30px;
    font-size:85%;
    padding: 0 10px;
}
.iconSocial.facebook {
    width: 22px;
    font-size: 193%;
    line-height: 23px;
    border-radius: 3px;
    margin-left: 10px;
	margin-right:2px;
}
.iconSocial.weixin{
    width: 21px;
    font-size: 107%;
    line-height: 23px;
    border-radius: 6px;
    margin-left: 5px;
    padding-left: 4px;
}
.iconSocial.youtube{
    width: 21px;
    font-size: 107%;
    line-height: 23px;
    border-radius: 6px;
    margin-left: 7px;
    padding-left: 4px;
}
.iconSocial.weibo{
    width: 21px;
    font-size: 107%;
    line-height: 23px;
    border-radius: 6px;
    margin-left: 7px;
    padding-left: 4px;
}
.btnJoinMail {
    font-size:85%;
    line-height: 20px;
    background-color: #FFF;
    color: #8d2151;
    margin-left: 10px;
    display: inline-block;
    border-radius: 20px;
    padding: 0 10px;
}
.newTitle_MSc{
	bottom:20px;
}
.newTitle{
	font-size:150%;
	padding: 10px 20px;
	border-bottom:none;
	transform: translateY(-5px);
}
.newTitle_MSc span {
    font-size: 120%;
    padding: 5px 10px;
}
#subMenu{
	display:none;
}
.contentTitle {
    font-size: 114%;
    line-height: 20px;
    padding-bottom: 15px;
}
#awardLine {
	    background-position: center;
}
.awardContent{
	    width: calc(100% - 20px);
		padding:10px;
}
.awardArr {
	display:none;
}
.awardIcon {
    float:none;
	margin:auto;
	text-align: center;
}
.awardDate {
	margin:auto;
}
.awardTitle {
    margin-bottom: 10px;
}
#cityu-content table td img{
	margin-right:10px;
}
#allPeople{
display: none;
}
#peopleIconSet .icon {
    width: 40%;
    padding: 0 2%;
}
#peopleAll .card {
    width:calc(100% - 40px);
}
.timteLineMonth, .timeLineYear {
    margin: auto;
}
.awardContent2 {
    margin-left:0;
}
.timeLineProjectNo{
	width: calc(30% - 20px);
	padding-bottom:20px;
}
.timeLineType{
	width: calc(20% - 20px);
	padding-bottom:20px;
}
.timeLinePrincipalInvestigator{
	width: calc(50% - 20px);
	padding-bottom:20px;
}
.timeLineProjectTitle{
	width: calc(100% - 20px);
	padding-bottom:20px;
}
.timeLineStartDate, .timeLineCompleteDate{
	width: calc(50% - 20px);
	}
}
.MediaCoveragesBox{
	display:none;
	clear:both;
}
a.ReadMore:after {
    content: 'Read more >';
    background-color: #8d2151;
    padding: 5px 10px;
    color: #FFF;
    display: inline-block;
    margin-top: 20px;
    font-size: 79%;
    cursor: pointer;
}
a.ToApply{
	float: right;
	border-radius: 100px;
    background-color: #8d2151;
    padding: 5px 10px;
	line-height: normal;
    color: #FFF;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
	text-decoration: none;
}
a.ToApply:hover{
    background-color: #bb195d;
}
#cityu-content table.scholarshipsAwards th {
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #e975a8;
	color:#FFF;
    text-align: left;
}
#cityu-content table.scholarshipsAwards td {
    border-bottom: 1px solid #e8e8e8;
    padding: 3px 6px !important;
    font-size: 107%;
    line-height: 20px;
}
#login-flyout{
	padding-top: 10px;
	width: 140px;
	background: rgb(255, 255, 255);
}
#login-flyout a{
	display: block;
    padding: 3px 5px;
    border-top: 1px solid #d6d6d6;
	border-left: 1px solid #d6d6d6;
	border-right: 1px solid #d6d6d6;
    color: #676767;
}
#login-flyout a:last-child{
	border-bottom: 1px solid #d6d6d6;
}







p{
    font-size: 120%;
    line-height: 160%;
    padding-left: 10px; padding-right: 10px;margin-bottom: 10px;
}
.groupLR.v{
    flex-direction: column;
}
.groupLR.v .left, .groupLR.v .right{
    width:100%;
}
.groupLR{
    display: flex;
    align-items: center;
    margin-bottom:20px;
}
.groupLR:after{
    content:'';
    clear:both;
    display:block;
}
.left{
    width:calc((100% - 10px)/2); margin-bottom: 10px; margin-right: 10px; text-align: center;background-color: #fff;
}
.left.text, .right.text{
    background: transparent;
    color: #000;
    text-align:left;
    position: relative;
    overflow: hidden;
}
.right{
    width:calc((100% - 10px)/2); margin-bottom: 10px;text-align: center;background-color: #fff;
}
.whitebg .left, .whitebg .right{
    background-color: #f6f7fa;
}
.title{
    font-family: ff-mark-black;
}
.left .title, .right .title{
    display:block;
    padding:20px 0px 40px 0px;
    line-height:25px;
    position: relative;
    overflow: hidden;
    font-size: 140%;
}

@media screen and (max-width: 768px){

.groupLR{
    flex-direction: column;
}
.groupLR.re{
flex-direction: column-reverse;
}
.groupLR.v{
    flex-direction: column-reverse;
}
.left, .right{
    width:100%; margin-right: auto;
}   
}
.video{
   position: relative; width: 100%;height: 0;padding-bottom: 56.25%; 
}
.video iframe, .video img{
    position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}

/* all */
.cityu-inner {
    max-width: 1200px;
    width: 100%;
    background-color:transparent !important; padding-bottom:30px;
}
@font-face{
    font-family:ff-mark-black;
    src:url('../fonts/ff-mark-black.eot');
    src:url('../fonts/ff-mark-black.eot?#iefix') format("embedded-opentype"),url('../fonts/ff-mark-black.woff') format("woff"),url('../fonts/ff-mark-black.ttf') format("truetype");
    font-style:normal;
    font-weight:900
}
h1{
    font-size: 300%;
    font-family: ff-mark-black;
    color: #000;
    border-bottom: none !important;
}
h2{
    color: #bf165e;
    background: linear-gradient(to right,#7c257c,#bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 200%;
    font-weight: 900;
    letter-spacing: -0.4px;
    display: inline-block;
    padding-left: 10px;
}
h3{
    padding:10px;
    margin-bottom: 1.6em;
    font-weight: bold;
    background-color: #FFF;
}
@media screen and (max-width: 768px) {
h1{
    font-size: 150%;
    font-family: ff-mark-black;
    color: #000;
    border-bottom: none !important;
}
h2{
    font-size: 120%;
}
}
#contentPageTopBanner:after{
    content: '';
    position: absolute;
    width: 120%;
    padding-bottom: 6%;
    bottom: -10%;
    background-color: #f6f7fa;
    transform: rotate(2deg);
    left: -10%;
}
#contentPageTopBanner.inside:after{
    content: '';
    position: absolute;
    width: 120%;
    padding-bottom: 6%;
    bottom: -10%;
    background-color: #8e2151;
    transform: rotate(2deg);
    left: -10%;
}
.left .title:after, .right .title:after{
    content: '';
    position: absolute;
    width: 120%;
    padding-top: 6%;
    bottom: -20%;
    background-color: #f6f7fa;
    transform: rotate(2deg);
    left: -10%;
}
.whitebg .left .title:after,.whitebg .right .title:after{
    background-color: #fff;
}
.whitebg{
    background-color:#FFF !important;
    position: relative;
    padding-top: 3%;
    overflow: hidden;
    padding-bottom: 80px;
    padding-top: 80px;
}
@media screen and (max-width: 768px) {
.whitebg{
    padding-bottom: 0px;
    padding-top: 0px;
}
}
.whitebg:before{
    content: '';
    position: absolute;
    width: 120%;
    padding-top: 6%;
    top: -7%;
    background-color: #f6f7fa;
    transform: rotate(-2deg);
    left: -10%;
}
.whitebg:after{
    content: '';
    position: absolute;
    width: 120%;
    padding-bottom: 6%;
    bottom: -10%;
    background-color: #f6f7fa;
    transform: rotate(2deg);
    left: -10%;
}
.whitebg .groupLR{
align-items: baseline;
}
.ReadMoreBtn{
    color: #bf165e;
    font-size: 0100%;
    font-weight: 900;
    font-family: ff-mark-black;
    letter-spacing: 1px;
    padding-right: 8px;
    text-transform: uppercase;
}
#cityu-nav .cityu-inner{
    padding-bottom: 0px;
}
.name{
    color: #bf165e;
    background: linear-gradient(to right,#7c257c,#bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 120%;
    font-weight: 900;
    letter-spacing: -0.4px;
    display: inline-block;
}
.fade {
    opacity: 0;
    transition: 1s ease-in-out;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
}
.scrollin {
    opacity: 1 !important;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
#cityu-content {
    font-size: 120%;
}

.tableStrategic{
display: grid;
grid-template-columns: 1fr 1fr;
}
.tableStrategic div:nth-child(2n+1){
font-weight: bold;
}
.tableStrategic .blank{
padding-bottom: 20px;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent; 
    border-right:15px solid #e975a8;
    margin: auto;
    margin-bottom: 7px;
    cursor: pointer;
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent; 
    border-left:15px solid #e975a8;
    margin: auto;
    margin-bottom: 7px;
    cursor: pointer;
}
.timeLineOutOut{
    display: grid;
    grid-template-columns: 5% 90% 5%;
    align-items: center;
}
.timeLineOutOut > div{
    display:inline-block;
}