@charset "utf-8";
/* 웹폰트 CSS */

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR');
:lang(tw) {font-family: 'FontAwesome', 'Microsoft JhengHei', sans-serif}
:lang(ko) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
:lang(tr) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
:lang(fr) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
:lang(de) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
:lang(jp) {font-family: 'FontAwesome', 'osaka', 'noto sans', 'NotoKr', sans-serif}
:lang(en) {font-family: 'FontAwesome', 'noto sans', 'NotoKr', sans-serif}
/* :lang(ja) {font-family:osaka, sans-serif} */

/*  Reset CSS  */
html{scroll-behavior: smooth;}
*{box-sizing:border-box;}
*, body, div, ul, li { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}

/* CSS RESET 초기화 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
    font-family:"Microsoft JhengHei",'NotoKr','Dotum',Sans-serif;
    font:12px/1.6 arial; color:#555;font-family:'Noto Sans KR',sans-serif;
    font-weight:400;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
}

h1{font-style:normal;font-weight:700;}
html{font-size: 16px;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block;
    -webkit-font-smoothing: antialiased;
}

ul, li{
    list-style:none;
}

a{
    margin:0;
    padding:0;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    transition: all .25s ease-in;
}

img{
    object-fit: cover;
    vertical-align:top;
}

hr{
    display:block;
    height:2px;
    border:0;
    margin:0;
    padding:0;
}
.skip-navi, .skip{position: absolute;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden;visibility: hidden;}
.hidden{position:absolute;width:1px;height:1px;top:-1px;left:-1px;text-indent:-9999px;}
.clearfix{clear:both;}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.mb-show{display:none;}
#wrapper{width:100%;overflow:hidden;position:relative;margin:0;padding:0;background:#131A24;}
/* 헤더 */
#header{
    position: fixed;
    display: block;
    z-index: 9800;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 83px;
    /*background:url(../../images/landing/hipolite/common/bg-gnb.png) center center repeat;*/
    text-align:center;
    /*box-shadow: 0 2px 3px rgba(255,255,255,0.05);*/
    box-sizing:border-box;
}
.
#logo{position:absolute;left:1rem;top:0;display:inline-block;vertical-align:middle;width:123px; height:83px;background:url(../images/logo.png) center center no-repeat; background-size:100%;}

#btnHome{position:absolute;right:1rem;top:0;display:inline-block;vertical-align:middle;height:83px;line-height:83px;font-size:12px;
    position: fixed;
    right: 1rem;
    /*top: 121px;*/
    top:1rem;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    line-height: 19px;
    font-size: 12px;
    /*color: #fff;*/
    color:#939396;
    border: 2px solid #939396;;
    border-radius: 20px;
    padding: 8px 22px;
    height:40px;
    background: rgba(21,25,39,0.7);
}
#btnToday{cursor:pointer;z-index:8000;position:fixed;right:1rem;top:4rem/*121px*/;display:inline-block;vertical-align:middle;height:40px;line-height:19px;font-size:12px;color:#939396;border:2px solid #939396;border-radius:20px;padding:8px 20px;background:rgba(21,25,39,0.5);}

#btnHome span{display:inline-block;width:19px;height:16px;position:relative;margin-right:10px;vertical-align:middle;background:url(../images/icon-home.png) 0 0 no-repeat;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    transition: all .25s ease-in;
}
#btnToday span{display:inline-block;width:17px;height:17px;position:relative;margin-right:10px;vertical-align:middle;background:url(../images/icon-close.png) 0 0 no-repeat;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    transition: all .25s ease-in;}

#btnHome:hover{color:#b290f9;border:2px solid #9163ef}
#btnToday:hover{color:#b290f9;border:2px solid #9163ef;border-radius:20px;padding:8px 20px;background: rgba(21,25,39,0.7);}

#btnToday:hover span{background:url(../images/icon-close-on.png) 0 0 no-repeat;}
#btnHome:hover span{background:url(../images/icon-home-on.png) 0 0 no-repeat;}

.row-w{width:100%; max-width: 1920px; margin:0 auto;}

