html, body {
    margin:0;
    padding:0;
    height:100%;
}

.fs-15 {
    font-size: 1.5rem !important;
}

.fs-25 {
    font-size: 2.5rem !important;
}

.fs-10 {
    font-size: 1rem !important;
}

.wrapper {
    min-height:100%;
    position:relative;
}

.header {
    background-color: white;
}

.header .navbar {
    padding: 0 6rem;
}

.header .navbar-light {
    background-color: white;
}

.header .navbar .navbar-brand img{
    width: 270px;
    max-width: 100%;
    max-height: 100%;
}

.header .navbar-collapse .navbar-nav li .fas--larger {
    font-size: 34px;
    color: #666666;
}

.header .navbar-collapse .navbar-nav li .info {
    font-size: 34px;
    color: #666666;
}

/* navbar-collapse */
.header .navbar-collapse .navbar-nav span.phone-number {
    position: relative;
    top: 25px;
    left: -45px;
    font-size: 14px;
    color: #8b8888;
}

.header .navbar-collapse .navbar-nav i {
    position: absolute;
}

.header .navbar-collapse .menu-section .menu-toggle {
    top: 30px;
    width: 65px;
    /* height: 30px; */
    position: absolute;
    z-index: 999;
    right: 4rem;
    cursor: pointer;
}

.header .navbar-collapse .menu-section .active .one {
    transform: rotate(45deg) translate(7px, 7px);
}

.header .navbar-collapse .menu-section .active .two {
    transform: rotate(-45deg) translate(8px, -10px);
}

.header .navbar-collapse .menu-section .one,
.header .navbar-collapse .menu-section .two {
    width: 100%;
    height: 5px;
    background: #666666;
    margin: 16px auto 13px auto;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition-duration: 0.3s;
}

.header .navbar-collapse nav ul {
    margin: 0;
    padding: 0;
    font-family: Open Sans;
    list-style: none;
    text-align: center;
}

.header .navbar-collapse nav ul.hidden {
    display: none;
}

.header .navbar-collapse nav ul a {
    transition-duration: 0.5s;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    font-size: 1.5em;
    line-height: 1.5;
    width: 100%;
    display: block;
  }

.header .navbar-collapse nav ul a:hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ddd;
}

.header .navbar-collapse .menu-section.active {
    z-index: 1000;
    width: 100%;
    height: 100vh;
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    color: #fff;
    left: 0;
    top: 0;
}

.header .navbar-collapse .nav-menu {
    position: relative;
    top: 30%;
    left: 50%;
    padding-top: 8em;
    transform: translateX(-50%);
}

.header .navbar-collapse .navbar-nav li p {
    font-size: 10px;
    margin: 0;
    color: #666666;
}

.footer .app-footer {
    margin: 50px 0px;
}

.footer .app-footer .app-footer__links {
    display: flex;
    justify-content: flex-end;
}

.footer .app-footer img {
    width: 200px;
    max-width: 100%;
}

.footer .app-footer__links ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 0;
    margin: 0;
}

.footer .app-footer__links ul li{
    list-style-type: none;

    margin-left: 3rem;
}

.footer .app-footer__links ul li a{
    color: black;
}

.footer .copyright > .copyright__content {
    text-align: center;
    color: #5555;
}

.content {
    padding-bottom:200px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}

.btn--callback:hover {
    color: #555 !important;
    background-color: #FAD745 !important;
}

.btn--sweet {
    color: #ffffff !important;
    background-color: #f09ec3 !important;
    box-shadow: none !important;
    border-radius: 3rem !important;
    min-width: 120px;
    height: 40px;
}

.btn--sweet:hover {
    color: #f09ec3 !important;
    background-color: #ffffff !important;
    border: 2px solid #f09ec3;
    border-radius: 3rem !important;
}

/* PAGE LOGIN */

.app-card {
    padding: 25px;
    margin: 30px;
}

.app-card .container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.app-card__item {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    color: #656565;
    min-height: 340px;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);
    margin: 20px;
}

.app-card .app-card__item .icon--big {
    font-size: 1.5rem;
    margin-left: 1rem;
}

.app-card .app-card__item.left {
    border: 2px solid #f09ec3;
}

.app-card .app-card__item.left span{
    color: #f09ec3;
}

.app-card .app-card__item.left p i{
    color: #f09ec3;
}

.app-card .app-card__item.left:hover{
    background-color: #FAD745;
    border: 2px solid #FAD745;
}

.app-card .app-card__item.right {
    border: 2px solid #FAD745;
}

.app-card .app-card__item.right span{
    color: #FAD745;
}

