@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/*common*/

img,
fieldset,
iframe {
  border: 0;
}
img {
  vertical-align: top;
}

a {
  text-decoration: none;
  color: inherit;
}
textarea:focus,
input:focus {
  outline: none;
}

.obj {
  position: absolute;
  z-index: 2;
}
.btn {
  position: absolute;
  z-index: 2;
  font-size: 0px;
  cursor:pointer;
}
.btn img {
  max-width: 100%;
  height: auto;
}
.button img {
  max-width: 100%;
  height: auto;
}
.hidden {
  font-size: 0px;
  display: none;
}

body {
  font-size: 14px;
  letter-spacing: -1px;
  font-weight: 400;
  overflow-x: hidden;
  font-family: "Pretendard-Regular";
  color: #222222;
}
.btn a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  font-size: 0px;
  background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/promy119quiz365/assets/img/transparent.png");
}
.hidden {
  font-size: 0px;
  display: none;
}

.pc {
  display: block !important;
}
.mo {
  display: none !important;
}
body {
  font-size: 14px;
  font-weight: 400;
  overflow-x: hidden;
  font-family: "Pretendard-Regular";
  color: #222222;
}
#quickMenu{top:120px; right:50px; position: fixed; z-index: 100; overflow: hidden;}
#quickMenu .btn1{width:100%;height: 17%;top: 6%;left:0%;}
#quickMenu .btn2{width:100%;height: 17%;top: 23%;left:0%;}
#quickMenu .btn3{width:100%;height: 17%;top: 41%;left:0%;}
#quickMenu .btn4{width:100%;height: 17%;top: 58%;left:0%;}
#quickMenu .btn5{width:100%;height: 17%;top: 76%;left:0%;}
#quickMenu .top{width:100%; height:7%; bottom:0%; left:0%;}

#evtWrap {
  background-color: #ffffff;
  text-align: center;
}
#evtWrap div, #evtWrap p, #evtWrap a, #evtWrap span{font-family: "Pretendard-Regular"; letter-spacing: 0;}
.sec {
  position: relative;
  min-width: 1150px;
  background-repeat: no-repeat;
  background-position-x: center;
}
.sec .innerWrap {
  width: 1150px;
  height: 100%;
  margin: 0px auto;
  position: relative;
}

#main {
  height: 892px;
  background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/event202509/assets/img/main.jpg");
}
#evt1 {
  height: 1065px;
  background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/event202509/assets/img/section1.jpg");
}
#evt2 {
  height: 1213px;
  background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/event202509/assets/img/section2.jpg");
}
#evt3 {
  height: 2194px;
  background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/event202509/assets/img/section3.jpg");
}
#evt4 {
  height: 1121px;
  background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/event202509/assets/img/section4.jpg");
}
#evt5 {
  height: 1129px;
  background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/event202509/assets/img/section5.jpg");
}
#notice {
  height: 686px;
  background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/event202509/assets/img/footer.jpg");
}
#notice .btn1 {
  width: 21%;
  height: 8%;
  bottom: 10%;
  left: 28%;
}


#main .player{width: 55.65%; height: 40.4%; top: 33.8%; left: 22.2%;}
#main .player iframe{width:100%; height:100%;}

#evt1 .join{width:38%; top:40%; left:31%; animation: ani_btn 1.2s infinite;}
#evt2 .join{width:43%; top:46%; left:29%; animation: ani_btn 1.2s infinite;}
#evt3 .join{width:48%; top:23%; left:26%; animation: ani_btn 1.2s infinite;}
#evt4 .join{width:48%; top:41%; left:26%; animation: ani_btn 1.2s infinite;}
#evt4 .join a{position: relative; display: block;}
#evt5 .join{width:44%; top:38%; left:28%; animation: ani_btn 1.2s infinite;}
#evt5 .join a{position: relative; display: block;}
@keyframes ani_btn {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.95);
  }
}

#evt2 .emot{top:57%; left:50%; width:74%; margin-left:-37%;}
#evt2 .emot img{width:100%; height:auto;}
#evt2 .emot .big{width:23%; height: 43.5%; top:37%; left:8%; background-color: #ffffff;}
#evt2 .emot .big img{border:8px solid #e0f2e4; box-shadow: 6px 6px #217d33; }
#evt2 .emot .big p{font-size:20px; color:#ffffff; margin-top:10px;}
#evt2 .emot .swiperWrap{width:52.5%; top:37%; right:8%;}
#evt2 .emot .swiper-slide ul{overflow: hidden;}
#evt2 .emot .swiper-slide ul li{width:23%; margin:1%; float:left; cursor:pointer; position: relative;}
#evt2 .emot .swiper-slide ul li.on:before{width:96%; height:96%; top:2%; left:2%; background-image: url("https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/event202509/assets/img/section2_emot_over.png"); background-size:cover; background-position:center; content: ""; display: block; position: absolute; z-index: 2;}
#evt2 .emot .swiper-slide ul li img{border:2px solid #e0f2e4; box-shadow: 5px 5px #217d33; }
#evt2 .emot .swiper-button-next{right:-7%; background: none;}
#evt2 .emot .swiper-button-prev{left:-7%; background: none;}
#evt2 .emot .swiper-button-next:after, #evt2 .emot .swiper-button-prev:after{display: none;}

