@charset "utf-8";

@import url("/css/global/common_sub.css");
@import url("/css/global/board.css");


body { color: #666; }
body, ul, ol, li, dt, dl, dd, div, h1, h2, h3, h4, h5, h6, p, form, fieldset, blockquote, iframe, input, object, table, tr, th, td, select, textarea { margin: 0; padding: 0; }
a { text-decoration: none;}
a:link, a:visited, a:active { color: #676767; text-decoration: none; }
img { border: none; }
button{ border:0 none;cursor:pointer; background-color: transparent; }
em { font-style: normal;}
table { table-layout: fixed; width: 100%;  border-collapse: collapse; border-spacing: none;}
caption { display: none; }

#accessibility a { position: absolute; top: -999px; left: 0; width: 200px; height: 24px; padding-top: 4px; background-color: #000; color: #fff; }
#accessibility a:hover { top: 0; }

#content {width:960px;margin:0 auto;}

.center_con { position: relative; width: 960px; margin: 0 auto;}

.center_middleArea ul li a ,
.center_middleArea ul li a em ,
.center_middleArea ul li a h5 ,
.center_middleArea ul li a span,
.center_middleArea ul li a span i ,
.center_bottomArea ul li a ,
.center_bottomArea ul li a strong ,
.center_bottomArea ul li a span ,
.center_bottomArea ul li a em ,
.center_bottomArea ul li a span i ,
.center_bottomArea .center_con div a ,
.center_noticeArea button ,
.center_noticeArea button span ,
.center_noticeArea button span i ,
.center_noticeArea .notice_list div {transition: all 0.2s ease;}

.center_topArea { position: relative; z-index: 2; width: 960px; margin: auto ;height: 295px;}
.center_topArea .center_con { height: 100%; background: url('/images/communication_center/main_bg.png') no-repeat right center; }
.center_topArea h4 { padding-top: 95px; font-size: 32px; color: #3f3f3f; text-align: left; font-weight: normal; letter-spacing: -2px; }
.center_topArea h4 span { padding-left: 10px; font-size: 32px; color: #4279ff; letter-spacing: -2px; font-weight: bold; }
.center_topArea h4 em { font-style: italic;}
.center_topArea p { margin-top: 15px; text-align: left; color: #4b4b4b; font-size: 18px; line-height: 1.4; letter-spacing: -1px; }

.center_noticeArea { padding: 40px 0; border-top: 1px solid #d1d1d1; }
.center_noticeArea h5 { position: absolute; top: 50%; left: 0; margin-top: -10px; font-size: 19px; color: #2b2b2b; letter-spacing: -1px; }
.center_noticeArea .notice_list { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 17px; margin: 0 105px 0 135px; color: #2b2b2b;}
.center_noticeArea .notice_list div {  opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=00); position: absolute; z-index: -1; width: 100%; top: 0;left: 0; left: 0; right: 0; }
.center_noticeArea .notice_list div.on { opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); z-index: 2;}
.center_noticeArea .notice_list div a { display: block; font-size: 14px; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center_noticeArea .notice_list div a span { padding-right: 15px;color: #999; vertical-align: -1px; }
.center_noticeArea button { position: absolute; top: 50%; right: 0; margin-top: -16px; padding: 7px 12px; font-size: 14px; color: #555; border: 1px solid #cdcdcd; border-radius: 2px; letter-spacing: -1px; max-width: 100px; margin-bottom: -2px;}
.center_noticeArea button span i { display: inline-block; height: 13px; width: 18px; margin-left: 6px; vertical-align: -2px; background: url('/images/communication_center/split_center2.png') no-repeat; background-position: -120px -700px; }
.center_noticeArea button:hover { color: #4279ff; border-color: #4279ff; }
.center_noticeArea button:hover span i { background-position: -90px -700px; }


.center_middleArea { background-color: #ebecf8; padding: 110px 0; min-height: 380px; }
.center_middleArea ul li { float: left; width: 300px; margin-left: 30px; text-align: center;}
.center_middleArea ul li:first-child { margin-left: 0; }
.center_middleArea ul li a { display: block; background-color: #fff; height: 380px; }
.center_middleArea ul li a em { display: block; height: 167px; padding-top: 33px; background-color: #6076a6; }
.center_middleArea ul li a em.st2 { height: 160px; padding-top: 40px; }
.center_middleArea ul li a em i { display: block ; margin: auto;  background: url('/images/communication_center/split_center2.png') no-repeat; }
.center_middleArea ul li a em.st1 i { width: 133px; height: 113px; background-position: 0 -795px;}
.center_middleArea ul li a em.st2 i { width: 126px; height: 129px; background-position: -140px -795px;}
.center_middleArea ul li a em.st3 i { width: 152px; height: 120px; background-position: -280px -795px;}
.center_middleArea ul li a h5 { margin: 25px 0 10px; font-size: 20px; color: #4b4b4b; }
.center_middleArea ul li a p { margin:0 10px 25px; font-size: 14px; color: #757575; line-height: 1.4; }
.center_middleArea ul li a span { display: inline-block; height: 30px; padding: 0 12px; color: #4279ff; font-size: 14px; line-height: 30px; border: 1px solid #4279ff; border-radius: 2px;}
.center_middleArea ul li a span i { display: inline-block; height: 13px; width: 18px; margin-left: 5px; vertical-align: -2px; background: url('/images/communication_center/split_center2.png') no-repeat; background-position: -120px -725px; }
.center_middleArea ul li a span { line-height: 28px; }

.center_middleArea ul li a:hover ,
.center_middleArea ul li a:hover em  { background-color: #4279ff; }
.center_middleArea ul li a:hover h5 { margin-top: -10px; font-size: 24px; color: #fff; }
.center_middleArea ul li a:hover p { color: #fff; }
.center_middleArea ul li a:hover span { border: 1px solid #fff; color: #fff; }
.center_middleArea ul li a:hover span i { background-position: -90px -725px;}
.center_middleArea ul li a:hover { -webkit-box-shadow: 2px 2px 40px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 2px 40px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 40px rgba(0, 0, 0, 0.3); }

.center_bottomArea { padding: 70px 0 110px; min-height: 164px; }
.center_bottomArea h5 { margin-bottom:  12px; font-size: 30px; text-align: center; color: #4279ff; }
.center_bottomArea p { margin-bottom: 60px; font-size: 18px;  text-align: center; color: #4b4b4b; }
.center_bottomArea ul { margin-right: 330px; }
.center_bottomArea ul li { }
.center_bottomArea ul li a { position: relative; display: block; padding: 36px 30px 36px 110px; margin-bottom: -1px; border: 1px solid #d1d1d1;  }
.center_bottomArea ul li a em { position: absolute; left: 30px; top: 23px; width: 62px; height: 62px; background:#6076a6 url('/images/communication_center/split_center2.png') no-repeat -24px -713px; border-radius: 31px; }
.center_bottomArea ul li:first-child a em { background-position: -137px -713px; }
.center_bottomArea ul li a strong { font-size: 20px; color: #4b4b4b; }
.center_bottomArea ul li a p { margin: 8px 0 0 0; font-size: 14px; text-align: left; color: #8f8e8e; }
.center_bottomArea ul li a span { position: absolute; right: 30px; bottom: 30px; display: inline-block; height: 30px; padding: 0 12px; font-size: 14px; line-height: 30px;border-radius: 2px; color: #555; border: 1px solid #cdcdcd;}
.center_bottomArea ul li a span i { display: inline-block; height: 13px; width: 18px; margin-left: 5px; vertical-align: -2px; background: url('/images/communication_center/split_center2.png') no-repeat; background-position: -120px -700px; }
.center_bottomArea ul li a span { line-height: 28px; }
.center_bottomArea .center_con div { position: absolute; right: 0; bottom: 0; width: 257px;height: 168px; padding: 35px 20px; border: 1px solid #d1d1d1; background-color: #ebecf8; }
.center_bottomArea .center_con div h6 { color: #4b4b4b; font-size: 20px; }
.center_bottomArea .center_con div p { margin: 10px 0 15px 0; line-height: 1.6; color: #757575; font-size: 14px; text-align: left; }
.center_bottomArea .center_con div a { display: block; margin-bottom: 25px; color: #4b4b4b; font-size: 13px; font-weight: bold; letter-spacing: -1px; }
.center_bottomArea .center_con div a span { font-size: 14px; text-decoration: underline; vertical-align: 0; }
.center_bottomArea .center_con div a + span { font-size: 14px; color: #6076a6; letter-spacing: -2px; }
.center_bottomArea .center_con div a + span i { padding-right: 5px; font-style: normal; font-size: 24px; font-weight: bold; }

.center_bottomArea ul li a:hover { z-index: 2; border: 1px solid #4279ff; }
.center_bottomArea ul li a:hover strong ,
.center_bottomArea ul li a:hover span { color: #4279ff; border-color: #4279ff; }
.center_bottomArea ul li a:hover span i { background-position: -90px -700px; }
.center_bottomArea ul li a:hover em { background-color: #4279ff; }
.center_bottomArea .center_con div a:hover { color: #4279ff; }


/* list */
.user_board { background: #fff url('/images/communication_center/user_board.png') no-repeat right 0 ; }
.bj_board { background: #fff url('/images/communication_center/streamer_board.png') no-repeat right 0 ; }
.bugreport { background: #fff url('/images/communication_center/bug_board.png') no-repeat right 0 ; }
.notice_center { background: #fff url('/images/communication_center/split_center2.png') no-repeat 460px -998px; }
.bestbj_board { background: #fff url('/images/communication_center/bg_bestbj_bbs.png') no-repeat 595px bottom; }
.board_header.notice { background: #fff url('/images/help/img_notice.png') no-repeat right 0; }


.benefit_wrap{position:fixed; top:50%; left:50%; background:#fff; width:670px; z-index:5000; transform:translate(-50%, -50%);}
.benefit{
	position:relative; width:670px;  z-index:500000;
	h5{font-size:18px;font-weight:bold;color:#fff;background:#038dc8;height:40px;line-height:40px;text-indent:10px;margin-bottom:10px;}
}
.benefit table{border:2px solid #9fd6ec; font-size:12px; text-align:center; color:#393939; width:647px; margin:0 auto 10px;}
.benefit table th.benefit_tit{color:#0296cd; font-weight:bold; height:30px; line-height:30px; text-align:center; font-size:12px;}
.benefit table th.bj_tit{font-weight:bold; background:#ebf6ff; margin-right:none; text-align:center; font-size:12px;}
.benefit table th, .benefit table td{border-bottom:1px dotted #9fd6ec; border-right:1px solid #9fd6ec;}
.benefit table td{padding:8px 0; font-size:12px;}
.benefit .btn_close{display:block; position:absolute; top:10px; right:10px; border:none; text-indent:-99999px; width:20px; height:20px; cursor:pointer; background: url(/images/star_bj/btn_close.gif) 0 0 no-repeat;}

.bg_pop{background:url("/images/star_bj/bgpop.png"); position:fixed; top:0; left:0; width:100%; height:1176px; z-index:1501 !important;}



/* **************************************** */
/* ???? (??? ???? ? css ?? ?? */
/* **************************************** */


html[dark=true] {    
    .center_topArea .center_con {background:url(/images/communication_center/main_bg_dark.png) no-repeat right center;}
    .center_topArea h4 {color:#e5e5e5;}
    .center_topArea h4 span {color:#7398ff;}
    .center_topArea p {color:#999;}
    .center_noticeArea {border-color:#212121;}
    .center_noticeArea h5 {color:#e5e5e5;}
    .center_noticeArea .notice_list div a {color:#999;}
    .center_noticeArea button {border-color:#333; color:#999;}
    .center_noticeArea button span i {background: url(/images/communication_center/split_center_dark.png) no-repeat; background-position:-120px -700px;}
    .center_noticeArea button:hover {color:#7398ff; border-color:#7398ff;}
    .center_noticeArea button:hover span i {background-position:-90px -700px;}
    .center_middleArea {background-color:#1b1b1c;}
    .center_middleArea ul li a {background-color:#222;}
    .center_middleArea ul li a em {background-color:#333;}
    .center_middleArea ul li a:hover, .center_middleArea ul li a:hover em {background-color:#6b85cf;}
    .center_middleArea ul li a span {border-color:#7398ff; color:#7398ff;}
    .center_middleArea ul li a span i {background: url(/images/communication_center/split_center_dark.png) no-repeat; background-position:-120px -725px;}
    .center_noticeArea ul li a:hover i {color:#fff; border-color:#fff;}
    .center_middleArea ul li a:hover span {border-color:#fff; color:#fff;}
    .center_middleArea ul li a:hover span i {background-position:-90px -725px;}
    .center_bottomArea h5 {color:#7398ff;}
    .center_bottomArea p {color:#999;}
    .center_bottomArea ul li a {border-color:#2e2e2f;}
    .center_bottomArea ul li a em {background-color:#333;}
    .center_bottomArea ul li a strong {color:#c8c8c8;}
    .center_bottomArea ul li a span {border-color:#333; color:#999;}
    .center_bottomArea ul li a span i {background-image:url(/images/communication_center/split_center_dark.png);}
    .center_bottomArea ul li a:hover {border-color:#7398ff;}
    .center_bottomArea ul li a:hover em {background-color:#7398ff;}
    .center_bottomArea ul li a:hover strong {color:#7398ff;}
    .center_bottomArea ul li a:hover span {border-color:#7398ff; color:#7398ff;}
    .center_bottomArea .center_con div {background-color:#1b1b1c; border-color:#2e2e2f;}
    .center_bottomArea .center_con div h6 {color:#c8c8c8;}
    .center_bottomArea .center_con div p {color:#999;}
    .center_bottomArea .center_con div a {color:#999;}
    .center_bottomArea .center_con div a:hover {color:#7398ff;}
    .center_bottomArea .center_con div a + span {color:#6b85cf;}

    .board_header {background-color:#0C0D0E; border-color:#1c1c1c;}
    .sub_area{border:none}
    .user_board {background:#0C0D0E url(/images/communication_center/user_board_dark.png) no-repeat right 0 ; }
    .bj_board { background:#0C0D0E url('/images/communication_center/streamer_board_dark.png') no-repeat right 0 ; }
    .bugreport { background:#0C0D0E url('/images/communication_center/bug_board_dark.png') no-repeat right 0 ; }
    .board_header.notice { background:#0C0D0E url('/images/help/img_notice_dark.png') no-repeat right 0; }
}


.tb_notice tr.noti td.title a {background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3e%3cpath fill-rule='evenodd' fill='%234279ff' d='M8 8V1h1v7H8zM6 2h1v5H6V2zM0 6V3h2l3-3v9L2 6H0z'/%3e%3c/svg%3e") 0 7px no-repeat; background-size:9px 9px; padding:0 0 0 13px;font-weight: bold;}

/* 알려드립니다. 통일 */
.bd_feed .v_article .title_area{background:#7ba8dd;padding:10px;border-radius:4px}
.bd_feed .v_article .title_area div{display:flex;align-items: baseline;}
.bd_feed .v_article .title_area div p{padding-left:25px;color:#fff;font-size:14px;word-break: break-word;background:url(/images/help/img_q.gif) 0 2px no-repeat;}
.bd_feed .v_article .title_area div span{min-width:130px;margin-left:auto;text-align:right;color:#fff}

html[dark=true] .bd_feed .v_article .title_area{background:#2e2e2f;}