/* basic */
* {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	box-sizing: border-box;
	-webkit box-sizing: border-box;
	font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html {
    font-size: 20px;
}

body {
	line-height: 1.5;
	-webkit-text-size-adjust: none;
	-ms-overflow-style: scrollbar;
	color: #212529;
	font-size: .875rem;
	font-weight: 400;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

a {
	-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	text-decoration: none;
	cursor: pointer;
}
	a:hover {
		border-bottom-color: transparent;
	}


h1, h2, h3, h4, h5, h6 {
	color: #222226;
	font-weight: 500;
	line-height: 1rem;
}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
	}

h2 {
	font-size: 2.25rem;
	line-height: 1.5rem;
	letter-spacing: -0.035rem;
}
h3 {
	font-size: 1.75rem;
	line-height: 1.5rem;
	letter-spacing: -0.025rem;
}
h4 {
	font-size: 1.1rem;
	line-height: 1.5rem;
	letter-spacing: 0;
}
h5 {
	font-size: 0.9rem;
	line-height: 1.5rem;
	letter-spacing: 0;
}
h6 {
	font-size: 0.7rem;
	line-height: 1.5rem;
	letter-spacing: 0;
}

/* login-section */
#login-section{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: #000000cc;
    Z-INDEX: 105;
}
    #login-section .login-form {
        width: 400px;
        background: #ffffff;
        height: 300px;
        padding: 20px;
        border-radius: 20px;
        margin: auto;
        margin-top: 100px;
    }

/* page-wrapper */

#page-wrapper {
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition: -moz-transform 0.5s ease;
	-webkit-transition: -webkit-transform 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease;
	transition: transform 0.5s ease;
}