/* 섹션 */
section{position:relative;height:100vh;overflow:hidden;}

.pull-right{float:right}
.pull-left{float:left}

p.text{color:rgba(255,255,255,0.85);font-size:1.0625rem;font-weight:normal;line-height:1.2}
p.text em{color: #f9a1ff;font-size:1.0625rem;font-weight:normal;}
/*p.text + p.text{margin-top:1.0625rem;}*/
.sec0{width:100%;height:100vh;overflow:hidden;background:url(../images/bg.jpg) 0 0 no-repeat; background-size:cover;}
.sec0 .cont{position:relative;width:100%; }/* 캐릭터 이미지는 .cont 헤잇에 맞추어 정해짐 */
.sec0 .chr{position:absolute;z-index:0;right:0;bottom:-15px;height:100vh;}
.sec0 .chr img{height:100%;}


/* 캐릭터 바운스 */
.sec0 article{position:relative;width:100%;height:100vh;text-align:center;}
.sec0 article p {position:relative;width:100%;text-align:center;padding-top:8vw;clear:both;}
.sec0 article p img.aniShowTit1{width:54%}
.sec0 article p img.aniShowTit{width:38%}
.sec0 .ct-left{position:absolute;left:0;top:0;}
.sec0 .ct-right{position:absolute;right:-5px;bottom:-12px;}
.sec0 .comingsoon{position:absolute;left:20%;top:-12px;}

.sec0 ul{display: inline-block;clear: both;margin: 0 auto 0;}
.sec0 ul li{float:left;position:relative;margin-left:10px;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
    transition: all .25s ease-in;
}
.sec0 ul li:hover{transform:translateY(-30px);}

.sec0 ul li:first-child{margin-left:0px;}
.sec0 ul li a{display:block;}
.sec0 ul li a span{display:inline-block;position:absolute;bottom:36px;left:50%;margin-left:-67.5px;width:135px; height:39px;}
.sec0 ul li:hover a span{background:url(../images/btn-more-on.png) 0 0 no-repeat;}
.aniBounce {animation: bounce 1s infinite alternate;-webkit-animation: bounce 1s infinite alternate;}

#graphic2{
    background-color: transparent;
    position: absolute;
    top: 50%;
    right: 50%;
    left:inherit;
    margin-top:-360px;
    margin-left: inherit;
    margin-right:-380px;
    width:200px;
    height: 200px;
    overflow: hidden;color:transparent;
    -webkit-animation: transLight 2s cubic-bezier(.23,1,.32,1) infinite alternate, light-move-fast 0.75s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite;
    -moz-animation: transLight 2s cubic-bezier(.23,1,.32,1) infinite alternate,light-move-fast 0.75s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite;
    animation: transLight 2s cubic-bezier(.23,1,.32,1) infinite alternate,light-move-fast 0.75      s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite;
}
@-webkit-keyframes transLight {
    from {opacity:0;transform:scale(0.7);}
    to{opacity:1;transform:scale(1.3);}
}
@-ms-keyframes transLight {
    from {opacity:0;transform:scale(0.7);}
    to{opacity:1;transform:scale(1.3);}
}
@-o-keyframes transLight {
    from {opacity:0;transform:scale(0.7);}
    to{opacity:1;transform:scale(1.3);}
}
@-moz-keyframes transLight {
    from {opacity:0;transform:scale(0.7);}
    to{opacity:1;transform:scale(1.3);}
}
@keyframes transLight {
    from {opacity:0;transform:scale(0.7);}
    to{opacity:1;transform:scale(1.3);}
}

