@charset "utf-8";
 
 
/** 主視覺 banner **/
#banner {
	position:relative;
	width: 100%;
	margin:0 auto;
 }
 
#banner:before{
	content:'';
	display:block;
	width:100%;
	height:0;
	padding-bottom: 4%;
	left:0; bottom:-1px;
	position:absolute;
	z-index:2;
	background:url(../images/main-bottom-w.png) center bottom  no-repeat;
	background-size:100% 100%;} 
 
#banner .listshow {
	float:left;
	width:100%;
	background:#000;
	overflow: hidden
}
#banner .listshow a {
	float:left;
	width:100%;
	height:0;
	padding-bottom:37%; 
  	max-height:calc(100vh - 110px);
	display:block;
	overflow: hidden;
	background:#000;
}
#banner .listshow a .img{
	width:100%;
	position:absolute;
	height:100%;
	left:0; top:0;
	z-index:0;
	background-position:center ;
	background-size:cover;
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transition:all 12s ;
	-moz-transition:all 12s ;
	-ms-transition:all 12s ;
	-o-transition:all 12s ;
	-webkit-transition:all 12s ;
	}

#banner .listshow a:hover .img,
#banner .listshow a:hover .img{}
 

#banner .listshow a.no_tit .img:after{ display:none;}	
	
#banner .listshow .slick-active a .img, #banner .listshow .swiper-slide-active a .img{
	transform:scale(1);
	transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);}

#banner .listshow a .t_box{
	display: block;
    position: absolute;
    width: 100%;
    max-width: 1300px;
	padding:0 50px;
    line-height: 1.2; text-align:center;
    opacity: 0;
    left: 50%; top: 50%;
    transform: translate(-25%,-60%);
    transition: all 1S;
    transition-delay: 1s;
 	box-sizing:border-box;
	z-index:2
	}
#banner .listshow .slick-active a .t_box, #banner .listshow .swiper-slide-active a .t_box{
	transform:translate(-50%,-60%);
	opacity:1
	}		
#banner .listshow a.no_tit .t_box{ display:none;}

		
#banner .listshow a .t_box strong{
	font-size: 5em;
    text-shadow: 0 0 10px rgba(0,0,0,1), 0 0 5px rgba(0, 0, 0, 1);
	display:block; margin-bottom:30px; position:relative;
	color: #fff;
	}
#banner .listshow a .t_box p{ font-size:2em; font-weight:bold;text-shadow: 0 0 10px rgba(0,0,0,1), 0 0 5px rgba(0, 0, 0, 1);color: #fff;}	
#banner .listshow a .t_box strong:after{
	content:''; display:block; width:50px; height:2px; opacity:0.7; position:absolute; bottom:-15px;
	left:50%; margin-left:-25px; background:#fff;}		
	
#banner .listshow a .t_box .more{
	display:inline-block;
	padding:10px 35px;
	line-height:1;
	border:1px solid #fff;
	font-size:1.5em;
	margin-top:20px;
	color:#fff;
	background-color: rgba(0,0,0,0.5);
	border-radius:20px; font-weight:bold; transition: ease all 0.7s; transition-delay:2s; opacity:0; transform:translateY(150px)}
#banner .listshow .slick-active a .t_box .more, #banner .listshow .swiper-slide-active a .t_box .more{ opacity:1;  transform:translateY(0px)}
	
#banner .listshow a:hover .t_box .more,
#banner .listshow a .t_box .more:hover,
#banner .listshow a:focus .t_box .more{
	background-color:#fff; color:#000; box-shadow:0 0 10px rgba(0,0,0,1), 0 0 5px rgba(0, 0, 0, 1); transition-delay:0s}		

 

#banner .listshow a:focus .img{
 	opacity:0.5;
}
#banner .listshow img {
	float:left;
	width:100%;
	height:auto;
}
#banner .listshow .slick-prev,
#banner .listshow .slick-next {
	position:absolute;
	display:block;
	font-size:0;
	width: 55px;
    height: 55px;
	border-radius:50% !important;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;	
	z-index: 2;
	background-size: contain;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
	opacity:0;
	border: 0
 }
  
