/*  
+----------------------------------------------------------------------+
| Copyright (c) 2010-2024 STUDYMAX. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2024-08-20
| 파일설명 : PC 돈버는영어 완주증 지급 페이지 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영
+----------------------------------------------------------------------+
| 수정이력
| 20240909 이미지 교체, 후기 영역 토글 아이콘 추가 by 최진영
+----------------------------------------------------------------------+
*/

@charset "utf-8";

/* 예외처리 */
.lineBanner.ra_maxUp {
	display:none;
}


/* bg */
.bg_section01 {
	background:url('/smciImages/front/dMaxUp/maxUpFinisher/bgImg01.jpg') no-repeat center/cover;
}
.bg_section03 {
	background:url('/smciImages/front/dMaxUp/maxUpFinisher/bgImg03.jpg') no-repeat center/cover;
}
.bg_section04 {
	background:url('/smciImages/front/dMaxUp/maxUpFinisher/bgImg04_1.jpg') no-repeat center/cover;
}
.bg_section06 {
	background:url('/smciImages/front/dMaxUp/maxUpFinisher/bgImg06.jpg') no-repeat center/cover;
}
.bg_section08 {
	background:url('/smciImages/front/dMaxUp/maxUpFinisher/bgImg08.jpg') no-repeat center/cover;
}
.bg_section09 {
	background:url('/smciImages/front/dMaxUp/maxUpFinisher/bgImg09_1.jpg') no-repeat center/cover;
}
.bgColor_000000 {
	background:#000;
}
.bgColor_c94747 {
	background:#c94747;
}
.bgColor_fff8ee {
	background:#fff8ee;
}
.bgColor_ab7f58 {
	background:#ab7f58;
}
.bgColor_24272c {
	background:#24272c;
}


/* 돈버는영어 완주증 지급 페이지 */
.maxUpFinisherWrap {
	margin-top:55px;
}
.maxUpFinisherWrap .innerBox {
	position:relative;
	width:1240px;
	margin:0 auto;
}


/* 누적 지급액 영역 */
.maxUpFinisherWrap .maxUpTotalCoin {
	position:absolute;
	top:8px;
	right:170px;
	font-family:'NotoSansKR-Bold';
	font-size:50px;
	color:#FF7152;
}


/* 완주증 신청 영역 */
.maxUpFinisherWrap .finisherId {
	position:absolute;
	top:500px;
	left:50%;
	transform: translateX(-61%);
	font-family:'NotoSansKR-Bold';
	font-size:26px;
	color:#FF7152;
}
.maxUpFinisherWrap .applyFinisherBtn {
	position:absolute;
	top:567px;
	left:50%;
	transform: translateX(-50%);
	width:210px;
	height:50px;
	cursor:pointer;
}


/* 실시간 학습자 영역 */
.maxUpFinisherWrap .nowStudyUserTextBox {
	position:absolute;
	top:420px;
	font-size: 0;
}
.maxUpFinisherWrap .nowStudyUserTextBox.box01 {
	right:834px;
}
.maxUpFinisherWrap .nowStudyUserTextBox.box02 {
	right:643px;
}
.maxUpFinisherWrap .nowStudyUserTextBox.box03 {
	right:453px;
}
.maxUpFinisherWrap .nowStudyUserTextBox.box04 {
	right:263px;
}
.maxUpFinisherWrap .nowStudyUserTextBox .num,
.maxUpFinisherWrap .nowStudyUserTextBox .unit {
	font-family:'NotoSansKR-Bold';
	font-size:40px;
	color:#FD4040;
}


/* 동영상 팝업 썸네일 영역 */
.maxUpFinisherWrap .videoThumbImg {
	position:absolute;
	right:220px;
	width:300px;
	cursor:pointer;
}
.maxUpFinisherWrap .videoThumbImg.img01 {
	top:310px;
}
.maxUpFinisherWrap .videoThumbImg.img02 {
	top:660px;
}
.maxUpFinisherWrap .videoThumbImg.img03 {
	top:1010px;
}
.maxUpFinisherWrap .videoThumbImg.img04 {
	top:1360px;
}
.maxUpFinisherWrap .videoThumbImg.img05 {
	top:1710px;
}


