body, .wrap { width: 100%; }

a { background-color: #f000; }

.header { display: flex; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 8.3333vw; background-color: #eee; z-index: 100; }
.section { position: relative; }

/* gnb */
.gnb-wrap { display: flex; justify-content: center; align-items: center; width: 92.7083vw; height: 100%; }
.gnb-wrap a { display: flex; justify-content: center; align-items: center; }
.gnb-wrap a.home { width: 17.7083vw; height: 100%; }
.gnb-wrap a.home img { width: 3.9583vw; }
.gnb-wrap a.menu { width: 25vw; height: 100%; border-right: 1px solid #cacaca; transition: background-color .3s ease; }
.gnb-wrap a.menu:last-child { border-right: 0; }
.gnb-wrap a.menu img { position: absolute; width: auto; height: 2.2917vw; opacity: 1; transition: opacity .3s ease; }
.gnb-wrap a.menu img.on { opacity: 0; }
.gnb-wrap a.menu.on { background-color: #64635e; }
.gnb-wrap a.menu.on img { opacity: 0; }
.gnb-wrap a.menu.on img.on { opacity: 1; }
.gnb-wrap a.menu:hover { background-color: #64635e; }
.gnb-wrap a.menu:hover img { opacity: 0; }
.gnb-wrap a.menu:hover img.on { opacity: 1; }

/* common */
.video-wrap { position: absolute; overflow: hidden; }
.video-wrap iframe { width: 100%; height: 100%; }
.btn-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 0; }
.btn-wrap a { display: block; position: absolute; left: 11.5625vw; width: 76.3542vw; height: 9.6875vw; border-radius: 10vw; }

/* footer */
.footer-btn-wrap { display: flex; justify-content: space-between; position: absolute; bottom: 13.6458vw; left: 43.0208vw; width: 14.0625vw; }
.footer-btn-wrap a { display: block; height: 3.3333vw; }
.footer-btn-wrap a:nth-child(1) { width: 4.5833vw; }
.footer-btn-wrap a:nth-child(2) { width: 3.3333vw; }
.footer-btn-wrap a:nth-child(3) { width: 3.3333vw; }

/* index */
.index .video-wrap { top: 253.8542vw; left: 8.75vw; width: 82.9167vw; height: 46.64vw; }
.index .btn-wrap { display: flex; justify-content: space-between; top: 307.5000vw; left: 10.3125vw; width: 79.2708vw; }
.index .btn-wrap a { position: relative; left: auto; width: 24.4792vw; height: 23.3333vw; border-radius: 0; }

/* event */
.event .video-wrap { top: 75.0000vw; left: 13.5417vw; width: 72.9167vw; height: 41.02vw; }
.event a.btn-video { top: 193.0208vw; left: 43.5417vw; width: 40.8333vw; height: 22.8125vw; border-radius: 1.0417vw; }
.event a.btn-popup { top: 278.8542vw; }
.event a.btn-store { top: 441.3542vw; }
.event a.btn-homepage { top: 454.2708vw; }

/* test group */
.testgroup .video-wrap { top: 69.4792vw; left: 11.6667vw; width: 76.65vw; height: 43.13vw; }
.testgroup a.btn-popup { top: 174.6875vw; }
.testgroup a.btn-store { top: 418.0208vw; }
.testgroup a.btn-homepage { top: 430.8333vw; }

/* challenge */
.challenge .video-wrap { top: 255.0625vw; left: 15.6250vw; width: 67.3958vw; height: 37.91vw; border-radius: 3.1250vw; }
.challenge a.btn-popup { top: 203.5417vw; }
.challenge a.btn-store { top: 472.3958vw; }
.challenge a.btn-homepage { top: 485.1042vw; }

@media all and (min-width: 960px) {
    .header { height: 80px; }
    .section { display: flex; justify-content: center; }
    .section img { width: 960px; }

    /* button */
    .btn-wrap a { left: 50%; width: 733px; height: 93px; border-radius: 50px; transform: translateX(-50%) }

    /* gnb */
    .gnb-wrap { width: 890px; }
    .gnb-wrap a.home { width: 170px; }
    .gnb-wrap a.home img { width: 38px; }
    .gnb-wrap a.menu { width: 240px; }
    .gnb-wrap a.menu img { height: 22px; }

    /* footer */
    .footer-btn-wrap { bottom: 131px; left: 50%; width: 135px; transform: translateX(-50%); }
    .footer-btn-wrap a { height: 32px; }
    .footer-btn-wrap a:nth-child(1) { width: 44px; }
    .footer-btn-wrap a:nth-child(2) { width: 32px; }
    .footer-btn-wrap a:nth-child(3) { width: 32px; }

    /* home */
    .index .section { background: url(../../images/main-bg.jpg) 50% 0 no-repeat; }
    .index .video-wrap { top: 2437px; left: 50%; width: 796px; height: 448px; transform: translateX(-50%); }
    .index .btn-wrap { top: 2952px; left: auto; width: 761px; }
    .index .btn-wrap a { width: 235px; height: 224px; transform: unset; }

    /* event */
    .event .section { background: url(../../images/event-bg.jpg) 50% 0 no-repeat; }
    .event .video-wrap { top: 720px; left: 50%; width: 700px; height: 394px; transform: translateX(-50%); }
    .event a.btn-video { top: 1853px; left: 50%; width: 392px; height: 219px; transform: translateX(-62px); border-radius: 10px; }
    .event a.btn-popup { top: 2677px; }
    .event a.btn-store { top: 4237px; }
    .event a.btn-homepage { top: 4361px; }

    /* test group */
    .testgroup .section { background: url(../../images/test-group-bg.jpg) 50% 0 no-repeat; }
    .testgroup .video-wrap { top: 667px; left: 50%; width: 735px; height: 413px; transform: translateX(-50%); }
    .testgroup a.btn-popup { top: 1677px; }
    .testgroup a.btn-store { top: 4013px; }
    .testgroup a.btn-homepage { top: 4136px; }

    /* challenge */
    .challenge .section { background: url(../../images/challenge-bg.jpg) 50% 0 no-repeat; }
    .challenge .video-wrap { top: 2449px; left: 50%; width: 647px; height: 364px; border-radius: 30px; transform: translateX(-330px); }
    .challenge a.btn-popup { top: 1954px; }
    .challenge a.btn-store { top: 4535px; }
    .challenge a.btn-homepage { top: 4657px; }
}