@charset "utf-8";
@font-face{    font-family:'Century Gothic' ;    src: url("GOTHICB.TTF")}
/* 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{scroll-behavior: smooth;
	background:url("../images/bg-img.jpg") top center repeat;
}

header{background: url("../images/kv_01.jpg")top center no-repeat;}

/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		header{background: url("../images/bg-paper4.jpg")top center repeat;}
	}
.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; }

.title01{ position: absolute;top:6px; left: 256px;z-index: 90;}
.title02{ position: absolute;top:214px; left: 56px;z-index: 90;}
.title03{ position: absolute;top:190px; left: 112px;z-index: 90;}
.title04{ position: absolute;top:186px; left: 472px;z-index: 90;}
.title05{ position: absolute;top:203px; left: 653px;z-index: 90;}
.title06{ position: absolute;top:207px; left: 866px;z-index: 90;}


.title5-01{ position: absolute;top:7px; left: 233px;z-index: 90;}
.title5-02{ position: absolute;top:401px; left: 171px;z-index: 90;}

.title30-01{ position: absolute;top:31px; left: 282px;z-index: 90;}
.title30-02{ position: absolute;top:218px; left: 245px;z-index: 90;}
.title30-02 img:hover{transform: scale(0.9);}
.title30-02 img{transition: 0.5s all;}

.fw01{ position: absolute;top:430px; left: -52px;z-index: 90;animation-name:ani01; animation-duration: 4s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
.fw01 img{animation-name:circle;animation-duration: 4s;animation-timing-function:ease-in;animation-iteration-count:infinite;}

.fw02{ position: absolute;top:297px; left: 1400px;z-index: 90;animation-name:ani01; animation-duration: 6s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -2.5s;}
.fw02 img{ animation-name:circle;animation-duration: 6s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -2.5s;}

.fw03{ position: absolute;top:9px; left: -326px;z-index: 90;animation-name:ani01; animation-duration: 3.5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -4.7s;}
.fw03 img{animation-name:circle;animation-duration: 3.5s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -4.7s;}

.fw04{ position: absolute;top:215px; left: 1340px;z-index: 90;animation-name:ani01; animation-duration: 4.2s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -5s;}
.fw04 img{animation-name:circle;animation-duration: 4.2s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -5s;}

.fw05{ position: absolute;top:201px; left: 1130px;z-index: 90;animation-name:ani01; animation-duration: 3s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -8s;}
.fw05 img{animation-name:circle;animation-duration: 3s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -8s;}

.fw06{ position: absolute;top:285px; left: -311px;z-index: 90;animation-name:ani01; animation-duration: 3.4s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -4s;}
.fw06 img{animation-name:circle;animation-duration: 3.4s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -4s;}


.titleC{ margin: 0px; padding: 40px 0 10px;}

.block{ margin: 0 auto; max-width: 1920px; padding: 1px 0;}
/*.block:nth-child(odd){ background:#ccc;}*/
.bg_1200{ width:1200px; min-width:1200px; 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; }
	.block{ margin: 0 auto; max-width: 100%; padding: 1.5vw 0;}
	.bg_1200{ width:100%; min-width:100%; margin:0 auto;}
	.titleC{ margin: 0px; padding: 5vw 2vw 2vw;}
}

/*--  版面微調  --*/
.container{padding: 0;margin: 0 auto;max-width: 1920px;}
body{background: none;}
.navbar{padding: 0;}

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

