Fatal编程技术网
  • javascript/
  • JavaScript在ie11中没有预期的功能，但在所有其他浏览器中都可以正常工作

JavaScript在ie11中没有预期的功能，但在所有其他浏览器中都可以正常工作

javascript css

JavaScript在ie11中没有预期的功能，但在所有其他浏览器中都可以正常工作,javascript,css,internet-explorer-11,Javascript,Css,Internet Explorer 11,我有一个网站，在除ie11之外的所有测试浏览器中都能正常运行 在页面的顶部和底部都有链接，可以左右滚动内容，但在ie11中它偶尔会工作。问题是在顶部的链接中，单击“徽标设计”无法正常工作。这里的台词太多了，无法张贴，但都是乱七八糟的 在建工程 网站设计营销材料设计名片设计 &拉阔； &拉阔； 网页设计 网站是一个重要的工具 营销材料 我们设计营销 标志设计 标志是不可分割的一部分 名片设计 名片通常是免费的 网页设计营销材料设计徽标设计名片设计©；版权 正文，html{

我有一个网站，在除ie11之外的所有测试浏览器中都能正常运行

在页面的顶部和底部都有链接，可以左右滚动内容，但在ie11中它偶尔会工作。问题是在顶部的链接中，单击“徽标设计”无法正常工作。这里的台词太多了，无法张贴，但都是乱七八糟的


在建工程
网站设计营销材料设计名片设计
&拉阔；
&拉阔；
网页设计

网站是一个重要的工具


营销材料

我们设计营销


标志设计

标志是不可分割的一部分


名片设计

名片通常是免费的


网页设计营销材料设计徽标设计名片设计©；版权
正文，html{
填充：0；
保证金：0；
最小高度：100%；
身高：100%；
字体系列：无衬线；
}
正文{背景大小：100%；}
#横幅{
宽度：910px；
高度：130像素；
保证金：0自动；
位置：相对位置；
顶部：80px；
}
#身体{
最小高度：600px；
宽度：4000px；
位置：绝对位置；
z指数：-1；
}
.banner_内容{
显示：内联块；
}
#容器{
位置：相对位置；
背景：灰色；
z指数：0；
最小高度：100%；
背景大小：100%；
}
#内容窗格1 p、#内容窗格2 p、#内容窗格3 p、#内容窗格4 p{
背景：rgba（40,40,40,0.3）；
盒影：0px 0px 5px黑色；
}
.滑盖\图像\支架{
宽度：900px；
高度：300px；
背景：蓝色；
盒影：0px 0px 5px黑色；
边缘顶部：30px；
左边距：5px；
}
.向右滚动{
-webkit动画：右移0.7s立方贝塞尔（0.68.22.99）向前；
-o动画：右移0.7s立方贝塞尔（0.68.22.99）向前；
动画：右移0.7s立方贝塞尔（0.68.22.99）向前；
}
@-webkit关键帧向右移动{
0% {
左：0px；
}
30% {
左：10px；
}
60% {
左：-975px；
}
100% {
左：-955px；
}
}
@-moz关键帧向右移动{
0%{左：0px；}
30%{左：10px；}
60%{左：-975px；}
100%{左：-955px；}
}
@-o关键帧向右移动{
0%{左：0px；}
30%{左：10px；}
60%{左：-975px；}
100%{左：-955px；}
}
@关键帧向右移动{
0% {
左：0px；
}
30% {
左：10px；
}
60% {
左：-975px；
}
100% {
左：-955px；
}
}
.向右滚动uu955{
-webkit动画：向前移动0.7秒的立方贝塞尔（0.68.22.99）；
-o动画：向前移动0.7s立方贝塞尔（0.68.22.99）秒；
动画：向前移动0.7秒的立方贝塞尔（0.68.22.99）；
}
@-webkit关键帧向右移动\u秒{
0% {
左：-955px；
}
30% {
左：-945px；
}
60% {
左：-1930px；
}
100% {
左：-1910px；
}
}
@-moz关键帧向右移动\u秒{
0% {
左：-955px；
}
30% {
左：-945px；
}
60% {
左：-1930px；
}
100% {
左：-1910px；
}
}
@-o关键帧向右移动\u秒{
0% {
左：-955px；
}
30% {
左：-945px；
}
60% {
左：-1930px；
}
100% {
左：-1910px；
}
}
}
@关键帧向右移动\u秒{
0% {
左：-955px；
}
30% {
左：-945px；
}
60% {
左：-1930px；
}
100% {
左：-1910px；
}
}
.向右滚动u u-1910{
-webkit动画：将第三个0.7s立方贝塞尔（0.68.22.99）向前移动；
-o型动画：向前移动第三个0.7s立方贝塞尔（0.68.22.99）；
动画：向前移动第三个0.7s立方贝塞尔（0.68.22.99）；
}
@-webkit关键帧向右移动\u第三{
0% {
左：-1910px；
}
30% {
左：-1900px；
}
60% {
左：-2885px；
}
100% {
左：-2865px；
}
}
@-moz关键帧向右移动三次{
0% {
左：-1910px；
}
30% {
左：-1900px；
}
60% {
左：-2885px；
}
100% {
左：-2865px；
}
}
@-o-关键帧向右移动\u第三{
0% {
左：-1910px；
}
30% {
左：-1900px；
}
60% {
左：-2885px；
}
100% {
左：-2865px；
}
}
@关键帧向右移动三次{
0% {
lef

<!DOCTYPE HTML>    

<html>
    <head>
        <meta charset="utf-8">
        <title>
            Under Construction
        </title>
        <link rel="stylesheet" type="text/css" href="form.css">
        <meta name="author" content="Advanced Design And Solutions">
        <meta name="description" content="x">
        <meta name="keywords" content="x">
        <script type="text/javascript" src="script/script.js"></script>     
    </head>
    <body onload="assign_math();">
                    </div>
        <div id="container">
            <div class="shadow_test"></div>
            <div id="banner">
                <img class="title_logo" src="images/bnr.png" alt="">
                <!-- <a class="title_logo" href="index.php">
                    Advanced Design and Solutions
                </a> -->
                <div id="links">
                    <div onclick="to_wd();" class="banner_content on" id="link_1" href="">Web Design</div><div onclick="to_mm();" class="banner_content" id="link_2" href="">Marketing Material</div><div onclick="to_ld();" class="banner_content" id="link_3" href="">Logo Design</div><div onclick="to_bcd();" class="banner_content" id="link_4" href="">Business Card Design</div><span><img src="images/em_w.png"  class="email_icon" onclick="show_email();"></span>
                </div>              
                </div>   
                <div id="l_arrow" onclick="scroll_left();">
                        &laquo;
                    </div>
                    <div id="r_arrow" onclick="scroll_right();">
                        &raquo;
                    </div>
                <div id="hider">

                    <div id="body">
                        <div id="content_pane_1">
                            <div class="slide_image_holder"></div>
                            <h2>
                                Web Design
                            </h2>
                            <p>
                                A website is an important
                            </p>
                        </div>
                        <div id="content_pane_2">
                            <div class="slide_image_holder"></div>
                            <h2>
                                Marketing Materials
                            </h2>
                            <p>
                                We design marketing 
                            </p>
                        </div>
                        <div id="content_pane_3">
                            <div class="slide_image_holder"><img src="images/logo_bn.jpg" alt=""></div>
                            <h2>
                                Logo Design
                            </h2>
                            <p>
                                A logo is an integral part
                            </p>
                        </div>
                        <div id="content_pane_4">
                            <div class="slide_image_holder"><img src="images/bs_bn.jpg" alt=""></div>
                            <h2>
                                Business Card Design
                            </h2>
                            <p>
                                A business card is often 
                            </p>
                        </div>
                    </div>
                    <div id="dummy"></div><div id="dummy2"></div>
                </div>
                            <div id="footer">
                <div id="footer_topline"></div>
                <div onclick="to_wd();" class="footer_links" id="foot_1">Web Design</div><div onclick="to_mm();" class="footer_links" id="foot_2">Marketing Material Design</div><div onclick="to_ld();" class="footer_links" id="foot_3">Logo Design</div><div onclick="to_bcd();" class="footer_links" id="foot_4">Business Card Design</div ><div class="footer_links" href="index.php">&#169; Copyright <?php echo date("Y") ?></div>
            </div>
        </div>

    </body>
</html>


body, html {
padding:0;
margin:0;
min-height:100%;
height:100%;
font-family: sans-serif;
}
body {background-size:100%;}

#banner {
width: 910px;
height: 130px;
margin: 0 auto;
position: relative;
top: 80px;
}
#body {
min-height: 600px;
width: 4000px;
position: absolute;
z-index: -1;
}
.banner_content {
    display: inline-block;
}
#container {
    position: relative;
    background:grey;
    z-index: 0;
    min-height: 100%;
    background-size: 100%;
}
#content_pane_1 p, #content_pane_2 p, #content_pane_3 p, #content_pane_4 p {
    background: rgba(40, 40, 40, 0.3);
    box-shadow: 0px 0px 5px black;
}
.slide_image_holder {
    width: 900px;
    height: 300px;
    background: blue;
    box-shadow: 0px 0px 5px black;
    margin-top: 30px;
    margin-left: 5px;
}
.scroll_right {
    -webkit-animation: shift_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation:shift_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    animation:shift_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes shift_right {
    0% {
        left:0px;
    }
    30% {
        left:10px;
    }
    60% {
        left:-975px;
    }
    100% {
        left:-955px;
    }
}
@-moz-keyframes shift_right {
    0% {left:0px;}
    30% {left:10px;}
    60% {left:-975px;}
    100% {left:-955px;}
}
@-o-keyframes shift_right {
    0% {left:0px;}
    30% {left:10px;}
    60% {left:-975px;}
    100% {left:-955px;}
}
@keyframes shift_right {
    0% {
        left:0px;
    }
    30% {
        left:10px;
    }
    60% {
        left:-975px;
    }
    100% {
        left:-955px;
    }
}
.scroll_right_-955 {
    -webkit-animation:shift_right_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation:shift_right_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    animation:shift_right_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes shift_right_second {
    0% {
        left:-955px;
    }
    30% {
        left: -945px;
    }
    60% {
        left:-1930px;
    }
    100% {
        left:-1910px;
    }
}
@-moz-keyframes shift_right_second {
    0% {
        left:-955px;
    }
    30% {
        left: -945px;
    }
    60% {
        left:-1930px;
    }
    100% {
        left:-1910px;
    }
}
@-o-keyframes shift_right_second {
    0% {
        left:-955px;
    }
    30% {
        left: -945px;
    }
    60% {
        left:-1930px;
    }
    100% {
        left:-1910px;
    }
}
}
@keyframes shift_right_second {
    0% {
        left:-955px;
    }
    30% {
        left: -945px;
    }
    60% {
        left:-1930px;
    }
    100% {
        left:-1910px;
    }
}
.scroll_right_-1910 {
    -webkit-animation: shift_right_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation: shift_right_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    animation: shift_right_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes shift_right_third {
    0% {
        left:-1910px;
    }
    30% {
        left: -1900px;
    }
    60% {
        left:-2885px;
    }
    100% {
        left:-2865px;
    }
}
@-moz-keyframes shift_right_third {
    0% {
        left:-1910px;
    }
    30% {
        left: -1900px;
    }
    60% {
        left:-2885px;
    }
    100% {
        left:-2865px;
    }
}
@-o-keyframes shift_right_third {
    0% {
        left:-1910px;
    }
    30% {
        left: -1900px;
    }
    60% {
        left:-2885px;
    }
    100% {
        left:-2865px;
    }
}
@keyframes shift_right_third {
    0% {
        left:-1910px;
    }
    30% {
        left: -1900px;
    }
    60% {
        left:-2885px;
    }
    100% {
        left:-2865px;
    }
}
.scroll_right_-2865 {
    -webkit-animation: shift_right_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation: shift_right_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
    animation: shift_right_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes shift_right_end {
    0% {
        left:-2865px;
    }
    50% {
        left: -2885px;
    }
    100% {
        left:-2865px;
    }
}
@-moz-keyframes shift_right_end {
    0% {
        left:-2865px;
    }
    50% {
        left: -2885px;
    }
    100% {
        left:-2865px;
    }
}
@-o-keyframes shift_right_end {
    0% {
        left:-2865px;
    }
    50% {
        left: -2885px;
    }
    100% {
        left:-2865px;
    }
}
@keyframes shift_right_end {
    0% {
        left:-2865px;
    }
    50% {
        left: -2885px;
    }
    100% {
        left:-2865px;
    }
}
.scroll_left_0 {
    -webkit-animation: shift_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation:shift_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    animation:shift_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes shift_left {
    0% {
        left:-955px;
    }
    30% {
        left:-965px;
    }
    60% {
        left:20px;
    }
    100% {
        left:0px;
    }
}
@-moz-keyframes shift_left {
    0% {
        left:-955px;
    }
    30% {
        left:-965px;
    }
    60% {
        left:20px;
    }
    100% {
        left:0px;
    }
}
@-o-keyframes shift_left {
    0% {
        left:-955px;
    }
    30% {
        left:-965px;
    }
    60% {
        left:20px;
    }
    100% {
        left:0px;
    }
}
@keyframes shift_left {
    0% {
        left:-955px;
    }
    30% {
        left:-965px;
    }
    60% {
        left:20px;
    }
    100% {
        left:0px;
    }
}
.scroll_left_-955 {
    -webkit-animation: shift_left_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation: shift_left_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    animation: shift_left_second 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes shift_left_second {
    0% {
        left:-1910px
    }
    30% {
        left:-1920px;
    }
    60% {
        left:-935px;
    }
    100% {
        left:-955px;
    }
}
@-moz-keyframes shift_left_second {
    0% {
        left:-1910px
    }
    30% {
        left:-1920px;
    }
    60% {
        left:-935px;
    }
    100% {
        left:-955px;
    }
}
@-o-keyframes shift_left_second {
    0% {
        left:-1910px
    }
    30% {
        left:-1920px;
    }
    60% {
        left:-935px;
    }
    100% {
        left:-955px;
    }
}
@keyframes shift_left_second {
    0% {
        left:-1910px
    }
    30% {
        left:-1920px;
    }
    60% {
        left:-935px;
    }
    100% {
        left:-955px;
    }
}
.scroll_left_-1910 {
    -webkit-animation: shift_left_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation: shift_left_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    animation: shift_left_third 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes shift_left_third {
    0% {
        left:-2865px;
    }
    30% {
        left:-2875px;
    }
    60% {
        left:-1890px;
    }
    100% {
        left:-1910px;
    }
}
@-moz-keyframes shift_left_third {
    0% {
        left:-2865px;
    }
    30% {
        left:-2875px;
    }
    60% {
        left:-1890px;
    }
    100% {
        left:-1910px;
    }
}
@-o-keyframes shift_left_third {
    0% {
        left:-2865px;
    }
    30% {
        left:-2875px;
    }
    60% {
        left:-1890px;
    }
    100% {
        left:-1910px;
    }
}
@keyframes shift_left_third {
    0% {
        left:-2865px;
    }
    30% {
        left:-2875px;
    }
    60% {
        left:-1890px;
    }
    100% {
        left:-1910px;
    }
}
.scroll_left_-0 {
    -webkit-animation: shift_left_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation: shift_left_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
    animation: shift_left_end 0.5s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes shift_left_end {
    0% {
        left:0px;
    }
    50% {
        left: 20px;
    }
    100% {
        left:0px;
    }
}
@-moz-keyframes shift_left_end {
    0% {
        left:-2865px;
    }
    50% {
        left: -2885px;
    }
    100% {
        left:-2865px;
    }
}
@-o-keyframes shift_left_end {
    0% {
        left:-2865px;
    }
    50% {
        left: -2885px;
    }
    100% {
        left:-2865px;
    }
}
@keyframes shift_left_end {
    0% {
        left:-2865px;
    }
    50% {
        left: -2885px;
    }
    100% {
        left:-2865px;
    }
}
.footer_text_glow {
    -webkit-animation: glow 0.8s;
    -moz-animation: glow 0.8s;
    -o-animation: glow 0.8s;
    animation: glow 0.8s;
}
@-webkit-keyframes glow {
    0% {
        text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
        color: white;
    }
    50% {
        text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
        color: #7db9e8;
    }
    100% {
        text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
        color: white;
    }
}
@-moz-keyframes glow {
    0% {
        text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
        color: white;
    }
    50% {
        text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
        color: #7db9e8;
    }
    100% {
        text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
        color: white;
    }
}
@-o-keyframes glow {
    0% {
        text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
        color: white;
    }
    50% {
        text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
        color: #7db9e8;
    }
    100% {
        text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
        color: white;
    }
}
@keyframes glow {
    0% {
        text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
        color: white;
    }
    50% {
        text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
        color: #7db9e8;
    }
    100% {
        text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
        color: white;
    }
}
.wrap_left {
    -webkit-animation: wrap_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -moz-animation: wrap_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation: wrap_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    animation: wrap_left 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes wrap_left {
    0% {
        left:0px;
        opacity: 1;
    }
    30% {
        left:10px;
    }
    50% {
        opacity: 0;
    }
    60% {
        left:-2885px;
        opacity: 0;
    }
    100% {
        left:-2865px;
        opacity: 1;
    }
}
@-moz-keyframes wrap_left {
    0% {
        left:0px;
        opacity: 1;
    }
    30% {
        left:10px;
    }
    50% {
        opacity: 0;
    }
    60% {
        left:-2885px;
        opacity: 0;
    }
    100% {
        left:-2865px;
        opacity: 1;
    }
}
@-o-keyframes wrap_left {
    0% {
        left:0px;
        opacity: 1;
    }
    30% {
        left:10px;
    }
    50% {
        opacity: 0;
    }
    60% {
        left:-2885px;
        opacity: 0;
    }
    100% {
        left:-2865px;
        opacity: 1;
    }
}
keyframes wrap_left {
    0% {
        left:0px;
        opacity: 1;
    }
    30% {
        left:10px;
    }
    50% {
        opacity: 0;
    }
    60% {
        left:-2885px;
        opacity: 0;
    }
    100% {
        left:-2865px;
        opacity: 1;
    }
}
.wrap_right {
    -webkit-animation: wrap_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -moz-animation: wrap_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    -o-animation: wrap_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
    animation: wrap_right 0.7s cubic-bezier(0, .68, .22, .99) forwards;
}
@-webkit-keyframes wrap_right {
    0% {
        left:-2865px;
        opacity: 1;
    }
    30% {
        left:-2855px;
    }
    50% {
        opacity: 0;
    }
    60% {
        left: 20px;
    }
    100% {
        left:0px;
        opacity: 1;
    }
}
#container:after {
content:"";
position: absolute;
width: 100%;
height: 100%;
background: url(images/pattern.png);
top: 0px;
opacity: .1;
z-index: -2;
background-size: 7px;

}
#container:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 20px;
    top: 0px;
    border-bottom:1px dashed white;
    opacity: .5;
}

#content_pane_1, #content_pane_2, #content_pane_3, #content_pane_4 {
    width: 910px;
    min-height: 600px;
    /* background: orange; */
    position: relative;
    float: left;
    margin-left: 45px;
}
h2 {
    text-shadow: 1px 1px 2px black;
    padding-left: 20px;
    margin-top: 25px;
    margin-left: 10px;
}
#content_pane_1 h2, #content_pane_2 h2, #content_pane_3 h2, #content_pane_4 h2, #content_pane_1 p, #content_pane_2 p, #content_pane_3 p, #content_pane_4 p {
    color: white;
    font-family:"yi_baiti";
}
#content_pane_1 p, #content_pane_2 p, #content_pane_3 p, #content_pane_4 p {
    font-size: 20px;
    padding: 20px;
    margin-left: 5px;
    margin-right: 5px;
}
#hider {
    min-height: 600px;
    width: 1000px;
    position: absolute;
    margin-left: -500px;
    left: 50%;
    overflow: hidden;
    margin-top: 10px;
}
@media screen and (max-width: 1175px) {
    #l_arrow, #r_arrow {
        display: none;
    }
}
#l_arrow, #r_arrow {
    cursor: pointer;
    background-color: rgb(230, 230, 230);
    background: repeating-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), repeating-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.03) 4.5%), repeating-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%), linear-gradient(180deg, rgb(199, 199, 199) 0%, rgb(230, 230, 230) 47%, rgb(199, 199, 199) 53%, rgb(179, 179, 179)100%);
    text-shadow: rgba(102, 102, 102, 0.5) 0 -1px 0, rgba(255, 255, 255, 0.6) 0 2px 1px;
    box-shadow: inset rgb(38, 38, 38) 0 0px 0px 3px,
    /* border */
    inset rgba(38, 38, 38, 0.8) 0 -1px 5px 4px,
    /* soft SD */
    inset rgba(0, 0, 0, 0.25) 0 -1px 0px 7px,
    /* bottom SD */
    inset rgba(255, 255, 255, 0.7) 0 2px 1px 7px,
    /* top HL */
    rgba(0, 0, 0, 0.15) 0 -5px 6px 4px,
    /* outer SD */
    rgba(255, 255, 255, 0.2) 0 3px 4px 4px;
    width: 50px;
    height: 50px;
    position: absolute;
    line-height: 50px;
    text-align: center;
    color: rgba(40, 40, 40, 0.4);
    font-size: 30px;
    -moz-transition: color .1s;
    -webkit-transition: color .1s;
    -o-transition: color .1s;
    transition: all .1s;
    z-index: 1;
    border-radius: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    top: 390px;
}

