  
/* common */
* { margin: 0; padding: 0; outline: none; box-sizing: border-box;}
body {margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none; }
body::-webkit-scrollbar {display: none;}
html { scroll-behavior: smooth;}
html, body {font: 400 16px/1.3 'Pretendard', sans-serif;  color: #000000; width: 100%; position: relative;}
ul, li {list-style: none;}
a {text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;}
img {max-width: 100%;}
button { font-family: inherit; border: none; background-color: transparent; outline: 0;  cursor: pointer; }
input,textarea,button,select {font-family: inherit;}

body.hidden { overflow: hidden;}
body::before { content: "";  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%; background-color: rgba(0,0,0,0.25); z-index: 99;  transition: all 0.4s ease; opacity: 0; pointer-events: none;cursor: pointer;}
body.hidden::before { opacity: 1;  pointer-events: auto;}
  
.wrap {width: 100%; position: relative;}
.pc {display: block;}
.tablet {display: none !important;}
.mobile { display: none !important;}
@media screen and (min-width: 1081px) { .mob_hide {display: none;}}
.container {position: relative; width: 100%;} 
.section {position: relative;}
.innerwrap {position: relative;width: 100%;}
.inner {position: relative; width: 90%; max-width: 1280px;  margin-left: auto; margin-right: auto;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {display: none;}


.Pretendard {font-family: 'Pretendard', sans-serif; }
.Aggravo {font-family: 'Aggravo', sans-serif;}
.GMarketSans {font-family: 'GMarketSans', sans-serif; }


/* tab swiper */
.tab_swiper {width: 100%;}
.tab_swiper .swiper-slide {width: auto;}


/* full swiper */
@media screen and (min-width: 1081px) {	
	.full_swiper {height: 100vh;}
	.full_swiper .swiper-wrapper {height: 100%; will-change: transform;}
	.full_swiper .swiper-slide {will-change: transform;}
	.full_swiper .section {position: relative; width: 100%; height: 100vh; overflow: hidden;}
	.full_swiper .section.scroll {overflow-y: auto;-webkit-overflow-scrolling: touch;scroll-behavior: smooth; }
	.full_swiper .section.scroll::-webkit-scrollbar {display: none;} 
	.full_swiper .section.auto_height {height: auto;}
}


/* main */
.m_txt1 { font-family: 'Aggravo', sans-serif; font-size: 4.063rem;  line-height: 1.5; font-weight: 500; letter-spacing: -0.04em; word-break: keep-all;}
.m_txt2 { font-family: 'Aggravo', sans-serif; font-size: 5.313rem; line-height: 1.176; font-weight: 700;letter-spacing: -0.04em; word-break: keep-all;}
.m_txt3 {font-family: 'GMarketSans', sans-serif; font-size: 1.875rem; line-height: 1.667; font-weight: 300; letter-spacing: -0.04em; word-break: keep-all; }
.m_txt3 .bold {font-weight: 500;}
.m_txt4 {font-family: 'GMarketSans', sans-serif; font-size: 1.4rem; letter-spacing: -0.04em; word-break: keep-all; width: 15rem; aspect-ratio: 245/80; background: no-repeat center/100% 100%; display: flex; align-items: center; justify-content: center; padding-top: 0.3rem; margin-bottom: 3rem;}
.m_more {position: relative; width: 100%; max-width: 32rem; aspect-ratio: 515 / 100; display: flex; align-items: center; justify-content: center; gap: 1.25rem; border-radius: 10rem; font-family: 'GMarketSans', sans-serif; font-size: 1.875rem; line-height: 1; letter-spacing: -0.04em; padding-top: 0.2em;}
.m_more::before { content: "";  background: url(/img/summer-festa-2026/button_shadow.png) no-repeat center / contain;  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  mix-blend-mode: screen; pointer-events: none;}
.m_more .txt {position: relative;}
.m_more .arrow { background: url(/img/summer-festa-2026/btn_arrow.png) no-repeat center / contain;  aspect-ratio: 35 / 37; width: 1.5rem;  margin-bottom: 0.15em;}
.m_more.typeA { background: #ffe047; color: #0770ed;}
.m_more.typeB { background: #0770ed; color: #ffffff;}
.m_more.typeC { background: #d60c4c; color: #ffffff;}
.m_more.typeD { background: #ffffff; color: #d60c4c;}
.note_txt {font-family: 'GMarketSans', sans-serif; font-weight: 300; font-size: 1.25rem; letter-spacing: -0.05em; color: #222222; opacity: 0.7; }
.note_txt .bold{font-weight: 500;}


.ms1 {background: url(/img/summer-festa-2026/ms1_bg.jpg) no-repeat center/cover;}
.ms1 .inner {height: 100%; display: flex;  align-items: center;  justify-content: center;}
.ms1 .logo { position: absolute;  left: 0;  top: 11.5%;  width: 13.563rem;  display: flex;  align-items: center;  justify-content: center;}
.ms1 .title {position: relative; width: 90%; max-width: 1148px; aspect-ratio: 1148/694;  max-height: 65vh;}
.ms1 .title .img {position: absolute; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ms1 .title .img.before { mix-blend-mode: screen;}

.ms2 {background: url(/img/summer-festa-2026/ms2_bg.png) no-repeat center/cover;}
.ms2 .contbox {height: 100%; display: flex;  align-items: flex-end; justify-content: space-between;}
.ms2 .contbox .txtbox { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.ms2 .contbox .txtbox .sub { color: #ffffff; margin-bottom: 0.625rem;}
.ms2 .contbox .txtbox .sub .point{ position: relative; color: #0770ed; padding: 0 0.15em;}
.ms2 .contbox .txtbox .sub .point::before { content: ""; position: absolute;left: 50%;  top: 42%;  width: 100%;  height: 100%;  transform: translate(-50%, -50%);  background: #ffec4f;}
.ms2 .contbox .txtbox .sub .point .txt {position: relative;}
.ms2 .contbox .txtbox .tit { color: #ffec4f; margin-bottom: 1.75rem;}
.ms2 .contbox .txtbox .desc { color: #ffffff; margin-bottom: 3.5rem;}
.ms2 .contbox .imgbox { width: 64%; max-width: 52rem;  display: flex;  align-items: center;  justify-content: center;  margin-right: -12%; margin-left: -20%;  margin-bottom: -6%;}

.ms3 {background: #cfebff; min-height: 100vh;}
.ms3 .inner {padding: 10rem 0;}
.ms3 .bg_deco {position: absolute;}
.ms3 .bg_deco1 { width: 4%; max-width: 5.719rem;  top: 35.65%;  left: 6.2%;}
.ms3 .bg_deco2 { width: 10%; max-width: 13.906rem; top: -1.5%; left: 49.6%;}
.ms3 .bg_deco3 { width: 5%; max-width: 8.313rem; right: 6.5%; top: 45%;}
.ms3 .bg_deco4 { width: 10%; max-width: 13.719rem; right: 15.6%; bottom: 7.5%;}
.ms3 .contbox { display: flex; align-items: center; justify-content: space-between;  gap: 2rem;}
.ms3 .contbox .txtbox {flex: 1;  display: flex; flex-direction: column; }
.ms3 .contbox .txtbox .sub { color: #222222;}
.ms3 .contbox .txtbox .tit { color: #0770ed;}
.ms3 .contbox .txtbox .desc { color: #222222;margin-top: 1rem;}
.ms3 .contbox .txtbox .citybox { display: flex;  flex-direction: column; margin-top: 3rem; max-width: 32rem;}
.ms3 .contbox .txtbox .citybox .titbox { width: 90%;  max-width: 22rem; height: 3.875rem;  background: url(/img/summer-festa-2026/ms3_boxtit_bg.png) no-repeat left center / auto 100%; padding: 0 1rem; display: flex;  align-items: center;  gap: 0.5rem;  padding-top: 0.2em;}
.ms3 .contbox .txtbox .citybox .titbox .icon { width: 1.25rem;}
.ms3 .contbox .txtbox .citybox .titbox .txt { font-size: 1.5rem; line-height: 1;   letter-spacing: -0.04em; color: #ffffff; margin-top: 0.2em;}
.ms3 .contbox .txtbox .citybox .labelbox { display: flex;  flex-wrap: wrap;  gap: 0.75rem 0.625rem;  padding: 2rem 1.5rem;  background: #ffffff;  border-radius: 0 1.25rem 0 0;}
.ms3 .contbox .txtbox .citybox .labelbox > li { width: calc((100% - 0.688rem * 2) / 3); aspect-ratio: 144 / 64;  line-height: 1; font-weight: 500;  color: #d60c4c;   display: flex;  align-items: center;  justify-content: center;  background: #fff3f7;  border: 2px solid #d60c4c;  border-radius: 0.938rem; font-family: 'GMarketSans', sans-serif;   font-size: 1.5rem;  line-height: 1;  font-weight: 500; letter-spacing: -0.04em;   word-break: keep-all;}
.ms3 .contbox .txtbox .citybox .pinbox { position: relative;  display: flex;  border-top: 1px solid #ddd; background: #fff;  border-radius: 0 0 1.25rem 1.25rem;}
.ms3 .contbox .txtbox .citybox .pinbox::after { content: ""; position: absolute;  left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%);  background: #ddd;}
.ms3 .contbox .txtbox .citybox .pinbox > li { width: 50%; height: auto;  font-family: 'GMarketSans', sans-serif; font-size: 1.25rem; line-height: 1.1;  letter-spacing: -0.04em;  color: #222222;  display: flex;  align-items: flex-end;  justify-content: center;  gap: 0.625rem; padding: 1.25rem 0;}
.ms3 .contbox .txtbox .citybox .pinbox > li .icon { width: 1.325rem;}
.ms3 .contbox .txtbox .m_more {margin-top: 3.625rem;}
.ms3 .contbox .imgbox { width: 56%;  max-width: 45.625rem; display: flex;   align-items: center; justify-content: center; margin-right: -4.5%;}
.ms3 .contbox .imgbox { height: 100%; max-height: 90vh;}
.ms3 .contbox .imgbox .img {height: 100%; width: auto;}

.ms4 .bg {background: url(/img/summer-festa-2026/ms4_bg.png) no-repeat center 10%/cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ms4 .inner {padding: 10rem 0;}
.ms4 .titbox { display: flex;  flex-direction: column;  align-items: center;   margin-bottom: 4rem;}
.ms4 .titbox .badge { background-image: url(/img/summer-festa-2026/tit_bg1.png); color: #d60c4c;}
.ms4 .titbox .sub {color: #222222;}
.ms4 .titbox .tit {color: #d60c4c;}
.ms4 .contbox { display: flex; flex-wrap: wrap; gap: 3.375rem 1.25rem;}
.ms4 .contbox .item { width: calc((100% - 1.25rem * 3) / 4);  background: url(/img/summer-festa-2026/ms4_card_bg.png) no-repeat center / contain; aspect-ratio: 615 / 900;  display: flex;  flex-direction: column;}
.ms4 .contbox .item .tit {  font-family: 'GMarketSans', sans-serif;  font-size: 1.5rem;  letter-spacing: -0.04em; color: #000000; text-align: center;}
.ms4 .contbox .item .top { display: flex; flex-direction: column; align-items: center;  justify-content: center; gap: 1rem; height: 9rem;}
.ms4 .contbox .item .top .logo { width: 7.813rem;}
.ms4 .contbox .item .bottom { flex: 1;  padding: 2.5rem 1.125rem 1rem; display: flex;  flex-direction: column;}
.ms4 .contbox .item .bottom .tit {margin-bottom: 1.625rem;}
.ms4 .contbox .item .bottom .price { position: relative; padding-left: 5.85rem;  display: flex; flex-direction: column;align-items: flex-start; gap: 0.375rem;}
.ms4 .contbox .item .bottom .price .ori { position: relative; font-family: 'GMarketSans', sans-serif;  font-size: 1.375rem; font-weight: 300; letter-spacing: -0.04em;color: #888888;}
.ms4 .contbox .item .bottom .price .ori::after {content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #888888; transform: translateY(-50%);}
.ms4 .contbox .item .bottom .price .sale { font-family: 'GMarketSans', sans-serif;  font-size: 1.5rem; letter-spacing: -0.05em;color: #d60c4c;}
.ms4 .contbox .item .bottom .price .sale .num { font-size: 2.625rem; font-weight: 700;  letter-spacing: -0.07em;}
.ms4 .contbox .item .bottom .price .percent { background: url(/img/summer-festa-2026/ms4_percent.png) no-repeat center / contain; width: 6.063rem;  aspect-ratio: 1 / 1;  position: absolute;  left: -0.375rem;  top: 0;  display: flex;  align-items: center;  justify-content: center;    font-family: 'GMarketSans', sans-serif;  font-size: 1.063rem;  letter-spacing: -0.04em; color: #ffffff; padding-bottom: 0.4em;}
.ms4 .contbox .item .bottom .price .percent .num { font-size: 1.875rem; font-weight: 700;  margin-top: -0.2em;}
.ms4 .contbox .item .bottom .btn { margin-top: 1.875rem; font-family: 'GMarketSans', sans-serif;  font-size: 1.5rem;  letter-spacing: -0.04em;  color: #ffffff;   background: linear-gradient(to bottom, #ff88b1 0%, #d60c4c 92%);  width: 100%;  height: 3.75rem; display: flex;  align-items: center;  gap: 1.5rem;  justify-content: center;  border-radius: 0.938rem;}
.ms4 .contbox .item .bottom .btn .arrow {  background: url(/img/summer-festa-2026/ms4_btn_arrow.png) no-repeat center / contain;  width: 0.75rem; aspect-ratio: 25 / 40;  margin-bottom: 0.15em;}
.ms4 .note_txt { margin-top: 1.25rem; text-align: right;}

.ms5 {background: url(/img/summer-festa-2026/ms5_bg.png) no-repeat center/cover;}
.ms5 .contbox { height: 100%;  display: flex;  align-items: flex-end;  justify-content: space-between; gap: 3.5rem;}
.ms5 .contbox .imgbox { width: 57%; max-width: 39.75rem; display: flex;  align-items: center; justify-content: center; margin-bottom: -14.5%;}
.ms5 .contbox .txtbox { flex: 1;  height: 100%;  display: flex; flex-direction: column;  align-items: flex-start;  justify-content: center;  padding-top: 2rem;}
.ms5 .contbox .txtbox .badge { background-image: url(/img/summer-festa-2026/tit_bg2.png); color: #d60c4c;}
.ms5 .contbox .txtbox .sub {color: #222222;}
.ms5 .contbox .txtbox .tit { color: #d60c4c; font-size: 5rem; margin-bottom: 2rem;}
.ms5 .contbox .txtbox .note_txt { margin-top: 0.75rem;}
.ms5 .contbox .txtbox .m_more { margin-top: 3.5rem;}

.ms6 {background: #fdf3f7;}
.ms6 .inner {padding: 10rem 0;}
.ms6 .bg_deco {position: absolute; left: 0; bottom: 0; width: 100%;}
.ms6 .titbox { position: relative;  display: flex;  flex-direction: column;  align-items: center; margin-bottom: 4.75rem;}
.ms6 .titbox .deco { position: absolute;  left: 50%; top: -4%; transform: translateX(-50%);  width: 90%;  max-width: 71rem; pointer-events: none;}
.ms6 .titbox .badge { background-image: url(/img/summer-festa-2026/tit_bg1.png); color: #d60c4c;}
.ms6 .titbox .sub {color: #222222;}
.ms6 .titbox .tit { color: #d60c4c;}
.ms6 .contbox { display: flex; align-items: center; justify-content: space-between;}
.ms6 .contbox .leftbox {  flex: 1; max-width: 39.375rem;  display: flex;   flex-direction: column;}
.ms6 .contbox .leftbox .boxitem { display: flex; flex-direction: column; margin-bottom: 3.25rem;}
.ms6 .contbox .leftbox .boxitem .box_titbox { width: 90%;  max-width: 18rem;  height: 3.875rem;  background: url(/img/summer-festa-2026/ms6_boxtit_bg.png) no-repeat left center / auto 100%;  padding: 0 1rem;  display: flex;  align-items: center;  gap: 0.5rem;  padding-top: 0.2em;}
.ms6 .contbox .leftbox .boxitem .box_titbox .icon { width: 1.25rem;}
.ms6 .contbox .leftbox .boxitem .box_titbox .txt { font-size: 1.5rem; line-height: 1;   letter-spacing: -0.04em; color: #ffffff; margin-top: 0.2em;}
.ms6 .contbox .leftbox .boxitem .box_contbox { background: #ffffff;  border-radius: 0 1.25rem 1.25rem 1.25rem;}
.ms6 .contbox .leftbox .boxitem .listbox { padding: 2.5rem;  display: flex;  flex-direction: column; gap: 1.125rem;}
.ms6 .contbox .leftbox .boxitem .listbox > li { font-family: 'GMarketSans', sans-serif;  font-size: 1.5rem;  letter-spacing: -0.04em;  color: #000000;  display: flex;  gap: 0.5em;}
.ms6 .contbox .leftbox .boxitem .listbox > li .num { font-weight: 600; color: #d60c4c;}
.ms6 .contbox .leftbox .boxitem .listbox > li .desc {flex: 1;}
.ms6 .contbox .leftbox .boxitem .listbox > li.line { background: url(/img/summer-festa-2026/ms6_line.png) repeat-x left center / auto 100%; width: 100%; height: 5px;}
.ms6 .contbox .leftbox .boxitem .snsbox { display: flex; padding: 2.75rem 0;}
.ms6 .contbox .leftbox .boxitem .snsbox > li {  flex: 1;  display: flex;   flex-direction: column;  align-items: center;  gap: 1.25rem;  font-family: 'GMarketSans', sans-serif; font-size: 1.4rem; letter-spacing: -0.04em;  color: #000000;}
.ms6 .contbox .leftbox .boxitem .snsbox > li .icon {width: 5rem;}
.ms6 .contbox .leftbox .boxitem .snsbox > li.line {  background: url(/img/summer-festa-2026/ms6_line2.png) repeat-y center top / 100% auto; width: 5px; flex: unset;}
.ms6 .contbox .leftbox .awardbox { display: flex; gap: 0.875rem; padding-top: 2.5rem;}
.ms6 .contbox .leftbox .awardbox > li { flex: 1; display: flex;  flex-direction: column;  align-items: center; background: #fff;  border-radius: 2rem;  padding: 2rem 1.625rem;}
.ms6 .contbox .leftbox .awardbox > li .medal { width: 5.5rem; margin-top: -4.5rem;  margin-bottom: 1rem;}
.ms6 .contbox .leftbox .awardbox > li .count { width: 5.25rem;  height: 2.125rem;  display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;  font-family: 'GMarketSans', sans-serif; font-size: 1.25rem;  letter-spacing: -0.04em;   color: #fff;  padding-top: 0.2em;  border-radius: 10rem;}
.ms6 .contbox .leftbox .awardbox > li .count.typeA { background: linear-gradient(to left, #e4b248 9%, #f7dcac 100%);}
.ms6 .contbox .leftbox .awardbox > li .count.typeB { background: linear-gradient(to left, #5d5d5d 9%, #bbbbbb 100%);}
.ms6 .contbox .leftbox .awardbox > li .count.typeC { background: linear-gradient(to left, #9b6651 9%, #bf9b8c 100%);}
.ms6 .contbox .leftbox .awardbox > li .gift { width: 100%; max-width: 9.375rem;  margin-bottom: 1.5rem;}
.ms6 .contbox .leftbox .awardbox > li .tit { font-family: 'GMarketSans', sans-serif;  font-size: 1.438rem; letter-spacing: -0.04em; color: #000; text-align: center;}
.ms6 .contbox .leftbox .note_txt {margin-top: 1.625rem; text-align: center;}
.ms6 .contbox .rightbox { width: 60%;  max-width: 48.031rem;  margin-right: -13.5%;   display: flex;  align-items: center; justify-content: center;}
.ms6 .m_more {margin: 6rem auto 0; }

.ms7 {background: url(/img/summer-festa-2026/ms7_bg.png) no-repeat center/cover;}
.ms7 .inner {padding: 10rem 0 9rem;}
.ms7 .titbox { display: flex;  flex-direction: column;  align-items: center;    text-align: center;}
.ms7 .titbox .sub { color: #ffffff;}
.ms7 .titbox .tit {  font-size: 4.688rem; color: #fff; margin-bottom: 1.5rem;}
.ms7 .titbox .desc { font-size: 1.688rem;  color: #fff;}
.ms7 .titbox .m_more { margin-top: 5rem;}



/* footer */
.footer {position: relative; width: 100%; background: #171a1d; color: #b1b1b1; padding: 3.75rem 0 3.25rem;}
.footer .f_top { padding-bottom: 1.5rem;}
.footer .f_top .inner { display: flex;  flex-direction: column; gap: 1rem;}
.footer .f_top .tit {font-size: 2.063rem; letter-spacing: -0.04em; font-weight: 500; }
.footer .f_top .desc {font-size: 1.125rem; line-height: 1.7; letter-spacing: -0.04em; font-weight: 300;}
.footer .f_bottom { border-top: 1px solid rgba(177, 177, 175, 0.1); padding-top: 1.375rem;}
.footer .f_bottom .inner {display: flex; align-items: center; justify-content: space-between;}
.footer .f_bottom .info {font-size: 1.125rem; line-height: 1.7; letter-spacing: -0.04em; font-weight: 300;}
.footer .f_bottom .sns {display: flex; align-items: center; justify-content: flex-end; gap: 2.5rem;}
.footer .f_bottom .sns .link {display: flex; align-items: center; justify-content: center; width: 2.75rem;}






/* PC */

@media screen and (min-aspect-ratio: 1920/960) {

	.m_txt1 { font-size: 3.6rem; }
	.m_txt2 { font-size: 4.6rem; }
	.m_txt3 {font-size: 1.625rem;}
	.m_more {width: 28rem;}

	.ms2 .contbox .imgbox { width: 61%;  margin-right: -9%;  margin-bottom: -9%;}

	.ms3 .contbox .txtbox .citybox { margin-top: 2rem;}
	.ms3 .contbox .txtbox .citybox .labelbox { padding: 1.5rem;}
	.ms3 .contbox .txtbox .citybox .labelbox > li {  aspect-ratio: 144 / 56;  font-size: 1.375rem;}
	.ms3 .contbox .txtbox .m_more { margin-top: 2.5rem;}
		
}


@media screen and (max-width: 1560px) {    

  	html {font-size: 15.5px !important;}  

	@media screen and (min-aspect-ratio: 1920/960) { /* 노트북 대응 */

  		html {font-size: 14.5px !important;}  

	}

}


@media screen and (max-width: 1440px) {    

  	html {font-size: 15px!important;}    

	@media screen and (min-aspect-ratio: 1920/960) { /* 노트북 대응 */

  		html {font-size: 14px !important;}  

	}

}


@media screen and (max-width: 1380px) {    

  	html {font-size: 14.5px !important;} 

	@media screen and (min-aspect-ratio: 1920/960) { /* 노트북 대응 */

  		html {font-size: 13.5px !important;}  

	}       

}


@media screen and (max-width: 1200px) {

  	html {font-size: 14px !important;}  

	@media screen and (min-aspect-ratio: 1920/960) { /* 노트북 대응 */

  		html {font-size: 13px !important;}  

	}

}




  
/* Tablet */
@media screen and (max-width: 1080px) {
	
  	html {font-size: 16px !important;} 

  	.pc {display: none !important;}
  	.tablet {display: block !important;}
	.pc_hide {display: none !important;}
	.inner { width: 100%;  max-width: 100%; padding: 0 2rem;}


	/* full swiper */
	.full_swiper {height: auto;}
	.full_swiper .swiper-wrapper { display: flex; flex-direction: column;}


	/* main */
	.m_txt1 { font-size: 2.8rem;}
	.m_txt2 { font-size: 3.6rem;}
	.m_txt3 { font-size: 1.6rem;}
	.m_txt4 { width: 14rem; margin-bottom: 2.4rem; font-size: 1.3rem;}
	.m_more { max-width: 100%; gap: 1.2rem;  font-size: 2rem;}

	.ms1 { height: 50rem;}
	.ms1 .logo { left: 2rem; top: 4rem; width: 12rem;}
	.ms1 .title { max-height: unset; width: 100%;}

	.ms2 .contbox { flex-direction: column; padding: 8rem 2rem;}
	.ms2 .contbox .txtbox { z-index: 5; width: 100%;}
	.ms2 .contbox .txtbox .sub { margin-bottom: 1rem;}
	.ms2 .contbox .txtbox .sub { margin-bottom: 1rem;  display: flex; flex-direction: column; align-items: flex-start; }
	.ms2 .contbox .txtbox .tit { margin-bottom: 2.6rem;}
	.ms2 .contbox .imgbox {  z-index: 0;  position: absolute;  top: 5%;  right: -5%;
    width: 45%;  max-width: 100%; margin: 0;}

	.ms3 .bg_deco1 { width: 10%; max-width: unset; top: 43%; left: 5%;}
	.ms3 .bg_deco2 { width: 20%; max-width: unset; top: 2%; left: unset; right: 9%;}
	.ms3 .bg_deco3 { width: 11%; max-width: unset; right: 6.5%; top: 50%;}
	.ms3 .bg_deco4 { width: 11%; max-width: unset; right: 45%; bottom: unset; top: 55%;}
	.ms3 .contbox { padding: 8rem 2rem 6rem;  flex-direction: column;}
	.ms3 .contbox .txtbox { width: 100%; text-align: center;}
	.ms3 .contbox .map { display: flex;  align-items: center; justify-content: center;  width: 80%;  margin: 2rem auto 1.2rem; }
	.ms3 .contbox .txtbox .citybox {width: 100%; max-width: 100%;}

	.ms4 .inner { padding: 6rem 2rem;}
	.ms4 .titbox { text-align: center; align-items: center;}
	.ms4 .contbox { gap: 1.2rem 1.2rem;}
	.ms4 .contbox .item { width: calc((100% - 1.2rem * 1) / 2); background: url(/img/summer-festa-2026/ms4_card_bg.png) no-repeat center / 100% 100%; aspect-ratio: unset;}
	.ms4 .contbox .item .tit { font-size: 1.4rem;}
	.ms4 .contbox .item .top { height: 7.2rem;  gap: 0.6rem;}
	.ms4 .contbox .item .top .logo { width: 8rem;}
	.ms4 .contbox .item .bottom { padding: 2rem 1rem 1rem;}
	.ms4 .contbox .item .bottom .tit { margin-bottom: 1.4rem;}
	.ms4 .contbox .item .bottom .price { padding-left: 5.8rem;}
	.ms4 .contbox .item .bottom .price .ori { font-size: 1.2rem;}
	.ms4 .contbox .item .bottom .price .sale { font-size: 1.4rem;}
	.ms4 .contbox .item .bottom .price .sale .num { font-size: 1.7rem;}
	.ms4 .contbox .item .bottom .price .percent { left: 0;top: -12%; width: 5.6rem; font-size: 1rem;}
	.ms4 .contbox .item .bottom .price .percent .num { font-size: 1.6rem;}
	.ms4 .contbox .item .bottom .btn {  font-size: 1.4rem;  margin-top: 1.4rem;  height: 3.6rem;  gap: 1.2rem;  border-radius: 1rem;}
	.ms4 .contbox .item .bottom .btn .arrow {  width: 0.6rem;}
	.ms4 .note_txt { margin-top: 1.4rem; text-align: center;}
	
	.ms5 .contbox { flex-direction: column; padding: 4rem 2rem 6rem; align-items: center;  gap: 2rem;}
	.ms5 .contbox .txtbox { width: 100%;  align-items: center; text-align: center;}
	.ms5 .contbox .txtbox .tit { font-size: 4rem;}
	.ms5 .contbox .txtbox .phone { width: 60%; max-width: unset; display: flex; align-items: center; justify-content: center; margin-bottom: 3rem; }

	.ms6 {overflow: hidden;}
	.ms6 .bg_deco {  width: auto;  max-width: unset;  height: 13rem;}
	.ms6 .inner { padding: 6rem 2rem 10rem;}
	.ms6 .titbox { margin-bottom: 3rem;}
	.ms6 .contbox { flex-direction: column-reverse; gap: 5rem;}
	.ms6 .contbox .rightbox { width: 70%;  max-width: unset;  margin-right: -6%;}
	.ms6 .contbox .leftbox { width: 100%; max-width: unset;}
	.ms6 .contbox .leftbox .boxitem .box_titbox { padding-top: 0; gap: 0.8rem;}
	.ms6 .contbox .leftbox .boxitem .listbox > li.line { height: 2px;}
	.ms6 .contbox .leftbox .boxitem .snsbox > li.line { width: 2px;}
	.ms6 .contbox .leftbox .awardbox { gap: 1rem; padding-top: 2.5rem;}
	.ms6 .contbox .leftbox .awardbox > li {  border-radius: 1.2rem; padding: 2rem 0;}
	.ms6 .contbox .leftbox .awardbox > li .gift { width: 76%;}
	.ms6 .m_more {  margin: 4rem auto 0;}

	.ms7 .inner { padding: 8rem 2rem;}
	.ms7 .titbox .tit { font-size: 3.6rem; margin-bottom: 1.2rem;}
	.ms7 .titbox .desc { font-size: 1.6rem;}


	.footer { padding: 4rem 0 3.2rem; }
	.footer .f_top { padding-bottom: 1.6rem;}
	.footer .f_top .tit { font-size: 1.6rem;}
	.footer .f_top .desc { font-size: 1.2rem; word-break: keep-all;}
	.footer .f_bottom { padding-top: 2rem;}
	.footer .f_bottom .inner {  flex-direction: column;  align-items: unset;  gap: 2.4rem;}
	.footer .f_bottom .info { font-size: 1.1rem;}
	.footer .f_bottom .sns { justify-content: flex-start; gap: 1.6rem;}
	.footer .f_bottom .sns .link { width: 2rem;}






}


@media screen and (max-width: 900px) {

  	html {font-size: 14px !important;}


}


@media screen and (max-width: 800px) {

	html {font-size: 2.222223vw;} 
	
}


@media screen and (max-width: 700px) {

  	html {font-size: 11.5px !important;}

}




/* Mobile */
@media screen and (max-width: 599px) {

  	html {font-size: 11px !important;}  
	
  	.mobile {display: block !important;}
  

}
  
      
@media screen and (max-width: 480px) {  

  	html {font-size: 10px !important;}

}


@media screen and (max-width: 320px) {

  	html { font-size: 9px !important;}

}

.ms1 .title::after{

	content:"";
	position:absolute;

	left:50%;
	top:50%;

	width:70%;
	aspect-ratio:1;

	transform:translate(-50%,-50%) scale(.6);

	background:radial-gradient(circle,
	rgba(255,255,255,.75) 0%,
	rgba(255,255,255,0) 70%);

	opacity:0;

	pointer-events:none;

}

.ms1.active .title::after{

	animation:titleFlash 1.4s ease-out;

}

@keyframes titleFlash{

	0%{
		opacity:0;
		transform:translate(-50%,-50%) scale(.4);
	}

	35%{
		opacity:.9;
	}

	100%{
		opacity:0;
		transform:translate(-50%,-50%) scale(1.6);
	}

}
