body{
    background-color: #f9f9f9;
}
#life{
    display: block;
    width: 100%;
    position: relative;
}
/*#life .headtop{
    display: inline-block;
    width: 100%;
    position: relative;
    text-align: center;
    margin-top: 37vh;
    margin-bottom: 70px;
}
#life .headtop h2{
    color: #9ed0e6;
    font-size: 60px;
    font-family: "AvantGardeExtLitITCTT",微軟正黑體,Myriad Pro,Open Sans,Myriad,Aria, sans-serif;
    display: inline-block;
    letter-spacing: 20px;
    font-weight: 100;
    width: 100%;
    padding: 0 80px;
    margin-bottom: 32px;
    text-shadow: 1px 1px 1px rgba(158, 208, 230, 0.56);
    position: relative;
    z-index: 5;opacity: 0;
}
#life .headtop h1{
    font-size: 20px;
    display: inline-block;
    position: relative;
    letter-spacing: 5px;
    z-index: 5;opacity: 0;
    padding-bottom: 18px;
}
#life .headtop h1::after{
    content: '';
    position: absolute;
    background-color: #9ed0e6;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 50%;
    margin-left: -0;
    -webkit-transition:all .8s ease 1s;
    -moz-transition:all .8s ease 1s;
    -o-transition:all .8s ease 1s;
    -ms-transition:all .8s ease 1s;
    transition:all .8s ease 1s;
}
#life .headtop h1.active::after{
    margin-left: -25px;
    width: 50px;
}*/
#life .bg{
    position: absolute;
    width: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    height: 620px;
    top: 0;
    opacity: 0;
    -webkit-transform:translateY(-50px);
    -moz-transform:translateY(-50px);
    -o-transform:translateY(-50px);
    transform:translateY(-50px);
    -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -o-transition:all 1.5s ease;
    -ms-transition:all 1.5s ease;
    transition:all 1.5s ease;
}
#life .bg.active{
    opacity: 1;
        -webkit-transform:translateY(-0);
    -moz-transform:translateY(-0);
    -o-transform:translateY(-0);
    transform:translateY(-0);
}
#life .bg img{
    width: 100%;opacity: 0;
}
.fancybox-skin{
    background-color: #ffffff;
}

.close_album{
    width: 83px;
    opacity: .7;
    height: 83px;
    -webkit-transform: translateY(-0%);
    -moz-transform: translateY(-0%);
    -o-transform: translateY(-0%);
    transform: translateY(-0%);
}
.fancybox-outer{
    opacity: 0;
}

.close_video,.close_album{
background-image: url(../images/close.png);
    background-color: #a2cee1;
    position: absolute;
    width: 80px;
    height: 80px;
    right: 0;
    top: 0;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition:all .8s ease .5s,opacity .5s ease;
    -moz-transition:all .8s ease .5s,opacity .5s ease;
    -o-transition:all .8s ease .5s,opacity .5s ease;
    -ms-transition:all .8s ease .5s,opacity .5s ease;
    transition:all .8s ease .5s,opacity .5s ease;
}

.close_album{
    width: 83px;
    opacity: .7;
    height: 83px;
    -webkit-transform: translateY(-0%);
    -moz-transform: translateY(-0%);
    -o-transform: translateY(-0%);
    transform: translateY(-0%);
}

/*life_show*/
#life_show{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 940px;
    margin: 45px auto;
    padding: 53px;
    opacity: 0;
    background-color: rgba(249, 249, 249, 0.75);
}
#life_show #life_block{
    display: block;
    width: 100%;
    position: relative;
}
#life_show #life_block::after{
    content: '';
    display: block;
    clear: both;
}
#life_show #life_block .life_box{
    display: block;
    float: left;
    width: 100%;opacity: 0;
    position: relative;
    margin-bottom: 17px;
    border: 1px solid #6cc7bf;
    background-color: #f9f9f9;
}
#life_show #life_block .life_box::after{
    content: '';
    display: block;
    clear: both;
}
#life_show #life_block .life_box .imgs{
        float: left;
    width: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;z-index: 1;
}
#life_show #life_block .life_box .imgs img{
    max-width: 100%;
    opacity: 0;
}
#life_show #life_block .life_box .text{
        font-size: 14px;
    color: black;
    line-height: 22px;
    width: 50%;
    padding: 56px;
    height: 100%;
    position: absolute;z-index: 1;
    right: 0;
}
#life_show #life_block .life_box .text .name{
    display: block;
    position: relative;
    padding-top: 25px;
}
#life_show #life_block .life_box .text .name::before{
    content: '';
    display: block;
    position: absolute;
    background-color: black;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
}
#life_show #life_block .life_box .text .date{
        position: absolute;
    bottom: 50px;
    color: #818181;
    font-size: 12px;
    padding-top: 10px;

}
#life_show #life_block .life_box .text .date span{

}
#life_show #life_block .life_box .text .date::before{
content: '';
    display: block;
    background-color: #6cc7bf;
    width: 30px;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
}
#life_show #life_block .life_box .hover{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    left: 0;
    top: 0;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    -ms-transition: all .8s ease;
    transition: all .8s ease;
    opacity: 0;
}
#life_show #life_block .life_box:hover .hover{
    opacity: 1;
}
#life_show #life_block .life_box .hover::before{
    content: '';
    background: rgb(122,186,214);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left, rgba(122,186,214,1) 0%, rgba(158,206,202,1) 100%);
    background: -webkit-linear-gradient(left, rgba(122,186,214,1) 0%,rgba(158,206,202,1) 100%);
    background: linear-gradient(to right, rgba(122,186,214,1) 0%,rgba(158,206,202,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abad6', endColorstr='#9ececa',GradientType=1 );
        position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
     opacity: .92;
}

#life_show #life_block .life_box:hover .hover::before{

}

