::-webkit-scrollbar {    width: 5px;}
::-webkit-scrollbar-track {    box-shadow: inset 0 0 8px #ffdd00;}
::-webkit-scrollbar-thumb {    background-color: #212121;border-radius: 4px;}




.tp_links { display: none;}

.pageIndex .swiper-slide.swiper-slide-active:nth-child(2):after {
    content: "";
    position: absolute;
    inset: 0;                
    z-index: 1;
    pointer-events: none;
    opacity:0.7;
    background: url(https://pic03.eapple.com.tw/rockinfitness/fiter.png) no-repeat center;
    background-size: cover;  

    animation: wave-reveal 2s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pageIndex .swiper-slide.swiper-slide-active:nth-child(1):after {
    content: "";
    position: absolute;
    inset: 0;                
    z-index: 1;
    pointer-events: none;
    opacity:0.5;
    background: url(https://pic03.eapple.com.tw/rockinfitness/fiter.png) no-repeat center;
    background-size: cover;  

    animation: wave-reveal 2s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}


@keyframes wave-reveal {
    0% {
        clip-path: inset(0 60% 0 60%);
        
    }
    100% {
        clip-path: inset(0 0 0 0);
       
    }
}




.pageIndex .swiper-slide.swiper-slide-active:nth-child(1):before {
	content: "";                 
    position: absolute;          
	background: url(https://pic03.eapple.com.tw/rockinfitness/text01.png);
	background-size: contain;
	background-repeat: no-repeat;
	top: 50%;
	left: 50%;
	width: 100% !important;
	height: 100% !important;
	background-position: left;
	transform: translate(-50%, -50%);
	padding-bottom: calc(100% / 1 * 0.12);
	 z-index: 9999;
	animation: banner-bg 2s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
}


.pageIndex .swiper-slide.swiper-slide-active:nth-child(2):before {
	content: "";                 
    position: absolute;         
	background: url(https://pic03.eapple.com.tw/rockinfitness/text03.png);
	background-size: contain;
	background-repeat: no-repeat;
	top: 50%;
	left: 50%;
	width: 100% !important;
	height: 100% !important;
	background-position: left;
	transform: translate(-50%, -50%);
	padding-bottom: calc(100% / 1 * 0.12);
	 z-index: 9999;
	animation: banner-bg 2s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
   
}








@keyframes banner-bg {
    0% {
        transform: translate(-50%, -20%);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}





#to_top {
    
    left: 20px;
    background: #ffffff4a;
    box-shadow: unset;
    color: #ffcf00;
    bottom: 30px;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    backdrop-filter: blur(0px);
    font-size: 11px;
    padding-top: 5px;
    animation: topmoveTop 1.5s ease-in-out infinite alternate;
	 box-shadow: 1px 1px 10px #ffe400;
}

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






#content_main { margin:0;}
.bannerindex {position:static;height:auto;padding-bottom: 0%;}
.swiper-banner { position:static; margin:0; height:auto;}
.swiper-slide img { height:auto;}
}







/*header*/
.pageIndex .main_header_area {
    background: linear-gradient(180deg, #000000a3, #00000000);
    box-shadow: none;
    position: relative;
}

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

.header_area.sticky {
    top: 0px;
    background: transparent;
    transition: all 0.7s;
}

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

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

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

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

/*logo*/

.header_area .nav-brand {
    display: inline-block;
    width: 100%;
}

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

.header_area .nav-brand img {
    /* filter: contrast(0) brightness(100); */
    /* width: 100%; */
    max-width: 40%;
    transition: all 0.5s;
}



.header_area.sticky .nav-brand img {
    filter: none;
    transition: all 0.3s;
}


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


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

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



/*nav*/
.me_tp_features {
    width: 100%;
    text-align: right;
    margin-top: 10px;
    color: #ffffff;
}


.me_tp_features a {
    font-size: 14px;
  
    color: #ffffff;
}



.header_area .main_header_area .container {
    max-width: 90%;
}


.stellarnav ul {
    margin: 0;
    text-align: right;
    /* padding-top: 20px; */
}


.stellarnav > ul > li > a {
    padding: 0;
    color: #ffffff;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    margin: 0 5px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
   
}


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

.stellarnav > ul > li > a b:nth-child(2) {
    color: #ffd010;
    /* font-style: italic; */
    /* font-family: Montserrat; */
    font-weight: 100;
    font-family: "Momo Trust Display", sans-serif;
    }


.stellarnav>ul>li>a {
    padding: 0px 5px;
    color: #ffffff;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: 40px;
    height: 40px;
    /* margin: 0 15px; */
    cursor: pointer;
    text-align: center;
    font-weight: 900;
    transition: all 0.5s;
    font-family: noto sans-serif;
}


.stellarnav>ul>li>a:hover {
    transition: all 0.5s;
    color: #8d8d8d;
}

.sticky .stellarnav>ul>li>a:hover {
    color: #000000;
    transition: all 0.5s;
}



.stellarnav li {

    top: 0px;
}



.nav-dropdown>li>a {
    background: #f7f5f5;
    transition: 0.2s;
    letter-spacing: 1.5px;
    width: 100%;
}

.nav-dropdown>li>a:hover {
    transition: 0.2s;
    background-color: #2B3047;

    color: #fff;
}


.stellarnav ul ul {
	background:  linear-gradient(90deg, #00000073, #84818121);
    border-radius: 8px;
    box-shadow: 1px 1px 4px #00000061;
    overflow: hidden;
}




.stellarnav li li {
    border: 0;
}

.stellarnav li li a {
    padding: 10px 15px;
    font-size: 14px;
    display: block;
    color: #ffffff;
    background-color: #000000ab;
    transition: all 0.3s;
}

.stellarnav li li a:hover {
    color: #ffffff;
    transition: all 0.3s;
	padding-left:45px;
	 background-color: #000000;
	border-bottom:1px solid#ffe40d;
}


@media screen and (max-width: 1024px) {
.me_tp_features {
    display:none;
}

    .stellarnav ul {
    margin: 0;
    text-align: center;
}

.stellarnav .menu-toggle:after {
    content: 'MENU';
    font-size: 12px;
    color: #ffffff;
    display: block;
    transform: scale(0.9);
}

.stellarnav .menu-toggle span.bars span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 6px;
    background: #ffffff;
    margin: 0 auto 4px;
}    

.stellarnav.mobile {
        position: absolute;
        left: 0;
        top: 10px;
        width: auto;
        display: inline-block;
    }
    
}



.path p, .path p a {

    display: none;
}




@media screen and (max-width:768px) {
    
.nav-brand img {
    filter: contrast(0) brightness(100);
    width: 100%;
    max-width: 20%;
    transition: all 0.5s;
    padding-top: 8px;
}

    
}


@media screen and (max-width: 500px) {
	.pageIndex .header_area .nav-brand img {
    /* filter: contrast(0) brightness(100); */
    max-width: 50%;
    transition: all 0.5s;
}

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


 .product_page #content, .album_class_page #content, .album_page #content, .album_info_page #content, .blog_page #content, .blog_in_page #content{
	background-image: url(https://pic03.eapple.com.tw/rockinfitness/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: -1;
	} 





.banner h5 {
    color: #fff;
    font-size: 30px;
    letter-spacing: 3.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    gap: 3px;
    filter: drop-shadow(0px 0px 5px #ffffff);
}

.banner h5::after {
	color: #fff;
	font-size: 24px;
	filter: drop-shadow(0px 0px 5px #ffffff);
	font-family: "Forum", sans-serif;
	font-weight: 400;
}
.banner.banblog h5::after {
    content: 'News';
}
.banC h5::after {
    content: 'Contact';
}
.banner {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: repeat center center;
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 76px 0 0 20px;
    /* padding-left: 140px; */
}
.banner:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(https://pic03.eapple.com.tw/rockinfitness/banner01.jpg);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    animation: zoom 3s forwards cubic-bezier(0.73, 0.08, 0.11, 0.99);
    background-size: cover;
    background-position: center;
}
.banA:before {    background-image: url(https://pic03.eapple.com.tw/kuojhenxing/ban-a.jpg);}
.blog_page .banner:before, .blog_in_page .banner:before {    background-image: url(https://pic03.eapple.com.tw/rockinfitness/banner01.jpg);}
.banC:before {    background-image: url(https://pic03.eapple.com.tw/rockinfitness/banner01.jpg);}

@keyframes zoom {
    0% { transform: scale(1.1); }
    100% { transform: scale(1);}
}

/*contact*/
.contact_form li.last cite  {
	background:  linear-gradient(90deg, #000000, #ffc500);
	color: #ffffff;
	font-size: 14px;
	transition: all .3s;
	-webkit-box-shadow: 2.5px 4.33px 20px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 2.5px 4.33px 20px 0px rgba(0, 0, 0, 0.1);
	width: 160px;
}



.red {
    color: #ff4c4c00;
}
 .contact_page #content{
	background-image: url(https://pic03.eapple.com.tw/rockinfitness/bg02.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: -1;
	} 
.contact_form li .form__label {
    display: block;
    max-width: 85px;
    text-align: right;
    color: #ffffff99;
}
.blank_letter {
    padding-top: 30px;
    font-size: 26px;
    color: #ffffff;
    background-position: left bottom;
    background-repeat: no-repeat;
}
.list_before {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #ffffffb5;
    display: block;
    width: 100%;
    position: relative;
}

#content_main { margin:0;}
.bannerindex { position:relative; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
.swiper-banner .swiper-slide img {
    width: 100%;
}

/* .swiper-slide img { height:auto;} */
@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
}





.bannerindex .swiper-slide.swiper-slide-active:before {
	content: "";
	position: absolute;
	z-index: 999;
	pointer-events: none;
}
.bannerindex .swiper-slide.swiper-slide-active:after {
	content: "";
	position: absolute;
	z-index: 999;
	pointer-events: none;
}
@media screen and (max-width: 768px) {
	.bannerindex {
		padding: 0;
		margin: 0;
	}
}

.animated-arrow {
	background:  linear-gradient(90deg, #000000, #ffc500);
	color: #ffffff;
	font-size: 14px;
	height: 60px;
	line-height: 60px;
	transition: all .3s;
	-webkit-box-shadow: 2.5px 4.33px 20px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 2.5px 4.33px 20px 0px rgba(0, 0, 0, 0.1);
	width: 200px;
}
.animated-arrow:hover {  color: #ffffff; z-index: 0;}

.animated-arrow::before {
    content: '';
    display: block;
	background:#ffdf00;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
	-webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.animated-arrow:hover::before {
    background: linear-gradient(90deg, #fec40066, #ffc500);
    width: 100%;
    left: 0;
    z-index: -1;
}
.animated-arrow:after {
	content: " ";
	width: 20%;
	height: 3px;
	/*background: #af8650;*/
	position: absolute;
	bottom: 0;
	left: 0;
	-webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.animated-arrow:hover:after {width: 100%;}




.i_blog_ri h5 {color:#ffffff;}
.module_i_news li a:after {   
     content: '';
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 8;
    background:#fffef700;
    opacity: 0;
    border: 0px #3d3938 solid;
	box-shadow: 0 0 0px rgba(255, 215, 0, 0);
}

.module_i_news {
    padding: 50px 20px;
    background-color: #000000;
}

.module_i_news li a:before{
    content: 'READ MORE';
    position: absolute;
    z-index: 19;
    bottom: 10px;
    right: 10px;
    opacity: 0;
    text-align: center;
    font-size: 15px;
    color: #000000;
    transition: all .6s;}
 
.module_i_news ul {
    list-style: none;
    display: block;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 20px;    
}    
.module_i_news .title_i_box h4 {
    font-size: 20px;
    color: #f9d300;
    font-weight: 500;
	padding-left:10px;
	font-family: "Noto Sans", sans-serif;
}

.module_i_news .title_i_box h6 {
    font-size: 36px;
    color: #f9d300;
   font-family: "Momo Trust Display", sans-serif;
    font-weight:100;
}

.module_i_news .title_i_box {
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    /* flex-direction: unset; */
    justify-content: center;
    align-items: center;
}
.module_i_news li a {
    position: relative;
    display: flex;
    grid-template-columns: 200px 1fr;
    grid-gap: 10px;
    flex-direction: column;
     border: 1px solid;
    border-image: linear-gradient(45deg,#ffd700, #ffd70036, #ffd70061, #ffd700) 1;

    padding: 10px;
   box-shadow: 0 0 10px rgb(255 221 35 / 56%);
	  box-shadow: 0 0 0 rgba(255,215,0,0);
    transition: box-shadow .5s ease;
}


.module_i_news li a:hover {
    animation: glow 5s ease-in-out infinite;
}

@keyframes glow {
    0% { box-shadow: 0 0 15px rgba(255,215,0,.3); }
    50% { box-shadow: 0 0 35px rgba(255,215,0,.6); }
    100% { box-shadow: 0 0 15px rgba(255,215,0,.3); }
}


.blog_list_le,
.i_blog_le,
.news_related_list li figure{
    overflow: hidden;}

.blog_list_le img,
.i_blog_le img,
.news_related_list li a img {
    transform: scale(1);
    filter: saturate(1);
    -webkit-filter: saturate(1);
    
}

.subbox_item:hover img,
.module_i_news li:hover img,
.news_related_list li:hover img{
    transform: scale(1.2);
    filter: saturate(1.5);
    transition:1s;
}



.blog_list_ri h5
{
    color: #ffffff;
    transition: 0.5s;
}

.subbox_item:hover h5,
.module_i_news li:hover h5,
.news_related_list li:hover p{
    color: #ffcf00;
   
}

 

.subbox_item:hover p,
.module_i_news li:hover p{
    color: #ffffff;
    transition: 0.5s;
}
.blog_box_edit * {
    line-height: 150%;
    color: #ffffff;
    font-weight: 300;
}



.blog_le {
    padding: 0 7px;
}


h5.blog_le_t {
    text-align: center;
    margin-bottom: 0;
}


h5.blog_le_t em,
h5.blog_le_t span {
    display: none;
}


.blog_search input[type=search] {
    border-radius: 4px;
    background-color: #ffffff;
    border: solid 1px var(--f2-color) !important;
}

.blog_search input[type=submit] {
    color: var(--f1-color);
    border-left: 1px solid var(--f2-color) !important;
    height: 100%;
    background: url(../images/search-icon.png) no-repeat 9px center;
}


.blog_le .accordion {
    border-radius: var(--br);
    border: 1px var(--f2-color) solid;
}

.accordion li+li .link {
    border-top: 1px var(--f2-color) solid;
}


.accordion li .link a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .4rem;
    text-align: center;
    color:#6e6e6e;
}

.blog_le .accordion > li:hover, 
.blog_le .accordion > li.on_this_category {
    background: var(--f3-color) !important;
    transition: var(--tr);
}

.blog_le .accordion > li:hover .link a, 
.blog_le .accordion > li.on_this_category .link a{
    color: var(--f1-color)!important;
}


.blog_le .accordion li .link i,
.blog_le .accordion li.open .link i{
    color: var(--f1-color);
}

.blog_le .accordion > li:hover .link i, 
.blog_le .accordion > li.on_this_category .link i {
    color: var(--f1-color)!important; 
}


.submenu {
    background: var(--bg-color);
}

/* 文字 */
.submenu a{
    color: var(--f1-color);
    padding: 15px 15px 15px 50px;
}

.submenu li.on_this_category a, 
.submenu a:hover {
    color: var(--f2-color);
    background: var(--bg-color) !important;
    transition: var(--tr);
}


.submenu a i{
    left: 20px;
}


.submenu li+li {
    border-top: 1px transparent solid;/*蓋預設*/
}

/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */

@media screen and (max-width: 768px) {
    .blog_le {
        padding: 0;
    }
    /* 隱藏搜尋欄下拉三角形 */
    .blog_page .fa-caret-down::before,
    .blog_in_page .fa-caret-down::before {
        display: none;
    }
}


.blog_page h4.blog_category_title {
    display: none;
}


.blog_subbox {
    grid-template-columns: 1fr;
    gap:0px;
}

.subbox_item{
    padding: 20px 0;
}

.subbox_item a {
    grid-template-columns: 250px 1fr;
    align-items: center;
    gap: 40px;
}

  .subbox_item a:before {
    content: '';
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -3;
    background: #ffffff29;
    opacity: 0;
    border: 0px solid #997833;
  }
 .subbox_item a:hover:before {
    opacity: 0.5;
    width: 100%;
    transition:0.4s;
  }



.article_a .subbox_item:before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0px;
    height: 2px;
    background-color: #ffd12b;
    transition: 0.3s;
}

.subbox_item:hover:before {
    width: 100%;
    transition: all .5s;
}


  




.subbox_item a::after {
    display:  none;
}



.blog_list_ri em,
.i_blog_ri em {
    font-size: 12px;
    color: #8b8b8b;
}


.blog_list_ri p,
.i_blog_ri p {
    font-weight: 400;
    letter-spacing: .2rem;
    line-height: 180%;
    font-size: 12px;
    margin-top: 20px;
    color: #ffffff;
}



@media screen and (max-width: 960px) {
.subbox_item {
    border-bottom: 1px var(--f3-color) solid;/*蓋預設*/
}

.subbox_item a{
    grid-template-columns: 200px 1fr;
    gap: 20px;
}

.subbox_item a::before{
    padding: 0;
    bottom: 0;
}
}

@media screen and (max-width: 768px) {
    .subbox_item a {
        grid-template-columns: 150px 1fr;
        align-items: start;
    }

    .blog_list_ri {
        padding: 0;
    }

    .blog_list_ri h5 {
        font-size: 16px;
    }
}

@media screen and (max-width: 425px) {
.subbox_item a{
    grid-template-columns: 1fr;
}

.subbox_item a::before{
    display: none;
}
}






@media screen and (max-width: 768px) {
    .module_i_news ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .module_i_news li {
        border-bottom:none;
        border-bottom: 1px var(--f2-color) dotted;

    }
    .module_i_news .title_i_box h4{
        font-size: 24px;
    }
}

@media screen and (max-width: 480px) {
    .module_i_news .title_i_box h4{
        font-size: 18px;
    }
    .i_blog_ri h5 {
        font-size: 16px;
    }
}

/* +++ 文章頁 (blog_in_page) -------------------- */

/* 標題 */
h4.blog_category_title {
    padding: 0;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .4rem;
    color: var(--f1-color);
    text-align: center;
}

.blog_shareData {
    border-bottom: 1px solid var(--f3-color);
    padding-bottom: 10px;
}

.toShareNews{
    display: none;
}

.article_b .main_part { max-width: 1450px;}
.article_b a.news_menu_toggle i { display: none;}



.article_b .blog_ri {padding: 0 0 0 50px;}
.article_b .blog_page h4.blog_category_title{display: none;}
.article_b .blog_subbox {grid-template-columns: 1fr;}
.article_b .subbox_item a { position: relative;  display: grid;}
.article_b .subbox_item a {grid-template-columns: 1fr;align-items: center;grid-gap: 10px;padding-right: 0;background: #ffffffd4;box-shadow: 5px 15px 30px rgb(30 69 103 / 15%);/* backdrop-filter: blur(20px); */}

.article_b .subbox_item a:after {opacity: 1;  width: 90%; height: 1px;  background: #ddd;  position: absolute;  top: 90%; left: 50%; transform: translate(-50%, -50%); border: 0;}
.article_b .subbox_item a:hover .blog_list_le img{transform: scale(1.1);}
.article_b .subbox_item a .blog_list_ri h5{color: #313131; font-weight:800; letter-spacing:3px;}
.article_b .subbox_item a:hover .blog_list_ri h5{color: #000000; font-weight:800; letter-spacing:3px;}
.article_b .blog_list_ri {max-height: 200px;min-height: 180px;padding: 5%;}
.article_b .blog_list_ri h5 { font-weight: 500;  color: #042650;  transition: all 0.3s;  font-size: 18px;  margin-bottom: 15px;}
.article_b .blog_list_ri em { margin: 0px 0 15px;  border-bottom: none;  padding-bottom: 12px;}
.article_b .blog_list_ri p {font-size: 12px;-webkit-line-clamp: 2;line-height: 160%;color: #000000;font-weight: 600;}
.article_b .blog_subbox {grid-template-columns: 1fr 1fr 1fr;grid-gap: 30px 20px;}
.article_b .blog_list_le { aspect-ratio: 3 / 2; overflow: hidden;}
.article_b .blog_list_le img{transition: all .3s;}





.article_b .news_related_list li figure {  aspect-ratio: 6 / 4; }
.article_b .news_related {display:none;background: #efefef78; padding: 50px 0 25px;  border-top: 1px solid #efefef;  margin-top: 100px;}
.article_b .news_related h6 span:before {  font-size: 25px;  letter-spacing: 0.1em;  color: #082756;}
.article_b .news_related_list {background: transparent;max-width: 1400px;width: 90%;grid-template-columns: 1fr 1fr 1fr 1fr;}
.article_b .news_related_list li a{padding: 0;}
.article_b .news_related_list li a p { font-size: 14px;  width: 90%;  line-height: 1.4;  margin: 15px auto;  padding: 0;}
.article_b .lastPage { background: #2a598b;  font-size: 16px; transition: all .3s;}
.article_b .lastPage:hover { background: #0A284D; color: #ffffff;}

@media screen and (max-width: 1024px){
.article_b .blog_subbox {grid-template-columns: 1fr 1fr;}
}
@media screen and (max-width: 960px) {
.article_b .subbox_item {border-bottom: none;}
}
@media screen and (max-width: 768px){
.article_b .blog_ri {padding: 0}
.article_b .blog_le{padding: 0;}
.article_b .blog_list_ri{padding: 0 5%;min-height: 200px;}
.article_b .blog_list_ri h5 {font-size: 16px;}
.article_b .blog_le{margin-bottom: 50px;}
.article_b .blog_ri{margin-bottom: 50px;}
.article_b .blog_back a.article_b tn_prev,.blog_back a.article_b tn_next,.blog_back a.article_b tn_back{font-size: 12px;}
.article_b .lastPage{font-size: 12px;}
.article_b .news_related_list {grid-template-columns: 1fr 1fr;}
.article_b .subbox_item a { grid-gap: 20px;}
.article_b .subbox_item a:after { top: 88%;}
}
@media screen and (max-width: 600px) {
.article_b .blog_subbox { grid-template-columns: 1fr;}
.article_b .blog_list_ri { min-height: 230px;}
.article_b .subbox_item a:before { right: 20px;  bottom: 20px;}
}
.blog_back {text-align:center;display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 200px;}
.blog_back a { font-size:15px; color:#fff; display:block; padding:7px 15px; width:100%;}
.blog_back a.article_btn_prev { background:#33333373;}
.blog_back a.article_btn_back { background:#b0b0b0;}
.blog_back a.article_btn_next { background:#33333373;}





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




.stellarnav li a {
    color: #444;
    background: transparent;
    border-radius: 0;
}

.stellarnav > ul > li.drop-left > ul {
    background: transparent;
    padding: 0px 0;
}

.stellarnav > ul > li ul li a:hover {
    background: transparent;
}





.stellarnav .icon-close {
    right: 12px;
    top: 2px;
}

.stellarnav .icon-close:before,.stellarnav .icon-close:after {
    border-bottom: solid 2px #ffffff;
}

    .stellarnav.mobile.left > ul {
        top: -1px;
        border: none;
        background: #1c1b1cd4;
        backdrop-filter: saturate(93%) blur(10px);
        padding: 0;
        animation: fade-in-left .8s cubic-bezier(.39, .575, .565, 1.000) both;
        width: 100%;
        max-width: 100%;
    z-index: 9999999999;
    }
@keyframes fade-in-left{
    0%{transform:translateX(-50px);opacity:0}
    100%{transform:translateX(0);opacity:1}
}



.stellarnav.mobile {
        left: 14px;
        top: 7px;
    }

.stellarnav.mobile li a {
    border-bottom: none
}

.stellarnav.mobile > ul > li {
    border-bottom: 1px #ffffff29 solid;
    padding: 10px;
}

.stellarnav.mobile ul {
    background: transparent;
    padding: 2px;
}

.stellarnav.mobile ul ul {
    padding: 0px;
    background: transparent;
}

.stellarnav li li:hover > a, .stellarnav li li.has-sub:hover > a {
    padding-left: 0px;
}

/* Mobile - li.open 狀態 */
.stellarnav.mobile li.open {
    background: transparent;
    padding: 10px;
}

.stellarnav.mobile li.open li.open {
    background: transparent;
    padding: 0;
}


.stellarnav.mobile li.open li a:not(.dd-toggle) {
    padding: 10px 20px;
    color: #ffffff;
    border-bottom: none;
    font-size: 13px;
    letter-spacing: 1px;
    background: #00000085;
}

.stellarnav li li {border: none;margin-left: 0px;transition: .6s;font-size: 13px;}







.stellarnav a.dd-toggle .icon-plus {
    width: 20px;
    height: 20px;
    border: 1px solid #ffffff00;
    border-radius: 50%;
    position: relative;
}

.stellarnav a.dd-toggle .icon-plus:before,
.stellarnav a.dd-toggle .icon-plus:after {
    content: '';
    position: absolute;
    background: #ffffff;
    left: 50%;
    top: 50%;
    border: none;
}

.stellarnav a.dd-toggle .icon-plus:before {
    width: 10px;
    height: 2px;
    transform: translate(-50%,-50%);
}
.stellarnav a.dd-toggle .icon-plus:after {
    width: 2px;
    height: 10px;
    transform: translate(-50%,-50%);
}

.stellarnav li.open > a.dd-toggle .icon-plus:before {
    background: #ffbc00;
}

.stellarnav li.open > a.dd-toggle .icon-plus:after {
    opacity: 0;
}

.stellarnav li.open > a.dd-toggle .icon-plus {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}



.stellarnav.mobile > ul > li > a.dd-toggle {
    top: 10px;
}
.stellarnav.mobile > ul > li > ul > li a.dd-toggle {
    top: 10px;
}



.stellarnav .menu-toggle:after {
    display: none;
    color: #f1f0e0;
}

.stellarnav .menu-toggle span.bars span {
    height: 2px;
    border-radius: 0;
    margin: 0 auto 6px;
}

.stellarnav .menu-toggle span.bars span:nth-of-type(1),
.stellarnav .menu-toggle span.bars span:nth-of-type(3) {
    background: #fff;
}
.stellarnav .menu-toggle span.bars span:nth-of-type(2) {
    background: #b2b2b2;
}



.stellarnav.mobile li.open li a:before {
    opacity: 0;
}

.stellarnav.mobile li.open li.open li a:before {
    display: none;
}






.stellarnav> ul > li > a {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease-out;
}

.stellarnav.left.mobile.active > ul > li > a {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.stellarnav.left.mobile.active  > ul > li:nth-of-type(1) > a {
    transition-delay: 0.1s;
}

.stellarnav.left.mobile.active  > ul > li:nth-of-type(2) > a {
    transition-delay: 0.3s;
}

.stellarnav.left.mobile.active  > ul > li:nth-of-type(3) > a {
    transition-delay: 0.5s;
}

.stellarnav.left.mobile.active  > ul > li:nth-of-type(4) > a {
    transition-delay: 0.7s;
}

.stellarnav.left.mobile.active  > ul > li:nth-of-type(5) > a {
    transition-delay: 0.9s;
}

/***/

.stellarnav.mobile.left .close-menu {
        padding: 10px 10px 5px;
        background: #000000;
        position: relative;
    }





.stellarnav.left.mobile.active .close-menu::after {
    animation: wave-reveal-2 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: .2s;
    opacity: 1;
}

@keyframes wave-reveal-2 {
    0% {
        clip-path: inset(0 50% 0 50%);
        filter: blur(6px) invert(1);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 0);
        filter: blur(0) invert(1);
        opacity: 1;
    }
}
}





.contact_content {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 0px;
    display: none;
}


#content {min-height: 80vh;}

.contact_form li.last cite {background: #ffc646;}
.contact_content .information_right {
    background: #ffffff;
    border-radius: 1em;
    width: 100%;
    max-width: 1250px;
    margin: 50px auto;
    padding: 30px 40px 30px 40px;
    box-shadow: 1px 1px 15px #ffe182;
}
.contact_form {color: #3B3C3D;}
.contact_form li.last blockquote, .contact_form li.last cite {border: 1px #ffcd1600 solid;}
.information_right .contact_form li.last blockquote input {color: #ffc646;}
.blank_letter {
    font-family: '"Noto Sans TC", sans-serif';
    color: #ffcb46;
    font-weight: 400;
    position: relative;
    letter-spacing: 0.2em;
    margin-bottom:5px;
}

.contact_form li .form__label {
    font-family: '"Noto Sans TC", sans-serif';
    display: block;
    max-width: auto;
    letter-spacing: 0.05em;
    color: #7d7d7d;
}

.note {
    font-size: 13px;
    text-align: right;
    letter-spacing: 0.05em;
}
.red {
    color: #ffbe14;
}

.contact_editbox { padding: 0px 0px;}

.contact_form li input.noborder {
    border: none;
    /* border-bottom: 1px #454442 solid; */
    background: #0000000a;
    color: #3B3C3D;
    transition: all 0.3s;
}

.contact_form li {
    margin-bottom: 0px;
    border-bottom: 1px solid #4544423d;
    padding: 20px 0;
    grid-gap: 20px;
}

.contact_form li textarea.noborder {
    background: transparent;
    border: 1px #898989 solid;
    color: #3B3C3D;
    transition: all 0.3s;
}


.contact_content .information_left {
    display: none;
    flex-direction: column;
    /* margin: 10px 50px 10px 80px; */
    padding: 0px;
    width: 100%;
    max-width: 1300px;
}
.i_contact_box section {
    width: 100%;
    max-width: 1300px;
    margin: 0;
}

/* 讓圖片在上 */
.contact_editbox {
  order: 1;
}

/* 讓表單在下 */
.contact_content {
  order: 2;
}

.contact_content form {
    max-width: calc(100% / 12 * 8);
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    margin: 0 auto;
    border-radius: 30px;
}

.contact_content .con_text {
    color: #3B3C3D;
    letter-spacing: 0.05em;
    font-family: '"Noto Sans TC", sans-serif';
    font-weight: 400;
}




/* = = = footer = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
/*Footer*/

@media (max-width: 768px) {
    #bottom_menu {
        display: none;
    }
}

.footer {
  padding: 0;
  height: auto;
  aspect-ratio: 2000/400;
  opacity: 1;
  background: url("https://pic03.eapple.com.tw/rockinfitness/footer.jpg ");
  background-size: contain;
  background-size: cover;
  background-repeat: no-repeat;
  /* z-index: -999; */
}

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




.copy {
    background: transparent;
    color: #ffffff24;
    border: none;
    margin-top: 0;
    border-top: 0px #ffffff54 solid;
    padding: 10px 0;
    /* display: none; */
    bottom: 0;
    position: absolute;
    /* right: 50%; */
    width: 100%;
    font-size: 8px;
}

.copy a {
    color: #ffffff2e;
}

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

.footer_menu a:hover {
    background: #02642F;
}

.footer_menu a {
    transition: all 0.3s;
}

.box_link {
    display: none;
}

.footer_info li p {
    width: auto;
    color: #fff;
    width: fit-content;
    margin-right: 50px;
}

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

.footer_menu a {
    display: inline-block;
    padding: 5px 11px;
    border: 0;
    margin: 0 5px;
    font-size: 14px;
    line-height: 100%;
    color: #fff;
    background: transparent;
}

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

.footer_info {
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
    justify-content: center;
    display: none;
}


.center {
    max-width: 95%;
    width: 100%;
    margin: 0 auto;
}

.footer_info li:nth-child(1) {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    text-align: left;
    width: 100%;
}

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


.footer_info li p.add {}

.footer_info li p.add2 {
    margin-top: 10px;
}

.footer_logo {
    display: none;
}