﻿@media only screen and (max-width : 479px) {
    .Container {
        width: 300px
    }
    /*Header*/
    #header {
        position: absolute
    }

        #header.Small {
            height: 84px;
            background: rgba(17, 17, 17, 0.62)
        }

        #header > .Container {
            position: relative
        }

            #header > .Container:after {
                display: block;
                content: '';
                clear: both
            }

    .Brand {
        height: 74px;
        padding-top: 10px;
        width: 90px;
        left: 30%;
    }

        .Brand:before {
            border-width: 0 90px 30px 0
        }

        .Brand:after {
            border-width: 30px 90px 0 0
        }

    .Brand_Name img {
        width: 80%
    }

    .searchP {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin-right: 0;
        margin-top: 37px;
        width: 100%;
        -moz-transition: 0s;
        -webkit-transition: 0s;
        -o-transition: 0s;
        transition: 0s;
    }

    .stTxt {
        width: 87%
    }

    .Lang {
        float: none;
        margin: 5px 0 0 74px
    }

    .searchBtn {
        display: block
    }

    .searchP {
        display: none
    }

    .menuBtn {
        display: block;
        background: none !important;
        top: 0px;
        left: -43px;
    }

    .dropbtn {
        padding: 5px;
        font-size: 25px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        border-radius: 7px;
        background: none;
        margin-right: -29px;
        margin-top: 4px;
    }

    #Nav_Bar {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: rgba(17, 17, 17, 1);
        width: 200px
    }

    #Nav_Menu > li {
        float: none;
        margin: 0
    }

        #Nav_Menu > li > a {
            display: block;
            padding: 10px 20px
        }

    .subNav {
        position: static;
        width: auto;
        background: #3C3C3C
    }
    /*Slider*/
    #Slider .owl-controls {
        width: 300px;
        position: relative
    }

    #Slider .owl-pagination {
        right: 10px
    }

    #Slider .item {
        overflow: hidden
    }

        #Slider .item > img {
            height: 300px;
            width: auto;
            margin-right: -35%
        }
    /*Content*/
    .Home_Text > p {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
    }

    .Grid_Box > li {
        width: 100%;
        margin: 15px 0
    }

        .Grid_Box > li > div {
            padding: 15px 0 !important
        }

    .Round_Ico {
        float: none;
        margin: 0 auto 10px
    }

    .Grid_Txt {
        text-align: center;
        float: none;
        width: 100%
    }

    .Grid_Pic > li {
        width: 100%;
        margin: 15px 0
    }

    .Home_Box > li {
        width: 100%
    }

    .GTxt {
        padding: 18px
    }
    /*Footer*/
    .Contact_Info {
        text-align: left
    }

    .ci_Box:before {
        height: 1px;
        width: auto;
        left: 0;
        top: auto;
        bottom: 0
    }

    .ci_Box {
        width: 100%
    }
    /*Un No*/
    .nSearch .formTable td {
        display: inline-block
    }
    /*Contact*/
    .coLeft, .coRight {
        float: none;
        width: 105%
    }

    .h1Title {
        color: #000;
        position: relative;
        padding: 10px 0;
        font-size: 23px;
        line-height: 44px;
        margin-bottom: 10px;
    }
    /*Form*/
    .formTable td {
        display: block
    }
    /*News*/
    .newsS {
        width: 80%;
        margin: 0 auto
    }

    .nSearch .newsS td {
        display: block
    }

    .newsLst > li {
        width: 100%
    }
    /*L2*/
    .newsPicIn {
        float: none;
        width: auto;
        margin: 0 0 10px
    }

    .newsItemIn > li {
        margin: 0;
        width: 49%;
        text-align: right !important
    }

    .newsSIn td {
        display: block
    }
    /*Gallery*/
    .grid a {
        width: 100%
    }

        .grid a:nth-child(odd) {
            margin: 0
        }

    .videoAlbum > li {
        width: 100%
    }
    /*L2*/
    .incPic {
        width: 100%;
        margin-bottom: 20px
    }

    .incTxt {
        width: 100%
    }
    /*Co Info*/
    .dGoodsScrol {
        overflow: auto
    }
    /*Articles*/
    .articlePic {
        width: 100%
    }

    .articleTxt {
        width: 100%
    }

    .articleItem > li {
        width: 49%;
        text-align: right !important
    }
    /*Download*/
    .downloadList > li {
        width: 100%;
        margin: 1% 0
    }
    /*Links*/
    .links > li {
        width: 100%
    }
    /*Services*/
    .svCol1 {
        float: none;
        width: auto
    }

    .svCol2 {
        float: none;
        width: auto
    }
    /*Facilities*/
    .facilitiesLst > li {
        width: 100%
    }
}

