@charset "utf-8";

/*網站scrollbar*/
::-webkit-scrollbar {width: 8px;background-color: #2a2b2b;}
::-webkit-scrollbar-thumb {background-color: #ffffff;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #111;}

/*預設解除背景輪播*/
#content_main { margin:0;background: url(https://pic03.eapple.com.tw/moquan/all_bg.jpg);background-size: cover;
    background-position: bottom;background-attachment: fixed;}
#content {background: #000;background: url(https://pic03.eapple.com.tw/moquan/all_bg.jpg);background-size: cover;
    background-position: bottom;background-attachment: fixed;}
.bannerindex { position:relative; height:auto;}
.swiper-banner { position:static; margin:0; height:auto;} 
/* .swiper-slide img { height:auto;} */
@media screen and (max-width: 768px) {
.bannerindex { padding:0; margin:0;}
}

.main_part {width: 90%;max-width: 1500px;padding: 250px 0;}
.show_content, .show_content {padding: 0;}
.page {color: #ffffff;}

@media screen and (max-width:1024px) {
.main_part {padding: 200px 0;}
}
@media screen and (max-width:768px) {
.main_part {padding: 150px 0;}
}
@media screen and (max-width:600px) {
.main_part {padding: 100px 0;}
}
.path p, .path p a {display: none;}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*網站 LOADING 畫面*/

@keyframes fadeInOut {
  -10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

body.pageIndex:before {
    content: '';
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 220 / 411;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    background: url(https://pic03.eapple.com.tw/moquan/COVER.jpg);
    background-size: cover;
    background-position: center;
	-webkit-animation: fadeInOut 4.5s ease-in-out forwards;
	animation: fadeInOut 4.5s ease-in-out forwards;}

@keyframes unwarpEffect {
  0% {transform: skewX(20deg) scale(1.2);filter: blur(2px);opacity: 0;}
  50% {transform: skewX(0deg) scale(1);filter: blur(0px);opacity: 1;  }
  100% {transform: skewX(0deg) scale(1);filter: blur(2px);opacity: 0;}
}

body.pageIndex:after {
    content: '';
    pointer-events: none;
    display: block;
    width: 10%;
    aspect-ratio: 6 / 5;
    position: fixed;
    top: 40%;
    left: 45%;
    z-index: 10000;
    background: url(https://pic03.eapple.com.tw/moquan/cover_logo.svg);
    -webkit-animation: unwarpEffect 4s ease-in-out forwards;
    animation: unwarpEffect 4s ease-in-out forwards;
    background-size: contain;}

/*大圖*/
.bannerindex:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #00000033 0%, transparent 10%);
    z-index: 2;
}
.swiper-banner .swiper-slide img {width: 100%;}


@media screen and (max-width:1024px) {
body.pageIndex:after {left: 40%;width: 20%;}
}
@media screen and (max-width: 600px) {
.swiper-pagination-bullet { width: 8px;height: 8px;}
body.pageIndex:after {left:35%;width: 30%;}
}
@media screen and (max-width: 450px) {
.swiper-pagination-bullet { width: 5px;height: 5px;}
body.pageIndex:after {left:35%;width: 35%;}
}

/*內頁BANNER 設定*/
.banner {display: none;background: #00000080;min-height: 300px;align-content: flex-end;padding: 80px 0;}
.banner h5 {font-size: 25px;font-weight: normal;letter-spacing: 0.15em;color: #fff;}
.banner.banA {}
.banner.banB {}
.banner.banC {}
.banner.banD {}
.banner.banE {}
.banner.banblog {}
@media screen and (max-width:1024px) {
.banner {min-height: 200px;padding: 50px 0;}
.banner h5 {font-size: 22px;}
}
@media screen and (max-width:768px) {
.banner {min-height: 200px;padding: 50px 0;}
.banner h5 {font-size: 22px;}
}
@media screen and (max-width:600px) {
.banner {min-height: 150px;padding: 30px 0;}
.banner h5 {font-size: 20px;}
}
@media screen and (max-width:450px) {
.banner {min-height: 120px;padding: 20px 0;}
.banner h5 {font-size: 18px;}
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*HEADER*/
.header_area { padding: 20px 0 0;background: unset;position: fixed;transition: 0.5s ease;}
.main_header_area .container { max-width: 95%;}
.navigation {grid-template-columns: 200px 1fr;grid-gap: 0;align-items: center;}
.me_tp_features {display: none;}

.header_area.sticky {background: unset;}
.header_area:before {content: '';display: block;position: absolute;top: -80px;left: 0;width: 100%;height: 80px;
    background: #000;opacity: 0;transition: 1s ease;}
.header_area.sticky:before {top: 0px;opacity: 1;transition: 1s ease;}
.header_area.sticky .nav-header {max-width: 150px;}

/*LOGO*/
.nav-header {max-width: 180px;grid-row: 1 / 1;transition: 0.5s ease;}
.nav-brand {display: flex;}
.nav-brand img {filter: brightness(15);}

/*電腦版選單--換成手機版*/
.stellarnav .menu-toggle {display: flex;flex-direction: column;align-items: center;z-index: 1;transition: 1s ease;}
.stellarnav .menu-toggle span.bars {display: flex;top: 0;flex-direction: column;align-items: center;justify-content: center;}
.stellarnav .menu-toggle span.bars span {width: 35px;height: 2px;background: #ffffff;margin: 3px auto;
    opacity: 1;border-radius: 0;transform: rotate(0deg) translateX(8px);transition: transform 1s ease, opacity 1s ease;}
.stellarnav.left.desktop.active .menu-toggle span.bars span:nth-of-type(1) {transform: rotate(20deg) translate3d(10px, 5px, 0px);}
.stellarnav.left.desktop.active .menu-toggle span.bars span:nth-of-type(2) {opacity: 0;transition: opacity 1s ease;}
.stellarnav.left.desktop.active .menu-toggle span.bars span:nth-of-type(3) {transform: rotate(-20deg) translate3d(10px, -5px, 0px);}
.stellarnav .menu-toggle:after {display: none;}
.stellarnav ul > li > ul > li {display: none !important;}

/*開啟MENU*/
.stellarnav {display: flex;flex-direction: row-reverse;align-items: center;gap: 30px;}
.stellarnav ul {opacity: 0;}
.stellarnav.left.desktop.active > ul {display: block !important;opacity: 1;}


.stellarnav.left.desktop > ul > li {opacity: 0;-webkit-transform: translateX(50px);transform: translateX(50px);visibility: visible;
    -webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
    transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;}
.stellarnav.left.desktop.active > ul > li {opacity: 1;-webkit-transform: translateX(0px);transform: translateX(0px);
    -webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
    transition: opacity 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;}
.stellarnav > ul > li:nth-of-type(1) {display: none;}

/*-----------每一顆按鈕的延遲出現-----------*/
.stellarnav.left.desktop.active > ul > li:nth-of-type(2) {
    -webkit-transition: opacity 0.5s ease 0.9s, -webkit-transform 0.5s ease 0.9s;
    transition: opacity 0.5s ease 0.9s, -webkit-transform 0.5s ease 0.9s;
    transition: opacity 0.5s ease 0.9s, transform 0.5s ease 0.9s;
    transition: opacity 0.5s ease 0.9s, transform 0.5s ease 0.9s, -webkit-transform 0.5s ease 0.9s;}
.stellarnav.left.desktop.active > ul > li:nth-of-type(3) {
    -webkit-transition: opacity 0.5s ease 0.75s, -webkit-transform 0.5s ease 0.75s;
    transition: opacity 0.5s ease 0.75s, -webkit-transform 0.5s ease 0.75s;
    transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.75s;
    transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.75s, -webkit-transform 0.5s ease 0.75s;}
.stellarnav.left.desktop.active > ul > li:nth-of-type(4) {
    -webkit-transition: opacity 0.5s ease 0.6s, -webkit-transform 0.5s ease 0.6s;
    transition: opacity 0.5s ease 0.6s, -webkit-transform 0.5s ease 0.6s;
    transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
    transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s, -webkit-transform 0.5s ease 0.6s;}
.stellarnav.left.desktop.active > ul > li:nth-of-type(5) {
    -webkit-transition: opacity 0.5s ease 0.45s, -webkit-transform 0.5s ease 0.45s;
    transition: opacity 0.5s ease 0.45s, -webkit-transform 0.5s ease 0.45s;
    transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s;
    transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s, -webkit-transform 0.5s ease 0.45s;}
.stellarnav.left.desktop.active > ul > li:nth-of-type(6) {
    -webkit-transition: opacity 0.5s ease 0.3s, -webkit-transform 0.5s ease 0.3s;
    transition: opacity 0.5s ease 0.3s, -webkit-transform 0.5s ease 0.3s;
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s, -webkit-transform 0.5s ease 0.3s;}
.stellarnav.left.desktop.active > ul > li:nth-of-type(6) {    
    -webkit-transition: opacity 0.5s ease 0.15s, -webkit-transform 0.5s ease 0.15s;
    transition: opacity 0.5s ease 0.15s, -webkit-transform 0.5s ease 0.15s;
    transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
    transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s, -webkit-transform 0.5s ease 0.15s;}
/*-----------每一顆按鈕的延遲出現-----------*/

.stellarnav > ul > li > a, .stellarnav > ul > li.has-sub > a {padding: 0 10px;color: #ffffff;letter-spacing: 0.15em;
    line-height: 1;color: #ffffff;margin: 0;height: 30px;transition: 0.5s ease;}
.stellarnav > ul > li > a b {line-height: 35px;height: 35px;}
.stellarnav > ul > li > a:hover b {transform: translateY(-35px);-webkit-transform: translateY(-35px);-moz-transform: translateY(-35px);}
.stellarnav li.has-sub > a:after {display: none;}

@media screen and (max-width:1024px) {
.header_area {background: #000000;position: sticky;padding: 15px 0;}
.header_area:before {height: 60px;top: -60px}
.main_header_area .container {max-width: 100%;}
.navigation {display: flex;justify-content: center;align-items: center;flex-direction: row;z-index: 1;}

.stellarnav {position: fixed;width: 0%;height: 100%;top: 0;right: 0;display: flex;gap: 30px;flex-direction: column;align-items: flex-end;}
.stellarnav.left.desktop.active {width: 50%;}
.stellarnav .menu-toggle {display: block;padding: 0;position: relative;top: 20px;right: 50px;}
.stellarnav.left.desktop >  ul, .stellarnav.left.desktop.active >  ul {display: flex !important;opacity: 0;width: 100%;height: 100%;
    -webkit-transform: translateX(100%);transform: translateX(100%);visibility: visible;transition: opacity .4s, transform .4s;flex-direction: column;
    align-items: center;justify-content: center;background: #000000f2;gap: 30px;}
.stellarnav.left.desktop.active >  ul {opacity: 1;-webkit-transform: translateX(0%);transform: translateX(0%);}
.stellarnav.left.desktop > ul > li {-webkit-transform: translateX(0px);transform: translateX(0px);}
.stellarnav > ul > li > a, .stellarnav > ul > li.has-sub > a {display: flex;flex-direction: row;align-items: baseline;gap: 15px;padding: 0;}
.stellarnav.desktop li.has-sub > a.dd-toggle {display: none;}
.stellarnav > ul > li > a b {min-width: 90px;text-align: left;}
.stellarnav > ul > li > a b:nth-of-type(2) {font-size: 13px;}
}
@media screen and (max-width:768px) {
.nav-header {max-width: 150px;}
.stellarnav {position: fixed;width: 50%;height: 100%;top: 0;right: 0;display: flex;gap: 30px;flex-direction: column;align-items: flex-end;}
.stellarnav.mobile {display: flex;align-items: center;justify-content: center;width: fit-content;left: auto;right: 30px;}
.stellarnav .menu-toggle {top: 0;right: 8px;}
.stellarnav.mobile.left > ul {left: auto;right: 0;display: flex !important;opacity: 0;width: 100%;max-width: 100%;height: 100%;
    -webkit-transform: translateX(100%);transform: translateX(100%);visibility: visible;transition: opacity 1s, transform 1s;flex-direction: column;
    align-items: center;justify-content: center;background: #000000f2;gap: 30px;z-index: 0;}
.stellarnav.mobile.active.left > ul {opacity: 1;-webkit-transform: translateX(0%);transform: translateX(0%);transition: opacity 1s, transform 1s;}
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu {display: none;}
.stellarnav.mobile.active .menu-toggle span.bars span:nth-of-type(1) {transform: rotate(20deg) translate3d(10px, 5px, 0px);}
.stellarnav.mobile.active .menu-toggle span.bars span:nth-of-type(2) {opacity: 0;transition: opacity 1s ease;}
.stellarnav.mobile.active .menu-toggle span.bars span:nth-of-type(3) {transform: rotate(-20deg) translate3d(10px, -5px, 0px);}
.stellarnav.mobile > ul > li, .stellarnav.mobile > ul > li > a {display: flex;flex-wrap: wrap;justify-content: center;border-bottom: unset;padding: 0;}
.stellarnav > ul > li > a b {min-width: 100px;}
.stellarnav ul > li > ul > li {display: flex !important;border: unset;}
.stellarnav.mobile > ul > li > ul {display: flex !important;width: 100%;max-width: 205px;background: unset;flex-direction: column;
    gap: 10px;margin: 10px 0;padding-left: 20px;margin-left: 10px;border-left: 1px solid #ccc;}
.stellarnav.mobile > ul > li > ul > li > a {width: 100%;padding: 0;border: unset;font-size: 13px;letter-spacing: 0.15em;height: auto;color: #999;}
.stellarnav.mobile > ul > li > a.dd-toggle {display: none;}
}
@media screen and (max-width:600px) {
.nav-header, .header_area.sticky .nav-header {max-width: 120px;z-index: 9999;}
.header_area:before {height: 50px;top: -50px;}
.stellarnav.mobile {top: -2px;}
.stellarnav .menu-toggle span.bars span {width: 25px;height: 1px;}
.stellarnav.mobile.active .menu-toggle span.bars span:nth-of-type(1) {transform: rotate(20deg) translate3d(10px, 3px, 0px);}
.stellarnav.mobile > ul > li, .stellarnav.mobile > ul > li > a {font-size: 15px;gap: 0;}
.stellarnav > ul > li > a b:nth-of-type(2) {font-size: 12px;}
.stellarnav.mobile > ul > li > ul {max-width: 190px;}
}
@media screen and (max-width:450px) {
.nav-header, .header_area.sticky .nav-header {max-width: 100px;}
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*FOOTER*/
.footer {padding: 0;background-color: #000;font-size: 16px;}
.footer .center {width: 100%;max-width: 90%;}
.footer_info {display: flex; padding-right: 0;flex-direction: column-reverse;gap: 15px;}
.footer_info .footer_info {grid-template-columns: unset;align-items: end; grid-gap: 0;}
.footer_info ul {display: flex;width: 100%;order: 2;justify-content: space-between;align-items: flex-start;padding-top: 50px;}
.footer_info .footer_info ul {padding-top: 0;}
.footer_info li:nth-child(1) {display: flex;align-items: flex-start;padding: 0;
    justify-content: flex-start;gap: 15px 0;flex-direction: column;}
.footer_info li p {line-height: 1;letter-spacing: 0.15em;color: #ffffff;font-size: 13px;}
.footer_info li p a {color: #fff;}

/*FOOTER_MENU*/
.footer_info li:nth-child(2) {padding: 0;}
.footer_menu {display: flex;flex-wrap: wrap;justify-content: flex-end;width: 100%;}
.footer_menu a {text-align: right;padding: 0 0 0px 20px;font-size: 13px;letter-spacing: 0.08em;
    color: #999;background: unset;border: 0;margin: 0;transition: 0.3s ease;}
.footer_menu a:first-of-type {display: none;}
.footer_menu a:hover {background: unset;color: #ccc;transition: 0.3s ease;}

/*FOOTER_ICON*/
.box_link {display: none;}
/*LOGO*/
.footer_logo {display: none;}
/*COPY*/
.copy {max-width: 90%;width: 100%;margin: auto;text-align: right;padding: 15px 0 60px 0;font-size: 13px;color: #2a2b2b;border-top: 0;margin-top: 0;}
.copy a {color: #2a2b2b;}
/*top*/
#to_top {bottom: 150px;left: auto;right: 10px;background: #222;color: #ffffff;font-weight:400;border-radius: 5px;
    box-shadow: unset;font-size: 13px;padding-top: 10px;letter-spacing: 0.08em;}
#to_top i.top {height: 12px;}
#to_top i.top:before, #to_top i.top:after {width: 2px;height: 10px;background: #ffffff;}

@media screen and (max-width: 1024px) {
.footer {padding: 30px 0 0;font-size: 15px;}
.footer_logo {max-width: 100px;}
.box_link a {width: 35px;height: 35px;font-size: 18px;}
.box_link a:hover {font-size: 16px;}
a.me_tp_ig {font-size: 23px;}
.box_link a.me_tp_ig:hover {font-size: 18px;}
.footer_menu a {font-size: 14px;}
}
@media screen and (max-width: 960px) {
.footer_info li:nth-child(2) {position: absolute;bottom: 0px;}
.footer_menu a {padding: 0 20px 0 0;}
.footer_info .footer_info {padding-bottom: 50px;}
.copy {padding: 60px 0;text-align: left;}
}
@media screen and (max-width: 768px) {
.footer_info {padding: 0;}
.footer_info .footer_info {padding-bottom: 80px;}
.footer_menu {justify-content: flex-start;gap: 10px 0;}
#bottom_menu {display: none;}
}
@media screen and (max-width: 600px) {
.footer {background-attachment: unset;}
.footer_info .footer_info {padding-bottom: 70px;}
#to_top {right: 0px;bottom: 50px;font-size: 10px;width: 35px;height: 40px;border-radius: 5px 0 0 5px;}
#to_top i.top:before, #to_top i.top:after {height: 7px;}
}
@media screen and (max-width: 450px) {
.footer_info ul {padding-top: 30px;}
.footer_info li p {font-size: 12px;}
.footer_menu a {font-size: 12px;}
.copy {padding: 70px 0 35px;}
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
.album_class_page .path p {padding-bottom: 50px;}
.album_class_page .path p, .album_class_page .path p a {
    display: flex;
    justify-content: flex-end;
    letter-spacing: 0.15em;
    line-height: 1;
    padding-bottom: 30px;
    font-size: 14px;
    color: #999;}
.path p a:hover {color: #fff;}

/*相簿*/
.show-list {display: grid;grid-template-columns: 1fr;grid-gap: 50px;}
.show-list .item a {display: grid;grid-template-columns: 1fr 200px;gap: 150px;align-items: center;}

/*交錯*/
.show-list .item:nth-child(even) a {grid-template-columns: 200px 1fr;}
.show-list .item:nth-child(even) a h2 {order: 1;text-align: right;}
.show-list .item:nth-child(even) a figure.show_pic {order: 2;}

/*全部*/
.show-list .show_pic {aspect-ratio: 5 / 2;}
.show-list .show_name {font-size: 16px;font-weight: normal;color: #ffffff;
    margin-top: 0;height: 25px;text-align: left;transition: all 1s ease-in-out;}
.show-list .item:hover .show_name {color: #999;}
.overlay {width: 0;-webkit-transform: unset;transform: unset;transition: all 1s ease-in-out;}
.show-list .item:hover .overlay {width: 100%;-webkit-transform: unset;transform: unset;}

/*主分類*/
.subalbum-menu h2 {display: none;}
.subalbum-menu {margin: 0;padding: 0;}
.show-list .item {background: unset;}
.other_subalbum li a p {text-align: center;color: #ffffff;font-size: 16px;font-weight: normal;
    margin-top: 0;height: 25px;letter-spacing: 0.15em;transition: all 1s ease-in-out;}
.other_subalbum li:hover a p {color: #999;}
.album_fixed_title {display: none;}
.other_album_choice {margin: 0 auto;}
.other_album_choice li {background: unset;border: 1px solid #666;line-height: 1;letter-spacing: 0.1em;
    border-radius: 0;padding: 15px 30px;margin: 0 5px 5px 0;}
.other_album_choice li:hover {background: #666;}
.other_album_choice li a i.fa-solid.fa-right-from-bracket {display: none;}

/*圖片們*/
.pic-list {display: block;column-count: auto;column-width: 400px;column-gap: 15px;break-inside: avoid;}
.pic-list .item {padding: 0 0 15px;}
.pic-list .show_pic {aspect-ratio: inherit;}
.pic-list .item h6 {display: none;}
.pic-list .item figure.show_pic img {transform: scale(1);transition: 1s ease-in-out;}
.pic-list .item:hover figure.show_pic img {transform: scale(1.5);transition: 1s ease-in-out;}

@media screen and (max-width:1024px) {
.show-list .item a {grid-template-columns: 1fr 150px;gap: 75px;}
.show-list .item:nth-child(even) a {grid-template-columns: 150px 1fr;}
.other_album_choice li a {font-size: 14px;}
}
@media screen and (max-width:768px) {
.show-list {grid-gap: 30px;}
.show-list .item a {grid-template-columns: 1fr 100px;gap: 50px;}
.show-list .item:nth-child(even) a {grid-template-columns: 100px 1fr;}
.show-list .show_name, .other_subalbum li a p  {font-size: 15px;}

.other_album_choice li {padding: 10px 20px;}
.other_album_choice li a {font-size: 13px;}
}
@media screen and (max-width:600px) {
.album_class_page .path p, .album_class_page .path p a {font-size: 13px;}
.show-list .item a {grid-template-columns: 1fr 80px;gap: 40px;}
.show-list .item:nth-child(even) a {grid-template-columns: 80px 1fr;}
.show-list .show_name, .other_subalbum li a p  {font-size: 14px;}
.other_album_choice li a {font-size: 12px;}
}
@media screen and (max-width:450px) {
.album_class_page .path p, .album_class_page .path p a {font-size: 10px;height: 14px;}
.show-list {grid-gap: 20px;}
.show-list .show_name, .other_subalbum li a p  {font-size: 12px;text-align: center;}
.show-list .item a {gap: 10px;}
.show-list .item:nth-child(even) a h2 {text-align: center;}
/*
.show-list .item a, .show-list .item:nth-child(even) a {grid-template-columns: 1fr;gap: 10px;}
.show-list .item:nth-child(even) a figure.show_pic {order: 0;}
.show-list .item:nth-child(even) a h2 {order: 2;text-align: center;}*/
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*首頁文章*/

/*文章設定*/
.article_a .blog_box {display: flex;justify-content: space-between;flex-wrap: wrap;}
.article_a .blog_le {width: 20%;padding: 0;}
.article_a .blog_ri{width: 75%;padding: 0;}
.article_a h5.blog_le_t {font-size: 18px;font-weight: 400;color: #ffffff;font-family: 'Outfit', 'sans-serif';letter-spacing: 0.15em;margin-bottom: 10px;}
h5.blog_le_t em {display: none;}
.article_a .blog_search input[type=search] {font-size: 14px;color: #000000;background: #f5f5f5;border: unset;border-radius: 0;letter-spacing: 0.08em;padding: 12px 35px 10px 10px;}
.article_a .blog_le .accordion {border-radius: 0;border: unset;}
.article_a .blog_le .accordion > li:hover, .blog_le .accordion > li.on_this_category {background: #111 !important;}
.article_a .accordion li .link a {color: #ffffff;font-size: 15px;letter-spacing: 0.15em;font-weight: normal;}
.accordion li+li .link {border-top: 1px solid #333;}
.submenu li.on_this_category a, .submenu a:hover {background: #fff;color: #999;}
.submenu {background: #f5f5f5;}
.submenu a {padding: 15px 15px 15px 40px;letter-spacing: 0.08em;}
.submenu a i {left: 10px;font-size: 13px;}
.blog_le .accordion li .link i {font-size: 12px;color: #999;}

.blog_page.article_a .blog_subbox {grid-template-columns: repeat(2, 1fr);}
.blog_page.article_a .subbox_item a {grid-template-columns: unset;grid-template-rows: 1fr 120px;align-items: start;}
.blog_page.article_a .subbox_item a:before {color: #ffffff;letter-spacing: 0.15em;font-weight: lighter;transform: translate(-50%, -50%);bottom: auto;top: 50%;left: 50%;right: auto;}
.blog_page.article_a .subbox_item a:after {border: unset;background: rgb(0 0 0 / 90%);}
.blog_page.article_a .blog_list_ri {padding: 10px 0;}
.blog_page.article_a .blog_list_ri>*+* {margin-top: 0;}
.blog_page.article_a .blog_list_ri h5 {color: #fff;font-weight: 400;font-size: 18px;letter-spacing: 0.08em;-webkit-line-clamp: 2;}
.blog_page.article_a .blog_list_ri em {position: absolute;left: 5px;top: 5px;letter-spacing: 0.08em;color: #ffffff;padding: 5px 10px;background: #222;}
.blog_page.article_a .blog_list_ri p {font-size: 14px;color: #999;padding: 15px 0 0;letter-spacing: 0.08em;
    line-height: 1.8;-webkit-line-clamp: 2;word-break: break-word;}

h4.blog_category_title {color: #ffffff;font-size: 22px;font-weight: normal;padding: 0;letter-spacing: 0.08em;}
.blog_shareData {padding: 10px;background: #111;}
.toShareNews {align-items: flex-end;}
.toShareNews b {font-size: 14px;line-height: 1;}
.blog_box_edit, .blog_box_edit * a {color: #fff;}
.blog_box_edit * {line-height: 200%;letter-spacing: 0.08em;font-weight: normal;word-break: break-word;}
.blog_box_edit .news_tags a {color: #999;}

.blog_back {width: 100%;padding-top: 50px;}
.blog_back a {font-size: 14px;padding: 15px;letter-spacing: 0.2em;font-weight: bold;transition: 0.6s ease;}
.blog_back a:hover {background: #ffffff !important;color: #000000 !important;}
.blog_back a.article_btn_next, .blog_back a.article_btn_prev {background: #222;color: #ffffff;font-weight: 400;}
.blog_back a.article_btn_back {background: #111;color: #ffffff;font-weight: 400;}

.news_related {background: #111;padding: 50px 0;}
.news_related h6 {max-width: 1500px;width: 90%;margin: 0 auto 30px;text-align: left;}
.news_related h6 span:before {font-size: 18px;color: #ffffff;font-weight: normal;letter-spacing: 0.15em;}
.news_related_list {width: 90%;grid-template-columns: repeat(4, 1fr);max-width: 1130px;grid-gap: 30px;}
.news_related_list li {display: block;padding: 15px;background: #fff;transition: 0.6s ease;}
.news_related_list li:hover a {opacity: 0.5;transition: 0.6s ease;}
.news_related_list li a {display: grid;grid-template-columns: 1fr;grid-template-rows: 1fr 35px;gap: 20px;padding: 0;
    background: unset;align-items: start;justify-items: center;transition: 0.6s ease;}
.news_related_list li a p {font-size: 14px;letter-spacing: 0.1em;color: #fff;text-align: left;line-height: 1.5;padding-right: 10px;}
.news_related_b_box {max-width: 1500px;;width: 90%;margin: auto;}
.lastPage {display: flex;align-items: center;justify-content: flex-end;font-size: 15px;color: #fff;background: unset;
    letter-spacing: 0.2em;margin: 50px 0 0 auto;width: fit-content;transition: 0.6s ease;}
.lastPage:hover {color: #222;}

@media screen and (max-width:1024px) {
.article_a .blog_le {width: 25%;}
.article_a h5.blog_le_t {font-size: 17px;}
.article_a .blog_ri {width: 73%;}
.article_a .accordion li .link a {font-size: 14px;}
.blog_page.article_a .blog_subbox {grid-gap: 15px;}
.subbox_item a:before {font-size: 14px;}
.blog_page.article_a .blog_list_ri h5 {font-size: 17px;}
.blog_list_ri em {font-size: 13px;}
.blog_list_ri p {font-size: 12px;}

h4.blog_category_title {font-size: 20px;margin-bottom: 10px;}
.toShareNews b {font-size: 13px;}
.news_related_list li {padding: 10px;}
}
@media screen and (max-width: 960px) {
.subbox_item {border-bottom: unset;}
}
@media screen and (max-width:768px) {
.article_a h5.blog_le_t {font-size: 17px;}
.article_a .blog_box {flex-direction: column;align-items: center;}
.article_a .blog_le {width: 100%;}
.article_a .blog_ri {width: 100%;}
.subbox_item a:before {font-size: 13px;}
.blog_page.article_a .blog_list_ri {padding: 0;}
.blog_page.article_a .blog_list_ri h5 {font-size: 16px;}
.blog_list_ri em {font-size: 12px;}
.blog_page.article_a .blog_list_ri p {font-size: 13px;}

h4.blog_category_title {font-size: 18px;}
.blog_box_edit * {font-size: 15px;}
.blog_back a {font-size: 13px;}
.news_related_list {grid-template-columns: repeat(2, 1fr);}
.news_related h6 span:before {font-size: 17px;}
.lastPage {font-size: 14px;}
}
@media screen and (max-width:600px) {
.article_a h5.blog_le_t {font-size: 16px;}
.blog_page.article_a .subbox_item a {grid-gap: 20px;}
.subbox_item a:before {font-size: 12px;}
.blog_page.article_a .blog_list_ri h5 {font-size: 15px;}
.blog_list_ri em {font-size: 10px;}
.blog_page.article_a .blog_list_ri p {font-size: 12px;}

h4.blog_category_title {font-size: 17px;}
.toShareNews b {font-size: 12px;}
.blog_box_edit * {font-size: 14px;}
.blog_back a {font-size: 12px;}
.news_related h6 span:before {font-size: 16px;}
.lastPage {font-size: 13px;}
}
@media screen and (max-width:500px) {
.blog_page.article_a .blog_subbox {grid-template-columns: repeat(1, 1fr);}

h4.blog_category_title {font-size: 16px;}
.toShareNews b {font-size: 11px;}
.blog_box_edit * {font-size: 13px;}
.blog_back a {font-size: 11px;}
.news_related {padding: 30px 0;}
.news_related_list {grid-template-columns: repeat(1, 1fr);}
.news_related h6 {text-align: center;}
.news_related h6 span:before {font-size: 15px;}
.lastPage {font-size: 12px;margin: 50px auto 0;}
}
@media screen and (max-width:400px) {
.blog_page.article_a .subbox_item a {grid-template-rows: 1fr 100px;}
.blog_page.article_a .blog_list_ri p {padding: 10px 0 0;}

h4.blog_category_title {font-size: 15px;}
.toShareNews b {font-size: 10px;}
.blog_box_edit * {font-size: 12px;}
.blog_back a {font-size: 10px;}
.news_related {padding: 20px 0;}
.news_related_list {grid-template-columns: repeat(1, 1fr);}
.news_related h6 span:before {font-size: 14px;}
.lastPage {font-size: 11px;}
}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*聯絡我們*/
.contact_page .main_part {max-width: 100%;}
.contact_content {padding: 0;}
.contact_content form {display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;gap: 150px;}

/*資訊+設計*/
.contact_content .information_left, .contact_content .information_left .blank_letter, .contact_content .information_left .list_before {display: none;}
.contact_editbox {padding: 0;}
/*表單*/
.contact_content .information_right {width: 90%;max-width: 1200px;margin: auto;padding-left: 0;padding: 0 0 150px;}
.contact_content .information_right .blank_letter {display: flex;align-items: flex-end;font-family: 'Noto Sans TC';padding-top: 0;
    font-size: 0;color: #ffffff;font-weight: normal;letter-spacing: 0.15em;}
.note {margin-left: auto;font-size: 12px;letter-spacing: 0.08em;}

.contact_form {margin-top: 50px;margin-bottom: 0;font-size: 15px;color: #ffffff;grid-gap: 30px;letter-spacing: 0.1em;}
.contact_form li {grid-template-columns: 150px 1fr;}
.contact_form li+li {padding-top: 30px;border-top: 1px solid #222;}
.contact_form li .form__label {display: flex;max-width: 100%;text-align: left;justify-content: flex-end;
    flex-direction: row-reverse;align-items: baseline;}
.contact_form li input.noborder, .contact_form li textarea.noborder {border: unset;color: #000;letter-spacing: 0.1em;padding: 5px 10px;}
.star {padding: 0px;margin-left: 10px;}
.red {color: #ff8e4b;}
.contact_form li.last {padding-top: 100px;margin-top: 0;justify-content: center;gap: 50px;}
.contact_form li.last blockquote, .contact_form li.last cite {padding: 10px;border: 1px #666 solid;width: 150px;height: 150px;
    max-width: 100%;display: flex;justify-content: center;align-items: center;border-radius: 100%;}
.contact_form li.last blockquote {color: #ffffff;font-weight: normal;letter-spacing: 0.15em;}
.contact_form li.last cite {background: #ffffff;color: #000000;}
.contact_form li.last blockquote:hover input, .contact_form li.last cite:hover input {letter-spacing: 0.15em;}
.contact_form li.last blockquote:hover, .contact_form li.last cite:hover {opacity: 0.5;}

.contact_form li:has(input[type=checkbox]) .form__insert, .contact_form li:has(input[type=radio]) .form__insert {
        grid-template-columns: repeat(auto-fit, minmax(15px, 15px) minmax(185px, 1fr));}

@media screen and (max-width:768px) {
.contact_form li.last blockquote, .contact_form li.last cite {width: 125px;height: 125px;}
}
@media screen and (max-width:600px) {
.contact_form li {grid-template-columns: 120px 1fr;}
.contact_form li .form__label {font-weight: normal;padding: 0;background: unset;}
.contact_form {font-size: 14px;}
.contact_form li:has(input[type=checkbox]) .form__insert, .contact_form li:has(input[type=radio]) .form__insert {
    grid-template-columns: repeat(auto-fit, minmax(15px, 15px) minmax(150px, 1fr));    grid-gap: 8px;}
}
@media screen and (max-width:450px) {
.contact_form li {grid-template-columns: 1fr; padding: 0 10px;grid-gap: 20px;}
.contact_form li.last {gap: 30px;}
.contact_form li.last blockquote, .contact_form li.last cite {width: 100px;height: 100px;}
}