@charset "utf-8";
/*block_A*/
.block_a{
	clear:both;
	background:#47c1b5;
	width:100%;
	height:auto;
	overflow:hidden;
	padding:0 0 0 0;
  border-radius:20px 20px 0 0;
}
@media screen and (max-width:1200px) {
  .block_a{
    border-radius:0;
  }
}
.block_a .title_column{
/*	-webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);*/
  position: relative;
	background: #2dada0;
	border: 1px solid #2dada0;
	text-align: center;
	font-size:1.4em;
	color: #fff;
}
.block_a .title_column h2 img{
	width: 50px; height: 50px; vertical-align: middle; position: relative; top:-8px;
}
.block_a .block_info_column{
	clear: both;
	position: relative;
	width: 96%;
	margin: 0 auto;
	padding: 0px 0;
}
.img_block_a_001{
	position: absolute;
	top:5%;
	right: 55%;
	max-width: 380px;
	/*animation: img_block_a_001 3s infinite;
	-webkit-animation: img_block_a_001 3s infinite;*/
}
.img_block_a_002{
	position: absolute;
	top: 60%;
	right: 90%;
	max-width: 80px;
}
.img_block_a_003{
	position: absolute;
	top:70%;
	right:5%;
	max-width: 50px;
}
.img_block_a_001 img,
.img_block_a_002 img,
.img_block_a_003 img{
	width: 100%;
}
/*effect*/
@-webkit-keyframes img_block_a_001{
  0%{top:10%;right:50%;}
  50%{top:0%;right:50%;}
}
@keyframes img_block_a_001{
  0%{top:10%;right:50%;}
  50%{top:0%;right:50%;}
}
.block_a .block_info_column .show_right{
	position: relative;
	left: calc(0% + 60px);
	display: block;
	width: calc(98% - 60px);
	padding: 0 0 20px 0;
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
}
.block_a .block_info_column .show_right .info label{padding: 0 4px 0 0; display: inline-block;}
.block_a .block_info_column .show_right .info .sub_info{font-size: 0.9em;}
@media screen and (max-width:768px) {
	.img_block_a_001{
		position:absolute;
		width: 80%;
    right: 0%;
    top:5%;
		margin: 0 auto;
		max-width: 500px;
	}
  /*effect*/
  @-webkit-keyframes img_block_a_001{
    0%{top:10%;right:0%;}
    50%{top:5%;right:0%;}
  }
  @keyframes img_block_a_001{
    0%{top:10%;right:0%;}
    50%{top:5%;right:0%;}
  }
	.img_block_a_002,
	.img_block_a_003{
		display: none;
	}
}
.title_Q{
	position: absolute;
  top: -5px;
	left: -50px;
	width: 40px;
	background:#2c6b91;
	padding: 8px;
	line-height:1em;
	font-size: 1.1em;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	margin: 0 0 5px 0;
}
.title_A{
	position: absolute;
  top: -5px;
	left: -50px;
	width: 40px;
	background:#f36c38;
	padding: 8px;
	line-height:1em;
	font-size: 1.1em;
	-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
	margin: 0 0 5px 0;
}
.rotate_div{
	transform:rotate(11deg);
	-ms-transform:rotate(11deg); /* Internet Explorer */
	-moz-transform:rotate(11deg); /* Firefox */
	-webkit-transform:rotate(11deg); /* Safari 和 Chrome */
	-o-transform:rotate(11deg); /* Opera */
}
.block_a .block_info_column .show_right .info{
  position: relative;
	margin: 20px 0;
}
/****************************************************************************/
/*block_B*/
.block_b{
	clear:both;
	background:#54869d;
	width:100%;
	height:auto;
  overflow: hidden;
	padding:0 0 0 0;
  border-radius:0 0 20px 20px;
}
.block_b .title_column{
/*	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);*/
  position: relative;
	background: #3f7289;
	border: 1px solid #3f7289;
	text-align: center;
	font-size:1.4em;
	color: #fff;
}
.block_b .title_column h2 img{
  width: 60px;
  height: 60px;
  vertical-align: middle;
  position: relative;
  top: -6px;
}
.block_b .block_info_column{
	clear: both;
	position: relative;
	width: 96%;
	margin: 0 auto;
	padding: 20px 0;
}
.img_block_b_001{
	position: absolute;
	top:-5%;
	left: 82%;
	max-width: 140px;
/*	animation: img_block_b_001 3s infinite;
	-webkit-animation: img_block_b_001 3s infinite;*/
}
.img_block_b_002{
	position: absolute;
	top:12%;
	right: 20%;
	max-width: 220px;
/*	animation: img_block_b_002 3s infinite;
	-webkit-animation: img_block_b_002 3s infinite;*/
}
.img_block_b_003{
  position: absolute;
  top: 50%;
  right: 2%;
  max-width: 120px;
}
.img_block_b_001 img,
.img_block_b_002 img,
.img_block_b_003 img{
	width: 100%;
}
/*effect*/
@-webkit-keyframes img_block_b_001{
  0%{top:-15%;left:82%;}
  50%{top:-15%;left:80%;}
}
@keyframes img_block_b_001{
  0%{top:-15%;left:82%;}
  50%{top:-15%;left:80%;}
}
@-webkit-keyframes img_block_b_002{
  0%{top:18%;left:55%;}
  50%{top:18%;left:57%;}
}
@keyframes img_block_b_002{
  0%{top:18%;left:55%;}
  50%{top:18%;left:57%;}
}
.block_b .block_info_column .show_right{
	position: relative;
	left: 30px;
	display: block;
	width: calc(98% - 50px);
	padding: 0 0 0px 0;
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
}
@media screen and (max-width:768px) {
	.img_block_b_001{
		position:absolute;
    top:-4%;
    left:63%;
		width: 28%;
		margin: 0 auto;
		max-width:none;
/*    animation: img_block_b_001 3s infinite;
    -webkit-animation: img_block_b_001 3s infinite;*/
	}
	.img_block_b_002{
		position:absolute;
    top:0%;
    left: 2%;
		width: 50%;
		margin: 0 auto;
		max-width:none;
/*    animation: img_block_b_002 3s infinite;
    -webkit-animation: img_block_b_002 3s infinite;*/
  }
  @-webkit-keyframes img_block_b_001{
    0%{top:-4%;left:63%;}
    50%{top:-4%;left:60%;}
  }
  @keyframes img_block_b_001{
    0%{top:-4%;left:63%;}
    50%{top:-4%;left:60%;}
  }
  @-webkit-keyframes img_block_b_002{
    0%{top:0%;left:2%;}
    50%{top:0%;left:5%;}
  }
  @keyframes img_block_b_002{
    0%{top:0%;left:2%;}
    50%{top:0%;left:5%;}
  }
	.img_block_b_003{
		display: none;
	}
}
.block_b .block_info_column .show_right .title_normal{
	position: relative;
	width: fit-content;
	line-height:1em;
	font-size: 1.2em;
	margin: 0 0 18px 0;
	padding: 0 0 6px 0;
	border-bottom: 2px solid rgba(255,255,255,0.33);
}
.block_b .block_info_column .show_right .title_normal a{color: #fff;}
.block_b .block_info_column .show_right .title_normal a:hover{color: #ffff00;}
.block_b .block_info_column .show_right .info{margin: 0 0 10px 0;}
.block_b .block_info_column .show_right .info a{color: #ccc;}
.block_b .block_info_column .show_right .info a:hover{color: #ffff00;}
.block_b .block_info_column .show_right .hours{font-size: 0.86em;}
.block_b .block_info_column .show_right .teacher{font-size: 0.86em;}
/****************************************************************************/
/*block_C*/
.block_c{
	clear:both;
	background:#fff;
	width:100%;
	height:auto;
	overflow:hidden;
	padding:0 0 1em 0;
  border-radius:20px 20px 0 0;
}
.block_c .title_column{
	text-align: center;
	font-size:1.2em;
	padding:0 0 0 0;
}
.block_c .title_column h2{
  margin: 10px 0;
}
.block_c .block_info_column{
	clear: both;
	position: relative;
	width: 100%;
	margin: 0 auto;
}
.banner_column{
  width: 100%; text-align: center;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(2,1fr);
}
.banner_column .small_banner{width: 100%; display: inline-block; max-width:700px;}
.banner_column .small_banner img {width: 100%;}
.banner_column .small_banner:hover {
  -webkit-animation: attention 3s ease infinite;
          animation: attention 3s ease infinite;
}
.banner_column .big_banner{width: calc(98% + 4px); display: block; max-width: 1404px; margin: 0 auto;}
.banner_column .big_banner img {width: 100%; -webkit-border-radius:16px;  -moz-border-radius:16px; border-radius:16px;}
@media screen and (max-width:1000px) {
  .banner_column .big_banner img {-webkit-border-radius:10px;  -moz-border-radius:10px; border-radius:10px;}
}
.banner_column .big_banner:hover {
  -webkit-animation: attention 3s ease infinite;
          animation: attention 3s ease infinite;
}
@media screen and (max-width:640px) {
  .banner_column{grid-template-columns: repeat(1,1fr);}
	.banner_column .small_banner{width: 100%;}
  .banner_column .big_banner{width: 100%;}
}
@-webkit-keyframes attention {
  9% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  12% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  16% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  20% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  24% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes attention {
  9% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  12% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  16% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  20% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  24% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/****************************************************************************/
.two_column{
	width: 100%;
	overflow: hidden;
	clear: both;	
	display:table;
  margin-top: 1em;
}
.two_column .row{ 
  display:table-row; 
} 
/*block_D*/
.block_d{
	display:table-cell;
  background:#dcdcdc;
  width:50%;
  height:auto;
  overflow:hidden;
  padding:0 0 calc(5% + 40px) 0;
}
.block_d .title_column{
  background: #000;
  border: 1px solid #000;
  text-align: center;
  font-size:1.4em;
  color: #fff;
}
.block_d .title_column h2{margin:0; padding: 20px 0 0 0;}
.block_d .title_column h2 img{
  width: 70px; height: 70px; vertical-align: middle; position: relative; top:-8px;
}
.block_d .block_info_column{
  clear: both;
  position: relative;
  width: 96%;
  margin: 0 auto;
  padding: 50px 0;
}
.block_d .block_info_column .show_right{
  display: block;
  width: 98%;
  max-width:780px;
  margin: 0 auto;
  font-size: 1.3em;
}
.block_d .block_info_column .show_right .video_column {
	display:inline-block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.block_d .block_info_column .show_right .title_normal{
  width:100%;
	font-weight: bold;
  text-align: center;
  line-height:1em;
  font-size: 1.2em;
  margin: 0 0 18px 0;
  padding:20px 0;
  border-bottom: 2px solid rgba(255,255,255,0.33);
}
.block_d .block_info_column .show_right .title_normal a{color: #333;}
.block_d .block_info_column .show_right .title_normal a:hover{color: #009bdb;}
.block_d .block_info_column .show_right .info{margin: 0 0 30px 0;}
.block_d .block_info_column .show_right .info a{color: #666665;}
.block_d .block_info_column .show_right .info a:hover{color: #009bdb;}
/*block_E*/
.block_e{
	display:table-cell;
  background:#ebebeb;
  width:50%;
  height:auto;
  overflow:hidden;
  padding:0 0 calc(5% + 40px) 0;
}
.block_e .title_column{
  background: #f1bf11;
  border: 1px solid #f1bf11;
  text-align: center;
  font-size:1.4em;
  color: #fff;
}
.block_e .title_column h2{margin:0; padding: 20px 0 0 0;}
.block_e .title_column h2 img{
  width: 70px; height: 70px; vertical-align: middle; position: relative; top:-8px;
}
.block_e .block_info_column{
  clear: both;
  position: relative;
  width: 96%;
  margin: 0 auto;
  padding: 50px 0;
}
.block_e .block_info_column .show_right{
  display: block;
  width: 98%;
  max-width:780px;
  margin: 0 auto;
  font-size: 1.3em;
}
.block_e .block_info_column .show_right .video_column {
	display:inline-block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.block_e .block_info_column .show_right .title_normal{
  width:100%;
	font-weight: bold;
  text-align: center;
  line-height:1em;
  font-size: 1.2em;
  margin: 0 0 18px 0;
  padding:20px 0;
  border-bottom: 2px solid rgba(255,255,255,0.33);
}
.block_e .block_info_column .show_right .title_normal a{color: #333;}
.block_e .block_info_column .show_right .title_normal a:hover{color: #009bdb;}
.block_e .block_info_column .show_right .info{margin: 0 0 30px 0;}
.block_e .block_info_column .show_right .info a{color: #666665;}
.block_e .block_info_column .show_right .info a:hover{color: #009bdb;}

@media screen and (max-width:768px) {
	.block_d,
	.block_e{
		width: 100%;
		display:block;
	}
}
/****************************************************************************/
/*block_F*/
.block_f{
  clear:both;
  background:url(img_block_f_bg_001.png) #a1ccc7 center calc(100% + 2px) no-repeat;
  width:100%;
  height:auto;
  padding:0 0 calc(10% + 40px) 0;
	-moz-background-size:100% auto; -webkit-background-size:100% auto; -o-background-size:100% auto; background-size:100% auto;
}
.block_f .title_column{
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
  background: #7fb5af;
  border: 1px solid #7fb5af;
  text-align: center;
  font-size:1.4em;
  color: #fff;
}
.block_f .title_column h2 img{
  width: 60px; height: 60px; vertical-align: middle; position: relative; top:-10px;
}
.block_f .block_info_column{
  clear: both;
  position: relative;
  width: 96%;
  margin: 0 auto;
  padding: 5% 0;
}
.img_block_f_001{
	position: absolute;
	top:5%;
	right: 55%;
}
.img_block_f_002{
  position: absolute;
  top: 70%;
  right: 80%;
  max-width: 150px;
}
.img_block_f_003{
  position: absolute;
  top:90%;
  right:5%;
  max-width: 112px;
  transform:rotate(180deg);
  -ms-transform:rotate(180deg); /* Internet Explorer */
  -moz-transform:rotate(180deg); /* Firefox */
  -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
  -o-transform:rotate(180deg); /* Opera */
}
.img_block_f_001 img{
  width: 100%;
  min-width: 320px;
 	display: block;
  border: 10px solid #fff;
  transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
	-webkit-box-shadow: -8px 6px 24px -4px rgba(0,0,0,0.66);
	-moz-box-shadow: -8px 6px 24px -4px rgba(0,0,0,0.66);
	box-shadow: -8px 6px 24px -4px rgba(0,0,0,0.66);
  transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
}
.img_block_f_002 img,
.img_block_f_003 img{
  width: 100%;
}
.block_f .block_info_column .show_right{
  position: relative;
  left: 52%;
  display: block;
  width: 46%;
  max-width: 650px;
  padding: 0 0 60px 0;
  font-size: 1.3em;
}
.img_block_f_001:hover{
  -webkit-animation: attention_f 2s ease infinite;
          animation: attention_f 2s ease infinite;
}
@-webkit-keyframes attention_f {
  0% {
  transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  }
  20% {
  transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  }
  40% {
  transform:rotate(-8deg);
  -webkit-transform:rotate(-8deg);
  }
  60% {
  transform:rotate(6deg);
  -webkit-transform:rotate(6deg);
  }
  80% {
  transform:rotate(-9deg);
  -webkit-transform:rotate(-9deg);
  }
  100% {
  transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  }
}
@keyframes attention_f {
  0% {
  transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  }
  20% {
  transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  }
  40% {
  transform:rotate(-8deg);
  -webkit-transform:rotate(-8deg);
  }
  60% {
  transform:rotate(6deg);
  -webkit-transform:rotate(6deg);
  }
  80% {
  transform:rotate(-9deg);
  -webkit-transform:rotate(-9deg);
  }
  100% {
  transform:rotate(-2deg);
  -webkit-transform:rotate(-2deg);
  }
}
/****************/
.block_f .block_info_column .show_right .title_normal{
	position: relative;
	width: fit-content;
	font-weight: bold;
	line-height:1em;
	font-size: 1.2em;
	margin: 0 0 18px 0;
	padding: 0 0 6px 0;
	border-bottom: 2px solid rgba(255,255,255,0.33);
}
.block_f .block_info_column .show_right .title_normal a{color: #222;}
.block_f .block_info_column .show_right .title_normal a:hover{color: #ffff00;}
.block_f .block_info_column .show_right .info{margin: 0 0 30px 0;}
.block_f .block_info_column .show_right .info a{color: #666;}
.block_f .block_info_column .show_right .info a:hover{color: #ffff00;}
@media screen and (max-width:800px) {
	.img_block_f_001{
		position:static;
		margin: 0 0 calc(5% + 40px) 0;
	}
	.img_block_f_001 img{
	  width: 60%;
	  margin: 0 auto;
	  min-width: 200px;
	 	display: block; 
	}
	.img_block_f_003 img,
	.img_block_f_003 img{
	 	display: none;
	}
	.block_f .block_info_column .show_right{
	  position: relative;
	  left: 0%;
	  width: 100%;
	  margin: 0 auto;
	}
}
/****************************************************************************/
.block_dolls{
	width: 100%;
	background: #c1e6e2;
	position: relative;
	padding: 5% 0 0 0;
}
.dolls_group_1{
	width: 100%;
	position: absolute;
	z-index: 1;
	bottom:-5%;
	transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;
	opacity: 0;
}
.dolls_group_2{
	width: 100%;
	position: absolute;
  z-index: 2;
  bottom:-5%;
  transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;
  opacity: 0;
}
.dolls_group_3{
	width: 100%;
	position: absolute;
	z-index: 3;
	bottom:-5%;
	transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;
	opacity: 0;
}
.dolls_group_4x{
	width: 100%;
	position: absolute;
	z-index: 4;
	top:0;
	transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;
	opacity: 0;
}
.block_dolls .dolls_group_1 img,
.block_dolls .dolls_group_2 img,
.block_dolls .dolls_group_3 img,
.block_dolls .dolls_group_4 img{
	max-width: 100%; display: block;
}
@media screen and (max-width:768px) {
  .block_dolls{padding:20% 0 0 0;}
  .dolls_group_1,
  .dolls_group_2,
  .dolls_group_3{
    width: 130%;
    left: -15%;
  }
}
/****************************************************************************/
/*block_G*/
.block_g{
  clear:both;
  background:url(img_footer_bg_001.png) #84a112 no-repeat center bottom;
  width:100%;
  height:auto;
  overflow:hidden;
  padding:0 0 calc(5% + 40px) 0;
}
.block_g .title_column{
  text-align: center;
  font-size:1.4em;
  color: #fff;
}
.block_g .title_column h2 img{
  width: 70px; height: 70px; vertical-align: middle; position: relative; top:-8px;
}
.block_g .block_info_column{
  clear: both;
  position: relative;
  width: 98%;
  max-width: 1200px;
  margin: 0 auto;
  padding:1% 0 5% 0;
  text-align: center;
}
.block_g .block_info_column li{
	width: fit-content;
	display: inline-block;
	text-align: center;
	color: #fff;
	background: rgba(255,255,255,0.13);
	-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
	transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
	margin:4px 2px;
}
.block_g .block_info_column li a{
	display: block;
	padding: 12px;
	color: #fff;
}
.block_g .block_info_column li:hover{background: rgba(75,93,4,0.15);}
/****************************************************************************/
.block_a .title_column h2,
.block_b .title_column h2{
  display: inline-block;
  margin: 14px 0;
}
.title_column .ghost_button_column{
  position: relative;
  top:-5px;
  display: inline-block;
  width: inherit;
  font-size: 0.7em;
}
.title_column img.doll{
  height: 70px;
  bottom: -1px;
  right: 20px;
  position: absolute;
}
@media screen and (max-width:1200px) {
  .title_column img.doll{
    display: none !important;
  }
}
/****************************************************************************/
/*block_special*/
.block_special{
  clear:both;
  width:100%;
  padding:0;
  margin-bottom: 8px;
  line-height: 0;
  border-radius: 20px;
  overflow: hidden;
}
.block_special h2{
  margin: 10px 0 0px 0;
}
.block_special .title_column h2 img{
  width: 70px; height: 70px; vertical-align: middle; position: relative; top:-8px;
}
.banner_special{
  width: 100%;
}
.block_special .title_column{
  background: #A5BF36;
  border: 1px solid #A5BF36;
  text-align: center;
  font-size:1.4em;
  color: #fff;
}
/****************************************************************************/
/*新增DOC學員登入專區、一般學員登入專區、免登入專區 (區域寬長低高型即可)-20220512*/
/*block_button*/
.block_button{
  background-color: #ececec;
  padding: 6px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.block_button .column_button{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}
.block_button .column_button a{
  color: #000;
}
.block_button .column_button .box_button{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  text-align: center;
  font-weight: bolder;
  background-color: #666;
  min-height: 30px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  cursor: pointer;
  transition: all 0.3s linear; -webkit-transition: all 0.3s linear;
  outline: none;
  border: 3px solid #ff990000;
}
.block_button .column_button .box_button::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: calc(50% - 10px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 10px 0 10px;
  border-color: #ff9900 transparent transparent transparent;
  transition: all 0.3s linear; -webkit-transition: all 0.3s linear;
}
.block_button .column_button .box_button_clicked::after{
  bottom: -14px;
  border-width: 12px 10px 0 10px;
}
/*.block_button .column_button .box_button span::after{
  position: relative;
  right: 0px;
  top: 1px;
  content: "";
  margin-left: 3px;
  background-image: url("icon_question.svg");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: #ffffffaa;
  text-align: center;
}*/
.block_button .column_button .box_button.box_button_doc{
  background-color: #afd1f2;
}
.block_button .column_button .box_button.box_button_normally{
  background-color: #bfe49a;
}
.block_button .column_button .box_button.box_button_nologin{
  background-color: #c8c8bc;
}
.block_button .column_button .box_button:hover{
  background-color: #ffdd00;
}
.block_button .column_button .box_button:focus{
  background-color: #ffcc00;
}
.block_button .column_button .box_button.box_button_clicked{
  background-color: #ffcc00;
  border: 3px solid #ff9900;
}
.block_button .desc_html{
  margin-top: 6px;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  border-radius: 16px;
  padding: 10px;
  display: none;
}
@media screen and (max-width:1200px) {
  .block_button{
    border-radius: 0px;
    padding: 6px 2px;
  }
  .block_button .column_button .box_button{
    border-radius: 5px;
    padding: 5px 0;
  }
}
@media screen and (max-width:480px) {
  .block_button .column_button{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2px;
  }
}
/****************************************************************************/
/****************************************************************************/
.video_column img {
  max-width: 100%;
}