@charset "utf-8";


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

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

.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.06em;
}

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



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

.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: '※';
}

.underline {
	text-decoration: underline;
}

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

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

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

.green {
	color: #12b560;
}

.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: 2rem;
}

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

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

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

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

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

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

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

.italic {
	font-style: italic;
}

.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;
}

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

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

.txt-type5 .txt__title {
	font-size: 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 {
	padding-top: 2rem;
	text-align: center;
}

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

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

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

.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;
}

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

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

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

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

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

.gifImg.img1 {
	top: 10.5rem;
}

.gifImg.img2 {
	top: 10rem;
}

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

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

.tit1 {
	font-size: 4.2rem;
	font-weight: 700;
	color: #0028B9;
	text-align: center;
}

.imjlist {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 3rem auto 0;
	width: fit-content;
}

.imjlist li {
	display: flex;
	gap: 1rem;
	align-items: center;
	font-size: 2.2rem;
	font-weight: 500;
}

.imjlist li img {
	width: 2.1rem;
}

.imgFlex {
	display: flex;
	justify-content: center;
	gap: 3rem;
}

.imgFlex img {
	width: 32.6rem;
}

.imgFlex p {
	margin-top: 2rem;
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
}
.inni_blue {
	color:var(--color-blue);
}
.inni_bryellow {
	color:var(--color-bryellow);
}

.white {
	color: #fff;
}

.txtsmall {
	font-size: 1.6rem;
	text-align: center;
	font-weight: 300;
}

.vidWrap {
	width: 100%;
	aspect-ratio: 680/482;
}

.content-wrap {
	overflow: hidden;
}

.vidWrap2 {
	width: 37.5rem;
	aspect-ratio: 1;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	border: 1rem solid #0028B9;
	bottom: -7%;
	right: -6%;
}

:where(.vidWrap, .vidWrap2) video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.txtabs0 {
	font-size: 5rem;
	font-weight: 700;
	color: #fff;
	left: 6%;
	top: 12%;
}

