@charset "utf-8";
.cover-box01{ height:1316px; background:url(../images/cover_bg01.jpg) no-repeat center 0;}
.cover-box02{ height:1784px; background:url(../images/cover_bg02.jpg) no-repeat center 0; }
.cover-box01 .inner, .cover-box02 .inner{ width:1000px; margin:0 auto; }

.cover-box01 .inner{ padding-top:610px;}
.cover-video{ width:584px; height:276px; background:url(../images/video_bg.png) no-repeat 0 0; padding-top:12px;}
.cover-video .video{ position:relative; width:560px; height:265px; margin-left:12px; }
.cover-video .video img, .cover-video .video a{ display:block; width:100%; height:100%; }
.cover-video .video a{ position:absolute; left:0; top:0; background:url(../images/video_btn.png) no-repeat center center;}

.fixed-box{ position:fixed; top:25%; right:5%; width:158px; height:250px; background:url(../images/fixed_bg.png) no-repeat 0 0; }
.fixed-box ul{ width:138px; padding-top:15px; padding-left:10px;}
.fixed-box ul li{ height:53px; line-height:53px; text-align:center; margin-bottom:1px; }
.fixed-box ul li a{ display:block; color:#02897d; font-size:24px; font-family:"Microsoft YaHei", "微软雅黑", "\5FAE\8F6F\96C5\9ED1";}

.steps-box{ color:#02897d; font-size:18px; text-align:center; font-family:"Microsoft YaHei", "微软雅黑", "\5FAE\8F6F\96C5\9ED1"; padding-top:50px;}
.steps-box .down-box{ float:left; width:100%;}
.steps-box .down-box .title{ float:left; width:165px; height:44px; }
.steps-box .down-box a{ float:left; width:166px; height:47px; margin-left:15px;}

.steps-box .circle01{ float:left; width:240px; height:240px; background:url(../images/circle_bg01.png) no-repeat 0 0; margin-top:50px;}
.steps-box .circle01 .pt70{ display:inline-block; padding-top:70px; }
.steps-box .arrow{ float:left; width:40px; height:64px; background:url(../images/arrow_icon.png) no-repeat 0 0; margin:138px 25px;}
.steps-box .circle02{ float:left; width:340px; height:280px; background:url(../images/circle_bg02.png) no-repeat 0 0; padding-top:60px;}

.match-box{ padding-top:50px;}
.match-box .title{ height:44px; margin-bottom:25px;}
.match-box .title img, .match-box .reqard img{ display:block; }
.match-box .reqard{ height:262px;}
.match-box ul li{ float:left; width:100%; color:#02897d; font-size:20px; font-family:"Microsoft YaHei", "微软雅黑", "\5FAE\8F6F\96C5\9ED1"; margin-bottom:8px; }
.match-box ul li .item{ float:left; width:23px; height:30px; font-size:18px; line-height:20px; text-align:right; font-weight:700; background:url(../images/num_icon.png) no-repeat left bottom; padding-right:5px; margin-right:10px; }
.match-box ul li .profile{ float:left; width:940px; line-height:30px; }
.match-box ul li .profile strong, .match-box ul li .profile span{ display:inline-block; vertical-align:middle; }
.match-box ul li .profile span{ color:#84eae0; font-size:18px; line-height:24px; background-color:#02897d; padding:0 20px; margin-left:10px; }
.match-box ul li .pl40{ padding-left:40px;}

#maskLayer{ display:none; position:fixed; left:0; top:0; z-index:999998; width:100%; height:100%; background-color:rgba(0,0,0,0.6); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#99000000", EndColorStr="#99000000"); _position:absolute; _height:0; _line-height:0;}
.mask-box{ display:none; position:fixed; left:0; top:0; z-index:999999; width:860px; height:500px; background:url(../images/opacity_bg.png) repeat 0 0; }
.mask-box .profile{ width:840px; height:480px; margin:10px;}
.mask-box .close{ position:absolute; right:-35px; top:0; width:35px; height:35px; text-align:center; line-height:35px; font-size:24px; font-weight:700; background:url(../images/opacity_bg.png) repeat 0 0; cursor:pointer;}


.container{ position:relative; height:3100px; overflow:hidden; }
.buttble{ position:absolute; left:46%; bottom:0; opacity:0;
    -webkit-animation-iteration-count:infinite; /*定义循环，infinite为无限次*/
    -webkit-animation-direction:normal; /*定义动画方式 */
    -webkit-animation-timing-function:linear; /*动画频率，和transition-timing-function是一样的*/
    -moz-animation-iteration-count:infinite,infinite;
    -moz-animation-direction:normal,normal;
    -moz-animation-timing-function:linear;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:normal;
    -o-animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-timing-function:linear;
    z-index:1000;
}
.buttble img{ position:absolute; display:block; width:100%; height:100%;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-transform-origin:50% -100%; /* 设置旋转元素的基点位置 */
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:alternate;
    -moz-animation-timing-function:ease-in-out;
    -moz-transform-origin:50% -100%;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:alternate;
    -o-animation-timing-function:ease-in-out;
    -o-transform-origin:50% -100%;
    animation-iteration-count:infinite;
    animation-direction:alternate;animation-timing-function:ease-in-out;
    transform-origin:50% -100%;
}
@-webkit-keyframes fade{
    0%{opacity:0}
    40%{opacity:0.4}
    70%{opacity:0.7}
    95%{opacity:1}
    100%{opacity:0}
}
@-webkit-keyframes rightTop{ /* 定义 2D 转换起始结束坐标位置 */
    0%{-webkit-transform:translate(0,0)}
    100%{-webkit-transform:translate(900px,-1800px)}
}
@-webkit-keyframes leftTop{ /* 定义 2D 转换起始结束坐标位置 */
    0%{-webkit-transform:translate(0,0)}
    100%{-webkit-transform:translate(-900px,-1900px)}
}
@-webkit-keyframes clockwiseSpin{
    0%{-webkit-transform:rotate(-250deg)}
    100%{-webkit-transform:rotate(50deg)}
}
@-webkit-keyframes counterclockwiseSpinAndFlip{
    0%{-webkit-transform:scale(0,0) rotate(50deg)}
    100%{-webkit-transform:scale(1.5,1.5) rotate(-50deg)}
}

@-moz-keyframes fade{
    0%{opacity:0}
    40%{opacity:0.4}
    70%{opacity:0.7}
    95%{opacity:1}
    100%{opacity:0}
}
@-moz-keyframes rightTop{ /* 定义 2D 转换起始结束坐标位置 */
    0%{-moz-transform:translate(0,0)}
    100%{-moz-transform:translate(1000px,-1500px)}
}
@-moz-keyframes leftTop{ /* 定义 2D 转换起始结束坐标位置 */
    0%{-moz-transform:translate(0,0)}
    100%{-moz-transform:translate(-1000px,-1500px)}
}
@-moz-keyframes clockwiseSpin{
    0%{-moz-transform:rotate(-250deg)}
    100%{-moz-transform:rotate(50deg)}
}
@-moz-keyframes counterclockwiseSpinAndFlip{
    0%{-moz-transform:scale(0,0) rotate(50deg)}
    100%{-moz-transform:scale(1.5,1.5) rotate(-50deg)}
}