/*
+----------------------------------------------------------------------+
| Copyright (c) 2010-2018 STUDYMAX. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2018-09-27
| 파일설명 : 메인 CSS
+----------------------------------------------------------------------+
| 작업자 : 박소율
+----------------------------------------------------------------------+
| 수정이력
| 20181017 2차개선수정 by 우현진
| 20190319 [.generalNoticeWrap] 추가 by 박소율
+----------------------------------------------------------------------+ 
*/

@charset "utf-8";


.color_darkGrey {color:#272727}

/* 메인 슬라이더 */
.mainVisualSlider{height: 938px; background-color: #000; position: relative; overflow: hidden;}
.mainVisualSlider .mainSlide ,.mainVisualSlider .slides{height: inherit;}
.mainVisualSlider li{height: inherit;background-repeat: no-repeat; background-position: 50% 0; background-size: cover; @include transition(opacity 1s ease); -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; transition: opacity 1s ease; }
.mainVisualSlider .mainSlider01{background-image: url('/smciImages/front/main/main_slider01.png');}
.mainVisualSlider .mainSlider02{background-image: url('/smciImages/front/main/main_slider02.png');}
.mainVisualSlider .mainSlider03{background-image: url('/smciImages/front/main/main_slider03.png');}

.mainVisualSlider .flex-control-nav {width: 100%; position: absolute; left: 0; bottom:91px; text-align: center; z-index: 9}
.mainVisualSlider .flex-control-nav li {margin: 0 9px; display: inline-block; *display: inline;}
.mainVisualSlider .flex-control-paging li a {width:11px;height:11px;display: block; border: 2px solid rgba(255,255,255,0.7); text-indent: -9999px; border-radius: 50%; background-color:transparent; cursor: pointer;}
.mainVisualSlider .flex-control-paging li a:hover {background-color: rgba(255,255,255,0.9);  }
.mainVisualSlider .flex-control-paging li a.flex-active {background-color:rgba(255,255,255,0.9); }

/*메인 video BG*/
.contentsWrap .mainBoxMovie {position: relative; min-width:1200px; width: 100%; height: 100%; overflow:hidden;}
.mainBoxMovie .videoBG{display: inline-block; position: absolute; z-index:2 ; width: 100%; height: 100%; background-color: #000; opacity: 0.4;}
.contentsWrap .mainBoxMovie video{position: absolute; z-index: 1; top: 50%; left: 50%;  min-width: 100%;  min-height: 100%;   height: auto; 
transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%)translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%);}


/* 메인 슬라이더 타이들 Start */ 
.mainVisualSlider .sliderTextArea{position: absolute; left: 50%; top: 358px; min-width:1200px; text-align: center; color: #fff; z-index: 9;  transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.mainVisualSlider .sliderTitle{font-size: 80px;animation: moveSlideText 0.3s  ease; -webkit-animation: moveSlideText 0.3s  ease;}
.mainVisualSlider .sliderTitleSlash{padding-left: 110px; background: url('/smciImages/front/main/main_titleSlash.png') no-repeat 36px 50%;}
.mainVisualSlider .sliderText{font-size: 28px;animation: moveSlideText 0.9s  ease; -webkit-animation: moveSlideText 0.9s  ease; margin-top: 24px;}

@keyframes moveSlideText {
	0% {
		transform: translateY(30px);
		transition: transform 1.2s cubic-bezier(0.38, 1, 0, 1), opacity 0.6s ease;
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		transition: transform 1.2s cubic-bezier(0.38, 1, 0, 1), opacity 0.6s ease;
		opacity: 1;
	}	
}
@-webkit-keyframes moveSlideText {
	0% {
		-webkit-transform: translateY(30px);
		-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.38, 1, 0, 1), opacity 0.6s ease;
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0px);
		-webkit-transition: -webkit-transform 1.2s cubic-bezier(0.38, 1, 0, 1), opacity 0.6s ease;
		opacity: 1;
	}
}
/* 메인 슬라이더 타이들 end */ 

/* 스크롤 버튼 Start */
.scrollArrow {	background-image: url('/smciImages/front/main/main_scrollArrow.png');	background-size: contain;	background-repeat: no-repeat;}
.scrollArrowLink {display: block;cursor:pointer;height: 30px;width: 58px;margin: 0px 0 0 -29px;line-height: 60px;position: absolute;left: 50%;bottom: 40px;z-index: 9;text-decoration: none;text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
	-webkit-animation: moveScollArrow 2s ease-in-out infinite;
	-moz-animation: moveScollArrow 2s ease-in-out infinite;
	animation:	moveScollArrow 2s ease-in-out infinite;
}
@-webkit-keyframes moveScollArrow {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,20px); opacity: 0; }
}
@-moz-keyframes moveScollArrow {
  0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,20px); opacity: 0; }
}
@keyframes moveScollArrow {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,20px); opacity: 0; }
}
/* 스크롤 버튼 End */

