@charset "UTF-8";
/* CSS Document */

#block-omia-theme-gdpr {
  display: none;
}

.omia-logo {
  width: auto;
  height: 100%;
  max-width: 140px;
  max-height: 50px;
  padding-top: 8%;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .omia-logo {
    width: auto;
    max-height: 46px;
    min-height: 26px;
  }
}

@media screen and (min-width: 768px) {
  body {
    min-width: auto;
  }

  .container {
    width: auto;
  }
}

/* logo txt list */
.logo-line2 {
  border-right: 1px solid #999;
  width: 1px;
  height: 32px;
}

.logo-index2 {
  color: #333;
  font-size: 19px;
  font-weight: 500;
  margin-right: 16px;
  margin-left: 16px;
  white-space: nowrap;
}

.logo-index2:hover {
  color: #333;
}

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

  .logo-line2,
  .logo-index2 {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .logo-line2 {
    height: 26px;
  }

  .logo-index2 {
    margin-right: 6px;
    margin-left: 6px;
    font-size: 17px;
  }
}

/* cover */
.cover {
  background: url(../images/pc_bn_06.jpg) no-repeat center center / cover;
  height: 400px;
}

@media screen and (max-width: 768px) {
  .cover {
    background: url(../images/ph_bn_06.jpg) no-repeat top center / 100% auto;
    height: auto;
    padding: 58% 0 0;
  }
}


/* coverB */
.coverB {
  background: url(../images/pc_bn_06B.jpg) no-repeat center center / cover;
  height: 400px;
}

@media screen and (max-width: 768px) {
  .coverB {
    background: url(../images/ph_bn_06B.jpg) no-repeat top center / 100% auto;
    height: auto;
    padding: 58% 0 0;
  }
}



/*video*/
/* 設置容器的比例，以保持影片的16:9比例 */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 比例 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 0 0 80px 0;
}

@media screen and (max-width: 770px) {
  .video-container {
    margin: 0 0 40px 0;
  }
}

/* Vimeo iframe 設置為完全填滿容器 */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* container */
.container {
  width: 100%;
}

.pagesize {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 40px;
}

/*Round the corners of the image*/
.class-pic {
  width: 375px;
  height: 225px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0px 5px 10px #dac9c1;
}

/*Planning Zone*/

