.subcenter{ width: 90%; margin: 0 auto; position: relative; padding: 30px 0; /* -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; */ } .subcenter:after, .trili_box:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .trili_box{ width: 100%; position: relative; } .trili_box .trili_boxl{ float: left; width: 77%; position: relative; } .trili_box .trili_boxr{ float: right; width: 20%; position: relative; } /*top*/ .trili_box .trili_boxr div.top{ width: 100%; border: 1px solid #e5e5e5; border-bottom: none; background: #f2f2f2; position: relative; } .trili_box .trili_boxr div.top p{ font-size: 20px; color: #333333; display: block; margin: 0 auto; height: 48px; line-height: 48px; text-align: center; } .trili_box .trili_boxr div.top a{ display: block; width: 20px; height: 20px; background-image: url(../images/b27.png); background-repeat: no-repeat; background-size: 40px 20px; -webkit-background-size: 40px 20px; position: absolute; top: 50%; margin-top: -10px; z-index: 5; } .trili_box .trili_boxr div.top a.prev{ left: 10px; background-position: left center; } .trili_box .trili_boxr div.top a.next{ right: 10px; background-position: right center; } /*table*/ .trili_box .trili_boxr table.table{ width: 100%; border: 1px solid #e5e5e5; table-layout: fixed; text-align: center; vertical-align: middle; } .trili_box .trili_boxr table.table tr td{ padding: 10px 5px; position: relative; } .trili_box .trili_boxr table.table tr td span{ font-size: 16px; color: #777777; position: relative; } .trili_box .trili_boxr table.table tr td.hui span{ color: #ccc } .trili_box .trili_boxr table.table tr td.hover-title:before{ content: ""; width: 3px; height: 3px; background: #ff0000; position: absolute; left: 50%; margin-left: -1.5px; bottom:0; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .trili_box .trili_boxr table.table tr td.now:after{ content: ""; position: absolute; left: 50%; top: 50%; margin: -14px 0 0 -14px; width: 25px; height: 25px; border: 1px solid #a40700; padding: 1px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } /* .trili_box .trili_boxr table.table tr td.now>span:before{ content: ""; position: absolute; left: 50%; top: 50%; margin: -14px 0 0 -14px; width: 25px; height: 25px; border: 1px solid #a40700; padding: 1px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } */ .hover-title:hover>span:before{ content:attr(data-msg); position:absolute; width: 120px; bottom:20px; margin-left: -60px; padding:5px 6px; display:inline-block; color:#333; border:1px solid #ccc; border-radius:5px; font-size:14px; word-wrap: break-word; word-break: normal; line-height: 1.5em; background: #ccc; z-index: 50; } .hover-title:hover>span:after{ content:""; border-top:8px solid #ccc; border-left:5px solid transparent; border-right:5px solid transparent; position:absolute; top:-3px; left:0px; z-index: 50; } /*bottom*/ .trili_box .trili_boxr div.bottom{ width: 100%; border: 1px solid #e5e5e5; border-top: nne; padding: 10px; border-top: none; } .trili_box .trili_boxr div.bottom h1{ font-size: 16px; color: #bd2315; font-weight: normal; } .trili_box .trili_boxr div.bottom p{ font-size: 14px; color: #333333; margin: 10px 0 15px 0; } .trili_box .trili_boxr div.bottom span{ display: block; width: 100%; position: relative; font-size: 14px; color: #999999; line-height: 2em; word-wrap: break-word; word-break: normal; } .trili_box .trili_boxr p.a{ font-size: 14px; color: #333333; width: 100%; margin: 20px 0; } .trili_box .trili_boxr div.b{ width: 100%; position: relative; padding-bottom: 15px; } .trili_box .trili_boxr div.b span{ display: block; float: left; font-size: 14px; color: #333333; height: 36px; line-height: 36px; width: 40px; } .trili_box .trili_boxr div.b input{ display: block; width: 196px; height: 36px; float: left; border: 1px solid #ddd; outline: none; background: none; line-height: 36px; padding: 0 10px; } .trili_box .trili_boxr div.b a{ display: block; width: 123px; height: 36px; color: #fff; font-size: 16px; background: #999999; float: left; text-align: center; line-height: 36px; border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; } .trili_box .trili_boxr div.b a:hover{ background: #333; } .contenta{ width: 100%; height: 205px; overflow: hidden; } /*left*/ .trili_boxl>h1.a{ font-size: 16px; color: #bd2315; font-weight: normal; margin: 15px 0; } .trili_boxl table.b{ width: 100%; vertical-align: middle; table-layout: fixed; border: 1px solid #ddd; border-collapse: collapse; } .trili_boxl table.b.c{ border-bottom: none; } .trili_boxl table.b th{ background: #f2f2f2; } .trili_boxl table.b th, .trili_boxl table.b td{ padding: 15px 0; } .trili_boxl table.b td{ border-top: 1px solid #ddd; } .trili_boxl table.b *{ text-align: center; max-width: 100%; font-size: 14px; color: #333333; font-weight: normal; } .trili_boxl table.b td.clock em{ display: inline-block; width: 21px; height: 21px; border: 1px solid #ddd; margin: 0 20px 0 0; cursor: pointer; } .trili_boxl table.b td.clock em.on{ background: url(../images/b26.png) center no-repeat; background-size: 14px 14px; -webkit-background-size: 14px 14px; } .trili_boxl table.b td.clock a{ display: inline-block; width: 21px; height: 21px; background: url(../images/b28.png) center no-repeat; background-size: 21px 21px; -webkit-background-size: 21px 21px; } .trili_boxl div.c{ width: 100%; padding: 20px 15px; background: #fafafa; margin: 15px 0 0 0; } .trili_boxl div.c div.d{ width: 100%; } .trili_boxl div.c div.d h1{ font-size: 16px; color: #333333; font-weight: normal; padding: 0 0 30px 0; line-height: 30px; } .trili_boxl div.c div.d h1 input{ width: 54px; height: 30px; background: none; border: 1px solid #ddd; outline: none; padding: 0 5px; font-size: 14px; margin: 0 5px; line-height: 30px; } .trili_boxl div.c div.d h1 a{ display: block; float: right; width: 123px; height: 39px; background: #d12519; text-align: center; line-height: 39px; font-size: 18px; color: #fff; line-height: 39px; border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .trili_boxl div.c div.d em.checked_btn{ display: inline-block; height: 30px; line-height: 30px; font-size: 14px; color: #333333; font-style: normal; margin: 0 20px 0 0; padding-left: 30px; position: relative; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; -khtml-user-select:none; user-select:none; cursor: pointer; } .trili_boxl div.c div.d em.checked_btn:before{ content: ""; width: 21px; height: 21px; position: absolute; left: 0; top: 50%; margin-top: -10px; border: 1px solid #ddd; } .trili_boxl div.c div.d em.checked_btn.on:before{ background: url(../images/b26.png) center no-repeat; background-size: 14px 14px; -webkit-background-size: 14px 14px; } /*pc*/ @media screen and (max-width: 1200px){ .subcenter{ width: 96%; } .trili_box .trili_boxl, .trili_box .trili_boxr{ width: 100%; } .trili_box .trili_boxr{ margin: 30px 0 0 0; } .trili_box .trili_boxr div.bottom{ border-top: 1px solid #e5e5e5; } }