@charset "utf-8";
/* 폰트 */
/* Pretendard */
@font-face { font-family: "Pretendard"; font-weight: 900; font-display: swap; font-style: normal; src: local(Pretendard-Black) url("/font/Pretendard-Black.woff2") format("font-woff2"); } 
@font-face { font-family: "Pretendard"; font-weight: 800; font-display: swap; font-style: normal; src: local(Pretendard-ExtraBold) url("/font/Pretendard-ExtraBold.woff2") format("font-woff2"); } 
@font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap; font-style: normal; src: local(Pretendard-Bold) url("/font/Pretendard-Bold.woff2") format("font-woff2"); } 
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; font-style: normal; src: local(Pretendard-SemiBold) url("/font/Pretendard-SemiBold.woff2") format("font-woff2"); } 
@font-face { font-family: "Pretendard"; font-weight: 500; font-display: swap; font-style: normal; src: local(Pretendard-Medium) url("/font/Pretendard-Medium.woff2") format("font-woff2"); } 
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; font-style: normal; src: local(Pretendard-Regular) url("/font/Pretendard-Regular.woff2") format("font-woff2"); } 
@font-face { font-family: "Pretendard"; font-weight: 300; font-display: swap; font-style: normal; src: local(Pretendard-Light) url("/font/Pretendard-Light.woff2") format("font-woff2"); } 
@font-face { font-family: "Pretendard"; font-weight: 200; font-display: swap; font-style: normal; src: local(Pretendard-ExtraLight) url("/font/Pretendard-ExtraLight.woff2") format("font-woff2"); } 
@font-face { font-family: "Pretendard"; font-weight: 100; font-display: swap; font-style: normal; src: local(Pretendard-Thin) url("/font/Pretendard-Thin.woff2") format("font-woff2"); } 

* { font-family: "Pretendard"; font-weight: 400; box-sizing: border-box; margin: 0; padding: 0; line-height: 1; letter-spacing: -0.75px; } 
fieldset { margin: 0; padding: 0; border: 0; } 
button { padding: 0; border: 0; background: none; cursor: pointer; } 
html,
body { height: 100%; } 
html { /*min-width:320px; max-width:100%; */
 scroll-behavior: smooth; } 