.planbox{
	width: 45%;
	height: auto;
	float: left;
	margin: 0 2%;
}
.planbox span{color: #ff5430; font-weight: 500}
.planbox h2{font-size: 1.4em}

@media (max-width: 760px) {
	.planbox{
	width: 92%;
	height: auto;
	float: none;
	margin: 0 4% 4%;
	box-sizing: border-box	
	}
}






.planbox ul{list-style: none}
.planbox li:before {
  content: '📣 ';
  margin-left: -22px;
}	


.clean{ clear:both}

.planbox1 {
  width: 45%;
  height: auto;
  float: left;
  margin: 0 9% 0 0;
}

.omia_plan {
  max-width: 500px;
  width: 100%;
  height: auto;
  padding: 29% 10% 20px;
  border-radius: 20px;
  color: #000;
  box-shadow: 0px 5px 10px #dcdcdc;
  background-position: top center;
  text-align: left;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #fff;
  font-size: 1.1rem;
  background-image: url("https://www.omia.com.tw/sites/default/files/omia/event/250409_omia/plan1_0407.gif");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.btn2 {
  width: 100%;
  height: 45px;
  font-size: 1em;
  line-height: 45px;
  margin: 15px auto 10px;
	padding: 0 3%;
  text-align: center;
  border-radius: 23px;
  display: inline-block;
  transition: 0.5s;
}

.btn2 a:link,
.btn2 a:visited {
  width: 100%;
  height: 100%;
  color: #fff;
  display: block;
  border-radius: 23px;
  background-color: #4b9af8;
  border: 1px solid #4b9af8;
}

.btn2 a:hover,
.btn2 a:active {
  width: 100%;
  height: 100%;
  color: #fff;
  display: block;
  border-radius: 23px;
  background-color: #4b9af8;
  border: 1px solid #4b9af8;
  text-decoration: none;
}

.btn2:hover {
  transform: scale(1.03);
}

@media screen and (max-width: 768px) {
  .btn2 {
    width: 100%;
    height: 45px;
    line-height: 40px;
	padding: 0;  
  }
}

/*方案與獎項 大區塊*/
.omia_plus_planbox_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 60px 0;
  padding: 1px 0 0 0;
}

/*獎項 區塊*/
.planbox2 {
  flex: 1;
  height: auto;
  float: left;
  position: relative;
}

.planbox2_title1 {
  font-size: 23px;
  color: #000;
  line-height: 42px;
  font-weight: bold;
  padding: 0 0 0 40px;
  box-sizing: border-box;
  margin: 0 0 25px 0;
}

.planbox2_title1_red {
  padding: 0 5px;
  color: #e96452;
}

.planbox2_icon1 {
  width: 31px;
  height: 32px;
  position: absolute;
  top: 3px;
  left: 0;
}

.omia_plus_planbox_award {
  width: 100%;
  display: flex;
  padding: 0 0 0 31px;
}

.omia_plus_planbox_award_pic1 {
  width: 100%;
  max-width: 432px;
  margin: 0 auto;
}

@media (max-width: 770px) {
  .omia_plus_planbox_content {
    display: block;
    margin: 0 0 50px 0;
  }

  .planbox1 {
    width: 92%;
    max-width: 500px;
    height: auto;
    float: none;
    margin: 0 auto 40px auto;
    box-sizing: border-box;
  }

  .planbox2 {
    flex: auto;
    width: 92%;
    height: auto;
    float: none;
    margin: 0 4%;
    padding: 0;
    box-sizing: border-box;
  }

  .omia_plus_planbox_award {
    padding: 0;
  }

  .omia_plus_planbox_award_pic1 {
    width: 90%;
    line-height: 0;
  }

  .planbox2_title1 {
    font-size: 22px;
    line-height: 32px;
    margin: 0 0 20px 0;
    text-align: justify;
    padding: 0 0 0 37px;
  }

  .planbox2_icon1 {
    width: 28px;
    height: auto;
    position: absolute;
    top: 3px;
    left: 0;
  }
}

@media (max-width: 414px) {
  .omia_plus_planbox_content {
    display: block;
    margin: 0 0 40px 0;
  }

  .planbox2_icon1 {
    width: 26px;
    height: auto;
    position: absolute;
    top: 3px;
    left: 0;
  }

  .planbox2_title1 {
    font-size: 19px;
    line-height: 29px;
    padding: 0 0 0 35px;
    margin: 0 0 17px 0;
  }
}

/*標題區塊*/
.video_title_block {
  margin: 0 0 25px 0;
}

/*區塊大標題*/
.omia_plus_big_title_red {
  font-size: 42px;
  line-height: 50px;
  font-weight: bold;
  color: #e96452;
  text-align: center;
  margin: 0 0 12px 0;
}

.omia_plus_big_title_blue {
  font-size: 2.05rem;
  line-height: 2.4rem;
  font-weight: bold;
  color: #52a8e4;
  text-align: center;
  margin: 0 0 0.5em 0;
}


.omia_plus_big_title_black {
  font-size: 1.5rem;
  line-height: 1.8rem;
  font-weight: bold;
  color: #333;
  text-align: center;
 
}



.omia_plus_middle_title_black {
  font-size: 1.05rem;
  color: #000;
  text-align: center;
  letter-spacing: 0.5px	
}




/*介紹區塊*/
.omia_plus_introduce_content {
  margin: 50px 0 50px 0;
}

/*介紹區塊 上的圖片*/
.omia_plus_introduce_title_pic {
  margin: 0 0 50px 0;
  line-height: 0;
}

.ph_omia_plus_introduce_title_pic {
  display: none;
}

/*廣告BN區塊*/
.omia_plus_event_bn_bk {
  background-color: #edf9fc;
}

.omia_plus_event_bn_main {
  width: 100%;
  max-width: 1058px;
  margin: 0 auto;
  line-height: 0;
  display: block;
}

.ph_omia_plus_event_bn_main {
  width: 100%;
  line-height: 0;
  display: none;
}

/*課程標題區塊*/
.omia_class_title_block {
  margin: 0 0 13px 0;
}

@media screen and (max-width: 770px) {
  .omia_plus_big_title_red {
    font-size: 35px;
    line-height: 38px;
    text-align: center;
    margin: 0 0 10px 0;
  }

  .omia_plus_big_title_blue {
    font-size: 1.9rem;
  line-height: 2.4rem;
    text-align: center;
    margin: 0 0 0.6em 0;
	  

  }
	
.omia_plus_big_title_black {
  font-size: 1.5rem;
  line-height: 1.8rem;
    text-align: center;
    margin: 0 0 10px 0;
}	

  .omia_plus_middle_title_black {
    font-size: 1.3rem;
    line-height: 25px;
  }

  /*介紹區塊*/
  .omia_plus_introduce_content {
    margin: 0 0 15px 0;
  }

  /*介紹區塊 上的圖片*/
  .omia_plus_introduce_title_pic {
    display: none;
  }

  /*ph 介紹區塊 上的圖片*/
  .ph_omia_plus_introduce_title_pic {
    display: block;
    margin: 0 0 20px 0;
  }

  /*標題區塊*/
  .video_title_block {
    margin: 0 0 20px 0;
  }

  /*課程標題區塊*/
  .omia_class_title_block {
    margin: 0 0 10px 0;
  }

  .omia_plus_event_bn_main {
    display: none;
  }

  .ph_omia_plus_event_bn_main {
    display: block;
  }
}

@media screen and (max-width: 414px) {
  .omia_plus_big_title_red {
    font-size: 28px;
    line-height: 35px;
    margin: 0 0 7px 0;
  }

  .omia_plus_big_title_blue {
   font-size: 1.8rem;
   line-height: 2.2rem;
   margin: 0 0 0.5em 0;
  }
	
.omia_plus_big_title_black {
  font-size: 1.35rem;
  line-height: 1.4rem;
    text-align: center;
    margin: 0 0 7px 0;
}	
	
	
  .omia_plus_middle_title_black {
    font-size: 1.2rem;
    line-height: 23px;
  }

  /*介紹區塊*/
  .omia_plus_introduce_content {
    margin: 0 0 15px 0;
  }

  /*標題區塊*/
  .video_title_block {
    margin: 0 0 15px 0;
  }

  /*課程標題區塊*/
  .omia_class_title_block {
    margin: 0 0 7px 0;
  }
}

	@media screen and (max-width: 360px) {
	  .omia_plus_big_title_red {
		font-size: 26px;
	  }

	  .omia_plus_big_title_blue {
		font-size: 26px;
	  }

	.omia_plus_big_title_black {
	 font-size: 1.2rem;

		}	
	}

/*介紹區塊 四張圖外區塊*/
.omia_plus_introduce_four_block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.omia_plus_introduce_four_box {
  width: 22%;
  border: 0px solid #a6a6a6;
  height: auto;
  border-radius: 23px;
  display: inline-block;
  margin: 0 1.5%;
  overflow: hidden;
  box-shadow: 0px 4px 6px #dcdcdc;
	
	
	

}

.omia_plus_introduce_four_pic {
  width: 100%;
  line-height: 0;
}

.omia_plus_introduce_four_pic_text {
  padding: 12px 20px;
  font-size: 16px;
  line-height: 22px;
  color: #333;
  text-align: justify;
}

@media screen and (max-width: 770px) {
  .omia_plus_introduce_four_block {
    width: 100%;
    padding: 10px 0 0 0;
  }

  .omia_plus_introduce_four_box {
    width: 46%;
    margin: 0 2% 20px 2%;
  }
}

@media screen and (max-width: 414px) {
  .omia_plus_introduce_four_box {
    margin: 0 2% 15px 2%;
  }

  .omia_plus_introduce_four_pic_text {
    padding: 10px 8px;
    font-size: 15px;
    line-height: 20px;
  }
}

@media screen and (max-width: 400px) {
  .omia_plus_introduce_four_pic_text {
    padding: 8px 6px;
    font-size: 14px;
    line-height: 19px;
  }
}

/*swiper*/
.swiperbox1 {
  width: 100%;
  margin: 0 auto 30px auto;
  padding: 20px 0 35px 0;
  position: relative;
  box-sizing: border-box;
}

.swiperbox2 {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0 25px 0;
  position: relative;
  box-sizing: border-box;
}

@media screen and (max-width: 720px) {
  .swiperbox1 {
    padding: 6px 0 45px 0;
    margin: 0 auto 25px auto;
  }

  .swiperbox2 {
    padding: 6px 0 30px 0;
  }
}


a:hover {
  text-decoration: none !important;
}

.new_class_date {
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  color: #fff;
  font-size: 15px;
  line-height: 26px;
  white-space: nowrap;
  background-color: #2b8fcf;
  background-color: rgba(43, 143, 207, 0.9);
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 10;
}


.class_type {
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  color: #fff;
  font-size: 15px;
  line-height: 26px;
  white-space: nowrap;
  background-color: #2b8fcf;
  background-color: rgba(43, 143, 207, 0.9);
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}



.classbox_pic_block {
  width: 100%;
  line-height: 0;
  background-color: #e1e1e1;
  box-sizing: border-box;
}

.classbox_text_block {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 15px;
}

.classbox_text_teacher {
  height: 15px;
  font-size: 13px;
  line-height: 15px;
  color: #2b8fcf;
  margin: 0 0 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  text-decoration: none;
  text-align: left;
}

.classbox_text_teacher a {
  color: #2b8fcf;
}

.classbox_text_title {
  height: 44px;
  margin: 0;
  text-decoration: none;

}

.classbox_text_title a {
  font-size: 18px;
  line-height: 22px;
  height:44px;
  color: #000;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  text-align: left;
}

.classbox_text_text {
  color: #000;
  height: 60px;
}

.classbox_text_text a {
  font-size: 15px;
  color: #000;
  line-height: 20px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  text-decoration: none;
  text-align: left;
}


.classbox_text1 {
  color: #555;
  height: auto;
  font-size: 0.95em;
}

.classbox_text1 span{
  color: #333;
  height: auto;
  font-size: 0.95em;
  padding:6px;
 font-weight: 500
}

.classbox_text1 a {
  color: #333;
  height: auto;
}



/*課程輪播*/
.swiper-container {
  width: 100%;
  position: relative;
  overflow: hidden; 
}

.swiper-slide {
 
  width: 300px !important;
  height: 350px;
  border-radius: 15px;
  text-align: left;
  background-repeat: no-repeat;
  background-color: #fff;
  border: 1px solid #eed6ca;
  display: block;
  overflow: hidden;
}



.class-prev,
.moreclass-prev,
.plan-prev{
  position: absolute;
  top: 45%;
  left: 10px !important;
  width: 32px !important;
  height: 32px !important;
  box-shadow: 0px 1px 2px #777;
  border-radius: 50%;
  z-index: 10;
  background-color: #c1f3ff;
}

.class-prev::before,
.moreclass-prev::before,
.plan-prev::before{
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 11px;
  left: 13px;
  background: transparent;
  border-bottom: 2px solid #2b8fcf;
  border-left: 2px solid #2b8fcf;
  transform: rotate(45deg);
}

.class-prev:hover,
.moreclass-prev:hover,
.plan-prev:hover{
  background-color: #2b8fcf;
}

.class-prev:hover::before,
.moreclass-prev:hover::before,
.plan-prev:hover::before{
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

.class-next,
.moreclass-next,
.plan-next {
  position: absolute;
  top: 45%;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  box-shadow: 0px 1px 2px #777;
  border-radius: 50%;
  z-index: 10;
  background-color: #c1f3ff;
}

.class-next::before,
.moreclass-next::before,
.plan-next::before{
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 11px;
  right: 13px;
  background: transparent;
  border-bottom: 2px solid #2b8fcf;
  border-left: 2px solid #2b8fcf;
  transform: rotate(-135deg);
}

.class-next:hover,
.moreclass-next:hover,
.plan-next:hover{
  background-color: #2b8fcf;
}

.class-next:hover::before,
.moreclass-next:hover::before,
.plan-next:hover::before {
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

.more-swiper-pagination {
  text-align: center;
  margin: 8px 0 0 0;
}

.newswiper-pagination {
  text-align: center;
  margin: 8px 0 0 0;
}

.planswiper-pagination {
  text-align: center;
  margin: 8px 0 0 0;
}



/*方案輪播補強*/
#plan{height: 1px;position: absolute;top: -260px;}
		@media (max-width: 767px) {
		#plan{;top: -160px;}
		}

		@media (max-width: 414px) {
		#plan{;top: -130px;}
		}



.wp{padding-bottom: 10px;padding-left: 4px; padding-right:10px;box-sizing: border-box;}
		@media (max-width: 767px) {
			.wp{padding-left: 6px; padding-right:15px;box-sizing: border-box;}
		}

.slide2 {
  width: 255px !important;
  border: 0px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}

.slide2 img{
transition: 0.5s;}


.slide2 img:hover {
  transform: scale(1.1);
}


.planbox_pic_block {
  width: 100%;
  line-height: 0;
  background-color: #e1e1e1;
  box-sizing: border-box;
}

.planbox_text_block {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 15px 15px;
}

.planbox_text_block li{font-size: 0.9em}


.plan_tag {
  height: 24px;
  padding: 0 15px;
  border-radius: 13px;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.slide2 .color1{ background-color: rgba(77, 151, 205, 0.9);}
.slide2 .color2{ background-color: rgba(13, 181, 158, 0.9);}
.slide2 .color3{ background-color: rgba(232, 99, 80, 0.9);}
.slide2 .color4{ background-color: rgba(139, 140, 191, 0.9);}


.bullet-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bullet-item {
  display: flex;
  align-items:top;
}

.bullet-icon {
  width: 29px;
  height: 29px;
  background-color: #ff5e47;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 12px;
  flex-shrink: 0;
}

.bullet-text {
  flex: 1;
  font-weight: bold;
  font-size: 1.05em;
  line-height: 1em;
  text-align: center
}
.bullet-text li{font-weight: 400;font-size: 0.75em;color: #666;line-height: 1.6em;letter-spacing: 0.2px;margin-left: -10px;}
.bullet-text span{font-weight: 500; font-size: 1.4em;color: #ff5e47;padding: 0 5px;}



.item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 項目間距 */
  justify-content: center; /* 中間對齊（桌機） */
  text-align: center;       /* 中間對齊（桌機） */
  font-size: 1em;	
  line-height: 1.2em;
}

.item-list2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 項目間距 */
  justify-content: center; /* 中間對齊（桌機） */
  text-align: center;       /* 中間對齊（桌機） */
  
}




.item {
  white-space: nowrap; /* 防止項目自動換行 */

		
}
.small{font-size: 0.8rem;line-height: 3.2rem}



	/* 手機版：改為垂直排列 */
	@media (max-width: 767px) {
	  .item-list {
		flex-direction: column;/* 手機改為直列 */
		gap: 6px;
		text-align: left;  /* 左對齊 */
		padding-left: 8% ;
	  }
		
	 .item-list2 {
		 flex-direction: column;/* 手機改為直列 */
	 	 gap: 0px;
	}
		
	.small{font-size: 1rem;line-height: 1.3rem}	
		
		
		.slide2 {
		  width: 346px !important;
		  border: 0px solid #eee;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		  box-sizing: border-box;
		}

		.slide2 img{
		transition: 0.5s;}


		.slide2 img:hover {
		  transform: scale(1.1);
		}

		.planbox_text_block {
		  padding: 25px 35px;
		}

		.planbox_text_block li{font-size: 0.9em}


		.plan_tag {
		  height: 26px;
		  padding: 0 20px;
		  border-radius: 13px;
		  font-size: 16px;
		  top: 20px;
		  right: 20px;
		}

		.bullet-list {
		  display: flex;
		  flex-direction: column;
		  gap: 2px;
		}

		.bullet-item {
		  display: flex;
		  align-items:top;
		}

		.bullet-icon {
		  width: 32px;
		  height: 32px;
		  background-color: #ff5e47;
		  color: white;
		  border-radius: 50%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-weight: bold;
		  margin-right: 12px;
		  flex-shrink: 0;
		}

		.bullet-text {
		  flex: 1;
		  font-weight: bold;
		  font-size: 1.2em;
		  line-height: 1.25em	
		}
		.bullet-text li{font-weight: 400;font-size: 0.75em;color: #666;line-height: 1.6em;letter-spacing: 0.2px;}
		
	
	}


.omia_plus_middle_text_black {
  font-size: 1em;
  color: #333;
  text-align: center;line-height: 0.6em;
  letter-spacing: 0.3px;
}

.omia_plus_middle_text_black a:link, .omia_plus_middle_text_black a:visited{cursor: pointer; text-decoration: none;}	
.omia_plus_middle_text_black a:hover, .omia_plus_middle_text_black a:active{text-decoration-line: underline!important;}




/*加入 外區塊*/
.omia_plus_join_block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 2% 55px 2%;
  box-sizing: border-box;
}

.omia_plus_join_title_block {
  width: 100%;
  margin: 0 0 36px 0;
  text-align: center;
  padding: 20px 0 0 0;
}

.omia_plus_step_title_block {
  width: 100%;
  margin: 0 0 36px 0;
  text-align: center;
  padding: 20px 0 0 0;
}

.omia_plus_step_block {
  padding: 20px 0 50px 0;
}

/*加入 項目*/
.omia_plus_join_item {
  width: 49%;
  font-size: 22px;
  line-height: 30px;
  color: #000;
  font-weight: bold;
  position: relative;
  display: flex;
  margin: 0 0 13px 0;
  word-wrap: break-word;
  word-break: break-all;
}

.omia_plus_join_item::before {
  content: "";
  display: block;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  background-color: #e6745d;
  margin: 0 8px 0 0;
}

.omia_plus_join_item::after {
  content: "";
  display: block;
  width: 12px;
  height: 18px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  position: absolute;
  top: 3px;
  left: 8px;
  transform: rotate(45deg);
}

@media screen and (max-width: 1000px) {
  .omia_plus_join_item {
    width: 100%;
  }
}

@media screen and (max-width: 720px) {
  .omia_plus_step_title_block {
    margin: 0 0 30px 0;
    padding: 0;
  }

  /*加入 外區塊*/
  .omia_plus_join_block {
    padding: 0 2% 20px 2%;
  }

  .omia_plus_step_block {
    padding: 20px 0 30px 0;
  }
}

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

  /*加入 項目*/
  .omia_plus_join_item {
    font-size: 19px;
    line-height: 26px;
  }

  .omia_plus_join_item::before {
    content: "";
    display: block;
    width: 26px;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    position: relative;
    background-color: #e6745d;
    margin: 0 8px 0 0;
  }

  .omia_plus_join_item::after {
    content: "";
    display: block;
    width: 10px;
    height: 16px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    position: absolute;
    top: 3px;
    left: 8px;
    transform: rotate(45deg);
  }
}

/*人氣課程分類*/
.omia_plus_popularity_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px 0 35px 0;
}

.omia_plus_popularity_title {
  width: 48%;
  height: 162px;
  margin: 0 1% 25px 1%;
  display: flex;
  align-items: center;
  font-size: 35px;
  font-weight: bold;
  color: #52a8e4;
}

.omia_plus_popularity_item {
  width: 48%;
  margin: 0 1% 25px 1%;
  height: 162px;
  border: 1px solid #a6a6a6;
  border-radius: 15px;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  position: relative;
  overflow: hidden;
}

.omia_plus_popularity_pic {
  width: 172px;
}

.omia_plus_popularity_pic a {
  width: 100%;
  display: block;
}

.omia_plus_popularity_text_block {
  flex: 1;
  padding: 18px;
  box-sizing: border-box;
}

.omia_plus_popularity_text_block_title {
  font-size: 24px;
  line-height: 26px;
  font-weight: bold;
  color: #000;
  word-wrap: break-word;
  word-break: break-all;
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

}

.omia_plus_popularity_text_block_title a {
  color: #000;
}

.omia_plus_popularity_text_block_text {
  font-size: 16px;
  line-height: 20px;
  height: 40px;
  color: #000;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.omia_plus_popularity_text_block_text a {
  color: #000;
}

.omia_plus_popularity_text_block_arrow {
  width: 28px;
  height: 28px;
  position: absolute;
  bottom: 17px;
  right: 13px;
}

@media screen and (max-width: 1000px) {
  .omia_plus_popularity_title {
    font-size: 28px;
  }
}

@media screen and (max-width: 900px) {
  .omia_plus_popularity_title {
    width: 100%;
    font-size: 29px;
    line-height: 37px;
    height: auto;
    margin: 0 0 20px 0;
    justify-content: center;
    text-align: center;
  }

  .omia_plus_popularity_item {
    width: 100%;
    margin: 0 0 15px 0;
  }
}

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

  /*人氣課程分類*/
  .omia_plus_popularity_block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0 20px 0;
  }
}

