/*reset.css*/
html, body, div, span, applet, object, iframe,
h1, .toplogo, 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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
    text-decoration:none;
}

/*animate*/
.xp100 {
	transform: translateX(100px);
}

.topmove_box {
	opacity: 0;
	transform: translateY(50px);
	transition: all .4s ease-out;
}

.topmove {
	opacity: 1;
	transform: translateY(0);
	transition: all .4s ease-out;
}

.downmove_box {
	opacity: 0;
	transform: translateY(-50px);
	transition: all .4s ease-out;
}

.downmove {
	opacity: 1;
	transform: translateY(0);
	transition: all .4s ease-out;
}

.rightmove_box {
	opacity: 0;
	transform: translateX(-50px);
	transition: all .4s ease-out;
}

.rightmove {
	opacity: 1;
	transform: translateX(0);
	transition: all .4s ease-out;
}

.leftmove_box {
	opacity: 0;
	transform: translateX(50px);
	transition: all .4s ease-out;
}

.leftmove {
	opacity: 1;
	transform: translateX(0);
	transition: all .4s ease-out;
}

.delay1 {
	transition-delay: .1s !important;
}

.delay15 {
	transition-delay: .15s !important;
}

.delay2 {
	transition-delay: .2s !important;
}

.delay3 {
	transition-delay: .3s !important;
}

.delay4 {
	transition-delay: .4s !important;
}

.delay45 {
	transition-delay: .45s !important;
}

.delay5 {
	transition-delay: .5s !important;
}

.delay6 {
	transition-delay: .6s !important;
}

.delay7 {
	transition-delay: .7s !important;
}

.delay75 {
	transition-delay: .75s !important;
}

.delay9 {
	transition-delay: .9s !important;
}

.delay105 {
	transition-delay: 1.05s !important;
}

.delay120 {
	transition-delay: 1.2s !important;
}

.delay135 {
	transition-delay: 1.35s !important;
}

.trans6 {
	transition: all .6s ease-out;
}

.trans8 {
	transition: all .8s ease-out;
}

.trans10 {
	transition: all 1s ease-out;
}

.trans12 {
	transition: all 1s ease-out;
}

