@charset "uft-8";

@import url('https://fonts.cdnfonts.com/css/irina');

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ChosunSm';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.1/ChosunSm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Adamiya Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Adamiya Regular'), url('AdamiyaRegular-MAAep.woff') format('woff');
    }





/*전체페이지 설정*/
html {
    margin:0;
    border:0;
}
body {
    height:100%;
    margin:0;
    border:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
    /* overflow-y: auto !important; */
    
}

html, body {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100); /* JavaScript 적용 후 덮어쓰기 */
    margin: 0;
    padding: 0;
}

.wrap {
    width: 100%;
    height: calc(var(--svh, 1svh) * 100);
    
    scroll-snap-type: y mandatory;
}

.container {
    scroll-snap-align: center; 
    width: 100%;
    height: calc(var(--svh, 1svh) * 100); 
    box-sizing: border-box;
    overflow: hidden;
}

div.allcontbox {
    width: 100%;
    min-height: calc(var(--svh, 1svh) * 100); /* 최소 높이 추가 */
    position: relative;
}

p{
    margin:0;
}

/*스크롤바*/
.navicircles{
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0, -50%);
}

.navicircles ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.navicircles li{
    list-style-type: none;
}

.navicircles span{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    display: block;
}

.navicircles a{
    text-decoration: none;
}

.navicircles a.active{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*첫번째 페이지*/

div.allcontbox{
    width:100%;
    position: relative;
}

div#firstpage div.allcontbox{
    background: url(/img/01/ganzi.png) no-repeat center;
    background-size: cover;
}

div#firstpage div.allcontbox p.ment{
    margin: 0;
    padding:20px 40px 0px 0px;
    text-align: right;
    color: #fff;
    font-family: 'Pretendard-Regular';
    font-weight: 300;
}

div#firstpage div.allcontbox div.maintxtbox{
    position: absolute;
    top: 20%;
    left: 38%;
    color: #fff;
    font-family: 'Adamiya Regular';
    font-size: 100px;
    text-align: center;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    gap:30px;
}


div#firstpage div.allcontbox div.maintxtbox p{
    margin:0;
    text-shadow: 3px 3px 3px #333;
}

div#firstpage div.allcontbox div.maintxtbox div.bigtxt{
    display: flex;
    align-items: baseline;
    gap: 50px;
}

div#firstpage div.allcontbox div.maintxtbox p.minetxt{
    font-size: 240px;
}


/* 기본적으로 모든 텍스트 보이도록 설정 (애니메이션 없음) */
.maintxtbox p {
    opacity: 1;
    transform: translateY(0);
    transition: none; /* 애니메이션 제거 */
}

/* .andtxt, .whytxt에만 애니메이션 적용 */
.maintxtbox p.andtxt,
.maintxtbox p.whytxt {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* 애니메이션 활성화 */
.maintxtbox p.andtxt.show,
.maintxtbox p.whytxt.show {
    opacity: 1;
    transform: translateY(0);
}



/**/
div#firstpage div.allcontbox div.votebox{
    font-family: 'Irina', sans-serif;
    display: flex;
    flex-direction: column;
    gap:15px;
    color:#fff;
    font-size: 35px;
    position: absolute;
    left: 1%;
    bottom: 3%;
}


/*두번째 페이지*/

div#secondpage{
    background-color: #444;
}

div.allcontbox p.maintitle{
    font-family: 'Cabriole';
    color: #fff;
    font-size: 37px;
    text-align: center;
    font-weight: 300;
    padding: 20px 0 50px;
    word-spacing: -3px;
    letter-spacing: 2px;
}

div.allcontbox p.maintitle span{
    font-size: 50px;
}

div.boxes{
    width: fit-content;
    display: flex;
    gap: 30px;
    justify-content: center;
    margin: 0 auto  90px;
}

div.boxes div.bigbox{
    display: flex;
        width: 647px;
}

div.boxes div.bigbox div.bigboxes{
    position: absolute;
}

div.boxes div.bigbox div.bigboxes img{
    border: 1px solid #fff;
}