/* Header */
#main-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 102;
	width: 100%;
	height: 48px;
	background: #fff;
	color: #222226;
	font-size: 14px;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
	white-space: nowrap;
}
	
	#header-icon {
		height: 100%;
		float: left;
		margin: 0 8px 0 20px;
	}
		#header-icon > a {
			display: flex;
			height: 100%;
		}
			#main-header #header-icon > a > img {
				height: 29px;
				margin: 9px 0 0 0;
			}	
	
	#main-header #header-nav {
		height: 100%;
		float: left;
	}
		#main-header #header-nav > ul {
			float: left;
		}
		#main-header #header-nav > ul > li {
			float: left;
            padding: 0 .5rem;
		}
		#main-header #header-nav > ul > li:hover {
			background-color: #f0f0f5cc;
		}
			#main-header #header-nav > ul > li > a {
				display: inline-block;
				line-height: 48px;
				color: inherit;
				text-decoration: none;
				border: 0;
				text-align: center;
			}
			
			#main-header #header-nav > ul > li > ul {
				display: none;
			}
			#main-header #header-nav > ul > li:hover > ul {
				display: block;
			}
				#main-header #header-nav > ul > li > ul a {
					display: block;
					line-height: 32px;
					text-align: center;
					color: #222226;
				}
				#main-header #header-nav > ul > li > ul a:hover {
					color: #e74c3c;
				}
	
	#header-search {
		height: 100%;
		position: absolute;
		top: 0;
		right: 100px;
		margin: 0 20px 0 0;
	}
        #s-form-header {
            margin: 11px 0;
        }
        
        @keyframes searchwidth
        {
            0%   {width: 0rem;}
            100%  {width: 10rem;}
        }
        
        @-webkit-keyframes searchwidth
        {
            0%   {width: 0rem;}
            100%  {width: 10rem;}
        }
        
            #s-form-header #s-search:hover #s {
                width: 10rem;
                background-color: #fff;
                padding: 0 3rem 0 .5rem;
                animation: searchwidth .3s;
                -webkit-animation: searchwidth .3s;
            }
            #s-form-header #s-search:hover #s-submit{
                background-color: #e74c3c;
                color: #fff;
            }
                #s-form-header #s {
                    height: 24px;
                    width: 0rem;
                    border-radius: 13px;
                    border: #e74c3c 1px solid;
                    outline: none;
                    padding: 0 2.5rem 0 .5rem;
                    color: #c0c0c6;
                    position: absolute;
                    right: 0;
                    background-color: #ffffff00;
                }
                #s-form-header #s:focus {
                    color: #222223;
                }
        
                #s-form-header #s-submit {
                    width: 3rem;
                    height: 24px;
                    color: #e74c3c;
                    border-radius: 13px;
                    background-color: #ffffff00;
                    cursor: pointer;
                    border: #e74c3c 1px solid;
                    position: absolute;
                    right: 0;
                }
                
    #main-header #header-login{
        float: right;
        margin: 0 20px;
    }
        #main-header #header-login > ul{
            float: right;
        }
            #main-header #header-login > ul > li {
                float: right;
                padding: 0 1px;
            }
            
                #main-header #header-login > ul > li > a {
                    display: inline-block;
                    line-height: 48px;
                    color: inherit;
                    text-decoration: none;
                    border: 0;
                    text-align: center;
                    padding: 0 5px;
                }
                #main-header #header-login > ul > li > a:hover{
                    color: #e74c3c;
                }
                #main-header #header-login > ul > li > span{
                    border-left: #222226 1px solid;
                    line-height: 48px;
                    color: inherit;
                    text-decoration: none;
                    text-align: center;
                }
        
        #main-header #header-login #header-login-info{
            padding: 4px 4px 0 4px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        #main-header #header-login #header-login-info > ul{
            margin-top: 4px;
            display: none;
        }
        #main-header #header-login #header-login-info > ul > li {
            padding: 0 4px;
        }
        #main-header #header-login #header-login-info > ul > li > a {
            display: inline-block;
            line-height: 36px;
            color: inherit;
            text-decoration: none;
            border: 0;
            text-align: center;
            float: right;
        }
        #main-header #header-login #header-login-info > ul > li > a:hover {
            color: #e74c3c;
        }
        #main-header #header-login #header-login-info:hover{
            background-color: #f0f0f5cc;
        }
        #main-header #header-login #header-login-info:hover > ul{
            display: block;
        }
        #main-header #header-login .header-avater{
            height: 38px;
            background: #e74c3c;
            width: 38px;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: #ffffff 1px solid;
            box-shadow: #cfcfe4 3px 3px 10px;
        }
        #main-header #header-login .header-avater span {
            color: #ffffff;
            font-size: 1.1rem;
        }
            
    #navButton {
    	height: 100%;
    	float: right;
    	margin: 0 8px 0 30px;
    }
    	#navButton > a {
    		display: flex;
    		height: 100%;
            padding: 0 8px;
    	}
    		#main-header #navButton > a > img {
    			height: 25px;
    			margin: 11px 0 0 0;
    		}
            
#main-header.index {
	background: none;
	color:#fff;
	-webkit-box-shadow: none;
	box-shadow: none;
}
	#main-header.index #header-icon > a > img.white {
		display: block;
	}
	#main-header.index #header-icon > a > img.black {
		display: none;
	}
	#main-header #header-icon > a > img.white {
		display: none;
	}
	#main-header #header-icon > a > img.black {
		display: block;
	}
    #main-header.index #navButton > a > img.white {
    	display: block;
    }
    #main-header.index #navButton > a > img.black {
    	display: none;
    }
    #main-header #navButton > a > img.white {
    	display: none;
    }
    #main-header #navButton > a > img.black {
    	display: block;
    }
	#main-header.index #header-nav > ul > li:hover{
		background: none;
		color: #e74c3c;
	}
	#main-header.index #header-nav > ul > li:hover{
		background: #ffffff10;
		color: #e74c3c;
	}
		#main-header.index #header-nav > ul > li > ul a {
			line-height: 2rem;
			color: #fff;
		}
		#main-header.index #header-nav > ul > li > ul a:hover {
			color: #e74c3c;
		}
    
    #main-header.index #header-login > ul > li > span{
        border-left: #fff 1px solid;
    }
    #main-header.index #header-login #header-login-info:hover{
        background-color: #ffffff10;
    }
    
    #main-header.index #s-form-header #s {
        border: #fff 1px solid;
    }
    #main-header.index #header-login .header-avater{
        box-shadow: none;
    }


