@charset "utf-8";

/*●●●●●●●●●●●●●●●●●●●●●●●●   隱藏內容   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.box_link{display:none;}
.tp_links{display:none;}
.path p, .path p a { display: none;}

/*●●●●●●●●●●●●●●●●●●●●●●●●   大範圍設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
*{letter-spacing: .1rem;}
*{font-family: /*"Kosugi Maru", sans-serif;*/}
:root{
	/*顏色*/
	
	--ColorMain:#073957 /*LOGO藍*/;
	--ColorMain2:#daac66 /*LOGO金*/;
	
	--ColorSub:#d5c4ad /*米*/;
	--ColorSub2:#78503d/*咖*/;
	--ColorSub3:#626952/*綠*/;
	--ColorSub3:#F6F3EE/*灰*/;
	
	--textColor: #333333; /*文字*/
	
	/* 字型 */
	--ffmain: "微軟正黑體"; --ffsub:"Noto Sans TC", sans-serif;
}

#content_main, #content {
    background-color: #fff;
    background-image: radial-gradient(#ededed 2px, transparent 1px);
    background-size: 20px 20px;min-height: 45vh;
}
#content_main {margin-top: 40px;}
@media screen and (max-width: 1024px){}  
@media screen and (max-width: 768px) {}         
@media screen and (max-width: 450px) {}

/*●●●●●●●●●●●●●●●●●●●●●●●●   浮動按鈕   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.info_fix_links{ display:block !important;}/*保持展開*/
.info_fix>span { display: none;}/*隱藏展開鈕*/

