#Roll{position: absolute;top:0px;width: 100%;background-color:rgba(53,62,71,0.1);color: #fff;overflow: hidden;white-space:nowrap;}
#Roll div{font-size:16px;display:inline-block;min-width:100%;text-align:right;overflow: hidden;animation: marquee 19s linear infinite;-ms-animation: marquee 19s linear infinite;-moz-animation: marquee 19s linear infinite;-webkit-animation: marquee 19s linear infinite;-o-animation: marquee 19s linear infinite;}
@keyframes marquee {
    0% {
        transform:translateX(0%);
        -ms-transform:translateX(0%); /* IE 9 */
        -moz-transform:translateX(0%); /* Firefox */
        -webkit-transform:translateX(0%); /* Safari and Chrome */
        -o-transform:translateX(0%); /* Opera */
    }
    100% {
        transform:translateX(-100%);
        -ms-transform:translateX(-100%); /* IE 9 */
        -moz-transform:translateX(-100%); /* Firefox */
        -webkit-transform:translateX(-100%); /* Safari and Chrome */
        -o-transform:translateX(-100%); /* Opera */
    }
}
@-webkit-keyframes marquee {
    0% {
        transform:translateX(0%);
        -ms-transform:translateX(0%); /* IE 9 */
        -moz-transform:translateX(0%); /* Firefox */
        -webkit-transform:translateX(0%); /* Safari and Chrome */
        -o-transform:translateX(0%); /* Opera */
    }
    100% {
        transform:translateX(-100%);
        -ms-transform:translateX(-100%); /* IE 9 */
        -moz-transform:translateX(-100%); /* Firefox */
        -webkit-transform:translateX(-100%); /* Safari and Chrome */
        -o-transform:translateX(-100%); /* Opera */
    }
}
@keyframes before_first {
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); /* IE 9 */
        -moz-transform:rotate(0deg); /* Firefox */
        -webkit-transform:rotate(0deg); /* Safari and Chrome */
        -o-transform:rotate(0deg); /* Opera */
    }
    100% {
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /* IE 9 */
        -moz-transform:rotate(45deg); /* Firefox */
        -webkit-transform:rotate(45deg); /* Safari and Chrome */
        -o-transform:rotate(45deg); /* Opera */
    }
}
@-webkit-keyframes before_first {
    0% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); /* IE 9 */
        -moz-transform:rotate(0deg); /* Firefox */
        -webkit-transform:rotate(0deg); /* Safari and Chrome */
        -o-transform:rotate(0deg); /* Opera */
    }
    100% {
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /* IE 9 */
        -moz-transform:rotate(45deg); /* Firefox */
        -webkit-transform:rotate(45deg); /* Safari and Chrome */
        -o-transform:rotate(45deg); /* Opera */
    }
}
@keyframes before_last {
    0% {
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /* IE 9 */
        -moz-transform:rotate(45deg); /* Firefox */
        -webkit-transform:rotate(45deg); /* Safari and Chrome */
        -o-transform:rotate(45deg); /* Opera */
    }
    100% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); /* IE 9 */
        -moz-transform:rotate(0deg); /* Firefox */
        -webkit-transform:rotate(0deg); /* Safari and Chrome */
        -o-transform:rotate(0deg); /* Opera */
    }
}
@-webkit-keyframes before_last {
    0% {
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /* IE 9 */
        -moz-transform:rotate(45deg); /* Firefox */
        -webkit-transform:rotate(45deg); /* Safari and Chrome */
        -o-transform:rotate(45deg); /* Opera */
    }
    100% {
        transform:rotate(0deg);
        -ms-transform:rotate(0deg); /* IE 9 */
        -moz-transform:rotate(0deg); /* Firefox */
        -webkit-transform:rotate(0deg); /* Safari and Chrome */
        -o-transform:rotate(0deg); /* Opera */
    }
}
@keyframes after_first {
    0% {
        transform:rotate(0deg) translateY(119px);
        -ms-transform:rotate(0deg) translateY(119px); /* IE 9 */
        -moz-transform:rotate(0deg) translateY(119px); /* Firefox */
        -webkit-transform:rotate(0deg) translateY(119px); /* Safari and Chrome */
        -o-transform:rotate(0deg) translateY(119px); /* Opera */
    }
    100% {
        transform:translateY(0px) rotate(-45deg);
        -ms-transform:translateY(0px) rotate(-45deg); /* IE 9 */
        -moz-transform:translateY(0px) rotate(-45deg); /* Firefox */
        -webkit-transform:translateY(0px) rotate(-45deg); /* Safari and Chrome */
        -o-transform:translateY(0px) rotate(-45deg); /* Opera */
    }
}
@-webkit-keyframes after_first {
    0% {
        transform:rotate(0deg) translateY(119px);
        -ms-transform:rotate(0deg) translateY(119px); /* IE 9 */
        -moz-transform:rotate(0deg) translateY(119px); /* Firefox */
        -webkit-transform:rotate(0deg) translateY(119px); /* Safari and Chrome */
        -o-transform:rotate(0deg) translateY(119px); /* Opera */
    }
    100% {
        transform:translateY(0px) rotate(-45deg);
        -ms-transform:translateY(0px) rotate(-45deg); /* IE 9 */
        -moz-transform:translateY(0px) rotate(-45deg); /* Firefox */
        -webkit-transform:translateY(0px) rotate(-45deg); /* Safari and Chrome */
        -o-transform:translateY(0px) rotate(-45deg); /* Opera */
    }
}
@keyframes after_last {
    0% {
        transform:rotate(-45deg);
        -ms-transform:rotate(-45deg); /* IE 9 */
        -moz-transform:rotate(-45deg); /* Firefox */
        -webkit-transform:rotate(-45deg); /* Safari and Chrome */
        -o-transform:rotate(-45deg); /* Opera */
    }
    100% {
        transform:rotate(0deg) translateY(119px);
        -ms-transform:translateY(119px) rotate(0deg); /* IE 9 */
        -moz-transform:translateY(119px) rotate(0deg); /* Firefox */
        -webkit-transform:rotate(0deg) translateY(119px); /* Safari and Chrome */
        -o-transform:translateY(119px) rotate(0deg); /* Opera */
    }
}
@-webkit-keyframes after_last {
    0% {
        transform:rotate(-45deg) translateY(0px);
        -ms-transform:rotate(-45deg) translateY(0px); /* IE 9 */
        -moz-transform:rotate(-45deg) translateY(0px); /* Firefox */
        -webkit-transform:rotate(-45deg) translateY(0px); /* Safari and Chrome */
        -o-transform:rotate(-45deg) translateY(0px); /* Opera */
    }
    100% {
        transform:rotate(0deg) translateY(119px);
        -ms-transform:translateY(119px) rotate(0deg); /* IE 9 */
        -moz-transform:translateY(119px) rotate(0deg); /* Firefox */
        -webkit-transform:rotate(0deg) translateY(119px); /* Safari and Chrome */
        -o-transform:translateY(119px) rotate(0deg); /* Opera */
    }
}
a{text-decoration: none;}

