.flex {
  display: flex;
}
.flex-y {
  display: flex;
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
.width-0{
  width: 0;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-x-between {
  display: flex;
  justify-content: space-between;
}
.flex-x-center {
  display: flex;
  justify-content: center;
}
.flex-y-center {
  display: flex;
  align-items: center;
}
.flex-y-end {
  display: flex;
  align-items: flex-end;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-no-select{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 小三角形 */
.triangle-dot{
  width: 0px;
  height: 0px;
  border-style: solid;
  border-color: transparent;
  border-width: 5px 0 5px 8px;
  border-left-color: #F36619;
}
.triangle-dot.triangle-dot--left{
  border-width: 5px 8px 5px 0;
  border-right-color: #F36619;
  border-left-color: transparent;
}

/* 按钮 */
.taku-button{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cccccc;
  color: #333333;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 400;
  padding: 12px 30px;
  font-size: 14px;
  border-radius: 4px;
  height: 44px;
}
.taku-button:hover{
  border: 1px solid rgba(243, 102, 25, 0.2);
  color: #F36619;
}
.taku-button--primary{
  background: #F36619;
  border: none;
  color: #FFFFFF;
}
.taku-button--primary:hover{
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #F36619;
  border: none;
  color: #FFFFFF;
}
.taku-button--primary:focus{
  background: linear-gradient(0deg, rgba(61, 61, 61, 0.1), rgba(61, 61, 61, 0.1)), #F36619;
}

/* 样式一，大标题 描述 按钮 */
.box-style-1 .content .header{
  margin-bottom: 10px;
  font-size: 36px;
  font-weight: 600;
  line-height: normal;
  color: #3D3D3D;
}
.box-style-1 .content .desc{
  font-size: 16px;
  font-weight: normal;
  line-height: 28px;
  display: flex;
  align-items: center;
}
.box-style-1 .content .desc .triangle-dot{
  margin-right: 6px;
}
.box-style-1 .content .taku-button{
  margin-top: 26px;
}

/* tab样式一：底部黄条 */
.tab-style-1 .tab .tab-nav .tab-item-wrapper{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.tab-style-1 .tab .tab-nav .tab-item{
  position: relative;
  cursor: pointer;
  font-size: 16px;
  color: #D3D3D3;
}
.tab-style-1 .tab .tab-nav .tab-item:hover,
.tab-style-1 .tab .tab-nav .tab-item.active{
  color: #FF7B33;
}
.tab-style-1 .tab .tab-nav .tab-item::after{
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  right: 50%;
  height: 2px;
  background-color: #FF7B33;;
  transition: all 0.2s ease-in-out;
}
.tab-style-1 .tab .tab-nav .tab-item:hover::after,
.tab-style-1 .tab .tab-nav .tab-item.active::after{
  left: 0;
  right: 0;
}

/* 折叠面板样式一 */
.collapse-style-1 .collapse .collapse-item{
  border-bottom: 1px solid #EBEBEB;
  cursor: pointer;
  position: relative;
}
.collapse-style-1 .collapse .collapse-item.active{
  border-color:#F36619;
}
.collapse-style-1 .collapse .collapse-item .triangle-dot{
  position: absolute;
  left: -16px;
  display: none;
}
.collapse-style-1 .collapse .collapse-item.active .triangle-dot{
  display: block;
}
.collapse-style-1 .collapse .collapse-item .collapse-icon{
  width: 9px;
  height: 6px;
  background: url(../svg/collapse.svg) no-repeat;
  background-size: contain;
  transition: transform 0.2s ease-in-out;
}
.collapse-style-1 .collapse .collapse-item.active .collapse-icon{
  transform: rotate(180deg);
}
.collapse-style-1 .collapse .collapse-item .collapse-item__header{
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  font-weight: 600;
  color: #222222;
  opacity: 0.46;
  transition: opacity 0.2s ease-in-out;
}
.collapse-style-1 .collapse .collapse-item.active .collapse-item__header{
  opacity: 1;
}
.collapse-style-1 .collapse .collapse-item .collapse-item__content{
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}
.collapse-style-1 .collapse .collapse-item .collapse-item__content .desc {
  padding: 0 40px 16px 0;
}

/* tag样式 */
.tag{
  height: 24px;
  padding: 4px 6px;
  margin-right: 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.tag:nth-child(4n+1){
  background: rgba(243, 102, 25, 0.1);
  color: #F36619;
}
.tag:nth-child(4n+2){
  background: rgba(69, 153, 248, 0.1);
  color: #4599F8;
}
.tag:nth-child(4n+3){
  background: rgba(40, 202, 66, 0.1);
  color: #40CD57;
}
.tag:nth-child(4n){
  background: rgba(244, 184, 83, 0.2);
  color: #EA9F02;
}

/* 加载条 */
.loading-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-wrapper .loading{
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background: url(../svg/loading.svg) no-repeat;
  background-size: contain;
  animation: spin 1s linear infinite;
}