#banner .listshow .slick-prev:before,
#banner .listshow .slick-next:before {
	display:none;
}
#banner .listshow .slick-prev {
	left: 100px;
	background:rgba(0,0,0,0.5) url(../images/prev.svg) no-repeat 50% 50%;
	background-size: cover !important;
	opacity:0
}

#banner .listshow .slick-prev:hover, 
#banner .listshow .slick-prev:focus,
#banner .listshow a:hover .slick-prev, 
#banner .listshow a:focus .slick-prev,
#banner:hover .listshow .slick-prev{opacity:1;	left:10px;}
 
#banner .listshow .slick-prev:hover, 
#banner .listshow .slick-prev:focus{background:rgba(0,178,179,0.75) url(../images/prev.svg) no-repeat 50% 50%;border: 2px solid #fff; box-sizing: border-box}

#banner .listshow .slick-next {
	right: 100px; 
	background:rgba(0,0,0,0.5) url(../images/next.svg)no-repeat 50% 50%;
	background-size: cover !important;
	opacity:0
}


#banner .listshow .slick-next:hover, 
#banner .listshow .slick-next:focus,
#banner .listshow a:hover .slick-next, 
#banner .listshow a:focus .slick-next,
#banner:hover .listshow .slick-next{opacity:1;	right:10px}

#banner .listshow .slick-next:hover, 
#banner .listshow .slick-next:focus{ border: 2px solid #fff; box-sizing: border-box}

#banner .listshow .slick-next:hover, 
#banner .listshow .slick-next:focus{background:rgba(0,178,179,0.75) url(../images/next.svg)no-repeat 50% 50%;border: 2px solid #fff; box-sizing: border-box}
	
#banner .listshow .slick-prev:hover, 
#banner .listshow .slick-prev:focus,
#banner .listshow .slick-next:hover, 
#banner .listshow .slick-next:focus{	
	background-color:rgba(0,178,179,0.75);}

#banner .slick-dots{ bottom: 35px; z-index: 3}

#banner .slick-dots li{ margin: 0 10px}
#banner .slick-dots li button{ width:15px; height: 15px; background: #fff; box-shadow: 0 0 3px #000;   }
#banner .slick-dots li.slick-active button{ background-color:#00ffd4;   }
#banner .slick-dots li button *{ display: none}
#banner .slick-dots li button:hover, #banner .slick-dots li button:focus{ background-color: #F7FF82;  } 
 

@media screen and (max-width: 1024px) {
#banner .listshow a {
     max-height: calc(100vh - 100px);
}
}
/*雙層主選單*/
@media screen and (min-width:991px) and (max-width:1250px){
#banner .listshow a {
     max-height: calc(100vh - 103px);
}	
 }
@media screen and (max-width: 990px) {
 
#banner .listshow .slick-prev:hover, #banner .listshow .slick-prev:focus, #banner .listshow a:hover .slick-prev, #banner .listshow a:focus .slick-prev, #banner:hover .listshow .slick-prev{
	left:5px;}
#banner .listshow .slick-next:hover, 
#banner .listshow .slick-next:focus,
#banner .listshow a:hover .slick-next, 
#banner .listshow a:focus .slick-next,
#banner:hover .listshow .slick-next{
 	right:5px}			
}

@media screen and (max-width: 640px) {
	#banner .listshow .slick-prev,
	#banner .listshow .slick-next { display: none
		/*width:44px;
		height:44px;*/
 	}
}
@media screen and (max-width: 480px) {
#banner .listshow .slick-prev,
#banner .listshow .slick-next{
	display:none !important}
	
#banner .listshow a .t_box.down{
	bottom:18%}	
#banner .listshow a .t_box strong {
    margin-bottom: 18px;
}
#banner .listshow a .t_box strong:after {
    bottom: -10px;
}	
}
@media screen and (min-width: 481px) {
#banner .listshow .slick-prev,
#banner .listshow .slick-next {
	top:calc(50% - 40px)
} }
@media screen and (min-width: 991px) {
	#banner {
		margin:0 auto;  
	} 
}

