@charset "utf-8";

#wrap {position:relative;}

#header {border-bottom:1px solid #dedede; height:120px;}
#header h1 {text-align:center; padding-top:15px;}
#header h2 {position:absolute; left:3%; top:0;}
#header h4 {position:absolute; right:3%; top:13px;}

.btn_top {margin:0 auto; width:40%; padding-top:5%;}
.btn_top a {display:inline-block; font-size:13px; color:#777; font-weight:600; text-align:center; border:1px solid #ddd; width:100%; height:36px; line-height:36px; border-radius:36px;}
#footer {position:relative; background:#f1f1f1; border-top:1px solid #e4e4e4; text-align:center; margin-top:7%;}
#footer ul {height:20px; padding:25px 0 10px 0; display:inline-block;}
#footer ul li {float:left; background:url("../../images/common/foot_navline.gif") no-repeat left center; padding:0 7px;}
#footer ul li:first-child {background:none; padding-left:0;}
#footer ul li a {font-size:13px; color:#555;}
#footer address {font-size:13px; color:#555; line-height:20px; padding-bottom:25px;}
#footer address span {color:#000; font-weight:600;}


/* main */
#content {position:relative; margin: 0 auto; max-width: 630px;}
#content:after {clear:both; content:""; display:block;}
#content .main_slide {position:relative;}
#content .main_slide .bx-pager {position:absolute; left:0; bottom:12px; width:100%; text-align:center;}
#content .main_slide .bx-pager .bx-pager-item {display:inline-block; padding:0 4px;}
#content .main_slide .bx-pager .bx-pager-item a {display:inline-block; width:10px; height:10px; background:url("../images/main/visual_off.png") no-repeat; background-size:10px 10px; text-indent:-9999px;}
#content .main_slide .bx-pager .bx-pager-item a.active {background:url("../images/main/visual_on.png") no-repeat; background-size:10px 10px;}
h2#container_title {font-size:18px; padding:25px 10px 5px 10px; margin:0; text-align:center;}

.main_slide #bx-pager {width:100%; height:72px;}
.main_slide #bx-pager a {float:left; width:33.3%; height:36px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:36px; text-align:center; box-sizing:border-box; border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
.main_slide #bx-pager a:first-child {border-left:none;}
.main_slide #bx-pager a:nth-child(4) {border-left:none;}
.main_slide #bx-pager a.active {background-color:#f9f9f9; color:#000;}



ul.main_chart {padding:5% 2%; border-bottom:8px solid #eee;}
ul.main_chart:after {clear:both; content:""; display:block;}
ul.main_chart li {float:left; width:46%; padding:2% 2% 2% 2%;}
ul.main_chart li h2 {font-size:16px; color:#000; text-align:center; padding-bottom:10px;}
ul.main_chart li h4 {}
ul.main_chart li p {text-align:left; font-size:13px; line-height:18px; height:45px; overflow:hidden; padding-top:10px;}

div.chart_weekly {padding:2% 0; border-bottom:8px solid #eee;}
div.chart_weekly div.weekly_tit { text-align:center; font-weight:600; font-size:18px; color:#000; position:relative; margin-bottom:12px; }
div.chart_weekly div.weekly_tit span.point {color:#f80000;}
div.chart_weekly div.weekly_tit span.date {font-size:13px; color:#444; font-weight:400; padding-top:4px; display:block;}
div.chart_weekly div.weekly_tit p {position:absolute; right:0; top:0; font-size:12px;}
div.chart_weekly div.weekly_cont {padding:0 4%; }
div.chart_weekly div.weekly_cont h2.tit {font-size:16px; color:#515152c; font-weight:bold; text-align:center; padding-bottom:12px;}

div.chart_weekly table .table_title { text-align:left; font-weight:600; font-size:18px; color:#000; position:relative; /*margin-top:12px; */ }

div.chart_weekly div.weekly_cont ul {border-top:2px solid #ddd;}
div.chart_weekly div.weekly_cont ul li {width:100%; height:50px; display:table; border-bottom:1px solid #ddd; padding:10px 0;}
div.chart_weekly div.weekly_cont ul li h2 {display:table-cell; width:50px; vertical-align:middle;}
div.chart_weekly div.weekly_cont ul li h2 img {width:50px; height:50px;}
div.chart_weekly div.weekly_cont ul li h3 {font-size:12px; color:#000; font-weight:600; display:table-cell; width:50px; text-align:center; vertical-align:middle;}
div.chart_weekly div.weekly_cont ul li h3 span {font-size:12px; color:#888; padding-top:3px; display:block;}
div.chart_weekly div.weekly_cont ul li h4 {font-size:13px; color:#000; display:table-cell; vertical-align:middle;}
div.chart_weekly div.weekly_cont ul li h4 span {font-size:12px; color:#888; padding-top:5px; display:block;}
div.chart_weekly div.weekly_cont ul li h5 {display:table-cell; vertical-align:middle; width:40px; text-align:center;}
div.chart_weekly div.weekly_cont ul li h5 img {width:24px;}

ul.main_banner {border-bottom:8px solid #eee; padding:6% 4% 3% 4%;}
ul.main_banner li {}
ul.main_banner li img {width:100%; margin-bottom:3%; border:1px solid #e5e5e5;}

div.main_video {border-bottom:8px solid #eee; padding:6% 4%; text-align:center;}
div.main_video h2 {font-weight:600; font-size:18px; color:#000; padding-bottom:13px;}
div.main_video h4 {font-size:13px; padding-top:10px;}

div.main_notice {padding:6% 4%;}
div.main_notice h2 {position:relative; font-weight:600; font-size:18px; color:#000; padding-bottom:13px;}
div.main_notice h2 span {position:absolute; right:0; top:-3px;}
div.main_notice ul {padding:10px 0; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0;}
div.main_notice ul li {position:relative; padding-left:10px; height:24px; line-height:24px; background:url("../../images/m/main/bullet_notice.gif") no-repeat left center; background-size:3px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
div.main_notice ul li a {display:inline-block; line-height:24px; font-size:12px; color:#666; font-weight:600; }

div.line_banner {border-bottom:8px solid #eee;}

/* login */
#login {background-color:#f0f0f0; width:70%; padding:12% 15%;}
#login .login_cont {}
#login .login_cont h2 {padding-bottom:20px;}
#login .login_cont h3 {padding-bottom:5px;}
#login .login_cont h3 input {box-sizing:border-box; width:100%; height:40px; line-height:40px; padding-left:12px; background-color:#fff; border:1px solid #ddd; font-size:13px; color:#666;}
#login .login_cont h4 {padding-top:5px; padding-bottom:10px;}
#login .login_cont h4 input {border:none; width:100%; height:44px; line-height:44px; background-color:#ea9b18; color:#fff; font-size:14px; font-weight:600; text-align:center;}
#login .login_cont p {padding-bottom:20px;}
#login .login_cont p input {border:1px solid #000; width:16px; height:16px; margin-right:5px; background-color:#fff;}
#login .login_cont ul {text-align:center; border:1px solid #ddd; height:40px;}
#login .login_cont ul li {display:inline-block; line-height:40px;}
#login .login_cont ul li a {display:inline-block; font-size:13px; color:#777; padding:0 10px; }
#login .login_cont ul li:first-child a {border-right:1px solid #ddd;}


ul.board_gallery {border-top:1px solid #e5e5e5;}
ul.board_gallery li {padding:10px 4%; border-bottom:1px solid #e5e5e5;}
ul.board_gallery li:after {clear:both; content:""; display:block;}
ul.board_gallery li h3 {float:left; width:70px;}
ul.board_gallery li h3 img {width:70px; height:70px;}
ul.board_gallery li div {float:left; padding:10px 0 0 15px; width:calc(100% - 85px);}
ul.board_gallery li div h4 {font-size:14px; color:#333; font-weight:600; line-height:20px;}
ul.board_gallery li div p {font-size:13px; color:#888; padding-top:4px;}

div.view_tit {background-color:#f0f0f0; text-align:center; padding:22px 0; margin-top:15px;}
div.view_tit h2 {font-size:15px; color:#333; font-weight:600;}
div.view_tit p {font-size:13px; color:#777; padding-top:10px;}
div.view_tit p span {display:inline-block; padding:0 6px;}



/*서브 스타*/
ul.star_menu {margin:0 4%; width:92%; height:48px; display:table; border-collapse:collapse; margin-bottom:25px;}
ul.star_menu li {display:table-cell; vertical-align:middle; width:150px; border:1px solid #b7b7b7; text-align:center; line-height:14px; box-sizing:border-box;}
ul.star_menu li a {font-size:12px; color:#777;}
ul.star_menu li.on,
ul.star_menu li:hover {border:3px solid #d4ab73;}
ul.star_menu li.on a,
ul.star_menu li:hover a {color:#000;}
ul.star_menu.menu4 li {width:300px;}
ul.star_menu.menu5 li {width:240px;}
ul.star_menu.menu6 li {width:200px;}

div.star_profile {border-bottom:12px solid #eee; padding:0 4%; position:relative; margin-bottom:40px; margin-top:30px;}
div.star_profile:after {clear:both; content:""; display:block;}
div.star_profile h2 {padding-bottom:30px;}
div.star_profile div.profile_cont {padding-bottom:40px; }
div.star_profile div.profile_cont h3 {position:relative; font-size:26px; padding-bottom:12px; margin-bottom:10px; color:#000; /*font-family:'NanumSquareBold';*/ border-bottom:1px solid #d8d8d8;}
div.star_profile div.profile_cont h3 span {position:absolute; right:0; top:0;}
div.star_profile div.profile_cont h3 span a {font-size:14px;}
div.star_profile div.profile_cont ul {}
div.star_profile div.profile_cont ul li {line-height:30px; font-size:14px;}
div.star_profile div.profile_cont ul li span {display:inline-block; font-size:13px; width:100px;}
div.star_profile div.profile_cont dl.btn {position:absolute; right:0; top:55px; width:180px;}
div.star_profile div.profile_cont dl.btn dd {padding-bottom:8px;}
div.star_profile div.profile_cont dl.sns {position:absolute; right:0; bottom:0; height:30px;}
div.star_profile div.profile_cont dl.sns dd {float:left; padding-left:6px;}

ul.star_tab {height:40px; display:table; border-collapse:collapse; margin-bottom:30px;}
ul.star_tab li {display:table-cell; width:240px; border:1px solid #e3e3e3; text-align:center; line-height:40px; box-sizing:border-box;}
ul.star_tab li a {display:inline-block; width:100%; font-size:13px; color:#777;}
ul.star_tab li.on {border-bottom:3px solid #ff0000;}
div#star_detail {padding:0 4%; padding-bottom:50px;}
div#star_detail div {font-size:13px; line-height:24px; padding:0 15px; color:#666;}
div#star_song {padding:0 4%; padding-bottom:50px;}
div#star_song .chart_weekly {padding:0; border:none;}
div#star_video {padding:0 4%; padding-bottom:50px;}
div#star_video dl {height:280px; margin-left:-52px;}
div#star_video dl dd {float:left; margin-left:52px;}
div#star_video dl dd p {font-size:13px; text-align:center; padding-top:12px;}
div#star_news {padding:0 4%; padding-bottom:80px;}
div#star_news .news_cont {border-bottom:1px solid #e3e3e3; min-height:400px; text-align:center;}
div#star_news .news_btn {text-align:center; padding-top:25px;}
div#star_news .news_btn a {padding:0 4px;}

h2.sub_tit {padding-top:20px; font-size:16px; color:#515152c; font-weight:bold; text-align:center; padding-bottom:12px;}




ul.chart_ranking {display:table; border-collapse:collapse; width:92%; margin:6% 4% 0 4%;}
ul.chart_ranking li {display:table-cell; width:25%; border:1px solid #b7b7b7; padding:7px 0; text-align:center; line-height:18px; box-sizing:border-box;}
ul.chart_ranking li a {font-size:13px; color:#777; word-break:keep-all;}
ul.chart_ranking li.on {border:3px solid #d4ab73;}
ul.chart_ranking li.on a {color:#000;}

div.chart_search {margin-bottom:20px;}
div.chart_search table {border:1px solid #ddd; width:92%; margin:0 4%;}
div.chart_search table th {border:1px solid #ddd; padding:12px; font-size:14px; width:15%; background-color:#f5f5f5;}
div.chart_search table td {border:1px solid #ddd; padding:12px; vertical-align:middle;}
div.chart_search table td input[type=text] {height:28px; border:1px solid #ccc; padding:0 5px; }
div.chart_search table td input[type=checkbox] {height:16px; width:16px; border:1px solid #ccc; margin-left:3px;}
div.chart_search table td select {height:30px; border:1px solid #ccc; padding:0 5px; margin-right:3px;}
div.chart_search table td h4 {padding-top:7px;}
div.chart_search p {color:#666; text-align:center; padding:20px 0; font-size:13px; border-bottom:1px solid #aaa;}
div.chart_search p a {margin-left:10px; display:inline-block; width:70px; height:34px; line-height:34px; background-color:#666; color:#fff; font-size:13px; font-weight:600; text-align:center; border-radius:5px;}

div.search_output {}
div.search_output h2 {font-size:14px; color:#666; margin-bottom:25px;}
span.black {color:#000;}
span.pink {color:#ff4d83;}
span.blue {color:#2222ff;}
div.search_output li {border-top:1px solid #ccc; padding:30px 4%;}
div.search_output h4 {color:#666; font-size:15px; line-height:25px; padding-bottom:10px;}
div.search_output table {}
div.search_output table th {border:1px solid #ddd; padding:12px; font-size:14px; background-color:#f5f5f5;}
div.search_output table td {border:1px solid #ddd; padding:12px; vertical-align:middle;}
div.search_output table td input[type=text] {height:28px; border:1px solid #ccc; padding:0 5px; margin-right:10px;}

div.chart_menu h2.tit {font-size:20px; color:#515152c; font-weight:bold; text-align:center; padding-bottom:12px;}
div.chart_menu ul li {float:left;}
div.chart_menu ul li a {font-size:16px; padding-bottom:3px; color:#000; margin-right:26px; /*font-family:'NanumSquare';*/}
div.chart_menu ul li a.on {border-bottom:3px solid #e70000; color:#e70000;}
div.chart_menu h2 {text-align:center; font-size:16px; color:#000; /*font-family:'NanumSquareBold';*/}

.pop-wrap {overflow:hidden; position:fixed; top:50%; left:50%; width:560px; background:#fff; z-index: 10001; border:none}
.pop-wrap.pop_movie {width:500px;}
.pop-wrap.pop_music {width:900px;}
.btnp-close {position:fixed; left:50%; top:50%; margin-top:-155px; margin-left:300px;}