div.boxes div.bigbox div.bigboxes p{
    width: 90%;
    margin: 0 auto;
    bottom: 5%;
    position: absolute;
    left: 4%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 14px 16px;
    transform: translate(-2%, 0%);
    font-family: 'Pretendard';
    font-weight: 300;
    font-size: 22px;
    line-height: 32px;
    text-align: justify;
    word-spacing: -1px;
}

div.boxes div.bigbox div.bigboxes p span{
    color:#ffc017;
    font-weight: 700;
}

div.boxes div.smallbox{
    display: grid;
    grid-template-columns: repeat(3, 3fr);
    gap: 6px;
}
div.boxes div.smallbox img{
    vertical-align: top;
}

p.votetilte{
    font-family: 'Irina', sans-serif;
    color: #fff;
    font-size: 35px;
    text-align: center;
    margin-top: 35px;
}

/*박스 동작*/

/* 큰 박스 기본 숨김 */
.bigboxes {
    display: none;
}
div.boxes div.bigbox div.bigboxes:first-child {
    display: block;
}

/*작은박스 마우스 오버시 테두리 생김*/
.innerborder {float: left; overflow: hidden;}
.innerborder:hover img {margin:-2px;}
.innerborder:hover {border:2px solid #fff;}



/*세번째 페이지*/
div#thirdpage div.allcontbox{
    height: calc(var(--svh, 1svh) * 100);
    width: auto;
    background: url(/img/03/haco.png) no-repeat center;
    background-size: cover;
    color: #fff;
    padding: 70px 140px 20px 120px;
}

div#thirdpage div.allcontbox .whytitle{
    font-family: 'Cabriole';
    line-height: 30px;
    font-size: 25px;
    text-align: left;
    font-weight: 300;
    letter-spacing: -1px;
    word-spacing: 2px;
    margin: 0 auto 70px;
    width: 100%;
}

div#thirdpage div.allcontbox .whytitle span{
    font-size: 28px;
}

div#thirdpage div.allcontbox .txtcontbox{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto 40px;
}

div#thirdpage div.allcontbox .txtcontbox .txttitlebox{
    font-family: 'ChosunSm';
    font-size: 45px;
    line-height: 65px;
    margin-top: -12px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox{
    width:65%;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox{
    font-family: 'ChosunSm';
    font-size: 28px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox span{
    font-size: 35px;
    margin-right: 18px;    
    font-weight: 600;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguntitle{
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguncont{
    font-size: 21px;
    font-family: 'Pretendard';
    font-weight: 300;
    margin-left: 54px;
    line-height: 32px;
    text-align: justify;
}

div#thirdpage div.allcontbox .votetilte{
    text-align: left;
    margin: 0;
}

/*애니메이션*/
.slogunbox {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.slogunbox.animate {
    opacity: 1;
    transform: translateY(0);
}


  /*네번째 페이지*/
div#fourthpage{
    background-color: #444;
}

div#fourthpage div.allcontbox{
    height: 100svh;
    color: #fff;

}

div#fourthpage div.allcontbox .contbox{
    align-items: center;
    width: fit-content;
    display: table;
}

div#fourthpage div.allcontbox .videobox{
    display: flex;
    align-items: center;
}


div#fourthpage div.allcontbox .yellowbox{
    width:1120px;
    height:630px; 
    padding: 50px 50px 50px 0;
    background: #eca62c;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    border-radius: 0 20px 20px 0;
    display: table-cell;
    vertical-align: middle;
}

div#fourthpage div.allcontbox .youtube{
    width:1120px;
    height:630px; 
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    border-radius: 0 20px 20px 0;
    position: unset;
    transform: unset;
}

div#fourthpage div.allcontbox .youtube iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: transparent;
    position:unset;
}

div#fourthpage div.allcontbox {
    display: flex;
    flex-direction: column;
    height: fit-content;
    justify-content: space-between;
}