@media only screen and (min-width : 480px) and (max-width : 719px) {
    .Container {
        width: 460px
    }
    /*Header*/
    #header {
        position: absolute
    }

        #header.Small {
            height: 84px;
            background: rgba(17, 17, 17, 0.62)
        }

        #header > .Container {
            position: relative
        }

            #header > .Container:after {
                display: block;
                content: '';
                clear: both
            }

    .Brand {
        height: 74px;
        padding-top: 10px;
        display: block !important;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        padding: 2.2%;
        float: right;
        top: -57px !important;
    }

    .Brand_Name img {
        width: 80%
    }

    .searchP {
        margin-right: 10px;
        width: 140px;
        margin-top: 7px;
        display: block !important
    }

    .stTxt {
        width: 74%
    }

    .Lang {
        float: none;
        margin: 6px 5px 0 188px
    }

    .menuBtn {
        display: block
    }

    #Nav_Bar {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: rgba(17, 17, 17, 1);
        width: 200px
    }

    #Nav_Menu > li {
        float: none;
        margin: 0
    }

        #Nav_Menu > li > a {
            display: block;
            padding: 10px 20px
        }

    .subNav {
        position: static;
        width: auto;
        background: #3C3C3C
    }
    /*Slider*/
    #Slider .owl-controls {
        width: 460px;
        position: relative
    }

    #Slider .owl-pagination {
        right: 10px
    }
    /*Content*/
    .Round_Ico {
        float: none;
        margin: 0 auto 10px
    }

    .Grid_Txt {
        text-align: center;
        float: none;
        width: 100%
    }

    .Grid_Pic > li {
        width: 100%;
        margin: 15px 0
    }

    .Home_Box > li {
        width: 100%
    }
    /*Footer*/
    .Contact_Info {
        text-align: left
    }

    .ci_Box:before {
        height: 1px;
        width: auto;
        left: 0;
        top: auto;
        bottom: 0
    }

    .Contact_Info .ci_Box:last-child:before, .Contact_Info .ci_Box:nth-child(3):before {
        display: none
    }

    .ci_Box {
        width: 49%
    }
    /*Un No*/
    .nSearch .formTable td {
        display: inline-block
    }
    /*Contact*/
    .coLeft, .coRight {
        float: none;
        width: auto
    }
    /*News*/
    .newsS {
        width: 80%;
        margin: 0 auto
    }

    .nSearch .newsS td {
        display: block
    }

    .newsLst > li {
        width: 100%
    }
    /*L2*/
    .newsPicIn {
        float: none;
        width: auto;
        margin: 0 0 10px
    }

    .newsItemIn > li {
        margin: 0 4% 0 0
    }

    .newsSIn td {
        display: block
    }
    /*Gallery*/
    .grid a {
        width: 49%
    }

        .grid a:nth-child(odd) {
            margin: 0
        }

    .grid figcaption p {
        display: none
    }

    .videoAlbum > li {
        width: 100%
    }
    /*Inco*/
    .inCoGrid > li {
        height: 450px
    }
    /*L2*/
    .incPic {
        width: 100%;
        margin-bottom: 20px
    }

    .incTxt {
        width: 100%
    }
    /*Co Info*/
    .dGoodsScrol {
        overflow: auto
    }
    /*Articles*/
    .articlePic {
        width: 100%
    }

    .articleTxt {
        width: 100%
    }
    /*Download*/
    .downloadList > li {
        width: 100%;
        margin: 1% 0
    }
    /*Links*/
    .links > li {
        width: 100%
    }
    /*Services*/
    .svCol1 {
        float: none;
        width: auto
    }

    .svCol2 {
        float: none;
        width: auto
    }
    /*Facilities*/
    .facilitiesLst > li {
        width: 49%
    }
}

