.article-index,
.article-info{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}


.article_top_link{
    position: fixed;
    top: 150px;
    right: 2%;
    z-index: 0;
    max-width: 250px;
    width: 100%;
    z-index: 10;
}
.article_top_link section{
    background-color: var(--colorwhite);
    border: 1px solid var(--colorsub1);
    border-radius: 15px;
    padding: 15px 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0 auto;
}
.article_top_link section a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--f16);
    min-width: fit-content;
    margin: 0 15px;
    color: #707070;
}
.article_top_link section a::before{
    content: '';
    min-width: 10px;
    height: 10px;
    border-radius: 500px;
    background-color: var(--colorsub1);
    margin: 0 10px 0 0;
    opacity: 0;
}
.article_top_link section a.active{
    pointer-events: none;
}
.article_top_link section a.active::before{
    opacity: 1;
}
.article_top_link section a:hover{
    color: var(--colorsub2);
}
.article_top_link section a.active{
    color: var(--colortext1);
}


.article_main_title{
    font-size: var(--f32);
    color: var(--colorsub3);
    font-family: var(--fontMerr);
    font-weight: normal;
    margin: calc(1vw + 30px) 0 0;
}
.article_b_list{
    margin: calc(2vw + 30px) auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5%;
    row-gap: clamp(30px,5vw,50px);
    padding: 0 0 15px;
}
.article_b_list_item{
    background-color: var(--colormain2);
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
}
.article_item_img{
    max-height: 350px;
}
.article_item_img img{
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article_item_title{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 7%;
    line-height: 170%;
    background-color: var(--colormain2);
    position: relative;
    z-index: 1;
}
.article_item_title > p{
    font-size: var(--f20);
    color: var(--colortext1);
    text-align: left;
    font-weight: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
}
.article_b_list_item:hover .article_item_img img{
    transform: scale(1.05);
}


.article_list_page{
    display: flex;
    text-align: center;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.article_list_page li{
    margin: 10px;
    text-align: center;
    border-radius: 150px;
    line-height: 100%;
    color: var(--colorsub3);
    background-color: var(--colorwhite);
    font-size: var(--f16);
    width: 40px;
    height: 40px;
}
.article_list_page li a,
.article_list_page li span{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.article_list_page li.now{
    font-weight: bold;
    background-color: var(--colorsub2);
}
.article_list_page li.now span{
    color: var(--colorwhite);
}
.article_list_page li:hover{
    background-color: var(--colorsub2);
}
.article_list_page li:hover a{
    color: var(--colorwhite);
}

/*article-info*/
.article-info-page{
    background-color: var(--colormain2);
}
.article-info{
    display: grid;
    grid-template-columns: minmax(auto, 400px) minmax(35%, 655px);
    column-gap: 5%;
    row-gap: 30px;
}
.article_info_left p{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.article_info_left p::before{
    content: '';
    width: 100%;
    height: 1px;
    background-color: #595757;
}
.article_info_left > p s{
    font-size: var(--f18);
    color: var(--colorsub3);
    font-family: var(--fontMerr);
    font-weight: 400;
    margin: 0 0 0 5%;
}
.article_info_left > h4{
    font-size: var(--f24);
    color: var(--colortext1);
    font-weight: normal;
    padding: 30px 0;
    margin: 0 0 30px;
    border-bottom: 1px solid #595757;
}
.article_info_left > a{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 500px;
    background-color: var(--colorwhite);
    border: 1px solid var(--colorsub1);
    max-width: 140px;
}
.article_info_left > a i{
    display: block;
    max-width: 10px;
    margin: 2px 5% 0 0;
}
.article_info_left > a s{
    font-size: var(--f16);
    color: var(--colorsub3);
}
.article_info_left > a:hover{
    background-color: var(--colorsub1);
}

/*預設標籤樣式*/
/*p*/
.article_info_right_p,
.article_info_right > p{
    font-size: var(--f16);
    color: var(--colorsub3);
    margin: 0 0 30px;
    line-height: 170%;
}

/*em*/
.article_info_right_img,
.article_info_right > em{
    display: block;
    margin: 20px auto;
}
.article_info_right_img img,
.article_info_right > em img{
    width: 100%;
}

/*h6*/
.article_info_right_h6,
.article_info_right > h6{
    font-size: var(--f18);
    color: var(--colorsub2);
    margin: 30px 0;
    font-weight: 500;
}

/*a*/
.article_info_right a,
.article_info_right_link{
    font-size: var(--f16);
    color: var(--colorsub2);
    display: inline-block;
    margin: 0 5px;
}

/*s*/
.article_info_right s,
.article_info_right_tag{
    font-size: var(--f16);
    color: #515B37;
    display: inline-block;
    margin: 0 5px;
}

@media (max-width: 768px) {
    .article-info{grid-template-columns: 1fr;}
}
@media (max-width: 568px) {
    .article_top_link{margin: 0 auto;padding: 0;position: unset;max-width: 300px;}
    .article_top_link section{justify-content: space-around;}

    .article_b_list{grid-template-columns: 1fr;}
    .article_item_img{max-height: 225px;}
}
@media (max-width: 490px) {
    .article_info_left > a{max-width: 25px;}
    .article_info_left > a s{display: none;}
}
@media (max-width: 370px) {
    .article_a_top_con > a{max-width: unset;}
}