@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;
}
.cd-main-content a{
  text-decoration: underline;
  color: #000000;
}
h1{display: none;}
img{
  width: 100%;
  margin: 0;
}
.visiblePC{
  display: block;
}
.visibleMB,.logo_mb{
  display: none;
}
.wrapper{
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
}
.titleSection{
  max-width: 800px;
  margin: 0 auto 2% auto;
  width: 90%;
}
.cd-nav{
  display: flex;
}
.logo{
  width: 106px;
  display: inline-block;
  margin: 0 auto 0 0;
}
.breadcrumbs{
  text-align: right;
  padding: 2% 0;
}
footer{
  background-color: #39393a;
  padding: 12px 20px;
  color: #ffffff;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
  font-size: 16px;
}

.articleInfoBox{
  margin: 0 0 0 auto;
  text-align: right;
  padding: 0 10px 0 0;
}
.articleInfo{
  display: inline-block;
  text-align: left;
  padding: 0 10px 0 0;
}
.articleInfo p{
  margin: 5% 0;
}

/* index */
.kvArea_mb{
  position: relative;
}
.indexWording{
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  width: 90%;
}
/* index end */

/* main kv */
.mainArea{
  position: relative;
}
.mainWording,.mainWording_poetry,.mainWording_life,.mainWording_success,.mainWording_nature,.mainWording_campus{
  width: 30%;
  position: absolute;
  left: 35%;
  top: 41%;
  transform: translate(-50%,-50%);
  text-align: left;
}
.mainWording h2{
  font-size: 30px;
  margin-bottom: 2%;
}
.mainWording p{
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 1px;
}
.mainWording_w h2,.mainWording_w p{
  color: #ffffff;
}
/* main kv end*/


.titleBox{
  padding: 8px 30px;
  line-height: 1.4;
  color: #ffffff;
  display: inline-block;
  border-radius: 50px;
  font-weight: normal;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-size: 22px;
}
.teacherName{
  font-size: 18px;
}
.pageNavArea{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2%;
  z-index: 1;
  position: relative;
}
.pageNavBox{
  margin: 0 3%;
}
.preIcon{
  border-radius: 50px;
  padding: 4px;
  background-color: #706d5c;
  color: #ffffff;
  width: 30px;
  height: 30px;
  display: inline-block;
  line-height: 1.2;
}
.preWording{
  color: #000000;
}
.underline{
  text-decoration: underline;
}

/* 文繞圖 area */
.float-item {
  width: 90%;
  max-width: 250px;
  height: auto;
  margin: 10px;
  float: left;
}
.content {
  padding: 10px;
  font-size: 18px;
  // 1. 如果下面把溢出部份hidden掉了，就繞不了囉！
  // overflow: hidden; 
  // 2. 在這裡清除浮動(下兩種都不行)，文繞圖也是會失敗！
  // clear: both; 
  // @extend %clearfix;
}
.content p{
  text-indent: 2em;
}
.content_poetry p{
  text-indent: 0;
}
.container,.container_poetry {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.4;
  letter-spacing: 0.5px;
  @extend %clearfix;
}
.container_poetry{
  max-width: fit-content;
}

%clearfix {
	*zoom: 1;
	&:before, &:after {
		display: table;
		line-height: 0;
		content: "";
	}
	&:after {
		clear: both;
	}
}
/* 文繞圖 area end */

/* principal area */
.pcTitle{
  text-align: center;
  font-size: 22px;
  margin: 3% 0;
}
.pcSubTitle{
  font-size: 22px;
  font-weight: 800;  
}
.pcSubTitle1{
  font-size: 20px;
  font-weight: 800;
  margin: 2% 0;  
}
.pcImg{
  margin: 2% 0;
}
.pcSubTitle2{
  margin: 0 0 1% 0;
}
.pcWording{
  text-indent: 2em;
  margin: 0 0 4% 0;
}
/* principal area end */