/*website*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

body, html {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 20px;
	color: #565656;
	line-height: 1.5;
}

body.active,html.active {
    overflow-y: hidden;
    overflow: hidden
}

a {
	color: #2397de;
}

img {
	max-width: 100%;
}

.w1200 {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

/**/
header {
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	text-align: right;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

header .w1200 {
	position: relative;
}

.toplogo {
	top: 15px;
	left: 0;
	position: absolute;
}

.toplogo a {
	display: block;
	box-sizing: border-box;
	width: 200px;
	border: 6px solid #05afe5;
	border-radius: 15px;
	padding: 8px 15px;
	background: #FFF;
	position: relative;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.toplogo a img {
	vertical-align: bottom;
}

.toplogo a:before, .toplogo a:after {
	content: "";
	height: 15px;
	width: 2px;
	background: #834d42;
	position: absolute;
	top: -21px;
}

.menu {
	display: flex;
	justify-content: flex-end;
}

.menu li {
	padding: 10px 10px 8px 10px;
	transition: all 0.15s ease-out;
	position: relative;
}

.menu li:before {
	content: "";
	border-left: 1px dashed #834d42;
	display: block;
	width: 1px;
	height: 20px;
	position: absolute;
	left: 0;
	top: 50%;
	margin: -10px 0 0 0;
}

.menu li:first-child:before {
	border: none;
}

.menu a {
	color: #834d42;
	font-weight: 500;
	padding: 8px 20px 10px 20px;
	font-size: 0.85rem;
	display: block;
	letter-spacing: 1px;
	position: relative;
	transition: all 0.15s ease-out;
}

.menu li:first-child a:hover, .menu li.active:first-child a {
	box-shadow: 0 -4px 0 0 #05b0e5 inset;
	transition: all 0.15s ease-out;
}

.menu li:nth-child(2) a:hover, .menu li.active:nth-child(2) a {
	box-shadow: 0 -4px 0 0 #ff8503 inset;
	transition: all 0.15s ease-out;
}

.menu li:nth-child(3) a:hover, .menu li.active:nth-child(3) a {
	box-shadow: 0 -4px 0 0 #c60048 inset;
	transition: all 0.15s ease-out;
}

.menu li:nth-child(4) a:hover, .menu li.active:nth-child(4) a {
	box-shadow: 0 -4px 0 0 #68b330 inset;
	transition: all 0.15s ease-out;
}

.menu li:nth-child(5) a:hover, .menu li.active:nth-child(5) a {
	box-shadow: 0 -4px 0 0 #9f37ca inset;
	transition: all 0.15s ease-out;
}

.menu li:first-child a{
	color:#05b0e5;
}

.menu li:nth-child(2) a{
	color:#ff8503;
}

.menu li:nth-child(3) a{
	color:#c60048;
}

.menu li:nth-child(4) a{
	color:#68b330;
}

.menu li:nth-child(5) a{
	color:#9f37ca;
}

#menuBtn{
	display:none;
}

footer {
	background: url(img/footbg.png);
	font-size: 0.75rem;
	text-align: center;
	padding: 25px 0;
	color: #834d42;
}

/**/

.one {
	background: url(img/Bg.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	text-align: center;
	box-sizing: border-box;
}

.one img{
	position: relative;
	top: 10%;
}

h1 {
	font-size: 2rem;
    font-weight: 700;
    color: #465e7d;
    text-align: center;
    letter-spacing: 1px;
    position: relative;
    padding: 15px 0;
}

.two {
	background: url(img/02.png) no-repeat right bottom 25px,url(img/footbg.png);
	border-top-left-radius: 100% 30%;
	border-top-right-radius: 100% 30%;
	margin: -100px 0 0 0;
	position: relative;
	z-index: 2;
}

h3 {
	font-size: 2rem;
	font-weight: 700;
	color: #465e7d;
	text-align: center;
	letter-spacing: 1px;
	position: relative;
	padding: 15px 0;
}

h3:before, h3:after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 60px;
	height: 2px;
	background: #834d42;
	margin: 0 auto;
	left: 0;
	right: 0;
}

h3::after {
	background: #b79b89;
	width: 40px;
}

.dw_box {
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	position: relative;
	top: -100px;
	margin: 0 0 15px 0;
}

.dw_box li {
	width: 25%;
}

.dw_box li a {
	display: block;
	width: 100%;
	padding: 100% 0 0 0;
	position: relative;
	color: #FFF;
	transition: all 0.15s ease-out;
}

.dw_box li:first-child a {
	background: url(img/i01.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.dw_box li:nth-child(2) a {
	background: url(img/i02.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.dw_box li:nth-child(3) a {
	background: url(img/i03.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.dw_box li:nth-child(4) a {
	background: url(img/i04.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.dw_box li a:hover {
	transition: all 0.15s ease-out;
}

.dw_box li:first-child a:hover {
	background: url(img/i01_h.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #03a1d2;
}

.dw_box li:nth-child(2) a:hover {
	background: url(img/i02_h.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #e97a03;
}

.dw_box li:nth-child(3) a:hover {
	background: url(img/i03_h.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #ad0341;
}

.dw_box li:nth-child(4) a:hover {
	background: url(img/i04_h.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #5a9d28;
}

.dw_box li a b {
	background: #FFF;
	position: absolute;
	left: 50%;
	top: 71%;
	transform: translateX(-50%);
	font-size: 0.7rem;
	padding: 10px 15px;
	border-radius: 30px;
	transition: all 0.3s ease-out;
	font-weight: 500;
	text-shadow: 0 0 2px rgba(0,0,0,0.2);
}

.dw_box li a b i {
	margin: 0 0 0 15px;
}

.dw_box li:first-child a b {
	background: #06aa6a;
}

.dw_box li:nth-child(2) a b {
	background: #ed1944;
}

.dw_box li:nth-child(3) a b {
	background: #eb9d00;
}

.dw_box li:nth-child(4) a b {
	background: #0083cd;
}

.dw_box li a:hover b {
	transition: all 0.3s ease-out;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
}

.dw_box li:first-child a:hover b {
	background: #fff;
}

.dw_box li:nth-child(2) a:hover b {
	background: #fff;
}

.dw_box li:nth-child(3) a:hover b {
	background: #fff;
}

.dw_box li:nth-child(4) a:hover b {
	background: #fff;
}

.two h3 {
	margin: -100px 0 0 0;
}

.step {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #834d42;
	font-size: 1.3rem;
	padding: 15px 0 35px 0;
}

.step p:nth-child(even) {
	padding: 0 10px;
}

.three {
	background: url(img/two_bg2.png) repeat-x,url(img/four_bg.png) repeat-x bottom left,url(img/03.png) no-repeat left bottom,url(img/04.png) no-repeat right 0px top 100px,url(img/05.png) no-repeat bottom right 20px,url(img/three_bg.png);
	padding: 40px 0 55px 0;
}

.three.in {
	background: url(img/four_bg.png) repeat-x bottom left,url(img/03.png) no-repeat left bottom,url(img/04.png) no-repeat right 50px top 100px,url(img/05.png) no-repeat bottom right 20px,url(img/three_bg.png);
	padding: 0 0 55px 0;
}

.step_two {
	padding: 10px 0 0 0;
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
}

.step_two li {
	border-bottom: 1px dashed #e4dbb0;
	padding: 15px 0;
	width: 100%;
}

.step_two li.w50 {
	width: 50%;
}

.step_two li:last-child {
	border: none;
}

.step_two li p {
	width: 244px;
	height: 71px;
	line-height: 71px;
	text-align: center;
	color: #834d42;
	font-size: 1.2rem;
	font-weight: 500;
}

.step_two li:nth-child(2) p {
	background: url(img/the01.png);
	line-height: 70px;
}

.step_two li:nth-child(3) p {
	background: url(img/the02.png);
}

.step_two li:nth-child(4) p {
	background: url(img/the03.png);
}

.step_two li:nth-child(5) p {
	background: url(img/the04.png);
}

.step_two li:nth-child(6) p {
	background: url(img/the05.png);
}

.step_two li:nth-child(7) p {
	background: url(img/the06.png);
	line-height: 81px;
}

.step_two li span {
	font-size: 20px;
    line-height: 38px;
	padding: 0 0 0 51px;
	display: block;
	line-height: 40px;
}

.four {
	background: url(img/four_bg2.png) left;
	padding: 15px 0 0 0;
}

.four h3 {
	background: url(img/06.png) no-repeat left top 2px,url(img/07.png) no-repeat right top 2px;
}

.aw_1 {
	padding: 30px 0 0 0;
	font-size: 0.8rem;
}

.aw_1 p {
	font-size: 1.1rem;
	font-weight: 500;
}

.aw_1 p.one_a {
	color: #68b330;
}

.aw_1 p.two_a {
	color: #e71252;
	border-top: 1px dashed #edb3b5;
	padding: 15px 0 0 0;
	margin: 15px 0 0 0;
}

.aw {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 0 20px 0;
}

.aw p {
	margin: 0 3px;
}
.message{
	background:url(img/four_bg3.png) repeat-x,url(img/three2_bg.png);
	padding: 40px 0 65px 0;
	font-size: 0.8rem;
}
.five {
	background:url(img/08.png) no-repeat bottom right 20px,url(img/three_bg.png);
	padding: 40px 0 65px 0;
	font-size: 0.8rem;
}
.sponsor{
background-color: #ffe470;
text-align: center;}

.worry {
	padding: 25px 0 0 0;
}

.worry p {
	font-size: 12px;
	padding: 0 0 10px 18px;
}
/**/
.detail_top {
	background-color: #000;
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 75px 0 0 0;
	text-align: center;
}

.in_title {
	background: url(img/two_bg.png);
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
	color: #FFF;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
	padding: 10px 0;
	letter-spacing: 1px;
}

.in_title:before, .in_title:after {
	content: '';
	display: block;
	width: 100%;
	border-top: 2px dotted #FFF;
}

.in_title p {
	padding: 10px 0;
}


.bread {
	font-size: 0.6rem;
}

.bread .fa-angle-right {
	padding: 0 5px;
	transform: scale(0.75);
}

/*rwd*/
@media (max-width: 1200px) {
}

@media (max-width: 1024px) {

	.w1200 {
		padding: 0 15px;
		box-sizing: border-box;
	}

	#menuBtn {
		display: block;
		position: fixed;
		top: 16px;
		right: 10px;
		width: 50px;
		height: 50px;
		cursor: pointer;
		z-index: 10000;
		border-radius: 3px;
	}

	.menu-btn {
		display: block;
	}

	.menu-btn span {
		display: block;
		position: absolute;
		top: 10px;
		left: 8px;
		height: 3px;
		width: 35px;
		background: #ffce03;
		transition: all .3s ease-out;
		border-radius: 10px;
	}

	.menu-btn .line-2 {
		top: 19px;
	}

	.menu-btn .line-3 {
		top: 28px;
	}

	.menu-btn.active .line-1 {
		top: 21px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		background: #BBB;
	}

	.menu-btn.active .line-2 {
		opacity: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.menu-btn.active .line-3 {
		top: 21px;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		background: #BBB;
	}

	.black_bg {
		background: rgba(0,0,0,0.5);
		width: 100%;
		height: 100%;
		position: fixed;
		opacity: 0;
		z-index: 3;
		pointer-events: none;
		transition: all 0.3s ease-out;
	}

	.black_bg.active {
		opacity: 1;
		pointer-events: auto;
		transition: all 0.3s ease-out;
	}

/*	header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 6;
		border-bottom: solid 1px #eee;
		background-color: #fff;
		height: 70px;
	}*/

	.toplogo {
		left: 15px;
		position: fixed;
		z-index: 5;
	}
    .toplogo{
    top: 15px;
    left: 0;
    position: absolute;


}
	.menu {
		position: fixed;
		left: 0;
		top: -100%;
		width: 100%;
		background: #FFF;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: flex-start;
		padding: 50px 0 0 0;
		z-index: 4;
		transition: all 0.5s ease-out;
		padding: 50px 0 10px 0;
		box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	}

	.menu.active {
		top: 70px;
		transition: all 0.5s ease-out;
	}

	.menu li {
		width: 100%;
		border-bottom: 1px solid #eee;
		text-align: left;
	}

	.menu li:last-child {
		border: none;
	}

	.menu li:before {
		display: none;
	}

	.menu li:nth-child(n) a:hover, .menu li.active:nth-child(n) a {
		box-shadow: none;
	}

	.menu a {
		font-size: 1rem;
	}

	#body {
		transition: filter .2s linear;
	}

	#body.active {
		filter: blur(5px);
		transition: filter .2s linear;
	}

	.one {
		background: url(img/Bg2.jpg);
		background-attachment: inherit;
		background-size: cover;
		background-position: right bottom;
	}

	h1 {
		width: 70%;
		margin: 0 auto;
		top: 15%;
	}

	.two {
		margin: -75px 0 0 0;
		border-top-left-radius: 100% 15%;
		border-top-right-radius: 100% 15%;
		background-size: 120px,auto;
	}

	.dw_box li {
		width: 35%;
		margin: 0 3%;
	}

	.step {
		justify-content: center;
	}

	.step p {
		width: 40%;
		text-align: center;
	}

	.step p:nth-child(even) {
		display: none;
	}

	.three {
		background-size: auto,auto,120px,120px,300px,auto;
		padding: 40px 0 75px 0;
	}

	.three.in {
		background-size: auto,120px,120px,300px,auto;
		padding: 40px 0 75px 0;
	}

	.step_two li.w50 {
		width: 100%;
	}

	.five {
		padding: 40px 0 75px 0;
		background-size: auto,300px,auto;
	}

}

@media (max-width: 768px) {

	.toplogo a {
		width: 180px;
	}

	.dw_box li {
		width: 50%;
		margin: 0;
	}

	.dw_box li a b {
		display: inline-table;
	}

	.four h3 {
		background-size: 130px,130px;
	}
}

@media (max-width: 480px) {
	.toplogo a {
		width: 160px;
	}

	h1 {
		width: 90%;
		top: 21%;
	}


	.dw_box li {
		width: 80%;
	}

	.step p {
		width: 50%;
	}

	.two {
		background-size: 75px,auto;
		border-top-left-radius: 100% 5%;
		border-top-right-radius: 100% 5%;
	}

	.step_two li p {
		margin: 0 auto;
	}

	.step_two li span {
		padding: 0;
	}

	.three {
		background: url(img/two_bg2.png) repeat-x,url(img/four_bg.png) repeat-x bottom left,url(img/05.png) no-repeat bottom center,url(img/three_bg.png);
		background-size: auto,auto,300px,auto;
		padding: 40px 0 125px 0;
	}

	.three.in {
		background: url(img/four_bg.png) repeat-x bottom left,url(img/05.png) no-repeat bottom center,url(img/three_bg.png);
		background-size: auto,300px,auto;
		padding: 40px 0 125px 0;
	}

	.four h3 {
		background: url(img/06.png) no-repeat left top 2px,url(img/07.png) no-repeat right top 2px;
		background-size: 100px,100px;
	}

	.five {
		background:url(img/08.png) no-repeat bottom center,url(img/three_bg.png);
		background-size: auto,300px,auto;
		padding: 15px 0 180px 0;
	}
}