@-webkit-keyframes light-move-fast {
    0%   {transform:translateX(0)}
    20%  { transform:translateX(5px)}
    40%  { transform:translateX(0px)}
    60%  { transform:translateX(5px)}
    80%  { transform:translateX(0)}
    100% { transform:translateX(5px)}
}
@-moz-keyframes light-move-fast {
    0%   {transform:translateX(0)}
    20%  { transform:translateX(5px)}
    40%  { transform:translateX(0px)}
    60%  { transform:translateX(5px)}
    80%  { transform:translateX(0)}
    100% { transform:translateX(5px)}
}
@-o-keyframes light-move-fast {
    0%   {transform:translateX(0)}
    20%  { transform:translateX(5px)}
    40%  { transform:translateX(0px)}
    60%  { transform:translateX(5px)}
    80%  { transform:translateX(0)}
    100% { transform:translateX(5px)}
}
@keyframes light-move-fast {
    0%   {transform:translateX(0)}
    20%  { transform:translateX(5px)}
    40%  { transform:translateX(0px)}
    60%  { transform:translateX(5px)}
    80%  { transform:translateX(0)}
    100% { transform:translateX(5px)}
}

@keyframes bounce {
    from {
        transform: translateY(5px);
    }
    to {
        transform: translateY(20px);
    }
}
@-webkit-keyframes bounce {
    from {
        transform: translateY(5px);
    }
    to {
        transform: translateY(20px);
    }
}
.aniFadeInOut{-webkit-animation: aniFadeInOut 6s linear 0s infinite both;
    -moz-animation: aniFadeInOut 6s linear 0s infinite both;
    -o-animation: aniFadeInOut 6s linear 0s infinite both;
    animation: aniFadeInOut 6s linear 0s infinite both;
}
@-webkit-keyframes aniFadeInOut { 0% {  opacity:1;  } 50% { opacity:0.6;  } 100% { opacity:1; } }
@-o-keyframes aniFadeInOut { 0% {  opacity:1;  } 50% { opacity:0.6;  } 100% { opacity:1; } }
@-moz-keyframes aniFadeInOut { 0% {  opacity:1;  } 50% { opacity:0.6;  } 100% { opacity:1; } }
@keyframes aniFadeInOut { 0% {  opacity:1;  } 50% { opacity:0.6;  } 100% { opacity:1; } }

.aniTriangle{
    animation:aniTriangle 10s linear infinite both;
    -webkit-animation:aniTriangle 10s linear infinite both;
    -moz-animation:aniTriangle 10s linear infinite both;
    -ms-animation:aniTriangle 10s linear infinite both;
    -o-animation:aniTriangle 10s linear infinite both;
}
@-webkit-keyframes aniTriangle {
    0%   { opacity:1; background-position: center bottom; background-size:50%; right:-100%; }/*사라지기 시작함*/
    15%   { opacity:0; background-size:150%;right:-50%;}
    35%   { opacity:0; background-size:50%;right:100%;}/* 다시 보이기 시작*/
    45%   { opacity:1;}
    50%   { opacity:0; background-size:150%;right:00%;}/* 사라짐*/
    51%   { opacity:0; background-size:50%;right:-100%;}
    100% { opacity:0; background-position: center bottom; background-size:50%; right:-100%;}
}
@-moz-keyframes aniTriangle {
    0%   { opacity:1; background-position: center bottom; background-size:50%; right:-100%; }/*사라지기 시작함*/
    15%   { opacity:0; background-size:150%;right:-50%;}
    35%   { opacity:0; background-size:50%;right:100%;}/* 다시 보이기 시작*/
    45%   { opacity:1;}
    50%   { opacity:0; background-size:150%;right:00%;}/* 사라짐*/
    51%   { opacity:0; background-size:50%;right:-100%;}
    100% { opacity:0; background-position: center bottom; background-size:50%; right:-100%;}
}
@-o-keyframes aniTriangle {
    0%   { opacity:1; background-position: center bottom; background-size:50%; right:-100%; }/*사라지기 시작함*/
    15%   { opacity:0; background-size:150%;right:-50%;}
    35%   { opacity:0; background-size:50%;right:100%;}/* 다시 보이기 시작*/
    45%   { opacity:1;}
    50%   { opacity:0; background-size:150%;right:00%;}/* 사라짐*/
    51%   { opacity:0; background-size:50%;right:-100%;}
    100% { opacity:0; background-position: center bottom; background-size:50%; right:-100%;}
}
@keyframes aniTriangle {
    0%   { opacity:1; background-position: center bottom; background-size:50%; right:-100%; }/*사라지기 시작함*/
    15%   { opacity:0; background-size:150%;right:-50%;}
    35%   { opacity:0; background-size:50%;right:100%;}/* 다시 보이기 시작*/
    45%   { opacity:1;}
    50%   { opacity:0; background-size:150%;right:00%;}/* 사라짐*/
    51%   { opacity:0; background-size:50%;right:-100%;}
    100% { opacity:0; background-position: center bottom; background-size:50%; right:-100%;}
}

