@charset "utf-8";
body {padding-top: 0;/*background-color: #cbeff5;*/color: #000;}
.topArea01 { position:fixed; top:0; left:0; right:0; width:100%; z-index:999; }
.logo {position: relative; left: 0; width: 100%; }
.logom { display: none; position: relative; left: 0; width: 100%; }
.topArea01 .home,
.topArea01 .bak {position: absolute;top: 50%;right: 90px;width: 41px;height: 41px;transform: translateY(-50%);}
.topArea01 .home { background: url(../images/yun/yun3.png) no-repeat; z-index: 2; }
.topArea01 .bak { right: 183px; background: url(../images/yun/yun2.png) no-repeat; z-index: 2; }
.topArea01 .home a,
.topArea01 .bak a { display: block; width: 41px; height: 41px; }
.yun01 { position:fixed; left:0; top:0; right:0; bottom:0; background:url(../images/yun/yun.jpg) no-repeat center top; background-size: cover; z-index:5; }
.yun02 { position:fixed; left:0; right:0; bottom:18%; text-align:center; font-size:0; z-index:9; }
.yun02 a { display:inline-block; width:370px; height:80px; line-height:80px; margin:0 50px; color:#fff; font-size:26px; border-radius:80px; vertical-align: top; }
.yun02 a:nth-child(1) { background:linear-gradient(to bottom,#f04eb3,#db4897, #cb4385); }
.yun02 a:nth-child(2) { background:linear-gradient(to bottom,#62d4ff,#4ebeff, #3dabff); }

.container {background: url(../images/yun/container.jpg) no-repeat center bottom #f5f5f7;}

.city-banner { position: relative; left: 0; width: 100%; text-align: center; }
.city-banner-m { position: relative; left: 0; width: 100%; display: none; text-align: center; }

.g-in { width: 1200px; margin: 0 auto; }

.city { padding: 75px 0; }
.city .hd { margin-bottom: 30px; text-align: center; }
.city .hd h3 { font-size: 50px; font-weight: 100; line-height: 72px; }
.city .hd p { color: #5f5f5f; font-size: 20px; line-height: 30px; }

.city .bd ul { position: relative; margin-left: -2%; padding: 20px 0 20px; }
.city .bd li { position: relative; float: left; width: 23%; margin: 0 0 20px 1.8%; padding: 12px; border-radius: 15px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); text-align: center; box-sizing: border-box; }
.city .bd li .n {/*display: none;*/margin-top:5px;min-height: 48px;}

.fooooo { padding: 40px 0 30px; font-size: 20px; line-height: 2; }
.fooooo p { padding-left: 130px; }
.fooooo span { display: inline-block; width: 130px; margin-left: -130px; }
.f00000 { padding: 40px 0; font-size: 18px; line-height: 2; }


.csArea01 {position: fixed;top:150px;left:50%;margin-left: 240px;width: 340px;z-index:5;padding: 20px 10px;}
.csArea01 .p2 {position:relative;background:#fff;width: 340px;border-radius:10px;margin: 0 auto;}
.csArea01 .p2 .a1 { color:#0f6ed8; font-size:24px; font-weight:bold; padding:0 25px; height:60px; line-height:60px; cursor:pointer; }
.csArea01 .p2 .a1 i { display:block; background:url(../images/yun/cs01.png) no-repeat center right; }
.csArea01 .p2 .a2 { position:absolute; top:80px; width:100%; background:#fff; padding:10px 0; z-index:5; border-radius:5px; display:none; }
.csArea01 .p2 .a2:after { position:absolute;left:35px; top:-10px; display:block; content:""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #fff; z-index:5; }
.csArea01 .p2 .a2 .a2a { height:245px; overflow-y:auto; }
.csArea01 .p2 .a2 .a2a a { display:block; padding:0 20px; line-height:35px; color:#333; font-size:20px; }
.csArea01 .p2 .a2 .a2a a:hover { background:#f5f7fa; }
.csArea01 .p2 .a2 .a2a a.on { color:#0f6ed8; font-weight:bold; }
.csArea01 .p2 .a2 .a2a::-webkit-scrollbar-thumb { min-height:50px; border-radius:3px; background:#666; }
.csArea01 .p2 .a2 .a2a::-webkit-scrollbar-track { background:#ddd; }
.csArea01 .p2 .a2 .a2a::-webkit-scrollbar-corner { background:transparent; }
.csArea01 .p2 .a2 .a2a::-webkit-scrollbar { width:7px;height:7px; }
.csArea01 .p2.current .a1 i { background:url(../images/yun/cs03.png) no-repeat center right; }
.csArea01 .p2.current .a2 { display:block; }



@media(max-width:1366px){
    body { padding-top: 0; }
    .topArea01 .home,
    .topArea01 .bak { right: 40px; width: 30px; height: 30px; }
    .topArea01 .home { background-size: contain; }
    .topArea01 .bak { right: 120px; background-size: contain; }
    .topArea01 .home a,
    .topArea01 .bak a { width: 30px; height: 30px; }
    .yun02 a { width:400px; margin:0 10px; }
    .g-in { width: auto; padding-left: 6%; padding-right: 6%; }
    .csArea01 {position: fixed;top:150px;left:auto;margin-left: auto; right: 0; width: 340px;z-index:5;padding: 20px 10px;}
}

.cszhe { overflow: hidden; }

@media(max-width:768px){
    body { padding-top: 0; }
    .container {background: url(../images/yun/containerm.jpg) no-repeat center bottom fixed #fff;background-size: contain;}
    .logo { display: none; }
    .logom { display: block; }
    .topArea01 .home,
    .topArea01 .bak { right: 16px; width: 16px; height: 16px; }
    .topArea01 .home { background-size: contain; }
    .topArea01 .bak { right: 43px; background-size: contain; }
    .topArea01 .home a,
    .topArea01 .bak a { width: 16px; height: 16px; }
    .yun01 {background: url(../images/yun/yunm.jpg) no-repeat center top #0e85e4;background-size: contain;}
    .yun02 { bottom:15%; }
    .yun02 a {display:block;width: 70%;height:50px;line-height:50px;margin: 0 auto 3%;font-size:18px;}

    .city-banner { display: none; }
    .city-banner-m { display: block; }

    .city { padding-top: 25px; padding-bottom: 25px; }
    .city .hd { margin-bottom: 10px; text-align: center; }
    .city .hd h3 { font-size: 30px; line-height: 42px; }
    .city .hd p { font-size: 16px; line-height: 30px; }
    .city .bd li {width: 47%;padding: 12px 6px;}
    .city .bd li .n {/*display: none;*/margin-top: 8px;height: 36px;line-height: 18px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;min-height: 36px;}

    .fooooo { padding: 0; font-size: 14px; line-height: 2; }
    .fooooo p { padding: 6px 20px 6px 110px; }
    .fooooo span { width: 90px; margin-left: -90px; }
    .f00000 { padding: 20px; font-size: 14px; line-height: 2; text-align: center; }
    
    .csArea01 {/* position: relative; */top: 50px;left: auto;margin-left:0;width:auto;z-index:5;padding: 10px;}
    .csArea01 .p2 {width: 112px;border-radius:10px;}
    .csArea01 .p2 .a1 {font-size: 16px;padding:0 10px;height:40px;line-height:40px;}
    .csArea01 .p2 .a2 { top:60px; padding:10px 0;  }
    .csArea01 .p2 .a2 .a2a a { padding:5px 15px; line-height:20px; font-size:14px; }

    .cszhe iframe { height: 100vh; }
}
iframe {
    border: none;
}