@charset "utf-8";
/*新恆設計*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*滾輪*/
::-webkit-scrollbar { width: 7px;}/*滾輪寬度*/
::-webkit-scrollbar-button { background: transparent; border-radius: 4px; height: 0;}/*滾輪與視窗上下的間距*/
::-webkit-scrollbar-track-piece { background: transparent;}/*滾輪軌道背景*/
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #666465; border: none;}/*滾輪樣式*/
::-webkit-scrollbar-track { box-shadow: transparent;}/*滾輪軌道樣式*/

/*麵包屑*/
.path{display: none;}

/*預設解除背景輪播*/
#content_main { margin:0;background: #212121;}
.bannerindex { position:relative; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-slide img { height:auto;} 
#content{
    background: #212121;
}

.case_page  #content{
   background-attachment: fixed;
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/demoE_bg02.jpg);
    background-position: 50%;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
}
/*版面*/
.album_page  .main_part,.album_info_page  .main_part,.album_class_page  .main_part{
    max-width: 86%;
}
.blog_page .main_part{
    max-width: 84%;
    width: 100%;
    padding:4% 0 0 0;
    margin: 0 auto;
}
.blog_in_page .main_part{
  max-width: 74%;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.contact_page .main_part{
  width: 100%;
  max-width: 76%;
}



/*大圖上換圖的點點*/
.swiper-pagination-clickable .swiper-pagination-bullet{
    display: none;
}
.me_tp_features{
    display: none;
}


.header_area{
    position: fixed;
    background-image: linear-gradient(to bottom, #212121, #21212100);
    background-color: transparent;
    padding: 0;
}


.header_area::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/top_star.svg);
    background-repeat: repeat-x;
    background-size: contain;
    max-width: 2000px;
    max-height: 159px;
    animation: flicker-4 4s linear infinite both;
}

@keyframes flicker-4 {
  0%,
  100% {
    opacity: 1;
  }
  31.98% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  32.8% {
    opacity: 0;
  }
  32.82% {
    opacity: 1;
  }
  34.98% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  35.7% {
    opacity: 0;
  }
  35.72% {
    opacity: 1;
  }
  36.98% {
    opacity: 1;
  }
  37% {
    opacity: 0;
  }
  37.6% {
    opacity: 0;
  }
  37.62% {
    opacity: 1;
  }
  67.98% {
    opacity: 1;
  }
  68% {
    opacity: 0;
  }
  68.4% {
    opacity: 0;
  }
  68.42% {
    opacity: 1;
  }
  95.98% {
    opacity: 1;
  }
  96% {
    opacity: 0;
  }
  96.7% {
    opacity: 0;
  }
  96.72% {
    opacity: 1;
  }
  98.98% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  99.6% {
    opacity: 0;
  }
  99.62% {
    opacity: 1;
  }
}

.header_area::after {
    content: '';
    position: absolute;
    left: 8%;
    top: -22px;
    width: 100%;
    height: 100%;
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/cloud.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 349px;
    max-height: 129px;
    animation: shake-horizontal 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    opacity: 0.7;
}

@keyframes shake-horizontal {
  0%{
            transform: translateX(0);
  }
 
 
  50% {
            transform: translateX(80px);
  }
  90% {
            transform: translateX(-20px);
  }

   100% {
        transform: translateX(-10);
   }
}


.header_area.sticky{
    background:#21212144;
}

.main_header_area .container{
    max-width: 86%;
    width: 100%;
}

.stellarnav > ul > li > a{
   color: #ffffff;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 15px;
    margin: 0 20px;
}

.stellarnav{
  width: 100%;
  max-width: 100%;
}


.stellarnav ul{
    padding: 1.4% 0;
    z-index: 10;
    position: relative;
}

.stellarnav li.has-sub > a:after{
  display: none;
}

.nav-brand::before{
    content: "";
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/logo_h.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 246px;
    max-height: 83px;
    top: 10%;
    z-index: 10;
}

.nav-brand img{
    display: none;
}

ul.album_classes  li:nth-child(1){
    display: none;
}


/*大圖*/
.swiper-slide:nth-child(1) img, .swiper-slide:nth-child(2) img { position: relative;}

.swiper-banner .swiper-slide:nth-child(1):before {
    content: "";
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/slogan01.svg);
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    max-width:678px;
    max-height:60px;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    opacity: 1;
    z-index: 999;
    animation: FadeIn 3s ease-in-out both;
    filter: drop-shadow(2px 4px 6px black);        
}

