/* purgecss start ignore */

/* purgecss end ignore */
/* purgecss start ignore */

@media (max-width: 768px){
  .colour__page__conent>.colour__item>.container{
    padding-left:1.5rem;
    padding-right:1.5rem
  }
}

.colour__item__template101 .title{
  font-weight:700;
  line-height:1.375
}

@media (min-width: 768px){
}

@media (min-width: 1024px){
}

@media (min-width: 1280px){
}

@media (min-width: 1400px){
}

.colour__item__template121 .title{
  font-size:3.875rem;
  line-height:3.875rem;
  font-weight:700
}

.colour__item__template121 .title--en{
  line-height:3.5rem;
  margin-top:1.25rem;
  font-size:2.25rem;
  line-height:2.5rem;
  font-weight:400
}

.colour__item__template122 .title__block{
  height:28.75rem;
  position:relative;
  --tw-bg-opacity:1;
  background-color:rgba(156, 163, 175, var(--tw-bg-opacity))
}

.colour__item__template122 .title__bg{
  display:block;
  height:100%;
  width:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.colour__item__template122 .title__text{
  position:absolute;
  bottom:3.5rem;
  left:3.5rem;
  font-size:3.75rem;
  line-height:5rem
}

.colour__item__template201 .content .content__paragraph{
  word-break:break-all;
  --tw-text-opacity:1;
  color:rgba(64, 64, 64, var(--tw-text-opacity));
  text-indent:2em;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template201 .content__img{
  margin-top:3rem;
  height:auto;
  -o-object-fit:cover;
     object-fit:cover
}

@media (max-width: 768px){
  .colour__item__template201 .content__img{
    width:100%
  }
}

.colour__item__template202 .content{
  flex:1 1 0%
}

.colour__item__template202 .content .content__paragraph{
  word-break:break-all;
  --tw-text-opacity:1;
  color:rgba(64, 64, 64, var(--tw-text-opacity));
  text-indent:2em;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template202 .content__img{
  width:100%
}

.colour__item__template203 .content{
  flex:1 1 0%
}

.colour__item__template203 .content .content__paragraph{
  word-break:break-all;
  --tw-text-opacity:1;
  color:rgba(64, 64, 64, var(--tw-text-opacity));
  text-indent:2em;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template203 .content__img1{
  width:100%
}

.colour__item__template203 .content__img2{
  height:auto;
  width:100%
}

.colour__item__template204 .content{
  display:flex;
  flex:1 1 0%;
  flex-direction:column;
  justify-content:center
}

.colour__item__template204 .content .content__paragraph{
  word-break:break-all;
  --tw-text-opacity:1;
  color:rgba(64, 64, 64, var(--tw-text-opacity));
  text-indent:2em;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template204 .content .content__img2{
  margin:auto;
  display:block;
  height:100%
}

.colour__item__template204 .content__img1{
  width:100%
}

.colour__item__template301 .title{
  position:relative;
  padding-left:1.75rem;
  font-size:1.875rem;
  line-height:2.25rem;
  font-weight:700;
  line-height:2rem
}

.colour__item__template301 .title::before{
  content:"·";
  position:absolute;
  left:0px;
  float:left;
  margin-left:-0.75rem;
  font-size:6rem;
  line-height:1;
  line-height:2rem
}

.colour__item__template301 .content{
  font-size:1.375rem;
  line-height:2.375rem;
  margin-top:1rem;
  --tw-text-opacity:1;
  color:rgba(55, 65, 81, var(--tw-text-opacity))
}

.colour__item__template321 .block__wrap{
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:0.75rem
}

.colour__item__template321 .block__wrap .block__img{
  display:block;
  height:8rem;
  width:8rem;
  flex-shrink:0;
  overflow:hidden;
  border-radius:0.75rem;
  -o-object-fit:contain;
     object-fit:contain
}

.colour__item__template321 .block__wrap .block__content{
  margin-left:2.25rem;
  flex:1 1 0%
}

.colour__item__template321 .block__wrap .block__content .content__title{
  font-size:1.75rem;
  line-height:2.25rem;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

.colour__item__template321 .block__wrap .block__content .content__text{
  margin-top:0.5rem;
  font-size:1.25rem;
  line-height:1.75rem;
  line-height:2rem;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity));
  line-height:2.375rem
}

.colour__item__template322 .block__wrap{
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:0.75rem
}

.colour__item__template322 .block__wrap .block__img{
  width:5.5rem;
  height:5.5rem;
  display:block;
  flex-shrink:0;
  overflow:hidden;
  border-radius:0.75rem;
  -o-object-fit:contain;
     object-fit:contain
}

.colour__item__template322 .block__wrap .block__content{
  margin-left:2.25rem;
  flex:1 1 0%
}

.colour__item__template322 .block__wrap .block__content .content__title{
  font-size:1.875rem;
  line-height:1.875rem;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

.colour__item__template322 .block__wrap .block__content .content__text{
  margin-top:0.5rem;
  font-size:1.25rem;
  line-height:1.75rem;
  line-height:2rem;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity));
  line-height:2rem
}

.colour__item__template323 .block__wrap{
  display:flex;
  height:100%;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  border-radius:0.75rem
}

.colour__item__template323 .block__wrap .block__img{
  width:7rem;
  height:7rem;
  display:block;
  flex-shrink:0;
  overflow:hidden;
  border-radius:0.75rem;
  -o-object-fit:contain;
     object-fit:contain
}

.colour__item__template323 .block__wrap .block__content{
  margin-top:2.5rem;
  flex:1 1 0%
}

.colour__item__template323 .block__wrap .block__content .content__title{
  font-size:1.875rem;
  line-height:1.875rem;
  text-align:center;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

.colour__item__template323 .block__wrap .block__content .content__text{
  margin-top:1rem;
  padding-bottom:2rem;
  text-align:justify;
  font-size:1.25rem;
  line-height:1.75rem;
  line-height:2rem;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity));
  line-height:2rem
}

.colour__item__template341 .block__wrap{
  height:100%;
  overflow:hidden
}

.colour__item__template341 .block__wrap .block__imgWrap{
  max-height:16rem;
  width:100%;
  display:block;
  flex-shrink:0;
  overflow:hidden
}

@media (min-width: 768px){
  .colour__item__template341 .block__wrap .block__imgWrap{
    width:30%
  }
}

.colour__item__template341 .block__wrap .block__img{
  height:100%;
  width:100%
}

.colour__item__template341 .block__wrap .block__content{
  margin-top:2rem;
  margin-left:0px;
  flex:1 1 0%
}

@media (min-width: 768px){
  .colour__item__template341 .block__wrap .block__content{
    margin-top:0px;
    margin-left:3.5rem
  }
}

.colour__item__template341 .block__wrap .block__content .content__title{
  font-size:1.875rem;
  line-height:1.875rem;
  font-weight:700
}

.colour__item__template341 .block__wrap .block__content .content__text{
  margin-top:1rem;
  font-size:1rem;
  line-height:1.5rem;
  line-height:2rem;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template342 .block__wrap{
  display:flex;
  height:100%;
  flex-direction:column;
  align-items:center;
  overflow:hidden
}

.colour__item__template342 .block__wrap .block__img{
  display:block;
  width:100%;
  flex-shrink:0;
  overflow:hidden;
  -o-object-fit:cover;
     object-fit:cover
}

.colour__item__template342 .block__wrap .block__content{
  margin-top:2rem;
  width:100%
}

.colour__item__template342 .block__wrap .block__content .content__title{
  font-size:1.875rem;
  line-height:1.875rem;
  text-align:center;
  font-weight:700
}

.colour__item__template342 .block__wrap .block__content .content__text{
  margin-top:1rem;
  font-size:1rem;
  line-height:1.5rem;
  line-height:2rem;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template343 .block__wrap{
  height:100%;
  overflow:hidden
}

.colour__item__template343 .block__wrap .block__img{
  max-height:26rem;
  width:100%;
  display:block;
  flex-shrink:0;
  overflow:hidden;
  -o-object-fit:cover;
     object-fit:cover
}

@media (min-width: 768px){
  .colour__item__template343 .block__wrap .block__img{
    width:48%
  }
}

.colour__item__template343 .block__wrap .block__content{
  margin-top:2rem;
  margin-left:0px;
  flex:1 1 0%
}

@media (min-width: 768px){
  .colour__item__template343 .block__wrap .block__content{
    margin-top:0px;
    margin-left:3.5rem
  }
}

.colour__item__template343 .block__wrap .block__content .content__title{
  font-size:1.875rem;
  line-height:3.375rem;
  text-align:center;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

.colour__item__template343 .block__wrap .block__content .content__text{
  margin-top:1rem;
  font-size:1rem;
  line-height:1.5rem;
  line-height:2rem;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template344 .block__wrap{
  display:flex;
  height:100%;
  flex-direction:column;
  align-items:center;
  overflow:hidden
}

.colour__item__template344 .block__wrap .block__img{
  display:block;
  width:100%;
  flex-shrink:0;
  overflow:hidden;
  -o-object-fit:cover;
     object-fit:cover
}

.colour__item__template344 .block__wrap .block__content{
  margin-top:2rem;
  width:100%
}

.colour__item__template344 .block__wrap .block__content .content__text{
  font-size:1rem;
  line-height:1.5rem;
  line-height:2rem;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template345 .block__wrap{
  overflow:hidden
}

.colour__item__template345 .block__wrap .block__img1{
  display:block;
  height:100%;
  width:100%;
  overflow:hidden;
  -o-object-fit:cover;
     object-fit:cover
}

@media (max-width: 768px){
  .colour__item__template345 .block__wrap .block__img1--wrapper{
    width:100%
  }
}

@media (max-width: 768px){
  .colour__item__template345 .block__wrap .block__img1{
    margin-top:2%;
    height:100%;
    width:100%
  }
}

.colour__item__template345 .block__wrap .block__content{
  margin-right:0px
}

@media (min-width: 768px){
  .colour__item__template345 .block__wrap .block__content{
    margin-right:2.5rem
  }
}

.colour__item__template345 .block__wrap .block__content .content__title{
  line-height:1.875rem;
  font-size:1.75rem;
  line-height:2.25rem;
  font-weight:700;
  line-height:1.75rem
}

.colour__item__template345 .block__wrap .block__content .content__text{
  margin-top:0.5rem;
  font-size:1rem;
  line-height:1.5rem;
  line-height:2rem;
  font-size:1.375rem;
  line-height:2.375rem
}

.colour__item__template345 .block__img2{
  width:100%;
  -o-object-fit:cover;
     object-fit:cover;
  margin-top:2%
}

.colour__item__template401 .block__img{
  height:auto;
  width:100%
}

.colour__item__template441 .content__wrap{
  overflow:hidden;
  line-height:1.5rem
}

.colour__item__template441 .title{
  font-size:1.875rem;
  line-height:3.375rem;
  position:relative;
  overflow:hidden;
  padding-left:1.75rem;
  font-size:1.75rem;
  line-height:2.25rem;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

.colour__item__template441 .title::after{
  content:"·";
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  margin:auto;
  font-size:3.75rem;
  line-height:5rem;
  line-height:inherit
}

.colour__item__template441 .content{
  line-height:2.375rem;
  position:relative;
  margin-top:0.25rem;
  margin-bottom:0.25rem;
  overflow:hidden;
  padding-left:1.25rem;
  font-size:1.125rem;
  line-height:1.75rem
}

.colour__item__template441 .content::after{
  content:"·";
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  margin:auto;
  font-size:2.875rem;
  line-height:3.75rem;
  line-height:inherit
}

.colour__item__template442 .content__wrap{
  overflow:hidden;
  line-height:1.5rem
}

.colour__item__template442 .img__wrap{
  margin-bottom:1rem;
  height:auto;
  width:100%
}

.colour__item__template442 .img__wrap .block__img{
  height:100%;
  width:100%
}

.colour__item__template442 .title{
  font-size:1.875rem;
  line-height:3.375rem;
  position:relative;
  overflow:hidden;
  padding-left:1.75rem;
  font-size:1.75rem;
  line-height:2.25rem;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

.colour__item__template442 .title::after{
  content:"·";
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  margin:auto;
  font-size:3.75rem;
  line-height:5rem;
  line-height:inherit
}

.colour__item__template442 .content{
  line-height:2.375rem;
  position:relative;
  margin-top:0.25rem;
  margin-bottom:0.25rem;
  overflow:hidden;
  padding-left:1.25rem;
  font-size:1.125rem;
  line-height:1.75rem
}

.colour__item__template442 .content::after{
  content:"·";
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  margin:auto;
  font-size:2.875rem;
  line-height:3.75rem;
  line-height:inherit
}

.colour__item__template443 .img__wrap{
  height:auto
}

@media (max-width: 768px){
  .colour__item__template443 .img__wrap{
    width:100%
  }
}

.colour__item__template443 .img__wrap .block__img{
  height:auto;
  width:100%
}

.colour__item__template443 .title{
  font-size:1.875rem;
  line-height:3.375rem;
  position:relative;
  overflow:hidden;
  padding-left:1.75rem;
  font-size:1.75rem;
  line-height:2.25rem;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

.colour__item__template443 .title::after{
  content:"·";
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  margin:auto;
  font-size:3.75rem;
  line-height:5rem;
  line-height:inherit
}

.colour__item__template443 .content__wrap{
  margin-right:0px;
  flex:1 1 0%;
  overflow:hidden
}

@media (min-width: 768px){
  .colour__item__template443 .content__wrap{
    margin-right:3.5rem
  }
}

.colour__item__template443 .content{
  line-height:2.375rem;
  position:relative;
  margin-top:0.25rem;
  margin-bottom:0.25rem;
  overflow:hidden;
  padding-left:1.25rem;
  font-size:1.125rem;
  line-height:1.75rem
}

.colour__item__template443 .content::before{
  content:"·";
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  margin:auto;
  font-size:2.875rem;
  line-height:3.75rem;
  line-height:inherit
}

.colour__item__template501{
  height:12rem !important
}

.colour__item__template501{
  width:100%;
  padding-bottom:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat
}

@media (min-width: 768px){
  .colour__item__template501{
    height:14rem !important
  }
}

@media (min-width: 1024px){
  .colour__item__template501{
    height:16rem !important
  }
}

@media (min-width: 1280px){
  .colour__item__template501{
    height:18rem !important
  }
}

@media (min-width: 1400px){
  .colour__item__template501{
    height:21.875rem !important
  }
}

@media screen and (min-width: 1920px){
  .colour__item__template501{
    height:0 !important
  }
  .colour__item__template501{
    padding-bottom:18.23%
  }
}

/* purgecss end ignore */