@charset "UTF-8";

/* 阴影 */
.jf-shadow-sm {
    box-shadow: 0 2px 4px rgba(114, 130, 138, 0.2)!important;
}
.jf-shadow {
    box-shadow: 0 8px 16px rgba(114, 130, 138, 0.2)!important;
}
.jf-shadow-lg {
    box-shadow: 0 16px 48px rgba(114, 130, 138, 0.2)!important;
}
/* 定位 */
.jf-position-absolute{ position: absolute; }
.jf-position-fixed{ position: fixed; }
.jf-position-relative{ position: relative; }
.jf-left-0{ left: 0; }
.jf-top-0{ top: 0; }
.jf-bottom-0{ bottom: 0; }
.jf-right-0{ right: 0; }
/* 宽高 */
.jf-w-1200{ width: 1200px; }
.jf-w-100b{ width: 100%;}
.jf-w-50b{ width: 50%;}
.jf-h-50{ width: 50px; }
/* 字体 */
.jf-font-25{ font-size: 25px; }
.jf-font-22{ font-size: 22px; }
.jf-font-30{ font-size: 30px; }
.jf-font-40{ font-size: 40px; }
.jf-font-60{ font-size: 60px; }
.jf-font-weight{ font-weight: bold!important; }
.jf-font-weight-100{ font-weight: 100!important; }

.jf-line-h0{ line-height: 0!important; }
.jf-line-h{ line-height: 1!important; }
.jf-line-h-sm{ line-height: 1.2!important; }
.jf-line-h-md{ line-height: 1.5!important; }
.jf-line-h-lg{ line-height: 2!important; }
.jf-line-h-big{ line-height: 3!important; }

.jf-line-through{ text-decoration: line-through; }

.jf-text-center{ text-align: center; }
.jf-text-left{ text-align: left; }
.jf-text-right{ text-align: right; }

.jf-row { box-sizing: border-box!important; display: flex!important; flex-direction: row!important; flex-wrap: wrap;}
[class*='col-'],[class*='span-'],[class*='span24-'] { min-height: 1px;box-sizing: border-box!important;}
/* 栅栏一 */
.jf-col-1{ width: 62.5px; }
.jf-col-2{ width: 125px; }
.jf-col-3{ width: 187.5px; }
.jf-col-4{ width: 250px;}
.jf-col-5{ width: 312.5px; }
.jf-col-6{ width: 375px; }
.jf-col-7{ width: 437.5px; }
.jf-col-8{ width: 500px; }
.jf-col-9{ width: 562.5px; }
.jf-col-10{ width: 625px; }
.jf-col-11{ width: 687.5px; }
.jf-col-12{ width: 750px; }
/* 栅栏二 */
.jf-span-1{ width: 5%; }
.jf-span-2{ width: 10%; }
.jf-span-3{ width: 15%; }
.jf-span-4{ width: 20%;}
.jf-span-5{ width: 25%; }
.jf-span-6{ width: 30%; }
.jf-span-7{ width: 35%; }
.jf-span-8{ width: 40%; }
.jf-span-9{ width: 45%; }
.jf-span-10{ width: 50%; }
.jf-span-11{ width: 55%; }
.jf-span-12{ width: 60%; }
.jf-span-13{ width: 65%; }
.jf-span-14{ width: 70%; }
.jf-span-15{ width: 75%; }
.jf-span-16{ width: 80%; }
.jf-span-17{ width: 85%; }
.jf-span-18{ width: 90%; }
.jf-span-19{ width: 95%; }
.jf-span-20{ width: 100%; }
/* 栅栏三 */
.jf-span24-1{ width: 4.17%; }
.jf-span24-2{ width: 8.33%; }
.jf-span24-3{ width: 12.5%; }
.jf-span24-4{ width: 16.67%;}
.jf-span24-5{ width: 20.83%; }
.jf-span24-6{ width: 25%; }
.jf-span24-7{ width: 29.17%; }
.jf-span24-8{ width: 33.33%; }
.jf-span24-9{ width: 37.5%; }
.jf-span24-10{ width: 41.67%; }
.jf-span24-11{ width: 45.83%; }
.jf-span24-12{ width: 50%; }
.jf-span24-13{ width: 54.17%; }
.jf-span24-14{ width: 58.33%; }
.jf-span24-15{ width: 62.5%; }
.jf-span24-16{ width: 66.67%; }
.jf-span24-17{ width: 70.83%; }
.jf-span24-18{ width: 75%; }
.jf-span24-19{ width: 79.17%; }
.jf-span24-20{ width: 83.33%; }
.jf-span24-21{ width: 87.5%; }
.jf-span24-22{ width: 91.67%; }
.jf-span24-23{ width: 95.83%; }
.jf-span24-24{ width: 100%; }


