/* you dont need this CSS in your project */
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100,200,300,400,500&display=swap);
body {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
	font-family: 'Noto Sans TC';
  font-weight: 300;
  color: #444;
  overflow-x: hidden;
  background-color:#FFF;
  /*
  background: url("../images/bg.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
		background-position: center;
		background-attachment: fixed;
		*/
}
h1, h2, h3, h4, h5, h6, nav a  {
	font-family: 'Noto Sans TC';
  font-weight: 300
}
h1 {
  font-size: 3em;
	line-height: 180%;
  color:#080808;
}
h2 {
  font-size: 2.5em;
	line-height: 180%;
  color:#080808;
}
h3 {
  font-size: 2em;
	line-height: 180%;
	font-weight: 700;
}

.h4font {
  font-size: 2rem;
	line-height: 180%;
  color:#080808;
}

nav {
  background: rgba(0,0,0,1);
  text-align: center;
  padding: 1em 0;
  color: #fff
}
nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 2em;
}
nav a:hover {
  color: #1FE0D4
}

section:nth-of-type(1) {

  background: url("../images/bg.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  height: 1300px;
  text-align: center;
}
article {
  padding: 0 0;
  margin: 0;
  height: 100%
}
section:nth-of-type(1) article:nth-of-type(1) h1 {
  padding-top: 2em
}
a.btn-download-init {
  border: 1px solid #fff;
  color: #fff;
  display: inline-block;
  padding: 1em 2em;
  border-radius: 6px;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 100
}
a.btn-download-init:hover {
  border: 1px solid #1FE0D4;
  color: #1FE0D4;
  background: rgba(31,224,212,0.1);
}
section:nth-of-type(1) article:nth-of-type(1) h1,
section:nth-of-type(1) article:nth-of-type(1) h3 {
  color: #fff;
  margin: 1em 0 0.5em 0
}
section:nth-of-type(2) article:nth-of-type(1) {
  /*background: url("../images/bg.png") #000 no-repeat 0px 200px;*/
  width: 70%;
  height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.video-container{
  position: absolute;
  z-index: 0;
  min-width: 100%;
  min-height: 100%;
  left: 0px;
  top: 0px;
  overflow: hidden;
  opacity: 1;
}
.video-bg-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*
  background-image: url("../images/bg.png");
  background-repeat: repeat;
  background-color: rgba(44,62,80,0.6);
  */
  z-index: 2;
}
.video-container iframe {
  position: absolute;
  z-index: 0;
  top: 0px;
  left: 0px;
  overflow: hidden;
  opacity: 1;
  width: 100%;
  height: 809px;
  margin-top: -87px;
  max-width: 4000px !important;
}
.video-bg {
  width: 100%;
  height: auto;
}
#parallax-img-1 {
  width: 40px;
  height: auto;
}
#parallax-img-2 {
  width: 160px;
  height: auto;
  transform:rotate(-30deg);
  -ms-transform:rotate(-30deg); /* IE 9 */
  -webkit-transform:rotate(-30deg); /* Opera, Chrome, and Safari */
}
#parallax-img-3 {
  width: 50px;
  height: auto;
  transform:rotate(-12deg);
  -ms-transform:rotate(-12deg); /* IE 9 */
  -webkit-transform:rotate(-12deg); /* Opera, Chrome, and Safari */
}
#parallax-img-4 {
  width: 140px;
  height: auto;
  transform:rotate(14deg);
  -ms-transform:rotate(14deg); /* IE 9 */
  -webkit-transform:rotate(14deg); /* Opera, Chrome, and Safari */
}
#parallax-img-5 {
  width: 40px;
  height: auto;
  transform:rotate(14deg);
  -ms-transform:rotate(14deg); /* IE 9 */
  -webkit-transform:rotate(14deg); /* Opera, Chrome, and Safari */
}
#parallax-img-6 {
  width: 80px;
  height: auto;
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}
#parallax-img-7 {
  width: 50px;
  height: auto;
  transform:rotate(-12deg);
  -ms-transform:rotate(-12deg); /* IE 9 */
  -webkit-transform:rotate(-12deg); /* Opera, Chrome, and Safari */
}
#parallax-img-8 {
  width: 150px;
  height: auto;
}

.bshadow {
	box-shadow:3px 3px 12px gray;padding:3px;
}

.demo {
	padding: 1rem;
	width: 50%;
	margin:0 auto;
	text-align:center;
}

