@charset "UTF-8";

/*=========================================================================
*
*index-banner-wrap
*
===========================================================================*/

.index-banner-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 478px;
}

#owl-index-banner {
    float: left;
    width: 1920px;
    left: 50%;
    margin-left: -960px;
    position: absolute;
    height: 100%;
}

#owl-index-banner .item {
	display: block;
	width:100%;
	overflow: hidden;
}

.owl-inner {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: left;
    padding: 1em;
    top: 15%;
}

.owl-inner h1:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 140px;
    height: 0;
    border: #22b861 solid 1px;
}
.owl-inner h1 {
	position: relative;
    font-size: 3em;
    line-height: 1.5em;
    width: 600px;
    margin-bottom: 1em;
}
.owl-inner p {
    font-size: 2.125em;
    line-height: 1.5em;
    width: 600px;
}

/*owl-dot set*/
.owl-theme .owl-dots {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 20px;
}
.owl-theme .owl-dots .owl-dot{
    display: inline-block;  
}
.owl-theme .owl-dots .owl-dot span {
    width:15px;
    height:15px;
    margin:7px;
    display:block;
    transition:opacity 200ms ease;
    border: 2px solid #fff;
    border-radius:30px
}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{
    background:#fff;
    box-shadow:0px 0px 0px 4px rgba(100%,100%,100%,0.4);
}
/*owl-dot set end*/


@media screen and (max-width: 1250px){
    .index-banner-wrap {height:auto;}
    .owl-inner h1 {font-size: 2.5em;margin-bottom: .5em;}
    .owl-inner p {font-size: 1.5em;}
    .owl-inner h1:before {bottom: -10px;}
    #owl-index-banner {
        float: left;
        width: 100%;
        left:0%;
        margin-left: 0px;
        position:static;
    }
    #owl-index-banner .owl-inner {left:5%;} 
}
@media(max-width: 1002px) {
    .owl-inner h1 {font-size: 2em;margin-bottom: .5em; width:auto;}
    .owl-inner p {font-size: 1.2em;width:auto;}
}

@media screen and (max-width: 768px) { 
    .index-banner-wrap {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 187px;
    }
    #owl-index-banner {
        float: left;
        width: 750px;
        left: 50%;
        margin-left: -375px;
        position: absolute;
        /*padding-right: 2em;*/
    }
    #owl-index-banner .owl-inner {
        left:50%;
        max-width: 450px;
        margin-left: -20em;
    } 
    .owl-inner h1 {font-size: 1.6em;margin-bottom: .5em;}
}
@media screen and (max-width: 680px){
    #owl-index-banner .owl-inner {margin-left: -18em;}
}
@media screen and (max-width: 620px){
    #owl-index-banner .owl-inner {margin-left: -16em;}
}
@media screen and (max-width: 544px){
    #owl-index-banner .owl-inner {margin-left: -14em;}
    .owl-theme .owl-dots {bottom: 10px;}
}
@media screen and (max-width: 480px){
    #owl-index-banner .owl-inner {margin-left: -13em;max-width: 350px;}
    .owl-inner h1 {font-size: 1.4em;margin-bottom: .75em;}
    .owl-inner p {font-size: 1.1em;}
}
@media screen and (max-width: 450px){
    #owl-index-banner .owl-inner {margin-left: -11em;}
}
@media screen and (max-width: 380px){
    #owl-index-banner .owl-inner {margin-left: -10em;max-width: 300px;}
    .owl-inner h1 {font-size: 1.3em;margin-bottom: .75em;}
    .owl-inner p {font-size: 1em;}
}
@media screen and (max-width: 350px){
    #owl-index-banner .owl-inner {margin-left: -9em;max-width: 280px;}
    .owl-inner h1 {font-size: 1.2em;margin-bottom: .75em;}
}

/*=========================================================================
*
*syn-theme-wrap
*
===========================================================================*/
.syn-theme {
    overflow: hidden;
    padding: 90px 0;
}
.syn-theme li {
    float: left;
    /*text-align: center;*/
    width:calc(100% / 3);
}
.syn-theme li a {
    position: relative;
    display: block;
    /*background-color: silver;*/
}
.syn-theme li a:hover img {
    opacity: 0;
}
.syn-theme li a:before {
    content: '';
    position: absolute;
    width:80px;
    height:80px;
    border-radius: 40px;
    left:calc(50% - 55px);
    top:50px;
    opacity: 0;
    background-image: url(../../images/syn-theme-icon.svg);
    background-position: center center;
    transform: rotateZ(180deg);
}
.syn-theme li a:hover:before {
    top:20px;
    opacity: 1;
    transform: rotateZ(0deg);

    animation-name: icon-shadow;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    
    /*animation-name: 動畫名稱;
    animation-duration: 動畫作用時間;
    animation-timing-function: 動畫補間時運用的計算公式;
    animation-delay: 動畫需間隔多久後才開始;
    animation-iteration-count: 動畫作用次數;
    animation-direction: 動畫作用的方向;*/
}