/*--  共通設定  --*/
.ribbon{background:  linear-gradient(#ff6d3c 0%, #fa4411 100%);}
.ribbon:before{border-bottom: solid 6px #fa4411;}
.ribbon:after{border-left: 25px solid #fa4411;border-right: 25px solid #fa4411;}
@media screen and ( max-width: 991px ){
.ribbon:after{border-left: 6vw solid #fa4411;border-right: 6vw solid #fa4411;}
}


/*--  0. 攻略%數  --*/
.bg_0{background: url("../images/kv_03.jpg")top center no-repeat,url("../images/bg2.jpg");padding-bottom: 14px;height: 480px;}

.bg_0 .percent{width: 100%;text-align: center;}
.bg_0 .maxbox{margin: 0 auto;padding: 30px 0 20px;}
.plusbox{height:auto;width: 100%;}
.plusbox ul{display: flex;margin: 0 auto; justify-content: center;align-items: flex-start;height: auto;padding:0px;}
.plusbox ul li:hover{transform: scale(1);}
.plusbox ul li a img{transition: 0.5s all;}
.plusbox ul li a img:hover{transform: scale(0.9);}
.plusbox ul li{margin: 0 50px;position: relative;padding-top: 15px;}
.plusbox::after{content: '優惠回饋%數採四捨五入計算至整數。\A廠商直送、部分商品不參與全站促銷，商品是否適用折扣/贈品，請依結帳購物車顯示為準。';width: 100%; height: auto;font-size: 12px; color: #14596f;line-height: 15px;display: block;white-space: pre-line;padding: 15px 0 15px;font-weight: 500;}

.plusbox-2 ul::before{content: '';width: 650px; height: 193px;background: url("../images/bg-paper.jpg");position: absolute;border-radius: 50px;}
.plusbox-2 ul li::after{content:'';width: 36px;height: 37px;display:block;justify-content: center;align-content:flex-start;background: url("../images/tips/plus.png")top center no-repeat;position: absolute;top: 60px;left: 210px;}
.plusbox-2 ul li:last-child::after{display:none;}

.plusbox-3 ul li{margin: 0 35px;}
.plusbox-3 ul::before{content: '';width: 778px; height: 193px;background: url("../images/bg-paper.jpg");position: absolute;border-radius: 50px;}
.plusbox-3 ul li::after{content:'';width: 36px;height: 37px;display:block;justify-content: center;align-content:flex-start;background: url("../images/tips/plus.png")top center no-repeat;position: absolute;top: 60px;left: 195px;}
.plusbox-3 ul li:last-child::after{display:none;}

.plusbox-4 ul li{margin: 0 25px;}
.plusbox-4 ul::before{content: '';width: 890px; height: 193px;background: url("../images/bg-paper.jpg");position: absolute;border-radius: 50px;}
.plusbox-4 ul li::after{content:'';width: 36px;height: 37px;display:block;justify-content: center;align-content:flex-start;background: url("../images/tips/plus.png")top center no-repeat;position: absolute;top: 60px;left: 190px;}
.plusbox-4 ul li:last-child::after{display:none;}

.plusbox-5 ul li{margin: 0 15px;}
.plusbox-5 ul::before{content: '';width: 1060px; height: 193px;background: url("../images/bg-paper.jpg");position: absolute;border-radius: 50px;}
.plusbox-5 ul li::after{content:'';width: 30px;height: 30px;display:block;justify-content: center;align-content:flex-start;background: url("../images/tips/plus.png")top center no-repeat;background-size: 100%; position: absolute;top: 60px;left: 180px;}
.plusbox-5 ul li:last-child::after{display:none;}

@media screen and ( max-width: 991px ){
.bg_0{height: auto;padding-bottom: 0;background: url("../images/bg-paper4.jpg");}
.bg_0.block{padding-top: 0;}
.bg_0 .maxbox{width: 70%;padding:0 3vw 3vw;}
.plusbox::after{padding: 0 3vw;margin-top: 2vw;}

.plusbox ul{width:100%;}

.plusbox-2 ul::before{width:86vw; height: 28vw;}
.plusbox-2 ul li{margin: 0 5vw;}
.plusbox-2 ul li img{width: 25vw;height: auto;}
.plusbox-2 ul li::after{content:'';width: 5vw;height: 5vw;top:10vw;left:28vw;background-size: contain;}


.plusbox-3 ul::before{width:96vw; height: 26vw;}
.plusbox-3 ul li{margin: 0 4vw;}
.plusbox-3 ul li img{width: 22vw;height: auto;}
.plusbox-3 ul li::after{content:'';width: 5vw;height: 5vw;top:10vw;left:24vw;background-size: contain;}

.plusbox-4 ul::before{width:96vw; height: 24.5vw;}
.plusbox-4 ul li{margin: 0 2vw;}
.plusbox-4 ul li img{width: 21vw;height: auto;}
.plusbox-4 ul li::after{content:'';width: 4vw;height: 4vw;top:9.5vw;left:22vw;background-size: contain;}


.plusbox-5 ul::before{width:96vw; height: 23vw;}
.plusbox-5 ul li{margin: 0 0vw;}
.plusbox-5 ul li img{width: 20vw;height: auto;}
.plusbox-5 ul li::after{content:'';width: 3vw;height: 3vw;top:7.5vw;left:17vw;background-size: contain;}

.plusbox::after{content: ' ';width: 85vw; height: 6vw;font-size: 12px; color: #14596f;line-height: 15px;display: block;white-space: pre-line;padding: 0px;font-weight: 500;background: url("../images/text.png")top center no-repeat;background-size: 100%;margin: 1vw auto 0;}
}

/*--  1. 攻略圖片  --*/
.tipbox{background: url("../images/bg-b1.jpg");display: flex;justify-content: center;padding:20px 0 20px;flex-direction: column; }
.tipbox li{margin: 10px auto;}
.tipbox li:hover{transform: scale(1);}
.tipbox li a img,.tipbox li button{transition: 0.5s all;}
.tipbox li a img:hover,.tipbox li button:hover{transform: scale(0.97);}

.inquire1 {width: 1141px; padding: 0px;border: 0px;height: 130px; color: #fff;font-size: 46px;line-height: 40px;font-weight: bolder;letter-spacing: 2px;background: url("../images/tips/tip-0705.png") top center no-repeat;margin: 0px auto 0px; display: block;}
.inquire2 {width: 1141px; padding: 0px;border: 0px;height: 130px; color: #fff;font-size: 46px;line-height: 40px;font-weight: bolder;letter-spacing: 2px;background: url("../images/tips/tip-0731-1.png") top center no-repeat;margin: 0px auto 0px; display: block;}
.inquire1_close {width: 1141px; padding: 0px;border: 0px;color: #fff;font-size: 46px;line-height: 40px;font-weight: bolder; letter-spacing: 2px;background: url("../images/tips/tip-0705-o.png") top center no-repeat; margin: 0px auto 0px; display: block;}
.inquire2_close {width: 1141px; padding: 0px;border: 0px;color: #fff;font-size: 46px;line-height: 40px;font-weight: bolder; letter-spacing: 2px;background: url("../images/tips/tip-0731-1-o.png") top center no-repeat; margin: 0px auto 0px; display: block;}

.precaution p{width: 1100px; margin: 0 auto;font-size: 12px; color: #fff;line-height: 17px;font-weight: 500;padding: 10px 0;}
.precaution p a{color:#ffee7c;text-decoration: underline; }

@media screen and ( max-width: 991px ){
.tipbox{background: url("../images/bg-b1.jpg");padding:1vw;}
.tipbox li{margin:1vw auto;width: 100%;}
.tipbox li a img{width: 100%;}
.inquire1,.inquire1_close,.inquire2,.inquire2_close{width: 98vw;background-size: 100%;height: 12vw;}
.precaution p{width: 100%; margin: 0 auto;font-size:12px; color: #fff;line-height: 16px;font-weight: 500;padding: 2vw 3vw;}
}

/*--  1. 攻略文字  --*/
.bg_1{background:url("../images/kv_04.jpg")center top no-repeat,url("../images/bg1-b.png")center bottom no-repeat,url("../images/bg-1-star.png")top center repeat-y,url("../images/bg2.jpg");padding-bottom: 170px;padding-top: 20px;}

.bg_1 .titleC h2{ background: url("../images/bg-o.jpg");color: #fff;font-size: 60px;padding: 3px 70px 8px;font-weight:bold;border-radius: 0 0 50px 50px;letter-spacing: 1px;}
.bg_1 .titleC{margin: -45px auto -40px; position: relative;top: -30px;letter-spacing: 1px;}
.bg_1 .bg_1200 .titleC:first-child{margin: -25px auto -50px; position: relative;top: -30px;letter-spacing: 1px;}
.bg_1 .slick-slide{width: 315px; height: 315px;}
.slick5{width: 315px; height: 315px;background: url("../images/slick5-bg.png")top center no-repeat;margin-bottom: 35px;}
.bg_1 .slick5 .font .date{font-size: 26px;font-family:"Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial;;font-weight: bold;padding: 15px 0 10px; color: #14596f;border-bottom:2px #14596f solid; width: 220px;margin: 0 auto;text-align: center;}
.bg_1 .slick5 .font .catalog{font-size: 36px;color: #14596f;font-weight: bold;padding: 15px 0;text-align: center;}
.bg_1 .slick5 .font .catalog-s{font-size: 24px;letter-spacing: -1px;}
.bg_1 .slick5 .font  .textbox{width: 300px;height: 200px;padding: 10px;margin:5px auto 0;display: flex;justify-content: center;align-items: center;text-align: center;}
.bg_1 .slick5 .font .text{font-size: 36px;color: #fff;font-weight: bold;margin: 0 auto;line-height: 42px;font-family: "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial;letter-spacing: -1px;text-align: center;}
.bg_1 .slick5 .font .text-s{font-size: 30px;color: #fff;font-weight: bold;margin: 0 auto;line-height: 42px;font-family: "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial;letter-spacing: -1px;text-align: center;}
.bg_1 .slick5 .font .text span{font-size: 68px;color: #ffee7c;font-weight: bold;}
.bg_1 .slick5 .font .text-s span{font-size: 50px;color: #ffee7c;font-weight: bold;}
.slick5itam-2 h4, .slick5itam-2 p{padding-top: 0;}
.bg_1 .cata-discount{position: relative;padding-top: 50px;}
.bg_1 .slickbg{width: 1200px;padding: 10px 0 0;background: url("../images/bg2-2.jpg");}
.bg_1 .slick-dotted.slick-slider{width: 100%; padding: 0;}
.bg_1 .slick-slide{margin: 0 -30px;}
.bg_1 .slick-dots li button:before{font-size: 40px;margin: 5px;color: #ff6538;padding-top: 25px;}
.bg_1 .slick-dots li.slick-active button:before{color: #ff6538;}

.swiperbox{width: 1200px;overflow: hidden;}
.mySwiper{width: 1160px;margin:10px auto 0;padding: 0 0px;}
.swiper-pagination-bullet{margin-top: 0px;}
.swiper-wrapper{padding-bottom: 100px;margin-bottom: 100px;}

@media screen and ( max-width: 991px ){
.bg_1{padding-bottom: 0vw;padding-top: 0;}
.bg_1 .bg_1200 .titleC:first-child{margin: 0px auto -14vw; position: relative;top: -4vw;letter-spacing: 0px;}
.bg_1 .titleC{margin: 0px auto -8vw; position: relative;top: -8vw;letter-spacing: 0px;}
.bg_1 .cata-discount .slickbg .titleC{margin: 0px auto -8vw; position: relative;top: -8vw;letter-spacing: 0px;}
.bg_1 .titleC h2{font-size: 2rem;line-height: 2.2rem; padding: 2vw 5vw 2vw;border-radius: 0 0 20px 20px;}
.tipbox{padding: 9vw 1vw 1vw;}

.bg_1 .slider{margin: 0 auto 0;}
.bg_1 .slick-dotted.slick-slider{margin-bottom: 0;}
.bg_1 .slick-list{width: 100%;padding: 0;height: auto;}
.bg_1 .slick-track{width: 100%;}
.bg_1 .slick-slide{margin: 0 1vw;}
.bg_1 .slick-slider .slick-list{padding: 0;}
.bg_1 .cata-discount{padding-top:4vw;}
.bg_1 .slickbg{width: 100%;padding: 1vw 0;}
.bg_1 .slick-slide{width: 100%; height:50vw;}
.slick5{background-size: contain;}
.bg_1 .slick5 .font .textbox{width: 30vw;}

.bg_1 .slick5 .font .date{font-size:4vw;padding: 0.5vw 0 0vw;border-bottom:1px #14596f solid; width: 80%;margin: 0 auto;}
.bg_1 .slick5 .font .catalog{font-size: 5.5vw;color: #14596f;font-weight: bold;padding: 1.5vw 0 1vw;}
.bg_1 .slick5 .font .catalog-s{font-size: 3.4vw;}
.bg_1 .slick5 .font  .textbox{width: 100%;height:27vw;padding: 1vw;margin:0 auto 0;display: flex;justify-content: center;align-items: center;}
.bg_1 .slick5 .font .text{font-size: 5vw;color: #fff;font-weight: bold;margin: 0 auto;line-height: 6vw;}
.bg_1 .slick5 .font .text-s{font-size: 4vw;color: #fff;font-weight: bold;margin: 0 auto;line-height: 6vw;}
.bg_1 .slick5 .font .text span{font-size: 8vw;color: #ffee7c;font-weight: bold;}
.bg_1 .slick5 .font .text-s span{font-size: 6.5vw;color: #ffee7c;font-weight: bold;}
.bg_1 .slick-dots li button:before{top:-8.5vw;}

.swiperbox{width: 100%;overflow: hidden;}
.mySwiper{width:100vw;margin: 1vw  auto;padding: 0 2vw;}
.swiper-pagination-bullet{margin-top: 0px;}
.swiper-wrapper{padding-bottom: 100px;margin-bottom: 100px;}
.bg_1 .slick5,.swiper-slide{width: 42vw;height: auto;}
}


/*--  2. 全站topx11  --*/
.bg_2 .bg_1200{margin-top: -50px;}
.bg_2 .titleC h2{ background: url("../images/bg-o.jpg");color: #fff;font-size: 50px;padding: 10px 70px 15px;font-weight:bold;border-radius: 0 0 50px 50px;letter-spacing: 1px;}
.bg_2 .titleC h2 span{ color: #ffee7c;font-size: 70px;}
.bg_2 .titleC{margin: 30px auto -70px; position: relative;top: -60px;letter-spacing: 1px;}
.bg_2 .titleC h2{font-family:"Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial;}
.bg_2 .bg_1200{background: url("../images/bg-y.jpg");margin-bottom: 20px;}
.bg_2 .half ul{padding: 0;background: transparent;}
.bg_2 .half{display: flex;}
.bg_2 .hightlight{margin: 0px auto;display: flex;align-items: flex-start;}
.bg_2 .hightlight li{height: auto;margin: 0;}
.bg_2 .scene-box:first-child{background: url("../images/bg-paper.jpg");height: 752px;margin-top: 27px;}
.bg_2 .scene-box:first-child .slick-dots li button{margin-top: 30px;}
.bg_2 .scene-box:first-child .slick-dots li button::before{margin-top: 40px;}
.bg_2 .hightlight2 .one-time ul.ot li:nth-child(3){top: 20px;width: 100%;text-align: center;left: 0;}
.bg_2 .hightlight2 .scene-box .sliderbg{height:auto;width:572px;margin: 0 auto;}
.bg_2 .hightlight ul li .font{background: #fff;}
.slick-dotted.slick-slider{margin-bottom: 0;}
.slick-slider .slick-track, .slick-slider .slick-list{height: auto;margin-bottom: 0px;}

.hightlight img{background: #fff;}

.bg_2 .hightlight .font h4{padding: 3px 6px;margin-bottom: 0;font-size: 1.2rem;background: url("../images/bg-b2.jpg");}
.bg_2 .hightlight .font p{padding: 3px 6px 3px;font-size: 0.92rem; line-height: 1.05rem;}
.bg_2 .hightlight .font .price{margin: 0 auto;padding: 0 10px 5px;font-size: 0.8rem; line-height: 1.2rem;}
.bg_2 .hightlight .font .price big{font-size: 2.2rem;font-family: "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial;font-weight:700;color: #ff6538;letter-spacing: -1px;}
.bg_2 .hightlight-inner{margin: 0 auto;}

.bg_2 .hightlight-inner li{width: 260px; margin: 7px;position: relative;}
.bg_2 .slick-dotted.slick-slider{margin-bottom: 0;}
.bg_2 .slick-dots li button:before{font-size: 40px;margin: 5px;color: #ff6538;}
.bg_2 .slick-dots li.slick-active button:before{color: #ff6538;}
.ribbon{text-align: center;}
.hightlight2 .one-time ul.ot li:nth-child(2) p.papa{font-size: 28px; font-weight: bold;line-height: 30px;}

/*--  調色  --*/
.hightlight2 .one-time ul.ot li:nth-child(3) span{color: #14596f;}
.hightlight2 .one-time ul.ot li:nth-child(2){background:  linear-gradient(#ff6d3c 0%, #fa4411 100%);display: none;}
.hightlight2 .one-time ul.ot li:nth-child(6){background: url("../images/bg-paper3.jpg");}
.hightlight2 .one-time ul.ot li:nth-child(6) p{color: #14596f;}
.hightlight2 .one-time ul.ot li:nth-child(4){width: 410px;background: url("../images/bg-b2.jpg");padding: 5px 10px;}
.hightlight2 .one-time ul.ot li:nth-child(4) span{line-height: 30px;background:none;padding: 0;}
.hightlight2 .one-time ul.ot li:nth-child(5){bottom: 0px;}
.hightlight2 .one-time ul.ot li:nth-child(5) span{color: #323232;font-size: 0.8rem; line-height: 1.2rem;}
.hightlight2 .one-time ul.ot li:nth-child(5) span big{font-size: 2.2rem;font-family: "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial;font-weight:700;color: #ff6538;letter-spacing: -1px;}

@media screen and ( max-width: 991px ){
.bg_2 .bg_1200{margin-top:2vw;}
.bg_2 .titleC{margin: 0px auto -14vw; position: relative;top: -8vw;letter-spacing: 0px;}
.bg_2 .titleC h2{font-size: 2rem;line-height: 2.2rem; padding: 2vw 5vw 2vw;border-radius: 0 0 20px 20px;}
.bg_2 .hightlight-inner li,.hightlight2 ul.scene-box li{width: 46vw; margin: 0vw;}

.bg_2 .titleC h2 span{font-size: 2.2rem;}

.bg_2 .hightlight2 .one-time ul.ot li:nth-child(1) img{width: 60vw; height: 60vw; margin: 2vw auto 0;}
.bg_2 .hightlight2 ul.scene-box:nth-child(1) li:nth-child(1){width:94vw;}
.bg_2 .scene-box:first-child{height: auto;width: 94vw;margin:5vw auto 0;}
.bg_2 .hightlight2 .scene-box:nth-child(1){padding: 0;}
.bg_2 .hightlight2 .scene-box:nth-child(1) .sliderbg{height:auto;width:100%;margin: 0 auto;padding: 0;}
.bg_2 .hightlight2 .one-time ul.ot li:nth-child(3){top:0px;}
.bg_2 .hightlight2 .one-time ul.ot li:nth-child(4){width: 90vw; margin: 0 auto;padding: 0;}
.bg_2 .slider{padding: 0;}
.hightlight2.half .one-time ul.ot, .hightlight2 .scene-box .sliderbg{width: 94vw!important;}

.bg_2 .hightlight2 .one-time ul.ot li:nth-child(2){top: 3vw;}
.bg_2 .hightlight2 .one-time ul.ot li:nth-child(4){padding: 3px 0;}
.bg_2 .hightlight2 .one-time ul.ot li:nth-child(3) {margin: 0px auto 5px;height: auto;}
.bg_2 .hightlight2 .one-time ul.ot li:nth-child(3) span{font-size: 1.4rem;line-height: 1.5rem;}
.bg_2 .hightlight2 .one-time ul.ot li:nth-child(4) span{font-size: 1.2rem;line-height: 1.3rem;}
.hightlight2 .one-time ul.ot li:nth-child(5){margin-top: 1vw;}
.bg_2 .scene-box:first-child .slick-dots li button::before{margin-top:1vw;}
.bg_2 .scene-box:first-child .slick-dots li button{margin-top: 3vw;}
.bg_2 .scene-box:nth-child(2) .slick-dots li button{margin-top:0vw;}


.bg_2 .half ul:nth-child(2){width: 100%;}
.bg_2 .half ul:nth-child(2) li{width: 100%;}
.bg_2 .half ul:nth-child(2) .slider ul{width: 100%;margin-bottom: -2vw;}
.bg_2 .half ul:nth-child(2) .slider ul li{margin:0 1vw;width: 45vw;}
.bg_2 .half ul:nth-child(2) .slider ul li img{width: 45vw; height: 45vw;}
.bg_2 .slick-dots li button:before{margin-top: -1vw;}

.hightlight2 .one-time ul.ot li:nth-child(2) p.papa{font-size: 5vw; font-weight: bold;line-height: 5vw;}
.bg_2 .hightlight .font .price big{font-size:1.8rem;}
.hightlight2 .one-time ul.ot li:nth-child(5) span big{font-size: 2rem;}
}


/*--  3. 活動快報  --*/
.bg_3 .titleC h2{ background: url("../images/bg-o.jpg");color: #fff;font-size: 50px;padding: 10px 70px 15px;font-weight:bold;border-radius: 0 0 50px 50px;letter-spacing: 1px;}
.bg_3 .titleC{margin: 30px auto -70px; position: relative;top: -60px;letter-spacing: 1px;}
.bg_3 .bg_1200{background: url("../images/bg-y.jpg");padding-bottom: 1px;margin-bottom: 10px;}
.bg_3 .collect_5x6 .h-row img{height: auto;}
.bg_3 .collect_5x6 .h-row li{padding: 0;}
.bg_3 .collect_5x6 .h-row li img{width: 100%;}
.bg_3 .slick-slider .slick-list{margin-bottom: 10px;}
.bg_3 .slick-dots li button:before{font-size: 40px;margin: 5px;color: #ff6538;}
.bg_3 .slick-dots{padding: 5px;}
.bg_3 .slick-dots li.slick-active button:before{color: #ff6538;}
.bg_3 .slick-dotted.slick-slider{margin-bottom: 10px;}


@media screen and ( max-width: 991px ){
.bg_3 .titleC{margin: 0px auto -14vw; position: relative;top: -8vw;letter-spacing: 0px;}
.bg_3 .titleC h2{font-size: 2rem;line-height: 2.2rem; padding: 2vw 5vw 2vw;border-radius: 0 0 20px 20px;}
.bg_3 .slick-slider .slick-list{margin-bottom:1vw;}
.bg_3 .slick-dotted.slick-slider{margin-bottom: 0px;}
.bg_3 .bg_1200{margin-bottom: -2vw;margin-top: -2vw;}
}


/*--  4. 館別暢銷榜 --*/

/* keywordA */
.keywordA { width: 1160px; margin: 5px auto;  }
.keywordA ul {display: flex; flex-wrap: wrap; justify-content: center;  }
.keywordA li {  text-align: center; overflow: hidden;margin: 5px;padding: 8px 20px; border: solid 0px; background:url("../images/bg-paper.jpg");box-shadow: 0px 0px 0px #fff;border-radius: 50px;}
.keywordA li:hover {background: url("../images/bg-b4.jpg");color: #018799;}
.keywordA a { color: #14596f; font-size: 1.4rem; }
.keywordA a:hover {color: #018799; }
.keywordA a span { color: #14596f;}

	@media screen and ( max-width: 991px ){
		.keywordA { margin:auto; padding: 0;width: 100%;min-width: 100%; }
		.keywordA ul { overflow: hidden; margin: -1vw auto 1vw; }
		.keywordA li { margin: 1vw; padding: 1vw 3vw;line-height: 1.2rem; }
		.keywordA a { font-size: 1rem; line-height: 1rem}
	}

.more_forrank{width: 500px; background:url("../images/bg-y.jpg"); font-size: 2rem; margin: 13px auto 6px; padding: 10px 0; text-align: center; color: #14596f;font-weight:500; border-radius: 50px;transition: 0.5s all;}
.more_forrank:hover{transform: scale(0.93);color: #ff6538;}

.bg_4 .titleC h2{ background: url("../images/bg-o.jpg");color: #fff;font-size: 50px;padding: 10px 70px 15px;font-weight:bold;border-radius: 0 0 50px 50px;letter-spacing: 1px;}
.bg_4 .titleC{margin: 0px auto -80px; position: relative;top: -80px;letter-spacing: 1px;}

#rank1.titleC h2 p{font-size: 14px;margin: 0 auto;letter-spacing: 0;}

/*--書--*/
.bg_4 .bg_1200{background:url("../images/bg-b1.jpg");margin: 20px auto;padding: 15px 0 10px;margin-top: 50px;}
.bg_4 .bg_1200:nth-child(odd){background: url("../images/bg-b2.jpg");}
.baseline{margin: 0 auto;}
.baseline li{padding-bottom: 0px;margin: 10px 6px;background: #fff;}
.baseline li .font h4{color: #ff6538;padding: 6px 6px 0;margin-bottom: 0;font-size: 1.2rem;margin: 0 auto;}
.baseline_3p ul li:nth-child(7n+1),.baseline_3p ul li:nth-child(7n+2),.baseline_3p ul li:nth-child(7n+3){width: 351px;}
.baseline_3p ul li:nth-child(7n+1) img,.baseline_3p ul li:nth-child(7n+2) img,.baseline_3p ul li:nth-child(7n+3) img{width: 280px;}
.baseline ul li .font .price:before{margin:5px 0;}
.baseline_3p ul li:nth-child(7n+1) .font .price:before,.baseline_3p ul li:nth-child(7n+2) .font .price:before,.baseline_3p ul li:nth-child(7n+3) .font .price:before{width: 320px;}
.baseline .font p{padding: 3px 6px 0px;font-size: 0.92rem; line-height: 1.05rem;}
.baseline .font .price{margin: 0;padding: 0 10px 5px;font-size: 0.8rem; line-height: 1.2rem;}
.baseline .font .price big{font-size: 2.4rem;font-family:"Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial;font-weight:700;color: #ff6538;letter-spacing: -1px;}


/*--非書--*/
.round_3p .font h4{width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;top: 20px;background: url("../images/bg-o.jpg");}
.round_3p .font h5{color: #ffeb6d;padding: 6px 6px 3px;margin-bottom: 0;font-size: 1.2rem;}
.round_3p .font p{padding: 3px 6px 0px;font-size: 0.92rem; line-height: 1.05rem;color: #fff;}
.round_3p .font .price{margin: 0;padding: 0 10px 5px;font-size: 0.8rem; line-height: 1.2rem;color: #fff;}
.round_3p .font .price big{font-size: 2.4rem;font-family:"Century Gothic", "Microsoft JhengHei", system-ui, Helvetica, Arial;font-weight:700;color: #ffeb6d;letter-spacing: -1px;}
.round_3p{margin: 0 auto -15px;}

/*--頁籤--*/
#tab-five .baseline_3p ul li{width: 351px; margin-bottom: 3px;}

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

.bg_4 .bg_1200{margin: 5vw auto;}

.more_forrank{width:70%; font-size: 1.6rem; margin: 1vw auto 0vw; padding: 1vw 0; border-radius: 50px;}
.bg_4 .titleC{margin: 0px auto -14vw; position: relative;top: -12vw;letter-spacing: 0px;}
.bg_4 .titleC h2{font-size: 2rem;line-height: 2.2rem; padding: 2vw 5vw 2vw;border-radius: 0 0 20px 20px;}

.baseline li{padding-bottom: 0px;margin: 1vw 1vw 2vw;background: #fff;}
.baseline_3p ul li:nth-child(7n+1){width: 94vw;display: flex;padding: 2vw;margin-top: 2vw;}
.baseline_3p ul li:nth-child(7n+1) img{width: 40vw;}
.baseline_3p ul li:nth-child(7n+1) h4{width: 40vw;}
.baseline_3p ul li:nth-child(7n+1) .font{width: 50vw;}
.baseline_3p ul li:nth-child(7n+2),.baseline_3p ul li:nth-child(7n+3){width: 46vw;}
.baseline_3p ul li:nth-child(7n+1) .font .price:before{width: 42vw;}
.baseline_3p ul li:nth-child(7n+2) .font .price:before,.baseline_3p ul li:nth-child(7n+3) .font .price:before{width: 42vw;}
.baseline_3p ul li:nth-child(7n+2) img,.baseline_3p ul li:nth-child(7n+3) img{width: 40vw}
.baseline li h4{padding: 5px 0 0;font-size: 1.2rem;}
.baseline .font{padding: 0px 0 1vw;}
.baseline .font p{padding: 3px 6px 0px;font-size: 0.92rem; line-height: 1.05rem;}
.baseline .font .price{margin: 0;padding: 0 1vw 0px;font-size: 0.8rem; line-height: 1.2rem;}
.baseline .font .price big{font-size: 2rem;font-weight:500;}

.round_3p{margin: -17vw auto 1vw;}
.round_3p li{margin: 5vw auto 1vw;}
.round_3p li:nth-child(even) img{order: 0;}
.round_3p li:nth-child(even) h4{left: 0;right: auto;}
.round_3p li:nth-child(3n+1){width: 94vw;background:url("../images/bg-paper.jpg"); border-radius: 47vw;}
.round_3p li:nth-child(3n+1) .font{width: 50vw; padding:0 3vw;}
.round_3p li:nth-child(3n+1) .font h5{color: #ff6538;padding:5px 0;}
.round_3p li:nth-child(3n+1) .font p{color:#323232;padding:0px 0 5px;}
.round_3p li:nth-child(3n+1) .font .price{color:#323232;padding: 0;}
.round_3p li:nth-child(3n+1) .font .price big{color:#ff6538;}
.round_3p li:nth-child(3n+2) .font,.round_3p li:nth-child(3n) .font{text-align: center;}
.round_3p li:nth-child(3n+2),.round_3p li:nth-child(3n){width: 46vw;height:auto;margin: 1vw;}
.round_3p li:nth-child(3n+2) a,.round_3p li:nth-child(3n) a{flex-wrap: wrap;}
.round_3p li:nth-child(3n+1) img{width: 44vw;height: 44vw;}
.round_3p li:nth-child(3n+2) img,.round_3p li:nth-child(3n) img{width: 44vw;height: 44vw;}
.round_3p li:nth-child(3n+2) .font{width: 100%;}
.round_3p img{margin: 0 auto;}
.round_3p .font h4{width: 14vw;height: 14vw;}
.round_3p .font .price big{font-size: 2rem;font-weight:500;}

#tab-five .baseline_3p ul li{width: 46vw; margin-bottom: 1.5vw;}
#tab-five .baseline_3p ul li:nth-child(7n+1){margin-top: 1vw;width: 46vw;justify-content: center;align-items: center;padding: 3vw 3vw 0;display: block;}
}

/*--  6.   --*/

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


/*--  7.   --*/

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


/*--  8.   --*/

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


/*--  9.   --*/

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


/*--  10.   --*/

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



/*頁籤公版*/
#tab-five{ background:url("../images/bg-b2.jpg")repeat; padding-bottom: 10px;border-radius:0;}
#tab-five{ width:1200px;height: 100%; margin: 55px auto 20px; }
#tab-five > ul{  margin:0;list-style:none;display: flex;justify-content:center;margin-bottom: 30px;}
.tab-title{list-style:none;}
#tab-five > ul > li{ display:inline-block; vertical-align:top; width:450px; margin:-10px 8px -1px 0 ; border:0px solid #fff; height:auto;list-style:none; box-sizing:border-box; text-align: center; font-size: 28px; border-radius: 0; }
#tab-five > ul > li:nth-last-child(1){ margin-right: 0;}
#tab-five >  ul > li a{ color:#fff; text-decoration:none; font-family:'FakePearl-Regular';font-size: 50px;font-weight:bold;border-radius: 0 0 50px 50px;letter-spacing: 1px; background:url("../images/bg-b1.jpg");padding: 3px 55px 3px;}
#tab-five > ul > li.active{ border-bottom:none;}
#tab-five > ul > li.active a{ color: #fff; background:url("../images/bg-o.jpg");}
#tab-five > .tab-inner{ clear:both; color:#fff; border:0px #fff solid;border-radius: 0px 0px 20px 20px;}
#tab01 , #tab02, #tab03, #tab04, #tab05, #tab06, #tab07, #tab08, #tab09 {
    width: 100%;
    height: 100%;
padding-top: 100px;margin-top: -100px;}
.tab-inner{ 
	padding:0px; height:50px;
    width: 1160px;
}
#tab-five2{background:url("../images/bg-lo2.jpg")repeat; padding-bottom: 20px;border-radius:0 0 50px 50px;}
#tab-five2{ width:1100px;height: 100%; margin: 120px auto 20px;}
#tab-five2 > ul{ display:block; margin:0;list-style:none;}
.tab-title{list-style:none;}
#tab-five2 > ul > li{ display:inline-block; vertical-align:top; width: 266px; margin:-60px 8px -1px 0 ; border:0px solid #fff; height:60px; line-height:60px; background:url("../images/bg.jpg")repeat;padding:0 30px;list-style:none; box-sizing:border-box; text-align: center; font-size: 28px; border-radius: 20px 20px 0 0; }
#tab-five2 > ul > li:nth-last-child(1){ margin-right: 0;}
#tab-five2 >  ul > li a{ color:#774017; text-decoration:none; font-family:'FakePearl-Regular';}
#tab-five2 > ul > li.active{ border-bottom:none; background:url("../images/bg-r.jpg")repeat;}
#tab-five2 > ul > li.active a{ color: #fff;}
#tab-five2 > .tab-inner{ clear:both; color:#000; border:0px #fff solid;background: url("../images/bg_pink.jpg"); border-radius: 0px 0px 20px 20px;}
#tab01 , #tab02, #tab03, #tab04, #tab05, #tab06, #tab07, #tab08, #tab09 {
    width: 100%;
    height: 100%;
padding-top: 8px;margin-top: -16px;padding-bottom: 1px;}
.tab-inner{ 
	padding:0px; height:50px;
    width: 1160px;
}

@media screen and ( max-width: 991px ){
	
	#tab-five{ width:100%; margin: 5vw auto 2vw; }
	
	#tab-five > .tab-inner {
		width:98vw;
		margin:0 auto;
    	clear: both;
   	 	color: #fff;
    	border: 0px #BCBCBC solid;
		padding: 0;
}
	#tab01,#tab02,#tab03 {
   		width: 100%;
}
	#tab-five > ul > li.active {
    	border-bottom: none;
    	background: url("../images/bg-lb.jpg")repeat;;
}
	#tab-five > ul > li {
    	display: inline-block;
    	vertical-align: top;
		width: 45vw;
    	border: 0px solid #BCBCBC;
    	height: 8vw;
    	line-height:5vw;
    	padding: 1vw 0vw 0;
    	list-style: none;
    	box-sizing: border-box;
		margin:-1vw 0 -4vw 0 ;
		font-size: 1rem;
}
		#tab-five > ul > li a{font-size: 1.8rem;line-height: 2.2rem; padding: 1vw 3vw 1vw;border-radius: 0 0 20px 20px;}
		
	#tab-five2{ width:100%; margin: 5vw auto 2vw; }
	
	#tab-five2 > .tab-inner {
		width:98vw;
		margin:0 auto;
    	clear: both;
   	 	color: #fff;
    	border: 0px #BCBCBC solid;
		padding: 0;
}
	#tab05,#tab06,#tab07 {
   		width: 100%;
}
	#tab-five2 > ul > li.active {
    	border-bottom: none;
    	background: url("../images/bg-r.jpg")repeat;;
}
	#tab-five2 > ul > li {
    	display: inline-block;
    	vertical-align: top;
		width: 24.5vw;
    	border: 0px solid #BCBCBC;
    	height: 12vw;
    	line-height: 5vw;
    	padding: 1vw 4vw 0;
    	list-style: none;
    	box-sizing: border-box;
		margin:0 -1px -1px 0 ;
		font-size: 1rem;
}}










/*--永久改動--*/
.hightlight img,.toptitle img,.circle img,.published img,.hightlight_5p img,.circle_5p img,.scene img{object-fit: contain;}

.hightlight_5p ul{align-items: flex-end;}
.special_5p_1 .hightlight_5p ul li:first-child img{width: 240px;height: 240px;}
.special_5p_1 .hightlight_5p ul li:first-child{height: auto;width: 240px;}
.special_5p_1 .hightlight_5p ul li{height: auto;}
.special_5p_1 .title_AA h2{font-size: 2.4rem;width: 876px;padding:5px 0px;background: #efefef33;top: 72px;left: 288px;font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;display: flex;justify-content: center;align-items: center;}
@media screen and ( max-width: 991px ){
		.rectangle_3p ul li:nth-child(3n+1) {width: 94vw; padding: 3vw; margin: 1vw 3vw; }
		.rectangle_3p ul li:nth-child(3n+1) a { flex-wrap: nowrap; }
		.rectangle_3p ul li:nth-child(3n+1).font {padding: 1vw 0vw 1vw 3vw;}

		
		}


/*--  nav 選單 固定側邊--*/
@media only screen  and (min-width: 992px)  {
.menustyle2{width: 120px;display: flex;flex-wrap: wrap;background:#000; z-index:999;height:auto;position: fixed; top: 200px; right: 10px;border-radius: 10px;}
.menustyle2 ul{width: 120px;margin: 0 auto;display: flex;flex-direction: column;padding: 5px;flex-wrap: wrap;}
.menustyle2 ul li{width:100%;display: flex;justify-content: center;align-items: center;border-bottom: .5px solid #ffffff;}
.menustyle2 ul li:last-child{border-bottom: 0px solid #ffffff;}
.menustyle2 ul li a{text-align: center;margin: 0 auto;text-decoration: none;font-size:18px;color:#ffffff;	font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;letter-spacing: 1px;font-weight: 500;width: 100%; height: 100%; display: flex;justify-content: center; align-items: center;padding: 15px 10px;}
.menustyle2 ul li:hover,#TopMenu ul li a:hover{ background:#666;transform: scale(1);color: #fff!important;}
.menustyle2 ul .active{color: #fff!important; background:#444;width: 100%; height: 100%;}
}
@media screen and ( max-width: 991px ){
.menustyle2{width: 100%; z-index:999;padding:0px 0; display: block;background:#000;z-index: 1000;}
.menustyle2 ul{width: 100%;margin: 0 auto;display: flex;flex-wrap: wrap;z-index: 999;}
.menustyle2 ul li{width:20%;font-size:20px;color:#ffffff;display: flex;justify-content: center;align-items: center;border-right: .5px solid #ffffff;box-sizing: border-box;}
.menustyle2 ul li a{font-size:1.1rem;letter-spacing: 0px;font-weight:500;color:#ffffff;font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;padding: 0;box-sizing: border-box;padding: 5px 0;}
.menustyle2 ul .active{color: #fffa96!important;background:none;width: 100%;justify-content: center;align-items: center;text-align: center}
.menustyle2 ul li a:hover{color: #fffa96!important;width: 100%;justify-content: center;align-items: center;text-align: center}
.sticky {position: fixed;top: 0;}
}
/*--  nav 選單 固定側邊--*/


/**--  下拉選單  --**/
@media screen and ( min-width: 992px ){
.navbar-toggler,#navbarNav{display: none!important;}
.bg-light{--bs-bg-opacity: none;}
}
@media screen and ( max-width: 991px ){
	.bg-light{background:url("../images/bg-b2.jpg"); color:#fff; width:100%; margin:0 auto;height: 40px;padding: 0;--bs-bg-opacity:(1);z-index: 999;position: fixed;top: 0;}
	.bg-light h3{text-align: left; margin:10px 0 0 4vw;color: #fff;font-size:16px; display: block;width: 100%;}
	.navbar .container-fluid{justify-content: flex-start;padding: 0;height: 40px;}
	.navbar-light .navbar-toggler{border: 0px;box-shadow:none;}
	.navbar-light .navbar-toggler{border:0px;height: 40px;display: flex;align-items: center;justify-content: flex-end;position:absolute; right: 0; z-index: 1001;}
	.navbar-toggler span{ color:#fff; text-align:center; margin:0 auto; width:100%;font-size: 16px;}
	.navbar-toggler span i{padding: 0 2vw;}
	.navbar-collapse{ background:url("../images/bg-b2.jpg");width: 100%;z-index:1000;}
	.navbar-expand-lg .navbar-nav{display: flex; flex-direction:row; width:100%;justify-content: flex-start;padding: 20px 2vw 10px;}
	.navbar-nav{width:90vw;display:flex; flex-wrap:wrap; flex-direction:row; margin:0 auto; padding:1vw;}
	.navbar-nav li{ width:30vw;display:flex; flex-wrap:wrap; justify-content:center; align-items:center; border-radius:30px; margin:1vw 1vw; background:#fff;}
	.navbar-light .navbar-nav .nav-link{ color:#14596f;}
	 .navbar-light .navbar-nav .nav-link.active{ color: #ff6538!important;}
	 .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link,.navbar-light .navbar-nav .nav-link:hover{ color: #ff6538!important;background:none;}
	}

/**--  下拉選單  --**/
@media screen and ( max-width: 991px ){
#dropdown {transition: background-color 1s, opacity 1s, visibility 1s;opacity: 0;visibility: hidden;z-index: 1000;}
#dropdown.show {opacity: 1;visibility: visible;} 
}

/*--  nav 選單 滑動置頂--*/
@media screen and ( min-width: 992px ){
.scrollmenu{width: 120px;display: flex;flex-wrap: wrap;background:url("../images/bg-b2.jpg"); z-index:1000;margin: 0 auto;position: fixed;top: 100px; right: 10px;padding: 5px 0;border-radius: 15px 15px 0 0;}
.scrollmenu li{width:90%;display: flex;justify-content: center;align-items: center;margin: 0 auto;padding:0;border-bottom: 0.5px #ffffff77 solid;}
.scrollmenu li:last-child{border-bottom: 0px #fff solid;}
.scrollmenu li a{text-align: center;margin: 0 auto;text-decoration: none;font-size:16px;color:#fff;	font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial;letter-spacing: 1px;font-weight: 500;width: 100%;padding: 11px 0;}
.scrollmenu li a:hover{color: #ffe966!important;}
.scrollmenu .active{}
.scrollmenu .active{color: #ffe966!important;background:#666;}}
.scrollmenu2{top: 183px;text-align: center;justify-content: center;padding: 0px 0 10px;border-radius:0 0 15px 15px;}
.scrollmenu2 h3{font-size: 16px;background:url("../images/bg-o.jpg");width: 100%;padding: 5px 0;color: #fff; }
.nav-link:focus, .nav-link:hover{color: #ffee7c!important;}

.scrollmenu2 li{width: 50%;border-right: 0.5px #ffffff77 solid;}
.scrollmenu2 li:nth-child(2),.scrollmenu2 li:nth-child(6){width: 100%;}
.scrollmenu2 li span{display: block;}
.scrollmenu2 li:nth-child(1),.scrollmenu2 li:nth-child(3),.scrollmenu2 li:nth-child(4),.scrollmenu2 li:nth-child(5),.scrollmenu2 li:nth-child(13),.scrollmenu2 li:nth-child(14){border-bottom: 0px;}
.scrollmenu2 li:nth-child(1),.scrollmenu2 li:nth-child(2),.scrollmenu2 li:nth-child(5),.scrollmenu2 li:nth-child(6),.scrollmenu2 li:nth-child(8),.scrollmenu2 li:nth-child(10),.scrollmenu2 li:nth-child(12),.scrollmenu2 li:nth-child(14){border-right: 0px;}
@media screen and ( max-width: 991px ){

.scrollmenu::-webkit-scrollbar{display: none;}
.scrollmenu{z-index:999;padding:0px 0;margin-right: 10%;display: flex;height: 30px;flex-direction: row;flex-wrap: wrap;position: absolute;overflow-x: auto;justify-content: center;
white-space: nowrap;webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;}
.scrollmenu2{display: none;}
.scrollmenu li{font-size:20px;color:#333;display: flex;justify-content: center;align-items: center;width: auto;background:url("../images/bg-b1.jpg");width: 30vw; margin:0 1vw;border-radius: 15px;padding: 0 10px;}
.scrollmenu li:last-child{border-right: 0px solid #333;}
.scrollmenu li a{font-size:16px;letter-spacing: 0px;font-weight:500;padding: 0 15px;color:#fff;display: flex;justify-content: center;align-items: center;}
.scrollmenu .active{color: #ffee7c!important;}
.scrollmenu li a:hover,.scrollmenu li a:focus{color: #ffee7c!important;height: 30px;width:100%;}

}
/*--  nav 選單 滑動置頂--*/



/*--  版身煙火 --*/
#canvas {display: inline-block;opacity:0.3;width: 100%;height:100vh;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color 1s, opacity 1s, visibility 1s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;position:fixed;min-width: 1200px;pointer-events: none;z-index: 998;}
#canvas.show {opacity: 0.7;visibility: visible;}  
.canvas01{position: absolute;top:100px;left: -200px;animation-name:ani01; animation-duration: 4s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
.canvas01 img{animation-name:circle;animation-duration: 4s;animation-timing-function:ease-in;animation-iteration-count:infinite;}
.canvas02{position: absolute;top:600px;right: -220px;animation-name:ani01; animation-duration: 4.5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -5.5s;}
.canvas02 img{animation-name:circle;animation-duration: 4.5s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -5.5s;}
.canvas03{position: absolute;top:600px;left: -230px;animation-name:ani01; animation-duration: 3.6s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -3s;}
.canvas03 img{animation-name:circle;animation-duration: 3.6s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -3s;}
.canvas04{position: absolute;top:380px;right: -280px;animation-name:ani01; animation-duration: 4.5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -8.5s;}
.canvas04 img{animation-name:circle;animation-duration: 4.5s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -8.5s;}
.canvas05{position: absolute;top:310px;left: -155px;animation-name:ani01; animation-duration: 6.3s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -2.5s;}
.canvas05 img{animation-name:circle;animation-duration: 6.3s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -2.5s;}
.canvas06{position: absolute;top:130px;right: -270px;animation-name:ani01; animation-duration: 5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -4.5s;}
.canvas06 img{animation-name:circle;animation-duration: 5s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-delay: -4.5s;}
@media screen and ( max-width: 991px ){          
#canvas {display: none;}   }   


@keyframes ani01{
0%{ transform:translateY(500px);} 	
30%{ transform:translateY(0px);} 
70%{ transform:translateY(0px);} 	
	100%{ transform:translateY(0px);} 
}

@keyframes circle{
	0% {clip-path: circle(1%); }
	15% { clip-path: circle(1%); transform: scale(1); }
	70% { clip-path: circle(100%); opacity: 1;}
	80% { transform: scale(1.3);opacity: 0;}
  100% { clip-path: circle(100%);opacity: 0; }
}



 /*--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: #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{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:20px;background-position:50% 30%;}#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;}          }