/* flex布局 */
.jf-d-flex{ display: flex;flex-direction: row!important; }
.jf-d-block{ display: block; }
.jf-d-inline-block{ display: inline-block; }

.jf-flex-1{ flex: 1; }
.jf-flex-column{ flex-direction: column!important; }
.jf-flex-row{ flex-direction: row; }
.jf-flex-wrap{ flex-wrap: wrap; }
.jf-flex-nowrap{ flex-wrap: nowrap; }
.jf-flex-shrink{flex-shrink: 0;}
.jf-j-start{ justify-content: flex-start; }
.jf-j-center{ justify-content: center!important; }
.jf-j-evenly{ justify-content: space-evenly !important;}
.jf-j-end{ justify-content: flex-end; }
.jf-j-sb{ justify-content: space-between; }
.jf-a-center{ align-items:center!important; }
.jf-a-start{ align-items: flex-start; }
.jf-a-end{ align-items:flex-end; }
.jf-a-stretch{ align-items: stretch; }
.jf-a-self-start{ align-self: flex-start; }
.jf-a-self-auto{ align-self: auto; }
.jf-a-self-end{ align-self: flex-end; }
.jf-a-self-stretch{ align-self:stretch; }
.jf-a-self-baseline{ align-self:baseline; }
/* Border */
.jf-border{  border-width: 1px; border-style: solid; border-color: var(--borderColor);}
.jf-border-top{ border-top-width: 1px; border-top-style: solid; border-top-color: var(--borderColor); }
.jf-border-right{ border-right-width: 1px; border-right-style: solid; border-right-color: var(--borderColor);}
.jf-border-bottom{ border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color:var(--borderColor);}
.jf-border-left{ border-left-width: 1px;border-left-style: solid;border-left-color:var(--borderColor);}

.jf-border-0{ border-width: 0; }
.jf-border-top-0{ border-top-width: 0; }
.jf-border-right-0{ border-right-width: 0; }
.jf-border-bottom-0{ border-bottom-width: 0; }
.jf-border-left-0{ border-left-width: 0; }



.jf-rounded{ border-radius: 5px; }
.jf-rounded-circle{ border-radius:100%; }
.jf-rounded-0{ border-radius:0; }

/* color */
.jf-text-white{
    color:#FFF !important;
}


/* Spacing */
.jf-m-0 { margin-left: 0;margin-right: 0;margin-top: 0;margin-bottom: 0;}
.jf-m { margin-left: 5px;margin-right: 5px;margin-top: 5px;margin-bottom: 5px;}
.jf-m-1 { margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;}
.jf-m-2 { margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px;}
.jf-m-3 { margin-left: 30px;margin-right: 30px;margin-top: 30px;margin-bottom: 30px;}
.jf-m-4 { margin-left: 40px;margin-right: 40px;margin-top: 40px;margin-bottom: 40px;}
.jf-m-5 { margin-left: 50px;margin-right: 50px;margin-top: 50px;margin-bottom: 50px;}

.jf-mx-0 { margin-left: 0;margin-right: 0;}
.jf-mx { margin-left: 5px;margin-right: 5px;}
.jf-mx-1 { margin-left: 10px;margin-right: 10px;}
.jf-mx-2 { margin-left: 20px;margin-right: 20px;}
.jf-mx-3 { margin-left: 30px;margin-right: 30px;}
.jf-mx-4 { margin-left: 40px;margin-right: 40px;}
.jf-mx-5 { margin-left: 50px;margin-right: 50px;}

.jf-my-0 { margin-top: 0;margin-bottom: 0;}
.jf-my { margin-top: 5px;margin-bottom: 5px;}
.jf-my-1 { margin-top: 10px;margin-bottom: 10px;}
.jf-my-2 { margin-top: 20px;margin-bottom: 20px;}
.jf-my-3 { margin-top: 30px;margin-bottom: 30px;}
.jf-my-4 { margin-top: 40px;margin-bottom: 40px;}
.jf-my-5 { margin-top: 50px;margin-bottom: 50px;}

.jf-mt-0 { margin-top: 0;}
.jf-mt { margin-top: 5px;}
.jf-mt-auto { margin-top: auto;}
.jf-mt-1 { margin-top: 10px;}
.jf-mt-2 { margin-top: 20px;}
.jf-mt-3 { margin-top: 30px;}
.jf-mt-4 { margin-top: 40px;}
.jf-mt-5 { margin-top: 50px;}