#banner .scroll{ 
	width:44px; height:44px; position:absolute;
	border-radius: 50%;
	left:50%; margin-left:-15px; bottom:50px; z-index:3;	
	-webkit-animation-name: scroll;
    animation-name: scroll_m;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation: scroll_m 2s infinite;
    -webkit-animation-fill-mode: both;
	animation: scroll_m 2s infinite;
    animation-fill-mode: both;
	background-image: url(../images/scroll.png);
	background-position: center 55%;
	background-size: 60% auto;
	background-repeat: no-repeat
}
#banner .scroll:hover, #banner .scroll:focus{ background-color:rgba(0,0,0,0.25); }

.slick-slider .slick-prev, .slick-slider .slick-next{
	width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%;  position: absolute; 
     cursor: pointer;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
	background-color: #00b2b3;
}

.slick-slider .slick-prev:hover, .slick-slider .slick-next:hover,
.slick-slider .slick-prev:focus, .slick-slider .slick-next:focus{
	background-color: #000;
}

.slick-slider .slick-prev{ left: auto; top: -57px; right:110px; background-image: url(../images/prevbtn-w.svg) !important }
.slick-slider .slick-next{	top: -57px; right: 60px;  background-image: url(../images/nextbtn-w.svg) !important }



 


/*main*/
#main{ }
hgroup .controls{ display: inline-block}
hgroup .controls .btn{ float: left}
.more_plus, hgroup a, hgroup button, hgroup .btn{
   	width: 40px;
	height: 40px;
	box-sizing: border-box;
	font-size: 1rem;
 	display: inline-block;
 	border-radius: 50%;
	padding: 0;
	background-color: #009b9b;
 	text-indent: -999em;
	overflow: hidden;
	margin-left: 5px;
	position: relative;
	border: 0;
	cursor: pointer
	
 }
 
hgroup .btn{
	margin: 0;
	margin-top: 0;
	margin-left: 5px;
	top: auto;
	left: auto;
	right: auto;
	cursor: pointer;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

hgroup .btn:hover, hgroup .btn:focus{background-color: #000;}
 
hgroup .right, hgroup .more_plus{ float: right}
hgroup h2{ float: left}

hgroup .btn.more_plus{ background-image:  url(../images/morebtn-w.svg)  }
hgroup .btn.prev{ background-image:  url(../images/prevbtn-w.svg)  }
hgroup .btn.next{ background-image:  url(../images/nextbtn-w.svg)  }
 
 

/*BTN*/
.h_tits .r_btns{
 	display: flex;
	position: absolute;
	right: 0;
	bottom: 0
 }

 
.h_tits .r_btns .prev:before, 
.h_tits .r_btns .next:before{
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 1px solid #32872c;
    border-right: 1px solid #32872c;
    left: calc(50% - 7px);
    top: calc(50% - 5px);
}
.h_tits .r_btns .prev:before {
    left: calc(50% - 3px);
}
.h_tits .r_btns .prev:before {
    transform: rotate(-135deg);
}

.h_tits .r_btns .next:before {
    transform: rotate(45deg);
}
/*title*/
.h_tits{
 	font-size:6em;
	color: #00b2b3;
	display: block;
	margin-bottom: 35px;
	position: relative;
	font-family: 'Righteous';
	font-weight: normal
 }
.h_tits .bx{ display: inline-block; position: relative; font-style: normal; margin-bottom: 15px;}
.h_tits .bx:after{
	content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.7em;
    position: absolute;
    top: -0.1em;
    right: -0.6em;
    background: url(../images/title-green.png) center no-repeat;
    background-size: contain;
 }
.h_tits .bx:first-letter { font-size: 127%; color: #1b6395}





#main .container{ position: relative; z-index: 3}

.slick-dotted.slick-slider{ margin-bottom: 0}


.pdb{ box-sizing: border-box; padding: 80px 0;}


/* ------------------------------------------------    #about     --------------------------------------------*/
#about{ background: #fff; position: relative; padding: 60px 0}
 
#about .ab_box{ padding-left: 30px;  padding-right: 30px; position: relative; margin-left: 10px; line-height: 1.6; font-family: "League Spartan" ; font-size: 2.5em; line-height: 1.7; font-weight: 300; margin-right: 15px}
#about .ab_box p{ margin-bottom: 1em;}
#about .ab_box p:last-child{ margin-bottom: 0}
 
#about .ab_box .LR{
	position: absolute;
    top: 10px;
    width: 5px;
    height: calc(100% - 20px);
    background: #ddd;
}

#about .ab_box .LR.first{left: 0}
#about .ab_box .LR.last{right: 0}  

#about .ab_box .LR:before{
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ddd;
	position: absolute;
	top: -7px;
	left: 50%;
	margin-left: -7px;
}

 
.h_more_btn{ margin-top: 50px; text-align: center}

.h_more_btn a{ 
	display: inline-block; box-sizing: border-box; 
	line-height: 50px; padding: 0 53px 0 26px;  
	color: #33862d; position: relative; font-size: 2em;
	border-radius: 50px; border: 1px solid #33862d;
}

.h_more_btn a:after{
	content: ""; display: block; width: 26px; height: 26px; border-radius: 50%; background-color: #33862d;
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	background-image: url( ../images/list-ico-class.svg); background-repeat: no-repeat; background-size: 120%;
	background-position: center
}

.h_more_btn a:hover, .h_more_btn a:focus{	background-color: #33862d; color: #fff; font-weight: bold;}

.h_more_btn a:hover::after, .h_more_btn a:focus::after{ background-color: rgba(0,0,0,0.4); background-size: 150%;}



hgroup .right .btn{
	background-repeat: no-repeat; background-position: center; background-size: contain; /* 或 cover */ width: 40px; /* 要有寬高 */ height: 40px; text-indent: -9999px; /* 隱藏文字 */ overflow: hidden;
}

/* ---------------------#Events----------------------------------------------------*/
#Events{  position: relative; background: none; background: url(../images/event-bg.webp) center no-repeat;
	background-size: cover; background-attachment: fixed}
#Events:after{
	content: ""; display: block; position: absolute; width: 100%; height: 100%; transition: all 3s; left: 0; top: 0
}

