@charset "UTF-8";

.contentBox{padding: 50px 0 100px;}

/* 상단 */
.topTextBox{padding: 15px; background-color: var(--color-black); text-align: center; overflow: hidden;}
.topTextBox p{ text-align: center; color: #fff; font-size: 14px; font-weight: 600;}
.topTextBox p span{ background: linear-gradient(90deg, #eaaa18 0%, #c87406 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.topTextBox .float-points {position: absolute; inset: 0; overflow: hidden; pointer-events: none; transition: transform 500ms; perspective: 1000px;}
.topTextBox:hover .float-points {transform: scale(1.05);}
.topTextBox .ball {position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 9999px; transform-style: preserve-3d;}
.topTextBox .ring {position: absolute; inset: 2px; border-radius: 9999px; border: 1px solid rgba(0,0,0,0.15); pointer-events: none;}
.topTextBox .label {position: relative;  z-index: 10; font-weight: 900; color: #7c2d12; text-shadow:
    0 1px 2px rgba(0,0,0,0.5), 0 0 4px rgba(255,255,255,0.3);}
.topTextBox .label--14 { font-size: 14px; }
.topTextBox .label--13 { font-size: 13px; }
.topTextBox .label--11 { font-size: 11px; }
.topTextBox .label--8  { font-size:  8px; }
.topTextBox .label--7  { font-size:  7px; }
.topTextBox .label--6  { font-size:  6px; }
.topTextBox .label--5  { font-size:  5px; }

@keyframes pulseLite {
  0%, 100% { opacity: 1; transform: translateZ(0) scale(1); }
  50%      { opacity: 0.85; transform: translateZ(0) scale(1.05); }
}
@keyframes pingLite {
  0%   { transform: scale(0.9); opacity: 1; }
  80%  { transform: scale(1.2); opacity: 0.35; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes bounceLite {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-6px,0); }
}

.topTextBox .ring--yellow-300 { border-color: rgba(252, 211, 77, 0.6); }
.topTextBox .ring--amber-300  { border-color: rgba(252, 196, 67, 0.6); }
.topTextBox .ring--yellow-200 { border-color: rgba(254, 240, 138, 0.6); }
.topTextBox .ball--1 {top: 12px; left: 384px;width: 40px; height: 40px; animation: pulseLite 3s ease-in-out 0s infinite; background: radial-gradient(circle at 30% 30%, rgb(251,191,36), rgb(245,158,11), rgb(217,119,6), rgb(146,64,14)); box-shadow: rgba(255,255,255,0.4) 0 2px 4px inset, rgba(0,0,0,0.3) 0 -2px 4px inset,rgba(0,0,0,0.2) 0 4px 8px, rgba(251,191,36,0.4) 0 0 12px;border: 2px solid rgb(217,119,6);transform: rotateZ(12deg) rotateX(15deg) rotateY(-10deg);}
.topTextBox .ball--4 {top: 50%; left: 230.4px;width: 20px; height: 20px;
  animation: bounceLite 2s ease-in-out 0.2s infinite;background: radial-gradient(circle at 30% 30%, rgb(245,158,11), rgb(217,119,6), rgb(180,83,9)); box-shadow: rgba(255,255,255,0.3) 0 1px 3px inset, rgba(0,0,0,0.2) 0 -1px 3px inset,rgba(0,0,0,0.2) 0 2px 5px, rgba(245,158,11,0.3) 0 0 8px; border: 1.5px solid rgb(180,83,9); transform: rotateZ(30deg) rotateX(10deg) rotateY(-20deg);}
.topTextBox .ball--5 {top: 50%; right: 230.4px; width: 24px; height: 24px;animation: bounceLite 2s ease-in-out 0.8s infinite; background: radial-gradient(circle at 30% 30%, rgb(251,191,36), rgb(245,158,11), rgb(217,119,6)); box-shadow: rgba(255,255,255,0.3) 0 1px 3px inset, rgba(0,0,0,0.2) 0 -1px 3px inset,rgba(0,0,0,0.2) 0 3px 6px, rgba(251,191,36,0.3) 0 0 9px; border: 1.5px solid rgb(217,119,6); transform: rotateZ(-15deg) rotateX(-14deg) rotateY(22deg);}
.topTextBox .ball--6 {left: 806.4px; bottom: 16px; width: 14px; height: 14px; animation: pingLite 3s cubic-bezier(.2,.6,.4,1) 0.7s infinite; background: radial-gradient(circle at 30% 30%, rgb(251,191,36), rgb(245,158,11), rgb(180,83,9)); box-shadow: rgba(255,255,255,0.2) 0 0.5px 2px inset, rgba(0,0,0,0.2) 0 -0.5px 2px inset,rgba(0,0,0,0.2) 0 2px 4px, rgba(251,191,36,0.2) 0 0 6px; border: 1px solid rgb(180,83,9); transform: rotateZ(-45deg) rotateX(18deg) rotateY(-16deg);}
.topTextBox .ball--7 {top: 8px; left: 153.6px; width: 24px; height: 24px; animation: pulseLite 2.8s ease-in-out 0.3s infinite; background: radial-gradient(circle at 30% 30%, rgb(251,191,36), rgb(245,158,11), rgb(217,119,6)); box-shadow: rgba(255,255,255,0.3) 0 1px 3px inset, rgba(0,0,0,0.2) 0 -1px 3px inset,rgba(0,0,0,0.2) 0 3px 6px, rgba(251,191,36,0.3) 0 0 9px; border: 1.5px solid rgb(217,119,6); transform: rotateZ(25deg) rotateX(-12deg) rotateY(18deg);}
.topTextBox .ball--8 {right: 96px;bottom: 20px; width: 20px; height: 20px; animation: pulseLite 2.3s ease-in-out 0.6s infinite; background: radial-gradient(circle at 30% 30%, rgb(253,224,71), rgb(250,204,21), rgb(234,179,8)); box-shadow: rgba(255,255,255,0.3) 0 1px 3px inset, rgba(0,0,0,0.2) 0 -1px 3px inset,rgba(0,0,0,0.2) 0 2px 5px, rgba(253,224,71,0.3) 0 0 7px;
  border: 1.5px solid rgb(234,179,8); transform: rotateZ(-42deg) rotateX(-6deg) rotateY(28deg);}
.topTextBox .ball--9 {top: 36px; left: 1382.4px; width: 16px; height: 16px;
  animation: bounceLite 2.9s ease-in-out 0.1s infinite; background: radial-gradient(circle at 30% 30%, rgb(245,158,11), rgb(217,119,6), rgb(180,83,9)); box-shadow: rgba(255,255,255,0.3) 0 1px 2px inset, rgba(0,0,0,0.2) 0 -1px 2px inset,rgba(0,0,0,0.2) 0 2px 4px, rgba(245,158,11,0.3) 0 0 6px; border: 1px solid rgb(180,83,9); transform: rotateZ(18deg) rotateX(-20deg) rotateY(25deg);}
.topTextBox .ball:focus-visible {outline: 2px solid #3b82f6; outline-offset: 3px;}

@media (max-width: 1199px){

  .topTextBox .ball--7{left: 30px;}
  .topTextBox .ball--4{left: 80px;}
  .topTextBox .ball--1{left: 26%;}
  .topTextBox .ball--6{left: calc(50% - 130px);}

}

@media (max-width: 767px){

  .topTextBox .ball--8{display: none; right: 20px;}
  .topTextBox .ball--5{display: none; right: 70px;}
  .topTextBox .ball--4{left: 50px;}
  .topTextBox .ball--7{display: none;}
  .topTextBox .ball--1{left: auto; right: 90px;}

}

@media (max-width: 480px){

  .topTextBox .ball--4{left: 20px;}
  .topTextBox .ball--1{width: 25px; height: 25px; right: 20px;}
  .topTextBox .ball--6{left: calc(50% - 116px);}

}

@media (max-width: 360px){
  
  .topTextBox .ball--6{display: none;}
  .topTextBox .ball--4{width: 15px; height: 15px; left: 10px;}

}

/* 캠페인 상세 */
.campaignDetailBox .layoutBox{display: flex; gap: 0 20px;}
.campaignDetailBox .leftBox{width: 64%;}
.campaignDetailBox .leftBox .topImgBox{margin-bottom: 20px;}
.campaignDetailBox .leftBox .topImgBox .mainImgBox{margin-bottom: 20px; height: 600px; border-radius: 10px; overflow: hidden;}
.campaignDetailBox .leftBox .topImgBox .mainImgBox img{display: block; width: 100%; height: 100%; object-fit: cover;}
.campaignDetailBox .leftBox .topImgBox .subImgBox{ display: flex; gap: 0 10px;}
.campaignDetailBox .leftBox .topImgBox .subImgBox .btn{flex-shrink: 0; width: 135px; height: 135px; border-radius: 8px; overflow: hidden;}
.campaignDetailBox .leftBox .topImgBox .subImgBox .btn.active{border: 2px solid var(--color-primary);}
.campaignDetailBox .leftBox .topImgBox .subImgBox .btn img{display: block; width: 100%; height: 100%; object-fit: cover;}
.campaignDetailBox .leftBox .contentBox{margin-bottom: 20px; padding: 20px; border: 1px solid var(--border); border-radius: 10px;}
.campaignDetailBox .leftBox .contentBox .title{display: flex; gap: 0 9px; margin-bottom: 25px; }
.campaignDetailBox .leftBox .contentBox .title h3{font-size: 16px; color: var(--color-black);}
.campaignDetailBox .leftBox .contentBox .title svg{margin-top: 1px; width: 18px; height: 18px;}
.campaignDetailBox .leftBox .contentBox .title.offer svg{color: var(--color-primary);}
.campaignDetailBox .leftBox .contentBox .title.qualification svg{color: var(--color-yellow-600);}
.campaignDetailBox .leftBox .contentBox .title.campaign svg{color: var(--color-green-600);}
.campaignDetailBox .leftBox .contentBox .title.event svg{color: var(--color-primary);}
.campaignDetailBox .leftBox .contentBox .title.post svg{color: var(--color-purple-600);}
.campaignDetailBox .leftBox .contentBox .title.hashtag span{color: var(--color-pink-600); font-weight: 700;}
.campaignDetailBox .leftBox .contentBox .title.caution svg{color: var(--color-red-600);}
.campaignDetailBox .leftBox .contentBox .offerContentBox{padding: 20px; border-radius: 10px; background-color: var(--color-blue-50);}
.campaignDetailBox .leftBox .contentBox .offerContentBox strong{display: block; margin-bottom: 3px; font-size: 26px; font-weight: 800; color: var(--color-primary);}
.campaignDetailBox .leftBox .contentBox .offerContentBox span{margin-bottom: 9px; display: block; color: var(--color-primary); font-size: 14px; font-weight: 500;}
.campaignDetailBox .leftBox .contentBox .offerContentBox p{padding: 10px; background-color: var(--color-white); font-size: 12px; border-radius: 3px;}
.campaignDetailBox .leftBox .contentBox .qualificationContentBox p{padding: 13px 10px 13px 15px; font-size: 14px; background-color: var(--color-yellow-50); border-left: 4px solid var(--color-yellow-400);}
.campaignDetailBox .leftBox .contentBox .campaignContentBox01{background-color: var( --color-green-50); border: 1px solid var(--color-green-200);}
.campaignDetailBox .leftBox .contentBox .campaignContentBox{margin-bottom: 15px; padding: 15px 20px; border-radius: 10px;}
.campaignDetailBox .leftBox .contentBox .campaignContentBox:last-child{margin-bottom: 0;}
/*Custom*/
/*.campaignDetailBox .leftBox .contentBox .campaignContentBox{font-size: 12px; line-height: 1.6;}*/
.campaignDetailBox .leftBox .contentBox .campaignContentBox .tit,
.campaignDetailBox .leftBox .contentBox .campaignContentBox h3{margin-bottom: 7px; font-size: 14px; font-weight: 700;}
.campaignDetailBox .leftBox .contentBox .campaignContentBox .list li{margin-bottom: 6px; font-size: 12px;}
.campaignDetailBox .leftBox .contentBox .campaignContentBox .list li:last-child{margin-bottom: 0;}
.campaignDetailBox .leftBox .contentBox .campaignContentBox02{background-color: var( --color-gray-50); border: 1px solid var(--color-gray-200);}
.campaignDetailBox .leftBox .contentBox .eventContentBox{padding: 20px 20px 10px; background-color: var( --color-blue-50); border: 1px solid var(--color-blue-200); border-radius: 10px;}
.campaignDetailBox .leftBox .contentBox .eventContentBox h4{margin-bottom: 10px; font-size: 14px; color: var(--color-primary); text-align: center;}
.campaignDetailBox .leftBox .contentBox .eventContentBox .infoBox{margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-blue-200);}
.campaignDetailBox .leftBox .contentBox .eventContentBox .infoBox .box{margin-bottom: 10px; display: flex; align-items: center;}
.campaignDetailBox .leftBox .contentBox .eventContentBox .infoBox .box span{flex-shrink: 0; width: 70px; font-weight: 700; font-size: 14px;}
.campaignDetailBox .leftBox .contentBox .eventContentBox .infoBox .box em{font-size: 14px;}
.campaignDetailBox .leftBox .contentBox .eventContentBox .infoBox .box:last-child{margin-bottom: 0;}
.campaignDetailBox .leftBox .contentBox .eventContentBox .text01{margin-bottom: 5px; padding: 10px; background-color: var(--color-white); font-size: 12px; border-radius: 3px; color: var(--color-blue-700);}
.campaignDetailBox .leftBox .contentBox .eventContentBox .text02{font-size: 12px; color: var(--color-red-600);}
.campaignDetailBox .leftBox .contentBox .postContentBox{padding: 15px 20px; background-color: var( --color-purple-50); border: 1px solid var(--color-purple-200); border-radius: 10px;}
.campaignDetailBox .leftBox .contentBox .postContentBox .list li{margin-bottom: 8px; font-size: 12px;}
.campaignDetailBox .leftBox .contentBox .postContentBox .list li:last-child{margin-bottom: 0;}
/* Custom */
/*.campaignDetailBox .leftBox .contentBox .postContentBox p{margin-top: 10px; font-size: 12px; color: var(--color-gray-500); font-weight: 300;}*/
.campaignDetailBox .leftBox .contentBox .hashtagContentBox{padding: 15px; background-color: var( --color-pink-50); border: 1px solid var(--color-pink-200); border-radius: 10px;}
.campaignDetailBox .leftBox .contentBox .hashtagContentBox p{padding: 15px; font-size: 12px; background-color: var(--color-white); font-weight: 300; line-height: 1.7; border-radius: 3px; border: 1px dashed var(--color-pink-300);}
.campaignDetailBox .leftBox .contentBox .cautionContentBox{padding: 20px; background-color: var( --color-red-50); border: 1px solid var(--color-red-200); border-radius: 10px;}
.campaignDetailBox .leftBox .contentBox .cautionContentBox .list li{margin-bottom: 15px; font-size: 12px;}
.campaignDetailBox .leftBox .contentBox .cautionContentBox .list li:last-child{margin-bottom: 0;}
.campaignDetailBox .leftBox .contentBox .cautionContentBox .list li span{font-weight: 700; color: var(--color-red-500);}
.campaignDetailBox .rightBox{width: 350px;}
.campaignDetailBox .rightBox .infoBox{margin-bottom: 15px; padding: 20px; border: 1px solid var(--border); border-radius: 10px;}
.campaignDetailBox .rightBox .box01 .topBox{margin-bottom: 15px;}
.campaignDetailBox .rightBox .box01 .topBox h3{margin-bottom: 5px; font-size: 18px;}
.campaignDetailBox .rightBox .box01 .topBox span{display: block; margin-bottom: 12px; font-size: 12px; font-weight: 300;}
.campaignDetailBox .rightBox .box01 .topBox .snsBox .box{width: 28px; height: 28px;}
.campaignDetailBox .rightBox .box01 .viewInfoBox{margin-bottom: 15px; padding: 15px 0; display: flex; border: 1px solid var(--border); border-width: 1px 0;}
.campaignDetailBox .rightBox .box01 .viewInfoBox .viewBox{flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: center;}
.campaignDetailBox .rightBox .box01 .viewInfoBox .viewBox strong{ font-size: 16px; line-height: 1;}
.campaignDetailBox .rightBox .box01 .viewInfoBox .viewBox span{display: block; font-size: 12px; line-height: 1;}
.campaignDetailBox .rightBox .box01 .viewInfoBox .viewBox svg{width: 14px; height: 14px; color: var(--color-gray-400);}
.campaignDetailBox .rightBox .box01 .pointBox{margin-bottom: 15px; padding: 15px; border-radius: 10px; background-color: var(--color-blue-50);}
.campaignDetailBox .rightBox .box01 .pointBox .iconTitleBox{margin-bottom: 5px; display: flex; align-items: center; gap: 0 5px; justify-content: center;}
.campaignDetailBox .rightBox .box01 .pointBox .iconTitleBox svg{width: 18px; height: 18px; color: var(--color-primary);}
.campaignDetailBox .rightBox .box01 .pointBox .iconTitleBox span{font-size: 12px;}
.campaignDetailBox .rightBox .box01 .pointBox strong{margin-bottom: 3px; display: block; text-align: center; font-size: 21px; color: var(--color-primary); font-weight: 800;}
.campaignDetailBox .rightBox .box01 .pointBox em{display: block; text-align: center; font-size: 11px;}
.campaignDetailBox .rightBox .box01 .btnBox{display: flex; gap: 0 10px;}
.campaignDetailBox .rightBox .box01 .btnBox .btn{display: block; border-radius: 5px;}
.campaignDetailBox .rightBox .box01 .btnBox .likeBtn{flex-shrink: 0; position: relative; width: 42px; height: 42px; border: 1px solid var(--border); transition: all .5s;}
.campaignDetailBox .rightBox .box01 .btnBox .likeBtn:hover{background-color: var(--color-gray-200);}
.campaignDetailBox .rightBox .box01 .btnBox .likeBtn svg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px;}
.campaignDetailBox .rightBox .box01 .btnBox .applicationBtn{width: 100%; padding: 0 20px; height: 42px;line-height: 42px; background-color: var(--color-primary); color: var(--color-white); text-align: center; font-weight: 700; transition: all .5s;}
/*Custom*/
.campaignDetailBox .rightBox .box01 .btnBox .disabledBtn{width: 100%; padding: 0 20px; height: 42px;line-height: 42px; background-color: var( --color-gray-500); color: var(--color-white); text-align: center; font-weight: 700; transition: all .5s;}
.campaignDetailBox .rightBox .box01 .btnBox .applicationBtn:hover{background-color: #0b3099;}
.campaignDetailBox .rightBox .box02 .title{margin-bottom: 35px; display: flex; gap: 0 7px;}
.campaignDetailBox .rightBox .box02 .title svg{width: 18px; height: 18px;}
.campaignDetailBox .rightBox .box02 .title h4{font-weight: 800; font-size: 14px;}
.campaignDetailBox .rightBox .box02 .infoListBox .listBox:last-child{margin-bottom: 0;}
.campaignDetailBox .rightBox .box02 .infoListBox .listBox{margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;}
.campaignDetailBox .rightBox .box02 .infoListBox .listBox span{font-size: 12px;}
.campaignDetailBox .rightBox .box02 .infoListBox .listBox em{font-size: 12px; font-weight: 700;}
.campaignDetailBox .rightBox .infoBox03{padding: 10px 20px;}
/* Custom */
/*.campaignDetailBox .rightBox .box03 .stateBox{margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between;}*/
.campaignDetailBox .rightBox .box03 .stateBox{margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;}
.campaignDetailBox .rightBox .box03 .stateBox span{font-size: 12px;}
.campaignDetailBox .rightBox .box03 .stateBox em{display: inline-block; padding: 5px 10px; font-size: 11px; border-radius: 50px; line-height: 1;}
.campaignDetailBox .rightBox .box03 .stateBox em.state01{background-color: var(--color-green-50); color: var(--color-green-700); font-weight: 700;}
/*Custom*/
.campaignDetailBox .rightBox .box03 .stateBox em.state02{background-color: var(--color-red-100); color: var(--color-red-700); font-weight: 700;}
.campaignDetailBox .rightBox .box03 .stateBox em.state03{background-color: var(--color-yellow-100); color: var(--color-yellow-700); font-weight: 700;}
.campaignDetailBox .rightBox .box03 .stateBox em.state04{background-color: var(--color-blue-100); color: var(--color-blue-700); font-weight: 700;}
.campaignDetailBox .rightBox .box03 .stateBox em.state05{background-color: var(--color-gray-100); color: var(--color-gray-700); font-weight: 700;}
.campaignDetailBox .rightBox .box03 P{display: flex; align-items: center; gap: 0 5px; font-size: 11px;}
.campaignDetailBox .rightBox .box03 P svg{width: 11px; height: 11px; margin-top: -1px;}

@media (max-width: 1024px){

  .campaignDetailBox .layoutBox{flex-direction: column; gap: 30px 0;}
  .campaignDetailBox .leftBox,
  .campaignDetailBox .rightBox{width: 100%;}

  .campaignDetailBox .leftBox .topImgBox .mainImgBox{height: 520px;}

}

@media (max-width: 767px){

    .campaignDetailBox .leftBox .topImgBox .mainImgBox{height: 380px;}
    .campaignDetailBox .leftBox .topImgBox .subImgListBox{padding-bottom: 25px; overflow-y: auto;}
    .campaignDetailBox .leftBox .topImgBox .subImgListBox .subImgBox{width: 767px;}
    .campaignDetailBox .leftBox .contentBox .offerContentBox strong{font-size: 20px;}

}

@media (max-width: 480px){

    .campaignDetailBox .leftBox .topImgBox .subImgListBox .subImgBox{width: 480px;}
    .campaignDetailBox .leftBox .topImgBox .mainImgBox{margin-bottom: 15px; height: 250px;}
    .campaignDetailBox .leftBox .topImgBox .subImgBox .btn{width: 100px; height: 100px;}
    .campaignDetailBox .leftBox .contentBox .offerContentBox strong{font-size: 18px;}
    .campaignDetailBox .rightBox .box01 .pointBox strong{font-size: 18px;}

}

/* 캠페인 신청하기 */
.campaignApplicationBox{max-width: 796px; margin: 0 auto;}
.campaignApplicationBox .layoutBox{display: flex; align-items: flex-start; justify-content: center; gap: 0 20px;}
.campaignApplicationBox .leftBox{width: 70%;}
.campaignApplicationBox .rightBox{width: 30%;}
.campaignApplicationBox .leftBox,
.campaignApplicationBox .rightBox{padding: 20px; border: 1px solid var(--border); border-radius: 10px;}
.campaignApplicationBox .leftBox h3{font-size: 21px; margin-bottom: 20px;}
.campaignApplicationBox .formBox .infoText{margin:8px 0 10px; padding: 10px; display: flex; align-items: center; gap: 0 5px; font-size: 12px; background-color: var(--color-gray-50); border-radius: 5px;}
.campaignApplicationBox .formBox .infoText svg{width: 12px; height: 12px; color: var(--color-blue-500);}
.campaignApplicationBox .formBox .labelBox p{color: var(--color-gray-500); font-size: 12px;}
.campaignApplicationBox .formBox .selectText{display: none; margin: 20px 0 0; padding: 8px 10px 8px 8px; background-color: var(--color-blue-50); font-size: 12px; color: var(--color-blue-800); border-radius: 5px;}
.campaignApplicationBox .formBox .applicationList{display: flex; flex-wrap: wrap; gap: 10px 1.5%;}
.campaignApplicationBox .formBox .applicationList li .btn:hover{box-shadow: 0 5px 8px rgba(0,0,0,.1);}
.campaignApplicationBox .formBox .applicationList li .btn.active{border: 1px solid var(--color-primary);}
.campaignApplicationBox .formBox .applicationList li .btn.active .textBox h3{color: var(--color-primary);}
.campaignApplicationBox .formBox .applicationList li .btn.active .checkIconBox{display: block;}
.campaignApplicationBox .formBox .applicationList li .btn .checkIconBox{display: none; position: absolute; top:5px; right: 5px; width: 21px; height: 21px; border-radius: 50%; background-color: var(--color-primary); z-index: 999;}
.campaignApplicationBox .formBox .applicationList li .btn .checkIconBox svg{width: 12px; height: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-white);}
.campaignApplicationBox .formBox .applicationList li .btn{position: relative; display: block; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; text-align: left; transition: all .15s;}
.campaignApplicationBox .formBox .applicationList li .btn .imgBox{position: relative; padding-top: 53%; height: 0;}
.campaignApplicationBox .formBox .applicationList li .btn .imgBox.noImg{background: var(--color-gray-100);}
.campaignApplicationBox .formBox .applicationList li .btn .imgBox.noImg img{position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain;}
.campaignApplicationBox .formBox .applicationList li .btn .imgBox img{position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
.campaignApplicationBox .formBox .applicationList li .btn .textBox{padding: 30px 10px 10px;}
.campaignApplicationBox .formBox .applicationList li .btn .textBox h3{margin-bottom: 3px; font-size: 11px;}
.campaignApplicationBox .formBox .applicationList li .btn .textBox span{display: block; font-size: 10px; font-weight: 300;}
.campaignApplicationBox .formBox .labelBox{margin-bottom: 6px; display: flex; align-items: center; gap: 0 7px;}
.campaignApplicationBox .formBox .labelBox svg{width: 14px; height: 14px;}
.campaignApplicationBox .formBox .labelBox .label{font-size: 12px; font-weight: 500;}
.campaignApplicationBox .formBox .labelBox em{color: var(--color-red-500); font-size: 12px;}
.campaignApplicationBox .formBox .channelList li{margin-bottom: 10px;}
.campaignApplicationBox .formBox .channelList li a{padding: 15px; gap: 0 10px; display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--border); border-radius: 8px;}
.campaignApplicationBox .formBox .channelList li a.active{background-color: var(--color-blue-100); border: 2px solid var(--color-primary);}
.campaignApplicationBox .formBox .channelList li a .btnBox{display: flex; align-items: center; gap: 0 5px;}
.campaignApplicationBox .formBox .channelList li a.active .btnBox .select{display: block; padding: 2px 8px; border-radius: 50px; text-align: center; background-color: var(--color-primary); color: var(--color-white); font-size: 11px;}
.campaignApplicationBox .formBox .channelList li a.active .iconBox .checkIconBox{display: block;}

/* Custom */
.campaignApplicationBox .formBox .channelList li a.renewal{background-color: var(--color-blue-100); border: 2px solid var(--color-yellow-500);}
.campaignApplicationBox .formBox .channelList li a.renewal .btnBox .renewalTag{display: block; padding: 2px 8px; border-radius: 50px; text-align: center; background-color: var(--color-yellow-500); color: var(--color-white); font-size: 11px;}
.campaignApplicationBox .formBox .channelList li a.renewal .iconBox .checkIconBox{display: block;}
.campaignApplicationBox .formBox .channelList li a.participation{background-color: var(--color-blue-100); border: 2px solid var(--color-gray-500);}
.campaignApplicationBox .formBox .channelList li a.participation .btnBox .participationTag{display: block; padding: 2px 8px; border-radius: 50px; text-align: center; background-color: var(--color-gray-500); color: var(--color-white); font-size: 11px;}
.campaignApplicationBox .formBox .channelList li a.participation .iconBox .checkIconBox{display: block;}
.campaignApplicationBox .formBox .channelList li a.fail{background-color: var(--color-blue-100); border: 2px solid var(--color-red-500);}
.campaignApplicationBox .formBox .channelList li a.fail .btnBox .failTag{display: block; padding: 2px 8px; border-radius: 50px; text-align: center; background-color: var(--color-red-500); color: var(--color-white); font-size: 11px;}
.campaignApplicationBox .formBox .channelList li a.fail .iconBox .checkIconBox{display: block;}
.campaignApplicationBox .formBox .channelList li a .btnBox .participationTag{display: none;}
.campaignApplicationBox .formBox .channelList li a .btnBox .renewalTag{display: none;}
.campaignApplicationBox .formBox .channelList li a .btnBox .failTag{display: none;}

.campaignApplicationBox .formBox .channelList li a .btnBox .select{display: none;}
.campaignApplicationBox .formBox .channelList li a .iconBox .checkIconBox{display: none; position: absolute; top:-5px; right:-5px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--color-primary);}
.campaignApplicationBox .formBox .channelList li a .iconBox .checkIconBox svg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px;}
.campaignApplicationBox .formBox .channelList li a .layoutBox{gap:0 10px;}
.campaignApplicationBox .formBox .channelList li a .iconBox{position: relative; flex-shrink: 0; margin-right: 0; width: 21px; height: 21px; border-radius: 50%;}
.campaignApplicationBox .formBox .channelList li a .iconBox.youtube{background-color: var(--color-red-500);}
.campaignApplicationBox .formBox .channelList li a .iconBox.instagram{background: linear-gradient(45deg, #fdf497 0%, #fd5949 45%, #d6249f 65%, #285AEB 100%);}
.campaignApplicationBox .formBox .channelList li a .iconBox.naver{background-color: var(--color-green-500);}
/* Custom */
/*.campaignApplicationBox .formBox .channelList li a .iconBox .tiktok{background-color: var(--color-black);}*/
/*.campaignApplicationBox .formBox .channelList li a .iconBox .tiktok span{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; font-weight: 700; color: var(--color-white); font-size: 12px; text-align: center;}*/
.campaignApplicationBox .formBox .channelList li a .iconBox.tiktok{background-color: var(--color-black);}
.campaignApplicationBox .formBox .channelList li a .iconBox.tiktok span{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; font-weight: 700; color: var(--color-white); font-size: 12px; text-align: center;}

.campaignApplicationBox .formBox .channelList li a .iconBox.facebook{background-color: var(--color-blue-600);}
.campaignApplicationBox .formBox .channelList li a .iconBox svg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; color: var(--color-white);}
.campaignApplicationBox .formBox .channelList li a .textBox h3{margin: 0; font-size: 14px;}
.campaignApplicationBox .formBox .channelList li a .textBox p{font-size: 12px; font-weight: 300;}
.campaignApplicationBox .formBox .channelList li a .comBtn{padding: 0; width: 46px;}
.campaignApplicationBox .comBtn:hover{background-color: var(--color-gray-100);}
.campaignApplicationBox .border{margin: 25px 0; height: 1px; background-color: var(--border);}
.campaignApplicationBox form{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border);}
.campaignApplicationBox .rightBox .imgBox{position: relative; margin:0 auto 8px; height: 0; padding-top: 61%; border-radius: 10px; overflow: hidden;}
.campaignApplicationBox .rightBox .imgBox img{position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
.campaignApplicationBox .rightBox .topBox{margin-bottom: 8px;}
.campaignApplicationBox .rightBox .topBox h3{margin-bottom: 3px; font-size: 14px;}
.campaignApplicationBox .rightBox .topBox span{display: block; font-size: 12px; color: var(--color-gray-600);}
.campaignApplicationBox .rightBox .pointBox{margin-bottom: 8px; padding: 15px 15px 10px; background-color: var(--color-blue-50); border-radius: 10px; line-height: 1;}
.campaignApplicationBox .rightBox .pointBox span{margin-bottom: 8px; display: block; text-align: center; font-size: 12px;}
.campaignApplicationBox .rightBox .pointBox strong{display: block; font-size: 18px; color: var(--color-primary); font-weight: 800; text-align: center;} 
.campaignApplicationBox .rightBox .list li{margin-bottom: 3px; font-size: 11px; line-height: 1.4; font-weight: 300;}
.campaignApplicationBox .rightBox .list li:last-child{margin-bottom: 0;}

@media (max-width: 1024px){

  .campaignApplicationBox{max-width: none; width: 100%;}
  .campaignApplicationBox .leftBox,
  .campaignApplicationBox .rightBox{width: 100%;}
  .campaignApplicationBox .layoutBox{flex-direction: column-reverse; gap: 20px 0;}
  .campaignApplicationBox .leftBox h3{font-size: 18px;}
  .campaignApplicationBox .rightBox .imgBox{padding-top: 50%;}
  .campaignApplicationBox .formBox .channelList li a .layoutBox{flex-direction: row;}

}

@media (max-width: 480px){

  .campaignApplicationBox .leftBox,
  .campaignApplicationBox .rightBox{padding: 15px;}

  .campaignApplicationBox .rightBox .imgBox{padding-top: 55%;}
  .campaignApplicationBox .formBox .labelBox{flex-wrap: wrap; gap: 5px;}


}

/* 로그인 */
.siginBox .topBox p{margin-bottom: 25px; text-align: center; font-size: 14px; line-height: 1.7;}
.siginBox .kakaoLogin{gap: 0 6px; display: flex; align-items: center; height: 46px; border-radius: 8px; background-color: var(--color-yellow-300); justify-content: center; font-size:14px; line-height: 1; transition: all .5s;}
.siginBox .kakaoLogin svg{width: 18px; height: 18px;}
.siginBox .kakaoLogin:hover{background-color: var(--color-yellow-400); box-shadow: 5px 5px 5px rgba(0,0,0,.1);}
.siginBox .box{margin: 30px 0; display: flex; justify-content: center; gap: 0 10px; align-items: center; font-size: 12px;}
.siginBox .box em{flex-shrink: 0;}
.siginBox .box .border{width: 100%; height: 1px; background-color: var(--border);}
.siginBox .inputBox{position: relative;}
.siginBox .inputBox input{padding-left: 40px;}
.siginBox .inputBox svg{position: absolute; top:50%; transform: translateY(-50%); left:10px; width: 18px; height: 18px; color: var(--color-gray-400);}
.siginBox .inputPasswordBox input{padding-right: 40px;}
.siginBox .inputPasswordBox .passwordToggleBtn{display: flex; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right:10px;}
.siginBox .inputPasswordBox .passwordToggleBtn svg{position: static; transform: none;}
.siginBox .passwordFindLink{display: block; margin: 35px 0 15px;  text-align: center; font-size: 12px; color: var(--color-gray-500);}
.siginBox .passwordFindLink:hover{color: var(--color-primary);}
.siginBox .bottomBox{border-bottom: 1px solid var(--border);}
.siginBox .signupLinkBox{margin-top: 15px; display: flex; justify-content: center;}
.siginBox .signupLinkBox p{color: var(--color-gray-500); font-size: 12px;}
.siginBox .signupLinkBox .signupLink{font-weight: 700; color: var(--color-primary); font-size: 12px;}


/* 회원가입 동의 */
.signupBox .signupAgreeBox .agreeInfoBox{height: 112px; padding: 15px; width: 100%; border: 0; background-color: var(--color-gray-100); border-radius: 7px; font-size: 12px; color: var(--color-gray-500); overflow: auto;}
.signupBox .signupAgreeBox .agreeInfoBox h1,
.signupBox .signupAgreeBox .agreeInfoBox p,
.signupBox .signupAgreeBox .agreeInfoBox ul li{font-size: 11px; margin-bottom: 7px; color: var(--color-gray-600);}
.signupBox .inputCheckBox p{margin-top: 3px; padding-left: 25px; font-size: 11px; color: var(--color-gray-400);}


/* 회원가입 */
.signupBox .text{display: block; margin: 5px 0 8px; font-size: 12px; font-weight: 500;}
.signupBox .phoneBox{display: flex; gap: 0 10px;}
.signupBox .phoneBox .inputTextBox{width: 100%;}
.signupBox .phoneBox .certificationBtn{width: 73px; border-radius: 5px; text-align: center; font-size: 12px; background-color: var(--color-gray-100); color: var(--color-gray-00);}

/* 로그인, 회원가입 */
.authWrap{ max-width: 390px; width: 90%; margin: 0 auto; }
.authContentBox{padding: 20px 20px 30px; border-radius: 10px; box-shadow: 5px 5px 10px rgba(0,0,0,.1); background-color: var(--color-white);}
.authContentBox .topBox h1{margin-bottom: 7px;}
.authContentBox .topBox h1 a{display: block; font-size: 32px; color: var(--color-primary); text-align: center;}
.signupBox .authContentBox h2{margin-bottom: 3px; font-size: 14px; text-align: center; font-weight: 500;}
.signupBox .authContentBox h3{margin-bottom: 20px; font-size: 12px; text-align: center; font-weight: 300;}
.authWrap .infoText{margin-top: 25px; text-align: center; color: var(--color-gray-500); font-size: 12px;}
.authWrap .infoText a{color: var(--color-primary); font-size: 14px; font-weight: 700;}
.authWrap .btnBox{display: flex; gap: 0 10px}
.authWrap .btnBox .comBtn{flex: 1; font-size: 14px;}

/* 마이페이지 */
.mypageBox .topBox{margin-bottom: 20px;}
.mypageBox .topBox h3{margin-bottom: 10px; font-size: 21px;}
.mypageBox .topBox p{font-size: 14px;}
.mypageBox .mypageInfoList{margin-bottom: 25px; display: flex; gap: 15px;}
.mypageBox .mypageInfoList li{flex: 1;}
.mypageBox .mypageInfoList li a{padding: 25px 20px 50px; position: relative; display: block; height: 140px; border-radius: 10px; background-color: var(--color-white); border: 1px solid var(--border); z-index: 1; overflow: hidden; transition: all .15s;}
.mypageBox .mypageInfoList li a:hover{transform: scale(1.05); box-shadow: 0 5px 10px rgba(0,0,0,.1);}
.mypageBox .mypageInfoList li a .layoutBox{margin-bottom: 6px;}
.mypageBox .mypageInfoList li a .icon{position: relative;}
.mypageBox .mypageInfoList li a .icon svg{width: 21px; height: 21px;}
.mypageBox .mypageInfoList li a .icon02{margin-top: -8px; width: 42px; height: 42px; border-radius: 50%;}
.mypageBox .mypageInfoList li a .icon02 svg{position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%);}
.mypageBox .mypageInfoList li a h4{margin-bottom: 3px; font-size: 12px; font-weight: 300;}
.mypageBox .mypageInfoList li a strong{font-size: 21px; font-weight: 800;}
.mypageBox .mypageInfoList li a strong span{padding-left: 3px; font-size: 12px; font-weight: 400;}
.mypageBox .mypageInfoList li a .layoutBox{display: flex; align-items: center; justify-content: space-between;}
.mypageBox .mypageInfoList li a::after{content: ''; position: absolute; top:-50px; right:-30px; width: 100px; height: 100px; border-radius: 50%; z-index: -1;} 
.mypageBox .mypageInfoList li:nth-child(1) a::after{background-color: var(--color-blue-50); }
.mypageBox .mypageInfoList li:nth-child(1) a .icon01 svg{color: var(--color-primary);}
.mypageBox .mypageInfoList li:nth-child(1) a .icon02{background-color: var(--color-blue-100);}
.mypageBox .mypageInfoList li:nth-child(1) a .icon02 svg{color: var(--color-primary);}
.mypageBox .mypageInfoList li:nth-child(1) a strong{color: var(--color-primary);}
/* Custom */
/*.mypageBox .mypageInfoList li:nth-child(2) a::after{background-color: var(--color-blue-50); }*/
/*.mypageBox .mypageInfoList li:nth-child(2) a .icon01 svg{color: var(--color-primary);}*/
/*.mypageBox .mypageInfoList li:nth-child(2) a .icon02{background-color: var(--color-blue-100);}*/
/*.mypageBox .mypageInfoList li:nth-child(2) a .icon02 svg{color: var(--color-primary);}*/
/*.mypageBox .mypageInfoList li:nth-child(2) a strong{color: var(--color-primary);}*/
/*.mypageBox .mypageInfoList li:nth-child(3) a::after{background-color: var(--color-green-50); }*/
/*.mypageBox .mypageInfoList li:nth-child(3) a .icon01 svg{color: var(--color-green-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(3) a .icon02{background-color: var(--color-green-100);}*/
/*.mypageBox .mypageInfoList li:nth-child(3) a .icon02 svg{color: var(--color-green-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(3) a strong{color: var(--color-green-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(4) a::after{background-color: var(--color-purple-50); }*/
/*.mypageBox .mypageInfoList li:nth-child(4) a .icon01 svg{color: var(--color-purple-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(4) a .icon02{background-color: var(--color-purple-100);}*/
/*.mypageBox .mypageInfoList li:nth-child(4) a .icon02 svg{color: var(--color-purple-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(4) a strong{color: var(--color-purple-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(5) a::after{background-color: var(--color-orange-50); }*/
/*.mypageBox .mypageInfoList li:nth-child(5) a .icon01 svg{color: var(--color-orange-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(5) a .icon02{background-color: var(--color-orange-100);}*/
/*.mypageBox .mypageInfoList li:nth-child(5) a .icon02 svg{color: var(--color-orange-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(5) a strong{color: var(--color-orange-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(6) a::after{background-color: var(--color-red-50); }*/
/*.mypageBox .mypageInfoList li:nth-child(6) a .icon01 svg{color: var(--color-red-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(6) a .icon02{background-color: var(--color-red-100);}*/
/*.mypageBox .mypageInfoList li:nth-child(6) a .icon02 svg{color: var(--color-red-600);}*/
/*.mypageBox .mypageInfoList li:nth-child(6) a strong{color: var(--color-red-600);}*/
.mypageBox .mypageInfoList li:nth-child(2) a::after{background-color: var(--color-red-50); }
.mypageBox .mypageInfoList li:nth-child(2) a .icon01 svg{color: var(--color-red-600);}
.mypageBox .mypageInfoList li:nth-child(2) a .icon02{background-color: var(--color-red-100);}
.mypageBox .mypageInfoList li:nth-child(2) a .icon02 svg{color: var(--color-red-600);}
.mypageBox .mypageInfoList li:nth-child(2) a strong{color: var(--color-red-600);}
.mypageBox .mypageInfoList li:nth-child(3) a::after{background-color: var(--color-green-50); }
.mypageBox .mypageInfoList li:nth-child(3) a .icon01 svg{color: var(--color-green-600);}
.mypageBox .mypageInfoList li:nth-child(3) a .icon02{background-color: var(--color-green-100);}
.mypageBox .mypageInfoList li:nth-child(3) a .icon02 svg{color: var(--color-green-600);}
.mypageBox .mypageInfoList li:nth-child(3) a strong{color: var(--color-green-600);}
.mypageBox .mypageInfoList li:nth-child(4) a::after{background-color: var(--color-orange-50); }
.mypageBox .mypageInfoList li:nth-child(4) a .icon01 svg{color: var(--color-orange-600);}
.mypageBox .mypageInfoList li:nth-child(4) a .icon02{background-color: var(--color-orange-100);}
.mypageBox .mypageInfoList li:nth-child(4) a .icon02 svg{color: var(--color-orange-600);}
.mypageBox .mypageInfoList li:nth-child(4) a strong{color: var(--color-orange-600);}
.mypageBox .mypageInfoList li:nth-child(5) a::after{background-color: var(--color-red-50); }
.mypageBox .mypageInfoList li:nth-child(5) a .icon01 svg{color: var(--color-red-600);}
.mypageBox .mypageInfoList li:nth-child(5) a .icon02{background-color: var(--color-red-100);}
.mypageBox .mypageInfoList li:nth-child(5) a .icon02 svg{color: var(--color-red-600);}
.mypageBox .mypageInfoList li:nth-child(5) a strong{color: var(--color-red-600);}
.mypageBox .mypageInfoList li:nth-child(6) a::after{background-color: var(--color-purple-50); }
.mypageBox .mypageInfoList li:nth-child(6) a .icon01 svg{color: var(--color-purple-600);}
.mypageBox .mypageInfoList li:nth-child(6) a .icon02{background-color: var(--color-purple-100);}
.mypageBox .mypageInfoList li:nth-child(6) a .icon02 svg{color: var(--color-purple-600);}
.mypageBox .mypageInfoList li:nth-child(6) a strong{color: var(--color-purple-600);}


