@charset "utf-8";
.container { position: relative; width: 100%; }




.Area-hd { font-size:44px; color:#0797ea; text-align:center; background:url(../images/hd.png) no-repeat center; }


.aArea { background:url(../images/aarea.png) no-repeat top center #f7f7f7; padding:70px 0 0 0; }
.aArea-bd { margin:30px 0 0 0; }
.aArea-bd .hd ul { width:519px; margin:0 auto;  }
.aArea-bd .hd ul li { float:left; width:170px; border-right:1px solid #efefef; text-align:center; cursor:pointer; }
.aArea-bd .hd ul li span { display:block; margin-top:10px; color:#676767; font-size:16px; }
.aArea-bd .hd ul li p { display:block; margin-top:10px; color:#b2b2b2; text-transform:uppercase; }

.aArea-bd .hd ul li.on .img01 { display:none; }
.aArea-bd .hd ul li .img02 { display:none; position:relative; left:50%; margin-left:-30px; }
.aArea-bd .hd ul li.on .img02 { display:block; }
.aArea-bd .hd ul li.on span { color:#23a2eb; }

.aArea-bd .p { width:905px; margin:35px auto; line-height:27px; font-size:14px; text-align:center; }
.aArea-bd .bd { }

.aArea01 { position:relative; width:1186px; margin:0 auto; height:651px; overflow:hidden; }
.aArea01 .a1 { position:absolute; }
.aArea01 .a2 { position:absolute; left:0; top:0; background:url(../images/bg.png) repeat; text-align:center; display:none; }
.aArea01 .a2 span { display:block; color:#a9a9aa; text-transform:uppercase; }
.aArea01 .a2 h1 { color:#fff; font-weight:normal; }
.aArea01 .a2 a { display:block; }
.aArea01 .a2 a img { width:91px!important; height:34px!important; }
.aArea01 .a1:hover .a2 { display:block; }


.aArea01 .box01 {  left:0; top:-390px; width:589px; height:390px; opacity: 0;  }
.aArea01 .box01 img {  width:589px; height:390px; }
.aArea01 .box01 .a2 {  width:589px; height:390px;  }
.aArea01 .box01 .a2 span {  font-size:17px;  padding-top:135px; }
.aArea01 .box01 .a2 h1 { font-size:25px; margin-top:10px; }
.aArea01 .box01 .a2 a { margin-top:30px; }


.aArea01 .box02 { left:590px; top:-390px; width:265px; height:195px; opacity: 0; }
.aArea01 .box02 img { width:265px; height:195px; }
.aArea01 .box02 .a2 { width:265px; height:195px; }
.aArea01 .box02 .a2 span {  font-size:12px;  padding-top:70px; }
.aArea01 .box02 .a2 h1 { font-size:20px; margin-top:10px; }
.aArea01 .box02 .a2 a { margin-top:10px; }

.aArea01 .box03 { right:0; top:-390px; width:330px; height:390px; opacity: 0; }
.aArea01 .box03 img { width:330px; height:390px; }
.aArea01 .box03 .a2 { width:330px; height:390px; }
.aArea01 .box03 span {  font-size:12px;  padding-top:150px; }
.aArea01 .box03 h1 { font-size:20px; margin-top:10px; }
.aArea01 .box03 a { margin-top:10px; }

.aArea01 .box04 { left:-294px; bottom:0; width:294px; height:260px; opacity: 0; }
.aArea01 .box04 img { width:294px; height:260px; }
.aArea01 .box04 .a2 { width:294px; height:260px; }
.aArea01 .box04 .a2 span {  font-size:12px;  padding-top:80px; }
.aArea01 .box04 .a2 h1 { font-size:20px; margin-top:10px; }
.aArea01 .box04 .a2 a { margin-top:10px; }

.aArea01 .box05 { left:295px; bottom:-260px; width:294px; height:260px; opacity: 0; }
.aArea01 .box05 img { width:294px; height:260px; }
.aArea01 .box05 .a2 { width:294px; height:260px; }
.aArea01 .box05 .a2 span {  font-size:12px;  padding-top:80px; }
.aArea01 .box05 .a2 h1 { font-size:20px; margin-top:10px; }
.aArea01 .box05 .a2 a { margin-top:10px; }

.aArea01 .box06 { left:590px; bottom:-455px; width:265px; height:455px; opacity: 0; }
.aArea01 .box06 img { width:265px; height:455px; }
.aArea01 .box06 .a2 { width:265px; height:455px; }
.aArea01 .box06 .a2 span {  font-size:12px;  padding-top:180px; }
.aArea01 .box06 .a2 h1 { font-size:20px; margin-top:10px; }
.aArea01 .box06 .a2 a { margin-top:10px; }

.aArea01 .box07 { right:-330px; bottom:0; width:330px; height:260px; opacity: 0; }
.aArea01 .box07 img { width:330px; height:260px; }
.aArea01 .box07 .a2 { width:330px; height:260px; }
.aArea01 .box07 .a2 span {  font-size:12px;  padding-top:90px; }
.aArea01 .box07 .a2 h1 { font-size:20px; margin-top:10px; }
.aArea01 .box07 .a2 a { margin-top:10px; }


.bArea { background:url(../images/barea01.png) no-repeat top center; padding-top:100px; border-bottom:1px solid #e6e6e6; padding-bottom:37px; }
.bArea ul { width:1186px; margin:0 auto; }
.bArea ul li { float:left; margin-right:71px; width:180px; height:180px; text-align:center; }
.bArea ul li h1 { padding-top:40px; }
.bArea ul li p { font-size:20px; color:#000; margin-top:5px; }
.bArea ul li span { display:block; margin-top:10px; color:#fff; text-transform:uppercase; }

.bArea ul .li01 { background:url(../images/1.png) no-repeat; }
.bArea ul .li02 { background:url(../images/2.png) no-repeat; }
.bArea ul .li03 { background:url(../images/3.png) no-repeat; }
.bArea ul .li04 { background:url(../images/4.png) no-repeat; }
.bArea ul .li05 { background:url(../images/5.png) no-repeat; }

.cArea { background:url(../images/carea.jpg) no-repeat top center; padding:60px 0 0 0; height:791px; }
.cArea .Area-hd { background:url(../images/hd01.png) no-repeat center; }
.cArea-hd p { font-size:20px; color:#4a4a4a; text-align:center; margin:5px 0 10px; }
.cArea-hd { text-align:center; }
.cArea-hd span { display:block; font-size:14px; color:#c5c5c5; text-transform:uppercase; margin-bottom:20px; }

.cArea-bd { position:relative; }

.cAreabox { width:365px; position:absolute; }
.cAreabox h1 { font-size:26px; color:#000; font-weight:normal; background:url(../images/carea02.png) no-repeat left center; padding-left:30px; line-height:1; }
.cAreabox span { display:block; color:#cacaca; text-transform:uppercase; padding-left:30px; margin-top:10px; }
.cAreabox p { font-size:14px; color:#9c9c9c; border-top:1px solid #a6a6a6; padding-top:10px; margin-top:10px; }

.cArea01 { left:-365px; top:45px; opacity: 0; }
.cArea02 { left:-365px; top:320px; opacity: 0; }
.cArea03 { right:-365px; top:45px; opacity: 0; }
.cArea04 { right:-365px; top:320px; opacity: 0; }
.cArea05 { position:absolute; width:454px; left:50%; margin-left:-227px; top:20px; }

.dArea { background:#f6f6f6; padding-bottom:60px; }
.dArea-bd {  margin-top:40px; width:1200px; position: relative; }
#showcase { visibility: hidden; height:460px; border-radius: 8px; }
#showcase img { cursor: pointer; }

.eArea { margin-top:50px; padding-bottom:20px; }
.eArea-hd .p1 { text-align:center; font-size:18px; color:#b1b1b1; text-transform:uppercase; }
.eArea-hd .p2 { text-align:center; margin-top:50px; }

.eArea-bd { position:relative; margin-top:60px; background:url(../images/earea-bd.jpg) no-repeat center; }
.eArea-bd ul { height:160px;  }
.eArea-bd ul li { float:left; margin:0 35px; cursor:pointer; }
.eArea-bd ul li span { display:block; margin-top:10px; font-size:16px; text-align:center; font-weight:bold; }
.eArea-bd ul li .img02 { display:none; }
.eArea-bd ul li:hover .img02 { display:block; }
.eArea-bd ul li:hover .img01 { display:none; }

.eArea-bd .prev01,.eArea-bd .next01 { position:absolute; top:80px; display:block; width:26px; height:17px; z-index:999; }
.eArea-bd .prev01 { left:-30px; right:auto; background:url(../images/left.jpg) no-repeat; }
.eArea-bd .next01 { left:auto; right:-30px; background:url(../images/right.jpg) no-repeat; }

.eArea-bd .bd i { position:absolute; top:-149px; left:290px; font-size:38px; color:#0797ea; }
.eArea-bd .bd p { position:absolute; top:-156px; left:442px; width:480px; font-size:14px; color:#888; line-height:25px; }

.fArea { background:#f5f6f8; padding-bottom:20px; }
.fArea-hd { text-align:center; }
.fArea-bd { margin-top:40px; text-align:center; }

.fArea-bd ul { display:inline-block; *display:inline; zoom:1; }
.fArea-bd ul li { float:left; margin:0 10px; }


.imageflow{  position:relative; text-align:left; visibility:hidden; width:110%; height:360px!important; margin-left:-70px; overflow:hidden; }
.imageflow img { border:none; position:absolute; top:0px; visibility:hidden; -ms-interpolation-mode:bicubic; }
.imageflow p{ margin:0 auto; text-align:center; }
.imageflow .loading{ border:1px solid #ccc; height:15px; left:50%; margin-left:-106px; padding:5px; position:relative; visibility:visible; width:200px; }
.imageflow .loading_bar{background:#ccc; height:15px; visibility:visible; width:1%}
.imageflow .caption{font-weight:bold; position:relative; text-align:center; z-index:10000}
.imageflow .scrollbar{ position:relative; visibility:hidden; z-index:10001; height:1px; }
.imageflow .slider{height:14px; margin:-6px 0 0 -7px; position:absolute; width:14px; z-index:10002}
.imageflow .images{ overflow:hidden; white-space:nowrap; }
.imageflow img { width:340px!important; height:380px!important; }

.lck,.rck { display:block; position:absolute; bottom:0; height:360px; z-index:999; }
.lck { left:70px; width:408px; }
.rck { right:0; width:470px; }

.cArea01:hover{
    animation:animations 2s ease-out forwards;
}
.cArea02:hover{
    animation:animations 2s ease-out forwards;
}
.cArea03:hover{
    animation:animations 2s ease-out forwards;
}
.cArea04:hover{
    animation:animations 2s ease-out forwards;
}
@-webkit-keyframes animations{
    0%{}
    50%{transform:scale(1.1)}
    100%{ transform:scale(1) }
}