video {object-fit: fill;}
.hidden{
    display: none !important;
}

button{cursor:pointer;}
button:focus{outline:none;}

body{
    background:#000;
}

#header{
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

#wrap.menuOpen #header,
#wrap.guideOpen #header{
    z-index: 2;
    opacity: 0;
}

.fclear {*zoom:1}
.fclear:after {display:block; content:""; clear:both;}

.contents *{
    box-sizing: border-box;
}


/* --- SCROLL --- */
/* width */
::-webkit-scrollbar {
    width: 0;
}
/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #888;
}


/* --- INTRO --- */

#intro {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 440px;
    background-color: #000;
    z-index: 6;
}

#intro .bgVideo{
    width: 100%;
    height: 100%;
}
#intro .bgVideo video{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}

#intro .introCon{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-46%);
    z-index: 5;
}
#intro .introCon .introText{
    padding: 20px 28px 0;
}
#intro .introCon .introText p{
    color:#fff;
    text-align: center;
}
#intro .introCon .introText .top{
    margin-bottom: 16px;
}
#intro .introCon .introText .title10{
    margin-bottom: 24px;
}
#intro .introCon .introText .desc{
    font-size: 16px;
    max-width: 326px;
    margin:0 auto 40px;
}
#intro .introCon .introText .desc br{
    display: none;
}

.intro-buttons-quality-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    z-index: 9;
}

.btn.box.arrow.intro-button {
    float: left;
    width: 164px;
    text-align: left;
    text-decoration: none;
    font-size: 13px;
    color: #fff;
    border-color:#fff;
    outline:none;
}
.btn.box.arrow.btn_long.intro-button{
    margin-top: 0;
}
.btn.arrow.intro-button:before{
    background-color:#fff;
}
.btn.arrow.intro-button:after{
    border-color: #fff;
}

.entry-btn{
    text-align: left;
    z-index: 9;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.intro-buttons-quality-container.active .entry-btn{
    opacity: 0;
    background-color:transparent;
    -webkit-transition: opacity 0.6s;
    -ms-transition: opacity 0.6s;
    transition: opacity 0.6s;
}


.btn.box.quality-btn{
    opacity: 0;
    position: absolute;
    top: 0;
    min-width: inherit;
    color:#fff;
    text-align: center;
    padding: 12px 14px 11px;
    border-color:#fff;
    -webkit-transition: opacity 0.15s;
    -ms-transition: opacity 0.15s;
    transition: opacity 0.15s;
    z-index: 8;
}
.intro-buttons-quality-container.active .quality-btn{
    opacity: 1;
    z-index: 10;
    -webkit-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    transition: opacity 0.4s;
}
.btn.box.quality-btn.video-quality-hd{
    left: 0;
    width: calc(50% + 1px);
}
.btn.box.quality-btn.video-quality-sd{
    right: 0;
    width: calc(50% + 1px);
}

.video-quality-hd{}

.video-quality-sd{}

.infoText{
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.intro-buttons-quality-container.active + .infoText{
    opacity: 1;
}
.infoText p{
    color: #fff;
}

#intro .btnArea{
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
}
#intro .btnArea a{
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 9;
}
#intro .btnArea .goFac{
    left: 40px;
    color: #fff;
    font-weight: normal;
    line-height: 50px;
    padding-left: 60px;
}
#intro .btnArea .goFac:before{
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background:url('../../../images/rnd/online-museum/ico_arr_factory.svg') no-repeat 14px 50% rgba(255,255,255,0.94);
    background-size:22px;
    z-index: 1;
    -webkit-transition: width 0.4s;
    -ms-transition: width 0.4s;
    transition: width 0.4s;
}
#intro .btnArea .goFac:hover:before{
    width: 210px;
    background-image:url('../../../images/rnd/online-museum/ico_arr_factory_hov.svg');
    background-size:36px;
    background-position-x: 14px;
}
#intro .btnArea .goFac span{
    position: relative;
    z-index: 1;
}
#intro .btnArea .goFac:hover span{
    color: #000;
}
#intro .btnArea .copySuccess{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    opacity: 0;
    text-align: center;
    line-height: 40px;
    z-index: 5;
    -webkit-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
