/* CSS Document */
@import url("https://imgs.click108.com.tw/css_2013/reset_2.css");
body{
	box-sizing: border-box;
	font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Helvetica, Arial;
	background-color: #ffb9ba;
	color: #555555;
}

a{
	text-decoration: none;
	color:#1a8dd4;
}

/* ============== 共用樣式：字級 ============== */
/*字級*/
#CM824 .txt_primary{
	font-size:1.3rem;
	line-height: 2rem;
}
#CM824 .txt_secondary{
	font-size:1.1rem;
	line-height: 1.8rem;
}
#CM824 .txt_small{
	font-size:1rem;
	line-height: 1.5rem;
}

/*字重*/
#CM824 .txt-bold{font-weight: bold;}


/* ============== 共用樣式：顏色 ============== */
/* 顏色：文字 */
#CM824 .txt-yellow{color:#ffeb0d;}
#CM824 .txt-red{color:#ff2f2f;}
#CM824 .txt-blue{color:#005eff;}

/* 顏色：背景顏色 */
#CM824 .background_color_primary{background-color: #ffb9ba;}
#CM824 .background_color_secondary{background-color: #fcf3ff;}
#CM824 .section_color_primary{background-color: #ffffff;}

/*消失區*/
.PC #float_icon .LIST_ICON, .PC #CM824 .pc_none{display:none;}

#CM824 .spacer_vertical_secondary{height: 20px;}
.MOBILE #CM824 .spacer_vertical_secondary{height: 15px;}
#CM824 .spacer_vertical_primary{height: 30px;}
#CM824 .margin_top_bottom_primary{margin:20px auto 10px auto;}
.MOBILE #CM824 .margin_top_bottom_primary{margin:10px auto 5px auto;}
.MOBILE #CM824 .spacer_vertical_primary{height: 15px;}

#CM824 .guide_blank{height: 20px;}
.MOBILE #CM824 .guide_blank{height: 10px;}

/* 控制品牌區塊上下間距 */
#CM824 #brand_block {
    margin: 0 auto;
}

/* ============== 主要框架 ============== */
#CM824 .CM821-wrapper{}

#CM824{
	width:100%;
	height:auto;
	overflow:hidden;
	background: url(../images/hero/bg_extension.jpg) top center;
	background-repeat: repeat-x;
	background-size: 10px auto;
	}.MOBILE #CM824{
		width:100%;
		height:auto;
		overflow:hidden;
		background: none;
	}

/* 內頁區塊 */
#CM824 .main_stage{
	width:100%;
	height: auto;
	overflow: hidden;
	margin:0 auto;
	}.MOBILE #CM824 .main_stage{
		width:95%;
	}

/* 分段區塊 */
#CM824 .section_block{
	width:1000px;
	height: auto;
	overflow: hidden;
	margin:0 auto;
	border-radius: 25px;
	padding:40px;
	box-sizing: border-box;
	}.MOBILE #CM824 .section_block{
		width:100%;
		padding:15px 10px;
		box-sizing: border-box;
	}

#CM824 .block_margin_primary{margin-bottom:40px;}
.MOBILE #CM824 .block_margin_primary{margin-bottom:35px;}

/* ============== 主視覺區塊 ============== */
#CM824 .key_visual{
	width:100%;
	height: auto;
	overflow: hidden;
}

#CM824 .visual_hero{
	width: 100%;
	height: auto;
    overflow: hidden;
}

#CM824 .visual_background{
	background-image: url(../images/hero/bg_pc.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 2050px auto;
	}.MOBILE #CM824 .visual_background{
		background-image: url(../images/hero/bg_mb.jpg);
	background-position: top 0px center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	}

#CM824 .hero_case{
	width:1000px;
	height: auto;
	margin:0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top:120px;
	overflow: hidden;
	}.MOBILE #CM824 .hero_case{
		width:95%;
		margin:0 auto;
		margin-top:45px;
	}

/* 主視覺標題 */
#CM824 .hero_title{
	width: 48%;
	height: auto;
	margin:0px 10px 0px 0px;
	}.MOBILE #CM824 .hero_title{
		width: 84%;
		height: auto;
		margin:0 auto;
	}

