*{margin: 0; padding: 0;}
body{font-family: "Microsoft YaHei",Helvetica,Georgia,Arial,sans-serif;}
ul{list-style: none;}
.wrapper{overflow: hidden; position: relative; max-width:1920px; margin:0 auto;}
#parallax{position: relative; left: 0; overflow: hidden; top: 0;}
.box{height: 1046px; position: relative; float: left;} .box img{display: inline-block; overflow: visible; position: absolute;}
.s1_line{position: absolute; top: 0;}
.box1_player_left{top: 50px;}
.logo{display: block; width: 85px; height: 165px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/logo.png") no-repeat top center; position: absolute; top: 10px; left: 25px;}
.title{top: 128px;}
.arrow{width: 65px; height: 130px; position: fixed; top:50%; margin-top:-10px; z-index: 10;}
.arrow_l{background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/arrow_l.png") no-repeat top center; left: 15px; animation: Arrow_LeftAni 1.2s ease infinite; -webkit-animation: Arrow_LeftAni 1.2s ease infinite; -moz-animation: Arrow_LeftAni 1.2s ease infinite; -o-animation: Arrow_LeftAni 1.2s ease infinite;}
.arrow_r{background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/arrow_r.png") no-repeat top center; right: 15px; animation: Arrow_RightAni 1.2s ease infinite; -webkit-animation: Arrow_RightAni 1.2s ease infinite; -moz-animation: Arrow_RightAni 1.2s ease infinite; -o-animation: Arrow_RightAni 1.2s ease infinite;}
@keyframes Arrow_LeftAni{0%{left: 15px;} 50%{left: 25px;} 100%{left: 15px;}}
@-webkit-keyframes Arrow_LeftAni{0%{left: 15px;} 50%{left: 25px;} 100%{left: 15px;}}
@-moz-keyframes Arrow_LeftAni{0%{left: 15px;} 50%{left: 25px;} 100%{left: 15px;}}
@-o-keyframes Arrow_LeftAni{0%{left: 15px;} 50%{left: 25px;} 100%{left: 15px;}}
@keyframes Arrow_RightAni{0%{right: 15px;} 50%{right: 25px;} 100%{right: 15px;}}
@-webkit-keyframes Arrow_RightAni{0%{right: 15px;} 50%{right: 25px;} 100%{right: 15px;}}
@-moz-keyframes Arrow_RightAni{0%{right: 15px;} 50%{right: 25px;} 100%{right: 15px;}}
@-o-keyframes Arrow_RightAni{0%{right: 15px;} 50%{right: 25px;} 100%{right: 15px;}}
.con1{width: 340px; height: 445px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/con1.png") no-repeat top center; top: 37px;}
.con2{width: 415px; height: 340px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/con2.png") no-repeat top center; top: 95px;}
.con3{width: 380px; height: 410px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/con3.png") no-repeat top center; top: 50px;}
.con4{width: 664px; height: 445px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/con4.png") no-repeat top center; top: 30px;} .con4 .content{width: 533px; height: 423px; font-size: 14px; color: #ddceb9; line-height: 1.75em; letter-spacing: 1.5px; margin: 11px 0 0 -10px; padding: 0 40px;} .con4 .content img{position: relative; width: 100%; height: auto;} .con4 .content .task_title{width: 274px; height: 31px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/task_title.png") no-repeat top center; text-align: center; font-size: 16px; font-weight: bold; line-height: 31px; margin: 20px auto;}
.btn_group li, .btn_group li{width: 265px; height: 120px; cursor: pointer;}
.btn_group .btn1{top: 90px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/btn1.png") no-repeat top center;}
.btn_group .btn2{top: 225px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/btn2.png") no-repeat top center;}
.btn_group .btn3{top: 365px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/btn3.png") no-repeat top center;}
/*景物*/
.over{z-index: 10;}
.stone1{bottom: 35px;}
.stone2{bottom: 40px;}
.stone3{bottom: 40px;}
.leaf1{top: 345px;}
.leaf2{top: 15px;}
.leaf3{top: 440px;}
.leaf4{bottom: 190px;}
.leaf5{top: 460px;}
.mouse{display: block; width: 155px; height: 80px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/mouse.png") no-repeat top center; bottom: 225px;}
/*popup*/
#layer{width: 100%; height: 100%; background-color: #000; position: absolute; top: 0; left: 0; z-index: 1000; opacity: .9; filter: alpha(opacity=90); display: none;}
#popup{width: 750px; height: 610px; position: absolute; top: 110px; left: 50%; margin-left: -375px; display: none; z-index: 1500; font-size: 14px; color: #ddceb9; line-height: 1.75em;} #popup p{width: 660px;} #popup em{display: block; width: 172px; height: 31px; font-size: 16px; font-weight: bold; font-style: normal; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/pop_con_title.png") no-repeat top center; text-align: center; line-height: 31px; margin: 35px 0 20px 0;} #popup .p_top{width: 100%; height: 90px;} #popup .p_title{display: block; width: 146px; height: 78px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/pop_title1.png") no-repeat top center; float: left;} #popup .close{display: block; width: 78px; height: 78px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/close.png") no-repeat top center; float: right; cursor: pointer;} #popup #p_con{width: 749px; height: 518px; background: url("https://static.web.sdo.com/1000y/pic/2017/0106hjsm/pop_con_bg.png") no-repeat top center;} #popup .p_con{width: 708px; height: 498px; margin-left: 30px; padding-top: 10px;} #popup .p_con table{border-collapse: collapse; border: none; width: 660px; text-align: center;} #popup .p_con table td, #popup .p_con table th{border: solid #ddceb9 1px; padding: 2px;}
.p_con .p_con1_t1 .col1{width: 250px;}
.p_con .p_con1_t1 .s_td{height:120px;}
.p_con .p_con1_t1 img{margin-top: 10px;}
.p_con .p_con1_t1 .l_word{text-align: left; padding-left: 40px;}
.p_con2 table img{width: 36px; height: 36px; margin: 8px 8px 0 8px;}
.p_con2 .td_img{height:53.5px;}
.p_con3 table, .p_con2 table{margin: 20px 0;}
.p_con3 img{margin: 15px 15px 0 15px;}
/*popup_animate*/
.popupIn{animation: bounceInDown 1s 0s ease both; -webkit-animation: bounceInDown 1s 0s ease both; -moz-animation: bounceInDown 1s 0s ease both;}
@keyframes bounceInDown{0%{opacity: 0; transform: translateY(-2000px);} 60%{opacity: 1; transform: translateY(30px);} 80%{transform: translateY(-10px);} 100%{transform: translateY(0);}}
@-webkit-keyframes bounceInDown{0%{opacity: 0; -webkit-transform: translateY(-2000px);} 60%{opacity: 1; -webkit-transform: translateY(30px);} 80%{-webkit-transform: translateY(-10px);} 100%{-webkit-transform: translateY(0);}}
@-moz-keyframes bounceInDown{0%{opacity: 0; -moz-transform: translateY(-2000px);} 60%{opacity: 1; -moz-transform: translateY(30px);} 80%{-moz-transform: translateY(-10px);} 100%{-moz-transform: translateY(0);}}
.popupOut{animation:bounceOutDown 1s .2s ease both;
-webkit-animation:bounceOutDown 1s 0s ease both;
-moz-animation:bounceOutDown 1s 0s ease both;}
@keyframes bounceOutDown{0%{transform:translateY(0)}
20%{opacity:1;
transform:translateY(-20px)}
100%{opacity:0;
transform:translateY(2000px)}}
@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0)}
20%{opacity:1;
-webkit-transform:translateY(-20px)}
100%{opacity:0;
-webkit-transform:translateY(2000px)}}
@-moz-keyframes bounceOutDown{0%{-moz-transform:translateY(0)}
20%{opacity:1;
-moz-transform:translateY(-20px)}
100%{opacity:0;
-moz-transform:translateY(2000px)}}