#intro .btnArea .copySuccess.active{
    opacity: 1;
    animation:alphaZero 0.5s forwards;
    animation-delay: 1.5s;
}
@keyframes alphaZero {
    0%{opacity:1;}
    100%{opacity:0;}
}
#intro .btnArea .goLink{
    right: 20px;
    width: 40px;
    height: 40px;
    color:rgba(0,0,0,0);
    font-weight: normal;
    line-height: 50px;
    padding-left: 22px;
    white-space: nowrap;
    border-radius: 25px;
    background:url('../../../images/rnd/online-museum/ico_link.svg') no-repeat 50% 50% #fff;
    background-size:22px;
    -webkit-transition: width 0.4s, color 0.2s;
    -ms-transition: width 0.4s, color 0.2s;
    transition: width 0.4s, color 0.2s;
}

/* --- GUIDE --- */

#guide{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    opacity: 0;
    width: 100%;
    height: 100%;
    min-height: 700px;
    z-index: 7;
    background:rgba(103,117,68,0.98);
    -webkit-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
#guide.active{
    display: block;
}
#guide.inMot{
    opacity: 1;
    z-index: 999;
}
.guide_inner{
    position: relative;
    top: 50%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#guide .title{
    color:#fff;
    line-height: 1;
    letter-spacing: -0.7px;
    margin-bottom: 10%;
}
.guide_inner .pageBox{
    line-height: 1;
    margin-bottom: 20px;
}
.guide_inner .pageBox span{
    color: #fff;
}
.guide_inner .pageBox .current{}
.guide_inner .pageBox .line{
    opacity: 0.45;
    margin: 0 2px 0 4px;
}
.guide_inner .pageBox .total{
    opacity: 0.45;
}
#guide .stepList{
    width: 400%;
    margin-bottom: 10%;
    -webkit-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    transition: transform 0.4s;
}
#guide .stepList li{
    display:block;
    float: left;
    width: 25%;
}
#guide .stepList li .step{
    text-align: center;
}
#guide .stepList li .step span{
    display: block;
    float: left;
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    color:#000;
    margin-right: 16px;
    background:#fff;
    border-radius:50%;
}
#guide .stepList li .step p{
    width: 60%;
    color:#fff;
    line-height: 1.8;
    margin: 0 auto;
}
#guide .stepList li .step p br{
    display: none;
}
#guide .stepList li .icoArea{
    height: 180px;
    font-size: 0;
    margin: 50px auto 0;
    background-repeat:no-repeat;
    background-position-y:50%;
    background-size:cover;
}
#guide .stepList li:first-child .icoArea{
    width: 150px;
    background-image:url('../../../images/rnd/online-museum/seq_guide1.png');
    background-size:auto 100px;
    animation: guideAni 1s steps(29, end) infinite;
    -webkit-animation: guideAni 1s steps(29, end) infinite;
    animation-delay: 500ms;
}
#guide .stepList li:nth-child(2) .icoArea{
    width: 200px;
    background-image:url('../../../images/rnd/online-museum/seq_guide2.png');
    animation: guideAni 3s steps(95, end) infinite;
    -webkit-animation: guideAni 3s steps(95, end) infinite;
    animation-delay: 500ms;
}
#guide .stepList li:nth-child(3) .icoArea{
    width: 200px;
    background-image:url('../../../images/rnd/online-museum/seq_guide3.png');
    animation: guideAni 2s steps(59, end) infinite;
    -webkit-animation: guideAni 2s steps(59, end) infinite;
    animation-delay: 500ms;
}
#guide .stepList li:last-child .icoArea{
    width: 200px;
    background-image:url('../../../images/rnd/online-museum/seq_guide4.svg');
    background-position: 50%;
    background-size:auto 160px;
    margin-top: 24px;
}
#guide .btnArea{
    text-align: center;
}
#guide .btnArea .guide-button,
#guide .btnArea .skip-button{
    display: block;
    vertical-align: middle;
    width: 120px;
    min-width: 120px;
    height: 40px;
    color:#fff;
    text-align: center;
    padding: 0;
    margin: 0 auto;
}
#guide .btnArea .guide-button{
    border:solid 2px #fff;
    background:#677544;
}
#guide .btnArea .skip-button{
    height: auto;
    padding: 24px 0;
    border:none;
}
#guide .btnArea .skip-button:hover{
    background-color:transparent;
}