#evt3 .galleryWrap{top:59%; width:100%;}
#evt3 .galleryWrap .gallery{width:835px; padding:20px; box-sizing:border-box; border-radius:10px; background-color:#ffffff; margin:0px auto; position: relative;}
#evt3 .galleryWrap .gallery p.title{margin:20px; margin-bottom:0px;}
#evt3 .galleryWrap .gallery .list{display: flex; flex-wrap: wrap;}
#evt3 .galleryWrap .gallery .list li{width:23%; margin:1%; border-radius: 10px; box-shadow: 5px 5px #ececec; overflow: hidden;}
#evt3 .galleryWrap .gallery .list li p{font-size:18px; padding:5px 0px; color:#8cc33f}
#evt3 .galleryWrap .gallery .list li p b{color:#0b7f41}
#evt3 .galleryWrap .gallery .paging a{font-size:20px; padding:5px; font-style: normal;}
#evt3 .galleryWrap .gallery .paging em.active a{font-weight: bold;}



/*팝업*/
.popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 9999;
  box-sizing: border-box;
  background-color: hsla(0, 0%, 0%, 0.8);
  text-align: center;
  display: none;
}
.popup:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}
.popup .wrap {
  width: 630px;
  margin: 0 auto;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
}

.popup .top{position: relative;}
.popup .top .close {
  width: 15%;
  height: 100%;
  top: 0%;
  right: 0%;
}
.popup .top .close a {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  font-size: 0px;
}

.popup .top .closePolicy {
  width: 15%;
  height: 100%;
  top: 0%;
  right: 0%;
  cursor: pointer;
}
.popup .top .closePolicy a {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  font-size: 0px;
}
.popup .mid{background-color: #ffffff; padding:5px 0px;}

.popup .mid .content1 {
  padding: 30px 50px;
  box-sizing: border-box;
}
.popup .mid .content2 {
 padding: 30px 0px;
  box-sizing: border-box;
}
.popup .content3 {
	background-color: #ffffff;
	padding-bottom:30px;
}


#popup_login .evt{display: none;}
#popup_login .wrap.evt1 .evt1{display: block;}
#popup_login .wrap.evt2 .evt2{display: block;}
#popup_login .wrap.evt3 .evt3{display: block;}

#popup_login .content1 p.txt1 {
  font-size: 33px;
  line-height:40px;
  font-weight: 500;
}
#popup_login .content1 p.txt2 {
  font-size: 23px;
  font-weight: 500;
}
#popup_login .content1 p.txt3 {
  font-size: 23px;
  color: #999999;
}
#popup_login .content1 .input {
  margin: 30px 10px;
  padding: 10px 30px;
  border: 2px solid #eaeaea;
  border-radius: 25px;
  width: auto;
  height: auto;
}
#popup_login .content1 .input li {
  padding-left: 120px;
  margin: 20px 0px;
  position: relative;
}
#popup_login .content1 .input li label {
  font-size: 29px;
  width: 100px;
  line-height: 62px;
  font-weight: 600;
  top: 0px;
  left: 0px;
  position: absolute;
  display: block;
}
#popup_login .content1 .input li input {
  font-size: 30px;
  width: 100%;
  height: 62px;
  padding: 0px 30px;
  font-weight: 600;
  border-radius: 30px;
  border: none;
  background-color: #eaeaea;
  text-align: center;
}
#popup_login .content1 .agree {
  font-size: 22px;
  margin: 20px 0px;
  color: #8cc33f;
  display: flex;
  align-items: center;
  justify-content: center;
}
#popup_login .content1 .agree label {
  display: flex;
  align-items: center;
}
#popup_login .content1 .agree label em {
  width: 39px;
  height: 39px;
  margin-right: 10px;
  display: inline-block;
  background-image: url(https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/promy119quiz365/assets/img/popup_login_check.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
#popup_login .content1 .agree label input {
  display: none;
}
#popup_login .content1 .agree label input:checked + em {
  background-image: url(https://1968569fc7fe9fd5.kinxzone.com/wp-content/themes/dbins/promy119quiz365/assets/img/popup_login_checkH.jpg);
}
#popup_login .content1 .agree a {
  margin-left: 10px;
}
#popup_login .confirm{display: flex; justify-content: center;}