.aniChrMain{
    animation:aniChrMain 1s ease-in 0.2s 1 both;
    -webkit-animation:aniChrMain 1s ease-in 0.2s 1 both;
    -moz-animation:aniChrMain 1s ease-in 0.2s 1 both;
    -ms-animation:aniChrMain 1s ease-in 0.2s 1 both;
    -o-animation:aniChrMain 1s ease-in 0.2s 1 both;
}

@-webkit-keyframes aniChrMain{
    0%   { opacity:0;/* width: 50%; left: -50%;*/ }
    40%  { opacity:0.5;}
    100% { opacity:1; /*width: 100%; left: 0px;*/ }
}
@-moz-keyframes aniChrMain{
    0%   { opacity:0;/* width: 50%; left: -50%;*/ }
    40%  { opacity:0.5;}
    100% { opacity:1; /*width: 100%; left: 0px;*/ }
}
@-o-keyframes aniChrMain{
    0%   { opacity:0;/* width: 50%; left: -50%;*/ }
    40%  { opacity:0.5;}
    100% { opacity:1; /*width: 100%; left: 0px;*/ }
}
@keyframes aniChrMain{
    0%   { opacity:0;/* width: 50%; left: -50%;*/ }
    40%  { opacity:0.5;}
    100% { opacity:1; /*width: 100%; left: 0px;*/ }
}

.aniShowTit1{
    animation:aniShowTit1 0.75s ease-in 1 both;
    -webkit-animation:aniShowTit1 0.75s ease-in 1 both;
    -moz-animation:aniShowTit11 0.75s ease-in 1 both;
    -ms-animation:aniShowTit1 0.75s ease-in 1 both;
    -o-animation:aniShowTit1 0.75s ease-in 1 both;
}

.aniShowTit2{
    animation:aniShowTit2 0.75s ease-in 1 both;
    -webkit-animation:aniShowTit2 0.75s ease-in 1 both;
    -moz-animation:aniShowTit2 0.75s ease-in 1 both;
    -ms-animation:aniShowTit2 0.75s ease-in 1 both;
    -o-animation:aniShowTit2 0.75s ease-in 1 both;
}
@-webkit-keyframes aniShowTi1{
    0%   { opacity:0; width: 25%; top: 8vw; }
    100% { opacity:1; width: 38%; top: 8vw; }
}
@-moz-keyframes aniShowTit1{
    0%   { opacity:0; width: 25%; top: 8vw; }
    100% { opacity:1; width: 38%; top: 8vw; }
}
@-o-keyframes aniShowTit1{
    0%   { opacity:0; width: 25%; top: 8vw; }
    100% { opacity:1; width: 38%; top: 8vw; }
}
@keyframes aniShowTit1{
    0%   { opacity:0; width: 25%; top: 8vw; }
    100% { opacity:1; width: 38%; top: 8vw; }
}
@-webkit-keyframes aniShowTit2{
    0%   { opacity:0; width: 25%; top: 8vw; }
    100% { opacity:1; width: 38%; top: 8vw; }
}
@-moz-keyframes aniShowTit2{
    0%   { opacity:0; width: 25%; top: 8vw; }
    100% { opacity:1; width: 38%; top: 8vw; }
}
@-o-keyframes aniShowTit2{
    0%   { opacity:0; width: 25%; top: 8vw; }
    100% { opacity:1; width: 38%; top: 8vw; }
}
@keyframes aniShowTit2{
    0%   { opacity:0; width: 25%; top: 8vw; }
    100% { opacity:1; width: 38%; top: 8vw; }
}


