check-work/src/common/portrait.styl

// padding
.pa-3 {
  padding: 12px;
}

.pa-4 {
  padding: 16px;
}

.pa-5 {
  padding: 20px;
}

.pb-3 {
  padding-bottom: 12px;
}

.pb-4 {
  padding-bottom: 16px;
}

.pb-5 {
  padding-bottom: 20px;
}

.pb-10 {
  padding-bottom: 40px;
}

.px-1{
  padding-left: 4px;
  padding-right: 4px;
}

.px-2{
  padding-left: 8px;
  padding-right: 8px;
}

.px-3{
  padding-left: 12px;
  padding-right: 12px;
}

// margin
.ma-3 {
  margin: 12px;
}

.mx-2{
  margin-left: 8px;
  margin-right: 8px;
}

.my-2{
  margin-top: 8px;
  margin-bottom: 8px;
}

.my-3{
  margin-top: 12px;
  margin-bottom: 12px;
}

.my-4{
  margin-top: 16px;
  margin-bottom: 16px;
}

.mt-1{
  margin-top: 4px;
}

.mt-2{
  margin-top: 8px;
}

.mt-3{
  margin-top: 12px;
}

.mt-4{
  margin-top: 16px;
}

.mt-8{
  margin-top: 32px;
}

.mb-1{
  margin-bottom: 4px;
}

.mb-2{
  margin-bottom: 8px;
}

.mb-3{
  margin-bottom: 12px;
}

.mb-4{
  margin-bottom: 16px;
}

.mb-5{
  margin-bottom: 20px;
}

.mb-6{
  margin-bottom: 24px;
}

.mb-7{
  margin-bottom: 28px;
}

.mb-8{
  margin-bottom: 32px;
}

.ml-2{
  margin-left: 8px;
}

.ml-3{
  margin-left: 12px;
}

.ml-4{
  margin-left: 16px;
}

.ml-5{
  margin-left: 20px;
}

.ml-6{
  margin-left: 24px;
}

.ml-7{
  margin-left: 28px;
}

.ml-8{
  margin-left: 32px;
}

.mr-1{
  margin-right: 4px;
}

.mr-2{
  margin-right: 8px;
}

.mr-3{
  margin-right: 12px;
}

.mr-4{
  margin-right: 16px;
}

.mr-5{
  margin-right: 20px;
}

.mr-6{
  margin-right: 24px;
}

.mr-7{
  margin-right: 28px;
}

.mr-8{
  margin-right: 32px;
}

// background
.white {
  background: white;
}

// flex
.d-flex{
  display: flex;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

.flex-column{
  flex-direction: column;
}

.flex-column-reverse{
  flex-direction: column-reverse;
}

.flex-row{
  flex-direction: row;
}

.flex-row-reverse{
  flex-direction: row-reverse;
}

.justify-center{
  justify-content: center;
}

.justify-space-between{
  justify-content: space-between;
}

.align-center{
  align-items: center
}

.align-end{
  align-items: flex-end
}

.flex-1{
  display: flex;
  flex: 1;
}

// other
.inner {
  width: 82%;
  margin: 0 auto;
}

.pointer{
  cursor:pointer;
}

.fill-height{
  height:100%;
}

.fill-width{
  width:100%;
}

// font
.font-big{
  font-size: 60px;
}

.font-small{
  font-size: 30px;
  line-height: 40px;
}

.font-bold{
  font-weight: bold;
}

@media only screen and (max-width: 1400px) {
  .font-big{
    font-size: 45px;
  }

  .font-small{
    font-size: 26px;
    line-height: 36px;
  }
}

.font-bold-32{
  font-size: 32px;
  font-weight: bold;
}

.font-32{
  font-size: 32px;
}

.font-bold-24{
  font-size: 24px;
  font-weight: bold;
}

.font-24{
  font-size: 24px;
}

.font-20{
  font-size: 20px;
}

.font-bold-16{
  font-size: 16px;
  font-weight: bold;
}

.font-16{
  font-size: 16px;
}

.font-bold-14{
  font-size: 14px;
  font-weight: bold;
}

.font-14{
  font-size: 14px;
}

.font-12{
  font-size: 12px;
}

.icon-size{
  font-size: 20px;
}

h2{
  font-size: 24px;
  font-weight: bold;
  color: rgba(0,0,0,.85)
}

.textColor{
  color: rgba(0,0,0,.65)
}

.baseColor{
  color: #13ACC4
}

.bg{
  background: #F5F5F5
}

.ant-btn-primary{
  background-color: #13ACC4
  border-color: #13ACC4;
}

.ant-btn-link:hover, .ant-btn-link:focus{
  color: #13ACC4;
}

.base-bg{
  background: #13ACC4
}

.second-base-bg{
  background: #AACD06
}

.white--text{
  color: #fff
}