@charset "utf-8";
     /*@import url(https://fonts.googleapis.com/css?family=Titillium+Web:500);*/
     
     @import url(https://fonts.googleapis.com/css?family=Titillium+Web);
     /* CSS Document */
     
     html,
     body {
         background: #010000;
         font-family: 'Titillium Web', sans-serif, '微軟正黑體', Microsoft JhengHei;
         font-size: 22px;
         width: 100%;
     }
     
     a {
         text-decoration: none;
         color: #0CF;
     }
     
     h2 {
         color: #ff6400;
         font-size: 30px;
         letter-spacing: 2px;
         font-weight: bold;
         /*text-shadow:#F00 0px 0px 6px;*/
     }
     
     h3 {
         position: relative;
         margin-top: -5%;
         padding-bottom: 3%;
         text-align: center;
         font-size: 40px;
         color: #FFF;
         font-weight: 70px;
         text-shadow: #F60 0px 0px 6px;
     }
     
     p {
         color: #ddd;
         font-size: 20px;
         line-height: 32px;
         letter-spacing: 1px;
     }
     
     .ytcontainer {
         padding: 25px;
     }
     
     #ytplayer {
         max-width: 1100px;
         margin: 0 auto;
     }
     
     .embed-container {
         position: relative;
         padding-bottom: 56.25%;
         height: 0;
         overflow: hidden;
         max-width: 100%;
     }
     
     .embed-container iframe,
     .embed-container object,
     .embed-container .embed {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
     }
     
     .cp_content {
         height: 800px;
         overflow: hidden;
     }
     
     .colorwell {
         width: 90%;
         height: 800px;
         position: relative;
         top: -100px;
         float: left;
         margin: 5%;
         padding: 0;
     }
     
     .fuck {
         background: rgba(255, 55, 0, 1);
         animation: colorchange2 15s linear infinite;
         width: 90%;
         height: 800px;
         position: relative;
         top: -100px;
         float: left;
         margin: 5%;
         padding: 0;
     }
     
     .shite {
         animation: colorchange 4.2s linear infinite;
     }
     
     .shite1 {
         animation: colorchange 2.2s linear infinite;
     }
     
     .shite2 {
         animation: colorchange_flash 2.5s linear infinite;
     }
     
     .shite3 {
         animation: colorchange_flash_dual 2s linear infinite;
     }
     
     .tab_btn_title {
         font-size: 20px;
     }
     
     .typewrite {
         color: #ff6400;
         font-size: 50px;
         padding-left: 2%;
     }
     
     #output {
         color: #ff6400;
         font-size: 50px;
         padding-left: 2%;
     }
     
     #output:empty:before {
         content: '|';
         color: #000;
     }
     
     @keyframes colorchange {
         0% {
             opacity: 1.0;
         }
         50% {
             opacity: 0.4;
         }
         100% {
             opacity: 1.0;
         }
     }
     
     @keyframes colorchange_flash {
         0% {
             opacity: 0.0;
         }
         30% {
             opacity: 0.0;
         }
         32% {
             opacity: 1.0;
         }
         68% {
             opacity: 1.0;
         }
         70% {
             opacity: 0.0;
         }
         100% {
             opacity: 0.0;
         }
     }
     
     @keyframes colorchange_flash_dual {
         0% {
             opacity: 0.0;
         }
         35% {
             opacity: 0.0;
         }
         37% {
             opacity: 1.0;
         }
         48% {
             opacity: 1.0;
         }
         53% {
             opacity: 0.0;
         }
         58% {
             opacity: 1.0;
         }
         69% {
             opacity: 1.0;
         }
         71% {
             opacity: 0.0;
         }
         100% {
             opacity: 0.0;
         }
     }
     
     @keyframes colorchange2 {
         0% {
             background: rgba(255, 66, 0, 1);
         }
         7% {
             opacity: 0.8;
         }
         14% {
             background: rgba(255, 255, 0, 1);
         }
         21% {
             opacity: 0.8;
         }
         28% {
             background: rgba(0, 255, 0, 1);
         }
         35% {
             opacity: 0.8;
         }
         42% {
             background: rgba(0, 127, 255, 1);
         }
         49% {
             opacity: 0.8;
         }
         56% {
             background: rgba(0, 0, 255, 1);
         }
         63% {
             opacity: 0.8;
         }
         70% {
             background: rgba(139, 0, 255, 1);
         }
         77% {
             opacity: 0.8;
         }
         85% {
             background: rgba(255, 0, 0, 1);
         }
         92% {
             opacity: 0.8;
         }
         100% {
             background: rgba(255, 165, 0, 1);
         }
     }
     
     @media screen and (min-width: 1331px) {
         .cp_content {
             height: 680px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 600px;
             position: relative;
             top: -700px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 600px;
             position: relative;
             top: -700px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 20px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 40px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 40px;
             padding-left: 2%;
         }
     }
     
     @media screen and (min-width: 1200px) and (max-width: 1330px) {
         .cp_content {
             height: 600px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 500px;
             position: relative;
             top: -600px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 500px;
             position: relative;
             top: -600px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 20px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 40px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 40px;
             padding-left: 2%;
         }
     }
     
     @media screen and (min-width: 1031px) and (max-width: 1199px) {
         .cp_content {
             height: 550px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 450px;
             position: relative;
             top: -550px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 450px;
             position: relative;
             top: -550px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 20px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 40px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 40px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 25px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 18px;
             line-height: 26px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 994px) and (max-width: 1030px) {
         .cp_content {
             height: 500px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 400px;
             position: relative;
             top: -460px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 400px;
             position: relative;
             top: -460px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 18px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 30px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 30px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 25px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 18px;
             line-height: 26px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 881px) and (max-width: 993px) {
         .cp_content {
             height: 450px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 400px;
             position: relative;
             top: -450px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 400px;
             position: relative;
             top: -450px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 16px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 30px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 30px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 25px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 18px;
             line-height: 26px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 768px) and (max-width: 880px) {
         .cp_content {
             height: 400px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 350px;
             position: relative;
             top: -400px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 350px;
             position: relative;
             top: -400px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 16px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 20px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 20px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 20px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 16px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 670px) and (max-width: 768px) {
         .cp_content {
             height: 350px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 300px;
             position: relative;
             top: -350px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 300px;
             position: relative;
             top: -350px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 15px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 20px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 20px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 18px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 16px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 581px) and (max-width: 669px) {
         .cp_content {
             height: 310px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 250px;
             position: relative;
             top: -285px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 250px;
             position: relative;
             top: -285px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 15px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 18px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 16px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 520px) and (max-width: 580px) {
         .cp_content {
             height: 270px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 200px;
             position: relative;
             top: -240px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 200px;
             position: relative;
             top: -240px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 15px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 18px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 16px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 469px) and (max-width: 519px) {
         .cp_content {
             height: 230px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 180px;
             position: relative;
             top: -215px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 180px;
             position: relative;
             top: -215px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 15px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 18px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 14px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 420px) and (max-width: 468px) {
         .cp_content {
             height: 220px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 90%;
             height: 170px;
             position: relative;
             top: -200px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .colorwell {
             width: 90%;
             height: 170px;
             position: relative;
             top: -200px;
             float: left;
             margin: 5%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 15px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 14px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 14px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 381px) and (max-width: 419px) {
         .cp_content {
             height: 190px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 80%;
             height: 130px;
             position: relative;
             top: -190px;
             float: left;
             margin: 8%;
             padding: 0;
         }
         .colorwell {
             width: 80%;
             height: 130px;
             position: relative;
             top: -190px;
             float: left;
             margin: 8%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 15px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 15px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 12px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 14px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (min-width: 341px) and (max-width: 380px) {
         .cp_content {
             height: 170px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 80%;
             height: 120px;
             position: relative;
             top: -150px;
             float: left;
             margin: 8%;
             padding: 0;
         }
         .colorwell {
             width: 80%;
             height: 120px;
             position: relative;
             top: -150px;
             float: left;
             margin: 8%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 15px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 10px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 10px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 12px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 12px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }
     
     @media screen and (max-width: 340px) {
         .cp_content {
             height: 140px;
             overflow: hidden;
         }
         .fuck {
             background: rgba(255, 55, 0, 1);
             animation: colorchange2 15s linear infinite;
             width: 80%;
             height: 120px;
             position: relative;
             top: -140px;
             float: left;
             margin: 8%;
             padding: 0;
         }
         .colorwell {
             width: 80%;
             height: 120px;
             position: relative;
             top: -140px;
             float: left;
             margin: 8%;
             padding: 0;
         }
         .tab_btn_title {
             font-size: 15px;
         }
         .typewrite {
             color: #ff6400;
             font-size: 10px;
             padding-left: 2%;
         }
         #output {
             color: #ff6400;
             font-size: 10px;
             padding-left: 2%;
         }
         h2 {
             color: #ff6400;
             font-size: 12px;
             letter-spacing: 2px;
             font-weight: bold;
             /*text-shadow:#F00 0px 0px 6px;*/
         }
         p {
             color: #ddd;
             font-size: 12px;
             line-height: 24px;
             letter-spacing: 1px;
         }
     }