#l_arrow {
    margin-left: -565px;
    left: 50%;
}
#l_arrow:after {
    content:"";
    position: absolute;
    height: 570px;
    width: 45px;
    left: 65px;
    top: -230px;
    box-shadow: 15px 0px 25px -25px rgb(0, 0, 0) inset, 34px 0px 30px -34px rgba(0, 0, 0, 0.32) inset, inset 5px 0px 3px -2px rgba(40, 40, 40, 0.5);
    border-bottom-right-radius: 100px 250px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-left: 1px solid rgb(36, 36, 36);
    border-top-right-radius: 100px 250px;
}
#r_arrow {
    right: 50%;
    margin-right: -565px;
}
#r_arrow:after {
    content:"";
    position: absolute;
    height: 570px;
    width: 24px;
    right: 65px;
    top: -230px;
    box-shadow: inset -15px 0px 25px -25px rgba(0, 0, 0, 1), inset -34px 0px 30px -34px rgba(0, 0, 0, 0.75);
    border-top-left-radius: 120px 120px;
    border-bottom-left-radius: 120px 120px;
    border-right: 1px solid rgb(36, 36, 36);
}
.title_logo {
    position: absolute;
    top: -15px;
    left: 18px;
    width: 600px;
}
#links {
    width: 640px;
    color: white;
    font-size: 16px;
    position: relative;
    z-index: 1;
    left: 30px;
    top: 50px;
}
#links a, #links .banner_content {
    cursor: pointer;
    position: relative;
    text-decoration: none;
    margin-right: 20px;
    text-align: center;
    display: inline-table;
    transition: color 1s;
    -moz-transition: color .1s;
    -webkit-transition: color .1s;
    -o-transition: color .1s;
}
.banner_content {
    margin-right: 10px;
}
.banner_content:hover {
    color: #7db9e8;
}
.banner_content:after {
    box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    width: 90%;
    display: inline-block;
    height: 10px;
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -45%;
}
.banner_content:before {
    width: 50%;
    height: 5px;
    background: gold;
    border-radius: 0px 0px 2px 2px;
    display: block;
    position: absolute;
    top: 26px;
    left: 50%;
    margin-left: -25%;
}
.on.banner_content:after, .on.banner_content:before {
    content:"";
}
.off.banner_content:before {
    -webkit-animation: tab_off 0.4s linear forwards;
    -moz-animation: tab_off 0.4s linear forwards;
    -o-animation: tab_off 0.4s linear forwards;
    animation: tab_off 0.4s linear forwards;
    content:"";
}
@-webkit-keyframes tab_off {
    0% {height: 5px;}
    20% {height: 5px;}
    30% {height: 8px;}
    40% {height: 8px;}
    55% {height: 0px;}
    100% {height: 0px;}
}
@-moz-keyframes tab_off {
    0% {
        height: 5px;
    }
    20% {
        height: 5px;
    }
    30% {
        height: 8px;
    }
    40% {
        height: 8px;
    }
    55% {
        height: 0px;
    }
    100% {
        height: 0px;
    }
}
@-o-keyframes tab_off {
    0% {
        height: 5px;
    }
    20% {
        height: 5px;
    }
    30% {
        height: 8px;
    }
    40% {
        height: 8px;
    }
    55% {
        height: 0px;
    }
    100% {
        height: 0px;
    }
}
@keyframes tab_off {
    0% {
        height: 5px;
    }
    20% {
        height: 5px;
    }
    30% {
        height: 8px;
    }
    40% {
        height: 8px;
    }
    55% {
        height: 0px;
    }
    100% {
        height: 0px;
    }
}
.off.banner_content:after {
    -webkit-animation: tab_off_shadow 0.45s linear forwards;
    -moz-animation: tab_off_shadow 0.45s linear forwards;
    -o-animation: tab_off_shadow 0.45s linear forwards;
    animation: tab_off_shadow 0.45s linear forwards;
    content:"";
}
@-webkit-keyframes tab_off_shadow {
    0% {
        box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    }
    80% {
        box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    }
    100% {
        box-shadow: 0px 0px 0px 0px rgba(40, 40, 40, .5);
    }
}
@-moz-keyframes tab_off_shadow {
    0% {
        box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    }
    80% {
        box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    }
    100% {
        box-shadow: 0px 0px 0px 0px rgba(40, 40, 40, .5);
    }
}
@-o-keyframes tab_off_shadow {
    0% {
        box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    }
    80% {
        box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    }
    100% {
        box-shadow: 0px 0px 0px 0px rgba(40, 40, 40, .5);
    }
}
@keyframes tab_off_shadow {
    0% {
        box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    }
    80% {
        box-shadow: 0px 4px 7px -2px rgba(40, 40, 40, .5);
    }
    100% {
        box-shadow: 0px 0px 0px 0px rgba(40, 40, 40, .5);
    }
}
.on.tab_on.banner_content:before {
    -webkit-animation: tab_on 0.4s linear forwards;
    -moz-animation: tab_on 0.4s linear forwards;
    -o-animation: tab_on 0.4s linear forwards;
    animation: tab_on 0.4s linear forwards;
}
@-webkit-keyframes tab_on {
    0% {
        height: 0px;
    }
    20% {
        height: 0px;
    }
    30% {
        height: 8px;
    }
    40% {
        height: 8px;
    }
    55% {
        height: 5px;
    }
    100% {
        height: 5px;
    }
}
@-moz-keyframes tab_on {
    0% {
        height: 0px;
    }
    20% {
        height: 0px;
    }
    30% {
        height: 8px;
    }
    40% {
        height: 8px;
    }
    55% {
        height: 5px;
    }
    100% {
        height: 5px;
    }
}
@-o-keyframes tab_on {
    0% {
        height: 0px;
    }
    20% {
        height: 0px;
    }
    30% {
        height: 8px;
    }
    40% {
        height: 8px;
    }
    55% {
        height: 5px;
    }
    100% {
        height: 5px;
    }
}
@keyframes tab_on {
    0% {
        height: 0px;
    }
    20% {
        height: 0px;
    }
    30% {
        height: 8px;
    }
    40% {
        height: 8px;
    }
    55% {
        height: 5px;
    }
    100% {
        height: 5px;
    }
}    
 #footer {
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    margin-top: 600px;
    position: relative;
}
#footer_topline {
    width: 850px;
    height: 5px;
    border-radius: 2px;
    background: white;
    margin: 0 auto;
    margin-bottom: 5px;
}
.footer_links:last-child {
    float: right;
    margin-right: 75px;
}
.footer_links {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-family:"yi_baiti";
    float: left;
    font-size: 16px;
    cursor: pointer;
}
#foot_1 {
    margin-left: 75px;
}



@-o-keyframes shift_right_second {
    0% {
        left:-955px;
    }
    30% {
        left: -945px;
    }
    60% {
        left:-1930px;
    }
    100% {
        left:-1910px;
    }
}
}