/* font 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

@font-face {
	font-family: 'Jalnan';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
	font-weight: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Cafe24 Ohsquare';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff');
	font-weight: normal;
	font-display: swap;
}

@font-face {
	font-family: 'InsungitJisu';
	src: url(../font/insungitcutelivelyjisu/insungit-Cutelively-jisu-Regular.woff);
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*html,body {font-size: 0.5208333333333333vw;}*/
html,body {font-size: 10px;}
.wrap {
	position: relative;
	width: 100%;
}

.pc {display: block;}
.mo {display: none;}
@media (max-width: 1024px) {
	.pc {display: none;}
	.mo {display: block;}
}

/* header */
header{display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; top: 0; width: 100%; height: 109px; padding: 0 120px 0 130px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 1.67%, rgba(0, 0, 0, 0.00) 101.54%); box-sizing: border-box; z-index: 10000; transition: all 0.7s ease;}
header.off{transform: translateY(-100%);}
header h1 a{display: block; width: 195px; height: 88px; background: url('../images/logo.png') left center no-repeat;}
header ul{display: flex;}
header ul li + li{margin-left: 12px;}
header ul li a{display: block; height: 56px; padding: 0 30px; border-radius: 10px; border: 2px solid #FFF; color: #FFF; text-align: center; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 700; box-sizing: border-box;}
header ul li .btn-cart span{display: flex; align-items: center; height: 100%; padding-right: 40px; background: url('../images/ico_cart.svg') right center no-repeat;}
header ul li .btn-login span{display: flex; align-items: center; height: 100%; padding-right: 35px; background: url('../images/ico_login.svg') right center no-repeat;}
@media (max-width: 1024px) {
	header{height: 60px; padding: 0 20px;}
	header h1 a{width: 94px; height: 37px; background-size: auto 40px;}
	header ul li + li{margin-left: 4px;}
	header ul li a{width: 30px; height: 30px; padding: 0; border-radius: 6px; border: 1px solid #FFF; text-indent: -9999em;}
	header ul li .btn-cart span{padding: 0; background-position: center; background-size: 20px;}
	header ul li .btn-login span{padding: 0; background-position: center; background-size: 20px;}
}

/* visual */
.section_visual{position: relative; height: 100vh; overflow: hidden;}
.section_visual .swiper-slide{position: relative; width: 100%; height: 100vh;}
.section_visual .swiper-slide .copy{position: absolute; left: 6.77%; bottom: 25px; color: rgba(255, 255, 255, 0.80); font-size: 14px; font-weight: 500; line-height: 100%;}
.section_visual .swiper-slide.item1{background: url('../images/visual1.jpg') center / cover no-repeat;}
.section_visual .swiper-slide.item2{background: url('../images/visual2.jpg') center / cover no-repeat;}
.section_visual .swiper-slide.item2 .txt{position: absolute; left:29.688%; top:19.565%; width:40.625%; transform: translateX(200px); opacity: 0; transition: all 0.7s 0.5s ease;}
.section_visual .swiper-slide.item2.swiper-slide-active .txt{transform: translateX(0); opacity: 1;}
.section_visual .swiper-slide.item3{background: url('../images/visual3.jpg') center / cover no-repeat;}
.section_visual .swiper-slide.item3 .txt{position: absolute; left:29.688%; top:19.565%; width:40.625%; transform: translateX(200px); opacity: 0; transition: all 0.7s 0.5s ease;}
.section_visual .swiper-slide.item3.swiper-slide-active .txt{transform: translateX(0); opacity: 1;}
.section_visual .swiper-slide.item4{background: url('../images/visual4.jpg') center / cover no-repeat;}
.section_visual .swiper-slide.item4 .txt{position: absolute; left:34.583%; top:19.565%; width:30.833%; transform: translateX(200px); opacity: 0; transition: all 0.7s 0.5s ease;}
.section_visual .swiper-slide.item4.swiper-slide-active .txt{transform: translateX(0); opacity: 1;}
.section_visual .ob1{position: absolute; left:30.000%; top:9.638%; width:39.271%; z-index: 10; transform: scale(0); opacity: 0;}
.section_visual .ob2{position: absolute; left:40.556%; top:49.275%; width:20.903%; z-index: 10; transform: translateY(150px); opacity: 0; transition: all 0.7s 0.7s ease;}
.section_visual .ob3{position: absolute; left:59.167%; top:47.609%; width:17.778%; z-index: 10; transform: translateX(-100px); opacity: 0; transition: all 0.7s 1.1s ease;}
.section_visual.step1 .ob1{transform: scale(1); opacity: 1; transition: all 0.3s 0.2s ease;}
.section_visual.step1 .ob2{transform: translateY(0); opacity: 1;}
.section_visual.step1 .ob3{transform: translateX(0); opacity: 1;}
.section_visual.step1.re .ob1{transition: all 0.3s 1.4s ease;}
.section_visual.step1.re .ob3{transition: all 0.3s 2.0s ease;}
.section_visual.step2 .ob1{transform: translateY(0); opacity: 0; transition: all 0.7s ease;}
.section_visual.step2 .ob2{transform: translateY(7%) scale(1.3); opacity: 1; transition: all 0.7s ease;}
.section_visual.step2 .ob3{transform: translateX(0); opacity: 0; transition: all 0.7s ease;}
.section_visual.step3 .ob1{transform: translateY(0); opacity: 0; transition: all 0.7s ease;}
.section_visual.step3 .ob2{transform: translateY(7%) scale(1.3); opacity: 1; transition: all 0.7s ease;}
.section_visual.step3 .ob3{transform: translateX(0); opacity: 0; transition: all 0.7s ease;}
.section_visual.step4 .ob1{transform: scale(0); opacity: 0; transition: all 0.7s ease;}
.section_visual.step4 .ob2{transform: translateY(7%) scale(1.3); opacity: 1; transition: all 0.7s ease;}
.section_visual.step4 .ob3{transform: translateX(-100px); opacity: 0; transition: all 0.7s ease;}
.section_visual .ob2.show img{animation:sha1ke 0.7s infinite ease-in-out alternate; animation-delay: 0.7s;}
@keyframes shake {
	0% { transform: translateY(0); }
	100% { transform: translateY(-15px); }
}

@media (max-width: 1024px) {
	.section_visual{width: 100%; height: 100svh;}
	.section_visual .swiper-container{height: 100%;}
	.section_visual .swiper-slide{width: 100%; height: 100%;}
	.section_visual .swiper-slide.item1{background-image: url('../images/visual1_mo.jpg');}
	.section_visual .swiper-slide.item2{background-image: url('../images/visual2_mo.jpg');}
	.section_visual .swiper-slide.item2 .txt{left: 10.667%; top: 23.816%; width: 78.933%;}
	.section_visual .swiper-slide.item3{background-image: url('../images/visual3_mo.jpg');}
	.section_visual .swiper-slide.item3 .txt{left:10.533%; top:23.816%; width:78.933%;}
	.section_visual .swiper-slide.item4{background-image: url('../images/visual4_mo.jpg');}
	.section_visual .swiper-slide.item4 .txt{left:21.600%; top:23.816%; width:56.800%;}
	.section_visual .swiper-slide .copy{display: none;}
	.section_visual .ob1{left: 2.667%; top: 17.105%; width: 97.067%;}
	.section_visual .ob2{left: calc(50% - (30.789svh / 2)); top: auto; bottom: 5.921svh; width: 30.789svh;}
	.section_visual .ob3{left: 44.600%; top: 43.816%; width: 23.552svh;}
	.section_visual .copy-txt{position: absolute; left: 20px; bottom: 20px; color: rgba(255, 255, 255, 0.4); font-size: 8px; z-index: 10;}
	.section_visual.step1 .copy-txt{color: rgba(0, 0, 0, 0.40);}
	.section_visual.step2 .ob2{left: calc(50% - (30.789svh / 2)); transform: translateY(8%) scale(1.5);}
	.section_visual.step3 .ob2{left: calc(50% - (30.789svh / 2)); transform: translateY(8%) scale(1.5);}
	.section_visual.step4 .ob2{left: calc(50% - (30.789svh / 2)); transform: translateY(8%) scale(1.5);}
}

/* section01 */
.section01{position: relative; height: 260vh;}
.section01 .sticky_outer{position: sticky; top: 0; height: 100vh;}
.section01 .sub01{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/sec01_1_bg.jpg') center / cover no-repeat; z-index: 10;}
.section01 .sub01 .in{position: absolute; right: 8.75%; top: 35.684%; text-align: center;}
.section01 .sub01 .in p{color: #FFF; text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.50); font-family: 'InsungitJisu'; font-size: 32px; line-height: 180%; letter-spacing: -0.96px; transform: translateY(100px); opacity: 0; transition: all 1.2s ease;}
.section01 .sub01 .in img{width: 200px; margin-top: 30px; transform: translateY(100px); opacity: 0; transition: all 1.2s 0.4s ease;}
.section01 .sub01 .copy{position: absolute; left: 12.760%; bottom: 25px; color: rgba(255, 255, 255, 0.80); font-size: 14px; font-weight: 500; line-height: 100%;}
.section01 .sub01.on .in p{transform: translateY(0); opacity: 1;}
.section01 .sub01.on .in img{transform: translateY(0); opacity: 1;}
.section01 .sub02{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/sec01_2_bg.jpg') center / cover no-repeat; opacity: 0; z-index: 20; transition: all 1.2s ease;}
.section01 .sub02 .in{position: absolute; left: 7.8125%; top: 17.368%; text-align: center;}
.section01 .sub02 .in p{color: #333; text-align: center; font-family: "InsungitJisu"; font-size: 32px; font-style: normal; font-weight: 400; line-height: 180%; letter-spacing: -0.96px; transform: translateY(100px); opacity: 0;}
.section01 .sub02 .in p + p{margin-top: 30px;}
.section01 .sub02 .in img{width: 190px; margin-top: 30px; transform: translateY(100px); opacity: 0;}
.section01 .sub02.on{opacity: 1;}
.section01 .sub02.on .in p{transform: translateY(0); opacity: 1;}
.section01 .sub02.on .in p:nth-of-type(1){transition: all 1.2s 0.6s ease;}
.section01 .sub02.on .in p:nth-of-type(2){transition: all 1.2s 1.0s ease;}
.section01 .sub02.on .in img{transform: translateY(0); opacity: 1; transition: all 1.2s 1.4s ease;}
@media (max-width: 1024px) {
	.section01{height: 280vh;}
	.section01 .sub01{background-image: url('../images/sec01_1_bg_mo.jpg');}
	.section01 .sub01 .in{right: auto; left: 0; top: auto; bottom: 45px; width: 100%;}
	.section01 .sub01 .in p{font-size: 18px; letter-spacing: -0.48px; text-shadow: none;}
	.section01 .sub01 .in img{width: 127px; margin-top: 10px;}
	.section01 .sub01 .copy{left: 20px; bottom: 20px; color: rgba(255, 255, 255, 0.40); font-size: 8px;}
	.section01 .sub02{background-image: url('../images/sec01_2_bg_mo.jpg'); background-position: center bottom 20%;}
	.section01 .sub02 .in{left: 0; top: auto; bottom: 35px; transform: translateY(0); width: 100%;}
	.section01 .sub02 .in p{font-size: 18px; letter-spacing: -0.48px; text-shadow: none;letter-spacing: -0.54px;}
	.section01 .sub02 .in p + p{margin-top: 14px;}
	.section01 .sub02 .in img{width: 113px; margin-top: 14px;}
}

/* section02 */
.section02{position: relative; height: 950px; padding: 115px 0 160px; background: url('../images/sec02_bg.jpg') center / cover no-repeat; text-align: center; box-sizing: border-box; overflow: hidden;}
.section02 h2{display: inline-block; position: relative; color: #FFF; text-align: center; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.20); font-family: "Jalnan"; font-size: 80px; font-weight: 400; line-height: 100%; letter-spacing: -2.4px;}
.section02 h2 strong{display: block; transform: translateY(150px); opacity: 0; transition: all 1.0s ease;}
.section02 h2 span{display: block; margin-top: 10px; color: #FFD23F; text-align: center; font-size: 64px; letter-spacing: -1.92px; transform: translateY(150px); opacity: 0; transition: all 1.0s 0.2s ease;}
.section02 h2 .star1{position: absolute; right: -80px; bottom: -10px; width: 83px; transform: scale(0); transition: all 1.0s 0.5s ease;}
.section02 h2 .star2{position: absolute; right: -95px; bottom: 60px; width: 41px; transform: scale(0); transition: all 1.0s 0.7s ease;}
.section02 h2.on strong{transform: translateY(0); opacity: 1;}
.section02 h2.on span{transform: translateY(0); opacity: 1;}
.section02 h2.on .star1{transform: scale(1);}
.section02 h2.on .star2{transform: scale(1);}
.section02 .box{width: 1315px; height: 450px; padding-top: 45px; margin: 55px auto 0; border-radius: 500px; background: rgba(255, 255, 255, 0.50); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px); text-align: center; box-sizing: border-box; transform: translateY(150px); opacity: 0; transition: all 1.0s 0.2s ease;}
.section02 .box ul{display: inline-flex; margin-left: 10px;}
.section02 .box ul li{position: relative; padding-top: 222px; color: #333; text-align: center; font-family: "InsungitJisu"; font-size: 28px; line-height: 150%; letter-spacing: -0.56px;}
.section02 .box ul li::after{position: absolute; right: -75px; top: 80px; width: 40px; height: 40px; background: url('../images/ico_arw.svg') no-repeat; content: "";}
.section02 .box ul li:last-child:after{display: none;}
.section02 .box ul li:nth-of-type(1){margin-right: 110px; background: url('../images/sec02_item1.png') center top no-repeat;}
.section02 .box ul li:nth-of-type(2){margin-right: 140px; background: url('../images/sec02_item2.png') center top no-repeat;}
.section02 .box ul li:nth-of-type(3){background: url('../images/sec02_item3.png') center top no-repeat;}
.section02 .box ul li:nth-of-type(3) strong::after{position: absolute; right: -25px; top: -25px; width: 25px; height: 25px; background: url('../images/ico_heart.svg') center no-repeat; content: "";}
.section02 .box ul li strong{position: relative; color: #0072BC; font-size: 28px; font-weight: 400; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
.section02 .box .ob1{position: absolute; right: -95px; top: -130px; width: 315px; transform: translate(150px, 150px); opacity: 0; transition: all 1.0s 0.2s ease;}
.section02 .box .ob2{position: absolute; left: -180px; bottom: -110px; width: 329px; transform: translateX(-150px); opacity: 0; transition: all 1.0s 0.2s ease;}
.section02 .box.on{transform: translateY(0); opacity: 1;}
.section02 .box .ob1.on{transform: translate(0, 0); opacity: 1;}
.section02 .box .ob2.on{transform: translate(0, 0); opacity: 1;}
.section02 .copy{position: absolute; left: 6.77%; bottom: 55px; color: rgba(255, 255, 255, 0.80); font-size: 14px; font-weight: 500; line-height: 100%;}
@media (max-width: 1024px) {
	.section02{height: auto; padding: 70px 0 130px; background-image: url('../images/sec02_bg_mo.jpg');}
	.section02 h2{font-size: 30px; letter-spacing: -0.9px;}
	.section02 h2 span{margin-top: 10px; font-size: 24px; letter-spacing: -0.72px;}
	.section02 h2 .star1{right: auto; left: -45px; bottom: 45px; width: 39px;}
	.section02 h2 .star2{right: auto; left: -20px; bottom: 80px; width: 19px;}
	.section02 .box{width: calc(100% - 40px); max-width: 336px; height: auto; padding: 40px 0; margin: 30px auto 0; border-radius: 30px;}
	.section02 .box ul{display: inline-block; margin-left: 0;}
	.section02 .box ul li{display: flex; align-items: center; height: 80px; padding: 0 0 0 92px; font-size: 16px; letter-spacing: -0.3px; text-align: left;}
	.section02 .box ul li::after{position: absolute; right: auto; left: 50%; top: auto; bottom: -36px; width: 24px; height: 24px; margin-left: -12px; background: url('../images/ico_arw_b.svg') center / 100% auto no-repeat; content: "";}
	.section02 .box ul li:nth-of-type(1){margin-right: 0; background-size: 80px auto; background-position: left center;}
	.section02 .box ul li:nth-of-type(2){margin-right: 0; background-size: 80px auto; background-position: left center;}
	.section02 .box ul li:nth-of-type(3){background-size: 80px auto; background-position: left center;}
	.section02 .box ul li:nth-of-type(3) strong::after{right: -65px; top: -15px; width: 15px; height: 15px; background-size: 100% auto;}
	.section02 .box ul li + li{margin-top: 45px;}
	.section02 .box ul li strong{font-size: 16px;}
	.section02 .box .ob1{right: -10px; top: -40px; width: 122px;}
	.section02 .box .ob2{left: -15px; bottom: -100px; width: 102px;}
	.section02 .copy{position: absolute; left: 20px; bottom: 12px; color: rgba(0, 0, 0, 0.40); font-size: 8px;}
}

/* section03 */
.section03{padding: 130px 0 160px; background: url('../images/sec03_bg.jpg') center / cover no-repeat; text-align: center; overflow: hidden;}
.section03 h2{display: block; color: #333; font-family: "Jalnan"; font-size: 62px; font-weight: 400; text-align: center; transform: translateY(150px); opacity: 0; transition: all 1.0s ease;}
.section03 h2.on{transform: translateY(0); opacity: 1;}
.section03 .tab{display: inline-flex; gap: 12px; position: relative; margin: 65px auto 0; text-align: center; transform: translateY(150px); opacity: 0; transition: all 1.0s 0.2s ease; z-index: 10;}
.section03 .tab button{height: 52px; padding: 0 40px; border-radius: 500px; background: #FFF; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20) inset; color: #444; font-family: "Jalnan"; font-size: 20px; box-sizing: border-box; transition: all 0.3s ease;}
.section03 .tab button.on{background: #FF6857; box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.50) inset, 2px 2px 4px 0 rgba(0, 0, 0, 0.20); color: #fff;}
.section03 .tab.on{transform: translateY(0); opacity: 1;}
.section03 .list-box{position: relative; width: 100%; margin: 90px auto 0; transform: translateY(150px); opacity: 0; transition: all 1.0s ease;}
.section03 .list-box .ob{position: absolute; left: calc(50% - 835px); top: -350px; width: 444px; z-index: 10; transform: translateY(50px); opacity: 0; transition: all 1.0s ease;}
.section03 .list-box .ob .img2{position: absolute; right: 0; top: 0; width: 280px; opacity: 0; transition: all 0.5s ease;}
.section03 .list-box .ob .img2.on{opacity: 1;}
.section03 .list-box.on{transform: translateY(0); opacity: 1;}
.section03 .list-box.on .ob{transform: translateY(0); opacity: 1;}
.section03 .list-box .swiper-container{overflow-x: hidden;}
.section03 .list-box .swiper-slide .list{display: flex; flex-wrap: wrap; gap: 30px 0; width: 1424px; height: 1060px; margin: 0 auto; text-align: left;}
.section03 .list-box .swiper-slide .list > li{width: 356px;}
.section03 .list-box .swiper-slide .list > li .item{width: 330px; height: 500px; padding: 20px 0 0 20px; margin: 0 auto; border-radius: 30px; background: #FFF; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); box-sizing: border-box;}
.section03 .list-box .swiper-slide .list > li .item .img{position: relative; width: 290px; aspect-ratio: 1/1; border-radius: 20px; overflow: hidden;}
.section03 .list-box .swiper-slide .list > li .item .img .btn-kit-view{position: absolute; right: 0; bottom: 0; height: 38px; padding: 0 20px; border-radius: 50px; background: rgba(0, 0, 0, 0.80); backdrop-filter: blur(5px);}
.section03 .list-box .swiper-slide .list > li .item .img .btn-kit-view span{display: block; padding-left: 22px; background: url('../images/ico_plus.svg') left center no-repeat; color: #FFF; font-size: 13px; font-weight: 700;}
.section03 .list-box .swiper-slide .list > li .item .img .kit-list{display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.80); backdrop-filter: blur(5px); z-index: 20;}
.section03 .list-box .swiper-slide .list > li .item .img .kit-list.on{display: block;}
.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div ul li{color: #FFF; font-size: 22px; font-weight: 600; line-height: 30px; text-align: center;}
.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div ul li + li{margin-top: 20px;}
.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div ul.type2 li + li{margin-top: 10px;}
.section03 .list-box .swiper-slide .list > li .item .img .kit-list .btn-close{position: absolute; right: 20px; top: 20px; width: 30px; aspect-ratio: 1/1; background: url('../images/ico_close.svg') center no-repeat; text-indent: -9999em;}
.section03 .list-box .swiper-slide .list > li .item .info{position: relative; padding-left: 5px; margin-top: 24px;}
.section03 .list-box .swiper-slide .list > li .item .info .tit{color: #000; font-size: 22px; font-weight: 500; line-height: 30px;}
.section03 .list-box .swiper-slide .list > li .item .info .price{margin-top: 8px; color: #000; font-size: 24px; font-weight: 600; line-height: 30px;}
.section03 .list-box .swiper-slide .list > li .item .info .price strong{display: inline-block; margin-right: 5px; font-size: 30px; font-weight: 700;}
.section03 .list-box .swiper-slide .list > li .item .info .desc{margin-top: 16px;}
.section03 .list-box .swiper-slide .list > li .item .info .desc > span{display: block;}
.section03 .list-box .swiper-slide .list > li .item .info .desc > span span{display: inline-block; position: relative; color: #000; font-size: 18px; font-weight: 500; z-index: 1;}
.section03 .list-box .swiper-slide .list > li .item .info .desc > span span::after{position: absolute; left: 0; bottom: 0; width: 100%; height: 10px; background: rgba(255, 219, 133, 0.50); content: ""; z-index: -1;}
.section03 .list-box .swiper-slide .list > li .item .info .desc > span + span{margin-top: 7px;}
.section03 .list-box .swiper-slide .list > li .item .info .btn-cart{position: absolute; right: 25px; top: 0; width: 42px; aspect-ratio: 1/1; border-radius: 10px; background: linear-gradient(170deg, #009BD9 -1.51%, #0072BC 87.66%); text-indent: -9999em;}
.section03 .list-box .swiper-slide .list > li .item .info .btn-cart::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/ico_cart.svg') center / 70% no-repeat; content: "";}
.section03 .list-box .swiper-slide .list > li .item .info .bottom{display: none;}
.section03 .pop-cart{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 11000;}
.section03 .pop-cart.on{display: block;}
.section03 .pop-cart > div{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); box-sizing: border-box;}
.section03 .pop-cart .box{width: 500px; background: url('../images/bg_pop_cart.jpg'); border-radius: 30px; padding: 40px 45px 55px; box-sizing: border-box;}
.section03 .pop-cart .box .in{padding-top: 210px; background: url('../images/thankyou.png') center top / 206px auto no-repeat;}
.section03 .pop-cart .box .in p{color: #222; text-align: center; font-family: "InsungitJisu"; font-size: 30px; line-height: 150%;}
.section03 .pop-cart .box .in .btn-wrap{display: flex; justify-content: space-between; width: 100%; margin-top: 24px;}
.section03 .pop-cart .box .in .btn-wrap .btn-cart{display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 56px; border-radius: 50px; background: linear-gradient(97deg, #009BD9 8.86%, #0072BC 91.15%); box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.20); color: #FFF; font-size: 16px; font-weight: 700;}
.section03 .pop-cart .box .in .btn-wrap .btn-continue{display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 56px; border-radius: 50px; border: 2px solid #0179C1; background: #FFF; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.20); color: #0172BC; font-size: 16px; font-weight: 700;}
@media (max-width: 1024px) {
	.section03{padding: 70px 0; background-image: url('../images/sec03_bg_mo.jpg');}
	.section03 h2{font-size: 30px;}
	.section03 .tab{display: block; margin-top: 30px;}
	.section03 .tab button{height: 38px; padding: 0 20px; font-size: 14px;}
	.section03 .tab button:nth-child(n+3){margin-top: 8px;}
	.section03 .list-box{max-width: 100%; margin: -55px auto 0;}
	.section03 .list-box .ob{position: relative; left: 50%; top: auto; width: 320px; margin-left: -165px;}
	.section03 .list-box .ob .img2{position: absolute; right: -10px; top: 70px; width: 175px;}
	.section03 .list-box .swiper-slide .list{display: block; width: 100%; max-width: 340px; height: auto;}
	.section03 .list-box .swiper-slide .list > li{width: 100%;}
	.section03 .list-box .swiper-slide .list > li + li{margin-top: 12px;}
	.section03 .list-box .swiper-slide .list > li .item{display: flex; position: relative; width: 100%; height: auto; padding: 15px 10px 15px 15px; margin: 0 auto; border-radius: 20px; background: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10); overflow: hidden;}
	.section03 .list-box .swiper-slide .list > li .item .img{position: static; width: 90px; height: 90px; border-radius: 18px;}
	.section03 .list-box .swiper-slide .list > li .item .img .btn-kit-view{display: none;}
	.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div ul li{font-size: 14px; line-height: 100%;}
	.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div ul li + li{margin-top: 10px;}
	.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div ul.type2{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; width: 190px;}
	.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div ul.type2 li{width: 80px;}
	.section03 .list-box .swiper-slide .list > li .item .img .kit-list > div ul.type2 li + li{margin-top: 0;}
	.section03 .list-box .swiper-slide .list > li .item .img .kit-list .btn-close{right: 10px; top: 10px; width: 30px;}
	.section03 .list-box .swiper-slide .list > li .item .info{flex: 1; padding-left: 12px; margin-top: 0;}
	.section03 .list-box .swiper-slide .list > li .item .info .tit{padding-top: 3px; font-size: 16px; line-height: 100%;}
	.section03 .list-box .swiper-slide .list > li .item .info .price{margin-top: 3px; font-size: 18px; line-height: 100%;}
	.section03 .list-box .swiper-slide .list > li .item .info .price strong{margin-right: 2px; font-size: 22px;}
	.section03 .list-box .swiper-slide .list > li .item .info .desc{margin-top: 16px;}
	.section03 .list-box .swiper-slide .list > li .item .info .desc > span span{font-size: 14px;}
	.section03 .list-box .swiper-slide .list > li .item .info .desc > span span::after{bottom: -2px;}
	.section03 .list-box .swiper-slide .list > li .item .info .desc > span + span{margin-top: 6px;}
	.section03 .list-box .swiper-slide .list > li .item .info .btn-cart{position: absolute; right: 0; top: 0; width: 42px; aspect-ratio: 1/1; border-radius: 10px; background: linear-gradient(170deg, #009BD9 -1.51%, #0072BC 87.66%); text-indent: -9999em;}
	.section03 .list-box .swiper-slide .list > li .item .info .btn-cart::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/ico_cart.svg') center / 70% no-repeat; content: "";}
	.section03 .list-box .swiper-slide .list > li .item .info .bottom{display: block; margin-top: 7px; text-align: right;}
	.section03 .list-box .swiper-slide .list > li .item .info .bottom .btn-kit-view{height: 20px; padding: 0 10px; border-radius: 50px; background: rgba(0, 0, 0, 0.80); backdrop-filter: blur(5px);}
	.section03 .list-box .swiper-slide .list > li .item .info .bottom .btn-kit-view span{display: block; padding-right: 15px; background: url('../images/ico_plus.svg') right center / 15px auto no-repeat; color: #FFF; font-size: 12px; font-weight: 700;}
	.section03 .pop-cart > div{padding: 0 37px;}
	.section03 .pop-cart .box{width: 100%; padding: 40px 0 50px;}
	.section03 .pop-cart .box .in{padding-top: 145px; background-size: 130px auto;}
	.section03 .pop-cart .box .in p{font-size: 24px;}
	.section03 .pop-cart .box .in .btn-wrap{display: block; text-align: center;}
	.section03 .pop-cart .box .in .btn-wrap li + li{margin-top: 12px;}
	.section03 .pop-cart .box .in .btn-wrap .btn-cart{width: 180px; height: 50px; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.20); font-size: 14px;}
	.section03 .pop-cart .box .in .btn-wrap .btn-continue{width: 180px; height: 50px; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.20); font-size: 14px;}
}

/* section04 */
.section04{position: relative; height: 950px; background: url('../images/sec04_bg.jpg') center / cover no-repeat; overflow: hidden;}
.section04 .ob{position: absolute; left: calc(50% - 445px); top: calc(50% - 255px); width: 483px; z-index: 10; transform: tra2nslateX(-150px); opacity: 0; transition: all 1.0s ease;}
.section04 .info{display: flex; align-items: center; justify-content: center; position: absolute; left: calc(50% - 55px); top: calc(50% - 285px); width: 525px; aspect-ratio: 1/1; padding-top: 30px; border-radius: 500px; background: rgba(0, 114, 188, 0.80); backdrop-filter: blur(5px); text-align: center; box-sizing: border-box; transform: translateX(150px); opacity: 0; transition: all 1.0s ease;}
.section04 .info p{color: #FFF; text-align: center; font-family: "InsungitJisu"; font-size: 32px; font-weight: 400; line-height: 150%;}
.section04 .info .btn-cart{height: 74px; padding: 0 50px; margin: 35px auto 0; border-radius: 50px; border: 2px solid rgba(255, 255, 255, 0.20); background: linear-gradient(97deg, #FFF 8.86%, #DFF6FF 91.15%); box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.20); }
.section04 .info .btn-cart span{display: flex; align-items: center; height: 100%; padding-right: 50px; background: url('../images/ico_cart_blue.svg') right center no-repeat; color: #333; text-align: center; font-family: "Noto Sans KR"; font-size: 26px; font-weight: 700; line-height: 100%;}
.section04 .txt{position: absolute; left: 50%; bottom: 40px; width: 1140px; padding: 32px 0; margin-left: -570px; border-radius: 1000px; border: 1px solid #FFF; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(5px); color: #222; text-align: center; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height: 140%; transform: translateY(150px); opacity: 0; transition: all 1.0s ease;}
.section04.on .ob{transform: translateX(0); opacity: 1;}
.section04.on .info{transform: translateX(0); opacity: 1;}
.section04 .txt.on{transform: translateY(0); opacity: 1;}
.section04 .copy{position: absolute; right: 7.291%; bottom: 65px; color: rgba(255, 255, 255, 0.80); font-size: 14px; font-weight: 500; line-height: 100%;}
@media (max-width: 1024px) {
	.section04{height: auto; padding: 100px 0 30px; background: url('../images/sec04_bg_mo.jpg') center / cover no-repeat; text-align: center; box-sizing: border-box;}
	.section04 .ob{position: relative; left: auto; top: auto; width: 205px; z-index: 10; transform: translate(0, 150px); opacity: 0; transition: all 1.0s ease;}
	.section04 .info{position: relative; left: auto; top: auto; width: 320px; height: 320px; padding-top: 40px; margin: -75px auto 0; border-radius: 100%; transform: translate(0, 150px); transition: all 1.0s 0.2s ease;}
	.section04 .info p{font-size: 20px; line-height: 140%;}
	.section04 .info .btn-cart{height: 50px; padding: 0 24px; margin: 16px auto 0; }
	.section04 .info .btn-cart span{display: flex; align-items: center; height: 100%; padding-right: 40px; background: url('../images/ico_cart_blue.svg') right center / 30px auto no-repeat; font-size: 16px;}
	.section04 .txt{position: relative; left: auto; bottom: auto; width: 320px; padding: 20px 0; margin: 40px auto 0; border-radius: 20px; font-size: 12px; font-weight: 400; line-height: 160%; z-index: 10;}
	.section04 .copy{position: absolute; left: 33px; right: auto; bottom: 14px; color: rgba(0, 0, 0, 0.40); font-size: 8px; text-align: left;}
}

/* footer */
footer{padding: 33px 120px; background: #333;}
footer .in{display: flex;}
footer .logo a{display: block; width: 195px; height: 80px; margin-top: 8px; background: url('../images/footer_logo.png') center no-repeat;}
footer .info{margin-left: 100px; margin-top: 9px;}
footer .info p{color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height: 180%;}
footer .info p span{opacity: 0.5;}
footer .info .btn-privacy{display: inline-block; margin-top: 6px; color: #FFF; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 700;}
footer .info .sns{display: flex; gap: 30px; margin-top: 30px;}
footer .info .sns li a{display: block; width: 40px; height: 40px; text-indent: -9999em;}
footer .info .sns li .btn-kakao{background: url('../images/ico_sns_kakao.svg') center no-repeat;}
footer .info .sns li .btn-happybean{background: url('../images/ico_sns_happybean.svg') center no-repeat;}
footer .info .sns li .btn-facebook{background: url('../images/ico_sns_facebook.svg') center no-repeat;}
footer .info .sns li .btn-youtube{background: url('../images/ico_sns_youtube.svg') center no-repeat;}
footer .info .sns li .btn-twitter{background: url('../images/ico_sns_twitter.svg') center no-repeat;}
footer .info .sns li .btn-instagram{background: url('../images/ico_sns_instagram.svg') center no-repeat;}
footer .copy{margin-top: -20px; color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height: 24px; opacity: 0.5;}
@media (max-width: 1024px) {
	footer{padding: 40px 30px;}
	footer .in{display: block;}
	footer .logo a{width: 103px; height: 42px; margin-top: 0; background-size: 100% auto;}
	footer .info{margin-left: 0; margin-top: 25px;}
	footer .info p{font-size: 11px; line-height: 170%;}
	footer .info p span{opacity: 1;}
	footer .info .btn-privacy{margin-top: 10px; font-size: 14px;}
	footer .info .sns{gap: 20px; margin-top: 30px;}
	footer .info .sns li a{width: 20px; height: 20px; background-size: 100% auto !important;}
	footer .copy{margin-top: 5px; font-size: 12px; line-height: 24px;}
}