#popup_policy .content1 .policy {
	margin-bottom:20px;
  padding: 10px 30px;
  border: 2px solid #eaeaea;
  border-radius: 25px;
  height: 450px;
  overflow-y: auto;
  text-align: left;
}
#popup_policy .content1 .policy dl {
  margin-bottom: 20px;
  line-height: 25px;
}
#popup_policy .content1 .policy dt {
  font-size: 22px;
  margin: 5px 0px;
  font-weight: 700;
}
#popup_policy .content1 .policy dd {
  font-size: 18px;
}

#popup_evt1_share .snsWrap{margin-bottom:40px; position: relative;}
#popup_evt1_share .snsWrap .sns {
    width: 96%;
    height: 24%;
    top: 75%;
    left: 2%;
}
#popup_evt1_share .snsWrap .sns .btn {
  width: 20%;
  height: 100%;
}
#popup_evt1_share .snsWrap .sns .facebook {
  left: 0%;
}
#popup_evt1_share .snsWrap .sns .kakao {
  left: 20%;
}
#popup_evt1_share .snsWrap .sns .blog {
  left: 40%;
}
#popup_evt1_share .snsWrap .sns .twitter {
  left: 60%;
}
#popup_evt1_share .snsWrap .sns .threads {
  left: 80%;
}

#popup_roulette p.txt1 {margin:20px 0px; font-size:30px; font-weight:600; color:#047b36;}
#popup_roulette .roulette {

  position: relative;
}
#popup_roulette .roulette .pin {
  width: 57px;
  margin-left: -28px;
  top: 8px;
  left: 50%;
  position: absolute;
  z-index: 2;
}
#popup_roulette .roulette .pan span {
  display: none;
}
#popup_roulette .roulette .pan .start {
  display: block;
  cursor: pointer;
}

/*사진업로드*/
#popup_upload .mid{padding:20px 40px;}
#popup_upload #image_preview {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	border: 2px solid #ccc;
	overflow: hidden;
	background-color: #ecf0f1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: move;
}

#popup_upload #image_preview img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    pointer-events: none;
}
#popup_upload #image_upload {display: none;}
#popup_upload .file-upload-label {margin:10px 0px; display: block; cursor:pointer;}
#popup_upload p.txt1{margin:10px 80px; font-size:18px; color:#666666;}
#popup_upload p.txt1 i{display: block; font-style: normal; text-align: left;}
#popup_upload .selectTag p{font-size:25px; color:#191919;}
#popup_upload .selectTag .tagWrap{margin:20px 50px; margin-top:10px; font-size:25px; border:1px solid #adadad; border-radius:30px; color:#00a651; font-weight: 600;}
#popup_upload .selectTag .tagWrap ul{display: flex; justify-content: center;}
#popup_upload .selectTag .tagWrap li{margin:5px 10px;}
#popup_upload .selectTag .tagWrap li label{cursor:pointer;}
#popup_upload .selectTag .tagWrap li input[type="radio"]{width:25px; height:25px; margin-right:5px; vertical-align: -2px; cursor:pointer;}