@media screen and (max-width: 414px) {
  .omia_plus_popularity_title {
    margin: 0 0 15px 0;
    font-size: 27px;
    line-height: 35px;
  }

  .omia_plus_popularity_item {
    margin: 0 1% 15px 1%;
  }
}

@media screen and (max-width: 400px) {
  .omia_plus_popularity_title {
    font-size: 25px;
    line-height: 33px;
  }

  .omia_plus_popularity_item {
    margin: 0 1% 10px 1%;
    height: 130px;
  }

  .omia_plus_popularity_pic {
    width: 130px;
  }

  .omia_plus_popularity_text_block {
    padding: 12px;
  }

  .omia_plus_popularity_text_block_title {
    font-size: 20px;
    line-height: 22px;
    margin: 0 0 7px 0;
  }

  .omia_plus_popularity_text_block_text {
    font-size: 15px;
    line-height: 19px;
    height: 38px;
  }

  .omia_plus_popularity_text_block_arrow {
    bottom: 12px;
    right: 12px;
  }
}

.pc-mode {
  display: block;
}

.ph-mode {
  display: none;
}

@media screen and (max-width: 770px) {
  .pc-mode {
    display: none;
  }

  .ph-mode {
    display: block;
  }
}

.plus_student_box {
  width: 100%;
  color: #000;
  font-size: 18px;
  box-sizing: border-box;
  border-radius: 24px;
  padding: 55px 5% 35px 5%;
  background-color: #fff0ea;
  line-height: 26px;
  position: relative;
  margin: 0 0 25px 0;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-all;
}

