@font-face {
    font-family: 'GT America';
    src: url("../assets/fonts/GT-America-Standard-Regular.woff2") format('woff2'), url("../assets/fonts/GT-America-Standard-Regular.woff") format('woff'), url("../assets/fonts/GT-America-Standard-Regular.ttf") format('truetype'), url("../assets/fonts/GT-America-Standard-Regular-Italic.woff2") format('woff2'), url("../assets/fonts/GT-America-Standard-Regular-Italic.woff") format('woff'), url("../assets/fonts/GT-America-Standard-Regular-Italic.ttf") format('truetype');
}

.loading {
    background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	opacity: 0;
	transition: 0.5s;
}
.before-load .container {
    background-color: #000;
    display: none;
}
.before-load .loading {
    background-color: #000;
	opacity: 1;
}
@keyframes loading-spin {
	100% { transform: rotate(360deg); }
}
@keyframes loading-circle-ani {
	0% { stroke-dashoffset: 157; }
	75% { stroke-dashoffset: -147; }
	100% { stroke-dashoffset: -157; }
}

.loading-circle {
	width: 54px;
	height: 54px;
	animation: loading-spin 3s infinite;
}
.loading-circle circle {
	stroke: #ED1F24;
	stroke-width: 5;
	/* getTotalLength()로 stroke의 길이를 얻어올 수 있음 */
	stroke-dasharray: 157, 157;
	stroke-dashoffset: 0;
	fill: transparent;
	animation: loading-circle-ani 1s infinite;
	/* transition: 1s; */
}

body,
html {
    cursor: crosshair;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 0;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #ED1F24;
    border-radius: 0;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #ED1F24;
}

