/* @author LR */
.hide { display: none; }

.hide-text { text-indent: -9999px; }

.float-left { float: left; }

.float-right { float: right; }

.text-right { text-align: right; }

.text-center { text-align: center; }

.text-left { text-align: left; }

.section1-sprite, .section1-btn2, .section1-btn2_h, .section1-btn_1, .section1-btn_1_h, .section1-video, .top_part .contain #forPopupVideo, .top_part .contain #forPopupVideo:hover, .top_part .contain .download .ios, .top_part .contain .download .ios:hover, .top_part .contain .download .ios:active, .top_part .contain .download .andriod, .top_part .contain .download .andriod:hover, .top_part .contain .download .andriod:active, #getGift .know, #getGift .know:hover { background-image: url('../../../imgs/event/2016y/section1.png'); background-repeat: no-repeat; }

.section1-btn2 { background-position: 0 0; }

.section1-btn2_h { background-position: 0 -64px; }

.section1-btn_1 { background-position: 0 -128px; }

.section1-btn_1_h { background-position: 0 -192px; }

.section1-video { background-position: 0 -526px; }
.section1-video:hover, .section1-video.video-hover { background-position: 0 -256px; }

.skill-sprite, .skill-skill-box, .skill-skill-btn-1, .skill-skill-btn-2, .skill-skill-btn-3, .skill-skill-btn-4, .skill-skill-btn-hover-1, .skill-skill-btn-hover-2, .skill-skill-btn-hover-3, .skill-skill-btn-hover-4, .skill-skill-detail-box, #section2 .cover .skill .skill-info, #section2 .cover .skill .skill-box, #section2 .cover .skill #myCarousel .carousel-indicators .indicator1, #section2 .cover .skill #myCarousel .carousel-indicators .indicator1:hover, #section2 .cover .skill #myCarousel .carousel-indicators .indicator1.d_click, #section2 .cover .skill #myCarousel .carousel-indicators .indicator2, #section2 .cover .skill #myCarousel .carousel-indicators .indicator2:hover, #section2 .cover .skill #myCarousel .carousel-indicators .indicator2.d_click, #section2 .cover .skill #myCarousel .carousel-indicators .indicator3, #section2 .cover .skill #myCarousel .carousel-indicators .indicator3:hover, #section2 .cover .skill #myCarousel .carousel-indicators .indicator3.d_click, #section2 .cover .skill #myCarousel .carousel-indicators .indicator4, #section2 .cover .skill #myCarousel .carousel-indicators .indicator4:hover, #section2 .cover .skill #myCarousel .carousel-indicators .indicator4.d_click { background-image: url('../../../imgs/event/2016y/skill.png'); background-repeat: no-repeat; }

.skill-skill-box { background-position: 0 0; }

.skill-skill-btn-1 { background-position: 0 -654px; }

.skill-skill-btn-2 { background-position: 0 -750px; }

.skill-skill-btn-3 { background-position: 0 -846px; }

.skill-skill-btn-4 { background-position: 0 -942px; }

.skill-skill-btn-hover-1 { background-position: 0 -1038px; }

.skill-skill-btn-hover-2 { background-position: 0 -1134px; }

.skill-skill-btn-hover-3 { background-position: 0 -1230px; }

.skill-skill-btn-hover-4 { background-position: 0 -1326px; }

.skill-skill-detail-box { background-position: 0 -1422px; }

.section3-sprite, .section3-banner-1, .section3-banner-2, .section3-banner-4, .section3-popup-box, .section3-tittle-get-order, .section3-tittle-pg3-1, .section3-tittle-pg3, .section3-tittle-receive-gift, .moreActivities .wrap .first1, .moreActivities .wrap .first1:hover, .moreActivities .wrap .first2, .moreActivities .wrap .first2:hover, .moreActivities .wrap .second, .moreActivities .wrap .second:hover, #getGift, #getGift .title { background-image: url('../../../imgs/event/2016y/section3.png'); background-repeat: no-repeat; }

.section3-banner-1 { background-position: 0 -358px; }
.section3-banner-1:hover, .section3-banner-1.banner-1-hover { background-position: 0 0; }

.section3-banner-2 { background-position: 0 -1074px; }
.section3-banner-2:hover, .section3-banner-2.banner-2-hover { background-position: 0 -716px; }

.section3-banner-4 { background-position: 0 -1790px; }
.section3-banner-4:hover, .section3-banner-4.banner-4-hover { background-position: 0 -1432px; }

.section3-popup-box { background-position: 0 -2148px; }

.section3-tittle-get-order { background-position: 0 -2606px; }

.section3-tittle-pg3-1 { background-position: 0 -2634px; }

.section3-tittle-pg3 { background-position: 0 -2732px; }

