@font-face{
    font-weight:300;
    font-family:NanumSquare;
    src:url(/static/font/font/NanumSquareL.eot);
    src:url(/static/font/font/NanumSquareL.eot?#iefix) format("embedded-opentype"),url(/static/font/font/NanumSquareL.woff) format("woff"),url(/static/font/font/NanumSquareL.ttf) format("truetype")
}
@font-face{
    font-weight:400;
    font-family:NanumSquare;
    src:url(/static/font/font/NanumSquareR.eot);
    src:url(/static/font/font/NanumSquareR.eot?#iefix) format("embedded-opentype"), url(/static/font/font/NanumSquareR.woff) format("woff"),url(/static/font/font/NanumSquareR.ttf) format("truetype")
}
@font-face{
    font-weight:700;
    font-family:NanumSquare;
    src:url(/static/font/font/NanumSquareB.eot);
    src:url(/static/font/font/NanumSquareB.eot?#iefix) format("embedded-opentype"),url(/static/font/font/NanumSquareB.woff) format("woff"),url(/static/font/font/NanumSquareB.ttf) format("truetype")
}
@font-face{
    font-weight:900;
    font-family:NanumSquare;
    src:url(/static/font/font/NanumSquareEB.eot);
    src:url(/static/font/font/NanumSquareEB.eot?#iefix) format("embedded-opentype"),url(/static/font/font/NanumSquareEB.woff) format("woff"),url(/static/font/font/NanumSquareEB.ttf) format("truetype")
}

blockquote,
body,
button,
code,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
pre,
select,
td,
textarea,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
}

fieldset,
img {
    border: 0 none;
}

dl,
li,
menu,
ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none;
}

button,
input,
select,
textarea {
    vertical-align: middle;
    font-size: 100%;
}

button {
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html,
body {
    height: 100%;
    line-height: 1.267em;
    font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

html {
    display: block;
    /* background-color: #f7f5f1; */
    /* background: linear-gradient(90deg, rgb(83, 170, 140), rgb(56, 147, 193)); */
    /* background-image: linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1)),linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1));
    background-image: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.1) 75%, rgba(255,255,255,0.1)),linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.1) 75%, rgba(255,255,255,0.1));
    background-size: 10px 10px;
    background-position: 0 0,5px 5px; */    
}
body {
    -webkit-text-size-adjust: none;
    background-color: #fff;
    letter-spacing: -0.03em;
}
iframe {
    margin: 0; 
    display: block;
}
.wrapper {
    display: block;
    /* background-image: url(http://static.popcongame.co.kr/banner/store_bg/popcon-po-en.png) !important;
    background-size: 80% !important;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment : fixed; */
}

@media all and (max-width: 1500px){
    .wrapper {
        background-size: 140% !important;
    }
}
@media all and (min-width: 1501px) and (max-width: 1700px){
    .wrapper {
        background-size: 130% !important;
    }
}
@media all and (min-width: 1701px) and (max-width: 1900px){
    .wrapper {
        background-size: 120% !important;
    }
}
@media all and (min-width: 1901px) and (max-width: 2100px){
    .wrapper {
        background-size: 110% !important;
    }
}
@media all and (min-width: 2101px) and (max-width: 2300px){
    .wrapper {
        background-size: 100% !important;
    }
}
@media all and (min-width: 2301px) and (max-width: 2500px){
    .wrapper {
        background-size: 90% !important;
    }
}

.wrapper .wrapper-container {
    z-index: 10;
    max-width: 1024px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    background: #f8f8f8;
}

.wrapper .wrapper-container.shadow {
    -webkit-box-shadow: 0 0 40px rgba(0,0,0,.1);
    -moz-box-shadow: 0 0 40px rgba(0,0,0,.1);
    box-shadow: 0 0 40px rgba(0,0,0,.1);
}

.pattern {
    background-image: linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1)),linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1));
    background-size: 10px 10px;
    background-position: 0 0,5px 5px;
    width: 100%;
    height: 100%;
    position: fixed;
}

input:checked[type='checkbox'] {
    background-color: #666;
    -webkit-appearance: checkbox;
}

input::-ms-clear {
    display: none;
}
input[type='text'],
input[type='password'],
input[type='submit'],
input[type='search'],
input[type='tel'],
input[type='email'],
html input[type='button'],
input[type='reset'] {
    -webkit-appearance: none;
    border-radius: 0;
}

input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

body,
button,
input,
select,
td,
textarea,
th {
    font-size: 14px;
    line-height: 1.5;
    color: #000;
}

