@charset "utf-8";

 @import url(common.css);
 
#container { position: relative; height: 100%; }
#container:after { display: block; content: ""; clear: both; }

.main_conwrap { position: relative;  width:100%; /* background:url(/images/web/music/main/bg_wave.png) */ repeat-x 0 80px; z-index: 10;  }
.main_content { position: relative; width: 1200px; margin: 0 auto; z-index: 7;   }
.main_content:after { display: block; content: ""; clear: both; }

.con01 { position: relative; width: 1200px; margin-top:-200px}
.con01:after { display: block; content: ""; clear: both; }


/* 비주얼 */ 
div.mainVisual{position:relative; width:100%; height:100%;  display:inline-block; z-index:1}
.mainVisual .mVisual{position:relative; width:100%; height:480px; overflow:hidden} /*180723*/
.mainVisual .mVisual .rollU{position:absolute; top:0; left:0; width:100%; height:100%; }
/* .mainVisual .mVisual .rollU.one {width:100%; height:100%; background:url('/images/web/music/main/img_visual15.png') no-repeat center center; background-size:cover; } */
.mainVisual .mVisual .rollU.one {width:100%; height:100%; background:url('/images/web/music/main/img_visual16.png') 100% 60%; background-size:cover; }
.mainVisual .mVisual .rollU.two {width:100%; height:100%; background:url('/images/web/music/main/img_visual2.png') no-repeat center center; background-size:cover;}
.mainVisual .mVisual .rollU.thr {}
.mainVisual .mVisual .rollU.four {}
.mainVisual .mVisual .rollU .obj{position:relative; width:1200px; height:480px; margin:0 auto; text-align:left; font-family:'NotoM'; } /*180723*/
.mainVisual .mVisual .rollU .obj p {position:absolute; left:0; top:91% !important;  font-size:18px; line-height:1.4; color:#fff; opacity:0; text-shadow:1px 2px 2px rgba(6,7,7,.77);}
.mainVisual .mVisual .rollU .obj .txt1 {}
.mainVisual .mVisual .btn_num_area {position:absolute; top:355px; left:0; width:100%; z-index:100; height:25px; line-height:25px; text-align:center; }
.mainVisual .mVisual .btn_num_area a.btn_num {margin:10px 0 0 2px; width:16px; height:16px;}
.mainVisual .mVisual .btn_num_area a.play {margin-left:10px;}
.txtVsi1 { position:absolute; left:20%;  bottom:30px; color:#fff; font-size:18px;}

/* 이전, 다음 */
a.slidesjs-next {position:absolute; top:50%; right:50px; margin-top:-30px; display:block; width:70px; height:70px; overflow:hidden; text-indent:-9999px; background:url(/images/web/music/main/btn_next_off.png) no-repeat left top; z-index:10;}
a.slidesjs-previous {position:absolute; top:50%; left:50px; margin-top:-30px; display:block; width:70px; height:70px; overflow:hidden; text-indent:-9999px; background:url(/images/web/music/main/btn_prev_off.png) no-repeat left top; z-index:10;}
a:hover.slidesjs-next {background:url(/images/web/music/main/btn_next_on.png) no-repeat left top;}
a:hover.slidesjs-previous {background:url(/images/web/music/main/btn_prev_on.png) no-repeat left top;}

.Rollcontrolbox { position:relative; width:1200px; margin:0 auto;}
.Rollcontrol{ position:absolute; top:10px; left:5%; z-index:20;}
.Rollcontrol li{ float:left; margin-right:5px; }
.Rollcontrol li a{ display:inline-block; width:24px; height:24px; text-indent:-5000px; }
.Rollcontrol li a.stop{ background:url('/images/web/music/main/rollStop.png') no-repeat 0 0; }
.Rollcontrol li a.play{ background:url('/images/web/music/main/rollPlay.png') no-repeat 0 0; }





@-webkit-keyframes move {
	0% {transform:translateY(100px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-moz-keyframes move {
	0% {transform:translateY(100px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-o-keyframes move {
	0% {transform:translateY(100px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@-ms-keyframes move {
	0% {transform:translateY(100px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
@keyframes move {
	0% {transform:translateY(100px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}
/* 바로가기*/
.M_link01 {position:relative; width:400px; height:308px; float:left;  margin:0px 0 0 0; overflow:hidden; background:url(/images/web/music/main/bg_greeting.png) 0 0;}

.M_link01 .link01{text-align:center; height:207px; }
.M_link01 .link01 h2{margin:74px 0 25px; font-size:24px; color:#fff; font-family: 'NotoM'; line-height:24px;}
.M_link01 .link01 p {color:#cbdfff; font-family: 'NotoR'; font-size:16px;  }
.M_link01 .link01 p.icon01{ position:absolute; right:10%; bottom:10%;}
.M_link01 .link01 a:hover .icon01{transform: rotateY(360deg); transition:transform 300ms ease-in-out 0s;}
.M_link01 .link01 .btn_more { margin-top:15px;}

.M_link02 { position:relative; width:399px; height:255px; float:left;  margin:51px 0 0 0; overflow:hidden; background:#fff; border:1px solid #c5c5c5; border-right:0; text-align:center;}/* 180705 */
.M_link02 .link02 h2{margin:25px 0 25px; font-size:24px; color:#222222; text-align:center; font-family: 'NotoM'; line-height:24px;}
.M_link02 h2 span { color:#0096ff;}
.M_link02 .link02 p {color:#555; font-family: 'NotoR'; font-size:16px; }
.M_link02 .link02 p.icon02{ position:absolute; right:10%; bottom:10%;}
.M_link02 .link02 a:hover .icon02{transform: rotateY(360deg); transition:transform 300ms ease-in-out 0s;}
.M_link02 .link02 .btn_more { margin-top:15px;}

.M_link03 { position:relative; width:398px; height:255px; float:left;  margin:51px 0 0 0; overflow:hidden; background:#fff; border:1px solid #c5c5c5; text-align:center;}/* 180723 */
.M_link03 .link03 h2{margin:25px 0 25px; font-size:24px; color:#222222; text-align:center; font-family: 'NotoM'; line-height:24px;}
.M_link03 h2 span { color:#0096ff;}
.M_link03 .link03 p {color:#555; font-family: 'NotoR'; font-size:16px; }
.M_link03 .link03 p.icon03{ position:absolute; right:10%; bottom:10%;}
.M_link03 .link03 a:hover .icon03{transform: rotateY(360deg); transition:transform 300ms ease-in-out 0s;}
.M_link03 .link03 .btn_more { margin-top:15px;}

/* 갤러리 */
.gallery01 {position:relative; float:right; width:338px; height:232px; padding:23px 30px 0; margin-top:51px; background:#fff; border:1px solid #c5c5c5;}  
.gallery01 h2 {margin-bottom:17px; font-size:24px; color:#222222; text-align:center; font-family: 'NotoM'; line-height:24px;}
.gallery01 h2 span { color:#0096ff;}
.gallery01 .gall_list {overflow:hidden; width:280px; margin: 0 auto;}
.gallery01 .gall_list a { position:relative; display:block; }
.gallery01 .gall_list .img { width:280px;height:170px; }
.gallery01 .gall_list .img img { width:100%;}
.gallery01 .gall_list a:hover { background-color:#000;}
.gallery01 .gall_list a:hover .img img {transform:scale(1.2,1.2); opacity:0.5;}
.gallery01 .gall_list span { width:100%; height:44px; background:#000; opacity:0.7; position:absolute; left:0; bottom:0; display:block; text-align:left; font-family: 'NotoR'; font-size:16px; color:#222222; line-height:20px;}
.gallery01 .gall_list span.txt {white-space:nowrap; line-height:44px; text-overflow:ellipsis; overflow:hidden; font-size:14px; color:#fff; text-align:center;}
.gallery01 .btn_more { position: absolute; width:24px; height:24px; right:20px; top:20px; text-indent: -9999em; line-height: 0; font-size: 0; background:url(/images/web/music/main/btn_more.png) no-repeat center center; }

 @media (max-width: 800px) {
	
	#container, 
	.con01,
	.main_visual, .main_visual,
	.main_content,
	.gallery01,  
	.notice01, .notice01 .list_box,
	.link01, .link02, .link03, .link04,
	.banner_zone { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box }
	#container { width: 100%; padding-top: 69px; background: none; }
	.main_content { width: 95%; height: 100%; }
	.main_conwrap {background-image: none;}
	.main_visual, .link01, .link02 { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease }
	
	
	.con01 { width: 100%; margin-top:0 }
	
	/* visual */
	.mainVisual .mVisual{ height:480px; }
	.mainVisual .mVisual .rollU .obj { height:320px; }
	.mainVisual .mVisual .rollU .obj p { font-size:14px; left:0; top:30%; width:100%;  text-align:center;}

	
	/* 이전, 다음 버튼 */
	a.slidesjs-next {right:2%}
	a.slidesjs-previous { left:2%}	
	
	/* 재생, 정지 */
	a.slidesjs-play { left:50%; top:8%; margin-left:-64px;}
	a.slidesjs-playing {left:50%; top:8%; margin-left:-64px;}
	a.slidesjs-stop{left:50%; top:8%; margin-left:-64px;}

	.mainVisual .mVisual .btn_num_area { top:250px;}

	/* 바로가기*/
	.M_link01 {width:100%; height:257px; background:#1f4bb4; background-image:none; text-align:center}
	.M_link01 .link01 h2 {margin:25px 0 25px;}
	.M_link02 {width:100%; margin-top:0; border-right:1px solid #c5c5c5; border-bottom:0; box-sizing:border-box}/* 180705 */
	.M_link03 {width:100%; margin-top:0; border-right:1px solid #c5c5c5;box-sizing:border-box}/* 180723 */

	/* 갤러리 */
	.gallery01 {width:100%; height:auto; margin:0 auto; padding:20px 30px 20px;}  
	.gallery01 .gall_list li .img img {width:100%; height:auto}
	
}
	
	
 @media (max-width: 640px) {

}


 @media (max-width: 560px) {

}


 @media (max-width: 480px) {
 .mainVisual .mVisual{ height:200px; }
 .mainVisual .mVisual .rollU.one { background:url('/images/web/music/main/img_visual16_mobile.png') no-repeat center center;  }
}
 
 
 @media (max-width: 380px) {

}