@charset "UTF-8";

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*cursor: url(../img/cursor.png), pointer;*/
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

body {
    font-family: 'Century Gothic', '微軟正黑體', 'Helvetica', 'Arial', sans-serif;
    line-height: 1.3;
    color: #000;
    text-align: center;
    background-color: #FFF;
    margin: 0;
    padding: 0;
    /*width: 1920px;
  height: 1080px;*/
}

h1, h2, h3, h4, h5, h6, img, p, div, ul, li, dl, dt, dd {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

img {
    border: none;
    vertical-align: bottom;
}

.homeBg {
    background: url(/theme/images/bg_main2.png?1) center center no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
    position: relative;
    margin: 0 auto;
}

.homeBtn {
    display: block;
    width: auto;
    text-align: center;
    position: absolute;
    top: 85vh;
    left: 48%;
/*    transform: translate(-50%, 0);*/
    font-size: 50px;
    color: #fff;
    padding: 20px 50px;
    border: 10px solid #fff;
    background-color: #e9782c;
    border-radius: 55px 55px;
    box-shadow: 0px 0px 5px 6px #dddddd;
    text-decoration: none;
    z-index: 999;
}
    .homeBtn:nth-child(1) {
        left: 8%;
    }
    .homeBtn:nth-child(2) {
        left: 55%;
    }
    
/*

    .homeBtn:focus {
        top: 62vh;
        zoom: 0.9;
        outline: none;
    }*/

.video-y {
    position: absolute;
    top: 30vh;
    z-index: 999;
}

.video-y-2 {
    position: absolute;
    top: 0vh;
    z-index: 999;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

    .fade-in.one {
        -webkit-animation-delay: 0.7s;
        -moz-animation-delay: 0.7s;
        animation-delay: 0.7s;
    }