:root {
    --navBgColor: #82ccae62;
    --opacitynavBgColor: #ffffff00;
    --navTextColor: rgb(0, 0, 0);
    --navhoverColor: #FFF;
    --highLightColor: rgba(203, 125, 157, 1);
    --hoverColor: rgba(255, 255, 255, 1);
    --darkColor: #2b89a6;
    --titleColor: #2b89a6;
    --mainFontColor: rgba(30, 30, 30, 1);
    --opacityFontColor: #2b89a6;
    --mainBorder: 1.5px solid var(--opacityFontColor)
}

#nav-icon span {
    background: var(--darkColor)
}

.roomTitle h4 {
    font-size: 24px;
    color: #000
}

.line_n {
    text-decoration: line-through;
    color: #7c7c7c
}

.roomTitle h3 {
    font-size: 16px;
    margin-top: -24px;
    text-align: right
}

.service_mask {
    background-color: rgba(143, 142, 142, .26)
}

.aboutText h6 {
    line-height: 34px
}

.aboutpic {
    position: fixed;
    top: 65%;
    left: 3%;
    cursor: pointer;
    z-index: 100
}

.aboutpic img {
    width: 150px;
    animation: alarm 1s infinite
}

.navbar {
    background-color: var(--opacitynavBgColor)
}

#nav-icon span {
    background: var(--darkColor)
}

.mainBg {
    background-color: var(--navBgColor);
    background-size: cover;
    background-attachment: fixed
}

.mainMask {
    background-color: rgba(0, 0, 0, 0)
}

.banner-full {
    background-image: url(img/banner1.jpg)
}

.section:nth-child(odd) {
    background-color: #fff
}

.picFlex img {
    width: 46%;
    margin: 10px;
    float: left
}

h5 small {
    color: #f0f0f0
}

.hovereffect h2 {
    padding: 0 0
}

.overlay img {
    margin-top: 15px
}

.trafficText img {
    filter: brightness(.4)
}

.trafficText ul li {
    font-size: 18px
}

#sns ul li {
    filter: brightness(0)
}

.footer {
    background-color: #82ccae62
}

#copyright {
    background-color: #82ccae62;
    color: #000
}

#picCategory p {
    width: 95%;
    margin: 0 auto 50px
}

.btn_group .btn_a {
    margin: auto;
    margin-bottom: 40px;
    border-radius: 8px
}

.video-container {
    padding-bottom: 75%
}

.video-container h4 {
    color: #2b89a6;
    font-size: 24px;
    padding-bottom: 12px;
    border-bottom: var(--mainBorder)
}

.video-container p {
    margin-bottom: 36px
}

@media (max-width:1200px) {
    #logo {
        width: 100%
    }

    #home,
    #myCarousel {
        margin-top: 88px
    }

    .navbar {
        background-color: var(--navBgColor) !important
    }

    .navbar>.container-fluid .navbar-brand {
        margin-left: 0
    }

    .navbar-brand>img {
        margin: auto
    }

    .collapse {
        position: absolute;
        display: block;
        top: -1200%;
        margin: 0;
        left: 100%;
        width: 100%;
        min-height: 100vh;
        background-color: var(--navBgColor);
        transition: .5s
    }

    .collapse.move {
        top: 0;
        left: 0;
        opacity: 1
    }

    .shop1688 {
        left: 15px
    }

    .navbar-header {
        float: none
    }

    .navbar .container-fluid {
        padding: 0
    }

    .container-fluid>.navbar-collapse {
        margin: 0
    }

    .navbar-right {
        margin-right: 0
    }

    .navbar-left,
    .navbar-right {
        float: none !important
    }

    .navbar-toggle {
        display: block
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px
    }

    .navbar-nav {
        text-align: center;
        float: none !important;
        margin-top: 100px
    }

    .navbar-nav>li>a::after {
        content: '';
        width: 0%;
        height: 3px;
        background-color: var(--navhoverColor);
        margin: auto;
        margin-top: 5px;
        display: block
    }

    .navbar-nav>li>a:hover::after {
        width: 5%;
        transition: .5s
    }

    .navbar-nav>li {
        float: none
    }

    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px
    }
}

@media screen and (max-width:770px) {
    .aboutFlex img {
        background-color: #d1e7d9;
        border-style: double;
        border-width: 10px;
        border-color: #fff
    }

    .floatRightText {
        background-color: #fff
    }

    .aboutpic {
        top: 32%;
        left: 1%
    }

    .btn_group .btn_a {
        width: 40%
    }

    .aboutpic img {
        width: 80px
    }

    .roomTitle h3 {
        margin-top: 8px;
        text-align: right;
        font-size: 16px
    }

    .mbslider .slick-next,
    .mbslider .slick-prev {
        top: 275px
    }
}

@media screen and (max-width:576px) {
    .hovereffect img {
        margin-bottom: 25px
    }

    .overlay img {
        width: 18%
    }

    .video-container {
        padding-bottom: 240%
    }
}

@keyframes alarm {
    0% {
        transform: rotate(3deg)
    }

    25% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(-3deg)
    }

    75% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(3deg)
    }
}