/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

body {
	font-family:"Microsoft YaHei", 微软雅黑, "Arial";
	min-height:530px;
}

a:hover {
    text-decoration: none;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Shared Layout
   ========================================================================== */
/** global */



/* ==========================================================================
   Index
   ========================================================================== */

/** global */
body{
    /*min-width: 1020px;
    min-height: 500px;*/
}

.page-content .container {
    width: 100%;
}
.page-content {
    padding-top: 0px !important;
}
.xheims-hide {
    display: none;
}


/** preheader */
.pre-header {
	color: #616b76;
    padding-top: 10px;
    line-height: 1.2;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    background: #fff;
    border-bottom: 0px;
}
.pre-header .fa {
    margin-right: 4px;
}

.pre-header i {
    font-size: 14px;
    font-weight: bold;
    color:  #d41822;
}
.pre-header li {
    padding-left: 11px;
    padding-right: 15px;
    border-right: solid 1px #d8d8d8;
    line-height:28px;
}
.pre-header li:last-child {
    border: none;
}
.pre-header span {
    font-size: 14px;
    font-weight: bold;
    color: MidnightBlue;
}



/** Main Nav */
.container-fluid {
	padding-left: 0;
	padding-right: 0;
}
.navbar {
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
}
.navbar-inverse {
    background: #fff url("../images/front_bg.png") no-repeat;
    background-color: #0e276b;
    background-size: 100% 100%;
    height: 52px;
}
.nav-wrapper {
	position: relative;
}
.container>.navbar-header {
	position:absolute;
	left: 90px;
}
.navbar-brand {
    position: absolute;
    left: 2.0em;
	padding: 0;
}

.navbar-nav {
    position: absolute;
    right: 0;
    font-size: 17px;
    font-weight: 500;  
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;   
}
.navbar-inverse .navbar-nav > li > a:hover, 
.navbar-inverse .navbar-nav > .open > a, 
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: #e61c26;
    background: #fff;
}

.navbar-inverse .navbar-toggle {
    border-color: #fff;
    position: absolute;
    right: 0em;
}

@media (max-width: 768px) {
    /* Style adjustments for viewports that meet the condition */
    .navbar-nav {
        position:absolute;
        left: 0.8em;
        top: 2.0em;
        z-index: 1000;
        font-size: 17px;
        font-weight: 500;  
        background-color: #333;
    }

}

@media (min-width: 767px) and (max-width: 991px) {
    /* Style adjustments for viewports that meet the condition */
    .nav-wrapper {
        position: none;
    }
    .container > .navbar-header {
        position: absolute;
        left: 1.5em;
    }
    .navbar-brand {
        position: absolute;
        left: -1.5em;
        padding: 0;
    }
    .navbar-nav {
        position: absolute;
        right: 0em;
        font-size: 15px;
        font-weight: 400;  
    }   
    .navbar-inverse .navbar-nav > li > a {
        padding-left: 10px;  
        padding-right: 10px;  
    }

}



/** slider */
.slide {
	max-height: 480px;
	overflow: hidden;
}

.carousel-control {
	background: none;
	color: #ccc;
}

.carousel-control:hover {
	color: #000;
}