#top_left_box a{color:#fff;}
#top_left_box a:hover{color:blue;}
#logo{float: left;margin-right: 10px;pointer-events:none;max-width: 150px;}
.cms_item,.bottom_btn{cursor: pointer;transition:transform 0.3s;-moz-transition:transform 0.3s; /* Firefox 4 */-webkit-transition:transform 0.3s; /* Safari and Chrome */-o-transition:transform 0.3s;}
.cms_item .cms_item_ico{background-image: url('../images/gongneng.png?v=1.0.1');width:33px;height:33px;background-repeat: no-repeat;margin: auto;}
.cms_item .cms_item_ico.jieshuo_lang_chinese{background-position-y:-495px;}
.cms_item .cms_item_ico.jieshuo_lang_english{background-position-y:-462px;}
.cms_item_name{font-size: 12px;text-align: center;color:#fff;}
.bottom_left_btn,.bottom_right_btn{display: inline-block;margin-right:5px;position:relative;}
#technical_img{max-width: 150px;max-height: 150px;}
.bottom_btn{position:relative;background-repeat: no-repeat;width:45px;height:45px;pointer-events:auto;margin: auto;}
.cms_item:hover,.bottom_btn:hover{transform:scale(0.9,0.9);-ms-transform:scale(00.9,0.9);-moz-transform:scale(0.9,0.9);-webkit-transform:scale(0.9,0.9);-o-transform:scale(0.9,0.9);}


#fenzu{position: absolute;width: 100%;bottom:75px;left: 0px;background-color:rgba(255,255,255,0.2);text-align: center;transition:transform 0.2s;-moz-transition:transform 0.2s; /* Firefox 4 */-webkit-transition:transform 0.2s; /* Safari and Chrome */-o-transition:transform 0.2s; /* Opera */transform:scaleY(0);-ms-transform:scaleY(0);-moz-transform:scaleY(0);-webkit-transform:scaleY(0);-o-transform:scaleY(0);}
#fenzu.active{transform:scaleY(1);-ms-transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1);-o-transform:scaleY(1);}
.thumb_group_container{margin: auto;padding: 3px;}
.thumb_group{list-style: none;padding: 0px;margin: 0px;white-space: nowrap;display:flex;}
.thumb_group li{width: 65px;height: 65px;border: #FFFFFF 2px solid;cursor: pointer;background-size: 100% 100%;position: relative;}
.thumb_group li.active{border-color: chartreuse;}
.thumb_group li span{position: absolute;bottom: 0px;left:0px;text-align: center;width: 100%;font-size: 13px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
#fenzu_btn_container{margin: auto;padding: 3px;}
#fenzu_btn_container ul{list-style: none;padding: 0px;margin: 0px;min-width: 100.5%;}
#fenzu_btn_container ul li.fenzu_btn{display: inline-block;padding: 3px 10px;border-radius: 15px;background-color:rgba(255,255,255,0.2);color: #000;margin: 0 3px;cursor: pointer;}
#fenzu_btn_container ul li.fenzu_btn.active{background-color:rgba(255,255,255,1);}
.scene_thumb{margin-right: 3px;}
.scene_thumb.active{border-color: chartreuse;}

@media screen and (min-width:1025px) and (max-width:1600px){
    #Roll div{animation: marquee 13s linear infinite;-webkit-animation: marquee 13s linear infinite;}
}
@media screen and (min-width:769px) and (max-width:1024px){
    #Roll div{animation: marquee 9s linear infinite;-webkit-animation: marquee 9s linear infinite;}
}
@media screen and  (min-width:769px){
    #nav{position: absolute;right: 65px;top: 30px;}
    #nav_switch{display: none;}
    #nav_ul_parent,.nav_ul_son{list-style: none;margin: 0px;padding: 0px;max-height: 850px;overflow-y: auto;}
    #nav_ul_parent a{color: #FFFFFF;display: block;margin:0 10px;}
    .nav_li_parent{vertical-align:top;display:inline-block;background-color: black;color: #FFFFFF;text-align:center;line-height: 34px;cursor: pointer;}
    .nav_li_parent:nth-of-type(even) {background: #333;}
    .nav_li_parent:first-child{border-radius: 8px 0 0 8px;}
    .nav_li_parent:last-child{border-radius:0 8px 8px 0;}
    .nav_li_son{
        cursor: pointer;
        height: 0px;
        overflow:hidden;
        background-color: black;
        transition:height 0.6s;
        -moz-transition:height 0.6s; /* Firefox 4 */
        -webkit-transition:height 0.6s; /* Safari and Chrome */
        -o-transition:height 0.6s; /* Opera */
    } .nav_li_son:last-child{border-radius:0 0 8px 8px;}  .nav_li_son:nth-of-type(even) {background: #333;}
    .nav_li_parent:hover .nav_li_son{height: 34px;}
    .nav_li_parent:hover,.nav_li_son:hover{background-color: cadetblue;}
}
@media screen and  (max-width:768px){
    #Roll div{animation: marquee 5s linear infinite;-webkit-animation: marquee 5s linear infinite;}
    #top_left_box{font-size: 14px;}
    #logo{max-width: 110px;}
    .thumb_group{min-width: 102%;}
    #fenzu_btn_container ul{min-width: 102%;}
    #nav{
        pointer-events:none;
        transition:transform 0.6s;
        -moz-transition:transform 0.6s; /* Firefox 4 */
        -webkit-transition:transform 0.6s; /* Safari and Chrome */
        -o-transition:transform 0.6s; /* Opera */
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 10;
        height: 100%;
        width: 180px;
        background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
        background-color:rgba(0,0,0,0.5); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
        transform:translateX(0px);
        -ms-transform:translateX(0px); /* IE 9 */
        -moz-transform:translateX(0px); /* Firefox */
        -webkit-transform:translateX(0px); /* Safari and Chrome */
        -o-transform:translateX(0px); /* Opera */
    }
    #right_box{transform: scale(0.8,0.8);-ms-transform: scale(0.8,0.8);-moz-transform: scale(0.8,0.8);-webkit-transform: scale(0.8,0.8);-o-transform: scale(0.8,0.8);}

    /* 因乾水湾手机端“场景选择”图标偏左，故而注释了以下代码 */
     #bottom_left_box{
         transform:translate(-20px,12px) scale(0.7,0.7);
         -ms-transform:translate(-20px,12px) scale(0.7,0.7);
         -moz-transform:translate(-20px,12px) scale(0.7,0.7);
         -webkit-transform:translate(-20px,12px) scale(0.7,0.7);
         -o-transform:translate(-20px,12px) scale(0.7,0.7);
     }

    #technical_img{max-width: 100px;max-height: 100px;}
    #nav_switch{
        pointer-events:auto;
        position: absolute;
        min-height: 35px;
        top: 30px;
        right:4px;
        transform:translate(-15px,0px);
        -ms-transform:translate(-15px,0px); /* IE 9 */
        -moz-transform:translate(-15px,0px); /* Firefox */
        -webkit-transform:translate(-15px,0px); /* Safari and Chrome */
        -o-transform:translate(-15px,0px); /* Opera */
        width: 28px;
        cursor: pointer;
        transition:all 0.6s;
        -moz-transition:all 0.6s; /* Firefox 4 */
        -webkit-transition:all 0.6s; /* Safari and Chrome */
        -o-transition:all 0.6s; /* Opera */
        color:rgba(255,255,255,0);
        font-size: 16px;
        line-height: 29px;
        border-radius: 0 15px 15px 0;
        padding: 17px 0;
    }
    #nav_switch::before,#nav_switch::after{
        transition:all 0.6s;
        -moz-transition:all 0.6s; /* Firefox 4 */
        -webkit-transition:all 0.6s; /* Safari and Chrome */
        -o-transition:all 0.6s; /* Opera */
        position: absolute;
        content: " ";
        display: block;
        width: 28px;
        height: 2px;
        background-color: #FFFFFF;
        animation: before_first 0.6s;-webkit-animation: before_first 0.6s;
        transform:rotate(45deg);
        top: 0px;
        margin-top: 15.5px;
    }
    #nav_switch::after{animation:after_first 0.6s;-webkit-animation:after_first 0.6s;transform:translateY(0px) rotate(-45deg);}
    #nav_switch::before:hover,#nav_switch:hover #nav_switch::after{background-color: #666666;}
    #nav_ul_parent,.nav_ul_son{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    #nav_ul_parent{
        padding-top:70px;
        pointer-events:auto;
        height: 90%;
        overflow-y: auto;
    }
    #nav_ul_parent a{color: #FFFFFF;display: block;width: 100%;}
    #nav_ul_parent{}
    .nav_li_parent{font-size:16px;line-height:42px;border-bottom: solid 1px #333;position: relative;background-color:rgba(0,0,0,0.4);pointer-events:auto;}
    .nav_li_parent .jiantou{position: absolute;right:15px;top: 12px;width:10px;height: 10px;border-top: aliceblue 3px solid;border-right: aliceblue 3px solid;transform:rotate(135deg);transition:all 0.6s;
        -moz-transition:all 0.6s; /* Firefox 4 */
        -webkit-transition:all 0.6s; /* Safari and Chrome */
        -o-transition:all 0.6s; /* Opera */
    }
    .nav_li_son{height: 0px;
        background-color:rgba(255,255,255,0.15);
        overflow:hidden;transition:height 0.6s;
        -moz-transition:height 0.6s; /* Firefox 4 */
        -webkit-transition:height 0.6s; /* Safari and Chrome */
        -o-transition:height 0.6s; /* Opera */
        pointer-events:auto;
    }
    .nav_li_parent.active .nav_li_son{height: 40px;border-bottom: cadetblue solid 1px;}
    .nav_li_parent.active .jiantou{transform:rotate(-45deg);top:17px;}



    #nav.hide{ transform:translateX(-180px);
        -ms-transform:translateX(-180px); /* IE 9 */
        -moz-transform:translateX(-180px); /* Firefox */
        -webkit-transform:translateX(-180px); /* Safari and Chrome */
        -o-transform:translateX(-180px); /* Opera */}
    #nav.hide #nav_switch{
        transform:translate(32px,200px);
        -ms-transform:translate(32px,200px); /* IE 9 */
        -moz-transform:translate(32px,200px); /* Firefox */
        -webkit-transform:translate(32px,200px); /* Safari and Chrome */
        -o-transform:translate(32px,200px); /* Opera */

        background-color:rgba(0,0,0,0.8);

        color:rgba(255,255,255,1);

    }
    #nav.hide #nav_switch::before,#nav.hide #nav_switch::after{
        animation: before_last 0.6s;-webkit-animation: before_last 0.6s;
        transform:rotate(0deg);
    }
    #nav.hide #nav_switch::after{animation:after_last 0.6s;-webkit-animation:after_last 0.6s;transform:rotate(0deg) translateY(119px);}
}

#shuoyishuo_box{position: absolute;bottom: 200px;left:50%;margin-left:-200px;width:400px;background-color: rgba(0,0,0,0.5);border-radius:10px;display: none;}
#shuoyishuo_box textarea{resize: none;height: 50px;width: 90%;margin: auto;display: block;}