@charset "UTF-8";

:root{
	/* container common padding */
	--pd-side:30px; /* side */
	--pd-bottom:40px; /* bottom */

	/* max-width */
	--max-width:1510px;
	--max-width-sd:calc(var(--max-width) - (var(--pd-side) * 2)); /* (--max-width 넓이) - (사이드 패딩 값) */
	--full-width-sd:calc(100% - (var(--pd-side) * 2)); /* (100% 넓이) - (사이드 패딩 값) */

	/* transition - easing */
	--easing1:cubic-bezier(.4,0,.2,1);

	--bg-theme:linear-gradient(134deg, #14ADEA, #E8FF6E);
}

body{background-color:var(--co-blk1, #1A1A1A);color:var(--co-wht, #FFF);}

.pdsCommon{padding-left:var(--pd-side);padding-right:var(--pd-side);}
.maxWidth{max-width:var(--max-width, 830px);}
.maxWidthPds{max-width:calc(var(--max-width) - (var(--pd-side) * 2));}

.fill_color{fill:currentColor;}


/* sale */
.sale_off_tag{padding:0 0.643em;height:1.571em;border-radius:1.571em;background-color:#8F0000;color:#FFF;}


/* 헤더 */
.header{position:sticky;top:0;padding:0 30px 0 16px;height:81px;background-color:var(--co-blk1);border-bottom:1px solid var(--co-blk3);z-index:9;}
.header_in{gap:25px;}
.hd_nav_btn{padding:10px;}
.hd_gender_sel{gap:12px;}
.hd_gender_sel_btn{position:relative;padding:0 12px;font-size:1.125rem;}
.hd_gender_sel_btn::after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:var(--co-red1);opacity:0;transition:opacity 0.2s;pointer-events:none;}
.hd_gender_sel_btn.active{color:var(--co-red1);font-weight:700;}
.hd_gender_sel_btn.active::after{opacity:1;}
.hd_tp_acc_btn{height:36px;padding:6px 18px;border-radius:5px;background-color:var(--co-red1);border:1px solid var(--co-red1);font-weight:500;color:#FFF;}
.hd_tp_acc_btn.line{background-color:var(--co-blk1);color:var(--co-red1);}
/* .container, .header_in{max-width:1920px;margin-left:auto;margin-right:auto;} */


/* 사이드 네브 메뉴 */
.sd_menu_wrap{position:sticky;top:81px;width:281px;max-width:100vw;border-right:1px solid var(--co-blk3);height:100vh;height:calc(100vh - 81px);height:calc(100dvh - 81px);background-color:var(--co-blk1);overflow-y:auto;}
.sd_menu_con{padding:30px;}
.sd_menu_con.bottom{border-top:1px solid var(--co-blk3);}
.sd_menu_li{align-items:center;padding:10px 14px;border:1px solid var(--co-blk3);border-radius:5px;font-size:0.875rem;}
.sd_menu_li.co_gold{color:#DFAB43;}
.sd_menu_li svg{fill:currentColor;}


/* 메인 */
.main_contents{max-width:1320px;padding:30px 20px;margin-left:auto;margin-right:auto;}
.banner_item img{display:block;max-width:100%;border-radius:10px;margin:0 auto;}

/* 메인 슬라이더 배너 - 비디오 */
.banner_vd_cont.loading{aspect-ratio:1280 / 258;}
.banner_vd_cont{background-color:rgba(255, 255, 255, 0.1);border-radius:5px;}
.banner_video{display:block;width:100%;height:auto;}

/* 캐릭터 리스트 */
.int1_list_wrap{margin-top:50px;}
.int1_list_title{font-size:32px;margin-bottom:30px;}
.int1_list_con{display:grid;grid-template-columns:repeat(4, minmax(0, 300px));gap:27px;}
.int1_li_item{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:2 / 3;}
.int1_li_img{display:block;width:100%;height:100%;object-fit:cover;}
.int1_li_item :where(.int1_li_dl, .dim_grd){pointer-events:none;}
.int1_li_dl{position:absolute;bottom:0;left:0;width:100%;padding:16px;}
.int1_li_dl :where(.age, .introd){opacity:0.5;}
.int1_li_dl dt{font-size:24px;}
.int1_li_dl dd{margin-top:8px;}



@media (hover:hover) and (pointer:fine){
	/* 버튼 hover */
	.btn-hover{transition-property:transform;transition-duration:0.16s;transition-timing-function:var(--easing1);}
	.btn-hover:hover{transform:translate3d(2px, 2px, 0);}
}


@media screen and (min-width:1000px){
	.md_vis{display:none !important;}

	/* 헤더 */
	.header{padding-left:30px;}
}


@media screen and (max-width:1299px) and (min-width:1000px){
	.int1_list_con{grid-template-columns:repeat(3, minmax(0, 300px));}
}


@media screen and (max-width:1599px){
	.int1_list_con{gap:20px;}
}


@media screen and (max-width:999px){
	.md_hidden{display:none !important;}

	/* 헤더 */
	.header{height:61px;}
	.header_in{gap:15px;}
	.header_logo svg{width:140px;}

	.hd_gender_sel_md{height:45px;border-bottom:1px solid var(--co-blk3);}
	.hd_gender_sel{max-width:262px;margin:0 auto;}
	.hd_gender_sel_btn{font-size:0.875rem;flex:1 1 100%;}
	.hd_gender_sel_btn svg{height:15px;}
	.hd_gender_sel_btn svg:has([href$="#female"]){width:10px;}
	.hd_gender_sel_btn svg:has([href$="#ani"]){width:13px;}
	.hd_gender_sel_btn svg:has([href$="#male"]){width:14px;}

	.container{overflow:hidden;}

	/* 사이드 네브 메뉴 */
	.sd_menu_wrap{position:fixed;top:61px;max-width:calc(100% - 40px);height:calc(100% - 61px);z-index:12;transform:translate3d(-120%, 0, 0);visibility:hidden;transition-property:transform, visibility;transition-duration:0.2s;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
	.sd_menu_wrap.slide-in{transform:translate3d(0, 0, 0);visibility:visible;}
	.sd_menu_bg{position:fixed;top:61px;left:0;width:100%;height:calc(100% - 61px);background-color:rgba(0, 0, 0, 0.6);backdrop-filter:blur(5px);z-index:11;}
	.sd_menu_con{padding:25px 20px;}

	.int1_list_wrap{margin-top:20px;}
	.int1_list_title{font-size:26px;margin-bottom:15px;}
	.int1_list_con{gap:18px;}
	.int1_li_dl{padding:12px 10px;font-size:13px;}
	.int1_li_dl dt{gap:6px;font-size:17px;}
	.int1_li_dl dd{margin-top:4px;}

	/* 메인 슬라이더 배너 - 비디오 */
	.banner_vd_cont.loading{aspect-ratio:720 / 360;}
}


@media screen and (max-width:767px){
	/* 헤더 */
	.header{padding-left:10px;padding-right:16px;}
	.hd_nav_btn{padding:5px;}
	.hd_nav_btn svg{width:18px;}
	.header_logo svg{width:120px;}
	.hd_tp_acc_btn{padding-left:13px;padding-right:13px;height:30px;font-size:0.75rem;}

	.main_contents{padding:20px 16px;}

	.int1_list_con{grid-template-columns:repeat(3, minmax(0, 300px));gap:14px;}
}


@media screen and (max-width:559px){
	.int1_list_con{grid-template-columns:repeat(2, minmax(0, 300px));gap:12px;}
}