/*anima*/
@keyframes effectlight {
    50%{transform: scale(1.2);}
}
/*----------*/

.news-index,
.news-info{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.men_a{
    padding: 0 0 calc(1vw + 50px) 0;
    border-bottom: 1px solid var(--colorwhite);
}
.new_main_title{
    font-size: var(--f32);
    color: var(--colorsub3);
    font-family: var(--fontMerr);
    font-weight: normal;
    margin: calc(1vw + 30px) 0 0;
}
.men_a_top{
    border-radius: 20px;
    background-color: var(--colormain2);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px auto;
}
.men_a_top_img{
    width: 610px;
    border-radius: 20px;
    overflow: hidden;
    align-self: stretch;
    line-height: 0px;
}
.men_a_top_img > img{
    object-fit: cover;
    object-position: center;
    min-height: 100%;
    width: 100%;
}
.men_a_top_con{
    width: 420px;
    padding: 50px 5%;
}
.men_a_top_con dl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.men_a_top_con dl dt{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: fit-content;
    font-family: var(--fontMerr);
    font-size: var(--f18);
    color: var(--colortext1);
}
.men_a_top_con dl dt::before{
    content: '';
    background-color: var(--colorsub1);
    border-radius: 500px;
    min-width: 10px;
    height: 10px;
    margin: 0 10px 0 0;
    animation: effectlight 2s infinite linear;
}
.men_a_top_con dl dd{
    min-width: fit-content;
    font-family: var(--fontMerr);
    font-size: var(--f16);
    color: var(--colorsub3);
    margin: 10px 0 10px 17px;
}
.men_a_top_con > h4{
    font-size: var(--f24);
    color: var(--colorsub3);
    font-weight: normal;
    margin: 20px 0 30px;
}
.men_a_top_con > a{
    width: 100%;
    max-width: 175px;
    display: block;
    height: 40px;
    background-color: var(--colorsub1);
    border: 1px solid var(--colorsub1);
    text-align: center;
    position: relative;
    border-radius: 500px;
}
.men_a_top_con > a::before{
    content: '查看更多';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    font-size: var(--f16);
    color: var(--colorsub3);
    transition:  all .4s;
}
.men_a_top_con > a:hover{
    background-color: var(--colorwhite);
}
.men_a_top_con > a:hover::before{
    content: '觀看全文';
    color: var(--colorsub3);
    transition:  all .4s;
}
.men_a_scrolldown{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: fit-content;
    margin: 0 0 0 auto;
}
.men_a_scrolldown s{
    font-size: var(--f16);
    color: var(--colortext1);
}
.men_a_scrolldown > i{
    min-width: 14px;
    margin: 0 0 0 10px;
}
.men_a_scrolldown > i img{
    width: 14px;
}
.men_a_scrolldown:hover s{
    color: var(--colorsub2);
}
.men_a_scrolldown:hover i img{
    transform: translateY(3px);
    filter: invert(33%) sepia(13%) saturate(898%) hue-rotate(330deg) brightness(99%) contrast(85%);
    -webkit-filter: invert(33%) sepia(13%) saturate(898%) hue-rotate(330deg) brightness(99%) contrast(85%);
}

.men_b{
    padding:50px 0 0;
    position: relative;
    z-index: 1;
}
.men_b > a{
    position: absolute;
    top: -18vw;
    left: 0px;
    z-index: -1;
}
.men_b_list{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 15px;
}
.men_b_list_item{
    border-radius: 20px;
    background-color: var(--colormain2);
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 50px 8% 50px 5%;
    position: relative;
    z-index: 1;
}
.men_b_item_days{
    min-width: fit-content;
    margin: 0 7% 0 0;
}
.men_b_item_days > p{
    font-size: var(--f18);
    color: var(--colorsub3);
    font-family: var(--fontMerr);
    font-weight: 400;
}
.men_b_item_title{
    max-width: 600px;
}
.men_b_item_title > h4{
    font-size: var(--f20);
    color: var(--colorsub3);
    font-weight: 400;
}
.men_b_list_item::after{
    content: '';
    background: url(../images/upright_arrow.svg);
    background-position: top right;
    background-size: cover;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: 3.5%;
    transform: translateY(-50%);
    font-weight: bold;
}
.men_b_list_item:hover{
    background-color: var(--colorsub1);
}
.men_b_list_page{
    display: flex;
    text-align: center;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.men_b_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;
}
.men_b_list_page li a,
.men_b_list_page li span{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.men_b_list_page li.now{
    font-weight: bold;
    background-color: var(--colorsub2);
}
.men_b_list_page li.now span{
    color: var(--colorwhite);
}
.men_b_list_page li:hover{
    background-color: var(--colorsub2);
}
.men_b_list_page li:hover a{
    color: var(--colorwhite);
}


.news-info-page{
    background-color: var(--colormain2);
}
.news-info{
    display: grid;
    grid-template-columns: minmax(auto, 400px) minmax(35%, 655px);
    column-gap: 5%;
    row-gap: 30px;
}
.meninfo_left p{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.meninfo_left p::before{
    content: '';
    width: 100%;
    height: 1px;
    background-color: #595757;
}
.meninfo_left > p s{
    font-size: var(--f18);
    color: var(--colorsub3);
    font-family: var(--fontMerr);
    font-weight: 400;
    margin: 0 0 0 5%;
}
.meninfo_left > h4{
    font-size: var(--f24);
    color: var(--colortext1);
    font-weight: normal;
    padding: 20px 0 30px;
    margin: 0 0 30px;
    border-bottom: 1px solid #595757;
}
.meninfo_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;
}
.meninfo_left > a i{
    display: block;
    max-width: 10px;
    margin: 2px 5% 0 0;
}
.meninfo_left > a s{
    font-size: var(--f16);
    color: var(--colorsub3);
}
.meninfo_left > a:hover{
    background-color: var(--colorsub1);
}

/*預設標籤樣式*/
/*p*/
.meninfo_p,
.meninfo_right > p{
    font-size: var(--f16);
    color: var(--colorsub3);
    margin: 0 0 30px;
    line-height: 170%;
}

/*em*/
.meninfo_img,
.meninfo_right > em{
    display: block;
    margin: 20px auto;
}
.meninfo_img img,
.meninfo_right > em img{
    width: 100%;
}

/*h6*/
.meninfo_h6,
.meninfo_right > h6{
    font-size: var(--f18);
    color: var(--colorsub2);
    margin: 30px 0;
    font-weight: 500;
}

/*a*/
.meninfo_right a,
.meninfo_link{
    font-size: var(--f16);
    color: var(--colorsub2);
    display: inline-block;
    margin: 0 5px 0 0;
}

/*s*/
.meninfo_right s,
.meninfo_tag{
    font-size: var(--f16);
    color: #515B37;
    display: inline-block;
    margin: 0 5px;
}

@media (max-width: 768px) {
    .men_a_top{flex-direction: column;}
    .men_a_top_img{width: 100%;}
    .men_a_top_img img{min-height: unset;}
    .men_a_top_con{width: 90%;max-width: 400px; padding:30px 5%;}
    .news-info{grid-template-columns: 1fr;}
}
@media (max-width: 568px) {
    .men_b_list_item{flex-direction: column;align-items: flex-start;padding:30px 7%;}
    .men_b_list_item::after{transform: unset;top: 33px;right: 8%;}
    .men_b_item_days{margin: 0 0 20px;}
}
@media (max-width: 490px) {
    .meninfo_left > a{max-width: 25px;}
    .meninfo_left > a s{display: none;}
    .men_a_top_con > a{max-width: unset;}
}
@media (max-width: 370px) {
}