@charset "utf-8";
/* CSS Document */
body {
	Font-family:微軟正黑體,Arial;
  	margin:0 auto;
  	padding:0;
	overflow-x:hidden;
	background:url(../images/bg2.png) fixed,linear-gradient(90deg, #000, #960, #C96, #960, #000) ;
	animation:bg 50s infinite linear;
	}
	@keyframes bg {
		0%{background-position:0 0,0 0}
		100%{ background-position:3000px 0,0 0}
	}
	@media (max-width:600px){}


a{color:#de507d;text-decoration:none}
a:hover{ color:#0CC}
.gp{display:inline-block}
/*東立選單*/	

.btn{
	position:fixed;
	top:0;
	width:100%;
	z-index:999;
	width:100%;
	background:rgba(0,0,0,.7);
	margin:0 auto;
	opacity: 0.9;
	text-align:center;
	vertical-align:middle;
	padding:0.2em 0;
	}
.btn a{ font-size:1em; font-weight:bold; color:#FF6; margin:0 auto; margin-left:1em; margin-right:1em;  letter-spacing:0em;}

#nav{ min-height:5vh; text-align:center; margin-bottom:0;z-index:9999;}
#nav a:hover{color:#0CC;animation: 1s linear 0s normal none infinite jello-horizontal;}

#nav a{ margin:2%;font-size:1.1em; display:inline-block;text-decoration:none}
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
/*東立選單結束*/

/*主視覺*/
.pc{ display:block}
.mobi{ display:none}

#item{position:absolute; top:0; width:100vw; z-index:1;}	
#item img{width:100%}
#cover{
	position:relative;
	z-index:50;
	width:100%;
	max-width:1000px;
	text-align:center;
	margin:0 auto;
	}
	#cover img{ max-width:100%; max-height:100vh; margin:0 auto}
	
	


/*主視覺結束*/

/*標題樣式*/	
	.text-effect{ text-align: center;text-transform: uppercase; margin-top:8vh}
			.text-effect span{
				display: inline-block;
				animation: animate 1.4s infinite;
			}
			.text-effect span:nth-child(2){ animation-delay: 0.1s; }
			.text-effect span:nth-child(3){ animation-delay: 0.2s; }
			.text-effect span:nth-child(4){ animation-delay: 0.3s; }
			.text-effect span:nth-child(5){ animation-delay: 0.4s; }
			.text-effect span:nth-child(6){ animation-delay: 0.5s; }
			.text-effect span:nth-child(7){ animation-delay: 0.6s; }
			.text-effect span:nth-child(8){ animation-delay: 0.7s; }
			.text-effect span:nth-child(9){ animation-delay: 0.8s; }
			.text-effect span:nth-child(10){ animation-delay: 0.9s; }
			@keyframes animate{
				50%, 100%{ transform: translate(0, 0); }
				0%{ transform: translate(0, 0); }
				50%{ transform: translate(0, -40px); }
			}


/*各內容區塊樣式*/

.block{
	position:relative;
	padding:2em 4em; 
	margin:2em auto; 
	width:70%;
	background: linear-gradient(90deg, rgba(0,0,0,0.5),#000,rgba(0,0,0,0.5));
	border: #C96 3px solid;
	text-align:center;
	z-index:5;
	color:#E4CF96;
	}
.block h1{  background: url(../images/bg.png) center; background-clip:text;-webkit-background-clip: text; color:rgba(247,227,179,.6);-webkit-filter:brightness(1.5); text-shadow:#630 2px 2px 2px; margin-bottom:1em;animation:bt 50s infinite linear ; font-weight:bold;}
.block h3{background: linear-gradient(90deg, #F99, #FF6, #9F6, #BBF7EB, #6CC, #F99) ; background-clip:text;-webkit-background-clip: text;  margin-bottom:1em;animation:bt 10s infinite linear ; color:rgba(255,255,255,0);}
.block h5{background:#C96; color:#000; margin:2em auto; width:90%; max-width:600px; padding:0 2em}
	@keyframes bt {
		from{}
		to{ background-position:3000px 500px;}
	}
.block p{ line-height:2.5em; font-size:0.98em}

.box{
	background:#FFF;
	border-radius:1em;
	padding:1.5em 0.5em;
	margin:2em auto;
	width:90%;
	min-width:250px;
	color:#099;
}
.box img{width:100%;}
.box h2{ font-size:1.2em; padding:0.2em 0.5em;font-weight:bold;margin:1em auto; width:90%;-webkit-clip-path: polygon(100% 0%, 98% 50%, 100% 100%, 0 100%, 2% 50%, 0 1%);clip-path: polygon(100% 0%, 98% 50%, 100% 100%, 0 100%, 2% 50%, 0 1%);background-size: 50px 50px;background-color:#6CC;background-image:linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent); color:#300}
.tip{ font-size:0.7em; color:#3C9; line-height:2.5em;  border-top:#C96 5px dotted; padding-top:2em; margin-top:2em;}
.tip ul {list-style:none;}
.tipblock{ background:#3C9; padding:0 1em; font-weight:bold; color:#000; box-shadow:#630 2px 2px 2px; margin:3em auto}

.CV{width:40%; min-width:250px; display:inline-block; margin:0 auto; margin-left:1em; margin-right:1em; vertical-align:text-top}
.CV h2{ font-size:1.2em; padding:0.2em 0.5em;font-weight:bold;margin:1em auto; width:90%;-webkit-clip-path: polygon(100% 0%, 98% 50%, 100% 100%, 0 100%, 2% 50%, 0 1%);clip-path: polygon(100% 0%, 98% 50%, 100% 100%, 0 100%, 2% 50%, 0 1%);background-size: 50px 50px;background-color:#FBE6AE;background-image:linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent); color:#300}
.CV h3{ color:#3C9; text-shadow:#039 2px 2px 2px}
.pic{ margin:1em auto;display:block; border-radius:100%; width:250px; height:250px;  box-shadow:#333 0 0 5px;}

.goods{
	width:40%;
	margin-left:.5%;
	margin-right:.5%;
	display:inline-block;
	vertical-align:text-top;
}
.goods h2{font-size:1em}
.goods span{position:absolute; background:#F69; color:#FFF; top:1em; left:0; text-align:left}
@media (max-width:1000px){
	.goods{width:90%;display:block; margin:1em auto}
	}

.outtakes h3{ font-size:1.2em; padding:0.2em 0.5em;font-weight:bold;margin:1em auto; margin-top:3em; width:10em;-webkit-clip-path: polygon(100% 0%, 98% 50%, 100% 100%, 0 100%, 2% 50%, 0 1%);clip-path: polygon(100% 0%, 98% 50%, 100% 100%, 0 100%, 2% 50%, 0 1%);background-size: 50px 50px;background-color:#FBE6AE;background-image:linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent); color:#300}

.paper{width:70%; text-align:left; color:#FFF; margin:0 auto; line-height:3em}
.paper .c0{opacity:0}
.paper .c1:first-letter{ color:#0C9; font-size:1.5em; font-weight:bold}
.paper .c2:first-letter{ color:#F69; font-size:1.5em; font-weight:bold}
/*按鈕效果*/
.readlink{
    color:#FBE6AE;
	display:inline-block;
	font-weight:bold;
    font-size: 1.2em;
    text-transform: uppercase;
    border:1px solid #FBE6AE;
	margin-left:0.5em;
	margin-right:0.5em;
	margin:2em auto;
    padding:1% 5%;
    border-radius: 20px 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0.1s;
}
.readlink:hover{
    color: #333;
    background:#FBE6AE;
    border-radius: 0;
	text-shadow:none;
}
.readlink:before,
.readlink:after,
.readlink span:before,
.readlink span:after{
    content: "";
    background-color: #FBE6AE;
    width: 0;
    height: 2px;
    position: absolute;
    top: -2px;
    right: 0;
    transition: all 0.3s ease;
}
.readlink:after,
.readlink span:after{
    width: 2px;
    height: 0;
    right: -2px;
    transition: 0.45s ease;
}
.readlink span:before{
    width: 0;
    top: auto;
    bottom: -2px;
    right: auto;
    left: 0;
}
.readlink span:after{
    right: auto;
    left: -2px;
    bottom: -2px;
    top: auto;
}
.readlink:hover:before,
.readlink:hover span:before{
    width: 100%;
}
.readlink:hover:after,
.readlink:hover span:after{
    height: 108%;
}
.video{ position:relative; width:25%; min-width:200px; min-height:150px;  margin:.5em auto; margin-left:1em; margin-right:1em; display:inline-flex;justify-content:center; text-align:center;align-items:center; background:linear-gradient(90deg,rgba(0,0,0,0.9), rgba(52,1,1,0.7),rgba(0,0,0,0.9)); border:rgba(0%,80%,80%,1) 2px solid; box-shadow:#666 0 10px 10px, inset #000 0 0 15px; color:#FFF; text-shadow:#000 0 0 5px; padding-top:1.5em;flex-direction:column }
.video span{ line-height:2.5em;display:block; background:rgba(0%,80%,80%,1); width:100%; color:#FFF; text-shadow:#09C 0 0 5px; font-weight:bold; top:0; position:absolute}
.video .play{ opacity:.5;background:rgba(255,255,255,.3); border-radius:100%; display:flex; width:2em; height:2em; justify-content:center; text-align:center;align-items:center; margin:.5em auto}
.video:hover{ transform:scale(1.1);-webkit-filter:sepia(1);}
.video p{ font-size:.8em; border-top:#FFF 1px dotted}
.video h4{ margin:0.5em auto; margin-top:1.5em}
.sale {margin:1em auto; text-align:left; font-weight:bold; width:80%; font-size:1.1em; min-width:250px;}
.sale span{background:#6FC; color:#000; font-weight:bold; margin-left:0.2em; margin-right:0.2em}

/*連結樣式*/		
	.bn{color: #F7D595; font-weight:bold; text-align:center; padding:0.5em 1.5em; border:1px solid #F7D595; cursor:pointer; margin:1em auto; margin-left:1em; margin-right:1em;  display:inline-block; text-shadow:#000 0 0 10px; font-weight:300; background:rgba(0,0,0,.8); z-index:90; position:relative}
	.bn:hover{ animation:bnhover 0.3s linear forwards}
	@keyframes bnhover{
		0%{}
		100%{ transform: scale(1.1);font-weight:bold; text-shadow: none; text-decoration:none}
		}
/*連結樣式結束*/		

#copy{text-align:center; margin-top:3em; bottom:0; font-size:.8em; color:#000; text-shadow:#C96 0 0 5px, #C90 0 0 10px}
#copy img{ height:1.6em; margin:1em 2em}
@media (max-width:900px){

}
@media (max-width:600px){
	#cover{padding-top:3em}
	.readlink{ display:block}
}
@media (max-width:700px){
	.block{width:90%}
	.mobi{ display:block}
	.pc{ display:none}
	

}