@charset "UTF-8";

/* ---------------------------------------- reset ---------------------------------------- */

*, *:before, *:after { box-sizing: border-box; }

html, p, pre,
abbr, figure, figcaption, blockquote, address,
ol, ul, li, dl, dt, dd { margin:0; padding:0;}
table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0;}
main, section, article, aside, header, footer, nav, dialog, figure, menu { display: block; }
h1, h2, h3, h4, h5, h6 { margin:0; font-weight: normal; font-size: 100%; }
fieldset, form, label, legend { margin:0; padding:0; border: 0;}

ol, ul, li { list-style: none;}
table { border-collapse: collapse;}

a { color: inherit; text-decoration: none; cursor: pointer;}

code, kbd, samp { font-family: inherit;}
address, dfn { font-style:normal;}

button, input, select, textarea { padding: 0; border: 0; outline: 0; background-image: none; -webkit-font-smoothing: inherit; font-family:inherit; font-size:inherit;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{ -webkit-appearance: none;}
input[type="number"]{ -moz-appearance: textfield;}
:active, :focus { outline: 0;}

body { margin: 0 auto; padding: 0; font: 14px/1.4 Arial, "Microsoft YaHei"; color: #333; position: relative; min-width: 980px; }

html.gray-html {
	-webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
    _filter:none;
}

/* ---------------------------------------- spacing ---------------------------------------- */

.w-25 { width: 25%;}
.w-50 { width: 50%;}
.w-100 { width: 100%;}
.w-auto { width: auto;}

.mb-05 { margin-bottom: 5px;}
.mb-10 { margin-bottom: 10px;}
.mb-15 { margin-bottom: 15px;}
.mb-20 { margin-bottom: 20px;}
.mb-auto { margin-bottom: auto;}

.mt-05 { margin-top: 5px;}
.mt-10 { margin-top: 10px;}
.mt-15 { margin-top: 15px;}
.mt-20 { margin-top: 20px;}
.mt-auto { margin-top: auto;}

.ml-05 { margin-left: 5px;}
.ml-10 { margin-left: 10px;}
.ml-15 { margin-left: 15px;}
.ml-20 { margin-left: 20px;}
.ml-auto { margin-left: auto;}

.mr-05 { margin-right: 5px;}
.mr-10 { margin-right: 10px;}
.mr-15 { margin-right: 15px;}
.mr-20 { margin-right: 20px;}
.mr-auto { margin-right: auto;}

.mx-05 { margin-left: 5px; margin-right: 5px;}
.mx-10 { margin-left: 10px; margin-right: 10px;}
.mx-15 { margin-left: 15px; margin-right: 15px;}
.mx-20 { margin-left: 20px; margin-right: 20px;}
.mx-auto { margin-left: auto; margin-right: auto;}

.p-05 { padding: 5px;}
.p-10 { padding: 10px;}
.p-15 { padding: 15px;}
.p-20 { padding: 20px;}

.pl-05 { padding-left: 5px;}
.pl-10 { padding-left: 10px;}
.pl-15 { padding-left: 15px;}
.pl-20 { padding-left: 20px;}

.pr-05 { padding-right: 5px;}
.pr-10 { padding-right: 10px;}
.pr-15 { padding-right: 15px;}
.pr-20 { padding-right: 20px;}

.pt-05 { padding-top: 5px;}
.pt-10 { padding-top: 10px;}
.pt-15 { padding-top: 15px;}
.pt-20 { padding-top: 20px;}

.pb-05 { padding-bottom: 5px;}
.pb-10 { padding-bottom: 10px;}
.pb-15 { padding-bottom: 15px;}
.pb-20 { padding-bottom: 20px;}

.px-05 { margin-left: 5px; margin-right: 5px;}
.px-10 { margin-left: 10px; margin-right: 10px;}
.px-15 { margin-left: 15px; margin-right: 15px;}
.px-20 { margin-left: 20px; margin-right: 20px;}

.of-auto { overflow: auto;}
.of-hide { overflow: hidden;}
.of-y-auto { overflow-y: auto;}

/* ---------------------------------------- display ---------------------------------------- */

.d-block { display: block;}
.d-inline-block { display: inline-block}
.d-inline-middle { display: inline-block; vertical-align: middle;}
.hide { display: none;}
.hide-cat { display: none !important;}
.invisible { visibility: hidden}
.clearfix::after { display: block; clear: both; content: ""; overflow: hidden;}
.clearfix-b::before { display: block; clear: both; content: ""; overflow: hidden;}

/* ---------------------------------------- position ---------------------------------------- */

.float-left { float: left;}
.float-right { float: right;}

.pos-rel { position: relative;}
.abs-middle { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}

/* ---------------------------------------- text ---------------------------------------- */

.tal { text-align: left;}
.tac { text-align: center;}
.tar { text-align: right;}

.text-break-all { word-break: break-all;}
.text-break-word { word-break: break-word;}
.text-nowrap { white-space: nowrap;}

.text-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.text-two-line { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;}

.fs12 { font-size: 12px;}
.fs16 { font-size: 16px;}
.fs18 { font-size: 18px;}
.fs20 { font-size: 20px;}

.fw-bold { font-weight: 700;}

/* ---------------------------------------- grid ---------------------------------------- */
.flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.row-inline { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;}
.row-column {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}

.col { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -ms-flex: 1; max-width: 100%; }
.col-res { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -ms-flex: 1;}
.col-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none;}
.col-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 10%; flex: 0 0 10%; -ms-flex: 0 0 10%; max-width: 10%; }
.col-20 { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; flex: 0 0 20%; -ms-flex: 0 0 20%; max-width: 20%; }
.col-25 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; flex: 0 0 25%; -ms-flex: 0 0 25%; max-width: 25%; }
.col-33 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; max-width: 33.33%; }
.col-50 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; flex: 0 0 50%; -ms-flex: 0 0 50%; max-width: 50%; }
.col-75 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; flex: 0 0 75%; -ms-flex: 0 0 75%; max-width: 75%; }