.plus_student_tag_list {
  width: 100%;
  box-sizing: border-box;
  border-radius: 24px;
  line-height: 26px;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0 0 0;
}

.plus_student_tag_text {
  color: #333;
  font-size: 16px;
  line-height: 20px;
  margin: 0 27px 6px 0;
}

.plus_student_tag {
  color: #e39e79;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 6px 6px 0;
  word-wrap: break-word;
  word-break: break-all;
}

.plus_student_tag_icon1 {
  width: 61px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 48px;
  z-index: 10;
  line-height: 0;
}

.plus_student_tag_icon2 {
  width: 61px;
  height: 40px;
  position: absolute;
  right: 48px;
  bottom: -1px;
  z-index: 10;
  line-height: 0;
}

@media screen and (max-width: 991px) {
  .plus_student_box {
    margin: 0 0 20px 0;
  }
}

@media screen and (max-width: 575px) {
  .plus_student_box {
    margin: 0 0 15px 0;
    padding: 36px 6% 20px 7%
  }

  .plus_student_tag_icon1 {
    width: 40px;
    height: 27px;
    left: 19px;
  }

  .plus_student_tag_icon2 {
    width: 40px;
    height: 27px;
    right: 19px;
  }
}

@media screen and (max-width: 360px) {
  .plus_student_box {
    margin: 0 0 10px 0;
  }
}

