@charset "utf-8";
/*無憂動物醫院*/
@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UoqMunThenKhung&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/*卷軸*/
&::-webkit-scrollbar {
    background: #101010;
    width: 5px;
}
&::-webkit-scrollbar-track-piece {
    background: #e4ddd7;
}
&::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #F3D08E;
}
&::-webkit-scrollbar-track {
    box-shadow: transparent;
}
/*卷軸結束*/


/*版面*/
#content_main{
    margin-top: 0;
}
.blog_page  .main_part,
.blog_in_page  .main_part{
    width: 100%;
    max-width: 74%;
}
.contact_page .main_part{
    width: 100%;
    max-width: 74%;
}
.share_page .main_part{
    max-width: 100%;
    width: 100%;
    padding: 0;
}
.news_page .main_part {
    width: 100%;
    max-width: 100%;
    margin: auto;
    padding: 0;
}
.promotions_page .main_part {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.services_page  .main_part {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

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

.fa-line:before{
    color: #84c16b;
}
.fa-phone-volume::before {
    color: #ed6f6c;
}
.tp_links a {
    font-size: 22px;
    color: #333;
    margin: 0;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 4%;
}
.me_tp_features{
    display: none;
    width: 5%;
}


/*大圖*/
.swiper-banner .swiper-slide{
    position: relative;
}

/*大圖*/
.swiper-banner .swiper-slide{
    position: relative;
}


.swiper-banner .swiper-slide img:nth-child(1) {
    z-index: 1;
    position: relative;
    animation: scale-in-center 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
}
.swiper-banner .swiper-slide img:nth-child(2) {
    z-index: 1;
    position: relative;
    animation: scale-in-center 4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
@keyframes scale-in-center {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}



/* 每顆不同大小與顏色*/
.swiper-banner .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: 105%;
    background-position: center center;
    background: 
    radial-gradient(circle 128px at 11% 82%, #AFD5C6 100%, transparent 100%), 
    radial-gradient(circle 100px at 90% 25%, #AFD5C6 100%, transparent 100%),
     radial-gradient(circle 106px at 88% 80%, #F3D08E 100%, transparent 100%);
    background-size: contain;
    animation: float1 15s ease-in-out infinite alternate;
    z-index: 0;
}
/* 自然曲線移動 */
@keyframes float1 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(50px, -70px); }
  100% { transform: translate(-50px, 50px); }
  }
/*不會動移動圓圈*/
.swiper-banner .swiper-slide:nth-child(1)::before {
    position: absolute;
    content: '';
    position: absolute;
    inset: 0;
    left: 0;
    width: 105%;
     background: 
    radial-gradient(circle 169px at -1% 54%, #F3D08E 100%, transparent 100%),
    radial-gradient(circle 170px at 73% 107%, #F3D08E 100%, transparent 100%);
    background-size: contain;
     z-index: 0;
    animation: scale-in-center 3.4s cubic-bezier(0.79, 0.28, 0.45, 0.94) 1s;
}
@keyframes scale-in-center {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


.nav-header{
    max-width: 70%;
    width: 100%;
}
.header_area{
    position: fixed;
    width: 100%;
    background: transparent;
    padding: 0;
}
.header_area.sticky {
    position: fixed;
    width: 100%;
    z-index: 9999;
    background-color: #EDF8F4;
    border-radius: 0 0  50px 50px;
}
.navigation {
    grid-template-columns: 12% 1fr;
    padding-top: 0.6%;
}
.main_header_area .container{
    width: 100%;
    max-width: 90%;
    text-align: center;
}
.stellarnav {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1% 0;
}
.stellarnav ul{
    padding: 1% 0 0 0;
}
.stellarnav > ul > li {
    display: inline-block;
    position: relative;
}
.stellarnav > ul > li > a {
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 500;
    letter-spacing: 1px;
    width: 130px;
    color: #111111;
    overflow: unset;
    font-size: 17px;
    z-index: 1;
    position: relative;
}
.stellarnav li a{
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 200;
    letter-spacing: 1px;
    color: #111111;
    font-size: 14px;
}
.stellarnav li.has-sub > a:after{
   border: none;
}
.stellarnav > ul > li > a:hover::after {
    opacity: 1;
    animation: rotate-90-bottom-cw 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.stellarnav > ul > li > a::after {
    content: '';
    position: absolute;
    width: 45px;
    height: 45px;
    left: 0;
    bottom:0;
    background: #f3d08e;
    border-radius: 50px;
    z-index: -1;
    opacity: 0;
}

/*內頁BANNER 設定*/
.banner{
    background: transparent;
    height: 500px;
    overflow: hidden;
    position: relative;
}
.banner::after {
    content: '';
    position: absolute;
    background-image: url(https://pic03.eapple.com.tw/carefreeanimal/s_image_banner.png);
    background-repeat: no-repeat;
    left: 0;
    top: 8%;
    width: 99%;
    height: 500px;
    background-size: contain;
    z-index: 0;
    animation: float-vertical 3.5s ease-in-out infinite;
}
@keyframes float-vertical {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(4px, -14px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.banner::before {
    content: '';
    position: absolute;
    background-image: url(https://pic03.eapple.com.tw/carefreeanimal/round_image_banner.png);
    background-repeat: no-repeat;
    left: 0;
    top: 4%;
    width: 100%;
    height: 500px;
    background-size: contain;
    z-index: 0;
    animation: floatLayer2 45s ease-in-out infinite alternate;
}
@keyframes floatLayer2 {
0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
50% {
    -webkit-transform: translateX(-5%);
    transform: translateX(-5%);
}
100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
}
.other_select_page  .banner,.news_page  .banner,.case_page .banner,.services_page  .banner{
     display: none;
}
.path{
    display: none;
}
.services_page .banner h5 {
    display: none;
}
.banner h5 {
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-size: 38px;
    letter-spacing: 3px;
    z-index: 1;
    font-weight: 300;
    display: flex;
    flex-direction: column;
}
.blog_page .banner h5::after, .blog_in_page .banner h5::after {
    content: 'Column';
    position: relative;
    left: 0;
    font-family: "Poppins", sans-serif;
    color: #AD724E;
    font-size: 45px;
    line-height: 1;
    font-weight: 200;
}
.share_page .banner h5::after {
    content: 'News';
    position: relative;
    left: 0;
    font-family: "Poppins", sans-serif;
    color: #AD724E;
    font-size: 45px;
    line-height: 1;
    font-weight: 200;
}
.contact_page  .banner h5::after {
    content: 'Traffic';
    position: relative;
    left: 0;
    font-family: "Poppins", sans-serif;
    color: #AD724E;
    font-size: 45px;
    line-height: 1;
    font-weight: 200;
}

/*相簿*/
.album_fixed_title {
    width: 100%;
    background: transparent;
    text-align: center;
    padding-right: 0;
}
.other_album_choice li a{
    color: #78552d;
}
.other_album_choice li a i.fa-solid.fa-right-from-bracket{
    display: none;
}
.album_fixed_title span:before{
    width: 100%;
    font-family: "Huninn", sans-serif;
    letter-spacing: 1px;
    font-size: 22px;
    font-weight: 500;
    padding-left: 0;
    margin-left: 0;
    margin: 0 auto;
    color: #7E5130;
}
.album_fixed_title span{
    padding-bottom: 2%;
}
.album_fixed_title i{
    display: none;
}
.other_album_choice {
    margin: 7px auto;
    text-align: center;
}
.other_album_choice li {
    background-image: linear-gradient(to right, #F1D0CD, #B0DCE3, #C9CFE9);
    width: 18%;
    padding: 9px;
    font-size: 18px;
}
.subalbum-menu h2 {
    color: #7e5130;
    font-family: "Huninn", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 24px;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 4%;
}
.show-list,
.pic-list{
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1vw;
    margin-bottom: 4%;
}
.show-list .show_name {
    text-align: center;
    line-height: 2.0;
    color: #7e5130;
    font-family: "Huninn", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 20px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.show-list .item:hover .show_name {
    color: #7e5130;
    
}
.other_subalbum li a p {
    line-height: 2;
    background: #ffffff6e;
    font-size: 18px;
    padding: 1%;
    text-align: center;
    letter-spacing: 1px;
}
.show-list .show_pic{
    aspect-ratio: 3 / 3.4;
    border-radius: 8px;
}
.pic-list .show_pic{
    border-radius: 8px;
}

/*文章*/
.blog_search input[type=search]{
    border: solid 1px #afd5c6;
}
.blog_le .accordion{
    border: 1px #afd5c6 solid;
}
.blog_page h4.blog_category_title{
    display: none;
}
h5.blog_le_t em{
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 200;
    letter-spacing: 1px;
    color: #111111;
    font-size: 26px;
}
.accordion li .link a{
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 200;
    letter-spacing: 1px;
    color: #111111;
    font-size: 20px;
}
.other_promotion .pmtTitle h3{
    font-family: 'Noto Sans TC';
    color: #111111;
    font-size: 18px;
    letter-spacing: 1px;
}
.other_promotion .pmtTime cite{
    font-family: "Poppins", sans-serif;
    color: #111111;
    font-size: 18px;
}
.other_promotion .pmtTime span{
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 200;
    letter-spacing: 1px;
    color: #111111;
    font-size: 16px;
}
.module_i_news .title_i_box h4{
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 200;
    letter-spacing: 1px;
    color: #111111;
    font-size: 38px;
}
.module_i_news .title_i_box h4::after{
    content: 'Column';
    position: relative;
    left: 0;
    font-family: "Poppins", sans-serif;
    color: #AD724E;
    font-size: 45px;
    line-height: 1;
    font-weight: 200;

}
.other_promotion{
    max-width: 100%;
    width: 100%;
    background-color: #edf8f4;
}

.blog_le{
    width: 18%;
    text-align: center;
}
.blog_ri{
    width: calc(100% - 19%);
    padding: 0 0 0 4%;
}
.subbox_item a{
    grid-template-columns: 1fr;
}
.subbox_item{
    border: 1px solid #f3d08e;
    padding: 4%;
    border-radius: 20px;
}
.articel_mainPic img{
    display: none;
}
.news_related{
    background: #edf8f4;
    border-radius: 50px 50px 0 0;
}
.blog_subbox{
    grid-template-columns: repeat(3, 1fr);
}
.blog_list_ri h5 {
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: #111111;
    font-size: 22px;
}
.subbox_item a:after{
    background: transparent;
    opacity: 0;
    border: none;
}
.subbox_item a:before {
    opacity: 1;
    content: 'MORE';
    bottom: 0;
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    color: #b0d5c6;
}
.blog_list_ri p{
    -webkit-line-clamp: 2;
}
.blog_list_ri{
    padding: 5px 0 10% 0;
}
.module_i_news li a:after{
    background: transparent;
    opacity: 0;
    border: none;
}
.module_i_news li{
    display: block;
    text-align: left;
    border: 1px solid #cccccc;
    padding: 4%;
    border-radius: 20px;
}
.i_blog_b{
    display: none;
}
.i_blog_ri h5{
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
    color: #111111;
    font-size: 22px;
}
.i_blog_ri p {
    -webkit-line-clamp: 2;
    padding-top: 4%;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: #111111;
}
.i_blog_ri{
    padding: 10% 0;
    padding-left: 6%;
}
.accordion li+li .link{
    border-top: 1px solid #b0d5c6;
}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category{
    background: #b0d5c6 !important;
}
.blog_le .accordion > li:hover .link a, .blog_le .accordion > li.on_this_category .link a{
    color: #111111 !important;
}
.blog_box_edit *{
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: #111111;
    font-size: 16px;
}
.lastPage{
    background: #f3d08e;
    border-radius: 50px;
    color: #111111;
}
.news_related h6 span:before {
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    color: #111111;
    font-weight: 500;
}
    
/*最新消息*/
.news_part .title_i_box{
    display: flex;
    flex-direction: column-reverse;
}
.news_part .title_i_box h4{
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111111;
    overflow: unset;
    font-size: 38px;
}
.news_part .title_i_box h6::before {
    content: 'News';
    position: absolute;
    font-family: "Poppins", sans-serif;
    font-size: 45px;
    color: #AE734F;
    font-weight: 100;
    left: 50%;
    transform: translateX(-50%);
}
.news_list {
    margin-top: 10%;
}
.pageIndex .animated-arrow{
    background: #f3d08e;
    border-radius: 50px;
    color: #111111;
}
.i_news_b *{
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
}
.i_news_b a i.fa-solid.fa-arrow-right {
    margin: 0;
}
.news_list ul li span{
    font-family: "Poppins", sans-serif;
    color: #1F1F1F;
    font-size: 18px;
}
.news_list ul li p{
    color: #1F1F1F;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 18px;
}
.news_list ul li p:after{
    color: #f3d08e;
    font-size: 18px;
}
.promotion_title span{
    border: none;
    padding: 0;
}
.promotion_title h2 {
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111111;
    overflow: unset;
    font-size: 28px;
}
.promotions_page .edit{
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111111;
    line-height: 180%;
    margin-bottom: 0;
    padding: 0;
    max-width: 68%;
}
.promotion_title span,
.promotion_title em{
    display: none;
}
.promotions_page .show_content{
    padding: 0 0 3% 0;
    width: 100%;
    max-width: 100%;
}
.promotions_page .page{
    background-color: #edf8f4;
    padding: 2% 0;
    margin: 0 auto;
}
.other_promotion {
    max-width: 100%;
    width: 100%;
    padding: 4% 14% 0 14%;
    grid-template-columns: 1fr 1fr;
}
.pmtTitle  span{
    display: none;
}
.promotion_title{
    max-width: 69%;
    margin: 0 auto;
    padding-bottom: 2%;
}
.promotions_page .other_promotion .pmtTime span {
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 200;
    letter-spacing: 1px;
    color: #111111;
    font-size: 16px;
    float: left;
    padding-top: 2%;
}
.other_promotion li a {
    padding: 6% 2%;
    border-bottom: 1px #e1ded9 dashed;
    border-right: none;
    border-left: none;
    border-top: none;
}
.other_promotion li a:hover {
    background: transparent;
}
.other_promotion li a:before {
     display: none;
}
.other_promotion li a:after{
    width: 1%;
    height: auto;
    border-bottom: 1px #f3d08e solid;
    border-left: none;
    border-top: none;
    border-right: none;
    right: unset;
    left: 1px;
}
.blog_back{
    max-width: 100%;
    margin: 0 auto;
}
.blog_back a.article_btn_prev{
    background: #cdcdcd;
    border-radius: 25px;
}
.blog_back a.article_btn_next{
    background: #cdcdcd;
    border-radius: 25px;
}
.blog_back a.article_btn_back {
    background: #f2cf8e;
    border-radius: 25px;
}
.blog_back a{
    color: #111111;
}


/*聯絡我們*/
.blank_letter {
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.contact_form li .form__label,.list_before.info li{
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111111;
    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{
    position: relative;
    width: 100%;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111111;
    font-size: 17px;
}
.list_before.info li {
    padding-left: 0;
    border-bottom: 1px solid #66666638;
    margin-right: 10%;
    padding-bottom: 3%;
}
.contact_form li{
    grid-template-columns: 1fr;
}
.contact_form li .form__label{
    display: flex;
}
.red{
    order: 2;
}
.list_before li{
    margin: 10px 0;
    line-height: 2;
}

.contact_content .information_left {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.contact_content .information_right {
    display: none;
}
.contact_content{
    border: 1px solid #cccccc;
    padding: 6% 8% 2% 8%;
    border-radius: 40px;
}
.contact_form li.last blockquote, .contact_form li.last cite{
    width: 100%;
    max-width: calc(50% - 6px);
}
.contact_form li.last blockquote {
    color: #ffffff;
    background-color: #afd5c6;
    border: none;
}
.contact_form li.last cite {
    background: #f3d08e;
    color: #fff;
    border: none;
}
.fa-arrow-right::before{
    display: none;
}
.contact_le_nomap{
    width: 62%;
}
.list_before {
    margin-top: 6%;
    margin-bottom: 0;
    font-size: 15px;
    color: #444;
    display: block;
    width: 38%;
    position: relative;
}
.list_before.info li:last-child{
    border-bottom: none;
}


/*頁腳*/
.footer{
    padding: 4% 0 0 0;
    background:#ffffff;
    position: relative;
    overflow: hidden;
}
.footer .center{
    z-index: 1;
    width: 100%;
    max-width: 78%;
    padding-bottom: 3%;
}
.footer_info li:nth-child(1){
    width: 100%;
}
.footer_info li:nth-child(2){
    width: 100%;
}
.footer_info ul {
    display: flex;
    width: 100%;
    flex-direction: row;
}
.footer_info li p,.footer_info li p  a{
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111111;
    font-size: 17px;
}
.footer_menu a{
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111111;
    font-size: 17px;
    background: transparent;
    text-align: center;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_menu a:hover {
    background: #f3d08e;
    color: #111111;
    border-radius: 50px;
}
.box_link{
    display: none;
}

.footer::after {
    content: "";
    position: absolute;
    inset: 0;
    left: 0;
    width: 105%;
    background-position: center center;
    background: 
    radial-gradient(circle 90px at 8% 65%, #AFD5C6 100%, transparent 100%),
    radial-gradient(circle 66px at 90% 52%, #AFD5C6 100%, transparent 100%),
    radial-gradient(circle 80px at 81% 70%, #F3D08E 100%, transparent 100%);
    animation: float1 15s ease-in-out infinite alternate;
    z-index: 0;
}
.copy,.copy a{
    font-family: "Huninn", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #111111;
    font-size: 14px;
}
.copy{
    border-top: none;
}
.footer_menu a{
    border: none;
    width: 100%;
}
.footer_menu {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1vw;
}


@media screen and (max-width: 1400px) {
.stellarnav > ul > li > a{
    width: auto;
    padding: 0 14px;
}


}
@media screen and (max-width: 1280px) {
.swiper-banner .swiper-slide::after{
    animation:none;
}
.bannerindex::after{
    display: none;
}

/*banner*/
.banner {
    background: transparent;
    height: 300px;
    overflow: hidden;
}
.banner::before {
    height: 300px;
    background-size: cover;
}
.banner::after {
    height: 300px;
    background-size: cover;
    background-position-x: 80%;
}
.contact_page .banner h5::after,
.share_page .banner h5::after,
.blog_page .banner h5::after,
.blog_in_page .banner h5::after{
    font-size: 32px;
}

/*文章*/
.blog_le{
    width: 26%;
}
.blog_ri{
    width: calc(100% - 27%);
}
.blog_page .main_part, .blog_in_page .main_part {
    width: 100%;
    max-width: 88%;
}
.blog_subbox {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}
.blog_page .main_part, .blog_in_page .main_part{
    width: 100%;
    max-width: 78%;
}


/*頁腳*/
.footer .center{
    width: 100%;
    max-width: 90%; 
} 
.footer_info{
    grid-template-columns: 20% 1fr;
}   
.footer_logo{
    max-width: 52%;
}

/*聯絡我們*/
.contact_page .main_part{
    width: 100%;
    max-width: 88%;
}
.list_before{
    width: 100%;
    max-width: 44%;
}
.contact_le_nomap{
    width: 100%;
    max-width: 56%;
}

}
@media screen and (max-width: 1024px) {
.stellarnav > ul > li > a {
    margin: 0 7px;
    padding-left: 30px;
}
.stellarnav > ul > li > a::before{
    background-size: 70%;
}
.header_area .stellarnav ul{
    text-align: center;
}
.header_area{
    position: relative;
    width: 100%;
    background: #ffffff;
}
.header_area.sticky{
    position: relative;
}
.stellarnav > ul > li > a {
    margin: 0 7px;
    padding-left: 0;
}
.nav-header {
    max-width: 12%;
    width: 100%;
    margin-top: 2%;
}
.stellarnav ul {
    padding: 0;
}

/*banner*/
.banner h5 {
    font-size: 28px;
}

/*最新消息*/
.other_promotion{
    grid-template-columns: 1fr;
}
.other_promotion .pmtTitle h3{
    font-size: 16px;
}

/*文章*/
.blog_page .main_part, .blog_in_page .main_part {
    width: 100%;
    max-width: 86%;
}

/*頁腳*/
.footer_info{
    grid-template-columns: 1fr;
}
.footer_logo {
    max-width: 14%;
}
.footer::after{
    animation: none;
    background: radial-gradient(circle 60px at 8% 65%, #AFD5C6 100%, transparent 100%), radial-gradient(circle 36px at 90% 52%, #AFD5C6 100%, transparent 100%), radial-gradient(circle 40px at 81% 70%, #F3D08E 100%, transparent 100%);
}
/*聯絡我們*/
.list_before,.contact_le_nomap {
    width: 100%;
    max-width:100%;
}

}

@media screen and (max-width: 980px) {
.main_header_area .container {
    width: 100%;
    max-width: 100%;
}
.header_area{
    position: relative;
}
.header_area {
    position: relative;
    background-color: #ffffff;
    height: auto;
}
.stellarnav > ul > li > a {
    margin: 0;
    padding-left: 0;
    width: 100px;
}

/*banner*/
.banner {
    background: transparent;
    height: 280px;
    overflow: hidden;
}
.banner::before {
    height: 280px;
    background-size: cover;
    bottom: 10%;
    background-position-x: 16%;
}
.banner::after{
    height: 280px;
    animation: none;
}


/*最新消息*/
.promotion_title{
    max-width: 76%;
}
.promotions_page .edit{
    max-width: 76%;
}

/*聯絡我們*/
.contact_content .information_left{
    width: 100%;
}
.contact_content .information_right {
    width: 100%;
    padding-left: 0;
}

/*頁腳*/
.footer_info ul {
    display: flex;
    width: 100%;
    flex-direction: column;
}
.footer::after{
        animation: none;
}
.footer_menu a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.footer_menu{
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
.footer.with_shopping_mode { padding:30px 0 70px; }
#to_top { bottom:60px;}
.bannerindex { padding:0; margin:0;}
.stellarnav.mobile.left > ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #ffffff;
    background-repeat: repeat-y;
}
.stellarnav.mobile > ul > li{
    width: 100%;
}
.stellarnav > ul > li > a::before{
    display: none;
}
.stellarnav.mobile.left .close-menu{
    background: transparent;
}
.me_tp_features {
    text-align: center;
    padding-top: 12px;
    margin: 0 0 8px 0;
}
.stellarnav .menu-toggle {
    padding: 20px 10px;
}
#bottom_menu li a{
    color: #7e5149;
}
#bottom_menu li{
    border: 1px solid #f3d08e;
    border-radius: 25px;
}
#bottom_menu li:last-child{
    border: 1px solid #f3d08e;
    border-radius: 25px;
}
#bottom_menu{
    background-image: url(https://pic03.eapple.com.tw/funplay/top_bk.png);
    background-color: transparent;
    background-repeat: repeat-y;
}
.stellarnav > ul > li > a{
    width: 100%;
}
#bottom_menu li a em{
    font-family: "RocknRoll One", "UoqMunThenKhung", serif;
    color: #111111;
}
.nav-header{
    max-width: 16%;
    width: 100%;
}


/*手機板大圖*/
.pageIndex .swiper-wrapper .swiper-slide:nth-child(1)::before,.pageIndex .swiper-wrapper .swiper-slide:nth-child(2)::before{display: none;}
.pageIndex .swiper-banner .swiper-slide:nth-child(2)::after,.pageIndex .swiper-banner .swiper-slide:nth-child(1)::after{display: none;}
.pageIndex  .swiper-slide img { display:none; }
.pageIndex .swiper-slide {width: 100%;height: 0;padding-bottom: calc(100% / 3 * 4);}
.pageIndex  .swiper-slide:nth-child(1) { background-image:url(https://pic03.eapple.com.tw/carefreeanimal/phone_big1.jpg) ; background-size:cover;   background-position: center;}
.pageIndex .swiper-slide:nth-child(2) { background-image:url(https://pic03.eapple.com.tw/carefreeanimal/phone_big2.jpg) ; background-size:cover;   background-position: center;}

/*產品*/
.product_menu_list,
.products-list,
.product-wrapper { width: 100%;}
.product-layer-two { margin-right: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-gap: 5px;}
.product_page .product-layer-two,
.product_page .products-list { width: 100%; border-right: none;}
.product_page .product_menu_list>h5{display: block;}
.product_page .show_content > a { order: 1;}
.product_page ul.products-list { order: 2;}
.product_page ul.page { order: 3;}
.product_page .product_menu_list {width: 100%; order: 0; min-height: unset;}
.product_page .product_menu_list>h5{    font-family: "RocknRoll One", sans-serif; font-weight: 500;letter-spacing: 1px; color: #7E5130;text-align: center;}
.fa-caret-down::before{color: #7E5130;}    
.products-list .price b:first-child:last-child{display: flex; justify-content: center;}
.products-list .price b{width: auto;display: flex; justify-content: center;}
.products-list .price {
    margin: 10px 0;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

/*文章*/
.blog_le {
    width: 100%;
}
.blog_ri {
    width: 100%;
    padding: 0;
}
.blog_subbox{
    grid-gap: 16px;
}

/*頁腳*/
.footer_logo {
    max-width: 20%;
}


/*聯絡我們*/
.contact_form li .form__label{background: transparent;}
.contact_content {
    padding: 6% 4% 2% 4%;
}
.list_before li{
    line-height: 1.8;
}
.contact_le_nomap{
    width: 100%;
}
.contact_content {
    padding: 6%;
}


}
@media screen and (max-width: 600px) {
.box_search input[type=text]{
    width: 100%;
    max-width: 200px;
}
.header_area.sticky {
    border-radius: 0 0  30px 30px;
}
.nav-header {
    max-width: 26%;
    width: 100%;
}
.product_page .banner, .product_info_page .banner, .album_class_page .banner, .blog_page .banner, .contact_page .banner, .car_page .banner, .remit_page .banner, .album_page .banner, .album_info_page .banner, .blog_in_page .banner{
    height: 250px;
    background-size: cover;
}

/*banner*/
.banner::after{
    background-image: url(https://pic03.eapple.com.tw/carefreeanimal/s_phone_banner600.png);
    background-repeat: no-repeat;
    top: 0;
}

/*文章*/
.blog_subbox {
    grid-gap: 16px;
    grid-template-columns: repeat(1, 1fr);
}
.module_i_news section{
    max-width: 90%;
    width: 100%;
}
.blog_ri{
    width: 100%;
}
.blog_le{
    width: 100%;
}
.subbox_item a{grid-template-columns: 1fr;}
.blog_list_le{aspect-ratio: 4 / 3;}
.subbox_item a:after{
    background: #dbdbdb5c;
    border:none;
    opacity: 1;
    z-index: -1;
}
.blog_list_ri{
    padding: 10px;
}


/*最新消息*/
.promotion_title{
    max-width: 80%;
}
.promotions_page .edit{
    max-width: 80%;
}
.other_promotion{
    grid-template-columns: 1fr;
}
.other_promotion{
    padding: 4% 10% 0 10%;
}

/*聯絡我們*/
.contact_content .information_right{width: 80%;}
.contact_form li{ grid-template-columns: 1fr;}
.blank_letter{font-size: 26px;padding-top: 1%;}
.contact_form li .form__label{font-size: 16px;}
.contact_content .information_right,.contact_le_nomap {
    width: 100%;
}

/*頁腳*/
.footer_logo {
    max-width: 30%;
}

}
@media screen and (max-width: 480px) {
/*最新消息*/
.news_list {
    margin-top: 22%;
}

}