:root {
    --timing: 0.3s;
    --bezier: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.cart a,
.left,
.logo img,
.logo_big img .menu a,
footer {
    animation: fade var(--timing) var(--bezier) both;
}

.logo img,
.logo_big img {
    animation-delay: var(--timing);
}

.cart a,
.left,
.menu a {
    animation-delay: calc(3 * var(--timing));
}

footer {
    animation-delay: calc(4 * var(--timing));
}

@keyframes fade {
    0% {
        opacity: 0;
        transform: translate(0, 30px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

::selection {
    text-shadow: 15px 15px 15px #ED1F24;
}

a {
    color: #ED1F24;
    text-decoration: none;
}

a:hover {
    cursor: crosshair;
    text-shadow: 10px 10px 10px #ED1F24;
}

input,
label {
    font-family: 'GT America',sans-serif;
    font-size: 1.5rem;
}

.current {
    font-weight: bold;
}

a {
    transition: all 100ms ease-in-out;
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    -ms-transition: all 100ms ease-in-out;
}

#crosshair-h {
    width: 100%;
}

#crosshair-v {
    height: 100%;
}

.hair {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: -3px;
    margin-left: -2px;
    background: transparent;
    border-top: 1px solid #ED1F24;
    border-left: 1px solid #ED1F24;
    pointer-events: none;
    z-index: 2;
}

#mousepos {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    margin: 10px;
    font: 14px arial;
    color: #ED1F24;
    background: rgba(0,0,0,0.5);
    border-radius: 24px;
    z-index: 1;
}

body {
    background-color: #000;
    color: #ED1F24;
    font-family: 'GT America',sans-serif;
    overflow-x: hidden;
}

header {
    width: 100%;
    position: fixed;
    z-index: 1;
    color: #ED1F24;
    text-align: center;
    font-size: 1.5rem;
}

.logo img {
    width: 200px;
    margin-left: 1.5rem;
    margin-bottom: 0.3rem;
    transition: 0.2s;
    top: 0;
}

.logo_big img {
    width: 400px;
    margin-left: 1.5rem;
    margin-bottom: 0.3rem;
    transition: 0.2s;
}

.menu {
    font-size: 1.5rem;
}

.menu a {
    margin-left: 1rem;
    color: #ED1F24;
}

.cart {
    right: 0;
    float: right;
    top: -4px;
    position: fixed;
    margin-right: 3rem;
    color: #ED1F24;
    z-index: 1;
}

button {
    color: #ED1F24;
    background-color: transparent;
    border: none;
    padding: 0;
    text-decoration: none;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.basket {
    display: none;
    background-color: #ED1F24;
    color: #000;
    width: 275px;
    height: 375px;
    right: 0;
    float: right;
    top: 1.5rem;
    position: fixed;
    margin-right: 1.5rem;
}

.close {
    text-align: left;
    margin-top: -5px;
    margin-left: 1.5rem;
}

.checkout {
    text-align: right;
    margin-right: 1.5rem;
}
/* toggle-menu */

.togglemenu {
    display: none;
    right: 0;
    float: right;
    top: -4px;
    position: fixed;
    margin-right: 1.5rem;
    color: #ED1F24;
    z-index: 1;
}

.mobilemenu {
    display: none;
    padding-top: 120px;
    font-size: 1.5rem;
    z-index: 9999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    background-color: #000;
    color: #ED1F24;
    line-height: 1.5;
}

.mobilemenu-header {
    font-style: normal;
    text-align: left;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100px;
    position: fixed;
}

.mobilemenu-close {
    margin-left: 1.5rem;
    z-index: 1;
    position: fixed;
    top: 0;
    margin-top: -10px;
}

.left {
    float: left;
    width: 40%;
    padding-left: 3rem;
    margin-top: 10rem;
    font-size: 1.5rem;
    position: fixed;
}

.conleft {
    float: left;
    width: 60%;
    padding-left: 3rem;
    margin-top: 10rem;
    font-size: 1.5rem;
    position: unset;
}


.left-nav {
    z-index: 99999;
    padding-bottom: 1.5rem;
    float: left;
    width: 60%;
    font-size: 1.5rem;
    position: fixed;
    padding-left: 1.5rem;
}

.redbox {
    width: 200px;
    height: 200px;
    border: 1px solid #ED1F24;
    margin-right: 1.5rem;
}

.center {
    float: left;
    width: 100%;
    padding-left: 3rem;
    margin-top: 15rem;
    font-size: 1.5rem;
    display: flex;
}

.story-nav {
    padding-bottom: 1.5rem;
    position: fixed;
    float: left;
    width: 60%;
    padding-left: 3rem;
    margin-top: 10rem;
    font-size: 1.5rem;
    z-index: 99;
}

.left-nav a,
.story-nav a {
    margin-right: 1rem;
}

.story-text {
    margin-top: 10rem;
    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    line-height: 0.8;
    letter-spacing: -0.08em;
}

.left-text {
    margin-top: 5rem;
    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    line-height: 0.8;
    letter-spacing: -0.08em;
    text-shadow: 15px 15px 15px #000;
    z-index: -9999;
}

.testtet {
    font-family: 'Times New Roman', Times, serif;
    font-size: 4vw;
    line-height: 3.3vw;
    letter-spacing: -0.3vw;
}

.red {
    float: left;
    width: 60%;
    padding-left: 1.5rem;
    padding-top: 7rem;
    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    line-height: 3.3vw;
    letter-spacing: -0.3vw;
}

.black {
    float: left;
    width: 40%;
    height: 100vh;
    padding-right: 1.5rem;
    color: #ED1F24;
}

.right {
    padding-top: 15rem;
    width: 60%;
    padding-right: 3rem;
    color: #ED1F24;
    padding-left: 3rem;
    text-align: center;
    position: absolute;
    float: right;
    right: 0
}


.conright {
    padding-top: 15rem;
    width: 40%;
    padding-right: 3rem;
    color: #ED1F24;
    padding-left: 3rem;
    text-align: left;
    position: absolute;
    float: right;
    right: 0
}

.right img {
    width: 42vw;
}

.row {
    display: flex;
}

.book {
    top: 0;
    left: 0;
    position: fixed;
    z-index: -9999;
}

canvas {
    z-index: -9999;
}

.content {
    top: 0;
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 1;
    z-index: -9999;
}

input,
textarea {
    background-color: #ED1F24;
}

.thumbnail img{
    width: 45vw;
    box-shadow: 5px 5px 15px #000;
}
    
.thumbnail span { /*CSS for enlarged image*/
    position: fixed;
    float: right;
    right: 0;
    visibility: hidden;
    padding-right: 1.5rem;
    padding-top: 7rem;
}
    
.thumbnail span img { /*CSS for enlarged image*/
    border-width: 0;
    right: 0;
    float: right;
}
    
.thumbnail:hover span { /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    right: 0;
    z-index: 50;
    float: right;
}

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    font-size: 1.5rem;
    margin-left: 3rem;
    margin-bottom: -5px;
    font-family: 'GT America',sans-serif;
}

.foot-left a {
    color: #ED1F24;
    font-family: 'GT America',sans-serif;
}

.foot-cart {
    color: #ED1F24;
    font-family: 'GT America',sans-serif;
    display: none;
}

.panner {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
  
.world { 
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 600px);
    grid-gap: 1.5rem;
}

.shopi {
    border:1px solid #ED1F24;
}

.smalltext {
    font-family: 'GT America',sans-serif;
    font-size:1.5rem; 
    line-height:normal;
    letter-spacing:normal;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
  
.overtext {
    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    line-height: 0.8;
    letter-spacing: -0.08em;
    text-shadow: 15px 15px 15px #000;
    color: #ED1F24;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    position: relative;
}

@media (max-width:820px) {
    header {
        top:0;
    }
    
    .left, .conleft {
        float: none;
        width: 100%;
        margin-top: 10rem;
        padding-left: 1.5rem;
        padding-right: 1rem;
        position:unset;
    }

    .story-nav {
        margin-top: 0;
        padding-left: 1.5rem;
    }

    .left-text,
    .story-text {
        font-size: 2.3rem;
        padding-top: 5rem;
    }

    .right, .conright {
        float: none;
        width: 100%;
        padding-top: 3rem;
        padding-right: 0;
        padding-left: 0;
    }

    .right img {
        width: 85%;
    }

    .center {
        display: block;
    }

    .row {
        display: block;
        clear: both;
    }

    .world { 
        position: absolute;
        top: 0;
        left: 0;
        padding: 1.5rem;
        display: block;
        grid-template-columns: none;
        grid-gap: none;
        margin-bottom: 1rem;
        text-align: center;
    }

    .smalltext {
        font-size:1.2rem; 
        line-height:normal;
        letter-spacing:normal;
        text-transform: uppercase
    }

    .panner {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .world img {
        margin-bottom: 1.5rem;
    }

    .mobilhide {
        display:none;
    }
}
  
@media (max-width:575.98px) {
    #crosshair-h,
    #crosshair-v {
        display: none;
    }

    header {
        text-align: left;
    }

    .menu {
        display: none;
    }

    .hair {
        display: none;
    }

    .togglemenu {
        display: block;
        z-index: 9999999;
    }

    .mobilemenu {
        z-index: 9999999;
    }

    .logo,
    .logo_big {
        z-index: -99999;
    }

    .logo img {
        position: fixed;
        z-index: -99999;
    }

    .logo_big img {
        width: 200px;
        z-index: -99999;
    }

    .container {
        z-index: -999999;
    }

    .cart {
        margin-right: 1.5rem;
        display: none;
    }

    .left, .conleft {
        float: none;
        width: 100%;
        margin-top: 7rem;
        padding-left: 1.5rem;
        padding-right: 1rem;
        position:unset;
    }

    .story-nav {
        margin-top: 0;
        padding-left: 1.5rem;
    }

    .left-text,
    .story-text {
        font-size: 2.3rem;
        padding-top: 5rem;
    }

    .right, .conright {
        float: none;
        width: 100%;
        padding-top: 3rem;
        padding-right: 0;
        padding-left: 0;
    }

    .right img {
        width: 85%;
    }

    .center {
        display: block;
    }

    .row {
        display: block;
        clear: both;
    }

    footer {
        margin-left: 1.5rem;
    }

    .foot-left {
        display: none;
    }

    .foot-cart {
        display: block;
    }

    .world { 
        margin-top: 7rem;
        position: absolute;
        top: 0;
        left: 0;
        padding: 1.5rem;
        display: block;
        grid-template-columns: none;
        grid-gap: none;
        margin-bottom: 1rem;
    }

    .smalltext {
        font-size:1.2rem; 
        line-height:normal;
        letter-spacing:normal;
        text-transform: uppercase
    }

    .world img {
        margin-bottom: 1.5rem;
    }

    .mobilhide {
        display:none;
    }
}