@keyframes guideAni {
    0%{background-position-x:0;}
    100%{background-position-x:100%;}
}
@-webkit-keyframes guideAni {
    0%{background-position-x:0;}
    100%{background-position-x:100%;}
}


/* --- 360 MAIN AREA --- */

#visit {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
}
#visit.active{
    z-index: 7;
}

#black-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 6;
    opacity:0;
}

#popup {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    -webkit-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
#popup.active{
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
#popup .popDeam{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    background: rgba(0,0,0,0.5);
    z-index: 5;
}
#popup .popInner{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 20;
}
#popup .popCon{
    display: none;
    text-align: center;
}
#popup .popCon.active{
    display: block;
}
#popup .popCon p{
    font-size: 40px;
    color: #fff;
    margin-bottom: 50px;
}
#popup .popCon img{
    display: block;
    max-width: 200px;
    margin: 0 auto;
}
#popup .popCon video{
    max-width: 300px;
}

.close-layer-btn{
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    font-size: 0;
    background:url('../../../images/rnd/online-museum/ico_close_wh.svg') no-repeat 50% 50%;
    background-size:20px;
    z-index: 5;
}
.floor-btn {
    display: block;
    position: relative;
    width:100%;
    color: #fff;
    line-height: 21px;
    letter-spacing: -0.5px;
    text-align: left;
    text-decoration: none;
    padding: 12px 12px 12px 0;
    border: none;
    outline:none;
    background:transparent;
    transition:color 0.3s;
    -webkit-transition:color 0.3s;
    -ms-transition:color 0.3s;
}

#visit .floor-btn:first-child{
    color:rgba(255,255,255,0.4);
}
#visit.active1 .floor-btn{
    color:rgba(255,255,255,0.4);
}
#visit.active1 .floor-btn:first-child{
    color:#fff;
}



.floor-btn.textFix{
    font-size: 22px;
    padding: 15px 0;
}

.floor-btn.small{
    font-size: 12px;
}
.floor-btn.textFix:before{
    display:none;
}

.floor-btn:nth-child(3),
.floor-btn:nth-child(4),
.floor-btn:nth-child(5),
.floor-btn:nth-child(6){
    padding:18px 0 18px 48px;
}

.floor-btn:before{
    display: block;
    content: '';
    left: 17px;
    top: 24px;
    width: 6px;
    height: 6px;
    border-radius: 8px;
    position: absolute;
    border: solid 1px #fff;
    z-index: 9;
}

.floor-btn:after {
    display: block;
    content: '';
    width: 2px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    position: absolute;
    top: -25px;
    left: 20px;
}

.floor-btn:first-child:after, .floor-btn:nth-child(2):after,.floor-btn:nth-child(3):after{
    display: none;
}

#visit.active2 .floor-btn:first-child:before, #visit.active3 .floor-btn:first-child:before, #visit.active4 .floor-btn:first-child:before, #visit.active5 .floor-btn:first-child:before, #visit.active6 .floor-btn:first-child:before,
#visit.active2 .floor-btn:nth-child(2):before,#visit.active3 .floor-btn:nth-child(2):before, #visit.active4 .floor-btn:nth-child(2):before, #visit.active5 .floor-btn:nth-child(2):before, #visit.active6 .floor-btn:nth-child(2):before, #visit.active4 .floor-btn:nth-child(3):before, #visit.active5 .floor-btn:nth-child(3):before, #visit.active6 .floor-btn:nth-child(3):before, #visit.active5 .floor-btn:nth-child(4):before, #visit.active6 .floor-btn:nth-child(4):before, #visit.active6 .floor-btn:nth-child(5):before, .floor-btn.selected:before{
    background:#fff;
}
#visit.active1 .floor-btn:first-child:before,
#visit.active2 .floor-btn:nth-child(2):before,
#visit.active3 .floor-btn:nth-child(3):before,
#visit.active4 .floor-btn:nth-child(4):before,
#visit.active5 .floor-btn:nth-child(5):before,
#visit.active6 .floor-btn:nth-child(6):before{
    background:url('../../../images/rnd/online-museum/ico_tiimeline.png') no-repeat 50% 50%;
    width: 36px;
    height: 36px;
    border: none;
    border-radius:20px;
    background-size: 36px;
    top: 10px;
    left: 3px;
}


