@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}

html,
body {
	min-height: 100%;
	width: 100%;
	margin: 0 auto;
	color: #666;
}

body {
	background: #fff;
	font-size: 16px;
	margin: auto;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a:hover,
a:focus {
	text-decoration: none;
}

i,
em {
	font-style: normal;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

img {
	max-width: 100%;
	border: none;
}

/*body{ -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none;  -khtml-user-select:none; user-select:none;}
html{-webkit-user-select:none;  -moz-user-select:none;  -ms-user-select:none;  user-select:none; -khtml-user-select:none;  }*/
input,
select,
textarea {
	outline: none;
}


input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	/* WebKit browsers */
	color: #d7d7d7;
}

input::-moz-placeholder,
textarea:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: #d7d7d7;
}

input::-ms-placeholder,
textarea::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: #d7d7d7;
}

input::-o-placeholder {
	/* Mozilla Firefox 19+ */
	color: #d7d7d7;
}

input::-ms-input-placeholder,
textarea:-ms-input-placeholder {
	/* Internet Explorer 10+ */
	color: #d7d7d7;
}

input[type='submit'],
input[type='reset'],
input[type='button'],
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


.over1 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.over2,
.over3,
.over4,
.over5,
.over6,
.over7,
.over9 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.over2 {	-webkit-line-clamp: 2;}

.over3 {	-webkit-line-clamp: 3;}

.over4 {	-webkit-line-clamp: 4;}

.over5 {	-webkit-line-clamp: 5;}

.over6 {	-webkit-line-clamp: 6;}

.over7 {	-webkit-line-clamp: 7;}

.over9 {	-webkit-line-clamp: 9;}


/* fonts特殊字体 */
@font-face {
	font-family: 'dincond-regular-webfont';
	src: url('../fonts/dincond-regular-webfont.eot');
	src: url('../fonts/dincond-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/dincond-regular-webfont.woff2') format('woff2'),
		url('../fonts/dincond-regular-webfont.woff') format('woff'),
		url('../fonts/dincond-regular-webfont.ttf') format('truetype'),
		url('../fonts/dincond-regular-webfont.svg#dincond-regular-webfont') format('svg');
}

@font-face {
	font-family: 'dincond-medium-webfont';
	src: url('../fonts/dincond-medium-webfont.eot');
	src: url('../fonts/dincond-medium-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/dincond-medium-webfont.woff2') format('woff2'),
		url('../fonts/dincond-medium-webfont.woff') format('woff'),
		url('../fonts/dincond-medium-webfont.ttf') format('truetype'),
		url('../fonts/dincond-medium-webfont.svg#dincond-medium-webfont') format('svg');
}


@font-face {
	font-family: 'dincond-bold-webfont';
	src: url('../fonts/dincond-bold-webfont.eot');
	src: url('../fonts/dincond-bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/dincond-bold-webfont.woff2') format('woff2'),
		url('../fonts/dincond-bold-webfont.woff') format('woff'),
		url('../fonts/dincond-bold-webfont.ttf') format('truetype'),
		url('../fonts/dincond-bold-webfont.svg#dincond-bold-webfont') format('svg');
}

@font-face {
	font-family: 'dincond-black-webfont';
	src: url('../fonts/dincond-black-webfont.eot');
	src: url('../fonts/dincond-black-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/dincond-black-webfont.woff2') format('woff2'),
		url('../fonts/dincond-black-webfont.woff') format('woff'),
		url('../fonts/dincond-black-webfont.ttf') format('truetype'),
		url('../fonts/dincond-black-webfont.svg#dincond-bold-webfont') format('svg');
}


@font-face {
	font-family: 'din-bold-webfont';
	src: url('../fonts/din-bold-webfont.eot');
	src: url('../fonts/din-bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/din-bold-webfont.woff2') format('woff2'),
		url('../fonts/din-bold-webfont.woff') format('woff'),
		url('../fonts/din-bold-webfont.ttf') format('truetype'),
		url('../fonts/din-bold-webfont.svg#din-bold-webfont') format('svg');
}

