/*
html, body {
	height: 100%;
}
body {
    background-color: #fff;
    margin: 0px;
    font-family:helvetica, arial, sans-serif;
    color:#fff;
    height : 100%;
    min-height : 100%;
    font-size : 14px;
}
*/
ul, ol, ul li, ol li {
    margin : 0px;
    padding : 0px;
}
h1{
    margin:0;
}
/*
a {
    color:#0078ff;
}
*/
#canvas{
    width:100%;
    height:100%;
    overflow: hidden;
    position:absolute;
    top:0;
    left:0;
    background-color: #015249;
    background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#4da0b0), to(#d39d38));
    /*background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#be93c5), to(#7bc6cc));*/
    /*background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#13547a), to(#80d0c7));*/
}
.canvas-wrap{
    position:relative;
    height : 85px;
}

@font-face {
    font-family: OpenSans;
    src: url(../ctepFonts/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2);
}
/*
div {
    font-family: OpenSans, helvetica, arial, sans-serif;
}
*/
body {
	margin: 0;
	padding: 0;
	min-width : 400px;
	overflow : auto;
}

#root,
#rootVertical {
	display: block;
	justify-content: center;
	align-items: center;
	font-family: 'OpenSans';
	margin-bottom : 30px;
	/*margin-top : 30px;*/
    /*position : relative;*/
}

body #root,
body #rootVertical {
    -ms-word-wrap : normal !important;
    word-wrap : normal !important;
    color : #fff;
}

@media (min-width: 785px) {
    #rootVertical {
        display : none;
    }
    #root {
        display : block;
    }

    .cardBottomContainer .icon::before {
        position: relative;
        right: 30px;
        top: 32px;
    }

    ul#cardList {
        background:#f8f8f8;
        height:490px;
        display:block;
        position:relative;
        overflow:hidden;
        list-style : none;
    }
    ul#cardList > li {
        position: absolute;
        top: 0px;
        width: 100%;
        cursor: pointer;
        transition: transform 0.5s ease;
        height: 490px;
    }
    header.card-header-details {
        display:block;
        justify-content:space-between;
        align-items:center;
        padding: 10px 20px 10px 10px;
        color:#fff;
    }
    .card-header-details h1 {
        margin:0;
        font-weight:normal;
        font-size:25px;
        text-align:right;
        padding-top : 20px;
        padding-bottom : 10px;
    }
    #root h1.card-left-title {
        margin:0;
        font-weight:normal;
        font-size:25px;
        text-align:justify;
        -webkit-transform: translateY(-50%) rotate(-90deg);
        -moz-transform: translateY(-50%) rotate(-90deg);
        -o-transform: translateY(-50%) rotate(-90deg);
        -ms-transform: translateY(-50%) rotate(-90deg);
        transform: translateY(-50%) rotate(-90deg);
        position : absolute;
        bottom : 0px;
        left : -20px;
        width : 70px;
    }
    #root h3 {
        margin:4px 0 0;
        font-weight:normal;
        font-size:17px;
        opacity:0.8;
        text-align:right;
    }
    .detailContents {
        padding: 0 20px;
        text-align : justify;
        font-size : 1em;
        padding-left : 125px;
    }
    .detailSpan {
        display:block;
        width:25px;
        height:30px;
        margin:0 20px 0 0;
        border-bottom:1px solid rgba(255, 255, 255, 0.8);
        text-align:center;
        font-size:22px;
    }
    .detailData {
        font-weight:normal;
        font-size:20px;
        margin:0;
        font-style:italic;
    }

    #li_0.closed{
        transform: translate3d(0px, 0px, 0px);
    }

    #li_1.closed{
        transform: translate3d(70px, 0px, 0px);
    }
    #li_1.closed:hover {
        transform: translate3d(65px, 0px, 0px);
    }

    #li_2.closed{
        transform: translate3d(140px, 0px, 0px);
    }
    #li_2.closed:hover {
        transform: translate3d(135px, 0px, 0px);
    }

    #li_3.closed{
        transform: translate3d(210px, 0px, 0px);
    }
    #li_3.closed:hover {
        transform: translate3d(205px, 0px, 0px);
    }

    #li_4.closed{
        transform: translate3d(280px, 0px, 0px);
    }

    ul#cardList .opened{
        transform: translate3d(0px, 0px, 0px) !important;
    }

    ul#cardList .ion-ios-arrow-down::before {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 5px;
        vertical-align: middle;
        content: "";
    }

    ul#cardList .closed .ion-ios-arrow-down::before {
        border-top: 5px solid;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
    }

    ul#cardList .opened .ion-ios-arrow-down::before {
        border-bottom: 5px solid;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
    }

    table.cardDetailsTable,
    table.cardDetailsTable tr {
        width : 100%;
        height : 100%;
    }

    td.cardDetailTd {
        width : 100%;
    }

    td.cardTitleTd {
        max-width : 100px;
        vertical-align : top;
        padding-top : 100px;
    }

    .cardBottomContainer {
        position : relative;
        top : 0;
        left : 0;
        height : 380px;
    }

    div.canvas-content{
        position:relative;
        z-index:2000;
        color:#fff;
        text-align:center;
        top : 5px;
        width : 597px;
        height : 79px;
        margin : 0 auto;
    }

    #NationalInnovationSurvey {
        background-image: url(../ctepImages/home/nisHomeLogo.png);
        background-repeat: no-repeat;
        width: 597px;
        height: 79px;
        background-size : 100%;
        display: block;
    }
}

