@charset "utf-8";
/* CSS Document */
.top-bar {background-color: rgba(255, 255, 255, 0.95); position: fixed; top: 0px; left: 0px; width: 100%; z-index: 8888; transition: all 0.25s ease 0s;}
.top-bar:hover {background-color: rgba(255, 255, 255, 1);}
.top-barC {margin:auto; max-width:1450px; height: 85px; padding: 0 20px; font-family: 'Noto Sans TC', sans-serif; position: relative; transition: all 0.25s ease 0s;}
.logo {position: absolute; top: 50%; left: 20px; height: 44px; margin-top: -22px; line-height: 0; font-size: 0; overflow: hidden; z-index: 99; transition: all 0.25s ease 0s;}
.logo img {max-height: 100%;}
.logo:hover::before {content: ''; width: 100px; height: 400px; position: absolute; top: -200px; right: -50%; -moz-transform:rotate(-35deg); -webkit-transform:rotate(-35deg); -o-transform:rotate(-35deg); -ms-transform:rotate(-35deg); transform:rotate(-35deg); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);  -webkit-animation-name: flash-line; animation-name: flash-line; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}

@media only screen and (min-width:993px){
    .menu {position: absolute; left: 50%; top: 50%; width: 100%; -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); z-index: 55;}
	.links {position: absolute; top: 50%; right: 20px; margin-top: -11px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; font-weight: 300; z-index: 99; transition: all 0.25s ease 0s;}
    .links a:link, .links a:visited {text-decoration:none; color:#333333; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all 0.25s ease 0s;}
    .links a:active, .links a:hover {text-decoration:none; color:#7a9500; cursor:pointer; transition: all 0.5s ease 0s;}
    .links > div {position: relative; margin: 0 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
	.links > div:nth-child(1) > a::before {content: ''; background: url("../images/icon_01e.png") no-repeat center; background-size: cover; width: 24px; height: 24px; margin-right: 7px;}
	.links > div:nth-child(2) > div::before {content: ''; background: url("../images/icon_01b.png") no-repeat center; background-size: cover; width: 24px; height: 24px; margin-right: 7px;}
	.links > div:nth-child(3) {position: relative;}
	.links > div:nth-child(3) > a::before {content: ''; background: url("../images/icon_01a.png") no-repeat center; background-size: cover; width: 24px; height: 24px;}
	.links > div:nth-child(3) span {position: absolute; top: -4px; right: -14px; width: 20px; height: 20px; background-color: #7a9500; border-radius: 20px; color: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 12px;}
    .links > div:last-child {margin-left: 34px;}
	.links > div:nth-child(1) > a:hover::before, .links > div:hover:nth-child(2) > div::before, .links > div:nth-child(3) > a:hover::before {-webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; animation-name: hvr-icon-bob-float, hvr-icon-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate;}
	
	.language {position: relative; margin: 0 5px 0 15px!important;}
	.language > div {display: flex; flex-direction: row; align-items: center; justify-content: flex-end; cursor: pointer; transition: all 0.5s ease 0s;}
	.language > div:hover {color:#7a9500; transition: all 0.5s ease 0s;}
	.language > ul {position: absolute; top: 53px; right: 0px; background-color: #7a9500; width: 100%; border-radius: 0 0 10px 10px; overflow: hidden; display: none;}
	.language > ul li a:link, .language > ul li a:visited {text-decoration:none; color:#fff; padding: 10px!important; display: flex; transition: all 0.5s ease 0s;}
	.language > ul li a:active, .language > ul li a:hover {text-decoration:none; color:#fff; background-color: rgba(0, 0, 0, 0.20); cursor:pointer; transition: all 0.5s ease 0s;}
	.language > ul li a.current {background-color: rgba(0, 0, 0, 0.10);}

    .search {width: 0; height: 30px; overflow: hidden; position: absolute; top: -16px; right: 27px; background-color: #fff; transition: all 0.25s ease 0s;}
    .search_btn {position: absolute; top: -12px; right: 0px; width: 24px; height: 24px; background-color: #fff; display: block; z-index: 5;}
    .search_btn::before {content: ''; background: url("../images/icon_01d.png") no-repeat center; background-size: cover; width: 24px; height: 24px; display: block;}
    .search_btn:hover::before {content: ''; background: url("../images/icon_01c.png") no-repeat center; background-size: cover; width: 24px; height: 24px; display: block;}
    .search_pic {position: absolute; top: -12px; right: 0px; background-color: #fff; cursor: pointer; z-index: 10;}
    .search_pic::before {content: ''; background: url("../images/icon_01c.png") no-repeat center; background-size: cover; width: 24px; height: 24px; display: block;}
    .search_pic:hover::before {content: ''; background: url("../images/icon_01d.png") no-repeat center; background-size: cover; width: 24px; height: 24px; display: block;}
    .search_open {width: 200px; transition: all 0.25s ease 0s;}
    .search_btn_open {z-index: 15;}
}
@media only screen and (max-width:992px){
    .links {position: fixed; top: 40px; right: -100%; width: 100%; height: 80px; padding: 0 0 0 24px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; background-color: #78a303; z-index: 9977; transition: all 0.25s ease 0s;}
	.links::after {content: ''; background-color: rgba(255, 255, 255, 0.26); width: calc(100% - 40px); height: 1px; line-height: 0; position: absolute; left: 20px; bottom: 0;}
    .links a:link, .links a:visited {text-decoration:none; color:#fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all 0.25s ease 0s;}
    .links a:active, .links a:hover {text-decoration:none; color:#fff; cursor:pointer; transition: all 0.5s ease 0s;}
    .links > div {position: relative; margin: 0 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
	.links > div:nth-child(1) > a::before {content: ''; background: url("../images/icon_01ew.png") no-repeat center; background-size: cover; width: 24px; height: 24px; margin-right: 7px;}
	.links > div:nth-child(2) > div::before {content: ''; background: url("../images/icon_01bw.png") no-repeat center; background-size: cover; width: 24px; height: 24px; margin-right: 7px;}
	.links > div:nth-child(3) {position: fixed; top: 11px; right: 92px;}
	.links > div:nth-child(3) > a::before {content: ''; background: url("../images/icon_01a.png") no-repeat center; background-size: cover; width: 24px; height: 24px;}
	.links > div:nth-child(3) span {position: absolute; top: -4px; right: -14px; width: 20px; height: 20px; background-color: #7a9500; border-radius: 20px; color: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 12px;}
    .links > div:nth-child(4) {position: fixed; top: 22px; right: 44px;}
	.links > div:nth-child(1) > a:hover::before, .links > div:hover:nth-child(2) > div::before, .links > div:nth-child(3) > a:hover::before {-webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; animation-name: hvr-icon-bob-float, hvr-icon-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate;}
    .links_show {right: 0;}

    .language {position: relative; margin: 0 5px 0 15px!important;}
	.language > div {display: flex; flex-direction: row; align-items: center; justify-content: flex-end; color:#fff; cursor: pointer; transition: all 0.5s ease 0s;}
	.language > div:hover {color:#fff; transition: all 0.5s ease 0s;}
	.language > ul {position: absolute; top: 40px; right: 0px; background-color: #333; width: 100%; border-radius: 0 0 10px 10px; overflow: hidden; display: none; z-index: 99;}
	.language > ul li a:link, .language > ul li a:visited {text-decoration:none; color:#fff; padding: 10px!important; display: flex; transition: all 0.5s ease 0s;}
	.language > ul li a:active, .language > ul li a:hover {text-decoration:none; color:#fff; background-color: rgba(255, 255, 255, 0.20); cursor:pointer; transition: all 0.5s ease 0s;}
	.language > ul li a.current {background-color: rgba(255, 255, 255, 0.10);}

    .search {width: 0; height: 30px; overflow: hidden; position: absolute; top: -17px; right: 33px; background-color: #fff; transition: all 0.25s ease 0s;}
    .search_btn {position: absolute; top: -12px; right: 0px; width: 24px; height: 24px; /*background-color: #e7e7e7;*/ display: block; z-index: 5;}
    .search_btn::before {content: ''; background: url("../images/icon_01d.png") no-repeat center; background-size: cover; width: 24px; height: 24px; display: block;}
    .search_btn:hover::before {content: ''; background: url("../images/icon_01c.png") no-repeat center; background-size: cover; width: 24px; height: 24px; display: block;}
    .search_pic {position: absolute; top: -12px; right: 0px; /*background-color: #e7e7e7;*/ cursor: pointer; z-index: 10;}
    .search_pic::before {content: ''; background: url("../images/icon_01c.png") no-repeat center; background-size: cover; width: 24px; height: 24px; display: block;}
    .search_pic:hover::before {content: ''; background: url("../images/icon_01d.png") no-repeat center; background-size: cover; width: 24px; height: 24px; display: block;}
    .search_open {width: 200px; transition: all 0.25s ease 0s;}
    .search_btn_open {z-index: 15;}
}