@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Zen+Antique+Soft&display=swap');
html ,body{font-size:1rem;background-color:transparent;
    font-family: "Noto Sans TC",'Microsoft JhengHei', Helvetica, 'Maven Pro', 'Droid Sans','Myriad Pro', Verdana, Geneva, sans-serif;
    color: #f7f7f7; text-align: center; font-weight:300;letter-spacing:normal;
    position: relative;
}

div{ font-size:1rem; }
td,th{
    border: 1px solid rgba(247, 247, 247,0.8);
    padding:1px 6px;
}
.newslist_con{
    width:100%;
    margin: 0 auto;
    padding-top:50px
}
.newstype_menu{
    display: flex;
    position: absolute;
    top: 0px;
}
.newstype_menu li{
    position: relative;
    display: block;
    width: 162px;
    height: 50px;
    margin-right: 8px;
}
.newstype_menu li a{
    display: block;
    width: 162px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    text-indent: -9999px;
    opacity: 0.7;
    transition: opacity 0.5s;
}
.newstype_menu li:nth-child(1) a{
    background: url(../images/news/news_newstype_btn1.webp) center;
    background-size:auto 100%;
}
.newstype_menu li:nth-child(2) a{
    background: url(../images/news/news_newstype_btn2.webp) center;
    background-size:auto 100%;
}
.newstype_menu li:nth-child(3) a{
    background: url(../images/news/news_newstype_btn3.webp) center;
    background-size:auto 100%;
}
.newstype_menu li:nth-child(4) a{
    background: url(../images/news/news_newstype_btn4.webp) center;
    background-size:auto 100%;
}
.newstype_menu li a:hover{
    opacity: 1;
}
.newstype_menu li.current a{
    background: none;
    font-size:1.375em;
    color: #fff;
    font-weight: 400;
    text-indent:0;
    opacity: 1;
}
.newstype_menu li::before{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 162px;
    height: 50px;
    background: url(../images/news/news_newstype_btn.webp);
    background-size: 100% 100%;
    opacity: 0.3;
    pointer-events: none;
    transition: all 0.5s;
}
.newstype_menu li:hover::before{
    opacity: 0.8;
}
.newstype_menu li.current::before,.newstype_menu li.current:hover::before{
    background: url(../images/news/news_newstype_btn_current.webp);
    background-size: 100% 100%;
    opacity: 1;
}
.newslist,.news_content{
    width:100%;
    margin: 0 auto;
    background-image : url(../images/news/news_popup_bg_t.webp),                      
                        url(../images/news/news_popup_bg_b.webp) ,
                        url(../images/news/news_popup_bg_c.webp);
    background-repeat  :no-repeat,
                        no-repeat,
                        repeat-y;

    background-position:top,
                        bottom ,
                        center;
    background-size: 100% auto;
    padding: 20px 0 30px;
    overflow-y: auto;
    min-height:78vh;
    max-height: 92vh;
}
.newslist ul.item_news{
    width: 90%;
    margin: 0 auto;
}
.newslist ul.item_news li{
    display: flex;
    width:100%;
    padding:6px 8px;
    position: relative;
}
.newslist ul.item_news li .news_title{
    flex: 0 1 0%;
    width: 79%;
    display: flex;
    padding-left: 20px;
}
.newslist ul.item_news li .news_title a{
    font-size: 1.25em;
    overflow:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    font-weight: 400;padding-top: 3px;
}
.newslist ul.item_news li .news_title a:hover{
    color: #bba082;
}
.newslist ul.item_news li + li::before{
    content: '';
    width:102%;
    height:5px;
    background:url(../images/news/line.webp),
    url(../images/news/line_point.webp),
    url(../images/news/line_point.webp);
    background-repeat: repeat-x,no-repeat,no-repeat;
    background-position: left center,left center,right center;
    position: absolute;
    left: -1%;
    margin-top: -14px;
    pointer-events: none;
}
.select_menu{
	/*移除箭頭樣式*/
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	/*改變右邊箭頭樣式*/
	background: url("../images/news/btn_arrow.webp") no-repeat right center transparent;
	background-size:auto 100%;
	border-style:none;
	background-color:#967f66;
	color:#000000; 
	font-family:'微軟正黑體', sans-serif;
	transition:background-color 0.5s; 
	font-size:1.15rem;
	height: 2.6rem; 
    padding: 0 2.2rem 0 1rem;
	vertical-align:middle; 
    display:inline-block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    line-height: 2.6rem;
    font-weight: 600;
	
}  
/*IE隱藏箭頭樣式*/
.select_menu::-ms-expand {display: none;}
.select_menu option{background-color:rgba(216, 201, 168, 0.75); border-style:none;}
.select_menu:hover{  background: url("../images/news/btn_arrow_ov.webp") no-repeat right center;
					background-size:auto 100% ; cursor:pointer;
}

