@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/fxied_bg.png")bottom center no-repeat fixed,url("../images/bg_color1.jpg") top center repeat;}
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
  }


/* 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;}
.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; }
.banner {padding:0 0 0 0;}


/* 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; }

	/* 元件調整 */
	.collect_5x6 .s-row h4 {width: 46vw !important;}

}

/* =================================================== 統一設定 =================================================== */
/* ------------------ BG ------------------ */
.bg_1200 {
	width:1200px;
	margin:0 auto;
	background: url("../images/bg_color5.jpg"); 
	padding:40px 0;
	border-radius: 2em;
}

section { background: url("../images/side_deco.png")top center repeat-y,url("../images/bg_color4.jpg"); padding:0 0 40px;}
section::before {
    content: '';
    height: 308px;
    margin: 0px auto -308px;
    background: url("../images/section_be.png")top center no-repeat;
    display: flex;
    top: -308px;
    right: 0px;
    position: relative;
    z-index: -1;
}

section::after {
    content: '';
    height: 27px;
    margin: 0px auto 0;
    background: url("../images/section_af.png")bottom center no-repeat;
    display: flex;
    top: 65px;
    right: 0px;
    position: relative;
    z-index: -1;
}


@media screen and ( max-width: 991px ){
	.bg_1200 {width: 100%;}
}

