@charset "utf-8";

/* KIMM */

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

/*gmarket sans*/
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 700;
	src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
	url('https://script.gmarket.com/fonts/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('https://script.gmarket.com/fonts/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 500;
	src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
	url('https://script.gmarket.com/fonts/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('https://script.gmarket.com/fonts/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 300;
	src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
	url('https://script.gmarket.com/fonts/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('https://script.gmarket.com/fonts/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    font-family:'Gmarket Sans', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body{
    display: block;   
}

img{
    max-width: 100%;
    display: block;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
    color: #323337;
}

button{
    font-family: 'KIMM_Bold';
    cursor: pointer;
    border: none;
    border-radius: 13px;
}

::placeholder{
    color: #929293;
    padding-left: 15px;
    font-size: 0.9rem
}

.title{
    padding: 130px 0 40px;
    margin: 0 auto;
    text-align: center;
    width: 1100px;
}
.event2_tit{
    padding: 130px 0 0px;
    margin: 0 auto;
    text-align: center;
    width: 1100px;
}
img.Mobile{display: none;}
button.Mobile{display: none;}

/* 안내사항 */
.notice{
    width: 1100px;
    margin: 0 auto;
    padding-bottom: 80px;
    color: #fff;
}
.notice .notice-line{
    margin: 0 auto;
    padding: 70px 0;
}

.notice p{
    line-height: 28px;
}
.notice-txt{
    display: flex;
}

.notice-t1{
    font-weight: 600;
    font-size: 0.9rem;
    width: 10%;;
}

.notice-t2{
    font-weight: 400;
    font-size: 0.8rem;
    width: 90%;
}

.evt3_notice{
    color: #5d5d5d;
}
/* 상단 메뉴 추가 s*/
#header{position:fixed; left:0; right:0; z-index:10; background:rgb(255,255,255); display: flex; justify-content: flex-start; align-items: center;}
#header img{width: 8%; padding: 1% 0 1% 2%}
#header .top-menu{position:relative; width:1280px; margin:0 auto;}
#header .top-menu img{width:7%;padding: 1%;}
#header .top-menu ul{ display: flex; justify-content: center;}
#header ul li{ width:13%; padding:0;}
#header ul li:nth-child(1){width:11%;}
#header ul li:nth-child(2){width:12.5%;}
#header ul li a{color: #636363; font-size: 1rem; font-weight:400;}
#header ul li.h_on a{color: #6441e1;}
#header ul li a:hover{color: #6441e1;}
/* 상단 메뉴 추가 e*/

/* 배경 */
.section1{
    background: url(https://appdata.hungryapp.co.kr/images/Events/21th/bg_01_.jpg)no-repeat;
    position: relative;
    background-position: center top;
    background-size: cover;
}

.section2{
    background-color: #7d67fa;
    position: relative;
    background-position: center top;
}

.section3{
    background: #fb7346;
    position: relative;
    background-position: center top;

}
.section4{
    background-color: #f9f2e8;
    position: relative;
    background-position: center top;

}
.section5{
    background: #7d67fa;
    position: relative;
    background-position: center top;
}

.section6{
    background: #f9f2e8;
    position: relative;
    background-position: center top;
}

/* 240904 레이어 팝업 추가 s */
.pop-bg{
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.detail-wrap{
	width: 90vw;
	background: #fff;
	padding: 40px;
	margin: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	position: relative;
	height: auto;
}
.detail-img {
	margin-bottom: 20px;;

}
.detail-img img{
	width:80%;
	display: block;
	margin: 0 auto;
	text-align: center;
}

p.pop-t1{
	font-size: 1.5rem;
	margin-bottom: 5px;
	text-align: center;
}

p.pop-t2{
	font-size: 1.2rem;
	text-align: center;
}

.pop-arrow{
	position: absolute;
	width: 90%;
	z-index: 99;
}

.pop-arrow ul{
	display: flex;
	justify-content: space-between;
}

span.pop-txt{
	font-size: 3rem;
}

li.pop-prev{
	transform: rotate(180deg);
}
/* 240904 레이어 팝업 추가 e */

/* 메인 */
.main-img{
    text-align: center;
    margin: 0 auto;
    width: 1100px;
}

/* 축하 메세지 */
.thanks{
    text-align: center;
    margin: 0 auto;
    font-size: 18px;
    color: #fff;
    line-height: 28px;
}
p.highlight{
    font-size: 25px;
    font-weight: bold;
}
p.highlight span{
    color: #ffdc46;
}
.thanks p{
    padding: 10px 0;
}

.thanks img{
    margin: 0 auto;
    margin-bottom: 50px;
}
/* 앙케이트 이벤트 */

.event1{
    width: 1100px;
    margin: 0 auto;
    position: relative;
}
.survey_char{
    position: relative;
}

.ser_ch_left{
    position: absolute;
    top: 200px;
    left: 0;
    z-index: 1;
}

.ser_ch_right{
    position: absolute;
    top: 220px;
    right: 0;
    z-index: 1;
}

.survey_reward{
    z-index: 0;
    position: relative;
}
.survey_reward ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PC: 4열 */
    gap: 10px;
    margin-bottom: 40px;
    padding: 0;
    list-style: none;
}
.survey_reward ul li{
    position: relative;
    background-color: #fff;
    padding: 40px 20px;
    border-radius: 15px;
    box-sizing: border-box;
}

.survey_reward ul li img{
    display: block;
    margin: 0 auto;
    padding-bottom: 20px;
}
.survey_reward ul li p{
    text-align: center;
}

.gift_name{
    background: #ffdc46;
    color: #323337;
    width: 100%;
    padding: 20px 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    position: absolute;
    bottom: 0;
    left:0;
    font-size: 22px;
    text-align: center;
    font-family: 'KIMM_Bold';
}

button.event1-btn{
    background: #323337;
    color: #fff;
    margin: 0 auto;
    width: 1100px;
    font-size: 1.5rem;
    display: block;
    padding: 20px 0;
}


/* 응모 이벤트 */

.section3-wrap{
    width: 1100px;
    margin: 0 auto;
}

.event-point ul{
    display: flex;
    justify-content: space-between;
}

.event-point ul li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ef6031; 
    border-radius: 13px;
    margin-bottom: 15px;
    padding: 15px;
    width: 49.5%;
}

span.ep-t1{
    color: #fff;
    font-size: 1.1rem;
}

span.ep-t2{
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
}

.evt2-ps5{
    background: #fff;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    gap: 80px;
}

.ps5-txt{
    display: flex;
    flex-direction: column;
    align-self: center;
    text-align: center;
}

.evt2-ps5 img{
     width: 30%;
}
.ps5-txt img{
    width: 30%;
    margin: 0 auto
}
p.ps5-t1{
    padding: 15px 0 0;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 30px;
}

p.ps5-t2{
    padding: 15px 0 0;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 25px;
}

p.ps5-t2 span{
    font-weight: 600;
    color: #ff6927
}

.evt2-apply{
    position: relative;
    padding-top: 10px;
    color: #323337;
}

.evt2-apply ul{
    text-align: center;
    position: relative;
    justify-content: space-between;
    gap: 10px;
}

li.apply-1{
    position: relative;
    width: 33%;
    display: inline-block;
    background-color: #fff;
    padding: 40px 20px;
    border-radius: 15px;
	margin-top: 10px;
}
li.apply-1 img{
    margin: 0 auto;
}
.gift_txt{
    background: #ffdc46;
    color: #323337;
    width: 100%;
    padding: 13px 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: absolute;
    bottom: 0;
    left:0;
    font-size: 22px;
}

.gift_wrapper{
    margin-bottom: 50px;
}
.gift_wrapper p{
    font-size: 16px;
    margin-top: 5px;
}
button.btn_join{
    background: #ffdc46;
    color: #323337;
    width: 100%;
    padding: 20px 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    position: absolute;
    bottom: 0;
    left:0;
    font-size: 22px;
}


button.event2-btn{
    background: #323337;
    color: #fff;
    margin: 0 auto;
    width: 1100px;
    font-size: 1.5rem;
    margin-top: 40px;
    display: block;
    padding: 20px 0;
}

/* 쿠폰 이벤트 */
.game-wrap{
	width: 1100px;
	margin: 0 auto;
}
.game-wrap ul{
	display: flex;
	justify-content: space-between;
	margin: 15px 0;
}
.game-wrap ul li.item{
	background: #fff;
	width: 32.5%;
	border-radius: 13px;
	text-align: center;
}


.game-wrap ul li.item > div{
	/*max-height: 50vw;*/
}

.game-wrap ul li.item img{
	max-width: 131px;
	max-height: 181px;
	margin: 0 auto;
	padding: 35px 0 15px;
}

.game-wrap .splide__arrow--prev,
.game-wrap .splide__arrow--next
{
	width: 3rem;
	height: 3rem;
}

#coupon-carousel-list {
	height: auto;
}

button.ins-btn{
	background: #705df7;
	width: 100%;
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
	color: #fff;
	font-size: 1.5rem;
	margin-top: 35px;
	padding: 15px 0;
}

p.game-name{
	font-weight: 600;
	font-size: 1.4rem;
	margin-bottom: 10px;
	color: #705df7;
	padding: 0 15px;
}

p.game-item{
	color: #323337;
	line-height: 25px;
	font-size: 1.2rem;
	padding: 0 15px;
}
p.game-item:nth-last-child(1){
	margin-bottom: 65px;
}
button.event3-btn{
	background: #323337;
	color: #fff;
	margin: 0 auto;
	width: 1100px;
	font-size: 1.5rem;
	margin-top: 40px;
	display: block;
	padding: 20px 0;
}


/* 게임사 축전 모음 */
.con-img {
	background: #fff;
	padding: 20px;
	width: 1100px;
	margin: 0 auto;
}

.con-img .wrap_item {
	display: inline-block;
	max-height: 1150px;
}

.con-img .item{
	margin: 3px;
	width: calc((100% - 36px) / 6);
	height: 20vw;
	max-height: 250px;
	float: left;

	overflow: hidden;
}
.con-img .item a{
	display: inline-block;
	width: 100%;
	height: 100%;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px 0 80px;
}

.thumbnail-pagination {
	visibility: hidden;
}

.page-list ul{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 15px;
}

.page-list ul li{
	padding: 0 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}





/* 이미지 슬라이드 풀사이즈 이미지 css */
#modalArea {
	position: fixed; top: 0; z-index: 999;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
}
#backArea {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
}
.cukButton {
	position: absolute;
	top: 2rem;
	right: 2rem;
	z-index: 99;
}
/*#cukArea #image-carousel {*/
#cukArea {
	/*width: 80vw;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}

/*#cukArea #image-carousel .splide__slide { height: 80vh;}*/
#cukArea #image-carousel .splide__slide img { object-fit: contain; }
/* #cukArea .splide__arrow--prev { left: -3rem; background-color: #fff; } */
/* #cukArea .splide__arrow--next { right: -3rem; background-color: #fff; } */
#cukArea .splide__pagination { position: absolute; bottom: -20px; }

