@charset "utf-8";
canvas{position:absolute; margin-top:-1000em;}
.avantB{font-family: 'Arial';}
.avant{font-family: 'Arial';}
.clh{clear: both; height: 0; font-size: 0;}

.navbar {height:72px; position:fixed; z-index: 5; width: 100%; color:#FFF; margin-top: 30px;}
.navbar__left {position: absolute; left: 0; top: 0; padding-left: 4.7%; height: 72px}
.navbar__left:after {content: ""; width: 0; display: inline-block; height: 100%; vertical-align: middle}
.navbar__center {height: 72px; padding-left: 50px; padding-right: 8%; text-align: right;}

.home-link:after {display: inline-block; vertical-align: middle;}

.logo__wrp {font-size: 0;display: inline;}
.home-link {font-size: 0;display: inline-block; vertical-align: middle;}
.logo__icon {display: inline-block;width:140px;height:45px;}
.lgcolor{ display:inline-block; width:100%; height:100%; background:url("../images/logo_white.png") no-repeat left center; background-size:cover;}
.dot {display: inline-block;vertical-align: middle;margin: 0 10px;}

.nav-links {font-size: 0;}
.nav-item {display: inline-block;vertical-align: middle;padding: 0 28px}
.nav-item .nav-link {color: #FFF;}
.nav-item.selected>.nav-link {color: #FFF;font-weight: 500}
.nav-item>.nav-link {display: block;height: 72px;line-height: 72px;font-size: 16px;position: relative}
.nav-item>.nav-link:after {content: "";position: absolute;display: block;width: 60px;height: 1px;background-color: #FFF;border-radius: 2px;left: 50%;margin-left: -30px;bottom: 25%;opacity: 0;
transform: scaleX(0); transition: all .2s cubic-bezier(.18, .89, .17, .88), opacity .15s ease}
.nav-item>.nav-link:hover:after {opacity: 1; transform: scaleX(1)}
.nav-item.selected>.nav-link:after {opacity: 1; bottom: 75%; transform: scaleX(1)}

body.nav-black .navbar {box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .10);background-color: rgba(255,255,255,0.98);color:#999;margin-top: 0;}
body.nav-black .lgcolor{background:url("../images/logo_black.png") no-repeat left center; background-size:cover;}
body.nav-black .nav-item>.nav-link {color: #222;}
body.nav-black .nav-item.selected>.nav-link {color: #000;}
body.nav-black .nav-item>.nav-link:after {background-color: #000;}

@keyframes navShadow { 
	0% {transform: translateX(0)} to {transform: translateX(44px)}
}

.p-nav__open {letter-spacing: 2.5px}
.p-nav__close,.p-nav__open {position:fixed; color: #FFF; top: 27px; right: 4.7%; height: 19px; font-size: 12px; font-weight: 700; line-height: 22px; margin-top: 30px; cursor: pointer}
.p-nav__close>p,.p-nav__open>p {transition: .5s cubic-bezier(.08, .92, .35, 1)}
.p-nav__open>p {display: none}
.p-nav__open {z-index: 22; width: 76px; display: block}
.p-nav__open::after {z-index: -1; right: -50px; top: -58px; width: 175px; height: 135px; transition: opacity .3s; display: none}
.p-nav__open>span {position: absolute; right: 0; width: 27px; height: 2px; overflow: hidden; transition: .3s}
.p-nav__open>span>span {position: absolute; z-index: 1; left: -8px; top: 0; height: 100%; width: 3px; background-color: #191919; transition: opacity .3s, background-color .3s}
.p-nav__open>span::after,.p-nav__open>span::before {content: ''; position: absolute; left: -30px; top: 0; height: 100%; width: 100%; background-color: #fff}
.p-nav__open>span::after {left: 0%}
.p-nav__open>span:nth-child(2) {top: 0}
.p-nav__open>span:nth-child(2)::after,.p-nav__open>span:nth-child(2)::before {transition: transform .5s cubic-bezier(.08, .92, .35, 1), background-color .3s}
.p-nav__open>span:nth-child(2)>span {animation: navShadow 1.3s cubic-bezier(.79, .17, .15, .96) infinite}
.p-nav__open>span:nth-child(3) {top: 9px}
.p-nav__open>span:nth-child(3)::after,.p-nav__open>span:nth-child(3)::before {transition: transform .5s .05s cubic-bezier(.08, .92, .35, 1), background-color .3s}
.p-nav__open>span:nth-child(3)>span {animation: navShadow 1.3s .1s cubic-bezier(.79, .17, .15, .96) infinite}
.p-nav__open>span:nth-child(4) {bottom: 0}
.p-nav__open>span:nth-child(4)::after,.p-nav__open>span:nth-child(4)::before {transition: transform .5s .1s cubic-bezier(.08, .92, .35, 1), background-color .3s}
.p-nav__open>span:nth-child(4)>span {animation: navShadow 1.3s .2s cubic-bezier(.79, .17, .15, .96) infinite}
.p-nav__close {z-index: 12; width: 140px; display: block; letter-spacing: 3.3px}
.p-nav__close>span {position: absolute; right: 0; width: 25px; height: 1px; overflow: hidden; transition: .5s cubic-bezier(.08, .92, .35, 1); transform-origin: right}
.p-nav__close>span>span {position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #fff; transform-origin: left; transition: .7s cubic-bezier(.08, .92, .35, 1); transform: translate3d(0, 0, 0) scaleX(1)}
.p-nav__close>span:nth-child(2) {top: 1px; transform: translateX(0) rotate(-46deg) scaleX(1)}
.p-nav__close>span:nth-child(3) {bottom: -1px; transform: translateX(0) rotate(46deg) scaleX(1)}
.p-nav__open {opacity: 1; pointer-events: all; transition: .4s 0s; z-index: 20;}
.p-nav__close {pointer-events: none; opacity: 0; transform-origin: center; transition: .2s}
.p-nav__close p {opacity: 0; transform: translateX(10px); transition: transform 0s .5s, opacity .2s}

body.is-navOpen .p-nav__open {opacity: 0; transition: .4s; pointer-events: none}
body.is-navOpen .p-nav__close {pointer-events: all; opacity: 1; transform: translateX(0); transition: transform .4s .35s cubic-bezier(.79, .17, .15, .96), opacity .3s .45s}
body.is-navOpen .p-nav__close p {opacity: 1; transform: translateX(0); transition: .3s .45s}
body.nav-black .p-nav__open {color: #000; margin-top: 0; }
body.nav-black .p-nav__open>span::after,body.nav-black .p-nav__open>span::before {background-color: #191919}
body.nav-black .p-nav__open>span>span {background-color: #fff}
body.nav-black .p-nav__logo>a>p,body.nav-black .p-nav__open>p {color: #191919 !important}
body.nav-black .p-nav__logo>a>svg {fill: #191919}


.mobile-nav-bg:before{width:0;height:0;border-radius:20px;content:"";position:absolute;top:0;right: 0;-webkit-transform: translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transition-duration:0.66s;transition-duration:0.66s;-webkit-transition-timing-function:swing;transition-timing-function:swing;z-index: 10;}
.mobile-nav{position:fixed;top:10%;left:0;width:100%;height:100%;z-index:15;-webkit-transition-duration:0.66s;transition-duration:0.66s;-webkit-transition-timing-function:swing;transition-timing-function:swing;-webkit-transform:translateY(100%);transform:translateY(100%);line-height:2;}
.mobile-nav ul li {padding: 10px 50px;}
.mobile-nav ul li .vlk{display:block;text-align:center;color:white;text-decoration:none;font-size:32px;-webkit-transition-duration:0.25s;transition-duration:0.25s;line-height: 1.3;padding: 15px 0;}
.mobile-nav ul li .vlk:hover{border-bottom: 1px solid #666;}
.mobile-nav ul li .vlk i{display:block;font-size:0.7em;font-style: normal; letter-spacing: 3px;}

body.is-navOpen .lower-screen{-webkit-transform:translateY(60px);transform:translateY(60px);transition-duration:0.25s;-webkit-transition-duration:0.25s;}
body.is-navOpen .mobile-nav{-webkit-transform:translateY(0);transform:translateY(0);}
body.is-navOpen .mobile-nav-bg:before{position:fixed;top:0;right:-2000px;width:4000px;height:5000px;border-radius:0%;background-color:rgba(30,30,30,0.9);}

.mui-bar-tab{position: fixed;z-index: 100;right: 0;left: 0;background-color: #FFF;-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .55);box-shadow: 0 0 1px rgba(0, 0, 0, .55); -webkit-backface-visibility: hidden;backface-visibility: hidden;bottom: 0;display: none;width: 100%;height:60px;padding: 0;table-layout: fixed;border-top: 0;border-bottom: 0;-webkit-touch-callout: none;line-height: 1.3;}
.mui-bar-tab .mui-tab-item{display: table-cell;overflow: hidden;width: 1%;height: 50px;text-align: center;vertical-align: middle;white-space: nowrap;text-overflow: ellipsis; position: relative;color: #444;}
.mui-bar-tab .mui-tab-item.mui-active{color: #0050ff;}
.mui-bar-tab .mui-tab-item.mui-active::after{content: ''; position: absolute; left: 50%; top:30%; height:16px; width:16px; background-color: rgba(0,187,157,0.3); border-radius: 100%; z-index: 1;}

.mui-bar-tab .mui-tab-item .mui-icon{top: 3px;width: 24px;height: 24px;padding-top: 0;padding-bottom: 0; font-size: 26px;}
.mui-bar-tab .mui-tab-item .mui-icon ~ .mui-tab-label{font-size: 1rem;display: block;overflow: hidden;text-overflow: ellipsis;}
.mui-bar-tab .mui-tab-item .mui-icon:active{background: none;}

.mobtop{ color:#FFF; line-height:1.6; position:relative; text-align:center; width:100%; overflow:hidden;height: 500px;background:#0050ff url('img/s5_k_ico.svg') center 10% no-repeat; background-size:auto 240%;}
.mobtop .contentinfo{ width:100%;position:absolute; top:50%; margin-top:-45px; text-align:center; z-index:1; overflow:hidden; left:0;}
.mobtop .contentinfo h2{color:#FFF; font-size:42px; font-weight:bold; text-align: center;}
.mobtop .contentinfo h2::after{height: 2px; width: 30px; display: block; content: ''; background-color: #FFF; margin: 12px auto 20px;}
.mobtop .contentinfo i{font-size:18px; line-height:1;}
.mobtop .contentinfo p{font-size:14px; color: rgba(255,255,255,0); transition: all 0.6s;}
.mobtop .contentinfo:hover p{color: rgba(255,255,255,0.6);}
.mobtop em{ display:block; width:15%; margin:0 auto; height:2em; display:none; border-bottom:1px solid #FFF;}

.mobtop.tb105{background-color:#4700ff;background-image:url('img/s5_k_ico.svg');}
.mobtop.tb148{background-color:#2b3b4e;background-image: url('img/s4_k_ico.svg');}
.mobtop.tb150{background-color:#00af7e;background-image: url('img/s2_k_ico.svg');}
.mobtop.tb154{background-color:#0050ff;background-image: url('img/s3_k_ico.svg');}
.mobtop.tb142{background-color:#de333c;background-image: url('img/s6_k_ico.svg');background-position: center 35%;}

.mobtop.tb1{background-image: url('img/s1_k_ico.svg');background-position: center 40%;}
.mobtop.tb2{background-image: url('img/s7_k_ico.svg');background-position: center 40%;}
.mobtop.tb3{background-image: url('img/s8_k_ico.svg');background-position: center 90%;}
.mobtop.tbone{background:#0050ff url('../images/bannerOne.jpg') center 100% no-repeat;}
 
.bottom1{ background:#FFF; width:100%;}
.bottom1 .p1{ color:#2E2E2E; font-size:32px; padding-top:50px; padding-bottom:20px;}
.bottom1 .p2{ color:#999; padding:30px 0 50px 0;}
.bottom1 input{ padding-left:1%; margin-right:1%;}
.bottom1 .input1{ background-color:#F0F0F0; border:none; width:17%; height:59px; line-height:59px; font-size:16px; color:#333;}
.bottom1 .input2{ background-color:#F0F0F0; border:none; width:47%; height:59px; line-height:59px; font-size:16px; color:#333;}
.bottom1 .submit{background-color:#0050ff; border:none; width:15%; height:59px; line-height:59px; font-size:16px; color:#FFF; cursor:pointer;padding:0; margin:0;}
.bottom1 .submit:hover {color:#FFF;background:#49D160;}
.bottom1 input{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}

.bottom2 a{ color:#FFF;}
.bottom2 a:hover{ text-decoration:underline;}
.bottom2{ width:100%; background-color:#111; color:#FFF; line-height:1.8}
.bottom2 ul li{ float:left; width:33%;}
.bottom2 h3{ font-size:20px; font-weight:normal; padding-bottom:20px; padding-top:50px;}
.bottom2 p{ font-size:16px;}
.bottom2 span{ font-size:12px; display:block;}
.bottom2 .fukuan{ width:160px; height:43px; background-color:#0050ff;line-height:43px; font-size:14px; text-align:center; margin-top:15px; }
.bottom2 .fukuan:hover {color:#FFF;background:#49D160;text-decoration:none;}

.bottom2 .tell{ font-size:32px; line-height:1;}
.bottom2 .qq3{ padding:10px 0 10px; font-size: 12px;}
.bottom2 .qq1{ background:url("../images/qq.png") no-repeat; width:55px; height:55px; display:inline-block; margin-top:50px; margin-right:10px;}
.bottom2 .qq2{ background:url("../images/qq2.png") no-repeat; width:55px; height:55px; display:inline-block; margin-top:50px;}
.bottom2 .bottom_tel{ font-size:14px;}
.bottom2 .xx{ padding-top:60px; padding-bottom:40px; font-size:12px;color:#BABABA;}
.bottom2 .xx a{color:#BABABA;}
.bottom2 .xx .xx1{ float:left;}
.bottom2 .xx .xx2{ float:right;}

.ct9,a.ct9,.ct9 a,.ct9 a:visited{ color:#BABABA;}
a.ct9:hover,.ct9 a:hover{ color:#999;}

.btnmore {background: #0050ff; width: 270px; line-height:50px; text-align: center; margin: 20px auto; color: #FFF; display:block; font-size: 16px; border-left:0px; border-top:0px;}
.btnmore:hover {color:#FFF; background:#49D160;}


@-webkit-keyframes playLR{
	0% {transform:translate(0px,0);}
	50% {transform:translate(-10px,0);}
	100% {transform:translate(0px,0);}
}

.case-content{padding:10px 4%;}
.case-content li{width: 25%; padding:10px;float: left;-moz-box-sizing: border-box;box-sizing: border-box;}
.case-content li .cbox{border-radius:4px;position:relative;overflow:hidden;}
.case-content li .pic{display: block;background:#dedede url("../images/loading2.gif") no-repeat center;padding-bottom:75%;padding-bottom:56%;position:relative; overflow:hidden;}
.case-content li .pic img{height: 100%; display:block;background:#dedede url("../images/loading2.gif") no-repeat center; position: absolute;}
.case-content li .pic em{width: 100%;height:100%;background:rgba(0,0,0,0.65) url("img/case_over.png") no-repeat center;background-size:100%; position: absolute;left:0px;top:0px;z-index:2;opacity:0;}
.case-content li .pic i{width: 18px;height:60px;background:url("img/W.png") no-repeat center top;background-size:100% auto; position: absolute;right:20px;top:-60px;z-index:3;opacity:1;}
.case-content li .hd{font-size:16px;background:#FFF;position:relative;padding-bottom:32%;}
.case-content li .hd span{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;border-bottom:1px solid #FFF;padding-right:10px;position: absolute;top:18px;left:20px;}
.case-content li .hd a{color: #000;}
.case-content li .hd a:hover span{border-bottom:1px solid #000;}
.case-content li .hd .italic{display:block;padding-top:15px;line-height:1.5;position: absolute;bottom:20px;left:20px; text-transform:uppercase; }
.case-content li .hd .color{position: absolute;top:23px;right:20px;}
.case-content li .hd .color em{width:16px;height:16px;background:#FFF;border:8px solid #DDD;border-radius:10px;float:left;margin-left:8px;-moz-box-sizing: border-box;box-sizing: border-box;}
.case-content li .hd .arw{position: absolute;bottom:23px;right:70px;width:50%;height:20px;background:url("img/arw.png") no-repeat center right;background-size:auto 50% ;opacity:0;}
.case-content li:hover .cbox{transform:translate(0,-5px);box-shadow:0 15px 25px rgba(0, 0, 0, 0.12);z-index:10;}
.case-content li:hover em{opacity:1;}
.case-content li:hover .hd .color em{border-width:3px;}
.case-content li:hover .hd .color em:nth-of-type(2){transition-delay: 0.2s;}
.case-content li:hover .hd .color em:nth-of-type(3){transition-delay: 0.4s;}
.case-content li:hover .pic img{ transition: all 1.2s;transform:scale(1.2,1.2);}
.case-content li:hover .hd .arw{right:20px;opacity:1;transition: all 0.6s;transition-delay: .4s;transition-timing-function: ease-out;}
.case-content li:hover .hd .arw:hover{animation: playLR 0.6s 20 ease-in-out;}
.case-content li.wt2{width: 50%; padding:0px;}
.case-content li.wt2 .cbox{border-radius:0px;}
.case-content li.wt2:hover .cbox{transform:translate(0,0);}
.case-content li.wt2 .pic{width:64%;padding-bottom:48%;padding-bottom:36%;float:left;}
.case-content li.wt2 .hd{width:36%;float:left;padding-bottom:48%;padding-bottom:36%;}
.case-content li.wt2 .hd span{top:13%;left:13%;}
.case-content li.wt2 .hd .italic{top:25%;left:13%;}
.case-content li.wt2 .hd .color{top:auto;bottom:13%;left:13%;}
.case-content li.wt2 .hd .color em{margin:0 8px 0 0;}
.case-content li.wt2 .hd .arw{bottom:13%;}
.case-content li.wt2:nth-child(odd){padding-left:10px;}
.case-content li.wt2:nth-child(even){padding-right:10px;}
.case-content li.wt2:nth-of-type(4n+3) .pic,.case-content li.wt2:nth-of-type(4n+4) .pic{float:right;}
.case-content li.wt2:nth-child(3),.case-content li.wt2:nth-child(4){padding-bottom:10px;}
.case-title{padding-top: 40px;padding-bottom: 40px;}
.case-title a{margin:0 30px; color:#000; font-size:16px;padding:5px;display:inline-block;border-bottom:1px solid rgba(255,255,255,0);}
.case-title a.hover,.case-title a:hover{color:#000;}
.case-title a.hover{font-weight: bold;}
.case-title a::after{height: 1px; width: 0px; display: block; content: ''; margin-top: 1px; background-color: #000;transition: all 0.6s;}
.case-title a.hover::after,.case-title a:hover::after{width: 100%; }
.case-title-home{ padding-top: 0; }
.case-loading{ text-align:center; margin:0 0 50px; width:100%;display:none;}
 
#target-image div{ text-align:center;} 
.caseinfo{ background:#FFF;position:relative; z-index:2; max-width:1440px; margin:-100px auto 25px;}
.caseinfoimg img{ max-width:100%; text-align:center;display:inherit;margin: 1.25rem auto; border:solid 1px #eee;}
.caseinfotxt{ font-size:0.875rem; line-height:1.875rem; padding:1.25rem; text-align:center;}
.caseinfotxt img{ display:block; margin:0 auto; border:none;}
.caseinfo .btnmore {width: 210px;}
.caseinfotop1{ width:65%; padding-left:5%; padding-right:15%;-moz-box-sizing: border-box;box-sizing: border-box;}
.caseinfotop2{ width:35%;}
.caseinfotop i{ font-size:30px;font-family: Pincolor; padding-top:50px; display:block; }
.caseinfotop p{ font-size:16px; color:#333; padding:20px 0 70px;}
.caseinfotop span{ padding-top:20px; display:block;}
.caseinfotop .fangwen{display:inline-block; width:176px; height:34px; background:url("../images/s1_r2_c2.jpg") no-repeat; background-size:100% 100%; margin-top:10px;}
.caseinfobot {-moz-box-sizing: border-box;box-sizing: border-box;}
.caseinfobot a{ color:#444;}
.caseinfobot ul li{ float:left; width:33%;-moz-box-sizing: border-box;box-sizing: border-box;}
.caseinfobot ul li a:hover{ color:#0050ff;}
.caseinfobot ul li:nth-of-type(1){ text-align:left; padding-left:5%; padding-top:50px; }
.caseinfobot ul li:nth-of-type(2){ text-align:center; padding-top:30px;padding-bottom:30px;}
.caseinfobot ul li:nth-of-type(3){ text-align:right; padding-right:5%; padding-top:50px;}
.caseinfobot .fanhui a{ display:inline-block; width:65px; height:65px; background:url("../images/liebiao.png") no-repeat 0 0;}
.caseinfobot .fanhui a:hover{ background-position:0 -65px;}

.relev{border-top:solid 1px #aaa; padding:20px 0;}
.relev h2{font-size:14px;font-weight:bold;}
.relev li{float:left; display:block;width:50%;height:25px;line-height:25px; white-space:nowrap; text-overflow: ellipsis; overflow:hidden;color:#999;}
.relev li a{color:#999;}
.relev li a:hover{color:#666;}

.caseinfo .relev{margin:0 auto; width:90%;}
.caseinfo .relev h2 a{font-weight:normal; color:#999;}

.zi{ color:#BBB; margin-bottom:60px; line-height:1.5; font-size:12px;}

.fp-tableCell {position:relative;width: 100%;height: 100%; }
.fp-tableCell #myVideo {background-color: black;background-position: center center;background-size: contain;bottom: 0;height: 100%;object-fit: cover;position: absolute;right: 0;top: 0;width: 100%;z-index: 3; }
.fp-tableCell .container {left: 0;position: absolute;top: 0;width: 100%;max-width: 100%;height: 100%;z-index: 4; }
.fp-tableCell h1 {position: absolute;visibility: hidden; }		
.fp-tableCell .glitch-box {position: absolute;left: 0;right: 0;margin: 0 auto;top: 50%;height: 170px;margin-top: -105px; }
.fp-tableCell .glitch-box h4{font-size:90px;font-family:"Pincolor";line-height:1; }
.fp-tableCell .glitch-box h3{font-size:75px;font-weight:bold;letter-spacing: 6px; }
.fp-tableCell .glitch-box h5{font-size:16px; }

.mhide{ padding:30px 0;background-color:#F4F4F4;}
.mhide a{ width:24%; padding-right:0.5%; height: 20px; display: inline-block; overflow: hidden;}
.mhide h2 a{ font-size: 16px; font-weight: bold; height: 30px;margin-top: 12px;}

#about_howto {padding:5px 0; color:#1a1a1a;}
#about_howto li{display:none; line-height:1.3;}
#about_howto {font-size:28px;}
#about_howto .howto_en{font-size:16px;}

.pincolor{font-size:75px; line-height:0.8;letter-spacing:8px; padding:50px 0 30px; color:#0050ff; font-family:Pincolor;}

.serlist2 .serlist21 ul li{ width:25%; float:left; }
.serlist2 .serlist21 ul li img{ display:block;}
.serlist2 .serlist22 .serlist22l,.serlist2 .serlist22 .serlist22r{ width:50%; text-align:center; padding-top:50px; padding-bottom:50px;}

.mshow{ display:none;}
.w100{ width:100%;}

.service{ background:#FFF;position:relative; z-index:2; width:1180px; margin:-60px auto 30px;}
.service img{ max-width:100%;margin:10px 0;}
.service p{font-size:inherit; color:#333; width:auto; margin:0 auto; padding:0;}

.service-content .servicecon li{width: 100%; *width:99.95%!important;height:590px; overflow:hidden; }
.service-content .servicecon li a:hover img{-o-opacity:0.6;opacity:0.6;-moz-opacity:0.6;-ms-opacity:0.6;-webkit-opacity:0.6;filter:alpha(opacity=60);}
.service-content .servicecon li:nth-of-type(1){ background-color:#FFB71F;}
.service-content .servicecon li:nth-of-type(2){ background-color:#10AF5D;}
.service-content .servicecon li:nth-of-type(3){ background-color:#0050ff;}
.service-content .servicecon li:nth-of-type(4){ background-color:#C01C23;}
.service-content .servicecon li .service-col{ width:590px; height:590px;}
.service-content .servicecon li a{color:#FFF; text-align:center; display:block}
.service-content .servicecon li a h3{ font-size:39px; font-weight:normal; padding-top:220px;}
.service-content .servicecon li a span{ font-size:16px; display:block; line-height:1.8; padding-bottom:10px;}
.service .w1200 h2{ font-size:40px; font-style:normal; line-height:1;font-family: Pincolor; }

.sjhide{ display:block;}
.sjshow{ display:none;}

.news_list{margin:-15px auto 20px; width: 92%; max-width: 1180px; padding:40px; background: #FFF; position: relative; z-index: 2; line-height:2; box-sizing: border-box;-moz-box-sizing: border-box;}
.news_list h2{padding-top:20px; font-size: 18px;}
.news_list img{width: 30%; float: left; margin-right: 20px; max-height: 200px;}
.news_list a:hover{ color: #000; }
.news_list ul{ clear: both; }

.nowPosition{ float: left; width: 100%; font-size:14px; color:#999; margin-bottom: 20px; clear: both;}
.nowPosition a{ color:#999;}

.news_content{margin:-15px auto 20px; width: 92%; max-width: 1180px; padding:40px; background: #FFF; position: relative; z-index: 2; line-height:2; box-sizing: border-box;-moz-box-sizing: border-box;}
.news_content .Title { float: left; width: 100%; }
.news_content .Title h1{ font-size: 24px; text-align: center;}
.news_content .Title p{ line-height: 2;color: #888;background-color: #fafafa;padding: 10px;margin: 20px 0;}
.news_content .Content{ float: left; width: 100%; line-height: 2; }
.news_content .Content li{ list-style:disc outside; text-indent: 18px; }
.news_content .Content img{ margin: 10px auto; max-width: 100%; height: auto!important;}

.fastmsgbox{width:1080px; height:600px; display:none; padding:5em; background:rgba(255,255,255,0.98);*background:#FFF; font-size:14px; color:#222;}
.fastmsgbox .msg_zixun{width:49.9%; float:left;}
.fastmsgbox h3{ font-size:3.5em; padding:0 0 0px; line-height:1.3;color:#333;}
.fastmsgbox p{ font-size:1.2em; padding:0 0 0em;}
.fastmsgbox h4{font-size:1.6em; padding:1em 0 0.5em;color:#333;}
.fastmsgbox .msg_zixun input,.fastmsgbox .msg_zixun textarea{font-size:1.2em; padding:1em; border:1px solid #DDD; width:99%; margin-bottom:0.5em;}
.fastmsgbox .msg_zixun textarea{height:5.2em;}
.fastmsgbox .msg_zixun input.submit{font-size:1.2em; padding:1em 0.8em; background:#0050ff; color:#FFF; border:1px solid #0050ff; width:99%; cursor:pointer;}
.fastmsgbox .msg_zixun input.submit:hover{ background:#49D160;border:1px solid #49D160; }
.fastmsgbox .msg_zixun img{float:left; margin-right:1.2em;}
.fastmsgbox .msg_zixun em{font-size:1.2em;}
.fastmsgbox .msg_zixun i{font-size:1.2em; padding:2em 0 0; font-weight:bold; display:inline-block;}

.pageTurn{clear:both; padding:1.25rem 0; height:auto; text-align:center;}
.pageTurn ul{ display:inline-block;}
.pageTurn ul li{ float:left; padding:0 0.5rem; margin:0.5rem 0;}
.pageTurn ul li a{ background-color:#fff; min-width:2.375rem; display:inline-block; width: auto; height: auto; text-align:center;color:#333; border-radius:0.25rem; font-size:1rem; padding: 0.5rem; }
.pageTurn ul li a:hover,.pageTurn ul li.active a{ background-color:#ffb71f; color:#fff;}
.pageTurn ul li.active a{background-color:#ffb71f;}
.pageTurn ul li span{ background-color:#fff; min-width:2.375rem; display:inline-block; text-align:center;color:#333; border-radius:0.25rem; font-size:1rem; padding: 0.5rem;}
.pageTurn ul li span.current{background-color:#ffb71f; color:#fff;}

.gotop{ display: block; width:69px; height:69px; position: fixed; right: 30px; bottom: 120px; }

@media only screen and (max-width:1780px){
	.case-content li{width: 25%;}
}

@media only screen and (max-width:1400px){
	.case-content li{width: 33.333%;}
}

@media only screen and (max-width:1366px){
	.bottom1 .input2{width: 45%;}
	.bottom2 .wrap li:nth-child(1){display: none;}
	.bottom2 ul li{width: 50%;}
	.mobtop{ height: 300px; }
	.case-content {padding: 10px 2%;}
	.case-title-home{ padding:0 0.5%;}
	.case-title a{margin:5px 0.5%; width:14.6%;font-size:18px; padding:7px 0;display:inline-block;border:1px solid #FFF; background-color: #FFF;}
	.case-title a.hover,.case-title a:hover{color:#FFF;border:1px solid #ff6701;background-color: #ff6701;}
	.case-title a::after{display: none; }	
	.mhide a{ width:32%; padding-right:0.5%;}
	.wrap{padding: 0 2%;}
}

@media only screen and (max-width:1024px){
	.case-content{padding: 10px 1%;}
	.case-title-home{ padding:0;}
	.case-title a{font-size:14px;}
	.case-content li.wt2 .hd .italic { width: 80%; }
	.case-content li .hd .color em { width: 8px; height: 8px; border: 4px solid #DDD; }
	.bottom2 .xx .xx2{float: left;}
	.logo__icon, .navbar .logo__icon {width: 100px; height: 32px}
	.navbar__center .nav-links {white-space: nowrap}
	.navbar {display: flex;height: 56px;box-shadow: none;position: fixed;top: 0;left: 0;right: 0}
	.navbar__left {	position: static;height: auto;padding-left: 16px}
	.navbar__center {display: none !important;position: static;height: auto;padding: 0;flex: 1;padding-right: 16px;text-align: right;}
	.navbar__center .nav-item {	display: none}
	.navbar__center .nav-item.selected {display: block;padding: 0}
	.navbar_with-link {display: flex}
	.navbar_with-link .navbar__left {position: relative;white-space: nowrap}
	.navbar_with-link .navbar__center {flex: 1;}
	.navbar_with-link .navbar__right {position: relative;box-sizing: border-box;-moz-box-sizing: border-box;display: flex;align-items: center}
}

@media only screen and (max-width:900px){
	.case-content li{width: 50%;}
	.case-content li.wt2{width: 50%; padding-left:10px;padding-right:10px;}
	.case-content li.wt2:nth-of-type(4n+3) .pic,.case-content li.wt2:nth-of-type(4n+4) .pic{float:left;}
	.case-content li.wt2:nth-child(odd) .pic{float:right;}
	.case-content li.wt2:nth-child(3){padding-bottom:0px;}
	.case-content li.wt2 img{border-radius: 4px;}
	.bottom1 .submit{ font-size: 14px; }
	.bottom1 .input2{ font-size: 14px; }
	.bottom2 .xx .xx2 {float: none;clear: left;}
	.bottom2 .wrap li:nth-child(1){ display: none; }
	.bottom2 ul li{ width: 50%; }
}

@media screen and (max-width:812px){
	.bottom2 p { font-size: 14px; }
	.bottom2 img{ width: 100px; height: 100px; }
}


@media screen and (min-width:769px) {
	.p-nav__open:hover>span::after,	.p-nav__open:hover>span::before {transform: translateX(25px)}
	.p-nav__open:hover>span>span {opacity: 0}
	.p-nav__open:hover>span:nth-child(2) {transform: translate3d(0, 2px, 0)}
	.p-nav__open:hover>span:nth-child(4) {transform: translate3d(0, -2px, 0)}
	.p-nav__close:hover>p {transform: translateX(10px)}
	.p-nav__close:hover>span:nth-child(2) {transform: translateX(10px) rotate(-46deg) scaleX(.8)}
	.p-nav__close:hover>span:nth-child(3) {transform: translateX(10px) rotate(46deg) scaleX(.8)}
	.p-nav__close:hover>span>span {transform: translate3d(0, 0, 0) scaleX(.4)}
}

@media screen and (max-width:768px) {
	.wrap{ padding:0 3%; }
	.navbar {margin-top: 10px; }
	.nav-item{ padding: 0 20px; }

	.p-nav__close,.p-nav__open {top: 33px;right: 32px;height: 23px;width: 23px}
	.p-nav__close>p,.p-nav__open>p {display: none}
	.p-nav__open,.p-nav__close {width: 25px;top: 17px;margin-top: 10px;}
	.p-nav__open::after {top: -33px;right: -32px;width: 89px;height: 89px;display: none}
	.p-nav__open>span {width: 35px;height: 2px}
	.p-nav__open>span:nth-child(3) {top: 11px}
	.p-nav__close {width: 23px}
	.p-nav__close>span {width: 30px}
	.p-nav__close {transform: translateX(0)}
	.p-nav__close>span:nth-child(2) {transform: translateX(0) rotate(-46deg) scaleX(0)}
	.p-nav__close>span:nth-child(3) {transform: translateX(0) rotate(46deg) scaleX(0)}

	body.is-navOpen .p-nav__close {transition: transform .5s .65s, opacity 0s}
	body.is-navOpen .p-nav__close>span {transition: .5s .65s}
	body.is-navOpen .p-nav__close>span:nth-child(2) {transform: translateX(0) rotate(-46deg) scaleX(1);transition: .3s .6s}
	body.is-navOpen .p-nav__close>span:nth-child(3) {transform: translateX(0) rotate(46deg) scaleX(1);transition: .3s .7s}

	.mobile-nav ul li {padding: 10px 10%;}
	.mobile-nav ul li .vlk{font-size:22px;text-align:left;}
	.mobile-nav ul li .vlk i{font-size:0.7em;}
	.mui-bar-tab{ display: table; background-color:##0f0f0;}

	.mobtop{ height: 280px;background-size:auto 240%;}
	.mobtop .contentinfo{width:100%;top:40%;margin-top:0;height:auto;}
	.mobtop .contentinfo h2{font-size:24px; letter-spacing: 3px; }
	.mobtop .contentinfo i{font-size:14px; line-height:1;}
	.mobtop p{ display:none;}

	.mhide a{ width: 49%; }

	.service{margin-top:-15px; margin-bottom:20px; width:92%;}
	.service p{ font-size:14px; padding:30px 0 20px 0;}
	.service-content .servicecon{ padding-bottom:20px;}
	.service-content .servicecon li{width: 100%; *width:99.95%!important; height:100%; }
	.service-content .servicecon li div{width: 100%; *width:99.95%!important; height:100%; float:none; }
	.service-content .servicecon li a h3{ font-size:20px;  padding-top:100px;}
	.service-content .servicecon li a span{ font-size:12px;padding-bottom:10px;}
	.service-content .servicecon li a h4{  padding-bottom:100px;}
	.service-content .servicecon li .service-col{ width: 100%; *width:99.95%!important;}
	.service .w1200 h2{ font-size:20px; font-style:normal; line-height:1;font-family: Pincolor; }

	.case-title{ padding:15px 5px 0;}
	.case-title a{margin:5px 1%; width: 46%;font-size:14px; padding:7px 0;display:inline-block;border:1px solid #FFF; background-color: #FFF;}
	.case-title a.hover,.case-title a:hover{color:#FFF;border:1px solid #ff6701;background-color: #ff6701;}
	.case-title a::after{display: none; }
	.case-content {padding: 10px 2%;}
	.case-content li.wt2 .hd span{ font-size:0.875rem;}
	
	.news_list img{ width: 100%; }
	.news_list h2{padding-top:0; font-size: 1rem; line-height: 2;}
	.news_list i{font-size:0.875rem; color:#aaa; }
	.news_list p{font-size:0.875rem; color:#aaa; line-height: 1.5;}
	
	.relev h2{padding:0;font-size:1rem;}
	.relev li{width:100%; font-size:0.875rem;}
	.caseinfo .relev h2 a{font-size:0.875rem;}
 }

@media only screen and (max-width:720px){
	.case-content li{width:100%;padding:8px 5px;}
	.case-content li .italic{ display:block; font-size:8px;}
	.case-content li .hd .color em{height:10px;width:10px;border-width:5px;}
	.case-content li .hd .arw{height:15px;}
	.case-content li.wt2{padding-left:5px;padding-right:5px;}
	.case-content li.wt2:nth-child(odd){padding-left:5px;}
	.case-content li.wt2:nth-child(even){padding-right:5px;}
	.bottom1 .submit{ font-size: 14px; }
	.bottom1 .input2{ font-size: 14px; }

	#about_howto {font-size:22px;}
	#about_howto .howto_en{font-size:12px;}

	.pincolor{font-size:36px; padding:30px 0 15px;}
	.mhide{ width: 100%; height:80px; overflow: hidden;margin-bottom: 20px; padding:0 0; }
	.mhide a{ width:100%; line-height:1.5; font-size: 0.875rem; color: #999; }
	.mshow{ display:block;}

	.bottom1 .p1{ font-size:18px; padding-top:20px; padding-bottom:10px;}
	.bottom1 .p2{ padding:10px 0 20px 0; font-size:10px}
	.bottom1 .input1{width:99%; height:45px; line-height:45px; font-size:15px; margin-bottom:10px; padding:10px;}
	.bottom1 .input2{ width:99%; height:45px; line-height:45px; font-size:15px; margin-bottom:10px; padding:10px;}
	.bottom1 .submit{ width:99%; height:45px; line-height:45px; font-size:16px; }
	.bottom2 ul li{ width:50%;}
	.bottom2 ul li .fl{ display: none; }
	.bottom2 ul li .fr img{ width:70%; } 
	.bottom2 h3{ font-size:28px; padding-bottom:0px; padding-top:20px; font-weight:bold;}
	.bottom2 p{ font-size:14px;}
	.bottom2 span{ font-size:10px;}
	.bottom2 span i{ display: none; }

	.bottom2 .fukuan{ display:none;}
	.bottom2 .tell{ font-size:24px; color:#FFF; }
	.bottom2 .qq3{ padding-top:10px; display: none;}
	.bottom2 .qq1{ background-size:100% 100%; width:30px; height:30px;  margin-top:40px; margin-right:10px;}
	.bottom2 .qq2{ background-size:100% 100%; width:30px; height:30px;  margin-top:40px; margin-right:10px;}
	.bottom2 .xx{ padding-top:50px; padding-bottom:70px; font-size:10px; }
	.bottom2 .xx .xx2{ float:left;}
	.bottom2 .xx .ct9{ display:none;}

	.caseinfo{margin-top:-15px; margin-bottom:20px; width:92%;}
	.caseinfo h2{ padding:20px 5% 0 5%; font-size:20px; font-weight:bold;}
	.caseinfo .blk40{ height:0px;}
	.caseinfo .btnmore {width: 100%;}
	.caseinfotop1{ width:100%; padding-left:5%; padding-right:5%;}
	.caseinfotop2{ width:100%; padding-left:5%; padding-right:5%;}
	.caseinfotop i{ font-size:20px; padding-top:10px; display:none;}
	.caseinfotop p{ font-size:12px; padding:10px 0 10px;}
	.caseinfotop span{ padding-top:10px; font-size:10px}
	.caseinfotop .fangwen{width:88px; height:17px; margin-top:10px;}
	.caseinfobot a{ color:#444;}
	.caseinfobot a span{ display: none; }
	.caseinfobot ul li{ float:left; width:33%;}
	.caseinfobot ul li:nth-of-type(1){ text-align:left; padding-left:5%; padding-top:35px; }
	.caseinfobot ul li:nth-of-type(2){ text-align:center; padding-top:30px;padding-bottom:30px;}
	.caseinfobot ul li:nth-of-type(3){ text-align:right; padding-right:5%; padding-top:35px;}
	.caseinfobot .fanhui a{width:32px; height:32px; background-size:100% 200%;  }
	.caseinfobot .fanhui a:hover{ background-position:0 -32px; background-size:100% 200%; }
	.zi{ display:none;}

	.serlist2 .serlist21 ul li{ width:50%; }
	.serlist2 .serlist22 .serlist22l,.serlist2 .serlist22 .serlist22r{ width:100%; padding-top:30px; padding-bottom:30px;}
	.mob_tit{ font-size:20px; padding:30px 0 0; display:none}
	.mob_list{ width:100%;  padding:10px 0 00px; display:none}
	.mob_list ul li{ width:100%;}
	.mob_list ul li a{ display:block; width:334px; height:637px; color:#333;background:url("../images/sj_bg.png") no-repeat left; text-align:center; margin:0 auto;}
	.mob_list ul li a:hover{ background-position:-334px 0; color:#1D8DFA;}
	.mob_list ul li a h2{ font-size:27px; padding-top:140px; margin-bottom:30px;}
	.sj{ display:none;}
	.sj-sjcase{ display:block;}
	.sjhide{ display:none;}
	.sjshow{ display:block;}
	.news_content{ padding:1rem;}
	.news_content .Title h1 { font-size: 1.35rem; }
	.nowPosition .fr{ width: 100%; float: left; }

	.gotop{ display: none; }
	.relev h2{padding:0;font-size:1rem;}
}