h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:20px}
input[type],select,textarea{border-color:#e9e9e9}
input[type=input],select,textarea{color:#000}
select.color-select{border:1px solid #b5b5b5;height:40px;width:230px;margin:20px 0;padding:0 5%;text-align:center;color:#333;text-align:center;font-size:13px;border-radius:4px}
.submit{margin:0;height:44px;vertical-align:top;border-radius:5px;border-top-left-radius:0;border-bottom-left-radius:0;background:#b04b87;border:none;color:#fff;display:inline-block}
hr{border-top:1px dashed gray;background-color:#fff;height:1px;clear:both}
input[readonly], textarea[readonly] { background:#efefef;cursor:not-allowed}

/*index*/
.index-banner {position:relative;height:150px;text-align:center ;padding-top: 10px;box-shadow: -4px 2px 2px 0px #eaeaea;background:#fff;}
.navigation { position:absolute;left:50%;margin-left:-200px;  bottom: 0; }
.navigation li{float:left;padding: 0 20px;text-align:center }
.navigation span{ display:inline-block;padding:6px 2px;font-size: 14px;border-bottom: 1px #fff solid;}
.navigation li:hover { color:#b54983; }
.navigation li:hover span{border-bottom:1px solid #b54983}
h2{ font-size:36px;font-weight:normal; }
.nav{padding-left:30px;font-size:13px}
.panel { margin: 40px auto;}
   
    .panel .t { width: 196px; display: block; height: 40px; line-height: 40px; border: 1px solid #e5e5e5;font-size:16px; text-align: center; border-bottom: 0; }
    .panel li { float:left;width:16.66%;text-align:center;margin: 20px 0 20px 0;}
    .panel span { display:block;}
.panel-content { border: 1px solid #e5e5e5;padding:20px 20px; overflow:hidden; }
.panel-content span{margin-bottom: 10px; }
.panel-content img{height:40px;}
.value_inputs{border:1px solid #b5b5b5;display:inline-block;border-radius:4px;margin:0;vertical-align:top;max-height:42px;padding:0 1px}
.value_input{font-size:14px;margin-left:2px;height:38px;text-align:center;width:70px;border-radius:0;border:0}
.detable{width:100%}
.detable td{padding:8px;text-align:center}
.calc-btn{width:120px;height:40px;border:none; border-radius:4px;font-size:16px;background:#b04b87;color:#fff}
.desc{color:#999;line-height:26px;}
    .desc a { color:#1f93ad}
.tool{padding-top:20px}
.second{font-family:Arial,Helvetica,sans-serif;float:left;width:49%;text-align:center;margin-top: 20px;}
.third{width:33.33%;padding:0 10px;float:left;box-sizing:border-box;margin-top: 20px;}
.third .t{border-bottom:1px solid #dadada;height:60px;line-height:60px;text-align:center;font-size:16px;margin:0 auto 30px}

.color-fields span{ background:#ededed;height:36px;line-height:36px;text-align:left;border:1px solid #d6d6d6; position:relative;display:block}
.color-fields span input{ height:34px;width:70%;position:absolute;right:0;text-indent:16px;border:none;}
.color-fields span i { WIDTH: 30%; position: absolute; left: 0; text-decoration: none; font-style: normal; text-align: center; }
.color-fields .inputbox,.color-fields span {width:60%;     margin: 0 auto 20px;}
.color-fields select {height:34px;width:49%;    border: 1px solid #d6d6d6;margin-top: 10px; }
.tooltitle{text-align:center}
.tooltitle2{text-align:center;padding: 2rem;margin:0 0; border-bottom:1px solid #d2d2d2}
.tooltitle2 span{ font-size:14px;color:#666}
h1,h2,h3{font-family:"微软雅黑","Microsoft YaHei"}
.spectrumText{width:140px;height:300px;font-size:14px;border:1px solid #ccc;color:#333;line-height:16px;padding:6px 10px;margin-left:20px;margin-bottom:10px; font-family:Arial}
.spec_panel { margin-bottom:40px;}
.spec_panel input{width:40px;border:1px solid #ccc;height:26px;text-align: center;font-family:Arial}
    .spec_panel input[readonly] {background:#fff;border:none; cursor:not-allowed }
.spec_panel select {width:100px;border:1px solid #ccc;height:26px; }
.spec_panel span{display:block;margin:10px 0;font-family:Arial}
.spec_panel input.calc-btn {width: 100%;height: 40px;border:none;margin-top: 10px;}
    .fr {margin-right:20px; }
.preview_color {width:100%;height:100px;cursor:pointer;}
.color_table {margin-top:10px;width:100%;border-top: 1px solid #ccc;
    border-left: 1px solid #ccc; }
    .color_table td { height: 30px; width: 25%; padding:0 10px;text-align: center; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
    .color_table .title {font-weight:bold }
#nearColor { text-align:center;width:100%;}
.RecordColor .block { margin:4px 8px 25px 8px;}
.preview-color { width:160px;height:210px;margin: auto;position:relative;cursor: zoom-in;}
    .preview-color .btm { position: absolute; background: #fff; height: 48px; width: 100%; bottom: 0; border: 1px solid #ccc; border-top: 0; box-sizing: border-box; }
    .preview-color i { border-radius: 50%; background: #fefefe; position: absolute; box-shadow: inset 1px 1px 3px 0px #7f7e7e; bottom: 10px; right: 10px; width: 10px; height: 10px; }
.full-screen { background: rgba(230,230,230,0.75); position: absolute; bottom: 0; left: 0; text-align: center;width:100%;line-height:2rem; height: 2rem;color:#ededed }
.preview_show{-webkit-transition:width 1s,height 1s;transition:width 1s,height 1s;width:240px;height:260px;margin:20px auto}
.left_show_top{border-top-left-radius:8px;border-top-right-radius:8px;height:50%}
.left_show_middle{height:50%;border-bottom-left-radius:8px;border-bottom-right-radius:8px}
.left_show_bottom{height:20%;text-align:center;background:gray;border-bottom-left-radius:8px;border-bottom-right-radius:8px;color:#fff;line-height:30px}
.right_show{font-size:14px;float:left}
.td_bold{font-size:15px;width:70px}
.td_values{width:80px;font-size:14px;padding-left:10px}
.cietable{border:1px solid #c2c2c2;border-radius:6px}
.cietable td{height:36px;line-height:36px;text-align:center}
.RecordColor {width:100%; margin:auto; }
.RecordColor-Title {margin:20px 0;color:#808080;text-align:center }
.RecordColor-Title a { float:right}
 .show-color-image { width:100%;height:64px;}
 .ColorName{padding: 6px 4px 6px 4px;}
.datatable { margin:auto}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f5f5f5; }
 .table-striped > tbody > tr:nth-of-type(even) { background-color: #fefefe; }
  .table { width:100%;border: 1px solid #e4e4e4;}
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { padding: 12px; line-height: 1.42857143; vertical-align: top; }
.header_height2{height: 120px;}

.__mobile__ { font-size: 0.95rem;}
.__mobile__ .nav {padding: 10px;color: #666;}
@media screen and (max-width: 980px) 
{
    #bottom-menu { position: static;}
    .top,#bottom,#swt-right,#companycotent_parent { display:none;}
    .content { width: 100%; }
    .third,.second { width: 100%;margin-top: 20px;}
    .spectrumText {width:80%;  border-radius: 4px;margin:0}
    .spec_panel input, .spec_panel select { width: 100px; height: 2.4rem; border-radius: 4px; }
    .calc-btn { height: 50px;background: #e33a9f;}
    .datatable { width:80%}
    .preview_show,.preview-color { width:80%;}
    .datatable { width:70%;}
    .td_values {width:auto }
    .nav {padding: 10px;color:#666;}
    .nav a{ color:#666;}
    .fr, .fl { float:none;margin:0;}

    /*index*/
    h2 { font-size:1.6rem;}
    .index-banner { height:100px;}
    .panel-content { border:none;font-size: 0.85rem;}
    .panel .t{  width:100%; }
      .panel .t{  border-bottom:1px solid #e5e5e5;border-left:0;border-right:0;background-color:#e5e5e5 ;padding-left: 10px;text-align:left}
    .panel li { width: 33.33%;}
    .navigation {width:100%;margin-left:0;left:0;overflow: hidden;overflow-x: scroll;}
    .navigation ul {     white-space: nowrap;}
        .navigation li {float:none; width:auto;padding:4px 20px;    display: inline-block;}
    .table { width:100%;}
}
@media screen and (min-width: 1024px) and (max-width: 1919px) {
     /*.panel:hover .t { background: #b54983; color: #fff; border:1px solid #b54983}
     .panel:hover .panel-content  {border: 1px solid #b54983}*/ 
}