@charset "utf-8";
/*
常用語法
@media screen and (min-width:991px) {}
@media screen and (max-width:990px) {}
@media screen and (max-width:480px) {}
@media screen and (min-width:990px) and (max-width:1208px) {}
@keyframes name {
    0% { }
    100% {  }
    }
}

@-webkit-keyframes name {
    0% { }
    100% {  }
}

.bbfont {
    font-family: 微軟雅黑;
    font-weight: bold;
}
 
*/
.swiper-button-next:after, .swiper-button-prev:after{ display: none}
/** 主視覺 banner **/
#banner {
	position:relative;
	width: 100%;
	margin:0 auto;
 }
#banner .swiper-slide { overflow: hidden}
#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:45.92748%;/*原始calc(100vh - 55px)*/
  	max-height:calc(100vh - 100px);
	display:block;
	overflow: hidden;
	background:#000;
}
#banner .listshow a .img{
	position:absolute;
	width:100%;
	height:100%;
	left:0; top:0;
	z-index:0;
	background-position:center ;
	background-size:cover;
	object-fit: cover;        /* 讓圖片像背景圖一樣填滿 */
    object-position: center;  /* 置中裁切 */
	transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transition:all 12s ;
	-moz-transition:all 12s ;
	-ms-transition:all 12s ;
	-o-transition:all 12s ;
	-webkit-transition:all 12s ;
	}
#banner .listshow a .img:after{
	content:''; display:block; position:absolute; width:100%; height:100%;  background:rgba(0,0,0,0.15) ;
	left:0; top:0;}

#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,
#banner .listshow .swiper-button-prev,
#banner .listshow .swiper-button-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, #banner .listshow .swiper-button-prev {
	left: 100px;
	background:rgba(27,99,149,0.25) 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,

#banner .listshow .swiper-button-prev:hover, 
#banner .listshow .swiper-button-prev:focus,
#banner .listshow a:hover .swiper-button-prev, 
#banner .listshow a:focus .swiper-button-prev,
#banner:hover .listshow .swiper-button-prev{opacity:1;	left:10px;}
 
#banner .listshow .slick-prev:hover, 
#banner .listshow .slick-prev:focus

#banner .listshow .swiper-button-prev:hover, 
#banner .listshow .swiper-button-prev:focus {
	background:rgba(27,99,149,0.75) url(../images/prev.svg) no-repeat 50% 50%;border: 2px solid #fff; box-sizing: border-box}

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

#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

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

#banner .listshow .slick-next:hover, 
#banner .listshow .slick-next:focus

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

#banner .listshow .slick-next:hover, 
#banner .listshow .slick-next:focus

#banner .listshow .swiper-button-next:hover, 
#banner .listshow .swiper-button-next:focus{
	background:rgba(27,99,149,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

#banner .listshow .swiper-button-prev:hover, 
#banner .listshow .swiper-button-prev:focus,
#banner .listshow .swiper-button-next:hover, 
#banner .listshow .swiper-button-next:focus{	
	background-color:rgba(27,99,149,0.75);}

#banner .listshow .swiper-toggle {
    position: absolute;
    left: 20px;
    bottom: 50px;
    z-index: 2;
	border: 0;
	padding: 10px 15px;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	border-radius: 50%;
	text-indent: -999em;
	overflow: hidden;
	width: 44px;
	height: 44px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
	background-image: url(../images/ico_pause.svg);
	cursor: pointer
		
 }
#banner .listshow .swiper-toggle.on {background-image: url(../images/ico_play.svg)}

#banner .listshow .swiper-toggle:hover, #banner .listshow .swiper-toggle:focus{ background-color: #000}

#banner .listshow .swiper-toggle:hover, #banner .listshow .swiper-toggle:focus{
	background-color: #000
}

#banner .listshow  .swiper-toggle 


#banner .swiper-slide{ overflow: hidden}


.swiper-slide{ text-align: left; font-size: 100%}

@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{ margin-top: 55px}	
#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 {
		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; margin-top: 40px
	} 
}

