/*
+----------------------------------------------------------------------+
| Copyright (c) 2010-2019 STUDYMAX. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2019-03-12
| 파일설명 : 실리콘벨리 오픈이벤트 PC CSS
+----------------------------------------------------------------------+
| 작업자 : 우현진        
+----------------------------------------------------------------------+
| 수정이력

+----------------------------------------------------------------------+
*/

@charset "utf-8";


/*공통*/
.innerContent{width: 1100px; margin:0 auto;}
.minH935{min-height:935px;}
.mgBottom_25{margin-bottom: 25px;}
.mgBottom_50{margin-bottom: 50px;}
.mgBottom_55{margin-bottom: 55px;}
.mgBottom_70{margin-bottom: 70px;}
.mgBottom_80{margin-bottom: 80px;}

/*영역*/
.mainIntro{height: 938px;background: url('/smciImages/front/community/event/event119/event119_01.png') no-repeat 50% 0; }
.section2Cont{padding: 93px 0;}
.section3Cont{padding: 120px 0 100px;}
.section4Cont{padding: 90px 0;}
.section5Cont{width: 1102px; margin: 0 auto; padding: 90px 0 83px;}

/* bg색상 */
.bgColor_white{background-color:#fff}
.bgColor_d9e7f0{background-color:#d9e7f0}
.bgColor_b3c9d7{background-color:#b3c9d7}
.bgColor_eaeff2{background-color:#eaeff2}

/* 영상위치 */
.mainIntroMovieBox{position: absolute;left: 50%;top: 330px;margin-left: -460px;}

/*gif*/
.flowerGif{position: absolute;bottom: 96px;left: 50%;margin-left: -545px;}

/*감상평*/
.admireArea textarea{width: 1038px;height: 110px;padding: 20px;border: 2px solid #D3D3D3;background-color: #fff;resize: none; font-family: 'Malgun Gothic', dotum, sans-serif;font-size: 21px;color: #a8a8a8;}

/*상품영역*/
.productWrap:after{content:''; display: block; clear: both;}
.productWrap > ul > li{float: left; width: 25%;}
.productWrap > ul > li > a{display: inline-block; width: 253px; height: 229px;}
.productWrap .pbItemOne{background: url(/smciImages/front/community/event/event119/event_pb_1.png);}
.productWrap .pbItemTwo{background: url(/smciImages/front/community/event/event119/event_pb_2.png);}
.productWrap .pbItemThree{background: url(/smciImages/front/community/event/event119/event_pb_3.png);}
.productWrap .pbItemFour{background: url(/smciImages/front/community/event/event119/event_pb_4.png);}

.productWrap .pbItemOne:hover, .productWrap .pbItemOne.active{background: url(/smciImages/front/community/event/event119/event_pb_1_on.png);}
.productWrap .pbItemTwo:hover, .productWrap .pbItemTwo.active{background: url(/smciImages/front/community/event/event119/event_pb_2_on.png);}
.productWrap .pbItemThree:hover, .productWrap .pbItemThree.active{background: url(/smciImages/front/community/event/event119/event_pb_3_on.png);}
.productWrap .pbItemFour:hover, .productWrap .pbItemFour.active{background: url(/smciImages/front/community/event/event119/event_pb_4_on.png);}

.productWrap .pbItemOne.selDefault{background: url(/smciImages/front/community/event/event119/event_pb_1_on.png);}

/* 유의사항 */
.eventNoticeWrap{text-align: left;}
.eventNoticeWrap .eventNoticeInner{width: 692px;margin: 0 auto;padding: 61px 0 50px;}
.eventNoticeWrap .eventNoticeTitle{text-align: left;font-size: 24px;font-family: 'Malgun Gothic', dotum, sans-serif;color:#1a1a1a;margin-bottom: 10px;font-weight: bold;}
.eventNoticeWrap .noticeList ul li{letter-spacing: -1px;color:#4a4a4a;padding: 5px 0;font-size: 16px;font-family: 'Malgun Gothic', dotum, sans-serif;}


/*컨텐츠 animation*/
.directionArea{position: relative;}
.direction01.directionOn{animation: move 0.8s ease; -webkit-animation: move 0.8s ease;}
.direction02.directionOn{animation: move 2.6s ease; -webkit-animation: move 1.2s ease;}
.direction03.directionOn{animation: move 3.4s ease; -webkit-animation: move 1.6s ease;}
.direction04.directionOn{animation: move 4.4s ease; -webkit-animation: move 2.0s ease;}

@keyframes move {
 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 move {
 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;
 }
}