div#fourthpage div.allcontbox .upperbox{
    font-weight: 300;
    font-family: 'Calibri';
    text-align: right;
    font-size: 45px;
    margin-top: 5vh;
    position: absolute;
    top: 5%;
    right: 5%;
}

div#fourthpage div.allcontbox .upperbox .thuderbolts{
    color:#ede705;
    letter-spacing: 6px;
    font-weight: 400;
}

div#fourthpage div.allcontbox  .upperbox .official{
    font-size: 35px;
}

div#fourthpage div.allcontbox  .upperbox .official span:first-child{
    letter-spacing: 4px;
}

div#fourthpage div.allcontbox  .upperbox .official span:last-child{
    letter-spacing: 6px;
}

div#fourthpage div.allcontbox .downbox{
    position: absolute;
    right: 0;
    bottom: 5%;
}

div#fourthpage div.allcontbox p.votetilte{
    transform: translate(-50%, 0);
}


div#fourthpage div.allcontbox  .downbox .twitter{
    font-family: 'Calibri';
    text-align: center;
    font-size: 25px;
    font-weight: 300;
    margin-top: 20px;
    transform: translate(-50%, 0);
}

div#fourthpage div.allcontbox  .downbox .twitter a{
    text-decoration: none;
    color: #fff;
    
}

div#fourthpage div.allcontbox  .downbox .twitter a:hover{
    font-weight: bolder;
    cursor: pointer;
    color:#eca62c;
}

/*반응형*/
/* PC에서 풀페이지 스크린 모드 적용 */
@media (min-width: 549px) {
    html, body {
        scroll-snap-type: y mandatory;
    }

    .wrap {
        width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        
        scroll-snap-type: y mandatory;
    }

    .container {
        scroll-snap-align: center;
        width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        box-sizing: border-box;
    }

    div.allcontbox {
        width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        position: relative;
    }
}

/* 모바일에서는 일반 스크롤 적용 */
@media (max-width: 549px) {
    .wrap {
        height: auto;
        overflow-y: auto; 
        scroll-snap-type: none;
    }

    .container {
        height: auto; /* 자동 높이 */
        scroll-snap-align: none; /* 스냅 정렬 해제 */
    }


}

@media  (max-width: 549px){

    	/*모바일 풀페이지 적용 안 됨*/


        div#firstpage div.allcontbox {
            height: calc(var(--svh, 1svh) * 100);
            overflow: hidden;
        }
    
        div#secondpage .allcontbox,
        div#thirdpage div.allcontbox,
        div#fourthpage div.allcontbox{
            height: 880px;
        }


 /*첫번째 페이지*/
 .container{
    width: 100%;
    overflow: hidden;
}

div#firstpage div.allcontbox{
    width: 100%;
    background-position-x: -150px;
}

div#firstpage div.allcontbox p.ment{
    padding: 30px 20px;
    line-height: 20px;
    word-break: keep-all;
}

div#firstpage div.allcontbox div.maintxtbox{
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 100px;
    gap: 0px;
}

div#firstpage div.allcontbox div.maintxtbox div.bigtxt{
    gap: unset;
    align-items: center;
    flex-direction: column;
}

div#firstpage div.allcontbox div.maintxtbox p.minetxt{
    font-size: 100px;
}

div#firstpage div.allcontbox div.votebox{
    text-align: center;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 25px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    white-space: nowrap;
}

/*두번째페이지*/
div#secondpage{
    height: auto;
}

div.allcontbox p.maintitle{
    font-size: 16px;
    padding: 20px 0 30px;
}

div.allcontbox p.maintitle span{
    font-size: 28px;
}

div.boxes{
    flex-direction: column;
    gap: 340px;
    margin: 0 auto 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
}

div.boxes div.bigbox{
    width: fit-content;
}

div.boxes div.bigbox div.bigboxes{
    z-index: 1;
    display: inline-flex;
    justify-content: unset;
}

div.boxes div.bigbox div.bigboxes:first-child{
    display: inline-flex;
    justify-content: unset;
}

div.boxes div.bigbox div.bigboxes img {
    width: 282px;
    height: auto;
}