#life_block .text .memo{
    margin-top:20px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 21px;
    opacity: .7;
}

#life_show #life_block .life_box .hover .more{
    font-size: 20px;
    color: white;
    position: absolute;
    font-weight: bold;
    letter-spacing: 2px;
    left: 50%;
    top: 50%;
    margin-top: -12px;
    margin-left: -54px;
    width: 100px;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    height: 30px;
}
#life_show #life_block .life_box .hover .more b{
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: -25px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
#life_show #life_block .life_box:hover .hover .more b{
    -webkit-transition: all 1.2s ease .5s;
    -moz-transition: all 1.2s ease .5s;
    -o-transition: all 1.2s ease .5s;
    -ms-transition: all 1.2s ease .5s;
    transition: all 1.2s ease .5s;
    bottom: -0;
}
#life_show #life_block .life_box .hover .d{
    font-size: 12px;
    color: white;
    position: absolute;
    font-weight: bold;
    letter-spacing: 2px;
    left: 50%;
    margin-top: -12px;
    margin-left: -54px;
    width: 100px;
    text-align: center;
    bottom: 5%;
    opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
#life_show #life_block .life_box:hover .hover .d{
    opacity: 1;
    bottom: 10%;
    -webkit-transition: all 1.2s ease .5s;
    -moz-transition: all 1.2s ease .5s;
    -o-transition: all 1.2s ease .5s;
    -ms-transition: all 1.2s ease .5s;
    transition: all 1.2s ease .5s;
}
#life_show #life_block .life_box svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -72px;    z-index: 2;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
#life_show #life_block .life_box svg circle {
    stroke-dashoffset: 2000;    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    stroke-width: 2;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

#life_show #life_block .life_box:hover svg circle {
    stroke-dashoffset: 0;
        -webkit-transition: all 1.2s ease .5s;
    -moz-transition: all 1.2s ease .5s;
    -o-transition: all 1.2s ease .5s;
    -ms-transition: all 1.2s ease .5s;
    transition: all 1.2s ease .5s;
}








@media only screen and (min-width: 1025px) {
.close_album:hover{
    opacity: 1;
}




}




@media only screen and (max-width: 1024px) {

/*#life .headtop h2{
    font-size: 60px;
    letter-spacing: 10px;
}*/
#life_show{
width: 90%;
    margin-top: 0;
    padding: 40px;
}

#life_show #life_block .life_box .hover{
    display: none;
}
#life_show #life_block .life_box .text{
    padding: 38px;
}
#life_show #life_block .life_box .text .date{
    bottom: 38px;    padding-top: 6px;
}
#life_show #life_block .life_box .text .date::before{
        width: 24px;
    height: 1px;
}
#life_show #life_block .life_box{
    height: 220px;
}
#life_show #life_block .life_box .imgs img{
    display: none;
}
#life_show #life_block .life_box .imgs{
    height: 100%;
}


}




@media only screen and (max-width: 750px) {
#life_show #life_block .life_box .text {
    padding: 30px;
}
#life_show #life_block .life_box .text .name{
        padding-top: 20px;
}
#life_show #life_block .life_box .text .date{
    bottom: 30px;
}
#life_show{
    padding: 30px;
}

}



@media only screen and (max-width: 700px) {





}

@media only screen and (max-width: 630px) {
#life_show #life_block .life_box .imgs{
    width: 100%;
    height: 50vw;
}
#life_show #life_block .life_box .text{
    width: 100%;
    position: relative;
    padding-bottom: 95px;
    float: left;
    margin-top: 12px;
}
#life_show #life_block .life_box{
    height: auto;
}
#life_show{
    width: 100%;
        background-color: rgba(249, 249, 249,1);
}




}

@media only screen and (max-width: 600px) {
#life  .bg{
        height: 380px;
}
}


@media only screen and (max-width: 500px) {
.close_video, .close_album{
    width: 50px;
    height: 50px;
}

}

@media only screen and (max-width: 450px) {

#life .bg {
    height: 300px;
}


}


@media only screen and (max-width: 400px) {






}