@font-face {
    font-family:NanumSquare;
    src:url(../fonts/NanumSquareR.woff2) format("woff2"),url(../fonts/NanumSquareR.woff) format("woff"),url(../fonts/NanumSquareR.otf) format("opentype")
}
@font-face {
    font-family:NanumSquare Light;
    src:url(../fonts/NanumSquareL.woff2) format("woff2"),url(../fonts/NanumSquareL.woff) format("woff"),url(../fonts/NanumSquareL.otf) format("opentype")
}
@font-face {
    font-family:NanumSquare ExtraBold;
    src:url(../fonts/NanumSquareEB.woff2) format("woff2"),url(../fonts/NanumSquareEB.woff) format("woff"),url(../fonts/NanumSquareEB.otf) format("opentype")
}
@font-face {
    font-family:NanumSquareBold;
    src:url(../fonts/NanumSquareB.woff2) format("woff2"),url(../fonts/NanumSquareB.woff) format("woff"),url(../fonts/NanumSquareB.otf) format("opentype")
}
@font-face {
    font-family:Futura Std Heavy;
    src:url(../fonts/FuturaStdHeavy.woff2) format("woff2"),url(../fonts/FuturaStdHeavy.woff) format("woff"),url(../fonts/FuturaStdHeavy.otf) format("opentype")
}
@font-face {
    font-family:FuturaBT Heavy;
    src:url(../fonts/FuturaBTHeavy.woff2) format("woff2"),url(../fonts/FuturaBTHeavy.woff) format("woff"),url(../fonts/FuturaBTHeavy.otf) format("opentype")
}



* {
    margin:0;
    padding:0;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    box-sizing:border-box
}
body,html {
    width:100%;
    height:100%
}
body {
    font-family:NanumSquare,sans-serif;
    width:100%;
    overflow-x:hidden;
    word-break:keep-all;
    word-wrap:break-word
}
a,a:active,a:hover,a:link,a:visited {
    text-decoration:none
}
table {
    border:none;
    border-collapse:collapse;
    border-spacing:0
}
abbr,acronym,fieldset,iframe,img,td,th {
    border:0 none;
    padding:0;
    margin:0;
    outline:none
}
dd,dl,dt,ol,ul {
    margin:0;
    padding:0;
    list-style:none
}
h1,h2,h3,h4,h5,h6,strong {
    font-weight:400
}
caption,legend {
    overflow:hidden;
    visibility:hidden;
    font-size:0;
    line-height:0;
    height:0;
    width:0;
    text-indent:-999em
}
button,img,input,select,textarea {
    vertical-align:middle
}
button {
    -webkit-appearance:none;
    appearance:none;
    border-radius:0;
    border:none;
    background:transparent
}
img {
    outline:none
}
input[type=button],input[type=checkbox],input[type=password],input[type=radio],input[type=submit],input[type=tel],input[type=text] {
    margin:0;
    padding:0;
   /* -webkit-appearance:none;
    appearance:none; */
    border-radius:0;
    /* border:none; */
}
textarea {
    -webkit-appearance:none;
    appearance:none;
    border-radius:0;
    border:none
}
input[type=password]:focus,input[type=tel]:focus,input[type=text]:focus,textarea:focus {
    border:1px solid #8045dd!important;
    outline:none
}
::-ms-clear,::-ms-reveal {
    display:none
}
::-ms-expand {
    display:none
}
input::-webkit-input-placeholder {
    color:#777
}
input::-moz-placeholder {
    color:#777
}
.ie8 a:active,.ie8 a:focus {
    outline:none;
    ie-dummy:expression(this.hideFocus=true)
}



header {
    background-color:#fff;
    width:100%;
    margin:0 auto;
    z-index:50
}
.header-top {
    position:relative;
    height:40px
}
.header-title {
    text-align:center;
    font-family:NanumSquareBold;
    font-size:16px;
    line-height:40px;
    color:#212121;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:calc(100% - 72px);
    margin:0 auto
}
.logo {
    position:absolute;
    left:50%;
    margin-left:-65px;
    top:50%;
    margin-top:-20px;
    height:40px;
    line-height:40px
}
.menu-btn {
    left:0
}
.menu-btn,.search-btn {
    position:absolute;
    top:0;
    width:36px;
    height:36px
}
.search-btn {
    right:0
}
.ci-mimi {
    width:120px
}
.ico-menu,.ico-search {
    width:36px
}

.lnb-overlay {
    position:fixed;
    z-index:10;
    -webkit-transition:opacity .3s;
    transition:opacity .3s;
    opacity:1;
    background:rgba(0,0,0,.7)
}
.lnb-overlay,.lnb-overlay .inner {
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%
}
.lnb-overlay .inner {
    position:absolute;
    background-color:rgba(0,0,0,.6)
}
.lnb-overlay.transparent .inner {
    background-color:transparent
}
.lnb-overlay.overlay-enter,.lnb-overlay.overlay-leave-active {
    opacity:0
}

