@charset "utf-8";
/* CSS Document */
/*【default】*/
/*---------------------------------------------------header---------------------------------------*/
/*-------------------------------nav--------------------------------*/
    nav #n4 .h3font{
        color: #29AAE2;
    }
/*---------------------------------------------------main-----------------------------------------*/
/*------------------------------content--------------------------------*/
/*--------------------news------------------*/
    .area {
        border: 1px solid #717070;
        border-radius: 3px;
        text-align: justify;
        margin-bottom: 30px;
        background-color: #ffffff9e;
    }
    .area:last-child {
        margin-bottom: 0;
    }
    .news_btn{
        padding: 20px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        display: block;
    }
/*active效果*/
    .news_btn:hover{
        background-color: rgba(158, 158, 158, 0.15);
    }
    .news_btn:hover .date{
        color: #886;
    }
    .news_btn:hover .title{
        color: #663;
    }
    .news_btn:hover .date:after{
        transform: rotate(45deg);
        color: #663;
    }
/*標題日期*/
    .news_btn .date{
        position: relative;
        font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
        color: #112f11;
        margin-bottom: 10px;
        letter-spacing: 5px;
        transition: color 0.3s ease;
    }
    .news_btn .date:after {
        position: absolute;
        content: '◆';
        color: #717070;
        right: 0;
        top: 0;
        font-size: 40px;
        transition: color 0.3s ease , transform 0.3s ease;
    }
/*標題*/
    .news_btn .title{
        width: 90%;
        color: #0c100c;
        transition: color 0.3s ease;
    }
/*標題細節*/
    .area .detail{
        display: none;
        padding: 20px;
    }

    div.pager {
        display: none;
    }

    .animated2{
    	animation-duration: 1s;
    	animation-fill-mode: both;
    }

    /*flipInX*/
    .flipInX {
    	backface-visibility: visible !important;
    	animation-name: flipInX;
    }
    @keyframes flipInX {
    	from {
    		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    		animation-timing-function: ease-in;
    		opacity: 0;

        }
    	40% {
    		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    		animation-timing-function: ease-in;

        }
    	60% {
    		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    		opacity: 1;

        }
    	80% {
    		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

        }
    	to {
    		transform: perspective(400px);
    		opacity: 1;

        }
    }

    /*---btn---*/
    .btn{
    	position: relative;
    	width: 70px;
    	height: 35px;
    	margin: 0 auto;
    	background-color: #9e9e9e;
    	overflow: hidden;
    }
    .btn a{
    	display: block;
    	width: 100%;
    	height: 100%;
    }
    .btn h5{
    	width: 100%;
    	height: 100%;
    	color: #fff;
    	line-height: 35px;
    	transform: translateY(0);
    	transition: all 0.05s ease;
        text-align: center;
    }
    .btn h5.mask{
    	width: 100%;
    	height: 100%;
    	color: #ffe72e;
    	transform: translateY(0);
    	transition: transform 0.1s ease;
    }
    .btn:hover h5{
    	transform: translateY(-35px);
    }
    .btn:hover h5.mask{
    	transform: translateY(-35px);
    }


/*熒幕尺寸【小於】769時頁面顯示---平板*/
@media (max-width:768px) {
/*---------------------------------------------------main-----------------------------------------*/
/*------------------------------content--------------------------------*/
/*--------------------news------------------*/
    .news_btn{
        padding: 10px;
    }
    .news_btn .date:after {
        font-size: 25px;
    }
}