* { margin: 0; padding: 0; box-sizing: border-box; }
:focus { outline: none; }
ul, ol, li { list-style: none; }
a { text-decoration: none; }

/* 顏色/寬度/字體/間距 定義 --------------------------------------------------------------------- */
.bgc_b { background-color: #47bcc6; }
.bgc_p { background-color: #f27078; }
.bgc_g { background-color: #9ab95c; }
.w50p { width: 50%; }

/* body, container 定義 ------------------------------------------------------------------ */
body { font-family: Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif; 
  background: url(images/body_bg.png) no-repeat center -200px #E8ECED; color: #666;
  font-size: 1rem; }

.container { width: 100%; max-width: 950px; margin: 0 auto; padding-top: 160px; 
  position: relative; }
#title { width: 42.3%; position: absolute; z-index: 1;
  top: -30px; left: 50%; transform: translateX(-50%); }
#title img { width: 100%; height: auto; }

#chapter { width: 30%; position: absolute; z-index: 3;
  top: 7px; left: 0; transform: translateX(-0%); text-align: left;}
#chapter img { width: 75px; height: 52px; }

/* nav 區域定義 ------------------------------------------------------------------- */
nav { position: absolute; right: 0; top: 20px; z-index: 3; width: 100%; text-align: right; }
nav a { display: inline-block; width: 110px; height: 45px; 
  background-size: contain; background-repeat: no-repeat; }
nav a:nth-child(1) { background-image: url(images/btn_1.png); }
nav a:nth-child(2) { background-image: url(images/btn_2.png); }
nav a:nth-child(3) { background-image: url(images/btn_3.png); }
nav a:nth-child(1):hover { background-image: url(images/btn_1_hover.png); }
nav a:nth-child(2):hover { background-image: url(images/btn_2_hover.png); }
nav a:nth-child(3):hover { background-image: url(images/btn_3_hover.png); }
nav a:nth-child(1):active { background-image: url(images/btn_1_active.png); }
nav a:nth-child(2):active { background-image: url(images/btn_2_active.png); }
nav a:nth-child(3):active { background-image: url(images/btn_3_active.png); }

/* content 內容區域定義 --------------------------------------------------------- */
.content { background-color: #fff; width: 95%; min-height: 350px; 
  margin: 0 auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); overflow: hidden;
  position: relative; z-index: 2; padding: 30px 40px; }

.content h1 { color: #fff; border-radius: 50px; width: 100%; max-width:700px;
  background-image: url(images/subTitleIcon.png); background-repeat: no-repeat; 
  background-position: 10px center; font-size: 1.3rem; padding: 4px 0 4px 45px; }

/* 網站第一層三頁的定義 ------------------------------------------------------------- */
.content .col { width: 50%; float: left; padding-left: 40px; }

.content .list { font-size: 1rem; letter-spacing: 0.1rem; padding: 0 0 10px 50px; }
.content .list a { display: block; margin: 2px 0; color: #666; font-size: 1.1rem;
  font-weight: bold; color: #000; font-weight: bold; }
.content .list a[href^=index]:hover { color: #0052CC; }
.content .list a[href^=index]:active { color: #0052CC; opacity: 0.3; }

/* 網站第二層各頁的定義 ------------------------------------------------------------- */
.level_2 .content { padding-left: 90px; }
.level_2 .content h2 { font-size: 1.3rem; padding: 10px 0 0 45px; }
.level_2 .content h3 { font-size: 1.2rem; padding: 10px 0 0 90px; }
.level_2 .movlist { padding-left: 90px; }
.level_2.index2 .movlist, .level_2.index3 .movlist { padding-left: 45px; }
.level_2 .movlist a { display: inline-block; width: 40px; height: 50px;  
  background-image: url(images/no_btn.png); background-size: 30px; background-repeat: no-repeat; 
  background-position: center top; text-align: center; font-size: 1.5rem; font-weight: bold; color: #fff; }
.level_2.index3 .movlist a { height: 30px; }
.level_2 .movlist a span { color: #DB5E09; font-size: 13px; text-decoration: underline; display: block; padding-top: 5px; }
.level_2 .movlist a[href*=mov]:hover { background-image: url(images/no_btn_hover.png); }
.level_2 .movlist a[href*=mov]:active { background-image: url(images/no_btn_active.png); }


/* footer 區域定義 ----------------------------------------------------------------- */
footer { font-size: 1rem; font-weight: bold; text-align: center; padding: 15px; }

.btnArea { position: absolute; right: 0; bottom: 0; z-index: 3; }
.btnArea a { padding: 3px; display: block; }
.btnArea img { display: block; width: 30px; height: 30px; }