a {
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a:active,
a:hover {
    text-decoration: none;
}

address,
caption,
cite,
code,
dfn,
em,
var {
    font-style: normal;
    font-weight: normal;
}

.ir_pm {
    display: block;
    overflow: hidden;
    font-size: 1px;
    line-height: 0;
    text-indent: -9999px;
}

.ir_wa {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.screen_out {
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.clear_g {
    display: block;
    overflow: visible;
    width: auto;
    clear: both;
    *zoom: 1;
}

.clear_g:after {
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 0;
    clear: both;
    content: '';
}

input,
textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

input[type="date"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    border: 0 none;
}

input,
select,
textarea:focus {
    outline: none;
}
/* a:focus {
    outline: 1px dashed #3e332c;
    outline-offset: -1px;
}
button:focus {
    outline: 1px dashed #3e332c;
    outline-offset: -1px;
} */


.iframe_wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* ----------------------------------------- */

/* 헤더 */

/* ----------------------------------------- */
.c_header {
    font-size: 16px;
    line-height: 18px;
}
.c_header {
    position: fixed;
    top: 0px;
    top: 0px;
    left: 0;
    right: 0;
    height: 54px;
    transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    z-index: 9999;
}
.c_header.slideup {
    position: fixed;
    top: -54px;
    left: 0;
    right: 0;
    z-index: 5000;
    letter-spacing: -0.3px;
    text-align: center;
    margin: 0 auto;
}
.c_header .header_gnb {
    position: relative;
    height: 54px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1000;
}
.c_header .header_gnb .tit_area {
    text-align: left;
    vertical-align: middle;
    height: 54px;
    /* text-shadow: 1px 1px 0 rgba(0,0,0,.05); */
    /* background: rgba(255, 255, 255, 0.98); */
    /* background: rgba(255, 214, 0, 1); */
    /* opacity: 0; */
    /* display: none; */
    background: #f8a845;
    background: linear-gradient(to right, #f7c000 60%, #f8a845 100%);
    background: -webkit-linear-gradient(left, #f7c000 60%, #f8a845 100%);
    background: -moz-linear-gradient(to right, #f7c000 60%, #f8a845 100%);
    background: -ms-linear-gradient(to right, #f7c000 60%, #f8a845 100%);
    background: -o-linear-gradient(to right, #f7c000 60%, #f8a845 100%);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px -1px, rgba(0, 0, 0, 0.05) 0px 4px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 10px 0px;
}
.c_header .header_gnb .tit_area.non-box-shadow{
    box-shadow: rgba(0, 0, 0, 0) 0px 2px 4px -1px, rgba(0, 0, 0, 0) 0px 4px 5px 0px, rgba(0, 0, 0, 0) 0px 1px 10px 0px;
}

.c_header .header_gnb .tit_area .title {
    overflow: hidden;
    font-size: 19px;
    margin: 0 60px;
    line-height: 54px;
    color: #fff;
    /* text-shadow: 1px 1px 0 rgba(0,0,0,.1); */
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    
}
.c_header .header_gnb .back_area {
    position: absolute;
    top: 0px;
    left: 0;
    font-size: 20px;
}
/* .c_header .header_gnb  a::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 13px;
    margin-left: 6px;
    vertical-align: 1px;
    background-image: url(https://static.popcongame.com/images/common/ico_back_arrow_b.png);
    -webkit-background-size: 14px 13px;
    background-size: 14px 13px;
    background-repeat: no-repeat;
} */
.c_header .header_gnb .back_area .btn {
    display: inline-block;
    height: 54px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    background: none;
    line-height: 54px;
    vertical-align: top;
    font-size: 17px;
    color: #fff;
    /* text-shadow: 1px 1px 0 rgba(0,0,0,.1); */
}



/* ----------------------------------------- */

/* 나의 재화 */

/* ----------------------------------------- */
.property_wrap {
    position: relative;
    margin: 20px 20px 20px 20px;
    background: #f7f5f1;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.01);
    /* border: 1px solid rgba(239,229,217,.7); */
    /* border: 1px solid #efe5d9; */
    /* box-shadow: 0 0px 1px rgba(0,0,0,0.08); */
    /* -webkit-box-shadow: 0 0px 1px rgba(0,0,0,0.08); */
}
.property_wrap.shop {
    position: relative;
    background: #fff;
    margin: 6px 20px;
    border: 0px;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,0);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0);
} 

.property_wrap .ppty_titem:first-child:nth-last-child(3), .property_wrap .ppty_titem:first-child:nth-last-child(3)~.property_wrap .ppty_titem {
    width: 33.33333%;
}

.property_wrap .ppty_titem {
    float: left;
    position: relative;
    width: 50%;
}

.property_wrap .ppty_titem:first-child::before {
    content: "";
    width: 0px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: -.5px;
    background: #efefef;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.property_wrap .ppty_titem::before {
    content: "";
    width: 1px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: -.5px;
    background: #efe5d9;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.property_wrap .ppty_ta {
    display: block;
    text-align: center;
    height: 46px;
    line-height: 46px;
}
.property_wrap.shop .ppty_ta {
    display: block;
    text-align: center;
    height: 56px;
    line-height: 56px;
}
.property_wrap .ppty_t {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 15px;
    letter-spacing: -1px;
    color: #460808;
    /* font-weight: 600; */
    vertical-align: top;
    padding: 0 10px;
    animation: ani_main_popcon_text 2.5s forwards;
}
.property_wrap .ppty_t em {
    font-size: 11px;
    color: #8a602a;
    padding-left: 3px;
    animation: ani_main_popcon_text 2.5s forwards;
}
.property_wrap .ppty_t.popcon::before {
    overflow: hidden;
    vertical-align: top;
    display: inline-block;
    margin-right: 8px;
    vertical-align: -3px;
    content: '';
    background: url(https://static.popcongame.com/images/common/ico_popcon.png) no-repeat;
    background-size: 19px 17px;
    width: 19px;
    height: 17px;
    -webkit-animation: ani_main_popcon 1s ease alternate;
    animation: ani_main_popcon 1s ease alternate;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%); */
}
.property_wrap .ppty_t.heart::before {
    overflow: hidden;
    vertical-align: top;
    display: inline-block;
    margin-right: 5px;
    vertical-align: -3px;
    content: '';
    background: url(https://static.popcongame.com/images/common/ico_heart.png) no-repeat;
    background-size: 18px 16px;
    width: 18px;
    height: 16px;
    -webkit-animation: ani_main_popcon 1s ease alternate;
    animation: ani_main_popcon 1s ease alternate;
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%); */
}
.property_wrap .ppty_ta.ppty_ta_on .ppty_t::after {
    content: "";
    height: 2px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ff9b00;
}
.property_wrap .property::after {
    content: "";
    display: table;
    table-layout: fixed;
    clear: both;
}
.property_wrap .ppty_ta.ppty_ta_on .ppty_t {
    color: #ff9b00;
}

@-webkit-keyframes ani_main_popcon {
    0% {
        -webkit-transform: scale(0) rotate(0deg);
        transform: scale(0) rotate(0deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}

@keyframes ani_main_popcon {
    0% {
        -webkit-transform: scale(0) rotate(0deg);
        transform: scale(0) rotate(0deg);
    }
    100% {
        -webkit-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}

@keyframes ani_main_popcon_text {
	50% {
		transform: translate(-3px, 0) scale(1);
		color: #a55922;
	}
	70% {
		color: #a00000;
	}
	100% {
		transform: translate(0) scale(1);
		opacity: 1;
	}
}

/* ----------------------------------------- */

/* 로딩 */

/* ----------------------------------------- */





/* @keyframes login-loading-bar {
	0% {
		left: -35%;
		right: 100%
	}

	100%,60% {
		left: 100%;
		right: -90%
	}
}

@keyframes login-loading-bar-short {
	0% {
		left: -200%;
		right: 100%
	}

	100%,60% {
		left: 107%;
		right: -8%
	}
}

.login-loading-screen {
	background: #f5f5f5;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 12;
	text-align: center
}

.login-loading-screen .login-loading-bar {
	position: relative;
	height: 100vw;
	display: block;
	width: 100%;
	background-color: #fff;
	background-clip: padding-box;
	overflow: hidden
}

.login-loading-screen .login-loading-bar::after,.login-loading-screen .login-loading-bar::before {
	content: '';
	background-color: rgba(0, 0, 0, 0.0);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	will-change: left,right;
	animation: login-loading-bar 2.1s cubic-bezier(.65,.815,.735,.395) infinite
}

.login-loading-screen .login-loading-bar::after {
	animation: login-loading-bar-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;
	animation-delay: 1.15s
}

.login-loading-spacer {
	height: 95vh
} */

/* 이미지 로딩 */

.game_guide_loading {
    width: 25px;
    height: 25px;
    display: inline-block;
    padding: 0px;
    border-radius: 100%;
    border: 4px solid;
    border-top-color: rgba(247, 192, 0, 0.75);
    border-bottom-color: rgba(247, 192, 0, 0.35);
    border-left-color: rgba(247, 192, 0, 0.75);
    border-right-color: rgba(247, 192, 0, 0.35);
    -webkit-animation: rotateloader 0.8s linear infinite;
    animation: rotateloader 0.8s linear infinite;
}

/* 리스트 로딩 */

.list_loading_wrap {
    display: none;
    width: 100%;
    text-align: center;
    /* height: 100%; */
    position: absolute;
    /* background: #fff; */
    padding-top: 20px;
    z-index: 1;
}

.list_loading_wrap .list_loading {
    width: 16px;
    height: 16px;
    display: inline-block;
    padding: 0px;
    border-radius: 100%;
    border: 3px solid;
    border-top-color: rgba(247, 192, 0, 0.75);
    border-bottom-color: rgba(247, 192, 0, 0.35);
    border-left-color: rgba(247, 192, 0, 0.75);
    border-right-color: rgba(247, 192, 0, 0.35);
    -webkit-animation: rotateloader 0.8s linear infinite;
    animation: rotateloader 0.8s linear infinite;
}

/* 메인 하트, 캐시 정보 */

.my_info_loading {
    display: none;
    width: 5px;
    height: 5px;
    display: inline-block;
    padding: 0px;
    border-radius: 100%;
    border: 2px solid;
    border-top-color: rgba(247, 192, 0, 0.75);
    border-bottom-color: rgba(247, 192, 0, 0.35);
    border-left-color: rgba(247, 192, 0, 0.75);
    border-right-color: rgba(247, 192, 0, 0.35);
    -webkit-animation: rotateloader 0.8s linear infinite;
    animation: rotateloader 0.8s linear infinite;
}

/* 배너 로딩 */

.preloader4 {
    width: 5px;
    height: 5px;
    display: inline-block;
    padding: 0px;
    border-radius: 100%;
    border: 2px solid;
    border-top-color: rgba(255, 255, 255, 0.65);
    border-bottom-color: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.65);
    border-right-color: rgba(255, 255, 255, 0.15);
    -webkit-animation: rotateloader 0.8s linear infinite;
    animation: rotateloader 0.8s linear infinite;
}

/* 프로필 로딩 */
.pointerloader_wrap {
    width: 100%;
    text-align: center;
    line-height: 60px;
}

.pointerloader {
    display: inline-block;
    font-size: 0px;
    padding: 0px;
}

.pointerloader span {
    vertical-align: middle;
    /* border-radius:100%; */
    background: #f7c000;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 2px 2px;
    -webkit-animation: boxloader 0.8s linear infinite alternate;
    animation: boxloader 0.8s linear infinite alternate;
}

.pointerloader span:nth-child(1) {
    -webkit-animation-delay: -0.8;
    animation-delay: -0.8s;
}

.pointerloader span:nth-child(2) {
    -webkit-animation-delay: -0.53333s;
    animation-delay: -0.53333s;
}

.pointerloader span:nth-child(3) {
    -webkit-animation-delay: -0.26666s;
    animation-delay: -0.26666s;
}

/* 하트 구매 로딩 */

.purchaseloader_wrap {
    display: none;
    width: 100%;
    text-align: center;
    line-height: 32px;
}

.purchaseloader {
    display: inline-block;
    font-size: 0px;
    padding: 0px;
}

.purchaseloader span {
    vertical-align: middle;
    /* border-radius:100%; */
    background: #f7c000;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 2px 2px;
    -webkit-animation: boxloader 0.8s linear infinite alternate;
    animation: boxloader 0.8s linear infinite alternate;
}

.purchaseloader span:nth-child(1) {
    -webkit-animation-delay: -0.8;
    animation-delay: -0.8s;
}

.purchaseloader span:nth-child(2) {
    -webkit-animation-delay: -0.53333s;
    animation-delay: -0.53333s;
}

.purchaseloader span:nth-child(3) {
    -webkit-animation-delay: -0.26666s;
    animation-delay: -0.26666s;
}




/* ----------------------------------------- */

/* 로딩 */

/* ----------------------------------------- */
/* 리스트 로딩 */
.ani_list_fade {
    border-radius: 6px;
    animation: ani-box-fade-in-out 1400ms linear infinite;
}
.ani_list_fade:nth-child(10n+1) {
    animation-delay: 100ms;
}
.ani_list_fade:nth-child(10n+2) {
    animation-delay: 200ms;
}
.ani_list_fade:nth-child(10n+3) {
    animation-delay: 300ms;
}
.ani_list_fade:nth-child(10n+4) {
    animation-delay: 400ms;
}
.ani_list_fade:nth-child(10n+5) {
    animation-delay: 500ms;
}
.ani_list_fade:nth-child(10n+6) {
    animation-delay: 600ms;
}
.ani_list_fade:nth-child(10n+7) {
    animation-delay: 700ms;
}
.ani_list_fade:nth-child(10n+8) {
    animation-delay: 800ms;
}
.ani_list_fade:nth-child(10n+9) {
    animation-delay: 800ms;
}
.ani_list_fade:nth-child(10n+10) {
    animation-delay: 800ms;
}
@keyframes ani-box-fade-in-out{
    0% {opacity:1; background-color: #fff;}
    20%{opacity:0.5; background-color: #fff;}
    40%{opacity:1; background-color: #fff;}
}

/* ----------------------------------------- */

/* ETC */

/* ----------------------------------------- */

.blind {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.hr_type {
    display: block !important;
    height: 7px;
    margin: 0;
    background-color: #171717;
    border: 0;
}

.bg.on {
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: background 0.3s ease-in-out 0s;
    -webkit-transition: background 0.3s ease-in-out 0s;
}

/* 스크롤 */

::-webkit-scrollbar {
    display: none;
}

/* blur */

.blur_animation.on {
    transition: all 0.25s ease-in-out;
    filter: blur(4px);
}

/* ----------------------------------------- */

/* modal */

/* ----------------------------------------- */

.modal {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20000 !important;
    width: 100% !important;
    height: 100vh !important;
    /* background: rgba(0,0,0,0.0); */
    /* background: rgba(0, 0, 0, 0.5); */
    /* transition: background 0.3s ease-in-out 0s;
    -webkit-transition: background 0.3s ease-in-out 0s; */
    /* filter: blur(4px); */
}

.modal.on {
    background: rgba(0, 0, 0, 0.7);
    /* transition: background 0.3s ease-in-out 0s;
    -webkit-transition: background 0.3s ease-in-out 0s; */
}

.modal.off {
    background: rgba(0, 0, 0, 0.7);
}

.modal_bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background: transparent;
}

.layer_inner {
    z-index: 10001;
}

/* 알림 */

.alert_box {
    z-index: 10001;
    width: 294px;
    padding-bottom: 11px;
    line-height: 17px;
    /* background-color: #fff; */
    border-radius: 12px;
    background: #fff;
    /* box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5); */
    position: relative;
	-webkit-animation: ani_layer 0.3s forwards;
	animation: ani_layer 0.3s forwards;
}

@-webkit-keyframes ani_layer {
	20% {
		-webkit-transform: scale3d(1.01, 1.01, 1);
		transform: scale3d(1.01, 1.01, 1);
	}
	35% {
		-webkit-transform: scale3d(1.02, 1.02, 1);
		transform: scale3d(1.02, 1.02, 1);
	}
    85% {
		-webkit-transform: scale3d(0.995, 0.995, 1);
		transform: scale3d(0.995, 0.995, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes ani_layer {
	20% {
		-webkit-transform: scale3d(1.01, 1.01, 1);
		transform: scale3d(1.01, 1.01, 1);
	}
	35% {
		-webkit-transform: scale3d(1.02, 1.02, 1);
		transform: scale3d(1.02, 1.02, 1);
	}
    85% {
		-webkit-transform: scale3d(0.995, 0.995, 1);
		transform: scale3d(0.995, 0.995, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@-webkit-keyframes ani_bubble {
	60% {
		-webkit-transform: scale3d(1.01, 0.99, 1);
		transform: scale3d(1.01, 0.99, 1);
	}
	75% {
		-webkit-transform: scale3d(0.99, 1.01, 1);
		transform: scale3d(0.99, 1.01, 1);
	}
    85% {
		-webkit-transform: scale3d(1.01, 0.99, 1);
		transform: scale3d(1.01, 0.99, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes ani_bubble {
	60% {
		-webkit-transform: scale3d(1.03, 0.97, 1);
		transform: scale3d(1.03, 0.97, 1);
	}
	75% {
		-webkit-transform: scale3d(0.97, 1.03, 1);
		transform: scale3d(0.97, 1.03, 1);
	}
    85% {
		-webkit-transform: scale3d(1.01, 0.97, 1);
		transform: scale3d(1.01, 0.97, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
.alert_box .alert_box_title {
    display: block;
    padding: 24px 0px 20px 21px;
    color: #333;
    font-size: 16px;
    text-align: left;
}

.alert_box .alert_type_area {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.alert_box .alert_type_area>div {
    padding: 0px 22px 30px 22px;
    color: #333;
    text-align: left;
    line-height: 20px;
}

.alert_box .alert_type_area a {
    display: block;
    float: left;
    width: 66px;
    height: 65px;
    margin: 0 0 7px;
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

.alert_box .alert_type_area a:before {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 3px;
    vertical-align: top;
    content: '';
}

.alert_box .alert_type_btn {
    margin: 10px 15px 9px;
    text-align: center;
}

.alert_box .alert_type_btn_box {
    height: 32px;
}

.alert_box .alert_type_btn_inapp .btn_confirm {
    display: block;
}

.alert_box .btn_confirm {
    float: right;
    display: none;
    padding: 0 12px 2px 12px;
    color: #0073e8;
    font-size: 13px;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    border-left: 0px;
    cursor: pointer;
}

.alert_box .alert_type_btn_inapp .btn_cancel {
    display: block;
}

.alert_box .btn_cancel {
    float: right;
    display: none;
    padding: 0 12px;
    color: #666;
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    border-left: 0px;
}

/* 로딩 알림 */

.alert_loading_box {
    z-index: 10001;
    width: 294px;
    padding-bottom: 20px;
    line-height: 17px;
    background-color: #fff;
    border-radius: 6px;
}

.alert_loading_box .alert_loading_box_title {
    display: block;
    padding: 16px 0px 20px 0px;
    color: #333;
    font-size: 16px;
    text-align: left;
}

.alert_loading_box .alert_type_area {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.alert_loading_box .alert_type_area>div {
    padding: 0px 30px 0px 30px;
    color: #777;
    text-align: center;
}

.alert_loading_box .alert_type_area a {
    display: block;
    float: left;
    width: 66px;
    height: 65px;
    margin: 0 0 7px;
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

.alert_loading_box .alert_type_area a:before {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 3px;
    vertical-align: top;
    content: '';
}

.alert_loading_box .alert_type_btn {
    margin: 6px 15px 9px 15px;
    text-align: center;
}

.alert_loading_box .alert_type_btn_box {
    height: 32px;
}

.alert_loading_box .alert_type_btn_inapp .btn_confirm {
    display: block;
}

.alert_loading_box .btn_confirm {
    float: right;
    display: none;
    min-width: 56px;
    padding: 0 4px;
    color: #5e5050;
    font-size: 13px;
    font-weight: bold;
    height: 35px;
    line-height: 34px;
    border-left: 0px;
}

.alert_loading_box .alert_type_btn_inapp .btn_cancel {
    display: block;
}

.alert_loading_box .btn_cancel {
    float: right;
    display: none;
    min-width: 56px;
    padding: 0 4px;
    color: #666;
    font-size: 13px;
    height: 35px;
    line-height: 34px;
    border-left: 0px;
}

/* 로딩 캐릭터 */

.alert_char_loading_box {
    z-index: 10001;
    width: 66px;
    height: 66px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.7);
}

.alert_char_loading_box .alert_type_area {
    position: absolute;
    top: 8px;
    left: 9px;
    content: '';
    background-position: 0 0;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background-image: url(/ico_char_14.png);
    background-repeat: no-repeat;
    background-size: 50px 50px;
    opacity: 1;
    animation: ani_char_loading 1.5s infinite;
}

/* URL Dialog */

.dialog_url_box {
    z-index: 10001;
    width: 100%;
}

.dialog_url_box .dialog_url_box_title {
    display: block;
    padding: 25px 0px 20px 21px;
    color: #333;
    font-size: 16px;
    text-align: left;
}

.dialog_url_box .alert_type_area {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.dialog_url_box .alert_type_area>div {
    color: #333;
    text-align: left;
}

/* URL overlay */

.overlay_url {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 10001;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.NO_TAP_HIGHLIGHT{
    -webkit-tap-highlight-color:transparent;
}
.NO_TAP_HIGHLIGHT * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

.ripple {
    position: absolute;
    background: rgba(255, 230, 0, .55);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
    margin: 10px;
}

.ripple.show {
    -webkit-animation: ani_ripple 1.0s ease-out;
    animation: ani_ripple 1.0s ease-out;
}


/* ----------------------------------------- */

/*  로그인 Layer 팝업 */

/* ----------------------------------------- */

.layer_login .icon_area {
    padding: 23px 0 0;
    text-align: center;
}

.layer_login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    margin-left: -145px;
    background-color: #fff;
    border-radius: 6px;
    width: 290px;
    z-index: 10000;
}

.layer_login .title_box .icon.close {
    position: absolute;
    top: -7px;
    right: 18px;
}

.layer_login .title_box .icon.close:before {
    display: block;
    content: '';
    background-position: 0 0;
    width: 14px;
    height: 14px;
    margin: 0 auto 12px;
    background-image: url(https://static.popcongame.com/images/common/ico_close.png);
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

.layer_login .title_box .icon.logo:before {
    display: block;
    content: '';
    background-position: 0 0;
    width: 112px;
    height: 46px;
    margin: 0 auto 12px;
    background-image: url(https://static.popcongame.com/images/common/logo.png);
    background-repeat: no-repeat;
    background-size: 112px 46px;
}

.layer_login .login_box .icon .title {
    font-weight: 600;
    font-size: 18px;
}

.layer_login .login_box .sub_txt {
    padding: 12px 17px 34px;
    font-size: 13px;
    color: #777;
    text-align: center;
}

.layer_login .login_box .btn_wrap a {
    display: block;
    height: 52px;
    background-color: #fff6d6;
    line-height: 52px;
    text-align: center;
    border-radius: 0 0 0 6px;
}

.layer_login .login_box .btn_left,
.layer_login .login_box .btn_right {
    float: left;
    width: 50%;
}

.layer_login .login_box .btn_txt {
    color: #4e3739;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -1.5px;
}

.layer_login .login_box .btn_wrap .btn_point {
    background-color: #fede2a;
    border-radius: 0 0 6px 0;
}

.layer_login .login_box .btn_wrap .btn_point .btn_txt {
    color: #4e3739;
}

/* ----------------------------------------- */

/*  팝콘 지급 Layer 팝업 */

/* ----------------------------------------- */

.layer_give_popcon {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    margin-left: -160px;
    background-color: #fff;
    border-radius: 6px;
    width: 320px;
    z-index: 10000;
}

.layer_give_popcon .layer_event_bg {
    position: relative;
    content: '';
    background-position: 0 0;
    width: 100%;
    height: 260px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    background-position-y: 88px;
}

.layer_give_popcon .icon_area {
    padding: 23px 0 0;
    text-align: center;
}

.layer_give_popcon .txt_wrap {
    min-height: 105px;
}

.layer_give_popcon .icon_area.icon_close {
    position: absolute;
    top: -7px;
    right: 18px;
}

.layer_give_popcon .icon_area.icon_close:before {
    display: block;
    content: '';
    background-position: 0 0;
    width: 14px;
    height: 14px;
    margin: 0 auto 12px;
    background-image: url(https://static.popcongame.com/images/common/ico_close.png);
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

.layer_give_popcon .icon_area.icon_logo:before {
    display: block;
    content: '';
    background-position: 0 0;
    width: 112px;
    height: 46px;
    margin: 0 auto 12px;
    background-image: url(https://static.popcongame.com/images/common/logo.png);
    background-repeat: no-repeat;
    background-size: 112px 46px;
}

.layer_give_popcon .icon_area .icon_title {
    font-weight: 600;
    font-size: 18px;
}

.layer_give_popcon .sub_txt {
    padding: 100px 17px 34px;
    font-size: 13px;
    color: #777;
    text-align: center;
}

.layer_give_popcon .btn_wrap {
    margin: 10px;
}

.layer_give_popcon .btn_wrap a {
    width: 100%;
    height: 52px;
    background: #fede2a;
    line-height: 52px;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 3px;
}

.layer_give_popcon .btn_left,
.layer_give_popcon .btn_right {
    float: left;
    width: 100%;
}

.layer_give_popcon .btn_txt {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -1.5px;
}

.layer_give_popcon .btn_wrap .btn_point {
    color: #fff;
    background: linear-gradient(-45deg, #852afe, #E73C7E, #2380d5, #23D5AB);
    /* background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); */
    background-size: 400% 400%;
    -webkit-animation: ani_gradient 10s ease infinite;
    -moz-animation: ani_gradient 10s ease infinite;
    animation: ani_gradient 10s ease infinite;
    border: 0px solid rgba(0, 0, 0, 0.03);
    border-radius: 3px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
    /* -webkit-animation: ani_signal 1.5s infinite;
    animation: ani_signal 1.5s infinite; */
}

.layer_give_popcon .btn_wrap .btn_point .btn_txt {
    color: #fff;
}

/* ----------------------------------------- */

/* 로그인 중 로딩 화면 */

/* ----------------------------------------- */
.login_loader_wrap .popcon {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 102%;
    min-height: 102%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translate(-50%, -50%);
}

.login_loader_wrap .login_loader_area {
    padding: 120px 0 30px 0;
    text-align: center;
    vertical-align: middle;
}

.login_loader_wrap .login_loader_area .img_logo {
    height: 62px;
    animation: ani_jump_login 1s cubic-bezier(.51, .23, .02, .96) infinite;
}

.login_loader_wrap .login_loader_area .shadow {
    position: relative;
    text-align: center;
    bottom: 6px;
    margin: 0 auto;
    display: block;
    width: 22px;
    height: 4px;
    background: rgba(219, 205, 155, .5);
    border-radius: 100%;
    animation: ani_shadow 1s infinite;
    content: '';
}

.login_loader_wrap .login_loader_tlt {
    text-align: center;
    color: #dbcd9b;
    font-weight: bold;
    font-size: 22px;
}

.login_loader_wrap .login_loader_tlt.orange {
    color: #f37d16;
    font-size: 20px;
    margin-top: 22px;
}

.login_loader_wrap .login_loader_tlt .l_txt {
    display: inline-flex;
}

.login_loader_wrap .ld-a {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 0.0s ease infinite;
}

.login_loader_wrap .ld-b {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 0.15s ease infinite;
}

.login_loader_wrap .ld-c {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 0.3s ease infinite;
}

.login_loader_wrap .ld-d {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 0.45s ease infinite;
}

.login_loader_wrap .ld-e {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 0.6s ease infinite;
}

.login_loader_wrap .ld-f {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 0.75s ease infinite;
}

.login_loader_wrap .ld-g {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 0.9s ease infinite;
}

.login_loader_wrap .ld-h {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 1.05s ease infinite;
}

.login_loader_wrap .ld-i {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 1.2s ease infinite;
}

.login_loader_wrap .ld-j {
    padding: 0 1px;
    opacity: 0;
    animation: ani_loading_in 1.35s 1.35s ease infinite;
}

/* ----------------------------------------- */

/* 인트로 */

/* ----------------------------------------- */

#intro-group {
    display: none;
}

.intro-modal {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20000 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.intro-transitionWrapper video {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-color: #0f191e;
    background-position: center center;
    background-size: contain;
    /* object-fit: cover; */
    z-index: 1;
}

.intro-transitionWrapper .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.intro-transitionWrapper .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.intro-transitionWrapper .blur {
    transition: 0.5s filter linear;
    -webkit-transition: 0.5s -webkit-filter linear;
    -moz-transition: 0.5s -moz-filter linear;
    -ms-transition: 0.5s -ms-filter linear;
    -o-transition: 0.5s -o-filter linear;
}

.intro-transitionWrapper .intro-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.intro-transitionWrapper .skip {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 74px;
    font-size: 15px;
    padding: 8px;
    border: none;
    background: #ff6c00;
    color: #fff;
    border-radius: 36px;
    cursor: pointer;
}

.intro-transitionWrapper {
    left: 0;
    top: 0;
    width: 100%;
}

.intro-transitionWrapper {
    background: transparent;
    content: "";
    position: fixed !important;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 100000;
}

.intro-transitionWrapper {
    background: #ccc;
    /* pointer-events: none; */
    -webkit-transform: translateY(100vh);
    -ms-transform: translateY(100vh);
    transform: translateY(100vh);
    -webkit-transition: 0.85s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: 0.85s cubic-bezier(0.23, 1, 0.32, 1);
    transition: 0.85s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100%;
    height: 100%;
}

.slide-enter-active {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

div.slide-enter-done {
    opacity: 1;
    -webkit-transform: translateY(100vh);
    -ms-transform: translateY(100vh);
    transform: translateY(100vh);
}

/* ----------------------------------------- */

/* 오류 */

/* ----------------------------------------- */

.caution {
    font-size: 12px;
    margin: 3px 0 3px 1px;
}

.caution label {
    display: none;
    padding: 10px 12px 11px 12px;
    background: #000;
    color: #fede2a;
    animation: fadeOut 1.0s;
}

/* ----------------------------------------- */

/* keyframes */

/* ----------------------------------------- */

/* 물방울 효과 */

@-webkit-keyframes ani_ripple {
    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes ani_ripple {
    to {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 기본 돌아가는 로딩 */
@keyframes rotateloader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotateloader {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotateloader_1 {
    from {
        transform: rotate(-2deg);
    }
    to {
        transform: rotate(2deg);
    }
}

@-webkit-keyframes rotateloader {
    from {
        -webkit-transform: rotate(-2deg);
    }
    to {
        -webkit-transform: rotate(2deg);
    }
}

/* 사각형 3개 로딩 */

@keyframes boxloader {
    from {
        transform: scale(0, 0);
    }
    to {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes boxloader {
    from {
        -webkit-transform: scale(0, 0);
    }
    to {
        -webkit-transform: scale(1, 1);
    }
}

/* 하트 두근두근 */

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

/* 슬라이드 Up */

@keyframes ani_slideup {
    0% {
        opacity: 0;
        transform: translateY(33px)
    }
    50% {
        opacity: 0;
        transform: translateY(15px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes ani_slideup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(33px)
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(15px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

/* 슬라이드 Down */

@keyframes ani_slidedown {
    0% {
        opacity: 0;
        transform: translateY(-12px)
    }
    50% {
        opacity: 0;
        transform: translateY(-6px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes ani_slidedown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-22px)
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-6px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

/* 슬라이드 Left */

@keyframes ani_slideleft {
    100% {
        opacity: 1;
        transform: translateX(0px) translateY(0px) scale(1);
    }
}

@-webkit-keyframes ani_slideleft {
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) translateY(0px) scale(1);
    }
}

/* 돌발 아이콘 */

@keyframes bounce {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    28% {
        -webkit-transform: scaleY(0.9);
        transform: scaleY(0.9);
    }
    38% {
        -webkit-transform: scaleY(0.94);
        transform: scaleY(0.94);
    }
    50% {
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }
    70% {
        -webkit-transform: scaleY(0.99);
        transform: scaleY(0.99);
    }
    82% {
        -webkit-transform: scaleY(0.88);
        transform: scaleY(0.88);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    28% {
        -webkit-transform: scaleY(0.9);
        transform: scaleY(0.9);
    }
    38% {
        -webkit-transform: scaleY(0.94);
        transform: scaleY(0.94);
    }
    50% {
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }
    70% {
        -webkit-transform: scaleY(0.99);
        transform: scaleY(0.99);
    }
    82% {
        -webkit-transform: scaleY(0.88);
        transform: scaleY(0.88);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

/* 하트 무료 충전 */

@-webkit-keyframes heartScale {
    50% {
        opacity: 0;
        -webkit-transform: scale(1.0);
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1.0);
    }
}

@-moz-keyframes heartScale {
    50% {
        opacity: 0;
        -moz-transform: scale(1.0);
    }
    70% {
        opacity: 1;
        -moz-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1.0);
    }
}

@keyframes heartScale {
    50% {
        opacity: 0;
        transform: scale(1.0);
    }
    70% {
        opacity: 1;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}


/* 아이콘 슬라이드 UP */
@keyframes ani-icon-slideup {
    0% {
        opacity: 0;
        transform: translateY(250px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes ani-icon-slideup {
    0% {
        opacity: 0;
        -webkit-transform: translateY(250px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

/* 페이드 In */

@keyframes fadeIn {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeIn_5 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

/* 페이드 Out */

@keyframes fadeOut {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeout {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes transformin {
    from {
        transform: translateX(50%)
    }
    to {
        transform: translateX(0)
    }
}

@keyframes ani_showList {
    0% {
        opacity: 0;
        transform: translate(0, 236px)
    }
    50% {
        opacity: 0.5
    }
    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes ani_pulsate {
    0% {
        opacity: 0.5;
        transform: scale(1.4782, 1.4782)
    }
    100% {
        opacity: 0;
        transform: scale(2.9564, 2.9564)
    }
}


/* 아이콘 선택 흔들기 */

@-webkit-keyframes shake {
    0%,
    100% {
        -webkit-transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(10px);
    }
}

@-moz-keyframes shake {
    0%,
    100% {
        -moz-transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -moz-transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
        -moz-transform: translateX(10px);
    }
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

/* 랭킹 구름 배경 */

@-webkit-keyframes ani_clouds {
    0% {
        -webkit-transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(50px);
    }
    100% {
        -webkit-transform: translateX(0px);
    }
}

@keyframes ani_clouds {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0px);
    }
}

/* 캐릭터 점프 */
@keyframes ani_jump_login {
    0% {
        transform: scale(1, 1)
    }
    50% {
        transform: scale(0.85, 1.1) translateY(-15px)
    }
}
@keyframes ani_shadow {
    0% {
        transform: scale(1, 1)
    }
    50% {
        transform: scale(0.7, 1)
    }
}

/* 로그인중입니다 */
@keyframes ani_loading_in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 이미지 흔들 */
@keyframes ani_ottogi {
    from { transform: rotate(-2deg); }
    to { transform: rotate(2deg); }
}
@-webkit-keyframes ani_ottogi {
    from { -webkit-transform: rotate(-2deg); }
    to { -webkit-transform: rotate(2deg); }
}


/* KT 가입, 인증 팝콘 이미지 */
@keyframes ani_kt_popcon {
    50% {
        transform: scale(1.05)
    }
}
@-webkit-keyframes ani_kt_popcon {
    50% {
        transform: scale(1.05)
    }
}

/* 왕관 */
@-webkit-keyframes ani_crown {
   0% { -webkit-transform: rotate(-36deg); }
   10% { -webkit-transform: rotate(-46deg); }
   20% { -webkit-transform: rotate(-36deg); }
   30% { -webkit-transform: rotate(-46deg); }
   40% { -webkit-transform: rotate(-36deg); }
   50% { -webkit-transform: rotate(-46deg); }
   60% { -webkit-transform: rotate(-36deg); }
   70% { -webkit-transform: rotate(-46deg); }
   80% { -webkit-transform: rotate(-36deg); }
   90% { -webkit-transform: rotate(-46deg); }
   100% {}
}
@keyframes ani_crown {
    0% { transform: rotate(-36deg); }
    10% { transform: rotate(-46deg); }
    20% { transform: rotate(-36deg); }
    30% { transform: rotate(-46deg); }
    40% { transform: rotate(-36deg); }
    50% { transform: rotate(-46deg); }
    60% { transform: rotate(-36deg); }
    70% { transform: rotate(-46deg); }
    80% { transform: rotate(-36deg); }
    90% { transform: rotate(-46deg); }
    100% {}
}

/* 충전 하트 두근두근 */
@keyframes ani_charge_bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@-webkit-keyframes ani_charge_double_bounce {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes ani_charge_double_bounce {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* 팝콘 받기 KT 회원 프리리엄 혜택받기 */
@-webkit-keyframes ani_gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
@-moz-keyframes ani_gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
@keyframes ani_gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

/* etc 사용안함 */
@keyframes ani_signal {
    0% {
        transform: scale(.9);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
    }
    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
    }
}

@-webkit-keyframes ani_signal {
    0% {
        -webkit-transform: scale(.9);
    }
    70% {
        -webkit-transform: scale(1);
        box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
    }
    100% {
        -webkit-transform: scale(.9);
        box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
    }
}

/* 로딩 캐릭터 교체 효과 */

@keyframes ani_char_loading {
    0% {
        background-image: url(/ico_char_14.png);
    }
    20% {
        background-image: url(/ico_char_2.png);
    }
    40% {
        background-image: url(/ico_char_3.png);
    }
    60% {
        background-image: url(/ico_char_4.png);
    }
    80% {
        background-image: url(/ico_char_71.png);
    }
    100% {
        background-image: url(/ico_char_14.png);
    }
}

/* 배너 효과 */

@-webkit-keyframes mslide_01 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4)
    }
}

@keyframes mslide_01 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4)
    }
}

@-webkit-keyframes mslide_02 {
    0% {
        -webkit-transform: scale(3);
        transform: scale(3);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    6.5% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
        animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95)
    }
}

@keyframes mslide_02 {
    0% {
        -webkit-transform: scale(3);
        transform: scale(3);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    6.5% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
        animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95)
    }
}

@-webkit-keyframes mslide_03 {
    0% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes mslide_03 {
    0% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes mslide_04 {
    0% {
        -webkit-transform: scale(1.2) translateX(-20px);
        transform: scale(1.2) translateX(-20px)
    }
    100% {
        -webkit-transform: scale(1.2) translateX(20px);
        transform: scale(1.2) translateX(20px)
    }
}

@keyframes mslide_04 {
    0% {
        -webkit-transform: scale(1.2) translateX(-20px);
        transform: scale(1.2) translateX(-20px)
    }
    100% {
        -webkit-transform: scale(1.2) translateX(20px);
        transform: scale(1.2) translateX(20px)
    }
}

@-webkit-keyframes mslide_05 {
    0% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes mslide_05 {
    0% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@-webkit-keyframes mslide_06 {
    0% {
        -webkit-transform: scale(3);
        transform: scale(3);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    6.5% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    60% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
        animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes mslide_06 {
    0% {
        -webkit-transform: scale(3);
        transform: scale(3);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    6.5% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
    }
    60% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
        animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes mslide_07 {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
}

@keyframes mslide_07 {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
}



/* ----------------------------------------- */

/* 배너 광고 */

/* ----------------------------------------- */
.banner-wrapper .banner-content-outer {
    overflow: hidden;
    box-sizing: border-box;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
    margin-top: 0px;
    position: relative;
    /* height: 120px; */
    text-align: center;
    margin-bottom: 10px;
    margin: 10px 15px 20px 15px;
    border-radius: 12px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05);
    transition: all 500ms ease-in;
}
.banner-wrapper .banner-content-outer .banner-content {
    display:block;
    position:relative;
    /* width:360px; */
    margin:0 auto;
}
.banner-wrapper .banner-content-outer .banner-content .img {
    vertical-align:top;
    border:none;
}
.banner-wrapper .banner-content-outer .banner-content .ads {
    position: absolute;
    top: 7px;
    right: 7px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: 19px;
    line-height: 17px;
    padding: 0 8px;
    border-radius: 12px;
    border: 1px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 11px;
    vertical-align: middle;
    letter-spacing: -.5px;
    color: #fff;
    text-shadow: 0 0 42px rgba(0,0,0,.5);
    z-index: 10;
}

.banner-wrapper .banner-content-outer.on {
	-webkit-animation: ani_bubble_banner 0.4s forwards;
	animation: ani_bubble_banner 0.4s forwards;
}
@-webkit-keyframes ani_bubble_banner {
	60% {
		-webkit-transform: scale3d(1.03, 0.97, 1);
		transform: scale3d(1.03, 0.97, 1);
	}
	80% {
		-webkit-transform: scale3d(0.97, 1.03, 1);
		transform: scale3d(0.97, 1.03, 1);
	}
    90% {
		-webkit-transform: scale3d(1.01, 0.98, 1);
		transform: scale3d(1.01, 0.98, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes ani_bubble_banner {
	60% {
		-webkit-transform: scale3d(1.03, 0.97, 1);
		transform: scale3d(1.03, 0.97, 1);
	}
	80% {
		-webkit-transform: scale3d(0.97, 1.03, 1);
		transform: scale3d(0.97, 1.03, 1);
	}
    90% {
		-webkit-transform: scale3d(1.01, 0.98, 1);
		transform: scale3d(1.01, 0.98, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@media all and (max-width: 400px){
    .banner-wrapper .banner-content-outer {
        height: auto;
    }
    .banner-wrapper .banner-content-outer .banner-content {
        width: 100%;
        height: auto;
    }
    .banner-wrapper .banner-content-outer .banner-content .img {
        height: auto;
        width: 100%;
    }
}

/* ----------------------------------------- */

/* 애드센스 광고 */

/* ----------------------------------------- */
.adsense {
    margin: 10px 15px;
}

.adsense .adsense-content-outer {
    display: block;
    overflow: hidden;
    width: 100%;
    transform: scaleY(.93);
    border-radius: 12px;
    /* box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05); */
    background: #f1f1f1;
}

/* ----------------------------------------- */

/* 뱃지 */

/* ----------------------------------------- */
.badge.beta {
    background: linear-gradient(120deg, #f8590d 0%, #ff7b0a 35%, #ff9211 55%, #ffb779 100%);
    border: 2px solid #fff;
    opacity: 0.95;
}
.badge.event {
    background: linear-gradient(120deg, #9d00ff 0%, #aa1bdc 35%, #bc23d8 55%, #ea3eff 100%);
    border: 2px solid #fff;
    opacity: 0.95;
}
.badge.inspect {
    background: linear-gradient(120deg, #000 0%, #111 35%, #333 55%, #666 100%);
    border: 2px solid #fff;
    opacity: 0.95;
}
.badge.soon {
    background: linear-gradient(120deg, #02a7a0 0%, #0daba5 35%, #19bbb5 55%, #00cec6 100%);
    border: 2px solid #fff;
    opacity: 0.95;
}
.badge.green {
    /* background: rgba(0,199,60,.9); */
    background: linear-gradient(120deg, #08a136 0%, #0fab3e 35%, #07ad39 55%, #0bbf42 100%);
    border: 2px solid #04ad37;
    opacity: 0.96;
}
.badge.yellow {
    background: rgba(255,216,0,.9);
    color: #000;
}
.badge.orange {
    background: linear-gradient(120deg, #f8800d 0%, #ff820a 35%, #fb9430 55%, #ff9631 100%);
    border: 2px solid #f8800d;
    opacity: 0.96;
}
.badge.pink {
    background: linear-gradient(120deg, #ed0768 0%, #ed0768 35%, #f54f95 55%, #f54f95 100%);
    border: 2px solid #ed0768;
    opacity: 0.96;
}
.badge.red {
    /* background: rgba(251,90,89,.9); */
    background: linear-gradient(120deg, #d62a30 0%, #d62a30 35%, #e82028 55%, #ff161f 100%);
    border: 2px solid #d51c3c;
}
.badge.shortcut {
    /* background: rgba(251,90,89,.9); */
    background: linear-gradient(120deg, #d62a30 0%, #d62a30 35%, #e82028 55%, #ff161f 100%);
    border: 2px solid #d51c3c;
}
.badge {
    position: absolute;
    top: -2px;
    left: -2px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    min-width: 24px;
    height: 25px;
    line-height: 20px;
    padding: 0 8px 0 9px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    vertical-align: middle;
    letter-spacing: -.5px;
    color: #fff;
    /* text-shadow: 1px 1px 0 rgba(0,0,0,.1); */
    background: rgba(0,0,0,.9);
    text-align: center;
    z-index: 10;
    border-radius: 0 4px 16px 4px;
}


.badge_new {
 
    position: absolute;
    top: -5px;
    left: -5px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    min-width: 24px;
    height: 25px;
    line-height: 20px;
    padding: 0 8px 0 9px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.9em;
    font-weight: 700;
    vertical-align: middle;
    letter-spacing: -.5px;
    color: #FFF;
    background: #d51c3c;
    border: 2px solid #EFEFEF;
    opacity: 0.95;        
    text-align: center;
    z-index: 10;
    border-radius: 8px 8px 8px 8px;
	padding-top:1px;

}

.badge_hot {

    position: absolute;
    top: -5px;
    left: -5px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    min-width: 24px;
    height: 25px;
    line-height: 20px;
    padding: 0 8px 0 9px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.9em;
    font-weight: 700;
    vertical-align: middle;
    letter-spacing: -.5px;
    color: #FFF;
    background: #5cba3b;
    border: 2px solid #EFEFEF;
    opacity: 0.95;
    text-align: center;
    z-index: 10;
    border-radius: 8px 8px 8px 8px;
	padding-top:1px;

}

@media (max-width: 360px) {
    .badge {
        height: 23px;
        line-height: 18px;
        font-size: 11px;
    }
}

.badge-kt {
    position: absolute;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 30px;
    height: 28px;
    padding: 0 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 23px;
    vertical-align: middle;
    letter-spacing: -.5px;
    color: #fff;
    /* text-shadow: 1px 1px 0 rgba(0,0,0,.1); */
    border: 2px solid #d51c3c;
    background: linear-gradient(120deg, #d62a30 0%, #d62a30 35%, #e82028 55%, #ff161f 100%);
    border-radius: 50% 2px 50% 2px;
    z-index: 10000;
}
.badge-kt::before {
    background-image: url(https://static.popcongame.com/images/common/ico_kt_w.png);
    background-size: 15px 11px;
    background-repeat: no-repeat;
    width: 15px;
    height: 11px;
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
}
.diagonal_badge {
    position: absolute;
    top: -9px;
    left: -44px;
    z-index: 1;
    width: 120px;
    height: 50px;
    line-height: 70px;
    background: #fff;
    background: #00cd3c;
    content: "EVENT";
    font-size: 15px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: -1px;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
    z-index: 1;
}
.diagonal_badge.default {
    background: #523838;
}

.diagonal_badge.sale {
    background: #f86441;
}

.diagonal_badge.free {
    background: #f7c000;
}

.diagonal_badge.ad {
    background: #00cd3c;
}

.diagonal_badge em {
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    padding-left: 2px;
}



.bi {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    display: -webkit-box;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    /* -webkit-line-clamp: 1; */
    /* -webkit-box-orient: vertical; */
    /* min-width: 23px; */
    width: 100%;
    height: 20px;
    padding: 0 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 23px;
    vertical-align: middle;
    letter-spacing: -.5px;
    color: #fff;
    /* text-shadow: 1px 1px 0 rgba(0,0,0,.1); */
    /* background: #e8dbcc; */
    /* background: linear-gradient(120deg, #fff 55%, #f7c000 70%, #f7c000 80%, #c74b26 100%); */
    background: linear-gradient(120deg, #fff4cc 0%, #fff 20%, #fff 55%, #f7c000 70%, #f7c000 80%, #c74b26 100%);
    /* border-bottom: 1px dashed #fff; */
    border-radius: 6px 6px 0 0;
    z-index: 10;
    border-left: 1px solid #fff4cc;
    border-top: 1px solid #fff4cc;

    color: #e5940e;
    font-size: 10px;
    font-weight: bold;
    line-height: 19px;
}
.bi em {
    color: #f78b00;
    font-weight: bold;
}
.bi img {
    height: 15px;
    position: absolute;
    top: 3px;
    left: 8px;
    right: 0;
    /* margin: 0 auto; */
}

/* ----------------------------------------- */

/* 더보기 */

/* ----------------------------------------- */
.more {
    border-top: 0px solid rgba(0,0,0,.05);
}
.more a {
    display: block;
    min-height: 42px;
    padding: 12px 0 13px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    letter-spacing: -1px;
    color: #999;
    text-align: center;
    word-break: keep-all;
    word-wrap: break-word;
}
.more a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 11px;
    margin-left: 6px;
    vertical-align: -1px;
    background: url(./img/ico_comment_all.png) no-repeat 0 0;
    background-size: 6px 11px;
}

/* ----------------------------------------- */

/* 좌/우 그라데이션 */

/* ----------------------------------------- */
.grd_prev {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 100%;
    background: -webkit-gradient(linear,left top,right top,color-stop(16.66%,#fff),color-stop(100%,rgba(255,255,255,0)));
    z-index: 10;
}
.grd_next {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 100%;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(60%,#fff));
    z-index: 10;
}

.grd_prev_b {
    position: absolute;
    top: 1px;
    left: 0;
    width: 18px;
    height: 100%;
    background: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #f3f3f3 60%);
    background: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #f3f3f3 60%);
    background: -o-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #f3f3f3 60%);
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #f3f3f3 60%);
    z-index: 1000;
}
.grd_next_b {
    position: absolute;
    top: 1px;
    right: 0;
    width: 18px;
    height: 100%;
    background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f3f3 60%);
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f3f3 60%);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f3f3 60%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f3f3f3 60%);
    z-index: 1000;
}

.grd_prev_i {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 100%;
    background: -webkit-gradient(linear,left top,right top,color-stop(16.66%,#ffd100),color-stop(100%,rgba(255,209,0,0)));
    z-index: 1000;
}
.grd_next_i {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 100%;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,209,0,0)),color-stop(60%,#ffd100));
    z-index: 1000;
}


/* ----------------------------------------- */

/* 기타 */

/* ----------------------------------------- */
.dimmed.on {
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.dimmed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4900;
    width: 100%;
    height: 0;
    background: transparent;
    transition: background 0.4s ease-in-out 0s;
    -webkit-transition: background 0.4s ease-in-out 0s;
}

.dimmed_w.on {
    height: 100%;
    background: #fff;
}

.dimmed_w {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4900;
    width: 100%;
    height: 0;
    background: transparent;
}

/* 기본 로딩 */
.body-content-loading-overlay {
    display: block;
    filter: alpha(opacity=65);
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 6000;
}
.body-content-loading-spinner {
    position: fixed;
    top: 50vh;
    left: 50vw;
    margin-left: -25px;
    margin-top: -25px;
    text-align: center;
}
.body-content-loading-spinner .loader {
    width: 60px;
    height: 8px;
    display: block;
    margin: 0 auto;
}
.body-content-loading-spinner .loader>div{
    height: 100%;
    width: 8px;
    display: inline-block;
    float: left;
    margin-left: 2px;
    animation: ani_init_bar_loading 0.8s infinite ease-in-out;
}
.body-content-loading-spinner .loader .bar1{
    background-color: #754fa0 ;
    border-radius: 10px;
}
.body-content-loading-spinner .loader .bar2{
    background-color: #09b7bf;
    border-radius: 10px;
    animation-delay: -0.7s;
}
.body-content-loading-spinner .loader .bar3{
    background-color: #90d36b;
    border-radius: 10px;
    animation-delay: -0.6s;
}
.body-content-loading-spinner .loader .bar4{
    background-color: #f2d40d;
    border-radius: 10px;
    animation-delay: -0.5s;
}
.body-content-loading-spinner .loader .bar5{
    background-color: #fcb12b;
    border-radius: 10px;
    animation-delay: -0.4s;
}
.body-content-loading-spinner .loader .bar6{
    background-color: #ed1b72;
    border-radius: 10px;
    animation-delay: -0.3s;
}
@keyframes ani_init_loading {
    from { transform: rotate(0deg); }
    to {  transform: rotate(360deg); }
}
@keyframes ani_init_bar_loading {
    0%, 40%, 100% { 
        transform: scaleY(0.05);
        -webkit-transform: scaleY(0.05);
    }  20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}













/* 컨텐츠 */
@keyframes ani_content_active {
    0% {
        transform: translateX(-40px)
    }
    100% {
        transform: translateX(0)
    }
}
@keyframes ani_content_next {
    0% { 
        transform: translateX(40px) 
    }
    100% {
        transform: translateX(0)
    }
}
@keyframes ani_content_previous {
    0% {
        transform: translateX(-40px)
    }
    100% {
        transform: translateX(0)
    }
}
@keyframes ani_background_next {
    0% {
        transform: translateX(10px)
    }
    100% {
        transform: translateX(0)
    }
}
@keyframes ani_background_previou {
    0% {
        transform: translateX(-10px)
    }
    100% {
        transform: translateX(0)
    }
}
@keyframes ani_background_next-y-center
{
    0%
    {
        transform: translate(10px,-50%)
    }
    100%
    {
        transform: translate(0,-50%)
    }
}
@keyframes ani_background_previous-y-center
{
    0%
    {
        transform: translate(-10px,-50%)
    }
    100%
    {
        transform: translate(0,-50%)
    }
}
@keyframes ani_background_next-x-center
{
    0%
    {
        transform: translateX(-49%)
    }
    100%
    {
        transform: translateX(-50%)
    }
}
@keyframes ani_background_previous-x-center
{
    0%
    {
        transform: translateX(-51%)
    }
    100%
    {
        transform: translateX(-50%)
    }
}
@keyframes ani_background_next-x-center-y-center
{
    0%
    {
        transform: translate(-49%,-50%)
    }
    100%
    {
        transform: translate(-50%,-50%)
    }
}
@keyframes ani_background_previous-x-center-y-center
{
    0%
    {
        transform: translate(-51%,-50%)
    }
    100%
    {
        transform: translate(-50%,-50%)
    }
}


/* ----------------------------------------- */
/* 공유 */
/* ----------------------------------------- */
.share_box {
    width: 294px;
    padding-bottom: 9px;
    line-height: 17px;
    background-color: #fff;
    border-radius: 6px;
	-webkit-animation: ani_layer 0.3s forwards;
	animation: ani_layer 0.3s forwards;
}
.share_box .share_box_title {
    display: block;
    padding: 19px 50px 20px 50px;
    color: #333;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
}
.share_box .share_type_area {
    position: relative;
    overflow: hidden;
    margin: 0 13px;
    text-align: center;
}
.share_box .share_type_area > div {
    padding: 0 13px;
}
.share_box .share_type_area a {
    display: inline-block;
    /* display: block;
    float: left; */
    width: 80px;
    /* width: 59px; */
    height: 65px;
    margin: 0 0 7px;
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}
.share_box .share_type_area a:before {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 3px;
    vertical-align: top;
    content: '';
}
.share_box .share_type_copy {
    margin: 10px 21px 9px;
    text-align: center;
}
.share_box .share_type_copy_box {
    zoom: 1;
}
.share_box .share_type_copy_inapp .share_type_copy_url_1 {
    display: block;
}
.share_box .share_type_copy_url_1 {
    float: right;
    display: none;
    min-width: 56px;
    padding: 0 4px;
    color: #fff;
    font-size: 13px;
    line-height: 40px;
    border-left: 0px;
    background: #695143;
    border-radius: 0 6px 6px 0;
    border: 1px solid rgba(0,0,0,0.01);
}
.share_box .share_type_copy_inapp .share_type_copy_url_2 {
    padding-left: 12px;
    text-align: left;
}

.share_box .share_type_copy_url_2 {
    display: block;
    padding: 0 7px;
    overflow: hidden;
    color: #542828;
    font-size: 13px;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #e8e5e3;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 6px 0 0 6px;
    border: 1px solid rgba(0,0,0,0.05);
}

.share_box .share_close {
    position: absolute;
    top: 9px;
    right: 6px;
    padding: 11px;
}
.share_box .share_close span{
    overflow: hidden;
    display: block;
    color: transparent;
    width: 15px;
    height: 15px;
}
.share_box .share_ico_close {
    background-image: url(https://static.popcongame.com/images/common/ico_share_close.png);
    background-repeat: no-repeat;
    -webkit-background-size: 13px 13px;
}
.share_box .symbol {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 3px;
    vertical-align: top;
    content: '';
}
.share_box .lnk_facebook::before {
    background-image: url(https://static.popcongame.com/images/common/ico_share_facebook.png);
    background-repeat: no-repeat;
    background-size: 46px 46px;
    -webkit-background-size: 46px 46px;
    border-radius: 50%;
}
.share_box .lnk_twtter::before {
    background-image: url(https://static.popcongame.com/images/common/ico_share_twtter.png);
    background-repeat: no-repeat;
    background-size: 46px 46px;
    -webkit-background-size: 46px 46px;
    border-radius: 50%;
}
.share_box .lnk_line::before {
    background-image: url(https://static.popcongame.com/images/common/ico_share_line.png);
    background-repeat: no-repeat;
    background-size: 46px 46px;
    -webkit-background-size: 46px 46px;
    border-radius: 50%;
}
.share_box .lnk_kakao::before {
    background-image: url(https://static.popcongame.com/images/common/ico_share_kakao.png);
    background-repeat: no-repeat;
    background-size: 46px 46px;
    -webkit-background-size: 46px 46px;
    border-radius: 50%;
}
.share_box .share_opacity_bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: rgba(0,0,0,0.5);
}

/* 클립보드 닫기 */
.clipboard_box .share_clipboard_box {
    z-index: 10001;
    width: 270px;
    line-height: 17px;
    background-color: #fff;
    border-radius: 6px;
}
.clipboard_box .share_clipboard_pop {
    display: table;
    width: 100%;
    min-height: 60px;
    padding: 26px 0 18px;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
}
.clipboard_box .share_clipboard_msg {
    display: table-cell;
    padding: 0 15px;
    vertical-align: middle;
    line-height: 21px;
    color: #000;
    font-size: 15px;
}
.clipboard_box .share_clipboard_close {
    display: block;
    border-top: 1px solid #ddd;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.clipboard_box .share_clipboard_close_btn:only-child {
    width: 100%;
}

.clipboard_box .share_clipboard_close_btn:first-child {
    border: 0;
}
.clipboard_box .share_clipboard_close_btn {
    display: inline-block;
    width: 50%;
    padding: 15px 0 16px ;
    color: #000;
    border-left: 1px solid #e6e6e6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* 동영상 보기 */
.movie_box {
	padding:0 10px 0 10px;
}
.movie_box .play_box {
    z-index: 10001;
    width: 100%;
    overflow:scroll;
    border-radius: 6px 6px 0px 0px;

}

.movie_box .movie_clipboard_close {
    float: left;
    display: inline-block;
    width: 50%;
    padding: 5px 0 5px ;
    color: #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #FFFFFF;
    text-align:center;
    border-radius: 0px 0px 0px 6px;
}
.movie_box .movie_clipboard_play {
    display: inline-block;
    width: 50%;
    padding: 5px 0 5px ;
    color: #000;
    border-left: 1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #FFFFFF;
    text-align:center;
    border-radius: 0px 0px 6px 0px;
}
.movie_box .movie_clipboard_play a{
	color: #000;
}
.movie_box .movie_clipboard_close a{
	color: #000;
}
/* ----------------------------------------- */

/* 공유 */

/* ----------------------------------------- */
.login_group {

    background-color: #fff;
    width: 300px;
    z-index: 10000;
    line-height: 17px;
    background-color: #fff;
    border-radius: 12px;
    position: relative;
    -webkit-animation: ani_layer 0.3s forwards;
	animation: ani_layer 0.3s forwards;
}

/* .login_group:before {
    background-image: url();
    background-size: 644px 628px;
    background-position: -278px 0px;
    width: 286px;
    height: 56px;
    content: '';
    position: absolute;
    top: 97.5px;
    right: -75px;
} */

/* 로고, 닫기 */
.login_group .logo_box {
    position: relative;
    height: 75px;
}

.login_group .logo_box .icon.close {
    display: block;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 14px;
    height: 14px;
    padding: 10px;
}
.login_group .logo_box .icon.close::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-position: 0 0;
    width: 14px;
    height: 14px;
    background-image: url(https://static.popcongame.com/images/common/ico_close.png);
    background-repeat: no-repeat;
    background-size: 14px 14px;
}
.login_group .logo_box .icon.logo {
    display: block;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    content: '';
    background-position: 0 0;
    width: 92px;
    height: 39px;
    margin: 0 auto;
    background-image: url(https://static.popcongame.com/images/common/logo.png);
    background-repeat: no-repeat;
    background-size: 92px 39px;
}

/* 로그인 영역 : 타이틀 */
.login_group .login_box {
    display: block;
    overflow: hidden;
    text-align: center;
    height: 292px;
    transition: height 200ms ease;
}
.login_group .login_box.collapsed {
    height: 0px;
}
.login_group .login_box.expanded {
    height: 360px;
}
.login_group .login_box .title_wrap {
    margin: 0;
}

.login_group .login_box .title_wrap .sub_txt {
    padding: 0 17px;
    font-size: 22px;
    font-weight: 600;
    color: #610d0d;
    text-align: center;
}
.login_group .login_box .title_wrap .sub_desc {
    padding: 5px 40px;
    font-size: 12px;
    color: #771e1e;
    text-align: center;
}

/* 기프티쇼상품구매 : 썸네일 */
.login_group .login_box .thumItem{
    width: 120px;
    height: 126px;
    margin: 0px 0px 0px 0px;
}

/* 일일출석알림 영역 : 배너 */
.login_group .login_box .banner2{
    width: 150px;
    height: 156px;
    margin: 0px 0 5px 0;
}
.login_group .login_box .title_wrap_daily {
    margin: 0;
    padding:5px;
}

.login_group .login_box .title_wrap_daily .sub_txt {
	line-height:50xp;
    padding: 0 17px;
    font-size: 22px;
    font-weight: 600;
    color: #610d0d;
    text-align: center;
}
.login_group .login_box .title_wrap_daily .sub_desc {
    padding: 5px 40px;
    font-size: 12px;
    color: #771e1e;
    text-align: center;
}
/* 일일출석알림 영역 : OK 버튼 */
.login_group .login_box .p_wrapok {
    position: relative;
    padding: 0px 10px;
    margin: 5px;
}
.login_group .login_box .p_wrapok a {
    position: relative;
    display: block;
    text-align: center;
    border-radius: 6px;
    width: 100%;
    height: 42px;
    line-height: 42px;
    color: #fff;
    font-weight: 500;
    background-color: #ff4f00;
}
.login_group .login_box .p_wrapok .btn_txt {
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* 일일출석알림 영역 : 취소 버튼 */
.login_group .login_box .p_wrapcan {
    position: relative;
    padding: 0px 10px;
    margin: 5px;
}
.login_group .login_box .p_wrapcan a {
    position: relative;
    display: block;
    text-align: center;
    border-radius: 6px;
    width: 100%;
    height: 42px;
    line-height: 42px;
    color: #3b3b3b;
    font-weight: 600;
    background-color: #d4d4d4;
}
.login_group .login_box .p_wrapcan .btn_txt {
    font-size: 13px;
    letter-spacing: 0.5px;
}


/* 로그인 영역 : 배너 */
.login_group .login_box .banner{
    width: 246px;
    height: 176px;
    margin: 17px 0 15px 0;
}

/* 로그인 영역 : 로그인 버튼 */
.login_group .login_box .p_wrap {
    position: relative;
    padding: 0px 30px;
}
.login_group .login_box .p_wrap a {
    position: relative;
    display: block;
    text-align: center;
    border-radius: 6px;
    width: 100%;
    height: 42px;
    line-height: 42px;
    color: #fff;
    font-weight: 600;
    background-color: #ff4f00;
}
.login_group .login_box .p_wrap .btn_txt {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.login_group .purchase_item {
	padding : 0px 0 10px 50px;
    	font-size: 1em;
    	font-weight:500;
    	letter-spacing: 0.5px;
	color: #610d0d;
	text-align: left;
} 



/* 플랫폼 영역 : 타이틀 */
.login_group .platform_box {
    overflow: hidden;
    transition: height 200ms ease;
}
.login_group .platform_box.collapsed {
    height: 0px;
}
.login_group .platform_box.expanded {
    height: 120px;
}

/* 플랫폼 영역 : 로그인 버튼 */
.login_group .platform_box .platform_wrap {
    position: relative;
    padding: 22px 10px 10px 10px;
    border-radius: 12px;
    /* text-align: left; */
    text-align: center;
    margin: 0 13px;
    background: #f7f5f1;
}

.login_group .platform_box .platform_wrap a {
    display: inline-block;
    width: 60px;
    width: 80px;
    height: 70px;
    margin: 0 0 7px;
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}
.login_group .platform_box .platform_wrap a:before {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 3px;
    vertical-align: top;
    content: '';
}

.login_group .platform_box .platform_wrap .lnk_facebook::before {
    background-image: url(https://static.popcongame.com/images/common/ico_share_facebook.png);
    background-repeat: no-repeat;
    -webkit-background-size: 46px 46px;
    background-size: 46px 46px;
    border-radius: 50%;
}

.login_group .platform_box .platform_wrap .lnk_google::before {
    background-image: url(https://static.popcongame.com/images/common/ico_share_google.png);
    background-repeat: no-repeat;
    -webkit-background-size: 46px 46px;
    background-size: 46px 46px;
    border-radius: 50%;
}

.login_group .platform_box .platform_wrap .lnk_guest::before {
    background-image: url(https://static.popcongame.com/images/common/ico_share_guest.png);
    background-repeat: no-repeat;
    -webkit-background-size: 46px 46px;
    background-size: 46px 46px;
    border-radius: 50%;
}

.login_group .platform_box .platform_wrap .lnk_kakao::before {
    background-image: url(https://static.popcongame.com/images/common/ico_share_kakao.png);
    background-repeat: no-repeat;
    -webkit-background-size: 46px 46px;
    background-size: 46px 46px;
    border-radius: 50%;
}


/* 플랫폼 영역 : 뒤로가기 버튼 */
.login_group .platform_box .back_wrap {
    position: relative;
    padding: 16px 10px 10px 10px;
    text-align: center;
}

.login_group .platform_box .back_wrap a {
    display: inline-block;
    padding: 0 16px;
    height: 26px;
    line-height: 25px;
    color: #fff;
    background: #310000;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

/* 
.login_group .platform_box .platform_wrap a {
    position: relative;
    display: block;
    background-color: #4c040a;
    text-align: center;
    border-radius: 3px;
    font-weight: 600;
    margin: 0 0 10px 0;
}
.login_group .platform_box .platform_wrap .platform {
    width: 100%;
    height: 42px;
    line-height: 42px;
}
.login_group .platform_box .platform_wrap .platform.back {
    color: #000;
    background-color: #fff;
}
.login_group .platform_box .platform_wrap .platform.back::before {
    position: relative;
    top: 1px;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin: 0 6px 0 0;
    content: '';
    background: url(https://static.popcongame.com/images/common/ico_back_arrow_b.png) no-repeat 0 0;
    background-size: 12px 12px;
    background-position-y: -1px;
}
.login_group .platform_box .platform_wrap .platform.guest {
    color: #fff;
    background-color: #00c300;
}
.login_group .platform_box .platform_wrap .platform.kakao {
    color: #333;
    background-color: #f8d508;
}
.login_group .platform_box .platform_wrap .platform.facebook {
    color: #fff;
    background-color: #3a589e;
}
.login_group .platform_box .platform_wrap .platform.google {
    color: #fff;
    background-color: #e61800;
}
.login_group .platform_box .platform_wrap .platform .btn_txt {
    font-size: 15px;
    letter-spacing: 0;
} */

/* 게스트 영역 : 타이틀 */
.login_group .guest_box {
    overflow: hidden;
    height: 0px;
    transition: height 200ms ease;
}
.login_group .guest_box.collapsed {
    height: 0px;
}
.login_group .guest_box.expanded {
    height: 170px;
}

/* 게스트 영역 : 로그인 버튼 */
.login_group .guest_box .guest_wrap {
    position: relative;
    padding: 10px;
    padding: 0px 30px;
}
.login_group .guest_box .guest_wrap a {
    position: relative;
    display: block;
    background-color: #4c040a;
    text-align: center;
    border-radius: 3px;
    margin: 0 0 10px 0;
    font-weight: 600;
}
.login_group .guest_box .guest_wrap .id {
    height: 38px;
    padding: 0 8px;
    margin: 6px 0 10px 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0px;
    background-color: #fff;
    -webkit-appearance: none;
}
.login_group .guest_box .guest_wrap .id input {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0 none;
    font-size: 26px;
    font-weight: 600;
    color: #4c040a;
    text-align: center;
    background-color: #fff;
}
.login_group .guest_box .guest_wrap .platform {
    height: 42px;
    line-height: 42px;
}
.login_group .guest_box .guest_wrap .platform.back {
    color: #000;
    background-color: #fff;
}
.login_group .guest_box .guest_wrap .platform.back::before {
    position: relative;
    top: 1px;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin: 0 6px 0 0;
    content: '';
    background: url(https://static.popcongame.com/images/common/ico_back_arrow_b.png) no-repeat 0 0;
    background-size: 12px 12px;
    background-position-y: -1px;
}
.login_group .guest_box .guest_wrap .platform.guest {
    color: #fff;
    background-color: #4c040a;
}
.login_group .guest_box .guest_wrap .platform .btn_txt {
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* 게스트 영역 : 뒤로가기 버튼 */
.login_group .guest_box .back_wrap {
    position: relative;
    padding: 10px;
    text-align: center;
}

.login_group .guest_box .back_wrap a {
    display: inline-block;
    padding: 0 16px;
    height: 26px;
    line-height: 25px;
    color: #fff;
    background: #310000;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}


/* 약관 */
.login_group .policy_wrap {
    position: relative;
    height: 42px;
    line-height: 42px;
}
.login_group .policy_wrap a {
    position: relative;
    display: block;
    background-color: #310000;
    text-align: center;
    border-radius: 0 0 0 12px;
}
.login_group .policy_wrap a:first-child::before {
    width: 0px;
}
.login_group .policy_wrap a::before {
    content: "";
    width: 1px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: -.5px;
    background: rgba(0,0,0,0.25);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.login_group .policy_wrap .btn_left,
.login_group .policy_wrap .btn_right {
    float: left;
    width: 50%;
}

.login_group .policy_wrap .btn_txt {
    color: #aaa;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.login_group .policy_wrap .btn_point {
    border-radius: 0 0 12px 0;
}


/* ----------------------------------------- */

/* 백그라운드 클릭 */

/* ----------------------------------------- */
.bgClickTagRight {
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    right: calc(100% - 1*(50% - 1024px/2));
    right: -webkit-calc(100% - 1*(50% - 1024px/2));
    right: -moz-calc(100% - 1*(50% - 1024px/2));
}
.game-bg-filter{
    z-index: 2;
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-position: 50% 50%;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    width: 100%;
    -moz-filter: blur(40px);
    -webkit-filter: blur(40px);
    -o-filter: blur(40px);
    -ms-filter: blur(40px);
    filter: blur(40px);
    /* background-image: url() !important; */
    background-size: 100% !important;
    background-repeat: repeat;
    background-repeat: repeat;
    background-position: center top;
    background-size: cover;
    background-attachment : fixed;
}
.bgClickTagLeft {
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    left: calc(100% - 1*(50% - 1024px/2));
    left: -webkit-calc(100% - 1*(50% - 1024px/2));
    left: -moz-calc(100% - 1*(50% - 1024px/2));
}

/* ----------------------------------------- */

/* 앱에서 보기 버튼 */

/* ----------------------------------------- */
.app-branch {
    display:none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 80px;
    z-index: 1000;
    
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    letter-spacing: 0;
    /* -webkit-animation:ani_jelly 6s ease-in-out infinite;
    animation: ani_jelly 6s ease-in-out infinite; */
    -webkit-animation: bounce .8s ease-in-out infinite;
    animation: bounce .8s ease-in-out infinite;
    
    -webkit-transition: max-width .2s ease-in-out;
    -o-transition: max-width .2s ease-in-out;
    transition: max-width .2s ease-in-out;
    
}
.app-branch .iab-inner {
    position: relative;
    width: 158px;
    height: 46px;
    margin: 0 auto;
}

@-webkit-keyframes bounce{
    0%{
        -webkit-transform:translateY(.1em);
        transform:translateY(.1em);
    }
    50%{
        -webkit-transform:translateY(.4em);
        transform:translateY(.4em)
    }
    to{
        -webkit-transform:translateY(.1em);
        transform:translateY(.1em)
    }
}
@keyframes bounce{
    0%{
        -webkit-transform:translateY(.1em);
        transform:translateY(.1em);
    }
    50%{
        -webkit-transform:translateY(.4em);
        transform:translateY(.4em)
    }
    to{
        -webkit-transform:translateY(.1em);
        transform:translateY(.1em)
    }
}
@-webkit-keyframes ani_jelly{
    0%{
        -webkit-transform:matrix(1,0,0,1,0,0);
        transform:matrix(1,0,0,1,0,0)}
    50%{
        -webkit-transform:matrix3d(1.0593,0,-.1,.00025,0,.9603,.1,-.0001,.1,-.1,.9801,0,0,-3,0,1);
        transform:matrix3d(1.0593,0,-.1,.00025,0,.9603,.1,-.0001,.1,-.1,.9801,0,0,-3,0,1)
    }
    to{
        -webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)
    }
}
@keyframes ani_jelly{
    0%{
        -webkit-transform:matrix(1,0,0,1,0,0);
        transform:matrix(1,0,0,1,0,0)}
    50%{
        -webkit-transform:matrix3d(1.0593,0,-.1,.00025,0,.9603,.1,-.0001,.1,-.1,.9801,0,0,-3,0,1);
        transform:matrix3d(1.0593,0,-.1,.00025,0,.9603,.1,-.0001,.1,-.1,.9801,0,0,-3,0,1)
    }
    to{
        -webkit-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0)
    }
}

.app-branch .iab-inner .iab-link-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #f67b0f;
    border-radius: 50px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.35);
    margin: 10px 0 0 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: all 0.3s cubic-bezier(0.215,0.61,0.355,1);
    transition: all 0.3s cubic-bezier(0.215,0.61,0.355,1);
    
}
.app-branch .iab-inner .iab-link-wrap:before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
    background-image: url(https://static.popcongame.com/images/common/app_bg.png);
    width: 160px;
    height: 160px;
    /* opacity: 0.7; */
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate(10px,0) scale(1.5,1.5);
    animation: ani_app_rotate_bg 10s ease infinite normal;
}
@keyframes ani_app_rotate_bg {
    0% {}
    50% { transform: translate(30px, 0px) rotateZ(180deg) scale(2, 2) }
    100% {}
}

.app-branch .iab-inner .link {
    text-align: center;
}
.app-branch .iab-inner .txt {
    display: block;
    position: relative;
    height: 46px;
    line-height: 45px;
    font-size: 17px;
    font-weight: 600;
    text-shadow: 1px 1px 0 rgba(0,0,0,.05);
    z-index: 1;
}
.app-branch .iab-close-btn {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 84px;
    height: 23px;
    -webkit-background-size: 84px 23px;
    background-size: 84px 23px;
}

.app-branch .iab-close-btn, .bnr_s_layer .iab-close-btn {
    font-size: 1px;
    color: transparent;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}
.app-branch .iab-inner .iab-close-btn {
    top: -9px;
    right: -3px;
    width: 24px;
    height: 24px;
    -webkit-background-size: 32px 32px;
    background-size: 24px 24px;
    background-image: url(https://static.popcongame.com/images/common/ico_app_close.png);
    border-radius: 50%;
    border: 2px solid #f67b0f;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
}


/* 버튼 */
/* .btn {
    display: inline-block;
    position: relative;
    cursor: pointer;
    color: #F0F0F0;
    font-weight: bold;
    border-radius: 5px;
    border-bottom: 3px solid #280c00;
    border-top: 1px solid #280c00;
    border-left: 1px solid #280c00;
    border-right: 1px solid #280c00;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background-image: -webkit-linear-gradient(top, #f9ce00, #fff);
    background-image: linear-gradient(top, #f9ce00, #fff);
    background: #f9ce00;
    transition: all .05s linear;
}
.btn.btn-5 {
    padding: 10px 52px 15px 52px;
    font-size: 24px;
    box-shadow: inset 0px 10px 0px -7px #ffeb3b, inset 0px -10px 0px -7px #A25226;
    text-shadow: 2px 0px #000, 0px 2px #000, -1px 1px #000, 0px -1px #000, 2px 1px #000, 2px 2px #000, -1px 0px #000, 1px -1px #000;
}
.btn:hover {
    animation: ani-button 0.3s cubic-bezier(.51, .23, .02, .96) forwards;
}
.btn:active {
    animation: ani-button 0.3s cubic-bezier(.51, .23, .02, .96) forwards;
}
*/

@-webkit-keyframes ani-button {
    to {
        -webkit-transform: scale(.94);
        transform: scale(.94);
    }
}

@keyframes ani-button {
    to {
        -webkit-transform: scale(.94);
        transform: scale(.94);
    }
}

/* ----------------------------------------- */

/* 빈 페이지 안내 */

/* ----------------------------------------- */
.box-wait {
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100%;
    padding: 0 13px;
    text-align: center;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    box-sizing: border-box;
}
.box-wait.hide{
    display: none;
}
.box-wait .ico-comm {
    display: inline-block;
    overflow: hidden;
    font-size: 1px;
    line-height: 0;
    background: url(http://static.popcongame.com/images/char/ico_char_42.png) 0 0 no-repeat;
    background-size: 100px 100px;
    color: transparent;
    vertical-align: top;
}
.box-wait .img-bomb {
    width: 100px;
    height: 100px;
    /* background-position: -100px -100px; */
}
.box-wait .tit-wait {
    display: block;
    margin-top: 12px;
    color: #444;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -.03em;
}
.box-wait .txt-wait {
    margin-top: 13px;
    font-size: 16px;
    line-height: 18px;
    color: #888;
    letter-spacing: -.01em;
}
.box-wait .area-btn {
    margin-top: 28px;
    padding: 0 2px;
}
.box-wait .btn-wait {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.box-wait .btn-wait.btn_wait-1 {
    background-color: #ffdc00;
    color: #000;
}
.box-wait .btn-wait {
    display: block;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 106px;
    height: 46px;
    font-weight: 700;
    font-size: 15px;
    line-height: 46px;
    background-color: #5d5f66;
    color: #fff;
    text-align: center;
}




/* ----------------------------------------- */

/*  월정액 Layer 팝업 */

/* ----------------------------------------- */

.ban_join_kt .icon_area {
    padding: 23px 0 0;
    text-align: left;
}

.ban_join_kt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    margin-left: -145px;
    background-color: #fff;
    border-radius: 6px;
    width: 290px;
    z-index: 10000;
}

.ban_join_kt .txt_wrap {
    min-height: 105px;
}

.ban_join_kt .icon_area.icon_close {
    position: absolute;
    top: -7px;
    right: 18px;
}

.ban_join_kt .icon_area.icon_close:before {
    display: block;
    content: '';
    background-position: 0 0;
    width: 14px;
    height: 14px;
    margin: 0 auto 12px;
    background-image: url(https://static.popcongame.com/ktcont/common/ico_close.png);
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

.ban_join_kt .icon_area.icon_logo:before {
    display: block;
    content: '';
    background-position: 0 0;
    width: 112px;
    height: 46px;
    margin: 0 auto 12px;
    background-image: url(https://static.popcongame.com/ktcont/common/logo.png);
    background-repeat: no-repeat;
    background-size: 112px 46px;
}

.ban_join_kt .icon_area .icon_title {
    font-weight: 600;
    font-size: 18px;
}

.ban_join_kt .sub_txt {
    padding: 12px 17px 34px;
    font-size: 13px;
    color: #878080;
    text-align: left;
}

.ban_join_kt .sub_txt .kt {
    color: #d13044;
    font-weight: bold;
}

.ban_join_kt .sub_txt .free {
    color: #00a2e1;
}

.ban_join_kt .btn_wrap a {
    display: block;
    height: 52px;
    background-color: #481a1a;
    line-height: 52px;
    text-align: center;
    border-radius: 0 0 6px 6px;
}

.ban_join_kt .btn_left {
    width: 100%;
}

.ban_join_kt .btn_txt {
    color: #fede2a;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -1.5px;
}

.ban_join_kt .img_beta  {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 19px;
    height: 15px;
    margin: 0 0 0 60px;
}

/* 기프티쇼구매팝업 */
.alert_purchase {
    z-index: 10001;
    width: 294px;
    padding-bottom: 11px;
    line-height: 17px;
    border-radius: 12px;
    background: #FFFFFF;
    position: relative;
	-webkit-animation: ani_layer 0.3s forwards;
	animation: ani_layer 0.3s forwards;
}

.alert_purchase .alert_type_area {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.alert_purchase .alert_type_area>div {
    padding: 0px 22px 30px 22px;
    color: #333;
    text-align: left;
    line-height: 20px;
}

.alert_purchase .alert_type_area a {
    display: block;
    float: left;
    width: 66px;
    height: 65px;
    margin: 0 0 7px;
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

.alert_purchase .alert_type_area a:before {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 3px;
    vertical-align: top;
    content: '';
}
.alert_purchase .btn_box{
	padding : 10px 0 0 0;
	margin: 0 auto;
	text-align:center;
	height:30px;
}
.alert_purchase .btn_box .btnCancel{
	width:130px;
	height:30px;
    	display: inline-block;
    	position: relative;
    	cursor: pointer;
    	font-weight: bold;
    	border-radius: 5px;
    	/*
    	border-bottom: 1px solid #280c00;
    	border-top: 1px solid #280c00;
    	border-left: 1px solid #280c00;
    	border-right: 1px solid #280c00;
    	*/
    	-moz-user-select: none;
    	-ms-user-select: none;
    	-o-user-select: none;
    	user-select: none;
    	background-image: -webkit-linear-gradient(top, #f9ce00, #fff);
    	background-image: linear-gradient(top, #f9ce00, #fff);
    	background: #EFEFEF;
    	transition: all .05s linear;	
}
.alert_purchase .btn_box .btnPurchase{
	width:130px;
	height:30px;
    	display: inline-block;
    	position: relative;
    	cursor: pointer;
    	font-weight: bold;
    	border-radius: 5px;
    	/*
    	border-bottom: 3px solid #280c00;
    	border-top: 1px solid #280c00;
    	border-left: 1px solid #280c00;
    	border-right: 1px solid #280c00;
	*/
    	-moz-user-select: none;
    	-ms-user-select: none;
    	-o-user-select: none;
    	user-select: none;
    	background-image: -webkit-linear-gradient(top, #f9ce00, #fff);
    	background-image: linear-gradient(top, #f9ce00, #fff);
    	background: #f9ce00;
    	transition: all .05s linear;	

}

.alert_purchase .purchase_title { 
	height:40px;
	padding:15px 0 0 15px;
	font-weight:600;
	font-size:1.5em;
	line-height:40xp;
	border-bottom: 1px solid #3e3e3e;
}
.alert_purchase .purchase_desc { 
	height:35px;
	padding:5px 15px 0px 15px;
	font-weight:500;
	font-size:1em;
	text-align:center;
}
.alert_purchase .purchase_item { 
	background:#EFEFEF;
	padding:15px 15px 15px 15px;
	margin:0 5px 0 5px;
	font-weight:500;
	font-size:1em;
}
.alert_purchase .purchase_point{
	height:80px;
	padding: 10px 0 10px 25px;
	font-size:1.2em;
	font-weight:500;
	line-height:25px;
	color:#3E3E3E;
	border-bottom: 1px solid #3e3e3e;
}

.alert_purchase .btn_box .btnCancel a{
	color:#000000;	
	line-height:30px;
}

.alert_purchase .btn_box .btnPurchase a{
	color:#000000;	
	line-height:30px;
}