#CM824 .hero_title h1{
	text-indent: -9999px;
	width:100%;
	background: url(../images/hero/hero_title.png) no-repeat center;
	background-size: cover;
	aspect-ratio: 493/343;
	}.MOBILE #CM824 .hero_title h1{
		width:100%;
		background: url(../images/hero/hero_title_mb.png) no-repeat center;
		background-size: cover;
		aspect-ratio: 493/285;
	}

/* 主視覺配圖盒子 */
#CM824 .hero_phapp{
	width:32%;
	height: auto;
	background: url(../images/hero/hero_phapp.png) no-repeat center;
	background-size: cover;
	aspect-ratio: 367/462;
	}.MOBILE #CM824 .hero_phapp{
		width:100%;
		height: auto;
		background: url(../images/hero/hero_phapp_mb.png) no-repeat center;
		background-size: cover;
		aspect-ratio: 680/540;
		margin-top:30px;
	}

#CM824 .hero_phbox{
	width:755px;
	margin:0 auto;
	background: url(../images/hero/hero_prewords.png) no-repeat center;
	background-size: cover;
	aspect-ratio: 755/294;
	margin:28px auto 40px auto;
	}.MOBILE #CM824 .hero_phbox{
		width:100%;
		margin:50px auto 35px auto;
		background: url(../images/hero/hero_prewords_mb.png) no-repeat center;
		aspect-ratio: 755/294;
		background-size: cover;
	}

/* ============== 內容區塊 ============== */
.PC #CM824 .container_frame{
	width: 670px;
    height: auto;
    overflow: hidden;
    margin: 0px auto;
	}.MOBILE #CM824 .container_frame{
		width: 100%;
		height: auto;
		overflow: hidden;
		margin:0 auto;
	}

/* 標題盒子 */
#CM824 .title_phbox{
	width:100%;
	height: auto;
	overflow: hidden;
}

/* 配圖盒子 */
#CM824 .item_phbox{
	width:85%;
	height: auto;
	margin:0 auto;
	overflow: hidden;
	}.MOBILE #CM824 .item_phbox{
		width:90%;
	}

/* 配圖盒子 */
#CM824 .item_phbox_words01{
	width:65%;
	height: auto;
	margin:0 auto;
	overflow: hidden;
	margin:18px auto 0px auto;
	}.MOBILE #CM824 .item_phbox_words01{
		width:60%;
		margin:10px auto 0px auto;
	}

#CM824 .title_phbox img,
#CM824 .item_phbox img,
#CM824 .item_phbox_words01 img{
	display: block;
	width:100%;
	height: auto;
}

/* 系統字盒子 */
#CM824 .item_contentbox{
	width:100%;
	height: auto;
	overflow: hidden;
}

#CM824 .item_contentbox br{
	display: block;
}

#CM824 .item_contentbox p{
	font-size:2rem;
	line-height: 2.8rem;
	text-align: center;
	}.MOBILE #CM824 .item_contentbox p{
		font-size:1.1rem;
		line-height: 1.5rem;
		text-align: center;
	}

/* ============== 按鈕區塊 ============== */
#CM824 .color_orange{
	background: #FF6666;
	background: linear-gradient(0deg,#ff6666 0%, #ffc37b 100%);
}

.PC #CM824 .color_orange:hover{
	background: #ffc37b;
	background: linear-gradient(0deg,#ffc37b 0%, #ff6666 100%);
}

#CM824 .border_radius_primary{
	border-radius: 100px;
}

#CM824 .norm_button{
	width:100%;
	height: auto;
	overflow: hidden;
	margin-top:12px;
}

#CM824 .norm_button a{
	display: block;
	width:100%;
	height: auto;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	padding:5px;
	color:#ffffff;
	box-sizing: border-box;
	margin:0 auto;
	border:2px solid #ffffff;
	text-shadow: 2px 2px 4px rgba(255,102,102,1), -2px -2px 4px rgba(255,102,102,1);
	}.MOBILE #CM824 .norm_button a{
		width:100%;
		font-size: 1.5rem;
		padding:4px;
	}

/* 控制主視覺按鈕寬度 */
#CM824 .visual_hero .norm_button a{
	width:205px;
}

.MOBILE #CM824 .visual_hero .norm_button a{width:50%;}

