/* CSS Document */
body{padding:0px; margin:0px; background:#FFF url(../images/b_body.gif) 0 0 repeat-x; color:#666; font:12px/14px Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, h4, img{
	padding:0px;
	margin:0px;
}
ul{list-style-type:none;}

.clear {clear: both; margin: 0px; height:0}

p a{font:12px/14px Arial, Helvetica, sans-serif; color:#151515; text-decoration:none;}
p a:hover{ color:#000; text-decoration:none;}

.headline{font:12px/14px Arial, Helvetica, sans-serif; color:#6c8ea7; font-weight:bold}

#container{width:800px; position:relative; margin:0 auto; padding-left:0px; padding-right:0px; background:#DDD}

/* TOP */
#colorbar{width:800px; height:20px; position:relative; background:url(../images/headercolorblock.png)0 0 no-repeat}
#colorbar ul.menu{margin: 00px 00px 00px 700px;position:absolute}
#colorbar ul.menu li{height:20px; margin-left:5px;float:left}
#colorbar ul.menu li a{height:20px; display:block}
#colorbar ul.menu li a:hover{height:20px;}

#topPan{width:762px; height:61px; background:#FFF;margin: 0px 20px auto; position:relative;}
#topPan img#logo{position:absolute; top:17px; left:6px}

#topPan ul.menu{position:absolute; top:27px; left:352px; width:420px}
#topPan ul.menu li{height:20px; margin-right:12px; float:left}
#topPan ul.menu li a{height:20px; display:block; text-indent:-20000px; }
#topPan ul.menu li a:hover{height:20px;}

#topPan ul.menu li.btn_1 a{width: 48px; background:url(../images/chn/btn_1.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_1 a:hover{width: 48px; background:url(../images/chn/btn_1_over.gif) 0 0 no-repeat;}

#topPan ul.menu li.btn_2 a{width: 79px; background:url(../images/chn/btn_2.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_2 a:hover{width: 79px; background:url(../images/chn/btn_2_over.gif) 0 0 no-repeat;}

#topPan ul.menu li.btn_3 a{width: 74px; background:url(../images/chn/btn_3.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_3 a:hover{width: 74px; background:url(../images/chn/btn_3_over.gif) 0 0 no-repeat;}

#topPan ul.menu li.btn_4 a{width: 85px; background:url(../images/chn/btn_4.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_4 a:hover{width: 85px; background:url(../images/chn/btn_4_over.gif) 0 0 no-repeat;}

#topPan ul.menu li.btn_5 a{width: 74px; background:url(../images/chn/btn_5.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_5 a:hover{width: 74px; background:url(../images/chn/btn_5_over.gif) 0 0 no-repeat;}

#topPan ul.menu li.btn_6{margin-right:0}
#topPan ul.menu li.btn_6 a{width: 63px; background:url(../images/chn/btn_6.gif) 0 0 no-repeat; }
#topPan ul.menu li.btn_6 a:hover{width: 63px; background:url(../images/chn/btn_6_over.gif) 0 0 no-repeat;}
/* HEADER */

#header{width:760px;height:340px; background:#FFF;position:relative; clear:both; margin: 0px 20px  auto}
#headerC01{width:400px; float:left; margin:20px 15px 0 20px; display:inline}
#headerC02{width:280px; float:left; background:#FFF; margin:20px 25px 0 10px; display:inline}
#headerC02 h2{height:19px; position:relative; margin-bottom:16px}
#headerC02 p {margin-bottom:15px; margin-left:3px}
#header img#picture{position:relative;background:url(../images/b_header.jpg) 0 0 no-repeat}
#header img#slogan{position:absolute; top:20px; left:150px}


@keyframes slide {
    from, to { top: 0; }
    12.5% { top: 0; }
    25% { top: -275px; }
    37.5% { top: -275px; }
    50% { top: -550px; }
    62.5% { top: -550px; }
    75% { top: -825px; }
    87.5% { top: -825px; }
}

@-moz-keyframes slide {
    from, to { top: 0; }
    12.5% { top: 0; }
    25% { top: -275px; }
    37.5% { top: -275px; }
    50% { top: -550px; }
    62.5% { top: -550px; }
    75% { top: -825px; }
    87.5% { top: -825px; }
}
@-webkit-keyframes slide {
    from, to { top: 0; }
    12.5% { top: 0; }
    25% { top: -275px; }
    37.5% { top: -275px; }
    50% { top: -550px; }
    62.5% { top: -550px; }
    75% { top: -825px; }
    87.5% { top: -825px; }
}
@keyframes index_1 {
    from, 25%, to { background-color: rgba(0,0,0,.5); }
    0% { background-color: rgba(255,0,0,.5); }
}
@keyframes index_2 {
    from, 50%, to {  background-color: rgba(0,0,0,.5); }
    25% {  background-color:rgba(255,0,0,.5); }
}
@keyframes index_3 {
    from, 75%, to {  background-color: rgba(0,0,0,.5); }
    50% {  background-color: rgba(255,0,0,.5); }
}
@keyframes index_4 {
    from, 100%, to {  background-color: rgba(0,0,0,.5); }
    75% {  background-color: rgba(255,0,0,.5); }
}

@-moz-keyframes index_1 {
    from, 25%, to { background-color: rgba(0,0,0,.5); }
    0% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_2 {
    from, 50%, to { background-color: rgba(0,0,0,.5); }
    25% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_3 {
    from, 75%, to { background-color: rgba(0,0,0,.5); }
    50% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_4 {
    from, 100%, to { background-color: rgba(0,0,0,.5); }
    75% { background-color: rgba(255,0,0,.5); }
}

@-webkit-keyframes index_1 {
    from, 25%, to { background-color: rgba(0,0,0,.5); }
    0% { background-color: rgba(255,0,0,.5); }
}
@-webkit-keyframes index_2 {
    from, 50%, to { background-color: rgba(0,0,0,.5); }
    25% { background-color: rgba(255,0,0,.5); }
}
@-webkit-keyframes index_3 {
    from, 75%, to { background-color: rgba(0,0,0,.5); }
    50% { background-color: rgba(255,0,0,.5); }
}
@-webkit-keyframes index_4 {
    from, 100%, to { background-color: rgba(0,0,0,.5); }
    75% { background-color: rgba(255,0,0,.5); }
}

#box{width:400px; height:275px; margin:1em auto; position:relative; overflow:hidden;}
.list{margin:0; padding:0; position:absolute;}
.list{
	animation: slide 20s infinite;
    -moz-animation: slide 20s infinite;
    -webkit-animation: slide 20s infinite;
}

.slide{vertical-align:bottom;}
.index{position:absolute; right:1em; bottom:1em;}
.index a{display:inline-block; width:20px; height:20px; line-height:20px; margin-left:.5em; border-radius:10px; background-color:rgba(0,0,0,.5); text-align:center; text-decoration:none!important; color:#fff;}
.index_1{
	 animation: index_1 20s step-end infinite;
    -moz-animation: index_1 20s step-end infinite;
    -webkit-animation: index_1 20s step-end infinite;
}
.index_2{
	animation: index_2 20s step-end infinite;
    -moz-animation: index_2 20s step-end infinite;
    -webkit-animation: index_2 20s step-end infinite;
}
.index_3{
	animation: index_3 20s step-end infinite;
    -moz-animation: index_3 20s step-end infinite;
    -webkit-animation: index_3 20s step-end infinite;
}
.index_4{
	animation: index_4 20s step-end infinite;
    -moz-animation: index_4 20s step-end infinite;
    -webkit-animation: index_4 20s step-end infinite;
}


/* CONTENT */
#blackbar{width:720px; height:40px; position:relative;margin:0px 40px auto; background:url(../images/chn/blackbar.png)}

#content{width:760px; position:relative; background:#FFF; clear:both; margin: 0px 20px auto}
#content h2{ margin: 18px 0px 0px 18px}
#content p{ margin: 10px 0px 0px 0px}
#content p1{ text-height:font-size:14px; margin: 18px 18px 18px 18px}
#imgcontent{width:760px; position:relative; background:#FFF; clear:both; margin: auto}
#c01{width:230px; float:left; margin:18px 15px 00px 0px; display:inline}
#c02{width:230px; float:left; margin:18px 10px 0 0;}
#c03{width:230px; float:left; margin:18px 10px 0 0;}

#txtcontent{width:720px; position:relative; background:#FFF; clear:both; margin: 20px 20px 20px 20px}
#imgcontent{width:760px; position:relative; background:#FFF; clear:both; margin: auto}
#img01{width:380px; height:auto;float:left; margin:18px 00px 00px 0px; display:inline}
#img02{width:380px;height:auto; float:left; margin:18px 00px 00px 0px}

#bluebcontent{width:230px;height:160px; float:left; margin:18px 15px 0 0;background:url(../images/profile.jpg) 0 0 no-repeat; display:inline}
#bluebcontent h2{margin: 10px 10px 0px 40px; color:#FFF}
#bluebcontent p{margin: 20px 10px 0px 50px; color:#FFF}

#orangecontent{width:230px; height:160px; float:left; background:url(../images/products.jpg) 0 0 no-repeat; margin:18px 10px 0 0;}
#orangecontent h2{margin: 10px 10px 0px 40px; color:#FFF}
#orangecontent p{margin: 20px 10px 0px 50px; color:#FFF}

#greencontent{width:230px;height:160px; float:left;background:url(../images/contact.jpg) 0 0 no-repeat;  margin:18px 0 0 0;}
#greencontent h2{margin: 10px 10px 0px 40px; color:#FFF}
#greencontent p{margin: 20px 10px 0px 55px; color:#FFF}

#bluebutton{width:190px;height:20px; float:left}
#orangebutton{width:244px;height:20px;float:left}
#greenbutton{width:240px;height:20px; float:left}

#btmbutton{width:60px; height:20px; position:relative; float: right}
#btmbutton ul.menu li{height:20px; margin-right:24px; float:left}
#btmbutton ul.menu li a{height:20px; display:block; text-indent:-20000px; }
#btmbutton ul.menu li a:hover{height:20px;}


#btmbutton ul.menu li.btn_more{margin:0px -70px auto}
#btmbutton ul.menu li.btn_more a{width:122px; height:40px;background:url(../images/chn/learnmore.png) 0 0 no-repeat; }
#btmbutton ul.menu li.btn_more a:hover{width:122px; height:40px; background:url(../images/chn/learnmore_over.png) 0 0 no-repeat;}

#btmbutton ul.menu li.btn_7 a{width:74px; height:20px;background:url(../images/chn/btn_7.png)0 0 no-repeat; }
#btmbutton ul.menu li.btn_7 a:hover{width:74px; height:20px; background:url(../images/chn/btn_7_over.png) 0 0 no-repeat;}

#btmbutton ul.menu li.btn_8 a{width:74px; height:20px;background:url(../images/chn/btn_8.png)0 0 no-repeat; }
#btmbutton ul.menu li.btn_8 a:hover{width:74px; height:20px; background:url(../images/chn/btn_8_over.png) 0 0 no-repeat;}

#btmbutton ul.menu li.btn_9 a{width:74px; height:20px;background:url(../images/chn/btn_9.png)0 0 no-repeat; }
#btmbutton ul.menu li.btn_9 a:hover{width:74px; height:20px; background:url(../images/chn/btn_9_over.png) 0 0 no-repeat;}

#content ul li{font:11px/14px Arial, Helvetica, sans-serif; background:url(../images/arrow.gif) 0 5px no-repeat; padding-left:16px; height:24px;}
#content ul li a{color:#205757; text-decoration:none;}
#content ul li a:hover{color:#205757; text-decoration:underline;}

.clear#end{height:15px}


/* FOOTER */

#footer{width:800px; height:56px; clear:both; background:#646874 }
#footer p{padding: 12px 0 0 0; font:11px/16px Arial, Helvetica, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:11px/16px Arial, Helvetica, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#fff}