*{ margin: 0; padding: 0; }
:root{
  --sprite:url(../images/issue_sprite.png) center/auto 151px no-repeat;
  --anitime:.3s;
}
body{
  width: 1280px;
  height: 720px;
  background-color: #162a2c;
}

.wrap .qr{
  width: 46px; height: 46px;
  top: 530px;
  right: 121px;
  border-radius: 100%;
  background: #5e6c43 url(../../include/images/qr/issue_qr.png) center / 23px 23px no-repeat;
  border: 2px solid #ccf342;

}
.wrap .qr-pop .menuContainer{
  background-color: #ccf342;
}
.wrap .qr-pop .menuContainer .pop_title{color: #333;}
.wrap .qr-pop .closePopBtn::before, .wrap .qr-pop .closePopBtn::after{background-color: #333;}

.wrap{
  width: 1280px;
  height: 720px;
  position: relative;
  margin-inline:0px;
  background: url(../images/bg.jpg) left top/1280px no-repeat;
}

nav .home {
  width: 65px;
  height: 65px;
  position: absolute;
  top: 12px;
  right: 25px;
  background: var(--sprite);
  background-position: left bottom;
  background-size: 380px;
  cursor: pointer;
}

nav .ylogo {
  width: 98px;
  height: 26px;
  position: absolute;
  top: 43px;
  right: 101px;
  background: url(../images/new_wlogo.png) left top/contain no-repeat;
  cursor: pointer;
  top: 32px;
  right: 95px;
}

.main_title{
  width: 130px;
  height: 40px;
  position: absolute;
  top: 24px;
  left: 44px;
  --point:#fff;
  background: var(--sprite);
  background-position: left top;
}
.main_title:after{
  --w: 36px;
  --logo:#9bff3a;
  /* content: ""; */
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--w);
  height: var(--w);
  border-radius: 50%;
  background: radial-gradient( rgba( 255,255,255,1) , var(--logo) );
  mix-blend-mode: darken;
  filter: blur(4px);
  animation: logo 10s ease-in-out forwards;
}
@keyframes logo{
  0%{ left: 20px; }
  45%{ left: 110px; }
  100%{ left: 54px; }
}

/* main title */
.ylogo{ width: 98px; height: 26px; position: absolute; top:33px; right: 44px; }

.search{
  --bg:url(
  ../images/search_box.png);
  --p: 1px;
  --h: 42px;
  height:var(--h);
  padding:0 var(--p);
  width: 592.5px;
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
  background: var(--bg) left top/100% auto no-repeat;
  display: flex;
  align-items: center;
}

.search:before,
.search:after{
  content: "";
  position: absolute;
  top: 0;
  width: 22%;
  height:var(--h);
  background: var(--bg) center/ auto calc(var(--h) * 2 ) no-repeat;
  opacity: 0;
  margin-inline: 18px;
  z-index: -1;
}

.search:before{
  left: -22%;
  background-position: 130px bottom;
  animation: search_arr_left .5s ease-in-out forwards;
  clip-path: polygon(100% 0%, 86% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%);
}
.search:after{
  right: -22%;
  animation: search_arr_right .5s ease-in-out forwards;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 14% 50%, 0% 0%);
  background-position: -575px bottom;
}
@keyframes search_arr_left{
  100%{
    opacity: 1;
    background-position: left bottom;
  }
}
@keyframes search_arr_right{
  100%{
    opacity: 1;
    background-position: -463px bottom;
  }
}

.search > div{ --h: 37px; --search: 65px;width: calc( 100% - (var(--p)*2) );height: var(--h);position: relative;z-index: 1;display: flex;align-items: center;flex-wrap: wrap;flex-direction: row;align-content: center;}
.search > div input{
  --point:#d1ffa8;
  --padding: 35px;
  width: calc(100% - var(--search) - var(--padding) );
  height: var(--h);
  border: none;
  outline: none;
  background: transparent;
  font-size: 1em;
  caret-color: var(--point);
  color: var(--point);
  padding-left: var(--padding);
  font-family: "NanumSquareRoundEB";
}

.search > div input + span{
  position: absolute;
  left: 17px;
  top:50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: var(--sprite);
  background-position: left -40px;
  display: inline-block;
  transition: var(--anitime);
}

/*
.search > div input:valid + span,
.search > div input:focus + span{ background-position: left -60px;  }
*/

.search > div .search_btn{
  width: var(--search);
  height: var(--h);
  background: var(--sprite);
  background-position: -66px -114px;  
  font-family: "NanumSquareRoundEB";
  color: hsla(94, 22%, 33%,90%);
  transition: var(--anitime);
}
.search > div .search_btn.hover{ color: hsla(94, 22%, 33%,100%); }

.search > div input::placeholder{ color: var(--point); }

main{ width: 100%; height: 100%; }

