@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: #DA8E68;

        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;

    }

}