
/* CSS Document */



input, textarea, select, button, {font-size: 15px;line-height: 1.267em;}
* {padding:0; margin:0; }
a {text-decoration: none;}

img{border:0;max-width:100%}
ul, ol {list-style: none;}
li { display: list-item;text-align: -webkit-match-parent; }
.h_all {background:url(http://m.mfile.co.kr/views/images/mfile/renewal/m_web_all.png) no-repeat; background-size:  280px 700px;}


#header {background-color:#1c85d0;}
.lg_h {width:80px; position: absolute;}
.sch {background-color:#1c85d0; /*background: -webkit-gradient(linear,0 0,0 100%,from(#292a2c),to(#292a2c)); */height: 50px; padding: 0px 0; border-top: 1px solid #1873ac; border-bottom: 1px solid #1873ac;}

.sch_inp2, .sch_inp2:before, .sch_inp2:after{ background:url(http://m.mfile.co.kr/views/images/mfile/renewal/m_search_01.png) no-repeat;  background-size: 4px 142px; }
.sch_inp2:before, .sch_inp2:after {position:absolute; top: 0;left: 0; background-position:0px 0px;	width:4px;	height:42px;content:''}
.sch_inp2:after {right: 0;left: auto; background-position:0px -44px;	 }

.sch_inp2 {margin: 0 4px;padding: 7px 40px 7px 6px; height:27px; background:url(http://m.mfile.co.kr/views/images/mfile/renewal/m_search_01.png) ; background-size: 4px 142px;background-position:0px -88px; }


.sch_inp2 .sch_inp {width: 100%;height: 27px; border: 0; border-radius: 0; background: none; line-height: 27px; vertical-align: bottom;  padding: 3px 10px 0px 0px; font-size:17px; margin-top: 0px; }
.sch_inp2 .sch_btn {position: absolute;top: 5px;right: 5px; width:35px; height:32px;}

.b_bold {height:1px; background-color:#000;}


/*nav */
.nav_wrap { background-color:#fff;}
.nav_l{ width: 12%; float:left; /*margin:0 7px;*/} /* 12.5% 크기 줄임 20181011 */
.nav_lon{ width:12%; float:left;  /*margin:0 7px*/} /* 12.5% 크기 줄임 20181011 */
.nav_u{display:table;width:100%;height:42px; background: #f4f4f4; border-bottom: 1px solid #ababab;}
.nav_l{display:table-cell;white-space:nowrap;text-align:center}
.nav_lon{display:table-cell;white-space:nowrap;text-align:center; background:url(http://m.mfile.co.kr/views/images/mfile/renewal/m_menu_on.png); background-size: 2px 43px;}
.nav_a{display:block; position:relative; height:42px; color:#272727; font-size:14px;font-weight:bold; line-height:42px}
.nav_lon .nav_a{height:42px;color:#1e84cc;}
.nav_u #navi_top {padding-left:10px;/*padding-left:10px;*/} /* TOP100 위치 첫번째로 변경하면서 왼쪽 여백 추가 20181011 */

/*20180911_추가*/
.n_nav_lon {float:left;width:33.3%;display:table-cell;white-space:nowrap;text-align:center; background:url(http://m.mfile.co.kr/views/images/mfile/renewal/m_menu_on.png); background-size: 2px 43px;}
.n_nav_lon > div {margin:0 7px;}
.n_nav_l{ /*width: 12%;*/ float:left;width:33.3%;text-align:center;} 
.n_nav_l > div {margin:0 7px;}

/* sub cate */
.h_sub_cate_on {height:35px;width:25%;background:#1c85d0;color:#fff; font-weight:bold; font-size:14px;}
.h_sub_cate_off {height:35px;width:25%;background:#f4f4f4;color:#1c85d0; font-weight:bold; font-size:14px;}

/* option */

.option_area2{position:relative; height:44px; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #ababab;}
.option_area2 input{overflow:hidden;-webkit-appearance:none;border:none;background:none;color:#000}

.option_area2 .btn_toggle{position:absolute;top:5px;right:6px;width:76px;height:31px;border:1px solid #1e6ea9;border-radius:3px;background:#319cea;/*-webkit-box-shadow:inset 0 1px 0 #3b3c3f;*/line-height:31px;font-weight:bold;color:#fff;/*text-shadow:0 -1px 0 #000; */text-indent:8px;}
.option_area2 .btn_toggle.on{background:#319cea; /*-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.47)*/}
.h_toggle_arrow_on { position:absolute;top:11px;right:15px;}
.h_toggle_arrow_off { position:absolute;top:11px;right:15px;}
.h_mem_on  {  width:29px; height:29px;  background-position: -89px -441px;  }
.h_mem_on, .option_area2 .mem_1 {  display: inline; }
.h_mem_off {  width:30px; height:29px;  background-position: -122px -441px;}
.h_mem_off, .option_area2 .mem_2 {  display: inline; }

/* list */
.con_list { height:92px; border-bottom:1px solid #cdcdcd; width: 100%; cursor:pointer; }
.con_list .item {clear:both; width: 100%; height: 92px;}
.con_list .item .item_l {float:left; margin: 7px 5px; width:117px; height:78px;  }
.con_list .item .item_l .icon_19 { position:absolute; margin: 5px 0px 0px 5px; width:18px; height:18px; }
.con_list .item .item_r {float:left;  width:auto; height: 78px; position:absolute; left:130px; right:5px; margin-top:7px; overflow:hidden}
.con_list .item .item_r .r_title {	overflow: hidden;	text-overflow: ellipsis;	display: -webkit-box;	-webkit-line-clamp: 2; /* ���μ� */	-webkit-box-orient: vertical;	word-wrap:break-word;	 word-break:break-all;	 line-height:15px; height:32px; font-size:14px; color:#242424; font-weight:normal; line-height: 16px;}
#contents {  }
#more_list { clear:both; width:100%; height:45px; background-color:#fff; cursor:pointer; border-bottom:1px solid #cdcdcd;}
#more_list .more_l { height:45px; position:absolute; left:0px;right:53px;  border-right:1px solid #cdcdcd; }

#more_list .more_r { float:right; height:45px; width:53px; color:gray; font-size:12px; text-align:center;}
#more_list .more_r div { margin-top:15px; }

.list_mob {width:14px;height:23px; background-position:-23px -477px;}
.list_coop {width:23px;height:11px; background-position:-83px -477px; }
.list_hot {width:18px;height:23px; background-position:-42px -477px;}
.list_new {width:18px;height:23px; background-position:-63px -477px;}

.list_mob_off {width:14px;height:23px; background-position:-23px -612px;}
.list_coop_off {width:18px;height:23px; background-position:0px -612px;}
.list_hot_off {width:18px;height:23px; background-position:-42px -612px;}
.list_new_off {width:18px;height:23px; background-position:-63px -612px;}

.h_list_na {position:absolute; right:3px;  color:#484848;}
.h_list_point {position:absolute; right:3px;}

.star { padding: 0px 5px 0px 0px; }
.star .starRa, .star .starRa span { display:inline-block; height:13px;background:url(http://m.mfile.co.kr/views/images/mfile/renewal/m_web_all.png) no-repeat; background-size:  280px 700px;  overflow:hidden; margin-top:0px;  background-position:0px -456px;}
.star .starRa { width:81px; vertical-align:middle; margin:-1px 0 0 0px;  }
.star .starRa span{ font-size:0; line-height:0; vertical-align:top; text-indent:-100px; *text-indent:0; background-position:0px -443px; }





.h_blind_log { width:280px; }
.h_log_top { height:50px; border-bottom:1px solid #b7b7b7;}
.h_log_title { width:236px; height:50px; }
.h_log_title .h_name { width:53px;height:14px; background-position:0px 0px; }
.h_log_close { border-left:1px solid #b7b7b7; width:43px; height:50px; cursor:pointer;}
.h_log_close .h_x { width:14px;height:15px; background-position:0px -80px;  }

.h_log_box { height:198px; }
.h_log_box .h_log_idt{ width:19px; height:13px;background-position:-68px 0px; }
.h_log_box .h_log_inp{ width:221px; height:42px;background-position:0px -27px; }


/* view */

.h_all_x2 {background:url(http://m.mfile.co.kr/views/images/mfile/renewal/m_web_all.png) no-repeat; background-size:  150px 375px;}
#view_header .h_title { background-color:#464646; width:100%;color:white; font-weight:bold; font-size:12px; word-break:break-all;}
#view_header .h_title div { padding:8px 0px 8px 10px; }
#view_header .h_info { background-color:white; width:100%; height:100px;}
#view_header .h_info .h_in_l { float:left; height:100px; }
#view_header .h_info .h_in_l img { width:115px; height:76px; margin:10px 10px 0px 7px; } 
#view_header .h_info .h_in_r { float:left; margin-top:13px; font-size: 12px;}
#view_header .h_info .h_in_r span { font-weight:bold; font-size:13px;}
#view_header .h_con { clear:both; background-color:#dbdbdb;  height:140px;}
/*#view_header .h_con .h_co_l { float:left; padding:8px 10px;}*/
#view_header .h_con .h_co_l { position:absolute; padding:8px 10px; z-index: 20;}

#view_header .h_con .h_co_l .b_down{ background-position:-41px -510px; width:118px; height:33px; cursor: pointer;}
#view_header .h_con .h_co_l .b_play{ background-position:-161px -510px; width:118px; height:33px; cursor: pointer;}
#view_header .h_con .h_co_l .b_jjim{ background-position:0px -552px; width:118px; height:33px; cursor: pointer;}
#view_header .h_con .h_co_l .b_coup{ background-position:-38px -552px; width:79px; height:33px; cursor: pointer;}
/*#view_header .h_con .h_co_r .co_r_t { float: left; }*/
#view_header .h_con .h_co_r  {position:  relative;  padding:1px 0 0 233px;}

#view_header .h_con .h_co_r .co_r_t .b_point_bx {background: #fff ; height:122px;  margin-right:7px;   border-radius:3px; border:1px solid #ccc}
#view_header .h_con .h_co_r .co_r_t .b_point_bx .po1 {background-position:0px -213px; width:20px; height:20px; }
#view_header .h_con .h_co_r .co_r_t .b_point_bx .po2 {background-position:-23px -213px; width:20px; height:20px; }
#view_header .h_con .h_co_r .co_r_t .b_point_bx .po3 {background-position:-46px -213px; width:20px; height:20px; }
#view_header .h_con .h_co_r .co_r_t .b_point_bx .po4 {background-position:-69px -213px; width:20px; height:20px; }
#view_filelist { background-color:#f4f4f4; padding: 10px;}
#view_filelist .f_title { border:1px solid #cfccc5; border-bottom:0px; background-color:#fef7dd; font-weight:bold; padding:5px 8px;}
#view_filelist .f_title span { font-size: 12px; font-weight: normal; float: right; }
#view_filelist .f_info { font-size: 13px; color: #555; border: 1px solid #cfccc5; border-top:0px solid ; background-color:white; }
#view_filelist .f_info .f_file { padding:5px 10px; border-top:1px solid #cfccc5;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 50px;position: relative;}
#view_filelist .f_info span { position: absolute;right: 5px; }
#view_contents { margin:10px; }
#view_contents img { width:100%; height:auto; }

/* Ȯ���� �޴� */

#mask { position:fixed; left:0; top: 0; z-index: 999; background-color: black; opacity: 0; width: 100%; height: 100%; display: none; }
#aside { background-color: white; position: fixed; width: 280px; height: 100%; top:0; bottom:0; z-index: 1000; }	
#btn_aside { background-position:-213px -402px; width: 60px; height: 58px; cursor: pointer; position: fixed; left: 5px; bottom: 5px; z-index: 998;}

/* Ȯ���� �޴�  �α���*/

.h_log {background: #333438;border-top: 1px solid #424347;border-bottom: 1px solid #424347; width:280px; height:132px; }
.h_menu_table { width:68px; height:64px; cursor: pointer;} 
.h_my_menu_1 {  background-position:0px -318px; width:27px; height:28px; }
.h_my_menu_2 {  background-position:-34px -318px; width:22px; height:28px; }
.h_my_menu_3 {  background-position:-64px -318px; width:27px; height:28px; }
.h_my_menu_4 {  background-position:-99px -318px; width:36px; height:28px; }
.h_my_menu_5 {  background-position:-144px -318px; width:33px; height:28px; }
.h_my_menu_6 {  background-position:-183px -318px; width:28px; height:28px; }
.h_my_menu_7 {  background-position:-218px -318px; width:22px; height:28px; }
.h_my_menu_8 {  background-position:-249px -318px; width:27px; height:28px; }
.h_my_menu_12 {  background:url(/views/images/mfile/renewal/free.png) no-repeat; width:28px; height:28px; }

.h_my_menu_1_on {  background-position:0px -356px; width:27px; height:28px; }
.h_my_menu_2_on {  background-position:-34px -356px; width:22px; height:28px; }
.h_my_menu_3_on {  background-position:-64px -356px; width:27px; height:28px; }
.h_my_menu_4_on {  background-position:-99px -356px; width:36px; height:28px; }
.h_my_menu_5_on {  background-position:-144px -356px; width:33px; height:28px; }
.h_my_menu_6_on {  background-position:-183px -356px; width:28px; height:28px; }
.h_my_menu_7_on {  background-position:-218px -356px; width:22px; height:28px; }
.h_my_menu_8_on {  background-position:-249px -356px; width:27px; height:28px; }

.h_menu_table .off {  color:#fff; }
.h_menu_table .on {  color:#f15256; }


.h_my_point_1{  background-position:0px -398px; width:36px; height:36px;}
.h_my_point_2{  background-position:-43px -398px; width:36px; height:36px;}
.h_my_point_3{  background-position:-86px -398px; width:36px; height:36px;}
.h_my_point_4{  background-position:-141px -398px; width:36px; height:36px;}



/* Ȯ���� �޴�  �α׾ƿ�*/
.h_blind_log { width:280px; }
.h_log_top { height:50px; border-bottom:1px solid #b7b7b7;}
.h_log_title { width:236px; height:50px; }
.h_log_title .h_name { width:55px;height:15px; background-position:0px 0px; }
.h_log_close { border-left:1px solid #b7b7b7; width:43px; height:50px; cursor:pointer;}
.h_log_close .h_x { width:14px;height:15px; background-position:0px -80px;  }

.h_log_box { height:198px; }
.h_log_box .h_log_idt{ width:19px; height:16px;background-position:-68px 0px; }
.h_log_box .h_log_pst{ width:29px; height:15px;background-position:-100px 0px; }
.h_log_box .h_log_inp{ width:222px; height:43px;background-position:0px -26px; }

.h_log_inp .idt {line-height: 27px; width: 213px;padding: 0;border: 0;border-radius: 0;-webkit-appearance: none;font-size: 15px; background: transparent;border: none; }
.h_log_chk_id { width:221px; height:28px;}
.h_log_chk_id .h_chk_id_on{ width:21px; height:20px;background-position:-42px -78px;cursor:pointer; }
.h_log_chk_id .h_chk_id_off{ width:21px; height:20px;background-position:-18px -78px; cursor:pointer;}
.h_log_chk_id .h_chk_at_on{ width:19px; height:18px;background-position:-43px -79px; cursor:pointer;}
.h_log_chk_id .h_chk_at_off{ width:19px; height:18px;background-position:-19px -79px; cursor:pointer;}
.h_log_chk_id .h_chk_pw_on{ width:21px; height:20px;background-position:-42px -78px;cursor:pointer; }
.h_log_chk_id .h_chk_pw_off{ width:21px; height:20px;background-position:-18px -78px; cursor:pointer;}

.h_btn { height: 35px; }
.h_btn .btn_join { background-position:0px -107px; width: 110px; height: 37px; cursor: pointer;}
.h_btn .btn_login { background-position:-111px -107px; width: 111px; height: 37px; cursor: pointer;}

.h_find { height:40px; border-top:1px solid #b7b7b7; border-bottom:1px solid #b7b7b7;}
.h_find_id { width: 139px; line-height: 40px; border-right:1px solid #b7b7b7;  cursor:pointer; }
.h_find_pw { width: 140px; line-height: 40px;  cursor:pointer; }
.h_charge {background-position:0px -646px; width: 280px; height: 46px;border-bottom:1px solid #b7b7b7; cursor:pointer; }
.h_cs_coll {background-position:0px -145px; width: 260px; height: 172px; }







.event_list_new {width:100%; height:85px; border-bottom:1px solid #e0e0e0; margin-bottom:10px; clear:both;}
.event_list_new img{width:78px; float:left;margin-right:10px;margin-left:10px;position:relative;overflow:hidden;}
.event_list_new ul {margin:10px 0 0 10px; padding:0;}
.event_list_new ul li.event_title_ing {height:19px; color:#3c1e1f; font-weight:bold; float:none; padding-top:5px}
.event_list_new ul li.event_title_end {height:19px; color:#444444; font-weight:bold; float:none;}
.event_list_new ul li.event_contents_ing {line-height:15px; color:#555; font-size:100%; float:none;}
.event_list_new ul li.event_contents_end {line-height:15px; color:#777; font-size:100%; float:none;}

/* SNS 간편 로그인 20170418 */
.snsLogin {margin:15px -1px 5px;*zoom:1}
.snsLogin:after {content:"";display:block;clear:both}
.snsLogin li {float:left;width:50%}
.snsLogin a {display:block;height:36px;font-size:0;margin:1px}
.snsLogin a:nth-child(2),
.snsLogin a:nth-child(4) {margin-right:0}
.snsLogin a.sl_btnNaver {border:1px solid #1bb400;background:#1ec800 url(/views/images/mfile/renewal/m_sns_naver.png) no-repeat;background-position:center;background-size:contain}
.snsLogin a.sl_btnKakao {border:1px solid #e1cf00;background:#fbe600 url(/views/images/mfile/renewal/m_sns_kakao.png) no-repeat;background-position:center;background-size:contain}
.snsLogin a.sl_btnFacebook {border:1px solid #486198;background:#506ca9 url(/views/images/mfile/renewal/m_sns_facebook.png) no-repeat;background-position:center;background-size:contain}
.snsLogin a.sl_btnGoogle {border:1px solid #c7584b;background:#de6253 url(/views/images/mfile/renewal/m_sns_google.png) no-repeat;background-position:center;background-size:contain}

/* 팝업 로그인 SNS 간편 로그인 20170418 */
.f_login_area .snsLogin {margin:5px -5px 5px}
.f_login_area .snsLogin a {margin:1.5% 2%;box-sizing:border-box}

/* MUSIC 배너 & 검색 20180111 */
.musicSearch_wrap {width:100%;min-width:320px;height:auto;padding-bottom:12%;background:#ffd92b url(/views/images/mfile/renewal/m_music_bn_bg.jpg) repeat-x left bottom;background-size:100%;position:relative;}
.musicSearch_wrap .musicSearch_bn {padding:8% 4%;background:url(/views/images/mfile/renewal/m_music_bn_img.png) no-repeat right top;background-size:50%;}
.musicSearch_wrap .musicSearch_bn img {width:60%;}
.musicSearch_wrap .musicSearch_box {position:absolute;bottom:10%;left:0;right:0;width:90%;min-height:38px;margin:0 auto;z-index:10}
.musicSearch_wrap .musicSearch_box fieldset {border:none;}
.musicSearch_wrap .musicSearch_box legend {display:none;}
.musicSearch_wrap .musicSearch_box .msb_inp {width:100%;height:38px;background:#fff;padding:10px 15px;border:none;border-radius:100px;font-size:0.9em;color:#7a7a7a;letter-spacing:-0.03em;line-height:1em;}
.musicSearch_wrap .musicSearch_box .msb_btn {position:absolute;bottom:0;top:0;right:0;display:inline-block;font-size:0;margin:4px;width:10%;min-height:28px;max-height:42px;line-height:1em;background:#ffdf49 url(/views/images/mfile/renewal/m_music_btnSearch.png) no-repeat center;background-size:100%;border:none;border-radius:100px;}
@media screen and (width:480px) {
    .musicSearch_wrap {padding-bottom:9%;}
}
@media screen and (min-width:481px) {
    .musicSearch_wrap {padding-bottom:9%;}
    .musicSearch_wrap .musicSearch_box .msb_inp {padding:20px;}
    .musicSearch_wrap .musicSearch_box .msb_btn {width:32px;}
}
@media screen and (min-width:680px) {
    .musicSearch_wrap {padding-bottom:5.5%;background-size:contain;}
    .musicSearch_wrap .musicSearch_box {width:92%;}
    .musicSearch_wrap .musicSearch_bn {padding:5.2% 4% 4.5%;background-size:30%;}
    .musicSearch_wrap .musicSearch_bn img {width:35%;}
    .musicSearch_wrap .musicSearch_box .msb_inp {height:38px;}

}
@media screen and (min-width:1024px) {
    .musicSearch_wrap {padding-bottom:4.3%;}
    .musicSearch_wrap .musicSearch_box {bottom:12%;width:94%;}
    .musicSearch_wrap .musicSearch_bn {padding:3% 3% 4%;background-size:25%;background-position:right 20%;}
    .musicSearch_wrap .musicSearch_bn img {width:25%;}
    .musicSearch_wrap .musicSearch_box .msb_inp {height:48px;}
    .musicSearch_wrap .musicSearch_box .msb_btn {margin:3px;width:42px;}
}
@media screen and (min-width:1920px) {
    .musicSearch_wrap .musicSearch_bn {padding:3.2% 3% 2.5%;background-position:right 16%;}
}

/* 기본 버튼 style */
.btnWrap {margin:15px -1.2%;text-align:center;vertical-align:top;}
.btnWrap .btn {overflow:visible;width:auto;display:inline-block;zoom:1;vertical-align:middle;text-decoration:none;text-align:center;font-size:1em;letter-spacing:-0.5px;height:40px;line-height:40px;border-radius:5px;box-sizing:border-box;cursor:pointer;}
/* 기본 버튼 width */
.btnWrap .btn.w100per {width:100%;}
.btnWrap .btn.w50per {width:47.5%;margin:5px 0.7%;}
/* 기본 버튼 color */
.btnWrap .btn.bgBlue {background-color:#1c85d0;}