@charset "UTF-8";

/* CSS Document */
@media screen and (max-width:1300px){
    .pshow-comparison li{
        padding: 1.5rem;
    }
}

@media screen and (max-width:1200px) {
    .header-nav>div>a {
        padding: 0 1rem;
        height: 2.5rem;
        line-height: 2.5rem;
    }

    .header .header-nav ul>li>a {
        margin: 0 0.75rem;
    }

    .product-icon-on>div a:first-child,
    .product-icon-item div a:first-child,
    .product-icon-on>div a:last-child,
    .product-icon-item div a:last-child {
        padding: 0 0.75rem;
    }

    .about-brief::before,
    .about-brief::after {
        display: none;
    }

    .sy-odm-content .syodm-rt li {
        padding: 0 1rem;
    }
}
@media screen and (max-width:1100px) {
    .header .header-logo img{
        /* width: 13rem; */
    }
}
@media screen and (max-width:1000px) {
    .header-search{
        margin-right: 0;
    }
    .contact-message .cmessahe-rt {
        padding: 2rem;
    }

    .contact-message .cmessage-lt {
        padding: 0 4.5%;
    }

    .sy-odm-content .syodm-rt li {
        flex-direction: column;
    }

    .product-icon-item div {
        flex-direction: column;
    }

    .product-icon-on>div a:last-child,
    .product-icon-item div a:last-child {
        width: 100%;
        margin-left: 0;
        margin: 0.5rem 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .header-nav>div>a{
        margin-left: 0.75rem;
    }
    .header .header-logo a{
        /* max-height: 30px;
        height: 30px; */
    }
    .header .header-logo a img{
        width: 160px;
        height: auto;
        object-fit: inherit;
        display: block;
    }
    .product-icon-on>div div{
        flex-direction: column;
    }

    .banner-search{
        bottom: 2rem;
    }
}

@media screen and (max-width: 992px){
    .header .header-logo img{
        width: calc(100% - 40px);
    }
    .banner-search{
        margin-top: 2.3rem;
        position: static;
        transform: unset;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }
    .banner-search__text{
        width: 10rem;
        font-size: 1rem;
    }

    .page-product_item .index-product_item-wrap li span,
    .sy-product-wrap li span{
        margin-top: 0.95rem;
        margin-bottom: 0.95rem;
        -webkit-line-clamp: 2;
        height: auto;
    }
    .page-product_item .product-show-title,
    .swiper .product-show-title{
        height: auto;
    }
    .page-product_item .index-product_item-wrap li span{
        margin-bottom: 0;
    }
}

@media screen and (max-width:869px) {
    .header .header-top .top-container>div.headertop-lt,
    .pshow-comparison li:first-child {
        display: none;
    }

    .header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 9999;
    }

    main {
        margin-top: 80px;
    }
    .header .header-logo a img{
        width: 280px;
        height: unset;
    }
    .header .header-logo a {
        /* height: 50%; */
    }

    .header .header-content {
        height: 80px;
        overflow: hidden;
    }

    .header-nav {
        display: none;
    }

    .menu-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .nav-mb {
        display: block;
    }

    .header .header-top {
        position: fixed;
        right: calc(7% + 2rem);
        display: block;
        height: 80px;
        z-index: 1000;
        background-color: transparent;
    }

    .header .header-top .top-container>div>div:not(.bgy-en),
    .header .header-top .top-container>div ul {
        display: none;
    }

    .header .header-rt .bgy-en {
        margin: 0;
    }

    .header .header-rt .bgy-en a {
        color: #1E8094;
    }

    .header-btn {
        display: block;
    }

    .search-from .search-close-btn {
        font-size: 60px;
        width: 40px;
        height: auto;
        right: 2rem;
    }

    .page-sperform-bg .sperform-bt h5 {
        font-size: 1.25rem;
        width: 75%;
    }

    .page-sperform-bg .sperform-bt h5 {
        width: calc(100% - 200px);
    }

    .schools-top {
        flex-direction: column;
        padding-bottom: 2.825rem;
    }

    .schools-top>div {
        width: 100%;
    }

    .course-page ul {
        flex-direction: column;
    }

    .course-page ul li {
        width: 100%;
        margin-bottom: 1.25rem;
    }

    .schools-bt {
        padding-bottom: 2.875rem;
    }

    .school-main {
        padding: 0 20px;
    }

    .header .header-logo h1 {
        margin-left: 0.5rem;
        padding-left: 0.5rem;
        font-size: 0.825rem;
        line-height: 1.875rem;
    }

    .header .sheader-logo a {
        height: 60%;
    }

    .page-content .page-ics {
        padding-bottom: 1rem;
    }

    .page-sperform-bg .sperform-bt h5 {
        width: calc(100% - 40px);
        padding: 0.875rem 0;
    }

    .sy-product-wrap li{
        width: 100%;
    }
    .sy-product .product-title a{
        margin: 0 1rem;
        margin-bottom: 3.13rem;
        font-size: 0.875rem;
    }
    .sy-odm .container>div.sy-odm-title,
    .sy-odm-content,
    .sy-about .container,
    .footer .container.footer-list,
    .ft-bt .container,
    .product-list-item .product-icon-on,
    .product-show .container,
    .product-specs-list .pspecs-list-item,
    .pshow-service{
        flex-direction: column;
    }
    .ft-bt .container{
        align-items: center;
    }
    .sy-odm .container>div.sy-odm-title figure,
    .sy-odm .container>div.sy-odm-title p,
    .sy-odm-content .syodm-lt,
    .sy-odm-content .syodm-rt,
    .sy-about .container>div,
    .product-icon-on>div,
    .product-icon-on>figure,
    .pshow-service>figure,
    .pshow-service>div,
    .pshow-comparison li,
    .pshow-other li{
        width: 100%;
    }
    .pshow-comparison{
        padding: 2rem 0;
    }
    .pshow-comparison li{
        padding: 0.5rem 0;
        margin-bottom: 1rem;
    }
    .pshow-other li,
    .sy-odm-content .syodm-rt li figure{
        margin-bottom: 1rem;
    }
    .pshow-other{
        padding: 2rem 20px;
    }
    .sy-odm-content .syodm-rt li{
        padding: 1rem 0;
        /* width: 100%; */
    }
    .sy-about .syabout-lt{
        padding-right: 0;
        margin-bottom: 1.25rem;
    }
    .footer .container.footer-list>section{
        margin-bottom: 1rem;
        width: 100%;
    }
    .footer .ft-rt{
        width: 100%;
    }
    .syimg-item h2{
        font-size: 1.25rem;
    }
    .syimg-item span{
        font-size: 0.75rem;
        margin: 0.5rem 0;
    }
    .syimg-item div>a:first-child,
    .syimg-item div>a:last-child{
        padding: 0 1rem;
        line-height: 2rem;
        margin-left: 0;
        margin-bottom: 0.25rem;
    }
    .sy-banner .banner-img .syimg-item>div{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        flex-direction: column;
    }
    .product-list-title a{
        margin: 0 1.25rem;
    }
    .product-icon-on>div h4{
        font-size: 1.25rem;
    }
    .product-icon-on>div p{
        font-size: 0.75rem;
        margin-top: 1rem;
    }
    .product-icon-on>div div{
        margin-top: 1rem;
    }
    .product-icon-on>div a:first-child, 
    .product-icon-item div a:first-child,
    .product-icon-on>div a:last-child, 
    .product-icon-item div a:last-child{
        line-height: 2rem;
    }
    .product-icon-on>div{
        padding: 1.5rem;
    }
    .product-icon-on>div,
    .product-icon-on>figure,
    .product-icon-on:nth-child(even)>figure{
        border-top-left-radius: unset;
        border-bottom-left-radius: unset;
        border-top-right-radius: unset;
        border-bottom-right-radius: unset;
        border: unset;
    }
    .product-list-item .product-icon-on:nth-child(even){
        flex-direction: column;
    }
    .product-show .container{
        align-items: flex-start;
    }
    .product-show .container .tab-list{
        width: 100%;
        justify-content: center;
    }
    .product-show .container>a{
        text-align: right;
        position: relative;
        right: 0;
        margin: 0 auto;
    }
    .product-show .product-container .container{
        align-items: center;
    }
    .product-container .container ul{
        padding: 20px;
    }
    .product-container .container ul li{
        width: 50%;
    }
    .pspecs-list-item ul{
        width: 90%;
        padding-left: 10%;
    }
    .pspecs-list-item ol{
        width: 100%;
    }
    .product-specs-list .pspecs-list-item{
        padding: 1.5rem 0;
    }
    .pspecs-list-item ol p{
        margin-bottom: 0.5rem;
    }
    .news-list .container>ul li{
        width: 100%;
        margin-right: 0;
    }
    .contact-top h3,
    .contact-top-content .contact-tcontent-lt,
    .contact-top-content .contact-tcontent-rt,
    .contact-message .cmessage-lt,
    .contact-message .cmessahe-rt,
    .about-brief .about-brief-lt,
    .about-brief .about-brief-rt,
    .about-advantage .container>ul li{
        width: 100%;
    }
    .contact-top .contact-top-content,
    .contact-message .container,
    .about-brief,
    .about-team>figure{
        flex-direction: column;
    }
    .contact-top-content .contact-tcontent-lt,
    .contact-message .cmessage-lt,
    .about-brief .about-brief-lt,
    .about-advantage .container>ul li{
        margin-bottom: 1rem;
    }
    .contact-message{
        padding: 2rem 0;
    }
    .about-brief .about-brief-lt h3,
    .about-history h3{
        font-size: 1.5rem;
    }
    .about-content-item li p{
        padding: 1.5rem;
    }
    .about-team>figure{
        align-items: center;
    }
    .about-team div{
        width: 100%;
    }
    .about-team{
        padding: 4rem 20px;
    }
    .about-team figure figure{
        display: none;
    }
    .about-breadcrumb{
        padding: 0.25rem 0;
    }
    .sy-odm .container>span,
    .sy-odm .container>div.sy-odm-title p{
        /* text-align: left; */
        text-indent: 2em;
    }
    .sy-product,
    .sy-odm,
    .sy-about .container,
    .sy-reviews,
    .product-show-item .product-container .container,
    .pshow-service,
    .about-history,
    .about-advantage .container>h3{
        padding: 3rem 0;
    }
    .sy-about .syabout-lt h3,
    .sy-reviews .container>h3,
    .product-list-item>h3,
    .product-container .container h3,
    .product-specs>h3,
    .pshow-service>div h3,
    .pshow-comparison h3,
    .about-advantage .container>h3,
    .about-team div h3,
    .about-case h3,
    .contact-message .cmessage-lt h3{
        font-size: 2rem;
    }
    .sy-about .syabout-lt a,
    .sy-reviews .sybox-reviews ul,
    .product-container .container ul,
    .product-show-btimg figure,
    .pshow-service .pshow-down-list{
        margin-top: 2rem;
    }
    .sy-product h3,
    .sy-odm h3,
    .sy-about .syabout-lt h3,
    .sy-reviews .container>h3{
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .footer .container>figure{
        padding: 10px 0 20px;
        height: 69px;
    }
    .footer .container.footer-list{
        padding-bottom: 1.4rem;
    }
    .footer .container>figure img{
        height: 100%;
    }
    .sy-odm-content .syodm-rt li img{
        max-height: 30px;
    }
    .sy-odm-content .syodm-rt li figure{
        width: 40px;
        height: 40px;
        margin-bottom: 0.875rem;
    }
    .sy-odm-content .syodm-rt li p{
        font-size: 12px;
        height: auto;
    }
    .sy-odm .container>div.sy-odm-title,
    .sy-odm .container>span,
    .product-list-item>span,
    .product-container .container ul li,
    .pshow-comparison h3{
        margin-bottom: 1.5rem;
    }
    .sy-odm-content .syodm-lt,
    .about-advantage .container>ul li{
        padding: 2rem 20px;
    }
    .about-advantage .container>ul img{
        margin: 1rem 0;
    }
    .sy-odm-content .syodm-rt{
        display: grid;
    }
    .sy-odm-content .syodm-rt li{
        width: 100%;
    }
    .sy-odm-content .syodm-rt li p{
        width: 100%;
    }
    .product-list-item>h3,
    .product-specs{
        padding-top: 2rem;
    }
    .product-icon-item ul{
        margin: 1.5rem 0;
    }
    .ft-bt a{
        text-align: center;
    }
    .product-show .container>a,
    .product-show .pshow-on .container>a{
        display: none;
    }
    .product-show .container>span{
        padding: 0.75rem 0;
        border-bottom: 1px solid #ccc;
        display: block;
        width: 100%;
    }
    .product-container .container figure{
        height: 4.85rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-container .container img{
        max-width: 85%;
        line-height: 4.85rem;
    }
    .product-container .container span{
        font-size: 0.875rem;
    }
    .product-show-item .product-show-btimg{
        padding-bottom: 2rem;
    }
    .product-specs-banner .syabout-banner-bt li{
        min-height: unset;
    }
    .pspecs-list-item h3{
        width: 100%;
        font-size: 2rem;
    }
    .pspecs-list-item ul p,
    .pspecs-list-item ol span{
        line-height: 1.25rem;
    }
    .pspecs-list-item ul li, 
    .pspecs-list-item ol li{
        margin: 0.75rem 0 0.25rem;
    }
    .pshow-service>div>p{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .pshow-service>div>p{
        text-indent: 2em;
    }
    .pshow-comparison li{
        width: calc(100% - 40px);
        margin: 0 auto 1rem;
        border-bottom: 1px solid #F5F5F5;
    }
    .pshow-comparison li figure{
        border-bottom: none;
    }
    .pshow-other li{
        margin-right: 0;
        padding: 20px;
        border-radius: unset;
    }
    .pshow-other li figure{
        margin: 0 0 2rem;
    }
    .about-brief,
    .about-case,
    .contact-top .container{
        padding: 2rem 0;
    }
    .about-brief .about-brief-lt h3{
        line-height: 2rem;
    }
    .about-brief .about-brief-lt h3,
    .about-brief .about-brief-lt p{
        width: calc(100% - 40px);
    }
    .about-brief .about-brief-lt p{
        text-indent: 2em;
    }
    .about-content-item li p{
        padding: 1rem;
    }
    .about-team{
        padding: 20px;
        margin-top: 2rem;
    }
    .about-case-item figure{
        padding: 8px;
    }
    .news-content>div a{
        margin-top: 0.875rem;
    }
    .contact-top h3{
        font-size: 1.35rem;
    }
    .contact-top-content .contact-tcontent-lt{
        padding-right: 0;
    }
    .contact-message .cmessage-lt p{
        margin-top: 2rem;
    }
    .contact-message .cmessahe-rt h3{
        margin-bottom: 2rem;
    }
    .sy-about .syabout-lt a{
        padding: 0 1rem;
        line-height: 2rem;
    }
    .sy-odm-content .syodm-lt{
        flex-wrap: wrap;
        justify-content: center;
    }
    .sy-odm-content .syodm-lt img{
        margin-top: 1rem;
        margin-left: 0;
        width: 100%;
    }
    .show-product-bak .show-product-bak-lt,
    .show-product-bak .show-product-bak-rt{
        width: 100%;
    }
    .show-product-bak .show-product-bak-rt{
        margin-top: 1rem;
        padding-left: 0;
    }
    .show-product-bak .show-product-bak-lt>h3,
    .show-product-bak .show-product-bak-rt>h3{
        text-align: justify;
        font-size: 1.5rem;
        text-align: center;
    }
    .show-product-bak .show-product-bak-rt li{
        width: 100%;
        margin-left: 0;
        margin: 0 auto 1rem;
    }
}

@media screen and (max-width:768px) {
    .ft-top {
        padding: 1.25rem 0;
    }

    .ft-top .ft-lt {
        flex-wrap: wrap;
    }

    .ft-top .ft-lt>div {
        width: 100%;
    }

    .ft-bt {
        padding: 0.5rem;
    }

    .ft-bt a,
    .ft-bt span {
        font-size: 0.825rem;
    }

    .cnews-list .cnews-item-title h5 {
        font-size: 0.825rem;
        margin-top: 0.5rem;
    }

    .page-cnews span {
        font-size: 1.25rem;
    }

    .page-cnews i {
        font-size: 1rem;
    }

    .page-cnews-rt li a figure {
        max-width: 140px;
    }

    .cnews-list .cnews-item-title {
        padding-top: 0;
    }

    .page-cnews-rt .cnews-banner {
        max-height: 310px;
    }
    .banner-search{
        height: 3rem;
        box-shadow: 0.11rem 0.11rem .75rem 0rem rgba(0,0,0,.4);
    }
    .banner-search__text{
        display: none;
    }
    .banner-search__input{
        padding: 0 6%;
    }
    .banner-search__btn{
        width: auto;
        padding: 0 10px;
        height: 2rem;
        margin-right: 0.5rem;
        font-size: 0.825rem;
    }
}

@media screen and (max-width:640px) {
    .page-guide li a {
        padding: 0.825rem;
    }

    .page-sperform .sperform-rt li {
        transform: translateX(-12px) translateY(0) scale(0.6);
    }

    .mb-map .sperform-rt,
    .mb-map .sperform-rt>figure,
    .mb-map .sperform-rt ul {
        width: 150%;
    }
}

@media screen and (max-width:600px) {
    .school-list ul li {
        width: 100%;
    }
}

@media screen and (max-width:500px) {
    .page-sperform .sperform-rt li {
        transform: translateX(-20px) translateY(-6px) scale(0.6);
    }

    .mb-map .sperform-rt,
    .mb-map .sperform-rt>figure,
    .mb-map .sperform-rt ul {
        width: 210%;
    }

    .teacher-list .teacher-name {
        bottom: 0.5rem;
    }

    .page-gsgc-content .brief-lt li a {
        width: 93px;
        font-size: 0.75rem;
        margin-bottom: 3px;
        margin-right: 18px;
    }

    .page-sperform-bg .sperform-bt h5 {
        font-size: 0.725rem;
    }

    .page-sperform-bg .sperform-bt strong {
        font-size: 1rem;
    }
}

@media screen and (max-width:450px) {
    .header-btn li:not(.hrt-search) {
        padding: 0 0.5rem;
    }

    .page-title span {
        font-size: 12px;
    }

    .page-title h2 {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .page-title img {
        transform: scale(0.8);
    }

    .page-sperform-bg .sperform-bt h5 {
        font-size: 1rem;
    }
}

@media screen and (max-width:400px) {
    .nav-mb a {
        font-size: 0.8rem;
    }

    .header .header-rt .bgy-en {
        padding: 0;
    }

    .menu-btn {
        transform: scale(0.6);
    }

    /* .header .header-logo a {
        height: 40%;
    } */

    .page-content .page-ics {
        height: 80px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .page-content .page-ics ul li a,
    .page-content .page-ics ul li img {
        height: 100%;
    }
}