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

* { padding: 0; margin: 0; }
body * { font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4, Tahoma, Monaco, sans-serif; }
a { text-decoration: none; }

/*其他不重要*/
div.sampleBlock { border: #c90000 2px dashed; padding: 30px; margin:30px 0; height: auto; }
p.notes { background: #FFFD82; color: #c90000; padding: 16px; margin-bottom: 30px; }

/*容器*/
.cc_container { width: 80%; margin: auto; }	/* 寬度需重新定義 */
.cc_container hr { border: none; height: 1px; border-bottom: #c90000 5px solid; }	/* hr 為下分隔線 */

/*平均散落內容*/
.cc_flex { width: 100%; display:flex; }
.cc_flex > div { flex:1; }
.cc_flex img,
.cc_flex span { width: 100%; display: block; }

/*文繞圖*/
.cc_txt_imgLeft div.img { float:left; width: 40%; margin-right: 20px; margin-bottom: 10px; }
.cc_txt_imgRight div.img { float:right; width: 40%; margin-left: 20px; margin-bottom: 10px; }
.cc_txt_imgLeft div.img > img,
.cc_txt_imgRight div.img > img { width: 100%; }
.clear { clear: both; }

/*自訂規則*/
.t_left { text-align: left; }
.t_center { text-align: center; }
.t_right { text-align: right; }
.txt { font-size: 1.2em; }

/* 1. 分頁頁簽  */
li { list-style: none; }
ul.itemNav li { display: inline-block; float: left; }

ul.itemNav li a {
	display: block; text-align: center; width: 200px; line-height: 30px;
	color: #888;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    border-bottom: 1px solid #aaa;
}
ul.itemNav li.active a {
	color: #468ccd; border: 1px solid #aaa;  border-bottom: none;
}
div.itemContent { padding: 20px; }

/* 2. 大標題(置左、置中、置右) */
.cc_title { font-size: 1.6em; line-height: 2em; font-weight: bold; color: #444; }

/* 3. 小標題(置左、置中、置右) */
.cc_subtitle { font-size: 1.4em; line-height: 2em; font-weight: bold; color: #888; }

/* 4. 內文(置左、置中、置右) */
.cc_content { font-size: 1.2em; line-height: 1.6em; color: #9a9a9a; padding: 12px; margin-bottom: 30px; }

/* table  */
.cc_table > table { width: 100%; border-top: #aaa 1px solid; border-left: #aaa 1px solid; }
.cc_table > table th,
.cc_table > table td { border-right: #aaa 1px solid; border-bottom: #aaa 1px solid; padding: 10px; }
.cc_table > table th.bg,
.cc_table > table td.bg { background: #75ABFF; color: #fff; }
.cc_table > table * { font-size: 1em; }
.cc_table > table span { font-size: 15px; }

/* youtube */
.cc_youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.cc_youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* text type */
.txt11 { font-size:11px; }
.txt12 { font-size:12px; }
.txt13 { font-size:13px; }
.txt15 { font-size:15px; }
.txt18 { font-size:18px; }
.txtB { font-weight:bold; }
.txtN { font-weight:normal; }

.txtBlack { color:#000; }
.txtNavy { color:#069; }
.txtLightBlue { color:#9fd0e3; }
.txtBlue { color:#4ca4de; }
.txtBrown { color:#b5730f; }
.txtGreen { color:#539a14; }
.txtGray { color:#919295; }
.txtOrange { color:#f86d11; }
.txtPurple { color:#975f7a; }
.txtRed { color:#e23a3b; }
.txtYellow { color:#ff9; }
.txtPink { color:#f56f6c; }
.txtWhite { color:#fff; }

/* width */
.w40 { width:40px;}
.w50 { width:50px;}
.w60 { width:60px;}
.w80 { width:80px; }
.w100 { width:100px; }
.w150 { width:150px; }
.w180 { width:180px; }
.w200 { width:200px; }
.w250 { width:250px; }
.w300 { width:300px; }
.w350 { width:350px; }
.w400 { width:400px; }
.w500 { width:500px; }
.w600 { width:600px; }
.w700 { width:700px; }
.w800 { width:800px; }

.w20p { width:20%; }
.w30p { width:30%; }
.w40p { width:40%; }
.w50p { width:50%; }
.w60p { width:60%; }
.w70p { width:70%; }
.w80p { width:80%; }
.w90p { width:90%; }

@media (max-width: 767px) {
	.cc_container { width: 96%; }

	.cc_flex { display:block; }

	.cc_table { overflow-y: hidden; overflow-x: scroll; }
	.cc_table > table { width: 1200px; }

	.cc_txt_imgLeft div.img { float: none; margin-right: 0; width: 100%; }
	.cc_txt_imgRight div.img { float: none; margin-left: 0; width: 100%; }
	.cc_txt_imgLeft div.img > img,
	.cc_txt_imgRight div.img > img { width: 100%; }

	ul.itemNav li a { width:100px; }
}