@charset "utf-8";
.inner {width: calc(100% - 150px); max-width: 1521px; margin: 0 auto;}
.roman {font-family: "Times New Roman", "Georgia", "Noto Serif KR", serif; font-weight: 700; letter-spacing: 0.04em;}
.gradient {background: linear-gradient(135deg, #1362EB, #5290FB, #65F665);}
.gradient_opacity {background: linear-gradient(135deg, #1362eb65, #5290fb65, #65F66565);}
.gradient2 {background: linear-gradient(135deg, #00FF00, #81F681);}
span.green {color: #65F665;}
span.blue {color: #1362EB;}
span.black {color: #000;}
label.required {padding-right: 10px;}
/* 인풋 */
.input-list {width: 100%; display: flex; align-items: center; flex-direction: column; row-gap: 20px;}
textarea, input[type="tel"], input[type="email"], input[type="number"], input[type="date"], input[type="text"], input[type="password"] {width: 100%; height: 50px; padding: 0 24px; border: 1px solid #D8D8D8; border-radius: 10px; font-size: 16px; font-weight: 500; color: #474747;}
textarea:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="text"]:focus, input[type="password"]:focus {outline: none; border: 2px solid #1362EB;}
textarea {padding: 24px; min-height: 200px; resize: none;}
/* 체크박스 */
.custom-chk {display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 500; color: #626262;}
.custom-chk input[type="checkbox"] {display: none;}
.custom-chk label {cursor: pointer; display: flex; align-items: center; gap: 10px; flex-shrink: 0;}
.custom-chk label span {flex-shrink: 0; background-image: url(../img/check_icon.svg); background-repeat: no-repeat; background-position: center center; display: inline-block; width: 28px; height: 28px; background-color: transparent; border: 2px solid rgba(19, 98, 235, 0.6); position: relative; transition: all 0.2s ease; border-radius: 5px;}
.custom-chk input[type="checkbox"]:checked + label span {background-color: #3C65ED; border: 1px solid #3C65ED;}

/* 슬라이드 아이콘 */
.scroll-icon-wrap{opacity:1; display: flex; flex-direction: column; align-items: center; row-gap: 10px; justify-content: center; transition: all 0.8s ease;}
.scroll-icon-wrap.fade {opacity: 0;}
.scroll-icon-wrap .scroll-icon{position: relative; display: block; width:80px; height:80px; border:1px solid #fff; border-radius:50%;}
.scroll-icon-wrap .scroll-icon .line{position: absolute; width:3px; height:40px; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:3px; overflow:hidden;}
.scroll-icon-wrap .scroll-icon .line span{display: block; width:100%; height:100%; animation: scroll-icon 2.5s linear infinite; transition: all 0.8s ease; transform:translateY(-100%);background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);}
.scroll-icon-wrap .scroll-icon i{position: absolute; top:calc(50% - 10px); left:50%; transform:translate(-50%, -50%); animation: upDown 2.5s ease-in-out infinite; z-index:1;}
.scroll-icon-wrap .txt{font-size: 14px; font-weight: 500; color: #fff;}

/* 버튼 */
.btn-wrap {display: flex; align-items: center; justify-content: center; column-gap: 30px;}
.circle-btn {width: 44px; height: 44px; border-radius: 50%; background-color: #000; display: flex; align-items: center; justify-content: center;}
.square-btn{flex-shrink: 0; width: fit-content; padding: 15px 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; column-gap: 10px; font-size: 22px; font-weight: 600;}
.round-btn{text-align: center; flex-shrink: 0; width: fit-content; line-height: 24px; padding: 10px 26px; border-radius: 50px; display: flex; align-items: center; column-gap: 10px; font-size: 18px; font-weight: 500;}
.round-btn.mini {transition: background-color 0.2s; padding: 10px 11px; border: 1px solid #fff; color: #fff;}
.round-btn.mini:hover {background-color: rgba(255,255,255,0.2);}
.round-btn.white {border: 1px solid #fff; background-color: #fff; color: #000; font-weight: 600}
.round-btn.white:hover {transition: background-color 0.3s, color 0.3s; background-color: transparent; color: #fff;}
.mini-btn {height: 40px; border-radius: 30px; padding: 10px 20px; display: flex; align-items: center; column-gap: 10px; font-size: 16px; font-weight: 500;}
.gradient-outline-btn {position: relative; color: #fff;;}
.round-btn.black {background-color: #000; color: #fff;}
.square-btn.blue,
.round-btn.blue {background-color: #1362EB; color: #fff;}
.square-btn.gradient,
.round-btn.gradient {color: #fff;}
.square-btn.gray,
.round-btn.gray {color: #696969; background-color: #F5F5F5; border: 1px solid #CACACA;}
.square-btn.darkblue,
.round-btn.darkblue {color: #fff;background-color: #003BA2; border: 1px solid #5290FB;}
.square-btn.kakao {background-color: #FEE800; color: #371C1D; padding: 10px 20px; font-size: 18px; font-weight: 500;}
.square-btn.mypage {background-color: #5290FB; color: #fff; padding: 10px 20px; font-size: 18px; font-weight: 500;}
/* .gradient-outline-btn .gradient-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;} */
.gradient-outline-btn .gradient-box{display: none;}
.gradient-outline-btn::after {z-index: -1; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border-radius: 50px; padding: 2px; background: linear-gradient(135deg, #1362EB, #5290FB, #65F665); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.gradient-outline-btn::before {transition: background-color 0.2s; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border-radius: 50px; padding: 2px; background-color: rgba(0, 0, 0, 0.5); z-index: -1;}
.gradient-outline-btn:hover::before {background-color: rgba(0, 0, 0, 1);}
.gradient-line-white{transition: background 0.2s; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #1362EB, #5290FB, #65F665) border-box; border: 2px solid transparent; padding: 8px 20px;}
.gradient-line-white:hover {color: #fff; background:  linear-gradient(135deg, #1362EB, #5290FB, #65F665) padding-box, linear-gradient(135deg, #1362EB, #5290FB, #65F665) border-box;}

/* 페이징 */
.pg_wrap,.pg {text-align: center;}
.pg {display: flex; column-gap: 0.5rem; justify-content: center; align-items: center;}
.pg_current, .pg_page:not(.pg_start):not(.pg_prev):not(.pg_end):not(.pg_next) {display:inline-block; width: 1rem; height: 1rem; border-radius: 50%; line-height: 1rem; font-size: 0;}
.pg_current {background-color: var(--primary);}
.pg_page:not(.pg_start):not(.pg_prev):not(.pg_end):not(.pg_next) {background-color: var(--bg); transition: background 0.3s;}
.pg_page:not(.pg_start):not(.pg_prev):not(.pg_end):not(.pg_next):hover {background-color: var(--primary);}
.pg_start,.pg_prev,.pg_end,.pg_next {width: 1.5rem; height: 1.5rem; background-size: contain; font-size: 0; opacity: 0.5; transition:  opacity 0.3s;}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {opacity: 1;}
.pg_start {background-image:url('../img/pg_start.svg');}
.pg_prev {background-image:url('../img/pg_prev.svg');}
.pg_end {background-image:url('../img/pg_end.svg');}
.pg_next {background-image:url('../img/pg_next.svg');}

/* 모달 */
.modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; z-index: 9999;}
.modal.is-open {display: flex;}
.modal-bg {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);}
.modal-box {position: relative; background: #fff; width: 90%; max-width: 560px; border-radius: 10px; padding: 30px 24px; z-index: 10; max-height: 85vh; overflow-y: auto; border: 1px solid #D9D9D9;}
.modal-box .modal-title {text-align: center; font-size: 20px; font-weight: 600; margin-bottom: 20px;}
.modal-content {scrollbar-width: auto; scrollbar-color: #9ABFFF #fff; --scrollbar-size: 16px; overflow-y: auto; font-size: 16px; color: #474747; padding: 25px; max-height: 316px; border: 1px solid #CACACA; border-radius: 10px;}
.modal-box .btn-wrap {margin-top: 20px;}
.modal-box .btn-wrap .round-btn {width: calc(50% - 12px); justify-content: center;}

/* 애니메이션 요소 */
/* 텍스트 스크롤 애니메이션 */
.scrolling-text {
  animation: scroll-right 20s linear infinite;
}
@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}
/* 나타나기 */
.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/* 말풍선채우기 */
@keyframes fillWithBounce {
  0% {
      width: 0;
  }
  70% {
      width: 108%; /* 목표점을 넘어서 감 */
  }
  85% {
      width: 96%; /* 살짝 되돌아옴 */
  }
  95% {
      width: 102%; /* 다시 살짝 넘어감 */
  }
  100% {
      width: 100%; /* 최종 위치 */
  }
}
/* 스크롤 */
@keyframes scroll-icon {
	0% {
		opacity: 0;
		transform:translateY(calc(-100% - 10px))
	}
	10% {
		opacity: 1;
		transform:translateY(calc(-100% - 10px))
	}
	100% {
		opacity: 1;
		transform:translateY(100%)
	}
}
@keyframes upDown {
	0% {
		opacity: 0;
		top:calc(50% - 10px);
	}
	10% {
		opacity: 1;
		top:calc(50% - 10px);
	}
	80% {
		opacity: 1;
		top:calc(50% + 20px);
	}
	100% {
		opacity: 0;
		top:calc(50% + 20px);
	}
}
/* 글자 나타나기 */
.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
/* 흔들림 */
.vibrate-1 {
	-webkit-animation: vibrate-1 5s linear infinite both;
	        animation: vibrate-1 5s linear infinite both;
}
.vibrate-1:hover,
.card:hover .vibrate-1 {
	animation-play-state: paused;
}
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
.vibrate-2 {
	-webkit-animation: vibrate-2 5s linear infinite both;
	        animation: vibrate-2 5s linear infinite both;
}
.vibrate-2:hover {
	animation-play-state: paused;
}
@-webkit-keyframes vibrate-2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(7px, -7px);
            transform: translate(7px, -7px);
  }
  40% {
    -webkit-transform: translate(7px, 7px);
            transform: translate(7px, 7px);
  }
  60% {
    -webkit-transform: translate(-7px, 7px);
            transform: translate(-7px, 7px);
  }
  80% {
    -webkit-transform: translate(-7px, -7px);
            transform: translate(-7px, -7px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(7px, -7px);
            transform: translate(7px, -7px);
  }
  40% {
    -webkit-transform: translate(7px, 7px);
            transform: translate(7px, 7px);
  }
  60% {
    -webkit-transform: translate(-7px, 7px);
            transform: translate(-7px, 7px);
  }
  80% {
    -webkit-transform: translate(-7px, -7px);
            transform: translate(-7px, -7px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
/* 젤리느낌 */
.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@media screen and (max-width: 1440px) {
    .inner {width: calc(100% - 120px);}
}
@media screen and (max-width: 1280px) {
    .inner {width: calc(100% - 100px);}
}
@media screen and (max-width: 1024px) {
    .inner {width: calc(100% - 80px);}
}
@media screen and (max-width: 768px) {
    .inner {width: calc(100% - 60px);}
    .round-btn {font-size: 16px;}
    .modal-box .modal-title {font-size: 18px;}
    .modal-content {font-size: 14px; padding: 20px;}
    .custom-chk {font-size: 15px;}
    .custom-chk label span {width: 24px; height: 24px;}
}
@media screen and (max-width: 480px) {
    .inner {width: calc(100% - 30px);}
}