.pb_sub > div {background-repeat:no-repeat; background-position:center 0; padding:7.2rem 0 18rem;  min-height:90rem;     background-attachment: fixed;}
.pb_sub .pb_game {background-image:url('../../images/common/sub/bg_pb_game.jpg'); background-color:#041529;}
.pb_sub .pb_news {background-image:url('../../images/common/sub/bg_pb_news.jpg'); background-color:#041529;}
.pb_sub .pb_rank {background-image:url('../../images/common/sub/bg_pb_rank.jpg'); background-color:#041529;}
.pb_sub .pb_media {background-image:url('../../images/common/sub/bg_pb_media.jpg'); background-color:#041529;}
.pb_sub .pb_faq {background-image:url('../../images/common/sub/bg_pb_faq.jpg'); background-color:#041529;}
.pb_sub .pb_account {background-image:url('../../images/common/sub/bg_pb_account.jpg');  background-color:#031426;}
.pb_sub .pb_noti {background-image:url('../../images/common/sub/bg_pb_noti.jpg');  background-color:#041428;}
.pb_sub .pb_etc {background-image:url('../../images/common/sub/bg_pb_etc.jpg'); background-color:#041529;}
.pb_sub .pb_clan {background-image:url('../../images/common/sub/bg_pb_clan.png'); padding-bottom:0;  background-color:#191919;}
.pb_sub .pb_stat {background-image:url('../../images/common/sub/bg_pb_stat.jpg'); padding-bottom:0;  background-color:#1b1b1b;}
.pb_sub .pb_base {background-image:url('../../images/common/sub/bg_base.png');  background-color:#031426; background-size: cover;}
.pb_sub .pb_esports {background-color:#fff;}
.pb_sub .pb_top {text-align:center;  padding: 7.5rem 0;}
.pb_sub .pb_top .typing_wrap {position:relative; font-size:0;  height:6rem;}
.pb_sub .pb_top .typing_wrap .typing-txt{display: none;} 
.pb_sub .pb_top .typing_wrap .typing {position:relative; text-shadow: 2px 2px 2px #000; padding:0 2.4rem; text-transform:uppercase; color:#fff; font-size:50px; font-weight:700; letter-spacing:0.04rem; display:inline-block; } 
.pb_sub .pb_top .typing_wrap .typing:before {content:''; display:block; position:absolute; width:2px; height:36px; background:#fff; right:0; top:50%; transform:translate(0, -50%); animation: cursor 0.3s infinite;}
.pb_sub .pb_top .sub_depth2 {margin-top:4rem;}
.pb_sub .pb_top .sub_depth2 .sub_depth2_tab {display:none;}
.pb_sub .pb_top .sub_depth2 li {display:inline-block; vertical-align:top; padding:0 1.2rem; position:relative;}
.pb_sub .pb_top .sub_depth2 li:before {content:''; display:block; width:1px; height:14px; background:#ff0000; right:0; top:1px; position:absolute;}
.pb_sub .pb_top .sub_depth2 li:last-child:before {display:none;}
.pb_sub .pb_top .sub_depth2 li a {text-shadow: 1px 1px 1px #000; font-size:14px; color:#fff; font-weight:700; text-transform:uppercase; }
.pb_sub .pb_top .sub_depth2 li.on a {color:#ffdd00;}
.pb_sub .pb_sub_con .inner {max-width:1250px; padding-left:2.5rem; padding-right:2.5rem;}

/* game */
.g_intro { color:#fff; background:url('../../images/common/game/bg_game_in.jpg') center bottom repeat; margin-bottom:-18rem; background-size:cover;}
.g_intro > div {margin-bottom:5rem; position:relative;}
.g_intro .g_intro_wide {background-repeat:no-repeat; background-position:center center; background-size:cover; text-align:center;}
.g_intro .g_intro01 {background-image:url('../../images/common/game/intro01.jpg'); padding:25rem 0 27rem; margin-bottom:10rem; border:1px solid rgba(255, 255, 255, 0.1); overflow:hidden;}
.g_intro .g_intro01 .inner {position:relative;}
.g_intro .g_intro06 {background-image:url('../../images/common/game/intro06.jpg'); padding:8.5rem 0 10rem; margin-bottom:0 !important;}
.g_intro .txt {font-size:14px; line-height: 1.6;}
.g_intro .g_intro_wide .txt {text-transform:uppercase;}
.g_intro .g_intro01 .txt {margin-top:4.5rem; line-height: 1.6; letter-spacing:0.06rem;}
.g_intro .g_intro_half {font-size:0; position:relative; padding-right:50%;}
.g_intro .g_intro_half:after {content:''; display:block; clear:both;}
.g_intro .g_intro_half .thum {position:relative; height:0; padding-bottom:45.8%;}
.g_intro .g_intro_half .thum img {position:absolute; top:0; bottom:0; left:0; width:100%; height:100%;}
.g_intro .g_intro_half .con {padding:9rem 6rem 0; width:50%; position:absolute; top:0; bottom:0; right:0;}
.g_intro .g_intro_half .con .dstc {vertical-align:top;}
.g_intro .g_intro_half:nth-child(2n-1) {padding-left:50%; padding-right:0;}
.g_intro .g_intro_half:nth-child(2n-1) .con {right:auto; left:0; text-align:right;}
.g_intro .g_intro_half:nth-child(2n-1) .dst {width:auto; margin-right:0; margin-left:auto; text-align:left;}
.g_intro .g_intro_half .tit {position: relative; text-transform:uppercase; color:#fff; font-size:36px; font-weight:600; text-shadow:2px 2px 2px #ff0000; margin-bottom:3rem;}
.g_intro .g_intro_half .txt {position: relative; font-family:'Roboto';}
.g_intro .g_intro06 .tit {text-transform:uppercase; font-size:24px; color:#ffdd00; font-weight:700; margin-bottom:3rem;}
.g_intro .g_intro06 .txt {text-transform: none; font-size:14px; font-family:'Roboto'; line-height:1.75;}
.g_intro .g_intro06 .txt font, .g_intro .g_intro06 .txt a {color:#689aff;}
.g_intro .g_intro06 .txt a {text-decoration:underline;}
.g_intro .con:before {content:''; display:block; position:absolute; top:0; bottom:-5rem; left:0; right:0; background-size: auto 85% !important;}
.g_intro02 .con:before {background:url('../../images/common/game/game_cha01.png') right bottom no-repeat;} 
.g_intro03 .con:before {background:url('../../images/common/game/game_cha02.png') left bottom no-repeat;} 
.g_intro04 .con:before {background:url('../../images/common/game/game_cha03.png') right bottom no-repeat;} 
.g_intro05 .con:before {background:url('../../images/common/game/game_cha04.png') left bottom no-repeat;}
.g_intro .g_intro01:before, .g_intro .g_intro01:after {content:''; display:block; width:18px; height:18px; position:absolute; z-index:1;} 
.g_intro .g_intro01:before {background:url('../../images/common/icon_cramp_lt_w.png') 0 0 no-repeat; left:5.6rem; top:5rem;}
.g_intro .g_intro01:after {background:url('../../images/common/icon_cramp_rb_w.png') 0 0 no-repeat; right:5.6rem; bottom:5rem;}
.g_intro .g_intro06 .inner {position:relative; padding-left: 7rem; padding-right: 7rem; }
.g_intro .g_intro06 .inner:before, .g_intro .g_intro06 .inner:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.g_intro .g_intro06 .inner:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:0; top:-2rem;}
.g_intro .g_intro06 .inner:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:0; bottom:-2rem;}
.g_intro .g_intro01 .vod {width: 100%; position: absolute; top: 0; left: 0; bottom:0; right:0;}
.g_intro .g_intro01 .vod video {min-width: 110%; min-height: 110%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.main_wrap .visual .vod {width: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.main_wrap .visual .vod .vod_vod {width: 100%; padding-bottom: 56.25%; overflow: hidden; position: relative;}
.main_wrap .visual .vod .vod_vod video {min-width: 110%; min-height: 110%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main_wrap .visual .vod .dimmed {opacity: 0.65; filter: alpha(opacity=65);}

.g_app {text-align:center;}
.g_app .g_app_top {font-size:0;}
.g_app .g_app_top > div {display:inline-block; vertical-align:middle;}
.g_app .g_app_top .img {margin:0 4rem 0 5rem;}
.g_app .g_app_top .mobile { display:none;}
.g_app .g_app_top .img_qr { margin:0 0 0 10rem; }
.g_app .g_app_top .left {text-align:right; margin-top: -10rem;}
.g_app .g_app_top .left_qr { margin-top: -15rem; }
.g_app .g_app_top .left .tit {font-size:40px; color:#b2b2b2; text-transform:uppercase; font-weight:700; margin-bottom:3.5rem;}
.g_app .g_app_top .left .tit span {display:block; color:#ffffff; text-shadow:2px 2px 2px #ff0000;}
.g_app .g_app_top .right {text-align:left; color:#e9e9e9; font-size:16px; line-height:1.6; font-family:'Roboto'; margin-top: -10rem;}
.g_app .g_app_top .right_qr { margin-top: -25rem; margin-left:-7rem;   }
.g_app .g_app_top .btn_line {position:relative; padding:2rem 5.6rem 2rem 11.2rem; text-align:left;}
.g_app .g_app_top .btn_line i {position:absolute; left:5.6rem; top:50%; transform:translate(0 , -50%); display:inline-block; width:32px; height:34px; vertical-align:middle; background:url('../../images/common/game/icon_google.png') 0 0 no-repeat;}
.g_app .list {font-size:0; margin-left:-6rem; }
.g_app .list li {display:inline-block; vertical-align:top; width:calc(100% / 3); padding-left:6rem; margin-bottom:4rem;}
.g_app .list li .con {padding:3.2rem; background:rgba(0, 0, 0, 0.2); border:1px solid rgba(255, 255, 255, 0.15); position:relative; height:100%;}
.g_app .list li .con:before, .g_app .list li .con:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.g_app .list li .con:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:-1px; top:-1px;}
.g_app .list li .con:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:-1px; bottom:-1px;}
.g_app .list li .con .tit {display:inline-block; color:#fff; font-size:24px; font-weight:700; text-transform:uppercase; position:relative; padding-top:0.4rem; margin:3rem 0 1rem;}
.g_app .list li .con .tit:before {content:''; display:block; position:absolute; top:0; left:0; right:0; height:1px; background:#ff0000;}
.g_app .list li .con .txt {font-family:'Roboto'; color:#b2b2b2; font-size:14px; line-height:1.5;}

.g_act {position:relative;}
.g_act.pc .act_close {display:none;}
.g_act .act_tree { position:relative; max-width:986px; margin:0 auto;}
.g_act .act_tree > img {max-width:100%;}
.g_act .tip00 {position:absolute; left:0; display:none; right:auto; min-width:192px; text-align:center; z-index:102;}
.g_act .tip_wrap {font-size:0;  padding:1.2rem; background:#5e2222; border:1px solid #ff0000;  position:relative;}
.g_act .tip_wrap:before {position:absolute; content:''; display:block; bottom:-12px; left:50%; transform:translate(-50% , 0); width:24px; height:12px; background:url('../../images/common/game/tip_arr.png') 0 0 no-repeat;} 
.g_act .tip_con {display:inline-block; margin-right:4px; vertical-align:top;}
.g_act .tip_con:last-child {margin-right:0 !important;}
.g_act .tip_five {margin-bottom:4px;}
.g_act .tip_tit { font-size:14px; color:#ffffff; font-weight:700; margin-bottom:10px; text-transform:uppercase; }
.g_act .tip_con .tip_pic {background:#fff; border-radius:4px 4px 0 0;}
.g_act .tip_con .tip_name {font-family:'Roboto'; border-radius:0 0 4px 4px; font-size:1.2rem; color:#000; background:#e1e1e1; padding:10px 0; font-weight:500;}
.g_act .act_tree .tool00 {transition:all ease-in-out 0.2s; display:block; position:absolute;  width: 6.1%; height: 7.9%;  border:1px solid #689aff;}
.g_act .act_tree .tool00.act {border:1px solid #ff0000;  }
.g_act .act_tree .tool01 {top: 14.3%; left: 14.8%;}
.g_act .act_tree .tool02 {top: 14.3%; left: 43.5%;}
.g_act .act_tree .tool03 {top: 14.3%; left: 79.5%;}
.g_act .act_tree .tool04 {top: 28.5%; left: 7.56%;}
.g_act .act_tree .tool05 {top: 28.5%; left: 21.9%;}
.g_act .act_tree .tool06 {top: 28.5%; left: 36.3%;}
.g_act .act_tree .tool07 {top: 28.5%; left: 50.7%;}
.g_act .act_tree .tool08 {top: 28.5%; left: 65.1%; }
.g_act .act_tree .tool09 {top: 28.5%; left: 79.5%;}
.g_act .act_tree .tool10 {top: 28.5%; left: 94% }
.g_act .act_tree .tool11 {top: 39.5%; left: 7.56%; }
.g_act .act_tree .tool12 {top: 39.5%; left: 21.9%; }
.g_act .act_tree .tool13 {top: 39.5%; left: 36.3%; }
.g_act .act_tree .tool14 {top: 39.5%; left: 50.7%;}
.g_act .act_tree .tool15 {top: 39.5%; left: 65.1%; }
.g_act .act_tree .tool16 {top: 39.5%; left: 79.5%; }
.g_act .act_tree .tool17 {top: 39.5%; left: 94%;}
.g_act .act_tree .tool18 {top: 50.6%; left: 7.56%;}
.g_act .act_tree .tool19 {top: 50.6%; left: 21.9%; }
.g_act .act_tree .tool20 {top: 50.6%; left: 36.3%;}
.g_act .act_tree .tool21 {top: 50.6%; left: 50.7%;}
.g_act .act_tree .tool22 {top: 50.6%; left: 65.1% }
.g_act .act_tree .tool23 {top: 50.6%; left: 79.5%; }
.g_act .act_tree .tool24 {top: 50.6%; left: 94%; }
.g_act .act_tree .tool25 {top: 64.8%; left: 7.56%; }
.g_act .act_tree .tool26 {top: 64.8%; left: 36.3%; }
.g_act .act_tree .tool27 {top: 64.8%; left: 65.1%; }
.g_act .act_tree .tool28 {top: 64.8%; left: 79.5%; }
.g_act .act_tree .tool29 {top: 79%; left: 15%; }
.g_act .act_tree .tool30 {top: 79%; left: 21.9%;}
.g_act .act_tree .tool31 {top: 79%; left: 44%; }
.g_act .act_tree .tool32 {top: 79%; left: 50.7%;}
.g_act .act_tree .tool33 {top: 79%; left: 72.7%;}
.g_act .act_tree .tool34 {top: 79%; left: 79.5%; }
.g_act .act_tree .tool35 {top: 79%; left: 94%;}
.g_act .act_tree .tool36 {top: 90%; left: 0;}
.g_act .act_tree .tool37 {top: 90%; left: 28.8%}
.g_act .act_tree .tool38 {top: 90%; left: 50.7%;}
.g_act .act_tree .tool39 {top: 90%; left: 57.6%;}
.g_act .act_tree .tool40 {top: 90%; left: 94%;}
.g_act .tip05, .g_act .tip07, .g_act .tip09, .g_act .tip12, .g_act .tip14, .g_act .tip16, .g_act .tip19, .g_act .tip21, .g_act .tip23, .g_act .tip28, .g_act .tip30, .g_act .tip32, .g_act .tip34 { position:absolute; width:366px; }
.g_act .g_act_top {background:rgba(0, 12, 36, 0.7); border-top:1px solid #689aff; border-bottom:1px solid #689aff; margin-bottom:5rem;}
.g_act .g_act_top .inner {background:url('../../images/common/game/bg_act_banner.png') right bottom no-repeat; padding-top:3.5rem; padding-bottom:3.5rem;}
.g_act .g_act_top .tit {color:#b2b2b2; font-size:34px; font-weight:600;}
.g_act .g_act_top .tit span {color:#fff; text-transform:uppercase; margin-right:36px; display:inline-block; position:relative;}
.g_act .g_act_top .tit span font {font-size:40px; text-shadow:2px 2px 2px #ff0000; margin-right:2px;}
.g_act .g_act_top .tit span:before {content:''; display:block; position:absolute; width:9px; height:3px; top:50%; transform:translate(0 , -50%); background:#ff0000; right:-2.2rem; }
.g_act .g_act_top .txt {font-size:18px; color:#e9e9e9; font-family:'Roboto'; line-height:1.4; margin:2rem 0 3rem;}
.g_act .g_act_top .info {font-size:16px; color:#9adfe5; font-family:'Roboto'; line-height:1.5;}
.g_act .g_act_con {max-width:1200px; margin:0 auto; padding:5.2rem 0 7.3rem; border:1px solid rgba(255, 255, 255, 0.2); position:relative; background: rgba(0, 0, 0, 0.3);}
.g_act .g_act_con:before, .g_act .g_act_con:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.g_act .g_act_con:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:-1px; top:-1px;}
.g_act .g_act_con:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:-1px; bottom:-1px;}
.mouse_on {text-transform:uppercase; z-index:101; font-family:'Roboto'; text-align:center; position: absolute;  top:0;  left:0;  padding:8px 0; width:156px; color:#999999; font-size:9px; font-weight:500; background:rgba(34, 34, 34, 0.85); border-radius:19px; border:1px solid rgba(85, 85, 85, 0.85);}
.mouse_on span {color:#ccc;}

.g_start .g_start_list {font-size:0; margin-left:-5rem;}
.g_start .g_start_list > li {display:inline-block; width:50%; vertical-align:top; padding-left:5rem; margin-bottom:5rem;}
.g_start .g_start_list .con {border:1px solid rgba(255, 255, 255, 0.2); position:relative; padding:2.6rem 3.6rem; background:rgba(0, 0, 0, 0.2);}
.g_start .g_start_list .con:before, .g_start .g_start_list .con:after {z-index:1; content:''; display:block; position:absolute; width:18px; height:18px; background-repeat:no-repeat; background-position:0 0; }
.g_start .g_start_list .con:before {top:-1px; left:-1px; background-image:url('../../images/common/icon_lt.png');}
.g_start .g_start_list .con:after {bottom:-1px; right:-1px; background-image:url('../../images/common/icon_rb.png');}
.g_start .g_start_list .tit {margin:2rem 0; color:#ff0000; font-size:20px; font-weight:700; text-transform:uppercase;}
.g_start .g_start_list .info li {font-family: 'Roboto', sans-serif; word-break:keep-all; margin-bottom:0.7rem; position:relative; padding-left:2.4rem; font-size:14px; color:#fff; line-height:1.5;}
.g_start .g_start_list .info li:last-child {margin-bottom:0;}
.g_start .g_start_list .info li font {color:#53ffd4;}
.g_start .g_start_list .info span {font-weight:700; text-align:center; display:block; position:absolute; top:2px; left:0;  border-radius:50%; font-size:11px; background:#53ffd4; width:18px; height:18px; line-height:19px; color:#000000;}
.g_start .g_start_list .info li a {display:inline-block; width:39px; height:19px; line-height:19px; text-align:center; color:#53ffd4; border:1px solid #53ffd4; border-radius:2px; vertical-align:middle; text-transform: capitalize;}
.g_start .g_start_list .info li a:hover {text-decoration:underline;}
.g_start .g_start_list .con .thum {border:1px solid rgba(255, 255, 255, 0.2);}

.g_down {text-align:center;}
.pb_sub .pb_sub_con .g_down .inner {max-width:1800px;}
.g_down .g_tit {color:#fff; text-transform:uppercase; font-size:30px; font-weight:700; margin-bottom:4.5rem;}
.g_down .g_full { padding:4.5rem 2.5rem 5rem; position:relative; border:1px solid rgba(255, 255, 255, 0.2); background:url('../../images/common/game/bg_down01.jpg') center center no-repeat; background-size: cover;}
.g_down .g_full .g_tit {font-size:40px; text-shadow: 2px 2px 2px #ff0000; }
.g_down .g_full:before, .g_down .g_full:after {z-index:1; content:''; display:block; position:absolute; width:18px; height:18px; background-repeat:no-repeat; background-position:0 0; }
.g_down .g_full:before {top:-1px; left:-1px; background-image:url('../../images/common/icon_lt.png');}
.g_down .g_full:after {bottom:-1px; right:-1px; background-image:url('../../images/common/icon_rb.png');}
.g_down .g_down_t {max-width:1000px; margin:0 auto;}
.g_down .g_down_t li {text-align:right;    padding: 1.7rem 0; border-top:1px solid rgba(255, 255, 255, 0.2); font-size:14px; font-family:'Roboto'; position:relative; padding-left:12rem; }
.g_down .g_down_t li:last-child {border-bottom:1px solid rgba(255, 255, 255, 0.2);}
.g_down .g_down_t .tit {text-align:left; text-transform:uppercase; color:#ffdd00; position:absolute; top:50%; left:0; transform:translate(0 , -50%);}

.g_down .g_down_t .txt {color:#fff; }
.g_down .btns_down {max-width:500px; margin:3rem auto 0; font-size:0;}
.g_down .btns_down a {box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(0, 0, 0, 0.7); letter-spacing:0.02rem; color:#ff2c2c; height:60px; border:1px solid #ff0000; position:relative; line-height:60px; text-align:center; border-radius:5px; margin-left:2rem; display:inline-block; vertical-align:top;  width:calc((100% -  2rem) / 2); font-size:15px; font-weight:700; text-transform:uppercase;}
.g_down .btns_down a br {display:none;}
.g_down .btns_down a:first-child {margin-left:0;}
.g_down .btns_down a span {color:#ffadad; margin-right:2rem;}
.g_down .btns_down a:before, .g_down .btns_down a:after {transition:all ease-in-out 0.2s; content:''; display:block; width:4px; height:10px; position:absolute; background:#e4140c;}
.g_down .btns_down a:before {top:0; right:10px; }
.g_down .btns_down a:after {bottom:0; left :10px; }
.g_down .btns_down a:hover {background:rgba(73, 9, 9, 0.7); color:#fff;}
.g_down .btns_down a:hover:before, .g_down .btns_down a:hover:after {background:#e6160e; height:15px; transition:all ease-in-out 0.2s;}

.g_patch .g_tit { margin-bottom:2rem;  }
.g_patch .btns_down { margin:2rem auto; } 
.g_patch .btns_down a { height:40px; line-height:40px; width:calc((100% + 2rem) / 2); }

.g_down .info {margin:3rem auto 0; max-width:500px; padding: 1rem 0; color:#ffffff; font-size:12px; line-height:1.2; border-radius:3px; background:rgba(255, 234, 0, 0.4) url('../../images/common/icon_notice.png') 2.2rem center no-repeat; border:1px solid rgba(255, 234, 0, 0.5);}
.g_down .clr {margin:5rem 0 4rem; font-size:0;}
.g_down .g_client {float:left;}
.g_down .g_patch {float:right;}
.g_down .clr > div {background:rgba(39, 66, 143, 0.5); border:1px solid rgba(255, 255, 255, 0.2); width:calc((100% - 4rem) / 2); padding:4rem;}
.g_down .clr > div .ovfs {padding-right:1.6rem; height:221px;}
.g_down .clr .btns_down a {border-color:#689aff; color:#709fff;}
.g_down .clr .btns_down a:hover {background:rgba(17, 47, 99, 0.7); color:#fff;}
.g_down .clr .btns_down a:before, .g_down .clr .btns_down a:after {background:#3c63ae;}
.g_down .g_patch .g_down_t li {padding-left:0; padding-right: 22rem;}
.g_down .g_patch .g_down_t .tit {position:static; transform:none;}
.g_down .g_patch .g_down_t .txt {display:block; margin-top: 0.5rem;}
.g_down .g_patch .g_down_t .txt font {color:#b2b2b2;}
.g_down .g_patch .btns_g_link {position:absolute; top:50%; right:0; transform:translate(0 , -50%); font-size:0; width:210px; text-align:right;}
.g_down .g_patch .btns_g_link a {font-family: 'Chakra Petch'; box-shadow:0 3px 5px rgba(0, 0, 0, 0.5); padding: 0.7rem 0; margin-left:1rem; font-size:12px; text-align:center; display:inline-block; vertical-align:top; width:calc((100% - 1rem) / 2); border-radius:5px; background:rgba(104, 154, 255, 0.7); border:1px solid #689aff; color:#fff; text-transform:uppercase; font-weight:500; letter-spacing:0.02rem;}
.g_down .g_patch .btns_g_link a:first-child {margin-left:0;}
.g_down .g_patch .btns_g_link a span {display:block; color:#ffdd00;}
.g_down .g_patch .btns_g_link a:hover {background:#689aff;}
.g_down .g_system { padding:4.5rem 4rem 5rem; position:relative; border:1px solid rgba(255, 255, 255, 0.2); background:url('../../images/common/game/bg_down02.png') right center no-repeat; background-size: cover;}
.g_down .g_system .g_tit {text-align:left;}
.g_down .g_system .g_tit span {color:#b2b2b2; font-size:20px;}
.g_down .g_system .g_down_t {margin:0;}
.g_down .g_system:before, .g_down .g_system:after {z-index:1; content:''; display:block; position:absolute; width:18px; height:18px; background-repeat:no-repeat; background-position:0 0; }
.g_down .g_system:before {top:-1px; left:-1px; background-image:url('../../images/common/icon_lt.png');}
.g_down .g_system:after {bottom:-1px; right:-1px; background-image:url('../../images/common/icon_rb.png');}
.g_down .g_system .g_down_t li {text-align:left; padding-left:0;}
.g_down .g_system .g_down_t li > div {display:inline;}
.g_down .g_system .g_down_t .tit {position:static; transform:none;}
.g_down .btns_down a.btn_g_down_l {width:auto; padding:0 3rem;}

.g_init .g_init_tab {border-top:1px solid rgba(135,207,255,0.5); border-bottom:1px solid rgba(135,207,255,0.5);}
.g_init .g_init_tab.fix {position:fixed; bottom:0; background:#000; left:0; right:0; z-index:1;}
.g_init .g_init_tab ul {font-size:0;}
.g_init .g_init_tab ul li {display:inline-block; vertical-align:top;  width:25%;}
.g_init .g_init_tab ul li a {display:block; font-size:16px; color:#93d3ff; text-transform:uppercase; font-weight:700; height:50px; line-height:50px; text-align:center;}
.g_init .g_init_tab ul li.active a, .g_init .g_init_tab ul li:hover a {font-size:18px; color:#ff0000; position:relative; background:rgba(0, 0, 0, 0.6);}
.g_init .g_init_tab ul li.active a:before, .g_init .g_init_tab ul li.active a:after, .g_init .g_init_tab ul li:hover a:before, .g_init .g_init_tab ul li:hover a:after {content:''; display:block; left:0; right:0; height:1px; background:#ff0000; position:absolute; }
.g_init .g_init_tab ul li.active a:before, .g_init .g_init_tab ul li:hover a:before {top:-1px;}
.g_init .g_init_tab ul li.active a:after, .g_init .g_init_tab ul li:hover a:after {bottom:-1px;}
.g_init .step {margin-top:3rem; position:relative; padding-left:16rem;}
.g_init .step .init_tit {padding-top:4.2rem; position:absolute; font-size:0; top:0; left:0; bottom:0; text-align:center; width:16rem; background:rgba(135, 207, 255, 0.3);}
.g_init .step.active .init_tit {background:rgba(135, 207, 255, 1) url('../../images/common/game/bg_ptn_down.png') 0 0 repeat; }
.g_init .step .init_tit i {display:inline-block; width:34px; height:34px; background-position:0 0; background-repeat:no-repeat;}
.g_init .step.active .init_tit i {background-position:0 -34px;}
.g_init .step01 .init_tit i {background-image:url('../../images/common/game/icon_down.png');}
.g_init .step02 .init_tit i {background-image:url('../../images/common/game/icon_install.png');}
.g_init .step03 .init_tit i {background-image:url('../../images/common/game/icon_update.png'); width:33px; height:33px;}
.g_init .step04 .init_tit i {background-image:url('../../images/common/game/icon_start.png'); height:33px;} 
.g_init .step03.active .init_tit i, .g_init .step04.active .init_tit i {background-position:0 -33px;}
.g_init .step .init_con {padding:3rem; border:1px solid rgba(255, 255, 255, 0.2); position:relative;}
.g_init .step .init_con:before, .g_init .step .init_con:after {z-index:1; content:''; display:block; position:absolute; width:18px; height:18px; background-repeat:no-repeat; background-position:0 0; }
.g_init .step .init_con:before {top:-1px; left:-1px; background-image:url('../../images/common/icon_lt.png');}
.g_init .step .init_con:after {bottom:-1px; right:-1px; background-image:url('../../images/common/icon_rb.png');}
.g_init .step .init_con .box_init {font-size:0; letter-spacing:0; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255, 255, 255, 0.2);}
.g_init .step .init_con .box_init:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}
.g_init .step .init_con .box_init .thum {display:inline-block; vertical-align:top; border:1px solid rgba(255, 255, 255, 0.2);}
.g_init .step .init_con .box_init .desc {display:inline-block; vertical-align:top; width:calc(100% - 226px); padding-left:4.2rem; word-break:keep-all; padding-top: 0.5rem;}
.g_init .step04 .init_con .box_init .desc {width:calc(100% - 508px);}
.g_init .step .init_con .box_init .desc .tit {text-transform:uppercase; font-weight:700; color:#6affda; font-size:16px; margin-bottom:1rem;}
.g_init .step .init_con .box_init .desc .tit02 {text-transform:uppercase; font-weight:700; color:#ff0000; font-size:20px; margin-bottom:1rem;}
.g_init .step .init_con .box_init .desc .tit span {color:#87cfff; margin-left:2rem;}
.g_init .step .init_con .box_init .desc .txt {font-size:14px; color:#ffffff; font-family:'Roboto'; line-height:1.8;}
.g_init .step .init_con .box_init .desc .txt font {color:#6affda;}
.g_init .step .init_con .box_init .desc .txt font.g01 {font-size:12px; color:#b2b2b2;}
.g_init .step .init_con .box_init .desc li {font-size:14px; color:#ffffff; font-family:'Roboto'; line-height:2; position:relative; padding-left:2.6rem;}
.g_init .step .init_con .box_init .desc li span {width:18px; height:18px; line-height:19px; text-align:center; position:absolute; top:5px; left:0; font-size:11px; color:#000000; border-radius:50%; background:#53ffd4; font-weight:700;}
.g_init .step .init_con .box_init .desc .txt .round {display:inline-block; color:#6affda;  border-radius:2px; border:1px solid #6affda; padding:0.1rem 0.5rem; line-height:normal;}
.g_init .step .init_con .box_init .desc .ul_2 li {    padding-left: 15px; text-indent: -15px;}
.g_init .step .init_con .box_init .desc .ul_2 li span {background:none; position:static; font-size:14px; color:#87cfff; font-weight:400;}
.g_init .g_init_tab .gi_tab {display:none;}

.guide_wrap {padding:6rem 0 0; background:url('../../images/common/game/bg_userguide.png') center 0 no-repeat; position:relative; border-top:1px solid #0096ff; border-bottom:1px solid #0096ff; box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.2);}
.pb_sub .pb_sub_con .guide_wrap .inner {max-width:none; padding-left:6rem; padding-right:6rem;}
.guide_wrap:before, .guide_wrap:after {content:''; display:block; position:absolute; left:50%; width:14rem; height:2.1rem; margin-left:-7rem; background-image:url('../../images/common/game/label_user_n.png'); background-position:0 0; background-repeat:no-repeat;}
.guide_wrap:before {top:-2.1rem;}
.guide_wrap:after {bottom:-2.1rem; background-image:url('../../images/common/game/label_user_n02.png');}
.guide_wrap .list {font-size:0; margin-left:-6rem;}
.guide_wrap .list > li { display:inline-block; vertical-align:top; width:calc(100% / 3); padding-left:6rem; margin-bottom:6rem; /* opacity:0; animation:fadeInUp 0.7s cubic-bezier(0.215, 0.61, 0.355, 1); */ animation-fill-mode:forwards;}
.guide_wrap .list > li:nth-child(2) {animation-delay:0.1s;}
.guide_wrap .list > li:nth-child(3) {animation-delay:0.2s;}
.guide_wrap .list > li:nth-child(4) {animation-delay:0.3s;}
.guide_wrap .list > li:nth-child(5) {animation-delay:0.4s;}
.guide_wrap .list > li:nth-child(6) {animation-delay:0.5s;}
.guide_wrap .list .tit {position:relative; word-break: break-word; margin-bottom:1rem; text-shadow:0 0.2rem 0.1rem rgba(0, 0, 0, 0.3); text-align:center; background:linear-gradient(to right, #0030ff, rgba(255, 255, 255, 0)); background-color:rgba(0, 150, 255, 0.6); height:6rem; text-transform:uppercase; font-size:18px; color:#fff; font-weight:700;}
.guide_wrap .list .tit span {position:absolute; left:0; right:0; top:50%; transform:translate(0 , -50%); padding:0 1.2rem;}
.guide_wrap .list .tit font {color:#ffdd00;}
.guide_wrap .list .tit:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('../../images/common/game/dot_y.png') 0 0 no-repeat , url('../../images/common/game/dot_y.png') right 0 no-repeat, url('../../images/common/game/dot_y.png') 0 bottom no-repeat, url('../../images/common/game/dot_y.png') right bottom no-repeat;}
.guide_wrap .list .tit:after {content:''; display:block; position:absolute; top:0; left:50%; width:2rem; height:0.2rem; background:#ffdd00; transform:translate(-50% , 0);}
.guide_wrap .list .vod {background:#000000; padding:1px; box-shadow:inset 0 0 0 1px #358cff; position:relative; overflow:hidden;}
.guide_wrap .list .vod:before {content:''; display:block; position:absolute;  z-index:1; background:#ffdd00; width:2px; height:100%; transition: 0.3s;  transform: translateY(100%); right:0; bottom:0;}
.guide_wrap .list .vod:after {content:''; display:block; position:absolute;  z-index:1; background:#ffdd00; width:2px; height:100%; transition: 0.3s;  transform: translateY(-100%); top:0; left:0;}
.guide_wrap .list .vod .thum {position:relative; height:0; padding-bottom:56.25%;}
.guide_wrap .list .vod .thum img {position:absolute; top:0; left:0; width:100%; height:100%;}
.guide_wrap .list .vod .thum:before {z-index:1; transition: 0.3s; transform: translateX(-100%); content:''; display:block; position:absolute; top:-1px; left:0; width:100%; height:2px; background:#ffdd00;}
.guide_wrap .list .vod .thum:after {z-index:1; transition: 0.3s; transform: translateX(100%); content:''; display:block; position:absolute; bottom:-1px; right:0; width:100%; height:2px; background:#ffdd00;}
.guide_wrap .list .vod:hover .thum:before, .guide_wrap .list .vod:hover .thum:after {transform: translateX(0);}
.guide_wrap .list .vod:hover:before, .guide_wrap .list .vod:hover:after {transform: translateY(0);}
.guide_wrap .list .vod .s_link { z-index: 1; opacity:1; background:url('../../images/common/game/icon_lt_y.png') 0 0 no-repeat , url('../../images/common/game/icon_rt_y.png') right 0 no-repeat , url('../../images/common/game/icon_lb_y.png') 0 bottom no-repeat , url('../../images/common/game/icon_rb_y.png') right bottom no-repeat;}
.guide_wrap .list .vod .s_link:before, .guide_wrap .list .vod .s_link:after {top:50%; left:50%; content:''; display:block; position:absolute; width:14.9rem; height:13.6rem; margin-left:-7.45rem; margin-top:-6.8rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.guide_wrap .list .vod .s_link:before {background-image:url('../../images/common/media/icon_play.png');}
.guide_wrap .list .vod .s_link:after {background-image:url('../../images/common/media/icon_play_round.png');}
.guide_wrap .list .vod .s_link:hover:after {animation: circle1AnimationMove 5s ease infinite;}

.guide_wrap .guide_sel {margin-top:1rem; position:relative;}
.guide_wrap .guide_sel .txt {position:relative;  font-family:'Roboto'; text-align:left; height:5rem;}
.guide_wrap .guide_sel .txt .desc {left:0; right:0; top:50%; transform:translate(0 , -50%); position:absolute; padding-left:5.4rem; padding-right:12rem;}
.guide_wrap .guide_sel .txt .desc > div {    overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; word-wrap: normal; white-space: nowrap;}
.guide_wrap .guide_sel .txt .txt01 {text-transform: uppercase; font-size:14px; color:#97c4ff;  }
.guide_wrap .guide_sel .txt .txt01:before {content:''; display:block; position:absolute; top:50%; transform:translate(0 , -50%); left:2rem; background:url('../../images/common/game/icon_vod.png') 0 0 no-repeat; width:12px; height:12px; }
.guide_wrap .guide_sel .txt .txt02 {font-size:12px; color:#8dbeff; display:none; margin-top:2px;}
.guide_wrap .guide_sel .sel_on { height:6rem; background:rgba(53, 140, 255, 0.3); border:1px solid #358cff;}
.guide_wrap .guide_sel .sel_on:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('../../images/common/game/dot_y.png') 0 0 no-repeat , url('../../images/common/game/dot_y.png') right 0 no-repeat, url('../../images/common/game/dot_y.png') 0 bottom no-repeat, url('../../images/common/game/dot_y.png') right bottom no-repeat;}
.guide_wrap .guide_sel .sel_on:after {content:''; display:block; position:absolute; top:-1px; bottom:-1px; right:-1px; width:6rem; box-shadow:inset 0 0 0 1px #358cff; background:url('../../images/common/sub/sub_depth2_arr.png') center center no-repeat, url('../../images/common/game/dot_y.png') 0 0 no-repeat , url('../../images/common/game/dot_y.png') right 0 no-repeat, url('../../images/common/game/dot_y.png') 0 bottom no-repeat, url('../../images/common/game/dot_y.png') right bottom no-repeat; background-color:rgba(0, 0, 0, 0.4);}
.guide_wrap .guide_sel .sel_on .txt01 {color:#fff; font-weight:700;}
.guide_wrap .guide_sel .sel_on .txt01:before {left:1.6rem; width:22px; height:22px; background:url('../../images/common/game/icon_youtube.png') 0 0 no-repeat; border-radius:0.5rem; background-size:100% auto; box-shadow:0 1px 1px rgba(0, 0, 0, 0.4);}
.guide_wrap .guide_sel .sel_on .txt02 {display:block;}
.guide_wrap .guide_sel .sel_on:hover {background:#358cff;}
.guide_wrap .guide_sel .sel_on:hover:before {background:url('../../images/common/game/dot_r.jpg') 0 0 no-repeat , url('../../images/common/game/dot_r.jpg') right 0 no-repeat, url('../../images/common/game/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/game/dot_r.jpg') right bottom no-repeat;}
.guide_wrap .guide_sel .sel_on:hover:after {background:url('../../images/common/sub/sub_depth2_arr.png') center center no-repeat, url('../../images/common/game/dot_r.jpg') 0 0 no-repeat , url('../../images/common/game/dot_r.jpg') right 0 no-repeat, url('../../images/common/game/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/game/dot_r.jpg') right bottom no-repeat; background-color:rgba(0, 0, 0, 0.4);}
.guide_wrap .guide_sel .sel_on:hover .txt02 {color:#fff;}
.guide_wrap .guide_sel .ovs {display:none; position:absolute; left:0; right:0; top:5.9rem; z-index:2; max-height:154px; }
.guide_wrap .guide_sel .ovs.scroll {overflow-y:scroll;}
.guide_wrap .guide_sel ul {    z-index: 11; background:rgba(0, 53, 122, 0.3); border:1px solid #358cff;  }
.guide_wrap .guide_sel ul li {background:#073876;  border-bottom:1px solid #358cff;}
.guide_wrap .guide_sel ul li:last-child {border-bottom:none;}
.guide_wrap .guide_sel ul li:hover {background:#19509d;}
.guide_wrap .guide_sel .txt:hover .txt01 {color:#fff;} 
.guide_wrap .guide_sel .sel_on.open {background:#358cff;}
.guide_wrap .guide_sel .sel_on.open:before {background:url('../../images/common/game/dot_r.jpg') 0 0 no-repeat , url('../../images/common/game/dot_r.jpg') right 0 no-repeat, url('../../images/common/game/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/game/dot_r.jpg') right bottom no-repeat;}
.guide_wrap .guide_sel .sel_on.open:after {transform:scaleY(-1); background:url('../../images/common/sub/sub_depth2_arr.png') center center no-repeat, url('../../images/common/game/dot_r.jpg') 0 0 no-repeat , url('../../images/common/game/dot_r.jpg') right 0 no-repeat, url('../../images/common/game/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/game/dot_r.jpg') right bottom no-repeat; background-color:rgba(0, 0, 0, 0.4);}
.guide_wrap .guide_sel .sel_on.open .txt02 {display:none;}


.guide_wrap .dimmed {z-index:1111;}
.guide_wrap .pop-up {z-index: 1111; width:auto; left:0; right:0; transform:translate(0 , -50%); border:none;  padding:6rem 2.5rem; background:rgba(20, 40, 60, 0.7) url('../../images/common/game/bg_userguide.png') center 0 no-repeat;  border-top:1px solid #0096ff; border-bottom:1px solid #0096ff; box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.2);}
.guide_wrap .pop-up:before, .guide_wrap .pop-up:after {content:''; display:block; position:absolute; left:50%; width:14rem; height:2.1rem; margin-left:-7rem; background-image:url('../../images/common/game/label_user_n.png'); background-position:0 0; background-repeat:no-repeat; }
.guide_wrap .pop-up:before {top:0; background-image:url('../../images/common/game/label_user_n02.png');}
.guide_wrap .pop-up:after {bottom:0; }
.guide_wrap .pop-up .pop-layout {max-width:1024px; width:50%; margin:0 auto;}
.guide_wrap .pop-up .pop-layout h2 {font-family:'Roboto'; text-shadow:0 0.2rem 0.1rem rgba(0, 0, 0, 0.3); margin-bottom:3rem; font-size:16px; position:relative; color:#fff; font-weight:700; text-transform:uppercase; padding-left:3.2rem; min-height: 1.9rem;}
.guide_wrap .pop-up .pop-layout h2:before {border-radius: 0.5rem; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); content:''; display:block; position:absolute; top:50%; left:0; transform:translate(0, -50%); width:2.2rem; height:2.2rem; background:url('../../images/common/game/icon_youtube.png') 0 0 no-repeat; background-size:100% auto;}
.guide_wrap .pop-up .new_video_wrap {background: #000000;  position: relative;}
.guide_wrap .pop-up .new_video_wrap:before, .guide_wrap .pop-up .new_video_wrap:after {z-index:1; content:''; display:block; position:absolute; top:0; width:2rem; height:2rem; background-repeat:no-repeat; background-position:0 0;}
.guide_wrap .pop-up .new_video_wrap:before {left:0; background-image:url('../../images/common/game/icon_lt_y.png');}
.guide_wrap .pop-up .new_video_wrap:after {right:0; background-image:url('../../images/common/game/icon_rt_y.png');}
.guide_wrap .pop-up .new_video_wrap .new_video {overflow: hidden; position: relative;  height: 0;  padding-top: 56.25%;}
.guide_wrap .pop-up .new_video_wrap .new_video:before, .guide_wrap .pop-up .new_video_wrap .new_video:after {z-index:1; content:''; display:block; position:absolute; bottom:0; width:2rem; height:2rem; background-repeat:no-repeat; background-position:0 0;}
.guide_wrap .pop-up .new_video_wrap .new_video:before {left:0; background-image:url('../../images/common/game/icon_lb_y.png');}
.guide_wrap .pop-up .new_video_wrap .new_video:after {right:0; background-image:url('../../images/common/game/icon_rb_y.png');}
.guide_wrap .pop-up .new_video_wrap .new_video iframe {position: absolute; top: 0; left: 0; width: 100%; height:calc(100% - 1px);}
.guide_wrap .pop-up .explan {font-family:'Roboto'; font-size:12px; color:#fff; line-height:1.5; margin-top:3rem;}
.guide_wrap .pop-up .pop-close {right:0;}

.client_guide {border-top:0.4rem solid #ffdd00;}
.client_guide .pb_sub .pb_top .typing_wrap {font-size:34px; line-height:1.3; color:#fff; font-weight:700; text-shadow: 2px 2px 2px #000; text-transform: uppercase; letter-spacing: 0.04rem; height:auto;}
.client_guide .pb_sub .pb_top .typing_wrap span {display:block; color:#ffdd00;}
.client_guide .pb_sub .pb_game {padding-top:0;}

/* news */
.nw_wrap .nw_all .inner {max-width:2285px;}
.nw_wrap .nw_all .nsb_depth2:before, .nw_wrap .nw_all .nsb_depth2:after {position:absolute; left:-100%; right:-100%; content:''; display:block; height:1px; background:rgba(135,207,255,0.5);}
.nw_wrap .nw_all .nsb_depth2:before {top:0;}
.nw_wrap .nw_all .nsb_depth2:after {bottom:0;}
.nw_wrap .nw_list {padding:3rem 0; border-top:1px solid #5879d4; border-bottom:1px solid #5879d4; background:rgba(104, 154, 255, 0.5) url('../../images/common/news/bg_ptn_news.png') 0 0 repeat;}
.nw_wrap .nw_list .inner {position:relative; max-width:1310px;}
.nw_wrap .list {margin-left:-4rem; font-size:0; text-align:center;}
.nw_wrap .slick-track {margin:0 auto;}
.nw_wrap .list li {padding-left:4rem; display:inline-block; width:25%; float:none; text-align:left;}
.nw_wrap .list .con {position:relative; overflow:hidden; overflow:hidden; height:44rem;}
.nw_wrap .list .con:before {content:''; display:block; position:absolute;  z-index:1; background:#ffdd00; width:3px; height:100%; transition: 0.3s;  transform: translateY(100%); right:0; bottom:0;}
.nw_wrap .list .con:after {content:''; display:block; position:absolute;  z-index:1; background:#ffdd00; width:3px; height:100%; transition: 0.3s;  transform: translateY(-100%); top:0; left:0;}
.nw_wrap .list .thum_img {position:relative; width: 100%; background:rgba(0,0,0,0.7) url('../../images/common/default/thumb_default_media.png') center 50% no-repeat;  }
.nw_wrap .list .thum_img:before {z-index:1; transition: 0.3s; transform: translateX(-100%); content:''; display:block; position:absolute; top:0; left:0; width:100%; height:3px; background:#ffdd00;}
.nw_wrap .list .thum_img:after {transition: 0.3s; z-index:2; top:0; left:0; width:18px; height:18px;  content:''; display:block; position:absolute; background:url('../../images/common/icon_lt.png') 0 0 no-repeat;} 
.nw_wrap .list .desc {z-index: 1; transition: all 400ms ease; height:15rem;  padding:2rem; background:rgba(255, 255, 255, 0.2); color:#000000; position:absolute; bottom:0; left:0; right:0;}
.nw_wrap .list .desc:before {z-index:1; transition: 0.3s; transform: translateX(100%); content:''; display:block; position:absolute; bottom:0; right:0; width:100%; height:3px; background:#ffdd00;}
.nw_wrap .list .desc:after {transition: 0.3s; z-index:2; bottom:0; right:0; width:18px; height:18px;  content:''; display:block; position:absolute; background:url('../../images/common/icon_rb.png') 0 0 no-repeat;} 
.nw_wrap .list .desc .label {font-family:'Roboto'; z-index:2; color:#fff; display:block; width:80px; text-transform:uppercase; background:#689aff; font-size:12px; letter-spacing: 0.02rem; height:24px; line-height:24px; border-radius:5px; text-align:center; position:absolute; top:-1.7rem;; left:50%; transform:translate(-50% , 0); box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);}
.nw_wrap .list .desc .tit {margin-bottom:1rem; font-size:14px; height:34px; word-break:break-all; overflow: hidden; text-overflow: ellipsis; color:#fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight:700;}
.nw_wrap .list .desc .tit:before {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);}
.nw_wrap .list .desc .txt {font-family: 'Roboto', sans-serif; font-size:12px; height:32px; line-height:1.3;  word-break:break-all; overflow: hidden; text-overflow: ellipsis; color:#afafaf; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.nw_wrap .list .desc .date {margin-top: 1.7rem; color:#87cfff; font-family: 'Roboto', sans-serif; font-size:12px; text-transform:uppercase;}
.nw_wrap .nw_list .list .desc {background:rgba(0, 0, 0, 0.3);}
.nw_wrap .list .con:hover .thum_img:after {width:38px; height:38px; background:url('../../images/common/icon_lt_b.png') 0 0 no-repeat;} 
.nw_wrap .list .con:hover .desc:after {width:38px; height:38px; background:url('../../images/common/icon_rb_b.png') 0 0 no-repeat;} 
.nw_wrap .list .con:hover .desc:before, .nw_wrap .list .con:hover .thum_img:before {transform: translateX(0);}
.nw_wrap .list .con:hover:before, .nw_wrap .list .con:hover:after {transform: translateY(0);}
.nw_wrap .list .con:hover .desc .tit {color:#ffdd00; margin-left:-3px; margin-right:-3px;}
.nw_wrap .list .con:hover .desc .label {position:static; transform:none; margin:0 auto 1.5rem;}
.nw_wrap .list .con:hover .desc {background:rgba(0, 0, 0, 0.5);}

.nw_wrap .list .thum_img {height:28.5rem; overflow:hidden;  width:100%; position:relative; }
.nw_wrap .list .thum_img span {display:block; height:100%; position:relative;}
.nw_wrap .list .thum_img span:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1;}
.nw_wrap .list .thum_img img {position:absolute; min-width: 100%; height: 100%; top: 50%; left: 50%;  transform: translate(-50% , -50%); max-width: none; transition: all 400ms ease;}


.nw_wrap .list .con:hover .thum_img {margin-bottom:0;}
.nw_wrap .list .con:hover .thum_img img {transform:translate(-50% , -50%) scale(1.1); transition: all 400ms ease;}
.nw_wrap .list .con:hover .desc {height:24.6rem; transition: all 400ms ease; left:3px; right:3px;} 
.nw_wrap .list .con:hover .desc .txt {-webkit-line-clamp: 5; height:78px;  margin-left:-3px; margin-right:-3px;}
.nw_wrap .list .con:hover .desc .date { margin-left:-3px; margin-right:-3px;}
.nw_wrap .list .con:hover .desc:after {right:-3px;}

.nw_wrap .list .event .desc .label {background:#ff7510;}
.nw_wrap .list .promo .desc .label {background:#ab00a9;}
.nw_wrap .list .patch .desc .label {background:#00bb3e;}
.nw_wrap .list .esports .desc .label {background:#236cff;}

.nw_wrap .list .event .thum_img:after {background:url('../../images/common/icon_lt_o.png') 0 0 no-repeat;} 
.nw_wrap .list .event .desc:after {background:url('../../images/common/icon_rb_o.png') 0 0 no-repeat;} 

.nw_wrap .list .promo .thum_img:after {background:url('../../images/common/icon_lt_p.png') 0 0 no-repeat;} 
.nw_wrap .list .promo .desc:after {background:url('../../images/common/icon_rb_p.png') 0 0 no-repeat;} 

.nw_wrap .list .patch .thum_img:after {background:url('../../images/common/icon_lt_g.png') 0 0 no-repeat;} 
.nw_wrap .list .patch .desc:after {background:url('../../images/common/icon_rb_g.png') 0 0 no-repeat;} 

.nw_wrap .list .esports .thum_img:after {background:url('../../images/common/icon_lt_bl.png') 0 0 no-repeat;} 
.nw_wrap .list .esports .desc:after {background:url('../../images/common/icon_rb_bl.png') 0 0 no-repeat;} 



.nw_wrap .btn_nw_arr {cursor:pointer; font-size:0; top:50%; position:absolute; transform:translate(0 , -50%); background-repeat:no-repeat; background-color:rgba(255, 255, 255, 0); cursor:pointer; transition:none;  background-position:0 0 ;  width:42px; font-size:0px; display:none; z-index:99; height:52px; border:none;}
.nw_wrap .btn_nw_l {background-image:url('../../images/common/arr_big_l.png'); left:-5rem;}
.nw_wrap .btn_nw_r {background-image:url('../../images/common/arr_big_r.png'); right:-5rem;}
.nw_wrap .btn_nw_arr:hover { background-position:0 -52px ;}
.nw_wrap .btn_nw_arr.slick-hidden {cursor: default; }
.nw_wrap .btn_nw_arr.slick-hidden:hover {background-position:0 0 ;}
.nw_wrap .nw_all {padding-top:8rem;     overflow: hidden;}
.nw_wrap .nw_all .list {margin-bottom:2rem;}
.nw_wrap .nw_all .list li {margin-bottom:2rem;}
.nw_wrap .nw_all .nodata_n {margin-bottom:4rem;}
.nsb_depth2 {margin-bottom:5rem; position:relative;}
.nsb_depth2 a {height:52px; line-height:52px; font-weight:700; text-align:center; color:#93d3ff; display:block; text-transform:uppercase;}
.nsb_depth2 ul {font-size:0; display:flex;}
.nsb_depth2 ul li {display:inline-block; vertical-align:top; width:20%; flex-grow: 1;}
.nsb_depth2 ul li a {font-size:16px;   z-index: 1;  position: relative;}
.nw_wrap .nsb_depth2 ul li:nth-child(2) a {color:#ab00a9;} 
.nw_wrap .nsb_depth2 ul li:nth-child(3) a {color:#ff7510;} 
.nw_wrap .nsb_depth2 ul li:nth-child(4) a {color:#00bb3e;} 
.nw_wrap .nsb_depth2 ul li:nth-child(5) a {color:#236cff;} 

.nw_wrap .nw_all .list li { width:325px; margin-bottom:4rem;}

.nsb_depth2 a .num {top:5px; margin-left:0.5rem; border-radius:9px; padding:0 5px; line-height:normal; position:absolute; font-size:12px; color:#000000; font-weight:700; background:rgba(255, 252, 0, 0.8); border:1px solid #fffc00; display:inline-block; }
.nsb_depth2 ul li.on a, .nsb_depth2 ul li a:hover {border-top:1px solid #ff0000; border-bottom:1px solid #ff0000; color:#ff0000; font-size:18px; background:rgba(0, 0, 0, 0.6);}
.nsb_depth2 .nw_tab {display:none; position:relative; width:100%;; height:46px; line-height:46px; padding-left:2.4rem; text-transform:uppercase; font-size:16px; color:#fff; text-align:left; border:1px solid rgba(255, 0, 0, 0.4); background:rgba(0, 0, 0, 0.4); }
.nsb_depth2.wide ul {max-width:1200px; margin:0 auto;}
.nsb_depth2.wide {position:relative;}
.nsb_depth2.wide:before, .nsb_depth2.wide:after {content:''; display:block; left:0; right:0; background:#87cfff; position:absolute; height:1px;}
.nsb_depth2.wide:before {top:0;}
.nsb_depth2.wide:after {bottom:0;}

.nw_wrap .nw_v_con {position:relative; background:#000000; border: 1px solid rgba(255, 255, 255, 0.2); word-break:break-all; text-align:center;}
.nw_wrap .nw_v_con:before, .nw_wrap .nw_v_con:after {content:''; display:block; width:1.8rem; height:1.8rem; position:absolute; background-size:100% auto !important;} 
.nw_wrap .nw_v_con:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:-1px; top:-1px;}
.nw_wrap .nw_v_con:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:-1px; bottom:-1px;}
.nw_wrap .nw_v_con table {margin:0 auto; max-width:100%; table-layout:fixed;  word-break:break-all; width: 100%;}
.nw_wrap .nw_v_con table td, .view_txt table tr {width:auto !important; height:auto !important; word-break:break-all; white-space: pre-wrap;}
.nw_wrap .nw_v_con img {max-width:100% !important;  height:auto !important;}
.nw_wrap .nw_view .nw_v_tit {background:rgba(135, 207, 255, 0.3); margin-bottom:3.2rem; text-align:center;}
.nw_wrap .nw_view .inner {max-width:1800px;}
.nw_wrap .nw_view .nw_v_tit .inner {position:relative;}
.nw_wrap .nw_view .nw_v_tit .label {position:absolute; top:35%; left:2rem; display:inline-block; min-width:50px; text-transform:uppercase; margin-bottom:5px; letter-spacing:0.1rem; border-radius:3px; padding:0 0.8rem; font-size:12px; font-family:'Roboto'; height:23px; line-height:23px; text-align:center; color:#fff;}
.nw_wrap .nw_view .nw_v_tit .label_event { background:#ff7510; }
.nw_wrap .nw_view .nw_v_tit .label_patch { background:#00bb3e; }
.nw_wrap .nw_view .nw_v_tit .label_promo { background:#ab00a9; }
.nw_wrap .nw_view .nw_v_tit .label_esports { background:#236cff; }

.nw_wrap .nw_view .nw_v_tit .tit {word-break: break-all; color:#fff; font-size:18px; font-weight:700; text-align:center; line-height:1.3; padding:3.8rem 12rem 3.8rem 10rem;}
.nw_wrap .nw_view .nw_v_tit .date {position:absolute; top:50%; right:2rem; transform:translate(0 , -50%); font-family: 'Roboto', sans-serif; font-size:14px; color:#a7a7a7; text-transform:uppercase;}
.nw_wrap .nw_view .nw_v_con {color:#fff; font-family: 'Roboto', sans-serif;  font-size:14px; line-height:1.7; text-align:center;}

.nw_wrap .nw_view .nw_v_con {word-break:break-all;}
.nw_wrap .nw_view .nw_v_con table {margin:0 auto; max-width:100%; table-layout:fixed;  word-break:break-all;}
.nw_wrap .nw_view .nw_v_con table td, .nw_wrap .nw_view .nw_v_con table tr {width:auto !important; height:auto !important; word-break:break-all; white-space: pre-wrap;}
.nw_wrap .nw_view .nw_v_con img {max-width:100% !important;  height:auto !important;}

.nw_wrap .nw_view .nw_v_btns {margin:5rem 0; position:relative; font-size:0;}
.nw_wrap .nw_view .nw_v_btns a {position:relative; width:160px; vertical-align:top; height:50px; line-height:50px;}
.nw_wrap .nw_view .nw_v_btns .btn_line_r {position:absolute; right:0; top:0; width:240px;}
.nw_wrap .nw_view .nw_v_btns .btn_line_b {margin-right:1rem;}
.nw_wrap .nw_view .btn_line_b i {position:relative; top:-2px; display:inline-block; vertical-align:middle; margin-right:1rem; background-position:0 0; background-repeat:no-repeat;}
.nw_wrap .nw_view .btn_share i {width:9px; height:19px; background-image:url('../../images/common/icon_facebook.png');}
.nw_wrap .nw_view .btn_link i {width:21px; height:21px; background-image:url('../../images/common/icon_link.png');}
.nw_wrap .nw_view .btn_share:hover i{background-position:0 -19px;}
.nw_wrap .nw_view .btn_link:hover i {background-position:0 -21px;}
.nw_wrap .nw_view .nw_v_admin {text-align:center; font-size:0;}
.nw_wrap .nw_view .nw_v_admin a {margin:2.5rem;}
.nw_wrap .nw_view .nw_paging {background:rgba(135, 207, 255, 0.1); border-top:1px solid rgba(135,207,255,0.5); border-bottom:1px solid rgba(135,207,255,0.5);}
.nw_wrap .nw_view .nw_paging ul {font-size:0;}
.nw_wrap .nw_view .nw_paging ul li {display:inline-block; vertical-align:top; width:50%; padding:0 2rem;}
.nw_wrap .nw_view .nw_paging ul li a {padding: 2.4rem 3.6rem; max-width:360px; position:relative; font-family: 'Roboto', sans-serif; font-size:14px; color:#ffffff; overflow: hidden;  text-overflow: ellipsis; -ms-text-overflow: ellipsis;  white-space: nowrap; word-break: break-all; word-wrap: normal;}
.nw_wrap .nw_view .nw_paging ul li a:before {content:''; display:block; position:absolute; top:50%; transform:translate(0 , -50%); width:13px; height:22px; background-position:0 0; background-repeat:no-repeat;}
.nw_wrap .nw_view .nw_paging ul li.left a:before {background-image:url('../../images/common/arr_s_l.png'); left:0;}
.nw_wrap .nw_view .nw_paging ul li.right a:before {background-image:url('../../images/common/arr_s_r.png'); right:0;}
.nw_wrap .nw_view .nw_paging ul li a:hover:before {background-position:0 -22px;}
.nw_wrap .nw_view .nw_paging ul li a:hover {color:#fffc00;}
.nw_wrap .nw_view .nw_paging ul li.right {text-align:right;}

/* ranking */
.pb_rank .pb_sub_con .inner {max-width:1800px;}
.nrank_wrap {text-align:center;}
.nrank_wrap .nrank_top {background:url('../../images/common/sub/bg_notice_top.png') 0 0 repeat; font-size:16px; color:#fff; margin-bottom:5rem;}
.nrank_wrap .nrank_top img {display:block; margin:0 auto 1.5rem;}
.nrank_wrap .nrank_top .inner {position:relative; padding-top:1.8rem; padding-bottom:4rem;}
.nrank_wrap .nrank_top .inner:before, .nrank_wrap .nrank_top .inner:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.nrank_wrap .nrank_top .inner:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:2.5rem; top:0;}
.nrank_wrap .nrank_top .inner:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:2.5rem; bottom:0;}
.nrank_wrap .rk_depth2 {position:relative; margin:0 0 5rem;}
.nrank_wrap .rk_depth2:before, .nrank_wrap .rk_depth2:after {content:''; display:block; left:0; right:0; background:#87cfff; position:absolute; height:1px;}
.nrank_wrap .rk_depth2:before {top:0;}
.nrank_wrap .rk_depth2:after {bottom:0;}
.nrank_wrap .rk_depth2 ul {position:relative; z-index:1; max-width:1800px; margin:0 auto; padding: 0 2.5rem;}
.nrank_wrap .nrank_table {max-width:1800px; margin:0 auto 3rem;}
.nrank_wrap .nrank_top.my_rank .inner {padding-top:2rem; padding-bottom:2rem;}
.nrank_wrap .nrank_top.my_rank .inner:before, .nrank_wrap .nrank_top.my_rank .inner:after {z-index:2;}
.nrank_wrap .nrank_top.my_rank .inner:before {top:2rem;}
.nrank_wrap .nrank_top.my_rank .inner:after {bottom:2rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table {margin-bottom:0;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr {margin-bottom:0; border:1px solid rgba(135, 207, 255, 0.5); background:rgba(0, 0, 0, 0.3) !important; border-left:0; border-right:0;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr:before {display:none;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .rank {border-bottom:1px solid rgba(135, 207, 255, 0.5);}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .name {border-right:1px solid rgba(135, 207, 255, 0.5); padding-top:1.5rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .win {border-right:1px solid rgba(135, 207, 255, 0.5); line-height:normal; padding-top:1.8rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .win img {margin-bottom:-7px;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .win span {border-radius:4px; border:1px solid #ffff00; display:inline-block; text-transform:uppercase; font-size:10px; color:#ffff00; letter-spacing:0.01rem; height:17px; line-height:17px; background:url('../../images/common/clan/ptn05.png') 0 0 repeat; padding:0 1rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .win span font {color:#aaaaaa;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .ml .tit {color:#87cfff;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .rank img {display:inline; margin-bottom:0;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr:hover {background:none;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .name .num {font-size:20px; color:#ffdd00; font-weight:700; margin-top:1.5rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .name .num .state {display:inline-block; margin-left:2.4rem;}

.nrank_wrap .r_tr {margin-bottom:1.2rem; position:relative;  font-size: 0;  height: 96px; border:1px solid rgba(136, 136, 136, 0.8); background: rgba(136, 136, 136, 0.1);}
.nrank_wrap .r_tr:hover {background-image:url('../../images/common/rank/bg_rank_ov03.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center center;}
.nrank_wrap .r_tr > div {float:left;}
.nrank_wrap .r_tr:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; width:6px; background-repeat:repeat-y; background-position:0 0; background-image:url('../../images/common/rank/bar_rank03.png');}
.nrank_wrap .r_tr .win {position:relative; width:100px; height:100%; border-right:1px solid rgba(136, 136, 136, 0.4); font-size:20px; color:#bbbbbb; font-weight:700; line-height:96px; text-align:center;}
.nrank_wrap .r_tr .win .state {margin-top:0 !important;   position:absolute; top:1.3rem; left:1rem; right:1rem; text-align:right; background: url(../../images/common/rank/icon_state_same.png) right bottom no-repeat;}
.nrank_wrap .r_tr .win .state.up, .nrank_wrap .r_tr .win .state.down {top:3px;}
.nrank_wrap .r_tr .name {width:calc(((100% - 100px) * 3) / 5); height:100%; border-right:1px solid rgba(136, 136, 136, 0.4); padding:2.4rem 2.4rem 0 3rem; text-align:left;}
.nrank_wrap .r_tr .ml {width:calc(((100% - 100px) * 2) / 5); height:50%; display:table; color:#fff; font-size:14px; text-align:right; padding-right:3rem; padding-left:9rem; position:relative;     word-break: break-all;}
.nrank_wrap .r_tr .ml .tit {position:absolute; top:50%; left:3rem; transform:translate(0 , -50%); font-size:12px; color:#bbbbbb; font-weight:700; text-transform:uppercase; z-index: 1;}
.nrank_wrap .r_tr .ml .txt {display: table-cell;  vertical-align: middle; font-family: 'Roboto', sans-serif; font-size:14px; }
.nrank_wrap .r_tr .leader a {color:#fff;}
.nrank_wrap .r_tr .rank {border-bottom:1px solid rgba(136, 136, 136, 0.4);}
.nrank_wrap .r_tr .name a {max-width: 100%; font-size: 20px; color: #fff; font-weight: 700;  overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.nrank_wrap .r_tr .name a:hover {text-decoration:underline; color:#ffdd00;}
.nrank_wrap .r_tr .rank img, .nrank_wrap .r_tr .leader img ,.nrank_wrap .r_tr .member img {vertical-align: middle; width:20px; height:20px; margin-right:5px; position: relative; top: -2px;}
.nrank_wrap .r_tr .logo { position: relative; width:50px; height:50px;}
.nrank_wrap .r_tr .logo img { margin-right: 0;  position: absolute;  /* top: 50%; left: 50%; transform: translate(-50%, -50%); */}
.nrank_wrap .r_tr .logo img.bg { z-index: 1;}
.nrank_wrap .r_tr .logo img.img_logo {z-index: 2;}
.nrank_wrap .r_tr .info {padding: 2rem 3.6rem 0;  text-align: left;}
.nrank_wrap .r_tr .odd font {color:#bbbbbb;}
.nrank_wrap .r_tr .odd .per {color:#bbbbbb;}
.nrank_wrap .r_tr.no01:before {background-repeat:no-repeat; background-image:url('../../images/common/rank/bar_rank01.png');} 
.nrank_wrap .r_tr.no02:before, .nrank_wrap .r_tr.no03:before {background-repeat:no-repeat; background-image:url('../../images/common/rank/bar_rank02.png');} 
.nrank_wrap .r_tr.no01 {border:1px solid rgba(255, 255, 0, 0.4);  background: rgba(255, 255, 0, 0.2);}
.nrank_wrap .r_tr.no02, .nrank_wrap .r_tr.no03 {border: 1px solid rgba(0, 255, 204, 0.4);  background: rgba(0, 255, 204, 0.2);}
.nrank_wrap .r_tr.no01 > div {border-color:rgba(255, 221, 0, 0.2);}
.nrank_wrap .r_tr.no02 > div, .nrank_wrap .r_tr.no03 > div {border-color:rgba(0, 255, 204, 0.2);}
.nrank_wrap .r_tr.no01 .win {font-size:25px; color:#ffff00; background: url(../../images/common/clan/bg_rank1.png) center center no-repeat; background-size: 56px auto;}
.nrank_wrap .r_tr.no02 .win, .nrank_wrap .r_tr.no03 .win {font-size:25px; color:#00ffcc; background: url(../../images/common/clan/bg_rank.png) center center no-repeat;}
.nrank_wrap .r_tr.no01 .ml .tit {color:#ffdd00;}
.nrank_wrap .r_tr.no02 .ml .tit, .nrank_wrap .r_tr.no03 .ml .tit {color:#00ffcc;}
.nrank_wrap .r_tr.no01:hover {background-image:url('../../images/common/rank/bg_rank_ov01.jpg'); }
.nrank_wrap .r_tr.no02:hover, .nrank_wrap .r_tr.no03:hover {background-image:url('../../images/common/rank/bg_rank_ov02.jpg'); }

.nrank_wrap .nrank_table02 .r_tr .name {width:calc(((100% - 100px) * 4) / 10); padding-left:9.6rem; position:relative; padding-top:2rem;}
.nrank_wrap .nrank_table02 .r_tr .ml {width:calc(((100% - 100px) * 3) / 10); padding-left:11rem;}

.nrank_wrap .nrank_table02 .r_tr .logo {position:absolute; left:-1.2rem; top:50%; transform:translate(0 , -50%); width:106px; height:106px; margin:1.2rem; overflow:hidden; border:none !important; transform: scale(0.5);     top: -17px;}
.nrank_wrap .nrank_table02 .r_tr .logo img {max-width:none; position:absolute;}
.nrank_wrap .nrank_table02 .r_tr .c_bg {z-index:1;}
.nrank_wrap .nrank_table02 .r_tr .c_bg_line {z-index:2;}
.nrank_wrap .nrank_table02 .r_tr .c_img {z-index:3;}
.nrank_wrap .nrank_table02 .r_tr .c_img_line {z-index:4;}
.nrank_wrap .nrank_table02 .r_tr img.bg {z-index:1; max-width:100%; }
.nrank_wrap .nrank_table02 .r_tr img.img_logo {z-index:2; max-width:100%;}

.nrank_wrap .nrank_table02 .r_tr .rank {border:none; display:block; font-size:14px; color:#aaaaaa; margin-top:5px; font-family:'Roboto';}
.nrank_wrap .nrank_table02 .r_tr .leader {border-bottom: 1px solid rgba(136, 136, 136, 0.4); border-right: 1px solid rgba(136, 136, 136, 0.4);}
.nrank_wrap .nrank_table02 .r_tr .member {border-bottom: 1px solid rgba(136, 136, 136, 0.4);}
.nrank_wrap .nrank_table02 .r_tr .exp {border-right: 1px solid rgba(136, 136, 136, 0.4);}
.nrank_wrap .nrank_table02 .r_tr.no01 > div {border-color:rgba(255, 221, 0, 0.2);}
.nrank_wrap .nrank_table02 .r_tr.no02 > div, .nrank_wrap .nrank_table02 .r_tr.no03 > div {border-color:rgba(0, 255, 204, 0.2);}
.nrank_wrap .r_tr.no01 .odd font {color:#ffdd00;}
.nrank_wrap .r_tr.no01 .odd .per {color:#ffdd00;}
.nrank_wrap .r_tr.no02 .odd font, .nrank_wrap .r_tr.no03 .odd font {color:#00ffcc;}
.nrank_wrap .r_tr.no02 .odd .per, .nrank_wrap .r_tr.no03 .odd .per {color:#00ffcc;}

.nrank_wrap .nrank_table03 .r_tr .ml {height:100%;}

.nrank_wrap .nrank_table02 .r_tr.no01 .rank {color:#ffdd00;}
.nrank_wrap .nrank_table02 .r_tr.no02 .rank, .nrank_wrap .nrank_table02 .r_tr.no03 .rank {color:#00ffcc;}
.nrank_wrap .season_state {position:relative; margin-bottom:3rem; background:rgba(0, 0, 0, 0.7); font-size:14px; color:#87cfff; line-height:1.5; word-break:keep-all; padding:5rem 2.5rem; }
.nrank_wrap .season_state .date {font-weight:700; color:#fffc00; text-transform:uppercase; margin-bottom:1.5rem; font-size:18px;}
.nrank_wrap .season_state .date span {color:#fff;}
.nrank_wrap .season_state:before, .nrank_wrap .season_state:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.nrank_wrap .season_state:before {background:url('../../images/common/icon_lt_y.png') 0 0 no-repeat; left:-1px; top:-1px;}
.nrank_wrap .season_state:after {background:url('../../images/common/icon_rb_y.png') 0 0 no-repeat; right:-1px; bottom:-1px;}
.nrank_wrap .nrank_table .state {margin-top:1rem; font-size:13px; text-shadow:0 1px 1px rgba(0, 0, 0, 0.7); font-weight:600; display:block; line-height:normal; min-height:4px; background:url('../../images/common/rank/icon_state_same.png') 0 center no-repeat;}
.nrank_wrap .nrank_table .state.up {margin-top:4px; color:#ff0000; background:none;}
.nrank_wrap .nrank_table .state.up:before {position:relative; top:-1px; margin-right:3px; content:''; display:inline-block; vertical-align:middle; width:12px; height:10px; background:url('../../images/common/rank/icon_state_up.png') center center no-repeat;}
.nrank_wrap .nrank_table .state.down {margin-top:4px; color:#689aff; background:none;}
.nrank_wrap .nrank_table .state.down:before {position:relative; top:0; margin-right:3px; content:''; display:inline-block; vertical-align:middle; width:12px; height:10px; background:url('../../images/common/rank/icon_state_down.png') center center no-repeat;}
.nrank_wrap .nrk_b {position:relative;}
.nrank_wrap .nrk_b .new_search_wrap {position:absolute; bottom:-1rem; right:0;}
.nrank_wrap .nrk_explan {padding:3rem; border:1px solid rgba(135, 207, 255, 0.5); position:relative; margin-top:6rem;}
.nrank_wrap .nrk_explan:before, .nrank_wrap .nrk_explan:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.nrank_wrap .nrk_explan:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:-1px; top:-1px;}
.nrank_wrap .nrk_explan:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:-1px; bottom:-1px;}
.nrank_wrap .nk_map {margin-bottom:3rem;}
.nrank_wrap .nk_map ul {font-size:0; margin-left:-2rem;}
.nrank_wrap .nk_map ul li { position:relative; width:25%; padding-left:2rem; display:inline-block; vertical-align:middle;}
.nrank_wrap .nk_map ul li img {width:100%;}
.nrank_wrap .nk_map ul li img.on {position:absolute; top:0; bottom:0; left:0; right:0; display:none;}
.nrank_wrap .nk_map ul li a {display:block; border:1px solid rgba(255,255,255,0.3); position:relative; overflow:hidden;}
.nrank_wrap .nk_map ul li a:before, .nrank_wrap .nk_map ul li a:after {content:''; display:none; width:18px; height:18px; position:absolute; z-index:1;} 
.nrank_wrap .nk_map ul li a:before {background:url('../../images/common/icon_cramp_lt_w.png') 0 0 no-repeat; left:1rem; top:1rem; }
.nrank_wrap .nk_map ul li a:after {background:url('../../images/common/icon_cramp_rb_w.png') 0 0 no-repeat; right:1rem; bottom:1rem;}
.nrank_wrap .nk_map ul li a span {display:none; position:absolute; text-transform:uppercase; top:50%; ; transform:translate(0 , -50%); left:0; right:0; font-size:20px; color:#87cfff; font-weight:700;}
.nrank_wrap .nk_map ul li a:hover, .nrank_wrap .nk_map ul li.on a {border:2px solid #87cfff; }
.nrank_wrap .nk_map ul li a:hover:before, .nrank_wrap .nk_map ul li a:hover:after, .nrank_wrap .nk_map ul li.on a:before, .nrank_wrap .nk_map ul li.on a:after {display:block;}
.nrank_wrap .nk_map ul li a:hover span, .nrank_wrap .nk_map ul li.on a span {display:block; color:#fff;}
.nrank_wrap .nk_map ul li a:hover img.on, .nrank_wrap .nk_map ul li.on a img.on  {display:block; }
.nrank_wrap .nk_my {background: url('../../images/common/sub/bg_notice_top.png') 0 0 repeat; font-size: 16px;  color: #fff;  margin-bottom: 5rem; padding:3rem 0;}
.nrank_wrap .nk_my .inner {position:relative;}
.nrank_wrap .nk_my .inner:before, .nrank_wrap .nk_my .inner:after {content:''; display:block; width:18px; height:18px; position:absolute; z-index: 1;} 
.nrank_wrap .nk_my .inner:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:2.5rem; top:0;}
.nrank_wrap .nk_my .inner:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:2.5rem; bottom:0;}
.nrank_wrap .nk_my .nrank_table {margin-bottom:0;}
.nrank_wrap .nk_my .nrank_table .r_tr {margin-bottom:0; background: rgba(0, 0, 0, 0.5) !important; border:1px solid rgba(135, 207, 255, 0.5); border-left:0; border-right:0;}
.nrank_wrap .nk_my .nrank_table .r_tr:before {display:none;}
.nrank_wrap .nk_my .r_tr .win {color:#87cfff;}
.nrank_wrap .nk_my .nrank_table02 .r_tr .rank {color:#aa9977;}
.nrank_wrap .nk_my .r_tr > div {border-color: rgba(135, 207, 255, 0.5) !important; }
.nrank_wrap .nk_my .r_tr:hover {background-image:none; }
.nrank_wrap .nk_my .r_tr .ml .tit {color:#87cfff;}
.nrank_wrap .nk_my .r_tr .name a {position:relative; padding-right:65px;}
.nrank_wrap .nk_my .r_tr .name a:after {top:50%; right:0; transform:translate(0 , -50%); content:''; display:block; width:56px; height:17px; background:url('../../images/common/clan/my_clan.png') 0 0 no-repeat; position:absolute;}
.nrank_wrap .nk_my .r_tr .no_login {text-align:center; word-break:keep-all; font-size:14px; color:#fff; float:none; line-height:96px;}
.nrank_wrap .nk_my .r_tr .no_login font {color:#ffdd00;}
.nrank_wrap .nk_my .r_tr .win {background:url('../../images/common/rank/bg_my_clan.png') center center no-repeat;}
.nrank_wrap .nk_my .nrank_table .r_tr .name {padding-left:3rem; padding-top:1rem;}
.nrank_wrap .nk_my .nrank_table .r_tr .name .num {font-size:16px; color:#ffdd00; font-weight:700; margin-top:2px;}
.nrank_wrap .nk_my .nrank_table .r_tr .name .num .state {display:inline-block; margin-left:1rem;}
.nrank_wrap .nk_my .r_tr .logo {transform: scale(0.35); margin:1rem;}
.nrank_wrap .nk_my .nrank_table02 .r_tr .rank {color:#aaaaaa; margin-top:0.8rem;}
.nrank_wrap .nk_my .r_tr .odd .per, .nrank_wrap .nk_my .r_tr .odd font {color:#87cfff;}

/* 장성 계급 추가 */
.nrank_wrap .r_tr .rank .rank_img {position:relative; display:inline-block; vertical-align:middle; margin-right:5px; top:2px; z-index: 1;}
.nrank_wrap .r_tr .rank .rank_img img {margin-right:0;}
.nrank_wrap .r_tr.general .rank .rank_img {margin-right:14px; }
.nrank_wrap .r_tr.general .rank {background-color:rgba(136, 136, 136, 0.1);}
.nrank_wrap .r_tr.general .rank .bg {animation: bg 77s linear infinite;  position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background-image:url('../../images/common/rank/bg_ptn_gnr.png'); background-position:right center; background-repeat: repeat; mix-blend-mode: color-dodge;}
.nrank_wrap .r_tr.general .rank .txt:before {position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px;  border: 1px solid; padding: 1px; border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30; animation: borderRotate var(--d) linear infinite forwards; content:''; display:block; }
.nrank_wrap .r_tr.general .rank:before { content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('../../images/common/rank/ag_lt_g.png') 0 0 no-repeat, url('../../images/common/rank/ag_lb_g.png') 0 bottom no-repeat, url('../../images/common/rank/ag_rt_g.png') right 0 no-repeat, url('../../images/common/rank/ag_rb_g.png') right bottom no-repeat;}
.nrank_wrap .r_tr.general .rank img {width:24px; height:24px;}
.nrank_wrap .r_tr.general .rank .rank_img:before {width:32px; height:32px; content:''; display:block; position:absolute; top:50%; left:50%; margin-top:-18px; margin-left:-16px; background-image:url('../../images/common/rank/bg_rank_gnr03.png'); background-repeat:no-repeat; background-position:0 0;}
.nrank_wrap .r_tr.general.no01 .rank {background-color:rgba(255, 221, 0, 0.1);}
.nrank_wrap .r_tr.general.no01 .rank:before {background:url('../../images/common/rank/ag_lt_y.png') 0 0 no-repeat, url('../../images/common/rank/ag_lb_y.png') 0 bottom no-repeat, url('../../images/common/rank/ag_rt_y.png') right 0 no-repeat, url('../../images/common/rank/ag_rb_y.png') right bottom no-repeat;}
.nrank_wrap .r_tr.general.no01 .rank .rank_img:before {background-image:url('../../images/common/rank/bg_rank_gnr01.png');}
.nrank_wrap .r_tr.general.no02 .rank {background-color:rgba(0, 255, 204, 0.1);}
.nrank_wrap .r_tr.general.no02 .rank:before {background:url('../../images/common/rank/ag_lt_t.png') 0 0 no-repeat, url('../../images/common/rank/ag_lb_t.png') 0 bottom no-repeat, url('../../images/common/rank/ag_rt_t.png') right 0 no-repeat, url('../../images/common/rank/ag_rb_t.png') right bottom no-repeat;}
.nrank_wrap .r_tr.general.no02 .rank .rank_img:before {background-image:url('../../images/common/rank/bg_rank_gnr02.png');}
.nrank_wrap .r_tr.general.no03 .rank {background-color:rgba(0, 255, 204, 0.1);}
.nrank_wrap .r_tr.general.no03 .rank:before {background:url('../../images/common/rank/ag_lt_t.png') 0 0 no-repeat, url('../../images/common/rank/ag_lb_t.png') 0 bottom no-repeat, url('../../images/common/rank/ag_rt_t.png') right 0 no-repeat, url('../../images/common/rank/ag_rb_t.png') right bottom no-repeat;}
.nrank_wrap .r_tr.general.no03 .rank .rank_img:before {background-image:url('../../images/common/rank/bg_rank_gnr02.png');}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr.general .rank:before {background:url('../../images/common/rank/ag_lt_b.png') 0 0 no-repeat, url('../../images/common/rank/ag_lb_b.png') 0 bottom no-repeat, url('../../images/common/rank/ag_rt_b.png') right 0 no-repeat, url('../../images/common/rank/ag_rb_b.png') right bottom no-repeat;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr.general .rank_img:before {background-image:url('../../images/common/rank/bg_rank_gnr_my.png');}


/* media */
.pb_sub .pb_media .inner {max-width:2070px;}
.nmedia_wrap .nm_list {font-size:0; margin-left:-3rem;}
.nmedia_wrap .nm_list > li {display:inline-block; vertical-align:top; width:calc(100% / 5); padding-left:3rem; margin-bottom:3rem;}
.nmedia_wrap .nm_list .con {position:relative; overflow:hidden;}
.nmedia_wrap .nm_list .thum {height:auto; position:relative; padding-top:56.31%; background:rgba(0,0,0,0.7) url('../../images/common/default/thumb_default_media.png') center 50% no-repeat;  overflow:hidden;}
.nmedia_wrap .media_video .s_link { z-index: 1; opacity:1; background:none;}
.nmedia_wrap .media_video .s_link:before, .nmedia_wrap .media_video .s_link:after {top:50%; left:50%; margin-left:-75px; margin-top:-98px; content:''; display:block; position:absolute; width:149px; height:136px; background-repeat:no-repeat; background-position:0 0;}
.nmedia_wrap .media_video .s_link:before {background-image:url('../../images/common/media/icon_play.png');}
.nmedia_wrap .media_video .s_link:after {background-image:url('../../images/common/media/icon_play_round.png');}
.nmedia_wrap .media_video .s_link:hover:after {animation: circle1AnimationMove 5s ease infinite;}
.nmedia_wrap .nm_list .thum img {position:absolute; width:100%; height:100%; top:0; left:0; transition: all 400ms ease;}
.nmedia_wrap .nm_list .info {background:rgba(0, 0, 0, 0.5); padding:2rem; position:relative;}
.nmedia_wrap .nm_list .info .tit { font-family: 'Roboto', sans-serif; font-size:11px; color:#ff2c00; font-weight:500; text-transform:uppercase;}
.nmedia_wrap .nm_list .info .tit:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat , url('../../images/common/account/dot_r.jpg') right 0 no-repeat , url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat ,url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.nmedia_wrap .nm_list .info .tit img {margin-right:7px; vertical-align: middle; position: relative;  top: -1px;}
.nmedia_wrap .nm_list .info .txt {margin-top:5px; font-size:16px; color:#fff; font-weight:500; text-transform:uppercase; overflow: hidden; text-overflow: ellipsis;  -ms-text-overflow: ellipsis;  white-space: nowrap; word-wrap: normal;}
.nmedia_wrap .nm_list.media_paper .info .btn_more {display:block; position:absolute; top:0; bottom:0; right:0; width:7.7rem; background:rgba(53, 140, 255, 0.2);}
.nmedia_wrap .nm_list.media_paper .info .btn_more:before {content:''; display:block; position:absolute; top:50%; left:50%; width:25px; height:25px; margin-left:-12px; margin-top:-12px; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/media/icon_media.png');}
.nmedia_wrap .nm_list.media_paper .info .btn_more:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat , url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat;}
.nmedia_wrap .nm_list .con:before {content:''; display:block; position:absolute;  z-index:1; background:#ffdd00; width:3px; height:100%; transition: 0.3s;  transform: translateY(100%); right:0; bottom:0;}
.nmedia_wrap .nm_list .con:after {content:''; display:block; position:absolute;  z-index:1; background:#ffdd00; width:3px; height:100%; transition: 0.3s;  transform: translateY(-100%); top:0; left:0;}
.nmedia_wrap .nm_list .thum:before {z-index:1; transition: 0.3s; transform: translateX(-100%); content:''; display:block; position:absolute; top:0; left:0; width:100%; height:3px; background:#ffdd00;}
.nmedia_wrap .nm_list .info:after {z-index:1; transition: 0.3s; transform: translateX(100%); content:''; display:block; position:absolute; bottom:0; right:0; width:100%; height:3px; background:#ffdd00;} 
.nmedia_wrap .nm_list .con:hover:before , .nmedia_wrap .nm_list .con:hover:after {transform: translateX(0);}
.nmedia_wrap .nm_list .con:hover .thum:before, .nmedia_wrap .nm_list .con:hover .info:after {transform: translateY(0);}
.nmedia_wrap .nm_list .thum:after, .nmedia_wrap .nm_list .info:before {content:''; display:none; width:38px; height:38px; position:absolute; z-index:2;} 
.nmedia_wrap .nm_list .thum:after {background:url('../../images/common/icon_lt_b.png') 0 0 no-repeat; left:0; top:0;}
.nmedia_wrap .nm_list .info:before {background:url('../../images/common/icon_rb_b.png') 0 0 no-repeat; right:0; bottom:0;}
.nmedia_wrap .nm_list .con:hover .thum:after, .nmedia_wrap .nm_list .con:hover .info:before {display:block;}
.nmedia_wrap .nm_list .con:hover .thum img {transform:scale(1.1); transition: all 400ms ease;}
.nmedia_wrap .nm_list.media_paper .con:hover .info .btn_more:after {display:none;}
.nmedia_wrap .nm_list.media_paper .con:hover .info .btn_more:before {background-position:0 -25px; z-index:9;}
.nmedia_wrap .nm_list .con:hover .cover {background:rgba(0, 0, 0, 0.5); position:absolute; top:0; bottom:0; left:0; right:0;}
.nmedia_wrap .nm_list .con:hover .s_link {opacity:1; background:none;}
.nmedia_wrap .nm_list .con:hover .info .tit {position:relative; z-index:9; color:#ffdd00;}
.nmedia_wrap .nm_list .con:hover .info .txt {position:relative; z-index:9; color:#ffdd00;}
.nmedia_wrap .nm_list .con:hover .info .tit:before {display:none;}

.nmedia_wrap .nm_list.media_paper .info {padding-right:9rem;}
.pop-up.pop_new_media {border:none; background:none; width:1023px;}
.pop-up.pop_new_media .pop-layout > h2 {background:none; padding:1.8rem 15rem 1.8rem 0; top:0; margin-bottom:1rem;}
.pop-up.pop_new_media .pop-con .mda_wrap {border:1px solid #000;}
.pop-up.pop_new_media .pop-layout > h2 a {transition:none; display:inline-block; vertical-align:middle; width:6rem; height:6rem; background-repeat:no-repeat; background-position:0 0; top:50%; transform:translate(0 , -50%); position:absolute;}
.pop-up.pop_new_media .pop-layout > h2 a:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px;}
.pop-up.pop_new_media .pop-layout > h2 .pop-close {background-color:rgba(54, 80, 132, 0.5); border:1px solid #365084; background-image:url('../../images/common/media/btn_close.png'); right:0;}
.pop-up.pop_new_media .pop-layout > h2 .pop-close:before {background:url('../../images/common/character/dot_y.png') right 0 no-repeat , url('../../images/common/character/dot_y.png') right bottom no-repeat;}
.pop-up.pop_new_media .pop-layout > h2 .btn_downzip {background-color:rgba(104, 154, 255, 0.5); border:1px solid rgba(104, 154, 255, 0.5); background-image:url('../../images/common/media/btn_down.png'); right:7rem; font-size:0;}
.pop-up.pop_new_media .pop-layout > h2 .btn_downzip:before {background:url('../../images/common/character/dot_y.png') 0 0 no-repeat , url('../../images/common/character/dot_y.png') 0 bottom no-repeat;}
.pop-up.pop_new_media .pop-layout > h2 a:hover {background-position:0 -6rem;}
.pop-up.pop_new_media .pop-layout > h2 .pop-close:hover {background-color:rgba(54, 80, 132, 0.9);}
.pop-up.pop_new_media .pop-layout > h2 .btn_downzip:hover {background-color:#689aff; border-color:#689aff;}
.pop-up.pop_new_media .pop-layout > h2 .pop-close.close_sc:before {background:url('../../images/common/character/dot_y.png') 0 0 no-repeat , url('../../images/common/character/dot_y.png') 0 bottom no-repeat , url('../../images/common/character/dot_y.png') right 0 no-repeat , url('../../images/common/character/dot_y.png') right bottom no-repeat;}



/* faq */
.pb_sub .pb_sub_con .nfaq_wrap .inner {max-width:1800px;}
.nfaq_wrap .fq_depth2 {position:relative; margin-bottom:3rem;}
.nfaq_wrap .fq_depth2:before, .nfaq_wrap .fq_depth2:after {content:''; display:block; left:0; right:0; background:rgba(135,207,255,0.5); position:absolute; height:1px;}
.nfaq_wrap .fq_depth2:before {top:0;}
.nfaq_wrap .fq_depth2:after {bottom:0;}
.nfaq_wrap .fq_depth2 ul li a {border:none;}
.nfaq_wrap .fq_depth2 ul li.on a, .nfaq_wrap .fq_depth2 ul li a:hover {border-top: 1px solid #ff0000; border-bottom: 1px solid #ff0000;}
.nfaq_wrap .nfaq_top {background:url('../../images/common/sub/bg_notice_top.png') 0 0 repeat; text-align:center; margin-bottom:3rem;}
.nfaq_wrap .nfaq_top .inner {position:relative; padding-top:4rem; padding-bottom:4rem; max-width:1800px;}
.nfaq_wrap .nfaq_top .inner:before, .nfaq_wrap .nfaq_top .inner:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.nfaq_wrap .nfaq_top .inner:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:2.5rem; top:0;}
.nfaq_wrap .nfaq_top .inner:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:2.5rem; bottom:0;}
.nfaq_wrap .nfaq_top .info {font-size:14px; color:#fff; font-family:'Roboto';}
.nfaq_wrap .nfaq_top .info > div {display:inline-block; vertical-align:middle;}
.nfaq_wrap .nfaq_top .info .go_ticket {line-height: normal; position:relative; top:-2px; display:inline-block; vertical-align:middle; margin-left:1rem; padding:3px 6px; border-radius:2px;  border:1px solid #fffc00; color:#fffc00; text-transform:uppercase; font-size:14px;}
.nfaq_wrap .nfaq_top .info .go_ticket:hover {color:#fff; background:rgba(255, 252, 0, 0.6);}
.nfaq_wrap .nfaq_top .new_search_wrap {width:100%; max-width:490px; margin:0 auto 1.7rem; border:1px solid #fff;}
.nfaq_wrap .nfaq_top .new_search_wrap:before, .nfaq_wrap .nfaq_top .new_search_wrap:after {background:url('../../images/common/bg_search_dot_w.jpg') 0 0 no-repeat, url('../../images/common/bg_search_dot_w.jpg') 0 bottom no-repeat; top:0; bottom:0;}
.nfaq_wrap .nfaq_top .new_search_wrap:before {left:0;}
.nfaq_wrap .nfaq_top .new_search_wrap:after {right:0;}
.nfaq_wrap .nfaq_top .new_search_wrap .search_area {height:60px; }
.nfaq_wrap .nfaq_top .new_search_wrap .search_area input[type=text] {color:#fff; font-family:'roboto', sans-serif ; } 
.nfaq_wrap .nfaq_top .new_search_wrap .search_area input[type=text]:focus {color:#fffc00;}
.nfaq_wrap .nfaq_top .new_search_wrap .search_area input[type=text]:focus::placeholder {color:#fffc00;}
.nfaq_wrap .nfaq_top .new_search_wrap .search_area button {background-image: url(../../images/common/icon_search_w.png);}
.nfaq_wrap .nfaq_data {text-align:center; font-size:14px; color:#fff; letter-spacing:0.01rem; padding:5rem 2.5rem; margin-top:-3rem;}
.nfaq_wrap .nfaq_data font {color:#fffc00;}
.nfaq_wrap .nfaq_list {margin-bottom:3rem;}
.nfaq_wrap .nfaq_list li {font-size:0; position:relative; z-index:1;}
.nfaq_wrap .nfaq_list li:before {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);}
.nfaq_wrap .nfaq_list li > div {margin-bottom:0.4rem; position:relative; padding-left:6rem;}
.nfaq_wrap .nfaq_list li .qa {width:6rem; position:absolute; top:0; bottom:0; left:0; background:rgba(255, 255, 255, 0.1); }
.nfaq_wrap .nfaq_list li .qa img {position:absolute; top:50%; left:50%; transform:translate(-50% , -50%);}
.nfaq_wrap .nfaq_list li .txt {line-height:2; margin-left:1px; width:calc(100% - 1px); vertical-align:top; background:rgba(255, 255, 255, 0.2); font-family: 'Roboto', sans-serif; font-size:14px; color:#fff; padding:1.6rem 2.4rem;} 
.nfaq_wrap .nfaq_list li .tit { cursor:pointer; font-size:0; position:relative;}
.nfaq_wrap .nfaq_list li .answer {display:none;  margin-top: -0.4rem;}
.nfaq_wrap .nfaq_list li .answer .txt { background:rgba(0, 0, 0, 0.3); padding: 0 2.4rem 1.6rem 2.4rem;}

.nfaq_wrap .nfaq_list li .answer .txt {word-break:break-word;}
.nfaq_wrap .nfaq_list li .answer .txt table {margin:0 auto; max-width:100%; table-layout:fixed;  word-break:break-all;}
.nfaq_wrap .nfaq_list li .answer .txt table td, .nfaq_wrap .nfaq_list li .answer .txt table tr {font-size: 12px; width:auto !important; height:auto !important; word-break:break-all; white-space: pre-wrap;}
.nfaq_wrap .nfaq_list li .answer .txt img {max-width:100% !important;  height:auto !important;}
.nfaq_wrap .nfaq_list li .answer .txt * {font-size: 12px;     line-height: 2;     font-family: 'Roboto', sans-serif; color:#fff;}
.nfaq_wrap .nfaq_list li .answer .qa {background:rgba(0, 0, 0, 0.15);}
.nfaq_wrap .nfaq_list li .tit.on .txt {color:#ffdd00; font-weight:bold; background:rgba(0, 0, 0, 0.3);}
.nfaq_wrap .nfaq_list li .tit.on .qa {background:rgba(0, 0, 0, 0.15);}

/* profile_v2 start */
.pb_sub > .profile_wrap {padding-bottom: 0;}
.profile_wrap {color: #fff; font-family: 'Roboto', sans-serif; text-align: center; background: #000;}
.profile_wrap h3, .profile_wrap h4, .profile_wrap h5 {font-weight: 700; font-family: 'Chakra Petch';}
.profile_wrap h3 {height: 18px; font-size: 2.4rem; line-height: 17px; letter-spacing: 0.12rem;}
.profile_wrap h4 {font-size: 1.4rem; letter-spacing: 0.08rem;}
.profile_wrap h5 {font-size: 1.4rem; letter-spacing: 0.02rem;}
.profile_wrap .inner {max-width: 1512px; padding: 120px 36px; position: relative; z-index: 1;}
.profile_wrap .info_user {position:relative; background-color: #1c1410; background-image: url(../../images/common/profile/user_bg.jpg); background-repeat: no-repeat; background-position: 50% 0; background-size: cover;}
.profile_wrap .info_user:before {content: ''; display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); position: absolute; bottom: 0; left: 0; z-index: 1;}
.profile_wrap .info_user .inner {padding-top: 7.7rem;}

.btn_read {display:block; margin:0 auto; box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(0, 0, 0, 0.7); letter-spacing:0.02rem; color:#ff2c2c; height:60px; border:1px solid #ff0000; position:relative; line-height:60px; text-align:center; border-radius:5px;  width:300px; font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_read:before, .btn_read:after {content:''; display:block; width:4px; height:10px; position:absolute; background:#e4140c;}
.btn_read:before {top:0; right:10px; }
.btn_read:after {bottom:0; left :10px; }
.btn_read:hover {background:rgba(73, 9, 9, 0.7); color:#fff;}

.profile_wrap .info_user .nick {height: 6rem; margin-bottom: 13px; padding: 0 2.4rem; font-size: 50px; letter-spacing: 0.04rem; font-weight: 700; font-family: 'Chakra Petch'; display: inline-block; position: relative; text-shadow: 2px 2px 2px #000;}
.profile_wrap .info_user .nick:before {content: ''; width: 2px; height: 36px; background: #fff; display: block; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); animation: cursor 0.3s infinite;}
.profile_wrap .info_user .exp {font-size: 0; letter-spacing: -4px;}
.profile_wrap .info_user .exp > p {min-width: 252px; height: 48px; padding: 0 36px; font-size: 3.6rem; line-height: 50px; letter-spacing: 0; background: rgba(85, 68, 62, 1); display: inline-block; vertical-align: top;}
.profile_wrap .info_user .exp > p:first-child {min-width: 108px; padding: 0 2.4rem; font-size: 1.4rem; color: #ca8; line-height: 50px; letter-spacing: 0.08rem; font-weight: 700; font-family: 'Chakra Petch'; background: rgba(85, 68, 62, 0.5);}
.profile_wrap .info_user .playtime {min-width: 360px; margin: 42px auto 0; display: table;}
.profile_wrap .info_user .playtime li {width: 50%; height: 60px; padding: 2px 36px 0; font-size: 2.8rem; border-right: 1px solid #ca8; display: table-cell; vertical-align: middle;}
.profile_wrap .info_user .playtime li:last-child {border-right: none;}
.profile_wrap .info_user .playtime li h5 {font-size: 1.4rem; color: #ca8; letter-spacing: 0.12rem; font-weight: 700;}
.profile_wrap .info_user .playtime li p {font-weight: 700; letter-spacing: -0.02rem;}
.profile_wrap .info_user .rank {width: calc(100% - 72px); font-size: 1.7rem; font-weight: 300; text-align: left; position: absolute; bottom: 0; left: 36px;}
.profile_wrap .info_user .rank .level {margin-bottom: 20px;}
.profile_wrap .info_user .rank .level img {margin-right: 12px;}
.profile_wrap .info_user .rank .nextlevel {position: absolute; top: 0; right: 0;}
.profile_wrap .info_user .rank .nextlevel font {color: #ca8;}
.profile_wrap .info_user .rank .progress {z-index:2; height: 24px; background: url(../../images/common/profile/ptn_line1.png) repeat; position: relative;}
.profile_wrap .info_user .rank .progress:before {content: ''; width: calc(100% - 2px); height: 36px; border: 1px solid #ca8; border-top: none; border-bottom: none; display: block; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);}
.profile_wrap .info_user .rank .progress .bar {width: 0%; height: 24px; font-size: 0; background: #ca8; float: left; animation: progress_fill 2s;}
.profile_wrap .info_user .attend {padding: 16px 38px 16px 78px; font-size: 1.4rem; color: #fff; line-height: 18px; letter-spacing: 0.08rem; font-weight: 700; font-family: 'Chakra Petch'; text-align: left; border: 2px solid #1a0; border-radius: 12px; background: rgba(17, 85, 0, 0.6); position: absolute; top: calc(50% - 12px); right: 36px; transform: translate(0, -50%);}
.profile_wrap .info_user .attend font {color: #2e0; display: block;}
.profile_wrap .info_user .attend img {margin-top: -15px; position: absolute; top: 50%; left: 30px;}
.profile_wrap .info_user .attend:before, .profile_wrap .info_user .attend:after {content: ''; width: 4px; height: 10px; background: #1a0; display: block; position: absolute;}
.profile_wrap .info_user .attend:before {top: 0; right: 10px;}
.profile_wrap .info_user .attend:after {bottom: 0; left: 10px;}
.profile_wrap .info_user .attend:hover {border-color: #9f2; background: #030 url(../../images/common/profile/btn_attend_bg.jpg) no-repeat 0 50%;}
.profile_wrap .info_user .attend:hover font {color: #9f2;}

.profile_wrap .info_user1 {background-color: #221; background-image: url(../../images/common/profile/user_bg1.jpg);}
.profile_wrap .info_user1 .exp > p {background: rgba(119, 119, 68, 1);}
.profile_wrap .info_user1 .exp > p:first-child {color: #d3d388; background: rgba(119, 119, 68, 0.4);}
.profile_wrap .info_user1 .playtime li {border-color: #dd9;}
.profile_wrap .info_user1 .playtime li h5 {color: #dd9;}
.profile_wrap .info_user1 .rank .nextlevel font {color: #dd9;}
.profile_wrap .info_user1 .rank .progress:before {border-color: #d3d388;}
.profile_wrap .info_user1 .rank .progress .bar {background: #774;}
.profile_wrap .info_user2 {background-color: #231; background-image: url(../../images/common/profile/user_bg2.jpg);}
.profile_wrap .info_user2 .inner::before {background-image: url(../../images/common/profile/user_rank2.png);}
.profile_wrap .info_user2 .exp > p {background: rgba(102, 119, 34, 1);}
.profile_wrap .info_user2 .exp > p:first-child {color: #bc8; background: rgba(102, 119, 34, 0.4);}
.profile_wrap .info_user2 .playtime li {border-color: #ce8;}
.profile_wrap .info_user2 .playtime li h5 {color: #ce8;}
.profile_wrap .info_user2 .rank .nextlevel font {color: #ce8;}
.profile_wrap .info_user2 .rank .progress:before {border-color: #bc8;}
.profile_wrap .info_user2 .rank .progress .bar {background: #672;}
.profile_wrap .info_user3 {background-color: #1a0d00; background-image: url(../../images/common/profile/user_bg3.jpg);}
.profile_wrap .info_user3 .inner::before {background-image: url(../../images/common/profile/user_rank3.png);}
.profile_wrap .info_user3 .exp > p {background: rgba(119, 85, 51, 1);}
.profile_wrap .info_user3 .exp > p:first-child {color: #ca8; background: rgba(119, 85, 51, 0.4);}
.profile_wrap .info_user3 .playtime li {border-color: #db9;}
.profile_wrap .info_user3 .playtime li h5 {color: #db9;}
.profile_wrap .info_user3 .rank .nextlevel font {color: #db9;}
.profile_wrap .info_user3 .rank .progress:before {border-color: #ca8;}
.profile_wrap .info_user3 .rank .progress .bar {background: #753;}
.profile_wrap .info_user4 {background-color: #1d1d1e; background-image: url(../../images/common/profile/user_bg4.jpg);}
.profile_wrap .info_user4 .inner::before {background-image: url(../../images/common/profile/user_rank4.png);}
.profile_wrap .info_user4 .exp > p {background: rgba(85, 102, 136, 1);}
.profile_wrap .info_user4 .exp > p:first-child {color: #abe; background: rgba(85, 102, 136, 0.4);}
.profile_wrap .info_user4 .playtime li {border-color: #abe;}
.profile_wrap .info_user4 .playtime li h5 {color: #abe;}
.profile_wrap .info_user4 .rank .nextlevel font {color: #abe;}
.profile_wrap .info_user4 .rank .progress:before {border-color: #abe;}
.profile_wrap .info_user4 .rank .progress .bar {background: #568;}
.profile_wrap .info_user5 {background-color: #600; background-image: url(../../images/common/profile/user_bg5.jpg);}
.profile_wrap .info_user5 .inner::before {background-image: url(../../images/common/profile/user_rank5.png);}
.profile_wrap .info_user5 .exp > p {background: rgba(153, 0, 0, 1);}
.profile_wrap .info_user5 .exp > p:first-child {color: #fd9; background: rgba(0, 0, 0, 0.6);}
.profile_wrap .info_user5 .playtime li {border-color: #fe7;}
.profile_wrap .info_user5 .playtime li h5 {color: #fe7;}
.profile_wrap .info_user5 .rank .nextlevel font {color: #fe7;}
.profile_wrap .info_user5 .rank .progress:before {border-color: #fe7;}
.profile_wrap .info_user5 .rank .progress .bar {background: #fd6;}
.profile_wrap .info_user6 {background-color: #101e42; background-image: url(../../images/common/profile/user_bg6.jpg);}
.profile_wrap .info_user6 .inner::before {background-image: url(../../images/common/profile/user_rank6.png);}
.profile_wrap .info_user6 .exp > p {background: linear-gradient(to right, #4bf, #a4f);}
.profile_wrap .info_user6 .exp > p:first-child {color: #9df; background: rgba(68, 187, 255, 0.3);}
.profile_wrap .info_user6 .playtime li {border-color: #9df;}
.profile_wrap .info_user6 .playtime li h5 {color: #9df;}
.profile_wrap .info_user6 .rank .nextlevel font {color: #9df;}
.profile_wrap .info_user6 .rank .progress:before {border-color: #3bf;}
.profile_wrap .info_user6 .rank .progress .bar {background: linear-gradient(to right, #4bf, #a4f);}

.profile_wrap .info_user7 { background-image:url('../../images/common/profile/user_bg7_01.jpg'); background-position:center center; background-size:cover;}
.profile_wrap .info_user7 .exp > p { background: linear-gradient(to right, #ffbb22 , #dd7711);}
.profile_wrap .info_user7 .exp > p:first-child {color: #ffeebb; background: rgba(255, 255, 187, 0.3);}
.profile_wrap .info_user7 .playtime li {border-color: #ffeebb;}
.profile_wrap .info_user7 .playtime li h5 {color: #ffeebb;}
.profile_wrap .info_user7 .rank .nextlevel font {color: #ffeebb;}
.profile_wrap .info_user7 .rank .progress:before {border-color: #ffeebb;}
.profile_wrap .info_user7 .rank .progress .bar {background: linear-gradient(to right, #ffbb22 , #dd7711); }
.profile_wrap .info_user7 .my_level {background:none !important; box-shadow:none !important;}
.profile_wrap .info_user7 .my_level:after {display:none;}

.profile_wrap .info_user7 .bg_area {overflow:hidden; position:absolute;  width: 100%; height: 100%; }
.profile_wrap .info_user7 .list li:first-child {position:relative;}
.profile_wrap .info_user7 .list li {position: absolute; top: 0;  width: 100%; height: 100%; animation: fade 2s linear infinite; opacity: 0; }
.profile_wrap .info_user7 .list li .img { transition: all .3s;  position: absolute; left:50%;  transform:translate(-50% , 0); overflow: hidden;} 
.profile_wrap .info_user7 .list li:nth-child(2) {animation-delay: 0.5s;}
.profile_wrap .info_user7 .list li:nth-child(3) {animation-delay: 1s;}
.profile_wrap .info_user7 .list li:nth-child(4) {animation-delay: 1.5s;}
.profile_wrap .info_user7 .list li .img img {max-width:none;}
.profile_wrap .info_user7 .inner {z-index:2;}

.profile_wrap .info_etc {background:#202020;}
.profile_wrap .info_etc .exp > p {background:#666666; color:#fff;}
.profile_wrap .info_etc .exp > p:first-child {background:#353535; color:#999999;}
.profile_wrap .info_etc .playtime li h5 {color:#999;}
.profile_wrap .info_etc .playtime li {border-color:#666666;}
.profile_wrap .info_etc .rank .progress .bar {background: linear-gradient(to right, #444, #666);}
.profile_wrap .info_etc .rank .progress:before {border-color:#666666;}
.profile_wrap .info_etc .rank .nextlevel font {color:#999;}
 
 @keyframes progress_fill {from {width: 0%;}}

.profile_wrap .info_ratio {background: #000 url(../../images/common/profile/ratio_bg.jpg) no-repeat 50% 0;}
.profile_wrap .info_ratio .battle h3 {margin-bottom: 5px;}
.profile_wrap .info_ratio .battle h3, .profile_wrap .info_ratio .battle h4 {color: #5ff;}
.profile_wrap .info_ratio .battle .title p {margin-bottom: 71px; font-size: 4.2rem; letter-spacing: -0.02rem; font-weight: 900;}
.profile_wrap .info_ratio .battle .match {display: flex; flex: 1; justify-content: space-between;}
.profile_wrap .info_ratio .battle .match > div {width: calc((100% - 96px) / 2); border: 1px solid rgba(68, 221, 221, 0.3); border-bottom-color: rgba(68, 221, 221); background-color: rgba(17, 68, 68, 0.5); position: relative;}
.profile_wrap .info_ratio .battle .match > div::before {content: ''; width: calc(100% + 12px); height: calc(100% + 12px); background: url(../../images/common/profile/bg_plus02.png) no-repeat left top, url(../../images/common/profile/bg_plus02.png) no-repeat right top, url(../../images/common/profile/bg_plus02.png) no-repeat left bottom, url(../../images/common/profile/bg_plus02.png) no-repeat right bottom; display: block; position: absolute; left: -6px; top: -6px;}
.profile_wrap .info_ratio .battle .match .stat {padding: 36px 60px 34px;}
.profile_wrap .info_ratio .battle .match .stat ul {width: 100%; max-width: 480px; margin: 0 auto;} 
.profile_wrap .info_ratio .battle .match .stat li {width: 100%; text-align: left; display: table;}
.profile_wrap .info_ratio .battle .match .stat li h4, .profile_wrap .info_ratio .battle .match .stat li p {height: 60px; display: table-cell; vertical-align: middle;}
.profile_wrap .info_ratio .battle .match .stat li h4 {width: 54px;}
.profile_wrap .info_ratio .battle .match .stat li p {width: calc(100% - 54px); font-size: 2.2rem; letter-spacing: 0.01rem; font-weight: 300; text-align: right; position: relative;}
.profile_wrap .info_ratio .battle .match .stat li p::before {content: ''; width: 100%; height: 1px; margin-top: -1px; background: #5ff; display: block; position: absolute; left: 0; top: 50%; z-index: 1;}
.profile_wrap .info_ratio .battle .match .stat li p font {padding-left: 24px; background: #0a2829; position: relative; z-index: 2;}
.profile_wrap .info_ratio .battle .match .ratio h4 {font-size: 1.7rem; line-height: 1.8rem; letter-spacing: 0.14rem; text-align: left; position: absolute; left: 36px; bottom: 32px;}
.profile_wrap .info_ratio .battle .match .ratio .graph {width: 100%; padding: 0 30px 0 120px; position: absolute; left: 0; bottom: 0;}
.profile_wrap .info_ratio .battle .match .ratio .graph li {width: calc((100% - 18%) / 3); margin: 0 3%; display: inline-block; position: relative;}
.profile_wrap .info_ratio .battle .match .ratio .graph li h5 {width: 100%; color: #999; position: absolute; left: 50%; top: 180px; transform: translate(-50%, 0);}
.profile_wrap .info_ratio .battle .match .ratio .graph li .progress {height: 162px; position: relative;}
.profile_wrap .info_ratio .battle .match .ratio .graph li .progress .bar {width: 100%; height: 0%; font-size: 0; background: url(../../images/common/profile/ptn_line_h2.png) repeat; position: absolute; left: 0; bottom: 0;}
.profile_wrap .info_ratio .battle .match .ratio .graph li .progress .bar.active {animation: progress_fill2 2s;}
.profile_wrap .info_ratio .battle .match .ratio .graph li .progress .bar span {font-size: 2.6rem; color: #acc; letter-spacing: -0.02rem; font-weight: 600; position: absolute; left: 50%; top: -36px; transform: translate(-50%, 0);}
.profile_wrap .info_ratio .battle .match .ratio .graph li.me h5 {color: #fff;}
.profile_wrap .info_ratio .battle .match .ratio .graph li.me .progress .bar {background: #5ff;}
.profile_wrap .info_ratio .battle .match .ratio .graph li.me .progress .bar span {color: #5ff;}

@keyframes progress_fill2 {from {height: 0;}}

.profile_wrap .info_ratio .battle .skill {margin-top: 120px;}
.profile_wrap .info_ratio .battle .skill h4 {margin: -3px 0 4px; color: #e00;}
.profile_wrap .info_ratio .battle .skill .stat ul {width: 100%; max-width: 960px; margin: 0 auto;}
.profile_wrap .info_ratio .battle .skill .stat li {width: 25%; padding: 166px 24px 0; background-repeat: no-repeat; background-position: 50% 0; display: inline-block;}
.profile_wrap .info_ratio .battle .skill .stat li p {font-size: 2rem;}
.profile_wrap .info_ratio .battle .skill .stat li.active {opacity: 1; transform: scale(1); animation: appear 0.15s;}
.profile_wrap .info_ratio .battle .skill .stat .kill {background-image: url(../../images/common/profile/icon_kill.png);}
.profile_wrap .info_ratio .battle .skill .stat .death {background-image: url(../../images/common/profile/icon_death.png);}
.profile_wrap .info_ratio .battle .skill .stat .assist {background-image: url(../../images/common/profile/icon_assist.png);}
.profile_wrap .info_ratio .battle .skill .stat .headshot {background-image: url(../../images/common/profile/icon_headshot.png);}
.profile_wrap .info_ratio .battle .skill .stat .kill.active {animation-delay: 0.1s;}
.profile_wrap .info_ratio .battle .skill .stat .death.active {animation-delay: 0.5s;}
.profile_wrap .info_ratio .battle .skill .stat .assist.active {animation-delay: 0.3s;}
.profile_wrap .info_ratio .battle .skill .stat .headshot.active {animation-delay: 0.7s;}
.profile_wrap .info_ratio .battle .skill .ratio {width: 100%; margin-top: 43px; padding: 0 144px; font-size: 0; letter-spacing: -4px;}
.profile_wrap .info_ratio .battle .skill .ratio > div {width: calc((100% - 144px) / 2); display: inline-block; vertical-align: top; position: relative;}
.profile_wrap .info_ratio .battle .skill .ratio > div > h4 {font-size: 1.4rem; position: absolute; bottom: 18px;}
.profile_wrap .info_ratio .battle .skill .ratio > div > ul {padding: 15px 0 51px;}
.profile_wrap .info_ratio .battle .skill .ratio > div > ul > li {width: 100%; height: 54px; display: table; position: relative;}
.profile_wrap .info_ratio .battle .skill .ratio > div > ul > li > h5, .profile_wrap .info_ratio .battle .skill .ratio > div > ul > li > div {height: 36px; color: #999; display: table-cell; vertical-align: middle;}
.profile_wrap .info_ratio .battle .skill .ratio .txt {width: 144px; padding: 0 18px;}
.profile_wrap .info_ratio .battle .skill .ratio .txt .me > h5 {color: #fff}
.profile_wrap .info_ratio .battle .skill .ratio .graph {width: 100%; border-right: 1px solid #e00; position: relative;}
.profile_wrap .info_ratio .battle .skill .ratio .graph .progress {position: relative;}
.profile_wrap .info_ratio .battle .skill .ratio .graph .progress .bar {width: 0%; height: 36px; font-size: 0; background: url(../../images/common/profile/ptn_line3.png) repeat; position: relative;}
.profile_wrap .info_ratio .battle .skill .ratio .graph .progress .bar.active {animation: progress_fill 2s;}
.profile_wrap .info_ratio .battle .skill .ratio .graph .progress .bar span {font-size: 2.8rem; line-height: 36px; letter-spacing: -0.02rem; font-weight: 600; position: absolute; right: -92px; top: 0;}
.profile_wrap .info_ratio .battle .skill .ratio .graph .me .progress span {color: #f00;}
.profile_wrap .info_ratio .battle .skill .ratio .graph .me .progress .bar {background: #e00; left: -1px;}
.profile_wrap .info_ratio .battle .skill .ratio .kda > h4 {text-align: right; right: 24px;}
.profile_wrap .info_ratio .battle .skill .ratio .kda .graph .progress, .profile_wrap .info_ratio .battle .skill .ratio .kda .graph .progress .bar span {transform: rotatey(180deg);}
.profile_wrap .info_ratio .battle .skill .ratio .headshot > h4 {text-align: left;}
.profile_wrap .info_ratio .battle .skill .headshot h4 {color: #f60; left: 24px;}
.profile_wrap .info_ratio .battle .skill .headshot .graph {border-right: none; border-left: 1px solid #f60;}
.profile_wrap .info_ratio .battle .skill .headshot .graph .me .progress .bar {background: #f60;}
.profile_wrap .info_ratio .battle .skill .headshot .graph .me .progress .bar span {color: #f60;}

@keyframes appear {0% {opacity: 0; transform: scale(0);} 30% {opacity: 0.5; transform: scale(1.5);} 100% {opacity: 1; transform: scale(1);}}

.profile_wrap .info_ratio .weapon {background: url(../../images/common/profile/ptn_gird.png) repeat 50% 0, url(../../images/common/profile/wp_bg_top.jpg) no-repeat 50% 0, url(../../images/common/profile/wp_bg.jpg) repeat 50% 0; background-color: #464646; box-shadow: 0 24px 36px rgba(0, 0, 0, 0.3); position: relative;}
.profile_wrap .info_ratio .weapon::before {content: ''; width: 100%; height: calc(100% - 4px); border-top: 2px solid rgba(255, 255, 255, 0.2); border-bottom: 2px solid rgba(255, 255, 255, 0.2); display: block; position: absolute; left: 0; top: 0; z-index: 1;}
.profile_wrap .info_ratio .weapon .inner > div {width: 100%; display: table;}
.profile_wrap .info_ratio .weapon .inner > div h3, .profile_wrap .info_ratio .weapon .inner > div ul {display: table-cell; vertical-align: middle;}
.profile_wrap .info_ratio .weapon .title {width: 180px; height: auto; padding: 0 48px; font-size: 1.7rem; color: #fff; line-height: 2.2rem; background: rgba(0, 0, 0, 0.15) url(../../images/common/profile/wp_gp_line_bk.png) repeat 50% top;}
.profile_wrap .info_ratio .weapon .title img {width: 74px; margin-bottom: 4px;}
.profile_wrap .info_ratio .weapon .title font {color: #f99;}
.profile_wrap .info_ratio .weapon .list {width: calc(100% - 180px);}
.profile_wrap .info_ratio .weapon .list li {width: calc(100% / 5); padding: 39px 48px 32px; background: #252525 url(../../images/common/profile/ptn_grunge.png) repeat 50% top; display: inline-block; position: relative;}
.profile_wrap .info_ratio .weapon .list li:nth-child(even) {background: #333;}
.profile_wrap .info_ratio .weapon .list li h4 {font-size: 1.7rem;}
.profile_wrap .info_ratio .weapon .list .graph {margin: 25px auto 29px; padding: 24px; background: rgba(255, 153, 153, 0.05) url(../../images/common/profile/wp_gp_line_rd.png) repeat 0; position: relative;}
.profile_wrap .info_ratio .weapon .list .graph::before {content: ''; width: 100%; height: 100%; display: block; background: url(../../images/common/profile/wp_gp_cl_rd_lt.png) no-repeat left top, url(../../images/common/profile/wp_gp_cl_rd_rt.png) no-repeat right top, url(../../images/common/profile/wp_gp_cl_rd_rb.png) no-repeat right bottom, url(../../images/common/profile/wp_gp_cl_rd_lb.png) no-repeat left bottom; position: absolute; left: 0; top: 0;}
.profile_wrap .info_ratio .weapon .list .graph .progress {width: 100%; height: 0; padding-top: 100%; background-size: 100% auto; background-position: 50% top; position: relative;}
.profile_wrap .info_ratio .weapon .list .graph .progress .bar {width: 100%; height: 0%; font-size: 0; background-size: 100% auto; background-position: 50% bottom; position: absolute; left: 0; bottom: 0;}
.profile_wrap .info_ratio .weapon .list .graph .progress .bar.active {animation: progress_fill2 2s;}
.profile_wrap .info_ratio .weapon .list .ratio {padding-left: 1.6rem; font-size: 3.4rem; color: #f99; line-height: 2.4rem; font-weight: 700;}
.profile_wrap .info_ratio .weapon .list .value {margin-top: 6px; font-size: 1.6rem; color: #ccc;}
.profile_wrap .info_ratio .weapon .list li.assault .graph .progress {background-image: url(../../images/common/profile/wp_gp_assault_rd.png);}
.profile_wrap .info_ratio .weapon .list li.assault .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_assault_rd.png);}
.profile_wrap .info_ratio .weapon .list li.smg .graph .progress {background-image: url(../../images/common/profile/wp_gp_smg_rd.png);}
.profile_wrap .info_ratio .weapon .list li.smg .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_smg_rd.png);}
.profile_wrap .info_ratio .weapon .list li.sniper .graph .progress {background-image: url(../../images/common/profile/wp_gp_sniper_rd.png);}
.profile_wrap .info_ratio .weapon .list li.sniper .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_sniper_rd.png);}
.profile_wrap .info_ratio .weapon .list li.mg .graph .progress {background-image: url(../../images/common/profile/wp_gp_mg_rd.png);}
.profile_wrap .info_ratio .weapon .list li.mg .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_mg_rd.png);}
.profile_wrap .info_ratio .weapon .list li.shotgun .graph .progress {background-image: url(../../images/common/profile/wp_gp_shotgun_rd.png);}
.profile_wrap .info_ratio .weapon .list li.shotgun .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_shotgun_rd.png);}
.profile_wrap .info_ratio .weapon .death {margin-top: 6rem;}
.profile_wrap .info_ratio .weapon .death .title font {color: #9cf;}
.profile_wrap .info_ratio .weapon .death .list .graph {background: rgba(119, 170, 221, 0.05) url(../../images/common/profile/wp_gp_line_bl.png) repeat 0;}
.profile_wrap .info_ratio .weapon .death .list .graph::before {background: url(../../images/common/profile/wp_gp_cl_bl_lt.png) no-repeat left top, url(../../images/common/profile/wp_gp_cl_bl_rt.png) no-repeat right top, url(../../images/common/profile/wp_gp_cl_bl_rb.png) no-repeat right bottom, url(../../images/common/profile/wp_gp_cl_bl_lb.png) no-repeat left bottom;}
.profile_wrap .info_ratio .weapon .death .list .ratio {color: #7ad;}
.profile_wrap .info_ratio .weapon .death .list li.assault .graph .progress {background-image: url(../../images/common/profile/wp_gp_assault_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.assault .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_assault_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.smg .graph .progress {background-image: url(../../images/common/profile/wp_gp_smg_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.smg .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_smg_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.sniper .graph .progress {background-image: url(../../images/common/profile/wp_gp_sniper_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.sniper .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_sniper_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.mg .graph .progress {background-image: url(../../images/common/profile/wp_gp_mg_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.mg .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_mg_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.shotgun .graph .progress {background-image: url(../../images/common/profile/wp_gp_shotgun_bl.png);}
.profile_wrap .info_ratio .weapon .death .list li.shotgun .graph .progress .bar {background-image: url(../../images/common/profile/wp_gp_shotgun_bl.png);}

.profile_wrap .members {background: url(../../images/common/profile/friends_bg.jpg) no-repeat 50% 0;}
.profile_wrap .members .inner {display: flex; flex: 1; justify-content: space-between;}
.profile_wrap .members .inner > div {width: calc((100% - 96px) / 2);}
.profile_wrap .members .inner > div.active {animation: appear2 2s;}
.profile_wrap .members .inner > div.clan.active {animation-delay: 0.3s;}
.profile_wrap .members .title {height: 108px; margin-bottom: 46px; background: url(../../images/common/profile/icon_cm_friends.png) no-repeat 50% 0; position: relative;}
.profile_wrap .members .title .tit {width: calc((100% - 192px) / 2); padding-top: 4px; text-align: right; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);}
.profile_wrap .members .title .tit h3 {color: #bcf; line-height: 22px;}
.profile_wrap .members .title .tit p {margin-top: 8px; font-size:20px; word-break: break-all; text-align:right;}
.profile_wrap .members .title .tit p.clanname a {color:#fff;}
.profile_wrap .members .title .tit p.clanname a font {margin-bottom:3px; display:block;}
.profile_wrap .members .title .tit p.clanname a span {transition: all ease-in-out 0.2s; position:relative; font-weight:500; letter-spacing: 0.02rem; display:inline-block; color:#7777ff; font-size:14px; text-transform:uppercase;  height:20px; line-height:20px; padding:0 1.2rem 0 0.6rem; border-top: 1px solid transparent; border-bottom: 1px solid transparent;  border-image: linear-gradient(to right, #7776ff , #ac2ef1); border-image-slice: 1;}
.profile_wrap .members .title .tit p.clanname a span:before {content:''; display:block; position:absolute; right:0; top:50%; transform:translate(0 , -50%); width:6px; height:8px; background-position:0 0; background-repeat:no-repeat; background-image:url('../../images/common/profile/arr_clan.png');}
.profile_wrap .members .title .tit p.clanname a:hover span:before {background-position:0 -8px;}
.profile_wrap .members .title .tit p.clanname a:hover {color:#11dddd;}
.profile_wrap .members .title .tit p.clanname a:hover span {color:#33bbee; border-top: 1px solid transparent; border-bottom: 1px solid transparent;  border-image: linear-gradient(to right, #12d6df , #6f85ec , #f015fe); border-image-slice: 1;}

.profile_wrap .members .list {height: calc(100% - 154px); max-height: 480px; min-height: 48px; border-top: 2px solid #56d; overflow-y: auto;}
.profile_wrap .members .list::-webkit-scrollbar {width: 18px; background: transparent;}
.profile_wrap .members .list::-webkit-scrollbar-thumb {width: 18px; background: linear-gradient(to bottom, #56d, #d0f); border-radius: 6rem; background-clip: padding-box; border: 6px solid transparent;}
.profile_wrap .members .list::-webkit-scrollbar-track {width: 18px; border-radius: 6rem; background-color: transparent;}
.profile_wrap .members .list li {padding: 0 24px; text-align: left; background: linear-gradient(to right, #212143, rgba(33, 33, 67, 0.5));}
.profile_wrap .members .list li:nth-child(even) {background: linear-gradient(to right, #337, #223);}
.profile_wrap .members .list li a {height: 48px; padding-right: 30px; font-size: 1.4rem; color: #fff; line-height: 49px; position: relative; overflow-y: hidden;}
.profile_wrap .members .list li a img {margin-right: 12px; vertical-align: middle; width:20px; height:20px;}
.profile_wrap .members .list li a::before {content: ''; width: 18px; height: 15px; margin-top: -7px; display: block; background: url(../../images/common/profile/btn_cm_more.png) no-repeat 50% 0; position: absolute; right: 0; top: 50%;}
.profile_wrap .members .list li a:hover {color: #bcf; text-decoration: underline;}
.profile_wrap .members .list li a:hover::before {background-position: 50% -15px;}
.profile_wrap .members .list .txt {height: 100%; font-size: 1.4rem; color: #89c; line-height: 100%; background: rgba(33, 33, 67, 0.5); position: relative;}
.profile_wrap .members .list .txt > span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.profile_wrap .members .clan .title {background: url(../../images/common/profile/icon_cm_clan.png) no-repeat 50% 0;}
.profile_wrap .members .clan .title .tit {width: calc((100% - 138px) / 2);}

@keyframes appear2 {0% {opacity: 0; transform: scale(1);} 30% {opacity: 0.5; transform: scale(1.05);} 100% {opacity: 1; transform: scale(1);}}

.profile_wrap .profile_none {background: url(../../images/common/profile/none_bg.jpg) no-repeat 50% 0;}
.profile_wrap .profile_none .cont {padding: 30rem 2.4rem 27.2rem;}

.profile_wrap .profile_none .cont .nick {padding: 0 2.4rem; font-size: 50px; line-height: 50px; letter-spacing: 0.04rem; font-weight: 700; font-family: 'Chakra Petch'; display: inline-block; position: relative; text-shadow: 2px 2px 2px #000;}
.profile_wrap .profile_none .cont .nick:before {content: ''; width: 2px; height: 36px; background: #fff; display: block; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); animation: cursor 0.3s infinite;}
.profile_wrap .profile_none .cont .txt {margin-top: 0.5rem; font-size: 2.4rem; color: #ccc; line-height: 2.6rem; font-weight: 300;}
.profile_wrap .profile_none .cont .btn_prev {margin: 4.6rem auto 0; font-size: 1.6rem; color: #ca8; font-weight: 500; font-family: 'Oswald'; display: table;}
.profile_wrap .profile_none .cont .btn_prev font {color: #fff;}
.profile_wrap .profile_none .cont .btn_prev span {height: 6rem; padding: 0 3.6rem; letter-spacing: 0.02rem; border: 1px solid #ca8; background: rgba(85, 68, 62, 0.5) url(../../images/common/profile/ptn_diagonal.html) repeat 50%; display: table-cell; vertical-align: middle;}
.profile_wrap .profile_none .cont .btn_prev span:first-child {width: 6rem; padding: 0; font-size: 0; text-indent: -99999px; border-right: none; background: rgba(204, 170, 136, 0.2) url(../../images/common/profile/btn_arrow.png) no-repeat 50%;}
.profile_wrap .profile_none .cont .btn_prev:hover span {background-color: #000;}
.profile_wrap .profile_none .cont .btn_prev:hover span:first-child {background-color: #210;}

.profile_wrap .info_user .my_level {overflow:hidden; position: absolute; top: calc(50% - 12px); transform: translate(0, -50%); width: 96px; height: 96px; border-radius: 18px; background-color: #666;  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.5); display: block; left: 36px;}
.profile_wrap .info_user .my_level img {max-width:100%;}
.profile_wrap .info_user .my_level:after { animation: sheen 3s 1s forwards infinite;content: ''; position: absolute; top: 0; right: -15px; bottom: 0;left: -15px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2) 50%, transparent); transform: rotateZ(60deg) translate(-1em, 5em);}
.profile_wrap .info_user .info_img {position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;}

.profile_wrap .info_user1 .bullet {position:absolute; opacity:0;  animation:pulse 0.2s forwards;}
.profile_wrap .info_user1 .bullet01 {top:80px; right:29.6%; animation-delay:0.3s;}
.profile_wrap .info_user1 .bullet02 {top:114px; right:27%; animation-delay:0.4s;}
.profile_wrap .info_user1 .bullet03 {top:250px; right:35%; animation-delay:0.5s;}

.profile_wrap .info_user2 .dot {opacity:0; animation: opacity2 6s ease infinite; animation-fill-mode: forwards; top:0; bottom:0; left:0; position:absolute; max-width: none; height:100%;}
.profile_wrap .info_user2 .dot01 {/* animation-delay: 0.2s */}
.profile_wrap .info_user2 .dot02 {animation-delay: 0.4s;}
.profile_wrap .info_user2 .dot03 {animation-delay: 0.2s;}

.profile_wrap .info_user3 .eff {top: 0; left:0; bottom:0; position: absolute; max-width:none; height:100%; opacity:0;}  
.profile_wrap .info_user3 .eff01 {animation: fadeInLeft 0.5s forwards; animation-delay: 0.1s}
.profile_wrap .info_user3 .eff02 {animation: fadeInRight 0.5s forwards; animation-delay: 0.8s}
.profile_wrap .info_user3 .eff03 {animation: fadeInDown 0.5s forwards; animation-delay: 0.3s}
.profile_wrap .info_user3 .eff04 {animation: fadeInUp 0.5s forwards; animation-delay: 0.7s}
.profile_wrap .info_user3 .eff05 {animation: fadeInUp 0.5s forwards; animation-delay: 0.6s}
.profile_wrap .info_user3 .eff06 {animation: fadeInRight 0.5s forwards; animation-delay: 0.5s}
.profile_wrap .info_user3 .eff07 {animation: fadeInRight 0.5s forwards; animation-delay: 0.4s}
.profile_wrap .info_user3 .eff08 {animation: fadeInRight 0.5s forwards; animation-delay: 0.3s}

.profile_wrap .info_user4 .line {top: 0; left:0; bottom:0; position: absolute; max-width:none; height:100%; opacity:0;}
.profile_wrap .info_user4 .line01 {animation: diaUp 0.5s forwards; animation-delay: 0.1s}
.profile_wrap .info_user4 .line02 {animation: diaUp 0.5s forwards; animation-delay: 0.8s}
.profile_wrap .info_user4 .line03 {animation: diaDown 0.5s forwards; animation-delay: 0.3s}
.profile_wrap .info_user4 .line04 {animation: diaUp 0.5s forwards; animation-delay: 0.7s}
.profile_wrap .info_user4 .line05 {animation: diaDown 0.5s forwards; animation-delay: 0.6s}
.profile_wrap .info_user4 .line06 {animation: diaUp 0.5s forwards; animation-delay: 0.5s}
.profile_wrap .info_user4 .line07 {animation: diaUp 0.5s forwards; animation-delay: 0.4s}
.profile_wrap .info_user4 .line08 {animation: diaDown 0.5s forwards; animation-delay: 0.3s}
.profile_wrap .info_user4 .line09 {animation: diaUp 0.5s forwards; animation-delay: 0.1s}
.profile_wrap .info_user4 .line10 {animation: diaDown 0.5s forwards; animation-delay: 0.8s}
.profile_wrap .info_user4 .line11 {animation: diaDown 0.5s forwards; animation-delay: 0.5s; left: -144px;}
.profile_wrap .info_user4 .line12 {animation: diaDown 0.5s forwards; animation-delay: 0.7s}
.profile_wrap .info_user4 .line13 {animation: diaUp 0.5s forwards; animation-delay: 0.6s}
.profile_wrap .info_user4 .line14 {animation: diaUp 0.5s forwards; animation-delay: 0.5s}

.profile_wrap .info_user5 .flag {min-height: 100%; top: 0; left:0; bottom:0; position: absolute; transform: translateX(-3%) scale(1.1); animation:anim1 3s ease-in-out infinite alternate; transform-origin: center;  max-width:none;}

.profile_wrap .info_user6 .light {position:absolute; top:0; left:50%; transform: translate(-50%, -0); max-width:none; height:100%;}
.profile_wrap .info_user6 .light02 {opacity:0; animation: opacity2 1s forwards;}

.profile_wrap .info_user6 .galaxy { z-index: 1; position: absolute; left: 0;right: 0; top:0; height:372px; margin: 0 auto;}
.profile_wrap .info_user6 .star {position: absolute; background-color: white;}
.profile_wrap .info_user6 .star-type1 { width: 1px; height: 1px;border-radius: 2px; box-shadow: 0 0 1px 1px #979cff; animation: twinkle_one 3s ease-in-out infinite;}
.profile_wrap .info_user6 .star-type2 {width: 2px; height: 2px; border-radius: 2px;  box-shadow: 0 0 2px 1px #a594b7; animation: twinkle_two 12s ease-in-out infinite;}
.profile_wrap .info_user6 .star-type3 { width: 2px;height: 2px; border-radius: 2px;   box-shadow: 0 0 2px 0 #3b5099;animation: twinkle_three 7s ease-in-out infinite;}

/* elua */
.elua_wrap {background:url('../../images/common/sub/bg_pb_etc.jpg') center top no-repeat; background-size: cover;  padding:0 0 12rem; word-break:keep-all; background-attachment: fixed;}
.elua_wrap > h1 {padding:7rem 2.5rem; text-align:center;}
.elua_wrap .nsb_depth2 ul {max-width:1200px; margin:0 auto;}
.elua_wrap .nsb_depth2 {position:relative;}
.elua_wrap .nsb_depth2:before, .elua_wrap .nsb_depth2:after {content:''; display:block; left:0; right:0; background:#87cfff; position:absolute; height:1px;}
.elua_wrap .nsb_depth2:before {top:0;}
.elua_wrap .nsb_depth2:after {bottom:0;}
.elua_wrap .elua_box {background:rgba(0, 0, 0, 0.6); padding:5rem; max-width:1200px; margin:0 auto;     word-break: keep-all;}
.elua_wrap .elua_box .con {margin-bottom:4rem;}
.elua_wrap .elua_box .tit {font-size:16px; color:#ff0000; text-transform:uppercase; font-weight:700;}
.elua_wrap .elua_box .txt {color:#fff; font-size:14px; font-family: 'Roboto', sans-serif; line-height:1.7; margin-top:1rem;}
.elua_wrap .elua_box .num_tit {font-size:14px; color:#87cfff;}
.elua_wrap .elua_box .con:first-child .tit {font-size:20px;} 
.elua_wrap .elua_box .num_con {border:1px solid rgba(135,207,255,0.5); background:#041428; padding:2rem; margin-bottom:4rem;}
.elua_wrap .elua_box .num_con > ul > li {font-size:14px; color:#87cfff; line-height:1.7; padding-left:3.2rem;; position:relative; margin-bottom:1.5rem;}
.elua_wrap .elua_box .num_con > ul > li:last-child {margin-bottom:0;}
.elua_wrap .elua_box .num_con > ul > li > span {text-transform:uppercase; background:rgba(135, 207, 255, 0.8); border:1px solid #87cfff; position:absolute; top:1px; left:0; display:block; width:22px; height:22px; text-align:center; line-height:20px; color:#fff; border-radius:50%;}
.elua_wrap .elua_box .num_con .dash_li li {position:relative; font-size:14px; color:#87cfff; line-height:1.7; padding-left:1rem;}
.elua_wrap .elua_box .num_con .dash_li li:before {content:''; display:block; height:1px; width:6px; background:#87cfff; top:9px; left:0; position:absolute; }
.elua_wrap .elua_box a {color:#fff; text-decoration:underline; word-break: break-all;}
.elua_wrap .elua_box a:hover {color:#ffea00;}
.elua_wrap .elua_box .num_con a {color:#87cfff; text-decoration:underline;}
.elua_wrap .elua_box .num_con a:hover {color:#ffea00;}
.elua_wrap .elua_box .elua_update {font-size:14px; color:#87cfff;}

/* voucher */
/*.resel_wrap .resel_area {background:rgba(0, 0, 0, 0.6); padding:3rem;}*/
.resel_wrap .resel_area  {padding: 3rem; position:relative; background: rgba(0, 0, 0, 0.8);  border: 1px solid rgba(255, 255, 255, 0.2) }
.resel_wrap .resel_area:before, .resel_wrap .resel_area:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.resel_wrap .resel_area:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:-1px; top:-1px;}
.resel_wrap .resel_area:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:-1px; bottom:-1px;}
.resel_area .con {margin-bottom:2.5rem;}
.resel_area .con:last-child {margin-bottom:0;}
.resel_area .con > .tit {font-size:20px; color:#ff0000; text-transform:uppercase; font-weight:700; margin-bottom:5px;}
.resel_area .resel_t table {table-layout:fixed; width:100%;}
.resel_area .resel_t th, .resel_area .resel_t td {word-break: break-all; text-align:center; font-size:14px; font-family: 'Roboto', sans-serif; padding:1.7rem 1rem; border-bottom:1px solid #000; border-right:1px solid #000;}
.resel_area .resel_t th {background:rgba(255, 255, 255, 0.3);  font-weight:700; color:#fff;}
.resel_area .resel_t td {background:#fff; color:#000;}
.resel_area .resel_t td.t01 {font-weight:700; font-family: 'Chakra Petch', sans-serif;}
.resel_area .resel_t td.c01 {border-right:0;}
.resel_area .resel_t td.c02 {border-right:0; background:#f0f0f0;}
.resel_area .resel_t td a:hover {text-decoration:underline;}
.resel_area .epin_list {font-size:0; margin-left:-3rem; padding:1rem;}
.resel_area .epin_list > li {display:inline-block; vertical-align:top; width:20%; padding-left:3rem; margin-bottom:3.5rem;}
.resel_area .epin_list .pin {position:relative; text-align:center; overflow:hidden; width: 200px; }
.resel_area .epin_list .pin .dstc { display: table-cell;  vertical-align: middle; width:200px; height:160px; background:#fff;  }
.resel_area .epin_list .pin .thum {background:#fff; position:relative; text-align:center; width:200px; height:160px; display: flex; align-items: center; }
.resel_area .epin_list .pin .thum:before {z-index:2; content:''; display:block; transition: 0.3s; top:0; bottom:0; left:0; right:0;  content:''; display:block; position:absolute;  width:200px; height:160px;}
.resel_area .epin_list .pin .thum:before {background:url('../../images/common/icon_lt.png') -15px 0 no-repeat, url('../../images/common/icon_rb.png') calc(100% + 15px) bottom no-repeat;} 
.resel_area .epin_list .pin:hover .thum:before {background:url('../../images/common/icon_lt_b.png') 0 0 no-repeat, url('../../images/common/icon_rb_b.png') right bottom no-repeat;}
.resel_area .epin_list .pin .thum img { margin: 0 auto; max-width: 75%; } 
.resel_area .epin_list .pin .txt {font-size:14px; color:#fff; text-transform:uppercase; margin-top:1.7rem;}
.resel_area .epin_list .pin:hover .txt{color:#ffdd00; font-weight:700;}
.resel_area .epin_list .pin:before { z-index: 1; transition: 0.3s; transform: translateX(-100%); content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%;  height: 3px; background: #ffdd00;}
.resel_area .epin_list .pin:after {content: ''; display: block; position: absolute; z-index: 1; background: #ffdd00; width: 3px; height: calc(100% - 3.36rem); transition: 0.3s; transform: translateY(-100%); top: 0; left: 0;}
.resel_area .epin_list .pin .txt:before {content: ''; display: block; position: absolute; z-index: 1; background: #ffdd00; width: 3px; height: calc(100% - 3.36rem); transition: 0.3s; transform: translateY(-123%); right: 0; bottom: 0;}
.resel_area .epin_list .pin .thum:after {z-index: 1;  transition: 0.3s;  transform: translateX(100%);  content: ''; display: block; position: absolute; bottom: 0; right: 0;  width: 100%; height: 3px;  background: #ffdd00;}
.resel_area .epin_list .pin:hover:before {transform: translateX(0);}
.resel_area .epin_list .pin:hover:after {transform: translateY(0);}
.resel_area .epin_list .pin:hover .thum:after {transform: translateX(0);}
.resel_area .epin_list .pin:hover .txt:before {transform: translateY(-23%);}

/* error */
.error_wrap {background:url('../../images/common/sub/bg_pb_etc.jpg') center top no-repeat;  padding:7rem 2.5rem 12rem; word-break:keep-all; text-align:center; overflow:hidden; background-size: cover;}
.error_wrap .motion {padding:7.6rem 28.5rem 2.5rem; display:inline-block; position:relative;}
.error_wrap .motion .left {position:absolute; width:295px; height:308px; right:0; top:-9.4rem;}
.error_wrap .motion .left img {position:absolute; left:0; top:0; opacity:0; animation: diaUp 0.2s forwards; }
.error_wrap .motion .left img:nth-child(2) {animation-delay: 0.1s}
.error_wrap .motion .left img:nth-child(3) {animation-delay: 0.2s}
.error_wrap .motion .left img:nth-child(4) {animation-delay: 0.3s}
.error_wrap .motion .left img:nth-child(5) {animation-delay: 0.4s}
.error_wrap .motion .right {position:absolute; width:327px; height:335px; bottom:0; left:0;}
.error_wrap .motion .right img {position:absolute;  left:0; top:0; opacity:0; animation: diaDown 0.2s forwards;}
.error_wrap .motion .right img:nth-child(2) {animation-delay: 0.1s}
.error_wrap .motion .right img:nth-child(3) {animation-delay: 0.2s}
.error_wrap .motion .right img:nth-child(4) {animation-delay: 0.3s}
.error_wrap .motion .right img:nth-child(5) {animation-delay: 0.2s}
.error_wrap .motion .right img:nth-child(6) {animation-delay: 0.1s}
.error_wrap .motion .center {   position: relative;  z-index: 1; display:inline-block; padding:1.5rem; border-radius:50%; background:url('../../images/common/error/ptn_dot.png') 0 0 repeat; border:1px solid #689aff; box-shadow:0 10px 10px rgba(0, 0, 0, 0.3); }
.error_wrap .motion .center .pic {overflow:hidden; width:500px; height:500px; margin:0 auto; text-align:center; border-radius:50%; background:#689aff; padding-top:7.5rem;}
.error_wrap .motion .info {position: relative; z-index: 1;}
.error_wrap .motion .info .tit {font-size:140px; color:#fff; font-weight:700;}
.error_wrap .motion .info .tit font {text-transform:uppercase; color:#ff0000;}
.error_wrap .motion .info .txt {font-size:30px; color:#ffdd00; font-weight:700;}

/* mypage */
.top_info .ticket_con {font-size:26px; color:#fff; font-weight:700; text-transform:uppercase; text-align:left; position:relative; padding:0 5rem;}
.top_info .ticket_con span {display:block; font-weight:400; font-size:16px; text-transform: lowercase;} 
.top_info .ticket_con .btn_line_y {width:190px; position:absolute; top:50%; right:5rem; transform:translate(0 , -50%);}
.ticket_wrap .tl {margin-bottom:3rem;}
.ticket_wrap .tl li { margin-bottom:0.4rem; position:relative; border:1px solid rgba(136, 204, 255, 0.5);}
.ticket_wrap .tl li:last-child {margin-bottom:0;}
.ticket_wrap .tl li .con {font-size:0; height:60px; overflow:hidden; line-height:60px; text-align:center; position:relative; z-index:1;}
.ticket_wrap .tl li .con:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; -webkit-backdrop-filter: blur(2rem);  backdrop-filter: blur(2rem); z-index:-1;}
.ticket_wrap .tl li .con:before {content:''; display:none; top:0; bottom:0; left:0; right:0; position:absolute; border:3px solid #ffdd00; z-index:1;}
.ticket_wrap .tl li .con > div {display:inline-block; vertical-align:top; font-size:14px; background:#fff; height:100%; background:rgba(17, 42, 68, 0.5);}
.ticket_wrap .tl .num {background:rgba(0, 0, 0, 0.5) !important; color:#fff; font-weight:700; width:60px;}
.ticket_wrap .tl .sort {width:110px; color: #88ccff; font-weight:500; text-transform: capitalize; position:relative; font-size:11px; font-family: 'Roboto', sans-serif; }
.ticket_wrap .tl .sort:before {content:''; display:block; position:absolute; width:1px; height:20px; right:0; top:50%; transform:translate(0 , -50%); background:#949494;}
.ticket_wrap .tl .tit {width:calc(100% - 420px); padding:0 3rem; text-align:left; font-family: 'Roboto', sans-serif; font-size:12px; }
.ticket_wrap .tl .tit a {position:relative; z-index:2; vertical-align:middle; top:-2px; color:#fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; line-height:normal;}
.ticket_wrap .tl .tit a:hover {color:#ffdd00; font-weight:700;}
.ticket_wrap .tl .tit span {display:inline-block; position:relative; z-index:2; vertical-align:middle; top:-2px; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; line-height:normal;}
.ticket_wrap .tl .date {width:130px; color:#bde5ff; font-family: 'Roboto', sans-serif; text-transform:uppercase;  font-size: 12px !important; }
.ticket_wrap .state {width:120px; position:relative; padding:0 1rem; font-size:0; text-align:center;}
.ticket_wrap .state.new:before {z-index:1; top:2px; left:2px; font-size:11px; font-weight:700; width:36px; height:18px; line-height:18px; content:'NEW'; position:absolute; display:block;  border-radius:5px; background:#ff0000; border:1px solid #e30000; color:#fff;}
.ticket_wrap .state span {position:relative; display:inline-block; width:100%; color:#fff; font-weight:900; font-size:12px; text-transform:uppercase; height:40px; line-height:40px; border-radius:5px;  background: rgba(0, 0, 0, 0.6);}
.ticket_wrap .state span:before, .ticket_wrap .state span:after {content:''; display:block; position:absolute; width:4%; height:2px; background:#ff0000;}
.ticket_wrap .state span:before {left:48%; top:0;}
.ticket_wrap .state span:after { left:48%; bottom:0;}
.ticket_wrap .state.wait span {border:1px #689aff solid; color: #689aff; }
.ticket_wrap .state.answered span {border:1px #ff7510 solid; color: #ff7510;}
.ticket_wrap .state.closed span {border:1px #949494 solid; color: #949494;}
.ticket_wrap .state.complain span {border:1px #ff0000 solid; color: #ff0000;}
.ticket_wrap .tl li:hover .con:before {content:''; display:block; top:0; bottom:0; left:0; right:0; position:absolute; border:3px solid #ffdd00; }
.ticket_wrap .tl li:hover .tit span {color:#ffdd00; }
.ticket_wrap .tl_bottom, .notifi_wrap .tl_bottom {text-align:center; margin-top:5rem; padding-top:5rem; border-top:1px solid #467294; position:relative;}
.ticket_wrap .tl_bottom:before, .notifi_wrap .tl_bottom:before {content:''; display:block; position:absolute; width:10px; height:3px; background:#ff0000; top:-2px; left:50%; transform:translate(-50% , 0);}
.ticket_wrap .tl_bottom {text-align:center; margin-top:5rem; padding-top:5rem; border-top:1px solid #467294; position:relative;}
.notifi_wrap .tl_bottom { display:none; }
.ticket_wrap .tl_bottom .go_topup, .notifi_wrap .tl_bottom .go_topup {width:240px; height:60px; line-height:60px;}
.ticket_wrap .tl_bottom .go_topup img, .notifi_wrap .tl_bottom .go_topup img {vertical-align:middle; position:relative; top:-2px; margin-right:1rem;}
.ticket_wrap .tl_bottom02 {border-top:0;}

.ticket_wrap .tv .tv_top {background:rgba(0, 0, 0, 0.5);  padding: 4rem 0;  position:relative; z-index:1;}
.ticket_wrap .tv .tv_top:before {-webkit-backdrop-filter: blur(2rem); backdrop-filter: blur(2rem); z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0;}
.ticket_wrap .tv .tv_top.wait {background:rgba(104, 154, 255, 0.5);}
.ticket_wrap .tv .tv_top.answered {background:rgba(255, 117, 16, 0.5);}
.ticket_wrap .tv .tv_top.closed {background:rgba(80, 80, 80, 0.5);}
.ticket_wrap .tv .tv_top.complain {background:rgba(255, 0, 0, 0.5);}
.ticket_wrap .tv .tv_top .inner {position:relative; font-size:0;}
.ticket_wrap .tv .tv_top .sort {font-size:16px; color:#88ccff; font-weight:700; display:inline-block; vertical-align:top; width:75px; text-transform: capitalize; position:relative;}
.ticket_wrap .tv .tv_top .sort:before {width:1px; height:20px; background:#000; content:''; display:block; top:50%; right:0; transform:translate(0 , -50%); position:absolute;}
.ticket_wrap .tv .tv_top .tit {padding-left:1.8rem; font-size:18px; font-weight:700; color:#fff; display:inline-block; vertical-align:top; width:calc(100% - 235px); }
.ticket_wrap .tv .tv_top .state {display:inline-block; position:absolute; right:2.5rem; top:50%; transform:translate(0 , -50%); padding:0; border-radius:5px; }
.ticket_wrap .tv .tv_top .state span { background:rgba(0, 0, 0, 0.8) ; }
.ticket_wrap .tv .tv_top.wait .state span {border:1px #689aff solid; color: #689aff; }
.ticket_wrap .tv .tv_top.answered .state span {border:1px #ff7510 solid; color: #ff7510;}
.ticket_wrap .tv .tv_top.closed .state span {border:1px #777777 solid; color: #777777;}
.ticket_wrap .tv .tv_top.complain .state span {border:1px #ff0000 solid; color: #ff0000;}
.ticket_wrap .tv .tv_date {text-align:right; font-family: 'Roboto', sans-serif; font-size:12px; color:#e0e0e0; margin:1.7rem 0; text-transform:uppercase;}
.ticket_wrap .tv .tv_con { background: rgba(0, 0, 0, 0.3); padding: 5rem; position:relative; z-index:1; }
.ticket_wrap .tv .tv_con:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; z-index:-1; right:0; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); }
.ticket_wrap .tv .tv_con .text {font-family: 'Roboto'; font-size: 12px; line-height: 2; color:#fff; padding-bottom:5rem; border-bottom:1px solid rgba(255,255,255,0.3);}
.ticket_wrap .tv .tv_con .attach {padding-top:3rem;}
.ticket_wrap .tv .tv_con .attach li {font-size:14px; position:relative; padding-left:3rem; margin-bottom:1.5rem;}
.ticket_wrap .tv .tv_con .attach li:last-child {margin-bottom:0;}
.ticket_wrap .tv .tv_con .attach li a {color:#bde5ff; font-family: 'Roboto', sans-serif; font-size:14px; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; max-width:100%;}
.ticket_wrap .tv .tv_con .attach li a:hover {color:#ff0000; text-decoration:underline;}
.ticket_wrap .tv .tv_con .attach li:before {width:12px; height:12px; content:''; display:block; position:absolute; top:2px; left:0; background:url('../../images/common/media/icon_paper.png') 0 0 no-repeat;}
.ticket_wrap .tv .reply {font-size:14px; background: rgba(0, 0, 0, 0.3); position:relative; padding: 5rem;  border-left:2px solid #689aff; margin-top:1rem; z-index:1;}
.ticket_wrap .tv .reply:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; z-index:-1; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);}
.ticket_wrap .tv .reply .writer {padding-right:20rem; margin-bottom:1.5rem; text-transform:uppercase; color:#467294; font-weight:700; position:relative;}
.ticket_wrap .tv .reply .writer:before {content:''; display:block; position:absolute; top:0; left:-3rem; width:14px; height:14px; background-position:0 -14px; background-repeat:no-repeat; background-image:url('../../images/common/mypage/icon_reply.png');}
.ticket_wrap .tv .reply.new .writer:after {margin-left:1rem; text-align:center; font-size:11px; font-weight:700; width:36px; height:18px; line-height:18px; content:'NEW'; display:inline-block;  border-radius:5px; background:#ff0000; border:1px solid #e30000; color:#fff;}
.ticket_wrap .tv .reply .date { font-family: 'Roboto', sans-serif; font-size:14px;  text-transform:uppercase; color:#bde5ff; position:absolute; top:5rem; right:5rem;}
.ticket_wrap .tv .reply .txt {color:#fff; font-family: 'Roboto'; font-size: 12px; line-height: 2;}
.ticket_wrap .tv .reply .writer.admin {color:#ff0000;}
.ticket_wrap .tv .reply .writer.admin:before {background-position:0 0;}
.ticket_wrap .tv .comment {background:rgba(0, 0, 0, 0.3);  border:1px solid rgba(135, 207, 255, 0.5); position:relative; padding:5rem 8rem; z-index:1; margin-top:3rem;}
.ticket_wrap .tv .comment:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); z-index:-1;}
.ticket_wrap .tv .comment:after {content:''; display:block; position:absolute; background:url('../../images/common/icon_lt.png') 0 0 no-repeat , url('../../images/common/icon_rb.png') right bottom no-repeat; right:-1px; bottom:-1px; left:-1px; top:-1px;}
.ticket_wrap .tv .comment .tit {z-index: 1; font-size:14px; color:#fff; margin-bottom:2rem; font-weight:700; position:relative;}
.ticket_wrap .tv .comment .tit:before {position:absolute; top:1px; left:-3rem; content:''; display:block; width:12px; height:12px; background:url('../../images/common/mypage/icon_comment.png') 0 0 no-repeat;}
.ticket_wrap .tv .comment .cm_area {z-index: 1; font-size:0; position:relative;}
.ticket_wrap .tv .comment .cm_area textarea {position: relative; margin-right:2rem; width:calc(100% - 170px); display:inline-block; vertical-align:top; border-left: 2px solid #87cfff; border-right: 1px solid rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); background:rgba(255, 255, 255, 0); height:100px; padding:2.5rem 2rem; font-size:12px; font-family:'Roboto'; color:#87cfff;}
.ticket_wrap .tv .comment .cm_area textarea::placeholder {color:#87cfff;}
.ticket_wrap .tv .comment .cm_area textarea:focus {color:#fff;}
.ticket_wrap .tv .comment .cm_area:before, .ticket_wrap .tv .comment .cm_area:after {background: url(../../images/common/account/dot_w.jpg) right 0 no-repeat; content:''; display:block; width:3px; height:3px; position:absolute; right:17rem;}
.ticket_wrap .tv .comment .cm_area:before {top:0;}
.ticket_wrap .tv .comment .cm_area:after {bottom:0;}
.ticket_wrap .tv .comment .btn_submit {width:150px; height:100px; line-height:100px; display:inline-block; vertical-align:top; cursor:pointer;}
.ticket_wrap .tv .btn_answers {padding:5rem 2.5rem; text-align:center;}
.ticket_wrap .tv .btn_answers .info {font-size:16px; color:#87cfff; font-weight:700; text-transform:uppercase; margin-bottom:2.8rem;}
.ticket_wrap .tv .btn_answers a {display:inline-block; vertical-align:top; margin:0 1rem; padding-right: 0.5rem; border:1px solid #ff0000; font-size:15px; font-weight:700; border-radius:5px; text-align:center; width:140px; height:50px; line-height:50px; text-transform:uppercase;}
.ticket_wrap .tv .btn_answers .btn_no {background:rgba(0, 0, 0, 0.7); color:#ff0000;}
.ticket_wrap .tv .btn_answers .btn_yes {background:rgba(255, 0, 0, 0.7); color:#fff; }
.ticket_wrap .tv .btn_answers a:before {content:''; display:inline-block; vertical-align:middle; top:-1px; position:relative; margin-right:6px; width:12px; height:12px;}
.ticket_wrap .tv .btn_answers .btn_no:before {background:url('../../images/common/mypage/icon_no.png') 0 0 no-repeat;}
.ticket_wrap .tv .btn_answers .btn_yes:before {background:url('../../images/common/mypage/icon_yes.png') 0 0 no-repeat;}
.ticket_wrap .tv .btn_answers .btn_no:hover {background:rgba(73, 9, 9, 0.7);}
.ticket_wrap .tv .btn_answers .btn_yes:hover {background:rgba(255, 0, 0, 0.8);}
.ticket_wrap .tv .tl_bottom {overflow:hidden; margin:0; padding-top:3rem;}
.ticket_wrap .tv .tl_bottom .go_topup {float:left;}
.ticket_wrap .tv .tl_bottom .btn_line_b02 {width:190px; height:60px; line-height:60px;}
.ticket_wrap .tw .file_input input[type=text] {display:inline-block;}
.ticket_wrap .tw .file_input label { cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden; }
.ticket_wrap .tw .file_input label input {position:absolute; width:0; height:0; overflow:hidden;}
.ticket_wrap .tw .file_input input[type=text] {width:calc(100% - 120px); vertical-align:middle; display:inline-block; background:none; padding:0 1rem; border:none;  color:#fff; font-family: 'Roboto', sans-serif; font-size:12px; overflow: hidden;}
.ticket_wrap .tw .file_input input[type=text]::placeholder {color:#467294;}
.ticket_wrap .tw .file_input .btn_attach {display:inline-block; border:1px solid #87cfff; text-align:center; color:#fff; border-radius:3px; background:rgba(135, 207, 255, 0.2);  font-size:12px; width:120px; height:36px; line-height:36px;}
.ticket_wrap .tw .file_input .btn_attach img {vertical-align:middle; margin-right:5px; position:relative; top:-2px;}
.ticket_wrap .tw .file_input .btn_attach:hover {background:rgba(135, 207, 255, 0.8);}
.ticket_wrap .tw .tw_form {padding:5rem; position:relative; background:rgba(0, 0, 0, 0.5); border:1px solid rgba(255, 255, 255, 0.2); z-index:1;}
.ticket_wrap .tw .tw_form:before, .ticket_wrap .tw .tw_form:after {content:''; display:block; position:absolute;} 
.ticket_wrap .tw .tw_form:before {top:0; bottom:0; left:0; right:0; -webkit-backdrop-filter: blur(2rem); backdrop-filter: blur(2rem); z-index:-2;}
.ticket_wrap .tw .tw_form:after {background:url('../../images/common/icon_lt.png') 0 0 no-repeat , url('../../images/common/icon_rb.png') right bottom no-repeat; right:-1px; bottom:-1px; left:-1px; top:-1px; z-index:-1;}
.ticket_wrap .tw .tw_form > ul > li { margin-bottom:3rem;}
.ticket_wrap .tw .tw_form > ul > li:last-child {margin-bottom:0;}
.ticket_wrap .tw .tw_form .tit {display:block; font-size:14px; color:#ff0000; font-weight:700; text-transform:uppercase; margin-bottom:1.5rem; position:relative;}
.ticket_wrap .tw .tw_form .tit .type {position:absolute; top:0; right:0; font-weight:400; color:#87cfff;}
.ticket_wrap .tw .tw_form .inp {background:none; border-left:2px solid #87cfff; border-right:1px solid rgba(255,255,255,0.2);  border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2); position:relative;}
.ticket_wrap .tw .tw_form .inp input[type=text] {height:60px; width:100%; background:none; border:none; position:relative; padding:0 2rem; color:#fff; font-family: 'Roboto', sans-serif; font-size:12px; }
.ticket_wrap .tw .tw_form .inp input[type=text]::placeholder {color:#87cfff;} 
.ticket_wrap .tw .tw_form .inp input[type=text]:focus {color:#fff; outline:none;}
.ticket_wrap .tw .tw_form .inp input[type=text]:focus::placeholder {color:#fff;}
.ticket_wrap .tw .tw_form .inp input[type=text]:-webkit-autofill, .ticket_wrap .tw .tw_form .inp input[type=text]:-webkit-autofill:hover, .ticket_wrap .tw .tw_form .inp input[type=text]:-webkit-autofill:focus, .ticket_wrap .tw .tw_form .inp input[type=text]:-webkit-autofill:active { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px transparent inset; transition: background-color 5000s ease-in-out 0s;}
.ticket_wrap .tw .tw_form .inp textarea {height:200px; width:100%; background:none; border:none; position:relative; padding:2rem; color:#fff; font-family: 'Roboto', sans-serif; font-size:12px; }
.ticket_wrap .tw .tw_form .inp textarea::placeholder {color:#87cfff;} 
.ticket_wrap .tw .tw_form .inp textarea:focus {color:#fff;  outline:none;}
.ticket_wrap .tw .tw_form .inp textarea:focus::placeholder {color:#fff;}
.ticket_wrap .tw .tw_form .inp:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('../../images/common/account/dot_w.jpg') right 0 no-repeat, url('../../images/common/account/dot_w.jpg') right bottom no-repeat;}
.ticket_wrap .tw .tw_form .inp:focus-within {border:1px solid #fff;}
.ticket_wrap .tw .tw_form .inp:focus-within:before {background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat, url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.ticket_wrap .tw .tw_form .atc_list li {margin-bottom:2rem;}
.ticket_wrap .tw .tw_form .atc_list li:last-child {margin-bottom:0;}
.ticket_wrap .tw .tw_sel {position:relative;}
.ticket_wrap .tw .tw_sel > a {font-family:'Roboto'; border:1px solid #87cfff; position:relative; display:block; height:60px; line-height:60px; padding:0 3rem; background:rgba(135, 207, 255, 0.2) url('../../images/common/mypage/sel_cate_arr.png') right 2rem top 50% no-repeat; font-size:14px; color:#fff;}
.ticket_wrap .tw .tw_sel > a:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('../../images/common/account/dot_w.jpg') 0 0 no-repeat, url('../../images/common/account/dot_w.jpg') right 0 no-repeat, url('../../images/common/account/dot_w.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_w.jpg') right bottom no-repeat;}
.ticket_wrap .tw .tw_sel ul {display:none; z-index:1; position:absolute; left:0; right:0; background:#000000; border:1px solid rgba(135,207,255,0.5); border-top:0; padding:1rem 3rem;}
.ticket_wrap .tw .tw_sel li {padding:1.5rem 0;;}
.ticket_wrap .tw .tw_sel li a {font-size:14px; color:#87cfff; text-transform:uppercase;}
.ticket_wrap .tw .tw_sel li a:hover {color:#ffffff; font-weight:bold; }
.ticket_wrap .tw .tw_sel > a:focus-within {border:1px solid #fff; color:#ffffff;}
.ticket_wrap .tw .tw_sel > a:focus-within:before {background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat, url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.ticket_wrap .tw .tl_bottom {overflow:hidden; margin:0; padding-top:5rem;}
.ticket_wrap .tw .tl_bottom .go_topup {float:left;}
.ticket_wrap .tw .tl_bottom .btn_line_b02 { width:190px; height:60px; line-height:60px;}
.ticket_wrap .tw .tl_bottom:before {display:none;}

.my_wrap {max-width:600px; margin:0 auto;}
.my_wrap .my_con {position:relative;}
.my_wrap .my_con:before, .my_wrap .my_con:after {z-index:1; content:''; display:block; position:absolute; width:10px; height:3px; background:#ff0000; left:50%; transform:translate(-50% , 0);}
.my_wrap .my_con:before {top:-1px;}
.my_wrap .my_con:after {bottom:-1px;}
.my_wrap .my_form { padding:10rem; background:rgba(0, 0, 0, 0.7); border-top:1px solid #87cfff; border-bottom:1px solid #87cfff; position:relative;}
.my_wrap .my_form:before, .my_wrap .my_form:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.my_wrap .my_form:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:5rem; top:5rem;}
.my_wrap .my_form:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:5rem; bottom:5rem;}
.my_wrap .btn_line_b {margin:5rem auto 0; width:240px; height:60px; line-height:60px; display:block;}
.my_wrap .btn_line_b img {vertical-align:middle; position:relative; top:-2px; margin-right:1rem;}
.my_wrap .my_form .tit {display:block; font-size:14px; color:#ff0000; font-weight:700; text-transform:uppercase; margin-bottom:1.5rem; position:relative;}
.my_wrap .my_form .inp {background:none; border:1px solid #87cfff; position:relative;}
.my_wrap .my_form .inp input {height:60px; width:100%; background:rgba(135, 207, 255, 0.2); border:none; position:relative; padding:0 2rem; color:#fff; font-size:12px;}
.my_wrap .my_form .inp input::placeholder {color:#87cfff;} 
.my_wrap .my_form .inp input:focus {color:#fff; outline:none;}
.my_wrap .my_form .inp input:focus::placeholder {color:#fff;}
.my_wrap .my_form .inp:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('../../images/common/account/dot_w.jpg') 0 0 no-repeat, url('../../images/common/account/dot_w.jpg') right 0 no-repeat, url('../../images/common/account/dot_w.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_w.jpg') right bottom no-repeat;}
.my_wrap .my_form .inp:focus-within {border:1px solid #fff;}
.my_wrap .my_form .inp:focus-within:before {background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat, url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.my_wrap .btn_line_r02 {width:190px; height:60px; line-height:60px; display:block; margin:4rem auto 0;}
.my_wrap .ps_detail {background:rgba(0, 0, 0, 0.5); border-top:1px solid #87cfff; border-bottom:1px solid #87cfff; position:relative; padding:4rem 4rem 5rem;}
.my_wrap .ps_detail .title {text-align:center; font-size:16px; color:#87cfff; font-weight:700; text-transform:uppercase; margin-bottom:2.8rem;}
.my_wrap .ps_detail .line {border-top:1px solid #467294;  position:relative; font-size:0; padding:2.2rem 9rem 2.2rem 0;}
.my_wrap .ps_detail .line:last-child {border-bottom:1px solid #467294;}
.my_wrap .ps_detail .line:before, .my_wrap .ps_detail .line:after {content:''; display:block; position:absolute; width:3px; height:3px; background:#fff; top:-1px;}
.my_wrap .ps_detail .line:before {left:0;}
.my_wrap .ps_detail .line:after {right:0;}
.my_wrap .ps_detail .line > div {padding:0 1rem; display:inline-block; vertical-align:top;}
.my_wrap .ps_detail .tit {margin-bottom:0; width:154px; position:relative; font-size:14px; color:#ff0000; font-weight:700; text-transform:uppercase;}
.my_wrap .ps_detail .tit:before {content:''; display:block; position:absolute; width:3px; height:3px; background:#fff; top:-2.3rem; right:0;}
.my_wrap .ps_detail .txt {position:relative; width:calc(100% - 154px); font-size:14px; font-family:'Roboto'; color:#e0e0e0; }
.my_wrap .ps_detail .btn_edit {position:absolute; right:0; top:1.2rem; color:#ff0000; border:1px solid #ff0000; font-size:12px; font-weight:500; display:block; width:80px; height:34px; line-height:34px; text-align:center; border-radius:5px; text-transform:uppercase; background:rgba(0, 0, 0, 0.5); box-shadow:0 3px 5px rgba(0, 0, 0, 0.5);}
.my_wrap .ps_detail .btn_edit:hover {color:#fff; background:rgba(255, 0, 0, 0.5);}
.my_wrap .ps_detail .rd_controls {position:absolute; margin-top:-1rem; width:200px;  font-size:0; background:rgba(0, 0, 0, 0.4); border:1px solid #707070; border-radius:17px; padding:4px;}
.my_wrap .ps_detail .rd_controls label {font-size:12px; text-align:center; text-transform:uppercase; color:#ffea00; font-weight:700; font-family:'Roboto'; display:inline-block; width:50%; height:26px; line-height:26px; border-radius:13px; cursor: pointer;transition: 0.05s ease-in-out;}
.my_wrap .ps_detail .rd_controls label[for="rd_n"], .my_wrap .ps_detail .rd_controls label[for="rd_n02"] {color:#949494;}
.my_wrap .ps_detail .rd_controls input {display: none;}
.my_wrap .ps_detail .rd_controls input:checked + label {color:#000; box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); background: linear-gradient(#ffde0b, #b6a700);}
.my_wrap .ps_detail .rd_controls input:checked + label[for="rd_n"], .my_wrap .ps_detail .rd_controls input:checked + label[for="rd_n02"] {color:#555555; background: linear-gradient(#a5a5a5, #fff);}
.my_wrap .ps_detail .error {position:relative; display:block !important; margin:1.7rem -9rem 0 0; border-radius: 5px; background: rgba(255, 234, 0, 0.4) url(../../images/common/account/icon_noti.png) 1.2rem center no-repeat;  border: 1px solid rgba(255, 234, 0, 0.5); font-size: 12px;  color: #fff;   padding: 1.7rem 2rem 1.7rem 4.8rem !important; text-align: left;}
.my_wrap .ps_detail .require {z-index: 2; animation: bounce 2s infinite; position:absolute; top:0; right:0; transform: translate(0, -100%); display: inline-block; padding:1rem 1.2rem; font-family:'Roboto'; font-size:12px; color:#000; background:rgba(255, 221, 0, 0.9); border:1px solid #ffdd00; border-radius:5px;}
.my_wrap .ps_detail .require:after {content:''; display:block; width:12px; right:18%; bottom:-7px; height:7px; background:url('../../images/common/mypage/edit_arr.png') 0 0 no-repeat; position:absolute;}
.my_wrap .ps_detail .require font {color:#cc0000;}

.my_wrap .ps_detail .line.in_nation .txt {padding-left:6.4rem;}
.my_wrap .ps_detail .line.in_nation .txt img {border-radius:3px; border:1px solid #000; margin-right:1rem; position:absolute; left:1.2rem; top:50%; transform:translate(0 , -50%);}

.notifi_wrap .list li {position:relative; background:rgba(0, 0, 0, 0.7); border:1px solid rgba(135,207,255,0.5); padding:1.2rem 2rem; margin-bottom:1rem; padding-right:6rem;}
.notifi_wrap .list li:last-child {margin-bottom:0;}
.notifi_wrap .list li:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat, url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.notifi_wrap .list li > div {position:relative;}
.notifi_wrap .list .date {color:#87cfff; font-family: 'Roboto', sans-serif; font-size:12px;  margin-bottom:1rem;}
.notifi_wrap .list .notice .txt {color:#fff; font-size:14px; display:inline-block; vertical-align: middle;  max-width: calc(100% - 72px);  overflow: hidden;  text-overflow: ellipsis; -ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal; line-height: normal;}
.notifi_wrap .list .notice .label {display:inline-block; vertical-align:middle; font-family: 'Roboto', sans-serif; font-size:11px; color:#fff; font-weight:700; text-transform:uppercase; border-radius:5px; background:#ff0000; border:1px solid #e30000; padding:0.2rem 1rem; text-transform:uppercase; margin-right:1rem;}
.notifi_wrap .list .btn_close {transition:none; display:block; position:absolute; right:2rem; top:50%; transform:translate(0 , -50%); width:21px; height:21px; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/mypage/btn_close.png');}
.notifi_wrap .list .btn_close:hover {transition:none; background-position:0 -21px;}
.notifi_wrap .list .notice a {padding-right:2rem; position:relative;}
.notifi_wrap .list .notice a:before {content:''; position:absolute; right:0; top:3px; display:block; width:11px; height:11px; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/mypage/go_link.png');}
.notifi_wrap .list .notice a:hover:before  {transition:none; background-position:0 -11px;}
.notifi_wrap .list .notice a:hover {color:#ff0000;}

.esports_wrap .tl .info {width:220px;}
.esports_wrap .tl .title {background:rgba(0, 0, 0, 0.2); border:1px solid rgba(135,207,255,0.5); position:relative; margin-bottom:1.7rem;}
.esports_wrap .tl .title:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat, url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.esports_wrap .tl .title .con {height:36px; line-height:36px;}
.esports_wrap .tl .title .con > div {background:none; color:#87cfff; font-weight:700; font-size:12px; text-align:center; text-transform:uppercase; position:relative;}
.esports_wrap .tl .title .con > div:before { content: '';  display: block; position: absolute; width: 1px; height: 20px; right: 0; top: 50%; transform: translate(0 , -50%);  background: #87cfff; }
.esports_wrap .tl .title .con > div:last-child:before {display:none;}
.esports_wrap .tl .title .num {background:rgba(135, 207, 255, 0.3) !important; border-right:1px solid rgba(135,207,255,0.5); position:relative;}
.esports_wrap .tl .title .num:before {content:''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.esports_wrap .tl .title .tit {width:calc(((100% - 390px) / 2) + 110px);}
.esports_wrap .tl .tit {width:calc((100% - 390px) / 2);} 
.esports_wrap .tl .period {width:calc((100% - 390px) / 4); color:#bde5ff; text-transform:uppercase; overflow: hidden;  text-overflow: ellipsis;  -ms-text-overflow: ellipsis; white-space: nowrap;  word-wrap: normal; font-size: 12px !important; font-family: 'Roboto'; }
.esports_wrap .tl .info {font-size:0;}
.esports_wrap .tl .info a {text-align:center; font-weight:700; font-size:11px; position: relative; z-index: 3; text-transform:uppercase; display:inline-block; vertical-align:middle; margin-right:5px; width:60px; height:33px; line-height:33px; color:#fff; border-radius:4px;}
.esports_wrap .tl .info a:last-child {margin-right:0;}
.esports_wrap .tl .info .btn_info {background:rgba(104, 154, 255, 0.8); border:1px solid #689aff;}
.esports_wrap .tl .info .btn_edit {background:rgba(255, 0, 0, 0.8); border:1px solid #ff0000;}
.esports_wrap .tl .info .btn_delete {background:rgba(112, 112, 112, 0.8); border:1px solid #707070;}
.esports_wrap .tl .info .btn_info:hover {background:#689aff;}
.esports_wrap .tl .info .btn_edit:hover {background:#ff0000;}
.esports_wrap .tl .info .btn_delete:hover {background:#707070;}
.esports_wrap .tl li.title .con:before {display:none !important;}
.pb_account .complete_area {text-align:center; max-width:600px; margin:0 auto; padding:5rem; position:relative; background:rgba(0, 0, 0, 0.5 ); border-top:1px solid #87cfff; border-bottom:1px solid #87cfff;}
.pb_account .complete_area:before, .pb_account .complete_area:after {content:''; display:block; left:50%; transform:translate(-50% , 0); position:absolute; width:10px; height:3px; background:#ff0000;}
.pb_account .complete_area:before {top:-2px;}
.pb_account .complete_area:after {bottom:-2px;}
.pb_account .complete_area .con {position:relative; padding:7em 0;}
.pb_account .complete_area .con:before, .pb_account .complete_area .con:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.pb_account .complete_area .con:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:-1px; top:-1px;}
.pb_account .complete_area .con:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:-1px; bottom:-1px;}
.pb_account .complete_area .typing_wrap {margin-top:1rem;}
.pb_account .complete_area .typing_wrap .typing-txt {display:none;}
.pb_account .complete_area .typing_wrap .typing {text-transform:uppercase; color:#fff; font-size:30px; font-weight:700; height:3.6rem;}
.pb_account .complete_area .txt {color:#fff; font-size:16px; line-height:normal; font-weight:700; margin-top:2.8rem;}
.pb_account .complete_area .txt font {color:#ff0000;}
.pb_account .complete_area .txt02 {font-size:20px; margin-top:2.5rem; color:#fff; }
.pb_account .complete_area .txt02 font {color:#ffdd00;}
.pb_account .pb_sub_con .complete_area {margin-bottom:3rem;}
.pb_account .pb_sub_con .complete_area .con {padding:8rem 0;}
.pb_account .complete_area02 .txt02 {font-size:24px; font-weight:500; text-transform:uppercase; margin-top:3.5rem;}
.pb_account .complete_area02 .txt03 {font-size:16px; color:#ffdd00; margin-top:3.5rem; line-height: normal;}
.pb_account .complete_area + .btn_read {width:270px;}

/* paging */
.paging_wrap {text-align:center;}
.paging_wrap ul {font-size:0;}
.paging_wrap li {display:inline-block; vertical-align:top; margin:0 0.3rem;}
.paging_wrap li a {position:relative; display:block; padding:0 0.4rem; min-width:24px; height:24px; line-height:23px; text-align:center; font-size:11px; color:#87cfff; font-weight:500; border:1px solid #87cfff;}
.paging_wrap li a:hover, .paging_wrap li.on a {background:rgba(135, 208, 255, 0.3);}
.paging_wrap li.prev a:hover, .paging_wrap li.next a:hover, .paging_wrap li.first a:hover, .paging_wrap li.last a:hover {border:1px solid #ffdd00; background:rgba(255, 234, 0, 0.15);}
.paging_wrap li.prev a:before, .paging_wrap li.next a:before, .paging_wrap li.first a:before, .paging_wrap li.last a:before {position:absolute; left:50%; top:50%; transform:translate(-50% , -50%); content:''; display:block; width:6px; height:10px; background-repeat:no-repeat; background-position:0 0;} 
.paging_wrap li.first a:before, .paging_wrap li.last a:before {width:12px;}
.paging_wrap li.prev a:before {background-image:url('../../images/common/page_l.png');}
.paging_wrap li.next a:before {background-image:url('../../images/common/page_r.png');}
.paging_wrap li.first a:before {background-image:url('../../images/common/page_ll.png');}
.paging_wrap li.last a:before {background-image:url('../../images/common/page_rr.png');}
.paging_wrap li.prev a:hover:before, .paging_wrap li.next a:hover:before, .paging_wrap li.first a:hover:before, .paging_wrap li.last a:hover:before {background-position:0 -10px;}

/**/
.new_search_wrap {width:200px;  border:1px solid #467294; position:relative;}
.new_search_wrap:before, .new_search_wrap:after {position:absolute; content:''; display:block;  width:3px; top:-1px; bottom:-1px; background:url('../../images/common/bg_search_dot.jpg') 0 0 no-repeat, url('../../images/common/bg_search_dot.jpg') 0 bottom no-repeat;}
.new_search_wrap:before {left:-1px;}
.new_search_wrap:after {right:-1px;}

.new_search_wrap:focus-within {border:1px solid #fff;}
.new_search_wrap:focus-within:before, .new_search_wrap:focus-within:after {background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat;}

.new_search_wrap .search_area {position:relative; height:40px;}
.new_search_wrap .search_area input[type=text] {background:rgba(135, 207, 255, 0.2); border:none; font-size:14px; color:#fff; width:100%; height:100%; padding-right:4.8rem; padding-left:2rem; }
.new_search_wrap .search_area input[type=text]::placeholder {color:#87cfff;}
.new_search_wrap .search_area input[type=text]:focus::placeholder {color:#fff;}
.new_search_wrap .search_area input[type=text]:-webkit-autofill, .new_search_wrap .search_area input[type=text]:-webkit-autofill:hover, .new_search_wrap .search_area input[type=text]:-webkit-autofill:focus, .new_search_wrap .search_area input[type=text]:-webkit-autofill:active { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0px 1000px rgba(135, 207, 255, 0.2) inset; transition: background-color 5000s ease-in-out 0s;}
.new_search_wrap .search_area button {cursor: pointer; position:absolute; top:50%; right:1.1rem; transform:translate(0 , -50%); width:21px; height:22px; background-image:url('../../images/common/icon_search.png'); background-position: 0 0; background-repeat: no-repeat;     background-color: rgba(255, 255, 255, 0); font-size:0;}
.new_search_wrap .search_area button:hover {background-position:0 -22px;}

.btn_read {display:block; margin:0 auto; box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(0, 0, 0, 0.7); letter-spacing:0.02rem; color:#ff2c2c; height:60px; border:1px solid #ff0000; position:relative; line-height:60px; text-align:center; border-radius:5px;  width:300px; font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_read:before, .btn_read:after {transition:all ease-in-out 0.2s;  content:''; display:block; width:4px; height:10px; position:absolute; background:#e4140c;}
.btn_read:before {top:0; right:10px; }
.btn_read:after {bottom:0; left :10px; }
.btn_read:hover { background:rgba(73, 9, 9, 0.7); color:#fff;}
.btn_read:hover:before, .btn_read:hover:after {transition:all ease-in-out 0.2s; background:#ff0000; height:15px;}

.btn_line_r { box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(0, 0, 0, 0.7); letter-spacing:0.02rem; color:#ff2c2c; border:1px solid #ff0000; position:relative;  text-align:center; border-radius:5px;  font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_line_r:before, .btn_line_r:after {transition:all ease-in-out 0.2s; content:''; display:block; width:4px; height:10px; position:absolute; background:#e4140c;}
.btn_line_r:before {top:0; right:10px; }
.btn_line_r:after {bottom:0; left :10px; }
.btn_line_r:hover { background:rgba(73, 9, 9, 0.7); color:#fff;}
.btn_line_r:hover:before, .btn_line_r:hover:after {transition:all ease-in-out 0.2s; background:#ff0000; height:15px;}

.btn_line_b {box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(0, 0, 0, 0.7); letter-spacing:0.02rem; color:#709fff;  border:1px solid #689aff; position:relative;  text-align:center; border-radius:5px;  font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_line_b:before, .btn_line_b:after {transition:all ease-in-out 0.2s; content:''; display:block; width:4px; height:10px; position:absolute; background:#365794;}
.btn_line_b:before {top:0; right:10px; }
.btn_line_b:after {bottom:0; left :10px; }
.btn_line_b:hover {background:rgba(17, 47, 99, 0.7); color:#fff;}
.btn_line_b:hover:before, .btn_line_b:hover:after {transition:all ease-in-out 0.2s; background:#5986df; height:15px;}

.btn_line_b02 {box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(104, 154, 255, 0.7); letter-spacing:0.02rem; color:#fff;  border:1px solid #689aff; position:relative;  text-align:center; border-radius:5px;  font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_line_b02:before, .btn_line_b02:after {transition:all ease-in-out 0.2s; content:''; display:block; width:4px; height:10px; position:absolute; background:#fff;}
.btn_line_b02:before {top:0; right:10px; }
.btn_line_b02:after {bottom:0; left :10px; }
.btn_line_b02:hover { background:rgba(104, 154, 255, 0.8); color:#fff;  }
.btn_line_b02:hover:before, .btn_line_b02:hover:after {transition:all ease-in-out 0.2s; height:15px;}

.btn_line_r02 { box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(255, 0, 0, 0.6);; letter-spacing:0.02rem; color:#fff; border:1px solid #ff0000; position:relative;  text-align:center; border-radius:5px;  font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_line_r02:before, .btn_line_r02:after {transition:all ease-in-out 0.2s; content:''; display:block; width:4px; height:10px; position:absolute; background:#fff;}
.btn_line_r02:before {top:0; right:10px; }
.btn_line_r02:after {bottom:0; left :10px; }
.btn_line_r02:hover { background:rgba(255, 0, 0, 0.8); color:#fff;}
.btn_line_r02:hover:before, .btn_line_r02:hover:after {transition:all ease-in-out 0.2s; background:#fff;  height:15px;}

.btn_line_y {box-shadow:0 3px 5px rgba(0, 0, 0, 0.7); background:rgba(255, 221, 0, 0.6); letter-spacing:0.02rem; color:#fff;  border:1px solid #ffdd00; position:relative;  text-align:center; border-radius:5px;  font-size:15px; font-weight:700; text-transform:uppercase;}
.btn_line_y:before, .btn_line_y:after {transition:all ease-in-out 0.2s; content:''; display:block; width:4px; height:10px; position:absolute; background:#fff;}
.btn_line_y:before {top:0; right:10px; }
.btn_line_y:after {bottom:0; left :10px; }
.btn_line_y:hover {background:rgba(255, 221, 0, 0.8); }
.btn_line_y:hover:before, .btn_line_y:hover:after {transition:all ease-in-out 0.2s; height:15px; background:#fff;}

.red_dot li {color:#fff; font-size:14px; position:relative; padding-left:1.4rem; text-align:left; margin-bottom:1.5rem; word-break:keep-all;}
.red_dot li:last-child {margin-bottom:0;}
.red_dot li font {color:#fffc00;}
.red_dot li:before {content:''; display:block; position:absolute; width:5px; height:5px; left:0; top:5px; background:#ff0000;}

.nodata_n {color:#fff; font-size:16px; padding:22.5rem 2.5rem;  font-weight:700; text-transform:uppercase; background:rgba(255, 255, 255, 0.2); text-align:center;}
.nodata_n font {color:#ffea00;}
.nodata_n span {display:block; margin:3.6rem auto 0;}

.top_info {background:url('../../images/common/sub/bg_notice_top.png') 0 0 repeat; font-size:14px; color:#fff; margin-bottom:5rem; line-height:1.5; text-align:center;}
.top_info font {color:#ffdd00;}
.top_info img {display:block; margin:0 auto 1.5rem;}
.top_info .inner {position:relative; padding-top:5.6rem; padding-bottom:5.6rem;}
.top_info .inner:before, .top_info .inner:after {content:''; display:block; width:18px; height:18px; position:absolute;} 
.top_info .inner:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:2.5rem; top:0;}
.top_info .inner:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:2.5rem; bottom:0;}

/************ client_view ****************/
.client_veiw .nw_wrap .nw_view .nw_v_tit {max-width:1800px; padding-left:2.5rem; padding-right:2.5rem; margin:0 auto 2rem; background:none;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .inner {padding:0;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .tit {position:relative; padding:2.6rem 2.1rem 2.6rem 12rem; text-align:left; font-size:24px; background:rgba(0, 0, 0, 0.2); border:1px solid rgba(255, 255, 255, 0.3); margin-bottom:2rem;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .date {position:static; transform:none; text-align:right; font-size:16px; color:#fff; font-family:'Roboto';}
.client_veiw .nw_wrap .nw_view .nw_v_tit .label {top:24%; margin:0; z-index: 1;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .tit:before, .client_veiw .nw_wrap .nw_view .nw_v_tit .tit:after {content:''; display:block; width:1.8rem; height:1.8rem; position:absolute;} 
.client_veiw .nw_wrap .nw_view .nw_v_tit .tit:before {background:url('../../images/common/icon_lt.png') 0 0 no-repeat; left:-1px; top:-1px;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .tit:after {background:url('../../images/common/icon_rb.png') 0 0 no-repeat; right:-1px; bottom:-1px;}
.client_veiw .pb_sub .pb_news {padding:2rem 0;}
.client_veiw + .go_top {padding-top:1.4rem; width:6rem; height:6rem; border-radius:50%; bottom:2rem; right:2rem; font-size:16px; color:#000000; font-weight:700; border-radius:50%; background:#ffdd00;}
.client_veiw + .go_top:before {background:url('../../images/common/icon_go_top02.png') 0 0 no-repeat; width:1.8rem; height:1rem; background-size:100% auto;}

/* notification */
.notificaton {font-family:'Roboto';}
.notificaton .tab_area {margin-bottom:3rem; position:relative;}
.notificaton .tab_area .state {border-bottom:1px solid rgba(255, 255, 255, 0.3); padding-bottom:2rem; position:relative;}
.notificaton .tab_area .state:after {content:''; display:block; position:absolute; bottom:-1px; right:0; width:1.2rem; height:1px; background:#ff0000;}
.notificaton .tab_area ul {font-size:0;}
.notificaton .tab_area li {display:inline-block; vertical-align:top; margin-right:1rem;}
.notificaton .tab_area li:last-child {margin-right:0;}
.notificaton .tab_area li a {cursor:pointer; padding-left:3rem; letter-spacing:0.04em; font-size:14px; color:#88ccff; font-weight:700; text-transform:uppercase; width:200px; height:50px; line-height:50px; background:rgba(34, 68, 119, 0.8); border:1px solid #88ccff; border-radius:0.6rem; position:relative;}
.notificaton .tab_area li a:before {content:''; display:block; position:absolute; right:1.8rem; transform:translate(0 , -50%); top:50%; border-radius:50%; width:20px; height:20px; background-position:0 0; background-repeat:no-repeat; background:url('../../images/common/account/icon_tab_arr.png');}
.notificaton .tab_area li.on a {background:rgba(0, 0, 0, 0.8); border-color:#ff0000;  color:#ff0000;}
.notificaton .tab_area li.on a:before {background-position:0 -40px;}
.notificaton .tab_area li.on a:after {left:0; bottom:-2.2rem; content:''; display:block; position:absolute; width:100%; border-radius:0.2rem; background:#ff0000; height:0.4rem;}
.notificaton .tab_area li a:hover {background:#000000; color:#88ccff; border-color:#88ccff;}
.notificaton .tab_area li a:hover:before {background-position:0 -20px;}
.notificaton .tab_area .btn_all_read {background:rgba(255, 255, 255, 0.1); border:1px solid rgba(255, 255, 255, 0.5); border-radius:0.6rem; position:absolute; top:0; right:0; min-width:13.2rem; height:50px; line-height:50px; text-align:center; text-transform:uppercase; font-size:14px; color:#fff; font-weight:700; letter-spacing:0.04em;}
.notificaton .tab_area .btn_all_read:hover {background:rgba(255, 255, 255, 0.2);}
.notificaton .list.unread {display:none;}
.notificaton .list li {margin-bottom:1rem;}
.notificaton .list li:last-child {margin-bottom:0;}
.notificaton .list .con {position:relative; z-index:1;}
.notificaton .list .con:before {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; -webkit-backdrop-filter: blur(2rem);  backdrop-filter: blur(2rem);}
.notificaton .list .noti_box {cursor:pointer; transition: all 0.2s; padding:1.5rem 15rem 1.5rem 2rem; background:rgba(17, 42, 68, 0.5);  border:1px solid rgba(136, 204, 255, 0.5); position:relative; font-size:0;}
.notificaton .list .noti_box:before {content :''; display:block; position:absolute; top:-1px; bottom:-1px; left:-1px; right:-1px; background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat , url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.notificaton .list .noti_box:after {content:''; display:block; height:3.2rem; width:1px; background:rgba(136, 204, 255, 0.5); left:9.6rem; top:50%; margin-top:-1.6rem; position:absolute;}
.notificaton .list .noti_box .sort { background:rgba(0, 0, 0, 0.2); text-align:center; display:inline-block; margin-right:2.8rem; vertical-align:middle; width:64px; height:32px; line-height:32px; border-radius:0.6rem; font-size:11px;  text-transform:uppercase; position: relative;}
.notificaton .list .noti_box .sort:before, .notificaton .list .noti_box .sort:after {content:''; display:block; top:0.36rem; bottom:0.36rem; width:1px; background: linear-gradient(to bottom, #ffcc00 , #ff6600); position:absolute; z-index:1;}
.notificaton .list .noti_box .sort:before {left:0;}
.notificaton .list .noti_box .sort:after {right:0;}
.notificaton .list .noti_box .text {display:inline-block; vertical-align:middle; max-width:calc(100% - 64px - 2.8rem);}
.notificaton .list .noti_box .text .time {word-break: break-word; color:#88ccff; font-size:11px; font-weight:500; text-transform:uppercase;}
.notificaton .list .noti_box .text .time span {font-weight:500; border-radius:4px; background:#88ccff; margin-right:0.3rem; color:#000000; padding:0 0.6rem; height:12px; line-height:13px; display:inline-block; }
.notificaton .list .noti_box .text .time.unread {color:#ffff00;}
.notificaton .list .noti_box .text .time.unread span {color:#000000; background:#ffff00;}
.notificaton .list .noti_box .text .txt { word-break: break-word; margin-top:0.6rem; font-size:14px; color:#ffffff; position:relative;}
.notificaton .list .in_link .noti_box .text .txt:after {margin-left:0.8rem; vertical-align:middle; position:relative; top:-1px; content:''; display:inline-block; width:14px; height:14px; background:url('../../images/common/account/icon_link_.png') 0 0 no-repeat;}
.notificaton .list .noti_box .btn_open {cursor:pointer; position:absolute; top:0; right:0; bottom:0; width:7rem; border-left:1px solid rgba(136, 204, 255, 0.5); background:rgba(136, 204, 255, 0.1); font-size:0; color:transparent;}
.notificaton .list .noti_box .btn_open:before {transition: all 0.2s; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:2rem; height:1.2rem; background:url('../../images/common/account/icon_arr_bl.png') 0 0 no-repeat;}
.notificaton .list .noti_box .btn_close {right:9rem; top:50%; margin-top:-2rem; border-radius:0.6rem; cursor:pointer; position:absolute;  width:4rem; height:4rem; background:rgba(136, 204, 255, 0.2); font-size:0; color:transparent;}
.notificaton .list .noti_box .btn_close:before {content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); width:1.6rem; height:1.6rem; background:url('../../images/common/account/icon_close_bl.png') 0 0 no-repeat;}
.notificaton .list .noti_box .btn_close:hover {background:#88ccff;}
.notificaton .list .noti_box .btn_close:hover:before {background-position:0 -16px;}
.notificaton .list .add_box {display:none; font-size:14px; color:#fff; background:#000000; border:1px solid #88ccff; border-top:0; padding:2.7rem 2.5rem 2.7rem 6.5rem; word-break:break-word; position:relative;}
.notificaton .list .add_box:before {content:''; display:block; position:absolute; top:2.5rem; left:2.9rem; width:1.6rem; height:1.6rem; background:url('../../images/common/account/icon_add.png') 0 0 no-repeat;}
.notificaton .list .add_box a {color:#88ccff; text-decoration:underline;}

.notificaton .list .noti_box .sort.ticket {box-shadow: inset 0 -1px 0 0px #ff6600, inset 0 0 0 1px #ffcc00;  color:#ffcc44; }
.notificaton .list .noti_box .sort.ticket:before, .notificaton .list .noti_box .sort.ticket:after {content:''; display:block; top:0.36rem; bottom:0.36rem; width:1px; background: linear-gradient(to bottom, #ffcc00 , #ff6600); position:absolute; z-index:1;}

.notificaton .list .noti_box .sort.system {box-shadow: inset 0 -1px 0 0px #ff4444, inset 0 0 0 1px #ff77ff;  color:#ff77ff; }
.notificaton .list .noti_box .sort.system:before, .notificaton .list .noti_box .sort.system:after {content:''; display:block; top:0.36rem; bottom:0.36rem; width:1px; background: linear-gradient(to bottom, #ff77ff , #ff4444); position:absolute; z-index:1;}

.notificaton .list .noti_box .sort.coupon {box-shadow: inset 0 -1px 0 0px #44ccff, inset 0 0 0 1px #66ff88;  color:#66ff88; }
.notificaton .list .noti_box .sort.coupon:before, .notificaton .list .noti_box .sort.coupon:after {content:''; display:block; top:0.36rem; bottom:0.36rem; width:1px; background: linear-gradient(to bottom, #66ff88 , #44ccff); position:absolute; z-index:1;}

.notificaton .list .noti_box .sort.esports {box-shadow: inset 0 -1px 0 0px #0088ff, inset 0 0 0 1px #00ddff;  color:#00ddff; }
.notificaton .list .noti_box .sort.esports:before, .notificaton .list .noti_box .sort.esports:after {content:''; display:block; top:0.36rem; bottom:0.36rem; width:1px; background: linear-gradient(to bottom, #00ddff , #0088ff); position:absolute; z-index:1;}

.notificaton .list .noti_box .sort.event {box-shadow: inset 0 -1px 0 0px #77ff00, inset 0 0 0 1px #ffff00;  color:#ffff00; }
.notificaton .list .noti_box .sort.event:before, .notificaton .list .noti_box .sort.event:after {content:''; display:block; top:0.36rem; bottom:0.36rem; width:1px; background: linear-gradient(to bottom, #ffff00 , #77ff00); position:absolute; z-index:1;}

.notificaton .list .noti_box.open {background:#111c2a; border-color:#88ccff;}
.notificaton .list .noti_box.open .btn_open {background:rgba(136, 204, 255, 0.1);}
.notificaton .list .noti_box.open .btn_open:before {transform:translate(-50% , -50%) scaleY(-1);}
.notificaton .list .noti_box.open .text .txt {color:#88ccff;}

.notificaton .list .noti_box:hover {background:#000000;}
.notificaton .list .noti_box:hover .btn_open {background:none;}
.notificaton .list .noti_box:hover .btn_open:before {transform:translate(-50% , -50%) scaleY(-1);}
.notificaton .list .noti_box:hover .text .txt {color:#88ccff;}
.notificaton .btn_read {margin-top:4rem;}

/* initiation*/
.g_init .init_wrap .g_init_tab {border:none; background:rgba(255, 255, 255, 0.1); position:relative;}
.g_init .init_wrap .g_init_tab:before, .g_init .init_wrap .g_init_tab:after {content:''; display:block; position:absolute; left:0; right:0; height:1px; background:rgba(135, 207, 255, 0.5);}
.g_init .init_wrap .g_init_tab:before {top:0;}
.g_init .init_wrap .g_init_tab:after {bottom:0;}
.g_init .init_wrap .g_init_tab a.gi_tab {display:none;}
.g_init .init_wrap .g_init_tab a {height:100px; line-height:normal; display:flex; align-items:center; justify-content:center; position:relative;    flex-direction: column; font-size:16px; } 
.g_init .init_wrap .g_init_tab a:after {content:''; display:block; position:absolute; top:-2px; bottom:-2px; left:-2px; right:-2px; background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}
.g_init .init_wrap .g_init_tab li.active a {background:rgba(135, 207, 255, 0.4); box-shadow:inset 0 0 0 1px #98dbff;}
.init_wrap .g_init_tab a:before {content:''; display:block; width:26px; height:26px; background-repeat:no-repeat; background-position:center 0; margin:0 auto 1.2rem;}
.g_init .init_wrap .g_init_tab li.active a , .g_init .init_wrap .g_init_tab li:hover a { font-size:16px;  color:#fff; text-shadow:0 0.2rem 0 rgba(0, 0, 0, 0.3); background:rgba(135, 207, 255, 0.5);}
.g_init .init_wrap .g_init_tab li.active a:before , .g_init .init_wrap .g_init_tab li:hover a:before {background-position:center -26px !important; background:none; background-repeat:no-repeat; position:static; content:''; display:block; width:26px; height:26px;}
.g_init .init_wrap .g_init_tab li.active a:after, .g_init .init_wrap .g_init_tab li:hover a:after {height:auto; content:''; display:block; position:absolute; top:-3px; bottom:-3px; left:-2px; right:-2px; background:url('../../images/common/account/dot_r.jpg') 0 0 no-repeat, url('../../images/common/account/dot_r.jpg') 0 bottom no-repeat, url('../../images/common/account/dot_r.jpg') right 0 no-repeat, url('../../images/common/account/dot_r.jpg') right bottom no-repeat;}


.init_wrap .g_init_tab .no01 a:before {background-image:url('../../images/common/game/icon_init01.png') !important;}
.init_wrap .g_init_tab .no02 a:before {background-image:url('../../images/common/game/icon_init02.png') !important;}
.init_wrap .g_init_tab .no03 a:before {background-image:url('../../images/common/game/icon_init03.png') !important;}
.init_wrap .g_init_tab .no04 a:before {background-image:url('../../images/common/game/icon_init04.png') !important;}
.pb_sub .pb_sub_con .init_wrap .inner {max-width:none; padding-left:10rem; padding-right:10rem;}
.init_wrap .init_box {margin-top:4.5rem; display:none;}
.init_wrap .init_box:first-child {display:block;}
.init_wrap .init_box > ul {font-size:0; margin-left:-4.5rem;     display: flex; align-items: stretch; flex-wrap: wrap;}
.init_wrap .init_box > ul > li {display:inline-flex; padding-left:4.5rem; width:calc(100% / 3); margin-bottom:4.5rem;}
.init_wrap .init_box .con {z-index:1; padding:4rem 5rem; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); position:relative;}
.init_wrap .init_box .con:before {z-index:-1; content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:url('../../images/common/icon_lt.png') 0 0 no-repeat, url('../../images/common/icon_rb.png') right bottom no-repeat;}
.init_wrap .init_box .tit {text-align:center;}
.init_wrap .init_box .tit span {display:inline-block; text-transform:uppercase; font-size:18px; color:#ffffff; font-weight:700; padding:0.6rem 0.6rem 0.4rem; border-top:1px solid #ff0000; border-bottom:1px solid #ff0000;}
.init_wrap .init_box .img {margin:3rem auto 2.4rem; text-align:center;}
.init_wrap .init_box .txt {font-family:'Roboto'; font-size:14px; color:#ffffff; line-height:1.57; word-break:break-word;}
.init_wrap .init_box .txt font {color:#6affda;}
.init_wrap .init_box .txt .in_txt li {margin-bottom:1rem; position:relative; padding-left:2.6rem; font-family:'Roboto'; font-size:14px; color:#ffffff; line-height:1.5;}
.init_wrap .init_box .txt .in_txt li:last-child {margin-bottom:0;}
.init_wrap .init_box .txt .in_txt li span {width:18px; height:18px; line-height:19px; text-align:center; position:absolute; top:1px; left:0; font-size:11px; color:#000000; border-radius:50%; background:#53ffd4; font-weight:700;}
.init_wrap .init_box .txt .in_txt02 li { font-family:'Roboto'; font-size:14px; color:#ffffff; line-height:1.5; word-break:break-word;   padding-left: 15px; text-indent: -15px;}
.init_wrap .init_box .txt .in_txt02 li span {background:none; position:static; font-size:14px; color:#87cfff; font-weight:400;}
.init_wrap .init_box .txt .in_tit {color:#7bbfed; font-size:16px; font-weight:700; text-transform:uppercase; margin-bottom:1.2rem;}
.init_wrap .init_box .txt .s_txt {font-size:12px; color:#b2b2b2; margin-top:1rem;}
.init_wrap .init_box .txt a {display:inline-block; color:#6affda; padding:0.2rem 0.6rem 0.1rem; border:1px solid #6affda; border-radius:2px; line-height:1; margin:0 0.5rem;}
.init_wrap .init_box .txt span.round {display:inline-block; color:#6affda; padding:0.2rem 0.6rem 0.1rem; border:1px solid #6affda; border-radius:2px; line-height:1; margin:0 0.5rem;}

@media screen and (min-width: 2401px) {
.pb_sub > div {background-size:cover;}	
}

@media screen and (min-width: 1921px) {
.profile_wrap .info_user2 .dot, .profile_wrap .info_user3 .eff, .profile_wrap .info_user4 .line, .profile_wrap .info_user6 .light  {width:100%;}
.profile_wrap .info_user6 .light {top:50% !important; transform:translate(-50%, -50%) !important;}
.profile_wrap .info_user5 .flag {width:100%;}
.pb_sub .pb_noti {background-size:100% auto;}
}

@media screen and (max-width: 1921px) {
.nw_wrap .nw_all .inner {max-width:1635px;}
.nw_wrap .nw_all .list li {width:20%;}
}	

@media screen and (max-width: 1800px) {
/* game */	
.g_intro .g_intro_half .con {padding:0 2.5rem; word-break:keep-all;}	
.g_intro .g_intro_half .con .dstc {vertical-align:middle;}
.g_intro .g_intro_half .con br {display:none;}
.g_intro .list {display:flex;}

/* game */
.guide_wrap .list {margin-left:-3.6rem;}
.guide_wrap .list > li {padding-left:3.6rem;}

/* news */
.nw_wrap .list {margin-left:-2rem;}
.nw_wrap .list li {padding-left:2rem;}

/* media */
.nmedia_wrap .nm_list > li {width:25%;}

/* initiation*/
.pb_sub .pb_sub_con .init_wrap .inner {padding-left:2.5rem; padding-right:2.5rem;}
}

@media screen and (max-width: 1600px) {
.profile_wrap .info_ratio .weapon .title {width: 132px; padding: 0 36px;}
.profile_wrap .info_ratio .weapon .list {width: calc(100% - 132px);}

/* news */
.nw_wrap .nw_all .list li {width:25%; margin-bottom:2rem;}

/* media */
.nmedia_wrap .nm_list > li {width:calc(100% / 3);}
}

@media screen and (max-width: 1480px) {
/* game */	
.g_app .list {margin-left:-2.5rem;}	
.g_app .list li {padding-left:2.5rem;}	

/* news */
.nw_wrap .btn_nw_l {left:0; background-image: url(../../images/common/arr_b_r.png);}
.nw_wrap .btn_nw_r {right:0; background-image: url(../../images/common/arr_b_l.png);}
.nw_wrap .btn_nw_arr {width:8rem; height:8rem;  background-color:rgba(0, 0, 0, 0.5); background-position: center center;}
.nw_wrap .btn_nw_arr:hover, .nw_wrap .btn_nw_arr.slick-hidden:hover { background-position: center center;}
.nw_wrap .nw_view .nw_v_tit .date {right:2.5rem;}
.nw_wrap .nw_view .nw_v_tit .label {left:2.5rem;}


/* initiation*/
.init_wrap .init_box > ul {margin-left:-2.5rem;}
.init_wrap .init_box > ul > li {padding-left:2.5rem;}

}	

@media screen and (max-width: 1280px) {
.pb_sub > div {padding-top:9.6rem;}	
	
/* game */
.g_intro .g_intro_half {padding-right:0;}	
.g_intro .g_intro_half:nth-child(2n-1) {padding-left:0;}
.g_intro .g_intro_half .con {position:relative; width:auto; padding:4rem 2.5rem;}
.g_intro .g_intro_half:nth-child(2n-1) .con {text-align:left;}
.g_intro .g_intro_half:nth-child(2n-1) .dst {width:100%;}
.g_intro .con:before {display:none; }
.g_intro .g_intro01:before, .g_intro .g_intro01:after {display:none;}
.g_intro .g_intro06 .inner:before, .g_intro .g_intro06 .inner:after {display:none;}
.g_intro .g_intro_half .con br {display:block;}
.g_app .list li {width:50%;}
.g_app .g_app_top {margin-bottom:4rem;}
.g_app .g_app_top > div {display:block; text-align:center;}
.g_app .g_app_top .img {margin:4rem 0 0;}
.g_app .g_app_top .left, .g_app .g_app_top .right {margin:0; text-align:center; word-break:keep-all;}
.g_app .g_app_top .right br {display:none;}
.g_app .g_app_top .left .tit {display:none;}
.g_act .g_act_con {max-width:none; margin:0 2.5rem; padding:5rem;}
.g_init .step04 .init_con .box_init {text-align:center; }
.g_init .step04 .init_con .box_init .desc {display:block; text-align:left; width:auto; margin-top:3rem; padding:0;}
.pb_sub .pb_sub_con .guide_wrap .inner {padding-left:2.5rem; padding-right:2.5rem;}

/* ranking */
.nrank_wrap .nrank_top {margin:0 2.5rem 5rem;}
.nrank_wrap .nrank_top .inner:before {left:0;}
.nrank_wrap .nrank_top .inner:after {right:0;}
.nrank_wrap .nrk_b .new_search_wrap {position:relative; bottom:auto; right:auto; max-width:400px; width:auto; margin:5rem auto 0;}
.nsb_depth2.wide {padding-left:2.5rem; padding-right:2.5rem;}
.nrank_wrap .nrank_top.my_rank .inner:before {left:2.5rem;}
.nrank_wrap .nrank_top.my_rank .inner:after {right:2.5rem;}

/* profile */
.profile_wrap .info_user .attend {width: 48px; height: 48px; padding: 0; font-size: 0; border-radius: 9px; top: 36px; transform: none;}
.profile_wrap .info_user .attend span {display: none;}
.profile_wrap .info_user .attend img {margin-left: -14px; left: 50%;}
.profile_wrap .info_user .attend:before, .profile_wrap .info_user .attend:after {display: none;}

.profile_wrap .info_ratio .battle .match > div {width: calc((100% - 48px) / 2);}
.profile_wrap .info_ratio .weapon .title {width: 108px; font-size: 1.45rem; line-height: 2rem;}
.profile_wrap .info_ratio .weapon .list {width: calc(100% - 108px);}
.profile_wrap .info_ratio .weapon .list li {padding-left: 1.8rem; padding-right: 1.8rem;}
.profile_wrap .info_ratio .weapon .list li h4 {font-size: 1.45rem;}
.profile_wrap .info_ratio .weapon .list .graph {max-width: 108px;}
.profile_wrap .info_ratio .weapon .list .value {margin-top: 6px;}
.profile_wrap .members .inner > div {width: calc((100% - 48px) / 2);}

.profile_wrap .info_user1 .bullet01 {top:80px; right:8%; animation-delay:0.3s;}
.profile_wrap .info_user1 .bullet02 {top:120px; right:3%; animation-delay:0.4s;}
.profile_wrap .info_user1 .bullet03 {top:250px; right:14%; animation-delay:0.5s;}
.profile_wrap .info_user .my_level {width: 48px; height: 48px; border-radius: 9px; top: 36px; transform: translate(0, 0);}

/* elua */
.elua_wrap {padding-right:2.5rem; padding-left:2.5rem;}
.elua_wrap .elua_box {padding:5rem 2.5rem;}

/* voucher */
.resel_area .epin_list > li {width:25%;}

/* error */
.error_wrap .motion {padding-left:0; padding-right:0; display:block;}


/* initiation*/
.init_wrap .init_box > ul > li {width:50%;}


}
	
@media screen and (min-width: 1024px) {
.pb_sub .pb_top .sub_depth2 ul {display:block !important;}
.nsb_depth2 ul {display:flex !important;}
.g_act .tip01 {display:block; top:-106px !important; left:78px !important;}
.g_init .g_init_tab ul {display:block !important;}
}

@media screen and (max-width: 1023px) {
.pb_sub > div {padding-top:96px;}	
.pb_sub .pb_top .sub_depth2 {text-align:center; font-size:0; margin:2rem auto 0; position:relative; max-width:306px;}	
.pb_sub .pb_top .sub_depth2 .sub_depth2_tab {position:relative; width:100%;; height:46px; line-height:46px; padding-left:2.4rem; text-transform:uppercase; display:inline-block; font-size:14px; color:#fff; text-align:left; border:1px solid rgba(255, 0, 0, 0.4); background:rgba(0, 0, 0, 0.4);}	
.pb_sub .pb_top .sub_depth2 .sub_depth2_tab:before, .pb_sub .pb_top .sub_depth2 .sub_depth2_tab:after {content:''; display:block; position:absolute;}
.pb_sub .pb_top .sub_depth2 .sub_depth2_tab:before {top:0; bottom:0; left:0; right:0; background:url('../../images/common/icon_lt.png') 0 0 no-repeat, url('../../images/common/icon_rb.png') right bottom no-repeat;}
.pb_sub .pb_top .sub_depth2 .sub_depth2_tab:after {width:46px; top:-1px; bottom:-1px; right:0; border:1px solid rgba(255, 0, 0, 0.4); background:url('../../images/common/sub/sub_depth2_arr.png') center center no-repeat;}
.pb_sub .pb_top .sub_depth2 ul {display:none; position:absolute; left:0; right:0; background:rgba(0, 0, 0, 0.9); padding:1.5rem 0; z-index:1;}
.pb_sub .pb_top .sub_depth2 li {padding:0; display:block; padding:1.5rem 2.4rem; text-align:left;}
.pb_sub .pb_top .sub_depth2 li:before {display:none;}

/* game */
.g_act .g_act_top {margin:0 2.5rem 5rem; border:1px solid #689aff;}
.g_act .g_act_top .inner {background:none;}
.g_act .g_act_top .tit span {display:block; margin-right:0; margin-bottom:4px;}
.g_act .g_act_top .tit span:before {display:none;}
.g_act .g_act_top .tit span font {font-size:34px;}
.g_act .tip00 {top:50%; left:50%; transform:translate(-50% , -50%); position:fixed;}
.g_act:before {content:''; display:block; position:absolute; width:24px; height:31px; background:url('../../images/common/arr_b_l.png') 0 0 no-repeat; background-size:24px auto; left:auto; top:64%; right:1.2rem; z-index:1; transform:translate(0 , -50%);}
.g_act .g_act_con:before, .g_act .g_act_con:after {display:none;}
.g_start .g_start_list {margin-left:0;}
.g_start .g_start_list > li {display:block; width:100%; padding:0;}
.g_start .g_start_list .con .box {height:auto !important;}
.g_start .g_start_list .con .thum {text-align:center;}
.guide_wrap .pop-up .pop-layout .pop-con {padding-top:2px;}

.g_down .clr > div {float:none; width:100%;}
.g_down .g_client {margin-bottom:4rem;}
.g_down .g_client .box {height:auto !important;}
.g_init .g_init_tab {border:none; margin-bottom:3rem;}
.g_init .g_init_tab.fix {position:static;}
.g_init .g_init_tab .gi_tab:before, .g_init .g_init_tab .gi_tab:after {content:''; display:block; position:absolute;}
.g_init .g_init_tab .gi_tab:before {top:0; bottom:0; left:0; right:0; background:url('../../images/common/icon_lt.png') 0 0 no-repeat, url('../../images/common/icon_rb.png') right bottom no-repeat;}
.g_init .g_init_tab .gi_tab:after {width:46px; top:-1px; bottom:-1px; right:0; border:1px solid rgba(255, 0, 0, 0.4); background:url('../../images/common/sub/sub_depth2_arr.png') center center no-repeat;}

.g_init .g_init_tab .gi_tab {display:block; position:relative; width:100%;; height:46px; line-height:46px; padding-left:2.4rem; text-transform:uppercase; font-size:16px; color:#fff; text-align:left; border:1px solid rgba(255, 0, 0, 0.4); background:rgba(0, 0, 0, 0.4); }
.g_init .g_init_tab a {font-weight:400;}
.g_init .g_init_tab ul {display:none; position:absolute; left:2.5rem; right:2.5rem; background:rgba(0, 0, 0, 0.9); padding:1.5rem 0; z-index:11;}
.g_init .g_init_tab ul li.active a:before, .g_init .g_init_tab ul li:hover a:before {display:none;}
.g_init .g_init_tab ul li.active a:before, .g_init .g_init_tab ul li.active a:after, .g_init .g_init_tab ul li:hover a:before, .g_init .g_init_tab ul li:hover a:after {display:none;}
.g_init .g_init_tab ul li {padding:0; display:block; padding:1.5rem 2.4rem; text-align:left; width:100%;}
.g_init .g_init_tab ul li:before {display:none;}
.g_init .g_init_tab ul li a {border:none; height:auto; line-height:normal; text-align:left; color:#fff; font-weight:400;}
.g_init .g_init_tab ul li.active a, .g_init .g_init_tab ul li:hover a {border:none; font-size:16px; color:#ffdd00; background:none; }
.g_init .step {margin-top:0; margin-bottom:3rem; padding-left:0; }
.g_init .step .init_tit {background: rgba(135, 207, 255, 1) url(../../images/common/game/bg_ptn_down.png) 0 0 repeat; position:static; font-size:16px; width:100%;  font-weight:700; text-transform:uppercase; color:#1c3c5e; padding:0.8rem 2.4rem;}
.g_init .step .init_tit i {vertical-align:middle; margin-right:2rem; background-position:0 -34px;}
.g_init .step03 .init_tit i {background-position:0 -33px;}


.guide_wrap .list > li {width:50%;}

/* news */
.nw_wrap .nw_all .nsb_depth2:before, .nw_wrap .nw_all .nsb_depth2:after {display:none;}
.nsb_depth2 .nw_tab {display:block; }	
.nsb_depth2 .nw_tab:before, .nsb_depth2 .nw_tab:after {content:''; display:block; position:absolute;}
.nsb_depth2 .nw_tab:before {top:0; bottom:0; left:0; right:0; background:url('../../images/common/icon_lt.png') 0 0 no-repeat, url('../../images/common/icon_rb.png') right bottom no-repeat;}
.nsb_depth2 .nw_tab:after {width:46px; top:-1px; bottom:-1px; right:0; border:1px solid rgba(255, 0, 0, 0.4); background:url('../../images/common/sub/sub_depth2_arr.png') center center no-repeat;}
.nsb_depth2 a {font-weight:400;}
.nsb_depth2 ul {display:none; position:absolute; left:0; right:0; background:rgba(0, 0, 0, 0.9); padding:1.5rem 0; z-index:11;}
.nrank_wrap .rk_depth2 {margin-left:2.5rem; margin-right:2.5rem;}
.nrank_wrap .rk_depth2 ul {display:none; position:absolute; left:0; right:0; background:rgba(0, 0, 0, 0.9); padding:1.5rem 0; z-index:11; left:0; right:0;}
.nsb_depth2 ul li {padding:0; display:block; padding:1.5rem 2.4rem; text-align:left; width:100%;}
.nsb_depth2 ul li:before {display:none;}
.nsb_depth2 ul li a {border:none; height:auto; line-height:normal; text-align:left; color:#fff;}
.nsb_depth2 ul li.on a, .nsb_depth2 ul li a:hover {border:none !important; font-size:16px; color:#ffdd00; background:none;}
.nw_wrap .list {margin-left:0;}
.nw_wrap .list li {width:100%; padding-left:0;}
.nw_wrap .nw_all .list li {width:100%;}
.nw_wrap .nw_view .nw_v_tit  {padding:3rem 0;}
.nw_wrap .nw_view .nw_v_tit .label, .nw_wrap .nw_view .nw_v_tit .date {position:static; transform:none;}
.nw_wrap .nw_view .nw_v_tit .tit {padding:0; margin:2rem 0;}
.nw_wrap .nw_view .nw_paging {background:none; border:none;}
.nw_wrap .nw_view .nw_paging ul li {padding:0;}
.nw_wrap .nw_view .nw_paging ul li a {width:5rem; height:5rem; padding:0; max-width:none; font-size:0;  background: rgba(135, 207, 255, 0.1);  border-top: 1px solid #87cfff; border-bottom: 1px solid #87cfff;}
.nw_wrap .nw_view .nw_paging ul li a:before {transform:translate(-50% , -50%); left:50%; right:auto;}
.nw_wrap .nw_view .nw_paging ul li.left a:before {left:50%;}

.nw_wrap .list .con {font-size:0; height:22.4rem;}
.nw_wrap .list .thum_img {width:22.4rem; display:inline-block; vertical-align:top; height:100%;}
.nw_wrap .list .desc {position:relative; bottom:auto; right:auto; left:auto; width:calc(100% - 22.4rem); display:inline-block; vertical-align:top;  height:100%;}
.nw_wrap .list .desc .label {position:static; transform:none;}
.nw_wrap .list .desc .tit {margin:1.5rem 0; height:auto; max-height:34px;}
.nw_wrap .list .con:hover .desc .tit {margin-left:0; margin-right:0;}
.nw_wrap .list .con:hover .desc .txt {margin-left:0; margin-right:0;}
.nw_wrap .list .con:hover .desc .date {margin-left:0; margin-right:0;}
.nw_wrap .list .con:hover .desc:after {right:0;}
.nw_wrap .list .con:hover .desc {height:100%; left:auto; right:auto;} 
.nw_wrap .list .con:before, .nw_wrap .list .con:after, .nw_wrap .list .desc:before, .nw_wrap .list .thum_img:before {display:none;}
.nw_wrap .btn_nw_arr {display:inline-block;}
.nw_wrap .list .con:hover .desc .label {margin:0;}



/* ranking */
.nrank_wrap .rk_depth2:before, .nrank_wrap .rk_depth2:after {display:none;}
.nsb_depth2.wide:before, .nsb_depth2.wide:after {display:none;}
.nrank_wrap .nrank_table02 .r_tr img.bg, .nrank_wrap .nrank_table02 .r_tr img.logo {left:0;}

/* media */
.nmedia_wrap .nm_list > li {width:50%;}

/* faq */
.nfaq_wrap .fq_depth2:before, .nfaq_wrap .fq_depth2:after {display:none;}
.nfaq_wrap .fq_depth2 ul {left:2.5rem; right:2.5rem;}
.nsb_depth2 a .num {position:relative; top:-2px; margin-left:1rem;}
.nfaq_wrap .nfaq_top {margin:0 2.5rem 3rem;}
.nfaq_wrap .nfaq_top .inner:before {left:0;}
.nfaq_wrap .nfaq_top .inner:after {right:0;}
.nfaq_wrap .nfaq_top .info .go_ticket {top:0; margin-left:0;}
.nfaq_wrap .nfaq_top .info > div {display:block; margin:0 auto 5px;}

/* profile */
.profile_wrap .inner {padding: 96px 24px;}
.profile_wrap .info_user .inner {padding-bottom: 120px;}
.profile_wrap .info_user .rank {width: calc(100% - 48px); left: 24px;}
.profile_wrap .info_ratio .battle .title p {margin-bottom: 49px;}
.profile_wrap .info_ratio .battle .match .stat {padding-left: 48px; padding-right: 48px;}
.profile_wrap .info_ratio .battle .match .stat li h4, .profile_wrap .info_ratio .battle .match .stat li p {height: 48px;}
.profile_wrap .info_ratio .battle .match .stat li p {font-size: 1.8rem;}
.profile_wrap .info_ratio .battle .match .ratio .graph li .progress {height: 140px;}
.profile_wrap .info_ratio .battle .match .ratio .graph li h5 {top: 152px;}
.profile_wrap .info_ratio .battle .skill .stat li {padding-top: 114px; background-size: 120px;}
.profile_wrap .info_ratio .battle .skill .ratio {margin-top: 31px; padding: 0 96px;}
.profile_wrap .info_ratio .weapon .list ul li > h4 {font-size: 1.45rem; line-height: 7rem;}
.profile_wrap .info_ratio .weapon .list ul li .ratio {font-size: 2.8rem;}
.profile_wrap .members .title {height: 70px; background-size: 96px;}
.profile_wrap .members .title .tit {width: calc((100% - 140px) / 2);}
.profile_wrap .members .list {max-height: 472px;}
.profile_wrap .members .clan .title {background-size: 96px;}
.profile_wrap .members .clan .title .tit {width: calc((100% - 104px) / 2);}

/* rank */
.nrank_wrap .r_tr {height:auto; background:none !important; margin-bottom:3rem;}
.nrank_wrap .r_tr .rank {border-top:1px solid rgba(136, 136, 136, 0.4);}
.nrank_wrap .r_tr .ml {float:none; width:100%; height:48px;   position:relative;  background: rgba(136, 136, 136, 0.1);}
.nrank_wrap .r_tr .ml:before, .nrank_wrap .r_tr .ml:after {content:''; display:block; width:4px; height:2px; top:-2px; position:absolute; background:#999999;}
.nrank_wrap .r_tr .ml:before {left:0;}
.nrank_wrap .r_tr .ml:after {right:0;}
.nrank_wrap .r_tr .name {/* padding-left:0; */ width:calc(100% - 100px); border:none; padding-top:2.4rem;}
.nrank_wrap .r_tr .win {border:none; background-color: rgba(255,255,255,0.1); }
.nrank_wrap .r_tr.no01 .ml {background: rgba(255, 255, 0, 0.1);}
.nrank_wrap .r_tr.no02 .ml, .nrank_wrap .r_tr.no03 .ml {background: rgba(0, 255, 204, 0.1);}
.nrank_wrap .r_tr .rank .txt {padding-right:25px; position:relative;}
.nrank_wrap .r_tr .rank img {margin-right:0; position:absolute; top:50%; right:0; transform:translate(0 , -50%);}
.nrank_wrap .r_tr.no01 .ml:before, .nrank_wrap .r_tr.no01 .ml:after {background:#ffff00;}
.nrank_wrap .r_tr.no02 .ml:before, .nrank_wrap .r_tr.no02 .ml:after, .nrank_wrap .r_tr.no03 .ml:before, .nrank_wrap .r_tr.no03 .ml:after {background:#00ffcc;}
.nrank_wrap .r_tr:before, .nrank_wrap .r_tr:after {bottom:auto; width:auto; height:12px; content: ''; position: absolute; display: none; left:-7px; right:-7px; }
.nrank_wrap .r_tr:before {top: -7px;}
.nrank_wrap .r_tr:after {bottom: -7px;}
.nrank_wrap .r_tr.no01:before, .nrank_wrap .r_tr.no01:after {display: block; background: url(../../images/common/clan/bg_plus01.png) 0 0 no-repeat,  url(../../images/common/clan/bg_plus01.png) right 0 no-repeat;}
.nrank_wrap .r_tr.no02:before, .nrank_wrap .r_tr.no02:after, .nrank_wrap .r_tr.no03:before, .nrank_wrap .r_tr.no03:after {display: block; background: url(../../images/common/clan/bg_plus02.png) 0 0 no-repeat, url(../../images/common/clan/bg_plus02.png) right 0 no-repeat;}
.nrank_wrap .nk_my .r_tr .ml:before, .nrank_wrap .nk_my .r_tr .ml:after {background:rgba(135, 207, 255, 0.5);}
.nrank_wrap .nrank_table02 .r_tr .ml {width:100%; border-right: 0;}
.nrank_wrap .nrank_table02 .r_tr .exp {border-bottom:1px solid rgba(255, 221, 0, 0.2);}
.nrank_wrap .nrank_table02 .r_tr .name {width:100%; padding:1.8rem 2.4rem 4.8rem; text-align:center; border-bottom: 1px solid rgba(136, 136, 136, 0.4); background: url(../../images/common/clan/ptn04.png) 0 0 repeat;}
.nrank_wrap .nrank_table02 .r_tr .win {position:absolute; top:0; left:0; height:96px;}
.nrank_wrap .nrank_table02 .r_tr .logo {position:relative; top:auto; left:auto; margin:0 auto -2rem;}
.nrank_wrap .nrank_table02 .r_tr .name .rank img {position:relative; right:auto; top:auto; transform:none; margin-right:5px;}
.nrank_wrap .nrank_table02 .r_tr .win .state {position:static; text-align:center; margin-top:-1.2rem !important; background-position:center center;}
.nrank_wrap .nrank_table02 .r_tr.no01 .name {    background: url(../../images/common/clan/ptn02.png) 0 0 repeat;}
.nrank_wrap .nrank_table02 .r_tr.no02 .name, .nrank_wrap .nrank_table02 .r_tr.no03 .name {    background: url(../../images/common/clan/ptn03.png) 0 0 repeat;}
.nrank_wrap .nrank_table03 .r_tr .ml {height:48px; border-top: 1px solid rgba(255, 255, 0, 0.2);}
.nrank_wrap .nk_my .r_tr .name {background: rgba(136, 136, 136, 0.1);}
.nrank_wrap .nk_my .r_tr .name a {padding:0; position:static;}
.nrank_wrap .nk_my .r_tr .name a:after {top:2.4rem; right:2.4rem; transform:none;}
.nrank_wrap .nrank_table02 .r_tr .win {background: url(../../images/common/clan/bg_rank_normal.png) center center no-repeat; background-size: 48px auto;}

.nrank_wrap .nrank_top.my_rank {margin-right:0; margin-left:0;}
.nrank_wrap .nrank_top.my_rank .inner {padding-top:2.5rem; padding-bottom:2.5rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .ml {background:none; border-top: 1px solid rgba(135, 207, 255, 0.5);}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .win {font-size: 0; position:absolute; top:1.5rem; right:3rem; width: auto; height: auto; padding: 0; background: none; border-right: 0;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .win img {display:none;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .name {padding:8rem 3rem 4rem; border-right:0; width:100%; text-align:center;}
.nrank_wrap .nrank_top.my_rank .inner:before {top:2.5rem;}
.nrank_wrap .nrank_top.my_rank .inner:after {bottom:2.5rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .name .num {text-align:left; position:absolute; top:0; left:3rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .name .num .state {display:block; margin-left:0;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .rank {border-bottom:none;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .win span {line-height:16px;}

.nrank_wrap .nk_my .r_tr .win {position:static; height:auto; background:none; width:100%;}
.nrank_wrap .nk_my .r_tr .logo {transform:scale(0.5);}
.nrank_wrap .nk_my .nrank_table .r_tr .name {position:static; background:none;}
.nrank_wrap .nk_my .nrank_table .r_tr .name .num {position:absolute; top:2.4rem; left:2.4rem; margin-top:0;}
.nrank_wrap .nk_my .nrank_table .r_tr .name .num .state {display:block; margin-left:0; margin-top:1rem; text-align: left;}
.nrank_wrap .nk_my .r_tr > div {background:none !important;}

/* 장성 계급 추가 */
.nrank_wrap .r_tr .rank .rank_img {margin-right:0; position:absolute; top:50%; right:0; transform:translate(0 , -50%); margin-right:0;}
.nrank_wrap .r_tr .rank .rank_img img {position:static; transform:none;}
.nrank_wrap .r_tr.general .rank .rank_img {margin-right:0;}
.nrank_wrap .r_tr.general .rank .rank_img:before {z-index:-1; margin-top:-16px;}
.nrank_wrap .r_tr.general .rank .txt {padding-right:38px;}
.nrank_wrap .r_tr.general .rank .txt:before {left:-9rem; right:-3rem;}

/* elua */
.elua_wrap .nsb_depth2:after {display:none;}

/* voucher */
.resel_area .resel_t table {display:block;}
.resel_area .resel_t table tbody {display:block;}
.resel_area .resel_t table tr {display:block; font-size:0; overflow:hidden;}
.resel_area .resel_t th, .resel_area .resel_t td {display:inline-block; width:50%; float:left; padding:0 2rem; line-height:35px; border:none; position:relative;}
.resel_area .resel_t th:before, .resel_area .resel_t td:before {content:''; display:block; position:absolute; bottom:0; left:0; right:0; height:1px; background:#000;}
.resel_area .resel_t th:after, .resel_area .resel_t td:after {content:''; display:block; position:absolute; bottom:0; top:0; right:0; width:1px; background:#000;}
.resel_area .resel_t th:first-child {display:block; width:100%;}
.resel_area .resel_t td.t01 {display:none;}
.resel_area .resel_t td.t02 {display:block; width:100%; background:rgba(255, 255, 255, 0.5); color:#fff; text-align:left;}
.resel_area .resel_t td.c02, .resel_area .resel_t td.c03 {background:#fff;}
.resel_area .resel_t td.ro02 {line-height:70px;}
.resel_area .resel_t td.ro03 {line-height:105px;}
.resel_area .epin_list > li {width:calc(100% / 3);}
.resel_wrap .nsb_depth2 ul {left:2.5rem; right:2.5rem;}

/* error */
.error_wrap .motion .left, .error_wrap .motion .right {display:none;}

/**/
.top_info {margin:0 2.5rem 5rem;}
.top_info .inner:before {left:0;}
.top_info .inner:after {right:0;}

/* mypage */
.ticket_wrap .tl li .con {height:auto; text-align:left; padding:3rem; background:rgba(17, 42, 68, 0.5); line-height:normal;}
.ticket_wrap .tl li .con > div {display:block; width:100%; height:auto; background:none;}
.ticket_wrap .tl .num {display:none !important;}
.ticket_wrap .tl .tit {padding:0;}
.ticket_wrap .state {position:absolute; right:5px; top:1.5rem; width:auto !important;}
.ticket_wrap .state.new:before {text-align:center; top:-1rem;}
.ticket_wrap .state span {width:120px; text-align:center;}
.ticket_wrap .tl .tit {margin:3rem 0 2rem;}
.ticket_wrap .tl .tit a {line-height:1.6;}
.ticket_wrap .tl .tit span {line-height:1.6;}
.ticket_wrap .tl .sort:before {display:none;}
.top_info .ticket_con {text-align:center;}
.top_info .ticket_con .btn_line_y {transform:none; margin:2rem auto 0; position:relative; top:auto; right:auto;}
.ticket_wrap .tv .tv_top {margin:0 2.5rem; padding-bottom:0;}
.ticket_wrap .tv .tv_top .inner {padding-right:4rem; padding-left:4rem;}
.ticket_wrap .tv .tv_top .sort {display:block; width:100%; margin-bottom:2rem;}
.ticket_wrap .tv .tv_top .sort:before {display:none;}
.ticket_wrap .tv .tv_top .tit {padding:0; display:block; width:100%; line-height: normal;}
.ticket_wrap .tv .tv_top .state {display:block; width:100%; margin:4rem -4rem 0; border:none; position:static; transform:none;}
.ticket_wrap .tv .tv_top .state span {width:100%; border-radius: 0;  }
.ticket_wrap .tv .tv_top.wait .state span {background: #689aff; color:#fff; }
.ticket_wrap .tv .tv_top.answered .state span {background: #ff7510; color:#fff;}
.ticket_wrap .tv .tv_top.closed .state span {background: #777777; color:#fff;}
.ticket_wrap .tv .tv_top.complain .state span {background: #ff0000; color:#fff;}
.ticket_wrap .tv .tv_top .state span:before, .ticket_wrap .tv .tv_top .state span:after { background:none; }
.ticket_wrap .tv .tv_top .state span {width:100%; border-radius: 0; }
.ticket_wrap .state span:before {top:-1px;}
.ticket_wrap .state span:after {bottom:-1px;}
.ticket_wrap .tv .comment {padding:5rem;}
.ticket_wrap .tv .comment .tit {padding-left:3rem;}
.ticket_wrap .tv .comment .tit:before {left:0;}
.ticket_wrap .tv .comment .cm_area textarea {display:block; width:100%; margin-right:0;}
.ticket_wrap .tv .comment .cm_area:before, .ticket_wrap .tv .comment .cm_area:after {right:0;}
.ticket_wrap .tv .comment .cm_area:after {bottom:auto; top:97px;}
.ticket_wrap .tv .comment .btn_submit {width:180px; height:60px; line-height:60px; margin:2rem auto 0; display:block;}
.ticket_wrap .tv .reply {padding:5rem;}
.ticket_wrap .tv .reply .writer {padding-left:3rem;}
.ticket_wrap .tv .reply .writer:before {left:0;}
.my_wrap .my_form:before, .my_wrap .my_form:after { display:none;}

.esports_wrap .tl .title {display:none;}
.esports_wrap .tl .info {position:absolute; top:3rem; right:3rem; width:auto !important;}
.esports_wrap .tl .sort:before {display:none;}
.esports_wrap .tl .period:before {display:block; text-transform:uppercase; color:#689aff; font-weight:700; margin-bottom: 0.3rem;}
.esports_wrap .tl .regi:before {content:'REGISTRATION PERIOD';}
.esports_wrap .tl .match:before {content:'PERIOD MATCHES';}
.esports_wrap .tl .regi {margin-bottom:2rem;}

/************ client_view ****************/
.client_veiw .nw_wrap .nw_view .nw_v_tit {padding:0 2.5rem;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .tit {margin:0 0 2rem;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .label {position:absolute;}

/* notification */
.notificaton .list .noti_box {padding:2rem 10rem 2rem 3rem;}
.notificaton .list .noti_box .sort {position:absolute; top:2rem; left:3rem; margin-right:0; height:24px; line-height:24px; border-radius:4px;}
.notificaton .list .noti_box .text .time span { height:24px; line-height:24px;}
.notificaton .list .noti_box:after {display:none;}
.notificaton .list .noti_box .text {display:block; max-width: none; position:relative;}
.notificaton .list .noti_box .text .time {padding-bottom:2rem; border-bottom:1px solid rgba(136, 204, 255, 0.5); margin-bottom:2rem; padding-left:74px; padding-right:5rem;}
.notificaton .list .noti_box .btn_close {top:-0.8rem; margin-top:0; right:0;}
.notificaton .tab_area li a { pointer-events: none;}

/* initiation*/
.g_init .init_wrap .g_init_tab {display:block; background:none;}
.g_init .init_wrap .g_init_tab a.gi_tab {display:block; height:46px; line-height:46px;}
.g_init .init_wrap .g_init_tab a:after {display:none;}
.g_init .init_wrap .g_init_tab:before, .g_init .init_wrap .g_init_tab:after {display:none;}
.g_init .init_wrap .g_init_tab .gi_tab:before {width:auto; height:auto; margin:0;}
.g_init .init_wrap .g_init_tab a.gi_tab:after {width: 46px; top: -1px; left:auto; bottom: -1px;  right: 0;  border: 1px solid rgba(255, 0, 0, 0.4); background: url('../../images/common/sub/sub_depth2_arr.png') center center no-repeat; content: '';  display: block;   position: absolute;}
.g_init .init_wrap .g_init_tab a {display:block; height:auto;}
.init_wrap .g_init_tab a:before {display:none;}
.g_init .init_wrap .g_init_tab li.active a:before, .g_init .init_wrap .g_init_tab li:hover a:before {display:none;}
.g_init .init_wrap .g_init_tab li.active a:after, .g_init .init_wrap .g_init_tab li:hover a:after {display:none;}
.g_init .init_wrap .g_init_tab li.active a, .g_init .init_wrap .g_init_tab li:hover a {background:none; box-shadow:none; text-shadow:none; color:#ffdd00;}
}		

@media screen and (max-width: 960px) {
/* profile */
.profile_wrap h3 {height: 15px; font-size: 1.85rem; line-height: 15px;}
.profile_wrap .info_user .nick {margin-bottom: 13px;}
.profile_wrap .info_user .exp > p {height: 44px; line-height: 44px;}
.profile_wrap .info_user .exp > p:first-child {line-height: 44px;}
.profile_wrap .info_user .rank .level {margin-bottom: 18px;}
.profile_wrap .info_ratio .battle h3 {margin-bottom: 4px;}
.profile_wrap .info_ratio .battle .title p {font-size: 4.2rem;}
.profile_wrap .info_ratio .battle .match > div {width: calc((100% - 24px) / 2);}
.profile_wrap .info_ratio .battle .match .stat li h4, .profile_wrap .info_ratio .battle .match .stat li p {height: 42px;}
.profile_wrap .info_ratio .battle .match .ratio h4 {left: 24px;}
.profile_wrap .info_ratio .battle .match .ratio .graph {padding: 0 12px 0 90px;}
.profile_wrap .info_ratio .battle .skill {margin-top: 96px;}
.profile_wrap .info_ratio .battle .skill h4 {font-size: 1.35rem;}
.profile_wrap .info_ratio .weapon .inner > div h3, .profile_wrap .info_ratio .weapon .inner > div ul {display: block;}
.profile_wrap .info_ratio .weapon .title {width: 100%; height: 72px; line-height: 73px;}
.profile_wrap .info_ratio .weapon .title br {display: none;}
.profile_wrap .info_ratio .weapon .title img {width: 30px; margin: 25px 6px 0 0;}
.profile_wrap .info_ratio .weapon .list {width: 100%;}
.profile_wrap .members .inner > div {width: calc((100% - 24px) / 2);}
.profile_wrap .members .title .tit h3 {font-size: 1.85rem;}

/* game*/
.guide_wrap .pop-up .pop-layout {width:auto;}
}

@media screen and (max-width: 768px) {
.pb_sub > div {padding-top:58px; min-height:130rem; background-attachment: inherit;}	
.pb_sub .pb_top .typing_wrap .typing {font-size:5rem;}
.pb_sub .pb_top .typing_wrap .typing:before {height:22px;}
.pb_sub .pb_top .sub_depth2 {max-width:234px;}
.pb_sub .pb_top .sub_depth2 .sub_depth2_tab {height:35px; line-height:35px; font-size:2.3rem;}
.pb_sub .pb_top .sub_depth2 li a {font-size:2.3rem;}
.pb_sub .pb_top .sub_depth2 .sub_depth2_tab:before {background-size:11px auto;}
.pb_sub .pb_top .sub_depth2 .sub_depth2_tab:after {width:35px; background-size:12px auto;}
.g_intro .g_intro_half .txt br {display:none;}

/* game */
.g_intro .g_intro01 {padding:10rem 0 12rem; }
.g_intro .g_intro01 img {width:234px;}
.g_intro .g_intro_half .tit {font-size:4.6rem;}
.g_intro .txt {font-size:2.7rem;}
.g_intro .g_intro06 .tit {font-size:3.3rem;}
.g_intro .g_intro06 .txt {font-size:2.5rem;}


.g_app .list {margin-left:0;}
.g_app .list li {width:100%; padding-left:0;}
.g_app .list li .con .img img {height:208px;}
.g_app .list li .con .txt {height:auto !important; font-size:2.3rem;}
.g_app .list li .con:before, .g_app .list li .con:after {width:11px; height:11px; background-size:11px auto;}
.g_app .list li .con .tit {font-size:3.3rem;}
.g_app .g_app_top .right {font-size:2.5rem;}
.g_app .g_app_top .left .tit {font-size:4.9rem;}
.g_app .g_app_top .img img {width:140px;}
.g_app .g_app_top .btn_line i {width:19px; height:21px; background-size:19px auto;}
.btn_line:before, .btn_line:after {width:2px; height:11px;}

.g_act .g_act_con {overflow-x:scroll; position:relative;}
.g_act .act_tree {max-width:none; width:690px;}
.g_act .g_act_top .tit, .g_act .g_act_top .tit span font {font-size:4.3rem;}
.g_act .g_act_top .txt {font-size:2.7rem;}
.g_act .g_act_top .info {font-size:2.5rem;}
.g_act .tip_con .tip_pic img {width:140px;}
.g_app .g_app_top .pc { display:none; }
.g_app .g_app_top .mobile { display:block; }
.g_act .tip00 {min-width:155px;}
.g_act .tip05, .g_act .tip07, .g_act .tip09, .g_act .tip12, .g_act .tip14, .g_act .tip16, .g_act .tip19, .g_act .tip21, .g_act .tip23, .g_act .tip28, .g_act .tip30, .g_act .tip32, .g_act .tip34  {width:300px;}
.g_act .tip_tit {font-size:2.3rem;}
.g_act .tip_con .tip_name {font-size:2.1rem;}

.g_start .g_start_list .info li {font-size:2.3rem; padding-left:4.4rem;}
.g_start .g_start_list .info span {font-size:2rem; width:12px; height:12px; line-height:13px; top:1px;}
.g_start .g_start_list .tit {font-size:2.9rem;}
.g_start .g_start_list .con:before, .g_start .g_start_list .con:after {width:11px; height:11px; background-size:11px auto; }
.g_start .g_start_list .info li a {width:32px; height:15px; line-height:15px;}

.g_down .g_full {background-size:auto;}
.g_down .g_full:before, .g_down .g_full:after {width:11px; height:11px; background-size:11px auto;}
.g_down .g_system:before, .g_down .g_system:after {width:11px; height:11px; background-size:11px auto;}
.g_down .g_down_t {max-width:none; width:100%;}
.g_down .g_tit {font-size:3.9rem;}
.g_down .g_full .g_tit {font-size:4.8rem;}
.g_down .g_down_t li {font-size:2.3rem; padding-left:19rem;}
.g_down .btns_down a {font-size:2.4rem; height:36px; line-height:36px; border-radius:3px;}
.g_down .info {font-size:2.1rem;}
.g_down .g_patch .btns_g_link a {font-size:2.1rem; border-radius:3px;}
.g_down .g_system .g_tit {text-align:center;}
.g_down .g_system .g_tit span {font-size:2.9rem; display:block; }
.g_down .g_patch .btns_g_link {width:150px;}
.g_down .g_patch .g_down_t li {padding-right:31rem;}
.g_down .g_system {background-size:auto; background-position:0 center;}
.g_down .btns_down a:before, .g_down .btns_down a:after {width:2px; height:5px;}
.g_down .btns_down a br {display:block;}
.g_down .g_full .btns_down a {text-align:right; height:auto; line-height:1.1;     padding: 1.3rem 0; padding-right:2rem;}
.g_down .g_full .btns_down a span {position:absolute; left:2rem; top:50%; margin-right:0; transform:translate(0 , -50%);}
.g_down .g_system .g_down_t li > div {display:block;}

.g_init .step .init_con .box_init .desc .tit {font-size:2.5rem; word-break:keep-all; }
.g_init .step .init_con .box_init .desc .tit02 {font-size:2.9rem;}
.g_init .step .init_con .box_init .desc .tit span {display:block; margin-left:0;}
.g_init .step .init_con .box_init .desc .txt {font-size:2.3rem; line-height:1.27;}
.g_init .step .init_con .box_init .desc .txt br {display:none;}
.g_init .step .init_con .box_init .desc .txt font.g01 {display:block;}
.g_init .step .init_con .box_init .desc li {font-size:2.3rem; padding-left:3.6rem; line-height:1.27;}
.g_init .step .init_con .box_init .desc li span {font-size:2rem; width:12px; height:12px; line-height:13px; top:0; text-indent: 0;}
.g_init .step .init_con .box_init .desc .ul_2 li span {font-size:2.3rem;}
.g_init .step .init_tit {font-size:2.5rem;}
.g_init .step .init_tit i, .g_init .step03 .init_tit i, .g_init .step.active .init_tit i {width:20px; height:20px; background-size:20px auto; background-position:0 -20px;}
.g_init .step .init_con:before, .g_init .step .init_con:after {width:11px; height:11px; background-size:11px auto;}
.g_init .step .init_con .box_init .thum img {width:132px;}
.g_init .step04 .init_con .box_init .thum img {width:auto;}
.g_init .step .init_con .box_init .desc {width: calc(100% - 134px); padding-left:3rem;}
.g_init .step04 .init_con .box_init .desc {padding:0; width:auto;}

.g_init .g_init_tab .gi_tab:before {background-size:11px auto;}
.g_init .g_init_tab .gi_tab:after { width: 40px;  background-size: 12px auto;}
.g_init .g_init_tab .gi_tab {height: 40px; line-height: 40px;  font-size: 2.5rem;} 
.g_init .g_init_tab ul li a {font-size:2.5rem;}
.g_init .g_init_tab ul li.active a, .g_init .g_init_tab ul li:hover a {font-size:2.5rem;}

.g_down .g_patch .btns_down a {height:40px; line-height:1.2; display:flex; margin:0 auto; justify-content:center; align-items:center;}
.g_down .g_patch .btns_down a.btn_g_down01 {padding-top:1rem; line-height:1.2;}

.guide_wrap .list {margin-left:0;}
.guide_wrap .list > li {width:100%; padding-left:0;}
.guide_wrap .list .tit {font-size:2.7rem; height:8rem;}
.guide_wrap .guide_sel .txt .txt01 {font-size:2.3rem;}
.guide_wrap .guide_sel .txt .txt02 {font-size:2.1rem;}
.guide_wrap .guide_sel .txt {height:7rem;}
.guide_wrap .guide_sel .sel_on {height:8rem;}
.guide_wrap .guide_sel .sel_on .txt01:before {width:12px; height:12px; left:2rem;}
.guide_wrap .guide_sel .ovs {top:7.9rem;     max-height: 112px;}
.guide_wrap .guide_sel .sel_on:after {width:8rem;}
.guide_wrap .guide_sel .txt .desc {padding-left:6.4rem;}
.guide_wrap .list .vod .s_link {background-size:2rem auto;}
.guide_wrap .guide_sel .sel_on:after {background-size:2.2rem auto , 3px auto , 3px auto , 3px auto , 3px auto !important;}
.guide_wrap .pop-up:before, .guide_wrap .pop-up:after {margin-left:0; left:2.5rem; background-size:100% auto;}
.guide_wrap .pop-up .pop-layout h2 {font-size:2.5rem;}
.guide_wrap .pop-up .explan {font-size:2.1rem;}
.client_guide .pb_sub .pb_top .typing_wrap {font-size:4.3rem;}
.guide_wrap:before, .guide_wrap:after {background-size:100% auto;}

/* news */
.nw_wrap .btn_nw_arr {background-size:25px auto;}
.nw_wrap .list .desc {width:calc(100% - 25.8rem);}
.nw_wrap .list .desc .tit {font-size:2.3rem; -webkit-line-clamp: 2; max-height:29px; }
.nw_wrap .list .desc .label {font-size:2rem;  height: 19px; line-height: 19px; width:70px;}
.nw_wrap .list .desc .txt {font-size:2.1rem; -webkit-line-clamp: 2; max-height:28px; height:auto;}
.nw_wrap .list .desc .date {font-size:2.1rem;}
.nw_wrap .list .con {height:25.8rem;}
.nw_wrap .list .thum_img { background-size:50%;  width:25.8rem;}
.nw_wrap .list .thum_img:after, .nw_wrap .list .desc:after {width:11px !important; height:11px !important; background-size:11px auto !important;}
.nw_wrap .nw_view .nw_v_tit .label {font-size:2rem;  height: 19px; line-height: 18px;}
.nw_wrap .nw_view .nw_v_tit .tit {font-size:2.7rem;}
.nw_wrap .nw_view .nw_v_tit .date {font-size:2.5rem;}
.nw_wrap .nw_view .nw_v_con {font-size:2.4rem; line-height:1.3; padding:0;}
.nw_wrap .nw_view .nw_v_admin {max-width:177px; margin:0 auto; padding:2.5rem 0;}
.nw_wrap .nw_view .nw_v_admin a {display:block;}
.nw_wrap .nw_view .nw_v_admin a img {max-width:100%;}
.nw_wrap .nw_view .nw_v_btns a {font-size:2.4rem; height:36px; line-height:36px; width:calc((100% - 4rem) / 3);}
.nw_wrap .nw_view .nw_v_btns .btn_line_r {width:calc((100% - 4rem) / 3);}
.nw_wrap .nw_view .nw_v_btns .btn_line_b {margin-right:2rem;}
.nw_wrap .nw_view .nw_paging ul li a {width:8rem; height:8rem;}
.nw_wrap .nw_view .nw_paging ul li a:before {width:9px; height:14px; background-size:9px auto;}
.nw_wrap .nw_view .nw_paging ul li a:hover:before {background-position:0 -14px;}
.nw_wrap .nw_view .btn_line_b i {top:-1px;}
.nw_wrap .nw_view .btn_share i {width:7px; height:15px; background-size:7px auto;}
.nw_wrap .nw_view .btn_link i {width:14px; height:14px; background-size:14px auto;}
.nw_wrap .nw_view .btn_share:hover i{background-position:0 -15px;}
.nw_wrap .nw_view .btn_link:hover i {background-position:0 -11px;}
.nsb_depth2 .nw_tab {height:40px; line-height:40px; font-size:2.5rem;}
.nsb_depth2 ul li a, .nsb_depth2 ul li.on a, .nsb_depth2 ul li a:hover {font-size:2.5rem;}
.nsb_depth2 .nw_tab:before {background-size:11px auto;}
.nsb_depth2 .nw_tab:after {width:35px; background-size:12px auto;}

/* ranking */
.nrank_wrap .nrank_top {font-size:2.5rem; word-break:keep-all;}
.nrank_wrap .nrank_top img {width:33px;}
.nrank_wrap .nrank_top .inner:before, .nrank_wrap .nrank_top .inner:after {background-size:11px auto; width:11px; height:11px;}
.nrank_wrap .r_tr .ml {height:40px; font-size:2.3rem;}
.nrank_wrap .r_tr .ml .tit {font-size:2.1rem;}
.nrank_wrap .r_tr .name a {font-size:2.9rem;}
.nrank_wrap .r_tr .win {line-height:64px; font-size:2.4rem; width:70px; background-size:36px auto;}
.nrank_wrap .r_tr .name {width:calc(100% - 70px); padding-top:3rem;}
.nrank_wrap .r_tr.no01 .win, .nrank_wrap .r_tr.no02 .win, .nrank_wrap .r_tr.no03 .win {font-size:3.4rem;}
.nrank_wrap .r_tr.no01 .win {background-size:40px auto; }
.nrank_wrap .r_tr.no02 .win, .nrank_wrap .r_tr.no03 .win {background-size:36px auto; }
.nrank_wrap .r_tr:before, .nrank_wrap .r_tr:after {height:7px; left:-4px; right:-4px; background-size:7px auto !important;}
.nrank_wrap .r_tr:before {top:-4px;}
.nrank_wrap .r_tr:after {bottom:-4px;}
.nrank_wrap .r_tr .ml:before, .nrank_wrap .r_tr .ml:after {width:2px; height:1px; top:-1px;}
.nrank_wrap .r_tr .rank .txt {padding-right:18px;}
.nrank_wrap .r_tr .rank img, .nrank_wrap .r_tr .leader img ,.nrank_wrap .r_tr .member img {width:13px; height:13px;}
.nrank_wrap .nrank_table .state {font-size:2.2rem;}
.nrank_wrap .nrank_table .state.down:before {top:0;}
.nrank_wrap .nrank_table .state.up:before {top:-1px;}
.nrank_wrap .nrk_b .new_search_wrap {max-width:234px;}
.nrank_wrap .nrk_explan:before, .nrank_wrap .nrk_explan:after {background-size:11px auto; width:11px; height:11px;}
.nrank_wrap .season_state {font-size:2.3rem;}
.nrank_wrap .season_state .date span {display:block;}
.nrank_wrap .season_state .date {font-size:2.7rem;}
.nrank_wrap .season_state:before, .nrank_wrap .season_state:after {width:11px; height:11px; background-size:11px auto;}
.nrank_wrap .nk_map {margin-bottom:1rem;}
.nrank_wrap .nk_map ul li {width:50%; margin-bottom:2rem;}
.nrank_wrap .nk_map ul li a:before, .nrank_wrap .nk_map ul li a:after {width:11px; height:11px; background-size:11px auto;}
.nrank_wrap .nk_map ul li a span {font-size:2.9rem;}
.nrank_wrap .nk_my .inner:before, .nrank_wrap .nk_my .inner:after {width:11px; height:11px; background-size:11px auto;}
.nrank_wrap .nk_my .r_tr .no_login {font-size:2.3rem; line-height:48px;}
.nrank_wrap .nrank_table02 .r_tr .win {height:70px; line-height:70px;}
.nrank_wrap .nk_my .r_tr .name a:after {top:3.6rem;}
.nrank_wrap .nrank_table03 .r_tr .ml {height:40px;}

.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .name {padding-top:10rem;}
.nrank_wrap .nrank_top.my_rank .nrank_table .r_tr .name .num {font-size:2.9rem;}
.nrank_wrap .nk_my .nrank_table .r_tr .name .num {font-size:2.5rem;}
.nrank_wrap .nk_my .nrank_table .r_tr .name {padding-top:5rem; }

/* 장성 계급 추가 */
.nrank_wrap .r_tr.general .rank img {width:15px; height:15px;}
.nrank_wrap .r_tr.general .rank .rank_img:before {width:20px; height:20px; margin-top:-10px; margin-left:-10px; background-size:100% auto;}
.nrank_wrap .r_tr.general .rank .txt {padding-right:28px;}

/* media */
.nmedia_wrap .nm_list {margin-left:0;}
.nmedia_wrap .nm_list > li {width:100%; padding-left:0;}
.nmedia_wrap .nm_list .info .tit {font-size:2.1rem;}
.nmedia_wrap .nm_list .info .txt {font-size:2.5rem;}
.pop-up.pop_new_media .pop-layout > h2 a {background-size:100% auto;}
.pop-up.pop_new_media .pop-layout > h2 a:before {background-size:0.4rem auto !important;}
.nmedia_wrap .nm_list.media_paper .info .btn_more {width:10.7rem;}
.nmedia_wrap .nm_list.media_paper .info {padding-right:12rem;}

/* faq */
.nfaq_wrap .nfaq_list li .qa img {width:21px;}
.nfaq_wrap .nfaq_list li .txt {font-size:2.3rem;}
.nsb_depth2 a .num {font-size:2.1rem; top:-1px;}
.nfaq_wrap .nfaq_top .new_search_wrap .search_area {height:35px;}
.nfaq_wrap .nfaq_top .info, .nfaq_wrap .nfaq_top .info .go_ticket, .nfaq_wrap .nfaq_data {font-size:2.3rem;}
.nfaq_wrap .nfaq_top .inner:before, .nfaq_wrap .nfaq_top .inner:after {width:11px; height:11px; background-size:11px auto;}

/* profile */
.profile_wrap h3 {font-size: 2.8rem;}
.profile_wrap h4 {font-size: 2.4rem;}
.profile_wrap h5 {font-size: 2.25rem;}
.profile_wrap .inner {padding: 12rem 2.4rem;}
.profile_wrap .info_user .inner {padding-bottom: 16.4rem;}
.profile_wrap .info_user .nick {height: 3.8rem; margin: 0 0 2.4rem; font-size: 4.65rem; line-height: 3.8rem;}
.profile_wrap .info_user .nick:before {height: 22px; top: calc(50% - 2px);}
.profile_wrap .info_user .exp > p {min-width: 120px; height: 5.4rem; padding: 0 3rem; font-size: 2.8rem; line-height: 5.5rem;}
.profile_wrap .info_user .exp > p:first-child {min-width: auto; padding: 0 3rem; font-size: 2.2rem; line-height: 5.4rem;}
.profile_wrap .info_user .playtime {min-width: auto; margin-top: 24px;}
.profile_wrap .info_user .playtime li {height: auto; padding: 0 3rem; font-size: 3.2rem;}
.profile_wrap .info_user .playtime li h5 {margin-bottom: 2px; font-size: 2.2rem;}
.profile_wrap .info_user .rank {width: calc(100% - 4.8rem); font-size: 2.55rem; font-weight: 400; left: 2.4rem;}
.profile_wrap .info_user .rank .level {margin-bottom: 1.2rem;}
.profile_wrap .info_user .rank .level img {width: 1.8rem; margin: -2px 0.8rem 0 0; vertical-align: middle;}
.profile_wrap .info_user .rank .progress {height: 2.4rem;}
.profile_wrap .info_user .rank .progress:before {height: 3.6rem;}
.profile_wrap .info_user .rank .progress .bar {height: 2.4rem;}

.profile_wrap .info_ratio {background-position: 50% -50%;}
.profile_wrap .info_ratio .battle h3 {margin-bottom: 0.4rem;}
.profile_wrap .info_ratio .battle .title p {margin-bottom: 3.6rem;}
.profile_wrap .info_ratio .battle .match {display: block;}
.profile_wrap .info_ratio .battle .match > div {width: 100%;}
.profile_wrap .info_ratio .battle .match .stat li h4, .profile_wrap .info_ratio .battle .match .stat li p {height: 5.8rem; line-height: 5.9rem;}
.profile_wrap .info_ratio .battle .match .stat li h4 {width: 7.2rem;}
.profile_wrap .info_ratio .battle .match .stat {padding: 3.6rem 4.8rem;}
.profile_wrap .info_ratio .battle .match .stat li p {font-size: 2.7rem; font-weight: 400;}
.profile_wrap .info_ratio .battle .match .stat li p font {padding-left: 2rem; background: #0b292a;}
.profile_wrap .info_ratio .battle .match .ratio {margin-top: 2.4rem; padding-top: 4.8rem;}
.profile_wrap .info_ratio .battle .match .ratio h4 {text-align: center; position: static; left: auto; bottom: auto;}
.profile_wrap .info_ratio .battle .match .ratio h4 br {display: none;}
.profile_wrap .info_ratio .battle .match .ratio .graph {padding: 6rem 2.4rem 0; position: static;}
.profile_wrap .info_ratio .battle .match .ratio .graph li .progress {height: 13.2rem;}
.profile_wrap .info_ratio .battle .match .ratio .graph li h5 {width: calc(100% + 4.8rem); top: 14.8rem;}
.profile_wrap .info_ratio .battle .match .ratio .graph li .progress .bar span {font-size: 2.6rem; top: -3.2rem;}
.profile_wrap .info_ratio .battle .skill {margin-top: 13.2rem;}
.profile_wrap .info_ratio .battle .skill h4 {margin: 0 0 4px; font-size: 2.4rem;}
.profile_wrap .info_ratio .battle .skill .stat li {width: calc((100% - 9.6rem) / 4); min-height: 6.8rem; margin: 3.6rem 1.2rem 0; padding: 10.4rem 0 0; background-size: 54px;}
.profile_wrap .info_ratio .battle .skill .stat li p {font-size: 2.6rem;}
.profile_wrap .info_ratio .battle .skill .ratio {margin-top: 4.8rem; padding: 0 9rem;}
.profile_wrap .info_ratio .battle .skill .ratio > div {width: calc((100% - 15rem) / 2);}
.profile_wrap .info_ratio .battle .skill .ratio > div > h4 {width: calc(100% + 4.8rem); font-size: 2.2rem; bottom: -1.2rem;}
.profile_wrap .info_ratio .battle .skill .ratio > div > ul {padding: 1.2rem 0 6rem;}
.profile_wrap .info_ratio .battle .skill .ratio > div > ul > li {height: 2.4rem;}
.profile_wrap .info_ratio .battle .skill .ratio > div > ul > li > h5, .profile_wrap .info_ratio .battle .skill .ratio > div > ul > li > div {height: 7.2rem; line-height: 2.6rem;}
.profile_wrap .info_ratio .battle .skill .ratio .txt {width: 15rem; padding: 0 1.2rem;}
.profile_wrap .info_ratio .battle .skill .ratio .graph .progress .bar {height: 3.6rem;}
.profile_wrap .info_ratio .battle .skill .ratio .graph .progress .bar span {font-size: 2.35rem; line-height: 3.6rem; letter-spacing: -0.04rem; right: -7.6rem;}
.profile_wrap .info_ratio .battle .skill .ratio .kda > h4 {right: 2.4rem;}
.profile_wrap .info_ratio .battle .skill .ratio .headshot h4 {left: 2.4rem;}
.profile_wrap .info_ratio .weapon .title {font-size: 2.8rem; height: 9.6rem; line-height: 9.6rem;}
.profile_wrap .info_ratio .weapon .title img {width: 22px; margin: 3rem 0.8rem 0 0;}
.profile_wrap .info_ratio .weapon .list {text-align: left;}
.profile_wrap .info_ratio .weapon .list li {width: 100%; height: 12rem; padding: 3rem 3.6rem 0 15.6rem; display: block;}
.profile_wrap .info_ratio .weapon .list li h4 {font-size: 2.5rem;}
.profile_wrap .info_ratio .weapon .list .ratio {margin-bottom: 0; font-size: 3.4rem; position: absolute; right: 3.6rem; top: 50%; transform: translate(0, -50%);}
.profile_wrap .info_ratio .weapon .list .value {margin-top: 0.4rem; font-size: 2.7rem;}
.profile_wrap .info_ratio .weapon .list .graph {width: 12rem; height: 12rem; margin: 0; padding: 2.4rem; position: absolute; left: 0; top: 0;}
.profile_wrap .info_ratio .weapon .list .graph::before {background-size: 6px;}
.profile_wrap .info_ratio .weapon .list .graph .progress {width: 7.2rem; height: 7.2rem; padding-top: 0;}
.profile_wrap .info_ratio .weapon .list li:nth-child(even) h4 {background: none;}
.profile_wrap .info_ratio .weapon .list li:nth-child(even) .graph {background: #292929;}
.profile_wrap .info_ratio .weapon .list li:nth-child(even) .graph::before {display: none;}

.profile_wrap .members .inner {display: block;}
.profile_wrap .members .inner > div {width: 100%;}
.profile_wrap .members .title {width: calc(100% - 4.8rem); height: 48px; margin: 0 auto 2.4rem; background-size: 66px; background-position: right 0;}
.profile_wrap .members .title .tit {width: 100%; text-align: left;}
.profile_wrap .members .title .tit h3 {font-size: 2.8rem;}
.profile_wrap .members .title .tit p {margin-top: 5px; font-size: 2.6rem; text-align:left;}
.profile_wrap .members .title .tit p.clanname a font {display:inline; margin-bottom:0;}
.profile_wrap .members .title .tit p.clanname a span {font-size:0; width:16px; vertical-align:middle; height:16px; border: 1px solid transparent; border-image: linear-gradient(to right, #7776ff , #ac2ef1);  border-image-slice: 1;     position: relative; top: -2px; margin-left: 5px;}
.profile_wrap .members .title .tit p.clanname a span:before {right:auto; left:50%; transform:translate(-50% , -50%);     }
.profile_wrap .members .list {height: auto; max-height: 39.6rem;}
.profile_wrap .members .list li {padding: 0 2.4rem;}
.profile_wrap .members .list::-webkit-scrollbar {width: 1.8rem;}
.profile_wrap .members .list::-webkit-scrollbar-thumb {width: 1.8rem; border: 0.6rem solid transparent;}
.profile_wrap .members .list::-webkit-scrollbar-track {width: 1.8rem;}
.profile_wrap .members .list li a {height: 7.8rem; padding-right: 30px; font-size: 2.6rem; line-height: 7.8rem;}
.profile_wrap .members .list li a img {width:12px; height:12px; margin: -2px 1rem 0 0; vertical-align: middle;}
.profile_wrap .members .list li a::before {margin-top: -8px; display: none;}
.profile_wrap .members .list .txt {height: 7.8rem; font-size: 2.6rem; line-height: 8rem;}
.profile_wrap .members .clan {margin-top: 4.8rem;}
.profile_wrap .members .clan .title {background-size: 66px; background-position: right 0;}
.profile_wrap .members .clan .title .tit {width: calc((100% - 104px) / 2);}

.profile_wrap .profile_none {background-size: cover;}
.profile_wrap .profile_none .cont {padding-top: 28.7rem; padding-bottom: 26.6rem;}
.profile_wrap .profile_none .cont .nick {font-size: 3.6rem;}
.profile_wrap .profile_none .cont .txt {margin-top: 0.2rem; font-size: 3.6rem;}
.profile_wrap .profile_none .cont .btn_prev {margin-top: 3.6rem; font-size: 2.6rem;}
.profile_wrap .profile_none .cont .btn_prev span {height: 7.8rem;}
.profile_wrap .profile_none .cont .btn_prev span:first-child {width: 7.8rem; background-size: 18px;}

.profile_wrap .info_user .my_level {width: 24px; height: 24px; border-radius: 4.5px; left: 3rem; top: 3rem;}
.profile_wrap .info_user1 .bullet01 {top:10%; right:8%; width:25px; }
.profile_wrap .info_user1 .bullet02 {top:18%; right:3%; width:26px;}
.profile_wrap .info_user1 .bullet03 {top:50%; right:11%; width:15px;}
.profile_wrap .info_user .attend {width: 24px; height: 24px; line-height: 24px; border-width: 1px; border-radius: 4.5px; top: 3rem; right: 3rem;}
.profile_wrap .info_user .attend img {width: 16px; height: 16px; margin-top: -8px; margin-left: -8px;}

/* elua */
.elua_wrap > h1 img {max-width:234px;}
.elua_wrap .elua_box .con:first-child .tit {font-size:2.9rem;}
.elua_wrap .elua_box .tit {font-size:2.5rem;}
.elua_wrap .elua_box .txt {font-size:2.3rem;}
.elua_wrap .elua_box .num_tit {font-size:2.3rem;}
.elua_wrap .elua_box .num_con > ul > li {font-size:2.3rem; }
.elua_wrap .elua_box .num_con .dash_li li {font-size:2.3rem; padding-left:2rem;}
.elua_wrap .elua_box .elua_update {font-size:2.3rem;}
.elua_wrap .elua_box .num_con > ul > li {padding-left:5rem;}
.elua_wrap .elua_box .num_con > ul > li > span {width:18px; height:18px; line-height:17px; top:2px;}

/* voucher */
.resel_area .con > .tit {font-size:2.9rem;}
.resel_area .resel_t th, .resel_area .resel_t td {font-size:2.3rem;}
.resel_area .epin_list > li {width:50%;}
.resel_area .epin_list .pin .txt {font-size:2.3rem;}
.resel_area .epin_list .pin:after { height: calc(100% - 4.4rem);}

/* error */
.error_wrap {min-height:100%;}
.error_wrap h1 img {max-width:233px;}
.error_wrap .motion .center .pic {width:250px; height:250px;}
.error_wrap .motion .info .tit {font-size:14.9rem;}
.error_wrap .motion .info .txt {font-size:3.9rem;}

/* mypage */
.ticket_wrap .tl li .con > div {font-size:2.1rem;}
.ticket_wrap .state span {font-size:2.1rem; width:87px; height:30px; line-height:30px; border-radius:3px;}
.ticket_wrap .state.new:before {font-size:2rem; width:30px; height:15px; line-height:15px; top:-1.3rem;}
.ticket_wrap .tl_bottom .go_topup, .notifi_wrap .tl_bottom .go_topup {font-size:2.4rem; width:164px; height:36px; line-height:36px;}
.ticket_wrap .tl_bottom .go_topup img, .notifi_wrap .tl_bottom .go_topup img {width:12px;}
.top_info .ticket_con {font-size:3.5rem;}
.top_info .ticket_con span {font-size:2.5rem;}
.ticket_wrap .tv .tv_top .sort {font-size:2.5rem;}
.ticket_wrap .tv .tv_top .tit {font-size:2.7rem; }
.ticket_wrap .tv .tv_date {font-size:2.3rem;}
.ticket_wrap .tv .tv_con .text {font-size:2.3rem; line-height:1.6;}
.ticket_wrap .tv .tv_con .attach li {font-size:2.3rem;}
.ticket_wrap .tv .tv_con .attach li a {font-size:2.3rem;}
.ticket_wrap .tv .tv_con .attach li:before {top:1px;}
.ticket_wrap .tv .reply {font-size:2.3rem;}
.ticket_wrap .tv .reply .writer {padding-left:4rem;}
.ticket_wrap .tv .reply .date {font-size:2.3rem;}
.ticket_wrap .tv .reply .txt {line-height:1.6;}
.ticket_wrap .tv .reply .writer:before {top:1px;}
.ticket_wrap .tv .comment:after {background-size:11px auto;}
.ticket_wrap .tv .comment .tit {font-size:2.3rem;}
.ticket_wrap .tv .comment .btn_submit {height:36px; line-height:36px; }
.ticket_wrap .tv .comment .cm_area textarea {font-size:2.1rem;}
.ticket_wrap .tv .btn_answers .info {font-size:2.5rem;}
.ticket_wrap .tv .btn_answers a {font-size:2.4rem; height:36px; line-height:36px; border-radius:3px; width:83px; }
.ticket_wrap .tv .tl_bottom a, .ticket_wrap .tv .tl_bottom .btn_line_b02 {width:calc((100% - 2rem) / 2); height:36px; line-height:36px; max-width:170px;}
.ticket_wrap .tv .tl_bottom .go_topup {margin-right:2rem;}
.ticket_wrap .tw .tl_bottom a, .ticket_wrap .tw .tl_bottom .btn_line_b02 {width:calc((100% - 2rem) / 2); height:36px; line-height:36px; max-width:170px;}
.ticket_wrap .tw .tl_bottom .go_topup {margin-right:2rem;}
.ticket_wrap .tw .tw_form:after {background-size:11px auto;}
.ticket_wrap .tw .tw_sel > a {height:36px; line-height:36px; font-size:2.3rem;}
.ticket_wrap .tw .tw_form .tit {font-size:2.3rem;}
.ticket_wrap .tw .tw_sel li a {font-size:2.3rem;}
.ticket_wrap .tw .tw_form .inp input[type=text] {height:36px; font-size:2.1rem;}
.ticket_wrap .tw .tw_form .inp textarea {height:120px; font-size:2.1rem;}
.my_wrap .my_form .inp input {height:36px; line-height:36px;}
.my_wrap .btn_line_r02 {width:112px; height:36px; line-height:36px;}
.my_wrap .btn_line_b {width:164px; height:36px; line-height:36px;}
.my_wrap .my_form:before, .my_wrap .my_form:after {width:11px; height:11px; background-size:11px auto;}
.my_wrap .my_form .tit {font-size:2.3rem;}
.my_wrap .ps_detail .title {display:none;}
.my_wrap .ps_detail .line > div {padding:0; display:block; width:100%;}
.my_wrap .ps_detail .tit {margin-bottom:1.5rem; font-size:2.3rem;}
.my_wrap .ps_detail .btn_edit {top:50%; transform:translate(0 , -50%); width:46px; height:25px; line-height:24px; font-size:2.1rem; border-radius:3px; }
.my_wrap .ps_detail .tit:before {display:none;}
.my_wrap .ps_detail .txt {font-size:2.3rem;}
.my_wrap .ps_detail .error {font-size:2.3rem; background-size:16px auto; padding-left:5.8rem  !important; margin-right:-9rem; width: auto !important;}
.my_wrap .ps_detail .error + .btn_edit {top:30%;}
.my_wrap .ps_detail .rd_controls {position:relative; margin-top:0; width:140px; padding:2px;}
.my_wrap .ps_detail .rd_controls label {height:16px; line-height:17px; font-size:2.1rem;}
.my_wrap .ps_detail .require {font-size:2.1rem; border-radius:3px;}
.my_wrap .ps_detail .require:after {right:10%;}
.my_wrap .ps_detail .line.in_nation .txt {padding-left:0;}
.my_wrap .ps_detail .line.in_nation .txt img {position:static; width:24px; vertical-align: middle; position: relative; transform: none; left: 0; top: -1px;}
.notifi_wrap .list .btn_close {width:18px; height:18px; background-size:18px auto;}
.notifi_wrap .list .btn_close:hover {background-position:0 -18px;}
.notifi_wrap .list .date {font-size:2.1rem;}
.notifi_wrap .list .notice .label {font-size:2rem; border-radius:3px;}
.notifi_wrap .list .notice .txt {font-size:2.3rem;}
.notifi_wrap .list .notice a {padding-right:3rem;}
.notifi_wrap .list .notice a:before { top:2px; }
.esports_wrap .tl .info a {font-size:2rem; width:45px; height:23px; line-height:22px; border-radius:2px;}

.pb_account .complete_area .typing_wrap .typing {font-size:3.9rem;}
.pb_account .complete_area .txt {font-size:2.5rem;}
.pb_account .complete_area .con:before, .pb_account .complete_area .con:after {width:11px; height:11px; background-size:11px auto;}
.pb_account .pb_sub_con .complete_area {max-width:none; margin:0 2.5rem 3rem;}
.pb_account .complete_area .txt02 {font-size:2.9rem;}
.pb_account .complete_area02 .txt02 {font-size:3.3rem; line-height: normal;}
.pb_account .complete_area02 .txt03 {font-size:2.5rem;}
.pb_account .complete_area + .btn_read {width:200px;}

/* paging */
.paging_wrap li a {width:20px; height:20px; line-height:19px;}

/**/
.btn_read {font-size:2.4rem; height:36px; line-height:36px; width:177px; border-radius:3px;}
.btn_read:before, .btn_read:after {width:2px; height:5px;}
.btn_read:before {right: 5px;}
.btn_read:after {left :5px; }
.btn_read:hover:before, .btn_read:hover:after {height:8px;}

.btn_line_b {border-radius:3px; font-size:2.4rem;}
.btn_line_b:before, .btn_line_b:after {width:2px; height:5px;}
.btn_line_b:before {right: 5px;}
.btn_line_b:after {left :5px; }
.btn_line_b:hover:before, .btn_line_b:hover:after {height:8px;}

.btn_line_b02 {border-radius:3px; font-size:2.4rem;}
.btn_line_b02:before, .btn_line_b02:after {width:2px; height:5px;}
.btn_line_b02:before {right: 5px;}
.btn_line_b02:after {left :5px; }
.btn_line_b02:hover:before, .btn_line_b02:hover:after {height:8px;}

.btn_line_r {border-radius:3px;}
.btn_line_r:before, .btn_line_r:after {width:2px; height:5px;}
.btn_line_r:before {right: 5px;}
.btn_line_r:after {left :5px; }
.btn_line_r:hover:before, .btn_line_r:hover:after {height:8px;}

.btn_line_r02 {border-radius:3px; font-size:2.4rem;}
.btn_line_r02:before, .btn_line_r02:after {width:2px; height:5px;}
.btn_line_r02:before {right: 5px;}
.btn_line_r02:after {left :5px; }
.btn_line_r02:hover:before, .btn_line_r02:hover:after {height:8px;}

.new_search_wrap .search_area input[type=text] {font-size:2.3rem;}
.new_search_wrap .search_area {height:30px;}
.new_search_wrap .search_area button {width:16px; height:17px; background-size:16px auto;}
.new_search_wrap .search_area button:hover {background-position:0 -17px;}

.red_dot li {font-size:2.3rem; }
.red_dot li:before {width:2px; height:2px;}

.nodata_n {font-size:2.5rem;}

.top_info {font-size:2.3rem; word-break:keep-all;}
.top_info img {width:33px;}
.top_info .inner:before, .top_info .inner:after {background-size:11px auto; width:11px; height:11px;}

/* paging */
.paging_wrap li a {border:none; }
.paging_wrap li.first a, .paging_wrap li.prev a, .paging_wrap li.next a, .paging_wrap li.last a { border: 1px solid #87cfff;}

/************ client_view ****************/
.client_veiw + .go_top {font-size:2.4rem; width:8rem; height:8rem; }
.client_veiw + .go_top:before {margin-bottom:0.8rem;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .tit:before, .client_veiw .nw_wrap .nw_view .nw_v_tit .tit:after {background-size:100% auto !important;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .tit {font-size:3.3rem; padding-left:16rem;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .date {font-size:2.7rem;}
.client_veiw .nw_wrap .nw_view .nw_v_tit .label {top:20%;}

/* notification */
.notificaton .tab_area .btn_all_read {position:static; margin-left:auto; margin-right:0; margin-top:2.4rem; height:35px; line-height:35px; font-size:2.3rem; padding:0 2rem; display:block; width: max-content;}
.notificaton .tab_area li {width:calc((100% - 1rem) / 2);}
.notificaton .tab_area li a {height:42px; line-height:42px; font-size:2.3rem; width:100%;}
.notificaton .tab_area li a:before {background-size:100% auto;}
.notificaton .tab_area li.on a:after {bottom:-2.4rem;}
.notificaton .list .noti_box .sort {font-size:2rem; height:17px; line-height:17px;}
.notificaton .list .noti_box .text .time {font-size:2rem; padding-left:70px;}
.notificaton .list .noti_box .text .time span {height:17px; line-height:17px;}
.notificaton .list .noti_box .text .txt {font-size:2.3rem;}
.notificaton .list .add_box {font-size:2.3rem;}
.notificaton .list .add_box:before {background-size:100% auto;}
.notificaton .list .in_link .noti_box .text .txt:after {width:10px; height:10px; background-size:100% auto;}
.notificaton .list .noti_box .btn_close {width:24px; height:24px;}
.notificaton .list .noti_box .btn_close:before {background-size:100% auto;}
.notificaton .list .noti_box .btn_open:before {background-size:100% auto;}

/* initiation*/
.g_init .init_wrap .g_init_tab a.gi_tab { height: 40px; line-height: 40px; font-size: 2.5rem;}
.g_init .init_wrap .g_init_tab a.gi_tab:after {width:40px; background-size:12px auto;}
.g_init .init_wrap .g_init_tab a {font-size:2.5rem;}
.g_init .init_wrap .g_init_tab li.active a, .g_init .init_wrap .g_init_tab li:hover a {font-size:2.5rem;}
.init_wrap .init_box > ul {margin-left:0; display:block;}
.init_wrap .init_box > ul > li {padding-left:0; display:block; width:100%;}
.init_wrap .init_box .tit span {font-size:2.7rem;}
.init_wrap .init_box .con:before {background-size:11px auto;}
.init_wrap .init_box .txt {font-size:2.3rem;}
.init_wrap .init_box .txt .in_txt li span {font-size:2rem; height:12px; width:12px; line-height:12px;}
.init_wrap .init_box .txt .in_tit {font-size:2.5rem;}
.init_wrap .init_box .txt .in_txt02 li span {font-size:2.3rem;}
.init_wrap .init_box .txt .in_txt02 li {font-size:2.3rem;}
.init_wrap .init_box .txt .in_txt li {font-size:2.3rem; padding-left:3.2rem;}
.init_wrap .init_box .txt .s_txt {font-size:2.1rem;}



}



@media screen and (max-width: 460px) {
.resel_area .epin_list { text-align:center; }
.resel_area .epin_list > li { width:100%;  }
.resel_area .epin_list > li .pin { margin:0 auto; }
}

@media screen and (max-width: 365px) {

/* profile */
.profile_wrap .info_user .nick {font-size: 4.2rem;}
.profile_wrap .info_ratio .battle .skill .stat ul {width: 84%;}
.profile_wrap .info_ratio .battle .skill .stat li {width: calc((100% - 4.8rem) / 2);}
.profile_wrap .info_ratio .battle .skill .ratio {margin-top: 3.6rem;}

}	

@media screen and (min-width: 1023px) and (max-height: 830px) {
.pop-up.pop_new_media {width:960px;}
}

@media screen and (max-width: 1365px) and (max-height: 768px) {
.pop-up.pop_new_media {width:840px;}
}


/* effect */

@keyframes cursor{ 
  0%{background:#fff;} 
  50%{background:#000;} 
  100%{background:#fff;} 
}	
@keyframes anim1 {
  from {
    transform: translateX(-3%) scale(1.1);
  }
  to {
    transform: translateX(0%) translateY(0%) scale(1);
  }
}

@keyframes twinkle_one {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes twinkle_two {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  80%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes twinkle_three {
  0%   { opacity: 1; }
  30%  { opacity: 0; }
  40%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes pulse{
  0%{
    opacity: 0;
  }
  10%{
    opacity:.50;
    transform-origin: 50% 50%;
    transform: rotate(-2deg) scale(5);
    transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100%{
    opacity:1;
    transform: rotate(-15deg) scale(1);
  }
}

@keyframes opacity {
	0% {opacity: 0.5; transform: scale(1);}
	20% {opacity: 0.9;}
	50% {opacity: 0.65; transform: scale(1.005);}
	65% {opaciy: 1;}
	100% {opacity: 0.5; transform: scale(1);}
}

@keyframes opacity2 {
	0% {opacity: 1;}
	12% {opacity: 0;}
	24% {opacity: 1;}
	36% {opacity: 0;}
	54% {opacity: 1;}
	62% {opacity: 0;}
	73% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes round {
	0% {transform:scale(.4); opacity:0;}
	20% {transform:scale(0.9);}
	40% {transform:scale(1.3);}
	60% {transform:scale(0.9);}
	80% {transform:scale(1.05);}
	100% {transform:scale(1); opacity:1;}
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(0, -5em);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}  
  
  @keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes diaUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, -100%, 0);
    transform: translate3d(50%, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes diaDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 100%, 0);
    transform: translate3d(-50%, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
   top:0;
  }
  40% {
    top:6px;
  }
  60% {
    top:3px;
  }
}

@keyframes circle1AnimationMove {
	00%, 100% 		{ transform: scale(1.05); }
	07% 					{ transform: scale(1);}
	12%, 19%, 68% {transform: scale(1.05);}
	26%, 30% 			{ transform: scale(1); }
	73% 					{ transform: scale(1.05); }
	87%, 92% 			{ transform: scale(1);}
	94% 					{ transform: scale(1.05);}
}

@keyframes biu {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
     opacity: 1;
  }
}

@property --angle {
	syntax: "<angle>";
	initial-value: 90deg;
	inherits: true;
}

@property --gradX {
	syntax: "<percentage>";
	initial-value: 50%;
	inherits: true;
}

@property --gradY {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: true;
}

:root {
	--d: 2500ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: rgba(255, 255, 255, 0.66);
	--c2: rgba(255, 255, 255, 0);
}

@keyframes borderRotate {
	100% {
		--angle: 420deg;
	}
}

@keyframes bg {
  50% {
        background-position:0 center;
  }
}

@keyframes fade {
    0% {
        opacity: 0;
       transform: scale(1.1);
        z-index: 2
    }

    15% {
        opacity: 1;
        z-index: 2
    }

    49% {
        opacity: 1;
        z-index: 2
    }

    50% {
        z-index: 1
    }

    85% {
        opacity: 0
    }

    to {
        opacity: 0;
      transform: scale(1);
    }
}