* {
  font-family: 'Roboto', 'Noto Sans TC', 'sans-serif';
  text-align: justify;
  text-justify: distribute;
}

h1 {
  font-size: 2.125rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.625rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.375rem;
}

p {
  font-size: 1.125rem;
  line-height: 2rem;
  color: #ffffff;
  letter-spacing: 0.09rem;
  margin: 0.3125rem 0rem 0.9375rem 0rem;
}

p {
  font-size: 1.125rem;
}

li {
  font-size: 1.125rem;
  line-height: 2rem;
  color: #ffffff;
  letter-spacing: 0.09rem;
  margin: 0.3125rem 0rem;
}

a a:hover, a:visited, a:link, a:active {
  color: #FFF;
  text-decoration: none;
  outline: none;
}

.set-h1, .set-h2, .set-h3, .set-h4, .set-h5, .set-h6 {
  color: #b59c17;
  font-weight: bold;
  text-shadow: #000000 0em 0em 0.5rem;
  padding: 30px 0px 5px 0px;
}

.set-h1-w, .set-h2-w, .set-h3-w, .set-h4-w, .set-h5-w, .set-h6-w {
  color: white;
  font-weight: bold;
  text-shadow: #000000 0em 0em 0.5rem;
  padding: 30px 0px 5px 0px;
}

.background-color-primary {
  background-color: #181a5b;
}

.background-color-primary-dark {
  background-color: #000031;
}

.img-border-radius {
  border-radius: 1rem;
}

