@charset "utf-8";
@font-face {
    font-family: 'NotoBL';
    font-style: normal;
    font-weight: 500;
    src: url(../../fonts/NotoSans-Black.woff2) format("woff2"), url(../../fonts/NotoSansCJKkr-Black) format("opentype")
}
@font-face{font-family:'NotoR';font-style:normal;font-weight:500;src:url(../../fonts/NotoSansKR-Regular.woff2) format("woff2"),url(../../fonts/NotoSansKR-Regular.woff) format("woff"),url(../../fonts/NotoSansKR-Regular.otf) format("opentype")}
@font-face{font-family:'NotoM';font-style:normal;font-weight:500;src:url(../../fonts/NotoSansKR-Medium.woff2) format("woff2"),url(../../fonts/NotoSansKR-Medium.woff) format("woff"),url(../../fonts/NotoSansKR-Medium.otf) format("opentype")}
@font-face{font-family:'NotoB';font-style:normal;font-weight:700;src:url(../../fonts/NotoSansKR-Bold.woff2) format("woff2"),url(./.../fonts/NotoSansKR-Bold.woff) format("woff"),url(../../fonts/NotoSansKR-Bold.otf) format("opentype")}
::-webkit-scrollbar { 
    display: none; 
}
/* css Reset */
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block}

