@charset "utf-8";
/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/* 商品下拉超過30個變大 */
.stellarnav.desktop li.bigMenu>ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); left: 0; width: 100%; position: fixed; padding: 20px;}
.stellarnav.desktop li.bigMenu ul ul{top: 100%; left: 0; width: 100%; background: #efefef; height: auto; max-height: 300px; overflow: auto;}
.stellarnav.desktop li.bigMenu ul ul li{margin: 0;} 
.stellarnav.hasBigMenu li.bigMenu li.has-sub > a:after{border-left: 6px solid transparent; border-bottom:unset; border-right: 6px solid transparent; border-top: 6px solid #898989; right: 5px;}
/* 主分類超過30個但次分類直接顯示 
/* = = = 網站全域設定 = = = = = = = = = = = = = = = = = = = = = = = = = = =*/

/*色彩與文字大小*/
:root {
  --MainColor: #488ec0; /*網站主要色系*/
  --SubColor_1: #2cb3d1; /*網站輔助色系 1*/
  --SubColor_2: rgb(85, 255, 246); /*網站輔助色系 2*/
  --FontColor_1: #000; /*內文顏色 1*/
  --FontColor_2: #1b63bc; /*內文顏色 2*/
  --FontColor_3: #244977; /*內文顏色 3*/
  --BackgroundColor: #a5cfff; /*背景顏色*/
  --BorderColor: #666666; /*框線顏色*/
  --RedFont: #d12e2e;
  --SFontE: "Lexend", "微軟正黑體", sans-serif; /*特殊字體 英文*/
  --SFontC: "微軟正黑體", sans-serif; /*特殊字體 中文*/
  --LineHeight: 180%;
  --LetterSpacing_B: 2px;
  --LetterSpacing_S: 1px;
  --Transition: .5s ease-in-out;
  --f48: 48px;
  --f40: 40px;
  --f36: 36px;
  --f32: 32px;
  --f28: 28px;
  --f24: 24px;
  --f22: 22px;
  --f20: 20px;
  --f18: 18px;
  --f17: 17px;
  --f16: 16px;
  --f15: 15px;
  --f14: 14px;
}
@media (max-width:1024px) {
  :root{
    --f48: 40px;
    --f40: 36px;
    --f36: 32px;
    --f32: 28px;
    --f28: 24px;
    --f24: 22px;
    --f22: 20px;
  }
}
@media (max-width:768px) {
  :root{
    --f48: 32px;
    --f40: 28px;
    --f36: 26px;
    --f32: 24px;
    --f28: 20px;
    --f24: 20px;
    --f20: 18px;
    --f18: 17px;
    --f17: 16px;
  }
}
@media (max-width:600px) {
  :root{
    --f48: 28px;
    --f40: 24px;
    --f36: 22px;
    --f32: 20px;
    --f28: 18px;
    --f24: 18px;
    --f22: 18px;
    --f20: 17px;
    --f18: 16px;
    --f17: 15px;
  }
}
@media (max-width:375px) {
  :root{
    --f48: 24px;
    --f40: 20px;
    --f36: 18px;
    --f32: 18px;
    --f28: 17px;
    --f24: 17px;
    --f22: 17px;
    --f20: 16px;
    --f18: 15px;
  }
}

/*--基礎設定---------------------------------------*/
.path p, .path p a {display: none;}
/*反白顏色*/
::-moz-selection{ background-color: var(--SubColor_1); color: var(--BackgroundColor);}
::selection{ background-color: var(--SubColor_1); color: var(--BackgroundColor);}
.linkBox_Open + span i { transform: rotate(45deg);}

/*滾輪*/
::-webkit-scrollbar { width: 7px;}/*滾輪寬度*/
::-webkit-scrollbar-button { background: transparent; border-radius: 4px; height: 0;}/*滾輪與視窗上下的間距*/
::-webkit-scrollbar-track-piece { background: #000;}/*滾輪軌道背景*/
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: var(--MainColor); border: 1px solid var(--BorderColor);}/*滾輪樣式*/
::-webkit-scrollbar-track { box-shadow: transparent;}/*滾輪軌道樣式*/


/* = = = 預設解除背景輪播 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/*預設解除背景輪播*/
#content_main { margin:0;}
.bannerindex { position:relative; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;}
.swiper-slide img {
    height: auto;
    animation: none !important;
    transform: scale(1.011);
}

@media screen and (max-width: 768px) {
    .bannerindex {
        position: relative;
        height: 0;
    }

    .swiper-banner {
        position: relative;
        margin: 0;
        height: 100vh;
    }
}




@media screen and (max-width: 500px) {
    .swiper-wrapper .swiper-slide:nth-child(1) {
        background-size: contain;
    }

    .swiper-wrapper .swiper-slide:nth-child(2) {
        background-size: contain;
    }

}

/*小東西*/
#bottom_menu li a em,#bottom_menu li a i  {    color: #488ec0;
}


/* Header */
.main_header_area::before {
  content: "";
  width: 0%;
  height: 5px;
  background: linear-gradient(90deg, #488ec0, #2cb3d1, rgb(85, 255, 246));
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width 1s ease-in;
}


.main_header_area.loaded::before {
  width: 100%;
}


.header_area.sticky .main_header_area:before {
    width: 100%; 
}

.header_area {
    position: sticky; 
    z-index: 9999;
    padding: 0px;
    background: #fff;
    width: 100%;
    transition: all .2s; 
}
.header_area.sticky {
    width: 100%;
    z-index: 9999;
    background: linear-gradient(90deg, #488ec0, #2cb3d1, rgb(85, 255, 246));
    
}
.main_header_area .container {
    max-width: 90%;
    margin: auto;
}

.navigation {
    width: 100%;
    position: relative;
    padding: 0;
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-gap: 0 20px;
    margin-top: 0;
}
.nav-header {
    z-index: 123;
    top: 0;
    left: 0;
    max-width: 150px;
    width: 100%;
    grid-row: 1 / span 2;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.nav-brand {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    width: 350px;
    padding: 10px;
}
.stellarnav > ul > li > a {
    padding: 0;
    color:#488ec0;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    font-size: 17px;
    line-height: 40px;
    height: 40px;
    margin: 0 5px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    font-family: sans-serif;
    font-weight: 700;
    letter-spacing: 4px;
}
.sticky .stellarnav > ul > li > a {color:#fff;}
.stellarnav > ul > li > a:hover {color:var(--MainColor);}
.stellarnav li li :hover {
    background:var(--MainColor);
    color: #ffffff;
    font-weight: 500;
}
.stellarnav {    padding-bottom: 10px;}



.sticky .nav-brand img {filter: brightness(0) invert(1); /* 變成白色 */}



/*購物車隱藏*/
.box_search {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 160px;
    margin-bottom: 5px;
    display: none;
}

/*選單icon隱藏*/
.me_tp_features a i {
    margin: 0 3px;
    display: none;
}
.stellarnav li li :hover {
    background: linear-gradient(90deg,  #488ec0, #2cb3d1, rgb(85, 255, 246));
    color: #ffffff;
    font-weight: 500;
}
.stellarnav li.has-sub > a:after {
    content: '';
    margin-left: 10px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #488ec0;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
}


@media only screen and (max-width: 1024px) {
.navigation {
  display: flex;
  flex-direction: column;    padding: 10px;
}
}

@media only screen and (max-width: 768px) {
.navigation {display: flex;align-items: center;padding: 0px;}
.nav-brand {    width: 130px;}
.me_tp_features {display: none;}


/*側邊選單*/

    .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: var(--MainColor);}
  .sticky .stellarnav .menu-toggle span.bars span {background:#fff;}
	.stellarnav .menu-toggle:after {display: none;}
	.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu {background: transparent;}
	.stellarnav.mobile.left .close-menu {background: var(--MainColor);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: 35px;}
    .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;color:var(--MainColor);}
    .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: var(--MainColor);}
    .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:var(--MainColor);}
}

@media only screen and (max-width: 600px) {
    .nav-brand {
        width: 100px;
    }
    .stellarnav.mobile {top: 25px;
    }
}

@media only screen and (max-width: 600px) {
.nav-header {max-width: 90px;}

}

@media only screen and (max-width: 350px) {
    .nav-brand {
        width: 150px;
    }

}



/* -------------------- FOOTER -------------------- */


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

    /* 開啟手機板下方按鈕所需設定 */

    .footer.with_shopping_mode {
        padding: 30px 0 55px;
    }

    #to_top {
        bottom: 60px;
    }
}


/*--------------------版權塊 -------------------- */

.copy {
    border-top: none;
    margin-top: 30px;
}

.copy,
.copy a {
    font-size: 10px;
color: #fff;
    background: #2cb3d1;
}

.copy a:hover {
    color: var(--bg-color);
    text-decoration: underline var(--bg-color) 1px solid;
    text-underline-offset: 4px;
}

/*YKQK版權塊 -------------------- */

.footer {
    background: #fff;
    padding: 40px 0px 0px;
    box-shadow: 0px -5px 20px rgba(51, 51, 51, .05);
}

.footer .center {
    padding: 0 3%;
    max-width: 1200px;
}

.footer_logo {
    width: 40%;
    max-width: 250px;
    margin: 0 auto;
}

.footer_info {
    grid-template-columns: 1fr;
    padding: 0;
    grid-gap: 20px;
}

.footer_info li {
    padding: 0;
}

/* 聯絡資訊 */
.footer_info li:nth-child(1) {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
    gap: 0px 20px;
    text-align: center;
}

.footer_info li p,
.footer_info li p a{
    color: var(--FontColor);
}


/* 導覽按鈕 */
.footer_info li:nth-child(2) {
    margin-top: 20px;
    text-align: center;
}

.footer_menu a {
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--FontColor);
    transition: var(--tr);
}

