body {
    margin: 0 auto;
    min-width: 100%;
}

.colorhunter {
    padding: 0px 0px 1px;
    background-color: #fafafa;
}

.colorhunter h2 {
    margin-bottom: 50px;
    padding-bottom: 30px;
    font-size: 36px;
    line-height: 36px;
    text-align: center;
    background: url(title_underline.png) no-repeat center bottom;
}

.visible-xs {
    display: none !important;
}

.ch-banner {
    margin: 0px auto;
    width: 100%;
    max-width: 1920px;
}

.ch-banner img {
    max-width: 100%;
    height: auto;
}

.ch-video {
    margin: 0px auto;
    padding: 80px 0px 60px;
    width: 100%;
    max-width: 1920px;
    min-height: 500px;
    background: url(bg_video.jpg) no-repeat;
}

.ch-video .panel {
    /*padding:0px 20px;*/
    width: 100%;
    display: table;
}

.ch-video .panel .videoItem {
    width: 50%;
    padding: 0px 20px;
    display: table-cell;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.ch-video .panel a {
    display: block;
    text-align: center;
    position: relative;
}

.ch-video .panel a .vplay {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    background: url(play.png) no-repeat;
    background-size: 100% 100%;
}

.ch-video .panel a:hover .vplay {
    background-position: 0px -80px;
    background: url(play_o.png) no-repeat;
    background-size: 100% 100%;
}

.ch-video img {
    max-width: 100%;
    height: auto;
}

.ch-overview {
    margin-bottom: 80px;
    padding: 80px 20px;
    background-color: #f2f4f4;
}

.ch-overview p {
    margin: 0 auto;
    padding: 0px 50px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    max-width: 900px;
    position: relative;
}

.ch-overview p strong {
    font-size: 16px;
    line-height: 24px;
    color: #333;
}

.ch-overview p span {
    position: absolute;
    width: 37px;
    height: 26px;
    display: block;
}

.ch-overview p span.lquote {
    left: 0px;
    top: -15px;
    background: url(ico_quote_left.png) no-repeat;
}

.ch-overview p span.rquote {
    right: 0px;
    bottom: 0px;
    background: url(ico_quote_right.png) no-repeat;
}

.ch-intro {
    margin: 0 auto 80px;
    width: 100%;
    max-width: 1200px;
}

.featurepanel {
    padding: 0px 20px;
    background-color: #fff;
    display: table;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.featurepanel .img {
    width: 52.5%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.featurepanel .list {
    width: 47.5%;
    display: table-cell;
    vertical-align: middle;
}

.featurepanel .img img {
    max-width: 100%;
    height: auto;
}

.featurepanel .list ul {
    padding-left: 50px;
}

.featurepanel .list li {
    margin-top: 20px;
    padding-left: 70px;
}

.featurepanel .list h3 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 24px;
}

.featurepanel .list li p {
    width: 300px;
    font-size: 16px;
    line-height: 24px;
}

.featurepanel .list li.s1 {
    background: url(ico_intro01.jpg) no-repeat 0px 5px;
}

.featurepanel .list li.s2 {
    background: url(ico_intro02.jpg) no-repeat 0px 5px;
}

.featurepanel .list li.s3 {
    background: url(ico_intro03.jpg) no-repeat 0px 5px;
}

.featurepanel .list li.s4 {
    background: url(ico_intro04.jpg) no-repeat 0px 5px;
}

.featurepanel .list li.s5 {
    background: url(ico_intro05.jpg) no-repeat 0px 5px;
}

.core-technology .list:before,
.core-technology .list:after,
.ch-products ul:before,
.ch-products ul:after {
    display: table;
    content: " ";
}

.core-technology .list:after,
.ch-products ul:after {
    clear: both;
}

.swiperCore {
    padding: 0px 0px 50px;
}

.swiperCore .swiper-container {
    padding-bottom: 30px;
}

.swiperCore .swiper-pagination-bullet-active {
    background: #f6b538;
}

.swiperCore .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
}

.core-technology {
    margin: 0px auto 80px;
    width: 100%;
    max-width: 1200px;
}

.core-technology .list {
    width: 100%;
    display: table;
}

.core-technology .list .coreItem {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
}

.core-technology .list .textbox {
    padding: 30px 0px 30px 75px;
    background: url(ico_core.png) no-repeat;
}

.core-technology .list .textbox h3 {
    margin-bottom: 25px;
    font-size: 36px;
    width: auto;
}

.core-technology .list .textbox p {
    width: 85%;
    font-size: 20px;
    line-height: 32px;
}

.core-technology .list .img {
    padding: 60px 40px 60px;
    text-align: right;
    background: url(ph_core01.png) no-repeat right center;
}

.core-technology .list .img img {
    max-width: 100%;
    height: auto;
}

.performance,
.ch-application,
.ch-products,
.ch-news {
    margin: 0px auto 80px;
    width: 100%;
    max-width: 1200px;
    /*-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;*/
}

.performance img {
    max-width: 100%;
    height: auto;
}

.performance .img {
    text-align: center;
}

.ch-application .appItem {
    margin-bottom: 60px;
    width: 100%;
    display: table;
}

.ch-application .img {
    width: 43%;
    display: table-cell;
    vertical-align: top;
}

.ch-application .textbox {
    width: 57%;
    display: table-cell;
    vertical-align: top;
    padding: 10px 0px 0px 55px;
    color: #333;
}

.ch-application .img img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

.ch-application h3 {
    font-size: 24px;
    color: #0082cc;
}

.ch-application h4 {
    margin: 25px 0px 10px;
    font-size: 16px;
}

.ch-application h4:first-child {
    margin: 0px 0px 10px;
}

.ch-application p {
    padding-left: 18px;
    font-size: 16px;
    line-height: 24px;
    background: url(ico_square_orange.png) no-repeat 2px 8px;
}

.ch-products li {
    float: left;
    width: 50%;
    display: inline;
}

.ch-products li a {
    margin: 0 10px;
    max-width: 580px;
    display: table;
}

.ch-products li .img {
    width: 58%;
    display: table-cell;
    vertical-align: top;
    padding-top: 35px;
    text-align: center;
    background: url(shadow.jpg) #f0f0f0 repeat-y right top;
}

.ch-products li .textbox {
    width: 42%;
    max-width:210px;
    display: table-cell;
    vertical-align: top;
    background: url(mark.jpg) #081d3a no-repeat bottom center;
}

.ch-products li a img {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.ch-products li a:hover .img img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

.ch-products li .img p {
    padding-top: 5px;
    font-size: 18px;
    color: #333;
    line-height: 24px;
}

.ch-products li .img p span {
    font-size: 16px;
}

.ch-products li .img img {
    max-width: 100%;
    height: auto;
}

.ch-products li .textbox p {
    padding: 25px 10px 25px 15px;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
}

.ch-products li .textbox p strong {
    margin-bottom: 10px;
    color: #fff;
    font-size: 18px;
    display: block;
}

.ch-news li {
    margin-bottom: 30px;
}

.ch-news li:last-child {
    margin-bottom: 0px;
}

.ch-news li a {
    width: 100%;
    display: table;
}

.ch-news li .img {
    width: 30%;
    display: table-cell;
    vertical-align: middle;
}

.ch-news li .textbox {
    width: 70%;
    display: table-cell;
    vertical-align: middle;
    padding: 0px 50px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.ch-news li .img img {
    max-width: 100%;
    height: auto;
}

.ch-news li h3 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.ch-news li p {
    margin-bottom: 20px;
    font-size: 16px;
    color: #555;
}

.ch-news li div.more {
    width: 95px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    display: block;
    background-color: #0082cc;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
    .visible-xs {
        display: block !important;
    }
    .colorhunter h2 {
        margin-bottom: 40px;
        padding-bottom: 20px;
        font-size: 30px;
        line-height: 30px;
    }
    .ch-video {
        padding: 80px 0px 60px;
        width: 100%;
        min-height: auto;
        background: url(bg_video.jpg) no-repeat;
        background-size: auto 100%;
    }
    .featurepanel .img {
        width: 100%;
        display: block;
        text-align: center;
    }
    .featurepanel .list {
        width: 100%;
        display: block;
    }
    .featurepanel .list ul {
        padding-bottom: 30px;
    }
    .featurepanel .list li p {
        width: 80%;
        font-size: 16px;
    }
    .core-technology .list {
        width: 100%;
        display: block;
    }
    .core-technology .list .coreItem {
        width: 100%;
        display: block;
    }
    .core-technology .list .textbox {
        padding: 30px 0px 30px 75px;
    }
    .core-technology .list .textbox h3 {
        margin-bottom: 25px;
        font-size: 32px;
        width: auto;
    }
    .core-technology .list .textbox p {
        width: auto;
        font-size: 18px;
        line-height: 32px;
    }
    .core-technology .list .img {
        padding: 40px 40px 40px;
        text-align: center;
    }
    .ch-products li .img {
        padding-bottom: 20px;
        width: 100%;
        display: block;
        background: none;
        background-color: #f0f0f0;
    }
    .ch-products li .img p {
        font-size: 16px;
        line-height: 20px;
    }
    .ch-products li .textbox p {
        padding: 20px 15px;
        color: #fff;
        font-size: 14px;
        line-height: 24px;
    }
    .ch-products li .textbox p strong {
        margin-bottom: 10px;
        color: #fff;
        font-size: 18px;
        display: block;
    }
    .ch-products li .textbox {
        width: 100%;
        max-width:100%;
        display: block;
    }
    .ch-products li a {
        display: block;
    }
    .ch-news li .img {
        vertical-align: top;
    }
    .ch-news li h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }
    .ch-news li p {
        margin-bottom: 10px;
        font-size: 14px;
    }
    .ch-news li .textbox {
        padding: 0px 20px;
    }
}

@media (max-width: 480px) {
    .colorhunter h2 {
        margin-bottom: 40px;
        padding-bottom: 20px;
        font-size: 24px;
        line-height: 24px;
    }
    .ch-overview p span {
        width: 24px;
        height: 17px;
    }
    .ch-overview p span.lquote {
        left: 0px;
        top: -15px;
        background-size: 100% 100%;
    }
    .ch-overview p span.rquote {
        right: 0px;
        bottom: 0px;
        background-size: 100% 100%;
    }
    .ch-overview p {
        padding: 0px 25px;
    }
    .ch-video .panel {
        display: block;
    }
    .ch-video .panel .videoItem {
        margin-bottom: 20px;
        width: 100%;
        display: block;
    }
    .ch-application .appItem {
        display: block;
    }
    .ch-application .img {
        width: 100%;
        display: block;
        vertical-align: top;
        text-align: center;
    }
    .ch-application .textbox {
        width: 100%;
        display: block;
        vertical-align: top;
        padding: 10px 0px 0px 0px;
    }
    .ch-products li {
        float: none;
        width: 100%;
        display: block;
    }
    .ch-products li a {
        margin: 0;
        max-width: 560px;
        display: block;
    }
    .featurepanel .list ul {
        padding-left: 0px;
    }
    .featurepanel .list h3 {
        line-height: 20px;
    }
    .featurepanel .list li p {
        width: auto;
        font-size: 16px;
        line-height: 20px;
    }
    .core-technology .list .textbox {
        padding: 20px 0px 30px 45px;
        background-size: 35px 35px;
    }
    .core-technology .list .textbox h3 {
        margin-bottom: 15px;
        font-size: 24px;
    }
    .core-technology .list .textbox p {
        width: 85%;
        font-size: 16px;
        line-height: 24px;
    }
    .ch-products li {
        margin-bottom: 10px;
    }
    .ch-news li a {
        width: 100%;
        display: block;
    }
    .ch-news li .img {
        margin-bottom: 10px;
        width: 100%;
        display: block;
        text-align: center;
    }
    .ch-news li .textbox {
        width: 100%;
        display: block;
        padding: 0px;
    }
    .ch-news li div.more {
        margin: 0 auto;
    }
}