/* Banner */
@-moz-keyframes banner-bg-filter {
	0% { filter: blur(0px) brightness(80%) opacity(100%);}
	100% { filter: blur(30px) brightness(100%) opacity(20%);}
}
@-webkit-keyframes banner-bg-filter {
	0% { -webkit-filter: blur(0px) brightness(80%) opacity(100%);}
	100% { -webkit-filter: blur(30px) brightness(100%) opacity(20%);}
}
@-ms-keyframes banner-bg-filter {
	0% { filter: blur(0px) brightness(80%) opacity(100%);}
	100% { filter: blur(30px) brightness(100%) opacity(20%);}
}
@keyframes banner-bg-filter {
	0% { filter: blur(0px) brightness(80%) opacity(100%);}
	100% { filter: blur(30px) brightness(100%) opacity(20%);}
}
#banner-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -2;
	background-image:url("../../images/hills.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	-webkit-filter: blur(0px) brightness(80%);
	filter: blur(0px) brightness(80%);
}
	#banner-bg.normal {
		-webkit-filter: blur(30px) brightness(100%) opacity(20%);
		filter: blur(30px) brightness(100%) opacity(20%);
		-moz-animation: banner-bg-filter 1s;
		-webkit-animation: banner-bg-filter 1s;
		-ms-animation: banner-bg-filter 1s;
		animation: banner-bg-filter 1s;
	}

#banner {
	width: 100%;
	height: 100vh; 
	background: none;
	color: #fff;
}
	#daily-sentence {
		position: absolute;
		top:calc( ( 100vh - 23rem) / 1.8 );
		width:100%;
		height: 23rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}	
		#daily-box {
			text-align: center;
		}
		#daily-box > p {
			font-size: 1rem;
			color: #ffffff;
		}

		#daily-box > p.daily-title {
			font-size: 2.5rem;
			font-weight: 600;
			margin-bottom: 1rem;
		}
		#slide-box {
            max-width: 100%;
			margin: 1rem auto;
			display: flex;
			justify-content: center;
            overflow: hidden;
		}
			div.slide-page {
				margin: .5rem 1.5rem;
			}
			div.slide-page > a > div {
				height: 108px;
				width: 192px;
				background-image:url("../../pic/class-1.png");
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				display: flex;
				flex-direction: column-reverse;
				border-radius: .5rem;
				box-shadow: 1px 3px 10px #555;
                overflow: hidden;
			}	
				div.slide-page > a > div > p {
					background-color: #22222690;
					color: #fff;
					text-align: left;
					padding: 3px 6px;
					font-size: .75rem;
					border-radius: 0 0 0.5rem 0.5rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
				}
	div #up-gif {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
	}
		div #up-gif > img {
			width: 4rem;
		}
	

/* Main */
#index-main-bg {
	width:100%;
}

.container{
	width: 85rem;
	max-width: calc(100% - 5rem);
	margin: 0 auto;
	padding: 1rem 0;
	background: none;
}

.row{
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: flex-start;
}
	.row > .col-1 {
		width: 8.33%;
	}
	.row > .col-2 {
		width: 16.66%;
	}
	.row > .col-3 {
		width: 25%;
	}
	.row > .col-4 {
		width: 33.33%;
	}
	.row > .col-5 {
		width: 41.66%;
	}
	.row > .col-6 {
		width: 50%;
	}
	.row > .col-7 {
		width: 58.33%;
	}
	.row > .col-8 {
		width: 66.66%;
	}
	.row > .col-9 {
		width: 75%;
	}
	.row > .col-10 {
		width: 83.33%;
	}
	.row > .col-11 {
		width: 91.66%;
	}
	.row > .col-12 {
		width: 100%;
	}
    .row > .col-0-75 {
    	width: 6.25%;
    }
    .row > .col-3-5 {
    	width: 29.16%;
    }