@media (max-width: 785px) {
    #root {
        display : none;
    }
    #rootVertical {
        display : block;
    }

    .card-header-details .icon::before {
    	position: relative;
      right: 7px;
      top: 1px;
    }

    ul#cardListVertical {
        background:#f8f8f8;
        height:620px;
        display:block;
        position:relative;
        overflow:hidden;
        list-style : none;
    }
    ul#cardListVertical > li {
        position: absolute;
        top: 0px;
        width: 100%;
        cursor: pointer;
        transition: transform 0.5s ease;
        height: 620px;
    }
    /*
    header {
        display:block;
        height:85px;
        justify-content:space-between;
        align-items:center;
        padding:10px 20px;
        color:#fff;
    }
    */
    #rootVertical h1 {
        margin:0;
        font-weight:normal;
        font-size:20px;
        text-align:right;
        padding : 25px 10px 20px 0;
    }
    #rootVertical h3 {
        margin:4px 0 0;
        font-weight:normal;
        font-size:15px;
        opacity:0.8;
        text-align:right;
    }
    div.detailBlock {
        width:100%;
        padding:0 20px;
        display:block;
        text-align : justify;
        margin:25px 0;
        font-size : 1em;
    }
    .detailSpan {
        display:block;
        width:25px;
        height:30px;
        margin:0 20px 0 0;
        border-bottom:1px solid rgba(255, 255, 255, 0.8);
        text-align:center;
        font-size:22px;
    }
    .detailData {
        font-weight:normal;
        font-size:20px;
        margin:0;
        font-style:italic;
    }

    #verticalLi_0.closed{
        transform: translate3d(0px, 0px, 0px);
    }

    #verticalLi_1.closed{
        transform: translate3d(0px, 320px, 0px);
    }

    #verticalLi_2.closed{
        transform: translate3d(0px, 395px, 0px);
    }

    #verticalLi_3.closed{
        transform: translate3d(0px, 470px, 0px);
    }

    #verticalLi_4.closed{
        transform: translate3d(0px, 545px, 0px);
    }

    ul#cardListVertical .adjusted {
        transform : translate3d(0px, 670px, 0px);
    }

    ul#cardListVertical .opened{
        transform: translate3d(0px, 0px, 0px) !important;
    }

    ul#cardListVertical .ion-ios-arrow-down::before {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 5px;
        vertical-align: middle;
        content: "";
        border-top: 5px solid;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        top: -1px !important;
    }

    h1#homeHeader {
        text-align : center;
        font-weight : bold;
    }

    .detailContentsVertical {
        padding: 10px 10px 10px;
        text-align : justify;
        font-size : 1em;
    }
    div.canvas-content{
        position:relative;
        z-index:2000;
        color:#fff;
        text-align:center;
        top : 25px;
        width : 393px;
        height : 36px;
        margin : 0 auto;
    }
    #NationalInnovationSurvey {
        background-image: url(../ctepImages/home/nisLogo.png);
        background-repeat: no-repeat;
        width: 393px;
        height: 36px;
        background-size : 100%;
        display: block;
    }
    ul#cardListVertical .opened .ion-ios-arrow-down::before {
        border-bottom: 5px solid;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-top : 0px;
    }
    ul#cardListVertical .closed .ion-ios-arrow-down::before {
        border-top: 5px solid;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom : 0px;
    }
}

