body {
	background: black;
	color: white;
}
#sentence_title {
	font-size: 24px;
	font-weight: bold;
	color: #252525;
	margin-bottom: 10px;
	font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
	border: 2px solid #a67c45;
	border-radius: 8px;
	padding: 6px 12px;
	background: linear-gradient(90deg, #fffbe6 0%, #f5e6c8 100%);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	display: inline-block;
}
.sentence_row{
	display: flex;
}

/* 讓.sentence_group的第二個div裡的.sentence_ch變成深藍色 */
.sentence_items_wrapper > div:last-child .sentence_ch, .sentence_items_wrapper > div:last-child .sentence_label_ch {
	color: #10569b;
}
.button_cursor
{
	cursor:auto;
}
.button_cursor:hover
{
	cursor:pointer;
}
#contain{
	width:1000px;
	margin:auto;
	background-image:url('../learn/image/background.jpg');
	background-repeat:repeat-y;
	overflow: hidden;
	min-height: 904px;
}
#backgroung_top{
	background-image:url('../learn/image/top_background.jpg');
	width:1000px;
	height:268px;
	float:left;
}
#logo{
	width:106px;
	height:269px;
	background-image:url('image/logo.png');
	margin-left:20px;
	float: left;
	margin-top: -270px;
}
#right{
	padding-left: 135px;
}
#top{
	background-image:url('image/boo_top_sentence.png');
	background-repeat:no-repeat;
	width:813px;
	height:177px;
	float: left;
	margin-top: -270px;
}
#selectors{
	float: left;
	margin-left:70px;
	font-size: 25px;
	font-weight: bolder;
	margin-top: 50px;
}
#lanSelection{
	float:left;
	width: 280px;
}
#typeSelection{
	float:left;
}
#brand{
	width:117px;
	height:147px;
	float: right;
	margin-right: 50px;
	margin-top: 150px;
}
#word{
	float: left;
	width: 700px;
	height: 385px;
	margin-left: 53px;
	text-align: center;
	font-weight:bold;
	margin-top: -40px;
}
#word_ab{
	font-size:50px;
	color:#900;
	text-align: center;
	letter-spacing: -1px;
	display: table-cell;
  	vertical-align: middle;
	height: 180px;
	width: 700px;
	line-height: inherit;
	padding-bottom: 12px
}
#word_ch{
	font-size:35px;
	color:#09492A;
	text-align: center;
	letter-spacing: -2px;
}
#loanword{
	margin-top:25px;
	font-size:20px;
	color:#900;
	text-align: center;
}
#control{
	background-image:url('../learn/image/boo_middle.png');
	background-repeat:repeat-y;
	float:left;
	width: 710px;
	height:220px;
	margin-left: -1px;
	padding-left: 52px;
	padding-right: 52px;
}
#prev{
	float:left;
	height:101px;
	width:96px;
	margin-top: 85px;
}
#next{
	float:right;
	height:101px;
	width:96px;
	margin-top: 85px;
}
#line{
	float:left;
	margin-top: -85px;
}
.img{
	background-image:url('../learn/image/boo_middle.png');
	background-repeat:repeat-y;
	float:left;
	width: 730px;
	height:205px;
	margin-left: 1px;
	padding-left: 55px;
	padding-right: 52px;
}
#img{
	background-image:url('../learn/image/frame.png');
	width: 308px;
	height:195px;
	float: left;
	margin-left: 195px;
}
#memo{
	font-size:20px;
	color:#900;
	text-align: center;
	font-weight: bold;
	background-image:url('../learn/image/boo_middle.png');
	background-repeat:repeat-y;
	width: 730px;
	height:auto;
	margin-left: 1px;
	padding-left: 38px;
	padding-right: 52px;
	float: left;
	min-height: 100px;
}
#img img{
	margin-top:14px;
	margin-left:14px;
	max-width:279px;
}
#close{
	background-image:url('../learn/image/boo_middle.png');
	background-repeat:repeat-y;
	float:left;
	width: 814px;
	height:127px;
	margin-left: -1px;
	padding-left: 58px;
}
#open{
	background-image:url('../learn/image/bu-back.png');
	float:left;
	width: 760px;
	height:310px;
	margin-left: -1px;
	padding-left: 58px;
}
#additional{
	width:711px;
	background-repeat:no-repeat;
	background-image:url('../learn/image/additional.png');
	float: left;
	padding-left: 120px;
	padding-top: 80px;
	height: 284px;
}
.add{
	height:30px;
	width: 468px;
}
.addAB{
	float: left;
	color:#900;
	font-size: 20px;
	font-weight:bold;
	width:200px;
}
.addCH{
	float: left;
	color:#09492A;
	font-size: 15px;
	font-weight:bold;
	padding-top:3px;
	width:180px;
	letter-spacing: -2px;
}
.addLW{
	color:#900;
	font-size: 15px;
	font-weight:bold;
	padding-top:3px;
	letter-spacing: -1px;
}
#bottom{
	background-image:url("image/boo_bottom.png");
	background-repeat:no-repeat;
	float: left;
	margin-left: -5px;
	height:37px;
	width: 813px;
}
a
{
	color:black;
	text-decoration:none;
}
.audio_player{
	width: 59px;
	height: 58px;
	float: left;
	margin-left: 238px;
	margin-top: 85px;
}

