@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:none;
  font-family:Verdana, 'Noto Sans TC','Microsoft JhengHei', sans-serif;
  font-size: 16px;
  text-align: center;
  margin: 0;
}
img{
  display: block;
  margin: 0;
  width: 100%;
}
/* index */
.park-map {
  display: block;
    position: relative;
    width: 100%;
}
.park-map_mb {
  display: none;
}

.park-map img {
    display: block;
}

.notice{
    left:3%;
    top:15%;
    width:23%;
    height:15%;
}

.positive{
    left:30%;
    top:40%;
    width:30%;
    height:25%;
}

.creative{
    left:0%;
    top:60%;
    width:40%;
    height:35%;
}

.story{
    left:55%;
    top:0%;
    width:45%;
    height:45%;
}

.kinder{
    left:60%;
    top:30%;
    width:40%;
    height:45%;
}

.gallery{
    left:40%;
    top:70%;
    width:35%;
    height:25%;
}


.park-map{
    position:relative;
    width:100%;
    max-width:1920px;
    margin:0 auto;
}

.park-map img{
    width:100%;
    display:block;
}

/* hotspot 基本設定 */
.hotspot{
    position:absolute;
    cursor:pointer;
}
/* index end */

header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #3b8cc3;
	padding: 0 60px 0 32px;
}
.cg_logo{
	width: 20%;
}

/* header menu -----------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
  margin: 0;
  padding: 0;
  z-index: 1;
  position: relative;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color:#3b8cc3;
}

/* Styling the links */
nav a {
	display:block;
	padding:14px 12px;	
	color:#FFF;
	font-size:18px;
	text-decoration:none;
}


nav ul li ul li:hover { background: #3b8cc3; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #3b8cc3; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 45px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:200px;
	float:none;
	display:list-item;
	position: relative;
	background-color: #3b8cc3;
}
nav ul ul li a{
	line-height: 1.4;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-55px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:200px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { 
  content:  ' ⌄'; 
  position: relative;
  top: -5px;
}

li > a:only-child:after { content: ''; }

.arrowDown{
  position: relative;
  top: -5px;
}

/* Media Queries
--------------------------------------------- */
@media all and (max-width : 1100px) {
	nav a {
    	font-size: 16px;
		padding: 14px 3px;
	}
}

@media all and (max-width : 850px) {

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color:#3b8cc3;
		padding:8px 20px;	
		color:#FFF;
		font-size:20px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #3b8cc3;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
		width: 100%;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
	}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  	nav ul ul ul a{
		padding:8px 20px;	
		color:#FFF;
		font-size:20px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #56b4e8; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 
	}

	header {
		display: block;
		width: 100%;
		padding: 0;
	}
  .cg_logo {
    width: 50%;
    padding: 10px;
    margin: 0 auto;
  }
}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}
/* header menu end -----------------------------------------------------------------*/


/* info page */
.infoSection{
	background: url(../images/info/cg_info_bg1.jpg);
	background-size: cover;
	background-position: 50% 0;
}
.infoBannerBox{
	display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 3%;
}
.infoBanner{
	width: 48%;
}
.infoWordingCon{
	width: 48%;
	text-align: left;
	margin-left: 2%;
}
.infoWordingCon h2{
	font-size: 24px;
    margin-bottom: 2%;
}
.infoWording p{
	text-indent: 2em;
	text-align: left;
	margin-bottom: 1%;
	line-height: 1.4;
	font-size: 18px;
}
.infoContent{
	background-color: #ffffff;
    border: 5px solid #f0b243;
    border-radius: 20px;
    padding: 40px 20px;
    width: 90%;
    max-width: 1000px;
    margin: 3% auto;
}
.infoBox{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.4;
}
.infoBox h3{
	font-size: 28px;
}
.infoBox p{
	font-size: 24px;
}
.infoBox h4{
	font-size: 18px;
	text-align: right;
}
.articleBox p{
	margin-top: 4%;
	font-size: 18px;
}
.articleBox p{
	text-indent: 2em;
	text-align: left;
	margin-bottom: 2%;
}
.bgBtm{
	margin-top: 3%;
}
/* info page end */


