@charset "utf-8";

/* GCP WD Team. Author : Kwon Sung Soo 2016-10-04. Edit : Choi Hyunsun 2017-12-11 */

html{-webkit-text-size-adjust:none;}
body{margin:0;padding:0;font-family:'noto-regular',sans-serif;}
header, h1, h2, div, p, ul, li, dl, dd{margin:0;padding:0;line-height:100%;}
ul{list-style:none;}
img{border:0;vertical-align:top;}
a   {text-decoration:none;}

*:lang(ja){font-family:'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','Osaka','ＭＳ Ｐゴシック','MS PGothic',Arial,sans-serif;}
*:lang(zh-hans){font-family:Times New Roman;}
*:lang(zh-hant){font-family:Times New Roman;}
*:lang(vi){font-family:Times New Roman,Palatino,Bodoni,Optima,Century,Garamond,sans-serif;}

/* 공통 */
header  {width:100%;height:54px;position:relative;z-index:100;text-align:center;background:#fff;color:#333;}
header h1   {padding:14px 0 4px 0;font-size:18px;font-weight:normal;}
header p    {font-size:10px;color:#777;}
header .help   {width:42px;height:100%;position:absolute;top:0;left:0;background:url('img/btn_help.png') no-repeat;background-position:left top;background-size:42px auto;color:rgba(0,0,0,0);}
header .back   {width:42px;height:100%;position:absolute;top:0;left:0;background:url('img/btn_back.png') no-repeat;background-position:left top;background-size:42px auto;color:rgba(0,0,0,0);}
.container  {margin:0;text-align:left;overflow:hidden;
    padding-bottom:constant(safe-area-inset-bottom);
    padding-left:constant(safe-area-inset-left);
    padding-right:constant(safe-area-inset-right);

    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
}
/* 메인 배너 */
.banner {width:100%;position:relative;overflow:hidden;border-bottom:1px solid #d7d7d7;}
.banner ul  {width:200%;height:100%;}
.banner li  {width:50%;height:100%;float:left;}
.banner li img  {width:100%;}
.banner .paging {width:100%;position:absolute;bottom:8px;left:0;text-align:center;}
.banner .paging span    {width:8px;height:8px;display:inline-block;margin:0 5px;border-radius:16px;border: 1px solid #fff;color:rgba(0,0,0,0);}
.banner .paging .cur    {background:#fff;border: 1px solid #fff;}
/* 충전 어플 리스트 */
.charge li   {padding:15px;position:relative;border-bottom:1px solid #d7d7d7;word-break:keep-all;overflow:hidden;}
.charge li:last-child   {border:0;}
.charge li p   {width:100%;display:table;color:#fff;text-align:center;}
.charge li p span   {width:100%;height:100%;padding:11px 0;display:table-cell;vertical-align:middle;background:#2a84d8;border-radius:3px;font-size:13px;line-height:14px;}
.charge li p strong  {font-size:19px;padding:0 4px;vertical-align:middle;line-height:18px;}
.charge .new:after    {width:24px;height:17px;content:'';position:absolute;top:10px;left:10px;background:url('img/icon_new_320.gif') center no-repeat;background-size:100% auto;}
.charge .special:after    {width:28px;height:28px;content:'';position:absolute;top:10px;left:10px;background:url('img/icon_special_320.png') center no-repeat;background-size:100% auto;}
.charge .icon   {width:51px;height:51px;position:absolute;top:15px;left:15px;border-radius:102px;}
.charge .app  {padding:8px 0 8px 60px;}
.charge .app dt    {margin:0 0 7px 0;font-size:16px;color:#333;line-height:18px;word-break:break-all;}
.charge .app dd    {min-height:24px;font-size:13px;line-height:16px;color:#777;word-break:break-all;}
.charge .ad {position:relative;font-size:12px;}
.charge .ad dt  {position:absolute;top:0;left:0;}
.charge .ad dt span {width:51px;padding:4px 0 3px;display:block;color:#fff;border-radius:3px;text-align:center;}
.charge .ad dt .quest   {background:#1ddac6;}
.charge .ad dt .install {background:#ff7800;}
.charge .ad dd  {min-height:23px;padding:2px 0 9px 60px;line-height:15px;color:#afafaf;}
.charge li a    {width:100%;height:100%;display:table;}
/* 임시점검중, 페이지준비, 에러페이지, 모든게임다운로드 */
.common    {width:300px;height:260px;position:fixed;top:50%;left:50%;margin:-110px 0 0 -150px;text-align:center;word-break:keep-all;overflow:hidden;}
.common img    {width:250px;height:190px;position:absolute;bottom:0;left:8%;}
.common .tit h2    {width:100%;margin:0 0 10px 0;font-size:17px;font-weight:bold;color:#333;line-height:18px;}
.common .tit p  {width:100%;font-size:12px;line-height:15px;color:#666;}
/* 도움말 */
.support   {margin:0;padding:8px 14px;text-align:left;word-break:keep-all;overflow:hidden;}
.support .note	{
    padding-bottom:constant(safe-area-inset-bottom);
    padding-left:constant(safe-area-inset-left);
    padding-right:constant(safe-area-inset-right);

    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
}
.support .note h2  {margin:10px 0;font-size:16px;font-weight:normal;line-height:20px;color:#333;}
.support .note p   {font-size:13px;line-height:18px;color:#666;}

@media (min-width:480px) {
    /* 충전 어플 리스트 */
    .charge .contents   {display:table-cell;vertical-align:middle;}
    .charge li   {padding:14px 15px 12px;}
    .charge li p    {width:90px;padding:0 0 3px 20px;display:table-cell;vertical-align:middle;}
    .charge li p span   {width:70px;min-height:42px;padding:12px 12px;font-size:10px;line-height:12px;}
    .charge li p strong {margin:0 0 3px 0;display:block;clear:both;font-size:16px;}
    .charge .app {padding: 8px 0 6px 60px;}
    .charge .app dd    {min-height:22px;}
    .charge .ad dt  {top:2px;}
    .charge .ad dd  {min-height:auto;padding:4px 0 0 60px;word-break:break-all;}
    /* 임시점검중, 페이지준비, 에러페이지, 모든게임다운로드 */
    .common    {width:480px;height:198px;margin:-66px 0 0 -240px;text-align:left;}
    .common img    {left:auto;right:8px;}
    .common .wide   {bottom:5px;right:0;}
    .common .tit   {margin:0 0 0 40px;}
    .common .tit h2    {margin:0 0 11px 0;}
    .common .event p {width:160px;}
    /* 도움말 */
    .support   {padding:10px 14px;}
    .support .note h2  {margin:9px 0;}
}

/* iPhone X */
.safty_area	{
    border-bottom:1px solid #d7d7d7;
    padding-top:constant(safe-area-inset-top);
    padding-left:constant(safe-area-inset-left);
    padding-right:constant(safe-area-inset-right);

    padding-top:env(safe-area-inset-top);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
}