@font-face {
	font-family: 'din-light-webfont';
	src: url('../fonts/din-light-webfont.eot');
	src: url('../fonts/din-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/din-light-webfont.woff2') format('woff2'),
		url('../fonts/din-light-webfont.woff') format('woff'),
		url('../fonts/din-light-webfont.ttf') format('truetype'),
		url('../fonts/din-light-webfont.svg#din-light-webfont') format('svg');
}

@font-face {
	font-family: 'din-medium-webfont';
	src: url('../fonts/din-medium-webfont.eot');
	src: url('../fonts/din-medium-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/din-medium-webfont.woff2') format('woff2'),
		url('../fonts/din-medium-webfont.woff') format('woff'),
		url('../fonts/din-medium-webfont.ttf') format('truetype'),
		url('../fonts/din-medium-webfont.svg#din-medium-webfont') format('svg');
}

@font-face {
	font-family: "din-regular";
	src: url("../fonts/din-regular.woff2") format("woff2"),
		url("../fonts/din-regular.woff") format("woff"),
		url("../fonts/din-regular.ttf") format("truetype"),
		url("../fonts/din-regular.eot") format("embedded-opentype"),
		url("../fonts/din-regular.svg") format("svg");
}



@font-face {
    font-family: 'uni_san';
    src: url('../fonts/uni_sans_thin-webfont.woff2') format('woff2'),
         url('../fonts/uni_sans_thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}





.wrapper{ position: relative; width: 1200px; margin: 0 auto;}
.fl {float: left;}
.fr {float: right;}
.clear {clear: both;}
.clearfix:after {	content: '';	display: block;	clear: both;	width: 0px;	height: 0px;	overflow: hidden;}
img {	vertical-align: middle;	max-width: 100%;	border: none;	-webkit-tap-highlight-color: rgba(255, 0, 0, 0);	blr: expression(this.onFocus=this.blur());}


.img{ overflow: hidden;}
.img img{ width: 100%; height: 100%; object-fit: cover;}
.scale img{ width: 100%; height: 100%; transition: 1s;}
.scale:hover img{ transform: scale(1.03);}
.fushu{ position: relative; transition: all .2s linear; }
.fushu:hover{  transform: translate3d(0, -7px, 0);   /* box-shadow: 2px 2px 18px rgba(182,182,182,0.3); */ }




/*    hover 效果         */
.self{ position: relative;  transition: all 0.5s; cursor: pointer;}
.self:hover:before{
    content: "";    width: 220px;    height: 100%;    position: absolute;    top: 0;    left: -185px;    overflow: hidden;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,hsla(0,0%,100%,.05)),color-stop(50%,hsla(0,0%,100%,.15)),color-stop(100%,hsla(0,0%,100%,.05)));
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
	z-index: 55;
}
.self:before{  
	-webkit-animation: shine-left 1.2s infinite;
    -moz-animation: shine-left 1.2s infinite;
    -o-animation: shine-left 1.2s infinite;
    animation: shine-left 1.2s infinite;
 }
@-webkit-keyframes shine-left {
	0% {
		left: -180px
	}
	to {
		left: 150%
	}
}