@media screen and (max-width: 960px) {
	#masthead{overflow: hidden;}
  .pc {
    display: none !important;
  }
  .mo {
    display: block !important;
  }
  img {
    width: 100%;
    height: auto;
  }
  .sec {
    position: relative;
    min-width: 360px;
    height: auto !important;
    background-image: none !important;
  }
  .sec .innerWrap {
	  width: 100%;
	  position: absolute;
	}
  #quickMenu{top:100px; right:0px; width:45px; display: none;}
  #notice .btn1 {
	  width: 45%;
	  height: 8%;
	  bottom: 7%;
	  left: 5%;
	}
	
	#main .player{width: 100%; height: 37.5%; top: 62.4%; left: 0%;}
	
	#evt1 .join{width:46%; top:36%; left:26%; }
	#evt2 .join{width:50%; top:45%; left:25%; }
	#evt3 .join{width:52%; top:16%; left:24%; }
	#evt4 .join{width:52%; top:45%; left:24%; }
	#evt5 .join{width:50%; top:39%; left:25%; }

	#evt2 .emot{top:54%; left:1%; width:98%; margin-left:0%;}
	#evt2 .emot .big img{border:3px solid #e0f2e4; box-shadow: 3px 3px #217d33; }
	#evt2 .emot .big p{font-size:12px; margin-top:5px; line-height:14px;}
	#evt2 .emot .swiper-slide ul li img{border:2px solid #e0f2e4; box-shadow: 2px 2px #217d33; }
	#evt2 .emot .swiper-button-next{right:-11%; width:20px;}
	#evt2 .emot .swiper-button-prev{left:-11%; width:20px;}
	
	#evt3 .galleryWrap{top:44%;}
	#evt3 .galleryWrap .gallery{width:98%; padding:20px 10px;}
	#evt3 .galleryWrap .gallery p.title{width:60%; margin:0px auto; margin-top:10px; line-height:0px;}
	#evt3 .galleryWrap .gallery .list li{width:31%; margin:1%; box-shadow: 2px 2px #ececec;}
	#evt3 .galleryWrap .gallery .list li p{font-size:12px; letter-spacing:-1px; padding:2px 0px;}
	#evt3 .galleryWrap .gallery .paging a{font-size:16px; padding:3px;}
	
	
	.popup .wrap {width: 90%;}
	.popup .mid .content1 {
	  padding: 20px 20px;
	  box-sizing: border-box;
	}
	.popup .mid .content2 {
	 padding: 20px 0px;
	  box-sizing: border-box;
	}
	.popup .content3 {
		background-color: #ffffff;
		padding-bottom:20px;
	}
	
	#popup_login .content1 p.txt1 {
	    font-size: 17px;
	    line-height:25px;
	  }
	  #popup_login .content1 p.txt2 {
	    font-size: 12px;
	  }
	  #popup_login .content1 p.txt3 {
	    font-size: 12px;
	    margin: 2px 0px;
	  }
	  #popup_login .content1 .input {
	    margin: 10px 5px;
	    padding: 10px 10px;
	    border: 1px solid #eaeaea;
	    border-radius: 15px;
	  }
	  #popup_login .content1 .input li {
	    padding-left: 75px;
	    margin: 10px 0px;
	  }
	  #popup_login .content1 .input li label {
	    font-size: 16px;
	    width: 70px;
	    line-height: 30px;
	  }
	  #popup_login .content1 .input li input {
	    font-size: 16px;
	    height: 30px;
	    padding: 0px 10px;
	    border-radius: 15px;
	  }
	  #popup_login .content1 .agree {
	    font-size: 12px;
	    margin: 10px 0px;
	  }
	  #popup_login .content1 .agree label em {
	    width: 18px;
	    height: 18px;
	    margin-right: 5px;
	  }
	  #popup_login .content1 .agree a {
	    margin-left: 10px;
	  }
	  #popup_login .content1 .confirm img {
	    width: 44%;
	    max-width: 170px;
	  }
	  #popup_login .content1 .confirm img.evt2, #popup_login .content1 .confirm img.evt3 {
	    width: 55%;
	  }
	  #popup_policy .content1 .policy {
	  	height: 230px;
	    padding: 10px 15px;
	    border: 1px solid #eaeaea;
	    border-radius: 15px;
	  }
	  #popup_policy .content1 .policy dl {
	    margin-bottom: 15px;
	    line-height: 15px;
	  }
	  #popup_policy .content1 .policy dt {
	    font-size: 12px;
	    margin: 5px 0px;
	  }
	  #popup_policy .content1 .policy dd {
	    font-size: 11px;
	  }
	  #popup_policy .content1 .closePolicy img {
	    width: 40%;
	  }
	  #popup_evt1_share .snsWrap{margin-bottom:20px;}
	  #popup_evt1_share .confirm img{width:50%;}
	  #popup_roulette .roulette {
	    width: 90%;
	    margin: 0px auto;
	    margin-top: 10px;
	  }
	  #popup_roulette .roulette .pin {
	    width: 10%;
	    margin-left: -5%;
	    top: 0px;
	    left: 50%;
	  }
	  #popup_roulette p.txt1{font-size:18px; margin:15px 0px;}
	  #popup_roulette .winCheck2{margin-top:10px; display: block;}
	  #popup_roulette .winCheck2 img{width:40%;}
	  
	  #popup_lose .closeBtn img, #popup_win1 .closeBtn img, #popup_win2 .closeBtn img{width:35%;}
	  
	  
	  /*사진업로드*/
	#popup_upload .mid{padding:1px 10px; padding-bottom:10px;}
	#popup_upload #image_preview {font-size:16px; border: 1px solid #ccc; scale:0.8; margin-top:-15px;}
	#popup_upload .file-upload-label {margin:10px 50px; margin-top:-20px; }
	#popup_upload .file-upload-label img{max-width:250px;}
	#popup_upload p.txt1{margin:10px 20px; font-size:12px;}
	#popup_upload .selectTag p{font-size:14px; }
	#popup_upload .selectTag .tagWrap{margin:10px 15px; margin-top:5px; font-size:15px;  border-radius:20px;}
	#popup_upload .selectTag .tagWrap li{margin:5px 5px;}
	#popup_upload .selectTag .tagWrap li label{cursor:pointer;}
	#popup_upload .selectTag .tagWrap li input[type="radio"]{width:15px; height:15px; margin-right:3px; vertical-align: -2px; cursor:pointer;}
	#popup_upload #upload_button img {width: 44%; max-width: 170px;}
	  
}