@media only screen and (max-width:1650px)
{
    header .wrapper {padding-left: 15px; padding-right: 15px;}
}

@media only screen and (max-width:1366px)
{
    .banner .wrapper:after { width: 640px;height: 392px;}
    .banner.active .wrapper:after {left: -30px;}
    h1 {font-size: 38px;line-height: 43px;}
    .banner h3 {font-size: 19px;line-height: 28px;padding-top: 14px;padding-bottom: 23px;}
    .banner .wrapper {padding-bottom: 40px;}

    /* english */
    .english_page .banner.active .wrapper:after{right: 0px;}
    .english_page .banner h1{font-size: 32px;line-height: 34px;}
    .english_page .banner h3{font-size: 18px;line-height: 26px;}
    .english_page .about h2{font-size: 32px;line-height: 42px;}	
    .english_page .web h2{font-size: 44px;line-height: 56px;}


}
@media only screen and (max-width:1200px) 
{
    h2 {font-size: 30px; line-height: 40px;}
    .wrapper {padding-left: 15px; padding-right: 15px;}
    .banner {padding-top: 190px;}
    .banner .wrapper:after {width: 490px;height: 342px;}
    .banner.active .wrapper:after {left: -10px;}
    .about .box .image {width: 68px; padding-left: 10px;}
    .about .box .txt {width: calc(100% - 68px); padding-left: 5%;}
    .about .box h3 {padding-top: 10px;}
    .about .box p, .about .box span {font-size: 15px; line-height: 20px;}
    .web {padding-top: 60px; padding-bottom: 80px;}
    .web h2 {font-size: 34px;}
    .skill_contaoner .skill img {max-width: 60%}
    .package_container .package {padding-left: 10px; padding-right: 10px; padding-top: 35px; padding-bottom: 50px;}
    .package_container .package img {max-width: 70px}
    .package_container .package h2 {font-size: 25px; line-height: 27px;}
    .package_container .package p {font-size: 15px; line-height: 17px;}
    .package_container .package h4 { font-size: 30px;line-height: 32px;}
    .package_container .package h4:before {font-size: 15px;}
    .package_container .package ul {padding-top: 20px;}
}

@media only screen and (max-width:1024px) 
{
    .banner .wrapper {padding-left: 466px;}
    .banner img {max-width: 100%}
    h1 {font-size: 34px;line-height: 43px;}

    /* english */
    .english_page .banner .wrapper{padding-left: 20px;}
    .english_page .banner .wrapper .inner{max-width: 550px;}
    .english_page .banner h1{font-size: 30px;line-height: 30px;}
    .english_page .banner h3{font-size: 16px;line-height: 20px;}
    .english_page .form_section h3,.english_page .form_section h3 a{font-size: 20px;line-height: 22px;}
    .english_page .about h2{font-size: 28px;line-height: 34px;}
    .english_page .web h2{font-size: 38px;line-height: 48px;}
    .english_page .package_container .package h2{font-size: 38px;line-height: 40px;}
    .english_page .package_container .package h4{padding-top: 15px;font-size: 38px;line-height: 38px;}
    .english_page .package_container .package p{font-size: 14px;line-height: 16px;}
    .english_page .package_container .package li{font-size: 16px;line-height: 16px;}
    .english_page .form_container h2{font-size: 40px;line-height: 42px;}
    .english_page .form_container h3{font-size: 22px;line-height: 24px;}
    .english_page header nav ul li{padding: 13px 1%;}

}

@media only screen and (min-width:960px) and (max-width:1024px)
{

}

