.layermbox { position:relative; z-index:19891014 } .layermmain,.laymshade { position:fixed; left:0; top:0; width:100%; height:100% } .layermbtn span,.layermchild { display:inline-block; position:relative } .laymshade { background-color:rgba(0,0,0,.5); pointer-events:auto } .layermmain { display:table; font-family:Helvetica,arial,sans-serif; pointer-events:none } .layermmain .section { opacity:0.6; display:table-cell; vertical-align:middle; text-align:center } .layermchild { text-align:left; pointer-events:auto; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:.18s; animation-duration:.18s } .layermborder { border:1px solid #999 } @-webkit-keyframes bounceIn { 0% { opacity:0; -webkit-transform:scale(.5); transform:scale(.5) } 100% { opacity:1; -webkit-transform:scale(1); transform:scale(1) } }.layermanim { animation-name:bounceIn; -webkit-animation-name:bounceIn; } .layermbox0 .layermchild { max-width:90%; min-width:9.375rem; color:#fff; } .layermbox1 .layermchild { border:none; border-radius:0 } .layermbox2 .layermchild { width:auto; max-width:16.25rem; min-width:2.5rem; border:none; background:0 0; box-shadow:none; color:#fff } .layermchild h3 { padding:0 2.8125rem 0 0.625rem; height:3.125rem; line-height:3.125rem; font-size:1rem; font-weight:400; border-radius:0.1875rem 0.1875rem 0 0; border-bottom:1px solid #EBEBEB } .layermbtn span,.layermchild h3 { text-overflow:ellipsis; overflow:hidden; white-space:nowrap } .layermcont { padding:.924rem 0.9375rem; text-align:center; background-color:#000; font-size:0.725rem; line-height:1.024rem; border-radius:0.1875rem; box-shadow:0 0 0.5rem rgba(0,0,0,.1); } .layermbox1 .layermcont { padding:0; text-align:left } .layermbox2 .layermcont { text-align:center; padding:0; line-height:0 } .layermbox2 .layermcont i { width:1.5625rem; height:1.5625rem; margin-left:0.5rem; display:inline-block; background-color:#fff; border-radius:100%; -webkit-animation:bouncedelay 1.4s infinite ease-in-out; animation:bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both } @-webkit-keyframes bouncedelay { 0%,100%,80% { transform:scale(0); -webkit-transform:scale(0) } 40% { transform:scale(1); -webkit-transform:scale(1) } }@keyframes bouncedelay { 0%,100%,80% { transform:scale(0); -webkit-transform:scale(0) } 40% { transform:scale(1); -webkit-transform:scale(1) } }.layermbox2 .layermcont i:first-child { margin-left:0; -webkit-animation-delay:-.32s; animation-delay:-.32s } .layermbox2 .layermcont i.laymloadtwo { -webkit-animation-delay:-.16s; animation-delay:-.16s } .layermbox2 .layermcont>div { line-height:0rem; padding-top:0.4375rem; margin-bottom:1.25rem; font-size:0.875rem } .layermbtn { position:relative; height: 1.4375rem; line-height: 1.4375rem; font-size:0; text-align:center; } .layermbtn span { width:50%; text-align:center; font-size:0.675rem; cursor:pointer; background-color: #fff; color: #333; height: 1.4375rem; line-height: 1.4375rem; } .layermbtn span:first-child { height: 1.4375rem; background-color:#fff; border-right:.02rem solid #333; color:#333; } .layermbtn:before { content:'\20'; position:absolute; width:1px; height: 1.4375rem; left:50%; top:0; background-color:#EBEBEB } .layermend { position:absolute; right:0.4375rem; top:0.625rem; width:1.875rem; height:1.875rem; border:0; font-weight:400; background:0 0; cursor:pointer; -webkit-appearance:none; font-size:1.875rem } .layermend::after,.layermend::before { position:absolute; left:0.3125rem; top:0.9375rem; content:''; width:1.125rem; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius:0.1875rem } .layermend::after { transform:rotate(-45deg); -webkit-transform:rotate(-45deg) }