@charset "UTF-8";

@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Sen:wght@400;700;800&display=swap);
@import url(animate.min.css);

/* Reset with bootstrap */
html{font-size: 20px}
body, p, h1, h2, h3, span, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select{margin: 0;padding: 0}
body, input, textarea, select, button, table{font-family: 'Sen', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif}
body{-ms-word-break: break-all;word-break: keep-all;word-wrap: break-word;color: #1a1a1a;font-size: 1.25rem}
a, a:hover, a:focus, a:active{text-decoration: none;color: inherit}
a, button, input, textarea{transition: border-color .15s ease-in-out,background .15s ease-in-out,color .15s ease-in-out,opacity .15s ease-in-out,transform .15s ease-in-out,box-shadow .4s}
li{list-style: none}
address, em{font-style: normal}
label{cursor: pointer}
table{width: 100%}
textarea{resize: none}
strong, b{font-weight: 800}
img{vertical-align: top}
picture{display: block}
picture>*{max-width: 100%}

body{ overflow-x:hidden; overflow-y: auto;}
#wrap{position: relative;}
#wrap>img{display: block;position:relative;left:50%;transform:translate(-50%,0)}
#link{ position:absolute;bottom:260px;left:50%;width:1200px;transform:translate(-50%,0)}
#link a{display: block;width:100%; height:120px;}
#motion{position: absolute;top:50%;left:50%;width: 1920px;height:1080px; transform:translate(-50%,-50%)}

.swiper-pagination-progressbar{position: fixed !important;top: auto; bottom:0;left:0;width:100%;z-index:99}

.play{display: flex; align-items: center; justify-content: center; position: fixed;top:0;bottom:0;left:0;right:0; z-index:99; background: rgba(0,0,0,.9);color:#fff;cursor: pointer; transition:opacity .3s}
.play strong{ margin-right:40px; font-size:120px; }
.start .play{opacity:0; pointer-events:none}


@media (max-width:1200px){
}