@media screen and (max-width: 1500px) {
  /********************************* swiper **************************/
  .indexSwiperDiv .swiperSlideWord p {
    font-size: 2em;
  }
  .indexSwiperDiv .swiperSlideWord h1 {
    font-size: 4em;
  }
  .indexSwiperDiv .swiperSlideWord .swiperSlideLine {
    width: 20%;
    height: 5px;
    margin-top: 60px;
    margin-left: 60px;
  }
  .indexSwiperDiv .swiperSlideWord button.swiperSlideBtn {
    padding: 5px 15px;
    font-size: 1.2em;
    margin-top: 60px;
    margin-left: 60px;
  }
  .indexSwiperDiv .indexSwiperBot {
    padding: 15px;
  }
  /******************************** header ***************************/
  .sliderHeader {
    padding: 0 60px;
  }
  /******************************** quality **************************/
  .quality .qualitySec .qualitySecRow .qualitySecLeftCol {
    padding-left: 15%;
    padding-top: 5%;
  }
  .quality .qualitySec .qualitySecRow .qualitySecLeftCol h1 {
    font-size: 2.8em;
  }
  .quality .qualitySec .qualitySecRow .qualitySecLeftCol p {
    margin-bottom: 5%;
  }
  /******************************** men ******************************/
  .men .menSec {
    padding: 5% 0;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi1 {
    padding-right: 5%;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi2 {
    padding-left: 3%;
    width: 55%;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi3 {
    padding-left: 3%;
  }
  /******************************** index ****************************/
  .index .indexThr .indexThrWhiteBg p {
    margin-bottom: 30px;
  }
  .index .indexThr .indexThrWhiteBg a button {
    font-size: 1.4em;
    padding: 5px 20px;
  }
  /******************************** about ****************************/
  .about .aboutFif .aboutFifWord {
    padding: 5% 25% !important;
  }
}
@media screen and (max-width: 1366px) {
  /******************************** header ***************************/
  header .myContainer #MainNav .headerNavLi {
    padding: 0 10px !important;
  }
  header .myContainer #MainNav .headerNavLi .headerNavUl2 .headerNavLi2 a {
    font-size: 1.2em;
  }
  header .myContainer #MainNav .headerColWord {
    padding-top: 25px !important;
  }
  .sliderHeader {
    padding: 0 30px;
  }
  .sliderHeader .myContainer .headerCol #MainNav .headerColWord {
    padding-top: 10px !important;
  }
  /******************************** index ****************************/
  .index .indexThr .indexThrWhiteBg h1 {
    font-size: 2.8em;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol {
    height: 300px;
  }
  /***************************** newsDetail **************************/
  .newsDetail .newsDetailSec .myContainer {
    padding: 0 15%;
  }
  /******************************** quality **************************/
  .quality .qualitySec .myContainer {
    padding: 0 10%;
  }
  /******************************** men ******************************/
  .men .menSec .myContainer {
    padding: 0 10%;
  }
  /******************************** about ****************************/
  .about .aboutSec .myContainer {
    padding: 0 10%;
  }
  .about .aboutThr .myContainer {
    padding: 0 10%;
  }
  .about .aboutFif .aboutFifWord {
    padding: 5% 20% !important;
  }
  .about .aboutSix .myContainer {
    padding: 0 10%;
  }
  /******************************** users ****************************/
  .users .usersSec .myContainer {
    padding: 5% 10%;
  }
}
@media screen and (max-width: 1024px) {
  /********************************* public **************************/
  .myContainer {
    padding: 0 5%;
  }
  h2 {
    font-size: 2em !important;
  }
  p {
    font-size: 1.2em !important;
  }
  span {
    font-size: 1.2em !important;
  }
  /********************************* swiper **************************/
  .swiper-container {
    height:50%;
  }
  .swiper-container img {
    width: 100%;
    height: auto;
  }
  .indexSwiperDiv .indexSwiperBg {
    height: 0;
  }
  .indexSwiperDiv .swiperSlideWord {
    left: 5%;
    top: 10%;
  }
  .indexSwiperDiv .swiperSlideWord p {
    font-size: 1em;
  }
  .indexSwiperDiv .swiperSlideWord h1 {
    font-size: 3em;
  }
  .indexSwiperDiv .swiperSlideWord .swiperSlideLine {
    margin-top: 30px;
    margin-left: 0;
  }
  .indexSwiperDiv .swiperSlideWord a button.swiperSlideBtn {
    font-size: 1.2em;
    margin-top: 20px;
    margin-left: 0;
  }
  .indexSwiperDiv .indexSwiperBot {
    display: none;
  }
  /******************************** header ***************************/
  header {
    height: 40px;
    padding: 0 40px;
  }
  header .myContainer {
    padding: 0 2%;
  }
  header .myContainer .headerCol img#logo {
    width: 80px;
    padding-top: 15px;
  }
  header .myContainer .headerCol #MainNav .headerNavLi {
    line-height: 40px !important;
  }
  header .myContainer .headerCol #MainNav .headerColWord {
    line-height: 25px !important;
    padding-top: 10px !important;
  }
  .navbar-brand {
    padding: 15px !important;
  }
  /******************************** index ****************************/
  .index .indexSec .myContainer .indexSecRow .indexSecCol {
    height: 300px;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol a .indexSecColWord p {
    font-size: 1em;
    margin-bottom: 15px;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol a .indexSecColWord button {
    font-size: 1em;
  }
  .index .indexThr .indexThrWhiteBg {
    padding: 3% 3%;
  }
  .index .indexThr .indexThrWhiteBg h1 {
    font-size: 3em;
  }
  .index .indexThr .indexThrWhiteBg span {
    font-size: 1.2em;
    margin-bottom: 15px;
  }
  .index .indexThr .indexThrWhiteBg p {
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  .index .indexThr .indexThrWhiteBg .indexThrLine {
    width: 300px;
    height: 2px;
    background-color: #014099;
    margin-bottom: 15px;
  }
  .index .indexThr .indexThrWhiteBg a button {
    font-size: 1.2em;
  }
  /******************************** footer ***************************/
  footer .footerBox {
    right: 5%;
  }
  footer .footerBox i {
    padding: 10px;
  }
  footer .myContainer {
    padding: 4% 5%;
  }
  footer .myContainer .row .footerLeft p {
    font-size: 1.2em;
  }
  footer .myContainer .row .footerLeft p.footerLeftFirstP span {
    padding-left: 15px;
  }
  footer .myContainer .row .footerRight ul li p {
    font-size: 1.2em;
  }
  /******************************** about ****************************/
  .about .aboutSec .myContainer {
    padding: 0 5%;
  }
  .about .aboutSec .myContainer span {
    padding: 2% 10%;
  }
  .about .aboutSec .myContainer .aboutSecRow .aboutSecCol button {
    font-size: 1.2em;
  }
  .about .aboutThr .myContainer {
    padding: 0 5%;
  }
  .about .aboutThr .myContainer .aboutThrImg1 {
    margin-top: 2%;
  }
  .about .aboutThr .myContainer .aboutThrImg1 img {
    width: 20px;
  }
  .about .qualitySec {
    background-size: 100%;
  }
  .about .qualitySec .myContainer {
    padding: 0 5%;
  }
  .about .aboutFif .myContainer {
    padding: 0 5%;
  }
  .about .aboutFif .myContainer .aboutFifImg1 {
    margin-bottom: 5%;
  }
  .about .aboutSix .myContainer {
    padding: 0 5%;
  }
  .about .aboutSix .myContainer .aboutSixDiv {
    bottom: 80px;
  }
  /******************************** news *****************************/
  .news .newsThr .myContainer {
    padding: 0 5%;
  }
  /***************************** newsDetail **************************/
  .newsDetail .newsDetailSec .myContainer {
    padding: 0 5%;
  }
  /****************************** men ********************************/
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi1 {
    padding-right: 5%;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi2 {
    padding-left: 3%;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi3 {
    padding-left: 3%;
  }
  /***************************** users *******************************/
  .users .usersFirst {
    padding: 15% 0 5% 0;
  }
  .users .usersFirst p {
    font-size: 2.6em;
  }
  .users .usersFirst .usersFirstLine {
    width: 30px;
    margin-bottom: 10px;
  }
  .users .usersFirst button {
    font-size: 1.2em;
  }
  /******************************** quality **************************/
  .qualitySecUl .qualitySecLi {
    margin-right: 2%;
    width: 30%;
  }
  .qualitySecUl .qualitySecLi img {
    width: 100%;
  }
  .quality .qualityFur .myContainer {
    padding: 18% 20%;
  }
  /****************************** contact ****************************/
  .contact .contactSec .container .contactSecDiv h1 {
    font-size: 2em;
  }
  .contact .contactThr .container1 {
    padding: 0 10%;
  }
}
@media screen and (max-width: 768px) {
  /********************************* public **************************/
  h1 {
    font-size: 2em !important;
  }
  /******************************** header ***************************/
  header {
    padding: 0 20px;
  }
  header .myContainer {
    padding: 0 2%;
  }
  header .myContainer .headerCol img#logo {
    width: 80px !important;
    padding-top: 15px !important;
  }
  header .myContainer .headerCol #MainNav .headerNavLi {
    line-height: 40px !important;
  }
  header .myContainer .headerCol #MainNav .headerNavLi a {
    font-size: 1.2em;
  }
  header .myContainer .headerCol #MainNav .headerColWord {
    line-height: 20px !important;
    padding-top: 10px !important;
  }
  .sliderHeader {
    padding: 0 10px;
  }
  /******************************** index ****************************/
  .index .indexSec .myContainer {
    padding: 0;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol a .indexSecColWord p {
    font-size: 1.4em !important;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol a .indexSecColWord button {
    font-size: 1.4em !important;
  }
  .index .indexThr .indexThrWhiteBg {
    padding: 2% 3%;
  }
  .index .indexThr .indexThrWhiteBg h1 {
    font-size: 2em;
  }
  .index .indexThr .indexThrWhiteBg span {
    margin-bottom: 5px;
  }
  .index .indexThr .indexThrWhiteBg p {
    margin-bottom: 5px;
  }
  .index .indexThr .indexThrWhiteBg .indexThrLine {
    width: 250px;
  }
  .index .indexThr .indexThrWhiteBg a button {
    font-size: 1.2em;
  }
  /******************************** about ****************************/
  .about .aboutSec .myContainer .aboutSecRow .aboutSecCol img {
    width: 60px;
  }
  .about .aboutSec .myContainer .aboutSecRow .aboutSecCol button {
    padding: 6px 25px;
  }
  .about .aboutThr .myContainer img {
    width: 10px;
  }
  .about .aboutFif {
    padding-top: 12%;
  }
  .about .aboutFif .myContainer {
    padding: 0;
  }
  .about .aboutFif .myContainer .aboutFifImg1 {
    margin-bottom: 5%;
  }
  .about .aboutFif .myContainer .aboutFifImg3 {
    width: 100%;
  }
  .about .aboutSix .myContainer {
    padding: 0;
  }
  .about .aboutSix .myContainer .aboutSixDiv {
    bottom: 80px;
  }
  .about .aboutSix .myContainer .aboutSixDiv .aboutFifImg4 {
    width: 100%;
  }
  /***************************** newsDetail **************************/
  .newsDetail .newsDetailSec .myContainer {
    padding: 0 5%;
  }
  .newsDetail .newsDetailSec .myContainer .newsDetailSecRow .newsDetailSecLeftCol ul {
    width: 90%;
  }
  /******************************** quality **************************/
  .quality .qualityFur .myContainer {
    padding: 12% 20%;
  }
  /***************************** users *******************************/
  .users .usersSec .container .usersSecRow .usersSecRightCol img {
    width: 100%;
  }
  /******************************** pro ******************************/
  .pro .proThr .container .row .proThrCol img {
    width: 100px;
  }
  .pro .proThr .container .row .proThrRightCol img {
    width: 300px;
  }
  .pro .proFur {
    padding: 5% 0;
    background-image: url('/static/home/img/pro/fbg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .pro .proFur .container .row .proFurCol h2 {
    color: #333;
    margin-bottom: 15px;
  }
  .pro .proFur .container .row .proFurCol p {
    font-size: 1.6em;
    color: #898989;
    line-height: 1.6;
  }
  .pro .proFur .container .row .proFurCol a {
    color: #0070c9;
    font-size: 1.6em;
    display: block;
    margin-top: 35px;
  }
  .pro .proFur .container .row .proFurCol a:hover {
    color: #90c31f;
  }
  .pro .proFur .container .row .proFurCol img {
    margin: 0 auto;
  }
  .pro .proFur .container .row .proFurLeftCol {
    padding-right: 5%;
  }
  .pro .proFur .container .row .proFurLeftCol img {
    margin-top: 15%;
    margin-left: 12%;
  }
  .pro .proFur .container .row .proFurRightCol img {
    margin-top: 7%;
    padding-left: 5%;
    margin-bottom: 22%;
  }
  /**************************** proClassify **************************/
  .proClassify .proClassifySec .myContainer {
    padding: 5% 5%;
  }
  .proClassify .proClassifySec .myContainer .proClassifySecSLiWord h1 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 414px) {
  /******************************** nav ******************************/
  .navbar {
    margin-bottom: 0;
    z-index: 999;
  }
  .navbar-brand {
    padding: 10px 15px;
  }
  .navbar-brand > img {
    width: 120px;
  }
  .navbar-header {
    background-color: #212121;
  }
  .navbar-toggle {
    background-color: #212121;
  }
  .zhButton,
  .enButton {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 5px 15px 5px 25px;
    line-height: 20px;
  }
  /********************************* swiper **************************/
  .indexSwiperDiv .swiperSlideWord {
    display: none;
  }
  /******************************** index ****************************/
  .index .indexFirst .container .indexFirstRow .indexFirstCol img {
    width: 50%;
  }
  .index .indexSec .myContainer {
    padding: 0;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol a .indexSecColWord p {
    font-size: 1.4em !important;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol a .indexSecColWord button {
    font-size: 1.4em !important;
  }
  .index .indexThr .indexThrWhiteBg {
    width: 100%;
    position: inherit;
    padding: 4% 4%;
  }
  /******************************** footer ***************************/
  footer .footerLine .footerLineBg {
    height: 5px;
  }
  footer .footerBox {
    display: none;
  }
  footer .myContainer {
    padding: 4% 5%;
  }
  footer .myContainer .row .footerLeft p.footerLeftFirstP span {
    padding-left: 15px;
  }
  footer .myContainer .row .footerLeft p.footerLeftSecP img {
    padding-left: 2%;
  }
  footer .myContainer .row .footerRight {
    display: none;
  }
  /******************************** about ****************************/
  .about .aboutSec .myContainer .aboutSecRow .aboutSecCol img {
    width: 50%;
  }
  .about .aboutSec .myContainer .aboutSecRow .aboutSecCol button {
    padding: 4px 15px;
  }
  .about .aboutFif .myContainer {
    padding: 0 5%;
  }
  .about .aboutFif .myContainer .aboutFifImg1 {
    margin-bottom: 5%;
  }
  .about .aboutFif .myContainer .aboutFifImg2 {
    width: 100%;
  }
  .about .aboutSix .myContainer {
    padding: 0 5%;
  }
  .about .aboutSix .myContainer .aboutSixDiv {
    bottom: 20px;
  }
  /***************************** newsDetail **************************/
  .newsDetail .newsDetailSec .myContainer {
    padding: 0 4%;
  }
  .newsDetail .newsDetailSec .myContainer .newsDetailSecRow .newsDetailSecLeftCol ul {
    width: 100%;
    padding: 15px 10px 10px 10px;
    border: 0;
  }
  /******************************** quality **************************/
  .qualitySecUl .qualitySecLi {
    margin-right: 2%;
    width: 30%;
  }
  .qualitySecUl .qualitySecLi img {
    width: 100%;
  }
  .quality .qualityFur .myContainer {
    padding: 18% 5%;
  }
  .quality .qualityFif .myContainer {
    padding: 6% 5%;
  }
  .quality .qualitySix .myContainer {
    padding: 6% 5%;
  }
  /****************************** men ********************************/
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl {
    text-align: center;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi {
    display: block;
    border-right: 0;
    border-bottom: 1px dashed #e0e0e0;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi1 {
    padding-right: 0;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi2 {
    padding-left: 0;
    width: 100%;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi3 {
    border: 0;
    padding-left: 0;
  }
  /***************************** users *******************************/
  .users .usersFirst button {
    font-size: 1em;
    padding: 5px 8px;
  }
  .users .usersSec .container .usersSecRow {
    padding: 0 5%;
  }
  .users .usersSec .container .usersSecRow .usersSecRightCol img {
    margin-top: 5%;
    width: 100%;
  }
  /****************************** contact ****************************/
  .contact .contactThr .container1 {
    padding: 0 10%;
  }
  .contact .contactThr .container1 .contactThrRow .contactThrLeft {
    width: 100%;
  }
  .contact .contactThr .container1 .contactThrRow .contactThrRight {
    width: 100%;
  }
  .contact .contactThr .container1 .contactThrRow .contactThrRight textarea {
    margin-top: 5%;
  }
  /******************************** pro ******************************/
  .pro .proSec .container .row {
    padding: 0 5%;
  }
  .pro .proSec .container .row .proSecRightCol {
    right: 5%;
    top: 5px;
  }
  .pro .proThr .container .row {
    padding: 0 5%;
  }
  .pro .proThr .container .row .proThrRightCol img {
    margin-top: 15%;
  }
  .pro .proFur .container .row {
    padding: 0 5%;
  }
  .pro .proFur .container .row .proFurLeftCol img {
    width: 100%;
    margin-left: 5%;
  }
  .pro .proFur .container .row .proFurRightCol img {
    width: 100%;
  }
}
@media screen and (max-width: 320px) {
  /********************************* public **************************/
  h1 {
    font-size: 1.6em;
  }
  h2,
  h3 {
    font-size: 1.2em !important;
  }
  p,
  span {
    font-size: 1em !important;
  }
  /********************************* swiper **************************/
  .indexSwiperDiv .swiperSlideWord h1 {
    font-size: 1.4em !important;
  }
  .indexSwiperDiv .swiperSlideLine {
    margin-top: 10px !important;
    height: 2px;
  }
  .indexSwiperDiv button.swiperSlideBtn {
    margin-top: 10px !important;
    padding: 5px 6px !important;
    font-size: 1em;
  }
  /******************************** index ****************************/
  .index .indexFirst .container .indexFirstRow .indexFirstCol img {
    width: 50%;
  }
  .index .indexFirst .container button {
    padding: 5px 8px;
    font-size: 1em;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol a .indexSecColWord p {
    font-size: 1em !important;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol a .indexSecColWord button {
    font-size: 1em !important;
  }
  /******************************** news *****************************/
  .news .newsThr .myContainer .newsThrFUl a .newsThrFLi .newsThrSUl .newsThrSLi p {
    font-size: 1em;
    padding: 15px 0 15px 2%;
  }
  .news .newsThr .myContainer .newsThrFUl a .newsThrFLi .newsThrSUl .newsThrSLiRight {
    width: 74%;
  }
  /***************************** newsDetail **************************/
  .newsDetail .newsDetailSec .myContainer .newsDetailSecRow .newsDetailSecLeftCol ul {
    border: 0;
  }
  /****************************** men ********************************/
  .men .menSec .myContainer p {
    display: block;
    float: none !important;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl {
    text-align: center;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi {
    display: block;
    border-right: 0;
    border-bottom: 1px dashed #e0e0e0;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi1 {
    padding-right: 0;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi2 {
    padding-left: 0;
    width: 100%;
  }
  .men .menSec .myContainer .menSecFUl .menSecFLi .menSecSUl .menSecSLi3 {
    border: 0;
    padding-left: 0;
  }
}