.about-banner-container { 
	background: #ffdb78 url("../images/about-banner.png") center center no-repeat; 
	height: 200px;
}
.about-banner-title { 
    font-size: 1.5em; 
    color: #664b00; 
    margin-top: 70px; 
    text-shadow: 1px 1px 0 #fff1cc;
}
.about-banner-desc { 
    margin-top: 20px; 
    line-height: 28px; 
    color: #664b00; 
    text-shadow: 1px 1px 0 #fff1cc;
}

.about-intro-container { padding: 100px 0px; background-color: #fff; }
.about-intro img { width: 100%; margin-top: 30px; }
.about-intro h2 { text-align: center; font-size: 1.25em; color: #e5a800; margin-top: 20px; }
.about-intro p { padding: 20px; line-height: 26px; }
.about-intro-item-1 { border: 4px solid #b2dbff; color: #555; }
.about-intro-item-2 { border: 4px solid #ffd2b2; color: #555; margin-top: 20px; }
.about-intro-item-3 { border: 4px solid #ffedb2; color: #555; padding: 20px; line-height: 26px; }
.about-intro-item-4 { border: 4px solid #cae5b8; color: #555; margin-top: 20px; }

.about-hr-container { padding: 100px 0px; background-color: #ECF0F1; }
.about-hr-list { 
    background-color: #fff; 
    border: 1px solid #eee;
    border-radius: 2px; 
    box-shadow: 2px 2px 2px #eee; 
}
.about-hr-list h2 { 
    font-size: 1.25em; 
    color: #cc9600; 
    padding: 20px 30px;
    border-bottom: 1px solid #ffe180;
    background-color: #ffedb2;
}
.about-hr-list p { padding: 15px 30px; border-top: 1px solid #eee; color: #337ab7; }
.about-hr-list ul li { padding: 10px 30px; }
.about-hr-list ul li a { color: #333; }
.about-hr-list ul li span { padding-left: 23px; }
.about-hr-list ul li a:hover { color: #e5a800; }
.about-hr-list ul li.active a { color: #e5a800; }
.about-hr-list ul li.active span { padding-left: 5px; }
.about-hr-job {
    background-color: #fff;
    border-radius: 2px; 
    border: 1px solid #eee;
    box-shadow: 2px 2px 2px #eee; 
    padding: 10px 10px 25px;
}
.about-hr-job h2 { font-size: 1.125em; border-bottom: 1px dashed #ddd; padding: 17px 20px; margin-bottom: 10px; }
.about-hr-job h3 { padding: 20px 20px 10px; color: #337ab7; }
.about-hr-job ul li { padding: 5px 20px; font-size: 15px; }

/* phone */
@media (max-width: 767px) {
    .about-banner-container { 
        height: 150px;
        background: #ffdb78 url("/images/bg-about-phone.png") center bottom no-repeat; 
        background-size: 84%;
    }
    .about-banner-title { font-size: 1.25em; margin-top: 40px; text-align: center; }
    .about-banner-desc { margin-top: 10px; font-size: 0.875em; text-align: center; }

    .about-intro-container { padding: 30px 0px; }
    .about-intro { text-align: center; }
    .about-intro img { width: 90%; margin-top: 10px; }
    .about-intro h2 { font-size: 1.125em; margin-top: 30px; }
    .about-intro p { font-size: 0.875em; }
    .about-intro-item-3 {  font-size: 0.875em; margin-top: 20px;}
    
    .about-hr-container { padding: 30px 0px; }
    .about-hr-list h2 { font-size: 1.125em; padding: 15px 20px;}
    .about-hr-list p { font-size: 0.875em; }
    .about-hr-list ul li { padding: 8px 30px; }
    .about-hr-list ul li a { font-size: 0.875em; }
    .about-hr-job { margin-top: 10px; }
    .about-hr-job h2 { font-size: 1em; padding: 15px 20px; margin-bottom: 10px; }
    .about-hr-job h3 { padding: 10px 20px 5px; font-size: 0.875em; }
    .about-hr-job ul li { padding: 5px 20px; font-size: 0.875em; }

    .about-contact-container { height: 300px; }

    .about-customer-container { padding: 30px 0 10px; }
    .about-customer h2 { font-size: 1.125em;  line-height: 60px; margin-bottom: 30px; }
    .about-customer-item { height: 60px; margin-top: 10px; }
}

/* pad 768x1024 */
@media (min-width: 768px) and (max-width: 1024px) {
    .about-intro-container { padding: 50px 0px; }
    .about-intro { text-align: center; }
    .about-intro img { width: 90%; margin-top: 30px; }
    .about-intro h2 { font-size: 1.125em; margin-top: 40px; }
    .about-intro p { font-size: 0.875em; }
    .about-intro-item-3 {  font-size: 0.875em; }
    
    .about-hr-container { padding: 50px 0px; }
    .about-hr-list h2 { font-size: 1.125em; padding: 15px 20px;}
    .about-hr-list p { font-size: 0.875em; }
    .about-hr-list ul li { padding: 8px 30px; }
    .about-hr-list ul li a { font-size: 0.875em; }
    .about-hr-job h2 { font-size: 1em; padding: 15px 20px; margin-bottom: 10px; }
    .about-hr-job h3 { padding: 10px 20px 5px; font-size: 0.875em; }
    .about-hr-job ul li { padding: 5px 20px; font-size: 0.875em; }

    .about-customer-container { padding: 50px 0 10px; }
    .about-customer h2 { font-size: 1em; }
}