@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

*{margin:0;padding:0; font-family: 'Noto Sans KR', sans-serif; font-weight:400; overflow-x:hidden;}
body{margin:0;background-color:#1c1c1c;text-align:center;_text-align:center;word-break:break-all;-ms-word-break:break-all; overflow-x:hidden; overflow-y:auto;}
body, div, index, textarea, button{font-size:14px;line-height:160%;font-family:'Noto Sans KR', sans-serif, Dotum, Gulim, Verdana, AppleGothic, Tahoma;color:#fff; overflow-x:hidden;}

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

ul, ol, ul li, ol li, dl, dt, dd, dt dd{margin:0;padding:0;list-style:none;}
h1, h2, h3, h4, h5{margin:0;padding:0;}
img, fieldset, iframe{border:none;}
.spacer{clear:both;}
.clear{width:100% !important;height:0 !important;margin:0 !important;padding:0 !important;font-size:0 !important;line-height:0 !important;display:block !important;float:none !important;clear:both !important;overflow:hidden !important;}


.mt0px{margin-top:0px !important;}
.mt5px{margin-top:5px !important;}
.mt10px{margin-top:10px !important;}
.mt15px{margin-top:15px !important;}
.mt20px{margin-top:20px !important;}
.mt25px{margin-top:25px !important;}
.mt30px{margin-top:30px !important;}
.mt35px{margin-top:35px !important;}
.mt40px{margin-top:40px !important;}
.mt45px{margin-top:45px !important;}
.mt50px{margin-top:50px !important;}

.ml0px{margin-left:0px !important;}
.ml5px{margin-left:5px !important;}
.ml10px{margin-left:10px !important;}
.ml15px{margin-left:15px !important;}
.ml20px{margin-left:20px !important;}
.ml25px{margin-left:25px !important;}
.ml30px{margin-left:30px !important;}
.ml35px{margin-left:35px !important;}
.ml40px{margin-left:40px !important;}
.ml45px{margin-left:45px !important;}
.ml50px{margin-left:50px !important;}

.mr0px{margin-right:0px !important;}
.mr5px{margin-right:5px !important;}
.mr10px{margin-right:10px !important;}
.mr15px{margin-right:15px !important;}
.mr20px{margin-right:20px !important;}
.mr25px{margin-right:25px !important;}
.mr30px{margin-right:30px !important;}
.mr35px{margin-right:35px !important;}
.mr40px{margin-right:40px !important;}
.mr45px{margin-right:45px !important;}
.mr50px{margin-right:50px !important;}

.mb0px{margin-bottom:0px !important;}
.mb3px{margin-bottom:3px !important;}
.mb5px{margin-bottom:5px !important;}
.mb10px{margin-bottom:10px !important;}
.mb15px{margin-bottom:15px !important;}
.mb20px{margin-bottom:20px !important;}
.mb25px{margin-bottom:25px !important;}
.mb30px{margin-bottom:30px !important;}
.mb35px{margin-bottom:35px !important;}
.mb40px{margin-bottom:40px !important;}
.mb45px{margin-bottom:45px !important;}
.mb50px{margin-bottom:50px !important;}


.pt0px{padding-top:0px !important;}
.pt5px{padding-top:5px !important;}
.pt10px{padding-top:10px !important;}
.pt15px{padding-top:15px !important;}
.pt20px{padding-top:20px !important;}
.pt25px{padding-top:25px !important;}
.pt30px{padding-top:30px !important;}
.pt35px{padding-top:35px !important;}
.pt40px{padding-top:40px !important;}
.pt45px{padding-top:45px !important;}
.pt50px{padding-top:50px !important;}

.pl0px{padding-left:0px !important;}
.pl5px{padding-left:5px !important;}
.pl10px{padding-left:10px !important;}
.pl15px{padding-left:15px !important;}
.pl20px{padding-left:20px !important;}
.pl25px{padding-left:25px !important;}
.pl30px{padding-left:30px !important;}
.pl35px{padding-left:35px !important;}
.pl40px{padding-left:40px !important;}
.pl45px{padding-left:45px !important;}
.pl50px{padding-left:50px !important;}

.pr0px{padding-right:0px !important;}
.pr5px{padding-right:5px !important;}
.pr10px{padding-right:10px !important;}
.pr15px{padding-right:15px !important;}
.pr20px{padding-right:20px !important;}
.pr25px{padding-right:25px !important;}
.pr30px{padding-right:30px !important;}
.pr35px{padding-right:35px !important;}
.pr40px{padding-right:40px !important;}
.pr45px{padding-right:45px !important;}
.pr50px{padding-right:50px !important;}

.pb0px{padding-bottom:0px !important;}
.pb5px{padding-bottom:5px !important;}
.pb10px{padding-bottom:10px !important;}
.pb15px{padding-bottom:15px !important;}
.pb20px{padding-bottom:20px !important;}
.pb25px{padding-bottom:25px !important;}
.pb30px{padding-bottom:30px !important;}
.pb35px{padding-bottom:35px !important;}
.pb40px{padding-bottom:40px !important;}
.pb45px{padding-bottom:45px !important;}
.pb50px{padding-bottom:50px !important;}


/*************** Image Link Clear ***************/
a, img, input{selector-dummy:expression(this.hideFocus=true);}

/************************************************
*		LAYOUT									*
************************************************/
#mwrap{width:100%;min-width:320px;margin:0 auto;_text-align:left;position:relative;}

/* Top Contents Area */
#tca_wrap{width:100%;min-width:320px;background-color:#d4d4d4;position:fixed;_position:fixed;left:0;top:0;z-index:10000;}

.header{height:45px;position:relative; background:#000; line-height:45px; overflow:hidden}

.search_wrap{height:32px;padding:10px 0;text-align:center;position:relative;}
.search_wrap input{width:60%;height:22px;padding:6px 5px 0 5px;font-size:15px;vertical-align:middle;}
.search_wrap img{vertical-align:middle;}

.btn_360 {float:left; width:20%; position:relative; top:14px; left:3%; text-align:left;}
.btn_360 img {width:55px;}
.img_title {float:left; width:60%;}
.img_title img {height:22px; margin:0 auto;}
.btn_my {float:left; width:20%; position:relative;}
.btn_my img {width:20px;}

/* main */
.con_bg {margin:15px 0 0;background:#1c1c1c;}

.tt_case{
	height:35px;
	margin:15px 0 0;
	padding:0 10px;
	background-color:#333;
	text-align:left;
	font-size:16px;
	font-weight:400;
	color:#fff;
	line-height:35px;
}
.tt_case span{margin-left:15px;color:#fc0;}

.tt_nav{
	height:35px;
	margin:15px 0 0;
	padding:0 10px;
	background-color:#333;
	font-size:16px;
	font-weight:400;
	color:#fff;
	line-height:35px;
	position:relative;
}
.tt_nav ul{margin:0;padding:0;position:relative;}
.tt_nav li:first-child{border-left:0 none;}
.tt_nav li{width:49.8%;height:35px;border-left:1px solid #555;float:left;}
.tt_nav li a{
	width:100%;
	height:35px;
	text-align:center;
	color:#fff;
	line-height:35px;
	display:block;
}
.tt_nav li a img{height:20px;margin-bottom:3px;vertical-align:middle;}

.pic {width:94%; margin:0 auto 15px; position:relative;}
.pic img{width:100%;}
.play_img {width:100%; height:auto; max-height:230px;}
.pic_info {position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://mclassic.arte.co.kr/images/play_info_bg.png) repeat-x; background-position:0 bottom; }
.picon_wrap {position:absolute; top:21%; width:100%;}
.play_icon {max-width:75px; width:17%}
.pic ul {position:absolute; bottom:15px; left:15px; line-height:19px; font-size:15px; text-align:left;}
.pic ul li {overflow-y:hidden;}
.m_title {font-size:17px; font-weight:600;margin-bottom:5px;line-height:24px}
.m_title a.btn_vr {border:1px solid #fff; border-radius:3px; margin:0 10px; padding:0 7px; font-size:14px;z-index:1;}
.m_title a:hover{border:1px solid #fbb906;}
.line_img {background:url(http://mclassic.arte.co.kr/images/line_img.gif) repeat-x; width:94%; height:2px; margin:18px auto}

#content{width:100%;min-width:320px;margin:25px 0 0 0;position:relative; padding-top:20px;}
.wn{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}


/* sub */
.view_body {background:#000;}
.view_body #content {background:#1c1c1c;}
.sub_header {height:45px;position:relative; background:#000; line-height:45px; width:100%;}
.sub_header p {text-align:center; font-size:19px; font-weight:600; widht:94%; margin:0 auto;}
.sub_header span{height:45px;line-height:45px;position:absolute;right:10px;top:0;}
.sub_header span img{width:auto;height:20px;vertical-align:middle;}
.sub_pic .pic_info {background:none;}
.sub_pic .pic_info .picon_wrap {top:33%;}
.music_info {width:94%; margin:0 auto; height:350px; overflow-y:auto; text-align:left;}
.music_info p {font-size:16px;}
.view_info {text-align:left; width:94%; margin:0 auto 20px;}
.view_info ul {float:left; width:65%;}
.btn_box {overflow-y:hidden; float:right;text-align:right;width:35%;}
.btn_box a.btn_storage {width:130px; border:1px solid #fff; border-radius:3px; padding:0 8px; z-index:1;}
.btn_box a.btn_storage:hover {color:#fff;}
.view_ifwrap {padding:20px 0;}
.view_ifwrap p.ifwrap_title {font-size:17px; font-weight:600; text-align:left; width:94%; margin:0 auto 15px; overflow:hidden}

/* search css */
.search-wrapper {
    position: absolute;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    top:0%;
    right:0;
	overflow:hidden;
	z-index:1;
}
.search-wrapper.active {z-index:1; left:0; width:100%;}

.search-wrapper .input-holder {
    overflow: hidden;
    height: 45px;
    background: rgba(255,255,255,0);
    border-radius:6px;
    position: relative;
    width:70px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    width:100%;
    background: #000;
    -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input {
    width:100%;
    height: 45px;
    padding:0px 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color:#FFF;
    -webkit-transform: translate(0, 60px);
    -moz-transform: translate(0, 60px);
    transform: translate(0, 60px);
    -webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    transform: translate(0, 0px);
}

.search-wrapper .input-holder .search-icon {
    width:45px;
    height:45px;
    border:none;
    border-radius:6px;
    background: none;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
	background:url(http://mclassic.arte.co.kr/images/btn_search.png) no-repeat center 50%;
	background-position-y:13px;
	background-size:20px;
}
.search-wrapper.active .input-holder .search-icon {
    width: 45px;
    height:45px;
	right:32px;
}
.search-wrapper .input-holder .search-icon span {
    width:30px;
    height:30px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);

}
.search-wrapper.active .input-holder .search-icon span {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute;
    content:'';
}
/*.search-wrapper .input-holder .search-icon span::before {
    width: 4px;
    height: 11px;
    left: 9px;
    top: 18px;
    border-radius: 2px;
    background: #fff;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 0px;
    top: 0px;
    border-radius: 16px;
    border: 4px solid #fff;
}*/

.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:12px;
    right:-25px;
    width:25px;
    height:25px;
    cursor: pointer;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.search-wrapper.active .close {
    right:14px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #FFF;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 3px;
    height: 24px;
    left: 10px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 24px;
    height: 3px;
    left: 0px;
    top: 10px;
}
.search-wrapper .result-container {
    width: 100%;
    position: absolute;
    top:80px;
    left:0px;
    text-align: center;
    font-size: 14px;
    display:none;
    color:#B7B7B7;
}


/* button */
.b_btn{width:94%;height:40px;margin:0 auto 65px;text-align:center; position:relative;display:table; background:#000; border:1px solid #262626; border-radius:3px;}
.b_btn img{vertical-align:top;}
.b_btn_l{width:100%;*width:100%;text-align:center;display:table-cell;vertical-align:top}
.b_btn_a{height:40px;font-size:18px;font-weight:bold;line-height:40px;color:#fff;position:relative;display:block;}
.b_btn_a img {vertical-align:middle; margin-top:-3px; margin-left:5px;}
.b_btn_l .b_btn_a{font-weight:bold;color:#fff;line-height:40px;z-index:10;}
.b_btn_a:after{width:1px;height:40px;display:block;position:absolute;top:10px;left:0;content:''}
.b_btn_l:first-child .b_btn_a:after,.b_btn_on .b_btn_a:after{display:none}
.b_btn_l:first-child .b_btn_a{margin-left:0;}
.b_btn_l:last-child .b_btn_a{margin-right:0;}

.bb_left{
	width:25%;
	height:40px;
	font-size:16px;
	font-weight:500;
	color:#fff;
	line-height:40px;
	display:block;
	position:absolute;
	left:0;
	top:0;
}
.bb_right{
	width:25%;
	height:40px;
	font-size:16px;
	font-weight:500;
	color:#fff;
	line-height:40px;
	display:block;
	position:absolute;
	right:0;
	top:0;
}
.bb_left img,
.bb_right img{height:30px;margin:0 0 4px;vertical-align:middle;}
.bb_center{
	width:100%;
	height:40px;
	font-size:18px;
	font-weight:500;
	color:#fff;
	line-height:40px;
	position:absolute;
	left:0;
	top:0;
	display:block;
}
.bb_center b{color:#fc0;}


/* button 2 */
.fix_btn{
	width:94%;
	height:40px;
	margin:0 auto;
	background:#000;
	border:1px solid #cbb228;
	border-radius:3px;
	text-align:center;
	font-size:20px;
	font-weight:500;
	color:#cbb228;
	line-height:40px;
	display:table;
	position:fixed;
	left:3%;
	bottom:10px;
}
.fix_btn a{width:100%;height:40px;color:#cbb228;}
.fix_btn img{width:auto;height:20px;margin:0 5px 5px 0;vertical-align:middle;}


.e_header {width:100%;height:45px;line-height:45px;position:fixed;left:0;top:0;}
.e_header span{height:20px;margin:0 !important;line-height:20px;position:absolute;right:10px;top:15px;}
.e_header span a{width:20px;height:20px;display:block;}
.e_header span a img{width:auto;height:20px;}

.img_bg {
	width:96%;
	height:100%;
	padding:15% 3% 5%;
	background:url(../images/at_img1.jpg) no-repeat;
	background-size:100%;
}
.img_bg .ib_icon{width:70px;height:70px;margin:0 auto 20px;position:relative;}
.img_bg .ib_icon img{width:100%;}

.img_bg h2{margin:0 0 30px;font-size:22px;font-weight:300;line-height:28px;display:block;}
.img_bg h2 b{font-size:24px;font-weight:500;}
.img_bg p{ margin:0 0 15px;font-size:18px;font-weight:300;color:#cbb228;line-height:22px;display:block;}
.img_bg ul{margin:0 9% 20px;padding:0;position:relative;}
.img_bg ul li{text-align:left;font-size:15px;font-weight:300;color:#cbb228;line-height:23px;display:block;}
.img_bg span{margin:0 0 50px;font-size:12px;font-weight:300;color:#efefef;line-height:17px;display:block;}



/* button 3 */
.fix_bbtn{
	width:94%;
	height:40px;
	margin:0 auto;
	background:#000;
	border:1px solid #cbb228;
	border-radius:40px;
	text-align:center;
	font-size:20px;
	font-weight:500;
	color:#cbb228;
	line-height:40px;
	display:table;
	position:relative;
	bottom:10px;
}
.fix_bbtn a{width:100%;height:40px;color:#cbb228;}
.fix_bbtn img{width:auto;height:20px;margin:0 5px 5px 0;vertical-align:middle;}



#footer{width:100%;clear:both;}