/*
 +----------------------------------------------------------------------+
 | Copyright (c) STUDYMAX.  co. Ltd
 +----------------------------------------------------------------------+
 | 작업일 : 2024-01-30
 | 파일설명 : 베트남 스피킹맥스 메인 페이지 CSS 
 +----------------------------------------------------------------------+
 | 작업자 : 최진영 
 +----------------------------------------------------------------------+
 | 수정이력 
| 20240507 PC에서 랜딩 페이지 이동 버튼 미노출 처리 by 최진영
 +----------------------------------------------------------------------+
*/

@charset "utf-8";

/* GNB 개발 전 예외처리 */
.wrapComm {margin-top:0;}

/* footer 예외처리(랜딩 이동 고정 버튼 때문에) */
.footer .contents {padding-bottom:40% !important;}

/* 컨텐츠 */
.mainWrap .appDownloadBtn {position:absolute; bottom:6.5%; left:15%; width:70%; height:16vw;}
.mainWrap .appDownloadBtn.fixed {position:fixed; bottom:8%; left:2%; width:96%; height:auto; padding:3%; background:#10d5a8; font-family:'BeVietnamPro-Medium'; font-size:var(--font-4dep); color:#fff; text-align:center; border-radius:15px; box-shadow: 0px 7px 24px 0px rgba(0, 0, 0, 0.51); z-index:1;}
.mainWrap .appDownloadBtn.fixed .iconImg {position:absolute; top:50%; right:5%; transform: translateY(-50%); width:2vw;}
.mainWrap .mainMovie {position:absolute; top: 22%; left: 23.5%; width: 53%; border-radius: 25px;}
.mainWrap .makingMovie {position:absolute; top:23%; left:0; width:100%;}
.mainWrap .gifImg {position:absolute; left:11%; width:78%;}
.mainWrap .gifImg.gif01 {top:20.6%;}
.mainWrap .gifImg.gif02 {top:48.9%;}
.mainWrap .gifImg.gif03 {top:78%;}
.mainWrap .pageImg.feedbackImg {display:none;}
.mainWrap .pageImg.feedbackImg.on {display:block;}
.mainWrap .feedbackBtnBox {display:flex;}
.mainWrap .feedbackBtn {width:calc(100% / 3); height:23vw; background:transparent no-repeat 0 0/cover;}
.mainWrap .feedbackBtn.btn01 {background-image: url('/smciImages/front/main/pageImg10_btn_off.jpg');}
.mainWrap .feedbackBtn.btn01.on {background-image: url('/smciImages/front/main/pageImg10_btn_on.jpg');}
.mainWrap .feedbackBtn.btn02 {background-image: url('/smciImages/front/main/pageImg11_btn_off.jpg');}
.mainWrap .feedbackBtn.btn02.on {background-image: url('/smciImages/front/main/pageImg11_btn_on.jpg');}
.mainWrap .feedbackBtn.btn03 {background-image: url('/smciImages/front/main/pageImg12_btn_off.jpg');}
.mainWrap .feedbackBtn.btn03.on {background-image: url('/smciImages/front/main/pageImg12_btn_on.jpg');}
.mainWrap .reviewSlideWrap {position:absolute; top:32%; left:8%; width:84%;}
.mainWrap .slideBtn {position: absolute; top: 53%; width: 15%; z-index: 1;}
.mainWrap .slideBtn.prev {left:0;}
.mainWrap .slideBtn.next {right:0;}
.mainWrap .qnaListBox {padding:0 6%;}
.mainWrap .qnaListBox .qnaListItem {border-bottom:1px solid #ccc;}
.mainWrap .qnaListBox .qnaListItem:last-child {border-bottom:0;}
.mainWrap .qnaListBox .qnaListItem .titleText {display: flex; justify-content: space-between; padding:5% 0;}
.mainWrap .qnaListBox .qnaListItem .titleText .text {width:85%; font-family:'BeVietnamPro-Bold'; font-size:var(--font-2dep);	word-break:break-all;}
.mainWrap .qnaListBox .qnaListItem .titleText .toggleImg {display:inline-block; width:4vw; height:4vw;	margin-top: 1.5vw; background:transparent url('/smciImages/front/main/icon_toggle_down.png') no-repeat 0 50%;}
.mainWrap .qnaListBox .qnaListItem .titleText .toggleImg.active {background-image:url('/smciImages/front/main/icon_toggle_up.png');}
.mainWrap .qnaListBox .qnaListItem .contText {display:none; padding:0 0 5%; font-family:'BeVietnamPro-Regular'; font-size:var(--font-3dep); color:#676767;}

/* PC 해상도 대응 */
@media screen and (min-width:640px) {

    /* 공통 관련 */
	.pcLayout .mainWrap .feedbackBtn:hover:not(.on),
	.pcLayout .mainWrap .qnaListBox .qnaListItem .titleText:hover {opacity:0.7; transition:0.3s;}
    
    /* 레이아웃 */
	.pcLayout .mainWrap {margin-top:100px;}
	.pcLayout .mainWrap .feedbackBtn {height:150px;}
	.pcLayout .mainWrap .qnaListBox {padding:0 4%;}
	.pcLayout .mainWrap .qnaListBox .qnaListItem .titleText .toggleImg {width:20px; height:20px; margin-top:5px;}

	.pcLayout .mainWrap .appDownloadBtn {display:none;}
	/* .pcLayout .mainWrap .appDownloadBtn.fixed {left:50%; bottom:10%; transform: translateX(-50%); width:520px; padding:1%;}
	.pcLayout .mainWrap .appDownloadBtn.fixed .iconImg {width:10px;} */

	/* GNB 개발 전 예외처리 */
	.pcLayout .wrapComm {margin-top:0;}
	
}



/* [베트남 PG 심사용] - 전자 상거래 심사용 */
.mainWrap .productBox {
	padding: 4% 8%;
}
.mainWrap .productBox:last-child {
	margin-bottom: 8%;
}
.mainWrap .productBox .title {
    font-family: 'BeVietnamPro-Bold';
    font-size: var(--font-1dep);
    word-break: break-all;
	text-align: center;
	margin: 8% 0;
}
.mainWrap .productBox .content {
	display: flex;
	justify-content : space-between;
	margin-top: 4%;
}
.mainWrap .productBox .content .productItem {
	width: 46%;
	height: 46%;
	text-align: center;
	cursor: pointer;
}
.mainWrap .productBox .content .productItem .productImg{
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    background-color: #f6f7f9;
    display: flex;
    justify-content: center;
    align-items: center;
	border-radius: 5px;
}
.mainWrap .productBox .content .productItem .productImg img {
	width: 80%;
	height: auto;
	margin: auto;
}	
.mainWrap .productBox .content .productItem .productName{
	margin-top: 20px;
	font-family: 'BeVietnamPro-Bold';
    font-size: var(--font-3dep);

}
.mainWrap .productBox .content .productItem .productInfo{
	margin-top: 10px;
	font-family: 'BeVietnamPro-Regular';
    font-size: var(--font-4dep);
    color: #676767;
}
.mainWrap .productBox .content .productItem .productPrice{
	margin-top: 10px;
	font-family: 'BeVietnamPro-Bold';
    font-size: var(--font-3dep);
	color: #ff1c26;
}