#CM824 .section_block .norm_button {
	width:100%;
	margin:0 auto;
}

#CM824 .section_block .norm_button a{
	width:fit-content;
	padding:5px 60px;
	}.MOBILE #CM824 .section_block .norm_button a{
		width:fit-content;
		font-size: 1.4rem;
		padding:5px 20px;
	}


/* ============== 輪播區塊 ============== */
#CM824 .slide_block{
	width:100%;
	height: auto;
	overflow: hidden;
}

#CM824 .slide_title{
	width:100%;
	height: auto;
	font-size:1.8rem;
	font-weight: bold;
	text-align: center;
	margin:15px auto 0px auto;
	}.MOBILE #CM824 .slide_title{
		font-size:1.2rem;
		margin:10px auto 10px auto;
	}

#CM824 .slide_box{
	width:70%;
	height: auto;
	overflow: hidden;
	margin:15px auto 0px auto;
	}.MOBILE #CM824 .slide_box{
		width:100%;
		margin:0px auto 0px auto;
	}

#CM824 .slide_box ul{
	width:2000px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

#CM824 .slide_box li.slide_item{
	width:310px;
	height: auto;
	min-height: 170px;
	background-color: #fffae4;
	border-radius: 25px;
	margin-right: 20px;
	padding:20px;
	box-sizing: border-box;
	box-shadow: inset 0 0 10px 2px #ffeba4;
	position: relative;
	}.MOBILE #CM824 .slide_box li.slide_item{
		width:280px;
		min-height: 150px;
		border-radius: 10px;
	}

#CM824 .slide_box li.slide_item p{
	font-size:1.2rem;
	line-height: 1.8rem;
	}.MOBILE #CM824 .slide_box li.slide_item p{
		font-size:1.1rem;
		line-height: 1.7rem;
	}

#CM824 .item_username{
	position: absolute;
	bottom:10%;
	right:6%;
	font-weight: bold;
}

#CM824 .slide_dot{
	width: 100%;
	height: auto;
	overflow: hidden;
}

#CM824 .slide_dot ul{
	width: 10%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 16px 0px;
	}.MOBILE #CM824 .slide_dot ul{
		width: 20%;
		padding:15px 0px;
	}

#CM824 .slide_dot li{
	width: 12px;
	max-width:12px;
	height: auto;
	aspect-ratio: 1/1; 
    border-radius:50%;
	background-color: #cccccc;
	}.MOBILE #CM824 .slide_dot li{
		width: 10px;
		max-width:10px;
	}

#CM824 .slide_dot li.active_dot{
	width: 12px;
	max-width:12px;
	height: auto;
    border-radius:50%;
	background-color: #75abf7;
	}.MOBILE #CM824 .slide_dot li.active_dot{
		width: 10px;
		max-width:10px;
	}

#CM824 .slide_dot li a{
	display: block;
	width:100%;
	height: 100%;
}

/* ============== 收合區塊 ============== */
#CM824 .accordion_case{
	width:100%;
	height: auto;
	overflow: hidden;
	margin:25px auto 0px auto;
	border-radius: 10px;
	border:2px solid #d6e7ff;
	box-sizing: border-box;
	}.MOBILE #CM824 .accordion_case{
		margin:15px auto 0px auto;
	}

#CM824 .accordion_case .tab_bar{
	width:100%;
	height: auto;
	background-color: #e4eeff;
}

#CM824 .accordion_case .tab_bar ul{
	width:100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 12px 25px;
	box-sizing: border-box;
	}.MOBILE #CM824 .accordion_case .tab_bar ul{
		padding: 8px 12px;
	}

#CM824 .accordion_case .tab_bar li.tab_title{
	font-size: 1.4rem;
	font-weight: bold;
	color: #3578d5;
	}.MOBILE #CM824 .accordion_case .tab_bar li.tab_title{
		font-size: 1.1rem;
	}

/* 收合按鈕樣式 */
#CM824 .accordion_case .tab_bar li.tab_icon{
	width: 24px;
	height: 24px;
	}.MOBILE #CM824 .accordion_case .tab_bar li.tab_icon{
		width: 20px;
		height: 20px;
	}