.footer_menu a:hover {
    background: transparent;
    color: var(--SubColor);
    transition: var(--tr);
}

/* 隱藏回首頁 */
/* 隱藏第一個 a */
.footer_menu a:first-of-type {
    display: none;
}

/* 隱藏第二個 a */
.footer_menu a:nth-of-type(2) {
    display: none;
}



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

@media screen and (max-width: 1300px) {
    .footer_info {
        grid-template-columns: 1fr;
        padding-right: 0;
        text-align: center;
    }

    .footer_logo {
        /* width: 120px; */
        margin: 0 auto;
    }

    .box_link {
        position: relative;
        max-width: inherit;
        flex-direction: row;
        right: auto;
        justify-content: center;
    }

    .box_link a {
        margin: 8px;
    }

}


/* RWD ↓↓↓ ~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1024px) {
.me_tp_features {        display: none;}
    }

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

@media screen and (max-width: 600px) {
    .footer_logo {
    max-width: 150px;}
}

@media screen and (max-width: 480px) {
    .footer_logo {
        width: 60%;
    }
.footer_info ul {
    text-align: left; /* 文字靠左 */}
}

@media screen and (max-width: 350px) {
    .footer_logo {
    max-width: 110px;}
}


/* = = = banner = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */



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

/*相簿主分類*/
.subalbum-menu h2 {font-size: 18px;color: #488ec0;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: #488ec0;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: #37698d;}

.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: linear-gradient(90deg, #488ec0, #2cb3d1, rgb(85, 255, 246));
    font-size: 20px;
}

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



/*相簿次分類*/
.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);}
}


