.left { text-align: left; float: left; position: relative; width: 900px;}
.right { text-align: left; float: right; position: relative; width: 130px;}

.top-recommended {padding-bottom: 48px; padding-top: 48px; background-color: #f8f8f8;}
.latest-news { padding-top: 48px; background-color: white;}

.follw-us {padding-top: 20px; padding-bottom: 68px; background-color: white;}


.area-title {font-weight: bold; width: 100%; margin-bottom: 36px; float: left; position: relative; color: #4e5456; text-align: left; font-family: Lato; font-size: 20px;}

.class-nav {padding-right: 15px; padding-left: 15px; border-left-color: #ebebeb; border-left-style: solid; border-left-width: 1px; float: left; position: relative; width: 100%;}
.class-nav .class-btn {height: 30px; width: 100%; color: #a0a0a0; line-height: 30px; font-size: 14px; float: left; position: relative;}
.class-nav .class-btn:hover, .class-nav .class-btn:active {color: #2ade73;}

.classnav-btn { display: none; color: #bbaa98; line-height: 48px; font-size: 14px; text-align: right; float: left; position: relative; width: 100%; height: 48px;}
.classnav-icon {padding-top: 15px; float: right; position: relative; height: 48px; width: auto;}
.classnav-icon span {margin-left: 9px; margin-bottom: 4px; clear: both; float: left; position: relative; background-color: #bbaa98; height: 3px; width: 30px;}
.classnav-label {font-family: sans-serif; padding-right: 10px; color: #bbaa98; font-size: 14px; height: 48px; line-height: 48px; cursor: pointer;}



.top-img { float: left; position: relative; width: 330px;}
.top-info { height: 244px; float: right; position: relative; width: 540px;}

/* news-list */
.news-list {display: inline-block; border-color: #a0a0a0; border-style: solid; border-width: 1px; margin-bottom: 48px; background-color: white; margin-right: 22px; margin-left: 22px; float: none; position: relative; width: 330px; border-radius: 5px;}


.flex {
	display : -webkit-flex;
	display: flex;  
   	
   	-webkit-align-items: center;
   	align-items: center;
   	
   	-webkit-justify-content: center;
    justify-content: center;
   
    -webkit-flex-direction: row;
    flex-direction: row;
}
.link-btn {height: auto; width: 100%; float: left; position: relative;}
.news-img {text-align: center; height: auto; width: 100%; float: left; position: relative; border-top-left-radius: 3px; border-top-right-radius: 3px; overflow: hidden;}
.news-img .img {display: inline-block; float: none; position: relative; width: 100%;}
/*
.news-img a { height: 100%; width: 100%; float: left; position: relative;}
.news-img a img { float: left; position: relative;}
*/

.info-temp { padding-left: 15px; padding-bottom: 15px; padding-right: 15px; padding-top: 0px; clear: both; position: relative; float: left; width: 100%;}
.info-temp h2 { font-style: normal; font-weight: normal; margin-bottom: 3px; line-height: 21px; clear: both; float: left; position: relative; width: 100%; color: #4e5456; font-size: 18px;}
.info-temp .mask {margin-top: 12px; width: 100%; clear: both; float: left; position: relative; margin-bottom: 15px; height: 110px;}
.info-temp .mask .text {z-index: 1; right: 0px; left: 0px; bottom: 0px; top: 0px; float: left; position: absolute; width: 100%; overflow: hidden; /*overflow-x: hidden; overflow-y: auto;*/}
.info-temp .mask .text p { height: auto; text-align: justify; clear: both; float: left; position: relative; width: 100%; color: #4e5456; font-size: 13px;}
.info-temp .mask .opacity {
	right: 0px; left: 0px; bottom: 0px; height: 50px; z-index: 2; float: left; position: absolute;
}
.g {
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(248,248,248,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(248,248,248,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(248,248,248,1) 100%);
}
.w {	
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

.pop-bar { margin-bottom: 15px; clear: both; float: left; position: relative; width: 100%;}
.pop-bar .name {text-align: left; padding-left: 3px; font-style: normal; font-weight: normal; line-height: 13px; width: 100%; margin-bottom: 8px; height: 13px; font-family: Lato; clear: both; float: left; position: relative; color: #4e5456; font-size: 13px;}
.bar-frame { float: left; position: relative; background-color: #ebebeb; height: 12px; width: 100%; border-radius: 18px; overflow: hidden;}
.bar-frame .bar {height: 12px; float: left; position: relative; width: 30%; background-color: #bbaa98;}

.specification { padding-left: 3px; clear: both; float: left; position: relative; width: 100%;}
.specification ul { font-family: Lato; margin-right: 10px; float: left; position: relative; width: auto;}
.specification label { font-style: normal; font-size: 13px; color: #212121; font-weight: normal; clear: both; float: left; position: relative; width: auto;}
.specification span { clear: both; color: #a0a0a0; font-size: 15px; font-style: normal; font-weight: normal; float: left; position: relative; width: auto;}

/* social */
.social {display: inline-block; margin-bottom: 48px; float: none; position: relative; margin-right: 12px; margin-left: 12px; border-radius: 5px;}
.social-img {-webkit-filter: grayscale(100%); filter: grayscale(100%); border-radius: 5px;}
.social-img:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%);}


.more-content { clear: both; float: left; position: relative; margin-top: 5px; padding: 0px; margin-bottom: 10px; color: #8b9094; font-size: 14px; text-align: justify; width: 100%; outline: none;}
.content-p { line-height: 160%; padding: 0px; margin: 0px; float: left; position: relative; height: 100%; width: 100%;}
.content-p span, .content-p a {line-height: 120%;}
.content-p a {text-decoration: underline;}
br {
	display: block;
    content: "";
    margin-top: 12px;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------
	media screen
------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1200px) {
	.left {width: 80%;}
	.right {width: 18%;}
	.top-img {float: none; position: relative; display: inline-block; width: 30%;}
	.top-info {width: 70%;}
}

@media screen and (max-width: 1024px) {
	
	.news-list { margin-right: 10px; margin-left: 10px; padding: 0px; width: 300px;}
	
	.left {width: 100%;}
	.right {width: 100%;}
	
	.top-recommended {padding-top: 0px;}
	.classnav-btn {display: block;}
	
	.class-nav { border-top-color: #bbaa98; border-top-style: solid; border-top-width: 1px; padding-right: 0px; padding-left: 0px; border-left-color: #bbaa98; border-left-style: solid; border-left-width: 1px; margin-right: 0px; margin-left: 0px; background-color: white; z-index: 100000000; margin-bottom: 20px; margin-top: 0px; float: left; position: relative; height: auto; display: none;}
	 .class-nav {width: 100%;}
	 
	 .class-nav .class-btn {text-align: center; font-family: Lato; padding-right: 8px; padding-left: 8px; height: 40px; color: #a0a0a0; line-height: 40px; font-size: 14px; float: left; position: relative;}
	
	.class-nav .class-all { border-right-color: #bbaa98; border-right-style: solid; border-right-width: 1px; clear: both; float: left; position: relative; border-bottom-color: #bbaa98; border-bottom-style: solid; border-bottom-width: 1px; width: 100%;}
	.class-nav .class-child {float: left; position: relative; border-bottom-color: #bbaa98; border-bottom-style: solid; border-bottom-width: 1px; border-right-color: #bbaa98; border-right-style: solid; border-right-width: 1px; width: calc(100% / 2);}
	.class-nav .active {color: white; background-color: #bbaa98;}
	
	.area-title {margin-bottom: 15px;}
}

@media screen and (max-width: 768px) {	
	.page-inner {text-align: center;}
	
	.top-img { width: 100%;}
	.top-info {height: auto; margin-top: 20px; width: 100%;}
	.top-info .info-temp {padding-right: 0px; padding-left: 0px;}
	.top-recommended, .follw-us {padding-bottom: 20px;}
	.social {margin: 10px;}
}

@media screen and (max-width: 480px) {
	.news-list { margin-bottom: 20px; padding: 0px; width: calc(100% - 20px);}
	.pop-bar {margin-top: 20px;}
	.mask {display: none;}
	
	.specification ul { font-family: Lato; width: 100%;}
	.specification label { color: #212121; clear: none; width: auto;}
	.specification span { padding-left: 10px; clear: none;}
}