*{ margin: 0; outline: 0; padding: 0; font-size: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a { color:#000; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); } html { height: 100%; -webkit-text-size-adjust:none; } body { margin: 0; padding: 0; width: 100%; height: 100%; min-height: 100%; /*font-family: Helvetica, Arial, sans-serif;*/ font-family: Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif; font-size: 12px; line-height: 1.231; -webkit-touch-callout: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; position: relative; } img { -ms-interpolation-mode: bicubic; vertical-align: middle; } img:not([src*="/"]){display:none;} table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td, caption { vertical-align: middle; } textarea { resize: none; border: 0; padding: 8px 0; border-radius: 0; } input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } li { list-style: none; } /**********************************common**********************************/ .white { color: #fff; } .gray { color: #aaa; } .fl { float: left; } .fr { float: right; } .ofh { overflow: hidden; } .align_left { text-align: left; } .align_right { text-align: right; } .align_center { text-align: center; } .vertical_top { vertical-align: top; } .vertical_middle { vertical-align: middle; } .vertical_bottom { vertical-align: bottom; } .relative { position: relative; } .absolute { position: absolute; } .hidden { display: none; } .hidden.on { display: block; } .vhidden { visibility: hidden; } .vhidden.on { visibility: visible; } .empty:empty { display: none; } .block { display: block; } .inlineBlock { display: inline-block; } .ml_10 { margin-left: 10px; } .mr_10 { margin-right: 10px; } .mt_10 { margin-top: 10px; } .mb_10 { margin-bottom: 10px; } .m_10 { margin: 10px; } .m_auto { margin: auto; } .ml_5 { margin-left: 5px; } .mr_5 { margin-right: 5px; } .mt_5 { margin-top: 5px; } .mb_5 { margin-bottom: 5px; } .m_5 { margin: 5px; } .m_auto { margin: auto; } .pl_10 { padding-left: 10px; } .pr_10 { padding-right: 10px; } .pt_10 { padding-top: 10px; } .pb_10 { padding-bottom: 10px; } .p_10 { padding: 10px; } .pl_5 { padding-left: 5px; } .pr_5 { padding-right: 5px; } .pt_5 { padding-top: 5px; } .pb_5 { padding-bottom: 5px; } .p_5 { padding: 5px; } .bold { font-weight: bold; } .bolder { font-weight: bolder; } .box { width: 100%; display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .box > * { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } .tbox { width: 100%; height: 100%; } .tbox > * { height: 100%; display: table-cell; vertical-align: top; } .tbox > *:last-child { width: 100%; } .look-detail { background: #d7455d !important; height:25px; line-height:25px; color:#FFF; } .look-detail span { padding:0 10px; } /*************************************************/ .box_swipe{ overflow:hidden; position:relative; } .box_swipe>ul li{position:relative;} .box_swipe>ul label{ z-index:100; position:absolute; left:0; bottom:0; color:#666; text-align:center; } .box_swipe>ol{ margin-top:10px; height:20px; /*position: absolute; z-index:10; bottom:0;*/ width:100%; text-align:center; -webkit-box-sizing:border-box; } .box_swipe>ol>li{ display:inline-block; margin:5px 3px; width:8px; height:8px; background-color:#fff; border-radius: 3px; } .box_swipe>ol>li.on{ background-color:#05BDE9; } /*********************************************/ html,body,.container{ min-height:100%; } .container{ max-width:640px; margin:auto; position:relative; } header{ overflow:hidden; padding:30px 0; } header>div{ height:50px; background-color:#d7455d; } header>div>ul{ width:100%; -webkit-box-sizing:border-box; } header>div>ul li{ font-size:16px; color:#fff; height:50px; line-height:50px; vertical-align: middle!important; -webkit-box-sizing:border-box; } header>div>ul li:nth-of-type(1){ width:90px!important; } header>div>ul li:nth-of-type(2) span{ float:left; } header>div>ul li:nth-of-type(2) label{ display:inline-block; width:75px; text-align:center; overflow:hidden; text-overflow:ellipsis; } header>div>ul li:nth-of-type(3){ text-align:right; width:50px; } header .pic{ background-color:#fff; position:absolute; display:inline-block; width:70px; height:70px; border-radius:70px; top:-15px; left:5px; border:5px solid #d7455d; overflow:hidden; } header .pic img{ max-width:100%; height:100% } .btn_music{ display:inline-block; width:33px; height:50px; margin:auto 5px; background:url("../img/05.png") no-repeat right center; background-size:auto 27px; } .btn_music.on{ background-position: 0 center; } .body{ padding:10px; margin:10px; -webkit-box-sizing:border-box; min-height:100%; background:rgba(215,69,93,0.2); } .body>div{ margin:5px 0; } .body .des{ margin-top:-5px; background:#f78897; color:#fff; line-height:23px; padding:10px; -webkit-box-sizing:border-box; } .body .des h3{ line-height:30px; font-weight:100; font-size:18px; } .list_font a{ display:block; margin:10px 0; background:rgba(255,255,255,0.6); } .list_font li .tbox div{ height:50px; vertical-align: middle; } .list_font li .tbox div:nth-of-type(1){ color:#ca3951; width:100%!important; padding:0 10px; -webkit-box-sizing:border-box; } .list_font li .tbox div:nth-of-type(2){ background:#d7455d; } .list_font li .tbox div:nth-of-type(2)>figure{ text-align:center; width:60px; background:#d7455d; color:#fff; line-height:20px; } .list_font li .tbox div:nth-of-type(2)>figure span{ display:inline-block; height:20px; width:35px; max-width:35px; margin:5px auto; } .list_font li .tbox div:nth-of-type(2)>figure span img{height:100%;max-width:25px;height:25px;} /*****************************************/ .btns_1{ text-align:center; line-height:35px; } .btns_1 a{ display:inline-block; width:80px; height:35px; line-height:35px; color:#fff; font-size:14px; border-radius:5px; background: -webkit-gradient(radial, 50% -385%, 0, 50% -385%, 500, from(#dc5c71), to(#d7455d), color-stop(30%, #dc5c71), color-stop(30%, #d7455d)); } .overlay_ul{ height:100%; max-width:640px; padding:0 5px; position:absolute; z-index:500; left:0; right:0; bottom:0; top:0; margin:auto; background:rgba(0,0,0,0.3); display:none; overflow:hidden; } .overlay_ul.on{ display:block; } .overlay_ul>*{ position:absolute; bottom:100%; padding:20px; -webkit-box-sizing:border-box; border-radius:5px 5px 0 0; } .overlay_ul>*:after{ content:"×"; font-size:20px; color:#fff; display:inline-block; width:25px; height:25px; border-radius:25px; background-color:#ccc; border:2px solid #fff; position: absolute; right:-15px; top:0px; text-align:center; line-height:23px; pointer-events:none; } .overlay_ul>li.on{ display:block; height:250px; bottom:0; left:10px; right:15px; z-index:600; margin:auto; background:#fff; -webkit-animation:"slide_up" .5s ease-out 0 1 alternate; } @-webkit-keyframes "slide_up"{ 0%{ -webkit-transform:translate3d(0, 100%, 0); } 100%{ -webkit-transform:translate3d(0, 0, 0); } } .overlay_ul table td{ height:45px; vertical-align: middle; } .overlay_ul table label{ margin:auto; display:block; width:100%; line-height: 30px; background:#dc5c71; border-radius:15px; text-align:center; color:#fff; font-size:14px; } .overlay_ul input{ padding:8px 3px; width:100%; -webkit-box-sizing:border-box; border:1px solid #aaa; border-radius:3px; } .overlay_ul textarea{ padding:3px; width:100%; -webkit-box-sizing:border-box; border:1px solid #aaa; border-radius:3px; } .overlay_ul li:last-child{ height:100%!important; right:-15px; left:0; background-color:rgba(62,78,78,0.7); } /***********************************************/ .requirePwd{ background:#fff!important; display:inline-block; position:absolute; width:230px; height:180px; top:0; bottom:0; left:0; right:0; margin:auto; z-index:10; background:red; } .requirePwd li{ background-color:#fff!important; } .requirePwd .overlay_ul{ background:#fff; border-radius:0; } .list_table{ /*line-height:25px;*/ } .list_table td{ padding:5px; border:1px solid #ccc; } .list_table td:last-of-type{ width:50%; } .list_table tr{ background:#fff; } .list_table tr:nth-of-type(2n+1){ background:#eee; } .list_table tr:first-of-type{ font-weight:bolder; }