.section3-tittle-receive-gift { background-position: 0 -2830px; }

body { min-width: 1250px; overflow: hidden; }

.top_part { height: 1080px; width: 100%; overflow: hidden; position: relative; }
.top_part .contain { background: url("/imgs/event/2016y/bg-1.jpg") no-repeat center top; width: 1920px; height: 1080px; position: absolute; left: 50%; margin-left: -960px; }
.top_part .contain .center_bg { position: absolute; height: 583px; width: 1326px; left: 50%; margin-left: -663px; background: url("/imgs/event/2016y/bg-1-main.jpg") no-repeat center top; }
.top_part .contain #forPopupVideo { position: absolute; background-position: 0 -526px; width: 456px; height: 270px; top: 390px; left: 50%; margin-left: -455px; }
.top_part .contain #forPopupVideo:hover, .top_part .contain #forPopupVideo.video-hover { background-position: 0 -256px; }
.top_part .contain #forPopupVideo:hover { background-position: 0 -256px; width: 456px; height: 270px; }
.top_part .contain .download { width: 456px; height: 150px; position: absolute; top: 690px; left: 50%; margin-left: -455px; }
.top_part .contain .download .Qcode { position: absolute; background: url("/imgs/event/2016y/qr-code-gift.png") no-repeat center top; width: 150px; height: 150px; top: 0; }
.top_part .contain .download .ios { color: #fff; text-align: center; font-size: 24px; line-height: 64px; position: absolute; background-position: 0 -128px; width: 292px; height: 64px; top: 0; right: 0; }
.top_part .contain .download .ios:hover { background-position: 0 -192px; }
.top_part .contain .download .ios:active { background-position: 0 -192px; }
.top_part .contain .download .andriod { color: #fff; text-align: center; font-size: 24px; line-height: 64px; position: absolute; background-position: 0 -128px; width: 292px; height: 64px; bottom: 0; right: 0; }
.top_part .contain .download .andriod:hover { background-position: 0 -192px; }
.top_part .contain .download .andriod:active { background-position: 0 -192px; }

#section2 { position: relative; width: 100%; height: 1040px; background: url("/imgs/event/2016y/bg-2.jpg") no-repeat center 0; }
#section2 .cover { width: 1300px; position: absolute; left: 50%; margin-left: -650px; top: 160px; }
#section2 .cover .skill { width: 100%; height: 700px; position: relative; }
#section2 .cover .skill .skill-info { position: absolute; left: 30px; background-position: 0 -1422px; width: 728px; height: 628px; }
#section2 .cover .skill .skill-info .skill-detail { width: 530px; max-height: 300px; margin: 200px auto; font-size: 20px; color: #c6902f; overflow: hidden; }
#section2 .cover .skill .skill-box { position: absolute; top: 5px; right: 30px; background-position: 0 0; width: 522px; height: 654px; }
#section2 .cover .skill #myCarousel { position: absolute; top: 0; left: 0; width: 1300px; height: 700px; }
#section2 .cover .skill #myCarousel .carousel-indicators { position: absolute; bottom: 30px; height: 96px; left: 78px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator { position: absolute; display: inline-block; width: 84px; height: 96px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator .skill-hover { position: absolute; top: 0; left: 0; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator1 { top: 0; left: 0; background-position: 0 -654px; width: 84px; height: 96px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator1:hover { background-position: 0 -1038px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator1.d_click { background-position: 0 -1038px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator2 { top: 0; left: 99px; background-position: 0 -750px; width: 84px; height: 96px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator2:hover { background-position: 0 -1134px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator2.d_click { background-position: 0 -1134px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator3 { top: 0; left: 198px; background-position: 0 -846px; width: 84px; height: 96px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator3:hover { background-position: 0 -1230px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator3.d_click { background-position: 0 -1230px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator4 { top: 0; left: 297px; background-position: 0 -942px; width: 84px; height: 96px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator4:hover { background-position: 0 -1326px; }
#section2 .cover .skill #myCarousel .carousel-indicators .indicator4.d_click { background-position: 0 -1326px; }
#section2 .cover .skill #myCarousel .carousel-inner { position: relative; width: 100%; height: 550px; }
#section2 .cover .skill #myCarousel .carousel-inner .item { position: relative; width: 100%; height: 100%; display: none; }
#section2 .cover .skill #myCarousel .carousel-inner .item .skill-title { position: absolute; width: 522px; top: 6px; right: 30px; font-size: 24px; text-align: center; color: #c6902f; }
#section2 .cover .skill #myCarousel .carousel-inner .item .info { position: absolute; width: 535px; font-size: 20px; top: 200px; left: 100px; color: #bfc91f; }
#section2 .cover .skill #myCarousel .carousel-inner .item .info h3 { font-size: 48px; padding: 0; }
#section2 .cover .skill #myCarousel .carousel-inner .item .info .info-detail { margin: 40px 0; }
#section2 .cover .skill #myCarousel .carousel-inner .item .item-video { position: absolute; right: 50px; top: 48px; height: 588px; width: 480px; z-index: 1; }
#section2 .cover .skill #myCarousel .carousel-inner .item .item-video .general-video { height: 100%; width: 100%; }
#section2 .cover .skill #myCarousel .carousel-inner .item.active { display: block; -webkit-animation: see 1s linear forwards; animation: see 1s linear forwards; }

.moreActivities { position: relative; width: 100%; height: 1040px; background: url("/imgs/event/2016y/bg-2.jpg") no-repeat center 0; }
.moreActivities .wrap { width: 1300px; position: absolute; left: 50%; margin-left: -650px; top: 160px; }
.moreActivities .wrap .first1 { display: block; position: relative; margin: 0 auto; background-position: 0 -358px; width: 684px; height: 358px; }
.moreActivities .wrap .first1:hover, .moreActivities .wrap .first1.banner-1-hover { background-position: 0 0; }
.moreActivities .wrap .first1:hover { background-position: 0 0; }
.moreActivities .wrap .title1 { background: url("/imgs/event/2016y/section3/tittle-pg3.png") no-repeat center 0; width: 438px; height: 98px; background-color: transparent; position: absolute; top: -66px; left: 50%; margin-left: -354px; }
.moreActivities .wrap .first2 { position: relative; margin: 0 auto; display: none; background-position: 0 -1790px; width: 684px; height: 358px; }
.moreActivities .wrap .first2:hover, .moreActivities .wrap .first2.banner-4-hover { background-position: 0 -1432px; }
.moreActivities .wrap .first2:hover { background-position: 0 -1432px; }
.moreActivities .wrap .title2 { background: url("/imgs/event/2016y/section3/tittle-pg3-1.png") no-repeat center 0; width: 438px; height: 98px; background-color: transparent; position: absolute; top: -66px; left: 50%; margin-left: -354px; }
.moreActivities .wrap .map-container { width: 438px; position: absolute; left: 50%; margin-left: -354px; top: -66px; }
.moreActivities .wrap .second { position: relative; margin: 0 auto; margin-top: 30px; background-position: 0 -1074px; width: 684px; height: 358px; }
.moreActivities .wrap .second:hover, .moreActivities .wrap .second.banner-2-hover { background-position: 0 -716px; }
.moreActivities .wrap .second:hover { background-position: 0 -716px; }
.moreActivities .wrap .second .clickToGet { position: absolute; width: 684px; height: 358px; }

#getGift { display: none; position: relative; background-position: 0 -2148px; width: 684px; height: 458px; }
#getGift .title { position: absolute; background-position: 0 -2830px; width: 202px; height: 28px; top: 7px; left: 100px; }
#getGift .content { position: absolute; background: url("/imgs/event/2016y/qr-code-gift1.png") no-repeat center top; width: 150px; height: 150px; top: 100px; left: 267px; }
#getGift .detail { color: #bfc91f; font-size: 28px; position: absolute; top: 280px; left: 17%; }
#getGift .know { position: absolute; top: 350px; left: 200px; background-position: 0 0; width: 292px; height: 64px; text-align: center; line-height: 64px; font-size: 24px; color: #682309; }
#getGift .know:hover { background-position: 0 -64px; }

#iOSDownload { padding-bottom: 0; width: 640px; color: #333333; background: #fff; border-radius: 5px; display: none; }
#iOSDownload .modal-header { height: 60px; padding: 0 24px; font-size: 24px; }
#iOSDownload .modal-header .title { line-height: 60px; float: left; }
#iOSDownload .modal-header .close { background: none; text-indent: 0; width: auto; height: auto; line-height: 24px; margin-top: 18px; color: #666; -webkit-transition: color .3s ease; transition: color .3s ease; float: right; }
#iOSDownload .modal-body { border-bottom: 1px solid #ecf0f1; border-top: 2px solid #ecf0f1; padding: 30px 24px; font-size: 14px; line-height: 26px; text-align: center; }
#iOSDownload .modal-link { padding: 20px 24px; text-align: center; }
#iOSDownload .modal-link a { color: #f60; }

#popupVideoContainer { border: 5px solid #ffffff; background: #ffffff; }
#popupVideoContainer #popupVideo { width: 848px; height: 480px; }

.fancybox-skin { background: transparent; }

@-webkit-keyframes see { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes see { from { opacity: 0; }
  to { opacity: 1; } }
#cornerTips { z-index: 2; }