@media only screen and (min-width : 720px) and (max-width : 1000px) {
    .Container {
        width: 700px
    }
    /*Header*/
    #header {
        position: absolute
    }

        #header.Small {
            height: 84px;
            background: rgba(17, 17, 17, 0.62)
        }

        #header > .Container {
            position: relative
        }

            #header > .Container:after {
                display: block;
                content: '';
                clear: both
            }

    .Brand {
        height: 74px;
        padding-top: 10px;
    }

    .Brand_Name img {
        width: 80%
    }

    .menuBtn {
        display: block
    }

    #Nav_Bar {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: rgba(17, 17, 17, 1);
        width: 200px
    }

    #Nav_Menu > li {
        float: none;
        margin: 0
    }

        #Nav_Menu > li > a {
            display: block;
            padding: 10px 20px
        }

    .subNav {
        position: static;
        width: auto;
        background: #3C3C3C
    }

    .searchP {
        display: block !important
    }
    /*Slider*/
    #Slider .owl-controls {
        width: 700px;
        position: relative
    }

    #Slider .owl-pagination {
        right: 10px
    }
    /*Content*/
    .Round_Ico {
        float: none;
        margin: 0 auto 10px
    }

    .Grid_Txt {
        text-align: center;
        float: none;
        width: 100%
    }

    .GTxt {
        padding: 15px
    }

        .GTxt > p {
            display: none
        }
    /*Form*/
    .txtBox {
        min-width: 10px
    }
    /*News*/
    .newsLst > li {
        width: 49.6%
    }
    /*Gallery*/
    .grid a {
        width: 49%
    }

        .grid a:nth-child(odd) {
            margin: 0
        }

    .videoAlbum > li {
        width: 49%
    }
    /*Inco*/
    .inCoGrid > li {
        height: 410px
    }
    /*L2*/
    .incPic {
        width: 35%
    }

    .incTxt {
        width: 60%
    }
    /*Co Info*/
    .dGoodsScrol {
        overflow: auto
    }
    /*Download*/
    .downloadList > li {
        width: 47%
    }
    /*Facilities*/
    .facilitiesLst > li {
        width: 49%
    }
}

@media only screen and (min-width : 1001px) and (max-width : 1219px) {
    .Container {
        width: 980px
    }
    /*Header*/
    .Brand {
        height: 74px;
        padding-top: 10px;
        width: 180px
    }

        .Brand:before {
            border-width: 0 90px 30px 0
        }

        .Brand:after {
            border-width: 30px 90px 0 0
        }

    .Brand_Name img {
        width: 80%
    }

    .shadow-block1, .shadow-block2 {
        width: 95px;
        transform: rotate(17deg)
    }

    .shadow-block2 {
        bottom: -30px;
        transform: rotate(342deg)
    }

    .searchP {
        margin-right: 10px;
        width: 140px;
        display: block !important
    }

    .stTxt {
        width: 74%
    }

    #header.Small {
        height: 55px;
        background: #202020
    }

        #header.Small #Nav_Menu > li > a {
            padding: 15px 7px 16px
        }

        #header.Small .Brand {
            padding: 4px 0 0;
            height: 51px
        }

        #header.Small .Brand_Name img {
            height: 51px;
            width: auto
        }

        #header.Small .searchP {
            margin-top: 12px
        }

        #header.Small .Lang {
            margin-top: 12px
        }
    /*Nav*/
    #Nav_Bar {
        display: block !important
    }

    #Nav_Menu {
        font-size: 14px
    }

        #Nav_Menu > li > a {
            padding: 30px 7px
        }
    /*Content*/
    .Grid_Txt {
        width: 63%
    }

    .GTxt > h4 {
        margin-bottom: 0
    }
    /*Slider*/
    #Slider .owl-controls {
        width: 980px;
        position: relative
    }

    #Slider .owl-pagination {
        right: 10px
    }
    /*News*/
    .newsS .txtBox {
        min-width: 200px
    }

    .newsItem {
        font-size: 10px
    }
    /*Gallery*/
    .grid a {
        width: 33%
    }

        .grid a:nth-child(odd) {
            margin: 0
        }

    .videoAlbum > li > div {
        margin: 5px
    }
    /*Inco*/
    .inCoGrid > li {
        height: 225px
    }
    /*Co Info*/
    .dGoodsScrol {
        overflow: auto
    }
}

@media only screen and (min-width : 1220px) {
    .Container {
        width: 1170px
    }
    /*Header*/
    #Nav_Bar {
        display: inline-block !important
    }

    #header.Small {
        height: 55px;
        background: #374d5c
    }

        #header.Small .dropdown {
            position: relative;
            float: right;
            padding: 1%;
        }

        #header.Small #Nav_Menu > li > a {
            padding: 15px 9px 16px
        }

        #header.Small .Brand {
            padding: 4px 0 0;
            height: 51px;
            width: 150px;
        }

        #header.Small .Brand_Name img {
            height: 51px;
            width: auto
        }

        #header.Small .searchP {
            margin-top: 12px
        }

        #header.Small .Lang {
            margin-top: 12px
        }

    .searchP {
        display: block !important
    }
    /*Slider*/
    #Slider .owl-controls {
        width: 100%;
        position: relative
    }

    #Slider .owl-pagination {
        right: 50px
    }
}
