@charset "utf-8";
/* CSS Document */
@import url("reset.css");

body{
	margin-left:0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	background-color:#ECECEC;
	font-family:"微軟正黑體";
}
.clearfix{
	clear:both;
}
#WRAPPER{}
#TOPNLIK{
	height:28px;
	width:100%;
	background-color:#2e2e2e;
}
#HEADER{
	position:relative;
	width:95%;
	max-width:1260px;
	margin:0 auto;
	height:535px;
	background:url(../images/main_bg.jpg) no-repeat center;
	overflow:hidden;
}
#HEADER .mask{
	position:absolute;
	width:1260px;
	height:71px;
	background:url(../images/main_mask.png) no-repeat;
	bottom:0;
	left:0;
	z-index:66;
}
#HEADER .train{
	position:absolute;
	left:0;
	bottom:25px;
	width:614px;
	height:374px;
	background:url(../images/train.png) no-repeat;
	z-index:55;
}
#HEADER .gree{
	position:absolute;
	right:0;
	bottom:0;
	width:1260px;
	height:248px;
	background:url(../images/gree.png) no-repeat;
	z-index:44;
}
#HEADER .tylogo{
	position: absolute;
  right: 3%;
  top: 45px;
  width: 630px;
  height: 277px;
  background: url(../images/tylogo.png) no-repeat;
  background-size: contain;
  z-index: 55;
}
#HEADER .stop{
	position: absolute;
  right: 16%;
  bottom: 110px;
  width: 366px;
  height: 118px;
  background: url(../images/stop.png) no-repeat;
  background-size: contain;
  z-index: 99;
}

#HEADER .share{
	display:block;
	position:absolute;
	right:20%;
	top:250px;
	width:117px;
	height:35px;
	background:url(../images/share.png) no-repeat;
	background-size: contain;
	z-index:44;
}
#HEADER .tylogo_s{
	display:block;
	position:absolute;
	left:2%;
	top:4%;
	width:192px;
	height:50px;
	background:url(../images/taoyuan_logo.png) no-repeat;
	z-index:44;
}
#CONTANT{
	width:95%;
	max-width:1260px;
	margin:0 auto;
	background-color:#FFF;
	overflow:hidden;
}
#CONTANT .signup{
	width:990px;
	padding-top:30px;
	margin:0 auto;
	border-bottom:2px dashed #9d6db2;
}
#CONTANT .signup .imgLeft{
	width:360px;
	height:286px;
	background:url(../images/img_01.png) no-repeat;
	float:left;
}
#CONTANT .signup .txtRight{
	margin-left:70px;
	margin-top:35px;
	float:left;
	width:550px;
}
#CONTANT .signup .txtRight h4{
	font:bolder 21px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	margin-right: 34px;
}
#CONTANT .signup .txtRight p{
	font:normal 19px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	letter-spacing:0.5px;
	margin-right: 110px;
}
#CONTANT .signup .txtRight .sign_btn{
	display:block;
	width:455px;
	height:90px;
	color:#FFF;
	text-align:center;
	font:normal 40px/90px "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#DE5438;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;
	font-weight:bolder;
	text-decoration:none;
	transition:all 500ms ease;
	margin:24px 0;
	letter-spacing:1.5px;
}
#CONTANT .signup .txtRight .sign_btn:hover{
	background-color:#9512c5;
}

