.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: 31px;
}
.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;
}
.tab-inner{ max-width: 860px; width: 100%;}
.tab-inner .list{ 
    display: grid;
    grid-template-columns: repeat(4, 206px);
    grid-column-gap: 12px;
    justify-content: center;
    margin-top: 16px;
}
.tab-inner .player_info{
    width: 206px;
    height: calc(90px + 40px);
    position: relative;
    margin-top: 16px;
    z-index: 0;
}
.tab-inner .player_info::before{
    content: "";
    width: 100%;
    height: 90px;
    background: #FFFFFF;
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.tab-inner .player_avatar{
    width: 80px;
    height: 80px;
    border-radius: 50px;
    margin: auto;
}
.tab-inner .player_avatar img{
    width: 100%;
    border-radius: 50%;
}
.tab-inner .player_name{
    font-family: 'NotoSansTC-Bold';
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 23px;
    color: #2B2B2E;
    text-align: center;
    margin-top: 8px;
}
.tab-inner .player_name i{
    color: #6C7A88;
    margin-left: 12.8px;
}
.tab-inner .player_rank-point{
    font-family: 'NotoSansTC-Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #6C7A88;
    text-align: center;
    margin-top: 2px;
}
.tab-inner .player_rank-point span{ margin-left: 4px;}
.tab-inner .player_wa-point{
    font-family: 'NotoSansTC-Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #6C7A88;
    text-align: center;
    margin-top: 2px;
}
.tab-inner .player_wa-point span{ margin-left: 4px;}

@media screen and (max-width: 876px){
    .tab-inner .list{ grid-template-columns: repeat(3, 155px); grid-column-gap:17px;}
    .tab-inner .player_info{width: 155px;}
}
@media screen and (max-width: 767px){
    .section2{padding: 48px 24px;}
}
@media screen and (max-width: 570px){
    .tab-inner .list{ grid-template-columns: repeat(2, 155px);}
}
/* ================== S3 ================== */
section.section3{ background-color: #F5F7F9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: unset;
}
.section3 .content_box{
    width: 100%;
    max-width: 860px;
    background: rgba(221, 227, 234, 0.5);
    color: #2B2B2E;
    line-height: 24px;
}
.section3 .content_box ul{
    padding: 24px 16px;
    margin: 0 0px 0 20px;
}
.section3 .content_box li{ 
    list-style: disc;
    font-family: 'NotoSansTC-Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
}

@media screen and (max-width: 876px){
    .section3 .content_box{ width: 505px;}
}

@media screen and (max-width: 570px){
    .section3 .content_box{ width: 327px;}
}



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