body{
    background-color:white;
}


@font-face {
  font-family: 'EdwardianScriptITC';
  src: url('../../fonts/EdwardianScriptITC.eot?#iefix') format('embedded-opentype'),  url('../../fonts/EdwardianScriptITC.woff') format('woff'), url('../../fonts/EdwardianScriptITC.ttf')  format('truetype'), url('../../fonts/EdwardianScriptITC.svg#EdwardianScriptITC') format('svg');
  font-weight: normal;
  font-style: normal;
}

header{
    width:100%;
    padding: 50px;
}
p,h1,h2,h3,h4,h5,h6,li,a,div,span,tr{
    font-family:微軟正黑體;
}
.logo,.nav{
    display:inline-block;
}
.nav{
    width: calc(100% - 618px);
}
header .nav nav{

    display:flex;
    justify-content: space-around;
    width:100%;
}
header .nav nav ul{
    width:100%;
}
header .nav .uk-dropdown ul li{
}
header .nav .uk-dropdown ul li a{
    letter-spacing: 1px;
}
header .nav .uk-dropdown ul{
    margin:0;
}
.offcanvas-box {
    position: inherit;
    width: fit-content;
    right: 25px;
    top: 25px;
    position: absolute;
}
html.hc-nav-yscroll {
    overflow-y: scroll
}
body {
    overflow-x: hidden
}
body.hc-nav-open {
    position: fixed;
    width: 100%;
    min-height: 100%
}
.uk-navbar-nav>li>a ,.nav li a{
    font-family: "微軟正黑體", Helvetica, Arial, sans-serif;
}
@media only screen and (max-width:480px){

    .uk-navbar-toggle {
        position: relative;
        top: 10px;
    }
    .offcanvas-box {
        position: absolute;
        right: 20px;
        top: -7px;
    }
}
.hc-offcanvas-nav {
    display: block;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 9999
}
.hc-offcanvas-nav.is-ios * {
    cursor: pointer !important
}
.hc-offcanvas-nav .nav-container {
    position: fixed;
    z-index: 9998;
    top: 0;
    width: 240px;
    max-width: 100%;
    height: 100%;
    transition: transform .4s ease
}
.hc-offcanvas-nav .nav-wrapper {
    width: 100%;
    overscroll-behavior: none
}
.hc-offcanvas-nav .nav-wrapper.nav-wrapper-1 {
    position: static;
    height: 100%;
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto
}
.hc-offcanvas-nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}
.hc-offcanvas-nav li {
    position: relative;
    display: block
}
.hc-offcanvas-nav li.level-open>.nav-wrapper {
    visibility: visible
}
.hc-offcanvas-nav input[type="checkbox"] {
    display: none
}
.hc-offcanvas-nav label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    cursor: pointer
}
.hc-offcanvas-nav a {
    position: relative;
    display: block;
    box-sizing: border-box;
    cursor: pointer
}
.hc-offcanvas-nav a, .hc-offcanvas-nav a:hover {
    text-decoration: none
}
.hc-offcanvas-nav.disable-body::after, .hc-offcanvas-nav .nav-wrapper::after {
    content: '';
    position: fixed;
    z-index: 9990;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overscroll-behavior: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s ease .4s, opacity .4s ease
}
.hc-offcanvas-nav.disable-body.nav-open::after, .hc-offcanvas-nav .sub-level-open::after {
    visibility: visible;
    opacity: 1;
    transition-delay: .05s
}
.hc-offcanvas-nav:not(.nav-open)::after {
    pointer-events: none
}
.hc-offcanvas-nav.nav-levels-expand .nav-wrapper::after {
    display: none
}
.hc-offcanvas-nav.nav-levels-expand ul .nav-wrapper {
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: height 0s ease .4s
}
.hc-offcanvas-nav.nav-levels-expand .level-open>.nav-wrapper {
    max-height: none
}
.hc-offcanvas-nav.nav-levels-overlap ul .nav-wrapper {
    position: absolute;
    z-index: 9999;
    top: 0;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s ease .4s, transform .4s ease
}
.hc-offcanvas-nav.nav-levels-overlap ul ul {
    height: 100%;
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto
}
.hc-offcanvas-nav.nav-levels-overlap ul li.nav-parent {
    position: static
}
.hc-offcanvas-nav.nav-levels-overlap ul li.level-open>.nav-wrapper {
    visibility: visible;
    transition: transform .4s ease
}
.hc-offcanvas-nav.side-left {
    left: 0
}
.hc-offcanvas-nav.side-left .nav-container {
    left: 0;
    transform: translate3d(-240px, 0, 0)
}
.hc-offcanvas-nav.side-left.nav-levels-overlap li.level-open>.nav-wrapper {
    transform: translate3d(-40px, 0, 0)
}
.hc-offcanvas-nav.side-left.nav-levels-overlap li .nav-wrapper {
    left: 0;
    transform: translate3d(-100%, 0, 0)
}
.hc-offcanvas-nav.side-right {
    right: 0
}
.hc-offcanvas-nav.side-right .nav-container {
    right: 0;
    transform: translate3d(240px, 0, 0)
}
.hc-offcanvas-nav.side-right.nav-levels-overlap li.level-open>.nav-wrapper {
    transform: translate3d(40px, 0, 0)
}
.hc-offcanvas-nav.side-right.nav-levels-overlap li .nav-wrapper {
    right: 0;
    transform: translate3d(100%, 0, 0)
}
.hc-offcanvas-nav.nav-open .nav-container {
    transform: translate3d(0, 0, 0)
}
.hc-offcanvas-nav::after, .hc-offcanvas-nav .nav-wrapper::after {
    background: rgba(0, 0, 0, 0.3)
}
.hc-offcanvas-nav .nav-wrapper {
    background:white;
}
.hc-offcanvas-nav h2 {
    font-size: 19px;
    font-weight: normal;
    text-align: left;
    padding: 20px 17px;
    color: #1b3958;
    margin: 0;
    background-image:url(../../images/homepage/bg1.png),linear-gradient(rgb(255,255,255),rgb(255,255,255));
}
.hc-offcanvas-nav a {
    padding: 14px 17px;
    font-size: 15px;
    z-index: 1;
    background: rgba(255,255,255,1);
    border-bottom: 2px dashed #e4e4e4;
    color: #333333;
}
.hc-offcanvas-nav i{
    color: #a7896a!important;
}
.hc-offcanvas-nav:not(.touch-device) a:hover {
    background-color: #21dca4!important;
}
.hc-offcanvas-nav .nav-wrapper-1>ul:first-of-type:not(:first-child)>li:first-child:not(.nav-back):not(.nav-close)>a {
    border-top: 1px solid #fff;
}
.hc-offcanvas-nav li {
    text-align: left;
}
.hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav li.nav-back a {
    background-color: #21dca4!important;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.hc-offcanvas-nav li.nav-close a:hover, .hc-offcanvas-nav li.nav-back a:hover {
    background-color: #21dca4!important;
}
.hc-offcanvas-nav li.nav-parent a {
    padding-right: 58px;
}
.hc-offcanvas-nav li.nav-close span, .hc-offcanvas-nav li.nav-parent span.nav-next, .hc-offcanvas-nav li.nav-back span {
    width: 45px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease;
    border-left: 1px solid #fff;
}
.hc-offcanvas-nav li.nav-close span::before, .hc-offcanvas-nav li.nav-close span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff
}
.hc-offcanvas-nav li.nav-close span::before {
    margin-left: -9px;
    transform: rotate(135deg)
}
.hc-offcanvas-nav li.nav-close span::after {
    transform: rotate(-45deg)
}
.hc-offcanvas-nav a[href]:not([href="#"])>span.nav-next {
    border-left: 1px solid #fff;
}
.hc-offcanvas-nav span.nav-next::before, .hc-offcanvas-nav li.nav-back span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -2px;
    box-sizing: border-box;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform-origin: center
}
.hc-offcanvas-nav span.nav-next::before {
    transform: translate(-50%, -50%) rotate(135deg)
}
.hc-offcanvas-nav li.nav-back span::before {
    transform: translate(-50%, -50%) rotate(-45deg)
}
.hc-offcanvas-nav.side-left.nav-open .nav-wrapper {
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2)
}
.hc-offcanvas-nav.side-right.nav-open .nav-wrapper {
    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.2)
}
.hc-offcanvas-nav.side-right span.nav-next::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(-45deg)
}
.hc-offcanvas-nav.side-right li.nav-back span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(135deg)
}
.hc-offcanvas-nav.nav-levels-expand .nav-container ul .nav-wrapper, .hc-offcanvas-nav.nav-levels-none .nav-container ul .nav-wrapper {
    box-shadow: none;
    background: transparent
}
.hc-offcanvas-nav.nav-levels-expand .nav-container ul h2, .hc-offcanvas-nav.nav-levels-none .nav-container ul h2 {
    display: none
}
.hc-offcanvas-nav.nav-levels-expand .nav-container ul ul a, .hc-offcanvas-nav.nav-levels-none .nav-container ul ul a {
    font-size: 14px
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li, .hc-offcanvas-nav.nav-levels-none .nav-container li {
    transition: background .3s ease
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open, .hc-offcanvas-nav.nav-levels-none .nav-container li.level-open {
    background: #2e6296
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open a, .hc-offcanvas-nav.nav-levels-none .nav-container li.level-open a {
    border-bottom: 1px solid #000
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open a:hover, .hc-offcanvas-nav.nav-levels-none .nav-container li.level-open a:hover {
    background: #2f649a
}
.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open>a .nav-next::before, .hc-offcanvas-nav.nav-levels-none .nav-container li.level-open>a .nav-next::before {
    margin-top: 2px;
    transform: translate(-50%, -50%) rotate(45deg)
}
.hc-offcanvas-nav.nav-levels-expand .nav-container span.nav-next::before, .hc-offcanvas-nav.nav-levels-none .nav-container span.nav-next::before {
    margin-top: -2px;
    transform: translate(-50%, -50%) rotate(225deg)
}
header{
    padding-top:15px!important;
    padding-bottom:15px!important;
}
.logo{
    width: 440px;
    display:flex;
}
.nav{
    width: 700px;
    margin-left: auto;
    display: flex;
    align-items: center;
}
.logo-img{
    padding:15px 0;
}
.logo-img h2{
    margin-bottom: 0!important;
}
.logo-img p{

}
.logo-img img{
    width:100px;
}

.logo-img-text{
    margin-left:15px;
    width: 330px;
    width: calc(100% - 100px);
}
.logo-img-text p{
    font-family: 標楷體;
}

.logo-img-text h2{
    font-family: EdwardianScriptITC;
}
.uk-modal-dialog-lightbox {
    margin: 15px auto;
    padding: 0;
    max-width: 95%;
    max-width: calc(50% - 30px);
    height: fit-content!important;
}
.nav li a{
    padding:0;
    color: #333333;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    padding: 8px;
}
header nav ul .active a{
    font-weight: 900;
    color: #21dca4;
}
.homepage-section-1{
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15%;
    padding-top: 15%;
    padding-right: 50px;
    padding-left: 50px;
    position: relative;
}
.homepage-section-1:after{
    content: '';
    background: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0
}
.homepage-section-1>div{position: relative;z-index: 99;}

.homepage-section-1:not(.home_page){
    text-align: center;
}

.homepage-section-1 p{
    color:white!important;
    font-size: 24px!important;
    line-height: 32px;
    margin: 0 auto;
    max-width: 1200px;
}
.homepage-section-1 h1{
    font-size: 60px!important;
    line-height: 72px!important;
    color:white!important;
}

.homepage-section-1 h1.index_title{
    font-family: 'EdwardianScriptITC';
}

.art-section-1 .uk-grid>div{
    width:50%;
}
.art-section-1-text>div{
    width: 364px;
}
.art-section-1-text h1{
    font-size: 60px!important;
    line-height: 72px!important;
    text-align: justify;
}
.art-section-1 .uk-grid>.art-section-1-text{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
}
.art-section-1 .uk-grid>.art-section-1-img{
    overflow: hidden;
    height: 80vh;
}
.art-section-1 .uk-grid>.art-section-1-img>img{
    width: 100%
}
.uk-modal-dialog-lightbox>.uk-close:first-child {
    position: absolute;
    top: -12px;
    right: -12px;
    margin: 0;
    float: none;
    z-index: 1;
}



.art-section-2{
        margin-top: 2%!important;
}
.art-section-2>.uk-grid{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
}
.art-section-2-img{
    width:fit-content;
    position: relative;
}
.art-section-2-img:after{
    opacity: 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}
.art-section-2-img:hover:after{
    opacity: 1;
}
.art-section-2>.uk-grid>a{
    width:calc(25% - 20px);
    margin:10px;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.art-section-2>.uk-grid .art-section-2-img p{
    opacity: 0;
    position:absolute;
    font-size:24px!important;
    line-height: 30px!important;
    color:white!important;
}
.art-section-2-text{
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.art-section-2>.uk-grid .art-section-2-img:hover p{
    opacity: 1;
}
.about-us-section-1{
    padding: 50px;
}
.about-section-2{
    padding:0 50px;
    justify-content: center;
    align-items: center;
}
.about-section-2>div{
    padding-right:25px;
    padding-bottom:25px;
}
.about-us-section-1 h1{
    font-weight:600;
}
.about-us-section-1 p{
    font-size: 20px;
    line-height: 28px;
}
.about-us-section-1 hr{
    border-top: 1px solid black;
}
.about-us-section-1 h1{
    font-weight:600;
}
.about-us-section-1 h1{
    font-weight:600;
}
.uk-lightbox-content .uk-slidenav-previous {
    left: 15px;
}
.uk-lightbox-content .uk-slidenav-next {
    right: 15px;
}
.uk-slidenav-position .uk-slidenav {
    display: block;
    position: absolute;
    top: 50%;
    z-index: 1;
    margin-top: -30px;
}
.uk-slidenav-contrast {
    color: #333;
}
.uk-slidenav-contrast:focus, .uk-slidenav-contrast:hover {
    color: #333;
}
.uk-lightbox-content  .uk-slidenav-contrast {
    color: rgba(255, 255, 255, 0.9);
}
@media (max-width:1199px){
    .homepage-section-1 h1 {
    font-size:48px!important;
}
.homepage-section-1 p {
    color: white!important;
    font-size: 20px!important;
}
.art-section-1 .uk-grid>.art-section-1-text{
    padding: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}
}
@media (max-width:959px){
.art-section-1 .uk-grid>.art-section-1-img {
    overflow: hidden;
    height: fit-content;
}
.art-section-1-text h1 {
    font-size: 48px!important;
    line-height: 60px!important;
}
    .art-section-1 .uk-grid>.art-section-1-text {
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .logo-img-text p{
        font-size: 16px!important;
    }
    .homepage-section-1 p{
        color:white!important;
        font-size: 18px!important;
    }
    .homepage-section-1 h1{
        font-size: 48px!important;
        color:white!important;
    }.about-us-section-1 {
    padding: 25px;
}
}
.homepage-section-2-box{
    display: flex;
    justify-content: center;
}
.homepage-section-2 .uk-slidenav-previous {
    left: -30px;
}
.homepage-section-2 .uk-slidenav-next {
    right: -30px;
}
.homepage-section-2{padding: 20px;
    width: 90%;}
.homepage-section-2 li{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0 15px;
}
.homepage-section-2 li img{
    width:100%;
}
.homepage-section-2 li div{
    width:80%;
}
@media (max-width:767px){

.art-section-2>.uk-grid>*{
    width:calc(50% - 20px);
}
    .art-section-1-text>div{
        width:auto;
    }
    .homepage-section-1 p{
        color:white!important;
        font-size: 16px!important;
    }
    .homepage-section-1 h1{
        font-size: 36px!important;
        color:white!important;
    }
    .homepage-section-2 li {
        width:50%;
}

.art-section-1 .uk-grid{
    display:block;
}
.art-section-1 .uk-grid>div {
    width: 100%;
}    .art-section-1-text h1 {
    font-size: 36px!important;
    line-height: 48px!important;
}
}
@media (max-width:479px){

.art-section-2>.uk-grid>.uk-width-1-1{padding: 0 10px;}
.art-section-2>.uk-grid>*{
    width:calc(100%);
    margin:0px;
    position:relative;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
}
.art-section-1-text h1 {
    font-size: 36px!important;
    line-height: 48px!important;
}
    .logo-img-text p {
    }
    .logo {
        width:100%;
        display: flex;
    }
.art-section-1 .uk-grid>div h1 {
    font-size: 26px!important;
    line-height: 30px!important;
    text-align: justify;
}
}