.mypageBox .tabLayoutBox{display: flex; gap: 0 30px; min-height: calc(100vh - 200px)}
.mypageBox .mypageContentBox{width: 100%;}
.mypageBox aside{flex-shrink: 0; padding: 15px;  width: 251px; background-color: var(--color-white); border: 1px solid var(--border); border-radius: 10px;} 
.mypageBox aside .depth01 li .tabBtn{padding: 11px 10px; position: relative; display: flex; gap: 0 7px; width: 100%; font-size: 12px; font-weight: 700; border-radius: 5px;}
.mypageBox aside .depth01 li .tabBtn svg{width: 14px; height: 14px;}
.mypageBox aside .depth01 li .tabBtn::after {content: ""; position: absolute;top:50%; transform: translateY(-50%); right: 20px; width: 4px; height: 4px; transform: translateY(-50%) rotate(45deg); border-right: 1px solid var(--color-gray-400);; border-bottom: 1px solid var(--color-gray-400);}
.mypageBox aside .depth01 li .tabBtn:hover{background-color: var(--color-gray-50);}
.mypageBox aside .depth02{display: none; padding: 8px 0;}
.mypageBox aside .depth02.active{display: block;}
.mypageBox aside .depth02 li{padding-left:27px;}
.mypageBox aside .depth02 li .btn{display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px  7px  7px 10px; font-size: 12px; font-weight: 500; text-align: left; border-radius: 5px;}
.mypageBox aside .depth02 li .btn .count{width: 19px; height: 19px; line-height: 19px; background-color: var(--color-gray-100); border-radius: 50%; text-align: center; border-radius: 50%; font-size: 11px; font-weight: 300; color: var(--color-gray-600);}
.mypageBox aside .depth02 li .btn:hover{background-color: var(--color-gray-50); color: var(--color-primary);}
.mypageBox aside .depth02 li .btn.active{background-color: var(--color-primary); color: #fff;}
.mypageBox .campaignBox .tabList{margin-bottom: 35px; display: flex; gap: 7px;}
.mypageBox .campaignBox .tabList li .btn{display: block; width: 100%; position: relative; padding: 8px 20px; font-size: 12px; border-radius: 8px; background-color: var(--color-white); border: 1px solid var(--border); transition: all .15s;}
.mypageBox .campaignBox .tabList li .btn:hover{background-color: var(--color-orange-400); color: #fff; box-shadow: 3px 3px 5px rgba(0,0,0,.1);}
.mypageBox .campaignBox .tabList li .btn.active{background-color: var(--color-orange-400); color: #fff; border: 0; box-shadow: 3px 3px 5px rgba(0,0,0,.1);}
.mypageBox .campaignBox .tabList li .btn.active::after{border-color: #fff;}
.mypageBox .campaignBox .campaignList{display: flex; flex-wrap: wrap; gap: 20px 1.5%}
.mypageBox .campaignBox .campaignList li a{height: 100%; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background-color: var(--color-white); transition: all .15s;}
.mypageBox .campaignBox .campaignList li a:hover{transform: scale(1.05); box-shadow: 0 5px 10px rgba(0,0,0,.1);}
.mypageBox .campaignBox .campaignList li a .imgBox{position: relative; height: 154px;}
.mypageBox .campaignBox .campaignList li a .imgBox.noImg{background-color: var(--color-gray-100);}
.mypageBox .campaignBox .campaignList li a .imgBox.noImg::after{width: 88px; height: 88px; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../images/sub/noimg.svg)no-repeat center;}
.mypageBox .campaignBox .campaignList li a .imgBox .day{ padding: 4px 9px;  position: absolute; top:10px; left:10px; line-height: 1; border-radius: 5px; background-color: var(--color-black); color: var(--color-white); font-size: 11px;}
.mypageBox .campaignBox .campaignList li a .imgBox .day.deadline{background-color: var(--color-red-500);}
.mypageBox .campaignBox .campaignList li a .imgBox .state{padding: 4px 9px;  position: absolute; top:10px; right:10px; line-height: 1; border-radius: 5px; font-size: 11px;} 
.mypageBox .campaignBox .campaignList li a .imgBox .state.applying{color: var(--color-yellow-700); background-color: var(--color-yellow-100); border: 1px solid var(--color-yellow-200);}
.mypageBox .campaignBox .campaignList li a .imgBox .state.waiting{color: var(--color-blue-700);
    background-color: var(--color-blue-100); border: 1px solid var(--color-blue-200);}
.mypageBox .campaignBox .campaignList li a .imgBox .state.notReg{color: var(--color-orange-700); background-color: var(--color-orange-100); border-color: var(--color-orange-200);}
.mypageBox .campaignBox .campaignList li a .imgBox .state.reg{color: var(--color-green-700); background-color: var(--color-green-100); border-color: var(--color-green-200);}
.mypageBox .campaignBox .campaignList li a .imgBox .state.modification{color: var(--color-red-700); border-color: var(--color-red-200); background-color: var(--color-red-100);}
.mypageBox .campaignBox .campaignList li a .imgBox .state.complete{color: var(--color-gray-700); border-color: var(--color-gray-200); background-color: var(--color-gray-100);}
.mypageBox .campaignBox .campaignList li a .imgBox img{display: block; width: 100%; height: 100%; object-fit: cover;}
.mypageBox .campaignBox .campaignList li a .textBox{padding: 15px 15px 35px; background-color: var(--color-white);}
.mypageBox .campaignBox .campaignList li a .textBox h4{margin-bottom: 6px; font-size: 14px;}
.mypageBox .infoList01{margin-bottom: 7px; display: flex; flex-wrap: wrap; gap: 0 6px;}
.mypageBox .infoList01 span{padding: 5px; border-radius: 5px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); line-height: 1;}
.mypageBox .infoList01 span.experience01{color: var(--color-green-700); background-color: var(--color-green-100); border-color: var(--color-green-200);}
.mypageBox .infoList01 span.experience02{color: var(--color-blue-700); background-color: var(--color-blue-100); border-color: var(--color-blue-200);}
.mypageBox .infoList01 span.review{color: var(--color-orange-700); background-color: var(--color-orange-100); border-color: var(--color-orange-200);}
.mypageBox .infoList01 .shortForm{color: var(--color-purple-700); background-color: var(--color-purple-100); border-color: var(--color-purple-200);}

/*Custom*/
.mypageBox .paymentBox .pointsHistoryList li a .pointBox.save strong{color: var(--color-green-600); !important;}
.mypageBox .paymentBox .pointsHistoryList li a .pointBox.use strong{color: var(--color-red-600) !important;}
.mypageBox .infoList01 span.saveExperience{color: var(--color-green-700); background-color: var(--color-green-100); border-color: var(--color-green-200);}
.mypageBox .infoList01 span.saveEvent{color: var(--color-blue-700); background-color: var(--color-blue-100); border-color: var(--color-blue-200);}
.mypageBox .infoList01 span.saveEtc{color: var(--color-orange-700); background-color: var(--color-orange-100); border-color: var(--color-orange-200);}
.mypageBox .infoList01 span.saveShare{color: var(--color-purple-700); background-color: var(--color-purple-100); border-color: var(--color-purple-200);}

.mypageBox .infoList01 span.use{color: var(--color-red-700); background-color: var(--color-red-100); border-color: var(--color-red-200);}
.mypageBox .infoList01 span.useEtc{color: var(--color-yellow-700); background-color: var(--color-yellow-100); border-color: var(--color-yellow-200);}
.mypageBox .infoList01 span.useExp{color: var(--color-purple-700); background-color: var(--color-purple-100); border-color: var(--color-purple-200);}


.mypageBox .campaignBox .campaignList li a .btn{margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 0 10px; padding: 5px 10px; width: 100%; font-size: 12px;text-align: center; border-radius: 5px; }
.mypageBox .campaignBox .campaignList li a .btn:last-child{margin-bottom: 0;}
.mypageBox .campaignBox .campaignList li a .btn.downloadBtn{border: 1px solid var(--color-blue-500);  color: var(--color-blue-600); background-color: var(--color-white);}
.mypageBox .campaignBox .campaignList li a .btn.submitBtn{background-color: var(--color-primary);  color: var(--color-white); }
.mypageBox .campaignBox .campaignList li a .btn.modificationBtn{border: 1px solid var(--color-primary);  color: var(--color-primary); background-color: var(--color-white);}
.mypageBox .campaignBox .campaignList li a .btn svg{margin-top: -1px; width: 14px; height: 14px;}
.mypageBox .campaignBox .campaignList li a .textBox .text{margin-bottom: 5px; display: block; font-size: 12px;}
.mypageBox .campaignBox .campaignList li a .textBox .infoBox{margin-bottom: 10px; padding: 10px; display: flex; justify-content: space-between; background-color: var(--color-blue-50); border-radius: 5px;}
.mypageBox .campaignBox .campaignList li a .textBox .infoBox em{font-size: 12px;}
.mypageBox .campaignBox .campaignList li a .textBox .infoBox strong{font-size: 14px; color: var(--color-primary);}
.mypageBox .campaignBox .campaignList li a .textBox .infoList02{margin-bottom: 10px;}
.mypageBox .campaignBox .campaignList li a .textBox .infoList02 li{margin-bottom: 6px; display: flex; justify-content: space-between;}
.mypageBox .campaignBox .campaignList li a .textBox .infoList02 li:last-child{margin-bottom: 0;}
.mypageBox .campaignBox .campaignList li a .textBox .infoList02 li span,
.mypageBox .campaignBox .campaignList li a .textBox .infoList02 li em{font-size: 12px;}
.mypageBox .campaignBox .campaignList li a .textBox .infoList02 li span{display: flex; align-items: center; gap:0 5px}
.mypageBox .campaignBox .campaignList li a .textBox .infoList02 li span svg{margin-top: -1px; width: 11px; height: 11px;}
.mypageBox .campaignBox .campaignList li a .textBox .infoList02 li em.deadline{color: var(--color-red-600);}
.mypageBox .campaignBox .campaignList li a .textBox .infoList02 li em.selected{color: var(--color-green-600); }
.mypageBox .campaignBox .campaignList li a .modificationBox{margin-bottom: 8px; padding: 10px; background-color: var(--color-red-50); border: 1px solid var(--color-red-200); border-radius: 8px;}
.mypageBox .campaignBox .campaignList li a .modificationBox h4{display: flex; align-items: center; gap: 0 5px; color: var(--color-red-800); font-size: 12px; }     
.mypageBox .campaignBox .campaignList li a .modificationBox h4 svg{width: 14px; height: 14px;}
.mypageBox .campaignBox .campaignList li a .modificationBox p{padding-left: 20px; font-size: 12px; color: var(--color-red-700);}
.mypageBox .paymentBox .topPointBox{margin-bottom: 20px; display: flex; gap: 0 20px;}
.mypageBox .paymentBox .topPointBox .box01{background-color: var(--color-blue-100); border: 2px solid var(--color-blue-200);}
.mypageBox .paymentBox .topPointBox .box01 strong{color: var(--color-primary);}
/* Custom */
/*.mypageBox .paymentBox .topPointBox .box02{background-color: var(--color-green-100); border: 2px solid var(--color-green-200)}*/
/*.mypageBox .paymentBox .topPointBox .box02 strong{color: var(--color-green-500);}*/
.mypageBox .paymentBox .topPointBox .box02{background-color: var(--color-red-100); border: 2px solid var(--color-red-200)}
.mypageBox .paymentBox .topPointBox .box02 strong{color: var(--color-red-500);}
.mypageBox .paymentBox .topPointBox .box{position: relative; min-height: 197px; padding: 20px; flex: 1; border-radius: 10px;  overflow: hidden;}
.mypageBox .paymentBox .topPointBox .box::after{content: ''; position: absolute; top:0; right:0; width: 100px; height: 100px; border-radius: 50%;}
.mypageBox .paymentBox .topPointBox .box01::after{content: ''; position: absolute; top:-30px; right:-30px; width: 100px; height: 100px; border-radius: 50%; background-color: var(--color-blue-200);}
/* Custom */
/*.mypageBox .paymentBox .topPointBox .box02::after{content: ''; position: absolute; top:-30px; right:-30px; width: 100px; height: 100px; border-radius: 50%; background-color: var(--color-green-200);}*/
.mypageBox .paymentBox .topPointBox .box02::after{content: ''; position: absolute; top:-30px; right:-30px; width: 100px; height: 100px; border-radius: 50%; background-color: var(--color-red-200);}
.mypageBox .paymentBox .topPointBox .box .comBtn{height: 28px; line-height: 28px; font-size: 12px;}
.mypageBox .paymentBox .topPointBox .box h4{margin-bottom: 5px; font-size: 12px; text-align: center; font-weight: 500;}
.mypageBox .paymentBox .topPointBox .box strong{display: block; margin-bottom: 10px; font-size: 21px;  text-align: center;}
.mypageBox .paymentBox .topPointBox .box strong span{font-size: 16px; font-weight: 500;}
.mypageBox .paymentBox .topPointBox .box .icon{position: relative; margin: 0 auto 15px; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;}
.mypageBox .paymentBox .topPointBox .box .icon svg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 21px; height: 21px; color: var(--color-white);}
.mypageBox .paymentBox .topPointBox .box01 .icon{background-color: var(--color-primary);}
/* Custom */
/*.mypageBox .paymentBox .topPointBox .box02 .icon{background-color: var(--color-green-500);}*/
.mypageBox .paymentBox .topPointBox .box02 .icon{background-color: var(--color-red-500);}
.mypageBox .paymentBox .paymentHistoryBox{padding: 20px; background-color: var(--color-white); border: 1px solid var(--border); border-radius: 10px;}
.mypageBox .paymentBox .paymentHistoryBox h5{display: flex; align-items: center; gap: 0 7px; margin-bottom: 30px; font-weight: 400;}
.mypageBox .paymentBox .paymentHistoryBox h5 svg{width: 18px; height: 18px;}
.mypageBox .paymentBox .pointsHistoryList li a{padding: 15px 5px; position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--border); border-radius: 8px; transition: all .15s;}
.mypageBox .paymentBox .pointsHistoryList li a .leftBox{display: flex; align-items: center; } 
.mypageBox .paymentBox .pointsHistoryList li a .imgBox{margin-right: 15px; flex-shrink: 0;width: 56px; height: 56px; border-radius: 5px; overflow: hidden;}
.mypageBox .paymentBox .pointsHistoryList li a .imgBox img{display: block; width: 100%; height: 100%; object-fit: cover;}
.mypageBox .paymentBox .pointsHistoryList li a .textBox{width: 100%;}
.mypageBox .paymentBox .pointsHistoryList li a .textBox h6{font-size: 14px;}
.mypageBox .paymentBox .pointsHistoryList li a .textBox .infoList{display: flex; flex-wrap: wrap; gap: 5px 30px;}
.mypageBox .paymentBox .pointsHistoryList li a .textBox .infoList li{font-size: 11px; color: var(--color-gray-400);}
.mypageBox .paymentBox .pointsHistoryList li a .pointBox{flex-shrink: 0; display: flex; flex-direction: column; gap: 3px 0; text-align: right;}
.mypageBox .paymentBox .pointsHistoryList li a .pointBox strong{color: var(--color-green-600); font-size: 14px;}
.mypageBox .paymentBox .pointsHistoryList li a .pointBox span{font-size: 11px; font-weight: 300;}
.mypageBox .paymentBox .pointsHistoryList li a:hover{background-color: var(--color-gray-100);}
.mypageBox .paymentBox .withdrawalList > li{padding: 15px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border);}
.mypageBox .paymentBox .withdrawalList > li .textBox .stateBox{margin-bottom: 7px; display: flex; align-items: center; gap: 0 9px;}
.mypageBox .paymentBox .withdrawalList > li .textBox .stateBox span{font-size: 14px;}
.mypageBox .paymentBox .withdrawalList > li .textBox .stateBox em{font-size: 11px;}
.mypageBox .paymentBox .withdrawalList > li .textBox .infoList li{font-size: 12px; font-weight: 300;}
.mypageBox .paymentBox .withdrawalList > li .amountBox{text-align: right;}
.mypageBox .paymentBox .withdrawalList > li .amountBox strong{display: block; font-size: 14px;}
.mypageBox .paymentBox .withdrawalList > li .amountBox em{display: block; font-size: 11px; font-weight: 300;}
.mypageBox .paymentBox .withdrawalList li.paymentCompleted .textBox .stateBox em{padding:5px; background-color: var(--color-primary); color: var(--color-white); border-radius: 5px; line-height: 1;}
.mypageBox .paymentBox .withdrawalList li.paymentCompleted .amountBox strong{color: var(--color-primary);}
.mypageBox .paymentBox .withdrawalList li.withdrawalPending .textBox .stateBox em{padding:5px; background-color: var(--color-red-600); color: var(--color-white); border-radius: 5px; line-height: 1;}
.mypageBox .paymentBox .withdrawalList li.withdrawalPending .amountBox strong{color: var(--color-red-600);}
.mypageBox .paymentBox .withdrawalList li.withdrawalPending .textBox .stateBox .check{font-size: 11px; color: var(--color-gray-500);}
.mypageBox .paymentBox .withdrawalList li.withdrawalRequest .textBox .stateBox em{padding:5px; background-color: var(--color-gray-200); color: var(--color-gray-600); border-radius: 5px; line-height: 1;}
.mypageBox .paymentBox .withdrawalList li.withdrawalRequest .amountBox strong{    color: var(--color-orange-600);}
.mypageBox .accountBox .accountContentBox{margin-bottom: 20px; position: relative; padding: 20px; background-color: var(--color-white); border-radius: 10px; border: 1px solid var(--border); }
.mypageBox .accountBox .accountContentBox h4{display: flex; align-items: center; gap: 0 10px; margin-bottom: 30px; font-size: 14px; font-weight: 400;}
.mypageBox .accountBox .accountContentBox .layoutBox{display: flex; gap: 0 20px;}
.mypageBox .accountBox .accountContentBox .layoutBox .infoList{width: 100%;}
.mypageBox .accountBox .accountContentBox .infoList{margin-bottom: 15px;}
.mypageBox .accountBox .accountContentBox .infoList li{margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;}
.mypageBox .accountBox .accountContentBox .infoList li:last-child{margin-bottom: 0;}
.mypageBox .accountBox .accountContentBox .infoList li span{font-size: 14px; font-weight: 600;}
.mypageBox .accountBox .accountContentBox .infoList li em{font-size: 14px; font-weight: 300;}
.mypageBox .accountBox .accountContentBox .profileImgBox{flex-shrink: 0; position: relative; width: 70px; height: 70px; border-radius: 50%; background-color: var(--color-primary);}
.mypageBox .accountBox .accountContentBox .profileImgBox img{display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mypageBox .accountBox .accountContentBox .profileImgBox .btn{position: absolute; bottom: 0; right:0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); z-index: 99999; background-color: var(--color-white);}
.mypageBox .accountBox .accountContentBox .profileImgBox .btn svg{width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mypageBox .accountBox .accountContentBox .settingBtn{padding: 8px 10px; display: flex; align-items: center; gap: 0 10px; position: absolute; top:20px; right:20px; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; line-height: 1;}
.mypageBox .accountBox .accountContentBox .settingBtn svg{width: 14px; height: 14px;}
.mypageBox .accountBox .accountContentBox .infoText{padding: 10px; border-radius: 5px; border: 1px solid var(--border); background-color: var(--color-gray-100); font-size: 12px;}
.mypageBox .accountBox .accountContentBox .snsList > li{margin-bottom: 15px;}
.mypageBox .accountBox .accountContentBox .snsList li:last-child{margin-bottom: 0;}
.mypageBox .accountBox .accountContentBox .snsList li a{position: relative; padding: 15px 20px; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px;}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox{margin-right: 10px; position: relative; width: 35px; height: 35px; border-radius: 50%; overflow: hidden;}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox svg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.youtube{background-color: var(--color-red-500);}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.youtube svg{width: 18px; height: 18px; color: var(--color-white);}

/*Custom*/
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.facebook{background-color: var(--color-blue-600);}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.facebook svg{width: 18px; height: 18px; color: var(--color-white);}

.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.instagram{background: linear-gradient(45deg, #fdf497 0%, #fd5949 45%, #d6249f 65%, #285AEB 100%);}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.instagram svg{width: 18px; height: 18px; color: var(--color-white);}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.naver{background-color: var(--color-green-500);}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.naver svg{width: 18px; height: 18px; color: var(--color-white);}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.tiktok{background-color: var(--color-black);}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.tiktok .tiktokText{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-white); line-height: 1; font-size: 14px; font-weight: 700;}
.mypageBox .accountBox .accountContentBox .snsList li a .imgBox.tiktok svg{width: 18px; height: 18px; color: var(--color-white);}
.mypageBox .accountBox .accountContentBox .addBtn{padding: 7px 10px; display: flex; align-items: center; gap: 0 10px; position: absolute; top:20px; right:20px; font-size: 12px; border-radius: 5px; background-color: var(--color-primary); color: var(--color-white);}
.mypageBox .accountBox .accountContentBox .addBtn svg{width: 15px; height: 15px;}
.mypageBox .accountBox .accountContentBox .snsList li a .textBox h5{font-size: 14px;}
.mypageBox .accountBox .accountContentBox .snsList li a .textBox .snsInfoList{display: flex; align-items: center; gap: 0 20px;}
.mypageBox .accountBox .accountContentBox .snsList li a .textBox .snsInfoList li{position: relative; font-size: 12px; font-weight: 300;}
.mypageBox .accountBox .accountContentBox .snsList li a .textBox .snsInfoList li::after{content: ''; position: absolute; top:8px; right:-10px; width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-gray-400);}
.mypageBox .accountBox .accountContentBox .snsList li a .textBox .snsInfoList li:last-child:after{display: none;}
.mypageBox .accountBox .accountContentBox .snsList li a .textBox .snsInfoList li.followers svg{margin-left: 5px; width: 11px; height: 11px;}
.mypageBox .accountBox .accountContentBox .snsList li a .delBtn{width: 34px; height: 28px; position: absolute; top: 50%; transform: translateY(-50%); right:20px; border: 1px solid var(--border); border-radius: 3px; background-color: var(--color-white);}
.mypageBox .accountBox .accountContentBox .snsList li a .delBtn svg{width: 14px; height: 14px; color: var(--color-red-500);}
.mypageBox .accountBox .accountContentBox svg{margin-top: -2px; width: 18px; height: 18px;}
.mypageBox .accountBox .accountContentBox .alarmList > li{margin-bottom: 15px;}
.mypageBox .accountBox .accountContentBox .alarmList > li:last-child{margin-bottom: 15px;}
.mypageBox .accountBox .accountContentBox .alarmList li a.new::after{content:''; position: absolute; top:13px;
right:13px; width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-primary);}
.mypageBox .accountBox .accountContentBox .alarmList li a svg{width: 18px; height: 18px; margin-top: 1px;}
.mypageBox .accountBox .accountContentBox .alarmList li a{position: relative; padding: 15px 15px 10px 15px; display: block; border: 1px solid var(--border); border-radius: 10px;}
.mypageBox .accountBox .accountContentBox .alarmList li a .title{margin-bottom: 3px; font-size: 12px; font-weight: 600;}
.mypageBox .accountBox .accountContentBox .alarmList li a .text{margin-bottom: 5px; font-size: 12px;}
.mypageBox .accountBox .accountContentBox .alarmList li a .alarmListInfoList{display: flex; gap: 0 20px;}
.mypageBox .accountBox .accountContentBox .alarmList li a .alarmListInfoList li{position: relative; font-size: 11px; font-weight: 300;}
.mypageBox .accountBox .accountContentBox .alarmList li a .alarmListInfoList li::after{content: ''; position: absolute; top:6px; right:-11px; width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-gray-400);}
.mypageBox .accountBox .accountContentBox .alarmList li a .alarmListInfoList li:last-child:after{display: none;}
.mypageBox .accountBox .accountContentBox .alarmList li a.new{background-color: var(--color-blue-50); border: 1px solid var(--color-blue-100);}
.mypageBox .accountBox .accountContentBox .alarmList li a .layoutBox{display: flex; gap: 0 9px;}
.mypageBox .accountBox .accountContentBox .alarmList li a.approval svg{color: var(--color-green-600);}
.mypageBox .accountBox .accountContentBox .alarmList li a.deadline svg{color: var(--color-orange-600);}
.mypageBox .accountBox .accountContentBox .alarmList li a.registration svg{color: var(--color-blue-600)}
.mypageBox .accountBox .accountContentBox .alarmList li a.payment svg{color: var(--color-red-600);}
.mypageBox .accountBox .accountContentBox .alarmList li a.update svg{color: var(--color-gray-600);}
.mypageBox .serviceCenterBox .box:last-child{margin-bottom: 0;}
.mypageBox .serviceCenterBox .box{margin-bottom: 15px; padding: 20px; border-radius: 10px; border: 1px solid var(--border); background-color: var(--color-white);}
.mypageBox .serviceCenterBox .box .topBox{margin-bottom: 10px;}
.mypageBox .serviceCenterBox .box .topBox h4{ margin-bottom: 5px; display: flex; align-items: center; gap: 0 10px; font-size: 14px;}
.mypageBox .serviceCenterBox .box .topBox h4 svg{margin-top: -2px; width: 18px; height: 18px;}
.mypageBox .serviceCenterBox .box .topBox p{font-size: 14px; font-weight: 300;}
.mypageBox .serviceCenterBox .formLayoutBox{display: flex; gap: 0 20px;}
.mypageBox .serviceCenterBox .formLayoutBox .formBox{flex: 1;}
.mypageBox .serviceCenterBox .formBox .label{font-size: 12px; font-weight: 700;}
.mypageBox .serviceCenterBox .formBox .textareaBox textarea{height: 128px; background-color: var(--color-white); border: 1px solid var(--border);}
.mypageBox .serviceCenterBox .formBox .textareaBox textarea::placeholder{font-size: 14px;}
.mypageBox .serviceCenterBox .btnBox{display: flex; justify-content: flex-end; gap: 0 5px;}
.mypageBox .serviceCenterBox .btnBox .btn{padding: 5px 10px; font-size: 12px; border-radius: 5px;}
.mypageBox .serviceCenterBox .btnBox .btn.resetBtn{border: 1px solid var(--border);}
.mypageBox .serviceCenterBox .btnBox .btn.addBtn{background-color: var(--color-primary); color: var(--color-white);}
.mypageBox .serviceCenterBox .inquiryList > li{margin-bottom: 15px; padding: 10px 10px 10px 15px; border: 1px solid var(--border); border-radius: 10px;}
.mypageBox .serviceCenterBox .inquiryList > li:last-child{margin-bottom: 0;}
.mypageBox .serviceCenterBox .inquiryList li .layoutBox{margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;}
.mypageBox .serviceCenterBox .inquiryList li h5{font-size: 14px;}
.mypageBox .serviceCenterBox .inquiryList li .stateBox{display: flex; gap: 0 8px;}
.mypageBox .serviceCenterBox .inquiryList li .stateBox span{font-weight: 500;}
.mypageBox .serviceCenterBox .inquiryList li .stateBox span,
.mypageBox .serviceCenterBox .inquiryList li .stateBox em{ padding: 3px 5px; font-size: 11px; border-radius: 3px; line-height: 1;}
.mypageBox .serviceCenterBox .inquiryList li .stateBox .answerComplete{background-color: var(--color-green-100); color: var(--color-green-700);}
.mypageBox .serviceCenterBox .inquiryList li .stateBox .waiting{background-color: var(--color-orange-100); color: var(--color-orange-700);}
.mypageBox .serviceCenterBox .inquiryList li .stateBox em{border: 1px solid var(--border); font-weight: 700;}
.mypageBox .serviceCenterBox .inquiryList li p{margin-bottom: 8px; font-size: 12px;}
.mypageBox .serviceCenterBox .inquiryList li .infoList{display: flex; gap: 0 25px; margin-bottom: 12px;}
.mypageBox .serviceCenterBox .inquiryList li .infoList li{position: relative; font-size: 11px; font-weight: 300;}
.mypageBox .serviceCenterBox .inquiryList li .infoList li::after{content: ''; position: absolute; top:6px; right:-15px; width: 3px; height: 3px; border-radius: 50%; background-color: var(--color-gray-500);}
.mypageBox .serviceCenterBox .inquiryList li .infoList li:last-child:after{display: none;}
.mypageBox .serviceCenterBox .inquiryList li .answerBox{padding: 10px 10px 5px; border: 1px solid var(--color-blue-100); background-color: var(--color-blue-50); border-radius: 10px;}
.mypageBox .serviceCenterBox .inquiryList li .answerBox svg{width: 14px; height: 14px;}
.mypageBox .serviceCenterBox .inquiryList li .answerBox span{margin-bottom: 5px; display: flex; align-items: center; gap: 0 6px; font-size: 12px; color: var(--color-blue-900);}
.mypageBox .serviceCenterBox .inquiryList li .answerBox P{color: var(--color-blue-800); font-size: 12px;}
.mypageBox .serviceCenterBox .noticeBox .list{display: block; padding: 20px; position: relative; transition: all .15s;}
.mypageBox .serviceCenterBox .noticeInfoBox{margin-bottom: 10px; display: flex; gap: 0 8px;}
.mypageBox .serviceCenterBox .noticeInfoBox span{padding: 3px 5px; border-radius: 3px; line-height: 1; font-size: 12px; border-radius: 5px;}
.mypageBox .serviceCenterBox .noticeInfoBox span.info01{border: 1px solid var(--border); font-weight: 700; font-size: 12px;}
.mypageBox .serviceCenterBox .noticeInfoBox span.importance{background-color: var(--color-red-100); color: var(--color-red-700);}
.mypageBox .serviceCenterBox .noticeBox .list .layoutBox{display: flex; gap:0 15px;}
.mypageBox .serviceCenterBox .noticeBox .list .imgBox{flex-shrink: 0; width: 70px; height: 70px; border-radius: 5px; overflow: hidden;}
.mypageBox .serviceCenterBox .noticeBox .list .imgBox img{display: block; width: 100%; height: 100%; object-fit: cover;}
.mypageBox .serviceCenterBox .noticeBox .list .textBox h4{margin-bottom: 5px; font-size: 14px;}
.mypageBox .serviceCenterBox .noticeBox .list .textBox p{font-size: 12px;}
.mypageBox .serviceCenterBox .noticeBox .list .bottomBox .date{font-size: 12px; font-weight: 300;}
.mypageBox .serviceCenterBox .noticeBox .list .bottomBox .readMore{font-size: 14px; color: var(--color-primary); font-weight: 700;}
/*Custom*/
/*.mypageBox .serviceCenterBox .noticeBox .list .bottomBox{margin:20px 0 0 85px; display: flex; justify-content: space-between;}*/
.mypageBox .serviceCenterBox .noticeBox .list .bottomBox{margin:20px 0 0 0; display: flex; justify-content: space-between;}
.mypageBox .serviceCenterBox .noticeBox .list .view{display: flex; align-items: center; gap: 0 5px; position: absolute; top:20px; right:20px; font-size: 11px;}
.mypageBox .serviceCenterBox .noticeBox .list .view svg{width: 11px; height: 11px;}
.mypageBox .serviceCenterBox .noticeBox .list:hover{box-shadow: 0 5px 7px rgba(0,0,0,.1);}
.mypageBox .serviceCenterBox .noticeBox{padding: 0;}
.mypageBox .serviceCenterBox .noticeDetailBox{background-color: var(--color-white); border-radius: 10px; border: 1px solid var(--border); overflow: hidden;}
.mypageBox .serviceCenterBox .noticeDetailBox .imgBox{height: 280px; overflow: hidden;}
.mypageBox .serviceCenterBox .noticeDetailBox .imgBox img{display: block; width: 100%; height: 100%; object-fit: cover;}
.mypageBox .serviceCenterBox .noticeDetailBox .textBox{padding: 35px 20px 20px;}
.mypageBox .serviceCenterBox .noticeDetailBox .topBox h4{color: var(--color-gray-900); font-size: 26px;}
.mypageBox .serviceCenterBox .noticeDetailBox .noticeViewBox{ padding: 9px 0; display: flex; gap: 0 20px; border: 1px solid var(--border); border-width: 1px 0;}
.mypageBox .serviceCenterBox .noticeDetailBox .noticeViewBox span{font-size: 12px; font-weight: 300;}
.mypageBox .serviceCenterBox .noticeDetailBox p{padding: 25px 0 30px; border-bottom: 1px solid var(--border); font-size: 14px;}
.mypageBox .serviceCenterBox .noticeDetailBox .btnBox{padding: 15px 0; display: flex; justify-content: space-between;}
.mypageBox .serviceCenterBox .noticeDetailBox .btnBox .layoutBox{display: flex; gap: 0 10px;}
.mypageBox .serviceCenterBox .noticeDetailBox .btnBox .btn{padding: 7px 12px; display: flex; align-items: center; gap: 0 5px; font-size: 12px; font-weight: 600; transition: all .15s;}
.mypageBox .serviceCenterBox .noticeDetailBox .btnBox .btn:hover{background-color: var(--color-gray-200);}
.mypageBox .serviceCenterBox .noticeDetailBox .btnBox .btn svg{width: 14px; height: 14px;}
.mypageBox .serviceCenterBox .questionList li{margin-bottom: 10px;  background-color: var(--color-white); border-radius: 10px; border: 1px solid var(--border);}
.mypageBox .serviceCenterBox .questionList li:last-child{margin-bottom: 0;}
.mypageBox .serviceCenterBox .questionList li .questionBtn:hover{background-color: var(--color-gray-50);}
.mypageBox .serviceCenterBox .questionList li .questionBtn{padding: 20px 93px 20px 20px; position: relative; display: flex; align-items: center; gap: 0 10px; width: 100%;  text-align: left; transition: all .15s;}
.mypageBox .serviceCenterBox .questionList li .questionBtn::after {content: ""; position: absolute;
top:50%; right: 20px; transform: translateY(-50%); width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); border-right: 1px solid var(--color-gray-400); border-bottom: 1px solid var(--color-gray-400);}
.mypageBox .serviceCenterBox .questionList li .questionBtn .icon{flex-shrink: 0; position: relative; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; overflow: hidden;  background-color: var(--color-blue-100); color: var(--color-primary); text-align: center; font-size: 14px; font-weight: 800;}
.mypageBox .serviceCenterBox .questionList li .questionBtn .textBox{width: 100%;}
.mypageBox .serviceCenterBox .questionList li .questionBtn .textBox .title{font-size: 14px; font-weight: 600;}
.mypageBox .serviceCenterBox .questionList li .questionBtn .textBox .badgeBox{margin-bottom: 5px; display: flex; gap: 0 5px;}
.mypageBox .serviceCenterBox .questionList li .questionBtn .textBox .badgeBox span{padding: 3px 5px; line-height: 1; font-size: 11px;}
.mypageBox .serviceCenterBox .questionList li .questionBtn .textBox .badgeBox .badge01{border: 1px solid var(--border);}
.mypageBox .serviceCenterBox .questionList li .questionBtn .textBox .badgeBox .badge02{background-color: var(--color-green-100); color: var(--color-green-700);}
.mypageBox .serviceCenterBox .questionList li .questionBtn .view{position: absolute; top:50%; right:45px; transform: translateY(-50%); display: flex; align-items: center; gap: 0 5px; font-size: 11px; font-weight: 300;}
.mypageBox .serviceCenterBox .questionList li .questionBtn .view svg{margin-top: -2px; width: 11px; height: 11px;}
.mypageBox .serviceCenterBox .questionList li .answerBox{display: none; padding: 20px; border-top: 1px solid var(--border);}
.mypageBox .serviceCenterBox .questionList li .answerBox .layoutBox{display: flex; gap: 0 10px;}
.mypageBox .serviceCenterBox .questionList li .answerBox .icon{flex-shrink: 0; position: relative; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; overflow: hidden; background-color: var(--color-green-100); color: var(--color-green-700); text-align: center; font-size: 14px; font-weight: 800;}
.mypageBox .serviceCenterBox .questionList li .answerBox .textBox p{font-size: 12px;}
.mypageBox .serviceCenterBox .questionList li .creationDateBox{margin-top: 15px; display: flex; align-items: center; justify-content: space-between;}
.mypageBox .serviceCenterBox .questionList li .creationDateBox .date{font-size: 12px;}
.mypageBox .serviceCenterBox .questionList li .creationDateBox .btnBox{display: flex; gap: 0 20px;}
.mypageBox .serviceCenterBox .questionList li .creationDateBox .btnBox .btn{padding: 0 5px; display: flex; gap: 0 5px;}
.mypageBox .serviceCenterBox .questionList li .creationDateBox .btnBox .btn svg{width: 14px; height: 14px;}
.mypageBox .serviceCenterBox .questionList li .creationDateBox .btnBox .btn.helpfulBtn{color: var(--color-green-600);}
.mypageBox .tab{margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px;}
.mypageBox .tab li .tabBtn{padding: 5px 9px; border: 1px solid var(--border); text-align: center; background-color: var(--color-white); font-size: 12px; font-weight: 700; border-radius: 5px;}
.mypageBox .tab li .tabBtn:hover{background-color: var(--color-gray-50);}
.mypageBox .tab li .tabBtn.active{background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); }

