/* CSS Document */
@import url("core.css");
@import url("animate.css");
/*******/
@import url("fonts.css?v=106");
@import url("menu.css?v=11");
/* Scroll
========================================================================== */
.mouse { width: 15px; height:22px; border:2px solid #000; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; position:absolute; bottom:4.71%; left:50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.mouse:before { position: absolute; content: "SCROLL"; margin: auto; top: -26px; left: -1.5em; font-size:12px; letter-spacing: .1em; }
.mouse:after { content: ''; position: absolute; top: 4px; left: 50%; margin-left: -1px; background-color: #000; width: 2px; height: 3px; border-radius: 2px; opacity: 1; -webkit-transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px); transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px); -webkit-animation: scroll 1.5s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; animation: scroll 1.5s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
@media screen and (max-width:767px) {
.mouse {
display: none;
}
}
@-webkit-keyframes scroll { 0%, 20% {
 -webkit-transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
 transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
}
 10% {
 -webkit-transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
 transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
 opacity: 1;
}
 100% {
 -webkit-transform: translateY(10px) scaleY(2.5) scaleX(0.5) translateZ(0px);
 transform: translateY(10px) scaleY(2.5) scaleX(0.5) translateZ(0px);
 opacity: 0.01;
}
}
@keyframes scroll { 0%, 20% {
 -webkit-transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
 transform: translateY(0px) scaleY(1) scaleX(1) translateZ(0px);
}
 10% {
 -webkit-transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
 transform: translateY(0px) scaleY(1.2) scaleX(1.2) translateZ(0px);
 opacity: 1;
}
 100% {
 -webkit-transform: translateY(10px) scaleY(2.5) scaleX(0.5) translateZ(0px);
 transform: translateY(10px) scaleY(2.5) scaleX(0.5) translateZ(0px);
 opacity: 0.01;
}
}
/***************/
.column { max-width:1366px; margin:0 auto; width: 100vw; padding:112px 83px; z-index:9; position:relative }
.column_about { position:relative; background-color: #00349d; color:#fff; line-height:1.5; font-size:18px; text-align:center }
.about_title { font-size:40px; font-weight:normal; display:block }
.about_title:after { width:60px; height:3px; background:#fff; content:""; display:block; margin:0 auto; margin-top:10px; margin-bottom:15px }
.about_desc h2 { display:block; margin-bottom:35px }
.about_desc p { line-height:2; margin-top:15px; font-size:20px }
.about_desc { width:650px; margin:0 auto; margin-top:50px }
.column_about:before { top: 0; left: 0; height: 44.16%; background: url(../images/index_bg01_pc.png) 0 bottom repeat-x; background-size: cover; z-index: 0; -webkit-animation: bgroop 40s linear infinite; animation: bgroop 40s linear infinite; }
.column_about:after { bottom: 0; right: 0; height: 55.84%; background: url(../images/index_bg02_pc.png) 0 top repeat-x; background-size: cover; z-index: 0; -webkit-animation: bgreverse 40s linear infinite; animation: bgreverse 40s linear infinite; }
.column_about:before, .column_about:after { position: absolute; content: ""; width: 100%; z-index:1; display:block }
.other_icon:before{ content:"如Bpvis、Clip、Elite、Ranmay、NIEGO、NEWIDEA等";}
@-webkit-keyframes bgroop {  from {
 background-position: 0 0;
}
to { background-position: -2040px 0; }
}
@keyframes bgroop {  from {
 background-position: 0 0;
}
to { background-position: -2040px 0; }
}
@-webkit-keyframes bgreverse {  from {
 background-position: -2040px 0;
}
to { background-position: 0 0; }
}
@keyframes bgreverse {  from {
 background-position: -2040px 0;
}
to { background-position: 0 0; }
}
.column_adv { padding:0px 0 }
.column_adv .column { max-width:1150px; }
.adv_ulist { }
.adv_ulist li { float:left; width:100%; height:272px; margin-bottom:80px; }
.adv_ulist li:last-child { margin-bottom:0 }
.adv_ulist .icon { float:left; width:272px; background-color:#f1f2f6; -webkit-border-radius:90px; border-radius:90px; -moz-border-radius:90px; position:relative; padding:50px; color:#00349d; height:272px }
.adv_ulist .icon em { display:block; font-size:50px; font-weight:bold; line-height:normal }
.adv_ulist .icon img { width:150px; height:auto; position:absolute; right:-30px; bottom:-30px }
.adv_ulist .info { float:right; width:560px; line-height:2; font-size:20px; }
.adv_ulist .info h2 { font-size:30px; display:block; margin-top:35px; margin-bottom:15px }
.column_history { background:#f0f2f9 }
.column_history .column { max-width:1150px; }
.column_history h2 { color:#00349d; font-size:30px; margin-bottom:50px; }
.history_ulist { }
.history_ulist li { padding-left:165px; position:relative; color:#021039; font-size:16px; line-height:2; padding-bottom:30px; }
.history_ulist li label { position:absolute; color:#062d9f; left:60px; top:-4px; font-size:20px; }
.history_ulist li:before { content: ''; display: block; width: 15px; height: 15px; -webkit-border-radius: 50%; border-radius: 50%; -moz-border-radius: 50%; border: 2px solid #062d9f; position: absolute; left:0; top:7px; box-sizing: border-box; background:#f0f2f9; z-index:10 }
.history_ulist li:after { content: ''; display: block; width:1px; position: absolute; background: #062d9f; top:7px; left: 7px; height:100%; z-index:8; }
.history_ulist li:last-child:after { height:80% }
.column_btn { display:block; }
.column_btn a { display:inline-block; border:2px solid #fff; background-color: #fff; padding:15px 80px; color:#00349d; font-size:14px; font-weight:bold; -webkit-border-radius:50px; border-radius:50px; -moz-border-radius:50px; }
.column_btn a:hover { background:none; color:#fff }
@media(max-width:1400px){
.column{ max-width:100%; padding:80px}
.column_adv{ padding-bottom:50px}
}
@media(max-width:1280px){
.column{ max-width:1000%; padding:50px}
}
@media(max-width:1250px){
#fixed_height{ height:117px}
}
@media(max-width:1000px){
.adv_ulist .icon{ width:30%; height:28vw}
.adv_ulist .info{ width:60%}
.adv_ulist li{ height:28vw}
.adv_ulist .info h2{ margin-top:25px}
}
@media(max-width:900px){
.adv_ulist .icon{ width:32%; height:28vw}
.adv_ulist li{ height:28vw}
.adv_ulist .info h2{ margin-top:15px; margin-bottom:0}
.adv_ulist .icon{ padding:40px}
}
@media(max-width:800px){
.adv_ulist .info p{ line-height:1.8}
.adv_ulist .icon img{ width:120px}
.about_desc{ width:100%}
.column_quote h2{ font-size:20px}
.column_quote .column{ padding:35px 0}
#fixed_height{ height:82px}
}
@media(max-width:700px){
.adv_ulist .info h2{ margin-top:0; font-size:25px}
.adv_ulist .info p{ font-size:16px;}
.adv_ulist .icon em{ font-size:40px}
.adv_ulist .icon{ padding-top:30px}
.adv_ulist .icon img{ width:100px; right:0px}
.adv_ulist li{ height:auto; float:left; width:100%; margin-bottom:10.42857142857143vw}
.adv_ulist .icon{ width:35%; height:27vw}
.history_ulist li{ padding-left:120px}
.history_ulist li label{ left:40px}
}	
@media(max-width:600px){
.adv_ulist .icon img{ width:60px; right:20px; bottom:0px}
.adv_ulist .info h2{ font-size:20px}
.adv_ulist .icon em{ font-size:25px; line-height:100%}
.adv_ulist li{ margin-bottom:30px}
.column_adv{ padding-bottom:0}
.about_title{ font-size:30px}
.column_about{ font-size:16px; line-height:1.5}
.about_desc{ margin-top:25px}
.about_desc p{ font-size:18px; line-height:1.5}
.about_desc h2{ margin-bottom:20px}
.column_quote .column_btn a{ padding:10px 50px}
}
@media(max-width:500px){
#fixed_height{ height:63px}	
.column{ padding:40px 25px}
.adv_ulist .icon{ width:100px; height:100px; padding:25px 25px}
.adv_ulist .icon img{ width:35px; right:0; bottom:0}
.adv_ulist .info{ width:70%}
.adv_ulist .info p{ font-size:14px}
.about_title{ font-size:30px}
.column_about{ font-size:16px; line-height:1.5}
.about_desc{ margin-top:25px}
.about_desc p{ font-size:16px; line-height:1.5}
.about_desc h2{ margin-bottom:20px}
.about_desc h2{ font-size:18px; font-weight:bold}
.history_ulist li{ padding-left:30px}
.history_ulist li label{ left:40px; position:static; line-height:30px}
.column_quote h2{ font-size:16px; margin-bottom:15px}
.column_quote .column{ padding:25px 0}
}
@media(max-width:450px){
.adv_ulist .info{ width:65%}
.adv_ulist .info h2{ font-size:18px}
.column_about{ font-size:16px; line-height:1.5}
.about_desc{ margin-top:25px}
.about_desc p{ font-size:14px; line-height:1.5}
.about_desc h2{ margin-bottom:20px}
.about_desc h2{ font-size:14px; font-weight:bold}
}
@media(max-width:400px){
.adv_ulist .info{ width:65%}
.adv_ulist .icon{ width:80px; height:80px; padding:15px 15px}
.adv_ulist .info h2{ font-size:16px; font-weight:bold}
.adv_ulist .info p{ font-size:13px; line-height:150%}
.history_ulist li{ font-size:15px; line-height:1.5}
.column_quote .column_btn a{ padding:10px 50px}
}
@media(max-width:360px){
.adv_ulist .icon img{ width:30px; right:0; bottom:0}	
.adv_ulist .info h2{ font-size:18px; font-weight:bold}	
.adv_ulist .info p{ font-size:15px; line-height:150%}
}
@media(max-width:359px){
.about_desc p{ font-size:12px; line-height:1.5}
.about_desc h2{ margin-bottom:20px}
.about_desc h2{ font-size:15px; font-weight:bold}
}