.jf-mb-0 { margin-bottom: 0;}
.jf-mb { margin-bottom: 5px;}
.jf-mb-auto { margin-bottom: auto;}
.jf-mb-1 { margin-bottom: 10px;}
.jf-mb-2 { margin-bottom: 20px;}
.jf-mb-3 { margin-bottom: 30px;}
.jf-mb-4 { margin-bottom: 40px;}
.jf-mb-5 { margin-bottom: 50px;}

.jf-ml-0 { margin-left: 0;}
.jf-ml { margin-left: 5px;}
.jf-ml-auto { margin-left: auto;}
.jf-ml-1 { margin-left: 10px;}
.jf-ml-2 { margin-left: 20px;}
.jf-ml-3 { margin-left: 30px;}
.jf-ml-4 { margin-left: 40px;}
.jf-ml-5 { margin-left: 50px;}

.jf-mr-0 { margin-right: 0;}
.jf-mr { margin-right: 5px;}
.jf-mr-1 { margin-right: 10px;}
.jf-mr-2 { margin-right: 20px;}
.jf-mr-3 { margin-right: 30px;}
.jf-mr-4 { margin-right: 40px;}
.jf-mr-5 { margin-right: 50px;}

.jf-p-0 {padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}
.jf-p {padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom:5px;}
.jf-p-1 {padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;}
.jf-p-2 {padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}
.jf-p-3 {padding-left: 30px;padding-right: 30px;padding-top: 30px;padding-bottom: 30px;}
.jf-p-4 {padding-left: 40px;padding-right: 40px;padding-top: 40px;padding-bottom: 40px;}
.jf-p-5 {padding-left: 50px;padding-right: 50px;padding-top: 50px;padding-bottom: 50px;}

.jf-px-0 { padding-left: 0;padding-right: 0;}
.jf-px { padding-left: 5px;padding-right: 5px;}
.jf-px-1 { padding-left: 10px;padding-right: 10px;}
.jf-px-2 { padding-left: 20px;padding-right: 20px;}
.jf-px-3 { padding-left: 30px;padding-right: 30px;}
.jf-px-4 { padding-left: 40px;padding-right: 40px;}
.jf-px-5 { padding-left: 50px;padding-right: 50px;}

.jf-py-0 { padding-top: 0;padding-bottom: 0;}
.jf-py { padding-top: 5px;padding-bottom: 5px;}
.jf-py-1 { padding-top: 10px;padding-bottom: 10px;}
.jf-py-2 { padding-top: 20px;padding-bottom: 20px;}
.jf-py-3 { padding-top: 30px;padding-bottom: 30px;}
.jf-py-4 { padding-top: 40px;padding-bottom: 40px;}
.jf-py-5 { padding-top: 50px;padding-bottom: 50px;}

.jf- { padding-top: 0;}
.jf-pt { padding-top: 5px;}
.jf-pt-1 { padding-top: 10px;}
.jf-pt-2 { padding-top: 20px;}
.jf-pt-3 { padding-top: 30px;}
.jf-pt-4 { padding-top: 40px;}
.jf-pt-5 { padding-top: 50px;}

.jf-pb-0 { padding-bottom: 0;}
.jf-pb { padding-bottom: 5px;}
.jf-pb-1 { padding-bottom: 10px;}
.jf-pb-2 { padding-bottom: 20px;}
.jf-pb-3 { padding-bottom: 30px;}
.jf-pb-4 { padding-bottom: 40px;}
.jf-pb-5 { padding-bottom: 50px;}

.jf-pl-0 { padding-left: 0;}
.jf-pl { padding-left: 5px;}
.jf-pl-1 { padding-left: 10px;}
.jf-pl-2 { padding-left: 20px;}
.jf-pl-3 { padding-left: 30px;}
.jf-pl-4 { padding-left: 40px;}
.jf-pl-5 { padding-left: 50px;}

.jf-pr-0 { padding-right: 0;}
.jf-pr { padding-right: 5px;}
.jf-pr-1 { padding-right: 10px;}
.jf-pr-2 { padding-right: 20px;}
.jf-pr-3 { padding-right: 30px;}
.jf-pr-4 { padding-right: 40px;}
.jf-pr-5 { padding-right: 50px;}


/*浮动定位*/
/*定位*/
.jf-fl{float:left;}
.jf-fr{float:right;}

.jf-clear {
    clear: both;
    height: 0;
    overflow: hidden;
}

.red-point{
    width: 10px;
    height: 10px;
    background-color: #FF4400;
    display: inline-block;
    margin-left: 10px;
    border-radius: 50%
}