/*
 +----------------------------------------------------------------------+
 | Copyright (c) STUDYMAX.  co. Ltd
 +----------------------------------------------------------------------+
 | 작업일 : 2017-11-03
 | 파일설명 : 모바일CI 코스리스트 CSS
 +----------------------------------------------------------------------+
 | 작업자 : 박소율
 +----------------------------------------------------------------------+
 | 수정이력
 | 20171206 images 경로 변경 by bsh
 | 20200117 페이지 리뉴얼 by 김승미 
 | 20200409 MO 스피킹맥스 코스소개 페이지 개선 by 우현진 
 +----------------------------------------------------------------------+
*/

@charset "utf-8";

/* ------------------------------------------------------------------------------------ */
/* version 2 courseList css ----------------------------------------------------------- */
/* ------------------------------------------------------------------------------------ */

/* courseList basic font setting - notosans regular------------------------------------ */
.courseContent *{font-family: 'NotoSansKR-Regular', 'Tahoma' , 'Dotum';}


/* basic setting ---------------------------------------------------------------------- */
.courseBadge{padding: 0.35vw 1.667vw  0.466vw; border: 0.278vw solid #111111; border-radius: 4.167vw; margin-right: 0.2vw; font-family: 'NotoSansKR-Bold'; font-size: 2.5vw; line-height: 2.5vw;}
.courseBadge.basis{color: #f8b500; border-color: #f8b500;}
.courseBadge.begin{color: #f87500; border-color: #f87500;}
.courseBadge.beginMiddle{color: #16a085; border-color: #16a085;}
.courseBadge.middle{color: #8e44ad; border-color: #8e44ad;}
.courseBadge.high{color: #187fc3; border-color: #187fc3;}

/* courseBanner ----------------------------------------------------------------------- */
.courseBanner{position: relative;}
.courseBanner>img{width: 100%;}
.courseBanner .bannerBox{position: absolute; left: 0; top: 35.469vw; width: 100%; display: flex; width: 100%; height: 26.563vw;}
.bannerBox .courseTop{flex: 1;}
.courseTop .courseTopImg{width: 8.281vw; margin: 0 auto;}
.courseTop .courseTopImg img{width: 100%;}
.courseTop .countText{text-align: center; font-family: 'Spoqa Han Sans'; color: #ff7a7a; font-size: 5vw; line-height: 5vw; letter-spacing: -0.05em;}
.courseTop .countText .countNumTxt{font-weight: bold; font-size: 7.188vw;}
.courseTop .topText{margin-top: 2.5vw; text-align: center; color: #bbbbbb; font-size: 3.125vw; line-height: 3.75vw;}

/* course List ------------------------------------------------------------------------- */
.courseListBox{display: flex; flex-wrap: wrap; justify-content: space-between; width: 93.7%; padding: 4.844vw 3.15%;}
.courseListBox .courseList{position: relative; width: 48.5%; margin-bottom: 3.125vw; box-shadow: 0px 0px 3.125vw rgba(200,200,200,0.3);}
.courseList .courseBox{width: 100%;}
.courseList .courseImgBox{position: relative; width: 100%; overflow: hidden; border-top-left-radius: 1.875vw; border-top-right-radius: 1.875vw; line-height: 0;}
.courseList .courseImgBox img{width: 100%;}
.courseList .courseImgBox .peopleBox{position: absolute; bottom: 2vw; right: 2vw; width: 11.563vw;}

.courseList .courseInfoBox{box-sizing: border-box; padding: 3.125vw 0; padding-left: 1.875vw; border: 1px solid #e5e5e5; border-top: 0; border-bottom-left-radius: 1.875vw; border-bottom-right-radius: 1.875vw;}
.courseList .courseTit{font-family: 'NotoSansKR-Medium'; color: #242424; font-size: 4.375vw; line-height: 4.375vw; letter-spacing: -0.05em;}
.courseList .courseInfo{margin-top: 1.563vw; margin-bottom: 2.813vw; color: #6d6d6d; font-size: 3.438vw; line-height: 4.375vw; letter-spacing: -0.025em;}

.courseList .courseState{display: none; position: absolute; z-index: 10; top: 1.563vw; left: -0.938vw;}
.courseList .courseState::after{display: block; content:''; width: 0; height: 0; border-top: 0.938vw solid #7b1d0b; border-left: 0.938vw solid transparent;}
.courseList .courseState .stateText{display: none; border-top-right-radius: 0.625vw; border-bottom-right-radius: 0.625vw; width: 10.313vw; height: 5.938vw; font-family: 'Spoqa Han Sans'; font-weight: bold; text-align: center; font-size: 2.5vw; line-height: 5.938vw;}

.courseList .courseState.best{display: block;}
.courseList .courseState.best::after{border-top: 0.938vw solid #7b1d0b;}
.courseList .courseState.best .stateText.best{display: block; background-color: #ff5f40; color: #ffffff;}

.courseList .courseState.new{display: block;}
.courseList .courseState.new::after{border-top: 0.938vw solid #80750e;}
.courseList .courseState.new .stateText.new{display: block; background-color: #fae200; color: #181818;}


/*코스소개 상단 영상*/
.contentsWrap{height: auto;}
.contentsWrap .mainBoxMovie {position: relative;width: 93.7%;height: 100%;overflow:hidden;margin: 6% 3.15% 0;}
.contentsWrap .mainBoxMovie video{width: 100%; height: auto; -webkit-border-radius: 1.875vw;-moz-border-radius: 1.875vw;border-radius: 1.875vw;}