/*for i in range(300, 760, 10)
	@media screen and (max-width: i*1px)
		html
			font-size round(i/5.5)*1px*/

@media screen and (min-width: 1650px) {
    html {
        font-size: 100px;
    }
}

@media screen and (max-width: 1680px) {
    body {
        font-size: 16px;
    }

    .text {
        font-size: 15PX;
    }
}

@media screen and (max-width: 1650px) {
    .slider-frame .slick-next {
        right: 0;
    }

    .slider-frame .slick-prev {
        left: 0;
    }
}

@media screen and (max-width: 1649px) {
    html {
        font-size: 97px;
    }
}

@media screen and (max-width: 1624px) {
    html {
        font-size: 95px;
    }
}

@media screen and (max-width: 1599px) {
    html {
        font-size: 94px;
    }
}

@media screen and (max-width: 1574px) {
    html {
        font-size: 92px;
    }
}

@media screen and (max-width: 1549px) {
    html {
        font-size: 91px;
    }
}

@media screen and (max-width: 1524px) {
    html {
        font-size: 89px;
    }
}

@media screen and (max-width: 1499px) {
    html {
        font-size: 88px;
    }
}

@media screen and (max-width: 1474px) {
    html {
        font-size: 86px;
    }
}

@media screen and (max-width: 1449px) {
    html {
        font-size: 85px;
    }
}

@media screen and (max-width: 1424px) {
    html {
        font-size: 83px;
    }
}

@media screen and (max-width: 1400px) {
    body {
        font-size: 14px;
    }

    .text {
        font-size: 14PX;
    }
}

@media screen and (max-width: 1399px) {
    html {
        font-size: 82px;
    }
}

@media screen and (max-width: 1374px) {
    html {
        font-size: 80px;
    }
}

@media screen and (max-width: 1349px) {
    html {
        font-size: 79px;
    }
}

@media screen and (max-width: 1324px) {
    html {
        font-size: 77px;
    }
}

@media screen and (max-width: 1300px) {
    body {
        font-size: 13px;
    }

    .text {
        font-size: 13PX;
    }
}

@media screen and (max-width: 1299px) {
    html {
        font-size: 76px;
    }
}

@media screen and (max-width: 1274px) {
    html {
        font-size: 74px;
    }
}

@media screen and (max-width: 1249px) {
    html {
        font-size: 73px;
    }
}

@media screen and (max-width: 1224px) {
    html {
        font-size: 72px;
    }
}

@media screen and (max-width: 1200px) {
    .list-product li {
        width: 33.3333%;
    }
}

@media screen and (max-width: 1199px) {
    html {
        font-size: 70px;
    }
}

@media screen and (max-width: 1174px) {
    html {
        font-size: 69px;
    }
}

@media screen and (max-width: 1149px) {
    html {
        font-size: 67px;
    }
}

@media screen and (max-width: 1124px) {
    html {
        font-size: 66px;
    }
}

@media screen and (max-width: 1099px) {
    html {
        font-size: 64px;
    }
}

@media screen and (max-width: 1074px) {
    html {
        font-size: 63px;
    }
    
}

@media screen and (max-width: 1049px) {
    html {
        font-size: 61px;
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 60px;
    }
}

@media screen and (max-width: 1000px) {
    .pro-meta {
        clear: both;
    }

    .artist-l,
    .artist-r,
    .pro-img,
    .pro-meta {
        float: none;
        width: auto;
    }

    .artist-l .img {
        width: 30%;
        padding-top: 30%;
    }

    .list-showcase li {
        width: 16.66%;
    }

    .artist-r {
        margin-top: 0.3rem;
    }

    .list-thumbnails,
    .preview {
        float: none;
        margin-right: 0;
        padding-left: 0;
        width: auto;
    }

    .list-thumbnails {
        margin: 0 -0.1rem;
        text-align: center;
        font-size: 0;
    }

    .list-thumbnails li {
        width: 20%;
        display: inline-block;
        padding: 0.1rem;
    }

    .list-showcase li {
        width: 33.333%;
    }

    .slider-history {
        padding: 0;
    }

    .hd-product .hd-pad {
        position: relative;
        overflow: hidden;
        height: 3rem;
    }

    .hd-product .hd-pad:after {
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1.5rem;
        width: 100%;
    }
}

