@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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');


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




.tp_links a{
    color: #6e6e6e;
}



.me_tp_features{
    padding: 0;
    display: block;
    filter: invert(0.2);
    padding: 1% 0 0 0;
}

.me_tp_features a i{
    margin: 0 10px;
}


.nav-brand{
    display: block;
    max-width: 100%;
    margin: 4% 0 0 0;
}


/*版面*/
.other_select_page  .main_part{
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.other_page .main_part{
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.album_class_page  .main_part,.album_info_page  .main_part{
    width: 100%;
    max-width: 90%;
    padding: 1% 0 6% 0;
}

.album_page  .main_part{
    width: 100%;
    max-width: 90%;
    padding: 1% 0 6% 0;
}



.blog_page  .main_part,.blog_in_page  .main_part{
    width: 100%;
    max-width: 80%;
   
}

.contact_page .main_part{
    width: 100%;
    max-width: 100%;
    margin: auto;
    padding: 0;
}

.services_page .main_part{
    width: 100%;
    max-width: 100%;
    margin: auto;
    padding: 0;
}



.contact_page .contact_editbox{
    padding: 0;
}





.main_header_area .container{
    max-width: 95%;
    width: 100%;
    margin: auto;
}

.pageIndex .header_area{
    position: fixed;
    background: #ffffffd1;
    height: 110px;
}

.header_area{
    background: #ffffff;  
    padding: 0.2%;
}

.main_header_area {
   
    padding: 0;
}

.navigation{
    grid-template-columns: 1fr;
}

.nav-header {
    max-width: 250px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    z-index: 9999;
}

.stellarnav{
    position: relative;
    width: 100%;
    padding: 0;
}

.stellarnav ul{
    margin: 0  auto;
    text-align: center;
    width: 70%;
}

.stellarnav li li{
    text-align: center;
}

.stellarnav li li:hover{
    background-color: #f0f0f0;
}

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



.stellarnav > ul > li.has-sub > a {
    padding-right: 0;
}

.stellarnav > ul > li:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background: #dddddd;
}

.stellarnav > ul > li:last-child:after{
    display: none;
}

.stellarnav > ul > li{
    width: 144px;
    text-align: center;
}

.stellarnav > ul > li > a{
    font-family: "Noto Sans TC", sans-serif;
    letter-spacing: 3px;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
}


.path{
    display: none;
}


/*特效*/
.swiper-slide.swiper-slide-active:nth-child(1)::before {
    content: "";
    display: block;
    position: absolute;
    background-image: url(https://pic03.eapple.com.tw/leijhou/01cover_w.png);
    width: 100%;
    max-width: 12%;
    height: 20%;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(0%, 0%);
    z-index: 101;
    pointer-events: none;
    animation: banner-text 3s forwards;
}

.swiper-wrapper .swiper-slide.swiper-slide:nth-child(1)::after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    left: 8%;
    background-image: url(https://pic03.eapple.com.tw/leijhou/02cover_text.png);
    width: 100%;
    max-width: 9%;
    height: 56%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 90;
    -webkit-animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

.swiper-slide.swiper-slide-active:nth-child(2)::before {
    content: "";
    display: block;
    position: absolute;
    background-image: url(https://pic03.eapple.com.tw/leijhou/01cover_w.png);
    width: 100%;
    max-width: 12%;
    height: 20%;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(0%, 0%);
    z-index: 101;
    pointer-events: none;
    animation: banner-text 3s forwards;
}

.swiper-wrapper .swiper-slide.swiper-slide:nth-child(2)::after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    left: 8%;
    background-image: url(https://pic03.eapple.com.tw/leijhou/02cover_text.png);
    width: 100%;
    max-width: 9%;
    height: 56%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 90;
    -webkit-animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

@-webkit-keyframes slide-top {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
    }
}
  


@keyframes  banner-text{

0% {
    opacity: 0;
    transform: translate(0%, 0%) ;
    background-position: 0 0;
}
25% {
    opacity: 0.2;
    transform: translate(0%, 0%);
    background-position: 0 0;
}
50% {
    opacity: 0.4;
    transform: translate(0%, 0%);
    background-position: 0 0;
   
}
80% { 
    opacity: 0.6;
    transform: translate(0%, 0%);
    background-position: 0 0;
   
}
100% {
    opacity: 1;
    transform: translate(0%, 0%);
    background-position: 0 0;
}

}

/*內頁BANNER 設定*/
.other_select_page  .banner,.services_page  .banner,.other_page .banner{
    display: none;
}


.banner h5 {
    color: #606060;
    font-family: "Noto Serif TC", serif;
    letter-spacing: 6px;
    font-weight: 400;
    font-size: 30px;
}

.banner.banC {
    background-color: #ffffff;
    background-image: none;
}

.album_class_page  .banner.banE,.album_page .banner.banE,.album_info_page  .banner.banE{
    background-color: #ffffff;
    background-image: none;
}


.blog_page  .banner.banblog,.blog_in_page .banner.banblog{
    background-color: #ffffff;
}



/*相簿*/
.subalbum-menu h2{
    color: #808080;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
}

.show-list .show_name{
    font-family: "Noto Serif TC", serif;
    font-weight: 300;
    margin: 3% 0 3% 5%;
}


.show-list{
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    grid-gap: 40px;
}

.pic-list{
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    grid-gap: 40px;
    margin-top: 4%;
}

.album_descrip {
    font-family: "Noto Sans TC", sans-serif;
    color: #262626;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 16px;
}

.show-list .item{
    background-color: #ededed;
}

.show-list .item:hover .show_name{
    color: #505050;
}

.other_album{
    margin-top: 7%;
}

.other_album_choice li{
    background: #ececec;
    border-radius: 4px;
}

.other_album_choice li a{
    color: #505050;
}

.subalbum-menu{
    padding: 0;
}

.album_page .show-list .show_pic img{
    opacity: 0.9;
}




/*文章*/
.blog_subbox{
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    grid-gap: 40px;
}

.subbox_item{
    border: 1px solid #d8d8d8;
}

.subbox_item a{
    grid-template-columns: 1fr;
}

.blog_list_ri{
    padding: 4%;
}

.blog_list_ri p{
    font-family: 'Noto Sans TC';
    line-height: 180%;
    font-weight: 400;
    -webkit-line-clamp: 3;
    margin-bottom: 8%;
    color: #595959;
    letter-spacing: 1px;
}

.blog_list_ri h5{
    font-family: 'Noto Sans TC';
    color: #333333;
}

.subbox_item a:after{
    background: transparent;
    border: none;
}


.subbox_item a:before{
    opacity: 1;
    color: #d0d0d0;
}


.blog_list_ri em{
    font-size: 15px;
    color: #b7b7b7;
}

h5.blog_le_t em{
    font-family: "Noto Serif TC", serif;
}

h5.blog_le_t{
    color: #666;
    text-align: center;
}

.accordion li .link a{
    color: #444;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Noto Sans TC';
}

.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category{
    background: #bdbdbd !important;
}

.blog_le .accordion{
    border-radius: 6px;
}

.blog_ri{
    padding: 0 0 0 6%;
    width: calc(100% - 17%);
}

.blog_le{
    width: 16%; 
}


h4.blog_category_title{
    font-family: "Noto Serif TC", serif;
    font-weight: 400;
    letter-spacing: 3px;
}


.blog_box_edit *{
    font-family: 'Noto Sans TC';
    font-weight: 400;
    letter-spacing: 1px;
}

.blog_back a.article_btn_prev{
    background: #d5d5d5;
}

.blog_back a.article_btn_next{
    background: #d5d5d5;
}

.blog_back a.article_btn_back{
    background: #adadad;
}

.news_related{
    display: none;
}

.blog_back{
    margin-bottom: 4%;
    margin-top: 4%;
}

.blog_search input[type=search]{
    border-radius: 6px;
}

.blog_page  h4.blog_category_title{
    padding: 0;
    margin-bottom: 0;
}







/*下拉*/
.promotion_title{
    display: none;
}

.page{
    display: none;
}

.other_select_page .other_promotion{
    display: none;
}



/*聯絡我們*/
.contact_content{
    display: none;
}



/*頁腳*/
.box_link{
    display: none;
}

.footer {
    background: #272727;
}



.footer .center{
    max-width: 80%;
    width: 100%;
}

.footer_info ul{
    display: flex ;
    width: 100%;
}

.footer_info{
    grid-template-columns: 1fr;
    padding-right: 0;
}

.copy{
    border-top: 1px #313131 solid;
}

.copy a:hover{
    color: #999;
}

.footer_logo{
    margin: 2% 0 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}



.footer_logo img{
    filter: contrast(0.1)  brightness(100);
}

.footer_info li{
    padding: 2% 0;
}



.footer_info li p{
    color: #ffffff;
    font-family: "Noto Sans TC", serif;
    font-weight: 200;
    padding-left: 1%;
}

.footer_info li p a{
    color: #ffffff;
}


.footer_menu a{
    color: #888;
    background: #272727;
    border: 1px #454545 solid;
    width: 30%;
    text-align: center;
    padding: 2%;
    font-family: "Noto Sans TC", serif;
}


.footer_menu a:nth-child(1){
    display: none;
}

.footer_menu a:hover {
    background: #3d3c3c;
    color: #fff;
}

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

.footer_info li:nth-child(2){
    width: 58%;
}

@media screen and (max-width: 1800px) {
.stellarnav ul{
    width: 60%;
}

.stellarnav > ul > li{
    width: 110px;
}
}
@media screen and (max-width: 1700px) {
.main_header_area .container{
    max-width: 94%;
    width: 100%;
    margin: auto;
}

.nav-brand{
    margin: 1.6% 0 0 0;
}




}
@media screen and (max-width: 1500px) {
.main_header_area .container{
    max-width: 90%;
    width: 100%;
    margin: auto;
}

.stellarnav ul {
    width: 75%;
    margin: 0 auto;
}

.stellarnav > ul > li{
    width: 120px;
}

.nav-brand {
    margin: 1.8% 0 0 0;
}

}
@media screen and (max-width: 1300px) {
.stellarnav ul {  
    width: 80%;
    margin: 0 auto;
}

}   
@media screen and (max-width: 1280px) {
.main_header_area .container{
    max-width: 90%;
    width: 100%;
    margin: auto;
}

.me_tp_features{
    padding: 1% 0 0 0;
}

.pageIndex .header_area{
    position: relative;
}

.stellarnav > ul > li{
    width: 104px;
}


.nav-brand img {
    max-width: 90%;
}

.me_tp_features{
    text-align: right;
}

.stellarnav{
    padding: 0; 
    width: 100%;
    margin: 0 auto;
}
.stellarnav ul {  
    width: 100%;
    margin: 0 auto;
}

    

.swiper-wrapper .swiper-slide.swiper-slide:nth-child(1)::after{
    width: 100%;
    max-width: 13%;
    height: 73%;
    top: 18%;
    -webkit-animation: none;
    animation: none;
}

.swiper-slide.swiper-slide-active:nth-child(1)::before{
    width: 100%;
    max-width: 12%;
    height: 20%;
    -webkit-animation: none;
    animation: none;
}

.swiper-wrapper .swiper-slide.swiper-slide:nth-child(2)::after{
    width: 100%;
    max-width: 13%;
    height: 73%;
    top: 18%;
    -webkit-animation: none;
    animation: none;
}

.swiper-slide.swiper-slide-active:nth-child(2)::before{
    width: 100%;
    max-width: 12%;
    height: 20%;
    -webkit-animation: none;
    animation: none;
}




/*文章*/
.blog_le {
    width: 22%;
}
.blog_ri {
    padding: 0 0 0 4%;
    width: calc(100% - 23%);
}

.blog_subbox{
    grid-template-columns: repeat(auto-fill, minmax(47%, 1fr));
}


.footer_info li:nth-child(2) {
    width: 68%;
}

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

.footer_info li:nth-child(1){
    width: 100%;
}
.footer_info li:nth-child(2) {
    width: 48%;
}



}

@media screen and (max-width: 1024px) {
.stellarnav ul{
    margin: 0;
    
}

.stellarnav{
    padding: 3% 0 0 0;
}

.nav-brand{
    margin: 0 auto;
}



.pageIndex .header_area{
    height: auto;
}



/*文章*/
.blog_le {
    width: 26%;
}

.blog_ri {
    padding: 0 0 0 4%;
    width: calc(100% - 28%);
}

.blog_page .main_part, .blog_in_page .main_part{
    width: 100%;
    max-width: 90%;
    padding: 0 20px;
}




}
@media screen and (max-width: 980px) {
.main_header_area .container {
    max-width: 100%;
}





.footer_info ul{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.footer_info li:nth-child(2) {
    width: 100%;
}




}

@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
.bannerindex { padding:0; margin:0;}
.footer.with_shopping_mode { padding:30px 0 70px; }
#to_top { bottom:60px;}

.stellarnav ul {
    margin: 0;
}

.stellarnav > ul > li{
    width: 100%;
}

.stellarnav > ul > li:after{
    display: none;
}

.stellarnav.mobile{
    top: 18%;
}

.me_tp_features {
    text-align: center;
    padding: 0 0 7px 0;
}


.nav-header {
    max-width: 40%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 99;
}

.nav-brand{
    margin: 0.8% auto 0 auto;
}

.stellarnav.mobile {
    top: 6%;
}

.me_tp_features{
    padding: 0 0 14px 0;
}


/*文章*/
.blog_le {
    width: 100%;
}

.blog_ri {
    padding: 2%;
    width: 100%;
}

.blog_page .main_part, .blog_in_page .main_part{
    margin-bottom: 8%;
}
.album_class_page .main_part, .album_info_page .main_part, .album_page .main_part{
    margin-bottom: 8%;
}


/*相簿*/
.show-list{
    grid-template-columns: repeat(auto-fill, minmax(46%, 1fr));
}




/*頁腳*/
.footer_menu a{
    width: 49%;
}

.footer_info{
    padding: 0;
}

.footer_info li p{
    letter-spacing: 2px;
}
#bottom_menu  .fa-phone-volume::before{
    color: #555555;
}

#bottom_menu .fa-phone-volume::after{
    right: 0;
    position: absolute;
}





}

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





}


@media screen and (max-width: 480px) {
.nav-brand img {
    max-width: 74%;
}

.swiper-banner .swiper-slide img {
    height: 558px;
    object-fit: cover;
}


.swiper-wrapper .swiper-slide.swiper-slide:nth-child(1)::after{
    width: 100%;
    max-width: 39%;
    height: 100%;
    background-size: 100%;
    top: 0;
    -webkit-animation: none;
    animation: none;
    
}

.swiper-slide.swiper-slide-active:nth-child(1)::before{
    width: 100%;
    max-width: 40%;
    height: 20%;
    top: 2%;
    -webkit-animation: none;
    animation: none;
}


.swiper-wrapper .swiper-slide.swiper-slide:nth-child(2)::after{
    width: 100%;
    max-width: 39%;
    height: 100%;
    background-size: 100%;
    top: 0;
    -webkit-animation: none;
    animation: none;
}

.swiper-slide.swiper-slide-active:nth-child(2)::before{
    width: 100%;
    max-width: 40%;
    height: 20%;
    top: 2%;
    -webkit-animation: none;
    animation: none;
}





/*文章*/
.blog_le {
    width: 100%;
}

.blog_ri {
    width: 100%;
    padding: 0;
}

.subbox_item a {
    grid-template-columns: 1fr;
}

.blog_box {
    padding: 0;
}

.subbox_item a:before{
    right: 5%;
}


.blog_list_ri{
    padding: 8% 4% 14% 4%;
}

.blog_page .main_part, .blog_in_page .main_part{
    padding: 0;
}



/*banner*/
.banner.banC,.banner.banblog,.banner.banE{
    height: 160px;
}

.show_content{
    padding: 0;
}




/*頁腳*/
.footer .center{
    max-width: 90%;
}

.footer_menu a {
    width: 47%;
}


}