.cell {
	display: inline-block;
	width: 100%;
}

/* Box */
.box {
	min-height: 12rem;
	margin: .3rem .3rem;
	padding: .5rem 1rem;
	background-color: #ffffff;
	border-radius: 0.6rem;
}
.box-L {
	min-height: 20rem;
}
	.box > header {
        display: flex;
        justify-content: space-between;
        height: 2rem;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 2rem;
        color: #222226;
        border-bottom: 1px solid #f0f0f2;
        margin: 0 0 8px 0;
	}
    .box > header a {
        font-size: .875rem;
        color: #aaaaaa;
    } 
    .box > header a:hover {
        color: #e74c3c;
    } 

.single-content {

	}
	.single-content > a {
		margin: 1rem 0 .625rem;
		font-size: 1.125rem;
		font-weight: 500;
		color: #222226;
		overflow: hidden;
		white-space: normal;
		word-break: break-word;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		line-height: 1.5rem;
		border: 0;
	}
		.single-content > a:hover{
			text-decoration: underline;
		}
	.single-content > div {
		padding-bottom: .875rem;
		border-bottom: 1px solid #f0f0f2;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		overflow: hidden;
	}
	.abstract {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
		.abstract > a > p {
			font-size: .875rem;
			font-weight: 400;
			color: #555666;
			overflow: hidden;
			white-space: normal;
			word-break: break-word;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	.kw-list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		color: #555666;
		font-size: .875rem;
	}
		.kw-list p {
			min-width: 2.5rem;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			align-items: center;
			cursor: pointer;
			margin-right: .5rem;
			white-space: nowrap;
		}
		.kw-list p:hover {
			color: #999aaa;
		}
		.kw-list p:hover .a {
			display: none;
		}
		.kw-list p:hover .b {
			display: inline-block;
		}
		.kw-list img {
			height: 1rem;
			margin-right: 4px;
		}
		.kw-list img.b {
			display: none;
		}
		.kw-list a {
			color: #555666;
			padding: 0 6px;
		}
		.kw-list a:hover {
			color: #fff;
			background-color: #999aaa;
			border-radius: 10px;
		}
		
	.thumbnail {
		margin-right: 1rem;
		padding: 2px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}
		.thumbnail a {
			position: relative;
			border-radius: 4px;
			width: 9rem;
			height: 5rem;
			display: inline-block;
			background-size: cover;
			background-position: 50%;
			overflow: hidden;
			background: #f5f6f7;
		}
		.thumbnail a img {
			width: 100%;
			height: auto;
		}

#about-us {
    padding: 0 3px;
    color: #555666;
    line-height: 1.5rem;
    font-size: .875rem;
}
#about-us a {
    color: #555666;
}
#about-us a:hover {
    color: #e74c3c;
}


ul.site-map {
	display: flex;
	flex-wrap: wrap;
}
	ul.site-map > li {
		width: 50%;
		padding: .5rem;
		border-radius: .5rem;
	}
	ul.site-map > li:hover {
		background-color: #f9f9f9;
	}
		ul.site-map > li > a {
			display: flex;
			align-items: center;
			font-size: 1rem;
			color: #555666;
		}
			ul.site-map > li > a > img {
				height: 1.2rem;
				margin-right: 6px;
			}
		ul.site-item {
			margin: 0 0 0 1.5rem ;
			color: #555666;
		}
		
	ul.site-map a {
		white-space: nowrap;
	}
	ul.site-map a:hover {
		color: #e74c3c;
	}

