/* 版權copyright */
.footer {
    width: 100%;
    background: url(../images/bg_copyright.png) no-repeat center bottom;
    min-height: 160px;
    margin-top: 3%;
}
.footer::before{
	content: ""; /*沒用到仍然要寫，雙引號內容留空*/
	width: 100%; /*設定長方形寬度*/
	height: 200px; /*設定長方形高度*/
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.77) 70%, rgba(255,255,255,0.77) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.77) 70%,rgba(255,255,255,0.77) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.77) 70%,rgba(255,255,255,0.77) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#c4ffffff',GradientType=0 ); /* IE6-9 */

	position: absolute; /*設定與<div>區塊的相對位置*/
	left: 0; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
	bottom: 0; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊<div>區塊的下方*/
  }
.footer_all{width:100%; max-width:1000px; margin:0 auto; padding:1.5% 0; text-align:left;}

.cr_block,.rank_block{max-width:96%; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center;
	 position: relative; filter: drop-shadow(2px 2px 5px #fff);}

.cr_block{padding-bottom:1.6%; align-items:flex-end;}


.cr_uj{ width:20%; max-width:180px; margin-right:2%;}

.cr_txt{width:fit-content; color:#6c5e5e; font-size:.9rem; line-height:1.5rem; flex-basis:0; white-space:nowrap;}

.cr_txt ul{display:flex; justify-content:flex-start;}
.cr_txt ul li{ padding-right:1rem;}
.cr_txt ul li:nth-last-of-type(1){ padding-right:0;}

.rank_icon{ width:10%; max-width:48px; margin-right:1.5%;}
.rank_icon img{ width:100%; height:auto;}

.rank_txt{ max-width:88%; color:#6c5e5e; font-size:.8rem; padding-left: 1rem;}
.rank_txt ul{ width:100%; margin:0; padding:0; display:flex; flex-wrap: wrap; list-style-type: square;}
.rank_txt ul li{margin-right: 2rem;}


@media (max-width:720px){
	.footer_all{padding:5% 0;}
	.cr_block{display:block;}
	.cr_uj{ width:25%; margin:0 auto 1% auto;}
	.cr_txt{text-align:center; white-space:initial;}
	.cr_txt ul{justify-content:center; flex-wrap:wrap;}	
}

@media (max-width:640px){
	.footer::before{
		height: 300px;}
	.cr_block{padding-bottom:2%;}
	.cr_uj{ width:35%;}	
	.rank_block{display:block;}
	.rank_icon{
		margin: 0 auto;	
	}
	.cr_block,.rank_block{max-width:92%;}
	.rank_txt{ max-width: initial; line-height:1.3rem;}
	.rank_txt,.rank_txt ul,.rank_txt li{width:100%;}
	.rank_txt ul li{margin-right:0;}
	.footer {
		background: url(../images/bg_copyright_s.png) no-repeat center bottom;
	}
}

@media (max-width:500px){
	.cr_uj{ width:40%;}
}