@charset "utf-8";

:root{
    --red:#e60012;
}

/* mVisual */
#mVisual{width: 100%; height: 1120px; position: relative;}
#mVisual .visual{background: #000 url(/images/main/mv_on3.webp) no-repeat center center / cover; height: 100%; width: 100%;}
#mVisual .visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(/images/main/mv3.webp) no-repeat center center / cover;
  opacity: 0;
  animation: neonFlicker 2.5s forwards;
}
@keyframes neonFlicker {
  0%      { opacity: 0; }
  12.5%   { opacity: 0; }
  14%     { opacity: 0.5; }
  18%   { opacity: 0.5; }
  20%     { opacity: 0; }
  35%   { opacity: 0; }
  38%     { opacity: 0.6; }
  40%   { opacity: 0.6; }
  42%     { opacity: 0; }
  50%   { opacity: 0; }
  52%     { opacity: 0.5; }
  55%   { opacity: 0.5; }
  57%     { opacity: 0; }
  80%     { opacity: 0; }
  100%    { opacity: 1; }
}
#mVisual .visual .inner{display: flex; align-items: end; height: 100%; justify-content: center; z-index: 2;}
#mVisual .visual .txt{margin-bottom: 20rem;}
#mVisual .visual .txt h3{color: #fff; font-size: 5.6rem; font-family: 'Danjo-bold'; text-align: center; line-height: 7.6rem; text-shadow: 0 7px 12px rgba(0,0,0,.4), 0 7px 59px rgba(0,0,0,.8); }
#mVisual .visual .txt h3 span{color: var(--red);}


@media all and (max-width:1280px){
    #mVisual{height: calc(100vh - 50px);}
    #mVisual .visual .txt h3{font-size: 5rem; line-height: 7rem;}
}
@media all and (max-width:1024px){
    #mVisual{height: calc(100vh - 46px);}
}
@media all and (max-width:768px){
    #mVisual{height: calc(100vh - 43px);}
    #mVisual .visual{background-size: 170%; background-position: center 20%;}
    #mVisual .visual::after{background-size: 170%; background-position: center 20%;}
    #mVisual .visual .txt{margin-bottom: 15rem;}
    #mVisual .visual .txt h3{font-size: 4.5rem; line-height: 6.5rem;}
}
@media all and (max-width:500px){
    #mVisual{height: calc(100vh - 40px);}
    #mVisual .visual .txt h3{font-size: 4rem; line-height: 6rem; letter-spacing: -0.05em;}
}



#mVideo{ width:100%; aspect-ratio:16/7.583; background: url('/images/main/video_temp.webp') no-repeat center / cover; position: relative; }
#mVideo video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#mVideo iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events: none;}
#mVideo .pc{display: block;}
#mVideo .mo{display: none;}
#mVideo .inner{ height:100%; display:flex; align-items:center; justify-content:center; text-align:center; position: relative; z-index: 2; }
#mVideo .inner .txt{font-family: 'GmarketSans'; font-style: italic; line-height: 20rem; letter-spacing: -0.3em; text-shadow: 0 7px 12px rgba(0,0,0,.4), 0 7px 59px rgba(0,0,0,.8);-webkit-text-stroke: 2px #000;}
#mVideo .inner .txt img{filter: drop-shadow(0 7px 12px rgba(0,0,0,.4)) drop-shadow(0 7px 59px rgba(0,0,0,.8));}
#mVideo .inner .txt h4{color: #fff; font-size: 8rem;-webkit-text-stroke: 2px #000;}
#mVideo .inner .txt h3{color: #ffa628;font-size: 24rem;}


@media all and (max-width:1280px){
/*    #mVideo{height: 100vh;}*/
    #mVideo .inner .txt{line-height: 16rem;}
    #mVideo .inner .txt h4{font-size: 7rem;}
    #mVideo .inner .txt h3{font-size: 20rem;}
    #mVideo .inner .txt img{width: 80rem;}
}
@media all and (max-width:980px){
    #mVideo .inner .txt{line-height: 14rem;}
    #mVideo .inner .txt h3{font-size: 18rem;}
    #mVideo .inner .txt img{width: 60rem;}
}
@media all and (max-width:768px){
	#mVideo{aspect-ratio:1/1;}
	#mVideo .pc{display: none;}
	#mVideo .mo{display: block;}
    #mVideo .inner .txt{line-height: 12rem;}
    #mVideo .inner .txt h4{font-size: 6rem;}
    #mVideo .inner .txt h3{font-size: 14rem;}
}
@media all and (max-width:580px){
    #mVideo .inner .txt{line-height: 11rem;}
    #mVideo .inner .txt h4{font-size: 5rem;}
    #mVideo .inner .txt h3{font-size: 12rem;}
    #mVideo .inner .txt img{width: 50rem;}
}
@media all and (max-width:500px){
    #mVideo .inner .txt{line-height: 9rem;}
    #mVideo .inner .txt h4{font-size: 4rem;}
    #mVideo .inner .txt h3{font-size: 10rem; padding-right: 1rem;}
    #mVideo .inner .txt img{width: 40rem;}
}


#success{position: relative; background: url('/images/main/success_bg.webp') center top /cover no-repeat; overflow: hidden; overflow-x: hidden;}
#success .img_box{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#success .img_box > div{height: 100%;}
#success .img_box > div > div{height: 100%;}
#success .img_box .img{width: 100%; height: 100%;}
#success .img_box .img img{width: 100%; height: 100%; object-fit: cover;}
#success:after{position: absolute; content: ''; width: 73.4rem; height: 73.4rem; background: url('/images/main/success_img_260203.webp') center center /cover no-repeat; bottom: -42rem; left: 50%; transform: translateX(-50%) scale(0) rotate(0deg); }
#success.animate:after{animation: successPop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}
@keyframes successPop {
  0% {
    transform: translateX(-50%) scale(0) rotate(0deg);
  }
  55% {
    transform: translateX(-50%) scale(1.08) rotate(0deg);
  }
  75% {
    transform: translateX(-50%) scale(1.03) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
}
#success .w-inner{padding: 22rem 0; position: relative;}
#success .top{display: flex;justify-content: center;gap: 3rem; color: #fff; align-items: center;}
#success .top .lt{text-align: right;}
#success .top .lt h3{font-size: 6rem; font-weight: 500;}
#success .top .lt h3 i{font-style: normal; display: inline-block;}
#success .top .lt h3 span{font-size: 7.2rem; font-weight: 800; color: #f9ca3b;}
#success .top .rt{background: var(--red); padding: 0 1.5rem;}
#success .top .rt h3{font-family: 'Danjo-bold'; font-size: 12rem; position: relative; top: .1em; animation: succesflicker infinite 0.75s;}
@keyframes succesflicker{
	0%{opacity: 0.6;}
	50%{opacity: 1;}
	100%{opacity: 0.6;}
}
#success .s_list{margin-top: 9.5rem; display: flex; justify-content: center;gap: 2rem; text-align: center; color: #fff;z-index: 10; position: relative;}
#success .s_list li{border: 2px solid var(--red); border-radius: 3rem; padding: 8rem 1rem; width: 40rem; transition: .4s; cursor: pointer;}
#success .s_list li.on{transform: scale(0.93);}
#success .s_list li.on.hover{transform: scale(1.12); background: rgba(0,0,0,0.4);}
#success .s_list li .t{}
#success .s_list li .t h3{font-family: 'Danjo-bold'; font-size: 10rem; color: var(--red); display: inline-block; position: relative;}
#success .s_list li .t img{position: absolute; right: -62px; top: -29px;}
#success .s_list li .m{margin: 2rem 0 4rem;display: flex; align-items: center; justify-content: center;min-height: 12rem;}
#success .s_list li .m h4{font-size: 3rem; line-height: 4rem;}
#success .s_list li .b{position: relative;}
#success .s_list li .b p{font-size: 2rem; font-weight: 500; line-height: 3rem; transition: .4s;}
#success .s_list li.on.hover .b p{font-size: 2.1rem;}
#success .s_list li .b p span{font-weight: bold;}
#success .s_list li .b img{position: absolute; right: 0; top: 0;}
br.br1400{display: none;}

@media all and (max-width:1600px){
    #success .w-inner{padding: 20rem 0;}
    #success .s_list li{padding: 6rem 1rem;}
    #success .s_list li .t h3{font-size: 8rem;}
    #success .s_list li .m h4{font-size: 2.7rem; line-height: 3.5rem;}
    #success .s_list li .b p{font-size: 1.9rem; line-height: 2.8rem;}
	#success .s_list li.on.hover .b p{font-size: 1.9rem;}
    #success .s_list li .b img{top: 100%;}
}
@media all and (max-width:1400px){
    #success .s_list li .m{margin: 1rem 0 2rem;}
    br.br1400{display: block !important;}
}
@media all and (max-width:1280px){
    #success .w-inner{padding: 18rem 0;}
    #success:after{height: 64rem; width: 64rem; bottom:-35rem;}
    #success .top .lt h3{font-size: 5.2rem;}
    #success .top .lt h3 span{font-size: 6rem;}
    #success .top .rt h3{font-size: 10rem;}
    #success .s_list{margin-top: 8rem;}
    #success .s_list li .t h3{font-size: 7rem;}
}
@media all and (max-width:1080px){
    #success .w-inner{padding: 16rem 0;}
    #success .s_list{flex-wrap: wrap;}
    #success .s_list li{width: calc(100%/2 - 2rem/2);}
    #success .s_list li .b img{top: 0;}
}
@media all and (max-width:880px){
    #success .top{flex-wrap: wrap;}
    #success .top .lt{text-align: center; width: 100%;}
}
@media all and (max-width:768px){
	#success{background: none; overflow: inherit; overflow-x: inherit;}
	#success .w-inner{margin-top: -100dvh;}
    #success .s_list li .t img{width: 4.5rem; top: -2.7rem; right: -5.2rem;}
    #success .s_list li .b img{width: 4.5rem; top: -4.7rem;}
    #success:after{width: 47rem; height: 47rem; bottom: -30rem;}
	#success .s_list li.on.hover{transform: scale(1.06);}
	#success .img_box{position: sticky; top: 0; left: 0; width: 100%; height: 100dvh;}
	#success .img_box .img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: -1;
	}
}
@media all and (max-width:580px){
    #success .s_list li{width: 100%;}
    #success .s_list li .b img{right: auto;left: 75%; top: 7%;}
    #success .s_list li .b p br.br1400{display: none !important;}
	#success .s_list li .m{min-height: auto;}
}
@media all and (max-width:500px){
    #success:after{width: 40rem; height: 40rem; bottom: -25rem;}
    #success .w-inner{padding: 14rem 0;}
    #success .top .lt h3{font-size: 4rem;}
    #success .top .lt h3 span{font-size: 4.8rem;}
    #success .top .rt h3{font-size: 8rem;}
    #success .s_list{margin-top: 7rem;}
    #success .s_list li{padding: 5rem 1rem;}
    #success .s_list li .t h3{font-size: 6rem;}
    #success .s_list li .m{min-height: 10rem;}
	#success .s_list li .m h4{font-size: 3rem;}
    #success .s_list li .b img{left: 80%;}
}


#proof{position: relative; background: url('/images/main/proof_bg.webp') center center /cover no-repeat; padding: 22rem 0 18rem; overflow-x: hidden;}
#proof .top{text-align: center; color: #000;}
#proof .top h4{font-size: 4.8rem;}
#proof .top h3{font-size: 6.4rem; line-height: 8.6rem; font-family: 'Danjo-bold'; position: relative; margin: 2rem 0 3rem; display: inline-block;}
#proof .top h3::before{position: absolute; content: ''; width: 0rem; height: 1.7rem; background: url('/images/main/proof_under.webp') left center / cover no-repeat; bottom: 0;}
#proof.is-visible .top h3::before{animation: proofbefore .75s .5s forwards;}
@keyframes proofbefore{
	0%{width: 0rem;}
	100%{width: 53.1rem;}
}
#proof .top h3:after{position: absolute; content: ''; width: 5.7rem; height: 5.7rem; background: url('/images/main/proof_star.webp') center center / cover no-repeat; left: -5rem; top: -6rem; opacity: 0;}
#proof.is-visible .top h3::after{animation: proofafter .3s .5s forwards;}
@keyframes proofafter{
	0%{top: -6rem; opacity: 0;}
	100%{top: -2rem; opacity: 1;}
}
#proof .top p{font-size: 4.8rem; color: #3f0808; font-weight: bold; display: flex; align-items: center;justify-content: center; gap: 2rem;}
#proof .top p span.box{font-family: 'Danjo-bold'; color: #fff;  position: relative; display: inline-block; padding: 1.5rem 2rem 0.5rem;}
#proof .top p span.box i{font-style: normal; display: inline-block;}
#proof .top p span.box::before{content: ''; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: var(--red); display: block; z-index: -1; transition: .4s .75s;}
#proof.is-visible .top p span.box::before{width: 100%;}
#proof .top p span.red{color: var(--red);}

