@charset "utf-8";

/*文章(圖文式)列表*/
.article-list { overflow:hidden;}
.article-list * { padding:0; margin:0; list-style:none; text-decoration:none;}
.article-list ul { width:100%; height:auto; overflow:hidden; margin:0 auto;
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.article-list ul li { flex-shrink:0; width:32%; height:auto; overflow:hidden; float:left; margin-bottom:20px;}
.article-list ul li:nth-child(3n+2) { margin-left:2%; margin-right:2%;}
.article-list ul li > a { display:block; width:100%; height:auto; overflow:hidden; float:left; border:1px solid rgba(0,0,0,0.1); border-radius:10px;}
.article-list ul li > a .list-photo,
.article-list ul li > a .list-title { display:block; width:100%; height:auto; overflow:hidden;}
.article-list ul li > a .list-photo { position:relative;
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.article-list ul li > a .list-photo:before { content:''; display:block; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1; opacity:0;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
.article-list ul li > a:hover .list-photo:before { opacity:1;}
.article-list ul li > a .list-photo:after { content:'了解更多'; display:block; background:url(../Images/Layout/Default/eye.png) top center no-repeat; position:absolute; width:100%; height:70px; left:0; top:50%; margin-top:-35px; padding-top:40px; line-height:30px; z-index:1; opacity:0; font-size:0.7rem; color:#fff; text-align:center;
/*背景尺寸*/
-moz-background-size:50px auto;
-webkit-background-size:50px auto;
-o-background-size:50px auto;
background-size:50px auto;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
.article-list ul li > a:hover .list-photo:after { opacity:1;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);}
.article-list ul li > a .list-photo img { flex-shrink:0; width:100%; height:auto; display:block;
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
.article-list ul li > a .list-photo:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);}
.article-list ul li > a .list-title { padding:10px; font-size:1.5rem;}

/*字級大小設定*/
/*小*/
.fontsize1 .article-list ul li > a .list-title { font-size:0.75rem;}
/*中*/
.fontsize2 .article-list ul li > a .list-title{ font-size:1rem;}
/*大*/
.fontsize3 .article-list ul li > a .list-title{ font-size:1.25rem;}
/*巨*/
.fontsize4 .article-list ul li > a .list-title{ font-size:1.75rem;}

/*=======================================媒體查詢開始=======================================*/
@media only screen and (min-width:0px) and (max-width:768px) {
.article-list ul li { -webkit-justify-content:space-between; justify-content:space-between;}
.article-list ul li { width:49%;}
.article-list ul li:nth-child(3n+2) { margin-left:0; margin-right:0;}
.article-list ul li:nth-child(2n+1) { margin-right:2%;}
}

@media only screen and (min-width:0px) and (max-width:360px) {
.article-list ul li { width:100%;}
.article-list ul li:nth-child(2n+2) { margin-right:0;}
}