@charset "utf-8";


/* ======================== S [고정] ============================ */
html {
	font-size: 10px;
}

body {
	font-family: 'Pretendard JP';
	font-weight: normal;
	line-height: 1.3;
}

.content img {
	max-width: 100%;
}

.pdp-wrap {
	margin: 5% auto;
}

.pdp__inner {
	max-width: 780px;
	width: 100%;
	margin: 0 auto;
	background: var(--color-white);
}

.hide {
	overflow: hidden;
	display: block;
	position: absolute;
	border: 0;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
}

strong,
b {
	font-family: 'Pretendard JP';
}

p {
	letter-spacing: -0.02em;
}

/* ======================== E [고정] ============================ */



/* ======================== S [레이아웃] ============================ */
/* color */
:root {
	--color-black: #3C3C3C;
	--color-white: #F4F3F0;
	--color-key: #cc4685;
	--color-blue:#153295;
	--color-bryellow:#FEFFDB;
	--color-orange:#FF6520;
}

.txt_bg {
	padding:0 1rem;
}

.txt_bg.type1{
	padding:0.5rem 2rem;
	border-radius: 30px;
}
.txt_bg.blue {
	background-color:var(--color-blue);
}
.txt_bg.allwhite {
	background:#fff;
}
.txt_bg.gradient {
  	background:linear-gradient(to right,var(--color-blue),var(--color-orange));
}

.ta_c {text-align: center !important;}

.ta_l {text-align: left !important;}

.ta_r {text-align: right !important;}
/* margin */

.mt0 {
	margin-top: 0 !important;
}

.mt5 {
	margin-top: 0.5rem;
}

.mt10 {
	margin-top: 1rem;
}

.mt20 {
	margin-top: 2rem;
}

.mt30 {
	margin-top: 3rem;
}

.mt40 {
	margin-top: 4rem;
}

.mt50 {
	margin-top: 5rem;
}

.mt60 {
	margin-top: 6rem !important;
}

.mt70 {
	margin-top: 7rem;
}

.mt80 {
	margin-top: 8rem;
}

.mt100 {
	margin-top: 10rem;
}

.mt110 {
	margin-top: 11rem;
}

.mt120 {
	margin-top: 12rem;
}

/*padding*/

.pd0 {
	padding: 0 !important;
}

.pt0 {
	padding-top: 0 !important;
}


/* txt-type */
.txt-type {
	padding: 4rem 4rem 0;
	text-align: left;
	color: var(--color-black);
	width: 100%;
}

.txt__title {
	font-weight: 500;
	font-size: 5rem;
}

.txt__sub {
	font-weight: 200;
	font-size: 3rem;
}

.txt__list {
	font-size: 1.6rem;
	font-weight: 200;
	line-height: 1.5;
	letter-spacing: -0.05em;
}

.txt__list--big {
	font-size: 3rem;
	line-height: 1.5;
}

:where(.txt__list, .txt__list--big).listOl {
	counter-reset: list-number;
}

:where(.txt__list, .txt__list--big).listOl li {
	counter-increment: list-number;
}

.txt__list.listOl li::marker {
	content: '*' counter(list-number);
}

.txt__list--big.listOl li::marker {
	content: counter(list-number);
	font-weight: 500;
}

.txt__list:where(.listOl, .listUl) {
	margin-left: 1.5rem;
}

.txt__list:where(.listOl, .listUl) li {
	padding-left: 0.5rem;
}

.txt__list--big:where(.listOl, .listUl) {
	margin-left: 2rem;
}

.txt__list--big:where(.listOl, .listUl) li {
	padding-left: 1rem;
}

.txt__list.listUl li::marker {
	content: '*';
}

.txt__list--big.listUl li::marker {
	content: '※';
}

.orange {
	color: #FF6520;
}

.underline {
	text-decoration: underline;
}

.txt--medium {
	font-weight: 500;
}

.txt--bold {
	font-weight: 700 !important;
}

.key-color {
	color: var(--color-key);
}

.abs {
	position: absolute;
}

.rel {
	position: relative;
}

.txt-type1 {
	padding-top: 8rem;
	text-align: center;
}

