*{padding: 0; margin: 0; box-sizing: border-box;}
ul, li, ol{list-style: none;}
a{text-decoration: none;}


body{width: 100%; height: 100%; background: url('../img/이벤트1/bg.jpg') no-repeat; overflow-x: hidden;}

.header{width: 100%;}
.header>.inner{position: relative; height: 700px;}
.header>.inner>.wrap{}
.header>.inner>.wrap>.box1{position: absolute; left: 30%; top: 405px;}
.header>.inner>.wrap>.box1>.txt1{font: bold 20px 'inherit'; color: #fff; margin-bottom: 10px;}
.header>.inner>.wrap>.box1>.txt2{font: bold 20px 'inherit'; color: #fff;}
.header>.inner>.wrap>.box1>.txt1>span{font: bold 20px 'inherit'; color: greenyellow; margin-right: 10px;}
.header>.inner>.wrap>.box1>.txt2>span{font: bold 20px 'inherit'; color: yellow; margin-right: 10px;}
.header>.inner>.wrap>.box2{position: absolute; left: 30%; bottom: 160px;}
.header>.inner>.wrap>.box2>.btn1{font: bold 20px 'inherit'; color: black; margin-right: 36px; border: 1px solid #02deee; background-color: #02deee; padding: 10px 10px; border-radius: 30px;}
.header>.inner>.wrap>.box2>.btn2{font: bold 20px 'inherit'; color: #fff; margin-right: 36px; border: 1px solid #232d82; background-color: #232d82; padding: 10px 30px; border-radius: 30px;}
.header>.inner>.wrap>.box2>.btn3{font: bold 20px 'inherit'; color: #fff; border: 1px solid #232d82; background-color: #232d82; padding: 10px 30px; border-radius: 30px;}




.event{width: 100%;}
.event>.inner{margin: 0 auto;}
.event>.inner>.wrap{position: relative;}
.event>.inner>.wrap>.box{position: absolute; left: 17%; top: -70px;}
.event>.inner>.wrap>.box>.btn{width: 1280px; height: 120px; background-color: #171D4E; border: 1px solid cyan; cursor: pointer;}
.event>.inner>.wrap>.box>.btn>.txt{font: 20px 'inherit'; color: #ffffff;}
.event>.inner>.wrap>.box>.btn>.txt>span{color: #07f468;}
.event>.inner>.wrap>.progress{position: absolute; left: 17%; top: 125px; width: 1280px; height: 48px; background-color: #001843; display: flex;}
.event>.inner>.wrap>.progress>li:nth-child(1){border: 1px solid cyan; border-radius: 15px; width: 120px; height: 30px; font: 15px/30px 'inherit'; color: #fff; text-align: center; cursor: pointer;}
.event>.inner>.wrap>.progress>li:nth-child(2){border: 1px solid cyan; border-radius: 15px; width: 120px; height: 30px; font: 15px/30px 'inherit'; color: #fff; text-align: center; position: absolute; left: 34%; cursor: pointer;}
.event>.inner>.wrap>.progress>li:nth-child(3){border: 1px solid cyan; border-radius: 15px; width: 120px; height: 30px; font: 15px/30px 'inherit'; color: #fff; text-align: center; position: absolute; left: 56%; cursor: pointer;}
.event>.inner>.wrap>.progress>li:nth-child(4){border: 1px solid cyan; border-radius: 15px; width: 120px; height: 30px; font: 15px/30px 'inherit'; color: #fff; text-align: center; position: absolute; left: 78.5%; cursor: pointer;}
.event>.inner>.wrap>.progress>li:nth-child(5){border: 1px solid cyan; border-radius: 15px; width: 120px; height: 30px; font: 15px/30px 'inherit'; color: #fff; text-align: center; position: absolute; left: 89.5%; cursor: pointer;}
.event>.inner>.wrap>.progress>li:nth-child(1):after{content: '▼'; position: absolute; left: 4%; bottom: 1%; color: cyan;}
.event>.inner>.wrap>.progress>li:nth-child(2):after{content: '▼'; position: absolute; left: 41%; bottom: -68%; color: cyan;}
.event>.inner>.wrap>.progress>li:nth-child(3):after{content: '▼'; position: absolute; left: 41.5%; bottom: -68%; color: cyan;}
.event>.inner>.wrap>.progress>li:nth-child(4):after{content: '▼'; position: absolute; left: 43%; bottom: -68%; color: cyan;}
.event>.inner>.wrap>.progress>li:nth-child(5):after{content: '▼'; position: absolute; left: 46.5%; bottom: -68%; color: cyan;}
.event>.inner>.wrap>.tab{width: 1280px; height: 70px; position: absolute; left: 17%; top: 173px;}

.event>.inner>.wrap>.tab li{float: left; font: 20px/70px 'inherit'; color: #fff; width: 11.111%; height: 70px; text-align: center; border-right: 1px solid #4E5590; border-top: 1px solid #1A355E; background-color: #001843; cursor: pointer;}
.event>.inner>.wrap>.tab li.active{background-color: #4556E3;}

.event>.inner>.wrap>.reward{background: url('../img/이벤트1/bg_reward.jpg')no-repeat; z-index: 999; background-size: cover; width: 1280px; height: 732px; position: absolute; left: 17%; top: 243px;}
.event>.inner>.wrap>.reward>li{display: none;}
.event>.inner>.wrap>.reward>li .active{display: block;}
/* .event>.inner>.wrap>.reward>li:nth-child(1){display: flex; justify-content: center;  align-items: center; position: relative;} */
.event>.inner>.wrap>.reward>li>.item:nth-child(1){position: absolute; left: 24%; top: 150px; width: 330px;}
.event>.inner>.wrap>.reward>li>.item:nth-child(2){position: absolute; left: 57%; top: 150px; width: 330px;}
.event>.inner>.wrap>.reward>li>.item>img{margin-bottom: 10px; padding: 0 60px;}
.event>.inner>.wrap>.reward>li>.item>.txt{font: 25px 'inherit'; color: #fff; text-align: center;}

.event>.inner>.wrap>.reward>li>.item1{position: absolute; left: 36%; top: 150px; width: 330px;}
.event>.inner>.wrap>.reward>li>.item1 img{margin-bottom: 10px; padding: 0 60px;}
.event>.inner>.wrap>.reward>li>.item1 .txt{font: 25px 'inherit'; color: #fff; text-align: center;}

.event>.inner>.wrap>.reward>li>.item2:nth-child(1){position: absolute; left: 12%; top: 150px; width: 330px;}
.event>.inner>.wrap>.reward>li>.item2:nth-child(2){position: absolute; left: 42%; top: 150px; width: 330px;}
.event>.inner>.wrap>.reward>li>.item2:nth-child(3){position: absolute; left: 65%; top: 230px; width: 380px;}
.event>.inner>.wrap>.reward>li>.item2>img{margin-bottom: 10px; padding: 0 60px;}
.event>.inner>.wrap>.reward>li>.item2>img:nth-child(3){margin-bottom: 60px; padding: 0 60px;}
.event>.inner>.wrap>.reward>li>.item2>.txt{font: 25px 'inherit'; color: #fff; text-align: center;}

.event>.inner>.wrap>.reward>li>.item3:nth-child(1){position: absolute; left: 25%; top: 150px; width: 330px;}
.event>.inner>.wrap>.reward>li>.item3:nth-child(2){position: absolute; left: 55%; top: 150px; width: 330px;}
.event>.inner>.wrap>.reward>li>.item3:nth-child(1) img{margin-bottom: 10px; padding: 0 60px;}
.event>.inner>.wrap>.reward>li>.item3:nth-child(2) img{margin-bottom: 10px; padding: 0 37px; margin-top: 80px;}
.event>.inner>.wrap>.reward>li>.item3 .txt{font: 25px 'inherit'; color: #fff; text-align: center;}

.event>.inner>.wrap>.reward>li>button{width: 1280px; height: 117px; position: absolute; top: 700px; font: 25px 'inherit'; background-color: gray; color: #fff; cursor: pointer;}

.event>.inner>.wrap>.reward>li.active{display: block; }



.footer{width: 100%; position: relative; bottom: -1080px;}
.footer .inner{background-color: #000; height: 200px;}
.footer .inner .logo{text-align: center; padding-top: 35px;}
.footer .inner .info{position: relative; left: 25%; top: 18%;}
.footer .inner .info p{font-size: 0; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.footer .inner .info a:nth-child(1) img{width: 36px; height: 17px;}
.footer .inner .info a:nth-child(2) img{width: 88px; height: 39px; margin-right: 30px;}
.footer .inner .info .box{ display: inline;}
.footer .inner .info .box img{margin-left: 50px;}