/* CSS Document */
.back_index{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}
.bird_pc{
    width: 28.6%;
}
#ds6 .pic_tit {
    right: inherit;
    left: calc(-33% - 93px);
    width: 22%;
    bottom: 1%;
    text-align: right;
    color: #363D47;
}
#ds6  .btn_item {
    right: inherit;
    left: calc(-9% - 93px);
    bottom: 0%;
}
.ds2_3 .uk-slideshow-nav.uk-dotnav {
    position: absolute;
    z-index: 1;
    bottom: 2%;
    margin: 0;
    left: -9%;
    width: 9%;
}
#ds6 .txt{
    width: 38%;
    display: inline-block;
}
#ds6 .ds2_3{
    width: 48.75%;
    float: right;
    margin: 0 13% 0 0;
}
.ds2_1 .pic_tit{
    right: inherit;
    left: calc(-33% - 93px);
    width: 22%;
    bottom: 6%;
    text-align: right;
}
.ds2_1 .btn_item {
    right: inherit;
    left: calc(-9% - 93px);
    bottom: 7%;
}
.ds2_1 .uk-slideshow-nav.uk-dotnav {
    position: absolute;
    z-index: 1;
    bottom: 9%;
    margin: 0;
    left: -9%;
    width: 9%;
}
#ds2 .txt{
    width: 43%;
    display: inline-block;
}
nav ul.menu svg {
    width: 80%;
    margin: 5%;
}
.line1,.line2{
    position: absolute;
    left: 0;
    top: 0;
}
.line1{
    -ms-animation: lin1 3s infinite linear;
    -o-animation: lin1 3s infinite linear;
    -moz-animation: lin1 3s infinite linear;
    -webkit-animation: lin1 3s infinite linear;
    animation: lin1 3s infinite linear;
}
.line2{
    -ms-animation: lin2 3s infinite linear;
    -o-animation: lin2 3s infinite linear;
    -moz-animation: lin2 3s infinite linear;
    -webkit-animation: lin2 3s infinite linear;
    animation: lin2 3s infinite linear;
}
@keyframes lin1 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
@keyframes lin2 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.leaf2{
    -ms-animation: l1 3s infinite linear;
    -o-animation: l1 3s infinite linear;
    -moz-animation: l1 3s infinite linear;
    -webkit-animation: l1 3s infinite linear;
    animation: l1 3s infinite linear;
    transform-origin: 100% 50%;
    top: 0;
    right: -5%;
    position: absolute;
}
@keyframes l1 {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0);
    }
}
.cloud{
    position: absolute;
    left: 0;
    top: 0;
    -ms-animation: c1 3s infinite linear;
    -o-animation: c1 3s infinite linear;
    -moz-animation: c1 3s infinite linear;
    -webkit-animation: c1 3s infinite linear;
    animation: c1 3s infinite linear;
}
@keyframes c1 {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(30px);
    }

    100% {
        transform: translateX(0);
    }
}
.ds1hand{
    -ms-animation: h1 3s infinite linear;
    -o-animation: h1 3s infinite linear;
    -moz-animation: h1 3s infinite linear;
    -webkit-animation: h1 3s infinite linear;
    animation: h1 3s infinite linear;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 50% 84%;
}
#ds5 .bird{
    -ms-animation: b5 3s infinite linear;
    -o-animation: b5 3s infinite linear;
    -moz-animation: b5 3s infinite linear;
    -webkit-animation: b5 3s infinite linear;
    animation: b5 3s infinite linear;
    position: absolute;
    left: 0;
    top: 0;
}
#ds5 .bird2{
    -ms-animation: b6 3s infinite linear;
    -o-animation: b6 3s infinite linear;
    -moz-animation: b6 3s infinite linear;
    -webkit-animation: b6 3s infinite linear;
    animation: b6 3s infinite linear;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 14.5% 20%;
}
@keyframes b6 {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(0);
    }
}
@keyframes b5 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(30px);
    }

    100% {
        transform: translateY(0);
    }
}
.bird{
    -ms-animation: b1 3s infinite linear;
    -o-animation: b1 3s infinite linear;
    -moz-animation: b1 3s infinite linear;
    -webkit-animation: b1 3s infinite linear;
    animation: b1 3s infinite linear;
    position: absolute;
    left: 0;
    top: 0;
}
@keyframes h1 {
    0% {
        transform: rotate(0);
    }

    50% {
        transform:rotate(10deg);
    }

    100% {
        transform: rotate(0);
    }
}
@keyframes b1 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform:translateY(60px) rotate(5deg);
    }

    100% {
        transform: translateY(0);
    }
}
.fx_con{
    background:#070E32;
}
#ds6 .uk-dotnav li.uk-active a:after, #ds6 .uk-dotnav li:hover a:after {
    background: #363D47;
}
#ds6 .uk-icon.uk-slidenav-next,#ds6 .uk-icon.uk-slidenav-previous{
    border: 1px solid #363D47;
    color: #363D47;
}
#ds6 .uk-slideshow-nav.uk-dotnav li:before {
    background: #363D47;
}
#ds6 .uk-dotnav>.uk-active>* {
    background-color: #363D47;
}
#ds6{
    background: #E6AC23;
}
#ds3 .uk-slideshow-nav.uk-dotnav {
    bottom: 7%;
    margin: 0;
    right: 6%;
}
.leaf{
    position: absolute;
    left: 0;
    bottom: 0;
}
.slideshow_con  .uk-slideshow-items>*,.slideshow_con  .uk-slideshow-items{
    overflow: visible;
}
.ds2_3 .uk-slideshow-nav.uk-dotnav li{
}
.pic_tit{
    position: absolute;
    right: 37%;
    bottom: 5%;
    color: #FFFFFF;
    z-index: 1;
    font-family: "Microsoft JhengHei";
    letter-spacing: 0.5px;
}
.ds2_4 .pic_tit{
    bottom: 3%;
}
nav svg.uk-svg {
    color: #040830;
}
.ds2_1 .btn_list,.ds2_2 .btn_list,.ds2_3 .btn_list{
    margin: 1.5% 0 0 0;
}
.ds2_4 .btn_list{
    margin: 3% 0 0 0;
}
.ds2_1{
    width: 57%;
    display: inline-block;
    margin: 5% 0 0 0;
    float: right;
}
.ds2_2 .slideshow_con,.ds2_3 .slideshow_con{
    width: 100%;
    position: relative;
    z-index: 1;
}
#ds2{
    background: url(../img/ds2/pc/bg.jpg);
    background-size: inherit;
    background-position: bottom center;
}
#ds3{
    background: url(../img/ds3/pc/bg.jpg);
    background-size: inherit;
    background-position: top center;
}
.hot_hand{
    -ms-animation: mm1 1.5s infinite ease-in-out;
    -o-animation: mm1 1.5s infinite ease-in-out;
    -moz-animation: mm1 1.5s infinite ease-in-out;
    -webkit-animation: mm1 1.5s infinite ease-in-out;
    animation: mm1 1.5s infinite ease-in-out;
}
@keyframes mm1{
    0% {
        -moz-transform:translateY(-5px);
        -webkit-transform:translateY(-5px);
        -o-transform:translateY(-5px);
        -ms-transform:translateY(-5px);
        transform: translateY(-5px);
    }
    50%{
        -moz-transform:translateY(5px);
        -webkit-transform:translateY(5px);
        -o-transform:translateY(5px);
        -ms-transform:translateY(5px);
        transform: translateY(5px);
    }
    100%{
        -moz-transform:translateY(-5px);
        -webkit-transform:translateY(-5px);
        -o-transform:translateY(-5px);
        -ms-transform:translateY(-5px);
        transform: translateY(-5px);
    }
}
#hot_point{
    display: block;
    width: 60%;
    margin: 0 auto;
    padding-top: 3%;
    max-width: 450px;
}
#my-hot .uk-close {
    color: #FFFFFF;
    top: 0;
    right: -4%;
    border-radius: 50px;
    background: #7E2721;
}
#my-hot .uk-close svg {
    width: 40px;
    height: 40px;
    padding: 5px;
}
#my-hot .uk-modal-dialog{
    background: transparent;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 47%;
}
section img{
    width: 100%;
}
#index_con svg{
    color: #FFFF;
}
.light1{
    -ms-animation: lig11 1.2s infinite ease-in;
    -o-animation: lig11 1.2s infinite ease-in;
    -moz-animation: lig11 1.2s infinite ease-in;
    -webkit-animation: lig11 1.2s infinite ease-in;
    animation: lig11 1.2s infinite ease-in;
}
.light2{
    -ms-animation: lig22 1.2s infinite ease-in;
    -o-animation: lig22 1.2s infinite ease-in;
    -moz-animation: lig22 1.2s infinite ease-in;
    -webkit-animation: lig22 1.2s infinite ease-in;
    animation: lig22 1.2s infinite ease-in;
}
@keyframes lig22{
    0% {
        opacity: 1;
    }
    40%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes lig11{
    0% {
        opacity: 0;
    }
    40%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
h1.logo{
    width: 27.5%;
    margin: 0 8% 0 0;
}
.fx_con{
}
.slideshow_menu{
    width: 100%;
    margin: 5% 0 0 0;
    height: 160px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 0;
}
.slideshow_menu li.uk-active .menu_h{
    opacity: 1;
}
.slideshow_menu li{
    position: relative;
    width: 17%;
    display: inline-block;
    margin: 0 1%;
}
.slideshow_menu li:hover .menu_a,.slideshow_menu li.uk-active .menu_a{
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
}
.slideshow_menu li .menu_h{
    opacity: 0;
}
.slideshow_menu li:hover .menu_h{
    opacity: 1;
}
.uk-slideshow-nav.uk-dotnav{
    position: absolute;
    z-index: 1;
    bottom: 7.5%;
    margin: 0;
    right: 0;
}
.uk-slideshow-nav.uk-dotnav{
    width: 96px;
}
.uk-dotnav li.uk-active a:after,.uk-dotnav li:hover a:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #3F3F3F;
    height: 20px;
    animation-name:oxxo;
    animation-duration:2s;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
}
@keyframes oxxo{
    from{
        width: 10%;
    }
    to{
        width:100px;
    }
}
.slideshow_con{
}
.slideshow_con .uk-dotnav>*>*,.uk-position-relative .uk-dotnav>*>*{
    width: 100%;
    border-radius: 0;
    height: 6px;
    background-color: transparent;
    border-color: transparent;
    border: 0;
}
.uk-slideshow-nav a{
    position: relative;
}
.uk-dotnav li.uk-active a:after,.uk-dotnav li:hover a:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #ffffff;
    height: 20px;
    animation-name:oxxo;
    animation-duration:2s;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
}
.btn_item {
    position: absolute;
    right: calc(7% + 96px);
    bottom: 5%;
    z-index: 1;
}
.uk-icon.uk-slidenav-next, .uk-icon.uk-slidenav-previous {
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
}
.uk-slideshow-nav.uk-dotnav li {
    position: relative;
    background: transparent;
    padding-left: 0;
    width: 25%;
}
#ds3 .uk-slideshow-nav.uk-dotnav li {
    width: 14.2%;
}
#ds5 .uk-slideshow-nav.uk-dotnav li {
    width: 50%;
}
#ds6 .uk-slideshow-nav.uk-dotnav li {
    width: 50%;
}
.uk-slideshow-nav.uk-dotnav li:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    background: #FFFFFF;
    width: 100%;
    height: 1px;
}
.uk-slider-container {
    width: 100%;
}
#ds1 .uk-width-4-5 {
    width: 91.25%;
}
#ds1 .uk-width-1-2 {
    width: 46.9%;
}
.hand {
    position: absolute;
    top: calc(60% - 60px);
    left: calc(50% - 60px);
    width: 120px;
    display: inline-block;
}
.hand img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.hand_img {
    -ms-animation: mm1 2s infinite ease-in-out;
    -o-animation: mm1 2s infinite ease-in-out;
    -moz-animation: mm1 2s infinite ease-in-out;
    -webkit-animation: mm1 2s infinite ease-in-out;
    animation: mm1 2s infinite ease-in-out;
}
@keyframes mm1 {
    0% {
        -moz-transform: translateX(-5px);
        -webkit-transform: translateX(-5px);
        -o-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50% {
        -moz-transform: translateX(5px);
        -webkit-transform: translateX(5px);
        -o-transform: translateX(5px);
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }
    100% {
        -moz-transform: translateX(-5px);
        -webkit-transform: translateX(-5px);
        -o-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
    }
}
nav ul.menu {
    width: 100%;
    float: right;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
#youTube{
    width: 100%;
    height: 387px;
}
nav {
    position: fixed;
    z-index: 9;
    top: inherit;
    display: flex;
    background: transparent;
    justify-content: flex-end;
    width: 5%;
    flex-direction: column;
    right: 0;
    bottom: 3%;
    margin: 0;
    min-width: 70px;
}
nav ul li {
    text-align: revert-layer;
    display: inline-block;
    width: 100%;
    position: relative;
    float: left;
    padding: 0 3%;
    border-radius: 15% 0 0 15%;
    background: #D88DB3;
    margin: 0 0 10% 0;
}
.btn_hr {
    position: absolute;
    right: 0;
    top: 8%;
    width: 2px;
    height: 87%;
}
#contact{
    background: url(../img/contact/pc/bg.jpg);
    background-size: cover;
    background-position: center bottom;
}
.pos{
    position: absolute;
    left: 0;
    top: 0;
}
#main{
    display: block;
    margin: 0 auto;
    background: #b0b2b3;
    width: 100%;
}
body{
    background: #353535;
    font-size: 16px;
    padding-bottom: 0;
    font-family: 'Noto Serif TC', serif;
}
@media (max-width: 960px){
    #contact {
        background: url(../img/contact/bg.jpg?0708);
        background-size: cover;
        background-position: center bottom;
    }
    #ds6 .btn_item {
        right: 17%;
        bottom: 7%;
        left: initial;
    }
    .ds2_3 .uk-slideshow-nav.uk-dotnav {
        left: inherit;
        text-align: inherit;
        right: 0;
        width: 14%;
    }
    #ds6 .ds2_3 {
        width:100%;
        margin: 0;
    }
    #ds6 .pic_tit {
        right: 30%;
        left: auto;
        width: fit-content;
        bottom: 6%;
        text-align: inherit;
    }
    #ds3{
        background: url(../img/ds3/bg.jpg);
        background-size: cover;
    }
    #ds3 .btn_item {
        position: absolute;
        right: 17%;
        bottom: 5%;
        z-index: 1;
    }
    #ds3 .uk-slideshow-nav.uk-dotnav {
        bottom: 6%;
        margin: 0;
        right: 0;
    }
    .ds2_1 .pic_tit{
        right: 38%;
        left: auto;
        width: fit-content;
        bottom: 4%;
        text-align: inherit;
    }
    .ds2_1 .uk-slideshow-nav.uk-dotnav {
        left: inherit;
        right: 0;
        width: 14%;
        bottom: 8%;
    }
    .ds2_1 .btn_item {
        left: inherit;
        right: 17%;
        bottom: 6%;
    }
    .ds2_1 {
        width:100%;
        margin:0;
    }
    #ds2{
        background: url(../img/ds2/bg.jpg);
        background-size: cover;
    }
    .ds2_1 .slideshow_con {
        width: 85%;
        float: right;
        position: relative;
        z-index: 1;
    }
    nav ul li {
        width: 19%;
        padding: 0 3%;
        border-radius: 0;
        margin: 0;
    }
    nav ul.menu {
        width: 62%;
        float: right;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    nav {
        position: fixed;
        z-index: 9;
        top: 0;
        background: #D88DB3;
        width: 100%;
        display: flex;
        align-items: center;
        left: 0;
    }
    nav ul.menu svg {
        width: 100%;
        margin: 0;
    }
    .pic_tit{
        bottom: 4%;
    }
    .hand {
        position: absolute;
        top: calc(50% - 5vw);
        left: calc(50% - 5vw);
        width: 16vw;
        display: inline-block;
    }
    #my-hot .uk-modal-dialog {
        width: 95%;
    }
    #hot_point {
        width: 100%;
    }
    nav ul li + li {
        margin-top: 0;
    }
    nav {
        position: fixed;
        z-index: 9;
        top: 0;
        width: 100%;
        margin: 0;
        height: max-content;
        max-height: 136px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        min-width: inherit;
        padding: 1% 0;
    }
    .btn_item{
        right: 17%;
        bottom: 6%;
    }
    .uk-slideshow-nav.uk-dotnav {
        width: 14%;
    }
    .slideshow_con{
        width: 100%;
        float: right;
    }
    nav {
    }
    .btn_item svg{
        width: 10px;
        height: auto;
    }
    #youTube {
        height: 54.5vw;
    }
    .slideshow_menu {
        height: 120px;
    }
}
@media (max-width: 690px){
    .btn_item svg{
        width: 6px;
        height: auto;
    }
    .uk-icon.uk-slidenav {
        padding: 3px 5px;
    }
    nav {
    }
    #main{
        width: 100%;
    }
}