/* css 릿세 */
* {box-sizing: border-box; padding: 0; margin: 0; color: inherit; font-family: '맑은 고딕';}
*::after, *::before {position: absolute; border-radius: inherit;}
img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; vertical-align: middle; }
a {text-decoration: none; color: inherit;}
ul, li { list-style: none;}
ul, li, p, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }
button { border: none; outline: none; background-color: transparent; cursor: pointer;}
label {display: block; cursor: pointer;}
hr { opacity: 1;}


/* 유틸 클레스 */
.flex {display: flex; }
.flex-center {display: flex; justify-content: center; align-items: center;}
.flex-1 {flex: 1;}
.flex-col {display: flex; flex-direction: column;}
.j-center {justify-content: center; }
.i-center {align-items: center;}
.rel {position: relative;}
.inset {inset: 0;}
.grid {display: grid;}
.gap-7 {gap: 7rem;}
.abs {position: absolute;}
.transition{ transition: all .25s;}
.wha {width: auto; height: auto;}
.pointer { cursor: pointer; }

.dark {color: #58595b;}
.light {color: #919191;}
.typo h3 {font-size: 21px; font-weight: bold; padding-bottom: 12px; color: #58595b;}
.typo p {font-size: 18px; line-height: 27px; color: #919191;}
.deco { margin-top: 2rem; display: block; background-color: #58595b; width: 20px; height: 8px; }
.icon {position: relative;}
.icon::before {transform: translate(-50%, -50%); left: 50%; top: 50%;}

.b { position: relative; border-radius: 45px; display: flex; justify-content: center; align-items: center; background-color: #fa0; background-image: var(--bs-graident);  cursor: pointer;
  padding: 10px 15px; width: fit-content;
  
} 
.b::before {content: ''; inset: 0; background-color: #310b6e; transition: all .25s; clip-path: circle(0% at 50% 100%); }
.b:hover::before { clip-path: circle(100% at 50% 100%); }
.b:hover { transition: all .25s .25s; background-color: #310b6e; }
.b > * {position: relative; z-index: 1; color: white;}
.b.active {background-color: #fe5417;}
.b.sky {background-color: #33c8f3;}
.b.disabled { opacity: 0.6; pointer-events: none; }
.b.sm {transform: scale(0.85);}
.b.circle { border-radius: 50%; }

.graphic { position: absolute; z-index: 1; width: auto; height: auto; }
.dot { position: absolute; z-index: 1; width: 45px; height: 45px; border-radius: 45px; background-color: #fe5417; }
:is(.i, .i-l) { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 20px;  }
:is(.i, .i-l) div:nth-child(1) {  width: 45px; height: 45px; border-radius: 45px; background-color: #fe5417;  }
:is(.i, .i-l) div:nth-child(2) {  width: 45px; height: 110px; border-radius: 45px; background-color: #33c8f3; transition: all .25s .25s; }
:is(.i-l) div:nth-child(2) {  width: 45px; height: 210px; border-radius: 45px; background-color: #33c8f3; transition: all .25s; }

.imgCont { position: relative; overflow: hidden; }
.imgCont >  .cover { width: auto; height: auto; }
.imgCont > img:not(.cover) { position: absolute; inset: 0; z-index: -1; transition: all .25s; }
.imgCont:hover > img:not(.cover)  { transform: scale(1.2);}
.imgCont:hover :is(.i, .i-l) div:nth-child(2) { height: 45px; }

.customModal {display: block; background-color: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
.customModal > .modal-dialog {transition: all .25s; transform: translateY(-100px);}
.customModal > .modal-dialog .modal-content { padding: 2rem; border-radius: 3rem;}
.customModal:target { opacity: 1; visibility: visible; transition: opacity .25s } 
.customModal:target > .modal-dialog { transform: translateY(0); } 


.t { display: flex; flex-direction: column; text-align: center; color: #58595b; }
.t > div {display: flex; align-items: center; gap: 2rem;}
.t h3 {font-size: 36px; font-family: Impact; letter-spacing: 1.2px;}
.t p {font-size: 24px; font-weight: bold;}
.t hr {flex: 1;}

.pag {width: 100%; display: flex; justify-content: center; align-items: center; gap: 15px; }
.pag div { width: 20px; height: 20px; border-radius: 20px; background-color: #fe5417;  }
.pag div:not(:first-child) { opacity: 0.6; transform: scale(0.85); }

.sectionWrap {position: relative;}
.cont { max-width: 1420px; width: 100%; margin: 0 auto; }
section.cont {margin-bottom: 250px;}
section.cont > .title { display: flex; flex-direction: column; text-align: center; color: #58595b; padding-bottom: 60px; }
section.cont > .title > div {display: flex; align-items: center; gap: 2rem;}
section.cont > .title h3 {font-size: 36px; font-family: Impact; letter-spacing: 1.2px;}
section.cont > .title p {font-size: 24px; font-weight: bold;}
section.cont > .title hr {flex: 1;}

.template {  position: relative; height: 270px; margin-bottom: 150px; color: white;  } 
.template > * {position: absolute;}
.template > img { inset: 0; }
.template > img:not(.cover) { z-index: -1; filter: brightness(0.4); }
.template > div { width: 100%; bottom: 2rem;}
.template > div h3 {font-size: 1rem; font-weight: bold; display: flex; align-items: center; gap: 5px; max-width: 1420px; width: 100%; margin: 0 auto; }
.template > div i {width: 1rem; height: 1rem; font-size: 1rem;}


/* 해더 영역 */
header .logo { height: 60px; }
header ul.main a { min-width: 130px; padding: 0px 15px; height: 40px;display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: normal;  }
header ul.main > li::before {content: ''; background-color: #fa0; height: 8px; border-radius: 8px; width: 100%; transform: scaleX(0); transition: all .25s; left: 0; top: calc(100% - 4px); z-index: 1;   }
header ul.main > li:hover::before {transform: scaleX(1);}
header ul.main li:hover > a { color: #58595b; }
header ul.main > li > a {font-weight: bold; font-size: 18px;}
header ul.main li ul { background-color: #fff; }
header ul.main li ul li:hover a { font-weight: bold; color: #fe5417; }
header ul.main li ul li {height: 0px;}
header ul.main li:hover ul li {height: 40px;}

aside { position: fixed; top: 92px; right: 0; transform: translateX(100%); border-bottom-left-radius: 45px; z-index: 5; width: 250px; }
aside ul.main a { min-width: 130px; height: 40px;display: flex; align-items: center;font-size: 16px;  }
aside ul.main > li::before { left: 0; content: ''; background-color: #fa0; height: 8px; border-radius: 8px; width: 50%; transform: scaleX(0); transition: all .25s; left: 0; top: calc(32px); z-index: 1;   }
aside ul.main > li:hover::before {transform: scaleX(1);}
aside ul.main > li:hover > a { color: #58595b; }
aside ul.main > li > a {font-weight: bold; font-size: 18px;}
aside ul.main li ul li:hover { font-weight: bold; color: #fe5417; }
aside ul.main li ul li {height: 0px;}
aside ul.main li:hover ul li {height: 40px;}

header .fa { height: 2rem; width: 2rem;  }
#a:checked ~ header .fa-bars { display: none; }
#a:not(:checked) ~ header .fa-xmark { display: none; }
#a:checked ~ aside { transform: translate(0); }


/* 비주얼 영역 */
#v:checked ~ .visual .b:has(.fa-pause) { display: none; }
#v:not(:checked) ~ .visual .b:has(.fa-play) { display: none; }
#v:checked ~ .visual * { animation-play-state: paused; }

.visualText { color: #310b6e;}
.visualText .o14 { top: -100px; left: -100px; }
.visualText h3 {font-size: 36px; font-weight: bold; }
.visualText h2 {font-size: 85px; font-family: Impact; letter-spacing: 1.2px; line-height: 1; }
.visualText p {font-size: 24px; font-weight: bold; }
.visualText .textSlide { height: 300px; animation: textSlide 13s ease-in-out infinite; transform-style: preserve-3d; }
.visualText .textSlide .slide { backface-visibility: hidden; }
.visualText .textSlide .slide:nth-child(1) { transform: rotateX(0deg) translateZ(150px); }
.visualText .textSlide .slide:nth-child(2) { transform: rotateX(90deg) translateZ(150px); }
.visualText .textSlide .slide:nth-child(3) { transform: rotateX(180deg) translateZ(150px); }
.visualText .textSlide .slide:nth-child(4) { transform: rotateX(270deg) translateZ(150px); }
@keyframes textSlide {
  0% { transform: rotateX(0deg); }
  22.5% { transform: rotateX(0deg); }
  25% { transform: rotateX(-90deg); }
  47.5% { transform: rotateX(-90deg); }
  50% { transform: rotateX(-180deg); }
  72.5% { transform: rotateX(-180deg); }
  75% { transform: rotateX(-270deg); }
  97.5% { transform: rotateX(-270deg); }
  100% { transform: rotateX(-360deg); }
}

.visual {margin-top: 50px;}
.visualImage { height: 826px; width: 958px; transform: scale(0.9) translate(100px); }
.visualImage svg { height: 826px; width: 958px; }
.visualImage .imgSlide .slider { height: 100%; width: 500%; animation: imgSlide 13s ease-in-out infinite;}
@keyframes imgSlide {
  0% { margin-left: 0%; }
  22.5% { margin-left: 0%; }
  25% { margin-left: -100%; }
  47.5% { margin-left: -100%; }
  50% { margin-left: -200%; }
  72.5% { margin-left: -200%; }
  75% { margin-left: -300%; }
  97.5% { margin-left: -300%; }
  99.999% { margin-left: -400%; }
  100% { margin-left: 0%; }
}
.visualImage .imgSlide1 { width: 437px; height: 330px; left: 250px; top: 45px; }
.visualImage .imgSlide2 { width: 185px; height: 185px; left: 125px; bottom: 125px; }

.visual .forB34 { top: 330px; left: 345px; }
.visual .b34 { top: 330px; left: 275px; animation: b34 3s 0s ease-in-out alternate infinite; }
.visual .o34 { bottom: 0; right: 100px; animation: o34 3s 1s ease-in-out alternate infinite; }
.visual .i { top: 110px; left: 567px; }
.visual .i div:nth-child(2) { animation: i 3s 2s ease-in-out alternate infinite;  }

@keyframes b34 {
  to {transform: rotate(270deg)}
}
@keyframes o34 {
  to {transform: rotate(-270deg); right: 240px; }
}
@keyframes i {
  to {height: 45px;}
}

.best a .text { opacity: 0; backdrop-filter: blur(100px); }
.best a:hover .text { opacity: 1;}
.best .itemCont .wrap { height: 600px; }
.best .itemCont .o14 { transition: all .25s; transform: translate(-30%, -30%); top: 0px;  left: 0px;  }
.best .itemCont .b14 { transition: all .25s .25s; transform: translate(30%, 30%); bottom: 0px; right: 0px;  }

.best .itemCont:hover .o14 { transform: translate(-50%, -50%); top: 0px;  left: 0px;  }
.best .itemCont:hover .b14 { transform: translate(50%, 50%); bottom: 0px; right: 0px;  }


.aware .r:nth-child(1) { height: 60px; } 
.aware .r:last-child { height: 60px; } 

.aware .r:nth-child(1) .c { width: 100%; } 
.aware .r:last-child .c { width: 100%; } 

.aware { margin-bottom: 190px;}
.aware .r { height: 200px;}
.aware .r .c { min-width: 250px; height: 100%; overflow: hidden; position: relative; }
.aware .r .c .text > .flex hr { flex: 1; }
.aware .r .c .text { transform: translateY(100%); transition: transform .25s, visibility 0s .25s; visibility: hidden;}
.aware .r .c .text > * {position: relative;z-index: 1;}
.aware .r:hover .c:hover .text { transform: translate(0,0); visibility: visible; transition: transform .25s; }
.aware .r:hover .c:hover ~ .c .text { transform: translate(-100%); }
.aware .r:hover .text { transform: translate(100%); }
.aware .r:hover ~ .r .text { transform: translateY(-100%); }

.aware .r .c:nth-child(2) .text { background-color: #fe541788; }
.aware .r .c:nth-child(3) .text { background-color: #ffc20188; }
.aware .r .c:nth-child(4) .text { background-color: #33c8f388; }
.aware .r .c:nth-child(5) .text { background-color: #310b6e88; }
.aware .r .c:nth-child(6) .text { background-color: #fe541788; }

.aware .r .c .text::before { clip-path: polygon(0% 0%, 0% 100%, 100% 100%); content: ''; inset: 0; }
.aware .r .c:nth-child(2) .text::before { background-color: #fe5417cc; }
.aware .r .c:nth-child(3) .text::before { background-color: #ffc201cc; }
.aware .r .c:nth-child(4) .text::before { background-color: #33c8f3cc; }
.aware .r .c:nth-child(5) .text::before { background-color: #310b6ecc; }
.aware .r .c:nth-child(6) .text::before { background-color: #fe5417cc; }


.cal .monthName { font-size: 44px; font-weight: bold; font-family: Calibri; }
.cal .head > div { font-size: 22px; font-weight: bold; font-family: Calibri; color: #310b6e; }
.cal .body > .day > .date > span { font-size: 22px; font-weight: bold; font-family: Calibri; color: #310b6e; }
.cal .body > .day > .date > div { border-bottom: 1px solid #310b6e; }

.cal .head > div:nth-child(7n) {color: #33c8f3; }
.cal .body > .day:nth-child(7n) > .date > span {color: #33c8f3; }
.cal .body > .day:nth-child(7n) > .date > div { border-bottom: 1px solid #33c8f3; }

.cal .head > div:nth-child(7n+1) { color: #fe5417; }
.cal .body > .day:nth-child(7n+1) > .date > span { color: #fe5417; }
.cal .body > .day:nth-child(7n+1) > .date > div { border-bottom: 1px solid #fe5417; }
.cal .body > .day {min-height: 160px; }
.cal .body > .day .event .img { height: 40px; width: 40px; }
.cal .body > .day:hover .date > div { border-color: #ffc201; }
.cal .body > .day:hover .date > span { color: #ffc201; }
.calSide .imgCont:hover :is(.i, .i-l) div:nth-child(2) {height: 30px;}
.calSide .imgCont .cover { width: 350px; transform: scale(1.004); }
.calSide .imgCont .i { right: 55px; bottom: 55px; }
.calSide .imgCont .i-l { top: 0; left: 0; }
.calSide :is(.i, .i-l) { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 20px;  }
.calSide :is(.i, .i-l) div:nth-child(1) {  width: 30px; height: 30px; border-radius: 30px; background-color: #fe5417;  }
.calSide :is(.i, .i-l) div:nth-child(2) {  width: 30px; height: 80px; border-radius: 30px; background-color: #33c8f3; transition: all .25s .25s; }
.calSide :is(.i-l) div:nth-child(2) {  width: 30px; height: 130px; border-radius: 30px; background-color: #33c8f3; transition: all .25s; }
 
.calSide .item .img { min-height: 70px; height: 70px; min-width: 70px; width: 70px; }
.bounce { animation: bounce 1s ease-in-out alternate infinite; }

@keyframes bounce {
  to { transform: translateY(-25px);}
}


.gallery .cubes { display: grid; grid-template-columns: repeat(2, 250px); }
.gallery .cube { width: 250px; height: 250px; transform-style: preserve-3d; transition: 2s ease-in-out;} 
.gallery .cube .side:nth-child(1) { transform: rotateY(0deg) translateZ(125px); } 
.gallery .cube .side:nth-child(2) { transform: rotateY(90deg) translateZ(125px); } 
.gallery .cube .side:nth-child(3) { transform: rotateY(180deg) translateZ(125px); } 
.gallery .cube .side:nth-child(4) { transform: rotateY(270deg) translateZ(125px); } 
.gallery .cube:hover { transform: rotateY(-269.999deg); }
.gallery .cubeLike { height: 250px; width: 250px; }
.gallery .cubeLike .gradient { height: 110px; width: 100%; background-image: linear-gradient(45deg, #fe5417, #ffc201); }
.gallery .cube .text { backdrop-filter: blur(100px); }
.gallery .cube:nth-child(2) .side::before { content: ''; bottom: 0; left: 0; width: 100%; height: 10px; background-image: linear-gradient(45deg, transparent, #fe5417); }
.gallery .cube:nth-child(3) .side::before { content: ''; bottom: 0; left: 0; width: 100%; height: 10px; background-image: linear-gradient(45deg, transparent, #ffc210); }
.gallery .cube:nth-child(4) .side::before { content: ''; bottom: 0; left: 0; width: 100%; height: 10px; background-image: linear-gradient(45deg, transparent, #33c8f3); }

.gallery .expand { width: 620px; height: 620px; }
.gallery .expand .item { width: 200px; height: 200px; transform: scale(0.1); transition: all 2s var(--d, 0s);  }
.gallery .expand .item::before {content: ''; inset: 0; background-color: #ffc201; transition: all .25s; transition: all 2s var(--d, 0s);  }
.gallery .expand .item:nth-child(odd)::before {content: ''; inset: 0; background-color: #fe5417;}
.gallery .expand label { font-size: 0.25rem; color: #fe5417; border: 3px solid #fe5417; border-radius: 50%; width: 150px; height: 150px;
left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all .25s; display: flex; justify-content: center; align-items: center;
transition: 2s;
}

#expand:checked ~ .expand .item::before {background-color: transparent;}
#expand:checked ~ .expand .item { transform: scale(1); }
#expand:checked ~ .expand label {  top: 110%; font-size: 3rem; width: 75px; height: 75px; transform: translate(-50%, -50%) rotate(45deg); }
.gallery .expand .item:nth-child(1) { left: 180px; top: 180px; }
.gallery .expand .item:nth-child(2) { left: 210px; top: 180px; }
.gallery .expand .item:nth-child(3) { left: 240px; top: 180px; }

.gallery .expand .item:nth-child(4) { left: 180px; top: 210px; }
.gallery .expand .item:nth-child(5) { left: 210px; top: 210px; }
.gallery .expand .item:nth-child(6) { left: 240px; top: 210px; }

.gallery .expand .item:nth-child(7) { left: 180px; top: 240px; }
.gallery .expand .item:nth-child(8) { left: 210px; top: 240px; }
.gallery .expand .item:nth-child(9) { left: 240px; top: 240px; }


#expand:checked ~ .expand .item:nth-child(1) { left: 0px; top: 0px; }
#expand:checked ~ .expand .item:nth-child(2) { left: 210px; top: 0px; }
#expand:checked ~ .expand .item:nth-child(3) { left: 420px; top: 0px; }
#expand:checked ~ .expand .item:nth-child(4) { left: 0px; top: 210px; }
#expand:checked ~ .expand .item:nth-child(5) { left: 210px; top: 210px; }
#expand:checked ~ .expand .item:nth-child(6) { left: 420px; top: 210px; }
#expand:checked ~ .expand .item:nth-child(7) { left: 0px; top: 420px; }
#expand:checked ~ .expand .item:nth-child(8) { left: 210px; top: 420px; }
#expand:checked ~ .expand .item:nth-child(9) { left: 420px; top: 420px; }


.scroll .itemCont > .rel { height: 400px; background-color: #ffc201;  }
.scroll .itemCont .scroller { position: absolute; width: 400px; height: 1420px; transform: translateX(-100%) rotate(90deg); top: -510px; right: 110px; }
.scroll .itemCont .scroller::-webkit-scrollbar { display: none; }
.scroll .itemCont .scroller .item { width: 215px; aspect-ratio: 3/4;
  transform: translate(93px) rotate(-90deg) scale(0.9);  overflow: hidden;
  animation: scroll;
  animation-timeline: view(-10% 10%);
 }
.scroll .itemCont .scroller .item .b { z-index: 5; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); transition: all .25s; opacity: 0;  }
.scroll .itemCont .scroller .item:hover img { transform: scale(1.2); }
.scroll .itemCont .scroller .item:hover .b { opacity: 1; top: 80%;  }
@keyframes scroll {
  0% { transform: translate(93px) rotate(-90deg) scale(0.9); }
  50% { transform: translate(93px) rotate(-90deg) scale(1.25); }
  100% { transform: translate(93px) rotate(-90deg) scale(0.9); }
}

/* 푸터 영역 */
footer .logo { height: 70px;  }
footer .cont { position: relative; z-index: 1; }
footer .sns img {height: 40px; width: 40px;}
footer .sns img:hover { transform: translateY(-5px); } 
footer {background-color: #fe5417; border-top-right-radius: 45px; }

.tab {text-align: center;}
.tab label {width: 130px; }
.tab label:hover { background-color: #f2f2f2; }
.barCont { height: 10px; background-color: #e4e1dc; width: calc(130px * 5); }
.barCont > .bar { width: 130px; background-color: #fe5417; }

#cat1:checked ~ .itemCont .bar { background-color: #fe5417; margin-left: calc(130px * 0); } 
#cat2:checked ~ .itemCont .bar { background-color: green; margin-left: calc(130px * 1); } 
#cat3:checked ~ .itemCont .bar { background-color: #33c8f3; margin-left: calc(130px * 2); } 
#cat4:checked ~ .itemCont .bar { background-color: #310b6e; margin-left: calc(130px * 3); } 
#cat5:checked ~ .itemCont .bar { background-color: #ffc201; margin-left: calc(130px * 4); } 

.typo .cat { display: none; }
.typo .cat > * { animation: show 1s var(--d, 0s) ease-in-out forwards; opacity: 0; }
@keyframes show {
  from { opacity: 0; transform: translate(-100px); }
  to { opacity: 1; transform: translate(0px); }
}

#cat1:checked ~ .itemCont .typo > .cat1 { display: block; }
#cat2:checked ~ .itemCont .typo > .cat2 { display: block; }
#cat3:checked ~ .itemCont .typo > .cat3 { display: block; }
#cat4:checked ~ .itemCont .typo > .cat4 { display: block; }
#cat5:checked ~ .itemCont .typo > .cat5 { display: block; }

#cat1:checked ~ .itemCont .typo > .cat1 h3 { color: #fe5417; }
#cat2:checked ~ .itemCont .typo > .cat2 h3 { color: green; }
#cat3:checked ~ .itemCont .typo > .cat3 h3 { color: #33c8f3; }
#cat4:checked ~ .itemCont .typo > .cat4 h3 { color: #310b6e; }
#cat5:checked ~ .itemCont .typo > .cat5 h3 { color: #ffc201; }

.itemCont > .cat { display: none; columns: 4; gap: 1rem; }
.itemCont > .cat img { transition: all .25s; }
.itemCont > .cat > * { opacity: 0; border-radius: 3rem; margin-bottom: 1rem; overflow: hidden; animation: toggle 1s ease-in-out forwards; }
@keyframes toggle {
  from {transform: scale(0); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}
.itemCont > .cat > *:hover > img {transform: scale(1.3);}

.itemCont > .cat > .gradient { height: 110px; background: linear-gradient(45deg, #fe5417, #ffc201); width: 343px; }
#cat1:checked ~ .itemCont > .cat1 { display: block; }
#cat2:checked ~ .itemCont > .cat2 { display: block; }
#cat3:checked ~ .itemCont > .cat3 { display: block; }
#cat4:checked ~ .itemCont > .cat4 { display: block; }
#cat5:checked ~ .itemCont > .cat5 { display: block; }





.popup { z-index: 9; position: absolute; background-color: rgba(0, 0, 0, 0.6); color: white; padding: 10px; border-radius: 10px;}
.popup:empty { opacity: 0;}

.popup p {display: flex; align-items: center; gap: 5px;}
.popup p span {width: 1rem; height: 1rem; border-radius: 5px;}

.canvasWrapper {position: relative; width:  min-content; height: min-content;}


.places { border-radius: 30px; margin-bottom: 3rem; }
.places .place { width: 100px; height: 100px; background-position: 33.33% 50%;  background-size: 400px 300px; }
.spots { z-index: 9; pointer-events: none; }
.spots .spot { pointer-events: all; transform: translate(-50%, -100%); position: absolute; }
.spot { width: auto; height: auto; }
.viewer { perspective: 500px; width: 600px; height: 600px; overflow: hidden; display: grid; place-items: center; }
.viewer .view { width: 0; height: auto; transform-style: preserve-3d; 
  
}
.viewer .view > div {  margin-left: -1000px; margin-top: -1000px; width: 2000px; height: 2000px; position: absolute; }
.viewer .view > .front { background-position: 33.33% 50%; transform: rotateY(0deg) translateZ(-999px); }
.viewer .view > .back { background-position: 99.999% 50%; transform: rotateY(180deg) translateZ(-999px); }
.viewer .view > .left {background-position: 0% 50%; transform: rotateY(90deg) translateZ(-999px);}
.viewer .view > .right {background-position: 66.66% 50%; transform: rotateY(270deg) translateZ(-999px);}
.viewer .view > .top { background-position: 33.333% 0%; transform: rotateX(-90deg) translateZ(-999px); }
.viewer .view > .bottom { background-position: 33.333% 100%; transform: rotateX(90deg) translateZ(-999px); }