@charset "UTF-8";

html {
	overflow:hidden;
	height:100%;
}
body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
}
div.wrapper {
	width:100%;
	height:100%;
	position:absolute;
}
div.wrapper::before {
	content:"";
	display:block;
	position:absolute;
	width:128px;
	height:128px;
	left:50%;
	top:50%;
	margin-left:-64px;
	margin-top:-64px;
	background-image: url(../images/loading.gif);
	background-size: cover;
}
div.wrapper.isReady::before {
	opacity:0;
	transition: opacity 0.5s;
}
button {
	background-color:transparent;
	border:0 none;
	outline:0 none;
	padding:0;
	margin:0;
}
button:hover {

}
div.wrapper.mode_info {
	transform:translateY(0);
	transition: transform 0.5s;
}
div.wrapper.mode_vrism {
	transform:translateY(-100vh);
	transition: transform 0.5s;
}
div.wrapper section.area_info {
	opacity : 0;
}
div.wrapper.isReady section.area_info {
	opacity : 1;
	transition: opacity 1.5s;
	transition-delay: 0.5s;
}
div.wrapper.mode_info section.area_info {
	opacity : 1;
	transition: opacity 0.5s;
}
div.wrapper.mode_vrism section.area_info {
	opacity : 0;
	transition: opacity 0.5s;
}
div.wrapper.mode_info section.area_vrism {
	opacity : 0;
	transition: opacity 0.5s;
}
div.wrapper.mode_vrism section.area_vrism {
	opacity : 1;
	transition: opacity 0.5s;
}
div.wrapper.mode_info button#changeVrism {
	transform:translateY(0);
	transition: transform 0.5s;
}
div.wrapper.mode_vrism button#changeVrism {
	transform:translateY(-100vh);
	transition: transform 0.5s;
}
div.wrapper.mode_info button#changeInfo {
	transform:translateY(100vh);
	transition: transform 0.5s;
}
div.wrapper.mode_vrism button#changeInfo {
	transform:translateY(0);
	transition: transform 0.5s;
}
div.wrapper section.area_full_content {
	position:absolute;
	width:100%;
	height:100%;
}
div.wrapper section.area_info {
	top:0;
	background-color: rgb(150,150,150);
}
div.wrapper section.area_vrism {
	top:100%;
	background-image: url(../images/vrism_bg.jpg);
	background-size: auto 100%;
	background-position: center;
}
div.wrapper.isReady button.btn_change_mode {
	opacity:1;
	transition: opacity 0.5s;
	transition-delay: 2s;
}
button.btn_change_mode {
	position:fixed;
	left:50%;
	opacity:0.7;
	z-index:100;
	opacity:0;
}
button.btn_change_mode:hover {
	opacity:1;
}
button#changeVrism {
	margin-left:-3.75vw;
	bottom: 2vh;
}
button#changeVrism img {
	width:7.5vw;
}
button#changeInfo {
	margin-left:-1.04vw;
	top: 101vh;
}
button#changeInfo img {
	width:2.083vw;
}