/* human area */
.contentArea_human{
  position: relative;
  background: url(../images/cg_human_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 370px;
}
.bg_btm,.bg_btmW100{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80%;
  transform: translate(-50%, 0%);
  z-index: 0;
}
.bg_btmW100{
  width: 100%;
}
.titleBox_human{
  background-color: #674e96;
}
/* human area end */

/* poetry area */
.contentArea_poetry{
  position: relative;
  background: url(../images/cg_poetry_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 300px;
}
.container_poetry{
  display: flex;
  flex-wrap: wrap;
}
.mainWording_poetry{
  width: 40%;
  top: 51%;
}
.titleBox_poetry{
  background-color: #f29668;
}
/* poetry area end */

/* life area */
.contentArea_life{
  position: relative;
  background: url(../images/cg_life_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 300px;
}
.mainWording_life{
  top: 46%;
}
/* life area end */

/* success area */
.contentArea_success{
  position: relative;
  background: url(../images/cg_success_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 350px;
}
.mainWording_success{
  top: 46%;
  left: 29%;
}
.titleBox_success{
  background-color: #0172f3;
}
.articleEndName{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.articleEndName p{
  text-indent: 0;
}
/* success area end */

/* nature area */
.contentArea_nature{
  position: relative;
  background: url(../images/cg_nature_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 350px;
}
.mainWording_nature{
  top: 46%;
  left: 33%;
}
.titleBox_nature{
  background-color: #0fb582;
}
/* nature area end */

/* activity area */
.contentArea_activity{
  position: relative;
  background: url(../images/cg_activity_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 350px;
}
.mainWording_activity{
  top: 46%;
  left: 33%;
}
.titleBox_activity{
  background-color: #ba78fe;
}
/* activity area end */

/* campus area */
.contentArea_campus{
  position: relative;
  background: url(../images/cg_campus_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 350px;
}
.mainWording_campus{
  width: 32%;
  top: 44%;
  left: 27%;
}
.titleBox_campus{
  background-color: #639b40;
}
.teacherPic{
  margin: 2% auto;
}
/* campus area end */

/* art area */
.containerArt {
  width: 90%;
  margin: 0 auto;
}
.contentArea_art{
  position: relative;
  background: url(../images/cg_art_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 350px;
}
.mainWording_art{
  width: 32%;
  top: 44%;
  left: 27%;
}
.titleBox_art{
  background-color: #8256ae;
}
.artCon{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.artPic{
  width: 27%;
  margin-right: 2%;
}
.artVideo{
  width: 68%;
}

.artCarouselBox{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/*owl*/
.carouselNav,.carouselNav2 {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 100%;
}
button{ border:0;}
.carouselNav .carouselNav_prev,.carouselNav2 .carouselNav_prev{ left: -105px;}
.carouselNav .carouselNav_next,.carouselNav2 .carouselNav_next{ right: -105px;}
.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(130,86,174,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(130,86,174,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*/

/* art area end */

/* read area */
.contentArea_read{
  position: relative;
  background: url(../images/cg_read_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 350px;
}
.mainWording_read{
  width: 32%;
  top: 38%;
  left: 33%;
}
.titleBox_read{
  background-color: #6c66c8;
}
/* read area end */

/* visual area */
.contentArea_visual{
  position: relative;
  background: url(../images/cg_visual_bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: 350px;
}
.mainWording_visual{
  width: 32%;
  top: 41%;
  left: 36%;
}
.titleBox_visual{
  color: #000000;
  background-color: #39c1e4;
}
/* visual area end */



@media (max-width: 1170px) {
  .logo{
    display: none;
  }
  .cd-main-header{
    display: flex;
  }
  .logo_mb{
    width: 66px;
    display: inline-block;
    margin: 0 auto 0 0;
  }
  .mainWording {
    width: 38%;
  }
  .mainWording p {
    font-size: 18px;
    line-height: 1.2;
  }
}

@media (max-width: 768px) {
  .visiblePC{
    display: none;
  }
  .visibleMB{
    display: block;
  }
  footer{
    font-size: 14px;
  }
  /* main kv */
  .mainWording{
    width: 90%;
    left: 51%;
    top: 30%;
  }
  .mainWording h2 {
    font-size: 24px;
  }
  .mainWording p {
    font-size: 18px;
  }
  /* main kv end*/
  
}

@media (max-width: 480px) {
  .breadcrumbs {
    padding: 6% 0;
  }
  .titleBox{
    font-size: 22px;
  }
  .teacherName{
    font-size: 18px;
    margin-bottom: 5%;
  }
  .content{
    font-size: 20px;
  }
  .float-item {
    width: 100%;
    max-width: 500px;
    float: none;
    margin: 0 auto;
  }
  .contentArea_human,.contentArea_success{
    padding-bottom: 150px;
  }
  .contentArea_poetry,.contentArea_life,.contentArea_nature,.contentArea_activity,.contentArea_campus,.contentArea_art,.contentArea_read,.contentArea_visual{
    padding-bottom: 100px;
  }

  .pageNavArea {
    margin-top: 8%;
  }

  /* art area */
  .artCon{
    display: block;
  }
  .artPic{
    width: 60%;
    margin: 0 auto 2% auto;
  }
  .artVideo{
    width: 100%;
  }

  /* owl */
  .carouselNav .carouselNav_prev, .carouselNav2 .carouselNav_prev {
    left: 0px;
  }
  .carouselNav .carouselNav_next, .carouselNav2 .carouselNav_next {
    right: 0px;

  }
  /* owl end */    
  /* art area end */
  .articleInfoBox,.articleInfo{
    padding: 0;
  }
}