@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:
	url("../images/bg_R.jpg")top center fixed;
	scroll-behavior: smooth;
}
.footer{
	max-width: 1920px;
	margin: 0 auto;
	/* background: #fff6a7; */
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse; overflow: hidden;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block;}
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }
.bg_1200{ width:1160px; min-width:1160px; margin:0 auto;}

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
	.for_m img {  width: 100%; }
	.bg_1200{ width:100%; min-width:100%; margin:0 auto;}
	.bg_0 .kv_m a {margin: 0 10px; padding: 5px 0;}	
}

/* ----------------------CUSTOMERIZATION---------------------- */

.font{font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;}

/*bg*/
.bg_1{ background:url("../images/bg_1.png") center center fixed;padding-top: 40px; padding-bottom: 40px;}
.bg_2{ padding-top: 40px; padding-bottom: 40px;background: url("../images/deco_bg.png")top center no-repeat fixed;}
.bg_3{ background:url("../images/bg_3.png") center center fixed; padding-top: 40px;}
.bg_4{ padding-top: 40px; padding-bottom: 40px;background: url("../images/deco_bg.png")top center no-repeat fixed;}
.bg_5{ background:url("../images/bg_1.png") center center fixed; padding-top: 40px; padding-bottom: 40px;}
.bg_6{ padding-top: 40px; padding-bottom: 40px;background: url("../images/deco_bg.png")top center no-repeat fixed;}
.bg_7{ background:url("../images/bg_3.png") center center fixed; top center repeat; padding-bottom: 40px;}
.bg_8{ padding-top: 40px; padding-bottom: 40px;background: url("../images/deco_bg.png")top center no-repeat fixed;}

.bg_5-1{ background: url("../images/bg_5-1.jpg") top center no-repeat; padding-top: 240px; padding-bottom: 20px;}
.bg_5-2{ background: url("../images/bg_5-2.jpg") top center no-repeat; padding-top: 15px; padding-bottom: 20px;}



@media screen and ( max-width: 991px ){
	.bg_1{ background: none; padding-top: 0px; padding-bottom: 0px; }
	.bg_2{ background: none; padding-top: 0px; padding-bottom: 2vw; }
	.bg_3{ background: none; padding-top: 0px; padding-bottom: 0px; }
	.bg_4{ background: none; padding-top: 0px; padding-bottom: 0px; }
	
	.bg_5{ background: none; padding-top: 0px; padding-bottom: 0px; }
	.bg_5-1{ background: none; padding-top: 0px; padding-bottom: 0px; }
	.bg_5-2{ background: none; padding-top: 0px; padding-bottom: 0px; }
	.bg_6{ background: none; margin:-10vw; }
	.bg_8{ background: none; margin:-20vw; }
	
}

/* .bg_0 .titleC h2, .bg_1 .titleC h2, .bg_2 .titleC h2, .bg_3 .titleC h2, .bg_4 .titleC h2, .bg_5 .titleC h2{ text-indent: -9999px;} */