div.boxes div.bigbox div.bigboxes p{
    width: 78%;
    left: 7%;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 2%;
    font-size: 16px;
    line-height: 20px;
}

div.boxes div.bigbox div.bigboxes:nth-child(8) p{
    flex-direction: column;
}

div.boxes div.bigbox div.bigboxes:nth-child(9) p{
    flex-direction: column;
}

div.boxes div.smallbox{
    gap:8px;
}

div.boxes div.smallbox img{
    width: 89px;
    vertical-align: unset;
}

p.votetilte{
    font-size: 25px;
    margin-bottom: 0;
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}

/*세번째페이지*/

div#thirdpage div.allcontbox{
    padding: 10px 30px 10px 20px;
}

div#thirdpage div.allcontbox .whytitle{
    font-size: 15px;
    margin: 0 auto 20px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

div#thirdpage div.allcontbox .whytitle span{
    font-size: 18px;
}

div#thirdpage div.allcontbox .txtcontbox{
    flex-direction: column;
    margin: 0 auto 40px;
}

div#thirdpage div.allcontbox .txtcontbox .txttitlebox{
    font-size: 25px;
    line-height: 30px;
    white-space: nowrap;
    margin-bottom: 30px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox{
    width: 100%;
    gap: 40px;
    margin-bottom: 40px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguntitle{
    align-items: flex-start;
    font-size: 20px;
    flex-direction: column;
    gap: 12px;
    white-space: nowrap;
    letter-spacing: -1px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox span{
    font-size: 23px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguncont{
    margin-left: 0;
    font-size: 16px;
    line-height: 20px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguncont br{
    display: none;
}

div#thirdpage div.allcontbox .votetilte{
    text-align: center;
}

/*네번째 페이지*/

div#fourthpage div.allcontbox .contbox{
    flex-direction: row;
}

div#fourthpage div.allcontbox .yellowbox{
    width: 320px;
    height: 180px;
}

div#fourthpage div.allcontbox .youtube{
    width: 320px;
    height: 180px;
}

div#fourthpage div.allcontbox {
    height: 90%;
}

div#fourthpage div.allcontbox  .upperbox{
    font-size: 30px;
    text-align: center;
    margin-top: 30px;
}

div#fourthpage div.allcontbox  .upperbox .official{
    font-size: 20px;
    text-align: right;
}

div#fourthpage div.allcontbox  .upperbox .official span:first-child {
    letter-spacing: 3px;
}

div#fourthpage div.allcontbox  .upperbox .official span:last-child {
    letter-spacing: 4px;
}

div#fourthpage div.allcontbox  .downbox{
    margin-bottom: 30px;
    position: unset;
}

div#fourthpage div.allcontbox  .downbox .twitter{
    font-size: 16px;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0);
}


}


@media (min-width: 550px) and (max-width: 767px){
    .wrap {
        height: auto;
        overflow-y: auto; 
        scroll-snap-type: none;
    }

    .container {
        height: auto; /* 자동 높이 */
        scroll-snap-align: none; /* 스냅 정렬 해제 */
    }

        div#firstpage div.allcontbox {
            height: calc(var(--svh, 1svh) * 100);
            overflow: hidden;
        }
    
        div#secondpage .allcontbox,
        div#thirdpage div.allcontbox,
        div#fourthpage div.allcontbox{
            height: fit-content;
        }


 /*첫번째 페이지*/
 .container{
    width: 100%;
    overflow: hidden;
}

div#firstpage div.allcontbox{
    width: 100%;
    background-position-x: -150px;
}

div#firstpage div.allcontbox p.ment{
    padding: 30px 20px;
    line-height: 20px;
    word-break: keep-all;
}

div#firstpage div.allcontbox div.maintxtbox{
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 100px;
    gap: 0px;
}

div#firstpage div.allcontbox div.maintxtbox div.bigtxt{
    gap: unset;
    align-items: center;
    flex-direction: column;
}

div#firstpage div.allcontbox div.maintxtbox p.minetxt{
    font-size: 100px;
}

