@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;
}
a{ text-decoration: none;}
a:hover{  color: #ffffff;}
.linkRight a:hover,.linkLeft a:hover{ 
  color: #ffffff;
  text-decoration: underline;
}
img{
  display: block;
  width: 100%;
  image-rendering: -webkit-optimize-contrast;
}
.hiddenS{ display: block;}
.hiddenXL{ display: none;}

.wrapper,.wrapper2,.wrapper3{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}
.wrapper2{ max-width: 1200px; }
.wrapper3{ max-width: fit-content; }
.title{
  color:#7821f4;
  font-size: 3rem;
  font-weight: 800;
  margin: 2% auto;
}
.subTitle{
  font-size: 1.8rem;
  margin-bottom: 3%;
}
.nameArea{
  display: flex;
  justify-content: center;
}
.nameBox{
  background-color: #ff43a1;
  border-radius: 50px;
  color: #ffffff;
  padding: 8px 40px;
  display: inline-block;
  font-size: 1.8rem;
  margin: 1%;
}
.linkArea{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.linkBtn{
  display: block;
  background-color: #ff43a1;
  border-radius: 50px;
  color: #ffffff;
  padding: 6px 20px;
}



/*menu*/
.navbar-collapse.collapse,.navbar-nav{ width: 100%!important;}
.menuArea{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1% 0;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}
.logo{ width: 80px;}
.navbar-nav {
  overflow: visible!important;
}
.nav>li{ font-size: 2.3rem;}
.dropdown-menu{ font-size: 1.8rem!important;}
.navbar-nav>li{ width: calc(100% / 7);}
.navbar-collapse{
  padding-left: 0!important;
  padding-right: 0!important;
}
.navbar-nav>li,.navbar-nav>li>a:link,.navbar-nav>li>a:hover,.navbar-nav>li>a:active{ border-radius: 50px!important;}
.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #ffffff;
  line-height: 26px!important;
}
        .color1,.navbar-nav>li.color1 a:visited,.navbar-nav>li.color1 a:hover,.navbar-nav>li.color1 a:active{ background-color: #4665d9!important;}
        .color2,.color2>a,.navbar-nav>li.color2 a:visited,.navbar-nav>li.color2 a:hover,.navbar-nav>li.color2 a:active{ background-color: #f97f41!important;}
        .color3,.color3>a,.navbar-nav>li.color3 a:visited,.navbar-nav>li.color3 a:hover,.navbar-nav>li.color3 a:active,.mainBtnColor2{ background-color: #ff43a1!important;}
        .color4,.color4>a,.navbar-nav>li.color4 a:visited,.navbar-nav>li.color4 a:hover,.navbar-nav>li.color4 a:active,.mainBtnColor3{ background-color: #fcb412!important;}
        .color5,.color5>a,.navbar-nav>li.color5 a:visited,.navbar-nav>li.color5 a:hover,.navbar-nav>li.color5 a:active,.mainBtnColor4{ background-color: #4665d9!important;}
        .color6,.color6>a,.navbar-nav>li.color6 a:visited,.navbar-nav>li.color6 a:hover,.navbar-nav>li.color6 a:active,.mainBtnColor6{ background-color: #36a895!important;}
        .color7,.color7>a,.navbar-nav>li.color7 a:visited,.navbar-nav>li.color7 a:hover,.navbar-nav>li.color7 a:active,.mainBtnColor7{ background-color: #774bef!important;}
        .color8,.color8>a,.navbar-nav>li.color8 a:visited,.navbar-nav>li.color8 a:hover,.navbar-nav>li.color8 a:active,.mainBtnColor5{ background-color: #f220ac!important;}
/*menu end*/

/*index*/
.indexConArea{
  background: url(../images/indexBg.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 100%;
  width: 100%;
  height: 780px;
}
.indexTitle{
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}
.indexCon{
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 1px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.indexCon p { margin: 1% 0;}
.indexB{ 
  position: relative;
  z-index: -1;
}
.contentPic{
  width: 60%;
  margin: 2% auto;
}
/*index end*/

/*teacher*/
.teacherArea{
  background-color:#92e5ff;  
}

.content p {
  text-align: left;
  line-height: 1.4;
  font-size: 1.8rem;
  letter-spacing: 1px;
}
.float-item,.float-item2 {
  /* background: #ccc;
  width: 100px;
  height: 100px; */
  margin: 10px;
  float: left;
  width: 250px;
}
.float-item2{ float: none;}
.floatRight{ float: right; }
.content {
  padding: 10px;
  // 1. 如果下面把溢出部份hidden掉了，就繞不了囉！
  // overflow: hidden; 
  // 2. 在這裡清除浮動(下兩種都不行)，文繞圖也是會失敗！
  // clear: both; 
  // @extend %clearfix;
}
.contentPoem,.contentS,.contentPoemB,.contentPoemB2{
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.contentPoemB{ max-width: 500px;}
.contentPoemB2{ max-width: 370px;}
.contentS{max-width: 700px;}
.container {
  width: 300px;
  margin: 0 auto;
  @extend %clearfix;
}

%clearfix {
	*zoom: 1;
	&:before, &:after {
		display: table;
		line-height: 0;
		content: "";
	}
	&:after {
		clear: both;
	}
}

.p2{
  text-indent: 2em;
}
/*teacher end*/

/*nFly*/
.nFlyArea{
  background-color:#ccefff;  
}
/*nFly end*/

/*hLearn*/
.hLearnArea{
  background-color:#c7e2d0;  
}
/*hLearn end*/

/*nLife*/
.nLifeArea{
  background-color:#cffffe;  
}
/*nLife end*/

/*hImagine*/
.hImagineArea{
  background-color:#fcf5f8;  
}
/*hImagine end*/

/*owl*/
.artOwlArea{ 
  position: relative;
  width: 100%;
  max-width: 1200px;
  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: 45px;}
.carouselNav .carouselNav_next,.carouselNav2 .carouselNav_next{ right: 55px;}
.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: 50%;
background: rgba(255,67,161,1);
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: rgba(255,67,161,1);
  display: inline-block;
  cursor: pointer;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: none;
}
.carouselNav2 .carouselNav_prev,.carouselNav2 .carouselNav_next {background: rgba(247,144,43,1);}
/*owl end*/

/* nArt */
.nArtArea{
  background-color:#fdfada;  
}
.nArtName{ margin-bottom: 2%;}
.nArtImg{
  max-width: 600px;
  width: 95%;
  margin: 0 auto;
}
.nArtImg2{
  max-width: 750px;
  width: 95%;
  margin: 0 auto;
}
.nArtImg3{
  max-width: 500px;
  width: 95%;
  margin: 0 auto;
}
.videoBox{
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.videoBox2{
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
/* nArt end */


/*iframe youtube-------------------------------------------------*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
}

  .video-container iframe, .video-container object, .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
/*iframe youtube-------------------------------------------------*/
/*memory end*/

footer{ 
  display: flex!important;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  background-color: #321dc6;
  width: 100%;
  height: 100px;
  color: #ffffff;
  flex-direction: column;
}
footer a{
  text-decoration: underline;
  color: #ffffff;
  display: block;
  line-height: 1.4;
  margin-bottom: 0.5em;
}

@media only screen and ( min-width: 1920px ) {
  .nav>li{ font-size: 3rem;}
}

@media only screen and ( max-width: 1500px ) {
  .nav>li{ font-size: 2rem;}
}

@media only screen and ( max-width: 1000px ) {
  .navbar-nav>li{ width: 100%!important;}

  .navbar-toggle{ background-color: #353535!important;}
  .indexCon { font-size: 1.5rem;}
  .indexCon br{ display: none;}
  footer{
    line-height: 1.4;
    letter-spacing: 2px;
    padding: 0 10px;
  }    
}

@media screen and (max-width: 768px){
  .navbar-toggle{ background-color: #353535;}
  .navbar-toggle .icon-bar{ background-color: #ffffff;}
  .navbar-nav.sm-collapsible a.has-submenu { padding-right: 15px;}
  .dropdown-menu>li>a{ color: #ffffff;}
}

@media only screen and ( max-width: 480px ){
  .hiddenXL,.lifeTop,.learnInfoBox2,.artLinkRight a,.nameArea{ display: block;}
  .hiddenS,.bgLeft,.bgRight{ display: none;}
  .indexCon{ margin: 10% auto;}
  .indexConArea{
    height: 100vh;
    padding-bottom: 10%;
    background-position: right;
  }
  .dropdown-menu>li>a{ color: #ffffff!important;}
  .carouselNav .carouselNav_prev, .carouselNav2 .carouselNav_prev {
    left: 0px;
  }
  .carouselNav .carouselNav_next, .carouselNav2 .carouselNav_next {
    right: 0px;
}
}