.footer{z-index:20;overflow:hidden;width:100%;margin-top:0px;padding-top:24px;padding-bottom:24px;padding-top:1.5rem;padding-bottom:1.5rem;background-color:#070d16;color:#696868;text-align:center;}
.footer .row-w{ margin:0 auto;text-align:center;}
.footer .copyright{display:inline-block;}
.footer .copyright .footer-logo{float:left;display:inline-block;vertical-align:middle;width:80px;height:40px;margin-top: 11px;}
.footer .copyright .footer-logo a{display:inline-block;width:100%;height:100%;text-indent:-9999px;}
.footer .copyright .logo{display:inline-block;vertical-align:middle;width:100%;height:100%;background:url(../images/logo-footer.png) 0 0 no-repeat; background-size:contain;}
.footer .copyright p{display:inline-block;float:left;vertical-align:middle;font-size:13px;font-family:dotum;font-size:11px;height:40px;line-height:53px;}

/* 캐릭터 위치 */
.sec0 .chr{position:absolute;z-index:0;right:0;bottom:0;height:100vh;}


@media all and (max-width : 1440px) {
    html{font-size:16px;font-size:1rem;}
}
@media all and (max-width : 1280px) {

}
@media all and (max-width : 1024px) {

    .sec0 .chr{height: auto; width:100%; top:0; bottom:inherit;}
    .sec0 article p{top:35vw;text-align:left}
    .sec0 article p img{width:80%;}
    @-webkit-keyframes aniShowTit{
        0%   { opacity:0;  right: 0;}/*사라지기 시작함*/
        100% { opacity:1; right: 0; }
    }
    @-moz-keyframes aniShowTit{
        0%   { opacity:0; right: 0; }/*사라지기 시작함*/
        100% { opacity:1; right: 0; }
    }
    @-o-keyframes aniShowTit{
        0%   { opacity:0; right: 0; }/*사라지기 시작함*/
        100% { opacity:1;  right: 0;}
    }
    @keyframes aniShowTit{
        0%   { opacity:0; right: 0; }/*사라지기 시작함*/
        100% { opacity:1; right: 0; }
    }


}
@media all and (max-width : 962px) {
    /*nav bottom */
    #btnHome{display:none;}
    #btnToday{display:none;}
}
@media all and (max-width : 768px) {

    .footer{padding-bottom: 70px;}
    .footer .copyright {text-align: center;margin-top: 0px;margin-bottom: 0px;}
    .footer .copyright .footer-logo{display:block;width:100%;text-align:center;}
    .footer .copyright .footer-logo .logo{position:absolute;left:50%;margin-left:-34.5px;width:69px;}
    .footer .copyright p{width:100%;margin-left:0;clear:left;height: auto; line-height:inherit;}

}
@media all and (max-width : 640px) {

    .sec0, .sec0 .cont{min-height:780px;height:auto;overflow:hidden;}
    .mb-show{display:inline-block;}
    .sec1 .cont article p, .sec2 .cont article p, .sec3 .cont article p, .sec4 .cont article p{
        width: 90%;margin:0 auto;}

    @-webkit-keyframes aniShowTit{
        0%   { opacity:0; width: 50%; right: 0; top: 25vh; }/*사라지기 시작함*/
        100% { opacity:1; width: 100%; right: 0; top: 25vh; }
    }
    @-moz-keyframes aniShowTit{
        0%   { opacity:0; width: 50%; right: 0; top: 25vh; }/*사라지기 시작함*/
        100% { opacity:1; width: 100%; right: 0; top: 25vh; }
    }
    @-o-keyframes aniShowTit{
        0%   { opacity:0; width: 50%; right: 0; top: 25vh; }/*사라지기 시작함*/
        100% { opacity:1; width: 100%; right: 0; top: 25vh; }
    }
    @keyframes aniShowTit{
        0%   { opacity:0; width: 50%; right: 0; top: 25vh; }/*사라지기 시작함*/
        100% { opacity:1; width: 100%; right: 0; top: 25vh; }
    }
    .sec0 .chr {height: 100%;width: auto;}
    .sec0 article p {text-align: center;}


}
@media all and (max-width : 460px) {

}

@media all and (max-width : 375px) {

}

@media all and (max-width : 320px) {

}