a.course-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #555666;
	margin-bottom: 3px;
	border-radius: .5rem;
	padding: 0 .5rem;
	white-space: nowrap;
}
	a.course-note:hover{
		background-color: #f0f0f2;
	}
	a.course-note > p {
		line-height: 1.5rem;
		font-size: .875rem;
		font-weight: 400;
		overflow: hidden;
        text-overflow:ellipsis;
	}
	a.course-note > img {
		height: 0.625rem;
	}
	a.course-note:hover {
		color: #e74c3c;
		font-weight: 600;
	}

div.course-rec > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #555666;
	margin-bottom: 3px;
	border-radius: .5rem;
	padding: 0 .5rem;
	white-space: nowrap;
}
	div.course-rec > a:hover{
		background-color: #f0f0f2;
	}
	div.course-rec > a > p {
		line-height: 1.5rem;
		font-size: .875rem;
		font-weight: 400;
		overflow: hidden;
        text-overflow:ellipsis;
	}
	div.course-rec > a > img {
		height: 0.625rem;
	}
	div.course-rec > a:hover {
		color: #e74c3c;
		font-weight: 600;
	}


div.dynamic-content {
	margin-left: .5rem;
	border-left: #8d8d8d 1px solid;
}
	div.dynamic-content > a {
		display: flex;
		align-items: center;
		font-size: 1rem;
		color: #555666;
		white-space: nowrap;
		overflow: hidden;
	}
	div.dynamic-content > a:hover {
		color: #e74c3c;
	}
		div.dynamic-content > a:hover > div {
			font-size: 1.25rem;
		}
		div.dynamic-content > a:hover > div > img {
			height: 1.25rem;
		}
		div.dynamic-content > a > div {
			height: 3rem;
			display: flex;
			align-items: center;
			margin-right: 2rem;
		}
			div.dynamic-content > a > div > img {
				height: 1rem;
				margin-right: 1rem;
			}

div.curation-article {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 3px;
	padding-left: .5rem;
	color: #555666;
	height: 2rem;
	border-radius: .5rem;
}
	div.curation-article:hover {
		background-color: #f9f9f9;
		color: #e74c3c;
	}
	div.curation-article > a {
		color: inherit;
		font-size: 1rem;
		font-weight: 400;
		white-space: normal;
		overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
	}


/* CTA */
#cta-bg {
	width: 100%;
	min-height: 12rem;
	background-color: #111111cc;
	/* background-color: rgba(6,6,11,0.2);	 */
}
.cta-gap {
	min-height: 1rem;
}
.cat-card {
	color: #9a9a9c;
	/* color: #222226; */
}
	.cat-card > header {
		font-size: 1.125rem;
		font-weight: 500;
		margin: 0 0 .75rem 0;
		/* border-bottom: 1px solid #f0f0f290; */
	}
	.cat-card > section {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: flex-start;
		margin: .5rem 0 0 0;
		font-size: .875rem;
	}
    .cat-card > section.contact-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: flex-start;
        margin: .5rem 0 0 0;
        font-size: .875rem;
    }
.contact-note {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    flex-direction: column;
	margin: 0;
    width: 33.3%;
    padding: 0 3px;
}
	.contact-note > div > img {
		width: 100%;
	}
	.contact-note > p {
        font-size: .75rem;
        text-align: center;
	}
	.contact-note:hover {
		color: #f0f0f2;
	}
	.contact-note:hover > div > img {
		/* width: 150%; */
	}
.class-note {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
    color: #9a9a9c;
}
	.class-note > p {
		overflow: hidden;
	}
	.class-note > img {
		height: 0.875rem;
	}
	.class-note:hover {
		color: #f0f0f2;
	}
