@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-img.png") top center fixed,url("../images/bg.jpg") top center fixed;}


header{background: url("../images/kv_01.jpg")top center no-repeat;min-width: 1200px;}
/* 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.jpg")repeat;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; }

.title01{ position: absolute;top:58px; left: 633px;z-index: 90;}
.title02{ position: absolute;top:188px; left: 685px;z-index: 90;}
.title03{ position: absolute;top:141px; left: 798px;z-index: 90;}
.title04{ position: absolute;top:186px; left: 962px;z-index: 90;}
.title05{ position: absolute;top:195px; left: 1076px;z-index: 90;}
.title06{ position: absolute;top:527px; left: 62px;z-index: 90;}



.titled01{ position: absolute;top:63px; left: 69px;z-index: 90;}
.titled01 img{animation-name:ani01; animation-duration:1.5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: 0s;animation-direction: alternate;transform-origin:bottom center;}
.titled02{ position: absolute;top:329px; left: 880px;z-index: 90;}
.titled02 img{animation-name:ani01; animation-duration:1.8s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.5s;animation-direction: alternate;transform-origin:bottom center;}
.titled03{ position: absolute;top:395px; left: 776px;z-index: 90;}
.titled03 img{animation-name:ani02; animation-duration:1.5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: 0s;animation-direction: alternate;transform-origin:bottom center;}
.titled04{ position: absolute;top:376px; left: -255px;z-index: 90;}
.titled04 img{animation-name:ani01; animation-duration:1s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.3s;animation-direction: alternate;transform-origin:bottom center;}
.titled05{ position: absolute;top:434px; left: 1256px;z-index: 90;}
.titled05 img{animation-name:ani01; animation-duration:1s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1s;animation-direction: alternate;transform-origin:bottom center;}
.titled06{ position: absolute;top:556px; left: 186px;z-index: 90;}

@keyframes ani01{
0%{transform:rotate(-7deg);}
100%{transform:rotate(7deg);}
}
@keyframes ani02{
0%{transform:rotate(-5deg);}
100%{transform:rotate(5deg);}
}

.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: 2vw 0;}
	.bg_1200{ width:100%; min-width:100%; margin:0 auto;}
	.titleC{ margin: 0px; padding: 5vw 2vw 2vw;}
}

.bg_1{background: url("../images/bg1-t.png")top center no-repeat;}
.bg_1 .bg_1200{background:url("../images/bg-c.jpg")repeat;padding: 1px 0; margin-top: 50px;border-radius: 50px;}
.bg_1 .hightlight_5p .font h4{background:url("../images/bg-r.jpg")repeat; }
.titleC h2{display: none;}
.bg_1 .hightlight_5p{margin-bottom: 30px;}

.bg_3{background: url("../images/bg_3.png")bottom center no-repeat;}
.bg_4{background: url("../images/bg_4t.png")top center no-repeat;}
.bg_6{background: url("../images/bg_6.png")bottom center no-repeat;}
.bg_7{background: url("../images/bg_7.png")bottom center no-repeat;}
.bg_8{background: url("../images/bg_8t.png")top center no-repeat; padding-top: 50px;}

.recommend_2p .font h4{color:#167d84; border-bottom-color: #167d84;}

@media screen and ( max-width: 991px ){
	.bg_1,.bg_4,.bg_6{background:none;}
	.bg_3,.bg_5,.bg_7{background: url("../images/bg-y2.jpg")repeat;}
	.bg_8{background: url("../images/bg-c.jpg")repeat; padding-top: 1vw;}
}

.titleC h2 big{margin: 0 -30px;}
.bg_1 .titleC{position: relative;top: 0px;margin-left: 290px; padding: 20px 0 10px;}
.bg_2 .titleC{padding: 70px 0 0px;}
.hightlight_5p{margin-top: -60px;}
.hightlight_5p ul{ align-items: flex-end;}
.hightlight_5p li{width: 200px;display: flex; align-items: flex-end;}
.hightlight_5p li:nth-child(5n+1){width: 280px;}
.hightlight_5p li:nth-child(5n+1) img{width: 280px;height: 350px;}
.hightlight_5p img{object-fit: contain;padding: 8px;width: 200px; height: 270px;}
.hightlight_5p .font h4{margin-bottom: 0;}
.hightlight_5p .font p{padding: 5px 10px;}

@media screen and ( max-width: 991px ){
	.bg_1 .titleC{position: relative;top: 0px;margin-left: 0px; padding: 2vw 0 ;}
	.bg_1 .bg_1200{margin-top: 1vw;border-radius: 30px;}
	.bg_2 .titleC{padding: 2vw 0;}
}


@media screen and ( max-width: 991px ){
.hightlight_5p{margin-top: 0;}
.hightlight_5p ul{ align-items: stretch;}
.hightlight_5p li{width:46vw;display: flex; align-items: stretch;}
.hightlight_5p li:nth-child(5n+1){width: 90vw; flex-wrap: wrap;}
.hightlight_5p ul li:nth-child(5n+1) a{ flex-wrap: wrap;}
.hightlight_5p li:nth-child(5n+1) img{width:80vw; height: 80vw;margin: 0 auto;}
.hightlight_5p img{object-fit: contain;padding: 8px;width:46vw; height:46vw;}
.hightlight_5p .font h4{margin-bottom: 0;}
.hightlight_5p .font p{padding: 1vw 10px;}	
	.hightlight_5p .font{margin-bottom: 0vw;}
	.titleC h2 big{margin: 0 -20px;}
	.hightlight_5p{margin-top: 0px;}
	
}




.recommend_2p{margin: 20px auto 10px;}
.recommend_2p li{width: 900px; background: #fff;position: relative;margin: 10px auto;border-radius: 30px;}
.recommend_2p li .word{width: 280px; max-width: 280px; max-height:280px; object-fit: contain;padding: 10px;}
.recommend_2p li .product{max-width: 220px; max-height:280px;position: relative;padding: 8px;right: -330px;}
.recommend_2p .font{position:relative;left: -220px;margin: auto 0;}
.recommend_2p li:nth-child(odd){left: 110px;}
.recommend_2p li:nth-child(even){right: 110px;}
.bg_4 .recommend_2p li:nth-child(1){display: none;}
.recommend_2p .font h4{font-size:  1.8rem;}

.bg_2 .recommend_2p li:first-child{margin-top: -30px;}

.banner{width: 1160px;padding: 0;margin: 0 auto;}
.banner img{width: 556px;border-radius: 30px;}
.banner li{margin: 4px 4px}

.bg_8 .bg_1200{margin: 20px auto;}


@media screen and ( max-width: 991px ){
	.bg_2 .recommend_2p li:first-child{margin-top: 0px;}
.recommend_2p{margin: 2vw auto 1vw;}
.recommend_2p li{width:94vw; background: #fff;position: relative;margin: 10px auto;}
.recommend_2p li .word{width: 36vw; max-width:36vw; max-height:50vw; object-fit: contain;padding: 10px;}
.recommend_2p li .product{max-width:50vw; max-height:50vw;position: relative;padding: 8px;right: 0;}
.recommend_2p .font{position:relative;left: 0;margin: auto 0;padding: 1vw 3vw;}
.recommend_2p li:nth-child(odd){left:0;}
.recommend_2p li:nth-child(even){right:0;}
.bg_4 .recommend_2p li:nth-child(1){display: none;}
.recommend_2p .font h4{font-size:  1.8rem;}
	
.banner{width:100%;padding: 0;margin: 0 auto;}
.banner img{width: 100%;}
.banner li{margin: 4px 4px}	
	.titleC img{width: 100%;}
	.recommend_2p .font p{text-align: center;}
}


.item{max-width: 1200px; margin: 0 auto; height: auto;z-index: 92;position: relative;}
.daruma01{ position: absolute;top:320px; left: 110px;z-index: 90;animation-name:ani02; animation-duration:1.5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: 0s;animation-direction: alternate;transform-origin:bottom center;width: 170px;height: 170px;}
.daruma img{width: 100%;}
.daruma02{ position: absolute;top:726px; left: 930px;z-index: 90;animation-name:ani01; animation-duration:1.7s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1s;animation-direction: alternate;transform-origin:bottom center;width: 110px;height: 110px;}

.daruma03{ position: absolute;top:650px; left: 1010px;z-index: 90;animation-name:ani02; animation-duration:1.2s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.4s;animation-direction: alternate;transform-origin:bottom center;width: 180px;height: 180px;}

.daruma04{ position: absolute;top:120px; left: 34px;z-index: 90;animation-name:ani02; animation-duration:1.9s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1s;animation-direction: alternate;transform-origin:bottom center;width: 240px;height: 240px;}

.daruma05{ position: absolute;top:520px; left: 970px;z-index: 90;animation-name:ani02; animation-duration:1.2s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.4s;animation-direction: alternate;transform-origin:bottom center;width: 160px;height: 160px;}

.daruma06{ position: absolute;top:146px; left: 966px;z-index: 90;animation-name:ani01; animation-duration:1.6s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1s;animation-direction: alternate;transform-origin:bottom center;width: 200px;height: 200px;}

.daruma07{ position: absolute;top:110px; left: -30px;z-index: 90;animation-name:ani02; animation-duration:1.2s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.4s;animation-direction: alternate;transform-origin:bottom center;width: 200px;height: 200px;}

.daruma08{ position: absolute;top:190px; left: 150px;z-index: 90;animation-name:ani01; animation-duration:1.6s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1s;animation-direction: alternate;transform-origin:bottom center;width: 130px;height: 130px;}

.daruma09{ position: absolute;top:480px; left: 1050px;z-index: 90;animation-name:ani02; animation-duration:1.4s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.3s;animation-direction: alternate;transform-origin:bottom center;width: 180px;height: 180px;}

.daruma10{ position: absolute;top:566px; left: 966px;z-index: 90;animation-name:ani01; animation-duration:1s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.8s;animation-direction: alternate;transform-origin:bottom center;width: 100px;height: 100px;}

.daruma11{ position: absolute;top:154px; left: -4px;z-index: 90;animation-name:ani02; animation-duration:1.5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -2s;animation-direction: alternate;transform-origin:bottom center;width: 170px;height: 170px;}

.daruma12{ position: absolute;top:200px; left: 150px;z-index: 90;animation-name:ani01; animation-duration:1.4s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.3s;animation-direction: alternate;transform-origin:bottom center;width: 120px;height: 120px;}

.daruma13{ position: absolute;top:464px; left: 936px;z-index: 90;animation-name:ani02; animation-duration:1s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -1.8s;animation-direction: alternate;transform-origin:bottom center;width: 190px;height: 190px;}

.daruma14{ position: absolute;top:827px; left: 86px;z-index: 90;animation-name:ani01; animation-duration:1.5s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;animation-delay: -2s;animation-direction: alternate;transform-origin:bottom center;width: 200px;height: 200px;}


/*--永久改動--*/
@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; }}