#Events:hover:after{ backdrop-filter: blur(10px);}

#Events h2.h_tits{ color: #fff}

#Events .more_plus, #Events hgroup a, #Events hgroup button, #Events hgroup .btn{
	background-color: #fff;
}

#Events hgroup .btn.more_plus{ background-image: url(../images/morebtn-green.svg)}
#Events hgroup .btn.more_plus:hover{background-color: #00b2b3; background-image: url(../images/morebtn-w.svg)}


#Events hgroup .btn.prev{ background-image:  url(../images/prevbtn-green.svg)  }
#Events hgroup .btn.next{ background-image:  url(../images/nextbtn-green.svg)  }

 
#Events hgroup .btn.prev:hover, #Events hgroup .btn.prev:focus{
	background-color: #00b2b3; background-image: url(../images/prevbtn-w.svg)
}

#Events hgroup .btn.next{ background-image: url(../images/nextbtn-green.svg)}
#Events hgroup .btn.next:hover, #Events hgroup .btn.next:focus{
	background-color: #00b2b3; background-image: url(../images/nextbtn-w.svg)
}
 
 

.item .txt_box{
	background: #fff;
	border-radius: 0 0 15px 15px;
	box-sizing: border-box;
	padding: 20px 25px
}

 .item .zoomBox {
  border-radius:10px 10px 0 0 ;	 
  height: 0; padding-bottom: 57%;	
  position: relative;
  overflow: hidden;   /* 確保圖片不會超出容器 */
}
#Events .item .txt_box{ min-height:220px }
#Events .item .txt_box h3, #News .item h3{
	display: block;
	font-family: "League Spartan" ;
	font-weight: 600;
	color: #000;
	font-size: 2em;
	line-height: 1.45;
	margin-bottom:10px
}

#Events .item a:hover .txt_box h3, #News .item a:hover h3, #Events .item a:focus .txt_box h3, #News .item a:focus h3{
	color: #00b2b3
}

