/* BASIC css start */
#footer { background: #000; }
.f_Wrap { width: 1260px; margin: 0 auto; position: relative; }
#footer .f_Wrap > p { padding-top: 20px;padding-left: 10px; font-size: 11px; color: #666; }
/* ftLink */
#ftLink {  overflow: hidden; border-top: 1px solid #333; border-bottom: 1px solid rgba(255,255,255,0.2);}
#ftLink .f_Wrap {  padding: 15px 0;  }
#ftLink > div > ul { display: table; width: 100%; }
#ftLink > div > ul > li { display: inline-block;}
#ftLink > div > ul > li a { color: rgba(255,255,255,0.5); text-transform: uppercase;  }
#ftLink > div > ul > li a:after { content: "|"; padding: 0 20px; }
#ftLink > div > ul > li:last-child a:after { content: ""; padding: 0; }
#ftLink > div > ul > li a:hover { color: rgba(255,255,255,0.8);  }
#ftLink .btn_home { position: absolute; right:0; top: 0;  }
#ftLink .btn_home a { display: table-cell; border-left: 1px solid rgba(255,255,255,0.2);  padding: 15px 15px; font-size: 1.4em; }
#ftLink .btn_home a:last-child { border-right: 1px solid rgba(255,255,255,0.2); }
/* footer */
#ftWrap { position: relative; margin-top: 30px; }
/* call-bank-info */
.call-bank-info { overflow: hidden; padding: 50px 0; color: #666; display: table; width: 100%;  }
.call-bank-info > div { display: table-cell; /* width: 25%; */ border-right: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; padding: 0 35px;line-height: 1.5em; vertical-align: top; }
.call-bank-info > div:last-child { border-right: none; }
.call-bank-info > div h2 { font-size: 14px; text-transform: uppercase;  font-weight: bold; margin-bottom: 15px; color: rgba(255,255,255,0.7); }
.call-bank-info > div p { line-height: 1.7em; font-size: 11px; color: rgba(255,255,255,0.7);  }
.call-bank-info > div:first-child h2 + p { font-size: 1.2em;  color: rgba(255,255,255,0.7);  margin-bottom: 3px; }
.call-bank-info > a { position: absolute; top: 150px; right: 0; }
.call-bank-info .f_quick ul {  width: 100%; overflow: hidden; }
.call-bank-info .f_quick li { width: 100%; margin-bottom: 5px; }
.call-bank-info .f_quick li > a { border: 1px solid #a0a0a0; display: inline-block; padding: 5px 10px; }
.call-bank-info .f_quick li > a:hover { border-color: #fff; }
/* .f_img */
.f_img {  width: 100%; position:relative; text-align:center; background: url(/design/oilplus1/s025/images/back_f_img.jpg) no-repeat center bottom; background-size: cover;  background-attachment:fixed;}
.f_img > div { min-height:327px; position: relative;  }
.f_img > div h2 { color: #fff; font-size: 4.0em; font-weight: bold; padding-top: 6%; padding-bottom: 20px; }
.f_img > div a { border: 1px solid #fff; color: #fff; padding: 10px 50px; display: inline-block; font-size: 1.8em;  }
.f_img > div a i { display: inline-block; padding-left: 30px; font-size: 1.1em; vertical-align: middle; }
.f_img > div a:hover { background-color: rgba(255, 255, 255, 1); color: #333; border: 1px solid #fff; 

    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;

}
@keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}



/* ################## right menu start ################## */

#r_fullMenu { /* background: rgba(255,255,255,0.7); */ width:209px; height:100%; position: fixed; top: 0; right:-210px; z-index: 111000; /* display: none; */  }

#r_cateWrap {  position: fixed;  top: 0; right: -210px;  width: 209px; height: 100%; /*  z-index: 9999;overflow: hidden; */  overflow:visible; border-left: 1px solid #ddd; background: #fff; box-shadow: -2px 0px 4px rgba(0,0,0,0.069);
/*
background: rgba(255, 255, 255, 1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#5fffffff, endColorstr=#5fffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5fffffff, endColorstr=#8fffffff)"; 
*/
}   
/*
:root  #r_cateWrap {  position: static \9;  }
*/
@media \0screen { 
#r_cateWrap { position: static;   top: 0; right:0px;  width: 209px; height: 100%; /*  z-index: 9999;overflow: hidden; */  overflow:visible; border-left: 1px solid #ddd; background: #fff;
/*
background: rgba(255, 255, 255, 1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8fffffff, endColorstr=#8fffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#8fffffff, endColorstr=#8fffffff)"; 
*/
} 
}    
#r_cateWrap .cateList a { color: #eeeeee; cursor:pointer; }
#r_cateWrap .cateList { width:90%; margin: 0 auto; border: 1px solid #ddd;}

.cate_close { position: absolute; top: 20px; left:310px;  display: none; }
#r_cateWrap .view { display: block; }
#csCenter {  width: 90%; margin: 0 auto; margin-bottom:30px;  padding: 15px 0; text-align: left; }
#csCenter > h2, 
#csCenter > div,
#csCenter > p { padding-left: 20px; }
#csCenter h2 { font-size: 1.2em; font-weight: 600; margin: 0; line-height: 1.9em; text-transform: uppercase; color: #333; margin-bottom: 10px; margin-top: 0px; text-align: center; box-sizing: border-box; width: 90%; border: 1px solid #ddd; padding: 0px 0; margin-left: 10px; background: #f6f6f6;}
#csCenter h2 span { width: 25px; height:2px; background: #000; display: block; margin:5px 0 10px;  }
#csCenter > p {  font-size:1.8em; color: #000; padding-bottom: 0px; padding-top: 0px;  font-weight: 600;}
#csCenter > div:nth-of-type(1) > p { font-size:12px; line-height: 0.8em; margin-top:10px;   color: #333;}
#csCenter > div:nth-of-type(1) > p b { font-weight: normal; }
#csCenter > div:nth-of-type(2) p { font-size: 12px; line-height:1.8em; font-size:12px; color: #333;}    
.r_btn_menu { position: relative; top:40%;  z-index: 12000; display: block;  width: 30px; height: 50px;  line-height: 50px; margin-left: -30px; font-size: 2.0em; text-align: center; }    
:root .r_btn_menu  {  top:300px \9;  }    

.r_btn_menu .openMenu { font-size: 1.1em; background: #000; color: #fff; width: 30px; height: 50px;  line-height: 50px; display: block; border: 1px soild #222; border-right: none; box-shadow: -2px 0px 4px rgba(0,0,0,0.18); }
.r_btn_menu > div {  margin-top:1px; }
.r_btn_menu > div a {  display: block; height: 25px; line-height: 25px; background: #777; color:#fff; margin-bottom:1px; }
.r_btn_menu > div a:hover { background: #555; }

.rightSns { padding-left: 30px;  margin-bottom: 30px; }
.rightSns a { display: block; padding-bottom: 8px; }
.rightSns a img { vertical-align: middle; }
.rightSns a span { display: inline-block;  padding-left: 10px; }

.r_menu { overflow: hidden; margin: 40px 0 20px;  }
.r_menu ul { display: table; width: 80%; margin:0 auto; border-bottom: 1px solid #ddd; }
.r_menu ul li { display: inline-block; box-sizing: border-box; width: 49.5%; border: 1px solid #ddd; text-align: center; padding: 10px 0; margin-bottom: -1px; margin-left: -1px;}
.r_menu ul li:hover { background: #f1f1f1; }
.r_menu ul li i { display: block; font-size: 1.6em; margin-bottom: 3px; }
.r_menu ul li:hover i {  color: #333; }

#todayViewWrap { position: relative; }

.rBanner { position: relative; width: 159px; margin: 0 auto; height: 124px; overflow: hidden; padding-top: 10px; }
.rBanner ul { overflow: hidden; }
.rBanner li { height: 104px; }
.rBanner li > a { display: block; }
/* .rBanner DIRECTION CONTROLS (NEXT / PREV) */
.rBanner .bx-controls {   }
.rBanner .bx-wrapper .bx-controls-direction {  width: 159px; right: 0; position: absolute; top: 200px; z-index: 9999; display: none; }
.rBanner .bx-wrapper .bx-controls-direction a { position: absolute; top: 0; right: 0; outline: 0;  text-indent: -9999px; z-index: 19999; height: 20px; opacity: 0.3; width: 20px; background: #000; z-index:29999; display: block; }
.rBanner .bx-wrapper .bx-controls-direction a.disabled {  display: none; }    
.rBanner .bx-wrapper .bx-controls-direction a { text-indent: -999em; }   
.rBanner .bx-wrapper .bx-prev {    }
.rBanner .bx-wrapper a.bx-next {  top: 20px; }
.rBanner .bx-wrapper .bx-controls-direction a i { text-indent: 0px !important;  color: #fff; font-size: 1.2em; width:100%; height:100%; position: absolute; top:5px; left:0; text-align: center;  display: block;  }
.rBanner .bx-wrapper .bx-controls-direction a:hover {  opacity: 0.5; }

.rBanner .bx-wrapper .bx-pager { width: 100%;   z-index: 9999;  bottom: -23px;  position: absolute;  display: table; text-align: center; }
.rBanner .bx-wrapper .bx-pager > div { display: inline-block; text-align: center; margin: 0 3px; }
.rBanner .bx-wrapper .bx-pager-item {  }
.rBanner .bx-wrapper .bx-pager-item a { text-indent: -999em;   width: 6px; height: 6px; border-radius: 50%; background: #ddd; display: block;  }
.rBanner .bx-wrapper .bx-pager-item a.active { background: #555;}

/* ################## right menu end  ################## */

.xi-bars,
.xi-close {  font-size: 20px; }


/* BASIC css end */