@media screen and (max-width: 1600px) {
  /******************************** public ***************************/
  h1 {
    font-size: 7em !important;
  }
  h2 {
    font-size: 2.4em !important;
  }
  h3 {
    font-size: 2em !important;
  }
  p {
    font-size: 1.4em !important;
  }
  .myContainer {
    padding: 0 10% !important;
  }
  header {
    padding: 0 10% !important;
  }
  /******************************** index ****************************/
  .index .indexFirst .myContainer .swiper-button-prev {
    left: 6%;
  }
  .index .indexFirst .myContainer .swiper-button-next {
    right: 6%;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol .indexSecColWord span {
    color: #8fc31f;
    display: block;
    margin-bottom: 10%;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol .indexSecColWord span b {
    color: #006544;
  }
  .index .indexThr .myContainer ul li {
    display: inline-block;
    width: 17%;
  }
  .index .indexThr .myContainer ul li h1 {
    color: #0f6644;
    display: inline;
    font-size: 1000%;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .index .indexThr .myContainer ul li small,
  .index .indexThr .myContainer ul li p {
    font-size: 1.6em;
  }
  .index .indexThr .myContainer ul li:nth-child(2) {
    width: 36%;
  }
  .index .indexThr .myContainer ul li:nth-child(3) {
    width: 28%;
  }
  .index .indexFif .indexFifF .indexFifFWord {
    left: 15%;
    top: 15%;
  }
  .index .indexFif .indexFifF .indexFifFWord a button {
    margin-top: 50%;
  }
  .index .indexFif .indexFifS .indexFifFWord {
    right: 15%;
    top: 15%;
  }
  .index .indexFif .indexFifS .indexFifFWord a button {
    margin-top: 50%;
  }
  .index .indexSix .myContainer img {
    width: 200px;
  }
  /******************************** about ****************************/
  .about .aboutThr {
    padding-bottom: 6%;
  }
  .about .aboutThr .aboutThrBot .aboutThrBotRight h1 {
    font-size: 3.6em !important;
  }
  /******************************** cases ****************************/
  .download .downloadThr .myContainer {
    padding: 5% 10% 5% 25% !important;
  }
}
@media screen and (max-width: 1440px) {
  /******************************** cases ****************************/
  .download .downloadThr .myContainer {
    padding: 5% 10% !important;
  }
}
@media screen and (max-width: 1366px) {
  /******************************** public ***************************/
  h1 {
    font-size: 2.4em !important;
  }
  h2 {
    font-size: 2.2em !important;
  }
  h3 {
    font-size: 2em !important;
  }
  p {
    font-size: 1.4em !important;
  }
  /******************************** header ***************************/
  header {
    padding: 0 5% !important;
  }
  /********************************* swiper **************************/
  .swiperBox .swiper1 .swiper-slide .swiperSlideWord {
    bottom: 15%;
    left: 5%;
  }
  .swiperBox .swiper1 .swiper-slide .swiperSlideWord a.swiperFButton button {
    font-size: 1.4em;
    padding: 8px;
    color: #231815;
    border: 1px solid #231815;
    background-color: transparent;
    border-radius: 20px;
  }
  .swiperBox .swiper1 .swiper-slide .swiperSlideWord .slideBg {
    height: 40%;
  }
  /******************************** index ****************************/
  .index .indexFirst .myContainer .indexFirstBox {
    bottom: 60px;
  }
  .index .indexFirst .myContainer .indexFirstBot .indexFirstBotLeft {
    bottom: 60px;
  }
  .index .indexFirst .myContainer .indexFirstBot .indexFirstBotRight {
    bottom: 0;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol .indexSecColWord span {
    color: #8fc31f;
    display: block;
    margin-bottom: 10%;
  }
  .index .indexSec .myContainer .indexSecRow .indexSecCol .indexSecColWord span b {
    color: #006544;
  }
  .index .indexFif .indexFifF .indexFifFWord a button {
    margin-top: 30%;
  }
  .index .indexFif .indexFifS .indexFifFWord a button {
    margin-top: 30%;
  }
  .index .indexSix .myContainer img {
    right: 15%;
  }
  /******************************** about ****************************/
  .about .aboutThr .aboutThrBot .aboutThrBotRight h1 {
    font-size: 2.4em !important;
  }
  /******************************** applition ************************/
  .applition .applitionThr .applitionThrF .applitionThrFWord a button,
  .applition .applitionThr .applitionThrT .applitionThrFWord a button {
    margin-top: 40%;
  }
  .applition .applitionThr .applitionThrS .applitionThrFWord a button,
  .applition .applitionThr .applitionThrFu .applitionThrFWord a button {
    margin-top: 40%;
  }
  /******************************** footer ***************************/
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiAddress {
    width: 35%;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav1,
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav2 {
    width: 10%;
  }
}
@media screen and (max-width: 1024px) {
  /******************************** public ***************************/
  h1 {
    font-size: 2.2em !important;
  }
  h2 {
    font-size: 2em !important;
  }
  h3 {
    font-size: 2em !important;
  }
  p {
    font-size: 1.4em !important;
  }
  /******************************** header ***************************/
  header {
    padding: 0;
    width: 100%;
  }
  header ul li.headerCol {
    margin-left: 0;
  }
  header ul li.headerCol img#logo {
    margin-top: 0;
  }
  /********************************* swiper **************************/
  .swiperBox .swiper1 {
    width: 100%;
  }
  .swiperBox .swiperContent {
    display: none;
  }
  /******************************** index ****************************/
  .index .indexFirst .myContainer .swiper-button-prev {
    left: 6%;
    top: 42%;
  }
  .index .indexFirst .myContainer .swiper-button-next {
    right: 6%;
    top: 42%;
  }
  .index .indexFif .indexFifF .indexFifFWord a button {
    margin-top: 20%;
  }
  .index .indexFif .indexFifS .indexFifFWord a button {
    margin-top: 20%;
  }
  .index .indexSix .myContainer img {
    width: 160px;
  }
  /******************************** about ****************************/
  .about .aboutThr .aboutThrBot .aboutThrBotRight {
    bottom: 0;
  }
  .about .aboutThr .aboutThrBot .aboutThrBotRight h1 {
    font-size: 2.2em !important;
  }
  /******************************** footer ***************************/
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiAddress {
    width: 40%;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav1,
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav2 {
    width: 10%;
  }
}
@media screen and (max-width: 768px) {
  /******************************** banner ***************************/
  .allFirst .allFirstContent {
    top: 20%;
    left: 5%;
  }
  .allFirst .allFirstContent .allFirstContentItem2:before {
    height: 25px;
    margin-top: 2px;
    margin-bottom: 5px;
  }
  /******************************** public ***************************/
  h1 {
    font-size: 2em !important;
  }
  h2 {
    font-size: 1.6em !important;
  }
  h3 {
    font-size: 1.4em !important;
  }
  p {
    font-size: 1em !important;
  }
  a button {
    padding: 5px 5px !important;
  }
  /******************************** header ***************************/
  header {
    width: 100%;
  }
  header ul li.headerCol ul li {
    line-height: 40px;
    margin-left: 5px;
  }
  header ul li.headerCol1 {
    width: 20%;
    margin-top: 15px;
  }
  header ul li.headerCol2 {
    padding-right: 0;
    width: 80%;
  }
  header ul .headerButton {
    width: 40px;
    height: 40px;
  }
  .sliderHeader ul li.headerCol ul li {
    line-height: 40px;
    margin-left: 5px;
  }
  .sliderHeader ul li.headerCol1 {
    width: 60px;
    margin-top: 15px;
  }
  .sliderHeader ul li.headerCol2 {
    padding-right: 60px;
  }
  .sliderHeader ul .headerButton {
    width: 40px;
    height: 40px;
  }
  /******************************** index ****************************/
  .index .indexSec .myContainer .indexSecRow {
    margin-bottom: 20%;
  }
  .index .indexFif .indexFifWord {
    left: 35%;
  }
  .index .indexSix .myContainer img {
    width: 120px;
    right: 15%;
  }
  /******************************** about ****************************/
  .about .aboutThr .aboutThrBot .aboutThrBotRight {
    bottom: -50px;
  }
  .about .aboutThr .aboutThrBot .aboutThrBotRight h1 {
    font-size: 2em !important;
  }
  .about .aboutFur {
    padding: 10% 0;
  }
  /******************************** news *****************************/
  .news .newsThr .container a .row .newsThrCol p {
    margin-top: 10%;
  }
  .news .newsFur .container a .newsFurBtn {
    font-size: 1.2em;
  }
  /******************************** footer ***************************/
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiAddress {
    width: 60%;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav1,
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav2 {
    width: 18%;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiContact .footerSecSUl {
    position: initial;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiEwm {
    margin-left: 50%;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiEwm .footerSecSUl {
    position: initial;
  }
  /******************************** pro ******************************/
  .pro .proThr .myContainer .row .proThrCol .proThrColUl2 .proThrColLi {
    width: 30%;
    margin-right: 1%;
    height: 200px;
  }
}
@media screen and (max-width: 414px) {
  /******************************** banner ***************************/
  .allFirst .allFirstImg {
    width: 100%;
    height: 100%;
  }
  .allFirst .allFirstContent {
    display: none;
  }
  /******************************** public ***************************/
  h1 {
    font-size: 2em !important;
  }
  h2 {
    font-size: 1.6em !important;
  }
  h3 {
    font-size: 1.4em !important;
  }
  p {
    font-size: 1em !important;
  }
  small {
    font-size: 1.2em !important;
  }
  a button {
    padding: 4px 8px !important;
    font-size: 1em !important;
  }
  .myContainer {
    padding: 3% !important;
  }
  .row {
    margin: 0 !important;
  }
  /******************************** header ***************************/
  .navbar-brand {
    padding: 5px 15px;
  }
  .navbar-brand img {
    width: 100px;
  }
  .navbar-header {
    background-color: #152545;
  }
  .navbar-default {
    margin-bottom: 0;
  }
  /******************************** swiper ***************************/
  .swiper1 {
    margin-top: 0;
    height: auto;
  }
  .swiper1 .swiper-slide .swiperSlideWord {
    bottom: 30%;
    left: 5%;
    overflow: unset;
  }
  .swiper1 .swiper-slide .swiperSlideWord h1 {
    font-size: 1em !important;
  }
  .swiper1 .swiper-slide .swiperSlideWord a button {
    display: none;
  }
  /******************************** index ****************************/
  .index .indexFirst .myContainer .swiper-button-prev {
    display: none;
  }
  .index .indexFirst .myContainer .swiper-button-next {
    display: none;
  }
  .index .indexFur .myContainer .indexFurRow .indexFurCol2 {
    width: 100%;
    margin-top: 5%;
  }
  .index .indexSec {
    margin-bottom: 0;
  }
  .index .indexFif .indexFifWord {
    left: 20% !important;
  }
  .index .indexSev .myContainer ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 3%;
  }
  /******************************** about ****************************/
  .about {
    margin-top: 0;
  }
  .about .aboutThr .myContainer .aboutThrCol p {
    max-width: 70%;
  }
  .about .aboutThr .aboutThrBot .aboutThrBotLeft {
    width: 100%;
  }
  .about .aboutThr .aboutThrBot .aboutThrBotRight {
    width: 100%;
    position: initial;
  }
  .about .aboutFur {
    padding-top: 0;
  }
  .about .aboutFur .myContainer .row {
    margin: 0;
  }
  .about .aboutFur .myContainer .row .aboutFurCol {
    padding: 5%;
    border-right: 0;
  }
  .about .aboutFif .aboutFifBg .aboutFifWord {
    top: 20%;
    left: 18%;
  }
  .about .aboutFif .aboutFifBg .aboutFifWord h2 {
    color: #fff;
    line-height: 1.5;
  }
  .about .aboutFif .aboutFifBg .aboutFifWord a button {
    margin-top: 15px;
  }
  /******************************** join *****************************/
  .join {
    margin-top: 0;
  }
  .join .joinThr .container .joinThrFUl .joinThrFLi {
    display: block;
    width: 100%;
  }
  .join .joinFur .container .joinFurRow .joinFurCol {
    padding: 0 !important;
  }
  /******************************** news *****************************/
  .news {
    margin-top: 0;
  }
  .news .newsThr .container a .row .newsThrCol h3 {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  /****************************** contact ****************************/
  .contact {
    margin-top: 0;
  }
  .contact .contactFirst .myContainer {
    padding: 5% !important;
  }
  .contact .contactFirst .myContainer .row .contactFirstCol {
    border-right: 0;
  }
  .contact .contactFirst #map {
    height: 200px;
  }
  /******************************** footer ***************************/
  footer .myContainer {
    padding: 0 5% !important;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiAddress {
    width: 100%;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav1,
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav2 {
    width: 48%;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiNav1::before {
    display: none;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiContact .footerSecSUl {
    position: initial;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiEwm {
    margin-left: 0;
  }
  footer .myContainer .footerSec .footerSecFUl .footerSecFLiEwm .footerSecSUl {
    position: initial;
  }
  /******************************** pro ******************************/
  .pro {
    margin-top: 0;
  }
  .pro .proSec .container p {
    margin-bottom: 0;
  }
  .pro .proThr {
    padding-top: 0;
  }
  .pro .proThr .myContainer .row .proThrCol2 {
    margin-top: 3%;
  }
  .pro .proThr .myContainer .row .proThrCol .proThrColUl2 .proThrColLi {
    width: 48%;
  }
  /******************************** proDetail ************************/
  .proDetail {
    margin-top: 0;
  }
  .proDetail .proDetailFirst .myContainer .row .proDetailLeft img {
    width: 100%;
    max-width: 100%;
  }
  .proDetail .proDetailFirst .myContainer .row .proDetailRight .proDetailRightWord h4 {
    font-size: 2em;
  }
  .proDetail .proDetailThr .container {
    overflow: scroll;
  }
  .proDetail .proDetailThr .container table tr td {
    word-break: keep-all;
  }
  /******************************** video ****************************/
  .video {
    margin-top: 0;
  }
  .video .videoThr .myContainer .videoThrRow .videoThrCol {
    margin-bottom: 3%;
  }
  /******************************** image ****************************/
  .image {
    margin-top: 0;
  }
  .image .imageThr .myContainer .imageThrRow .imageThrCol {
    margin-bottom: 3%;
  }
  .download {
    margin-top: 0;
  }
}