﻿*{margin:0;padding:0;}
body {font: 14px/1.5  "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color:#f7f7f7;}

ul{list-style-type:none;}
table{width:100%;border-collapse:collapse;}

.flleft{float:left;}
.flright{float:right;}
.clrall{clear:both;}
.clrfix::after{ content: "."; 
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;}

/*1——header*/
.headerWrapper{height:50px;background-color:#fff;}
.header{max-width:1010px;margin:0 auto;padding-left:10px;}
       .header .wnamepart span{color:#3498db;font-size:17px;font-weight:bold;margin-right:10px;line-height:50px;}
.header a{display:block;height:100%;line-height:50px;color:#34495e;text-decoration:none;padding:0px 15px;}
  .header a:hover{background-color:#eff3f5;color:#3498db;}

.footer{text-align:center;padding:20px;color:#7f8c8d;}


/*2——布局*/
.maincontainer{max-width:1000px;margin:20px auto;min-width:320px;}

.main-left{width:28%;float:left; background-color:#fff;box-shadow: 0 0 3px rgba(0,0,0,.1);}
.main-right{width:70%;float:right;box-sizing:border-box;}
/*3——部件*/
    /*侧边栏*/
.sidebar{padding:10px 20px 5px 20px;}
    /*侧边区提示信息区*/
.msgArea{position:relative;padding:13px 20px;margin-top:10px;background-color:#f3f5f7;color:#888;color:#9aabb8;}

    /*标题*/
.titpart{}
   /*基本表单*/
.baseformbox{}
 .baseformbox .boxline{margin:7px 0;color:#999;}
 .baseformbox label{display:block;line-height:20px;padding-bottom:3px;}
 .baseformbox .ipttext{width:100%;height:30px;line-height:30px;padding:0 5px;box-sizing:border-box;
                       border:1px solid #ddd;}
 .btnpart{text-align:center;}
 .baseformbox .btn{background-color: #3499da;width:100%;height:35px;line-height:35px;text-align:center;color:#fff;border:0;margin-top:13px;
                   border-radius:5px;font-size:15px; }
  .baseformbox .btn:hover{background-color:#348fca;}
   /*基本表格（详情页的义齿信息）*/
.basetablebox{margin:20px 0;}
 .basetablebox table{border-collapse:collapse;width:100%;color:#666;}
  .basetablebox th,.basetablebox td{border:1px solid #ddd;padding:5px 10px;}
  .basetablebox th{color:#fff;background-color:#666;line-height:24px;font-size:15px;text-align:center;}
  .basetablebox td{text-align:center}
    /*牙位表格*/
.toothtbArea{padding:2px 2px;}
  .toothtbArea  table{border:0;color:#111;}
  .toothtbArea  td{border:0;text-align:center;min-height:20px;}
  .toothtbArea  td span{display:block;min-height:20px;}
  .toothtbArea tr:first-child td:nth-child(1){border:1px solid #ddd;border-top:0;border-left:0;}
  .toothtbArea tr:first-child td:nth-child(2){border-bottom:1px solid #ddd;}
  .toothtbArea tr:nth-child(2) td:nth-child(1){border-right:1px solid #ddd;}

/*4——页面*/
  /*公司名称显示区*/
  .companyWrapper{background-color:#3498db;color:#fff;padding:15px;font-weight:bold;}
     .companyArea{max-width:1000px;margin:0 auto;font-size:16px;padding-left:10px;}

   /*侧边栏表单*/
.sidebar {}
  .sidebar .titpart{font-size:14px;border-bottom:1px solid #ddd;line-height:30px;margin-bottom:10px;padding-bottom:5px;}
.sidebar .baseformbox{margin-top:15px;}

/*查询页详情页*/
   /*查询页的右边区的订单信息区*/
.orderdetailArea{background-color:#f3f5f7;background-color:#fff;box-shadow: 0 0 3px rgba(0,0,0,.1);padding:10px 20px 20px;}
  /*部分1—标题*/
 .orderdetailArea .titpart{font-size:14px;border-bottom:1px solid #ddd;line-height:16px;margin-bottom:10px;padding:7px 0 12px;}
  .orderdetailArea .titpart span{display:inline-block;padding-left:10px;
                                 border-left:4px solid #3498db;height:16px;}
  /*部分2—右边区上部分，布局*/
  .ordertableArea{width:50%;float:left;margin-bottom:20px;}
  .toothpicArea{width:45%;float:right;min-width:210px;
              background-color:#f3f5f7;padding:10px 0;}

  /*部分3—表格（订单基本信息显示）*/
  .orderdetailArea table {}
  .orderdetailArea table td{padding:10px 5px;color:#999;}
  .orderdetailArea table td span{color:#222;display:inline-block;padding-left:10px;}
    .orderdetailArea  table tr:first-child td{}


/*部分4——牙齿动态显示图片box*/
.toothpicbox{width:200px;height:343px;position:relative;margin:0 auto;}
.toothpicbox img{width:36px;position:absolute;display:none;}
.toothpicbox .bgpic{width:200px;height:343px;position:static;display:block;}
.toothpicbox .showtooth{display:block;}

/*.toothpicbox .t1pic{top:116px;left:3px;}
.toothpicbox .t2pic{top:89px;left:5px;}
.toothpicbox .t3pic{top:62px;left:13px;}
.toothpicbox .t4pic{top:46px;left:27px;}
.toothpicbox .t5pic{top:31px;left:33px;}
.toothpicbox .t6pic{top:14px;left:43px;}
.toothpicbox .t7pic{top:4px;left:63px;}
.toothpicbox .t8pic{top:0px;left:81px;}
.toothpicbox .t9pic{top:0px;left:103px;}
.toothpicbox .t10pic{top:4px;left:122px;}
.toothpicbox .t11pic{top:13px;right:29px;}
.toothpicbox .t12pic{top:30px;right:20px;}
.toothpicbox .t13pic{top:46px;right:15px;}
.toothpicbox .t14pic{top:61px;right:10px;}
.toothpicbox .t15pic{top:90px;right:3px;}
.toothpicbox .t16pic{top:117px;right:0px;}

.toothpicbox .b16pic{bottom:105px;right:0px;}
.toothpicbox .b15pic{bottom:82px;right:0px;}
.toothpicbox .b14pic{bottom:59px;right:11px;}
.toothpicbox .b13pic{bottom:32px;right:25px;}
.toothpicbox .b12pic{bottom:14px;right:31px;}
.toothpicbox .b11pic{bottom:2px;right:42px;}
.toothpicbox .b10pic{bottom:0px;right:62px;}
.toothpicbox .b9pic{bottom:0px;left:100px;}
.toothpicbox .b8pic{bottom:0px;left:77px;}
.toothpicbox .b7pic{bottom:6px;left:61px;}
.toothpicbox .b6pic{bottom:14px;left:45px;}
.toothpicbox .b5pic{bottom:30px;left:33px;}
.toothpicbox .b4pic{bottom:32px;left:25px;}
.toothpicbox .b3pic{bottom:60px;left:13px;}
.toothpicbox .b2pic{bottom:89px;left:10px;}
.toothpicbox .b1pic{bottom:116px;left:5.2px;}*/

.toothpicbox .t18pic{top:116px;left:3px;}
.toothpicbox .t17pic{top:89px;left:5px;}
.toothpicbox .t16pic{top:62px;left:13px;}
.toothpicbox .t15pic{top:46px;left:27px;}
.toothpicbox .t14pic{top:31px;left:33px;}
.toothpicbox .t13pic{top:14px;left:43px;}
.toothpicbox .t12pic{top:4px;left:63px;}
.toothpicbox .t11pic{top:0px;left:81px;}
.toothpicbox .t21pic{top:0px;left:103px;}
.toothpicbox .t22pic{top:4px;left:122px;}
.toothpicbox .t23pic{top:13px;right:29px;}
.toothpicbox .t24pic{top:30px;right:20px;}
.toothpicbox .t25pic{top:46px;right:15px;}
.toothpicbox .t26pic{top:61px;right:10px;}
.toothpicbox .t27pic{top:90px;right:3px;}
.toothpicbox .t28pic{top:117px;right:0px;}

.toothpicbox .t38pic{bottom:105px;right:0px;}
.toothpicbox .t37pic{bottom:82px;right:0px;}
.toothpicbox .t36pic{bottom:59px;right:11px;}
.toothpicbox .t35pic{bottom:32px;right:25px;}
.toothpicbox .t34pic{bottom:14px;right:31px;}
.toothpicbox .t33pic{bottom:2px;right:42px;}
.toothpicbox .t32pic{bottom:0px;right:62px;}
.toothpicbox .t31pic{bottom:0px;left:100px;}
.toothpicbox .t41pic{bottom:0px;left:77px;}
.toothpicbox .t42pic{bottom:6px;left:61px;}
.toothpicbox .t43pic{bottom:14px;left:45px;}
.toothpicbox .t44pic{bottom:30px;left:33px;}
.toothpicbox .t45pic{bottom:32px;left:25px;}
.toothpicbox .t46pic{bottom:60px;left:13px;}
.toothpicbox .t47pic{bottom:89px;left:10px;}
.toothpicbox .t48pic{bottom:116px;left:5.2px;}

/*.toothpicbox .b16pic{bottom:109px;right:0px;}
.toothpicbox .b15pic{bottom:87px;right:0px;}
.toothpicbox .b14pic{bottom:64px;right:11px;}
.toothpicbox .b13pic{bottom:36px;right:25px;}
.toothpicbox .b12pic{bottom:18px;right:31px;}
.toothpicbox .b11pic{bottom:7px;right:42px;}
.toothpicbox .b10pic{bottom:5px;right:62px;}
.toothpicbox .b9pic{bottom:5px;left:100px;}
.toothpicbox .b8pic{bottom:5px;left:77px;}
.toothpicbox .b7pic{bottom:10px;left:61px;}
.toothpicbox .b6pic{bottom:17px;left:45px;}
.toothpicbox .b5pic{bottom:34px;left:33px;}
.toothpicbox .b4pic{bottom:37px;left:25px;}
.toothpicbox .b3pic{bottom:65px;left:13px;}
.toothpicbox .b2pic{bottom:93px;left:10px;}
.toothpicbox .b1pic{bottom:120px;left:5.2px;}*/
  /*部分3——订单义齿详情*/
 .tbshowArea{padding:20px;position:relative;background-color:#fff;box-shadow: 0 0 3px rgba(0,0,0,.1);margin-top:20px;}
  /*箭头*/
  .tbshowArea .arrow-shadow {/*border:1px solid red;*/
        position: absolute;
        top: -7px;
        right: 110px;
        height:14px;
        width:14px;
        background-color: #fff;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg); }


/*媒体查询*/
@media screen and (max-width:998px) {
    .main-left {width:28%;margin-left:1%;}
    .msgArea{margin:15px 0;}
    .main-right {width:68.5%;margin-right:1%;}
}
@media screen and (max-width:768px) {
    .main-left {width:92%;float:none;margin-left:4%;}
    .main-right {width:92%;float:none;margin-left:4%;}
}
@media screen and (max-width:550px) {
    .main-left {width:99%;margin-left:0.3%;}
    .main-right {width:99%;margin-left:0.3%;}

    .ordertableArea{width:100%;}
    .toothpicArea{width:100%;}
}