* {
  box-sizing:border-box;
  font-family:Arial,Helvetica,sans-serif;
}

body {
  background:#F8F8F8;
  margin:0;
}

img {
  vertical-align:bottom;
}

hr {
  margin-top:7px;
  *margin:0;
  border:0;
  color:#E8E8E8;
  background-color:#E8E8E8;
  height:1px
}

a {
  text-decoration:none;color:#000000;
}

h1 {
  font-size:300%;user-select:none;
}

h2 {
  font-size:200%;user-select:none;margin:0;
}

h3 {
  user-select:none;
}

.channel:hover {
  color:#336699;
}

.watermark {
  position:fixed;
  z-index:999;
  bottom:10px;
  right:10px;
  color:#cccccc;
  font-size:14px;
  opacity:0.5;
  user-select:none;
}

.topnav {
  position:fixed;
  top:0;
  z-index:1000;
  width:100%;
  height:58px;
  background-color:#FFFFFF;
  border-bottom:1px solid #E8E8E8;
  overflow:hidden;
}

.topnav a {
  float:right;
  display:block;
  color:#000000;
  text-align:center;
  height:100%;
  padding:18px 20px;
  text-decoration:none;
}

.topnav a:hover {
  transition:.3s;
  border-bottom:5px solid #202020;
}

.index_p {
  margin-top:10px;
  margin-bottom:10px;
  font-size:15px;
  user-select:none;
  border-left:3px solid #202020;
  padding-left:10px;
}

.index_p_2 {
  margin-top:10px;
  margin-bottom:10px;
  font-size:15px;
  user-select:none;
  border-right:3px solid #202020;
  padding-right:10px;
}

.index_p_body {
  margin-top:10px;
}

.index_img_1 {
  margin-top:40px;
  user-select:none;
  text-align:right;
}

.index_img_2 {
  margin-top:40px;
  user-select:none;
  text-align:left;
}

.leftcolumn {
  float:left;
  width:60%;
  margin-top:80px;
}

.rightcolumn {
  float:right;
  width:40%;
  margin-top:80px;
}

.leftcolumn_2 {
  float:left;
  width:40%;
  margin-top:50px;
}

.rightcolumn_2 {
  text-align:right;
  display:block;
  float:right;
  width:60%;
  margin-top:50px;
}

.row {
  padding-bottom:80px;
  background-color:#FFFFFF;
  overflow:hidden;
}

.row_2 {
  padding-top:50px;
  padding-bottom:50px;
  padding-left:10px;
  padding-right:10px;
  margin-bottom:50px;
  overflow:hidden;
}

.main_left {
  margin-left:350px;
  margin-right:3px;
}

.main_right {
  margin-right:350px;
  margin-left:3px;
}

.main_body {
  word-wrap:break-word;
  overflow:hidden;
}

.content {
  text-align:center;
  overflow:hidden;
}

.button-container {
  margin-top:10px;
  user-select:none;
}

.button_frist_1 {
  width:150px;
  background-color:#009999;
  color:white;
  font-size:16px;
  padding:5px;
  margin-right:10px;
  margin-top:10px;
  border:none;
  border-radius:5px;
  cursor:pointer;
}

.button_frist_1:hover {
  background-color:#006666;
}

.button_last_1 {
  width:150px;
  background-color:#FFFFFF;
  color:#009999;
  font-size:16px;
  padding:5px;
  margin-right:10px;
  margin-top:10px;
  border:1px solid #009999;
  border-radius:5px;
  cursor:pointer;
}

.button_last_1:hover {
  background-color:#e5ffff;
}

.button_frist_2 {
  width:150px;
  background-color:#009999;
  color:white;
  font-size:16px;
  padding:5px;
  margin-top:10px;
  border:none;
  border-radius:5px;
  cursor:pointer;
}

.button_frist_2:hover {
  background-color:#006666;
}

.timebox {
  font-size:200%;
  font-weight:800;
  color:#5f5f5f;
  user-select:none;
}

.logo {
  position:relative;
  float:left;
  padding:18px;
  height:100%;
  text-align:center;
  user-select:none;
  color:#ffffff;
}

.logo:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:100%;
  z-index:-2;
  animation:mylogo 1s;
  animation-delay:1s;
  animation-fill-mode:both;
}

.logo:before {
  background:#202020;
  z-index:-1;
}

.btm {
  width:0;
  height:5px;
  background:#202020;
  animation:btm 1s;
  animation-delay:3s;
  animation-fill-mode:both;
}

.aline_body {
  width:fit-content;
}

.bline_body {
  width:fit-content;float:right;
}

.aline {
  width:0px;
  overflow:hidden;
  white-space:nowrap;
  color:#ffffff;
  background:#202020;
  user-select:none;
  animation:aline 1s;
  animation-delay:2s;
  animation-fill-mode:both;
}

.bline {
  width:0px;
  overflow:hidden;
  white-space:nowrap;
  color:#ffffff;
  background:#202020;
  user-select:none;
  animation:bline 1s;
  animation-delay:4s;
  animation-fill-mode:both;
  float:right;
}

.atext {
  width:0px;
  overflow:hidden;
  white-space:nowrap;
  user-select:none;
  animation:atext 1s;
  animation-delay:2s;
  animation-fill-mode:both;
}

.btext {
  width:0px;
  overflow:hidden;
  white-space:nowrap;
  user-select:none;
  animation:btext 1s;
  animation-delay:4s;
  animation-fill-mode:both;
}

@keyframes mylogo {
  from {}
  to {width:100%;}
}

@keyframes aline {
  from {}
  to {width:100%;}
}

@keyframes bline {
  from {}
  to {width:100%;}
}

@keyframes atext {
  from {}
  to {width:100%;}
}

@keyframes btext {
  from {}
  to {width:100%;}
}

@keyframes btm {
  from {}
  to {width:100%;}
}

.footer {
  padding:3px;
  text-align:center;
  font-size:80%;
  margin-top:15px;
  user-select:none;
}

@media screen and (max-width:1600px) {
  .main_left {margin-left:250px;}
  .main_right {margin-right:250px;}
}

@media screen and (max-width:1400px) {
  .main_left {margin-left:150px;}
  .main_right {margin-right:150px;}
}

@media screen and (max-width:1200px) {
  .main_left {margin-left:50px;}
  .main_right {margin-right:50px;}
}

@media screen and (max-width:1000px) {
  .leftcolumn, .rightcolumn {width:100%;}
  .leftcolumn_2, .rightcolumn_2 {width:100%;}

  .main_left {margin-left:10px; margin-right:10px;}
  .main_right {margin-left:10px; margin-right:10px;}
  .main_body {margin-left:15%;margin-right:15%;}
  .index_img_1,.index_img_2{margin-top:10px;text-align:center;}
}

@media screen and (max-width:900px) {
  .main_body {margin-left:1%;margin-right:1%;}
}