#CONTANT .knowhow{
	width:100%;
	padding-top:30px;
	margin:0 auto;
}
#CONTANT .knowhow h4{
	font-family:"Century Gothic";
	font-weight:bolder;
	color:#282828;
	text-align:center;
	font-size:30px;
}
#CONTANT .knowhow h3{
	font:normal 21px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	text-align:center;
}
#CONTANT .knowhow .stepbox{
	width:932px;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:50px;
	overflow:hidden;
}
#CONTANT .knowhow .stepbox ul{}
#CONTANT .knowhow .stepbox ul li{
	float:left;
}
#CONTANT .knowhow .stepbox ul li a{
	display:inline-block;
	height:245px;
	background:url(../images/img_png.png) no-repeat;
	text-indent:-9999px;
}
#CONTANT .knowhow .stepbox ul li a img{
	width:100%;
	height:auto;
}
#CONTANT .knowhow .stepbox ul li a.sign{
	background-position:0 0;
	width:254px;
}
#CONTANT .knowhow .stepbox ul li a.sign:hover{
	background-position:0 -257px;
}
#CONTANT .knowhow .stepbox ul li a.text01{
	background-position:-254px 0;
	width:222px;
}
#CONTANT .knowhow .stepbox ul li a.text01:hover{
	background-position:-254px -257px;
}
#CONTANT .knowhow .stepbox ul li a.text02{
	background-position:-476px 0;
	width:222px;
}
#CONTANT .knowhow .stepbox ul li a.text02:hover{
	background-position:-476px -257px;
}
#CONTANT .knowhow .stepbox ul li a.finish{
	background-position:-698px 0;
	width:222px;
}
#CONTANT .knowhow .stepbox ul li a.finish:hover{
	background-position:-698px -257px;
}
#CONTANT .knowhow .notice{
	width:100%;
	line-height:60px;
	background-color:#f7f7f7;
	padding-left:50px;
}
#CONTANT .knowhow .notice .warn{
	display:inline-block;
	width:25px;
	height:25px;
	background:url(../images/img_png.png) no-repeat -953px 0;
	vertical-align:text-bottom;
	margin-right:5px;
	letter-spacing:1px;
}

#CONTANT .progress{}
#CONTANT .progress h4{
	font-family:"Century Gothic";
	font-weight:bolder;
	color:#282828;
	text-align:center;
	font-size:30px;
}
#CONTANT .progress h3{
	font:normal 21px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	text-align:center;
}
#CONTANT .progress .tablebox{
	position:relative;
	margin-top:20px;
	padding-top:35px;
	padding-bottom:35px;
	width:100%;
	min-height:597px;
	background:url(../images/train_bg.jpg) repeat-y;
}
#CONTANT .progress .tablebox .liststart{
	width:98%;
	margin-left:1%;
}
.progress .tablebox .liststart table{
	width:76%;
	margin:0 auto;
	display:block;
	border: 7px solid #8060b1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	background-color:#4B4B4B;
}
.progress table tr{}
.progress table td{
	line-height:1.6;
	border:2px solid #000;
	text-align:left;
}
.progress table td.white{
	background-color:#FFF;
	font:bolder 17px/1.6 "ITC Avant Garde Gothic","微軟正黑體";
	color:#5c5c5c;
	text-align:center;
	padding:2px 4px;
}
.progress table td.purple{
	background-color:#f6dcff;
	text-align:center;
	color:#000;
	font-weight:bold;
}
.progress .liststart table td.purple_in{
	font:bolder 16px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#f6f0ff;
	color:#8528a7;
	letter-spacing:0.5px;
	padding:5px 5px;
}
.progress .liststart table td.org{
	background-color:#fff6eb;
	text-align:center;
	color:#000;
	font-weight:bold;
}
.progress .liststart table td.org_in{
	font:bolder 16px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#ffffff;
	color:#e9411d;
	letter-spacing:0.5px;
	padding:5px 5px;
}

