body { overflow-x: hidden;background:#dddeee; }
#mtkContainer { position: relative;overflow-x: hidden; }
#mtkContainer,
#mtkContainer * {vertical-align: top; box-sizing: border-box; }

.bgWhite { background:#fff; }


nav.pageMenu { position: absolute; top: 0px; left: 0; padding-right: 16%; width: 100%; z-index: 20; text-align: right; background:rgba(255,255,255,0.9); }
nav.pageMenu li { padding: 30px 20px; display: inline-block; transition: .5s; }
nav.pageMenu li:hover {  background: #2d3386;  }
nav.pageMenu li,
nav.pageMenu li a { font: 20px/1em "微軟正黑體"; color: #2d3386; letter-spacing: normal;  transition: .5s;}
nav.pageMenu li:hover a { color: #fff; font-weight: bold; text-decoration: none; }

.bgBlockBox { display: inline-block; padding: 20px; border:3px solid #fff; background:rgba(45,51,134,0.8)}

header.header { position: relative; width: 100%; overflow: hidden; }
header.header h1 {position: relative; padding: 35vh 0;  width: 100%; font:40px/1.4em "微軟正黑體";color: #fff; text-align: center;
 text-shadow: 0 0 5px rgba(0,0,0,1); z-index: 10;z-index: 1; }
header.header h1 strong { font-size: 50px; display: block; }

.bgViewBase { position: absolute; top:0; left: 0;  width: 100%; height: 100%; z-index: -1; }
.bgViewBase * {  width: 100%; height: 100%; }
.bgViewBase .w100 {width: 100%; height: 100%; }
.bgViewBase .bg1 { background:url(../images/headerBg1.jpg) top center no-repeat; background-size:   auto 100% }
.bgViewBase .bg2 { background:url(../images/headerBg2.jpg) top center no-repeat; background-size:   auto 100% }
.bgViewBase .bg3 { background:url(../images/headerBg3.jpg) top center no-repeat; background-size:   auto 100% }
.bgViewBase .bg4 { background:url(../images/headerBg4.jpg) top center no-repeat; background-size:   auto 100% }


.content { margin:0 auto 30px auto; padding: 20px; width: 90%; max-width: 1200px; }
.content h2 i { display: block; font-size: 50px; }
.content h2 { font: bold 30px/1.4em "微軟正黑體"; color: #2d3386;text-align: center; }
.content.cusTop {  transform: translateY(-50px); margin-bottom: -100px;   position: relative; z-index: 30; }
.content.cusTop2 {  transform: translateY(-50px); margin-bottom: 0px;   position: relative; z-index: 30; }

.volunteerInformation {}
.volunteerInformation h3 { display: inline-block; margin-bottom: 10px; padding: 5px 10px; font: 20px/1.4em "微軟正黑體"; color: #fff;
border-radius: 0 99em 99em 0; background: #2d3386; }
.volunteerInformation ul { margin-bottom: 20px; }
.volunteerInformation li { margin-left: 20px;  font: 18px/1.6em "微軟正黑體"; color: #000; list-style: none; }
.volunteerInformation li a:link { border-radius: 99em; padding: 0 10px; background:#dddeee; }
.volunteerInformation li .yellow { border-radius: 99em; padding: 0 10px; background:#ffe0a9; color:#000;}
.volunteerMain { margin: 0 auto; width: 90%; max-width: 800px; padding: 10px; text-align: center; border:1px solid #555; }

.aboutContent.box2 { }
.aboutContent.box2 > div { display: inline-block; letter-spacing: normal; vertical-align: top; }
.aboutContent.box2 .img { width: 45%; }
.aboutContent.box2 .img img { width: 100%; }
.aboutContent .cusImgPos1 { transform: translate(20px,20px); }
.aboutContent .cusImgPos2 { transform: translate(-20px,10px); }
.aboutContent.box2 .text { padding: 20px 20px 20px 60px; width: 55%; text-align: center; background:#2d3386; }
.aboutContent.box2 .text.cusPos2 { padding: 20px 50px 20px 30px; }
.aboutContent h3 { font: bold 24px/1.4em "微軟正黑體"; color: #fff; text-align: center;}
.aboutContent p { font: 16px/1.8em "微軟正黑體"; color: #fff; text-align: left;}

.parallax-window { padding: 100px 0; }


.booking {}
.group-type-ph {     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLe*/}
.group-type-ph .ph { display: inline-block; margin: 0% 0.5% 20px 0.5%; padding: 0 0 10px 0; width: 24%; letter-spacing: normal; 
	border-radius: 20px; overflow: hidden; box-shadow: 0 5px 5px rgba(0,0,0,0.2); text-align: center; transition: .5s; }
.group-type-ph .ph:hover { transform: scale(1.1);}	
.group-type-ph .ph:hover a { text-decoration: none; }
.ph img { width: 100%; }
.ph .ph-title {  font: 16px/1.4em "微軟正黑體"; color: #fff; text-align: center; background:#2d3386; }
.ph-detail,
 .ph-feature {  padding: 10px; font: 15px/1.4em "微軟正黑體"; color: #000; text-align: left; }
.price { display: block; margin-top: 0px; font: 15px/1.4em "微軟正黑體"; color: #fd2200;  }
.price span { font: 25px/0.6em "微軟正黑體"; color: #fd2200;  }

.seminarInformation { text-align: center; }
.seminarInformation h3 { display: inline-block; margin-bottom: 10px; padding: 5px 10px; font: 20px/1.4em "微軟正黑體"; color: #fff;
border-radius: 99em 99em; background: #2d3386; }


.seminarInformation p { font: 16px/1.8em "微軟正黑體"; color: #000; }
.seminarInformation i {font-size: 24px; color: #000;margin-right: 5px;}
.seminarBox { display: inline-block; text-align: left; padding: 10px; border:1px solid #bbb;margin:10px auto;}
.seminarBox p { font: 16px/1.8em "微軟正黑體"; color: #000; }
.seminarBox b { font:bold 16px/1.8em "微軟正黑體"; color: #000; }
.contacts{background: #FFF;text-align: center;}
.contacts .contactsBox > div {margin: 20px;display: inline-block;}
.contacts .contactsBox i{font-size: 50px;background: #2d3386;border-radius: 99em;padding: 25px 20px;color:#FFF;width: 100px;height: 100px;text-align: center;}
.contacts .contactsBox a p{color:#2d3386;font:18px/1.4 "微軟正黑體";}
.contacts .contactsBox a:hover,.contacts .contactsBox a:visited,.contacts .contactsBox a:active{text-decoration: none;}



.stop{font: bold 40px/1em "微軟正黑體"; color: #c40000;text-align: center;border-bottom: 1px solid #c40000;margin: 20px 0;padding: 10px;}
.stop i{font-size:42px;color:#c40000;margin-right: 5px;}



@media only screen and (max-width: 1400px) {
nav.pageMenu { padding-right: 0; }
}

@media only screen and (max-width: 1300px) {
.group-type-ph .ph {  margin: 0% 1.5% 20px 1.5%;  width: 30%; }

}

@media only screen and (max-width: 900px) {
.aboutContent.box2 > div { /*display: block;*/ }
.aboutContent.box2 .img { width: 30%; }
.aboutContent.box2 .text { padding: 5%; width: 70%; }
}

@media only screen and (max-width: 800px) {

nav.pageMenu li { padding: 2% 0; width: 25%; text-align: center; }
nav.pageMenu li,
nav.pageMenu li a {  font: 20px/1em "微軟正黑體"; }

header.header h1 { font:30px/1.4em "微軟正黑體"; }
header.header h1 strong { font-size: 40px;  }
.content.cusTop {  transform: translateY(-15%);  margin-bottom: -15%;  }

.aboutContent h3 { font: bold 20px/1.4em "微軟正黑體"; }
.aboutContent p { font: 14px/1.6em "微軟正黑體"; }

.group-type-ph .ph {  margin: 0% 1.5% 20px 1.5%;  width: 47%; }


}

@media only screen and (max-width: 768px) {



.bgViewBase .bg1 { background:url(../images/headerBg1m.jpg) top center no-repeat; background-size:  auto 100% }
.bgViewBase .bg2 { background:url(../images/headerBg2m.jpg) top center no-repeat; background-size: auto  100%  }
.bgViewBase .bg3 { background:url(../images/headerBg3m.jpg) top center no-repeat; background-size: auto  100%  }
.bgViewBase .bg4 { background:url(../images/headerBg4m.jpg) top center no-repeat; background-size: auto  100%  }

}


@media only screen and (max-width: 500px) {
.bgBlockBox  { width: 90%; }
.group-type-ph .ph {  margin: 0% 1.5% 20% 1.5%;  width: 97%; max-width: 300px; }

nav.pageMenu li a {  font: 14px/1em "微軟正黑體"; }

header.header h1 { font:30px/1.4em "微軟正黑體"; }
header.header h1 strong { font-size: 40px;  }

.volunteerInformation { text-align: center; }
.volunteerInformation h3 { border-radius: 99em; }
.volunteerInformation ul {  margin-bottom: 15%; text-align: left; }
.volunteerInformation li { margin-left: 0px; margin-bottom: 3%; font: 16px/1.4em "微軟正黑體"; }


.aboutContent.box2 > div { display: block; l }
.aboutContent.box2 .img { width: 100%; }
.aboutContent .cusImgPos1 { transform: translate(0,0); }
.aboutContent .cusImgPos2 { transform: translate(0,0); }
.aboutContent.box2 .text,
.aboutContent.box2 .text.cusPos2 { padding: 5%; width: 100%; }


.content h2.small { font-size: 40px; } 
.seminarBox { display: inline-block; text-align: left; padding: 10px; border:1px solid #bbb;}
.seminarBox p { font: 14px/1.8em "微軟正黑體"; color: #000; }


}

@media only screen and (max-width: 360px) {
nav.pageMenu li a {  font: 12px/1.2em "微軟正黑體"; }
}


.bnad{text-align: center; margin: 0 auto;}
.bnad img{
    width: 100%;

    max-width: 1160px;
}