@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');

*{-webkit-text-size-adjust:none;}
html,body{width:100%;height:100%;margin:0;padding:0;}
body{margin:0;padding:0;font-family:'Noto Sans TC',sans-serif;font-size:16px;line-height:1.5;background:#10162c url("//image.tw.ncsoft.com/aion/preview/220727_snipe/bg.jpg") no-repeat 50% 0;background-size:cover;position:relative;}
body.mob{}
h1,h2,h3,h4,p,ul,li{margin:0;padding:0;}
ul{list-style:none;}
img{border:none;}
a{text-decoration:none;cursor:pointer;outline:none;}
a:hover{text-decoration:none;}
button{outline:none;border:0;}

#nctGnb{position:absolute !important;top:0;}
/*.wrapper{position:relative;min-width:1100px;overflow:hidden;}*/
.header h1,.header h2,.header h3,.header p,.section-inner{text-indent:-99999px;}
.goHome,.share,.backHome,.goEvent{text-indent:-9999px;}

/*.ir{margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999px;}
.inner{position:relative;margin:0 auto;width:1100px;}

.mob #nctGnb{display:none;}
.mob .wrapper{min-width:auto;}
.mob .inner{width:100%;}*/
.mob #nctGnb{display:none;}


/* main */
.main{position:relative;overflow:hidden;height:100%;}
.main a,.section a{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
.main a:hover,.section a:hover{-webkit-filter:contrast(150%);filter:contrast(150%);}


/* header */
.header{position:relative;height:100%;}
.header .goHome{position: absolute;top:55px;left:10px;width:135px;height:49px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/logo.png") no-repeat 50% 50%;z-index:100;}
.header .share{position:absolute;top:62px;right:245px;width:40px;height:40px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/fb.png") no-repeat 50% 50%;z-index:100;}
.header .backHome{position:absolute;top:61px;right:125px;width:110px;height:40px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/btn_home.png") no-repeat 50% 50%;z-index:100;}
.header .goEvent{position:absolute;top:61px;right:10px;width:110px;height:40px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/btn_update.png") no-repeat 50% 50%;z-index:100;}
.header .title{position:absolute;top:310px;left:50%;margin-left:-600px;width:1200px;height:670px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/title.png") no-repeat 50% 50%;z-index:100;}
.header .chara{position:absolute;top:-10px;left:50%;margin-left:-370px;width:740px;height:930px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/chara.png") no-repeat 50% 50%;z-index:10;}
.header .nav{position:absolute;left:50%;bottom:60px;margin-left:-290px;width:580px;height:210px;z-index:1000;}
.header .nav li{width:180px;height:100%;position:relative;float:left;margin-right:20px;}
.header .nav li:last-child{margin:0;}
.header .nav li a{width:100%;height:100%;display:block;position:absolute;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/btn.png") no-repeat 0 0;font-size:0;line-height:0;text-indent:-9999px;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
.header .nav li:nth-child(2) a{background-position: 0 -210px;}
.header .nav li:nth-child(3) a{background-position: 0 -420px;}
.header .nav li a:hover{background-position-x:-180px;}

.header:before,.header:after{content:'';display:block;position:absolute;top:50%;left:50%;margin-top:-540px;margin-left:-1280px;width:2560px;height:1080px;animation:fadeMist 10s infinite ease-in-out;-webkit-animation:fadeMist 10s infinite ease-in-out;}
.header:before{background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/fog1.png") no-repeat 50% 50%;}
.header:after{background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/fog2.png") no-repeat 50% 50%;}
.header .mist{opacity:0;position:absolute;top:200px;width:2520px;height:558px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/mist.png") no-repeat 50% 50%;animation:fadeMist 10s infinite 3s ease-in-out;-webkit-animation:fadeMist 10s infinite 3s ease-in-out;}


.mob .header a,.mob .section a{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
.mob .header:before,.mob .header:after,.mob .header .mist{display:none;animation-play-state:paused;-webkit-animation-play-state:paused;}

@media screen and (max-height:800px) {
    .header .title{position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-300px;width:600px;height:335px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/title.png") no-repeat 50% 50%;z-index:100;background-size:cover;}
    .header .chara{position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-160px;width:320px;height:402px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/chara.png") no-repeat 50% 50%;background-size:cover;}
    .header:before,.header:after{margin-top:-270px;margin-left:-640px;width:1280px;height:540px;background-size:cover;}
}

@media screen and (max-width:920px) {
    .mob .header .goHome,.mob .header .share,.mob .header .backHome,.mob .header .goEvent{top:5px;}
    .mob .header .chara{top:50px;}
    .mob .header .title{position:absolute;top:550px;left:50%;margin-left:-300px;width:600px;height:335px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/title.png") no-repeat 50% 50%;z-index:100;background-size:cover;}
}

@media screen and (max-width:767px) {
    .mob .header .goHome{top:5px;width:120px;height:50px;background-image:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/m/logo.png");background-size:cover;}
    .mob .header .share{left:auto;top:5px;right:123px;width:40px;height:40px;background-image:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/fb.png");background-size:cover;}
    .mob .header .backHome{position:absolute;top:5px;right:10px;width:110px;height:40px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/btn_home.png") no-repeat 50% 50%;z-index:100;background-size:cover;}
    .mob .header .goEvent{position:absolute;top:55px;right:10px;width:110px;height:40px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/btn_update.png") no-repeat 50% 50%;z-index:100;background-size:cover;}
    .mob .header .title{position:absolute;top:350px;left:50%;margin-left:-190px;width:380px;height:212px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/title.png") no-repeat 50% 50%;z-index:100;background-size:cover;}
    .mob .header .chara{position:absolute;top:150px;left:50%;margin-left:-160px;width:320px;height:402px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/chara.png") no-repeat 50% 50%;background-size:cover;}
    .mob .header .nav{position:absolute;left:50%;bottom:100px;margin-left:-145px;width:290px;height:105px;z-index:1000;}
    .mob .header .nav li{width:90px;height:100%;position:relative;float:left;margin-right:10px;}
    .mob .header .nav li:last-child{margin:0;}
    .mob .header .nav li a{background-size:180px 315px;}
    .mob .header .nav li:nth-child(2) a{background-position: 0 -105px;}
    .mob .header .nav li:nth-child(3) a{background-position: 0 -210px;}
    .mob .header .nav li a:hover{background-position-x:-90px;}
}

@media screen and (max-width:640px) {
    .mob .bottom-footer .bottom-footer__inner .bottom-footer__rating{width:300px;}
}
@media screen and (max-width:360px) {
    .mob .bottom-footer .bottom-footer__inner .bottom-footer__rating{width:270px;}

    .mob .header .title{top:250px;}
    .mob .header .chara{top:50px;}
}

/* top */
.goTop{position:fixed;bottom:20px;background:url("//image.tw.ncsoft.com/aion/layout/btn-top.png") no-repeat 50% 0;background-size:cover;left:auto;display:none;width:40px;height:40px;right:20px;text-indent:-9999em;z-index:100;}

@media screen and (max-width:1099px) {
  /*body{width:max-content;width:-webkit-max-content;width:-moz-max-content;max-width:1100px;}
  body.mob{width:auto;max-width:none;}*/
}

/* modal */
/*body #modal-wrap{box-shadow:none;}
body #modal-contents{background:none;}*/

/* animation */
@-webkit-keyframes fade {
  50% {opacity: 1;}
}
@keyframes fade {
  50% {opacity: 1;}
}

@-webkit-keyframes fadeMist {
  0%{opacity: 0;-webkit-transform: scale(.8);transform: scale(.8);}
  40%, 60% {opacity: 0.75;}
  80%, 100%{opacity: 0;-webkit-transform: scale(1.2);transform: scale(1.2);}
}
@keyframes fadeMist {
  0%{opacity: 0;-webkit-transform: scale(.8);transform: scale(.8);}
  40%, 60% {opacity: 0.75;}
  80%, 100%{opacity: 0;-webkit-transform: scale(1.2);transform: scale(1.2);}
}



#footer { width: 100%; height: 60px; background-color: #0e171e; position: absolute;  bottom: 0; display: block; z-index: 100; }
#footer .copyright{position:absolute;top:0.5rem;left:0;right:0;width:1000px;margin:0 auto;}
#footer .copyright-company,#footer .copyright-studio{display:flex;align-items:center;font-size:10px;color:#fffffe;letter-spacing:-0.5px;}
#footer .copyright-company{float:left;}
#footer .copyright-company .copyright-logo{width:42px;height:23px;margin-right:0.5rem;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/bi-nc.png") no-repeat 50% 50%;background-size:contain;}
#footer .copyright-studio{float:right;text-indent:-9999em;white-space:nowrap;overflow:hidden;background-size:contain;display:flex;align-items:center;}
#footer .copyright-studio .grade-desc{font-size:10px;line-height:1.2;text-indent:0;text-align:right;font-weight:300;color:#ffffff;}
#footer .copyright-studio .grade-icon{width:32px;height:32px;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/15+.png") no-repeat 50% 50%;background-size:contain;margin-left:0.5rem;}
#footer .copyright a{text-indent:-9999em;white-space:nowrap;overflow:hidden;display:block;height:100%;}

.mob #footer { width: 100%; height: 90px; background-color: #0e171e; position: fixed; bottom: 0; display: block; z-index:1000; }
.mob #footer .copyright{position:absolute;width:auto;left:0.5rem;right:0.5rem;bottom:0;padding:0;color:#fffffe;}
.mob #footer .copyright-company,.mob #footer .copyright-studio{display:flex;align-items:center;font-size:0.6rem;font-weight:300;justify-content:center;padding-bottom:0.5rem;height:auto;float:none;}
.mob #footer .copyright-company{line-height:1.2;}
.mob #footer .copyright-company .copyright-logo{width:36px;height:20px;margin-right:0.5rem;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/bi-nc.png") no-repeat 50% 50%;background-size:contain;}
.mob #footer .copyright-studio li{margin-left:0.3rem;}
.mob #footer .copyright-studio .grade-desc{font-size:10px;line-height:1.2;text-indent:0;text-align:right;font-weight:300;color:#ffffff;}
.mob #footer .copyright-studio .grade-icon{width:30px;height:30px;margin-left:0.5rem;background:url("//image.tw.ncsoft.com/aion/preview/220727_snipe/15+.png") no-repeat 50% 50%;background-size:contain;}
.mob #footer .copyright a{text-indent:-9999em;white-space:nowrap;overflow:hidden;display:block;height:100%;}