@media only screen and (max-width: 959px)
{
    h1 {font-size: 28px;}
    h2 {font-size: 26px;}
    .banner .wrapper:after { width: 440px;height: 312px;}
    .banner .wrapper {padding-left: 396px;}
    .banner img {max-width: 60%;}
    .web h2 {font-size: 24px;}
    .package_container .package {width: 50%}
    .banner .wrapper:after {width: 380px;height: 272px;}
    .banner .wrapper {padding-left: 336px;}
    header .brand {width: 163px;}
    header nav {width: calc(100% - 328px)}
    header nav ul{display: block;}
    header.active nav ul{padding-top: 40px;}

    /* english */
    .english_page header nav ul li a{font-size: 12px;}
    .english_page header nav ul li{padding: 13px 3px;}
    .english_page .banner .wrapper .inner{max-width: 55%;}
    .english_page .banner h1{font-size: 24px;line-height: 24px;}
    .english_page .banner h3{padding-bottom: 20px;}
    .english_page .about h2{font-size: 20px;line-height: 24px;padding-bottom: 50px;}
    .english_page .about .box h3{font-size: 16px;line-height: 16px;}
    .english_page .web h2{font-size: 36px;line-height: 36px;}
    .english_page .skill_contaoner .skill h3, .english_page .skill_contaoner .skill p{font-size: 14px;line-height: 16px;} 
    .english_page .package_container .package h2{font-size: 34px;line-height: 38px;}
    .english_page .package_container .package ul{right: 0px;}
    /*.english_page header nav ul{display: block;}
    .english_page header.active nav ul{top:10px;padding-top: 20px;}*/
    /*.english_page nav{float: none;}
    .english_page .call{float: none;}
    .english_page .brand{float: right;}*/
    header .call{width: auto;}
    header .call a{font-size: 16.21px;}
    .english_page .menu_logo {left: auto;right: 16px;}
    footer.english_page ul li{float: none;width: 100%;text-align: center;}
    footer.english_page ul li+li{float: none;width: 100%;text-align: center;}
}

