<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.dowebok.com/98/css/animate.min.css">
<style>
.dowebok .area1 { background-color: #fff;}
.dowebok .area1 .list1 { position: relative; width: 1200px; height: 496px; margin: 0 auto; list-style-type: none;}
.dowebok .list1 .item0 {position:relative; width: 1200px; height:496px;}
.dowebok .list1 .item1 { left: 0; top: 0; background: url(images/1a.jpg) 0 0 no-repeat;}
.dowebok .list1 .item2 { left: 650px; top:-496px; background: url(images/1b.jpg) 0 0 no-repeat;}
.dowebok .area2 {}
.dowebok .area2 .list22 { position: relative; width: 1200px; height: 850px; margin: 0 auto; list-style-type: none;}
.dowebok .list22 .item33 { position: absolute;width: 1200px; height: 850px;}
.dowebok .list22 .item44 { left: 0; top: 0; background: url(images/2a.jpg) 0 0 no-repeat;}
.dowebok .list22 .item55 { left: 552px; top: 0px; background: url(images/2b.jpg) 0 0 no-repeat;}
.dowebok .list22 .item66 { left:552px; top:400px; background: url(images/2c.jpg) 0 0 no-repeat;}
</style>
</head>
<body>
<div class="dowebok">
<div class="area1">
<ul class="list1">
<li class="item0 item1 wow bounceInLeft"></li>
<li class="item0 item2 wow bounceInRight"></li>
</ul>
</div>
<div class="area2">
<ul class="list22">
<li class="item33 item44 wow bounceInLeft"></li>
<li class="item33 item55 wow bounceInRight" data-wow-delay="0.3s"></li>
<li class="item33 item66 wow bounceInRight" data-wow-delay="0.6s"></li>
</ul>
</div>
</div>
<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};
</script>
</body>
</html>