/*CSS FOR WEBKIT OR OTHER ADVANCED BROWSER
 *CREATE IN 20141011
 *AUTHOR GUIFENGZ@OUPENG.COM
 *VERSION 1.0
 */
body,ul,p,dl,dt,dd,h4,h3{ padding:0px; margin:0px;}
body{ padding-top: 105px; color: #666666; font: 14px/24px Arial, Verdana, "\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53"; background: #eff2f4; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility;}
a{ text-decoration: none;}
ul{ list-style: none;}
input{ outline: 0; color: #666666}
img{ border: 0px;}
.tab-ctn-wrap .tab-ctn .error, .tab-ctn-wrap .tab-ctn .error:focus{ border: 1px solid #ff0000; box-shadow: 0px 0px 1px 0px #ff0000;}
.basic-toast{ position: fixed; left: 50%; top: 19%; padding: 0px 10px; background: rgba(0,0,0,0.6); background: #000000\9; color: #c8beb2; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; line-height:36px; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -o-transform:translate(-50%,0); -ms-transform:translate(-50%,0); transform:translate(-50%,0); z-index: 100000;}
.toast-ctn{ position: fixed; width: 100%; height: 90%; padding-top: 10%; background: rgba(0,0,0,.1); top: 0px; left: 0px; text-align: center; z-index: 100000;}
.toast-ctn .toast{ position: relative; display: inline-block; *display: inline; margin: 0 auto; padding: 0px 10px; line-height: 36px; background: #000000\9; background: rgba(0,0,0,0.6); color: #c8beb2; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px;}
.toast-ctn .toast-gif{ padding-left: 36px;}
.toast-ctn .loadingGif { position: absolute; display: block; top: 6px; left: 6px; width: 25px; height: 25px; background: url("./../images/loading.png") 0 0 no-repeat; background-size: 25px; z-index: 5000; -webkit-animation: oupengLoading 1s linear infinite; -moz-animation: oupengLoading 1s linear infinite; -ms-animation: oupengLoading 1s linear infinite; -o-animation: oupengLoading 1s linear infinite; animation: oupengLoading 1s linear infinite;}
@-webkit-keyframes oupengLoading{
	from{-webkit-transform:rotate(0)}
	to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes oupengLoading{
	from{-webkit-transform:rotate(0)}
	to{-webkit-transform:rotate(360deg)}
}
@-ms-keyframes oupengLoading{
	from{-webkit-transform:rotate(0)}
	to{-webkit-transform:rotate(360deg)}
}
@-o-keyframes oupengLoading{
	from{-webkit-transform:rotate(0)}
	to{-webkit-transform:rotate(360deg)}
}
@keyframes oupengLoading{
	from{-webkit-transform:rotate(0)}
	to{-webkit-transform:rotate(360deg)}
}

.header, .header .nav-wrap, .header .subnav-wrap, .main, .partner, .footer, .footer .recomend-link, .footer .copyright{ width: 100%; margin: 0 auto; overflow: hidden;}
.header{ position: fixed; top: 0px; left: 0px; z-index: 99999;}
.header .nav-wrap{ background: #e60012;}
.header .nav-wrap .nav{ max-width: 1000px; margin: 0 auto; height: 60px; line-height: 60px; font-size: 16px; -webkit-transition: height .2s, line-height .2s; -moz-transition: height .2s, line-height .2s; -o-transition: height .2s, line-height .2s; transition: height .2s, line-height .2s;}
.header .nav-wrap .nav .user-link{ margin-left: 20px; color: #ffffff; -webkit-transition: padding 0.2s; -moz-transition: padding 0.2s; -o-transition: padding 0.2s; -ms-transition: padding 0.2s; transition: padding 0.2s;}
.header .nav-wrap .nav .user-link-unread{ position: relative; padding-right: 20px;}
.header .nav-wrap .nav .user-link-unread .msg{ position: absolute; top: 2px; right: 0px; padding: 0px 6px; font-size: 12px; font-style: normal; font-weight: bold; line-height: 12px; background: #ffffff; color: #ff0000; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px;}
.header .nav-wrap .nav .login-action, .header .nav-wrap .nav .login-jump{ display: inline-block; float: right; overflow: hidden;}
.header .nav-wrap .nav .login-jump{ display: none;}
.header .nav-wrap .nav .oupeng{ float: left; display: inline-block; padding: 11px 0px; height: 38px; -webkit-transition: width .2s, height .2s; -moz-transition: width .2s, height .2s; -o-transition: width .2s, height .2s; transition: width .2s, height .2s;}
.header .nav-wrap .nav .oupeng img{ width: 100%; height: auto;}
.header .subnav-wrap{ background: rgba(255,255,255,0.6); background: #feffff\9; border-bottom: 1px solid #e1e1e2;}
.header .subnav-wrap .subnav{ max-width: 1000px; margin: 0 auto; height: 44px; line-height: 44px; font-size: 16px; -webkit-transition: height .2s, line-height .2s; -moz-transition: height .2s, line-height .2s; -o-transition: height .2s, line-height .2s; transition: height .2s, line-height .2s;}
.header .subnav-wrap .subnav .block-tag{ position: relative; float: right; padding-left: 40px; margin-left: 20px; color: #666666;  background: url(../images/subnav_icons_2x.png) 0px 0px no-repeat; background: url(../images/subnav_icons_1x.png) no-repeat\9; background-size: 14px;}
.header .subnav-wrap .subnav .ptys{ background-position: 18px 15px;}
.header .subnav-wrap .subnav .hzhb{ background-position: 18px -22px;}
.header .subnav-wrap .subnav .xmal{ background-position: 18px -59px;}
.header-active{ top: 0px; left: 0px;}
.header-active .nav-wrap .nav{ height: 40px; line-height: 40px;}
.header-active .subnav-wrap .subnav{ height: 32px; line-height: 32px;}
.header-active .nav-wrap .nav .oupeng{ height: 18px;}
.header-active .nav-wrap .nav .user-link, .header .subnav-wrap .subnav .block-tag{ font-size: 14px;}
.header-active .subnav-wrap .subnav .ptys{ background-position: 18px 10px;}
.header-active .subnav-wrap .subnav .hzhb{ background-position: 18px -27px;}
.header-active .subnav-wrap .subnav .xmal{ background-position: 18px -64px;}
.main{ position: relative;}
.part-prev-tag{ position: absolute; bottom: 4px; left: 50%; margin-left: -45px; z-index: 999; display: block; width: 90px; height: 100px; background: url(../images/block_tags.png) 0px 0px no-repeat;}
.part-next-tag{ position: absolute; display: block; top: -21px; left: 50%; margin-left: -43px; width: 86px; height: 60px; background: url(../images/block_tags.png) 0px -139px no-repeat;}
.advantage-wrap{ width: 100%; background: #f7f7f7 url(../images/index_bg_part_1.png) center top no-repeat;}
.advantage-wrap .advantage{ position: relative; width: 1000px; height: 621px; margin: 0 auto;}
.advantage-wrap .advantage .thumb{ position: absolute; top: 17px; left: 70px; width: 1248px; height: 866px; background: url(../images/thumb.png) 0px 0px no-repeat; background-size: 1572px; background: url(../images/thumb_ie.png) no-repeat\9; z-index: 10; zoom:1; opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); -webkit-transition: -webkit-transform .6s, opacity .6s; -moz-transition: transform .6s, opacity .6s; -o-transition: transform .6s, opacity .6s; transition: transform .6s, opacity .6s;}
.advantage-wrap .advantage .thumb-active{ position: absolute; top: 242px; left: 284px; width: 467px; height: 340px; background: url(../images/thumb_active.png) 0px 0px no-repeat; background-size: 251.6px; background: url(../images/thumb_active_ie.png) no-repeat\9; z-index: 20; zoom:1; opacity: 0; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s;}
.partner-wrap{ height: 824px; background: url(../images/index_bg_part_2.jpg) center top no-repeat;}
.partner{ width: 1000px; margin: 0 auto;}
.example-wrap{ position: relative; height: 703px; background: url(../images/index_bg_part_3.jpg) center top no-repeat;}

.advantage-animate{ position: absolute; top: 0px; left: 0px; width: 900px; height: 500px; background: url(../images/advantage_umbrella.png) 157px 135px no-repeat; z-index: 30; opacity: 0;}
.advantage-animate .sysdes{ top: 70px; left: 190px; opacity: 0;}
.advantage-animate .invdes{ top: 180px; left: 435px; opacity: 0;}
.advantage-animate .coodes{ top: 414px; right: 410px; opacity: 0;}
.advantage-animate .userdes{ top: 350px; right: 680px; opacity: 0;}
.advantage-animate .effdes{ top: 200px; right: 750px; opacity: 0;}
.advantage-animate .des-item, .advantage-animate .des-item-reverse{ position: absolute; white-space:nowrap;}
.advantage-animate .des-item .des-item-icon{ position: absolute; top: 0px; left: 0px; width: 64px; height: 64px; background-image: url(../images/advantage_icons_2x.png); background-size: 325px auto; background-repeat: no-repeat; }
.advantage-animate .des-item-reverse .des-item-icon{ position: absolute; top: 0px; right: 0px; width: 64px; height: 64px; background-image: url(../images/advantage_icons_2x.png); background-size: 325px auto; background-repeat: no-repeat;}
.advantage-animate .des-item .des-item-tag{ position: absolute;left: 70px; top: 8px; font-style: normal; font-size: 14px; color: #333333;}
.advantage-animate .des-item-reverse .des-item-tag{ position: absolute; right: 70px; top: 8px; white-space:nowrap; font-style: normal; font-size: 14px; color: #333333;}
.advantage .advantage-animate .icon-sys{ background-position: -1px 0px;}
.advantage .advantage-animate .icon-sys:hover{ background-position: -1px -87px;}
.advantage .advantage-animate .icon-invest{ background-position: -66px 0px;}
.advantage .advantage-animate .icon-invest:hover{ background-position: -66px -87px;}
.advantage .advantage-animate .icon-cooperate{ background-position: -131px 0px;}
.advantage .advantage-animate .icon-cooperate:hover{ background-position: -131px -87px;}
.advantage .advantage-animate .icon-user{ background-position: -195px 0px}
.advantage .advantage-animate .icon-user:hover{ background-position: -195px -87px;}
.advantage .advantage-animate .icon-effect{ background-position: -260px 0px;}
.advantage .advantage-animate .icon-effect:hover{ background-position: -260px -87px;}
.advantage-animate .des-item-text{ display: none; padding:8px 26px 7px 36px; margin-left: 32px; background: #ffffff; border-top-right-radius: 32px; border-bottom-right-radius: 32px;}
.advantage-animate .des-item-reverse .des-item-text{ display: none; padding:8px 36px 7px 36px; margin-right: 32px; margin-left: 0px; background: #ffffff; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 32px; border-bottom-left-radius: 32px; overflow: hidden;}
.advantage-animate .des-item .des-item-text h4,.advantage-animate .des-item-reverse .des-item-text h4{ font-size: 18px; color: #333333;}
.advantage-animate .des-item .des-item-text p, .advantage-animate .des-item-reverse .des-item-text p{ font-size: 14px; color: #999999;}

.ant-type1-init{ -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .5s, opacity .5s; -moz-transition: -moz-transform .5s, opacity .5s; -o-transition: -o-transform .5s, opacity .5s; transition: transform .5s, opacity .5s;}

.partner-circle{ position: relative; width: 650px; height: 650px; margin: 60px auto 0px 300px; background: url(../images/partner_dotted_circle.png) center top no-repeat; opacity: 0; -webkit-transform: scale(0);  transform: scale(0); -webkit-transition: -webkit-transform .5s, opacity .5s; transition: transform .5s, opacity .5s;}
.partner-circle .partner-logo{ position: absolute; left: 50%; top: 50%; margin-left: -98px; margin-top: -105px; width: 196px; height: 210px; background: url(../images/partner_oupeng.png) center top no-repeat;}
.partner-circle .partner-item{ position: absolute; width: 67px; height: 67px; background-image: url(../images/partner_icons_2x.png); background-size: 140px auto; background-repeat: no-repeat; opacity: 0;}
.partner-circle .tianmao{ top: 75px; left: 295px; -webkit-transform: translate(0, 80px); -moz-transform: translate(0, 80px); -o-transform: translate(0, 80px); transform: translate(0, 80px); background-position: -74px -341px;}
.partner-circle .jd{ top: 105px; left: 400px; -webkit-transform: translate(-36px, 70px); -moz-transform: translate(-36px, 70px); -o-transform: translate(-36px, 70px); transform: translate(-36px, 70px); background-position: -74px -139px;}
.partner-circle .amazon{ top: 185px; left: 470px; -webkit-transform: translate(-61px, 46px); -moz-transform: translate(-61px, 46px); -o-transform: translate(-61px, 46px); transform: translate(-61px, 46px); background-position: -74px -207px;}
.partner-circle .ifeng{ top: 285px; left: 502px;-webkit-transform: translate(-80px, 12px); -moz-transform: translate(-80px, 12px); -o-transform: translate(-80px, 12px); transform: translate(-80px, 12px); background-position: 0px -273px;}
.partner-circle .sina{ top: 385px; left: 474px; -webkit-transform: translate(-70px, -24px); -moz-transform: translate(-70px, -24px); -o-transform: translate(-70px, -24px); transform: translate(-70px, -24px); background-position: 0px -206px;}
.partner-circle .tuniu{ top: 469px; left: 396px; -webkit-transform: translate(-36px, -60px); -moz-transform: translate(-36px, -60px); -o-transform: translate(-36px, -60px); transform: translate(-36px, -60px); background-position: -74px -273px;}
.partner-circle .ganji{ top: 500px; left: 295px; -webkit-transform: -webkit-translate(0px, -70px); transform: translate(0px, -70px); -o-transform: translate(0px, -70px); transform: translate(0px, -70px); background-position: 0px 0px;}
.partner-circle .yiche{ top: 469px; left: 190px; -webkit-transform: translate(40px, -55px); -moz-transform: translate(40px, -55px); -o-transform: translate(40px, -55px); transform: translate(40px, -55px); background-position: -74px -67px;}
.partner-circle .autohome{ top: 385px; left: 116px; -webkit-transform: translate(64px, -22px); -moz-transform: translate(64px, -22px); -o-transform: translate(64px, -22px); transform: translate(64px, -22px); background-position: -74px 0px;}
.partner-circle .baidu{ top: 285px; left: 88px; -webkit-transform: translate(74px, 14px); -moz-transform: translate(74px, 14px); -o-transform: translate(74px, 14px); transform: translate(74px, 14px); background-position: 0px -140px;}
.partner-circle .tencent{ top: 185px; left: 116px; -webkit-transform: translate(58px, 46px); -moz-transform: translate(58px, 46px); -o-transform: translate(58px, 46px); transform: translate(58px, 46px); background-position: 0px -340px;}
.partner-circle .taobao{top: 105px; left: 186px; -webkit-transform: translate(36px, 68px); -moz-transform: translate(36px, 68px); -o-transform: translate(36px, 68px); transform: translate(36px, 68px); background-position: 0px -63px; background-size: 131px;}

.example{ position: relative; width: 1000px; margin: 0 auto;}
.example-phone{ position: absolute; top: 30px; left: 40px; width: 282px; height: 464px; background: url(../images/example_phone.png) center top no-repeat; opacity: 0; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); -webkit-transition: -webkit-transform .5s, opacity .5s; -moz-transition: -moz-transform .5s, opacity .5s; -o-transition: -o-transform .5s, opacity .5s; transition: transform .5s, opacity .5s;}
.example-phone-light{ position: absolute; top: 120px; left: 88px; width: 796px; height: 108px; background: url(../images/example_phone_light.png) center top no-repeat; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .3s, opacity .3s; -moz-transition: -moz-transform .3s, opacity .3s; -o-transition: -o-transform .3s, opacity .3s; transition: transform .3s, opacity .3s;}
.example_phone_banner{ position: absolute; top: 89px; left: 334px; width: 587px; height:117px; background: url(../images/example_phone_banner.png) center top no-repeat; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .3s, opacity .3s; -moz-transition: -moz-transform .3s, opacity .3s; -o-transition: -o-transform .3s, opacity .3s; transition: transform .3s, opacity .3s;}
.example-des{ width: 560px; padding: 260px 0px 0px 360px; color: #666666;}
.example-des h3{ font-size: 36px;}
.example-des .example-text{ padding-right: 4px;}
.example-des .example-text:after{ content: "/"; display: inline-block; width: 18px; height: 32px; margin-left: 26px; color: #ff4d06; font-weight: normal; line-height: 40px;}
.example-des .example-name{ font-size: 18px;}
.example-des .example-des-content{ padding-top: 20px;}
.example-des .example-des-content dl{ margin-bottom: 25px;}
.example-des .example-des-content dt{ position: relative; padding-left: 12px; float: left; font-weight: bold;}
.example-des .example-des-content dt:after{ content: ">"; position: absolute; top: 0px; left: 0px; color: #ff4d06;}
.example-des .example-des-content dd{ position: relative; margin-left: 82px;}
.example-des .example-des-content .count{ position: absolute; top: -22px; left: 65px; color: #ff4b03; font-size: 48px; line-height: 48px;}
.example-des .example-des-content .linetwo{ top: 26px; left: 65px;}
.example-des .example-des-content .count:after{ content: " 万"; font-size: 16px; color: #666666;}

.signin-wrap{ display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 99999;}
.signin-wrap .signin-filter{ width: 100%; height: 100%; background: #000000; opacity: 0.5; filter: alpha(opacity=50);}
.signin-wrap .signin{ position: absolute; left: 50%; top: 120px; width: 700px; height: 380px; margin-left: -350px; background: #ffffff; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;}
.signin-wrap .signin-title{ padding-top: 16px; height: 70px; line-height: 70px; text-align: center; font-size: 24px; color: #333333;}
.signin-wrap .signin-info{ padding: 18px 0px 0px; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; background: #f6f6f6;}
.signin-wrap .signin-info-item{ position: relative; margin: 0 auto 20px; overflow: hidden;}
.signin-wrap .signin-info-item .signin-info-name{ float: left; width: 240px; height: 40px; line-height: 40px; font-size: 16px; color: #666666; text-align: right;}
.signin-wrap .signin-info-item .signin-info-name i{ padding-right: 5px; color: #fa8560;}
.signin-wrap .signin-info-item .signin-info-value{ position: relative; padding-top: 1px; margin-left: 240px;}
.signin-wrap .signin-info-item .signin-info-value input{ padding: 10px 0px 10px 32px; width: 290px; height: 16px; line-height: 16px; font-size: 14px; color: #666666; background: #ffffff; border: 1px solid #e7e7e7; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 1px 1px 1px 1px #f7f7f7 inset; -moz-box-shadow: 1px 1px 1px 1px #f7f7f7 inset; -o-box-shadow: 1px 1px 1px 1px #f7f7f7 inset; box-shadow: 1px 1px 1px 1px #f7f7f7 inset;}
.signin-wrap .signin-info-item .signin-info-value input:focus{ border: 1px solid #8cbb27; -webkit-box-shadow: 0px 0px 1px 0px #8cbb27; box-shadow: 0px 0px 1px 0px #8cbb27;}
.signin-wrap .signin-info-item .signin-info-value .error, .signin-wrap .signin-info-item .signin-info-value .error:focus{ border: 1px solid #ff0000; box-shadow: 0px 0px 1px 0px #ff0000;}
.signin-wrap .signin-info-item .signin-info-value .icon-people, .signin-wrap .signin-info-item .signin-info-value .icon-lock{ display: inline-block; position: absolute; top: 12px; left: 10px; width: 16px; height: 16px;}
.signin-wrap .signin-info-item .signin-info-value .icon-people{ background: url(../images/icon_people_2x.png) center top no-repeat;  background-size: 16px; background: url(../images/icon_people.png) no-repeat\9;}
.signin-wrap .signin-info-item .signin-info-value .icon-lock{ background: url(../images/icon_lock_2x.png) center top no-repeat;  background-size: 16px; background: url(../images/icon_lock.png) no-repeat\9;}
.signin-wrap .signin-info-item .signin-info-value .check{ float: left; width: 94px; padding-left: 8px;}
.signin-wrap .signin-info-item .signin-info-value .random-img{ float: left; width: 94px; height: 36px; margin-left: 20px; border: 1px solid #e7e7e7;}
.signin-wrap .signin-info-item .signin-info-value .change-img, .signin-wrap .forget-pwd{ padding-left: 10px; line-height: 38px; color: #6699cc;}
.confirm-btn{ display: block; width: 140px; height: 44px; margin: 24px auto 0px; text-align: center; font-size: 16px; line-height: 44px; color: #ffffff; background: #8cbb27; -webkit-box-shadow: 0px 2px 0px #ccc; -moz-box-shadow: 0px 2px 0px #ccc; -o-box-shadow: 0px 2px 0px #ccc; box-shadow: 0px 2px 0px #ccc;}
.signin-wrap .forget-pwd{ position: absolute; bottom: 27px; *bottom: 44px; left: 420px;}
.signin-wrap .signin-close{ position: absolute; display: inline-block; top: 15px; right: 15px; width: 32px; height: 32px; background: url(../images/icon_close.png) center top no-repeat; cursor: pointer;}

.footer{ padding: 32px 0px; background: #fdfdfd;}
.footer .recomend-link{ text-align: center;}
.footer .recomend-link li{ display: inline; padding: 0px 22px; font-size: 14px; line-height: 14px; border-left: 1px solid #cccccc;}
.footer .recomend-link li:first-child{ border-left: 0px;}
.footer .recomend-link li a{ color: #cccccc;}
.footer .copyright{ padding-top: 10px; text-align: center; font-size: 12px; color: #bfbfbf;}
.footer .copyright .copyright-info{}
.footer .copyright .copyright-info li{ display: inline; padding: 0px 4px; line-height: 12px; border-left: 1px solid #bfbfbf;}
.footer .copyright .copyright-info li:first-child{ border-left: 0px;}
.footer .copyright .copyright-info li a{ color: #bfbfbf;}