#CONTANT .condition{
	margin-top:70px;
}
#CONTANT .condition h4{
	font-family:"Century Gothic";
	font-weight:bolder;
	color:#282828;
	text-align:center;
	font-size:30px;
}
#CONTANT .condition h3{
	font:normal 21px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	text-align:center;
}
#CONTANT .condition .conbox{
	width:75%;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:50px;
}
#CONTANT .condition .conbox .contitle{
	border-bottom:3px solid #de461d;
	font:normal 20px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	display:inline-block;
}
#CONTANT .condition .conbox .tablebox{
	margin:20px 0;
}
#CONTANT .condition .conbox .tablebox table{}
#CONTANT .condition .conbox .tablebox table tr{}
#CONTANT .condition .conbox .tablebox table td{
	line-height:1.6;
	border:2px solid #FFF;
	text-align:left;
}
#CONTANT .condition .conbox .tablebox table td.gray{
	background-color:#ebebeb;
	font:bolder 16px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	color:#333;
	text-align:center;
	letter-spacing:2px;
}
#CONTANT .condition .conbox .tablebox table td.p_gray{
	background-color:#f4f4f4;
	font:bolder 16px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	color:#333;
	text-align:center;
	letter-spacing:2px;
}
#CONTANT .condition .conbox .tablebox table td.purple_in{
	font:bolder 16px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#f6f0ff;
	color:#8528a7;
	letter-spacing:0.5px;
	padding:5px 5px;
}
#CONTANT .condition .conbox .tablebox table td.org_in{
	font:bolder 16px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#ffeee9;
	color:#e9411d;
	letter-spacing:0.5px;
	padding:5px 5px;
}
#CONTANT .introduct{}
#CONTANT .introduct h4{
	font-family:"Century Gothic";
	font-weight:bolder;
	color:#282828;
	text-align:center;
	font-size:30px;
	margin-top:20px;
}
#CONTANT .introduct h3{
	font:normal 21px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	text-align:center;
}
#CONTANT .introduct .tablebox{
	background-color:#bfa8e1;
	margin-top:20px;
	padding-bottom:30px;
}
#CONTANT .introduct .tablebox .info{
	display:block;
	height:35px;
	line-height:35px;
	background-color:#8060b1;
	color:#FFF;
	text-align:center;
	font-size:17px;
	letter-spacing:0.5px;
	margin-bottom:30px;
}
#CONTANT .introduct .tablebox .info img{
	width:31px;
	height:28px;
	background:url(../images/ico.jpg) no-repeat;
	vertical-align:middle;
	margin-right:5px;
}
#CONTANT .introduct .liststart{
	  width:98%;
	  margin-left:1%;
	  z-index:66;
}
#CONTANT .introduct .liststart table{
	width:76%;
	margin:0 auto;
	margin-top:35px;
	border: 7px solid #8060b1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	display:block;
	background-color:#4B4B4B;
}
.introduct .liststarttable tr{}
.introduct .liststart table td{
	line-height:1.6;
	border:2px solid #000;
	text-align:left;
}
.introduct .liststart table td.white{
	background-color:#FFF;
	font:bolder 17px/1.6 "ITC Avant Garde Gothic","微軟正黑體";
	color:#5c5c5c;
	text-align:center;
	padding:2px 4px;
}
.introduct table td.purple{
	background-color:#f6dcff;
	text-align:center;
	color:#000;
	font-weight:bold;
}
.introduct .liststart table td.purple_in{
	font:bolder 16px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#f6f0ff;
	color:#8528a7;
	letter-spacing:0.5px;
	padding:5px 5px;
}
.introduct .liststart table td.org{
	background-color:#fff6eb;
	text-align:center;
	color:#000;
	font-weight:bold;
}
.introduct .liststart table td.org_in{
	font:bolder 16px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#ffffff;
	color:#e9411d;
	letter-spacing:0.5px;
	padding:5px 5px;
}
.introduct .liststart table td.gray_in{
	font:bolder 15px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#f5f5f5;
	color:#4941f1;
	letter-spacing:0.5px;
	padding:5px 5px;
	text-align:center;
}
.introduct .liststart table td.purple_plus{
	font:bolder 15px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#f6f0ff;
	color:#383838;
	letter-spacing:0.5px;
	padding:5px 5px;
}
.introduct .liststart table td.purple_plus span{
	font-size:17px;
	color:#8528a7;
}
#CONTANT .introduct .tablebox .signbtn{
	display:block;
	width:455px;
	height:90px;
	color:#FFF;
	text-align:center;
	font:normal 40px/90px "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#DE5438;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;
	font-weight:bolder;
	text-decoration:none;
	transition:all 500ms ease;
	margin:0 auto;
	margin-top:20px;
	letter-spacing:1.5px;
}
#CONTANT .introduct .tablebox .signbtn:hover{
	background-color:#9512c5;
}

