/*  
+----------------------------------------------------------------------+
| Copyright (c) 2010-2021 STUDYMAX. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2021-10-08
| 파일설명 : 3초해외여행 소개페이지 PC - CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영  
+----------------------------------------------------------------------+
| 수정이력
| 20211124 배경 이슈 수정 by 최진영
| 20211203 bg슬라이드 이슈 수정 by 최진영 
+----------------------------------------------------------------------+
*/

@charset "utf-8";

/* reset */
video {display:block; width:100%;}
video:focus {outline:none;}
.ostCourseWrap * {letter-spacing:-1px;}

/* 공통 */
.imgBlock {display:block; width:100%;}
.contentsBox {width:1100px; margin:0 auto;}
.contentsBox.w1240 {width:1240px;}
.slideDots {position:absolute;}
.slideDots {display: flex; justify-content: center; margin-top: 3vw;}
.slideDots .swiper-pagination-bullet {width:10px; height:10px; margin:0 3px; opacity:0.4; transition:0.3s all;}
.slideDots .swiper-pagination-bullet:first-child {margin-left:0;}
.slideDots .swiper-pagination-bullet-active {width:20px; background:#000; opacity:1; border-radius: 15px;}

/* ========== 상단 슬라이드 영역 ========== */
.topBannerSection {min-width:1100px;}
.topBannerSection .topBannerSlide .swiper-slide img {width:100%; height:100%;}
.topBannerSection .textArea {position:absolute; top:20%; left:50%; width:1100px; margin-left:-550px; z-index:1;}
.topBannerSection .textArea .titleText {font-size:90px; font-family:'NotoSansKR-Bold'; color:#fff; line-height:1.3;}
.topBannerSection .textArea .cityText {margin:5% 0 7%; font-size:24px; font-family:'NotoSansKR-Medium'; color:#fff; line-height:1.2;}
.topBannerSection .textArea .cityName {font-size:24px; font-family:'NotoSansKR-Medium'; color:#fff; line-height:1.2;}
.topBannerSection .slideDots {display:flex; justify-content: space-around; position:relative; width:51.365%;}
.topBannerSection .slideDots:before {content:''; position:absolute; top:50%; left:0; width:100%; height:1px; background:#fff;}
.topBannerSection .slideDots .swiper-pagination-bullet {position:relative; width:8px; height:8px; background:#fff; opacity:1;}
.topBannerSection .slideDots .swiper-pagination-bullet:before {content:''; position:absolute; top: 20px; left: -46px; width: 100px; color:#fff; font-family:'NotoSansKR-Light'; font-size:18px; text-align:center;}
.topBannerSection .slideDots .swiper-pagination-bullet:nth-child(1):before {content:'New York';}
.topBannerSection .slideDots .swiper-pagination-bullet:nth-child(2):before {content:'San Francisco';}
.topBannerSection .slideDots .swiper-pagination-bullet:nth-child(3):before {content:'London';}
.topBannerSection .slideDots .swiper-pagination-bullet:nth-child(4):before {content:'Hawaii';}
.topBannerSection .slideDots .swiper-pagination-bullet-active {position:relative; width:8px; background:#fff;}
.topBannerSection .slideDots .swiper-pagination-bullet-active:after {content:''; display:inline-block; position:absolute; top:-10px; left:-11px; width:20px; height:20px; border:5px solid #fff; border-radius:100%; opacity:0.4;}
.topBannerSection .slideArrows {margin-top:110px;}
.topBannerSection .slideArrows .topBannerSlideArrowBtn {position:relative; display:inline-block; width:42px; height:42px; background:transparent; font-size:0; cursor:pointer;}
.topBannerSection .slideArrows .topBannerSlideArrowBtn.next {left:-7px; background-image:url('/smciImages/front/dCourse/ostCourse/slide_arrow_right_on.png'); z-index:1;}
.topBannerSection .mouseImg {position:absolute; bottom:30px; left:50%; margin-left:-12.5px; animation:scrollDown 1s infinite alternate; z-index:1;}
@keyframes scrollDown {
  0% {
      bottom:30px;
  }
  100% {
      bottom:20px;
  }
}

/* ========== 인트로 영상, 동영상 팝업 영역 ========== */
.movieSection {position:relative; background:url('/smciImages/front/dCourse/ostCourse/bg_movieSection.jpg') no-repeat 50% 0/100% 100%;}
.movieSection .introMovieArea {position:absolute; top: 480px; left: 50%; margin-left: -355px; width:710px; height:400px;}

/* ========== BG 슬라이드 영역 ========== */
.bgSlideSection {padding-top:15px; overflow: hidden}
.bgSlideMove {position: relative; top: 0; left: 0; white-space: nowrap; }
.bgSlideMove + .bgSlideMove {margin-top: 14px;}
.bgSlideMove img {margin-right:15px;}

/* ========= mockup 영상 영역 ========= */
.mockupMovieSection {min-width:1100px;}
.mockupMovieSection .mockupImg {position:relative; min-width:1100px; z-index:1;}
.mockupMovieSection .mockupMovieBox {position:absolute; z-index:0; width:54%;}
.mockupMovieSection .mockupMovieBox.idx01 {top:16.4%; left: 8.2%;}
.mockupMovieSection .mockupMovieBox.idx02 {top:45%; right:8.3%;}
.mockupMovieSection .mockupMovieBox.idx03 {top:73.8%; left:8.2%;}

/* ========== 앱 이미지 영역 ========== */
.appImgSection {background:url('/smciImages/front/dCourse/ostCourse/bg_appImgSection.jpg') no-repeat 50% 0/100% 100%;}

/* ========== 후기 슬라이드 영역 ========== */
.reviewSlideSection {background:url('/smciImages/front/dCourse/ostCourse/bg_reviewSlideSection.jpg') no-repeat 50% 0/100% 100%;}
.reviewSlideSection .reviewSlide {position:absolute; top:200px; right:-20px; width:640px;}
.reviewSlideSection .reviewSlide .slick-list {margin:0;}
.reviewSlideSection .reviewSlide img {display:block; width:100%; cursor:grab;}
.slideDots.review {top:540px; left:4px;}

/* ========== 여행코스 슬라이드 영역 ========== */
.courseSlideSection .ostCourseSlide {position:absolute; width:500px;}
.courseSlideSection .ostCourseSlide.img {top:380px; left:0;}
.courseSlideSection .ostCourseSlide.text {top:370px; right:0;}
.courseSlideSection .ostCourseSlide.text img {cursor:grab;}
.slideDots.course {top:600px; right:440px;}

/* ========== 하단 버튼 영역 ========== */
.bottomBtnSection {background:url('/smciImages/front/dCourse/ostCourse/bg_bottomBtnSection_1.jpg') no-repeat 50% 0/100% 100%;}

/* ========== 동영상 팝업 ========== */
.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;}