/* Unessential CSS - Just here to make this sample page prettier */

html, body {
    height: 100%;
    font-family: "微软雅黑", "Microsoft Yahei" !important;
}
body {
    margin: 0;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    background-color: #3c79b0;
}
.wrapper {
    margin: 0 auto; width: 600px;
    max-width: 800px;
    height: 100%; padding-left: 120px;
}
@media(max-width: 767px) {
    .wrapper{width:auto;}
}
header {
    background-color: #000;
}
header:after {
    content: " ";
    display: table;
    clear: both;
}
.brand, h1, h2, h3 {
    font-weight: 400;
    letter-spacing: 1px;
    font-family: "微软雅黑", "Microsoft Yahei" !important;

}
h4, h5, h6 {
    letter-spacing: 1px;
    font-family: "微软雅黑", "Microsoft Yahei" !important;
}
h1 {
    font-size: 28px;
    font-family: "微软雅黑", "Microsoft Yahei" !important;
}
p{
    margin: 0; padding: 0;
    font-family: "微软雅黑", "Microsoft Yahei" !important;

}

.main .dev-output pre {
    overflow: auto;
    max-height: 500px;
    background-color: #EBF4FD;
    padding: 0 1em 1em;
}
.brand {
    float: left;
    height: 80px;
}
.brand p {
    margin: 0;
}
.rm-nav {
    letter-spacing: 1px;
}
.logo {
    font-size: 1.4em;
    line-height: 40px;
    margin: 20px 0 0;
    width: 430px;
    height: 40px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    display: block;
    float: left;
    text-decoration: none;
    color: #fff;
    padding: 0;
}

.rm-toggle.rm-button {
    margin-top: 25px;
}

.rm-css-animate.rm-menu-expanded {
    max-height: none;
    display: block;
}
.rm-container.rm-layout-expanded {
    float: right;
}
.rm-nav li a,
.rm-top-menu a {
    padding: .75rem 1rem;
    font-size: .9em;
    line-height: 0.8rem;
    text-transform: uppercase;
}
.rm-layout-expanded .rm-nav > ul > li > a,
.rm-layout-expanded .rm-top-menu > .rm-menu-item > a {
    height: 80px; text-align: center; font-size: 14px;
}
.rm-layout-expanded .rm-top-menu > .rm-menu-item > a>p{
    font-size: 12px; padding: 0;margin: 0; display: inherit; line-height: 6px;
}
.main {
    background-image: url("../IMAGES/cloud.jpg");
    background-position: center top;
    background-repeat: repeat-x;
    min-height: 100%;
    padding-top: 1px;
}
.tagline {
    width: 360px;
    font-size: 1.75em;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.2;
    text-align: center;
    margin: 275px auto;
    color: #1A88D3;
}
.tagline strong {
    font-size: 1.3em;
}
.dev-output {
    background-color: #e1eaf3; /* fall-back */
    background-color: rgba(255,255,255,.85);
    color: #000;
    padding: 2em;
    margin-bottom: 2em;
}