@media (max-width: 1024px){

  .mypageBox .campaignBox .tabList{flex-wrap: wrap; gap: 10px 1.5%;}
  .mypageBox .campaignBox .tabList li{width: 32.3%;}
  .mypageBox .mypageInfoList{flex-wrap: wrap; gap: 10px 1%;}
  .mypageBox .mypageInfoList li{flex: none; width: 32.66%;}
  .mypageBox .tab{gap: 5px;}
  .mypageBox .topBox h3{font-size: 18px;}

  .mypageBox .paymentBox .pointsHistoryList li a{flex-direction: column; align-items: flex-start; gap: 7px 0;}
  .mypageBox .paymentBox .pointsHistoryList li a .leftBox{width: 100%;}
  .mypageBox .paymentBox .pointsHistoryList li a .pointBox{width: 100%;}
  .mypageBox .paymentBox .pointsHistoryList li a .textBox .infoList{gap: 3px 15px;}

}

@media (max-width: 767px){

  .mypageBox .tabLayoutBox{flex-direction: column; gap: 30px;}
  .mypageBox aside{width: 100%;}

  .mypageBox .mypageInfoList li a strong,
  .mypageBox .paymentBox .topPointBox .box strong{font-size: 18px;}
  .mypageBox .serviceCenterBox .formLayoutBox{flex-direction: column; gap: 6px 0;}

}