@media only screen and (max-width:767px)
{
    h1 {font-size: 25px; line-height: 30px;}
    .banner {padding-top: 140px;}
    .banner .wrapper {padding-left: 15px; padding-bottom: 0;}
    .banner h1 br {display: none}
    .banner .wrapper:after {position: relative; width: 100%; max-width: 320px; margin: 0 auto; left: 0; top: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -0-transform: translateX(-100%); transform: translateX(-100%)}
    .banner.active .wrapper:after {left: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -0-transform: translateX(0); transform: translateX(0)}
    .form_section {padding: 30px 0;}
    .form_section input, .form_section button {display: block; float: none; width: 100%; margin: 0; margin-bottom: 10px;}
    .about h2 {padding: 0; padding-bottom: 20px; font-size: 22px; line-height: 30px;}
    .about .box {display: block; float: none; width: 100%; margin: 0 auto; margin-bottom: 10px; max-width: 320px}
    .web h2 {font-size: 22px; line-height: 25px;}
    .skill_contaoner {padding-top: 40px; padding-bottom: 40px;}
    .skill_contaoner .skill {width: 50%; padding-bottom: 30px;}
    .skill_contaoner .skill img {margin-bottom: 10px;}
    .skill_contaoner .skill h3 {font-size: 16px; line-height: 18px;}
    .package_container .package {width: 100% !important;}
    .form_container ul li {text-align: center; width: 100%;min-width: 100%;}
    .form_container h2 {font-size: 30px; line-height: 34px;}
    .form_container h3 {font-size: 20px;}
    .form_container form {padding-top: 20px;}
    .form_container form ul li {width: 100%;}
    .form_container form ul li+li:before {display: none;}
    /* header */
    .mobile_ {display: block;}
    .package_container .package ul{padding-left: 20px;}
    .menu_logo {display: block; position: fixed;top: 8px;left: 16px;width: 45px; z-index: 999999999; height: 45px; padding: 10px;}
    .menu_logo .line {background: #fff; height: 3px; top: 12.5px; width: 30px; position: absolute;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
    .menu_logo:hover .line, .menu_logo.active .line, .menu_logo:hover .line.two, .menu_logo.active .line.two,.menu_logo:hover .line.three, .menu_logo.active .line.three {-webkit-transform: none; -moz-transform: none;-o-transform: none;transform: none;}
    .menu_logo.active .line {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg); top: 20.5px;}
    .menu_logo .line.two {top: 20.5px; opacity: 1;}
    .menu_logo.active .line.two {opacity: 0;}
    .menu_logo .line.three {top: 28.5px;}
    .menu_logo.active .line.three {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg); top: 20.5px;}
    header {padding: 15px 0;}
    header .call {display: none;}
    header nav {position: fixed; width: 100%; height: 100%; overflow: auto; top: 0; left: 0; z-index: 99999; display: table; opacity: 0; visibility: hidden;-webkit-transition: all 0.5s ease 0.5s;-moz-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}
    header.active nav {opacity: 1; visibility: visible;-webkit-transition-delay: 0s;-moz-transition-delay: 0s;-o-transition-delay: 0s;transition-delay: 0s;}
    header nav ul {display: table-cell; vertical-align: middle; top: 50px; position: relative;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; opacity: 0}
    header.active nav ul {top: 0;-webkit-transition: all 0.3s ease 0.5s;-moz-transition: all 0.3s ease 0.5s;-o-transition: all 0.3s ease 0.5s;transition: all 0.3s ease 0.5s; opacity: 1}
    header nav:after, header nav:before {display: block; content: ''; position: absolute; width: 100%; height: 100%; background: rgba(32,141,241,0.8); top: 0; z-index: -1;}
    header nav:before {left: -100%;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
    header.active nav:before {left: 0;}
    header nav:after {right: -100%;-webkit-transition: all 0.3s ease 0.3s;-moz-transition: all 0.3s ease 0.3s;-o-transition: all 0.3s ease 0.3s;transition: all 0.3s ease 0.3s;}
    header.active nav:after {right: 0;}
    header nav ul li {display: block; float: none; width: 100%; text-align: center;}
    header nav ul li a {font-size: 18px;}
    header nav ul li a:active {color: #fff} 
    header nav ul li a:after {bottom: 0;}
    header nav ul li a img {margin-left: 10px;}

    #cnc_toolbarWrap.right button.cnc_hide_toolbar.cnc-icon-small{ transform: scale(0.5);transform-origin: right;}


    /* english */
    .english_page .banner .wrapper .inner{max-width: 100%;}
    .english_page .form_section h3, .english_page .form_section h3 a{font-size: 18px;line-height: 20px;}
    .english_page .form_section .submit2{background-image: none;}
    .english_page .about h2{font-size: 16px;line-height: 20px;padding-bottom: 20px;}
    .english_page .about{padding-top: 30px;}
    .english_page .about .box .image, .english_page .about .box .txt{padding-right: 5%;}
    .english_page .web h2{font-size: 22px;line-height: 26px;}
    .english_page .package_container .package h2{font-size: 32px;line-height: 31px;padding: 15px 0px;}
    .english_page .form_container .form{padding-top: 40px;}
    .english_page .form_container h2{font-size: 26px;line-height: 28px;}
    .english_page .form_container h3{font-size: 18px;line-height: 20px;padding-bottom: 35px;}
    .english_page .form_container .submit{background-position: 62%;}
    .english_page .form_container .form ul{padding-top: 10px;padding-bottom: 30px;}
    footer.english_page ul li{font-size: 10px;}
    footer.english_page ul li a{font-size: 10px;}  
    
    /*dropdowm*/
    header nav ul li.menu-item-has-children a {display: inline-block;}
    header nav ul li ul.sub-menu {position: relative;display: none;margin: 0 auto;top: 0;padding-top: 0;opacity: 1;visibility: visible;transition: unset;}


}

@media (max-height: 500px)
{

}

@media (max-width:321px)
{
    footer ul li {width: 100%; float: none; text-align: center;}
    footer ul li+li {float: none; text-align: center}
    /* english */
    footer.english_page ul li+li{text-align: center;}
    .english_page .banner h1{font-size: 22px;line-height: 22px;}
    .english_page .banner h3{font-size: 14px;line-height: 16px;}
    .english_page .form_section h3, .english_page .form_section h3 a{font-size: 14px;line-height: 16px;}
    .english_page .web h2{font-size: 18px;line-height: 22px;}
    .english_page .form_container h2{font-size: 22px;line-height: 22px;}
    .english_page .form_container h3{font-size: 14px;line-height: 16px;padding-bottom: 20px;}

}