@charset "utf-8";
/* CSS Document */
::-webkit-scrollbar{width:0;height:0}
*{padding:0; margin:0; list-style:none; outline:none; text-decoration:none}
input{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body{ min-width:320px; width:100%; height:100%; background:#f4f4f4; position:relative; font-family:"微软雅黑"; font-size:0.9em; margin:0 auto; color:#000; }
html{ width:100%; height:100%; margin:0 auto}

header{ width:100%; height:46px; background:#ff5a5f ; display:table}
header .logo{ float:left; margin:7px 0 0 10px}
header .logo img{ width:75px; height:auto}
header nav{ float:right;margin:13px 10px 0 0}
header nav a{ display:block}
header nav img{ background:rgba(255,255,255,0.3); border-radius:3px; width:25px; height:auto}

.topHead{ position:fixed; top:0; display:none; left:0; z-index:7}

.menu{ position:fixed; top:0; left:0; bottom:0; background:rgba(0,0,0,0.4); width:100%; height:100%;display:none; z-index:10}
.menu ul{ width:200px; height:100%; background:#fff; position:absolute; right:0px; top:0; bottom:0; z-index:11}
.menu ul li{ display:block; width:100%; height:3em; line-height:3em; text-align:center; border-bottom:1px dashed #ccc}
.menu ul li a{ display:block; width:100%; height:100%; color:#303030; text-decoration:none; font-size:0.9em}

.menuShow{ animation:ss 1s; -webkit-animation:ss 1s; -moz-animation:ss 1s ; -ms-animation:ss 1s ; -o-animation:ss 1s ;}
.sonMenu{ width:100%; text-align:center; margin:20px 0;}
.sonMenu dd{ display:inline-block;}
.sonMenu dd a{ width:auto;  padding:6px 15px; font-size:0.875em; background:#fff; border-radius:20px; color:#999}
@keyframes ss{
	0%{
		transform:translate3d(200px,0,0)}
	100%{
		transform:translate3d(0,0px,0);	
	
		}
	}
@-webkit-keyframes ss{
	0%{
		-webkit-transform:translate3d(200px,0,0)}
	100%{
		-webkit-transform:translate3d(0,0,0);
			
		}
	}	
.menuHide{animation:hh 0.5s; -webkit-animation:hh 0.5s; -moz-animation:hh 0.5s; -ms-animation:hh 0.5s; -o-animation:hh 0.5s; animation-fill-mode:forwards; -webkit- animation-fill-mode:forwards}

@keyframes hh{
	0%{
		transform:translate3d(0,0,0);
		}
		
	100%{
		transform:translate3d(200px,0,0);	
		}
	}
@-webkit-keyframes hh{
	0%{
		-webkit-transform:translate3d(0,0,0);}
		
	100%{
		-webkit-transform:translate3d(200px,0,0);	
		}
}

.work{ text-align:center;  width:100%; box-shadow:0 2px 4px #d7d7d7; min-height:10px;border-radius:0 0 10px 10px}
.work .img1{ width:60px; height:auto; margin:15px auto 0}

.work .img2{ width:45px; height:45px; margin:5px auto 10px; border-radius:100%; padding:4px; border:1px solid #efefef}

.menu .close{ width:40px; height:40px; border-radius:100%; line-height:38px; text-align:center; margin:30px auto 0; display:block; border:1px solid #efefef; font-size:2em; color:#e94b4b}



/*进场动画*/

.donghua{ position:fixed; top:0; bottom:0; left:0; background:#74c7b3 url(../images/dhbg.png) repeat; z-index:10; width:100%; height:100%;text-align:center; background-size:84px auto}
.dh1{animation:out 2s; -webkit-animation:out 2s;}
@media screen and (min-height:0px) and (max-height:480px){
	.dh1{margin:150px auto 0;}
	.dh1 img{ width:270px;}	
	}
@media screen and (min-height:481px){
	.dh1{margin:200px auto 0;}
	.dh1 img{ width:300px ;}	
	}	

@keyframes out{
	0%{
		opacity:0;
		transform:translateY(-30px)		
		}

	100%{
		opacity:1;	
		transform:translateY(0px)	
		}	
}
@-webkit-keyframes out{
	0%{
		opacity:0;
		-webkit-transform:translateY(-30px)		
		}

	100%{
		opacity:1;
		-webkit-transform:translateY(0px)		
		}	
}

.dh2 { position:absolute; bottom:30px; left:0; width:100%; text-align:center}
.dh2 span{width:120px;display:block; height:1px; background:#fff;}
.dh2 img{ animation:studio 3s; -webkit-animation:studio 3s; width:100px;}

@keyframes studio{
	0%{
		opacity:0;		
		}

	100%{
		opacity:1;	
		}	
}
@-webkit-keyframes studio{
	0%{
		opacity:0;	
		}

	100%{
		opacity:1;	
		}	
}
.dh2 span:nth-of-type(1){
	 margin:0 auto 7px;
	 animation:rightIn 2s; -webkit-animation:rightIn 2s;animation-delay:2s; -webkit-animation-delay:2s;animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;opacity:0;
	}
@keyframes rightIn{
	0%{ 
	    opacity:0;
		transform:translateX(-30px);	
		}
	100%{
		opacity:1;
		transform:translateX(0px);	
		}	
}
@-webkit-keyframes rightIn{
	0%{
		opacity:0;
		-webkit-transform:translateX(-30px);	
		}

	100%{
		opacity:1;
		-webkit-transform:translateX(0px);	
		}		
}	
.dh2 span:nth-of-type(2){
	 margin:5px auto 0;
	 animation:leftIn 2s; -webkit-animation:leftIn 2s;animation-delay:2s; -webkit-animation-delay:2s;animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; opacity:0;
	}	
@keyframes leftIn{
	0%{	
	    opacity:0;
		transform:translateX(30px);	
		}

	100%{
		opacity:1;		
		transform:translateX(0px);	
		}	
}
@-webkit-keyframes leftIn{
	0%{		
	    opacity:0;
		-webkit-transform:translateX(30px);	
		}

	100%{
		opacity:1;
		-webkit-transform:translateX(0px);		
		}		
}	
.toutiao,.title{ width:94%; margin:0 auto}
.toutiao li,.project li{ display:block; width:100%; display:table; margin:10px 0; text-align:left}
.toutiao li a img,.project li a img { min-width:80px; height:60px; float:left; width:29%}
.toutiao li a div,.project li a div{ float:right; width:69%;}
.toutiao li a span,.project li a span{ display:block; font-size:0.9em; color:#5C5C5C;overflow: hidden;text-overflow: ellipsis; width:100%;}
.toutiao li a ins,.project li a ins{ color:#939393; font-size:0.75em; line-height:16px; margin-top:8px; display:block}


.whitebg{ background:#fff; width:100%; height:auto;}

.page1{ padding:30px 0 20px 0}

.pageCon{ margin:10px auto 0;padding:20px 0 10px 0}


/*---------------------教育背景标题-----------------------*/

.education,.pingjia,.youshi{ font-size:0.875em; width:90%; margin:20px auto;padding:12px 8px; border:1px solid #efefef; color:#919191; line-height:20px; border-radius:5px}
.youshi p{ margin:5px 0; text-align:left; width:100%; display:block; font-size:0.875em}


/*---------------------其他优势标题-----------------------*/
.ribbon3 {
  display:block;
  /*width: calc(100% - 20px);*/
  width:100%;
  height: 30px;
  line-height: 30px;
  font-size:0.875em;
   box-shadow:0 2px 3px #ccc;
   border-radius:0 5px 0px 5px;
   margin:0 auto;
   border-left:3px solid #ff5a5f ;
   box-sizing:border-box;
    text-indent:15px;
	 text-align:left;
	 color:#202020
}

.click_more1 { width:100%; margin-top:20px}
.click_more1 a{ color:#ff5a5f; font-size:0.875em}

.worksBox li.li01{animation:lishow 1s; -webkit-animation:lishow 1s; opacity:0;animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
.worksBox li.li02{animation:li2show 1s; -webkit-animation:li2show 1s; opacity:0;animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
.worksBox li.li03{animation:li3show 1s; -webkit-animation:li3show 1s; opacity:0;animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
.worksBox .neirong{ color:#9B9B9B; font-size:0.75em; width:69%; margin:0 auto; text-align:left; float:right}
.worksBox li{ width:100%; position:relative; background:#fff ; margin-bottom:10px;padding:8px 0 10px 0; text-align:center; display:table}
.worksBox li a{ display:block; width:100%; height:auto; color:#444444;}
.worksBox li b{ display:block; width:96%; margin:10px auto 10px; font-size:1em; text-align:left;overflow: hidden;text-overflow: ellipsis;}
.worksBox li img.liimg { width:80px; height:60px;}
.worksBox li .i1{ width:80px; display:inline-block; color:#a8a7a7; font-size:0.875em; height:16px;}
.worksBox li .i1 img{ float:left; width:13px;height:13px;}
.worksBox li .i1 font,.worksBox li .i2 font{ float:left; display:inline-block; line-height:16px}
.worksBox li .i2{ width:105px; display:inline-block; color:#a8a7a7; font-size:0.875em;height:16px}
.worksBox li .i2 img{ float:left; width:12px !important;height:auto; border:1px solid #dcdcdc; border-radius:100%;}
.worksBox li .icon{width:96%; margin:0px auto 0; text-align:left; height:16px}
.leftimg{width:29%; float:right;min-width:80px;}

.numb {
    position: absolute;
    top: 60px;
	left:4%;
    padding: 8px 20px;
    background: #3d3d3d;
    box-shadow: -1px 2px 4px rgba(0,0,0,0.5);
	color:#fff;
	text-align:center
  }
.numb:before, .numb:after {
    position: absolute;
    content: "";
    display: block;
}
.numb:before {
    width: 7px;
    height: 100%;
    padding: 0 0 7px;
    top: 0;
    left: -7px;
    background: inherit;
    border-radius: 5px 0 0 5px;
}
.numb:after {
    width: 5px;
    height: 5px;
    background: rgba(0,0,0,0.35);
    bottom: -5px;
    left: -5px;
    border-radius: 5px 0 0 5px;
 }
/*作品动画开始*/
@keyframes lishow{
	0%{ 
	    transform:scale(1.1)
		}
	100%{
		opacity:1;
		transform:scale(1);
		}	
}
@-webkit-keyframes lishow{
	0%{-webkit-transform:scale(1.1);
		}
	100%{
		opacity:1;
		-webkit-transform:scale(1);
		}	
}
/*摄影作品动画开始*/
@keyframes li2show{
	0%{ 
	    transform:scale(0.8)
		}
	100%{
		opacity:1;
		transform:scale(1);
		}	
}
@-webkit-keyframes li2show{
	0%{-webkit-transform:scale(0.8);
		}
	100%{
		opacity:1;
		-webkit-transform:scale(1);
		}	
}

/*小主女神动画开始*/
@-webkit-keyframes li3show {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
	opacity:1
  }
}

@keyframes li3show {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
	opacity:1
  }
}
.worksMain { width:100%; height:auto;padding:0px 0 20px 0; text-align:left !important;animation:lishow 1s; -webkit-animation:lishow 1s; opacity:0;animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; background:#fff}
.worksMain img{ width:100% !important; height:auto;}
.worksMainBox{ width:92%; margin:0 auto; font-size:0.825em; color:#8B8B8B; line-height:20px}
.worksMainBox b{ padding:10px 0 0px 0; display:block; width:100%; color:#747474; font-size:1.25em}
.worksMainBox .fujian{ display:block; margin-bottom:5px;  }
.worksMainBox .fujian span{font-size:0.875em;color:#ACACAC; line-height:10px}

.pn{ margin: 15px auto 0;font-size: 0.75rem;color: #ff5a5f; width:92%;}
.pn a{ display: block;font-size: 0.75rem;margin: 2px 0;color: #c3c6c5; }

.pagemain{ width:97%; margin:15px auto 0px; height:3em; overflow:hidden}

.pagemain li {padding:3px 6px;margin:3px 4px;color:#fff;background-color:#ff5a5f ;text-decoration:none; font-size:0.6em; border-radius:10px; float:left; color:#FFF;}
.pagemain li a{color:#fff;}
.pagemain li.thisclass{padding:4px 7px;color:#6d643c;background-color:#efe3a7; border-radius:10px;font-size:0.6em; margin:2px 2px 0 2px; color:#f0345c}
.pagemain li.disabled{display:none;}