#cukArea button.gal_btnSt_close { margin-bottom: 16px;     padding: 1rem;}

#cukArea .splide__list {
	height: auto;
	align-items: center;
}
#cukArea .splide__list img {
	max-height: 80vh;
	margin: 0 auto;
}

#thumbnail-carousel .splide__list {
	height: auto;
}
/*.cont-wrap #thumbnail-carousel { margin-left: auto; margin-right: auto; }*/
/*#thumbnail-carousel .splide__slide { height: 740px; }*/
/*#thumbnail-carousel .splide__slide img { object-fit: cover; width: 100%; height: 100%; }*/
/*#thumbnail-carousel .splide__slide .splide__slide__item { width: 160px; height: 235px; position: relative;}*/
/*#thumbnail-carousel .splide__pagination__page.is-active { background: #fdc448;}*/






/* 이미지 슬라이드 css */
/*#image-carousel {*/
/*	position: absolute;*/
/*	top: 50vh;*/
/*	left: 50%;*/
/*	transform: translate(-50%, -50%);*/
/*}*/
/*#image-carousel img {*/
/*	max-width: 85vw;*/
/*}*/
/*#main-carousel { margin-bottom: 16px; }*/
/*#main-carousel .splide__slide img { object-fit: contain; }*/

/*.cont-wrap .splide__track { overflow: block; }*/
/*.cont-wrap .splide__slide { opacity: 0.6;}*/
/*.cont-wrap .splide__slide.is-active { opacity: 1; }*/

