#container.main{position:relative; margin-top: 608px; background:#fff; z-index: 2; padding:0;}
        
        
.service_box{padding:52px 0;}
.service_box .service_con{width:50%; height:425px;float:left; }
.service_box:after{content:""; display:block;clear:both;}
.service_box .service_con h2{display:block; margin-bottom:15px; font-size:40px; font-family: "Poppins-B"; font-weight:700}
.service_box .service_con p{line-height: 32px;padding:0 0 20px 0;}
.service_box .service_con:nth-of-type(odd){padding:70px 127px 0 0; border-right:solid 1px #ebebeb;}
.service_box .service_con:nth-of-type(even){padding:70px 0px 0 146px; text-align:right}
.service_box .service_con:nth-of-type(1){border-bottom:solid 1px #ebebeb; background:url(/images/main/main_conbg1.png) right 93px no-repeat}
.service_box .service_con:nth-of-type(2){border-bottom:solid 1px #ebebeb; background:url(/images/main/main_conbg2.png) left 93px no-repeat}
.service_box .service_con:nth-of-type(3){background:url(/images/main/main_conbg3.png) right 93px no-repeat}
.service_box .service_con:nth-of-type(4){background:url(/images/main/main_conbg4.png) left 93px no-repeat}
.service_box .service_con:nth-of-type(1) h2{color:#817dc5;}
.service_box .service_con:nth-of-type(2) h2{color:#59c3c3;}
.service_box .service_con:nth-of-type(3) h2{color:#01baef;}
.service_box .service_con:nth-of-type(4) h2{color:#ea657b;}
.service_con > a{display:inline-block; padding-right:19px;margin-bottom:10px; background:url(/images/main/icon_btn.png) no-repeat right center; color:#01baef; font-size:16px; font-weight:700}

.sample{padding:71px 0px 76px 0px;background:#e6f6f6}
.sample h2{ color:#01baef; font-size:40px;font-family: "Poppins-B"; margin-bottom:40px; text-align:center;}

.sample .btn_box{margin-top:27px; text-align:center;}
.sample_case{}
.sample_case:after{content:""; display:block; clear:both;}
.sample_case .case_type{width:49%; margin-right:1%; float:left; border:solid 2px; border-radius:5px; text-align:center; }
.sample_case .case_type h3{display:inline-block; padding:0 35px; line-height: 35px; background:#e6f6f6; position:relative; top:-15px; font-size: 30px;font-family: "Poppins-B"; font-weight:700 }
.sample_case .case_type:nth-of-type(2){margin-right:0%; margin-left:1%;}
.sample_case .case_type ul{padding:0px 50px 40px 50px;}
.sample_case .case_type ul:after{content:""; display:block; clear:both;}
.sample_case .case_type ul li{float:left; width:33.3%;height:147px; text-align:center; margin-top:30px; position:relative;}
.sample_case .case_type ul li a{display:block; width:100%; height:100%; position:absolute; left:0; top:0; text-align: center; padding:110px 0 0 0;}
.sample_case .case_type ul li:before{display:block; content:""; width:100px; height:100px; margin:0 auto;margin-bottom:11px; }
.sample_case .case_type:nth-of-type(1){color:#59c3c3;}
.sample_case .case_type:nth-of-type(1) ul li:nth-of-type(1):before{background:url(/images/main/icon_department1.png) center top no-repeat}
.sample_case .case_type:nth-of-type(1) ul li:nth-of-type(2):before{background:url(/images/main/icon_department2.png) center top no-repeat}
.sample_case .case_type:nth-of-type(1) ul li:nth-of-type(3):before{background:url(/images/main/icon_department3.png) center top no-repeat}
.sample_case .case_type:nth-of-type(1) ul li:nth-of-type(4):before{background:url(/images/main/icon_department4.png) center top no-repeat}
.sample_case .case_type:nth-of-type(1) ul li:nth-of-type(5):before{background:url(/images/main/icon_department5.png) center top no-repeat}
.sample_case .case_type:nth-of-type(1) ul li:nth-of-type(6):before{background:url(/images/main/icon_department6.png) center top no-repeat}
.sample_case .case_type:nth-of-type(2){color:#817dc5;}
.sample_case .case_type:nth-of-type(2) ul li:nth-of-type(1):before{background:url(/images/main/icon_industry1.png) center top no-repeat}
.sample_case .case_type:nth-of-type(2) ul li:nth-of-type(2):before{background:url(/images/main/icon_industry2.png) center top no-repeat}
.sample_case .case_type:nth-of-type(2) ul li:nth-of-type(3):before{background:url(/images/main/icon_industry3.png) center top no-repeat}
.sample_case .case_type:nth-of-type(2) ul li:nth-of-type(4):before{background:url(/images/main/icon_industry4.png) center top no-repeat}
.sample_case .case_type:nth-of-type(2) ul li:nth-of-type(5):before{background:url(/images/main/icon_industry5.png) center top no-repeat}
.sample_case .case_type:nth-of-type(2) ul li:nth-of-type(6):before{background:url(/images/main/icon_industry6.png) center top no-repeat}





.more_chnn{width:100%; padding:89px 55px 78px 55px;background:#e6e5f3}
.more_chnn .content_box h2{margin-bottom:47px;text-align:center; color:#817dc5; font-size:40px;font-family: "Poppins-B";}
.more_chnn .content_box h2 span{display:block;color:#3c4147; font-size:16px;font-family: "Poppins-R"; line-height:30px; font-weight: 400}
.more_chnn .btn_box{margin-top:65px; text-align:center;}
.icon_box{width:982px; margin:0 auto;}
.icon_box ul{}
.icon_box ul:after{content:""; display:block;clear:both;}
.icon_box ul li{width:125px; height:125px; margin-left:88px;padding-top:143px; float:left; text-align:center; font-size:18px; color:#59c3c3; font-weight:700; position:relative;}
.icon_box ul li a{display:block; width:100%; height:100%; position:absolute; left:0; top:0; padding:128px 0 0 0; z-index: 33; color:#59c3c3;}
.icon_box ul li:first-child{margin-left:0px;}
.icon_box ul li:before{content:""; display:block; position: absolute; border-top:dotted 8px #59c3c3; width:59px; left:-75px; top:60px;}
.icon_box ul li:nth-of-type(1):before{display:none;}
.icon_box ul li:after{content:""; display:block; width:125px; height:125px;position: absolute; left:0; top:0;}
.icon_box ul li:nth-of-type(1):after{background:url(/images/main/channimg1.png) no-repeat}
.icon_box ul li:nth-of-type(2):after{background:url(/images/main/channimg2.png) no-repeat}
.icon_box ul li:nth-of-type(3):after{background:url(/images/main/channimg3.png) no-repeat}
.icon_box ul li:nth-of-type(4):after{background:url(/images/main/channimg4.png) no-repeat}
.icon_box ul li:nth-of-type(5):after{background:url(/images/main/channimg5.png) no-repeat}
#main_visual{width:100%;position:fixed; left:0; top:110px; background-image: linear-gradient(180deg, #fff, #bae3ef); overflow:hidden;z-index: 1 }
#main_visual .content_box{height:498px;}
.obj_box span{display:block; position:absolute;}
.obj_box:after{content:""; display:block;  width:826px; height: 826px;background:#59c3c3; opacity:.2;border-radius: 50%;position:absolute; top:7px; left:-103px;}
.obj1{bottom:0px; left:559px; opacity: 0.8;z-index: 1;}
.obj2{top:53px; left:-100px;opacity: 0.8;z-index: 1;}
.obj3{top:76px; left:273px;opacity: 0.8;z-index: 1;}
.laptop{bottom:0px; left:-56px; z-index: 2}


.text_box{position:absolute; left:672px; top:69px;}
.text_box h1 > span{display:block;  font-family: "Poppins-B";font-size:50px; color:#01baef; position:relative;}
.text_box h1 > span em{font-size:40px; color:#3c4147; display:inline-block;}
.text_box h1 > span.txt1{}
.text_box h1 > span.txt2{margin-left:64px; top:-14px;}
.text_box h1 > span.txt3{margin-left:55px;top:-27px;font-size:50px;color:#3c4147;}
.text_box h1 > span.txt3 em{font-size:60px;color:#01baef;}
.text_box h1 > span.txt4{margin-left:119px;top:-46px;font-size:50px;color:#3c4147;}
.text_box h1 > span.txt4 em{font-size:60px;color:#01baef;}
.text_box > .btn_box{position:relative; top:-36px; left:210px;}


.text_box h1 > span{opacity: 0;transition:all .4s ease-in-out;}
.text_box h1 > span em{transform: translate3d(100px,0px,0);opacity: 0;transition:all .5s ease-in-out;}
.text_box h1 > span.txt1{transform: translate3d(-100px,0px,0);}
.text_box h1 > span.txt1 em{transform: translate3d(-100px,0px,0);}
#main_visual.start .text_box h1 > span.txt1{opacity: 1;transform: translate3d(0px,0px,0);}
#main_visual.start .text_box h1 > span.txt1 em{transform: translate3d(0px,0px,0); position: relative;}
#main_visual.start .text_box h1 > span.txt1 em{opacity: 1; transition-delay: .3s,.6s}


.text_box h1 > span.txt2{transform: translate3d(-100px,0px,0);transition-delay: .5s,.6s}
.text_box h1 > span.txt2 em{transform: translate3d(100px,0px,0);}
#main_visual.start .text_box h1 > span.txt2{opacity: 1;transform: translate3d(0px,0px,0);}
#main_visual.start .text_box h1 > span.txt2 em{transform: translate3d(0px,0px,0); position: relative;}
#main_visual.start .text_box h1 > span.txt2 em{opacity: 1; transition-delay: .6s,.8s}

.text_box h1 > span.txt3{transform: translate3d(100px,0px,0);transition-delay: .6s,.7s}
.text_box h1 > span.txt3 em{transform: translate3d(-100px,0px,0);}
#main_visual.start .text_box h1 > span.txt3{opacity: 1;transform: translate3d(0px,0px,0);}
#main_visual.start .text_box h1 > span.txt3 em{transform: translate3d(0px,0px,0); position: relative;}
#main_visual.start .text_box h1 > span.txt3 em{opacity: 1; transition-delay: .8s,1s}


.text_box h1 > span.txt4{transform: translate3d(100px,0px,0);transition-delay: .6s,.7s}
.text_box h1 > span.txt4 em{transform: translate3d(-100px,0px,0);}
.text_box > .btn_box .btn:after{bottom:0px;transition:cubic-bezier(0.3, 1.65, 0.42, 1.135) 0.4s}
.text_box > .btn_box .btn{top:6px; opacity: 0;transition:cubic-bezier(0.3, 1.65, 0.42, 1.135) 0.4s}
#main_visual.start .text_box h1 > span.txt4{opacity: 1;transform: translate3d(0px,0px,0);}
#main_visual.start .text_box h1 > span.txt4 em{transform: translate3d(0px,0px,0); position: relative;}
#main_visual.start .text_box h1 > span.txt4 em{opacity: 1; transition-delay: .8s,1s}
#main_visual.start .text_box > .btn_box .btn:after{bottom:-6px;}
#main_visual.start .text_box > .btn_box .btn:hover:after{bottom:0px;}
#main_visual.start .text_box > .btn_box .btn{opacity:1;transition-delay: 1.2s,1.5s}


.obj_box:after,.obj_box span,.laptop,.obj1,.obj2,.obj3,.text_box > span{transform-origin:50% 50%; transition: all 0.4s ease-in-out;}
.obj1{transform:rotate(45deg);transform-origin:right bottom;opacity: 0; transition-delay: .6s;transition:cubic-bezier(0.3, 1.65, 0.42, 1.135) 0.4s}
.obj2{transform: translate3d(-20px,0px, 0);opacity: 1; transition-delay: .5s;opacity: 0;}
.obj3{transform:rotate(20deg);transform-origin:left top;opacity: 0; transition-delay: .7s; }
.obj_box:after{transform: translate3d(0px,-350px, 0) scale(0.2); opacity: 0.6; transition:all cubic-bezier(0.680, -0.550, 0.265, 1.550) 0.4s}
.laptop{transform: translate3d(0px,450px, 0) ; }



#main_visual.start .obj_box:after{width:826px;border-radius: 50%; opacity: 0.2}
#main_visual.start .laptop,#main_visual.start .obj_box:after,#main_visual.start .obj1,#main_visual.start .obj2{transform: translate3d(0px,0px, 0) scale(1); }
#main_visual.start .laptop{transition-delay: .2s,.4s}
#main_visual.start .obj1{transform:rotate(0deg);opacity: 1;transition-delay: .3s, .4s}
#main_visual.start .obj2{opacity: 1;transition-delay: .6s, .4s}
#main_visual.start .obj3{transform:rotate(0deg);opacity: 1;transition-delay: .7s, .7s}


.gradient_box{background-image: linear-gradient(0deg, #fff 60%, #e5f8fd);}
.completesms{padding:80px 0; }
.completesms h2{color:#01baef; font-size:40px; text-align:center;font-family:"Poppins-B"; margin-bottom:20px;}
.complete_content{padding:0 0px 50px 0;text-align:center; color:#3c4147; font-size:18px; line-height:33px;font-family:"Poppins-M";}
.complete_content1{text-align:center;color:#3c4147; font-size:18px; line-height:33px;font-family:"Poppins-M";}
.completesms_list{margin-bottom:100px; }
.completesms_list ul{}
.completesms_list ul:after{content:""; display:block; clear:both;}
.completesms_list ul li{float:left; width:16.6%;text-align:center;}
.completesms_list ul li a{display:block; color:#01baef; font-size: 14px; text-align:center;font-family:"Poppins-M"; font-weight:400; position:relative;}
.completesms_list ul li a:before{content:"";display:block; width:100%; height: 100%; margin:0 auto 20px auto;max-width:120px; height:120px; background:#fff; border-radius:50%;}
.completesms_list ul li a:after{content:"";display:block; width:100%; height: 100%;height:120px; position:absolute; left:0; top:0;}
.completesms_list ul li:nth-of-type(1) a:after{background:url(/images/main/icon_complete1.png) no-repeat center center; left:5px;}
.completesms_list ul li:nth-of-type(2) a:after{background:url(/images/main/icon_complete2.png) no-repeat center center; left:-2px;}
.completesms_list ul li:nth-of-type(3) a:after{background:url(/images/main/icon_complete3.png) no-repeat center center;}
.completesms_list ul li:nth-of-type(4) a:after{background:url(/images/main/icon_complete4.png) no-repeat center center;left:-5px;}
.completesms_list ul li:nth-of-type(5) a:after{background:url(/images/main/icon_complete5.png) no-repeat center center;left:-2px;}
.completesms_list ul li:nth-of-type(6) a:after{background:url(/images/main/icon_complete6.png) no-repeat center center;}




.btn > span >em.view{padding-left:25px; background:url(/images/main/ico_view.png) no-repeat left 13px;}
.main_roll{padding:0px 0 0 0; margin-bottom:116px;}
.main_roll .content_box > p{font-size:20px; line-height:45px; text-align:center; padding-top:40px;}
.main_roll .btn_box{text-align:center; margin-top:57px;}
.main_roll .btn_box .btn{margin-left:10px;}
.logo_rollbox{margin-bottom:50px;padding:20px 0 0 0;text-align:center;}

.motion_box{position:relative;}
.motion_box:after{content: ""; display:block; clear:both;}
.motion_box .txt_box{width:422px; }
.motion_box .txt_box strong{display:block; margin-bottom:8px;}
.motion_box .txt_box strong span{display:block; font-size:34px; color:#3c4147;font-family: "Poppins-M"; line-height:50px}
.motion_box .txt_box strong span em{font-family: "Poppins-B";}
.motion_box .txt_box p{font-size:16px; line-height:30px; padding-bottom:24px;}
.motion_box .visual{position:absolute; right:0; top:0;}
.motion_box .visual span{display:block; position:absolute;}
.motion_box .visual:after,.motion_box .visual:before{content:"" ; display:block; position: absolute; z-index: 1;}
.phone{width:224px; height:454px;background:url(/images/main/phone.png) no-repeat; z-index: 2}
.phone.pnone_num{background:url(/images/main/phone1.png) no-repeat; width:234px; height:464px; }
.phone em{display:block; position: absolute;z-index: 3}
.macbook{width:701px; height:417px;background:url(/images/main/mac.png) no-repeat; z-index: 2;}
.macbook em{display:block; position:absolute;width:516px; height:340px; left:90px; top:21px;  }

.macbook em > span{display:block; position:absolute;width:516px; height:340px; left:0px; top:0px;   z-index:2;background:#fff}
.macbook em > span:first-child{background:url(/images/main/com_in.png) no-repeat;transform-style: preserve-3d; z-index:1}


.motion_box.main1 .txt_box{padding:80px 0 60px 100px;box-sizing:content-box;}
.motion_box.main1 .txt_box strong span:nth-of-type(1) em{font-size:42px; color:#59c3c3;}
.motion_box.main1 .txt_box strong span:nth-of-type(2) em{font-size:48px; color:#01baef;}

.motion_box.main1{padding-bottom:297px;}
.motion_box.main1 .visual{width:600px}
.motion_box.main1 .visual .phone{left:172px;}
.motion_box.main1 .visual:before{width:231px;height:454px;background:url(/images/main/main1_bg1.png) no-repeat left center; left:0;opacity: 1}
.motion_box.main1 .visual:after{width:192px;height:454px;background:url(/images/main/main1_bg2.png) no-repeat left center; right:37px;opacity: 1}
.motion_box.main1 .visual .phone em{opacity:0;transition: all 0.3s ease-in-out;transform: matrix3d(0.768, 0, 0, 0, 0, 0.768, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
.motion_box.main1 .visual .phone em.me1{width:68px; height:23px;right:20px; top:94px;background:url(/images/main/message1.png) no-repeat; background-size: 100%;}
.motion_box.main1 .visual .phone em.me2{width:134px; height:65px;left:18px; top:124px;background:url(/images/main/message2.png) no-repeat;background-size: 100%;}
.motion_box.main1 .visual .phone em.me3{width:27px; height:24px;right:20px; top:196px;background:url(/images/main/message3.png) no-repeat;background-size: 100%;}
.motion_box.main1 .visual .phone em.me4{width:132px; height:57px;left:18px; top:233px;background:url(/images/main/message4.png) no-repeat;background-size: 100%;}
.motion_box.main2 .txt_box{float:right; padding:17px 0 60px 0;}
.motion_box.main2{padding-bottom:242px;}
.motion_box.main2 .visual{width:691px; left:0; top:0;}
.motion_box.main2 .txt_box strong span:nth-of-type(1) em{font-size:48px; color:#01baef;}
.motion_box.main2 .txt_box strong span:nth-of-type(2) em{font-size:42px; color:#59c3c3;}
.motion_box.main2 .visual:before{width:183px;height:413px;background:url(/images/main/main2_bg1.png) no-repeat left center; left:-76px;opacity:1}
.motion_box.main2 .visual:after{width:231px;height:413px;background:url(/images/main/main2_bg2.png) no-repeat left center; right:-58px;opacity: }

.motion_box.main3{padding-bottom:122px;}
.motion_box.main3 .txt_box{padding:80px 0 60px 100px;box-sizing:content-box;}
.motion_box.main3 .txt_box strong span:nth-of-type(1) em{font-size:42px; color:#59c3c3;}
.motion_box.main3 .txt_box strong span:nth-of-type(2) em{font-size:48px; color:#01baef;}
.motion_box.main3 .visual{width:600px}
.motion_box.main3 .visual .phone{left:172px;}
.motion_box.main3 .visual:before{width:231px;height:454px;background:url(/images/main/main1_bg1.png) no-repeat left center; left:0;opacity: 1}
.motion_box.main3 .visual:after{width:192px;height:454px;background:url(/images/main/main1_bg2.png) no-repeat left center; right:37px;opacity: 1}
.motion_box.main3 .visual .phone em{opacity:0;transition: all 0.3s ease-in-out;transform: matrix3d(0.768, 0, 0, 0, 0, 0.768, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
.motion_box.main3 .visual .phone em.me1{width:136px; height:37px;right:20px; top:94px;background:url(/images/main/message5.png) no-repeat;}
.motion_box.main3 .visual .phone em.me2{width:133px; height:35px;left:18px; top:135px;background:url(/images/main/message6.png) no-repeat;}


.motion_box .btn_box .btn:after{bottom:0px;transform-origin:50% 50%; /*transition: all 0.3s cubic-bezier(0.54, 0.38, 0.89, 0.41);*/}
.motion_box .btn_box .btn{/*top:6px;*/ opacity: 0;transform-origin:50% 50%; transition:all 0.3s cubic-bezier(0.54, 0.38, 0.89, 0.41);}

.motion_box.ani .btn_box .btn:after{bottom:-6px;/*transition-delay: .7s,.8s*/}
.motion_box.ani .btn_box .btn{top:0px; opacity:1;/*transition-delay: .7s,.8s*/}        
.main5.motion_box .btn_box .btn{opacity: 1;}
.main5.motion_box .btn_box .btn:after{opacity: 1; bottom:-6px;}

.motion_box.main1{transform:translate3d(0px,100px,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}   
/*.motion_box.main1 .visual:before{transform:translate3d(100px,0,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}
.motion_box.main1 .visual:after{transform:translate3d(-100px,0,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}*/
.motion_box.main1 .visual .phone{transform:scale(0.5);transform-origin:50% 50%; transition:all cubic-bezier(0.3, 1.65, 0.42, 1.135) 0.4s;opacity: 0}

.motion_box.main2{transform:translate3d(0px,100px,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}   
/*.motion_box.main2 .visual:before{transform:translate3d(150px,0,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}
.motion_box.main2 .visual:after{transform:translate3d(-150px,0,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}*/

.motion_box.main3{transform:translate3d(0px,100px,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}   
/*.motion_box.main3 .visual:before{transform:translate3d(150px,0,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}
.motion_box.main3 .visual:after{transform:translate3d(-150px,0,0);transform-origin:50% 50%; transition: all 0.4s ease-in-out;}*/
.motion_box.main3 .visual .phone{transform:scale(0.5);transform-origin:50% 50%; transition:all cubic-bezier(0.3, 1.65, 0.42, 1.135) 0.4s;opacity: 0}



.motion_box.main1.ani,.motion_box.main2.ani,.motion_box.main3.ani{transform:translate3d(0px,0px,0);}
.motion_box.main1.ani .visual:before,.motion_box.main2.ani .visual:before,.motion_box.main3.ani .visual:before{transform:translate3d(0px,0,0);transition-delay: .2s,.5s;opacity: 1}
.motion_box.main1.ani .visual:after,.motion_box.main2.ani .visual:after,.motion_box.main3.ani .visual:after{transform:translate3d(0px,0,0);transition-delay: .3s,.6s;opacity: 1}
.motion_box.main1.ani .visual .phone em{opacity:1;transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
.motion_box.main1.ani .visual .phone em.me1{transition-delay: .5s,.2s;transform-origin: right bottom; opacity:1;}
.motion_box.main1.ani .visual .phone em.me2{transition-delay: .8s,.2s;transform-origin: left bottom; opacity:1;}
.motion_box.main1.ani .visual .phone em.me3{transition-delay: 1.1s,.2s;transform-origin: right bottom; opacity:1;}
.motion_box.main1.ani .visual .phone em.me4{transition-delay: 1.4s,.2s;transform-origin: left bottom; opacity:1;}



.motion_box.main3.ani .visual .phone em{opacity:1;transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
.motion_box.main3.ani .visual .phone em.me1{transition-delay: .5s,.2s;transform-origin: right bottom; opacity:1;}
.motion_box.main3.ani .visual .phone em.me2{transition-delay: .8s,.2s;transform-origin: left bottom; opacity:1;}

.motion_box.main1.ani .visual .phone,.motion_box.main3.ani .visual .phone{transform:scale(1);transition-delay: .4s,.8s; opacity: 1}

.motion_box.main2 .visual .macbook{
transform:scale(1)   matrix3d(1,0,0.00,0,0.00,0.1,0.00,0,0,0,1,0,0,0,0,1);
-webkit-transform:scale(1)  matrix3d(1,0,0.00,0,0.00,0.1,0.00,0,0,0,1,0,0,0,0,1);
opacity: 0;
transition:all cubic-bezier(0.3, 1.65, 0.42, 1.135) 0.6s; transition-delay:.3s;
overflow:hidden;
}
.motion_box.main2.ani .visual .macbook{
transform-origin: left bottom 0px; 
transform:scale(1)  matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
-webkit-transform: scale(1) matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
transition-delay: .4s,.8s; opacity: 1
}

.motion_box.main2 .visual .macbook > em{overflow: hidden; }
.motion_box.main2 .visual .macbook > em span:nth-child(2){

}
.motion_box.main2.ani .visual .macbook em > span:nth-child(2){animation: step 3s cubic-bezier(0.3, 1.65, 0.42, 1.135) .9s forwards;}
/*animation: step .5s cubic-bezier(0.3, 1.65, 0.42, 1.135) .9s forwards;*/
@keyframes step {
to {top:340px; filter: blur(16px);}
from {top:0;}
}

.icon_box ul li, .icon_box ul li span,.icon_box ul li:after,.icon_box ul li:before{transition:cubic-bezier(0.3, 1.65, 0.42, 1.135) .4s; opacity: 0}
.icon_box ul li:nth-child(1):after,.icon_box ul li:nth-child(1):before,.icon_box ul li:nth-child(1) span{transition-delay: .4s;}
.icon_box ul li:nth-child(2):after,.icon_box ul li:nth-child(2):before,.icon_box ul li:nth-child(2) span{transform:translate3d(-150px,0,0); transition-delay: .6s;}
.icon_box ul li:nth-child(3):after,.icon_box ul li:nth-child(3):before,.icon_box ul li:nth-child(3) span{transform:translate3d(-300px,0,0); transition-delay: .7s;}
.icon_box ul li:nth-child(4):after,.icon_box ul li:nth-child(4):before,.icon_box ul li:nth-child(4) span{transform:translate3d(-450px,0,0); transition-delay: .8s;}
.icon_box ul li:nth-child(5):after,.icon_box ul li:nth-child(5):before,.icon_box ul li:nth-child(5) span{transform:translate3d(-600px,0,0); transition-delay: 1s;}
.icon_box li:nth-child(2):after{transition-delay: .6s;}
.icon_box li:nth-child(3):after{transition-delay: .8s;}
.icon_box li:nth-child(4):after{transition-delay: 1.0s;}
.icon_box li:nth-child(5):after{transition-delay: 1.2s;}
.motion_box.main4.ani .btn_box .btn:after{bottom:-6px;}
.motion_box.main4.ani .btn_box .btn{top:0px; opacity:1;transition-delay: 1.5s,.4s}   

.motion_box.main4.ani .icon_box ul li,.motion_box.main4.ani .icon_box ul li span,.motion_box.main4.ani .icon_box ul li:after,.motion_box.main4.ani .icon_box ul li:before{transform:translate3d(0px,0px,0); opacity:1 }



.btn:hover:after{bottom:0px !important; transition:.3s !important }
.btn:hover{/*top:6px  !important;*/transition:.3s !important}





@media screen and (max-width:1200px){
    .text_box{left:572px;}
    .macbook{width:571px; background-size:100%;}
    .macbook em > span{width:400px; height:272px;background-size:100% !important; left:-20px;}
    .motion_box.main1{padding-bottom:197px;}
    .completesms_list ul li{width:33.3%; margin-bottom:10px;}
}
@media screen and (max-width:1119px){
	.service_box{padding:0;}
    .service_box .service_con{height:450px;}
}
@media screen and (max-width:1105px){
	.service_box{padding:0;}
    .service_box .service_con{height:500px;}
}
@media screen and (max-width:1080px){
	.text_box h1 > span{color:#817dc5;}
	.text_box h1 > span.txt3 em{color:#817dc5;}
	.text_box h1 > span.txt4 em{color:#817dc5;}
    .text_box{width:100%; left:0; text-align:center; z-index: 3; margin-left:-22%; }
    #main_visual .content_box{height:418px;}
    #main_visual.start .laptop{opacity:0.3;left:auto; right:10px;}
    #main_visual.start .laptop img{width:560px}

    #main_visual.start .obj1,#main_visual.start .obj2,#main_visual.start .obj3{opacity: 0}
    .text_box > .btn_box{left:22%; width:100%; text-align:center;}
    .text_box > .btn_box .btn{width:45%; display:inline-block; min-width: auto}
    .text_box > .btn_box .btn span{width:100%;min-width: auto}
    #container.main{margin-top:590px;}
    .main_roll .content_box > p{font-size:15px; line-height:32px;}
    .icon_box{width:auto;}
    .icon_box ul li{margin-left:58px;}
    .icon_box ul li:before{width:39px; left:-45px;}
    .service_box .service_con{width:100%;height:auto; float:none; }
    .service_box .service_con:nth-of-type(odd){border-right:none;}
    .service_box .service_con:nth-of-type(4){border-top:solid 1px #ebebeb;}
    .service_box .service_con{height:auto; padding-bottom:40px !important;}
    .motion_box.main1 .visual .phone,.motion_box.main2 .visual .macbook,.motion_box.main1.ani .visual .phone, .motion_box.main3.ani .visual .phone{display:none}
    .motion_box .txt_box{width:auto;}
    .main_roll{margin-bottom:50px}
    .motion_box.main1 .txt_box,.motion_box.main3 .txt_box,.motion_box.main2 .txt_box{padding:40px 30px 30px 30px;}
    .motion_box.main1,.motion_box.main2,.motion_box.main3{padding-bottom: 50px}
    .icon_box{margin-bottom:50px; min-height:auto;text-align:center;}
    .icon_box ul li{width:85px; float:none; padding-top:113px; display:inline-block; vertical-align:top}
    .icon_box ul li:after{width:100% !important; height:100% !important; width:auto; height:auto;background-size:100% !important;}
    .icon_box ul li:before{top:40px;}
    .sample_case .case_type{width:100%; float:none; margin:40px 0 0 0 !important;}
    .logo_rollbox,.main_con{width:100%; overflow: hidden;}
    .btn > span >em.view{background-position: left 8px !important}
    .main_roll .btn_box .btn{margin-left:0;}
    .icon_box ul li a{padding:98px 0 0 0;}
    .service_box .service_con:nth-of-type(1){background-size:230px;}
}
@media screen and (max-width:900px){
.text_box > .btn_box{left:0;}
.text_box{margin-left:0;}
#main_visual.start .laptop{right:0;width: 100%;text-align: center;}
#main_visual.start .laptop img{width:560px}
.motion_box .txt_box strong span{font-size:24px; line-height:40px;}
.motion_box.main1 .txt_box strong span:nth-of-type(1) em,.motion_box.main3 .txt_box strong span:nth-of-type(2) em{font-size:32px;}
.motion_box.main1 .txt_box strong span:nth-of-type(2) em,
.motion_box.main2 .txt_box strong span:nth-of-type(1) em,.motion_box.main3 .txt_box strong span:nth-of-type(1) em{font-size:29px}
.motion_box.main2 .txt_box strong span:nth-of-type(2) em{font-size:31px }
#main_visual.start .obj_box:after{left:0; width:768px; height:768px;}
.more_chnn .content_box h2{font-size:25px; font-weight:700}
.more_chnn{padding:40px 0 30px 0;}
.icon_box{margin-bottom:30px;}
.icon_box ul li:before{display:none}
.icon_box ul li{height:175px; margin-left:0px;}

.more_chnn .btn_box{margin-top:0;} 
.service_box .service_con h2,.sample h2{font-size:28px;}
.sample_case .case_type h3{font-size:20px; padding:0 15px;}
.service_box .service_con p{line-height:29px }
.service_box .service_con:nth-of-type(odd){padding:35px 0px 20px 0;}
.service_box .service_con:nth-of-type(even){padding:35px 0 20px 0;}
.sample_case .case_type ul li{width:50%; height:140px;position:relative;    font-weight: 700;font-size: 13px; }
.sample_case .case_type ul{padding:0 20px 0 20px;}
.sample_case .case_type ul li:before{width:70px !important; height:70px  !important; background-size:100% !important;  }
.sample_case .case_type ul li a{padding:88px 0 0 0;}
.completesms{padding:40px 0;}
.completesms h2{font-size:25px; margin-bottom:10px;}
#main_visual{position:relative;}
#container.main{margin-top:110px;}
#main_visual .content_box{min-height:438px;height:auto;}
.service_box .service_con:nth-of-type(2){background-position:left 43px;}
}
@media screen and (max-width:700px){

}
@media screen and (max-width:516px){
#main_visual.start .laptop{opacity: 0.1}
#main_visual.start .obj_box:after{opacity: 0}
#container.main{margin-top:390px;}
#main_visual.start .laptop{top:30px; opacity:0.2}
#main_visual.start .laptop img{height:238px; width:auto}
#main_visual{position:fixed;}
.text_box{top:0px;}
.text_box h1 > span{font-size:30px;}
.text_box h1 > span.txt2{margin-left:12px; top:-5px;}
.text_box h1 > span.txt3 em{font-size:30px;}
.text_box h1 > span.txt4 em{font-size:30px;}
.text_box h1 > span em{font-size:25px;}
.text_box h1 > span.txt3{font-size:25px; margin-left:15px; top:-10px;}
.text_box h1 > span.txt4{font-size:25px; margin-left:40px; top:-18px;}
#main_visual.start .obj_box:after{    width: 360px;height: 360px;top: 50%; opacity:.2}
.more_chnn .btn > span > em{font-size: 12px}
.text_box > .btn_box{top:0;}
.logo_rollbox{margin-bottom:25px;}
.start .btn > span > em{font-size:11px;}
.motion_box.main1 .txt_box, .motion_box.main3 .txt_box, .motion_box.main2 .txt_box{padding:20px 0;}
.service_box .service_con:nth-of-type(4){background-size: 260px auto !important; background-position: left 133px !important}
.completesms_list{margin-bottom: 50px}
.completesms_list ul li{width:50%; margin-bottom:20px;} 
.completesms_list ul li a:before{margin:0 auto 10px auto; max-width:80px; height:80px;}
.completesms_list ul li a:after{height:80px; background-size:40px auto !important; }
.completesms_list ul li:nth-of-type(1) a:after{background-size:30px auto !important; }
.completesms_list ul li:nth-of-type(6) a:after{background-size:20px auto !important; }
.complete_content{font-size:13px;}
.complete_content1{font-size:13px;}
.complete_content br{display: none}
nav > ul > li:hover > ul{top:-10px !important;}
nav > ul > li > ul > li > a{padding:10px 0 9px 30px !important}
nav > ul > li > ul > li > ul >li > a{padding:6px 0 6px 53px; }
nav > ul > li > ul > li > ul >li > a:after{left:41px;}
nav > ul > li:nth-of-type(6) > ul{left:0 !important;}
.icon_box ul li a{padding:98px 0 0 0;}
.icon_box ul li{height:156px;}

}
@media screen and (max-width:320px){
.text_box > .btn_box .btn{ width:53%; }
}