@charset "utf-8";

.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
/* 지마켓 산스 - 폰트 */
@font-face {
	font-family: 'GmarketSansLight';
	font-style: normal;
	font-weight: normal;
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
}

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

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


/*메인페이지 CSS 시작*/

.mt100 {margin-top: 100px;}
.mr20 {margin-right: 20px;}
.w_wrap {max-width:1920px; position:relative; margin:0 auto; text-align: center;}
.w_wrap img {vertical-align: top}
.w1200 {position:relative; width:1200px; margin:0 auto;}	

.w_main {position:relative; background-color: #f1cae3; /*height: 829px;*/ background: url('/sub_kids/img/2023/web_01_bg.jpg?t=10') top center no-repeat; }
.w_bn1 {position:relative; background-color: #FFFFFF; height: 188px; /*background:url('/sub_kids/img/2023/ban/web_bn1_bg.jpg?t=1') top center no-repeat;*/ }
.w_bn2 {position:relative; background-color: #FFFFFF; height: auto; background:url('/sub_kids/img/2023/ban/web_bn2_bg.jpg?t=8') top center no-repeat; }

/*공통*/
.mt80 {margin-top: 80px!important;}
.mt100 {margin-top: 100px!important;}
.mt130 {margin-top: 130px!important;}
.mb130 {margin-bottom: 130px!important;}	

		
/*공통 타이틀*/
.con_tit {font-size: 40px; line-height: 60px; color: #111; font-family: 'YoonGothicPro780'; letter-spacing: -1.5px;}	
.con_tit_sub {font-size: 16px; margin-top: 40px; color: #888; line-height: 24px;}

/* 네비게이션 추가 */
.hero-nav {display:none; z-index:999; position:fixed; top:0; left:0; width:100%; height:60px; background-color: rgba(51,51,51,.9); box-shadow: 0px 1px 16px rgba(0,0,0,0.2);}
.hero-nav .nav-wrap a.none {background:none; display: block; height:60px;}
.hero-nav .nav-wrap {position:relative; width:1200px; margin:0 auto; text-align:center; box-sizing: border-box}
.hero-nav .nav-wrap::after {display: block; content: ""; clear: both}
.hero-nav .nav-wrap li {display:inline-block; width: 33.3%; float: left; height:60px;}
.hero-nav .nav-wrap li a {display:inline-block; font-size: 20px; font-family: 'GmarketSansLight'; letter-spacing: -1px; color: #eee; width: 100%;height:60px;box-sizing: border-box; padding-top:20px}
.hero-nav .nav-wrap li a.active {font-weight:bold; color:#ffce2d;letter-spacing: -1px;  border-bottom: 7px solid #ffce2d; height: 60px;}

/*상담문의*/	
.info_wrap { padding: 90px 10px 20px 10px; width: 100%; box-sizing: border-box; position: relative; overflow: hidden; display: flex; justify-content: space-between;}	
.info_wrap .info_tit { padding: 24px 28px; background-color: #4952a4; border-radius: 10px 10px 0px 0px; text-align: start; }
.info_wrap .info_tit span { line-height: 24px; font-size: 17px; color: #fff; text-align: start;}
.info_wrap .info_tit .arrow { position: absolute; width: 18px; top: 54px; right: 24px;}
.info_wrap .info_list { width: 23%; box-shadow: 4px 7px 18px -4px rgb(207 207 207 / 50%); border-radius: 0px 0px 10px 10px;}
.info_wrap .info_list ul { padding: 0 20px; border-radius: 0px 0px 10px 10px; /*border: solid 1px;*/ }
.info_wrap .info_list ul li { padding: 15px 0 15px; display: block; position: relative; vertical-align: middle;}
.info_wrap .info_list ul li .info_icon { margin: 10px 10px 10px 0px; width: 35%;}
.info_wrap .info_list ul li .info_icon img {width: 100%;}
.info_wrap .info_list ul li .info_txt { position: absolute; right: 10px; top: 38px; width: 43%; text-align: start; font-size: 14px; color: #696e76; font-weight: 300; line-height: 20px; }
.info_wrap .info_list ul li + li {border-top: 1px solid #ebeef0;}

/*연락문의*/
.contact ul {width: 100%; display: flex; justify-content: space-between;}
.contact ul li {width: 23%;}
.contact ul li dl dt {font-size: 16px; font-weight: bold; color: #222450; line-height: 21px; margin-bottom: 5px; transition: .3s;}
.contact ul li dl dd {font-size: 14px; color: #666; font-weight: 400;}

/*상품 리스트*/
.list_wrap .list { width: 1200px !important; margin: 0 auto;}
.list_wrap .list h3 { color: #000; padding-top: 80px; padding-bottom: 15px; font-family: "Montserrat","YoonGothicPro760",sans-serif; font-size: 18px; border-bottom: 1px solid #000; text-align: start;}
.list_wrap .list h3 a { color: #000; pointer-events: none;}
.list_wrap .list ul { display: flex; flex-wrap: wrap; }
.list_wrap .list ul li { position: relative; width: 200px; height: 200px;}
.list_wrap .list ul li a { color: #777; text-decoration: none;}

.list_wrap .list ul li div.cover { position: relative; overflow: hidden; background: #f3f3f3; border-radius: 15px;}
.list_wrap .list ul li div.cover img { width: 200px; height: 200px; transform: scale(1); transition: 0.5s;}
.list_wrap .list ul li:hover div.cover img { transform: scale(1.03) !important; transition: 0.5s; image-rendering: -webkit-optimize-contrast;}


.list_wrap .list ul > li { display: inline-block; vertical-align: top; padding-top: 30px; padding-bottom: 100px; margin-right: 50px;}
.list_wrap .list ul > li:nth-of-type(5n + 5) { margin-right: 0;}

/*가격*/
.list_wrap .list ul li .info { text-align: start; margin: 20px 0px; color: #000;}
.list_wrap .list ul li .info h4 { margin: 26px 0px 4px 0px; font-size: 14px; color: #333}
.list_wrap .list ul li .info .txt { font-size: 16px; color: #000; font-weight: 600;}
.list_wrap .list ul li .info .txt2_1 { font-size: 14px; color: #999; text-decoration: line-through; margin-left: 7px;}
.list_wrap .list ul li .info .txt2_2 { font-size: 14px; color: #999; }

/*상품 라벨*/
span.label { position: absolute; bottom: 83px; right: 10px; height: 40px; display: flex;}
span.label img.label_img { height: 100%; margin-right: 5px;}
span.label .label_txt { width: 40px; height: 40px; border-radius: 50%; background-color: #ff7373; margin-right: 5px;}
span.label .label_txt p { width: 100%; height: 100%; font-size: 10px; line-height: 11px; color: #fff; text-align: center; font-weight: 500; align-items: center; display: grid; letter-spacing: 0.2px; }
span.label .label_txt p.best {font-weight: 600;}

/* 배송안내 */
#delivery .cnt-wrap8 .cnt-main-title {display: none}
#delivery .delivery_img {display:flex; justify-content: center; padding:120px 0; background:#f9f9f9}
#delivery .delivery_img div {position:relative;}
#delivery .delivery_img div p {position:absolute; bottom:30px; left:30px; font-size:14px; line-height:21px; color:#1a1a1a;}
#delivery .delivery_img img {width:600px;}

/* 상단 css */
.top_slide {position:relative; height:843px; overflow: hidden;}
/*.top_slide .swiper-slide > div {position:relative; width:1200px; margin:0 auto;}*/

.top_slide .swiper-pagination-bullet {width:12px; height:12px}
.top_slide .swiper-pagination-bullets {bottom:25px !important}
.swiper-pagination-bullet-active {background:#4f4fb5 !important}
.top_slide.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 7px !important}
.top_slide .swiper-button-prev {left: 30px;padding: 25px;margin-top: -47px; background: url(/re_181207/images/arrow_prev@2x.png?t=1);background-size: cover;}
.top_slide .swiper-button-next {right: 30px;padding: 25px;margin-top: -47px;background: url(/re_181207/images/arrow_next@2x.png?t=1);background-size: cover;}
.top_slide .swiper-button-next, .top_slide .swiper-button-prev {opacity:0.1; color: #1a1a1a; transition:.3s}
.top_slide .swiper-button-next:hover, .top_slide .swiper-button-prev:hover {opacity:0.8; transition:.3s}
.top_slide .swiper-pause {opacity:0.4; z-index:999; position:absolute; bottom:31px; left:48%; width:10px; height:12px; margin-left:120px; background: url(/sub_kids/img/2021/pause_btn.png?t=1); background-size: cover; cursor: pointer; transition:0.3s}
.top_slide .swiper-play {opacity:0.4; z-index:999; position:absolute; bottom:31px; left:48%; width:10px; height:12px; margin-left:100px; background: url(/sub_kids/img/2021/play_btn.png?t=1); background-size: cover; cursor: pointer; transition:0.3s}
.top_slide .swiper-play.active, .top_slide .swiper-pause.active {opacity:1; transition:0.3s}


/* 종이가루 */
.confetti_wrap {position:absolute; top:0px; left:0; width:100%; height:700px; overflow:hidden;}
.confetti_wrap2 {position:absolute; top:0px !important; left:0; width:100%; height:500px !important; overflow:hidden;}
.confetti {width: 15px; height: 15px; background-color: #f2d74e; position: absolute; left:50%; animation: confetti 5s ease-in-out -2s infinite; transform-origin: left top;}
.confetti:nth-child(1) {background-color: #f2d74e; left: 10%; animation-delay: 0;}
.confetti:nth-child(2) {background-color: #95c3de; left: 20%; animation-delay: -5s;}
.confetti:nth-child(3) {background-color: #ff9a91; left: 30%; animation-delay: -3s;}
.confetti:nth-child(4) {background-color: #f2d74e; left: 40%; animation-delay: -2.5s;}
.confetti:nth-child(5) {background-color: #95c3de; left: 50%; animation-delay: -4s;}
.confetti:nth-child(6) {background-color: #ff9a91; left: 60%; animation-delay: -6s;}
.confetti:nth-child(7) {background-color: #f2d74e; left: 70%; animation-delay: -1.5s;}
.confetti:nth-child(8) {background-color: #95c3de; left: 80%; animation-delay: -2s;}
.confetti:nth-child(9) {background-color: #ff9a91; left: 90%; animation-delay: -3.5s;}
.confetti:nth-child(10) {background-color: #f2d74e; left: 100%; animation-delay: -2.5s;}

@keyframes confetti {
  0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
  25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh); }
  50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh); }
  75% { transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh); }
  100% { transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh); }
}
/* //종이가루 */


/*텍스트 타입 버튼*/
.btn1 a{ display: inline-block; width: 120px; padding: 1px 0; line-height: 48px; color: #4952a4; border: 2px solid #4952a4; text-align: center; font-weight: 500; font-size: 15px; transition: .3s; border-radius: 50px; position: absolute; bottom: 130px; left: 506px;}
.btn1 a:hover {transition: .3s; background: #4952a4; color: #fff; font-weight: 500;}	

/*이미지타입 버튼*/
.btn_img {position:absolute; cursor: pointer; box-sizing: border-box; left: 145px; bottom: 18px;}
.btn_img button {width:168px; height:55px; background:url('/sub_kids/img/2023/btn_off.png?t=1') no-repeat; transition: 0.5s; position: absolute; top: 0px;}
.btn_img button:hover {background:url('/sub_kids/img/2023/btn_on.png?t=1') no-repeat; transition: 0.5s}