div#firstpage div.allcontbox div.votebox{
    text-align: center;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 25px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    white-space: nowrap;
}

/*두번째페이지*/
div#secondpage{
    height: auto;
}

div.allcontbox p.maintitle{
    font-size: 16px;
    padding: 20px 0 30px;
}

div.allcontbox p.maintitle span{
    font-size: 28px;
}

div.boxes{
    flex-direction: column;
    gap: 340px;
    margin: 0 auto 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
}

div.boxes div.bigbox{
    width: fit-content;
}

div.boxes div.bigbox div.bigboxes{
    z-index: 1;
    display: inline-flex;
    justify-content: unset;
}

div.boxes div.bigbox div.bigboxes:first-child{
    display: inline-flex;
    justify-content: unset;
}

div.boxes div.bigbox div.bigboxes img {
    width: 282px;
    height: auto;
}

div.boxes div.bigbox div.bigboxes p{
    width: 78%;
    left: 7%;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 2%;
    font-size: 16px;
    line-height: 20px;
}

div.boxes div.bigbox div.bigboxes:nth-child(8) p{
    flex-direction: column;
}

div.boxes div.bigbox div.bigboxes:nth-child(9) p{
    flex-direction: column;
}

div.boxes div.smallbox{
    gap:8px;
}

div.boxes div.smallbox img{
    width: 89px;
    vertical-align: unset;
}

p.votetilte{
    font-size: 25px;
    margin-bottom: 0;
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}

/*세번째페이지*/

div#thirdpage div.allcontbox{
    padding: 10px 30px 10px 20px;
}

div#thirdpage div.allcontbox .whytitle{
    font-size: 15px;
    margin: 0 auto 20px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

div#thirdpage div.allcontbox .whytitle span{
    font-size: 18px;
}

div#thirdpage div.allcontbox .txtcontbox{
    flex-direction: column;
    margin: 0 auto 40px;
    
}

