@charset "utf-8";
html,
body {
    width: 100%;
}

/* all */
#wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 768px;
    min-height: 100vh;
    background: #0e0d0c;
    text-align: center;
    display: flex;
    flex-direction: column;
}

section#contents {
    position: relative;
    width: 100%;
    height: 1080px;
}

section#contents article {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1080px;
    padding-left: 277px;
}
#download {
    height: 100% !important;
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/main_bg.jpg) no-repeat center / cover;
}

#download .download_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    padding: 2% 0;
    height: 100vh;
    max-height: 1080px;
}

#download .download_wrap img {
    width: 100%;
}

#download .download_wrap h1 {
    width: 70%;
    max-width: 516px;
}

#download .download_wrap .bottom_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#download .download_wrap .bottom_wrap h2 {
    width: 100%;
    max-width: 845px;
}

#download .down_btns {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
}

#download .down_btns a {
    width: 12vw;
    min-width: 170px;
    max-width: 170px;
    display: block;
}

#download .down_btns a img {
    aspect-ratio: 238/81;
    width: 100%;
    display: block;
}

/* //20200728 수정 */

#event {
    display: none;
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/event_bg.jpg) 50% 0 no-repeat;
    background-size: cover;
}
#event ul {
    overflow: hidden;
    position: relative;
    width: 1110px;
    height: 782px;
    margin: 0 auto;
    padding: 160px 5.2% 0 0;
    box-sizing: content-box;
}
#event ul li {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 160px;
}
#event ul a.tab1 {
    position: absolute;
    top: 160px;
    left: 349px;
    width: 237px;
    height: 46px;
}
#event ul a.tab2 {
    position: absolute;
    top: 160px;
    left: 586px;
    width: 233px;
    height: 46px;
}
#event ul a.btn {
    position: absolute;
    top: 810px;
    left: 232px;
    width: 308px;
    height: 74px;
}

#gallery {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/gallery_bg.jpg) 50% 0 no-repeat;
    background-size: cover;
}
#gallery .feature_con {
    position: relative;
    width: 364px;
    height: 630px;
    margin: 200px auto 0;
    padding-right: 5.2%;
    box-sizing: content-box;
}
#gallery .feature_con .screen {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
#gallery .feature_con .feature_img {
    overflow: hidden;
    position: absolute;
    top: 12px;
    left: 12px;
    width: 342px;
    height: 608px;
}
#gallery .feature_con .feature_img li {
    position: absolute;
    top: 0;
    left: 342px;
}
#gallery .feature_con .feature_img li:first-child {
    left: 0;
}
#gallery .feature_con .feature_dots {
    position: absolute;
    top: 640px;
    left: 95px;
}
#gallery .feature_con .feature_dots a {
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/gallery_dot.png) 0 0 no-repeat;
}
#gallery .feature_con .feature_dots a.on {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/gallery_dot_on.png) 0 0 no-repeat;
}
#gallery .feature_con .feature_prev {
    position: absolute;
    top: 300px;
    left: -100px;
}
#gallery .feature_con .feature_next {
    position: absolute;
    top: 300px;
    left: 375px;
}

.no-cssmask .project.hide {
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
    -webkit-mask: none !important;
    mask: none !important;
}

@-webkit-keyframes mask-play {
    from {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@keyframes mask-play {
    from {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

section#contents {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/urban-sprite-2.png) no-repeat -9999px -9999px;
}
.project.hide {
    -webkit-mask: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/urban-sprite-2.png);
    mask: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/urban-sprite-2.png);
    -webkit-mask-size: 7400% 100%;
    mask-size: 7400% 100%;
    -webkit-animation: mask-play 1s steps(73) forwards;
    animation: mask-play 1s steps(73) forwards;
}

@media (min-width: 1921px) {
    #download .download_wrap {
        height: 100%;
    }
}