.background-main-pic {
  background-image: url(/static/images/BG_Img.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.set-icon-img a {
  -webkit-filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(217deg) brightness(105%) contrast(101%);
          filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(217deg) brightness(105%) contrast(101%);
}

.set-icon-img a:hover {
  -webkit-filter: invert(95%) sepia(54%) saturate(2186%) hue-rotate(317deg) brightness(97%) contrast(90%);
          filter: invert(95%) sepia(54%) saturate(2186%) hue-rotate(317deg) brightness(97%) contrast(90%);
}

.set-list-indent {
  margin-left: 1.5rem;
  list-style: decimal;
  line-height: 2rem;
}

.set-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.set-margin-s {
  margin: 1rem;
}

.set-margin-top-s {
  margin-top: 1rem;
}

.set-margin-xs {
  margin: 0.5rem;
}

.set-padding-s {
  padding: 1rem;
}

.set-last-bottom {
  padding-bottom: 3.75rem;
  margin-bottom: 0;
}

table {
  margin: 0.5rem 0rem;
  width: 100%;
}

td {
  padding: 1rem;
  border: 1px #ffffff solid;
  color: #ffffff;
}

.set-table-head {
  background-color: #b59c17;
}

.set-text-center {
  text-align: center;
}

.set-table-w1 {
  width: 8.333%;
}

.set-table-w2 {
  width: 16.666%;
}

.set-table-w3 {
  width: 25%;
}

.set-table-w4 {
  width: 33.333%;
}

.set-tr-boder-bottom {
  border: 0px;
  border-bottom: 1px solid #b59c17;
}

.target-title {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.target-content {
    position: relative;
    z-index: 10;
    margin-top: 2rem;
}

.target-tabs {
    border-bottom: .0625rem solid hsla(0,0%,100%,.2);
    width: 100%;
}

.target-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    line-height: 1.75rem;
    padding-bottom: 1rem;
    transition: all .6s ease;
}

.target-columns {
    display: flex;
}

.target-column {
    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
}

.target-tab:after {
    border-bottom: .125rem solid #ee3a43;
    bottom: -.0625rem;
    content: "";
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    transition: all .6s ease;
    width: 0rem
}

.target-tab.active:after {
    width: 10rem
}

.target-tab.env.active {
    color: #78dd78
}

.target-tab.env.active:after {
    border-bottom-color: #78dd78
}

.target-tab.soc.active {
    color: #9900FF
}

.target-tab.soc.active:after {
    border-bottom-color: #9900FF
}

.target-tab.gov.active {
    color: #00acd7
}

.target-tab.gov.active:after {
    border-bottom-color: #00acd7
}

.target-swipers {
    position: relative;
    width: 100%;
    margin-top: 2rem;
}

.target-slide {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 1rem;
    height: 29rem;
    width: 100%;
}

.target-block {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
    width: 100%;
}

.target-block-item {
    align-items: center;
    background: transparent linear-gradient(180deg,#ffffff0d,#8080800d) 0 0 no-repeat padding-box;
    border: .0625rem solid hsla(0,0%,100%,.34);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    transition: all .6s ease
}

.target-block-item:hover {
    background: transparent;
    border-color: #fff
}

.target-block-item.env .target-block-item-value{
    color: #78dd78;
}

.target-block-item.soc .target-block-item-value{
    color: #9900FF;
}

.target-block-item.gov .target-block-item-value{
    color: #00acd7;
}

.target-block-item-value {
    font-size: 3.125rem;
    font-weight: 700;
    line-height: 4.6875rem;
    text-align: center;
}

.target-block:nth-child(2) .target-block-item.env .target-block-item-value {
    font-size: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    line-height: 2rem;
    word-break: break-word;
}

.target-block-item-name {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    text-align: center;
}

.target-nav {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.target-button-next, .target-button-prev {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    z-index: 20;
    background-color: #ee3a43;
    opacity: .5;
}

.target-button-next {
    right: 0;
    transform: translateY(-50%) translate(100%);
}

.target-button-prev {
    transform: translateY(-50%) translate(-100%);
}

.target-arrow-l,.target-arrow-r{
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .75rem;
    margin-left: .75rem;
    overflow: hidden;
    position: relative;
}

.target-arrow-l span,.target-arrow-r span {
    position: absolute;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.target-arrow-l span {
    background: url("../images/arrow_l.svg") no-repeat center center;
}

.target-arrow-r span {
    background: url("../images/arrow_r.svg") no-repeat center center;
}

.target-arrow-r span:last-child {
    left: -1.5rem;
}

.target-arrow-l span:last-child {
    left: 1.5rem;
}

.target-button-next:hover {
    opacity: 1;
}

.target-button-prev:hover {
    opacity: 1;
}

.target-button-next:hover span{
    animation: arrow-scroll-r 0.3s linear;
}

.target-button-prev:hover span{
    animation: arrow-scroll-l 0.3s linear;
}

.honor-title {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 5rem;
}

.honor-swipers {
  position: relative;
  width: 100%;
  margin-bottom: 3rem;
}

.honorSwiper {
  padding-top: 4rem;
}

/*.swiper-slide {*/
/*  width: auto;*/
/*}*/

.honor-slide {
    align-items: center;
    background-image: url("../images/honor.png");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    height: 12.25rem;
    justify-content: center;
    position: relative;
    transition: all .6s ease;
    width: 12.625rem
}

.honor-slide .honor-slide-title {
    color: #eeb051;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;
    max-width: 9.375rem;
    text-align: center;
    transition: all .6s ease
}

.honor-slide .honor-slide-mask {
    align-items: center;
    background-image: url("../images/honor-hover.png");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .6s ease;
    width: 100%
}

.honor-slide .honor-slide-mask .honor-slide-result {
    display: -webkit-box;
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.5rem;
    max-width: 9.375rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    margin-top: -1rem
}

.honor-slide:hover {
    transform: translateY(-20px)
}

.honor-slide:hover .honor-slide-mask {
    opacity: 1
}

.honor-slide:hover .honor-slide-title {
    opacity: 0
}

.honor-nav {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.honor-button-next, .honor-button-prev {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    position: absolute;
    top: calc(50% + 32px);
    z-index: 20;
    background-color: #ee3a43;
    opacity: .5;
}

.honor-button-next {
    right: 0;
    transform: translateY(-50%) translate(100%);
}

.honor-button-prev {
    transform: translateY(-50%) translate(-100%);
}

.honor-arrow-l,.honor-arrow-r{
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .75rem;
    margin-left: .75rem;
    overflow: hidden;
    position: relative;
}

.honor-arrow-l span,.honor-arrow-r span {
    position: absolute;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.honor-arrow-l span {
    background: url("../images/arrow_l.svg") no-repeat center center;
}

.honor-arrow-r span {
    background: url("../images/arrow_r.svg") no-repeat center center;
}

.honor-arrow-r span:last-child {
    left: -1.5rem;
}

.honor-arrow-l span:last-child {
    left: 1.5rem;
}

.honor-button-next:hover {
    opacity: 1;
}

.honor-button-prev:hover {
    opacity: 1;
}

.honor-button-next:hover span{
    animation: arrow-scroll-r 0.3s linear;
}

.honor-button-prev:hover span{
    animation: arrow-scroll-l 0.3s linear;
}

@keyframes arrow-scroll-r {
  to { transform: translateX(1.5rem); }
}

@keyframes arrow-scroll-l {
  to { transform: translateX(-1.5rem); }
}

@media (max-width: 1320px) {
    .target-button-next {
        transform: translateY(-50%) translate(40px);
    }

    .target-button-prev {
        transform: translateY(-50%) translate(-40px);
    }

    .honor-button-next {
        transform: translateY(-50%) translate(40px);
    }

    .honor-button-prev {
        transform: translateY(-50%) translate(-40px);
    }
}

@media (max-width: 1023px) {
    .target-button-next {
        transform: translateY(-50%) translate(20px);
    }

    .target-button-prev {
        transform: translateY(-50%) translate(-20px);
    }

    .honor-button-next {
        transform: translateY(-50%) translate(20px);
    }

    .honor-button-prev {
        transform: translateY(-50%) translate(-20px);
    }
}

@media (max-width: 600px) {
    .target-slide {
        display:grid;
        grid-template-columns: repeat(1,1fr);
        grid-gap: 1rem;
        height: auto;
        width: 100%
    }
}