.swiper-banner .swiper-slide:nth-child(2):before {
    content: "";
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/slogan02.svg);
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    max-width:422px;
    max-height:60px;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    opacity: 1;
    z-index: 999;
    animation: FadeIn 2s ease-in-out both;
    filter: drop-shadow(2px 4px 6px black);           
}


/*指引*/
.swiper-banner .swiper-slide:nth-child(1):after {
    content: "";
    display: block;
    position: absolute;
    top: 86%;
    left: 50%;
    transform: translate(0%, 50%);
    animation: footer_scroll 2s cubic-bezier(0.65,0,0.35,1) infinite;
    border-left: 0.8px solid #fff;
    width: 100%;
  
}
.swiper-banner .swiper-slide:nth-child(2):after {
    content: "";
    display: block;
    position: absolute;
    top: 86%;
    left: 50%;
    transform: translate(0%, 50%);
    animation: footer_scroll 2s cubic-bezier(0.65,0,0.35,1) infinite;
    border-left: 0.8px solid #fff;
    width: 100%;
  
}

@keyframes  footer_scroll{
0% {
    transform: translateY(-10%);
    height: 0;
}
50% {
    transform: translateY(-10%);
    height: 6%;
}

100% {
    transform: translateY(0);
     height: 0;
}

}

/*慢慢淡入*/

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

}

/*內頁BANNER 設定*/
.banner {
    background-color: #212121;
    background-image: none;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
}

.banner h5 {
    color: #ffffff;
    font-family: 'Noto Sans TC';
    font-weight: 200;
    display: flex;
    align-items: flex-end;
    font-size: 25px;
    letter-spacing: 8px;
}

.blog_in_page .banner h5{
  color: transparent;
}





/*相簿*/
.album_fixed_title,.other_album,.subalbum-menu h2{
    display: none;
}
.subalbum-menu h2{
    color: #ffffff50;
    font-weight: 300;
}
.other_album_choice li{
    background: transparent;
    border: 1px solid #ffffff;
}
.other_subalbum li{
   background: transparent;
}

.overlay{
    transition: none;

}

.show-list .show_name,.other_subalbum li a p{
    font-family: "Noto Sans TC";
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    margin-top: 0;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-60%, -50%);
    z-index: 2;
    transition: .5s ease-in-out;
}


.show-list  .item .show_name,.other_subalbum li a p{
    width: 100%;
    font-family: "Noto Sans TC";
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    margin-top: 0;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition-delay: .2s;
}

.show-list .item:hover .show_name,.other_subalbum li a p:hover{
   opacity:0;
  color: #ffffff;
   transition-delay: .2s;
}
.show-list .item a::before{
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition-delay: .2s;
    z-index: 2;
}
.show-list .item a::before{
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    color: #ffffff;
    opacity: 1;
    pointer-events: none;
    transition-delay: .2s;
    z-index: 2;
}
.show-list .item a:hover::before{
     opacity: 0;
    transition-delay: .2s;
    z-index: 2;
}
.show-list .item .overlay{
    opacity: 1;
    background: #00000080;
    transform: translate(0, 0) scale(1);
    transition-delay: .2s;
}
 .show-list .item:hover .overlay {
    opacity: 0;
    transition-delay: .2s;
}

.album_descrip {
    margin-bottom: 20px;
    color: #d6d6d6;
    line-height: 1.8;
    font-family: 'Noto Sans TC';
    letter-spacing: 1px;
    font-size: 16px;
}
.pic-list .item h6{padding: 0;}
.pic-list{ grid-template-columns: repeat(3, 1fr); grid-gap: 20px;}
.show-list{ grid-template-columns: repeat(3, 1fr); grid-gap: 20px;}
.album_page .show-list{  grid-template-columns: repeat(2, 1fr); grid-gap: 0;}
.album_page .show-list .show_pic{aspect-ratio: 3 / 2;}
.album_page .show-list .item .show_name{font-size: 20px;}
    