.btnwrap{width: 100%;height: 50px;position: absolute;top: 55%;transform: translateY(-50%); pointer-events: none;user-select: none; --point:#d1ffa8;}    
.btnwrap > div.main_left{left: 35px;background-position: -136px top;}
.btnwrap > div.main_right{right: 35px;background-position: -192px top;}

.btnwrap > div:is(.main_left,.main_right).hover{ background-position-y:bottom; }
.btnwrap > div{
  width: 48px;
  height: 76px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
  user-select: auto;
  background: var(--sprite);
}

.btnwrap > div.out{
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}
.popup .btnwrap{ top:50%; }
.popup .btnwrap > div.main_left{
  left: -80px;
  background-position: -240px top;
}
.popup .btnwrap > div.main_right{
  right: -80px;
  background-position: -309px top;
}

.content{
  width: 1120px;
  height: 453px;
  position: absolute;
  left:50%;
  top: 186px;
  transform: translateX(-50%);
  /* overflow: hidden; */
}
.thuminner{width: max-content;height: 100%;position: absolute;left:0px;top:0px;/* display: flex; *//* gap: 0 43px; *//* transition: var(--anitime); */transform-style: preserve-3d;perspective: 1000px;}

.thuminner .item{
  --w: 314px;
  --h: 312px;
  --point:#58f9ff;
  width: var(--w);
  height: var(--h);
  position: absolute;
  filter: drop-shadow(0px 0px 0px var(--point));
  display: none;
}
.thuminner .item.on{
  /* display: block; */
  cursor: pointer;
}
.thuminner .item[class*="pos"] {display: block;}
.thuminner .item.hover,
.thuminner .item:hover{
  animation: onAir 0.5s ease-in-out forwards;  
}

@keyframes onAir{
  90%{
      filter: drop-shadow( 0px 0px 11px var(--point) );
  }
  100%{
      filter: drop-shadow( 0px 0px 10px var(--point) );
  }
}


.thuminner .item .thum::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(../images/thumb_normal.png) center/100% 100% no-repeat;
  /* overflow: hidden; */
}

.thuminner .item.hover .thumbot,
.thuminner .item:hover .thumbot{
  /* background-image: url(../images/thum_tag_over.png); */
}

.thum{
  width: 100%;
  height: 100%;
  position: absolute;    
}

.thum > img{
  height: 100%;
  width: 100%;
  clip-path: path('m11.81,1.74h257.14s5.59-1.18,13.69,7.51,21.34,23.99,21.34,23.99c0,0,6.33,7.65,6.33,13.54v244.68s-2.07,14.52-17.9,18.79H49.96s-15.26-3.32-25.78-14.22c-9.76-11.47-21.04-25.69-21.04-25.69,0,0-1.8-.57-1.8-11.66V13.05S2.2,4.21,11.81,1.74Z');
  /* border-radius: 0 0 21px 0; */
}
.thumbot{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 205px;
  height: 41px;  
  display: flex;
  align-items: center;
  justify-content: center;
  animation: thumbot .5s ease-in-out forwards;
}

@keyframes thumbot{
  0%{ transform: translate(8px, 8px); }
  90%{ transform: translate(-2px, -2px); }
  100%{ transform: translate(0px, 0px); }
}

.thumbot > span{
  display: flex;
  width: 100%;
  font-family: "NanumSquareRoundEB";
  color:#fff;
  text-shadow: 0px 0px 5px #328406;
  /* -webkit-text-fill-color: #fff;
  -webkit-text-stroke-color: #328406;
  -webkit-text-stroke-width: 0.5px; */
  justify-content: center;
  font-size: 20px;
}
.thumbot > span:before{ content: "#"; display: inline-block; }

.popup{position: absolute;left: 50%;top:50%;transform: translate3d(-50%,-50%,0) scale(0);width: 0;height: 0;background-color: rgba(0,0,0,0.8);user-select: none;pointer-events: none;transition: width 0.3s ease-in,height 0.2s ease-in 0.1s;overflow: hidden;z-index: 2;}
.popup.on{ width: 100%; height: 100%; user-select: all; pointer-events: all; transform: translate3d(-50%,-50%,0) scale(1); }

