.page-main .section-introduce .container-picture .container-points .point *:not(i){
}
@media only screen and (max-width: 1650px){
    .page-product .section-cure .swiper::before, 
    .page-product .section-cure .swiper::after{
        width: calc((100% - 1140px)/2);
    }
    .page-product .section-click h2:first-child {
    color: #ffffff;
    align-items: end !important;
}
}
/* -------- bootstrap -  1400=< xxl */
@media only screen and (min-width: 1400px){
    /* --------------------------------------------- */
    /* .page-choose-dr .section-address */
    /* --------------------------------------------- */
    .page-choose-dr .section-address #map{
        height: 800px;
    }
}
/* -------- bootstrap -  1200=< xl <1400 */
@media only screen and (max-width: 1399px){
    /* ------------------ public ------------------ */
    a,p,label,*{
        font-size: 15px !important;
    }
    h1{
        font-size: 27px;
    }
    h2{
        font-size: 23px;
    }
    h3{
        font-size: 19px;
    }
    h4{
        font-size: 17px;
    }
    h5{
        font-size: 15px;
    }
    h6{
        font-size: 14px;
    }
    /* ------------------ public ------------------ */
    /* --------------------------------------------- */
    /* .page-main */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-introduce .container-picture .point-1{
        top: 205px;
        left: 260px;
    }
    .page-main .section-introduce .container-picture .point-2{
        top: 231px;
        right: 313px;
    }
    .page-main .section-introduce .container-picture .point-3{
        top: 243px;
        left: 260px;
    }
    .page-main .section-introduce .container-picture .point-4{
        top: 296px;
        right: 272px;
    }
    .page-main .section-introduce .container-picture .point-5{
        top: 306px;
        right: 315px;
    }
    .page-main .section-introduce .container-picture .point-6{
    top: 333px;
    right: 251px;
    }
    .page-main .section-introduce .container-picture .point-7{
        top: 373px;
        right: 279px;
    }
    .page-main .section-introduce .container-picture .point-8{
        top: 376px;
        right: 333px;
    }
    .page-main .section-introduce .container-picture .point-9{
        top: 405px;
        right: 294px;
    }
    .page-main .section-introduce .container-picture .point-10{
        top: 421px;
        right: 345px;
    }
    .page-main .section-introduce .container-picture .point-11{
        top: 446px;
        left: 260px;
    }
    .page-main .section-introduce .container-picture .point-12{
        top: 470px;
        right: 177px;
    }
    .page-main .section-introduce .container-picture .point-13{
        top: 490px;
        right: 366px;
    }
    .page-main .section-introduce .container-picture .point-14{
        top: 558px;
        left: 260px;
    }
    .page-main .section-introduce .container-picture .container-points .point::before{
    }
    .page-main .section-introduce .container-picture .container-points .point.selected::before{
    }
    .page-main .section-introduce .container-picture .point h3{
    }
    /* --------------------------------------------- */
    /* .page-main */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* .page-choose-dr .section-address */
    /* --------------------------------------------- */
    .page-choose-dr .section-address #map{
        height: 600px;
    }
    .page-product .section-usage .nav a h5{
        padding: 0 25px !important;
    }
    .page-main .section-introduce .container-picture .point-15 {
    top: 607px;
    left: 336px;
}
}
@media only screen and (max-width: 1360px){}
@media only screen and (max-width: 1280px){}
/* -------- bootstrap -  992=< lg <1200 */
@media only screen and (max-width: 1199px){
    /* ------------------ public ------------------ */
    a,p,label,*{
        font-size: 14px !important;
    }
    h1{
        font-size: 25px;
    }
    h2{
        font-size: 21px;
    }
    h3{
        font-size: 18px;
    }
    h4{
        font-size: 16px;
    }
    h5{
        font-size: 14px;
    }
    h6{
        font-size: 14px;
    }
    /* ------------------ public ------------------ */
    /* --------------------------------------------- */
    /* .page-main */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-introduce .container-picture .container-points .point .btn{
        width: 10px;
        height: 10px;
    }
    .page-main .section-introduce .container-picture .point-1{
        top: 174px;
        left: 225px;
    }
    .page-main .section-introduce .container-picture .point-2{
        top: 200px;
        right: 262px;
    }
    .page-main .section-introduce .container-picture .point-3{
        top: 209px;
        left: 225px;
    }
    .page-main .section-introduce .container-picture .point-4{
        top: 255px;
        right: 225px;
    }
    .page-main .section-introduce .container-picture .point-5{
        top: 265px;
        right: 263px;
    }
    .page-main .section-introduce .container-picture .point-6{
        top: 293px;
        right: 216px;
    }
    .page-main .section-introduce .container-picture .point-7{
        top: 315px;
        right: 234px;
    }
    .page-main .section-introduce .container-picture .point-8{
        top: 316px;
        right: 278px;
    }
    .page-main .section-introduce .container-picture .point-9{
        top: 341px;
        right: 244px;
    }
    .page-main .section-introduce .container-picture .point-10{
        top: 356px;
        right: 291px;
    }
    .page-main .section-introduce .container-picture .point-11{
        top: 370px;
        left: 225px;
    }
    .page-main .section-introduce .container-picture .point-12{
        top: 397px;
        right: 148px;
    }
    .page-main .section-introduce .container-picture .point-13{
        top: 411px;
        right: 308px;
    }
    .page-main .section-introduce .container-picture .point-14{
        top: 457px;
        left: 225px;
    }
    .page-main .section-introduce .container-picture .container-points .point.selected:hover:before{
        width: 70px;
    }
    /* all */
    .page-main .section-introduce .container-picture .point h2{
        left: 95px;
    }
    .page-main .section-introduce .container-picture .point h3{
        left: 122px;
    }
    /* .point-12 */
    .page-main .section-introduce .container-picture .point-12 h2{
        left: 10px !important;
    }
    .page-main .section-introduce .container-picture .point-12 h3{
        left: 115px !important;
    }
    /* --------------------------------------------- */
    /* .page-main .section-comments */
    /* --------------------------------------------- */
    .page-main .section-comments .swiper::before, 
    .page-main .section-comments .swiper::after,
    .page-product .section-comments .swiper::before, 
    .page-product .section-comments .swiper::after{
        width: 12%;
    }
    /* --------------------------------------------- */
    /* .page-product .section-cure */
    /* --------------------------------------------- */
    .page-product .section-cure .swiper::before, 
    .page-product .section-cure .swiper::after{
        width: calc((100% - 960px)/2);
    }
    /* --------------------------------------------- */
    /* .page-pages .section-smile */
    /* --------------------------------------------- */
    .page-pages .section-smile img{
        height: 400px;
    }
    /* --------------------------------------------- */
    /* .page-blog .section-blog */
    /* --------------------------------------------- */
    .page-blog .section-blog .blog img{
        width: 240px;
        height: 240px;
    }
    /* ----------------------------------- */
    /*    page-blog-show - section-blog    */
    /* ----------------------------------- */
    .page-blog-show .section-blog img{
        height: 500px;
    }
    .page-blog-show .section-blog .container-img img{
        height: 460px;
    }
    /* ----------------------------------- */
    /*    page-event-show - section-blog    */
    /* ----------------------------------- */
    .page-event-show .section-event img{
        height: 500px;
    }
    .page-event-show .section-event .container-img img{
        height: 460px;
    }
    /* ----------------------------------- */
    /*  page-blog-show - section-hashtag   */
    /* ----------------------------------- */
    .page-blog-show .section-hashtag .container::before{
        clip-path: ellipse(100% 100% at 50% 0);
    }
    .page-blog-show .section-hashtag form input{
        width: 120px;
        height: 120px;
    }
    /* ----------------------------------- */
    /*   page-product - section-district   */
    /* ----------------------------------- */
    .page-product .section-district .tab-contents{
        height: 500px;
    }
    .page-product .section-district .tab-contents .tab-content{
        height: 450px;
    }
    /* --------------------------------------------- */
    /* .page-choose-dr .section-address */
    /* --------------------------------------------- */
    .page-choose-dr .section-address #map{
        height: 550px;
    }
}
/* tablet */
@media only screen and (max-width: 1024px){}
@media only screen and (min-width: 992px){
    .navbar-nav{
        display: flex !important;
    }
    .menuIcon{
        display: none;
    }
}
/* -------- bootstrap -  768=< md <992  */
@media only screen and (max-width: 991px){
    /* ------------------ public ------------------ */
    a,p,label,*{
        font-size: 14px !important;
    }
    h1{
        font-size: 25px;
    }
    h2{
        font-size: 21px;
    }
    h3{
        font-size: 17px;
    }
    h4{
        font-size: 15px;
    }
    h5{
        font-size: 13px;
    }
    h6{
        font-size: 14px;
    }
    /* ------------------ header ------------------ */
    .navbar-nav{
        right: 0;
        top: 80px;
        transform: none;
        overflow: visible;
        position: absolute;
        width: 100% !important;
        height: calc(100vh - 80px) !important;
    }
    .navbar-nav::before{
        left: 0;
        right: -50%;
        content: '';
        width: 200%;
        height: 100%;
        position: absolute;
        background-color: #233746;
    }
    .navbar-nav li{
        align-items: flex-start;
        transition: all .25s ease-in-out;
    }
    .navbar-nav li a{
        color: white;
        margin: 0;
    }
    .nav-item .dropdown{
        margin: 10px 0;
        background: transparent;
    }
    .nav-item .dropdown > .nav-item{
        justify-content: center;
    }
    .nav-item .dropdown > .nav-item > .nav-link::before{
        display: none;
    }
    .nav-item .dropdown > .nav-item > .nav-link{
        margin: 0;
        transform: none;
    }
    .nav-item .dropdown > .nav-item > .nav-link{
    }
    header .containerSearch{
        margin-left: calc(var(--bs-gutter-x) * .5);
    }
    header .containerSearch.selected, 
    header .containerSearch.typed.selected, 
    header .containerSearch.typed3.selected{
        width: calc(100% - 100px);
    }
    .navbar-nav{
        opacity: 0;
        transform: translateY(-100%);
        transition: all .25s ease-in-out;
    }
    .navbar-nav.open{
        opacity: 1;
        transform: translateY(0);
    }
    .navbar-nav .nav-link{
        color: white !important;
    }
    /* ------------------ public ------------------ */
    /* --------------------------------------------- */
    /* .page-main */ 
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-introduce{
        margin-top: 0 !important;
    }
    .page-main .section-introduce::before{
        display: none;
    }
    .page-main .section-introduce .container-picture .point-1{
        top: 195px;
        left: 245px;
    }
    .page-main .section-introduce .container-picture .point-2{
        top: 213px;
        right: 292px;
    }
    .page-main .section-introduce .container-picture .point-3{
        top: 229px;
        left: 245px;
    }
    .page-main .section-introduce .container-picture .point-4{
        top: 279px;
        right: 254px;
    }
    .page-main .section-introduce .container-picture .point-5{
        top: 296px;
        right: 293px;
    }
    .page-main .section-introduce .container-picture .point-6{
        top: 316px;
        right: 237px;
    }
    .page-main .section-introduce .container-picture .point-7{
        top: 346px;
        right: 264px;
    }
    .page-main .section-introduce .container-picture .point-8{
        top: 351px;
        right: 306px;
    }
    .page-main .section-introduce .container-picture .point-9{
        top: 383px;
        right: 278px;
    }
    .page-main .section-introduce .container-picture .point-10{
        top: 395px;
        right: 323px;
    }
    .page-main .section-introduce .container-picture .point-11{
        top: 411px;
        left: 245px;
    }
    .page-main .section-introduce .container-picture .point-12{
        top: 441px;
        right: 167px;
    }
    .page-main .section-introduce .container-picture .point-13{
        top: 459px;
        right: 342px;
    }
    .page-main .section-introduce .container-picture .point-14{
        top: 516px;
        left: 245px;
    }
    .page-main .section-introduce .container-picture .container-points .point.selected:hover:before{
        width: 70px;
    }
    .page-main .section-introduce .container-picture .container-points .point::before{
        left: 15px;
    }
    /* all */
    .page-main .section-introduce .container-picture .point h2{
        left: 90px;
    }
    .page-main .section-introduce .container-picture .point h3{
        left: 117px;
    }
    /* .point-12 */
    .page-main .section-introduce .container-picture .point-12 h2{
        left: 10px !important;
    }
    .page-main .section-introduce .container-picture .point-12 h3{
        left: 115px !important;
    }
    /* --------------------------------------------- */
    /* .page-main .section-questions */
    /* --------------------------------------------- */
    .page-main .section-questions::before{
        display: none;
    }
    /* --------------------------------------------- */
    /* .page-main .section-comments */
    /* --------------------------------------------- */
    .page-main .section-comments .swiper::before, 
    .page-main .section-comments .swiper::after,
    .page-product .section-comments .swiper::before, 
    .page-product .section-comments .swiper::after{
        width: 5%;
    }
    /* --------------------------------------------- */
    /* .page-product .section-cure */
    /* --------------------------------------------- */
    .page-product .section-cure .swiper::before, 
    .page-product .section-cure .swiper::after{
        width: calc((100% - 720px)/2);
    }
    /* ----------------------------------- */
    /*   page-product - section-district   */
    /* ----------------------------------- */
    .page-product .section-district .tab-contents{
        height: 400px;
    }
    .page-product .section-district .tab-contents .tab-content{
        height: 350px;
    }
    .page-product .section-usage .nav a h5{
        padding: 0 9px !important;
    }
    /* --------------------------------------------- */
    /* .page-about-us .section-filler */
    /* --------------------------------------------- */
    .page-about-us .section-filler{
        clip-path: ellipse(100% 100% at 50% 100%);
    }
    /* --------------------------------------------- */
    /* .page-pages .section-smile */
    /* --------------------------------------------- */
    .page-pages .section-smile img{
        height: 320px;
    }
    /* --------------------------------------------- */
    /* .page-blog .section-blog */
    /* --------------------------------------------- */
    .page-blog .section-blog .blog img{
        width: 190px;
        height: 190px;
    }
    /* ----------------------------------- */
    /*    page-blog-show - section-blog    */
    /* ----------------------------------- */
    .page-blog-show .section-blog img{
        height: 370px;
    }
    .page-blog-show .section-blog .container-img img{
        height: 330px;
    }
    /* ----------------------------------- */
    /*    page-event-show - section-blog    */
    /* ----------------------------------- */
    .page-event-show .section-event img{
        height: 370px;
    }
    .page-event-show .section-event .container-img img{
        height: 330px;
    }
    /* ----------------------------------- */
    /*  page-blog-show - section-hashtag   */
    /* ----------------------------------- */
    .page-blog-show .section-hashtag form input{
        width: 100px;
        height: 100px;
    }
    /* ----------------------------------- */
    /*     page-event - section-events     */
    /* ----------------------------------- */
    .page-event .section-events img{
        height: 240px;
    }
    /* --------------------------------------------- */
    /* en header */
    /* --------------------------------------------- */
    .en-body header .icon-help, 
    .en-body header .icon-fa{
        display: none;
    }
    .en-body header .containerSearch{
        right: 10px;
    }
    /* --------------------------------------------- */
    /* .page-choose-dr .section-address */
    /* --------------------------------------------- */
    .page-choose-dr .section-address #map{
        height: 500px;
    }
}
/* -------- bootstrap -  576=< sm <768 */
@media only screen and (max-width: 767px){
    /* ------------------ public ------------------ */
    /* --------------------------------------------- */
    /* header */
    /* --------------------------------------------- */
    a,p,label,*{
        font-size: 14px !important;
    }
    h1{
        font-size: 24px;
    }
    h2{
        font-size: 20px;
    }
    h3{
        font-size: 16px;
    }
    h4{
        font-size: 14px;
    }
    h5{
        font-size: 14px;
    }
    h6{
        font-size: 13px;
    }
    /* --------------------------------------------- */
    /* footer */
    /* --------------------------------------------- */
    footer .footer-head h4{
        padding: 0;
    }
    footer .footer-head a:not(.btn-scroll){
        margin: 0;
    }
    footer .footer-head .btn-scroll{
        top: 0;
        transform: translateY(-25px);
    }
    footer .footer-head .btn-scroll::before,
    footer .footer-head .btn-scroll::after{
        width: 70px;
        height: 70px;
    }
    footer .footer-head::before{
        display: none;
    }
    /* ------------------ public ------------------ */
    /* --------------------------------------------- */
    /* .page-main */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-introduce .container-picture .point-1{
        top: 138px;
        left: 185px;
    }
    .page-main .section-introduce .container-picture .point-2{
        top: 153px;
        right: 216px;
    }
    .page-main .section-introduce .container-picture .point-3{
        top: 163px;
        left: 185px;
    }
    .page-main .section-introduce .container-picture .point-4{
        top: 201px;
        right: 186px;
    }
    .page-main .section-introduce .container-picture .point-5{
        top: 211px;
        right: 218px;
    }
    .page-main .section-introduce .container-picture .point-6{
        top: 230px;
        right: 176px;
    }
    .page-main .section-introduce .container-picture .point-7{
        top: 250px;
        right: 192px;
    }
    .page-main .section-introduce .container-picture .point-8{
        top: 252px;
        right: 227px;
    }
    .page-main .section-introduce .container-picture .point-9{
        top: 277px;
        right: 204px;
    }
    .page-main .section-introduce .container-picture .point-10{
        top: 285px;
        right: 237px;
    }
    .page-main .section-introduce .container-picture .point-11{
        top: 294px;
        left: 185px;
    }
    .page-main .section-introduce .container-picture .point-12{
        top: 318px;
        right: 124px;
    }
    .page-main .section-introduce .container-picture .point-13{
        top: 329px;
        right: 242px;
    }
    .page-main .section-introduce .container-picture .point-14{
        top: 366px;
        left: 185px;
    }
    .page-main .section-introduce .container-picture .container-points .point::before{
        left: 15px;
    }
    .page-main .section-introduce .container-picture .container-points .point.selected:hover:before{
        width: 45px !important;
    }
    /* all */
    .page-main .section-introduce .container-picture .point h2{
        left: 65px;
    }
    .page-main .section-introduce .container-picture .point h3{
        left: 93px;
    }
    /* .point-12 */
    .page-main .section-introduce .container-picture .point-12 h2{
        left: -20px !important;
    }
    .page-main .section-introduce .container-picture .point-12 h3{
        left: 80px !important;
    }
    /* --------------------------------------------- */
    /* .page-main .section-events */
    /* --------------------------------------------- */
    .page-main .section-events .swiper::before, 
    .page-main .section-events .swiper::after{
        width: 100px;
    }
    
    /* --------------------------------------------- */
    /* .page-main .section-news */
    /* --------------------------------------------- */
    .page-main .section-news .swiper-slide,
    .page-product .section-news .swiper-slide{
        height: 460px;
    }
    /* --------------------------------------------- */
    /* .page-main .section-comments */
    /* --------------------------------------------- */
    .page-main .section-comments .swiper::before, 
    .page-main .section-comments .swiper::after,
    .page-product .section-comments .swiper::before, 
    .page-product .section-comments .swiper::after{
        width: 30%;
    }
    .page-main .section-comments .swiper-slide:not(.swiper-slide-active),
    .page-product .section-comments .swiper-slide:not(.swiper-slide-active){
        opacity: 0;
    }
    /* --------------------------------------------- */
    /* .page-product .section-usage */
    /* --------------------------------------------- */
    .page-product .section-usage .nav a h5{
        padding: 0 40px !important;
    }
    /* --------------------------------------------- */
    /* .page-product .section-filler */
    /* --------------------------------------------- */
    .page-product .section-filler::before{
        height: 100%;
    }
    .page-product .section-filler .container-img{
        position: relative;
    }
    .page-product .section-filler .summary{
        bottom: unset;
    }
    /* --------------------------------------------- */
    /* .page-product .section-information */
    /* --------------------------------------------- */
    .page-product .section-information .container-row{
        justify-content: center;
    }
    /* --------------------------------------------- */
    /* .page-product .section-district */
    /* --------------------------------------------- */    
    .page-product .section-district .mySwiper .swiper-wrapper {
        flex-direction: row;
    }
    .page-product .section-district .mySwiper .swiper-slide{
        transform: none;
    }
    .page-product .section-district .tab-contents .tab-content{
        border-radius: 10px;
    }
    .page-product .section-district .container-slider{
        height: 250px;
    }
    .page-product .section-district .container-slider .swiper-slide img{
        height: 70%;
        margin-bottom: 5%;
    }
    .page-product .section-district .container-slider .swiper::before, 
    .page-product .section-district .container-slider .swiper::after{
        top: 0;
        right: 0;
        bottom: 0;
        width: 50%;
        content: '';
        height: 100%;
        position: absolute;
        background-image: linear-gradient(to left,#d7d9db 0%, transparent,transparent);
        z-index: 2;
    }
    .page-product .section-district .container-slider .swiper::after{
        left: 0;
        right: unset;
        transform: rotate(180deg);
    }    
    .page-product .section-district .swiper-button-next, 
    .page-product .section-district .swiper-button-prev{
        top: -10%;
        left: 0;
        bottom: 0;
        right: unset;
    }
    .page-product .section-district .swiper-button-next{
        right: 0;
        left: unset;
    }
    @keyframes backColor {
        0%,100% {
          transform: scale(1);
        }
        50% {
          transform: scale(.5);
        }
      }
    /* --------------------------------------------- */
    /* .page-product .section-cure */
    /* --------------------------------------------- */
    .page-product .section-cure .swiper::before, 
    .page-product .section-cure .swiper::after{
        width: calc((100% - 540px)/2);
    }
    /* --------------------------------------------- */
    /* .page-product .section-click */
    /* --------------------------------------------- */
    .page-product .section-click h2{
        font-size: 24px !important;
    }
    /* --------------------------------------------- */
    /* .page-about-us .sec-left-pic */
    /* --------------------------------------------- */
    .page-about-us .section-header h1,
    .page-about-us .section-header p
    {
        color: white;
    }
    .page-about-us .section-header h1 span{
        background-color: white;
        background-image: url(../images/icon-n-light.svg);
    }
    
    /* --------------------------------------------- */
    /* .page-combinatory .sec-left-pic */
    /* --------------------------------------------- */
    .page-combinatory .section-header .row div{
        background-color: #233746;
    }
    .page-combinatory .section-header .row div::before, 
    .page-combinatory .section-header .row div::after{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #233746;
        z-index: 0;
    }
    .page-combinatory .section-header .row div::before {
        transform: translateX(-50%);
    }
    .page-combinatory .section-header .row div::after {
        transform: translateX(50%);
    }
    .page-combinatory .section-header h1,
    .page-combinatory .section-header p
    {
        color: white;
    }
    .page-combinatory .section-header h1 span{
        background-color: white;
        background-image: url(../images/icon-n-light.svg);
    }
    /* --------------------------------------------- */
    /* .page-about-us .section-header */
    /* --------------------------------------------- */
    .page-about-us .section-header .row div{
        background-color: #233746;
        align-items: center !important;
    }
    .page-about-us .section-header .row div *{
        z-index: 1;
    }
    .page-about-us .section-header::after{
        display: none;
    }
    .page-about-us .section-header .row div::before,
    .page-about-us .section-header .row div::after{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #233746;
        z-index: 0;
    }
    .page-about-us .section-header .row div::before{
        transform: translateX(-50%);
    }
    .page-about-us .section-header .row div::after{
        transform: translateX(50%);
    }
    /* --------------------------------------------- */
    /* .page-about-us .section-filler */
    /* --------------------------------------------- */
    .page-about-us .section-filler .numbers-container{
        justify-content: space-between;
    }
    .page-about-us .section-filler .numbers-container::before, 
    .page-about-us .section-filler .numbers-container::after{
        display: none;
    }
    .page-about-us .section-filler .numbers-container .number{
        height: 200px;
    }
    .page-about-us .section-filler .numbers-container .number:last-child{
        height: 140px;
        flex-direction: row;
        align-items: center;
    }
    /* --------------------------------------------- */
    /* .page-contact-us .section-address */
    /* --------------------------------------------- */
    .page-contact-us .section-address .img-container{
        transform: none;
    }
    /* --------------------------------------------- */
    /* .page-pages .section-header */
    /* --------------------------------------------- */
    .page-pages .section-header .row div{
        background-color: #233746;
    }
    .page-pages .section-header .row div *{
        z-index: 1;
    }
    .page-pages .section-header::after{
        display: none;
    }
    .page-pages .section-header .row div::before,
    .page-pages .section-header .row div::after{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #233746;
        z-index: 0;
    }
    .page-pages .section-header .row div::before{
        transform: translateX(-50%);
    }
    .page-pages .section-header .row div::after{
        transform: translateX(50%);
    }
    /* --------------------------------------------- */
    /* .page-about-us .sec-left-pic */
    /* --------------------------------------------- */
    .page-pages .section-header h1,
    .page-pages .section-header p
    {
        color: white;
    }
    .page-pages .section-header h1 span{
        background-color: white;
        background-image: url(../images/icon-n-light.svg);
    }
    /* --------------------------------------------- */
    /* .page-pages .section-smile */
    /* --------------------------------------------- */
    .page-pages .section-smile img{
        height: 260px;
    }
    /* --------------------------------------------- */
    /* .page-blog .section-blog */
    /* --------------------------------------------- */
    .page-blog .section-blog .blog img{
        width: 130px;
        height: 130px;
    }
    /* ----------------------------------- */
    /*    page-blog-show - section-blog    */
    /* ----------------------------------- */
    .page-blog-show .section-blog img{
        height: 270px;
    }
    .page-blog-show .section-blog .container-img img{
        height: 230px;
    }
    /* ----------------------------------- */
    /*    page-event-show - section-event    */
    /* ----------------------------------- */
    .page-event-show .section-event img{
        height: 270px;
    }
    .page-event-show .section-event .container-img img{
        height: 230px;
    }
    /* ----------------------------------- */
    /*    page-blog-show - section-hashtag    */
    /* ----------------------------------- */
    .page-blog-show .section-hashtag form input{
        width: 80px;
        height: 80px;
    }
    .page-main .section-comments .container{
        clip-path: ellipse(100% 100% at 50% 0%);
    }
    /* --------------------------------------------- */
    /* .page-choose-dr .section-address */
    /* --------------------------------------------- */
    .page-choose-dr .section-address #map{
        height: 400px;
    }
}
/* -------- bootstrap -        xs <576  */
@media only screen and (max-width: 575px){
    /* ------------------ public ------------------ */
    /* --------------------------------------------- */
    /* header */
    /* --------------------------------------------- */
    a,p,label,*{
        font-size: 14px !important;
    }
    h1{
        font-size: 23px;
    }
    h2{
        font-size: 19px;
    }
    h3{
        font-size: 15px;
    }
    h4{
        font-size: 13px;
    }
    h5{
        font-size: 13px;
    }
    h6{
        font-size: 13px;
    }
    /* --------------------------------------------- */
    /* footer */
    /* --------------------------------------------- */
    footer .footer-head{
        border-radius: 0;
    }
    /* --------------------------------------------- */
    /* .page-main */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-introduce .container-picture .point-1{
        top: 31%;
        left: 35%;
    }
    .page-main .section-introduce .container-picture .point-2{
        top: 34%;
        right: 41%;
    }
    .page-main .section-introduce .container-picture .point-3{
        top: 37%;
        left: 35%;
    }
    .page-main .section-introduce .container-picture .point-4{
        top: 45%;
        right: 35%;
    }
    .page-main .section-introduce .container-picture .point-5{
        top: 48%;
        right: 41%;
    }
    .page-main .section-introduce .container-picture .point-6{
        top: 52%;
        right: 34%;
    }
    .page-main .section-introduce .container-picture .point-7{
        top: 56%;
        right: 37%;
    }
    .page-main .section-introduce .container-picture .point-8{
        top: 56%;
        right: 44%;
    }
    .page-main .section-introduce .container-picture .point-9{
        top: 61%;
        right: 39%;
    }
    .page-main .section-introduce .container-picture .point-10{
        top: 63%;
        right: 46%;
    }
    .page-main .section-introduce .container-picture .point-11{
        top: 65%;
        left: 35%;
    }
    .page-main .section-introduce .container-picture .point-12{
        top: 71%;
        right: 24%;
    }
    .page-main .section-introduce .container-picture .point-13{
        top: 73%;
        right: 49%;
    }
    .page-main .section-introduce .container-picture .point-14{
        top: 80%;
        left: 35%;
    }
    .page-main .section-introduce .container-picture .container-points .point::before{
        left: 15px;
    }
    .page-main .section-introduce .container-picture .container-points .point.selected:hover:before{
        width: 3vw !important;
    }
    /* all */
    .page-main .section-introduce .container-picture .point h2{
        left: 7vw;
        font-size: 10px;
    }
    .page-main .section-introduce .container-picture .point h3{
        top: 20px;
        left: 10vw;
        font-size: 10px;
    }
    /* .point-12 */
    .page-main .section-introduce .container-picture .point-12 h2{
        left: 0vw !important;
    }
    .page-main .section-introduce .container-picture .point-12 h3{
        left: 9vw !important;
    }
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-features .container-features{
        width: 376px;
        height: 376px;
    }
    .page-main .section-features .container-features .feature{
        width: 130px;
        height: 130px;
    }
    .page-main .section-features .container-features .feature span{
        border-bottom: 0;
    }
    .page-main .section-features .container-features .feature span::before{
        font-size: 60px;
    }
    /* --------------------------------------------- */
    /* .page-main .section-events */
    /* --------------------------------------------- */
    .page-main .section-events .swiper::before, 
    .page-main .section-events .swiper::after{
        width:50px;
    }
    /* --------------------------------------------- */
    /* .page-main .section-news */
    /* --------------------------------------------- */
    .page-main .section-news .swiper-slide,
    .page-product .section-news .swiper-slide{
        height: 440px;
    }
    /* --------------------------------------------- */
    /* .page-main .section-comments */
    /* --------------------------------------------- */
    .page-main .section-comments .swiper::before, 
    .page-main .section-comments .swiper::after,
    .page-product .section-comments .swiper::before, 
    .page-product .section-comments .swiper::after{
        width: 25%;
    }
    /* --------------------------------------------- */
    /* .page-... .sec-left-pic */
    /* --------------------------------------------- */
    .sec-left-pic .container{
		margin-top:0;
		height: 7vh;
    	padding-top: 1vh !important;
    	padding-bottom: 1vh !important;
        background-color: #233746;
        position: relative !important;
    }
    .sec-left-pic::after{
        background-color: rgb(256, 256, 256,.3) !important;
    }
    /* --------------------------------------------- */
    /* .page-contact-us .sec-left-pic */
    /* --------------------------------------------- */
    .page-contact-us .section-header h1,
    .page-contact-us .section-header p
    {
        color: white;
    }
    .page-contact-us .section-header h1 span{
        background-color: white;
        background-image: url(../images/icon-n-light.svg);
    }
    /* --------------------------------------------- */
    /* .page-product .section-cure */
    /* --------------------------------------------- */
    .page-product .section-usage .nav a h5{
        padding: 0 7px !important;
    }
    .page-product .section-cure .swiper::before, 
    .page-product .section-cure .swiper::after{
        width: 0;
    }
    /* --------------------------------------------- */
    /* .page-product .section-click */
    /* --------------------------------------------- */
    .page-product .section-click h2{
        font-size: 20px !important;
    }
    /* --------------------------------------------- */
    /* .page-product .section-comments */
    /* --------------------------------------------- */
    .page-product .section-comments .container,
    .page-product .section-suggestion{
        clip-path: ellipse(140% 98% at 50% 0%);
    }
    /* --------------------------------------------- */
    /* .page-product .section-district */
    /* --------------------------------------------- */
    .page-product .section-district .tab-contents .tab-content{
        border-radius: 8px;
    }
    .page-product .section-district .container-slider{
        height: 50vw;
    }
    .page-product .section-district .container-slider .swiper-slide img{
        height: 80%;
    }
    .page-product .section-district .tab-button{
        margin: 0 4px;
        padding: 10px 7px !important;
    }
    /* --------------------------------------------- */
    /* .page-about-us .section-filler */
    /* --------------------------------------------- */
    .page-about-us .section-filler{
        clip-path: ellipse(120% 100% at 50% 100%);
    }
    /* --------------------------------------------- */
    /* .page-question .section-faq */
    /* --------------------------------------------- */
    .page-question .section-faq .question{
        padding: 24px 0px 24px 15px;
    }
    .page-question .section-faq .question::after{
        left: 0;
        font-size: 16px;
    }
    /* --------------------------------------------- */
    /* .page-pages .section-smile */
    /* --------------------------------------------- */
    .page-pages .section-smile img{
        height: 41vw;
    }
    /* --------------------------------------------- */
    /* .page-blog .section-blog */
    /* --------------------------------------------- */
    .page-blog .section-blog .blog img{
        width: 20vw;
        height: 20vw;
    }
    /* ----------------------------------- */
    /*    page-blog-show - section-blog    */
    /* ----------------------------------- */
    .page-blog-show .section-blog img{
        height: 48vw;
    }
    .page-blog-show .section-blog .container-img img{
        height: 80vw;
    }
    /* ----------------------------------- */
    /*    page-event-show - section-event    */
    /* ----------------------------------- */
    .page-event-show .section-event img{
        height: 48vw;
    }
    .page-event-show .section-event .container-img img{
        height: 80vw;
    }
    /* ----------------------------------- */
    /*  page-blog-show - section-hashtag   */
    /* ----------------------------------- */
    .page-blog-show .section-hashtag .container::before{
        clip-path: ellipse(100% 100% at 50% 0);
    }
    .page-blog-show .section-hashtag form input{
        width: 17vw;
        height: 16vw;
    }
    /* ----------------------------------- */
    /*  en page-add-comment - section-form */
    /* ----------------------------------- */
    .page-add-comment .section-form .d-flex{
        flex-wrap: wrap;
    }
    /* ----------------------------------- */
    /*  en page-add-clinic - section-form */
    /* ----------------------------------- */
    .page-add-clinic .section-form .d-flex{
        flex-wrap: wrap;
    }
    /* --------------------------------------------- */
    /* .page-choose-dr .section-address */
    /* --------------------------------------------- */
    .page-choose-dr .section-address #map{
        height: 100vw;
    }
}
@media only screen and (max-width: 526px){
    .page-main .section-introduce .container-picture .point-12 h2 {
        left: 0vw !important;
    }
    .page-main .section-introduce .container-picture .point-12 h3 {
        left: 10vw !important;
    }
}
@media only screen and (max-width: 480px){
    /* ----------------------------------- */
    /*    .page-main .section-introduce    */ 
    /* ----------------------------------- */
    .page-main .section-introduce .container-picture .point-12 h2 {
        left: -2vw !important;
    }
    .page-main .section-introduce .container-picture .point-12 h3 {
        left: 9vw !important;
    }
    .page-main .section-introduce .container-explain .container-products .product-1.selected:hover div{
        width: 165px;
    }
    .page-main .section-introduce .container-explain .container-products .product-2.selected:hover div{
        width: 335px;
    }
    .page-main .section-introduce .container-explain .container-products .product-3.selected:hover div{
        width: 225px;
    }
    .page-main .section-introduce .container-explain .container-products .product-4.selected:hover div{
        width: 285px;
    }
    .page-main .section-introduce .container-explain .container-products .product-5.selected:hover div{
        width: 215px;
    }
    /* ----------------------------------- */
    /*     page-event - section-events     */
    /* ----------------------------------- */
    .page-event .section-events .row{
        justify-content: center;
    }
    .page-event .section-events .event{
        width: 60% !important;
    }
    /* ----------------------------------- */
    /*   page-product - section-district   */
    /* ----------------------------------- */
    .page-product .section-district .tab-contents{
        height: 75vw;
    }
    .page-product .section-district .tab-contents .tab-content{
        height: 65vw;
    }
}
@media only screen and (max-width: 425px){
    /* --------------------------------------------- */
    /* .page-main */
    /* --------------------------------------------- */
    .page-main .section-introduce .container-picture .point-12 h2 {
        left: -2vw !important;
    }
    .page-main .section-introduce .container-picture .point-12 h3 {
        left: 11vw !important;
    }
    .page-main .section-introduce .container-explain .container-products .product-2.selected:hover div{
        width: 250px;
    }
    .page-main .section-introduce .container-explain .container-products .product-4.selected:hover div{
        width: 250px;
    }
    .page-main .section-introduce .container-explain .container-products .product-2.selected div p,
    .page-main .section-introduce .container-explain .container-products .product-4.selected div p{
        white-space: unset;
    }
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-film .film,
    .page-product .section-film .film {
        height: 300px;
    }
    .page-main .section-introduce .container-picture .point-1{
        top: 31%;
        left: 37%;
    }
    .page-main .section-introduce .container-picture .point-2{
        top: 34%;
        right: 40%;
    }
    .page-main .section-introduce .container-picture .point-3{
        left: 37%;
    }
    .page-main .section-introduce .container-picture .point-4{}
    .page-main .section-introduce .container-picture .point-5{
        top: 46%;
        right: 40%;
    }
    .page-main .section-introduce .container-picture .point-6{
        top: 51%;
        right: 33%;
    }
    .page-main .section-introduce .container-picture .point-7{
        top: 54%;
        right: 36%;
    }
    .page-main .section-introduce .container-picture .point-8{
        top: 55%;
        right: 41%;
    }
    .page-main .section-introduce .container-picture .point-9{
        top: 61%;
        right: 38%;
    }
    .page-main .section-introduce .container-picture .point-10{
        top: 62%;
        right: 44%;
    }
    .page-main .section-introduce .container-picture .point-11{
        top: 63%;
        left: 37%;
    }
    .page-main .section-introduce .container-picture .point-12{
        top: 69%;
        right: 24%;
    }
    .page-main .section-introduce .container-picture .point-13{
        top: 71%;
        right: 46%;
    }
    .page-main .section-introduce .container-picture .point-14{
        top: 78%;
        left: 37%;
    }
    /* --------------------------------------------- */
    /* .page-main .section-events */
    /* --------------------------------------------- */
    .page-main .section-events .swiper::before, 
    .page-main .section-events .swiper::after{
        width:30px;
    }
    /* --------------------------------------------- */
    /* .page-main .section-news */
    /* --------------------------------------------- */
    .page-main .section-news .swiper-slide,
    .page-product .section-news .swiper-slide{
        height: 420px;
    }
    /* --------------------------------------------- */
    /* .page-main .section-comments */
    /* --------------------------------------------- */
    .page-main .section-comments .swiper::before, 
    .page-main .section-comments .swiper::after,
    .page-product .section-comments .swiper::before, 
    .page-product .section-comments .swiper::after{
        width: 17%;
    }
    /* --------------------------------------------- */
    /* .page-product .section-click */
    /* --------------------------------------------- */
    .page-product .section-click h2{
        font-size: 16px !important;
    }
    /* --------------------------------------------- */
    /* .page-product .section-suggestion */
    /* --------------------------------------------- */
    .page-product .section-suggestion .product{
        width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* --------------------------------------------- */
    /* .page-about-us .section-filler */
    /* --------------------------------------------- */
    .page-about-us .section-filler{
        clip-path: ellipse(150% 100% at 50% 100%);
    }
    .page-about-us .section-filler .numbers-container{
        justify-content: center;
    }
    .page-about-us .section-filler .number{
        width: 210px !important;
        height: 200px !important;
        margin: 10px 0 !important;
        max-width: unset !important;
        flex-direction: column !important;
    }
    .page-about-us .section-filler .number *{
        width: 100%;
    }
    .page-about-us .section-filler .number h3{
        margin-top: auto !important;
    }
    /* ----------------------------------- */
    /*     page-event - section-events     */
    /* ----------------------------------- */
    .page-event .section-events .event{
        width: 70% !important;
    }
}
@media only screen and (max-width: 375px){
    /* --------------------------------------------- */
    /* .page-main */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-features .container-features{
        width: 321px;
        height: 321px;
    }
    .question{
        padding: 15px 15px 15px 35px;
    }
    .question::after{
        left: 10px;
    }
    /* --------------------------------------------- */
    /* .page-main .section-comments */
    /* --------------------------------------------- */
    .page-main .section-comments .swiper::before, 
    .page-main .section-comments .swiper::after,
    .page-product .section-comments .swiper::before, 
    .page-product .section-comments .swiper::after{
        width: 5%;
    }
    /* --------------------------------------------- */
    /* .page-product .section-click */
    /* --------------------------------------------- */
    .page-product .section-click h2{
        font-size: 14px !important;
    }
    /* ----------------------------------- */
    /*     page-event - section-events     */
    /* ----------------------------------- */
    .page-event .section-events .event{
        width: 80% !important;
    }
}
@media only screen and (max-width: 320px){
    /* --------------------------------------------- */
    /* .page-main */
    /* --------------------------------------------- */
    .page-main .section-introduce .container-picture .point-12 h2 {
        left: -4vw !important;
    }
    .page-main .section-introduce .container-picture .point-12 h3 {
        left: 12vw !important;
    }
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-film .film,
    .page-product .section-film .film {
        height: 250px;
    }
    /* --------------------------------------------- */
    /* .page-main .section-introduce */
    /* --------------------------------------------- */
    .page-main .section-features .container-features{
        width: 300px;
        height: 300px;
    }
    .page-main .section-features .container-features .feature{
        width: 130px;
        height: 130px;
    }
    .page-main .section-features .container-features .feature span{
        border-bottom: 0;
    }
    .page-main .section-features .container-features .feature span::before{
        font-size: 60px;
    }
    /* --------------------------------------------- */
    /* .page-product .section-suggestion */
    /* --------------------------------------------- */
    .page-product .section-suggestion .product{
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* --------------------------------------------- */
    /* .page-about-us .section-filler */
    /* --------------------------------------------- */
    .page-about-us .section-filler{
        clip-path: ellipse(180% 100% at 50% 100%);
    }
    /* ----------------------------------- */
    /*     page-event - section-events     */
    /* ----------------------------------- */
    .page-event .section-events .event{
        width: 90% !important;
    }
}

@media only screen and (max-width: 1024px){
.left-menu {
    display: flex;
    right: auto;
    left: 10%;
    width: 100%;
    justify-content: end;
    position: absolute;
}
}
@media only screen and (max-width: 425px){
	.page-main .section-introduce .container-picture .container-points .point-1::before {
    left: 11px;
	}
	
	.page-main .section-introduce .container-picture .point-1 h2, .page-main .section-introduce .container-picture .point-3 h2 {
        left: 33px;
    }
    .page-main .section-introduce .container-picture .point-1 h3, .page-main .section-introduce .container-picture .point-3 h3 {
        left: 33px;
    }
    .page-main .section-introduce .container-picture .container-points .point-11::before {
        left: -15px;
    }
    .page-main .section-introduce .container-picture .point-11 h2 {
        left: -100px;
    }
    .page-main .section-introduce .container-picture .point-11 h3 {
        left: -100px;
    }
    .left-menu {
        display: flex;
        right: auto;
        left: 10%;
        width: 100%;
        justify-content: end;
        position: absolute;
    }
	.page-main .section-introduce .container-picture .point-15{
		top: 292px;
		left: 171px;
	}
 	.page-main .section-introduce .container-picture .point-16 {
		top: 133px;
		left: 131px;
    }
}