/*top*/
#to_top {
    left: 20px;
    background: #ffffffa8;
    box-shadow: unset;
    color: #3aa8ff;
    bottom: 30px;
    width: 50px;
    height: 50px;
    border: 1px solid #97f4ff;
    font-size: 11px;
    padding-top: 5px;
    box-shadow: 0 0 12px rgba(58,168,255,0.7),
                0 0 24px rgba(58,168,255,0.4);
    animation: topmoveTop 1.5s ease-in-out infinite alternate;
}

#to_top i:before, #to_top i:after {    background: #3aa8ff;}
#to_top i.top:before, #to_top i.top:after {    height: 10px;    top: 6px;}
 @keyframes topmoveTop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
}


/*header*/
.pageIndex .main_header_area {
    background: linear-gradient(180deg, #2971dd, #c0d2ff1f);
    box-shadow: none;
    position: relative;
    height: 90px;
}

.header_area {
    position: fixed;
    z-index: 9999;
    width: 100%;
    padding: 0;
    top: 0;
    background: transparent;
    transition: all 2s;
}

.header_area.sticky {
    top: 0px;
    background: transparent;
    transition: all 2s;
    height: 130px;
}

.main_header_area {
    position: relative;
    background: transparent;
}

.header_area .main_header_area::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        270deg,
        #ea5098 0%,
        #033e98 25%,
        #ea5098 50%, 
        #033e98 75%,  
        #ea5098 100%   
    );
    position: absolute;
    top: -300px;
    left: 0;
    backdrop-filter: blur(5px);
    box-shadow: 1px 1px 5px #42424203;
    animation: bgFlowFast 6s linear infinite;
    background-size: 500% 100%;
    height: 90px;
}

@keyframes bgFlowFast {
    0%   { background-position:   0% 50%; }
    100% { background-position: 150% 50%; }
}

.header_area.sticky .main_header_area::before {
    top: 0;
    transition: all 1s cubic-bezier(0.53, 0.09, 0.54, 0.98);
}

/*logo*/

.header_area .nav-brand {
    display: inline-block;
    width: 100%;
    padding-top: 10px;
}

.header_area.sticky .nav-brand {
    transition: all 0.9s;
    padding-top: 5px;
}

.header_area .nav-brand img {
    max-width: 100%;
    transition: all 0.5s;
}