.innerpopup{ --w:522px; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
.innerpopupimg{
  overflow: hidden;
  display: flex;
  border-radius: 10px;
  border:2px solid #ccf342;
}
.innerpopup,
.innerpopupimg,
.innerpopupimg img{ width: var(--w); height:var(--w); }
/* .innerpopupimg img{float: left;}
.innerpopupimg img.on{ display: block; } */
.innerpopupimg > div {flex: 0 0 100%;}
.innerpopupimg img {width: 100%;}
.popupdot{display: flex;justify-content: flex-start;flex-wrap: nowrap;gap:9px;position: absolute;bottom: -24px;left: 0px;}
.popupdot li{
  --w:12px;
  width: var(--w);
  height: var(--w);
  border-radius: calc(var(--w) / 2);
  border:2px solid #ccf342;
  background-color:transparent;
  transition: var(--anitime);
  cursor: pointer;
}
.popupdot li.on{ width: 23px; background-color: #ccf342; }

.popupbtn{
  position: absolute;
  right: 0;
  bottom: -55px;
  width: 106px;
  height: 46px;
  justify-content: space-between;
  align-items: end;
}
.popupbtn > li{
  --w:46px;
  position: relative;
  width: var(--w);
  height: var(--w);
  background-color: #5e6c43;
  cursor: pointer;
  border-radius: 50%;
  float: left;
  border: 2px solid #ccf342;
}

.popupbtn > li:after{
  content: "";
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background: url(../images/popup/pop.png) left top/38px no-repeat;
}
/* .popupbtn > li.popplay.isPlaying{
  --bg:url(../images/popup/pop_pause.png);
} */

.popupbtn > li.popplay:after{ background-position-y: top; width: 16px; height: 18.5px; transition: var(--anitime);  }
.popupbtn > li.popplay.isPlaying:after{ background-position-y: bottom; }
.popupbtn > li.down:after{ background-position-x: right; width: 22px; height: 22px; }

/* {background-color: #5e6c43 var(--bg) center/22px no-repeat;} */

.popupbtn > li.down{ float: right; }

.popupbtn > li.down ul{
  position: absolute;
  left: 58px;
  top:0px;
  width: 160px;
  height: 84px;
  background-color:rgba(74,98,47,0.7);
  border-radius: 0 14px 14px 14px;
  border: 2px solid #6e8d33;
  display: none;
}

.popupbtn > li.down.on ul{
  display: block;
}

.popupbtn > li.down ul li{
  color:#fff;
  width: max-content;
  max-width: 143px;
  height: 50%;
  font-size: 0.8em;
  white-space: nowrap;
  border-radius: 14px;
  display: flex;
  align-items: center;
  position: relative;
  text-indent: 9px;
}

.popupbtn > li.down ul li + li:after{
  content: "";
  position: absolute;
  left:0;
  top: -1px;
  width: 157px;
  border-top: 2px solid #6e8d33;
}

/*
.popupbtn > li.down ul li.on,
.popupbtn > li.down ul li:hover{
  background-color: #d5f8a3;
  color:#5f605d;
}
*/

.close{
    --w: 46px;
    position: absolute;
    width: var(--w);
    height: var(--w);
    /* background-color: #5e6c43; */
    cursor: pointer;
    border-radius: 50%;
    right: 20px;
    top: 20px;
    /* border: 2px solid #ccf342; */
 }
.close > span{ 
    --h:40px; 
    width: var(--h); 
    height: var(--h); 
    position: absolute; 
    left: 50%; 
    top:50%; 
    transform: translate(-50%,-50%);
    cursor: pointer; 
    background: url(../images/popup/clo.png) left top/contain no-repeat; }
.keyword{
  position: absolute;
  top: 112px;
  left: 50%;
  transform: translateX(-50%);
  width: 1060px;
  height: 68px;
  display: flex;
  flex-wrap: wrap;
  /* gap: 6px; */
  background: url(../images/sub_tap.png) left top/contain no-repeat;
  align-items: center;
  justify-content: space-evenly;
  font-family: "NanumSquareRoundEB";
}
.keyword > div{
  color:#fff;
  cursor: pointer;
  font-weight: 800;
  transform: rotateY(0deg);
  margin-top: -10px;
  padding: 6px 47px;
}
.keyword > div::before{ content: "#"; display: inline-block; }
.keyword > div.on{
  background: url(../images/sub_tap_on.png) center/contain no-repeat;
  color: #c0ff29;
}

/* lighter */
main:before{
  --color: #fff;
  --size: 10px;
  mix-blend-mode: plus-lighter;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: var(--color);
  border-radius: 100%;
  box-shadow: 0 0 calc( var(--size) * 1) var(--color),
              0 0 calc( var(--size) * 2) var(--color),
              0 0 calc( var(--size) * 3) var(--color),
              0 0 calc( var(--size) * 4) var(--color),
              0 0 calc( var(--size) * 5) var(--color),
              0 0 calc( var(--size) * 6) var(--color),
              0 0 calc( var(--size) * 7) var(--color),
              0 0 calc( var(--size) * 8) var(--color),
              0 0 calc( var(--size) * 9) var(--color),
              0 0 calc( var(--size) * 10) var(--size) var(--color);
  animation: lighter 40s linear infinite,lightersize 1s ease-in-out infinite;
  offset: path("M85.7,579.38c0.17,5.85,15.28,11.21,45.51,21.94c32.51,11.53,58.57,15.08,89.62,19.14  c57.05,7.45,85.58,11.17,102.45,12.84c29.44,2.91,75.72,7.42,139.8,10.97c88.39,4.9,155.83,4.94,198.61,4.9 c65.78-0.06,115.17-1.75,151.93-3.03c58.97-2.07,98.76-3.52,151.93-8.17c80.35-7.03,103.77-9.98,123.46-14.47 c42.39-9.66,106.05-24.17,106.19-39.67c0.29-32.44-277.43-74.96-555.22-75.15C352.07,508.47,84.97,553.75,85.7,579.38z");
  /* z-index: 1; */
}

@keyframes lighter{  
  0%{
    offset-distance: 0%;
    z-index: 1;
  }
  50%{
    offset-distance: 50%;
    z-index: 1;
  }
  51%{
    offset-distance: 51%;
    z-index: -1;
  }
  100%{
    offset-distance: 100%;
    z-index: -1;
  }
}

@keyframes lightersize{  
  0%,100%{    
    box-shadow: 0 0 10px var(--color),
              0 0 20px var(--color),
              0 0 30px var(--color),
              0 0 40px var(--color),
              0 0 50px var(--color),
              0 0 60px var(--color),
              0 0 70px var(--color),
              0 0 80px var(--color),
              0 0 90px var(--color),
              0 0 100px 10px var(--color);
  }
  50%{
    box-shadow: 0 0 15px var(--color),
              0 0 30px var(--color),
              0 0 45px var(--color),
              0 0 60px var(--color),
              0 0 75px var(--color),
              0 0 90px var(--color),
              0 0 105px var(--color),
              0 0 120px var(--color),
              0 0 135px var(--color),
              0 0 150px 15px var(--color);
  }
}


/* pos */

/* .s-wrap > div:after{
  --color: #5efced;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, -3px);
  width: 100%;
  height: 100%;
  background: url(../images/thum/subthumb/thumnail.svg) center/contain no-repeat;
  filter: drop-shadow( 0px 0px 0px var(--color) );
  opacity: 0.5;
  animation: none;
  pointer-events: none;
}

.s-wrap > div.pos5 { transform: translateX(-320px) translateY(95px) translateZ(-1000px); display: block; }
.s-wrap > div.pos6 { transform: translateX(68px)   translateY(95px) translateZ( -500px); display: block; transition: 0.5s; }
.s-wrap > div.pos7 { transform: translateX(220px)  translateY(54px) translateZ( -180px); display: block; transition: 0.5s; }
.s-wrap > div.pos1 { transform: translateX(403px)  translateY(40px) translateZ(    0px); display: block; transition: 0.5s; }
.s-wrap > div.pos2 { transform: translateX(792px)  translateY(54px) translateZ( -180px); display: block; transition: 0.5s; }
.s-wrap > div.pos3 { transform: translateX(1302px) translateY(95px) translateZ( -500px); display: block; transition: 0.5s; }
.s-wrap > div.pos4 { transform: translateX(2223px) translateY(95px) translateZ(-1000px); display: block; }
.transition { transition: 0.5s; } */

.pos5{ transform: translateX(380px)  translateY(95px) translateZ(-1000px); opacity: 0; }
.pos6{transform: translateX(57px)  translateY(114px) translateZ(-500px);transition: .3s;}
.pos7{transform: translateX(228px)  translateY(90px) translateZ(-180px);transition: .3s;}
.pos1{transform: translateX(396px)  translateY(86px) translateZ(0px);transition: .3s;}
.pos2{transform: translateX(788px)  translateY(91px) translateZ(-180px);transition: .3s;}
.pos3{transform: translateX(1293px)  translateY(109px) translateZ(-500px);transition: .3s;}
.pos4{ transform: translateX(1573px)  translateY(95px) translateZ(-1000px); opacity: 0; }
.transition { transition: 0.5s; }

.noSlide .thuminner .item.on {
	position: relative;
  display: block;
  margin: 0 10px;
}

.noSlide .thuminner {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
}
.noSlide[data-length="4"] .thuminner .item .thum{height: auto;}
.noSlide[data-length="4"] .thuminner .item img{
  object-fit: contain;
  clip-path: path('m17.6,1.51h209.55s3.16-.93,15.71,11.62c11.62,16.28,15.51,22.47,15.51,22.47,0,0,4.41,7.15,4.41,11.11v244.04s.09,13.22-14.13,19.27H43s-11.1.3-23.1-14.93c-11.4-16.14-12.21-17.25-12.21-17.25,0,0-6.15-7.06-6.15-13.82V12.72s-.03-7.89,9.06-11.21Z');
  border-radius: 0 0 25px 55px;
}
.noSlide[data-length="4"] .thuminner .item .thumbot{bottom: 48px; right: -25px;}
main.inactive * {
  pointer-events: none !important;
}