/* 전 php 공통으로 쓰이는 body header footer만 들어있습니다. */

html {letter-spacing: -0.5px; font-size:62.5%; font-display: swap;  scroll-behavior: smooth;; /* 부모 적용 */ word-break:keep-all;}
h1,h2,h3,h4,h5,h6 {line-height: 1.2;}

.boundary {width:100%; max-width: 1740px; margin: 0 auto;}
.inner_boundary {width:100%; max-width: 1560px; margin: 0 auto;}
.sub_inner_boundary {width:100%; max-width: 1440px; margin: 0 auto;}
.bold {font-weight: bold;}
.site-map-wraps {width:100%; height:100vh; position: fixed; top:0; left:0; z-index: 999; display: none; justify-content: center; align-items: center; flex-wrap: wrap; }
.site-map-wraps>ul {width:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; height:100%;}
.site-map-wraps>ul>li{background-color:#fff; position: relative; overflow: hidden; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; flex-basis: 20%; max-width: 20%; height:100%; padding:3rem; border-right:1px solid #ddd; position: relative;}
.site-map-wraps>ul>li:nth-child(1) {animation-duration: 0.3s;}
.site-map-wraps>ul>li:nth-child(2) {animation-duration: 0.6s;}
.site-map-wraps>ul>li:nth-child(3) {animation-duration: 0.9s;}
.site-map-wraps>ul>li:nth-child(4) {animation-duration: 1.2s;}
.site-map-wraps>ul>li:nth-child(5) {animation-duration: 1.5s;}
.site-map-wraps>ul>li::before {content:''; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);  width:100%; height:100%; background-image:url(/assets/images/company-logo.png); background-repeat: no-repeat; background-position: center bottom; opacity: 0; transition: all 0.6s;}
.site-map-wraps>ul>li:hover::before {background-position: right bottom; opacity: 1;}
.site-map-wraps>ul>li>ul {width:100%; height:100%; padding-top:100%;}
.site-map-wraps>ul>li>ul>.menu-name {font-size:2.8rem; font-family: "Play"; font-weight: bold; padding:1rem; position: relative; z-index: 1;}
.site-map-wraps>ul>li>ul>li {position: relative; overflow: hidden;}
.site-map-wraps>ul>li>ul>li>a {font-size:1.8rem; line-height:1; font-weight: 600; padding:1rem; position: relative; width: 100%; z-index: 1; transition: all 0.4s;}
.site-map-wraps>ul>li>ul>li>a::before {content:''; position: absolute; top:0; left:-100%; background-color:black; color:#fff; width: 100%; height: 100%; z-index: -1; transition: all 0.8s;}
.site-map-wraps>ul>li>ul>li:hover>a {color:#fff;}
.site-map-wraps>ul>li>ul>li:hover>a::before {left:0;}
.site-map-wraps>ul>li>ul>li:hover>a>span {position: relative; z-index: 1; color:#fff;}
.site-map-wraps>ul>li>ul>li>a>span {font-size:1.4rem;font-weight: 300; margin-top:0.3rem; transition: all 0.4s;}
.site-map-wraps .close-btn {position: fixed; top: 1rem; right:1rem; width:10rem; height:10rem; background-color:#000000; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; cursor: pointer;}
.site-map-wraps .close-btn>img {max-width: 5rem; transition: all 0.4s; display: block; width:5rem; height:5rem;}
.site-map-wraps .close-btn:hover {background-color:#1E3786;}
.site-map-wraps .close-btn:hover>img {transform: rotate(180deg);}


/*header*/
header {width: 100%; position: fixed; top:0; left:0; z-index: 5; color:#fff; display: flex; justify-content: center; align-items: center; border-bottom:1px solid rgba(255,255,255,0.2); transition: all 0.4s cubic-bezier(.23,1,.32,1); }
header.nav-up{top:-10.5rem;}
header::after {content:''; position: absolute; top:0; left:0; width: 100%; height: 100%;  background: #000; transition: all 0.4s; z-index: -1;}
header:hover::after {height: 100%; background: black;}
header::before {content:''; position: absolute; top:0; left:0; width:100%; height:5px; background-color: #F45708;}
header>.header-boundary {width: calc(100% - 13rem); display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
header>.header-boundary>ul {width:100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
header>.header-boundary>ul>.logo-wrap {width: 12rem; max-width: 12rem; display: flex; justify-content: flex-start; align-items: center;}
header>.header-boundary>ul>.menu-wrap {width: 60%; max-width: 60%; display: flex; justify-content: center; align-items: stretch; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
header>.header-boundary>ul>.menu-wrap>.menu {flex-basis: 15%; max-width: 15%; transition: all 0.8s cubic-bezier(.23,1,.32,1); cursor: pointer;}
header>.header-boundary>ul>.menu-wrap>.menu.active>a {color:#F45708; font-weight: bold;}
header>.header-boundary>ul>.menu-wrap>.menu.active-ing>a {color:#F45708; font-weight: bold;}
header>.header-boundary>ul>.menu-wrap>.menu:hover>a {color:#F45708;}
header>.header-boundary>ul>.menu-wrap>.menu>a {color:#fff; height: auto; display: flex; font-weight: bold; justify-content: center; align-items: center; font-size:1.5rem; display: flex; justify-content: center; align-items: center; gap:0.5rem;  }
header>.header-boundary>ul>.menu-wrap>.menu>a span {display: flex; justify-content: center; align-items: center;}
header>.header-boundary>ul>.menu-wrap>.menu>a span img {max-height: 1.2rem;}
header>.header-boundary>ul>.menu-wrap:hover>.menu {flex-basis: 16.666%; max-width: 16.666%;}
header>.header-boundary>ul>.menu-wrap:hover>.menu>.sub-menu {display: none; visibility: visible; opacity: 1; height: auto;}
header>.header-boundary>ul>.menu-wrap>.menu>.sub-menu {padding:0 2rem 2rem 2rem; display: none; visibility: visible; opacity: 0; transition: all 0.4s cubic-bezier(.23,1,.32,1); width: 100%; position: absolute;}
header>.header-boundary>ul>.menu-wrap>.menu>.sub-menu>li {display: flex; justify-content: center; align-items: center;}
header>.header-boundary>ul>.menu-wrap>.menu>.sub-menu>li>a{color:rgba(255,255,255,0.8); padding:0.5rem 1rem; font-size:1.6rem; font-weight: 300; text-wrap: nowrap;}
header>.header-boundary>ul>.menu-wrap>.menu>.sub-menu>li>a.active {text-decoration: underline; color:#fff;}
header>.header-boundary>ul>.menu-wrap>.menu>.sub-menu>li>a:hover {color:rgba(255,255,255,1);}
.black-bg {width: 100%; height: 100%; position: fixed; top:0; left:0; background-color: rgba(0,0,0,0.7); z-index: 3; display: none;}
.black-site-map {width: 50%; height: 100%; position: fixed; top:0; left:0; background-color: rgba(0,0,0,0.8); z-index: 6; display: none; transition: all 0.4s;}
header>.header-boundary>ul>.menu-wrap #menu-01:hover .sub-menu {position: absolute; top:0; z-index: 2; width: 100%;}

/*드롭다운메뉴*/
header>.drop-menu {position: fixed; top:0%; left:0; color:#000; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;   width:100%; height:auto; z-index: -1; transition: all 0.4s cubic-bezier(.23,1,.32,1); background-color: #fff;}
header>.drop-menu .boundary {width:100%; max-width: 100%; position: fixed; visibility: hidden; opacity: 0; top:0; display: none; opacity: 1; justify-content: space-between; align-items: stretch; padding-top:10rem; transition: all 0.3s; background-color: #fff;}
header>.drop-menu .boundary.on {opacity: 1; top:0; display: flex; visibility: visible;} 
header>.drop-menu .boundary .menu-name {flex-basis: 20%; max-width: 20%; display: flex; justify-content: flex-start; align-items: flex-start; padding:3rem; background-image: url(../../../img/logo-symbol.svg); background-size:20rem; background-position: 90% 5rem; background-repeat: no-repeat;}
header>.drop-menu .boundary .menu-name>div {width: 100%;}
header>.drop-menu .boundary .menu-name>div>h3 {font-size:3rem; line-height: 1.2; margin-bottom: 0.5rem;}
header>.drop-menu .boundary .menu-name>div>p {font-size:1.6rem; color:rgb(0,0,0,0.5); width: 100%;}
header>.drop-menu .boundary .side-menu {flex-basis: 30%; max-width: 30%; display: flex; justify-content: flex-start; align-items: flex-start; border-left:1px solid #ddd; padding:3rem; max-height:50rem; overflow-y: auto; transition: all 0.4s cubic-bezier(.23,1,.32,1); }
header>.drop-menu .boundary .side-menu>ul {flex-basis: 50%; max-width: 50%; position: relative; height: 100%;  position: sticky; top:0; left:0;}
header>.drop-menu .boundary .side-menu>ul>li {width: 100%; font-size:1.8rem;}
header>.drop-menu .boundary .side-menu>ul>li.active>a {color:#fff;}
header>.drop-menu .boundary .side-menu>ul>li.active>a::before {width: 100%;}
header>.drop-menu .boundary .side-menu>ul>li.active>a>span>img {filter: invert(1); transition: all 0.8s cubic-bezier(.23,1,.32,1);}
header>.drop-menu .boundary .side-menu>ul>li.active-ing>a {color:#fff;}
header>.drop-menu .boundary .side-menu>ul>li.active-ing>a::before {width: 100%;}
header>.drop-menu .boundary .side-menu>ul>li.active-ing>a>span>img {filter: invert(1); transition: all 0.8s cubic-bezier(.23,1,.32,1);}
header>.drop-menu .boundary .side-menu>ul>li>a {font-weight: bold; padding-left:2rem; padding-right: 2rem; padding-top:0.5rem; padding-bottom: 0.5rem; font-size:2rem; position: relative; display: flex; justify-content: space-between;}
header>.drop-menu .boundary .side-menu>ul>li>a::before {content:''; position: absolute; left:0; bottom: 0; width:0%; height:100%; background-color: #F45708; transition: all 0.8s cubic-bezier(.23,1,.32,1);}
header>.drop-menu .boundary .side-menu>ul>li>a:hover::before {width: 100%;}
header>.drop-menu .boundary .side-menu>ul>li>a>p {position: relative; z-index: 1; transition: all 0.8s cubic-bezier(.23,1,.32,1);}
header>.drop-menu .boundary .side-menu>ul>li>a>span>img {max-width: 0.8rem; z-index: 1; position: relative;}
header>.drop-menu .boundary .galley-menu {flex-basis: 50%; max-width: 50%; display: flex; justify-content:flex-start; align-items: stretch; border-left:1px solid #ddd; padding:3rem; background-color: #181818;}
header>.drop-menu .boundary .galley-menu>a {flex-basis: 23%; max-width: 23%; margin:1%; margin-top:0; margin-bottom:0; color:#fff; }
header>.drop-menu .boundary .galley-menu>a .img-wrap {margin-bottom: 1rem; overflow: hidden; border:1px solid rgba(255,255,255,0.3);}
header>.drop-menu .boundary .galley-menu>a .img-wrap>img {vertical-align: middle; transition: all 1.2s cubic-bezier(.23,1,.32,1);  }
header>.drop-menu .boundary .galley-menu>a>h4 {font-size:1.6rem; padding-top:0.5rem; padding-bottom:0.5rem; line-height: 1.2;}
header>.drop-menu .boundary .galley-menu>a>p {  font-size: 1.4rem; font-weight: 400;color:rgba(255,255,255,0.7);display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
header>.drop-menu .boundary .galley-menu>a:hover>h4 {color:#fff;}
header>.drop-menu .boundary .galley-menu>a:hover>p {color:#fff;}
header>.drop-menu .boundary .galley-menu>a:hover .img-wrap>img {transform: scale(1.05);}

header>.drop-menu .boundary#menu-drop-01 .galley-menu {background-color:#F45708}
header>.drop-menu .boundary#menu-drop-02 .galley-menu {background-color:#8f3306}
header>.drop-menu .boundary#menu-drop-03 .galley-menu {background-color:#682606;}
header>.drop-menu .boundary#menu-drop-04 .galley-menu {background-color:#2e2e2e;}
header>.drop-menu .boundary#menu-drop-05 .galley-menu {background-color:#141414;}
header>.drop-menu .boundary#menu-drop-06 .galley-menu {background-color:#013300;}

.detail-menu {opacity: 1; transition: all 0.8s cubic-bezier(.23,1,.32,1); flex-basis: 50%; max-width: 50%; width: 100%;}
.detail-menu>ul {display: none;}
.detail-menu>ul>li {color:#000;  font-size:1.6rem; font-weight: 400;}
.detail-menu>ul>li>a {padding:0.5rem 2rem;}
.detail-menu>ul>li>a:hover {color:#F45708;}
.detail-menu>ul>li>a>span {background-color:#F45708; color:#fff; padding:0.2rem 0.5rem; font-size:1.3rem; border-radius: 25rem; margin-left:1rem; font-weight: bold;}

header>.header-boundary>ul>.etc-wrap {display: flex; justify-content: flex-end; align-items: center; gap:3rem;}
.sns-wrap {display: flex; justify-content: center; align-items: center; gap:1.5rem; transition: all 0.4s;}
.sns-wrap>a {position: relative;}
.sns-wrap>a>img {vertical-align: middle;}
.sns-wrap>a>img:last-child {position: absolute; opacity: 0; left:0;}
.sns-wrap>a:hover>img:last-child {position: absolute; z-index: 2; opacity: 1;}


header>.header-boundary>ul>.etc-wrap>.store-wrap {display: flex; justify-content: center; align-items: center;}
header>.header-boundary>ul>.etc-wrap>.store-wrap>a {color:#F45708; padding:0.3rem 2rem; border:1px solid #F45708; border-radius: 0.3rem; font-size:1.4rem; font-weight: bold; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
header>.header-boundary>ul>.etc-wrap>.store-wrap>a:hover {color:#000; background-color: #F45708;}
header>.header-boundary>ul>.etc-wrap>.site-wrap {display: flex; justify-content: center; align-items: center; }
.header-height {height: 10rem;}
header .search-btn {display: flex; justify-content: center; align-items: center; cursor: pointer; width: 3rem;}
header .search-btn:hover {opacity: 0.8;}


header #search-container {width:100%;}
header #search-container .quick-link>a{color:#fff; position: relative; padding-left:20px;}
header #search-container .quick-link>a::before {content:''; width:20px; height:20px; background-image:url(../../../img/arrow_right_alt.svg;)} 


.search-container-wrap {display:none; justify-content: center; align-items: center; width: 100%; height: 100vh;  background-color: rgba(0, 0, 0, 0.6);    position: fixed; top:0; left:0; z-index: 9; }
.search-container-wrap .search-list {width: calc(100% - 2rem); max-width: 80rem; padding:4rem 2rem; background-color: rgba(255, 255, 255, 0.25);  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);  border-radius: 2rem;}
.search-container-wrap .search-list .close-btn {margin-bottom: 3rem; background-color:#fff; width:6rem; height: 6rem; border-radius: 50%; margin: 0 auto; margin-top: 3rem;}
.search-container-wrap .search-list .search {display: flex; justify-content: center; align-items: stretch; flex-wrap: nowrap;}
.search-container-wrap .search-list .search input {width: 100%;  margin-bottom: 2rem; background-color:transparent; border:0; font-size:1.8rem; color:#fff; border-bottom:1px solid #fff; padding:1.6rem;}
.search-container-wrap .search-list .search input::placeholder {color:rgba(255,255,255,0.5);}
.search-container-wrap .search-list .search .btn {width: 5.6rem; height: 5.6rem; background-color:transparent; cursor: pointer; border-radius: 50%; background-color: rgba(255,255,255,0.1);}
.search-container-wrap .search-list .search .btn>img {min-width: 2rem;}
.search-container-wrap .search-list .search .btn:hover {background-color: #F45708;}
.search-container-wrap .search-list .item p {color:#fff; font-size:1.5rem; font-weight: bold;}

.search-container-wrap .search-list ul {display: flex; justify-content: flex-start; align-items: center; gap:0.5rem; margin-top:0.5rem; flex-wrap: wrap;}
.search-container-wrap .search-list ul>li>a {font-size:1.6rem;  color:#fff; background-color:rgba(255,255,255,0.1); border-radius: 20rem; padding:0.25rem 1.6rem; font-weight: 300;}
.search-container-wrap .search-list ul>li>a:hover {background-color:#F45708; color:#fff; }

/* 햄버거 메뉴*/
.navBtn4 { position: relative; display: block; width: 3.2rem; height: 3.2rem; margin: auto; text-align: center; cursor: pointer; z-index: 999;}
.navBtn4 .bar { display: block; position: absolute; top: 0; left: 0; width: inherit; height: 2px; background: #fff; transition: all .325s ease-in-out; -webkit-transition: all .325s ease-in-out; -moz-transition: all .325s ease-in-out;  z-index: 10;}
.navBtn4 .bar:nth-child(1) { top: 0.5rem; left: 0; }
.navBtn4 .bar:nth-child(2) { top: 1.5rem; }
.navBtn4 .bar:nth-child(3) { top: 1.5rem; }
.navBtn4 .bar:nth-child(4) { top: 2.5rem; left: 0; }
.navBtn4.is-open .bar {background-color: #000;}
.navBtn4.is-open .bar:nth-child(1) { left: 40px; opacity: 0; }
.navBtn4.is-open .bar:nth-child(2) { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }
.navBtn4.is-open .bar:nth-child(3) { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); }
.navBtn4.is-open .bar:nth-child(4) { left: -40px; opacity: 0; }

.site-map {width:50%; height: 100vh; padding:12.5rem; background-color: #fff;  position: fixed; top:0; right:-100%; z-index: 5; transition: all 0.4s cubic-bezier(.23,1,.32,1);}
.site-map.on {right:0;}
.site-map .menu-list {padding-top:0;}
.site-map .menu-list>li {margin-bottom: 2rem;}
.site-map .menu-list>li>a {font-size:4rem; font-weight: bold; color:#000; line-height: 1.2; transition: all 0.8s cubic-bezier(.23,1,.32,1);}
.site-map .menu-list>li>a:hover {letter-spacing: 2.5px;}
.site-map .menu-list>li>a+p {font-size:1.6rem; font-weight: 300; color:rgba(0,0,0,0.7);}
.site-map .info-list {width: 100%; color:#000; margin-top:5rem;}
.site-map .info-list>li {font-size:1.6rem; font-weight: 300;}
.site-map .info-list>li>a {color:#F45708; font-size:3rem; font-weight: bold; display: inline-block; }
.site-map .site-map-logo {position: absolute; top:50%; left:50%; transform: translate(-15%,-50%); z-index: -1; opacity: 0.6; pointer-events:none; }

.lang-btn {display: none; justify-content: center; align-items: center; gap:1rem;}
.lang-btn>li {padding:0.5rem 2rem; background-color: rgba(255,255,255,0.1); vertical-align: middle; border-radius: 2rem;}
.lang-btn>li>a {vertical-align: middle;}

body {font-family:'Pretendard', 'sans-serif'; overflow-x:hidden; font-weight:400; color:#000; line-height:1.6; position:relative; padding-top:0; width:100%; max-width:100%; font-size: 62.5% !important; background-color: #f8f8f8; }
::selection {color:#fff; background:darkblue; word-break: keep-all;}

p {word-break: keep-all;}
img{ border:0;}
a{display: block;}

.red {color:red;}
.blue {color:#223F99;}

section{width:100%; position: relative; padding-top:0;}

/* 체크 */
.check{position: relative;}
.check_label { display: inline-block; position: relative;  font-size:1.5rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; padding-left:26px; vertical-align: middle;}
.check_label input {position: absolute;opacity: 0;cursor: pointer; visibility: hidden;}
.checkmark {position: absolute; top:50%; transform:translateY(-50%); left: 0; height: 20px; width: 20px; background-color: #fff; border-radius:50%; border:1px solid #ccc;}
.check_label:hover input ~ .checkmark {background-color: #efefef;}
.check_label input:checked ~ .checkmark {border:1px solid transparent; background-color: #136090;}
.checkmark:after { content: ""; position: absolute; display: none;}
.check_label input:checked ~ .checkmark:after {display: block;}


/* 체크박스 */
.check_label .checkmark:after {left: 6px; top:3px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
/* 라디오 */
.check_label .checkmark.radio:after{ top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: white;}

/* btn class명을 가진 태그 */
.btn{padding-left:16px; padding-right:16px; height:44px; font-size:1.5rem;}
.btn-primary{background-color:#fdab16; color:#fff; border:1px solid transparent;}
.btn-secondary{background-color:#333; color:#fff;}
.btn-default{background-color:#fff; border:1px solid #ccc;}


input:focus, textarea:focus, select:focus, option:focus {outline:none!important;}
*:focus { outline:none; }


/*기본 레이아웃 선언*/
.flex {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.flex_start {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.space-between {justify-content: space-between;}
.flex_column {display: flex; flex-direction: column; width:100%;}
.flex .content {flex-basis: 100%; max-width:100%; margin:0%;}
.flex_2ea {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width:100%;}
.flex_2ea .content {flex-basis: 48%; max-width:48%; margin:1%;}
.flex_3ea {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width:100%;}
.flex_3ea .content {flex-basis: 31.3333%; max-width:31.3333%; margin:1%;}
.flex_4ea {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width:100%;}
.flex_4ea .content {flex-basis: 23%; max-width:23%; margin:1%;}


/*기본 넓이 선언*/
.w-10 {flex-basis: 10%; max-width: 10%;}
.w-20 {flex-basis: 20%; max-width: 20%;}
.w-30 {flex-basis: 30%; max-width: 30%;}
.w-33_3 {flex-basis: 33.333%; max-width: 33.333%;}
.w-40 {flex-basis: 40%; max-width: 40%;}
.w-50 {flex-basis: 50%; max-width: 50%;}
.w-60 {flex-basis: 60%; max-width: 60%;}
.w-70 {flex-basis: 70%; max-width: 70%;}
.w-80 {flex-basis: 80%; max-width: 80%;}
.w-90 {flex-basis: 90%; max-width: 90%;}
.w-100 {flex-basis: 100%; max-width: 100%;}


/*폰트 사이즈 선언*/
.ft-10 { font-size: 1rem; }
.ft-11 { font-size: 1.1rem; }
.ft-12 { font-size: 1.2rem; }
.ft-13 { font-size: 1.3rem; }
.ft-14 { font-size: 1.4rem; }
.ft-15 { font-size: 1.5rem; }
.ft-16 { font-size: 1.6rem; }
.ft-17 { font-size: 1.7rem; }
.ft-18 { font-size: 1.8rem; }
.ft-19 { font-size: 1.9rem; }
.ft-20 { font-size: 2rem; }
.ft-21 { font-size: 2.1rem; }
.ft-22 { font-size: 2.2rem; }
.ft-23 { font-size: 2.3rem; }
.ft-24 { font-size: 2.4rem; }
.ft-25 { font-size: 2.5rem; }
.ft-26 { font-size: 2.6rem; }
.ft-27 { font-size: 2.7rem; }
.ft-28 { font-size: 2.8rem; }
.ft-29 { font-size: 2.9rem; }
.ft-30 { font-size: 3rem; }
.ft-31 { font-size: 3.1rem; }
.ft-32 { font-size: 3.2rem; }
.ft-33 { font-size: 3.3rem; }
.ft-34 { font-size: 3.4rem; }
.ft-35 { font-size: 3.5rem; }
.ft-36 { font-size: 3.6rem; }
.ft-37 { font-size: 3.7rem; }
.ft-38 { font-size: 3.8rem; }
.ft-39 { font-size: 3.9rem; }
.ft-40 { font-size: 4rem; }
.ft-41 { font-size: 4.1rem; }
.ft-42 { font-size: 4.2rem; }
.ft-43 { font-size: 4.3rem; }
.ft-44 { font-size: 4.4rem; }
.ft-45 { font-size: 4.5rem; }
.ft-46 { font-size: 4.6rem; }
.ft-47 { font-size: 4.7rem; }
.ft-48 { font-size: 4.8rem; }
.ft-49 { font-size: 4.9rem; }
.ft-50 { font-size: 5rem; }
.ft-51 { font-size: 5.1rem; }
.ft-52 { font-size: 5.2rem; }
.ft-53 { font-size: 5.3rem; }
.ft-54 { font-size: 5.4rem; }
.ft-55 { font-size: 5.5rem; }
.ft-56 { font-size: 5.6rem; }
.ft-57 { font-size: 5.7rem; }
.ft-58 { font-size: 5.8rem; }
.ft-59 { font-size: 5.9rem; }
.ft-60 { font-size: 6rem; }
.ft-61 { font-size: 6.1rem; }
.ft-62 { font-size: 6.2rem; }
.ft-63 { font-size: 6.3rem; }
.ft-64 { font-size: 6.4rem; }
.ft-65 { font-size: 6.5rem; }
.ft-66 { font-size: 6.6rem; }
.ft-67 { font-size: 6.7rem; }
.ft-68 { font-size: 6.8rem; }
.ft-69 { font-size: 6.9rem; }
.ft-70 { font-size: 7rem; }
.ft-71 { font-size: 7.1rem; }
.ft-72 { font-size: 7.2rem; }
.ft-73 { font-size: 7.3rem; }
.ft-74 { font-size: 7.4rem; }
.ft-75 { font-size: 7.5rem; }
.ft-76 { font-size: 7.6rem; }
.ft-77 { font-size: 7.7rem; }
.ft-78 { font-size: 7.8rem; }
.ft-79 { font-size: 7.9rem; }
.ft-80 { font-size: 8rem; }
.ft-81 { font-size: 8.1rem; }
.ft-82 { font-size: 8.2rem; }
.ft-83 { font-size: 8.3rem; }
.ft-84 { font-size: 8.4rem; }
.ft-85 { font-size: 8.5rem; }
.ft-86 { font-size: 8.6rem; }
.ft-87 { font-size: 8.7rem; }
.ft-88 { font-size: 8.8rem; }
.ft-89 { font-size: 8.9rem; }
.ft-90 { font-size: 9rem; }
.ft-91 { font-size: 9.1rem; }
.ft-92 { font-size: 9.2rem; }
.ft-93 { font-size: 9.3rem; }
.ft-94 { font-size: 9.4rem; }
.ft-95 { font-size: 9.5rem; }
.ft-96 { font-size: 9.6rem; }
.ft-97 { font-size: 9.7rem; }
.ft-98 { font-size: 9.8rem; }
.ft-99 { font-size: 9.9rem; }
.ft-100 { font-size: 10rem; }


.rufina-regular {
	font-family: "Rufina", serif;
	font-weight: 400;
	font-style: normal;
  }
  
.rufina-bold {
	font-family: "Rufina", serif;
	font-weight: 700;
	font-style: normal;
}



/*이미지 효과*/
.image-anime{position: relative;overflow: hidden;}
.image-anime:after{ content: ""; position: absolute;  width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255,255,255,.3);transform: translate(-50%,-50%) rotate(-45deg); z-index: 1;}
.image-anime:hover:after{ height: 250%; transition: all 600ms linear;background-color: transparent;}

/*프리로더*/
.preloader{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background-color: transparent; display: flex; align-items: center;justify-content: center;}
.loading-container,.loading{ height: 20rem; position: relative; width: 20rem;border-radius: 100%;}
.loading-container{margin: 40px auto; background-color: #000; position: relative;}
.loading-container::after{position: absolute;top: 0; left: 0; width: 100%; height: 100%; display: block; content: ""; clear: both; transform: scale(1.1); border-radius: 50%; background-color: #000; z-index: -1;}
.loading{ border: 1px solid transparent; border-color: transparent #fff transparent #fff; animation: rotate-loading 1.5s linear 0s infinite normal; transform-origin: 50% 50%;}
.loading-container:hover .loading,.loading-container .loading{transition: all 0.5s ease-in-out;}

#loading-icon{ position: absolute; top: 50%; left: 50%;max-width: 200px;transform: translate(-50%, -50%);color:#fff;font-size:1.4rem;text-align: center;}

@keyframes rotate-loading{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}

/* 스크롤바 기본 스타일 */
::-webkit-scrollbar {
    width: 14px; /* 스크롤바 너비 */
}

::-webkit-scrollbar-track {
    background: #e6e6e6; /* 트랙 배경 */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #999; /* 스크롤 핸들 색상 */
    border-radius: 10px;
    border: 3px solid #e6e6e6; /* 핸들 테두리 */
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #666; /* 호버 시 핸들 색상 */
}

/* 위아래 버튼 스타일 */
::-webkit-scrollbar-button {
    background: #ccc; /* 버튼 배경색 */
    border-radius: 50%; /* 버튼 모양: 원형 */
    border: none;
    height: 14px;
    width: 14px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-button:hover {
    background: #999; /* 호버 시 버튼 색상 */
}

::-webkit-scrollbar-button:vertical:start {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 8l-6 6h12z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

::-webkit-scrollbar-button:vertical:end {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 16l6-6H6z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

/* 파이어폭스 스크롤 스타일 */
body {
    scrollbar-width: thin;
    scrollbar-color: #999 #e6e6e6;
}


:root {--vh: 100%;}
/* .full-height {height: calc(var(--vh, 1vh) * 100);} */

.mobile-image {display: none !important;}