#sentence_box {
	width: 753px;
	padding: 0px 30px 30px 30px;
	margin-top: -93px;
	float: left;
	font-weight: bold;
	background-image:url('../learn/image/boo_middle.png');
	background-repeat:repeat-y;
}

#middle {
	width: 813px;
	margin-top: -93px;
	float: left;
	background-image:url('../learn/image/boo_middle.png');
	background-repeat:repeat-y;
	height: 300px;
}
.sentence_group {
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 25px;
	display: flex;
}
.sentence_item {
	margin-bottom: 10px;
}

.sentence_item, .sentence_header{
	display: flex;
}

.sentence_index {
	color: #900;
	font-size: 40px;
	font-family: 'Times New Roman', Times, serif;
	margin-right: 5px;
}

.sentence_ab, .sentence_label_ab {
	color: #900;
	font-size: 40px;
	font-family: 'Times New Roman', Times, serif;
}
.sentence_label_ab, .sentence_label_ch {
	margin-right: 4px;
}
#itemSelect, #itemSelect option {
	opacity: 0;
}

.sentence_ch {
	color:#107142;
	font-size: 30px;
	font-family: "微軟正黑體";
	letter-spacing: -2px;
}
.sentence_label_ch {
	color:#107142;
	font-size: 30px;
	font-family: "Times New Roman", Times, serif;
	padding-top: 4px;
}

.audio-play-btn {
	width: 50px;
	height: 50px;
	background-image: url('../learn/image/sound_play.png');
	background-size: cover;
	border: none;
	margin-right: 10px;
	margin-top: 2px;
	cursor: pointer;
}

.tribal-btn {
    /* 【修改點】背景：使用更深的棕色漸層 */
    background: linear-gradient(180deg, #8a5a30 0%, #5e3012 100%);
    
    /* 【修改點】邊框：顏色稍微加深，變成深金色/古銅色，避免太突兀 */
    border: 2px solid #dda86f; 
    border-bottom: 2px solid #a67c45; 
    
    /* 圓角與陰影 (保持不變，強調立體感) */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), /* 外部陰影稍微加重 */
                inset 0 1px 0 rgba(255, 255, 255, 0.2); /* 內部高光稍微減弱 */
    
    /* 文字樣式 */
    color: #ffffff;
    font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
    font-weight: bold;
    font-size: 16px;
    padding: 8px 22px; /* 稍微增加一點寬度 */
    cursor: pointer;
    
    /* 文字陰影，確保在深底色上清晰 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    
    /* 排版設定 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-decoration: none; /* 如果用 <a> 標籤當按鈕時需要 */
  }

  /* 滑鼠移過去的效果 (Hover) - 稍微變亮 */
  .tribal-btn:hover {
    background: linear-gradient(180deg, #9e6b40 0%, #703e1e 100%);
    border-color: #edc08a;
    transform: translateY(-2px); /* 浮起效果更明顯一點 */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6);
  }

  /* 按下去的效果 (Active) */
  .tribal-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, #5e3012 0%, #8a5a30 100%); /* 反向漸層模擬凹陷 */
    border-color: #a67c45;
  }

  #pdf_box {
	margin-top: 12px;
	margin-left: 30px;
	float: left;
  }
/* 回到頂端按鈕 */
.back-to-top-btn {
	position: fixed;
	bottom: 50px;
	display: none;
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 5px;
	padding: 10px;
	z-index: 9999;
	font-size: 14px;
}

#backTop_box {
	position: relative;
	right: 20px;
}