#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: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; border: 1px solid #32872c; position: absolute; background-color: #fff;
}

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

.slick-slider .slick-prev{ left: auto; top: -57px; right:110px }
.slick-slider .slick-next{	top: -57px; right: 60px;}



.slick-slider .slick-prev:before, .slick-slider .slick-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);
}
.slick-slider .slick-prev:before{ left: calc(50% - 3px);}

.slick-slider .slick-prev:hover:before, .slick-slider .slick-next:hover:before,
.slick-slider .slick-prev:focus:before, .slick-slider .slick-next:focus:before{border-top: 1px solid #fff; border-right: 1px solid #fff;}

.slick-slider .slick-prev:before{ transform:rotate(-135deg)}
.slick-slider .slick-next:before{ transform:rotate(45deg)}


/*main*/
#main{ }

.more_plus, .h_tits .r_btns a, .h_tits .r_btns button, .h_tits .r_btns .btn{
	/*position: absolute;
	right: 0;
	bottom: 0;*/
  	width: 44px;
	height: 44px;
	border: 1px solid #32872c;
	box-sizing: border-box;
	font-size: 1rem;
	overflow: hidden;
	display: block;
	border-radius: 50%;
	background-color: #fff;
	text-indent: -999em;
	overflow: hidden;
	margin-left: 5px;
	position: relative;
	
 }

.h_tits .more_plus:hover, .h_tits .more_plus:focus{
	background-color: #32872c
}

.h_tits .r_btns { margin-bottom: 15px}
.h_tits .r_btns .btn{
	margin: 0;
	margin-top: 0;
	margin-left: 5px;
	top: auto;
	left: auto;
	right: auto;
	cursor: pointer
}

.h_tits .r_btns .btn:hover,.h_tits .r_btns .btn:focus{background-color: #32872c;}
.h_tits .r_btns .btn.prev:hover:before, .h_tits .r_btns .btn.prev:focus:before,
.h_tits .r_btns .btn.next:hover:before, .h_tits .r_btns .btn.next:focus:before{border-top: 1px solid #fff; border-right: 1px solid #fff;}


.more_plus:before, .more_plus:after{
	content: "";
	display: block;
	position: absolute;
	background-color: #32872c;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2
}
.more_plus:before{width: 20px; height: 1px;}
.more_plus:after{width: 1px; height: 20px;}

.more_plus:hover, .more_plus:focus{background-color: #32872c;}

.more_plus:hover:before, .more_plus:focus:before, 
.more_plus:hover:after, .more_plus:focus:after{background-color:#fff}

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

.h_tits .r_btns .swiper-toggle{ background: #32872c url(../images/ico_pause.svg) center no-repeat; background-size: 60% !important}
.h_tits .r_btns .swiper-toggle.on{ background: #32872c url(../images/ico_play.svg) center no-repeat; background-size: 60% !important  }
.h_tits .r_btns .swiper-toggle:hover, .h_tits .r_btns .swiper-toggle:focus{ background-color: #666 !important; border: 1px solid #666}
.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-weight: bold;
	font-size:6em;
	color: #5aa654;
	display: block;
	margin-bottom: 35px;
	position: relative
 }
.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}




/*GREENS 裝飾*/
.g_img{position: absolute; width: 397px; height: 479px; background: url(../images/green-right.svg) center no-repeat; background-size: contain; z-index: 2}
#main .container{ position: relative; z-index: 3}
#about .g_img{	right: -190px;	top:30%;  }
#posts .g_img{ left: -190px; top: 64%; transform: rotate(70deg)}
#video .g_img{	right: -230px;	top:60%;  }


/*about*/
#about{ padding: 30px 0 7vw 0; position: relative}
#about .ab_box{ padding-left: 30px; border-left: 5px solid #cee5cc; position: relative; margin-left: 10px; line-height: 1.6; font-family: arial; font-size: 1.7em}
#about .ab_box p{ margin-bottom: 1em;}
#about .ab_box p:last-child{ margin-bottom: 0}
#about .ab_box:after{ content: ""; display: block; width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box; border: 5px solid #cee5cc; position: absolute; bottom: 0; left:0; transform: translate(calc(-50% - 2.5px), calc(50% + 3px)); }
 

 
/* esci_ksp */
#esci_ksp { position: relative; background: #f2fae4; padding:40px 0 120px 0 }
#esci_ksp .container { z-index: 4}
#esci_ksp:before, #esci_ksp:after{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 4vw;
	background-repeat: no-repeat;
	background-size: 100% 100%
} 

#esci_ksp:before { background-image: url(../images/esci-top-musk.png);left: 0; top: 1px; transform: translateY(-100%)}

 



#esci_ksp ul.q_link{ display: flex; flex-wrap: wrap; list-style: none; justify-content: space-between; }
#esci_ksp ul.q_link > li{ position: relative; z-index: 4}

#esci_ksp ul.q_link > li > ul{ 
	list-style: none; visibility: hidden; opacity: 0; width: 215px; position: absolute; 
	left: 50%; top: calc(100% + 40px); transform: translate(-50%,0); z-index: 5; background: #32872c; box-sizing: border-box;
	padding: 10px; border-radius: 15px; transition: all 0.5s; box-shadow: 3px 5px 5px rgba(0,0,0,0.4)
}

#esci_ksp ul.q_link > li:nth-child(5) > ul{ display: none}


	/*三角形圖案*/
	#esci_ksp ul.q_link > li > ul:before{
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 10px 20px 10px;
		border-color: transparent transparent #32872c transparent;
		position: absolute;
		left: calc(50% - 10px); top: -19px;
	}


#esci_ksp ul.q_link > li > ul > li{	display: block; border-bottom: 1px solid rgba(0,0,0,0.25);}
#esci_ksp ul.q_link > li > ul > li:last-child{	border-bottom: 0px ;}
#esci_ksp ul.q_link > li > ul > li > a{	display: block; padding:10px; color: #fff; font-size: 1.6em; line-height: 1.5 }
#esci_ksp ul.q_link > li > ul > li > a:hover, #esci_ksp ul.q_link > li > ul > li > a:focus{
	background-color: rgba(0,0,0,0.2); color: #FFED00
}


	/*顯示設定*/
	#esci_ksp ul.q_link > li:hover ul, #esci_ksp ul.q_link > li > ul.focu-show{ visibility: visible; opacity: 1; text-align: left;top: calc(100% + 20px);}
 	#esci_ksp ul.q_link > li{ display: block; width: 20%; padding: 0 5px; box-sizing: border-box}
	#esci_ksp ul.q_link > li > a{ 
		display: block; color: #000; font-size: 2.4em;  text-align: center; font-weight: normal;font-family: arial; line-height: 1.5;  
 	}
	#esci_ksp ul.q_link > li > a span{ display: inline-block}
	#esci_ksp ul.q_link > li > a:hover, #esci_ksp ul.q_link > li > a:focus, #esci_ksp ul.q_link > li > a.open, #esci_ksp ul.q_link > li:hover > a{ color:#1b6395; font-weight: bold;}
	

	#esci_ksp ul.q_link > li > a > i{ 
	display: inline-block; width:207px; height:207px; box-sizing: border-box; 
	border-radius: 50%; margin-bottom: 18px; border: 4.5px solid #8cc63f; 
	background-position: center; background-size: cover !important; position: relative; overflow: hidden;}

	#esci_ksp ul.q_link > li > a:hover > i, #esci_ksp ul.q_link > li > a:focus > i, #esci_ksp ul.q_link > li > a.open > i, #esci_ksp ul.q_link > li:hover > a > i{ border: 4.5px solid #1b6395}
	/*icon*/
	#esci_ksp ul.q_link > li > a > i:before{
		content: ""; display: block; width: 100%; height: 100%; position: absolute; background-size: contain; background-repeat: no-repeat;
		opacity: 0; transition: 0.5s; left: 0; top: 0; background-color: rgba(0,0,0,0.5)
	}

	#esci_ksp ul.q_link > li > a > i.i_1:before{ background-image: url(../images/KSP-icon-1.svg)}
	#esci_ksp ul.q_link > li > a > i.i_2:before{ background-image: url(../images/KSP-icon-2.svg)}
	#esci_ksp ul.q_link > li > a > i.i_3:before{ background-image: url(../images/KSP-icon-3.svg)}
	#esci_ksp ul.q_link > li > a > i.i_4:before{ background-image: url(../images/KSP-icon-4.svg)}
	#esci_ksp ul.q_link > li > a > i.i_5:before{ background-image: url(../images/KSP-icon-5.svg)}

	#esci_ksp ul.q_link > li > a:hover > i:before, #esci_ksp ul.q_link > li > a:focus > i:before, #esci_ksp ul.q_link > li > a.open > i:before, #esci_ksp ul.q_link > li:hover > a > i:before{ opacity: 1;}


	#esci_ksp ul.q_link > li > a > i.i_1{ background: url(../images/Qicon-bg-1.jpg)}
	#esci_ksp ul.q_link > li > a > i.i_2{ background: url(../images/Qicon-bg-2.jpg)}
	#esci_ksp ul.q_link > li > a > i.i_3{ background: url(../images/Qicon-bg-3.jpg)}
	#esci_ksp ul.q_link > li > a > i.i_4{ background: url(../images/Qicon-bg-4.jpg)}
	#esci_ksp ul.q_link > li > a > i.i_5{ background: url(../images/Qicon-bg-5.jpg)}

