﻿.fixed:before,
.clearfix:before,
.cf:before,
body:before,
.header:before,
.main:before,
.footer:before {
  content: "";
  display: table;
}
.fixed:after,
.clearfix:after,
.cf:after,
after,
.header:after,
.main:after,
.footer:after {
  content: "";
  display: table;
  clear: both;
}
.fixed,
.clearfix,
.cf,
.header,
.main,
.footer {
  *zoom: 1;
}

.guide_main{padding-top: 110px;background: #fff}
.guide_main *{    box-sizing: border-box;}
@media only screen and (max-width:1024px) {
.guide_main{padding-top: 50px}
}
.guide_01{background: url(../images/guidebg.jpg) no-repeat;background-size: cover;padding: 65px 0 75px 0}
.guide_title{margin-bottom: 50px}
.guide_title h3{color: #167d64;margin-bottom: 20px}
.guide_title p{color: #777777;line-height: 1.5em}
.guide_title{text-align: center;}

.guide_box01{margin-bottom: 20px}
.guide_box01 li{width: 25%;float: left;margin-bottom: 15px;text-align: center;}
.guide_box01 ul{margin: 0 -8px;display: flex;flex-wrap: wrap;}
.guide_box01 dl{margin: 0 8px;background: #fff;border-radius: 10px;padding: 20px;height: 100%}
.guide_box01 dt{width: 32px;height: 32px;margin: auto;margin-bottom: 10px}
.guide_box01 dt img{width: 100%;height: 100%}

.guide_box02 h2{padding-left: 16px;line-height: 22px;position: relative;margin-bottom: 35px}
.guide_box02 h2:after{content: "";position: absolute;top:50%;left: 0;height: 22px; margin-top: -11px; width: 6px;background: #167d64;border-radius: 4px;}

.guide_box02 ul{margin: 0 -10px;display: flex;flex-wrap: wrap;   }
.guide_box02 dl{background: #fff;border-radius: 10px;padding: 30px;padding-bottom: 45px;height: 100%;margin: 0 10px;}
.guide_box02 dt{overflow: hidden;display: flex;align-items: center; justify-content: space-between;margin-bottom: 20px}
.guide_box02 dt h3{display: flex;align-items: center;max-width: 65%}
.guide_box02 dt h3 span{width: 40px;height: 40px;position: relative;background: #e7f2ef;border-radius: 4px;margin-right: 20px;float: left;}
.guide_box02 dt h3 span img{width: 32px;height: 32px;transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%); position:absolute; left:50%; top:50%;}
.guide_box02 dt h3 b{width: calc(100% - 60px);float: right;}
.guide_box02 dd{color: #777777;line-height: 1.5em}

.guide_box02 dt em{font-style: normal;text-align: right;color: #167d64}
.guide_box02 li{width: 50%;float: left;margin-bottom: 20px}

.guide_02{padding: 75px 0 110px 0}

.guide_select{width: 130px;margin-bottom: 40px}
.guide_select dl{position: relative;border-radius: 8px;}
.guide_select dt{cursor: pointer; position: relative;border-radius: 8px;overflow: hidden;background: #167d64;color: #fff;line-height: 50px;padding: 0 20px}
.guide_select dt i{position: absolute;top:50%;right: 20px;width:10px;height: 5px;margin-top: -2px; transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;}
.guide_select dd a{padding: 0 20px;display: block;line-height: 50px;border-bottom: 1px solid #f7f7f7}
.guide_select dd{display: none; box-shadow: 0 0 14px 2px rgba(0, 15, 79, 0.1);padding-bottom: 12px;background: #fff;border-radius: 0 0 8px 8px;position: absolute;top:100%;left: 0;width: 100%;z-index: 99;max-height: 270px;overflow-y:auto !important;}
.guide_select dd a:hover{background: #f7f7f7}

.guide_select dt.on i{-webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);}

table { border-collapse: collapse; border-spacing: 0 }
.guide_table { width: 100%; box-shadow: 0 0 14px 2px rgba(0, 15, 79, 0.1); border-radius: 10px;overflow: hidden;}
.guide_table td {line-height: 20px;padding: 30px 45px;line-height:1.6em;}

.guide_table thead th {border: 0;background: #00312a;color: #fff;padding: 20px 45px;}
.guide_table thead th p{display: flex;align-items: center;}
.guide_table thead th img{margin-right: 10px}
.guide_table span{color: #cd1705;}
.guide_table .t1 {width: 25%;}
.guide_table .t2 {width: 25%;}
.guide_table .t3 {width: 20%;}
.guide_table .t4 {}

.guide_table  tbody p{padding-left: 30px}
.guide_table  tbody tr:nth-child(2n) td{background: #f7f7f7}

@media only screen and (min-width:1025px) {
     .hoverlist dl {
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
  }

  .hoverlist dl:hover {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    box-shadow: 0 0 14px 2px rgba(0, 15, 79, 0.1);
  }
}

@media only screen and (max-width:1024px) {
.guide_title h3{margin-bottom: 10px}
.guide_title{margin-bottom: 30px}
.guide_box02 dt h3{width: 100%;margin-bottom: 10px;max-width: 100%}
.guide_box02 dt em{display: block;width: 100%;float: none;text-align: left;}
.guide_box02 dt{display: block;}
.guide_select{margin-bottom: 30px}
.guide_table td,.guide_table thead th{padding:15px 10px}
}
@media only screen and (max-width:767px) {
.guide_01{padding: 30px 0}
/*.guide_box01 ul{display: block;margin: 0}
.guide_box01 dl{margin: 0}*/

.guide_box01 ul{margin: 0 -5px;}
.guide_box01 dl{margin: 0 5px;}
.guide_box01 li{width: 50%;float: none;margin-bottom: 10px}
/*.guide_box01 li:last-child{margin-bottom: 0}*/
.guide_box01 dd h3{margin-bottom: 10px}
.guide_box02 h2{margin-bottom: 20px;font-size: 16px}
.guide_box02 li{float: none;width: 100%;margin-bottom: 10px}
.guide_box02 li:last-child{margin-bottom: 0}
.guide_box02 dl{padding: 20px}
.guide_02{padding: 40px 0}
.guide_scoll{overflow-y:auto;}
.guide_tablebox{width: 800px}
.guide_table .t1{width: 220px}
.guide_table .t2{width: 150px}
.guide_table .t3{width: 150px}
.guide_select{width: 100%;margin-bottom: 20px}
.guide_select dt{line-height: 40px;padding: 0 20px;}
.guide_select dt i{right: 20px}

    .guide_scoll::-webkit-scrollbar {
              width: 15px; background: #244299; height: 10px;
        } /* 这是针对缺省样式 (必须的) */

    .guide_scoll::-webkit-scrollbar-track {
    background:#ececec; height:2px;
    } /* 滚动条的滑轨背景颜色 */
     
    .guide_scoll::-webkit-scrollbar-thumb {
    background: #167d64; width: 50px;
    } /* 滑块颜色 */
     
    .guide_scoll::-webkit-scrollbar-button {
    background: #ececec;
    } /* 滑轨两头的监听按钮颜色 */
     
    .guide_scoll::-webkit-scrollbar-corner {
    background: #ececec;
    } /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
}

