/*
+----------------------------------------------------------------------+
| Copyright (c) 2010-2018 STUDYMAX. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2018-10-16
| 파일설명 : 무료맛보기 - 리뉴얼 CI CSS
+----------------------------------------------------------------------+
| 작업자 : 박소율
| 수정이력
| 20190905 무료맛보기_쿠폰팝업 개선 관련 CSS 수정 by 우현진
| 20200413 vueJs용 무료맛보기 view페이지 by 우현진   
| 20200615 무료맛보기 코스선택리스트 개편(피쳐드) by 우현진
| 20200622 커리큘럼 코스 위치, 띄어쓰기 수정 by 최진영 
| 20200703 오른쪽버튼 단일 경우 추가  by 우현진
| 20200813 무료맛보기 측면배너 추가 by 최진영
| 20201117 PC 무료맛보기 페이지 개선 - 두근톡 추가(test 페이지는 금일 수정한 부분이 인라인 스타일로 작성되어있어 따로 수정해야함) by 최진영 
| 20201214 두근톡 플로팅배너 추가 by 최진영  
| 20201223 학습툴 실행 전 배경로고 추가 by 우현진
| 20210311 AB테스트용 클래스 추가 by 최진영
| 20211013 3초해영 관련 작업 추가 by 최진영
| 20260316 최하단 배너 추가 by 최진영
+----------------------------------------------------------------------+
*/
.mgTop_6{margin-top: 6px;}
.mgTop_14{margin-top: 14px;}
.overYHidden{overflow-y: hidden;}
.darkWindow2 {display: block;position: fixed;border: 0;left: 0;top: 0;right: 0; bottom: 0;opacity: 0.5;background-color: #000;}

#wrap{padding:0 0 40px; background:#fff;}
.selectcourseWrap{padding-bottom: 65px; }

/* 헤더 관련 */
.frSelectGnbWrap {position:relative;}
.frSelectGnbWrap .homeBtn {position:absolute;}

/* 타이틀 및 설명 */
#selectcourse .courseTable .listDesc {text-align: left; padding-right: 22px;}
#selectcourse .courseTable .weekIcon{display: inline}

#selectcourse .courseTable .courseTitle{font-size:35px; color:#333; font-family: NotoSansKR-Bold,'Malgun Gothic', dotum, sans-serif; letter-spacing: -1px; position: relative; top: -6px;}
#selectcourse .courseTable .courseTitle .courseWeek{display: inline-block;width: auto;padding: 0 12px;height: 34px;background-color:#ffb13c;color: #fff;font-size: 17px;line-height: 34px;position: relative;top: -7px;
letter-spacing: -0.5px;margin-left: 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#selectcourse .courseTable .courseTitle .courseWeek .courseWeekArrow{position: absolute;top: 13px;left: -4px;display: inline-block;width: 4px;height: 7px;background:url('/smciImages/front/maxtool/courseWeek_arrow.png') left center no-repeat;}

#selectcourse .courseTable .courseMemoText{width: 473px; height: 30px; line-height: 29px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; color: #666666; padding-left: 9px;font-family: NotoSansKR-Light,'Malgun Gothic', dotum, sans-serif; margin-top: 2px;}


/* 버튼영역 */
#selectcourse .courseTable .listBtn{text-align: right; padding-right: 30px;}
#selectcourse .courseTable .listBtn .listBtnTable{width: 100%;}
#selectcourse .courseTable .listBtn .listBtnTable td.courseDifficulty { text-align:right; padding-bottom:6px; }
#selectcourse .courseTable .listBtn .listBtnTable td.cousrTrialBtn { text-align:right; padding-left:10px;}

#selectcourse .courseTable .listBtn .listBtnTable td .trialBTN{display: inline-block;  width: 224px; height: 47px; background-color: #ef3438; border: 1px solid #da2529; color: #fff; text-align: center; font-size: 20px;
line-height: 46px; font-family: NotoSansKR-Bold,'Malgun Gothic', dotum, sans-serif;}
#selectcourse .courseTable .listBtn .listBtnTable td .trialBtnArrow{display: inline-block; margin-top: 12px; margin-left: 3px; }
/* list End */


/* 하단 이미지 */
#selectcourse  .bottomImg{margin-left: -25px; margin-top: 20px; position: relative}
#selectcourse  .bottomImg:before{content:'';position: absolute; left: 0; right: -25px; top: 0; border-top: 10px solid #000}