.item time{
	display: block;
	margin-bottom: 10px;
	font-size: 1.5em;
	color: #00b2b3;
	line-height: 1
}
.item a:hover time, .item a:hover time{ color: #666}

 .item .txt_box .txts{ font-size: 1.6em; font-family: "League Spartan" ;font-weight: 300; color:#666; line-height: 1.5;   }
.item a:hover .txt_box .txts, .item a:focus .txt_box .txts{color:#000; }
#News .item .zoomBox{
	padding-bottom: 66%;	
}

 .zoomBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 像背景 cover 一樣填滿 */
  object-position: center; /* 置中顯示 */
  display: block;
	position: absolute;
	 transition: all 0.5s
 }

a:hover  .zoomBox img, a:focus  .zoomBox img {
	transform: scale(1.15)
}
 
#Events .item, #news_show .item{ padding: 0 15px;}
#events_show, #news_show{ width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;}


/*----------------------------------  NEWS  -----------------------------------*/
#News{ background-color:#f2f2f2; padding-bottom:160px;  } 
#news_show .zoomBox{}
#News .labs{ color: #666}
#News .labs time{ display: inline-block; color: #00b2b3}

#News .item a:hover .labs time, #News .item a:focus .labs time{ color: #666}

#News .labs  .class { font-size: 1.5em; color: #666; margin-left: 10px; padding-left: 10px; border-left: 1px solid #666}

/*----------------------------------  Outcome  -----------------------------------*/

#Outcome{
 	background: #009b9b
}
#Outcome .container.sp{ padding: 0; position: relative}
#Outcome hgroup{
	position: absolute;
	width: 100%;
	transform: translateY(-84px)
}
#Outcome hgroup .right{
	margin-top: 30px
}
#Outcome hgroup h2{ margin-bottom: 0; color: #009b9b; font-size:10em }
#Outcome hgroup h2:after{
	content: "";
    display: block;
    width: 0.7em;
    height: 0.65em;
    background: url(../images/outcome-tit-wifi.svg) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 15px;
    right: 0;
    transform: translateX(110%);
}
#Outcome .slick-slider .slick-dots{ text-align: right}

#Outcome .slick-slider .slick-dots li {width: 12px; height: 12px; }

#Outcome .slick-slider .slick-dots li button{ background-color: rgba(255,255,255,0.5)}
#Outcome .slick-slider .slick-dots li.slick-active button{ background-color: rgba(255,255,255,1)}

#Outcome .item a{
	display: flex; justify-content: space-between
}

#Outcome .item a .txt_box, #Outcome .item a .zoomBox{
	width: calc(50% - 20px) ; background: none;
}

#Outcome .item a .txt_box{ color: #fff; opacity: 1; border-radius: 0; padding: 0}
#Outcome .item a .txt_box h3{ 
	display: block;
	font-family: 'Righteous';
    font-weight: normal;
	font-size: 3.5em;
	box-sizing: border-box;
	padding-left: 18px;
	border-left:10px solid rgba(255,255,255,0.5) ;
	line-height: 1.26;
	margin-bottom: 1em
}

#Outcome .item a:hover .txt_box h3, #Outcome .item a:focus .txt_box h3{ text-shadow: 0 0 3px rgba(0,0,0,0.8)}

#Outcome .item a .txt_box .txts{
	font-size: 2em;
	line-height: 1.4;
	font-family: 'League Spartan', arial;
	font-weight: 100;
	text-align: justify;
	color: #fff;
}


#Outcome .item a .zoomBox{ padding-bottom: 460px; border-radius:10px; }

#Outcome .m_lab{
	text-align: left;
	font-size: 1.6em;
	color: #fff;
	margin-top:20px
}

#Outcome .m_lab span{
	display: inline-block;
	padding: 0px 20px;
	border-radius: 20px;
	background-color: rgba(0,0,0,0.1);
	line-height: 35px;
	height: 30px
}
#Outcome a:hover .m_lab span, #Outcome a:focus .m_lab span{background-color: rgba(0,0,0,0.3) }



/* Links AD */
#Links{ background-color:#f2f2f2; position:relative;  box-sizing:border-box; padding-bottom: 100px } 
#Links.pdb{padding-top: 55px }
#Links hgroup{ display: block; width: 100%}
#Links hgroup h2{ float: none}
#ad_show{ width:calc(100% + 12px); margin-left:-6px; position: relative; z-index:3; }

#ad_show .item { padding: 0 6px}
#ad_show a{ display:block; padding:0px; box-sizing:border-box; text-align:center; border-radius: 10px;  overflow: hidden}