.info_fix_links a {  border: 1px solid #ffffff66;}

.info_fix_links a, .info_fix_links a:nth-of-type(even) { opacity: 0.7;}
.info_fix_links a:hover , .info_fix_links a:nth-of-type(even):hover { opacity: 1;}


.info_fix_links a, .info_fix_links a:hover { background:#001e36;}
.info_fix_links a:nth-of-type(even), .info_fix_links a:nth-of-type(even):hover { background:var(--ColorMain2);}

/*●●●●●●●●●●●●●●●●●●●●●●●●   header   ●●●●●●●●●●●●●●●●●●●●●●●●*/

/**************************LOGO*************************************/
.nav-brand, .nav-brand img {}
.sticky .nav-brand, .sticky .nav-brand img {}


/**************************header底色*************************************/
.header_area.sticky {background: linear-gradient(180deg, #0d3a57, transparent);transition: all 1s ease;}
.header_area { position: fixed; background: transparent; padding: 0;top: 0;transition: all 1s ease;}

.nav-header { opacity: 0;transition: all 1s ease;filter: contrast(0) brightness(100);}
.sticky .nav-header { opacity: 1;transition: all 1s ease;filter: none;max-width: 150px;padding: 20px 0 0;}

.main_header_area .container { max-width: 95%;}
.navigation { align-items: center;}
	
/**************************第一層*************************************/	
.stellarnav > ul {  display: flex; gap: 10px; justify-content: flex-end;}
.stellarnav > ul > li {  padding: 0px 15px 5px; background: var(--ColorMain2); border-radius: 50px;}
.stellarnav > ul > li > a {    color: white;height: 30px;font-size: 14px;}

.stellarnav > ul > li:nth-of-type(even) { background: white;}
.stellarnav > ul > li:nth-of-type(even) > a {    color: var(--ColorMain);}

.sticky .stellarnav > ul > li:nth-of-type(even) { background: var(--ColorMain);}
.sticky .stellarnav > ul > li:nth-of-type(even) > a {    color: white;}

.stellarnav > ul > li > a b { font-weight: bold;}

.stellarnav li.has-sub > a:after{top: 70%;border-top: 6px solid #fff;}


/*次分類*/
.stellarnav > ul > li.drop-left > ul { width: 210px;top: 30px;right: -20px;border-radius: 15px;}
.stellarnav ul ul { background: #00000078; animation: navi 0.3s;}
.stellarnav ul ul li {border: none;}
.stellarnav ul ul li a { color: #fff;border-bottom: 1px solid #ffffff4f;}
.stellarnav ul ul li:last-of-type a { border-bottom: none;}

.stellarnav ul ul li:hover { background: #0000007d;}
.stellarnav ul ul li:first-of-type { border-radius: 15px 15px 0 0;}
.stellarnav ul ul li:last-of-type { border-radius: 0 0 15px 15px;}

@keyframes navi { 0% { opacity: 0; } 100% {opacity: 1;}}



@media screen and (max-width: 1024px) {
.navigation {  gap: 10px;}
.nav-brand, .nav-brand img { width: 0;transition: all .5s ease;}
.sticky .nav-brand, .sticky .nav-brand img { width: 120px;transition: all .5s ease;}
.stellarnav > ul{ justify-content: center;}
}

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

.sticky .nav-brand, .sticky .nav-brand img { width: 90px;}
/*menu*/
.stellarnav .menu-toggle {  padding: 33px 10px; }
.stellarnav .menu-toggle:after { color: white;}
.stellarnav .menu-toggle span.bars span { background: white;}

.sticky .stellarnav .menu-toggle:after { color: var(--ColorMain);}
.sticky .stellarnav .menu-toggle span.bars span { background: var(--ColorMain);}


/*close*/
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu { background: transparent;}
.stellarnav .icon-close { margin-right: 5px;}
.stellarnav .icon-close:before, .stellarnav .icon-close:after {  border-bottom: solid 3px var(--ColorMain2);}
.stellarnav.mobile.right .close-menu, .stellarnav.mobile.left .close-menu {  color: var(--ColorMain2);}

/*+*/
.stellarnav a.dd-toggle .icon-plus { display: inline-block;}
.stellarnav>ul>li>a.dd-toggle:before {content: "";}
.stellarnav.mobile > ul > li > a.dd-toggle { padding: 8px 0;}
.stellarnav a.dd-toggle .icon-plus:before, .stellarnav a.dd-toggle .icon-plus:after{border-bottom: solid 3px var(--ColorMain);}


/*底色*/
.stellarnav.mobile.right > ul, .stellarnav.mobile.left > ul,
.sticky .stellarnav.mobile.right > ul, .sticky .stellarnav.mobile.left > ul { background: #ffffffe6; backdrop-filter: saturate(93%) blur(3px);}
.stellarnav.mobile ul { background: transparent;}


.stellarnav.mobile li.open { padding: 0;  background: transparent;   padding-left: 16px;}
.stellarnav.mobile > ul > li {  margin: 10px;  background: transparent;        border-radius: 0;}
.stellarnav>ul>li>ul { left: 0;}
.sticky .stellarnav ul {  margin: 0;}


/*文字*/
.stellarnav>ul>li>a, .stellarnav>ul>li.has-sub>a:not(.dd-toggle),
.sticky .stellarnav>ul>li>a, .sticky .stellarnav>ul>li.has-sub>a:not(.dd-toggle) { text-shadow: none; color: var(--ColorMain2); font-weight: 800;padding: 10px 43px 10px 10px;}
.stellarnav>ul>li>ul, .sticky .stellarnav>ul>li>ul { bottom: auto; transform: none;}
.sticky .stellarnav > ul > li:nth-of-type(even) > a { color: var(--ColorMain);}
.sticky .stellarnav > ul > li:nth-of-type(even) { background: transparent;}


/*第二層*/
.stellarnav > ul > li.drop-left > ul { top: 0; right: 0;}
.stellarnav ul ul li{background: var(--ColorMain);width: 200px;}
.stellarnav > ul > li.drop-left > ul { padding-bottom: 20px;}

	
}
@media screen and (max-width: 425px) {
.sticky .nav-brand, .sticky .nav-brand img { width: 60px;}
.sticky .nav-header {  padding-top: 10px;}
.stellarnav .menu-toggle {   padding: 25px 10px; }
	
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   footer   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.footer {background: var(--ColorMain);padding: 0;}

.footer .center {max-width: 1000px;width: 80%;}

/*LOGO*/
.footer_logo{max-width: 100px;  margin: auto;}
/*聯絡資料*/
.footer_info {display: flex; flex-direction: column; grid-gap: 10px;padding: 20px 0 0;}
.footer_info ul{display: flex; flex-direction: column; align-items: center;}

.footer_info li {display: flex; flex-wrap: wrap; justify-content: center;text-align: center; gap: 0 15px;padding: 5px;}
.footer_info li:nth-child(1){}
.footer_info li:nth-child(2){}
.footer_info li+li { margin-top: 0;}

.footer_info li p, .footer_info li p a{ color:white; font-size: 13px; letter-spacing: 1px;}

.footer_info li p {display: flex;}
.footer_info li p:after { content: '●'; color: var(--ColorMain2); font-size: 10px; margin-right: 3px; order: 1;}
.footer_info li p:before {order: 2;}
.footer_info li p a{order: 3;}

.footer_info li p.add2:before { content: '營業時間：';}


/*按鈕*/
.footer_menu a{background: white; color: var(--textColor);font-size: 12px;padding: 6px 8px;position: relative;z-index: 0; margin: 5px 0;border-radius: 50px;}

.footer_menu a:first-child{display: none;}
.footer_menu a:before{content: "";width: 100%; height: 0; position: absolute; top: 0; left: 0; transition: all .5s; background: var(--ColorMain2);z-index: -1;border-radius: 50px;}
.footer_menu a:hover {background: transparent;}
.footer_menu a:hover:before{bottom: 0; top: auto; height: 100%;transition: all .5s;}

/*copy*/
.copy {padding: 8px 0 10px; margin-top: 5px;background: transparent; border-top: 1px #ffc774 dashed;}
.copy, .copy a{color: var(--ColorMain2);letter-spacing: 0;}
.privacyLinks a+a { border-left: 1px solid #ffffff42;}

/*#to_top*/
#to_top { border: 1px solid #ffffff33; background: #828282b5; box-shadow: none; border-radius: 0; color: #ffffff;bottom: 90px;}
#to_top i:before, #to_top i:after { background: #ffffff;}


@media screen and (max-width: 768px) {
	.footer { padding: 0;}
    #to_top { bottom: 66px; }
	.footer_info li {  /*justify-content: flex-start;*/}
	.footer_info li:nth-child(2) { text-align: left;}

	
    .footer_info li p a {  text-align: left;}
	.footer_menu a {}
	
/*#bottom_menu*/
#bottom_menu{display: none; background: var(--ColorMain2); box-shadow: none;}

#bottom_menu li { border-right: 1px solid #ffffff;}
#bottom_menu li a { padding: 11px 5px 2px;}
#bottom_menu li a i { color: white;}
#bottom_menu li a em {color: #333;}

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

.footer_info ul { align-items: flex-start;}
.footer_info li {flex-direction: column; justify-content: flex-start;}
.footer_info li p.add2:before { width: 71px;}



}

@media screen and (max-width: 464px) {
.footer_info li p.add2:before { width: 100px;}
.footer_info li p.add:before {  width: 46px;}

}

/**********************************************************************************************/
/*●●●●●●●●●●●●●●●●●●●●●●●●   大圖設定   ●●●●●●●●●●●●●●●●●●●●●●●●*/
/*○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○//*首頁大圖*/
.bannerindex { position:static; height:auto;}
.bannerindex .swiper-banner { position:static; /*margin:0; */height:auto; position: relative; overflow: hidden;} 
.bannerindex .swiper-slide img { height:auto;}

/*共用*/
.bannerindex:before, .bannerindex:after, .bannerindex .swiper-banner:before, .bannerindex .swiper-banner:after {
    content: "";
    width: 100%;
    height: 105%;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 50;
    /*mix-blend-mode: hard-light;*/
    pointer-events: none;
    background-size: contain;
    background-repeat: repeat-x;
}
.bannerindex:before {
    background-image: url(https://pic03.eapple.com.tw/utopia/cover.png);
    animation: anime_wave01 50s linear 0s infinite alternate;
}
.bannerindex:after {
    background-image: url(https://pic03.eapple.com.tw/utopia/BN0.png);
    animation: left_pop 20s ease;
}
.bannerindex .swiper-banner:before {
    background-image: url(https://pic03.eapple.com.tw/utopia/BN1.png);
    animation: fade_in 10s linear 0s infinite alternate;
}
.bannerindex .swiper-banner:after {
    background-image: url(https://pic03.eapple.com.tw/utopia/BN2.png);
    animation: left_in 20s linear 0s infinite alternate; z-index: 40;
}
@keyframes anime_wave01 { from { background-position: 0 0;} to { background-position: -2000px 0;}}

@keyframes left_pop {
 0% { transform: translateX(-10%); opacity: 0;}
 90% { opacity: 1;}
 100% { transform: translateX(0);}
}

@keyframes left_in {
 0% { transform: translateX(-10%); opacity: 0.5;  }
 10% { opacity: 1;}
 50% { transform: translateX(0);opacity: 1;     transform: rotateX(20deg);}
 90% { opacity: 1;}
 100% { transform: translateX(-10%); opacity: 0.5;}
}

@keyframes fade_in {
 0% {  opacity: 0.5;transform: rotate(0deg);}
 25% { opacity: 1;  transform: rotate(2deg);}
 50% { opacity: 1;  transform: rotate(0deg);}
 75% { opacity: 1;  transform: rotate(-2deg);}
 100% {opacity: 0.5;transform: rotate(0deg);}
}



/*○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○//*內頁大圖*/
.banner{background-image: url(https://pic03.eapple.com.tw/utopia/ban.jpg)!important; background-repeat: repeat;    background-position-y: top;
        padding: 5% 5% 0; height: 20vw; justify-content: flex-end;}
.banner h5 {color: var(--ColorMain2);letter-spacing: 6px;margin-top: 2vw;font-size: 22px;text-align: right;}
.banner h5:before{content: "UTOPIA"; font-weight: lighter; letter-spacing: 1px; display: block; font-size: 30px; color: #ffffff;}
/*
.banner.banF h5:before{content: "SHOP";}
.banner.banblog h5:before{content: "NEWS";}
.banner.banD h5:before{content: "PAYMENT";}
.banner.banC h5:before{content: "CONTACT";}*/

@media screen and (max-width: 1024px) {
.bannerindex {/* margin-top: -5%;*/}

}

@media screen and (max-width: 768px) {
.bannerindex { padding:0;}
}
@media screen and (max-width: 600px) {
.bannerindex::after { /* left: 40%;*/}
}

/*●●●●●●●●●●●●●●●●●●●●●●●●   查看更多按鈕   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.animated-arrow {border-radius: 20px;transition:.3s;position:relative;overflow:hidden;
    color: #fff; background: var(--ColorMain2);font-size: 14px;height: 40px; line-height: 40px; margin-top: 2%;}

.animated-arrow b, .animated-arrow i{position:relative; z-index:99;}
.animated-arrow b{ font-weight: normal;}
.animated-arrow::after { background: var(--ColorMain); content:"";position:absolute;width:0px;height:100%;top:0px;left:0px;transition:.5s;}
.animated-arrow:hover {	color: #fff;}
.animated-arrow:hover::after {	width:100%;}

/*●●●●●●●●●●●●●●●●●●●●●●●●   首頁顯示功能   ●●●●●●●●●●●●●●●●●●●●●●●●*/

/*英文*/
.module_i_news .title_i_box h4:before, .i_prod_tit span:before
{content: "PRODUCT";letter-spacing: 0;display: block;font-size: 30px;color: #d5d5d5;font-weight: 100;}
.i_prod_tit h2, .i_video_tit h2{display:none;}

/*中文*/
.module_i_news .title_i_box h4, .i_prod_tit span { font-size: 20px; font-weight: bold;}

/*底色*/
.module_i_news, .prod_part {  background: transparent;padding: 5% !important;}


/*●●●●●●●●●●●●●●●●●●●●●●●●   購物車功能   ●●●●●●●●●●●●●●●●●●●●●●●●*/

.products-list .pic {  border-radius: 100%;border: 10px solid #339de138;}
.products-list li:nth-of-type(even) .pic {  border-color: #6cd8d057;}
.products-list .name { text-align: center;}
.products-list .more { border: none; background: var(--ColorMain); color: white; border-radius: 10px;width: 100px !important;}
.products-list .item a:hover .more { background: #24a6a8;width: 150px !important;}


.product_menu_list>ul{    display: flex; justify-content: center;flex-wrap: wrap;gap: 5px;}
.product-layer-two li {  width: 150px; text-align: center;}
.products-list .price b { text-align: center !important;color: #d53e3e; letter-spacing: 0;}
.products-list .name {  line-height: 1;  -webkit-line-clamp: 1; height: auto;}

.product-layer-two li a { background: #ffffff;  color: #391911; border: 1px solid var(--ColorMain2); border-radius: 5px;}
.product-layer-two li.active a, .product-layer-two li:hover a { border: 1px solid var(--ColorMain2); background: var(--ColorMain); color: white;}
.sidebarBtn { border: 1px #ddd solid;}
.inquiry_a3 { background: var(--ColorMain2);}
.inquiry_a1:hover, .inquiry_a2:hover, .inquiry_a3:hover { background: var(--ColorMain);}

.product_info_page .edit { line-height: 220%;}

/*付款方式*/
.formbox_form.payment_form li{ margin-top: 0;}
	
@media screen and (max-width: 600px) {
.products-list, .pageIndex .products-list { grid-gap: 20px 10px;grid-template-columns: 1fr 1fr;}
.products-list .pic {  border-width: 8px;}
.products-list .more {  font-size: 13px;}
}
	
/*●●●●●●●●●●●●●●●●●●●●●●●●   匯款通知   ●●●●●●●●●●●●●●●●●●●●●●●●*/
.rewrite_simple { background: var(--ColorMain2) url(../images/simple_left.png) 10% center no-repeat;}
.send_simple {    background: var(--ColorMain) url(../images/simple_right.png) 88% center no-repeat;}

.total_amount { justify-content: flex-end;}
.total_amount .send_simple { margin-left: 10px;}

@media screen and (max-width: 768px) {
.total_amount { justify-content: center;}

}