@charset "utf-8";

/* 기본 설정 & layout CSS */
@import url(/css/layout.css);



/* 상단 트랙 영역 *
aside[display-role="scd"] h1.samwha { position: absolute; top: 19px; left: 22px; height: 28px; width: 196px; background: url(/images/samwha.png) left top no-repeat; }
aside[display-role="scd"] h1.samwha a { display: block; height: 28px; width: 196px; text-indent: -9999em; }
aside[display-role="scd"] a.btn-scd { z-index: 100; position: absolute; top: 136px; left: 105px; height: 91px; width: 224px; text-indent: -9999em; background: url(/images/scd.png) left top no-repeat; }

aside[display-role="scd"] div.track-view { position: relative; margin: 0 auto; height: 350px; width: 372px; }
aside[display-role="scd"] div.track-view div.arm { z-index: 20; position: absolute; top: 0; right: 0; height: 220px; width: 210px; background: url(/images/scd/arm.png) left top no-repeat; }
aside[display-role="scd"] div.track-view div.track0 { position: absolute; top: 15px; height: 320px; width: 320px; }
aside[display-role="scd"] div.track-view div.track1 { position: absolute; top: 15px; height: 320px; width: 320px; }
aside[display-role="scd"] div.track-view div.track2 { position: absolute; top: 15px; height: 320px; width: 320px; }

aside[display-role="scd"] div.track-view div.track0 > div { position: absolute; top: 0; left: 0; height: 320px; width: 320px; }
aside[display-role="scd"] div.track-view div.track0 > div.start { z-index: 10; background-image: url(/images/scd/track01_start.jpg); background-size: auto 320px; }
aside[display-role="scd"] div.track-view div.track0 > div.repeat { z-index: 9; background-image: url(/images/scd/track01_repeat.jpg); background-size: auto 320px; }
aside[display-role="scd"] div.track-view div.track0 > div.end { z-index: 8; background-image: url(/images/scd/track01_end.jpg); background-size: auto 320px; }

aside[display-role="scd"] div.track-view div.track1 > div { position: absolute; top: 0; left: 0; height: 320px; width: 320px; }
aside[display-role="scd"] div.track-view div.track1 > div.start { z-index: 10; background-image: url(/images/scd/track02_start.jpg); background-size: auto 320px; }
aside[display-role="scd"] div.track-view div.track1 > div.repeat { z-index: 9; background-image: url(/images/scd/track02_repeat.jpg); background-size: auto 320px; }
aside[display-role="scd"] div.track-view div.track1 > div.end { z-index: 8; background-image: url(/images/scd/track02_end.jpg); background-size: auto 320px; }

aside[display-role="scd"] div.track-view div.track2 > div { position: absolute; top: 0; left: 0; height: 320px; width: 320px; }
aside[display-role="scd"] div.track-view div.track2 > div.start { z-index: 10; background-image: url(/images/scd/track03_start.jpg); background-size: auto 320px; }
aside[display-role="scd"] div.track-view div.track2 > div.repeat { z-index: 9; background-image: url(/images/scd/track03_repeat.jpg); background-size: auto 320px; }
aside[display-role="scd"] div.track-view div.track2 > div.end { z-index: 8; background-image: url(/images/scd/track03_end.jpg); background-size: auto 320px; }
aside[display-role="scd"] section.track-controller { position: absolute; top: 47px; right: 40px; width: 342px; }
*/


aside[display-role="scd"] {width:100%; height:230px; background:url(/images/main_bnr.jpg) no-repeat center top; background-size:cover; }
aside[display-role="scd"] div.scd-area{position:relative; width:1140px; height:230px; margin:0 auto;}
aside[display-role="scd"] h1{position:absolute; top:90px; left:0px; width:174px; height:65px;}
aside[display-role="scd"] h1 a{display:block; width:174px; height:65px; background:url(/images/scd_logo.png) no-repeat left; background-size:174px auto;}
aside[display-role="scd"] h1 a span {display:none;}
aside[display-role="scd"] div.samwha{position:absolute; top:30px; left:0px; width:200px; height:22px; background:url(/images/samhwa_logo.png) no-repeat left top; background-size:contain;}
aside[display-role="scd"] div.sub-txt01{position:absolute; top:170px; left:0px; width:382px; height:21px; background:url(/images/sub_txt.png) no-repeat center; background-size:382px auto;}
aside[display-role="scd"] div.sub-txt02{position:absolute; top:30px; right:0px; width:141px; height:25px; background:url(/images/sub_txt2.png) no-repeat center; background-size:141px auto;}