#srcollnav{ background:url("../images/bg-y1.jpg")repeat; width:100%; height:70px; z-index:98;}
nav .scrollcontainer {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 5px;
}
nav .scrollcontainer ul li {
  display: inline-block;width:290px; padding:0px; margin:0 2px; background:url("../images/bg-r.jpg")repeat; border-radius:40px; height:50px;
}
nav .scrollcontainer ul li a {
  display: inline-block;
  text-decoration: none;
  padding: 0px;width:100%;
 font-size:24px; text-align:center; vertical-align:middle; line-height:50px; color:#fff; border-radius:40px; letter-spacing: 1px;
}

nav .scrollcontainer ul li a:hover{  background:url("../images/bg-c.jpg")repeat;color:#ffe420;}
nav .scrollcontainer ul li.active {
   background:url("../images/bg-y.jpg")repeat;color:#fff;
  transition: 0.3s all;
}
nav .scrollcontainer ul li.active a {
  color:#ffe420;  background:url("../images/bg-y.jpg")repeat;
}

 .sticky {
    position: fixed;
    top: 0;
    width: 100%;
	z-index:999;
  }
  
  .sticky + .container {
    padding-top:0px;
  }
  	@media screen and ( max-width: 991px ){
		.sticky + .container { padding-top:0px;}
		#srcollnav{ display:none;}
	}
	
  	@media screen and ( max-width: 991px ) {
.target-fix {
top: 0px;

		}}


/*--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;	}
	}
/*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;list-style: none;background-color:#08342b;z-index:1000;padding:2px 0;border-top:none;}
menu ul li{border-right:1px solid #ffffff;padding:4px;width:33.3%;box-sizing:border-box;text-align:center;font-size:13px;letter-spacing: -1px;}
menu ul li a{font-size:13px;}
menu ul li:nth-last-child(1){border-right:none;}
menu a{color:#ffffff !important;text-decoration:none;}