/* 메인 슬라이더 End */



/* About STUDYMAX */
.AboutContentsWrap{padding-top: 100px; padding-bottom: 100px;background-color:#f0f2f5}
.AboutContentsWrap .keywordWrap{width: 260px; height: 210px; padding-top: 50px;border-radius: 50%; background-color: #ffffff; text-align: center; float: left; margin:0 20px;}
.AboutContentsWrap .keywordText{line-height: 20px;}
/* About STUDYMAX End */

/* ourContentsWrap */
.ourContentsWrap{padding-top: 100px; padding-bottom: 100px}
.ourContentsWrap .ourContents{float: left; width: 228px; height: 249px; background-color: #000; text-align: center; margin-right: 15px; line-height: 249px; position: relative; background-repeat: no-repeat; background-position: 0 0 ;}
.ourContentsWrap .ourContents:nth-child(1){background-image: url('/smciImages/front/main/ourContents_img01.png');}
.ourContentsWrap .ourContents:nth-child(2){background-image: url('/smciImages/front/main/ourContents_img02.png');}
.ourContentsWrap .ourContents:nth-child(3){background-image: url('/smciImages/front/main/ourContents_img03.png');}
.ourContentsWrap .ourContents:nth-child(4){background-image: url('/smciImages/front/main/ourContents_img04.png');}
.ourContentsWrap .ourContents:nth-child(5){background-image: url('/smciImages/front/main/ourContents_img05.png');}

.ourContentsWrap .ourContents:last-child{margin-right: 0;}
.ourContentsWrap .ourContents .contentsName{ color: #fff; font-size: 20px; letter-spacing: 2px; position: relative;}
.ourContentsWrap .ourContents .contentsName:before{content: ''; position: absolute; left: 0;right: 0;  height: 1px; background-color: #fff; bottom: -8px;opacity: 0; transform: scale3d(0, 1, 1);-webkit-transform: scale3d(0, 1, 1);transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.ourContentsWrap .ourContents .overlayBg{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(224,23,52,0.6); opacity: 0; visibility: hidden; transition: all 0.4s ease;-webkit-transition: all 0.4s ease;}

/* ourContentsWrap- 마우스 오버 효과 */
.ourContentsWrap .ourContents:hover .contentsName:before {transform: scale3d(1, 1, 1);-webkit-transform: scale3d(1, 1, 1); opacity: 1;}
.ourContentsWrap .ourContents:hover .overlayBg{opacity: 1; visibility: visible; }
/* ourContentsWrap End */



/* brandsContentsWrap */
.brandsContentsWrap{position: relative; min-height:720px; }

.brandsContentsWrap .brandsBg{padding-top: 100px; padding-bottom: 100px; height: 535px; background:url('/smciImages/front/main/brands_bgImg.png') 50% 0 no-repeat; }
.brandsContentsWrap .bgOn{animation: banner 1s both ease;-wekit-animation: banner 1s both ease;}

.brandsContentsWrap .brandContentsBox{position: absolute;z-index: 2;left :50%;top: 100px;width: 1200px;margin-left: -600px;}

.brandsContentsWrap .brandsContents{width: 580px; height: 247px; background-color: #d91a2e; box-shadow:5px 5px 20px 5px rgba(0,0,0,0.30); text-align: center; color:#fff; position: relative;}
.brandsContentsWrap .brandsContents:nth-child(1){background-image: url('/smciImages/front/main/brandsContents_img01.png')}
.brandsContentsWrap .brandsContents:nth-child(2){background-image: url('/smciImages/front/main/brandsContents_img02.png')}
.brandsContentsWrap .brandsCopy{padding-top: 70px; font-size: 22px; position: relative;}
.brandsContentsWrap .brandsTitle{font-size: 50px; position: relative;}

.brandsContentsWrap .brandsTextWrap.textOn{animation: moveTop 0.3s  ease; -webkit-animation: moveTop 0.3s  ease;}


/*중하단 video BG*/
.middleVideoBox{position: relative;z-index: 1;width: 100%;height: 473px;overflow: hidden;}
.middleVideoBox .videoBG{display: inline-block; position: absolute; z-index:2 ; width: 100%; height: 473px; background-color: #212121; opacity: 0.6;}
.middleVideoBox video{position: absolute;top: 0;left: 0;min-width: 100%;min-height: 100%;width: 100%;height: auto;
transform: translateX(0%) translateY(-12%);-webkit-transform: translateX(0%)translateY(-12%);-ms-transform: translateX(0%) translateY(-12%);}



@keyframes moveTop {
 0% {padding-top: 40px;}
 100% {padding-top: 0px;}
}
@-webkit-keyframes moveTop {
 0% {padding-top: 40px;}
 100% {padding-top: 0px;}
}


.brandsContentsWrap .overlayBg{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(224,23,52,0.85); transition: all 0.4s ease;-webkit-transition: all 0.4s ease;}
.brandsContentsWrap .brandsContents:hover .overlayBg{opacity: 0; }
/* brandsContentsWrap End*/

/* mediaContentsWrap */
.mediaContentsWrap{padding-top: 100px; padding-bottom: 100px; background-color: #e8ebf0 }


.mediaContentsWrap .mediaVideoArea{width: 592px; height: 333px; background-color: #272727; overflow: hidden; position: relative;}
.mediaContentsWrap .mediaVideoArea img{width: 100%}

.mediaContentsWrap .videoPlayBtn{width: 63px;height: 63px; border-radius: 50%; background: url('/smciImages/front/contents/videoPlayBtn.png') no-repeat 0 0; position: absolute; left: 265px; top:135px}
.mediaContentsWrap .overlayBg{background-color: rgba(0,0,0,0.35); position: absolute;left: 0; top:0; bottom: 0; right: 0;}
.mediaContentsWrap .thmbArea:hover .videoPlayBtn{background-position: right 0; }
.mediaContentsWrap .thmbArea:hover .tumbImg{transform: scale(1.1); -webkit-transform: scale(1.1); transition: transform 0.4s; -webkit-transition: -webkit-transform 0.4s;}


/* mediaContentsWrap -최근 게시판*/
.mediaContentsWrap .mediaBoardArea{width: 275px; height: 333px; background-color: #fff; box-shadow: 2px 2px 30px 2px rgba(0,0,0,0.08); position: relative; margin-left: 29px}
.mediaContentsWrap .mediaBoardArea > a{display: inline-block; width: 100%; height: 100%;}
.mediaContentsWrap .mediaBoardArea:before{content:''; position: absolute; left: 0; top: 32px; width: 3px; height: 14px; background-color: #e2203a}
.mediaContentsWrap .mediaBoard{padding: 32px 25px}
.mediaContentsWrap .boardSite{color: #e2203a; font-size: 15px; line-height: 14px; margin-bottom: 20px;}
.mediaContentsWrap .boardTitle{color: #272727; font-size: 20px; line-height: 28px; margin-bottom: 24px; letter-spacing: -0.5px;}
.mediaContentsWrap .boardText{color: #8a8a8a; font-size: 15px; line-height: 24px; height: 92px; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; word-wrap: break-word;	line-clamp: 5;}


.mediaContentsWrap .boardDateArea{border-top: 1px solid #d9dbe0;height: 49px; position: absolute; left: 0; right: 0; bottom: 0}
.mediaContentsWrap .boardDate{position: absolute; left: 27px; bottom: 15px; font-size: 15px; color: #525252}
.mediaContentsWrap .boardLinkBtn{position: absolute; right: 19px; bottom: 15px;}
/* mediaContentsWrap End */


/* 사이트 바로가기 버튼 */
.goToSiteBtn{width: 192px;border: 2px solid #272727;color:#272727;line-height: 41px;height: 42px;}
.goToSiteBtn.actionBtn .hoverText{font-size: 16px;text-indent: -30px;background: url('/smciImages/front/main/rightArrow.png') 90% center no-repeat; color: #272727}
.goToSiteBtn:hover .hoverText{ background:url('/smciImages/front/main/rightArrow_on.png') 90% center no-repeat; color:#fff;}
.goToSiteBtn.actionBtn:after{background-color:#272727;}

/* 레이어 비디오 영상 영역 */
.layerVideoArea{position: fixed; left: 50%; top: 50%; width: 960px; height: 540px; margin: -270px 0 0 -480px; z-index: 300; display: none}
.layerVideoArea .videoCloseBtn{display: inline-block; position: absolute; right: 0; top: -48px}



/* 서비스 공지 팝업 */
.generalNoticeWrap{position: absolute ; left: 50%;margin-left: -230px; top: 146px; z-index: 99999;  height: auto; overflow: hidden;}
.generalNoticeWrap .floatLeft{float :left}
.generalNoticeWrap .floatRight{float :right}
.generalNoticeWrap .generalNoticeTxt{text-align: right; padding:4px;  background-color: #000;color:#fff;}
.generalNoticeWrap .generalNoticeTxt span{cursor:pointer;}