@charset "utf-8";
/* CSS Document */
body { background-color:#7B7B7B}
img {width: 100%}
.container { background-color: #EFEFEF;}
.section-banner { width: 100%; position:relative;}
.logo { position: absolute; z-index: 2; margin-top: 1%; margin-left: 2%}
.lang { position: absolute; z-index: 2; margin-top: 1%; margin-left: 70%}
@media (max-width: 768px) {.lang { margin-left: 50%}}
.lang a { color: #333;}
.logo img { width:33% }
@media (max-width: 768px) {.logo { display: none;}}
.banner {position: absolute; }
.banner img { width: 100% }
.graphic {  position: absolute; z-index: 1; }
.graphic img { width: 100% }
.graphic {  position: absolute; }
.bannerbg img{ width: 100% }

.section-box { position: relative; }

@media (max-width: 480px) {.section-box { margin-left: 10% }}

.box {width: 90%; padding: 50px 5%; }
.box-left1 {margin-left: -10%}
.box-left2 {margin-left: -20%}
@media (max-width: 768px) {
.box-left1 {margin-left: 0%}
.box-left2 {margin-left: 0%}}
@media (max-width: 768px) {.box {width: 50%; padding: 50px 5%; }}
@media (max-width: 480px) {.box {width: 80%; padding: 30px 2%; }}
.boxtext {position: relative; background-color: #9DC920; height: 30px; width: 90%; z-index:10;  margin-left: -20px;  }
.boxtext a{ font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif; color: #fff; font-size: 15px; margin-left: 10px; line-height: 30px; }
@media (max-width: 1200px) {.boxtext a {font-size:12px; }}
@media (max-width: 992px) {.boxtext a  {font-size:10px; }}
@media (max-width: 768px) {.boxtext a  {font-size:15px; }}


.boximg {position: relative;border: solid 3px #fff; overflow:hidden; z-index:9; margin-top: -50px; }
.boximg img {width: 100%}

.boximg img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.boximg:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}



.section-nav { position: relative; z-index: 99; margin-top: 37%;}
@media (max-width: 768px) {.menu { display: none}}
.menu {z-index: 999; width: 78%; height: 42px; background: #9DC920; margin-top: 50px; }
.menu:after {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 21px solid #9DC920;
    border-top: 21px solid transparent;
    border-right: 21px solid transparent;
    position: absolute;
	margin-left: 78%;


}
.menu>ul { list-style: none; margin: 0 auto;}
.menu>ul>li  { display: block; position: relative; float: left; background: #6F268A; margin-left: 4%; height: 26px; margin-top: 8px; width: 12%; text-align:center; z-index: 100}
@media (max-width: 992px) {.menu>ul>li  { width: 13%; margin-left: 5%; }}

.menu>ul>li:before { display: block;
    content: "";
    height: 0; 
    width: 0;
    border: 13px solid #6F268A;
    border-bottom: 13px solid transparent;
    border-left: 13px solid transparent;
    position: absolute;
    margin-left: -26px;}
	
.menu>ul>li:after {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 13px solid #6F268A;
    border-top: 13px solid transparent;
    border-right: 13px solid transparent;
    position: absolute;
	margin-top: -24px;
	right: -26px;

}
.menu>ul>li:nth-child(4):after {margin-top: -49px;}
.menu>ul>li:nth-child(5):after {margin-top: -49px;}
.menu>ul>li>a { font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif; color: #fff; font-size: 1.1em;  padding: 2px 12px 2px; font-weight:normal; line-height: 24px;}
@media (max-width: 1200px) {.menu>ul>li>a {font-size: 0.82em; padding: 2px 2px 2px;}}
@media (max-width: 992px) {.menu>ul>li>a {font-size: 0.70em;padding: 2px 1px 2px; }}


.menu a:hover {color: #EA5514; text-decoration: none}

.menu>ul>li>ul { visibility:hidden; display: block; width: 200%; position: relative; background-color: #4F0D64; margin-top: -50px; z-index: 999;}

.menu>ul>li>ul>li {  display: block; padding-left: 0px; height: 25px; text-align:left;}
.menu>ul>li>ul>li>a {  font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;color: #fff; font-size: 1.0em;  padding: 0px;  line-height: 30px; margin-left: -15% }
@media (max-width: 1200px) {.menu>ul>li>ul>li>a  {font-size: 0.82em; }}
@media (max-width: 992px) {.menu>ul>li>ul>li>a  {font-size: 0.70em; margin-left: -15% }}
.menu>ul>li:hover > ul {

  opacity: 1;
  visibility: visible;
  top: 52px;
}


.section-footer {height: 40px; background: url(../images/footer.jpg) repeat;}
.section-footer span { color: #fff; font-size: 12px; margin-left: 5%; line-height: 32px;  }
@media (max-width: 480px) {.section-footer {height: 60px; }
.section-footer span {  font-size: 11px; line-height: 18px;  }}


.section-content  { position: relative; font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif; font-size: 15px; color: #000; text-align: justify; z-index: 9; margin-top: 25px; }
@media (max-width: 992px) {.section-content {font-size: 12px; }}
.about-menu {width: 95%}

@media (max-width: 768px) { .about-menu {display: none;} }
.about-menu ul { list-style: none; border-right: thin solid #fff; padding-right: 5%;}
.about-menu li  { height: 35px; border-bottom: thin solid #999; }
.about-menu li a{  color: #000; font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif; font-size: 14px; text-decoration: none; line-height: 30px; padding: 4px 10px 0px; }
@media (max-width: 1200px) {.about-menu li a  {font-size: 0.78em; }}
@media (max-width: 992px) {.about-menu li a  {font-size: 0.78em; }}
.about-menu li a:hover{  color: #FFBE00;}
.about-menu li .double {line-height: 10px; }


.banner-img { border: solid 2px #fff; width: 100%}
.header1 { display: inline-block; font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif; background: #9DC920; color: #fff; font-size: 19px; line-height: 28px; padding: 3px 10px 3px; margin-top: 15px;}
.header2  { font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif; color: #000; font-size: 17px; line-height: 24px; margin-top: 15px;}

.counterbar { position: relative; margin-top: 25px; z-index: 98;  }
.notice-bar-title { width: 30%; display: inline-block; margin-left: 10%}

.counter { width: 40%; display: inline-block;}
@media (max-width: 768px) {.notice-bar-title { width: 100%; display: inline-block; margin-left: 5%}
.counter { width: 100%; display: inline-block;}}
.notice-bar-title-icon{
	display:inline-block;
	float:left;
	margin-right:15px;
}
.notice-bar-title .title-note{
	margin-top:4px;
}
.notice-bar-title strong{
	font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
	font-size:16px;
	color:#333;
	font-weight:700;
	letter-spacing:2px;
	display:block;
}
.notice-bar-event-title h5, .notice-bar-event-title .date{
	margin-bottom:0;
}
.counter .timer-col{
	display:inline-block;
	
	text-align:center;
}
.timer-col #days, .timer-col #hours, .timer-col #minutes, .timer-col #seconds{
	display:inline-block;
	font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
	font-size:18px;
	padding:5px 10px;
}
.timer-col #days{
	background:#eceae4;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.timer-col #hours, .timer-col #minutes, .timer-col #seconds{
	background:#eceae4;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.timer-col .timer-type{
	font-size:12px;
	display: inline-block;
	margin-top:2px;
}
.table01 { width: 100%;}
.table01 td { background-color: #fff; border-bottom: dotted thin #999; padding: 3px; text-align:left;}
.greenheader tr:first-child td{ background-color: #0C6311; color: #fff}
.inputfield {width: 100%}
#step1, #step2, #step3, #step1a, #step2a {width: 100%; border: solid thin #999; padding: 10px; background-color:#fff}
#step2, #step3 {display: none}
#step2a {display: none}
#divRow2, #divRow3, #divRow4, #divRow5, #divRow6 { display: none}
.pressdate { display: inline-block; background: #6F268A; color: #fff; font-size: 14px; line-height: 20px; padding: 3px 10px 3px; margin-top: 15px;}

.photocaption { display: inline-block; width: 60%; margin-top: 15px;}
.media {width: 30%; background-color: #fff; border: solid thin #ACACAC; border-left: solid 3px #FFCE00; padding: 8px; cursor: pointer; display: inline-block; vertical-align:text-top; margin-left: 10px; height: 355px;}
@media (max-width: 1280px) {.media  {height: 330px; }}
@media (max-width: 992px) {.media  {height: 220px; }}
@media (max-width: 768px) {.media  {height: auto; }}
.media .photo {overflow: hidden}
.media .photo img {width: 100%}
.media .title { color: #17580A; margin-top: 10px;height: 95px;}
@media (max-width: 768px) {.media .photo img {width: 100%}
.media .title { color: #17580A; margin-top: 10px;height: auto;}}
.media .date { font-size: 12px; color: #5F5F5F;margin-top: 10px;}
.media .plus { width: 20px; height: 20px;  background-color: #01680A; float: right;  }
.media .plus span { color: #fff; font-size: 18px; margin-left: 6px; line-height: 20px;}
.media img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.media:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
.alignleft {text-align: left}
.sologo {display: inline-block; padding: 10px; vertical-align: middle;}
.sologo img {width: auto;}
.so { background-color: #fff; border-radius: 15px; width: 100%; text-align:left; }
.routea, .routeb {display: none }
video {width: 100%}