/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css");

* {font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}

.point {color:#c8b75b !important;}
.point-white {color:#ffffff !important;}
.point2 {color:#ff1c1c !important;}
.font-nb {font-weight:300 !important;}
.point-under {text-decoration:underline;}
.text-link {color:#fff !important; text-decoration:underline;}
.text-link2 {color:#c8b75b !important; text-decoration:underline;}

.form-total-price {text-align:right; font-size:1.25em;}
.form-total-price strong {font-weight:800; text-decoration:underline;}

.infiniteBounce {
  animation-name: bounceUp;
  animation-duration: 2s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
}

.infiniteZoomInOut {
  animation-name: zoomIn;
  animation-duration: 2s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
}

@keyframes moveRighttoLeft {
  0% {
    transform: translateX(0%);
  }

  50% {
    transform: translateX(-36%);
  }

  100% {
    transform: translateX(0%);
  }
}

@keyframes moveLeftoRight {
  0% {
    transform: translateX(-36%);
  }

  50% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-36%);
  }
}

@keyframes bounceUp {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}



.row .col-12 .item {margin-top:-10px;}
.row .col-12:first-child .item {margin-top:-20px;}

.item label {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    display: block;
    background-color: #fff;
    padding: 30px 45px;
    text-align: center;
    margin-bottom: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    position: relative;
    border: 1px solid #d9e1e6;
    font-size: 12px;
    font-size: 0.825rem;
    color: #777;
    cursor: pointer
}

.item label.label-goldcard {
	border:3px solid #E4C312;
	
}
.item label.label-goldcard strong {}

@media (max-width: 991px) {
    .item label {
        padding:30px;
		margin:0 2vw;
    }
}

.item label strong {
    text-transform: uppercase;
    display: block;
    font-size: 1rem;
    color: #111;
	font-weight:800;
	padding-bottom:5px;
}

.item label:hover {
    -webkit-box-shadow: 0 2px 40px #e0e5f0;
    -moz-box-shadow: 0 2px 40px #e0e5f0;
    box-shadow: 0 2px 40px #e0e5f0;
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px)
}

.item label img {
    display: block;
    margin: 0 auto 5px;
	height:50px;
}

@media (max-width: 767px) {
    .item label img {
        height: 35px;
    }
}

.item label span {
    border: 4px solid #d9e1e6;
    display: block;
    margin: 0 auto 15px;
    width: 130px;
    height: 130px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    padding: 4px;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.item label figure {
    position: relative;
    width: 114px;
    height: 114px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    margin: 0;
    overflow: hidden
}

.item label figure img {
    width: 130px;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden
}

.item input[type=checkbox]:not(old),.item input[type=radio]:not(old) {
    visibility: hidden
}

.item input[type=checkbox]:not(old):checked+label,.item input[type=radio]:not(old):checked+label,.item input[type=checkbox]:not(old):checked+span+label,.item input[type=radio]:not(old):checked+span+label {
    display: block;
    border: 1px solid #c8b75b;
    -webkit-box-shadow: 0 2px 40px #e0e5f0;
    -moz-box-shadow: 0 2px 40px #e0e5f0;
    box-shadow: 0 2px 40px #e0e5f0
}

.item input[type=checkbox]:not(old):checked+label:before,.item input[type=radio]:not(old):checked+label:before,.item input[type=checkbox]:not(old):checked+span+label:before,.item input[type=radio]:not(old):checked+span+label:before {
    font-family: "fontello";
    content: "\e81b";
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 24px;
    font-size: 1.5rem;
    color: #c8b75b
}

.item input[type=checkbox]:not(old):checked+label span,.item input[type=radio]:not(old):checked+label span,.item input[type=checkbox]:not(old):checked+span+label span,.item input[type=radio]:not(old):checked+span+label span {
    border: 4px solid #c8b75b
}

.item input[type=checkbox]:not(old):checked+label figure img,.item input[type=radio]:not(old):checked+label figure img,.item input[type=checkbox]:not(old):checked+span+label figure img,.item input[type=radio]:not(old):checked+span+label figure img {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    -moz-transform: translate(-50%, -50%) scale(1.2);
    -ms-transform: translate(-50%, -50%) scale(1.2);
    -o-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2)
}

.respect {text-align:center;}
.respect .label-txt {
  font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size:14px;
  position:relative;
  top:-30px;
  font-weight:500;
}
.respect .react {
  --r: 100px;
  display: inline-grid;
  cursor: pointer;
  width: var(--r);
  height: var(--r);
  border-radius: 50%;
  margin: calc(var(--r) / 3);
  line-height: var(--r);
  text-align: center;
  transform: rotate(0);
}

.respect .react i:before {
  content: attr(data-icon);
  grid-area: 1/1;
  font-style: normal;
  font-size: calc(0.6 * var(--r));
}

.respect .react i {
  filter: grayscale(100%);
  transform: scale(1);
  grid-area: 1/1;
  display: inherit;
  transition: transform 0.6s cubic-bezier(0.5, -12, 1, -12);
}
.respect .react:hover {
  transform: rotate(0.1deg);
  transition: transform 0.25s cubic-bezier(0.5, 400, 0.5, -400);
}
.respect .react:before {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  border: solid #E4C312 calc(var(--r) / 2);
  transform: scale(0);
}
.respect .react:after,
.respect .react i:after {
  content: "";
  grid-area: 1/1;
  margin: calc(var(--r) / -2);
  --c1: radial-gradient(#FFF825 50%, #0000 60%);
  --c2: radial-gradient(#E4C312 50%, #0000 60%);
  background: var(--c1), var(--c1), var(--c1), var(--c1), var(--c2), var(--c2),
    var(--c2), var(--c2);
  background-size: calc(var(--r) / 6) calc(var(--r) / 6);
  background-position: calc(50% - var(--r) / 2) calc(50% - var(--r) / 2),
    calc(50% + var(--r) / 2) calc(50% - var(--r) / 2),
    calc(50% - var(--r) / 2) calc(50% + var(--r) / 2),
    calc(50% + var(--r) / 2) calc(50% + var(--r) / 2),
    calc(50% + 0px) calc(50% + var(--r) * 0.707),
    calc(50% + var(--r) * 0.707) calc(50% + 0px),
    calc(50% - var(--r) * 0.707) calc(50% + 0px),
    calc(50% + 0px) calc(50% - var(--r) * 0.707);
  background-repeat: no-repeat;
  transform: scale(0);
}
.respect .react i:after {
  background-size: calc(var(--r) / 8) calc(var(--r) / 8);
  transform: rotate(60deg) scale(0);
}

.respect input:checked + .react i {
  filter: grayscale(0);
  transform: scale(0.95);
  transition: filter 0.5s 0.5s, transform 1s cubic-bezier(0, 26.67, 0.5, 26.67);
}
.respect input:checked + .react:before {
  border-width: 0;
  transform: scale(1);
  transition: transform 0.5s, border-width 0.5s 0.5s;
}
.respect input:checked + .react:after,
.respect input:checked + .react i:after {
  transform: scale(1);
  opacity: 0;
  background-size: 0 0;
  transition: transform 0.5s 0.5s, opacity 0.4s 0.9s, background-size 0.5s 0.9s;
}
.respect input:checked + .react i:after {
  transform: rotate(55deg) scale(1);
}

.respect input {
  position: absolute;
  visibility: hidden;
  clip-path: inset(50%);
}