/* main_splash */
.main_splash {width:100%; max-width:768px; height: 100vh; margin:0 auto; overflow-x: hidden; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; background: #1a1a1a; z-index: 1500; display: none;}
.main_splash.fade_out{ animation: fade_out .6s 1s both; }
.main_splash img {height: 30rem; }

@keyframes fade_out {
    0%{ opacity: 1; visibility: visible; }
    100%{ opacity: 0; visibility: hidden; }
}

@media(max-width: 768px){
	.main_splash {max-width: 100%;}
	.main_splash img {height: 25rem;}
}

/* visual */
.mainVisual {position:relative; width:100%; height: auto;}
.mainVisual img {max-width: 100%; width: 100%;}
.mainVisual .mainVisual-pagination {position: absolute; bottom: 10rem;  z-index: 20; text-align: center;}
.mainVisual .swiper-pagination-bullet {background: rgba(255, 255, 255, 0.9); width: 9rem; height: 9rem; margin: 0 3rem;}
.mainVisual .swiper-pagination-bullet-active{background: #fff;}


/* 공통 */
.mainTit {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rem;}
.mainTit__h2 {font-size: var(--fs28); letter-spacing: -0.2rem; font-weight: 700;}
.mainTit a {font-size: var(--fs20); font-weight: 600; color: #222;}
.main-swiper.swiper {overflow:initial !important;}
/*.main-swiper .swiper-slide {width: 330rem !important}*/
.main-swiper .mainImg {border-radius: 12rem; width: 100%; height: 100%; overflow: hidden; margin-bottom: 20rem;}
.main-swiper .mainImg img {object-fit: cover; width: 100%; aspect-ratio: 660/452; }
.main-swiper .mainInfo dt {font-size: var(--fs24); font-weight: 700;}
.main-swiper .mainInfo dd {font-size: var(--fs20); font-weight: 600; color: #888; margin-top:6rem;}
.main-swiper .mainInfo dd span {position: relative; padding-left: 12rem; margin-left: 12rem;}
.main-swiper .mainInfo dd span::before {content: ''; position: absolute; top: 4rem; left: 0; width: 1rem; height: 15rem; background: #bbb;}
.mainList {display: flex; justify-content: space-between; grid-template-columns: repeat(4,1fr); text-align: center;}
.mainList li .img {position: relative; width: 130rem; height: 130rem; }
.mainList li img {object-fit: cover; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;}
.mainList li p {font-size: var(--fs22); font-weight: 600; margin-top:20rem;}

/* mainQuick - 퀵메뉴 */
.mainQuick {margin-top: 50rem;}
.mainQuick ul {display: flex; justify-content: space-between; text-align: center;}
.mainQuick ul li a {display: block;}
.mainQuick li .img {display: flex; align-items: center; justify-content: center; width: 100rem; height: 100rem; background: #e5e5e5; border-radius: 15rem;}
.mainQuick li .img img {max-width: 100%}
.mainQuick li p {font-size: var(--fs22); font-weight: 600; margin-top: 20rem;}

/* BestTeacher - 베스트 강사 */
.BestTeacher {margin-top: 100rem;}
/* 랭킹 */
.mainRank {margin-top: 80rem;}
.mainRank .mainList li img {width: 100%; max-width: 100%;}
.mainList li .img .rank {position: absolute; bottom: 0; left: 0; display: block;}
.mainList li .img .rank img{ width: 30rem; height: 30rem; }
.mainList li .img .lank_i {width: 30rem; height: 30rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 14rem; z-index: 10;}
/* .mainList li .img .lank1 img {max-width: 35rem;}
.mainList li .img .lank2 {background: #8d8d8d; border: 4rem solid #b5b5b5;}
.mainList li .img .lank3 {background: #bb9c7b; border: 4rem solid #dac6b0;}
.mainList li .img .lank4 {background: #111; } */
/* .BestTeacher .mainList li .img .rank { display: none; } */

/* mainBest - 인기 클래스 */
.mainBest {margin-top: 80rem;}

/* mainPlace - 플레이스 */
.mainPlace {margin-top: 80rem;}
.mainPlace .placeSwiper p {font-size: var(--fs24); font-weight: 700;}
.mainPlace .placeSwiper span {position: relative;  padding-left: 12rem; margin-left: 13rem;}
.mainPlace .placeSwiper span::before {content: ''; position: absolute; top: 5rem; left: 0; width: 1rem; height: 15rem; background: #8d8d8d;}

/* mainNew - 신규 클래스 */
.mainNew {margin-top: 80rem;}
/* mainRecommend - 추천 클래스 */
.mainRecommend {margin-top: 80rem;}

/* mainBn 메인 배너 */
.mainBn {margin-top: 80rem; position: relative;} 
.mainBn img {max-width: 100%; width: 100%;}
.mainBn.bn2 {box-shadow: 0 10rem 15rem rgba(0, 0, 0, 0.18);}
.mainBn3 {text-align: center; margin-top: 80rem;}
.mainBn3 img {width: 100%; max-width: 100%;}
.mainBn3 h3 {font-size: var(--fs30); font-weight: 500; color: #fff; padding: 30rem 0; background: #1E5634; }
.mainBn .mainBn-pagination {position: absolute; bottom: 10rem;  z-index: 20; text-align: center;}
.mainBn .swiper-pagination-bullet {background: rgba(0, 0, 0, 0.8); width: 9rem; height: 9rem; margin: 0 3rem;}
.mainBn .swiper-pagination-bullet-active{background: #fff;}

@media(max-width: 768px){
	.mainQuick {margin-top: 35rem;}
	.mainQuick li .img {width: 68rem; height: 68rem;}
	.mainQuick li p {font-size: 14rem; margin-top: 12rem;}
	.mainTit {margin-bottom: 20rem;}
	.mainTit__h2 {font-size: 22rem;}
	.mainTit a {font-size: 15rem;}
	.mainList li .img {width: 88rem; height: 88rem;}
	.mainList li p {font-size: 14rem; margin-top: 12rem;}
	.BestTeacher {margin-top: 50rem;}
	.main-swiper .mainImg {margin-bottom: 15rem;}
	.main-swiper .swiper-slide {width: 285rem !important; }
	.main-swiper .mainInfo dd span {padding-left: 11rem; margin-left: 12rem;}
	.main-swiper .mainInfo dd span::before {top: 6rem; height: 12rem;}
	.mainRank {margin-top: 50rem;}
	.mainBest {margin-top: 50rem;}
	.mainBest .BestSwiper2 {margin-top: 60rem;}
	.mainBest .BestSwiper2 span {padding-left: 10rem; margin-left: 10rem;}
	.mainBest .BestSwiper2 span::before {top: 5rem; height: 11rem;}
	.mainNew {margin-top: 50rem;}
	.mainRecommend {margin-top: 50rem;}

	.mainBn {margin-top: 50rem;}
	.mainBn2 {margin-top: 50rem;}
	.mainBn2 .BnTit h3 {font-size: 22rem;}
	.mainBn2 .BnImg {width: 98rem; height: 98rem;}
	.mainBn2 .BnTit p {font-size: 15rem; letter-spacing: -0.15rem;}
	.mainBn3 {margin-top: 60rem;}
}

/* dialog modal */
body:has(#dialog[open]){ overflow: hidden; }
.dialogBtn.show{ display: contents; background: 0; font-size: inherit; }
#dialog{ position: fixed; inset: 0; margin: auto; display: block; width: min(600px, 92vw); padding: 0; background: #fff; border: 0; z-index: 151; }
#dialog:not([open]){ visibility: hidden; opacity: 0; }
#dialog::backdrop{ display: none; }
.dialogHead{ display: flex; align-items: center; justify-content: space-between; height: 3.4375em; padding: .9375em; background: #686e82; box-sizing: border-box; color: #fff; }
.dialogBtn.close{ position: relative; width: 1.1875em; height: 1.1875em; background: url('/images/module/btn_close.png') no-repeat 50% / contain; font-size: inherit; }
.dialogBtn.close::before{ content: ''; position: absolute; inset: -5px; }
.dialogBody,
.dialogIframe{ overflow: auto; display: block; width: 100%; height: min(590px, calc(85vh - 3.4375em)); padding: .9375em; background: #fff; box-sizing: border-box; border: 0; }
.dialogBackdrop{ position: fixed; inset: 0; background: #000; opacity: .8; z-index: -1; }
@media(prefers-reduced-motion:no-preference){
	#dialog{ transition: opacity .4s, visibility .4s; }
	.dialogBackdrop{ transition: .4s; }
}



/* popup -  ranking */
#popTeacher { position: fixed; max-width: 768px; width: 100%; height: 100vh; top: 0; display: block; z-index: 100; overflow: auto; transform: translateX(100%); transition: all 0.3s; opacity: 0; }
#popTeacher.show { transform: translateX(0);opacity: 1; transition: all 0.3s;}
#popTeacher > .wrap { background: #fff; padding-bottom: 40rem; overflow: visible; }
#popTeacher .headtop { display: flex; justify-content: space-between; width: calc(var(--inrWidth)* 100%); margin: 0 auto; padding: 20rem 0; position: sticky; top: 0; z-index: 3; background: #fff; }
#popTeacher::-webkit-scrollbar { display: none; }
#popTeacher .btn-fixbot { margin-top: 40rem; }
#popTeacher .btn-fixbot > a { display: flex; justify-content: center; padding: 20rem 0; font-size: 20rem; background: #222; color: #fff; border-radius: 10rem; }
#popTeacher .headtop button.close_btn { font-size: 30rem; display: inline-block; transform: scale(1.2, 1); font-weight: 200; }

.rSlider { position:relative; width:100%; height: auto; }
.rSlider img { max-width: 100%; width: 100%; height: auto; object-fit: cover; border-radius: 10px; aspect-ratio: 6 / 3; }
.rSlider .rSlider-pagination { position: absolute; bottom: 10rem; z-index: 20; text-align: center; }
.rSlider .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.9); width: 9rem; height: 9rem; margin: 0 3rem; }
.rSlider .swiper-pagination-bullet-active { background: #fff; }
.rank_list { position: relative; margin-top: 20rem; }
.rank_list .btn-title { padding: 15rem 0;display: flex; justify-content: space-between; }
.rank_list .btn-title .tit { font-size: 20rem; font-weight: bold; display: flex; gap: 20rem; align-items: center;}
.rank_list .btn-title .tit::after { content: ''; position: relative; display: block; background: url(/images/common/ico-arrow-r.svg) no-repeat; background-size: contain; width: 15rem; height: 15rem; }
.rank_list .top_list { display: flex; flex-direction: column; gap: 20rem; margin-top: 10rem; }
.rank_list .top_list img { width: 100%; max-width: 70px; border-radius: 10px; }
.rank_list .top_list .wrap { display: flex; gap: 20px; align-items: center; }
.rank_list .top_list .wrap span { font-weight: 700; font-size: 15px; }
.rank_list .top_list .rank_name p { white-space: nowrap; width: 100%; max-width: 180px; text-overflow: ellipsis; overflow: hidden; margin-top: 5px; }
.rank_list .top_list li { display: flex; justify-content: space-between; align-items: center; }
.rank_list .top_list li .btn_play { background: url(/images/common/ico-arrow-r.svg) no-repeat; background-size: contain; width: 15rem; height: 15rem; }


/* override 2025-02-13  */
.mainQuick li .img {background: var(--color-accent);}
.mainList li img {border-radius: 15rem;} 
.mainList li .img .rank {
    top: 0;
    bottom: auto;
    border-radius: 15rem 0 15rem 0;
    width: 40rem;
    height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    /* background: #1a1a1a;
    color: #fff; */
}
.mainList li p{margin-top:0;}
.mainList li .img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}
@media (max-width: 1080px) {
    .mainQuick li .img{width:110rem;height:110rem;}
    .mainList li .img{width:auto;height:auto;aspect-ratio:1/1;}
}
@media (max-width: 767px) {
    .mainQuick li .img{width:68rem;height:68rem;}
    .mainQuick li .img img{max-width:75%;}
    .mainList li .img .rank {width: 30rem; height: 30rem;}
}