/*award*/
#award{ padding: 30px 0 250px 0; position: relative}
#award:before{ content: ""; display: block; width: 100%; height: 0; padding-bottom: 4vw; position: absolute; left: 0; top: 1px; transform: translateY(-100%); background: url(../images/copt-top-w.png) center bottom no-repeat; background-size: 100% 100%}
#award:after{content: ""; display: block; width: 100%; height: 0; padding-bottom: 300px; position: absolute; left: 0; bottom: -1px;  background: url(../images/esci-bottom.png) center bottom no-repeat; background-size: auto 100%}

#award #award_show{ width: calc(100% + 20px); margin-left: -10px; margin-right: -10px}
#award #award_show .item{
	display: block;
	padding:0 10px;
	box-sizing: border-box;
}

#award #award_show .item a{	display: block; line-height: 1.5}
#award #award_show .item a p i{ display: inline-block; margin: 0 10px; font-style: normal}
#award #award_show .item a .zoomBox{ height: 0; padding-bottom: 62.3%; border-radius: 10px;}
#award #award_show .item a .zoomBox:after{
	content: ""; display: block; width: 100%; height: 100%; position: absolute;
	left: 0; top: 0; z-index: 0; background: #000; opacity: 0; transition: all 0.4s
}
#award #award_show .item a:hover .zoomBox:after, #award #award_show .item a:focus .zoomBox:after{ opacity: 1}