div.color-slider { }
div.color-slider div.slider { margin-bottom: 15px; display: block; height: 8px; width: 342px; background: url(/images/slider.png) left top no-repeat; }
div.color-slider div.slider > p { position: relative; height: 8px; width: 334px; }
div.color-slider div.slider > p > span { z-index: 10; position: absolute; display: block; height: 8px; width: 8px; background-image: url(/images/color_point.png); background-repeat: no-repeat; }
div.color-slider.track0 p > span.color0 { background-position: 0px 0px; }
div.color-slider.track0 p > span.color1 { background-position: 0px -23px; }
div.color-slider.track0 p > span.color2 { background-position: 0px -47px; }
div.color-slider.track0 p > span.color3 { background-position: 0px -70px; }
div.color-slider.track0 p > span.color4 { background-position: 0px -94px; }
div.color-slider.track0 p > span.color5 { background-position: 0px -117px; }

div.color-slider.track1 p > span.color0 { background-position: -8px 0px; }
div.color-slider.track1 p > span.color1 { background-position: -8px -23px; }
div.color-slider.track1 p > span.color2 { background-position: -8px -47px; }
div.color-slider.track1 p > span.color3 { background-position: -8px -70px; }
div.color-slider.track1 p > span.color4 { background-position: -8px -94px; }
div.color-slider.track1 p > span.color5 { background-position: -8px -117px; }

div.color-slider.track2 p > span.color0 { background-position: -16px 0px; }
div.color-slider.track2 p > span.color1 { background-position: -16px -23px; }
div.color-slider.track2 p > span.color2 { background-position: -16px -47px; }
div.color-slider.track2 p > span.color3 { background-position: -16px -70px; }
div.color-slider.track2 p > span.color4 { background-position: -16px -94px; }
div.color-slider.track2 p > span.color5 { background-position: -16px -117px; }

