/*  
+----------------------------------------------------------------------+
| Copyright (c) 2010-2020 STUDYMAX. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2020-11-27
| 파일설명 : 두근톡 소개페이지 PC - CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영  
+----------------------------------------------------------------------+
| 수정이력     
| 20201211 무료맛보기 버튼 추가 및 슬라이더 IE 이슈 개선 by 최진영  
| 20201215 텍스트 애니메이션 추가, 영상 썸네일 교체, 커리큘럼 슬라이더 수정 by 최진영  
| 20201228 코드리뷰 개선(posiRelative 수정) by 최진영  
| 20210104 사이트 GNB 개선 by 최진영
| 20210331 TM 상담예약 팝업 버튼 추가로 인한 z-index 조절 by 최진영
| 20211013 3초해영 영향도 처리 by 최진영
| 20211203 bg슬라이드 이슈 수정 by 최진영
+----------------------------------------------------------------------+
*/

@charset "utf-8";
/* reset */
video:focus {outline:none;}

.mgLeft_3 {margin-left:3px;}
.mgTop_30{margin-top: 30px}
.bgColor_000000{background-color:#000000;}
.bgColor_ffffff{background-color:#ffffff;}

.zIndexWrap {position:relative; z-index:1;}

/* 메인영상 영역 */
.mainVideoWrap {position:relative; width:100%; height:47vw; background:#000;}
.mainVideo {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width:100%;}
.mainVideoText {position:fixed; top:50%; left:50%; margin:-67px 0 0 -272px;}
.mainVideoFilter {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.scrollDownImg {position: fixed; bottom: 60px; left: 50%; margin-left: -5px; animation:scrollDown 1.4s infinite alternate;}
@keyframes scrollDown {
  0% {
      bottom:60px;
  }
  100% {
      bottom:40px;
  }
}

/* ====== 검은 배경 영역 ====== */
/* 두근톡 영상 */
.textAnimationBox {height:939px; padding-top:150px;}
.textAnimationBox .botText {margin-top:30px;}
.dktVideo {position: absolute; top: 320px; left:50%; margin-left:-525px; cursor:pointer;}

/* 1인칭 영상 영역 */
.firstPersonViewVideoWrap {position:relative; display:inline-block;}
.firstPersonViewVideoBox {position:absolute; top:0; right:0; width:480px; height:270px;}
.firstPersonViewVideo {width:100%; height:100%;}

/* 마우스 오버 시 영상 재생되는 영역 */
.hoverPlayMovieWrap {position:relative; display:inline-block;}
.hoverPlayMovieBox {position:absolute; top:0; left:0;}
.hoverPlayMovieBoxInner:after {content:''; display:block; clear:both;}
.hoverPlayMovieItem {position:relative; display:inline-block; cursor:pointer;}
.hoverPlayMovieItem.left {float:left;}
.hoverPlayMovieItem.right {float:right;}
.hoverPlayMovieThumb {width:240px; height:270px;}
.hoverPlayMovie {display:none; width:240px; height:270px;}
.mouseOverTextBox {position:relative; display:block;}
.mouseOverTextImg {margin-top:10px; animation:mouseOver 1s infinite alternate;}
@keyframes mouseOver {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}

/* 슬라이드 영역 */
.specSlideWrap {position:relative; display:inline-block;}
.specSlide {position:absolute; top:0; right:0; width:480px; height:350px;}
.specSlide .swiper-slide img {cursor:grab;}
.specSlide .swiper-slide .text {margin-top:20px; color:#fff; text-align:center; font-family:'NotoSansKR-Demilight'; font-size:14px; cursor:grab;}
.specSlide .slick-dots {margin-top:20px;}
.specSlide .slick-dots li {display:inline-block; margin:0 4px;}
.specSlide .slick-dots li button {width:6px; height:6px; padding:0; background:#000; border: 1px solid #fff; transition:all 0.3s; cursor:pointer; opacity:1; font-size:0; border-radius:100%;}
.specSlide .slick-dots li button:focus {outline:none;}
.specSlide .slick-dots li.slick-active button {width:20px; background:#fff; border-radius:30px;}

/* ====== 흰 배경 영역 ====== */
/* 흐르는 BG 슬라이드 영역*/
.bgSlide{height: 1030px; background-color:#282b2d}
.bgSlideWrap{overflow: hidden}
.bgSlideMove {position: relative; top: 0; left: 0; white-space: nowrap; }
.bgSlideMove + .bgSlideMove {margin-top: 14px;}
.bgSlideMove img {margin-right:15px;}

/* 커리큘럼 슬라이드 */
.curiSlide {width:100%; max-height:30vw; margin:0 auto; overflow:visible;}
.curiSlide .slideItem {opacity:0.4; transition:0.5s all;}
.curiSlide .slideItem .ftBtn,
.curiSlide .slideItem .movieClickArea {pointer-events: none;}
.curiSlide .slideItem.slick-active.slick-center {opacity:1;}
.curiSlide .slideItem.slick-active.slick-center .ftBtn,
.curiSlide .slideItem.slick-active.slick-center .movieClickArea {pointer-events: all;}
.curiSlide .slideItem .slideInner {margin:0 10%;}
.curiSlide .slideItem img {width:100%;}
.curiSlide .slideItem .movieThumb.first {display:none;}
.curiSlide .slideItem .titleText {margin:30px 0 20px; font-family:'NotoSansKR-Bold'; font-size:25px; line-height:1;}
.curiSlide .slideItem .subText {font-family:'NotoSansKR-Regular'; font-size:15px;}
.curiSlide .slideItem .ftBtnBox {margin-top:25px; text-align:center;}
.curiSlide .slideItem .ftBtn {width:130px; height:40px; border:1px solid #000; border-radius:30px; font-family:'NotoSansKR-Regular'; font-size:15px; background:none; transition:0.3s all; cursor:pointer;}
.curiSlide .slideItem .arrowBox {position:relative; margin-left:10px;}
.curiSlide .slideItem .arrowBox > span {position:absolute;  left:0; display:inline-block; width:1px; height:6px; background:#000; transition:0.3s all;}
.curiSlide .slideItem .arrowBox .top {top:3px; transform:rotate(-45deg);}
.curiSlide .slideItem .arrowBox .bot {top:7px; transform:rotate(45deg);}
.curiSlide .slideItem .ftBtn:focus {outline:none;}
.curiSlide .slideItem .ftBtn:hover {background:#000; color:#fff;}
.curiSlide .slideItem .ftBtn:hover .arrowBox .top,
.curiSlide .slideItem .ftBtn:hover .arrowBox .bot {background:#fff;}
.curiSlide .curiArrowBtn {top:35%;}
.curiSlide .curiArrowBtn:after {content:'';}
.curiSlide .swiper-button-prev {left:28%;}
.curiSlide .swiper-button-next {right:28%;}
.curiSlide .curiArrowBtn img {width:100%}
.curiSlide .slick-dots {margin-top:20px; pointer-events: none;}
.curiSlide .slick-dots li {display:inline-block; margin:0 4px;}
.curiSlide .slick-dots li button {width:6px; height:6px; padding:0; background:#fff; border: 1px solid #000; transition:all 0.3s; cursor:pointer; opacity:1; font-size:0; border-radius:100%;}
.curiSlide .slick-dots li button:focus {outline:none;}
.curiSlide .slick-dots li.slick-active button {width:20px; background:#000; border-radius:30px;}
.curiSlide .curiArrow {position: absolute; top: 18%; cursor:pointer;}
.curiSlide .curiArrow.prev {left:25%;}
.curiSlide .curiArrow.next {right:25%;}
.firstDisplayCuriMovie {width:100%;}


/* 학습후기 슬라이드 */
.reviewSlideWrap {position:relative; display:inline-block;}
.reviewSlide {position:absolute; top:0; right:0; width:780px; overflow:hidden; cursor:grab;}
.reviewSlide .slick-list {margin:0 -120px;}
.reviewSlide .swiper-slide {margin:0 120px;}
.reviewSlide .swiper-slide .textTemplate {position:relative; width:320px; height:440px; padding:40px; box-sizing:border-box; background:#f4f4f4; text-align:left; letter-spacing:-0.25px;}
.reviewSlide .swiper-slide .textTemplate .title {font-family:'NotoSansKR-Bold'; font-size:18px; color:#f9307c;}
.reviewSlide .swiper-slide .textTemplate .horizonBar {width:58px; height:3px; margin:15px 0; background:#ccc;}
.reviewSlide .swiper-slide .textTemplate .contents {font-family: 'NotoSansKR-Light'; font-size: 16px; color: #333; line-height: 1.7;}
.reviewSlide .swiper-slide .textTemplate .writerBar {display:inline-block; position:absolute; left:40px; bottom:46px; width:77px; height:2px; background:#dedede;}
.reviewSlide .swiper-slide .textTemplate .writer {position:absolute; bottom: 40px; right: 40px; font-family:'NotoSansKR-Medium'; font-size:15px; color:#f9307c; line-height:1;}
.reviewSlide .swiper-slide {transition:0.5s all;}
.reviewSlide .swiper-slide.on {opacity:0.4;}

/* 학습툴 레이어 */
.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-color: #fff; overflow: hidden;} /* 레이어 컨텐츠 영역 */
.ftContentWrap .close {position: absolute; bottom: -53px; right: -24px;}