#award #award_show .item a:hover .zoomBox, #award #award_show .item a:focus .zoomBox{ background-color: #000}
#award #award_show .item a .zoom-pic{ transition: all 0.4s; z-index: 1}
#award #award_show .item a:hover .zoom-pic, #award #award_show .item a:focus .zoom-pic{  opacity: 0.5}
#award #award_show .item a strong{ color: #000; font-size: 2em; font-weight: normal; display: block; margin: 10px 0;}
#award #award_show .item a:hover strong, #award #award_show .item a:focus strong{}
#award #award_show .item a p{ color:#ccc; font-size: 1.7em }
#award #award_show .item a p span{ color: #666; padding-right: 8px; margin-right: 8px; border-right: 1px solid #ccc;}
#award #award_show .item a p span:last-child{ margin-right: 0; padding-right: 0; border-right: 0}

.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%;}



/*RECENT POSTS*/

#posts{
	padding: 80px 0 190px 0;
	background: #d3eda6
}

#posts #posts_show{ width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;}
#posts #posts_show .item { padding: 0 15px; box-sizing: border-box;}

#posts #posts_show .item a{ display: block; color: #000; border-radius: 15px; background-color: #fff; overflow: hidden}


#posts #posts_show .item a .zoomBox{ padding-bottom: 60.38%; }
#posts #posts_show .item a:hover .zoomBox, #posts #posts_show .item a:focus .zoomBox{ background: #000}
#posts #posts_show .item a .zoomBox:after{ 
	content: ""; display: block; width: 100%; height: 60px; position: absolute; left: 0; bottom: 0;
 	background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);  
}

