#banner { position: relative; overflow: hidden; }
#banner .img >img , #banner .img .logo { position: absolute; z-index: 2; }
#banner .img >img:nth-child(1) { width: 10%; left: calc(90% / 2.5); top: 150px; -webkit-animation: triangle 1s infinite alternate ease-in-out; animation: triangle 1s infinite alternate ease-in-out; }
@keyframes triangle {
	0% { top: 150px; }
	100% { top: 160px; }
}
@-webkit-keyframes triangle {
	0% { top: 150px; }
	100% { top: 160px; }
}
#banner .img >img:nth-child(2) { height: 100%; right: 15%; bottom: 0; -webkit-animation: circular 2s infinite alternate ease-in-out; animation: circular 2s infinite alternate ease-in-out; }
@keyframes circular {
	0% { transform: rotate(0); }
	100% { transform: rotate(-30deg); }
}
@-webkit-keyframes circular {
	0% { -webkit-transform: rotate(0); }
	100% { -webkit-transform: rotate(-30deg); }
}
#banner .img .logo { width: 534px; left: 50%; top: calc((100% - 353px) / 2); }
#banner .img .logo h2 { margin-bottom: 30px; font-family: 'Noto Sans TC', sans-serif; font-weight: normal; font-size: 38px; color: #fff; }

#banner .main-slider { position: relative; margin-bottom: -6px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; z-index: 1; }
#banner .main-slider * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#banner .item { position: relative; overflow: hidden; text-align: right; }
#banner .item a.photo {background-size: cover;background-position: 50% 10%;}
#banner .item .art { padding-top: 10px; position: absolute; width: calc(50% - 20px); color: #fff; left: 50%; top: calc(100% - ((100% - 353px) / 2)); z-index: 1; }
#banner .item .art p {position: relative;font-family: "Quicksand", sans-serif, "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow";font-size: 36px;}
#banner .item .art article {height: 46px;font-family: "Julius Sans One", sans-serif, "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow";font-size: 14px;-webkit-line-clamp: 2;}
#banner .item .art p:before ,
#banner .item .art p:after {position: absolute;width: 16px;height: 16px;background: #fff;border: 1px #fff solid;display: block;top: 25px;left: -40px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);content: "";}
#banner .item .art p:before { width: 18px; height: 18px; background: none; left: -53px; }
#banner .item video , #banner .item iframe { position: absolute; width: 100%; right: 0; top: 0; }
#banner .item a.photo:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(58, 23, 82, .5);
    display: block;
    content: "";
}
@media screen and (max-width: 1280px) {
	#banner .img .logo { width: 35%; top: 22%; }
	#banner .item .art { top: 72%; }
	#banner .item .art p { font-size: 25px; }
	#banner .item .art p:before { width: 12px; height: 12px; top: 15px; left: -39px; }
	#banner .item .art p:after { width: 10px; height: 10px; top: 15px; left: -30px; }
}
@media screen and (max-width: 1024px) {
	#banner .img .logo h2 { margin-bottom: 20px; }
}
@media screen and (max-width: 980px) {
	#banner .img .logo { top: 90px; width: auto; }
	#banner .img .logo h2 { margin-bottom: 10px; }
	#banner .img .logo p { width: 273px; }
	#banner .item .art { top: 301px; }
	#banner .item .art p { font-size: 20px; }
	#banner .item .art p:before , #banner .item .art p:after { top: 11px; }
}
@media screen and (max-width: 768px) {
	#banner .img >img:nth-child(1) , #banner .item .art p:before , #banner .item .art p:after { display: none; }
	#banner .img >img:nth-child(2) { max-width: inherit; opacity: .6; left: calc((100% - 514px) / 2); right: auto; }
	#banner .item a.photo { position: relative; }
	#banner .item a.photo img { max-width: initial; height: 510px; opacity: 0; }
	#banner .item a.photo:before {position: absolute;width: 100%;height: 100%;background: rgba(58, 23, 82, .5);display: block;content: "";}
	#banner .img .logo { width: 343px; top: 150px; left: calc((100% - 343px) / 2); }
	#banner .img .logo h2 ,
	#banner .img .logo h2 .ti-container ,
	#banner .item .art p ,
	#banner .item .art article { text-align: center; }
	#banner .item .art { width: 90%; top: 351px; left: 5%; }
}
@media screen and (max-width: 515px) {
	#banner .img >img:nth-child(2) { left: auto; }
}
@media screen and (max-width: 380px) {
	#banner .img .logo { width: 90%; left: 5%; }
	#banner .img .logo h2 { font-size: 30px; }
}