/*
+----------------------------------------------------------------------+
| Copyright (c) STUDYMAX.  co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2023-01-09
| 파일설명 : PC] 스피킹맥스 피플 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영
+----------------------------------------------------------------------+
| 수정이력
+----------------------------------------------------------------------+
*/



/* ========================================================================
	UI 관련 클래스화
======================================================================== */
.flex {display: flex;}
.flex.col {flex-direction: column;}
.flex.ai_cen {align-items:center;}
.flex.jc_cen {justify-content: center;}
.flex.jc_sb {justify-content: space-between;}
.flex.as_fs {align-self: flex-start;}
.ta_jus {text-align: justify;}
.mgLeft_40{margin-left: 40px;}



/* ========================================================================
	공통
======================================================================== */

/* 조회수 디자인 */
.likeCount{padding:0px 14px 0px 14px; color:#ff7c6f; letter-spacing:-0.6px; border: 1px solid white; border-radius: 30px; background-color:white;}
.likeCount img{vertical-align:initial;}

/* 상단, 하단 */
.maxPeopleWrap .maxPeopleSec.top {padding: 100px 0;}
.maxPeopleWrap .maxPeopleSec.bot {margin: 100px 0;}
.maxPeopleWrap .maxPeopleSec.mgTop_50 {margin-top:50px;}

/* 섹션 감싸는 레이아웃 Box */
.maxPeopleWrap .maxPeopleSec .sectionInnerBox {width:1100px; margin:0 auto;}

/* 타이틀 디자인 */
.maxPeopleWrap .title {text-align:center;}
.maxPeopleWrap .title * {font-family:'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; font-weight:bold; font-size:35px;}
.maxPeopleWrap .title.type1 {margin-bottom:100px;}
.maxPeopleWrap .title.type1 .red {color:#f04f3c; letter-spacing:-2px;}
.maxPeopleWrap .title.type1 .main {font-size:60px; color:#212121; letter-spacing:-0.5px;}
.maxPeopleWrap .title.type2 {margin-bottom:30px;}
.maxPeopleWrap .title.type2 .main{letter-spacing:-0.5px;}
.maxPeopleWrap .title.type3 .main {letter-spacing: -0.5px; text-align:left;}

/* 작은 카드 형태 디자인 */
.maxPeopleWrap .smallCardsBox {flex-wrap: wrap; margin-top:50px;}
.maxPeopleWrap .smallCardsBox .smallCard {display:inline-flex; width:calc(23% + 7px);; height:330px; margin-right:20px; padding:20px; padding-top:23px; box-sizing:border-box; border-radius:8px; box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; cursor:pointer; transition:0.3s all;}
.maxPeopleWrap .smallCardsBox .smallCard:hover {transform:translateY(-10px);}
.maxPeopleWrap .smallCardsBox .smallCard:nth-child(4n) {margin-right:0;}
.maxPeopleWrap .smallCardsBox .smallCard:nth-child(n+5) {margin-top:25px;}
.maxPeopleWrap .smallCardsBox .smallCard .smallProfile {margin:0 auto; background-color: #dcdcdc; border-radius: 50%; width:103px; height:103px; background-size: cover; background-repeat: no-repeat;}
.maxPeopleWrap .smallCardsBox .smallCard .nameText {margin-top:7px; font:bold 23px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.9px;}
.maxPeopleWrap .smallCardsBox .smallCard .locaText {height:44px; margin:2px; color:#a4a4a4; font:normal 15px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.9px;}
.maxPeopleWrap .smallCardsBox .smallCard .expText {width:200px; height:70px; margin:0px auto; color:#626262; font:normal 15px 'NotoSansKR-Regular', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px;}
.maxPeopleWrap .smallCardsBox .smallCard .likeCount {font:normal 15px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif;}
.maxPeopleWrap .smallCardsBox .smallCard .likeCount img {width:18px; height: 12px;}



/* ========================================================================
	스피킹맥스 피플 리스트 페이지 CSS
======================================================================== */

/* 화제의 맥스 피플(원어민 TOP 3) */
.maxPeopleWrap .largeCard {width:370px; height:580px; cursor: pointer;}
.maxPeopleWrap .largeCard .largeProfile {width:250px; height:250px; border-radius:50%; background-color: #dcdcdc; background-size: cover; background-repeat: no-repeat;}
.maxPeopleWrap .largeCard .nameText {font:bold 35px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px;}
.maxPeopleWrap .largeCard .locaText {width:345px; height: 72px; color:#a4a4a4; font:normal 24px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px;}
.maxPeopleWrap .largeCard .expText {width:240px; height:100px; margin: 10px; color:#626262; font:normal 20px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px; vertical-align: middle;}
.maxPeopleWrap .largeCard .likeCount {font:normal 20px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif;}

/* 원어민 소개 - 원어민 수 */
.maxPeopleWrap  .nativeSpeakerCnt{margin-left:6px; font:bold 18px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px;}

/* 원어민 소개 - 검색조건 셀렉트박스 */
.maxPeopleWrap .select {margin-left:10px;}
.maxPeopleWrap .select:first-child {margin-left:0;}
.maxPeopleWrap .select.w_100 {width: 100px;}
.maxPeopleWrap .select.w_200 {width: 200px;}
.maxPeopleWrap .select select {
	width:100%;
	height:45px;
	border-radius: 5px;
	cursor: pointer;
	background-color: #f8f8f8;
	border: 1px solid #d3d3d3;
	padding-left: 10px;
	color:#a4a4a4;
}
.maxPeopleWrap .select option{color: #212121;}


/* ========================================================================
	스피킹맥스 피플 상세보기 페이지 CSS
======================================================================== */

/* 비디오 */
.maxPeopleWrap .video-js {margin:0 auto;}
.maxPeopleWrap .video-js .vjs-tech {cursor:pointer;}
:not(.vjs-has-started) .vjs-control-bar {display: flex;}

/* 이 인물은 누구? */
.maxPeopleWrap .peopleInfoCard{display:flex; flex-direction: column; justify-content: center; align-items: center; margin-top:50px;}
.maxPeopleWrap .peopleInfoCard {flex:1; border-radius:8px; padding:65px; width:965px; box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;}
.maxPeopleWrap .peopleInfoCard .smallProfile {width: 103px; height: 103px; background-color: #dcdcdc; border-radius: 50%; background-size: cover; background-repeat: no-repeat;}
.maxPeopleWrap .peopleInfoCard .nameText{color:#262628; font:bold 35px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px;}
.maxPeopleWrap .peopleInfoCard .locaText{margin-top:10px; color:#636363; font:normal 24px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px;}
.maxPeopleWrap .peopleInfoCard .expText{margin-top:40px; color:#4d4d4d; font: 20px 'NotoSansKR-Regular', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px; line-height: 180%;}
.maxPeopleWrap .peopleInfoCard .engText{margin-top: 30px; color:#a8a8a8; font:normal 20px 'NotoSansKR-Regular', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px; line-height: 180%;}

/* 연관된 맥스 피플 */
.maxPeopleWrap .relatedPeopleBox {margin-top:50px;}
.maxPeopleWrap .relatedPeopleBox .smallCardsBox {margin-top:50px;}

/* 코스 바로가기 버튼 */
.maxPeopleWrap .buttonBox {margin:70px 0 100px 0; text-align:center;}
.maxPeopleWrap .buttonBox .btn{border:1px solid lightgray; border-radius:8px; text-align:center; cursor:pointer; width:300px; height:60px; margin:10px; color:#262628; background-color:white; font:normal 20px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px;}
.maxPeopleWrap .buttonBox .btn.red{border:1px solid #ff4444; background-color:#ff4444; color:white; font:normal 20px 'NotoSansKR-Medium', 'Malgun Gothic', 'dotum', sans-serif; letter-spacing:-0.5px;}