#posts #posts_show .item a .zoomBox:before, #award #award_show .item a .zoomBox:before{
	content: ""; display: block; width: 90px; height: 90px; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%);
	background:rgba(0,0,0,0.5) url(../images/search/header_search.svg) center no-repeat; background-size: contain; opacity: 0; z-index: 2; transition: all 0.4s
}

#award #award_show .item a .zoomBox:before{width:60px; height: 60px; }

#posts #posts_show .item a:hover .zoomBox:before, #posts #posts_show .item a:focus .zoomBox:before,
#award #award_show .item a:hover .zoomBox:before, #award #award_show .item a:focus .zoomBox:before{ opacity: 1}

#posts #posts_show .item a:hover .zoomBox .zoom-pic, #posts #posts_show .item a:focus .zoomBox .zoom-pic{ opacity: 0.5}

#posts #posts_show .item a .zoomBox time, #video #video_show .item a .zoomBox time{ 
	display: block; position: absolute; left: 30px; bottom: 15px; color: #fff; 
	font-size:1.4em; padding:5px 10px; border-radius: 30px; background: rgba(0,0,0,0.5);
	z-index: 1
}

#video #video_show .item a .zoomBox time{ left: 10px; bottom: 10px}

#posts #posts_show .item a .txt_box{ box-sizing: border-box; padding: 30px;}
#posts #posts_show .item a .txt_box strong{ display: block; font-size: 2.4em; line-height: 1.33; color: #1b6395; margin-bottom: 20px}
#posts #posts_show .item a:hover .txt_box strong, #posts #posts_show .item a:focus .txt_box strong{ color:#5aa654}
#posts #posts_show .item a .txt_box p{ display: block; font-size:1.7em; color: #666; line-height: 1.5; }
#posts #posts_show  .slick-next{ right:65px;}
#posts #posts_show  .slick-prev{ right:115px;}


/*VIDEOS*/
#video{ background: #fff; padding: 60px 0; position: relative; margin-bottom: 90px}
#video:before, #video:after{
	content: ""; display: block; width: 100%; height: 4vw; background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
	position: absolute; left: 0; z-index: 1;
	 
}
 
#video:before{ background-image: url(../images/vd-top-w.png); top: 1px; transform: translateY(-100%)}
#video:after{ background-image: url(../images/vd-bottom-w.png); bottom: 1px; transform: translateY(100%); display: none}
#video #video_show { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px}
#video #video_show .item { box-sizing: border-box; padding:0 10px;}
#video #video_show .item a .zoomBox{ padding-bottom: 54.5%; border-radius: 15px;margin-bottom: 15px;}
#video #video_show .item a strong{ font-size: 2em; color: #4d4d4d; line-height: 1.33}


/* Links AD */
#Links{ background-color:#f2f2f2; position:relative; padding:120px 0; box-sizing:border-box; padding-bottom: 140px } 

#ad_show{ width:calc(100% + 12px); margin-left:-6px; position: relative; z-index:3; }

#ad_show .item { padding: 0}
#ad_show a{ display:block; padding:0px; box-sizing:border-box; text-align:center; border-radius: 50px;  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}
	#video #video_show .item a strong {font-size: 1.7em;}
}

@media screen and (max-width: 1190px) {
	#esci_ksp ul.q_link > li > a > i {width: 90%; height: 0; padding-bottom: calc(90% - 9px)}
	#esci_ksp ul.q_link > li > a{ font-size: 2em}
	#award {padding: 30px 0 170px 0;}
	#award:after { padding-bottom: 210px;}
	#posts{ padding: 40px 0 110px 0; }
	#esci_ksp ul.q_link > li > a > i{ margin-bottom: 10px}
}