.cta-links {
	width: 100%;
	font-size: .875rem;
	line-height: 1.2rem;
	border-top: 1px solid #bbbbbd15;
	padding: .5rem 0 .5rem 0;
}
.cta-links-first {
	border-top: none;
	padding: 0 0 .5rem 0;
}
	.cta-links li {
		display: inline-table;
		margin: 0 1rem 0 0;
	}
	.cta-links li a {
		color: #9a9a9c;
	}
	.cta-links li a:hover {
		color: #f0f0f2;
	}


/* Footer */
#footer {
	background: #222222;
	padding: 2rem 0;
	text-align: center;
}
#footer ul{
	font-size: 0.75rem;
	color: #bbbbbb;
	line-height: 1.3rem;
	/* color: #9a9a9c; */
}


/* 动态响应设计 */
/* Row */

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

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

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

	.row > .col-1 {
		width: 100%;
	}
	.row > .col-2 {
		width: 100%;
	}
	.row > .col-3 {
		width: 100%;
	}
	.row > .col-3 > .box {
		width: 49.5%;
	}
	.row > .col-4 {
		width: 100%;
	}
	.row > .col-5 {
		width: 100%;
	}
	.row > .col-6 {
		width: 100%;
	}
	.row > .col-7 {
		width: 100%;
	}
	.row > .col-8 {
		width: 100%;
	}
	.row > .col-9 {
		width: 100%;
	}
	.row > .col-10 {
		width: 100%;
	}
	.row > .col-11 {
		width: 100%;
	}
	.row > .col-12 {
		width: 100%;
	}
    
    #slide-box {
        flex-direction: column;
    }
        div.slide-page > a > div {
            width: 260px;
            height: 32px;
            border-radius: 13px;
            background-image: none !important;
        }
        div.slide-page > a > div > p {
            border-radius: 13px;
            font-size: 14px;
            line-height: 20px;
            padding: 6px 12px;
            color: #d5d5d5;
            font-weight: 600;
            background: none;
        }
}

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

	.row .col-50 {
		width: 100%;
	}
}

@media screen and (max-width: 660px) {
	
	/* #main-header {
		display: none;
	} */
	
	.row > .col-3 > .cell {
		width: 100%;
	}
}

@media screen and (max-width: 550px) {
	.container{
		max-width: calc(100% - 1rem);
	}

}

/* smartphone */

#navPanel, #navButton {
	display: none;
}

@media screen and (max-width: 660px) {
    #header-nav, #header-search {
        display: none;
    }
    #navButton {
    	display: block;
    	z-index: 10001;
    }
    
    #navPanel {
        display: block;
    	position: fixed;
    	top: -286px;
    	right: 0;
    	z-index: 101;
        padding: 48px 0 10px 0;
    	-moz-transition: top 0.5s ease;
    	-webkit-transition: top 0.5s ease;
    	-ms-transition: top 0.5s ease;
    	transition: top 0.5s ease;
        background-color: #f0f0f5dd; 
    }
    #navPanel.show {
        top: 0;
    }
        #navPanel ul#navList li {
            color: #222226;
        }
        #navPanel ul#navList li:hover {
            background-color: #f0f0f5;
            color: #e74c3c;
        }

        #navPanel ul#navList a {
            padding: 0 20px;
            font-size: 14px;
            color:inherit;
            line-height: 28px;
        }

    #navPanel.home {
        background-color: #66666690;
    }
        #navPanel.home ul#navList li {
            color: #ffffff;
        }
        #navPanel.home ul#navList li:hover {
            background-color: #666666;
            color: #e74c3c;
        }
        
    .box {
        padding: 0.5rem 0.75rem;
    }    
    .single-content > a {
        font-size: 1rem;
        margin: 1rem 0 0.25rem;
    }
    .abstract > a > p {
        font-size: .75rem;
    }
    div.thumbnail {
        display: none;
    }
    div.cat-card {
        padding: 0 12px;
    }
    div.cat-card a.class-note{
        padding-right: 40px;
    }
    div.dynamic-content > a > div {
        margin-right: 0;
    }
    div.dynamic-content > a > div > span {
        display: none;
    }
}