div#thirdpage div.allcontbox .txtcontbox .txttitlebox{
    font-size: 25px;
    line-height: 30px;
    white-space: nowrap;
    margin-bottom: 30px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox{
    width: 100%;
    gap: 40px;
    margin-bottom: 40px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguntitle{
    align-items: flex-start;
    font-size: 20px;
    flex-direction: column;
    gap: 12px;
    white-space: nowrap;
    letter-spacing: -1px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox span{
    font-size: 23px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguncont{
    margin-left: 0;
    font-size: 16px;
    line-height: 20px;
}

div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguncont br{
    display: none;
}

div#thirdpage div.allcontbox .votetilte{
    text-align: center;
}
 
    /*네번째 페이지*/

 
    div#fourthpage div.allcontbox .yellowbox{
        width: 480px;
        height: 270px;
    }

    div#fourthpage div.allcontbox .youtube{
        width: 480px;
        height: 270px;
    }

    div#fourthpage div.allcontbox {
        height: 90%;
    }

    div#fourthpage div.allcontbox  .upperbox{
        font-size: 30px;
        text-align: center;
        margin-top: 30px;
    }

    div#fourthpage div.allcontbox  .upperbox .official{
        font-size: 20px;
        text-align: right;
    }

    div#fourthpage div.allcontbox  .upperbox .official span:first-child {
        letter-spacing: 3px;
    }

    div#fourthpage div.allcontbox  .upperbox .official span:last-child {
        letter-spacing: 4px;
    }

    div#fourthpage div.allcontbox  .downbox{
        margin-bottom: 30px;
        position: unset;
    }

    div#fourthpage div.allcontbox  .downbox .twitter{
        font-size: 16px;
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translate(-50%, 0);
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    /*태블릿 세로*/

    .wrap {
        height: auto;
        overflow-y: auto; 
        scroll-snap-type: none;
    }

    .container {
        height: auto; /* 자동 높이 */
        scroll-snap-align: none; /* 스냅 정렬 해제 */
    }

        div#firstpage div.allcontbox {
            height: calc(var(--svh, 1svh) * 100);
            overflow: hidden;
        }
    
        div#secondpage .allcontbox,
        div#thirdpage div.allcontbox,
        div#fourthpage div.allcontbox{
            height: fit-content;
        }

    /*첫번째 페이지*/
    div#firstpage div.allcontbox{
        background-position-x: -100px;
    }

    div#firstpage div.allcontbox p.ment{
        text-align: center;
    }

    div#firstpage div.allcontbox div.maintxtbox{
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
        font-size: 60px;
        gap: 20px;
    }

    div#firstpage div.allcontbox div.maintxtbox div.bigtxt{
        flex-direction: column;
        align-items: center;
        gap: 20px
    }

    div#firstpage div.allcontbox div.maintxtbox p.minetxt{
        font-size: 100px;
    }

    div#firstpage div.allcontbox div.votebox{
        left: 2%
    }

    /*두번째 페이지*/

    div.allcontbox p.maintitle{
        white-space: nowrap;
        font-size: 30px;
        padding: 0;
        font-size: 20px;
        margin: 30px auto;
    }

    div.allcontbox p.maintitle span{
        font-size: 25px;
    }

    div.boxes{
        flex-direction: column;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        gap: 29vh;
        top: 60%;
        margin: 0 auto;
    }
    

    div.boxes div.bigbox{
        align-items: center;     
        justify-content: center;
        width: 50vh;
        height: auto;
    }

    div.boxes div.bigbox div.bigboxes img{
        width: 50vh;
        height: auto;
    }

    div.boxes div.bigbox div.bigboxes p{
        font-size: 17px;
        line-height: 21px;
        width: -webkit-fill-available;
        left: unset;
        transform: unset;
    }

    div.boxes div.smallbox{
        width: 50vh;
        gap: 10px;
        grid-template-columns: repeat(5, 2fr);
    }

    div.boxes div.smallbox div{
        display: flex;
        justify-content: center;
    }

    div.boxes div.smallbox img{
        width: 9vh;
        height: auto;
    }

    p.votetilte {
        font-size: 25px;
        margin-bottom: 0;
        position: absolute;
        bottom: 6%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 100%;
    }

    /*세번째 페이지*/

    div#thirdpage div.allcontbox{
        padding: 50px 55px 0px 30px
    }

    div#thirdpage div.allcontbox .whytitle{
        display: flex;
        gap: 10px;
        font-size: 18px;
        align-items: center;
        margin-bottom: 5px;
    }

    div#thirdpage div.allcontbox .whytitle span{
        font-size: 22px;
    }

    div#thirdpage div.allcontbox .txtcontbox{
        flex-direction: column;
        margin-bottom: 0;
        
    }

    div#thirdpage div.allcontbox .txtcontbox .txttitlebox{
        line-height: 45px;
        display: flex;
        gap: 18px;
        font-size: 24px;
        margin: 0 0 30px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox{
        width: 100%;
        gap: 30px;
        margin-bottom: 40px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox{
        font-size: 22px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox span{
        font-size: 25px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguncont{
        font-size: 17px;
        line-height: 22px;
    }

    div#thirdpage div.allcontbox .votetilte{
        font-size: 25px;
        margin: 0;
        position: absolute;
        bottom: 9%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 100%;
        text-align: center;
    }

    /*네번째 페이지*/

    div#fourthpage div.allcontbox .yellowbox{
        width: 448px;
        height: 252px;

    }

    div#fourthpage div.allcontbox .youtube{
        width: 448px;
        height: 252px;

    }


    div#fourthpage div.allcontbox .videobox .youtube iframe{
        width: 80vw;
        height: 30vh;
    }

    div#fourthpage div.allcontbox {
        height: 100vh;
    }

    div#fourthpage div.allcontbox  .upperbox{
        font-size: 35px;
        margin-top: 5vh;
        align-items: baseline;
    }

    div#fourthpage div.allcontbox  .upperbox .official{
        font-size: 25px;
    }

    div#fourthpage div.allcontbox  .upperbox .official br{
        display: none;
    }

    div#fourthpage div.allcontbox  .upperbox .official span:first-child{
        letter-spacing: 2px;
    }

    div#fourthpage div.allcontbox  .upperbox .official span:last-child{
        letter-spacing: 3px;
    }

    div#fourthpage div.allcontbox .downbox{
        position: unset;
    }

    div#fourthpage div.allcontbox  .downbox .twitter{
        position: absolute;
        bottom: 10%;
        left: 50%;
        text-align: center;
        transform: translate(-50%, 0);
        font-size: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /*태블릿 가로*/

    .wrap {
        height: auto;
        overflow-y: auto; 
        scroll-snap-type: none;
    }

    .container {
        height: auto; /* 자동 높이 */
        scroll-snap-align: none; /* 스냅 정렬 해제 */
    }

        div#firstpage div.allcontbox {
            height: calc(var(--svh, 1svh) * 100);
            overflow: hidden;
        }
    
        div#secondpage .allcontbox,
        div#thirdpage div.allcontbox,
        div#fourthpage div.allcontbox{
            height: fit-content;
        }

    /*첫번째 페이지지*/

    div#firstpage div.allcontbox div.maintxtbox{
        font-size: 55px;
        top: 30%;
    }

    div#firstpage div.allcontbox div.maintxtbox p.minetxt{
        font-size: 120px;
    }

    div#firstpage div.allcontbox div.votebox{
        font-size: 25px;
        gap: 10px;
    }

    /*두번째 페이지*/

    div.allcontbox p.maintitle{
        font-size: 26px;
    }

    div.allcontbox p.maintitle span{
        font-size: 40px;
    }

    div.boxes{
        margin: 0 auto;
        width: 90%;
        position: absolute;
        top: 50%;
        left: 4%;
        transform: translate(0, -50%);
    }

    div.boxes div.bigbox{
        width: 25vw;
        height: -webkit-fill-available;
    }

    div.boxes div.bigbox div.bigboxes{
        width: inherit;
        height: auto;
    }

    div.boxes div.bigbox div.bigboxes img{
        width: inherit;
        height: auto;
    }

    div.boxes div.bigbox div.bigboxes p{
        font-size: 16px;
        line-height: 20px;
        width: -webkit-fill-available;
        left: unset;
        transform: unset;
    }

    div.boxes div.smallbox img{
        width: 8vw;
    }

    p.votetilte{
        font-size: 25px;
        margin: 0;
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 100%;
    }

    /*세번째 페이지*/

    div#thirdpage div.allcontbox{
        padding: 20px 50px 0 30px;
    }

    div#thirdpage div.allcontbox .whytitle{
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 30px;
    }

    div#thirdpage div.allcontbox .whytitle span{
        font-size: 25px;
    }

    div#thirdpage div.allcontbox .txtcontbox{
        margin: 0 auto;
        
    }

    div#thirdpage div.allcontbox .txtcontbox .txttitlebox{
        font-size: 28px;
        line-height: 40px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox{
        gap: 40px;
        margin-bottom: 40px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox{
        font-size: 25px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox span{
        font-size: 30px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguncont{
        font-size: 18px;
        line-height: 25px;
        margin-left: 45px;
    }

    div#thirdpage div.allcontbox .votetilte{
        font-size: 25px;
        margin: 0;
        position: absolute;
        left: 53%;
        bottom: 8%;
        transform: translate(-50%, 0);
        width: 100%;
    }

    /*네번째 페이지*/

    div#fourthpage div.allcontbox .yellowbox{
        width: 650px;
        height: 315px;

    }

    div#fourthpage div.allcontbox .youtube{
        width: 650px;
        height: 315px;

    }

    /* div#fourthpage div.allcontbox .videobox .youtube iframe{
        width: 80vw;
        height: 50vh;
    } */

    div#fourthpage div.allcontbox {
        height: 100vh;
    }

    div#fourthpage div.allcontbox  .upperbox{
        font-size: 30px;
        margin-top: 25px;
    }

    div#fourthpage div.allcontbox  .upperbox .official{
        display: flex;
        gap: 6px;
        font-size: 20px;
        justify-content: flex-end;
    }

    div#fourthpage div.allcontbox .downbox{
        position: absolute;
        right: 5%;
        left: unset;
    }

    div#fourthpage div.allcontbox p.votetilte{
        position: unset;
        transform: unset;
    }

    div#fourthpage div.allcontbox  .downbox .twitter{
        font-size: 20px;
        position: absolute;
        bottom: 10%;
        left: 50%;
        text-align: center;
        transform: translate(-50%, 0);
        position: unset;
        transform: unset;
    }

}



