.news-page-box{

    width: 100%;

    display: block;

    position: relative;

    background-color: #f5f5f5;

    box-sizing: border-box;

    padding-top: 70px;

    min-height: 100vh;

}

.news-page-all-box{

    width: 1280px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    font-size: 0;

    position: relative;

    box-sizing: border-box;

    padding: 80px 0;

}

.news-page-path{

    font-size: 14px;

    font-weight: lighter;

    color: #555;

    display: inline-block;

    position: relative;

    vertical-align: middle;

    margin-left: 25px;

    letter-spacing: 1px;

    line-height: 46px;

    transition: all .3s linear;

}

.news-page-path-box div{

    width: 650px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.news-page-path:first-child{

    color: #a62a32;

    margin-left: 0;

}

.news-page-path:after {

    content: '\f0da';

    font-size: 14px;

    color: #555;

    position: absolute;

    top: 0;

    right: -17px;

    cursor: default;

    font-weight: bold;

    font-family: "Font Awesome 5 Free";

    display: block;

}

.news-page-path:last-child:after{

    display: none;

}

.news-page-title-box{

    margin-top: 40px;

}

.news-page-title-l{

    width: 800px;

    max-width: 100%;

    display: inline-block;

    vertical-align: bottom;

    box-sizing: border-box;

    padding: 20px 0;

    margin-right: 100px;

    position: relative;

}

.news-page-title-l:after{

    content: '';

    width: 100%;

    height: 1px;

    display: block;

    position: absolute;

    bottom: 0;

    right: 0;

    background-color: #d1d1d1;

}

.news-page-data{

    font-size: 16px;

    color: #888;

    letter-spacing: 1px;

    font-family: "Roboto";

}

.news-page-title-l-ch{

    font-size: 28px;

    color: #000;

    font-family: "roboto","微軟正黑體";

    font-weight: bold;

    letter-spacing: 1px;

    margin-top: 10px;

    word-break: break-all;
}

.news-page-title-l-en{

    font-size: 28px;

    color: #a62a32;

    font-family: "roboto","微軟正黑體";

    font-weight: 700;

    letter-spacing: 1px;

    margin-top: 3px;

    word-break: break-all;

}

.news-page-title-r{

    width: 380px;

    max-width: 100%;

    display: inline-block;

    vertical-align: bottom;

    border-bottom: 1px solid #d1d1d1;

    box-sizing: border-box;

    padding: 20px 0;

}

.news-page-title-r-ch{

    font-size: 28px;

    color: #000;

    font-family: "微軟正黑體";

    font-weight: bold;

    letter-spacing: 1px;

    display: inline-block;

    vertical-align: middle;

}

.news-page-title-r-en{

    font-size: 28px;

    color: #000;

    font-family: "roboto";

    font-weight: 700;

    letter-spacing: 1px;

    display: inline-block;

    vertical-align: middle;

    margin-left: 20px;

}

.rwd-other-title{

    display: none;

}

.news-page-info-l{

    width: 800px;

    max-width: 100%;

    display: inline-block;

    vertical-align: top;

    margin-right: 100px;

    box-sizing: border-box;

    padding: 40px 0;

}

.news-page-info-r{

    width: 380px;

    max-width: 100%;

    display: inline-block;

    vertical-align: top;

}

.news-page-info-edit{

    font-size: 16px;

    color: #000;

    display: block;

    line-height: 2;

    box-sizing: border-box;

    padding: 20px 0;

    letter-spacing: 1px;

}

.news-page-info-btn-box{

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: space-between;

    -webkit-justify-content: space-between;

    flex-direction: row;

    border-top: 1px solid #d1d1d1;

    box-sizing: border-box;

    padding-top: 10px;

    margin-top: 20px;

}

.news-page-info-btn{

    font-size: 20px;

    font-family: "Roboto";

    font-weight: 500;

    color: #000;

    letter-spacing: 1px;

    transition: all .3s linear;

}

.news-page-info-back .news-page-info-btn{

    color: #888;

}

.news-page-info-prev .news-page-info-btn i{

    color: #000;

    margin-right: 10px;

    transition: all .3s linear;

}

.news-page-info-next .news-page-info-btn i{

    color: #000;

    margin-left: 10px;

    transition: all .3s linear;

}

.news-page-info-r .news-info{

    margin-left: 0;

    margin-bottom: 0;

    border-top: none;

}







@media only screen and (max-width: 1280px){

    .news-page-all-box{

        width: 1000px;

    }

    .news-page-title-l,

    .news-page-info-l{

        width: 700px;

        margin-right: 40px;

    }

    .news-page-title-r,

    .news-page-info-r{

        width: 240px;

    }

    #news-page .news-info{

        width: 100%;

    }

    #news-page .news-info-img-box{

        height: 164px;

    }

}