.txt-type1 .txt__underline {
	width: fit-content;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.txt-type1 .txt__underline::after {
	background-color: #3C3C3C;
	width: 100%;
	height: 2px;
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.txt-type1 .txt__sub {
	font-size: 3.6rem;
}

.txt-type1 .txt__title {
	font-size: 6rem;
}

.txt-type1 .txt__small {
	font-size: 2.5rem;
}

.txt-type2 {
	text-align: center;
}

.txt-type2 .txt__title {
	font-size: 4.5rem;
}

.txt-type2 .txt__price {
	font-size: 5rem;
}

.txt-type2 .txt__price span {
	font-size: 7rem;
}

.txt-type2 .txt__sub {
	font-size: 3rem;
}

.txt-type2 .txt__small {
	font-size: 1.6rem;
}

.godita {
	font-family: 'godita';
}

.italic {
	font-style: italic;
}

.hrStr {
	width: 9rem;
	border-top: 1px dashed #3C3C3C;
	margin-left: auto;
	margin-right: auto;
}

.txt-type5 .txt__underline {
	width: fit-content;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.txt-type5 .txt__underline::after {
	background-color: var(--color-black);
	width: 100%;
	height: 2px;
	display: block;
	content: "";
	position: absolute;
	bottom: 0px;
}

.inni_blue {
	color:var(--color-blue);
}
.inni_orange {
	color:var(--color-orange);
}
.inni_bryellow {
	color:var(--color-bryellow);
}

.white {
	color: #fff;
}

.purple {
	color: #a16db4;
}

.txt-type5 .txt__sub {
	font-size: 2.7rem;
}

.txt-type5 .txt__title {
	font-size: 4.5rem;
}

.txt-type5 .txt__small {
	font-size: 1.6rem;
}

.txt-type5 .txt__desc {
	margin-top: 1rem;
	font-size: 3rem;
}

.txt-type5 .txt__bold {
	font-size: 8rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
}

.txt-type6 {
	text-align: center;
}

.txt-type6 .txt__title {
	font-size: 5rem;
}

.txt-type6 .txt__sub {
	font-size: 3rem;
}

.txt-type6 .txt__small {
	font-size: 1.6rem;
}

.txt-type6 .txt__num {
	font-size: 6.8rem;
	font-style: italic;
	width: fit-content;
	position: relative;
}

.txt-type6 .txt__num::after {
	content: '';
	display: block;
	width: 100%;
	height: 0.4rem;
	background-color: #3c3c3c;
	position: absolute;
	left: 60%;
	transform: translateX(-50%);
	bottom: 10%;
}

.txt-type7 {
	text-align: center;
}

.txt-type7 .txt__title {
	font-size: 6.5rem;
}

.txt-type7 .txt__sub {
	font-size: 3.5rem;
}

.txt-type-bottom {
	padding: 5rem 0;
	text-align: center;
}

.txt-type-bottom .txt__title {
	font-size: 5rem;
	font-weight: 500;
}

.txt-type-bottom .txt__sub {
	font-size: 3.8rem;
}

.content-wrap .content~.content {
	margin: 12rem 0 0;
}

.content-wrap .content.bottom {
	position: relative;
	margin-top: 5rem;
}

.link {
	position: absolute;
	text-indent: -9999rem;
}

.link1 {
	width: 37.1%;
	height: 12.5%;
	top: 58.5%;
	left: 63%;
}

/*gif*/
.gifCont {
	overflow: hidden;
	position: relative;
}

.gifCont.cont1 {
	aspect-ratio: 780/1150;
}

.gifCont.cont2 {
	aspect-ratio: 780/975;
}

.content.gifCont2 {
	aspect-ratio: 780/572;
	overflow: visible;
}

.gifImg {
	position: absolute;
	width: 100%;
	top: 0;
}

.gifImg.img1 {
	top: 20.7rem;
}

.gifImg.img2 {
	top: 10rem;
}

.gifHead {
	position: absolute;
	width: 100%;
	z-index: 2;
	top: 0;
}

.gifBg {
	position: absolute;
	z-index: 1;
	top: 23.9rem;
}

@media screen and (max-width:480px) {
	.gifBg {
		top: 22.7rem;
	}
}

.gifTxt {
	font-size: 1.6rem;
	position: absolute;
	top: 76.5%;
	right: 6%;
	color: #3c3c3c;
}


.txtabs {
	top: 6%;
	width: 100%;
	text-align: center;
	padding: 0 5.6rem;
	color: #fff;
}

.txtabs p:nth-child(1) {
	background-color: #fff;
	font-weight: 700;
	font-size: 6rem;
}

.txtabs p:nth-child(2) {
	font-size: 4.5rem;
	margin-top: 2rem;
}

.txtabs p:nth-child(3) {
	font-size: 3rem;
	margin-top: 2rem;
}


.txtabs2 {
	bottom: 2rem;
	padding: 0;
	left: 4rem;
}

.txtabs2 p:nth-child(1) {
	font-size: 4.5rem;
	font-weight: 700;
}

.txtabs2 p:nth-child(2) {
	font-size: 2rem;
	margin-top: 5rem;
}

.txtabs3 {
	bottom: 6rem;
	left: 4rem;
	padding: 0;
}

.con1 {
	padding: 4rem;
	background-color: #FAA34B;
	margin-top: 0 !important;
}

.con1 p:last-child {
	text-align: center;
	background-color: #fff;
	font-size: 6rem;
	font-weight: 700;
	margin-top: 2rem;
}

.content {
	color: #3C3C3C;
}

p.num {
	font-size: 6.5rem;
	font-weight: 700;
	font-style: italic;
	width: fit-content;
	position: relative;
	line-height: 1;
}

p.num::after {
	background-color: var(--color-black);
	width: 100%;
	height: 4px;
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0.5rem;
}

p.txt__sub {
	font-size: 4rem;
}

p.line {
	width: fit-content;
	font-size: 6rem;
	font-weight: 700;
	color: #fff;
	background-color: #FF6520;
	padding: 0 6rem 0 1rem;
}

.txtabs3 {
	width: fit-content;
	left: 3rem;
	top: 8rem;
	text-align: center;
}

.txtabs4 {
	width: fit-content;
	right: 10rem;
	bottom: 9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.txtabs3 p:nth-child(1) {
	background-color: #fff;
}

.txtabs4 p:nth-child(1) {
	background-color: #12B560;
}

:where(.txtabs3, .txtabs4) p:nth-child(1) {
	width: fit-content;
	padding: 0 5rem;
	font-size: 4.8rem;
	font-weight: 700;
	border-radius: 4rem;
}

:where(.txtabs3, .txtabs4) p:nth-child(2) {
	font-size: 3rem;
	color: #fff;
	text-decoration: underline;
	text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.4);
}

:where(.txtabs5, .txtabs8) p:nth-child(1),
:where(.txtabs6, .txtabs7) p:nth-child(2) {
	font-weight: 700;
	color: #FFF45D;
	text-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.2);
}

.txtabs5 {
	top: 6rem;
	left: 4rem;
}

:where(.txtabs5, .txtabs8) p:nth-child(1) {
	font-size: 4.8rem;
}

:where(.txtabs5, .txtabs8) p:nth-child(2),
:where(.txtabs6, .txtabs7) p:nth-child(1) {
	font-size: 2.5rem;
	color: #fff;
	text-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.2);
}

.txtabs6 {
	right: 6.5rem;
	bottom: 21rem;
}

:where(.txtabs6, .txtabs7) p:nth-child(2) {
	font-size: 3rem;
}

.txtabs7 {
	left: 4rem;
	bottom: 7rem;
}

.txtabs8 {
	left: 4rem;
	top: 6rem;
}

.txtabs8 p:nth-child(1) {
	color: #12B560;
}

.txtabs9 {
	top: 6rem;
	left: 6rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	text-align: center;
}

.txtabs9 p:not(:last-child) {
	width: 22rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #f3ecda;
	font-size: 3rem;
	font-weight: 700;
	color: #FF6520;
	display: flex;
	align-items: center;
	justify-content: center;
}

.txtabs9 p:last-child {
	font-size: 2rem;
}

.txtabs10 {
	top: 6rem;
	left: 3rem;
}

.txtabs10 p:first-child {
	font-size: 5rem;
	font-weight: 700;
}

.orn {
	background-color: #FAA34B;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5rem;
	font-size: 2rem;
}

.txt__small {
	font-size: 1.2rem;
	padding-left: 4rem;
}

.txtabs11 {
	width: 39rem;
	height: 12rem;
	border: 1px solid #000;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.8rem;
	font-weight: 700;
	color: #12B560;
	font-style: italic;
	line-height: 1.1;
	font-family: gordita;
	top: 50%;
}

.txtabs12 {
	bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: 800;
	gap: 2rem;
}

.txtabs12 p:first-child {
	font-size: 6.5rem;
}
.txtabs12 p:nth-child(2) {
	font-size: 4rem;
}

.txtabs13 {
	top: 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	font-weight: 500;
    width: 100%;
	gap: 2rem;
	color:#fff;
}

.txtabs13 p:first-child {
	font-size: 3rem;
}

.txtabs13 p:nth-child(2) {
	font-size: 4.5rem;
}
.txtabs13 p:nth-child(3) {
	font-size: 2.3rem;
	line-height: 1.6;
}

.txtabs14 {
	padding:0 5rem;
	bottom: 5%;
	font-weight: 500;
    width: 100%;
}

.txtabs14 p{
	font-size: 2.2rem;
	line-height: 1.6;
}

.txtabs15{
	top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	font-weight: 500;
    width: 100%;
	gap: 2rem;
	color:#fff;
}
.txtabs15 p:first-child {
	font-size: 4rem;
}

.txtabs15 p:nth-child(2) {
	font-size: 7.5rem;
	text-shadow:0px 0px 15px #fff;
}

.txtabs16{
	bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
	gap: 2rem;
}

.txtabs16 p:first-child {
	font-size: 2.1rem;
}

.txtabs16 p:nth-child(2) {
	font-size: 1.8rem;
	color:#fff;
}

.pdp-wrap .best {
	border-top: 1px solid #000;
	height: 26rem;
	display: flex;
}

.pdp-wrap .best div {
	padding-top: 3.2rem;
}

.pdp-wrap .best div:nth-child(1) {
	width: 16.8rem;
	text-align: center;
	font-size: 2.4rem;
	font-family: gordita;
	font-weight: 700;
}

.pdp-wrap .best div:nth-child(2) {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 30rem;
}

.pdp-wrap .best div:where(:nth-child(2), :nth-child(3)) {
	padding-left: 2rem;
}

.rects {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.rects li {
	font-size: 2rem;
	color: #3C3C3C;
	padding-left: 3.5rem;
	display: flex;
	align-items: center;
	position: relative;
}

.rects li::before {
	content: '';
	display: block;
	width: 2rem;
	aspect-ratio: 1;
	border: 1px solid #000;
	position: absolute;
	left: 0;
}

.rects li.act {
	font-weight: 700;
}

.rects li.act::before {
	background-color: #FF6520;
}

.pdp-wrap .best div:nth-child(3) p {
	font-size: 1.2rem;
}

/* ======================== E [레이아웃] ============================ */
.topBanner {
	background-color: #cfcfcf;
	padding: 30px 40px;
}

.topBanner .bannerCont {
	border: 1px solid #7c7c7c;
	padding: 20px;
}

.topBanner .bannerCont p {
	font-size: 2.3rem;
	line-height: 3.2rem;
}

.topBanner .bannerCont em {
	font-weight: 700;
}

sup {
	font-size: 50%;
}


/* 모바일 버전 */
@media screen and (max-width:480px) {

	/* =========================== S [고정] =========================== */
	/* renewal.css에서 img {display:block; width:100%} 으로 붙기 때문에 고려해서 맞추기 */
	img {
		display: block;
		width: 100%;
	}

	html {
		font-size: 5px;
	}

	/* =========================== E [고정] =========================== */


	/* ======================== S [레이아웃] ============================ */
	/* ======================== E [레이아웃] ============================ */

}

.holiday .txtabs {
	top: 78%;
	width: 100%;
	font-size: 5.6rem;
	font-weight: 700;
	color: #FF2886;
	text-align: center;
}

.holiday .txtabs p {
	background-color: transparent;
}

.holiday .txtabs2 {
	font-size: 2.6rem;
	top:30%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #FF2886;
	gap: 3rem;
	left: 0;
}

.holiday .txtabs2 p:nth-child(1) {
	font-weight: 500;
	font-size: 2.6rem;
}

.holiday .txtabs2 p:nth-child(2) {
	font-weight: 700;
	font-size: 2.6rem;
	margin-top: 0;
}

.holiday .prdList {
	position: absolute;
	top: 79.5%;
	font-size: 2.5rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
	width: calc(100% - 8rem);
	margin-left: 4rem;
}

.holiday .prdList li {
	display: flex;
	gap: 2rem;
	align-items: center;
}

.holiday .prdList li p:nth-child(1) {
	font-weight: 500;
	white-space: nowrap;
}

.holiday .prdList .hrt {
	width: 100%;
	height: 0;
	border-top: 2px dashed #fff;
}

.holiday .prdList li p:nth-child(3) {
	font-weight: 700;
}

.holiday .prdDesc {
	position: absolute;
	width: 100%;
	top: 94%;
	font-size: 2rem;
	color: #fff;
	font-weight: 400;
	text-align: center;
}

.holiday .link.link1 {
	width: 100%;
	height: 81.4%;
	top: 0;
	left: 0;
}