@charset "utf-8";
::-webkit-scrollbar{ display: none; }
/* common */
:root{
	--fs16: clamp(14px, calc( 16 / 1500 * 100vw ), 16px);
}
.common__h2{ text-align: center; font-size: clamp(24px, calc( 45 / 1500 * 100vw ), 45px); font-weight: 800; }
#wrap .common__pager{ bottom: unset; display: flex; justify-content: center; gap: 12px; }
#wrap .common__pager .swiper-pagination-bullet{ margin: 0; width: 16px; height: 16px; background: #fff; border: 1px solid currentColor; opacity: 1; }
#wrap .common__pager .swiper-pagination-bullet-active{ background: var(--yellow); }

/* visual */
.mainVis{ position: relative; }
.mainVis__pig,
.mainVis__img{ width: 100%; height: 100%; }
.mainVis__img{ object-fit: cover; }
#wrap .mainVis .common__pager{ position: absolute; inset: auto 0 20px; z-index: 10; }
@media(min-width:768px){
	.mainVis{ height: 460px; }
}
@media(max-width:767px){
	.mainVis{ aspect-ratio: 1; }
}

/* new, best item */
.mainItem{ padding: 94px 0 clamp(100px, calc( 148 / 1500 * 100vw ), 148px); }
.mainItem [data-shop-list="default"]{ margin-top: 68px; }
#wrap .mainItem [data-shop-icon="icon"]{ display: none; }
.mainItem__btns{ margin-top: 81px; display: flex; justify-content: center; }
.mainItem__more{ display: flex; align-items: center; justify-content: center; width: 206px; height: 69px; padding-top: 2px; border: 1px solid currentColor; border-radius: 5em; box-shadow: 4px 4px currentColor; font-size: 18px; font-weight: 700; }
*[data-shop-list="default"] > li *[data-shop-list="util"]{left:initial; right:10px; margin-top:calc(100% - 70px);}
@media(hover:hover){
	@media(prefers-reduced-motion:no-preference){
		.mainItem__more{ transition: .6s; }
	}
	.mainItem__more{ box-shadow: 0 0 currentColor; }
	.mainItem__more:hover{ box-shadow: 4px 4px currentColor; }
}

/* banner */
.mainBanner__pig,
.mainBanner__img{ width: 100%; }
.mainBanner .common__pager{ margin-top: 34px; }
@media(min-width:768px){
	.mainBanner{ margin-bottom: clamp(0px, calc( 55 / 1920 * 100vw ), 55px); }
}

/* scrolling */
.mainScrolling{ contain: content; margin-top: -19px; display: flex; align-items: center; height: 71px; padding-top: 4px; background: var(--yellow); border-block: 1px solid currentColor; text-transform: uppercase; font-size: 18px; font-weight: 700; white-space: nowrap; user-select: none; }
.mainScrolling__p{ padding-left: 79px; }
@media(prefers-reduced-motion:no-preference){
	.mainScrolling__p{ animation: mainScrolling 10s linear infinite; }
	@keyframes mainScrolling {
		100%{ transform: translateX(-100%); }
	}
}