h1,
h2,
h3,
h4,
h5,
h6 { margin: 0; } 
dl,
ul,
ol { margin: 0; padding: 0; list-style: none; } 
dd { margin: 0; } 
a { color: #242a38; text-decoration: none; } 
a,
button { color: #000; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; } 
input,
textarea { border-radius: 0; appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; border: 1px solid #ddd; } 
input:focus { border-radius: 0; outline: none; } 
input::placeholder,
textarea::placeholder { font-size: 14px; letter-spacing: -0.5px; color: #999999; } 
button { border-radius: 0; color: #777; cursor: pointer; } 
label { cursor: pointer; } 
select { border-radius: 0; -webkit-border-radius: 0; } 

.clear{clear: both;}

p { margin: 0; } 
i,
em,
address,
cite { font-style: normal; } 
hr { display: none; } 

*:hover,
*:focus,
*:checked { outline: none; -webkit-tap-highlight-color: transparent; } 
body { font-family: pretendard; } 
:-ms-input-placeholder { color: #888; } 
::-ms-input-placeholder { color: #888; } 
::-webkit-scrollbar { width: 5px; } 
::-webkit-scrollbar-track { background: #f1f1f1; } 
::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #b4b3af; } 

.srll { padding: 0 5px 0 0; overflow-y: scroll; box-sizing: border-box; } 
.srll::-webkit-scrollbar { width: 5px; } 
.srll::-webkit-scrollbar-thumb { height: 17%; background-color: rgb(229 229 229 / 100%); border-radius: 2px; } 
.srll::-webkit-scrollbar-track { background-color: #f5f5f5; } 

.wrll { padding: 0 0 10px 0; overflow-x: scroll; box-sizing: border-box; } 
.wrll::-webkit-scrollbar { height: 5px; } 
.wrll::-webkit-scrollbar-thumb { height: 17%; background-color: rgb(229 229 229 / 100%); border-radius: 2px; } 
.wrll::-webkit-scrollbar-track { background-color: #f5f5f5; } 

/* IE의 경우 */
input::-ms-clear,
input::-ms-reveal { opacity: 0; position: absolute; right: 0; } 
/* 크롬의 경우 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration { opacity: 0; position: absolute; right: 0; } 


.skip { display: none !important; } 
body.act { overflow: hidden; } 

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

@keyframes blowUpModalTwo { 
 0% { transform: scale(1); opacity: 1; } 
 100% { transform: scale(0); opacity: 0; } 
 }

@-webkit-keyframes bottomin { 
 from { bottom: -100%; } 
 to { bottom: 0; } 
 }

@keyframes bottomin { 
 from { bottom: -100%; } 
 to { bottom: 0; } 
 }

@-webkit-keyframes bottomout { 
 from { bottom: 0; } 
 to { bottom: -100%; } 
 }

@keyframes bottomout { 
 from { bottom: 0; } 
 to { bottom: -100%; } 
 }

@-webkit-keyframes fadein { 
 from { bottom: 0; opacity: 0; } 
 to { bottom: 100px; opacity: 1; } 
 }

@keyframes fadein { 
 from { bottom: 0; opacity: 0; } 
 to { bottom: 100px; opacity: 1; } 
 }

@-webkit-keyframes fadeout { 
 from { bottom: 100px; opacity: 1; } 
 to { bottom: 0; opacity: 0; } 
 }

@keyframes fadeout { 
 from { bottom: 100px; opacity: 1; } 
 to { bottom: 0; opacity: 0; } 
 }

@-webkit-keyframes zoomIn { 
 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 
 50% { opacity: 1; } 
 }

@keyframes zoomIn { 
 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 
 50% { opacity: 1; } 
 }

@keyframes fade-in { 
 from { opacity: 0; } 
 to { opacity: 1; } 
 }

.w50 { width: 50px !important; } 
.w60 { width: 60px !important; } 
.w70 { width: 70px !important; } 
.w80 { width: 80px !important; } 
.w90 { width: 90px !important; } 
.w100 { width: 100px !important; } 
.w120 { width: 120px !important; } 
.w130 { width: 130px !important; } 
.w140 { width: 140px !important; } 
.w150 { width: 150px !important; } 
.w160 { width: 160px !important; } 
.w170 { width: 170px !important; } 
.w180 { width: 180px !important; } 
.w200 { width: 200px !important; } 
.w250 { width: 250px !important; } 
.w300 { width: 300px !important; } 
.w320 { width: 320px !important; } 
.w350 { width: 350px !important; } 
.w360 { width: 360px !important; } 
.w400 { width: 400px !important; } 
.w500 { width: 500px !important; } 

.minw100 { min-width: 100px !important; } 

.maxw130 { max-width: 130px !important; } 
.maxw150 { max-width: 150px !important; } 
.maxw220 { max-width: 220px !important; } 
.maxw240 { max-width: 240px !important; } 
.maxw250 { max-width: 250px !important; } 
.maxw270 { max-width: 270px !important; } 
.maxw400 { max-width: 400px !important; } 
.maxw410 { max-width: 410px !important; }
.maxw430 { max-width: 430px !important;}
.maxw480 { max-width: 480px !important; } 
.maxw510 { max-width: 510px !important; } 
.maxw500 { max-width: 500px !important; } 
.maxw520 { max-width: 520px !important; } 
.maxw560 { max-width: 560px !important; } 
.maxw580 { max-width: 580px !important; } 
.maxw590 { max-width: 590px !important; } 
.maxw600 { max-width: 600px !important; } 
.maxw740 { max-width: 740px !important; } 
.maxw800 { max-width: 800px !important; } 
.maxw900 { max-width: 900px !important; } 
.maxw930 { max-width: 930px !important; } 
.maxw970 { max-width: 970px !important; } 
.maxw1000 { max-width: 1000px !important; } 

.w9p { width: 9% !important; } 
.w10p { width: 10% !important; } 
.w15p { width: 15% !important; } 
.w20p { width: 20% !important; } 
.w30p { width: 30% !important; } 
.w40p { width: 40% !important; } 
.w50p { width: 50% !important; } 
.w60p { width: 60% !important; } 
.w70p { width: 70% !important; } 
.w80p { width: 80% !important; } 
.w90p { width: 90% !important; } 
.w100p { width: 100% !important; }

/* 이미지 모달 스타일 */
.image-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; opacity: 0; transition: opacity 0.3s ease;}
.image-modal.active {display: flex;align-items: center;justify-content: center;opacity: 1;}
.image-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); cursor: pointer;}
.image-modal-content {position: relative; max-width: 90%; max-height: 90%; z-index: 10001; animation: zoomIn 0.3s ease;}
.image-modal-content img { max-width: 100%; max-height: 80vh; width: auto; height: auto; display: block; margin: 0 auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); border-radius: 4px;}
.image-modal-close { position: absolute; top: -50px; right: 0; border: none; border-radius: 50%; color: #fff; font-size: 30px; line-height: 1;cursor: pointer;display: flex; align-items: center; justify-content: center; transition:all 0.3s; z-index: 10002;}
.image-modal-close:hover{color: #257DD7;}
.image-modal-close span { display: block; line-height: 1;}

/* 모달이 열렸을 때 body 스크롤 방지 */
body.modal-open { overflow: hidden;}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .image-modal-content { max-width: 95%; max-height: 95%;}
  .image-modal-close {top: -35px; font-size: 24px; }
}