.class-list{
  margin-top:111px;
}
.class-list-unit{
  position:relative;
  margin-top:121px;
}
.class-list-unit:first-of-type{
  margin-top:0;
}
.class-list-unit-img{
  width:66.51vw;
  position:relative;
  z-index:10;
}
.column-title{
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:20;
  align-items:flex-end;
  margin-top: -7vw;
}
.column-title-left{
  flex:none;
  font-size: 45px;
  line-height:45px;
  color: #000000;
  font-weight: bold;
}
.column-title-right{
  flex:none;
  font-size:16px;
  line-height:16px;
  color: #666666;
}
.class-list-unit-list{
  position:relative;
  z-index:20;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:717px;
  margin-top:43px;
}
.class-list-unit-list-unit{
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.class-list-unit-list-unit:nth-child(1){
  width:730px;
  height:468px;
}
.class-list-unit-list-unit:nth-child(3),.class-list-unit-list-unit:nth-child(4){
  width:482px;
  height:323px;
  margin-left:68px;
}
.class-list-unit-list-unit:nth-child(2){
  width:730px;
  height:194px;
  background-image:url(https://tkww-static.tkww.hk/column/topics/bg-long.png);
  display:flex;
  padding-left:21px;
  align-items:center;
  margin-top:46px;
}
.class-list-unit-list-unit:nth-child(4){
  margin-top:59px;
}
.class-list-unit-list-unit:nth-child(1),.class-list-unit-list-unit:nth-child(3),.class-list-unit-list-unit:nth-child(4){
  background-image:url(https://tkww-static.tkww.hk/column/topics/bg-height.png);
}
.class-list-unit-list-unit-title{
  font-size: 20px;
}
.class-list-unit-list-unit:nth-child(1) .class-list-unit-list-unit-title,
.class-list-unit-list-unit:nth-child(3) .class-list-unit-list-unit-title,
.class-list-unit-list-unit:nth-child(4) .class-list-unit-list-unit-title{
  padding-right:50px;
  margin-top:20px;
  box-sizing:border-box;
  margin-left:auto;
}
.class-list-unit-list-unit:nth-child(3) .class-list-unit-list-unit-title,
.class-list-unit-list-unit:nth-child(4) .class-list-unit-list-unit-title{
  width:461px;
}
.class-list-unit-list-unit:nth-child(1) .class-list-unit-list-unit-title{
  width:710px;
}
.class-list-unit-list-unit:nth-child(2) .class-list-unit-list-unit-title{
  -webkit-line-clamp: 2;
  flex:none;
  line-height:30px;
  width:300px;
  margin-left:33px;
}
.class-list-unit-list-unit .class-list-unit-list-unit-img{
  border-radius: 10px;
  overflow: hidden;
}
.class-list-unit-list-unit:nth-child(1) .class-list-unit-list-unit-img,
.class-list-unit-list-unit:nth-child(3) .class-list-unit-list-unit-img,
.class-list-unit-list-unit:nth-child(4) .class-list-unit-list-unit-img{
  margin-left:auto;
}
.class-list-unit-list-unit:nth-child(1) .class-list-unit-list-unit-img{
  width:710px;
  height:calc( 710px * 9 / 16 );
}
.class-list-unit-list-unit:nth-child(3) .class-list-unit-list-unit-img,
.class-list-unit-list-unit:nth-child(4) .class-list-unit-list-unit-img{
  width:461px;
  height:calc( 461px * 9 / 16 );
}
.class-list-unit-list-unit:nth-child(2) .class-list-unit-list-unit-img{
  height:194px;
  width:calc(194px * 16 / 9 );
}
@media (max-width:1400px){
  .column-title{
    margin-top: -4vw;
  }
  .column-title-left{
    font-size: 3vw;
    line-height:3vw;
  }
  .column-title-right{
    font-size: 1.4vw;
    line-height: 1.4vw;
  }
  .class-list-unit-list-unit:nth-child(1){
    width: 52vw;
    height: calc( 52vw * 468 / 730 );
  }
  .class-list-unit-list-unit:nth-child(1) .class-list-unit-list-unit-img{
    width: 50.5vw;
    height: calc( 50.5vw * 9 / 16 );
  }
  .class-list-unit-list-unit:nth-child(1) .class-list-unit-list-unit-title{
    width: 50.5vw;
  }
  .class-list-unit-list-unit:nth-child(1) .class-list-unit-list-unit-title, .class-list-unit-list-unit:nth-child(3) .class-list-unit-list-unit-title, .class-list-unit-list-unit:nth-child(4) .class-list-unit-list-unit-title{
    padding-right: 4vw;
    margin-top: 1.3vw;
  }
  .class-list-unit-list-unit-title{
    font-size: 1.5vw;
  }
  .class-list-unit-list-unit:nth-child(2){
    width:52vw;
    height: calc( 52vw * 194 / 730 );
    padding-left: 1.5vw;
    margin-top: 3.5vw;
  }
  .class-list-unit-list-unit:nth-child(2) .class-list-unit-list-unit-img{
    height: calc( 52vw * 194 / 730 );
    width:calc( 52vw * 194 / 730 * 16 / 9 );
  }
  .class-list-unit-list-unit:nth-child(2) .class-list-unit-list-unit-title{
    width: 22vw;
    line-height: 2vw;
    margin-left: 2vw;
  }
  .class-list-unit-list-unit:nth-child(3), .class-list-unit-list-unit:nth-child(4){
    width: 34.5vw;
    height: calc( 34.5vw * 323 / 482 );
    margin-left: 3.5vw;
  }
  .class-list-unit-list-unit:nth-child(3) .class-list-unit-list-unit-img, .class-list-unit-list-unit:nth-child(4) .class-list-unit-list-unit-img{
    width:33vw;
    height: calc( 33vw * 9 / 16 );
  }
  .class-list-unit-list-unit:nth-child(3) .class-list-unit-list-unit-title, .class-list-unit-list-unit:nth-child(4) .class-list-unit-list-unit-title{
    width: 33vw;
  }
  .class-list-unit-list-unit:nth-child(4){
    margin-top: 4.5vw;
  }
  .class-list-unit-list{
    height:51vw;
    margin-top: 3vw;
  }
  .class-list{
    margin-top:10vw;
  }
  .class-list-unit{
    margin-top:8vw;
  }
  .class-list-unit-list-unit .class-list-unit-list-unit-img{
    border-radius: 1vw;
  }
}
@media (max-width:767px){
  .class-list-unit-img{
    width:57vw;
  }
  .column-title-left{
    font-size: 6.5vw;
    line-height:6.5vw;
  }
  .column-title-right{
    font-size:3.2vw;
    line-height:3.2vw;
  }
  .column-title{
    margin-left: 1.8vw;
  }
  .class-list{
    margin-top:6.9vw;
  }
  .class-list-unit-list{
    flex-direction:row;
    justify-content:space-between;
    height:unset;
    margin-top:5vw;
  }
  .class-list-unit-list .class-list-unit-list-unit{
    background-image: none;
    width:46.93vw;
    height:unset;
    display:block;
    padding-left:0;
    margin-top:4.5vw;
    margin-left:0;
  }
  .class-list-unit-list .class-list-unit-list-unit .class-list-unit-list-unit-img{
    width:100%;
    height:calc( 46.93vw * 9 / 16 );
  }
  .class-list-unit-list .class-list-unit-list-unit .class-list-unit-list-unit-title{
    width:unset;
    padding-right:0;
    margin-left:0;
    -webkit-line-clamp: 2;
    height:unset;
    line-height:5vw;
    font-size:4.27vw;
    margin-top:1.5vw;
  }
  .class-list-unit-list .class-list-unit-list-unit:nth-child(-n+2){
    margin-top:0;
  }
}