/**
	2020-02-27 UI规范 v1  
	李谦
	包含 reset , iconfont , 常规布局 ， 按钮 , 页头页底。通用弹框
*/

/* reset */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: 0; } 
html,body { width: 100%; height: 100%; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,button { margin:0; padding:0; }
body { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px; color: #333; line-height: 20px;
} 
input, textarea, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
input, textarea, select, button {
    border: none; background: none; resize: none; border-radius: 0; 
    -webkit-appearance: none; -moz-appearance: none; appearance: none; 
}
em, i { font-style:normal; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; vertical-align: middle; }
ol, ul, li { list-style: none; }
a, a:active { color: #333; text-decoration: none; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; line-height: 0; }
 
/* font */
@font-face { 
	font-family:"DIN-Bold"; 
	src:url('../fonts/din-bold.eot') format("embedded-opentype"),
		url('../fonts/din-bold.woff') format("woff"),
		url('../fonts/din-bold.ttf') format("truetype"),
		url('../fonts/din-bold.svg') format("svg");
	font-weight:normal;
	font-style:normal;
}
@font-face { 
	font-family:"DIN-Medium"; 
	src:url('../fonts/din-medium.eot') format("embedded-opentype"),
		url('../fonts/din-medium.woff') format("woff"),
		url('../fonts/din-medium.ttf') format("truetype"),
		url('../fonts/din-medium.svg') format("svg");
	font-weight:normal;
	font-style:normal;
}
.din-b { font-family:"DIN-Bold"; }
.din-m { font-family:"DIN-Medium"; }
.iconfont, .vam { display: inline-block; vertical-align: middle; }

/* font-size */
.f12 { font-size: 12px !important; }
.f14 { font-size: 14px !important; }
.f16 { font-size: 16px !important; }

/* color */
.s-c0 { color: #000 !important; }
.s-c3 { color: #333 !important; }
.s-c6 { color: #666 !important; }
.s-c9 { color: #999 !important; }
.s-cb { color: #bbb !important; }
.s-blue { color: #0057ff !important; }
.s-red { color: #ec3b3b !important; }
.s-green { color: #11bb65 !important; }

/* */
.bg-00 { background-color: #000; }
.bg-f5 { background-color: #f5f5f5; }
.bg-f8 { background-color: #f8f8f8; }
.bg-ff { background-color: #fff; }
.bg-black { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0, .5); }
.hr-line { height: 1px; background-color: #e8e8e8; transform: scaleY(.5); }
.fl { float: left; }
.fr { float: right; }
.tc { text-align: center; }
.tr { text-align: right; }
.fb { font-weight: 700; }
.fn { font-weight: 500; }
.un { text-decoration: underline; }
.img-block img { display: block; width: 100%; height: 100%; }
.none { display: none !important; }
.hidden { visibility: hidden; }

/* margin , padding */
.hr-h10 { height: 10px; }
.plr16 { padding-left: 16px; padding-right: 16px; }
.mt10 { margin-top: 10px !important; }
.mb5  { margin-bottom: 5px; }
.ml5  { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }


/* btn */
.btn { 
	display: inline-block; vertical-align: middle; 
	height: 44px; padding: 0 15px; border: 1px solid #d9d9d9; border-radius: 22px; 
	font-size: 16px; line-height: 42px; text-align: center;
}
.btn .iconfont { display: inline-block; vertical-align: middle; }
.btn-white { background-color: #fff; border-color: #fff; }
.btn-red { background-color: #ec3b3b; border-color: #ec3b3b; color: #fff; }
.btn-blue { background-color: #0057ff; border-color: #0057ff; color: #fff; }
.btn-red-line { border-color: #ec3b3b; color: #ec3b3b; }
.btn-blue-line { border-color: #0057ff; color: #0057ff; }
.btn.is-disabled { background-color: #e8e8e8; border-color: #e8e8e8; color: #bbb; }
.btn.is-block { display: block; width: 100%; }

/* form */
input::placeholder, textarea::placeholder { color: #bbb; }
	/* ico-radio */
.ico-radio { float: left; height: 20px; line-height: 20px; }
.ico-radio .iconfont { font-size: 14px; color: #999; margin: -2px 5px 0 0; }
.ico-radio .iconfont:before { content: "\e6a2"; }
.ico-radio.is-this .iconfont:before { content: "\e69f"; }
.ico-radio.is-disabled { color: #ccc; }

/* roll-y */
.roll-y { overflow-y: auto; -webkit-overflow-scrolling : touch; }
.roll-y::-webkit-scrollbar { width: 5px; background: #ddd; } 
.roll-y::-webkit-scrollbar-thumb { border-radius: 0; background: #999; transition: all .2s; border-radius: 3px; } 
.roll-y::-webkit-scrollbar-thumb:hover { background: #333; }

/* header-bar */
.icon-menu { display: inline-block; vertical-align: middle; margin-top: -2px; width: 20px; height: 2px; background-color: #fff; position: relative; }
.icon-menu:before, .icon-menu:after {
	position: absolute; left: 0; width: 20px; height: 2px; background-color: #fff; content: '';
}
.icon-menu:before { top: -6px; }
.icon-menu:after  { bottom: -6px; }
.header-bar { position: relative; z-index: 600; height: 44px; background-color: #0057ff; color: #fff; }
.menu-all-show { background-color: #000; }
.header-fixed { position: fixed; left: 0; top: 0; right: 0; background:transparent; }
.header-bar .hd-ovh { height: 44px; overflow: hidden; position: relative; }
.header-bar .hd-link { position: absolute; top: 0; }
.header-bar .hd-link .item { float: left; height: 44px; position: relative; }
.header-bar .hd-link .item:active { background-color: #004ada; }
.header-bar .hd-link .tap { float: left; height: 44px; padding: 0 10px; font-size: 16px; color: #fff; line-height: 44px; position: relative; }
.header-bar .hd-link .iconfont { font-size: 20px; margin-top: -2px; }
.header-bar .hd-link .icon-arrow-left-o { font-size: 16px; }
.header-bar .hd-link .icon-close-o { font-size: 18px; }
.header-bar .hd-link .icon-m-logo { font-size: 60px; }
.header-bar .hd-link .tap.news:after { 
	position: absolute; top: 50%; left: 50%; content: ''; margin: -15px 0 0 5px;
	width: 8px; height: 8px; background-color: #ef5858; border-radius: 50%; 
}
.header-bar .hd-l { left: 6px; }
.header-bar .hd-r { right: 6px; }
.header-bar .hd-title { padding: 0 95px; font-size: 16px; line-height: 44px; }
.header-bar .hd-title .ico-online { 
    display: inline-block; vertical-align: middle; margin: -2px 8px 0 0;
	width: 10px; height: 10px; background-color: #0057ff; border-radius: 50%; 
}
	/**/
.hd-area { 
	position: absolute; top: 12px; left: 16px; 
	height: 20px; padding: 0 23px 0 12px; background-color: #fff; border-radius: 10px; 
	font-size: 14px; color: #333; line-height: 20px;
}
.hd-area::after { 
	position: absolute; top: 50%; right: 8px; content: ''; margin-top: -2px;
	border: 5px solid transparent; border-top-color: #666;
}
	/**/
.header-white { background-color: #fff; box-shadow: 0 0 1px 0 rgba(0,0,0, .3); }
.header-white .hd-title { color: #333; }
.header-white .hd-link .iconfont { color: #666; line-height: 44px; }
.header-white .hd-link .item:active { background-color: #f8f8f8; }
	/* hd-menu-all */
.hd-menu-all { position: absolute; left: 0; right: 0; top: 44px; z-index: 800; background-color: #000; visibility: hidden; transition: all .2s linear; opacity: 0; }
.hd-mu-list { padding: 10px;  }
.hd-mu-list li { float: left; width: 25%; text-align: center; transition: all .2s linear; transform: scale(.8) translateY(-10%); }
.hd-mu-list li a { display: block; padding: 10px 0; font-size: 13px; color: #666; }
.hd-mu-list li p { display: block; margin: 0 auto 5px; width: 44px; height: 44px; border: 2px solid #bbb; border-radius: 50%; color: #bbb; line-height: 40px; }
.hd-mu-list li .icon-hualv { display: inline-block; vertical-align: middle; font-size: 24px; }
.hd-mu-list li.s-be p { background-color: #29b2fa; border-color: #29b2fa; color: #fff; }
.hd-mu-list li.s-gn p { background-color: #60c86f; border-color: #60c86f; color: #fff; }
.hd-mu-list li.s-vt p { background-color: #9b66d2; border-color: #9b66d2; color: #fff; }
.hd-mu-list li.s-red p{ background-color: #fc6151; border-color: #fc6151; color: #fff; }
	/**/
#hd-link,.header-bar .hd-show { transition: top .2s linear; }
#hd-close { transform: translateX(100%); transition: all .2s linear; }
.header-bar.menu-all-show #hd-link,.header-bar.menu-all-show .hd-show { top: -100%; }
.header-bar.menu-all-show #hd-close { transform: translateX(0); }
.hd-menu-all.menu-all-show { visibility: visible; opacity: 1; }
.hd-menu-all.menu-all-show .hd-mu-list li { transform: scale(1) translateY(0); }
    /**/
.hd-menu { 
	position: absolute; top: 60px; right: 10px; opacity: 0; visibility: hidden; transition: all .2s linear;
	background-color: #4c4c4c; border-radius: 2px; box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1); 
}
.hd-menu::after { 
	position: absolute; top: -10px; right: 10px; content: '';
	border: 5px solid transparent; border-bottom-color: #4c4c4c;
}
.hd-menu a { 
	display: block; height: 54px; overflow: hidden; padding: 0 15px 0 50px; position: relative;
	font-size: 16px; color: #fff; line-height: 54px; white-space: nowrap;
}
.hd-menu a:after { 
	position: absolute; left: 14px; right: 14px; bottom: 0; content: '';
	height: 1px; background-color: #5e5e5e; transform: scaleY(.5);
}
.hd-menu a:last-child:after { height: 0; } 
.hd-menu a .iconfont { position: absolute; left: 16px; top: 0; font-size: 20px; color: #fff; line-height: 54px; margin-top: 0; }
.hd-menu-show { top: 50px; opacity: 1;  visibility: visible; }

/* five-star */
.five-star { height: 24px; overflow: hidden; }
.five-star .star-box { float: left; white-space: nowrap; }
.five-star .star-box .iconfont { float: left; color: #e8e8e8; line-height: 24px; margin: 0 5px 0; }
.five-star .star-box .iconfont.is-this { color: #f90; }
.five-star .txt { color: #bbb; line-height: 24px; }

/* keyframes */
@-webkit-keyframes opacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes magnify {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
@-webkit-keyframes shrink {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@-webkit-keyframes down {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

.fadeIn { animation: opacity .2s forwards; transition: opacity .5s ease-in; }
.magnify{ animation: magnify .2s forwards; transition: transform .5s ease-in; }
.shrink { animation: shrink .2s forwards; transition: transform .5s ease-in; }
.down { animation: down .2s forwards; transition: transform .5s ease-in; }

/* bg-black */
.bg-black { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0, .5); }

/* popup-bottom */
.popup-bottom { bottom: -100%; transition: all .2s linear; }
.popup-bottom-show { bottom: 0; }
.popup-bottom .pop-close { position: absolute; top: 12px; right: 13px; width: 16px; height: 16px; text-align: center; line-height: 16px; }
.popup-bottom .pop-close .iconfont { font-size: 13px; color: #ccc; }

/* popup-bar */
.popup-bar { 
    position: fixed; left: 50%; top: 50%; z-index: 1002; box-shadow: 6px 0 20px 0 rgba(0,0,0, .1); 
    transform: translateX(-50%) translateY(-50%); transform-origin: center;
}
.popup-bar .pop-close { 
    position: absolute; top: 15px; right: 10px; z-index: 10; cursor: pointer;
    width: 20px; height: 20px; line-height: 20px; text-align: center;
    font-size: 24px; color: #999; margin-top: -2px; transition: all .15s linear; 
}

/* popup-alert */
.popup-alert { width: 300px; background-color: #fff; border-radius: 16px; text-align: center; }
.popup-alert .pop-conts { padding: 20px 25px 15px; position: relative; }
.popup-alert .pop-title { font-size: 16px; line-height: 24px; font-weight: 700; }
.popup-alert .pop-txt { font-size: 14px; color: #666; line-height: 20px; padding: 10px 0; }
.popup-alert .btn-group, .popup-alert .pop-btn { height: 48px; display: flex; position: relative; }
.popup-alert .btn-group:after, .popup-alert .pop-btn:after { position: absolute; left: 0; top: 0; right: 0; content: ''; height: 1px; background-color: #e8e8e8; transform: scaleY(.5);}
.popup-alert .btn-group .pop-btn, .popup-alert .pop-btn .btn { flex: 1; font-size: 16px; line-height: 48px; text-align: center; position: relative; border-radius: 0; line-height: 48px; border: none; }
.popup-alert .btn-group .pop-btn:after, .popup-alert .pop-btn .btn:after { position: absolute; top: 0; right: 0; bottom: 0; content: ''; width: 1px; background-color: #e8e8e8; transform: scaleX(.5);}
.popup-alert .btn-group .pop-btn:last-child:after, .popup-alert .pop-btn .btn:last-child:after { width: 0; }
.popup-alert .btn-group .txt-blue, .popup-alert .pop-btn .txt-blue { color: #0057ff; }

/* popup-msg */
.popup-msg { padding: 10px 15px; border-radius: 4px; background-color: rgba(0,0,0, .5); color: #fff; }
.popup-msg .pop-txt { font-size: 14px; color: #fff; line-height: 20px; text-align: center; }

/* popup-doc */
.popup-doc { left: 0; right: 0; top: 0; bottom: 0; background-color: #fff; transform: translateX(0) translateY(0); }
.popup-doc .roll-y { position: absolute; left: 0; top: 60px; right: 10px; bottom: 90px; padding: 0 20px; }
.popup-doc .roll-y iframe { width: 100%; height: 100%; border: none; }
.popup-doc .btn { position: absolute; left: 20px; right: 20px; bottom: 20px; }

/* popup-verify-img */
.popup-verify-img { background-color: #fff; width: 260px; padding: 10px 15px; border-radius: 3px; }
.popup-verify-img input { float: left; width: 140px; height: 40px; padding: 0 10px; border: 1px solid #ddd; margin: 0; }
.popup-verify-img .img-block { float: right; width: 80px; height: 40px; }

/*2020/05/19*/
.popup-alert .btn-group, .popup-alert .pop-btn {height: 48px;display: flex;position: relative;justify-content: center}