@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/
/*@font-face { font-family: 'NanumSquareRound'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff'); font-weight: normal; font-style: normal; }*/
/*@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css");*/

/* Reset */
* {box-sizing: border-box;margin:0;padding:0;border:0;font-family: 'Noto Sans KR', sans-serif;font-size:1em;}/*color:#4D4D4D;*/
* {box-sizing: border-box;margin:0;padding:0;border:0;font-family:"AppleSDGothicNeo-Regular", "Malgun Gothic", "Dotum", "Gulim", "Helvetica", sans-serif;font-size:1em;}/*color:#4D4D4D;*/
.nonglass,
.nonglass *{background-color: transparent;}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption,canvas,summary {display: block}
button,input[type=submit],input[type=reset],input[type=button] {cursor:pointer;overflow:visible}
body {word-wrap:break-word;-webkit-text-size-adjust:none}
input[type="search"] {-webkit-appearance:textfield;box-sizing:content-box}
label {cursor:pointer}
legend{display:none}
acronym,
abbr {cursor:help}
h1,dl,dt,dd,h2,h3,h4,h5,h6,ul,ol,li,div,p {margin:0;padding:0;list-style:none;}
input,select,textarea {border:1px solid #cccccc;}
textarea{padding: 10px;}

a {text-decoration:none;}
a:link    {text-decoration:none;color:#444;}
a:visited  {text-decoration:none;color:#444;}
a:active {text-decoration: none;color:#444;}
a:hover {text-decoration: none;color:#444;}

button {border:0;outline: none;overflow: visible;margin: 0;padding: 0;background-color: transparent;}

/* ST common class ST */
.cf,
.clearfix {zoom:1}
.cf:after,
.clearfix:after{content:'';display:block;clear:both}
.left{float:left;}
.right{float:right;}
.hide{display:none;}
.text{border-bottom: rgb(157,157,157) 1px solid; border-left: rgb(157,157,157) 1px solid; border-right: rgb(157,157,157) 1px solid; border-top: rgb(157,157,157) 1px solid;font-size:12px;}
.es{font-weight:normal;color:red;}
.annotation{margin-left: 5px;color: #9E9DA1;font-size:11px;line-height: 13px;}
.bold{font-weight:bold;}
.uline{text-decoration: underline;}

/* btn_basic */
.btn_basic{display:inline-block;width: auto;height: 30px;font-size: 0.9rem;line-height: 1.5rem;padding: 0px 15px;border: 1px solid #b2b1b4;color: #666666;text-align: center;background-color: #fff;}
.btn_basic a{color: #666666;}



.btn_basic.xs {color: #666666;height: 24px;line-height: 24px;padding: 0px 5px;font-size: 11px;}
.btn_basic.s  {color: #666666;height:26px/*1.563rem*/;line-height: 0.7rem;padding: 0px 10px;font-size: 0.7rem;}
.btn_basic.xl {color: #666666;height:2em;line-height: 1.1em;padding: 0px 20px;font-size: 1.1rem;border: 1px solid #777;}
.btn_basic.xxl{color: #666666;height:3em;line-height: 1.1em;padding: 0px 20px;font-size: 1.1rem;border: 1px solid #777;}
.btn_basic.gray{background-color:#efefef}
.btn_basic.blue{background-color:#4e94ff;color:#ffffff;border:1px solid #4e94ff;}
.btn_basic.red{background-color:#e64343;color:#ffffff;border:1px solid #e64343;}


.btn_basic.disabled{color: #ccc;border-color:#ccc;cursor:wait;}
/* jquery validator 에러 메세지 박스*/
.err_msg_box{color:#FF5C5C;margin-top:10px;}
.error{color: #FF5C5C;font-size: 0.8em;cursor: default;padding-left:3px;font-weight:bold;}

/* 이미지 사이즈 */
.full {width:100%;}
.half {width:50%;}
.quarter {width:25%;}
.loader{display:none;}
/* ED common class Ed */

div#wrapper {margin:0 auto;padding:10px;padding-top:0;background: #ffffff;}

/* ST common style ST */
/* global-top */
.global-top {width:100%;height:60px;background-color:#f8f8f8;border-bottom: 1px solid #ddd;}
.global-top .wrapper{margin:0 auto;padding:0 10px;}
.global-top .ci {float:left;font-size: 1.5rem;display:inline-block;position:relative;}
.global-top .ci span{display:inline-block;float:left;line-height:60px}/*font-family: NanumSquareRound;*/
.global-top .ci .pre {color:#565657;font-weight:bold;}
.global-top .ci .eyes {color:#4e94ff;font-weight:bold;line-height:57px;font-size:1.6rem;}/*line-height: 54px;font-size:1.8rem;*/
.global-top .ci .mouse {color:#4e94ff;font-weight:bold;}/*line-height:67px;*/
.global-top .ci .post {color:#565657;font-weight:bold;}/*color:#565657;*/
.global-top .ci .remember0416{position:absolute;top:16px;right:-25px;width:25px;}
.global-top .ci .remember0416 img{width:100%}
.global-top .top_banner{float: right;height: 50px;width: 320px;margin-top:5px;}

/* 20200730 jjacks edit
.global-top #gnb {float:left;margin-left: 50px;display:inline-block;}
.global-top #gnb #menu {padding:0;margin:0;list-style:none;}
.global-top #gnb #menu li {display:inline-block;font-size:0.95rem;margin-left:10px;line-height: 57px;}
.global-top #gnb #menu li:first-child {margin-left:0px;}
.global-top #gnb #menu li a {text-decoration:none;color:#585858;font-weight:bold;}
.global-top #gnb #menu li.on {border-bottom:solid 3px #4e94ff}
.global-top #gnb #menu li.on a {color:#4e94ff;font-weight:bold;}  */
/*.global-top #gnb #menu li:hover {border-bottom:solid 3px #4e94ff}
.global-top #gnb #menu li:hover a {color:#4e94ff;font-weight:bold;}*/

/* s 20200730 jjacks new GNB */
/*.gnb_ar{width: 100%; border-bottom: 1px solid #ddd; background: #f8f8f8; position: relative;}*/
.gnb_ar .inner{max-width: 1200px;margin: 0 auto; padding: 0 10px;}
.gnb_ar #gnb {margin-left: 0px;display:inline-block;}
.gnb_ar #gnb #menu {padding:0;margin:0;list-style:none;font-family: 'Noto Sans KR', sans-serif;}
.gnb_ar #gnb #menu li {display:inline-block;font-size:1rem;margin-left:10px;line-height: 57px;}
.gnb_ar #gnb #menu li:first-child {margin-left:0px;}
.gnb_ar #gnb #menu li a {font-family: 'Noto Sans KR', sans-serif;text-decoration:none;color:#585858;font-weight:bold;}
.gnb_ar #gnb #menu li.on {border-bottom:solid 3px #4e94ff}
.gnb_ar #gnb #menu li.on a {color:#4e94ff;font-weight:bold;}
/* e 20200730 jjacks new GNB */

.global-top ul.utils {float:right;display:inline-block;padding:0;margin:0;list-style:none;}
.global-top ul.utils li {display:inline-block;width: 35px;font-size:1.2rem;line-height:37px;text-align: center;}
.global-top ul.utils li span > .fa {text-decoration:none;color:#999999;}
.global-top ul.utils li.on span > .fa {color:#444444;}
.global-top ul.utils li.on.blue span > .fa {color:#4e94ff;}

/*
.global-top .search {float:right;line-height:18px;}
.global-top .search input[type="search"] {width:160px;height:18px;border:2px solid #e1e1e3;font-size:0.7em;}
.global-top .search button[type="submit"] {width:30px;height:22px;border:2px solid #dbdbdb;font-size:0.7em;font-weight:bold;color:#888888;vertical-align:bottom;}
*/



/* account-area */
.account_wrapper {right:0;margin:5% auto;max-width:400px;position:relative;}
.account_wrapper h1{margin-bottom: 30px;border-bottom:solid #585858  2px;padding-bottom:10px;font-weight:normal;text-align:center;font-size:1.5rem;color: #4d4d4d;}
.account_wrapper .content{margin:20px 0;}
.account_wrapper .content .form_wrapper{margin:0 auto;position:relative;text-align:center;min-width:280px;}/*padding:25px 0 0;*/
.account_wrapper .content .form_wrapper form{position:relative;}
.account_wrapper .content .form_wrapper h1 {font:400 25px Helvetica,Arial,sans-serif;letter-spacing:-.05em;line-height:20px;margin:10px 0 30px;}
.account_wrapper .content .form_wrapper form input[type=text],
.account_wrapper .content .form_wrapper form input[type=email],
.account_wrapper .content .form_wrapper form input[type=password],
.account_wrapper .content .form_wrapper form input[type=number] {border-radius:3px;border:1px solid #c8c8c8;color:#777;margin:0 0 10px;width:100%;}
.account_wrapper .content .form_wrapper form div a {font-size:12px;margin:10px 15px 0 0;}
.account_wrapper .content .form_wrapper h1 {font:400 25px Helvetica,Arial,sans-serif;letter-spacing:-.05em;line-height:20px;margin:10px 0 30px;}
.account_wrapper .content .form_wrapper .form-control {display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;}
.account_wrapper .content .form_wrapper .check {font-size:0.77rem;text-align:left;margin-bottom: 7px;}
.account_wrapper .content .form_wrapper .check input {margin-left:2px;position: relative;top: 1.3px;}
.account_wrapper .content .form_wrapper .separator {border-top:1px solid #D8D8D8;margin-top:20px;padding:10px;}
.account_wrapper .content .form_wrapper .separator p {font-size:0.9rem;}
.account_wrapper .content .form_wrapper .separator p.good {color:#019bdb;font-weight:bold;}
.account_wrapper .content .form_wrapper .separator p.fuck {color:#f31717c4;font-weight:bold;}
.account_wrapper .content .form_wrapper .separator p.warn {color:#f31717c4;font-weight:bold;}
.account_wrapper .content ul.info,
.account_wrapper .content ul.info_sub{margin-bottom: 30px;}
.account_wrapper .content ul.info li{font-size:0.8rem;color:#484848}
.account_wrapper .content ul.info_sub li{font-size:0.8rem;color:#999999}

.account_wrapper.sns h1 img{width: 40px;vertical-align: middle;margin-bottom: 4px;}
.account_wrapper.sns .content .form_wrapper .form-control {display:inline-block;width:70%;}
.account_wrapper.sns .content .form_wrapper form label {display:inline-block;width:20%;text-align:left;}

.account_wrapper .sns_login_btn{text-align:center;}




/* header */
header {text-align:center;}
header section#header {font-size:2em;font-weight:bold;line-height: 100px;}
header section#header a:link,
header section#header a:visited,
header section#header a:active,
header section#header a:hover {text-decoration:none;color:#4D4D4D;line-height:100px;}
header:after {content:"";display:block;clear:both;}
header .logo{vertical-align:middle;width:50px;height:50px;}
header #googirl{}
header .sn{}

.head{position:relative;background-color:#ffffff/*#393C45*/;border-bottom:0px solid #999;margin-bottom:15px;padding:8px 0;}

.head h2.head_name{font-size:0.9rem;font-weight:normal;font-family:"Nanum Gothic";}
.head h2.head_name .desc{font-size:0.81rem;color:#616161;font-family:"Nanum Gothic";}

div#container {margin-top:10px;}/*min-height: 600px;*/

/* footer */
footer {text-align:center;border-top:1px solid #3F4651;}
footer ul.functional{margin: 20px 0;}
footer ul.functional li{display:inline-block;text-align:center;padding: 0 5px;}
footer ul.functional li a{display:inline-block;text-align:center;font-size:1rem;}

/* member area*/
.member_area {margin:0 auto;}
.member_area ul.tabs {margin:0;padding:0;list-style:none;height:32px;font-family:"dotum";font-size:0.75em;border-left:1px solid #ccc;border-right:1px solid #ccc;}
.member_area ul.tabs li {float:left;position:relative;text-align:center;cursor:pointer;width:25%;height:31px;line-height:31px;border:1px solid #ccc;border-left:none;background:#fafafa;overflow:hidden;font-size:1.1em;}
.member_area ul.tabs li:last-child {border-right:0;}
.member_area ul.tabs li.active {background:#FFFFFF;border-bottom:1px solid #FFFFFF;width:25%;font-weight: bold;}
.member_area ul.tabs li>span {position:relative;}
.member_area ul.tabs span.feedback_new {color:red;position:absolute;top:-7px;right:-12px;}
.member_area .tab_contents {border:1px solid #ccc;border-top:none;background:#FFFFFF;}
.member_area .contents {position:relative;height:160px;padding:5px;font-size:0.75em;;overflow-x:hidden;overflow-y:auto;text-align:left;}
.member_area .contents .logout{position:absolute;bottom:10px;right:10px;font-size: 0.72rem;text-decoration: underline;}
.member_area .contents .talk_link{position:absolute;top:10px;right:10px;font-size: 0.72rem;}
.member_area .contents .talk_link > i.fa-envelope{color:#4e94ff}

.member_area .contents ul.feedback {width:100%;margin:0px;padding:0px;}
.member_area .contents ul.feedback li {margin-left:5px;color:#767676;text-align:left;}
.member_area .contents ul.feedback li a{display:inline-block;width:100%;padding-right: 50px;position:relative;line-height:1.4rem;font-size:0.8rem;color:#767676;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:middle;text-align:left;}
.member_area .contents ul.feedback li a .count{display:inline-block;position:absolute;top:0;right:0}
.member_area .contents ul.feedback li a .new{color:#ff0606}
.member_area .contents dl.mission{overflow:hidden;font-size: 13px;margin-left: 5px;margin-right: 2px;}
.member_area .contents dl.mission dt{float:left;width:100%;height: 30px;line-height: 30px;font-size:13px;}
.member_area .contents dl.mission dt span.detail{display: inline-block;border: solid #ccc 1px;color: #0065ff;width: 16px;height: 19px;text-align: center;font-weight: bold;line-height: 20px;vertical-align: bottom;margin-left: 5px;}
.member_area .contents dl.mission dd{float:right;position: relative;}
.member_area .contents dl.mission ul {overflow:hidden;width:75px;position: absolute;right: 0;}
.member_area .contents dl.mission ul li{list-style: none;}
.member_area .contents dl.mission ul li.reward{float:left;line-height: 30px;height: 30px;}
.member_area .contents dl.mission ul li.button{float:right;line-height: 30px;height: 30px;}
.member_area .contents dl.mission.complete *{color: #bbb;}

/* recent box */
section.sn {position: relative;margin-bottom:20px;width:100%;}
section.sn h2 {width:100%;font-size:0.9em;margin-bottom:10px;padding:5px 0;border:1px solid #B2B1B4;}
section.sn h2 span {margin-left:10px;}

section.sn .login-before{padding:1.0rem 0;padding-bottom:0;border:0;text-align: center;}
section.sn .login-before .login_button{display:inline-block;padding:0 0px 10px;border-bottom:solid 1px #b2b1b4}
section.sn .login-before h3{margin-bottom:7px;font-weight: normal;font-size: 0.9rem;}
section.sn .login-before a img{width: 42px;height:auto;border-radius: 50%;}
section.sn .login-before .login_button{text-align:center;}

section.sn .login-after {padding: 1.5em 0;height:5em;border:1px solid #ccc;text-align: center;}
section.sn ul {margin-left:5px;}
section.sn ul li{font-size:0.75rem;line-height:1.2rem;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;height: 19px;}
section.sn .more{position: absolute;top: 8px;right: 8px;font-size: 0.75rem;}

/* noti layer */
section.sn .noti_wrap{position: absolute;top: 0;left: 0;background-color:#ffffff;width: 100%;height: 100%;z-index: 1;border: 1px solid #ccc;}
section.sn .noti_wrap .noti {position:absolute;top:50%; left:50%;transform: translate(-50%, -50%);width: 100%;background-color:#ffffff;}
section.sn .noti_wrap .noti.levelup{z-index: 3;}
section.sn .noti_wrap .noti.talk{z-index: 2;}
section.sn .noti_wrap .noti.mission{z-index: 1;}
section.sn .noti_wrap .noti .txt {text-align:center;font-size:13px;height: 50px;line-height: 50px;font-weight:bold}
section.sn .noti_wrap .noti .btn {text-align:center;}

 /* result */
.result {margin-bottom:30px;}
.result h1 {font-size:1.1em;color:#585858;border-bottom:1px solid #D6D6D6;padding-bottom:7px;}
.result .item {float:right;}

.result .item ul {list-style:none;padding-bottom:4px}
.result .item ul li {display: inline;margin-right:0px;}
.result .item ul li a {color:#D3D3D3;font-size:0.75em;text-decoration:none;background:#ffffff;border:1px solid #D3D3D3;padding:5px 7px;border-radius:5px;}
.result .item ul li a:hover {padding:5px 7px 5px 7px;}
.result .item ul li a.selected {color:#666666;background:#f7f7f7;border:1px solid #999999;padding:5px 7px 5px 7px;}

.result .result-list {}
.result .result-list ul {margin-top:15px;}
.result .result-list ul li {font-size:0.9em;color:#767676;margin-bottom:10px;}
.result .result-list ul li .subject{color:#767676;display:inline-block;overflow:hidden;width:80%;white-space:nowrap;text-overflow:ellipsis;}
.result .result-list ul li .date{float:right;display:inline-block;font-size:0.85em;color:#999999;margin-bottom:5px;letter-spacing:-1px;}
.result .result-list ul li .on{font-weight:bold;color:#FF5C5C;}


/* account */
.account {margin-bottom:30px;}
.account h1 {font-size:1.1em;color:#585858;border-bottom:1px solid #D6D6D6;padding-bottom:7px;}
.account form {display:inline-block;margin:20px 10px 10px 10px;vertical-align:top;}
.account .box{width:295px;height:130px;border:2px solid #D6D6D6;padding:0 10px 10px 10px;}
.account .box legend {padding:0 10px;font-size:0.9em;font-weight:bold;margin-bottom:0px;}
.account .box dl {margin-top:20px;}
.account .box dl dt{display:inline-block;width:75px;font-size:0.75em;color:#585858;}
.account .box dl dt.hide{display:none;}
.account .box dl dd{font-size:0.75em;color:#585858;vertical-align:top;}
.account .box .summary{font-size:0.75em;color:#585858;margin:10px 0 15px 0;}
.account .box .quick_link{margin-bottom:10px;text-align:right;}
.account .box .quick_link a{font-size:0.75em;color:#585858;border-bottom:1px solid #585858;}
.account input[type="text"],
.account input[type="password"]{display:block;margin-bottom:5px;width:150px;height:14px;border-radius:3px;color:#3a454d;font-size:1.2em;padding:2px;}
.account .btn_basic{height:20px;line-height:20px;padding:0 4px;letter-spacing:0;font-size:1.1em;}
.account input.last{display:inline;margin-bottom:0px;margin-right:10px;}

/* member */
.member section.box{border: solid 1px #ccc;float: left;width: 47.9%;margin: 0 10px 20px 10px;padding: 13px;min-height:216px;}
.member section.box h1{font-size: 1.3rem;margin-bottom: 15px;}
.member section.box .content{padding-left: 15px;}
.member section.box dl{margin-bottom: 15px;}
.member section.box dl dt,
.member section.box dl dd{font-size: 1rem;line-height: 2rem;height: 2rem;font-size: 0.9rem;}
.member section.box dl dt{float: left;width: 30%;text-align: left;font-weight: bold;color: #666666;}
.member section.box dl dd{float: right;width: 70%;text-align: left;}
.member section.box .btn-area{}
.member section.box .btn-area ul{}
.member section.box .btn-area ul li{float:left;margin-left: 15px;}
.member section.box .info {margin-bottom: 15px;}
.member section.box .info li{font-size:0.75rem;list-style: disc;margin-bottom: 5px;}
.member section.box .info li strong{color:#3e8fff;font-weight:bold}
.member section.box input{height: 25px;padding-left: 5px;font-size: 0.75rem;min-width:200px;}
.member section.box .form .item{margin-bottom: 5px;}
.member section.box .form .item.center{text-align:center;}
.member section.box .desc{margin-top:15px;text-align:left;font-weight: bold;font-size: 0.9rem;}
.member section.box .desc.good{color: #019bdb;}
.member section.box .desc.fuck{color: #f31717c4}
.member section.box table{table-layout: fixed;}
.member section.box table thead{display:none;}
.member section.box table td{text-align:left;}
.member section.box table td.term{color: #999999;font-size: 0.85rem;}
.member section.box table td.nick{color: #555555;font-size: 0.9rem;}
.member section.box .sns_login{}
.member section.box .sns_login li{float: left;width: 33.3%;padding: 5px 0;}
.member section.box .sns_login li img{vertical-align: middle;}
.member section.box .sns_login li.off img{-webkit-filter: grayscale(100%);filter:gray;}
.member section.box .sns_login li a{display:inline-block;height:32px;line-height:32px;font-size:13px;}
.member section.box .sns_login li a.use{color:#ff3c3c;font-weight: bold;}
.member section.box .sns_login li a.using{color:#3e8fff;font-weight: bold;}
.member section.box .sns_login li a.none{color: #aaaaaa;}

@media all and (max-width:999px) {
	.member section.box{width:94.5%;}
	.member section.box .btn-area ul li{margin-left: 5px;}
}


/* autocomplete */
.autocomplete-suggestions {text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;}
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #f14340; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
.autocomplete-suggestion dl {margin-bottom: 5px;}
.autocomplete-suggestion dl dt{color:#585858;margin-bottom: -5px;}
.autocomplete-suggestion dl dd{color: #767676;font-size: 0.7rem;line-height: 0.7rem;}
.autocomplete-suggestion div.sub{color: #767676;font-size: 0.7rem;line-height: 0.7rem;}


/* autocomplete - tag */
.tag-aco-suggestions {text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;}
.tag-aco-suggestions .autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.tag-aco-suggestions .autocomplete-selected { background: #f0f0f0; }
.tag-aco-suggestions strong { font-weight: normal; color: #f14340; }
.tag-aco-suggestions .autocomplete-group { padding: 2px 5px; }
.tag-aco-suggestions .autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
.tag-aco-suggestions .autocomplete-suggestion dl {}
.tag-aco-suggestions .autocomplete-suggestion dl dt{color:#585858;display:inline-block}
.tag-aco-suggestions .autocomplete-suggestion dl dd{color: #767676;font-size: 0.7rem;line-height: 0.7rem;display:inline-block;margin-left:10px;}
.tag-aco-suggestions .autocomplete-suggestion div.sub{color: #767676;font-size: 0.7rem;line-height: 0.7rem;}

/* loading-indicator */
.loading_modal {position:absolute;z-index:100;background-color:hsla(0, 0%, 97%, 0.75);width: 100%;height:inherit;top: 0;left: 0;text-align: center;}
.loading_modal.on {display:table;}
.loading_modal.off {display:none;}
.loading-indicator {display:block;width:100%;z-index:120;display: table-cell;vertical-align: middle;color:#888;line-height: 25px;}
.loading-indicator > i.fa-pulse{color:#77adff;}


/* bottom navigation bar */
.fxibar {position: fixed;bottom: 0px;left: 0px;right: 0px;z-index: 1030;background-color: #f7f7f7;text-align: center;}
.fxibar hr{border-top: solid 1px #80b2ff;}
.fxibar ul{display: inline-block;}
.fxibar ul li{float: left;margin: 1px 15px 7px 15px;padding: 2px;position: relative;font-size: 1.4rem;}
.fxibar ul li i{color:#ccc}
.fxibar ul li span{display: inline-block;position: absolute;bottom: -9px;font-size: 11px;width: 30px;left: -2px;color:#ccc}
.fxibar ul li.nav_on i,
.fxibar ul li.nav_on span{color:#4D4D4D}

.fxibar.ss{position: fixed;bottom: 4px;left: 0px;right: 0px;z-index: 1030;background-color:#fff0;text-align: center;}
.fxibar.ss hr{border-top: solid 0px #80b2ff;}
.fxibar.ss ul{display: inline-block;}
.fxibar.ss ul li{float: left;margin: 1px 0px 1px 0px;padding: 0px;position: relative;font-size: 1.4rem;width:50px;}
.fxibar.ss ul li i{color:#ccc}
.fxibar.ss ul li span{display: inline-block;position: absolute;bottom: -9px;font-size: 11px;width: 30px;left: -2px;color:#ccc}
.fxibar.ss ul li.nav_on i,
.fxibar.ss ul li.nav_on span{color:#4D4D4D}
.fxibar.ss ul li img{width:35.2px;border-radius: 50%;background-color: #f0f0f0ed;}

.fxibar.ss.v10{bottom: 12px;}

/* ifrmae Aspect ratio (종횡비 혹은 가로세로비율 16:9)*/
/*세로 .iframe_wrapper{position:relative;width:100%;margin:0 auto;padding-bottom:calc(100%); overflow:hidden;}*/
.iframe_wrapper{position:relative;width:100%;margin:0 auto;padding-bottom:calc(56.25% + 44px); overflow:hidden;}
.iframe_wrapper iframe{width:100%;height:100%;position:absolute;top:55px;left:0;}
.gfy_ifr {padding-bottom:calc(56.25% + 44px);}
.gfy_ifr iframe{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}

/* modal */
.modal{display:none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;opacity: 1;background-color: rgba(36,36,36,0.7)}
.modal.on{display:none;}

/* member point level gauge */
.level_gauge_wrapper{position: absolute;bottom: 10px;left: 10px;}
.level{position: relative;padding-left: 15px;}
.level .title{position: absolute;bottom: 0;left: 0px;background-color: #3B70BF;width: 15px;line-height: 15px;text-align: center;font-size: 11px;border-radius: 3px;color: #ffffff;z-index: 1;font-weight: bold;}
.level .num{color: #777;line-height:18px;height:18px;margin-left: 7px; margin-right: 0px;font-size: 11px;font-family: "dotum";vertical-align:top;}
.level .progress {display: inline-block;position: absolute;width: 80%;height: 2px;margin-left: 0px;background-color: #dadada;bottom: 0px;left: 18px;}
.level .progress-bar{height: 2px;background: #4786E6;}

/* pop_nick*/
a.pop_nick{color:#3980ec;}

/* banner */
#main_banner{text-align:center;margin-bottom: 10px;}
#main_banner img{width: 100%;}

#wing_banner{text-align:center;margin-bottom: 10px;}
#wing_banner img{width: 100%;}

/* summernote 버그픽스 */
.note-toolbar.card-header{position:relative !important;}

/* pick */
.pick_cover {width: 100%; min-height: 600px; text-align: center; position: relative; background: url(../pick/img_bg_t.png) center center no-repeat; background-size: 100%;}
.pick_cover img{width: 100%;}
.pick_cover > i.vs{width: 30%; display: inline-block; padding-top: 170px;}
.pick_cover .btn_box{position: absolute; width: 100%; bottom: 40px;}
.pick_cover .btn_box > button{display: block;margin: 0 auto;width: 30%; height: 40px; border: 0; border-radius: 20px; background: #4690fc; color: #fff; font-size: 14px; font-weight: bold;}
.pick_cover .btn_box > button:first-child{margin-bottom: 20px;background: #222;}

.pick_body {display:none;  box-sizing: border-box;}
.pick_body .stage_wrap{text-align: center;overflow:hidden;-ms-overflow-style: none; /* IE and Edge */scrollbar-width: none; /* Firefox */}
.pick_body .stage_wrap::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}

.pick_body .stage {display:inline-block;text-align: center;width:100%;overflow: hidden; padding: 40px; box-sizing: border-box; position: relative;}
.pick_body .stage > i{display: inline-block; position: absolute; left: 50%; margin-left: -46px; top: 50%; margin-top: -32px;}
.pick_body .candidate {position:relative;width: 40%;cursor: pointer;height: 0;overflow: hidden;padding-bottom: 30%;  box-sizing: border-box;background-color: #000;}
.pick_body .candidate.item_1{float:left; border: 3px solid #ff345e; border-radius: 12px; overflow:hidden;}
.pick_body .candidate.item_2{float:right;  border: 3px solid #1dafff; border-radius: 12px; overflow:hidden;}
.pick_body .candidate.solo {display:inline-block;width: 50%;border: 3px solid #ff345e; border-radius: 12px; overflow:hidden;cursor: pointer;}

.pick_body .candidate .box{display: table;position: absolute;top: 0;left: 0; margin: 0 auto; text-align:center; width: 100%; height: 100%;}
.pick_body .candidate .box span {display: table-cell; vertical-align: middle; height: 100%;font-size: 18px;font-weight: bold;color: #ffffff;}
.pick_body .candidate .box span img {width: 100%; height: 100%; padding:0; overflow:hidden; display: inline;}
.pick_body .candidate .caption {position: absolute;bottom: 0;left: 0;width: 100%;text-align:center; background: rgb(54 54 54 / 54%); color: #fff; box-sizing: border-box;}

.pick_body .candidate img.pick_img{width:200px;height:150px;display:inline;}
.pick_body .pick_btn_set{margin-top:20px;}
.pick_body .abye_btn_set button.good{}
.pick_body .abye_btn_set button.fuck{}
.pick_body .stage_info {overflow:hidden; width: 100%; height: 42px; background: #ececec; border-radius: 21px;}
.pick_body .stage_info .info{width: 100%; text-align: center; position: relative;}
.pick_body .stage_info .info .round_num{line-height: 42px; font-size: 18px; font-weight: bold;}
.pick_body .stage_info .info > p{display: inline-block;position: absolute;font-size: 12px;font-weight: normal;right: 20px;color: #000;line-height: 40px;}
.pick_body .stage_info .navi{float:right}
.pick_body .stage {padding: 40px 50px;}


.pick_body .stage.win{background: url(../pick/img_bg_t.png) center center; background-size: cover; height: 700px; max-width: 840px;}
.pick_body .stage.win .vs{width: 60%; display: inline-block; margin-top: 43px;}
.pick_body .stage.win .vs > img{width: 100%;}

.pick_body .candidate.win{width: 40%; height: 30%; margin: 0 auto; position: relative; border-radius: 12px; overflow: hidden; display: inline-block;}
.pick_body .candidate.win .caption{font-weight: 500;font-size: 1em;margin-top: 15px;}
.pick_body .candidate.win .cont{margin-top: 5px;margin-bottom:17px;}
.pick_body .stage.win .pick_btn_set{margin-top: 30px;}
.pick_body .stage.win .btn_result{width: 30%; height: 40px; border: 0; border-radius: 20px; background: #4690fc; color: #fff; font-size: 14px; font-weight: bold;}
.pick_result{max-width:500px; margin:0 auto;}
.pick_result > h1{position: relative;}
.pick_result > h1 > span{display: inline-block; position: absolute; padding-left: 40px; font-size: 12px; right: 0; vertical-align: bottom; padding-top: 4px;}
.pick_result .in_tab{ width: 100%; padding: 20px 0; font-size: 0;}
.pick_result .in_tab > a{ display: inline-block; box-sizing: border-box; border: 2px solid #1dafff; text-decoration: none; color: #1dafff; font-size: 16px; font-weight: bold; padding: 15px 0; border-radius: 8px; background: #fff; text-align: center; width: calc(50% - 5px); margin-left: 10px; vertical-align: middle;}
.pick_result .in_tab > a:first-child{margin-left: 0;}
.pick_result .in_tab > a.active{background: #1dafff; color: #fff;}
.pick_result > p{padding-left: 26px; background: url(../pick/icon_t.png) left center no-repeat; background-size: 21px; line-height: 20px; font-size: 14px;}
.pick_result .btn_box{padding-top: 0px;}
.pick_result .btn_box > button{border: 0; height: 52px; border-radius: 26px; background: #222; color: #fff; font-size: 16px; font-weight: bold; width: 100%;}

.pick_result_ul{width: 100%; padding: 0px 0 20px 0; box-sizing: border-box;}
.pick_result_ul > li{width: 100%; height: 30px; background: #e9e9e9; padding: 0 15px; line-height: 30px; margin-top: 10px; list-style: none; border-radius: 15px; display: table; box-sizing: border-box;font-size: 15px; }
.pick_result_ul > li > span{display: table-cell; text-align: right; width: 50px;}
.pick_result_ul > li > span:first-child{width: calc(100% - 50px); text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.pick_result_ul > li.rank_1{height: 55px; background: #4690fc; color: #ffe13e; font-weight: bold; line-height: 55px;}
.pick_result_ul > li.rank_1 > span{color: #ffe13e;font-size: 22px;}
.pick_result_ul > li.rank_1 > span:nth-child(2){font-size: 15px;}
.pick_result_ul > li.rank_2{background: #c7ddfe; font-weight: bold;}
/*.pick_result_ul > li.rank_2 > span:nth-child(2){font-size: 22px;}*/
.pick_result_ul > li.rank_3{background: #c7ddfe; font-weight: bold;}
/*.pick_result_ul > li.rank_3 > span:nth-child(2){font-size: 22px;}*/


@media all and (max-width:640px) {
    .pick_cover > i.vs{width: 30%; display: inline-block; padding-top: 65%;}
    .pick_cover .btn_box{position: absolute; width: 100%; bottom: 40px;}
    .pick_cover .btn_box > button{width: 70%; height: 40px; border: 0; border-radius: 20px; background: #4690fc; color: #fff; font-size: 14px; font-weight: bold;}
    .pick_cover .btn_box > button:first-child{background: #222; margin-bottom: 10px;}

    .pick_body .candidate {position:relative;width: 100%;cursor: pointer;height: 0;overflow: hidden; padding-bottom: 70%;}
    .pick_body .candidate.item_2{margin-top: -20px;}
    .pick_body .candidate.solo{width:100%}
    .pick_body .stage > i{width: 30%; left: auto; margin:0 auto; position: relative; z-index: 10; margin-top: -20px;}
    .pick_body .stage > i > img{width: 100%;}


    .pick_body .stage.win{background: url(../pick/img_bg_t.png) center center; background-size: cover; height: auto; }
    .pick_body .stage.win .vs{width: 80%; display: inline-block; margin-top: 0;}
    .pick_body .stage.win .vs > img{width: 100%;}

    .pick_body .candidate.win{width: 60%; height: 100px; margin: 0 auto; position: relative; border-radius: 12px; overflow: hidden; display: inline-block; box-sizing: border-box; padding-bottom: 50%;}
    .pick_body .stage.win .btn_result{width: 80%; height: 40px; border: 0; border-radius: 20px; background: #4690fc; color: #fff; font-size: 14px; font-weight: bold;}
}

/* ST layout ST */
@media all and (max-width:999px) {
    /* wrapper */
    div#wrapper {}
    .wrapper {}
    /*div#wrapper {background-color: #fff;filter: invert(100%);}
    img {filter: invert(100%);}*/

    .global-top {width:100%;height:40px;background-color:#fff;border:0;border-bottom: 1px solid #ddd; }
    .global-top .wrapper{margin:0 auto;}
    .global-top .ci {float:left;font-size: 1.0rem;display:inline-block;position:relative}
    .global-top .ci span{display:inline-block;float:left;line-height:40px}/*font-family: NanumSquareRound;*/
    .global-top .ci .pre {color:#565657;font-weight:bold;}
    .global-top .ci .eyes {color:#4e94ff;font-weight:bold;line-height:37px;font-size:1rem;}/*line-height:54px;font-size:1.8rem;*/
    .global-top .ci .mouse {color:#4e94ff;font-weight:bold;}/*line-height: 67px;*/
    .global-top .ci .post {color:#565657;font-weight:bold;}
	.global-top .ci .remember0416{position: absolute;top: 10px;right: -18px;width: 17px;}
	.global-top .ci .remember0416 img{width:100%}
    .global-top .top_banner{display:none;}
    /* s 20200730 jjacks new GNB */
    .gnb_ar{width: 100%; height:40px;border-bottom: 1px solid #ddd; background: #f8f8f8; position: relative;}
    .gnb_ar .inner{text-align:center;}
    .gnb_ar #gnb {margin-left: 0px;display:inline-block;}
    .gnb_ar #gnb #menu {padding:0;margin:0;list-style:none;}
    .gnb_ar #gnb #menu li {display:inline-block;font-size:0.9rem;margin-left:10px;line-height: 37px;}
    .gnb_ar #gnb #menu li:first-child {margin-left:0px;}
    .gnb_ar #gnb #menu li a {text-decoration:none;color:#555555;font-weight:bold;}
    .gnb_ar #gnb #menu li.on {border-bottom:solid 3px #4e94ff;line-height: 35px;}
    .gnb_ar #gnb #menu li.on a {color:#4e94ff;font-weight:bold;} */
    /* e 20200730 jjacks new GNB */

    /* 20200730 jjacks edit
    .global-top #gnb {float:left;margin-left: 30px;display:inline-block;}
    .global-top #gnb #menu {padding:0;margin:0;list-style:none;}
    .global-top #gnb #menu li {display:inline-block;font-size:0.9rem;margin-left:10px;line-height: 37px;}
    .global-top #gnb #menu li:first-child {margin-left:0px;}
    .global-top #gnb #menu li a {text-decoration:none;color:#555555;font-weight:bold;}
    .global-top #gnb #menu li.on {border-bottom:solid 3px #4e94ff}
    .global-top #gnb #menu li.on a {color:#4e94ff;font-weight:bold;} */

    .global-top ul.utils{display:block;}

    /* header */
    header {width:100%;}

    /* container */
    div#container {width:100%;}
    section#content {width:100%;}
    nav#snb {width:100%}
    nav#snb .btn_write{display:none;}

    /* footer */
    footer {width:100%;}

    header {padding:10px 10px 0px 10px}
    header section.member_area{margin-bottom:0;}

    .rp_side{display:none;}
    .gg.rg_foot_m{margin-bottom: 20px;}
}
@media all and (min-width:768px) and (max-width:1024px) {
    /* deprecated */
    /* 768px 이상 1024px 이하 */
    /* wrapper */
    div#wrapper {width: 800px;}
    .wrapper {width:800px;}

    /* header */
    header {width:100%;}

    /* container */
    div#container {width:100%;}
    section#content {width:100%;}
    nav#snb {width:100%}
    nav#snb .btn_write{display:none;}
    /* footer */
    footer {width:100%;}

    header {padding:10px 10px 0px 10px}
    header section.member_area{margin-bottom:0;}

    .rp_side{display:none;}
    .gg.rg_foot_m{margin-bottom: 20px;}
}
@media all and (min-width:1000px) {
    /* 1000px 이상 */
    .gnb_ar{float:left;margin-left: 50px;}
    /* wrapper */
    div#wrapper {width:100%;max-width:1200px;}
    .wrapper {width:100%;max-width:1200px;}

    /* header */
    header {width:100%;height:20px;}
    .global-top ul.utils{display:none;}


    .head a.g_btn_write{display:none;}

    /* container */
    div#container {width:100%;position:relative;}
    div#container:after {content:"";display:block;clear:both;}
    section#content {float:left;position:relative;width:100%;margin-bottom:20px;padding-right:340px;}
    section#content.full {width:100%;padding-right:0;}
    nav#snb {position:absolute;top:0;right:0;width:320px;/*width:26%;*/}
    nav#snb .btn_write{width: 100%;font-size: 1em;margin-bottom: 10px;padding: 14px 0;border: 1px solid #ccc;}

    /* footer */
    footer {width:100%;}

    .rp_side{display:block;width:320px;height: 270px;}
    .rp_side.adfit{display:block;width:320px;height: 270px;margin-bottom:20px;padding: 10px 0;border:solid 1px #b2b1b4;}
}
/* ED layout ED */
.gg{text-align:center;}
.gg.rg_foot{margin-bottom: 20px;}
.gg.rg_cmt{margin-bottom: 10px;}
.gg.rg_cmt_m{margin-bottom: 10px;}
.gg.rp_side{margin-bottom: 20px;}