.select_menu:hover{  
	background-color:#b99c7f;
}

/* news content---------------------------------------------------- */
.news_box{
    padding-top: 50px;
}
.news_con_title{
    width: 660px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}
.news_con_title::before{
    content: '';
    width:100%;
    height:5px;
    background:url(../images/news/line.webp),
    url(../images/news/line_point.webp),
    url(../images/news/line_point.webp);
    background-repeat: repeat-x,no-repeat,no-repeat;
    background-position: left center,left center,right center;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-top: -14px;
    pointer-events: none;
}
.news_con_title .news_title_top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding:15px 20px 0;
}
.news_con_title .news_title_top .news_title_date{
    opacity: 0.6;
}
.news_con_title .news_title_bottom {
    padding:0 20px;
}
.news_con_title .news_title_bottom h3{
    color: #e0bd86;
    font-size: 1.375em;
    text-align-last: left;
    line-height: 2rem;
    font-weight: 500;
    padding: 3px 0; 
}
.news_txt{
    width: 620px;
    margin: 0 auto; 
    text-align: left;
    font-size: 1.0625em;
    line-height: 1.875em;
}
.news_txt img{
    max-width: 100%;
    display: block;
    margin: 10px auto;
}
.news_back{
    display: block;
    width: 230px;
    height: 60px;
    background: url(../images/news/btn_more_bg.webp);
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
.news_back img:nth-child(2){
    margin:0 10px;
}

.news_back img{
    transition: all 0.5s;
}
.news_back:hover img:nth-child(1){
    transform: rotate(90deg);
}
.news_back:hover img:nth-child(3){
    transform: translateX(5px);
}
.news_back:hover{
    -webkit-filter: brightness(120%); /* Safari */
    filter: brightness(120%);
    transform: translateY(-8px);
}

@media screen and (max-width:700px) {
    .newslist_con{
        width:100%;
        margin: 0 auto;
        padding-top: 0;
    }
    .newslist li .news_title a{
        font-size: 1.0625rem;
    }
    .newstype_menu{
        width: 92%;
        max-width: 350px;
        margin:15px auto;
        position: relative;
        flex-wrap: wrap;
    }
    .newstype_menu li{
        margin:5px;
    }
    .newslist{
        margin-top:50px;
        padding-top:10px;
    }
    .news_con_title{
        width: 98%;
    }
    .news_txt{
        width: 92%;
    }
    .news_con_title::before{
        width: 96%;
        left: 2%;
    }
}
@media screen and (max-width:650px) {
    .newslist, .news_content{
        margin-top: 39px;
    }
    .news_box{
        padding: 0;
    }
    .newslist ul.item_news li .news_title{
        width: 75%;
    }
}

@media screen and (max-width:500px) {
    .newslist ul.item_news{
        width: 92%;
    }
    .newslist ul.item_news li {
        padding: 6px;
    }
    .newslist ul.item_news li .news_title a{
        font-size: 1rem;
    }
    .newslist ul.item_news li .news_title {
        width:70%;
        padding-left: 10px;
    }
    .news_type img{
        height: 32px;
    }
    .newstype_menu li{
        width: 46%;
        margin: 2%;
    }
    .newstype_menu li.current a,.newstype_menu li::before,
    .newstype_menu li a{
        width: 100%;
    }
    .news_txt{
        font-size: 1rem;
    }
    .news_con_title .news_title_top{
        padding-top: 0;
    }
    .newslist {
        max-height: 90vh;
    }
    
}
@media screen and (max-width:300px) {
    .newstype_menu li {
        width: 90%;
        margin:2% 5%;
    }
    .newslist ul.item_news li .news_title {
        width:60%;
    }
    
}