.app-card .app-card__item.right p i{
    color: #FAD745;
}

.app-card .app-card__item.right:hover{
    background-color: #f09ec3;
    border: 2px solid #f09ec3;
}

.app-card .app-card__item .app-icon {
    height: 160px;
    width: 160px;
    background-size: contain;
    background-repeat: no-repeat;
}

.app-card .app-card__item .app-icon__list {
    background-image: url('/img/reserve/img_reserve_1.png');
}

.app-card .app-card__item .app-icon__computer {
    background-image: url('/img/reserve/img_reserve_2.png');
}

.callback {
    background-color: #dddddd;
    height: 120px;
    text-align: center;
}

.callback__content {
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 120px;
    width: 100%;
}

/* END PAGE LOGIN */

.btn--callback {
    color: #FAD745 !important;
    border: 2px solid #FAD745 !important;
    background-color: #ffff !important;
    border-radius: 3rem !important;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    line-height: 35px;
}

/* PAGE ABOUT */

.jumbotron.jumbotron--top {
    position: relative;
    background-color: #fff;
    background-image: url('/img/top/bg_council.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.jumbotron .jumbotron__top p {
    line-height: 2.5rem;
    font-size: 18px;
    font-weight: 500;
}

.jumbotron .jumbotron__top::before {
    content: '';
    height: 9px;
    position: absolute;
    top: -9px;
    width: 100%;
    background-color: #FAD745;
}

.jumbotron.jumbotron--medium {
    background-color: #fff;
}

.jumbotron .jumbotron__top h1,
.jumbotron .jumbotron__medium h1,
.jumbotron .jumbotron__large h1 {
    letter-spacing: 0.4rem;
}

.jumbotron .jumbotron__top p.lead,
.jumbotron .jumbotron__medium p.lead,
.jumbotron .jumbotron__large h4 {
    letter-spacing: 0.2rem;
}

.jumbotron.jumbotron--large {
    position: relative;
    background-color: #fff;
    background-image: url('/img/top/bg_service.jpg');
    background-repeat: repeat-y;
    background-size: cover;
}

.jumbotron.jumbotron--large .row .card-img-top {
    max-height:300px;
    -o-object-fit: cover;
       object-fit: cover;
}

.jumbotron.jumbotron--guide {
    position: relative;
    background-color: #FAD745;
}

.jumbotron .jumbotron__guide::before {
    content: '\8A2A\554F\7406\7F8E\5BB9\30B5\30FC\30D3\30B9\63D0\4F9B\4E8B\696D\8005\306B\5BFE\3059\308B\30AC\30A4\30C9\30E9\30A4\30F3';
    text-align: center;
    padding-top: 80px;
    color: #ffffff;
    font-size: 2.5rem;
    height: 361px;
    width: 100%;
    background-image: url('/img/council/bg_guideline.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -90px;
}

.jumbotron .jumbotron__top::before {
    content: '';
    height: 9px;
    position: absolute;
    top: -9px;
    width: 100%;
    background-color: #FAD745;
}

.jumbotron .jumbotron__guide ul.timeline {
    list-style-type: none;
    position: relative;
}
.jumbotron .jumbotron__guide ul.timeline:before {
    content: ' ';
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
.jumbotron .jumbotron__guide ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}

.jumbotron .jumbotron__guide ul.timeline > li:before {
    content: ' ';
    background: #fff;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 15px solid #fff;
    left: 15px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

.jumbotron .jumbotron__guide ul.timeline ul{
    list-style-type: square;
}

.jumbotron .jumbotron__guide ul.timeline ol,
.jumbotron .jumbotron__guide ul.timeline ul.list-style--none {
    list-style-type: none;
}

.jumbotron .jumbotron__guide ul.timeline ul.fa-ul li span i{
    color: #FAD745;
}
/* END PAGE ABOUT */

/* TOP */
.jumbotron.jumbotron--yellow {
    background-color: #FFCF1D;
}

.jumbotron--relative {
    position: relative;
}

.btn--slider {
    color: #f09ec3 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 3rem !important;
    border: 2px solid #f09ec3;
    max-width: 60%;
    max-height: 100%;
    line-height: 35px;
}

.btn--slider:hover {
    color: #ffffff !important;
    background-color: #f09ec3 !important;
}

.slider {
    background-image: url('/img/top/mv.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* height: 680px; */
    width: 100%;
    position: relative;;
}

.slider__content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding: 50px 0;
    width: 40%;
    min-height: 600px;
}

.slider__content h1 {
    margin-bottom: 15px ;
    line-height: 2.2rem;
}

.slider__content h1 .break-line {
    display: none ;
}

.slider__content p {
    font-size: 18px;
    margin: 30px 0px;
    color: #333333;
}

.slider__content img {
    object-fit: contain;
}

.slider__control {
    height: 50%;
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.7);
}

.slider__control .btn--slider {
    margin: auto;
}

.about .jumbotron .about__content::before {
    content: ' ';
    height: 100%;
    width: 30%;
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #FFFFFF;
}

.about .jumbotron .image-single .img-1 {
    width: 500px;
    max-width: 100%;
}

.about .jumbotron .image-double .img-2 {
    width: 400px;
    max-width: 100%;

    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
}

.about .jumbotron .image-double .img-3 {
    width: 500px;
    max-width: 100%;

    margin-top: 20px;
}

.about .jumbotron .about__text{
    background-color: #ffffff;
    padding: 3rem;
    margin-left: -7rem;
    margin-top: 25%;
}

.about .jumbotron .about__text p{
    line-height: 2.5rem;
}

.about .jumbotron .about__text img{
    width: 350px;
    max-width: 50%;
}

.border-radius-none {
    border-radius: 0;
}

.border-none {
    border: 0;
}

.point .point__content .point__relative {
    position: relative;
}

.point .jumbotron .card .card-header .item__header {
    display: flex;
    margin: 2rem 0 1rem 0;
}

.point .jumbotron .card .card-body p {
    line-height: 2.5rem;
}

.point .jumbotron .point__content .point__image {
    height: auto;
    width: 550px;
    max-width: 100%;
    margin-top: 8rem;
    margin-left: 4rem
}

.point .jumbotron .point__content .card .card-header .item__header .item__header__point {
    padding: 0.5rem 1rem;
    margin-right: 2rem;
}

.point__1 .row::before {
    content: ' ';
    position: absolute;

    background-image: linear-gradient(to top left,#F0BCE7, #ABC0ED);;

    height: 60%;
    width: 60%;

    top: 15%;
    left: 15%;
}

.point .jumbotron .point__content .point__1 .card .card-header .item__header .item__header__point {
    border: 2px solid #ABC0ED;
}

.z-index--999 {
    z-index: 999;
}

.point .jumbotron .point__content .point__2 .row::before {
    content: ' ';
    position: absolute;

    background-image: linear-gradient(to top left,#DBFBF1, #F9C8C4);;

    height: 70%;
    width: 60%;

    top: 15%;
    right: 5%;

    z-index: 0;
}

.point .jumbotron .point__content .point__2 .card .card-header .item__header .item__header__point {
    border: 2px solid #FEC8C5;
}

.point .jumbotron .point__content .point__3 .row::before {
    content: ' ';
    position: absolute;

    background-image: linear-gradient(to top left,#FBD489, #F3A9C3);;

    height: 60%;
    width: 85%;

    top: 15%;
    right: 0;
}

.point .jumbotron .point__content .point__3 .card .card-header .item__header .item__header__point {
    border: 2px solid #FEC8C5;
}

.council {
    position: relative;
}

.council .jumbotron {
    background-color: #FAD745;
}

.council .jumbotron .council__content::before {
    content: ' ';
    text-align: center;
    padding-top: 140px;
    color: #ffffff;
    font-size: 2.5rem;
    height: 75%;
    width: 100%;
    background-image: url('/img/top/bg_council.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0px;
}

.council .jumbotron .council__content .content__header {
    margin-bottom: 3rem;
}

.council .jumbotron .council__content .content__header p {
    color: #fff;
}

.menu {
    background-color: #FFFFFF;
}

.menu .jumbotron {
    background-color: #FFFFFF;
}

.menu .jumbotron .p--blur {
    color: #5555;
}

.menu .menu__control {
    height: 150px;
    display: flex;
    background-color: #DDDDDD;
}

.menu .menu__control .btn--slider {
    margin: auto;
}

.menu .jumbotron .table--yeallow {
    border: 2px solid #FAD745;
}

.menu .jumbotron .table--yeallow tbody tr:first-child {
    background-color: #FAD745;
    color: #fff;
    font-size: larger;
}

.menu .jumbotron .table--yeallow tbody tr:first-child td , .table--yeallow tbody tr:nth-child(2) td{
    border: 0;
}

.voice .jumbotron .voice__card {
    padding: 20px 100px;
}

.voice .jumbotron .voice__card .card__item {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    color: #656565;
    background-color: #ffffff;
    border-radius: 0.3rem;
}

.voice .jumbotron .voice__card .card__item img {
    width: 100%;
    height: 100%;
}

.voice .jumbotron .voice__card .card__item p {
    margin: 20px 15px;
}

.voice .jumbotron .voice__card .carousel-control-prev {
    color: #f09ec3;
    left: -60px;
    justify-content: left;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    margin: auto;
    opacity: 1;
}

.voice .jumbotron .voice__card .carousel-control-next {
    color: #f09ec3;
    right: -60px;
    justify-content: right;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    margin: auto;
    opacity: 1;
}

.voice .jumbotron .voice__card .clone-item-1,
.voice .jumbotron .voice__card .clone-item-2{
    display: block;
}

.flow .jumbotron .table--flow tr td {
    padding: 25px 20px;
}

.flow .jumbotron .table--flow .number {
    background-color: #dddddd;
    border-top-style: solid;
    border-top-color: #eb987a;
    padding: 5px 13px !important;
    margin-right: 10px;
}

.flow .jumbotron .table--flow p {
    margin-top: 20px;
}

.flow .jumbotron .table--flow img {
    height: 120px;
}

.movie {
    background-color: #dddddd;
}

.movie > .jumbotron > .movie__content::before {
    content: '';
    height: 61px;
    position: absolute;
    bottom: -61px;
    width: 100%;
    background-color: #FAD745;
}

.movie .jumbotron .movie__embed {
    display: flex;
    justify-content: center;
}

.movie .jumbotron .movie__embed video {
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 1200px) {
    .header .d-none--custome {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .slider .slider__content .btn--slider {
        max-width: 90%;
    }

    .voice .jumbotron .voice__card  .clone-item-2 {
        display: none;
    }
}

@media (max-width: 768px) {
    .footer .app-footer .app-footer__links {
        display: flex;
        justify-content: center;
    }

    .footer .app-footer .app-footer__img {
        text-align: center;
    }

    .footer .app-footer__links ul {
        display: flex;
        flex-direction: column;
    }

    .footer .app-footer__links ul li {
        padding: 1rem 0;
        margin: 0;
    }

    /* PAGE TOP */
    .slider__content h1 .break-line {
        display: block;
    }

    .about .jumbotron .about__content::before {
        content: ' ';
        height: 0 !important;
    }

    .about .jumbotron .image-single .img-1 {
        width: 100%;
        max-width: 100%;

        margin:0;
        margin-bottom: 1rem;
    }

    .about .jumbotron .image-double .img-2 {
        width: 100%;
        max-width: 100%;

        margin:0;
        margin-bottom: 1rem;
    }

    .about .jumbotron .image-double .img-3 {
        width: 100%;
        max-width: 100%;

        margin:0;
        margin-bottom: 1rem;
    }

    .about .jumbotron .about__text{
        background-color: #ffffff;
        padding: 3rem;
    }

    .about .jumbotron .about__text img{
        width: 350px;
        max-width: 50%;
    }

    .about .jumbotron .about__text{
        margin: 0 !important;

    }

    .point .jumbotron .point__content .point__1 .row::before ,
    .point .jumbotron .point__content .point__2 .row::before ,
    .point .jumbotron .point__content .point__3 .row::before {
        content: ' ';
        position: absolute;

        height: 100%;
        width: 100%;

        left: 0;
    }

    .point .jumbotron .point__content .point__image {
        height: auto;
        max-width: 100%;
        width: 100% ;
        margin: 0rem ;
    }

    .point .jumbotron .point__content .point__2 .row .col-md-5:first-child {
        order: 2;
    }

    .point .jumbotron .point__content .point__2 .row .col-md-5:nth-child(2) {
        order: 1;
        margin: 0 ;
    }

    .point .jumbotron .point__content .point__1,
    .point .jumbotron .point__content .point__2,
    .point .jumbotron .point__content .point__3 {
        margin: 0 !important;
        padding: 0.5rem 0 !important;
    }

    .voice .jumbotron .voice__card .clone-item-1 {
        display: none;
    }
    /* END PAGE TOP */

    /* PAGE ABOUT */
    .jumbotron .jumbotron__guide::before {
        padding-top: 40px;
    }
    /* END PAGE ABOUT */
}

@media (max-width: 576px) {
    .header .navbar-collapse .menu-section .menu-toggle {
        top: 12px;
        width: 50px;
        height: 20px;
        cursor: pointer;
        right: 1rem;
    }

    .slider .slider__content {
        width: 60%;
    }

    .slider__content h1 {
        margin-bottom: 5px;
    }

    .slider__content p {
        margin: 15px 0 20px 0;
    }

    .slider .slider__content .btn--slider {
        max-width: 100%;
    }

    .about .jumbotron .about__content .row .px-0 {
        padding-right: 7.5px !important;
        padding-left: 7.5px !important;
    }
}