@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap'); 
body { line-height: 1.4; letter-spacing: 1px; }
.goHome { color: white; }
.goHome:hover { color: white; border-bottom: none; }

h1,h2,h3,a { font-family: 'Noto Sans TC', sans-serif; }

/* .banner area =========================================================== */
.banner { background-image: url(../TS_img_layout/banner_s.jpg); 
  background-size: auto; padding: 1rem; text-align: center; }
.banner img { max-width: 100%; }

/* .nav area ============================================================== */
.nav a { font-size: 0.9rem; font-weight: normal; text-align: left; }
.nav .linkitem { margin-left: 3em; transform-origin: 0 0; }
.nav ul ul { background-color: rgba(255, 255, 255, 0.1); display: none; }
.nav ul ul li { display: block; border: none; }
.nav ul ul li a { display: block; white-space: nowrap; text-align: left; 
  color: #fff; padding: .3rem .8rem; }
.nav>ul>li:focus .linkitem { color: #c26; font-weight: bold; transform: scale(1.2); }
li.ntchild { padding: .2rem; color: #ffb7d6; white-space: nowrap; font-size: .95rem;
   }

/* .ts-handout area ======================================================= */
.ts-handout { padding: 40px 0 100px; min-height: 300px; }
.ts-handoutcontent { padding: 0 1rem; }

.ts-handout h1 { font-size: 1.5rem; color: #214263; margin-bottom: 20px;
  height: 50px; padding: 10px 0 0 20%; background-size: 50%;
  background-image: url(../TS_img_layout/hbg2.png);
  background-repeat: no-repeat; background-position: left center; }

.ts-handout h2 { font-size: 1.33rem; color: #214263; margin-bottom: 1rem; }
.ts-handout h2:not(:first-of-type) { margin-top: 2.5rem; }

.ts-handout h3 { font-size: 1.2rem; color: #214263; margin-bottom: 1rem; margin-top: 2rem; }

.ts-handout p { margin: 0 0 .7rem 2.5rem; }

.ts-handout a { color: #0068cc; }

.ts-handout img { max-width: 100%; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1); margin-bottom: 10px; }

.ts-width1-5em { display:inline-block; width:1.5em; }
.ts-pl1-5rem { padding-left: 1.5rem; }

.h3area .ex p { margin: 0; padding: 0; padding-left: 25px; text-indent: -25px; }

.ts-handout .study-target { background-color: lightyellow; color: darkblue; 
  font-size: 16px; font-weight: bold; margin: 0 2rem 2rem; padding: 3px 10px; }


/* .table1 area ===================================================================== */
.table1 { border: 1px solid #999; border-collapse: collapse; width: 100%; margin-bottom: 2rem; }
.table1 th, .table1 td { padding: .2rem .5rem; text-align: center; border-color: #999; }
.table1 tr:first-of-type th { background-color: #666; color: #fff; }
.table1 tr:first-of-type th:first-of-type { width: 100px; }
.table1 tr:first-of-type th:last-of-type { width: 4em; }
.table1 td:nth-of-type(1) { text-align: left; }

/* pre area ========================================================================= */
pre.prettyprint.TSpre { border: 3px double #ddd; font-size:16px; width:90%; background:#fff;
  padding:5px; margin-left: 30px; border-radius:6px; line-height: 1.5em; }
pre.prettyprint.TSpre ol{ padding-left:40px; }        
pre.prettyprint.TSpre ol li{ padding-left: 10px; list-style-type: decimal; border: none; }

pre.prettyprint.TSpre .com { color: #7e7e7e; }
pre.prettyprint.TSpre .pln { color: #0050e6; }
pre.prettyprint.TSpre .lit { color: #009b18; }
pre.prettyprint.TSpre .kwd { color: #000B8A; }

.operativeline { color: #bbb; text-decoration: line-through; }

pre { background-color: #e0e0e0; padding: 8px 15px; margin-bottom: 2rem;
  width: 100%; overflow: auto; font-weight: bold!important; }

/* RWD ============================================================================== */
@media(max-width:700px){
  html { font-size: 14px!important; }
  .nav ul ul li a { letter-spacing: 0; }
}

@media(min-width:700px){ 
  .nav a { text-align: center; }
  .nav .linkitem { margin-left: 0; transform-origin: center center; }
  .nav>ul>li { position: relative; }
  .nav ul ul { display: block; z-index: 9;
    position: absolute; background-color: #214263; padding-bottom: 30px;
    transform: translate(-4px,4px) scaleY(0); transform-origin: 0 0; 
    transition: all 0.3s cubic-bezier(0, 0.54, 0.25, 1); }
  .nav ul ul li a:hover { background-color: #c26; }
  .nav>ul>li:hover ul { transform: translate(-4px,4px) scaleY(1); }
  .ts-handoutcontent { padding-left: 100px; }
  .ts-handout h1 { padding: 10px 0 0 100px; background-size: auto; }
  .table1 tr:first-of-type th:last-of-type { width: 8em; }
}

/* MENU選單 .nav區域 再調整 =========================================== */
@media(min-width:700px){
.nav ul.ts-container { max-width: 800px; display: flex; }
.nav>ul.ts-container>li { width: 20%; }
.nav>ul.ts-container>li>a { max-width: 100%; }
  .nav .ts-d-hide { display: none; }
}