.demo2 {
	padding: 1rem;
	width: 70%;
	margin:0 auto;
	text-align:center;
}

		input[type="text"],input[type="password"],
		select.form-control {
		  background: #FFF;
		  border: none;
		  border-bottom: 1px solid #000000;
		  -webkit-box-shadow: none;
		  box-shadow: none;
		  border-radius: 0;
	  font-size: 2rem;
		line-height: 180%;
	  color:#080808;
		}

		input[type="text"],input[type="password"]:focus,
		select.form-control:focus {
		  -webkit-box-shadow: none;
		  box-shadow: none;
		}

		
	.msg
	{
		width: 90%;
		height: auto;
		position: relative;
		text-align: center;
		margin: 0px auto;
		_margin: 0px auto;
		z-index: 5;
		/*display: flex;*/
	}

	.mgbox {
		font-size: 1.2rem;
		line-height: 200%;
		padding: 2rem;
		width:400px; text-align:center; display: inline-block; height:150px;
		margin: 1rem;
	  background: url("../images/bg3.png");
	  background-repeat: no-repeat;
	  background-size: contain;
	}

	.formxtitle2 {
		font-family: 'Noto Sans TC', 'Noto Sans';
		color: white; 
		text-shadow: black 0.1em 0.1em 0.2em;
		font-size: 2rem;
		font-weight: bolder;
	}

	.bigimg {
		width: 120%;
	}
	.container2
	{
		margin: 0 auto;
		width: 100%;
	}

	#go-top {
      display: none;
      font-size: 30px;
      position: fixed;
      bottom: 80px;
      right: 40px;
      border: 2px solid #000;
      border-radius: 5px;
      width: 45px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
	  color:#000;
	  z-index: 999;
    }

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1516696716663'); /* IE9*/
  src: url('iconfont.eot?t=1516696716663#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUoAAsAAAAAB4QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiTY21hcAAAAYAAAABeAAABhpvcBr5nbHlmAAAB4AAAAVoAAAFwf2dYZGhlYWQAAAM8AAAALwAAADYQOW78aGhlYQAAA2wAAAAcAAAAJAfeA4RobXR4AAADiAAAAAwAAAAMC+kAAGxvY2EAAAOUAAAACAAAAAgAdgC4bWF4cAAAA5wAAAAfAAAAIAESAF1uYW1lAAADvAAAAUUAAAJtPlT+fXBvc3QAAAUEAAAAIwAAADTT5qeAeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sE4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbydzwv4EhhrmBoQEozAiSAwAv5w0VeJzFkMENgDAMAy9t6QMxCA8G4sUcXamLdY1iQnkwQS05VhxLiQIsQBQPMYFdGA9OueZ+ZHU/eSZLjUBptXf1nyqiWXYNKplpsHmr/9i87qPTVyiDOrHVl4QbAzUOMwAAeJwdj71OwlAcxe+5135Q4CK9tx8UCpQK1aAk1oqDERYXjYPRyck4OenK4sBi4uDAEzioiU/gxhv4DJoYnZxdKRZPTs5yzj/5/4hCyPyTTZlLBFklm2SfHBMCtYsWpz6CKOnRLqxAsRzJWRRGgRa2emwPTkuVdtxPOo6qqSVw1LEVxP2oRyNsJwO6i9j2gUrVOzXbNZNNYLhR/TY9pI+wGmGtNNhID9aHMm4KfVQwzYpp3uuqouiULpU4rhw7p+QMNX1WSp41bazRBgqVyDs6Kzar5sVdcu23nRwwHkNUm/xlWPbKmW88W5gVbbmou14xXJEYfeddUfA7XyQTzVhf2QOLiUc6hOTQCSMODQuSIcoLnu2yY8cDiKCHpJ8B2VJlJ+lbnjO9qKQ/hqwZH6IuUqMm0ZgVuJSc/maJS+wYgJJt8lXLeJ89/Vfn8+wCEwhfSl9kL/wB4+w7egAAeJxjYGRgYADiFdG2U+L5bb4ycLMwgMC1XtEeBP1/KwsDsxGQy8HABBIFABZyCYQAeJxjYGRgYG7438AQw8IAAkCSkQEVMAMARwkCbAQAAAAD6QAABAAAAAAAAAAAdgC4eJxjYGRgYGBmCGRgZQABJiDmAkIGhv9gPgMAEPcBcAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICZkYmRmZGFgbGCLTlZtyS/gIEBABRQAuEA') format('woff'),
  url('iconfont.ttf?t=1516696716663') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1516696716663#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-cc-top:before { content: "\e6a9"; }

button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

@media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
		.container2
		{
			width: 80%;
		}
		
	section:nth-of-type(1) {

	  background: url("../images/bg.png");
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	  
	  height: 1800px;
	  text-align: center;
	}

	.demo {
		padding: 1rem;
		width: 30%;
		margin:0 auto;
		text-align:center;
	}
 }
 
@media only screen and (max-width: 480px) {
	section:nth-of-type(1) {

	  background: url("../images/bg2.png");
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	  
	  height: 630px;
	  text-align: center;
	}
	.responsimg
	{
		width:250px;
	}
	
	h1 {
	  font-size: 1.2em;
		line-height: 180%;
	  color:#080808;
	}
	h2 {
	  font-size: 1.2em;
		line-height: 180%;
	  color:#080808;
	}
	h3 {
	  font-size: 1em;
		line-height: 180%;
		font-weight: 700;
	}

	.h4font {
	  font-size: 1rem;
		line-height: 180%;
	  color:#080808;
	}

	.demo {
		padding: 1rem;
		width: 80%;
		margin:0 auto;
		text-align:center;
	}

section:nth-of-type(2) article:nth-of-type(1) {
  /*background: url("../images/bg.png") #000 no-repeat 0px 200px;*/
  width: 90%;
  height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
		input[type="text"],input[type="password"],
		select.form-control {
		  background: #FFF;
		  border: none;
		  border-bottom: 1px solid #000000;
		  -webkit-box-shadow: none;
		  box-shadow: none;
		  border-radius: 0;
	  font-size: 1rem;
		line-height: 180%;
	  color:#080808;
		}

	.mgbox {
		font-size: 1.2rem;
		line-height: 200%;
		padding: 1rem;
		background-color:#FFF;
		width:300px; text-align:center; display: inline-block; height:180px;
		margin: 0.5rem;
	}
	.demo2 {
		padding: 1rem;
		width:90%;
		margin:0 auto;
		text-align:center;
	}
	.h5font {
	  font-size: 1.5rem;
		line-height: 180%;
	  color:#080808;
	}
	#go-top {
      border: 2px solid #000;
	  color:#000;
      bottom: 20px;
      right: 25px;
    }
}