@charset "UTF-8";

html ,body{ background-color: #292c2e; }
html { height:100%; }
body { height:100%; overflow:hidden;}

img {max-width: inherit; }

#info {
	position: fixed; top: 0; left: 0; width: 100%; color: #ffffff; padding: 5px; 
	font-size: 13px; font-weight: bold; text-align: center; z-index: 2; 
}

/* page of Loading : Start */
.page-loading{
    position: absolute; overflow: hidden;
    width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center center; 
    z-index: 1000;
}

.page-loading h3{ font-size: 48px; color: #000; text-align: center; }
/* page of loading : End */

/* page of Front : Start */
.pf-mobile{display: none;}
.pf-pc{display: block;}
.page-front{width: 100%; height: 100%; }
.page-front.cover{
    display: none;
    position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0; left: 0; 
    background-repeat: no-repeat; 
    background-size: cover; background-position: center center; z-index: 1000; background-color: #000; 
}
.table_box{width: inherit; height: inherit;}
.page-front h3{ text-align: center; color: #fff; font-size: 48px;}
/* page of Front : End */

/* page of Main : Start */
.page-main{
    display: block; z-index: 1;
    width: 100%; height: 100%; position: relative;
}

#panorama, #pano{width:100%; height:100%; z-index: 1;}
#pano em{ color: #8c8c8c!important; display: inline-block; margin-right: 5px; }

.box-mobile{display: none;}
.box-pc{display: block;}

.box-userlogo {
    position: absolute; top: 20px; left: 20px; text-align: left; z-index: 2; 
}

.box-music{display:none; position: absolute; top: 15px; right: 55px; z-index: 2; }
.box-music .u-audio{
    cursor: pointer;
    position:absolute; width:40px;height:40px;
    background-image: url(../images/icon_music-mute.png);
    background-repeat: no-repeat;
    background-size:25px 33px;
    background-position: center;
    background-color: rgba(0,0,0,0.7); 
    border-radius: 50%; border: 1px solid #979d99;
}
.box-music .u-play{
    background-image:url(../images/icon_music-playing.png);
}

.box-deviOriButton {display: none; position: absolute; top: 20px; right: 14px; text-align: right; z-index: 2; }
.box-deviOriButton a.btn-deviorient, .box-deviOriButton a.btn-vr{
    width: 40px; height: 40px; cursor: pointer; display: block; 
    background-repeat: no-repeat; background-position: center; line-height: 0; background-color: rgba(0,0,0,0.7); 
    border-radius: 50%; border: 1px solid #979d99; 
}

.box-deviOriButton a.btn-vr{background-size: 25px 29px; background-image: url(../images/icon_vr-disable.png); margin-bottom: 7px;}
.box-deviOriButton a.btn-vr.active{background-size: 23px 15px; background-image: url(../images/icon_vr.png);}

.box-deviOriButton a.btn-deviorient{background-size: 22px 28px; background-image: url(../images/icon_deviceorient-disable.png);}
.box-deviOriButton a.btn-deviorient.active{background-size: 20px 20px; background-image: url(../images/icon_deviceorient.png);}

.box-vr-tips{
    width: 232px; height: 404px; margin: 0 auto;
    background:url(../images/icon_vr-tips.png) no-repeat; background-size: 232px 404px;
    transform-origin: center center; position: relative;
}    
.box-vr-tips.landscape{transform: translateY(0px) rotate(-90deg); width: 232px; height: 404px; } 
.box-vr-tips a.btn-confirm{position: absolute; top:104px; left: 15px; display: block; width: 40px; height: 198px; background-color: rgba(0,0,0,0); }
.box-vr-tips a.btn-cancel{position: absolute; bottom:3px; right: 3px; display: block; width: 40px; height: 40px; background-color: rgba(0,0,0,0); }

/* page of Main : End */    

/* Nav-Bar : Start */
.box-nav {position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; }
.box-nav{transition: all 0.5s ease;}
.box-nav a{
	display:inline-block; width: 100px; padding: 0; color: #ffffff; background-color: rgba(0,0,0,0.5); text-align: center; vertical-align: middle;
}

.box-nav-temp {position: relative; width: 100%; }
.box-carousel{width: 100%; background: rgba(0,0,0,0.5); border: 0px; position: relative; padding: 20px; }

.box-carousel img{max-width: 100%; vertical-align: bottom; border: 0; line-height: 0; display: block;}

/*.box-carousel img{max-height: 175px; overflow: hidden;}*/

.box-carousel .item{ margin: 2px; position: relative; border: 0px; }
.box-carousel .item.active{ border: 0px; }
.box-carousel .item .title{ 
	position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; background: rgba(0,0,0,0.5); color: #ffffff;
	font-size: 20px; padding: 2px;
}
.box-nav .box-disable{ background: rgba(255,255,255,0.5); position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; display: none; }

.box-carousel .item.active .highlight-border{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; border: 3px solid #fff; display: none;}
.box-carousel .item.active .highlight-border {display: block; cursor: default; }
.box-btn-direction{position: absolute; top: -85px; right: 40px; width: 260px; }

.box-carousel .box-prev, .box-carousel .box-next, .box-carousel .box-displaynav {
    position: relative; width: 60px; height: 60px; float: left; margin-right:25px; background: none;
}
.box-carousel .box-prev a, .box-carousel .box-next a, .box-carousel .box-displaynav a {
    cursor: pointer; display: block; width: inherit; height: inherit; text-align: center; 
    background-repeat: no-repeat; background-position: center; color: #fff; line-height: 0;
    background-color: rgba(0,0,0,0.7); border-radius: 50%;
    border: 1px solid #979d99;   
}
.box-carousel .box-prev a{ background-image: url(../images/icon_prev.png); background-size: 9px 25px;}
.box-carousel .box-next a{ background-image: url(../images/icon_next.png); background-size: 9px 25px;}
.box-carousel .box-displaynav a{ background-image: url(../images/icon_show.png); background-size: 22px 15px;}
.box-carousel .box-displaynav a.hiding{background-image: url(../images/icon_hide.png);}
.box-carousel .box-prev a.disable, .box-carousel .box-next a.disable, .box-carousel .box-displaynav a.disable {
    cursor: default; background-color: rgba(0,0,0,0.3);
}
.box-carousel h3{ font-size: 18px; line-height: 1.4; font-weight: lighter; color: #fff; margin-bottom: 20px;}
/* Nav-Bar : End */

/* Modal : Start */
.modal-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; opacity: .5; }
.modal {display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; 
}
.modal .modal-dialog {position: relative; width: auto; margin:0px 10px; text-align: center; }
.modal h3{ text-align: center; color: #fff; font-size: 32px; font-weight: lighter; font-family: Arial, Helvetica, sans-serif;}
/* Modal : End */


@media only screen and (max-width : 767px){

/* Page Of Front : Start */
.pf-mobile{display: block;}
.page-front.pf-mobile{
    background-size: 100%;
    background-position: top center;
}
.pf-pc{display: none;}

.box-mobile{display: block;}
.box-pc{display: none;}

.page-front .pf_content {position: absolute; width: 100%; left: 0; bottom: 70px; }

.page-front img {
    max-width: 100%;
    width: auto\9;
}

/* Front Page : Start */
.pf_content{ position:absolute; width:100%; left:0; bottom:70px;}
.pf_content .pf_logo{ padding:0 0px; opacity: 0; }
.pf_content .pf_title{ padding:0px; opacity: 0; }
.pf_content .pf_title h3{ font-size:30px; margin:10px; font-weight: lighter; color: #FFFFFF!important; background-color: rgba(0,0,0,0.6);}

.pf_content.align_left .pf_logo_box{ text-align:center; }
.pf_content.align_left .pf_title_box{ text-align:left; }

.pf_content.align_mid .pf_logo_box{ text-align:center; margin:0 auto; }
.pf_content.align_mid .pf_title_box{ text-align:center; padding: 5px; }

.pf_content.align_right .pf_logo_box{ text-align:center; }
.pf_content.align_right .pf_title_box{ text-align:right; }

/* Front Page : End */

/* Animation Page : Start */
.pf_content .pf_logo.show{
    animation:fadeInDown 1.5s ease-in-out forwards;
    -webkit-animation:fadeInDown 1.5s ease-in-out forwards;
    -moz-animation:fadeInDown 1.5s ease-in-out forwards;
}

.pf_content .pf_title.show{
    animation:fadeInUp 1.5s ease-in-out forwards;
    -webkit-animation:fadeInUp 1.5s ease-in-out forwards;
    -moz-animation:fadeInUp 1.5s ease-in-out forwards;
}
/* Animation Page : End */

/* Define Anmiation : Start */
@-webkit-keyframes fadeInUp {
    0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
    100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 
}

@-moz-keyframes fadeInUp {
    0% {opacity: 0; -moz-transform: translateY(20px); transform: translateY(20px); }
    100% {opacity: 1; -moz-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeInUp {
    0% {opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px);}
    100% {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

@-webkit-keyframes fadeInDown {
    0% {opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); }
    100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@-moz-keyframes fadeInDown {
    0% {opacity: 0; -moz-transform: translateY(-20px); transform: translateY(-20px); }
    100% {opacity: 1; -moz-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeInDown {
    0% {opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
    100% {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/* Define Anmiation : End */

/* Page Of Back : End */

/* Nav-Bar : Start */	
.box-carousel { padding: 10px;}
.box-carousel .item.active .highlight-border{ border: 2px solid #fff;}
.box-carousel h3{ font-size: 15px; line-height: 1.4; margin-bottom: 10px;}
.box-carousel .item .title{ font-size: 12px; padding: 2px;}
.box-btn-direction{ top: -50px; right: 0px; width: 165px; }
.box-carousel .box-prev, .box-carousel .box-next, .box-carousel .box-displaynav { 
    width: 40px; height: 40px; margin-right:15px; 
}
.box-carousel .box-prev a, .box-carousel .box-next a, .box-carousel .box-displaynav a{}
.box-carousel .box-prev a{ background-size: 5px 13px;}
.box-carousel .box-next a{ background-size: 5px 13px;}
.box-carousel .box-displaynav a{ background-size: 16px 11px;}
.box-carousel .item{max-height: 75px; overflow: hidden;}
/* Nav-Bar : End */
}


/*  |xGv00|04405ccbd8a1625d7a396dac64ec520b */