section.virtural_scroll {
	overflow:scroll;
	width:100vw;
	height:100vh;
}
section.virtural_scroll div.virtural_obj {
	width:100vw;
	height:calc(381.041667vw + 200vh);
	position: relative;
}
section.area_info {
	overflow:hidden;
	perspective: 30vw;
    -webkit-perspective: 30vw;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
section.area_info img.bg_img {
	width:100vw;
    /* margin-bottom: 100vh; */
	height:auto;
	position:sticky;
	top:calc(-381.041667vw + 100vh); /* -324.489583vw */
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
section.area_info img.guide {
	width:100vw;
	height:auto;
	left:0;
	top:0;
	position:absolute;
	opacity:0.3;
	user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
img.gnb {
	position:fixed;
	width:100vw;
	height:auto;
	left:0;
	top:0;
	z-index: 100;
}
img.gnb_footer {
	position:fixed;
	width:6.71vw;
	height:auto;
	right:5vw;
	top:97vh;
	z-index: 100;
}
img.vrism_gnb {
	position: fixed;
    width: 98vw;
    height: auto;
    left: 1vw;
    top: 101vh;
    z-index: 100;
}
div.viewer_menu {
	width: 100vw;
    height: 100vh;
    position: fixed;
    top: 100vh;
    left: 0;
    z-index: 101;
    background-color: rgba(0,0,0,0.5);
	display: none;
}
div.viewer_menu img.vrism_menu {
	position:absolute;
	width:20.3125vw;
	top:1vh;
	left:1vw;
}
section.area_info div.info_group {
	position:absolute;
	width:100vw;
	left:0;
}
section.area_info div.info_1 {
	height:59.375vw;
	top:0;
}
section.area_info div.info_2 {
	height:113.020833vw;
	top:59.375vw;
}
section.area_info div.info_3 {
	height:59.895833vw;
	top:172.395833vw;
}
section.area_info div.info_4 {
	height:72.916667vw;
	top:232.291667vw;
}
section.area_info div.info_5 {
	height:75.833333vw;
	top:305.208333vw;
}
section.area_info div.info_6 {
	height:190vh;
	top:381.041663vw;
	z-index:10;
    margin-top: -5px;
}
section.area_info div.info_7 {
	height:calc(100vh);
	top:calc(381.041667vw + 97vh);
	background-color:#ffa181;
	z-index:10;
	left:0;
	width:100vw;
}

section.area_info .float1 {
	transform: perspective(150px) translateZ(30px) scale(0.73);
}
section.area_info .float1_5 {
	transform: perspective(150px) translateZ(40px) scale(0.67);
}
section.area_info .float2 {
	transform: perspective(150px) translateZ(60px) scale(0.48);
}
section.area_info .float3 {
	transform: perspective(150px) translateZ(90px) scale(0.215);
}

section.area_info div.info_1 img {
	position:absolute;
}
section.area_info div.info_1 img.shadow {
	width:36.5625vw;
	left:35.104167vw;
	top:43.824561%;
	transform-origin: right top;
}
section.area_info div.info_1 img.shoe {
	width:38.645833vw;
	left:30.520833vw;
	top:21.929825%;
	transform-origin: left bottom;
}
section.area_info div.info_1 img.ball1 {
	width:18.072917vw;
	top:-8.157895%;
	left:16.0625vw;
}
section.area_info div.info_1 img.bubble1 {
	width:10.833333vw;
	left:70.5vw;
	top:17.6%;
}
section.area_info div.info_1 img.ball2 {
	width:16.770833vw;
	left:56.1vw;
	top:49.8%;
}


section.area_info div.info_2 img {
	position:absolute;
}
section.area_info div.info_2 img.story {
	width:35.3125vw;
	left:32.291667vw;
	top:5.1152074%;
}
section.area_info div.info_2 img.poster {
	width:100vw;
	left:0vw;
	top:27.142857%;
}
section.area_info div.info_2 img.keychain {
	width:79.114583vw;
	right:0vw;
	top:55%;
}
section.area_info div.info_2 img.bubble1 {
	width:10.833333vw;
	left:36.020833vw;
	bottom:-5%;
}


section.area_info div.info_3 img {
	position:absolute;
}
section.area_info div.info_3 img.ball1 {
	width:17.916667vw;
	left:55.579167vw;
	top:9.4347826%;
}
section.area_info div.info_3 img.ball2 {
	width:16.40625vw;
	left:65.625vw;
	top:44.347826%;
}
section.area_info div.info_3 img.shoe {
	width:47.916667vw;
	left:38.270833vw;
	top:25.826087%;
	transform-origin: 30% 60%;
}
section.area_info div.info_3 img.txt {
	width:17.135417vw;
	left:26.058333vw;
	top:35.478261%;
}
section.area_info div.info_3 img.ball3 {
	width:21.614583vw;
	left:35.933333vw;
	top:40.373913%;
}

section.area_info div.info_4 img {
	position:absolute;
}
section.area_info div.info_4 img.shoe {
	width:59.479167vw;
	left:32.854167vw;
	top:9.928571%;
	transform-origin: center;
}
section.area_info div.info_4 img.txt {
	width:28.177083vw;
	left:27.508333vw;
	top:26.285714%;
}

section.area_info div.info_5 img {
	position:absolute;
}
section.area_info div.info_5 img.ball1 {
	width:17.916667vw;
	left:49.470833vw;
	top:8.3186813%;
}
section.area_info div.info_5 img.ball2 {
	width:21.614583vw;
	left:69.708333vw;
	top:36.241758%;
}

section.area_info div.info_6 img {
	position:absolute;
}
section.area_info div.info_6 div.sticky_area {
	position:sticky;
	width:100vw;
	left:0;
	top: 100%;
}
section.area_info div.info_6 img.shadow {
	width:58.4375vw;
	left:0vw;
	margin-top:-12vw;
}
section.area_info div.info_6 img.shoe {
	width:54.53125vw;
	left:0vw;
	margin-top:-55vw;
	transform-origin: left bottom;
}
section.area_info div.info_6 img.txt {
	width:26.130389vw;
	left:45vw;
	margin-top:-23vw;
}

section.area_info div.info_7 img {
	position:absolute;
}
section.area_info div.info_7 img.txt {
	width:44.375vw;
	left:27.708333vw;
	top:12.25%;
}
section.area_info div.info_7 img.number {
	width:9.1666667vw;
	left:45.052083vw;
	top:30.75%;
}
section.area_info div.info_7 img.bubble1 {
	width:6.1458333vw;
	left:57vw;
	top:38%;
}
section.area_info div.info_7 img.bubble2 {
	width:8.2291667vw;
	left:66.3vw;
	top:56%;
}
section.area_info div.info_7 img.shadow {
	width:41.875vw;
	left:27.3vw;
	top:81%;
}
section.area_info div.info_7 img.shoe {
	width:36.354167vw;
	left:28.864583vw;
	top:39.333333%;
}
section.area_info div.info_7 img.bubble3 {
	width:10.885417vw;
	left:60vw;
	top:62.7%;
}
section.area_info div.info_7 img.bubble4 {
	width:7.5vw;
	left:40vw;
	top:14%;
}


section.area_vrism {
	opacity:0;
}


section.area_vrism div#vrism3DContent {
	width: 100%; height: 100% ; z-index:2;
}
section.area_vrism li.li_vrism_viewer_sub_position {
	margin-left: 3 px!important;
	right: 3 px!important;
}
section.area_vrism li.li_vrism_viewer_sub_position button.btn_vrism_viewer_sub_position::after {
	transform: scale(0.8) !important;
}
section.area_vrism button.btn_vrism_viewer_nav_sub_pos_prev,
section.area_vrism button.btn_vrism_viewer_nav_sub_pos_next {
	transform: scale(0.6) !important;
}


section.area_vrism div.background {
	width:100%; height:100%; left:0; top:0;
	position:absolute;
	/* background-image: url(./images/vrism_bg.jpg);
	background-size: cover; */
	/* background: linear-gradient( 15deg, #F0F0F0, #999999); */
}
section.area_vrism div.background div {
	width:100%; height:100%; left:0; top:0;
	opacity:0;
	position:absolute;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity 1.0s;
	transition-delay: 0.0s;
}
/*	====================	로드될 백그라운드 이미지들	====================	*/
/* section.area_vrism div.background div.bg0 {
	background-image: url(../images/00.jpg);
}
section.area_vrism div.background div.bg1 {
	background-image: url(../images/01.jpg);
}
section.area_vrism div.background div.bg2 {
	background-image: url(../images/02.jpg);
}
section.area_vrism div.background div.bg3 {
	background-image: url(../images/03.jpg);
}
section.area_vrism div.foreground {}
section.area_vrism div.foreground div {
	opacity:0;
	position:absolute;
	z-index:-1;
	transition: all 1.5s;
	transition-delay: 0.0s;
}
section.area_vrism div.foreground div>img {
	width:100%;
	height:auto;
}
section.area_vrism div.foreground div.con0 {
	left:62.5%; top:17.5%; width:22.4%;
	transform:translateX(-30px) scale(1.04);
}
section.area_vrism div.foreground div.con1 {
	left:65.0%; top:64.8%; width:21.7%;
	transform:translateX(-30px) scale(0.96);
}
section.area_vrism div.foreground div.con2 {
	left:23.1%; top:26.1%; width:20.3%;
	transform:translateX(30px) scale(1.04);
}
section.area_vrism div.foreground div.con3 {
	left:44.6%; top:9.5%; width:10.8%;
	transform:translateX(-30px) scale(0.96);
}
section.area_vrism div.foreground div.con3_2 {
	left:7.6%; top:86.0%; width:84.84%;
	transform:translateX(-30px) scale(0.96);
} */

/*	====================	3D 컨텐츠 상황별 배경들 바뀌기	====================	*/
/* section.area_vrism div.background.pos_default  div.bg0 {
	opacity:1;
	transition: opacity 0.5s;
}
section.area_vrism div.background.pos_sub1  div.bg1 {
	opacity:1;
	transition: opacity 0.5s;
	transition-delay: 0.5s;
}
section.area_vrism div.background.pos_sub2 div.bg2 {
	opacity:1;
	transition: opacity 0.5s;
}
section.area_vrism div.background.pos_sub3 div.bg3 {
	opacity:1;
	transition: opacity 0.5s;
}
section.area_vrism div.foreground.pos_default  div.con0 {
	opacity:1; z-index:3;
	transform:translateX(0) scale(1);
	transition: all 2.0s;
	transition-delay: 0.1s;
}
section.area_vrism div.foreground.pos_sub1  div.con1 {
	opacity:1; z-index:3;
	transform:translateX(0) scale(1);
	transition: all 2.0s;
	transition-delay: 0.1s;
}
section.area_vrism div.foreground.pos_sub2 div.con2 {
	opacity:1; z-index:3;
	transform:translateX(0) scale(1);
	transition: all 2.0s;
	transition-delay: 0.1s;
}
section.area_vrism div.foreground.pos_sub3 div.con3 {
	opacity:1; z-index:3;
	transform:translateX(0) scale(1);
	transition: all 2.0s;
	transition-delay: 0.1s;
}
section.area_vrism div.foreground.pos_sub3 div.con3_2 {
	opacity:1; z-index:1;
	transform:translateX(0) scale(1);
	transition: all 2.0s;
	transition-delay: 0.4s;
} */