/* -------------*/
/* --- WEBGL ---*/
/* -------------*/

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#webgl {
    width: 100%;
    height: 100%;
    display: block;
    cursor:grab;
}

#labels {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    color: white;
}

#labels .hotspot {
    display: none;
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 80px;
    height: 80px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 0;
    transition: opacity 0.5s ease, width 0.25s cubic-bezier(0.165,0.84,0.44,1), height 0.25s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transition: opacity 0.5s ease, width 0.25s cubic-bezier(0.165,0.84,0.44,1), height 0.25s cubic-bezier(0.165,0.84,0.44,1);
    -ms-transition: opacity 0.5s ease, width 0.25s cubic-bezier(0.165,0.84,0.44,1), height 0.25s cubic-bezier(0.165,0.84,0.44,1);
    transition-delay: 0.3s;
    border:solid 4px #88ad3e;
    border-radius: 50%;
    background:no-repeat 50% 50%;
    background-size:100%;
}
#labels .hotspot:before{
    display: block;
    content: '';
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background:url('../../../images/rnd/online-museum/ico_plus.svg') no-repeat 50% 50%;
    background-size:22px;
    -webkit-transition: opacity 0.1s;
    -ms-transition: opacity 0.1s;
    transition: opacity 0.1s;
    transition-delay:150ms;
    -webkit-transform: translate(-50% ,-50%);
    -ms-transform: translate(-50% ,-50%);
    transform: translate(-50% ,-50%);
}
#labels .hotspot:hover:before{
    opacity: 0;
    transition-delay:0s;
}
#labels .hotspot.init{
    display: flex;
    opacity: 1;
    transition-delay: 0s;
}

#visit.active1 #labels .hotspot-0{background-image:url('../../../images/rnd/online-museum/hotspot/buyeo_spot2.jpg');}
#visit.active1 #labels .hotspot-1{background-image:url('../../../images/rnd/online-museum/hotspot/buyeo_spot1.jpg');}
#visit.active1 #labels .hotspot-2{background-image:url('../../../images/rnd/online-museum/hotspot/buyeo_spot3.jpg');}
#visit.active3 #labels .hotspot-0{background-image:url('../../../images/rnd/online-museum/hotspot/buyeo_spot4.jpg');}
#visit.active4 #labels .hotspot-0{background-image:url('../../../images/rnd/online-museum/hotspot/buyeo_spot6.jpg');}
#visit.active4 #labels .hotspot-1{background-image:url('../../../images/rnd/online-museum/hotspot/buyeo_spot5.jpg');}
#visit.active5 #labels .hotspot-0{background-image:url('../../../images/rnd/online-museum/hotspot/buyeo_spot7.jpg');}

#labels .speech {
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 50px;
    background-color: white;
    border-radius: 5px;
    border: solid 1px black;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: black;
    transition: opacity 0.5s ease;
}

#labels .quest {
    white-space: nowrap;
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 25px;
    cursor: pointer;
    user-select: none;
    background-color: blue;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

#labels .quest:hover {
    width: 50px;
    height: 50px;
    background-color: red;
}

.hotspots-wrap{
    position: absolute;
    top: 0;
    left: 0;
    overflow-y:scroll;
    z-index: 99;
    background:#fff;
}

/* -------------*/
/* --- VIDEO ---*/
/* -------------*/

.player-wrapper {
    position: relative;
    width: 100% !important;
    height: 100vh !important;
}

.player-wrapper .player {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.menu-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    padding: 50px 28px;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    z-index: 9999;
    transform:translateY(100%);
    -webkit-transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    -ms-transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
#wrap.menuOpen .menu-wrapper{
    transform:translateY(0);
}
#wrap #header[data-transparent].transparent + #contents:after{
    height:80px;
}
#wrap.menuOpen #header[data-transparent].transparent + #contents:after{
    z-index: 0;
}