#homePageDescriptionContainer {
    width : 100%;
    text-align : center;
    padding-bottom : 80px;
}

#homePageDescription {
    width : 80%;
    max-width : 960px;
    text-align : justify;
    margin : 1em auto 1em auto;
    color : #333;
}

.detailContentsVertical ul,
.detailContentsVertical ol,
.detailContents ul,
.detailContents ol {
    padding-left : 20px;
}
/*
a,
a:active,
a:visited,
a:link {
    color : #FFFF00;
    text-decoration : none;
}
a:hover {
    text-decoration : underline;
}
*/
label {
    font-weight : bold;
}

ul#cardList > li#li_4 {
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url("../ctepImages/homeImage.jpg");
    height: 100%;
    background-repeat: repeat-y;
    background-size : 100%;
    text-align : justify;
    cursor : auto;
}

ul#cardListVertical > li#verticalLi_0 {
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 100%), url("../ctepImages/homeImage.jpg");
    height: 100%;
    background-repeat: repeat-y;
    background-size : 100%;
    text-align : justify;
    cursor : auto;
}

#homePageDescriptionContainer {
    display : none;
}
/*
.footer {
    background-image : url(../ctepImages/home/nationalInnovationSurveyWebFooter.jpg);
    color : #fff;
    width : 100%;
    font-family: OpenSans, helvetica, arial, sans-serif;
}
*/
.detailsFront {
    padding : 20px;
}
.detailsFrontVertical {
    padding : 10px;
}

.primaryDataLg {
    border:3px solid #015389;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -5px -3px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 13px;
    top : 10px;
}
.innovationTrendLg {
    border:3px solid #086C32;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -5px -42px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 13px;
    top : 10px;
}
.supportSystemLg {
    border:3px solid #6A067A;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -4px -80px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 13px;
    top : 10px;
}
.internationalComparisonLg {
    border:3px solid #9D4F09;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -4px -122px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 13px;
    top : 10px;
}
.stateProfileLg {
    border:3px solid #680c0d;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -3px -161px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 10px;
    top : 10px;
}
.conferenceLg {
    border:3px solid #015389;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -6px -164px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 13px;
    top : 10px;
}
.exhibitionLg {
    border:3px solid #6A067A;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -7px -83px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 13px;
    top : 10px;
}
.lectureLg {
    border:3px solid #9D4F09;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -6px -43px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 13px;
    top : 10px;
}
.travelLg {
    border:3px solid #086C32;
    background-image: url("../ctepImages/home/nisIconsHome.png");
    background-repeat: no-repeat;
    background-position: -6px -124px;
    width : 44px;
    height : 44px;
    cursor : pointer;
    border-radius : 100%;
    position : absolute;
    left : 13px;
    top : 10px;
}
.footNote {
    position : absolute;
    bottom : 0;
    margin-right : 20px;
    font-size : 90%;
}
#footNoteSm {
    margin-bottom : 10px;
}
sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: super;
}
sup a:hover {
    text-decoration : none;
}
.highlightAbbr {
    color : #f00;
}
@media (max-width: 785px) {
    .conferenceLg,
    .travelLg,
    .exhibitionLg,
    .lectureLg {
        top : 16px;
    }
}

ul#cardList {
    width : 90%;
    margin : 10px 5%;
}
ul#cardListVertical {
    width : 90%;
    margin : 10px 5%;
}