/* 收合按鈕樣式：圖片 */
#CM824 .accordion_case .tab_bar li.tab_icon img{
	display: block;
	width: 100%;
	height: auto;
}

#CM824 .accordion_case .tab_bar a{
	display: block;
	width: 100%;
	height: auto;
}

.PC #CM824 .accordion_case .tab_bar a:hover{
	background-color: #edf4ff;
}

/* 收合內容區塊 */
#CM824 .accordion_case .tab_content{
	width:100%;
	height: auto;
	padding:15px 20px;
	box-sizing: border-box;
	}.MOBILE #CM824 .accordion_case .tab_content{
		padding:12px 12px;
	}

#CM824 .accordion_case .tab_content p{
	font-size:1.2rem;
	line-height: 1.8rem;
	margin-bottom:15px;
	}.MOBILE #CM824 .accordion_case .tab_content p{
		font-size:1.1rem;
		line-height: 1.7rem;
		margin-bottom:10px;
	}

#CM824 .accordion_case .tab_content p:last-child{margin-bottom: 0px;}

/* ============== APP下載區塊 ============== */
.PC #CM824 .download_area{
	width:615px;
	height: auto;
	overflow: hidden;
	margin:0 auto;
	margin-top:20px;
	}.MOBILE #CM824 .download_area{
		width:100%;
		height: auto;
		overflow: hidden;
		margin:0 auto;
		margin-top:10px;
	}

.PC #CM824 .ph_itembox{
	width:750px;
	height: auto;
	margin:0 auto;
	}.MOBILE #CM824 .ph_itembox img{
		display: block;
		width: 90%;
		height: auto;
		margin:0px auto;
	}

.PC #CM824 .ph_titlebox img,
.PC #CM824 .ph_itembox img{
	display: block;
	width:100%;
	height: auto;
}

.PC #CM824 .no_mg{margin-bottom:0px;}


/* ============== APP下載區塊：雙平台按鈕 ============== */
/* 雙平台按鈕樣式：圖片 */
#CM824 .IOS_bt{
	background: url(../images/CM819/ph_bt_ios.png) no-repeat top center;
	background-size: contain;
}

#CM824 .Android_bt{
	background: url(../images/CM819/ph_bt_Android.png) no-repeat top center;
	background-size: contain;
}

#CM824 .IOS_bt{
	background: url(../images/CM819/ph_bt_ios.png) no-repeat top center;
	background-size: contain;
}

#CM824 .Android_bt{
	background: url(../images/CM819/ph_bt_Android.png) no-repeat top center;
	background-size: contain;
}

.PC #CM824 .button_area02{
	width:450px;
	height: auto;
	margin:15px auto;
	}.MOBILE #CM824 .download_area .button_area02{
		display: block;
		margin-top:10px;
	}

.PC #CM824 .button_area02 ul{
	width:100%;
	height: 65px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	}.MOBILE #CM824 .button_area02 ul{
		width:88%;
		height: 50px;
		margin:0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

.PC #CM824 .button_area02 ul li{
	width:49%;
	height: auto;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	}.MOBILE #CM824 .button_area02 ul li{
		width:49%;
		height: auto;
		border-radius: 8px;
		overflow: hidden;
		cursor: pointer;
	}

.PC #CM824 .button_area02 ul li a{
	display: block;
	width:100%;
	height: 65px;
	line-height: 65px;
	border-radius: 8px;
	background-color: #000000;
	text-indent: -9999px;
	transition: all .3s ease;
	}.MOBILE #CM824 .button_area02 ul li a{
		display: block;
		width:100%;
		height: 50px;
		line-height: 50px;
		border-radius: 8px;
		background-color: #000000;
		text-indent: -9999px;
		transition: all .3s ease;
	}

.PC #CM824 .button_area02 ul li a:hover{
	transform: scale(.95);
}

#CM824 .MOBILE #CM824 .no_mg{margin-bottom:0px;}


/*=================手機版=================*/
/*消失區*/
.MOBILE .floatbox, .MOBILE .MB_CLOSE, .MOBILE #float_icon .LIST_ICON,.MOBILE #CM824 .mobile_none{ display:none;}
/*MOBILE表頭尾*/
.MOBILE #float_icon{ display:block;}

.MOBILE #float_icon .BACK_top{}
/*控制段落行距*/