#ad_show a img{ display:inline-block; box-sizing:border-box;   width:100%; height:auto; }
#ad_show a:hover, #ad_show a:focus { transform: scale(0.9)}
#ad_show a:focus{ outline:none;}
 
 
#award #award_show .item a:hover strong, #video #video_show .item a:hover strong,
#award #award_show .item a:focus strong, #video #video_show .item a:focus strong{ color:#32872c }

#ad_show .slick-next, #video_show .slick-next{ right: 0;}
#ad_show .slick-prev, #video_show .slick-prev{ right: 50px}


/*slick dot*/
.slick-slider .slick-dots{ bottom: -35px;}
.slick-slider .slick-dots li{ width: 10px; height: 10px; position: relative; padding: 0}
.slick-slider .slick-dots li button{ width: 100%; height: 100%; border-radius: 50%; background: rgba(0,0,0,0.1);}
.slick-slider .slick-dots li button:hover, .slick-slider .slick-dots li button:focus{ background: #5aa654}
.slick-slider .slick-dots li.slick-active button{ background: rgba(0,0,0,0.35)}
.slick-slider .slick-dots li button:before{ display: none}

/*------------------------------------------------RWD--------------------------------------------*/
@media screen and (max-width: 1200px) {
	.h_tits{ font-size: 5em}
	#Outcome hgroup h2{font-size: 7em}
	#Outcome hgroup {transform: translateY(-59px);}
	#Outcome hgroup h2:after{ top: 11px;}
	#Outcome hgroup .right {margin-top: 10px;}
	#Outcome .item a .txt_box h3 { font-size: 2.8em;}
	#Outcome .item a .txt_box .txts{ font-size: 1.7em;}
	#Outcome .item a .zoomBox {	padding-bottom: 380px;}
 }

 

@media screen and (max-width: 1000px) {
 
	#banner .listshow a  .t_box strong{
		font-size:3.5em;}	
	#banner .listshow a .t_box{
		padding:0 50px;}
	
	#about .ab_box{ font-size: 1.6em }
	#about { padding: 30px 0 9vw 0;}
	
}

@media screen and (max-width:990px) {
 	#Links{ padding:80px  0} 
 
	#banner .scroll{ display:none !important}
 }
@media screen and (max-width: 768px) {
	#Events{  
		background: url(../images/event-bg-768.webp) center no-repeat;
		background-size: cover; }
	
	#banner .listshow a .t_box  strong{
		font-size:2.5em;
	 }
	 #banner .listshow a .t_box p{ font-size:1.65em;}
	#banner .listshow a .t_box .more{
		display:inline-block;
		padding:8px 15px;
		font-size:1.4em;
		margin-top:13px;
	 }
	 
	.more_plus, .slick-slider .slick-prev, .slick-slider .slick-next  { width: 40px; height: 40px}
	.more_plus:before {width: 15px; }
	.more_plus:after {height: 15px;}
	.slick-slider .slick-next {top: -56px; right: 55px;}
	.slick-slider .slick-prev {top: -56px; right: 101px;}
	
 	#Links .slick-slider .slick-next {right: 0;}
	#Links .slick-slider .slick-prev, #video_show .slick-slider .slick-prev {right: 45px;}
	
	 
	.h_more_btn a{ line-height: 40px; font-size: 1.7em}
	.h_more_btn a:agter{ width: 20px; height: 20px; right: 10px}
	
	
		.pdb {
     padding: 60px 0;
   }
	#News {
     padding-bottom: 110px;
   }
	
}
@media screen and (max-width: 700px) {
	.h_tits{ font-size: 3em}
	#about .ab_box{ font-size: 1.5em }
	#Outcome .item a{ display: block}
	#Outcome .item a .zoomBox{width: 100%; padding-bottom: 60%; margin-bottom: 25px; }
	#Outcome .item a .txt_box{ width: 100%;}
	
	#Events .item .txt_box{ min-height: 0}
 }
 

