html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;outline:none}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}a{text-decoration:none}li{list-style:none}ul{margin:0;padding:0}i{font-style:normal}p{word-break:break-all}.colorred{ color:#932027 }
html,body{ height:100%; overflow:hidden; min-height:auto }
.mask{ font-size: initial !important;}
.content{ height:100%; overflow-y:auto; background: url(../images/hottopic/btm.png) no-repeat #3887F1 bottom center; background-size: 100%; }
.banner{display: block;width: 100%;}
.banner img{ max-width:100% }
.panellist{ overflow:hidden; }
.panel{width:1100px; margin: 5% auto; padding: 0 0 30px; border: solid 5px #000; border-radius: 10px; clear: both;}
.panel:last-of-type{ margin-bottom:10% }
.content:after{ content:'';display: block;
        height: 0;
        clear:both;
        visibility: hidden; }
.panel .title img{ display: block; width:30%; margin:-4% auto 4%}
.panellist{ font-size:0; text-align:center; }
.bd{ position: relative; display: inline-block; width: 26%; height: 390px; margin: 2%; vertical-align: top; background-color: #000;border-radius:10px;}
.ibd{ position: absolute; width: 80%; height: 390px; top: -13px; left: -13px;  padding:0 10%; text-align:center; border-radius:10px; border:solid 3px #000; background-color:#fff }
.ibd p{ height: 180px; padding: 20px 0 0; font-size:18px; font-weight:bold; line-height:2; text-align:justify; }
.btn{ display:block; width:60%; padding: 10px 0; margin: 30px auto; text-align: center; color: #fff; border-radius:50px; background-color:#2C63F2; font-size:16px; cursor:pointer;  transition-duration: 300ms}
.btn:hover{/* background-color: #001ab5; */ color: #fff; transition-duration: 300ms}
.ibdtitle{ width:150px; margin-top:30px; }
.waybd{ width:86%;  height:580px; display: block; margin:auto; }
.waybd .ibd{ width: 87%; height: 520px; padding:3% 5% 3% 8%}
.waybd .ibd p{ height:auto; padding:30px 0 0 }
.waybd .ibd p span{ position: relative; display:inline-block; width: 90%; margin-left: 15px; line-height: 30px; vertical-align:top;  font-size:20px; word-break:break-word; }
.waybd .ibd p .sn{ width:30px; height:30px; text-align: center; background-color:#000; border-radius:100%; color:#fff }
.waybd .ibd p span i{ display: inline-block; position:relative; z-index:9 }
.waybd .ibd p span i:after{ content:''; position: absolute; bottom: 0; left: 5px; right: -10px; height:15px; background-color: #FFE437; z-index:-1 }
.gift{ width:40%; display:block; margin-left:22.5%; margin-top:2% }

.pagegroup{width: 90%; margin:0 auto 4rem; background-color: #3c89f2; border-top:none;background:url(../images/hottopic/mbg.png) top no-repeat; background-size: 100%}
.page{ width: 100%; height: 100%; background:url(../images/hottopic/mbgrepeat.png)#3c89f2 top repeat-y; background-size: 100%}


.mobile{ position:absolute; top:0; right:0; bottom:0; left:0; overflow-y:auto; overflow-x:hidden;background: url(../images/hottopic/btm.png) no-repeat bottom center; background-size:100% }
.mobile .banner{ margin:1rem -1rem 0; width: auto}
.mobile .panel{ width:99.5%; margin:-1rem auto; padding:1.5rem 0 0; border-radius: 0; border: solid 1px #1c4071;border-top: none;background-color:#3c89f2 }
.mobile .panel .title img{ width:8rem }
.mobile .panel .title{ margin:0 }
.mobile .banner ~ .panel:nth-child(2){ padding-top:2.5rem }
.mobile .bd{ display:block; width:90%; height: auto; margin:1rem auto; right:-.2rem }
.mobile .ibd{ position:relative; height: auto; padding: 0 5%; width: 90%; top:-.15rem; left:-.4rem }
.mobile .panellist{ overflow:initial; }
.mobile .ibdtitle{ margin:.5rem auto; width:11rem }
.mobile .ibd p{ height:auto; padding:1rem 0 0 ; margin: 0; font-weight:normal; line-height:1.6; font-size: .7rem; text-align: center;}
.mobile .btn{ width:50%; margin:1rem auto }
.mobile .waybd .ibd{ height:auto; width:91%; padding:3% 5% 3% 4% }
.mobile .waybd .ibd p{ display:flex; align-items:baseline; }
.mobile .waybd .ibd p span{ margin:0 }
.mobile .waybd .ibd p .sn{ width:1rem; height:1rem; line-height:1rem; font-size:.75rem }
.mobile .waybd .ibd p .text{ flex:1; margin-left: .5rem; font-size:.7rem; line-height:1.3 }
.mobile .gift{  width: 60%; margin-left: 17.5%; margin-top:  1rem}
.totitlepc{
        font-size: 30px;
        display: inline-block;
        color: #ffcc25;
        height: 45px;
        font-weight: bold;
        padding-right: 6px;
        overflow: hidden;
        text-shadow: 3px 3px 3px #000;
        margin-top: 30px;
}
.totitlemo{
        font-size: 24px;
        display: inline-block;
        color: #ffcc25;
        height: 30px;
        font-weight: bold;
        padding-right: 6px;
        overflow: hidden;
        text-shadow: 3px 3px 3px #000;
        margin-top: 0.8rem;        
}

.return {
    position: absolute;
    width: 1.56rem;
    height: 1.56rem;
    left: 1.3rem;
    top: 2rem;
    z-index: 9;
}  
.pc .immediately{
    width: 155px;
    height: 66px;
    background:url(../images/hottopic/immediately.gif) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    display: block;
}
.mobile .immediately {
    width: 5.2rem;
    height: 1.8rem;
    background:url(../images/hottopic/immediately.gif) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    margin: 1rem auto;
    cursor: pointer;
    display: block;
}