.flex-wrap { flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap;}
.flex-middle {  -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align:center; -webkit-align-items: center; align-items: center;}

.justify-content-start { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start;}
.justify-content-end { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end;}
.justify-content-center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}

.justify-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;}

.align-items-start { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start;}
.align-items-end { -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end;}
.align-items-center { -webkit-box-align: center; -ms-flex-align:center; -webkit-align-items: center; align-items: center;}

/* ---------------------------------------- color ---------------------------------------- */

.text-black { color: #333;}
.text-white { color: #fff;}
.text-grey { color: #999;}
.text-red { color: #E62233;}

.bg-white { background-color:#fff;}

/* ---------------------------------------- form ---------------------------------------- */

.button { cursor: pointer;}
.button:hover { -webkit-filter: contrast(1.05); -ms-filter: contrast(1.05); -moz-filter: contrast(1.05); filter: contrast(1.05); }
.button:active { -webkit-filter: contrast(1.1); -ms-filter: contrast(1.1); -moz-filter: contrast(1.1); filter: contrast(1.1); }

.button-hover-drak:hover { -webkit-filter: brightness(0.97); -ms-filter: brightness(0.97); -moz-filter: brightness(0.97); filter: brightness(0.97); }
.button-hover-drak:active { -webkit-filter: brightness(0.94); -ms-filter: brightness(0.94); -moz-filter: brightness(0.94); filter: brightness(0.94); }

.button-hover-shadow:hover { 
    -webkit-filter:contrast(1.04) drop-shadow(0px 0px 1px rgba(0, 0, 0, .3));
    -moz-filter:contrast(1.04) drop-shadow(0px 0px 1px rgba(0, 0, 0, .3));
    -ms-filter:contrast(1.04) drop-shadow(0px 0px 1px rgba(0, 0, 0, .3));
    filter:contrast(1.04) drop-shadow(0px 0px 1px rgba(0, 0, 0, .3));
}
.button-hover-shadow:active { 
    -webkit-filter:contrast(1.08) drop-shadow(0px 0px 2px rgba(0, 0, 0, .4));
    -moz-filter:contrast(1.08) drop-shadow(0px 0px 2px rgba(0, 0, 0, .4));
    -ms-filter:contrast(1.08) drop-shadow(0px 0px 2px rgba(0, 0, 0, .4));
    filter:contrast(1.08) drop-shadow(0px 0px 2px rgba(0, 0, 0, .4));
}

/* ---------------------------------------- ohters ---------------------------------------- */

.cursor-pointer { cursor: pointer;}

.pointer-event-none { pointer-events: none; user-select: none;}