.carousel-inner>.item {
	text-align: center;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img {
    display: block;
    /*max-width: none;*/
    height: auto;
}

.carousel-control.left, .carousel-control.right {
	background-image: none;
}


/** login-query */
.login-query {
    /* background-color: #0D2569; */
    background-image: url("../images/login-query.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* height: 168px; */
    padding-top: 30px;
    padding-bottom: 30px;
}
.login-query-bottom {
    background-color: #d41822;
    height: 8px;
    /* margin-bottom: 50px; */
}

/** login */
.login {
    padding-right: 50px;
}
.login span {
    font-size: 16px;
    /* font-weight: bold; */
    color: white;
}
.login label {
    font-size: 16px;
    font-weight: normal;
    color: white;
}
.login input {
    font-size: 16px;
    /* width: 257px; */
}
.login button {
    font-size: 16px ;
    padding: 3px 12px 3px 12px !important;
    color: white;
    background-color: #d41822;
    margin-left: 1.0em;
}
.login a {
    font-size: 13px !important;
    color: white;
}
.form-group a {
    display: inline-block;
    margin-right: 1.5em;
}
.login .right {
    text-align: right;
}
.login ul {
    list-style: none;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
}
.login ul li {
    margin-top: 5px;
}
.login ul li span {
    font-weight: 200;
}
.login ul li em {
    font-weight: 500;
    color: orange;
}
.login > a > button {
    margin-left: 40px;
}
.login .msg span {
    color: red;
    font-size: 14px;
    position: absolute;
    right: 50px;
    bottom: -10px;
}
@media (max-width: 768px) {
    /* Style adjustments for viewports that meet the condition */    
    .login {
        padding-left: 1.5em;
        margin-bottom: 30px;
    }

}
@media (min-width: 767px) and (max-width: 991px) {
    .login {
        margin-bottom: 30px;
    }
}

/** query */
.query {
    padding-left: 1.5em;
    text-align: right;
    color: #fff;
}
.query textarea {
    resize: none;
    height: 83px;
}
.query button {
    font-size: 16px !important;
    padding: 3px 12px 3px 12px !important; 
    color: white;
    background-color: #d41822;
}
.query .captcha {
    margin-top: 20px;
}
.form-group .captcha > lable {
    font-weight: 100;
    font-size: 16px;
}
.query > .captcha > input {
    max-width: 20%;
    margin-right: 10px;
}
.query .q-msg span {
    color: red;
    font-size: 14px;
    position: absolute;
    right: 50px;
    bottom: -10px;
}

@media (max-width: 768px) {
    /* Style adjustments for viewports that meet the condition */    
    .query {
        padding-top: 40px;
        border-top: #fff 1px dotted;
    }
    .query button {
        margin-right: 1.0em;
    }
    
}

@media (min-width: 767px) and (max-width: 991px) {
    .query {
        padding-right: 65px;
        padding-top: 40px;
        border-top: #fff 1px dotted;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .query textarea {
        resize: none;
        min-width: 240px !important;
        /* margin-left: 13px */
    }
}


/** news-services */

.news-services{
    padding-top: 73px;
    margin-bottom: 100px;
}

/** news */
.news-header {
    margin-bottom: 40px;
}
.news li {
    font-size: 17px !important;
    margin-bottom: 25px;
    list-style: none;
}
.news i {
    color: #d41822;
    font-size: 10px !important;
    margin-right: 18px;
}
.news a {
    color: rgb(18, 50, 107);
}

 div.news:after {
    content: '';
    top: 150px;
    right: 30px;
    width: 0;
    height: 100px;
    position: absolute;
    border: 1px solid lightgrey;
} 

@media (max-width: 992px) {
    div.news:after {
        border:none;
    }
}

/** services */
.services {
    font-size: 18px;
    /* position: absolute;
    right: 20px; */
}
.services ul {
    padding: 0;
    margin: 0;
    margin-top: 70px;
}
.services li {
    color: rgb(18, 50, 107);
    height: 100px;
    vertical-align: top;
    list-style: none;
}

.services > ul > li > a > img {
    width: auto;
}


/** footer */
.footer {
	background: #272626;
    color: #fff;
    padding: 15px 0;
    font-size: 11px;
}





/* ==========================================================================
   User Center
   ========================================================================== */
/** User Welcome */
.panel-body span {
    color: #ff9900;
}
.panel-body > dl > dt {
    float: left;
    margin-right: 1.5em;
}
.panel-body > dl > dd {
    line-height: 1.5em;
}
.panel-body > dl > .link {
    margin-top: 1.2em;
}
.panel-body > dl > .link > span {
    display: inline-block;
    color:#666;    
}
.panel-body > dl > .link > a {
    display: inline-block;
    margin-right: 10px;    
}
.panel-body > dl > dt > a > img {
    max-width: 60px;
    max-height: 60px;
    border:#fff solid 4px;
    border-radius: 100px;   
    box-shadow: 1px 1px 2px #ccc;
}
.row .center {
    text-align: center;
}

/** Add Order && HeXiang */
.linetype {
    margin-right:20px;
    margin-left:2px;
    font-size:1.1em;
    font-weight:500;
}
.r > a {
    color:#fff;
    margin-right:20px;
}
.r .btn-sm {
    font-size:1.0em;
    padding: 4px 8px;
}


/** Left SideMenu */
.side-menu .badge {
    background-color: #ff3300;
}



/** User Center Index */
.non-border {
    border: none;
}

.form-group > lable {
    font-weight: normal;
}

.welcome li {
    margin-top: 8px;
    list-style: none;
}

.welcome > form {
    text-indent: 20px;
}

.welcome > .form-inline .form-control {
    width: 70%;
}

.faq ul {
    padding: 0;
    margin: 0;
}

.faq li {
    margin-top: 5px;
    list-style: none;
    width: 20%;
    float: left;
}
.faq .row {
    margin: 0;
}



/** User Account */
.payment {
    
}
.payment > section {
    margin-bottom: 25px;
}

.payment > section > h4 > a {
    font-size: 0.8em;
    padding: 0 1em;
} 

.payment > section > form {
    margin-top: 20px;
    margin-bottom: 30px;
}

.payment > section > form > input {
    max-width: 50%
}

.payment > section > form > p {
    margin: 5px;
    text-indent: 2em;
}

.payment-method > a > img {
    max-width: 150px;
    box-shadow: 1px 1px 1px 1px #ccc;
    border-radius: 4px;
}

.radio img {
    max-width: 150px;
    box-shadow: 1px 1px 1px 1px #ccc;
    border-radius: 4px;
}

.payment-method button {
    margin: 1em 1em 0.5em 1em;
    text-align: center
}

.payment-method > h5 {
    font-size: 1.2em;
    padding: 0.8em;
}

.payment-method .warning {
    color: #ff0000;
    font-size: 1.1em;
    margin-top: 0.5em;
}
















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */





.none {
    display:none;
    font-family: 'Times New Roman', Times, serif;
}



@media print
       {
        .none {
            display:normal;
            color:#333333;
            position:fixed;
            top:0;
            left:0;
        }

}