/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Righteous&display=swap');*/
/* font-family: 'Noto Sans TC', sans-serif; */
/* font-family: 'Righteous', 'Noto Sans TC', sans-serif; */
/* reset & default set area ============================================================= */
*, :after, :before { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; height: 100%; }
body { font-size: 100%; background-color: #fff; color: #282822; position: relative;
  background-image: url(../TS_img_layout/462.jpg); min-height: 100%;
  font-family: Verdana, Arial, "Microsoft JhengHei", 微軟正黑體, sans-serif; }

h1,h2,h3,h4,h5,h6 {  font-weight: normal; }
h1 { font-weight: bold; }
ul,ol,li { list-style: none; }
a { text-decoration: none; letter-spacing: .1rem; padding-left: .1rem;
  display: inline-block; border-bottom: 1px solid transparent; color: #214263; 
}
a:hover { color: #c26; border-bottom: 1px solid; }

:focus { outline: none;}

hr { margin: 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #fff; }

.ts-fs-12em { font-size: 1.2em; }
.ts-container { width: 100%; max-width: 1200px; margin: 0 auto; }
.ts-tcenter { text-align: center; }
.ts-fright { float: right; }
.ts-plr-15 { padding: 0 15px; }
.ts-d-hide { display: block; }
.ts-m-hide { display: none; }
.ts-img100 { max-width: 100%; }
.ts-bold { font-weight: bold; }
.ts-radio-s { border-radius: 6px; }
.ts-wordnowrap { white-space: nowrap; }
.ts-hastip { position: relative; }
.ts-hastip:hover .ts-tooltip { display: block; }
.ts-tooltip { background-color: black; color: white; display: none;
  padding: 5px; font-size: 12px; font-weight: normal; z-index: 9999;
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%,110%); }
.ts-tooltip::before { content: ''; border-width: 0 8px 8px; border-style: solid; 
  border-color: transparent transparent black;
  position: absolute; left: 50%; top: -7px; transform: translateX(-50%); }
.ts-clearboth { clear: both; }
/* .ts-overflowhidden { overflow: hidden; } */

.ts-row { overflow: hidden; }
.ts-col-half { float: left; }
.ts-col-half { width: 100%; }

.ts-bgc-dark { background-color: #282822; color: #fff; }
.ts-bgc-darkblue { background-color: #214263; color: #fff; }
.ts-bgc-hotpink { background-color: #c26; color: #fff; }
.ts-c-light { color: #fff; }
.ts-c-hotpink { color: #c26; }
.ts-c-pink { color: #ffaaff; }
.ts-c-blue { color: blue; }
.ts-c-red { color: red; }
.ts-c-gray { color: #999; }
.ts-c-yellow { color: #ff0; }


@media(min-width:700px){ 
  .ts-d-hide { display: none; } 
  .ts-m-hide { display: inline-block; } 
  .ts-col-half { width: 50%; }
/*   h1,h2,h3,a { font-family: 'Noto Sans TC', sans-serif; } */
}

.ts-handout a.ts-ex-btn { transition: background-color .5s, box-shadow 1s; 
  color: #fff; background-color: #000; border-radius: 30px; border: none;
  display: inline-block;  padding: 8px 16px; vertical-align: middle; white-space: nowrap; }

.ts-handout a.ts-ex-btn:hover { 
  color: #000; background-color: #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 5px 20px rgba(0,0,0,0.3); }

/* top deepgray login/register area ================================================== */
.top { padding: 8px; font-size: 12px; line-height: 1.2em; color: #e2e2e2; 
  position: fixed; left: 0; top: 0; width: 100%; z-index: 9999; }
.top, .top2 { min-height: 65px; }
.top .ts-fright { display: flex; align-items: center; }
.top .linkitem { color: #fff; font-size: 14px; padding: 8px; display: block; }
.top .linkitem:hover { color: #c26; }
.top span { display: block; }
.top .show-menu { display: block; line-height: 1em; padding: 5px 10px;
  background-color: #fff; border: none; font-size: 14px;
   }
.top img { transform: translateY(2px); }


@media(min-width:700px){
  .ts-d-hide { display: none; }
  .top, .top2 { height: auto; min-height: 42px; }
  .top span { display: inline-block; }
  .top .show-menu { display: none; }
  /* .top .linkitem {  } */
}


/* nav menu area ===================================================================== */
.nav { padding: 10px; text-align: center; box-shadow: 0 0 8px 2px #000; 
  transform: translateX(-110%); transition: all .5s;
  position: fixed; left: 0; top: 0; width: 70%; 
  min-width: 200px; min-height: 100vh; z-index: 10; 
  height: 100%; overflow-y: auto; }

.nav h1 { width: 180px; min-height: 50px; margin: 0 auto 20px; padding-top: 10px; 
  background-image: url(../TS_img_layout/m_menu_h1.png); 
  background-repeat: no-repeat; background-position: center; }

.nav .linkitem { color: #fff; padding: 7px 0; margin: 0; display: block; }
.nav>ul>li:hover .linkitem { color: #c26; font-weight: bold; transform: scale(1.2); }
.nav a:hover { border-bottom-color: transparent; }

.nav .fa { margin-right: 5px; }

.nav.open { transform: translateX(0); }

@media(min-width:700px){
  .nav { box-shadow: none; transform: translateX(0); transition: none; 
    position: relative; width: 100%; min-height: 1em; padding: 5px 0; 
    height: auto; overflow-y: visible; }
  .nav li { display: inline-block; border-right: 1px solid rgba(0, 0, 0, 0.9); }
  .nav li:last-of-type { border-right: none; }
  .nav .linkitem { display: block; padding: 7px 10px; }
  .nav.fixed { position: fixed; left: 0; top: 42px; width: 100%; z-index: 8; }
}


/* searchForm area ==================================================================== */
.searchForm { background-color: rgba(255, 255, 255, 0.3); 
  border: 1px solid rgba(153, 153, 153, 0.3); border-radius: 8px; 
  padding: 15px; margin-bottom: 30px; text-align: center; display: none; }
.searchForm input { padding: .5rem; border-radius: 5px; border: 1px solid #999; background-color: #fff; }
.searchForm input[name=searchWord] { width: 65%; margin-right: .5rem; }
.searchForm input[type=submit] { cursor: pointer; }
.searchForm .closeBtn { font-size: 18px; padding: 5px 8px; cursor: pointer; transform: translateX(8px); }


/* footer area ====================================================================== */
footer { font-size: 12px; text-align: center; padding: 1em; 
  position: absolute; left: 0; bottom: 0; width: 100%; z-index: 8; }
footer span { display: block; }

.goTop { background: url(../TS_img_layout/gotop.svg) no-repeat center;
  background-size: contain; cursor: pointer; text-indent: -9999px; opacity: .4;
  position: fixed; right: 1em; bottom: 1em; width: 40px; height: 40px; z-index: 9; 
  transform-origin: center bottom; }
.goTop:hover { opacity: 1; animation: goTopAni 1s infinite; }
@keyframes goTopAni {
  50% { transform: scale(1.2); }
}

@media(min-width:700px){
  footer span { display: inline-block; }
  footer span:nth-of-type(2) { border-left: 1px solid #999; border-right: 1px solid #999; 
    padding: 0 1em; margin: 0 1em; }
}

/* TS-po area ============================================================================== */
.TS-po { padding-top: 30px; }
.TS-po div:nth-child(1) video{ width: 100%; max-width: 700px; display: block; margin: 0 auto; }
.TS-po div:nth-child(2) { padding: 20px 0; font-size: 17px; line-height: 1.5; text-align: center; }
.TS-po div:nth-child(2) a { color: #d34c8f !important; }
.TS-po div:nth-child(3) a { width: 85%; display: block; margin:0 auto 20px; }
.TS-po div:nth-child(3) img{ width: 100%; }
.tswebfont { font-family: 'Righteous', 'Noto Sans TC', sans-serif; }

@media(min-width:500px){
  .TS-po div:nth-child(3) a{width: 60%; }
}

@media(min-width:1000px){
  .TS-po {display: flex;}
  .TS-po div {display: flex;align-items: flex-start;}
  .TS-po div:nth-child(1){width: 40%; }
  .TS-po div:nth-child(2){flex: 1; padding: 0 20px; font-size: 17px; line-height: 1.8; text-align: left;}
  .TS-po div:nth-child(3){width: 30%; }
  .TS-po div:nth-child(3) a{width: 100%;margin: 0;}
  .TS-po div:nth-child(3) img{width: 100%; display: block; margin: 0 auto;}
}

.ts{background-color: #ff00a2;}