@charset "utf-8";

/* Nav */
.list-nav { 
	background: rgb(252, 252, 252);  padding: 8px 12px; margin:0 0 0px; border-radius: 0; 
}
.list-nav .breadcrumb { 
	background: none; margin: 0; padding: 0; border-radius: 0; 
}
.list-nav .breadcrumb a { 
	color: rgb(148, 148, 148); 
}
.list-nav .breadcrumb span { 
	font-family:verdana; font-size:11px; letter-spacing:-1px; 
}
.list-nav .breadcrumb .active { 
	color: rgb(0, 0, 0); 
}

/* List */
table.list-tbl { 
	border-bottom: 0px solid #ddd; margin-bottom:10px; 
}
table.list-tbl th { 
	clear:both; height:43px; background: url('./img/head.gif') repeat-x !important;  font-weight:bold; font-size:12px; color:#333; border:0px; padding:0px !important; margin:0px !important; text-align:center; white-space:nowrap; vertical-align:middle !important;
}
table.list-tbl th a { 
	text-decoration:none; color:#333; 
}
table.list-tbl th a:hover, table.bo-list th a:focus, table.bo-list th a:active { 
	color:#000; 
}
table.list-tbl td { 
	vertical-align:middle !important;
}
table.list-tbl small { 
	color: orangered; font-size: 10px; font-weight:bold; font-family:verdana; letter-spacing:-1px; 
}
table.list-tbl .list-now { 
	background: #fafafa; 
}
table.list-tbl .list-subject { 
	text-align:left !important;
}
table.list-tbl .list-subject a { 
	white-space:normal !important;
	display:block;
}
table.list-tbl .list-subject.now { 
	font-weight:bold !important; 
}
table.list-tbl .list-cate { 
	margin-top:4px; font-weight:normal; white-space:nowrap !important;
}
table.list-tbl .list-none { 
	padding:80px 0px; 
}
table.list-tbl i.img-fa { 
	width:40px; height:40px; padding:10px 0px 0px; font-size:20px; text-align:center; color:#aaa; 
}


/* Event */
.sev_himg { margin-bottom:15px; }
.sev_timg { margin-bottom:15px; }

/* Width */
table.list-tbl .wh-40 { width:40px; }
table.list-tbl .wh-50 { width:50px; }
table.list-tbl .wh-60 { width:60px; }
table.list-tbl .wh-80 { width:80px; }
table.list-tbl .wh-90 { width:90px; }
table.list-tbl .wh-100 { width:100px; }
table.list-tbl .wh-120 { width:120px; }
table.list-tbl .wh-200 { width:200px; }