/* positive page ------------------------------------*/
.positiveSection{
	background-color: #80d2e5;
}
.positiveBannerBox{
	background: url(../images/positive/cg_positive_bg.jpg);
	background-size: cover;
    background-position: 50% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 3% 5%;
}
.positiveBanner{
	width: 48%;
}
.positiveWordingCon{
	width: 48%;
	text-align: left;
	margin-left: 2%;
}
.positiveWording{
    margin-left: 6%;
}
.positiveWordingCon h2{
	font-size: 24px;
    margin-bottom: 2%;
}
.positiveWording p{
	text-indent: 2em;
	text-align: left;
	margin-bottom: 1%;
	line-height: 1.4;
	font-size: 18px;
}
.navMenuBox{
	display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1000px;
    margin: 2% auto;
}
.navMenuBtn{
	display: block;
    width: calc(100% / 4);
    padding: 0 1%;
}
.positiveContent{
	width: 90%;
    max-width: 1000px;
    margin: 3% auto;
}
.sentence{
	text-align: left;
    font-weight: 800;
    margin-top: 4%;
	font-size: 18px;
}
.articleItems{
	text-align: left;
}
.articleItemsTitle{
	margin: 2% 0;
}
.articleItems ul li{
	margin: 2% 0 2% 2%;
    line-height: 1.6;
	list-style-type: disc;
}
.positiveWordingCon h3{
	font-size: 20px;
	font-weight: 800;
}
.articleContent{
	border-radius: 20px;
    padding: 0px 20px;
    width: 100%;
    max-width: 1200px;
    margin: 3% auto;
}
.articleContent_horizontal{
	border-radius: 20px;
    padding: 0px 20px;
    width: 90%;
    max-width: 1400px;
    margin: 3% auto;
}
.articleBox{
	margin-top: 2%;
}
.positive_articleBox{
    width: 90%;
    max-width: 1000px;
    margin: 3% auto;
}
.positive_articleBox_border{
	background-color: #ffffff;
    border: 5px solid #f0b243;
    border-radius: 20px;
    padding: 40px;
    width: 90%;
    max-width: 1000px;
    margin: 3% auto 2% auto;
}
.positive_articleBox h3, .positive_articleBox_border h3{
    font-size: 24px;
}
.positive_articleBox p,.positive_articleBox_border p{
	margin: 1% 0 2% 0;
    font-size: 20px;
}
.cg_articleCon{
	// 1. 如果下面把溢出部份hidden掉了，就繞不了囉！
	// overflow: hidden; 
	// 2. 在這裡清除浮動(下兩種都不行)，文繞圖也是會失敗！
	// clear: both; 
	// @extend %clearfix;
	margin-top: 3%;
}

.float-item {
  width: 90%;
  max-width: 250px;
  height: auto;
  margin: 0 10px;
  float: left;
}
.cg_articleCon::after{
    content:"";
    display:block;
    clear:both;
}
.cg_articleCon p{
	font-size: 18px;
	text-align: left;
    text-indent: 2em;
	line-height: 1.4;
}
.poetry{
	width: fit-content;
    max-width: 310px;
    margin: 0 auto;
}
.poetry p{
    text-indent: 0;
}
.poetry_narrowImg{
	width: 90%;
	max-width: 400px;
	margin: 0 auto 2% auto;
}
.cg_articleCon img{
	margin: 2% 0;
}


/* positive page end------------------------------------*/

/* story page */
.storySection{
	background-color: #fad27a;
}
.navMenuBox_story{
	display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1000px;
    margin: 2% auto;
}
.navMenuBox_story img{
	width: auto;
	height: 50px;
}
.navMenuBtn_story{
	display: block;
    width: auto;
	height: 50px;
    padding: 0 1%;
	margin: 1% 0;
}
/* story page end */


/* creative page */
.creativeSection{
	background-color: #afeef9;
}
.articleStart{
	text-align: left;
	font-size: 18px;
    line-height: 1.4;
}
.articleEnd{
	text-align: right;
	font-size: 18px;
    line-height: 1.4;
}

.artConBox{
	width: 90%;
    max-width: 600px;
    margin: 0 auto;
}

/* owl */
.owl-carousel .owl-item{
	background-color: rgb(0 0 0 / 0)!important;
}
.articleAuthor{
  font-size: 24px;
  margin:0 auto 2% auto;
  position: relative;
  z-index: 0;
  text-decoration: underline;
}