.titleC {
    background: url("../images/btt.png") top center no-repeat;
    padding: 56px;
}

  .titleC h2, .titleD h2 {font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif; font-size: 3rem; color: #fff;}




@media screen and ( max-width: 991px ){
	.titleC {background: url("../images/btt_m.png") top center no-repeat; padding: 20vw 0 20vw 0;}
	.titleD h2 {font-size: 1.8rem;}
	.titleC h2 {font-size: 2.2rem;top: -5vw;}
}

/* 區塊調整 */
@media screen and ( max-width: 991px ){
	.bg_7 .titleC h2 {top: -2vw;}
}


/* 元件調整 */
.alternate ul:nth-child(odd) li:first-child, .alternate ul:nth-child(even) li:last-child {background: url("../images/bg_LR.jpg");}
.half ul {
    width: 572px;
    flex-wrap: wrap;
    background:url("../images/bg_LR.jpg");
    padding: 20px 0;
}

.scene .font h4 {background:url("../images/bg_R.jpg");}
.alternate ul:nth-child(odd) li:first-child .font h4, .alternate ul:nth-child(even) li:last-child .font h4 ,.alternate ul:nth-child(odd) li:first-child .font .price big,.alternate ul:nth-child(even) li:last-child .font .price big {
    color: #e92c48;}


/*--主視覺動畫--*/

.T1 {
    position: absolute;
    top: 50px;
    left: 394px;
}


.T2 {
    position: absolute;
	top: 210px;
    left: 470px;
}

.T3{ 
	position: absolute; 
	top: 245px;
    left: 335px;
	z-index: 99;
}



.title-img{ position: absolute;top:0px; left: 0px;animation: slide 23s linear infinite; width:100%;max-width: 1920px;min-width: 1200px; height: 2530px; background: url("../images/kv-img.png") center repeat-Y; z-index: 90; }
@keyframes slide{0% {transform: translate3d(0, 0, 0);} 100% {    transform: translate3d( 0, -1482px,0);
} }

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

	.T1 {
		width: 45vw;
		position: absolute;
		top: -114vw;
		left: 28vw;
	}

}

/*--精明購物指南--*/


/* .bg_0 {background: #3752a3; margin-top: -40px; padding-bottom:40px;} */
.bg_0 ul {
    width: 1200px;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
	flex-wrap: wrap;
}
.a1 {animation: fadeInDown;
    animation-delay: 0s;}
.a2 {animation: fadeInDown;
    animation-delay: .5s;}
.a3 {animation: fadeInDown;
    animation-delay: 1s;}
	ul.sub_m {display: none;}
@media screen and ( max-width: 991px ){
	.bg_0 ul{ width: 100%; margin: 2vw auto;display: none;}
	.bg_0 ul li img{ width: 100%;}
	ul.sub_m {
		display: block;
		margin: -10vw auto 2vw 0;
	}
}


/*--獨家贈禮!限量推出!--*/
/*--輪播AD--*/

.bg_1 .swiper {
        width: 1300px;
        padding-top: 50px;
        padding-bottom: 50px;
	    margin: 0 auto;
      }
.bg_1 .swiper-wrapper, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right{width: 300px;border-radius: 20px;}

.bg_1 .swiper-slide {
	background-position: center;
	background-size: cover;
	width: 300px;
	height: 300px;
	margin-bottom: 60px;
  }

  .bg_1 .swiper-slide img {
	display: block;
	width: 300px;
	height: 300px;
	border-radius: 20px;
/*	margin-top: 100px;*/
  }

  .swiper-slide big  {
    font-size: 140%;
    color: #fff06d;
    font-weight: bold;
}

.bg_1 .swiper-slide p{width: 100%;text-align: center;padding: 5px 5px;font-size: 22px;color: #fff;font-weight:500;margin-top: 10px;line-height: 26px; font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;}

@media screen and ( max-width: 991px ){
	 .bg_1 .swiper {
        width: 100%;
        padding-top: 2vw;
        padding-bottom:2vw;margin: 0 auto;
      }
      .bg_1 .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 80vw;
        height:auto;
		margin-bottom: 70px;
      }	
	      .bg_1 .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 50vw;
        height: 50vw;
      }
	      .bg_1 .swiper-slide img {
        display: block;
        width:  50vw;
        height:  50vw;border-radius: 20px;
/*	    margin-top: 21vw;*/
      }
	.bg_1 .swiper-wrapper,.bg_1 .swiper-3d .swiper-slide-shadow-left,.bg_1 .swiper-3d .swiper-slide-shadow-right{width:50vw;border-radius: 20px;}
	.bg_1 .swiper-slide p{width: 100%;height: auto; text-align: center;padding: 5px 5px;font-size: 1rem;color: #000;font-weight:500;line-height: 1.2rem;margin-top: 6px;}
}






/*--大人氣! 流行感up的穿搭--*/
.bg_3 .baseline_3p{background: #fff6a7; padding: 20px 0;}

@media screen and ( max-width: 991px ){
	.bg_3 .baseline_3p { width: 98vw; margin: 1vw auto 2vw; padding: 2vw 0; }
}


/* 出遊必備! 美型收納一次搞定 */
/* 長高5排品 */
.bg_4 .hightlight_5p img,.bg_2 .hightlight_5p img{object-fit: contain;}
.bg_4 .hightlight_5p,.bg_2 .hightlight_5p { width: 1200px; margin: 20px auto 40px; padding:0 0px 20px;  position: relative; background: url("../images/bg_title2.png") top center no-repeat, url("../images/bg_LR.jpg"); }
.bg_4 .h_5p-even,.bg_2 .h_5p-even { width: 1200px; margin: 0 auto 20px; padding:0 0px 20px;  position: relative; background:url("../images/bg_title2.png") top center no-repeat, url("../images/bg_LR.jpg"); }
.bg_4 .hightlight_5p img,.bg_2 .hightlight_5p img{padding: 6px;object-fit: contain;}
.bg_4 .hightlight_5p ul li,.bg_2 .hightlight_5p ul li{ height: 340px; margin-top: 150px;}
.bg_4 .hightlight_5p ul li h4,.bg_2 .hightlight_5p ul li h4{ background:url("../images/bg_R.jpg");}
.bg_4 .hightlight_5p ul li:first-child,.bg_2 .hightlight_5p ul li:first-child{width: 280px;height: 450px;margin-top: 40px; padding-top: 10px;}
.bg_4 .hightlight_5p ul li:first-child p,.bg_2 .hightlight_5p ul li:first-child p{padding: 8px 15px 0;}
.bg_4 .hightlight_5p ul li:first-child img,.bg_2 .hightlight_5p ul li:first-child img{width:280px; height: 280px; margin: 0 auto 10px;}
.bg_4 .hightlight_5p .titleD,.bg_2 .hightlight_5p .titleD{ position: absolute; top: 27px; left: 440px; background: url("../images/titleD_T.png")top center no-repeat;padding: 38px;}
.bg_4 .hightlight_5p .titleD .more,.bg_2 .hightlight_5p .titleD .more  {font-size: 1.2rem; padding: 10px; position: relative; top: -15px; right: -600px; transition-duration: 0.3s;}
.bg_4 .hightlight_5p .titleD .more a,.bg_2 .hightlight_5p .titleD .more a{ color: #926a3a;}
.bg_4 .hightlight_5p .titleD .more:hover,.bg_2 .hightlight_5p .titleD .more:hover{ transform: scale(0.98);}

@media screen and ( max-width: 991px ){
	.bg_4 .hightlight_5p,.bg_2 .hightlight_5p { width: 98vw; margin: 0 auto 3vw; padding: 2vw 0; background: url("../images/bg_LR.jpg");border-radius: 10px;}
	.bg_4 .h_5p-even,.bg_2 .h_5p-even  { width: 98vw; margin: 0 auto 3vw; padding: 2vw 0; background: url("../images/bg_yellow.jpg"); border-radius: 10px;}
	.bg_4 .hightlight_5p img,.bg_2 .hightlight_5p img{padding:1vw;}
	.bg_4 .hightlight_5p ul,.bg_2 .hightlight_5p ul { margin-top:15vw;}
	.bg_4 .hightlight_5p ul li,.bg_2 .hightlight_5p ul li{ height:auto; margin-top: 0;}
	.bg_4 .hightlight_5p ul li:first-child,.bg_2 .hightlight_5p ul li:first-child{width: 96vw;height: auto;margin-top: 0px; padding-top: 10px;}
	.bg_4 .hightlight_5p ul li:first-child p,.bg_2 .hightlight_5p ul li:first-child p{padding:3%;}
	.bg_4 .hightlight_5p ul li:first-child img,.bg_2 .hightlight_5p ul li:first-child img{width:45vw; height: 60vw; margin: 0 auto 10px;}
	.bg_4 .hightlight_5p .titleD, .bg_2 .hightlight_5p .titleD {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		border: none;
		margin: 2vw 0 2vw 0;
		padding: 7vw;
		background: url("../images/titleD_m.png") top center no-repeat;
	}
	.bg_4 .hightlight_5p .titleD .more,.bg_2 .hightlight_5p .titleD .more{ font-size: 1.2rem; padding: 10px; position: absolute; top: 0px; right:2vw;transition-duration:0.3s;}
}






/*--The Best Seller 本季熱銷推薦--*/
/*--High Reviews 五星好評排行--*/


@media screen and ( max-width: 991px ){
    .bg_6 .titleC img,.bg_7 .titleC img{width: 100%;}}



/*輪播 變形*/
.zasshi-page{width: 545px; height: 758px; background:url("../images/bg_LR.jpg")repeat;overflow: hidden;position: relative;}
.zasshi-page1{position: relative;top: 270px; left: 10px; margin-top: -200px;}
.zasshi-page2{position:relative;top:-400px; left: 610px;}
.zasshi-page3{position: relative;top: -440px; left: 10px;}

.proname{position: relative;bottom: 150px;z-index: 90;text-align: left;}
.proname span{color: #fff; background: #000; padding: 4px 15px;line-height: 30px;font-size: 16px;}
.proprice{color: #ef506c; background: #fff; padding: 4px 15px;line-height: 30px;font-size: 16px;bottom: 130px;z-index: 90;text-align: left;position: relative;}
.proclick{color: #ef506c; background: #fff06d;width: 130px; height: 130px;line-height: 30px;bottom: 250px; left: 380px; z-index: 90;text-align: left;position: relative;border-radius: 100px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;font-size: 36px;animation-name:ani-big; animation-duration: 1s;animation-iteration-count:infinite; animation-timing-function:step-end;animation-delay: -0.1s;}
@keyframes ani-big{0%{ transform:scale(1.05);} 50%{ transform:scale(1);} 100%{ transform:scale(1.05);}}
.swiper-slide li{width: 545px;}
.swiper-slide1-1 img{width: 420px;height: 630px; object-fit: contain; position: absolute;top: 60px; left: 100px;}
.swiper-slide1-1 div:nth-child(1){color: #fff06d;position: absolute; top: 30px; width:500px;text-align: left; font-size: 44px;z-index: 90;}
.swiper-slide1-1 div:nth-child(1) p{color: #fff;position: absolute; top: 30px; width:500px;text-align: left; font-size: 18px;z-index: 90; margin-top: 16px;}
.swiper-slide1-1 div:nth-child(2){color: #fff;position: absolute; top: 200px;right: 52px; text-align: left; font-size: 20px;z-index: 90;font-weight: 500;writing-mode: vertical-rl;line-height: 24px;animation-name:ani-rotate; animation-duration: 1s;animation-iteration-count:infinite; animation-timing-function:step-end;}
@keyframes ani-rotate{0%{ transform:rotate(3deg);} 50%{transform:rotate(-5deg);} 100%{transform:rotate(3deg);}}

.swiper-slide1-2 img{width: 420px;height: 470px; object-fit: contain; position: absolute;top: 25px;right: 10px;}
.swiper-slide1-2 div:nth-child(2){color: #fff;position: absolute; top: 520px;left: 100px; text-align: left; font-size: 20px;z-index: 90;font-weight: 500;line-height: 24px;animation-name:ani-jump; animation-duration: 1s;animation-iteration-count:infinite; animation-timing-function:step-end;}
.swiper-slide1-2 div:nth-child(2) img{width: 45px;height: 94px;position: absolute;top: -50px; left: -50px;}
@keyframes ani-jump{0%{ transform:translateY(0px);} 50%{ transform:translateY(-8px);} 100%{ transform:translateY(0px);}}
.swiper-slide1-2 img:nth-child(3){width: 111px; height: 110px;top: 44px; left: 31px;}

.swiper-slide1-3 img{width: 480px;height: 520px; object-fit: contain; position: absolute;top: 130px;left: 10px;}
.swiper-slide1-3 div:nth-child(2){ width: 545px; color: #fff;position: absolute; top: 45px;right: 0; text-align:center; font-size: 20px;z-index: 90;font-weight: 500;line-height: 24px;animation-name:ani-big; animation-duration: 1s;animation-iteration-count:infinite; animation-timing-function:step-end;}
.swiper-slide1-3 div:nth-child(2) img{width: 324px;height:22px;position: absolute;top:30px; left: 120px;}


.swiper-slide1-4 img{width: 420px;height: 470px; object-fit: contain; position: absolute;top: 155px;right: 10px;}
.swiper-slide1-4 div:nth-child(2){ color: #0060b1;position: absolute; top: 80px;left: 50px;; text-align:center; font-size: 20px;z-index: 90;font-weight: 500;line-height: 24px;animation-name:ani-rotate; animation-duration: 1s;animation-iteration-count:infinite; animation-timing-function:step-end;background: #d7e5ee; border-radius: 50%;width: 150px; height:150px;display: flex;flex-wrap: wrap;justify-content: center;align-items:center;}
.swiper-slide1-4 img:nth-child(3){width: 435px; height: 431px;top: 115px; left: 50px;}

.zasshi-page3 .swiper-slide1-1 div:nth-child(2){color: #0060b1;position: absolute; top: 280px;right: 52px; text-align: left; font-size: 20px;z-index: 90;font-weight: 500;writing-mode: vertical-rl;line-height: 24px;animation-name:ani-rotate; animation-duration: 1s;animation-iteration-count:infinite; animation-timing-function:step-end;}
.zasshi-page4{position:relative;top:-1110px; left: 610px; margin-bottom: -1150px;}


.swiper-container {
  width: 545px; z-index: 99;padding: 0 0px;
  height:758px;
   overflow: hidden; display: flex; flex-wrap: wrap;
}
.swiper-wrapper{z-index: 99;width: 545px; height: 758px;}
.swiper-slide {width: 545px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; margin-right: 0px;
}

	@media screen and ( max-width: 991px ){
	.swiper-container {
  width: 100%; z-index: 99;padding: 0 0vw; background:url(../images/m/layout-m_09.jpg) top center no-repeat; background-size:100%;
  height:auto;
}	
.swiper-wrapper{width:100%;}
.swiper-slide{width:100%; text-align:center;}
.swiper-slide img{ width:100%; max-height: 100%; margin:0 auto;}
		
		
.zasshi-page{width:94vw; height:auto; background:url("../images/bg_LR.jpg")repeat;overflow: hidden;position: relative; margin: 0 auto 4vw;}
.zasshi-page1{position: relative;top: 0px; left: 0px;}
.zasshi-page2{position:relative;top:0px; left: 0px;}
.zasshi-page3{position: relative;top:0px; left: 0px;}
.zasshi-page4{position:relative;top:0px; left: 0px;}
		
.proname{position: relative;bottom: 5vw;z-index: 90;text-align: left;}
.proname span{padding: 4px 15px;line-height: 30px;font-size: 16px;text-align: left;}
.proprice{padding: 4px 15px;line-height: 30px;font-size: 16px;bottom:10px;z-index: 90;position: relative;}
.proclick{width:90%; height:36px;line-height: 30px;bottom: 0px; left: 0px; z-index: 90;text-align:center;position: relative;border-radius: 100px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;font-size: 24px;animation-name:none;margin: 0 auto 3vw;}		
		
	
.swiper-slide li{width: 94vw;}
.swiper-slide1-1 img{width:94vw;height:94vw; object-fit: contain; position: relative;top: 90px; left: 0px;}
.swiper-slide1-1 div:nth-child(1){color: #fff06d;position: absolute; top: 10px; width:100%;text-align: center; font-size: 36px;z-index: 90;}
.swiper-slide1-1 div:nth-child(1) p{color: #fff;position: absolute; top: 30px; width:100%;text-align: center; font-size: 14px;z-index: 90; margin-top: 16px;}
.swiper-slide1-1 div:nth-child(2){color: #fff;position: absolute;top: 25vw;right: 13vw; text-align: left; font-size: 16px;z-index: 90;font-weight: 500;writing-mode: vertical-rl;line-height: 24px;animation-name:none; }
	
.swiper-slide1-2 img{width:94vw;height:94vw; object-fit: contain; position:relative;top: 90px;}
.swiper-slide1-2 div:nth-child(2){color: #fff;position: absolute; top: 30px;left: 0px; width:100%;text-align: center; font-size: 16px;z-index: 90;font-weight: 500;line-height: 24px;animation-name:none; }
.swiper-slide1-2 div:nth-child(2) img{display: none;}
.swiper-slide1-2 img:nth-child(3){display: none;}
		
.swiper-slide1-3 img{width:94vw;height:94vw;  object-fit: contain; position: relative;top: 90px; left: 0px;}
.swiper-slide1-3 div:nth-child(2){ width: 100%; color: #fff;position: absolute; top: 40px;right: 0; text-align:center; font-size: 16px;z-index: 90;font-weight: 500;line-height: 24px;animation-name:none;}
.swiper-slide1-3 div:nth-child(2) img{display: none;}
		
.zasshi-page3 .swiper-slide1-1 div:nth-child(2){color: #0060b1;position: absolute; top:25vw;right: 13vw; text-align: left; font-size: 14px;z-index: 90;font-weight: 500;writing-mode: vertical-rl;line-height: 24px;animation-name:none;}
		
.swiper-slide1-4 img{width:94vw;height:120vw; object-fit: contain; position: relative;top: 90px; left: 0px;}
.swiper-slide1-4 div:nth-child(2){ color: #0060b1;position: absolute; top: 30px;left: 50px;; text-align:center; font-size: 14px;z-index: 90;font-weight: 500;line-height: 20px;animation-name:none; background: #d7e5ee; border-radius: 50%;width: 100px; height:100px;display: flex;flex-wrap: wrap;justify-content: center;align-items:center;}
.swiper-slide1-4 img:nth-child(3){display: none;}
		}
/*輪播 變形*/





/*  品牌主題超好玩  */
.bg_7 .rectangle {
	margin: 0px auto 20px;
  }
  .bg_7 .rectangle li {
	width: 270px;
	height: 270px;
  }
  .bg_7 .rectangle li img {
	width: 250px;
	height: 250px;
	object-fit: cover;
  }
  .bg_7 .rectangle li a {
	position: relative;
  }
  .bg_7 .rectangle li h4 {
	position: absolute;
	top: 130px;
	color: transparent;
	font-size: 24px;
	line-height: 0;
  }
  .bg_7 .rectangle li a:hover img {
	-webkit-filter: brightness(.5);
  }
  .bg_7 .rectangle li a:hover h4 {
	color: #fff;
	z-index: 11;
  }
  @media screen and (max-width: 991px) {
	.bg_7 .rectangle {
	  width: 98vw;
	  margin: 0 auto 2vw;
	  border-radius: 0 0 10px 10px;
	  padding: 0vw 0 2vw;
	}
	.bg_7 .rectangle li {
	  width: 45vw;
	  height: 45vw;
	  margin: 1vw 1vw 1vw 2vw;
	  padding: 3vw -1vw 0 3vw;
	}
	.bg_7 .rectangle li img {
	  width: 40vw;
	  height: 40vw;
	  object-fit: cover;
	}
	.bg_7 .rectangle li a h4 {
	  position: absolute;
	  top: 10vw;
	  color: #fff;
	  z-index: 11;
	  line-height: 5.4;
	  font-size: 1.2rem;
	}
	.bg_7 .rectangle li a img {
	  -webkit-filter: brightness(.5);
	}
  }

/* 館別連結 */
.btn ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.btn ul li {
    margin: 10px auto 30px;
    text-align: center;
    width: 1200px;
}

.btn h2 {
    color: #fff;
    font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
    position: relative;
    top: 105px;
}

@media screen and (max-width: 991px) {
	.btn {
		width: 100%;
		background: url("../images/btn_m.png")top center no-repeat;
		padding: 10vw;
	}
    .btn ul li {
        width: 96vw;
        height: auto;
    }
	.btn h2 {
		top: -2vw;
		font-size: 2rem;
		left: -5vw;
	}
	.btn img {display: none;}
}





/* -- sidemanu for pc -- */
.side-menu2{
	position: fixed;
	width: 130px;
	top:10%;
	right:1%;
	padding:10px;
	border-radius:2px;
	border: 1px solid #fff;
	box-sizing: border-box;
	/*box-shadow: 0 10px rgba(255, 255, 255, 0.8);*/
	background: url("../images/bg_pink.jpg");
	opacity:0.95; 
	display: flex;
	flex-direction: column;
	transform: translateX(0);
	transition: .3s;
	text-align:center;
	z-index:99;
	font-size:15px;
	overflow:hidden;
}
.side-menu2 label{
	position: fixed;
	width: 130px;
	height: 150px;
	background:#3752a3;
	opacity:0.95; 
	color: #ffffff;
	right: -40px;
	top: 0%;
	line-height: 28px;
	text-align: center;
	font-size: 24px;
	border-radius: 0 2px 2px 0;
	padding:18px 8px 10px 8px;
	font-weight:500;
}
#side-menu-switch2{
	position: absolute;
	opacity: 0;
	z-index: -1;
}
#side-menu-switch2:checked + .side-menu{
	transform: translateX(0);
}
.side-menu2 nav a{
	/*font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;*/
	font-weight: 600;
	display: block;
	padding: 10px 4px;
	color: #ffffff;
	text-decoration: none;
	position: relative;
	font-size:16px;	
	font-weight: 800;
	font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
}
.side-menu2 nav p.name_menu{ padding:10px 0; font-size:1.5em; line-height:1em; border-bottom:3px solid; border-color:#04414b; color:#df6616; font-weight:bold;}
.side-menu2 nav ul.area1{ margin-bottom:150px;}
.side-menu2 nav ul.area1 li{ width:50%; float:left; border-bottom:1px dotted #ffffff;}
.side-menu2 nav ul.area1 li:nth-child(even){ border-right:1px dotted #ffffff;}
.side-menu2 nav ul.area2 li{ border-bottom:1px dotted #e0af99;}
.side-menu2 nav ul.area1 li:nth-last-child(1), nav ul.area1 li:nth-last-child(2), nav ul.area2 li:nth-last-child(1){ border-bottom:none;}
	@media screen and ( max-width: 640px ){
		.side-menu2 {display: none;}
	}



/*Plugin*/
.side-menu2 .nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.side-menu2 .nav-pills>li.active>a, .side-menu2 .nav-pills>li.active>a:focus, .side-menu2 .nav-pills>li.active>a:hover, .nav-pills>li>a:hover {
	font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	font-weight: 800;
    color: #e91e63;
    background: #fff06d;
}

.side-menu2 .nav-pills>li>a {
    border-radius: 0px;
}
.side-menu2 .nav>li>a {
    position: relative;
    display: block;
}


/*for mobile*/
menu{display:none;}
@media screen and ( max-width: 991px ){
		menu{ display:block;}
	}
menu ul{position:fixed;bottom:0;left:0;margin:0;width:100%;display:flex; flex-wrap: wrap; list-style: none;background:url("../images/bg_pink.jpg");z-index:1000;border-top:none;font-family: 'Noto Serif TC', serif, "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif; font-weight: 600;}
menu ul li{border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;padding: 8px; width:25%;box-sizing:border-box;text-align:center;font-size:15px;}
menu ul li a{font-size:15px;}
/* menu ul li:nth-last-child(1){border-right:none;} */
menu a{color:#ffffff !important;text-decoration:none;}


/*--goto top--*/
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}
#gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 991px ){
	#gotop {bottom: 25px;right: 0;margin: 2vw;	}
	}