@-ms-viewport{width:device-width}
html{overflow-x:hidden; background-color: #fff;}
body,div,ul,li,img { margin:0; padding:0; }
ul,li{ list-style:none}
img { border:none; display:block}
body { position: relative; overflow: hidden; background-color: #fff; }
.msg_sound_only { display: none; }
body .top_right { position: absolute; width: 930px; height: 500px; transform: rotate(30deg); top: 0; left: 1250px; margin-top: -330px; background-color: #ffbf27; }
body .bottom_left { position: absolute; width: 1250px; height: 500px; transform: rotate(30deg); bottom: 0; left: 0; margin-bottom: -160px; margin-left: -300px; background-color: #ffbf27; }
.box0 { width: 1400px; margin: 0 auto; }
.box1 { width: 1200px; margin: 0 auto; }
.doc { padding: 70px 0 160px 0; margin-top: 105px; }
.doc.mg_0 { margin: 0; }
.doc.main { padding: 0; }

/*ani_bg*/
.ani_bg { position: fixed; top: 50%; left: 50%; margin-top: -185px;/*스크롤 시 -270px*/ margin-left: -325px; opacity: .2; /*스크롤 시 .4*/ }
.ani_bg img { display: inline-block; -webkit-animation: rotation 140s infinite linear; }


@-webkit-keyframes rotation {
    from {-webkit-tranform: rotate(0deg); }
    to { -webkit-transform: rotate(-359deg); }
}



/*header*/
#header { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; opacity: 1; }
#header:hover {}
#header .box0 { position: relative; transition: .3s; }
#header .gnb_w { width: 1020px; max-width: 96%; margin: 0 auto; border-radius: 66px; background: linear-gradient(to right, #45fbf1 0%, #b7f864 50%, #fef601 100%); position: relative; text-align: center; transition: .3s; }
.stW#header .gnb_w { width: 1000px; }
.stW#header { margin-top: 10px; }
.stW#header .logo { margin-top: 10px; margin-left: -800px; }
.stW#header .box0 { }
#header .logo { display: inline-block; position: fixed; top: 0; left: 50%; margin-left: -826px; z-index: 2; opacity: 1; }

#header .logo.tran_3 { transition: .3s; }

#header .logo a { height: 80px; }
#header .logo a img { width: 290px; }

#header .logo_bg { position: fixed; top: 0; left: 0; width: 690px; height: 350px; background: linear-gradient( to right, #1031ba 0%, #d31e87 100%);; transform: rotate(-35deg); margin-left: -175px; margin-top: -122px; z-index: 1; transition: .3s; }


#header .sns_w { position: fixed; top: 110px; left: 0; width: 309px; height: 65px; border-radius: 0 64px 64px 0; background: rgba(0,0,0,.4); font-size: 0; text-align: right; padding-right: 10px; box-sizing: border-box; z-index: 2; transition: .3s; }
.stW#header .sns_w { left: -40px; }
#header .sns_w .facebook,
#header .sns_w .line,
#header .sns_w .twitter { display: inline-block; font-size: 1.063rem; }
#header .sns_w a { display: inline-block; width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; color: #FFF; background: #f57d20; margin-left: 25px; }

#header .sns_w .facebook a { background: #1178f2; }
#header .sns_w .line a { background: #42b847; }
#header .sns_w .twitter a { background: #1da1f2; }


/* #header .logo_bg { position: fixed; top: 0; left: 0; border-top: 200px solid #000; border-left: 300px solid #000; border-bottom: 200px solid transparent; border-right: 300px solid transparent; box-sizing: border-box; z-index: 2; } */

#header .gnb { position: relative; z-index: 2; }
#header .gnb .dp1 { height: 66px; font-size: 1.125em; padding: 0 32px; font-weight: 600; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; transition: .3s; }
.stW#header .gnb .dp1 { padding: 0 29px; }
#header .gnb .dp2 { display: none; }

#header .mypage { position: absolute; top: 0; right: -140px; transition: .3s; }
#header .mypage .inner { position: relative; width: 100%; height: 100%; border-radius: 50%; transition: .3s; cursor: pointer; }
#header .mypage .inner:hover .in { display: none; }
#header .mypage .inner .in { position: absolute; top: 0; left: 0; z-index: 2; }
#header .mypage .inner .ho { position: absolute; top: 0; left: 0; z-index: 1; }
#header .mypage .inner .txt { position: absolute; top: 0; left: 0; z-index: 3; }

#header .lang_btn { position: absolute; top: 12px; right: -65px; }
#header .lang_btn a { display: inline-block; width: 50px; height: 50px; border: 2px solid #85bbff; border-radius: 50%; background: #d9eaff; color: #004aa7; font-size: 1.25em; padding-right: 2px; box-sizing: border-box; transition: .3s; position: relative; z-index: 2; }
#header .lang_btn a .xi { margin-left: -1px; }

#header .lang_btn ul { position: relative; z-index: 1; display: none; }
#header .lang_btn ul .lang { border: 1px solid #DDD; background: #f3f8ff; }
#header .lang_btn ul .lang.jp { transform: translate(0, -50px); }
#header .lang_btn ul .lang.en { transform: translate(0, -100px); }
#header .lang_btn ul .lang.kr { transform: translate(0, -150px); }
#header .lang_btn ul.on { display: block; }
#header .lang_btn ul.on .lang { margin-top: 10px; }
#header .lang_btn ul.on .lang.jp { transform: translate(0, 0); }
#header .lang_btn ul.on .lang.en { transform: translate(0, 0); }
#header .lang_btn ul.on .lang.kr{ transform: translate(0, 0); }


#header .admin_btn { position: absolute; top: 12px; right: -185px; }
#header .admin_btn a { display: inline-block; width: 50px; height: 50px; border: 2px solid #333; border-radius: 50%; background: #000; font-size: 1.25em; box-sizing: border-box; padding-right: 2px; color: #FFF; }

#header .login { position: absolute; top: 12px; right: -125px; }
#header .login a { display: inline-block; width: 50px; height: 50px; border: 2px solid #ffb47a; border-radius: 50%; background: #fff2e8; font-size: 1.25em; box-sizing: border-box; color: #ff4646; }
#header .login a .xi { margin-left: -3px; }

#header .logout { position: absolute; top: 12px; right: -125px; }
#header .logout a { display: inline-block; width: 50px; height: 50px; border: 2px solid #cbcbcb; border-radius: 50%; background: #FFF; font-size: 1.25em; box-sizing: border-box; }
#header .logout a .xi { margin-left: -2px; }

#header .m_btn_w { display: none; }
#header .m_btn_w > a { display: inline-block; width: 50px; height: 50px; border: 2px solid #333; border-radius: 50%; background: #000; font-size: 1.25em; box-sizing: border-box; padding-right: 2px; color: #FFF; }
#header .m_btn_w > a .xi { margin-right: -1px; }

.stW#header .mypage { right: -124px; }

#header .location_w { position: fixed; bottom: 16px; left: 50%; width: 1200px; transform: translate(-50%, 0); text-align: right; }
#header .location_w .inner { display: inline-block; background: #340045; color: #FFF; width: 180px; height: 60px; border-radius: 60px; line-height: 60px; text-align: left; cursor: pointer; box-shadow: 0 0px 10px #f99fff; margin-right: 20px; }
#header .location_w .inner .xi { width: 48px; height: 48px; border-radius: 50%; text-align: center; line-height: 48px; margin-left: 7px; margin-top: -6px; font-size: 1.5em; vertical-align: middle; background: #8e00bc; }
#header .location_w .inner span { display: inline-block; vertical-align: middle; margin-left: 20px; font-size: 1.063em; margin-top: -6px; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(233, 156, 255, 1); }
}

#header .fix_top_btn { position: fixed; bottom: 20px; left: calc(50% + 618px); }
#header .fix_top_btn a { display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; background: #5760ff; color: #FFF; text-align: center; vertical-align: top; position: relative; border: 2px solid #8ec9ff; }
#header .fix_top_btn a .xi { position: absolute; left: 0; top: -7px; width: 100%; text-align: center; }
#header .fix_top_btn a .st { position: absolute; bottom: -10px; left: 0; width: 100%; text-align: center; font-size: .625em; letter-spacing: 2px; padding-left: 3px; box-sizing: border-box; }
#header .fix_top_btn a:hover,
#header .fix_top_btn a:focus { animation: pulse 1s infinite linear; box-shadow: 0 0 0 .625em rgba(255, 255, 255,0); }


/*
#header .etc { display: inline-block; position: absolute; top: 0; right: 0; height: 90px; }
#header .etc a { display: inline-block; }
#header .etc .info { font-size: 1.5em; padding: 0 10px; marginr-right: 10px; }
#header .etc .m_btn { margin: 0 10px; width: 32px; height: 26px; position: relative; transition: .3s; }
#header .etc .top { position: absolute; top: 0; left: 0; width: 32px; height: 4px; background: #ff3ac5; transition: .3s; z-index: 2; }
#header .etc .mid { position: absolute; top: 50%; left: 0; margin-top: -2px; width: 32px; height: 4px; background: #ffdc3a; transition: .3s; }
#header .etc .btm { position: absolute; bottom: 0; left: 0; width: 32px; height: 4px; background: #39fffd; transition: .3s; z-index: 1; }

#header .etc .m_btn.on .top { transform: rotate(45deg); top: 10px; }
#header .etc .m_btn.on .mid { display: none; }
#header .etc .m_btn.on .btm { transform: rotate(-45deg); bottom: 11px; }
*/

/*main con*/
#contents { position: relative; z-index: 1; }
#contents.my_index { z-index: 3; }
#contents .mainvisual { width: 1200px; height: calc(100vh - 105px); margin: 0 auto; max-width: 96%; }
#contents .mainvisual .inner { width: 100%; height: 100%; position: relative; }
#contents .mainvisual .inner .main_cha { position: absolute; top: 0; left: 0; width: 267px; height: 309px; }
#contents .mainvisual .inner .main_cha.cha_1 { top: 0; left: calc(50% - 267px - 16px); transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_2 { top: 0; left: 50%; transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_3 { top: 0; left: calc(50% + 267px + 16px); transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_4 { top: calc(231px + 16px); left: calc(50% - 133px - 8px - 267px - 16px); transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_5 { top: calc(231px + 16px); left: calc(50% - 133px - 8px); transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_6 { top: calc(231px + 16px); left: calc(50% + 133px + 8px); transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_7 { top: calc(231px + 16px); left: calc(50% + 133px + 8px + 16px + 267px); transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_8 { top: calc(231px + 16px + 231px + 16px); left: calc(50% - 267px - 16px); transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_9 { top: calc(231px + 16px + 231px + 16px); left: 50%; transform: translate(-50%, 0); }
#contents .mainvisual .inner .main_cha.cha_10 { top: calc(231px + 16px + 231px + 16px); left: calc(50% + 267px + 16px); transform: translate(-50%, 0); }

#contents .mainvisual .inner .left_tt { position: absolute; top: 33px; left: 0; z-index: 1; }
#contents .mainvisual .inner .left_tt img { width: 162px; }
#contents .mainvisual .inner .right_tt { position: absolute; top: 86px; right: 0; z-index: 1; }
#contents .mainvisual .inner .right_tt img { width: 130px; }

#contents .mainvisual .inner .banner_w { position: absolute; bottom: 75px; right: 0; transform: translate(100%, 0); }
#contents .mainvisual .inner .banner_w ul li:not(:last-child) { margin-bottom: 15px; }
#contents .mainvisual .inner .banner_w ul li a { display: inline-block; transition: .3s; }



#contents > .inner { width: 100%; height: 100%; position: relative; }
#contents > .inner .main_cha { position: fixed; top: 0; left: 0; width: 242px; }
#contents > .inner .main_cha.on { filter: none!important; opacity: 100%!important; }
#contents > .inner .main_cha.cha_1 { top: calc(220px + 209px + 16px); left: calc(121px + 16px); transform: translate(-50%, 0); filter: grayscale(100%); opacity: 50%; } /*left*/
#contents > .inner .main_cha.cha_4 { top: calc(220px); left: calc(8px); transform: translate(-50%, 0); filter: grayscale(100%); opacity: 50%; } /*left*/
#contents > .inner .main_cha.cha_5 { top: calc(220px + 209px + 16px + 209px + 16px); left: calc(8px); transform: translate(-50%, 0); filter: grayscale(100%); opacity: 50%; } /*left*/
#contents > .inner .main_cha.cha_8 { top: calc(220px + 209px + 16px + 209px + 16px + 209px + 16px); left: calc(121px + 16px); transform: translate(-50%, 0); filter: grayscale(100%); opacity: 50%; } /*left*/
#contents > .inner .main_cha.cha_9 { top: calc(220px + 209px + 16px + 209px + 16px); left: calc(8px + 242px + 16px); transform: translate(-50%, 0); filter: grayscale(100%); opacity: 50%; } /*left*/



#contents > .inner .main_cha.cha_2 { top: calc(78px + 209px + 16px); left: auto; right: calc(121px + 16px); transform: translate(50%, 0); filter: grayscale(100%); opacity: 50%; } /*right*/
#contents > .inner .main_cha.cha_3 { top: calc(78px + 209px + 16px + 209px + 16px); left: auto; right: calc(8px + 242px + 16px); transform: translate(50%, 0); filter: grayscale(100%); opacity: 50%; } /*right*/
#contents > .inner .main_cha.cha_6 { top: calc(78px); left: auto; right: calc(8px); transform: translate(50%, 0); filter: grayscale(100%); opacity: 50%; } /*right*/
#contents > .inner .main_cha.cha_7 { top: calc(78px + 209px + 16px + 209px + 16px); left: auto; right: calc(8px); transform: translate(50%, 0); filter: grayscale(100%); opacity: 50%; } /*right*/
#contents > .inner .main_cha.cha_10 { top: calc(78px + 209px + 16px + 209px + 16px + 209px + 16px); left: auto; right: calc(121px + 16px); transform: translate(50%, 0); filter: grayscale(100%); opacity: 50%; } /*right*/


/*
#contents .subV .inner .main_cha.on { margin-top: -45px; }
#contents .subV .inner .main_cha.on_2 { margin-top: -90px; }
#contents .subV .inner .main_cha.on_3 { margin-top: -135px; }
#contents .subV .inner .main_cha.on_4 { margin-top: -180px; }
#contents .subV .inner .main_cha.on_5 { margin-top: -225px; }
*/

/*
#contents .mainvisual .slide { width: 97%; padding-bottom: 41.934%; margin: 0 auto; position: relative; overflow: hidden; }
#contents .mainvisual .slide > li { position: absolute; top: 0; left: 0; }
*/

#contents .notice_w { margin-top: 30px; }
#contents .notice_w .tit { text-align: center; background: url('/wh/images/notice_tit.png') no-repeat 50% 50%; font-size: 1.438em; height: 112px; font-weight: 600; color: #96008a; letter-spacing: 0.5px; position: relative; z-index: 2; }
#contents .notice_w .con { margin-top: 55px; }
#contents .notice_w .tab_idx { font-size: 0; text-align: center; }
#contents .notice_w .tab_idx li { display: inline-block; position: relative; cursor: pointer; }
#contents .notice_w .tab_idx li:not(:last-child) { margin-right: 80px; }
#contents .notice_w .tab_idx li .bg { position: relative; width: 114px; height: 114px; border-radius: 50%; transform: rotate(45deg); transition: .5s; }
#contents .notice_w .tab_idx li .bg:before { content: ""; width: 50px; height: 50px; border-radius: 50%; position: absolute; left: -25px; top: 50%; margin-top: -25px; }
#contents .notice_w .tab_idx li .bg:after { content: ""; width: 50px; height: 50px; border-radius: 50%; position: absolute; right: -25px; top: 50%; margin-top: -25px; }
#contents .notice_w .tab_idx li .txt { font-size: 1.125rem; position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px; width: 96px; height: 96px; line-height: 96px; border-radius: 50%; border: 3px solid #ff3ac5; text-align: center; background: rgba(255,255,255,.55); color: #ff3ac5; font-weight: 600; }

#contents .notice_w .tab_idx li.on .bg { transform: rotate(180deg); }
#contents .notice_w .tab_idx li.on .txt { background: rgba(255,255,255,.92); }

#contents .notice_w .tab_idx li.notice_tab .bg { background: #f9bee9; }
#contents .notice_w .tab_idx li.notice_tab .bg:before { background: #f9bee9; }
#contents .notice_w .tab_idx li.notice_tab .bg:after { background: #f9bee9; }
#contents .notice_w .tab_idx li.notice_tab .txt { border: 3px solid #ff3ac5; color: #ff3ac5; }

#contents .notice_w .tab_idx li.update_tab .bg { background: #befbfa; }
#contents .notice_w .tab_idx li.update_tab .bg:before { background: #befbfa; }
#contents .notice_w .tab_idx li.update_tab .bg:after { background: #befbfa; }
#contents .notice_w .tab_idx li.update_tab .txt { border: 3px solid #39bbff; color: #39bbff; }

#contents .notice_w .tab_idx li.event_tab .bg { background: #ffea8b; }
#contents .notice_w .tab_idx li.event_tab .bg:before { background: #ffea8b; }
#contents .notice_w .tab_idx li.event_tab .bg:after { background: #ffea8b; }
#contents .notice_w .tab_idx li.event_tab .txt { border: 3px solid #ffb400; color: #ffb400; }

#contents .notice_w .con_idx { margin-top: 45px; }
#contents .notice_w .con_idx .idx .txt { border: 3px solid #ff3ac5; border-radius: 30px; padding: 45px 50px; box-sizing: border-box; background: rgba(255,255,255,.95); }
#contents .notice_w .con_idx .idx .tt { transition: .3s; cursor: pointer; opacity: .75; }
#contents .notice_w .con_idx .idx .tt:hover { opacity: 1; }
#contents .notice_w .con_idx .idx .tt:not(:last-child) { margin-bottom: 40px; }
#contents .notice_w .con_idx .idx .tt .t1 { position: relative; font-size: 1.063em; color: #ff1a8b; margin-bottom: 10px; font-weight: 600; }
#contents .notice_w .con_idx .idx .tt .t1 span { position: absolute; top: 0; right: 0; vertical-align: top; font-weight: 500; font-size: .938em; }
#contents .notice_w .con_idx .idx .tt .t2 { font-size: .938em; color: #555; }
#contents .notice_w .con_idx .idx .btn { text-align: center; margin-top: 25px; }
#contents .notice_w .con_idx .idx .btn a { display: inline-block; width: 272px; height: 60px; border-radius: 60px; background: #ff2b80; transition: .3s; padding: 6px; box-sizing: border-box; }
#contents .notice_w .con_idx .idx .btn a span { display: inline-block; width: 256px; height: 44px; line-height: 44px; border-radius: 48px; background: #ff2b80; transition: .3s; border: 2px solid #FFF; color: #FFF; }
#contents .notice_w .con_idx .idx .btn a:hover span { background: #ff6ba6; }

#contents .notice_w .con_idx .idx.update_idx .txt { border-color: #39bbff; }
#contents .notice_w .con_idx .idx.update_idx .tt .t1 { color: #1e8dff; }
#contents .notice_w .con_idx .idx.update_idx .btn a { background: #1e8dff; }
#contents .notice_w .con_idx .idx.update_idx .btn a span { background: #1e8dff; }
#contents .notice_w .con_idx .idx.update_idx .btn a:hover span { background: #62b0ff; }

#contents .notice_w .con_idx .idx.event_idx .txt { border-color: #ffb400; }
#contents .notice_w .con_idx .idx.event_idx .tt .t1 { color: #ec9000 }
#contents .notice_w .con_idx .idx.event_idx .btn a { background: #ff9f09; }
#contents .notice_w .con_idx .idx.event_idx .btn a span { background: #ff9f09; }
#contents .notice_w .con_idx .idx.event_idx .btn a:hover span { background: #ffc05e; }



#contents .notice_w .wrap_idx { position: relative; }
#contents .notice_w .wrap_idx .and { position: absolute; bottom: -138px; left: 0; right: 0; font-size: 8em; color: #eee; font-weight: 700; text-align: center; }

#contents .music_w { margin-top: 165px; text-align: center; }
#contents .music_w .box1 { position: relative; height: 345px; }
#contents .music_w .music:first-child { position: absolute; top: 0; left: 50%; margin-left: -354px; }
#contents .music_w .music:nth-child(2) { position: absolute; top: 0; left: 50%; margin-left: -88px; }
#contents .music_w .music:nth-child(3) { position: absolute; top: 0; right: 50%; margin-right: -354px; }
#contents .music_w .music:nth-child(4) { position: absolute; top: 150px; left: 50%; margin-left: -220px;}
#contents .music_w .music:last-child { position: absolute; top: 150px; right: 50%; margin-right: -220px; }

#contents .music_w .music { display: inline-block; transform: rotate(45deg); padding: 15px; border-radius: 25px; }
#contents .music_w .music .inner { position: relative; width: 140px; height: 140px; border-radius: 20px; overflow: hidden; transition: .3s; }
#contents .music_w .music .inner .inc { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,.65); transition: .3s; }
#contents .music_w .music .inner img { position: absolute; top: 50%; left: 50%; margin-top: -148px; margin-left: -148px; max-width: none; }
#contents .music_w .music .inner .txt { display: none; position: absolute; top: 50%; left: 50%; transform: rotate(-45deg); margin-top: -18px; margin-left: -54px; z-index: 2; transition: .3s; }
#contents .music_w .music .inner:hover .inc { display: inline-block; }
#contents .music_w .music .inner:hover .txt { display: block; }
#contents .music_w .music .inner .txt .t1 { font-size: 1.063em; color: #FFF; margin-bottom: 10px;}
#contents .music_w .music .inner .txt .t2 { font-size: .875em; color: #BBB; }

#contents .music_w .music.bg_g { background: linear-gradient( 135deg, rgba(2,0,36,1) 0%, rgba(94,249,124,1) 0%, rgba(52,169,52,1) 100%); }
#contents .music_w .music.bg_b { background: linear-gradient( 135deg, rgba(2,0,36,1) 0%, rgba(105,200,249,1) 0%, rgba(53,138,171,1) 100%);; }
#contents .music_w .music.bg_r { background: linear-gradient( 135deg, rgba(2,0,36,1) 0%, rgba(249,104,142,1) 0%, rgba(199,50,99,1) 100%); }

#contents .game_w { margin-top: 136px; }
#contents .game_w .tit_w { width: 130%; height: 130px; background: #ed145b; transform: rotate(15deg); margin-left: -15%; position: relative; z-index: 1; }
#contents .game_w .tit_w .box1 { position: relative; }
#contents .game_w .tit_w .left_bg { position: absolute; left: 0; bottom: -20px; margin-left: -620px;}
#contents .game_w .tit_w .right_bg { position: absolute; right: 0; bottom: 10px; margin-right: -620px; }
#contents .game_w .tit_w .tit { height: 130px; line-height: 130px; position: relative; padding-left: 320px; box-sizing: border-box; }
#contents .game_w .tit_w .tit > img { position: absolute; top: -62px; left: 0; }
#contents .game_w .tit_w .tit .t1 { display: inline-block; font-size: 1.625em; color: #FFF; font-weight: 600; letter-spacing: 0.5px; }
#contents .game_w .tit_w .tit .t2 { display: inline-block; font-size: 1.125em; color: #ffafc9; font-weight: 500; margin-left: 50px; letter-spacing: 3px; }

#contents .game_w .con { padding: 470px 0 270px 0; margin-top: -258px; background: url('/wh/images/game_bg.png') no-repeat 50% 0%; position: relative; }
#contents .game_w .con:after { content: ""; width: 130%; height: 510px; position: absolute; bottom: -250px; left: -15%; background: rgba(255,255,255,.8); transform: rotate(15deg); }
#contents .game_w .con .game { position: relative; }
#contents .game_w .con .game .txt_w { padding: 60px 85px 60px 360px; margin-left: 30px; border: 3px solid #ed145b; background: rgba(255,255,255,.8); border-radius: 30px; box-sizing: border-box; position: relative; z-index: 3; }
#contents .game_w .con .game .txt_w .tt { margin-bottom: 28px; position: relative; padding-left: 20px; }
#contents .game_w .con .game .txt_w .tt:before { content:""; position: absolute; top: 0; left: 0; width: 6px; height: 28px; background: #ff2ec1; margin-top: -2px; }
#contents .game_w .con .game .txt_w .tt:nth-child(1):before { background: #ff2ec1; }
#contents .game_w .con .game .txt_w .tt:nth-child(2):before { background: #39fffd; }
#contents .game_w .con .game .txt_w .tt:nth-child(3):before { background: #ffdc3a; }
#contents .game_w .con .game .txt_w .tt:nth-child(4):before { background: #ff2ec1; }
#contents .game_w .con .game .txt_w .tt:nth-child(5):before { background: #39fffd; }
#contents .game_w .con .game .img_1 { position: absolute; top: -192px; left: 0; z-index: 4; }
#contents .game_w .con .game .img_2 { position: absolute; top: -192px; left: 0; z-index: 2; }
#contents .game_w .con .game .img_3 { position: absolute; top: -192px; left: 0; z-index: 1; }

#contents .game_w .con .ca_con { margin-top: 200px; }
#contents .game_w .con .ca_con .ca_text_w { width: 1200px; margin: 0 auto; border: 5px solid #a64c09; background: #ffcd00; box-sizing: border-box; height: 392px; border-radius: 50px; padding: 10px; position: relative; }
#contents .game_w .con .ca_con .ca_text_w .l_arrow { position: absolute; top: 50%; left: -125px; margin-top: -17px; }
#contents .game_w .con .ca_con .ca_text_w .r_arrow { position: absolute; top: 50%; right: -125px; margin-top: -17px; }
#contents .game_w .con .ca_con .ca_text_w .inner { width: 100%; height: 100%; background: #FFF; border-radius: 35px; position: relative; overflow: hidden; padding: 70px 50px 20px 90px; box-sizing: border-box; }
#contents .game_w .con .ca_con .ca_text_w .inner > .bg { position: absolute; top: 30px; right: 30px; opacity: .25; transition: .3s; }
#contents .game_w .con .ca_con .ca_text_w .inner:hover > .bg { opacity: .6; }
#contents .game_w .con .ca_con .ca_text_w .inner .t1 { color: #5b9fff; font-size: 1.25em; font-weight: 500; }
#contents .game_w .con .ca_con .ca_text_w .inner .t2 { color: #3570c4; font-size: 1.438em; margin-top: 5px; font-weight: 600; }
#contents .game_w .con .ca_con .ca_text_w .inner .t3 { color: #555555; line-height: 1.5; margin-top: 15px; }

#contents .game_w .con .ca_con .ca_text_w .inner .illu_img_w { display: inline-block; position: relative; }
#contents .game_w .con .ca_con .ca_text_w .inner .illu_img_w .img { position: relative; z-index: 2; width: 220px; height: 220px; border-radius: 50%; box-sizing: border-box; border: 6px solid #539aff; background: #FFF; text-align: center; padding-top: 39px; padding-left: 15px; }
#contents .game_w .con .ca_con .ca_text_w .inner .illu_img_w .img img { display: inline-block; }
#contents .game_w .con .ca_con .ca_text_w .inner .illu_img_w .bg { position: absolute; top: 110px; left: 0; }
#contents .game_w .con .ca_con .ca_text_w .inner .txt { display: inline-block; margin-left: 90px; }

#contents .game_w .con .fin_bd { width: 130%; height: 130px; background: #ed145b; transform: rotate(15deg); margin-left: -15%; position: relative; }
#contents .game_w .con .fin_bd .border_1 { width: 100%; height: 34px; background: #ff4682; position: absolute; top: 20px; left: 0; }
#contents .game_w .con .fin_bd .border_2 { width: 100%; height: 34px; background: #ffb6ce; position: absolute; bottom: 20px; left: 0; }

#contents .game_w .con .ca_all_img { font-size: 0; text-align: center; position: relative; height: 460px; margin-top: 60px; z-index: 1; }
#contents .game_w .con .ca_all_img .img_w { display: inline-block; font-size: 1rem; position: absolute; top: 0; left: 50%; transition: .3s; }

#contents .game_w .con .ca_all_img .img_w.po_1 { margin-left: -175px; z-index: 10; }
#contents .game_w .con .ca_all_img .img_w.po_2 { margin-left: -30px; z-index: 9; }
#contents .game_w .con .ca_all_img .img_w.po_3 { margin-left: 115px; z-index: 8; }
#contents .game_w .con .ca_all_img .img_w.po_4 { margin-left: 260px; z-index: 7; }
#contents .game_w .con .ca_all_img .img_w.po_5 { margin-left: 405px; z-index: 6; }
#contents .game_w .con .ca_all_img .img_w.po_6 { margin-left: -320px; z-index: 9; }
#contents .game_w .con .ca_all_img .img_w.po_7 { margin-left: -465px; z-index: 8; }
#contents .game_w .con .ca_all_img .img_w.po_8 { margin-left: -610px; z-index: 7; }
#contents .game_w .con .ca_all_img .img_w.po_9 { margin-left: -755px; z-index: 6; }

#contents .game_w .con .ca_all_img .img_w.on .inner img { top: -632px; }
#contents .game_w .con .ca_all_img .img_w:hover .inner img { top: -632px; }
#contents .game_w .con .ca_all_img .img_w .inner { width: 351px; height: 632px; overflow: hidden; position: relative; }
#contents .game_w .con .ca_all_img .img_w .inner img { position: absolute; top: 0; left: 0; }


/*footer*/
#footer { position: relative; z-index: 2; }
#footer .sns { width: 100%; height: 85px; line-height: 85px; background: url('/wh/images/footer_bg.png') no-repeat 50% 50%; font-size: 0; text-align: center; }
#footer .sns > div { display: inline-block; }
#footer .sns > div a { font-size: 1.375rem; color: #FFF; display: inline-block; width: 55px; height: 55px; border-radius: 50%; line-height: 55px; }
#footer .sns > div a .xi { vertical-align: top; }
#footer .sns > div:not(:last-child) a { margin-right: 35px; }
#footer .sns > div.youtube a { background: #db4a3a; }
#footer .sns > div.twitter a { background: #1da1f2; }
#footer .sns > div.line a { background: #42b847; }
#footer .sns > div.facebook a { background: #1178f2; }

#footer .img_w { width: 100%; height: 85px; line-height: 85px; background: url('/wh/images/footer_bg.png') no-repeat 50% 50%; font-size: 0; text-align: center; padding-top: 5px; box-sizing: border-box; }
#footer .img_w img { display: inline-block; width: 230px; }

#footer .copyright { text-align: center; background: #ebf8ff; padding: 18px 0; }
#footer .copyright .img { display: inline-block; margin: 0 auto; width: 280px; max-width: 90%; }
#footer .copyright .txt { font-size: .875em; color: #666; line-height: 1.5; }
#footer .company { background: #268fcc; text-align: center; padding: 20px 0; }
#footer .company img { display: inline-block; }


/*sub page*/

/*add 2021-12-16*/
.faq_area li dl dt a span.txt { word-break:  break-all; }
.faq_area li dl dd span.txt { word-break:  break-all; }
.faq_area li dl dd span.txt > p { word-break: break-all; }
/*login*/
.video_bg { position: absolute; top: -150px; left: 0; }
.login_bg.doc { height: 100vh; box-sizing: border-box; padding-top: 90px; padding-bottom: 0; position: relative; z-index: 2; }
.login_w { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 560px; padding: 50px 90px; box-sizing: border-box; background: rgba(255,255,255,0.92); box-shadow: 0 1px 3px rgba(0,0,0,.6); border-top: 5px solid #ff3bc4; border-bottom: 5px solid #ffdb3b; transition: .3s; }
.login_w:hover { background: #FFF; }
.login_w .st { font-size: .938em; margin-top: 20px; color: #666; }

.login_w .logo img { display: inline-block; }
.login_w .logo img:nth-child(2) { margin-left: 5px; margin-right: 15px; display: none; }
.login_w .logo img:nth-child(3) { margin-top: 10px; display: none; }

.login_w .input_w { margin-top: 27px; }
.login_w .id_input { position: relative; }
.login_w .id_input input { padding-left: 46px; height: 46px; }
.login_w .id_input .xi { position: absolute; top: 0; left: 0; width: 46px; height: 46px; line-height: 46px; color: #888; }

.login_w .id_input input:hover + .xi,
.login_w .id_input input:focus + .xi{ color:#1d71ff}

.login_w .pw_input { position: relative; margin-top: 10px; }
.login_w .pw_input input { padding-left: 46px; height: 46px; }
.login_w .pw_input .xi { position: absolute; top: 0; left: 0; width: 46px; height: 46px; line-height: 46px; color: #888; }

.login_w .pw_input input:hover + .xi,
.login_w .pw_input input:focus + .xi{ color:#1d71ff}

.login_w .login { margin-top: 15px; }
.login_w .login input { background: #309aff; color: #FFF; height: 46px; }
.login_w .join { margin-top: 10px; }
.login_w .join input { height: 46px; }

.login_w .sns_w { border: 1px solid #DDD; padding: 20px; box-sizing: border-box; margin-top: 25px; }
.login_w .sns_w .tt { font-size: .938em; color: #777; margin-bottom: 20px; word-break: break-all; }
.login_w .sns_w .sns > div { display: inline-block; }
.login_w .sns_w .sns > div a { font-size: 1.063rem; color: #FFF; display: inline-block; width: 45px; height: 45px; border-radius: 50%; line-height: 42px; }
.login_w .sns_w .sns > div:not(:last-child) a { margin-right: 10px; }
.login_w .sns_w .sns > div.youtube a { background: #db4a3a; }
.login_w .sns_w .sns > div.twitter a { background: #1da1f2; }
.login_w .sns_w .sns > div.line a { background: #42b847; }
.login_w .sns_w .sns > div.facebook a { background: #1178f2; }
.login_w .sns_w .sns > div.kakao a { background: #ffeb00; }
/* .login_w .sns_w .sns > div.kakao { display: none; } */

.login_w .lost { margin-top: 10px; }
.login_w .lost a { font-size: .875em; color: #919191; text-decoration: underline; transition: .3s; }
.login_w .lost a:hover { color: #555; }

/*sub*/
.sub_tit { width: 1141px; height: 70px; margin: 105px auto 0 auto; position: relative; background: url('../images/title_bg.png') no-repeat 50% 0%; }
.sub_tit .t1 { position: absolute; bottom: 18px; left: 185px; width: 500px; letter-spacing: 8px; text-align: center; font-weight: 600; color: #FFF; font-size: 2em; font-family: 'M PLUS Rounded 1c', sans-serif; }
.sub_tit .t2 { display: none; position: absolute; bottom: 20px; left: 480px; color: #b8c3ff; font-weight: 300; font-size: .813em; letter-spacing: 12px; }
.sub_tit .t3 { display: none; position: absolute; bottom: 3px; right: 90px; color: #446aff; font-weight: 500; font-size: .750em; letter-spacing: 8px; }

/*note_bg*/
.note_bg { opacity: .1; transition: .3s; position: absolute; display: none; }
.note_bg:hover { opacity: .7; }
.note_bg.note_1 { position: absolute; left: 140px; top: 120px; }
.note_bg.note_2 { position: absolute; left: 50px; top: 320px; }
.note_bg.note_3 { position: absolute; left: 235px; top: 465px; transform: rotate(45deg); }
.note_bg.note_4 { position: absolute; left: 115px; top: 630px; transform: rotate(-45deg); }
.note_bg.note_5 { position: absolute; left: 20px; top: 805px; }
.note_bg.note_6 { position: absolute; left: 30px; top: 985px; }
.note_bg.note_7 { position: absolute; left: 170px; top: 1155px; transform: rotate(45deg); }
.note_bg.note_8 { position: absolute; left: 50px; top: 1345px; }
.note_bg.note_9 { position: absolute; left: 140px; top: 1525px; transform: rotate(-45deg); }
.note_bg.note_21 { position: absolute; left: 140px; top: 1700px; }
.note_bg.note_22 { position: absolute; left: 50px; top: 1900px; }
.note_bg.note_23 { position: absolute; left: 235px; top: 2045px; transform: rotate(45deg); }
.note_bg.note_24 { position: absolute; left: 115px; top: 2210px; transform: rotate(-45deg); }
.note_bg.note_25 { position: absolute; left: 20px; top: 2385px; }


.note_bg.note_11 { position: absolute; right: 30px; top: 180px; }
.note_bg.note_12 { position: absolute; right: 170px; top: 350px; transform: rotate(45deg); }
.note_bg.note_13 { position: absolute; right: 50px; top: 540px; }
.note_bg.note_14 { position: absolute; right: 140px; top: 720px; transform: rotate(-45deg); }
.note_bg.note_15 { position: absolute; right: 97px; top: 897px; }
.note_bg.note_16 { position: absolute; right: 50px; top: 1070px; }
.note_bg.note_17 { position: absolute; right: 235px; top: 1215px; transform: rotate(45deg); }
.note_bg.note_18 { position: absolute; right: 115px; top: 1380px; transform: rotate(-45deg); }
.note_bg.note_19 { position: absolute; right: 20px; top: 1555px; }
.note_bg.note_31 { position: absolute; right: 30px; top: 1760px; }
.note_bg.note_32 { position: absolute; right: 170px; top: 1930px; transform: rotate(45deg); }
.note_bg.note_33 { position: absolute; right: 50px; top: 2120px; }
.note_bg.note_34 { position: absolute; right: 140px; top: 2300px; transform: rotate(-45deg); }








/*new_sub_nav*/
.n_sub_nav { position: relative; width: 100%; height: 116px; border-top: 2px solid #2cf18f; border-bottom: 2px solid #2cf18f; background: linear-gradient(to right, #ec0f77 0%, #5639d4 100%); overflow: hidden; }
.n_sub_nav .left_bg { position: absolute; left: -94px; bottom: -74px; transform: rotate(87deg); }
.n_sub_nav .right_bg { position: absolute; right: -120px; top: -226px; }
.n_sub_nav > ul { width: 1200px; max-width: 96%; margin: 0 auto; text-align: center; font-size: 0; padding: 30px 0; position: relative; z-index: 1; }
.n_sub_nav > ul > li { display: inline-block; font-size: 1.063rem; font-weight: 900; color: #572ac4; cursor: pointer; margin-right: 50px; }
.n_sub_nav > ul > li:last-child { margin-right: 0; }
.n_sub_nav > ul > li > div { display: inline-block; width: 155px; height: 56px; box-sizing: border-box; letter-spacing: 0; }
.n_sub_nav > ul > li p { display: inline-block; width: 155px; height: 56px; background: linear-gradient(135deg, #d6e85b 0%, #2cfbde 100%); border-radius: 5px; box-sizing: border-box; padding: 3px; vertical-align: middle; margin-right: 2px; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition: 1.1s; }
.n_sub_nav > ul > li p:last-child { position: relative; top: -100%; transform:rotateY(180deg); background: linear-gradient(135deg, #fff1c9 0%, #fbb52c 100%); }

.n_sub_nav > ul > li p > span { display: inline-block; width: 100%; height: 100%; border: 3px solid #1668d2; box-sizing: border-box; border-radius: 5px; line-height: 40px; vertical-align: middle; }
.n_sub_nav > ul > li p:last-child > span { border-color: #ad00c1; color: #bd0095; }

.n_sub_nav > ul > li:hover div p:first-child { transform:rotateY(-180deg); }
.n_sub_nav > ul > li:hover div p:last-child { transform:rotateY(0deg); }

.n_sub_nav > ul > li.on div p:first-child { transform:rotateY(-180deg); }
.n_sub_nav > ul > li.on div p:last-child { transform:rotateY(0deg); }




/*4-1*/

.sub_title { width: 1260px; max-width: 96%; margin: 0 auto; text-align: center; padding-top: 45px; }
.sub_title .tt { font-size: 1.875em; font-weight: 600; color: #ff8400; position: relative; }
.sub_title .tt .left { position: absolute; top: 50%; left: 0; margin-top: -10px; }
.sub_title .tt .right { position: absolute; top: 50%; right: 0; margin-top: -10px; }

.sub_title .st { margin-top: 8px; font-size: .875em; letter-spacing: 8px; color: #ffc79b; padding-left: 5px; }

.subV.doc { padding-top: 0; padding-bottom: 0; position: relative; }

/* .subV.doc { width: 1370px; margin: 130px auto 0 auto; background: rgba(255,255,255,.92); border: 5px solid #df0090; box-sizing: border-box; border-radius: 40px 40px 0 0; border-bottom: 0; padding-top: 0; position: relative; z-index: 2; } */
.sub_header { width: 97%; margin: 0 auto; height: 280px; background: url('/wh/images/notice_s_bg.png') no-repeat 50% 50%; position: relative; text-align: center; }
.sub_header .center_bg { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; }
.sub_header .center_bg img { display: inline-block; }
.sub_header .txt { position: absolute; bottom: 55px; left: 0; width: 100%; text-align: center; }
.sub_header .st { font-size: 1.125em; color: #00aeef; letter-spacing: 6px; }
.sub_header .tt { font-size: 2em; color: #FFF; font-weight: 500; margin-top: 7px; }

.select_w { display: inline-block; position: relative; vertical-align: top; }
.select_w .xi { position: absolute; top: 0; right: 10px; width: 35px; height: 35px; line-height: 36px; text-align: center; }
.select_w select { position: relative; z-index: 1; }

.admin_checkbox { position: relative; }
.admin_checkbox .check_w { font-size: 1rem; position: absolute; top: 30px; left: -30px; cursor: pointer; }

.list_w { }
.list_w ul { width: 1100px; margin: 0 0 0 auto; }
.list_w ul li { box-sizing: border-box; font-size: 0; }
.list_w ul li > div { position: relative; padding: 50px 40px; cursor: pointer; background: url('../images/notice_bg.png') no-repeat 0% 50%; opacity: .88; transition: .3s; }
.list_w ul li > div:hover { opacity: 1; }

.list_w ul li > div .new_icon { position: absolute; top: -14px; left: -14px; transform: rotate(-30deg); z-index: 1; }

.list_w ul li .img { display: inline-block; width: 264px; border: 1px solid #DDD; font-size: 1rem; vertical-align: middle; box-sizing: border-box; }
.list_w ul li .img .resize { padding-bottom: 61.5%; }

.list_w ul li .txt_w { display: inline-block; width: calc(100% - 264px); font-size: 1rem; vertical-align: middle; padding-left: 60px; margin-top: 12px; box-sizing: border-box; }

.list_w ul li .day { }
.list_w ul li .day .dd { display: inline-block; vertical-align: middle; font-size: 2.5em; padding-right: 10px; border-right: 1px solid #DDD; /*공지사항*/ color: #ff1a8b; /* 업데이트 color: #0052b8;*//*이벤트 color: #ec9000; */ }
.list_w ul li .day .yy { display: inline-block; vertical-align: middle; font-size: 0; font-weight: 500; color: #222; }

.list_w ul li .day .yy .t1 { display: inline-block; font-size: 1.125rem; padding: 0 22px; height: 32px; line-height: 30px; background: #9a26aa; color: #FFF; vertical-align: top; }
.list_w ul li .day .yy .t2 { display: inline-block; color: #9a26aa; font-size: 1rem; padding: 0 19px 0 15px; height: 32px; line-height: 29px; vertical-align: top; border: 1px solid #9a26aa; box-sizing: border-box; }

.list_w ul li .txt { margin-top: 15px; }
.list_w ul li .txt .tt { font-size: 1.125em; font-weight: 600; color: #222; }
.list_w ul li .txt .st { display: none; font-size: .938em; margin-top: 20px; line-height: 1.4; color: #999; font-weight: 400; text-overflow:ellipsis; overflow:hidden; white-space: normal; height:84px; word-wrap: break-word!important; /* display: -webkit-box; */ -webkit-line-clamp:4; -webkit-box-orient: vertical; }


.list_w.wh_ed .txt { padding-left: 40px; width: 70%; box-sizing: border-box; }
.list_w.wh_ed ul li .day { width: 22%; }
.list_w.wh_ed ul li .txt .tt { font-size: 1.313em; }
.list_w.wh_ed ul li .txt .name_w { margin-top: 15px; }
.list_w.wh_ed ul li .txt .name { display: inline-block; color: #444; font-size: .875em; font-weight: 600; margin-right: 30px; }
.list_w.wh_ed ul li .xi { margin-right: 3px; }
.list_w.wh_ed ul li .txt .st { margin-top: 20px; height: 44px; overflow: hidden;}

.sub_w .tab_idx { font-size: 0; text-align: center; }
.sub_w .tab_idx li { display: inline-block; position: relative; cursor: pointer; }
.sub_w .tab_idx li:not(:last-child) { margin-right: 80px; }
.sub_w .tab_idx li .bg { position: relative; width: 114px; height: 114px; border-radius: 50%; transform: rotate(45deg); transition: .5s; }
.sub_w .tab_idx li .bg:before { content: ""; width: 50px; height: 50px; border-radius: 50%; position: absolute; left: -25px; top: 50%; margin-top: -25px; }
.sub_w .tab_idx li .bg:after { content: ""; width: 50px; height: 50px; border-radius: 50%; position: absolute; right: -25px; top: 50%; margin-top: -25px; }
.sub_w .tab_idx li .txt { font-size: 1.125rem; position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px; width: 96px; height: 96px; line-height: 1.3; border-radius: 50%; border: 3px solid #ff3ac5; text-align: center; background: rgba(255,255,255,.55); color: #ff3ac5; font-weight: 600; transition: .3s; }
.sub_w .tab_idx li .txt .va { margin-left: -3px; }
.sub_w .tab_idx li:hover .txt { background: rgba(255,255,255,.92); }

.sub_w .tab_idx li.on .bg { transform: rotate(180deg); }
.sub_w .tab_idx li.on .txt { background: rgba(255,255,255,.92); }

.sub_w .tab_idx li.notice_tab .bg { background: #f9bee9; }
.sub_w .tab_idx li.notice_tab .bg:before { background: #f9bee9; }
.sub_w .tab_idx li.notice_tab .bg:after { background: #f9bee9; }
.sub_w .tab_idx li.notice_tab .txt { border: 3px solid #ff3ac5; color: #ff3ac5; }

.sub_w .tab_idx li.update_tab .bg { background: #befbfa; }
.sub_w .tab_idx li.update_tab .bg:before { background: #befbfa; }
.sub_w .tab_idx li.update_tab .bg:after { background: #befbfa; }
.sub_w .tab_idx li.update_tab .txt { border: 3px solid #39bbff; color: #39bbff; }

.sub_w .tab_idx li.event_tab .bg { background: #ffea8b; }
.sub_w .tab_idx li.event_tab .bg:before { background: #ffea8b; }
.sub_w .tab_idx li.event_tab .bg:after { background: #ffea8b; }
.sub_w .tab_idx li.event_tab .txt { border: 3px solid #ffb400; color: #ffb400; }


.sub_w .con_idx { margin-top: 12px; padding-top: 45px; }
.sub_w .con_idx.rank_idx { padding-top: 50px; }
.sub_w .con_idx.rank_idx .rank_last_update { display: block; font-size: .813em; text-align: right; padding-right: 40px; margin-top: 15px; box-sizing: border-box; color: #6a99ff; font-weight: 500; }
.sub_w .con_idx.rank_idx .update_st { position: absolute; top: 40px; left: 50%; transform: translate(-50%, 0); font-size: 1.125em; font-weight: 700; color: #bce9ff; text-shadow:-1px -1px 0 #2c30b0, 1px -1px 0 #2c30b0, -1px 1px 0 #2c30b0, 1px 1px 0 #2c30b0; letter-spacing: 0; }
.sub_w .con_idx.notice { margin-top: 12px; padding-top: 0; }
.sub_w .con_idx.track_w { padding-top: 40px; }
.sub_w .idx.update .list_w ul li .day .dd { color: #39bbff; }
.sub_w .idx.event .list_w ul li .day .dd { color: #ffb400; }

.sub_w .con_idx.track_w .idx { overflow: unset; }

.con_idx.notice .idx { position: relative; border-radius: 35px 35px 0 0; background: rgba(244,250,255,.88); box-shadow: 0 4px 11px rgba(0,0,0,.3); box-sizing: border-box; transition: .3s; }
.con_idx.notice .idx:before { content: ""; position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: 100%; border: 3px solid #ff3ac5; border-bottom: 0; border-radius: 25px 25px 0 0; background: rgba(255,255,255,.6); box-sizing: border-box; }
.con_idx.notice .idx > .inner { position: relative; padding: 47px 13px 140px 40px; }
.con_idx.notice .idx > .inner.notice_view_pd { padding-right: 40px; }
.con_idx.notice .update.idx:before { border-color: #39bbff; }
.con_idx.notice .event.idx:before { border-color: #ffb400; }
.con_idx.notice .idx:hover { background: #FFF; }


/*5-1*/
/* .faq_wrap { padding: 35px 40px 65px 40px; box-sizing: border-box; border: 3px solid #4dbaff; border-radius: 50px; background: #FFF; transition: .3s; } */
.faq_wrap { padding: 35px 40px 65px 40px; box-sizing: border-box; border: 3px solid #4dbaff; border-radius: 35px 35px 0 0; background: #FFF; transition: .3s; border-bottom: 0; } /* jk custom */
.faq_wrap:hover { background: #FFF; }

.faq_area { background: rgba(255,255,255,.8); }
/* .list_w ul { background: rgba(255,255,255,.8); } */

.sup_tit_w { width: 1200px; max-width: 96%; margin: 0 auto; padding-top: 0; }
.sup_tit_w .sup_tit { border: 4px solid #10516e; border-radius: 45px; padding: 10px; background: #FFF; margin-bottom: 30px; }
.sup_tit_w .sup_tit .inner { border: 2px solid #218ade; border-radius: 35px; padding: 40px 0 60px 0; transition: .3s; position: relative; overflow: hidden; }
.sup_tit_w .sup_tit .inner .bg_left { position: absolute; left: -35px; bottom: -124px; opacity: .6; transition: .3s; }
.sup_tit_w .sup_tit .inner .bg_right { position: absolute; right: -105px; bottom: -125px; opacity: .6; transition: .3s; }
.sup_tit_w .sup_tit .inner:hover { background: #FFF; }
.sup_tit_w .sup_tit .inner:hover .bg_left,
.sup_tit_w .sup_tit .inner:hover .bg_right { opacity: .8; }
.sup_tit_w .sup_tit .inner .star { text-align: center; position: relative; z-index: 1; }
.sup_tit_w .sup_tit .inner .star img { display: inline-block; }
.sup_tit_w .sup_tit .inner .tt { width: 910px; max-width: 96%; margin: 0 auto; background: #c6e9ff; border-radius: 25px; padding: 14px 0; margin-top: 25px; text-align: center; box-sizing: border-box; position: relative; z-index: 1; }
.sup_tit_w .sup_tit .inner .tt .t1 { font-size: 1.938em; font-weight: 700; color: #004dba; font-family: 'M PLUS Rounded 1c', sans-serif; }
.sup_tit_w .sup_tit .inner .tt .t2 { font-size: .875em; letter-spacing: 8px; margin-top: 4px; padding-left: 9px; color: #60c2ff; }
.sup_tit_w .sup_tit .inner .st { width: 910px; max-width: 96%; margin: 20px auto 0 auto; background: linear-gradient(#c6e9ff, #d6f6f7); padding: 30px; box-sizing: border-box; border-radius: 25px; text-align: center; position: relative; z-index: 1; }
.sup_tit_w .sup_tit .inner .st .t1 { font-size: 1.375em; font-weight: 600; background: linear-gradient( to right, rgb(58 137 255) 0%, rgb(58 85 255) 50%, rgb(255 39 214) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-family: 'M PLUS Rounded 1c', sans-serif; }
.sup_tit_w .sup_tit .inner .st .t2 { font-size: 1em; margin-top: 14px; line-height: 1.5; color: #00045c; }
.sup_tit_w .sup_tit .inner .st .t3 { font-size: .938em; margin-top: 25px; color: #0070ae; }
.sup_tit_w .sup_tit .inner .btn_w { width: 910px; max-width: 96%; margin: 30px auto 0 auto; position: relative; z-index: 1; }
.sup_tit_w .sup_tit .inner .btn_w ul { overflow: hidden; margin-right: -30px; text-align: center; }
.sup_tit_w .sup_tit .inner .btn_w ul li { display: inline-block; width: 35%; }
.sup_tit_w .sup_tit .inner .btn_w ul li .li_inner { margin-right: 30px; }
.sup_tit_w .sup_tit .inner .btn_w ul li .li_inner a { display: block; text-align: center; border-radius: 12px; background: #10516e; color: #FFF; height: 50px; line-height: 50px; transition: .3s; opacity: .85; letter-spacing: .5px; }
.sup_tit_w .sup_tit .inner .btn_w ul li .li_inner a:hover { opacity: 1; }

.faq_area li dl.open dt a { background-color: #009be0; }
.faq_area li dl dd span.a_icon { color: #3cc1ff; }
/*3-1*/
.sub_w .tab_idx li.all_tab .bg { background: #e2aaff; }
.sub_w .tab_idx li.all_tab .bg:before { background: #e2aaff; }
.sub_w .tab_idx li.all_tab .bg:after { background: #e2aaff; }
.sub_w .tab_idx li.all_tab .txt { border: 3px solid #ad3ee6; color: #ad3ee6; }

.sub_w .tab_idx li.kpop_tab .bg { background: #ffaacb; }
.sub_w .tab_idx li.kpop_tab .bg:before { background: #ffaacb; }
.sub_w .tab_idx li.kpop_tab .bg:after { background: #ffaacb; }
.sub_w .tab_idx li.kpop_tab .txt { border: 3px solid #ee3d82; color: #ee3d82; }

.sub_w .tab_idx li.bms_tab .bg { background: #c8ffab; }
.sub_w .tab_idx li.bms_tab .bg:before { background: #c8ffab; }
.sub_w .tab_idx li.bms_tab .bg:after { background: #c8ffab; }
.sub_w .tab_idx li.bms_tab .txt { border: 3px solid #5cd31d; color: #5cd31d; }

.sub_w .tab_idx li.pump_tab .bg { background: #a1ddff; }
.sub_w .tab_idx li.pump_tab .bg:before { background: #a1ddff; }
.sub_w .tab_idx li.pump_tab .bg:after { background: #a1ddff; }
.sub_w .tab_idx li.pump_tab .txt { border: 3px solid #27acf9; color: #27acf9; }

.sub_w .tab_idx li.world_tab .bg { background: #ffd68f; }
.sub_w .tab_idx li.world_tab .bg:before { background: #ffd68f; }
.sub_w .tab_idx li.world_tab .bg:after { background: #ffd68f; }
.sub_w .tab_idx li.world_tab .txt { border: 3px solid #fdaf27; color: #fdaf27; }

.tab_de { border: 7px solid #a62293; border-radius: 35px; padding: 10px; background: #e2e8ff; }
.tab_de .tab_idx { padding: 40px; border: 2px solid #218ade; border-radius: 25px; background: #FFF; transition: .3s; }
.tab_de .tab_idx:hover { background: #FFF; }

.track { width: 1000px; max-width: 96%; margin: 0 auto; border-radius: 25px; box-sizing: border-box; border: 4px solid #a64c09; background: #ffcd00; padding: 8px; transition: .3s; opacity: 0.94; position: relative; }


.track:not(:last-child) { margin-bottom: 30px; }
.track:hover { opacity: 1; }

.track_list { border-radius: 35px 35px 0 0; background: rgba(244,250,255,.88); box-shadow: 0 4px 11px rgb(0,0,0,.3); padding-bottom: 160px; position: relative; }
.track_list:before { content: ""; position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: 100%; border: 3px solid #f7d21a; border-bottom: 0; border-radius: 25px 25px 0 0; box-sizing: border-box; background: rgba(255,255,255,.6); }
.rank_list { border-radius: 35px 35px 0 0; background: rgba(244,250,255,.88); box-shadow: 0 4px 11px rgb(0,0,0,.3); padding-bottom: 160px; position: relative; }
.rank_list:before { content: ""; position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: 100%; border: 3px solid #63f5b4; border-bottom: 0; border-radius: 25px 25px 0 0; box-sizing: border-box; background: rgba(255,255,255,.6); }
.new_rank_list { overflow: hidden; }
.new_rank_list .beta_icon { position: absolute; top: -35px; left: 35px; transform: rotate(-45deg) translate(-50%, -50%); z-index: 1; }
.service_info { border-radius: 35px 35px 0 0; background: rgba(244,250,255,.88); box-shadow: 0 4px 11px rgb(0,0,0,.3); padding-bottom: 160px; transition: .3s; }
.new_service:hover { background: rgba(244,250,255,.96); }
.flow_info { border-radius: 35px 35px 0 0; background: rgba(0,0,0,.85); box-shadow: 0 4px 11px rgb(0,0,0,.3); padding-bottom: 160px; }
.flow_info:hover { background: rgba(0,0,0,.91); }
.card_info { border-radius: 35px 35px 0 0; background: rgba(244,250,255,.88); box-shadow: 0 4px 11px rgb(0,0,0,.3); padding-bottom: 160px; }
.card_info:hover { background: rgba(244,250,255,.96); }
/* .track_list .track_w { margin-top: 55px; } */



.track > .inner { background: #FFF; border-radius: 15px; padding: 15px; box-sizing: border-box; overflow: hidden; position: relative; }

.track .new_icon { position: absolute; top: -34px; left: -34px; z-index: 1; transform: rotate(-30deg); }
.track .recommended { position: relative; }
.track .recommended img { position: absolute; top: -6px; left: 50%; transform: translate(-50%, 0) rotate(12deg); width: 85px; max-width: none; z-index: 9; margin-left: 8px; }

.track .inner .t_img { float: left; border-radius: 9px; width: 180px; height: 180px; background: #000; overflow: hidden; transition: .3s; position: relative; }
.track .inner .t_img .play_btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); transition: .3s; opacity: 0; }
.track .inner .t_img .play_btn i { font-size: 3em; color: #FFF; cursor: pointer; transition: .3s; transform: rotate(-180deg); }
.track .inner .t_img .play_btn i.on { transform: rotate(-180deg); }
.track .inner .t_img .play_btn i.on:before { content: "\ea3c"; }
.track .inner .t_img .play_btn i:hover { color: #00afff; }
.track .inner:hover .t_img .play_btn { opacity: 1; }
.track .inner:hover .t_img .play_btn i { transform: rotate(0); }
/*c_bg 캐릭터별 포지션 기본 - natsuha*/
.track .inner .c_bg.natsuha { position: absolute; right: 200px; bottom: -282px; transition: .5s; opacity: .4; z-index: 2; }
.track .inner .c_bg.aria { position: absolute; right: 134px; bottom: -311px; transition: .5s; opacity: .4; z-index: 2; }
.track .inner .c_bg.c0 { width: 117px; right: 222px; bottom: 13px; }
.track .inner .c_bg.c1000 { }
.track .inner .c_bg.c2000 { width: inherit!important; right: 185px!important; bottom: -286px!important; }
.track .inner .c_bg.c3000 { width: inherit!important; right: 179px!important; bottom: -292px!important; }
.track .inner .c_bg.c4000 { width: inherit!important; right: 155px!important; bottom: -314px!important; }
.track .inner .c_bg.c5000 { width: inherit!important; right: 106px!important; bottom: -362px!important; }
.track .inner .c_bg.c6000 { width: inherit!important; right: 100px!important; bottom: -233px!important; }
.track .inner .c_bg.c7000 { width: inherit!important; right: 80px!important; bottom: -281px!important; }
.track .inner .c_bg.c8000 { width: inherit!important; right: -18px!important; bottom: -316px!important; }
.track .inner .c_bg.c9000 { width: inherit!important; right: 110px!important; bottom: -326px!important; }
.track .inner .c_bg.c10000 { width: 374px!important; right: 32px!important; bottom: -286px!important; }
.track .inner .c_bg.c12000 { width: inherit!important; right: 146px!important; bottom: -304px!important; }
.track .inner .c_bg.c13000 { width: inherit!important; right: 196px!important; bottom: 53px!important; opacity: .6; }
.track .inner .c_bg.c14000 { width: inherit!important; right: 196px!important; bottom: 86px!important; opacity: .6; }
.track .inner .c_bg.c15000 { width: inherit!important; right: 170px!important; bottom: 88px!important; opacity: .6; }
.track:hover .inner .c_bg { opacity: 6; }
.track .inner .t_info { float: left; height: 180px; text-align: left; margin-left: 20px; padding-left: 20px; padding-right: 165px; box-sizing: border-box; position: relative; width: calc(100% - 200px); border-left: 2px solid #CCC; overflow: hidden; }
.track .inner .t_info .t_bg { width: calc(100% - 165px); height: 100%; position: absolute; top: 0; left: calc(-100% + 170px); background: #fff7d7; border-radius: 0 9px 9px 0; transition: .6s; z-index: 1; }
.track:hover .inner .t_info .t_bg { left: 0; }
.track .inner .t_info .va { position: relative; z-index: 2; }
.track .inner .t_info .t1 { font-size: 1em; color: #d13ef7; font-weight: 500; letter-spacing: 0.5px; }
.track .inner .t_info .t2 { font-size: 1.25em; color: #3a0049; font-weight: 600; letter-spacing: 0.5px; margin-top: 6px; word-break: break-all; }
.track .inner .t_info .t3 { font-size: .938em; color: #888; font-weight: 400; letter-spacing: 0.5px; margin-top: 16px; }
.track .inner .t_info .t4 { font-size: .938em; color: #888; font-weight: 400; letter-spacing: 0.5px; margin-top: 4px; }
.track .inner .t_level { position: absolute; top: 50%; right: 15px; z-index: 2; width: 142px; height: 192px; transform: translate(0, -50%); }
.track .inner .t_level .inner { position: relative; width: 100%; height: 100%; padding: 0; }
.track .inner .t_level .inner .level_in { width: 64px; height: 64px; padding: 5px; box-sizing: border-box; }
.track .inner .t_level .inner .level_in:first-child { position: absolute; top: 0; left: 0; }
.track .inner .t_level .inner .level_in:nth-child(2) { position: absolute; top: 0; right: 0; }
.track .inner .t_level .inner .level_in:nth-child(3) { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); }
.track .inner .t_level .inner .level_in:nth-child(4) { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); }
.track .inner .t_level .inner .level_in:nth-child(5) { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); }


/*modal*/
.blocker { z-index: 10; }

#inquiry.modal { width: 1000px; max-width: 90%; border-radius: 45px; box-sizing: border-box; border: 5px solid #a64c09; background: #ffcd00; padding: 10px; }
#inquiry.modal .inner { padding: 30px 60px; border-radius: 35px; background: #FFF; }
#inquiry.modal .inner .tt { text-align: center; position: relative; }
#inquiry.modal .inner .tt .logo_bg { position: absolute; top: -13px; left: 0; width: 100%; text-align: center; }
#inquiry.modal .inner .tt .logo_bg img { display: inline-block; opacity: 0.08; }
#inquiry.modal .inner .tt p { font-size: 1.5em; font-weight: 600; color: #e56200; position: relative; z-index: 2; letter-spacing: 0.5px; }
#inquiry.modal .inner .st { font-size: .875em; letter-spacing: 8px; margin-top: 4px; padding-left: 9px; color: #ffab67; margin-bottom: 20px; text-align: center; position: relative; z-index: 2; }
#inquiry.modal .inner .s_txt { font-size: .875em; margin-top: 5px; color: #ff3347; }
#inquiry.modal .inner .textarea_h { height: 115px; padding: 12px; box-sizing: border-box; }
#inquiry.modal .inner .label_select select { padding-left: 12px; }
#inquiry.modal .inner .btn_w { text-align: center; margin-top: 20px; }
#inquiry.modal .inner .btn_w button:first-child { margin-right: 15px; }

.border_n { border: none; }


/*board*/
.btn_st.c1   { background:#111111; color:#ffffff; border-color:transparent}
.btn_st.c1.re{ background:#ffffff; color:#111111; border-color:#333333}
.btn_st.c2   { background:#666666; color:#ffffff; border-color:transparent}
.btn_st.c2.re{ background:#ffffff; color:#666666; border-color:#cccccc}

.btn_st.c3   { background:#006dd6; color:#ffffff; border-color:transparent}
.btn_st.c3.re{ background:#FFF; color:#670084; border-color:#9b2eba}


.btn_st.c4   { background:#999; color:#ffffff; border-color:transparent}
.btn_st.c4.re{ background:#FFF; color:#0046d2; border-color:#0046d2}



.btn_st.s1{ font-size:.750em; padding:4px 10px}
.btn_st.s2{ font-size:.875em; padding:8px 20px}
.btn_st.s3{ font-size:.938em; padding:15px 20px; min-width:140px;}
.btn_st.s4{ font-size: .938em; padding: 12px 30px; }




/*add 210222*/

/*2-1*/
#contents .rank.etc .inner .score_w .name { display: none; }

#contents .leaderboard { margin-bottom: 20px; }
#contents .leaderboard ul li:not(:last-child) { margin-right: 25px; }
#contents .leaderboard ul li a { display: inline-block; background: #10516e; color: #FFF; width: 200px; height: 50px; border-radius: 15px; font-size: 1.063em; letter-spacing: 0; opacity: .75; transition: .3s; }
#contents .leaderboard ul li a:hover { opacity: 1; }
#contents .leaderboard ul li a.on { opacity: 1; }

#contents .rank_w { position: relative; padding-top: 10px; }

#contents .rank_w .my_rank { padding: 80px 0 40px 0; background: linear-gradient(to top, #53acff 0%, #1d408c 100%); margin: 0 13px 35px 13px; position: relative; }
#contents .rank_w .my_rank .title { position: absolute; top: 21px; left: 0; width: 100%; text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 1.75em; font-weight: 700; text-shadow: -1px -1px 0 #9f2396, 1px -1px 0 #a52294, -1px 1px 0 #1430b9, 1px 1px 0 #1430b9; color: #FFF; }

#contents .rank_w .n_rank { position: relative; width: 1060px; max-width: 96%; height: 106px; margin: 0 auto; border: 3px solid #88ffd3; box-sizing: border-box; padding: 5px; border-radius: 15px; background: #e2f6ff; margin-bottom: 22px; }
#contents .rank_w .n_rank:last-child { margin-bottom: 0; }

#contents .rank_w .n_rank .rating { display: none; position: absolute; bottom: -8px; right: 1px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 3.5em; font-weight: 600; color: #6f88ff; text-shadow: -2px -2px 1px #1269d5, 2px -2px 1px #84d396, -2px 2px 1px #84d396, 2px 2px 1px #84d396; z-index: 1; opacity: .55; }
#contents .rank_w .n_rank .new_icon { position: absolute; top: -22px; left: -38px; z-index: 1; transform: rotate(-30deg); }

#contents .rank_w .n_rank .border_inner { width: 100%; height: 100%; padding: 3px; border-radius: 12px; background: linear-gradient(to right, #2a63ff 0%, #00ffa4 100%); box-sizing: border-box; overflow: hidden; }

#contents .rank_w .n_rank .inner { position: relative; width: 100%; height: 100%; border-radius: 8px; box-sizing: border-box; background: url('../images/r_section_bg.png') no-repeat 50% 50%; overflow: hidden; }
#contents .rank_w .n_rank .inner .num { position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); width: 160px; text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 4em; font-weight: 600; color: #f9fb07; text-shadow: -2px -2px 1px #1269d5, 2px -2px 1px #84d396, -2px 2px 1px #84d396, 2px 2px 1px #ffc82d; }
#contents .rank_w .n_rank .inner .point { position: absolute; right: 60px; top: 50%; transform: translate(0, -50%); font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 2em; font-weight: 600; color: #cbff98; text-shadow: -2px -2px 1px #1512d5, 2px -2px 1px #4fa562, -1px 1px 1px #4fa562, 1px 1px 1px #ffab2d; letter-spacing: 0; text-align: center; }
#contents .rank_w .n_rank .inner .point .t1 { width: 166px; }
#contents .rank_w .n_rank .inner .point .t2 { margin-top: 3px; }
#contents .rank_w .n_rank .inner .point .t2.fs_edit { font-size: 1.438em; text-align: right; color: #34aaff; }

#contents .rank_w .n_rank .inner .lang  { position: absolute; left: 175px; top: 50%; transform: translate(0, -50%); text-align: center; }
#contents .rank_w .n_rank .inner .lang .img { width: 73px; height: 43px; border: 1px solid #CCC; overflow: hidden; background: #FFF; }
#contents .rank_w .n_rank .inner .lang .txt { color: #006ca9; margin-top: 4px; font-weight: 600; letter-spacing: 0; font-size: .938em; }

#contents .rank_w .n_rank .inner .name { position : absolute; top: 50%; left: 50%; transform: translate(-73px, -50%); font-size: 1.75em; color: #2c30b0; font-weight: 600; font-family: 'M PLUS Rounded 1c', sans-serif; letter-spacing: -1px; }
#contents .rank_w .n_rank .inner .name .name_code { vertical-align: baseline; font-size: .813em; opacity: .88; letter-spacing: -1px; }

#contents .rank_w .n_rank .inner .avatar { position: absolute; left: 175px; top: 0; width: 195px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner { position: relative; width: 130%; height: 100%; }
#contents .rank_w .n_rank .inner .avatar .ava_inner img { position: absolute; left: 0; top: -7px; z-index: 2; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c0 img { left: 87px; top: -28px; width: 180px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c1000 img { left: 57px; top: -37px; width: 215px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c2000 img { left: 59px; top: -49px; width: 227px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c3000 img { left: 36px; top: -46px; width: 242px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c4000 img { left: 46px; top: -51px; width: 240px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c5000 img { left: 50px; top: -49px; width: 234px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c6000 img { left: 68px; top: -28px; width: 195px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c7000 img { left: 60px; top: -47px; width: 225px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c8000 img { left: 57px; top: -44px; width: 223px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c9000 img { left: 44px; top: -46px; width: 236px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c10000 img { left: 68px; top: -28px; width: 196px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c11000 img { left: 54px; top: -48px; width: 230px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner.c12000 img { left: 55px; top: -48px; width: 230px; }
#contents .rank_w .n_rank .inner .avatar .ava_inner .line { position: absolute; /* left: -20px; */ left: -46px; top: 0; display: inline-block; width: 200%; height: 20px; border-bottom: 20px solid #afffb2; background: #26aa2b; transform: rotate(145deg); z-index: 1; }
#contents .rank_w .n_rank .inner .avatar .ava_inner .c0 { }
#contents .rank_w .n_rank .inner .avatar .ava_inner .c1000 {}
#contents .rank_w .n_rank .inner .avatar .ava_inner .c2000 {}
#contents .rank_w .n_rank .inner .avatar .ava_inner .c3000 {}
#contents .rank_w .n_rank .inner .avatar .ava_inner .c4000 {}
#contents .rank_w .n_rank .inner .avatar .ava_inner .c5000 {}
#contents .rank_w .n_rank .inner .avatar .ava_inner .c6000 {}
#contents .rank_w .n_rank .inner .avatar .ava_inner .c7000 {}
#contents .rank_w .n_rank .inner .avatar .ava_inner .c10000 {}


#contents .rank_w .crown { position: absolute; top: 0; left: 50%; width: 244px; transform: translate(-50%, 0); }
#contents .rank { width: 1000px; max-width: 96%; height: 178px; margin: 0 auto; border: 3px solid #27acf9; background: #FFF; box-sizing: border-box; border-radius: 25px; position: relative; overflow: hidden; opacity: 1; transition: .3s; }
#contents .rank:hover { opacity: 1; }
#contents .rank:not(:last-child) { margin-bottom: 16px; }

#contents .rank_w > .num_w  { display: none; }

#contents .rank .inner { position: relative; width: 100%; height: 100%; z-index: 2; }
#contents .rank .inner .num_w { position: absolute; top: 50%; left: 45px; font-size: 0; transform: translate(0, -50%); }
#contents .rank .inner .num_w .num { display: inline-block; font-size: 1.5rem; width: 54px; height: 54px; text-align: center; background: #27acf9; color: #FFF; border-radius: 50%; font-weight: 500; padding-right: 5px; box-sizing: border-box; }
#contents .rank .inner .num_w .change { display: inline-block; font-size: 1rem; margin-left: 15px; }
#contents .rank .inner .num_w .change .xi { vertical-align: middle; margin-right: 3px; }
#contents .rank .inner .num_w .change span { vertical-align: middle; }

#contents .rank .inner .avatar_w { position: absolute; top: 50%; left: 50%; text-align: center; margin-top: -86px; transform: translate(-50%, 0); }
#contents .rank .inner .avatar_w .img_w { position: relative; }
#contents .rank .inner .avatar_w .img_w .img { position: relative; z-index: 2; width: 140px; height: 140px; border-radius: 50%; border: 6px solid #FFF; background: url('../images/rank_img1.png') no-repeat 50% 50%; box-sizing: border-box; }
#contents .rank .inner .avatar_w .img_w .grad { position: absolute; top: -7px; left: -7px;; width: 154px; height: 154px; border-radius: 50%; background: linear-gradient(to left, #4cf999, #5d8ef5); }

#contents .rank .inner .avatar_w .name { font-size: 1.125em; color: #0f2fbe; letter-spacing: 3px; font-weight: 500; margin-top: 15px; }

#contents .rank .inner .score_w { position: absolute; top: 50%; right: 45px; text-align: center; margin-top: -23px; }
#contents .rank .inner .score_w .st { color: #777; font-size: .813em; font-weight: 300; letter-spacing: 0; }
#contents .rank .inner .score_w .tt { color: #333; font-size: 1.438em; font-weight: 600; margin-top: 4px; }

#contents .rank .left { position: absolute; top: 50%; left: -115px; margin-top: -150px; width: 300px; height: 300px; border-radius: 50%; border: 2px solid #b8e5ff; }
#contents .rank .center { position: absolute; top: 50%; left: 50%; margin-top: -220px; margin-left: -220px; width: 440px; height: 440px; border-radius: 50%; background: #e8f6ff; }
#contents .rank .right { position: absolute; top: 50%; right: 0; width: 275px; height: 106px; background: linear-gradient(to left, #36b2f9, #ffffff); transform: translate(0, -50%); }


#contents .rank.first { height: 210px; border-radius: 30px; border: 4px solid #ffc600; background: #fffbf5; margin-bottom: 8px;}
#contents .rank.first .inner .num_w .num { background: #ffc600; }
#contents .rank.first .center { background: #fff2d5; }
#contents .rank.first .left { border-color: #ffeba5; }
#contents .rank.first .right { background: linear-gradient(to left, #ffc600, #fffbf5); }
#contents .rank.first .inner .avatar_w .name { color: #fb8520; }
#contents .rank.first .inner .avatar_w .img_w .grad { background: linear-gradient(to left, #ff524d, #ffd547); }

#contents .rank.second { height: 210px; border-radius: 30px; border: 4px solid #cdc9d4; background: #fdfcfe; margin-bottom: 8px;}
#contents .rank.second .inner .num_w .num { background: #cdc9d4; }
#contents .rank.second .center { background: #f3f2f6; }
#contents .rank.second .left { border-color: #f0eef4; }
#contents .rank.second .right { background: linear-gradient(to left, #d1cdd7, #fdfafd); }
#contents .rank.second .inner .avatar_w .name { color: #804aaa; }
#contents .rank.second .inner .avatar_w .img_w .grad { background: linear-gradient(to left, #c811bd, #70bdff); }

#contents .rank.third { height: 210px; border-radius: 30px; border: 4px solid #e48c67; background: #fff9f6; margin-bottom: 30px;}
#contents .rank.third .inner .num_w .num { background: #e48c67; }
#contents .rank.third .center { background: #ffece5; }
#contents .rank.third .left { border-color: #ffe0d3; }
#contents .rank.third .right { background: linear-gradient(to left, #e69472, #fff9f7); }
#contents .rank.third .inner .avatar_w .name { color: #dc6636; }
#contents .rank.third .inner .avatar_w .img_w .grad { background: linear-gradient(to left, #c81119, #ff70f6); }


#contents .rank.etc .inner .avatar_w { margin-left: -170px; margin-top: -70px; transform: none; }
#contents .rank.etc .inner .avatar_w .img_w { display: inline-block; vertical-align: middle; }
#contents .rank.etc .inner .avatar_w .name { display: inline-block; vertical-align: middle; }
#contents .rank.etc .inner .avatar_w .img_w .img { width: 140px; height: 140px; }
#contents .rank.etc .inner .avatar_w .img_w .grad { width: 154px; height: 154px; }
#contents .rank.etc .inner .avatar_w .name { margin-top: 0; margin-left: 30px; width: 170px; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#contents .rank.etc .inner .avatar_w .name .st { display: block; color: #555; font-size: .688em; font-weight: 300; letter-spacing: 0; margin-bottom: 4px; }

#contents .rank.etc .inner .num_w .num { width: 50px; height: 50px; font-size: 1.375rem; }
#contents .rank.etc .inner .score_w .tt { font-size: 1.313em; }

.label_w { text-align: center; }
.label_w .inner { position: relative; display: inline-block; padding: 13px 100px 13px 45px; background: #000; border: 2px solid #FFF088; margin-top: 5px; border-radius: 67px; }
.label_w.track_label { text-align: right; width: 1200px; max-width: 96%; margin: 0 auto; }
.label_w.track_label .inner { padding: 13px 70px 13px 28px; }

.sub_w .con_idx.track_w .track_st { width: calc(100% - 20px); font-size: .938em; font-weight: 500; color: #FFF; margin: 0 auto 30px auto; text-align: center; padding: 12px 10px; box-sizing: border-box; background: linear-gradient(to right, #f7d21a 0%, #28bf3b 50%, #f7d21a 100%); line-height: 1.4; word-break: break-all; }

.label_w .inner .tt { display: inline-block; margin-right: 10px; color: #ffd02a; }
.label_w .inner .mr_edit:nth-child(3) { margin-left: 10px; margin-right: 40px; }
.label_w .inner .mr_edit.add_edit:nth-child(3) { margin-right: 0; }
.label_w .inner .mr_edit { /* margin-right: 40px; */ }
.label_w .inner .label_select:after { line-height: 40px; }

.label_w .inner .search { position: absolute; top: 50%; right: 20px; color: #ffd02a; transform: translate(0, -50%); font-size: 1.375em; background: none; border: none; margin-top: -3px; transition: .3s; }
.label_w .inner .search:hover { color: #ff7a0c; }


/*순위변동 색상*/
#contents .rank .inner .num_w .change.plus { color: #27acf9; }
#contents .rank .inner .num_w .change.minus { color: #ee3d82; }
#contents .rank .inner .num_w .change.same { color: #999; }


/*1-1*/
#contents .des_w .game_des { position: relative; width: 1000px; max-width: 96%; margin: 30px auto; padding: 30px 15px; box-sizing: border-box; border: 4px solid #a64c09; background: #ffe474; border-radius: 35px; transition: .3s; }
#contents .des_w .game_des.play_des { background: #b4ffff; }
#contents .des_w .game_des.result_des { background: #ffcef1; }
#contents .des_w .game_des .tit { width: 300px; height: 60px; border-radius: 60px; text-align: center; font-size: 1.125em; letter-spacing: 0.5px; box-sizing: border-box; background: linear-gradient(120deg, #aaa 0%, #999 10%, #888 20%, #777 30%, #222 100%); color: #c55400; font-weight: 700; margin: 0 auto; position: relative; transition: .3s; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
#contents .des_w .game_des .tit .left_0 { position: absolute; top: 50%; left: 0; margin-left: -170px; margin-top: -13px; width: 26px; height: 26px; border-radius: 50%; background: #777; }
#contents .des_w .game_des .tit .left_1 { position: absolute; top: 50%; left: 0; margin-left: -120px; margin-top: -17px; width: 34px; height: 34px; border-radius: 50%; background: #555; }
#contents .des_w .game_des .tit .left_2 { position: absolute; top: 50%; left: 0; margin-left: -65px; margin-top: -21px; width: 42px; height: 42px; border-radius: 50%; background: #444; }
#contents .des_w .game_des .tit .right_0 { position: absolute; top: 50%; right: 0; margin-right: -170px; margin-top: -13px; width: 26px; height: 26px; border-radius: 50%; background: #777; }
#contents .des_w .game_des .tit .right_1 { position: absolute; top: 50%; right: 0; margin-right: -120px; margin-top: -15px; width: 30px; height: 30px; border-radius: 50%; background: #555; }
#contents .des_w .game_des .tit .right_2 { position: absolute; top: 50%; right: 0; margin-right: -65px; margin-top: -21px; width: 42px; height: 42px; border-radius: 50%; background: #444; }
#contents .des_w .game_des:hover .tit { color: #ff7e00; }

#contents .des_w .game_des .hands_font { display: none; position: absolute; top: -20px; left: -50px; font-family: 'KS', cursive; font-size: 2.5em; transform: rotate(-15deg); letter-spacing: 0; color: #ff9241; }

#contents .des_w .game_des .inner { }
#contents .des_w .game_des .inner .fixed_w { margin: 30px 0 20px 0; padding: 70px 20px 30px 20px; background: #FFF; box-shadow: inset 0 0 5px rgba(0,0,0,.8); border-radius: 20px; position: relative; }
#contents .des_w .game_des .inner .img_w { position: relative; }
#contents .des_w .game_des .inner .circle { width: 210px; height: 210px; border-radius: 50%; cursor: pointer; position: relative; background: linear-gradient(to top, #09203f 0%, #537895 100%); transition: .3s; }

#contents .des_w .game_des .inner .howto_cha { position: absolute; bottom: 0; left: 0; transition: .7s; }
#contents .des_w .game_des .inner .circle.img_1.on ~ .howto_cha { left: calc(33% - 100px); }
#contents .des_w .game_des .inner .circle.img_2.on ~ .howto_cha { left: 50%; }
#contents .des_w .game_des .inner .circle.img_3.on ~ .howto_cha { left: calc(66% + 100px); }

#contents .des_w .game_des .inner .circle .num { position: absolute; top: -50px; left: 50%; margin-left: -19px; width: 38px; height: 38px; font-size: 1.25em; font-weight: 500; border: 3px solid #0057c3; background: #000; color: #999; border-radius: 50%; padding-right: 3px; box-sizing: border-box; transition: .3s; }
#contents .des_w .game_des .inner .circle.on .num { color: #FFF; border-color: #59a3ff; }
#contents .des_w .game_des .inner .circle .c_img { position: absolute; top: 10px; left: 10px; width: 190px; height: 190px; }
/*#contents .des_w .game_des .inner .circle .c_img:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: .6; transition: .3s; z-index: 2; border-radius: 50%; }*/
#contents .des_w .game_des .inner .tab_idx2 li.circle { margin-right: 50px; }
#contents .des_w .game_des .inner .tab_idx2 li.circle.img_3 { margin-right: 0; }

#contents .des_w .game_des .inner .txt_w .txt { background: #f4faff; border-radius: 15px; padding: 45px 55px; box-sizing: border-box; width: 800px; max-width: 96%; margin: 0 auto; border: 2px solid #4b6f8c; }

#contents .des_w .b_arrow { margin: 50px 0; }
#contents .des_w .b_arrow li:not(:last-child) { margin-right: 25px; }


#contents .des_w .game_des .inner .t1 { margin-bottom: 22px; position: relative; padding-left: 14px; line-height: 1.8; }
#contents .des_w .game_des .inner .t1 span { vertical-align: top; color: #ee3d82; font-weight: 500; }
#contents .des_w .game_des .inner .t1:last-child { margin-bottom: 0; }
#contents .des_w .game_des .inner .t1:before { content:""; position: absolute; top: 5px; left: 0; width: 4px; height: 20px; background: #ff2ec1; }
#contents .des_w .game_des .inner .t1:nth-child(1):before { background: #ff2ec1; }
#contents .des_w .game_des .inner .t1:nth-child(2):before { background: #39fffd; }
#contents .des_w .game_des .inner .t1:nth-child(3):before { background: #ffdc3a; }
#contents .des_w .game_des .inner .t1:nth-child(4):before { background: #ff2ec1; }
#contents .des_w .game_des .inner .t1:nth-child(5):before { background: #39fffd; }



/*문의확인 모달*/
#confirmation.modal { width: 800px; max-width: 90%; border-radius: 45px; box-sizing: border-box; border: 5px solid #a64c09; background: #ffcd00; padding: 10px; }
#confirmation.modal .inner { padding: 60px 60px; border-radius: 35px; background: #FFF; }
#confirmation.modal .inner .tt { text-align: center; position: relative; }
#confirmation.modal .inner .tt .logo_bg { position: absolute; top: -13px; left: 0; width: 100%; text-align: center; }
#confirmation.modal .inner .tt .logo_bg img { display: inline-block; opacity: 0.08; }
#confirmation.modal .inner .tt p { font-size: 1.5em; font-weight: 600; color: #e56200; position: relative; z-index: 2; letter-spacing: 0.5px; }
#confirmation.modal .inner .st { font-size: .875em; letter-spacing: 8px; margin-top: 4px; padding-left: 9px; color: #ffab67; margin-bottom: 20px; text-align: center; position: relative; z-index: 2; }
#confirmation.modal .inner .s_txt { font-size: .875em; margin-top: 5px; color: #ff3347; }
#confirmation.modal .inner .textarea_h { height: 115px; padding: 12px; box-sizing: border-box; }
#confirmation.modal .inner .label_select select { padding-left: 12px; }
#confirmation.modal .inner .btn_w { text-align: center; margin-top: 20px; }
#confirmation.modal .inner .btn_w button:first-child { margin-right: 15px; }


#modify.modal { width: 800px; max-width: 90%; border-radius: 45px; box-sizing: border-box; border: 5px solid #a64c09; background: #ffcd00; padding: 10px; }
#modify.modal .inner { padding: 60px 60px; border-radius: 35px; background: #FFF; }
#modify.modal .inner .tt { text-align: center; position: relative; }
#modify.modal .inner .tt .logo_bg { position: absolute; top: -13px; left: 0; width: 100%; text-align: center; }
#modify.modal .inner .tt .logo_bg img { display: inline-block; opacity: 0.08; }
#modify.modal .inner .tt p { font-size: 1.5em; font-weight: 600; color: #e56200; position: relative; z-index: 2; letter-spacing: 0.5px; }
#modify.modal .inner .st { font-size: .875em; letter-spacing: 8px; margin-top: 4px; padding-left: 9px; color: #ffab67; margin-bottom: 20px; text-align: center; position: relative; z-index: 2; }
#modify.modal .inner .s_txt { font-size: .875em; margin-top: 5px; color: #ff3347; }
#modify.modal .inner .textarea_h { height: 115px; padding: 12px; box-sizing: border-box; }
#modify.modal .inner .label_select select { padding-left: 12px; }
#modify.modal .inner .btn_w { text-align: center; margin-top: 20px; }
#modify.modal .inner .btn_w button:first-child { margin-right: 15px; }


/*board*/
.board_icon.notice { color: #4ab6ff; }




/*add 210223*/
/*card des 부분에 덮기*/

/*1-1*/
#contents .des_w .game_des.login_des .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/wh/images/login_des_bg.png') no-repeat 0% 0%; border-radius: 31px; opacity: .3; }
#contents .des_w .game_des.play_des .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/wh/images/play_des_bg.png') no-repeat 0% 0%; border-radius: 31px; opacity: .2; }
#contents .des_w .game_des.result_des .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/wh/images/result_des_bg.png') no-repeat 0% 0%; border-radius: 31px; opacity: .1; }

/*1-3*/
/*
#contents .des_w .card_des { position: relative; width: 1000px; max-width: 96%; margin: 0 auto; border: 3px solid  #265eb5; border-radius: 30px; box-sizing: border-box; padding: 10px; background: linear-gradient(45deg, #63dbff 0%, #91e7ff 50%, #d1fbff 100%); transition: .3s; }
#contents .des_w .card_des .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/wh/images/card_des_bg.png') no-repeat 50% 50%; opacity: .4; }
#contents .des_w .card_des .inner { border: 2px solid #5fa7ff; border-radius: 20px; box-sizing: border-box; padding: 30px 20px; text-align: center; position: relative; z-index: 2; }
#contents .des_w .card_des .inner .txt_w .tt { color: #1e5d86; font-size: 1.25em; font-weight: 600; background: linear-gradient(to right, #31d8ff 0%, #bbfbff 100%); width: 300px; height: 46px; border-radius: 46px; margin: 0 auto; }
#contents .des_w .card_des .inner .txt_w .st { color: #1e5d86; font-weight: 500; background: linear-gradient(to right, #31d8ff 0%, #bbfbff 100%); width: 680px; height: 36px; border-radius: 36px; margin: 10px auto 0 auto; }
#contents .des_w .card_des .inner .txt_w .line_w { margin: 15px 0; }
#contents .des_w .card_des .inner .txt_w .line_w .l_circle { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #6bb6f7; vertical-align: middle; }
#contents .des_w .card_des .inner .txt_w .line_w .l_line { display: inline-block; width: 360px; height: 2px; background: #6bb6f7; vertical-align: middle; margin-left: 10px; }
#contents .des_w .card_des .inner .txt_w .line_w .c_circle { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #6bb6f7; vertical-align: middle; margin: 0 15px; position: relative; }
#contents .des_w .card_des .inner .txt_w .line_w .c_circle:before { content: ""; position: absolute; top: 8px; left: 8px; width: 10px; height: 10px; background: #6bb6f7; transform: rotate(45deg); }
#contents .des_w .card_des .inner .txt_w .line_w .r_line { display: inline-block; width: 360px; height: 2px; background: #6bb6f7; vertical-align: middle; margin-right: 10px; }
#contents .des_w .card_des .inner .txt_w .line_w .r_circle { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #6bb6f7; vertical-align: middle; }
#contents .des_w .card_des .inner .img_w { width: 200px; height: 200px; border-radius: 20px; background: #fffa4a; margin: 0 auto; }
#contents .des_w .card_des .inner .txt_w .b_st { color: #f6f6f6; font-size: .875em; background: #55c4fa; width: 640px; height: 36px; border-radius: 36px; margin: 20px auto 0 auto; }
*/

#contents .des_w .card_des { position: relative; width: 900px; max-width: 96%; margin: 30px auto 0 auto; border: 4px solid  #2ae8a7; border-radius: 30px; box-sizing: border-box; padding: 10px; background: linear-gradient(135deg, #00aae4 0%, #00ced9 50%, #00dfd3 100%); transition: .3s; }
#contents .des_w .card_des .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/cc_card_bg.png') no-repeat 50% 50%; opacity: 1; border-radius: 30px; }
#contents .des_w .card_des .inner { border: 2px solid #c8e1ff; border-radius: 20px; box-sizing: border-box; padding: 30px 20px; text-align: center; position: relative; z-index: 2; }
#contents .des_w .card_des .inner .txt_w .tt { color: #ff00ff; font-size: 1.25em; font-weight: 600; background: #a8eaec; height: 46px; border-radius: 46px; margin: 0 auto; display: inline-block; padding: 0 35px; }
#contents .des_w .card_des .inner .txt_w .st { color: #ff00ff; font-weight: 600; background: #a8eaec; height: 36px; border-radius: 36px; margin: 10px auto 0 auto; display: inline-block; padding: 0 35px; }
#contents .des_w .card_des .inner .txt_w .line_w { margin: 15px 0; }
#contents .des_w .card_des .inner .txt_w .line_w .l_circle { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #006efa; vertical-align: middle; }
#contents .des_w .card_des .inner .txt_w .line_w .l_line { display: inline-block; width: 360px; height: 2px; background: #03adf7; vertical-align: middle; margin-left: 10px; }
#contents .des_w .card_des .inner .txt_w .line_w .c_circle { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #03adf7; vertical-align: middle; margin: 0 15px; position: relative; }
#contents .des_w .card_des .inner .txt_w .line_w .c_circle:before { content: ""; position: absolute; top: 8px; left: 8px; width: 10px; height: 10px; background: #006efa; transform: rotate(45deg); }
#contents .des_w .card_des .inner .txt_w .line_w .r_line { display: inline-block; width: 360px; height: 2px; background: #03adf7; vertical-align: middle; margin-right: 10px; }
#contents .des_w .card_des .inner .txt_w .line_w .r_circle { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #006efa; vertical-align: middle; }
#contents .des_w .card_des .inner .img_w { width: 250px; height: 250px; border-radius: 36px; background: linear-gradient(135deg, #00ff9c 0%, #d3fa2c 100%); margin: 0 auto; padding: 8px; box-sizing: border-box; position: relative; }
#contents .des_w .card_des .inner .img_w .left_arrow { position: absolute; top: 50%; left: -115px; transform: translate(0, -50%); }
#contents .des_w .card_des .inner .img_w .right_arrow { position: absolute; top: 50%; right: -115px; transform: translate(0, -50%); }

/* #contents .des_w .card_des .inner .img_w .border_in { width: 100%; height: 100%; border: 2px solid #FFF; padding: 3px; background: #63ffd2; border-radius: 25px; box-sizing: border-box; } */
#contents .des_w .card_des .inner .img_w .border_in { width: 100%; height: 100%; border: 2px solid #fff700; padding: 3px; background: #FFF; border-radius: 25px; box-sizing: border-box; }
#contents .des_w .card_des .inner .img_w .border_in .img { width: 100%; height: 100%; border-radius: 25px; overflow: hidden; }
#contents .des_w .card_des .inner .txt_w .b_st { display: inline-block; max-width: 645px; color: #ff00ff; font-size: .875em; background: #a8eaec; width: auto!important; height: auto; border-radius: 20px; margin: 20px auto 0 auto; font-weight: 500; line-height: 1.7; padding: 5px 20px; box-sizing: border-box; word-break: break-all; }
#contents .des_w .card_des .inner .txt_w .b_st span { word-break: break-all; }

#contents .des_w .card_btn { text-align: center; margin-top: 30px; margin-bottom: 140px; }
#contents .des_w .card_btn .btn_w { display: inline-block; border: 2px solid #a53600; padding: 4px; background: #fde427; border-radius: 14px; cursor: pointer; transition: .3s; }
#contents .des_w .card_btn .btn_w .inner { position: relative; width: 260px; padding: 22px 30px; box-sizing: border-box; background: linear-gradient(135deg, #ff9242 0%, #ffc17f 100%); border: 1px solid #946108; border-radius: 10px; color: #8a5800; overflow: hidden; }
#contents .des_w .card_btn .btn_w:not(:last-child) { margin-right: 30px; }
#contents .des_w .card_btn .btn_w .inner .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/wh/images/card_btn_bg.png') no-repeat 50% 50%; opacity: .25; }
#contents .des_w .card_btn .btn_w .inner .st { font-size: .625em; font-weight: 300; letter-spacing: 1px; position: relative; z-index: 2; letter-spacing: 3px; color: #fff68e; }
#contents .des_w .card_btn .btn_w .inner .tt { font-size: 1.188em; font-weight: 700; margin-top: 10px; position: relative; z-index: 2; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; line-height: 1.3; }
#contents .des_w .card_btn .btn_w .inner .h_bg { position: absolute; top: 50%; left: 50%; margin-top: -90px; margin-left: -90px; width: 180px; height: 180px; border-radius: 50%; box-shadow: inset 0 0 30px rgba(255,255,79,1); z-index: 1; opacity: .3; transition: .3s; }
#contents .des_w .card_btn .btn_w:hover .h_bg { opacity: 1; }


#contents .des_w .card_des .inner .img_w .border_in .img .before_bg { display: none; }
#contents .des_w .card_des .inner .img_w .border_in .img { position: relative; }
#contents .des_w .card_des .inner .img_w .border_in .img .am_img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img .before_bg { display: block; }

#contents .des_w .card_des .inner .img_w .border_in .img .my_img { display: none; }
#contents .des_w .card_des .inner .img_w .border_in .img .am_img { display: inline-block; }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img .my_img { display: inline-block; }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img .am_img { display: none; }

#contents .des_w .card_des .am_none { display: none; word-break: break-all; }
#contents .des_w .card_des .my_none { display: inline-block; word-break: break-all; }

#contents .des_w .card_des.my_des .am_none { display: inline-block; }
#contents .des_w .card_des.my_des .my_none { display: none; }

#contents .des_w .card_des ~ .card_btn .am_none { display: none; }
#contents .des_w .card_des ~ .card_btn .my_none { display: inline-block; }

#contents .des_w .card_des.my_des ~ .card_btn .am_none { display: inline-block; }
#contents .des_w .card_des.my_des ~ .card_btn .my_none { display: none; }


#contents .des_w .card_des.my_des { position: relative; width: 900px; max-width: 96%; margin: 30px auto 0 auto; border: 4px solid  #2ae8a7; border-radius: 30px; box-sizing: border-box; padding: 10px; background: linear-gradient(135deg, #000000 0%, #8a00d9 50%, #00dfd3 100%); transition: .3s; }
#contents .des_w .card_des.my_des .inner .img_w { width: 100%; height: 340px; padding: 0; }
#contents .des_w .card_des.my_des .inner .img_w .left_arrow { display: none; }
#contents .des_w .card_des.my_des .inner .img_w .right_arrow { display: none; }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img { position: relative; /* background: url('../images/mypage_bg.png') no-repeat 50% 50%; background-attachment: fixed; */ }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img .before_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img .before_bg .inner { position: relative; width: 100%; height: 100%; }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img .before_bg .inner .xi_w { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img .before_bg .inner .xi_w .xi { color: #FFF; font-size: 3em; }
#contents .des_w .card_des.my_des .inner .img_w .border_in .img .before_bg .inner .xi_w .xi_tt { color: #FFF; font-size: .875em; margin-top: 5px; }
#contents .des_w .card_des.my_des .inner .txt_w .b_st { display: none; }
#contents .des_w .card_des.my_des .inner .img_w .border_in:hover { overflow: hidden; }
#contents .des_w .card_des.my_des .inner .img_w .border_in:hover .img { overflow-y: scroll; }
#contents .des_w .card_des.my_des .inner .img_w .border_in:hover .img .before_bg { display: none; }
/*
#contents .des_w .card_des.my_des .inner .img_w .img img { display: none; }
#contents .des_w .card_des .inner .img_w .img img { display: inline-block; }
*/


/*2-1 추가*/
#contents .rank .right { width: 250px; }
#contents .rank:hover .center { animation: pulse 1.1s infinite linear; box-shadow: 0 0 0 1em rgba(255, 255, 255,0); }
#contents .rank.first:hover .center { animation: pulse1 1.1s infinite linear; box-shadow: 0 0 0 1em rgba(255, 255, 255,0); }
#contents .rank.second:hover .center { animation: pulse2 1.1s infinite linear; box-shadow: 0 0 0 1em rgba(255, 255, 255,0); }
#contents .rank.third:hover .center { animation: pulse3 1.1s infinite linear; box-shadow: 0 0 0 1em rgba(255, 255, 255,0); }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(54, 178, 249, 1); }
}
@keyframes pulse1 {
    0% { box-shadow: 0 0 0 0 rgba(255, 179, 17, 1); }
}
@keyframes pulse2 {
    0% { box-shadow: 0 0 0 0 rgba(190, 181, 204, 1); }
}
@keyframes pulse3 {
    0% { box-shadow: 0 0 0 0 rgba(220, 134, 98, 1); }
}


/*add 210224*/
/*4-1 수정*/

.sub_title .tt .left { display: inline-block; vertical-align: middle; }
.sub_title .tt .center { display: inline-block; vertical-align: middle; position: relative; z-index: 2; padding: 0 40px; }
.sub_title .tt .right { display: inline-block; vertical-align: middle; }


/*3-1*/
.tab_de .tab_idx br { display: none; }

/*add 211214*/
.move_lounge_btn { display: inline-block; width: 170px; height: 50px; border-radius: 50px; padding: 4px; box-sizing: border-box; color: #FFF; background: linear-gradient(to bottom, #1f2fb5, #d31e87); box-shadow: 0 0px 10px #f99fff; transition: .3s; }
.move_lounge_btn .inner { width: 100%; height: 100%; border: 2px solid #FFF; border-radius: 42px; box-sizing: border-box; padding-top: 9px; font-size: .938em; letter-spacing: 0; color: #FFF; }

.rounge_tbl { font-weight: 400!important; }
.rounge_tbl_2 { font-weight: 400!important; }

.faq_area li dl dt a span.q_icon { font-family: inherit!important; }
.faq_area li dl dd span.a_icon { font-family: inherit!important; }


/*add 210316*/
/*playdata*/
.playdata_w .playdata { width: 1000px; max-width: 96%; margin: 0 auto; padding-top: 20px; }
.playdata_w .playdata .tit { width: 100%; background: #ffad2b; height: 100px; border-radius: 23px 23px 0 0; position: relative; padding-left: 250px; box-sizing: border-box; text-align: left; }
.playdata_w .playdata .tit .avatar { position: absolute; top: 50%; left: 75px; }
.playdata_w .playdata .tit .avatar .inner { position: relative; width: 136px; height: 136px; border-radius: 50%; margin-top: -68px; border: 3px solid #ffad2b; box-sizing: border-box; overflow: hidden; }
.playdata_w .playdata .tit .avatar .inner .img { position: absolute; top: 0; left: 0; }
.playdata_w .playdata .tit .avatar .inner .level { position: absolute; left: 0; bottom: 0; width: 100%; padding: 5px 0 7px 0; background: rgba(255,255,255,.8); color: #111; text-align: center; font-size: .938em; }
.playdata_w .playdata .tit .info .name { font-size: 1.313em; font-weight: 400; color: #FFF; letter-spacing: 1.5px; }
.playdata_w .playdata .tit .info .detail { font-size: 0; margin-top: 8px; }
.playdata_w .playdata .tit .info .detail li { display: inline-block; font-size: .938rem; color: #fff1d9; letter-spacing: 1px; font-weight: 200; }
.playdata_w .playdata .tit .info .detail li:first-child { padding-right: 20px; }
.playdata_w .playdata .tit .info .detail li:nth-child(2) { padding: 0 20px; border-left: 1px solid #f3f3f3; border-right: 1px solid #f3f3f3; }
.playdata_w .playdata .tit .info .detail li:last-child { padding-left: 20px; }

.playdata_w .playdata .tit .bg { position: absolute; bottom: 0; right: 36px; margin-bottom: -94px; opacity: .5; transition: .7s; }
/* .playdata_w .playdata .tit:hover .bg { transform: rotate(90deg); } */

.playdata_w .con1 { width: 100%; border: 3px solid #ffad2b; box-sizing: border-box; background: #FFF; margin-top: 8px; }
.playdata_w .con1 .main_view { overflow: hidden; padding: 45px 0 55px 0; border-bottom: 2px solid #ffe7c1; }
.playdata_w .con1 .main_view .tt { text-align: center; color: #333; font-weight: 500; }
.playdata_w .con1 .main_view .t1 { font-size: .875em; letter-spacing: 0; color: #ffc364; }
.playdata_w .con1 .main_view .t2 { font-size: 1.438em; letter-spacing: 0; color: #ff852b; font-weight: 500; margin-top: 3px; }
.playdata_w .con1 .main_view .t3 { font-size: 1.063em; color: #333; margin-top: 5px; font-weight: 500; }
.playdata_w .con1 .main_view .t4 { font-size: .875em; color: #999; margin-top: 2px; }


.playdata_w .con1 .main_view .p_tier { float: left; width: 33.333%; }
.playdata_w .con1 .main_view .p_rank { float: left; width: 33.334%; }
.playdata_w .con1 .main_view .p_cha { float: left; width: 33.333%; }

.playdata_w .con1 .main_view .p_in { font-size: 0; text-align: center; margin-top: 12px; }
.playdata_w .con1 .main_view .p_in .img { display: inline-block; width: 50%; font-size: 1rem; vertical-align: middle; box-sizing: border-box; text-align: right; }
.playdata_w .con1 .main_view .p_in .img img { display: inline-block; }
.playdata_w .con1 .main_view .p_in .txt { display: inline-block; width: 50%; font-size: 1rem; vertical-align: middle; padding-left: 15px; box-sizing: border-box; text-align: left; }

.playdata_w .con2 { margin-top: 30px; }
.playdata_w .con2 ul { overflow: hidden; }
.playdata_w .con2 ul li { float: left; width: 33.333%; text-align: center; }
.playdata_w .con2 ul li a { display: block; height: 55px; line-height: 55px; font-weight: 500; color: #222; }
.playdata_w .con2 ul li:first-child { background: #ff6fd4; }
.playdata_w .con2 ul li:nth-child(2) { width: 33.334%;  background: #ffdc3b; }
.playdata_w .con2 ul li:last-child { background: #58c4ff; }

/*cbt*/
.cbt_w { position: relative; width: 100%; height: 100vh; }

/*pattern*/
@-webkit-keyframes slideright {
    from { background-position: 0%; }
    to { background-position: -9000%; }
}

.pattern_bg { display: none; transform: rotate(-30deg); position: fixed; top: 50%; left: 50%; background: url('../images/pattern_bg.png') repeat-x 0% 0%; /* animation: slideright 15000s infinite linear; -webkit-animation: slideright 15000s infinite linear; */ width: 120vw; height: 200vh; margin-top: -100vh; margin-left: -60vw; z-index: 1;}

/*color*/
.color_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}
.color_bg .inner { position: relative; width: 100%; height: 100vh; }
.color_bg .grad_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #d9f6ee 0%, #efd3ed 100%); }
.color_bg .white_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #FFF 0, transparent 100%); }




@-webkit-keyframes rotation {
    from {-webkit-tranform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}


/*ani_bg*/
.circle_bg { position: relative; z-index: 2; width: 100%; height: 100%; }
.circle_bg .circle_ani { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 3%; box-sizing: border-box; width: 100%; height: 100%; text-align: center; }
.circle_bg .circle_ani .inner { position: relative; display: inline-block; }
.circle_bg .circle_ani img { display: inline-block; }
.circle_bg .circle_ani img.rotate_bg { display: none; position: absolute; top: 0; left: 0; /* animation: 70s linear 0s infinite normal none running rotation; */ }

/*character*/
.cha_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; }
.cha_bg .inner { width: 100%; height: 100%; position: relative; }
.cha_bg .img_1 { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; margin-top: 40px; margin-left: 20px; opacity: 0; }
.cha_bg .img_2 { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; margin-top: -80px; margin-left: -20px; opacity: 0; }
.cha_bg .img_3 { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; margin-top: -200px; opacity: 0; }

/*bg_text*/
.bg_text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; }
.bg_text .inner { width: 1100px; height: 100%; position: relative; margin: 0 auto; }
.bg_text .inner .left_tt { position: absolute; top: 100px; left: 0%; }
.bg_text .inner .right_tt { position: absolute; top: 100px; right: 0%; margin-top: 55px; }

/*cbt_con*/
.cbt_con { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; opacity: 0; }
.cbt_con .inner { position: relative; width: 100%; height: 100%; text-align: center; }
.cbt_con .inner .logo { margin-top: 90px; }
.cbt_con .inner .logo img { display: inline-block; }
.cbt_con .inner .tit { margin-top: 40px; }
.cbt_con .inner .tit img { display: inline-block; }

/*
.cbt_con .inner .tit { margin-top: 50px; text-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.cbt_con .inner .tit p { display: inline-block; font-size: 3.438em; font-weight: 900; background: linear-gradient(to bottom, #1a82eb 0%, #8932a5 50%, #1a82eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
*/

.cbt_con .inner .date { margin-top: 0px; }
.cbt_con .inner .date img { display: inline-block; }

.cbt_con .inner .btn { position: relative; width: 312px; height: 84px; line-height: 84px; border-radius: 84px; background: #000; margin: 0 auto; background: linear-gradient(to right, #68a6be 0, #5bbab7 50%, #68a6be 100%); cursor: pointer; box-shadow: 0 0 30px 10px rgba(255,255,255,.8); transition: .3s; margin-top: 60px; }

.cbt_con .inner .btn .icon { position: absolute; top: 7px; left: 7px; width: 70px; height: 70px; border-radius: 50%; background: #ededed; box-shadow: 10px 0 20px 2px #3c82eb; }
.cbt_con .inner .btn .icon_in { position: absolute; top: 10px; left: 10px; width: 64px; height: 64px; border-radius: 50%; background: #ededed; box-shadow: inset 5px 0 8px 1px rgba(0,0,0,.25); }
.cbt_con .inner .btn .icon_in .xi { line-height: 64px; font-size: 2.313em; color: #5560ca; transition: .3s; }
.cbt_con .inner .btn:hover .xi { color: #e926c2; }
.cbt_con .inner .btn .text { font-size: 1.438em; font-weight: 900; text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; color: #1f2fb6; padding-left: 35px; transition: .3s; }
.cbt_con .inner .btn:hover .text { color: #cb1f89; }

.cbt_con .inner .detail { position: relative; width: 470px; height: 120px; border-radius: 25px; border: 3px solid #2ca8ff; background: rgba(0,0,0,.55); margin: 90px auto 0 auto; transition: .3s; }
.cbt_con .inner .detail:hover { background: rgba(0,0,0,.7); }
.cbt_con .inner .detail .tt { color: #f3f3f3; line-height: 1.4; }
.cbt_con .inner .detail .tt .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #ecf71c; margin-right: 5px; }
.cbt_con .inner .detail .tt span { vertical-align: middle; }
.cbt_con .inner .detail .tt:not(:last-child) { margin-bottom: 10px; }
.cbt_con .inner .detail .img { position: absolute; right: 0; bottom: 0; margin-right: -40px; margin-bottom: -15px; }



/*main_210607*/
.black_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; }
.main_btm { position: fixed; bottom: 0; left: 0; z-index: 3; }
.main_logo { position: fixed; bottom: -30px; left: 50%; transform: translate(-50%, 0)!important; z-index: 4; opacity: 0; }
.main_logo img { display: inline-block; }
.banner_w { display: none; }


#contents .mainvisual  { position: relative; }
#contents .mainvisual .main_board { display: none; width: 100%; height: 100%; position: relative; top: 0; left: 0; z-index: 2; }
#contents .mainvisual .main_board_bg { display: none; position: absolute; top: 0; left: 0; z-index: 1; }
#contents .mainvisual .main_board_left { display: none; position: absolute; top: 0; left: 0; z-index: 1; }
#contents .mainvisual .main_board_right { display: none; position: absolute; top: 0; right: 0; z-index: 1; }


#contents .mainvisual .main_cha_right { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 3; }
#contents .mainvisual .main_cha_right img { display: inline-block; }
#contents .mainvisual .main_cha_right .inner { width: 100%; height: 100%; position: relative; }
#contents .mainvisual .main_cha_right .inner .right_1 { display: none; position: absolute; bottom: 27px; left: 158px; z-index: 9; }
#contents .mainvisual .main_cha_right .inner .right_2 { display: none; position: absolute; bottom: 15px; left: 345px; z-index: 8; }
#contents .mainvisual .main_cha_right .inner .right_3 { display: none; position: absolute; bottom: 157px; left: 190px; z-index: 7; }
#contents .mainvisual .main_cha_right .inner .right_4 { display: none; position: absolute; top: 19px; left: 116px; z-index: 6; }


#contents .mainvisual .main_cha_left { position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: 3; }
#contents .mainvisual .main_cha_left img { display: inline-block; }
#contents .mainvisual .main_cha_left .inner { width: 100%; height: 100%; position: relative; }
#contents .mainvisual .main_cha_left .inner .left_1 { display: none; position: absolute; bottom: -116px; right: -2px; z-index: 9; }
#contents .mainvisual .main_cha_left .inner .left_2 { display: none; position: absolute; bottom: -15px; right: 210px; z-index: 8; /*캐릭터 크기 조절*/ width: 653px; }
#contents .mainvisual .main_cha_left .inner .left_3 { display: none; position: absolute; bottom: 250px; right: 179px; z-index: 7; /*캐릭터 크기 조절*/ width: 510px; }


#contents .mainvisual .main_board .board_show { position: absolute; top: 64px; left: 50%; z-index: 2; transform: translate(-50%, 0); }
#contents .mainvisual .main_board .board_hide { position: absolute; top: 64px; left: 50%; z-index: 3; transform: translate(-50%, 0); }
#contents .mainvisual .main_board .board_po { opacity: 0; position: absolute; top: 177px; left: calc(50% - 250px); z-index: 2; transform: translate(-50%, 0); width: 325px; }
#contents .mainvisual .main_board .board_po .inner { width: 100%; height: 100%; position: relative; }
#contents .mainvisual .main_board .board_po_1 { position: absolute; top: 39px; left: 50%; transform: translate(-50%, 0); }
#contents .mainvisual .main_board .board_po_2 { position: absolute; top: 215px; left: 50%; transform: translate(-50%, 0); margin-left: -2px; }
#contents .mainvisual .main_board .board_po_3 { position: absolute; top: 242px; left: 50%; transform: translate(-50%, 0); margin-left: -1px; }
#contents .mainvisual .main_board .board_po_4 { position: absolute; top: 434px; left: 50%; transform: translate(-50%, 0); }
#contents .mainvisual .main_board .board_po_5 { position: absolute; bottom: 42px; left: 50%; transform: translate(-50%, 0); }
/* #contents .mainvisual .main_board .board_etc { cursor: pointer; } */


.slick-dots { bottom: 10px!important; bottom: 17px!important; }
.slick-dots li { margin: 0 14px!important; }
.slick-dots li button { text-shadow: 0 1px 3px rgba(0,0,0,.6); }

.slick-dots li button:before { color: #ff438e!important; font-size: 1.125rem!important; opacity: 0.5!important; transition: .3s; }

.slick-dots li:hover button:before { opacity: .85!important; }

.slick-dots li.slick-active button:before { opacity: 1!important; }


/* JK 추가 */
.section_tt .notice2_tt { position: fixed; top: 107px; left: 50%; transform: translate(-50%, 0); opacity: 0; }
/* JK 추가 끝 */

.section_tt .notice_tt { position: fixed; top: 107px; left: 50%; transform: translate(-50%, 0); opacity: 0; }
.section_tt .notice_st { position: fixed; bottom: 100px; left: 50%; transform: translate(-50%, 0); opacity: 0; display: none; }

.section_tt .game_tt { position: fixed; top: 155px; right: 50%; transform: translate(50%, 0); width: 1200px; text-align: right; padding-right: 95px; box-sizing: border-box; opacity: 0; }
.section_tt .game_tt img { display: inline-block; }
.section_tt .game_st { position: fixed; bottom: 210px; right: 50%; transform: translate(50%, 0); width: 1200px; text-align: right; padding-right: 95px; box-sizing: border-box; opacity: 0; }
.section_tt .game_st img { display: inline-block; }

.section_tt .twitter_tt { position: fixed; top: 45px; left: 50%; transform: translate(-50%, 0); width: 640px; padding-right: 114px; opacity: 0; }
.section_tt .twitter_st { position: fixed; bottom: 56px; left: 50%; transform: translate(50%, 0); width: 640px; padding-left: 7px; opacity: 0; }

/* #contents .mainvisual .section_bg { opacity: 0; position: absolute; top: 310px; left: 50%; transform: translate(-50%, 0); width: 1200px; height: 482px; padding: 55px; border-radius: 25px; box-sizing: border-box; border: 6px solid #ff269b; background: rgba(255, 255, 255, .8); z-index: 1; } */
#contents .mainvisual .section_bg { opacity: 0; position: absolute; top: 310px; left: 50%; transform: translate(-50%, 0); width: 1100px; height: 482px; padding: 10px; border-radius: 25px; box-sizing: border-box; border: 6px solid #a64c09; background: #ffcd00; z-index: 1; }

#contents .mainvisual .section_bg .board_text { display: none; padding-left: 540px; box-sizing: border-box; }
#contents .mainvisual .section_bg .board_text .txt:not(:last-child) { margin-bottom: 15px; }
#contents .mainvisual .section_bg .board_text .txt .t_in { display: inline-block; width: 100%; padding: 6px 35px 6px 6px; border-radius: 53px; border: 2px solid #fffc22; box-sizing: border-box; background: #444; cursor: pointer; }
#contents .mainvisual .section_bg .board_text .txt .num { display: inline-block; font-size: 1.125em; font-weight: 500; width: 41px; height: 41px; border-radius: 50%; border: 2px solid #fffc22; box-sizing: border-box; background: #FFF; color: #333; padding-right: 3px; padding-bottom: 2px; vertical-align: middle; margin-right: 15px; }
#contents .mainvisual .section_bg .board_text .txt .tt { font-size: 1.063em; color: #FFF; font-weight: 400; vertical-align: middle; }


#contents .mainvisual .section_bg .board_text .txt_2 .t_in { border-color: #ff22d3; }
#contents .mainvisual .section_bg .board_text .txt_2 .num { border-color: #ff22d3; }

#contents .mainvisual .section_bg .board_text .txt_3 .t_in { border-color: #22f7ff; }
#contents .mainvisual .section_bg .board_text .txt_3 .num { border-color: #22f7ff; }

#contents .mainvisual .section_bg .board_text .txt_4 .t_in { border-color: #22ff60; }
#contents .mainvisual .section_bg .board_text .txt_4 .num { border-color: #22ff60; }

#contents .mainvisual .section_bg .board_text .txt_5 .t_in { border-color: #ff4c22; }
#contents .mainvisual .section_bg .board_text .txt_5 .num { border-color: #ff4c22; }

#contents .mainvisual .section_bg .inner { opacity: 1; width: 100%; height: 100%; border-radius: 15px; overflow: hidden; z-index: 3; }

#contents .mainvisual .section_bg .btn_inner { position: relative; width: 100%; height: 0; display: none; }
#contents .mainvisual .section_bg .left_btn { position: absolute; top: 225px; left: -123px; transform: translate(0, -50%); cursor: pointer; transition: .3s; }
#contents .mainvisual .section_bg .left_btn .arrow { display: inline-block; vertical-align: middle; font-size: 2.75em; color: #a64c09; transform: rotate(-90deg); text-shadow: -2px 1px 3px rgba(0,0,0,.7); transition: .3s; }
#contents .mainvisual .section_bg .left_btn .circle_1 { display: inline-block; vertical-align: middle; width: 14px; height: 14px; border-radius: 50%; background: #ffcd00; margin-right: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.7); transition: .3s; }
#contents .mainvisual .section_bg .left_btn .circle_2 { display: inline-block; vertical-align: middle; width: 14px; height: 14px; border-radius: 50%; background: #ffcd00; box-shadow: 0 1px 3px rgba(0,0,0,.7); transition: .3s; }

#contents .mainvisual .section_bg .left_btn:hover { left: -137px; }
#contents .mainvisual .section_bg .left_btn:hover .arrow { margin-right: 5px; }
#contents .mainvisual .section_bg .left_btn:hover .circle_1 { margin-right: 13px; }
#contents .mainvisual .section_bg .left_btn:hover .circle_2 { margin-right: 4px; }


#contents .mainvisual .section_bg .right_btn { position: absolute; top: 225px; right: -123px; transform: translate(0, -50%); cursor: pointer; transition: .3s; }
#contents .mainvisual .section_bg .right_btn .arrow { display: inline-block; vertical-align: middle; font-size: 2.75em; color: #a64c09; transform: rotate(90deg); text-shadow: 2px 1px 3px rgba(0,0,0,.7); transition: .3s; }
#contents .mainvisual .section_bg .right_btn .circle_1 { display: inline-block; vertical-align: middle; width: 14px; height: 14px; border-radius: 50%; background: #ffcd00; margin-left: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.7); transition: .3s; }
#contents .mainvisual .section_bg .right_btn .circle_2 { display: inline-block; vertical-align: middle; width: 14px; height: 14px; border-radius: 50%; background: #ffcd00; box-shadow: 0 1px 3px rgba(0,0,0,.7); transition: .3s; }

#contents .mainvisual .section_bg .right_btn:hover { right: -137px; }
#contents .mainvisual .section_bg .right_btn:hover .arrow { margin-left: 5px; }
#contents .mainvisual .section_bg .right_btn:hover .circle_1 { margin-left: 13px; }
#contents .mainvisual .section_bg .right_btn:hover .circle_2 { margin-left: 4px; }

.notice_slide .slick-prev,
.notice_slide  .slick-next { display: none!important; }

/*sub_body*/
.sub_body #header { opacity: 1; top: 0; }
.sub_body #header .logo { opacity: 1; top: 0; }
.sub_body .pattern_bg { display: block; animation: slideright 15000s infinite linear; -webkit-animation: slideright 15000s infinite linear; }
.sub_body .black_bg { display: none; }
.sub_body .circle_bg { z-index: 1; }
.sub_body .circle_bg .circle_ani img.rotate_bg { display: block; animation: 70s linear 0s infinite normal none running rotation; }
.sub_body .main_btm { display: none; }
.sub_body .main_logo { display: none; }

.sub.doc #header { opacity: 1; top: 0; }
.sub.doc #header .logo { opacity: 1; top: 0; }
.sub.doc .pattern_bg { display: block; animation: slideright 15000s infinite linear; -webkit-animation: slideright 15000s infinite linear; }
.sub.doc .black_bg { display: none; }
.sub.doc .circle_bg { z-index: 1; }
.sub.doc .circle_bg .circle_ani img.rotate_bg { display: block; animation: 70s linear 0s infinite normal none running rotation; }
.sub.doc .main_btm { display: none; }
.sub.doc .main_logo { display: none; }

/*twitter*/
.twitter_w { display: none; height: 100%; overflow-y: scroll; }
.twitter_w .twitter-tweet { margin: 0!important; padding: 30px!important; }


/*1-2*/
.new_intro { background: url('../images/intro_bg.png') no-repeat 50% -52px rgba(255,255,255,.88); }
.new_intro .worldview_w { padding: 30px 96px 0 96px; margin-bottom: 150px; }
.new_intro .worldview_w .tt { margin-bottom: 50px; visibility:hidden; transition:1.3s; line-height: 1.4; }
.new_intro .worldview_w .tt { font-size: 1.625em; font-weight: 700; color: #FFF; font-family: 'M PLUS Rounded 1c', sans-serif; background: linear-gradient( to top, rgb(153 123 255) 0%, rgb(87 42 196) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative; }
.new_intro .worldview_w .tt.moveB { transform: translateY(-7em); opacity: 0; }
.new_intro .worldview_w .tt.moveB.on { transform: translateY(0); opacity: 1; visibility:visible; }

.new_intro .worldview_w .st { margin-bottom: 35px; font-size: 1.125em; line-height: 1.5; font-weight: 600; color: #111; font-weight: 600; text-shadow: -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff; visibility:hidden; transition:1.3s}
.new_intro .worldview_w .st.moveL { transform: translateX(-10em); opacity: 0; }
.new_intro .worldview_w .st.moveL.on { transform: translateX(0); opacity: 1; visibility:visible; }


.new_intro .cha_st { text-align: center; font-size: 1em; font-weight: 500; margin-bottom: 20px; color: #fbff00; text-shadow: -1px -1px 0 #2966e3, 1px -1px 0 #2966e3, -1px 1px 0 #2966e3, 1px 1px 0 #2966e3; letter-spacing: 0; }

.new_intro .intro_cha { box-shadow: 0 1px 5px 3px rgba(0,0,0,.4); border-top: 5px solid #8fd775; border-bottom: 5px solid #ff7f88; background: linear-gradient(to right, #ffe2e4 0%, #dbffd7 100%); margin-bottom: 60px; height: 420px; position: relative; overflow: hidden; }
.new_intro .intro_cha.second { background: linear-gradient(to right, #f3ddfa 0%, #d0f1ff 100%); border-top: 5px solid #87afff; border-bottom: 5px solid #b278ff; }
.new_intro .intro_cha.second .cha_in .tit { color: #4565ff; }

.new_intro .intro_cha.third { background: linear-gradient(to right, #f7ddff 0%, #d3ffeb 100%); border-top: 5px solid #74c7a1; border-bottom: 5px solid #e08afc; }
.new_intro .intro_cha.third .cha_in .tit { color: #eb45ff; }

.new_intro .intro_cha.fourth { background: linear-gradient(to right, #dde1ff 0%, #e7f5ff 100%); border-top: 5px solid #8b93ff; border-bottom: 5px solid #b642ff; }
.new_intro .intro_cha.fourth .cha_in .tit { color: #ff45ac; }

.new_intro .intro_cha.last { background: linear-gradient(to right, #ffdddd 0%, #f6ffe6 100%); border-top: 5px solid #ff9371; border-bottom: 5px solid #b75400; }
.new_intro .intro_cha.last .cha_in .tit { color: #ff45ac; }


.new_intro .intro_cha .bg_left { position: absolute; top: 22px; left: -101px; }
.new_intro .intro_cha .bg_center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.new_intro .intro_cha .bg_right { position: absolute; top: 62px; right: -53px; }

.new_intro .intro_cha .cha_in { position: relative; z-index: 1; padding: 22px 45px; box-sizing: border-box; width: 100%; height: 100%; }
.new_intro .intro_cha .cha_in .tit { font-size: 2em; font-weight: 700; color: #45aaff; font-style: italic; display: none; }
.new_intro .intro_cha .cha_in .cha_1 { position: absolute; top: 50%; left: 30%; transform: translate(-50%, -50%); }
.new_intro .intro_cha .cha_in .cha_2 { position: absolute; top: 50%; left: 70%; transform: translate(-50%, -50%); }

.new_intro .intro_cha .cha_in .cha_all .inner { position: relative; width: 263px; height: 282px; cursor: pointer; }
.new_intro .intro_cha .cha_in .cha_all .inner img { position: absolute; top: 0; left: 0; transition: .3s; }



/*n_cha*/
.n_cha_w { position: absolute; width: 435px; height: 420px; top: 0; left: 10%; }
.n_cha_w > .inner { width: 100%; height: 100%; position: relative; cursor: pointer; }
.n_cha_w > .inner .bg { position: absolute; top: -105px; left: 118px; width: 183px; height: 636px; background: #2eab00; transform: rotate(30deg); border-right: 6px solid #0b7000; }
.n_cha_w > .inner .bg .inner { position: relative; width: 100%; height: 100%; }
.n_cha_w > .inner .bg .inner .top_ani { position: absolute; top: -130px; right: 20px; width: 3px; height: 150px; background: #a4ff9a; }
.n_cha_w > .inner .bg .inner .btm_ani { position: absolute; bottom: -130px; left: 20px; width: 3px; height: 150px; background: #a4ff9a; }
.n_cha_w > .inner .tt { position: absolute; top: 20px; right: 50px; font-size: 1.625em; font-weight: 700; color: #dfffd3; font-style: italic; font-family: 'M PLUS Rounded 1c', sans-serif; }
.n_cha_w > .inner .cha { width: 100%; height: 100%; position: relative; }
.n_cha_w > .inner .cha .s_cha { position: absolute; top: 84px; right: 60px; display: none; }
.n_cha_w > .inner .cha .b_cha .inner { position: relative; }
.n_cha_w > .inner .cha .b_cha .inner img { position: absolute; top: 50px; right: 80px; }
.n_cha_w > .inner .cha .b_cha .inner img.hover { opacity: 0; z-index: 2; }
.n_cha_w > .inner .cha .b_cha .inner img.no_hover { z-index: 1; }

.n_cha_w.po_2 { position: absolute; width: 435px; height: 420px; top: 0; left: auto; right: 10%; }
.n_cha_w.po_2 > .inner .bg { background: #d53d47; border-right: 6px solid #8b000a; }
.n_cha_w.po_2 > .inner .bg .inner .top_ani { background: #ff9a9a; }
.n_cha_w.po_2 > .inner .bg .inner .btm_ani { background: #ff9a9a; }
.n_cha_w.po_2 > .inner .tt { color: #ffc6ca; }

.n_cha_w.aria > .inner .bg { background: #2765e3; border-right: 6px solid #0036a3; }
.n_cha_w.aria > .inner .bg .inner .top_ani { background: #c6e2ff; }
.n_cha_w.aria > .inner .bg .inner .btm_ani { background: #c6e2ff; }
.n_cha_w.aria > .inner .tt { color: #c6e2ff; }

.n_cha_w.aria > .inner .cha .b_cha .inner img { width: 380px; top: 42px; }
.n_cha_w.aria > .inner .cha .s_cha { top: 156px; }

/* .n_cha_w.cha_4 { left: 50%; transform: translate(-50%, 0); } */

.n_cha_w.cha_4 > .inner .bg { background: #9754ff; border-right: 6px solid #5500d8; }
.n_cha_w.cha_4 > .inner .bg .inner .top_ani { background: #ffece1; }
.n_cha_w.cha_4 > .inner .bg .inner .btm_ani { background: #ffece1; }
.n_cha_w.cha_4 > .inner .tt { color: #e7d8ff; }

.n_cha_w.cha_4 > .inner .cha .b_cha .inner img { position: absolute; top: 64px; right: 10px; }
.n_cha_w.cha_4 > .inner .cha .s_cha { right: 35px; top: 80px; }

.n_cha_w.t_60 > .inner .cha .b_cha .inner img { top: 70px; }

.n_cha_w.cha_5 > .inner .bg { background: #4d9b77; border-right: 6px solid #005930; }
.n_cha_w.cha_5 > .inner .bg .inner .top_ani { background: #bcffe0; }
.n_cha_w.cha_5 > .inner .bg .inner .btm_ani { background: #bcffe0; }
.n_cha_w.cha_5 > .inner .tt { color: #bcffe0; }


.n_cha_w.cha_6 > .inner .cha .b_cha .inner img { position: absolute; right: 110px; }
.n_cha_w.cha_6 > .inner .cha .s_cha { right: 71px; top: 102px; }

.n_cha_w.cha_6 > .inner .bg { background: #9c4db6; border-right: 6px solid #5a0078; }
.n_cha_w.cha_6 > .inner .bg .inner .top_ani { background: #f1c8ff; }
.n_cha_w.cha_6 > .inner .bg .inner .btm_ani { background: #f1c8ff; }
.n_cha_w.cha_6 > .inner .tt { color: #f1c8ff; }


.n_cha_w.cha_7 > .inner .cha .b_cha .inner img { position: absolute; top: 90px; right: 10px; }
.n_cha_w.cha_7 > .inner .cha .s_cha { right: 50px;}

.n_cha_w.cha_7 > .inner .bg { background: #ce60b7; border-right: 6px solid #a1007f; }
.n_cha_w.cha_7 > .inner .bg .inner .top_ani { background: #ffdef8; }
.n_cha_w.cha_7 > .inner .bg .inner .btm_ani { background: #ffdef8; }
.n_cha_w.cha_7 > .inner .tt { color: #ffdef8; }


.n_cha_w.cha_8 > .inner .bg { background: #54b8ff; border-right: 6px solid #5461ff; }
.n_cha_w.cha_8 > .inner .bg .inner .top_ani { background: #ffece1; }
.n_cha_w.cha_8 > .inner .bg .inner .btm_ani { background: #ffece1; }
.n_cha_w.cha_8 > .inner .tt { color: #e9f6ff; }

.n_cha_w.cha_8 > .inner .cha .b_cha .inner img { position: absolute; top: 64px; right: 5px; width: 480px; max-width: none; }
.n_cha_w.cha_8 > .inner .cha .s_cha { right: 62px; top: 80px; }


/* .n_cha_w.cha_9 { left: 50%; transform: translate(-50%, 0); } */
.n_cha_w.cha_9 > .inner .bg { background: #ff5f24; border-right: 6px solid #b04000; }
.n_cha_w.cha_9 > .inner .bg .inner .top_ani { background: #ffece1; }
.n_cha_w.cha_9 > .inner .bg .inner .btm_ani { background: #ffece1; }
.n_cha_w.cha_9 > .inner .tt { color: #ffece1; }

.n_cha_w.cha_9 > .inner .cha .b_cha .inner img { position: absolute; top: 31px; right: 30px;; }
.n_cha_w.cha_9 > .inner .cha .s_cha { right: 35px; top: 246px; }


.n_cha_w.cha_10 > .inner .bg { background: #d47edf; border-right: 6px solid #765791; }
.n_cha_w.cha_10 > .inner .bg .inner .top_ani { background: #ffece1; }
.n_cha_w.cha_10 > .inner .bg .inner .btm_ani { background: #ffece1; }
.n_cha_w.cha_10 > .inner .tt { color: #e9f6ff; }

.n_cha_w.cha_10 > .inner .cha .b_cha .inner img { position: absolute; top: 30px; right: 5px; width: 620px; max-width: none; }
.n_cha_w.cha_10 > .inner .cha .s_cha { right: 9px; top: 247px; }


.n_cha_w > .inner .cha_btn { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; z-index: 3; }

/*1-1*/
.cc_intro_w { width: 90%; margin: 0 auto; padding-left: 330px; box-sizing: border-box; position: relative; height: 590px;  }
.cc_intro_w .cc_img { position: absolute; top: -10px; left: 0; }
.cc_intro_w .txt_w { padding-top: 100px; }
.cc_intro_w .txt_w .t1 { opacity: 0; }
.cc_intro_w .txt_w .t2 { margin-top: 120px; text-align: right; opacity: 0; }
.cc_intro_w .txt_w .t2 img { display: inline-block; }



.t1_bg { position: absolute; top: 70px; right: 0; width: 100%; height: 150px; background: linear-gradient(to right, #43baff 0%, #ff40b3 100%); }
.t1_bg_before { position: absolute; top: 70px; right: 0; width: 100%; height: 150px; background: linear-gradient(to right, #43baff 0%, #ff40b3 100%); opacity: .3; }
.t1_bg_white { position: absolute; top: 70px; right: 0; width: 100%; height: 150px; background: #FFF; }

.t2_bg { position: absolute; top: 280px; left: 0; width: 100%; height: 150px; background: linear-gradient(to left, #45fbf1 0%, #b7f864 50%, #fef601 100%); }
.t2_bg_before { position: absolute; top: 280px; left: 0; width: 100%; height: 150px; background: linear-gradient(to left, #45fbf1 0%, #b7f864 50%, #fef601 100%); opacity: .3; }
.t2_bg_white { position: absolute; top: 280px; right: 0; width: 100%; height: 150px; background: #FFF; }

.intro_tit_w { width: 130%; height: 130px; background: #ed145b; margin-left: -15%; margin-top: 70px; position: relative; z-index: 1; }
.intro_tit_w .inner { position: relative; }
.intro_tit_w .left_bg { position: absolute; left: 0; bottom: -20px; margin-left: -200px;}
.intro_tit_w .right_bg { position: absolute; right: 0; bottom: 10px; margin-right: -300px; }
.intro_tit_w .tit { height: 130px; line-height: 130px; position: relative; padding-left: 725px; box-sizing: border-box; }
.intro_tit_w .tit > img { position: absolute; top: -47px; left: 428px; width: 216px; }
.intro_tit_w .tit .t1 { display: inline-block; font-size: 2.25em; color: #FFF; font-weight: 700; letter-spacing: 0.5px; font-family: 'M PLUS Rounded 1c', sans-serif; }
.intro_tit_w .tit .t2 { display: none; font-size: 1em; color: #ffafc9; font-weight: 500; margin-left: 40px; letter-spacing: 3px; }


.fixed_cc { width: 90%; margin: 80px auto 0 auto; }


.fixed_cc .inner { position: relative; height: 100%; display: inline-block; vertical-align: middle; margin-right: 50px; }
.fixed_cc .inner.pb_20 { padding-bottom: 20px; }
.fixed_cc .inner .fixed_1 { position: relative; z-index: 3; }
.fixed_cc .inner .fixed_2 { position: absolute; top: 49px; left: 49px; z-index: 9; }
.fixed_cc .inner .fixed_3 { position: absolute; top: 49px; left: 49px; z-index: 2; }
.fixed_cc .inner .fixed_4 { position: absolute; top: 0; left: 0; z-index: 2; }
.fixed_cc .inner .fixed_5 { position: absolute; top: 0; left: 0; z-index: 2; }

.fixed_cc .inner .circle_2 { position: absolute; top: 0; left: 0; z-index: -1; }

.fixed_cc .inner .touch_1 { position: absolute; top: 0; left: 0; z-index: 4; opacity: 0; }
.fixed_cc .inner .touch_2 { position: absolute; top: 0; left: 0; z-index: 4; opacity: 0; }
.fixed_cc .inner .touch_3 { position: absolute; top: 0; left: 0; z-index: 4; opacity: 0; }

.card_cc .inner { position: relative; }
.card_cc .inner .card_in { position: absolute; top: 121px; left: 174px; z-index: 1; opacity: 0; }

.fixed_cc .inner .cover { position: relative; z-index: 9; }
.fixed_cc .inner .step_1 { position: absolute; top: 0; left: 50%; z-index: 9; transform: translate(-50%, 0); display: none; }
.fixed_cc .inner .step_2 { position: absolute; top: 0; left: 50%; z-index: 9; transform: translate(-50%, 0); display: none; }
.fixed_cc .inner .step_3 { position: absolute; top: 0; left: 50%; z-index: 9; transform: translate(-50%, 0); display: none; }
.fixed_cc .inner .step_4 { position: absolute; top: 0; left: 50%; z-index: 9; transform: translate(-50%, 0); display: none; }

.fixed_cc .inner .l_arrow { position: absolute; bottom: -45px; left: -16px; z-index: 2; display: none; }
.fixed_cc .inner .r_arrow { position: absolute; bottom: -45px; right: -16px; z-index: 2; display: none; }

.fixed_cc .txt_w { display: inline-block; vertical-align: middle; position: relative; }
.fixed_cc .txt_w .tt { position: absolute; top: -105px; left: 50%; transform: translate(-50%, 0); width: 310px; }
.fixed_cc .txt_w.pb_20 { padding-bottom: 20px; }
.fixed_cc .txt_w .txt { width: 370px; position: relative; margin-top: 29px; padding: 50px 30px 30px 30px; border: 3px solid #ff22d3; background: #FFF; border-radius: 20px; text-align: center; cursor: pointer; box-shadow: 8px 8px 6px rgba(0,0,0,.4); transition: .3s; }
.fixed_cc .txt_w .txt:hover { box-shadow: 2px 2px 3px rgba(0,0,0,.4); }
.fixed_cc .txt_w .txt:not(:last-child) { margin-bottom: 65px; }
.fixed_cc .txt_w .txt .tt_w { font-size: 0; width: 270px; height: 58px; border-radius: 58px; padding: 6px; box-sizing: border-box; background: #000; position: absolute; top: -29px; left: 50%; transform: translate(-50%, 0); text-align: left; }
.fixed_cc .txt_w .txt .tt_w .icon { display: inline-block; vertical-align: middle; width: 46px; height: 46px; border-radius: 50%; background: #ff22d3; font-size: 1.25rem; color: #FFF; box-sizing: border-box; padding-right: 5px; }
.fixed_cc .txt_w .txt .tt_w .text { display: inline-block; vertical-align: middle; font-size: 1.125rem; font-weight: 600; color: #FFF; width: calc(100% - 46px); text-align: center; padding-left: 5px; padding-right: 20px; box-sizing: border-box; }

.fixed_cc .txt_w .txt .st_w p { color: #333; font-size: 1.063em; }
.fixed_cc .txt_w .txt .st_w p:not(:last-child) { margin-bottom: 9px; }
.fixed_cc .txt_w .txt .st_w p span { vertical-align: middle; }
.fixed_cc .txt_w .txt .st_w p .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #ff22d3; margin-right: 5px; }


.fixed_cc .txt_w .txt.co_2 { border-color: #8e22ff; }
.fixed_cc .txt_w .txt.co_2 .tt_w .icon { background: #8e22ff; }
.fixed_cc .txt_w .txt.co_2 .st_w p .dot { background: #8e22ff; }

.fixed_cc .txt_w .txt.co_3 { border-color: #22c0ff; }
.fixed_cc .txt_w .txt.co_3 .tt_w .icon { background: #22c0ff; }
.fixed_cc .txt_w .txt.co_3 .st_w p .dot { background: #22c0ff; }

.fixed_cc .img_edit { width: 555px; text-align: center; }
.fixed_cc .img_edit img { display: inline-block; }

.purple_line { width: 100%; margin: 60px auto; border-top: 4px dashed #ff22d3; }
.green_line { width: 100%; margin: 60px auto; border-top: 4px dashed #1de555; }
.orange_line { width: 100%; margin: 60px auto; border-top: 4px dashed #ff4c22; }

.card_cc { width: 90%; margin: 0 auto; }
.card_cc .inner { width: 555px; text-align: center; margin-right: 50px; display: inline-block; vertical-align: middle; position: relative; }
.card_cc .inner img { display: inline-block; }

.card_cc .txt_w { display: inline-block; vertical-align: middle; }
.card_cc .txt_w .txt { width: 370px; position: relative; margin-top: 29px; padding: 50px 30px 30px 30px; border: 3px solid #1de555; background: #FFF; border-radius: 20px; text-align: center; cursor: pointer; box-shadow: 8px 8px 6px rgba(0,0,0,.4); transition: .3s; }
.card_cc .txt_w .txt:hover { box-shadow: 2px 2px 3px rgba(0,0,0,.4); }
.card_cc .txt_w .txt:not(:last-child) { margin-bottom: 65px; }
.card_cc .txt_w .txt .tt_w { font-size: 0; width: 270px; height: 58px; border-radius: 58px; padding: 6px; box-sizing: border-box; background: #000; position: absolute; top: -29px; left: 50%; transform: translate(-50%, 0); text-align: left; }
.card_cc .txt_w .txt .tt_w .icon { display: inline-block; vertical-align: middle; width: 46px; height: 46px; border-radius: 50%; background: #00bf35; font-size: 1.25rem; color: #FFF; box-sizing: border-box; padding-right: 5px; }
.card_cc .txt_w .txt .tt_w .text { display: inline-block; vertical-align: middle; font-size: 1.125rem; font-weight: 600; color: #FFF; width: calc(100% - 46px); text-align: center; padding-left: 5px; padding-right: 20px; box-sizing: border-box; }

.card_cc .txt_w .txt .st_w p { color: #333; font-size: 1.063em; }
.card_cc .txt_w .txt .st_w p:not(:last-child) { margin-bottom: 9px; }
.card_cc .txt_w .txt .st_w p span { vertical-align: middle; }
.card_cc .txt_w .txt .st_w p .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #1de555; margin-right: 5px; }


.card_cc.bottom_cc .txt_w .txt.co_2 { border-color: #ff4c22; }
.card_cc.bottom_cc .txt_w .txt.co_2 .tt_w .icon { background: #ff4c22; }
.card_cc.bottom_cc .txt_w .txt.co_2 .st_w p .dot { background: #ff4c22; }
.card_cc.bottom_cc .bottom_img { position: relative; }


@-webkit-keyframes foot {
    from { left: -3px; }
    to { left: 3px; }
}

.step_w { position: relative; text-align: center; margin-bottom: 50px; }
.step_w:first-child { padding-top: 25px; }
.step_w .img_w { display: inline-block; position: relative;  z-index: 2; }
.step_w .img_w .img { }
.step_w .img_w .detail_pr { position: relative; }
.step_w .img_w .detail_pr .option_btn { display: inline-block; width: 170px; height: 50px; border-radius: 50px; position: absolute; right: 123px; bottom: 176px; padding: 4px; box-sizing: border-box; color: #FFF; background: linear-gradient(to bottom, #1f2fb5, #d31e87); box-shadow: 0 0px 10px #f99fff; transition: .3s; }
.step_w .img_w .detail_pr .option_btn .inner { width: 100%; height: 100%; border: 2px solid #FFF; border-radius: 42px; box-sizing: border-box; padding-top: 9px; font-size: .938em; letter-spacing: 0; }

.step_w .img_w .detail_pr .note_btn { display: inline-block; width: 170px; height: 50px; border-radius: 50px; position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 0); padding: 4px; box-sizing: border-box; color: #FFF; background: linear-gradient(to bottom, #1f2fb5, #d31e87); box-shadow: 0 0px 10px #f99fff; transition: .3s; }
.step_w .img_w .detail_pr .note_btn .inner { width: 100%; height: 100%; border: 2px solid #FFF; border-radius: 42px; box-sizing: border-box; padding-top: 9px; font-size: .938em; letter-spacing: 0; }

.step_w .result_btn { display: inline-block; width: 170px; height: 50px; border-radius: 50px; padding: 4px; box-sizing: border-box; color: #FFF; background: linear-gradient(to bottom, #1f2fb5, #d31e87); box-shadow: 0 0px 10px #f99fff; transition: .3s; }
.step_w .result_btn .inner { width: 100%; height: 100%; border: 2px solid #FFF; border-radius: 42px; box-sizing: border-box; padding-top: 9px; font-size: .938em; letter-spacing: 0; }

.step_w .bg_w { width: 100%; position: absolute; top: 310px; left: 0; z-index: 1; }
.step_w .bg_w .top_bg { width: 100%; height: 17px; background: url('../images/flow_img_top_bg.png') no-repeat 50% 50%; }
.step_w .bg_w .bg { width: 100%; height: 158px; background: url('../images/flow_img_bg_1.png') no-repeat 50% 50%; margin-top: 3px; border-top: 3px solid #3ef7b7; box-sizing: border-box; border-bottom: 3px solid #3ef7b7; box-sizing: border-box; }
.step_w .bg_w .bg_2 { width: 100%; height: 158px; background: url('../images/flow_img_bg_2.png') no-repeat 50% 50%; margin-top: 3px; border-top: 3px solid #3ef7b7; box-sizing: border-box; border-bottom: 3px solid #3ef7b7; box-sizing: border-box; }
.step_w .bg_w .bg_3 { width: 100%; height: 158px; background: url('../images/flow_img_bg_3.png') no-repeat 50% 50%; margin-top: 3px; border-top: 3px solid #3ef7b7; box-sizing: border-box; border-bottom: 3px solid #3ef7b7; box-sizing: border-box; }
/*
.step_w .bg_w .scrollAni { width: 0; visibility: visible!important; transition: .5s; }
.step_w .bg_w .scrollAni.on { width: 100%; }
*/
.step_w .txt_w { margin: 20px auto; }
.step_w .txt_w .inner { max-width: 720px; min-width: 720px; line-height: 1.5; display: inline-block; padding: 14px 30px; color: #FFF; border-width: 3px; border-style: solid; border-image-slice: 1; border-image: linear-gradient(to bottom, #03b4fe, transparent) 1 100%; margin-bottom: 7px; box-sizing: border-box; word-break: break-all; font-weight: 500; }
.step_w .txt_w .inner > .fc { display: block; font-size: .938em; color: #ff3636; font-weight: 700; }
.step_w.option_step .txt_w { padding: 13px 0; }
.step_w.option_step .txt_w .inner { padding: 2px 68px; text-align: left; }
.step_w.option_step .txt_w .inner .tt { display: inline-block; width: 202px; text-align: right; font-size: 1.125em; margin-right: 12px; }
.step_w.option_step .txt_w .inner .st { display: inline-block; }
.step_w .txt_w .inner .tt { font-size: 1.25em; color: #03b4fe; font-weight: 700; margin-bottom: 6px; }
.step_w .txt_w .inner .nick_st { display: inline-block; position: relative; padding-left: 8px; margin-bottom: 8px; word-break: break-all; }
/* .step_w .txt_w .inner .nick_st:after { content: ""; width: 4px; height: 4px; border-radius: 4px; background: #FFF; position: absolute; top: 10px; left: 0; } */
.step_w .txt_w .inner:last-child { margin-bottom: 0; }
.step_w .txt_w .inner.bc_1 { border-image: linear-gradient(to bottom, #7aff00, transparent) 1 100%; }
.step_w .txt_w .inner.bc_2 { border-image: linear-gradient(to bottom, #ff9900, transparent) 1 100%; }
.step_w .txt_w .inner.bc_3 { border-image: linear-gradient(to bottom, #ff9900, transparent) 1 100%; }
.step_w .txt_w .inner.bc_4 { border-image: linear-gradient(to bottom, #ff54cd, transparent) 1 100%; }
.step_w .txt_w .inner.bc_5 { border-image: linear-gradient(to bottom, #bd55ff, transparent) 1 100%; }
.step_w .txt_w .inner.bc_6 { border-image: linear-gradient(to bottom, #25ffcd, transparent) 1 100%; }
.step_w .txt_w .inner.bc_7 { border-image: linear-gradient(to bottom, #366aff, transparent) 1 100%; }
.step_w .txt_w .inner.bc_8 { border-image: linear-gradient(to bottom, #ffea55, transparent) 1 100%; }
.step_w .txt_w .inner.bc_9 { border-image: linear-gradient(to bottom, #ebf82c, transparent) 1 100%; }

.step_w .txt_w .inner.bc_1 .tt { color: #7aff00; }
.step_w .txt_w .inner.bc_2 .tt { color: #ff9900; }
.step_w .txt_w .inner.bc_3 .tt { color: #ff9900; }
.step_w .txt_w .inner.bc_4 .tt { color: #ff54cd; }
.step_w .txt_w .inner.bc_5 .tt { color: #bd55ff; }
.step_w .txt_w .inner.bc_6 .tt { color: #25ffcd; }
.step_w .txt_w .inner.bc_7 .tt { color: #366aff; }
.step_w .txt_w .inner.bc_8 .tt { color: #ffea55; }
.step_w .txt_w .inner.bc_9 .tt { color: #ebf82c; }

.step_w.img_pt { padding-top: 35px; }

.option_step { /*display: none;*/ }
.result_step { /*display: none;*/ }
/* .option_step.on { transform: translateY(0); opacity: 1; } */

.step_line { width: 100%; border-top: 4px dashed #0dfef1; margin: 70px auto; }

/*scroll_text*/
.scroll_text { position: fixed; bottom: 18px; left: 0; width: 100%; text-align: center; z-index: 100; font-size: 1.125em; color: #fffb88; text-shadow: -1px -1px 2px #fa8308, 1px -1px 2px #fa8308, -1px 1px 2px #fa8308, 1px 1px 2px #fa8308; display: none; }
.scroll_text i { vertical-align: middle; font-size: 1.625em; margin-right: 7px; }
.scroll_text span { vertical-align: middle; }
.scroll_text .fc { color: #ffaf32; text-shadow: -1px -1px 2px #fa1308, 1px -1px 2px #fa1308, -1px 1px 2px #fa1308, 1px 1px 2px #fa1308; vertical-align: middle; margin-right: 3px; font-weight: 600; }

.footer_text { position: fixed; bottom: 6px; left: 0; width: 100%; text-align: center; z-index: 100; line-height: 1.5; font-size: .938em; font-weight: 300; color: #FFF; text-shadow: -1px -1px 2px #666, 1px -1px 2px #666, -1px 1px 2px #666, 1px 1px 2px #666; letter-spacing: 0; display: none; }

.main_body #footer { display: none; }
/*sub_ani*/
.drop_ani { position: fixed; bottom: 0; left: 30px; width: 100px; height: 100px; border-radius: 50%; background: #000; z-index: 9; transform: translate(0, -100%); display: none; }

@-webkit-keyframes bounce-in-top{
    0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
}

@keyframes bounce-in-top{
    0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
}

.bounce-in-top{-webkit-animation:bounce-in-top 1.1s both;animation:bounce-in-top 1.1s both; }


/*mypage*/
.mypage_doc { margin-top: 65px; padding-top: 50px; }
/* .mypage_w { width: 1300px; margin: 0 auto; background: #FFF; padding: 40px; box-sizing: border-box; border: 4px solid #dcdcdc; } */
.mypage_w { width: 1200px; margin: 0 auto; max-width: 96%; }
.mypage_w > .inner { }

.mypage_w .inner ul { font-size: 0; margin-bottom: 25px; background: #f1faff; /*background: #FFF; border: 3px solid #dcdcdc;*/ transition: .3s; border: 3px solid #32f39c; padding: 78px 35px 40px 35px; box-sizing: border-box; box-shadow: 2px 2px 4px rgba(0,0,0,.3); position: relative; }
.mypage_w .inner ul:hover { box-shadow: none; background: #e8f7ff;  }

.mypage_w .inner ul li { font-size: 1rem; display: inline-block; margin-right: 50px; vertical-align: top; }
.mypage_w .inner ul li:first-child { display: block; margin-right: 0!important; position: absolute; top: 0; left: 0; width: 100%!important; padding: 0!important; }
.mypage_w .inner ul li:last-child { margin-right: 0; }


.mypage_w .inner ul li .level_img { width: 70px; text-align: center; margin: 0 auto; }
.mypage_w .inner ul li .level_img img { display: inline-block; }

.mypage_w .inner ul li .tt { display: inline-block; font-size: 1.063em; padding: 25px 30px; position: relative; }
.mypage_w .inner ul li .tt img { position: relative; z-index: 1; }
.mypage_w .inner ul li .tt.edit { display: block; text-align: center!important; }
.mypage_w .inner ul li .tt.edit img { display: inline-block; }
/* .mypage_w .inner ul li .tt:before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 45px; transform: translate(0, -50%); background: #000; z-index: 0; transition: .3s; } */
.mypage_w .inner ul li .st { display: inline-block; vertical-align: top; float: right; font-size: .813em; color: #00a1ff; padding: 8px 20px; border: 1px solid #00deff; background: #FFF; margin: 15px 13px; border-radius: 7px; }
.mypage_w .inner ul li .st.edit { float: none; margin-top: -17px; margin-bottom: 25px; }
.mypage_w .inner ul li .st .phone { display: none; }
.mypage_w .inner ul li .th { font-size: .813em; color: #777; text-align: center; }
.mypage_w .inner ul li .td { font-weight: 600; color: #333; font-size: 1.125em; margin-top: 10px; text-align: center; }
.mypage_w .inner ul li .td span { margin-top: 10px; font-size: .875em; min-height: 40px; height: 40px; line-height: 20px; word-break: break-all; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.mypage_w .inner.item_m ul li .btn { width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background: #EEE; color: #898989; text-align: center; font-size: .875em; vertical-align: top; box-sizing: border-box; border: 1px solid #CCC; margin: 7px auto 0 auto; transition: .3s; }
.mypage_w .inner.item_m ul li .btn .xi { margin-top: -6px; transition: .3s; }
.mypage_w .inner ul li a:hover .btn { background: #295cf5; }
.mypage_w .inner ul li a:hover .btn .xi { transform: rotate(180deg); color: #FFF; }

.mypage_w .inner.music_m ul li { display: block; font-size: 0; margin-bottom: 3px !important; } /* margin-bottom important jk custom */
.mypage_w .inner.music_m ul li > div { font-size: 1rem; display: inline-block; vertical-align: middle; }
.mypage_w .inner.music_m ul li:first-child > div { max-width: 100%; }

.mypage_w .inner.music_m ul li .num { padding-right: 5px; margin-right: 10px; font-size: 1.125rem; font-weight: 600; font-style: italic; color: #34a2ff; }
.mypage_w .inner.music_m ul li .img { width: 60px; height: 60px; border: 1px solid #CCC; background: #000; box-sizing: border-box; margin-right: 15px; overflow: hidden; }
.mypage_w .inner.music_m ul li .t1 { max-width: 147px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mypage_w .inner.music_m ul li .t2 { display: block; color: #AAA; margin-top: 3px; font-size: .813rem; }
.mypage_w .inner.music_m ul li { margin-right: 0; }

#my_favorite_song ul li .t1 { width: 147px; text-align: left; }

.mypage_w .inner.contents_m ul li { margin-bottom: 32px; }
.mypage_w .inner.contents_m ul li .t3 { min-width: 62px; font-size: .813rem; color: #777; margin-right: 20px; }
.mypage_w .inner.contents_m ul li .t4 { position: relative; width: 80px; height: 55px; overflow: hidden; }
.mypage_w .inner.contents_m ul li .t4 .lt { font-size: 1.375em; font-weight: 600; position: absolute; left: 0; top: 4px; }
.mypage_w .inner.contents_m ul li .t4 .rb { font-size: .938em; font-weight: 400; color: #999; position: absolute; right: 4px; bottom: 4px; }
.mypage_w .inner.contents_m ul li .t4 .line { width: 200px; height: 1px; transform: rotate(-45deg); background: #CCC; position: absolute; left: -28px; top: 0; }
.mypage_w .inner.contents_m ul li .t5 { margin-left: 35px; font-weight: 600; font-size: 1.125rem; font-style: italic; padding-right: 3px; }
.mypage_w .inner.like_m ul li .t5 { margin-left: 10px; padding-right: 3px; } /* jk custom */
.mypage_w .inner.contents_m ul li .t5.high { color: #0068ff; }
.mypage_w .inner.contents_m ul li .t5.mid { color: #00a842; }
.mypage_w .inner.contents_m ul li .t5.low { color: #e80000; }

.mypage_w .over_w { font-size: 0; }
.mypage_w .over_w > div { display: inline-block; width: 33.3333333%; vertical-align: top; }
.mypage_w .over_w > div > ul { min-height: 565px; max-height: 565px; overflow-y: scroll; padding: 78px 25px 40px 25px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
.mypage_w .over_w > div > ul::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
.mypage_w .over_w > div:not(:last-child) > ul { margin-right: 25px; }
.mypage_w .inner.like_m .space { position: relative; }
.mypage_w .inner.like_m .space .bar { display: inline-block; height: 20px; background: #EEE; border: 1px solid #DDD; vertical-align: middle; margin-right: 4px; }
.mypage_w .inner.like_m .space .txt { display: inline-block; vertical-align: middle; font-weight: 600; }

.mypage_w .inner.like_m ul li .t2 { letter-spacing: 1.1px; color: #333; }

.mypage_w .contents_m ul li { margin-right: 0; }

.mypage_w .account_m { width: 100%; height: 160px; border: 3px solid #003abd; box-sizing: border-box; background: linear-gradient(to right, #013dcc 0%, #6232b9 33%, #9e2a98 66%, #502747 100%); margin-bottom: 25px; box-shadow: 2px 2px 4px rgba(0,0,0,.3); position: relative; overflow: hidden; }
.mypage_w .account_m .wrap_bg { position: absolute; top: 13px; left: 0; }
.mypage_w .account_m .left { position: absolute; bottom: 0; left: 0; height: 95px; border-radius: 0 92px 92px 0; background: linear-gradient(to bottom, #11dcfb 0%, #a111cf 100%); overflow: hidden; padding: 12px 30px 0 9px; box-sizing: border-box; }
.mypage_w .account_m .left .inner { position: relative; width: 100%; height: 100%; }
.mypage_w .account_m .left .inner .bg { position: absolute; bottom: 12px; left: -24px; width: 1199px; }
.mypage_w .account_m .left .inner .tt { display: inline-block; vertical-align: bottom; padding-bottom: 2px; }
.mypage_w .account_m .left .inner .rank_count { display: inline-block; vertical-align: bottom; margin-right: 13px; margin-left: 35px; }
.mypage_w .account_m .left .inner .rank_count img { display: inline-block; }
.mypage_w .account_m .left .inner .top_rating { position: absolute; top: 1px; left: -9px; font-size: .875em; color: #e1f4ff; letter-spacing: 0; width: 84px; text-align: center; padding: 5px; background: rgba(0,0,0,.3); }
.mypage_w .account_m .left .inner .top_rating span { vertical-align: baseline; }
.mypage_w .account_m .left .inner .rating_score { display: inline-block; vertical-align: bottom; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 1.438em; font-weight: 600; color: #dbff98; text-shadow: -2px -2px 1px #1512d5, 2px -2px 1px #4fa562, -1px 1px 1px #4fa562, 1px 1px 1px #ffab2d; letter-spacing: 0; padding-bottom: 4px; }
.mypage_w .account_m .center { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); text-align: center; }

.mypage_w .account_m .center .inner .top { margin-top: 13px; }
.mypage_w .account_m .center .inner .id { display: inline-block; vertical-align: bottom; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 2.5em; color: #FFF; font-weight: 600; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.mypage_w .account_m .center .inner .code { display: inline-block; vertical-align: bottom; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 1.25em; color: #e2e2e2; font-weight: 600; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; padding-bottom: 7px; margin-left: 5px; }

.mypage_w .account_m .center .inner .mid { margin-top: 8px; }
.mypage_w .account_m .center .inner .mid > div { display: inline-block; position: relative; padding: 7px 17px 7px 36px; background: rgba(0,0,0,.5); color: #FFF; font-size: .938em; border-radius: 32px; letter-spacing: 0.5px; }
.mypage_w .account_m .center .inner .mid > div:first-child { margin-right: 25px; }
.mypage_w .account_m .center .inner .mid > div .img { position: absolute; top: 50%; left: -15px; transform: translate(0, -50%); }

.mypage_w .account_m .center .inner .btm { display: inline-block; padding: 11px 55px; background: rgba(0,0,0,.3); margin-top: 12px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; color: #fffc01; letter-spacing: 0.5px; }

/* .mypage_w .account_m .right { position: absolute; top: 0; right: 0; } */
.mypage_w .account_m .right { position: absolute; top: 10px; right: 0; width: 196px; text-align: center; }
.mypage_w .account_m .right img { display: inline-block; }
.mypage_w .account_m .right.c0 { top: auto; bottom: 0; right: 20px; width: 112px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200001 { top: auto; bottom: 0; }
.mypage_w .account_m .right.c200003 { top: auto; bottom: 0; }
.mypage_w .account_m .right.c200005 { top: auto; bottom: 0; }
.mypage_w .account_m .right.c200007 { top: auto; bottom: 0; }
.mypage_w .account_m .right.c200009 { top: auto; bottom: 0; }
.mypage_w .account_m .right.c200011 { top: auto; bottom: 0; }
.mypage_w .account_m .right.c200013 { top: auto; bottom: 0; right: 15px; width: 150px; }
.mypage_w .account_m .right.c200015 { top: auto; bottom: 0; right: 28px; width: 150px; }
.mypage_w .account_m .right.c200017 { top: auto; bottom: 0; width: 150px; }
.mypage_w .account_m .right.c200019 { top: auto; bottom: -5px; right: 26px; width: 150px; }
.mypage_w .account_m .right.c200021 { top: auto; bottom: 0; right: 20px; width: 112px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200022 { top: auto; bottom: 0; right: 20px; width: 112px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200023 { top: auto; bottom: 0; right: 50px; width: 122px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200025 { top: auto; bottom: -3px; right: 32px; width: 122px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200026 { top: auto; bottom: 0; right: 50px; width: 112px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200027 { top: auto; bottom: -7px; right: 46px; width: 110px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200028 { top: auto; bottom: -3px; right: 32px; width: 137px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200029 { top: auto; bottom: -3px; right: 32px; width: 118px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200030 { top: auto; bottom: -3px; right: 32px; width: 143px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200031 { top: auto; bottom: -3px; right: 44px; width: 110px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200032 { top: auto; bottom: -3px; right: 32px; width: 121px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200033 { top: auto; bottom: -3px; right: 42px; width: 117px; padding: 4px; box-sizing: border-box; }


.mypage_w .account_m .right.c200002 { top: -7px; width: 253px; }
.mypage_w .account_m .right.c200008 { width: 259px; }
.mypage_w .account_m .right.c200010 { width: 284px; right: -41px; }
.mypage_w .account_m .right.c200012 { width: 350px; top: 5px; right: -20px; }
.mypage_w .account_m .right.c200014 { width: 352px; top: 5px; right: -62px; }
.mypage_w .account_m .right.c200016 { width: 380px; right: -150px; }
.mypage_w .account_m .right.c200018 { width: 346px; top: -4px; right: -38px; }
.mypage_w .account_m .right.c200020 { width: 325px; top: 2px; right: -81px; }
.mypage_w .account_m .right.c200024 { width: 230px; top: 0px; right: 12px; }



.mypage_w .visit_m ul li .tt { text-align: left; }
.mypage_w .visit_m ul li { margin-right: 0; text-align: center; }
.mypage_w .visit_m ul li .img { width: 100px; height: 100px; border-radius: 50%; display: inline-block; position: relative; background: #FFF; }
.mypage_w .visit_m ul li .img .bg { position: absolute; top: -36px; left: -34px; width: 160px; }
.mypage_w .visit_m ul li .txt { margin-top: 25px; }
.mypage_w .visit_m ul li .txt .area { font-style: italic; margin-left: 3px; font-weight: 600; color: #666; }
.mypage_w .visit_m ul li .btn { font-size: .813em; display: inline-block; padding: 8px 35px; border: 1px solid #CCC; border-radius: 33px; color: #666; transition: .3s; }
.mypage_w .visit_m ul li .btn:hover { }
.mypage_w .visit_m ul li:not(first-child) { width: 33.333333%; }


.mypage_w .visit_m ul li.top { width: 340px; height: 512px; }
.mypage_w .visit_m ul li.top .inner { width: 100%; height: 100%; position: relative; background: url('/theme/cc/images/acade_bg.png') no-repeat 50% 50%; margin-top: 0; }
.mypage_w .visit_m ul li.top .inner .img { position: absolute; top: 147px; left: 109px; width: 132px; height: 132px; }
.mypage_w .visit_m ul li.top .inner .txt { position: absolute; top: 392px; left: 50%; transform: translate(-50%, 0); width: 100%; font-size: 1.063em; color: #FFF; letter-spacing: 0; margin-top: 0; }
.mypage_w .visit_m ul li.top .inner .txt .area { color: #f3f3f3; }
.mypage_w .visit_m ul li.top .inner .btn { position: absolute; top: 434px; left: 50%; transform: translate(-50%, 0); color: #ffe7e2; border: 1px solid #ffe7e2; margin-top: 0; transition: .3s; }
.mypage_w .visit_m ul li.top .inner .btn:hover { background: #ffe7e2; color: #ff592a; }

.mypage_w .visit_m ul li.etc { width: calc(100% - 340px); margin-top: 25px; }
.mypage_w .visit_m ul li.etc .inner { padding-left: 66px; padding-right: 30px; max-height: 476px; overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
.mypage_w .visit_m ul li.etc .inner::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
.mypage_w .visit_m ul li.etc .inner table tr:first-child { background: #c0e6ff; }
.mypage_w .visit_m ul li.etc .inner table th { color: #4781ff; font-size: 1.063em; font-weight: 600; /* padding: 16px 10px; */ }
.mypage_w .visit_m ul li.etc .inner table td { /* padding: 16px 10px; */ }
.mypage_w .visit_m ul li.etc .inner table tr { transition: .3s; }
.mypage_w .visit_m ul li.etc .inner table tr:not(:first-child):hover { background: #FFF; }

.mypage_w .data_m ul { padding-top: 0; }
.mypage_w .data_m ul li { margin-right: 0; text-align: center; }
.mypage_w .data_m ul li:first-child { position: static; }
.mypage_w .data_m ul li:nth-child(n+7) { margin-bottom: 0; }
/* .mypage_w .data_m ul li:not(first-child) { width: 20%; } */
.mypage_w .data_m ul li .tt { text-align: left; }
.mypage_w .data_m ul li .img { width: 82px; display: inline-block; border: 1px solid #CCC; }

.mypage_w .data_m ul li .t1 { margin-top: 8px; }
.mypage_w .data_m ul li .t2 { display: block; margin-top: 3px; color: #AAA; font-size: .813em; }

.mypage_w .data_m ul li table { width: 94%; margin: 0 auto; }
.mypage_w .data_m ul li table tr { transition: .3s; }
.mypage_w .data_m ul li table tr:first-child { background: #c0e6ff; }
.mypage_w .data_m ul li table tr:not(:first-child):hover { background: #FFF; }
.mypage_w .data_m ul li table th { font-weight: 600; font-size: 1.063em; color: #4781ff; }
.mypage_w .data_m ul li table th,
.mypage_w .data_m ul li table td { text-align: center; }
.mypage_w .data_m ul li table td .num { font-size: 1.5em; color: #b74dd9; font-style: italic; font-weight: 600; }
.mypage_w .data_m ul li table td .song { width: 70px; border-radius: 8px; overflow: hidden; margin: 0 auto; border: 1px solid #CCC; box-sizing: border-box; }
.mypage_w .data_m ul li table td .tbl_tt { display: inline-block; margin-top: 5px; color: #121212; font-size: .938em; }
.mypage_w .data_m ul li table td .tbl_st { display: inline-block; margin-left: 3px; color: #999; font-size: .875em; }
.mypage_w .data_m ul li table td .level { width: 65px; margin: 0 auto; }
.mypage_w .data_m ul li table td .level.c1000 img { max-width: 76px; }
.mypage_w .data_m ul li table td .level.c7000 img { max-width: 72px; }
.mypage_w .data_m ul li table td .level.c10000 img { max-width: 92px; margin-left: -10px; }
.mypage_w .data_m ul li table td .level.c15000 {width: 90px;}
.mypage_w .data_m ul li table td .score { width: 68px; margin: 0 auto; }


.mypage_w .inner.item_m .item_img { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.7); background: #FFF; margin: 0 auto; }

.mypage_w .inner.best_m ul li { width: 200px; margin-bottom: 25px; }
.mypage_w .inner.best_m ul li:last-child { margin-bottom: 0; }

.mypage_w .inner.play_m ul li { }

.mypage_w .inner.play_m ul li .td { font-size: 1.625em; font-family: 'M PLUS Rounded 1c', sans-serif; }
.mypage_w .inner.best_m ul li .td { font-size: 1.625em; font-family: 'M PLUS Rounded 1c', sans-serif; }

.mypage_w .inner.item_m ul li,
.mypage_w .inner.play_m ul li,
.mypage_w .inner.best_m ul li { margin-right: 74px; }

.m_select { text-align: right; width: 1200px; margin: 0 auto; max-width: 96%; }
.m_select .inner { display: inline-block; border: 2px solid #5ae5fb; padding: 8px 16px 8px 20px; background: linear-gradient(to right, #275fff 0%, #502747 100%); margin-bottom: 7px; font-size: .938em; }
.m_select .inner .select_tit { display: inline-block; vertical-align: middle; color: #b6f9ff; margin-right: 15px; letter-spacing: 0; }
.m_select .inner select { padding: 0 40px 0 18px; vertical-align: middle; line-height: normal; }


/*location*/
.location_doc { margin-top: 80px; }
.location_doc .label_w .inner { margin-right: 0; }
.location_doc .label_w .inner .mr_edit { margin-right: 40px; }
.location_doc .label_w .inner .mr_edit:nth-child(3) { margin-left: 10px; margin-right: 40px; }
.location_doc .label_w .inner input { padding: 0 12px; }

.location_doc .location { margin-top: 30px; }
.location_doc .location > .inner { width: 1200px; margin: 0 auto; font-size: 0; }
.location_doc .location > .inner .left { display: inline-block; width: 50%; padding-right: 1.5%; box-sizing: border-box; font-size: 1rem; vertical-align: top; }
.location_doc .location > .inner .left .map { background: #000; height: 582px; border: 3px solid #e420e4; box-sizing: border-box; }
.location_doc .location > .inner .right { display: inline-block; width: 50%; padding-right: 1.5%; box-sizing: border-box; font-size: 1rem; vertical-align: top; }
.location_doc .location > .inner .right .list { background: #e6f8ff; height: 582px; border: 3px solid #208ae4; box-sizing: border-box; overflow-y: scroll; }
.location_doc .location > .inner .right .list table td { text-align: center; }
.location_doc .location > .inner .right .list table tr:first-child { background: #208ae4;}
.location_doc .location > .inner .right .list table tr { transition: .3s; }
.location_doc .location > .inner .right .list table tr:not(:first-child) { cursor: pointer; }
.location_doc .location > .inner .right .list table tr:not(:first-child):hover { background: #FFF; }
.location_doc .location > .inner .right .list table th { color: #FFF; }


/*mypage modal*/
.blocker { z-index: 999!important; }

.m_modal { border: 3px solid #6c8bff; background: #eefbff!important; max-width: 800px!important; padding: 0!important; }
.m_modal .inner { padding: 0 20px; max-height: 650px; overflow-y: scroll; }
.m_modal .inner table th { font-weight: 600; font-size: 1.063em; color: #4781ff; }
.m_modal .inner table th,
.m_modal .inner table td { text-align: center; }
.m_modal .inner table td .num { font-size: 1.5em; color: #b74dd9; font-style: italic; font-weight: 600; }
.m_modal .inner table td .song { width: 70px; border-radius: 8px; overflow: hidden; margin: 0 auto; border: 1px solid #CCC; box-sizing: border-box; }
.m_modal .inner table td .tt { display: block; color: #121212; font-size: 1em; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.m_modal .inner table td .st { display: block; margin-top: 6px; color: #999; font-size: .875em; }
.m_modal .inner table td .level { width: 65px; margin: 0 auto; }
.m_modal .inner table td .score { width: 68px; margin: 0 auto; }

.item_modal .item_tit { font-size: 1.063em; text-align: center; padding: 25px 30px; }
.item_modal .inner { padding-bottom: 40px; }
.item_modal ul { overflow: hidden; margin-top: 20px; }
.item_modal ul li { float: left; width: 20%; text-align: center; }
.item_modal ul li a { display: inline-block; width: 90px; margin-bottom: 35px; }
.item_modal ul li a .item_img { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.7); background: #FFF; }
.item_modal ul li a .item_name { margin-top: 7px; font-size: .875em; color: #666; /* min-height: 34px; height: 34px; line-height: 17px; word-break: break-all; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 17px; height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.2em; height: 3.6em}


.note_modal { max-width: 670px!important; }
.note_modal .inner { padding: 0; max-height: 680px; }

.cha_modal { max-width: 480px!important; }
.cha_modal a.close-modal { z-index: 10; }

.cha_modal .cha_img { position: absolute; top: 50%; left: 50px; transform: translate(-100%, -50%); z-index: 3; }

.cha_modal .inner { position: relative; padding: 0; max-height: 600px; background: #eefbff; z-index: 2; }

.cha_modal .inner .cha_info { padding: 30px 20px; background: linear-gradient(to right, #45fbf1 0%, #b7f864 50%, #fef601 100%); text-align: center; position: relative; overflow: hidden; }
.cha_modal .inner .cha_info .info_bg { position: absolute; top: -56px; left: -26px; width: 471px; opacity: .65; }
.cha_modal .inner .cha_info .sec { font-size: 1.125em; font-weight: 700; }
.cha_modal .inner .cha_info .sec:not(:last-child) { margin-bottom: 9px; }
.cha_modal .inner .cha_info .sec .th { display: inline-block; color: #4789ff; font-style: italic; margin-right: 10px; vertical-align: middle; }
.cha_modal .inner .cha_info .sec .td { display: inline-block; color: #001cd7; vertical-align: middle; }
.cha_modal .inner .song_list { padding: 0; }
.cha_modal .inner .song_list table th { background: #4781ff; color: #FFF; }
.cha_modal .inner .song_list table th,
.cha_modal .inner .song_list table td { padding: 15px 10px; }
.cha_modal .bg { position: absolute; top: 50%; right: 0; width: 600px; transform: translate(50%, -50%); z-index: 1; }

.cha_modal .inner .song_list table tr { transition: .3s; }
.cha_modal .inner .song_list table tr:hover { background: #FFF; }
/* .cha_modal .inner .song_list table tr:not(:first-child):hover { background: #FFF; } */

.cha_modal .cha_img.c1000 { width: 392px; }
.cha_modal .cha_img.c2000 { width: 223px; }
.cha_modal .cha_img.c3000 { width: 244px; }
.cha_modal .cha_img.c4000 { width: 387px; }
.cha_modal .cha_img.c5000 { width: 389px; }
.cha_modal .cha_img.c6000 { width: 491px; left: 70px; }
.cha_modal .cha_img.c7000 { width: 470px; }
.cha_modal .cha_img.c8000 { width: 532px; }
.cha_modal .cha_img.c9000 { width: 500px; left: 80px; }

.cha_modal .cha_img.c10000 { width: 491px; left: 75px; }
.cha_modal .cha_img.c13000 { width: 422px; left: 40px; margin-top: -60px; }



.am_cate { position: absolute; left: -156px; top: 125px; font-size: 1.313em; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; z-index: 1; cursor: pointer; opacity: .8; }
.am_cate:hover { opacity: 1; }
.am_cate.on { opacity: 1; z-index: 2; }
.am_cate .cate_in { transform: rotate(-90deg); border-radius: 10px 10px 0 0; width: 250px; height: 60px; line-height: 60px; text-align: center; box-sizing: border-box; border: 3px solid #2ae8a7; background: linear-gradient(to right, #45fbf1 0%, #b7f864 50%, #fef601 100%); box-shadow: 0 -2px 8px rgb(0 0 0 / 40%); }


.my_cate { position: absolute; left: -156px; top: 350px; font-size: 1.313em; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; color: #FFF; z-index: 1; cursor: pointer; opacity: .8; }
.my_cate:hover { opacity: 1; }
.my_cate.on { opacity: 1; z-index: 2; }
.my_cate .cate_in { transform: rotate(-90deg); border-radius: 10px 10px 0 0; width: 250px; height: 60px; line-height: 60px; text-align: center; box-sizing: border-box; border: 3px solid #2ae8a7; background: linear-gradient(to right, #58008b 0%, #411cb2 50%, #1dc6d7 100%); box-shadow: 0 -2px 8px rgb(0 0 0 / 40%); }
#contents .des_w .card_des.my_des .am_none { color: #325dff; }

/*게시판 노데이터*/
.empty_table { font-size: 1.5em; font-weight: 600; padding: 38px 0; color: #d32cdd; }

.block_1024 { display: none; }
.block_768 { display: none; }
.block_680 { display: none; }
.block_600 { display: none; }







/*qr login*/
.login_w.qr_login { padding: 25px 70px 40px 70px; }
.login_w.qr_login .sns_st { font-size: .750em; line-height: 1.5; margin-top: 5px; color: #ff0202; word-break: break-all; padding: 0 20px; }
.login_w.qr_login .sns_w { background: linear-gradient(to right, #1031ba 0%, #922399 100%); padding: 4px; }
.login_w.qr_login .sns_w .tt { margin: 16px 0 20px 0; font-weight: 600; color: #FFF; font-size: 1.063em; }
.login_w.qr_login #sns_login_side { background: #FFF; padding: 15px 40px!important; }
.login_w.qr_login .input_w { margin-top: 0; }
.login_w.qr_login .or { font-size: 2em; font-weight: 700; color: #bbb; margin: 26px 0; }
.login_w.qr_login .title { font-weight: 600; margin-bottom: 8px; color: #0485ff; font-size: 1.063em; }
.login_w.qr_login .join a { color: #309aff; border-color: #309aff; }
.login_w.qr_login .st { word-break: break-all; background: linear-gradient( to bottom, rgb(58 137 255) 0%, rgb(58 85 255) 50%, rgb(255 39 214) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 700;
    font-size: 1.125em;
    line-height: 1.4;
}
.login_w.qr_login > table tr.border_tr { cursor: pointer; border-top: 1px solid #3a74ff;  border-bottom: 1px solid #d730de; background: #FFF; }
.login_w.qr_login > table tr td { padding-top: 15px; padding-bottom: 15px; }
.login_w.qr_login > table tr.space { }
.login_w.qr_login .btn { display: inline-block; width: 178px; padding: 10px 0; border: 1px solid #999; color: #999; transition: .3s; }
.login_w.qr_login .btn:hover { color: #666; border-color: #666; }
.login_w.qr_login .btn_w.first { margin-top: 38px; margin-bottom: 10px; }
.login_w.qr_login .btn_w.first a { border-color: #3a6dff; color: #3a6dff; }
.login_w.qr_login .btn_w.last a { border-color: #cb33e1; color: #cb33e1; }


/* faq */
.faq_area li dl dt { position: relative; }
.faq_area li dl dt a { margin-right: 0!important; }
.faq_area li dl dt a .w_no { display: none; }
.faq_area li dl dt .btn_st { position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); background: #FFF; z-index: 1; }

/* faq */
.faq_area { border-top:2px solid #333; }
.faq_area li dl { border-bottom:1px solid #d5d5d5; }
.faq_area li dl dt a { display:block; padding: 15px 25px; position:relative; }
.faq_area li dl dt a:after { content:""; position:absolute; right:30px; top:50%; width:11px; height:7px; margin-top:-3px; background:url(../images/sub/icon_qna_arrow.png) no-repeat 0 0; background-size:auto 12px; }
.faq_area li dl dt a span.q_icon { font-size:1.250em; font-family:"LatoWebMedium", sans-serif; color:#d236ff; display:inline-block; margin-right:35px; vertical-align:middle; }
.faq_area li dl dt a span.txt { font-size:0.938em; vertical-align:middle; color:#555; }
.faq_area li dl dd { display:none; padding:20px 20px 20px 27px; background-color:#f7f7f7; }
.faq_area li dl dd span.a_icon { font-size:1.250em; font-family:"LatoWebMedium", sans-serif; color:#e00001; display:inline-block; margin-right:38px; vertical-align:top; }
.faq_area li dl dd span.txt { display:inline-block; font-size:0.938em; color:#222; line-height:1.5; vertical-align:middle; width:90%; }

.faq_area li dl.open dt a { background-color:#aaa; }
.faq_area li dl.open dt a:after { background-position:0 -6px; }
.faq_area li dl.open dt a .q_icon { color:#fff; }
.faq_area li dl.open dt a span.txt { color:#fff; }

/*rounge*/
.rounge { text-align: center; }

/*top_img*/
.top_img { position: relative; }
.top_img .top_logo { position: absolute; bottom: -141.5px; left: 50%; transform: translate(-50%, 0); width: 550px; max-width: 75%; }
.top_line { width: 100%; height: 5px; background: #7500b0; margin-bottom: 130px; }

.title_w { width: 1000px; max-width: 96%; background: linear-gradient(to right, transparent 0%, #000 50%, transparent 100%); margin: 0 auto 20px auto; }
.title_w .title { background: linear-gradient(to right, #45fbf1 0%, #b7f864 50%, #fef601 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-weight: 800; font-size: 1.875rem; font-family: 'M PLUS Rounded 1c', sans-serif; padding: 24px 0; }

.mid_video { max-width: 96%; width: 1000px; margin: 0 auto; border: 5px solid #2722ae; box-sizing: border-box; box-shadow: 0 1px 13px 5px rgba(0,0,0,.4); overflow: hidden; position: relative; }
.mid_video video { width: 100%; }

.mid_img { border: 1px solid #CCC; line-height: 200px!important; height: 200px; text-align: center; background: #EEE; }


/*obt_text*/
.obt_text { max-width: 96%; width: 1000px; box-shadow: 0 1px 6px 3px rgba(0,0,0,.4); margin: 60px auto 0 auto; }
.obt_text a { text-decoration: underline!important; color: #0a00e1!important; vertical-align: baseline!important; }
.obt_text.bb_none .st_w { border-bottom: none; }
.obt_text * { word-break: break-all; }

.obt_text > .tt { background: linear-gradient(to right, #9b2eba 0%, #5461ff 100%); padding: 20px 30px; color: #FFF; text-align: left; word-break: break-all; margin: 0 auto; box-sizing: border-box; font-weight: 700; font-size: 1.313rem; font-family: 'M PLUS Rounded 1c', sans-serif; }
.obt_text > .st_w { border: 2px solid #9a2eba; margin: 0 0 35px 0; padding: 25px 30px 35px 30px; line-height: 1.6; text-align: left; word-break: break-all; margin: 0 auto; box-sizing: border-box; background: rgba(255,255,255,.92); transition: .5s; }
.obt_text > .st_w:hover { background: #FFF; }
.obt_text > .st_w > div { font-size: 1.063rem; font-weight: 600; color: #333; margin-top: 25px; line-height: 1.5; }
.obt_text > .st_w > div.first { margin-top: 0; }
.obt_text > .st_w > p { font-size: 1rem; color: #666; line-height: 1.6; }
.obt_text > .st_w > p.red_st { font-size: .938rem; color: #f00; font-weight: 600; }
.obt_text > .st_w .fc { display: block; font-size: .938rem; color: #f00; font-weight: 600; }

.obt_text > .st_w > .cp_img { margin: 20px 0; position: relative; border: 1px solid #CCC; display: inline-block; }
.obt_text > .st_w > .cp_img > p { display: inline-block; vertical-align: middle; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.7); box-sizing: border-box; background: #fdf5ff; margin: 0 10px; transition: .3s; opacity: .5; cursor: pointer; }
.obt_text > .st_w > .cp_img > p:hover { opacity: 1; transform: rotate(360deg); }
.obt_text > .st_w > .cp_img > p:first-child { position: relative; z-index: 9; opacity: 1; }
.obt_text > .st_w > .cp_img > p:nth-child(2) { position: relative; z-index: 5; }
.obt_text > .st_w > .cp_img > p:nth-child(3) { position: relative; z-index: 4; }
.obt_text > .st_w > .cp_img > p:nth-child(4) { position: relative; z-index: 3; }
.obt_text > .st_w > .cp_img > p:nth-child(5) { position: relative; z-index: 2; }


.rounge .obt_text > .st_w > div { margin-top: 18px; }
.rounge .obt_text > .st_w > div.first { margin-top: 0; }

.rounge .obt_text .wh_tbl { margin-top: 7px; }
.rounge .obt_text > .st_w > p { margin-bottom: 8px; }
.rounge .obt_text > .st_w .fc { font-size: .875rem; font-weight: 500; }
.rounge .obt_text > .tt { padding: 15px 25px; }
.rounge .obt_text > .st_w > div { font-size: 1rem; }

.wh_tbl {
    width: 100%;
    border-top: 1px solid #DDD;
    border-right: 1px solid #DDD;
    font-size: 1em;
    font-family: notoS;
}

.wh_tbl th {
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    background: #f1f1f1;
    padding: 8px 11px;
    color: #111;
    text-align: center;
    font-weight: 600;
}

.wh_tbl td {
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    padding: 12px 15px;
    color: #333;
}

.faq_area li dl dt a .w_no { display: inline-block; }
.admin_checkbox .check_w { top: 50%; transform: translate(0, -50%); left: 10px; }



/*obt 게시글*/
.obt_text2 { text-align: center; }
.obt_text2 a { text-decoration: underline!important; color: #0a00e1!important; vertical-align: baseline!important; }
.obt_text2 img { display: inline-block; }
.obt_text2 * { word-break: break-all; }
.obt_text2 > h1 {
    background: linear-gradient( to bottom, rgb(58 137 255) 0%, rgb(58 85 255) 50%, rgb(255 39 214) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 900;
    font-size: 1.313em;
    word-break: break-all;
}
.obt_text2 span { vertical-align: baseline; }
.obt_text2 > h2 { background: linear-gradient(to right, #9b2eba 0%, #5461ff 100%); padding: 10px 20px; color: #FFF; text-align: left; word-break: break-all; font-weight: 600; }
.obt_text2 > h3 { line-height: 1.5; margin: 25px 25px 20px 25px; position: relative; }
.obt_text2 > h3:before { content: ""; width: 4px; height: 14px; background: #250094; position: absolute; top: 5px; left: -20px; transform: rotate(45deg); }
.obt_text2 > h3:after { content: ""; width: 4px; height: 14px; background: #00b8ff; position: absolute; top: 5px; left: -14px; transform: rotate(45deg); }
.obt_text2 > blockquote h3 { font-weight: 600; }
.obt_text2 > blockquote { border: 2px solid #9a2eba; margin: 0 0 35px 0; padding: 25px 30px 35px 30px; line-height: 1.6; text-align: left; word-break: break-all; }
/* .obt_text2 > blockquote img { border: 1px solid #CCC; margin-bottom: 10px; } */
.obt_text2 > .text_w { border: 2px solid #9a2eba; margin: 0 0 35px 0; padding: 25px 30px 35px 30px; line-height: 1.6; text-align: left; word-break: break-all; }
.obt_text2 > .text_w img { border: 1px solid #CCC; margin-top: 25px; }

/* track_rank add 220406*/
/*
.track_rank { width: 800px; }
.track_rank .inner .t_img { width: 140px; height: 140px; }
.track_rank .inner .t_info { height: 140px; }
.track_rank .inner .t_info .t1 { font-size: .938em; }
.track_rank .inner .t_info .t2 { font-size: 1.188em; }
.track_rank .inner .t_info .t3 { font-size: .875em; }
.track_rank .inner .t_info .t4 { font-size: .875em; }

.track_rank .inner .c_bg.natsuha { position: absolute; right: 200px; bottom: -282px; transition: .5s; opacity: .4; z-index: 2; }
.track_rank .inner .c_bg.aria { position: absolute; right: -30px; bottom: -341px; transition: .5s; opacity: .4; z-index: 2; }
.track_rank .inner .c_bg.c0 { width: 117px; right: 58px; bottom: -17px; }
.track_rank .inner .c_bg.c1000 { }
.track_rank .inner .c_bg.c2000 { width: inherit!important; bottom: -316px!important; }
.track_rank .inner .c_bg.c3000 { width: inherit!important; bottom: -322px!important; }
.track_rank .inner .c_bg.c4000 { width: inherit!important; bottom: -344px!important; }
.track_rank .inner .c_bg.c5000 { width: inherit!important; bottom: -392px!important; }
.track_rank .inner .c_bg.c6000 { width: inherit!important; bottom: -263px!important; }
.track_rank .inner .c_bg.c7000 { width: inherit!important; bottom: -311px!important; }
.track_rank .inner .c_bg.c8000 { width: inherit!important; bottom: -346px!important; }
.track_rank .inner .c_bg.c12000 { width: inherit!important; bottom: -334px!important; }
.track_rank:hover .inner .c_bg { opacity: 1; }

.track_rank .inner .t_level { width: 140px; height: 140px; }
.track_rank .inner .t_info { width: calc(100% - 178px); padding-right: 100px; }
.track_rank .inner .t_info .t_bg { width: calc(100% - 35px); left: calc(-100% + 40px); }
.track_rank .inner .t_level .inner .level_in:first-child { width: 90px; height: 90px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.track_rank .inner .t_level .inner .level_in img { overflow: hidden; border-radius: 15px; border: 3px solid #FFF; box-sizing: border-box; box-shadow: 0 1px 10px rgba(15,0,255,.6); }
.track_rank .num { float: left; text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 4em; font-weight: 600; color: #f9fb07; text-shadow: -2px -2px 1px #1269d5, 2px -2px 1px #84d396, -2px 2px 1px #84d396, 2px 2px 1px #ffc82d; }
 */

#contents .rank_w.track_rank .n_rank { position: relative; width: 1060px; max-width: 96%; height: 106px; margin: 0 auto; border: 3px solid #ffd988; box-sizing: border-box; padding: 5px; border-radius: 15px; background: #fff7e2; margin-bottom: 22px; }
#contents .rank_w.track_rank .n_rank .rank_count { position: absolute; top: -2px; right: -2px; width: 50px; text-align: center; border-radius: 26px; padding: 4px 0; letter-spacing: 1px; vertical-align: top; font-size: .875em; font-weight: 500; color: #FFF; background: #000; z-index: 3; }
#contents .rank_w.track_rank .n_rank .rank_trans { position: absolute; top: 50%; left: 157px; font-size: 1.125em; transform: translate(0, -50%); text-align: center; z-index: 2; }
#contents .rank_w.track_rank .n_rank .rank_trans .txt { font-size: .750em; font-weight: 600; }
#contents .rank_w.track_rank .n_rank .rank_trans .txt.up { color: #f00; margin-top: -5px; }
#contents .rank_w.track_rank .n_rank .rank_trans .txt.down { color: #002ac5; margin-bottom: -4px; }
#contents .rank_w.track_rank .n_rank .rank_trans .xi-caret-up { color: #f00; }
#contents .rank_w.track_rank .n_rank .rank_trans .xi-caret-down { color: #002ac5; }

#contents .rank_w.track_rank .n_rank:last-child { margin-bottom: 0; }

#contents .rank_w.track_rank .n_rank .rating { display: none; position: absolute; bottom: -8px; right: 1px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 3.5em; font-weight: 600; color: #6f88ff; text-shadow: -2px -2px 1px #1269d5, 2px -2px 1px #84d396, -2px 2px 1px #84d396, 2px 2px 1px #84d396; z-index: 1; opacity: .55; }
#contents .rank_w.track_rank .n_rank .new_icon { position: absolute; top: -22px; left: -38px; z-index: 1; transform: rotate(-30deg); }

#contents .rank_w.track_rank .n_rank .border_inner { width: 100%; height: 100%; padding: 3px; border-radius: 12px; background: linear-gradient(to right, #d98c00 0%, #ffbc00 100%); box-sizing: border-box; overflow: hidden; }

#contents .rank_w.track_rank .n_rank .inner { position: relative; width: 100%; height: 100%; border-radius: 8px; box-sizing: border-box; background: url('../images/tr_section_bg.png') no-repeat 50% 50%; overflow: hidden; }

#contents .rank_w.track_rank .n_rank.r1 { background: #fdffec; border: 3px solid #ffea88; }
#contents .rank_w.track_rank .n_rank.r1 .inner { background: url('../images/r_section_bg_1.png') no-repeat 50% 50%; }
#contents .rank_w.track_rank .n_rank.r1 .border_inner { background: linear-gradient(to right, #ffb100 0%, #ffeb00 100%); }
#contents .rank_w.track_rank .n_rank.r1 .inner .avatar .ava_inner .line { background: #ffbc00; border-bottom: 20px solid #fffe00; }

#contents .rank_w.track_rank .n_rank.r2 { background: #f1f7f7; border: 3px solid #c5f5ff; }
#contents .rank_w.track_rank .n_rank.r2 .inner { background: url('../images/r_section_bg_2.png') no-repeat 50% 50%; }
#contents .rank_w.track_rank .n_rank.r2 .border_inner { background: linear-gradient(to right, #94a6ff 0%, #d8e2e7 100%); }
#contents .rank_w.track_rank .n_rank.r2 .inner .avatar .ava_inner .line { background: #8196ff; border-bottom: 20px solid #e3e8ff; }

#contents .rank_w.track_rank .n_rank.r3 { background: #fff4f9; border: 3px solid #ffdbec; }
#contents .rank_w.track_rank .n_rank.r3 .inner { background: url('../images/r_section_bg_3.png') no-repeat 50% 50%; }
#contents .rank_w.track_rank .n_rank.r3 .border_inner { background: linear-gradient(to right, #ff7dbd 0%, #fdcce4 100%); }
#contents .rank_w.track_rank .n_rank.r3 .inner .avatar .ava_inner .line { background: #ff7ebd; border-bottom: 20px solid #fdcce4; }

#contents .rank_w.track_rank .n_rank .inner .num { position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); width: 160px; text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 4em; font-weight: 600; color: #f9fb07; text-shadow: -2px -2px 1px #1269d5, 2px -2px 1px #84d396, -2px 2px 1px #84d396, 2px 2px 1px #ffc82d; }
#contents .rank_w.track_rank .n_rank .inner .level { position: absolute; right: 96px; top: 50%; transform: translate(0, -50%); width: 68px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 2em; font-weight: 600; color: #cbff98; text-shadow: -2px -2px 1px #1512d5, 2px -2px 1px #4fa562, -1px 1px 1px #4fa562, 1px 1px 1px #ffab2d; letter-spacing: 0; text-align: center; }
#contents .rank_w.track_rank .n_rank .inner .level img { overflow: hidden; border-radius: 15px; border: 3px solid #FFF; box-sizing: border-box; box-shadow: 0 1px 5px rgba(15,0,255,.6); background: #FFF; }
#contents .rank_w.track_rank .n_rank .inner .level .tt { text-shadow: none; font-family: 'Noto sans JP'; color: #00a1ff; font-size: .438em; font-weight: 500; margin-bottom: 3px; }

#contents .rank_w.track_rank .n_rank .inner .sd { position: absolute; right: 86px; top: -7px; width: 91px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 2em; font-weight: 600; color: #cbff98; text-shadow: -2px -2px 1px #1512d5, 2px -2px 1px #4fa562, -1px 1px 1px #4fa562, 1px 1px 1px #ffab2d; letter-spacing: 0; text-align: center; }
#contents .rank_w.track_rank .n_rank .inner .sd.c0 { width: 72px; top: 3px; right: 94px; }
#contents .rank_w.track_rank .n_rank .inner .sd.c1000 { width: 104px; top: -5px; right: 74px; }
#contents .rank_w.track_rank .n_rank .inner .sd.c2000 { width: 91px; top: -7px; right: 84px; }
#contents .rank_w.track_rank .n_rank .inner .sd.c5000 { width: 86px; top: -5px; right: 89px; }
#contents .rank_w.track_rank .n_rank .inner .sd.c6000 { width: 99px; top: -7px; right: 80px; }
#contents .rank_w.track_rank .n_rank .inner .sd.c7000 { width: 100px; top: -3px; right: 79px; }
#contents .rank_w.track_rank .n_rank .inner .sd.c8000 { width: 95px; top: -4px; right: 91px; }
#contents .rank_w.track_rank .n_rank .inner .sd.c10000 { width: 129px; top: -7px; right: 63px; }
#contents .rank_w.track_rank .n_rank .inner .sd.c12000 { width: 104px; top: -6px; right: 76px; }
#contents .rank_w.track_rank .n_rank .inner .lang  { position: absolute; left: 341px; top: 50%; transform: translate(0, -50%); text-align: center; z-index: 2; }
#contents .rank_w.track_rank .n_rank .inner .lang .img { width: 74px; height: 74px; border-radius: 10px; border: 3px solid #FFF; overflow: hidden; background: #FFF; box-shadow: 0 1px 5px rgba(0,0,0,.5); }
#contents .rank_w.track_rank .n_rank .inner .lang .txt { color: #006ca9; margin-top: 4px; font-weight: 600; letter-spacing: 0; font-size: .938em; }

#contents .rank_w.track_rank .n_rank .inner .name { position : absolute; top: 50%; left: 460px; transform: translate(0, -50%); font-size: 1em; color: #2c30b0; font-weight: 600; font-family: 'M PLUS Rounded 1c', sans-serif; letter-spacing: -1px; }
#contents .rank_w.track_rank .n_rank .inner .name .t1 { font-size: .750em; font-family: 'Noto Sans JP'; color: #d13fe7; font-weight: 500; letter-spacing: 0; }
#contents .rank_w.track_rank .n_rank .inner .name .t2 { font-size: 1.438em; }
#contents .rank_w.track_rank .n_rank .inner .name .t3 { font-size: .813em; font-family: 'Noto Sans JP'; color: #888; font-weight: 400; letter-spacing: 0; margin-top: 3px; }
#contents .rank_w.track_rank .n_rank .inner .name .name_code { vertical-align: baseline; font-size: .813em; opacity: .88; letter-spacing: -1px; }

#contents .rank_w.track_rank .n_rank .inner .avatar { position: absolute; left: 100px; top: 0; width: 195px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner { position: relative; width: 130%; height: 100%; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner img { position: absolute; left: 0; top: -7px; z-index: 2; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c0 img { left: 87px; top: -28px; width: 180px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c1000 img { left: 57px; top: -37px; width: 215px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c2000 img { left: 59px; top: -49px; width: 227px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c3000 img { left: 36px; top: -46px; width: 242px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c4000 img { left: 46px; top: -51px; width: 240px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c5000 img { left: 50px; top: -49px; width: 234px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c6000 img { left: 68px; top: -28px; width: 195px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c7000 img { left: 60px; top: -47px; width: 225px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c8000 img { left: 57px; top: -44px; width: 223px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c9000 img { left: 44px; top: -46px; width: 236px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c10000 img { left: 68px; top: -28px; width: 196px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c11000 img { left: 54px; top: -48px; width: 230px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner.c12000 img { left: 55px; top: -48px; width: 230px; }
#contents .rank_w.track_rank .n_rank .inner .avatar .ava_inner .line { position: absolute; /* left: -20px; */ left: -46px; top: 0; display: inline-block; width: 200%; height: 20px; border-bottom: 20px solid #fff200; background: #ff7600; transform: rotate(145deg); z-index: 1; }



@media screen and (max-width: 768px){
    .qr_login { max-width: 94%; padding: 40px 7%!important; }
    .pattern_bg { width: 246vw; height: 200vh; margin-top: -55vh; margin-left: -64vw; }
    .color_bg  { display: none; }
    .color_bg .grad_bg { display: none; }
    .color_bg .white_bg { display: none; }
    .login_w.qr_login { background: rgba(255,255,255,0.97) }
}

/* jk 추가 2021-10-15 */
.jk-sns-box {
    display: flex !important;
}
.jk-sns-box > div {
    flex: 1 !important;
}
.jk-sns-box > div { margin-right: 3px!important; }
.jk-sns-box > div:last-child { margin-right: 0!important; }
/*
.jk-sns-box > div:nth-child(odd) {
    margin-right: 3px !important;
}
.jk-sns-box > div:nth-child(even) {
    margin-left: 3px !important;
}
*/
.jk-sns-box > div > a {
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    width: 100% !important;
    border-radius: 5px !important;
    /* text-align: left !important; */
}
.jk-sns-box > div > a > span {
    /* height: 1.5rem !important; */
    font-size: 0.75rem;
}
.jk-sns-box > div.line > a {
    background-color: #06C755 !important;
}
.jk-sns-box > div.twitter > a {
    background-color: #1D9BF0 !important;
}
/* jk 추가 끝 2021-10-15 */


.login_bg.doc { height: auto; }
.login_w.qr_login { position: static; transform: none; margin-bottom: 80px; }


.mypage_w .inner.item_m ul li { width: 16.666666666%; padding: 0 15px; box-sizing: border-box; margin-right: 0; }




/* event css 추가 2022-01-20 */
#event_modal { width: 700px; max-width: 100%!important; border: 4px solid #a64c09; box-sizing: border-box; background: linear-gradient(to bottom, #ffa100 0%, #ffef4f 100%)!important; padding: 8px!important; border-radius: 35px; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -o-box-shadow: 0 0 10px #000; -ms-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; min-height: 500px; text-align: center; }
#event_modal:before { content: ""; position: fixed; width: 100%; left: 100%; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; }
#event_modal img { display: inline-block; }
#event_modal .inner { padding: 10px 0 20px 0; background: rgba(255,255,255,.8); border-radius: 27px; overflow: hidden; position: relative; max-height: none; box-sizing: border-box; }

#event_modal .inner .line_w { text-align: center; padding-bottom: 18px; position: relative; z-index: 2; font-size: 0; }
#event_modal .inner .line_w .l_circle { display: inline-block; width: 7px; height: 7px; background: #0060ff; vertical-align: middle; transform: rotate(45deg); }
#event_modal .inner .line_w .l_line { display: inline-block; width: calc(50% - 65px);; height: 2px; background: #9000ff; vertical-align: middle; margin-left: 12px; }
#event_modal .inner .line_w .c_circle { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cc00ff; vertical-align: middle; margin: 0 15px; position: relative; }
#event_modal .inner .line_w .c_circle:before { content: ""; position: absolute; top: 8px; left: 8px; width: 10px; height: 10px; background: #cc00ff; transform: rotate(45deg); }
#event_modal .inner .line_w .r_line { display: inline-block; width: calc(50% - 65px);; height: 2px; background: #9000ff; vertical-align: middle; margin-right: 12px; }
#event_modal .inner .line_w .r_circle { display: inline-block; width: 7px; height: 7px; background: #0060ff; vertical-align: middle; transform: rotate(45deg); }

#event_modal .inner .l_cha_bg { position: absolute; top: 233px; left: -92px; opacity: 0.25; transition: .3s; }
#event_modal .inner .l_cha_bg.step3_bg { top: 120px; left: -84px; }
#event_modal .inner .r_cha_bg { position: absolute; top: 233px; right: -92px; opacity: 0.25; transition: .3s; }
#event_modal .inner .r_cha_bg.step3_bg { top: 130px; right: -80px; }

#event_modal .inner .event_img { position: relative; z-index: 1; }

#event_modal .inner .event_btn { position: relative; display: inline-block; width: 262px; height: 66px; border-radius: 66px; padding: 4px; box-sizing: border-box; color: #FFF; background: linear-gradient(to bottom, #1f2fb5, #d31e87); box-shadow: 0 0px 10px #f99fff; border: none; margin-top: 25px; transition: .3s; }
#event_modal .inner .event_btn .event_btn_in { width: 100%; height: 100%; border: 2px solid #FFF; border-radius: 42px; box-sizing: border-box;  font-size: .938em; letter-spacing: 0; vertical-align: top; line-height: 50px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 1.188em; font-weight: 700; }

#event_modal .inner .loading_w { width: 100%; height: 100%; position: relative; }
#event_modal .inner .loading_w .loading_in { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#event_modal .inner .loading_w .loading_in .xi {
    font-size: 4em;
    color: #00c3ff;
    background-image: -webkit-linear-gradient(22deg, #00c3ff, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 5s infinite linear, xi-spin 2s infinite linear;

}
#event_modal .inner .loading_w .loading_in .tt {
    margin-top: 15px;
    font-size: 1.313em;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    color: #00c3ff;
    background-image: -webkit-linear-gradient(22deg, #00c3ff, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 5s infinite linear;
}

@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
        filter: hue-rotate(-360deg);
    }
}
#event_modal .inner .event_info_tit { font-size: 1.438em; font-weight: 800; background: linear-gradient( to right, rgb(58 137 255) 0%, rgb(58 85 255) 50%, rgb(255 39 214) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;  margin: 5px auto 25px auto; line-height: 1.4; }

#event_modal .inner .event_list { position: relative; z-index: 1; }
#event_modal .inner .event_info { width: 360px; max-width: 90%; margin: 0 auto 15px auto; background: #FFF; border: 1px solid #DDD; box-sizing: border-box; box-shadow: 0 3px 5px rgba(0,0,0,.5); padding: 20px; border-radius: 15px; }
#event_modal .inner .event_info .info_img { width: 28%; margin: 0 auto; }
#event_modal .inner .event_info .info_t1 { font-size: 1.375em; font-weight: 700; font-family: 'M PLUS Rounded 1c', sans-serif; color: #222; margin-top: 7px; }
#event_modal .inner .event_info .info_t1 .st { color: #777; }
#event_modal .inner .event_info .info_t1 span { vertical-align: middle; display: inline-block; }

#event_modal .inner .event_info .info_fin { width: 80px; height: 80px; line-height: 80px; border: 2px solid #00b40e; border-radius: 50%; transform: rotate(-45deg); font-size: .938em; color: #00b40e; font-weight: 700; background: #f1fff2; margin: 15px auto 0 auto; box-shadow: 0 0 5px rgba(4,255,0,.85); }

#event_modal .inner .event_info .info_count { margin-top: 7px; font-weight: 700; color: #0059ff; }
#event_modal .inner .event_info .info_count .st { font-size: .938em; }
#event_modal .inner .event_info .info_count.no_apply { color: #ff0000; }

#event_modal .inner .event_notice_w { display: inline-block; width: 440px; max-width: 95%; padding: 15px 30px; background: #fff900; border: 1px solid #ff7600; box-shadow: 0 1px 3px rgba(0,0,0,.6); margin-top: 27px; border-radius: 7px; font-size: .813em; color: #f00; font-weight: 700; line-height: 1.6; word-break: break-all; }
#event_modal .inner .event_notice_w > * { word-break: break-all; }
#event_modal .inner .event_notice_w2 { display: inline-block; width: 440px; max-width: 95%; padding: 15px 30px; background: #000; border: 1px solid #EEE; box-shadow: 0 1px 3px rgba(0,0,0,.6); margin-top: 10px; border-radius: 10px; font-size: .813em; color: #CCC; font-weight: 500; line-height: 1.6;  }
#event_modal .inner .event_notice_w2 > * { word-break: break-all; }
#event_modal .inner .event_notice_w2 .tt { font-size: 1.063em; font-weight: 700; margin-bottom: 7px; color: #FFF; }


#event_modal .inner .event_step2_btn { display: inline-block; width: 200px; height: 52px; border-radius: 52px; padding: 4px; box-sizing: border-box; color: #FFF; background: linear-gradient(to bottom, #1f2fb5, #d31e87); box-shadow: 0 0px 10px #f99fff; border: none; margin-top: 20px; transition: .3s; }
#event_modal .inner .event_step2_btn .event_btn_in { display: inline-block; width: 100%; height: 100%; border: 2px solid #FFF; border-radius: 42px; box-sizing: border-box;  font-size: .938em; letter-spacing: 0; vertical-align: top; line-height: 40px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: .938em; font-weight: 700; }

#event_modal .inner .event_step3_btn { display: inline-block; width: 200px; height: 52px; border-radius: 52px; padding: 4px; box-sizing: border-box; color: #FFF; background: linear-gradient(to bottom, #1f2fb5, #d31e87); box-shadow: 0 0px 10px #f99fff; border: none; margin-top: 25px; transition: .3s; }
#event_modal .inner .event_step3_btn .event_btn_in { display: inline-block; width: 100%; height: 100%; border: 2px solid #FFF; border-radius: 42px; box-sizing: border-box;  font-size: .938em; letter-spacing: 0; vertical-align: top; line-height: 40px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: .938em; font-weight: 700; }

#event_modal .inner .home_btn { display: inline-block; width: 200px; height: 52px; border-radius: 52px; padding: 4px; box-sizing: border-box; color: #FFF; background: linear-gradient(to bottom, #00abff, #000dff); box-shadow: 0 0px 10px #9fc5ff; border: none; margin-top: 25px; transition: .3s; }
#event_modal .inner .home_btn .home_btn_in { display: inline-block; width: 100%; height: 100%; border: 2px solid #FFF; border-radius: 42px; box-sizing: border-box;  font-size: .938em; letter-spacing: 0; vertical-align: top; line-height: 40px; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: .938em; font-weight: 700; }

#event_modal .inner .home_btn.f_home_btn { margin-top: 35px; margin-bottom: 15px; }


#event_modal .inner .addr_th { display: inline-block; font-weight: 600; color: #0088ff; width: 80px; text-align: right; margin-right: 8px; font-size: .938em; margin-bottom: 13px; }
#event_modal .inner .addr_td { display: inline-block; margin-bottom: 13px; width: 260px; font-size: 0; }
#event_modal .inner .addr_td > input { font-size: 1rem; }
#event_modal .inner .addr_td > label { font-size: 1rem; }

#event_modal .inner .addr_td .w_edit_1 { width: calc(40% - 4px); margin-right: 4px; }
#event_modal .inner .addr_td .w_edit_2 { width: 60%; }


#event_modal .inner .input_st { width: 260px; padding-left: 12px; }

#event_modal .inner .addr_tit { font-size: 1.438em; font-weight: 800; background: linear-gradient( to right, rgb(58 137 255) 0%, rgb(58 85 255) 50%, rgb(255 39 214) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 3px auto 25px auto; line-height: 1.4; }

#event_modal .inner .event_fin { font-size: 1.438em; font-weight: 800; background: linear-gradient( to right, rgb(58 137 255) 0%, rgb(58 85 255) 50%, rgb(255 39 214) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; padding-top: 20px; line-height: 1.4; }


#event_modal #event_step3_form > .event_input_w { display: inline-block; padding: 28px 40px; background: #f1fcff; border: 1px solid #06f; border-radius: 15px; box-shadow: 0 3px 5px rgba(0,0,0,.6); }
#event_modal #event_step3_form > .event_input_w > label { display: block; }

#event_modal .all_close { position: absolute; bottom: -35px; left: 50%; transform: translate(-50%, 0); text-decoration: underline; color: #FFF; font-size: .938em; background: none; border: 0; }



/* notice add 2022-01-21 */
.notice_step { position: relative; width: 100%; max-width: 90%; margin: 0 auto; height: 95px; border: 1px solid #CCC; border-bottom: 2px solid #e48cff; background: #FFF; margin-bottom: 40px; box-sizing: border-box; }
.notice_step:after { content: "\e935"; font-family:xeicon; font-size: 1.375em; position: absolute; left: 50%; bottom: -38px; transform: translate(-50%, 0); color: #e48cff; }
.notice_step:nth-child(2):after { color: #cf34ff; }
.notice_step:nth-child(3):after { color: #b600ff; }
.notice_step:nth-child(4):after { color: #9600d0; }
.notice_step:last-child:after { content: ""; }
.notice_step:nth-child(2) { border-bottom: 2px solid #d859ff; }
.notice_step:nth-child(2) .notice_step_num { color: #d448ff; }
.notice_step:nth-child(3) { border-bottom: 2px solid #cc25ff; }
.notice_step:nth-child(3) .notice_step_num { color: #bc00f8; }
.notice_step:nth-child(4) { border-bottom: 2px solid #9b00cc; }
.notice_step:nth-child(4) .notice_step_num { color: #9b00cc; }
.notice_step:last-child { border: none; background: #bc00f8; color: #FFF; }
.notice_step:last-child .notice_step_num { color: #FFF; }
.notice_step_num { position: absolute; top: 50%; left: 22px; transform: translate(0, -50%); font-family: "Times New Roman", Times, serif; color: #da6cff; font-weight: 900; font-style: italic; font-size: 1.313em; }


.obt_text2 .va { vertical-align: middle!important; }

/* main event btn add 2022-01-21*/
#header .event_btn { position: fixed; bottom: 94px; left: 50%; width: 1200px; transform: translate(-50%, 0); text-align: right; }
#header .event_btn .inner { display: inline-block; background: #340045; color: #FFF; width: 180px; height: 60px; border-radius: 60px; line-height: 60px; text-align: left; cursor: pointer; box-shadow: 0 0px 10px #f99fff; margin-right: 20px; }
#header .event_btn .inner .xi { width: 48px; height: 48px; border-radius: 50%; text-align: center; line-height: 48px; margin-left: 7px; margin-top: -6px; font-size: 1.5em; vertical-align: middle; background: #8e00bc; }
#header .event_btn .inner span { display: inline-block; vertical-align: middle; margin-left: 20px; font-size: 1.063em; margin-top: -6px; }


/* footer_modal */
.footer_modal { max-width: 1000px!important; box-sizing: border-box; padding: 52px 0 0 0!important; position: relative; }
.footer_modal .inner { max-height: 700px; overflow-y: scroll; padding: 15px 30px; }
.footer_modal .inner > * { word-break: break-all; }
.footer_modal .inner > p { font-size: .938em; color: #555; line-height: 1.7; }
.footer_modal .inner > div { color: #111; margin-top: 30px; margin-bottom: 12px; font-weight: 500; }
.footer_modal .tit { position: absolute; top: 0; left: 0; width: 100%; height: 52px; line-height: 52px; font-size: 1.125em; font-weight: 600; color: #FFF; background: #344796; padding-left: 30px; box-sizing: border-box; }


/*agree*/
#agreeModal .tt { font-size: 1.125em; margin-bottom: 10px; }
#agreeModal .newgame .in { padding: 25px 40px; text-align: left; width: 100%; line-height: 1.6; font-size: .875em; color: #444; }
#agreeModal .page_btn_wrap { margin-bottom: 62px; }
#agreeModal2 .tt { font-size: 1.125em; margin-bottom: 10px; }
#agreeModal2 .newgame .in { padding: 25px 40px; text-align: left; width: 100%; line-height: 1.6; font-size: .875em; color: #444; }
#agreeModal2 .page_btn_wrap { margin-bottom: 62px; }
.agree_tt { font-size: 1.125em; color: #333; font-weight: 500; }
.agree_st { color: #111; font-weight: 500; }

/*main_event_btn*/
#header .event_btn .inner.ready_modal { background: #002449; box-shadow: 0 0 10px #00fff3; }
#header .event_btn .inner.ready_modal .xi { background: #0094ff; }

/* add 2022-01-25 */
#event_modal .inner .event_info .info_count * { word-break: break-all; }
#event_modal .inner .event_info .info_count .t0 { font-size: .875em; margin-top: 8px; opacity: .6; }


/* X X X X add 2022-02-08 실섭에는 바로 반영 X X X X */
.mypage_w .account_m { margin-bottom: 0; }
.mypage_w .mypage_menu { margin-bottom: 25px; margin-top: 6px; }
.mypage_w .mypage_menu .n_sub_nav { height: 100px; border-top: none; background: linear-gradient(to right, #002c81 0%, #004eff 100%); }
.mypage_w .mypage_menu .n_sub_nav > ul { padding: 22px 0; }

.mypage_w .data_m ul li table thead tr:first-child { background: #c0e6ff!important; }
.mypage_w .data_m ul li table tbody tr:first-child { background: inherit!important; }
.mypage_w .data_m ul li table tbody tr:first-child:hover { background: #FFF!important; }

.mypage_loading { padding: 55px 0; color: #a038ff; text-align: center; }
.mypage_loading .xi { display: inline-block; font-size: 2.5em; }
.mypage_loading span { display: block; font-weight: 600; margin-top: 7px; }

.my_play_list_more_btn { width: 220px; max-width: 94%; height: 48px; line-height: 48px; border-radius: 48px; background: linear-gradient(to bottom, #2285ff 0%, #e288ff 100%); color: #FFF; margin: 10px auto 0 auto; border: 1px solid #a600ff; box-shadow: 0 1px 3px rgba(255,0,224,.5); text-shadow: -1px -1px 0 #a900ff, 1px -1px 0 #a900ff, -1px 1px 0 #a900ff, 1px 1px 0 #a900ff; text-transform: uppercase; font-size: 1em; color: #FFF; font-weight: 500; letter-spacing: 2px; transition: .3s; }
.my_play_list_more_btn .xi { display: none; }
.my_play_list_more_btn span { display: inline-block; margin-top: -8px; }
.my_play_list_more_btn:hover { background: linear-gradient(to bottom, #0072ff 0%, #d657ff 100%); }

.my_play_list_modal_more_btn { display: block; width: 220px; max-width: 94%; height: 48px; line-height: 43px; border-radius: 48px; background: linear-gradient(to bottom, #2285ff 0%, #e288ff 100%); margin: 10px auto 20px auto; border: 1px solid #a600ff; box-shadow: 0 1px 3px rgba(255,0,224,.5); text-shadow: -1px -1px 0 #a900ff, 1px -1px 0 #a900ff, -1px 1px 0 #a900ff, 1px 1px 0 #a900ff; text-transform: uppercase; font-size: 1em; color: #FFF; font-weight: 500; letter-spacing: 2px; transition: .3s; }
.my_play_list_modal_more_btn .xi { display: none; }
.my_play_list_modal_more_btn:hover { background: linear-gradient(to bottom, #0072ff 0%, #d657ff 100%); }

.mypage_w .mypage_notice { width: 100%; background: #e7f6ff; border: 3px solid #2f54db; border-top: none; box-sizing: border-box; box-shadow: 2px 2px 4px rgba(0,0,0,.3); margin-bottom: 25px;  transition: .3s; }
.mypage_w .mypage_notice:hover { box-shadow: none; }
.mypage_w .mypage_notice .tit { position: relative; text-align: center; font-size: 1.625em; background: #2f54db; color: #FFF; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 600; padding: 13px 10px; }
.mypage_w .mypage_notice .tit .tit_info { position: absolute; bottom: 0; right: -3px; display: inline-block; font-size: .588em; background: #001976; bottom: 0; right: -3px; padding: 8px 25px; font-weight: 500; border: 2px solid #3d67ff; box-sizing: border-box; }
.mypage_w .mypage_notice .tit .tit_info p { display: inline-block; }
.mypage_w .mypage_notice .tit .tit_info p span.img { width: 20px; margin-right: 2px; }
.mypage_w .mypage_notice .tit .tit_info p span { display: inline-block; }
.mypage_w .mypage_notice .tit .tit_info p span.trans { font-size: .813em; margin-left: 5px; letter-spacing: -1.5px; }
.mypage_w .mypage_notice .tit .tit_info p span.trans.up { color: #f00; }
.mypage_w .mypage_notice .tit .tit_info p span.trans.down { color: #00d0ff; }
.mypage_w .mypage_notice .tit .tit_info p span i { vertical-align: middle; }
.mypage_w .mypage_notice .tit .tit_info p span .xi { font-size: 1em; }
.mypage_w .mypage_notice .tit .tit_info p:not(:last-child) { margin-right: 20px; }
.mypage_w .mypage_notice ul { text-align: center; }
.mypage_w .mypage_notice ul li { position: relative; padding: 15px; border-bottom: 2px dashed #73dfff; transition: .3s; }
.mypage_w .mypage_notice ul li.news_fix { background: #FFF; }
.mypage_w .mypage_notice ul li .fix { position: absolute; top: 50%; right: 15px; transform: translate(0, -50%); }
.mypage_w .mypage_notice ul li .fix button { border: none; background: none; font-size: 1.313em; transition: .3s; }
.mypage_w .mypage_notice ul li .fix button .bi-pin-angle-fill { color: #0072ff; transition: .3s; }
.mypage_w .mypage_notice ul li .fix button .bi-pin-angle-fill:before { }
.mypage_w .mypage_notice ul li .fix button:hover .bi-pin-angle-fill { color: #0095ff; }
.mypage_w .mypage_notice ul li .fix button:hover .bi-pin-angle-fill:before { content: "\f4eb"; }
.mypage_w .mypage_notice ul li .fix button .bi-pin-angle { color: #0095ff; transition: .3s; }
.mypage_w .mypage_notice ul li .fix button:hover .bi-pin-angle { color: #0072ff; }
.mypage_w .mypage_notice ul li .fix button:hover .bi-pin-angle:before { content: "\f4ea"; }
.mypage_w .mypage_notice ul li.t17 .txt { color: #0089ff!important; }
.mypage_w .mypage_notice ul li.t17 .txt span { color: #2700ff!important; }
.mypage_w .mypage_notice ul li:hover { background: #FFF; padding-left: 27px; }
.mypage_w .mypage_notice ul li:last-child { border-bottom: none; }
.mypage_w .mypage_notice ul li .cate_1 { display: inline-block; padding: 7px 17px; background: #c000e3; color: #FFF; font-size: .438em; letter-spacing: 1.5px; vertical-align: middle; font-style: italic; font-weight: 600; margin-right: 14px; border-radius: 28px; }
.mypage_w .mypage_notice ul li .cate_2 { display: inline-block; padding: 7px 17px; background: #ff8d00; color: #FFF; font-size: .438em; letter-spacing: 1.5px; vertical-align: middle; font-style: italic; font-weight: 600; margin-right: 14px; border-radius: 28px; }
.mypage_w .mypage_notice ul li .cate_3 { display: inline-block; padding: 7px 17px; background: #f00; color: #FFF; font-size: .438em; letter-spacing: 1.5px; vertical-align: middle; font-style: italic; font-weight: 600; margin-right: 14px; border-radius: 28px; }
.mypage_w .mypage_notice ul li .cate_4 { display: inline-block; padding: 7px 17px; background: #00c734; color: #FFF; font-size: .438em; letter-spacing: 1.5px; vertical-align: middle; font-style: italic; font-weight: 600; margin-right: 14px; border-radius: 28px; }
.mypage_w .mypage_notice ul li .cate_5 { display: inline-block; padding: 7px 17px; background: #00adff; color: #FFF; font-size: .438em; letter-spacing: 1.5px; vertical-align: middle; font-style: italic; font-weight: 600; margin-right: 14px; border-radius: 28px; }
.mypage_w .mypage_notice ul li .txt { display: inline-block; font-size: 1.063em; color: #c000e3; font-weight: 600; vertical-align: middle; line-height: 1.4; word-break: break-all; }
.mypage_w .mypage_notice ul li .txt span { vertical-align: baseline; }
/*
.mypage_w .mypage_notice ul li:nth-child(2) .txt { color: #ff8d00; }
.mypage_w .mypage_notice ul li:nth-child(3) .txt { color: #f00; }
.mypage_w .mypage_notice ul li:nth-child(4) .txt { color: #00c734; }
.mypage_w .mypage_notice ul li:nth-child(5) .txt { color: #00adff; }
.mypage_w .mypage_notice ul li:nth-child(6) .txt { background: linear-gradient( to right, #f00 0%, #ff8d00 17%, #ffc600 33%, #52bf00 49%, #005aff 66%, #010093 84%, #8500ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
*/
.mypage_w .mypage_notice ul li .date { display: inline-block; font-size: .875em; color: #999; font-weight: 500; vertical-align: middle; margin-left: 8px; }

#my_news_more { padding: 8px 0; background: #001976; }
.my_news_more_btn { border: none; background: #FFF; color: #001976; padding: 3px 25px 8px 25px; font-weight: 800; border-radius: 50px; transition: .3s; }
.my_news_more_btn:hover { transform: translate(0, 3px); color: #2f54db; }
.my_news_more_btn .xi { display: inline-block; font-size: 1.063em; vertical-align: middle; }
.my_news_more_btn span { display: inline-block; font-size: .813em; vertical-align: middle; letter-spacing: 9px; text-transform: uppercase; margin-left: 10px; }

.mypage_w .mypage_record { width: 100%; background: #f6fcff; border: 3px solid #2f54db; box-sizing: border-box; box-shadow: 2px 2px 4px rgba(0,0,0,.3); margin-bottom: 25px;  transition: .3s; }
.mypage_w .mypage_record .record_list ul.my_record { font-size: 0; padding: 20px 40px; }
.mypage_w .mypage_record .record_list ul.my_record > li { position: relative; display: inline-block; font-size: 1rem; width: 25%; vertical-align: top; border: none!important; padding: 20px 22px 40px 22px!important; box-sizing: border-box; text-align: center; transition: .3s; }

.mypage_w .mypage_record .record_list ul.my_record > li .record_item { position: relative; min-height: 246px; border: 3px solid #00ff7b; box-shadow: 0 3px 5px rgba(0,0,0,.5); border-radius: 12px; background: #FFF; box-sizing: border-box; overflow: hidden; z-index: 2; transition: .3s; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item:hover { transform: translate(0, -12px); }

.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inc { position: relative; display: inline-block; width: 100%; height: 100%; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inc.t_inc { padding: 25px 0 20px 0; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inc .song_lock { position: absolute; top: 25px; left: 50%; width: 37px; transform: translate(-50%, -50%); z-index: 1; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .img { position: relative; display: inline-block; width: 100px; height: 100px; border-radius: 9px; overflow: hidden; border: 1px solid #c6c6c6; box-sizing: border-box; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .img img { display: inline-block; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .kind { color: #d13ef7; font-size: .813em; font-weight: 500; margin-top: 10px; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .song { font-weight: 600; color: #222; margin-top: 2px; padding: 0 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .artist { font-size: .875em; margin-top: 8px; color: #777; padding: 0 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .character { font-size: .875em; margin-top: 3px; color: #777; padding: 0 10px; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .c_bg { display: none; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .level_info { font-size: 0; padding: 15px 10px; background: #e8fff3; box-shadow: inset 0 0 5px rgba(0,0,0,.5); }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .level_info .level { display: inline-block; width: 33.33333%; font-size: 1rem; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .level_info .level .level_in { padding: 5px; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .level_info .level .level_in .l_img { position: relative; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .level_info .level .level_in .l_img.no_play { filter: grayscale(1); }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .level_info .level .level_in .l_img .l_lock { position: absolute; top: 0; left: 0; z-index: 1; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .level_info .level .level_in .l_img .st { position: absolute; bottom: 1px; right: 4px; font-size: .688em; color: #FFF; letter-spacing: 0.5px; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .inner .level_info .level .level_in .l_count { font-size: .813em; font-weight: 600; color: #666; margin-top: 2px; }

.mypage_w .mypage_record .record_list ul.my_record > li .record_item .total_record { background: linear-gradient(to right, #45fbf1 0%, #b7f864 50%, #fef601 100%); padding: 4px 0; transition: .3s; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item:hover .total_record { background: linear-gradient(to right, #45ecfb 0%, #64f869 50%, #f1fe01 100%); }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .total_count { font-size: .875em; font-weight: 600; color: #444; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .record_friend { display: inline-block; margin-top: 14px; margin-bottom: 6px; font-size: .938em; font-weight: 600; padding: 0 30px 0 17px; background: #FFF; border-radius: 50px; border: 1px solid #79dbff; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .record_friend .img { display: inline-block; width: 46px; vertical-align: middle; }
.mypage_w .mypage_record .record_list ul.my_record > li .record_item .record_friend .txt { display: inline-block; font-weight: 800; vertical-align: middle; color: #007eff; }

#my_record_modal { padding: 30px 0 15px 0!important; }
#my_record_modal:before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 260px; height: 100%; background: linear-gradient(to bottom, #71bdff 0%, #FFF 100%); box-shadow: 0 0 5px rgba(0,64,175,.9); z-index: -2; transition: .3s; }

#my_record_modal .p_bg { position: absolute; top: 0; left: 0; z-index: -3; width: 100%; height: 100%; overflow: hidden; opacity: .6; }
#my_record_modal .p_bg .p_bg_in { position: relative; width: 100%; height: 100%; }
#my_record_modal .p_bg .p_bg_in img { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); }
#my_record_modal .c_bg { position: absolute; top: 0; right: 0; z-index: -1; }
#my_record_modal .c_bg.c1000 { top: 9px; right: 49px; }
#my_record_modal .c_bg.c2000 { top: 45px; right: 124px; }
#my_record_modal .c_bg.c3000 { top: 47px; right: 124px; }
#my_record_modal .c_bg.c4000 { top: 45px; right: 81px; }
#my_record_modal .c_bg.c5000 { top: 37px; right: 22px; width: 305px; }
#my_record_modal .c_bg.c6000 { top: 38px; right: 0; }
#my_record_modal .c_bg.c7000 { top: 44px; right: 11px; }
#my_record_modal .c_bg.c8000 { top: 54px; right: -93px; }
#my_record_modal .c_bg.c10000 { top: 38px; right: -52px; }
#my_record_modal .c_bg.c12000 { top: 32px; right: 87px; }
#my_record_modal .c_bg.c13000 { top: 28px; right: 100px; z-index: 1; }
#my_record_modal .c_bg.c14000 { top: 44px; right: 90px; z-index: 1; }
#my_record_modal .c_bg.c15000 { top: 44px; right: 90px; z-index: 1; }
#my_record_modal .my_song_info { text-align: center; }
#my_record_modal .my_song_info .img { width: 170px; overflow: hidden; border-radius: 10px; margin: 0 auto; box-shadow: 0 3px 5px rgba(0,0,0,.5); }
#my_record_modal .my_song_info .kind { color: #d13ef7; font-size: .813em; font-weight: 500; margin-top: 10px; text-shadow: -1px -1px 0 #fff582, 1px -1px 0 #fff582, -1px 1px 0 #fff582, 1px 1px 0 #fff582; }
#my_record_modal .my_song_info .song { font-weight: 600; color: #222; margin: 2px auto 0 auto; line-height: 1.3; width: 240px; max-width: 96%; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
#my_record_modal .my_song_info .artist { font-size: .938em; color: #555; margin: 8px auto 0 auto; line-height: 1.3; width: 240px; max-width: 96%; }
#my_record_modal .my_song_info .character { font-size: .938em; margin-top: 3px; color: #555; }

#my_record_modal .my_record_info { width: 80%; margin: 20px auto 0 auto; background: rgba(255,255,255,.9); border: 3px solid #ffae00; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0,0,0,.4); overflow: hidden; }
#my_record_modal .my_record_info .img { position: relative; width: 70px; max-width: 100%; margin: 0 auto; }
#my_record_modal .my_record_info .img.no_play img { filter: grayscale(1); }
#my_record_modal .my_record_info .img .l_lock { position: absolute; top: 0; left: 0; z-index: 1; }
#my_record_modal .my_record_info .img .st { position: absolute; bottom: 2px; right: 5px; font-size: .813em; color: #FFF; font-weight: 700; }
#my_record_modal .my_record_info .tt { font-size: .813em; font-weight: 700; color: #555; margin-top: 4px; }

#my_record_modal .my_record_info table { table-layout: fixed; }
#my_record_modal .my_record_info table col:first-child { }
#my_record_modal .my_record_info table th { text-align: center; font-size: .813em; font-weight: 600; color: #0072ff; border-bottom: 1px solid #DDD; border-right: 1px solid #DDD; padding: 10px 12px; background: #dafaff; }
#my_record_modal .my_record_info table td { text-align: center; padding: 10px 12px; border-bottom: 1px solid #DDD; border-right: 1px solid #DDD; font-weight: 600; color: #222; transition: .3s; }
#my_record_modal .my_record_info table td.on { background: #fff5d2; }
#my_record_modal .my_record_info table td a { display: inline-block; font-size: .688em; background: #000; padding: 5px 12px; border-radius: 28px; color: #FFF; transition: .3s; }
#my_record_modal .my_record_info table td a:hover { color: #ffc800; }
#my_record_modal .my_record_info table td a.on { color: #ffc800; }

#my_record_modal .my_record_info .rate_detail { position: relative; background: #000; display: none; }
#my_record_modal .my_record_info .rate_detail .bg { position: absolute; top: 50%; left: -60px; width: 1920px; height: 100%; transform: translate(0, -50%) rotate(180deg); opacity: .52; }

#my_record_modal .total_record { text-align: center; margin-top: 8px; }
#my_record_modal .total_record .total_count { font-size: .875em; font-weight: 600; color: #005689; }
#my_record_modal .total_record .record_friend { display: inline-block; margin-top: 14px; font-size: .938em; font-weight: 600; padding: 0 30px 0 22px; background: #FFF; border-radius: 50px; border: 1px solid #79dbff; }
#my_record_modal .total_record .record_friend .img { display: inline-block; width: 46px; vertical-align: middle; }
#my_record_modal .total_record .record_friend .txt { display: inline-block; font-weight: 800; vertical-align: middle; color: #007eff; }

#my_record_modal .grade_ul { font-size: 0; padding: 19px 0; text-align: center; position: relative; z-index: 1; }
#my_record_modal .grade_ul li { display: inline-block; font-size: 1rem; margin: 0 16px; }
#my_record_modal .grade_ul li .t1 {}
#my_record_modal .grade_ul li .t1 img { height: 19px; }
#my_record_modal .grade_ul li .t2 { font-size: 1.063em; font-weight: 700; margin-top: 7px; color: #FFF; }





.mypage_w .mypage_lounge { width: 100%; background: #f6fcff; border: 3px solid #2f54db; border-top: none; box-sizing: border-box; box-shadow: 2px 2px 4px rgba(0,0,0,.3); margin-bottom: 25px;  transition: .3s; }
.mypage_w .mypage_lounge .lounge_menu {}
.mypage_w .mypage_lounge .lounge_menu ul { font-size: 0; text-align: center; }
.mypage_w .mypage_lounge .lounge_menu ul li { display: inline-block; font-size: 1rem; width: 20%; }
.mypage_w .mypage_lounge .lounge_menu ul li a { display: block; width: 100%; color: #FFF; font-size: 1.063em; padding: 13px; background: #2f54db; box-sizing: border-box; border-right: 1px solid #002bc7; border-left: 1px solid #4f75ff; transition: .3s; }
.mypage_w .mypage_lounge .lounge_menu ul li:first-child a { border-left: none; }
.mypage_w .mypage_lounge .lounge_menu ul li:last-child a { border-right: none; }
.mypage_w .mypage_lounge .lounge_menu ul li a:hover { background: #001974; }
.mypage_w .mypage_lounge .lounge_menu ul li.on a { background: #001974; }
.mypage_w .mypage_lounge .lounge_list { }
.mypage_w .mypage_lounge .lounge_list ul { font-size: 0; padding: 30px 40px; }
.mypage_w .mypage_lounge .lounge_list ul li { display: inline-block; font-size: 1rem; width: 25%; vertical-align: top; border: none!important; padding: 20px 22px 40px 22px!important; box-sizing: border-box; text-align: center; transition: .3s; }
.mypage_w .mypage_lounge .lounge_list ul li:hover { transform: translate(0, -12px); }
.mypage_w .mypage_lounge .lounge_list ul li .lounge_item { position: relative; height: 256px; padding: 25px 12px; border: 3px solid #00ff7b; box-shadow: 0 3px 5px rgba(0,0,0,.5); border-radius: 12px; background: #FFF; box-sizing: border-box; z-index: 2; }
.mypage_w .mypage_lounge .lounge_list ul li .lounge_item .inner .img { display: inline-block; width: 100px; height: 100px; border-radius: 9px; overflow: hidden; border: 1px solid #c6c6c6; box-sizing: border-box; }
.mypage_w .mypage_lounge .lounge_list ul li .lounge_item .inner .img img { display: inline-block; }
.mypage_w .mypage_lounge .lounge_list ul li .lounge_item .inner .kind { color: #d13ef7; font-size: .813em; font-weight: 500; margin-top: 10px; }
.mypage_w .mypage_lounge .lounge_list ul li .lounge_item .inner .song { font-weight: 600; color: #222; margin-top: 2px; word-break: break-all; }
.mypage_w .mypage_lounge .lounge_list ul li .lounge_item .inner .artist { font-size: .938em; margin-top: 8px; color: #777; }
.mypage_w .mypage_lounge .lounge_list ul li .lounge_item .inner .character { font-size: .938em; margin-top: 3px; color: #777; }
.mypage_w .mypage_lounge .lounge_list ul li .lounge_item .inner .c_bg { display: none; }

.mypage_w .mypage_lounge .lounge_list ul:not(.memory_ul) li .lounge_item { height: auto; min-height: 202px; }

.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w { position: relative; width: 88%; font-size: .938em; background: #FFF; border: 2px solid #00a3ff; z-index: 1; margin: -4px auto 0 auto; border-radius: 0 0 10px 10px; padding: 7px 20px 15px 20px; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,.5); background: #dff3ff; }

.mypage_w .mypage_lounge .lounge_list ul li.fin_item .lock_pay_w { border-color: #00bf27; background: #e1ffe8; color: #00c327; padding-top: 12px; font-size: 1.063em; font-weight: 600; font-style: italic; }

.mypage_w .mypage_lounge .lounge_list ul li.fin_item .lock_pay_w a { text-decoration: underline; color: #00741b; transition: .3s; }
.mypage_w .mypage_lounge .lounge_list ul li.fin_item .lock_pay_w a:hover { text-decoration: none; color: #00b324; }

/* .mypage_w .mypage_lounge .lounge_list ul li.no_item .lock_pay_w { border-color: #f00; background: #fff2f2; } */
.mypage_w .mypage_lounge .lounge_list ul li.no_item .lock_pay_w { border-color: #ababab; background: #f3f3f3; }
/* .mypage_w .mypage_lounge .lounge_list ul li.no_item .lock_pay_w .lock { border-color: #ff9393; } */
.mypage_w .mypage_lounge .lounge_list ul li.no_item .lock_pay_w .lock { border-color: #CCC; }
/* .mypage_w .mypage_lounge .lounge_list ul li.no_item .lock_pay_w .lock .tt { color: #ff5200; } */
.mypage_w .mypage_lounge .lounge_list ul li.no_item .lock_pay_w .lock .tt { color: #777; }
/* .mypage_w .mypage_lounge .lounge_list ul li.no_item .lock_pay_w .pay .tt { color: #d30000; } */
.mypage_w .mypage_lounge .lounge_list ul li.no_item .lock_pay_w .pay .tt { color: #777; }



.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .lock { text-align: left; border-bottom: 2px solid #8dd4ff; padding-bottom: 13px; margin-bottom: 13px; }
.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .lock .tt { font-size: .875em; font-weight: 500; color: #00a1ff; }
.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .lock .st { font-size: .938em; color: #333; font-weight: 600; }
.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .lock .st .t1 { font-weight: 400; }

.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .pay { text-align: right; }
.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .pay .tt { font-size: .875em; font-weight: 500; color: #002387; }
.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .pay .st { font-size: .938em; color: #333; font-weight: 600; }
.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .pay .st .t1 { font-weight: 400; }

.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .required_option { color: #f00; }
.mypage_w .mypage_lounge .lounge_list ul li .lock_pay_w .required_option .t1 { font-weight: 600!important; }
{ content: "xi-cog"}

/* JK ADD */
.mypage_w .mypage_lounge .lounge_list ul li.red_item .lock_pay_w { }
.mypage_w .mypage_lounge .lounge_list ul li.red_item .lock_pay_w a { font-size: 1.063em; font-weight: 600; font-style: italic; margin-top: 12px; text-decoration: underline; color: #042789; transition: .3s; display: inline-block; }
.mypage_w .mypage_lounge .lounge_list ul li.red_item .lock_pay_w a:hover { text-decoration: none; color: #0142f9; }
/* JK ADD END */

.mypage_w .mypage_lounge_info { position: fixed; bottom: 16px; left: 50%; transform: translate(-50%, 0); z-index: 9999; background: #000; padding: 10px 50px; border-radius: 90px; box-shadow: 0 0 8px rgba(255,162,0,1); color: #FFF; }
.mypage_w .mypage_lounge_info .info { }
.mypage_w .mypage_lounge_info .info ul { font-size: 0; text-align: center; }
.mypage_w .mypage_lounge_info .info ul li { display: inline-block; font-size: 1.063rem; font-weight: 600; margin-right: 24px; vertical-align: middle; }
.mypage_w .mypage_lounge_info .info ul li:last-child { margin-right: 0; }
.mypage_w .mypage_lounge_info .info ul li span { display: inline-block; vertical-align: middle; }

.mypage_w .mypage_lounge_info .info ul .l_rating { color: #cc59ff; }
.mypage_w .mypage_lounge_info .info ul .l_cp { color: #ff5896; }
.mypage_w .mypage_lounge_info .info ul .l_cp .cp_img { display: inline-block; width: 28px; margin-right: 4px; }
.mypage_w .mypage_lounge_info .info ul .l_tp { color: #ff8044; }
.mypage_w .mypage_lounge_info .info ul .l_tp .tp_img { display: inline-block; width: 28px; margin-right: 3px; }
.mypage_w .mypage_lounge_info .info ul .l_have { color: #9affd0; }
.mypage_w .mypage_lounge_info .info ul .l_have .t3 { display: inline-block; vertical-align: middle; font-size: .938em; }
.mypage_w .mypage_lounge_info .info ul .l_have .t4 { display: inline-block; vertical-align: middle; position: relative; overflow: hidden; width: 40px; height: 40px; margin: 0 10px 0 5px; }
.mypage_w .mypage_lounge_info .info ul .l_have .t4 .lt { position: absolute; top: 0; left: 0; }
.mypage_w .mypage_lounge_info .info ul .l_have .t4 .line { position: absolute; top: 0; left: -64px; width: 200px; height: 2px; background: #9affd0; transform: rotate(-45deg); }
.mypage_w .mypage_lounge_info .info ul .l_have .t4 .rb { position: absolute; bottom: 0; right: 0; }
.mypage_w .mypage_lounge_info .info ul .l_have .t5 { display: inline-block; vertical-align: middle; font-size: .938em; }

.mypage_w .mypage_lounge_info .info ul br { display: none; }

/* 플레이 상세 보기 */
#my_play_detail .inner { padding: 0; }
#my_play_detail .grade_td { background: #19004a; }
#my_play_detail th { width: 80px; font-size: .938em; font-weight: 600; background: #e5f6ff; border-bottom: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; }
#my_play_detail td { font-weight: 700; border-bottom: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; }
#my_play_detail td .td_img { width: 75px; margin: 0 auto; }




/* #my_play_detail { width: 600px; max-width: 90%!important; border: none; margin-top: 80px; background: rgba(0,5,30,.6)!important; padding: 0 15px 15px 15px!important; } */
#my_play_detail { width: 600px; max-width: 90%!important; border: none; margin-top: 80px; background: linear-gradient(to right, #67c7ff 0%, #e6f6ff 100%)!important; padding: 0 15px 15px 15px!important; }
#my_play_detail .inner { overflow-y: unset; }
#my_play_detail .inner .p_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#my_play_detail .inner .my_play_song_info { position: relative; padding-top: 105px; text-align: center; }
#my_play_detail .inner .my_play_song_info .s_img { position: absolute; top: 0; left: 50%; z-index: 1; transform: translate(0, -50%); margin-left: 48px; margin-top: 10px; }
#my_play_detail .inner .my_play_song_info .s_img.c1000 {}
#my_play_detail .inner .my_play_song_info .s_img.c2000 {}
#my_play_detail .inner .my_play_song_info .s_img.c3000 {}
#my_play_detail .inner .my_play_song_info .s_img.c4000 {}
#my_play_detail .inner .my_play_song_info .s_img.c5000 {}
#my_play_detail .inner .my_play_song_info .s_img.c6000 {}
#my_play_detail .inner .my_play_song_info .s_img.c7000 {}
#my_play_detail .inner .my_play_song_info .s_img.c8000 {}
#my_play_detail .inner .my_play_song_info .s_img.c10000 { width: 142px; margin-left: 30px; }
/* #my_play_detail .inner .my_play_song_info:before { content: ""; width: 160px; height: 160px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(to bottom, #f021be 0%, #b91ce3 100%); padding: 6px; border-radius: 21px; } */
#my_play_detail .inner .my_play_song_info:before { content: ""; width: 160px; height: 160px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(to top, #21adf0 0%, #b91ce3 100%); padding: 6px; border-radius: 21px; box-shadow: 0 3px 5px rgba(0,0,0,.5); }
#my_play_detail .inner .my_play_song_info .song_img { position: absolute; top: 0; left: 50%; width: 160px; border-radius: 15px; overflow: hidden; transform: translate(-50%, -50%); border: 3px solid #FFF; box-sizing: border-box; }
#my_play_detail .inner .my_play_song_info .song_img .song_inner { position: relative; width: 100%; height: 100%; }
#my_play_detail .inner .my_play_song_info .song_img .song_inner .song_bpm { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; background: rgba(0,0,0,.8); padding: 7px 5px; box-sizing: border-box; }
#my_play_detail .inner .my_play_song_info .song_img .song_inner .song_bpm span { display: inline-block; vertical-align: middle; color: #CCC; font-size: .875em; }
#my_play_detail .inner .my_play_song_info .song_img .song_inner .song_bpm span.bpm { font-weight: 600; color: #FFF; font-size: 1em; margin-left: 2px; }

#my_play_detail .inner .my_play_song_info .song_tit { position: relative; display: inline-block; min-width: 230px; height: 40px; line-height: 40px; background: linear-gradient(to bottom, #5d3192 0%, #783aa1 100%); font-weight: 600; color: #FFF; border-radius: 40px; border: 1px solid #c580ff; margin: 0 auto; text-align: center; padding: 0 20px; box-sizing: border-box; box-shadow: 0 3px 5px rgba(0,0,0,.5); }
#my_play_detail .inner .my_play_song_info .song_tit .t1 { position: absolute; top: -20px; left: 20px; font-size: .938em; font-style: italic; font-family: 'Trebuchet MS', sans-serif; color: #FFF; text-shadow: -1px -1px 0 #6000b3, 1px -1px 0 #6000b3, -1px 1px 0 #6000b3, 1px 1px 0 #6000b3; font-weight: 400; }
#my_play_detail .inner .my_play_song_info .song_artist { position: relative; display: inline-block; width: 230px; height: 40px; line-height: 40px; background: linear-gradient(to bottom, #bbe486 0%, #7fe6a8 100%); font-size: .938em; font-weight: 600; color: #005600; border-radius: 40px; border: 1px solid #f7ffaf; margin: 15px auto 0 auto; text-align: center; padding: 0 20px; box-sizing: border-box; box-shadow: 0 3px 5px rgba(0,0,0,.5); }
#my_play_detail .inner .my_play_song_info .song_artist .t1 { position: absolute; top: -20px; left: 20px; font-size: .938em; font-style: italic; font-family: 'Trebuchet MS', sans-serif; color: #FFF; text-shadow: -1px -1px 0 #1e8500, 1px -1px 0 #1e8500, -1px 1px 0 #1e8500, 1px 1px 0 #1e8500; font-weight: 400; }

/* #my_play_detail .inner .my_play_result_info { position: relative; background: linear-gradient(135deg, #9a38e0 0%, #49a1f0 100%); border-radius: 15px; border: 2px solid #2cfade; overflow: hidden; margin-top: 30px; } */
#my_play_detail .inner .my_play_result_info { position: relative; background: linear-gradient(135deg, #9a38e0 0%, #49a1f0 100%); border-radius: 15px; border: 3px solid #fab92c; overflow: hidden; margin-top: 30px; box-shadow: 0 3px 5px rgba(0,0,0,.5); }
#my_play_detail .inner .my_play_result_info .bg { position: absolute; bottom: -134px; left: -53px; opacity: .8; }
#my_play_detail .inner .my_play_result_info .grade_score { position: relative; z-index: 1; font-size: 0; text-align: center; padding: 20px 0; background: rgba(0,0,0,.5); }
#my_play_detail .inner .my_play_result_info .grade_score .level_img { display: inline-block; width: 66px; vertical-align: middle; }
#my_play_detail .inner .my_play_result_info .grade_score .grade_img { display: inline-block; width: 82px; vertical-align: middle; margin-right: 8px; margin-left: 25px; padding-left: 20px; border-left: 2px dashed #6778c5; }
#my_play_detail .inner .my_play_result_info .grade_score .score_txt { display: inline-block; font-size: 1.75rem; font-weight: 700; font-family: 'M PLUS Rounded 1c', sans-serif; color: #FFF; vertical-align: middle; }
#my_play_detail .inner .my_play_result_info .grade_score .score_txt .my_play_date { font-size: .625em; color: #DDD; }
#my_play_detail .inner .my_play_result_info .grade_detail { position: relative; z-index: 1; }

#my_play_detail .grade_ul { font-size: 0; padding: 25px 0; text-align: center; }
#my_play_detail .grade_ul li { display: inline-block; font-size: 1rem; margin: 0 16px; }
#my_play_detail .grade_ul li .t1 {}
#my_play_detail .grade_ul li .t1 img { height: 20px; }
#my_play_detail .grade_ul li .t2 { font-size: 1.125em; font-weight: 700; margin-top: 7px; color: #FFF; }

#my_best.m_modal .inner table td .tt { margin-top: 6px; }
#my_best.m_modal .inner table td .st { margin-top: 2px; }

#my_best .inner { padding: 0; }
#my_best table thead tr:first-child { background: #c0e6ff; }
#my_best table tbody tr { transition: .3s; }
#my_best table tbody tr:hover { background: #FFF; }

.mypage_w .inner.play_m ul li { margin-right: 62px; }

.search_filter_w { overflow: hidden; padding: 20px 0 10px 0; }
.search_filter_w .filter_w { float: left; font-size: 0; padding: 10px 25px; background: #d5eeff; box-shadow: 0 0 3px rgba(0,0,0,.5); border-radius: 0 10px 10px 0; transition: .3s; }
.search_filter_w .filter_w:hover { margin-left: 16px; border-radius: 60px; }
.search_filter_w .filter_w .tt { display: inline-block; font-size: .938rem; margin-right: 10px; vertical-align: middle; color: #0089ff; }
.search_filter_w .filter_w .filter { display: inline-block; font-size: 1rem; vertical-align: middle; }
.search_filter_w .filter_w .filter .label_select select { padding-left: 16px; }

.search_filter_w .search_w { float: right; font-size: 0; padding: 10px 25px; background: #d5eeff; box-shadow: 0 0 3px rgba(0,0,0,.5); border-radius: 10px 0 0 10px; transition: .3s; }
.search_filter_w .search_w:hover { margin-right: 16px; border-radius: 60px; }
.search_filter_w .search_w .tt { display: inline-block; font-size: .938rem; margin-right: 10px; vertical-align: middle; color: #0089ff; }
.search_filter_w .search_w .search { display: inline-block; font-size: 1rem; vertical-align: middle; position: relative; }
.search_filter_w .search_w .search .search_btn { position: absolute; top: 50%; right: 8px; transform: translate(0, -50%); border: none; background: none; padding-bottom: 2px; box-sizing: border-box; }

.mypage_w .list_hide { display: none!important; }

/* 2022-04-19 */
#event_modal .inner { padding-bottom: 40px; }
#event_modal .step_txt { font-size: .750em; color: #cc00ff; letter-spacing: 5px; font-weight: 500; }

.event_select_w { }
.event_select_w .event_select { position: relative; width: 465px; max-width: 96%; margin: 0 auto; background: #f1fcff; border: 1px solid #06f; border-radius: 15px; box-shadow: 0 3px 5px rgba(0,0,0,.6); transition: .3s; }
.event_select_w .event_select .select_inner { width: 100%; height: 100%; padding: 20px 10px 20px 30px; box-sizing: border-box; cursor: pointer; }
.event_select_w .event_select .img { position: absolute; top: 50%; left: -48px; transform: translate(0, -50%); z-index: 2; }
.event_select_w .event_select .event_full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); border: 2px solid #ffde00; font-size: 1.125em; font-weight: 700; color: #ffde00; border-radius: 15px; box-sizing: border-box; z-index: 1; }
.event_select_w .event_select:hover { transform: translate(-10px, 0); background: #d5f6ff; }
.event_select_w .event_select:not(:last-child) { margin-bottom: 10px; }

.event_select_w .event_select .tt_w { display: inline-block; font-size: 1.5em; font-weight: 700; font-family: 'M PLUS Rounded 1c'; color: #0045df; margin-right: 37px; vertical-align: middle; }
.event_select_w .event_select .st_w { display: inline-block; font-size: .813em; color: #777; text-align: right; vertical-align: middle; }
.event_select_w .event_select .st_w p:not(:last-child) { margin-bottom: 3px; }
.event_select_w .event_select .st_w p .fw { font-size: 1.125em; color: #333; font-weight: 700; vertical-align: baseline; }
.event_select_w .event_select .st_w p .fw .fc { vertical-align: baseline; }
.event_select_w .event_select .st_w p .fw.event_red { color: #f00; }

.event_info_w { width: 440px; max-width: 96%; margin: 0 auto; background: #FFF; border-radius: 15px; overflow: hidden; border: 1px solid #0016ff; }
.event_info_w .apply_tbl { width: 100%; border-top: 1px solid #DDD; }
.event_info_w .result_tbl { border: none; text-align: center; padding: 5px 0 30px 0; }
.event_info_w .apply_tbl .apply_th { width: 30%; }
.event_info_w .apply_tbl .apply_td { width: 70%; }
.event_info_w .apply_tbl tr { transition: .3s; }
.event_info_w .apply_tbl tr:hover { background: #daf1ff; }
.event_info_w .apply_tbl th { font-size: .938em!important; padding: 12px 35px; border-bottom: 1px solid #DDD; color: #1446ff; font-weight: 600; vertical-align: middle; box-sizing: border-box; background: #e9faff; word-break: keep-all!important; }
.event_info_w .apply_tbl td { font-size: .938em; padding: 12px 35px; border-bottom: 1px solid #DDD; vertical-align: middle; box-sizing: border-box; line-height: 1.4; word-break: keep-all!important; }
.event_info_w .apply_tbl td span { vertical-align: middle; }
.event_info_w .apply_tbl td label { padding: 0 12px; cursor: pointer; }
.event_info_w .apply_tbl td.gender_td label { padding: 0 30px; }

.event_info_st { font-size: .938em; font-weight: 600; color: #bc3aff; margin-top: 8px; line-height: 1.4; }

.event_info_w.apply_step3 { border-color: #ffae00; }
.event_info_w.apply_step3 .apply_tbl th { color: #da47ff; background: #ffe9e9; }

.event_fin_w { color: #c534e2; font-weight: 500; line-height: 1.5; }

#event_modal .inner .event_step3_btn { margin-top: 30px!important; }
#event_modal { min-height: auto; }

input[type=checkbox]:disabled:checked { color: #000; background: #000; }

/* 22-04-27 */
.event_contents {}
.event_contents .location_w { width: 440px; max-width: 95%; margin: 0 auto; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: .3s; }
.event_contents .location_w:hover { transform: translate(-10px, 0); }
.event_contents .location_w .tit { background: #005aff; color: #FFF; padding: 7px 10px; }
.event_contents .location_w .tit .xi { font-size: 1.438em; margin-right: 8px; }
.event_contents .location_w .st_w { background: #eaf6ff; font-size: .938em; color: #333; }
.event_contents .location_w .st_w > p { padding: 8px 10px; line-height: 1.3; font-weight: 600; }
.event_contents .location_w .st_w > p:not(:last-child) { border-bottom: 1px dashed #2fa9ff; }

.event_contents .person_w { width: 440px; max-width: 95%; margin: 25px auto 0 auto; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: .3s; }
.event_contents .person_w:hover { transform: translate(-10px, 0); }
.event_contents .person_w .tit { background: #ff0076; color: #FFF; padding: 7px 10px; }
.event_contents .person_w .tit .xi { font-size: 1.438em; margin-right: 8px; }
.event_contents .person_w .st_w { background: #fff3fb; font-size: .938em; color: #333; }
.event_contents .person_w .st_w > p { padding: 8px 10px; line-height: 1.3; font-weight: 600; }
.event_contents .person_w .st_w > p:not(:last-child) { border-bottom: 1px dashed #ff6262; }

.event_contents .inner_w { width: 440px; max-width: 95%; margin: 25px auto 0 auto; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: .3s; }
.event_contents .inner_w:hover { transform: translate(-10px, 0); }
.event_contents .inner_w .tit { background: #ff7600; color: #FFF; padding: 7px 10px; }
.event_contents .inner_w .tit .xi { font-size: 1.438em; margin-right: 8px; }
.event_contents .inner_w .st_w { background: #fffaf6; font-size: .938em; color: #333; }
.event_contents .inner_w .st_w > p { padding: 8px 10px; line-height: 1.3; font-weight: 600; }
.event_contents .inner_w .st_w > p:not(:last-child) { border-bottom: 1px dashed #ff782f; }
.event_contents .inner_w .st_w > p.bd_none { border: none!important; }

.event_contents .inner_w .st_w > .st { padding: 0 10px 8px 10px; }
.event_contents .inner_w .st_w > .st .st_inner { width: 100%; height: 100%; background: #FFF; border-radius: 4px; border: 1px solid #DDD; padding: 10px; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.event_contents .inner_w .st_w > .st .st_inner span { display: block; font-size: .938em; font-weight: 400; margin-bottom: 6px; }

.event_contents .inner_w .st_w .notice_url_btn { display: inline-block; font-size: .813em; text-decoration: underline; padding: 0 10px 10px 10px; font-weight: 700; color: #005aff; }

.event_full.already { cursor: pointer; letter-spacing: 9px; color: #f00!important; font-weight: 600!important; border-color: #f00!important; }
.event_user_info { font-size: 1.375em; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; padding: 10px 0; color: #FFF; margin-bottom: 20px; background: linear-gradient(to right, #3a74ff 0%, #000 50%, #bc5fe3 100%); }



    /* 실섭에 옮기기전에 반응형까지 수정해서 같이 올리기 */
#header .location_w { width: auto; transform: translate(-100%, 0); margin-left: 600px; }
#header .event_btn { width: auto; transform: translate(-100%, 0); margin-left: 600px; }

/*NO_DATA*/
.no_data { font-size: 1.375em; font-weight: 800; font-family: 'M PLUS Rounded 1c', sans-serif; padding: 25px 0!important; background: linear-gradient( to right, rgb(58 137 255) 0%, rgb(58 85 255) 50%, rgb(255 39 214) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#my_news .no_data { display: inline-block; }


/* ADD 22-06-23 */
.modal_bg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.7); z-index: 1; }

#header .chrono_pass_btn { position: fixed; bottom: 16px; left: 50%; width: auto; text-align: right; margin-left: -600px; }
/*
#header .chrono_pass_btn .inner { display: inline-block; background: linear-gradient(to right, #00bbff, #1000ff); color: #FFF; width: 180px; height: 60px; border-radius: 60px; line-height: 60px; text-align: left; cursor: pointer; box-shadow: 0 0px 10px #f99fff; margin-left: 20px; }
#header .chrono_pass_btn .inner .xi { width: 48px; height: 48px; border-radius: 50%; text-align: center; line-height: 48px; margin-left: 7px; margin-top: -6px; font-size: 1.5em; vertical-align: middle; background: radial-gradient(#5d00ff, transparent); }
*/
#header .chrono_pass_btn .inner { display: inline-block; background: linear-gradient(to right, #004eff 0%, #00dcff  50%, #004eff 100%); color: #FFF; width: 180px; height: 60px; border-radius: 60px; line-height: 60px; text-align: left; cursor: pointer; box-shadow: 0 0px 10px #f99fff; margin-left: 20px; padding-left: 7px; }
#header .chrono_pass_btn .inner .xi { width: 48px; height: 48px; border-radius: 50%; text-align: center; line-height: 48px; margin-top: -6px; font-size: 1.5em; vertical-align: middle; background: radial-gradient(#000, transparent); }
#header .chrono_pass_btn .inner span { display: inline-block; vertical-align: middle; margin-left: 20px; font-size: 1.063em; margin-top: -6px; text-shadow: 0 0 3px rgba(0,0,0,.9); }


.chrono_pass_modal { position: relative!important; width: 580px!important; max-width: 100%!important; border: 3px solid #fffb98!important; box-sizing: border-box!important; padding: 10px!important; border-radius: 20px!important; text-align: center!important; background: none!important; margin-bottom: 113px!important; display: none; }
.chrono_pass_modal .inner .mypage_loading { background: #000530; border-radius: 10px; color: #00b8ff; }
.chrono_pass_modal .inner .mypage_loading .xi { color: #00b8ff; }

.chrono_pass_modal > .inner { position: relative; width: 100%; height: 100%; }
.chrono_pass_modal > .inner .chrono_pass { width: 100%; background: #FFF; border: 2px solid #000; border-radius: 10px; box-sizing: border-box; overflow: hidden; }
.chrono_pass_modal > .inner .chrono_pass .title { position: relative; font-size: 1.5em; color: #0022cc; padding: 17px 0; background: #ceffff; }
.chrono_pass_modal > .inner .chrono_pass .title > .xi { display: none; margin-right: 8px; vertical-align: middle; }
.chrono_pass_modal > .inner .chrono_pass .title span { display: inline-block; vertical-align: middle; font-weight: 700; font-family: 'M PLUS Rounded 1c', sans-serif; }
.chrono_pass_modal > .inner .chrono_pass .title .list_btn { position: absolute; top: 7px; left: 8px; width: 58px; height: 58px; font-size: .5em; background: #98ffff; box-shadow: 0 0 2px rgba(0,0,0,.5); border-radius: 6px; cursor: pointer; transition: .3s; }
.chrono_pass_modal > .inner .chrono_pass .title .list_btn:hover { background: #98ffe2; }
.chrono_pass_modal > .inner .chrono_pass .title .list_btn .xi { font-size: 2.5em; }
.chrono_pass_modal > .inner .chrono_pass .title .list_btn p { font-size: .625em; font-family: 'Noto Sans JP'; }

.chrono_pass_modal > .inner .chrono_pass .item_state_w { font-size: 0; height: 58px; background: #002883; }
.chrono_pass_modal > .inner .chrono_pass .item_state_w .prev_step { display: inline-block; width: 36px; height: 36px; border-radius: 50%; font-size: 1.125rem; font-weight: 600; color: #FFF; background: #00b4ff; vertical-align: bottom; text-shadow: 0 0 3px rgba(0,0,0,.8); box-sizing: border-box; padding-right: 3px; padding-bottom: 1px; }
.chrono_pass_modal > .inner .chrono_pass .item_state_w .item_state { display: inline-block; font-size: 1rem; width: 350px; vertical-align: middle; margin: 0 15px; }
.chrono_pass_modal > .inner .chrono_pass .item_state_w .item_state .st { font-size: .688em; color: #83dcff; font-weight: 600; letter-spacing: 1px; }
.chrono_pass_modal > .inner .chrono_pass .item_state_w .item_state .bar_w { position: relative; width: 100%; height: 30px; border-radius: 30px; background: #e6f8ff; font-size: .625em; color: #0034ab; letter-spacing: 3.5px; margin-top: 4px; }
.chrono_pass_modal > .inner .chrono_pass .item_state_w .item_state .bar_w span { position: relative; color: #0a00e1; font-weight: 600; letter-spacing: 1px; }
.chrono_pass_modal > .inner .chrono_pass .item_state_w .item_state .bar_w span.total_count { display: block; color: #858585; margin-top: 2px; }
.chrono_pass_modal > .inner .chrono_pass .item_state_w .item_state .bar_w .ing_line { position: absolute; top: 0; left: 0; width: 25%; height: 100%; border-radius: 30px; background: #17bbff; box-shadow: 0 0 7px rgba(0,204,255,1); }
.chrono_pass_modal > .inner .chrono_pass .item_state_w .next_step { display: inline-block; width: 36px; height: 36px; border-radius: 50%; font-size: 1.125rem; font-weight: 600; color: #FFF; background: #e9e9e9; vertical-align: bottom; text-shadow: 0 0 3px rgba(0,0,0,.8); box-sizing: border-box; padding-right: 3px; padding-bottom: 1px; }

.chrono_pass_modal > .inner .chrono_pass .item_date_w { font-size: 0; height: 24px; background: #000; }
.chrono_pass_modal > .inner .chrono_pass .item_date_w .tt { display: inline-block; font-size: .75rem; color: #FFF; vertical-align: middle; margin-right: 12px; }
.chrono_pass_modal > .inner .chrono_pass .item_date_w .tt .xi { display: inline-block; vertical-align: middle; margin-bottom: -2px; margin-right: 2px; }
.chrono_pass_modal > .inner .chrono_pass .item_date_w .tt span { display: inline-block; vertical-align: middle; }
.chrono_pass_modal > .inner .chrono_pass .item_date_w .st { display: inline-block; font-size: .75rem; color: #c7c7c7; vertical-align: middle; }

.chrono_pass_modal > .inner .chrono_pass .change_info { position: relative; background: #f3f3f3; box-shadow: 0 0 3px rgba(0,0,0,.5); padding: 6px; z-index: 2; }
.chrono_pass_modal > .inner .chrono_pass .change_info .tt { font-size: .750em; color: #666; }
.chrono_pass_modal > .inner .chrono_pass .change_info .btn { display: inline-block; font-size: .750em; padding: 5px 18px; background: #000; color: #FFF; border-radius: 30px; margin-top: 5px; }

.chrono_pass_modal > .inner .chrono_pass .item_list_scroll { position: relative; height: 440px; overflow-y: scroll; overflow-x: hidden; }

.chrono_pass_modal > .inner .chrono_pass .item_list_scroll .top_bg { position: absolute; top: -140px; left: 50%; width: 100%; transform: translate(-50%, -50%); opacity: .15; }
.chrono_pass_modal > .inner .chrono_pass .item_list_scroll .top_bg img { animation: 70s linear 0s infinite normal none running rotation; }
.chrono_pass_modal > .inner .chrono_pass .item_list_scroll .btm_bg { position: absolute; bottom: 24px; left: 50%; width: 100%; transform: translate(-50%, 50%); opacity: .8; }
.chrono_pass_modal > .inner .chrono_pass .item_list_scroll .btm_bg img { animation: 70s linear 0s infinite normal none running rotation; }

.chrono_pass_modal > .inner .chrono_pass .item_list_w { position: relative; padding: 30px 0 30px 110px; overflow: hidden; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .location_img { display: none; position: absolute; left: 23px; top: 33px; transform: translate(0,-51px); }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .location_img.on { display: none; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .location_line { position: absolute; top: 0; left: 110px; width: 16px; height: 100%; background: #e9e9e9; box-shadow: 0 0 3px rgba(0,0,0,.8); transform: translate(-50%, 0); }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .location_line .inner { position: relative; width: 100%; height: 100%; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .location_line .inner .ing_line { position: absolute; top: 0; left: 0; width: 100%; height: calc(30px + 56px + 33px); background: linear-gradient(180deg, #00b4ff 0%, #00b4ff 96%, #0072ff 100%); border-radius: 0 0 10px 10px; transition: .3s; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .location_line .inner .ing_line.on { border-radius: 0; }

.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section { position: relative; padding-left: 54px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .number { position: absolute; top: 50%; left: 0; width: 34px; height: 34px; background: #e9e9e9; border: 1px solid #d2d2d2; border-radius: 50%; transform: translate(-50%, -50%); font-weight: 500; color: #FFF; text-shadow: 0 0 3px rgba(0,0,0,.8); padding-right: 2px; box-sizing: border-box; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.on .number { background: #00b4ff; box-shadow: 0 0 3px rgba(97,223,255,.67); text-shadow: none; border: none; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w { position: relative; background: #ededed; border-radius: 95px 0 0 95px; height: 95px; padding-left: 95px; box-sizing: border-box; margin-bottom: 20px; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.on .item_w { background: #005dff; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .img_inner { position: absolute; top: 0; left: 0; width: 95px; height: 95px; background: rgba(0,0,0,.75); border-radius: 50%; z-index: 1; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .img_inner img { position: absolute; top: -10px; left: 50%; transform: translate(-50%, 0); width: 42px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .img_inner .count { font-size: 1.188em; color: #FFF; font-weight: 500; padding-top: 13px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .img_inner .count span { display: block; font-size: .625em; letter-spacing: 0; color: #d7d7d7; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .img { position: absolute; top: 0; left: 0; width: 95px; height: 95px; border-radius: 50%; background: #FFF; box-shadow: 0 0 3px rgba(0,0,0,.7); overflow: hidden; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.on .item_w .img { box-shadow: 0 0 8px rgba(0,222,255,1); }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt { height: 100%; text-align: left; padding-left: 20px; box-sizing: border-box; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt .st { font-size: .625em; font-weight: 500; color: #a4a4a4; letter-spacing: 1px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.on .item_w .txt .st { color: #accaff; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt .tt { font-size: .938em; font-weight: 600; color: #535353; margin-top: 5px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.on .item_w .txt .tt { color: #FFF; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt .btn { margin-top: 12px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt .btn button { width: 142px; height: 33px; border-radius: 33px; background: #f6f9ff; color: #005dff; border: none; font-size: .750em; font-weight: 600; box-shadow: 0 0 2px rgba(0,0,0,.7); transition: .3s; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt .btn button:hover { background: #e2ecff; }

.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt .btn.modify { }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt .btn.modify button { color: #FFF; background: #222; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section .item_w .txt .btn.modify button:hover { background: #000; }

.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods { z-index: 2; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods .item_w .txt { padding-right: 15px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods .item_w .txt .input_w:not(:last-child) { margin-bottom: 5px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods .item_w .txt .input_w input { width: 100%; padding: 0 8px; height: 24px; line-height: 24px; font-size: .875em; border-radius: 3px; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods .item_w .txt .goods_input { position: relative; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods .item_w .txt .goods_input .btn_w { position: absolute; bottom: -45px; left: 0; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods .item_w .txt .goods_input .btn_w button { border: none; width: 40px; height: 40px; color: #FFF; background: #222; border-radius: 50%; text-align: center; box-sizing: border-box; padding-left: 2px; padding-bottom: 1px; transition: .3s; }
.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods .item_w .txt .goods_input .btn_w button:hover { background: #000; }

.chrono_pass_modal .last_item_w { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: 100%; background: linear-gradient(to right, #75f8d2 0%, #5f96db 50%, #2ae3fc 100%); border-radius: 14px; text-align: center; padding: 13px 0 17px 0; z-index: 1; }
.chrono_pass_modal .last_item_w.on { }
.chrono_pass_modal .last_item_w .inner { position: relative; width: 100%; height: 100%; padding-left: 250px; box-sizing: border-box; text-align: left; }
.chrono_pass_modal .last_item_w .inner .stamp_img { position: absolute; top: 50%; right: 30px; transform: translate(-50%, -50%); }
.chrono_pass_modal .last_item_w .inner .img { position: absolute; bottom: -8px; left: 130px; width: 100px; height: 100px; border-radius: 50%; background: #FFF; box-shadow: 0 0 8px rgba(0,222,255,1); overflow: hidden; }
.chrono_pass_modal .last_item_w .inner .img_inner { position: absolute; bottom: -8px; left: 130px; width: 100px; height: 100px; border-radius: 50%; background: rgba(0,0,0,.75); z-index: 1; }
.chrono_pass_modal .last_item_w .inner .img_inner img { position: absolute; top: -10px; left: 50%; transform: translate(-50%, 0); width: 42px; }
.chrono_pass_modal .last_item_w .inner .img_inner .count { font-size: 1.188em; color: #FFF; font-weight: 500; padding-top: 13px; }
.chrono_pass_modal .last_item_w .inner .img_inner .count span { display: block; font-size: .625em; letter-spacing: 0; color: #d7d7d7; }
.chrono_pass_modal .last_item_w .inner .txt { display: inline-block; text-align: left; }
.chrono_pass_modal .last_item_w .inner .txt .st { color: #cbe8ff; font-size: .625em; font-weight: 500; letter-spacing: 1px; }
.chrono_pass_modal .last_item_w .inner .txt .tt { color: #FFF; font-size: 1.063em; font-weight: 600; margin-top: 7px; }
.chrono_pass_modal .last_item_w .inner .txt .tt .type { display: block; font-size: .5em; font-weight: 400; margin-bottom: 2px; }
.chrono_pass_modal .last_item_w .inner .txt .btn { margin-top: 12px; }
.chrono_pass_modal .last_item_w .inner .txt .btn button { width: 142px; height: 33px; border-radius: 33px; background: #f6f9ff; color: #005dff; border: none; font-size: .750em; font-weight: 600; box-shadow: 0 0 2px rgba(0,0,0,.7); transition: .3s; }
.chrono_pass_modal .last_item_w .inner .txt .btn button:hover { background: #e2ecff; }

.chrono_pass_modal .last_item_w .inner .txt .btn.modify { }
.chrono_pass_modal .last_item_w .inner .txt .btn.modify button { color: #FFF; background: #222; }
.chrono_pass_modal .last_item_w .inner .txt .btn.modify button:hover { background: #000; }

.chrono_pass_modal > .inner .chrono_pass .item_list_w .item_section.goods { z-index: 2; }
.chrono_pass_modal .last_item_w .inner .txt { padding-right: 15px; }
.chrono_pass_modal .last_item_w .inner .txt .input_w:not(:last-child) { margin-bottom: 5px; }
.chrono_pass_modal .last_item_w .inner .txt .input_w input,
.chrono_pass_modal .last_item_w .inner .txt .input_w select { width: 100%; padding: 0 8px; height: 24px; line-height: 24px; font-size: .875em; border-radius: 3px; }
.chrono_pass_modal .last_item_w .inner .txt .goods_input { position: relative; }
.chrono_pass_modal .last_item_w .inner .txt .goods_input .btn_w { position: absolute; bottom: -45px; left: 0; }
.chrono_pass_modal .last_item_w .inner .txt .goods_input .btn_w button { border: none; width: 40px; height: 40px; color: #FFF; background: #222; border-radius: 50%; text-align: center; box-sizing: border-box; padding-left: 2px; padding-bottom: 1px; transition: .3s; }
.chrono_pass_modal .last_item_w .inner .txt .goods_input .btn_w button:hover { background: #000; }


.chrono_pass_modal .cha_bg_1 { position: absolute; left: -144px; bottom: -118px; z-index: 3; }
.chrono_pass_modal .cha_bg_2 { position: absolute; right: -165px; bottom: -122px; z-index: 4; }
.chrono_pass_modal .cha_bg_3 { position: absolute; right: -189px; bottom: 128px; z-index: 3; }
.chrono_pass_modal .cha_bg_4 { position: absolute; left: -170px; bottom: -118px; z-index: 3; }

.chrono_pass_list_modal { position: relative!important; width: 500px!important; max-width: 100%!important; border: 3px solid #fffb98!important; box-sizing: border-box!important; border-radius: 20px!important; text-align: center!important; background: #DDD!important; padding: 0!important; display: none; }
.chrono_pass_list_modal > .inner > .title { position: relative; font-size: 1.5em; color: #FFF; padding: 17px 0; background: #343434; border-radius: 18px 18px 0 0; }
.chrono_pass_list_modal > .inner > .title > .xi { display: inline-block; margin-right: 8px; vertical-align: middle; }
.chrono_pass_list_modal > .inner > .title span { display: inline-block; vertical-align: middle; font-weight: 700; font-family: 'M PLUS Rounded 1c', sans-serif; }

.chrono_pass_list_modal > .inner .item_state_w { font-size: 0; height: 58px; background: #FFF; }
.chrono_pass_list_modal > .inner .item_state_w .item_state { position: relative; display: inline-block; font-size: 1rem; width: 350px; vertical-align: middle; margin: 0 15px; }
.chrono_pass_list_modal > .inner .item_state_w .item_state .stamp_img { position: absolute; top: calc(50% + 10px); right: 0; z-index: 3; width: 105px; transform: translate(50%, -50%); }
.chrono_pass_list_modal > .inner .item_state_w .item_state .st { font-size: .688em; color: #0072b4; font-weight: 600; letter-spacing: 1px; }
.chrono_pass_list_modal > .inner .item_state_w .item_state .bar_w { position: relative; width: 100%; height: 18px; border-radius: 18px; background: #e6f8ff; font-size: .625em; color: #ababab; letter-spacing: 3.5px; margin-top: 4px; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.chrono_pass_list_modal > .inner .item_state_w .item_state .bar_w .va { position: relative; }
.chrono_pass_list_modal > .inner .item_state_w .item_state .bar_w .va span { color: #0a00e1; font-weight: 600; letter-spacing: 2px; }
.chrono_pass_list_modal > .inner .item_state_w .item_state .bar_w .ing_line { position: absolute; top: 0; left: 0; width: 25%; height: 18px; border-radius: 18px; background: #17bbff; box-shadow: 0 0 7px rgba(0,204,255,1); }

.chrono_pass_list_modal > .inner .item_list_w { text-align: center; font-size: 0; padding: 30px 20px; max-height: 500px; overflow-y: scroll; }
.chrono_pass_list_modal > .inner .item_list_w .item_section { display: inline-block; font-size: 1rem; width: 33.33333%; margin-bottom: 22px; vertical-align: top; }
.chrono_pass_list_modal > .inner .item_list_w .item_section .img { position: relative; width: 100px; height: 100px; margin: 0 auto; border-radius: 10px; background: #FFF; overflow: hidden; box-sizing: border-box; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.chrono_pass_list_modal > .inner .item_list_w .item_section.avatar .img { border: 2px solid #00d2ff; }
.chrono_pass_list_modal > .inner .item_list_w .item_section.tp .img { border: 2px solid #606060; }
.chrono_pass_list_modal > .inner .item_list_w .item_section.skin .img { border: 2px solid #FFF; }
.chrono_pass_list_modal > .inner .item_list_w .item_section.song .img { border: 2px solid #FFF; }
.chrono_pass_list_modal > .inner .item_list_w .item_section.title .img { border: 2px solid #FFF; }
.chrono_pass_list_modal > .inner .item_list_w .item_section.hands .img { border: 2px solid #FFF; }
.chrono_pass_list_modal > .inner .item_list_w .item_section.touch .img { border: 2px solid #FFF; }
.chrono_pass_list_modal > .inner .item_list_w .item_section.circle .img { border: 2px solid #FFF; }
.chrono_pass_list_modal > .inner .item_list_w .item_section.beat .img { border: 2px solid #FFF; }

/*
song 곡
avatar 아바타
title 칭호
hands 핸즈스킨
touch 노트스킨
circle 써클노트
beat 비트사운드
 */

.chrono_pass_list_modal > .inner .item_list_w .item_section .img .fin_div_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 1; }
.chrono_pass_list_modal > .inner .item_list_w .item_section .img .fin_div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: .938em; font-weight: 600; letter-spacing: 2px; color: #FFF; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; padding: 10px 0; background: rgba(0,0,0,.4); z-index: 2; }

.chrono_pass_list_modal > .inner .item_list_w .item_section .txt { width: 125px; margin: 0 auto; }
.chrono_pass_list_modal > .inner .item_list_w .item_section .txt .st { font-size: .625em; font-weight: 500; color: #a4a4a4; letter-spacing: 1px; margin-top: 5px; }
.chrono_pass_list_modal > .inner .item_list_w .item_section .txt .tt { font-size: .875em; font-weight: 600; color: #535353; margin-top: 2px; word-break: break-all!important; }

.chrono_pass_list_modal > .inner .item_list_w .last_item_section { background: linear-gradient(to right, #75f8d2 0%, #5f96db 50%, #2ae3fc 100%); border-radius: 8px; box-shadow: 0 0 3px rgba(0,0,0,.5); padding: 3px; margin-top: 20px; }
.chrono_pass_list_modal > .inner .item_list_w .last_item_section .inner { position: relative; font-size: 0; background: rgba(255,255,255,.3); border-radius: 3px; padding: 5px; }
.chrono_pass_list_modal > .inner .item_list_w .last_item_section .inner .fin_div_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); border-radius: 3px; }
.chrono_pass_list_modal > .inner .item_list_w .last_item_section .inner .fin_div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 1rem; color: #FFF; font-weight: 600; letter-spacing: 3px; padding: 13px 0; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; background: rgba(0,0,0,.6); }
.chrono_pass_list_modal > .inner .item_list_w .last_item_section .inner .img { display: inline-block; font-size: 1rem; width: 100px; height: 100px; background: #FFF; border-radius: 50%; overflow: hidden; margin-right: 30px; vertical-align: middle; }
.chrono_pass_list_modal > .inner .item_list_w .last_item_section .inner .txt { display: inline-block; font-size: 1rem; vertical-align: middle; }
.chrono_pass_list_modal > .inner .item_list_w .last_item_section .inner .txt .st { font-size: .688em; color: #f3f3f3; text-shadow: 0 0 3px rgba(0,0,0,.5); }
.chrono_pass_list_modal > .inner .item_list_w .last_item_section .inner .txt .tt { font-size: .938em; font-weight: 600; color: #FFF; margin-top: 5px; text-shadow: 0 0 3px rgba(0,0,0,.7); }




@media screen and (max-width: 1400px) {
    #header .location_w { display: inline-block; width: auto!important; left: 50%; transform: translate(-50%, 0); text-align: left!important; padding-left: 7px; box-sizing: border-box; margin-left: 0; }
    #header .event_btn { display: inline-block; width: auto!important; left: 50%; transform: translate(-50%, 0); text-align: left!important; padding-left: 7px; box-sizing: border-box; margin-left: 0; bottom: 85px; }
}

@media screen and (max-width: 1024px) {
    .notice_step { padding: 7px 10px 15px 10px; height: auto; max-width: 100%; font-size: .938em; }
    .notice_step:before { display: none!important; }
    .notice_step_num { position: static; display: block; width: 100%; transform: translate(0,0); }

    #event_modal .inner .event_fin { font-size: 1.5em; }
}


@media screen and (max-width: 480px){
    #event_modal { min-height: auto!important; }
    #event_modal .inner { min-height: auto!important; overflow-y: scroll!important; }
    #event_modal .inner .event_btn { width: 220px; height: 60px; border-radius: 60px; }
    #event_modal .inner .event_btn .event_btn_in { line-height: 48px; border-radius: 48px; font-size: .938em; }

    .con_idx.notice .idx > .inner.notice_view_pd { padding-right: 0; }

    #event_modal .inner .loading_w .loading_in .xi { font-size: 3em; }
    #event_modal .inner .loading_w .loading_in .tt { font-size: .875em; }

    #event_modal #event_step3_form > .event_input_w { padding: 22px 10px; box-sizing: border-box; max-width: 94%; }
    #event_modal .inner .addr_tit { font-size: 1.313em; padding: 0 15px; word-break: break-all; margin-bottom: 25px; }
    #event_modal .inner .addr_th { display: block; width: 70%; min-width: 220px; margin: 0 auto; text-align: left; font-size: .875em; }
    #event_modal .inner .addr_td { display: block; width: 70%; min-width: 220px; margin: 3px auto 15px auto; max-width: 100%; }
    #event_modal .inner .input_st { display: block; width: 100%; }
    #event_modal .inner .label_select { display: block; width: 100%; }

    #event_modal .inner .event_info .info_count .st { font-size: .813em; }

    #event_modal .inner .l_cha_bg { display: none; }
    #event_modal .inner .r_cha_bg { display: none; }


    #event_modal .inner .addr_td .w_edit_1 { display: inline-block; }
    #event_modal .inner .addr_td .w_edit_2 { display: inline-block; }

    #event_modal .inner .event_fin { font-size: 1.313em; padding: 0 15px; word-break: break-all; }

    .footer_modal .inner { padding: 15px; }

    #event_modal .inner .event_info_tit { font-size: 1.313em; padding: 0 15px; word-break: break-all; }

    .blocker { padding: 20px 10px!important;}
    #event_modal .inner .event_notice_w { max-width: 94%; box-sizing: border-box; }
    #event_modal .inner .event_notice_w2 { max-width: 94%; box-sizing: border-box; }
    #header .event_btn { bottom: 74px; }
    #header .event_btn .inner { width: 150px; height: 50px; border-radius: 50px; line-height: 50px; }
    #header .event_btn .inner .xi { width: 40px; height: 40px; line-height: 40px; margin-left: 5px; margin-top: -5px; font-size: 1.375em; }
    #header .event_btn .inner span { margin-left: 13px; font-size: .938em; margin-top: -5px; }

    #header .location_w .inner { width: 150px!important; height: 50px!important; border-radius: 50px!important; line-height: 50px!important; }
    #header .location_w .inner .xi { width: 40px!important; height: 40px!important;; line-height: 40px!important; margin-left: 5px!important; margin-top: -5px!important; font-size: 1.375em!important; }
    #header .location_w .inner span { margin-left: 13px!important; font-size: .938em!important; margin-top: -5px!important; }

    #header .fix_top_btn { font-size: .875em; right: 12px!important; bottom: 16px!important; }



}


/**2022 12 19 추가*/
.cha_modal .cha_img.c11000{width: 600px; top: 60%; left: 150px; z-index: -1}
.track .inner .c_bg.c11000 { width: 540px!important; right: 0!important; bottom: -290px!important; }
.chrono_pass_modal .cha_bg_5 { position: absolute; left: -144px; bottom: -118px; z-index: 3; }
.chrono_pass_modal .cha_bg_6 { position: absolute; right: -215px; bottom: -122px; z-index: 4; }
.chrono_pass_modal .cha_bg_7 { position: absolute; right: -210px; bottom: 128px; z-index: 3; }

.n_cha_w.cha_11 > .inner .cha .b_cha .inner img { position: absolute; top:60px; right: 30px; width: 645px; max-width: none; }
.n_cha_w.cha_11 > .inner .cha .s_cha { right: 15px; top: 84px; }
.n_cha_w.cha_11 > .inner .bg { background: #008be4; border-right: 6px solid #100b87; }
.n_cha_w.cha_11 > .inner .bg .inner .top_ani { background: #3ca9ef; }
.n_cha_w.cha_11 > .inner .bg .inner .btm_ani { background: #3ca9ef; }
.n_cha_w.cha_11 > .inner .tt { color: #ffece1; }

#my_record_modal .c_bg.c11000{top: 20px;right: -250px}

.mypage_w .account_m .right.c200034 { top: auto; bottom: -3px; right: 32px; width: 121px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200035{ top: auto; bottom: -3px; right: 32px; width: 121px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200036 { top: auto; bottom: -3px; right: 32px; width: 121px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200021 { top: auto; bottom: -3px; right: 32px; width: 150px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200022 { width: 372px; top: 10px; bottom: inherit; right: -60px; text-align: center;}

/**2023 1 5 추가**/
.chrono_pass_modal .cha_bg_10{position: absolute; left: -175px; bottom: -118px; z-index: 3;}
.chrono_pass_modal .cha_bg_8{position: absolute; right: -160px; bottom: 100px; z-index: 3;}
.chrono_pass_modal .cha_bg_9{position: absolute; right: -125px; bottom: -122px; z-index: 4;}

.mypage_w .account_m .right.c200049{box-sizing: border-box; width: 130px; right: 35px; top: 5px;}
.mypage_w .account_m .right.c200050{box-sizing: border-box; width: 130px; right: 35px;}
.mypage_w .account_m .right.c200051{box-sizing: border-box; width: 130px; right: 35px;}

.track .inner .c_bg.c16000 {width: inherit !important; bottom: 50px !important; right: 170px !important; opacity: .6}
#my_record_modal .c_bg.c16000 {top: 45px; right: 37px; z-index: 1; width: 300px;}

/*2023 03 17 추가*/
.chrono_pass_modal .cha_bg_11{position: absolute; z-index: 3; right: -270px; bottom: -90px;}
.chrono_pass_modal .cha_bg_12{position: absolute; left: inherit; right: -120px; bottom: inherit; top: -50px;  z-index: 3; display: none;}
.chrono_pass_modal .cha_bg_13{position: absolute; z-index: 3; bottom: -100px; left: -226px; }
.chrono_pass_modal .cha_bg_14{position: absolute; z-index: 3; bottom: -100px; left: -226px; }

.mypage_w .account_m .right.c200052 {box-sizing: border-box; width: 150px; top: -5px; right: 30px;}
.mypage_w .account_m .right.c200053 {box-sizing: border-box; width: 150px; top: -5px; right: 30px;}
.mypage_w .account_m .right.c200054 {box-sizing: border-box; width: 150px; top: -5px; right: 30px;}
.mypage_w .account_m .right.c200055 {box-sizing: border-box; width: 145px; top: 0; right: 30px;}
.mypage_w .account_m .right.c200056 {box-sizing: border-box; width: 150px; top: -5px; right: 30px;}
.mypage_w .account_m .right.c200057 {box-sizing: border-box; width: 150px; top: -5px; right: 30px;}
.mypage_w .account_m .right.c200058 {box-sizing: border-box; width: 150px; top: -5px; right: 30px;}
.mypage_w .account_m .right.c200059 {box-sizing: border-box; width: 130px; top: 5px; right: 30px;}
.mypage_w .account_m .right.c200060 {box-sizing: border-box; width: 135px; top: 3px; right: 30px;}
.mypage_w .account_m .right.c200061 {box-sizing: border-box; width: 145px; top: 0; right: 30px;}
.mypage_w .account_m .right.c200062 {box-sizing: border-box; width: 150px; top: -5px; right: 30px;}

/*2023 03 24 추가*/
.mypage_w .account_m .right.c200049 { top: auto; bottom: -3px; right: 42px; width: 117px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200050 { top: auto; bottom: -3px; right: 42px; width: 117px; padding: 4px; box-sizing: border-box; }
.mypage_w .account_m .right.c200051 { top: auto; bottom: -3px; right: 42px; width: 117px; padding: 4px; box-sizing: border-box; }

/*2023 04 24 추가*/
.chrono_pass_modal .cha_bg_15{position: absolute; z-index: 3; right: -290px; bottom: -90px;}
.chrono_pass_modal .cha_bg_16{position: absolute;  left: -175px; bottom: -90px; z-index: 3;}
.chrono_pass_modal .cha_bg_17{position: absolute; z-index: 3; right: -90px; bottom: -90px;}

.mypage_w .account_m .right.c200063 {box-sizing: border-box; width: 150px; top: auto; bottom: 0; right: 0}
.mypage_w .account_m .right.c200064 {box-sizing: border-box; width: 150px; top: auto; bottom: 0; right: 0}
.mypage_w .account_m .right.c200065 {box-sizing: border-box; width: 150px; top: auto; bottom: 0; right: 0}

/*2023 05 30 추가*/
.chrono_pass_modal .cha_bg_18{position: absolute; z-index: 3; right: -150px; bottom: -90px;}
.track .inner .c_bg.c17000 {width: inherit !important; bottom: 50px !important; right: 180px !important;}

.mypage_w .account_m .right.c200066 {box-sizing: border-box; width: 180px; top: auto; bottom: -20px; right: 0}
.mypage_w .account_m .right.c200067 {box-sizing: border-box; width: 180px; top: auto; bottom: -10px; right: 0}
.mypage_w .account_m .right.c200068 {box-sizing: border-box; width: 180px; top: auto; bottom: -5px; right: 0}
#my_record_modal .c_bg.c17000 { top: 32px; right: 110px;} /*마이페이지 플레이통계 팝업 스타일*/

.mypage_w .data_m ul li table td .level.c17000{width: 90px;}
#my_play_detail .inner .my_play_song_info .s_img.c17000{margin-left: 88px; margin-top: 30px;}

.mypage_w .inner.music_m ul li .img{background: none; border:none;}

/*2023 06 22 추가*/
.change_game_id_btn{width: 28px; height: 28px; line-height: 28px; border-radius: 50%; text-align: center; font-size: .875em; vertical-align: top; box-sizing: border-box; border: none; color: #fff;  margin: 14px 0 0 5px; transition: .3s; background: #C15CFF; background: -webkit-linear-gradient(to left, #C15CFF, #FF5454); background: linear-gradient(to left, #C15CFF, #FF5454); }
.change_game_id_btn .xi{margin-top: -6px;}
.change_game_id_btn:hover{background: #295cf5}

#change_game_id_form{padding: 1.5em 1.5em 1em 1.5em;}
#change_game_id_form > *{display: block;}
#change_game_id_form input{width: 100%; text-align: center; border-radius: 12px 12px 0 0; line-height: 50px; height: 50px;}
#change_game_id_form button{border: 1px solid #ddd; width: 100%; text-align: center; border-radius: 0 0 12px 12px; line-height: 50px; height: 50px; background: #C15CFF; background: -webkit-linear-gradient(to left, #C15CFF, #FF5454); background: linear-gradient(to left, #C15CFF, #FF5454); border: 2px solid #af5ae3; color: #fff;}
#change_game_id_form button > span{display: block; margin-top: -3px;}
.help{padding: 0 1.5em 1.5em 1.5em; font-size: .938em; line-height: 1.6;}

/*2023 12 04 추가*/
.mypage_w .account_m.pointBg{background: url('../images/title_point_bg.png') no-repeat 50% 50%; background-size: cover; position: relative;}
.mypage_w .account_m.pointBg:after{position: absolute; content: ""; left: 0; top: 0; width: 100%; background: rgba(0,0,0,.25); height: 100%; z-index: 1;}
.mypage_w .account_m > *{z-index: 3 !important}