/* ------------------ COLOR ------------------ */
.half ul {border-radius: 1em; background: url("../images/bg_color3.jpg");}
.broadwise li,.rectangle_3p li{border-radius: 1em;}
.hightlight .font h4,.collect_5x6 .s-row h4,.collect_5x6 .special {background: url("../images/bg_color6.jpg");}
.keywordC .round_5p .font {background: #3092f8;}
.keywordC .round_5p img {border: 5px solid #3092f8;}


/* ------------------ 架構標 ------------------ */
@font-face { font-family: GenJyuuGothic-Heavy; src: url("https://events.eslite.com/font/GenJyuuGothic-Heavy.ttf");}
	.titleC.btt { background: url("../images/btt.png")top center no-repeat; padding: 115px 0 20px; margin: 60px auto 0;}
	.titleC.stt {background: url("../images/stt.png")top center no-repeat; padding: 10px 0; margin: 0 auto 0;}
	.titleC h2 { font-family: GenJyuuGothic-Heavy; font-size: 4rem; color:#3091f8;}
	.titleC h3 { font-family: GenJyuuGothic-Heavy; font-size: 3rem; color:#6c5442;}
	.keywordC .font p { font-family: GenJyuuGothic-Heavy; }

@media screen and (max-width: 991px) {
	.titleC.btt { width: 100%; background-size: 170%; padding: 15vw 0 1vw; margin: 8vw auto 0;}
	.titleC.stt {width:100%; background-size: contain; padding:1vw 0;}
	.titleC h2 {font-size: 3rem; -webkit-text-stroke: 4px #fff; paint-order: stroke fill;}
	.titleC h3 {font-size: 2.4rem;}
	}







/* =================================================== 版頭設定 =================================================== */
.bnbox {width:1200px; margin:0 auto;}
@media screen and (max-width: 991px) {
	.bnbox img.for_pc{display: none;}
	.bnbox img.for_m{ width: 100%; display: block;}
}

/* ------------------ 版頭動畫 ------------------ */
.kv_title{
    position: absolute;
	top: 50px;
    left: 217px;
    animation:jello-horizontal .9s linear both
}

@keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}


.kv_sale_01 {
    position: absolute;
	top: 627px;
    left: 123px;
    animation: fadeInDown 2s linear;
    animation-delay: 1.5s;
}

.kv_sale_02 {
    position: absolute;
	top: 713px;
    left: 40px;
    animation: fadeInDown 2s linear;
    animation-delay: 2s;
}

.plane {
	position: absolute;
	top:226px;
		-webkit-animation-name: stylie-keyframes;
		-webkit-animation-duration: 5000ms;
		-webkit-animation-delay: 0ms;
		-webkit-animation-fill-mode: forwards;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		-webkit-transform-origin: 0 0;
	  }
	  @-webkit-keyframes stylie-keyframes {
		0% {-webkit-transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		1.67% {-webkit-transform:translate(21.4389px, -7.5062px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		3.33% {-webkit-transform:translate(42.8631px, -14.6711px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		5% {-webkit-transform:translate(64.258px, -21.5021px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		6.67% {-webkit-transform:translate(85.6088px, -28.0065px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		8.33% {-webkit-transform:translate(106.901px, -34.1917px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		10% {-webkit-transform:translate(128.1198px, -40.0651px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		11.67% {-webkit-transform:translate(149.2509px, -45.634px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		13.33% {-webkit-transform:translate(170.2797px, -50.9058px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		15% {-webkit-transform:translate(191.1918px, -55.8878px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		16.67% {-webkit-transform:translate(211.9728px, -60.5874px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		18.33% {-webkit-transform:translate(232.6086px, -65.0119px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		20% {-webkit-transform:translate(253.0849px, -69.1686px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		21.67% {-webkit-transform:translate(273.3878px, -73.065px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		23.33% {-webkit-transform:translate(293.5034px, -76.7084px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		25% {-webkit-transform:translate(313.4177px, -80.1061px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		26.67% {-webkit-transform:translate(333.1173px, -83.2656px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		28.33% {-webkit-transform:translate(352.5886px, -86.1941px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		30% {-webkit-transform:translate(371.8182px, -88.899px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		31.67% {-webkit-transform:translate(390.793px, -91.3876px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		33.33% {-webkit-transform:translate(409.5px, -93.6674px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		35% {-webkit-transform:translate(427.9263px, -95.7456px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		36.67% {-webkit-transform:translate(446.0594px, -97.6297px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		38.33% {-webkit-transform:translate(463.8867px, -99.3269px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		40% {-webkit-transform:translate(481.3961px, -100.8447px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		41.67% {-webkit-transform:translate(498.5756px, -102.1904px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		43.33% {-webkit-transform:translate(515.4134px, -103.3713px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		45% {-webkit-transform:translate(531.898px, -104.3948px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		46.67% {-webkit-transform:translate(548.018px, -105.2682px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		48.33% {-webkit-transform:translate(563.7624px, -105.9989px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		50% {-webkit-transform:translate(579.1205px, -106.5944px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		51.67% {-webkit-transform:translate(594.0816px, -107.0618px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		53.33% {-webkit-transform:translate(608.6356px, -107.4086px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		55% {-webkit-transform:translate(622.7725px, -107.6421px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		56.67% {-webkit-transform:translate(636.4825px, -107.7697px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		58.33% {-webkit-transform:translate(649.7564px, -107.7987px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		60% {-webkit-transform:translate(662.5849px, -107.7365px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		61.67% {-webkit-transform:translate(674.9593px, -107.5904px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		63.33% {-webkit-transform:translate(686.8712px, -107.3678px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		65% {-webkit-transform:translate(698.3123px, -107.0761px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		66.67% {-webkit-transform:translate(709.2748px, -106.7226px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		68.33% {-webkit-transform:translate(719.7512px, -106.3146px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		70% {-webkit-transform:translate(729.7343px, -105.8596px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		71.67% {-webkit-transform:translate(739.2173px, -105.3648px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		73.33% {-webkit-transform:translate(748.1937px, -104.8376px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		75% {-webkit-transform:translate(756.6573px, -104.2854px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		76.67% {-webkit-transform:translate(764.6024px, -103.7155px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		78.33% {-webkit-transform:translate(772.0234px, -103.1353px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		80% {-webkit-transform:translate(778.9153px, -102.5522px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		81.67% {-webkit-transform:translate(785.2734px, -101.9734px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		83.33% {-webkit-transform:translate(791.0933px, -101.4064px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		85% {-webkit-transform:translate(796.371px, -100.8584px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		86.67% {-webkit-transform:translate(801.1029px, -100.337px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		88.33% {-webkit-transform:translate(805.2858px, -99.8493px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		90% {-webkit-transform:translate(808.9168px, -99.4028px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		91.67% {-webkit-transform:translate(811.9933px, -99.0048px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		93.33% {-webkit-transform:translate(814.5134px, -98.6627px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		95% {-webkit-transform:translate(816.4753px, -98.3838px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		96.67% {-webkit-transform:translate(817.8776px, -98.1755px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		98.33% {-webkit-transform:translate(818.7193px, -98.0451px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
		100% {-webkit-transform:translate(819px, -98px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} }

/* ------------------ promotion-版頭行銷資訊 ------------------ */
.block_00 ul {
    width: 1200px;
	padding: 0 0 0 0;
    margin: 40px auto;
    display: flex;
    justify-content: space-evenly;
}

.a1 {animation: bounceInUp; animation-delay: 0s;}
.a2 {animation: bounceInUp; animation-delay:.5s;}
.a3 {animation: bounceInUp; animation-delay: 1s;}
.a4 {animation: bounceInUp; animation-delay: 1.5s;}


@media screen and ( max-width: 991px ){
	.bnbox {width:100%;}
	.block_00 ul { width:100%;display: flex; flex-wrap: wrap;padding: 0 0 0 0; margin: 5vw auto 2vw; justify-content: center;}
	.block_00 ul li { margin:1vw;}
	.block_00 .kv_m a {margin: 0 10px; padding: 5px 0;}	
    .block_00 img {display: block; width:31vw;}
	}





/* =================================================== 版身設定 =================================================== */
/*------------------  3品不輪播  ------------------ */
.zasshi3{width:1160px;margin: 20px auto;}
.zasshi3 ul{display: flex;justify-content: space-around;}
.zasshi3 ul li{width:370px;background: url("../images/bg_color3.jpg");padding: 10px;text-align: center;position: relative;transition: 0.5s all; border-radius:1em;}
.zasshi3 ul li:hover{transform: scale(0.96);}
.zasshi3 ul li h4{font-size: 1.6rem;padding-left: 40px;margin: 15px auto;color:#6c5442;font-weight: bold;}
.zasshi3 ul li a{display: flex;justify-content:flex-start;flex-wrap: wrap;}
.zasshi3 ul li img{width:330px;height: 330px; object-fit: contain;margin: 5px auto;}
.dis-for-zasshi3{position: absolute;top: 10px;left:  10px;border-radius: 50px;background:url("../images/bg_color6.jpg");width: 80px;height: 80px;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 1rem;font-weight: 500;text-align: center;flex-wrap: wrap;flex-direction: column;}
.dis-for-zasshi3 big{color:#FFF523;font-size: 2.5rem;}
.zasshi3 ul li .font{text-align: left;margin:-30px 0 10px;display: flex;flex-direction: column;width:auto;}
.zasshi3 ul li .font p{background:url("../images/bg_color5.jpg"); padding:5px 25px 5px 15px;color: #fff;text-align: left;border-radius: 0 30px 0 0;}
.zasshi3 ul li .font .price{margin-top: 5px;}
.zasshi3-buy{position: absolute;bottom: 20px;right: 10px;border-radius: 50px;background:url("../images/bg_color6.jpg");width: 80px;height: 80px;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 1rem;font-weight: 500;text-align: center;flex-wrap: wrap;flex-direction: column;}
@media screen and ( max-width: 991px ){
.zasshi3{width:100%;margin:2vw auto;}
.zasshi3 ul{justify-content:center;flex-wrap: wrap;}
.zasshi3 ul li{margin: 2vw auto;width: 96vw;padding: 1vw;}
.zasshi3 ul li a{flex-direction: column}
.zasshi3 ul li img{width:70vw;height: 70vw; object-fit: contain;margin: 1vw auto;}
.zasshi3 ul li .font{margin: 0 auto 2vw;}
.zasshi3 ul li .font p{text-align: center;width:100%;background: transparent;margin: 1vw auto;color: var(--PV-font);}
.zasshi3 ul li .font .price{text-align: center;}
.zasshi3-buy{display: none;}
}

/*--  4AD  --*/
.film-rectangle-for4 .rectangle ul li{width: 275px;height: 275px;}
.film-rectangle-for4 .rectangle ul li img{width: 255px;height: 255px;}
.film-rectangle-for4 .rectangle ul li h4{width: 255px;height: 255px;top: 0px;display: flex;justify-content: center;align-items: center;}

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

.film-rectangle-for4 .rectangle ul li{width: 46vw;height: 46vw;}
.film-rectangle-for4 .rectangle ul li img{width: 44vw;height:44vw;}
.film-rectangle-for4 .rectangle ul li h4{width: 44vw;height:44vw;top: 0px;display: flex;justify-content: center;align-items: center;}
}

/* ------------------ 長高5排品(5F) ------------------ */
.special_5p_1 .hightlight_5p { width: 1160px; margin: 60px auto 20px; padding: 10px 0; background: url("../images/bg_color3.jpg"); border-radius: 15px;}
.special_5p_1 .hightlight_5p ul { align-items: flex-end;}
.special_5p_1 .hightlight_5p ul li { height: auto; margin-top: 0; border-radius: 1em;}
.special_5p_1 .hightlight_5p ul li:first-child { width: 240px; height: auto; }
.special_5p_1 .hightlight_5p ul li:first-child img { width: 240px; height: 240px;}

.special_5p_1 .title_AA h3 {
    font-family: GenJyuuGothic-Heavy;
    color: #6c5442;
    border-left: none;
    font-size: 2.6rem;
    letter-spacing: 3px;
    padding: 40px 0 10px 440px;
    width: 100%;
    display: flex;
    position: absolute;
    /* justify-content: center; */
    /* align-items: center; */
    left: 130px;
    top: -20px;
    background: url("../images/title_AA.png") top center no-repeat;
}
.special_5p_1 .hightlight_5p ul li h4 {background: url("../images/bg_color5.jpg"); }
.title_AA .more{ padding: 10px 0; top: 30px; right: 20px;}

@media screen and ( max-width: 991px ){
	.special_5p_1 {width: 100vw;}
	.special_5p_1 .hightlight_5p { width: 100vw; margin: 0 0 0 -2vw; padding: 2vw 0;}
    .special_5p_1 .hightlight_5p ul li:first-child{width:100%;}
	.special_5p_1 .hightlight_5p ul li:first-child img { width: 45vw; height: 45vw;}
	
    .special_5p_1 .title_AA {margin: 2vw auto; height:auto;}	
	.special_5p_1 .title_AA h3 {
		position: relative;
		left: 0;
		padding: 5vw 0 3vw 20vw;
		top: 0;
		font-size: 2rem;
		text-align: center;
		background-size: 125%;
	}
    .title_AA .more{ padding: 2vw; right: 2vw;}
}

/*館別連結*/
.btn{ width: 1200px; margin: 0 auto;}
.btn ul{ display: flex; justify-content:space-around; margin-bottom: 20px;}
.btn ul li { width: 560px; /*height: 100px;*/ margin-top: 20px; text-align: center; padding: 1vw 0; border-radius: 500px; }

.btn ul li{
background: #333;
padding:5px 0;
margin: 10px 10px;
}

.btn ul li a {text-align: center; color: #fff; line-height: 100px; font-size: 30px; font-family:GenJyuuGothic-Heavy; display: flex; align-items: center; justify-content: center; }
.btn .arrow{ margin-left: 0.5rem; margin-top: 0.8rem;  width: 5rem; -webkit-animation: arrowMove 1s ease infinite; animation: arrowMove 1s ease infinite;}
@keyframes arrowMove{
0% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
30% {
    -webkit-transform: translate3d(1.33333vw,0,0);
    transform: translate3d(1.33333vw,0,0);
}
60% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
}

@media screen and ( max-width: 991px ){
	.btn{ width: 100%; }
	.btn ul { margin: 2vw auto; flex-wrap: wrap;}
	.btn ul li { width: 96vw; margin: 1vw auto; padding: 1vw 0; }
	.btn ul li a { padding: 2vw; font-size: 2.2rem; line-height: 1.8; }
	.btn .arrow{ margin-left: 0.3rem; margin-top: 0.3rem;  width: 4rem; }
}


/* -- 右側選單 -- */
/* -- sidemanu for pc -- */
.side-menu2{
	position: fixed;
	width: 150px;
	top:10%;
	right:1%;
	padding:140px 10px 10px;
	border-radius:2px;
	/* border: 1px solid #fff; */
	box-sizing: border-box;
	/* border-radius: 20px; */
	background:url("../images/menu.png")top center no-repeat;
	opacity:1; 
	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:#ffea00;
	opacity:0.95; 
	color: #285976;
	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 li{ border-bottom: 1px dotted #6c5442;}
.side-menu2 nav li:nth-last-child(1){ border-bottom: none;}

/*.side-menu2 nav li:nth-child(odd){ background:  #6E5688; border-bottom: 1px dotted #fff;}
.side-menu2 nav li:nth-child(even){ background: #9A75A0; border-bottom: 1px dotted #fff;}*/

.side-menu2 nav a{
	font-weight: bolder;
	display: block;
	padding: 10px 4px;
	color: #6c5442;
	text-decoration: none;
	position: relative;
	font-size:18px;	
	font-family: GenJyuuGothic-Heavy;
	/* font-weight: 600; */
	line-height: 1.4;
}
.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;}
.side-menu2 nav ul.area1 li:nth-last-child(1){ border-bottom:none;}
	@media screen and ( max-width:991px ){
		.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-weight: 600;
    color: #a7212e;
    background:url("../images/bg_orange.jpg");
	/*height: 60px;
	line-height: 40px;*/
}

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


/* -- 版頭TopMenu -- */
/*navigation bar for pc*/
/* Style the TopMenu */
#TopMenu {
	/*overflow: hidden;*/
	display: none;
	max-width:100%;
	height:60px;
	z-index:999;
	margin:0 auto;
	background: #4e351f;
	}

	.nav_content{ width:1200px; margin:0 auto;}
  	/* Navbar links */
	#TopMenu a {
	float: left;
	display: block;
	text-align: center;
	text-decoration: none;
	width:16.2%;
	margin:0 2.5px;
	font-size:24px;
	color:#fff;
	border-right: 1px solid #ffffff;
	height:60px;
	line-height:60px;
	letter-spacing: 1px;
	font-weight: 600;
	} 
	#TopMenu .row_06 a{border-right: none;}
	#TopMenu span{ color:#000000;}

/*#TopMenu a:hover{ transform: scale(.95)}*/


/*for mobile*/
@media screen and ( max-width: 991px ){
	#TopMenu { width: 100%; height: auto; display: block;}	
	#TopMenu ul.nav_content{margin:0;width:100%;display:flex; flex-wrap: wrap; list-style: none;background: url("../images/bg_blue.jpg");z-index:1000;border-top:none; }
	#TopMenu ul li{border-right:1px solid #ffffff;border-bottom:1px solid #ffffff; padding: 1vw; width:25%;box-sizing:border-box;text-align:center;font-size:15px;}
	/*#TopMenu ul li:nth-child(odd){ background: #6E5688;}
	#TopMenu ul li:nth-child(even){ background: #9A75A0;}*/
	#TopMenu ul li a{ width:100%; margin:0 auto; font-size:15px; border-right: none; height:auto; line-height:1.4; letter-spacing: 0; font-family: 'Noto Serif TC', serif;}
	#TopMenu ul li:nth-child(4), #TopMenu ul li:nth-child(8){border-right:none;}
}


/*------------------------------ navbar ------------------------------ */
/* m版橫向滑動選單 */
/*for mobile scrollmenu*/
.scrollmenu{display:none;}
@media screen and ( max-width: 991px ){
.scrollmenu{ 
	display:flex; 
	justify-content: flex-start; 
	overflow-x: auto; 
	white-space: nowrap; 
	z-index: 999; 
	top: 0; 
	width: 100vw; 
	padding: 3vw 1vw; 
	margin: 0 auto;  
	background:url("../images/bg_color2.jpg"); /* webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; box-shadow:10px 0 10px -10px #898989 inset, -10px 0 10px -10px #898989 inset;*/
	}
.scrollmenu::-webkit-scrollbar { display: none;}
}
.scrollmenu a{ 
	display: inline-block; 
	font-size:1.2em; 
	line-height: 1;
	color: #fff !important;
	text-decoration:none; 
	/* font-weight: 700;  */
	/*border-right:1px dotted #7563af;*/ 
	padding: 2vw 3vw ; 
	text-align:center;
	background:url("../images/bg_color5.jpg"); 
	border-radius: 100px; 
	margin: 0 1vw;
	font-family: GenJyuuGothic-Heavy;
}
.scrollmenu a:hover{ 
	background:url("../images/bg_color6.jpg");
	color: #fff !important; 
}


/*--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 {position: absolute;display: block;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: 80% 35%;}         
#gotop:hover {cursor: pointer;background-color: #666;}          
#gotop:active {background-color: #ccc;}          
#gotop.show {opacity: 0.4;visibility: visible;}          
@media screen and ( max-width: 991px ){          
#gotop {bottom: 70px;right: 0;margin: 2vw;}
}         
/* share url */          
#share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
#share::after{position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/share.png") center no-repeat;background-size: 50%;background-position: 80% 35%;}
#share:hover{cursor: pointer;background-color: #666;}
#share:active{background-color: #666;}
@media screen and ( max-width: 991px ){
#share{bottom:115px;right: 0;margin: 2vw;}
}                    
@media screen and ( max-width: 991px ){          
html{padding-bottom: 80px;}          
}