/*동영상 방식 스타일*/
.mp4{background:#1abc9c;border:solid 2px #16ab85}
.wmv{background:#f1c40f;border:solid 2px #f39c12}
.flash{background:#89cc2e;border:solid 2px #75ae27}
.html{background:#cca52e;border:solid 2px #ae8d27}
.mode_btn{padding:3px 3px;border-radius:5px;color:#fff;}
.app{background:#3498db;border:solid 2px #2080b9;color:#fff !important}
.app:hover{color:#fff;}
.sample{padding:3px 3px;border-radius:5px;color:#fff;background:#3498db;border:solid 2px #2980b9;cursor:pointer;}
.fav{padding:3px 3px;border-radius:5px;color:#fff;background:#3498db;border:solid 2px #2980b9;cursor:pointer;}
.fav.on{background:#FF4848;border:solid 2px #FD1717;}

/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */
.product-type-gallery .item-more {
    text-align:center !important;
    margin: 15px 0px 0px;
	font-size:10px;
	
}
.product-type-gallery #infscr-loading {
    background: rgb(0, 0, 0);
    margin: 0px;
    padding: 10px;
    border-radius: 10px !important;
    left: 50%;
    width: 200px;
    margin-left: -110px;
    text-align: center;
    bottom: 50px;
    color: rgb(255, 255, 255);
    position: fixed;
    z-index: 100;
    opacity: 0.8;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
}
.SubLatestCourseList_latestCourseListContainer__Cgco5 {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 12rem 0;
    gap: 2rem
}
@media screen and (max-width: 959px) {
    .SubLatestCourseList_latestCourseListSwiper__e1sbM {
        padding-top:1.2rem;
        margin-top: 0;
		display:block !important;
    }
	
}
@media screen and (max-width: 959px) {
    .SubLatestCourseList_latestCourseListContainer__Cgco5 {
        margin-top:6rem;
        margin-bottom: 8.2rem;
        gap: 1.2rem
    }
}
.MainNewCourseList_txt {
    color: #ff0018;
    font-size: 24px;
    font-weight: 800;
    line-height: 22px
}
.CurationHeader_curationHeaderTitle__pUNKU {
    color: #000;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 3.2rem;
    margin-top: 1.2rem;
	display:inline-block;
}
.CurationHeader_curationHeaderTitle__pUNKU h2{color:#000 !important;font-weight: 800;}
.CurationHeader_curationHeaderTitle__pUNKU h2::after{
	 content: "|";
    margin-left: 1.2rem;
	margin-right: 1.2rem;
    line-height: 2.5rem; /* 수직 정렬 효과 */
	height:2.5rem
}
.CurationHeader_curationHeaderSubTitle__ovOci {
    color: #6c6d6f;
    font-size: 1.6rem;
    font-weight: 800;
    padding: 1rem 0 .3rem;
	display:inline-block;
}
@media screen and (max-width: 959px) {
    .MainCategoryTab_categoryTab__tKqhh {
        display:flex
	}
	.CurationHeader_curationHeaderSubTitle__ovOci {
		display:block;
		font-size: 1.4rem;
		padding: 1rem 0 .3rem;
	}
	.CurationHeader_curationHeaderTitle__pUNKU h2::after{
	 content: "";
	}
}
.MainCategoryTab_categoryTabList__RU1yQ {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: .8rem;
    flex-wrap: wrap;
}
.MainCategoryTab_categoryTabListItemSelected__dlj6q {
    background: #171b1f !important;
    color: #fff !important;
}
.MainCategoryTab_categoryTabListItem__Lt0d2 {
    display: flex;
    height: 36px;
    padding: 0 1.6rem;
    border-radius: 4px !important;
    background: #f5f5f6;
    justify-content: center;
    align-items: center;
    color: #171b1f;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    text-wrap: nowrap;
}
@media(hover: hover)and (pointer:fine) {
    .MainCategoryTab_categoryTabListItem__Lt0d2:not(.MainCategoryTab_categoryTabListItemSelected__dlj6q):hover {
        background:#e7e8e9
    }
}
@media screen and (max-width: 959px) {
	.MainCategoryTab_categoryTabListItem__Lt0d2 {
        padding: 0 1.2rem
    }
	.MainCategoryTab_categoryTabFoldingButton__hNb7X {
        display: flex;
        width: 3.6rem;
        height: 3.6rem;
        justify-content: center;
        align-items: center;
        gap: .4rem;
        border-radius: 4px;
        border: 1px solid #d9dadb;
        background: #fff;
        box-shadow: -12px 0 6px #fff
    }
}
.MainBestList_bestListSwiper__DR3sn {
    margin: 3.2rem 0 0;
    width: 100%;
}
.SubLatestCourseList_latestCourseListSwiper__e1sbM {
    width:100%;
	
    padding: 1rem 1rem 2rem 1rem;
	box-sizing: border-box;
	/*
    margin: -.8rem -2rem 1rem;
	*/
	overflow-x: hidden; /* Hide horizontal scrollbar */

}
.SubLatestCourseList_latestCourseListSwiper__e1sbMobile {
    width: 100%;
    padding: 2rem 2rem 3rem;
    margin: -.8rem -2rem 1rem;
	display:none !important;

}
.MainNewList {
    width: 100%;
    padding: 2rem 2rem 3rem;
    margin: -.8rem -2rem 1rem
}
.SubLatestCourseList_latestCourseListSlide__WPj5p {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
	/*4개
	gap: 2.8rem;
	*/
}


.SubLatestCourseList_latestCourseListSwiper__e1sbM .swiper-wrapper,.SubLatestCourseList_latestCourseListSwiper__e1sbMobile .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
    box-sizing: content-box
}




	
		.SubLatestCourseList_latestCourseListSlide__FcWaw {
			display: flex;
			flex-wrap: wrap;
			gap: 20rem
		}

		
		.SubLatestCourseList_latestCourseListCard__YDLI9 {
			flex-basis: calc(33.3% - 4rem);
			flex-grow: 1;
			
		}

		
		.SubCourseCard_courseCardContainer__sx20K {
			display: flex;
			position: relative;
			flex-direction: column;
			max-height: 41rem;
			max-width: 20rem;
			width: 100%;
			cursor: pointer;
			border-radius: .4rem .4rem 0 0 !important;
			overflow: hidden;
			color: #171b1f
		}
       .SubCourseCard_shadowType__bU9QY {
			background-color: #fff;
			box-shadow: 0 .2rem .5rem 0 rgba(0,0,0,.15);
			border-radius: .6rem !important;
			height: -moz-fit-content;
			height: fit-content;
			/* 4개
			min-width: calc((min(100vw,73rem) - 14rem)/4);
			max-width: calc((min(100vw,72.1rem) - 8rem)/4);
			*/
			min-width: calc((min(100vw,120rem) - 16rem)/3);
			max-width: calc((min(100vw,72.1rem) - 8rem)/3);
			justify-content: space-between;
			
		}
		.SubCourseCard_courseCardImageWrapper__7dNDZ {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			overflow: hidden;
			width: 100%;
			height: auto;
			aspect-ratio: 16/9;
			border-radius: .4rem;
		
		}
		.SubCourseCard_courseCardImageWrapper__7dNDZ .CourseCard_courseCardImage__XcpZb {
			transition: transform .2s;
			border-radius:15px !important;
		}

		@media screen and (max-width: 959px) {
			.SubCourseCard_shadowType__bU9QY {
				min-width:10rem;
				max-width: calc((100vw - 10em)/2);
				max-height: 50rem;
			}
			.SubCourseCard_courseCardImageWrapper__7dNDZ {
				aspect-ratio: 4/3;
			}
			.SubLatestCourseList_latestCourseListSlide__WPj5p {
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;
				/*4개
				gap: 2.8rem;
				*/
			}
		}
		
		
	
		.CourseCard_courseCardDescription__phGvv {
			font-size: 14px;
			line-height: 1.8rem;
			color: #6c6d6f;
			word-break: break-all;
			transition: max-height .4s ease-in-out, opacity .4s ease-in-out;
			max-height: 0;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			word-wrap: normal;
		}
		.SubCourseCard_shadowType__bU9QY .CourseCard_courseCardDetailContainer__PnVam {
			display: flex;
			flex: 1 0 auto;
			flex-grow: 1;
			flex-direction: column;
			justify-content: flex-end;
			box-sizing: border-box;
			min-height: 6.5rem;
			padding: 10px 10px 20px;
			margin: 0;
		}
		.SubCourseCard_shadowType__bU9QY .CourseCard_courseCardDetail___wywz {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			flex-grow: 1;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 5px 16px 20px;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
		}

		.SubCourseCard_shadowType__bU9QY .CourseCard_courseCardKeywordContainer__clXA6 {
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			word-wrap: normal
		}

		@media(hover: hover)and (pointer:fine) {
			.SubCourseCard_shadowType__bU9QY:hover .CourseCard_courseCardDescription__phGvv {
				transition:max-height .4s ease-in-out,opacity .4s ease-in-out;
				opacity: 1;
				max-height: 100px
			}
		}
		.SubCourseCard_shadowType__bU9QY .CourseCard_courseCardInfo__1_3Of {
			height: 3.4rem
		}

	
		.CourseCard_courseCardTitle__1HQgO {
			/*
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			max-height: 3.3rem;
			font-weight: 600;
			font-size: 14px;
			line-height: 30px;
			max-width: 300px; 
			white-space: nowrap;
			*/
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			word-wrap: normal;
			max-height: 6.6rem;
			font-weight: 600;
			font-size: 1.4rem;
			line-height: 137.5%;
			word-wrap: break-word;
			margin-bottom: .2rem
		}
		.MainCategoryTab_categoryTabFoldingButton__hNb7X {
			display: none
		}


		
		.CourseCard_courseCardKeywordContainer__clXA6 {
			font-size: 12px;
			color: #000 !important
		}

	

		.CourseCard_courseCardKeyword__6Xj7Y:not(:last-child):after {
			content: "|";
			color: #000;
			margin: .4rem;
		}
		.CourseCard_courseCardDiscount__yKHtx{content: "|";
			color: #000;
			margin: .4rem;}
		.CourseCard_courseCardPriceContainer__6T7bF {
			display: flex;
			align-items: center;
			font-size: 12px;
			font-weight: 600;
			margin-top: .4rem
		}

		.CourseCard_courseCardDiscount__yKHtx {
			color: #fc1c49;
			margin-right: .4rem;
			line-height: 137.5%
		}
		
.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.SubLatestCourseList_latestCourseListSwiper__e1sbM.swiper,.SubLatestCourseList_latestCourseListSwiper__e1sbMobile.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
	overflow-x: hidden !important;
    list-style: none;
    padding: 10px 0 ;
    z-index: 1;
    display: block
}