@charset "utf-8";
/*size pc-(2560px), mo-(1200)*/

/* reset */
*{margin: 0;padding: 0;border: 0;box-sizing: border-box;}
html{-webkit-tap-highlight-color:transparent !important;-webkit-text-size-adjust: none;-webkit-appearance: none;}
html{overflow-x: hidden;-webkit-touch-callout:none;}/* -webkit-user-select:none; 모바일 드래그 막기 */
body{min-width: 320px;max-width: 100%;font-family: 'Noto Sans KR', sans-serif;color: #000000;} /* 맞는 폰트로 변경 해줘야함 */
ul,ol,li,dl,dd,dt,input,h1,h2,h3,h4,h5,h6,p,b,input,button,textarea,fieldset,legend,td,th{margin:0px;padding:0px;font-weight:normal;word-break:keep-all}
li{list-style:none}
table,th,td{border-collapse: collapse;/*border-spacing: 0;*/}
input,textarea,button,select{font-family:'Noto Sans KR', sans-serif;color: #000000;}
input{-webkit-appearance: none;-webkit-border-radius: 0;border-radius: 0;}
input[type=text], input[type=tel], input[type="number"], input[type="email"], input[type="password"]{outline: none;}
input[type=text]::-ms-clear, 
input[type=tel]::-ms-clear{display: none;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}
select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select::-ms-expand{display: none;}/* IE 10, 11의 네이티브 화살표 숨기기 */
button{border: none;background: none;cursor: pointer;-webkit-transform: translate3d(0,0,0);}
button{overflow:visible\9}	/* button fix for ie8 */
label{cursor: pointer;}
label img{pointer-events: none;}
input::-webkit-input-placeholder{color:#999}
input::-moz-placeholder{color:#999}
input:-moz-placeholder{color:#999}
input:-ms-input-placeholder{color:#999}
textarea::-webkit-input-placeholder{color:#999}
textarea::-moz-placeholder{color:#999}
textarea:-moz-placeholder{color:#999}
textarea:-ms-input-placeholder{color:#999}
input:focus::-webkit-input-placeholder{color:transparent!important}
input:focus::-moz-placeholder{color:transparent!important}
input:focus:-moz-placeholder{color:transparent!important}
input:focus:-ms-input-placeholder{color:transparent!important}
textarea:focus::-webkit-input-placeholder{color:transparent!important}
textarea:focus::-moz-placeholder{color:transparent!important}
textarea:focus:-moz-placeholder{color:transparent!important}
textarea:focus:-ms-input-placeholder{color:transparent!important}
a{text-decoration: none;color: #242424;}
img{display: block;border: 0;width: auto;}

/* temp */
/* body::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('../images/PUBG_여름서바이버페스티벌_2560.jpg');z-index: -1;opacity: 0.5;} */

/* common */
.ir_text{overflow: hidden;position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;border: 0;clip: rect(0 0 0 0);}
.clearfix:after{content: '';display: block;clear: both;height: 0;visibility: visible;}
.scrollDisable{height: 100%;min-height: 100%;overflow: hidden !important;touch-action: none;}

/* wrapper */
#wrapper{position: relative;width: 100%;height: auto;background-color: #070707;overflow-x: hidden;}
#wrapper #wrap{position: relative;width: 100%;height: 100%;}
#wrapper #wrap.active{width: 100%;height: 100%;filter: blur(10px);}
#wrapper #wrap.active::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.4);z-index: 100;}

/* nav */
nav{position: fixed;top: 0;left: -480px;width: 480px;height: 100vh;background-color: #000000;z-index: 200;}
nav .navWrap{position: relative;display: flex;flex-direction: column;align-items: center;width: 100%;height: 100%;padding: 140px 0;}
nav .navWrap .closeBtn{position: absolute;top: 40px;right: 40px;display: block;}
nav .navWrap > ul{display: flex;flex-direction: column;align-items: center;justify-content: center;}
nav .navWrap > ul > li{margin-top: 85px;text-align: center;}
nav .navWrap > ul > li:nth-child(2){margin-top: 77px;}
nav .navWrap > ul > li > a{display: inline-block;}
nav .navWrap > ul > li > ul{display: none;margin-top: 20px;}
nav .navWrap > ul > li > ul li{text-align: center;}
nav .navWrap > ul > li > ul li a{position: relative;font-size: 20px;line-height: 42px;color: transparent;margin-right: 20px;overflow: hidden;transition: all .3s;}
nav .navWrap > ul > li > ul li a::before{content: '';opacity: 0;position: absolute;top: 50%;left: -30px;width: 16px;height: 2px;background: url('../images/nav_hover_1.png') no-repeat;background-size: 100% 100%;transform: translateY(-50%);}
nav .navWrap > ul > li > ul li a::after{content: '';opacity: 0;position: absolute;top: 50%;left: -30px;width: 37px;height: 29px;background: url('../images/nav_hover_2.png') no-repeat;background-size: 100% 100%;transform: translateY(-50%);}
nav .navWrap > ul > li > ul li a:hover{transition: all .8s;}
nav .navWrap > ul > li > ul li a:hover::before{content: '';opacity: 1;transition: all .8s;}
nav .navWrap > ul > li > ul li a:hover::after{content: '';opacity: 1;left: calc(100% + 8px);transition: all .8s;}
nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(1) a{background: url('../images/nav_menu_1_1.png') no-repeat;background-position: 50% 7px;background-size: 276px 144px;}
nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(2) a{background: url('../images/nav_menu_1_1.png') no-repeat;background-position: 50% -35px;background-size: 276px 144px;}
nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(3) a{background: url('../images/nav_menu_1_1.png') no-repeat;background-position: 50% -78px;background-size: 276px 144px;}
nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(4) a{background: url('../images/nav_menu_1_1.png') no-repeat;background-position: 50% -120px;background-size: 276px 144px;}
nav .navWrap > ul > li:nth-child(2) > ul li:nth-child(1) a{background: url('../images/nav_menu_2_1.png') no-repeat;background-position: 50% 7px;background-size: 185px 102px;}
nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(1) a:hover{background: url('../images/nav_menu_1_1_on.png') no-repeat;background-position: 50% 7px;background-size: 276px 144px;}
nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(2) a:hover{background: url('../images/nav_menu_1_1_on.png') no-repeat;background-position: 50% -35px;background-size: 276px 144px;}
nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(3) a:hover{background: url('../images/nav_menu_1_1_on.png') no-repeat;background-position: 50% -78px;background-size: 276px 144px;}
nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(4) a:hover{background: url('../images/nav_menu_1_1_on.png') no-repeat;background-position: 50% -120px;background-size: 276px 144px;}
nav .navWrap > ul > li:nth-child(2) > ul li:nth-child(1) a:hover{background: url('../images/nav_menu_2_1_on.png') no-repeat;background-position: 50% 7px;background-size: 185px 102px;}

/* header */
header{position: fixed;display: flex;align-items: center;justify-content: center;width: 100%;height: 75px;background-color: #070707;z-index: 100;}
header .headerWrap{position: relative;display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 0 40px;}
header .headerWrap .menuBtn{display: block;width: 24px;height: 19px;background: url('../images/menuBtn.png') no-repeat center center;background-size: 100% 100%;transition: all .3s;}
header .headerWrap .menuBtn:hover{background: url('../images/menuBtn_on.png') no-repeat center center;background-size: 100% 100%;transition: all .3s;}
header .headerWrap .logo{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
header .headerWrap .rightBox{display: flex;align-items: center;justify-content: center;}
header .headerWrap .rightBox a{position: relative;display: block;}
header .headerWrap .rightBox .homeBtn{width: 104px;height: 16px;margin-right: 55px;background: url('../images/homeBtn.png') no-repeat center center;background-size: 104px 16px;transition: all .3s;}
header .headerWrap .rightBox .homeBtn:hover{background: url('../images/homeBtn_on.png') no-repeat center center;background-size: 104px 16px;transition: all .3s;}
header .headerWrap .rightBox .homeBtn::after{content: '';position: absolute;top: 50%;right: -27px;width: 1px;height: 12px;background-color: #4d4d4d;transform: translateY(-50%);}
header .headerWrap .rightBox .todayBtn{width: 136px;height: 15px;background: url('../images/todayBtn.png') no-repeat center center;background-size: 136px 15px;transition: all .3s;}
header .headerWrap .rightBox .todayBtn:hover{background: url('../images/todayBtn_on.png') no-repeat center center;background-size: 136px 15px;transition: all .3s;}

/* footer */
footer{position: absolute;bottom: 0;left: 0;display: flex;align-items: center;justify-content: center;width: 100%;height: 135px;background-color: #070707;z-index: 100;}
footer .footerWrap{position: relative;display: flex;align-items: center;justify-content: center;width: 100%;padding: 0 40px;}
footer .footerWrap .kakaogames{margin-right: 32px;}
footer .footerWrap .KRAFTON{margin-right: 65px;}
footer .footerWrap .rightBox{display: flex;flex-direction: column;justify-content: center;}
footer .footerWrap .rightBox .footerItem{display: flex;align-items: center;margin-bottom: 14px;}
footer .footerWrap .rightBox .footerItem .term_of_service{position: relative;margin-right: 40px;}
footer .footerWrap .rightBox .footerItem .term_of_service::after{content: '';position: absolute;top: 50%;right: -20px;width: 1px;height: 12px;background-color: #4d4d4d;transform: translateY(-50%);}

/* top button */
.topBtn{position: fixed;bottom: 155px;right: 20px;display: flex;justify-content: center;align-items: flex-end;width: 66px;height: 77px;background: url('../images/topBtn_bg.png') no-repeat center center;background-size: 100% 100%;overflow: hidden;z-index: 100;}
.topBtn p{position: relative;display: flex;justify-content: center;align-items: flex-end;width: 100%;height: 60px;overflow: hidden;}
.topBtn p img{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}

/* section */
section{position: relative;width: 100%;}
section .bg{position: absolute;top: 0;left: 50%;width: 2560px;transform: translateX(-50%);z-index: 1;}
section.sec01{height: 1896px;}
section.sec02{height: 2307px;}
section.sec03{height: 1513px;}
section.sec04{height: 1209px;}
section.sec05{height: 1548px;}
section.sec06{height: 1319px;}

section .cont_wrap{position: relative;width: 100%;height: 100%;z-index: 2;}
section .cont_wrap .title{position: absolute;top: 0;left: 50%;display: flex;align-items: center;justify-content: center;z-index: 1;}
section .cont_wrap .scrollDown{position: absolute;top: 50%;left: 50%;display: block;width: 65px;height: 75px;transform: translate(-50%,-170%);z-index: 3;}
section .cont_wrap .scrollDown img{position: absolute;z-index: 1;transition: all .3s;}
section .cont_wrap .scrollDown img.hoverOn{opacity: 0;z-index: 2;}
section .cont_wrap .scrollDown:hover img.hoverOn{opacity: 1;transition: all .3s;}
section .cont_wrap .btnBox{position: absolute;top: 50%;left: 50%;width: 595px;height: 194px;z-index: 2;}
section .cont_wrap .btnBox .btnImage{width: 100%;height: 100%;}
section .cont_wrap .btnBox .btnImage p{position: absolute;}
section .cont_wrap .btnBox .btnImage .hoverOn img{opacity: 0;}
section .cont_wrap .btnBox a{position: absolute;top: 50%;left: 50%;display: block;}

section.sec01 .title{transform: translate(-50.6%,14%);}
section.sec01 .centernavBox{position: absolute;top: 50%;left: 50%;width: 2130px;height: 1223px;background: url('../images/sec_1_centernav_bg.png') no-repeat center center;background-size: 100% 100%;transform: translate(-59%,-12.2%);z-index: 2;}
section.sec01 .centernavBox ul{position: absolute;top: 50%;left: 50%;display: flex;flex-direction: column;gap: 27px;z-index: 3;margin: -150px 0 0 -375px;}
section.sec01 .centernavBox ul li{position: relative;display: flex;width: 1150px;height: 169px;}

section.sec01 .centernavBox ul li .subTitle{position: relative;display: flex;width: 230px;height: 100%;}
section.sec01 .centernavBox ul li .subTitle img{position: absolute;top: 50%;left: 50%;transform: translate(-48.6%,-50.7%);z-index: 1;}

section.sec01 .centernavBox ul li .navImage{position: relative;width: calc(1150px - 230px);height: 100%;}
section.sec01 .centernavBox ul li .navImage p{position: absolute;display: flex;}
section.sec01 .centernavBox ul li .navImage p.hoverOn img{opacity: 0;}

section.sec01 .centernavBox ul li .btnMore{position: absolute;top: 0;left: 50%;display: flex;width: calc(1150px - 230px);height: 100%;transform: translateX(-37.5%);z-index: 2;}
section.sec01 .centernavBox ul li .btnMore a{display: flex;height: 100%;}
section.sec01 .centernavBox ul li .btnMore a.cursorDefault{cursor: default;}
section.sec01 .centernavBox ul li:nth-child(1) .btnMore a{width: calc(100% / 1);}
section.sec01 .centernavBox ul li:nth-child(2) .btnMore a{width: calc(100% / 4);}
section.sec01 .centernavBox ul li:nth-child(3) .btnMore a{width: calc(100% / 2);}

section.sec02 .title{transform: translate(-50%,92%);}
section.sec02 .stampBox{position: absolute;top: 50%;left: 50%;display: flex;align-items: center;justify-content: center;transform: translate(-50%, -77%);}
section.sec02 .stampBox ul{display: flex;align-items: center;justify-content: center;gap: 8px;}
section.sec02 .stampBox ul li{position: relative;}
section.sec02 .stampBox ul li.comp::after{content: '';position: absolute;top: 50%;left: 50%;width: 271px;height: 204px;background: url('../images/missionComplete.png') no-repeat center center;background-size: 100% 100%;transform: translate(-50%,-70%);}
section.sec02 .stampGiftBox{position: absolute;top: 50%;left: 50%;transform: translate(-59.6%, -4%);}
section.sec02 .btnBox{width: 623px;height: 252px;transform: translate(-49.7%,358.5%);}
section.sec02 .btnBox a{width: 430px;height: 140px;transform: translate(-50%,-65%);}

section.sec03 .title{transform: translate(-50%,80%);}
section.sec03 .swiper-container{position: absolute;top: 50%;left: 50%;width: 1230px;height: 568px;overflow: inherit;transform: translate(-49.6%,-32%);}
section.sec03 .swiper-container::after{content: '';position: absolute;top: 50%;left: -9px;width: 63px;height: 134px;background: url('../images/sec_3_slide_ch.png') no-repeat center center;background-size: 100% 100%;transform: translate(0,-174%);z-index: 1;}
section.sec03 .swiper-container .swiper-wrapper .swiper-slide{opacity: 0 !important;transition: all .3s;}
section.sec03 .swiper-container .swiper-wrapper .swiper-slide.slide1 img{margin-top: 2px;}
section.sec03 .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-prev{opacity: 0 !important;transition: all .3s;}
section.sec03 .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-duplicate-next{opacity: 0 !important;transition: all .3s;}
section.sec03 .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active{opacity: 1 !important;transition: all .3s;}
section.sec03 .swiper-container .swiper-button-next, 
section.sec03 .swiper-container .swiper-container-rtl .swiper-button-prev{right: -60px;left: auto;width: 120px;height: 130px;background-image: url('../images/sec_3_next_btn.png');background-size: 100% 100%;transform: translateY(-40%);transition: all .3s;}
section.sec03 .swiper-container .swiper-button-next:hover,
section.sec03 .swiper-container .swiper-container-rtl .swiper-button-prev:hover{background-image: url('../images/sec_3_next_btn_on.png');background-size: 100% 100%;transition: all .3s;}
section.sec03 .swiper-container .swiper-button-prev, 
section.sec03 .swiper-container .swiper-container-rtl .swiper-button-next{right: auto;left: -70px;width: 120px;height: 130px;background-image: url('../images/sec_3_prev_btn.png');background-size: 100% 100%;transform: translateY(-40%);transition: all .3s;}
section.sec03 .swiper-container .swiper-button-prev:hover,
section.sec03 .swiper-container .swiper-container-rtl .swiper-button-next:hover{background-image: url('../images/sec_3_prev_btn_on.png');background-size: 100% 100%;transition: all .3s;}

section.sec04 .title{transform: translate(-50%,40%);}

section.sec05 .title{transform: translate(-50%,44%);}
section.sec05 .mapBox{position: absolute;top: 50%;left: 50%;width: 800px;height: 800px;transform: translate(-50%,-35%);}
section.sec05 .mapBox a{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;top: 50%;left: 50%;width: 164px;}
section.sec05 .mapBox a.markers_1{transform: translate(-184%,60%);}
section.sec05 .mapBox a.markers_2{transform: translate(-88%,540%);}
section.sec05 .mapBox a.markers_3{transform: translate(-17%,400%);}
section.sec05 .mapBox a.markers_4{transform: translate(14%,-10%);}
section.sec05 .mapBox a.markers_5{transform: translate(78%,-160%);}
section.sec05 .mapBox a p img{width: 100%;}
section.sec05 .mapBox a span{position: absolute;top: 50%;left: 50%;display: block;width: 40px;height: 40px;background: url('../images/sec_5_markers.png') no-repeat center center;background-size: 100% 100%;transform: translate(-62%,62%);}
section.sec05 .mapBox a:hover span{display: block;background: url('../images/sec_5_markers_on.png') no-repeat center center;background-size: 100% 100%;}

/* 공통 */
#popupLayer{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;}
#popupLayer .dim{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0,0,0,0.7);overflow: hidden;}
#popupLayer .pop_box{position: absolute;top: 50%;left: 50%;width: 1143px;height: 843px;transform: translate(-50%,-50%);}
#popupLayer .pop_box .closeBtn{position: absolute;top: 20px;right: 75px;display: block;width: 40px;height: 41px;background: url('../images/popup_close.png') no-repeat center center;background-size: 100% 100%;transition: all .3s;}
#popupLayer .pop_box .closeBtn:hover{background: url('../images/popup_close_on.png') no-repeat center center;background-size: 100% 100%;transition: all .3s;}
#popupLayer .pop_box .pop_cont{width: 100%;height: 100%;}

section.sec06 .title{transform: translate(-50%,62%);}
section.sec06 .btnBox{transform: translate(-49.7%,-135%);}
section.sec06 .btnBox a{width: 405px;height: 120px;transform: translate(-51%,-50%);}


@media (max-width: 1200px){
  /* wrapper */
  #wrapper{position: relative;width: 100%;height: auto;background-color: #070707;}
  #wrapper #wrap{position: relative;width: 100%;height: 100%;}
  #wrapper #wrap.active{width: 100%;height: 100%;filter: blur(10px);}
  #wrapper #wrap.active::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.4);z-index: 100;}
  
  /* nav */
  nav{position: fixed;top: 0;left: -40vw;width: 40vw;height: 100vh;background-color: #000000;z-index: 200;}
  nav img{width: 100%;}
  nav .navWrap{position: relative;display: flex;flex-direction: column;align-items: center;width: 100%;height: 100%;padding: 11.67vw 0;}
  nav .navWrap .closeBtn{position: absolute;top: 3.33vw;right: 3.33vw;display: block;width: 3.5vw;}
  nav .navWrap .closeBtn img{width: 100%;}
  nav .navWrap .nevLogo{width: 33.33vw;}
  nav .navWrap .nevLogo img{width: 100%;}
  nav .navWrap > ul{display: flex;flex-direction: column;align-items: center;justify-content: center;}
  nav .navWrap > ul > li{margin-top: 7.08vw;text-align: center;}
  nav .navWrap > ul > li:nth-child(2){margin-top: 6.42vw;}
  nav .navWrap > ul > li > a{display: inline-block;}
  nav .navWrap > ul > li:nth-child(1) > a img{width: 15.58vw;}
  nav .navWrap > ul > li:nth-child(2) > a img{width: 5.08vw;}
  nav .navWrap > ul > li > ul{display: none;margin-top: 1.67vw;}
  nav .navWrap > ul > li > ul li{text-align: center;}
  nav .navWrap > ul > li > ul li a{position: relative;font-size: 1.67vw;line-height: 3.5vw;color: transparent;margin-right: 1.67vw;overflow: hidden;transition: all .3s;}
  nav .navWrap > ul > li > ul li a::before{content: '';opacity: 0;position: absolute;top: 50%;left: -2.5vw;width: 1.33vw;height: 0.17vw;background: url('../images/nav_hover_1.png') no-repeat;background-size: 100% 100%;transform: translateY(-50%);}
  nav .navWrap > ul > li > ul li a::after{content: '';opacity: 0;position: absolute;top: 50%;left: -2.5vw;width: 3.08vw;height: 2.42vw;background: url('../images/nav_hover_2.png') no-repeat;background-size: 100% 100%;transform: translateY(-50%);}
  nav .navWrap > ul > li > ul li a:hover{transition: all .8s;}
  nav .navWrap > ul > li > ul li a:hover::before{content: '';opacity: 1;transition: all .8s;}
  nav .navWrap > ul > li > ul li a:hover::after{content: '';opacity: 1;left: calc(100% + 0.67vw);transition: all .8s;}
  
  nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(1) a{background: url('../images/nav_menu_1_1.png') no-repeat;background-position: 50% 0.58vw;background-size: 23vw 12vw;}
  nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(2) a{background: url('../images/nav_menu_1_1.png') no-repeat;background-position: 50% -2.92vw;background-size: 23vw 12vw;}
  nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(3) a{background: url('../images/nav_menu_1_1.png') no-repeat;background-position: 50% -6.5vw;background-size: 23vw 12vw;}
  nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(4) a{background: url('../images/nav_menu_1_1.png') no-repeat;background-position: 50% -10vw;background-size: 23vw 12vw;}
  nav .navWrap > ul > li:nth-child(2) > ul li:nth-child(1) a{background: url('../images/nav_menu_2_1.png') no-repeat;background-position: 50% 0.58vw;background-size: 15.42vw 8.5vw;}
  nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(1) a:hover{background: url('../images/nav_menu_1_1_on.png') no-repeat;background-position: 50% 0.58vw;background-size: 23vw 12vw;}
  nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(2) a:hover{background: url('../images/nav_menu_1_1_on.png') no-repeat;background-position: 50% -2.92vw;background-size: 23vw 12vw;}
  nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(4) a:hover{background: url('../images/nav_menu_1_1_on.png') no-repeat;background-position: 50% -6.5vw;background-size: 23vw 12vw;}
  nav .navWrap > ul > li:nth-child(1) > ul li:nth-child(3) a:hover{background: url('../images/nav_menu_1_1_on.png') no-repeat;background-position: 50% -10vw;background-size: 23vw 12vw;}
  nav .navWrap > ul > li:nth-child(2) > ul li:nth-child(1) a:hover{background: url('../images/nav_menu_2_1_on.png') no-repeat;background-position: 50% 0.58vw;background-size: 15.42vw 8.5vw;}
  
  /* header */
  header{position: fixed;display: flex;align-items: center;justify-content: center;width: 100%;height: 6.25vw;background-color: #070707;z-index: 100;}
  header .headerWrap{position: relative;display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 0 3.33vw;}
  header .headerWrap .menuBtn{display: block;width: 2vw;height: 1.58vw;background: url('../images/menuBtn.png') no-repeat center center;background-size: 100% 100%;transition: all .3s;}
  header .headerWrap .menuBtn:hover{background: url('../images/menuBtn_on.png') no-repeat center center;background-size: 100% 100%;transition: all .3s;}
  header .headerWrap .logo{position: absolute;top: 50%;left: 50%;width: 9.58vw;transform: translate(-50%,-50%);}
  header .headerWrap .logo img{width: 100%;}
  header .headerWrap .rightBox{display: flex;align-items: center;justify-content: center;}
  header .headerWrap .rightBox a{position: relative;display: block;}
  header .headerWrap .rightBox .homeBtn{width: 8.67vw;height: 1.33vw;margin-right: 4.58vw;background: url('../images/homeBtn.png') no-repeat center center;background-size: 8.67vw 1.33vw;transition: all .3s;}
  header .headerWrap .rightBox .homeBtn:hover{background: url('../images/homeBtn_on.png') no-repeat center center;background-size: 8.67vw 1.33vw;transition: all .3s;}
  header .headerWrap .rightBox .homeBtn::after{content: '';position: absolute;top: 50%;right: -2.25vw;width: 1px;height: 1vw;background-color: #4d4d4d;transform: translateY(-50%);}
  header .headerWrap .rightBox .todayBtn{width: 11.33vw;height: 1.25vw;background: url('../images/todayBtn.png') no-repeat center center;background-size: 11.33vw 1.25vw;transition: all .3s;}
  header .headerWrap .rightBox .todayBtn:hover{background: url('../images/todayBtn_on.png') no-repeat center center;background-size: 11.33vw 1.25vw;transition: all .3s;}
  
  /* footer */
  footer{position: absolute;bottom: 0;left: 0;display: flex;align-items: center;justify-content: center;width: 100%;height: 11.25vw;background-color: #070707;z-index: 100;}
  footer .footerWrap{position: relative;display: flex;align-items: center;justify-content: center;width: 100%;padding: 0 3.33vw;}
  footer .footerWrap a img{width: 100%;}
  footer .footerWrap .kakaogames{width: 12.75vw;margin-right: 2.67vw;}
  footer .footerWrap .KRAFTON{width: 8.67vw;margin-right: 5.42vw;}
  footer .footerWrap .rightBox{display: flex;flex-direction: column;justify-content: center;}
  footer .footerWrap .rightBox .footerItem{display: flex;align-items: center;margin-bottom: 1.17vw;}
  footer .footerWrap .rightBox .footerItem .term_of_service{position: relative;width: 9.42vw;margin-right: 3.33vw;}
  footer .footerWrap .rightBox .footerItem .term_of_service::after{content: '';position: absolute;top: 50%;right: -1.67vw;width: 1px;height: 1vw;background-color: #4d4d4d;transform: translateY(-50%);}
  footer .footerWrap .rightBox .footerItem .privacy_policy{width: 9.92vw;}
  footer .footerWrap .rightBox .footerCopyright img{width: 29.92vw;}
  
  /* top button */
  .topBtn{position: fixed;bottom: 12.92vw;right: 1.67vw;display: flex;justify-content: center;align-items: flex-end;width: 5.5vw;height: 6.42vw;background: url('../images/topBtn_bg.png') no-repeat center center;background-size: 100% 100%;overflow: hidden;z-index: 100;}
  .topBtn p{position: relative;display: flex;justify-content: center;align-items: flex-end;width: 100%;height: 5vw;overflow: hidden;}
  .topBtn p img{position: absolute;bottom: 0;left: 50%;width: 3vw;transform: translateX(-50%);}
  
  /* section */
  section{position: relative;width: 100%;}
  section .bg{position: absolute;top: 0;left: 50%;width: auto;height: 100%;transform: translateX(-50%);z-index: 1;}
  section .bg img{height: 100%;}
  section.sec01{height: 158vw;}
  section.sec02{height: 192.25vw;}
  section.sec03{height: 102.08vw;}
  section.sec04{height: 100.75vw;}
  section.sec05{height: 129vw;}
  section.sec06{height: 109.92vw;}
  
  section .cont_wrap{position: relative;width: 100%;height: 100%;z-index: 2;}
  section .cont_wrap .title{position: absolute;top: 0;left: 50%;display: flex;align-items: center;justify-content: center;z-index: 1;}
  section .cont_wrap .scrollDown{position: absolute;top: 50%;left: 50%;display: block;width: 5.42vw;height: 6.25vw;transform: translate(-50%,-170%);z-index: 3;}
  section .cont_wrap .scrollDown img{position: absolute;width: 100%;z-index: 1;transition: all .3s;}
  section .cont_wrap .scrollDown img.hoverOn{opacity: 0;z-index: 2;}
  section .cont_wrap .scrollDown:hover img.hoverOn{opacity: 1;transition: all .3s;}
  section .cont_wrap .btnBox{position: absolute;top: 50%;left: 50%;width: 49.58vw;height: 16.17vw;z-index: 2;}
  section .cont_wrap .btnBox .btnImage{width: 100%;height: 100%;}
  section .cont_wrap .btnBox .btnImage p{position: absolute;}
  section .cont_wrap .btnBox .btnImage p img{width: 100%;}
  section .cont_wrap .btnBox .btnImage .hoverOn img{opacity: 0;}
  section .cont_wrap .btnBox a{position: absolute;top: 50%;left: 50%;display: block;}
  
  section.sec01 .title{width: 140.42vw;transform: translate(-50.6%,14%);}
  section.sec01 .title img{width: 100%;}
  section.sec01 .centernavBox{position: absolute;top: 50%;left: 50%;width: 177.5vw;height: 101.92vw;background: url('../images/sec_1_centernav_bg.png') no-repeat center center;background-size: 100% 100%;transform: translate(-59%,-12.2%);z-index: 2;}
  section.sec01 .centernavBox ul{position: absolute;top: 50%;left: 50%;display: flex;flex-direction: column;gap: 2.25vw;z-index: 3;margin: -12.5vw 0 0 -31.25vw;}
  section.sec01 .centernavBox ul li{position: relative;display: flex;width: 95.83vw;height: 14.08vw;}
  
  section.sec01 .centernavBox ul li .subTitle{position: relative;display: flex;width: 19.17vw;height: 100%;}
  section.sec01 .centernavBox ul li .subTitle img{position: absolute;top: 50%;left: 50%;width: 190%;transform: translate(-48.6%,-50.7%);z-index: 1;}
  
  section.sec01 .centernavBox ul li .navImage{position: relative;width: calc(95.83vw - 19.17vw);height: 100%;}
  section.sec01 .centernavBox ul li .navImage p{position: absolute;display: flex;}
  section.sec01 .centernavBox ul li:nth-child(1) .navImage p{width: calc(100% / 1);}
  section.sec01 .centernavBox ul li:nth-child(2) .navImage p{width: calc(100% / 4);}
  section.sec01 .centernavBox ul li:nth-child(3) .navImage p{width: calc(100% / 2);}
  section.sec01 .centernavBox ul li .navImage p img{width: 100%;}
  section.sec01 .centernavBox ul li .navImage p.hoverOn img{opacity: 0;}
  
  section.sec01 .centernavBox ul li .btnMore{position: absolute;top: 0;left: 50%;display: flex;width: calc(95.83vw - 19.17vw);height: 100%;transform: translateX(-37.5%);z-index: 2;}
  section.sec01 .centernavBox ul li .btnMore a{display: flex;height: 100%;}
  section.sec01 .centernavBox ul li .btnMore a.cursorDefault{cursor: default;}
  section.sec01 .centernavBox ul li:nth-child(1) .btnMore a{width: calc(100% / 1);}
  section.sec01 .centernavBox ul li:nth-child(2) .btnMore a{width: calc(100% / 4);}
  section.sec01 .centernavBox ul li:nth-child(3) .btnMore a{width: calc(100% / 2);}
  
  section.sec02 .title{width: 80.42vw;transform: translate(-50%,92%);}
  section.sec02 .title img{width: 100%;}
  section.sec02 .stampBox{position: absolute;top: 50%;left: 50%;display: flex;align-items: center;justify-content: center;transform: translate(-50%, -77%);}
  section.sec02 .stampBox ul{display: flex;align-items: center;justify-content: center;gap: 0.67vw;}
  section.sec02 .stampBox ul li{position: relative;width: 25.33vw;}
  section.sec02 .stampBox ul li img{width: 100%;}
  section.sec02 .stampBox ul li.comp::after{content: '';position: absolute;top: 50%;left: 50%;width: 22.58vw;height: 17vw;background: url('../images/missionComplete.png') no-repeat center center;background-size: 100% 100%;transform: translate(-50%,-70%);}
  section.sec02 .stampGiftBox{position: absolute;top: 50%;left: 50%;width: 177.5vw;transform: translate(-56.1%, -4%);}
  section.sec02 .stampGiftBox img{width: 94%;}
  section.sec02 .btnBox{width: 51.92vw;height: 21vw;transform: translate(-49.7%,358.5%);}
  section.sec02 .btnBox a{width: 35.83vw;height: 11.67vw;transform: translate(-50%,-65%);}
  
  section.sec03 .title{width: 79.42vw;transform: translate(-50%,50%);}
  section.sec03 .title img{width: 100%;}
  section.sec03 .swiper-container{position: absolute;top: 50%;left: 50%;width: 84.5vw;height: 47.33vw;overflow: inherit;transform: translate(-49.6%,-25%);}
  section.sec03 .swiper-container::after{content: '';position: absolute;top: 50%;left: -0.55vw;width: 5.25vw;height: 11.17vw;background: url('../images/sec_3_slide_ch.png') no-repeat center center;background-size: 80%;transform: translate(0,-195%);z-index: 1;}
  section.sec03 .swiper-container .swiper-wrapper .swiper-slide{opacity: 0 !important;transition: all .3s;}
  section.sec03 .swiper-container .swiper-wrapper .swiper-slide img{width: 100%;}
  section.sec03 .swiper-container .swiper-wrapper .swiper-slide.slide1 img{margin-top: 0.17vw;}
  section.sec03 .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-prev{opacity: 0 !important;transition: all .3s;}
  section.sec03 .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-duplicate-next{opacity: 0 !important;transition: all .3s;}
  section.sec03 .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active{opacity: 1 !important;transition: all .3s;}
  section.sec03 .swiper-container .swiper-button-next, 
  section.sec03 .swiper-container .swiper-container-rtl .swiper-button-prev{right: -5vw;left: auto;width: 10vw;height: 10.83vw;background-image: url('../images/sec_3_next_btn.png');background-size: 100% 100%;transform: translateY(-40%);transition: all .3s;}
  section.sec03 .swiper-container .swiper-button-next:hover,
  section.sec03 .swiper-container .swiper-container-rtl .swiper-button-prev:hover{background-image: url('../images/sec_3_next_btn_on.png');background-size: 100% 100%;transition: all .3s;}
  section.sec03 .swiper-container .swiper-button-prev, 
  section.sec03 .swiper-container .swiper-container-rtl .swiper-button-next{right: auto;left: -5.83vw;width: 10vw;height: 10.83vw;background-image: url('../images/sec_3_prev_btn.png');background-size: 100% 100%;transform: translateY(-40%);transition: all .3s;}
  section.sec03 .swiper-container .swiper-button-prev:hover,
  section.sec03 .swiper-container .swiper-container-rtl .swiper-button-next:hover{background-image: url('../images/sec_3_prev_btn_on.png');background-size: 100% 100%;transition: all .3s;}
  
  section.sec04 .title{width: 86.58vw;transform: translate(-50%,40%);}
  section.sec04 .title img{width: 100%;}
  
  section.sec05 .title{width: 82.58vw;transform: translate(-50%,44%);}
  section.sec05 .title img{width: 100%;}
  section.sec05 .mapBox{position: absolute;top: 50%;left: 50%;width: 66.67vw;height: 66.67vw;transform: translate(-50%,-35%);}
  section.sec05 .mapBox a{width: 13.67vw;}
  section.sec05 .mapBox a span{width: 3.33vw;height: 3.33vw;}

  /* 공통 */
  #popupLayer .pop_box{position: absolute;top: 50%;left: 50%;width: 95.25vw;height: 70.25vw;transform: translate(-50%,-50%);}
  #popupLayer .pop_box .closeBtn{position: absolute;top: 1.67vw;right: 6.25vw;display: block;width: 3.33vw;height: 3.42vw;background: url('../images/popup_close.png') no-repeat center center;background-size: 100% 100%;transition: all .3s;}
  #popupLayer .pop_box img{width: 100%;}

  section.sec06 .title{width: 92.75vw;transform: translate(-50%,62%);}
  section.sec06 .title img{width: 100%;}
  section.sec06 .btnBox{transform: translate(-49.7%,-135%);}
  section.sec06 .btnBox a{width: 33.75vw;height: 10vw;transform: translate(-51%,-50%);}
}