@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+JP:wght@300&family=Noto+Serif+TC:wght@200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Shippori+Mincho&family=Zen+Kaku+Gothic+New&display=swap');
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {}

::-webkit-scrollbar-thumb {
    background-color: #c6a467;
}

::selection {
    color: #c6a467;
    background: #343434;
}

#content {
    position: relative;
}

body {
    overflow-x: hidden;
    font-weight: 400;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

.header_area {  background: #f0f0f000;  position: fixed;  padding: 0px;}
.header_area.sticky { background: rgb(255 255 255); border-bottom: 3px solid #ffe2b5; }
/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n) 



/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */
/*大圖/＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*預設解除背景輪播*/
#content_main {
    margin: 0;
}

.swiper-banner {
    position: static;
    margin: 0;
    height: auto;
}

.bannerindex {
    padding: 0;
    margin: 0;
    height: 50vw;
    position: relative;
}

.swiper-slide img {
    width: 100%;
    display: block;
    max-width: 100%;
    min-width: 100%;
    height: 50vw;
    /*max-height:100vh;*/
    object-position: center;
    object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    -webkit-object-fit: cover;
    margin: 0;
    transition: all 0.3s;
}



.pageIndex .swiper-slide:nth-child(1):after {
    background: url(https://pic03.eapple.com.tw/greattime-art/word1.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 20%;
    right: 8%;
    width: 281px;
    height: 400px;
    background-position: right;
    padding-bottom: calc(40% / 1* 1);
}
.pageIndex .swiper-slide:nth-child(2):after {
    background: url(https://pic03.eapple.com.tw/greattime-art/word2.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 20%;
    left: 12%;
    width: 298px;
    height: 400px;
    background-position: left;
    padding-bottom: calc(40% / 1* 1);
}
.pageIndex .swiper-slide:after {
    content: "";
    position: absolute;
    z-index: 999;
    pointer-events: none;
}


.pageIndex .swiper-slide.swiper-slide-active:after {
    animation: upup 3s both;
}

.promotion_title {
    display: none;
}


@keyframes upup {
    0% {
        transform: translateX(5vw);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@media screen and (max-width: 1300px) {
.pageIndex .swiper-slide:nth-child(1):after {  right: 5%; }
.pageIndex .swiper-slide:nth-child(2):after {  left: 8%; }
}
@media screen and (max-width: 1024px) {
.header_area {  position: relative; }
.pageIndex .swiper-slide:nth-child(1):after {  background: url(https://pic03.eapple.com.tw/greattime-art/word3.png); width: 211px;  height: 300px; top: 30%; background-repeat: no-repeat; }
.pageIndex .swiper-slide:nth-child(2):after {  background: url(https://pic03.eapple.com.tw/greattime-art/word4.png); width: 224px;  height: 300px; top: 30%; background-repeat: no-repeat; }
}
@media screen and (max-width: 768px) {
    .bannerindex {
        padding: 0;
        margin: 0;
    }
}
@media screen and (max-width: 500px) {

.pageIndex .swiper-slide:nth-child(1):after {  background: url(https://pic03.eapple.com.tw/greattime-art/word5.png); top: 13%; left:65%; width: 148px;  height: 165px; background-repeat: no-repeat;}
.pageIndex .swiper-slide:nth-child(2):after {  background: url(https://pic03.eapple.com.tw/greattime-art/word6.png); top: 13%; left:5%; width: 164px;  height: 165px;  background-repeat: no-repeat; }
}

/*主選單*/

body:not(.pageIndex) .header_area {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

.product_info_page #content,
.product_page #content {
    margin-top: 0px;
}

.main_header_area {
    background: #ffffff00;
}

.main_header_area .container {
    max-width: 1500px;
    padding: 0 2%;
    transition: all ease .4s;
}

.header_area.sticky .main_header_area .container {
    max-width: 1400px;
}

.header_area.sticky .nav-brand img {
        max-width: 35%;
}
.stellarnav>ul {
    font-family: "Noto Sans TC", serif;
}

.stellarnav>ul>li {
    position: relative;
}

.stellarnav>ul>li:not(:last-of-type):after {
    position: absolute;
    font-family: "FontAwesome";
    content: "∣";
    font-size: 17px;
    color: #555;
    top: 50%;
    right: -6px;
    transform: translate(0, -50%);
}

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

.stellarnav>ul>li>a {
    padding-top: 20px; 
    color: #555;
    display: block;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 400;
    line-height: 104px;
    height: 104px;
    margin: 0 24px;
    transition: all 0.3s;
	font-family: "Noto Serif JP", serif;
}
.stellarnav > ul > li > a b {
	line-height: 50px;
    height: 22px;
}
.stellarnav > ul > li > a b:nth-child(2) {
	 color: #99948a; 
	 font-size: 13px;
}
.stellarnav > ul > li > a:hover b {
    -webkit-transform: none;
}
.stellarnav>ul>li>a:hover,
.stellarnav li.has-sub:hover>a {
    color: #c49c53;
}

.nav-header {
    top: 17px;
    transition: all ease .4s;
}

.header_area.sticky .nav-header {
    top: 17px;
}

.nav-brand {
    width: 330px;
    display: block;
    transition: all ease .4s;
}

.header_area.sticky .nav-brand {
    width: 260px;
}

.nav-brand img {
    display: block;
    max-width: 40%;
	padding: 0 2%;
    transition: all ease .8s;
    margin: 0 auto;
}

.me_tp_features {
    display: none;
}

/*次分類*/
.stellarnav>ul>li.drop-left>ul {
    right: auto;
    left: 0;
}

.stellarnav li.drop-left ul ul {
    right: auto;
    left: 100%;
}

.stellarnav li li a,
.stellarnav li li.has-sub>a,
.stellarnav.mobile li li.has-sub a {
    padding: 8px 16px;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    transition: all 0.3s;
}

.stellarnav ul ul {
    border: 0 solid transparent;
    width: 180px;
	font-family: "Noto Serif JP", serif;
}

.stellarnav ul ul ul {
    left: 180px;
}
.stellarnav li li {
    border: none !important;
}

/*
.stellarnav li li a:hover,
.stellarnav li li.has-sub>a:hover,
.stellarnav.mobile li li.has-sub a:hover {
    color: #c49c53;
}*/

.stellarnav>ul>li>ul>li>a,
.stellarnav li li.has-sub>a {
    background: #fff;
    transition: all .2s;
}

.stellarnav>ul>li>ul>li>a:hover,
.stellarnav>ul>li>ul>li>ul>li>a:hover,
.stellarnav>ul>li:hover>ul>li:hover>a {
    background: #fff7eb;
}

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

    .nav-header {
        padding: 12px 0;
    }

    .nav-brand {
        margin: 0 auto;
        width: 240px;
    }

    .header_area.sticky .nav-brand {
        width: 200px;
    }

    .stellarnav>ul>li>a,
    .header_area.sticky .stellarnav>ul>li>a {
        line-height: 50px;
        height: 75px;
	    padding-top: 0px;
    }
	.stellarnav>ul>li:not(:last-of-type):after {
    top: 40%; }

    .main_header_area .container {
        padding: 0;
    }
body:not(.pageIndex) .header_area {  position: relative; }
.gt_contentbox { padding: 40px 20px; }
}

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


    /*---*/
    .stellarnav .menu-toggle {
        padding: 17px 10px;
    }

    .stellarnav>ul>li:not(:last-of-type):after {
        content: none;
    }

    .stellarnav>ul>li>a,
    .header_area.sticky .stellarnav>ul>li>a {
        height: auto;
        line-height: 150%;
    }

    .stellarnav>ul>li>a {
        margin: 0 8px;
    }

    .stellarnav.mobile>ul {
        border-top: none;
    }

    .stellarnav.mobile li.open {
        background: #F8F5F1;
    }

    .stellarnav.mobile.right .close-menu,
    .stellarnav.mobile.left .close-menu {
        background: #efc380;
        color: #fff;
    }

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

    .stellarnav.mobile>ul>li>a.dd-toggle {
        padding: 8px;
    }

    .stellarnav.mobile>ul>li.open>a.dd-toggle {
        padding: 12px 8px;
        margin-right: 7px;
    }

    .stellarnav li.open li a.dd-toggle,
    .stellarnav li.open li.has-sub>a.dd-toggle,
    .stellarnav.mobile li.open li.has-sub a.dd-toggle {
        padding: 6px 8px;
        max-height: 32px;
        margin-right: 3px;
    }

    .stellarnav li.open li.open a.dd-toggle,
    .stellarnav li.open li.has-sub.open>a.dd-toggle,
    .stellarnav.mobile li.open li.has-sub.open a.dd-toggle {
        margin-top: 4px;
    }

    .stellarnav>ul>li>a, .header_area.sticky .stellarnav>ul>li>a {
        padding-top: 12px;
    }
}


/* footer=== */
.footer {
    padding: 50px 0 20px;
}

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

.footer_logo {
    width: 80px;
    margin: 0 auto;
}

.footer_logo img {
    width: 100%;
}

.footer_info {
    padding: 0;
}

.footer_info ul {
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    width: 100%;
	align-items: center;
}

.footer_info li {
    padding: 10px 0;
}

.footer_info li:nth-child(1) {
    width: 30%;
}

.footer_info li:nth-child(2) {
    width: 68%;
    text-align: left;
}

.footer_menu {
    max-width: 330px;
    margin: 0 0 0 auto;
}

.footer_menu a {
    background: transparent;
    color: #888;
    border: none;
    letter-spacing: 1px;
	padding: 10px 7px;
}

.footer_menu a:first-child {
    display: none;
}

.copy a {
    color: #444;
    font-weight: 200;
}

.box_link {
    top: 100%;
    width: 100%;
    text-align: right;
    padding: 0 3%;
}

.box_link a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: none;
    background: #111;
    padding: 0px;
    border-radius: 30px;
}

.box_link a i {
    max-width: 100%;
    font-size: 18px;
    line-height: 30px;
    display: block;
}

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

.copy a:hover {
    color: #aaa;
}
@media screen and (max-width: 1024px) {
.footer { text-align: center; }
.footer_info {  display: block; }
.footer_info ul {  display: block; }
.footer_info li:nth-child(1) { width: auto; }
.footer_info li:nth-child(2) { width: auto; text-align: center; }
.footer_menu {  max-width: none; }
}
@media screen and (max-width: 768px) {
    .footer {
        padding: 30px 0;
    }

    .footer_logo {
        margin-bottom: 0;
    }

    .footer_info ul {
        flex-wrap: wrap;
    }

    .footer_info li:nth-child(1) {
        width: 100%;
    }

    .footer_info li:nth-child(2) {
        width: 100%;
        text-align: center;
    }

    .footer_menu {
        margin: 0 auto;
    }

    .footer_menu a {
        font-size: 16px;
    }

    .box_link {
        position: relative;
        right: 0;
        top: 0;
        text-align: left;
        padding: 15px 0;
    }

    .copy {
        text-align: center;
        border-top: 1px solid #555;
        font-size: 12px;
    }
}

.box_link {
    display: none;
}

.footer_logo img {
    width: 200px;
}

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

.footer_menu a:hover {
    color: #c49c53;
    background: transparent;
    border-bottom: 1px #c49c53 solid;
}

.copy,
.copy a {
    color: #888;
}



.copy {
    font-size: 12px;
    max-width: 2000px;
    text-align: center;
    margin: 50px auto 0;
    border-top: none;
}

.box_link a {
    background: #333;
}

.box_link a i {
    color: #aaa;
}

.footer_menu a {
    font-size: 14px;
    color: #888;
}

.info_fix_links {   display: block !important; }
.info_fix>span {   display: none; }
.info_fix_links a {  background: #d6ab61cf; }
.info_fix_links a:hover {  background: #a26d4c; }

/*預設解除背景輪播*/
#content_main {
    margin: 0;
}

.bannerindex {
    position: static;
    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;
    }
}


/*內頁BANNER 設定*/
.banner { height:400px;}
.banner h5 { display:none;}
.banner.banA { background-image: url(https://pic03.eapple.com.tw/greattime-art/banA.jpg); background-position: center; width: 100%; height: 20vw; background-size: cover; }
.banner.banB { background-image: url(https://pic03.eapple.com.tw/greattime-art/banB.jpg); background-position: center; width: 100%; height: 20vw; background-size: cover; }
.banner.banC { background-image: url(https://pic03.eapple.com.tw/greattime-art/banC.jpg); background-position: center; width: 100%; height: 20vw; }
.banner.banD { background-image: url(https://pic03.eapple.com.tw/greattime-art/banD.jpg); background-position: center; width: 100%; height: 20vw; background-size: cover; }
.banner.banE { display:none; }
.banner.banF { display:none; }
.banner.banblog { display:none; }
#content {    background: #f9f9f9; margin-bottom: -40px!important; }





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

    /* 開啟手機板下方按鈕所需設定 */
    #bottom_menu {
        display: block;
    }

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

    #to_top {
        bottom: 60px;
    }
}

@media screen and (max-width: 600px) {
.pageIndex .swiper-slide:nth-child(1) { background-image: url(https://pic03.eapple.com.tw/greattime-art/phone01.jpg); background-position: center; width: 100%; height: 135vw; background-size: cover;}
.pageIndex .swiper-slide:nth-child(2) { background-image: url(https://pic03.eapple.com.tw/greattime-art/phone02.jpg); background-position: center; width: 100%; height: 135vw; background-size: cover;}
.pageIndex .swiper-slide img {  display: none; }	
}


/*購物車修改*/
.product_info_page .main_part {  max-width: 1600px; }
.prod_related h6 span { display: none; }
.pd_tabTitle li, .pd_tabTitle { display: none; }
.path p a:hover { color: #caa74d; }
.products-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 0px;}
.products-list .more {  display: none; }
.products-list .name {  text-align: center; font-size: 17px; height: 50px; }
.prod_related {  background: #f9f9f9; }
.related_list li a {  background: #f9f9f9; }
.related_list li a p {  margin-top: 10px; }
.lastPage {  background: #c6a467; }
.prod_tabs { margin-top: 0px; }
.other_album { display: none; }
.sidebarBtn { display:none;}
.product_info li span { display: none; }
.product_info li .txt_box { color: #aba07d; }
.products-list .pic img { border-radius: 5%; width: 85%; }
.product_info_page .swiper-wrapper {  height: inherit; }
#prod_thumbSwiper .swiper-slide::before { display: none; }
.product_info_page .swiper-slide img { height: auto; }
#prod_thumbSwiper { width: 85px; height: 100%; overflow-y: overlay;}
.product_pic { overflow: hidden; padding-left: 90px;}
.proImgSwiper {   aspect-ratio: auto; }
.product_main {   width: 40%; }
.product-wrapper { display: flex; }
.pd_tabInner_contain {  padding: 0 50px; }
.product_info_page .edit { padding: 0px 45px;}
.product_info_page .show_content { padding: 5% 10% !important; }

@media screen and (max-width: 768px) {
.mobile_product_name { display: none;}
.product-wrapper { display: block;}
.product_pic { overflow: hidden; padding-left: 0px;}
.proImgSwiper { aspect-ratio:auto;}
.product_info_page .swiper-wrapper { height: 100%;}
.product_main {  width: 100%; }
#prod_thumbSwiper { width: 100%;}
#prod_thumbSwiper .swiper-slide::before { display: none; }
.product_info_page .swiper-slide img { height: auto; }
.pd_tabInner_contain {  padding: 30px; }
}

/*聯絡我們*/
.blank_letter,
.contact_content .information_left { display: none;}
.contact_content .information_right { width: 90%; padding-left: 0px; margin: 0 5%;}

.contact_form { grid-gap: 30px; font-size: 16px; }
.contact_form li { display: grid; grid-template-columns: 280px 1fr; }

.contact_form li .form__label { max-width: 100%; color: #876e48; text-align: left; letter-spacing: 1px; }
.contact_form li .form__insert { letter-spacing: 2px;}
.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(13px, 13px) minmax(150px, 1fr));  font-size: 15px;}

.contact_form li:has(input[type=radio]) .form__insert { display: block; }
input[type="radio"] { margin: 5px; }

.contact_form li.last { display: flex; justify-content: flex-start; }
.red { color: #ebbd72; }
.contact_form li:nth-child(8):before { position: absolute;  content: "請註明區域/飯店或地址/廳別，如台北君悅飯店3F凱悅廳";  color: #444;  font-size: 12px;
 margin-top: 30px; max-width: 185px; letter-spacing: 1px;  left: 15px;}


@media screen and (max-width: 600px) {
.contact_form {  grid-gap: 15px; }
.contact_form li { display: flex; flex-direction: column; grid-gap: 0px; } 
.contact_form li .form__label { background: rgb(241 241 241 / 0%);  color: #444; }
.contact_form li:nth-child(8):before { margin-top: 15px; max-width: 250px;left: 95px; font-size: 8px; }
.contact_form li:has(input[type=checkbox]) .form__insert, .contact_form li:has(input[type=radio]) .form__insert {  display: inline; }
input[type="checkbox"] { margin: 5px; }
.contact_form li.last {  display: inline-block; }
.contact_form li.last blockquote, .contact_form li.last cite {  display: inline-block; }
.pd_tabInner_contain { padding: 30px 0px; }
}

/*文章分享修改*/
.blog_subbox {  grid-gap: 20px; padding: 0px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
.subbox_item a {  display: block;  }
.subbox_item a:before,
.subbox_item a:after { display:none; }

.blog_list_le { overflow: hidden; height: 180px; }
.blog_list_ri { padding: 15px 0; }
.blog_list_ri em { display: none; }
.blog_list_ri h5 {  font-size: 24px; }

.other_promotion { display:none; } 
.news_related_list li figure {
    aspect-ratio: auto;
    height: auto;
    overflow: hidden;
    height: 155px;
}
.news_related_list li a { background: #f3f3f3; }
.news_related_list li a p { line-height: 25px;  letter-spacing: 1px;  margin-top: 10px;}


/*隱藏特定下拉按鈕*/
.stellarnav > ul > li:nth-child(3) ul li:nth-child(1) {  display: none !important;}
.stellarnav > ul > li:nth-child(9){  display: none !important;}
.stellarnav > ul > li:nth-child(10) {  display: none !important;}


/*相簿修改*/
.pic-list {grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));}
.pic-list .item { background: white;}
.pic-list .show_pic { display: flex;  justify-content: center;    align-items: center; aspect-ratio: auto; }
.pic-list .show_pic img { width: auto; height: auto; display: inline;}
.album_info_page .main_part { padding:0px; }

@media screen and (max-width: 600px) {
.pic-list {grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));}
}