@media (min-width: 1200px) and (max-width: 1919px) {
    /*데스크탑 일반*/


    .wrap {
        height: auto;
        overflow-y: auto; 
        scroll-snap-type: none;
    }

    .container {
        height: auto; /* 자동 높이 */
        scroll-snap-align: none; /* 스냅 정렬 해제 */
    }

        div#firstpage div.allcontbox {
            height: calc(var(--svh, 1svh) * 100);
            overflow: hidden;
        }
    
        div#secondpage .allcontbox,
        div#thirdpage div.allcontbox,
        div#fourthpage div.allcontbox{
            height: fit-content;
        }

    /*첫번째 페이지*/
    div#firstpage div.allcontbox div.maintxtbox{
        font-size: 80px;
        gap: 20px;
    }

    div#firstpage div.allcontbox div.maintxtbox p.minetxt{
        font-size: 160px;
    }

    div#firstpage div.allcontbox div.votebox{
        left: 2%;
    }

    /*두번째 페이지*/

    div.allcontbox p.maintitle{
        font-size: 30px;
        padding: 20px 0 35px;
    }

    div.allcontbox p.maintitle span{
        font-size: 43px;
    }

    div.boxes{
        margin: 0 auto;
        width: 90%;
        position: absolute;
        top: 50%;
        left: 4%;
        transform: translate(0, -50%);
    }

    div.boxes div.bigbox{
        width: 489px;
    }

    div.boxes div.bigbox div.bigboxes img{
        width: 489px;
    }

    div.boxes div.bigbox div.bigboxes p{
        font-size: 18px;
        line-height: 25px;
        width: -webkit-fill-available;
        left: unset;
        transform: unset;
    }

    div.boxes div.smallbox img{
        width: 160px;
    }

    p.votetilte{
    font-size: 30px;
    margin: 0;
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    }

    /*세번째 페이지*/

    div#thirdpage div.allcontbox{
        padding: 50px 70px 0 40px;
    }

    div#thirdpage div.allcontbox .whytitle{
        font-size: 20px;
        margin-bottom: 40px;
    }

    div#thirdpage div.allcontbox .whytitle span{
        font-size: 25px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txttitlebox{
        font-size: 32px;
        line-height: 45px;
        
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox{
        gap: 45px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox span{
        font-size: 32px;
    }

    div#thirdpage div.allcontbox .txtcontbox .txtonetwothreebox .slogunbox .sloguncont{
        margin-left: 45px;
        font-size: 19px;
        line-height: 28px
    }

    div#thirdpage div.allcontbox .votetilte{
        left: 53.5%;
        bottom: 11%;
    }

    /*네번째 페이지*/

    div#fourthpage div.allcontbox .yellowbox{
        width: 672px;
        height: 378px;

    }

    div#fourthpage div.allcontbox .youtube{
        width: 672px;
        height: 378px;

    }

    /* div#fourthpage div.allcontbox .videobox .youtube iframe{
        width: 55vw;
        height: 50vh;
    } */

    div#fourthpage div.allcontbox {
        height: 94vh;
    }

    div#fourthpage div.allcontbox  .upperbox{
        font-size: 40px;
    }

    div#fourthpage div.allcontbox  .upperbox .official{
        font-size: 30px;
    }

    div#fourthpage p.votetilte{
        position: unset;
        text-align: right;
        transform: unset;
        padding-bottom: 10px;
    }
}