*{margin: 0; padding: 0;}
a{text-decoration: none;}
a img{border: none;}
a:focus{outline: none;}
a:link,a:visited,a:hover,a:active{text-decoration: none;}
img{border: none;}
input,select,textarea{outline: 0;}
textarea{resize: none;}
table{border-collapse: collapse; border-spacing: 0;}
var,em{font-weight: normal; font-style: normal;}
ul,ol,dl{list-style: none;}
@media only screen and (max-width: 750px){
  .g-mobile .g_pub_header_box,
  .g-mobile .g_pub_footer_box{width: 100% !important; max-width: 100% !important; min-width: 100% !important;}
  .g-mobile .m_head_nav,
  .g-mobile .m_foot_nav{display: none;}
  .g-mobile .g_pub_footer{height: auto !important; zoom: 1 !important;}
  .g-mobile .g_pub_footer:after{content: "" !important; display: block !important; clear: both !important;}
  .g-mobile .g_pub_footer .u_logo.foot{width: 100%; margin-left: 0;}
}
img{vertical-align: top;}
.conw{width: 1200px; margin-left: auto; margin-right: auto;}
.g-wrap{width: 100%; font-family: "microsoft yahei"; max-width: 1920px; min-width: 1200px; margin-left: auto; margin-right: auto; overflow: hidden; background: url("../images/pc-bg.jpg") center top no-repeat;}
.g-wrap *{user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none;}
.g-wrap .m-pc{display: block; width: 1200px; margin-left: auto; margin-right: auto; position: relative; min-height: 1080px;}
.g-wrap .m-pc .u-title{position: absolute; z-index: 99; top: 166px; left: 0; animation: titleAni 1s .2s; -webkit-animation: titleAni 1s .2s; animation-fill-mode: backwards; -webkit-animation-fill-mode: backwards;}
.g-wrap .m-pc a{position: absolute; z-index: 99; -webkit-animation: flipInX 0.8s 1s ease-out; animation: flipInX 0.8s 1s ease-out; animation-fill-mode: backwards; -webkit-animation-fill-mode: backwards;}
.g-wrap .m-pc .u-video{top: 815px; left: 165px; width: 258px; height: 109px; background: url("../images/pc-video-btn.png") center center no-repeat;}
/*.g-wrap .m-pc .u-image{top: 585px; left: 417px; width: 367px; height: 92px; background: url("../images/pc-image-btn.png") center center no-repeat;}*/
.g-wrap .m-pc .u-rule{top: 815px; left: 470px; width: 258px; height: 109px; background: url("../images/pc-rule-btn.png") center center no-repeat;}
.g-wrap .m-pc .u-work{top: 815px; left: 775px; width: 258px; height: 109px; background: url("../images/pc-work-btn.png") center center no-repeat;}
.g-wrap .m-mob{display: none;}
@keyframes titleAni{
  from{opacity: 0; transform: scale(0.2);}
  to{opacity: 1; transform: scale(1);}
}
@-webkit-keyframes titleAni{
  from{opacity: 0; -webkit-transform: scale(0.2);}
  to{opacity: 1; transform: scale(1);}
}
@-webkit-keyframes flipInX{
  0%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-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);}
}
@keyframes flipInX{
  0%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0;}
  40%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in;}
  60%{-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); -ms-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); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
  100%{-webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px);}
}
@media only screen and (max-width: 750px){
  .g-wrap{min-width: 0; max-width: 100%; background: none;}
  .g-wrap .m-pc{display: none;}
  .g-wrap .m-mob{display: block; width: 100%; overflow: hidden; position: relative;}
  .g-wrap .m-mob .m-bg{width: 100%;}
  .g-wrap .m-mob .u-title{position: absolute; width: 17rem; top: 6.45rem; left: 50%; margin-left: -8.5rem; animation: titleAni 1.2s .2s; -webkit-animation: titleAni 1.2s .2s; animation-fill-mode: backwards; -webkit-animation-fill-mode: backwards;}
  .g-wrap .m-mob a{position: absolute; z-index: 99; -webkit-animation: flipInX 0.8s 1.1s ease-out; animation: flipInX 0.8s 1.1s ease-out; animation-fill-mode: backwards; -webkit-animation-fill-mode: backwards;}
  .g-wrap .m-mob .u-video{top: 17rem; left: 50%; margin-left: -3.5rem;}
  .g-wrap .m-mob .u-video img{width: 7rem;}
  .g-wrap .m-mob .u-image{top: 17.5rem; left: 50%; margin-left: -3.5rem;}
  .g-wrap .m-mob .u-image img{width: 7rem;}
  .g-wrap .m-mob .u-rule{top: 20rem; left: 50%; margin-left: -3.5rem;}
  .g-wrap .m-mob .u-rule img{width: 7rem;}
  .g-wrap .m-mob .u-work{top: 23rem; left: 50%; margin-left: -3.5rem;}
  .g-wrap .m-mob .u-work img{width: 7rem;}
}