.main{ margin: auto;}
.article{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 48px 0px; margin: auto; font-family: Noto Sans TC; color: #2B2B2E;}
.article .content_box{ max-width: 860px; margin: auto; width: 100%;}
.article .title{ display: flex; width: 100%; height: 35px; align-items: center;}
.article .title h2{ width: 130px; font-style: normal; font-weight: bold; font-size: 24px; line-height: 35px; position: relative;}
.article .title hr{ width: 100%; background-color:#C8D2DD; height:1px; border:none;}
@media screen and (max-width: 767px){
    .article .title h2{ width: 145px;}
}
/* ================== S1 ================== */
.section1{ 
    width: 100%;
    height: 120px;
    margin: auto;
    background: #FFFFFF;
    background-image: url(/images/campaigns/changMingAward/2021/header/banner_s.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.section1 .content_box{ color: #FFFFFF; width: 100%; height: 100%; max-width: 860px; margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section1 .content_box h2{ font-family: 'NotoSansTC-Regular';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    letter-spacing: 1px;
}
@media screen and (max-width: 767px){
    .section1::before{ width: 280px; height: 350px; left: 50%; bottom: 0%; transform: translateX(-50%);}
    .section1 .content_box{ width: unset; max-width: unset; text-align: center; z-index: 1;}
}
/* ================== S2 ================== */
section.section2{ background-color: #F5F7F9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 32px;
    padding-bottom: 60px;
}
.section2 .tab-title{
    width: 243px;
    height: 50px;
    background: #DDE3EA;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    margin: auto;
}
.section2 .tab-title li{list-style: none; display: flex; text-align: center; line-height: 50px; cursor: pointer;}
.section2 .tab-title li:hover a{color: #2B2B2E;}
.section2 .tab-title li:nth-child(2){margin-left: 3px;}
.section2 .tab-title li a{
    font-family: 'NotoSansTC-Medium';
    font-style: normal;
    font-weight: 500;
    width: 120px;
    height: 50px;
    background: #DDE3EA;
    border-radius: 50px;
    color: #6C7A88;
    pointer-events: none;
}
.section2 .tab-title .active a{
    width: 120px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 50px;
    color: #2B2B2E;
}
.section2 .update_time{
    font-family: 'NotoSansTC-Regular','Roboto-Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #6C7A88;
    margin-top: 20px;
}
.section2 .update_time .time{ margin-left: 4px;}
.tab-inner{ max-width: 860px; width: 100%; margin-top: 20px;}
.tab-inner .list{ 
    margin-top: unset;
    padding: unset;
}
.tab-inner .charts_info{
    width: 100%;
    height: 84px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    list-style: none;
    border-radius: 4px;
    margin-top: 8px;
    counter-increment: li;
}
.tab-inner .charts_info::before {
    content: counter(li);
    width: 1em;
    min-width: 1em;
    color: #6C7A88;
    font-family: 'NotoSansTC-Medium';
    font-style: normal;
    font-weight: 500;
    display: inline-block;
    margin-left: 16px;
    margin-right: 12px;
    text-align: right;
    direction: rtl;
}
#tab01.tab-inner .charts_info:first-child::before{
    content: "";
    width: 19px;
    min-width: 19px;
    height: 13px;
    background-image: url(/images/campaigns/changMingAward/2021/Vector_female.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 18px;
    margin-right: 6px;
}
#tab02.tab-inner .charts_info:first-child::before{
    content: "";
    width: 19px;
    min-width: 19px;
    height: 13px;
    background-image: url(/images/campaigns/changMingAward/2021/Vector_male.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 18px;
    margin-right: 6px;
}
.tab-inner .charts_avatar{
    width: 60px;
    height: 60px;
    border-radius: 50px;
    min-width: 60px;
    margin-left: 5px;
}
.tab-inner .charts_avatar img{width: 100%;}
.tab-inner .charts_data{
    width: calc(100% + -24px);
    margin: 16px 12px;
}
.tab-inner .charts_data .charts_txt{
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
}
.tab-inner .charts_data .charts_txt .charts_name{
    font-family: 'NotoSansTC-Bold';
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 23px;
    color: #2B2B2E;
    text-align: center;
}
.tab-inner .charts_data .charts_txt .charts_votes{ 
    color: #6C7A88;
    font-family: 'NotoSansTC-Regular','Roboto-Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;}
.tab-inner .charts_data .charts_txt .charts_votes span:nth-child(2){ margin-left: 5px;}
.tab-inner .charts_percent{
    width: 100%;
    height: 5px;
    background-color: #DDE3EA;
    border-radius: 24px;
    margin-top: 4px;
    position: relative;
    max-width: 739px;
    overflow: hidden;
}
.tab-inner .charts_percent .value{  
    height: 5px;
    border-radius: 24px;
}
.tab-inner .charts_percent .value_female{ background-color: #0EB5B2;}
.tab-inner .charts_percent .value_male{ background-color: #014FAC;}

@media screen and (max-width: 876px){
    .tab-inner .charts_data .charts_info{width: 155px;}
}
@media screen and (max-width: 767px){
    .section2{padding: 48px 24px; width: unset;}
}
@media screen and (max-width: 570px){
    .section2 .update_time{margin-top: 16px;}
    .tab-inner{ margin-top: 16px;}
}








.tab-inner{
    animation: fadein .5s ease-in 1 forwards;
}
@keyframes fadein{
    0%{opacity: 0;}
    100%{opacity: 1;}
}