@charset "utf-8";

html{overflow-y:scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th{margin:0;padding:0;}
fieldset,img {border:0;}
ul,li,ol {list-style:none;}
select,input{vertical-align:middle;}
a{color:#333333; text-decoration:none; outline:none;star:expression(this.onFocus=this.blur());}
a:hover{ text-decoration: underline;}
.fl { float:left;}
.fr { float:right;}
.none {display:none;}
body, html {width:100%; font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;font-weight: normal;display: -webkit-box;-webkit-box-orient: vertical; -webkit-box-align: center;}

/* *{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;} 用于解决某些情况下出现闪屏的问题，若无则不加*/
body{opacity: 1;-webkit-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in; }
html{ font-size: 625%; } 
@media screen and (max-width:359px) and (orientation:portrait) {
    html { font-size: 266.67%; } 
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 300%; } 
}
@media screen and (min-width:375px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 312.5%; } 
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 333.33%; } 
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
    html { font-size:400%;}
} 
@media screen and (min-width:640px)and (max-width:719px) and (orientation:portrait){
    html { font-size:533.33%;}
} 
@media screen and (min-width:720px)and (max-width:749px) and (orientation:portrait){
    html { font-size:600%;}
} 
@media screen and (min-width:720px)and (max-width:1024px) and (orientation:portrait){
    html { font-size:625%;}
} 
@media screen and (min-width:1025px) and (orientation:portrait){
    html { font-size:625%;}
}
/* 按750尺寸界面效果 1rem=100px */
body { font-size:13px; background:#ffffff; color:#333333;}

/* style */
.titleself_top {width:100%; height:11rem; display:block; background:url(../images/titleself_bg01.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.titleself_cen {width:100%; height:17rem; display:block; background:url(../images/titleself_bg02.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.titleself_bot {width:100%; height:1rem; display:block; background:url(../images/titleself_bg03.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}

.titleself_logo {width:4.8rem; height:1.8rem; display:block; text-indent:-999rem; overflow:hidden; position:absolute; left:50%; top:0.8rem; margin-left:-6.6rem; z-index:9;}
.titleself_btn {width:5.2rem; height:1.6rem; display:block;text-indent:-999rem; overflow:hidden; background:url(../images/titleself_btn.png) no-repeat; background-size:100%; position:absolute; left:50%; top:3.9rem; margin-left:-2.6rem;}
.titleself_btn:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}
.titleself_text { font-size:0.24rem; line-height:0.42rem; color:#333333; position:absolute; left:50%; top:6.7rem; margin-left:2.8rem;}
.titleself_pic {width:7.4rem; display:block; position:absolute; left:50%; top:6.05rem; margin-left:-6rem;}
.titleself_pic li {width:3.4rem; height:1.14rem; display:block; background:#002b71; border-radius:0.15rem; overflow:hidden; float:left; margin:0.06rem 0.15rem; position:relative; overflow:hidden;}
.titleself_pic li:before { width:0.44rem; height:0.44rem; display:block; border-radius:0.22rem; background:#ffffff; border:0.01rem solid #000b1b; color:#001d4b; font-size:0.3rem; line-height:0.44rem; text-align:center; font-weight:bold; position:absolute; left:0.2rem; top:0.35rem; z-index:5;}
.titleself_pic li.titleself_pic01:before {content:'01';}
.titleself_pic li.titleself_pic02:before {content:'02';}
.titleself_pic li.titleself_pic03:before {content:'03';}
.titleself_pic li.titleself_pic04:before {content:'04';}
.titleself_pic li.titleself_pic05:before {content:'05';}
.titleself_pic li.titleself_pic06:before {content:'06';}
.titleself_pic li.titleself_pic07:before {content:'07';}
.titleself_pic li.titleself_pic08:before {content:'08';}
.titleself_pic li.titleself_pic09:before {content:'09';}
.titleself_pic li.titleself_pic10:before {content:'10';}
.titleself_pic li.titleself_pic11:before {content:'11';}
.titleself_pic li.titleself_pic12:before {content:'12';}
.titleself_pic li.titleself_pic13:before {content:'13';}
.titleself_pic li.titleself_pic14:before {content:'14';}
.titleself_pic li.titleself_pic15:before {content:'15';}
.titleself_pic li.titleself_pic16:before {content:'16';}
.titleself_pic li.titleself_pic17:before {content:'17';}
.titleself_pic li.titleself_pic18:before {content:'18';}
.titleself_pic li.titleself_pic19:before {content:'19';}
.titleself_pic li.titleself_pic20:before {content:'20';}

.titleself_pic li:after { content:''; width:3.5rem; height:1.6rem; display:block; position:absolute; left:0.3rem; top:-0.23rem; z-index:2; -webkit-animation: titleself_pic 1s steps(12) infinite;}
	@-webkit-keyframes titleself_pic{
		 to{
			 background-position: 0 -19.2rem;
		 }
	 }
.titleself_pic li.titleself_pic01:after {background:url(../images/titleself_pic01.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic02:after {background:url(../images/titleself_pic02.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic03:after {background:url(../images/titleself_pic03.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic04:after {background:url(../images/titleself_pic04.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic05:after {background:url(../images/titleself_pic05.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic06:after {background:url(../images/titleself_pic06.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic07:after {background:url(../images/titleself_pic07.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic08:after {background:url(../images/titleself_pic08.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic09:after {background:url(../images/titleself_pic09.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic10:after {background:url(../images/titleself_pic10.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic11:after {background:url(../images/titleself_pic11.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic12:after {background:url(../images/titleself_pic12.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic13:after {background:url(../images/titleself_pic13.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic14:after {background:url(../images/titleself_pic14.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic15:after {background:url(../images/titleself_pic15.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic16:after {background:url(../images/titleself_pic16.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic17:after {background:url(../images/titleself_pic17.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic18:after {background:url(../images/titleself_pic18.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic19:after {background:url(../images/titleself_pic19.png) no-repeat; background-size:100% 1200%;}
.titleself_pic li.titleself_pic20:after {background:url(../images/titleself_pic20.png) no-repeat; background-size:100% 1200%;}



.titleself_footer {width:10rem; display:block; position:absolute; left:50%; top:0.1rem; margin-left:-5rem; color:#ffffff;}


/* 右浮導航 */
.point_right { position:absolute; position:fixed; right:0rem; top:50%; z-index:9; margin-top:-2rem; width:2.2rem;}

.point_right a {width:2.2rem; height:0.8rem; margin:0 0 0 0; text-indent:-999rem; overflow:hidden; float:left; position:relative;}
.point_right a:before {content: ''; width:2.2rem; height:100%; text-indent:-999rem; display:block; overflow:hidden; position:absolute; left:50%; top:0; margin-left:-1.1rem; z-index:2;}
.point_right a.m1:before {background:url(../images/titleself_right_menu1.png) no-repeat;}
.point_right a.m2:before {background:url(../images/titleself_right_menu2.png) no-repeat;}
.point_right a.m3:before {background:url(../images/titleself_right_menu3.png) no-repeat;}
.point_right a.m4:before {background:url(../images/titleself_right_menu4.png) no-repeat;}
.point_right a.m5:before {background:url(../images/titleself_right_menu5.png) no-repeat;}
.point_right a.m6:before {background:url(../images/titleself_right_menu6.png) no-repeat;}
.point_right a:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}



@media screen and (max-width:1024px) and (orientation:portrait) {
.titleself_top {width:100%; height:11rem; display:block; background:url(../images/titleself_m_bg01.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.titleself_cen {width:100%; height:19rem; display:block; background:url(../images/titleself_m_bg02.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.titleself_bot {width:100%; height:2.4rem; display:block; background:url(../images/titleself_m_bg03.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative; color:#333333;}

.titleself_logo {width:3.4rem; height:1.3rem; position:absolute; left:50%; top:0rem; margin-left:-3.7rem;}
.titleself_btn {position:absolute; left:50%; top:3.1rem;}
.titleself_text {position:absolute; left:50%; top:9.25rem; margin-left:-1rem;}
.titleself_pic {width:7.2rem; display:block; position:absolute; left:50%; top:5.6rem; margin-left:-3.6rem;}
.titleself_pic li {width:3.4rem; height:1.14rem; display:block; background:#002b71; border-radius:0.15rem; overflow:hidden; float:left; margin:0.06rem 0.1rem; position:relative; overflow:hidden;}

.titleself_footer {width:100%; display:block; position:absolute; left:0; top:0rem; margin:0;}


/* 底部導航 */
.point_right { position:absolute; position:fixed; left:0; right:auto; top:auto; bottom:0; z-index:9; margin-top:0px; width:100%;}
.point_right a {width:25%; height:0.8rem; margin:0; text-indent:-999rem; float:left; overflow:hidden; background:url(../images/titleself_m_menubg.png) no-repeat right -0.8rem; background-size:auto 200%; position:relative;}

.point_right a:after {content: ''; width:100%; height:0.8rem; text-indent:-999rem; display:block; overflow:hidden; background:url(../images/titleself_m_menubg.png) no-repeat left -0rem; background-size:auto 200%; position:absolute; left:0; top:0; z-index:1;}
.point_right a:before {content: ''; width:1.6rem; height:100%; text-indent:-999rem; display:block; overflow:hidden; position:absolute; left:50%; top:0; margin-left:-0.8rem; z-index:2;}
.point_right a.m1:before {background:url(../images/titleself_m_menu1.png) no-repeat; background-size:100%;}
.point_right a.m2:before {background:url(../images/titleself_m_menu2.png) no-repeat; background-size:100%;}
.point_right a.m3:before {background:url(../images/titleself_m_menu3.png) no-repeat; background-size:100%;}
.point_right a.m4:before {background:url(../images/titleself_m_menu4.png) no-repeat; background-size:100%;}
.point_right a.m5:before {background:url(../images/titleself_m_menu5.png) no-repeat; background-size:100%;}
.point_right a.m6:before {background:url(../images/titleself_m_menu6.png) no-repeat; background-size:100%;}
.point_right a:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}
}