/*申租區塊*/
.omia_plus_apply_block {
  width: 100%;
  padding: 43px 0 60px 0;
  margin: 0 0 60px 0;
}

.omia_plus_apply_logo {
  width: 264px;
  height: 40px;
  margin: 0 auto 30px auto;
  line-height: 0;
}

.omia_plus_apply_text {
  font-size: 28px;
  line-height: 30px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin: 0 0 45px 0;
}

.omia_plus_apply_btn {
  width: 320px;
  height: 50px;
  font-size: 22px;
  font-weight: bold;
  line-height: 50px;
  color: #fff;
  background-color: #2b8fcf;
  border-radius: 25px;
  margin: 0 auto;
}

.omia_plus_apply_btn a {
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
}

.omia_plus_apply_btn_text {
  width: 240px;
  height: 50px;
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.omia_plus_apply_btn_text::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  margin: 0 0 0 5px;
}

.omia_plus_apply_btn_text::before {
  /*content: "";*/
  display: block;
  width: 20px;
  border-top: 3px solid #fff;
  position: absolute;
  right: 0;
}

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

  /*申租區塊*/
  .omia_plus_apply_block {
    padding: 20px 0 50px 0;
    margin: 0 0 50px 0;
  }

  .omia_plus_apply_logo {
    width: 200px;
    height: auto;
    margin: 0 auto 20px auto;
  }

  .omia_plus_apply_text {
    font-size: 26px;
    line-height: 28px;
    margin: 0 0 35px 0;
  }

  .omia_plus_apply_btn {
    max-width: 320px;
    width: 100%;
    min-width: 280px;
    height: 50px;
    font-weight: bold;
    line-height: 50px;
  }
}