/*首頁相簿*/

.animated-arrow {background: linear-gradient(90deg, #488ec0, #2cb3d1, rgb(85, 255, 246));}

.module_i_album {
    max-width: 1600px;
    padding: 100px 20px 50px;
}

/* 首頁相簿標題 */
.module_i_album .title_i_box h6 {
    font-size: 18px;
    color: #488ec0;
    letter-spacing: .2rem;
    font-family: "Noto Serif CJK TC", serif;
    font-weight: normal;
}
.module_i_album .title_i_box h4 ,.module_i_news .title_i_box h4 {
    font-size: 32px;
    color: #488ec0;
    letter-spacing: 3px;
    font-weight: bold;
    font-family: "Noto Serif CJK TC", serif;
}


.module_i_album .title_i_box h4::before {
    content: "CASE";
    display: block;
    font-size: 16px;
    color: #488ec0;
    margin-top: 15px;
    letter-spacing: 2px;
    font-weight: 500;
}


/* 相簿列表格子排列 */
.i_album_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 隱藏首頁超過6張的相簿 */
.pageIndex .i_album_list li:nth-child(n+7) {
    display: none;
}

/* 相簿每個項目 */
.i_album_list li a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px; /* 圓角 */
}

/* 相簿圖片容器 */
.i_album_list li a .show_pic {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    transition: transform 0.5s, border-radius 0.5s;
}

/* 圖片本身 */
.i_album_list li a .show_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
    transform: scale(1);
    transition: transform 0.5s, border-radius 0.5s;
}

