@charset "utf-8";
/*about*/

/*MENU*/
#menu #index_left { display:none;}
#menu #index_right { display:none;}

/*TOP*/
#about_top {position:relative; width:100%;}
#about_top #topimg { width:100%; height:100%; background-position:center top; background-size: cover; }
#about_top #topimg .con { width:100%; height:100%; background:url(../images/about/topimg_txt.png) no-repeat 50% 55%;}
#about_top .top_bottom { position:absolute; bottom:0; z-index:1; width:100%; height:40px; background:url(../images/about/top_bottom.png) no-repeat center; background-size: 100% 40px;}
#about_top .top_bottom img { margin-top:-60px; cursor:pointer;}

#about_box1 { position:relative; background:#E9E7E7 url(../images/about/box1_bg.png) no-repeat center top;}
#about_box1 .box { margin:auto; width:80%; height:650px;}
#about_box1 .box_title { padding:30px 0;}
#about_box1 .box_list { padding:30px 0;}
#about_box1 .box_list .imgbox{ display:inline-block; position:relative; margin:0 20px; width:132px; height:145px; cursor:pointer;}
#about_box1 .box_list .imgbox .ico{ padding:20px 0 30px; height:100px; background:url(../images/about/box1_ico_bg.png) no-repeat center top;}
#about_box1 .box_list .imgbox.sel .ico { background-position: center -150px; -webkit-animation: imgbox_first .5s forwards; -moz-animation: imgbox_first .5s forwards;}
@-webkit-keyframes imgbox_first{
	0% { -webkit-transform:rotateY(0deg); background-position: center top;}
	49% { -webkit-transform:rotateY(90deg); background-position: center top;}
	50% { -webkit-transform:rotateY(90deg); background-position: center -150px;}
	100% { -webkit-transform:rotateY(0deg); background-position: center -150px;}
}
#about_box1 .box_txt { position:relative; padding:30px 0; font:18px/30px "Microsoft YaHei"; color:#2A2A2A;}
#about_box1 .box_txt .item { position:absolute; width:100%;}
#about_box1 .box_txt p { margin:0;}
#about_box1 .box_txt p.b { font-size:28px; line-height:50px;}
#about_box1 .box_link a {display:inline-block; width:150px; height:30px; border:1px solid #B5B5B5; border-radius:15px; font:14px/30px "Microsoft YaHei"; color:#0F0F0F; background:#FFFFFF; -webkit-transition: background .3s, color .3s; -webkit-transition: background .3s, color .3s;}
#about_box1 .box_link a:hover{background:#3F3F3F; color:#FFFFFF;}
#about_box1 .box_9th { padding:40px 0; background:#FFFFFF;}

#about_box2 { position:relative; width:100%;}
#about_box2 .swiper-container { position:absolute; width:100%; height:100%;}
#about_box2 .swiper-slide { background-position: center; background-size: cover; }
#about_box2 .swiper-slide .con { position:absolute; width:100%; top:55%;}
#about_box2 .swiper-pagination { background:rgba(245,246,247,.5); bottom:0; border-bottom:1px solid #DEDEDE;}
#about_box2 .swiper-pagination .swiper-pagination-bullet { margin:0 -1px 0 0; width:260px; height:20px; border:1px dotted #000000; border-bottom:0; border-top:0; border-radius:0; background:#FFFFFF; color:#222222; font:11px/20px Arial;}
#about_box2 .swiper-pagination .swiper-pagination-bullet-active { background:#1E1E1E; color:#ACACAB;}

#about_box3 { padding:0 0 30px;}
#about_box3 .box { position:relative; padding:60px 0 100px; background: url(../images/about/box3_bg.gif) center -100px;}
#about_box3 .box_title { padding:20px 0;}
#about_box3 .box_con { padding:42px 0 60px;}
#about_box3 .box_bottom { position:absolute; bottom:-30px; width:100%; height:130px; background:url(../images/about/box3_bottom.gif) no-repeat center;}

#about_box4 {}
#about_box4 .box_title { padding:35px 0 0; height:305px;}

#about_box5 { position:relative; padding:0 0 80px;}
#about_box5 .box{ width:100%; height:724px; background:url(../images/about/box5_bg.gif) repeat-x center;}
#about_box5 .box .list_box{ margin:auto; padding-top:108px; width:508px; height:508px;}
#about_box5 .box .list{ margin:auto; width:508px; height:508px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}
#about_box5 .box .list .item{ float:left; position:relative; margin:4px; width:230px; height:230px; border:8px solid #816E4E; cursor:pointer; overflow:hidden;}
#about_box5 .box .list .item .square{ position:absolute; right:10px; bottom:10px; width:20px; height:20px; background:#816E4E;}
#about_box5 .box .list .item .title{ position:absolute; top:0px; left:0px; padding:12px 0; width:170px; height:130px; border-bottom:1px solid #816E4E; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);}
#about_box5 .box .list .item .con{ position:absolute; top:200px; left:120px; padding:40px 0 0; width:344px; height:142px; background:#FFFFFF; font:16px "Microsoft YaHei"; color:#816E4E; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transition:top .3s, left .3s;}
#about_box5 .box .list .item:hover .con{ top:80px; left:0px;}
#about_box5 .box .list .item .img{ position:absolute; top:-160px; left:-240px; width:344px; height:182px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transition:top .3s, left .3s;}
#about_box5 .box .list .item:hover .img{ top:-40px; left:-120px;}