@media only screen and (max-width: 1000px){

    .news-page-box{

        padding-top: 64px;

    }

    .news-page-all-box{

        width: 750px;

        padding: 60px 0;

    }

    .news-page-title-box{

        margin-top: 30px;

    }

    .news-page-title-l,

    .news-page-info-l{

        width: 100%;

        margin-right: 0;

    }

    .news-page-info-l{

        padding: 20px 0;

    }

    .news-page-title-r{

        display: none;

    }

    .news-page-info-r{

        width: 100%;

    }

    .rwd-other-title{

        width: 100%;

        display: block;

        padding: 10px 0;

    }

    .news-page-path-box{

        display: none;

    }

    #news-page .news-info{

        width: 49%;

        margin-left: 2%;

    }

    #news-page .news-info:nth-child(even){

        margin-left: 0;

    }

    .news-page-title-l-ch,

    .news-page-title-l-en,

    .news-page-title-r-ch,

    .news-page-title-r-en{

        font-size: 24px;

    }

    .news-page-data{

        font-size: 14px;

    }

    #news-page .news-info-img-box{

        height: 251px;

    }

}

@media only screen and (max-width: 750px){

    .news-page-all-box{

        width: 550px;

        padding: 40px 0;

    }

    #news-page .news-info-img-box{

        height: 184px;

    }

    .news-page-title-l-ch,

    .news-page-title-l-en,

    .news-page-title-r-ch,

    .news-page-title-r-en{

        font-size: 20px;

    }

    .news-page-title-l-ch,

    .news-page-title-l-en{

        margin-top: 0;

    }

    .news-page-title-l{

        padding-top: 0;

    }

    #news-page .news-page-info-r .news-info{

        border: none;

        padding: 10px 0;

    }

    .news-info-title-ch,

    .news-info-title-en{

        font-size: 16px;

    }

    .news-page-title-box{

        margin-top: 20px;

    }

}

@media only screen and (max-width: 550px){

    .news-page-box{

        padding-top: 50px;

    }

    .news-page-all-box{

        width: 400px;

        padding: 20px 0;

    }

    #news-page .news-info{

        width: 100%;

        margin-left: 0;

    }

    #news-page .news-info-img-box{

        height: 274px;

    }

    .news-page-title-box{

        margin-top: 15px;

    }

    .news-page-title-l-ch,

    .news-page-title-l-en,

    .news-page-title-r-ch,

    .news-page-title-r-en{

        font-size: 18px;

    }

    .news-page-title-l-ch,

    .news-page-title-l-en{

        margin-top: 0;

    }

    .news-page-title-l{

        padding-bottom: 10px;

    }

    #news-page .news-page-info-r .news-info{

        border: none;

        padding: 10px 0;

    }

    .news-info-title-ch,

    .news-info-title-en{

        font-size: 14px;

    }

    .rwd-other-title{

        padding: 0;

        margin-top: 20px;

    }

    .news-page-info-edit{

        font-size: 12px;

    }

    .news-page-info-btn-box{

        margin-top: 10px;

    }

    .news-page-info-btn{

        font-size: 16px;

    }

}

@media only screen and (max-width: 400px){

    .news-page-all-box{

        width: calc(100% - 40px);

    }

    .news-page-title-l-ch,

    .news-page-title-l-en,

    .news-page-title-r-ch,

    .news-page-title-r-en{

        font-size: 16px;

    }

    .news-page-data{

        font-size: 12px;

    }

    #news-page .news-info-img-box{

        height: calc(100vw * 0.685);

    }

}







/*hover*/

.news-page-path:hover{

    color: #a62a32;

}

.news-page-path:first-child:hover{

    color: #000;

}

.news-page-info-btn:hover{

    color: #a62a32;

}

.news-page-info-prev .news-page-info-btn:hover i{

    color: #a62a32;

    transform: translateX(-10px);

}

.news-page-info-next .news-page-info-btn:hover i{

    color: #a62a32;

    transform: translateX(10px);

}











/*animation*/



@media only screen and (min-width: 1001px){

    .news-page-path-box{

        animation: fadeInRight 1s ease 0s 1 both;

    }

    .news-page-data{

        animation: fadeInRight 1s ease 0.1s 1 both;

    }

    .news-page-title-l-ch{

        animation: fadeInRight 1s ease 0.2s 1 both;

    }

    .news-page-title-l-en{

        animation: fadeInRight 1s ease 0.3s 1 both;

    }

    .news-page-info-l{

        animation: fadeInUp 1s ease 0.4s 1 both;

    }

    .news-page-title-r{

        animation: fadeInRight 1s ease 0s 1 both;

    }

    .news-page-title-l:after{

        transform-origin: 100% 50%;

        animation: line 1s ease .4s 1 both;

    }

}