@media screen and (max-width: 769px) {
    html {
        font-size: 66px;
    }

    #banner h2 {
        font-size: 0.5rem;
    }

    #banner h5 {
        font-size: 0.2rem;
    }

    .t1 h3 {
        font-size: 0.4rem;
    }

    .about-row4 h4,
    .t1 h4 {
        font-size: 0.2rem;
    }

    .t4,
    .hd-res .item {
        font-size: 0.28rem;
    }

    .t5 h3,
    .t2 h3,
    .about-row4 h3,
    .list-social li h3 {
        font-size: 0.36rem;
    }

    .related-news .t2 {
        margin-bottom: 0.1rem;
    }

    .slider-welfare .img {
        padding-top: 60%;
    }

    .slider-welfare .txt {
        width: 50%;
    }
}

@media screen and (max-width: 760px) {
    .btn-middle,
    .btn-big {
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.36rem;
    }

    .form-box input.btn-black {
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.22rem;
    }

    .more-filter .btn,
    .my-cart .btn-sub {
        width: 100%;
        margin-bottom: 0.2rem;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.22rem;
    }

    .load-more .btn {
        width: 100%;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.22rem;
    }

    html {
        font-size: 70px;
    }

    .list-product {
        margin: 0;
    }

    .list-product li {
        width: 100%;
        float: none;
    }

    .list-product p span {
        display: block;
    }

    .hd-filter dl dt {
        float: none;
        width: auto;
        margin-right: 0;
        font-size: 0.22rem;
    }

    .modal .hd {
        height: 0.7rem;
        line-height: 0.7rem;
        font-size: 0.3rem;
    }

    .modal .bd {
        padding: 0.3rem;
    }

    .modal-confirmation h2 {
        font-size: 0.3rem;
    }

    .modal-confirmation h6 {
        font-size: 0.2rem;
    }

    .blocker {
        padding-top: 0.6rem;
    }

    .btn-sub {
        margin-top: 0.2rem;
    }

    .form-ul li {
        margin-bottom: 0;
    }

    .form-ul span {
        display: block;
        width: auto;
        float: none;
    }

    .form-ul .inp-box {
        margin-left: 0;
    }

    .form-ul .inp-yz {
        padding-right: 0.92rem;
    }

    .inp-yz .btn-z {
        width: 1rem;
        top: auto;
        bottom: 0;
    }

    .form-ul .term {
        margin-top: -0.5rem;
    }

    .side-personal {
        position: static;
        padding-top: 0;
        width: 100%;
    }

    .side-personal:after {
        display: none;
    }

    .side-nav {
        text-align: center;
    }

    .side-nav li {
        display: inline-block;
        margin-left: 0.2rem;
        margin-right: 0.2rem;
    }

    .side-nav li.on a {
        border: none;
    }

    .side-nav a {
        display: block;
        font-size: 0.24rem;
        height: auto;
        padding-bottom: 0.02rem;
    }

    .side-nav a i {
        font-size: 0.36rem;
    }

    .main-personal {
        margin-left: 0;
    }

    .account-info .hd {
        overflow: hidden;
        float: none;
        width: auto;
    }

    .account-info .hd h3 {
        float: left;
    }

    .account-info .hd img {
        float: right;
        width: 0.5rem;
    }

    .hd-service .ico {
        width: 1.5rem;
    }

    .list-development .item .back {
        opacity: 1;
        padding: 0.3rem;
    }

    .list-development .item .btn {
        position: static;
    }

    .list-development .item .front span {
        display: none;
    }

    .list-development .item .text {
        margin-bottom: 0.2rem;
    }

    .list-development .item .img {
        height: 5rem;
    }

    .slider-business .img {
        height: 5rem;
    }

    .next-service {
        margin-top: 0.3rem;
    }

    .service-box .hd {
        margin-top: 0;
        padding-top: 0.5rem;
    }

    .about-row1 .img,
    .about-row1 .txt {
        position: static;
        width: 100%;
        float: none;
    }

    .about-row1 .img {
        padding-top: 77%;
    }

    .about-row2 .wp {
        padding-right: 0;
    }

    .about-row2 .txt {
        width: 84%;
        float: right;
        background-color: rgba(255, 255, 255, 0.98);
        padding-left: 19%;
        padding-bottom: 10%;
        padding-top: 10%;
    }

    .responsibility-row1 .t4 {
        padding-left: 0;
        padding-right: 0;
    }

    .hd-res {
        float: none;
        width: 100%;
        position: relative;
        z-index: 50;
        max-width: 10rem;
        margin-bottom: 0.3rem;
    }

    .bd-res {
        float: none;
        width: 100%;
    }

    .responsibility-row3 {
        padding-left: 5%;
        padding-right: 5%;
    }

    .slider-welfare .txt {
        width: 100%;
        background: none;
    }

    .slider-welfare .img {
        padding-top: 100%;
    }

    .slider-welfare .cell {
        padding-right: 10%;
        background-color: rgba(217, 175, 113, 0.9);
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        top: 0;
    }

    .slider-welfare-nav {
        background: none;
        top: auto;
        left: 0;
        width: 100%;
        height: 0.4rem;
        line-height: 0.4rem;
        bottom: 0;
    }

    .slider-welfare-nav .slick-dots {
        margin-top: 0;
        position: static;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .slider-welfare-nav .slick-dots li {
        display: inline-block;
        vertical-align: middle;
    }

    .slider-welfare-nav .slick-dots li a {
        padding: 0;
        display: inline-block;
        font-size: 0.2rem;
    }

    .list-job .item {
        float: none;
        width: 100%;
    }

    .about-row1 .img {
        margin-bottom: 0.3rem;
        margin-left: -10%;
        margin-right: -10%;
        width: auto;
    }

    .job-detail {
        padding: 40px 0;
    }

    .job-detail .job-l,
    .job-detail .job-r {
        float: none;
        width: 100%;
    }

    .job-detail .job-l {
        margin-bottom: 30px;
    }

    .job-detail .job-l h2 {
        font-size: 24px;
    }

    .job-detail .job-r h3 {
        font-size: 16px;
    }

    .list-events .img-ovh {
        float: none;
        width: 100%;
        padding-top: 60%;
        margin-bottom: 0.2rem;
    }

    .list-events li {
        padding: 0.3rem 0;
    }

    .load-more {
        padding: 0.3rem 0 0.5rem 0;
    }

    .related-news {
        padding: 0.4rem 0;
    }

    .slider-related-news .img {
        padding-top: 60%;
    }

    .news-detail .hd .wrap1200:after {
        display: none;
    }

    .news-detail .hd {
        padding: 0.5rem 0;
    }

    .news-detail .hd .wrap1200 {
        padding-top: 0;
    }

    .share-ico {
        margin-top: 0.05rem;
    }

    .list-contact li .bd,
    .list-contact li .hd {
        display: block;
        width: auto;
        text-align: center;
        margin-right: 0;
    }

    .list-contact li .hd {
        margin-bottom: 0.3rem;
    }

    .list-contact li .hd img {
        margin-left: 0;
        margin-right: 0.2rem;
    }

    .qr-box1 {
        text-align: center;
    }

    .form-ul .form-8 {
        float: none;
        width: auto;
        margin-bottom: 0.2rem;
    }

    .sale-box {
        padding-left: 0.2rem;
    }

    .sale-box .img img {
        width: 0.9rem;
    }

    .slider-edu2 .slick-list {
        padding: 0 10% !important;
    }

    .slider-edu2 .img {
        width: 90%;
    }
}