.articleArea{
    margin: 5% auto 0 auto;
}
.articleBg{
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
}
.owl_conImg{
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.owl_conImg2{
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.owl_conImg3{
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.artOwlArea{ 
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
/* .artCarouselBox{
  position: absolute;
  width: 50%;
  top: 60%;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 1;
} */
.carouselNav,.carouselNav2 {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 100%;
}
button{ border:0;}
.carouselNav .carouselNav_prev,.carouselNav2 .carouselNav_prev{ left: 5px;}
.carouselNav .carouselNav_next,.carouselNav2 .carouselNav_next{ right: 5px;}
.carouselNav .carouselNav_prev:focus,.carouselNav2 .carouselNav_prev:focus,
.carouselNav .carouselNav_next:focus,.carouselNav2 .carouselNav_next:focus { outline: none;}
.carouselNav .carouselNav_prev,.carouselNav2 .carouselNav_prev,
.carouselNav .carouselNav_next,.carouselNav2 .carouselNav_next{
width: 50px;
height: 50px;
border-radius: 10px;
background: #3b8cc3;
z-index: 1;  
}
.carouselNav .carouselNav_prev:before,.carouselNav2 .carouselNav_prev:before,
.carouselNav .carouselNav_next:before,.carouselNav2 .carouselNav_next:before{
position: absolute;
content: '';
display: inline-block;
width: 0;
height: 0;
border: 12px solid transparent;  
top: 25%;  
}
.carouselNav .carouselNav_prev:before,.carouselNav2 .carouselNav_prev:before{border-right-color: #fff!important;left: 10%;}
.carouselNav .carouselNav_next:before,.carouselNav2 .carouselNav_next:before{border-left-color: #fff!important;left: 40%;}
.carouselNav .carouselNav_prev,.carouselNav2 .carouselNav_prev,
.carouselNav .carouselNav_next,.carouselNav2 .carouselNav_next {
  position: absolute;
  color: #000;
  font-size: 26px;
  margin: 0px;
  padding: 4px 10px 8px 10px;
  background:#3b8cc3;
  display: inline-block;
  cursor: pointer;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 10px;
  border: none;
}
.carouselNav2 .carouselNav_prev,.carouselNav2 .carouselNav_next {background: rgba(247,144,43,1);}

.articleTeacher{
  margin-bottom: 2%;
}
.owl-carousel .owl-item{
	border: 0!important;
}
/*.owl end */

/* creative page end */

/* artGallery page */
.photoArea,.videoArea{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto 3% auto;
}
.photoVideo{
  width: 38%;
}
.photoBox{
  width: 48%;
  margin: 1%;
}
.videoArea video{ 
  width: 100%;
}
.photoContent h3{
  font-size: 28px;
  margin: 3% auto 2% auto;
}
.artGallerySection{
	background-color: #f6e1e1;
}
.navMenuBox_artGallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 850px;
    margin: 2% auto;
}
.navMenuBox_artGallery img{
	width: auto;
	height: 50px;
}

/* video */
  .videoWidth{
   width: 46%;
    margin-left: 2%;
  }
.videoContent{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
  margin: 0 auto;
}
/* video end */
/* artGallery page end */

/* kindergarten page */
.kinSection{
  background-color: #b3e4fa;
}

.kinArticleContent{
	border-radius: 20px;
    padding: 0px 20px;
    width: 100%;
    max-width: 1000px;
    margin: 3% auto;
    line-height: 1.4;
}
.kinTitle{
  font-size: 28px;
}
.kinTitle2{
  font-size: 24px;
  margin: 2% 0;
}
.kinParagraph{
  text-indent: 2em;
  font-size: 18px;
  text-align: left;
}
.kinParagraphTitle{
  font-size: 18px;
  text-align: left;
  font-weight: 800;
  margin: 3% 0 2% 0;
}
.kinPhotoBox{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 2% 0;
}
.kinPhoto{
  width: 48%;
}
.kinPhoto2{
  width: 33%;
}
.kinVideo{
  margin: 2% auto;
  width: 100%;
  max-width: 800px;
}


.kindergartenTitle{
  font-size: 28px;
    margin-bottom: 1%;
}

.photoTitle{
  font-size: 22px;
    margin-bottom: 2%;
}
/* kindergarten page end*/


.btnArea{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.btnBox{
	display: block;
    width: 12%;
    margin: 1% 2%;
    padding: 0;
}


footer{
  background-color: #303030;
  padding: 12px 20px;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  /* index */
.park-map {
  display: none;
}
.park-map_mb {
  display: block;
  background: url(../images/cg_index_bg.jpg);
}
  /* index */
  .areaBtnBox{
    padding: 8% 0;
    width: 90%;
    margin: 0 auto;
  }
  .areaBtn{
    margin-bottom: 6%;
    display: block;
  }
  /* index mb end*/

  /* info */
  .infoBannerBox{
	display: block;
  }
  .infoBanner,.infoWordingCon,.infoContent,.infoBox{
	width: 100%;
  }
  .infoWordingCon{
	margin-left: 0;
  }
  .infoBox p {
    margin: 5% 0;
  }
  /* info end */

  /* positive page ------------------------------------*/
  .positiveBannerBox {
    background: url(../images/positive/cg_positive_bg_mb.jpg);
    background-size: cover;
    background-position: 50% 100%;
    padding: 5% 0 18% 0;
  }
  .positiveBannerBox{
	display: block;
  }
  .positiveBanner {
    width: 80%;
    margin: 0 auto;
  }
  .positiveWordingCon {
    width: 90%;
    text-align: left;
	margin: 5% auto;
   }	
   .positiveWording {
    margin-left: 0;
   }	
   .navMenuBtn {
    width: calc(100% / 2);
   }
   .btnBox {
    display: block;
    width: 25%;
   }
   .articleContent {
    margin: 8% auto 5% auto;
	padding: 0;	
	}
	.positive_articleBox p {
		margin: 3% 0 5% 0;
	}
	.positive_articleBox_border{
		padding: 30px 20px;
	}
	.positive_articleBox_border h3 {
   	 	margin-bottom: 6%;
	}	
	.positive_articleBox_border > p{
		margin: 1% 0 7% 0;
	}
	.float-item{
		float: none;
    	margin: 0 auto 3% auto;
	}
  /* positive page end------------------------------------*/
}


@media (max-width: 480px) {
      .cg_logo {
        width: 80%;
      }
.photoVideo {
    width: 100%;
    margin-bottom: 5%;
  }
  .photoContent h3,.kinPhoto,.kinPhoto2 {
    margin: 10% auto 5% auto;
  }
  .videoWidth,.kinPhoto,.kinPhoto2{
    width: 100%;
  }
  .kinPhotoBox{
    display: block;
  }
}