@charset "utf-8";
.fpwrap {width:100%; position:relative; z-index:1; height:100%;}
.sectionIndex { background:url(../../images/ms/ms_index/mobile/indexbg.jpg) no-repeat center top; background-size:cover; -webkit-background-size:cover;}
#fixed_foot { position:fixed; left:0; width:100%; bottom:0; z-index:101;}
#fixed_foot img {width:100%;}
#fix_top { height:45px; border-bottom:1px solid rgba(255,255,255,.2); background-color:rgba(255,255,255,1); position:fixed; left:0; width:100%; top:0; z-index:101;animation:fadeIn ease 2s; -webkit-animation:fadeIn ease 2s; -moz-animation:fadeIn ease 2s; -o-animation:fadeIn ease 2s;transition:all ease .5s; -webkit-transition:all ease .5s; -moz-transition:all ease .5s; -o-transition:all ease .5s;}
#fix_top.current { background-color:rgba(255,255,255,.9);border-bottom:1px solid rgba(222,222,222,1);}
a.mslogo {background:url(../../images/ms/ms_index/mobile/logo.png) no-repeat 50% 50%; width:120px; position:absolute; padding:0 24px; height:45px; transition:all ease .5s; -webkit-transition:all ease .5s; -moz-transition:all ease .5s; -o-transition:all ease .5s;background-size:100px auto; -webkit-background-size:100px auto;}
a.mslogo.mpluslogoInside {color:#fff; background-position: 20px 50%; width:auto; line-height:45px; padding-left:60px;font-size:12px; }

.navbtn { position:absolute; height:45px; width:45px; right:0; top:0;}
.navbtn em { transition:all ease .3s; -webkit-transition:all ease .3s; font-size:0; width:20px; height:2px; background-color:#7d7d7d; border-radius:1px; -webkit-border-radius:1px; display:block; overflow:hidden; left:50%; margin-left:-10px; position:absolute;}
.navbtn em:nth-child(1) { top:15px;}
.navbtn em:nth-child(2) { top:22px;}
.navbtn em:nth-child(3) { top:29px;}
.navbtn.current em:nth-child(1) {transform:rotate(45deg); -webkit-transform:rotate(45deg); top:22px;}
.navbtn.current em:nth-child(2) { display:none;}
.navbtn.current em:nth-child(3) {transform:rotate(-45deg); -webkit-transform:rotate(-45deg); top:22px;}
#menu {position:absolute; top:45px; left:0; right:0; background-color:rgba(0,0,0,.2); z-index:100; display:none; transition:background-color ease .3s; -webkit-transition:background-color ease .3s;}
#menu li { padding:0 20px;}
#menu li a {display:block; padding:15px 0; font-size:15px; color:#2d2d2d; border-bottom:1px solid rgba(222,222,222,1); background:url(../../images/ms/ms_index/mobile/arrow-r2.png) no-repeat 100% 50%; background-size:auto 36%; -webkit-background-size:auto 36%;}
#menu li:last-child a {border-bottom:0 none;}

#fix_top.current #menu { background-color:rgba(255,255,255,.9);}

a.btn_v { color:#000; height:40px;background:#fff url(../../images/ms/ms_index/mobile/arrow-r.png) no-repeat 95% 50%; width:197px; font-size:14px; padding: 0 45px 0 30px; display:inline-block; line-height:40px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; transition:all ease .3s; -webkit-transition:all ease .3s; -moz-transition:all ease .3s; -o-transition:all ease .3s; background-size:24px auto; -webkit-background-size:24px auto;}
a.btn_v:hover { box-shadow:0 0 20px rgba(255,255,255,.5) , 0 0 20px rgba(255,255,255,.5) inset; -moz-box-shadow:0 0 20px rgba(255,255,255,.5) , 0 0 20px rgba(255,255,255,.5) inset; -o-box-shadow:0 0 20px rgba(255,255,255,.5) , 0 0 20px rgba(255,255,255,.5) inset; -webkit-box-shadow:0 0 20px rgba(255,255,255,.5) , 0 0 20px rgba(255,255,255,.5) inset;}/*box-shadow:0 0 20px rgba(255,255,255,.5) inset; -webkit-box-shadow:0 0 20px rgba(255,255,255,.5) inset;*/

.index_m1 {text-align:center;}
.index_m1 img {width:40%;}
.index_m2 img {width:73.6%;}
.index_m3 { text-align:center; margin-top:4rem !important;}
.index_m2 {text-align:center; margin-top:2rem !important;}

.bgfix { background-size:100% auto;-webkit-background-size:100% auto; background-position:center 45px; background-repeat:no-repeat; position:absolute; left:0; top:0; height:100%; width:100%; z-index:1;}



.footfont {position:absolute; background:url(../../images/ms/ms_index/mobile/bottombg.png) no-repeat left top; background-size:100% 100%; -webkit-background-size:100% 100%; width:100%; z-index:2; left:0; bottom:0; height:220px; color:#fff; text-align:left; padding:80px 25px 0;}
.footfont h5 {font-size:18px; line-height:1; margin-bottom:5px;}
.footfont p {font-size:16px; line-height:22px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span { background-color:#ea5404;}
.hj {width:80%;margin:5% auto 0;}
.hj li {width:50%; padding:0 8px; float:left; margin:8px 0;}
.hj li div { padding:5px; }/*background-color:#fff;*/
.hj li h5 {font-size:12px; color:#4d4d4d; margin-top:5px; font-weight:normal; line-height:1.5; overflow:hidden;}
.hj li h5.twoline { height:36px;}
.hj li img {width:100%;}
.btns {width:80%; position:fixed; left:50%; margin-left:-38%; top:14%; z-index:100; display:none;}
.btns li { width:33.33%; float:left; text-align:center}
.btns li span { display:inline-block; vertical-align:top; font-size:14px; color:#9d9d9d; padding-bottom:10px; position:relative;}
.btns li.current span {color:#2d2d2d; border-bottom:2px solid #eb5603;}
.btns li.current span:after { position:absolute; content:''; font-size:0; background:url(../../images/ms/ms_index/mobile/arrow.png) no-repeat 50% 0; width:5px; left:50%; bottom:0; z-index:10; height:3px; margin-left:-2.5px;}
.caseSthDiv { margin-top:35%; margin-bottom:20%;}
.caseSthDiv .caseSth  {display:none;}
.caseSthDiv .caseSth:first-child {display:block;}
.caseSth {width:90%;}
.hj.caseSth li h5.twoline { height:18px;}
.section.active .commonH1,.section.active .commonP1,.section.active .jscout,.section.active .picms1 {    animation: tran1 ease 1s;
    -webkit-animation: tran1 ease 1s;
    -moz-animation: tran1 ease 1s;
    -o-animation: tran1 ease 1s;
    animation-fill-mode: backwards;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
}
#swiper-container1,#swiper-container2,#swiper-container3,#swiper-container4 {height:100%;}
.section.active .picms1 {width:100%; text-align:center;animation-delay: 1.8s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay:1.5s;
    -o-animation-delay: 1.5s;}
.picms1 img {width:100%; max-width:100%;}
.section.active .commonH1 {animation-delay: .5s;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;}
.section.active .commonP1_a {animation-delay: .8s;
    -webkit-animation-delay: .8s;
    -moz-animation-delay: .8s;
    -o-animation-delay: .8s;}
.section.active .commonP1_b,.section.active .jscout {animation-delay: 1.1s;
    -webkit-animation-delay: 1.1s;
    -moz-animation-delay: 1.1s;
    -o-animation-delay: 1.1s;}
.videoWrap { width:320px; height:180px; display:none; transition:all ease .3s; -webkit-transition:all ease .3s; -moz-transition:all ease .3s; -o-transition:all ease .3s;}
#zz_ceng {background-color:rgba(0,0,0,.7);}

.introduction {text-align:center; width:240px; margin:0 auto;}
.commonH1 {text-align:center; font-size:18px;color:#282828; line-height:1; font-weight:bold;}
.commonP1 {font-size:12px; text-align:center; line-height:1.5; margin:5px 0 10px; padding:0 10px;}

@keyframes rot {
     0% { transform:rotate(0); }
    100% { transform:rotate(360deg); }
}
@-moz-keyframes rot {
     0% { -moz-transform:rotate(0) }
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rot {
     0% { -webkit-transform: rotate (0); } 
    100% { -webkit-transform: rotate(360deg); }
}
@-o-keyframes rot {
    0% { -o-transform: rotate (0); } 
    100% { -o-transform: rotate(360deg); }
}
@keyframes tran1 {
	 0% { transform:translate3d(0,50px,0);opacity: 0; }
    100% { transform:translate3d(0,0,0);opacity:1; }
}
@-moz-keyframes tran1 {
	0% { -moz-transform:translate3d(0,50px,0);opacity: 0; }
    100% { -moz-transform:translate3d(0,0,0); opacity: 1;}
}
@-webkit-keyframes tran1 {
	0% { -webkit-transform:translate3d(0,50px,0); opacity: 0;}
    100% { -webkit-transform:translate3d(0,0,0); opacity: 1;}
}
@-o-keyframes tran1 {
	0% { -o-transform:translate3d(0,50px,0); opacity: 0;}
    100% { -o-transform:translate3d(0,0,0); opacity: 1;}
}


@keyframes tranLeft100 {
	 0% { transform:translate3d(-100px,0,0);opacity: 0; }
    100% { transform:translate3d(0,0,0);opacity:1; }
}
@-moz-keyframes tranLeft100 {
	0% { -moz-transform:translate3d(-100px,0,0);opacity: 0; }
    100% { -moz-transform:translate3d(0,0,0); opacity: 1;}
}
@-webkit-keyframes tranLeft100 {
	0% { -webkit-transform:translate3d(-100px,0,0); opacity: 0;}
    100% { -webkit-transform:translate3d(0,0,0); opacity: 1;}
}
@-o-keyframes tranLeft100 {
	0% { -o-transform:translate3d(-100px,0,0); opacity: 0;}
    100% { -o-transform:translate3d(0,0,0); opacity: 1;}
}

@keyframes tranRight100 {
	 0% { transform:translate3d(100px,0,0);opacity: 0; }
    100% { transform:translate3d(0,0,0);opacity:1; }
}
@-moz-keyframes tranRight100 {
	0% { -moz-transform:translate3d(100px,0,0);opacity: 0; }
    100% { -moz-transform:translate3d(0,0,0); opacity: 1;}
}
@-webkit-keyframes tranRight100 {
	0% { -webkit-transform:translate3d(100px,0,0); opacity: 0;}
    100% { -webkit-transform:translate3d(0,0,0); opacity: 1;}
}
@-o-keyframes tranRight100 {
	0% { -o-transform:translate3d(100px,0,0); opacity: 0;}
    100% { -o-transform:translate3d(0,0,0); opacity: 1;}
}


@media screen and (max-width:360px){
	.pp_wrap { width:280px;}
	.pp_wrap_inner4,.pp_wrap_inner5 {width:240px; height:163px;}
	.pp_wrap_inner5 {left:40px;}
	#parallax { bottom:-120px;}
	.circles {left:380px; top:60%; right:0;z-index:9;transform:rotate(-90deg) scale(0.5,0.5); -webkit-transform:rotate(-90deg) scale(0.5,0.5);}
}
@media screen and (max-height:568px)
{
	/*.copy_m {position:inherit; left:inherit; right:inherit; bottom:inherit;}*/
}
@media screen and (max-height:480px){
	#parallax {display:none;}
	
	/*.pp_wrap {margin-top:10%;}
	.commonH1 {margin-top:15%;}*/
}

@media screen and (min-width:414px){
	.circles {left:480px; top:65%; right:0;z-index:9;transform:rotate(-90deg) scale(0.6,0.6); -webkit-transform:rotate(-90deg) scale(0.6,0.6);}
}


#zz_ceng {background-color:rgba(0,0,0,.65);}
.closeSlide{position:absolute;width:30px; height:30px; z-index:10; margin-left:-15px; left:50%; bottom:-60px; cursor:pointer; color:#fff; text-align:center; padding-top:5px;font-size:36px; border-radius:15px; -webkit-border-radius:15px; line-height:1;}
.slidesCaseWrap {display:none;}
.slideBottom {position:absolute; bottom:0; left:0; width:100%;color:#fff; z-index:1000; padding:10px 0;text-shadow:1px 1px 2px rgba(0,0,0,.5),-1px -1px 2px rgba(0,0,0,.5); -webkit-text-shadow:1px 1px 2px rgba(0,0,0,.5),-1px -1px 2px rgba(0,0,0,.5); display:none;}
.slideBottom h5 { padding:0 10px; font-size:14px; color:#fff;margin-bottom:5px; }
.slideBottom div { padding:0 10px; color:#fff; font-size:12px;}
#swiper-container-wrap {left:0 !important; right:0 !important; position:absolute; z-index:1000; top:0; left:0;background-color:#fff; padding:0;}
#ceng1,#ceng2,#ceng3 {left:25px !important; right:25px !important; position:absolute; z-index:1000; top:0; left:0;background-color:#fff; padding:10px;}
#swiper-container5 { width:100%;}
#swiper-container5 img {width:100%; }
#fp-nav.right {right:5px;}

.fonts h5 { font-size:18px; color:#000; margin-bottom:10px; text-align:center;}
.fonts p {font-size:14px; color:#7d7d7d; line-height:1.5;}