@charset "utf-8";

/* -----------------------------------header------------------------------ */
/*header*/
.header_area,.header_area.sticky {background: #fff;}
.main_header_area .container {max-width: 1800px;width: 94%;}
.navigation {display: flex;align-items: center;}
.nav-brand img{display: block;    padding: 10px;max-width: 70%;}
.header_area, .header_area.sticky {background: linear-gradient(45deg, #257ACE, #2E3192);padding: 0;}
.pageIndex .header_area{position: fixed;}
.main_header_area .container {max-width: 2000px;width: 100%;}
.nav-header {max-width: 320px;margin-left: 3%;}

/*子選單*/

/*下拉區塊*/
.stellarnav li.has-sub li {border: none;border-bottom: 1px solid #f3f3f3;}
.stellarnav li.has-sub li:last-child{border-bottom: none;}
.stellarnav li.has-sub li a {font-size: 13px;padding: 8px 12px;transition: all .5s;}
.stellarnav li.has-sub li a:hover{background: #9CD0FF;color: #fff;padding-left: 18px;}
.stellarnav li.drop-left li.has-sub > a:after {border-top: 5px solid transparent;border-bottom: 5px solid transparent;
    border-right: 4px solid #898989;}/*下拉箭頭*/


.stellarnav {padding-right: 30px;}
.stellarnav > ul > li > a {color: #fff;font-weight: bold;}
.stellarnav li.has-sub > a:after {display: none;}

.stellarnav > ul > li > a {
  position: relative;
  overflow: hidden;
  display: inline-block;
  color: #fff; /* 文字顏色 */
  text-decoration: none;
  padding: 5px 15px;
  background: #00000000;
  border-radius: 5px;
  transition: background 0.2s;
}

.stellarnav > ul > li > a::before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  top: 50%;
  left: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.477) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s, opacity 1s;
  border-radius: 50%;
  opacity: 0;
}

.stellarnav > ul > li > a:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}



@media screen and (max-width: 1410px){
.stellarnav > ul > li > a {padding: 5px;    font-size: 15px;}

}

@media screen and (max-width: 1250px){
	.pageIndex .header_area {position: sticky;}
	.nav-header {max-width: 250px;margin-left: 1%;}
	.nav-brand {height: 55px;}
	.stellarnav {padding-right: 0;}
	.stellarnav > ul > li > a {font-size: 14px;}

}

@media screen and (max-width: 1082px){
.stellarnav > ul > li > a {padding: 5px; }
.stellarnav {width: 60%;}
}

@media screen and (max-width: 1024px){
    .nav-header {padding-top: 10px;}
	.stellarnav > ul > li > a{font-size: 14px;}
    .stellarnav {width: 100%;}
}


@media screen and (max-width: 768px) {
    .nav-header {padding: 10px 0;margin-left: 15px;}
    .nav-brand img {margin: auto;}
    .stellarnav .menu-toggle:after {margin-top: 8px;font-weight: 400;}
    .stellarnav .menu-toggle span.bars span {height: 1px;}
	.stellarnav.mobile > ul > li > a.dd-toggle{top: 15px;}
	.stellarnav.mobile > ul > li.open > a.dd-toggle{top: 5px;}
	.stellarnav a.dd-toggle .icon-plus:before,.stellarnav a.dd-toggle .icon-plus:after {border-bottom: solid 1px #777;}
	.stellarnav.mobile .close-menu{position: relative;color: transparent;}
	.stellarnav.mobile .close-menu > *{display: none;}
	.stellarnav.mobile .close-menu:before{content: "×";position: absolute;right: 10px;top: 10px;color: #000;
        font-size: 12px;}
    .stellarnav.mobile > ul > li > a b{vertical-align: middle;}
	.stellarnav .menu-toggle span.bars span {height: 2px;width: 28px;background: #fff;}
	.stellarnav .menu-toggle:after {font-weight: 600;color: #fff;}
	.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu {background: transparent;}
	.stellarnav.mobile.left .close-menu {background: #9CD0FF;width: 32px;height: 32px;margin: 10px 10px 0 auto;
		border-radius: 10px;display: block;}
    .stellarnav.mobile .close-menu:before {font-size: 20px;top: 0;right: 0;display: block;width: 100%;height: 100%;
    	line-height: 30px;text-align: center;color: #fff;padding-left: 1px;}
    .stellarnav.mobile {left: 8px;top: 8px;}
    .stellarnav.mobile li.open {background: #f8f8f8;padding: 0;}
    .stellarnav.mobile li.open li.open {background: #f3f3f3;padding: 0;}
    .stellarnav.mobile li li.has-sub a {padding: 10px 15px;}
    .stellarnav.mobile li.has-sub li a {text-align: left;padding: 8px 15px;}
    .stellarnav.mobile li.has-sub li a.dd-toggle{right: 5px;}
    .stellarnav.mobile li.has-sub li a.dd-toggle:hover {padding-left: 0;text-align: center;background: transparent;}
    .stellarnav.mobile > ul > li {border-bottom: 1px #f6f5f5 solid;}
    .stellarnav.mobile > ul > li > a {color: #333;}
    .stellarnav.mobile > ul > li > a.dd-toggle {top: 5px;}
    .stellarnav a.dd-toggle .icon-plus:before, .stellarnav a.dd-toggle .icon-plus:after{width: 10px;}
    .stellarnav.mobile > ul > li > ul > li > ul ~ a.dd-toggle .icon-plus {margin: 0 auto;display: block;}
    .stellarnav li.has-sub li a:hover {background: #fff;color: #333;}
}


@media only screen and (max-width: 570px) {
    .stellarnav .menu-toggle {padding: 10px;}
}

/*歡迎洽詢*/
.me_tp_features {position: relative;order: 3;top: 0;max-width: 220px;}
.tp_links a.me_tp_fb,.tp_links a.me_tp_line,.tp_links a.me_tp_mail{display: none;}
.me_tp_features .tp_links {display: block;}
.tp_links a.me_tp_call {background: #58affc;padding: 25px 0 25px 70px;position: relative;width: 100%;}
.tp_links a.me_tp_call:hover{background: #257ACE;}
.tp_links a.me_tp_call:before,.tp_links a.me_tp_call:after{display: block;text-align: left;color: #fff;}
.tp_links a.me_tp_call:before{content: "歡迎洽詢";font-size: 20px;font-weight: bold;    letter-spacing: 6px;}
.tp_links a.me_tp_call:after{content: "0978-235755";}
.me_tp_features a i {position: absolute;left: 20px;font-size: 30px;top: 50%;transform: translateY(-50%);    color: #fff;
}
.box_search{display: none;}


@media screen and (max-width: 1250px){
.tp_links a.me_tp_call {    padding: 10px 0 10px 80px;}
.me_tp_features {max-width: 200px;
}
}

@media screen and (max-width: 1082px){
.tp_links a.me_tp_call:before {font-weight: bold;letter-spacing: 3px;    font-size: 18px;}
.tp_links a {font-size: 13px;}
.me_tp_features a i {left: 20px;font-size: 20px;}
.tp_links a.me_tp_call {padding: 10px 0 10px 55px;}
.me_tp_features {max-width: 150px;}


}




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




/* ----------------------------------- footer ----------------------------------- */
.footer {
  position: relative;
  background: linear-gradient(45deg, #257ACE, #2E3192);
  overflow: hidden;
  padding: 50px 20px 50px; /* 上下留空，底部給 copy */
  min-height: auto;         /* 高度由內容決定 */
}

/* 波浪動畫 */

.footer::before,
.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;              /* 跟 footer 一樣高 */
  background: rgba(255,255,255,0.15);
  border-radius: 43% 57% 57% 43% / 50% 50% 50% 50%;
  animation: wave 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* footer 內容層 */
.footer_info li p.fax:before { content: 'FB ｜'; }
.footer_info li p.tel:before { content: '電話 ｜'; }
.footer_info li p.line:before { content: 'LINE ｜'; }
.footer_info li p.add:before { content: '地址 ｜'; }

.footer_info li { display: grid; }
.footer_info li p.fax { order: 1; }
.footer_info li .tel { order: 2; }
.footer_info li p.line { order: 3; }
.footer_info li p.add { order: 4; }
.footer_info li .mail { order: 5; display: none; }

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

/* footer menu */
.footer_menu a {
  position: relative;
  z-index: 1;                 /* 在波浪上方 */
  background: #257ACE;
  border: solid 1px #fff;
  color: #fff;
  letter-spacing: 0.2rem;
  font-size: 13px;
  border-radius: 30px;
  font-weight: 300;
  padding: 6px 20px 8px;
  min-width: 100px;
  text-align: center;
  margin: 5px 8px 5px 0;
  transition: all 0.5s;
}

.footer_menu a:first-child { display: none; }
.footer_menu a:hover { background: #2E3192; color: #fff; }

.box_link { display: none; }

/* top */
#to_top { color: #257ACE; }
#to_top i:before, #to_top i:after { background: #257ACE; }

/* bottom menu */
#bottom_menu li a i, #bottom_menu li a em { color: #257ACE; }
#bottom_menu { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; }

/* copy 版權 */
.copy {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: #257ACE;
  color: #fff;
  font-size: 12px;
  padding: 12px 0;
  z-index: 2;
}


.copy a { color: #fff; transition: all 0.3s; }
.copy a:hover { color: #000; }

/* ------------------- RWD ------------------- */
@media screen and (max-width: 1281px) {
  .footer_info { padding-right: 0; }
}

@media screen and (max-width: 1200px) {
  .footer .center { max-width: 1000px; }
  .footer_logo { max-width: 250px; }
  .footer_info { grid-template-columns: 250px 1fr; }
}

@media screen and (max-width: 768px) {
  .footer_logo { max-width: 200px; }
  .footer_menu { width: 80%; }
  #to_top { bottom: 70px; left: 20px; }
  .footer { padding-bottom: 50px; }
  .footer::before, .footer::after { height: 100%; }
  .copy {bottom: 50px;}
}

@media screen and (max-width: 690px) {
  .footer_info { grid-template-columns: 180px 1fr; }
}

@media screen and (max-width: 600px) {
  .footer_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .footer_info li:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer_menu { width: 100%;        display: flex;          /* flex 排列 */
        justify-content: center; /* 水平置中 */
        align-items: center;    /* 垂直置中 */
        flex-wrap: wrap;        /* 太長自動換行 */
        padding: 0;             /* 去掉多餘 padding */
        margin: 0 auto;         /* 水平置中容器 */
    }
    .footer-menu li, 
    .footer-menu a {
        margin: 5px 10px;       /* 每個項目間距 */
        text-align: center;
        float: none;            /* 避免浮動影響 */
    }

  .footer { padding-bottom: 60px; }
.footer_info li+li {margin-bottom: 20px;}

}

@media screen and (max-width: 483px) {
  .footer_info ul { width: 90%; }
}

@media screen and (max-width: 395px) {
  .footer_menu a { margin: 5px; }
}



/* -----------------------------------banner------------------------------ */

.banB {display: none;}
.path p, .path p a {display: none;}

.banner {
    position: relative;
    width: 100%;
    height: 400px;
    background: #eeeeee00;
    overflow: hidden;
}

/* 圓形 */
.banner {
    position: relative;
    width: 100%;
    height: 400px;         /* 你要的 banner 高度 */
    overflow: hidden;
}

/* 滿版波浪 */
.banner::before {
    content: "";
    position: absolute;
    width: 2000px;         /* 你指定的寬 */
    height: 400px;         /* 你指定的高 */
    background: url(https://pic03.eapple.com.tw/hcwaterproof/ban_1.png) no-repeat center/cover;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: waveFloat 7s ease-in-out infinite;
}

/* 波動動畫（適合大張圖） */
@keyframes waveFloat {
    0%   { transform: translate(-50%, 0); }
    25%  { transform: translate(calc(-50% + 15px), -8px); }
    50%  { transform: translate(calc(-50% + 0px), -14px); }
    75%  { transform: translate(calc(-50% - 15px), -6px); }
    100% { transform: translate(-50%, 0); }
}

.banner h5 {
    position: relative;
    color: #fff;
    font-weight: 800;
    font-family: 'Noto Serif TC';
    line-height: 1;
    font-size: 35px;

}


/* 只套用在 news 頁 */
body.article_a .banner h5::after {
    /* news 頁的樣式 */

    content: "CASES";
    display: block;
    font-size: 18px;
    color: #fff;
    margin-top: 15px;
    letter-spacing: 2px;
    font-weight: 500;

}

/* 只套用在 article 頁 */
body.article_b .banner h5::after {
    /* article 頁的樣式 */

    content: "NEWS";
    display: block;
    font-size: 18px;
    color: #fff;
    margin-top: 15px;
    letter-spacing: 2px;
    font-weight: 500;
}


.album_class_page .banner h5::after {
content: "PROJECT";
    display: block;
    font-size: 18px;
    color: #fff;
    margin-top: 15px;
    letter-spacing: 2px;
    font-weight: 500;
}


/* -----------------------------------文章設定------------------------------ */
.blog_page h4.blog_category_title {display: none;}
.blog_page  .main_part {
    max-width: 1600px;
    padding: 100px 20px 50px;
}
.blog_box,
.blog_le {
    padding: 0;
}

.blog_ri {
    padding: 0 0 0 60px;
}

.blog_subbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px 15px;
}



.subbox_item,
.module_i_news li {
    width: 100%;
    margin: 0;
    border-bottom: none;
    background: #fff;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .075);
}

.subbox_item a,
.module_i_news li a {
    display: flex;
    flex-flow: column wrap;
    gap: 0;
}

.blog_list_le,
.i_blog_le {
    height: auto;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
}

.blog_list_le:after,
.i_blog_le:after {
    content: 'VIEW MORE +';
    font-family: 'Roboto', 'Noto Sans TC', sans-serif;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #257ACE;
    opacity: 0;
    transition: all .4s;

}

.subbox_item a:hover .blog_list_le:after,
.module_i_news li a:hover .i_blog_le:after {
    opacity: 1;
}

.blog_list_le img,
.i_blog_le img {
    min-width: 100%;
    margin: 0 auto;
    object-position: center;
    transition: 1s ease;
}

.subbox_item a:hover .blog_list_le img,
.module_i_news li a:hover .i_blog_le img {
    transform: scale(1.1);
}

.blog_list_ri,
.i_blog_ri {
    display: flex;
    flex-flow: column wrap;
    padding: 15px 10px 10px;
    position: relative;
    justify-content: center;
}

.blog_list_ri h5,
.i_blog_ri h5 {
    color: #257ACE;
    font-size: 20px;
    font-family: 'Noto Serif TC';
    font-weight: bold;
}

.blog_list_ri em,
.i_blog_ri em {
    font-weight: 400;
    margin: 8px 0 10px;
    font-size: 13px;
}

.blog_list_ri p,
.i_blog_ri p {
    line-height: 160%;
    -webkit-line-clamp: 2;
    margin-top: 0;
    font-size: 14px;
}

.subbox_item a:before,
.subbox_item a:after,
.module_i_news li a:before,
.module_i_news li a:after {
    content: none;
}

h5.blog_le_t {
    display: none;
}

.blog_le .accordion {
    border-radius: 0;
}

.accordion li .link a {
    color: #444;
    font-weight: 400;
    font-size: 15px;
    padding: 12px;
}

.accordion li .link {
    border-bottom: none;
}

.accordion li {
    transition: all 0.2s ease;
}

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

.blog_le .accordion>li.open,
.blog_le .accordion>li.on_this_category {
    background: #257ACE !important;
}

.blog_le .accordion>li.open .link a,
.blog_le .accordion>li.open .link i {
    color: #fff !important;
}

.submenu {
    background: #fff;
    font-size: 14px;
}

.submenu a {
    font-family: 'Noto Sans TC', sans-serif;
    color: #444;
    letter-spacing: 0px;
    font-weight: 400;
    padding: 12px 12px 12px 36px;
    border-left: #fbf7f4 0 solid;
    transition: all .15s;
}

.submenu li.on_this_category a,
.submenu a:hover {
    background: #fbf7f4;
    color: #222;
}

.submenu a i {
    left: 12px;

}

.submenu a:hover {
    border-left-width: 4px;
}

.blog_search input[type=search] {
    background: #fff;
    font-size: 13px;
    border-radius: 0;
    padding: 10px 36px 10px 12px;
}

.blog_search input[type=submit] {
    filter: grayscale(20);
}

.blog_le .accordion li .link i {
    transition: none;
}

/*內頁*/
.articel_mainPic img {max-width: 60%;
    padding: 40px;
}
.blog_shareData {
    display: none;
}

h4.blog_category_title {
    padding: 0;
    margin-bottom: 0;
    font-size: 26px;
    color: #257ACE;
    font-family: 'Noto Serif TC';
}

.blog_box_edit {
    color: #666;
    font-size: 16px;
}

.blog_box_edit * {
    line-height: 170%;
}

.blog_back {
    width: 100%;
    margin: 0 auto;
    grid-gap: 10px;
    justify-content: center;
}

.blog_back a {
    width: 100%;
    font-weight: 500 !important;
}

.blog_back a:hover {
    background: #000 !important;
}

.blog_back a.article_btn_next,
.blog_back a.article_btn_prev,
.blog_back a.article_btn_back {
    background: #257ACE;
    transition: all .3s ease;
}

.news_related {
    padding: 48px 0;
    background: #fff;
}

.news_related_list {
    max-width: 1500px;
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.news_related_list li {
    width: calc((100% - 60px) / 4);
}

.news_related_list li a {
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.lastPage {
    background: #257ACE;
    margin: 40px auto 20px;
}

.news_related h6 span:before {
    color: #666;
    font-family: 'Noto Serif TC';
}

.news_related_list li a p {
    margin: 6px auto 4px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #666;
}



@media screen and (max-width: 1024px) {
  .module_i_news ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .blog_subbox {
    grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 768px) {
    .blog_ri {padding: 0;}

    .blog_subbox {
    grid-gap: 15px; /* 間距可調整 */
    }

    .blog_search {margin-bottom: 30px;}

    h4.blog_category_title {font-size: 22px;}

    .module_i_news ul {
    grid-template-columns: repeat(3, 1fr); /* 一列三個 */
    grid-gap: 15px; /* 間距可調整 */
    }
    
    .module_i_news {
        padding: 60px 0;
    }

    .articel_mainPic img {max-width: 100%;}
}

@media screen and (max-width: 600px) {
.module_i_news ul  {
    grid-template-columns: repeat(2, 1fr); /* 一列三個 */
    grid-gap: 15px; /* 間距可調整 */}
}

@media screen and (max-width: 450px) {
 .blog_subbox,.module_i_news ul {
    grid-template-columns: repeat(1, 1fr); /* 一列三個 */
    grid-gap: 15px; /* 間距可調整 */}
}


/* -----------------------------------首頁文章設定------------------------------ */
.module_i_news .title_i_box {
    display: flex;           
    flex-direction: column;  /* 垂直排列 */
    gap: 6px;                /* h4 與 h6 之間的距離，可自行調整 */
}

.module_i_news .title_i_box h4 {
                
    position: relative;
    color: #257ACE;
    font-weight: 800;
    font-family: 'Noto Serif TC';
    line-height: 1;
    font-size: 40px;
    margin: 0;               /* 移除預設 margin，避免干擾間距 */
}



.module_i_news .title_i_box h4::after {
    content: "CASES"; /* 模擬 h6 */
    display: block;
    font-size: 18px;
    color: #68B8FF;
    font-family: 'Noto Serif TC';
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: 6px; /* h4 與 h6 的間距 */
}

.module_i_news ul {grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));}

.animated-arrow {
    background: #257ace;}

@media screen and (max-width: 1200px) { 
    .module_i_news ul {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}


}


/*相簿管理******************************************** */
.album_page .main_part {
    max-width: 1600px;
    padding: 100px 20px 50px;
}

/*相簿主分類*/
.subalbum-menu h2 {font-size: 18px;color: #333;letter-spacing: .2rem;}
.show-list .show_pic {aspect-ratio: 4 / 3;}
.show-list .show_pic img {transform: scale(1);transition: all .5s;}
.show-list .show_name{color: #333;letter-spacing: .2rem;text-align: center;}
.show-list .item{margin-bottom: 30px;}
.show-list .item .overlay {-webkit-transform: scale(1);transform: scale(1);}
.show-list .item:hover .show_name {color: #257ACE;}

.show-list .item .show_pic {
    overflow: hidden;
    border-radius: 20px;
    transition: 0.5s;
    position: relative; /* 讓 <p> 可以絕對定位在裡面 */
}


.show-list .item .show_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
    transform: scale(1);
    transition: transform 0.5s, border-radius 0.5s;
}

.show-list .item:hover .show_pic img {
    transform: scale(1.2);  /* hover 放大 */
    border-radius: 20px;
}

/* 文字置中並寬度跟容器同步 */
.other_subalbum li a p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;
    width: 100%;           /* 寬度跟容器一樣 */
    box-sizing: border-box; /* 包含 padding */
    transition: all 0.5s;
    text-align: center;  
}

.other_subalbum li:hover a p {
    color: #fff;
    padding: 10px;
    background: #257ACE;
    font-size: 20px;
}

.other_album_choice li {background: #257ACE;padding: 5px 20px;border-radius: 0;font-size: 13px;}
.album_fixed_title {    color: #257ACE;}



/*相簿次分類*/
.pic-list .item h6 {
    display: flex;
    justify-content: center;}

/*相簿特效*/
.show_content {opacity: 0;              /* 初始透明 */
  transform: translateY(10px); /* 從下方浮現 */
  animation: fadeIn 1s ease forwards; /* forwards 保持最終狀態 */
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);}
}