/*f4*/
.f4{position:relative;background-color: #fff;padding-top:40px;}
.index_title{text-align: center;font-size: 30px;color: #666;width:1170px;margin:0 auto;margin-bottom:30px;}
.index_title span{display: block;font-size: 16px;color: #bbb;font-weight: lighter;}
.yx{overflow:hidden; position:relative; }
.zx{ border-bottom:1px solid #dfdfdf;overflow:hidden;width: 100%;text-align: center;margin:30px auto 40px;padding-bottom:40px;}
.zx li{position:relative;cursor:pointer;transition:.8s;text-align:center;display: inline-block;width: 90px;height:32px;font-size: 14px;line-height: 35px;color: #646464;}
.zx li:hover,.zx li.on{
    height:32px;
    background: #c49342;
    z-index: 3;
    color: #fff;}
.zx .on span{top: 32px;
    left: 35px;
    height: 9px;
    width: 13px;
    display: block;
    position: absolute;
    background: url(../IMAGES/sanjiaoxing.gif) center 0 no-repeat;}

.yx_left{text-align:center;transition:.8s;-webkit-transition:.8s;color: #8b8b8b;font-weight:lighter;font-size: 26px;float: left;width: 110px;border-right:1px solid #c9c9c9;}
.yx_left span{display:block;transition:.8s;-webkit-transition:.8s;color:#545454;font-size:60px;line-height: 48px;}
.yx_right a{transition:.8s;-webkit-transition:.8s;font-size: 18px;display: block;color: #545454;height:40px;}
.yx_right {    transition: .8s;
    -webkit-transition: .8s;
    width: 1000px;
    float: left;
    margin: 5px 0 0 20px;
    font-size: 14px;
    line-height: 22px;
    color: #989898;
    height: 82px;
    overflow: hidden;}
.yx_gd{ overflow:hidden; zoom:1;margin-bottom: 20px;}
.yx_gd li{ _display:inline;overflow:hidden; }
.yx_gd li>div{ padding: 40px 0;}
.yx_content{height:80px;width:100%; margin: 0 auto 0px;overflow:hidden;}
.yx_gd li>div:hover{ background: #f9f9f9;}
.yx_content:hover .yx_left{color:#c49342;border-color: #c49342;}
.yx_content:hover .yx_left span{color:#c49342;}
.yx_content:hover .yx_right a{color:#c49342;}
.yx_content:hover .yx_right{margin-left:15px;}
.f4_bg{transition:.5s;-webkit-transition:.5s;opacity:0;filter:alpha(opacity=0);display: block;position: absolute;width: 100%;top:280px;left:0;height:160px;background-color: #f9f9f9;}


/* 效果CSS开始 */
.mod18{width:696px;height: 560px;position:relative;margin:0 auto;}
.mod18 .btn{position:absolute;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
.mod18 .prev{left:10px;background:url(../IMAGES/prevBtn.png) no-repeat;}
.mod18 #prevTop,.mod18 #nextTop{top:250px;width:32px;height:48px;}
.mod18 #prev,.mod18 #next{top:490px;width:10px;height:16px;}
.mod18 #prevTop{background:url(../IMAGES/prevBtnTop.png) 0 0 no-repeat;}
.mod18 #nextTop{background:url(../IMAGES/nextBtnTop.png) 0 0 no-repeat;}
.mod18 .next{right:10px;background:url(../IMAGES/nextBtn.png) no-repeat;}
.mod18 li{float:left;}
.mod18 .cf li{position:relative;color:#fff;}
.mod18 .cf a{display:block;width:526px;height:377px;position:absolute;color:#fff;}
.mod18 .cf li span{display:block;width:486px;position:absolute;left:75px;bottom:0;padding:10px 20px;line-height:22px;text-align:left;/*background:rgba(0,0,0,0.6);*/filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
.mod18 .picBox{width:526px; height:394px; padding-left:75px; padding-right:76px;position:relative;overflow:hidden; /*background:#0D0D0D;*/ padding-top:40px;}
.mod18 .picBox ul{height:377px;position:absolute; left:0;}
.mod18 .picBox li{padding-left:75px; padding-right:1px; width:526px;height:377px;}
.mod18 .listBox{width:642px;height:100px;margin:0 auto;position:relative; padding-top:15px;overflow:hidden;}
.mod18 .listBox ul{height:88px;position:absolute; padding-left:12px;}
.mod18 .listBox li{width:119px;height:77px;cursor:pointer;position:relative; padding:5px 7px 0 0;}
.mod18 .listBox li i{display:none;}
.mod18 .listBox li a{display:block;width:108px;height:77px;}
.mod18 .listBox img{border:3px solid #fff;}
.mod18 .listBox .on img{border:3px solid #CECDCC;}
.mod18 .listBox .on{background:url(../IMAGES/img_bg.jpg) center top no-repeat;}
.mod18 .listBox .on i{display:block;}

@media(max-width: 750px){
    .mod18{width:100%;height:380px;position:relative;margin:0 auto;}
    .mod18 .cf a{display:block;width:100%;;height:162px;position:absolute;color:#fff;}
    .mod18 .cf li span{display:block;width:100%;;position:absolute;left:75px;bottom:0;padding:10px 20px;line-height:22px;text-align:left;/*background:rgba(0,0,0,0.6);*/filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
    .mod18 .picBox{width:230px; height:162px; padding-left:75px; padding-right:76px;position:relative;overflow:hidden; /*background:#0D0D0D;*/ padding-top:40px;}
    .mod18 .picBox li{padding-left:75px; padding-right:1px; width:230px;height:150px;}
    .mod18 .listBox{width:375px;;height:100px;margin:0 auto;position:relative; padding-top:15px;overflow:hidden;}
    .mod18 #prevTop,.mod18 #nextTop{top:95px;width:32px;height:48px;}


}