@media (max-width: 576px){

  .mypageBox .mypageInfoList{flex-wrap: wrap; gap: 5px 1.5%;}
  .mypageBox .mypageInfoList li{flex: none; width: 49.25%;}

}

@media (max-width: 480px){

  .mypageBox .campaignBox .tabList{gap: 5px 1.5%;}
  .mypageBox .campaignBox .tabList li{width: 49.2%;}

  .mypageBox .paymentBox .paymentHistoryBox h5{margin-bottom: 10px;}
  .mypageBox .paymentBox .pointsHistoryList li a .leftBox{flex-direction: column; gap: 20px 0;}
  .mypageBox .paymentBox .pointsHistoryList li a .imgBox{width: 100%; height: 160px;}
  .mypageBox .paymentBox .topPointBox{flex-direction: column; gap: 10px 0;}
  .mypageBox .paymentBox .topPointBox .box{padding: 20px 20px 10px; min-height: auto;}

  .mypageBox .mypageInfoList li a{padding: 25px 20px 20px; height: auto;}

  .mypageBox .paymentBox .withdrawalList > li .textBox .stateBox{flex-direction: column; align-items: flex-start; gap: 5px 0;}
  .mypageBox .accountBox .accountContentBox .layoutBox{flex-direction: column; align-items: center; gap: 30px 0;}
  .mypageBox .accountBox .accountContentBox .addBtn{position: static; margin-top: 10px;}
  .mypageBox .accountBox .accountContentBox h4{margin-bottom: 15px;}
  .mypageBox .accountBox .accountContentBox .alarmList > li .layoutBox{flex-direction: row; align-items: flex-start;}
  .mypageBox .accountBox .accountContentBox .alarmList li a .text{margin-bottom: 12px;}
  .mypageBox .accountBox .accountContentBox .alarmList li a .alarmListInfoList{flex-direction: column; gap:2px 0;}
  .mypageBox .accountBox .accountContentBox .alarmList li a .alarmListInfoList li::after{display: none;}
  .mypageBox .serviceCenterBox .box .topBox p{font-size: 12px;}

  .mypageBox .serviceCenterBox .noticeBox .list .layoutBox{flex-direction: column; gap: 20px 0;}
  .mypageBox .serviceCenterBox .noticeBox .list .imgBox{width: 100%; height: 170px;}
  .mypageBox .serviceCenterBox .noticeBox .list .view{position: static; margin-top: 30px;}
  .mypageBox .serviceCenterBox .noticeBox .list .bottomBox{margin: 20px 0 10px;}
  .mypageBox .serviceCenterBox .noticeBox .list .bottomBox .readMore{font-size: 12px;}

  .mypageBox .serviceCenterBox .questionList li .creationDateBox{flex-direction: column; align-items: flex-start; gap: 10px 0;}

}

/* 뒤로가기 */
.returnLink{margin: 0 0 20px; padding: 7px; display: inline-flex; align-items: center; gap: 0 10px; font-size: 12px; border-radius: 5px; transition: all .15s;}
.returnLink svg{width: 14px; height: 14px;}
.returnLink:hover{background-color: var(--color-gray-200);}

/* pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 40px;
}

.pagination .page-item a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid var(--border);
  color: var(--color-gray-600);
  font-size: 14px;
  font-weight: 500;
  transition: all .3s;
}

.pagination .page-item a:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.pagination .page-item.active a {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pagination .page-item.disabled a {
  background-color: var(--color-gray-100);
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.pagination .page-item.disabled a:hover {
  background-color: var(--color-gray-100);
  border-color: var(--border);
}

/* no_data */
.no_data {
    padding: 100px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--color-white);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.no_data h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-800);
}