footer.footer-wrap {
    text-align:center;
    padding:30px 0 24px
}
.ft-sns li {
    display:inline-block;
    margin:0 4px
}
.ft-sns a {
    display:block
}
.ft-sns img {
    width:40px
}
.ft-policy {
    display:inline-block;
    margin-top:19px
}
.ft-policy li {
    float:left;
    padding:0 10px;
    border-right:1px solid #e5e5e5;
    line-height:12px
}
.ft-policy li:last-child {
    border-right:none
}
.ft-policy a {
    font-size:11px;
    letter-spacing:-.2px;
    color:#666
}
.copyrights:first-of-type {
    margin-top:20px
}
.copyrights {
    margin-top:8px;
    font-size:11px;
    letter-spacing:-.2px;
    color:#777
}


.wrap {
    width:100%;
    max-width: 640px;
    
    margin:0 auto;
}


.nav-depth01 {
    text-align:center;
    background-color:#fff;
    position:relative
}
.nav-depth01.gray-line {
    border-bottom:1px solid #e5e5e5
}
.nav-depth01 a,.nav-depth01 button {
    display:inline-block;
    padding:12px 7px 9px;
    font-family:NanumSquareBold;
    font-size:14px;
    color:#23212a;
    position:relative
}
.nav-depth01 a.depth01-on,.nav-depth01 button.depth01-on {
    color:#8045dd;
    border-bottom:3px solid #8045dd;
    padding-bottom:8px
}
.nav-depth01 .swiper-slide {
    height:40px!important
}
.nav-depth02 {
    background-color:#f4f4f4;
    text-align:center;
    position:relative
}
.nav-depth02 a {
    font-family:NanumSquare;
    font-size:14px;
    color:#777;
    height:40px;
    line-height:40px;
    position:relative
}
.nav-depth02 a.depth02-on {
    font-family:NanumSquareBold;
    color:#23212a
}
.sup-nav {
    position:absolute;
    top:2px;
    right:-6%;
    font-family:NanumSquare ExtraBold;
    font-size:9px;
    letter-spacing:-.1px;
    color:#fff;
    z-index:10
}
.nav-depth03 {
    background:-webkit-gradient(linear,left top,right top,color-stop(0,#7f8595),color-stop(.71,#aeb2be),color-stop(1,#7f8595));
    background:-webkit-linear-gradient(90deg,#7f8595,#aeb2be 71%,#7f8595);
    background:-webkit-linear-gradient(left,#7f8595,#aeb2be 71%,#7f8595);
    background:linear-gradient(90deg,#7f8595,#aeb2be 71%,#7f8595);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#7f8595",endColorstr="#7f8595",gradientType=1);
    height:56px;
    line-height:56px;
    position:relative
}
.nav-mixed {
    display:table;
    width:100%;
    table-layout:fixed
}
.nav-btn {
    display:table-cell;
    text-align:left;
    background:url(../img/arrow-bottom-white.png) no-repeat 100%;
    background-size:16px
}
.nav-length01 {
    width:45px
}
.nav-length02 {
    width:67px
}
.nav-length03 {
    width:82px
}
.nav-length04 {
    width:95px
}
.nav-length05 {
    width:109px
}
.nav-length06 {
    width:123px
}
.nav-length07 {
    width:137px
}
.nav-length-over {
    width:50%
}
.nav-btn .nav-button {
    padding:0 25px 0 10px;
    color:#fff;
    font-size:14px;
    word-break:break-all
}
.nav-btn~.nav-scroll {
    display:table-cell;
    padding-left:10px
}
.nav-fixed02 .swiper-slide {
    width:50%
}
.nav-fixed03 .swiper-slide {
    width:33.3333%
}
.nav-fixed04 .swiper-slide {
    width:25%
}
.nav-fixed05 .swiper-slide {
    width:20%
}
.nav-fixed06 .swiper-slide {
    width:16.6666%
}
.nav-fixed07 .swiper-slide {
    width:14.2857%
}
.nav-pooqzone .swiper-slide {
    width:17.5%
}
.nav-pooqzone .swiper-slide:last-child {
    width:30%
}
.nav-scroll {
    padding-left:25px;
    padding-right:25px
}
.nav-scroll .swiper-slide {
    width:auto!important
}
.nav-scroll .swiper-slide:last-child {
    padding-right:25px
}
.nav-depth02 .nav-scroll a {
    margin-right:15px
}
.nav-depth03 .nav-fixed07 .swiper-slide .depth03-on {
    padding:0
}

.nav-depth03 a {color:#eee; padding-left: 25%;}

.nav-depth03 a.depth03-on {
    color:#fff;
    font-weight: bold;
}

.nav-fixed07 {
    padding:0 20px
}
.nav-playy {
    width:100%;
    text-align:center
}
.nav-playy .swiper-wrapper {
    display:inline-block
}
.nav-playy .swiper-slide {
    display:inline-block;
    width:auto!important;
    padding:0 11px
}
@media screen and (max-width:380px) {
    .nav-playy .swiper-slide {
        padding:0 1%
    }
}
.pooq-zone-header {
    background:-webkit-gradient(linear,left top,right top,color-stop(0,#a028e6),color-stop(.3,#882dd3),color-stop(.67,#8241dd),color-stop(1,#5541ef));
    background:-webkit-linear-gradient(90deg,#a028e6,#882dd3 30%,#8241dd 67%,#5541ef);
    background:-webkit-linear-gradient(left,#a028e6,#882dd3 30%,#8241dd 67%,#5541ef);
    background:linear-gradient(90deg,#a028e6,#882dd3 30%,#8241dd 67%,#5541ef);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#a028e6",endColorstr="#5541ef",gradientType=1)
}
.pooqzone-ci {
    width:109px;
    position:absolute;
    left:50%;
    margin-left:-54.5px;
    top:50%;
    margin-top:-20px
}
.pooqzone-ci img {
    width:109px
}
.pooq-zone-header .nav-depth01 {
    background:transparent
}
.pooq-zone-header .nav-depth01 a {
    color:#fff;
    opacity:.7
}
.pooq-zone-header .nav-depth01 a.depth01-on {
    opacity:1;
    border-bottom:3px solid #fff
}
.nav-depth01-gra {
    background:-webkit-gradient(linear,left top,right top,color-stop(.3,#fff),color-stop(1,hsla(0,0%,88%,0)));
    background:-webkit-linear-gradient(90deg,#fff 30%,hsla(0,0%,88%,0));
    background:-webkit-linear-gradient(left,#fff 30%,hsla(0,0%,88%,0));
    background:linear-gradient(90deg,#fff 30%,hsla(0,0%,88%,0));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff",endColorstr="rgba(225,225,225,0)",gradientType=1)
}
.nav-depth01-gra,.nav-depth02-gra {
    width:20px;
    height:40px;
    position:absolute;
    top:0;
    z-index:9
}
.nav-depth02-gra {
    background:-webkit-gradient(linear,left top,right top,color-stop(.1,#f4f4f4),color-stop(1,hsla(0,0%,96%,0)));
    background:-webkit-linear-gradient(90deg,#f4f4f4 10%,hsla(0,0%,96%,0));
    background:-webkit-linear-gradient(left,#f4f4f4 10%,hsla(0,0%,96%,0));
    background:linear-gradient(90deg,#f4f4f4 10%,hsla(0,0%,96%,0));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4f4f4",endColorstr="rgba(244,244,244,0)",gradientType=1)
}
.nav-depth03-gra {
    width:20px;
    height:56px;
    position:absolute;
    top:0;
    z-index:9;
    background:-webkit-gradient(linear,left top,right top,color-stop(.1,#818696),color-stop(1,hsla(226,9%,55%,0)));
    background:-webkit-linear-gradient(90deg,#818696 10%,hsla(226,9%,55%,0));
    background:-webkit-linear-gradient(left,#818696 10%,hsla(226,9%,55%,0));
    background:linear-gradient(90deg,#818696 10%,hsla(226,9%,55%,0));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#818696",endColorstr="rgba(129,134,150,0)",gradientType=1)
}
.nav-gra-l {
    left:0
}
.nav-gra-r {
    right:0;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg)
}
.gra-slider-wrap {
    position:relative
}
.nav-mixed-gra {
    position:absolute;
    width:20px;
    height:100%;
    top:0;
    z-index:9
}
.nav-mix-gra-l {
    left:0;
    background:-webkit-gradient(linear,left top,right top,color-stop(.1,#9e28e4),color-stop(1,rgba(158,40,228,0)));
    background:-webkit-linear-gradient(90deg,#9e28e4 10%,rgba(158,40,228,0));
    background:-webkit-linear-gradient(left,#9e28e4 10%,rgba(158,40,228,0));
    background:linear-gradient(90deg,#9e28e4 10%,rgba(158,40,228,0));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#9e28e4",endColorstr="rgba(158,40,228,0)",gradientType=1)
}
.nav-mix-gra-r {
    right:0;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    background:-webkit-gradient(linear,left top,right top,color-stop(.1,#5641ee),color-stop(1,rgba(86,65,238,0)));
    background:-webkit-linear-gradient(90deg,#5641ee 10%,rgba(86,65,238,0));
    background:-webkit-linear-gradient(left,#5641ee 10%,rgba(86,65,238,0));
    background:linear-gradient(90deg,#5641ee 10%,rgba(86,65,238,0));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5641ee",endColorstr="rgba(86,65,238,0)",gradientType=1)
}