/* links */
.mainLinks{ padding: clamp(90px, calc( 124 / 1500 * 100vw ), 124px) 0 clamp(120px, calc( 187 / 1500 * 100vw ), 187px); }
.mainLinks__inr{ display: grid; gap: 40px; }
.mainLinks__title{ display: block; text-transform: uppercase; font-size: clamp(24px, calc( 28 / 1500 * 100vw ), 28px); font-weight: 700; }
.mainLinks__subtitle{ margin-top: .3333333em; display: block; font-size: clamp(16px, calc( 18 / 1500 * 100vw ), 18px); font-weight: 500; color: #424242; }
@media(min-width:541px){
	.mainLinks__inr{ grid-template: 'a n' 'q q' / 1fr 1fr; gap: clamp(10px, calc( 36 / 1500 * 100vw ), 36px) clamp(10px, calc( 64 / 1500 * 100vw ), 64px); }
	.mainLinks__about{ grid-area: a; }
	.mainLinks__notice{ grid-area: n; }
	.mainLinks__qna{ grid-area: q; }
}
@media(min-width:1024px){
	.mainLinks__inr{ grid-template: 'a n' auto 'a q' 1fr / 34.2% 1fr; }
}

/* about */
.mainLinks__about{ display: grid; grid-template-rows: 1fr auto; background: #fff; border: 1px solid currentColor; border-radius: 10px; }
.mainLinks__wrapTxt{ position: relative; display: block; padding: 55px clamp(15px, calc( 40 / 1500 * 100vw ), 40px) 89px; }
.mainLinks__view{ position: absolute; right: 6%; bottom: 0; transform: translateY(51.7%); display: flex; align-items: center; justify-content: center; width: 6.44444444em; height: 6.44444444em; padding-top: 0.22222222em; background: var(--primary); border: 0.44444444em solid #fff; border-radius: 50%; font-size: clamp(12px, calc( 18 / 1500 * 100vw ), 18px); font-weight: 700; color: #fff; }
.mainLinks__img1{ width: 100%; border-radius: 0 0 10px 10px; }

/* notice */
.mainLinks__notice{ display: grid; grid-template-rows: auto 1fr; }
.mainLinks__wrapTitle{ display: flex; align-items: center; justify-content: space-between; }
.mainLinks__more{ position: relative; top: 1px; font-size: var(--fs16); color: #868686; }
.mainLinks__more::after{ content: ''; position: relative; top: -1px; right: 3px; margin-left: 10px; display: inline-block; width: .5em; height: .5em; border: solid #cecece; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.mainLinks__list{ margin-top: 24px; display: grid; gap: clamp(10px, calc( 37 / 1500 * 100vw ), 37px); }
.mainLinks__a{ display: block; padding: clamp(24px, calc( 43 / 1500 * 100vw ), 43px) clamp(15px, calc( 29 / 1500 * 100vw ), 29px) clamp(24px, calc( 44 / 1500 * 100vw ), 44px); background: #fff; border: 1px solid var(--primary); border-radius: 10px; }
.mainLinks__head{ font-size: 20px; color: #424242; }
.mainLinks__body{ margin-top: .875em; min-height: 3em; font-size: var(--fs16); -webkit-line-clamp: 2; color: #424242; }
.mainLinks__date{ margin-top: 4.5em; display: block; font-size: clamp(12px, calc( 14 / 1500 * 100vw ), 14px); color: #9d9d9d; }
.ellipsis{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all; }
@media(hover:hover){
	.mainLinks__a:hover{ background: var(--primary); }
	.mainLinks__a:hover *{ color: #fff; }
}
@media(min-width:541px){
	.mainLinks__wrapTitle{ position: relative; top: -9px; margin-bottom: -9px; }
}
@media(min-width:1024px){
	.mainLinks__list{ grid-template-columns: 1fr 1fr; }
}
@media(max-width:1023px) and (min-width:540px){
	.mainLinks__date{ margin-top: 2.5em; }
}

/* qna */
.mainLinks__qna{ position: relative; display: grid; align-items: center; align-content: center; height: clamp(140px, calc( 213 / 1500 * 100vw ), 213px); padding: 0 clamp(15px, calc( 66 / 1500 * 100vw ), 66px) 2px; background: var(--yellow); border: 1px solid currentColor; border-radius: 10px; line-height: 1; }
.mainLinks__qna .mainLinks__subtitle{ margin-top: 1.7em; font-size: var(--fs16); font-weight: 500; color: #111; }
.mainLinks__qna .mainLinks__subtitle::after{ content: ''; position: relative; margin-left: 7px; display: inline-block; width: .5em; height: .5em; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.mainLinks__img2{ position: absolute; right: 7.6%; bottom: 0; transform: translateY(12%); width: clamp(90px, calc( 140 / 1500 * 100vw ), 140px); }
@media(max-width:540px){
	.mainLinks__img2{ width: 20%; }
}