body,h1,h2,h3,p,ul,li {margin: 0;padding: 0;}
a {text-decoration: none;display: block;color: #fff;}
li {list-style: none;}
img {vertical-align: top;}
* {box-sizing: border-box;}

body {font-family: "Roboto", "Arial", sans-serif;background-color: #111111;height: 5000px;}
#top_button {position: fixed;bottom: 60px;right: 100px;z-index: 999;opacity: 0;cursor: pointer;}
#wrap {position: relative;display: flex;width: 100%;min-width: 1900px;height: 3000px;background-position: center;background-repeat: no-repeat;flex-direction: column;align-items: center;}
header {position: fixed;right: 50px;top: 60px;z-index: 999;}

video#bgvid {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: -100;background-size: cover;opacity: 0.8;}
#hide {position: absolute; z-index: 99999999;opacity: 1;transition: opacity 3s ease;}

.play {padding-top: 12px;}
.home {padding-top: 12px;margin-right: 20px;}
.oneday {clear: both;margin-top: 60px;text-align: right;}
.logo {position: absolute;left: 70px;z-index: 9999;}
.left {float: left;}
.right {float: right;}

@font-face {
    font-family: 'LOTTERIACHAB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/LOTTERIACHAB.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


.mobile {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998;
    width: 100%;
}

.maincontain{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 550px;
}

video#bgvid {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background-size: cover;
}
/*title*/
.title{
    z-index: 996;
    margin-top: -165px;
    margin-left: -59px;
    max-height: 1900px;
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.main{
    width: 1605px;
    height: 596px;
}

    /*end*/

.item{
    margin-top: 701px;
    z-index: 997;
    height: 6000px;
    text-align: center;
}

    /*modal*/
button:focus, button:active {
    outline: none;
}

.modal{
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 3px;
    opacity: 0;
}
    
.tip{
    width: 27px;
    height: 26px;
    margin-top: 2042px;
    margin-left: -64px;
    position: absolute;
    left: calc(50%-100px);
    top: 30%;
    z-index: 999;
    background-image: url(../img/det.png);
    pointer-events: all;
}

#modal_id:hover{
    width: 399px;
    height: 569px;
    opacity: 1;
    box-shadow: 0 50px 80px rgba(255, 255, 255, 0.15), 0 15px 100px rgba(255, 255, 255, 0.15), 0 5px 100px rgba(255, 254, 254, 0.1);
    transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
    transition: 0.3s ease;
    background-image: url(../img/tip.png);
}

.arrow,.arrow:before {position: absolute;left: 50%;}

.arrow {
    width: 40px;
    height: 40px;
    top: 7%;
    margin: 649px 0 0 -20px;
    -webkit-transform: rotate(45deg);
    border-left: none;
    border-top: none;
    border-right: 2px #ffffff solid;
    border-bottom: 2px #ffffff solid;
}

.arrow:before {
    content: "";
    width: 20px;
    height: 20px;
    top: 50%;
    margin: -10px 0 0 -10px;
    border-left: none;
    border-top: none;
    border-right: 1px #ffffff solid;
    border-bottom: 1px #ffffff solid;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: arrow;
}

@keyframes arrow {
    0% {
    opacity: 1;
    }
    100% {
    opacity: 0;
    transform: translate(-10px, -10px);
    }
}


@media screen and (max-width: 640px) {
body,html {
    height: 100%;
    position: relative;
    width: 100%;
    }
.play {
    display: none;
    }
.home {
    float: right;
    margin-top: 20px;
    margin-right: 0;
    }
.mobile img {
    width: 100%;
    }
.mobile {
    display: block;
    text-align: center;
    width: 100%;
    justify-content: center;
    }
#wrap {
    display: none;
    }
header {
    right: 10px;
    top: -10px;
    }
.vs{
    display: none;
}
    
}


/* slide */
a {text-decoration: none; color:#666;}

/* btn */
.btn-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 999;
    margin-top: 3746px;
    cursor: pointer;
}
.btn-wrap > a {line-height: 23px; cursor: pointer;}

/* modal */
#modal {position: fixed;left: 0; top: 0;width: 100%; height: 100%;transform: scale(0); z-index: 999;}
#modal .modal-bg {background: rgba(0,0,0,0.7); display:flex; align-items: center; justify-content: center; height: 100%; }
#modal .modal-bg .modal-cont {position:relative;; padding: 40px; max-width: 1229px; display: inline-block;}
#modal .modal-bg .modal-cont h2 {font-size: 30px;}
#modal .modal-bg .modal-cont p {font-size: 18px; }
#modal .modal-bg .modal-cont .close {position: absolute; top: 0; right: 0; margin: 87px 36px; padding: 9px; border-radius: 50%; }
#modal .modal-bg .modal-cont .close svg {width: 24px; fill: #fff; vertical-align: top; cursor: pointer;}


/* two */
#modal.two {
	transform: scaleY(0.01) scaleX(0);
	animation: unfoldIn 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.two .modal-bg .modal-cont {
	transform: scale(0);
	animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal.two.out {
	transform: scale(1);
	animation: unfoldOut 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.two.out .modal-bg .modal-cont {
	transform: scale(0);
	animation: zoomOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

@keyframes unfoldIn{
	0% {transform: scaleY(0.005) scaleX(0);}
	50% {transform: scaleY(0.005) scaleX(1);}
	100% {transform: scaleY(1) scaleX(1);}
}
@keyframes unfoldOut{
	0% {transform: scaleY(1) scaleX(1);}
	50% {transform: scaleY(0.005) scaleX(1);}
	100% {transform: scaleY(0.005) scaleX(0);}
}
@keyframes zoomIn {
	0% {transform: scale(0);}
	100% {transform: scale(1); }
}
@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0); }
}




/* slide */
.swiper { width: 890px; max-width: 100%; }

.pagination-group-slide .swiper-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: static; margin: 50px auto; }
.pagination-group-slide .swiper-pagination-bullet { position: relative; width: 146px; height: 60px; border-radius: 0; background: center center no-repeat; opacity: 1; outline: none; }
.pagination-group-slide .swiper-pagination-bullet-active::after{ content: ''; display: block; position: absolute; top: -5px; left: 0; right: 0; width: 100%; height: 70px; margin: 0 auto; background: url(../img/m_on.png) center center no-repeat; background-size: contain; }