/*首頁相簿*/
.i_album_b{display: none;}
.i_album_list{display: grid; grid-gap: 0;grid-template-columns: repeat(3, 1fr);}
.module_i_album .title_i_box{
    padding: 0 0 4% 0;
}
.module_i_album .title_i_box h6 {
    color: #fdfdfd;
    font-weight: 400;
    letter-spacing: 4px;
    font-size: 32px;
}
.module_i_album .title_i_box h4 {
    color: #d5d5d5;
    font-size: 26px;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 300;
    letter-spacing: 4px;
}
.module_i_album section{ width: 100%;max-width: 100%;}
.module_i_album{padding: 0;}
.i_album_list li a p{background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));color: #ffffff; height: 4em;}    
.i_album_list_box{padding: 0;}
.i_album_list li a p span{font-family: "Noto Sans TC", sans-serif; font-weight: 300;font-size: 16px;letter-spacing: 1px;}
.i_album_list  li:nth-child(n+7){display: none;}


/*文章設定*/
.subbox_item { width:100%;}
h5.blog_le_t{
  text-align: center;
}
.blog_search{
  filter: invert(1);
}
.blog_le .accordion{
  border: none;
}
.accordion li .link a{
  color: #ffffff;
}
.blog_le .accordion{
  border-radius: 0;
}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category{
  background: #2d2d2d !important;
}
.blog_subbox{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.blog_page h4.blog_category_title{
  display: none;
}

.accordion li .link a{
  font-weight: 500;
  text-align: center;
}
.subbox_item a:after{
  background: #0a0a0a47;
  border: none;
}
.blog_list_le{
  aspect-ratio: 4 / 3;
}
.blog_list_ri h5 {
    color: #ffffff;
    line-height: 1.8;
    font-family: 'Noto Sans TC';
    letter-spacing: 1px;
    font-size: 20px;
    font-weight: 300;
}
.blog_list_ri p{
  line-height: 1.5;
  font-family: 'Noto Sans TC';
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  font-weight: 200;
  -webkit-line-clamp: 3;
  padding: 1% 0 0 0;
}
.blog_list_ri em{
  color: #474747;
}
.subbox_item a {
    grid-template-columns: 1fr;
    padding: 0 2% 6% 2%;
}
.subbox_item{
  position: relative;
}

.subbox_item::after{
    content: '';
    position: absolute;
    border-bottom: 1px solid #ffffff;
    left: 0;
    bottom: 0;
    width: 0;
    opacity: 0;
}
.subbox_item:hover::after{
    content: '';
    position: absolute;
    border-bottom: 1px solid #ffffff;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 1;
    transition: all ease .3s;
}
.subbox_item a:before{
    color: #000000;
}
.news_related{
  background: transparent;
}
.news_related_list li a{
  background: #2f2f2f;
  padding: 4%;
}
.news_related_list{
     grid-template-columns: repeat(4, 1fr);
    max-width: 84%;
    width: 100%;
}
.news_related_list li a p{
    color: #ffffff;
    line-height: 1.8;
    font-family: 'Noto Sans TC';
    font-size: 14px;
    padding: 4% 0 0 0;
    letter-spacing: 1px;
}
h4.blog_category_title{
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 2px;
    font-size: 26px;
}
.blog_box_edit *{
  color: #ffffff;
    line-height: 1.8;
    font-family: 'Noto Sans TC';
    font-size: 16px;
    letter-spacing: 1px;
     font-weight: 300;
}
.news_related_b_box{
  display: none;
}
.news_related{
    padding-bottom: 6%;
    padding-top: 6%;
}
.news_related h6 span:before{
    color: #ffffff;
    font-family: 'Noto Sans TC';
    font-weight: 400;
    letter-spacing: 2px;
}
.news_related h6{
    margin: 0 auto 4% auto;
}
.blog_back a.article_btn_back{
    background: #4d4d4d;
}
.blog_shareData{
  display: none;
}
.blog_le {
    width: 18%;
}
.blog_ri {
    width: calc(100% - 19%);
    padding: 0 0 0 4%;
}
.blog_back a.article_btn_prev{
   padding: 2% 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blog_back a.article_btn_back{
    padding: 2% 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blog_back a.article_btn_next{
   padding: 2% 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
h5.blog_le_t span{
  display: none;
}



/*聯絡我們*/
.blank_letter{
  color: #ffffff;
  font-weight: 300;
  display: flex;
  justify-content: space-between;
}

.list_before.info li {
    padding-left: 46px;
    color: #ffffff;
    letter-spacing: 1px;
    font-family: 'Noto Sans TC';
    font-weight: 200;
}

.contact_form li input.noborder{
  border: none;
  background-color: #141414;
}

.contact_form li textarea.noborder{
 border: none;
  background-color: #141414;
}

.contact_form li .form__label{
  color: #ffffff;
  letter-spacing: 1px;
  font-family: 'Noto Sans TC';
  font-weight: 200;
   text-align: left;
  display: flex;
  font-size: 17px;

}

.info_TEL:before, .info_TEL2:before, .info_PHONE:before, .info_LINE:before, .info_FAX:before, .info_TAXID:before, .info_MAIL:before, .info_ADD:before, .info_ADD2:before{
  font-weight: 400;
  letter-spacing: 1px;
}

.contact_form li{
  grid-template-columns: 1fr;
}


.red{
  order: 2;
}

.contact_form li.last cite{
  background: #a2a2a2;
  border: none;
  color: #fff;
}

.contact_form li.last input{
  color: #fff;
}

.contact_form li.checknumBox .form__insert .captcha + img{
  filter: invert(1);
}

.contact_content .information_left{
  width: 28%;
}

.contact_content .information_right{
  width: calc(100% - 29%);
  padding-left: 4%;
}

.contact_form li.last blockquote{
  border: 1px #474747 solid;
}

.contact_form li:has(input[type=checkbox]) .form__insert, .contact_form li:has(input[type=radio]) .form__insert{
  color: #ffffff;
  letter-spacing: 1px;
  font-size: 16px;
}

button, input, optgroup, select, textarea{
  color: #ffffff;
}



/*頁腳*/
.double_key a{
  z-index: 9999;
}
.footer{
    background: #191919;
    padding: 4% 0 4% 0;
}

.footer::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/footer_star.svg);
    background-repeat: repeat-x;
    background-size: contain;
    max-width: 2000px;
    max-height: -webkit-fill-available;
    animation: flicker-5 8s linear infinite both;
    top: 0;
    z-index: 0;
}
@keyframes flicker-5 {
  0%,
  100% {
    opacity: 1;
  }
  -0.02% {
    opacity: 1;
  }
  0% {
    opacity: 1;
  }
  1% {
    opacity: 1;
  }
  1.02% {
    opacity: 1;
  }
  8.98% {
    opacity: 1;
  }
  9% {
    opacity: 0;
  }
  9.8% {
    opacity: 0;
  }
  9.82% {
    opacity: 1;
  }
  9.48% {
    opacity: 1;
  }
  9.5% {
    opacity: 1;
  }
  9.6% {
    opacity: 1;
  }
  9.62% {
    opacity: 1;
  }
  14.98% {
    opacity: 1;
  }
  15% {
    opacity: 0.5;
  }
  15.8% {
    opacity: 0.5;
  }
  15.82% {
    opacity: 1;
  }
  15.18% {
    opacity: 1;
  }
  15.2% {
    opacity: 0.7;
  }
  16% {
    opacity: 0.7;
  }
  16.02% {
    opacity: 1;
  }
  15.48% {
    opacity: 1;
  }
  15.5% {
    opacity: 0.5;
  }
  16.2% {
    opacity: 0.5;
  }
  16.22% {
    opacity: 1;
  }
  16.98% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  17.8% {
    opacity: 1;
  }
  17.82% {
    opacity: 1;
  }
  20.48% {
    opacity: 1;
  }
  20.5% {
    opacity: 0.9;
  }
  21.3% {
    opacity: 0.9;
  }
  21.32% {
    opacity: 1;
  }
  20.98% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  22.02% {
    opacity: 1;
  }
  39.98% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 1;
  }
  41.02% {
    opacity: 1;
  }
  40.48% {
    opacity: 1;
  }
  40.5% {
    opacity: 0.6;
  }
  41.4% {
    opacity: 0.6;
  }
  41.42% {
    opacity: 1;
  }
  41.98% {
    opacity: 1;
  }
  42% {
    opacity: 1;
  }
  42.8% {
    opacity: 1;
  }
  42.82% {
    opacity: 1;
  }
  59.98% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  61% {
    opacity: 1;
  }
  61.02% {
    opacity: 1;
  }
  60.18% {
    opacity: 1;
  }
  60.2% {
    opacity: 0.2;
  }
  61% {
    opacity: 0.2;
  }
  61.02% {
    opacity: 1;
  }
  60.78% {
    opacity: 1;
  }
  60.8% {
    opacity: 0.4;
  }
  61.6% {
    opacity: 0.4;
  }
  61.62% {
    opacity: 1;
  }
  61.38% {
    opacity: 1;
  }
  61.4% {
    opacity: 0;
  }
  62.2% {
    opacity: 0;
  }
  62.22% {
    opacity: 1;
  }
  61.78% {
    opacity: 1;
  }
  61.8% {
    opacity: 1;
  }
  62.8% {
    opacity: 1;
  }
  62.82% {
    opacity: 1;
  }
  75.98% {
    opacity: 1;
  }
  76% {
    opacity: 1;
  }
  77% {
    opacity: 1;
  }
  77.02% {
    opacity: 1;
  }
  77.98% {
    opacity: 1;
  }
  78% {
    opacity: 0.7;
  }
  78.8% {
    opacity: 0.7;
  }
  78.82% {
    opacity: 1;
  }
  78.98% {
    opacity: 1;
  }
  79% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  80.02% {
    opacity: 1;
  }
  99.98% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
  101% {
    opacity: 1;
  }
  101.02% {
    opacity: 1;
  }
}


.footer_menu a{
    background: transparent;
    border: transparent;
    color: #ffffff;
}

.footer_info{
    padding-right: 0;
}

.footer_info li p,.footer_info li p a{
    color: #ffffff;
    font-family: 'Noto Sans TC';
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1px;
}

.footer_logo{
    max-width: 100%;
}

.footer_logo img{
    display: none;
}

.footer_logo a::before {
    position: absolute;
    left: 0;
    content: '';
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/logo_s.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    max-width: 20%;
    max-height: 100%;
}

.footer .center {
    max-width: 82%;
}

.footer_info{
    grid-template-columns: 84px 1fr;
}

.copy{
    border-top: none;
    color: #555;
    position: absolute;
    right: 9.6%;
    text-align: right;
    padding: 0;
     margin-top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: center;
    flex-wrap: wrap;
    letter-spacing: 1px;
}

.copy a:hover{
     color: #555;
    font-weight: bold;
}


.privacyLinks a+a{
    border-left: 1px solid #555555;
}

.box_link {
    display: none;
   
}

.footer_info ul{
    display: flex;
    justify-content: space-between;
    padding-left: 10%;
}

.footer_info li{
    padding: 0;
}

.footer_info li:nth-child(1){
    width: 60%;
}

.footer_info li:nth-child(2) {
   display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.footer_menu a:first-child{
    display: none;
}

.footer_menu a{
    letter-spacing: 1px;
}

.footer_menu a:hover{
    background: #6666665c;
    border-radius: 2px;
}





@media screen and (max-width: 1280px) {
.main_header_area .container{
    max-width: 94%;
    width: 100%;
}
.header_area.sticky{
    background: #212121;
}
.header_area::before{
  max-width: 100%;
  max-height: unset;
  animation: none;
 
}

.header_area::after {
  background-position: center;
  animation: none;
  left: unset;
  max-width: 100%;
  max-height: unset;
  animation: none;
 
}

}

@media screen and (max-width:1024px) {
.header_area{
  background-image: linear-gradient(to bottom, #212121, #212121);
  position: relative;
}


.stellarnav ul{
  padding: 8% 0 0 0;
}

.nav-header {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

.nav-brand::before{
  left: 50%;
  transform: translate(-50%, 0%);
}

.stellarnav ul {
  padding: 10% 0 0 0;
}
.banner{
  min-height:100px;
}
.blog_le {
    width: 28%;
}
.blog_ri{
    width: calc(100% - 29%);
}
.blog_subbox{
    grid-template-columns: repeat(2, 1fr);
}



}
@media screen and (max-width: 980px) {
.nav-brand{
  margin: 18% auto 0 auto;
}

.nav-brand::before{
  left: 50%;
  transform: translate(-50%, 0%);
}

.stellarnav ul{
  padding: 0;
}

/*相簿*/
.show-list{
  grid-template-columns: repeat(1, 1fr);
}
.album_info_page  .pic-list{
  grid-template-columns: repeat(2, 1fr);
}


.case_page #content{
  background-position: 20%;
}

/*文章*/
.blog_le {
  width: 100%;
}
.blog_ri {
  width: 100%;
  padding: 0;
}
.news_related_list{
  grid-template-columns: repeat(2, 1fr);
}


/*頁腳*/
.footer_info ul{
    flex-direction: column;
}
.footer_info li:nth-child(1){
    width: 100%;
}
.footer_info li:nth-child(2){
    width: 100%;
}
.footer_menu a{
    padding: 5px 0;
    margin: 1% 0 2% 0;
}
.box_link{
    display: none;
}
.footer::before{
    background-size: cover;
    max-width: 100%;
}



}
@media screen and (max-width: 820px) {


/*頁腳*/  
.footer_logo a::before{
  max-height: 88%;
}

}
@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
.footer.with_shopping_mode { padding:30px 0 70px; }
#to_top { bottom:60px;}
.bannerindex { padding:0; margin:0;}
.box_link{display: none;}
#bottom_menu{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stellarnav.mobile ul{
    background: #191919;
}
.stellarnav.mobile.left .close-menu{
    background: transparent;
}
.stellarnav.mobile.left > ul{
    border-right: 1px #2a2a2a solid;
}
.stellarnav.mobile > ul > li{
    border-bottom: 1px #353535 solid;
}
.stellarnav .menu-toggle{
    padding: 22px 0;
}
.nav-brand::before{
  background-size: cover;
  height: 80px;
}
.header_area{
  height: 90px;
}
.swiper-banner .swiper-slide:nth-child(1):before{
  top: 72%;
}
.swiper-banner .swiper-slide:nth-child(2):before{
  top: 72%;
}
.stellarnav .menu-toggle span.bars{
  filter: contrast(0.9);
}
.case_page #content{
  background-position: 10%;
}
.stellarnav .menu-toggle span.bars span{
  background: #d6d6d6;
}
.stellarnav .menu-toggle:after{
  color: #d6d6d6;
}

/*相簿*/
.album_info_page .pic-list {
  grid-template-columns: repeat(1, 1fr);
}


/*聯絡我們*/
.contact_form li .form__label{
  background: transparent;
  
}

.contact_content .information_left {
    width: 100%;
    padding: 0;
}

.contact_page .main_part{
    width: 100%;
    max-width: 90%;
}

.contact_content .information_right{
    width: 100%;
    padding-left: 0;
}

.contact_form li.last blockquote{
  width: 50%;
}



/*頁腳*/
.footer_info{
    grid-template-columns: 1fr;
}

.footer_logo {
  height: 140px;
}

.footer_logo a::before{
  height: 28%;
  background-position: center  top;
}

.footer_info ul{
  padding: 0;
}

.footer_menu{
  width: 100%;
}

.footer_menu a{
  border: 1px solid #2f2f2f;
  width: 48%;
  text-align: center;
}

.footer_info{
  padding: 0;
}
.footer_logo a::before{
      max-width: 100%;
}

#bottom_menu{
  background: #121212;
}

