/*==========================================================================
BODY
===========================================================================*/
body{
    /* main */
    --container: 1370px;
    --container-pd: 30px;
    --main-cl: #e01821;
    --main-cl-t: #fff;
    --main-cl-2: #f5e100;
    --dark-cl: #111;
    --dark-cl-2: #666;
    --dark-cl-3: #aaa;
    --light-cl: #fff;
    --light-cl-2: #f1f1f1;
    --line-cl: #e5e5e5;
    --line-cl-2: #ddd;
    --body-cl: var(--dark-cl-2);
    --body-bg: var(--light-cl);
    /* input, button */
    --input-fz: 14px;
    --input-lh: 20px;
    --input-pd: 10px;
    --input-pd-hz: 20px;
    /* cols / rows */
    --cols: 4;
    --cols-gap: 30px;
    --rows-gap: 30px;
    --box-cols: var(--cols);
    --box-cols-gap: var(--cols-gap);
    --box-rows-gap: var(--rows-gap);
    /* laptop */
    --cols-1500: var(--cols);
    --cols-1500-gap: var(--cols-gap);
    --rows-1500-gap: var(--rows-gap);
    /* tablet */
    --cols-1200: 4;
    --cols-1200-gap: 20px;
    --rows-1200-gap: 20px;
    /* landscape */
    --cols-992: 3;
    --cols-992-gap: 20px;
    --rows-992-gap: 20px;
    /* portrait */
    --cols-768: 3;
    --cols-768-gap: 16px;
    --rows-768-gap: 16px;
    /* mobile */
    --cols-480: 2;
    --cols-480-gap: 10px;
    --rows-480-gap: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--body-cl);
    fill: var(--body-cl);
    background-color: var(--body-bg);
    word-wrap: break-word;
}
@media (max-width: 1199px){
    body{
        /* main */
        --container-pd: 20px;
        /* cols / rows */
        --cols: 4;
        --cols-gap: 20px;
        --rows-gap: 20px;
    }
    .hide_1200{
        display: none !important;
    }
}
@media (max-width: 991px){
    body{
        /* cols / rows */
        --cols: 3;
    }
    .hide_992{
        display: none !important;
    }
}
@media (max-width: 767px){
    body{
        /* main */
        --container-pd: 15px;
        /* cols / rows */
        --cols-gap: 16px;
        --rows-gap: 16px;
    }
    .hide_768{
        display: none !important;
    }
}
@media (max-width: 479px){
    body{
        /* cols / rows */
        --cols: 2;
        --cols-gap: 10px;
        --rows-gap: 10px;
    }
}
select{
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 24px;
    padding: 3px 10px;
    height: 30px;
    cursor: pointer;
}
option{
    cursor: pointer;
}
button,
.button{
    display: inline-block;
    vertical-align: top;
    position: relative;
    font-size: var(--btn-fz, var(--input-fz));
    line-height: var(--btn-lh, var(--input-lh));
    color: var(--main-cl-t);
    fill: var(--main-cl-t);
    background-color: var(--main-cl);
    padding: var(--btn-pd, var(--input-pd)) var(--btn-pd-hz, var(--input-pd-hz));
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-align: center;
}
button:hover,
.button:hover{
    color: var(--main-cl-2);
    fill: var(--main-cl-2);
}
/* input */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea{
    border: none;
    font: inherit;
    font-size: var(--input-fz);
    line-height: var(--input-lh);
    max-width: 100%;
    height: auto;
    padding: var(--input-pd) var(--input-pd-hz);
    color: var(--dark-cl);
    background-color: var(--light-cl);
    box-shadow: 0 0 0 1px var(--line-cl) inset;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    margin: 0;
    text-align: start;
    transition: none;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"]{
    width: auto;
    height: calc(var(--input-pd) * 2 + var(--input-lh));
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus{
    box-shadow: 0 0 0 1px var(--dark-cl) inset;
}
/* textarea */
textarea{
    display: block;
    width: 100%;
    height: 156px;
}
/* select */
select{
    width: auto;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFBAMAAABlfdtYAAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMAmcwRiCK19YmuAAAAH0lEQVQI12MIYWBgFmAwAiNmRWZFBgYGIyEBIAliAgAeOQGsDcSFWgAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: right var(--input-pd-hz) center;
    background-size: 8px auto;
    padding-inline-end: calc(15px + var(--input-pd-hz));
    border-radius: var(--input-bora);
    cursor: pointer;
}
select::-ms-expand{
    display: none;
}
/* checkbox, radio */
input[type="radio"],
input[type="checkbox"]{
    vertical-align: middle;
    margin-top: -2px;
    margin-inline-end: 3px;
    cursor: pointer;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled]{
    cursor: not-allowed;
}
::placeholder{
    color: var(--dark-cl-3);
    opacity: 1;
    filter: alpha(opacity=100);
}
::-webkit-input-placeholder{
    color: var(--dark-cl-3);
    opacity: 1;
    filter: alpha(opacity=100);
}
:-moz-placeholder{
    color: var(--dark-cl-3);
    opacity: 1;
    filter: alpha(opacity=100);
}
::-moz-placeholder{
    color: var(--dark-cl-3);
    opacity: 1;
    filter: alpha(opacity=100);
}
:-ms-input-placeholder{
    color: var(--dark-cl-3);
    opacity: 1;
    filter: alpha(opacity=100);
}
/* menu */
.menu{
    list-style: none;
    padding: 0;
    margin: 0;
}
/* menu-dropdown */
.menu-dropdown{
    position: relative;
}
.menu-dropdown .dropdown-toggle{
    font-weight: inherit;
    padding: 10px 0;
    background-color: transparent;
    text-transform: inherit;
}
.menu-dropdown .dropdown-toggle:after{
    display: inline-block;
    vertical-align: top;
    font-family: main-icon, sans-serif;
    content: '\e906';
    margin-inline-start: 2px;
}
.menu-dropdown .dropdown-menu li button img,
.menu-dropdown .dropdown-toggle img{
    display: inline-block;
    vertical-align: middle;
    max-height: 1em;
    margin: -1px 0 1px;
    margin-inline-end: 2px;
}
.menu-dropdown .dropdown-menu{
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 140px;
    min-width: 100%;
    color: var(--dark-cl-2);
    background-color: var(--light-cl);
    /*box-shadow: 0 5px 15px rgba(0,0,0,.1);*/
    box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
    padding: 8px 0;
    max-height: 276px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .3s;
    text-align: start;
    margin: 0;
    font-size: 12px;
    z-index: 2;
}
.menu-dropdown .dropdown-menu a,
.menu-dropdown .dropdown-menu li button{
    display: block;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
    padding: 3px 15px;
    color: inherit;
    font-weight: inherit;
    background-color: transparent;
    text-align: inherit;
    text-transform: inherit;
}
.menu-dropdown .dropdown-menu a:hover,
.menu-dropdown .dropdown-menu li button:hover{
    color: var(--main-cl);
}
@media (min-width: 1200px){
    .menu-dropdown:not(:hover) > .dropdown-menu{
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: .1s;
    }
}
@media (max-width: 1199px){
    .menu-dropdown:not(.open) > .dropdown-menu{
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: .1s;
    }
}
/* tooltip */
.tooltip{
    position: relative;
}
#autorotateToggle:not(:hover):before,
#autorotateToggle:not(:hover):after,
.viewControlButton:not(:hover):before,
.viewControlButton:not(:hover) span:after,
.tooltip[data-title]:not(:hover):before,
.tooltip[data-title]:not(:hover):after{
    opacity: 0;
    visibility: hidden;
}
#autorotateToggle:before,
.viewControlButton:before,
.tooltip[data-title]:before{
    position: absolute;
    content: attr(data-title);
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--dark-cl);
    color: var(--light-cl);
    border-radius: 90px;
    white-space: nowrap;
    font-size: 11px;
    line-height: 14px;
    padding: 5px 15px;
    pointer-events: none;
}
.to-expand.active:before,
.control-btn:not(.active):before,
.mouse-lock:not(.active):before,
.auto-scene:not(.active):before{
    content: attr(data-title2);
}
#autorotateToggle:before,
.viewControlButton:before{
    content: var(--data-title, '');
}
.to-expand.active .icon:before{
    content: '\e930';
}
#autorotateToggle:after,
.viewControlButton span:after,
.tooltip[data-title]:after{
    position: absolute;
    content: '';
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid var(--dark-cl);
    border-inline-start: 6px solid transparent;
    border-inline-end: 6px solid transparent;
}
/* language */
.header-language{
    display: flex;
}
.header-language > .dropdown-menu{
    left: auto;
    right: 0;
}
/* slick */
.slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}
.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}
.slick-list:focus{
    outline: 0
}
.slick-list.dragging{
    cursor: pointer;
    cursor: hand
}
.slick-slider .slick-track, .slick-slider .slick-list{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before, .slick-track:after{
    display: table;
    content: ''
}
.slick-track:after{
    clear: both
}
.slick-loading .slick-track{
    visibility: hidden
}
.slick-slide{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}
[dir='rtl'] .slick-slide{
    float: right
}
.slick-slide img{
    display: block
}
.slick-slide > *,
.slick-slide > * > *{
    vertical-align: top;
}
.slick-slide.slick-loading img{
    display: none
}
.slick-slide.dragging img{
    pointer-events: none
}
.slick-initialized .slick-slide{
    display: block
}
.slick-loading .slick-slide{
    visibility: hidden
}
.slick-vertical .slick-slide{
    display: block;
    height: auto;
    border: 1px solid transparent
}
.slick-arrow.slick-hidden{
    display: none
}
.slick-slider:not(:hover) .slick-arrow{
    /*opacity: 0;*/
    /*visibility: hidden;*/
}
.slick-slider .slick-arrow{
    position: absolute;
    top: calc(50% - 16px);
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    padding: 0;
    transition: .2s;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    z-index: 1;
}
.slick-slider .slick-arrow:hover{
    color: var(--main-cl-t);
    background-color: var(--main-cl);
}
.slick-slider .slick-prev{
    left: 5px;
}
.slick-slider .slick-next{
    right: 5px;
}
.slick-slider .slick-arrow:before{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 40px;
    font-family: main-icon, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
.slick-slider .slick-prev:before{
    content: '\ea21';
}
.slick-slider .slick-next:before{
    content: '\ea22';
}
.slick-slider .slick-dots{
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    text-align: center;
    margin: 10px 0 0;
}
.slick-slider .slick-dots button{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 5px;
    color: inherit;
    background-color: transparent;
}
.slick-slider .slick-dots button:hover{
    color: var(--main-cl);
}
.slick-slider .slick-dots .slick-active button{
    color: var(--main-cl-t);
    background-color: var(--main-cl);
}
.slick-slider .slick-dots{}
/*==========================================================================
HOME
===========================================================================*/
/*----- LOGO -----*/
.header-logo a{
    display: flex;
    align-items: center;
    background-color: inherit;
}
.header-logo img{
    width: 46px;
    height: 46px;
}
.header-logo .content{
    flex: 1 1 auto;
    /*width: 1%;*/
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    padding: 0 15px;
    white-space: nowrap;
}
.header-logo .content:first-child{
    text-align: end;
}
.header-logo .content .text{
    font-size: 18px;
    line-height: 24px;
    color: var(--main-cl);
    text-transform: uppercase;
    font-weight: 700;
}
.header-logo .content .subtext{
    display: block;
    font-size: 14px;
    line-height: 20px;
    text-transform: capitalize;
    color: var(--dark-cl);
}
/*----- HEADER -----*/
.home-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*border-top: 5px solid var(--light-cl);*/
    background-color: var(--main-cl);
    /*opacity: .9;*/
    z-index: 3;
}
.home-header + *:not(.home-content){
    /*margin-top: 40px;*/
}
.home-header .header-inner{
    display: flex;
    flex-wrap: wrap;
}
.home-header .header-logo{
    padding: 0 0 2px;
    background-color: var(--light-cl);
    margin: 0 32px -15px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.home-header .header-logo:before,
.home-header .header-logo:after{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: inherit;
    pointer-events: none;
    transform: skew(-35deg);
    transform-origin: bottom;
    z-index: -1;
}
.home-header .header-logo:after{
    transform: skew(35deg);
}
.home-header .header-logo a:before{
    /*position: absolute;*/
    /*content: '';*/
    /*top: -6px;*/
    /*bottom: calc(100% - 1px);*/
    /*left: -15px;*/
    /*right: -15px;*/
    /*background-color: inherit;*/
    /*pointer-events: none;*/
    /*z-index: -1;*/
}
.home-header .header-control{
    flex: 1 1 auto;
    width: 1%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    padding: 0 15px;
    position: relative;
}
.home-header .header-menu{
    flex: 1 1 auto;
    width: 1%;
}
.home-header .header-button{
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    padding: 5px 20px;
}
.home-header .header-button a{
    display: block;
    padding: 10px 0;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--main-cl-t);
    text-shadow: 3px 3px 15px #000, -3px 3px 15px #000, 3px -3px 15px #000, -3px -3px 15px #000;
}
.home-header .header-button a:hover{
    color: var(--main-cl-2);
}
/* menu */
.home-header .header-menu .item{
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.home-header .header-menu .item.last{
    float: right;
}
.home-header .header-menu .item > a{
    display: block;
    position: relative;
}
.home-header .header-menu .menu > .item > a{
    color: var(--main-cl-t);
    text-transform: uppercase;
    padding: 10px 15px;
}
.home-header .header-menu .menu > .item.has-sub > a:before{
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 6px solid var(--light-cl);
    border-inline-start: 5px solid transparent;
    border-inline-end: 5px solid transparent;
    margin: auto;
    transition: .3s;
}
.home-header .header-menu .menu > .item.current > a,
.home-header .header-menu .menu > .item:hover > a{
    color: var(--main-cl-2);
}
.home-header .header-menu .menu > .item:not(.current):not(:hover) > a:before,
.home-header .header-menu .menu > .item:not(:hover) .submenu{
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .1s;
}
.home-header .header-menu .submenu{
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: 250px;
    color: var(--dark-cl-2);
    background-color: var(--light-cl);
    padding: 10px 0;
    list-style: none;
    margin: 0;
    transition: .3s;
}
.home-header .header-menu .submenu .item{
    display: block;
}
.home-header .header-menu .submenu .item > a{
    padding: 9px 20px 8px;
}
.home-header .header-menu .submenu .item:not(:first-child) > a:before{
    position: absolute;
    content: '';
    top: -1px;
    left: 15px;
    right: 15px;
    border-top: 1px solid #e1e1e1;
}
.home-header .header-menu .submenu .item.current > a{
    font-weight: 600;
    color: var(--main-cl);
    background-color: #e1e1e1;
}
.home-header .header-menu .submenu .item > a:hover{
    color: var(--main-cl);
    background-color: #e1e1e1;
}
.home-header .header-menu .submenu .item.current > a:before,
.home-header .header-menu .submenu .item > a:hover:before{
    border-top-color: transparent;
}
.home-header{
    transition: .3s;
}
.home-header:not(.on){
    transform: translateY(-100%);
}
.home-header:not(.on) .header-logo{
    margin-bottom: 0;
}
.home-header.on .toggle-main-menu .off,
.home-header:not(.on) .toggle-main-menu .on{
    display: none;
}
.home-header:not(.on) .toggle-main-menu{
    top: 100%;
}
.home-page.has-map .home-header .toggle-main-menu{
    left: 250px;
}
.home-page.has-map ~ * .grecaptcha-badge{
    opacity: 0;
    overflow: hidden;
}
.home-header .toggle-main-menu{
    position: absolute;
    top: 100%;
    left: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    transition: .3s;
}
.home-header .toggle-main-menu:before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    opacity: .2;
    transition: .1s;
}
.home-header .toggle-main-menu:hover:before{
    opacity: .5;
}
.home-header .toggle-main-menu img{
    width: 1em;
    height: 1em;
    object-fit: cover;
    position: relative;
}
@media (min-width: 1200px){
    body ::-webkit-scrollbar{
        width: 6px;
        height: 6px;
    }
    body ::-webkit-scrollbar-thumb{
        background-color: rgba(0,0,0,.2);
        border-radius: 100px;
    }
    body ::-webkit-scrollbar-thumb:hover{
        cursor: pointer;
        background-color: rgba(0,0,0,.5);
    }
    body ::-webkit-scrollbar-track{
        background: var(--line-cl);
    }
}
/*----- VERTICAL MENU -----*/
#sceneListToggle{
    position: absolute;
    top: 40px;
    left: 0;
    background-color: transparent;
    z-index: 2;
    transition: .3s;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
#sceneListToggle .icon{
    position: static;
    width: 1em;
    height: 1em;
}
#sceneList.enabled{
    margin: 0;
    transform: none;
}
#sceneList{
    position: fixed;
    top: 40px;
    bottom: 0;
    left: 0;
    width: 250px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    transition: .3s;
    transform: translateX(-101%);
}
#sceneList .head{
    display: flex;
    align-items: center;
    padding: 15px 10px;
}
#sceneList .title{
    flex: 1 1 auto;
    text-transform: uppercase;
    margin: 0;
    margin-inline-end: 15px;
    text-shadow: 3px 3px 10px #000;
    color: var(--main-cl-t);
}
#sceneList:before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--main-cl-2);
    opacity: .5;
    z-index: -1;
    pointer-events: none;
}
#sceneList:after{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(rgba(0,0,0,.1), transparent);
    z-index: -1;
    pointer-events: none;
}
#sceneList .scenes{
    flex: 1 1 auto;
    height: 1%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px 15px;
    background-color: transparent;
}
#sceneList .scenes .scene{
    display: block;
    height: auto;
    padding: 11px 12px;
    font-size: 13px;
    line-height: 22px;
    color: var(--main-cl-t);
    background-color: var(--main-cl) !important;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    font-style: italic;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.7);
    position: relative;
}
#sceneList .scenes .scene:not(:first-child){
    margin-top: 8px;
}
#sceneList .scenes .scene:hover,
#sceneList .scenes .scene.current{
    color: var(--main-cl-2);
}
#sceneList .scenes .scene:hover:before,
#sceneList .scenes .scene.current:before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--dark-cl);
    opacity: .5;
}
#sceneList .scenes .scene .text{
    width: auto;
    height: auto;
    padding: 0;
    line-height: inherit;
    overflow: visible;
    white-space: normal;
    position: relative;
}
@media (min-width: 1200px){
    body ::-webkit-scrollbar{
        width: 6px;
        height: 6px;
    }
    body ::-webkit-scrollbar-thumb{
        background-color: rgba(0,0,0,.2);
        border-radius: 100px;
    }
    body ::-webkit-scrollbar-thumb:hover{
        cursor: pointer;
        background-color: rgba(0,0,0,.5);
    }
    body ::-webkit-scrollbar-track{
        background: var(--line-cl);
    }
}
/*----- TITLEBAR -----*/
body{
    --bar-btn-size: 36px;
    --bar-btn-fz: 24px;
    --bar-btn-offset: 15px;
    --bar-btn-gap: 6px;
    --bar-btn-num: 8;
    /*--bar-btn-container: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 19 + var(--bar-btn-gap) * 24 + 10px);*/
    --bar-btn-container: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 16 + var(--bar-btn-gap) * 21 + 10px);
    --name-fz: 13px;
    --name-lh: 24px;
}
#titleBar{
    position: fixed;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 0 !important;
    padding: 5px 0 0;
    padding-inline-end: var(--bar-btn-container);
    text-align: end;
    z-index: 1;
}
#titleBar:before{
    position: absolute;
    content: '';
    top: auto;
    bottom: 0;
    height: 46px;
    right: -50px;
    width: calc(var(--bar-btn-container) + 50px);
    transform: skew(-35deg);
    transform-origin: top;
    pointer-events: none;
    background-color: var(--light-cl);
    z-index: 1;
}
#titleBar:after{
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 5px solid var(--light-cl);
    z-index: 1;
}
#titleBar .sceneName{
    display: inline-block;
    vertical-align: top;
    width: auto;
    height: auto;
    font-size: var(--name-fz) !important;
    line-height: var(--name-lh) !important;
    padding-top: calc((var(--bar-btn-size) - var(--name-lh)) / 2);
    padding-bottom: calc((var(--bar-btn-size) - var(--name-lh)) / 2 + 5px);
    padding-inline-start: 26px;
    padding-inline-end: 42px;
    background-color: transparent;
    position: relative;
    top: -41px;
    overflow: visible;
    text-transform: uppercase;
    color: var(--main-cl-2);
    cursor: pointer;
}
#titleBar .sceneName:before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--main-cl);
    transform: skew(-35deg);
    z-index: -1;
}
#titleBar .sceneName:not(:hover) .info{
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -10px);
    transition: .1s;
}
#titleBar .sceneName .info{
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    width: 168px;
    min-width: 100%;
    color: var(--dark-cl);
    background-color: var(--light-cl);
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, .1); */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset;
    padding: 8px 15px;
    transition: .3s;
    text-align: start;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    white-space: normal;
    text-transform: none;
    z-index: 2;
}
#titleBar .sceneName .info:after{
    position: absolute;
    content: '';
    top: calc(100% - 1px);
    left: 78px;
    border-top: 7px solid var(--light-cl);
    border-inline-start: 6px solid transparent;
    border-inline-end: 6px solid transparent;
}
#titleBar .sceneName .info .next{
    display: block;
    color: var(--main-cl);
    margin-top: 3px;
}
.clock-right,
.clock-left,
.control-btn,
.auto-right,
.auto-left,
.mouse-lock,
.auto-scene,
.to-expand,
.guide-menu,
#autorotateToggle,
#fullscreenToggle,
.viewControlButton{
    position: fixed;
    top: auto !important;
    bottom: 5px !important;
    left: auto !important;
    right: var(--bar-btn-offset) !important;
    font-size: var(--bar-btn-fz);
    width: var(--bar-btn-size) !important;
    height: var(--bar-btn-size) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--main-cl-t);
    background-color: var(--main-cl);
    border-radius: 50%;
    padding: 0;
    z-index: 2;
    transition: .2s;
}
.clock-right:hover,
.clock-left:hover,
.control-btn:hover,
.auto-right:hover,
.auto-left:hover,
.mouse-lock:hover,
.auto-scene:hover,
.btn-audio a:hover,
.to-expand:hover,
.guide-menu:hover,
#autorotateToggle:hover,
#fullscreenToggle:hover,
.viewControlButton:hover{
    color: var(--main-cl-2);
    box-shadow: 0 0 15px 1px var(--main-cl-2);
}
.btn-audio a.active{
    color: var(--main-cl-2);
}
#autorotateToggle img,
#fullscreenToggle img,
.viewControlButton img{
    position: static !important;
    width: 1em !important;
    height: 1em !important;
}
.clock-right{
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) + var(--bar-btn-gap) * 3) !important;
}
.clock-left{
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 2 + var(--bar-btn-gap) * 4) !important;
}
.control-btn{
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 3 + var(--bar-btn-gap) * 5) !important;
}
/*.auto-right{*/
/*    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 4 + var(--bar-btn-gap) * 6) !important;*/
/*}*/
/*.auto-left{*/
/*    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 5 + var(--bar-btn-gap) * 7) !important;*/
/*}*/
/*.mouse-lock{*/
/*    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 6 + var(--bar-btn-gap) * 8) !important;*/
/*}*/
.to-expand{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 7 + var(--bar-btn-gap) * 11) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 4 + var(--bar-btn-gap) * 8) !important;
}
#fullscreenToggle{
    display: none !important;
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 7 + var(--bar-btn-gap) * 11) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 4 + var(--bar-btn-gap) * 8) !important;
}
#autorotateToggle{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 8 + var(--bar-btn-gap) * 12) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 5 + var(--bar-btn-gap) * 9) !important;
    font-size: calc(var(--bar-btn-fz) + 1px);
    padding-inline-end: 1px;
    padding-bottom: 1px;
}
.viewControlButton-6{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 9 + var(--bar-btn-gap) * 13) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 6 + var(--bar-btn-gap) * 10) !important;
    font-size: calc(var(--bar-btn-fz) - 2px);
}
.viewControlButton-5{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 10 + var(--bar-btn-gap) * 14) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 7 + var(--bar-btn-gap) * 11) !important;
    font-size: calc(var(--bar-btn-fz) - 2px);
}
.viewControlButton-4{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 11 + var(--bar-btn-gap) * 15) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 8 + var(--bar-btn-gap) * 12) !important;
    font-size: calc(var(--bar-btn-fz) - 2px);
    padding-inline-start: 3px;
}
.viewControlButton-3{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 12 + var(--bar-btn-gap) * 16) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 9 + var(--bar-btn-gap) * 13) !important;
    font-size: calc(var(--bar-btn-fz) - 2px);
    padding-inline-end: 3px;
}
.viewControlButton-2{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 13 + var(--bar-btn-gap) * 17) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 10 + var(--bar-btn-gap) * 14) !important;
    font-size: calc(var(--bar-btn-fz) - 2px);
    padding-top: 3px;
}
.viewControlButton-1{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 14 + var(--bar-btn-gap) * 18) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 11 + var(--bar-btn-gap) * 15) !important;
    font-size: calc(var(--bar-btn-fz) - 2px);
    padding-bottom: 3px;
}
.viewControlButton-6,
.viewControlButton-5,
.viewControlButton-4,
.viewControlButton-3,
.viewControlButton-2,
.viewControlButton-1,
#autorotateToggle{
    overflow: visible;
}
.viewControlButton-6 img,
.viewControlButton-5 img,
.viewControlButton-4 img,
.viewControlButton-3 img,
.viewControlButton-2 img,
.viewControlButton-1 img{
    display: none !important;
}
.viewControlButton-6:after,
.viewControlButton-5:after,
.viewControlButton-4:after,
.viewControlButton-3:after,
.viewControlButton-2:after,
.viewControlButton-1:after{
    content: '';
    width: 1em;
    height: 1em;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.viewControlButton-1:after{
    background-image: url('../data/360-icon/up.png');
}
.viewControlButton-6:after{
    background-image: url('../data/360-icon/minus.png');
}
.viewControlButton-5:after{
    background-image: url('../data/360-icon/plus.png');
}
.viewControlButton-4:after{
    background-image: url('../data/360-icon/right.png');
}
.viewControlButton-3:after{
    background-image: url('../data/360-icon/left.png');
}
.viewControlButton-2:after{
    background-image: url('../data/360-icon/down.png');
}
.viewControlButton-1:after{
    background-image: url('../data/360-icon/up.png');
}
.auto-scene{
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 18 + var(--bar-btn-gap) * 24) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 15 + var(--bar-btn-gap) * 21) !important;
}
.auto-right{
    font-size: 21px;
    padding-inline-start: 2px;
}
.auto-left{
    font-size: 21px;
    padding-inline-end: 3px;
}
.auto-right .icon img{
    width: 1em;
    height: 1em;
    transform: rotate(-90deg);
}
.auto-left .icon img{
    width: 1em;
    height: 1em;
    transform: rotate(-90deg);
}
.clock-right .icon img,
.clock-left .icon img,
.control-btn .icon img,
.mouse-lock .icon img,
.auto-scene .icon img{
    width: 1em;
    height: 1em;
}
.auto-scene:not(.active) .icon .pause,
.auto-scene .icon .play{
    display: none;
}
.auto-scene:not(.active) .icon .play{
    display: block;
}
.control-btn:not(.active) .icon:after,
.mouse-lock:not(.active) .icon:after{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 32px;
    height: 0;
    border-top: 2px solid;
    transform: rotate(45deg);
    margin: auto;
}
.btn-audio{
    position: fixed;
    top: auto !important;
    bottom: 5px !important;
    left: auto !important;
    /*right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 15 + var(--bar-btn-gap) * 21) !important;*/
    right: calc(var(--bar-btn-offset) + var(--bar-btn-size) * 12 + var(--bar-btn-gap) * 18) !important;
    display: flex;
    flex-wrap: wrap;
    gap: var(--bar-btn-gap);
}
.btn-audio a{
    font-size: var(--bar-btn-fz);
    width: var(--bar-btn-size) !important;
    height: var(--bar-btn-size) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--main-cl-t);
    background-color: var(--main-cl);
    border-radius: 50%;
    padding: 0;
    z-index: 2;
    transition: .2s;
}
.btn-audio a .text{
    font-size: 12px;
    margin-inline-start: -10px;
}
.btn-audio .audio-mute{
    padding-inline-start: 4px;
}
/*----- FIXED -----*/
#fixed{
    display: none !important;
}
/*----- INTRO -----*/
.tn{
    --color: #e29faa;
}
.sc{
    --color: #dfa0d0;
}
.py{
    --color: #cebf91;
}
.pb{
    --color: #90e9e7;
}
.dhy{
    --color: #8ff0b3;
}
.vn{
    --color: #9895e5;
}
.dt{
    --color: #c8ef83;
}
.pl{
    --color: #88b3e6;
}
.dho{
    --color: #99f084;
}
.intro-heading-title{
    color: var(--main-cl);
    margin-bottom: 20px;
}
.intro-heading-desc{
    text-align: justify;
    margin-bottom: 40px;
}
.intro-texts{
    text-align: center;
    padding: 60px 0 0;
}
.intro-texts .title{
    font-size: 40px;
    line-height: 1.2;
    max-width: 850px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: auto;
    color: var(--main-cl-2);
    -webkit-text-stroke: 1px var(--main-cl);
}
.intro-texts .desc{
    font-size: 20px;
    line-height: 1.4;
    color: var(--dark-cl);
    text-align: justify;
    text-align-last: center;
    margin: 10px 0 0;
}
.intro-texts{}
.intro-texts{}
.intro-images{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.intro-images .intro-image{
    flex: 1 1 auto;
    height: 252px;
    padding: 10px;
}
.intro-images .intro-image a{
    display: block;
    height: 100%;
    overflow: hidden;
}
.intro-images .intro-image a img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: .5s;
}
.intro-images .intro-image a:hover img{
    transform: scale(1.1);
}
.intro-images{}
.intro-images{}
.intro-images{}
.intro-sort{
    padding: 60px 0;
    background-color: #fafafa;
}
.intro-sort .intro-sort-title{
    display: inline-block;
    vertical-align: top;
    color: var(--main-cl);
}
.intro-sort .intro-sort-form{
    float: right;
    margin-inline-start: 30px;
    --input-pd: 6px;
    --input-pd-hz: 12px;
}
.intro-sort .desc{
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    padding: 6px 0;
    margin: 0;
    margin-inline-end: 10px;
}
#intro-sort-content{
    clear: both;
    margin: 20px 0 0;
}
#intro-sort-content > *{
    display: none;
    flex-wrap: wrap;
}
#intro-sort-content.s6 > .sort-6,
#intro-sort-content.s5 > .sort-5,
#intro-sort-content.s4 > .sort-4,
#intro-sort-content.s3 > .sort-3,
#intro-sort-content.s2 > .sort-2,
#intro-sort-content.s1 > .sort-1{
    display: flex;
}
#intro-sort-content > *{
    border-top: 1px solid var(--line-cl-2);
    border-left: 1px solid var(--line-cl-2);
}
#intro-sort-content > * > *{
    width: 100%;
    border-bottom: 1px solid var(--line-cl-2);
    border-right: 1px solid var(--line-cl-2);
    padding: 15px 15px;
    background-color: var(--light-cl);
}
@media (min-width: 1200px){
    #intro-sort-content > .sort-1 > *{
        width: 20%;
    }
}
#intro-sort-content h3{
    width: 100%;
    font-size: 16px;
    margin-bottom: 15px;
}
#intro-sort-content h3:after{
    content: '';
    display: block;
    width: 100px;
    border-bottom: 2px solid var(--color, var(--main-cl));
    margin: 10px 0 0;
}
#intro-sort-content ul li:before{
    color: var(--color, var(--main-cl));
}
/*----- sightseeing-itinerary -----*/
.sightseeing-itinerary{
    text-align: center;
    padding: 60px 0;
    background-color: var(--main-cl);
    color: var(--main-cl-t);
    --light-cl: #111;
    --dark-cl: #fff;
    --dark-cl-2: #e5e5e5;
    --dark-cl-3: #aaa;
}
.sightseeing-itinerary .title{
    margin-bottom: 20px;
}
.sightseeing-itinerary .itineraries{
    padding: 0 10px;
}
.sightseeing-itinerary .itinerary{
    padding: 0 10px;
}
.sightseeing-itinerary .avatar-toggle{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.sightseeing-itinerary .avatar-toggle img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .2s;
}
.sightseeing-itinerary .avatar-toggle:hover img{
    transform: scale(1.1);
}
.sightseeing-itinerary h3{
    font-size: 15px;
    line-height: 22px;
    font-weight: inherit;
    margin: 10px 0 0;
}
/*----- GUIDE -----*/
.guide-menu{
    display: flex;
}
.guide-menu .btn-guide{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    fill: inherit;
}
.guide-menu:not(:hover) .dropdown-menu{
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: .1s;
}
.guide-menu .dropdown-menu{
    list-style: none;
    position: absolute;
    bottom: calc(100% + 5px);
    right: calc(var(--bar-btn-offset) * -1);
    width: 168px;
    min-width: 100%;
    color: var(--dark-cl);
    background-color: var(--light-cl);
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, .1); */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset;
    padding: 8px 0;
    max-height: 276px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .3s;
    text-align: start;
    margin: 0;
    font-size: 13px;
    z-index: 2;
}
.guide-menu .dropdown-menu li a{
    display: block;
    padding: 5px 16px;
}
/* popup */
body:not(.open-guide) .guide-popup{
    opacity: 0;
    visibility: hidden;
}
.guide-popup[data-id="1"] .guide-inner > .content:not(.content-1),
.guide-popup[data-id="2"] .guide-inner > .content:not(.content-2),
.guide-popup[data-id="3"] .guide-inner > .content:not(.content-3),
.guide-popup[data-id="4"] .guide-inner > .content:not(.content-4){
    display: none;
}
.guide-popup{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.guide-popup .guide-overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    background-color: rgba(0,0,0,.8);
}
.guide-popup .guide-inner{
    width: 700px;
    max-width: calc(100% - 15px);
    max-height: 100%;
    color: var(--dark-cl);
    background-color: var(--light-cl);
    overflow-x: hidden;
    margin: auto;
    z-index: 1;
}
.guide-popup .head{
    color: var(--main-cl-t);
    background-color: var(--main-cl);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    padding-inline-end: 40px;
    position: relative;
}
.guide-popup .guide-close{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
}
.guide-popup .guide-close:before{
    display: block;
    font-family: main-icon, sans-serif;
    content: "\e93c";
}
.guide-popup .guide-close:hover{
    color: var(--main-cl-2);
}
.guide-popup .head .subtitle{
    font-size: 14px;
    font-weight: inherit;
    color: inherit;
    margin: 0;
}
.guide-popup .head .title{
    font-size: inherit;
    color: inherit;
    margin: 0;
}
.guide-popup .head .title span{
    font-size: 16px;
    text-transform: uppercase;
}
.guide-popup .head .logo{
    width: 42px;
    margin-inline-end: 10px;
}
.guide-popup .head .content{
    flex: 1 1 auto;
    width: 1%;
}
.guide-popup .guide-inner > .content{
    position: relative;
}
/* steps */
.guide-popup .toggle-steps{
    position: absolute;
    bottom: 100%;
    right: 0;
    padding: 5px 15px;
    padding-inline-end: 10px;
    color: var(--main-cl-2);
}
.guide-popup .toggle-steps:hover{
    color: var(--main-cl-2);
    text-decoration: underline;
}
.guide-popup .toggle-steps .icon{
    display: inline-block;
    vertical-align: top;
    font-size: 19px;
    margin-inline-start: 3px;
}
.guide-popup .content:not(.show-steps) .steps{
    opacity: 0;
    visibility: hidden;
    transition: .1s;
}
.guide-popup .steps{
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 8px 0;
    width: 270px;
    font-size: 13px;
    line-height: 20px;
    text-transform: capitalize;
    max-height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.guide-popup .steps > *{
    padding: 5px 15px;
    margin: 0;
}
.guide-popup .steps > * .icon{
    display: inline-block;
    vertical-align: top;
    font-size: calc(100% - 3px);
    margin: 1px 0 -1px;
    margin-inline-end: 5px;
}
/* scenes */
.guide-popup .scenes .slick-track,
.guide-popup .scenes .slick-slide,
.guide-popup .scenes .slick-slide > div{
    display: flex;
    height: auto;
}
.guide-popup .scene{
    position: relative;
}
.guide-popup .scene img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.guide-popup .scene h4{
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    padding: 5px 10px;
    font-size: 15px;
    margin: 0;
}
/* desc */
.guide-popup .content-3{
    padding: 10px 15px;
}
.guide-popup .content-3 p{
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}
.guide-popup .content-3 .link{
    text-align: end;
    margin: 10px 0 0;
}
.guide-popup .content-3 .link a{
    display: inline-block;
    vertical-align: top;
    color: var(--main-cl);
}
.guide-popup .content-3 .link a:hover{
    text-decoration: underline;
}
.guide-popup .content-3 .link .icon{
    display: inline-block;
    vertical-align: top;
    margin-inline-start: 3px;
}
.guide-popup {}
.guide-popup {}
/*----- CONTENT -----*/
.home-content{
    height: 100vh;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.exhibition-btn{
    position: absolute;
    top: 55px;
    right: 15px;
}
.main-360{
    height: 100%;
    transition: filter .2s;
}
.main-map{
    position: relative;
    overflow: hidden;
    --item-size: 40px;
    transition: filter .2s;
}
.main-map .item{
    position: absolute;
    top: 0;
    left: 0;
    width: var(--item-size);
    height: var(--item-size);
    margin-inline-start: calc(var(--item-size) / 2 * -1);
    margin-top: calc(var(--item-size) / 2 * -1);
    transition: .02s linear;
    transform-origin: bottom;
}
.main-map .item:hover{
    transform: scale(1.3);
    transition: .1s linear;
    z-index: 2;
}
.main-map .item:not(:hover) .content{
    opacity: 0;
    visibility: hidden;
}
.main-map .item .content{
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    text-align: center;
}
.main-map .item .image{
    display: block;
    min-width: 150px;
}
.main-map .item .text{
    display: block;
    position: relative;
    color: var(--light-cl);
    background-color: var(--dark-cl);
    padding: 4px 11px;
    white-space: nowrap;
    font-size: 11px;
    line-height: 16px;
}
.main-map .item .text:before{
    position: absolute;
    content: '';
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-top: 6px solid var(--dark-cl);
    border-inline-start: 6px solid transparent;
    border-inline-end: 6px solid transparent;
}
.main-map .item-1{top:32.4%;left:34.1%;}
.main-map .item-2{top:50.5%;left:49%;}
/*.main-map .item-3{top:86.5%;left:54.5%;}*/
/*.main-map .item-4{top:87.5%;left:52.3%;}*/
/*.main-map .item-5{top:86%;left:50.8%;}*/
/*.main-map .item-6{top:74.5%;left:47.5%;}*/
/*.main-map .item-7{top:77.85%;left:49.45%;}*/
/*.main-map .item-8{top:70.5%;left:45.3%;}*/
/*.main-map .item-9{top:75.5%;left:57.5%;}*/
/*.main-map .item-10{top:68.5%;left:60%;}*/
/*.main-map .item-11{top:76%;left:52.5%;}*/
/*.main-map .item-12{top:82.5%;left:61%;}*/
/*.main-map .item-13{top:70.5%;left:52.7%;}*/
/*.main-map .item-14{top:82%;left:55%;}*/
/*.main-map .item-15{top:78.5%;left:56%;}*/
/*.main-map .item-16{top:66.5%;left:58.5%;}*/
/*.main-map .item-17{top:47%;left:33%;}*/
/*.main-map .item-18{top:56.85%;left:35.25%;}*/
/*.main-map .item-19{top:55%;left:34%;}*/
/*.main-map .item-20{top:64%;left:60.9%;}*/
/*.main-map .item-21{top:41.6%;left:47.06%;}*/
/*.main-map .item-22{top:48.8%;left:56.2%;}*/
/*.main-map .item-23{top:49%;left:41%;}*/
/*.main-map .item-24{top:41%;left:45.4%;}*/
/*.main-map .item-25{top:49%;left:66%;}*/
/*.main-map .item-26{top:16%;left:34%;}*/
/*.main-map .item-27{top:57%;left:48.2%;}*/
/*.main-map .item-28{top:66%;left:43.5%;}*/
/*.main-map .item-29{top:61%;left:50.9%;}*/
/*.main-map .item-30{top:62.2%;left:48.7%;}*/
.artifact-point{
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    color: var(--main-cl);
    text-shadow: 0 0 5px rgba(0,0,0,.2);
    z-index: 2;
}
.artifact-point:hover{
    color: var(--main-cl-2);
}
.artifact-2{
    top: 40%;
    left: 60%;
}
.artifact-3{
    top: 70%;
    left: 30%;
}
.artifact-point span{
    font-size: 50px;
    line-height: 1;
}
body.open-avatar .home-header,
body.open-avatar .main-map,
body.open-avatar .intro-content .list-banner,
body.open-avatar .intro-content .intro-sort,
body.open-avatar .sightseeing-itinerary .title,
body.open-avatar .sightseeing-itinerary .itineraries,
body.open-avatar .header,
body.open-avatar .footer,
body.open-avatar .listditich-page .list-item,
body.open-guide .home-header,
body.open-guide .home-content,
body.open-guide .guide-menu,
body.open-guide .to-expand,
body.open-guide .btn-audio,
body.open-guide .auto-scene,
body.open-guide .auto-left,
body.open-guide .auto-right,
body.open-guide .mouse-lock,
body.open-guide .clock-left,
body.open-guide .clock-right,
body.open-guide .control-btn,
body.open-artifact .home-header,
body.open-artifact .guide-menu,
body.open-artifact .to-expand,
body.open-artifact .btn-audio,
body.open-artifact .auto-scene,
body.open-artifact .auto-left,
body.open-artifact .auto-right,
body.open-artifact .mouse-lock,
body.open-artifact .clock-left,
body.open-artifact .clock-right,
body.open-artifact .control-btn,
body.open-artifact .main-360,
body.open-artifact .main-map,
body.open-artifact .toan-canh-popup,
body.artifact-fullscreen .artifact .info,
body.artifact-fullscreen .footer,
body.artifact-fullscreen .header{
    filter: blur(3px);
}
body:not(.open-artifact) .artifact-popup .popup-content{
    opacity: 0;
    visibility: hidden;
}
.artifact-popup .popup-content{
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 9;
    width: 800px;
    height: 800px;
    max-height: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
}
.artifact-popup .model-viewer{
    flex: 1 1 auto;
    width: 100%;
    height: 1%;
    transition: .2s;
}
.artifact-popup model-viewer{
    width: 100%;
    height: 100%;
}
.artifact-popup .buttons-info{
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
}
.artifact-popup .buttons-info .button{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    font-size: 22px;
    padding: 0;
}
.artifact-popup .buttons-info .button-guide{
    font-size: 30px;
}
.artifact-popup .close-viewer{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    color: var(--light-cl);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.artifact-popup .close-viewer:hover{
    color: var(--main-cl-2);
}
.artifact-popup .guide,
.artifact-popup .info{
    height: 0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .4s;
    position: relative;
}
.artifact-popup .info .info-inner{
    position: relative;
    padding: 30px;
    color: var(--light-cl);
    min-height: 100%;
}
.artifact-popup .info .info-inner:before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(-45deg, var(--main-cl), #f99800);
    opacity: .9;
    z-index: -1;
}
.artifact-popup.open-artifact-guide .guide{
    height: 216px;
}
.artifact-popup.open-artifact-info .info{
    height: 40%;
}
.artifact-popup .info .content{
    white-space: pre-wrap;
    margin: 0;
}
.artifact-popup .info .title{
    font-size: 20px;
    text-transform: uppercase;
    color: var(--light-cl);
    margin-bottom: 20px;
}
.artifact-popup{}
.artifact-popup{}
.artifact-popup{}
/*----- FOOTER -----*/
.audio-mute.muted .icon:after{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 32px;
    height: 0;
    border-top: 2px solid;
    transform: rotate(45deg);
    margin: auto;
}
/*==========================================================================
LIST & SINGLE
===========================================================================*/
/*----- HEADER -----*/
.header{
    position: sticky;
    top: 0;
    background-color: var(--light-cl);
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    z-index: 2;
}
.header .header-inner{
    display: flex;
    flex-wrap: wrap;
}
.header .header-logo{
    display: flex;
    align-items: center;
    padding: 5px 15px;
    margin: 0;
}
.header .header-control{
    flex: 1 1 auto;
    width: 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.header .header-menu{
    flex: 1 1 auto;
    width: 1%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}
.header .header-menu .item{
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.header .header-menu .item > a{
    display: block;
    position: relative;
}
.header .header-menu .menu > .item{
    padding: 0 15px;
}
.header .header-menu .menu > .item > a{
    display: block;
    font-size: 16px;
    line-height: 24px;
    padding: 23px 0;
    font-weight: 600;
    text-transform: uppercase;
    transition: .2s, padding .3s;
}
.header .header-menu .menu > .item > a:before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    transition: inherit;
    border-top: 3px solid var(--main-cl);
    width: 100%;
    margin: auto;
}
.header .header-menu .menu > .item:not(.current):not(:hover) > a:before{
    width: 0;
}
.header .header-menu .menu > .item.current > a,
.header .header-menu .menu > .item:hover > a{
    color: var(--main-cl);
    fill: var(--main-cl);
}
.header .menu-dropdown .dropdown-toggle{
    color: var(--main-cl);
}
.header .menu-dropdown .dropdown-toggle{
    padding-inline-start: 20px;
    padding-inline-end: 20px;
    color: inherit;
}
.header .menu-dropdown .dropdown-toggle:hover{
    color: var(--main-cl);
}
.header .header-button{
    display: flex;
}
.header .header-button a{
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    transition: .2s, padding .3s;
    padding-inline-start: 50px;
    padding-inline-end: 50px;
}
.header .header-button a .icon{
    font-size: calc(100% + 2px);
    margin: -2px 0 2px;
    margin-inline-start: 7px;
}
.header.is-sticky .header-menu .item > a{
    padding-top: 18px;
    padding-bottom: 18px;
}
/*----- FOOTER -----*/
.footer{
    background-color: var(--light-cl-2);
}
.footer .footer-middle{
    padding: 60px 0;
}
.footer .footer-middle .column{
    width: 50%;
}
.footer .footer-middle .title{
    text-transform: uppercase;
    font-size: 20px;
    line-height: 24px;
    padding-inline-start: 18px;
    border-inline-start: 4px solid var(--main-cl);
    margin-bottom: 20px;
}
.footer .footer-middle .menu.style-03{
    font-size: 16px;
    line-height: 24px;
}
.footer .footer-middle .menu:not(:last-child){
    margin-bottom: 25px;
}
.footer .footer-middle .menu h5{
    margin: 0;
    text-transform: uppercase;
}
.footer .footer-middle .menu .item a{
    display: block;
    padding: 3px 0;
}
.footer .footer-middle .menu .item a:not(:hover){
    color: #333;
}
.footer .footer-middle .menu .item .sub{
    color: #999;
    font-size: calc(100% - 2px);
}
.footer .footer-middle .menu .item:first-child a{
    margin-top: 0 !important;
}
.footer .footer-middle .menu .item:last-child a{
    padding-bottom: 0 !important;
}
.footer .footer-middle .menu .item .icon{
    display: inline-block;
    vertical-align: top;
    color: var(--main-cl);
    margin-inline-end: 5px;
}
.footer .footer-bottom{
    color: var(--dark-cl-3);
    background-color: var(--dark-cl);
    font-size: 16px;
    line-height: 24px;
    padding: 24px 0;
}
.footer .footer-bottom p{
    margin: 0;
}
.footer .footer-bottom .copyright{
    text-align: center;
}
.footer .footer-bottom a{
    color: var(--light-cl);
}
.footer .footer-bottom a:hover{
    color: var(--main-cl-2);
}
/*----- GENERAL -----*/

/*----- LIST -----*/
.list-page{}
/* banner */
.list-banner{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 50px 0;
    min-height: 600px;
    position: relative;
    display: flex;
    align-items: flex-end;
    color: var(--light-cl);
    --container: 1700px;
}
.list-banner:before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    background-image: linear-gradient(90deg, rgba(0,0,0,.5), transparent);
}
.list-banner .inner{
    max-width: 32%;
    position: relative;
}
.list-banner .title{
    font-size: 40px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--main-cl-2);
    margin: 0 0 25px;
}
.list-banner .desc{
    font-size: 16px;
    line-height: 30px;
    white-space: pre-wrap;
    text-align: justify;
}
.list-banner .desc:not(:last-child){
    margin-bottom: 30px;
}
.list-banner .desc > *:last-child{
    margin-bottom: 0;
}
.custom-ul ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.custom-ul ul li:before{
    display: inline-block;
    vertical-align: top;
    font-family: main-icon, sans-serif;
    content: '\ea26';
    font-size: calc(100% - 2px);
    color: var(--main-cl-2);
    margin-inline-end: 10px;
}
.custom-ul ul li:not(:first-child){
    margin-top: 10px;
}
.list-banner .button{
    min-width: 160px;
}
.list-banner .button:not(:last-child){
    margin-inline-end: 10px;
}
/* artifacts */
.list-artifact{
    padding: 100px 0;
}
.artifacts{
    list-style: none;
    padding: 0;
    margin: 0;
    --cols: 5;
}
.artifacts .item{
    /*padding: var(--cols-gap);*/
    /*background-color: var(--light-cl-2);*/
    /*text-align: center;*/
}
.artifacts .item .item-inner{
    display: flex;
    flex-direction: column;
}
.artifacts .item .thumb{
    margin-bottom: 10px;
}
.artifacts .item .thumb a{
    display: block;
    position: relative;
    overflow: hidden;
}
.artifacts .item .thumb a img{
    transition: .1s;
}
.artifacts .item .thumb a:hover img{
    transform: scale(1.1);
    transition: .4s;
}
.artifacts .item .info{
    text-align: start;
}
.artifacts .item .info-1{
    /*flex: 1 1 auto;*/
}
.artifacts .item .info-2{
    border-top: 1px solid #ddd;
    padding-top: 8px;
    margin-top: 8px;
}
.artifacts .item .title{
    text-transform: uppercase;
    font-size: 18px;
    line-height: 26px;
    color: var(--main-cl);
    /*text-align: center;*/
    margin: 0 0 2px;
}
.artifacts .item p{
    font-size: 14px;
    line-height: 22px;
    margin: 2px 0 0;
}
.artifacts .item p strong{
    font-weight: 600;
    color: var(--dark-cl);
}
.artifacts .item .code{
    /*text-align: center;*/
    font-weight: 600;
    color: var(--dark-cl);
    font-size: 14px;
    margin: 0 0 5px
}
.artifacts .empty{
    width: 100%;
    font-size: 16px;
    color: red;
}
/* pagination */
.list-artifact .control:first-child{
    margin-bottom: 30px;
}
.list-artifact .control:last-child{
    margin-top: 30px;
    border-top: 1px solid var(--line-cl);
    padding-top: 20px;
}
.control{
    font-size: 18px;
    line-height: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rows-gap) var(--cols-gap);
}
.control > *{
    flex: 1 1 auto;
}
.control > *:last-child:not(:first-child){
    text-align: end;
    justify-content: flex-end;
}
.control:first-child{
    align-items: flex-end;
}
.control:first-child > *{
    display: flex;
    flex-wrap: wrap;
}
.control > *:first-child form{
    display: none;
    text-align: end;
}
.result-show{
    font-size: 16px;
    margin: 0;
}
.result-show span{
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-cl);
}
.pagination{
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    color: var(--dark-cl-3);
    margin: 0 -5px;
}
.pagination li{
    display: inline-block;
    vertical-align: top;
}
.pagination .page-link{
    display: inline-block;
    vertical-align: top;
    min-width: 24px;
    font-size: 18px;
    line-height: 24px;
    padding: 0 3px;
    text-align: center;
}
.pagination .page-link .icon{
    font-size: calc(100% - 4px);
}
.pagination .disabled{
    display: none;
}
.pagination .active .page-link{
    color: var(--dark-cl);
    font-weight: 600;
    text-decoration: underline;
}
.pagination .page-link:hover{
    font-weight: 600;
}
.control-filters{
    align-items: center;
    font-size: 16px;
    --input-pd-hz: 15px;
}
.control-pagination .text,
.control-filters .text{
    font-size: 16px;
    margin: 0;
    margin-inline-end: .5em;
}
.control-pagination{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.control-filters.filter-name form:not(.form-name),
.control-filters.filter-location form:not(.form-location),
.control-filters.filter-decision form:not(.form-decision),
.control-filters.filter-type form:not(.form-type),
.control-filters.filter-no .filters-clear{
    display: none;
}
/*----- SINGLE -----*/
.artifact{
    padding: 100px 0;
}
.artifact .artifact-inner{
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}
.artifact .thumb{
    width: 40%;
}
.artifact .thumb img{
    width: 100%;
}
.artifact model-viewer{
    width: 100%;
    height: 500px;
    max-width: 100%;
    max-height: 100%;
}
.model-viewer{
    position: relative;
    width: 100%;
    z-index: 1;
}
.model-viewer:before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    opacity: .5;
}
.model-viewer .buttons{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    animation: button-fade-in 2s;
}
body.artifact-fullscreen .artifact .model-viewer{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
}
body.artifact-fullscreen .artifact .model-viewer model-viewer{
    width: 100%;
    height: 100%;
}
body.artifact-fullscreen .model-viewer:before{
    opacity: .8;
}
body:not(.artifact-fullscreen) .button-fullscreen-off{
    display: none;
}
body.artifact-fullscreen .artifact-popup .popup-content{
    top: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: 100%;
}
body.artifact-fullscreen .artifact-popup .buttons-info,
body.artifact-fullscreen .artifact-popup .info{
    display: none;
}
body.artifact-fullscreen .artifact-popup .close-viewer{
    display: none;
}
.button-fullscreen-off{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button-fullscreen-off:hover{
    color: var(--main-cl-2);
}
@keyframes button-fade-in{
    0%{
        opacity: 0;
        visibility: hidden;
    }
    95%{
        opacity: 0;
        visibility: hidden;
    }
    100%{
        opacity: 1;
        visibility: visible;
    }
}
.model-viewer .buttons a{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: #fff;
}
.model-viewer .buttons a:hover{
    color: var(--main-cl-2);
}
.model-viewer .buttons-audio{
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
}
.model-viewer .buttons-audio a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 24px;
}
.model-viewer .buttons-audio a .text{
    font-size: 12px;
    margin-inline-start: -10px;
}
.model-viewer .buttons-audio a.active,
.model-viewer .buttons-audio a:hover{
    color: var(--main-cl-2);
}
.model-viewer .buttons-audio .audio-mute{
    padding-inline-start: 7px;
}
.artifact .info{
    flex: 1 1 auto;
    width: 1%;
}
.artifact .title{
    font-size: 30px;
    line-height: 40px;
    text-transform: uppercase;
    color: var(--dark-cl);
}
.artifact .code{
    font-size: 16px;
    color: var(--main-cl);
    font-weight: 600;
}
.artifact .content{
    font-size: 18px;
    line-height: 30px;
    white-space: pre-wrap;
}
.artifact .buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}
.artifact .columns{
    font-size: 16px;
    line-height: 24px;
    list-style: none;
    padding: 0;
    color: var(--dark-cl);
    margin: 0 0 25px;
}
.artifact .columns li:not(:last-child){
    margin-bottom: 5px;
}
.artifact .columns li span{
    display: inline-block;
    vertical-align: top;
    font-size: calc(100% - 2px);
    color: var(--dark-cl-3);
    margin-inline-end: 3px;
}
.artifact .button .icon{
    display: inline-block;
    vertical-align: top;
    font-size: 17px;
    margin-inline-end: 8px;
}
.artifact .button-simulation{
    margin-inline-end: 5px;
}
.popup:not(.open){
    display: none;
}
.popup{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    transition: .3s;
}
.popup .overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #000;
}
.popup .container{
    height: 100%;
}
.popup iframe{
    height: 100%;
}
.popup .close{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    color: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup .close:hover{
    color: var(--main-cl-2);
}
.artifact-pagination{
    padding-top: 20px;
    border-top: 1px solid var(--line-cl);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    justify-content: space-between;
}
.artifact-pagination .button{
    font-size: 16px;
    padding: 5px 0;
    background-color: transparent;
    text-transform: none;
    color: var(--dark-cl);
    border-bottom: 1px solid;
}
.artifact-pagination .button:hover{
    color: var(--main-cl);
}
.artifact-pagination .prev span{
    margin-inline-start: -5px;
    margin-inline-end: 5px;
}
.artifact-pagination .next span{
    margin-inline-start: 5px;
    margin-inline-end: -5px;
}
.other-artifacts{
    padding: 0 0 100px;
}
.other-artifacts-title{
    text-transform: uppercase;
    margin-bottom: 20px;
}
.other-artifacts-title:after{
    content: '';
    display: block;
    width: 100px;
    border-bottom: 2px solid var(--color, var(--main-cl));
    margin: 10px 0 0;
}
.other-artifacts-list .slick-list{
    margin: 0 -12px;
}
.other-artifacts-list .slick-prev{
    left: -42px;
}
.other-artifacts-list .slick-next{
    right: -42px;
}
.other-artifacts-list .item{
    padding: 0 12px;
    text-align: center;
}
.other-artifacts-list .item .thumb{
    overflow: hidden;
    position: relative;
}
.other-artifacts-list .item .thumb img{
    transition: .2s;
}
.other-artifacts-list .item .thumb a:hover img{
    transform: scale(1.1);
}
.other-artifacts-list .item .avatar-toggle{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    line-height: 1;
    padding: 10px;
    color: #fff;
    background-color: rgba(0,0,0,.5);
}
.other-artifacts-list .item .avatar-toggle:hover{
    color: var(--main-cl-t);
    background-color: var(--main-cl);
}
.other-artifacts-list .item .title{
    font-size: 15px;
    line-height: 22px;
    font-weight: inherit;
    text-transform: capitalize;
    margin: 10px 0 0;
}
.single-artifact{
    position: relative;
}
.artifact-list-popup{
    position: absolute;
    top: 0;
    right: 0;
}
.artifact-list-popup .dropdown-toggle{
    font-weight: 600;
    padding: var(--btn-pd, var(--input-pd)) var(--btn-pd-hz, var(--input-pd-hz));
    background-color: var(--main-cl);
    text-transform: uppercase;
}
.artifact-list-popup .dropdown-menu{
    font-size: 14px;
    max-height: 316px;
}
.artifact-list-popup .dropdown-menu a{
    padding-top: 5px;
    padding-bottom: 5px;
}
/*----- RELIC -----*/
.single-relic .relic-inner{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 80px;
}
.single-relic .relic-inner .relic-thumb{
    width: 100%;
    margin-bottom: 50px;
}
.single-relic .relic-inner .slick-list{
    margin: 0 -10px;
}
.single-relic .relic-inner .slick-slide{
    padding: 0 10px;
}
.single-relic .relic-inner .slick-arrow{
    top: calc(50% - 25px);
}
.single-relic .relic-inner .slick-arrow:before{
    width: 40px;
    height: 50px;
    font-size: 19px;
}
.single-relic .relic-inner .slick-prev{
    left: -60px;
}
.single-relic .relic-inner .slick-next{
    right: -60px;
}
.single-relic .avatar{
    position: relative;
}
.single-relic .avatar h3{
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    padding: 5px 10px;
    margin: 0;
}
.single-relic .tour-map,
.single-relic .info{
    flex: 1 1 auto;
    width: 1%;
}
.single-relic .name{
    text-transform: uppercase;
}
.single-relic .name:after{
    content: '';
    display: block;
    width: 100px;
    border-bottom: 2px solid var(--color, var(--main-cl));
    margin: 10px 0 0;
}
.single-relic .desc{
    font-size: 18px;
    line-height: 1.5;
    color: var(--dark-cl);
}
.single-relic .link{
    display: block;
    color: var(--main-cl);
    margin: 0 0 20px;
}
.single-relic .link .icon{
    display: inline-block;
    vertical-align: top;
    margin-inline-start: 3px;
}
.single-relic .link:hover{
    text-decoration: underline;
}
.single-relic .buttons-audio{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}
.single-relic .buttons-audio a{
    overflow: hidden;
}
.single-relic .buttons-audio a .icon:before{
    display: none;
}
.single-relic .buttons-audio .active{
    color: var(--main-cl-2);
}
.single-relic .audio-mute.muted .icon:after{
    width: 60px;
}
/*----- HIDDEN -----*/
.hidden-mess{
    font-size: 20px;
    line-height: 1.2;
    color: #000;
}
/*----- CONTACT -----*/
.contact-info{
    padding: 100px 0 0;
}
.contact-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.contact-list > *{
    width: calc((100% - 30px) / 2);
}
.contact-list .contact-map{
    margin-bottom: 20px;
}
.contact-list .name{
    font-size: 16px;
    margin-bottom: 15px;
}
.contact-list .name:after{
    content: '';
    display: block;
    width: 100px;
    border-bottom: 2px solid var(--color, var(--main-cl));
    margin: 10px 0 0;
}
.contact-list .address{
    margin-bottom: 10px;
}
.contact-list .address:before{
    display: inline-block;
    vertical-align: top;
    font-family: main-icon, sans-serif;
    content: '\e9ad';
    color: var(--color, var(--main-cl));
    margin-inline-end: 8px;
}
.contact-list .phone{
    position: relative;
    padding-inline-start: 22px;
}
.contact-list .phone:before{
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    vertical-align: top;
    font-family: main-icon, sans-serif;
    content: '\e9b0';
    color: var(--color, var(--main-cl));
    margin-inline-end: 8px;
}
.contact-list .email:before{
    content: '\e9e8';
}
.contact-list .phone p{
    margin-bottom: 10px;
}
/* contact-form */
.contact-form-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 60px 0;
}
.contact-form-wrap > *{
    flex: 1 1 auto;
    width: 1%;
}
.contact-info .head .title,
.contact-form .head .title{
    text-align: center;
    margin-bottom: 20px;
}
.contact-form .messages .alert{
    margin-bottom: 20px;
}
.contact-form .alert-success{
    color: green;
}
.contact-form .alert-danger{
    color: red;
}
.contact-form form{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.contact-form .field-name,
.contact-form .field-email{
    width: calc(50% - 10px);
}
.contact-form .field-message{
    width: 100%;
}
.contact-form .form-control{
    width: 100%;
}
.contact-form .btn{
    min-width: 250px;
}
.contact-form{}
/*----- LIST DI TICH -----*/
.listditich-page{
    padding: 60px 0;
}
.listditich-page .control-filters{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
}
.listditich-page .result-show{
    flex: 1 1 auto;
    padding: 9px 0;
}
.listditich-page .search-form{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.listditich-page .search-form label{
    margin-inline-end: 5px;
}
.listditich-page .item{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid #e5e5e5;
    margin-top: 30px;
}
.listditich-page .item .text{
    display: block;
    width: 25%;
}
.listditich-page .item .name{
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 5px;
}
.listditich-page .item .name:after{
    /*display: block;*/
    /*content: '';*/
    /*width: 100px;*/
    /*border-bottom: 2px solid var(--color, var(--main-cl));*/
    /*margin: 10px 0 0;*/
}
.listditich-page .item .avatar-main{
    width: 106px;
    float: left;
    margin: 7px 14px 7px 0;
}
.listditich-page .item .desc{
    line-height: 24px;
    margin-bottom: 10px;
}
.listditich-page .item .link{
    display: block;
    color: var(--main-cl);
}
.listditich-page .item .link:hover{
    text-decoration: underline;
}
.listditich-page .item .link .icon{
    display: inline-block;
    vertical-align: top;
    margin-inline-start: 3px;
}
.listditich-page .item .link ~ .link{
    margin-top: 5px;
}
.listditich-page .item .avatars{
    flex: 1 1 auto;
    width: 1%;
}
.listditich-page .item .avatars .slick-track{
    display: flex;
}
.listditich-page .item .avatars .slick-slide{
    height: auto;
    display: flex;
}
.listditich-page .item .avatars .slick-slide > div{
    display: flex;
}
.listditich-page .item .avatars:not(.slick-initialized){
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
}
.listditich-page .item .avatars:not(.slick-initialized) > *{
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 20px) / 3);
}
.listditich-page .item .avatars:not(.slick-initialized) > *:not(:first-child){
    margin-inline-start: 10px;
}
.listditich-page .item .avatars .slick-prev{
    left: -30px;
}
.listditich-page .item .avatars .slick-next{
    right: -30px;
}
.listditich-page .item .avatar{
    display: flex !important;
    flex-direction: column;
    text-align: center;
    padding: 0 5px;
}
.listditich-page .item .avatar h3{
    font-size: 15px;
    line-height: 22px;
    font-weight: inherit;
    margin: 10px 0 0;
}
.listditich-page .item .avatar a{
    flex: 1 1 auto;
    height: 1%;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    overflow: hidden;
}
.listditich-page .item .avatar a img{
    min-height: 100%;
    object-fit: cover;
    transition: .2s;
}
.listditich-page .item .avatar a:hover img{
    transform: scale(1.1);
}
body:not(.open-avatar) .avatar-popup-content{
    opacity: 0;
    visibility: hidden;
}
.avatar-popup-content{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}
.avatar-overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.8);
    cursor: pointer;
}
.avatar-close{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.avatar-close:hover{
    color: var(--main-cl-2);
}
.avatar-close:before{
    display: block;
    font-family: main-icon, sans-serif;
    content: "\e93c";
}
.avatar-image{
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-image img{
    max-height: 100%;
    transition: .2s;
    transform: scale(var(--scale, 1));
}
.avatar-zoom{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}
.avatar-zoom:hover{
    color: var(--main-cl-2);
}
.avatar-zoom.zoom-out{
    top: 40px;
}
.avatar-zoom.zoom-in:before{
    display: block;
    font-family: main-icon, sans-serif;
    content: '\e93a';
}
.avatar-zoom.zoom-out:before{
    display: block;
    font-family: main-icon, sans-serif;
    content: '\e93b';
}
.intro-video a{
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    position: relative;
}
.intro-video .name{
    display: block;
    margin: 10px 0 40px;
    font-size: 18px;
    font-style: italic;
    text-align: center;
    text-align: center;
    color: var(--dark-cl);
}
.intro-video a:hover .icon{
    opacity: 1;
}
.intro-video .icon{
    position: absolute;
    top: 0;
    bottom: 200px;
    left: 0;
    right: 0;
    color: #fff;
    border: 5px solid;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    padding-left: 7px;
    margin: auto;
    opacity: .6;
    transition: .2s;
}
.avatar-toggle.video{}
.avatar-toggle.video{}
.avatar-popup-content.video video{
    height: 100%;
}
.avatar-popup-content.video{}
.avatar-popup-content.video{}
.avatar-popup-content.video{}
/* avatars-frame */
.single-relic{
    position: relative;
}
.avatars-frame{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.avatars-frame .avatars-frame-toggle .icon{
    margin-inline-start: 10px;
    font-size: calc(100% - 2px);
}
.avatars-frame.open .avatars-frame-toggle .icon:before{
    content: "\ea2d";
}
.avatars-frame:not(.open) .avatar-list{
    transform: translateX(-100%);
}
.avatars-frame .avatar-list{
    position: absolute;
    top: 40px;
    left: 0;
    width: 250px;
    color: #000;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--line-cl) inset;
    transition: .2s;
    padding: 8px 0;
    max-height: calc(100vh - 110px);
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.avatars-frame .avatar-list a{
    display: block;
    padding: 8px 12px;
}
.avatars-frame .avatars-frame-close{
    position: absolute;
    top: 0;
    right: 0;
}
body:not(.toan-canh-opened) .toan-canh-popup{
    opacity: 0;
    visibility: hidden;
}
body.toan-canh-opened{}
.toan-canh-popup{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    transition: .2s;
}
.toan-canh-popup iframe{
    height: 100%;
}
.toan-canh-popup .guide-open-popup{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px 15px;
    color: #fff;
    background-color: rgba(103, 115, 131, 0.8);
    width: 180px;
    text-align: center;
}
.toan-canh-popup .guide-open-popup:hover{
    color: var(--main-cl-2);
    box-shadow: 0 0 15px 1px var(--main-cl-2);
}
.close-toan-canh:before{
    display: block;
    font-family: main-icon, sans-serif;
    content: "\e93c";
}
body.toan-canh-opened .toggle-main-menu,
body.toan-canh-opened .home-header .header-control > *:not(.toan-canh-head),
body:not(.toan-canh-opened) .home-header .header-control .toan-canh-head{
    display: none;
}
body.toan-canh-opened .btn-audio{
    z-index: 3;
    right: 190px !important;
    bottom: 0 !important;
    --bar-btn-gap: 10px;
}
body.toan-canh-opened .btn-audio a{
    background-color: rgba(103, 115, 131, 0.8);
    border-radius: 0;
    --bar-btn-size: 40px;
}
.home-header .header-control .toan-canh-head{
    display: flex;
    width: 100%;
}
.home-header .header-control .toan-canh-head .title{
    flex: 1 1 auto;
    width: 1%;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: var(--main-cl-t);
    text-transform: uppercase;
    padding: 10px 20px;
    margin: 0;
}
.home-header .header-control .toan-canh-head .close-toan-canh{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: var(--main-cl-t);
    font-size: 19px;
}
.home-header .header-control .toan-canh-head .close-toan-canh:hover{
    color: var(--main-cl-2);
}
.home-header .header-control .toan-canh-head{}
.home-header .header-control .toan-canh-head{}
.info-hotspot .info-hotspot-header{
    color: #fff;
}
.loading-spinner{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-spinner:before{
    content: '';
    width: 1em;
    height: 1em;
    border-radius: 1em;
    border: 2px solid;
    border-top-color: transparent;
    border-left-color: transparent;
    animation: fa-spin 2s linear infinite;
}
@-webkit-keyframes fa-spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}
@media (max-width: 767px){
    .home-header{
        position: relative;
    }
    .header-logo .content{
        display: none;
    }
    .home-header .header-logo{
        margin: 0 15px -10px;
    }
    .header-logo a{
        padding: 5px;
    }
    .home-header .header-menu,
    .home-header .header-language{
        display: none;
    }
    .intro-texts{
        padding: 30px 0 0;
    }
    .intro-texts .title{
        font-size: 30px;
    }
    .intro-texts .desc{
        font-size: 17px;
    }
    .intro-images{
        margin: 0 -7px;
    }
    .intro-images .intro-image{
        padding: 7px;
    }
    .intro-sort{
        padding: 30px 0;
    }
    .intro-heading-title{
        margin-bottom: 15px;
    }
}