body {
  margin: 0;
  padding: 0;
}



.clicktag {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  height: 600px;
  opacity: 0;
  z-index: 20;

}

.banner {
  width: 300px;
  height: 600px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background:  #000;
}
.banner:before{
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid #999999;
  z-index: 10
}

.banner__video {
  position: absolute;
  top: 0;
  margin-top: 0;

  left: 0;
    width: 300px;

  height: auto;
  z-index: 3;
  transition: all 0.3s ease 0.2s;

}
.banner__video2 {
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}
.open {
  visibility: visible!important;
  opacity: 1!important;
}

video::-webkit-media-controls-fullscreen-button {
        display: none !important;
}
.full {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
img.full {
  height: auto;
}

.video_pause {
  padding: 0;
  border:2px solid #fff;
  border-radius: 100%;
  background:none;
  width: 23px;
  height: 23px;
  box-sizing: border-box;
  right: 4px;
  bottom: 5px;
  position:absolute;
  cursor: pointer;
  z-index: 11;
  display: none;
  outline: none;
}
.video_pause:before {
  content:"";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 2px;
  height: 10px;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}
.video_pause.play:before {
  display: none;
}
.video_pause.play:after {
  content:"";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 0;
  height: 0;
  border: 5px solid transparent; 
  border-left: 10px solid #fff;
}


.video_volume {
  padding: 0;
  border:0;
  background:none;
  right: 4px;
  bottom: 0px;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 122.88 94.98' style='enable-background:new 0 0 122.88 94.98' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23ffffff%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M5.06,20.78h20.67c0.43,0,0.79,0.35,0.79,0.79v44.72c0,0.43-0.35,0.79-0.79,0.79H5.05 C2.27,67.07,0,64.8,0,62.02V25.85C0,23.06,2.28,20.78,5.06,20.78L5.06,20.78z M109.14,1.06c5.01,7.08,8.82,15.04,11.14,23.57 c2.24,8.22,3.1,16.97,2.33,25.94c-0.7,8.2-2.7,15.99-5.79,23.18c-2.59,6.03-5.95,11.64-9.93,16.7c-0.62,0.82-1.25,1.63-1.9,2.43 l-0.05-0.05c-0.31,0.36-0.62,0.72-0.94,1.07l-0.94,1.06l-0.92-1.08l-3.73-4.38l-0.69-0.81l0.7-0.8c4.54-5.23,8.3-11.2,11.06-17.73 c2.66-6.29,4.39-13.11,4.99-20.29c0.68-7.98-0.08-15.75-2.06-23.05c-1.83-6.75-4.7-13.11-8.44-18.86l-0.02-0.02 c-0.68-0.99-1.39-1.97-2.13-2.92l0.08-0.07l-0.05-0.07l0.97-0.72l0.71-0.53l2.71-2.19l0.09,0.12l1.05-0.78l1.02-0.76L109.14,1.06 L109.14,1.06z M108.58,4.66c-0.25-0.38-0.49-0.75-0.75-1.12l-0.03,0.02C108.07,3.92,108.33,4.29,108.58,4.66L108.58,4.66z M92.75,12.19c3.68,5.28,6.47,11.21,8.17,17.55c1.64,6.12,2.26,12.61,1.7,19.27c-0.48,5.68-1.8,11.11-3.83,16.17 c-2.1,5.23-4.95,10.05-8.4,14.32l-0.94,1.16l-0.97-1.14l-4.72-3.29l-0.66-0.77l0.62-0.8c2.91-3.72,6.01-7.87,7.77-12.35 c1.7-4.33,2.1-8.99,2.51-13.88c0.5-5.86-0.04-11.55-1.47-16.9c-1.34-5.04-3.48-9.8-6.27-14.11c-0.37-0.53-0.75-1.06-1.15-1.58 l0.05-0.04l-0.46-0.66l0.96-0.71L91,11.9l1.03-0.76L92.75,12.19L92.75,12.19z M89.84,15.13l-0.31-0.47l-0.02,0.01L89.84,15.13 L89.84,15.13z M31,19.96C43.04,13.35,55.09,6.74,67.13,0.14c1.16-0.63,2.4,1.08,2.4,2.4v82.04c0,1.39-1.32,3.21-2.53,2.53L31,66.8 c-0.23-0.13-0.48-0.21-0.48-0.48V20.44C30.52,20.17,30.77,20.09,31,19.96L31,19.96z'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat;
  background-size: contain;
  cursor: pointer;
  z-index: 11;

  outline: none;
}
.video_volume:before {
  content:"";
  position: absolute;
  left: 14px;
    top: -7px;
    transform: rotate(45deg);
    width: 2px;
    height: 30px;
  background: #fff;
  z-index: 2;
}
.video_volume.mute:before {
  display: none;
}

.poster {
  z-index: 0;
}
.hide {
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease;
}
.clicktag {
  z-index: 10;
  background:none;
  border:0;
  outline: none;
  cursor: pointer;
}
.logo {
  height: 32px;
  width: 118px;
  position: absolute;
  right: 31px;
  bottom: 17px;
  transition: all 0.3s ease 0.2s;
  z-index: 2;
  border: 2px solid #000;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.logo img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0.51);
  transition: all 0.3s ease;
}
.banner:hover .logo {
  background: #000;
}
.banner:hover .logo img{
  filter: invert(100%);
}
.bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 600px;
  width: auto;
  transition: all 0.3s ease 0.2s;
  z-index: 1;
}
.clicktag, .logo, .bg, .date1 {
  opacity: 0;
  visibility: hidden;
}

.logo.open, .bg.open, .open.clicktag, .date1.open {
  opacity: 1;
  visibility: visible;
}
#animation_container {
  display: none; 
  position: absolute; 
  left: 0; 
  top: 0; 
  background-color:transparent; 
  width:300px; 
  height:600px; 
  cursor:pointer; 
  z-index: 0
}
.date1 {
   transition: all 0.3s ease 0.2s;
}