html {
scroll-behavior: smooth;
}

section {
position: relative;
}

@media all and (max-width: 768px) {
.w100 {
width: 100%;
}
}

@font-face {
font-family: 'GmarketSansMedium';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Gmarket Sans';
font-weight: 700;
font-style: normal;
font-display: swap;
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.otf') format('opentype'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.ttf') format('truetype');
}

[class^="sec"] {
font-family: 'Gmarket Sans';
font-weight: 700;
/* overflow: hidden; */
}

.blink-1 {
-webkit-animation: blink-1 2.5s infinite both;
animation: blink-1 2.5s infinite both;
}

@-webkit-keyframes blink-1 {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}

@keyframes blink-1 {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}

.blink-5 {
  -webkit-animation: blink-5 6s infinite both;
  animation: blink-5 6s infinite both;
}

@-webkit-keyframes blink-5 {
  0%, 8.33%, 16.66%, 100% {
    opacity: 1;
  }
  4.16%, 12.5% {
    opacity: 0;
  }
}

@keyframes blink-5 {
  0%, 8.33%, 16.66%, 100% {
    opacity: 1;
  }
  4.16%, 12.5% {
    opacity: 0;
  }
}


.scroll_wrap {
overflow: hidden;
}

.scroll_on {
opacity: 0;
transition: all 1.8s;
}

.scroll_on.active {
opacity: 1 !important;
transform: translate(0, 0) !important;
}

.scroll_on.type_top {
transform: translate(0, -20%);
}

.scroll_on.type_bottom {
transform: translate(0, 20%);
}

.scroll_on.type_left {
transform: translate(-20%, 0);
}

.scroll_on.type_right {
transform: translate(20%, 0);
}

@keyframes smooth-blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.shake-right{-webkit-animation:shake-right 10s cubic-bezier(.455,.03,.515,.955) infinite both;animation:shake-right 10s cubic-bezier(.455,.03,.515,.955) infinite both}
@-webkit-keyframes shake-right{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}10%{-webkit-transform:rotate(1deg);transform:rotate(1deg)}20%,40%,60%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}30%,50%,70%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}80%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}90%{-webkit-transform:rotate(1deg);transform:rotate(1deg)}}@keyframes shake-right{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}10%{-webkit-transform:rotate(1deg);transform:rotate(1deg)}20%,40%,60%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}30%,50%,70%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}80%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}90%{-webkit-transform:rotate(1deg);transform:rotate(1deg)}}
/*  */
.video_all {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    z-index: 2;
}

.Vod {
    width: 100%;
    z-index: 2;
    position: relative;
    border-radius: 10px;
    border: 2px solid white;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 1.5%;
}

#Video {
    width: 100%;
}

.volume {
    margin-left: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

@media all and (max-width: 768px) {
    .volume {
        width: 75%;
        margin: 0 auto;
    }
}

.volume .hdn {
    position: absolute;
    top: 0;
    /* left: 0; */
    display: block;
    background-color: #fff;
    
}
.volume.off .hdn {
  display: none;
}
.sec2_item{
  position: absolute;
  top: 5%;
  right: 0%;
  width: 43.2%;
}
.sec2_bot{
  position: absolute;
  bottom: 3%;
  right: 5%;
  width: 35.9%;
}
.se_1{
  position: absolute;
  top: 25%;
  left: 20%;
  width: 18.3%;
}
.se_2{
  position: absolute;
  top: 31%;
  left: 12%;
  width: 34.2%;
}
.se_3{
  position: absolute;
  top: 38.5%;
  left: 19%;
  width: 20.3%;
}
[class^="max"]{
  position: absolute;
  left: 26%;
  width: 6.5%;
}
.max_1{top: 75%;}
.max_2{top: 77.5%;}
.max_3{top: 80%;}
.max_4{top: 82.5%;}
.max_5{top: 85%;}
.sec4_1{
  position: absolute;
  top: 43%;
  left: 5%;
  width: 21.5%;
}
.sec4_2{
  position: absolute;
  top: 43%;
  left: 40%;
  width: 21.3%;
}
.sec4_3{
  position: absolute;
  top: 43%;
  left: 73%;
  width: 20.9%;
}
.sec4_a{
  position: absolute;
  top: 55.5%;
  left: 9%;
  width: 13.2%;
}
.sec4_b{
  position: absolute;
  top: 56%;
  left: 44%;
  width: 12.3%;
}
.sec4_c{
  position: absolute;
  top: 54%;
  left: 79%;
  width: 11.7%;
}
.textarea {
  position: absolute;
  top: 57%;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  padding: 3% 4%;
  font-size: 26px;
  font-family: 'GmarketSansMedium';
  font-weight: 600;
  resize: none;
  outline: none;
  border: none;
  box-sizing: border-box;
}
@media all and (max-width: 768px) {
  .textarea {
    font-size: clamp(8px, 2.5vw, 20px);
    line-height: 1.2em;
  }
}
.list_list{
  position: absolute;
  top: 35%;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1%;
}
.list_list li{
  position: relative;
  cursor: pointer;
}
.list_list li .clk{
  position: absolute;
  top: 0%;
  left: 80%;
  transform: translateX(-50%);
  width: 35%;
  max-width: 74px;
}
.list_list li .hdn{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
}
.list_list li.active .hdn{
  opacity: 1;
}
.subbtn{
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 15%;
  cursor: pointer;
}