@media screen and (max-width: 650px) {
 
	.h_more_btn{margin-top: 80px;}
	.h_more_btn a{  padding: 0 44px 0 20px; font-size:1.6em }
	.h_more_btn a:after{ right: 11px}
 	.h_tits{ margin-bottom: 25px}
	.slick-slider .slick-prev, .slick-slider .slick-next{top: -45px}
	.slick-slider .slick-next {right: 55px;}
	.slick-slider .slick-prev {right: 100px;}
 	.more_plus, .h_tits .r_btns a, .h_tits .r_btns button, .h_tits .r_btns .btn{
		width: 34px; height: 34px
	}
	.h_tits {font-size: 3.8em}
	#about .h_tits .font-black{ font-size: 60%}
	#Outcome hgroup h2 {font-size: 4.5em; margin-right: 50px }
	#Outcome hgroup {transform: translateY(-37px);}
	#Outcome hgroup h2:after {top: 6px;}
	#Outcome hgroup .right {margin-top: -10px; }
	
	#banner .listshow .swiper-toggle{ width: 35px; height: 35px;left: 10px; bottom: 15px; background-color: rgba(0,0,0,0.25)}

}

@media screen and (max-width:500px) {
	
	#Outcome .item a .txt_box h3{ font-size: 2em; border-left: 6px solid rgba(255, 255, 255, 0.5);}
	#Outcome .item a .txt_box .txts {font-size: 1.55em; text-align: left}
 		
 	#about .ab_box{ font-size: 1.5em; position: relative}
 
	#Links { padding: 50px 0;}
	
	#about .ab_box .max{
		position: relative;
		max-height: 70vw;
		overflow-y: scroll;
		padding-bottom: 50px;
		box-sizing: border-box;
		padding-right: 15px
	}
 
 
	.h_tits .bx span{ display: none	}
	
		.pdb {
     padding: 50px 0;
   }
	#News {
     padding-bottom: 80px;
   }
	 
}
@media screen and (max-width: 480px) {
	#Events{  
		background: url(../images/event-bg-480.webp) center no-repeat;
		background-size: cover; }
	#banner .listshow a .t_box p{ font-size:1.5em;}	
	#banner .listshow a .t_box{
		padding:0 15px;
		 }	
	#banner .listshow a .t_box  strong{
		font-size:2em;}	
	#banner .listshow a .t_box .more {
		padding: 4px 10px;
		font-size: 1.2em;
		margin-top: 13px;
	}	
	#banner .listshow a .t_box strong:after {
		width: 30px;
		bottom: -10px;
		margin-left: -15px;
	}
	#about .ab_box{ font-size: 1.4em }
	.h_tits{ margin-bottom: 15px}

  
}

@media screen and (max-width: 457px) {
	#Outcome hgroup{ position: relative}
	 #Outcome hgroup .right {margin-top: 10px;  }
	#Outcome .container.pdb{ padding-top: 0}
	#Outcome hgroup h2:after{ display: none}
	#Outcome hgroup h2 {
        font-size: 3.5em;
        margin-right: 0;
    }
	#Outcome hgroup {
        transform: translateY(-30px);
    }
	#Outcome hgroup .right {
        margin-top: -15px;
    }
}


@media screen and (max-width: 420px) {
	#about .ab_box{ font-size: 1.3em }
}
 
@media screen and (max-width: 380px) {
	hgroup .right{ margin-top: -5px}
	 .h_tits {
        font-size: 3.3em;
    }
} 
/*------------------------------------------keyframes----------------------------------------*/
.left_right1{
	    animation-name: left_right1;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    -webkit-animation: left_right1 40s infinite ease;
    -webkit-animation-fill-mode: both;
    animation: left_right1 40s infinite ease;
    animation-fill-mode: both;}

@-webkit-keyframes left_right1 {
    0% {
        background-position: left top;
    }

    50% {
        background-position: right bottom;
    }

    100% {
        background-position: left top;
    }
}

@keyframes left_right1 {
    0% {
        background-position: left top;
    }

    50% {
        background-position: right bottom;
    }

    100% {
        background-position: left top;
    }
}	
@keyframes scroll_m{
    0% { bottom:50px;}
   50% { bottom:60px;}
  100% { bottom:50px;}
}

@-webkit-keyframes scroll_m{
    0% { bottom:50px;}
   50% { bottom:60px;}
  100% { bottom:50px;}
}	
 
@media print {
 
}