.proof_list{margin-top: 7rem; display: flex; gap: 3rem; color: #222;}
.proof_list li{width: calc(100%/4 - 9rem/4);}
.proof_list li .img{text-align: center; position: relative;}
.proof_list li .img p{text-align: center; display: inline-block; font-weight: bold; font-size: 3.2rem; color: #fff; background: #22ac38; padding: 1rem 3rem; border-radius: 100px; z-index: 2;position: relative;}
.proof_list li .img img{width: 100%; margin-top: -2.7rem; z-index: 1; position: relative;}
.proof_list li .receipt{position: relative;}
.proof_list li .receipt img{width: 100%;}
.proof_list li .receipt .txt{position: absolute; left: 0;top: 0; z-index: 1; width: 100%; height: 100%; padding: 5.5rem 5.5rem;}
.proof_list li .receipt h4{text-align: center; font-size: 3.6rem;}
.proof_list li .receipt .sales{margin-top: 2.5rem; display: flex; align-items: center;gap: 0.5rem;justify-content: space-between;}
.proof_list li .receipt .sales p{font-size: 2.4rem; font-weight: bold; line-height: 2.6rem; text-align: center;}
.proof_list li .receipt .sales p span{color: var(--red);}
.proof_list li .receipt .sales h3{font-size: 5.6rem; color: var(--red);text-align: right; width: calc(100% - 12rem);line-height: 5rem; animation: proofflicker infinite 1s;}
@keyframes proofflicker{
	0%{opacity: 0.3;}
	49.9%{opacity: 0.3;}
	50%{opacity: 1;}
	99.9%{opacity: 1;}
	100%{opacity: 0.3;}
}

.proof_list .slick-slide{padding: 0 1.5rem;box-sizing: border-box;}
.proof_list .slick-list{margin: 0 -1.5rem;}


@media all and (max-width:1780px){
    .proof_list li .receipt .txt{padding: 4.5rem 5rem;}
    .proof_list li .receipt .sales{gap: 0rem; margin-top: 1.5rem;}
    .proof_list li .receipt .sales h3{font-size: 5rem; width: calc(100% - 10rem);}
    .proof_list li .receipt .sales p{font-size: 2rem; line-height: 2.2rem;}
}
@media all and (max-width:1580px){
    .proof_list li .img p{font-size: 2.8rem;}
    .proof_list li .receipt .txt{padding:4rem;}
    .proof_list li .receipt .sales h3{font-size: 4.5rem;}
}
@media all and (max-width:1400px){
    #proof{padding: 20rem 0 16rem;}
    .proof_list li .receipt .txt{padding:5.5rem;}
}
@media all and (max-width:1280px){
    #proof{padding: 18rem 0 16rem;}
    #proof .top h4{font-size: 4.3rem;}
    #proof .top h3{font-size: 6rem;}
    #proof .top h3::before{width: 49rem; height: 1.5rem;}
	@keyframes proofbefore{
		0%{width: 0rem;}
		100%{width:49rem;}
	}
    #proof .top p{font-size: 4.3rem;}
    .proof_list li .receipt .txt{padding:5rem;}
    .proof_list li .receipt .sales{margin-top: 1rem;}
    .proof_list li .receipt .sales h3{font-size: 4rem;}
}
@media all and (max-width:1023px){
    #proof{padding: 16rem 0 14rem;}
    .proof_list li .receipt .txt{padding:7rem;}
    .proof_list li .receipt .sales{margin-top: 3rem;}
    .proof_list li .receipt .sales h3{font-size: 5.5rem; width: calc(100% - 12rem);}
    .proof_list li .receipt .sales p{font-size: 2.3rem; line-height: 2.5rem;}
}
@media all and (max-width:880px){
    #proof .top p{flex-wrap: wrap; gap: 1rem;margin-top: 2rem;}
    .proof_list li .receipt .txt{padding:6rem;}
    .proof_list li .receipt .sales{margin-top: 2rem;}
    .proof_list li .receipt .sales h3{font-size: 4.5rem; width: calc(100% - 10rem);}
    .proof_list li .receipt .sales p{font-size: 2rem; line-height: 2.2rem;}
}
@media all and (max-width:680px){
    #proof{padding: 14rem 0 12rem;}
    #proof .top h4{font-size: 4rem;}
    #proof .top h3{font-size: 5.5rem;}
    #proof .top h3::before{width: 46rem;}
	@keyframes proofbefore{
		0%{width: 0rem;}
		100%{width:46rem;}
	}
    .proof_list li .receipt .txt{padding:10rem;}
    .proof_list li .receipt h4{font-size: 5.6rem;}
    .proof_list li .receipt .sales{margin-top: 4rem;}
    .proof_list li .receipt .sales h3{font-size: 7rem; width: calc(100% - 14rem);}
    .proof_list li .receipt .sales p{font-size: 3rem; line-height: 3.2rem;}
}
@media all and (max-width:580px){
    .proof_list li .receipt .txt{padding: 8rem;}
    .proof_list li .receipt h4{font-size: 5.6rem;}
    .proof_list li .receipt .sales h3{font-size:6rem; width: calc(100% - 12rem);}
    .proof_list li .receipt .sales p{font-size: 2.5rem; line-height: 2.7rem;}
}
@media all and (max-width:500px){
    .proof_list{margin-top: 5rem;} 
    #proof{padding: 12rem 0 10rem;}
    #proof .top h4{font-size: 3rem;}
    #proof .top h3{font-size: 4.5rem; line-height: 7.5rem; margin: 1rem 0 2rem;}
    #proof .top h3:after{width: 4.5rem; height: 4.5rem; left: -3.5rem; top: -1rem;}
	@keyframes proofafter{
	0%{top: -5rem; opacity: 0;}
	100%{top: -1rem; opacity: 1;}
}
    #proof .top h3::before{width: 41rem; height: 1.2rem;}
	@keyframes proofbefore{
		0%{width: 0rem;}
		100%{width:41rem;}
	}
    #proof .top p{font-size: 3.7rem;}
    #proof .top p span.box {padding: 1.1rem 1.5rem 0.2rem;}
    .proof_list li .receipt .txt{padding: 6.5rem;}
    .proof_list li .receipt h4{font-size: 4rem;}
    .proof_list li .receipt .sales{margin-top: 2.5rem;}
    .proof_list li .receipt .sales h3{font-size:5rem; width: calc(100% - 12rem);}
    .proof_list li .receipt .sales p{font-size: 2.3rem; line-height: 2.5rem;}
}


.m_txt{text-align: center; margin-bottom: 7rem; position: relative; z-index: 10;}
.m_txt h3{font-size: 6.4rem; font-family: 'Danjo-bold'; color: #fff;}
.m_txt h3 span{color: var(--red);}
.m_txt h3 span i{display: inline-block; font-style: normal;}
.m_txt p{font-weight: 500; font-size: 2.8rem; margin-top: 3rem; color: #fff;}

@media all and (max-width:1280px){
    .m_txt{margin-bottom: 6rem;}
    .m_txt h3{font-size: 6rem;}
    .m_txt p{font-size: 2.5rem;}
}
@media all and (max-width:768px){
    .m_txt{margin-bottom: 5rem;}
    .m_txt h3{font-size: 5rem;}
    .m_txt p{font-size: 2.2rem;}
}
@media all and (max-width:500px){
    .m_txt h3{font-size: 4.5rem;}
    .m_txt p{font-size: 2rem; margin-top: 2rem;}
}


.p-Part{padding: 22rem 0 18rem;}
#store{position: relative; background: url('/images/main/store_bg.webp') center center /cover no-repeat;}
#store .store_wrap{display: flex; gap: 3rem; height: 64rem;}
#store .store_list{width: 40rem;background: #fff;}
#store .store_map{width: calc(100% - 43rem); background: #fff; height: 100%;}
#store .store_map #map{height: 100% !important; touch-action:pan-y;}
.root_daum_roughmap .wrap_map{height: 100% !important;}
.root_daum_roughmap .cont,
.root_daum_roughmap .wrap_controllers{display: none;}
#daumRoughmapContainer1744259252920 img[src*="marker_bus"] {display: none !important;}
#store .map-guide {
    position: absolute;
	width: 100%;
    top: -43px;
    left: 50%;
	text-align: center;
    transform: translateX(-50%);
/*    background: rgba(0, 0, 0, 0.65);*/
    background: rgba(27, 96, 59,0.9);
    color: #fff;
    padding: 12px 14px;
    font-size: 16px;
/*    border-radius: 20px;*/
    z-index: 20;
    pointer-events: none;
    transition: opacity 0.3s ease;
	animation: storeflicker infinite .75s;
	visibility: visible;
}

@keyframes storeflicker{
	0%{opacity: 1;}
	50%{opacity: 0.6;}
	100%{opacity: 1;}
}

#store .map-guide.hide {
    opacity: 0;
	visibility: hidden;
}

#mapOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 5;
    cursor: pointer;
}

#store .m_txt{margin-bottom: 9rem;}
#store .search {padding: 2rem; background-color: #f5f5f5;}
#store .row {display: flex;gap: 0.5rem;margin-bottom: 0.5rem;}
#store .select-box{appearance: none; background-image: url("/images/main/arrow.webp"); background-repeat: no-repeat; background-position: right 12px center;  background-size: 14px;}
#store .select-box, .search-input {border: 1px solid #ddd;border-radius: 0.5rem;padding: 1.2rem 1.5rem;font-size: 1.6rem;outline: none;font-family: 'Pretendard', sans-serif;}
#store .select-box {flex: 1;background-color: #fff;cursor: pointer;}
#store .search-input { flex: 1; background-color: #fff; font-family: 'Pretendard', sans-serif;}
#store .search-input::placeholder { color: #bbb;}
#store .search-btn { background-color: #222; color: #fff; border: none; border-radius: 4px; padding: 1.2rem 2rem; font-size: 1.6rem; font-weight: bold; cursor: pointer; white-space: nowrap;font-family: 'Pretendard', sans-serif;}
#store .search-btn:hover {background-color: #444;}

#store .store_info{background: #fff; overflow: auto; height: calc(100% - 135px);}
#store .store_info li a{padding: 1.5rem 2rem; display: flex; gap: 2rem; align-items: center;}
#store .store_info li a .img{width: 13rem; border: 1px solid #eee; box-sizing: border-box;}
#store .store_info li a .img img{width: 100%;}
#store .store_info li a h4{font-size: 1.6rem; color: #222;}
#store .store_info li a p{color: #666;font-size: 1.5rem;margin-top: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#store .store_info li + li{border-top: 1px solid #e5e5e5;}


@media all and (max-width:1280px){
    .p-Part{padding: 20rem 0 16rem;}
}
@media all and (max-width:980px){
    .p-Part{padding: 17rem 0 14rem;}
    #store .store_wrap{gap: 2rem; height: 55rem;}
    #store .store_list{width: 35rem;}
    #store .store_map{width: calc(100% - 37rem);}
}
@media all and (max-width:768px){
    .p-Part{padding: 15rem 0 14rem;}
	#store .m_txt{margin-bottom: 7rem;}
    #store .store_wrap{flex-wrap: wrap; gap: 1rem; height: 100%;}
    #store .store_list{width: 100%; order: 2; height: 40rem;}
    #store .store_map{width: 100%; order: 1; height: 40rem;}
    #store .store_info{height: calc(100% - 10rem);}
	#store .map-guide{font-size: 15px; top: -41px;}
}
@media all and (max-width:500px){
    .p-Part{padding: 12rem 0 10rem;}
}


#reason{position: relative; background: url('/images/main/reason_bg.webp') center center /cover no-repeat;}
#reason:after{content: ''; position: absolute; right: 0;top: 0; background: url('/images/main/reason_bgimg.webp') center center /contain no-repeat; width: 699px; height: 1127px; z-index: 1;}
#reason .m_txt h3{color: #222;}
#reason .m_txt p{color: #222;}
#reason .bot{color: #222; font-family: 'Danjo-bold'; text-align: center; margin-top: 5rem; font-size: 4.8rem; letter-spacing: -0.06em;}
#reason .bot span{color: #fff; display: inline-block; padding: 1.2rem 1.5rem 0; position: relative;}
#reason .bot span::after{content: ''; position: absolute; width: 0%; height: 100%; display: block; z-index: -1; background: var(--red); top: 0; left: 0; transition: .75s 0.5s;}
#reason .bot.aos-animate span::after{width: 100%;}
#reason .bot br{display: none;}

.reason_list{display: flex; gap: 3rem; flex-wrap: wrap; color: #222; position: relative;z-index: 10;}
.reason_list > li { width: 100%; display: flex; align-items: center; background-color: #fff; border: 5px solid #633921; overflow: hidden;height: 47rem;}
.reason_list > li .img { flex: 1.2; background-size: cover; background-position: center; height: 100%; position: relative;}
.reason_list > li .img::after{position: absolute; content: ''; width: 2px; height: 100%; background: #fff; top: 0; right: -1px;}
.reason_list > li .img img{margin: 4rem;}
.reason_list > li:nth-child(2) .img::after {right: auto; left: -1px;}
.reason_list > li:nth-child(1) .img {background-image: linear-gradient(to right, transparent 50%, #fff 100%), url('/images/main/reason_img01.webp');}
.reason_list > li:nth-child(2) .img {order: 2; text-align: right; position: relative; overflow: hidden;}
.reason_list > li:nth-child(2) .img .bg{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
.reason_list > li:nth-child(2) .img .bg::after{content: ''; width: 100%; height: 100%; background-image: linear-gradient(to left, transparent 50%, #fff 100%); display: block; position: absolute; top: 0; right: 0; z-index: 2;}
.reason_list > li:nth-child(2) .img .bg img{width: 100%; height: 100%; object-fit: cover; margin: 0; position: absolute; top: 0; left: 0;}
.reason_list > li:nth-child(3) .img {}
.reason_list > li:nth-child(3) .img .bg{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
.reason_list > li:nth-child(3) .img .bg::after{content: ''; width: 100%; height: 100%; background-image: linear-gradient(to right, transparent 50%, #fff 100%); display: block; position: absolute; top: 0; right: 0; z-index: 2;}
.reason_list > li:nth-child(3) .img .bg img{width: 100%; height: 100%; object-fit: cover; margin: 0; position: absolute; top: 0; left: 0;}
.reason_list .txt {flex: 0.8; padding-right: 6rem;}
.reason_list > li:nth-child(2) .txt {padding-left: 6rem;}
.reason_list .txt h3{font-family: 'GmarketSans'; font-size: 3.6rem; font-weight: normal; line-height: 4.6rem; letter-spacing: -0.06em;}
.reason_list .txt h3 span{font-weight: bold; position: relative; display: inline-block;}
.reason_list .txt h3 span:after{content: ''; position: absolute; bottom: -5px; left: 0;}
.reason_list > li:nth-child(1) .txt h3 span:after{background: url('/images/main/bubble_under.webp') left center / cover no-repeat; width: 0px; height: 12px; transition: 1s;}
.reason_list > li.aos-animate:nth-child(1) .txt h3 span:after{width: 370px;}
.reason_list > li:nth-child(2) .txt h3 span:after{background: url('/images/main/restart_under.webp') left center / cover no-repeat; width: 0px; height: 10px; transition: 1s;}
.reason_list > li.aos-animate:nth-child(2) .txt h3 span:after{width: 296px;}
.reason_list > li:nth-child(3) .txt h3 span:after{background: url('/images/main/reuse_under.webp') left center / cover no-repeat; width: 0px; height: 11px; transition: 1s;}
.reason_list > li.aos-animate:nth-child(3) .txt h3 span:after{width: 405px;}
.reason_list .txt > p{font-weight: 500; font-size: 2.2rem; margin: 2rem 0;}
.reason_list .txt .dotlist li{position: relative;}
/*
.reason_list .txt .dotlist li.bubble:after{position: absolute; width: 229px; height: 49px; background: url('/images/main/bubble_x.webp') center center / contain no-repeat; left: 1.5rem; content: ''; top: 50%; transform: translateY(-50%);}
.reason_list .txt .dotlist li.restart:after{position: absolute; width: 55px; height: 38px; background: url('/images/main/restart_x.webp') center center / contain no-repeat; left: 1.5rem; content: ''; top: 50%; transform: translateY(-50%);}
.reason_list .txt .dotlist li.reuse:after{position: absolute; width: 217px; height: 36px; background: url('/images/main/reuse_x.webp') center center / contain no-repeat; left: 1.5rem; content: ''; top: 50%; transform: translateY(-50%);}
*/
.reason_list .txt .dotlist li p{position: relative; font-size: 2.5rem; padding: 1.5rem 2rem; border-bottom: 1px dashed #ccc; font-weight: bold;}
.reason_list .txt .dotlist li p:before{content: ''; background: var(--red); width: 5px; height: 5px; transform: rotate(45deg) translateY(-50%); position: absolute; left: 0; top: 50%;}
.reason_list .txt .dotlist li span.red{color: var(--red); display: inline-block;margin-left: 0.5rem;}
br.mo{display: none;}


@media all and (max-width:1280px){
    #reason:after{width: 40rem; height: 64rem;}
    .reason_list > li .img { flex: 1.1;}
    .reason_list > li .img img{width: 13rem;}
    .reason_list .txt {flex: 0.9; padding-right: 3rem;}
    .reason_list > li:nth-child(2) .txt {padding-left: 3rem;}
    #reason .bot{font-size: 4.5rem;}
}
@media all and (max-width:1080px){
    .reason_list .txt h3{font-size: 3.2rem; line-height: 4.2rem;}
    .reason_list .txt > p{font-size: 2rem;}
    .reason_list > li.aos-animate:nth-child(1) .txt h3 span:after{width: 33rem;}
    .reason_list > li.aos-animate:nth-child(2) .txt h3 span:after{width: 26rem;}
    .reason_list > li.aos-animate:nth-child(3) .txt h3 span:after{width: 37rem;}
    .reason_list .txt .dotlist li p{font-size: 2.2rem; }
    .reason_list .txt .dotlist li.bubble:after{width: 20.5rem;}
    .reason_list .txt .dotlist li.restart:after{width: 4.5rem;}
    .reason_list .txt .dotlist li.reuse:after{width: 19.5rem;}
}
@media all and (max-width:980px){
    .reason_list > li .img { flex: 1;}
    .reason_list .txt {flex: 1;}
}
@media all and (max-width:880px){
    .reason_list > li {flex-direction:column; height:auto;}
    .reason_list > li .img{ height: 40rem !important; min-height: 40rem !important; display: block !important; width: 100%;}
    .reason_list > li .img::after{ width: 100%; height: 2px; top: auto; bottom: -1px; left: 0;}
    .reason_list > li:nth-child(1) .img{background-image: linear-gradient(to bottom, transparent 55%, #fff 100%),url('/images/main/reason_img01.webp');}
    .reason_list > li:nth-child(2) .img{order: 0;}
	.reason_list > li:nth-child(2) .img .bg::after{background-image: linear-gradient(to bottom, transparent 55%, #fff 100%);}
    .reason_list > li:nth-child(3) .img{}
	.reason_list > li:nth-child(3) .img .bg::after{background-image: linear-gradient(to bottom, transparent 55%, #fff 100%);}
    .reason_list .txt{padding:6rem 3rem; width: 100%;}
    
    #reason .bot{font-size: 4rem;}
    #reason .bot br{display: block;}
}
@media all and (max-width:768px){
    br.mo{display: block !important;}
    .reason_list > li .img img{width: 10rem; margin: 2rem;}
}
@media all and (max-width:500px){
    .reason_list{gap: 2rem;}
    .reason_list > li .img{min-height: 23rem !important;}
    .reason_list > li .img img{width: 8rem;}
    .reason_list .txt{padding:4rem 2rem;}
    .reason_list .txt h3{font-size: 3rem; line-height: 4rem;}
    .reason_list .txt > p{font-size: 1.8rem;}
    .reason_list .txt .dotlist li p{font-size: 2rem; }
    .reason_list > li:nth-child(1) .txt h3 span:after{width: 31rem;}
    .reason_list > li:nth-child(2) .txt h3 span:after{width: 24rem;}
    .reason_list > li:nth-child(3) .txt h3 span:after{width: 35rem;}
    .reason_list .txt .dotlist li.bubble:after{width: 18.5rem;}
    .reason_list .txt .dotlist li.restart:after{width: 4.5rem;}
    .reason_list .txt .dotlist li.reuse:after{width: 17.5rem;}
    #reason .bot{font-size: 3.5rem;margin-top: 3rem;}
}


#cost{position: relative; background: url('/images/main/cost_bg.webp') center center /cover no-repeat;}
#cost .m_txt h3{color: #222;    letter-spacing: -0.06em;}
#cost .m_txt p{color: #222; font-weight: bold;}
#cost .m_txt p span{color: var(--red);}
#cost .t_box{background: #533a17; text-align: center; padding: 2rem;position: relative;}
#cost .t_box:before{position: absolute; content: ''; width: 8px; height: 57px; background: url('/images/main/t_box_img.webp') top left / contain no-repeat; left: 1rem; top: 50%; transform: translateY(-50%);}
#cost .t_box:after{position: absolute; content: ''; width: 8px; height: 57px; background: url('/images/main/t_box_img.webp') top left / contain no-repeat; right: 1rem; top: 50%; transform: translateY(-50%);}
#cost .t_box h3{color: #fff; font-size: 3.2rem; display: flex; align-items: center;justify-content: center; gap: 1rem;}
#cost .t_box h3 span{color: #ffe5c0; font-size: 3.6rem; position: relative; display: inline-block;z-index: 10;}
#cost .t_box h3 span::before{content: ''; width: 0%; height: 25%; background: #ac926e; opacity: 0.9; bottom: 0; left: -1%; position: absolute;z-index: -1; transition: .7s;}
#cost .t_box.aos-animate h3 span::before{width: 103%;}

.cost-wrapper {width: 100%;box-sizing: border-box;}
.cost-table-container {display: flex;align-items: stretch;background-color: #fff;}
.cost-column {flex: 1;display: flex;flex-direction: column;}
.cost-table {width: 100%;height: 100%;border-collapse: collapse;table-layout: fixed;}
.cost-table thead th {background-color: #ac926e;color: #fff;padding: 1.5rem 1rem;font-size: 2.4rem;font-weight: 600;border-bottom: 1px solid rgba(0,0,0,.3);border-right: 1px solid rgba(0,0,0,.3);}
.cost-table thead th span{font-size: 1.8rem; font-weight: 500;}
.cost-table thead th:nth-child(1) {background-color: #b38647;}
.cost-table thead th:nth-child(2) {background-color: #cfa870;}
.cost-table thead th:last-child {border-right: none;}
.cost-table td {padding: 1rem;font-size: 2.2rem;text-align: center;border-bottom: 1px solid rgba(0,0,0,.3);border-right: 1px solid rgba(0,0,0,.3);vertical-align: middle;}
.cost-table td:last-child {border-right: none;}
.category {font-weight: bold;color: #222;width: 100px;}
.price {color: #222; font-variant-numeric: tabular-nums;}
.bdb0{border-bottom: 0 !important;}
.bdl{border-left: 1px solid rgba(0,0,0,.3) !important;}
.bdt{border-top:0;}

.bg-gold { background-color: #f1e1cb !important; }
.bg-gold-light { background-color: #f1e1cb!important; }
.bg-pink { background-color: #f2d5c7 !important; }
.bg-pink-light { background-color: #f2d5c7 !important; }
.bg-green { background-color: #e7edcc !important; }
.bg-green-light { background-color: #e7edcc !important; }
.bg-blue { background-color: #d5e5e1 !important; }
.bg-blue-light { background-color: #d5e5e1 !important; }


.sub-total td {font-weight: bold;border-bottom: 1px solid rgba(0,0,0,.3); color: #222;}
.total-final-bar {background-color: #e60012;color: #fff;display: flex;justify-content: space-between;align-items: center;padding: 18px 50px;font-size: 24px;font-weight: 800;}
.total-final-bar span{width: 50%; text-align: center; font-weight: 600; }
.total-final-bar .label {font-size: 2.8rem;}
.total-final-bar .amount {font-size: 3.2rem; animation: proofflicker infinite 1s;}

.ntc{margin-top: 3rem;}
.ntc p{color: #444; font-size: 2rem; font-weight: 600; margin-top: 0.5rem;}
.ntc p.red{color: var(--red); margin-bottom: 1rem; margin-top: 0;}

br.br480{display: none;}

@media all and (max-width: 1280px) {
    #cost .t_box h3{font-size: 3rem;}
    #cost .t_box h3 span{font-size: 5vw;}
    .cost-table thead th {font-size: 2.2rem;}
    .cost-table thead th span{font-size: 1.6rem;}
    .cost-table td {font-size: 2rem;}
    .total-final-bar .label {font-size: 2.6rem;}
    .total-final-bar .amount {font-size: 3rem;}
    .ntc p{ font-size: 1.8rem;}
}
@media all and (max-width: 1024px) {
    .cost-table-container {flex-direction: column;}
    .cost-column:first-child {border-right: none;}
    .total-final-bar {padding: 15px 25px;font-size: 20px;}
    .cost-table .mon{display: none;}
    .bdl{border-left: none !important;}
    .bdt{border-top: 1px solid rgba(0,0,0,.3) !important;}
}
@media all and (max-width: 768px) {
    #cost .t_box:before{width: 1.5rem; height: 10rem;}
    #cost .t_box:after{width: 1.5rem; height: 10rem;}
    #cost .t_box h3{flex-direction: column;}
}
@media all and (max-width: 480px) {
    br.br480{display: block !important;}
    #cost .m_txt h3{font-size: 4.3rem;}
    #cost .t_box{padding: 1rem;}
    #cost .t_box:before{height: 6rem;}
    #cost .t_box:after{height: 6rem;}
    #cost .t_box h3{font-size: 2.6rem;}
/*    #cost .t_box h3 span{font-size: 3rem;}*/
    .cost-table thead th {font-size: 1.8rem;}
    .cost-table thead th span{font-size: 1.4rem;}
    .cost-table td {font-size: 1.7rem;}
    .total-final-bar .label {font-size: 2.2rem;}
    .total-final-bar .amount {font-size: 2.6rem;}
    .ntc p{ font-size: 1.6rem;}
}


#together{text-align: center; color: #fff; background: #000 url('/images/main/together_bg.webp') top center / 100% no-repeat; overflow: hidden;}
#together.done{background: #000 url('/images/main/done_bg2.webp') center center / cover no-repeat;}
#together .top h4{font-size: 4.8rem;}
#together .top h3{font-size: 6.4rem; font-family: 'Danjo-bold'; margin: 2rem 0 3rem;}
#together .top h3 span{color: var(--red);}
#together .top h3 span i{font-style: normal; display: inline-block;}
#together .top p{font-size: 2.8rem; line-height: 4rem; font-weight: 500;}
#together .frame{ margin: 5rem auto 0; position: relative; background: url('/images/main/frame_bg.webp') center center / contain no-repeat; padding: 4rem 0 6rem; width: 1046px; height: 213px;}
#together .frame:before{position: absolute; content: ''; width: 50rem; height: 2px;background: rgba(255,255,255,.2); left: -50rem; top: 50%; transform: translateY(-50%);}
#together .frame:after{position: absolute; content: ''; width: 50rem; height: 2px;background: rgba(255,255,255,.2); right: -50rem; top: 50%; transform: translateY(-50%);}
#together .frame h3{font-size: 4rem; line-height: 6rem;}
#together .frame h3.red{background: var(--red); display: inline-block; padding: 0 1.5rem;}
#together .red-bar{background: var(--red);padding: 1rem; margin-top: 5rem;}
#together .red-bar h3{font-size: 4rem; display: flex; justify-content: center; gap: 1rem; align-items: center;}
#together .red-bar h3 br{display: none;}
#together .red-bar h3 span.big{font-size: 6.4rem;}
#together .red-bar h3 span.mo{display: flex; align-items: center; gap: 1rem;}
#together .img_list{margin-top: 8rem; overflow: hidden;}
#together .img_list ul{margin: 0;padding: 0;}
#together .img_list li{list-style: none;}
#together .img_list img{width: 100%;display: block;}
br.br980{display: none;}

#together .bna{margin-top: 5rem; display: flex; justify-content: center; gap: 10rem; align-items: center; position: relative;}
#together .bna .before{position: relative;}
#together .bna .before .img{max-width: 576px;}
#together .bna .before .img > div{width: 100%;}
#together .bna .before .img > div > div{width: 100%;}
#together .bna .before .img img{max-width: 576px; filter: grayscale(0);  transition: filter 1s .5s ease !important;}
#together .bna .before .img img.slick-current{filter: grayscale(1);}
#together .bna .after .img{max-width: 761px;}
#together .bna .after .img > div{width: 100%;}
#together .bna .after .img > div > div{width: 100%;}
#together .bna .after .img img{max-width: 761px; transition: opacity 1s 1s !important; opacity: 0 !important; visibility: hidden;}
#together .bna .after .img img.slick-current{opacity: 1 !important; visibility: visible;}
/*#together .bna .before:after{position: absolute; top:40%; width: 23.5rem; height: 15rem; background: url('/images/main/arrow_red.webp') center center /contain no-repeat ; right: -18rem; content: '';}*/
#together .bna .tt{position: relative; z-index: 10;}
#together .bna .img{margin-top: -5rem;}
#together .bna .img img{max-width: 100%;}
#together .bna .arrow{position: absolute; top: 50%; left: 40%; transform: translateY(-50%); z-index: 11; width: 235px; height: 151px;}
#together .bna .arrow.on{animation: arrow 1.2s ease forwards;}
@keyframes arrow{
	0%{width: 0;}
	50%{width: 0;}
	100%{width: 235px;}
}
#together .bna .arrow img{width: 100%; height: 100%; object-fit: contain; object-position: left center;}
#together p.info{margin-top: 6rem; font-size: 2rem; opacity: 0.6; font-weight: 500;}

#together .before-filter {
filter: grayscale(100%) contrast(90%) brightness(80%) sepia(20%);
}

/* === 애니메이션 키프레임 정의 === */

/* 1. 스캐너 막대 이동 (왼쪽 -> 오른쪽) */
@keyframes scanMove {
0% { left: 0%; opacity: 1; }
90% { opacity: 1; }
100% { left: 120%; opacity: 0; }
}

/* 2. Before 이미지가 걷히는 효과 (클리핑 마스크) */
/* inset(상 우 하 좌) -> 오른쪽 값이 0%에서 100%로 변하면서 이미지가 왼쪽부터 사라짐 */
@keyframes clipReveal {
0% { clip-path: inset(0% 0% 0% 0%); }
100% { clip-path: inset(0% 0% 0% 100%); }
}

/* 3. 텍스트가 아래에서 위로 부드럽게 나타남 */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* 4. 이미지가 천천히 확대되는 켄번(Ken Burns) 효과 */
@keyframes slowZoom {
from { transform: scale(1.1); }
to { transform: scale(1.0); }
}

/* === 애니메이션 클래스 매핑 === */

/* 스캔 막대: 1.5초 대기 후 3.5초 동안 이동 */
#together .animate-scan-bar {
animation: scanMove 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation-delay: 1.5s; 
}

/* Before 레이어: 1.5초 대기 후 3.5초 동안 걷힘 */
#together .animate-clip-layer {
animation: clipReveal 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation-delay: 1.5s;
}

/* 배경 줌 효과: 8초 동안 천천히 */
#together .animate-zoom {
animation: slowZoom 8s linear forwards;
}

/* 텍스트 등장 */
#together .animate-fade-in {
animation: fadeInUp 0.8s ease-out forwards;
}

/* === 장면 전환(슬라이드 교체) 트랜지션 === */
#together .scene-transition-enter {
opacity: 0;
transform: scale(0.95);
filter: blur(10px);
}
#together .scene-transition-active {
opacity: 1;
transform: scale(1);
filter: blur(0px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
}
#together .scene-transition-exit {
opacity: 0;
transform: scale(1.05);
filter: blur(20px);
transition: opacity 0.8s ease-in, transform 0.8s ease-in, filter 0.8s ease-in;
}

#together .bnacont{margin-top: 60px;}
#together .befores{top: 50px !important; left: 50px !important;}
#together .afters{top: 30px !important; right: 30px !important;}
#together .befores span{font-size: 16px;}
#together .afters span{font-size: 16px;}


@media all and (max-width: 1500px){
    #together .bna .tt img{height: 10rem;}
    #together .bna .before .img{width: 48rem;}
    #together .bna .before .img img{width: 100%;}
    #together .bna .after .img{width: 68rem;}
    #together .bna .after .img img{width: 100%;}
	#together .bna .arrow{left: 35%;}
}
@media all and (max-width: 1280px){
    #together .top h4{font-size: 4.4rem;}
    #together .top h3{font-size: 6rem;}
    #together .top p{font-size: 2.5rem; line-height: 3.5rem;}
    #together .frame h3{font-size: 3.5rem; line-height: 5rem;}
    #together .frame{width: 90rem; height: 19rem;}
    #together .red-bar h3{font-size: 3.5rem;}
    #together .red-bar h3 span.big{font-size: 6rem;}
    #together .img_list{margin-top: 7rem;}
    #together .bna{gap: 6rem;}
    #together .bna .before .img{width: 40rem;}
    #together .bna .before:after{width: 15rem; height: 10rem;right: -12rem;}
    #together .bna .after .img{width: 60rem;}
    #together p.info{font-size: 1.8rem;}
}
@media all and (max-width: 1080px){
    #together .bna{flex-wrap: wrap; flex-direction: column;}
    #together .bna .before .img{width: 55rem;}
    #together .bna .after .img{width: 75rem;}
    #together .bna .before:after{transform: rotate(90deg); width: 23.5rem; height: 15rem; right: -12rem; top: auto; bottom: -13rem;}
	#together .bna .arrow{left: 50%; top: 45%;}
	#together .bna .arrow img{transform: rotate(90deg); max-width: 40vw;}
	#together .bna .before .img img{max-width:100%;}
	#together .bna .after .img img{max-width:100%;}
}
@media all and (max-width: 980px){
    #together .top h4{font-size: 4rem;}
    #together .top h3{font-size: 5.5rem;}
    #together .top p{font-size: 2.2rem;}
    #together .frame{width: 70rem; height: 16.5rem; margin: 3rem auto 0;}
    #together .frame h3{font-size: 3rem; line-height: 4rem;}
    #together .red-bar{margin-top: 3rem;}
    #together .red-bar h3{font-size: 3rem;}
    #together .red-bar h3 span.big{font-size: 5.5rem;}
    br.br980{display: block !important;}
    #together .img_list{margin-top: 6rem;}
    #together .bna .after .img{width: 70rem;}
	#together .befores{top: 30px !important; left: 30px !important;}
	#together .afters{top: 20px !important; right: 20px !important;}
	#together .befores span{font-size: 15px;}
	#together .afters span{font-size: 15px;}
	#together p.info{margin-top: 4.5rem;}
}
@media (max-width: 768px) {
  #together .animate-scan-bar {
    animation: scanMove 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.8s;
  }

  #together .animate-clip-layer {
    animation: clipReveal 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.8s;
  }
	
	#together .afters{animation-delay: 2s !important;}
}

@media all and (max-width: 680px){
    #together .top h4{font-size: 3.5rem;}
    #together .top h3{font-size: 5rem;}
    #together .top p{font-size: 2rem; line-height: 3rem;}
    #together .frame{ background: none; width: 90%; border: 10px double #333; box-sizing: border-box; padding: 3rem 1rem;}
    #together .frame:before{left: -51.1rem;}
    #together .frame:after{right: -51.1rem;}
    #together .frame h3{font-size: 2.7rem;}
    #together .red-bar h3{font-size: 3rem; flex-wrap: wrap; gap: 0 1rem;}
    #together .red-bar h3 span.big{font-size: 5.5rem;}
    br.br980{display: block !important;}
    #together .img_list{margin-top: 6rem;}
    #together .bna .before .img{width: 70vw; margin: -5rem auto 0;}
    #together .bna .after .img{width: 90vw; margin: -5rem auto 0;}
	#together .red-bar h3{display: block;}
	#together .red-bar h3 br{display: block;}
	#together .red-bar h3 span.mo{justify-content: center;}
/*    #together .bna .before:after{width: 20.5rem; height: 13rem; right: -4%;}*/
}
@media all and (max-width: 480px){
    #together .top h4{font-size: 3rem;}
    #together .top h3{font-size: 4.5rem; letter-spacing: -0.06em;}
    #together .top p{font-size: 1.8rem;}
    #together .frame{ height: 18.5rem; padding: 2rem 1rem; margin: 5rem auto 0;}
    #together .frame:before{left: -51.1rem;}
    #together .frame:after{right: -51.1rem;}
    #together .frame h3{font-size: 2.7rem;}
    #together .red-bar{margin-top: 5rem;}
    #together .red-bar h3{font-size: 2.5rem;}
    #together .red-bar h3 span.big{font-size: 4.5rem;}
/*
    #together .bna .tt img{height: 8rem;}
    #together .bna{gap: 4rem;}
    #together .bna .before:after{width: 12.5rem; height: 8rem; bottom: -7rem; right: 0;}
*/
    #together p.info{font-size: 1.6rem;}
}



#factory{color: #222; background: url('/images/main/factory_bg.webp') bottom center / cover no-repeat;}
#factory .s-inner {display: grid; grid-template-columns: repeat(4, 1fr);  gap: 2rem;}
#factory .box .img { width: 100%; height: 100%; }
#factory .box .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#factory .box .img.haccp{position: relative;}
#factory .box .img.haccp:after{position: absolute; content: ''; width: 10rem; height: 10rem; background: url('/images/main/haccp_img.webp') center center / contain no-repeat; bottom: 7rem; left: -2rem;}
#factory .box.txt-area h4{font-size: 4.8rem; margin-bottom: 1.5rem;}
#factory .box.txt-area h3{font-size: 6.4rem; font-family: 'Danjo-bold'; color: var(--red); letter-spacing: -0.06em; position: relative;}
#factory .box.txt-area h3::before{position: absolute; content: ''; width: 0rem; height: 1.7rem; background: url('/images/main/factory_under.webp') left center / cover no-repeat; bottom: -12px;}
#factory .box.txt-area.aos-animate h3::before{animation: factorybefore .75s .5s forwards;}
@keyframes factorybefore{
	0%{width: 0rem;}
	100%{width: 62.6rem;}
}
#factory .box.txt-area h3 svg{position: absolute; left: -9.5rem; top: -7rem; width: 96px; transform: rotate(30deg);}
#factory .box.txt-area h3 svg path {
    fill: none;
    stroke: #E50013;
    stroke-width: 7;

    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}
#factory .box.txt-area.aos-animate h3 svg path{
    animation: draw 2.5s ease forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
/*
#factory .box.txt-area h3:after{position: absolute; content: ''; width: 9.9rem; height: 9.3rem; background: url('/images/main/factory_star.webp') center center / contain no-repeat; left: -9rem; top: -5rem; opacity: 0;}
#factory .box.txt-area.aos-animate h3::after{animation: factoryafter .3s .5s forwards;}
@keyframes factoryafter{
	0%{top: -10rem; opacity: 0;}
	100%{top: -4rem; opacity: 1;}
}
*/
#factory .box.txt-area p{font-size: 3.2rem; line-height: 4.8rem; margin-top: 4rem; font-weight: 500;}
#factory .box.txt-area span.red_bg{font-weight: bold; color: #fff; display: inline-block; background: var(--red); padding: 0 1rem;}
#factory .box.txt-area span.red{font-weight: bold; color: var(--red);display: inline-block; letter-spacing: -0.1em;}
#factory .box.txt-area span.red i{font-style: normal; display: inline-block;}
#factory .box.txt-area span.red i.aos-animate{animation: redfont 1s;}
@keyframes redfont{
	0%{transform: scale(2);}
	100%{transform: scale(1)}
}
#factory .box { position: relative; }
#factory .txt-area { grid-column: 1 / 3; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#factory .img-area:nth-of-type(2) {grid-column: 3 / 5;}
#factory .cert-area {grid-row: 2;}
#factory .img-area:last-child {grid-column: 3 / 5;grid-row: 2;}
#factory .label {position: absolute; bottom: 0; left: 0;background: #000; color: #fff; display: inline-block; font-size: 2.4rem; padding: 1.2rem 2.5rem;}


@media all and (max-width: 1400px){
    #factory .box.txt-area h4{font-size: 4.3rem; margin-bottom: 1rem;}
    #factory .box.txt-area h3{font-size: 6rem;}
	#factory .box.txt-area h3::before{height: 1.5rem;}
    #factory .box.txt-area p{font-size: 3rem; line-height: 4.5rem; margin-top: 3.5rem;}
	@keyframes factorybefore{
		0%{width: 0rem;}
		100%{width: 58.7rem;}
	}
}

@media all and (max-width: 1280px){
    #factory .box.txt-area h4{font-size: 4rem;}
    #factory .box.txt-area h3{font-size: 5.3rem;}
	#factory .box.txt-area h3::before{height: 1.3rem;}
    #factory .box.txt-area p{font-size: 2.7rem; line-height: 4rem; margin-top: 3rem;}
    #factory .label {font-size: 2.2rem;}
	@keyframes factorybefore{
		0%{width: 0rem;}
		100%{width: 49.8rem;}
	}
}


@media all and (max-width: 1080px) {
    #factory .s-inner {grid-template-columns: repeat(2, 1fr);gap: 20px 10px;}
    #factory .txt-area {grid-column: 1 / 3;order: 1; margin-bottom: 5rem;}
    #factory .cert-area:nth-of-type(3) {grid-column: 1 / 2;order: 2;}
    #factory .cert-area:nth-of-type(4) {grid-column: 2 / 3;order: 3;}
    #factory .img-area:nth-of-type(2) {grid-column: 1 / 3;order: 4;}
    #factory .img-area:last-child {grid-column: 1 / 3;order: 5;}
    #factory .box {grid-row: auto !important;}
	#factory .box.txt-area h3 svg{left: -7.5rem;}
}

@media all and (max-width: 768px) {
    #factory .box .img.haccp:after{width: 7rem; height: 7rem; left:-1rem;}
    #factory .label {font-size: 2rem;}
/*
	#factory .box.txt-area h3:after{width: 7.2rem; height: 6.8rem; transform: rotate(53deg); left: -3.5rem;}
	@keyframes factoryafter{
		0%{top: -12rem; opacity: 0;}
		100%{top: -6rem; opacity: 1;}
	}
*/
	#factory .box.txt-area h3 svg{width: 9vw; left: -8.5vw; top: -7vw;}
}
@media all and (max-width:640px){
	#factory .box.txt-area h3 svg{width: 9vw; left: -4vw; top: -9vw; transform: rotate(60deg);}
}
@media all and (max-width: 480px) {
    #factory .box .img.haccp:after{width: 6rem; height: 6rem;}
    #factory .txt-area {margin-bottom: 3rem;}
    #factory .box.txt-area h4{font-size: 3rem;}
    #factory .box.txt-area h3{font-size: 4rem;}
	#factory .box.txt-area h3::before{height: 1.1rem;}
    #factory .box.txt-area p{font-size: 2.5rem; line-height: 3.5rem; margin-top: 3rem;}
    #factory .label {font-size: 1.8rem; padding: 1rem 2rem;}
	@keyframes factorybefore{
		0%{width: 0rem;}
		100%{width: 43rem;}
	}
}




#menu{background: url('/images/main/menu_bg.webp') bottom center / cover no-repeat;}
#menu .top{text-align: center; color: #fff;}
#menu .top p{font-weight: 500; font-size: 2.8rem; text-shadow: 1px 1px 10px rgba(0,0,0,0.5)}
#menu .top h3{font-weight: bold; font-size: 4rem; margin: 1.5rem 0; text-shadow: 1px 1px 10px rgba(0,0,0,0.5)}
#menu .menu_wrap {position: relative;margin: 0rem 4rem 0; text-align: center; background: url('/images/main/menu_wrap_bg_260212.webp') center center / cover no-repeat;}
#menu .menu_wrap > h3 { font-family: 'Danjo-bold'; font-size: 5.6rem; color: #fff; background: var(--red); display: inline-block; padding: 2rem 3rem 1rem; box-shadow: 1px 1px 20px 5px rgba(0,0,0,0.5); position: relative; transform: skewX(-10deg); margin-top: -6rem;}

#menu .menu_wrap .flex_box{display: flex; align-items: center; padding: 6rem 0 6rem 2rem;}
#menu .menu_wrap .flex_box .text{width: 30%;}
#menu .menu_wrap .flex_box .text h3{font-family: 'Danjo-bold'; color: #000; font-size: 3.4rem; line-height: 1.6em;}
#menu .menu_wrap .flex_box .text h3 i{font-style: normal; display: inline-block; margin-bottom: 3px;}
#menu .menu_wrap .flex_box .text h3 span{color: #e60012; font-size: 4.2rem;}
#menu .menu_wrap .flex_box .text h3 span i{font-style: normal; display: inline-block; font-family: 'TtangsBudaeJjigae';}
#menu .menu_wrap .flex_box .menu_list{width: 70%;}
#menu .menu_wrap .flex_box .menu_list > div > div{display: flex; align-items: center;}

/* slider 자체 padding 정리 */
#menu .menu_list {
  padding: 0 !important; padding-left: 3% !important;
}

/* item 간격은 padding으로만 관리 */
#menu .menu_list .item {
  padding: 0rem;   /* 핵심 */
  margin: 0 -2.5rem;        /* 음수 margin 제거 */
  outline: none;
}

#menu .menu_list .item.slick-current + .item + .item{margin-left: -12.5rem;}

/* 모든 슬라이드는 동일한 큰 기준 */
#menu .menu_list .img {
  width: 27vw;
  margin: 0 auto;
}

#menu .menu_list .item .img img{width: 100%;}


#menu .menu_list .slick-slide, #menu .menu_list .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] {
  display: block;
  transform: scale(0.6, 0.6);
  transition: transform .4s, opacity .4s !important;
  transform-origin: center;
}

#menu .menu_list .slick-slide.slick-active, #menu .menu_list .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] {
   transform: scale(1, 1);
   transition: transform .4s, opacity .4s !important;
   transform-origin: center;
}

/*#menu .menu_list .item:hover .img img{transform: scale(1.05);}*/
#menu .menu_list .txt {display: flex;justify-content: center;align-items: center;gap: 1rem;margin-top: 2rem; opacity: 0; transition: .4s;}
#menu .menu_list .item.slick-current .txt{opacity: 1;}
#menu .menu_list .txt h3 {background: url('/images/main/hit_bg.webp') center center / contain no-repeat; color: #fff;font-size: 2rem; font-family: 'Danjo-bold'; width: 7.4rem; height: 4.6rem; display: flex; align-items: center; justify-content: center;}
#menu .menu_list .txt h3 span{display: inline-block;padding-top: 0.3rem;}
#menu .menu_list .txt p {font-size: 2.7rem; font-family: 'Danjo-bold'; color: #222; padding-top: 0.5rem;}
#menu .menu_list .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 9.5rem; height: 9.5rem; background: #000; border-radius: 50%; border: none; cursor: pointer; font-size: 0; }
#menu .menu_list .slick-prev { left: -4rem; }
#menu .menu_list .slick-next { right: -4rem; }
#menu .menu_list .slick-prev:before,
#menu .menu_list .slick-next:before {font-size: 3.6rem;}

@media all and (max-width: 1500px){
    #menu .menu_list{padding: 5rem 6rem;}
    #menu .menu_list .item {padding: 0 3rem;}
	#menu .menu_wrap .flex_box{padding: 5rem; padding-right: 0;}
	#menu .menu_wrap .flex_box .text h3{font-size: 1.9vw;}
	#menu .menu_wrap .flex_box .text h3 span{font-size: 2.3vw;}
	#menu .menu_list .item{margin: 0 -4rem;}
}
@media all and (max-width: 1280px){
    #menu .menu_wrap > h3 {font-size: 4.6rem;}
    #menu .menu_list{padding: 5rem 3rem;}
    #menu .menu_list .item {padding: 0 2rem;}
    #menu .menu_list .slick-arrow {width: 7rem; height: 7rem;}
    #menu .menu_list .slick-prev:before,
    #menu .menu_list .slick-next:before {font-size: 2.6rem;}
    #menu .menu_list .txt h3 {font-size: 1.8rem;width: 6.5rem; height: 4rem;}
    #menu .menu_list .txt p {font-size: 2.4rem;}
}
@media all and (max-width:1080px){
	#menu .menu_wrap .flex_box{flex-direction: column; padding: 4rem 0 6rem;}
	#menu .menu_wrap .flex_box .text{width: 100%;}
	#menu .menu_wrap .flex_box .text h3{font-size: 27px;}
	#menu .menu_wrap .flex_box .text h3 span{font-size: 34px;}
	#menu .menu_wrap .flex_box .menu_list{width: 100%; padding-left: 0 !important; margin-top: 2rem;}
	#menu .menu_list .img{width: 36vw;}
	#menu .menu_list .txt{margin-top: 0;}
}
@media all and (max-width: 768px){
    #menu .menu_wrap {margin: 0rem 2rem 0;}
    #menu .menu_wrap > h3 {font-size: 4rem;padding: 1.5rem 2rem 0.5rem;}
    #menu .menu_list .slick-arrow {width: 6rem; height: 6rem;}
    #menu .menu_list .slick-prev:before,
    #menu .menu_list .slick-next:before {font-size: 2.3rem;}
    #menu .menu_list .slick-prev { left: -2rem; }
    #menu .menu_list .slick-next { right: -2rem; }
	#menu .menu_wrap .flex_box .text h3{font-size: 21px;}
	#menu .menu_wrap .flex_box .text h3 span{font-size: 27px;}
	#menu .menu_list .item{margin: 0 -3rem;}
	#menu .menu_list .img{width: 45vw;}
	#menu .menu_list .txt{gap:0.5rem;}
	#menu .menu_list .txt h3{font-size: 1.7rem; width: 6rem; height: 3.7rem;}
	#menu .menu_list .txt p{font-size: 2.2rem;}
}
@media all and (max-width: 480px){
    #menu .menu_wrap {margin: 0rem 1rem 0;}
    #menu .top p{font-size: 2.2rem;}
    #menu .top h3{font-size: 3.5rem; margin: 1rem 0;}
    #menu .menu_wrap > h3 { font-size: 3.2rem; padding: 1rem 2rem 0.5rem; }
	#menu .menu_wrap .flex_box{flex-direction: column; padding: 4rem 0 5rem;}
	#menu .menu_wrap .flex_box .text h3{font-size: 20px;}
	#menu .menu_wrap .flex_box .text h3 span{font-size: 25px;}
	#menu .menu_list .img{width: 52vw;}
/*	#menu .menu_list .img img{transform: scale(0.65);}*/
}


#review { position: relative; overflow: hidden; background: url('/images/main/review_bg.webp') bottom center / cover no-repeat;}
#review .top{text-align: center;}
#review .top h3{font-size: 6.4rem; font-family: 'Danjo-bold'; color: var(--red);}
#review .top h3 i{display: inline-block; font-style: normal;}
#review .top p{color: #222; font-size: 3.2rem; line-height: 5rem; font-weight: 500; margin-top: 2rem;}
#review .top p span{color: #fff; font-weight: bold; display: inline-block;padding: 0 1rem; position: relative;}
#review .top p span::before{content: ''; top: 0; left: 0; width: 0%; height: 100%; z-index: -1; position: absolute; background: var(--red); transition: .4s 0.5s;}
#review .top.aos-animate p span::before{width: 100%;}
#review .phone_frame { position: relative; margin-top: 8rem;}
#review .phone_frame .img {width: 42rem; position: relative; margin: 0 auto;}
#review .phone_frame .img:after {content: ''; width: 18rem; height: 8.5rem; background: url('/images/main/star.webp') center center / contain no-repeat; position: absolute; top: -2rem; right: -9rem; z-index: 10;}
#review .phone_frame .img img{width: 100%;}
#review .phone_bg { width: 100%; display: block; position: relative; z-index: 2; pointer-events: none; }
#review .phone_frame { position: relative; margin-top: 8rem; display: flex; justify-content: center; align-items: center; }
#review .phone_frame .img { width: 43rem; position: relative; z-index: 10; pointer-events: none; margin: 0 auto; }
#review .review_slider { position: absolute; bottom: 6rem; left: 50%; transform: translatex(-50%); width: 100%; z-index: 1; }
#review .review_slider .item { transition: all 0.3s ease; padding: 0 4rem;}
#review .review_slider .item.slick-center { transform: scale(1.2);  z-index: 5;position: relative;}
#review .review_slider .item.slick-center img{opacity: 1;}
#review .review_slider .item img { width: auto; height: 55rem;  margin: 0 auto; box-shadow: 0 0 20px 0px rgba(0,0,0,.4);}
#review .review_slider .item.slick-center img {box-shadow: none}
#review .review_slider_list { position: absolute; bottom: 6rem; left: 50%; transform: translatex(-50%); width: 100%; z-index: 0; }
#review .review_slider_list .item { transition: all 0.3s ease; padding: 0 4rem;}
/*#review .review_slider_list .item.slick-center { transform: scale(1.2);  z-index: 5;position: relative;}*/
#review .review_slider_list .item img { width: auto; height: 55rem;  margin: 0 auto; box-shadow: 0 0 20px 0px rgba(0,0,0,.4);}
#review .review_slider_list .item.slick-center img {box-shadow: none}
#review .slick-list { overflow: visible; }
#review .white_bg{background: #fff; width: 42rem; height: 100%; position: absolute; border-radius: 10rem 10rem 0 0;}


@media all and (max-width: 1280px){
    #review .top h3{font-size: 6rem;}
    #review .top p{font-size: 3rem; line-height: 4.5rem;}
}
@media all and (max-width: 768px){
    #review .top h3{font-size: 5rem;}
    #review .top p{font-size: 2.7rem; line-height: 4.5rem;}
    #review .phone_frame .img {width: 43rem;}
    #review .phone_frame .img:after {width: 16rem; height: 7.5rem; right: -6rem;}
    #review .white_bg{width:39rem;}
}
@media all and (max-width: 480px){
    #review .top h3{font-size: 4.5rem;}
    #review .top p{font-size: 2.3rem; line-height: 3.5rem;}
    #review .phone_frame {margin-top: 6rem;}
    #review .phone_frame .img {width: 27rem;}
    #review .phone_frame .img:after {width: 13rem;}
    #review .white_bg{width:26rem; border-radius: 6rem 6rem 0 0;}
    #review .review_slider .item {padding: 0 3rem;}
    #review .review_slider .item img {height: 34rem; margin-top: 10rem;}
    #review .review_slider_list .item {padding: 0 3.5rem;}
    #review .review_slider_list .item img {height: 34rem;}
}



#royalty{background: url('/images/main/royalty_bg2.webp') bottom center / cover no-repeat; padding: 16rem 0; color: #fff;}
#royalty .inner{display: flex;gap: 15rem; justify-content: center; align-items: flex-start;}
#royalty .img{position: sticky; top: 200px;}
#royalty .img img:nth-child(1){position: absolute; left: -9rem; top: -2rem; filter: drop-shadow(1px 1px 20px rgba(0,0,0,0.3)); z-index: 2;}
#royalty .txt{text-align: center; padding-top: 40px; position: relative; width: 33vw;}
#royalty .txt_box{opacity: 0; transition: .4s; position: absolute; width: 100%;}
#royalty .txt_box.on{opacity: 1;}
#royalty .txt h4{ font-size: 4.8rem; margin-bottom: 2rem;}
#royalty .txt h3{ font-size: 6.4rem; color: var(--red); font-family: 'Danjo-bold'; position: relative; animation: succesflicker infinite 1s;}
#royalty .txt p.red_bg{font-weight: bold; font-size: 3rem;padding: 1rem 2rem;  display: inline-block; margin: 2rem 0; position: relative;}
#royalty .txt p.red_bg::after{content: ''; width: 0%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: -1; background: var(--red); transition: .4s .5s;}
#royalty .txt.aos-animate p.red_bg::after{width: 100%;}
#royalty .txt p.cont{font-weight: 600; font-size: 2.4rem; line-height: 4rem;}
/*#royalty .txt .promise{background-color: #583c3399; border-radius: 20px; margin-top: 160px; padding: 60px; position: relative; opacity: 0; transition: .4s;}*/
#royalty .txt .promise{background-color: #583c3399; border-radius: 20px; padding: 60px; position: relative; opacity: 0; transition: .4s; position: absolute; width: 100%;}
#royalty .txt .promise.on{opacity: 1;}
#royalty .txt .promise h5{font-size: 24px; font-weight: 700; color:#000; background-color: #fff; border-radius: 60px; display: inline-block; padding: 12px 20px; position: absolute; left: 50%; transform: translateX(-50%); top: -26px; min-width: max-content;}
#royalty .txt .promise .tit{font-size: 40px; color: #fff;}
#royalty .txt .promise .tit b{font-size: 64px; font-family: 'Danjo-bold'; display: block; margin-top: 15px;}
#royalty .txt .promise .tit b span{color: #fc8506;}
#royalty .txt .promise .text{font-size: 24px; font-weight: 600; color: #fff; line-height: 1.6em; margin-top: 15px;}

@media all and (max-width:1600px){
	#royalty .txt{width: 50%;}
}
@media all and (max-width: 1280px){
	#royalty{padding: 14rem 0;}
    #royalty .inner{gap: 10rem;}
    #royalty .img img:nth-child(1){width: 16rem;left: -5rem;}
    #royalty .txt h4{ font-size: 4rem;}
    #royalty .txt h3{ font-size: 6rem;}
    #royalty .txt p.red_bg{font-size: 2.7rem;}
    #royalty .txt p.cont{ font-size: 2rem; line-height: 3.5rem;}
}
@media all and (max-width: 980px){
    #royalty .inner{gap: 6rem; flex-wrap: wrap;flex-direction: column;}
    #royalty .txt{text-align: center; width: 100%;}
	#royalty .img{position: relative; top: 0;}
	#royalty .inner{align-items: center;}
/*	#royalty .txt_box{opacity: 1 !important;}*/
	#royalty .txt_box{ position: relative;}
	#royalty .txt .promise{/* margin-top: 100px; opacity: 1 !important; */ padding: 50px; top: 60px;}
	#royalty .txt .promise h5{font-size: 22px;}
	#royalty .txt .promise .tit{font-size: 36px;}
	#royalty .txt .promise .tit b{font-size: 56px;}
	#royalty .txt .promise .text{margin-top: 12px; font-size: 22px;}
}
@media all and (max-width: 680px){
	#royalty{padding: 12rem 0;}
	#royalty .inner{gap:4rem;}
    #royalty .img img:nth-child(2){width: 25rem;}
	#royalty .txt .promise{/* margin-top:90px; opacity: 1 !important; */ padding: 40px;}
	#royalty .txt .promise h5{font-size: 20px; min-width: max-content;}
	#royalty .txt .promise .tit{font-size: 32px;}
	#royalty .txt .promise .tit b{font-size: 48px; margin-top: 10px;}
	#royalty .txt .promise .text{margin-top: 12px; font-size: 20px;}
}
@media all and (max-width: 480px){
    #royalty .img img:nth-child(1){width: 13rem;}
    #royalty .img img:nth-child(2){width: 22rem;}
    #royalty .txt h4{ font-size: 3.5rem;}
    #royalty .txt h3{ font-size: 5rem;}
    #royalty .txt p.red_bg{font-size: 2.3rem;}
    #royalty .txt p.cont{ font-size: 1.8rem; line-height: 3rem;}
	#royalty .txt .promise{/* margin-top:80px; opacity: 1 !important; */ padding: 35px;}
	#royalty .txt .promise h5{font-size: 18px; min-width: max-content;}
	#royalty .txt .promise .tit{font-size: 28px;}
	#royalty .txt .promise .tit b{font-size: 42px; margin-top: 6px;}
	#royalty .txt .promise .text{margin-top: 6px; font-size: 18px;}
}



#profit{background: url('/images/main/profit_bg.webp') center center / cover no-repeat; overflow-x: hidden; overflow-y: hidden;}
#profit .s-inner{display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#profit .lt{width: 50%;padding: 0 4rem;}
#profit .rt{width: 50%;}
#profit .top{text-align: center; color: #222;}
#profit .top h3{font-family: 'Danjo-bold'; font-size: 6.4rem;}
#profit .top p{font-size: 3rem; font-weight: bold; margin: 2rem 0 5rem;}
#profit .top p span{display: inline-block;  color: #fff;padding: 0.5rem 1.5rem; position: relative;}
#profit .top p span::before{content: ''; width: 0; height: 100%; position: absolute; left: 0; top: 0; display: block;background: var(--red); transition: .4s .5s; z-index: -1;}
#profit .top.aos-animate p span::before{width: 100%;}
#profit .r_list{ background: url('/images/main/r_list_bg.webp') center center / cover no-repeat; padding: 6rem 5rem 1rem; margin: 0 auto; width: 95%; position: relative; box-shadow: 1px 1px 20px 0 rgba(0,0,0,0.2);}
#profit .r_list:after{position: absolute; content: ''; width: 10rem; height: 10rem; background: url('/images/main/Pin.webp') center center / contain no-repeat; top: -3rem; left: 50%; transform: translateX(-50%);}
#profit dl{display: flex; justify-content: space-between; color: #222; font-weight: 500; align-items: center; padding: 1rem;}
#profit dl.big{ margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--red);}
#profit dl.big dt{font-size: 3rem;font-weight: 500;}
#profit dl.big dd{font-size: 4rem; font-weight: bold;}
#profit dl + dl{border-bottom: 1px dashed #e4e4e4;}
#profit dl:last-child{border-bottom: 0;}
#profit dl {font-weight: 600;font-size: 2.4rem;}
#profit dl span{font-size: 2rem; font-weight: 500; color: #666;}
#profit .all{background: var(--red); color: #fff; padding: 2rem; box-shadow: 1px 5px 20px 0 rgba(0,0,0,0.2);}
#profit .all dl{padding: 0 5rem; margin-bottom: 0;padding-bottom: 0; color: #fff;}
#profit .all dl span{color: #fff;}
#profit .all dl.big dd{animation: proofflicker infinite 1s;}
#profit .rt .img{width: 100%; padding: 0 4rem; position: relative; text-align: center;}
#profit .rt img.graph{width: 100%; transform: rotate(120deg); transition: .6s .8s;}
#profit .rt.aos-animate img.graph{transform: rotate(0);}
#profit .rt img.txt{position: absolute; left: 10%; top: 15%; opacity: 0; transition: .6s 1s;}
#profit .rt.aos-animate img.txt{opacity: 1;}
#profit .info{text-align: center; margin-top: 8rem; color: #222; font-size: 1.8rem; font-weight: 600; opacity: 0.6;}

@media all and (max-width: 1400px){
    #profit .rt img.txt{width: 15rem;}
    #profit .r_list{padding: 6rem 4rem 1rem;}
    #profit .all dl{padding: 0 4rem;}
}
@media all and (max-width: 1280px){
    #profit .top h3{font-size: 6rem;}
    #profit .top p{font-size: 2.5rem;}
    #profit .r_list{padding: 5rem 3rem 1rem;}
    #profit .r_list:after{width: 8rem;}
    #profit dl.big dt{font-size: 2.5rem;}
    #profit dl.big dd{font-size: 3.5rem;}
    #profit dl {font-size: 2rem;}
    #profit dl span{font-size: 1.6rem;}
    #profit .all dl{padding: 0 3rem;}
}
@media all and (max-width: 1080px){
    #profit .lt{width: 100%;}
    #profit .rt{width: 100%; margin-top: 8rem;}
    #profit .rt img.graph{max-width: 700px;}
    #profit .rt img.txt{width: 20%;}
    #profit .info{margin-top: 6rem;}
}
@media all and (max-width:768px){
    #profit .top h3{font-size: 5rem;}
    #profit .lt{padding: 0 2rem;}
    #profit .rt .img{padding: 0 2rem;}
    #profit .rt img.txt{width: 25%;}
}
@media all and (max-width:500px){
    #profit .top h3{font-size: 4.5rem;}
    #profit .top p{font-size: 2rem;}
    #profit .lt{padding: 0;}
    #profit .rt{margin-top: 5rem;}
    #profit .rt img.txt{width: 25%;}
    #profit .r_list{padding: 4rem 2rem 1rem;}
    #profit .all dl{padding: 0 1rem;}
    #profit .info{margin-top: 5rem; font-size: 1.6rem; line-height: 2.6rem;}
}


#structure{background: url('/images/main/structure_bg.webp') center center / cover no-repeat;}
#structure .top h4{color: #222; font-size: 4.8rem; margin-bottom: 2rem;}
#structure .top h3{color: #222;}
#structure .top p{color: #222; font-weight: 600;}
#structure .m_txt{margin-bottom: 4rem;}

#structure .vs-wrap{ display: flex; align-items: center; justify-content: center; color: #222;}
#structure .card {border-radius: 2rem; text-align: center;}
#structure .card-gray { background: #a4a4a4; width: 40rem; padding: 3rem;}
#structure .card-green { width: 44rem; background: #22ac38; padding: 4rem; animation: structure 1s infinite;}
@keyframes structure{
	0%{transform: scale(1)}
	50%{transform: scale(1.03)}
	100%{transform: scale(1)}
}
#structure .card h3 {color: #fff; font-size: 3.4rem; margin-bottom: 2rem;}
#structure .card img {margin-bottom: 2rem; margin-left: auto; margin-right: auto;}
#structure .card-body {background:#fff;border-radius: 1rem;}
#structure .cont { padding: 2rem; font-size: 3rem; font-weight: 500; position: relative;}
#structure .cont + .cont{border-top: 1px solid rgba(0,0,0,0.1);}
#structure .cont span { line-height: 3.6rem; font-size: 2.4rem;}
#structure .card-green .cont{padding: 2.5rem 2rem;}
#structure .card-green .cont.second{padding: 2rem;}
#structure .card-green b{color: #22ac38;}

#structure .labels {display: flex;flex-direction: column;align-items: center;width: 16rem;}
#structure .vs-text { font-size: 4rem; font-weight: 800;height: 6rem; line-height: 3rem;}
#structure .labels .item {font-size: 2.8rem; font-weight: bold; height: 7.5rem; display: flex;align-items: center;justify-content: center; width: 100%;}
#structure .item + .item{border-top: 1px solid rgba(0,0,0,0.1);}
#structure .labels .item.second {height: 11.4rem;}

#structure .bot_txt {text-align: center; margin-top: 5rem;}
#structure .bot_txt h3{color: #222;font-size: 2.6rem; line-height: 4rem;}
#structure .bot_txt h3 span{color: var(--red);border-bottom: 2px solid var(--red); display: inline-block; line-height: 3rem;}
#structure .bot_txt p{color: #222;font-size: 1.8rem; margin-top: 5rem; opacity: 0.6; font-weight: 600;}

@media all and (max-width: 1280px) {
    #structure .top h4{font-size: 4.4rem;}
}
@media all and (max-width: 980px) {
    #structure .top h4{font-size: 4rem;}
    #structure .card-gray {padding: 2rem;}
    #structure .card-green {padding: 3rem;}
    #structure .labels .item {font-size: 2.4rem;}
}
@media all and (max-width: 768px) {
    #structure .top h4{font-size: 3.5rem;}
    #structure .vs-wrap {flex-direction: column; gap: 10px;}
    #structure .labels .item{display: none; }
    #structure .vs-text { height: auto; margin: 0rem 0 3rem;}
    #structure .card-gray { width: 100%; transform: scale(0.85);}
    #structure .card-green { width: 96%; margin-left: auto; margin-right: auto;}
    #structure .cont::before {content: attr(data-label);display: block;font-size: 1.8rem;color: #fff;margin-bottom: 5px; background: #a4a4a4; width: fit-content; border-radius: 100px; padding: 0.5rem 2rem; margin: 0 auto 1rem;}
    #structure .card-green .cont::before {background: #22ac38;}
    #structure .card img {max-width: 20rem;}
    #structure .bot_txt h3{font-size: 2.2rem; line-height: 3.5rem;}
    #structure .bot_txt h3 span{line-height: 2.5rem;}
    #structure .bot_txt p{font-size: 1.6rem; margin-top: 3rem; line-height: 2.6rem;}
}
@media all and (max-width: 480px) {
    #structure .top h4{font-size: 3rem;}
    #structure .card h3 {font-size: 3rem;}
    #structure .cont { padding: 1.5rem; font-size: 2.5rem;}
    #structure .cont span { line-height: 3rem; font-size: 2rem;}
    #structure .card-green .cont{padding: 1.5rem;}
    #structure .card-green .cont.second{padding: 1.5rem;}
}


#system{background: url('/images/main/system_bg_260202.webp') center center / cover no-repeat; position: relative;}
#system .top p{font-size: 2.4rem;}
#system .top p.red_bg{font-size: 3rem; margin-top: 1rem; display: inline-block;padding: 0.5rem 1rem; position: relative;}
#system .top p.red_bg::before{content: ''; width: 0%; height: 100%; top: 0; left: 0; background: var(--red); position: absolute; z-index: -1; transition: .4s .5s;}
#system .top.aos-animate p.red_bg::before{width: 100%;}
#system .process { display: flex; flex-wrap: wrap; width: 100%; gap: 6rem 4rem; }
#system .p_item { position: relative; flex: 0 0 calc((100% - 8rem) / 3); background: #fff; border: 1rem solid #086e38; border-radius: 2rem; padding: 5rem 2rem 3rem; text-align: center; box-sizing: border-box; min-height: 22rem; display: flex; flex-direction: column; justify-content: center;  transition: .4s;}
#system .p_item:hover{transform: scale(1.08);}
#system .p_item:nth-child(1){z-index: 6;}
#system .p_item:nth-child(2){z-index: 5;}
#system .p_item:nth-child(3){z-index: 4;}
#system .p_item:nth-child(4){z-index: 3;}
#system .p_item:nth-child(5){z-index: 2;}
#system .p_item:nth-child(6) {background: #e30613;border-color: #e30613; z-index: 1;}
#system .p_item::after { content: ""; position: absolute; right: -7rem; top: 50%; transform: translateY(-50%); width: 9rem; height: 7rem; background: url('/images/main/arrow_black.webp') no-repeat center/contain; z-index: 99;}
#system .p_item:nth-child(3n):after {display: none;}
#system .step { position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); background: #086e38; color: #fff; font-size: 2.4rem; font-weight: 700; padding: 1.2rem 3rem; border-radius: 1rem; white-space: nowrap; }
#system .p_item:nth-child(6) .step {background: #fff;color: #e30613; border: 5px solid var(--red); box-sizing: border-box;}
#system .p_item h3 {font-size: 3.2rem;color: #086e38;margin-bottom: 1.5rem;font-weight: 800;word-break: keep-all; font-family: 'Danjo-bold';}
#system .p_item:nth-child(6) h3 {color: #fff;}
#system .p_item p {font-size: 2.2rem;color: #333;line-height: 3.2rem;word-break: keep-all; font-weight: 500; letter-spacing: -0.06em;}
#system .p_item:nth-child(6) p {color: #fff;}


@media all and (max-width: 1280px) {
    #system .top p{font-size: 2.2rem;}
    #system .top p.red_bg{font-size: 2.7rem;}
    #system .step {font-size: 2.2rem;}
    #system .p_item p {font-size: 2rem; line-height: 3rem;}
}
@media all and (max-width: 1080px) {
    #system .p_item { flex: 0 0 calc((100% - 4rem) / 2);}
    #system .p_item:nth-child(3n):after {display: block;}
    #system .p_item:nth-child(2n):after {display: none;}
    
}
@media all and (max-width: 768px) {
	#system{background: none;}
	#system::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url('/images/main/system_bg_260202.webp') center center / cover no-repeat;
		z-index: -1;
	}
    #system .top{margin-bottom: 8rem;}
	#system .step{top: -2.5rem; padding: 1rem 2rem; font-size: 2rem;}
    #system .process {flex-direction: column;align-items: center;gap: 8rem;}
	#system .p_item h3{margin-bottom: 0.5rem;}
    #system .p_item { flex: 0 0 1; width: 90%; margin-left: auto; margin-right: auto; padding: 3.5rem	2rem 2rem; min-height: 0;}
    #system .p_item::after {right: auto; top: auto; transform: translate(-50%, 0) rotate(90deg); left: 50%; bottom: -5.5rem;}
    #system .p_item:nth-child(2n):after {display: block;}
    #system .p_item:last-child:after {display: none;}
}
@media all and (max-width: 480px) {
    #system .top{margin-bottom: 7rem;}
    #system .top p{font-size: 2rem;}
    #system .top p.red_bg{font-size: 2.4rem;}
    #system .p_item h3 {font-size: 2.8rem;}
    #system .p_item p {font-size: 1.8rem; line-height: 2.8rem;}
}


.x-strike {
    position: relative;
    display: inline-block;
}

.x-strike svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.x-strike svg line {
    stroke: #e74c3c;
    stroke-width: 7;
    stroke-linecap: round;
}

.x-strike svg .line1,
.x-strike svg .line2 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.x-strike.animate svg .line1 {
    animation: drawLine 0.6s ease-out forwards;
}

.x-strike.animate svg .line2 {
    animation: drawLine 0.6s ease-out 0.3s forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}


/* risk */
#risk{display: flex; align-items: flex-start; justify-content: space-between;}
#risk .l_cont{width: 50%; background: url(/images/main/risk_l_cont.webp) no-repeat center center / cover; padding: 100px 3%; position: sticky; top: 0; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#risk .l_cont .m_txt{margin-bottom: 30px;}
#risk .l_cont .m_txt h5{font-size: 24px; font-weight: 600; color: #666666; word-break: keep-all; margin-bottom: 20px;}
#risk .l_cont .m_txt h4{font-size: 40px; color: #000; margin-bottom: 10px;}
#risk .l_cont .m_txt h3{color: #000; word-break: keep-all;}
#risk .l_cont .m_txt p{font-size: 20px; color: #333333; font-weight: 600; word-break: keep-all; line-height: 1.6em; margin-top: 1.5rem;}
#risk .l_cont .img{margin-left:auto; margin-right: auto; text-align: center; max-width: 703px; position: relative;}
#risk .l_cont .img img{max-width: 100%;}
#risk .l_cont .img p{position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;font-size: 28px; color: #fff; background: rgba(0,0,0,0.7); padding: 15px 0; font-weight: 700;}
#risk .r_cont{width: 50%;}
#risk .r_cont .box{padding: 14rem 3%; width: 100%; overflow: hidden;}
#risk .r_cont .box.box1{background-color: #816d64;}
#risk .r_cont .box.box2{background-color: #715244;}
#risk .r_cont .box.box3{background: url('/images/main/box3_bg.jpg') center center / cover no-repeat;}
/* #risk .r_cont .box.box3{background-color: #52423a;} */
#risk .r_cont .box .m_txt{}
#risk .r_cont .box .m_txt h4{font-size: 40px; color: #fff;}
#risk .r_cont .box .m_txt h3{display: inline-block; color: #fff; padding: 10px 20px 0 20px; margin-top: 10px; word-break: keep-all;}
#risk .r_cont .box.box1 .m_txt h3{background-color: #53392f;}
#risk .r_cont .box.box2 .m_txt h3{background-color: #4e2d21;}
#risk .r_cont .box.box3 .m_txt h3{background-color: #08223b;}
#risk .r_cont .box .icon{text-align: center;}
#risk .r_cont .box .icon img{max-width: 100%; margin: 0 auto;}
#risk .r_cont .box.box3{color: #fff;}
#risk .r_cont .box.box3 .top{display: flex; justify-content: center; align-items: center;}
#risk .r_cont .box.box3 .top .img{display: flex; gap: 2rem; align-items: center; border-right: 1px solid #fff; padding-right: 4rem;}
#risk .r_cont .box.box3 .top .img img{width: 10rem;}
#risk .r_cont .box.box3 .top .img p{text-align: center; font-size: 2rem;}
#risk .r_cont .box.box3 .top .img p span{font-size: 4rem; font-weight: bold;}
#risk .r_cont .box.box3 .top .txt{padding-left: 4rem;}
#risk .r_cont .box.box3 .top .txt h3{font-family: 'Danjo-bold'; font-size: 4rem;}
#risk .r_cont .box.box3 .top .txt p{font-size: 2rem;}
#risk .r_cont .box.box3 .top .txt p + p{margin-top: 0.5rem;}
#risk .r_cont .box.box3 .top .txt p a{color: #fff; text-decoration: underline;}
#risk .r_cont .box.box3 .m_txt{margin-top: 3rem;}

@media all and (max-width:1720px){
	#risk .l_cont .m_txt h5{font-size: 22px;}
	#risk .l_cont .m_txt h4{font-size: 3vw;}
	#risk .l_cont .m_txt h3{font-size: 4vw;}
	#risk .l_cont .m_txt p{font-size: 19px;}
	#risk .l_cont .img p{font-size: 2vw;}
	
	#risk .r_cont .box{padding: 5vw 3%;}
	#risk .r_cont .box .m_txt{margin-bottom: 4rem;}
	#risk .r_cont .box .m_txt h4{font-size: 2.5vw;}
	#risk .r_cont .box .m_txt h3{font-size: 3vw;}
	#risk .r_cont .box .icon img{max-width: 25vw;}
}

@media all and (max-width:980px){
	#risk{flex-direction: column;}
	#risk .l_cont{width: 100%; min-height: auto;padding: 10rem 3%; position: static;}
	#risk .l_cont .m_txt h5{font-size: 20px; margin-bottom: 15px;}
	#risk .l_cont .m_txt h4{font-size: 5vw;}
	#risk .l_cont .m_txt h3{font-size: 6vw;}
	#risk .l_cont .m_txt p{font-size: 18px;}
	#risk .l_cont .img p{font-size: 4vw;}
	#risk .r_cont{width: 100%; position: relative; z-index: 2;}
	#risk .r_cont .box{padding: 8rem 3%;}
	#risk .r_cont .box .m_txt h4{font-size: 4vw;}
	#risk .r_cont .box .m_txt h3{font-size: 5vw;}
	#risk .r_cont .box .m_txt p{margin-top: 2.5rem;}
	#risk .r_cont .box .icon img{max-width: 40vw;}
}
@media all and (max-width:640px){
	#risk .l_cont{padding: 8rem 3%;}
	#risk .l_cont .m_txt h4{font-size: 6vw;}
	#risk .l_cont .m_txt h3{font-size: 7vw;}
	#risk .l_cont .img p{font-size: 4.5vw;}
	#risk .r_cont .box .m_txt h3{padding: 10px 15px 5px 15px;}
	#risk .r_cont .box .m_txt h4{font-size: 5vw;}
	#risk .r_cont .box .m_txt h3{font-size: 6vw;}
	#risk .r_cont .box .icon img{max-width: 50vw;}
	#risk .r_cont .box .m_txt p{margin-top: 2.2rem; font-size: 2rem;}

    #risk .r_cont .box.box3 .top .img{padding-right: 2rem;}
    #risk .r_cont .box.box3 .top .img img{width: 8rem;}
    #risk .r_cont .box.box3 .top .img p{font-size: 1.8rem;}
    #risk .r_cont .box.box3 .top .img p span{font-size: 3rem;}
    #risk .r_cont .box.box3 .top .txt{padding-left: 2rem;}
    #risk .r_cont .box.box3 .top .txt h3{font-size: 2.5rem;}
    #risk .r_cont .box.box3 .top .txt p{font-size: 1.6rem;}
}
@media all and (max-width:500px){
	#risk .r_cont .box .m_txt h4{font-size: 6vw;}
	#risk .r_cont .box .m_txt h3{font-size: 7vw;}
	#risk .r_cont .box .m_txt h3{padding: 8px 12px 3px 12px;}
	#risk .l_cont .m_txt h4{font-size: 7vw;}
	#risk .l_cont .m_txt h3{font-size: 9vw;}
}


#interview{background: url('/images/main/Interview_bg_260409.jpg') center center / cover no-repeat;}
#interview .s-inner{display: flex; align-items: center;}
#interview .lt{width: 50%;}
.mainInterview{width: 100%; margin: 0px auto; position: relative; z-index: 5;}
.mainInterview .vod-wrap{position:relative; width: 100%; height: 0; padding-bottom: 56.25%;}
.v-cover{position:absolute; left:0; top:0; width:100%; height:100%; cursor: pointer; z-index: 10;}
.v-cover::after{position:absolute; left:0; top:0; width:100%; height:100%; cursor: pointer; z-index: 10; background: #00000050; content: '';z-index: 9;}
.v-cover img{width: 100%;}
.v-cover .play{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);z-index: 11; transition: 0.3s;}
.v-cover .play:hover{transform: translate(-50%, -50%) scale(1.05); transition: 0.3s;}
.v-con{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

#interview .rt{width: 50%; padding-left: 80px; color: #222; color: #fff;}
#interview .rt .top h4{font-size: 4rem;    text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.9);}
#interview .rt .top h3{font-size: 5rem; font-family: 'Danjo-bold'; margin: 2rem 0 5rem;     text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.9);}
#interview .rt .top h3 span{color: var(--red); }
#interview .rt .bot p{font-size: 2.7rem;}
#interview .rt .bot p span{color: #fff; display: inline-block; font-weight: bold;padding: 2px 5px; position: relative;}
#interview .rt .bot p span:before{    content: ''; top: 0; left: 0; width: 0%; height: 100%; z-index: -1; position: absolute; background: var(--red); transition: .4s 0.5s; }
#interview .rt .bot.aos-animate p span:before{width: 100%;}
#interview .rt .bot p + p{margin-top: 1rem;}

br.br768{display: none;}

@media all and (max-width:1480px){
    #interview .rt{padding-left: 40px;}
    #interview .rt .top h4{font-size: 3.5rem;}
    #interview .rt .top h3{font-size: 4.5rem;}
    #interview .rt .bot p{font-size: 2.5rem;}
}
@media all and (max-width:1280px){
    #interview .s-inner{flex-wrap: wrap; justify-content: center;gap: 5rem;}
    #interview .lt{width: 80%;order: 2;}
    #interview .rt{width: 100%; text-align: center; order: 1;padding-left: 0;}
    .v-cover .play img{width: 10rem;}
}
@media all and (max-width:768px){
    #interview .lt{width: 90%;}
    #interview .rt .top h4{font-size: 3rem;}
    #interview .rt .top h3{margin-bottom: 3rem;}
    .v-cover .play img{width: 6rem;}
    br.br768{display: block !important;}
}


#i_story{background: #fff;}
/* #i_story{background: url(/images/main/cost_bg.webp) center center / cover no-repeat;} */
#i_story .s-inner{display: flex; align-items: center;}
#i_story .lt{width: 50%; color: #222;}
#i_story .lt .top h3{font-size: 5rem; font-family: 'Danjo-bold'; margin: 2rem 0 5rem; }
#i_story .lt .top h3 span{color: var(--red);}
#i_story .lt .bot p{font-size: 2.7rem;}
#i_story .lt .bot p span{color: #fff; display: inline-block; font-weight: bold;padding: 2px 5px; position: relative;}
#i_story .lt .bot p span:before{    content: ''; top: 0; left: 0; width: 0%; height: 100%; z-index: -1; position: absolute; background: var(--red); transition: .4s 0.5s;}
#i_story .lt .bot.aos-animate p span:before{width: 100%;}
#i_story .lt .bot p + p{margin-top: 1rem;}
#i_story .rt{width: 50%;}

@media all and (max-width:1480px){
    #i_story .lt .top h3{font-size: 4.5rem;}
    #i_story .lt .bot p{font-size: 2.5rem;}
}
@media all and (max-width:1280px){
    #i_story .s-inner{flex-wrap: wrap; justify-content: center;gap: 5rem;}
    #i_story .lt{width: 100%; text-align: center; order: 1;}
    #i_story .rt{width: 80%;order: 2;}
}
@media all and (max-width:768px){
    #i_story .rt{width: 90%;}
    #i_story .lt .top h3{margin-bottom: 3rem;}
}


.storySlide {position: relative; background: #fff;}
.custom-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; font-family: 'SUIT', sans-serif; --swiper-navigation-size: 50px; font-weight: 600; background: none; border: none; cursor: pointer; color: #e60012 !important;  opacity: 0.8;}
.storySlide .swiper-button-prev {left: 60px;}
.storySlide .swiper-button-next {right: 60px;}

@media all and (max-width:1680px){
    .storySlide .swiper-button-prev {left: 2%;}
    .storySlide .swiper-button-next {right: 2%;}
    .custom-arrow {--swiper-navigation-size: 30px;}
}