#bottom_menu li a{
  color: #ffffff;
}

#to_top{
  background: #121212;
  color: #ffffff;
}

#to_top i:before, #to_top i:after{
  background: #fff;
}

.double_key{
  position: relative;
  height: 0vh;
}



}

@media screen and (max-width: 600px) {
.news_related_list {
  grid-template-columns: repeat(1, 1fr);
}
.blog_in_page .main_part{
  max-width: 84%;
  width: 100%;
}



}
@media screen and (max-width: 480px) {
.header_area{
  position: fixed;
}

/*大圖*/
.swiper-wrapper .swiper-slide img{
    width: auto;
    height: 70vh;
    object-fit: cover;
    object-position: 30%;
    position: relative;

}
.swiper-banner .swiper-slide:nth-child(1)::before{
    background-image: url(https://pic03.eapple.com.tw/xinhengdesign/slogan01_phone.svg);
    background-size: 80%;
    top: 68%;
    max-width: 414px;
    max-height: 119px;
}

.swiper-banner .swiper-slide:nth-child(2):before {
   background-image: url(https://pic03.eapple.com.tw/xinhengdesign/slogan02_phone.svg);
    background-size: 80%;
    top: 68%;
    max-width: 341px;
    max-height: 86px;
}

.case_page #content{
    background-position: 68%;
}

.demoE08 ul{
    max-width: 100%;
}

h5.blog_le_t{
  text-align: center;
}

.blog_search{
  filter: invert(1);
}
.blog_subbox{
  grid-template-columns: repeat(1, 1fr);
}

.album_page .show-list{
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;
}



}