.txtabs1 {
	top: 8%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.txtabs1 p {
	text-align: center;
}

.txtabs1 p:nth-child(1) {
	font-size: 3.2rem;
	letter-spacing: 0;
}

.txtabs1 p:nth-child(1) em {
	font-weight: 700;
}

.txtabs1 p:nth-child(2),
.txtabs6 p:nth-child(2) {
	font-size: 6.2rem;
	font-weight: 800;
	color: #0028B9;
	margin-top: 3rem;
}

.txtabs1 p:nth-child(2) {
	color: #fff;
}

.txtabs1 p:nth-child(3) {
	width: fit-content;
	font-size: 2.4rem;
	font-weight: 700;
	color: #0028B9;
	background-color: #fff;
	border-radius: 3rem;
	padding: 0 1.8rem;
	line-height: 6rem;
	margin-top: 2rem;
}

.txtabs1 p:nth-child(4),
.txtabs6 p:nth-child(3) {
	font-size: 2rem;
	margin-top: 1rem;
}

.txtabs2 {
	bottom: 3rem;
	left: 5rem;
}

.txtabs2 p:nth-child(1),
p.tit1 {
	font-family: 'gordita';
	font-size: 4.8rem;
	font-weight: 700;
	color: #0028B9;
	font-style: italic;
	position: relative;
	width: fit-content;
}

.txtabs2 p:nth-child(1)::after,
p.tit1::after {
	content: "";
	width: 100%;
	height: 0.2rem;
	background-color: #0028B9;
	position: absolute;
	left: 0.2rem;
	bottom: 0;
}

.txtabs2 p:nth-child(2) {
	font-size: 4.8rem;
	font-weight: 700;
	color: #00c52e;
	margin-top: 3rem;
}

sup {
	font-size: 50%;
}

.txtabs2 p:nth-child(3) {
	font-size: 2.8rem;
	font-weight: 500;
	margin-top: 1rem;
}

.txtabs2 p:nth-child(4) {
	font-size: 1.6rem;
	font-weight: 500;
	margin-top: 1rem;
}

.txtabs3 {
	left: 7%;
	top: 8%;
}

.txtabs4 {
	left: 65%;
	top: 35%;
}

.txtabs5 {
	bottom: 3rem;
	left: 3rem;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: -0.1em;
}


:where(.txtabs3, .txtabs4) p:nth-child(1) {
	font-size: 2rem;
	font-family: 'gordita';
	font-weight: 700;
}

:where(.txtabs3, .txtabs4) p:nth-child(2) {
	font-size: 3rem;
	font-weight: 700;
	color: #0028B9;
	margin-top: 1rem;
}

.txtabs6 {
	top: 12%;
	text-align: center;
	width: 100%;
}

.txtabs6 p:nth-child(1) {
	font-size: 4.4rem;
	color: #ffff82;
	background-color: #0027b9;
	padding: 0 2rem;
	width: fit-content;
	margin: auto;
	font-weight: 700;
}

.txtabs22 {
	font-size: 2.8rem;
	width: 100%;
	font-weight: 700;
	text-align: center;
	top: 12%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.txtabs23 {
	width: 100%;
	font-size: 2.6rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	bottom: 3%;
}

.txtabs23 span {
	margin-top: 1rem;
	font-size: 1.8rem;
	font-weight: 500;
}

.prdl {
	display: flex;
}


p.tit2 {
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	background-color: #0028B9;
	width: fit-content;
	padding: 0.6rem 1rem;
	border-radius: 0.6rem;
	letter-spacing: 0;
}

p.tit3 {
	font-size: 2.8rem;
	font-weight: 500;
}

p.tit3 em {
	font-size: 4.8rem;
	font-weight: 700;
	color: #0028B9;
}

p.tit3 em span {
	color: #00bfff;
}

.tit4 {
	font-size: 1.6rem;
}

.tit5 {
	font-size: 3.2rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
}

.tit5 em {
	font-size: 5.2rem;
}

.titbox {
	padding: 3rem;
	background-color: #fff;
	border-radius: 2rem;
	margin-top: 2rem;
	line-height: 1.6;
}

.titbox p:nth-child(1) {
	font-size: 2.1rem;
	font-weight: 500;
}

.titbox p:nth-child(1) em {
	font-weight: 700;
}

.titbox p:nth-child(2) {
	font-size: 1.6rem;
	font-weight: 500;
	margin-top: 3rem;
}

.tit6 {
	font-size: 3.2rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
}

.tit7 {
	font-size: 1.6rem;
	font-weight: 300;
	color: #fff;
	text-align: right;
}

.tit8 {
	font-size: 3.2rem;
	text-align: center;
	font-weight: 500;
	color: #0028B9;
}

.tit8 em {
	font-size: 6.2rem;
	font-weight: 700;
}

.tit9 {
	font-size: 2.2rem;
	font-weight: 500;
	text-align: center;
}

.tit9 em {
	font-weight: 700;
}

:where(.txtabs7, .txtabs8, .txtabs9, .txtabs10, .txtabs11) {
	font-size: 2.2rem;
	font-weight: 500;
}

:where(.txtabs7, .txtabs8, .txtabs9, .txtabs10, .txtabs11) em {
	font-weight: 700;
}

.txtabs7,
.txtabs9,
.txtabs11 {
	left: 22%;
}

.txtabs7 {
	top: 3.5%;
	width: 56%;
}

.txtabs8 {
	top: 23%;
	width: 41%;
	right: 21%;
}

.txtabs9 {
	top: 45%;
	width: 45%;
}

.txtabs10 {
	top: 63.5%;
	width: 51%;
	left: 40%;
}

.txtabs11 {
	top: 85%;
	width: 45%;
}

.txtabs12 {
	width: 100%;
	top: 6%;
	text-align: center;
	color: #fff;
}

.txtabs12 p:nth-child(1) {
	font-size: 3.2rem;
	font-weight: 500;
}

.txtabs12 p:nth-child(1) em {
	font-size: 6.2rem;
	font-weight: 700;
}

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

.txtabs13 {
	left: 6%;
	bottom: 7%;
	display: flex;
	flex-direction: column;
}

.txtabs13 p:nth-child(1) {
	font-size: 2.8rem;
	font-weight: 500;
	color: #243ea0;
	padding: 0 2rem;
	line-height: 4.7rem;
	border-radius: 2.4rem;
	background-color: #fff;
	width: fit-content;
}

.txtabs13 p:nth-child(2) {
	font-size: 5.2rem;
	font-weight: 700;
	color: #fff;
	margin-top: 1rem;
}

.txtabs14 {
	font-size: 1.2rem;
	color: #3c3c3c;
	right: 2rem;
	bottom: 1rem;
}

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

.txtabs15 p:first-child {
	font-size: 6.5rem;
}

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

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

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

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

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

.tit14 {
	font-size: 3.8rem;
	font-weight: 700;
	text-align: center;
}

.tit14 em {
	color: #0028B9;
}

.tit15 {
	font-size: 2.8rem;
	line-height: 1.8;
	margin-left: 6.4rem;
}

.tit15 span {
	display: inline-block;
	vertical-align: middle;
	width: 0.8rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #000;
	margin: 0 2rem;
}

.tit16 {
	font-size: 1.6rem;
	color: #3c3c3c;
	line-height: 1.6;
}

.tit17 {
	font-size: 3.8rem;
	font-weight: 700;
	text-align: center;
}

.tit18 {
	font-size: 6rem;
	font-weight: 700;
	font-style: italic;
	position: relative;
	width: fit-content;
	margin: auto;
	line-height: 1;
}

.tit18::after {
	content: "";
	display: block;
	width: 100%;
	height: 0.3rem;
	background-color: #3c3c3c;
	position: absolute;
	bottom: 0;
	left: 0.5rem;
}

.tit19 {
	font-size: 5rem;
	font-weight: 700;
	color: #0027b9;
}

.tit20 {
	font-size: 2.2rem;
	line-height: 1.5;
}

.tit20 em {
	font-size: 3.4rem;
	font-weight: 700;
}

.tit20 span {
	font-weight: 700;
}

.tit21 {
	width: fit-content;
	font-size: 2.4rem;
	font-weight: 700;
	border-top: 1px dashed #3c3c3c;
	border-bottom: 1px dashed #3c3c3c;
	padding: 2rem 0;
}

.tit22 {
	font-size: 2rem;
}

.tit23 {
	font-size: 7rem;
	font-weight: 700;
	font-family: 'gordita';
	color: #000;
}

.tit24 {
	font-size: 4rem;
	font-weight: 700;
}

.tit25 {
	font-size: 2.4rem;
	line-height: 1.8;
}

.pdplist {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.pdplist li {
	display: flex;
	align-items: center;
}

.pdplist li p {
	text-align: center;
	color: #000;
}

.pdplist li p:not(:nth-child(2)) {
	width: 100%;
	font-size: 2rem;
	font-weight: 500;
}

.pdplist li p:nth-child(2) {
	min-width: 8.8rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #ffff82;
	line-height: 8.8rem;
	font-size: 2.4rem;
	font-weight: 700;
}

.pdp-wrap .best {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	height: 22rem;
	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;
	width: 30rem;
}

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

.pdp-wrap .best div:nth-child(2) p {
	font-size: 1.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: #0028B9;
}

@media screen and (max-width:480px) {
	:where(.txtabs7, .txtabs8, .txtabs9, .txtabs10, .txtabs11) {
		font-size: 2.8vw;
	}
}

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

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



/* ======================== 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;
}




/* 모바일 버전 */
@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 [레이아웃] ============================ */

}