html,body{ margin: 0; padding: 0; background-color: transparent; } .pagebox{ width: 640px; margin: 0 auto; position: relative; } .p_OccupyBox{ margin:0; width: auto; height:auto; padding:0; border:none; }  .p_pagebox { height:auto; margin: 20px auto 0; clear:both; position:relative; font-size: 0; white-space: nowrap; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .p_pagebox .pre{ display: block; height:90px; width: 32%; line-height: 90px; color:rgba(255, 255, 255, 1); border-width: 0; border-style: solid; border-color:rgba(255,255,255,0); background-color:rgba(101, 190, 186, 1); text-align:center; padding-top:0; padding-right:15px; padding-left:15px; position:relative; left:0; top:0; box-sizing:border-box; } .p_pagebox .pre:hover{ color:rgba(255,255,255,1); border-width: 0; border-style: solid; border-color:rgba(255,255,255,0); background-color:rgba(101,190,186,1); cursor:pointer; } .p_pagebox .pre:active{ background-color:rgba(90, 170, 167, 1); } .p_pagebox .pre .font{ display:inline-block; vertical-align:middle; bottom:0; font-size: 32px; } .p_pagebox .pre .iconfont{ display:inline-block; color:rgba(255,255,255,1); vertical-align:top; width: auto; height: auto; float: left; font-size: 32px; line-height: 90px; } .p_pagebox .pre:hover .iconfont{ color:rgba(255,255,255,1); } .p_pagebox .pre:active .iconfont{ color:rgba(255,255,255,1); } .p_pagebox .pre .iconfont:before{ content: "\e6b0"; } .p_pagebox .next{ display: block; height:90px; width: 32%; line-height: 90px; color:rgba(255, 255, 255, 1); border-width: 0; border-style: solid; border-color:rgba(255,255,255,0); background-color:rgba(101, 190, 186, 1); text-align:center; padding-top:0; padding-right:15px; padding-left:15px; position:relative; left:0; top:0; box-sizing:border-box; } .p_pagebox .next:hover{ color:rgba(255,255,255,1); border-width: 0; border-style: solid; border-color:rgba(255,255,255,0); background-color:rgba(101,190,186,1); cursor:pointer; } .p_pagebox .next:active{ background-color:rgba(90, 170, 167, 1); } .p_pagebox .next .font{ display:inline-block; vertical-align:middle; bottom:0; font-size: 32px; } .p_pagebox .next .iconfont{ display:inline-block; color:rgba(255,255,255,1); vertical-align:top; width: auto; height: auto; float: right; font-size: 32px; line-height: 90px; } .p_pagebox .next:hover .iconfont{ color:rgba(255,255,255,1); } .p_pagebox .next:active .iconfont{ color:rgba(255,255,255,1); } .p_pagebox .next .iconfont:before{ content: "\e6af"; }  .p_pagebox .NumBox{ -webkit-flex:1; flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; display: block; height: 90px; line-height: 90px; border: 1px solid #CDD5D5; position: relative; cursor: pointer; box-sizing:border-box; background: #e6e6e6; vertical-align: top; text-align: center; } .p_pagebox .num{ display: inline-block; vertical-align: middle; font-size: 32px; text-align: center; width: inherit; } .p_pagebox .ItemBox{ position: absolute; width: 100%; height: auto; border: 1px solid #D3D4D4; bottom: 90px; left: 0; max-height: 300px; overflow-y:auto; z-index: 99; border-bottom: none; } .p_pagebox .num .iconfont{ width: 32px; height: 32px; position: absolute; right: 20px; line-height: 90px; } .p_pagebox .num .iconfont:before{ content: "\e69c"; font-size: 32px; } .p_pagebox .NumBox ul li{ width: inherit; height: 80px; line-height: 80px; text-align: center; background-color: #FFFFFE; color: #323332; font-size: 32px; } .p_pagebox .NumBox ul li .iconfont:before{ content: ""; } .p_pagebox .NumBox ul li:active{ background-color: #e4e4e4; }   .p_more{ display: block; text-align:center; padding-right:20px; padding-left:20px; height: 100px; line-height: 100px; background-color: rgba(248,248,248,0.8); position: relative; border-radius: 0; border-width: 0; color: rgba(115,115,131,1); font-size: 22px; } .p_more:active{ background-color:rgba(248,248,248,0.8); } .p_more .font{ display:inline-block; vertical-align:middle; text-align: inherit; } .p_more .iconfont{ display:inline; vertical-align:middle; } .p_more .iconfont:before{ content: "\e6d1"; }   .p_CommonLanternBox{ position: relative; width: auto; height: auto; background-color: transparent; overflow: hidden; } .p_CommonInteraction{ width: inherit; height: auto; background-color: transparent; overflow: hidden; } .d_CommonInteractionA{ width: 60px; height: auto; vertical-align: middle; position: absolute; overflow: visible; top: 50%; left: 0px; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); } .d_CommonInteractionB{ width: 60px; height: auto; vertical-align: middle; position: absolute; overflow: visible; top: 50%; right: 0px; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); } .p_CommonSwitchBtnA{ display:inline-block; position: absolute; top: 50%; left: 50%; vertical-align:middle; cursor:pointer; font-size:56px; color:rgba(191,191,191,1); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .p_CommonSwitchBtnA .iconfont:before{ content: '\e6b0'; display: inline-block; } .p_CommonSwitchBtnA .font{ display:table; width:inherit; height:inherit; pointer-events:none; } .p_CommonSwitchBtnA:active{ color: rgba(105,192,188,1); } .p_CommonSwitchBtnB{ position: absolute; top: 50%; right: 50%; display:inline-block; vertical-align:middle; cursor:pointer; font-size:56px; color:rgba(191,191,191,1); -webkit-transform: translate(50%,-50%); transform: translate(50%,-50%); } .p_CommonSwitchBtnB .iconfont:before{ content: '\e6af'; display: inline-block; } .p_CommonSwitchBtnB .font{ display:table; width:inherit; height:inherit; pointer-events:none; } .p_CommonSwitchBtnB:active{ color: rgba(105,192,188,1); } .p_CommonSummaryBoxA{ width: auto; height: auto; margin-bottom: 20px; background-color: transparent; overflow: hidden; text-align: center; } .p_CommonThumbnailBox{ width: auto; height: auto; background-color: transparent; overflow: hidden; } .p_CommonSquareNumBtn { display: inline-table; margin: 0px 5px; background-color:rgba(191,191,191,1); color: rgba(153,153,153,1); font-size: 12px; border-radius: 10px; text-align: center; } .p_CommonSquareNumBtn:active { background-color: rgba(105,192,188,1); } .p_CommonSquareNumBtn.active { background-color: rgba(105,192,188,1); } .lantern{ margin-left: 50px !important; margin-right:50px !important; } .p_CommonSquareNumBtn .shape{ width:inherit; height:inherit; text-indent: -99999px; display: table-cell; vertical-align: middle; border-radius: inherit; -moz-border-radius: inherit; }