/*popup window*/
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 3500;
 
  display: flex;
  justify-content:center;
  align-items:center;

}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.overlay-close {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: block;
  z-index: 1; /* 在最下面 */
}


.popup {
  padding: 20px 30px 50px 30px;
  background: #fff;
  width: 96%;
  max-width: 1000px;
  position: relative;
  box-sizing: border-box;
  font-size: 17px;
  color: #333;
  height: 90%;
  /* 限制視窗高度 */
  overflow-y: auto;
  /* 內容超出時顯示滾動條 */
   z-index: 2; /* 蓋在 overlay-close 上方 */	
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
  text-align: center;
  position: relative;
}

.popup_close_list {
  width: 100%;
  height: 25px;
  margin: 0 0 30px 0;
  position: relative;
}

.popup_close_list a:link,
.popup_close_list a:visited {
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 40px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.popup_close_list a:hover,
.popup_close_list a:active {
  color: #4b9af8;
}



.ans_item_list_title {
  color: #6d6d6d;
  font-size: 16px;
  line-height: 24px;
  margin: 15px 0 7px 0;
}

.ans_item_list {
  padding: 0 0 0 26px;
  margin: 0 0 7px 0;
  text-indent: -26px;
  font-size: 16px;
  color: #6d6d6d;
  line-height: 24px;
}

.ans_item_list:last-child {
  margin: 0 0 15px 0;
}

@media screen and (max-width: 1000px) {
  .popup {
    padding: 10px 15px 30px 15px;
  }
}

/*Notes*/
.notes {
  color: #333;
  line-height: 1.7em;
  font-size: 18px;
}

.notes_text {
  margin: 20px 0 12px 0;
  color: #333;
  line-height: 1.8em;
  font-size: 15px;
}

.notes h2 {
  color: #333;
  line-height: 1.7em;
  font-size: 18px;
  margin: 50px 0 20px 0;
  text-align: left;
}

.notes ol li {
  color: #333;
  line-height: 1.8em;
  font-size: 15px;
}

.notes ul li {
  color: #333;
  line-height: 1.8em;
  font-size: 15px;
  box-shadow: 0px 0px 0px;
  border-radius: 0;
  padding: 0px;
  margin-bottom: 0px;
  list-style: disc;
}

.notes span {
  color: #209cff;
}

.QA_gray {
  background-color: #f8f8f8;
  padding: 2em;
  border-radius: 5px;
}

/*mutual css*/
.orange-fm {
  text-align: center;
  padding: 10px;
  font-size: 20px;
  background: #da6b57;
  color: #fff;
}

@media screen and (max-width: 770px) {
  .orange-fm {
    font-size: 18px;
    color: #fff;
  }

  .orange-fm .minTxt {
    font-size: 14px;
    display: block;
    margin-top: 5px;
  }

  .h3minTxt {
    font-size: 14px;
    display: block;
    margin-top: 5px;
  }
  .notes ul li {
	font-size: 1.1rem;
	line-height: 1.7rem;
  }
  
  .QA_gray {
	  background-color: #f8f8f8;
	  padding: 0.8em;
	  border-radius: 10px;
	}	
 .notes ol li {
  color: #333;
  font-size: 1.1rem;
  line-height: 1.7em;

	}
	.notes h2 {
	  color: #333;
	  font-size: 1.2rem;
	  line-height: 1.7em;
	  margin: 50px 0 20px 0;
	  text-align: left;
	}
	.popup h2 {
	  text-align: left;
	  font-size: 1.6rem;
	}
	
}

.pagesize {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 40px;
}

.pagesize h1 {
  font-size: 30px;
  text-align: center;
  line-height: 32px;
  margin: 10px 0 0 0;
}

@media screen and (max-width: 770px) {
  .pagesize {
    padding: 0px 20px;
  }
}

.newsBx {
  margin: 20px 0px 30px;
}

.newsBx_list {
  box-shadow: 0px 5px 10px #dcdcdc;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.newsBx .txt h2 {
  font-size: 1.05rem;
}

.newsBx .txt h4 {
  color: #4b9af8;
  font-size:0.88em;
  line-height: 1.3em;
  font-weight: 400;
}

.newsBx .txt {
  flex: 1;
  border-right: 1px solid #dcdcdc;
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  align-items: center;
}

.newsBx .txt .tit {
  width: 60%;
}

.newsBx .txt .detail {
  color: #666;
  font-size:0.8rem;
  width: 240px;
  flex: 0 0 auto;
  margin-left: 20px;
}

.newsBx .txt .detail li {
  list-style: circle;
}

.more_btn {
  width: 108px;
  height: 34px;
  margin-left: 20px;
  transition: 0.2s all ease-in-out;
  text-decoration: none;
}

.more_btn a:link,
.more_btn a:visited {
  width: 100%;
  height: 100%;
  background: #d7edfd;
  color: #4b9af8;
  font-size: 16px;
  display: block;
  line-height: 34px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none !important;

}

.more_btn a:hover,
.more_btn a:active {
  width: 100%;
  height: 100%;
  background-color: #007aff;
  color: #fff;
  font-size: 16px;
  line-height: 34px;
  border-radius: 3px;
  text-align: center;
}

@media screen and (max-width: 770px) {
	.newsBx .txt h2 {
	  font-size: 1.3rem;
	}

	.newsBx .txt h4 {
	  font-size: 1.15em;
	  line-height: 1.3em;
		font-weight: 500;
	}
	.newsBx .txt .detail {
	  font-size:1.1rem;
	  width: 240px;
	  margin-left: 20px;
	}
	
	.newsBx_list {
	  padding: 20px;
	}
	
	

	
}




/* quesiton */
.que-sec {
  margin: 40px 0px 70px;
  list-style: none;
}

.que-sec li {
  box-shadow: 0px 5px 10px #dcdcdc;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.que-sec h3 {
  font-size: 18px;
  color: #000;
  font-weight: 500;
  padding-right: 40px;
  margin-bottom: 0;
  flex: 1;
  word-wrap: break-word;
  word-break: break-all;
}

.que-sec p {
  font-size: 16px;
  color: #6d6d6d;
  line-height: 24px;
  margin-top: 15px;
  word-wrap: break-word;
  word-break: break-all;
}

.que-sec .que {
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.que_icon {
  width: 26px;
  height: 26px;
  background-color: #209cff;
  border-radius: 13px;
  position: relative;
}

.que-sec .que .que_icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 13px;
  left: 4px;
  width: 18px;
  height: 4px;
  transition: 0.3s;
  transform: translateY(-50%);
  background-color: #fff;
}

.que-sec .que .que_icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 13px;
  left: 11px;
  width: 4px;
  height: 18px;
  transition: 0.3s;
  transform: translateY(-50%);
  background-color: #fff;
}

.que-sec .open .que_icon::after {
  display: none !important;
}

.que-sec .ans {
  display: none;
  border-top: 1px solid #e3e3e3;
  margin-top: 15px;
}

.que-sec ol.project {
  list-style: decimal;
  padding-top: 15px;
  margin-left: 20px;
}

.que-sec ol.project li {
  list-style: decimal;
  font-size: 16px;
  color: #6d6d6d;
  line-height: 24px;
  box-shadow: none;
  border-radius: 0%;
  padding: 0px 0px 10px 5px;
  margin-bottom: 0px;
}

.que-sec ol.project li p {
  margin: 0px 0px 5px;
}

@media screen and (max-width: 992px) {
  .newsBx .txt {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .newsBx .txt .tit,
  .newsBx .txt .detail {
    width: 100%;
    padding: 0;
  }

  .newsBx .txt .detail {
    margin-top: 5px;
  }
}

@media screen and (max-width: 767px) {
  .newsBx {
    margin: 20px 0px 30px;
  }

  .newsBx .txt {
    margin: 0;
    border-right: none;
    padding-right: 0;
  }

  .newsBx_list {
    display: block;
  }

  .more_btn {
    width: 100%;
    margin: 0;

  }
}

section {
  padding-bottom: 0 !important;
}