#CONTANT .linkarea{
	padding-bottom:50px;
}
#CONTANT .linkarea h4{
	font-family:"Century Gothic";
	font-weight:bolder;
	color:#282828;
	text-align:center;
	font-size:30px;
	margin-top:50px;
}
#CONTANT .linkarea h3{
	font:normal 21px/1.8 "ITC Avant Garde Gothic","微軟正黑體";
	text-align:center;
}
/* 2023移除 start*/
#CONTANT .linkarea .sponsor{
	width:853px;
	height:87px;
	margin:0 auto;
	background:url(../images/sponsor.jpg) no-repeat;
	margin-top:30px;
	padding-bottom:50px;
}
#CONTANT .linkarea .sponsor a{
	display:block;
	float:left;
	height:87px;
}
#CONTANT .linkarea .sponsor a.metro{
	width:260px;
	background-position:0 0;
}
#CONTANT .linkarea .sponsor a.mcu{
	width:295px;
	background-position:-260px 0;
}
#CONTANT .linkarea .sponsor a.main{
	width:295px;
	background-position:-553px 0;
}
/* 2023移除 end */

/*color setting*/
.purple{
	color:#9951b3;
}
.blue{
	color:#381dde;
}
.center{
	text-align:center;
}
/*gotop*/
.scroll-top-wrapper{
    position:fixed;
	opacity:0;
	visibility:hidden;
	overflow:hidden;
	text-align:center;
	z-index:99999999;
    background-color:#9863BC;
	color:#eeeeee;
	width:50px;
	height:48px;
	line-height:48px;
	right:30px;
	bottom:30px;
	padding-top:2px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-ms-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover{
	background-color:#6D1EA3;
}
.scroll-top-wrapper.show{
    visibility:visible;
    cursor:pointer;
	opacity:1.0;
}
.scroll-top-wrapper i.fa {
	line-height:inherit;
}
 
#FOOTER{
	height:80px;
	background-color:#33185b;
	line-height:80px;
	text-align:center;
	color:#FFF;
	font-size:14px;
	letter-spacing:1.5px;
	font-family:"Century Gothic","微軟正黑體";
}

/* 2023 立即報名 footer btn */
#CONTANT .sign{
	width:990px;
	margin:0 auto;
	padding-bottom: 50px;
	border-bottom:2px dashed #9d6db2;
}
#CONTANT .txtRight {
	display: flex;
	justify-content: center;
}

#CONTANT .sign .txtRight .sign_btn{
	display:block;
	margin: auto;
	width:455px;
	height:90px;
	color:#FFF;
	text-align:center;
	font:normal 40px/90px "ITC Avant Garde Gothic","微軟正黑體";
	background-color:#DE5438;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:100px;
	font-weight:bolder;
	text-decoration:none;
	transition:all 500ms ease;
	margin:24px 0;
	letter-spacing:1.5px;
}
#CONTANT .sign .txtRight .sign_btn:hover{
	background-color:#9512c5;
}
/* 2023 linkarea*/
#CONTANT .linkarea .maskBlock {
	display: flex;
	margin-top: 30px;
	justify-content: center;
	align-items: center;
}
#CONTANT .linkarea .maskBlock a{
	margin: 0 30px;
}

/* login / signup modal */
.modal-cover {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
}
.modal-content {
  max-width: 400px;
  width: 90vw;
  background-color: #fff;
}
.modal-head {
  display: flex;
  justify-content: end;
  padding: 1rem;
}
.modal-body{
  padding: 1rem 2rem 2rem;
}
.modal-body p {
  margin-bottom: 2rem;
  text-align: center;
}
.modal-body .modal-btns {
  display: flex;
  justify-content: space-around;
}
.modal-body .modal-btns a {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.5rem;
  border-radius: 5rem;
  background-color: #DE5438;
  text-decoration: none;
  color: #FFF;
}