@font-face {
  font-display: swap;
}
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900);
@import url(https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap);

*, *::before, *::after {
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
.LinkTxtNO {
  text-decoration: none;
  color: currentColor;
}
.scroll-link {
    display: none; /* 初始隱藏 */
    cursor: pointer;

	opacity: 0; /* 初始透明度 */
  transition: opacity 1s ease-in-out; /* 淡入效果 */
}
	
.scroll-link.show {
    display: block;
    opacity: 1; /* 顯示時完全不透明 */
}
	
.btn-btfixBk{
		position: fixed;
    bottom: 0px;
    right: 0px;
    font-size: 16px;
    padding: 20px 50px 35px 50px;
		background-color: #DC5F00;
	color:#222;
	width: 100%;
	text-decoration: none;
	text-align: center;
	z-index: 999;
	font-weight: 800;
	font-size: 1.2em;
	}	
	
.scroll-link:hover {
    background-color:#7e1818;
		color:#fff;
}

/*主視覺區塊*/
.FdMnEN{color:#ccc; letter-spacing:1px; line-height: 1.2em; font-size: 1em; }
.FdMnH1{font-size:5.5em; line-height: 1.15em; font-family:'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; font-weight:700;}
.FdMnH2{font-size:2em; line-height: 1em; letter-spacing:0px; font-weight: 300;}
.FdMnH3{color: #ccc; letter-spacing: 2px;line-height: 1.2em; font-size: 1.2em;z-index:3;}
.btn-coffee {
		color: #fff;
    background-color:#bc7b37;
		border-color: #bc7b37;
}
.btn-outline-coffee {
		color: #bc7b37;
    border-color: #bc7b37;
		letter-spacing:1px;
		font-size: 0.9em;
	  white-space: nowrap;
}
.FdPgMain{width: 100%; min-width: 340px; padding: 5% 0; background-color: #000; color:#fff; letter-spacing: 1px; line-height: 1em; font-weight:300;background-image: url("../images/client/course/3dArt/3dartpgmain_pic_004_xs.png"); background-size: cover; background-position: center right; }
.FdPgMnSideWd{ padding: 10% 5% 5% 1%; position: relative; }


/*END.主視覺區塊*/
.FdPgZ01{padding: 5% 0; background-color:rgba(188,123,55,0.11); letter-spacing: 1px;line-height: 1.5em;}
.FdPgZ02{padding:0 0 4% 0; background-color: #000; color:#fff; letter-spacing: 1px;line-height: 1.2em; font-weight:300;}
.WLineBox{ padding: 20px; border:1px solid #fff; border-left-color: #000;font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;font-weight: 900; font-size:1.5em;line-height: 1em;text-align:end; }
.WLBoxSideTL{ padding: 15px 3%; font-size:1.5em;line-height: 1em; font-weight: 600; letter-spacing: 2px;text-align:end; color:#fff; }
.FdPgCsStepNum{color:#4d4d4d; font-family: 'Anton', sans-serif; font-size:4em; padding-right:15px;}
.FdPgCsStNumSideTL{font-size: 1.8em;line-height: 1em;}
.FdPgCsEnWeek{ color:#808080; margin-bottom:5px; font-size: 0.9em; }
.FdPgCsEnsubTL{ color:#bc7b37;font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; font-weight: 900; font-size: 1.5em;letter-spacing: 0px;line-height: 1em }

.FdPgZ03Side01{ width:100%; height:100%; min-height: 180px; }
.FdPgZ03Side02{ width:100%; height:100%; min-height: 185px; }
.FdPgZ04Side01{ width:100%; height:100%; min-height: 185px; }
.FdPgZ04Side02{ position:absolute;right:0; top:8% ; z-index:0; width:180px; height: 90px;}
.FdPgZ05Side01{ position:absolute;right:0; top:-6% ; z-index:0; width:200px;height: 180px;}
.FdPgZ05Side02{ width: 100%; height: 150px;}

/*背景圖片*/
.BkPic_Book{ background-image: url("../images/client/course/3dArt/3dartpgbk_pic001.jpg");}

/*講師區塊*/
.TeacherPic{margin-bottom:20px; padding-right:0px; width: 100%;}
.TeacherPic > img {width: 100%;}
.TeacherAward{font-size:0.85em; margin-bottom: 20px; line-height: 1.8em; font-weight: 400;color:#333;}
.TeacherAward > ul { padding-inline-start: 20px; }
.TeacherUnderWd{ font-weight: 500; font-size:1.05em; padding:0;}
.TeacherQuotePic{margin-top: -8%; width:100%; max-width:250px; margin-right:25px; position: relative; z-index:3; }

/*第一區輪播*/
.content-switcher {
  display: flex;
  width: 100%;
  gap: 10px;
  transition: all 0.5s ease;
}

.content-box {
  flex: 1;
  height: 160px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-weight: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  transition: all 0.6s ease;
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;
}

.content-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.content-box.active::before,
.content-box:hover::before {
  background: rgba(0,0,0,0.2);
}

/* 文字區 */
.inner {
  padding: 1.5rem;
  background: rgba(0,0,0,0.4);
  border-radius: 0 0 10px 10px;
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
  z-index: 2;
  position: relative;
}


/* 點擊或滑過放大 */
.content-box.active {
  flex: 2;
}
.content-box:hover {
  flex: 2;
}

/* 大綱的Box */
.CSBox_ogline{ 
	position: relative;
  width: 100%;
  border: 1px solid #d37a2d; /* 橘色邊框 */
  color: #fff;
  padding: 20px 15px 0px 15px;
  box-sizing: border-box; 
	transition: all 0.6s ease;
}

.CSBox_ogline::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-bottom: 20px solid #d37a2d; /* 橘色 */
}
.CSBox_ogline:hover{
	transform: scale(1.02);
}

/*側邊圖片*/
.SidePic_3DArt_01	{position: absolute; bottom:30px; right:0; z-index:3; }
.SidePic_3DArt_02	{position: absolute; top:-280px; left:0; z-index:3; }

.SidePic_3DArt_01 > img {width:110%; max-width:480px;}
.SidePic_3DArt_02 > img {width:100%; max-width:450px;}
	

/*RWD開始*/
@media (min-width: 480px) and (max-width: 767px) {
	.FdPgMain{background-image: url("../images/client/course/3dArt/3dartpgmain_pic_004_m.png");background-position:  center;min-width: 570px; }
	.FdPgZ03Side02{ width:100%; height:100%; min-height: 280px; }
	.FdPgZ04Side01{ width:100%; height:100%; min-height: 220px; }
	.FdPgZ05Side01{ top:-3% ; width:200px;height: 180px;}
}

@media (min-width: 768px) and (max-width: 991px) {
	/*主視覺區塊*/
	.FdPgMnSideWd{ padding: 10% 5% 5% 6%; }
	.FdPgMain{background-image: url("../images/client/course/3dArt/3dartpgmain_pic_004_m.png");background-position:  center;min-width: 805px; }
	.FdMnEN{font-size: 1.2em;letter-spacing:2px; }
	.FdMnH1{font-size:8em; }
	.FdMnH2{font-size:2.6em;letter-spacing:6px; }
	.FdMnH3{font-size: 1.5em;}
	.btn-outline-coffee {font-size: 1.25rem;letter-spacing:2px;}
	/*END.主視覺區塊*/
	.FdPgZ01{padding: 30px 0; }
	.WLineBox{ padding: 30px 3%; font-size:2em;line-height: 1em;text-align:end; }
	.WLBoxSideTL{ text-align:center;font-size:2em;color:#fff;}
	.FdPgCsEnWeek{ font-size: 0.9em; }
	.BkPic_FdZ02Side{ background-image:url("../images/client/course/Foundation/drawing_pic_001.jpg");}

	
	/*第一區輪播*/
	 
  .content-box {
    height: 220px;
  }
	
	/*側邊圖片*/
	.SidePic_3DArt_01	{bottom:100px; }
	.SidePic_3DArt_02	{top:-50px; }
	
	.SidePic_3DArt_01 > img { max-width:390px;}
	.SidePic_3DArt_02 > img {max-width:180px;}
}
@media (min-width: 860px) and (max-width: 991px) {
	.FdPgZ05Side01{ top:-6% ; width:245px;height: 380px;}
}
@media (min-width: 992px) and (max-width: 1199px) {
	/*主視覺區塊*/
	.FdPgMnSideWd{ padding: 0 5% 0 15%; }
	.FdPgMain{background-image: none;}
	.FdMnEN{font-size: 1.2em; letter-spacing:2px;}
	.FdMnH1{font-size:8em; }
	.FdMnH2{font-size:2.6em;letter-spacing:6px; }
	.FdMnH3{font-size: 1.5em;}
	.btn-outline-coffee {font-size: 1.25rem;}
	/*END.主視覺區塊*/
	.FdPgZ01{padding: 30px 0; }
	.WLineBox{ padding: 30px 3%; font-size:3em;line-height: 1em;text-align:end; }
	.WLBoxSideTL{ text-align:center;font-size:2em;color:#fff;}
	.FdPgCsEnWeek{ font-size: 0.8em; }
	.BkPic_FdZ02Side{ background-image:url("../images/client/course/Foundation/drawing_pic_001.jpg");}

	
	/*滑動圖片區塊*/
	.content-box {
  height: 320px;
}
	
	/*側邊圖片*/
	.SidePic_3DArt_01	{bottom:0px; }
	.SidePic_3DArt_02	{top:-60px; }
	
	.SidePic_3DArt_01 > img { max-width:460px;}
	.SidePic_3DArt_02 > img {max-width:220px;}
	
}
@media (min-width: 1200px)and (max-width: 1399px)  {
	/*主視覺區塊*/
	.FdPgMnSideWd{ padding: 0 5% 0 10%; }
	.FdPgMain{background-image: none;}
	.FdMnEN{font-size: 1.2em;letter-spacing:2px; }
	.FdMnH1{font-size:8em; }
	.FdMnH2{font-size:2.6em;letter-spacing:6px; }
	.FdMnH3{font-size: 1.5em;}
	/*END.主視覺區塊*/
	.FdPgZ01{padding: 30px 0; }
	.WLineBox{ padding: 30px 3%;font-size:3em;line-height: 1em;text-align:end; }
	.WLBoxSideTL{ text-align:center;font-size:2em;color:#fff;}
	.FdPgCsEnWeek{ font-size: 0.8em; }
	.BkPic_FdZ02Side{ background-image:url("../images/client/course/Foundation/drawing_pic_001.jpg");}
	
	/*滑動圖片區塊*/
	.content-box {
  height: 320px;
}
	
	/*側邊圖片*/
	.SidePic_3DArt_01	{bottom:200px; }
	.SidePic_3DArt_02	{top:-220px; }
	
	.SidePic_3DArt_01 > img { max-width:450px;}
	.SidePic_3DArt_02 > img {max-width:350px;}
}
@media (min-width: 1400px) {
	/*主視覺區塊*/
	.FdPgMnSideWd{ padding: 0 5% 0 10%; }
	.FdPgMain{background-image: none;}
	.FdMnEN{font-size: 1.2em; letter-spacing:2px;}
	.FdMnH1{font-size:8em; }
	.FdMnH2{font-size:2.6em;letter-spacing:6px; }
	.FdMnH3{font-size: 1.5em;}
	.btn-outline-coffee {font-size: 1.25rem;letter-spacing:2px;}
	/*END.主視覺區塊*/
	.FdPgZ01{padding: 30px 0; }
	.WLineBox{ padding: 30px 3%;font-size:3em;line-height: 1em;text-align:end; }
	.WLBoxSideTL{ text-align:center;font-size:2em;color:#fff;}
	
	/*滑動圖片區塊*/
	.content-box {
  height: 320px;
}
	
	/*側邊圖片*/
	.SidePic_3DArt_01	{bottom:110px; }
	.SidePic_3DArt_02	{top:-280px; }
	
	.SidePic_3DArt_01 > img { max-width:480px;}
	.SidePic_3DArt_02 > img {max-width:390px;}
	
}
@media (min-width: 1600px) {
	/*主視覺區塊*/
	.FdPgMnSideWd{ padding: 0 5% 0 20%; }
	.FdPgMain{background-image: none;}
	.btn-outline-coffee {font-size: 1.25rem;letter-spacing:2px;}
	.FdMnEN{font-size: 1.2em;letter-spacing:2px; }
	.FdMnH1{font-size:8em; }
	.FdMnH2{font-size:2.6em;letter-spacing:6px; }
	.FdMnH3{font-size: 1.5em;}
	
	/*滑動圖片區塊*/
	.content-box {
  height: 320px;
}

	/*側邊圖片*/
	.SidePic_3DArt_01	{bottom:30px; }
	.SidePic_3DArt_02	{top:-280px; }
	
	.SidePic_3DArt_01 > img { max-width:580px;}
	.SidePic_3DArt_02 > img {max-width:450px;}
	
}