/* animate.css 修正 */

@keyframes rotateIn {
    0% {
        transform: rotate(200deg);
        opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}


.title_people{float: left;width: 500px;height: 650px; background: url(../images/people.png)  no-repeat bottom left;position: relative;background-size: contain;}
.title_hand{position: absolute;right:40px;top:225px;transform-origin:left bottom; animation: hand 1s infinite ease-in alternate;}
.title_hand img{width: 220px;}



@keyframes hand {
    0% {
        transform: rotate(10deg);
   
    }
    100% {
        transform: none;
     
    }
}

/* Page C單張圖片輪播 */
.c_card{background-color: #ffffff;box-shadow:1px 1px 8px #dbdbdb;border-radius: 20px;margin: 30px auto 10px;width: 95%;;}
.c_card a{color:rgb(223, 126, 0);}
.c_card a:hover{color:rgb(255, 145, 0);}
.c_text{padding: 10px 10px 30px;}

.card_c_photo{
    position: relative;
    width: 100%;
    height: 300PX;
    overflow: hidden;
    margin-bottom: 20px;
 
}

.card_c_photo2{
    position: relative;
    width: 100%;
    height: 300PX;
    overflow: hidden;
    margin-bottom: 20px;
 

}

.card_c_photo img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    animation: round 40s linear infinite;
}
.card_c_photo2 img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    animation: round2 10s linear infinite;
}

@keyframes round {
    2.5% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    12.5% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    15% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}

@keyframes round2 {
    10% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    50% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    60% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
/* 

.card_c_photo img:nth-child(8) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}
.card_c_photo img:nth-child(7) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

.card_c_photo img:nth-child(6) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
}

.card_c_photo img:nth-child(5) {
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
}

.card_c_photo img:nth-child(4) {
    -webkit-animation-delay: 20s;
            animation-delay: 20s;
}

.card_c_photo img:nth-child(3) {
    -webkit-animation-delay: 25s;
            animation-delay: 25s;
}

.card_c_photo img:nth-child(2) {
    -webkit-animation-delay: 30s;
            animation-delay: 30s;
}

.card_c_photo img:nth-child(1) {
    -webkit-animation-delay: 35s;
            animation-delay: 35s;
} */

.card_c_photo2 img:nth-child(2) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.card_c_photo2 img:nth-child(1) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}











/* RWD Setting */

@media (max-width:991px) {
    .title_people{width: 350PX;}
    .title_hand{right:30px;top:360px;}
    .title_hand img{width:150px;}
    .card_c_photo{ height:200PX; }
    .card_c_photo2{ height: 200PX; }

}



@media (max-width: 767px) {
    .title_people{display: none;}
    .card_c_photo{ height:200PX; }
    .card_c_photo2{ height: 200PX; }

}

@media (max-width: 575px) {

    
}






/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */


/* 主視覺動畫






.people{
}







.cir1 {
    background-color: #1E4471;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    position: absolute;
    animation: cir1 15s infinite ease-in;
}

.cir2 {
    background-color: #1E4471;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    position: absolute;
    animation: cir2 10s infinite ease-in;
}

.cir3 {
    background-color: #1E4471;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    position: absolute;
    animation: cir3 10s infinite ease-in;
}

@keyframes cir1 {
    0% {
        top: 0;
        left: -10px;
    }

    25% {
        top: 10px;
        left:10px;
    }

    50% {
        top: 0;
        left: -10px;
    }

    75% {
        top: 10px;
        left: 10px;
    }

    100% {
        top: 0;
        left: -10px;
    }
}


@keyframes cir2 {
    0% {
        bottom: 60px;
        left: 10px;
    }

    25% {
        bottom: 40px;
        left: -10px;
    }

    50% {
        bottom: 60px;
        left: 10px;
    }

    75% {
        bottom: 40px;
        left: -10px;
    }

    100% {
        bottom: 60px;
        left: 10px;
    }
}

@keyframes cir3 {
    0% {
        bottom: 80px;
        right: -60px;

    }

    25% {
        bottom: 100px;
        right: -40px;
    }

    50% {
        bottom: 80px;
        right: -60px;
    }

    75% {
        bottom: 100px;
        right: -40px;
    }

    100% {
        bottom: 80px;
        right: -60px;
    }
}
 */


/* RWD Setting */


/* 
@media (max-width:991px) {

    .cir1 {
        width: 60px;
        height: 60px;
    }
    .cir2 {
        width: 40px;
        height: 40px;
    }
    .cir3 {
        width: 60px;
        height: 60px;
    }

}

@media (max-width: 767px) {
    
    .cir1 {
        width: 45px;
        height: 45px;
    }
    .cir2 {
        width: 30px;
        height: 30px;
    }
    .cir3 {
        width: 50px;
        height: 50px;
    }

    
@keyframes cir1 {
    0% {
        top: 0;
        left: -20px;
    }

    25% {
        top: 10px;
        left:0px;
    }

    50% {
        top: 0;
        left: -20px;
    }

    75% {
        top: 10px;
        left: 0px;
    }

    100% {
        top: 0;
        left: -20px;
    }
}


@keyframes cir2 {
    0% {
        bottom: 30px;
        left: 10px;
    }

    25% {
        bottom: 10px;
        left: -10px;
    }

    50% {
        bottom: 30px;
        left: 10px;
    }

    75% {
        bottom: 10px;
        left: -10px;
    }

    100% {
        bottom: 30px;
        left: 10px;
    }
}

@keyframes cir3 {
    0% {
        bottom: 40px;
        right: -50px;

    }

    25% {
        bottom: 60px;
        right: -30px;
    }

    50% {
        bottom: 40px;
        right: -50px;
    }

    75% {
        bottom: 60px;
        right: -30px;
    }

    100% {
        bottom: 40px;
        right: -50px;
    }
}

}

@media (max-width: 575px) {

    .cir1 {
        width: 40px;
        height: 40px;
    }
    .cir2 {
        width: 30px;
        height: 30px;
    }
    .cir3 {
        width: 50px;
        height: 50px;
    }

    @keyframes cir1 {
        0% {
            top: 0px;
            left: 40px;
        }
    
        25% {
            top: 20px;
            left:60px;
        }
    
        50% {
            top: 0px;
            left: 40px;
        }
    
        75% {
            top: 20px;
            left: 60px;
        }
    
        100% {
            top: 0px;
            left: 40px;
        }
    }
    
    
    @keyframes cir2 {
        0% {
            bottom: 20px;
            left: 50px;
        }
    
        25% {
            bottom: 0px;
            left: 30px;
        }
    
        50% {
            bottom: 20px;
            left: 50px;
        }
    
        75% {
            bottom: 0px;
            left: 30px;
        }
    
        100% {
            bottom: 20px;
            left: 50px;
        }
    }
    
    @keyframes cir3 {
        0% {
            bottom: 30px;
            right: 20px;
    
        }
    
        25% {
            bottom: 50px;
            right: 40px;
        }
    
        50% {
            bottom: 30px;
            right: 20px;
        }
    
        75% {
            bottom: 50px;
            right: 40px;
        }
    
        100% {
            bottom: 30px;
            right: 20px;
        }
    }

} */