body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,select,button,code,label, em, span {
margin:0;padding:0;vertical-align:top;font-family:NotoR,arial,sans-serif;color:#0006;word-break:break-all;text-rendering:optimizeLegibility;}

form{display:inline;margin:none}
img,fieldset{border:0}
hr{display:none}
li{list-style:none}
em,address{font-style:normal}
label,input,select,textarea{vertical-align:middle;-webkit-appearance:none;}
legend{position:absolute;left:-5000px;font-size:0;overflow:hidden}
caption{position:relative;left:-5000px;height:0;line-height:0;text-indent:-5000px;overflow:hidden}
a:link,a:active,a:visited,a{text-decoration:none;color:inherit}
a:hover{text-decoration:none;color:#58accc}
label, input, button, select, img {vertical-align:top}

.invisible{position:absolute;left:-5000px;height:0;line-height:0;overflow:hidden}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

input[type=radio]{}
input[type=checkbox]{}

body,html{overflow:hidden;height:100%;min-width:1280px;min-height:765px;background:#0e4a6f}


.gnb{z-index:9;position:absolute;top:0;bottom:0;right:0;width:226px;height:765px;margin:auto 0;}
.gnb a{            display: block;
    width: 100%;
    height: 100%;
    font-size: 1.4em;
    color: white;
    font-weight: 500;
    position: relative;
    /*top: 37.5%;*/
    text-align: center;text-shadow: 0 0 2px rgba(255,255,255,0.5);}
.gnb li{position:relative;top:0;width:170px;height:128px;margin-bottom:-32px;}

.main .gnb li{position:absolute;opacity:0;-webkit-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-khtml-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;}
.main .gnb li.motion1{position:relative;opacity:1;-webkit-animation:gnbmoton1 .1s ;animation:gnbmoton1 .1s ;animation-timing-function:ease-in-out;animation-duration:.5s;}
.main .gnb li.motion{position:relative;opacity:1;}
.main .gnb li:nth-child(2).motion{-webkit-animation:gnbmoton2 .1s ;animation:gnbmoton2 .1s ;animation-timing-function:ease-in-out;animation-duration:.7s;}
.main .gnb li:nth-child(3).motion{-webkit-animation:gnbmoton3 .1s ;animation:gnbmoton3 .1s ;animation-timing-function:ease-in-out;animation-duration:.7s;}
.main .gnb li:nth-child(4).motion{-webkit-animation:gnbmoton4 .1s ;animation:gnbmoton4 .1s ;animation-timing-function:ease-in-out;animation-duration:1s;}
.main .gnb li:nth-child(5).motion{-webkit-animation:gnbmoton5 .1s ;animation:gnbmoton5 .1s ;animation-timing-function:ease-in-out;animation-duration:1s;}
.main .gnb li:nth-child(6).motion{-webkit-animation:gnbmoton6 .1s ;animation:gnbmoton6 .1s ;animation-timing-function:ease-in-out;animation-duration:1s;}

@-webkit-keyframes gnbmoton1{from {top:-5px}to {top:0}}@keyframes gnbmoton1{from {top:-5px}to {top:0}}
@-webkit-keyframes gnbmoton2{from {top:-100px}to {top:0}}@keyframes gnbmoton2{from {top:-100px}to {top:0}}
@-webkit-keyframes gnbmoton3{from {top:-150px}to {top:0}}@keyframes gnbmoton3{from {top:-150px}to {top:0}}
@-webkit-keyframes gnbmoton4{from {top:-200px}to {top:0}}@keyframes gnbmoton4{from {top:-200px}to {top:0}}
@-webkit-keyframes gnbmoton5{from {top:-250px}to {top:0}}@keyframes gnbmoton5{from {top:-250px}to {top:0}}
@-webkit-keyframes gnbmoton6{from {top:-300px}to {top:0}}@keyframes gnbmoton6{from {top:-300px}to {top:0}}

.cons{position:relative;max-width:1800px;height:100%;margin:0 auto;}

.license p{position:relative;min-width:1280px;max-width:1608px;margin:0 auto;}
.license a{display:block;width:262px;height:59px;font-size:0;}
.license.active{height:175px;}


.main.motion{opacity:1;}
.main .vod{position:absolute;top:0;left:0;bottom:0;right:0;width:203px;height:204px;margin:auto;opacity:0;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-khtml-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.main .btn{position:absolute;left:0;bottom:40px;right:0;width:455px;height:148px;margin:0 auto;opacity:0;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-khtml-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.main .vod.motion{opacity:1;}
.main .vod.rotate{-webkit-animation: rotate .5s ;animation:rotate .5s;}
.main .btn.motion{opacity:1;}
@-webkit-keyframes rotate{from {transform: rotate(0deg);}to {transform: rotate(720deg);}}
@keyframes rotate{from {transform: rotate(0deg);}to {transform: rotate(720deg);}}

.obj_g div{opacity:0;-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-khtml-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}




.obj_g .obj1.motion{opacity:1;left:0}
.obj_g .obj2.motion{opacity:1;bottom:0;}
.obj_g .obj3.motion{opacity:1;right:0;}
.obj_g .obj4.motion{opacity:1;}

.game,.world,.community,.hunter,.media{opacity:0;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-khtml-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.game.motion,.world.motion,.community.motion,.hunter.motion,.media.motion{opacity:1;}


.game_box{display:table;width:920px;height:100%;margin:0 auto;}
.game_box .box{display:table-cell;width:100%;text-align:center;vertical-align:middle;}
.game_box .txt{    margin-bottom: 30px;
    color: white;
    font-weight: 600;font-size: 17px;}
.game_box .slider{margin-bottom:30px;}
.game_box .slider .bx-wrapper{position:relative;width:746px;height:418px;margin:auto;}
.game_box .slider .bx-viewport{border:3px solid #1fadbe;-webkit-box-shadow:10px 9px 18px -2px rgba(0,0,0,0.5);box-shadow:10px 9px 18px -2px rgba(0,0,0,0.5);}

.bx-prev,.bx-next{position:absolute;top:0;bottom:0;display:inline-block;width:58px;height:65px;margin:auto 0;font-size:0;}


.disabled{display:none}
.bx-pager{margin-top:27px;text-align:center;}
.bx-pager-item{display:inline-block;}
.bx-pager-item ~ .bx-pager-item{margin-left:32px;}
.bx-pager-item a{display:block;width:13px;height:13px;font-size:0;border-radius:100%;background:#b7c7cf}
.bx-pager-item .active{background:#fff}


.world_box{height:100%;}


.world_box .txt{position:absolute;top:30px;width:100%;text-align:center;}
.world_box .links{position:relative;top:30%;width:40%;height:55%;margin:0 auto;}
.world_box .links a{    position: absolute;
    font-weight: 600;
    font-size: 0;
    color: white;
    text-shadow: 4px 3px 5px rgba(0,0,0,0.5);
    }
.world_box .links .l1{width:50%;height:23%;top:0;left:0;right:0;margin:0 auto;}
.world_box .links .l2{width:29%;height:35%;left:0;top:0;bottom:0;margin:auto 0;}
.world_box .links .l3{width:30%;height:35%;left:0;right:0;top:0;bottom:0;margin:auto}
.world_box .links .l4{width:29%;height:35%;right:0;top:0;bottom:0;margin:auto 0}
.world_box .links .l5{width:50%;height:23%;left:0;right:0;bottom:0;margin:0 auto;}
.pop_world .pop_con div{
	top: 50.3%;
    left: 50%;
	position: fixed;
    width: 500px;
	height:400px;
	font-size: 0.85em;
    color: white;
	line-height: 2.4em;
    letter-spacing: -0.03em;
	overflow-y: auto;
}
.pop_world:nth-child(3) .pop_con div {
    transform: translate(-6.3%,-49.8%);
}
.pop_world:nth-child(4) .pop_con div {
    transform: translate(-5.3%,-52.1%);
}
.pop_world:nth-child(5) .pop_con div {
    transform: translate(-5.2%,-51.5%);
}
.pop_world:nth-child(6) .pop_con div {
    transform: translate(-3.7%,-51.8%);
}
.pop_world:nth-child(7) .pop_con div {
    transform: translate(-5.2%,-50.9%);
}


.community_box{display:table;width:920px;height:100%;margin:0 auto;}
.community_box .box{display:table-cell;width:100%;text-align:center;vertical-align:middle;}
.community_box .txt{margin-bottom:-40px;}
.community_box .sns{width:750px;margin:0 auto 10px;text-align:right}
.community_box .sns a~a{margin-left:5px;}
.community_box .iframe_box{
	position:relative;width:900px;height:79%;padding:10px;margin:0 auto;box-sizing:border-box;background:#fff;border:3px solid #1fadbe;-webkit-box-shadow:10px 9px 18px -2px rgba(0,0,0,0.5);box-shadow:10px 9px 18px -2px rgba(0,0,0,0.5);
	}


.media_box{display:table;width:920px;height:100%;margin:0 auto;}
.media_box .box{display:table-cell;width:100%;text-align:center;vertical-align:middle;}
.box .txt_title{
	font-family:'NotoBL';
	font-weight: 900;
	font-size:87px;
	color:white}
.box .line{
	content: " ";
	height: 3px;
	width: 388px;
}
.box .txt_desc{
	font-size:17px;
	color:white;
	    margin-bottom: 4vh;
    margin-top: 2vh;
}
.media_box .slider{margin:0 auto 30px;font-size:0;width:746px;height:418px;background:#000;border:3px solid #1fadbe;-webkit-box-shadow:10px 9px 18px -2px rgba(0,0,0,0.5);box-shadow:10px 9px 18px -2px rgba(0,0,0,0.5);}
.media_box .slider .bx-wrapper{position:relative;width:746px;height:418px;margin:auto;}
.media_box .slider .bx-viewport{background:#000;width:746px;height:418px;}
.media_box .slider iframe{width:746px;height:418px;}

.tabs{margin:23px 0 0 0;text-align:center;}
.tabs li{display:inline-block;width:65px;height:83px;margin-bottom:1em}
.tabs li p{
	color: white;
    margin-top: -0.4em;
	opacity:0.7;
}
.tabs li~li{margin-left:33px;}
.tabs li a{display:block;height:100%;font-size:0;opacity:.7}
.tabs li a.current{opacity:1}






.hunter_box{display:table;width:582px;height:100%;margin:0 auto;}
.hunter_box .box{display:table-cell;width:100%;text-align:center;vertical-align:middle;}
.hunter_box .txt{margin-bottom:30px;}
.hunter_box .list{overflow:hidden;width:582px;}
.hunter_box .list .item{float:left;margin:15px 15px 0 0;}
.hunter_box .list .item img{width:184px;height:129px;}
.hunter_box .list .item:nth-child(3n){margin-right:0}
.hunter_box .slider{display:none;margin-bottom:30px;}
.hunter_box .slider .bx-wrapper{position:relative;width:582px;height:415px;margin:auto;}
.hunter_box .slider .bx-viewport{}

.radio_box input[type=radio]{opacity:0;}
.radio_box{position:relative;}
.radio_box label{display:inline-block;padding-left:32px;vertical-align:middle;}
.radio_box label img{position:relative;}
.radio_box input[type=radio]{position:absolute;top:0;left:0;}
.radio_box label:before{content:"";position:absolute;top:0;left:0;width:18px;height:18px;border:1px solid #000;border-radius:100%;}
.radio_box input[type="radio"]:checked + label:after{content:"";position:absolute;top:5px;left:5px;width:10px;height:10px;border-radius:100%;background:#000;}
.radio_box ~ .radio_box{margin-left:40px;}

.chk_box{position:relative;}
.chk_box input[type=checkbox]{opacity:0;}
.chk_box{position:relative;}
.chk_box label{display:inline-block;padding-left:22px;vertical-align:middle;}
.chk_box input[type="checkbox"]{position:absolute;top:0;left:0;}
.chk_box label:before{content:"";position:absolute;top:-9px;left:0;width:15px;height:15px;border:1px solid #000;}
.chk_box input[type="checkbox"]:checked + label:after{content:"";position:absolute;top:-5px;left:4px;width:9px;height:9px;background:#000;}

.pop_container{display:none;position:fixed;width:100%;height:100%;top:0;left:0;z-index:999999;}
.pop_container:after{content:"";position:absolute;width:100%;height:100%;background:#000;opacity:.75;}
.pop_container .pop_emved{position:absolute;z-index:99;width:1366px;height:768px;top:0;left:0;right:0;bottom:0;margin:auto;border:2px solid #2eb9c7;text-align:center;background:#000;}
.pop_container .btn_popClose{position:absolute;top:0;right:-75px;}

.pop_msg{z-index:999;position:fixed;width:100%;height:100%;top:0;left:0}
.pop_msg:before{content:"";position:fixed;width:100%;height:100%;background:#000;opacity:.7}
.pop_msg .msg{z-index:999;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}
.pop_msg .btn_close{position:absolute;right:0;bottom:0;width:75px;height:75px;font-size:0;}

#popDone .btn_close{width:272px;height:75px;left:0;bottom:25px;margin:0 auto;}

.pop_book{z-index:99;position:fixed;width:100%;height:100%;top:0;left:0}
.pop_book:before{content:"";position:fixed;width:100%;height:100%;background:#000;opacity:.7}
.pop_book .btn_close{z-index:1;position:absolute;top:168px;right:0}

.pop_book .register_ui *{vertical-align:middle;}
.pop_book .box{width:870px;padding-top:755px;margin-left:90px;text-align:center;}

.pop_book .input input{width:457px;height:58px;padding-left:58px;border:0;border-left:1px solid #2e9d9f;color:#666;box-sizing:border-box;font-size:22px;font-family:'NotoR';outline:none;background:none;}
.pop_book .chk{text-align:center;}
.pop_book .agree_box{font-size:0;}
.pop_book .agree_box li{display:inline-block;}
.pop_book .agree_box li~li{margin-left:22px;}
.pop_book .agree_box a{margin-left:5px;}
.pop_book .btn{margin-top:35px;}

#popDone .msg{width:843px;height:611px;}
#popRefer .msg{width:836px;height:567px;}
#agree01 .msg{width:836px;height:522px;}
#agreeChk .msg{width:702px;height:80px;}
#storeChk .msg{width:702px;height:80px;}
#validChk .msg{width:702px;height:80px;}
#isPhone .msg{width:702px;height:80px;}

.pop_world{z-index:999;position:fixed;width:100%;height:100%;top:0;left:0}
.pop_world:before{content:"";position:fixed;width:100%;height:100%;background:#000;opacity:.7}
.pop_world .pop_con{z-index:999;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:978px;height:463px;}
.pop_world .btn_close{position:absolute;right:0;top:-40px;}

.pop_hunter{z-index:999;position:fixed;width:100%;height:100%;top:0;left:0}
.pop_hunter:before{content:"";position:fixed;width:100%;height:100%;background:#000;opacity:.7}
.pop_hunter .pop_con{z-index:999;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:750px;height:424px;}
.pop_hunter .btn_close{position:absolute;width:55px;height:55px;right:0;top:0;font-size:0;}


@media screen and (min-width:2000px){
	.community_box .iframe_box{height:83%;}
}
@media screen and (max-width:2000px){
	.gnb{width:170px;height:574px;background-size:cover}

	.main .btn{width:342px;height:112px;}
	.main .btn img{width:100%}
	.main .btn{bottom:15px;}
	.main .vod{width:153px;height:153px;}
	.main .vod img{width:100%}

	.pop_container .pop_emved{width:1017px;height:571px;}
	.pop_container .btn_popClose{right:-55px;}
	.pop_container .btn_popClose img{width:45px;}


	.license p{max-width:1210px;}
	.license a{width:197px;height:44px;}
	.license.active{height:131px;}

	.pop_book .btn_close{top:130px;right:-50px;}
	.pop_book .register_ui{top:0;bottom:0;width:720px;height:806px;margin-left:-394px;background-size:cover;}
	.pop_book .box{width:653px;padding-top:560px;margin-left:67px;}
	.pop_book .input{width:396px;height:47px;padding-left:50px;border:1px solid #2e9d9f;background-size:22px auto;background-position:16px 50%}
	.pop_book .input input{width:343px;height:45px;padding-left:28px;font-size:18px;}
	.pop_book .agree_box li~li{margin-left:12px;}
	.pop_book .agree_box .txt{height:14px;}
	.pop_book .radio_box label img{width:75%}
	.radio_box label{padding-left:17px}
	.pop_book .btn{margin-top:15px;}
	.pop_book .btn img{width:280px;}

	.radio_box.radio_box{margin-left:10px;}

	.pop_msg img{width:100%}

	#popDone .msg{width:625px;height:452px;}
	#popRefer .msg{width:625px;height:424px;}
	#agree01 .msg{width:625px;height:390px;}
	#agreeChk .msg{width:527px;height:61px;}
	#storeChk .msg{width:527px;height:61px;}
	#validChk .msg{width:527px;height:61px;}
	#isPhone .msg{width:527px;height:61px;}

}
@media screen and (max-width:1800px){
	.cons{margin:0 50px;}
}
@media screen and (max-width:1300px){
	.main .vod{width:145px;height:146px;}
	.main .btn{width:340px;height:110px;}
	
	/*.gnb{display:none;}
	.license{display:none;}*/
}