/* ######## explore page 공통 css ######## */
.info_top, .info_bottom {background-color: var(--box); border-radius: 20px; }

/* ######## explore_container ######## */
.explore_container {margin-top: 70px; min-height: calc(100vh - 172px); background-color: var(--exbg);}
.explore_container .section_inner {padding: 60px 20px;}
/* explore_detail */
.explore_detail {display: flex; gap: 20px;}
.explore_detail>div {width: 50%;}
/* ex_detail_img */
.ex_detail_img {cursor: pointer; align-self: flex-start; aspect-ratio: 1/1; border: 4px solid transparent; border-radius: 20px; background-origin: border-box; background-image: linear-gradient(#000, #000), linear-gradient(135deg, var(--main), var(--grad)); background-clip: content-box, border-box;}


/* ######## info_top ######## */
.info_top {padding: 40px;}
.info_top .bold {font-size: 40px; word-break: break-all;}
.info_top .bold+p {color: var(--roadmap); font-size: 18px; margin: 15px 0;}
/* copy */
.btn_copy {cursor: pointer; display: inline-block; position: relative;}
.btn_copy img {display: block;}
.copy_cap {opacity: 0; pointer-events: none; position: absolute; font-family: 'noto_sans'; bottom: calc(100% + 10px);left:50%; transform: translateX(-50%); display: inline-block; text-align: center; line-height: 40px; border-radius: 10px; background-color: aliceblue; width: 170px; height: 40px; color: var(--dark); font-size: 16px;}
.copy_cap.effect {animation: copy 1.5s both;}
.copy_cap:before {content: ''; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg); background-color: #fff; width: 10px; height: 10px; display: block;}
@keyframes copy { 0% {opacity: 1;} 70% {opacity: 1;} 100% {opacity: 0;} }
/* date_wrap */
.date_wrap {gap: 10px; font-family: 'noto_sans'; margin-top: 70px; display: flex; align-items: flex-start; justify-content: space-between; background-color: var(--inbox); padding: 15px 20px; border-radius: 10px;}
.date_wrap span {max-width: 50%;}
.date_wrap span:first-child {font-size: 16px;}
.date_wrap span:last-child {font-size: 18px;}
/* price_wrap */
.price_wrap {display: flex;justify-content: space-between; align-items: center; margin-top: 20px;}
.price_wrap .bold {font-size: 32px;}
.price {font-family: 'noto_sans';}


/* ######## info_bottom ######## */
.info_bottom {margin-top: 20px; cursor: pointer; padding: 30px 40px;}

/* token_wrap */
.token_wrap {display: flex; align-items: center; justify-content: space-between; gap: 22px;}
.token {font-size: 22px; font-weight: 800;}
.token_wrap .arrow {width: 24px; min-width: 24px;}
.token_wrap .arrow img {width: 100%;}

.info_bottom.active .arrow {transform: rotate(180deg);}
.info_bottom.active .token_info {display: flex;}

.token_info {margin-top: 15px; display: none;}
.token_info p {width: 50%; font-size: 16px;}
.token_info p span {display: block; word-break: break-all;}
.token_tit {font-size: 18px; opacity: .5;}





@media (max-width:1200px){
  /* ######## info_top ######## */
  .info_top {padding: 30px;}
  .info_top .bold {font-size: 30px;}
  .info_top .bold+p {font-size: 16px;}
  .price_wrap .bold {font-size: 20px;}
  .price_wrap .btn_blue {padding: 14px 20px;}

  /* ######## info_bottom ######## */
  .info_bottom {padding: 30px; position: relative; margin-top: 10px;}
  .token {font-size: 18px;}
}



@media(max-width:767px){
  /* ######## explore_container ######## */
  .explore_container {margin-top: 60px;}
  .explore_container .section_inner {padding: 24px 16px;}
  .explore_detail {flex-direction: column;}
  .explore_detail>div {width: 100%;}

  /* ######## explore page 공통 css ######## */
  .info_top, .info_bottom {padding: 22px;}

  /* ######## info_top ######## */
  .info_top .bold {font-size: 22px;}
  .info_top .bold+p {font-size: 14px;}
  .price_wrap {flex-direction: column; justify-content: unset; align-items: unset;}
  .info_top .price_wrap .bold {margin-bottom: 15px; font-size: 18px;}
  .price_wrap .btn_blue {text-align: center;}

  .date_wrap {margin-top: 50px;}
  .date_wrap span:first-child {font-size: 14px;}
  .date_wrap span:last-child {font-size: 16px;}

  .token_info {flex-direction: column; gap: 10px;}
  .token_info p {width: 100%;}
  .token_tit {font-size: 14px;}

  .copy_cap {position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 100;}
  .copy_cap:before {display: none;}
}