* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type=button],input[type=submit],input[type=file],select{
  -webkit-appearance:none;
  outline:none;
}
body{
  font-family:"微软雅黑","Microsoft Yahei";
  background: #fff;
  font-size: 12px;
}
img{width: 100%;display: block;}
a{color: #333;}
a:active{opacity: .8;
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity= 80)';
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}

.viewport {
  padding: 0;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
}
#row1{position: relative;}
.single-item1 .slick-dots{
    position: absolute;
    z-index: 999;
    bottom: 55px;
    width: 100%;
    text-align: center;
}

.single-item1 .slick-dots li{
    display: inline-block;
    margin: 0 5px;
}

.single-item1 .slick-dots li button{
    font-size: 0;
    padding:0;
    width: 12px;
    height:12px;
    background:#fff;
    border:0;
    border-radius: 50%;
}
.single-item1 .slick-dots li.slick-active button{
    background: #01a6de;
}
#row1{position: relative;}
#row1 a{position: relative; display: inline-block; padding:0 15px; line-height:32px;background:rgba(0,0,0,0.6);left: 20px; bottom:105px; color: #fff;font-size: 15px; font-weight: bold;letter-spacing:3px;}

#row2{position: relative;}
#row2 .txt-box{position: absolute;top: 15%;width: 94%;margin: 0 3%;background:rgba(0,0,0,0.7);padding:20px 0;}
#row2 .txt-box .txt-1{float: left; width: 65%; color: #fff;padding:0 10px;border-right: 1px solid #ccb7c4;min-height: 115px;}
#row2 .txt-box .txt-1 h2{font-size: 20px;line-height: 20px;}

#row2 .txt-box .txt-1 p{padding-top: 10px;}
#row2 .txt-box .txt-2 h1{font-size: 20px;line-height:60px;color:#01a6de;padding-top: 25px;}
#row2 .txt-box .txt-2{text-align: center;}
#row2 .txt-box .txt-2 a{display: inline-block; background: #01a6de; color:#fff; line-height: 30px; width: 30%; text-align: center;border-radius: 3px;}

#row3{position: relative;}
#row3 .pic-box{position: absolute; top: 0; width: 100%;padding: 0 5%;}
#row3 .pic-box ul{margin:0 -3px;}
#row3 .pic-box ul li{padding:5px 3px;width: 50%; float: left;}
#row3 .pic-box ul li a{display: block;width: 100%; height: 100%;position: relative;overflow: hidden;}
#row3 .pic-box ul li .box{position: absolute; width: 100%; height: 100%;/*top: 200px;*/top: 100%; left: 0;background:url(../images/p-box.png) repeat-x left top;background-size: 100% 100%; z-index: 99; color: #fff;padding: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;}
#row3 .pic-box ul li a:hover .box{top: 0;}
#row3 .pic-box ul li h3{font-size: 13px; line-height: 13px;padding-bottom: 5px;border-bottom: 1px solid #fff;margin-bottom: 8px;}
#row3 .pic-box ul li p{font-size: 12px;}
#row3 .pic-box ul li span{position: absolute;bottom: 5px;left: 5px;font-size: 14px; color: #fff;}
#row3 .pic-box ul li a:hover span{display: none;}
#row4{position: relative;}
#row4 .txt-a{position: absolute; top: 20px;width:94%;margin:0 3%;background: rgba(0,0,0,0.6);}
#row4 .txt-a ul{overflow: hidden;padding: 3px;}
#row4 .txt-a ul li{width: 50%; padding:4px; float: left;}
#row4 .txt-a .pic{position: relative;overflow: hidden;}
#row4 .txt-a .pic span{position: absolute; top: 0; left: 0; background: #7f5cff;color: #fff;display: inline-block; line-height: 20px;padding: 0 5px; text-align: center;}
#row4 .txt-a .pic p{position: absolute; bottom:0px; left: 0; width: 100%; max-height:80px; overflow: hidden; background:rgba(0,0,0,0.6);line-height: 14px;color: #fff;padding: 5px 3px;}
#row4 .txt-a .pic .s1{background:#ff685c;}             
#row4 .txt-a .pay{width: 100%; height: 30px; line-height: 30px; background:#01a6de; overflow: hidden;}
#row4 .txt-a .pay span{width:50%; text-align: center;float: left;color:#01a6de; background: #fff;font-size: 16px; font-weight: bold;position: relative;}
#row4 .txt-a .pay span:after{
    content: '';position: absolute;left: 100%;bottom: 0;
    width: 20px;height: 100%;
    background: url(../images/a-bg.png) no-repeat left bottom;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
}
#row4 .txt-a .pay a{width:40%; text-align: center;float: right;color: #000;}
#row4 .txt-a .pay span em{font-size: 12px;vertical-align: top; color:#333;}
#row4 .txt-a .pay span i{font-size: 12px; color:#01a6de;font-style: normal; }
#row4 .txt-a .t-a{text-align: center;clear: both;}
#row4 .txt-a .btn{display: inline-block; text-align: center; width: 40%; line-height: 34px; font-size: 14px; color: #fff; background: #01a6de; margin-bottom: 20px;border-radius: 5px; }
#row5{position: relative;}
.single-item2{
	width: 100%;
	padding: 5%;
	position: absolute;
	margin: 0 auto;
	top: -16px;
	left: 0;
}
.single-item2 a{
    display: inline-block;
}
.single-item2 .t-box{background: rgba(0,0,0,0.7); color: #fff;min-height: 400px;}
.single-item2 .t-box .txt{padding: 10px 10px 50px;}
.single-item2 .t-box .txt h2{border-bottom: 1px solid #fff; display: inline-block; padding: 0 5px 5px 0; font-style:italic;}
.single-item2 .t-box .txt p{overflow: hidden; letter-spacing: 2px; line-height:18px;}
.single-item2 .slick-dots{
    position: absolute;
    bottom: 5%;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    margin-left: -10px;
}

.single-item2 .slick-dots li{
    display: inline-block;
    margin:0 2px;
}
.single-item2 .slick-dots li button{
    font-size: 0;
    padding:0;
    width: 8px;
    height:8px;
    background:#c5c5c5;
    border:0;
    border-radius: 50%;
}
.single-item2 .slick-dots li.slick-active button{
    background: #4d4d4d;
}

.single-item2 .slick-arrow{
    position: absolute;
    z-index: 999;
    width: 20px;
    height: 40px;
    background:url(../images/a-l.png) no-repeat center center rgba(0,0,0,0.4);
    background-size: 12px 30px;
    font-size: 0;
    border: none;
}
.single-item2 .slick-arrow.slick-prev {
    top: 30%;
    left: 5%;
}
.single-item2 .slick-arrow.slick-next {
    top: 30%;
    right: 5%;
    background-image:url(../images/a-r.png); 
}
.last{ font-size: 12px; padding:10px 0 30px 0; text-align: center;}
