﻿/*base*/
.bdc {border: 1px solid #ccc;}
.abs {position: absolute;}
/*phoneContactBox*/

.phoneContactBox {width: 356px;height: 768px;border-radius: 25px;background: #fff;top:50%;left: 50%;margin-top: -384px;margin-left: -178px;box-shadow: 0 10px 100px rgba(0,0,0,.3);}
.phoneContactBox h3 {font-style: italic;width: 100px;text-align:center;top: 20px;left: 50%;margin: 0 0 0 -50px;color: #ccc;font-size: 29px;}
.phoneContactBox .phoneView {top: 103px;left: 18px;width: 320px;height: 576px;background: #666;font-size: 12px;}
.earpiece {position: absolute;top: 65px;left: 50%;margin-left:-12px;}
.earpiece li {width: 6px;height: 6px;line-height: 0;font-size: 0;border-radius: 3px;background: #e5e5e5;display: block;float: left;margin-right: 2px;}
.phoneHomeBtn {position:absolute;width: 64px;height: 64px;border-radius: 32px;bottom: 10px;left: 50%;cursor: pointer;margin-left: -32px;transition: background-color .5s;-moz-transition: background-color .5s;-webkit-transition: background-color .5s;-o-transition: background-color .5s;}
.phoneHomeBtn div {width: 32px;height: 32px;border-radius: 8px;left: 15px;top: 15px;}
.phoneHomeBtn:hover {background: #FF8E62;transition: background-color 1s;-moz-transition: background-color 1s;-webkit-transition: background-color 1s;-o-transition: background-color 1s;}
.phoneHomeBtn:hover div {border-color: #fff;transition: border-color 1s;-moz-transition: border-color 1s;-webkit-transition: border-color 1s;-o-transition: border-color 1s;}
.phoneElement {position: absolute;background: #999;font-size: 0;line-height: 0;}
.phoneElementArea .sp {width: 90px;height: 3px;top: -4px;right: 27px;}
.phoneElementArea .wz {height: 54px;width: 3px;left: -4px;top: 104px;}
.phoneElementArea .ylz {height: 36px;width: 3px;left: -4px;top: 204px;}
.phoneElementArea .ylf {height: 36px;width: 3px;left: -4px;top: 264px;}
.phoneView h5.title {margin: 0;text-align: center;font-weight: normal;padding-top: 1px;color: #f0f0f0;;font-size: 14px;z-index: 10;position: relative;background: #333;}
.phoneView h5.title .netStatus {left: 5px;top:3px;}
.phoneView h5.title .PowerState {display:block;right:5px;top: 5px;padding: 1px;border:1px solid #ccc;height: 8px;width: 20px;}
.phoneView h5.title .PowerState i {display:block;width: 100%;height: 100%;background: #ccc;}
.contactWay {border-radius: 5px 5px 0 0;background: #D16C4B;width: 100%;height: 40%;}
.telIcon {border-radius: 16px;padding: 16px;line-height: 0;background: #fff;left: 5px;top: 5px;color:#D16C4B;}
.telIcon i {font-size: 20px;left: 9px;top: 7px;}
.contactWay h4 {color: #fff;font-size: 20px;margin: 0;position: absolute;left: 42px;top:8px;}
.contactWay p {color: #fff;font-size: 22px;margin: 0;position: absolute;left: 10px;top: 45px;}
.otherCase {left: 0;bottom: 0;width: 100%;height: 60%;background: #fff;border-radius: 0 0 5px 5px;}
.otherCaseTabTitle {height: 28px;width: 100%;left: 0;top:-28px;color: #eee;}
.otherCaseTabTitle em {position:absolute;top: 2px;cursor: pointer;}
.otherCaseTabTitle .list-1 {left: 26px;}
.otherCaseTabTitle .list-2 {left: 104px;}
.otherCaseTabTitle em:hover {color:#fff;background: #D16C4B;}
.otherCaseTabTitle i {display: block;left: 43px;color:#fff;bottom: 0;line-height: 7px;height: 7px;}
.artList {position: absolute;left: 0;top:0;width: 100%;height: 100%;overflow: hidden;}
.artList ul {position: absolute;left: 0;top: 0;width: 200%;height: 100%;}
.artList ul li {float: left;width: 50%;height: 100%;}
.artList ul li span {display: inline-block;padding: 15px 10px;overflow: hidden;}
.artList ul li span em {display:block;width: 158px;line-height: 31px;border-bottom: 1px solid #eee;position: relative;}
.artList ul li span em img {width: 20px;vertical-align: middle;margin-right: 5px;}
.artList ul li span em i {position: absolute;display: block;right: 0;top: 0;color: #999;}
.artList ul li span em s {padding: 0 5px;color: #fff;background: #999;margin-right: 5px;}
.artList ul li span .r1 s {background: #d1401d;}
.artList ul li span .r2 s {background: #d1704d;}
.artList ul li span .r3 s {background: #d19779;}
.iconPhone {height:33px;width: 16px;padding: 9px 23px 0 11px;color: #666;border-radius: 25px 0 0 25px;right: -60px;cursor: pointer;}
.phone-show-area {width: 100%;height: 100%;background: #fff;top:0;left: 0;z-index: 9;border-radius: 8px;padding-top: 21px;}
.phone-show-area i.icon-spinner {position: absolute;left: 50%;top: 50%;font-size: 30px;color: #666;margin-top: -15px;margin-left: -13px;}

/*menu*/

#pageMenu {width: 100%;height: 100%;overflow: auto;line-height: 180%;font-size: 14px;}
#pageMenu, #pageMenu ul {padding-left: 10px;}
#pageMenu h5 {font-weight: 700;font-size: 16px;color: #666;}

/*兼容bootcss的图标勿删*/
.icon-home,
.icon-list,
.icon-rss,
.icon-phone,
.icon-coffee,
.icon-hospital,
.icon-user,
.icon-comments,
.icon-file,
.icon-building,
.icon-credit-card,
.icon-fire,
.icon-tint,
.icon-file,
.icon-flash,
.icon-jpy,
.icon-medkit,
.icon-pagelines,
.icon-retweet,
.icon-gittip,
.icon-file,
.icon-bolt,
.icon-jpy,
.icon-medkit,
.icon-retweet,
.icon-comment,
.icon-ambulance,
.icon-book,
.icon-reorder,
.icon-yen,
.icon-search,
.icon-frown,
.icon-list-ul {
	font-family: 'mobileicon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-home:before{
	content: "\e67d";	
}
.icon-list:before{
	content: "\e6d7";
}
.icon-rss:before{
	content: "\e6a7";
}
.icon-phone:before{
	content: "\e6a9";
}
.icon-coffee:before{
	content: "\e6a8";
}
.icon-hospital:before{
	content: "\f0f8";
}
.icon-user:before{
	content: "\e63c";
}
.icon-comments:before{
	content: "\e6d3";
}
.icon-file:before{
	content: "\e6a0";
}
.icon-building:before{
	content: "\f0f7";
}
.icon-credit-card:before{
	content: "\e668";
}
.icon-fire:before{
	content: "\e6b9";
}
.icon-tint:before{
	content: "\e6b6";
}
.icon-file:before{
	content: "\e66b";
}
.icon-jpy:before{
	content: "\e6b1";
}
.icon-medkit:before{
	content: "\e6af";
}
.icon-pagelines:before{
	content: "\e6b5";
}
.icon-retweet:before{
	content: "\e62f";
}
.icon-gittip:before{
	content: "\e611";
}
.icon-file:before{
	content: "\e66b";
}
.icon-bolt:before{
	content: "\e6a0";
}
.icon-medkit:before{
	content: "\e6af";
}
.icon-retweet:before{
	content: "\e62f";
}
.icon-comment:before{
	content: "\e63e";
}
.icon-ambulance:before{
	content: "\f0f8";
}
.icon-book:before{
	content: "\e616";
}
.icon-reorder:before{
	content: "\e667";
}
.icon-yen:before{
	content: "\e6b1";
}
.icon-search:before{
	content: "\e61c";
}
.icon-list-ul:before{
	content: "\e6d7";
}
.icon-frown:before {
    content:"\e688";
}