/* 후기 토글 영역 */
.maxUpFinisherWrap .reviewImgWrap {
	width:1000px;
	margin:0 auto;
}
.maxUpFinisherWrap .reviewImgWrap .reviewImgBox {
	position:relative;
	margin-bottom:40px;
	border-radius: 20px;
	overflow: hidden;
	cursor:pointer;
}
.maxUpFinisherWrap .reviewImgWrap .reviewImgBox:last-child {
	margin-bottom:0;
}
.maxUpFinisherWrap .reviewImgWrap .reviewImgBox.dim {
	height: 400px;
}
.maxUpFinisherWrap .reviewImgWrap .reviewImgBox.dim:after {
	content:'';
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:250px;
	background:linear-gradient(to top, #FFF 0 20%, transparent 100%);
}
.maxUpFinisherWrap .reviewImgWrap .reviewImgBox .toggleIconImg {
	display:none;
	position:absolute;
	bottom:20px;
	left:50%;
	transform: translateX(-50%);
	width:11px;
	z-index: 2;
}
.maxUpFinisherWrap .reviewImgWrap .reviewImgBox .toggleIconImg.down {
	display:block;
}
.maxUpFinisherWrap .reviewImgWrap .reviewImgBox.on .toggleIconImg.up {
	display:block;
}
.maxUpFinisherWrap .reviewImgWrap .reviewImgBox.on .toggleIconImg.down {
	display:none;
}

/* 하단 고정 배너 */
.maxUpFinisherWrap .bottomBanner {
	position:fixed;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	cursor:pointer;
}


/* 돈버는영어 완주증 지급 팝업 공통 */
.maxUpFinisherWrap .popWrap {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 11;
}
.maxUpFinisherWrap .popWrap .popBg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.7);
}
.maxUpFinisherWrap .popWrap .popInner {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.maxUpFinisherWrap .popWrap .popInner .popImg {
	display:block;
}
.maxUpFinisherWrap .popWrap .popInner .closeBtn {
	position:absolute;
	top:0;
	right:0;
	width:65px;
	height:65px;
	cursor:pointer;
}
.maxUpFinisherWrap .popWrap .popInner .dataTextBox .dataText {
	position:absolute;
	font-family:'NotoSansKR-Bold';
	font-size:26px;
	color:#505061;
}
.maxUpFinisherWrap .popWrap .popInner .dataTextBox .dataText.text01 {
	top:410px;
	left:85px;
}
.maxUpFinisherWrap .popWrap .popInner .dataTextBox .dataText.text02 {
	top:410px;
	left:350px;
}
.maxUpFinisherWrap .popWrap .popInner .dataTextBox .dataText.text03 {
	top:520px;
	left:85px;
}
.maxUpFinisherWrap .popWrap .popInner .dataTextBox .dataText.text04 {
	top:520px;
	left:350px;
}
.maxUpFinisherWrap .popWrap .popInner .downloadFinisherImgBtn {
	position:absolute;
	bottom:44px;
	left:50%;
	transform: translateX(-50%);
	width:226px;
	height:58px;
	cursor:pointer;
}
.maxUpFinisherWrap .popWrap .popInner .moveRABtn {
	position:absolute;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	width:410px;
	height:100px;
	cursor:pointer;
}
.maxUpFinisherWrap .popWrap .popInner .muRemainDay {
	position:absolute;
	top:225px;
	right:400px;
	font-family:'NotoSansKR-Bold';
	font-size:66px;
	color:#D1FF30;
}


/* 동영상 팝업 */
.maxUpFinisherWrap .layerVideoWrap {
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width:762px;
	height:478px;
	background-color:#222326;
	border-radius: 10px;
	z-index: 101;
}
.maxUpFinisherWrap .layerVideoWrap.on {
	display: block;
}
.maxUpFinisherWrap .layerVideoWrap .layerTitle {
	margin-top: 18px;
	margin-left: 20px;
}
.maxUpFinisherWrap .layerVideoWrap .layerCloseBtn {
	position: absolute;
	right: 28px;
	top: 18px;
	cursor:pointer;
}
.maxUpFinisherWrap .layerVideoWrap .layerContentsArea {
	margin-top:20px;
	margin-left: 20px;
}