@keyframes icon-shadow {    
  0% {box-shadow: 0px 0px 0px rgba(100%,100%,100%,0.5);}

  50% {box-shadow: 0px 0px 50px rgba(20%,20%,40%,0.7);}

  100% {box-shadow: 0px 0px 0px rgba(20%,20%,40%,0.5);}
}


.syn-theme li:first-child a:before {background-color: #e16a27;left:calc(50% - 40px);}
.syn-theme li:nth-child(2) a:before {background-color: #155097;}
.syn-theme li:nth-child(3) a:before {background-color: #009c42;}

.syn-theme li a figcaption {
    font-size: 0;
    position: absolute;
    width:185px;
    height:70px;
    background-repeat: no-repeat;
    background-position: left top;
    top:120px;
}
.syn-theme li a:hover figcaption {
    left:calc(50% - 93px);
}

.synferm-text {background: url(../../images/syn-ferm-text.svg);left:142px;}
.synlac-text {background: url(../../images/syn-lac-text.svg);left:190px;}
.synsea-text {background: url(../../images/syn-sea-text.svg);left:205px;}

@media(max-width: 1200px) {
    .syn-theme li a img {width:185px;}
    .syn-theme li a figcaption {
    }
    .syn-theme li a figcaption {top:110px;}
    .synferm-text {left:120px;}
    .synlac-text {left:155px;}
    .synsea-text {left:155px;}
}
@media(max-width: 960px) {
    .syn-theme {padding: 80px 0;}
    .syn-theme li a {text-align: center;}
    .syn-theme li a figcaption {
        position: static;
        display: inline-block;
        background-position: center top;
    }
    .syn-theme li a:before {top:90px;left:calc(50% - 40px);}
    .syn-theme li a:hover:before {top:50px;}
   
}
@media(max-width: 768px) {
    .syn-theme {padding: 50px 0;}
    .syn-theme li a img {width:160px;}
    .syn-theme li a figcaption {background-size: 70%;}
    .syn-theme li a figcaption.synferm-text {background-size: 77%; background-position: left 10px top;}
    .syn-theme li:first-child a:before {left:calc(50% - 50px);}
    .syn-theme li a:hover:before {top:30px;}
    }
}
@media(max-width: 544px) {
    .syn-theme {padding: 30px 0;}
    .syn-theme li a img {width:120px;}
    .syn-theme li a figcaption {background-size: 70%;width:130px;}
    .syn-theme li a figcaption.synferm-text {background-size: 77%;}
}
@media(max-width: 500px) {
    .syn-theme {padding: 30px 0;}
    .syn-theme li a img {width:100px;}
    .syn-theme li a figcaption {background-size: 80%;width:100px;}
    .syn-theme li a figcaption.synferm-text {background-size: 87%;background-position: left 0px top;}
    .syn-theme li a:hover figcaption {opacity: 0;}
}

/*=========================================================================
*
*syn-info-wrap
*
===========================================================================*/
.syn-info-wrap {padding-bottom: 70px;}
.syn-news,.syn-events,.syn-video {
    float:left;
    width:calc((100% - 48px) / 3);
    line-height: 1.5;
}
.syn-events {margin:0 24px;}
.syn-news h2,.syn-events h2,.syn-video h2 {
    color:#009c42;
    font-size: 1.75em;
    font-weight:lighter;
    margin-bottom: .5em;
    letter-spacing: 5px;
}
.syn-news-content,.syn-events-content {
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
    padding: 17px;
    border: 1px solid #eaeaea;
    box-shadow: 0px -3px 0px #009c42;
}
.syn-news-ul li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdcdc;
}
.syn-news-ul li a {
    display: block;
    padding:3px 15px;
    border-left: 3px solid #009c42;
}
.syn-news-ul li a:hover {background:#009c42;}

.syn-news-ul li a time,.syn-news-ul li a span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.syn-news-ul li a time {color:#009c42;}
.syn-news-ul li a span {color:#181818;}
.syn-news-ul li a:hover time,.syn-news-ul li a:hover span {color: #fff;}
.syn-more {text-align: center;padding: 2em 0;}
.syn-more a {
    border: 1px solid #009c42;
    padding: 15px 50px;
    font-size: 1.1em;
    color:#009c42;
}
.syn-more a:hover {
    background: #009c42;
    color: #fff;
}
.events-one {
    display: block;
    padding-bottom:23px;
    margin-bottom: 22px;
    border-bottom: 1px solid #7dc98f;
}
.events-one figure {display: block;max-height:221px;overflow: hidden;}
.events-one figure img {width:100%;transform: scale(1);}
.events-one:hover figure img {width:100%;transform: scale(1.1);}
.events-one time {
    display: block; 
    color:#009c42;
    padding: 22px 0 10px 0;
}
.events-one span {color:#181818;}
.events-one:hover span {color:#009c42;}
.syn-events-ul {margin-bottom: 10px;}
.syn-events-ul li a {
    display:block;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
}
.syn-events-ul li figure {
    float:left;
    width:52px;
    height: 52px;
    overflow: hidden;
}
.syn-events-ul li figure img {
    transform: scale(1);
    min-width: 82px;
    min-height: 52px;
    width:inherit;
    margin-left: -15px;
}
.syn-events-ul li a:hover figure img {transform: scale(1.1);}
.syn-events-text {float:left;width:calc(100% - 62px);padding-left: 10px;}
.syn-events-text time {display: block;color: #009c42;}
.syn-events-text span {
    color:#181818;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.syn-events-ul li a:hover span {color: #009c42;}
.video-one {
    padding-bottom: 20px;
    margin-bottom: 13px;
    border-bottom: 1px solid #e3e3e3;
}
.video-one iframe {
    width:100%;
    min-height: 240px;
}
.video-one p {
    color: #009c42;
    padding: 1em 0;
}

.syn-video-ul li figure {
    float:left;
    width:101px;
    height: 66px;
    overflow: hidden;
}
.syn-video-ul li a figure img {transform: scale(1);}
.syn-video-ul li a:hover figure img {transform: scale(1.1);}
.syn-video-text {float:left;width:calc(100% - 111px);padding-left: 10px;}
.syn-video-ul li a {overflow: hidden;display: block;padding: 6px 0;}
.syn-video-text p {display: block;color: #009c42;}
.syn-video-text span {
    color:#181818;
    display: block;
}
.syn-video-ul li a:hover span {color: #009c42;}

@media(max-width: 1001px) {
    .syn-news, .syn-events, .syn-video {width:100%;margin-bottom: 20px;}
    .syn-events {margin:0 0 20px 0;}
    .syn-video {margin-bottom: 0px;}
    .syn-info-wrap {padding:0px 10px 70px 10px;}
    /*共用*/
    .events-one figure,.events-one-text,.video-one iframe,.video-one-text {display: inline-block;vertical-align: top;}
    /*events-one*/
    .events-one figure {width:40%;}
    .events-one figure + .events-one-text {width:50%;margin-left: 15px;}
    /*video-one*/
    .video-one iframe {width:350px;}
    .video-one-text {width:calc(100% - 380px);margin-left: 15px;}
}
@media(max-width:768px) {
    .events-one figure,.events-one-text,.video-one iframe,.video-one-text {display: block;margin-left: 0;}
    .events-one figure,.video-one iframe {width:100%;min-height: 300px;}
    .events-one-text,.video-one-text {width:100%;}
}
@media(max-width:480px) {
    .events-one figure,.video-one iframe {min-height: 200px;}
}
@media(max-width:360px) {
    .events-one figure,.video-one iframe {min-height: 160px;}
    .syn-video-ul li figure {width:100%;min-height: 160px;}
    .syn-video-text {width:100%;padding:10px 0;}
}
/*=========================================================================
*
*Animate
*
===========================================================================*/

#owl-index-banner .owl-inner,.syn-news-ul li a,
.syn-news-ul li a:hover,.syn-more a,.events-one figure img,
.syn-events-ul li figure img,.syn-video-ul li a figure img,
.syn-theme li a img,.syn-theme li a:hover img,
.syn-theme li a figcaption,.syn-theme li a:hover figcaption,
.syn-theme li a:hover:before
 {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}