.prePlay{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}
.prePlay.active{
    display: block;
}
.prePlay #preVideo{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    max-width: 120%;
    max-height: 300%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.titleArea{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 5;
}
.titleArea .title{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    opacity: 0;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding: 0 40px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.titleArea.title1 .title1,
.titleArea.title2 .title2{
    opacity: 1;
    transition:opacity 0.5s;
    -moz-transition-delay: 0.3s;
}
.titleArea .title .top{
    color: #fff;
    margin-bottom: 12px;
}
.titleArea .title .space{
    color:#fff;
    line-height: 1;
    margin-bottom: 24px;
}
.titleArea .title .desc{
    color: #fff;
    max-width: 520px;
    margin: 0 auto;
}
.titleArea .title .desc br{
    display: none;
}
.titleArea .title .desc br.m{
    display: block;
}
.timeline-wrapper {
    position: absolute;
    bottom:34px;
    width: calc(100% - 170px);
    height: 2px;
    left: 28px;
    background:rgba(255,255,255,0.2);
    z-index: 8;
}

.timeline {
    width: 100%;
    height: 2px;
    position: relative;
    z-index: 1;
}

.timeline-wrapper{
    font-size: 0;
}

#visit.active4 .floor-btn:nth-child(4):after,
#visit.active5 .floor-btn:nth-child(4):after,
#visit.active5 .floor-btn:nth-child(5):after,
#visit.active6 .floor-btn:nth-child(4):after,
#visit.active6 .floor-btn:nth-child(5):after,
#visit.active6 .floor-btn:nth-child(6):after{
    background:#fff;
}

.timeline__drag {
    width: 0;
    height: 10px;
    top: 0;
    position: absolute;
    z-index: 2;
    transform-origin: 0 0;
}

.timeline__progress {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: 0 0;
    position: relative;
    z-index: 1;
}

.menu-btn{
    position: absolute;
    top: -17px;
    right: -46px;
    width: 34px;
    height: 34px;
    background:url('../../../images/rnd/online-museum/ico_menu_m.svg') no-repeat 50% 50%;
    background-size: 28px;
}
.controls-btn{
    position: absolute;
    width: 34px;
    height: 34px;
    top: -17px;
    right: -124px;
    background:url('../../../images/rnd/online-museum/player/pause-btn_m.svg') no-repeat 50% 50%;
    background-size:28px;
    z-index: 1;
    cursor:pointer;
}

.controls-btn.isPaused{
    background:url('../../../images/rnd/online-museum/player/play-btn_m.svg') no-repeat 50% 50%;
    background-size: 28px;
}

.controls-btn.disable{
    opacity:0.2;
    cursor:default;
}

.sound-btn{
    position: absolute;
    width: 34px;
    height: 34px;
    top: -17px;
    right: -87px;
    opacity: 1;
    background:url('../../../images/rnd/online-museum/player/sound_loop.gif') no-repeat 50% 50%;
    background-size: 40px;
    z-index: 1;
    cursor:pointer;
}

.sound-btn.isMuted{
    background-image:url('../../../images/rnd/online-museum/player/sound_off.gif');
}

/* ---------------*/
/* --- LOADING ---*/
/* ---------------*/

#loading{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 2000;
}

.lds-ripple {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
}


/* --- SWIPER SLIDER --- */
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    overflow-y: scroll;
    text-align: center;
    font-size: 18px;
    background: #fff;
}

.swiper-container.popSlider,
.swiper-container.popSlider .swiper-slide{
    background: none;
}
.swiper-container.popSlider .swiper-slide{
    overflow-y:scroll;
}
.swiper-container.popSlider .swiper-slide .popTop{
    position: relative;
    overflow: hidden;
    height: 240px;
    background:no-repeat 50% 50%;
    background-size:cover;
}
.swiper-container.popSlider .swiper-slide .popTop video{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-width: 110%;
    transform: translate(-50%,-50%);
    z-index: 5;
}
.swiper-container.popSlider .swiper-slide .popBot{
    position: relative;
    height: auto;
    padding: 44px 28px 68px 28px;
    background:#fff;
}
.swiper-container.popSlider .swiper-slide .popBot p{
    text-align: left;
    line-height: 1;
}
.swiper-container.popSlider .swiper-slide .popBot .top{
    font-size: 14px;
    color:#d15c3f;
    margin-bottom: 14px;
}
.swiper-container.popSlider .swiper-slide .popBot .title{
    font-size: 20px;
    letter-spacing: -0.3px;
    color: #000;
    line-height: 1.5625;
    margin-bottom: 24px;
}
.swiper-container.popSlider .swiper-slide .popBot .desc{
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: -0.1px;
    color: #666;
}