/*.splide__list { flex-wrap: nowrap; justify-content: flex-start; gap: 4px 1px;height: auto}*/

/*.content5 .splide__arrow--prev { left: 0; }*/
/*.content5 .splide__arrow--next { right: 0; }*/

/*.content5 .splide__track { padding-bottom: 20px;}*/
.section5 .cukjun_title {
	font-family: 'Gmarket Sans', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif;
	position: absolute; bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	padding: 1rem 0.3rem;
	width: 100%;
	color: #fff;
	text-align: center;
	font-size: 0.8rem;
}
.section5 .cukjun_title b { font-size: 1rem; display: inline-block; }

.review {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break: break-all;
}


/* 모달팝업 */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 100; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.7); /* Black w/ opacity */}
/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 10px;
	width: 20%;} /* Could be more or less, depending on screen size */
.modal-content table { width: 100%; font-size: 16px; text-align: center;}
.modal-content table tr:first-child td { height: 70px; vertical-align: middle;}
.modal-content table tr:last-child td a { display: block; cursor: pointer; text-align: center; padding-bottom: 10px; padding-top: 10px;
	color: #fff; background-color: #777;}



/* 내 응모 현황 */
div.layerPop01 {position: absolute; top: 1550px; left: 0; width: 100%; z-index: 10;}
div.event_list {
	width: 80%;

	padding: 30px;
	margin: 0 auto;
	background: #fff;
	border: 3px solid #e43e3e;
	box-shadow: 0 2px 15px rgba(0,0,0,0.4);
	-o-box-shadow: 0 2px 15px rgba(0,0,0,0.4);
	-ns-box-shadow: 0 2px 15px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.4);
}
.bbs_tb {
	max-height: 80vh;
	overflow: hidden;
	overflow-y: scroll;
}
.bbs_tb span {
	display: inline-block;
}
a.btn_close { position: absolute; top: -30px; right: 10vw; display: block; width: 60px; padding: 5px 0;	font-size: 12px;
	color: #fff; background: #555; text-align: center}


/* 응원 등록하기 */
.comment-wrap{
    width: 1100px;
    margin: 0 auto;
}
.CommentWriter{
    display: flex;
    justify-content: space-between;
}

.CommentWriter input{
    width: 70%;
    border-radius: 15px;
    margin-right: 10px;
    border: none;
}

button.comm-btn{
    background: #323337;
    color: #fff;
    padding: 20px;
    width: 30%;
    font-size: 1.5rem; 
}

table{
    border-top: 2px solid #323337;
    border-bottom: 2px solid #323337;
    margin: 30px 0;
    display: block;
}

tr{
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #d4d4d5;
    padding: 25px 0;
    width: 1100px;
    font-size: 1rem;
}

.pagination-com {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination-com a {
    float: left;
    font-size: 1rem;
}

.pagination-com p{
    padding:9px 16px;
}

.pagination-com a.active {
    background-color: #fdde24;
    border-radius: 50%;;

}
td.com-nick{
        margin-right: 30px;
    }

/* responsive */
@media screen and (max-width:1280px){
    html, body{
        font-size: 16px;       
    }
    /* 상단 메뉴 추가 s*/ 
    #header{width: 100%;}
    #header img{width: 15%; padding: 2% 0 2% 2%}
    #header .top-menu img{width:7%;padding: 1%;}
    #header ul li{ width:17%; padding:0; white-space: nowrap;}
    /* 상단 메뉴 추가 e*/
    
    img.Mobile{
        display: block;
    }
    img.PC{
        display: none;
    }
    button.Mobile{
        display: block;
    }
    button.PC{
        display: none;
    }
    
    .title {
        padding: 10% 0 5%;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
    .event2_tit{
        padding: 10% 0 0px;
        margin: 0 auto;
        text-align: center;
        width:100%
    }
    /* 배경 */
    .section1{
        background: url(https://appdata.hungryapp.co.kr/images/Events/21th/bg_01_1280-.jpg)no-repeat;
        position: relative;
        background-position: center top;
        background-size: 100%;
        display: block;
        overflow: hidden;
    }
    .section2{
        background-color: #7d67fa;
        position: relative;
        background-position: center top;
        background-size: 100%;
        display: block;
        overflow: hidden;
    }
    .section3{
        background: #fb7346;
        position: relative;
        background-position: center top;
        background-size: 100%;
        display: block;
        overflow: hidden;

    }
    .section4{
        background: url(https://appdata.hungryapp.co.kr/images/Events/21th/bg_04.jpg)no-repeat;
        background-color: #eeeef0;
        position: relative;
        background-position: center top;
        background-size: 100%;
        display: block;
        overflow: hidden;

    }
    .section5{
        background: #09c2b2;
        position: relative;
        background-position: center top;
        background-size: 100%;
        width: 100%;
        display: block;
        overflow: visible;
    }

    .section6{
        background: #f9f2e8;
        position: relative;
        background-position: center top;
        background-size: 100%;
        display: block;
        overflow: hidden;
    }
    /* 메인 */
    .main-img{
        text-align: center;
        margin: 0 auto;
        width: 100%;;
    }
    
    /* 축하 메세지 */
    .thanks{
        font-size: 1rem;
        line-height: 18px;
        width: 90vw;
    }
    p.highlight{
        font-size: 1.3rem;
    }
    .thanks p{
        padding: 5px 0;
    }

    .thanks img{
        margin-bottom: 30px;
        width: 80vw;
    }

    /* 설문 */
    .event1{
        padding: 0 15px;
    }
    .event1-img {
        text-align: center;
        padding: 60px 0 20px;
        width: 100%;
    }
    button.event1-btn{
        width: 100%;
        font-size: 1.2rem;
        display: block;
        padding: 20px 0;
    }
    
    
    /*응모하기*/
    .section3-wrap{
        width: 100%;
        padding: 0 15px;
    }
    .event-point ul{
        display: flex;
        flex-direction: column; 
    }
    
    .event-point ul li{
        width: 100%;
        margin-bottom: 5px;
    }
    .evt2-ps5{
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 40px 20px;
        gap: 10px;
    }
    
    .evt2-ps5 img{
        width: 40%;
    }
    .ps5-txt img{
        width: 30%;
    }
    .ps5-txt{
        margin-left: 0px;
        margin-top: 30px;
    }
    .evt2-apply{
        padding-top: 5px;
    }
    .evt2-apply ul{
        gap: 1%;
    }
    li.apply-1{
        position: relative;
        width: 33.3%;
        display: inline-block;
        padding: 20px;
    }

    .gift_txt{
        padding: 10px 0;
        font-size: 1rem;
    }

     button.ap-btn2{
        background: #ff6927;
        color: #fff;
        width: 100%;
        padding: 10px 0;
        border-radius: 15px;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 1.1rem;
    }
    button.ap-btn2{
        background: #ff6927;
        color: #fff;
        padding: 5% 0;
        border-radius: 15px;
        position: absolute;
        bottom: -7%;
        font-size: 1.1rem;
    }
    button.event2-btn{
        width: 100%;
        font-size: 1.2rem;
        margin-top: 20px;
        padding: 20px 0;
    }
    /*쿠폰이벤트*/
    .section4-wrap{
        padding: 0 15px;
    }
    
    .game-wrap{
        width: 100%;;
        margin: 0 auto;
    }
    .game-wrap ul li img{
        width: 25%;
        padding: 25px 0 15px;
    }
    p.game-name{
        font-size: 1.1rem;
    }
    p.game-item{
        font-size: 1rem;
    }
    button.ins-btn{
        font-size: 1.1rem;
        margin-top: 20px; 
        padding: 11px 0;
    }
    
    button.event3-btn{
        width: 100%;
        padding: 20px 0;
        font-size: 1.2rem;
        margin-top: 20px;
    }
    /*축전모음*/

    /* 240905 */
    .con-img {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 4 → 3으로 변경 */
        gap: 7px;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .section5-banner {
        width: 100%;
        height: auto;
        background: none; /* 배경 제거 */
        margin-bottom: 0;
  }

    .ratio-box {
        display: block;
        width: 100%;
        padding-top: 56.1%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
  }
  
    /* 9번째 이후 아이템 숨기기 */
    .con-img > .section5-banner:nth-child(n+10) {
        display: none;
    }

    .prev-page{
        text-align: right;
    }
    .prev-page img{
        width: 60%;
        float: right;
        
    }
    .next-page img{
        width: 60%;
    }
    .page-list ul li{
        padding: 0 1%;
    }
    .page-list ul li img{
        width: 90%;
    }
    
    .page-list a {
        padding: 0 2px;
    }
    
    /*응원하기*/
    .comment-wrap{
        width: 100%;
    }
    
    .CommentWriter{
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
    }
    
    button.comm-btn{
        background: #323337;
        color: #fff;
        padding: 20px;
        width: 30%;
        font-size: 1.1rem;
    }
    .CommentList table{
        margin: 15px; 
    }
    
    tr{
        width: 100%;
    }
    
    .notice{
        width: 100%;
    }
    .notice .notice-line{
        padding: 8% 0;
    }

    .notice p{
        line-height: 25px;
    }

    .notice-t1{
        width:100px; 
    }
    
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5% 0 10%;
    }

   td.com-nick{
        margin-right: 30px;
    }
   
}


@media screen and (max-width:600px){
    html{
        font-size: 13px;
    }
    ::placeholder{
        padding-left: 10px;
        font-size: 0.8rem
    }
    .notice{
        padding-bottom:10%;
    }
    .notice p{
        line-height: 18px;
    }
    p.ps5-t1{
        padding: 15px 0 0;
        line-height: 15px;
    }
    p.ps5-t2{
        line-height: 20px;
    }
    button.event1-btn{
        padding: 15px 0;
        border-radius: 8px;
    }
    button.event2-btn{
        padding: 15px 0;
        border-radius: 8px;
    }

    button.event3-btn{
        padding: 15px 0;
        border-radius: 8px;
    }

    .game-wrap ul li{
        border-radius: 8px;
    }
    .game-wrap ul li img{
        width: 30%;
        padding: 15px 0 5px;
    }
    .game-wrap p{
        line-height: 18px;
    }
    
    button.ins-btn{
        margin-top: 5%;
        border-radius: 8px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }
    
    .CommentWriter input{
        width: 60%;
        border-radius: 10px;
        height: 50px;
    }

    button.comm-btn{
        background: #323337;
        color: #fff;
        padding: 15px;
        width: 40%;
        height: 50px;
    }
    
}

@media screen and (max-width:430px){
    html{
        font-size: 11px;
    }
    /* 상단 메뉴 추가 s*/
    #header img{width: 18%; padding: 3% 0 3% 2%}
    #header ul li{ width:22%; padding:0; white-space: nowrap;}
    #header ul li:nth-child(1){width:15%;}
    #header ul li:nth-child(2){width:17%;}
    /* 상단 메뉴 추가 e*/
    
    /* 240904 추가 s */
    .detail-wrap{
        padding: 5%;
    }
    /* 240904 추가 e */
    
    .evt2-ps5 {
        padding: 20px;
    }
    .evt2-ps5 img{
        width: 40%;
    }
    .ps5-txt img{
        width: 30%;
    }
    p.ps5-t2{
        line-height: 17px;
    }
    .event-point ul li{
        padding: 10px;
        border-radius: 8px;
    }
    
    .prev-page img{
        width: 40%;
    }
    .next-page img{
        width: 40%;
    }
    
    .page-list ul li{
        padding:0 3%;
    }
    .page-list ul li img{
        width: 50%;
    }
    
    .page-list a {
        padding: 0 1%;
    }
    
    .CommentWriter input{
        width: 60%;
        border-radius: 8px;
        height: 40px;
    }

    button.comm-btn{
        padding: 10px;
        width: 40%;
        height: 40px;
        border-radius: 8px;
    }
        .con-img {
        padding: 10px;
    }
    .game-wrap p{
        line-height: 14px;
    }
    tr{
        padding: 10px 0
    }
    
    td.com-nick{
        margin-right: 2%;
    }
}