@media screen and (max-width: 1000px) {
	#posts #posts_show .item a .zoomBox:before{ width:70px; height: 70px;}
	.h_tits{ font-size: 4em}
	#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} 
 	#esci_ksp {padding: 40px 0 80px 0;}
	#esci_ksp ul.q_link > li > a {font-size: 1.7em; }
	
	#award #award_show .item a strong, #video #video_show .item a strong {font-size: 1.6em;}
	#award #award_show .item a p {  font-size: 1.35em ;}
	#posts #posts_show .item a .txt_box strong{ font-size: 2em}
	#posts #posts_show .item a .txt_box strong{ font-size: 1.5em	}
	.g_img{ display: none}
	#banner .scroll{ display:none !important}
	
	#video {  margin-bottom: 50px;}
}
@media screen and (max-width: 768px) {
	#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;
	 }
	#esci_ksp ul.q_link{ justify-content: center;}
	#esci_ksp ul.q_link > li{ width: 33.33%; margin-bottom: 25px}
	#esci_ksp ul.q_link > li:nth-child(4), #esci_ksp ul.q_link > li:nth-child(5){z-index: 3}
	#esci_ksp ul.q_link > li > ul{ width: 180px}
	#esci_ksp ul.q_link > li > ul > li > a{ font-size:1.4em }
	.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;}
	
	#posts #posts_show .slick-next {right: 60px;}
	#posts #posts_show .slick-prev {right: 105px;}
	
	#Links .slick-slider .slick-next {right: 0;}
	#Links .slick-slider .slick-prev, #video_show .slick-slider .slick-prev {right: 45px;}
	
	#posts #posts_show .item a .txt_box strong{ font-size: 1.8em}
	#posts #posts_show .item a .txt_box p{ font-size: 1.4em	}
	#award:after{ padding-bottom: 140px}
	#award {padding: 30px 0 130px 0;}
	.h_more_btn a{ line-height: 40px; font-size: 1.7em}
	.h_more_btn a:agter{ width: 20px; height: 20px; right: 10px}
	
}
@media screen and (max-width: 700px) {
	.h_tits{ font-size: 3em}
	#about .ab_box{ font-size: 1.5em }
	#about {padding: 30px 0 12vw 0 }
	#posts #posts_show .item a .txt_box { padding: 20px;}
	#posts #posts_show .item a .zoomBox time,  #video #video_show .item a .zoomBox time{ left:20px; font-size: 1.3em;}
}
 

@media screen and (max-width: 650px) {
	#esci_ksp ul.q_link > li{ width: 50%; margin-bottom: 20px}
	#esci_ksp ul.q_link > li:nth-child(5){ z-index: 2}
	#esci_ksp ul.q_link > li:nth-child(5) > ul { width: 260px}
 	#esci_ksp ul.q_link > li:nth-child(1), #esci_ksp ul.q_link > li:nth-child(2){ z-index: 5}
	.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}
	#posts #posts_show .item a .zoomBox:before, #award #award_show .item a .zoomBox:before{ width:50px; height: 50px;}
	.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;}
	#posts {padding: 40px 0 80px 0;}
	
	.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: 2.5em}
	#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) {
 		
 	#about .ab_box{ font-size: 1.5em; position: relative}
	#award:after { padding-bottom: 90px;}
	#award {padding: 30px 0 80px 0;}
	#video { padding: 50px 0;}
	#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
	}
	#about .ab_box:before{
		content: "";
		display: block;
		position: absolute;
		left: 15px;
		bottom: -2px;
  		z-index: 2;
		width: calc(100% - 30px);
		height: 80px;
		background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
 	}
	
	.h_tits .bx span{ display: none	}
	 
}
@media screen and (max-width: 480px) {
	#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}
	
	#video {  margin-bottom: 20px;}

 
}
@media screen and (max-width: 420px) {
	#about .ab_box{ font-size: 1.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 {
 
}