.nav-header {
    z-index: 123;
    top: 0;
    left: 0;
    max-width: 350px;
    width: 100%;
    grid-row: 1 / span 2;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

 .header_area .nav-brand img {
  max-width: 250px;
  transition: all 0.5s;
}


 .header_area.sticky .nav-brand img {
  max-width: 300px;
  transition: all 0.5s;
}



.stellarnav > ul > li { letter-spacing: 0.5px;}
.stellarnav > ul > li > a { color: transparent; font-size: 15px;}
.stellarnav > ul > li > a b { color: #ffffff; letter-spacing: 2px; ;font-weight:400;}

.stellarnav > ul > li > a:hover b {  color: #ffffff; }
.stellarnav > ul > li:hover { background: transparent;}

.stellarnav > ul > li:nth-of-type(6) > a,
.stellarnav > ul > li:nth-of-type(7) > a{padding-right: 17px !important;}



.stellarnav ul ul { background: transparent; width: 150px; font-size: 14px;}
.stellarnav li li {border: none;}


.stellarnav li li:nth-child(even) a{ background: #e5e1d6;}
.stellarnav li li:hover a{ color: white; background: #00000099;}
.stellarnav li li.has-sub:hover > a:after {border-left: 7px solid #fff;}
.stellarnav li li.has-sub > a:after{border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid #231815;}


.stellarnav>ul>li>a {
    padding: 10px 5px;
    color: #ffffff;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: 40px;
    height: 40px;
    cursor: pointer;
    text-align: center;
    font-weight: 900;
    transition: all 0.5s;
    font-family: "Noto Sans TC", sans-serif;
}


.stellarnav>ul>li>a:hover {
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size:17px;
    
}


.tp_links {
    display: none;
}








.pageIndex .swiper-wrapper .swiper-slide::before{
    position: absolute;
    content: "";
    background: url(https://pic03.eapple.com.tw/hongpei/bg.png) no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-size: cover;
    z-index: 9;
   
}

.bannerindex .swiper-slide.swiper-slide-active:nth-child(1):after {
    position: absolute;
    content: "";
    background: url(https://pic03.eapple.com.tw/hongpei/text01.png) no-repeat;
    background-size: contain;
    width: 100%;   
    left:4%;
    top: 0%;
    z-index: 99;
    animation: slide-up 1s cubic-bezier(.39, .575, .565, 1.000) both;
    height: 100vw;

}

.bannerindex .swiper-slide.swiper-slide-active:nth-child(2):after {
    position: absolute;
    content: "";
    background: url(https://pic03.eapple.com.tw/hongpei/text02.png) no-repeat;
    background-size: contain;
    width: 100%;   
    left:4%;
    top: 0%;
    z-index: 99;
    animation: slide-up 1s cubic-bezier(.39, .575, .565, 1.000) both;
    height: 100vw;

}

@keyframes slide-up {
 0% {
        transform: translateY(30px);
        opacity: 0;
        filter: blur(12px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}



/*側邊浮動*/

.linksBtn {display: none;}


.info_fix {right: 22px; padding-top: 20px; width: 60px;}
.info_fix_links { display: flex !important; position: relative; z-index:999;}



.info_fix_links a {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    margin: 5px;
    border: 0px solid #ffb20200;
    box-shadow: 0 0 10px #00d8e9;
     animation: topmoveTop 1.5s ease-in-out infinite alternate;
}

.fa-phone-volume::before {
    content: "\f2a0";
    color: #48aaff;
}

.fa-envelope::before {
    content: "\f0e0";
    color: #48aaff;
}

.fa-facebook-f:before {
    content: "\f39e";
    color: #48aaff;
}

.fa-instagram:before {
    content: "\f16d";
     color: #48aaff;
}

.info_fix_fb:hover .fa-facebook-f:before {
    
    color: #fa62bc;
}

.info_fix_ig:hover .fa-instagram:before {
   
     color: #fa62bc;
}


.info_fix_tel:hover .fa-phone-volume::before {
    color: #fa62bc;
}
.info_fix_mail:hover .fa-envelope::before {
    color: #fa62bc;
}

.info_fix_links a:hover {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    color: #ffffff;
    margin: 5px;
    border: 0px solid #ffb20200;
     box-shadow: 0 0 10px #25dbff;
}
.info_fix_tel2 {
    display: none !important;
}

@keyframes topmoveTop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
}




@media screen and (max-width:480px) {
.info_fix { right: 5px; width: 50px;}
.info_fix_links:before {width: 50px; left: 45%;top: -70px;}
}


@media only screen and (max-width: 768px) {
   .nav-header {  
    max-width: 180px;
} 
}
@media only screen and (max-width: 480px) {
   .nav-header {   max-width: 130px;} 
    .header_area .main_header_area::before {height: 60px;}
}






/*footer*/

.footer_info li {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.footer_info li p.tel2:before { content:'營業時間：';}



.footer_info li p.taxid  { order: 2; }
.footer_info li p.phone { order: 3; }
.footer_info li p.tel   { order:4 ; }
.footer_info li p.fax  { order: 5; }
.footer_info li p.mail  { order:6 ; }
.footer_info li p.add   { order: 7; }
.footer_info li p.tel2  { order: 8; }

.footer_info li p.line  { order: 1; }




.footer{         
    z-index: 99;
    background-image: url(https://pic03.eapple.com.tw/hongpei/footer.jpg); 
    background-position:bottom;
    background-attachment: fixed;}

.footer_logo img { width: 100%;display: none;}
.footer_info {    display: flex;    flex-wrap: wrap;    align-items: center;    justify-content: center;padding: 0;}
.footer_info ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}
.footer_info li{width: 45%;font-family: "Noto Sans TC", sans-serif;}
.footer_info li p {color: #fff;font-family: noto;font-family: "Noto Sans TC", sans-serif;}
.footer_info li p a {  color: #fff;}
.footer_info li p.mail{display: none;}


.footer_menu {    display: grid;    grid-template-columns:1fr 1fr 1fr;    gap: 5px;}
.footer_menu a {    
    margin: 0;	
    text-align: left;	
    padding: 5px 5px 5px 25px;
    transition: all 0.3s;
    border: none;
    color: #ffffff;
    background: #ffffff00;
    position: relative;
}

.footer_menu a:first-child {display:none;}
.footer_menu a:hover {    background: #ffffff00;letter-spacing: 2px;}
.copy {    background: var(--MainColor);    color: #fff;	border:none;}
.copy a{    color: #fff;transition:all 0.3s;}
.box_link{display: none;}
.box_link a{transition:all 0.3s;}
.box_link a:hover {    background: #ADA17E;    color: #fff;}


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

#bottom_menu {display: none; }
.footer.with_shopping_mode { padding:30px 0 0px; }
#to_top { bottom:60px;}
.footer_info li p{text-align: center;}
.footer_info li { width: 90%;}
.footer_menu {    max-width: 450px;    margin: auto;}
 .footer_menu {  grid-template-columns: 1fr 1fr;}
.footer_info { justify-content: flex-start;}
.footer_logo { margin-left: 17px;}
    .footer_info li p {  text-align: left;}
}