td.courseTileBlock {
    width: 25%;
    height: 400px;
    color: #fff;
    border-bottom: 0;
}
.nbmCourseList td {
    padding: 20px 10px;
    text-align: center;
    position: relative;
}
.nbmCourseList td:hover {
    opacity: 90%;
}
.courseHighlight {
    font-size: 1.1em;
}
.instituteHighlight {
    position: absolute;
    bottom: 20px;
    font-size: 1.25em;
}
.pointToDetails {
    background: url(../nbmImages/arrow_right_big_sprite.png) top no-repeat;
    background-size: 100%;
    bottom: 10px;
    cursor: pointer;
    height: 66px;
    position: absolute;
    right: 10px;
    width: 34px;
}
.programInfoBox {
    margin: 10px 0px 20px;
    background: #f8f8f8;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.programDetailTable {
    margin-top: 10px;
    margin-bottom: 30px;
}
.programDetailTable,
.programDetailTable tr,
.programDetailTable td {
    border: 1px solid #ddd;
}
.programSectionTitle {
    text-align: center;
    background: #ccccff;
    font-weight: bold;
}
.programColumnTitle {
    background: #d8ffd8;
    font-weight: bold;
}
.programItemList {
    padding-left: 40px;
}
.nbmCourseList a,
.nbmCourseList a:hover,
.nbmCourseList a:active,
.nbmCourseList a:visited {
    color: #fff;
    text-decoration: none;
}

@media only screen and (min-width: 800px) {
    .quaternary1 {
        display: block;
    }
    .quaternary2 {
        display: none;
    }
    .quaternary3 {
        display: none;
    }
    #partnerLogoSet1 {
        display: block;
    }
    #partnerLogoSet2 {
        display: none;
    }
}

@media only screen and (min-width: 500px) and (max-width: 800px)  {
    .quaternary1 {
        display: none;
    }
    .quaternary2 {
        display: block;
    }
    .quaternary3 {
        display: none;
    }
    #partnerLogoSet1 {
        display: none;
    }
    #partnerLogoSet2 {
        display: block;
    }
}

@media only screen and (max-width: 500px)  {
    .quaternary1 {
        display: none;
    }
    .quaternary2 {
        display: none;
    }
    .quaternary3 {
        display: block;
    }
    #partnerLogoSet1 {
        display: none;
    }
    #partnerLogoSet2 {
        display: block;
    }
}
.programApplyContainer {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 10px 30px;
    background-color: #0f0;
    color: #000;
    border-radius: 5px;
}
.partnerLogoTable td {
    border-bottom : 0px;
    text-align: center;
    vertical-align: middle;
}
.partnerLogoTable img {
    width: 150px;
}

.confit-address {
    font-size: 0.9em;
}

.ne-container.noborder {
    border: 1px solid #ddd;
}
.noborder, .ne-container2.ne-panelhead.noborder {
    border: none;
    background: #29C3CB !important;
    background: #eee !important;
    color: #333 !important;
    padding: 2px !important;
}
.ne-container {
    padding: 0;
}
.newspanel2 {
    width: 47%;
    border: 1px solid #ccc;
    margin: 0 0 20px 15px;
    padding: 10px;
    line-height: 18px;
    height: 250px;
    overflow: hidden;
}
.ne-container .ne-panelhead {
    background: #eee !important;
    color: #108896;
    padding: 5px 10px 0 10px;
    overflow: auto;
}
.row, .clearfix {
    zoom: 1;
}
.botborder {
    clear: both;
    border-bottom: 1px solid #ddd;
    height: 2px;
    padding: 0;
}
.ne-content {
    padding: 10px;
}
.datehome {
    float: left;
    text-align: center;
    width: 75px;
    border: 1px solid #108896;
    margin: 0 10px 0 0;
    padding: 0;
}
.date_mm {
    background: #108896;
    color: #fff;
    font-size: 16px;
}
.date_dd {
    font-size: 16px;
    line-height: 22px;
    color: #108896;
}
#common p {
    color: #555;
}
.ne-content p {
    padding: 0 5px;
    margin: 0 0 10px 0;
}
.ne-more {
    float: right;
    text-align: right;
}
.ne-container .ne-panelhead h4 {
    font-size: 18px;
}
.ne-container .ne-panelhead a, .ne-container .ne-panelhead h4 {
    color: #108896 !important;
}
.noborder a, .noborder h4 {
    color: #108896 !important;
    padding: 0;
    margin: 0;
}
.ne-title {
    float: left;
    width: 60%;
    text-align: left;
}
.eventspanel2 {
    border: 1px solid #ccc;
    margin: 0 15px 20px 0px;
    padding: 10px;
    line-height: 18px;
    height: 250px;
    overflow: hidden;
    font-size: 0.9em;
}
@media (max-width: 992px) {
    .eventspanel2 {
        width: 100%;
    }
}
@media (min-width: 992px) {
    .eventspanel2 {
        width: 50%;
    }
}