html,body{min-height: 100vh}
*{box-sizing: border-box;}
a:hover{text-decoration: none;}
body{font-family: '微軟正黑體'!important;}
#logo{width: 20vw; display: flex;align-items: center;}

header nav{width: 70vw;margin-left: 5vw;}
header nav ul{width: fit-content;float: right;}
header nav ul li{text-align: center;}
header nav ul li a{letter-spacing: 1px;padding: 0 10px;position: relative;transition: 0.3s ease;}
header nav > ul > li > a:after{position: absolute;bottom: 10px;width: 50px;height: 2px;background-color: #f8cc43;content: '';opacity: 0;transition: 0.3s ease;}
header nav > ul > li > a.active:after{opacity: 1;}
header nav > ul > li > a:hover:after{opacity: 1;}

.uk-slideshow-items{min-height: 26vw!important;}

#services_block{width: 100%;padding: 20px 0;background-color: #f8f4da;}
#services_block label{width: 100px;vertical-align: middle;display: inline-block;}
#services_block ul li.label{display: flex;justify-content: center;align-items: center;font-weight: 500;text-align: center;}
#services_block ul li{margin-right: 15px;width: 10%;}
#services_block ul li a{display: block;min-height: 100px;width: 100%;transition: 0.5s ease;}
#services_block ul li a:hover{text-decoration: none;box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.22);}
.services_href{padding: 10px;background-color: #fff;border-radius: 10px;}
.services_href img{display: block;height: 40px;margin: 5px auto 10px;transition: 0.5s ease;position: relative;}
#services_block ul li a:hover img{animation:img_move 0.5s;}
.services_href h6{margin: 0;text-align: center;}

#about_block{background-color: #fff;padding: 50px 30px;position: relative;text-align: center;}
#about_block h3,#our_services h3,#index_faq h3,#index_store h3{font-weight: 800;position: relative;}
#about_block h3:after,#our_services h3:after,#index_faq h3:after,#index_store h3:after{position: absolute;left: calc(50% - 25px);bottom: -10px;content: '';background-color: #333;width: 50px;height: 1px;}

#about_block p {line-height: 32px;letter-spacing: 1px;}
.fadein_three_box{width: fit-content;margin: 10px auto;}
.box_rotate1{padding: 10px;background-color: #fff;z-index: 999;position: relative;border-radius: 50%;width: 40%}
.box_rotate2{animation:rotate_left 2s;position: relative;left: 200px;transform: rotate(240deg);animation-fill-mode: forwards;opacity: 0.2;transition: 2s ease;width: 28%;}
.box_rotate3{animation:rotate_right 2s;position: relative;right: 200px;transform: rotate(120deg);animation-fill-mode: forwards;opacity: 0.2;transition: 2s ease;width: 28%;}

.about_img{position: absolute;}
.about_img1{animation:random_move1 5s infinite;left: 5vw;top: 20%;}
.about_img2{animation:random_move2 5s infinite;left: 12vw;top: 30%;}
.about_img3{animation:random_move3 5s infinite;left: 8vw;top: 60%;}
.about_img4{animation:random_move4 5s infinite;left: 5vw;top: 80%;}
.about_img5{animation:random_move1 5s infinite;right: 5vw;top: 20%;}
.about_img6{animation:random_move2 5s infinite;right: 10vw;top: 50%;}
.about_img7{animation:random_move3 5s infinite;right: 5vw;top: 80%;}

#our_services{width: 100%;padding: 50px 0;background-color: #f8f6e7;text-align: center;}
.services_detail_box{display: inline-block;overflow: hidden;}
.img_container{overflow: hidden;position: relative;}
.services_detail_box a{position: relative;display: block;}
.services_detail_box h5{position: absolute;color: #fff;width: 100%;text-align: center;bottom: 10px;left: 0;margin: 0;text-shadow: 0px 0px 2px rgba(0, 14, 2, 0.92);font-size: 18px;}
.services_detail_box img{transition: 1s ease;width: 100%;}
.services_detail_box .img_container:after{width: 100%;height: 100%;content: '';position: absolute;left: 0;top: 0;background-color: rgba(0,0,0,0.5);opacity: 0.3;transition: 1s ease;}
.services_detail_box:hover img{transform: scale(1.15);}
.services_detail_box:hover .img_container:after{opacity: 1;}

#index_faq{text-align: center;padding: 50px 20px;}
#index_faq .uk-slider-items{}
#index_faq h4{color: #000;font-weight: 800;margin: 10px 0;text-align: center;font-size: 16px;}

#index_store{text-align: center;padding: 50px 20px;}
.store_box h4{margin: 10px;font-size: 16px;font-weight: 800;}
.store_box h5{margin: 5px;font-size: 14px;font-weight: 500;}



.page_header_banner{position: relative;}
.page_header_banner h1{position: absolute;left: 20%;bottom: 20%;color: #fff;}
.yellow_line{position: absolute;width: 4px;height: 60px;left: calc(50% - 4px);bottom: -30px;background-color: #ffd814;}
.page_section{padding: 80px 20px 120px;}
.page_section h2{font-size: 28px;font-weight: 800;margin-bottom: 50px;}
.full_width{width: 100%;}
.flex_center{display: flex;justify-content: center;align-items: center;}
h2.underline_yellow{position: relative;}
h2.underline_yellow:after{position: absolute;left: 0;bottom: -2px;height: 15px;width: 200px;background-color: #fbe2a7;content: '';z-index: -1;}


footer{background-color:#f8f6e7;text-align: center;padding: 50px 20px; }
footer ul.desktop_footer_ul{display: flex;width: fit-content;margin: 0 auto;}
footer ul.desktop_footer_ul li a{display: inline-block;padding: 10px 25px;color: #000;position: relative;letter-spacing: 2px;}
footer ul.desktop_footer_ul li:not(:last-child) a:after{position: absolute;right: 0px;height: 20px;width: 1px;background-color: #333;content: '';top: calc(50% - 10px);}
footer ul.desktop_footer_ul li a:hover{text-decoration: none;color: #333;}

footer ul.desktop_footer_ul li a:before{position: absolute;bottom: 5px;width: 36px;height: 1px;background-color: #333;content: '';opacity: 0;transition: 0.3s ease;left: calc(50% - 18px);}
footer ul.desktop_footer_ul li a:hover:before{opacity: 1;}

footer a{color: #333;}


footer h5{margin: 10px 0;}

@keyframes img_move {
    0%   {top: 0px;}
    25%  {top: -7px;}
    50%  {top: 0px;}
    75%  {top: -7px;}
    100% {top: 0px;}
}

@keyframes rotate_left {
    100%  {transform: rotate(360deg);left: 50px;opacity:1;}
}
@keyframes rotate_right {
    100%  {transform: rotate(360deg);right: 50px;opacity:1;}
}

@keyframes random_move1 {
    33%  {transform: translateX(25px);transform: translateY(10px);}
    66%  {transform: translateX(10px);transform: translateY(25px);}
    100%  {transform: translateX(0px);transform: translateY(0px);}
}
@keyframes random_move2 {
    33%  {transform: translateX(10px);transform: translateY(40px);}
    66%  {transform: translateX(30px);transform: translateY(20px);}
    100%  {transform: translateX(0px);transform: translateY(0px);}
}
@keyframes random_move3 {
    33%  {transform: translateX(14px);transform: translateY(60px);}
    66%  {transform: translateX(50px);transform: translateY(30px);}
    100%  {transform: translateX(0px);transform: translateY(0px);}
}
@keyframes random_move4 {
    33%  {transform: translateX(70px);transform: translateY(30px);}
    66%  {transform: translateX(40px);transform: translateY(80px);}
    100%  {transform: translateX(0px);transform: translateY(0px);}
}


@media(min-width: 961px){
    .hamburger{display: none;}
}

@media(max-width: 960px){
    header{padding: 10px 0;}
    header nav{display: none;}
    .hamburger{display: block;}
    #logo{max-width: 100%;max-height: 50px;width: 100%;}
    #logo img{height: 50px;}
    .mob_slider img{width: 100%;}
    .uk-slideshow-items{min-height: 80vw!important;}
    #services_block ul li.label{width: 100%;}
    #services_block ul{display: block;}
    #services_block ul li{margin-right: 1%;margin-bottom: 1%;width: 49%;float: left;}
    .fadein_three_box img{width: 32%;}
    .about_img{width: 10vw}
    #index_faq h4{font-size: 14px;}

    .page_header_banner h1{width: 100%;bottom: initial;left: 0;text-align: center;padding: 10px;top: 0;font-size: 22px;}
    .page_section{padding: 50px 20px 20px;}

    footer ul.desktop_footer_ul{display: block;}
    footer ul.desktop_footer_ul li{display: inline-block;width: 48%;margin-right: 1%;}
    footer ul.desktop_footer_ul li:not(:last-child) a:after{display: none;}
}

ul.menu {
  padding: 0;
  list-style: none;
  margin: 20px auto;
  display: table;
}
ul.menu .list {
  position: relative;
}
ul.menu .list.have_arrow:after {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: 0px;
  top: 5px;
  padding: 0px 5px;
  color: #333;
}
ul.menu .list a {
  text-decoration: none;
  color: #333;
  padding: 5px;
  display: block;
  box-sizing: border-box;
}
ul.menu .list a:hover {
    letter-spacing: 1px;
  transition: 300ms all;
}
ul.menu .list .items {
  height: 0px;
  overflow: hidden;
}
ul.menu .list .items a {
  padding: 5px;
}
ul.menu .list .items a:hover {
  background-color: #3f5d79;
  color: #fff;
  transition: 300ms all;
}
ul.menu .list:last-child {
  border-bottom: none;
}
ul.menu .active.have_arrow:after {
  content: "\f106";
  font-family: FontAwesome;
  position: absolute;
  padding: 0px 5px;
}
ul.menu .active{
    position: relative;
}
ul.menu .active > .items {
  display: block;
  padding: 0px;
  height: auto;
  color: #fff;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 200ms;
  clear: both;
  width: 100%;
  border-bottom: 1px solid #333;
}
ul.menu .active > .items li {
  padding: 0px;
  list-style: none;
}
ul.menu .active > .items li:last-child {
  border-color: transparent;
  padding-bottom: 0px;
}
ul.menu .active > .items .active > .items {
  background-color: #2f4b67;
}
ul.menu .active > a {
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 1px solid #333;
}
ul.menu .active .list {
  background: #697d92;
}
ul.menu .active .list a {
  padding: 17px 0px 17px 45px;
}