@charset "utf-8";
/* CSS Document */

.abgne_tab {
	clear: left;
	width: 100%;
	margin: 70px 0 30px 0;}
.selectTag{ width: 100%; text-align: center; border-bottom:1px solid #e1e1e1; padding:10px 0;}

div.tab_container {
	clear: left;
	width: 80%;
	margin:0 auto;}

/*頁籤內容共用CSS*/
div.tab_container .iten{ margin:20px 0 80px 0; position:relative; overflow: hidden;}
.tab_content a.seeMore{ position: absolute; border: 1px solid #e8b17a; color: #333; text-decoration: none; padding: 8px 16px; font-size: 13px; top:0; margin:55px 5px 0 0; transition:all 0.4s; right:0;}
.tab_content a.seeMore:hover{ border: 1px solid #26bec9; color: #FFF; background:#26bec9; transition:all 0.4s;}
.tab_content h2{ text-align:center; font-family:Arial, "微軟正黑體"; color:#646464; font-size:43px; margin:30px 0 10px 0;}
.tab_content ul{ list-style:none;width:100%; overflow: hidden; font-size:0;}
.tab_content ul li{ display:inline-table;}
.tab_content div.mask{ width:100%; height:100%; background:url(../../images/new/index/mask.png) no-repeat center rgba(0,0,0,0.8); position:absolute; z-index:2; display:none; top:0;}
.tab_content ul li a.link{ font-size:13px; margin: 5px; overflow: hidden; display: block; position:relative; text-decoration:none;}
.tab_content ul li div.location{ position:absolute; z-index:1; top:5px; color:#FFF; line-height:2; background:url(../../images/new/index/location.png) no-repeat left center; padding-left:27px;}
.tab_content ul li div.photo{ width:100%; overflow:hidden;}
.tab_content ul li div.photo img{ width:100%;}

/*event*/
.tab_content .event ul{ white-space: nowrap;}
.tab_content .event ul li{ width:33.33%;}
.tab_content .event ul li div.text{ position:absolute; z-index:1; bottom:0; background:url(../../images/new/index/text.png); width:100%; color:#FFF; padding:8px; box-sizing:border-box; height:58px; overflow:hidden;    white-space: normal;}
.tab_content .event ul li div.text .left{ float:left; width:50%; line-height:1.6; font-size:15px;font-family:Arial, "微軟正黑體"; overflow: hidden;}
.tab_content .event ul li div.text .right{ float:right; width:50%; text-align:right; overflow: hidden;}
.tab_content .event ul li div.text .right p{ font-size:23px;}
.tab_content .event ul li div.text .right p span{ font-size:9px; display:inline-table; vertical-align:top; margin-left:3px;}
.tab_content .event ul li div.text .right div{ color:#848484; text-decoration:line-through;}

/*ranking*/
.tab_content .ranking ul li{ width:25%;}
.tab_content .ranking ul li div.photo{ position: relative;}
.tab_content .ranking ul li p{ font-size:15px; color:#222222; font-family:Arial, "微軟正黑體"; line-height: 1.5; height: 30px; overflow: hidden;}
.tab_content .ranking ul li p span{ font-size:23px; color:#26bec9; margin-right:5px; font-weight:700; }
.tab_content .ranking .tips{ position:absolute; z-index:1; right:10px; top:10px; background:#ff5454; border-radius:100em; width:70px; height:70px; color:#FFF; text-align:center; padding:5px; box-sizing:border-box;}
.tab_content .ranking .tips p{ font-size:31px; color:#FFF; font-weight:500; line-height:1;}

/*area*/
.areaDiv{display: table;}
.leftimg,
.rightimg{ overflow: hidden; display:table-cell;position: relative;}

.leftimg{ width:30%;}
.leftimg div.firstImg{ overflow:hidden; top:0; margin-top:0;}
.leftimg div img{ position: absolute; left:-20%; top: 0;}

.rightimg{ width:70%;}
.rightimg a.link{display:block; overflow:hidden; position:relative; }
.rightimg a.marginBottom{ margin-bottom:20px;}

.rightimg .leftDiv, .rightimg .rightDiv{width: 50%; padding-left:20px; box-sizing:border-box;}
.rightimg .leftDiv{ float:left;}
.rightimg .rightDiv{ float:right;}
.rightimg .leftDiv div,
.rightimg .rightDiv div{ overflow:hidden;}
.rightimg .leftDiv div img,
.rightimg .rightDiv div img{ width:100%;}

.areaDiv .outerouterouter{ height:100%;}
.areaDiv .name{ position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; text-align:center; color:#FFF; font-size:35px; font-family:Arial, "微軟正黑體"; line-height: 1.5; font-variant:900; }




@media screen and (max-width:1500px){
	/*頁籤內容共用CSS*/
	div.tab_container{ width:90%;}
}

@media screen and (max-width:1250px){
	/*頁籤內容共用CSS*/
	.tab_content ul li{ width:50% !important;}
}

@media screen and (max-width:900px){
	/*頁籤內容共用CSS*/
	.tab_content ul{ white-space: normal !important;}
	.tab_content ul li{ width:100%!important;}
	
	/*area*/
	.rightimg a.marginBottom{ margin-bottom:0;}
	.leftimg, .rightimg{ width:100%; display: block;}
	.rightimg .leftDiv, .rightimg .rightDiv{ padding-left:0;}
	.leftimg div img{ position:relative; width:100%; left:0;}
}

@media screen and (max-width:700px){
	div.tab_container .iten{ margin:20px 0;}
	
	/*area*/
	.rightimg .leftDiv, .rightimg .rightDiv{ width:100%;}
	.areaDiv .rightimg a.link{ margin-bottom:20px; display: block;}
	.leftimg{ margin-bottom:20px;}
	
	.tab_content a.seeMore{ position:relative; z-index: 0; margin:0 5px; display:block; padding: 13px 16px; text-align: center;border: 1px solid #26bec9; color: #FFF; background:#26bec9;}
	.tab_content .area a.seeMore{ margin:0;}
	
	.ranking ul li a.link{ background: #e9e9e9;}
	.tab_content .ranking ul li p{ padding: 5px 10px;}
	.tab_content .ranking ul li p span{ color:#ff5454;}
	.tab_content h2{ font-size:31px;}
	
	
	.tab_content .event ul li div.text .left{ width:100%; height: 22px; font-size: 13px;}
	.tab_content .event ul li div.text .right{ width:100%; text-align:right;}
	.tab_content .event ul li div.text .right p,
	.tab_content .event ul li div.text .right div{ display:inline;}
	.tab_content .event ul li div.text{ padding: 5px 8px;}

}

/**********************************頁籤按鈕切換**********************************/
@media screen and (min-width: 601px){
	div.selectTag{ background:#FFF;}
	div.selectTag a.choice{ display:none;}
	div.selectTag ul.choiceIten{ display:block !important;text-align:center;}
	div.selectTag ul li{ display:inline-block; vertical-align: top;}
	div.selectTag ul li a{ display: inline-table; font-weight: 900; color: #FFF; text-decoration: none; font-size: 15px; padding: 7px 15px; transition: all 0.4s; border-radius: 4px; background:#b8b8b8; border:1px solid #b8b8b8;}
	div.selectTag ul li a:hover{ background:#f44a52; border:1px solid #f44a52; color:#FFF; transition: all 0.4s;}
	div.selectTag ul li.active a{ background:#26bec9; border:1px solid #26bec9; color:#FFF;}
}

@media screen and (max-width: 600px){
	.abgne_tab{ margin-top:0; min-height: 210px;}
	.selectTag{
	  display: table; 
	  margin:50px auto 10px auto;
	  /*border: 1px solid #c9c9c9;*/
	  position:relative;
	  background:url(../../images/new/all/ListOpen.png) no-repeat right center #f44a52;
	  width:95%;
	  color:#FFF;
	  font-family: Arial, "微軟正黑體"; box-sizing: border-box;
	  padding-bottom:0;}
	
	div.selectTag a.choice{ padding: 5px 30px 5px 15px; display: inline-block; line-height:2; overflow:hidden; width:100%;cursor: pointer; box-sizing:border-box; font-size:16px; margin-top: -10px;}  
	div.selectTag ul.choiceIten{ position:absolute; z-index:100; background:#FFF; border: 1px solid #c9c9c9; width:99.6%; box-sizing: border-box;}
	div.selectTag ul.choiceIten li{ border-bottom: 1px solid #c9c9c9;} 
	div.selectTag ul.choiceIten li a{ display: block; padding:5px; transition: all 0.4s; background:#dedede; color: #282828; text-decoration:none;}
	div.selectTag ul.choiceIten li a:hover{ color:#FFF; background:#f44a52; transition: all 0.4s;}
	
	.tab_content h2{ margin: 10px 0 10px 0;}
}
/**********************************頁籤按鈕切換_end**********************************/