/*      heard      */
.haeder{ position: relative;  height: 103px; z-index: 222; overflow: hidden; border-bottom: 1px solid rgba(236,236,236,0.3); }
.logo{ float: left; line-height: 102px; width: 390px;  }
.nav {  }
.nav li{ float: left; margin-top: 37px;  font-size: 18px; color: #dedede; }
.nav li a{ color: #666; margin: 0 11px; }
.nav li:last-child a{ margin-right: 0; }
.nav li.active a{ color: #333; font-weight: bold; }


.banner .nav li a{ color: #dedede; }
.banner .nav li.active a,
.banner .nav li:hover a{ color: #fff; }



.footer{ padding: 55px 0 15px; background: #819e82; }
.fotleft{ width: 370px; }
.fotleft .gotl{ display: block; margin-bottom: 15px; }
.fotleft p{ line-height: 18px; height: 18px; color: #fff; margin-top: 10px; }
.fotleft p img{vertical-align: top; }
.fotleft .vq{ font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 50px; }

.fotght{ margin-right: 125px;  }
.fotght li:first-child{ margin-left: 0; }
.fotght li{ float: left; margin-left: 34px; }
.fotght li a{ display: block; font-size: 16px; color: #fff; }
.fotght li div{ margin-top: 10px ; }
.fotght li div a{ font-size: 14px; color: #d9e0d9; transition: 0.2s; line-height: 26px; }

.scroll{ position: absolute; right: 0; top: -85px; width: 50px; height: 80px; z-index: 2; cursor: pointer; }
.erw{ position: absolute; width: 98px; height: 98px; right: 0; bottom: 0; }





.banner{ position: relative; }
.banner .haeder{ position: absolute; top: 0; left: 0; width: 100%; }
.banner .swiper-container{ height: 800px; padding-top: 105px; }
.banner .swiper-slide{  margin-top: 25px;}
.banner .swiper-slide .banleft{ transform:translateX(-20px); opacity:0; transition:all .5s; margin-top: 95px; }
.banner .ani-slide .banleft{ transform:translateX(0); opacity:1; }

.banner .stion{ text-align: center; width: 100%; bottom: 35px; font-size: 18px;  color: #c9d5ca;  font-family: arial; }
.banner .stion span.swiper-pagination-current{ color: #319234; font-size: 30px; }



.about{ margin-top: 78px; }
.title{ position: relative; font-size: 32px; color: #319234; font-weight: bold; margin-bottom: 40px; }
.title p{ margin-bottom: 15px; }
.title .imgtr{ position: absolute; right: 0; top: 0; }


.ableft{ width: 600px; height: 440px; }
.abright{ width: 540px; height: 440px; }
.abName{ font-size: 28px; font-weight: bold; color: #333; line-height: 1; }
.abtook{ line-height: 35px; color: #666; margin: 25px 0 35px; height: 105px;  font-size: 16px;}
.Amore{ display: block; width: 120px; text-align: center; line-height: 40px; background: #319234; color: #fff;  font-size: 16px;}


.abul{ margin-top: 40px;}
.abul ul{ width: 640px; }
.abul li{ float: left;  width: 160px; margin-right: 40px; }
.abul li .mony{ font-size: 30px; color: #319234; font-family: 'din-bold-webfont'; }
.abul li .mony i{ font-size: 14px; color: #999; transform: translateY(-2px); display: inline-block; margin-left: 5px; }
.abul li p{ color: #333; font-size: 16px; }



.shcp{ margin-top: 78px;}
.shcp .imgtr li{ float: left; padding-left: 60px; border-left: 1px solid #d7d7d7; margin-left: 60px;  text-align: center; height: 72px; margin-top: 30px; cursor: pointer; }
.shcp .imgtr li:first-child{ border: 0; padding-left: 0; }
.shcp .imgtr li img{ height: 40px; }
.shcp .imgtr li .img2{ display: none; }
.shcp .imgtr li p{ margin-top: 10px; color: #999999; font-size: 16px; font-weight: normal; }
.shcp .imgtr li.active p{ color: #319234; }
.shcp .imgtr li.active .img1{ display: none; }
.shcp .imgtr li.active .img2{ display: inline-block; }


.cplista{ position: relative; margin-top: 60px; }
.cpleft{ position: relative; width: 550px; height: 385px; margin-top: 55px; background: url(../img/dd.png) no-repeat left top 160px; }
.palg{ position: relative; width: 135px; height: 52px; margin-top: 58px; }
.palg div{ width: 52px; height: 52px; margin: 0; top: 0; transition: 0.2s; opacity: 1 !important; outline: none;}
.palg .prev{ left: 0; background: url(../img/ple1.png) no-repeat center;  }
.palg .next{ right: 0; background: url(../img/pht1.png) no-repeat center; }
.palg .prev:hover{ background-image: url(../img/ple2.png); }
.palg .next:hover{ background-image: url(../img/pht2.png); }

.cpright{ width: 600px; }
.cpright li a{ display: block; height: 200px; border: 1px solid #e4e4e4; padding: 3px; }






.new{ padding: 78px 0 58px; background: #f8f8f8; margin-top: 78px; }
.nwleft,
.nwrght{ width: 580px;  }
.nwleft .img{ height: 435px; margin-bottom: 35px;  }

.nwTop{ border-bottom: 1px solid #e8e8e8; text-align: center; margin-top: -2px;}
.nwTop span{ display: inline-block; font-size: 20px; color: #999; margin: 0 30px; border-bottom: 3px solid transparent; padding-bottom: 8px; line-height: 1; cursor: pointer; }
.nwTop span.active{ color: #319234; border-color: #319234; }

.nwName{ font-weight: bold; font-size: 18px; color: #222; }
.nwTook{ color: #666; height: 48px; line-height: 24px; margin: 15px 0;}
.nwTime{ color: #999; }

.nwuli li{ position: relative; padding:  42px 0 38px 84px; border-bottom: 1px solid #e8e8e8;}
.nwuli li:last-child{ border-bottom: 0; }
.nwuli li span{ position: absolute; left: 0; top: 42px; font-size: 28px; color: #319234; font-family: 'din-bold-webfont';
 background: url(../img/pie.png) no-repeat left top 38px; height: 80px; }





.load{ padding: 15px 0;  color: #999;margin: 10px auto ; border-radius: 6px; background: #fff; cursor: pointer; text-align: center;}
.load img{ width:30px; margin-right: 10px;}

.load.on img{ animation: rot 2s linear infinite;  }
@keyframes rot{
	from{ transform: rotate(0); }
	to{ transform: rotate(360deg);}
}



/* 1-1关于 */
.home{ background: #f8f8f8;  }
.leftNav a{  display: inline-block; line-height: 60px; height: 60px; font-size: 16px; margin-left: 30px; }
.leftNav a.active{ color: #319234; font-weight: bold; }

.subNav{ color: #666; line-height: 60px;}
.subNav span{ display: inline-block; padding-left: 24px; background: url(../img/home.png) left center no-repeat;  font-size: 16px;}
.subNav a{ color: #999; font-size: 16px;}
.subNav a.active{ color: #319234; }

.nabout { padding-bottom: 120px; margin-top: 80px; }
.nabout .ableft{ position: relative; height: auto; padding-right: 30px; background: url(../img/nabg.jpg) no-repeat top 75px left -2px ; }
.bgimg{ margin-top: 22px; }
.nabout .ableft::before{ content: ''; position: absolute; right: 0; top: -10px; background: url(../img/bol.png) no-repeat center; width: 49px; height: 24px;  }
.nabout .abright { height: auto; }
.nabout .abright .abName{position: relative; font-weight: normal; }
.abName i{ position: absolute; right: 0; top: 0; }
.nabout .abright .abtook{ height: auto; margin: 25px 0 15px; line-height: 30px; text-align: justify;  font-size:16px;}
.nabout .abright .abul li .mony{ margin-top: -10px; }



/* 1-2发展 */
.fazlc{ background: url(../img/fzbg.jpg) no-repeat top center; padding: 80px 0 125px; }
.dli{ position: relative; background: url(../img/quan.png) no-repeat center top; padding-top: 100px;  z-index: 1;}
.dli::after{ content: ''; position: absolute;left: 50%; transform: translateX(-50%); top: 25px; width: 1px; height: 100%; background: #d7d7d7; z-index: -1; }
.dli li{ background: url(../img/libg.png) no-repeat center top 6px ; margin-top: -25px; }
.dli li .lect{ width: 560px; text-align: right; }
.dli li .lect span{ padding-left: 30px; background: url(../img/hr.png) no-repeat left center; display: inline-block;  font-size: 28px; color: #319234; font-family: 'din-bold-webfont'; }
.dli li .lect div{ line-height: 30px; color: #666; margin-top: 8px;}
.dli li .lect b{ color: #333 ; font-size: 20px;}
.dli li:nth-child(even) .lect{ float: right; text-align: left; }
.dli li:nth-child(even) .lect span{ padding:0 30px 0 0; background: url(../img/hl.png) no-repeat right center; }

.more{ text-align: center; color: #b1b1b1; margin-top: 22px; }
.more span{ cursor: pointer;  display: inline-block; line-height: 2;}




/* 1-3 */
.rrlist{ margin: 80px 0; }
.rrlist ul{ /*border-bottom:2px solid #c2ccc2 ;*/ margin-bottom: 28px;}
.rrlist ul:last-child{ border: 0; }
.rrlist li{ float: left; width: 280px; margin-right: 25px; margin-bottom: 25px; }
.rrlist li:nth-child(4n){ margin-right: 0; }
.rrlist li .img{ border: 2px solid #84ae86; height: 176px; }
.rrlist li p{ margin-top: 10px; text-align: center; color: #333; }

.rrlist .ul2 li .img{ height: 380px; border-color: #9c2f2e;}



/* 2 */
.huislist{ margin-bottom: 120px; }
.topTok{ text-align: center; margin: 80px 0 50px; line-height: 28px; }
.topTok .div0{ font-size: 28px; color: #333; }
.topTok .div1{ color: #999; text-transform: uppercase; margin:5px 0 25px; }
.topTok .div2{ color: #666; text-align: justify; text-indent: 2em;}

.ulist{ margin-top: 30px; }
.ultit{ color: #319234; padding-left: 15px; background: url(../img/sbg.png) no-repeat left center; font-size: 22px;}
.ultk{ line-height: 28px; }
.ulist li{position: relative; float: left; width: 280px; height: 200px; padding: 2px; border: 1px solid #d7d7d7; margin: 15px 25px 0 0; }
.ulist li:nth-child(4n){ margin-right: 0; }

/* 3 */
.cpAng{ margin: 80px 0 100px;}
.cpAng li{ float: left; width: 360px; margin: 0 60px 40px 0; }
.cpAng li:nth-child(3n){ margin-right: 0; }
.cpAng li p{ text-align: center;line-height: 54px; border-bottom: 1px solid #d7d7d7; }
.cpAng li .img{ position: relative; height: 250px; border: 1px solid #d7d7d7; }
.sec{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(49,146,52,0.5);  text-align: center; opacity: 0; transition: 0.3s;}
.sec img{ width: 65px; height: 65px; margin-top: 70px;}
.sec i{ display: block; margin-top: 5px; color: #fff;}
.cpAng li:hover .sec{ opacity: 1;}
.cpAng li:hover p{ color: #319234;  border-color: #319234;}


.ulist li .sec img,
.cpright li .sec img{ margin-top: 53px; width: 60px; height: 60px; }

.ulist li:hover .sec{ opacity: 1;}
.ulist li:hover p{ color: #319234;  border-color: #319234;}

.cpright li:hover .sec{ opacity: 1;}
.cpright li:hover p{ color: #319234;  border-color: #319234;}



.pagea{ text-align: center; margin: 35px 0 75px;}
.pagea a{ display: inline-block; text-align: center; width: 52px; line-height: 48px;border: 1px solid rgba(129,158,130,0.3); margin: 0 2px; font-family: arial; font-size: 18px; color: #333;}
.pagea .z-crt{ background: #819e82; color: #fff; border-color: #819e82; }
.pagea .prev,
.pagea .next{ width: 110px; }


/*  */
.news{ margin: 80px 0 100px; }
.news li{ margin-bottom: 30px;}
.news .img{ width: 280px; height: 200px; margin-right: 50px; }
.dl{ width: 100px; }
.dl dt{ color: #319234; font-size: 40px; font-family: arial; padding-top: 25px;}
.dl dd{ color: #999999; font-size: 20px; font-family: arial; }
.news .divfr{ width: 700px; margin-right: 50px; }
.newNmae{ font-size: 18px; font-weight: bold; color: #333333; padding-top: 30px;}
.newTook { color: #666; line-height: 28px; height: 56px; margin: 5px 0 35px; }
.newMore{ font-family: 'din-light-webfont'; color: #319234; }

.news li:hover{ background: #f6f6f6;  transition: 0.5s;}


/* 4-2 */
.msgli{ margin: 80px 0 100px; }
.msgli li{ float: left; width: 570px; margin: 0 60px 40px 0; }
.msgli li:nth-child(2n){ margin-right: 0; }
.msgli li .img{ width: 280px; height: 380px; }
.msgli li .dl{ float: none; position: relative; width: 100%; padding-top: 5px; }
.msgli li .dl dd{ position: absolute; bottom: 0; right: 0; }
.msgli li .divfr{ width: 235px; margin-right: 22px; }
.msgli li .newNmae{ padding-top: 45px; }
.msgli li .newTook{ height: 112px; margin-bottom: 70px;}


.lilibox{ background: url(../img/llbg.jpg) no-repeat center; height: 600px; padding-top: 60px; }
.tookne { line-height: 32px; font-size: 16px; color: #666; margin-top: 35px; font-family: '微软雅黑 Light'; }
.tookne b{ color: #319234; }




.yylist{ margin: 80px 0 100px;}
.yylist li{ width: 370px; float: left; margin: 0 45px 40px 0; }
.yylist li:nth-child(3n){ margin-right: 0; }
.yylist li .img{ height: 265px; }
.yylist li .newTook{ height: 84px; }
.yylist li .newNmae{ padding-top: 20px; }
.yylist li:hover .newNmae{ color: #319234; }


/*  */
.zplist{ margin: 80px 0 100px; }
.zplist li{ padding: 28px 20px ; border: 1px solid #f8f8f8;  transition: 0.3s; margin-bottom: 25px;}
.zplist li dt{ font-size: 20px; color: #999999; background-position: center left -30px; transition: 0.3s;  }
.zplist .ifr{ float: right; width: 18px; height: 18px; }
.zplist .ifr img{ width: auto; transition: 0.3s; }
.zplist li dd{ display: none; margin-top: 25px; line-height: 30px; color: #666666; }
.zplist li dd div{ width: 550px; }

.zplist li:hover,
.zplist li.on{ background: #f8f8f8; }
.zplist li:hover .ifr img,
.zplist li.on .ifr img{ transform: rotate(90deg); }
.zplist li:hover dt,
.zplist li.on dt{ background: url(../img/wt.png) no-repeat left 0 center; padding-left: 45px; color: #319234;}



.contus{ margin-bottom: 100px; }
.Tfop{ text-align: center; margin: 80px 0 70px;}
.Tfop ul{  }
.Tfop li{ float: left; width: 33.33%;}
.Tfop div{ font-size: 18px; color: #999999; margin-bottom: 15px; }
.Tfop p{ font-size: 16px; font-weight: bold; color: #666666; }

.fleft{ width: 545px;  }
.hello{ text-transform: uppercase; color: #319234; font-size: 30px; font-family: '微软雅黑'; }
.hell{ font-size: 18px; margin: 24px 0 35px; }


.contfrom{}
.contfrom .fbox{display: 100%; margin-bottom: 10px;  }
.contfrom .fbox input,
.contfrom .fbox textarea{ width: 100%; font-size: 16px; height: 60px; border: 1px solid #eaeaea; padding: 0 18px; background: url(../img/rrraa.png) no-repeat top right;}
.contfrom .fbox textarea{ height: 150px; padding: 18px; font-family: '微软雅黑'; resize: none; }

.fbtn { background: url(../img/fbg.jpg) no-repeat left 200px bottom; padding-bottom: 10px; }
.fbtn input{ width: 196px; height: 60px; background: #319234; color: #fff; border: 0;  font-size: 16px;}

.mapp,
.mapp img{ width: 600px; height: 487px; }