﻿    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .tab-container {
      width: 800px;
      margin: 50px auto;
      font-family: Arial;
    }

    /* 主 Tab 样式 */
    .main-tab {
      display: flex;
	  gap: 0;
	  flex-direction: row;
	  flex-wrap: wrap;
	  align-content: center;
	  justify-content: space-evenly;
	  width: 44px;
    }
    .main-tab li {
      cursor: pointer;
	  width: 44px;
	  height: 50%;
	  display: block;
	  background-color: #ccc;
	  font-size: 16px;
	  color: #000;
	  display: flex;
	  align-items: center; /* 垂直居中 */
	  justify-content: center; /* 水平居中，可选 */

	  
    }
    .main-tab li.active {
      background: #67c23a;
      color: #fff;
    }

    /* 子 Tab 样式 */
    .sub-tab {
      display: flex;
	  gap: 20px;
	  margin: 30px 0 10px 30px;
    }
    .sub-tab li {
      cursor: pointer;
	  width: 100px;
	  height: 37px;
	  display: block;
	  text-align: center;
	  line-height: 35px;
	  border-radius: 19px;
	  background-color: #fff;
	  font-size: 16px;
	  color: #000;
	  border: 1px solid #E5E5E5;
    }
    .sub-tab li.active {
      background: #013A91;
      color: #fff;
    }

    /* 内容区域 */
    .tab-content {
      padding: 20px;
      background: #fafafa;
      border-radius: 4px;
      min-height: 150px;
      line-height: 1.6;
    }
    .content-item {
      display: none;
    }
    .content-item.show {
      display: block;
    }
	
	.tools{
		display: flex;
		justify-content: space-between;    margin-bottom: 9px;
	}
	
	.icon{    
		width: calc(100% - 44px);
        float: right;
		border-left: 1.5px solid #efefef; 
	}
	
@media only screen and (max-width: 1199px) {	
	.main-tab li{height: 100px;}
	.sub-tab{margin: 15px 10px;justify-content: center;}
	.tools{display: block;}
}