@charset "utf-8";

/* Layout */
.wrap{position:relative;}
.wrap img{width:100%;}
.dim_bg{display:none;background:#000;opacity:0.8;position:fixed;top:0;left:0;width:100%;height:100%;z-index:100}
.btnBlank{background: url(../images/bg_transparent.png) repeat; overflow:hidden; text-indent:-99999px; position:absolute; display:block;z-index:1;opacity:0.5}
.snow{
  height: 100%;
  position: absolute;
  width: 100%;
}
/* Gnb */
.event01Area{position:relative;background:url("../images/event01_bg.png") no-repeat center top;overflow:hidden;}
.event01Area .movieArea{position:absolute;left:0;top:24%;z-index:11;width:100%;}
.event01Area .movieArea .btn_prev{position:absolute;left:0;top:50%;transform:translate(0,-50%)}
.event01Area .movieArea .btn_prev img{width:7.8125vw;}
.event01Area .movieArea .btn_next{position:absolute;right:0;top:50%;transform:translate(0,-50%)}
.event01Area .movieArea .btn_next img{width:7.8125vw;}
.event01Area .movieArea .btnJoin{
  left: 23%;
  top: 77%;
  width: 54%;
  height: 12%;
}
.event01Area .movieArea .btnJoinEnd{
  left: 23%;
  top: 77%;
  width: 54%;
  height: 12%;
}
.event01Area > #canvas{position:fixed;left:0;top:0;width:100%;height:100%;}
.event01Area > .conArea{position:relative;z-index:1;margin:0 auto;}
.event01Area > .conArea .movie1{
  left: 20px;
  top: 510px;
  width: 340px;
  height: 400px;
}
.event01Area > .conArea .movie2{
  left: 380px;
  top: 510px;
  width: 340px;
  height: 400px;
}
.event01Area > .conArea .movie3{
  left: 743px;
  top: 510px;
  width: 340px;
  height: 400px;
}
.event01Area > .conArea .moviePop{
  position: absolute;
  left: 0;
  top: 24%;
  display: none;
  width: 100%;
}
.event01Area > .conArea .moviePop.on{
  display:block;
  z-index:12
}
.event01Area > .conArea .moviePop .quiz{
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  display:none;
}
.event01Area > .conArea .moviePop .quiz ul{
  position: absolute;
  left: 23.4%;
  top: 48.1%;
 }
.event01Area > .conArea .moviePop .quiz ul li{
  float:left;
  margin-right:1.1vw;
}
.event01Area > .conArea .moviePop .quiz ul li input{
  width:9.6875vw;
  height:9.6875vw;
  line-height:9.6875vw;
  text-align:center;
  color:#517299;
  font-family:"NanumSquareRound";
  font-weight:700;
  font-size:7.3vw;
  padding:0;
  border:0;
  background:transparent;;
}
.event01Area > .conArea .moviePop .btnBack{
  right: 13%;
  top: 8%;
  width: 10%;
  height: 8%;
}
.event01Area > .conArea .moviePop .playerArea{
  position: absolute;
  left: 12.6%;
  top: 36.2%;
  width: 74.6%;
  height: 42.8%;
}
.event01Area > .conArea .moviePop .quiz .btnOk{
  left: 28.6%;
  top: 69.2%;
  width: 41.6%;
  height: 11.8%;
}
.event01Area > .moviePop{position:absolute;left:0;top:0;z-index:1}
.event01Area .count{
  position: absolute;
  right: 25.625vw;
  top: 64.75%;
  overflow: hidden;
}
.event01Area .count li{
  float: left;
  width: 9.4vw;
  height: 10.4vw;
  line-height: 12.4vw;
  text-align: center;
  font-family: "NanumSquareRound";
  font-weight: 700;
  font-size: 9vw;
  color: #dfbe88;
}
.event02Area{position:relative;background:url("../images/event02_bg.png") no-repeat center top;text-align:center;z-index:10}

.event02Area > .conArea{position:relative;z-index:1;}
.event02Area .tabArea{position:relative;}
.event02Area .tabArea ul{
  position: absolute;
  left:0;
  top:0;
  z-index: 11;
  padding:0 2.3%;
  width:100%;
  height:100%;
  -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
}
.event02Area .tabArea li{float:left;width:33.33333%;height:100%}
.event02Area .tabArea li a{display:block;width:100%;height:100%;position:relative;}
.event02Area .tabConArea{
  position: absolute;
  left: 2.3%;
  top: 29.4%;
  width: 95.3%;
}
.event02Area .tabCon{
  display:none;
}
.event02Area .tabCon.on{
  display:block;
}
.event02Area .btnSave{
  left: 958px;
  top: 467px;
  width: 132px;
  height: 139px;
}
.alert{position:relative;z-index:10}
.popupWrap{ position:absolute; left:0; right:0; top:30%; width:315px;margin:0 auto; display:none;z-index:101;}
.popupWrap .title{padding-top:45px;}
.popupWrap .popupInner{border:2px solid #5476a3;background:#ecf1f4;border-radius:5px;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}
.popupWrap .popupContent{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; overflow:hidden;}
.popupWrap .popupContent .img{ float:left;}
.popupWrap .popupContent .img img{ width:416px; height:416px;}
.popupWrap .popupContent .con{ float:left; padding:37px 5px 0 22px; width:240px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.popupWrap .popupContent .con .name{ font-size:22px; font-weight:bold; color:#ea547e;}
.popupWrap .popupContent .con .txt{ font-size:17px; line-height:22px; color:#121212; margin-top:20px; letter-spacing:-1px;}
.popupWrap .btnClose{ display:block;position:absolute; right:0; top:-25px;}
.popupWrap .btnClose img{width:20px;}

.eventInput{top:40%;}
.eventInput .popupContent{padding:0 15px;}
.eventInput .title{ text-align:center;padding-top:0;}
.eventInput .title img{width:100%;}
.eventInput .writeWrap{ margin:0 auto;}
.eventInput .writeWrap .txt{text-align:center;margin-bottom:40px;}
.eventInput .writeWrap .inputTop{}
.eventInput .writeWrap .inputTop li{ position:relative; padding-left:81px; margin-bottom:5px;border:1px solid #d3d7da;height:32px;}
.eventInput .writeWrap .inputTop li .tit{ position:absolute; left:0; top:0;}
.eventInput .writeWrap .inputTop li .tit img{width:81px;}
.eventInput .writeWrap .inputTop li .inpText{width:100%;height:32px;line-height:32px;border:0;font-size:14px;padding:0}
.eventInput .writeWrap .inputTop li .inpText[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.eventInput .writeWrap .agreeWrap{overflow:hidden;}
.eventInput .writeWrap .agreeWrap .agreeArea{display:block;}
.eventInput .writeWrap .agreeWrap .agreeArea .title{font-size:12px;font-weight:bold;margin-bottom:10px;padding-top:0;}
.eventInput .writeWrap .agreeWrap .agreeArea .agreeScroll{overflow:auto; height:80px; background:#ffffff; font-size:11px; line-height:14px; color:#616161; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;padding:5px; margin-bottom:10px;border:1px solid #d3d7da}
.eventInput .writeWrap .agreeWrap .agreeArea .agreeChk{ text-align:right;margin-bottom:20px;}
.eventInput .writeWrap .agreeWrap .agreeArea .agreeChk label{ display:inline-block;margin:0 20px 0 0px;}
.eventInput .writeWrap .agreeWrap .agreeArea .agreeChk label:last-child{margin-right:0;}
.eventInput .writeWrap .agreeWrap .agreeArea .agreeChk label img{width:auto;height:12px;}
.eventInput .writeWrap .btnArea{text-align:center;margin-bottom:20px;}
.eventInput .writeWrap .btnArea img{width:200px;}
.eventend{top:50%;}
.eventend img{width:100%;}
.eventend .sns1{
  left: 8%;
  top: 64%;
  width: 17%;
  height: 25%;
}
.eventend .sns2{
  left: 30%;
  top: 64%;
  width: 17%;
  height: 25%;
}
.eventend .sns3{
  left: 53%;
  top: 64%;
  width: 17%;
  height: 25%;
}
.eventend .sns4{
  left: 75%;
  top: 64%;
  width: 17%;
  height: 25%;
}

input[type=radio]{ width:1px; height:1px; opacity:0; position:absolute; left:0; top:0;}
input[type=radio]+label{ padding-left:20px; font-size:12px; color:#4d4d4d; display:block; position:relative;}
input[type=radio]+label:after{ content:'';display:block; position:absolute; left:0; top:0; background:url("../images/radio_bg.png") no-repeat; width:16px; height:16px;}
input[type=radio]:checked+label{ color:#4d4d4d;}
input[type=radio]:checked+label:after{ background-position:0 -16px;}
.dim_bg{display:none;}
.winnerList{width:310px;}
.winnerList .popupContent{padding:0 15px;}
.winnerList .title{text-align:center;padding:20px 15px 15px 15px;}
.winnerList .title img{width:100%;}
.winnerList .winnerSearch{margin-bottom:5px;}
.winnerList .winnerSearch input{height:33px;vertical-align:middle;width:100px;border:1px solid #d3d7da;font-size:17px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 5px;}
.winnerList .winnerSearch a{display:inline-block;vertical-align:middle;}
.winnerList .winnerSearch a img{width:auto;height:23px;}
.winnerList .winnerListBox{border:1px solid #d3d7da;margin-bottom:8px;background:#ffffff;padding:10px 0 10px 10px;height:160px;overflow:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#303030;font-size:11px;line-height:16px;letter-spacing:-1px;}
.winnerList .winnerListBox .tit{font-weight:bold;margin-bottom:5px;}
.winnerList .winnerListBox ul{overflow:hidden;margin-bottom:10px;}
.winnerList .winnerListBox ul li{float:left;width:88px;}
.winnerList .winnerAlert{margin:0 -15px 15px -15px;}
.winnerList .winnerAlert img{width:100%;}