.swiper-container.popSlider .swiper-pagination-fraction{
    bottom: 28px;
    color: #bbb;
    letter-spacing: 3px;
    line-height: 1;
}
.swiper-container.popSlider .swiper-pagination-fraction .swiper-pagination-current{
    color: #000;
}
.swiper-container.popSlider .swiper-button-container{
    opacity: 1 !important;
}
.swiper-container.popSlider .swiper-button-container .swiper-button-prev,
.swiper-container.popSlider .swiper-button-container .swiper-button-next{
    top: inherit;
    bottom: 19px;
    width: 30px;
    height: 30px;
    margin: 0;
}
.swiper-container.popSlider .swiper-button-container .swiper-button-prev:after,
.swiper-container.popSlider .swiper-button-container .swiper-button-next:after{
    position: absolute;
    bottom: 0;
    font-size: 0;
}
.swiper-container.popSlider .swiper-button-container .swiper-button-prev{
    left: calc(50% - 64px);
    background:url('../../../images/rnd/online-museum/arr_left_bl.svg') no-repeat 50% 50%;
    background-size: 12px;
}
.swiper-container.popSlider .swiper-button-container .swiper-button-next{
    right: calc(50% - 64px);
    background:url('../../../images/rnd/online-museum/arr_right_bl.svg') no-repeat 50% 50%;
    background-size: 12px;
}

.swiper-container.popSlider .swiper-button-container .swiper-button-prev.swiper-button-disabled,
.swiper-container.popSlider .swiper-button-container .swiper-button-next.swiper-button-disabled{
    opacity: 0.25;
}

.swiper-container.mediaSlider{
    visibility: hidden;
}
.swiper-container.popSlider .swiper-container.mediaSlider{
    visibility: visible;
}
.swiper-container.mediaSlider .swiper-slide{
    overflow: hidden;
    background:no-repeat 50% 50% #fff;
    background-size:cover;
}
.swiper-container.mediaSlider .swiper-pagination-bullet,
.swiper-container.mediaSlider .swiper-pagination-bullet-active{
    position: relative;
    width: 48px;
    height: 20px;
    border-radius:0;
    background:none;
    opacity: 1;
}
.swiper-container.mediaSlider .swiper-pagination-bullet:after{
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    opacity: 0.5;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.swiper-container.mediaSlider .swiper-pagination-bullet-active:after{
    opacity: 1;
}

@media all and (max-width:360px){
    .guide_inner .pageBox{
        margin-bottom: 10px;
    }
    #guide .stepList{
        margin-bottom: 0;
    }
    #guide .stepList li .icoArea{
        margin: 0 auto;
    }
    #guide .stepList li:last-child .icoArea{
        background-size:auto 140px;
        background-position:50% 30%;
        margin-top: 0;
    }
}



/* STYLE IN EN */
.en #intro .introCon .introText .top{
    line-height: 1;
}
.en #intro .introCon .introText .title10{
    line-height: 1.3;
}
.en .infoText p{
    max-width: 90%;
    line-height: 1.3;
    margin: 0 auto 8px;
}

@media all and (max-width:500px){
    .en #intro .introCon .introText .title10{
        max-width: 300px;
        margin: 0 auto 24px;
    }
}

@media all and (max-width:360px){
    .en #intro .introCon .introText .desc{
        line-height: 1.3;
        margin: 0 auto 20px;
    }
    .en .intro-buttons-quality-container{
        margin-bottom: 16px;
    }
}

/* STYLE IN CN */
.cn .btn.box.arrow.intro-button{
    width: 174px;
}
.cn #guide .stepList li .step p{
    width:76%;
}