@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

@media(prefers-reduced-motion:no-preference){
	.subVisual::before{ animation: subVisual_bg 1.8s both; }
	@keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.subVisual .inr > *{ opacity: 0; animation: subVisualText .6s .2s both; }
	.subVisual .inr > *:nth-child(2){ animation-delay: .4s; }
	@keyframes subVisualText {
		0%{ transform: translateY(40rem); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}

/* lnb */
.lnb{ background: #222; border-bottom: 1px solid #ddd; text-align:center; font-size:18rem; font-weight: 500; color: #ddd; z-index:5; display: none; }
.lnb ul{ margin: 0 auto; }
.lnb li{display:inline-block; padding: 0 28rem; }
.lnb a{ position: relative; display: flex; align-items: center; height: 4.0625em; }
.lnb a:hover,
.lnb a.on{ color: var(--primary); }
.lnb a.on::before{ content: ''; position: absolute; inset: 0; border-bottom: 2px solid currentColor; }
.text_op1 {-webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.text_op2 {-webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

@media(max-width:767px){
	.lnb{ overflow: auto clip; white-space:nowrap; }
	.lnb ul{ display:table; margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb li{ display:table-cell; }
}

/* common content - 전체 */
header .header_bottom {display: block}
#content { min-height:300px; padding: 30rem 0 60rem;}
#content.sub_video {background: #000;}
.sub_h2 {font-size: 20rem;}
.sub_h3 {font-size: 18rem;}
.sub_h4 {font-size: 16rem;}
.sub_h5 {font-size: 15rem;}

@media(min-width:768px){
	.sub_h2 {font-size: 28rem;}
	.sub_h3 {font-size: 25rem;}
	.sub_h4 {font-size: 18rem;}
	.sub_h5 {font-size: 20rem;}
}


/* 클래스 - classList */
.class__box {}
.class__menu {display: grid; grid-template-columns: repeat(5,1fr); gap: 5rem; margin-bottom: 20rem;}
.class__menu li a {display: block; font-size: 15rem; font-weight: 500; padding: 8rem 4rem; border-radius: 30rem; box-sizing: border-box;  text-align: center; border: 1rem solid #e1e1e1; color: #8d8d8d;}
.class__menu li.on a {background: #222; color: #fff; border-color: transparent;}
.class__align  {display: flex; align-items: center; justify-content: flex-end; gap: 8rem; font-weight: 500; margin-bottom: 20rem;}
.class__align img {width: 100%; max-width: 14rem;}
.class__list {display: grid; grid-template-columns: repeat(2,1fr); gap: 25rem; counter-reset:list-number;}
.class__list li {position: relative; background: #f2f2f2; padding:12rem; box-sizing: border-box; border-radius: 8rem; counter-increment:list-number}
/* .class__list li::before {content: counter(list-number); position: absolute; top: -10rem; left: -10rem; font-size: 15rem; font-weight:500; z-index: 10; background-repeat: no-repeat; background-size: cover; text-align: center;}
.class__list li:nth-child(1)::before {content: ''; width: 41rem; height: 39rem; background-image: url(/images/common/Trophy.png);}
.class__list li:nth-child(n+2):nth-child(-n+4):before {width: 30rem; height: 30rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-sizing: border-box; color: #fff;}
.class__list li:nth-child(2)::before {background: #8d8d8d; border: 4rem solid #b5b5b5;}
.class__list li:nth-child(3)::before {background: #bb9c7b;border: 4rem solid #dac6b0;}
.class__list li:nth-child(4)::before {background: #111; }
.class__list li:nth-child(n+5)::before {content: '';} */
.class__list li .img {display: block; overflow: hidden; aspect-ratio: 290/235; background: #ccc url(../images/common/logo_gray.svg) no-repeat 50% 50%; background-size: 100rem; height: 100%; max-height: 140rem; overflow: hidden; border-radius: 4rem; margin-bottom: 10rem;}
.class__list li .img img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
.class__list li .info h4 {font-weight: 500; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.class__list li .info p {display: flex; align-items: center; color: #666; font-weight: 500; margin-top: 5rem;}
.class__list li .info .site {position: relative; padding-left: 8rem; margin-left: 7rem; }
.class__list li .info .site::before {content: ''; position: absolute; top: 6rem; left: 0; width: 1rem; height: 11rem; background: #b5b5b5;}

@media(min-width:768px){
	.class__menu {margin-bottom: 40rem; gap: 8rem; }
	.class__menu li a {padding: 12rem 8rem; font-size: 16rem;}
	.class__align {display: flex; align-items: center; gap: 10rem; font-weight: 500; margin-bottom: 30rem;}
	.class__list {gap: 30rem;}
	.class__list li {padding: 20rem;}
	.class__list li:nth-child(1)::before {width: 35rem; height: 32rem;}
	.class__list li:nth-child(n+2):nth-child(-n+4):before {width: 35rem; height: 35rem;}
	.class__list li .img {background-size:120rem; max-height: 235rem; margin-bottom: 15rem;}
	.class__list li .info p {margin-top: 8rem;}
	.class__list li .info .site {padding-left: 14rem; margin-left: 13rem;}
}


/* 클래스 - classView */
.classView {}
.view__title {padding-bottom: 30rem; border-bottom: 15rem solid #f5f5f5;}
.view__title .class-pagination {position: absolute; bottom: 10rem;  z-index: 20; text-align: center;}
.view__title .classView_swiper .swiper-pagination-bullet {background: rgba(0, 0, 0, 0.8); width: 9rem; height: 9rem; margin: 0 3rem;}
.view__title .class-pagination .swiper-pagination-bullet-active{background: #fff;}
.view__title .classView_swiper img {width: 100%; object-fit: cover;}
.view__title .info .sub_h3 {-webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.view__title .info_tit {display: flex; align-items: center; justify-content: space-between; margin: 20rem 0 15rem;}
.view__title .info_tit img {height: 25rem; margin-left: 10rem;}
.view__title .info_tit p {display: flex; align-items: center; font-size: 18rem; color: #666; font-weight: 500;}
.view__title .info_tit .site {position: relative; padding-left: 14rem; margin-left: 13rem; }
.view__title .info_tit .site::before {content: ''; position: absolute; top: 6rem; left: 0; width: 1rem; height: 11rem; background: #b5b5b5;}
.view__title .icon_list {display: flex; align-items: center; gap: 12rem;}
.view__title .icon_list a {display: block;}
.view__title .icon_list .sub_h3 {-webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.view__title .icon_list svg {width: 20rem;}
.view__title .class_btn {display: block; padding: 15rem 0; background: #222; color: #fff; border-radius: 5rem; text-align: center; margin-top: 20rem;}
.view__box {margin-top: 40rem;}
.view__box .tab__menu {display: grid; grid-template-columns: repeat(4,1fr); gap: 8rem; align-items: center; justify-content: center; margin-bottom: 30rem;}
.view__box .tab__menu li {padding: 12rem 10rem; font-size: 16rem; background: #eee; color: #8d8d8d; border-radius: 5rem; text-align: center; cursor: pointer;}
.view__box .tab__menu li.on {background: #222; border-color:transparent; color: #fff;}
.view__box .tabCon {overflow: hidden; visibility: hidden; height: 0;}
.view__box .tabCon.on {overflow: visible; visibility: visible; height: 100%;}
.sortList.isHide{ display: none; }
@media(min-width:768px){
	.view__box .tab__menu {gap: 12rem; margin-bottom: 40rem;}
	.view__box .tab__menu li {min-width: 150rem; padding: 15rem 10rem; font-size: 18rem;}
	.view__title .class_btn {padding: 20rem 0; font-size: 20rem;}
	.view__title .icon_list {gap: 20rem;}
	.view__title .icon_list svg {width: 26rem;}
}

/* 탬메뉴 - 홈 */
.profile__box {}
.view__box .profile__img {display: flex; justify-content: space-between; align-items: center; padding: 30rem 25rem; box-sizing: border-box; border-radius: 6rem; background: #e8e8e8;}
.view__box .profile__img img {width: 100%; height: 100%; object-fit: cover;}
.view__box .profile__img .img { flex-shrink: 0; width: 90rem; height: 90rem; background: #e8e8e8 url(../images/content/icon_profile.svg) no-repeat 50% 50%; border: 3rem solid #222; box-sizing: border-box; background-size:28rem; border-radius: 50%; overflow: hidden;}
.view__box .profile__img dl{ white-space: nowrap; }
.view__box .profile__img .logo { }
.view__box .profile__img .logo img { max-width: 140rem; width: 100%;}
.view__box .profile__img dt {font-size: 20rem; font-weight: 700; }
.view__box .profile__img dd {font-size: 15rem; color: #828282; font-weight:400;}
.view__box .profile__sns {display: grid; justify-items: center; grid-template-columns: repeat(5,1fr); padding: 20rem 20rem; border-radius: 6rem; background: #e8e8e8; margin-top: 10rem;}
.view__box .profile__sns [href=""]{ opacity: 0.3; filter: grayscale(1); pointer-events: none; }
.view__box .profile__sns img {width: 32rem;}
.view__box .profile__txt {margin-top: 35rem;}
.view__box .profile__txt h3 {font-size: 22rem; line-height: 1.4; text-align: center; font-weight: 700;}
.view__box .profile__txt .img {width: 100%; margin: 25rem 0;}
.view__box .profile__txt .img img {width: 100%; max-width: 100%; object-fit: cover;}
.view__box .profile__txt p {line-height: 1.6; text-align: center;}

@media(min-width:768px){
	.view__box .profile__img {padding: 30rem 30rem; gap: 45rem; justify-content: flex-start; border-radius: 10rem;}
	.view__box .profile__img .img {width: 150rem; height: 150rem;}
	.view__box .profile__img .text {min-width: 130rem;}
	.view__box .profile__img dt {font-size: 26rem; margin-bottom: 5rem;}
	.view__box .profile__img dd {font-size: 18rem;}
	.view__box .profile__sns {padding: 25rem 30rem; border-radius: 10rem;  margin-top: 20rem;}
	.view__box .profile__sns img {width: 40rem;}
	.view__box .profile__txt {margin-top: 45rem;}
	.view__box .profile__txt h3 {font-size: 28rem;}
	.view__box .profile__txt p {font-size: 17rem;}
	.view__box .profile__img .logo img {max-width: 210rem}
}


/* 탭메뉴 - 커리큘럼 */
.video__img{ margin: 0 auto 30rem; display: block; max-width: 100%; }
.view__box .sub_h2, .view__box .sub_h3 {margin-bottom: 15rem;}
:is(.view__box .sub_h2, .view__box .sub_h3):empty{ display: none; }
.view__box .video_thum .img {width: 100%; height: 300rem; background: #f2f2f2 url(../images/content/icon_play_i.svg) no-repeat 50% 50%; background-size:45rem;}
.view__box .video__list {margin-top: 30rem;}
.view__box .video__list li {padding-bottom: 18rem; border-bottom: 1rem solid #e1e1e1;}
.view__box .video__list li a {display: flex; align-items: center; justify-content: space-between;}
.view__box .video__list li+li {margin-top: 10rem;}
.view__box .video__list .tit {width: 100%; display: flex; gap: 30rem;}
.view__box .video__list .icon_play {flex: 1 10%; max-width: 35rem; width: 100%; fill: #111;}
.view__box .video__list dl {flex: 1 70%;}
.view__box .video__list dt {font-size: 18rem; font-weight: 600; margin-bottom: 5rem;}
.view__box .video__list dd {font-size: 17rem; color: #828282;}
.view__box .video__list .star_svg {flex: 1 10%; max-width: 30rem; width: 100%; fill: rgba(255, 255, 255, 0.8); ;}

@media(min-width:768px){
	.view__box .video__list .icon_play {width: 32rem;}
	.view__box .video__list dt {font-size: 20rem;}
}

/* 탭메뉴 - 댓글 */
.reply__menu {display: flex; justify-content: space-between; margin-bottom: 25rem; font-size: 17rem;}
.reply__menu .reply__align {color: #666;}
.reply__menu .myreply input[type="checkbox"] {width: 16rem; height: 16rem;}
.reply__menu .myreply .check{ display: flex; gap: 3rem; align-items: center;}
.reply__list li {}
.reply__list li + li {padding-top: 30rem; margin-top: 30rem; border-top: 1rem solid #e1e1e1;}
.reply__list li .reply__box {display: flex; gap: 25rem; position: relative;}
.reply__list .reply__box .good {display: flex; align-items: center; gap: 5rem; font-weight: 500; color: #8d8d8d; }
.reply__list .reply__box .good_svg {width: 18rem; fill: #b5b5b5;}
.reply__list .img {width: 65rem; height: 65rem; background: #f2f2f2; background-size:20rem; border-radius: 50%; background-image: url(../images/content/icon_profile.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size:25rem; overflow: hidden;}
.reply__list p {display: flex; align-items: center; font-size: 17rem; color:var(--primary); font-weight: 500;}
.reply__list h4 {margin: 6rem 0 10rem; font-size: 18rem; font-weight: 600;}
.reply__list .time {position: relative; padding-left: 14rem; margin-left: 13rem; }
.reply__list .time::before {content: ''; position: absolute; top: 6rem; left: 0; width: 1rem; height: 11rem; background: #b5b5b5;}
.reply__list .reply_btn {position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 4rem;}
.reply__list .reply_btn span {display: inline-block; width: 4rem; height: 4rem; border-radius: 50%; background: #222;}

/* 탭메뉴 - 커뮤니티 */
.community__list {display: grid; grid-template-columns: 1fr 1fr; gap: 15rem;}
.community__list li a { display: block; aspect-ratio: 1; width: 100%; background: #f2f2f2 url(../images/common/logo_gray.svg) no-repeat 50% 50%; background-size:110rem; }
.community__list li img{ width: 100%; height: 100%; object-fit: cover; }
/* .community__list li a span.img {display: block; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; height: 100%;}
.community__list li:nth-child(1) span.img {background-image: url(/images/content/community_img1.jpg);}
.community__list li:nth-child(2) span.img {background-image: url(/images/content/community_img2.jpg);} */
/* 커뮤니티 - 게시물 */
.community__box .tit {display: flex; gap: 20rem; align-items: center;}
.community__box .tit .pr_img {width: 90rem; height: 90rem; background-color: #f2f2f2; background-image: url(../images/content/icon_profile.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size:28rem; border-radius: 50%; overflow: hidden;}
.community__box .tit .text {display: flex; align-items: flex-end; justify-content: space-between;}
.community__box .tit dt {font-size: 22rem; font-weight: 700;}
.community__box .tit dd {font-size: 16rem; color: #8d8d8d; font-weight:500;}
.community__box .img {width: 100%; object-fit: cover; margin: 20rem 0;}
.community__box .img img {width: 100%; max-width: 100%;}
.community__box .icon__list {display: flex; gap: 15rem; margin-bottom: 15rem; align-items: center;}
.community__box .icon__list a svg {width: 23rem;}
.community__box p {font-size: 18rem; line-height: 1.8;}

@media(min-width:768px){
	.community__list { grid-template-columns: 1fr 1fr 1fr; gap: 20rem;}
	.community__box .tit {gap: 30rem;}
	.community__box .tit .pr_img {width: 100rem; height: 100rem;}
	.community__box .tit dt {font-size: 26rem; margin-bottom: 5rem;}
	.community__box .tit dd {font-size: 18rem;}
	.community__box .icon__list {gap: 20rem; margin-bottom: 30rem;}
	.community__box .icon__list a svg {width: 26rem;}
	.community__box .img {margin: 30rem 0;}
}

/* 클래스시작 - 비디오 */
.class_back {display: block;}
.class_back .class_back_svg {width: 10rem; fill: #fff; transform: scaleX(-1); padding: 10rem 0;}
.classStart .view__box {margin-top: 30rem;}
.classStart .view__box .video__list {margin-top: 0;}
.classStart .view__title {border-bottom: 0; padding-bottom: 0;}
.classStart .view__title h3 {font-size: 18rem; margin-bottom: 15rem; color: #fff;}
.classStart .view__video {position: relative;}
.classStart .view__video .class__video {width: 100%; max-width: 100%;}
.classStart .video_tit {position: absolute; top:15rem; left: 15rem;}
.classStart .video_tit h4 {font-size: 16rem; font-weight: 600; color: #fff; margin-top:5rem;}
.classStart .video_tit p img {height: 18rem; margin-left: 5rem;}
.classStart .video_tit p {display: flex; align-items: center; font-size: 14rem; color: #fff; font-weight: 400;}
.classStart .video_tit .site {position: relative; padding-left: 9rem; margin-left: 10rem; }
.classStart .video_tit .site::before {content: ''; position: absolute; top: 6rem; left: 0; width: 1rem; height: 11rem; background: #b5b5b5;}
.classStart .view__video .gift {position: absolute; bottom: 65rem; right: 15rem; display: block; padding: 4rem 10rem; border-radius: 4rem; background: #fff; font-size: 13rem; font-weight: 500; z-index: 20;}
.classStart .video__list {color: #fff;}
.classStart .video__list li {border-bottom: 1rem solid rgba(255, 255, 255, 0.2);}
.classStart .video__list .icon_play {fill: #fff;}
.classStart .tab__menu li {background: rgba(255, 255, 255, 0.2); color: #fff;}
.classStart .tab__menu li.on {background: #fff; color: #111;}

.classStart .sub_h3 {color: #fff;}
.classStart .profile__txt {color: #fff;}
.classStart .tabReply {color: #fff;}
.classStart .community__box {color: #fff;}
.classStart .community__box .icon__list svg {fill: rgba(255, 255, 255, 0.8);}
.reply__list .reply_btn span {background: #fff;}

@media(min-width:768px){
	.class_back .class_back_svg {width: 15rem;}
	.classStart .view__title h3 {font-size: 25rem; margin-bottom: 20rem;}
	.classStart .video_tit {top: 20rem; left: 20rem;}
	.classStart .video_tit h4 {font-size: 22rem; margin-top: 10rem;}
	.classStart .video_tit p {font-size: 18rem;}
	.classStart .video_tit p img {height: 22rem;}
	.classStart .video_tit .site {position: relative; padding-left: 14rem; margin-left: 13rem; }
	.classStart .view__video .gift {bottom: 80rem; right: 20rem; padding: 8rem 15rem;}
}

/* 매거진 */
.magazine_best {}
.magazine_best .ma_slide {}
.magazine_best .maImg { width: 100%; margin-bottom: 20rem;}
.magazine_best .maImg img { aspect-ratio: 16/9; width: 100%; max-width: 100%; object-fit: cover; }
.magazine_best .maInfo span {font-size: 15rem; font-weight: 600; color: var(--primary);}
.magazine_best .maInfo h4 {font-size: 24rem; font-weight: 700; margin: 6rem 0 12rem; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.magazine_best .maInfo p {color: #666; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.magazine_best .ma-pagination {text-align: center; margin-top: 20rem;}
.magazine_best .ma-pagination .swiper-pagination-bullet {width: 8rem; height: 8rem; margin: 0 3rem;}
.magazine_best .ma-pagination .swiper-pagination-bullet-active {background: var(--primary);}

.magazine__box {}
.magazine__menu {display: grid; grid-template-columns: repeat(5,1fr); gap: 5rem; margin-bottom: 20rem;}
.magazine__menu li a {display: block; font-size: 15rem; font-weight: 500; padding: 8rem 4rem; border-radius: 30rem; box-sizing: border-box;  text-align: center; border: 1rem solid #e1e1e1; color: #8d8d8d;}
.magazine__menu li.on a {background: #222; color: #fff; border-color: transparent;}
.maCon .maList {display: grid; grid-template-columns: repeat(2,1fr); gap: 30rem 15rem;}
.maCon .maList .img { aspect-ratio: 16/9; width: 100%; background-color: #f2f2f2; margin-bottom: 15rem;}
.maCon .maList .img img {  width: 100%;height: 100%;  max-width: 100%; object-fit: cover;}
.maCon .maList .text dt {font-weight: 700; margin-bottom: 6rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.maCon .maList .text dd {font-size: 15rem; color: #666; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

.br__top {position: relative;  margin-top: 40rem; padding-top: 40rem;}
.br__top::after {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 10rem; background: #f2f2f2;}
.br__top::before {position: absolute; content: ''; top: 0; left: 0; inset: 0 -50vw 0;  height: 10rem; background: #f2f2f2; z-index: -1;}

@media(min-width:768px){
	.magazine__menu {margin-bottom: 40rem; gap: 8rem; }
	.magazine__menu li a {padding: 12rem 8rem;}
}

/* 업데이트20241213 */

/* 골프공TV */
.tvSlider { position:relative; width:100%; height: auto; }
.tvSlider img { max-width: 100%; width: 100%; object-fit: cover; border-radius: 10px; }
.tvSlider .tvSlider-pagination { position: absolute; bottom: 10rem; z-index: 20; text-align: center; }
.tvSlider .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.9); width: 9rem; height: 9rem; margin: 0 3rem; }
.tvSlider .swiper-pagination-bullet-active { background: #fff; }
.media_tab { position: relative; margin-top: 20rem; }
.media_tab .class_media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rem; }
.media_tab .class_media li a { padding: 14rem; display: block; text-align: center; background: #ececec; border-radius: 5px; }
.media_tab .class_media li.active a { background: var(--primary); color: #fff; }
.media_youtube { position: relative; margin-top: 40rem; }
.media_youtube .media_filter { display: flex; justify-content: flex-end; }
.media_youtube .media_filter a { font-size: 20rem; font-weight: 600; display: flex; align-items: center; gap: 10rem; }
.media_youtube .media_filter a::before { content: ''; display: block; position: relative; width: 20rem; height: 20rem; background: url(https://cdn-icons-png.flaticon.com/512/7693/7693332.png) no-repeat; background-size: contain; }
.media_youtube .media_wrap { margin-top: 30rem; display: flex; flex-direction: column; gap: 20rem; }
.media_youtube .media_wrap .list_yt { display: flex; padding-bottom: 20rem; border-bottom: 1px solid #ddd; }
.media_youtube .media_wrap .list_yt .thumb { width: 100%; max-width: 180rem; aspect-ratio: 4 / 2; height: 120rem; object-fit: cover; border-radius: 10rem;}
.media_youtube .media_wrap .list_yt a { display: flex; gap: 20rem; }
.media_youtube .media_wrap .list_yt .desc { display: flex; flex-direction: column; gap: 10rem;justify-content: space-around; }
.media_youtube .media_wrap .list_yt .desc .yt-tit { font-weight: 600; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.media_youtube .media_wrap .list_yt .desc p { font-size: 14rem; }

/* 교습가 랭킹 */
.rSlider { position:relative; width:100%; height: auto; }
.rSlider img { max-width: 100%; width: 100%; height: auto; object-fit: cover; border-radius: 10px; }
.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; }
.rank_list .btn-title .tit { font-size: 20rem; font-weight: bold; display: flex; gap: 20rem; }
.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; }

/* 마이페이지 */
.mypage { position: relative; padding: 20rem 0; }
.mypage .mypage_title { text-align: center; padding-bottom: 20rem; }
.mypage .mypage_content { margin-top: 20rem; }
.mypage .mypage_content .mp_menu { margin-top: 40rem; }
.mypage .mypage_content .mp_profile { display: flex; gap: 20rem; }
.mypage .mypage_content .mp_profile img.mp_pic { width: 100%; max-width: 100rem; border-radius: 100%; }
.mypage .mypage_content .mp_profile .mp_name { display: flex; flex-direction: column; gap: 10rem; justify-content: center; }
.mypage .mypage_content .mp_profile .mp_name span { font-size: 22rem; font-weight: 600; }
.mypage .mypage_content .mp_profile .mp_name i { }
.mypage .mypage_content .mp_menu .list-m li { }
.mypage .mypage_content .mp_menu .list-m { display: flex; flex-direction: column; margin-bottom: 20rem; border-top: 1px solid #eee; }
.mypage .mypage_content .mp_menu .list-m a { display: block; padding: 20rem 0; position: relative; }
.mypage .mypage_content .mp_menu .list-m a::after { content: ''; display: block; position: absolute; width: 12rem; height: 12rem; background: url(/images/common/ico-arrow-r.svg) no-repeat; background-size: contain; right: 0; top: 50%; transform: translateY(-50%); }