@charset "utf-8";
/* CSS Document */


/*基本*/
body{ margin:0; padding:0;}

/*隱鑶*/
.for_pc {}
.for_m { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_m { display: block !important;}
	}	

/*回版頭*/
#gotop { display:none; border-radius:20px; position:fixed; padding:10px 10px 3px 10px; right:30px; bottom:30px; font:12px/30px  Verdana;background:#000; color:#fff; cursor:pointer; z-index:5}
#gotop { filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6}


/*全BOX版面*/	
.WRAPPER { position: relative; display:block; margin:0 auto; padding: 0; width: 100%; min-width:1220px; background:#111222; z-index: 0;}
.WRAPPER img { border:0; vertical-align:top;}
.mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px; z-index:0;}
	@media screen and (max-width:767px){
		.WRAPPER { padding-bottom:0; min-width: inherit;}
		.WRAPPER img { width:100%;  height:auto;}
		.mainArea { width:100%; padding:0;}	
	}	


/*背景*/
.bg { z-index:-2; position: absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; background:url(bg.jpg?t=1750223039553) no-repeat center top ;}

@media screen and (max-width:767px){
	.MB_bg  {background: url(MB_bg.jpg?t=1750223039553) no-repeat center top ;width:100%; min-width: inherit;background-size:100%; height:100% ;position: absolute; top:0 ;left:0 }
  }


/*共用--區塊_all*/
.Area { z-index:1; position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; display:block;} 
.Area .go_bt { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.Area .go_bt:hover { -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; filter:brightness(110%);}
  @media screen and (min-width:768px){
    .Area .go_bt:hover { -webkit-transform:translateY(-6px); -moz-transform:translateY(-6px); -ms-transform:translateY(-6px); -o-transform:translateY(-6px); transform:translateY(-6px);}
  }
  /*寬度,間距*/
  .Area1220 { margin:0 auto; width:100%;}
  .Area960 { margin:0 auto; width:100%;}
    @media screen and (min-width:768px){
      .Area1220 { width:1220px;}
      .Area960 { width:960px;}
	  .Areatop { padding-top:0;}
      .Areabottom { margin-bottom:0;}
    }
    @media screen and (max-width:767px){
      .Areabottom { margin-bottom:0;}
	  .Areatop { margin-top:0;}
    }


/*版頭*/
/*.Area_top{overflow: hidden;}*/
.Area_top { height: 690px;}
.Area_top .logo { position: absolute; top: 23px; left: 91px;}
.Area_top .title { position: absolute; top: 126px; left: -300px; width: 100%;}
.Area_top .btn   { position: absolute; top: 463px; left: 172px;}
    .st0{clip-path:url(#SVGID_2_);fill:none;stroke:#FFFFFF;stroke-width:16;stroke-linecap:round;stroke-miterlimit:10;}
	.st1{clip-path:url(#SVGID_4_);fill:none;stroke:#FFFFFF;stroke-width:16;stroke-linecap:round;stroke-miterlimit:10;}
	.st2{clip-path:url(#SVGID_6_);fill:none;stroke:#FFFFFF;stroke-width:10;stroke-linecap:round;stroke-miterlimit:10;} 
	@media screen and (max-width:767px){
	.Area_top { width:100%; height: 100%; position: relative;}
	.Area_top .title { position: absolute; top: 11vw; left: 5vw;  width:54%; margin: 0 auto;}
	.Area_top .btn { position: absolute; top: 78.5%;left: 13.6%;width: 29.5%;}


}

    
 /*svg動態*/
.box_item {  height: 150vh;}
.item { width: 50%; margin: 10% auto;}
#svg_scroll {  position: fixed; top: inherit; left: inherit; right: 0; bottom: 0;  margin: 0 auto;}
#svg_2021 { opacity: 0; width: 50%; margin: 0 auto; transition:1s ease;}
#svg_2021.show {opacity: 1;}


/*心跳2*/
.heartbeat2-play { -webkit-animation:heartbeat2-play 1s infinite;
				           animation:heartbeat2-play 1s infinite;}
	@-webkit-keyframes heartbeat2-play {   
		0%   { -webkit-transform: scale(1.08); transform: scale(1.08);} 
		40%  { -webkit-transform: scale(1); transform: scale(1);} 
		60%  { -webkit-transform: scale(1.08); transform: scale(1.08);} 
		80%  { -webkit-transform: scale(1); transform: scale(1);}
		100% { -webkit-transform: scale(1.08); transform: scale(1.08);} 
	}
	@keyframes heartbeat2-play { 
		0%   { -webkit-transform: scale(1.08); transform: scale(1.08);} 
		40%  { -webkit-transform: scale(1); transform: scale(1);} 
		60%  { -webkit-transform: scale(1.08); transform: scale(1.08);} 
		80%  { -webkit-transform: scale(1); transform: scale(1);}
		100% { -webkit-transform: scale(1.08); transform: scale(1.08);} 
	}


/*影片*/		
.videobox{ z-index:5;position: absolute;top: 58px; margin: 0;right: 180px;padding: 0;}
.youtubeArea { position:absolute; top:267px; right:-50%; width:819px; height:470px}
.youtubeArea iframe {  }

	@media screen and (max-width:767px){
	.Area_02 .Areabottom{width: 89%;position: relative;top: -1vw;position: relative;left: 7vw}
	.Area_02{position: relative; width: 100%; margin: 0; padding: 0;}
	.Area_02 .videobox{position: absolute; top: 1%; width:100%; right: 0%; margin: 0;padding: 0;}
	.Area_02 .videobox .youtubeArea {width: 80vw; height: 45vw; top:49vw; right:0; position: relative; margin: 0 auto;}
	.txt2 { margin-top:0%;}
	}

	
/*注意事項*/	
/*.Areamore {z-index: 2;}*/