div.track-info { position: relative; margin-top: 31px; padding-left: 63px; height: 61px; }
div.track-info a.btn-track { position: absolute; top: 0; left: 0; }
div.track-info p { font-size: 12px; color: #fff; line-height: 20px; }


aside[display-role="scd"] section.track-controller a { margin-right: 4px; display: inline-block; height: 42px; width: 42px; text-indent: -9999em; }
aside[display-role="scd"] section.track-controller a.btn-track { background: url(/images/btn_track01.png) left top no-repeat; }
aside[display-role="scd"] section.track-controller a.btn-track:hover { background-image: url(/images/btn_track01_selected.png); }

aside[display-role="scd"] section.track-controller a.btn-prev { background: url(/images/btn_prev01.png) left top no-repeat; }
aside[display-role="scd"] section.track-controller a.btn-prev:hover { background-image: url(/images/btn_prev01_selected.png); }
aside[display-role="scd"] section.track-controller a.btn-next { background: url(/images/btn_next01.png) left top no-repeat; }
aside[display-role="scd"] section.track-controller a.btn-next:hover { background-image: url(/images/btn_next01_selected.png); }
aside[display-role="scd"] section.track-controller a.btn-pause { background: url(/images/btn_pause01.png) left top no-repeat; }
aside[display-role="scd"] section.track-controller a.btn-pause:hover { background-image: url(/images/btn_pause01_selected.png); }
aside[display-role="scd"] section.track-controller a.btn-random { background: url(/images/btn_random01.png) left top no-repeat; }
aside[display-role="scd"] section.track-controller a.btn-random:hover { background-image: url(/images/btn_random01_selected.png); }

div.music-controller { position: relative; border: 1px solid #2d2d2d; }
div.music-controller div.equalizer { position: absolute; right: 0px; top: 0px; height: 43px; width: 130px; }
div.music-controller div.equalizer > div.start { z-index: 10; position: absolute; top: 0px; left: 0px; height: 43px; width: 130px; background-image: url(/images/scd/equalizer_start.png); background-size: 130px auto; }
div.music-controller div.equalizer > div.repeat { z-index: 9; position: absolute; top: 0px; left: 0px; height: 43px; width: 130px; background-image: url(/images/scd/equalizer_repeat.png); background-size: 130px auto; }
div.music-controller div.equalizer > div.end { z-index: 8; position: absolute; top: 0px; left: 0px; height: 43px; width: 130px; background-image: url(/images/scd/equalizer_end.png); background-size: 130px auto; }


.map-container { position: relative; margin: 0 auto; width: 1200px; }
.map { position: absolute; top: 70px; right: 72px; width: 646px; height: 390px; }




.bbs-container { margin: 0 auto; padding: 70px 40px 30px 40px; width: 1120px; text-align: left; }
.bbs-container p { text-align: left; }

.btns { padding: 15px 0 0 0; text-align: center; }
a.btn-normal { padding-top: 3px; display: inline-block; height: 22px; width: 76px; font-size: 14px; color: #ffffff; text-align: center; background-color: #404041; }
input.btn-normal { display: inline-block; height: 25px; width: 76px; font-size: 14px; color: #ffffff; text-align: center; border: 0px none; background-color: #404041; }

/*
=========================================================================
	게시판 - 상단 검색
=========================================================================
*/
fieldset.search-form { text-align: right; margin-top: 40px; }
fieldset.search-form select { font-size: 14px; vertical-align: middle; }
fieldset.search-form input.search-word { height: 26px; width: 250px; font-size: 14px; vertical-align: middle; border: 1px solid #939598; background-color: #e7e8e9; }
fieldset.search-form input.btn-search { display: inline-block; height: 28px; width: 108px; font-size: 14px; color: #fff; vertical-align: middle; text-align: center; border: 1px solid #cecece; background-color: #404042; }



table.bbs-normal-list { margin-top: 20px; border-top: 1px solid #939598; }
table.bbs-normal-list thead { }
table.bbs-normal-list thead th { height: 38px; font-size: 14px; color: #000; font-weight: bold; text-align: center; border-right: 1px solid #939598; border-bottom: 1px solid #939598; background-color: #e7e8e9; }
table.bbs-normal-list thead th:first-child { border-left: 1px solid #939598; }

table.bbs-normal-list tbody td { height: 30px; font-size: 13px; text-align: center; border-right: 1px solid #939598; border-bottom: 1px solid #939598; }
table.bbs-normal-list tbody td:first-child { border-left: 1px solid #939598; }
table.bbs-normal-list tbody td.l { padding-left: 18px; text-align: left; }
table.bbs-normal-list tbody td > a { font-size: 13px; color: #000; }
table.bbs-normal-list tbody td > a.red { color: #f00; }
table.bbs-normal-list tbody td > a.bold { font-weight: bold; }



table.bbs-normal-view { margin-top: 40px; border-bottom: 3px solid #939598; }
table.bbs-normal-view thead { }
table.bbs-normal-view thead th { height: 45px; font-size: 14px; color: #000; font-weight: normal; text-align: center; }
table.bbs-normal-view thead td { font-size: 14px; color: #7a7a7a; font-weight: normal; text-align: center; }
table.bbs-normal-view thead tr.top th { height: 40px; background-color: #e7e8e9; }
table.bbs-normal-view thead tr.top th.classification { padding: 0 20px; width: 100px; text-align: left; }
table.bbs-normal-view thead tr.top th.title { padding-left: 75px; text-align: left; }
table.bbs-normal-view thead tr.top th.title.red { color: #f00; }
table.bbs-normal-view thead tr.top th.title.bold { font-weight: bold; }

table.bbs-normal-view tbody td { font-size: 14px; color: #000; }
table.bbs-normal-view tbody td.contents { padding: 25px 0 0 5px; border-top: 1px solid #939598; }
table.bbs-normal-view tbody td.attach { position: relative; padding: 25px 0 30px 5px; }
table.bbs-normal-view tbody td.attach div.btns { position: absolute; bottom: 12px; right: 0; }



table.bbs-normal-write { margin-top: 40px; border-bottom: 3px solid #939598; }
table.bbs-normal-write thead { }
table.bbs-normal-write thead th { height: 45px; font-size: 14px; color: #000; font-weight: normal; text-align: center; background-color: #e7e8e9; }
table.bbs-normal-write thead th.classification { padding: 0 10px; width: 40px; text-align: left; }
table.bbs-normal-write thead th.title { padding-left: 75px; vertical-align: middle; text-align: left; }
table.bbs-normal-write thead td { font-size: 14px; color: #7a7a7a; font-weight: normal; text-align: center; }

table.bbs-normal-write thead th input.title { width: 700px; height: 30px; font-size: 14px; color: #000; text-align: left; border: 0px none; background-color: #fff; }
table.bbs-normal-write thead th input.title.red { color: #f00; }
table.bbs-normal-write thead th input.title.bold { font-weight: bold; }
table.bbs-normal-write thead th input.options { margin-left: 10px; vertical-align: middle; }
table.bbs-normal-write thead th label { padding-left: 5px; font-size: 14px; color: #000; }

table.bbs-normal-write tbody td { font-size: 14px; color: #000; }
table.bbs-normal-write tbody td.contents { padding: 25px 0 0 5px; border-top: 1px solid #939598; }
table.bbs-normal-write tbody td.contents textarea { height: 300px; width: 100%; font-size: 14px; color: #000; text-align: left; }
table.bbs-normal-write tbody td.attach { padding: 25px 0 30px 5px; }


table.bbs-reply-list { margin-top: 10px; }
table.bbs-reply-list tbody th { font-size: 14px; color: #000; font-weight: normal; text-align: left; }
table.bbs-reply-list tbody th > span { padding-left: 15px; font-size: 11px; color: #797979; font-weight: normal; }
table.bbs-reply-list tbody td { padding-left: 30px; height: 30px; width: 70px; font-size: 14px; color: #000; font-weight: normal; text-align: left; background: url(/images/point.png) 9px 11px no-repeat; }


div.reply { margin-top: 50px; padding-bottom: 35px; border-bottom: 1px solid #939598; }
div.reply input.writer { float: left; margin-right: 24px; padding: 0 0 0 15px; height: 40px; font-size: 14px; color: #000; text-align: left; border: 0px none; background-color: #e7e8e9; }
div.reply div.reply-content { position: relative; float: left; padding: 0 0 0 15px; height: 80px; width: 800px; background-color: #e7e8e9; }
div.reply div.reply-content > input { width: 100%; height: 40px; font-size: 14px; color: #000; text-align: left; border: 0px none; background-color: transparent; }
div.reply div.reply-content > span.remain { position: absolute; right: 17px; bottom: 10px; font-size: 14px; color: #000; }
div.reply input.btn-reply { float: right; display: block; height: 80px; width: 105px; font-size: 14px; color: #000; text-align: center; border: 0px none; background-color: #e7e8e9; }


ul.bbs-nav-list { margin-top: 30px; }
ul.bbs-nav-list li { margin-bottom: 15px; padding-top: 13px; height: 27px; background: #e7e8e9 url(/images/nav01.png) 14px 7px no-repeat; }
ul.bbs-nav-list li.next { background: #e7e8e9 url(/images/nav02.png) 14px 7px no-repeat; }
ul.bbs-nav-list li > span { padding: 0 0 0 70px; display: inline-block; width: 85px; font-size: 14px; color: #000; text-align: left; }
ul.bbs-nav-list li > a { font-size: 14px; color: #000; text-align: left; }


/*
=========================================================================
	게시판 - 페이징
=========================================================================
*/
div.pagination { padding-top: 15px; text-align: center; }
div.pagination a { display: inline-block; width: 26px; height: 27px; font-size: 13px; color: #7a7a7a; vertical-align: middle; text-align: center; line-height: 27px; border: 1px solid #dadada; background-color: #fff; }
div.pagination a:hover,
div.pagination a.selected { color: #747474; font-weight: 700; background-color: #efefef; }

div.pagination a.go-to-prev { margin-right: 5px; height: 32px; width: 32px; border: 0px none; text-indent: -1000em; background: url(/images/pagination.png) 0px 0px no-repeat; }
div.pagination a.go-to-next { margin-left: 5px; height: 32px; width: 32px; border: 0px none; text-indent: -1000em; background: url(/images/pagination.png) -32px 0px no-repeat; }