/* BASIC css start */
.basiccateComent {
  height: 42px;
  line-height: 42px;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #ececec;
  font-size: 15px;
  font-weight: 500;
  font-size: 16px;
}
.basiccateComent h2 {
  width: 0;
  height: 0;
  overflow: hidden;
}
.basiccateComent span {
  color: #f40d08;
  font-weight: normal;
}
.basiccateComent > a {
  display: block;
  width: 80px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}
.basiccateComent > a > p {
  width: 21px;
  height: 21px;
  margin: 9.5px auto;
  border: 1px solid #ccc;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.basiccateComent > a > p > i {
  font-style: normal;
  font-size: 11px;
  line-height: 11px;
  color: #ccc;
}
/* 상단 카테고리 명 */

/* 글리치 시작 */
/* ty glitch start */
@keyframes glitch-anim-1 {
  0% { 
    opacity: 1;
    transform: translate3d(var(--gap-horizontal),0,0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  4% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  8% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  10% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  12% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  14% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  16% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  18% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal),0,0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}
@keyframes glitch-anim-2 {
  0% { 
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  3% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  7% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  9% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  11% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  13% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  15% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  17% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  19% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  20% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}
@keyframes glitch-anim-3 {
  0% { 
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  1.5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  2% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  2.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  3% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  5.5% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  7% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  8% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  9% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  10.5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  11% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  13% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  14% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  14.5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  15% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  16% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  18% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}
@keyframes glitch-anim-text {
  0% { 
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  9.9% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
  }
  10%, 100% {
    transform: translate3d(0,0,0) scale3d(1,1,1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@keyframes glitch-anim-flash {
  0%, 5% { 
    opacity: 0.2; 
    transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  }
  5.5%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}
/* ty glitch end */

@keyframes portalboot{
  0%{
    transform:translateY(-7x);
  }
  50%{
    transform:translateY(7px);
  }
  100%{
    transform:translateY(-7px);
  }
}
@keyframes portalboot2{
  0%{
    transform:translateY(-3px);
  }
  50%{
    transform:translateY(3px);
  }
  100%{
    transform:translateY(-3px);
  }
}
/* ty glitch start */
.glitch__bg{position: absolute; top:0px; left:0px; width:100%; height:100%; --color-text: #fff; --color-bg: #000; --color-link: #f9d77e; --color-link-hover: #fff; --color-info: #efc453; --glitch-width: 100vw; --glitch-height: 100vh; --gap-horizontal: 10px; --gap-vertical: 5px; --time-anim: 4s; --delay-anim: 2s; --blend-mode-1: none; --blend-mode-2: none; --blend-mode-3: none; --blend-mode-4: none; --blend-mode-5: overlay; --blend-color-1: transparent; --blend-color-2: transparent; --blend-color-3: transparent; --blend-color-4: transparent; --blend-color-5: transparent;}
.glitch{position: absolute; top:34.3%; left:18.2%; width: 73.8%; height: 44.2%; overflow: hidden; animation: portalboot 5s ease-in-out infinite;}
.glitch__img {position: absolute; width: 100%; height: 0; padding-top:calc(464/625*100%); background: url(http://winv007.img18.kr/crazy11web/plan/nike_lucentpack/pc_img1.png) no-repeat; background-color: var(--blend-color-1); background-size:cover; background-position:center; transform: translate3d(0,0,0); background-blend-mode: var(--blend-mode-1);}
.glitch__img:nth-child(n+2) {opacity: 0;}
.glitch__img:nth-child(n+2) {animation-duration: var(--time-anim);animation-delay: var(--delay-anim);animation-timing-function: linear;animation-iteration-count: infinite;}
.glitch__img:nth-child(2) {background-color: var(--blend-color-2);background-blend-mode: var(--blend-mode-2);animation-name: glitch-anim-1;}
.glitch__img:nth-child(3) {background-color: var(--blend-color-3);background-blend-mode: var(--blend-mode-3);animation-name: glitch-anim-2;}
.glitch__img:nth-child(4) {background-color: var(--blend-color-4);background-blend-mode: var(--blend-mode-4);animation-name: glitch-anim-3;}
.glitch__img:nth-child(5) {background-color: var(--blend-color-5);background-blend-mode: var(--blend-mode-5);animation-name: glitch-anim-flash;}
.glitch.glitch1{top:34.3%; left:9.6%; width:32.9%; height:18.9%; animation: portalboot2 5s ease-in-out infinite;}
.glitch__img.glitch1{padding-top:calc(224/315*100%); background: url(http://winv007.img18.kr/crazy11web/plan/nike_lucentpack/pc_img2.png) no-repeat; background-size:cover; background-position:center;}
.glitch__img.glitch1:nth-child(n+2){animation-delay:2.5s;}
/* ty glitch end */
/* 글리치 끝*/

.section__plan {
  font-family: "nixgonm", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
    "맑은 고딕", helvetica, "Apple SD Gothic Neo", arial, dotum, 돋움,
    sans-serif;
  position: relative;
}
.section__plan img {
  width: 100%;
}
.planImg{position: relative; overflow:hidden;}
.planImg img{width:100%;}

.plantxt{width:100%; padding:20% 0px; text-align: center; color:#101010;}
.plantxt__tit{display:inline-block; width:80%; height:14.2%; font-family: arial, sans-serif; font-weight:bold; font-size:13vw; line-height:13vw; background:url(http://winv007.img18.kr/crazy11web/plan/nike_lucentpack/tco.gif) no-repeat; background-size:cover; background-position: center; background-clip:text; -webkit-background-clip:text; color:transparent;}
.plantxt__sub{font-weight:bold; font-size:5vw; line-height:6vw;}
.plantxt__txt{font-size:4vw; line-height:5vw; padding-top:10%; display:inline-block; width:80%; margin:0px auto;}
.plansubarea{padding:18% 0px 22% 8%;}
.plansubarea__tit{color:#2ea5f0; font-weight:bold; font-size:6vw; line-height:6vw;}
.plansubarea__txt{color:#707070; font-size:4vw; line-height:5vw; padding-top:8%; width:85%;}
/* 내용 */

.itemList {
  width: 100%;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
}
.itemList1 {
  background: #0d4a90;
  padding-bottom: 130px;
}
.itemList__tit {
  line-height: 2.4em;
  font-size: 1.2em;
  width: 92%;
  border-bottom: 1px solid #262626;
  margin: 8% 0px 4% 0px;
  color: #262626;
}
.itemList1 .itemList__tit {
  border-bottom: 1px solid #e5faff;
  color: #e5faff;
}
.itemBackgroundIn {
  width: 92%;
  background-size: 100%;
}
.itemContents {
  width: 100%;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.itemContents ul {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.itemContents ul li {
  float: left;
  width: 50%;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
  padding: 6% 4.87% 6.224% 4.87%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  background: #fff;
}

.itemContents ul li img {
  width: 100%;
}
.itemContents ul li .mainItemtxt {
  width: 100%;
  font-size: 1em;
  line-height: 1em;
  height: 3em;
  overflow: hidden;
  margin-top: 4%;
  text-align: center;
  font-weight: bold;
  color: #000;
}
.itemContents ul li .mainItemPrice {
  width: 100%;
  font-size: 1.1em;
  line-height: 1em;
  margin-top: 8%;
  text-align: right;
  font-weight: bold;
  color: #aaa;
  text-decoration: line-through;
}
.itemContents ul li .mainItemPrice span {
  font-size: 0.7em;
}
.itemContents ul li .priceBox {
  width: 100%;
  margin-top: 2%;
  letter-spacing: -1px;
}
.itemContents ul li .priceBox .saleNum {
  font-size: 1.3em;
  line-height: 1em;
  text-align: left;
  color: #e32e3c;
  float: left;
}
.itemContents ul li .priceBox .mainItemPriceSale {
  font-size: 1.3em;
  line-height: 1em;
  text-align: right;
  font-weight: bold;
  color: #000;
  float: right;
}
.itemContents ul li .priceBox .mainItemPriceSale span {
  font-size: 0.7em;
}
.itemContents ul li .mainItemBtn {
  width: 90%;
  font-size: 1.1em;
  line-height: 2em;
  box-sizing: border-box;
  border: 1px solid #202020;
  color: #202020;
  text-align: center;
  margin: 8% auto 0px auto;
  font-weight: bold;
}
.itemContents ul li a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/* 뷰포트 내용 */
.itemBbottom img {
  width: 100%;
}
/* 뷰포트 내용 하단 */

@media all and (min-width: 400px) {
  .plan__title .title-name {
    font-size: 7.7vw;
  }
  .title__circle-image {
    width: 354px;
    height: 354px;
  }

  .title__circle-image .circle-image {
    width: 354px;
    height: 354px;
  }

  /* 이미지 슬라이드 크기 조정 */

  .itemContents ul li .mainItemtxt {
    font-size: 1.1em;
  }
  .itemContents ul li .mainItemPrice {
    font-size: 1.1em;
  }
  .itemContents ul li .priceBox .mainItemPriceSale {
    font-size: 1.6em;
  }
  .itemContents ul li .mainItemBtn {
    font-size: 1.1em;
  }
  .itemContents ul li .priceBox .saleNum {
    font-size: 1.6em;
  }
  /* 검색결과 갤러리 뷰포트 내용 */
}

@media all and (min-width: 768px) {
  .itemContents ul li {
    width: 25%;
    padding: 2.385% 2.385% 2.904% 2.385%;
  }
  .itemContents ul li .priceBox .mainItemPriceSale {
    font-size: 1.4em;
  }
  .itemContents ul li .priceBox .saleNum {
    font-size: 1.2em;
  }
  /* 검색결과 갤러리 뷰포트 내용 */
}

@media all and (min-width: 1000px) {
  .itemContents ul li .mainItemtxt {
    font-size: 1.2em;
  }
  .itemContents ul li .mainItemBtn {
    font-size: 1.2em;
  }
  .itemContents ul li .priceBox .mainItemPriceSale {
    font-size: 1.6em;
  }
  .itemContents ul li .priceBox .saleNum {
    font-size: 1.6em;
  }
  /* 검색결과 갤러리 뷰포트 내용 */
}

/* BASIC css end */