@charset "utf-8"; html { font-size:14px; height:100% } body { font-family:'Microsoft Yahei' , '微软雅黑' , 'Hiragino Sans GB' , Tahoma , Helvetica , Arial , '宋体' , nimbussansl , liberationsans , freesans , clean , sans-serif , 'Segoe UI Emoji' , 'Segoe UI Symbol'; min-height:100%; min-width:780px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background-color:#FFFFFF; margin:0; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:center } div { background-position:center; background-repeat:no-repeat } h4 { margin:0; padding:.5em; font-size:1.1em } p { font-size:1em; padding:.5em; margin:0 } select { background:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.05)); background:-moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.05)); background:-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.05)); background:-ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.05)); background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.05)) } a { color:inherit; } a:active { color:inherit } article { max-width:1024px; padding:.5em; font-family:'Lucida Grande' , 'Lucida Sans Unicode' , 'Hiragino Sans GB' , 'WenQuanYi Micro Hei' , Verdana , Aril , sans-serif; margin:0 auto; } article h1 { color:#333 } .abs,.carousel-left,.carousel-right { position:absolute; z-index:100; } .abs.cover,.carousel-left.cover,.carousel-right.cover,.map,.map-body,.map-box,.msg.time:before,.msg.time:after,.post-pnl,.res,.res-body,.res-box,.slip,.rel-list,body.ifr.ifr2 .btn-head { position:absolute; top:0; left:0; right:0; bottom:0; } .abs.top,.carousel-left.top,.carousel-right.top,.map-head,.res-head { position:absolute; top:0; left:0; right:0; } .abs.bottom,.carousel-left.bottom,.carousel-right.bottom,.map-tabs,.res-tabs,.res-warn { position:absolute; bottom:0; left:0; right:0; } .abs.left,.carousel-left.left,.carousel-right.left,.res-pnl,.leaf:before { position:absolute; top:0; left:0; bottom:0; } .abs.right,.carousel-left.right,.carousel-right.right,.map-pnl { position:absolute; top:0; bottom:0; right:0; } .abs.tl,.carousel-left.tl,.carousel-right.tl,.carousel-item,.msg-left>.msg-host,.msg-left>.msg-ball:before,.cascade-item { position:absolute; top:0; left:0; } .abs.tr,.carousel-left.tr,.carousel-right.tr,.msg-right>.msg-host,.msg-right>.msg-ball:before { position:absolute; top:0; right:0; } .abs.bl,.carousel-left.bl,.carousel-right.bl { position:absolute; bottom:0; left:0; } .abs.br,.carousel-left.br,.carousel-right.br,.map-warn,.map-bar,.res-bar { position:absolute; bottom:0; right:0; } .rel,.list .item,.carousel,.carousel-box,.carousel-bar,.map-tab,.msg,.msg-ball,.msg-left,.msg-right,.post,.post-pic,.res-tab,.cascade,.leaf { position:relative; z-index:1000 } .inl,.slip:before,.slip:after,.slip-inner { display:inline; vertical-align:bottom } .inb,.slip-row,.carousel-item,.cascade-item { display:inline-block; float:none !important; vertical-align:bottom } .hide,.node.fold>.tree { display:none } .fl,.msg-ball { float:left; } .fl.left,.msg-ball.left { float:left } .fl.right,.msg-ball.right { float:right } .fl.clb,.msg-ball.clb { clear:both } .fl.cll,.msg-ball.cll { clear:left } .fl.clr,.msg-ball.clr { clear:right } .ofhd,.nowrap,.map-item-btns,.msg,.msg-left,.msg-right,.msg-center,.slip,.carousel,.cascade { overflow:hidden } .bx { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } .pd { padding:.5em } .mg { margin:.5em } .bg,.mask,.msg-host,.msg-audio-btn { -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:center; } .bg.cover,.mask.cover,.msg-host.cover,.msg-audio-btn.cover { -webkit-background-size:cover; -moz-background-size:cover; background-size:cover } .bg.contain,.mask.contain,.msg-host.contain,.msg-audio-btn.contain { -webkit-background-size:contain; -moz-background-size:contain; background-size:contain } .bg.fix,.mask.fix,.msg-host.fix,.msg-audio-btn.fix { background-attachment:fixed } .list { margin:0; padding:0; } .list .item { display:block; overflow:hidden } .hide,.node.fold>.tree { display:none !important } .show { display:initial !important } .unselect,.map-box,.res-box,.slip { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } .nowrap,.slip,.carousel,.cascade { white-space:nowrap } .msg-ball.link { max-width:60%; padding:1px } .msg-ball.img { padding:.2em; max-width:60%; min-height:2em; } .msg-ball.img >img,.msg-ball.img >video { max-width:100%; max-height:15em; vertical-align:bottom } .msg-ball.img .img-container >img { max-width:100%; max-height:15em; vertical-align:bottom } .msg-anchor { color:#50a7dc; text-decoration:none; word-break:break-all; cursor:pointer } .msg-left>.msg-host { left:.5em } .msg-left>.msg-ball { float:left; } .msg-left>.msg-ball:before { left:-.5em; border-color:transparent #efefef transparent transparent; border-width:.4em .6em .4em 0 } .msg-right>.msg-host { right:.5em } .msg-right>.msg-ball { float:right; } .msg-right>.msg-ball:before { right:-.55em; border-color:transparent transparent transparent #efefef; border-width:.4em 0 .4em .6em } .msg-center { max-width:25em; width:100%; margin:0 auto !important; border:1px solid #cdcdcd; -webkit-box-shadow:1px 1px 5px 0 #cdcdcd; box-shadow:1px 1px 5px 0 #cdcdcd } .msg.time { text-align:center; color:#999; line-height:0; height:1px; margin:1.5em 2em; overflow:visible; padding:0; } .msg.time:before,.msg.time:after { content:""; height:1px; background-color:#e9e9e9 } .msg.time:before { right:65% !important } .msg.time:after { left:65% !important } .msg.min .msg-host { display:none } .msg.min .msg-ball { margin:.5em 1em } .img-container { display:inline-block } body { background:#FFFFFF } .body-bg { display:none } .contaniner { margin:0 } .msg-host { -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:center } .msg-ball { word-break:break-all; } .bg,.msg-host,.msg-audio-btn { -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:center; } .bg.cover,.msg-host.cover,.msg-audio-btn.cover { -webkit-background-size:cover; -moz-background-size:cover; background-size:cover } .bg.contain,.msg-host.contain,.msg-audio-btn.contain { -webkit-background-size:contain; -moz-background-size:contain; background-size:contain } .bg.fix,.msg-host.fix,.msg-audio-btn.fix { background-attachment:fixed } .msg { overflow:hidden; } .msg-host { top:.5em; -webkit-border-radius:2em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border-radius:2em; width:36px; height:36px; background-color:#b3b5b7; color:#fff; overflow:hidden; text-align:center; -webkit-box-shadow:0; box-shadow:0; } .msg-host>i { font-size:2.65em; line-height:1.25 } .msg-ball { line-height:20px; font-size:1em; padding:8px 1em; margin:.5em 4.2em; border-radius:.4em; min-width:2em; max-width:100%; font-size:14px; color:#323232; /*对话字体颜色*/ background-color:#9BCD9B; /*对话背景框颜色*/ -webkit-box-shadow:0; box-shadow:0; } .msg-ball1 { color:#323232; /*对话字体颜色*/ background-color:#DAA520; /*对话背景框颜色*/ } .msg-ball:before { content:""; top:12px !important; width:0; height:0; border-style:solid } .msg-ball.img { padding:.2em; max-width:100%; } .msg-ball.img >img { max-width:100%; max-height:15em; vertical-align:bottom } .msg-anchor,.msg-ball .msg-link,.msg-ball a { color:#4270f6; text-decoration:none; word-break:break-word; cursor:pointer; } .msg-anchor:hover,.msg-ball .msg-link:hover,.msg-ball a:hover { opacity:.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80) } .msg-ball .seq-num:hover { opacity:.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80) } .msg-relques { margin:0 -1em; position:relative; padding:5px 1em 1px 1em; } .msg-relques.child1 { padding:12px 1em 1px 1em } .msg-left { overflow:hidden; } .msg-left>.msg-host { left:.5em; top:.5em } .msg-left>.msg-ball { float:left; } .msg-left>.msg-ball:before { left:-.5em; border-color:transparent #DAA520 transparent transparent; border-width:.4em .6em .4em 0 } .msg-left:before { content:attr(worker); display:block; color:#848484; margin-bottom:-.5em; margin-left:3.8em; padding-top:.5em } .msg-left>.msg-host { left:.5em; top:.7em; background-color:#6fbdf3; } .msg-left>.msg-host .ic { font-size:2.65em } .msg-right { overflow:hidden; } .msg-right>.msg-host { right:.95em; top:.5em } .msg-right>.msg-ball { float:right; } .msg-right>.msg-ball:before { right:-.55em; border-color:transparent transparent transparent #9BCD9B; border-width:.4em 0 .4em .6em } .msg-center { overflow:hidden; max-width:25em; width:95%; margin:.3em auto !important; -webkit-box-shadow:0; box-shadow:0 } .msg.time { text-align:center; color:#bfbfbf; line-height:0; height:1px; margin:1.2em 2em; overflow:visible; padding:0; } .msg.time:before,.msg.time:after { content:""; height:0; background-color:#e9e9e9; display:none } .msg.time:before { right:75% !important } .msg.time:after { left:75% !important } .msg.min .msg-host { display:none } .msg.min .msg-ball { margin:.5em 1em } .msg.unread { cursor:pointer; color:#3d9ce4; } .msg.unread:active { color:#7fabcc } ul,li { list-style:none; margin:0; padding:0 } /*--------------------------------------------------------------------*/ @media screen and (min-width:900px) { body { text-align:center; /*background-color:#caeaf7;*/ /*对话背景颜色*/ background-color:#FFFFFF; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover } .contaniner { /*第1个数字是首句对话顶部间隙*/ margin:160px 0 50px } .pnl { text-align:left; margin:auto; max-width:900px; max-height:400px; width:900px; border-radius:5em; /*overflow:hidden;*/ } /*---------------------------------------------------------------*/ }@media screen and (max-width:720px) { body { /*overflow:hidden;*/ overflow:-Scroll;overflow-x:hidden; -webkit-overflow-scrolling:touch; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent } .media-container { width:100%; height:100% } .contaniner { /*第1个数字是首句对话顶部间隙*/ margin:100px 0 50px } .pnl-body { top:3.3em !important } .pnl-right { display:none } .pnl-left { right:0 !important; background-color:#fff; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease } .pnl-msgs { background-color:#fff; bottom:3.3em !important; padding:.3em .3em 1em .3em; border-bottom:0 solid #ddd } .msg-left .msg-ball { margin:.5em 3.2em .5em 4.2em } .msg-right .msg-ball { margin:.5em 4.2em .5em 3.2em } .msg-ball { min-width:.7em; } .msg-anchor,.msg-ball a { color:#4270f6 } .msg.robot .msg-ball { color:#323232; /*background-color:#e0f4e0;*/ background-color:#DAA520; } .msg.robot .msg-ball:before { border-color:transparent #DAA520 transparent transparent } .msg.worker .msg-ball { color:#323232; background-color:#DAA520; } .msg.worker .msg-ball:before { border-color:transparent #DAA520 transparent transparent } .msg-right .msg-ball { color:#323232; background-color:#9BCD9B !important; } .msg-right .msg-ball:before { border-color:transparent transparent transparent #9BCD9B !important } .msg { padding:.2em 0; } .msg.time:before { background-color:transparent } .msg.time:after { background-color:transparent } #histStart:before { right:80% !important } #histStart:after { left:80% !important } .mask:after { right:.8em; top:.8em } .link-pnl { margin-top:3.3em } } .headDefault{ background-color:transparent !important; border-radius:5px; background-image: url(../Images/head.png); } /*按钮*/ .btn-outline { background-color: transparent; color: inherit; transition: all .5s; } .btn-primary.btn-outline { color: #428bca; } .btn-success.btn-outline { color: #5cb85c; } .btn-info.btn-outline { color: #5bc0de; } .btn-warning.btn-outline { color: #f0ad4e; } .btn-danger.btn-outline { color: #d9534f; } .btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover { color: #fff; } .btn,.btn-lg{padding:10px 14px;font-size:14px;line-height:1.3333333;border-radius:6px} /*问题输入框*/ .textarea { /*width: 860px;*/ width:68%; height: 80px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ee6363; border-radius: 4px; background-color: #f8f8f8; font-size: 14px; resize: none; }