/*
+----------------------------------------------------------------------+
| Copyright (c) 2010-2018 STUDYMAX. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2018-08-08
| 파일설명 : 코스 소개페이지 공통 CSS
+----------------------------------------------------------------------+
| 작업자 : 박소율
+----------------------------------------------------------------------+
| 수정이력
| 20181129 서브타이들 css 분리 by 박소율
| 20200406 코스개선 css 추가 by 우현진
| 20200618 신규코스(왕초보여행첫걸음과정) 오픈 by 최진영
| 20201109 사이트영상 플레이어 교체 by 최진영
| 20201113 PC] 코스소개 무료맛보기 강화 - 요약영역 추가 by 최진영
| 20201124 팝업 위치 수정 by 최진영
| 20201223 학습툴 실행 전 배경로고 추가 by 우현진
| 20210106 수강후기 슬라이드 추가 by 최진영
| 20210712 쏘카 배너 추가 by 최진영 
| 20210719 쏘카 배너 표출 수정 by 최진영
| 20210914 쏘카 배너 css 제거 by 최진영
+----------------------------------------------------------------------+
*/

@charset "utf-8";
/* 코스소개 공통 CSS START */

/* 코스소개 공통 class */
.mgBottom_13{margin-bottom: 13px;} /* 컨텐츠 상단 페이지 설명 이미지 간격조정 */
.mgBottom_100{margin-bottom: 100px;} /* 컨텐츠 하단 간격조정 totalCourse, courseGuide  */
.mgBottom_40{margin-bottom: 40px;} /* 컨텐츠 하단 간격조정  course19, course26,course27, course01, course02, course03, course21 , course16, course18, course05, course07, course08, course10, course13 */
.mgTop_16{margin-top:16px;}
.dispBlock {display:block;}
.bgColor_f6f7f9 {background-color:#f6f7f9;}
.top_790 {top:790px;}
.top_890 {top:890px;}
.top_920 {top:920px;}
.top_1370 {top:1370px;}
.top_1420 {top:1420px;}
.top_1460 {top:1460px;}

/* 코스소개 비디오 위치 */
.movieWrapper{cursor: pointer;}
.courseMovie1Position{position:absolute;top:175px;left:50px;}
.courseMovie2Position{position:absolute;top:290px;left:75px;}
.courseMovieBorder{border:2px solid #818584}
.courseMovieBorder1px{border:1px solid #818584}
.courseMovieBorder2{border:2px solid #e0d4d4}

.movieCourse19{top:315px; left: 50%; margin-left: -282px; min-width: 560px; min-height: 315px;}
.movieCourse35{top:336px; left: 50%; margin-left: -287px; min-width: 564px; min-height: 317px;}
.courseBigMoviePosition{position:absolute;top:0px;left:8px;}


#courseMovBoxBG{ position:relative;}
#courseMovBox{position: absolute;top: 40px;left: 70px;border:2px solid #7f7f7f;}

/* 코스상세소개 하단 배너 */
.courBtnWrap{width:707px;margin:0 auto;height:100px;}
.courBtnWrap ul {height: auto; overflow: hidden;}
.courBtnWrap ul li{float:left;margin-right:6px;}


.courseBtnBox{position:relative;}
.courseBtnBox .courseBtnWrap{position:absolute;top:130px;left:17px;width:707px;margin:0 auto;height:100px;}
.courseBtnBox .courseBtnWrap ul {height: auto; overflow: hidden;}
.courseBtnBox .courseBtnWrap ul li{float:left;margin-right:4px;}

/* 우측배너 */
.courseRightBanner{position: fixed;top: 400px;left:50%; margin-left: -731px;}
.courseRightBanner.stop{position: absolute;} 

/* 레이어 영상 */
.layerVideoWrap{position: fixed; left: 50%; top: 50%; width:762px; height:478px; margin-left:-385px; margin-top: -239px;background-color:#222326; border-radius: 10px; display: none; z-index: 101;}
.layerVideoWrap.on{display: block}
.layerVideoWrap .layerTitle{margin-top: 18px; margin-left: 20px;}
.layerVideoWrap .layerCloseBtn{cursor:pointer; position: absolute; right: 28px; top: 18px; }
.layerVideoWrap .layerContentsArea{margin-top:20px; margin-left: 20px;}

/*코스소개 상단 영상*/
.contentsWrap{height: 440px;}
.contentsWrap .mainBoxMovie {position: relative; min-width:707px; width: 100%; height: 100%; overflow:hidden;}
.contentsWrap .mainBoxMovie video{width: 100%; height: 398px;}
.movieAreaWrap{min-width:880px; min-height:495px;}
.movieWrapper1{cursor:pointer; border: 2px solid #cdcdcd; }

.imgContainer {margin-bottom:45px;}

/* 영상 썸네일에 border */
.imgBorder {border:2px solid #CCCCCE;}

/* 코스소개 요약 영역 */
.crsInfoSummaryBox {margin-top:50px; padding:30px; box-sizing:border-box; background:#f6f7fb; border-top:2px solid #959595;}
.crsInfoSummaryBox * {letter-spacing:-1px;}
.crsInfoSummaryBox .innerBox {padding:25px 0; box-sizing:border-box; border:1px solid #e8e8e8; border-radius:3px; background:#fff;}
.crsInfoSummaryBox .innerBox:after {content:''; display:block; clear:both;}
.crsInfoSummaryBox .summaryItem {position:relative; float:left; width:25%; height:150px; padding:0 25px; box-sizing:border-box; text-align:left;}
.crsInfoSummaryBox .summaryItem.borderRight:after {content:''; position:absolute; top:5px; right:0; width:1px; height:140px; background:#ccc;}
.crsInfoSummaryBox .summaryItem .titleText {font-family:'NotoSansKR-Medium'; font-size:16px; color:#999;}
.crsInfoSummaryBox .summaryItem .rightTopImg {position:absolute; top:0; right:25px;}
.crsInfoSummaryBox .summaryItem .contentsText > span {display:inline-block; line-height:1;}
.crsInfoSummaryBox .summaryItem .contentsText .bigText {margin-top:15px; font-family:'NotoSansKR-Medium'; font-size:43px;}
.crsInfoSummaryBox .summaryItem .contentsText .smallText {margin-top:3px; font-family:'NotoSansKR-Regular'; font-size:21px;}
.crsInfoSummaryBox .summaryItem .subContentsText {font-family:'NotoSansKR-Regular'; font-size:16px; color:#666;}
.crsInfoSummaryBox .summaryItem .rightBottomImg {position:absolute; bottom:0; right:25px;}
.crsInfoSummaryBox .summaryItem .bottomBtn {position:absolute; bottom:0; left:50%; display:block; width:150px; height:30px; margin-left:-75px; line-height:30px; font-family:'NotoSansKR-Medium'; font-size:14px; color:#fff; text-align:center; border-radius:3px; background:#000;}
.crsInfoSummaryBox .summaryItem .bottomBtn img {position: relative; top: -1px; vertical-align: middle; margin-left: 5px;}

/* 학습툴 레이어 */
.ftLayerArea{display: none;  width: 1280px; height: 720px; background-color: rgba(0,0,0,0.65); position: fixed; top: 47%; left: 50%; margin: -360px 0 0 -660px; padding: 20px; z-index: 101;} 
.ftContentWrap{position: relative; height: inherit}
.ftCont{height: inherit; background:#fff url('/smciImages/front/common/loading_max.png') 463px 208px no-repeat;overflow: hidden; } /* 레이어 컨텐츠 영역 */
.ftContentWrap .close {position: absolute; bottom: -53px; right: -24px;}

/*=== 수강후기 ===*/
/* iFrame */
.studyReviewWrap {position:absolute; left:50%; width:740px; height:800px; margin-left:-370px; border-top:2px solid #000; border-bottom:1px solid #dbdbdb;}
/* iFrame 내부 */
.studyReview {width:722px; margin:0 auto;}
.studyReviewItem {position:relative; height:150px; padding:20px; box-sizing:border-box; border-bottom:1px solid #dbdbdb; background:#f6f7f9; letter-spacing:-0.6px;}
.studyReviewItem:after {content:''; display:block; clear:both;}
.studyReviewItem:last-child {border-bottom:0;}
.studyReviewItem .thumbImgBox {float:left;}
.studyReviewItem .thumbImg {width:90px; height:90px; border:1px solid #ccc;}
.studyReviewItem .textBox {float:left; width:570px; margin-left:20px; text-align:left;}
.studyReviewItem .idArea .lv {display:inline-block; padding:0 5px; box-sizing:border-box; font-family:'NotoSansKR-Regular'; font-size:10px; color:#fff; border-radius:3px;}
.studyReviewItem .idArea .lv.gray {background:#B7B7B7;}
.studyReviewItem .idArea .lv.yellow {background:#EFC555;}
.studyReviewItem .idArea .lv.orange {background:#F3A75E}
.studyReviewItem .idArea .lv.red {background:#E76D6D;}
.studyReviewItem .idArea .crownImg {position: relative; top: -1px; width:14px; vertical-align:middle;}
.studyReviewItem .idArea .crownLv {margin-left:2px; color:#FF0009; font-family:'NotoSansKR-Medium'; font-size:12px;}
.studyReviewItem .idArea .id {margin-left:10px; font-family:'NotoSansKR-Regular'; font-size:16px;}
.studyReviewItem .idArea .repCourse {display:inline-block; margin-left:10px; padding:3px 10px; box-sizing: border-box; font-family:'NotoSansKR-Regular'; font-size:15px; color:#333; background:#e1e1e1; border-radius: 15px;}
.studyReviewItem .dateArea {position:absolute; top:20px; right:20px; font-family:'NotoSansKR-Regular'; font-size:16px; color:#666;}
.studyReviewItem .reviewArea {width:570px; margin-top:6px; font-family:'NotoSansKR-Regular'; font-size:16px; color:#666; overflow:hidden; text-overflow:ellipsis;}

/*==================== 하단띠배너 ====================*/
.footerBanner{position: fixed; left: 0; right: 0; bottom: 0; height: 80px; text-align: center; background-color:#fc5437; z-index: 9; transition: all 0.5s ease-out;}
.footerBanner.footerBannerOff{bottom: -100%;}
.footerBanner .ftBannerCloseBtn{position: absolute; right: 10px; top: 10px;z-index: 1}

/* 타임보드 배너 */
.footerBanner.timeBoadBanner{background-color:#de1e27}
.timeBoadBanner .bannerTimerPos{position: absolute;left: 160px;top: 7px; width: 180px;}
.timeBoadBanner .footerLandingImg{position: absolute; left: -113px; top: -29px;}
.timeBoadBanner .bannerImg{display: inline-block; margin-left: 65px;}

/*데이특가용 수정*/
.timeBoadBanner #bannerDayTimer.bannerTimerPos{width: 185px;top:18px;margin: 0;margin-left: 10px;}
.timeBoadBanner .flip-clock-wrapperBig ul{width: 20px !important; height: 36px !important;}
.timeBoadBanner .flip-clock-wrapperBig ul li a div{line-height: 32px !important;}
.timeBoadBanner .flip-clock-wrapperBig ul li a div div.inn{font-size: 24px !important;}