.pagination-group-slide .swiper-pagination-bullet:nth-child(1){ background-image: url(../img/m1_off.png); }
.pagination-group-slide .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-child(1){ background-image: url(../img/m1_on.png); }

.pagination-group-slide .swiper-pagination-bullet:nth-child(2){ background-image: url(../img/m2_off.png); }
.pagination-group-slide .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-child(2){ background-image: url(../img/m2_on.png); }


.nav-group-slide2 .swiper-button-prev,
.nav-group-slide2 .swiper-button-next { width: 24px; height: 39px; background: center center no-repeat; background-size: contain; }
.nav-group-slide2 .swiper-button-prev { left: 10px; right: auto; background-image: url(../img/lbtn.png); }
.nav-group-slide2 .swiper-button-next { left: auto; right: 10px; background-image: url(../img/rbtn.png); }
.nav-group-slide2 .swiper-button-prev::after,
.nav-group-slide2 .swiper-button-next::after { display: none; }

.section2 .swiper-slide img { display: block; width: 100%; margin: 0 auto; }

.pagination-group2-slide { display: block; }

/* button */
.button {
    --offset: 10px;
    --border-size: 1.8px;
    display: block;
    position: relative;
    padding: 0.5em 4em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: #fdc16c;
    color: #facf93;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    outline: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 0;
    box-shadow: inset 0 0 0 var(--border-size) currentcolor;
    transition: background 0.3s ease;
}

a2{
    letter-spacing: 0.25em;
    font-weight: 600;
    color: rgb(0 0 0);
}
  .button:hover {
    background: #fdc16c;
  }
  .button__horizontal, .button__vertical {
    position: absolute;
    top: var(--horizontal-offset, 0);
    right: var(--vertical-offset, 0);
    bottom: var(--horizontal-offset, 0);
    left: var(--vertical-offset, 0);
    transition: transform 0.5s ease;
    will-change: transform;
  }
  .button__horizontal::before, .button__vertical::before {
    content: "";
    position: absolute;
    border: inherit;
  }
  .button__horizontal {
    --vertical-offset: calc(var(--offset) * -1);
    border-top: var(--border-size) solid currentcolor;
    border-bottom: var(--border-size) solid currentcolor;
  }
  .button__horizontal::before {
    top: calc(var(--vertical-offset) - var(--border-size));
    bottom: calc(var(--vertical-offset) - var(--border-size));
    left: calc(var(--vertical-offset) * -1);
    right: calc(var(--vertical-offset) * -1);
  }
  .button:hover .button__horizontal {
    transform: scaleX(0);
  }
  .button__vertical {
    --horizontal-offset: calc(var(--offset) * -1);
    border-left: var(--border-size) solid currentcolor;
    border-right: var(--border-size) solid currentcolor;
  }
  .button__vertical::before {
    top: calc(var(--horizontal-offset) * -1);
    bottom: calc(var(--horizontal-offset) * -1);
    left: calc(var(--horizontal-offset) - var(--border-size));
    right: calc(var(--horizontal-offset) - var(--border-size));
  }
  .button:hover .button__vertical {
    transform: scaleY(0);
  }