*{ margin:0; padding:0}
dl,dt,dd,h1,h2,h3,h4,h5,h6{ margin:0; padding:0}
ul,li,p{ margin:0; padding:0; list-style:none}
.fl{ float:left}
.fr{ float:right}

.wsa li,.wsa li p,.wsa li i,.close,.wsa_icon em,.guide_box li{ background-image:url(../img/skin.png)}

.wsa{ position:relative; width:100%; height:120px;background:#355e92;}
.wsa .container{ position:relative; margin:0 auto; width:1200px; text-align:center}

.wsa dl{ display:inline-block; }
.wsa dt,.wsa dd{ float:left; }

.wsa li.wsa_icon{ background-position:right top}
.wsa li.wsa_icon{ float:left; width:100px;padding-top:10px; height:110px; text-align:center; font-size:21px; color:#fff; }
.wsa li.wsa_icon:hover{ /*background-color:rgba(0,0,0,0.20)*/ background-color:#1f4d87; cursor:pointer; }
.wsa li.wsa_icon i{ cursor:pointer}
.wsa li span{ display:block;}
.wsa li.wsa_icon p{ margin-bottom:6px; padding:2px; height:52px; transition:all ease 0.3s; text-align:center}
.wsa li.wsa_icon:hover p{ margin-top:-5px;}
.wsa li.wsa_icon i{ display:inline-block; width:65px; height:50px; border-radius:5px; font-style:normal; color:#666; font-size:0px; line-height:28px;}
.wsa li em{ display:block; float:right;width:24px; height:50px; background-position:left -1272px; cursor:pointer}
.wsa li em.on{background-position:-24px -1272px}
.wsa li.wsa_drop i{width:58px; float:left}

.wsa li p{ background-position: left -1210px; }

.wsa li.wsa-reset i{ background-position:left -50px}
.wsa li.wsa-sound-fast i{ background-position:left -150px}
.wsa li.wsa-sound-speed i{ background-position:-60px -150px}
.wsa li.wsa-sound-speed .sound-fast i{ background-position:left -150px}
.wsa li.wsa-sound-speed .sound-slow i{ background-position:-120px -150px}
.wsa li.wsa-sound-slow i{ background-position:-120px -150px}
.wsa li.wsa-reader-repeat i{ background-position:left -200px}
.wsa li.wsa-reader-pointing i{ background-position:-60px -200px}
.wsa li.wsa-palette i{ background-position:left -245px}
.wsa li.wsa-zoom-in i{ background-position:left -300px}
.wsa li.wsa-zoom-out i{ background-position:left -350px}
.wsa li.wsa-mouse i{ background-position:left -450px}
.wsa li.wsa-state i{ background-position:left -550px}
.wsa li.wsa-help i{ background-position:left -600px}
.wsa li.wsa-guide i{ background-position:left -650px}
.wsa li.wsa-exit i{ background-position:left -700px}
.wsa li.wsa-back i{ background-position:left -750px}


.wsa li.wsa-sound-on i{ background-position:left -100px}
.wsa li.sound-samll i{ background-position:-120px -100px}
.wsa li.sonnd-loud i{ background-position:-180px -100px}
.wsa li.wsa-sound-off i{ background-position:-60px -100px}
.wsa li.sound-max i{background-position:left -100px}

/*guide box*/
.fl{ float:left !important}
.fr{ float:right !important}
.guide_box{ display:block;width:100%}
.guide_box:after{content:""; display:inline-block; clear:both; font-size:0}
.guide_box li{ background-position:right top}
.guide_nav li{float:left; padding:30px 15px; height:90px; color:#fff; text-align:center; }
.guide_nav li:hover{ /*background-color:rgba(0,0,0,0.20)*/ background-color:#1f4d87; cursor:pointer; }
.guide_nav li h4{ font-size:21px; font-weight:normal; line-height:36px}
.guide_nav li h4 em{ font-size:18px; font-style:normal; font-weight:normal}
.guide_nav li div{ padding-top:5px; font-size:16px;}




/**
 @ panel */
.panel {
display:none;
position:absolute;
top:69px;
z-index:1005;
padding:2px;
overflow:hidden;
border:1px solid #7EB196;
/*background-color:#F3F7F5;*/
background-color:#EEF4F1;
-moz-box-shadow:2px 2px 5px #909090;
-webkit-box-shadow:2px 2px 5px #909090;
box-shadow:2px 2px 5px #909090;
}
.bg-iframe {
display:none;
position:absolute;
top:100px;
z-index:1001;
filter:progid:DXImageTransform.Microsoft.Shadow(color="#909090",Direction=135,Strength=4);
}
.panel-block {
position:absolute;
left:3px;
bottom:0;
width:20px;
height:10px;
overflow:hidden;
background-color:#EEF4F1;
}

#bg-wrapper {
position:fixed;
*position:static;
top:120px;
left:0;
right:0;
bottom:0;
*height:100%;
overflow:hidden;
}

.hidden {
display:none;
position:absolute;
top:-9999em;
left:-9999em;
visibility:hidden;
}

#tooltips {
display:none;
position:absolute;
left:0;
bottom:0;
z-index:1001;
width:100%;
}
.x-tooltips {
min-height:200px;
max-height:700px;
border:6px solid #505050;
border-right-width:220px;
font-family:'\5b8b\4f53';
font-weight:bold;
text-align:center;
background-color:#FFFFFF;
overflow-y:scroll;
}
#tooltips-show {
min-height:200px;
max-height:700px;
    padding-top: 15px;
}
#tooltips-show ul {
    max-height:200px;
    padding:0 10px;
    overflow-y: auto;
}
#tooltips-show li {
display:inline-block;
*display:inline;
zoom:1;
margin:0 3px;
vertical-align:middle;
}
.tip-letter, .tip-zh {
display:block;
}
.tooltips-close {
position:absolute;
top:8px;
right:15px;
width:23px;
height:23px;
text-indent:-10000px;
background:url(../img/wsa_skin.png) no-repeat -300px -1100px;
cursor:pointer;
}
.tooltips-tools {
position:absolute;
/*top:6px;*/
    top:40px;
right:55px;
}
.tooltips-row a {
display:inline-block;
width:72px;
height:70px;
vertical-align:top;
background-position:left top;
cursor:pointer;
color:#fff;
font-size:48px;
text-align:center;
text-decoration:none;
}

.simplified { margin-right:6px; background:#ca232b}
.traditional { background:#eb4516}
.tooltips-row .pinyin { margin-top:6px; width:150px;height:48px;background:#317ec5; font-size:30px; line-height:48px}

.simplified:hover{ background:#ff000c}
.traditional:hover{ background:#ff8441}
.pinyin:hover{ background:#0255e0}

.simplified.cur,.traditional.cur{ width:68px; height:66px; border:2px solid #fff}
.pinyin.cur{ width:146px; height:44px; border:2px solid #fff}

.mask, .page-x {
*padding-top:78px;
}

.page-x, .page-y {
display:none;
position:absolute;
z-index:1000;
overflow:hidden;
background-color:#FF0000;
}
.page-x {
width:5px;
height:100%;
}
.page-y {
width:100%;
height:5px;
}
#xRepeat{display: none;}

.wsa-sound-off{
    opacity:.8;
}

@media (max-width:800px){
  .wsa{height:auto;}
  .wsa dl,.wsa dd{ display:block; float:none}
  .wsa .container{width:100%}
  .wsa ul{ display:flex; justify-content:space-between; flex-wrap:wrap}
  .wsa li.wsa_icon{ padding-top:0; padding-bottom:5px;width:33.33%; height:81px; box-sizing:border-box; font-size:18px}
  .wsa li.wsa_icon p{ margin-bottom:0; padding:0; height:auto;transform:scale(85%)}
  .wsa li span{ margin-top:-5px;}
  .wsa li.wsa_icon:nth-child(4),.wsa li.wsa_icon:nth-child(5),.wsa li.wsa_icon:nth-child(9),.wsa li.wsa_icon:nth-child(10),.wsa li.wsa_icon:nth-child(11),.wsa li.wsa_icon:nth-child(12){ display:none}
  #bg-wrapper{top:162px}
}