/* hover 放大圖片、改圓角 */
.i_album_list li a:hover .show_pic img {
    transform: scale(1.2);
    border-radius: 20px;
}

/* 文字初始透明，置中 */
.i_album_list li a p span,
.i_album_list li a .show_name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;
    width: 100%;
    text-align: center;
    pointer-events: none;
    transition: all 0.5s;
}

/* hover 時文字顯示 */
.i_album_list li:hover a p span,
.i_album_list li:hover a .show_name {
    color: #fff;
    padding: 10px;
    background: linear-gradient(90deg,  #488ec0, #2cb3d1, rgb(85, 255, 246));
    font-size: 20px;
}

/* item margin */
.i_album_list li {
    margin-bottom: 30px;
}

/* 相簿浮現動畫 */
.show_content {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 768px) {
.i_album_list {grid-template-columns: repeat(2, 1fr);}

}


@media screen and (max-width: 450px) {
.i_album_list {grid-template-columns: repeat(1, 1fr);}

}




/*文章設定*/

/*首頁文章*/
.module_i_news .title_i_box h4::before {
    content: "NEWS";
    display: block;
    font-size: 16px;
    color: #488ec0;
    margin-top: 15px;
    letter-spacing: 2px;
    font-weight: 500;
}

/*文章修改*/
.blog_box {padding-bottom: 50px;}
.subbox_item a:before, .subbox_item a:after { display:none;}
.subbox_item a { display: block; }
.blog_subbox { grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)); }
.blog_le .accordion { border: none; }
.news_related { display:none;}
.blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {  background: #333 !important; }

.module_i_album {    padding: 80px 20px;}


/*首頁標題*/
.module_i_news .title_i_box,
.module_i_album .title_i_box {
    display: flex;
    align-items: center; /* 文字垂直置中 */
    gap: 15px;           /* h6 跟 h4 的距離 */
    position: relative;  /* 為了線定位 */
    padding-bottom: 8px; /* 線與文字間距 */
}

/*h6與h4順序保持原本設定*/
.module_i_news .title_i_box h6,
.module_i_album .title_i_box h6 {
    order: 2;
}

.module_i_news .title_i_box h4,
.module_i_album .title_i_box h4 {
    order: 1;
}

/*線，文字下方延伸，不影響 h6、h4 */
.module_i_news .title_i_box::after,
.module_i_album .title_i_box::after {
    content: "";
    position: absolute;
    top: 50px;
    left: 0;               /* 從左邊開始 */
    width: 1600px;         /* 線長 */
    max-width: 100%;       /* 適應小螢幕 */
    height: 1px;           /* 線粗 */
    background-color: #ccc;/* 線顏色 */
}




/*內層*/
.blog_shareData {display: none;}
.module_i_album .title_i_box h6 {  color: #488ec0; font-size: 18px; font-family: 'Noto Serif CJK TC';  font-weight: 700;margin-bottom: 5px; }
.blog_le .accordion { border-radius: 5px; }
.blog_in_page .path { margin-bottom: 50px;}
.blog_in_page h4.blog_category_title {
    color: #333;
    font-family: "Noto Serif CJK TC", serif;
    font-weight: 400;
    margin-top: 15px;
}
.module_i_album .title_i_box h4 { font-size: 18px; font-family: 'cinzel';
    color: #488ec0}

.promotion_title { display:none;}
.other_promotion { display:none;}
.other_select_page .page { display:none;}
.i_blog_ri {  margin-top: 15px; }
.module_i_news li a:before {  bottom: -45px; }

.toShareNews b, .toShareNews a, .toShareNews a object, .toShareNews a i {
    display: NONE;
}