/* float 해제 */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* 우측 날개배너 */
.quickBtn_top.timeBoard{margin-left:670px; position: absolute; top: -737px; }
.quickBtn_top .moreBtn {display:block;}
.quickBtn_top .imgBox {padding: 10px 0 8px; box-sizing: border-box;text-align:center; background:#fff;}

/*==================== Renew ====================*/

/*==== 리뉴얼 학습툴===*/
/*페이지*/
.toolList{text-align: center; margin-top: 10px;}
.toolList li{display: inline-block; margin: 0 10px;}
.trialBTN{display: inline-block;  width: 224px; height: 47px; background-color: #ef3438; border: 1px solid #da2529; color: #fff; text-align: center; font-size: 20px;
line-height: 46px; font-family: NotoSansKR-Bold,'Malgun Gothic', dotum, sans-serif;}
.trialBtnArrow{display: inline-block; margin-top: 12px; margin-left: 3px; }

/* 레이어 */
.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;} /* 레이어 Wrap */
.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;}

/*===== 개편=====*/
.topReNewWrap{background-color: #f7f6fa; margin-bottom:40px;}
.freeTrialTopBackimg{height: 210px; background: url('/smciImages/front/maxtool/selectCourseTrial/selectTrial_TopBg_2.jpg') no-repeat 50% 100%/140% 140%;  color:#fff ; text-align: center; }
.freeTrialTopText{position: relative;display: inline-block;top: 60px;}
.freeTrialTopText span{display: inline-block;font-size: 48px;color: #fff;font-family: NotoSansKR-Bold,'Malgun Gothic', dotum, sans-serif;position: relative;z-index: 2;letter-spacing: -3px;} 
.freeTrialTopText .redLine:before{content:'';width: 100%;position: absolute;bottom: 3px;right: 0;height: 15px;background-color: #ffa800;z-index: 1;}
.bestCourseListWrap{position:relative; width: 1225px; margin:0 auto; padding:7px 7px 40px; box-sizing:border-box;}
.bestCourseListWrap .bestCourseTitle{text-align: left;font-size: 24px;color: #1e1e1e;letter-spacing:-0.5px;font-family: NotoSansKR-Bold,'Malgun Gothic', dotum, sans-serif;line-height: 30px; padding:27px 0;}
.bestCourseList{width: 100%; margin: 0 auto; text-align: center; font-size: 0;}
.bestCourseList li{display: inline-block; margin-left:7px; border: 1px solid #e0e0e0; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
.bestCourseList li:first-child{margin-left: 0;}

/* 회원가입 팝업 START */
#layerMask{position:fixed;overflow-y:hidden;top:0;left:0;right: 0; bottom:0; background: rgba(0,0,0,0.5); z-index:99; display: none; }
.memberLayer {display: none;}
.memberLayer .bgLayerWrap{width: 584px;height: 729px;background: url(/images/layer/popup_couponJoin_back.png) no-repeat 0 0;opacity: 1; position: fixed; left: 50%; top: 50%; margin: -315px 0 0 -292px;z-index:99}
.memberLayer .bgLayerWrap.reNewPop{background: none; width: 515px; height: 500px; margin-left: -257px; margin-top: -260px;}
.memberLayer .layerTitleArea{ margin: 18px 20px 10px; position: relative;}
.memberLayer .layerCloseBtn{position: absolute; top: -20px; right: -20px;}
.memberLayer  .layerWrap{padding: 0 20px;}
.memberLayer .couponInfo{position: absolute;left: 254px;top: 356px;}
.memberLayer .formInfo{position: absolute; left: 238px; top: 464px;}
.memberLayer .couponInfoTypeB{position: absolute;left: 277px;top: 363px;}
.memberLayer .formInfoTypeB{position: absolute; left: 238px; top: 464px;}

/* 무료맛보기 코스 리스트 개편 */
.tabBtnBoxWrap.fixed {position:fixed; top:0; left:0; width:100%; z-index:1;}
.tabBtnBox {width:1211px; margin:0 auto;}
.tabBtnBox:after {content:''; display:block; clear:both;}
.tabBtnBox .courseTabBtn {float:left; width:20%; height:65px; padding:0; border:1px solid #e1e1e9; border-bottom:1px solid #000;  font-family:'NotoSansKR-Medium'; font-size:22px; color:#999; background:#f1f1f1; cursor:pointer;} 
.tabBtnBox .courseTabBtn:focus {outline:0;}
.tabBtnBox .courseTabBtn.on {color:#000; background:#fff; border-color:#000; border-bottom-color:transparent;}
.selectContents {width:1211px;}
.courseCntBox {padding: 35px 25px 15px;box-sizing:border-box; border-bottom:2px solid #999;}
.courseCntBox:after {content:''; display:block; clear:both;}
.courseCntBox .cntBox {float:left; height:46px; font-family:'NotoSansKR-Medium'; font-size:24px; line-height:44px;}
.courseCntBox .courseCnt {font-family:'NotoSansKR-Bold'; font-size:24px; color:#dc4a4e;}
.courseListBox {padding:0 25px; box-sizing:border-box;}
.courseList {width:100%; table-layout: fixed;}
.courseList td {height:190px; letter-spacing:-0.5px; border-bottom:1px solid #ccc;}
.thumbImgTd {position:relative; text-align:left;}
.thumbImgTd .flagImg {position:absolute; top:20px; left:0;}
.thumbImgTd .thumbImg {width:258px; height:147px; border:1px solid #dedede;}
.courseTextTd .courseGubunIcon {position: relative;top: -5px;display:inline-block;margin-right:8px;padding: 3px 4px;box-sizing:border-box;font-family:'NotoSansKR-Medium';font-size:15px;border:1px solid transparent;border-radius:3px;}
.courseTextTd .courseGubunIcon.green {color:#97C814; border-color:#97C814;}
.courseTextTd .courseGubunIcon.yellow {color:#F38F09; border-color:#F38F09;}
.courseTextTd .courseGubunIcon.red {color:#E84747; border-color:#E84747;}
.courseTextTd .courseGubunIcon.blue {color:#4787E8; border-color:#4787E8;}
.courseTextTd .name {display: inline-block;font-family:'NotoSansKR-Medium';font-size:30px;line-height: 1;}
.courseTextTd .descText {font-family:'NotoSansKR-Demilight';font-size:18px;line-height:1;margin-top: 8px;}
.courseTextTd .iconBox {margin-top:20px;}
.courseTextTd .iconBox > span {display: inline-block;margin-left: 10px;font-family:'NotoSansKR-Demilight';font-size:18px;line-height:1;}
.courseTextTd .iconBox .marginLeft_15 {margin-left: 25px;}
.courseTextTd .iconBox .difficulty_0 {color:#ea9500;}
.courseTextTd .iconBox .difficulty_1 {color:#ff6700;}
.courseTextTd .iconBox .difficulty_2 {color:#5aab1e;}
.courseTextTd .iconBox .difficulty_3 {color:#8b4bf6;}
.courseTextTd .iconBox .difficulty_4 {color:#2d6ae6;}
.btnTd {text-align:right;}
.btnTd .trialBtn {width:244px; height:50px; font-family:'NotoSansKR-Medium'; font-size:20px; color:#fff; background:#e84747; border-radius:3px; cursor:pointer;}
.btnTd .trialBtn .btnArrowImg {position: relative; top: -2px; margin-left: 10px; vertical-align: middle;}

/* 두근톡 플로팅 배너 추가 */
.dktFloatingBanner {position:absolute; top: 32px; right: -296px; animation:dktFloatingBanner 0.5s infinite alternate;}
@keyframes dktFloatingBanner {
    0% {
         right:-296px;
    }
    100% {
         right:-291px;
    }
}

/* 3초해영 관련 */
.courseListWrap.ost {padding:0;}
.courseListWrap.ost .courseList {display:none;}
.courseListWrap.ost .courseCntBox {display:none;}
.courseListWrap.ost .courseListBox {padding:0;}
.courseListWrap.ost .ostBox {display:block;}
.courseListWrap .ostBox {display:none; margin-top:98px;}
.courseListWrap .ostBox .ostTabImg {display:block; width:100%;}

/* 최상단 배너 관련 */
.bottomBannerWrap {height:100px; overflow:hidden;}
.bottomBannerWrap .bottomBannerImg {display:block; width:1240px; margin:0 auto;}
.bottomBannerWrap .swiper-slide {text-align:center; cursor:pointer; transition: all 0.3s ease;}
.bottomBannerWrap .swiper-slide:hover {opacity:0.8;}
.bottomBannerWrap .swiper-slide.bgBlue {background:linear-gradient(to right, #396df5 50%, #52deed 50% 100%);}
.bottomBannerWrap .swiper-slide.bgOrange {background: #FA4D39;}
.bottomBannerWrap .swiper-slide.bgBlueGradient {background:linear-gradient(to right, #00c0ff 50%, #8bd9ff 50% 100%);}
.bottomBannerWrap .swiper-slide.bgDarkOrange {background:#bf2819;}
.bottomBannerWrap .swiper-slide.bgNavy {background:#18235D;}